@charset "UTF-8";
/* 계정 관계 (relations) 페이지 공용 스타일 — insight_feed 룩앤필 준용 */

body {
    background-color: #f8f9fa;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════
   편집형 피드 (App Store Today 풍)
   ═══════════════════════════════════════════════ */

.rel-feed-hero {
    background: linear-gradient(160deg, #f5f3ff 0%, #eef2ff 45%, #f8f9fa 100%);
    border-bottom: 1px solid #ececf5;
    /* 크게 차지하는 랜딩형 hero — 위·아래 넉넉히(시원). 위/아래 균형 유지. */
    padding: clamp(92px, 13vh, 152px) 20px 108px;
}

/* 큰 hero 는 예전의 음수 오프셋 sticky(검색줄 고정 트릭)와 안 맞아 일반 스크롤로 둔다.
   position:relative + z-index 는 필터 드롭다운이 피드 위로 겹쳐 보이게 유지하기 위함.
   유형("더 많은 연결보기") 히어로는 구조가 달라 제외. */
.rel-feed-hero:not(.rel-type-hero) {
    position: relative;
    z-index: 40;
}

.rel-feed-hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    text-align: left;   /* ① 프로토타입 구조 = 왼쪽 정렬 에디토리얼 */
}


/* 메인 히어로 상단 서비스 로고 — 서비스명(markepers) 인지용. 로고는 브랜드 자산이라
   원본 색(보라 #7337ff) 그대로 두고, 대신 헤드라인 강조색을 로고에 맞춘다(아래 rel-hero-accent). */
.rel-hero-logo {
    height: 40px;
    width: auto;
    display: block;
    margin: 0 0 24px;
}

.rel-feed-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #14142b;
    margin: 0 0 26px;
    max-width: 20ch;
}
/* 헤드라인 둘째 줄 강조 — 로고(markepers)와 동일한 브랜드 보라(#7337ff)로 통일 */
.rel-feed-hero h1 .rel-hero-accent { color: #7337ff; }

.rel-feed-hero p {
    color: #6b7280;
    font-size: clamp(1.02rem, 2.2vw, 1.24rem);
    line-height: 1.55;
    margin: 0 0 44px;
    max-width: 44ch;
}

/* hero 규모 지표 (전문성) — 실제 count 카운트업, tabular. 기존 hero 톤(인디고)에 맞춤.
   검색줄 위에 두어 스크롤 시 제목·부제와 함께 위로 밀린다(sticky top 오프셋에 반영됨). */
.rel-hero-stats {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px 52px;
    margin: 0 0 44px;
}
.rel-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.rel-hero-stat .n {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #14142b;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rel-hero-stat .l {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 7px;
}
@media (max-width: 560px) {
    .rel-hero-stats { gap: 10px 26px; }
    .rel-hero-stat .n { font-size: 1.35rem; }
}

/* 진입: hero 콘텐츠가 은은히 떠오름(sticky 컨테이너가 아닌 inner 에만 적용 → sticky 무영향) */
.rel-feed-hero-inner {
    animation: relHeroIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes relHeroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rel-feed-hero-inner { animation: none; }
}

/* 데이터 범위 안내 — 항상 보이는 라벨 대신 작은 ⓘ 아이콘만 두고, hover 또는
   클릭(포커스) 시 '자체 기준 선별'·'최근 N개월 연결 기준' 두 사실을 툴팁으로 표시.
   relations 메인 피드·유형목록·계정상세 3개 페이지 공통. JS 없이 :hover/:focus 로 동작. */
.rel-scope-basis {
    display: flex;
    justify-content: flex-end;   /* 세 페이지 공통 우측 정렬 */
    margin: 2px 0 12px;
}
#relFeed > .rel-scope-basis { margin: 2px 2px 10px; }

.rel-scope-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.08);
    color: #7c7f88;
    cursor: pointer;
    font-size: 0.76rem;
    line-height: 1.2;
    outline: none;
    transition: background 0.13s ease, color 0.13s ease;
}
.rel-scope-info:hover,
.rel-scope-info:focus-visible {
    color: #667eea;
    background: rgba(102, 126, 234, 0.15);
}
.rel-scope-info:focus-visible { box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3); }
.rel-scope-info .fa-circle-info { font-size: 0.82rem; }
.rel-scope-label { white-space: nowrap; }

.rel-scope-tip {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;            /* 아이콘이 우측 정렬 → 툴팁을 왼쪽으로 편다 (오른쪽 잘림 방지) */
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: max-content;
    max-width: min(280px, 78vw);
    padding: 10px 12px;
    background: #2b2d36;
    color: #f1f2f6;
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.13s ease, visibility 0.13s ease;
    pointer-events: none;   /* 툴팁 위로 마우스가 가도 다시 숨지 않게 */
}
.rel-scope-info:hover .rel-scope-tip,
.rel-scope-info:focus .rel-scope-tip,
.rel-scope-info:focus-visible .rel-scope-tip {
    opacity: 1;
    visibility: visible;
}
.rel-scope-tip-row { display: flex; gap: 7px; align-items: flex-start; }
.rel-scope-tip-row i { margin-top: 2px; color: #aab0ff; flex: none; }

.rel-feed-search {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 520px;
    margin: 0;   /* hero 마지막 요소 — 아래 여백은 hero 패딩이 담당 */
}
.rel-feed-search .rel-feed-search-input { flex: 1; min-width: 0; }
/* 검색 버튼 — Enter/클릭 시에만 검색 실행 */
.rel-search-btn {
    flex: 0 0 auto;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: #667eea;
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s;
}
.rel-search-btn:hover { background: #5568d8; }

.rel-feed-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0b4;
    font-size: 0.95rem;
}

.rel-feed-search-input {
    width: 100%;
    padding: 13px 18px 13px 44px;
    border: 1px solid #e2e2ee;
    border-radius: 999px;
    font-size: 0.95rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(80, 70, 160, 0.06);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.rel-feed-search-input:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 4px 18px rgba(102, 126, 234, 0.16);
}

.rel-feed-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;      /* 가운데 정렬 */
    margin: 32px 0 24px;          /* 위쪽 간격 더 + 아래 피드와 간격 */
}

.rel-feed-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 16px 64px;
}

/* ─── 스토리 행: 주요 계정 (인스타 스토리풍) ─────────── */
.rel-stories { margin: 6px 0 8px; }
.rel-stories[hidden] { display: none; }
.rel-stories-head {
    font-size: 0.82rem;
    font-weight: 700;
    color: #8890a0;
    letter-spacing: -0.2px;
    padding: 0 2px 8px;
}
.rel-stories-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* 상단 여백 = 링 위로 튀어나오는 '최근' 배지가 overflow 로 안 잘리게 */
    padding: 14px 2px 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.rel-stories-track::-webkit-scrollbar { display: none; }

/* 모바일 섹션 점프 칩 — 데스크톱은 숨김. (sticky 검색줄과 상단 충돌 방지를 위해
   자체 sticky 는 쓰지 않고, 피드 상단에 위치해 근처에서 섹션 이동에 사용) */
.rel-section-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 0;
    margin: 0 0 4px;
    background: #f8f9fa;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.rel-section-nav[hidden] { display: none; }
.rel-section-nav::-webkit-scrollbar { display: none; }
.rel-section-chip {
    flex: 0 0 auto;
    border: 1px solid #e3e6ef;
    background: #fff;
    color: #444;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rel-section-chip:hover { background: #eef0fe; border-color: #667eea; color: #667eea; }
@media (min-width: 721px) {
    .rel-section-nav { display: none !important; }
}

/* 우하단 '위로' 플로팅 버튼 (relations 전 페이지 공통) — 400px 이상 스크롤 시 표시 */
.rel-scroll-top {
    position: fixed;
    /* relations 전 페이지 공통 위치(통일) — 가장 넓은 콘텐츠(상세 1200px, 절반 600) 기준으로
       그 바깥 우측 여백에 배치. 이러면 explore/type(1120)·상세(1200) 어디서나 같은 위치 + 겹침 없음.
       좁은 화면(마진 부족)에선 max 로 20px 가장자리. */
    right: max(20px, calc(50% - 658px));
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #667eea;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(30, 25, 70, 0.25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 200;
}
.rel-scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.rel-scroll-top:hover { background: #5a6fd8; }

.rel-story {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}
.rel-story-ring {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 50%;
    /* IG 시그니처 그라데이션 링 = '주목' 신호 */
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    transition: transform 0.15s ease;
}
.rel-story-ring::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #fff;
}
.rel-story-ring .rel-avatar-lg,
.rel-story-ring .rel-avatar-fallback {
    position: relative;
    width: 62px !important;
    height: 62px !important;
    font-size: 1.35rem !important;
    border: 2px solid #fff;
}
.rel-story:hover .rel-story-ring { transform: scale(1.06); }

/* 최근 연결: 링을 브랜드 컬러로 + 상단 '최근' 텍스트 배지(이모지 X) */
.rel-story--recent .rel-story-ring {
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.rel-story-recent {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: #f03e3e;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    border: 2px solid #fff;
    white-space: nowrap;
    z-index: 1;
}
.rel-story-verified {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #1971c2;
    font-size: 0.85rem;
    background: #fff;
    border-radius: 50%;
    line-height: 1;
}
.rel-story-name {
    max-width: 100%;
    font-size: 0.78rem;
    font-weight: 600;
    color: #14142b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rel-story-meta {
    font-size: 0.68rem;
    color: #8890a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* rail (가로 스크롤) */
.rel-rail {
    margin-top: 26px;
}

/* rail 헤더: 제목 + '더보기'(섹션 전체 페이지) 링크 한 줄 */
.rel-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 2px;
}

.rel-rail-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #14142b;
    margin: 0;
}

.rel-rail-more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #667eea;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef0fe;
    border: 1px solid #dfe2fb;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rel-rail-more::after {
    content: "→";
    font-size: 0.9em;
    transition: transform 0.15s ease;
}
.rel-rail-more:hover {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
    text-decoration: none;
}
.rel-rail-more:hover::after { transform: translateX(2px); }

