/* Haven design system v4.4 — 하늘색(sky) + 황금색(gold) 공통 토큰과 공용 크롬.
   모든 공개 페이지가 각자의 스타일시트 다음에 이 파일을 읽는다. 페이지 고유 레이아웃은
   각 페이지 CSS가 맡고, 여기서는 색·글꼴·상단 바·효과음 버튼·포커스처럼 사이트 전체가
   같아야 하는 것만 정의한다. 색을 바꿀 때는 이 :root 토큰만 고친다. */
:root{
  --hv-sky-50:#f3faff;--hv-sky-100:#e4f3ff;--hv-sky-200:#c6e6ff;--hv-sky-300:#94cefc;--hv-sky-400:#5cb4f2;
  --hv-sky-500:#2f97e4;--hv-sky-600:#1c7bc9;--hv-sky-700:#155f9f;--hv-sky-800:#124a7a;
  --hv-gold-50:#fffaeb;--hv-gold-100:#fff1c9;--hv-gold-200:#ffe28f;--hv-gold-300:#ffd156;--hv-gold-400:#f6ba22;
  --hv-gold-500:#e2a10c;--hv-gold-600:#b97e00;--hv-gold-700:#8a5d00;
  --hv-ink:#0e2a47;--hv-ink-2:#2c4a66;--hv-muted:#5f768c;--hv-faint:#8aa0b4;
  --hv-line:#d9e8f4;--hv-line-strong:#b8d4ea;--hv-surface:#fff;--hv-surface-2:#f7fbff;--hv-bg:#f2f8fd;
  --hv-good:#0f8a5f;--hv-good-soft:#e5f6ee;--hv-bad:#cf3a50;--hv-bad-soft:#fdecef;--hv-warn:#a66a00;--hv-warn-soft:#fff5dc;
  --hv-focus:#1c7bc9;
  --hv-r-xl:28px;--hv-r-lg:22px;--hv-r-md:16px;--hv-r-sm:12px;
  --hv-shadow-sm:0 1px 2px rgba(14,42,71,.05),0 4px 14px rgba(28,123,201,.07);
  --hv-shadow:0 2px 6px rgba(14,42,71,.05),0 18px 44px rgba(28,123,201,.13);
  --hv-shadow-gold:0 10px 26px rgba(226,161,12,.28);
  --hv-grad-sky:linear-gradient(135deg,#3aa3ee 0%,#1c7bc9 100%);
  --hv-grad-gold:linear-gradient(135deg,#ffe07a 0%,#f6ba22 55%,#e7a10e 100%);
  --hv-grad-page:radial-gradient(1200px 520px at 12% -8%,#d9efff 0,transparent 60%),radial-gradient(900px 480px at 100% 0,#fff3cf 0,transparent 55%),linear-gradient(180deg,#f6fbff 0,#eef6fd 100%);
  --hv-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --hv-font-num:"Pretendard Variable",Pretendard,ui-sans-serif,system-ui,sans-serif;
}

/* 다크 테마 토큰 — <html data-theme="dark"> 일 때(테마 결정: /assets/haven/theme.js + 각 HTML head 스니펫).
   여기서 다시 정의한 공통 토큰(글자·선·면·상태색·그림자·바탕)은 페이지 CSS가 var() 로 쓰면 자동으로 다크가 된다.
   하늘색·황금색 단계 토큰(--hv-sky-*, --hv-gold-*)은 쓰이는 역할(배경/글자)마다 다르게 바뀌어야 하므로
   다시 정의하지 않고, 페이지별 다크 CSS 생성기(scripts/build-dark-theme.mjs)가 쓰는 곳에서 바꾼다. */
:root[data-theme="dark"]{
  --hv-ink:#e6eef7;--hv-ink-2:#c6d4e2;--hv-muted:#9cafc2;--hv-faint:#74889c;
  --hv-line:#223346;--hv-line-strong:#2f4660;--hv-surface:#111b27;--hv-surface-2:#152130;--hv-bg:#0b131d;
  --hv-good:#4fcf98;--hv-good-soft:rgba(79,207,152,.13);--hv-bad:#ff7f8e;--hv-bad-soft:rgba(255,127,142,.13);--hv-warn:#f0b452;--hv-warn-soft:rgba(240,180,82,.13);
  --hv-focus:#6cb7ff;
  --hv-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.28);
  --hv-shadow:0 2px 6px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.45);
  --hv-shadow-gold:0 10px 26px rgba(226,161,12,.22);
  --hv-grad-page:radial-gradient(1200px 520px at 12% -8%,rgba(47,151,228,.13) 0,transparent 60%),radial-gradient(900px 480px at 100% 0,rgba(246,186,34,.06) 0,transparent 55%),linear-gradient(180deg,#0c1520 0,#09111a 100%);
}
/* 효과음 켜기/끄기 버튼 (public/assets/sfx/sfx.js 가 data-sfx-toggle 을 자동 연결) — 모든 페이지 공통 */
button.sfx-toggle{width:40px;height:40px;flex:0 0 auto;display:inline-grid;place-items:center;padding:0;margin:0;border:1px solid var(--hv-line);border-radius:999px;background:#fff;color:var(--hv-sky-600);cursor:pointer;box-shadow:var(--hv-shadow-sm);transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
button.sfx-toggle:hover{transform:translateY(-1px);border-color:var(--hv-sky-300);background:var(--hv-sky-50)}
button.sfx-toggle svg{width:19px;height:19px;overflow:visible}
button.sfx-toggle .sfx-wave,button.sfx-toggle .sfx-mute{transition:opacity .18s ease}
button.sfx-toggle .sfx-mute{opacity:0}
button.sfx-toggle[aria-pressed=false]{color:var(--hv-faint);background:var(--hv-surface-2)}
button.sfx-toggle[aria-pressed=false] .sfx-wave{opacity:0}
button.sfx-toggle[aria-pressed=false] .sfx-mute{opacity:1}

/* 공통 브랜드 마크: 하늘색 원 안의 금색 별 */
.hv-mark{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:13px;background:var(--hv-grad-sky);box-shadow:0 6px 16px rgba(28,123,201,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.hv-mark svg{width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(138,93,0,.35))}

/* 효과음 버튼·브랜드 마크의 다크 색(haven.css 는 생성기 대상이 아니라 여기서 직접 정의) */
:root[data-theme="dark"] button.sfx-toggle{background:var(--hv-surface);border-color:var(--hv-line);color:var(--hv-sky-300)}
:root[data-theme="dark"] button.sfx-toggle:hover{border-color:var(--hv-line-strong);background:var(--hv-surface-2)}
:root[data-theme="dark"] .hv-mark{box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25)}

@media(forced-colors:active){button.sfx-toggle{border:1px solid ButtonText;color:ButtonText}}
@media(prefers-reduced-motion:reduce){button.sfx-toggle{transition:none}}