/* saju-topnav.css — 공용 상단 글로벌 메뉴(스티키 톱바). sjh 전 페이지(허브·상세) 공통.
   토큰 SoT: sjcF0101_tokens.css. 묵색 다크 바 + 황등 CTA. */

.sjtop { position: sticky; top: 0; z-index: 100; background: var(--color-deep-navy);
  border-bottom: 1px solid rgba(242,237,227,.10); }
.sjtop__wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; height: 56px;
  display: flex; align-items: center; gap: 14px; }
@media (min-width: 768px){ .sjtop__wrap{ height: 64px; padding: 0 24px; gap: 18px; } }

.sjtop__brand { flex: none; font-family: var(--font-serif); font-weight: 700; font-size: 18px;
  color: var(--color-bg-base); text-decoration: none; letter-spacing: -0.2px; }
.sjtop__brand b { color: var(--color-amber); }

.sjtop__nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sjtop__nav::-webkit-scrollbar { display: none; }
.sjtop__link { white-space: nowrap; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: rgba(242,237,227,.82); text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base); }
.sjtop__link:hover { color: var(--color-bg-base); background: rgba(242,237,227,.10); }

/* 카테고리 앵커(관계운·자기운·종합…) — 모바일에서는 숨긴다.
   56px 한 줄에 브랜드 + 카테고리 + 계정이 겹쳐 너무 좁았다(CEO 2026-08-29).
   가로 스크롤로 흡수하고 있었지만 스크롤바가 없어 더 있다는 신호조차 없었다.
   허브 본문에 같은 축 섹션이 그대로 있으므로 모바일에서 잃는 길은 없다.
   '후기'(.sjtop__link 만 가진 링크)는 상세 화면에서 유일한 진입로라 남긴다. */
@media (max-width: 767px) {
  .sjtop__link--cat { display: none; }

  /* ★ 한 줄에 다 들어가게 조인다 (CEO 2026-09-12).
       운영 모바일에서 **로그아웃이 잘려 나갔다** — 브랜드·언어·이름·마이페이지·로그아웃이
       56px 한 줄을 두고 다툰다. 여백과 글자를 줄여 자리를 만든다.
       (자리를 옮기는 대신 조이는 쪽을 골랐다 — 떠 있는 단추는 본문을 가린다) */
  .sjtop__wrap { padding: 0 12px; gap: 8px; }
  .sjtop__brand { font-size: 17px; }
  .sjtop__acct { gap: 2px; }
  .sjtop__acct .sjtop__link { padding: 6px 6px; font-size: 12px; }
  .sjtop__user-nm { max-width: 48px; }
  /* ★ 「마이페이지」 글자는 모바일에서 뺀다 (CEO 2026-09-12).
       2026-09-10 에 「ryan님」만으로는 링크인 줄 모른다고 해서 붙인 글자인데,
       모바일 56px 한 줄에서는 그 글자가 **로그아웃을 밀어낸다.**
       이름 전체가 여전히 마이페이지 링크라 **가는 길은 안 끊긴다**.
       대신 **작은 영수증 아이콘**을 띄워 「누를 수 있는 것」이라는 신호는 남긴다. */
  /* ★ 후기는 **로그인한 뒤에만** 접는다 (CEO 2026-09-12).
       로그아웃 상태는 [로그인] 하나뿐이라 자리가 넉넉하다 — 원래 보이던 그대로 둔다.
       로그인하면 이름·마이페이지·로그아웃이 들어와 로그아웃이 잘려 나갔다. */
  .sjtop--auth .sjtop__link--reviews { display: none; }

  .sjtop__user-my  { display: none; }
  .sjtop__user-ico { display: inline-block; }   /* 글자 대신 아이콘 */
}

/* 계정 영역 — 이름(→마이페이지)/로그아웃. CTA 왼쪽에 붙는다.
   ★ 이름은 마이페이지(sjuF0201.do) 링크다(2026-08-11) — 장식이 아니므로 모바일에서 숨기지 않는다.
     숨기면 모바일에 마이페이지 진입로가 사라진다.
     대신 폭을 좁게 잘라(말줄임) 긴 닉네임이 카테고리를 밀어내지 않게 한다.
     카테고리(.sjtop__nav)는 overflow-x:auto 라 밀리면 가로 스크롤로 흡수된다. */