/* 섹션 '더보기' 전용 페이지 헤더 (뒤로가기 + 섹션 제목) */
.rel-type-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    margin-bottom: 10px;
}
.rel-type-back:hover { text-decoration: underline; }

/* 타입 페이지 hero — explore(왼쪽 정렬·대형 제목)와 달리 가운데 정렬·작은 제목·콤팩트.
   descendant 셀렉터(2클래스)로 explore용 전역 단일클래스 규칙을 확실히 이긴다. */
.rel-feed-hero.rel-type-hero { padding: 40px 20px 30px; }
.rel-type-hero .rel-feed-hero-inner { text-align: center; }
.rel-type-hero .rel-feed-hero-inner h1 {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    max-width: none;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}
.rel-type-hero .rel-feed-search { max-width: 480px; margin: 22px auto 0; }

/* 타입 페이지 필터 바 — feed-main 상단으로 이동, 가운데 정렬 + 위아래 넉넉히 */
.rel-type-filters {
    margin: 32px auto 24px;
    display: flex;
    justify-content: center;
}
.rel-filter-dropdown {
    position: relative;
    display: inline-block;
    text-align: left;
}
.rel-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(80, 70, 160, 0.05);
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rel-filter-btn:hover { border-color: #667eea; color: #667eea; }
.rel-filter-btn.active { border-color: #667eea; color: #667eea; }
.rel-filter-btn .rel-filter-caret {
    font-size: 0.7rem;
    transition: transform 0.18s ease;
}
.rel-filter-dropdown.open .rel-filter-btn .rel-filter-caret { transform: rotate(180deg); }
.rel-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #667eea;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* 팝오버 메뉴 */
.rel-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    max-width: 88vw;
    background: #fff;
    border: 1px solid #ececf5;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(40, 30, 90, 0.16);
    padding: 8px;
    z-index: 40;
}
.rel-filter-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px;
    border-bottom: 1px solid #f0f0f6;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #14142b;
}
.rel-filter-toggle-all {
    border: none;
    background: none;
    color: #667eea;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.rel-filter-toggle-all:hover { text-decoration: underline; }

/* 체크박스 옵션 그리드 — 2열로 컴팩트하게 (모두 한 팝오버 안에) */
.rel-filter-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}
.rel-filter-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.86rem;
    color: #343a40;
    cursor: pointer;
    user-select: none;
}
.rel-filter-opt:hover { background: #f5f4ff; }
.rel-filter-opt input {
    width: 16px;
    height: 16px;
    accent-color: #667eea;
    cursor: pointer;
    flex: 0 0 auto;
}

/* 적용 버튼 (변경은 [적용] 눌러야 반영) */
.rel-filter-foot {
    padding: 8px 6px 4px;
    margin-top: 6px;
    border-top: 1px solid #f0f0f6;
}
.rel-filter-apply {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #667eea;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.rel-filter-apply:hover { background: #5568d8; }
.rel-filter-apply:disabled {
    background: #c7ccf0;
    cursor: not-allowed;
    opacity: 0.8;
}

/* 가로 스크롤 제거 → 반응형 그리드(최대 3개). IG 임베드 캐러셀 가로 스와이프와의
   충돌을 원천 제거(페이지는 세로만 스크롤). 카드는 renderRail 에서 3개만 렌더. */
.rel-rail-scroll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 데스크톱: 항상 3열 한 줄 */
    gap: 16px;
    align-items: start;
    padding: 4px 2px 12px;
}

/* 좁은 화면: 3→2→1열 (컨테이너 폭에 따라 예측 가능하게) */
@media (max-width: 860px) {
    .rel-rail-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    /* 단일 컬럼이되 임베드 렌더폭(520)까지만, 가운데 정렬 */
    .rel-rail-scroll { grid-template-columns: minmax(0, 520px); justify-content: center; }
}

.rel-rail-card {
    max-width: 100%;
    min-width: 0;
}

/* 스트림 (세로 무한 스크롤) — rail(더보기 버튼)과 달리 가운데 구분선 헤더 */
.rel-stream-header {
    margin: 48px auto 22px;
    padding-top: 30px;
    border-top: 1px solid #ececf5;
    text-align: center;
}
.rel-stream-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #14142b;
    margin: 0 0 5px;
}
.rel-stream-sub {
    font-size: 0.9rem;
    color: #8890a0;
    margin: 0;
}

/* 스트림·유형("더 많은 연결보기") 그리드는 피드 레일과 '동일한 3열 체계'로 맞춘다
   (레일은 3열 강제인데 스트림만 auto-fill 이라 화면이 조금만 좁아도 2열로 떨어져
   불일치했음). 3→2→1 브레이크포인트를 레일과 일치. 1열은 임베드폭(520)까지만+가운데
   정렬해 오른쪽 빈 공간 방지. 3·2열은 컬럼폭이 520 미만이라 임베드가 항상 꽉 참. */
.rel-stream {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
@media (max-width: 860px) {
    .rel-stream { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .rel-stream { grid-template-columns: minmax(0, 520px); justify-content: center; }
}

.rel-stream-card { max-width: 100%; }

/* 관계 카드 */
.rel-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(30, 25, 70, 0.07);
    border: 1px solid #f0f0f6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s;
}

/* hover 는 그림자만 강조. transform lift 는 제거 — lift 애니메이션이 카드를 재래스터하며
   더보기 버튼의 1px border-top 을 서브픽셀에서 깜빡이게 하던 원인이라. */
.rel-card:hover {
    box-shadow: 0 10px 30px rgba(30, 25, 70, 0.12);
}

/* 유형 kicker — 카드 상단 라벨(유형) + 메타(횟수·카테고리·타입) */
.rel-card-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 12px 16px 0;
}

.rel-kicker-type {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a8aa0;   /* 유형별 색은 아래 rel-kicker--* 가 덮어씀 */
}

