/* =========================================================================
   DALYUL — layout.css (WP-02)
   고정 레이어(#sky #hero-poster #k4 #stage #stage-still #grain #hud …), 그리드,
   .scene / .scene--pin / .scene__stage(sticky), reduced·no-js 정적 스택
   레이어 순서(DESIGN §1-6): sky 0 → poster 1 → k4 1 → stage 2 → main 3 → grain 4 → hud 40 …
   ========================================================================= */

/* ---------- z0 #sky : 하늘색은 캔버스가 아니라 DOM이 그린다 ---------- */
#sky {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: var(--z-sky);
  background: var(--umbra);
  pointer-events: none;
  contain: strict;
}
/* 10-15 넘김 정리: 첫 화면 남색 하늘을 스크립트(earthsky.js)가 뜨기 전부터 깔아 둠 — 로딩이 걷힐 때 검정이 잠깐 보이던 것 없앰.
   earthsky.js 가 첫 화면에서 멀어지는 만큼 --es-k(1 → 0)를 낮춰 원래 밤(--umbra)으로 */
html.earth #sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #020309 0%, #050a18 40%, #09122c 64%, #0e1a3b 76%, #0b1530 88%, #070d1f 100%);
  opacity: var(--es-k, 1);
}
.sky__day {                         /* 낮 레이어. sky.js가 clip-path: polygon(120점)을 인라인으로 쓴다 */
  position: absolute;
  inset: 0;
  background: var(--morning);       /* 26-10-15: 아침 바탕 = --morning(#ECECEC) */
  clip-path: inset(0 0 0 100%);     /* 기본 = 숨김(오른쪽 끝에 접힘) */
  will-change: clip-path;
}
.sky__sweep {                       /* 사용 안 하면 빈 상태 */
  position: absolute;
  inset: 0;
  background: transparent;
}
.sky__flash {                       /* 섬광선(polyline 3px --sun, 1px 페더). viewBox는 sky.js가 0 0 w h로 맞춘다 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  filter: blur(.5px);               /* 장식 선(텍스트 아님) */
}
.sky__flash polyline {
  fill: none;
  stroke: var(--sun);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* ---------- z1 LCP 포스터 (main.js가 첫 WebGL 프레임과 0.6s 크로스페이드 후 제거) ---------- */
#hero-poster {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: var(--z-poster);
  pointer-events: none;
}
#hero-poster img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 54%;
}

/* ---------- z1 #k4 : 거대 워드마크(히어로에서만) ---------- */
#k4 {
  position: fixed;
  inset: 0;
  height: 100svh;
  z-index: var(--z-k4);
  overflow: clip;                   /* 모바일 120vw가 가로 스크롤을 만들지 않게 */
  pointer-events: none;
  color: var(--moonmilk);
  contain: layout paint;
}
html.poster-on #k4 { visibility: hidden; }   /* main.js: 로더 없는 첫 페인트 ~ 첫 WebGL 프레임 */
/* 처음으로 되돌림 2026-10-03(CONSULT_첫화면_로고_처음으로 ㉢ — 사장님 「첫 화면 로고는 모두 처음으로」):
   공식 글자 사이(viewBox 89.33) · 공식 획 두께 100% · 폭 92vw 가운데(휴대폰 84vw · 14svh = sections.css).
   (안 1 = 0.8배 간격판 81.61 · 양 끝 본문 여백선 → 되돌릴 땐 이 상자와 loader-strokes 내보내기 판만)
   가운데 = left 4vw(스크롤바 폭 0 — base.css). 가로 translate −50%를 쓰지 않는다: 로더 워드마크(loader.js placeMark)는 left px로 놓여
   매치컷 끝 1/128px 어긋남으로 가장자리 화소가 최대 117단계 달랐다 → 같은 놓는 법(left + translate 0 −50%)이면 차이 0 */
.k4__mark {
  position: absolute;
  left: 4vw;
  top: 50%;
  width: 92vw;
  max-width: none;
  height: auto;
  aspect-ratio: 89.33 / 10.304;
  translate: 0 -50%;
  fill: currentColor;
  overflow: visible;
}
/* 26-10-03 휴대폰 간격 판(사장님 「자간도 조금만 더」): #k4 안 path 두 개 — .k4__d 공식 간격(여기 기본) · .k4__m 글자 사이 0.9배(767 이하만, sections.css 휴대폰 묶음).
   같은 뷰박스 · 같은 상자라 크기 · 자리 그대로. 만드는 곳 tools/loader/make_strokes.py → inline.cjs */
.k4__mark .k4__m { display: none; }

/* 10-16 큰 글자 시안(사장님 「투명도 고민」): 주소 손잡이 &k4=a · b · c 일 때만 — index.html 첫 script가 html.k4-a … 를 붙임. 손잡이 없으면 아래 줄은 하나도 안 걸림.
   진하기는 opacity가 아니라 색 알파 · mask로만(#k4 · .k4__mark opacity는 스크롤 퇴장 · 메뉴 · 로딩 k4All이 인라인으로 쓰고 지움 → 끝에서 툭 바뀜).
   .k4__d · .k4__m 클래스가 아니라 .k4__mark에 건다(영화처럼 herodrift가 글자를 클래스 없는 path 여섯으로 나눔 — color는 상속돼 그대로 먹음).
   함께 맞춘 곳: 유리 구슬 속 글자 = glassmoon.js(color · --k4-fade), 구름 가림판 = earthsky.js(--k4-a · --k4-fade), 로딩 글자 = 아래 #loader 줄 + loader.js --k4-u(매치컷 0→1) */
