/* =========================================================================
   DALYUL — base.css (WP-02)
   리셋 · @font-face 로컬 폴백 · 타이포 스케일 유틸 · :lang 줄바꿈 · 포커스
   ========================================================================= */

/* ---------- @font-face ---------- */
/* 月·律 두 글자 전용(Noto Sans KR VF 서브셋, wght 100–900, 1.5KB). 다른 글자는 다음 패밀리로 넘어간다 */
@font-face {
  font-family: 'Dalyul Han';
  src: url('../assets/fonts/dalyul-han-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+6708, U+5F8B;
}
/* 10-16 사장님 결정(한국적 꾸밈 시안 3번): 이름 장의 큰 月 · 律 두 글자만 부리 — Noto Serif KR VF 서브셋(wght 200–900, 2.4KB), 이름 바꿈(OFL) */
@font-face {
  font-family: 'Dalyul Han Serif';
  src: url('../assets/fonts/dalyul-han-serif-vf.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+6708, U+5F8B;
}
/* 10-16 사장님 결정(시안 4번): 저널 큰 번호 · 제목 = 부리 — Noto Serif KR VF 서브셋(저널 제목 글자 + 숫자만, 58KB), 이름 바꿈(OFL). 제목이 바뀌면 다시 서브셋 */
@font-face {
  font-family: 'Dalyul Buri';
  src: url('../assets/fonts/dalyul-buri-vf.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* 오프라인 폴백: Pretendard SemiBold(600) — KS X 1001 한글 2,350자 + 카피 전체 + ASCII. html.font-offline일 때만 스택에 들어가므로 평소엔 받지 않는다 */
@font-face {
  font-family: 'Dalyul Local Sans';
  src: local('Pretendard SemiBold'), local('Pretendard-SemiBold'),
       url('../assets/fonts/dalyul-local-sans-600.woff2') format('woff2');
  font-weight: 100 900;   /* 한 장으로 모든 굵기를 받는다(가짜 볼드 없음) */
  font-style: normal;
  font-display: swap;
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  overflow-x: clip;                 /* hidden 금지: sticky가 깨진다 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: none;            /* 캔버스 100vw와 DOM 폭을 일치(스크롤바 폭 0) */
  background: var(--umbra);
  color-scheme: dark;
}
html::-webkit-scrollbar { display: none; }
body {
  overflow-x: clip;
  min-height: 100svh;
  background: transparent;          /* 하늘색은 #sky가 그린다 */
  color: var(--fg);
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-stretch: var(--fstretch-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: inherit; border-radius: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, p { font-weight: inherit; font-size: inherit; overflow-wrap: anywhere; }
:where(h1, h2, h3, h4, p, li, span) { filter: none; }   /* 텍스트 filter 금지(DESIGN §1-2) */
::selection { background: var(--sun); color: var(--umbra); }

/* ---------- 언어별 줄바꿈 (DESIGN §1-2) ---------- */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
:lang(ko) :is(h1, h2, h3, .t-lead, .t-d1, .t-d2, .t-h2) { text-wrap-style: balance; }
/* JA: 구(문절) 경계는 카피 JSON의 ZWSP(U+200B)·<wbr>로 준다. keep-all로 글자 사이 임의 줄바꿈을 막고
   ZWSP·구두점에서만 끊는다. 너무 긴 구는 anywhere로 안전 처리 */
:lang(ja) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
:lang(ja) :is(h1, h2, h3, .t-d1, .t-d2, .t-h2) { text-wrap-style: balance; }
:lang(en) { hyphens: manual; text-wrap-style: pretty; }
:lang(en) :is(h1, h2, h3, .t-d1, .t-d2, .t-h2) { text-wrap-style: balance; }
.measure-ko { max-width: 34em; }
.measure-ja { max-width: 32em; }
.measure-en { max-width: 60ch; }

/* ---------- 타이포 스케일 유틸 ---------- */
.t-d1, .t-d2, .t-h2 {
  font-family: var(--ff-display);
  font-stretch: var(--fstretch-display);
  color: var(--fg);
}
.t-d1 {
  font-size: calc(var(--fs-d1) * var(--fs-scale));
  line-height: var(--lh-d1);
  letter-spacing: var(--ls-d1);
  font-weight: var(--fw-display);
}
.t-d2 {
  font-size: calc(var(--fs-d2) * var(--fs-scale));
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  font-weight: var(--fw-display-2);
}
.t-h2 {
  font-size: calc(var(--fs-h2) * var(--fs-scale));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-display-2);
}
.t-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  font-weight: 600;
}
:root:lang(en) .t-lead { font-weight: 500; }
.t-body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  letter-spacing: var(--ls-body-l);
}
.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
/* FOCUS R3 F22: 라벨 = 사이트 고딕 대문자 600 · 자간 .16em(고정폭 서체의 '개발 도구' 인상 0). 번역되는 라벨(한글·가나 포함)은 .t-label--mixed.
   고정폭은 궤도 눈금 숫자(.arc-stop__btn)에만 */
.t-label {
  font-family: var(--ff-label, var(--ff-pretendard));
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: 600;
  font-stretch: 100%;
  text-transform: uppercase;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.t-label--mixed { letter-spacing: var(--ls-label-mixed); text-transform: none; }
.arc-stop__btn.t-label { font-family: var(--ff-mono); font-weight: 500; letter-spacing: .08em; }
/* §44 장 머리 이름표(.t-kicker): 머리글 메뉴(15px 600)보다 확실히 한 단계 위 — 위계 = 큰 제목 > 장 이름표 > 메뉴.
   1280 19px · 1440 20px · 1600~ 22px, 휴대폰 16px(따라오는 표지 .ritual-tag·.col-tag는 --fs-tag 22~24px). 굵기 600 그대로, 대문자 라틴 자간 .12em(한글·가나 0, EN 섞임 .08em) */
.t-label.t-kicker { font-size: calc(var(--fs-kicker) * var(--fs-scale)); line-height: 1.25; letter-spacing: var(--ls-kicker); }
.t-label--mixed.t-kicker { letter-spacing: var(--ls-label-mixed); }
/* 정점(800 · EN 700 wdth 118): 컬렉션 제목 「만월」 · 月律 두 글자
   (히어로 슬로건은 안 1(2026-10-03)로 이름 층 500 → sections.css .hero__slogan, S12 「곧, 만월이 뜹니다.」도 26-10-03 500 → sections.css .notify__title) */
.col-head__title, .name__han { font-weight: var(--fw-peak); }
/* 한글·가나가 주인 라벨은 Pretendard 600을 먼저(모노 공백 폭 0.6em이 어절 간격을 벌리지 않게). 라틴·숫자도 Pretendard tnum */
:root:lang(ko) .t-label--mixed { font-family: var(--ff-pretendard); font-weight: 600; }
:root:lang(ja) .t-label--mixed { font-family: var(--ff-pretendard-jp); font-weight: 600; }
:root:lang(en) .t-label--mixed { text-transform: uppercase; }
/* 시각 숫자(22:00) — Archivo wdth 112, 700, tnum (세 언어 동일) */
.t-time {
  font-family: 'Archivo', var(--ff-mono);
  font-stretch: 112%;
  font-weight: var(--fw-time, 500);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  letter-spacing: var(--ls-time);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--fg);
  white-space: nowrap;
}
/* 넓은 라틴 디스플레이(THE RHYTHM OF THE MOON 등) — 언어 무관 Archivo wdth 125 */
.t-wide {
  font-family: 'Archivo', var(--ff-pretendard);
  font-stretch: 125%;
  font-weight: var(--fw-title, 600);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* ---------- 접근성 유틸 ---------- */
.vh, .vh-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 포커스 (DESIGN §8-5): 2px 실선, offset 3px. 밤 --sun / 아침·스윕 --ink ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0;
}