/* ─────────────────────────────────────────────────────────────
   Veil 공용 상단바 (출시용 정본)

   문제: 상단바가 페이지마다 세 계열로 갈라져 있었다.
     - 랜딩(index-en/ko/es/pt): .nav > .wrap + .lang + .burger
     - 앱(index/app-en/tools/church): .nav-inner 또는 .tools-topbar
     - 문서(policy/security/contact/status/changelog/dpa/payment-*): 상단바 없음
   해결: 마크업 계열은 그대로 두되, 이 파일이 "마지막 레이어"로 로드되어
     높이·로고·간격·색·우측 클러스터를 한 값으로 강제한다. 문서 페이지처럼
     styles.css 를 안 쓰는 곳에서도 단독으로 성립하도록 자족형으로 작성했다.
     (app-modern.css 등이 !important 를 쓰고 있어 같은 무기를 쓴다.)
   ───────────────────────────────────────────────────────────── */

:root {
  --vh-h: 64px;              /* 상단바 높이 — 전 페이지 공통 */
  --vh-ink: #14141A;
  --vh-muted: #5F6470;
  --vh-line: #E4E5EA;
  --vh-bg: rgba(255, 255, 255, .86);
  --vh-gold: #CDA00A;
  --vh-gold-deep: #B08A06;
  --vh-gold-ink: #1A1405;
  --vh-soft: #F4F5F8;
  --vh-surface: #FFFFFF;
}

/* 앱(index.html / app-en.html)은 다크 테마를 쓴다. 토큰만 바꾸면
   아래 구조는 그대로 가져간다 — 상단바가 테마를 따라가게 하려는 의도. */
html[data-theme="dark"] {
  --vh-ink: #F2F2F5;
  --vh-muted: #A3A7B3;
  --vh-line: rgba(255, 255, 255, .13);
  --vh-bg: rgba(10, 10, 12, .82);
  --vh-soft: rgba(255, 255, 255, .07);
  --vh-surface: #16161B;
}

/* ── 바 본체 ───────────────────────────────────────────────── */
.vh {
  position: sticky !important;
  top: 0;
  z-index: 900;
  min-height: var(--vh-h);
  border-bottom: 1px solid var(--vh-line) !important;
  background: var(--vh-bg) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none !important;
}

.vh-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(100% - 32px, 1180px);
  min-height: var(--vh-h);
  margin: 0 auto;
  padding: 0 !important;
}

/* 기존 마크업 계열의 컨테이너도 같은 폭·높이로 끌어온다. */
.vh .nav-inner,
.vh .wrap,
.vh .tools-topbar-inner { min-height: var(--vh-h); }

/* ── 브랜드 (로고는 항상 대문자 VEIL + 골드 마크) ──────────── */
.vh .brand {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-weight: 900 !important;
  font-size: 19px !important;
  letter-spacing: .01em !important;
  line-height: 1;
  color: var(--vh-ink) !important;
  text-decoration: none;
}
.vh .brand svg,
.vh .brand-mark svg { width: 21px !important; height: 21px !important; display: block; }
.vh .brand-mark { color: var(--vh-gold) !important; display: inline-flex; font-size: inherit !important; }
.vh .brand-name { color: var(--vh-ink) !important; font-size: inherit !important; }
.vh .brand-sub {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(205, 160, 10, .45); background: rgba(205, 160, 10, .10);
  color: var(--vh-gold-deep) !important; font-size: 11px !important; font-weight: 700; vertical-align: 2px;
}

/* ── 가운데 링크 ──────────────────────────────────────────── */
.vh .nav-links,
.vh .tools-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  overflow: visible;
}
.vh .nav-links > a,
.vh .nav-links .nav-top,
.vh .tools-nav > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 11px !important;
  border: 0; border-radius: 10px;
  background: none;
  color: var(--vh-muted) !important;
  font: inherit; font-size: 14.5px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.vh .nav-links > a:hover,
.vh .nav-links .nav-top:hover,
.vh .tools-nav > a:hover { background: var(--vh-soft); color: var(--vh-ink) !important; }
.vh .nav-links > a.is-current,
.vh .tools-nav > a.active,
.vh .tools-nav > a[aria-current="page"] {
  background: var(--vh-soft);
  color: var(--vh-ink) !important;
  font-weight: 650 !important;
}
/* 밑줄 슬라이드 장식은 페이지마다 있고 없고 해서 통일을 위해 끈다. */
.vh .nav-links a::after { display: none !important; }
.vh .nav-links .caret { width: 13px; height: 13px; opacity: .55; }