html.k4-a { --k4-ink: rgba(237, 239, 242, .86); --k4-a: .86; }   /* 가: 살짝 투명 — 글자 전체 86%(다른 누리집이 주인공 로고를 '살짝' 숨 쉬게 할 때의 85~92% 안) */
html.k4-c { --k4-ink: #D3D9E3; }                                  /* 다: 한 톤 낮춘 은빛 — 투명도 1 그대로 색만 낮춤(SpaceX #F0F0FA · Stoke #F2F2F2처럼 순백 피하기를 한 단계 더) */
html.k4-a .k4__mark,
html.k4-c .k4__mark { color: var(--k4-ink); }
html.k4-a #loader .ldr__mark,
html.k4-c #loader .ldr__mark { color: color-mix(in srgb, var(--k4-ink) calc(var(--k4-u, 0) * 100%), #EDEFF2); }   /* 로딩 땐 지금 색 → 매치컷 동안 시안 색으로 */
/* 나: 구름 쪽(아래)으로 옅어짐 — 글자 높이 절반까지 꽉, 아래 끝 50%(더 세게 하면 쇠붙이 같은 은도금 글자처럼 보임). --k4-fade = '시작 끝알파'(유리 · 구름 가림판이 같은 값을 읽음) */
html.k4-b .k4__mark {
  --k4-fade: .5 .5;
  -webkit-mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .5));
  mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .5));
}
html.k4-b #loader .ldr__mark {
  -webkit-mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, calc(1 - .5 * var(--k4-u, 0))));
  mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, calc(1 - .5 * var(--k4-u, 0))));
}

/* ---------- z2 캔버스 · 정지 이미지 ---------- */
canvas#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100lvh;
  z-index: var(--z-stage);
  pointer-events: none;
  display: block;
}
#stage-still {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: var(--z-stage);
  pointer-events: none;
}
#stage-still img, #stage-still video {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}

/* ---------- z3 main / footer ---------- */
main, .site-footer {
  position: relative;
  z-index: var(--z-main);
  display: block;
}

/* ---------- z4 그레인 ---------- */
#grain {
  position: fixed;
  inset: -2px;
  height: calc(100lvh + 4px);
  z-index: var(--z-grain);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--grain-night);
  background-repeat: repeat;
  background-size: 256px 256px;
  transition: opacity var(--d-m) linear;
}
html.grain-on #grain {                /* 로드 뒤에만 받는다(4장 ≈ 400KB) */
  background-image: url('../assets/fx/grain_0.webp');
  animation: grain-cycle .333s steps(1, end) infinite;   /* 4장 × 12fps */
}
#grain[data-mode="day"]   { opacity: var(--grain-day); }
#grain[data-mode="sweep"] { opacity: var(--grain-sweep); }
@keyframes grain-cycle {
  0%   { background-image: url('../assets/fx/grain_0.webp'); }
  25%  { background-image: url('../assets/fx/grain_1.webp'); }
  50%  { background-image: url('../assets/fx/grain_2.webp'); }
  75%  { background-image: url('../assets/fx/grain_3.webp'); }
  100% { background-image: url('../assets/fx/grain_0.webp'); }
}

/* ---------- 그리드 (DESIGN §1-4) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}
.wrap { padding-inline: var(--margin); }
/* 여백 상자(.wrap/.grid)의 전폭 직계 자식을 화면 끝까지. 그리드 자식이면 grid-column: 1 / -1과 함께 쓴다(CONSULT_여백 §5) */
.bleed { margin-inline: calc(-1 * var(--margin)); }

/* ---------- 장면 ---------- */
.scene {
  position: relative;
  display: block;
  background: transparent;          /* 섹션 배경 투명(예외: .sweep, 입력창) */
  isolation: auto;
}
/* sticky 장면(TECH §7-2): 높이 = 100svh + pin 길이. pin 값은 HTML style 변수(--pin-d / --pin-m) */
.scene--pin { height: calc(100svh + var(--pin-d, 0px)); }
@media (max-width: 767px) {
  .scene--pin { height: calc(100svh + var(--pin-m, var(--pin-d, 0px))); }
}
.scene__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.scene--full { min-height: 100svh; }

/* 아침 구간 장면: 글자는 잉크. (하늘은 sky.js가 --moonmilk로 바꾼다) */
.scene--day, .is-day {
  --fg: var(--ink);
  --fg-2: var(--stone);
  --rule: var(--rule-day);
  --focus: var(--ink);
  color: var(--fg);
}

/* ---------- reduced-motion · no-js : pin 해제, 정적 세로 스택 (TECH §7-1, DESIGN §8-3) ---------- */
.is-reduced .scene--pin,
.no-js .scene--pin { height: auto; }
.is-reduced .scene__stage,
.no-js .scene__stage {
  position: relative;
  height: auto;
  min-height: 100svh;
  overflow: visible;
}
/* JS 없이도 글이 보이게: 아침 장면은 스스로 아침 면을 깐다(하늘 전환 스크립트가 없으므로) */
.no-js .scene--day { background: var(--morning); }
.no-js #loader, .no-js #k4, .no-js #hero-poster { display: none; }