/*
 * nav.css — 전 페이지 공용 상단 GNB(nav.js 렌더) 스타일 + 인접 sticky/fixed 요소 오프셋.
 * ============================================================
 * tokens.css 변수만 사용(라이트/다크 자동). styles.css 를 안 싣는 페이지(compat/법정/결제결과/start)도
 * 이 파일 하나로 동일한 바가 나오도록 자립적으로 작성한다.
 *
 * 하위 규칙은 전부 body.gnb-on 아래로 스코프한다 — JS 가 죽으면 GNB 가 안 뜨는데
 * 기존 모드 토글까지 같이 숨기면 진입 동선이 통째로 사라진다(점진적 향상).
 */

:root {
  --gnb-h: 56px;
}
@media (max-width: 480px) {
  :root { --gnb-h: 52px; }
}

.gnb {
  position: sticky;
  top: 0;
  z-index: var(--z-nav, 900);
  height: var(--gnb-h);
  background: var(--glass-bg, rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: var(--glass-blur, blur(14px) saturate(160%));
  backdrop-filter: var(--glass-blur, blur(14px) saturate(160%));
  border-bottom: 1px solid var(--color-border-default, rgba(26, 24, 48, 0.08));
  font-family: var(--font-sans, "Pretendard", -apple-system, sans-serif);
}

.gnb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
}