/* 드롭다운 */
.vh .nav-item { position: relative; }
.vh .nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px;
  display: grid; gap: 2px; padding: 7px !important;
  border: 1px solid var(--vh-line) !important; border-radius: 14px !important;
  background: var(--vh-surface) !important;
  box-shadow: 0 18px 44px rgba(18, 22, 40, .13) !important;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.vh .nav-item.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.vh .nav-menu a {
  padding: 8px 11px !important; border-radius: 9px;
  color: var(--vh-ink) !important; font-size: 14px !important; font-weight: 500; text-decoration: none;
  white-space: nowrap;
}
.vh .nav-menu a:hover { background: var(--vh-soft) !important; color: var(--vh-ink) !important; }

/* ── 우측 클러스터: [언어] [등급] [계정] [CTA] [햄버거] ────── */
.vh .nav-cta,
.vh .nav-r,
.vh .tier-area {
  display: flex !important; align-items: center; gap: 10px;
  flex: 0 0 auto; margin-left: auto;
}
/* .lang 은 랜딩(index-*.html)이 쓰는 이름. 같은 모양으로 맞춘다. */
.vh-lang, .vh .lang {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--vh-line); border-radius: 999px;
}
.vh-lang a, .vh-lang span, .vh .lang a {
  padding: 4px 10px; color: var(--vh-muted); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none;
}
.vh-lang a.on, .vh-lang span.on, .vh .lang a.on { background: var(--vh-ink) !important; color: var(--vh-surface) !important; }
.vh .tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--vh-line); border-radius: 999px;
  color: var(--vh-muted) !important; font-size: 12px; font-weight: 650;
}
.vh .auth-slot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vh-muted); }

/* CTA — 골드 알약 하나로 통일. 로고와 같은 골드를 쓴다. */
.vh .btn-primary,
.vh .navbtn,
.vh-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 17px !important; border-radius: 999px !important;
  border: 1px solid var(--vh-gold) !important;
  background: var(--vh-gold) !important; color: var(--vh-gold-ink) !important;
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 20, 26, .10) !important;
  transition: background-color .14s ease, transform .14s ease;
}
.vh .btn-primary:hover,
.vh .navbtn:hover,
.vh-cta:hover { background: var(--vh-gold-deep) !important; border-color: var(--vh-gold-deep) !important; }
.vh .btn-primary:active,
.vh .navbtn:active,
.vh-cta:active { transform: scale(.98); }

/* 보조 링크(홈으로 등)는 버튼이 아니라 조용한 텍스트로 */
.vh .back,
.vh-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 11px !important; border-radius: 10px;
  background: none !important; border: 0 !important;
  color: var(--vh-muted) !important; font-size: 14px !important; font-weight: 500 !important;
  text-decoration: none;
}
.vh .back:hover, .vh-ghost:hover { background: var(--vh-soft) !important; color: var(--vh-ink) !important; }

/* ── 모바일 ───────────────────────────────────────────────── */
.vh .nav-toggle, .vh .burger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--vh-line) !important; border-radius: 11px !important;
  background: var(--vh-surface) !important; color: var(--vh-ink) !important; cursor: pointer;
}
.vh-sheet {
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 16px 18px;
  border-top: 1px solid var(--vh-line); background: var(--vh-surface);
}
.vh-sheet.open { display: flex; }
.vh-sheet a {
  padding: 12px 10px; border-radius: 10px;
  color: var(--vh-ink); font-size: 15px; font-weight: 550; text-decoration: none;
}
.vh-sheet a:hover { background: var(--vh-soft); }
.vh-sheet .vh-sheet-group { margin-top: 8px; padding: 0 10px; color: var(--vh-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 940px) {
  .vh .nav-links, .vh .tools-nav { display: none !important; }
  .vh .nav-toggle, .vh .burger { display: inline-flex !important; }
  .vh .vh-lang { display: none; }
}
@media (max-width: 560px) {
  .vh .auth-slot { display: none; }
  .vh .tier-badge { display: none; }
  .vh .back { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vh *, .vh-sheet { transition: none !important; }
}