.rel-kicker--sponsor .rel-kicker-type { color: #e8590c; }
.rel-kicker--coauthor .rel-kicker-type { color: #2f9e44; }
.rel-kicker--tagged .rel-kicker-type { color: #1971c2; }
.rel-kicker--mention .rel-kicker-type { color: #9c36b5; }

.rel-kicker-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: #adb5bd;
}

.rel-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px 10px;
}

.rel-card-sources {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.rel-card-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: #1a1a2e;
    min-width: 0;
    max-width: 150px;
}

.rel-card-account-name {
    font-weight: 700;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rel-card-account:hover .rel-card-account-name { color: #667eea; }

.rel-card-connector {
    color: #b0b0c4;
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rel-avatar-sm { width: 28px !important; height: 28px !important; font-size: 0.75rem !important; }

.rel-card-media {
    background: #000;   /* 비율 안 맞는 게시물 레터박스(위아래 여백) 검정 */
    border-top: 1px solid #f2f2f7;
    border-bottom: 1px solid #f2f2f7;
}

/* 임베드 확인 전(로드 대기) — 헤더는 그대로 두고 '미디어 영역'만 로딩 스피너로 표시.
   실패한 IG 에러 카드가 잠깐 떴다가 교체되는 깜빡임을 방지. 성공(MEASURE) 시 해제. */
.rel-card-media.rel-media-pending {
    position: relative;
    min-height: 360px;
}
.rel-card-media.rel-media-pending > * {
    visibility: hidden;
}
.rel-card-media.rel-media-pending::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 3px solid #e8e8ef;
    border-top-color: #b3b3c4;
    border-radius: 50%;
    animation: rel-media-spin 0.8s linear infinite;
}
@keyframes rel-media-spin {
    to { transform: rotate(360deg); }
}

.rel-embed-iframe {
    width: 100%;
    min-height: 420px;
    border: none;
    display: block;
    background: #000;
}

/* 임베드 위에 커서가 있는 동안(relationsCommon.js 가 클래스 토글) 가로 오버스크롤이
   브라우저 뒤로/앞으로 제스처로 번지지 않게 차단 — IG 캐러셀 좌우 스와이프 보호.
   세로 스크롤·뒤로가기 버튼·다른 영역의 스와이프 내비게이션엔 영향 없음. */
html.rel-embed-hover,
html.rel-embed-hover body {
    overscroll-behavior-x: none;
}

/* 카드·모달·근거 임베드 모두 relationsCommon.js 스케일 방식으로 통일:
   iframe 480px 렌더(IG 캐러셀 무크롭) → clip 폭에 맞춰 transform:scale 축소 +
   translateY 로 헤더 크롭. 음수마진 크롭 제거(translateY 와 겹치면 이중 크롭).
   clip(iframe 직접 부모: slide / modal-media / evidence-clip)은 overflow:hidden 필수. */
.rel-embed-slide {
    position: relative;   /* 날짜 배지(.rel-embed-date-badge) 앵커 */
    overflow: hidden;
    min-width: 0;
    background: #000;   /* 레터박스 검정 */
}
/* 근거 임베드 단위 = 미디어(clip) + 아래 "Instagram에서 더 보기" 링크. grid item.
   카드 외형(radius/shadow)은 unit 이 갖고, clip 은 순수 크롭만. */
.rel-embed-unit {
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;   /* 레터박스 검정 — 다른 임베드 래퍼(slide/clip)와 통일 */
    box-shadow: 0 2px 10px rgba(30, 25, 70, 0.06);
}
.rel-evidence-clip {
    position: relative;   /* 날짜 배지(.rel-embed-date-badge) 앵커 */
    overflow: hidden;
    min-width: 0;
    background: #000;   /* 레터박스 검정 */
}
/* 세로 9:16 릴스 좌우검정 크롭 clip (relationsCommon.js): 9:16 비디오 박스만 남겨
   로딩 중에도 흰 여백 대신 비디오 톤과 맞는 검정 배경. (오버레이 없음 — 클릭은 IG 자체
   동작으로 인스타그램 새 탭. IG 릴스 임베드는 인라인 재생 불가.) */
.rel-embed-reel { background: #000; }

/* 임베드 확인 전(로드 대기) — evidence clip 도 피드처럼 로딩 스피너로 가림.
   깨진 IG 에러 카드가 잠깐 보이는 것 방지. 성공(MEASURE) 시 해제. */
.rel-evidence-clip.rel-media-pending { position: relative; min-height: 300px; }
.rel-evidence-clip.rel-media-pending > * { visibility: hidden; }
.rel-evidence-clip.rel-media-pending::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 3px solid #e8e8ef;
    border-top-color: #b3b3c4;
    border-radius: 50%;
    animation: rel-media-spin 0.8s linear infinite;
}

/* 로드 실패(삭제/비공개/에러) → unit 전체를 이 클릭 가능한 placeholder 로 교체(_blank).
   캡션·링크는 제거됨. 실패 unit 은 JS 가 그리드 맨 뒤로. */
a.rel-embed-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 24px 16px;
    text-align: center;
    color: #9a97a8;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    background: #f7f7fa;
    cursor: pointer;
}
a.rel-embed-unavailable:hover { background: #f0f0f5; color: #6f6c7e; }
a.rel-embed-unavailable::before {
    content: "\f1f8";                 /* fa trash — 삭제/불가 톤 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 7px;
    opacity: 0.55;
}

/* IG 자체 푸터를 크롭한 대신 우리가 다는 푸터 행: 좌측 "Instagram에서 더 보기"(새 창)
   + 우측 좋아요 수. IG 원래 링크와 동일 톤. 릴스/사진/캐러셀/모달 공통. */
.rel-embed-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-top: 1px solid #f2f2f7;
    background: #fff;
}

/* 게시물 캡션 (footer 아래) — 인스타처럼 2줄만 보이고 '더보기'로 전체 펼침 */
.rel-embed-caption {
    padding: 2px 12px 12px;
    background: #fff;
    font-size: 0.83rem;
    line-height: 1.45;
    color: #262626;
}
.rel-caption-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;      /* 원문 줄바꿈 유지 */
    word-break: break-word;
}
.rel-embed-caption.expanded .rel-caption-text {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.rel-caption-more {
    margin-top: 3px;
    border: none;
    background: none;
    padding: 0;
    color: #8e8e8e;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.rel-caption-more:hover { color: #555; }
.rel-embed-link {
    color: #667eea;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.rel-embed-link:hover { text-decoration: underline; }
/* 게시물 업로드 날짜 배지 — 미디어 좌상단 오버레이(footer 폭과 독립, 어느 화면서도 안 깨짐) */
.rel-embed-date-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    pointer-events: none;
    white-space: nowrap;
}
.rel-embed-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.rel-embed-likes,
.rel-embed-comments {
    color: #8e8e8e;
    font-size: 0.8rem;
    font-weight: 600;
}
.rel-embed-likes .fa-heart { color: #ed4956; margin-right: 3px; }
.rel-embed-comments .fa-comment { color: #a3a3ad; margin-right: 3px; }

/* 근거 게시물 캐러셀 네비 (‹ 1/N · 날짜 ›) */
/* 근거 게시물 2개 이상 → '더보기' 버튼 (클릭 시 모달 리스트) */
/* 액션바 안 "게시물 모두 보기" 버튼 (좌측) */
.rel-embed-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #e0e3f0;
    border-radius: 999px;
    background: #f5f6ff;
    color: #667eea;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.rel-embed-more:hover {
    background: #ebedff;
}

/* 근거 게시물 모달 */
.rel-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 40, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
}

.rel-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    /* 창 크기에 맞춰: 최대 3열(≈300px×3 + gap/padding)까지, 화면 넘지 않게 */
    max-width: min(1040px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(20, 18, 40, 0.35);
}

.rel-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f2f2f7;
    font-weight: 700;
    font-size: 0.92rem;
}

.rel-modal-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rel-modal-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #868e96;
    cursor: pointer;
    padding: 0 4px;
    flex: 0 0 auto;
}

.rel-modal-close:hover {
    color: #495057;
}

.rel-modal-body {
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
    /* 반응형 그리드: 폭에 따라 1~3열 자동 (열당 300~520px). auto-fit 으로 개수만큼만
       트랙 생성(빈 트랙 접힘) + 520 캡 + 가운데 정렬로 빈 공간 방지. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 520px));
    justify-content: center;
    gap: 16px;
    align-items: start;
}

.rel-modal-item {
    min-width: 0;   /* 그리드 셀 오버플로 방지 */
}

.rel-modal-media {
    position: relative;     /* 날짜 배지(.rel-embed-date-badge) 앵커 */
    overflow: hidden;       /* 스케일 임베드 clip (헤더/댓글 크롭 + 480px iframe 클립) */
    min-width: 0;
    border-radius: 8px;
    background: #000;   /* 레터박스 검정 */
}

.rel-modal-date {
    font-size: 0.76rem;
    font-weight: 600;
    color: #868e96;
    margin-bottom: 5px;
}

.rel-card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 11px 16px 14px;
}

.rel-card-postlink {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    white-space: nowrap;
}

.rel-card-postlink:hover { color: #4c5fd8; }

/* 검색 결과 계정 카드 그리드 */
.rel-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.rel-account-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f6;
    box-shadow: 0 3px 14px rgba(30, 25, 70, 0.06);
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    color: #1a1a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: box-shadow 0.18s, transform 0.18s;
}

.rel-account-card:hover {
    box-shadow: 0 10px 26px rgba(30, 25, 70, 0.12);
    transform: translateY(-2px);
}

.rel-account-card .rel-avatar-lg,
.rel-account-card .rel-avatar-fallback { margin-bottom: 4px; }

.rel-account-card-name { font-weight: 700; font-size: 0.92rem; }
.rel-account-card-username { font-size: 0.78rem; color: #868e96; }
.rel-account-card-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.rel-account-card-followers { font-size: 0.78rem; color: #868e96; margin-top: 2px; }

@media (max-width: 600px) {
    .rel-feed-hero h1 { font-size: 2.1rem; }   /* 모바일도 프로미넌트하게(기존 1.55 → 상향) */
    /* .rel-stream 열 수는 위 3→2→1(860/560) 규칙이 담당 — 여기선 안 건드림 */
}


.rel-header {
    padding: 40px 24px 28px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

.rel-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-bottom: 14px;
}

.rel-header-icon i {
    font-size: 22px;
    color: #fff;
}

.rel-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.rel-header p {
    font-size: 0.9rem;
    color: #868e96;
    margin: 0;
}

.rel-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* ─── 필터 바 ─────────────────────────────── */

.rel-filters {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
    margin-bottom: 20px;
}

.rel-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.rel-filters-row + .rel-filters-row {
    margin-top: 12px;
}

.rel-search-input {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9rem;
}

.rel-search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.rel-select,
.rel-number-input {
    padding: 8px 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    color: #343a40;
}

.rel-number-input {
    width: 120px;
}

.rel-filter-label {
    font-size: 0.8rem;
    color: #868e96;
    font-weight: 600;
    margin: 0 2px 0 6px;
}

/* 업종 칩 */
.rel-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rel-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.rel-chip:hover {
    border-color: #667eea;
    color: #667eea;
}

.rel-chip.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

/* ─── 계정 테이블 ─────────────────────────── */

.rel-table-wrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

.rel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.rel-table th {
    text-align: left;
    padding: 12px 16px;
    color: #868e96;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}

.rel-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.rel-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

.rel-table tbody tr:hover {
    background: #f8f9fb;
}

.rel-account-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.rel-avatar,
.rel-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rel-avatar {
    object-fit: cover;
    background: #f1f3f5;
}

/* 로드 실패/이미지 없음 = 중립 회색 플레이스홀더(흐린 유저 아이콘).
   실제 프로필처럼 오해되지 않도록 색상·이니셜 대신 회색만. */
.rel-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #b0b6bf;
    font-size: 0.9rem;
}

.rel-account-names {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.rel-fullname {
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.rel-username {
    font-size: 0.78rem;
    color: #868e96;
    /* 좁은 화면에서 이름 칼럼이 찌부러질 때 텍스트가 칼럼 밖으로 넘쳐
       옆 뱃지와 겹치던 문제 방지 — 항상 자기 폭 안에서 말줄임. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rel-verified {
    color: #1971c2;
    font-size: 0.75rem;
    margin-left: 4px;
}

/* 업종/유형 미니 뱃지 */
.rel-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #f1f3f5;
    color: #495057;
    margin-right: 4px;
    white-space: nowrap;
}

.rel-badge.type {
    background: #eef2ff;
    color: #5b6ee8;
}

.rel-note-cell {
    max-width: 320px;
    color: #868e96;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rel-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ─── 더 보기 / 상태 표시 ─────────────────── */

.rel-load-more {
    display: block;
    margin: 20px auto 0;
    padding: 9px 28px;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #fff;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.rel-load-more:hover {
    border-color: #667eea;
    color: #667eea;
}

.rel-load-more:disabled {
    opacity: 0.5;
    cursor: default;
}

.rel-status {
    text-align: center;
    padding: 40px 16px;
    color: #868e96;
    font-size: 0.9rem;
}

.rel-status.error {
    color: #e03131;
}

/* ─── 수집 요청 카드 (검색 중 항상 표시, 결과 그리드 아래) ───────────── */
/* 좌우 패딩 0 — 위 카드 그리드와 동일하게 .rel-feed-main 패딩(16px)에만 정렬.
   좁은 창에선 max-width 가 컨테이너보다 커서 그리드 폭까지 채워 좌우 간격이 카드와 같아진다. */
.rel-search-request { padding: 28px 0 8px; }
.rel-request-box {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 24px 24px;
    background: #fff;
    border: 1px solid #f0f0f6;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(30, 25, 70, 0.06);
    text-align: center;
}
.rel-request-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-size: 1.05rem;
}
.rel-request-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 5px;
}
.rel-request-label {
    font-size: 0.83rem;
    color: #868e96;
    line-height: 1.5;
    margin-bottom: 16px;
}
/* 테두리 하나 안에 @ + input + 버튼을 묶은 통합 필드 */
.rel-request-row {
    display: flex;
    align-items: stretch;
    border: 1px solid #dfe0ea;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rel-request-row:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.13);
}
.rel-request-at {
    display: flex;
    align-items: center;
    padding-left: 13px;
    color: #adb5bd;
    font-size: 0.95rem;
}
.rel-request-input {
    flex: 1;
    min-width: 0;
    padding: 11px 10px;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    color: #1a1a2e;
    outline: none;
}
.rel-request-btn {
    flex: none;
    padding: 0 18px;
    background: #667eea;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.13s ease;
}
.rel-request-btn:hover { background: #5568d3; }
.rel-request-btn:disabled { opacity: 0.55; cursor: default; }
.rel-request-btn i { font-size: 0.78rem; }
.rel-request-result {
    margin-top: 13px;
    font-size: 0.84rem;
    min-height: 1.2em;
}
.rel-request-ok { color: #2f9e44; }

/* ─── 수집 처리 중 / 실패 상태 (계정 상세) ───────── */
.rel-collect-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 20px;
    text-align: center;
    color: #495057;
}
.rel-collect-state > i { font-size: 2rem; color: #adb5bd; }
.rel-collect-failed > i { color: #e8a33d; }
.rel-collect-title { font-size: 1.05rem; font-weight: 600; color: #343a40; }
.rel-collect-handle { font-size: 0.9rem; color: #868e96; }
.rel-collect-desc {
    font-size: 0.86rem;
    color: #6c757d;
    max-width: 360px;
    line-height: 1.5;
}
.rel-collect-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(102, 126, 234, 0.22);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: rel-collect-spin 0.9s linear infinite;
}
@keyframes rel-collect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .rel-collect-spinner { animation: none; }
}

/* ─── 계정 상세 ───────────────────────────── */

.rel-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #868e96;
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 14px;
}

.rel-back-link:hover {
    color: #667eea;
}

.rel-profile-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 16px;
}

.rel-profile-main {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: nowrap;           /* 큰 화면: 사이드를 우측에 유지(정보 컬럼이 줄어듦) */
}

.rel-avatar-lg {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.6rem !important;
}

.rel-profile-info {
    flex: 1 1 auto;
    min-width: 0;
}

.rel-profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
}

.rel-profile-username {
    font-size: 0.88rem;
    color: #868e96;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.rel-profile-note {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: #495057;
    line-height: 1.5;
}

.rel-profile-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;    /* 큰 화면: 우측 정렬 컬럼 */
    gap: 12px;
    flex: 0 0 auto;
}

.rel-profile-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;  /* 큰 화면: 우측 */
}

.rel-profile-stat {
    text-align: center;
    line-height: 1.3;
}

.rel-profile-stat b {
    display: block;
    font-size: 1rem;
    color: #1a1a2e;
    font-variant-numeric: tabular-nums;
}

.rel-profile-stat span {
    font-size: 0.72rem;
    color: #868e96;
}

.rel-ig-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}

.rel-ig-link:hover {
    border-color: #d6249f;
    color: #d6249f;
}

.rel-external-notice {
    text-align: center;
    padding: 28px 16px;
    color: #868e96;
    font-size: 0.9rem;
    line-height: 2;
}

.rel-external-notice a {
    color: #d6249f;
    font-weight: 600;
    text-decoration: none;
}

/* 탭 — 스크롤해도 항상 상단에 sticky (목록을 내려도 유형/그래프 전환 즉시) */
.rel-tabs {
    display: flex;
    gap: 4px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    position: sticky;
    top: 46px;   /* 고정 상단바(.rel-topbar, 46px) 바로 아래에 붙는다 */
    z-index: 30;
}

.rel-tab {
    flex: 1 0 auto;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #868e96;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.rel-tab:hover {
    color: #667eea;
}

.rel-tab.active {
    background: #667eea;
    color: #fff;
}

.rel-tab-count {
    margin-left: 4px;
    font-size: 0.72rem;
    opacity: 0.75;
}


/* 관계 패널 */
.rel-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
}

.rel-panel-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f3f5;
    margin-bottom: 8px;
    min-height: 34px;
}