/* ── 브랜드 ── */
.gnb-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  position: relative;
  text-decoration: none;
  color: var(--color-text-primary, #1A1830);
  transition: opacity 0.15s ease;
}
.gnb-brand::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); } /* 44px 터치 히트영역(시각 크기 유지) */
.gnb-brand:hover { opacity: 0.82; }
.gnb-brand:focus-visible {
  outline: 2px solid var(--color-accent, #8F7BF0);
  outline-offset: 3px;
  border-radius: 8px;
}
.gnb-wordmark {
  position: relative;              /* Beta 뱃지 앵커 */
  font-family: var(--font-serif, "Hahmlet", "Nanum Myeongjo", serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
}
/* Beta 뱃지 — 워드마크 우상단 대각선(매버릭 지정 2026-09-09). absolute = 폭 예산 불변,
   ≤335px 는 워드마크 display:none 에 같이 묻힌다. 색은 브랜드 액센트 토큰(다크 자동). */
.gnb-beta {
  position: absolute;
  top: -8px;
  right: -13px;
  font-family: var(--font-sans, "Pretendard", -apple-system, sans-serif);
  font-size: 0.5rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--color-accent, #8F7BF0);
  transform: rotate(-12deg);
  pointer-events: none;
}
/* 나침반 마크 = 단일 path(currentColor). 색은 브랜드 마크 토큰이 테마별로 준다(라이트 네이비/다크 라벤더) —
   네이비 마크를 다크 캔버스(#131120)에 그대로 두면 대비가 거의 없다. */
.gnb-logo { display: block; width: 21px; height: 21px; flex: none; color: var(--color-brand-mark, #3F4560); }

/* ── 탭 ──
   2026-09-13 하이브리드: 기본은 숨김이고 ≥860px 에서만 되살아난다(아래 복귀선 블록).
   좁은 화면의 같은 항목은 햄버거 드로어의 "서비스 이동" 섹션이 맡는다. */
.gnb-tabs {
  display: none;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;              /* 폰트 폴백으로 넘칠 때의 안전망 — 860px 이상에선 스크롤 없이 수용 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gnb-tabs::-webkit-scrollbar { display: none; }

.gnb-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--gnb-h);
  padding: 0 9px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-secondary, #5B5570);
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.gnb-tab::after {                /* 활성 밑줄 — 채움 pill 대신 밑줄이라 다크에서 대비 역전이 없다 */
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background 0.15s ease;
}
.gnb-tab:hover { color: var(--color-text-primary, #1A1830); }
.gnb-tab:focus-visible {
  outline: 2px solid var(--color-accent, #8F7BF0);
  outline-offset: -4px;
  border-radius: 8px;
}
.gnb-tab.on {
  color: var(--color-text-primary, #1A1830);
  font-weight: 800;
}
.gnb-tab.on::after { background: var(--color-accent, #8F7BF0); }

/* 좁은 화면 전용 축약 라벨(nav.js short) — 기본은 정식 이름만 보인다.
   숨는 쪽은 display:none 이라 접근성 이름에도 안 들어간다(두 이름이 겹쳐 읽히지 않는다).
   탭 줄이 ≥860px 전용이 된 뒤로 실제 교체가 일어나는 구간이 없어 짝 규칙
   (.gnb-lb-full{display:none} / .gnb-lb-short{display:inline})은 아래 사다리에서 걷어냈다.
   탭 복귀선을 내리면 그 단계 미디어쿼리에 두 줄을 다시 넣으면 된다 — nav.js 의 short 는 그대로 살아 있다. */
.gnb-lb-short { display: none; }

/* ── 우측 클러스터(계정 슬롯 + 햄버거) ──
   탭 줄이 숨는 <860px 에서 이 묶음이 우측 정렬을 이어받는다. 탭과 둘 다 margin-left:auto 를 걸면
   남은 폭이 반씩 갈려 탭 묶음이 가운데로 밀린다 — ≥860px 에서는 auto 를 탭에만 넘긴다. */
.gnb-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
}
/* 계정 슬롯 — 지금은 비어 있다(coin-ui 의 .coin-acct 는 여전히 body 직속 fixed 칩).
   칩을 여기로 옮기는 건 별건이라 그때까지는 접어 둔다. 안 접으면 빈 칸이 gap 6px 을 먹는다. */
.gnb-acct { display: flex; align-items: center; min-width: 0; }
.gnb-acct:empty { display: none; }

/* ── 탭 복귀선 860px ──
   768px(아이패드 세로)에 두면 안 된다: 고전 스크롤바 15px 을 뺀 실폭에서 브랜드 + 탭 6개 + 우측
   클러스터가 폰트 폴백 한 번에 넘치고, .gnb-tabs 가 overflow-x:auto + 스크롤바 숨김이라 마지막
   탭("오늘의 운세")이 소리 없이 가려진다. 860px 은 코인칩을 헤더로 들이는 후속 작업(칩 폭 약 280px)까지
   감안한 선이다 — 칩이 헤더 밖에 있는 지금은 여유가 그만큼 더 있다. */
@media (min-width: 860px) {
  .gnb-tabs { display: flex; margin-left: auto; }
  .gnb-right { margin-left: 0; }
}

/* ── 햄버거 메뉴 버튼 ──
   2026-09-09: 이 자리에 있던 화면 모드 토글을 드로어 안으로 옮기고 햄버거가 자리를 물려받았다.
   2026-09-13: 탭 줄이 ≥860px 전용이 되면서 좁은 화면의 폭 예산이 풀렸고, 그 여유로 아이콘 옆에
   "메뉴" 글자를 붙였다 — 1차 내비게이션을 아이콘 뒤에만 두면 발견성이 크게 떨어진다.
   좌우 간격은 .gnb-right 의 gap 과 .gnb-inner 의 padding 이 잡으므로 margin 은 0 이다. */
.gnb .gnb-menu {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 32px;
  height: 32px;
  margin-left: 0;
  padding: 0 10px;
  border: 1px solid var(--color-border-default, rgba(26, 24, 48, 0.08));
  border-radius: 999px;
  background: var(--color-bg-elevated, #FFFFFF);
  color: var(--color-text-secondary, #5B5570);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gnb .gnb-menu::before {        /* 44px 터치 히트영역(시각 크기는 32px 유지) */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.gnb .gnb-menu:hover {
  color: var(--color-text-primary, #1A1830);
  border-color: var(--color-border-strong, rgba(143, 123, 240, 0.45));
}
.gnb .gnb-menu:focus-visible {
  outline: 2px solid var(--color-accent, #8F7BF0);
  outline-offset: 2px;
}
.gnb .gnb-menu svg { width: 17px; height: 17px; display: block; }
/* 줄바꿈이 생기면 잘리는 게 아니라 바 밖으로 삐져나온다(바 높이는 --gnb-h 고정). */
.gnb-menu-lb { font-size: 0.78rem; font-weight: 800; line-height: 1; white-space: nowrap; }

/* ── 폭 예산 사다리(520 → 374 → 335) ────────────────────────────────────────────────────────────
   ⚠️ 2026-09-13 에 이 사다리가 지키는 대상이 바뀌었다. 예전 실측치(2026-08-19 전 페이지 1px 스윕:
   520단계 345px / 374단계 305px / 335단계 291px)는 탭 6개가 좁은 화면에 서 있을 때의 값이라 더 이상
   사실이 아니다 — 탭 줄은 이제 ≥860px 전용이다. 좁은 화면의 헤더는 브랜드 + 우측 클러스터(햄버거)
   둘뿐이라 예산이 크게 남고, 그 여유로 햄버거에 "메뉴" 글자를 붙였다. 그래서 아래 단계에 남은 것은
   브랜드 축소(현행 외형 유지)와 ≤374px 아이콘 전용 전환뿐이며, 도달 불가가 된 .gnb-tab /
   .gnb-lb-* 오버라이드는 걷어냈다.

   부등식 규약은 그대로다 — 헤더에 요소를 순증할 때(예: 코인칩 편입) 이 식으로 다시 잰다:
     그 단계가 필요로 하는 폭 ≤ (그 단계의 최소 뷰포트 - 15px - 여유)
   -15px 은 레이아웃을 먹는 고전 스크롤바 몫이다. 폰은 오버레이 스크롤바라 뷰포트를 다 쓰지만,
   데스크톱 창을 좁게 줄이면 스크롤바가 15~17px 을 가져가는데 미디어쿼리는 그걸 뺀 폭을 모른다.
   ⚠️ 새 예산은 아직 1px 스윕 재실측 전이다 — 실측하면 이 주석의 수치를 갱신할 것. */

/* 375~520px — 폰 대부분(375/390/414/430)이 여기 걸린다. */
@media (max-width: 520px) {
  .gnb-inner { gap: 4px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .gnb-logo { display: none; }
  .gnb-wordmark { font-size: 1.04rem; }
}

/* 336~374px — 상한이 360 이 아니라 374 인 이유: 360 에 두면 361~374 가 어느 단계도 감당 못 하는
   사각지대가 된다. 여기서 햄버거는 아이콘만 남긴다 — 글자를 지워도 aria-label="메뉴" 가 남아
   접근성 이름과 음성 조작 대상은 그대로다. */
@media (max-width: 374px) {
  .gnb-inner { gap: 2px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .gnb-wordmark { font-size: 0.96rem; }
  /* 26px 은 눈에 보이는 크기일 뿐이고 손가락이 닿는 영역은 ::before 가 잡아 둔 44px 그대로다. */
  .gnb .gnb-menu { width: 26px; min-width: 26px; height: 26px; padding: 0; }
  .gnb .gnb-menu svg { width: 15px; height: 15px; }
  .gnb-menu-lb { display: none; }
}

/* ~335px — 320px 창에서 고전 스크롤바까지 붙으면 실폭이 305px 이라 워드마크(약 32px)를 놓을 자리가
   없다. 글자를 더 줄이거나 탭을 붙이는 대신 브랜드를 마크 하나로 바꿔 12px 을 통째로 확보한다.
   마크도 홈 링크라 진입 동선은 유지된다. */
@media (max-width: 335px) {
  .gnb-inner { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .gnb-logo { display: block; width: 18px; height: 18px; }
  .gnb-wordmark { display: none; }
  .gnb-brand { height: 100%; }           /* 마크만 남아 좁아진 만큼 세로로 눌러 담아 손가락이 닿을 면적을 지킨다 */
}

/* ════════ 인접 요소 오프셋 — GNB 가 실제로 뜬 경우(body.gnb-on)에만 적용 ════════ */

/* 기존 진입 동선(모드 토글 2탭)은 GNB 와 중복 → 숨김. 토픽바째 숨겨야 브랜드가 이중 노출되지 않는다.
   .mode-toggle 의 DOM 은 남겨둔다 — index 의 activateTodayTab 이 이 노드를 querySelectorAll 로 만진다. */
.gnb-on .bento-topbar,
.gnb-on .cx-topbar,
.gnb-on .mode-toggle { display: none; }

/* 코인칩(coin-ui.css .coin-acct, fixed top-right z9000)을 GNB 아래로 내려 겹침 0.
   coin-ui.css 가 뒤에 로드돼도 이기도록 2클래스 선택자로 특이도를 올린다. */
.gnb-on .coin-acct { top: calc(var(--gnb-h) + 8px); }

/* 결과 화면(렌즈 탭바 렌더 중)에선 칩을 탭바 아래로 — 같은 줄(z9000)에서 우측 탭 4개의 탭을
   가로채던 겹침(0826 상담 재캡처 실측). :has 미지원(iOS<15.4)은 현행 유지 = 점진 개선. */
.gnb-on:has(#results.show) .coin-acct { top: calc(var(--gnb-h) + 54px); }

/* 결과 페이지의 sticky 앵커칩/탭바가 GNB 밑으로 파고들지 않게 시작점을 내린다.
   styles.css 의 @media(max-width:768px){.result-nav{top:64px}} 도 함께 덮는다. */
.gnb-on .result-nav,
.gnb-on .result-tabbar { top: var(--gnb-h); }

/* ════════ 햄버거 메뉴 드로어(우측 슬라이드) ════════
   레이어: 코인칩(9000) 위 / 앱 게이트·토스트(9999) 와 모달(10000~10030) 아래.
   드로어가 로그인 시트나 신청 오버레이를 가리면 항목을 눌러 열린 화면이 자기 뒤로 들어간다. */
.gnb-dw-wrap {
  position: fixed;
  inset: 0;
  z-index: 9500;
  font-family: var(--font-sans, "Pretendard", -apple-system, sans-serif);
  /* 닫히는 동안(슬라이드 아웃 ~240ms) 아직 hidden 이 아니라서, 안 보이는 백드롭이 클릭을 삼키는 걸 막는다. */
  pointer-events: none;
}
.gnb-dw-wrap.show { pointer-events: auto; }
/* display 를 지정한 클래스는 UA 의 [hidden] 을 이겨 버린다 — 짝 규칙을 반드시 같이 둔다(코드베이스 관용구). */
.gnb-dw-wrap[hidden] { display: none; }

.gnb-dw-back {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay, rgba(26, 24, 48, 0.45));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gnb-dw-wrap.show .gnb-dw-back { opacity: 1; }

.gnb-dw {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated, #FFFFFF);
  border-left: 1px solid var(--color-border-default, rgba(26, 24, 48, 0.08));
  box-shadow: -18px 0 44px -18px rgba(87, 73, 150, 0.3);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
}
.gnb-dw-wrap.show .gnb-dw { transform: translateX(0); }

.gnb-dw-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--gnb-h);
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--color-border-default, rgba(26, 24, 48, 0.08));
}
.gnb-dw-title {
  font-family: var(--font-serif, "Hahmlet", "Nanum Myeongjo", serif);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-primary, #1A1830);
}
.gnb-dw-x {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-text-secondary, #5B5570);
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gnb-dw-x::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gnb-dw-x:hover { color: var(--color-text-primary, #1A1830); background: var(--color-accent-mist, rgba(143, 123, 240, 0.12)); }
.gnb-dw-x:focus-visible { outline: 2px solid var(--color-accent, #8F7BF0); outline-offset: -2px; }

.gnb-dw-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
}

/* 화면 모드 행 — 라벨 + 토글 */
.gnb-dw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px;
}
.gnb-dw-row-lbl {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text-secondary, #5B5570);
  word-break: keep-all;
}
/* 이 버튼은 .theme-toggle 을 같이 물어(페이지 인라인 컨트롤러의 aria-pressed 동기 대상) styles.css 와
   compat.html 인라인의 .theme-toggle 규칙을 그대로 상속받는다. 그래서 시각 규칙은 전부 2클래스 이상으로
   써서 어느 페이지에서든 같은 모양이 나오게 덮는다(다크 오버라이드가 (0,2,0) 이라 3클래스로 이긴다). */
.gnb-dw-row .gnb-dw-theme {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border-default, rgba(26, 24, 48, 0.08));
  border-radius: 999px;
  background: var(--color-bg-elevated, #FFFFFF);
  color: var(--color-text-secondary, #5B5570);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
[data-theme="dark"] .gnb-dw-row .gnb-dw-theme {
  border-color: var(--color-border-default, rgba(255, 255, 255, 0.1));
  color: var(--color-text-secondary, #B5AFC6);
}
.gnb-dw-row .gnb-dw-theme:hover {
  color: var(--color-text-primary, #1A1830);
  border-color: var(--color-border-strong, rgba(143, 123, 240, 0.45));
}
.gnb-dw-row .gnb-dw-theme:focus-visible { outline: 2px solid var(--color-accent, #8F7BF0); outline-offset: 2px; }
.gnb-dw-row .gnb-dw-theme svg { width: 17px; height: 17px; }
.gnb-dw-row .gnb-dw-theme .gnb-ic-moon { display: block; }
.gnb-dw-row .gnb-dw-theme .gnb-ic-sun { display: none; }
[data-theme="dark"] .gnb-dw-row .gnb-dw-theme .gnb-ic-moon { display: none; }
[data-theme="dark"] .gnb-dw-row .gnb-dw-theme .gnb-ic-sun { display: block; }

/* 섹션 — 구분선은 섹션 사이에만. 첫 섹션(서비스 이동)에 걸리면 머리말 위로 선이 하나 더 생긴다. */
.gnb-dw-sec {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-subtle, rgba(26, 24, 48, 0.06));
}
.gnb-dw-body > .gnb-dw-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gnb-dw-sec[hidden] { display: none; }
/* tertiary(#8C879B)를 흰 배경에 11.5px 로 올리면 대비가 약 3.5:1 로 4.5:1 에 못 미친다(굵기 800 이어도
   18.66px 미만이라 large text 예외 밖). 드로어가 1차 내비를 담게 되면서 이 머리말의 무게가 달라졌다. */
.gnb-dw-lbl {
  padding: 0 6px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #5B5570);
  word-break: keep-all;
}

/* 주 내비(서비스 이동) — 바 탭과 같은 TABS 를 세로로 편 것.
   세로 리스트에서 밑줄(.gnb-tab.on::after)은 구분선으로 오독되므로 활성 표시는 좌측 막대 + 바탕으로 바꾼다.
   min-height 를 못박는 이유: 행 높이를 페이지 body 의 line-height 상속에 기대면 그 값을 안 주는 페이지
   (map/about/pricing/terms 등 legal.css 계열)에서 40px 아래로 주저앉는다. */
.gnb-dw-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0 10px 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary, #1A1830);
  text-align: left;
  text-decoration: none;
  word-break: keep-all;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.gnb-dw-nav-item:hover { background: var(--color-accent-mist, rgba(143, 123, 240, 0.12)); }
.gnb-dw-nav-item:focus-visible { outline: 2px solid var(--color-accent, #8F7BF0); outline-offset: -2px; }
.gnb-dw-nav-item.on { background: var(--color-accent-mist, rgba(143, 123, 240, 0.12)); font-weight: 800; }
.gnb-dw-nav-item.on::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: var(--color-accent, #8F7BF0);
}

/* 프리미엄 신청 버튼과 오프라인 방문 예약 앵커가 같이 쓴다(요소 가정 없음 — 앵커라 밑줄만 끈다).
   box-sizing 을 못박는 이유: button 은 UA 기본이 border-box 라 우연히 맞았지만 앵커는 content-box 라
   width:100% + padding + border 가 드로어 폭을 26px 넘친다(리셋 없는 legal.css 계열 페이지에서 실측). */
.gnb-dw-item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  margin-bottom: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-default, rgba(26, 24, 48, 0.08));
  border-radius: var(--r-md, 14px);
  background: var(--color-accent-mist, rgba(143, 123, 240, 0.12));
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gnb-dw-item:hover { border-color: var(--color-border-strong, rgba(143, 123, 240, 0.45)); }
.gnb-dw-item:focus-visible { outline: 2px solid var(--color-accent, #8F7BF0); outline-offset: 2px; }
.gnb-dw-it-t {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary, #1A1830);
  word-break: keep-all;
}
.gnb-dw-it-d {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-secondary, #5B5570);
  word-break: keep-all;
}

/* 행 높이를 body line-height 상속에 기대면 그 값을 안 주는 페이지에서 39~41px 로 주저앉는다(44px 미달). */
.gnb-dw-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 10px;
  color: var(--color-text-primary, #1A1830);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.gnb-dw-link:hover { background: var(--color-accent-mist, rgba(143, 123, 240, 0.12)); }
.gnb-dw-link:focus-visible { outline: 2px solid var(--color-accent, #8F7BF0); outline-offset: -2px; }
/* 위 display:flex 가 UA 의 [hidden] 을 이긴다 — 짝 규칙이 없으면 스위치로 숨긴 링크(로움 멤버십)가 닫힌 상태에서도 보인다. */
.gnb-dw-link[hidden] { display: none; }

/* reduce-motion — 드로어 슬라이드/백드롭 페이드를 끈다. 캐스케이드 규약대로 파일 최말미(다크 오버라이드 뒤). */
@media (prefers-reduced-motion: reduce) {
  .gnb-dw, .gnb-dw-back { transition: none; }
}