/* 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); }

/* 계정 영역 — 이름(→마이페이지)/로그아웃. 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  : 키보드 탐색용 황등 아웃라인 — 다크 바에서 대비가 확보된다 */
.sjtop__user { white-space: nowrap; max-width: 68px; overflow: hidden;
  text-overflow: ellipsis; 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; }
@media (min-width: 768px){ .sjtop__user{ 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; }