/* 행별 방향 배지 (out=이 계정이 한 것, in=당한 것) — 토글 대신 합친 목록에서 구분 */
.rel-dir-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rel-dir-badge.out { background: #e7f5ff; color: #1971c2; }
.rel-dir-badge.in  { background: #f3f0ff; color: #7048e8; }

.rel-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #495057;
    margin: 0;
    cursor: pointer;
}

.rel-slider-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #495057;
    margin: 0;
}

.rel-slider-label input[type="range"] {
    width: 140px;
}

/* 관계 행 */
.rel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
    transition: background 0.1s;
}

.rel-row:hover {
    background: #f8f9fb;
}

.rel-row.ghost {
    opacity: 0.62;
}

.rel-ghost-name {
    color: #868e96;
}

.rel-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.rel-badge.official {
    background: #d0ebff;
    color: #1971c2;
}

.rel-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.rel-lastseen {
    font-size: 0.75rem;
    color: #adb5bd;
    font-variant-numeric: tabular-nums;
}

/* 근거 게시물 인라인 임베드 */
.rel-row-wrap {
    border-bottom: 1px solid #f1f3f5;
    padding: 4px 0 6px;   /* 계정 그룹 간 숨통(시원한 간격) */
}

.rel-row-wrap .rel-row {
    border-bottom: none;
}

/* 게시물 개수 힌트 = 눌러보이는 pill (행 클릭 = 게시물 펼침) */
.rel-row-posts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1px solid #e2e2ee;
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.rel-row.has-evidence:hover .rel-row-posts,
.rel-row.open .rel-row-posts {
    border-color: #a5b4fc;
    background: #f5f6ff;
}
.rel-row-posts .fa-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rel-row-caret {
    font-size: 0.65rem;
    color: #adb5bd;
    transition: transform 0.18s ease;
}
.rel-row.open .rel-row-caret { transform: rotate(180deg); }

/* 별도 버튼 → 그 계정의 관계 페이지 이동 */
.rel-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e2e2ee;
    background: #fff;
    color: #667eea;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rel-account-link:hover {
    border-color: #667eea;
    background: #667eea;
    color: #fff;
}

/* 표시 폭은 작게(340px) — 실제 iframe 은 relationsCommon.js 가 480px 로 렌더(IG 캐러셀
   무크롭)시키고 transform:scale 로 이 컬럼 폭에 맞춰 축소한다. min(100%,…) 로 모바일
   가로 오버플로 방지. */
/* 근거 컨테이너: 방향별 섹션(헤더+그리드)을 세로로 쌓는 블록 */
.rel-evidence-embeds {
    display: block;
    padding: 6px 6px 16px;
}
.rel-evidence-section { margin-bottom: 16px; }
.rel-evidence-section:last-child { margin-bottom: 0; }

/* 각 섹션의 게시물 그리드 — 피드처럼 '3열 고정 + 좌측 정렬'. 1~2개면 왼쪽부터 채우고
   빈 칸을 둔다(가운데정렬/과대폭 없음). 각 셀=1/3 폭이라 임베드가 꽉 참. */
.rel-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
@media (max-width: 860px) {
    .rel-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .rel-evidence-grid { grid-template-columns: 1fr; }
}