.sjtop__acct { flex: none; display: flex; align-items: center; gap: 4px; }

/* 이름 = 마이페이지 링크.
   ★ Material 3: 링크는 <b>색만으로 구분하지 않는다</b> — 밑줄을 함께 준다.
     색만 다르면 색각 이상 사용자가 클릭 가능한지 알 수 없다(WCAG 1.4.1 색에 의존 금지).
     포털들이 계정명에 밑줄이나 아이콘을 쓰는 이유도 같다.
   · 평상시 : 밑줄(반투명) + 본문보다 밝은 색 → 옆 '로그아웃'(보조 액션)과 위계가 갈린다
   · hover  : 밑줄이 진해지고 .sjtop__link 의 state layer(배경 10%)가 함께 뜬다
   · focus  : 키보드 탐색용 황등 아웃라인 — 다크 바에서 대비가 확보된다 */
/* ★ 「ryan님 마이페이지」 두 토막이다(CEO 2026-09-10).
     이름만 있을 때는 그것이 마이페이지 링크인 줄 몰라 못 찾았다.
     말줄임은 **이름 쪽에만** 건다 — 「마이페이지」가 잘리면 적은 뜻이 없다. */
.sjtop__user { display: inline-flex; align-items: baseline; gap: 4px;
  white-space: nowrap; font-size: 13px; font-weight: 600;
  color: var(--color-bg-base);
  text-decoration: underline;
  text-decoration-color: rgba(242,237,227,.50);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-base); }
.sjtop__user:hover { text-decoration-color: currentColor; }
.sjtop__user:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px;
  border-radius: 6px; }
/* 이름만 잘린다. 「마이페이지」가 뒤에 붙었으니 모바일에서는 이름 자리를 더 줄인다 —
   56px 이면 두세 글자는 보이고, 그 이상은 말줄임이 대신 말해 준다. */
.sjtop__user-nm { max-width: 56px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.sjtop__user-my { flex: none; }

/* 마이페이지 힌트 아이콘 — 모바일 전용. PC 는 「마이페이지」 글자가 그 몫을 한다.
   ★ 아이콘 폰트가 아니라 인라인 SVG 다. currentColor 라 글자색을 그대로 따라간다. */
.sjtop__user-ico {
  /* ★ **모바일에서만** 보인다 (CEO 2026-09-12).
       PC 는 「마이페이지」 글자가 그 몫을 한다 — 글자가 있는데 아이콘까지 붙이면
       같은 말을 두 번 하는 셈이고, 상단이 그만큼 지저분해진다.
       모바일은 그 글자를 뺐으므로 아이콘이 대신 선다. */
  display: none;
  flex: none;
  /* ★ 부모(.sjtop__user)가 align-items: baseline 이다. SVG 의 기준선은 **아래 모서리**라
       글자와 같이 baseline 에 맞추면 아이콘만 내려앉는다(CEO 2026-09-12: 언어 아이콘과 줄이 안 맞는다).
       글자끼리는 baseline 이 맞아야 하므로 부모는 그대로 두고, **이 아이콘만** 가운데로 올린다.
       (vertical-align 은 flex 자식에게 듣지 않는다 — 그래서 땜질이 안 먹었다) */
  align-self: center;
  margin-left: 3px;
  opacity: .85;
}
@media (min-width: 768px){ .sjtop__user-nm{ max-width: 140px; } }
.sjtop__acct .sjtop__link { padding: 8px 10px; font-size: 13px; }
/* 로그인만 살짝 강조 — 로그아웃/카테고리와 같은 톤이면 미로그인 사용자가 찾지 못한다.
   CTA(황등 채움)보다는 약하게: 상단 바의 주행동은 '무료로 시작'이지 로그인이 아니다. */
.sjtop__link--login { color: var(--color-bg-base); box-shadow: inset 0 0 0 1px rgba(242,237,227,.28); }

.sjtop__cta { flex: none; white-space: nowrap; padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 700; background: var(--color-amber); color: var(--color-text-ink);
  text-decoration: none; transition: filter var(--transition-base); }
.sjtop__cta:hover { filter: brightness(1.05); }

/* 앵커 이동 시 스티키 바 높이만큼 여백 확보 + 부드러운 스크롤 */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 72px; }