/* 각 섹션의 관계 헤더 (피드 카드처럼 @source → @target) — 좌측 정렬(게시물과 정렬) */
.rel-evidence-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 2px 8px;
    font-size: 0.86rem;
    color: #495057;
}
.rel-ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    min-width: 0;
    text-decoration: none;   /* 링크지만 칩 스타일 유지 */
    cursor: pointer;
    border-radius: 6px;
}
.rel-ev-chip:hover { background: #f2f2f7; }
.rel-ev-chip:hover .rel-ev-name { color: #667eea; text-decoration: underline; }
.rel-evidence-head .rel-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}
.rel-ev-name { color: #14142b; }
.rel-ev-conn { color: #adb5bd; font-weight: 700; font-size: 1rem; }

/* 폭/변형(transform scale)·높이는 relationsCommon.js 스케일 임베드가 인라인으로 관리.
   시각 스타일(radius/shadow/bg)은 .rel-evidence-clip 으로 이관. */
.rel-evidence-embeds .rel-embed-iframe {
    min-height: 420px;
    border: none;
    background: #fafafd;
}

/* ─── 그래프 패널 ─────────────────────────── */

.rel-graph-wrap {
    position: relative;
    display: flex;
}

#relGraphCanvas {
    flex: 1;
    height: 560px;
    border-radius: 8px;
    background: #fafbfc;
    transition: opacity 0.18s ease;
}

/* 재중심 전환 중 — 전체 재배치가 튀어 보이지 않게 잠깐 흐림 */
#relGraphCanvas.rel-graph-fading { opacity: 0.35; }

/* 이동 경로 브레드크럼 — 재중심 탐색의 방향감/복귀 */
.rel-graph-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.rel-trail-chip {
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.rel-trail-chip:hover { border-color: #667eea; color: #667eea; }
.rel-trail-chip.current {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
    cursor: default;
}
.rel-trail-sep { font-size: 0.6rem; color: #ced4da; }

/* 사이드 패널 헤더 (제목 + 닫기) */
.rel-graph-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    color: #495057;
    min-height: 20px;
}
.rel-graph-side-close {
    border: none;
    background: none;
    color: #adb5bd;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
}
.rel-graph-side-close:hover { color: #495057; }


/* 사이드 패널 = 캔버스 위 오버레이 카드 — flex 리플로우로 캔버스가 밀리거나
   카드 밖으로 튀어나오는 문제 없음(그래프 리사이즈도 불필요). */
.rel-graph-side {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 260px;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(30, 25, 70, 0.14);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 20;
}

.rel-graph-side .rel-profile-stat {
    text-align: left;
}

.rel-graph-side-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rel-graph-btn {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.15s;
}

.rel-graph-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

/* 핵심 액션(이 계정 중심으로 보기) — 채운 색으로 강조 */
.rel-graph-btn.primary {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}
.rel-graph-btn.primary:hover { background: #5568d8; color: #fff; }

.rel-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    color: #868e96;
    align-items: center;
}

.rel-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 그래프 컨트롤 '신규' 범례 — 주황 엣지/링 의미 안내(관심 계정일 때만 표시) */
.rel-graph-newlegend {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e8590c;
}

@media (max-width: 720px) {
    .rel-note-cell,
    .rel-col-note {
        display: none;
    }

    .rel-fullname {
        max-width: 140px;
    }

    .rel-profile-side {
        align-items: flex-start;
    }

    .rel-graph-wrap {
        flex-direction: column;
    }

    /* 모바일: 사이드 패널을 하단 시트로 — 캔버스를 가리지 않고 위로 뜸 */
    .rel-graph-side {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 55vh;
        overflow-y: auto;
        border-left: none;
        border-top: 1px solid #e9ecef;
        border-radius: 16px 16px 0 0;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(30, 25, 70, 0.14);
        z-index: 60;
    }

    #relGraphCanvas {
        /* .rel-graph-wrap 이 column 이 되면 세로가 주축 → base 의 flex:1(flex-basis:0%)
           이 height 를 덮어써 캔버스가 높이 0 으로 붕괴한다. flex 를 풀어 명시 높이 사용. */
        flex: none;
        width: 100%;
        height: 420px;
    }
}

/* 모바일 관계 행 리플로우 — 데스크톱은 한 줄(아바타·이름·뱃지·팔로워/날짜/근거)이지만
   좁은 폭에선 4개 그룹이 안 들어가 이름 칼럼이 찌부러지고 뱃지와 겹친다.
   → 뱃지 줄(.rel-row-meta)을 이름 아래 전체폭으로 내리고, 날짜는 생략(근거 임베드에 표기됨). */
@media (max-width: 600px) {
    .rel-row {
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 6px;
    }
    .rel-account-names {
        flex: 1 1 auto;
        min-width: 0;
    }
    .rel-row-meta {
        order: 4;
        flex: 1 1 100%;
    }
    .rel-row-right {
        order: 3;
        flex: 0 0 auto;
        margin-left: auto;
        gap: 8px;
    }
    .rel-lastseen {
        display: none;
    }
    .rel-fullname {
        max-width: 100%;
    }
}

/* ─── 로그인 게이트 (비로그인 미터링 티저) ───────────────────────── */
/* 고정 상단바(공용 헤더, relationsCommon.js 주입) — 스크롤해도 항상 보인다.
   sticky 탭바(.rel-tabs)는 이 아래(top:54px)로 붙고, body 는 padding-top 으로 밀려
   상단바에 안 가린다. 버튼은 콘텐츠(1120) 우측 가장자리에 정렬. */
.rel-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 max(16px, calc(50% - 560px));
    background: rgba(248, 249, 253, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(20, 24, 60, 0.06);
}
body.rel-has-topbar { padding-top: 46px; }   /* 상단바(모든 relations 페이지)만큼 콘텐츠 내림 */
/* iOS Safari 가로 오버플로우 방지 가드 — 페이지 어딘가에 가로 넘침이 생기면 Safari 는
   레이아웃 뷰포트를 넓혀, position:fixed 상단바(.rel-topbar, right:0/flex-end)가 그 넓어진
   뷰포트 끝까지 늘어나 우측 버튼(햄버거)이 화면 밖으로 잘린다. 페이지 가로 스크롤을 원천
   차단해 방지. 가로 스크롤 레일(.rel-stories-track/.rel-tabs-scroll/.rel-section-nav)은
   자체 overflow-x:auto 라 영향 없음. clip 은 스크롤 컨테이너를 만들지 않아 세로 sticky·
   position:fixed 모달에도 영향이 없다(hidden 과 다름). */
html:has(> body.rel-has-topbar) { overflow-x: clip; }
body.rel-has-topbar { overflow-x: clip; }
.rel-pill-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
/* 헤더(상단바/탭바) 안 pill 은 컴팩트하게(두 줄 방지) */
.rel-topbar .rel-login-pill,
.rel-tabs--auth .rel-login-pill { padding: 6px 13px; font-size: 13px; }
/* 상세: 인증 버튼을 탭바 우측 끝에 합쳐 '한 줄' 헤더로. 탭 버튼들은 .rel-tabs-scroll 안에서
   가로 스크롤(좁은 화면)되고, 인증 버튼은 그 밖 우측에 고정 → 탭 스크롤과 무관하게 항상 보임.
   (bg/그림자 없이 자연스럽게 탭바에 통합.) */
.rel-tabs--auth { align-items: center; overflow-x: visible; }
.rel-tabs-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.rel-pill-group--intabs { flex: 0 0 auto; margin-left: 10px; }
.rel-login-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #667eea;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
    transition: background 0.15s;
    white-space: nowrap;
}
/* 좁은 화면: 라벨 숨겨 아이콘만 → 헤더(피드로 돌아가기·제목)와 겹치지 않게 footprint 축소 */
@media (max-width: 1100px) {
    .rel-pill-group .rel-pill-label { display: none; }
    .rel-pill-group .rel-login-pill { padding: 9px 12px; gap: 0; }
}
.rel-login-pill:hover { background: #5568d8; color: #fff; }

/* 로그인 사용자용 로그아웃 pill — 중립(흰 배경) 스타일로 로그인 CTA 와 구분 */
.rel-logout-pill {
    background: #fff;
    color: #4a5069;
    border: 1px solid #e0e3ee;
    box-shadow: 0 2px 10px rgba(17, 20, 45, 0.08);
    cursor: pointer;
}
.rel-logout-pill:hover { background: #f3f4fa; color: #2c3050; }

/* '로그인해야 볼 수 있어요' 안내 모달 */
.rel-login-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 20, 45, 0.55);
    padding: 20px;
}
.rel-login-box {
    position: relative;
    max-width: 340px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 32px 26px 26px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.rel-login-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #9aa0b5;
    cursor: pointer;
}
.rel-login-close:hover { color: #555; }
.rel-login-title { font-size: 18px; font-weight: 700; color: #1c2036; margin-bottom: 8px; }
.rel-login-desc { font-size: 14px; color: #6b7189; margin-bottom: 20px; line-height: 1.5; }
.rel-login-cta {
    display: inline-block;
    padding: 11px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
}
.rel-login-cta:hover { opacity: 0.92; color: #fff; }

/* 무한 스크롤 미터링: 첫 페이지 뒤 '로그인하면 더' 인라인 안내 */
.rel-login-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px 40px;
    text-align: center;
}
.rel-login-more-text { font-size: 15px; color: #6b7189; font-weight: 500; }
.rel-login-more-btn {
    padding: 10px 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}
.rel-login-more-btn:hover { opacity: 0.92; }

/* 계정 상세 잠금(비로그인 + 첫 페이지 밖) — 서버 렌더 오버레이 */
.rel-locked {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}
.rel-locked-box {
    max-width: 360px;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid #eceef5;
    border-radius: 16px;
    padding: 44px 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.rel-locked-box .fa-lock { font-size: 34px; color: #667eea; margin-bottom: 16px; }
.rel-locked-title { font-size: 19px; font-weight: 700; color: #1c2036; margin-bottom: 10px; }
.rel-locked-desc { font-size: 14px; color: #6b7189; margin-bottom: 22px; line-height: 1.5; }
.rel-locked-cta {
    display: inline-block;
    padding: 12px 34px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
}
.rel-locked-cta:hover { opacity: 0.92; color: #fff; }

/* ─── 관심 계정(즐겨찾기) — 로그인 워크스페이스 ───────────────────── */
/* '관심 계정' pill — 인증 그룹 안에서 로그아웃 pill 과 가로로 나란히(흰 배경) */
.rel-fav-pill {
    background: #fff;
    color: #4a5069;
    border: 1px solid #e0e3ee;
    box-shadow: 0 2px 10px rgba(17, 20, 45, 0.08);
    cursor: pointer;
}
.rel-fav-pill:hover { background: #eef1fb; color: #3b4cca; border-color: #c9d2f5; }
.rel-fav-pill .fa-bookmark { color: #4c6ef5; }
/* 데이터 통계 등 중립 도구 pill — 저장함과 같은 흰 배경 계열 */
.rel-tool-pill {
    background: #fff;
    color: #4a5069;
    border: 1px solid #e0e3ee;
    box-shadow: 0 2px 10px rgba(17, 20, 45, 0.08);
}
.rel-tool-pill:hover { background: #eef1fb; color: #3b4cca; border-color: #c9d2f5; }
.rel-tool-pill .fa-chart-column { color: #4c6ef5; }
/* 섹션 제목 옆 개수 배지 */
.rel-fav-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 4px;
    background: #eef0f6;
    color: #6b7189;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.rel-fav-section-title .fa-star { color: #f0a500; }
.rel-fav-section-title .fa-image { color: #4c6ef5; }
.rel-fav-section-title .fa-clock-rotate-left { color: #8a90a6; }
.rel-fav-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    background: #e8590c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}

/* ★ 저장 토글 버튼 (카드/상세 공용) */
.rel-fav-btn {
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #c2c7d6;
    cursor: pointer;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 1px 5px rgba(17, 20, 45, 0.12);
    transition: color 0.15s, transform 0.1s;
}
.rel-fav-btn:hover { color: #f0a500; transform: scale(1.08); }
.rel-fav-btn.is-fav { color: #f0a500; }
/* 검색 카드 우상단 오버레이 (카드는 relative) */
.rel-account-card { position: relative; }
.rel-card-fav { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* 상세 헤더: ★ 저장 버튼 + '인스타 열기' 를 한 줄로(그전엔 ★가 컬럼 중간에 떠 보였음) */
.rel-profile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;              /* 좁은 화면: 버튼이 넘치지 않고 다음 줄로 */
    justify-content: flex-end;   /* 큰 화면: 우측 */
}
/* 작은 화면(≤900px): 인스타그램식 스택 — 사이드를 정보 아래 전폭·좌측 정렬. */
@media (max-width: 900px) {
    .rel-profile-main { flex-wrap: wrap; }
    .rel-profile-side {
        flex: 1 1 100%;
        width: 100%;
        align-items: flex-start;   /* 좌측 */
        margin-top: 4px;
    }
    .rel-profile-stats { justify-content: flex-start; gap: 26px; }
    .rel-profile-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
    /* 아주 좁으면 도구/IG 버튼은 아이콘만(라벨 숨김) → 한 줄 안에 정리 */
    .rel-profile-actions .rel-btn-label { display: none; }
    .rel-profile-actions .rel-acct-tool,
    .rel-profile-actions .rel-ig-link { padding: 8px 12px; }
}
.rel-profile-fav {
    width: 38px;
    height: 38px;
    font-size: 16px;
    margin: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    box-shadow: none;
    color: #c2c7d6;
}
.rel-profile-fav:hover { border-color: #f0a500; color: #f0a500; }
.rel-profile-fav.is-fav { color: #f0a500; border-color: #f5d78a; background: #fff7e6; }

/* 관심 계정 패널(모달) — 로그인 모달 골격 재사용, 폭만 확장 */
.rel-fav-box {
    max-width: 460px;
    text-align: left;
    padding: 26px 22px 22px;
    max-height: 80vh;
    overflow-y: auto;
}
.rel-fav-title {
    font-size: 18px;
    font-weight: 700;
    color: #1c2036;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rel-fav-title .fa-star { color: #f0a500; }
.rel-fav-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #8a90a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 18px 0 8px;
}
.rel-fav-list { display: flex; flex-direction: column; gap: 4px; }
.rel-fav-empty { font-size: 14px; color: #8a90a6; padding: 16px 4px; line-height: 1.5; }
.rel-fav-row-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 6px 6px;
}
.rel-fav-row-wrap:hover { background: #f5f6fb; }
.rel-fav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.rel-fav-row-info { display: flex; flex-direction: column; min-width: 0; }
.rel-fav-row-name {
    font-size: 14px; font-weight: 600; color: #1c2036;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rel-fav-row-user {
    font-size: 12px; color: #8a90a6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rel-fav-new {
    flex: 0 0 auto;
    margin-left: auto;
    background: #e8590c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rel-fav-row-star { width: 30px; height: 30px; flex: 0 0 auto; box-shadow: none; background: none; }
.rel-avatar-sm { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }

/* ─── 저장한 게시물(북마크) ───────────────────────────────────── */
/* 기본 북마크(패널 행의 아이콘형) */
.rel-post-save {
    border: none;
    background: none;
    color: #98a0b3;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.rel-post-save:hover { color: #4c6ef5; }
.rel-post-save.is-saved { color: #4c6ef5; }

/* 카드 하단 액션바: [게시물 N개 모두 보기 | 저장]. 임베드 밖 우리 UI 영역이라
   IG 자체 저장 버튼과 헷갈리지 않는다. split=둘 다, 아니면 저장만 우측 정렬. */
.rel-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 12px;
    background: #fff;
    justify-content: flex-end;
}
.rel-card-actions.split { justify-content: space-between; }

/* 라벨형 저장 버튼("저장"/"저장됨") — 텍스트로 우리 기능임을 명확히 */
.rel-save-btn {
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 600;
}
.rel-save-btn:hover { border-color: #4c6ef5; color: #4c6ef5; }
.rel-save-btn.is-saved { background: #eef1fb; border-color: #c9d2f5; color: #3b4cca; }
.rel-save-btn .fa-bookmark { font-size: 0.85rem; }
.rel-save-label { line-height: 1; }

/* 패널 게시물 행: IG 아이콘 원형 + 행 우측 북마크(작게, 그림자 제거) */
.rel-post-ic {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    color: #fff;
    font-size: 16px;
}
.rel-fav-row-star.rel-post-save { box-shadow: none; background: none; width: 30px; height: 30px; }

/* ─── 저장함 확장: 리스트 그룹·상태 태그·메모·인라인 편집 ───────── */
.rel-fav-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #5b6178;
    margin: 12px 0 4px;
    padding: 0 4px;
}
.rel-fav-group .fa-folder { color: #f0a500; }
.rel-fav-group .fa-inbox { color: #b3b9cc; }
.rel-fav-status {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: 1px;
    white-space: nowrap;
}
.rel-fav-status.st-planned { background: #fff4e0; color: #b06e00; }
.rel-fav-status.st-active { background: #e3f4ec; color: #1d7a4f; }
.rel-fav-status.st-done { background: #eceef4; color: #6a7186; }
.rel-fav-row-note {
    font-size: 11px;
    color: #9aa0b4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rel-fav-edit {
    border: none;
    background: none;
    color: #b3b9cc;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 12px;
}
.rel-fav-edit:hover { color: #4c6ef5; background: #eef1fb; }
.rel-fav-editor {
    background: #f5f6fb;
    border-radius: 10px;
    padding: 10px;
    margin: 2px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 편집 폼: 제목 + 내용 두 필드만 (세로 스택, 둘 다 전폭) */
.rel-fav-title-input,
.rel-fav-note-input {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: #1c2036;
    background: #fff;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.rel-fav-title-input { font-weight: 600; }
.rel-fav-note-input { resize: vertical; }
.rel-fav-title-input:focus,
.rel-fav-note-input:focus { border-color: #4c6ef5; }
/* 행 안 메모 제목(내용 위, 굵게 파랑기 없이 강조) */
.rel-fav-row-memo-title {
    font-size: 12px;
    font-weight: 600;
    color: #3c4257;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rel-fav-editor-actions { display: flex; justify-content: flex-end; }
.rel-fav-editor-save {
    border: none;
    background: #4c6ef5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
}
.rel-fav-editor-save:disabled { opacity: 0.6; cursor: default; }
.rel-fav-stats-link {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #4c6ef5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rel-fav-stats-link:hover { text-decoration: underline; }

/* ─── 공통 연결 비교 ─────────────────────────────────────────── */
.rel-fav-cmp-toggle {
    margin-left: auto;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: none;
    letter-spacing: 0;
}
.rel-fav-cmp-toggle:hover { border-color: #4c6ef5; color: #4c6ef5; }
.rel-fav-cmp-toggle.on { background: #4c6ef5; border-color: #4c6ef5; color: #fff; }
.rel-fav-section-title { display: flex; align-items: center; gap: 6px; }
.rel-cmp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef1fb;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.rel-cmp-bar-hint { font-size: 12px; color: #3b4cca; flex: 1 1 auto; }
.rel-cmp-run {
    border: none;
    background: #4c6ef5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
}
.rel-cmp-run:disabled { opacity: 0.45; cursor: default; }
.rel-fav-row--pickable { cursor: pointer; }
.rel-cmp-pick {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid #ccd2e3;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.12s;
}
.rel-cmp-pick.picked { background: #4c6ef5; border-color: #4c6ef5; color: #fff; }
.rel-cmp-box {
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
}
/* .rel-login-box 의 text-align:center 상속으로 행 이름/아이디만 가운데 정렬돼
   유형 태그(flex, 좌측)와 어긋나던 문제 → 저장함/비교 박스는 좌측 정렬로 리셋.
   비교 헤드(.rel-cmp-head)는 자체 text-align:center 로 가운데 유지. */
.rel-fav-box,
.rel-cmp-box { text-align: left; }
.rel-cmp-heads {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
}
.rel-cmp-head {
    flex: 1 1 0;
    min-width: 0;
    background: #f5f6fb;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.rel-cmp-head.side-a { box-shadow: inset 0 3px 0 #7c6ce8; }
.rel-cmp-head.side-b { box-shadow: inset 0 3px 0 #3aa7a0; }
.rel-cmp-head-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    max-width: 100%;
}
.rel-cmp-head-name {
    font-size: 13px; font-weight: 700; color: #1c2036;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.rel-cmp-head-user { font-size: 11px; color: #8a90a6; }
.rel-cmp-head-total { font-size: 12px; font-weight: 700; color: #4c6ef5; }
.rel-cmp-vs {
    align-self: center;
    font-size: 12px;
    font-weight: 800;
    color: #b3b9cc;
    flex: 0 0 auto;
}
.rel-cmp-types { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.rel-cmp-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 8px;
    background: #fafbfe;
}
.rel-cmp-type-a { flex: 1 1 0; text-align: right; font-weight: 700; color: #7c6ce8; }
.rel-cmp-type-b { flex: 1 1 0; text-align: left; font-weight: 700; color: #3aa7a0; }
.rel-cmp-type-label { flex: 0 0 auto; color: #5b6178; font-size: 12px; min-width: 64px; text-align: center; }
.rel-cmp-row-types { display: flex; gap: 8px; font-size: 11px; overflow: hidden; }
.rel-cmp-tag-a { color: #7c6ce8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-cmp-tag-b { color: #3aa7a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-cmp-more { font-size: 12px; color: #8a90a6; padding: 8px 4px; }

/* ─── 데이터 통계 페이지 ─────────────────────────────────────── */
.rel-stats-sub { color: rgba(255, 255, 255, 0.85); font-size: 14px; margin: 6px 0 0; }
.rel-stats-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}
.rel-stats-note { text-align: center; color: #8a90a6; font-size: 14px; padding: 30px 0; }
.rel-stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}
.rel-stats-card {
    background: #fff;
    border: 1px solid #eceef4;
    border-radius: 14px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.rel-stats-card i { color: #4c6ef5; font-size: 16px; }
.rel-stats-card .n {
    font-size: 22px;
    font-weight: 800;
    color: #1c2036;
    font-variant-numeric: tabular-nums;
}
.rel-stats-card .l { font-size: 12px; color: #8a90a6; }
.rel-stats-section { margin-bottom: 30px; }
.rel-stats-section h2 {
    font-size: 15px;
    font-weight: 700;
    color: #1c2036;
    margin: 0 0 12px;
}
.rel-stats-bars { display: flex; flex-direction: column; gap: 7px; }
.rel-stats-bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rel-stats-bar-label {
    flex: 0 0 150px;
    color: #3c4257;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.rel-stats-bar-label em { font-style: normal; color: #9aa0b4; font-size: 11px; }
.rel-stats-bar-track {
    flex: 1 1 auto;
    height: 12px;
    background: #f0f2f8;
    border-radius: 999px;
    overflow: hidden;
}
.rel-stats-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #4c6ef5;
}
.rel-stats-bar-value {
    flex: 0 0 76px;
    font-variant-numeric: tabular-nums;
    color: #1c2036;
    font-weight: 600;
    font-size: 12px;
}
.rel-stats-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 180px;
    padding: 4px 0 0;
    overflow-x: auto;
}
.rel-stats-col {
    flex: 1 1 0;
    min-width: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.rel-stats-col-stack {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: calc(100% - 16px);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.rel-stats-col-seg { display: block; width: 100%; }
.rel-stats-col-label {
    height: 16px;
    font-size: 9px;
    color: #9aa0b4;
    white-space: nowrap;
    text-align: center;
}
.rel-stats-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.rel-stats-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #5b6178;
}
.rel-stats-legend-item .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@media (max-width: 640px) {
    .rel-stats-bar-label { flex-basis: 96px; font-size: 12px; }
    .rel-stats-bar-value { flex-basis: 60px; }
    .rel-stats-cards { gap: 8px; }
    .rel-stats-card .n { font-size: 17px; }
}
.rel-hero-stats-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    transition: background 0.15s;
}
.rel-hero-stats-link:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ─── 다중 메모 (편집 카드 + 행 미리보기) ─────────────────────────── */
.rel-fav-row-memo {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    padding-left: 8px;
    border-left: 2px solid #e6e9f2;
}
.rel-fav-row-memo + .rel-fav-row-memo { margin-top: 4px; }
.rel-memo-cards { display: flex; flex-direction: column; gap: 8px; }
.rel-memo-card {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rel-memo-card-head { display: flex; gap: 6px; align-items: center; }
.rel-memo-card-head .rel-fav-title-input { flex: 1 1 auto; }
.rel-memo-del {
    border: none;
    background: none;
    color: #c0c5d6;
    cursor: pointer;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 999px;
    font-size: 13px;
}
.rel-memo-del:hover { color: #e8590c; background: #fdeee6; }
.rel-memo-add {
    margin-right: auto;
    border: 1px dashed #c9cfe0;
    background: #fff;
    color: #5568d8;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rel-memo-add:hover { background: #eef1fb; border-color: #4c6ef5; }
.rel-fav-editor-actions { justify-content: space-between; }

/* ─── 상세 프로필 도구 버튼(통계/비교) — Instagram 열기와 같은 톤 ──── */
.rel-acct-tool { cursor: pointer; }
.rel-acct-tool .fa-chart-column { color: #4c6ef5; }
.rel-acct-tool .fa-code-compare { color: #3aa7a0; }

/* ─── 비교 상대 피커 ─────────────────────────────────────────── */
.rel-cmp-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: #1c2036;
    outline: none;
    margin-bottom: 10px;
}
.rel-cmp-search:focus { border-color: #4c6ef5; }
.rel-cmp-cand {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}
.rel-cmp-cand:hover { background: #f5f6fb; border-radius: 10px; }

/* 계정 통계 모달: 헤더 @username */
.rel-acctstats-user { font-size: 13px; font-weight: 600; color: #8a90a6; }

/* ─── 계정 통계 월별 Chart.js 컨테이너 (반응형 높이 필요) ─────────── */
.rel-acct-chart-wrap {
    position: relative;
    height: 220px;
    margin: 4px 0 14px;
}
/* 모달 헤더 돌아가기(←) 버튼 — 비교/피커에서 이전 화면으로 */
.rel-modal-back {
    border: none;
    background: #eef1fb;
    color: #4c6ef5;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rel-modal-back:hover { background: #dfe4fa; }

/* ─── 비교 모달: 통계와 동일 항목의 A↔B diverging 막대 ───────────── */
.rel-cmp-drows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.rel-cmp-drow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.rel-cmp-drow-val {
    flex: 0 0 40px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.rel-cmp-drow-val.a { text-align: right; color: #7c6ce8; }
.rel-cmp-drow-val.b { text-align: left; color: #3aa7a0; }
.rel-cmp-drow-track {
    flex: 1 1 0;
    height: 10px;
    background: #f0f2f8;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}
.rel-cmp-drow-track.a { justify-content: flex-end; }   /* A 막대는 가운데 쪽으로 자람 */
.rel-cmp-drow-track.b { justify-content: flex-start; }
.rel-cmp-drow-bar { height: 100%; border-radius: 999px; display: block; }
.rel-cmp-drow-bar.a { background: #7c6ce8; }
.rel-cmp-drow-bar.b { background: #3aa7a0; }
.rel-cmp-drow-label {
    flex: 0 0 88px;
    text-align: center;
    color: #5b6178;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── relations 루트화(/): 상단바 좌측 '데이터 보드' 링크(메인만) ──── */
/* 좌=데이터 보드 링크(메인 페이지에만 존재), 우=인증 pill 그룹.
   pill 그룹에 margin-left:auto → 홈 링크가 없어도(서브 페이지) 항상 우측 정렬. */
.rel-topbar { justify-content: flex-start; }
#relPillGroup { margin-left: auto; }
.rel-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5069;
    background: #fff;
    border: 1px solid #e0e3ee;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(17, 20, 45, 0.08);
    white-space: nowrap;
    flex: 0 0 auto;
}
.rel-home-link:hover { background: #eef1fb; color: #3b4cca; border-color: #c9d2f5; }
.rel-home-link .fa-house { color: #667eea; }
/* ≤1100px(원래 라벨 숨기고 아이콘만 보이던 구간)부터는 '데이터 보드' 버튼 자체를 숨긴다
   — 아이콘만 노출하지 않고 완전히 사라지게. */
@media (max-width: 1100px) { .rel-home-link { display: none; } }

/* ─── relTopbar ⋮ 메뉴(약관·개인정보·문의·계정설정) ───────────────── */
.rel-menu-wrap { position: relative; flex: 0 0 auto; }
/* ⋮ → ☰ '메뉴' 버튼: 저장함 등 다른 pill 과 동일한 중립(흰 배경) 스타일 */
.rel-menu-btn {
    background: #fff;
    color: #4a5069;
    border: 1px solid #e0e3ee;
    box-shadow: 0 2px 10px rgba(17, 20, 45, 0.08);
    cursor: pointer;
}
.rel-menu-btn:hover { background: #eef1fb; color: #3b4cca; border-color: #c9d2f5; }
.rel-menu-btn .fa-bars { color: #4c6ef5; }
.rel-menu-sep { height: 1px; background: #eceef4; margin: 5px 6px; }
.rel-menu-logout {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #2b3145;
    font: inherit;
}
.rel-menu-logout .fa-right-from-bracket { color: #98a0b3; }
.rel-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 20, 45, 0.16);
    padding: 6px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
}
.rel-menu-item {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    color: #2b3145;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
}
.rel-menu-item:hover { background: #f2f4fb; color: #2b3145; }
/* ⋮ 메뉴의 '문의하기' 는 <button> — <a> 용 .rel-menu-item 에 버튼 리셋 보강 */
.rel-menu-contact {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    /* font: inherit 는 .rel-menu-item 의 font-size(13.5px)까지 리셋해 버튼만 커졌음 →
       폰트는 .rel-menu-item 값과 동일하게 개별 지정. */
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: inherit;
    color: #2b3145;
}

/* ─── 문의하기 모달(.rel-login-box 재사용 + 폼 확장) ───────────────── */
.rel-contact-box { max-width: 400px; text-align: left; }
.rel-contact-box .rel-login-title { text-align: center; }
.rel-contact-box .rel-login-desc { text-align: center; }
.rel-contact-form { display: flex; flex-direction: column; gap: 12px; }
.rel-contact-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e2e2ee;
    border-radius: 12px;
    font-size: 0.92rem;
    font-family: inherit;
    color: #1c2036;
    background: #fbfbfe;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rel-contact-input:focus {
    outline: none;
    border-color: #a5b4fc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.14);
}
.rel-contact-textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.rel-contact-status {
    font-size: 0.84rem;
    color: #6b7189;
    margin: -2px 2px 0;
    line-height: 1.45;
}
.rel-contact-status.is-error { color: #e0245e; }
.rel-contact-submit { margin-top: 4px; width: 100%; }
.rel-contact-submit:disabled { opacity: 0.6; cursor: default; }
.rel-contact-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 4px 4px;
    text-align: center;
}
.rel-contact-done .fa-circle-check { font-size: 40px; color: #4caf7d; }
.rel-contact-done span { font-size: 0.92rem; color: #4a5069; line-height: 1.55; }

/* ═══════════════════════════════════════════════
   AI 인사이트 (계정 상세 탭 · 유형 페이지 카드 재사용)
   ═══════════════════════════════════════════════ */
/* 생성 대기 스트립 — '분석 중' 을 은은히 펄스(탭 종합 요약 블록은 없앰) */
.rel-insight-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #f6f4ff;
    border: 1px solid #e9e6fb;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #7c74b0;
    animation: relInsightPulse 1.1s ease-in-out infinite;
}
/* 'AI' 배지 — 인사이트가 AI 생성물임을 명시(wand 아이콘 대체) */
.rel-ai-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: #7c6cf0;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.7;
}
@keyframes relInsightPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .rel-insight-loading { animation: none; }
}

/* 계정별 노트 — 각 관계 행 하단, 이름 아래로 들여쓴 가벼운 AI 주석.
   (꽉 찬 박스는 여러 계정이 쌓이면 줄무늬처럼 무거워져 제거 — 들여쓰기+뮤트 텍스트로 종속 표현) */
/* AI 인사이트 노트 — 이름 아래 들여쓰기 + 얇은 액센트 룰(성과는 게시물별로 임베드에 별도) */
.rel-row-insight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* 이름(아바타36+gap12+행패딩6=54) 아래로 정렬 + 그룹 간 넉넉한 아래 여백(시원한 간격) */
    margin: 10px 16px 22px 54px;
    padding: 2px 0 2px 14px;
    border-left: 2px solid #e0dcf6;   /* 인용문 같은 얇은 액센트 룰(무거운 박스 대신) */
    background: none;
    font-size: 0.92rem;                /* 키워서 가독성 */
    line-height: 1.78;                 /* 시원한 줄간격 */
    color: #443f5e;
}
.rel-row-insight .rel-ai-badge { margin-top: 2px; }
.rel-row-insight .rel-row-insight-text { flex: 1; }

/* 접힌(닫힌) 행에서는 AI 노트 숨김 — 펼쳤을 때만 근거와 함께 표시(목록은 시원하게).
   노트는 .rel-row 바로 다음 형제라 인접 선택자로 행의 open 상태를 따라간다. */
.rel-row:not(.open) + .rel-row-insight { display: none; }

/* 유형 페이지 카드 안의 계정별 노트(상세에서 생성분 재사용) — 카드 폭에 맞춰 동일 스타일 */
.rel-row-insight.rel-card-insight {
    margin: 10px 14px 16px;
    padding: 0 0 0 14px;
}

/* 게시물별 성과 업리프트 버튼(카드 액션바·저장 왼쪽) — 클릭 시 비교 게시물 모달 */
.rel-perf-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; background: none; border: 0; cursor: pointer;
    padding: 4px 6px; border-radius: 8px; margin-right: auto;  /* 저장 버튼을 오른쪽으로 밀기 */
}
.rel-perf-btn:hover { background: #f3f1fb; }
.rel-perf-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 700; font-size: 0.82rem; padding: 3px 10px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.rel-perf-chip.up { color: #2b8a3e; background: #e6f4ea; }
.rel-perf-chip.down { color: #c92a2a; background: #fbe9e9; }
.rel-perf-more { color: #9a95ad; font-size: 0.8rem; }

/* 비교(앞뒤) 게시물 embed 모달 */
.rel-perf-modal {
    position: fixed; inset: 0; z-index: 1000; background: rgba(20,18,40,.55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rel-perf-modal-box {
    position: relative; background: #fff; border-radius: 16px;
    max-width: 920px; width: 100%; max-height: 88vh; overflow-y: auto;
    padding: 24px 24px 20px;
}
.rel-perf-modal-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: #f1f3f5; cursor: pointer; color: #495057;
}
.rel-perf-modal-title { font-size: 1.1rem; font-weight: 800; color: #14142b; padding-right: 40px; }
.rel-perf-modal-desc { margin: 6px 0 18px; color: #6b6784; font-size: 0.88rem; line-height: 1.5; }
.rel-perf-modal-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
    align-items: start;   /* 셀별 자연 높이(masonry). stretch 시 짧은 임베드 아래 빈 공간 생김 */
}

/* ── 신규 관계 표시 (관심 저장 계정: '마지막 확인' 이후 생긴 관계) ──────────── */
/* 프로필과 탭 사이 배너 — 새관계가 있을 때만 표시. 인디고 테마와 구분되게 앰버 계열. */
.rel-new-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #fff4e6;
    border: 1px solid #ffd8a8;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #d9480f;
}
.rel-new-banner-icon { font-size: 0.95rem; line-height: 1; }
.rel-new-banner-text { flex: 1; font-weight: 600; }
.rel-new-banner-toggle {
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid #ffa94d;
    border-radius: 999px;
    background: #fff;
    color: #e8590c;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.rel-new-banner-toggle:hover { background: #ffe8cc; }
.rel-new-banner-toggle[aria-pressed="true"] {
    background: #f76707;
    border-color: #f76707;
    color: #fff;
}

/* 각 관계 행의 '신규' 배지 — 유형/횟수 배지 앞에 붙는다. */
.rel-new-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 5px;
    background: #f76707;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 신규 관계 행 하이라이트 — 레이아웃 이동 없이 inset 좌측 바 + 옅은 배경. */
.rel-row-wrap .rel-row.is-new {
    background: #fff8f1;
    box-shadow: inset 3px 0 0 #f76707;
}
.rel-row-wrap .rel-row.is-new:hover { background: #fff1e6; }

/* 신규가 있는 탭에 점(dot) — active(인디고 배경) 탭에서도 보이게 흰 링. */
.rel-tab.has-new { position: relative; }
.rel-tab.has-new::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f76707;
    box-shadow: 0 0 0 1.5px #fff;
}