/* =========================================================================
   DALYUL — sections.css (WP-02)
   S01~S13 배치. 위치·크기는 DESIGN §3 와이어·요소 표 그대로(뷰포트 기준 %, vh, 컬럼).
   컬럼 폭 = calc(var(--col) * N + var(--gutter) * (N - 1))
   ========================================================================= */

/* 겹쳐 쌓는 무대(S05 줄, S06 정거장): 같은 칸에 겹친다. 정적 모드에서는 풀어서 세로로 */
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }
.is-reduced .stack > *,
.no-js .stack > *,
.rv-failsafe .stack > * { grid-area: auto; }
.is-reduced .stack, .no-js .stack, .rv-failsafe .stack { row-gap: var(--s-6); }

/* =====================================================================
   S06~S08 하룻밤 호(고정 레이어) — s06/s07/s08 장면이 .is-on, 아침이면 .is-day
   ===================================================================== */
.arc-layer {
  position: fixed;
  inset: 0;
  height: 100svh;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-m) var(--ease-out-soft), visibility 0s linear var(--d-m);
}
.arc-layer.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--d-m) var(--ease-out-soft);
}
.ritual-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
.ritual-arc__path {
  fill: none;
  stroke: rgba(237, 239, 242, .3);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.arc-layer.is-day .ritual-arc__path { stroke: rgba(10, 11, 12, .3); }
.arc-stops { position: absolute; inset: 0; }
.arc-stop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.arc-stop::before {                 /* 정거장 눈금: 길이 10px, 호의 법선 방향 */
  content: '';
  position: absolute;
  left: -.5px;
  top: -5px;
  width: 1px;
  height: 10px;
  background: rgba(237, 239, 242, .55);
  rotate: var(--rot, 0deg);
  opacity: var(--tick-o, 1);      /* 달 원반 근처에서 옅어짐(sky.js arcMoon) — 눈금이 달 위로 보이지 않게 */
}
.arc-layer.is-day .arc-stop::before { background: rgba(10, 11, 12, .45); }
.arc-stop__btn {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% calc(-100% - 12px);
  padding: 8px 6px;
  white-space: nowrap;
  color: var(--dust);
  pointer-events: auto;
  transition: color var(--d-xs) linear;
}
.arc-layer.is-day .arc-stop__btn { color: var(--stone); }
.arc-stop__btn:hover { color: var(--moonmilk); }
.arc-layer.is-day .arc-stop__btn:hover { color: var(--ink); }
/* OR1 P-24(CONSULT_여백 §7): 첫·끝 시각 글자를 여백(--margin-base) 안으로 — 22:00이 레일 띠와, 07:00이 달과 겹치지 않게.
   6vw = index.html 첫·끝 정거장 --x 6%·94%. 6px = 버튼 좌우 패딩. --x를 바꾸면 같이 고친다 */
.arc-stop__btn { transition: color var(--d-xs) linear, opacity var(--d-s) linear; }
@media (min-width: 768px) {
  .arc-stop:first-child .arc-stop__btn { translate: max(-50%, calc(var(--margin-base) - 6vw - 6px)) calc(-100% - 12px); }
  .arc-stop:last-child  .arc-stop__btn { translate: min(-50%, calc(6vw - var(--margin-base) + 6px - 100%)) calc(-100% - 12px); }
}
@media (max-width: 767px) {
  /* 세로 반호: 왼쪽 위 22:00 → 오른쪽 중간 03:00 → 왼쪽 아래 07:00 (d는 sky/s06이 data-d-mobile로도 교체) */
  .ritual-arc__path { d: path("M12 14 Q160 36 12 58"); }
  .arc-stop { left: var(--xm); top: var(--ym); }
  .arc-stop::before { rotate: var(--rotm, 0deg); }
  .arc-stop__btn { translate: 10px -50%; }
  .arc-stop:nth-child(4) .arc-stop__btn { translate: calc(-100% - 10px) -50%; }
}

/* R3-18 · P-56: CSS 스크림 4종(히어로 · 월식 · 22:10 · K7)의 8비트 띠 0 — 블루노이즈(A-28)를 그라데이션 모양(--sg) 안에만
   부드러운 빛(soft-light)으로 아주 옅게 겹친다(±1/255 안팎). 바탕 하늘 쪽 평균 밝기는 바꾸지 않는다 */
:is(.hero__scrim, .eclipse__scrim, .ritual__scrim, .k7__scrim)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('../assets/fx/bluenoise_128.png') repeat 0 0 / 128px 128px;
  mix-blend-mode: soft-light;
  opacity: .1;
  -webkit-mask-image: var(--sg, none);
          mask-image: var(--sg, none);
}

/* =====================================================================
   S01 · 히어로
   ===================================================================== */
.hero__slogan {
  position: absolute;
  /* 26-10-03 사장님 「추천 가안으로 가고 굵기도 한 단계 낮춰」(CONSULT_첫화면_슬로건자리 가 · 로고 받침):
     큰 DALYUL 바로 밑 한 줄 — 왼쪽 끝 = 로고 D 왼쪽 끝(4vw), 로고 아래 2.1vw(5.306vw = 로고 높이 절반).
     글자 크기는 시안 그대로(1440 25px · 1920 33px), 굵기만 시안 400 → 300 */
  left: 4vw;
  top: calc(50svh + 5.306vw + 2.1vw);
  bottom: auto;
  width: auto;
  margin: 0;
  white-space: nowrap;
  font-weight: 300;
  font-size: calc(clamp(20px, 1.74vw, 34px) * var(--fs-scale));
  line-height: 1.3;
  letter-spacing: .06em;
}
.hero__line { display: inline; }   /* 두 줄 span 사이 공백으로 「달의 리듬, 다시 빛나다」 한 줄 */
/* 26-10-03 슬로건 물결 등장(js/text/ripple.js · s01-hero.js): 그리는 동안 진짜 글자는 투명(자리 · 읽어 주기 그대로), 캔버스는 슬로건 안 절대 위치 */
.hero__slogan.is-rippling .hero__line { color: transparent; }
.hero__rip { position: absolute; left: 0; top: 0; pointer-events: none; max-width: none; max-height: none; }   /* base.css 'canvas { max-width: 100% }'가 판을 슬로건 폭으로 줄이지 않게(궤도 이름 판과 같음) */
/* R2-1 · P-44: 슬로건 뒤 경계 없는 방사형 어둠(보험). 그라데이션 정점 = 완전한 밤색 → motion이 opacity(≤ 0.6)로 세기를 쓴다. 기본 0 */
.hero__scrim {
  position: absolute;
  /* 가 · 로고 받침(26-10-03): 슬로건을 따라 로고 밑으로 자리만 옮김(달 표면과 겹치지 않아 세기 0 그대로) */
  left: calc(4vw + (var(--col) * 6 + var(--gutter) * 5) / 2);
  top: calc(50svh + 5.306vw + 2.1vw + 1.13vw);   /* 슬로건 한 줄 가운데 높이(1.74vw × 1.3 ÷ 2) */
  bottom: auto;
  width: calc((var(--col) * 6 + var(--gutter) * 5) * 1.9);
  height: calc((var(--col) * 6 + var(--gutter) * 5) * 1.1);
  translate: -50% -50%;
  font-size: var(--fs-d2);
  pointer-events: none;
  opacity: 0;
  --sg: radial-gradient(closest-side, rgb(6 7 8) 0%, rgb(6 7 8 / .86) 30%, rgb(6 7 8 / .52) 56%, rgb(6 7 8 / .18) 80%, rgb(6 7 8 / 0) 100%); background: var(--sg);
}
/* 가 · 로고 받침(26-10-03): 영어 두 줄(The rhythm of the moon, / shining once more · 1440 22px) · 일본어 한 줄(한국어 값 + .04em).
   둘 다 로고 D · A 밑 폭 안(영어 약 237px · 일본어 약 302px) — 달 자리 변화 0. 굵기는 한국어와 같은 300 */
:root:lang(en) .hero__slogan {
  width: auto;
  bottom: auto;
  font-size: calc(clamp(18px, 1.5vw, 29px) * var(--fs-scale));
  line-height: 1.32;
  letter-spacing: .01em;
}
:root:lang(en) .hero__slogan .hero__line { display: block; }
:root:lang(ja) .hero__slogan { letter-spacing: .04em; }
.hero__meta {
  position: absolute;
  right: var(--margin);
  bottom: 10vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  row-gap: 2px;
  color: var(--dust);
}
.hero__date, .hero__phase { color: var(--moonmilk); white-space: nowrap; }
/* 10-15 사장님 「오늘 날짜 · 초승달 두 줄은 저장보다 부피가 커야」 → 원래보다 2px 크게(1.25배는 「너무 커」) */
.hero__meta :is(.hero__date, .hero__phase) { font-size: calc(1em + 2px); }
.hero__phase:empty, .hero__date:has(time:empty) { display: none; }
.hero__save {
  margin-top: var(--s-5);
  padding: 6px 0;
  color: var(--dust);
  transition: color var(--d-xs) linear;
}
.hero__save:hover { color: var(--moonmilk); }
.hero__save[aria-busy="true"] { cursor: progress; }
.hero__hold {
  position: absolute;
  left: 50%;
  bottom: var(--s-6);
  translate: -50% 0;
  padding: 10px 16px;
  background: var(--umbra-2);
  color: var(--moonmilk);
}
/* P5: 휴대폰(터치 · 마우스 없음)에는 스페이스 키가 없다 → 낭독 순서 · 초점 순서에서 뺌(데스크톱 그대로) */
@media (hover: none) and (pointer: coarse) {
  .hero__hold { display: none; }
}
/* 자이로 「· 기울여 보기」: 날짜 줄 끝(터치 기기 + 방향 센서가 있을 때만 sun.js가 보인다) */
.hero__tilt {
  padding: 6px 0;
  color: var(--dust);
  white-space: nowrap;
  transition: color var(--d-xs) linear;
}
.hero__tilt[hidden] { display: none; }
.hero__tilt:hover, .hero__tilt[aria-pressed="true"] { color: var(--moonmilk); }
.hero__hint {
  position: absolute;
  right: calc(var(--margin) - 12px);
  bottom: 32px;
  width: 25px;
  height: 48px;
}
.hero__hint-line {
  position: absolute;
  right: 12px;
  top: 0;
  width: 1px;
  height: 48px;
  background: rgba(237, 239, 242, .14);
  overflow: hidden;
}
.hero__hint-line::after {           /* I5 위→아래 반복(2.4s). 바운스 화살표·글자 띠 없음 */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--moonmilk);
  transform-origin: 50% 0;
  scale: 1 0;
  animation: hint-draw 2.4s var(--ease-io) 2s infinite;
}
@keyframes hint-draw {
  0%      { scale: 1 0; transform-origin: 50% 0; }
  50%     { scale: 1 1; transform-origin: 50% 0; }
  50.01%  { scale: 1 1; transform-origin: 50% 100%; }
  100%    { scale: 1 0; transform-origin: 50% 100%; }
}
@media (max-width: 767px) {
  /* 나 · 달 먼저(26-10-03 사장님 「달 그림 아래 DALYUL 슬로건」 · 「달과 DALYUL 사이 여백 좀 더, 너무 타이트해」, CONSULT_휴대폰_첫화면_메뉴 A):
     위에서부터 달(지름 70vw, 중심 --hm-cy) → 틈 --hm-g → 큰 DALYUL(62vw, 높이 7.152vw) → 18px → 슬로건 = 사진 밑 서명(값은 아래 「숨 쉬게」).
     틈: 시안 28px → max(48px, 12vw)(442 53 · 390 48 · 360 48, 약 1.7~1.9배 — 달 · 로고처럼 폭 비례).
     달 중심: 40svh가 기본. 주소창 있는 낮은 화면은 슬로건 밑이 날짜 줄 위 36px(날짜 위 끝 ≈ 93svh − 날짜 묶음 높이)를 넘지 않게 달을 조금 올리고,
     달 위 끝은 머리글 아래 28px에서 멈춤. 그래도 모자라면 슬로건 → 날짜 틈이 24px까지 먼저 받고, 그다음에야 달 ↔ 로고 틈이 줄어듦(최소 32px) — 달 크기는 그대로.
     실제 틈(--hm-gg)은 아래 scroll-margin-top으로 s01-hero.js가 읽어 잰 로고 위에 달을 놓는다(스크롤에는 안 씀) · loader.js 예비 식은 계산된 top을 읽음
     숨 쉬게(26-10-03 사장님 「달과 아래 폰트가 너무 여유가 없어, 달을 좀 줄이고 로고 텍스트도 좀 더 줄여야겠어, 답답해」 · 서하 값):
     달 82vw → 70vw(반지름 --hm-r 35vw) · 로고 76vw → 62vw(높이 --hm-lh 7.152vw = 62 × 10.304 / 89.33) · 틈 max(48px, 12vw) → max(52px, 13vw) · 로고 → 슬로건 14 → 18px(--hm-ls).
     달 중심 기본값: 40svh 대신 덩어리(달 · 틈 · 로고 · 슬로건)를 머리글 아래 끝 ↔ 날짜 줄 위 끝 사이 세로 가운데에(--hm-c) — 위아래 여백이 같아짐.
     위 상한 · 아래 상한 · 틈 줄어듦 순서는 그대로 */
  :root { --hm-g: max(52px, 13vw); --hm-sl: calc(21px * var(--fs-scale, 1)); --hm-meta: 50px; --hm-r: 35vw; --hm-lh: 7.152vw; --hm-ls: 18px;
          --hm-b: calc(93svh - var(--hm-meta));                                                  /* 날짜 줄 위 끝 ≈ */
          --hm-a: calc(var(--hm-b) - 36px - var(--hm-sl) - var(--hm-ls) - var(--hm-lh));         /* 로고 위 끝 상한(슬로건 → 날짜 36px) */
          --hm-c: calc((var(--hdr-h, 56px) + var(--hm-b) - 2 * var(--hm-r) - var(--hm-g) - var(--hm-lh) - var(--hm-ls) - var(--hm-sl)) / 2 + var(--hm-r));   /* 덩어리 세로 가운데 */
          --hm-cy: max(var(--hdr-h, 56px) + 28px + var(--hm-r), min(var(--hm-c), var(--hm-a) - var(--hm-g) - var(--hm-r)));
          --hm-gg: clamp(32px, var(--hm-a) + 12px - var(--hm-cy) - var(--hm-r), var(--hm-g)); }
  :root:lang(en) { --hm-sl: 39.2px; }                  /* 영어 슬로건 두 줄(14px × 1.4 × 2) */
  @media (max-width: 379px) { :root:lang(en) { --hm-meta: 81px; } }   /* 영어 360: 「TILT THE LIGHT」가 셋째 줄로 */
  #k4 .k4__mark { left: 19vw; width: 62vw; translate: 0 -50%; scroll-margin-top: var(--hm-gg); top: calc(var(--hm-cy) + var(--hm-r) + var(--hm-gg) + var(--hm-lh) / 2); }   /* 26-10-03 사장님 「조금 더 작게」: 84vw → 76vw, 「숨 쉬게」: 76vw → 62vw 가운데(left 19vw). 매치컷은 loader.js가 이 상자를 매 프레임 잼 */
  #k4 .k4__mark .k4__d { display: none; } #k4 .k4__mark .k4__m { display: inline; }   /* 26-10-03 「자간도 조금만 더」: 휴대폰 간격 판(글자 사이 0.9배, 같은 상자 가운데) — 로딩 글자도 같은 판(loader-boot.js) */
  /* 로고 받침(26-10-03): 로고(62vw, 높이 --hm-lh) 밑 18px(--hm-ls), 가운데 한 줄 15px · 굵기 300(시안 400에서 한 단계) */
  .hero__slogan {
    position: absolute; left: 0; right: 0; top: calc(var(--hm-cy) + var(--hm-r) + var(--hm-gg) + var(--hm-lh) + var(--hm-ls));
    text-align: center; white-space: nowrap;
    font-size: calc(15px * var(--fs-scale)); font-weight: 300; letter-spacing: .14em; line-height: 1.4;
  }
  .hero__line { display: inline; }
  .hero .scene__stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--margin) 7svh;
  }
  /* R3-13 · P-51: 데스크톱 좌표(left·right·bottom)가 relative 이동으로 남아 x=0·겹침이 생기던 것 → 모두 초기화.
     한 묶음 = 슬로건 → 16px → 날짜·위상 한 줄 → 8px → 저장 링크, 모두 --margin(24px) 기준선 */
  :root .hero .scene__stage .hero__meta {               /* 가(26-10-03): 슬로건은 로고 밑 absolute → 이 묶음엔 날짜만 */
    position: relative;                                  /* 어둠(.hero__scrim) 위에 */
    inset: auto;
    left: auto; right: auto; bottom: auto; top: auto;
    width: auto;
    margin-left: 0;
  }
  .hero__scrim { left: 50%; top: auto; bottom: 0; width: 100%; height: 62svh; translate: -50% 0;
    --sg: radial-gradient(70vw 34svh at 50% 66%, rgb(6 7 8) 0%, rgb(6 7 8 / .86) 30%, rgb(6 7 8 / .52) 56%, rgb(6 7 8 / .18) 80%, rgb(6 7 8 / 0) 100%); background: var(--sg); }
  :root:lang(en) .hero__slogan { font-size: 14px; letter-spacing: .04em; }   /* 가(26-10-03): 영어 두 줄 14px */
  :root:lang(ja) .hero__slogan { font-size: 15px; letter-spacing: .1em; }    /* 가(26-10-03): 일본어 한 줄 15px */
  .hero__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    column-gap: 0;
    row-gap: 0;
    margin-top: 16px;
  }
  /* 구분점은 날짜 글자(<time>, 리빌 대상) 안의 가상 요소 — 날짜가 아직 숨어 있으면 점도 함께 숨는다(고아 「·」 0) */
  .hero__date time::after { content: '\00a0·\00a0'; color: var(--dust); }
  .hero__date:has(+ .hero__phase:empty) time::after { content: none; }
  /* 둘째 줄 = 저장 링크(+ 기울여 보기). 날짜·위상 줄이 좁은 폭에서 「· 기울여 보기」로 꺾여 점이 줄머리에 오는 일 0 */
  .hero__date { order: 1; } .hero__phase { order: 2; }
  .hero__meta::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .hero__save { order: 4; text-align: left; margin-top: 8px; padding: 4px 0; }
  /* FINAL F-05 ⓔ: 휴대폰 날짜·위상 줄과 「오늘 밤의 달 저장 →」 = 13px(최소 12px 위) */
  .hero__meta :is(.hero__save, .hero__tilt) { font-size: 13px; }
  .hero__meta :is(.hero__date, .hero__phase) { font-size: 15px; }   /* 10-15: 날짜 · 위상 = 저장(13px)보다 2px 크게 */
  .hero__tilt { order: 5; margin-top: 8px; margin-left: 16px; padding: 4px 0; }   /* 구분점 대신 16px — 줄머리 고아 「·」 0 */
  .hero__hint { display: none; }
}

/* =====================================================================
   S02 · 매니페스토 — R1 P-06: 크게(1440에서 60px, 700), 승인 문장 그대로 구절 경계에서 2줄씩(i18n-row)
   ===================================================================== */
.manifesto__text {
  position: absolute;
  left: var(--margin);
  top: 50%;
  translate: 0 -50%;
  width: calc(var(--col) * 7 + var(--gutter) * 6);
  display: flex;
  flex-direction: column;
  row-gap: .5em;
  font-size: clamp(30px, 3.9vw, 68px);   /* OR1: 4.2 → 3.9vw — 여백 112에서도 글 끝이 S02 끝(p .9) 큰 달 왼쪽 − 48 안에 */
  font-weight: var(--fw-title, 600);      /* F22 장 제목 층 */
  line-height: 1.1;
  letter-spacing: -.02em;               /* FINAL F-05 ⓖ: −0.03 → −0.02 */
  color: var(--moonmilk);
}
/* OR1 P-21: 새 세 줄(오너 확정)은 EN·JA가 KO보다 길다. 줄(i18n-row)마다 한 줄로, 글 끝은 달 왼쪽 − 48 안에(S02 끝 p .9의 큰 달 기준 ≈ 41vw).
   EN은 Archivo 폭 100%(118%면 줄이 넘친다) */
:root:lang(en) .manifesto__text { letter-spacing: -.02em; font-weight: var(--fw-title, 600); font-stretch: 100%; font-size: clamp(26px, 2.9vw, 52px); max-width: calc(41vw - 48px); }
:root:lang(ja) .manifesto__text { font-size: clamp(24px, 3.1vw, 54px); letter-spacing: 0; line-height: 1.16; max-width: calc(41vw - 48px); }
.manifesto__line > .i18n-row { display: block; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .manifesto__text { font-size: 3.6vw; }
  :root:lang(en) .manifesto__text { font-size: 2.6vw; max-width: calc(37.5vw - 48px); }
  :root:lang(ja) .manifesto__text { font-size: 2.9vw; max-width: calc(37.5vw - 48px); }
}
@media (max-width: 1023px) {
  .manifesto__text { font-size: clamp(26px, 3.4vw, 40px); }   /* OR1 P-24(CONSULT_여백 §8): 여백이 넓어져도 글 끝 ≤ 달 왼쪽 − 48. 시작값 3.8vw → 실측으로 3.4vw */
  /* 태블릿 EN·JA: 큰 달(왼쪽 끝 ≈ 45vw) 앞 37.5vw − 48 안에서 줄바꿈 허용 */
  :root:lang(en) .manifesto__text { font-size: clamp(20px, 2.6vw, 30px); max-width: calc(37.5vw - 48px); }
  :root:lang(ja) .manifesto__text { font-size: clamp(20px, 2.8vw, 30px); max-width: calc(37.5vw - 48px); }
}
@media (max-width: 767px) {
  /* FOCUS R1 P-07(F6): 휴대폰 세 줄은 화면 아래 40% 안(아래 기준), 달은 위 50% 안(motion M-05) */
  .manifesto__text { top: auto; bottom: calc(7svh + env(safe-area-inset-bottom)); translate: 0 0; right: var(--margin); width: auto; font-size: 28px; }
  :root:lang(en) .manifesto__text { font-size: 25px; max-width: none; }
  :root:lang(ja) .manifesto__text { font-size: 24px; max-width: none; }
}

/* =====================================================================
   S03 · 月律 — 이름. R1 P-06: 月 [달 자리] 律 — 2~11컬럼 가운데, 1440에서 274px
   ===================================================================== */
.name {
  display: grid;
  align-content: center;
  padding: var(--s-10) 0;
}
.name__inner { padding-inline: var(--margin); }
.name__title { display: flex; flex-direction: column; align-items: center; margin: 0; }
.name__han {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--col) * 10 + var(--gutter) * 9);
  font-size: calc(clamp(120px, 19vw, 320px) * var(--fs-scale));
  line-height: .95;
  white-space: nowrap;
  /* 2026-10-03 사장님 "다 두꺼워": 800 → 500(크기·달 자리 그대로). EN에서도 月律은 Dalyul Han(맑은 고딕 대체 방지) */
  font-family: 'Dalyul Han Serif', 'Dalyul Han', var(--ff-display);   /* 10-16 사장님: 큰 月 · 律 = 본명조(Noto Serif KR) 600. 옛 = 'Dalyul Han'(고딕) 500 */
  font-weight: 600;
}
.name__char { display: inline-block; }
.name__gap {                         /* K1 달이 앉는 빈자리(motion이 이 상자 중심에 지름 0.82em 달) */
  display: inline-block;
  flex: none;
  width: .95em;
  height: .95em;
}
/* 2026-10-03 가볍게: 영문 줄 = 1440 20px · 400 · 넓은 자간 .28em(한자 묶음 폭의 약 61%), 설명 줄과 한 묶음 — 달이 내려오기 전에 둘이 함께 1:1로 나간다 */
.name__en {
  display: block;
  margin-top: 32px;
  padding-left: .28em;              /* 끝 글자 뒤 자간만큼 채워 시각 가운데 */
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 400;
  font-stretch: 125%;
  letter-spacing: .28em;
  line-height: 1;
  text-align: center;
  color: var(--moonmilk);
  white-space: nowrap;
}
.name__lead {
  /* 2026-10-03 사장님 "영문과 한글 사이 여백 더": 14px → clamp(24px, 1.95vw, 32px)(1440 28px · 1920 32px, 글자 사이 눈에 보이는 틈 1440 약 19 → 35px · 1920 약 20 → 40px, 약 1.8~1.95배).
     설명은 두 줄(i18n-row) — 줄 사이 행간 1.6, 영어 줄 아래 틈이 줄 사이 틈보다 넉넉해 「영어 한 줄 / 설명 두 줄」 묶음이 읽힘 */
  margin: clamp(24px, 1.95vw, 32px) auto 0;  /* FOCUS R3 P3-07(F19): THE RHYTHM OF THE MOON 아래 가운데 — 제목과 한 묶음 */
  width: calc(var(--col) * 6 + var(--gutter) * 5);
  font-size: clamp(19px, 1.5vw, 26px);    /* 2026-10-03 가볍게: 1440 21.6px · 400(본문 리드 층) */
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
  color: var(--moonmilk);
}
:root:lang(en) .name__lead { font-weight: 400; letter-spacing: 0; }   /* base :lang(en) .t-lead 500을 이김 · Archivo 어절 붙음 방지 */
.name__lead > .i18n-row { display: block; }   /* 뜻 단위 두 줄(한 「달 月, 율 律.」 / 「달율은 달의 리듬입니다.」, 영 · 일 같은 규칙) */
@media (max-width: 1023px) {
  .name__han { width: auto; }
}
@media (max-width: 767px) {
  .name { align-content: start; padding: 16svh 0 var(--s-9); }
  .name__han { font-size: 26vw; }   /* 26-10-03 사장님 「한자 너무 가득, 조금만 줄여」: 30 → 26vw(약 13% 작게 · 442폭 양옆 여백 28 → 약 51px) — 달 자리(.95em)·달(0.8em)도 함께 줄어듦 */
  .name__en { font-size: 13px; letter-spacing: .22em; padding-left: .22em; white-space: nowrap; line-height: 1; margin-top: 24px; }
  .name__lead { width: auto; margin-top: 20px; font-size: 17px; text-align: center; }   /* 10 → 20px(사장님 여백 더, 눈에 보이는 틈 약 15 → 25px) */
}

/* =====================================================================
   S04 · 리듬 — 궤도 도식
   ===================================================================== */
.rhythm { --orbit-d: 64vh; --orbit-x: 70vw; --orbit-y: 52%; }
.rhythm__label {
  position: absolute;
  left: var(--margin);
  top: 120px;
  color: var(--dust);
}
.rhythm__copy {
  --copy-w: calc(var(--orbit-x) - var(--orbit-d) / 2 - var(--margin) - var(--s-7));
  position: absolute;
  left: var(--margin);
  top: calc(50% - 40px);
  width: var(--copy-w);
}
.rhythm__phase-box {
  position: relative;          /* 궤도 이름 물결 캔버스(.rhythm__ripple)의 기준 */
  container-type: inline-size;
  width: 100%;
  translate: 0 -50%;
}
.rhythm__phase {
  /* K2: 가장 긴 위상 이름이 한 줄에 들어가도록 상한(컨테이너 폭 비례). 교체 때 줄 수가 변하지 않는다 */
  /* 실측 최장: KO 「차오르는 달」 4.34em, JA 「上弦の月」 3.77em, EN 단어 「Crescent」 5.29em(wdth 125) */
  /* 26-10-03 사장님 「달 이름 부피감 좀 줄여 줘」(서하): 한 단계 작게 × .8(1440 약 126 → 101px · 휴대폰 52 → 42px) · 굵기 600 → 500. 한 · 영 · 일 같은 비율 */
  font-size: calc(min(var(--fs-d1), 22.5cqi) * .8);
  font-weight: 500;
  white-space: nowrap;
  transform-origin: 0 50%;
}
:root:lang(ja) .rhythm__phase { font-size: calc(min(var(--fs-d1), 26cqi) * .8); }
/* 10-16 사장님 「이야기의 만월 · 신월 큰 문구도」: 한 · 일 큰 위상 이름 = 부리 600('Dalyul Buri' — 서브셋에 phase.* 글자 추가). 영어는 폭 호흡(wdth 축)이 있어 Archivo 그대로 */
:root:not(:lang(en)) .rhythm__phase { font-family: 'Dalyul Buri', var(--ff-display); font-weight: 600; }
/* EN: 단어마다 한 줄(min-content) — 항상 2줄 상자라 wdth 호흡 중에도 줄 수·본문 위치가 변하지 않는다 */
:root:lang(en) .rhythm__phase {
  font-size: calc(min(var(--fs-d1), 18.5cqi) * .8);
  font-stretch: 125%;
  white-space: normal;
  overflow-wrap: normal;      /* anywhere면 min-content가 글자 1개 폭이 된다 */
  width: min-content;
  min-height: 1.9em;
  display: flex;
  align-items: flex-end;
}
.rhythm__body {
  position: absolute;
  left: 0;
  top: calc(var(--k2-half, 0px) + var(--s-6) + 16px);   /* 10-16 사장님 「달 이름과 사이 여백 조금 더」 +16px */
  width: calc(var(--col) * 5 + var(--gutter) * 4);
  color: var(--moonmilk);
  font-weight: var(--rhythm-body-w, 400);   /* 10-16 사장님 「두께 한 단계 줄여」 — 아래 :root 기본 굵기에서 한 단계 */
}
/* 본문 위치 = K2 줄 높이의 절반 아래 + 32px. K2 줄 높이는 위 font-size(× .8) × .95 */
.rhythm__copy { --k2-half: calc(min(var(--fs-d1), 22.5 * var(--copy-w) / 100) * .8 * .95 / 2); }
:root:lang(ja) .rhythm__copy { --k2-half: calc(min(var(--fs-d1), 26 * var(--copy-w) / 100) * .8 * .95 / 2); }
:root:lang(en) .rhythm__copy { --k2-half: calc(min(var(--fs-d1), 18.5 * var(--copy-w) / 100) * .8 * .95); }
/* 26-10-03 궤도 이름 한 번만 물결(s04-rhythm.js · js/text/ripple.js): 바뀌는 동안만 진짜 글자를 투명하게(자리 · 읽어 주기 · 색 값 그대로), 캔버스가 그린다 */
.rhythm__ripple { position: absolute; left: 0; top: 0; pointer-events: none; max-width: none; max-height: none; }   /* base.css 'canvas { max-width: 100% }'가 판을 이름 상자 폭으로 줄여 글자가 작아 보이던 것(바뀐 뒤 '자간 뚝') 막음 */
.rhythm__phase.is-rippling { -webkit-text-fill-color: transparent; }
html.is-reduced .rhythm__ripple { display: none; }

.orbit {
  position: absolute;
  left: var(--orbit-x);
  top: var(--orbit-y);
  width: var(--orbit-d);
  height: var(--orbit-d);
  translate: -50% -50%;
}
/* R3-19 · P-55: 태양 방향 = 궤도 위쪽 바깥의 넓고 부드러운 빛 기울기 하나(점·선·화살표 0). 차가운 달빛색, 정점 10%,
   경계가 보이지 않는 여러 정지점 감쇠 + 블루노이즈 3%(8비트 띠 0). 요소가 아니라 궤도 상자의 가상 요소 */
.orbit::before, .orbit::after {
  --sg: radial-gradient(closest-side, rgb(237 239 242 / .11) 0%, rgb(237 239 242 / .08) 28%, rgb(237 239 242 / .045) 52%, rgb(237 239 242 / .017) 76%, rgb(237 239 242 / 0) 100%);   /* 10-16 컬러톤 바꿈-01(옛 rgb(236 237 231) 다섯 곳) */
  content: '';
  position: absolute;
  left: 50%;
  top: -36%;
  width: 150%;
  height: 74%;
  translate: -50% 0;
  pointer-events: none;
}
.orbit::before { background: var(--sg); }
.orbit::before, .orbit::after { display: none; }        /* FOCUS R2 P2-09 ⑷: 위쪽 회색 원형 번짐 빛 제거 */
/* 신월 자리 = 1px 테(먹빛 위 달빛색 .35)만 — 어두운 원반 사진 0 */
.orbit__disc[data-i="0"] .orbit__face { background: none; box-shadow: inset 0 0 0 1px rgb(237 239 242 / .35); opacity: 1; }   /* 10-16 컬러톤 바꿈-01(옛 rgb(236 237 231)) */
.orbit::after {                          /* 블루노이즈 디더(빛 기울기 모양 안에만) */
  background: url('../assets/fx/bluenoise_128.png') repeat 0 0 / 128px 128px;
  mix-blend-mode: soft-light;
  opacity: .1;
  -webkit-mask-image: var(--sg);
          mask-image: var(--sg);
}
/* R1 P-07: 궤도 도식을 코드로 — 점선 궤도(px 대시) + 반쪽이 밝은 원반 8개(태양 = 위, 곧은 명암 경계)
   + 바깥 고리(× 1.18) 지구에서 본 모양 8개(40%). 현재 칸 = 원반 --sun 링(× 1.6) + 바깥 모양 100% */
.orbit__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbit__ring-dots {
  fill: none;
  stroke: rgba(237, 239, 242, .45);   /* R2 P-48: 한 단계 진하게 */
  stroke-width: 1px;
  stroke-dasharray: 2 6;
}
.orbit__ring-draw {                     /* 마스크(그리기 진행). s04가 I5로 대시 오프셋을 그린다 */
  fill: none;
  stroke: #fff;
  stroke-width: 10px;
  transform: rotate(-90deg);            /* 그리기 시작점 = 12시(신월 자리) */
  transform-origin: 50% 50%;
  opacity: 1;                           /* 마스크 안 원은 레이아웃 상자가 없어 헤더 가드(--hg)가 0으로 읽는다 → 항상 1 */
}
.orbit__ring .orbit__ring-draw { opacity: 1 !important; }   /* motion.css [data-hg] 가드보다 우선 */
.orbit__sun {                           /* 궤도 원 위쪽 바깥, 중심에서 0.62 지름 위 */
  position: absolute;
  left: 50%;
  top: -12%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--sun);
}
.orbit__ray {                           /* 태양 방향선 1px 30% */
  position: absolute;
  left: 50%;
  top: calc(-12% + 10px);
  width: 1px;
  height: calc(12% - 10px - var(--mini) / 2 - 8px);
  margin-left: -.5px;
  background: rgba(237, 239, 242, .3);
  transform-origin: 50% 0;
}
.orbit { --mini: 4.2vh; }
.orbit__disc, .orbit__phase {
  --a: calc(-90deg - var(--i) * 45deg); /* 12시 = 신월, 반시계로 공전 */
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mini);
  height: var(--mini);
  margin: calc(var(--mini) / -2) 0 0 calc(var(--mini) / -2);
}
.orbit__disc { transform: rotate(var(--a)) translateX(calc(var(--orbit-d) / 2)) rotate(calc(-1 * var(--a))); }
.orbit__phase {
  --pm: calc(var(--mini) * .82);
  width: var(--pm);
  height: var(--pm);
  margin: calc(var(--pm) / -2) 0 0 calc(var(--pm) / -2);
  transform: rotate(var(--a)) translateX(calc(var(--orbit-d) / 2 * 1.18)) rotate(calc(-1 * var(--a)));
  opacity: .4;
  transition: opacity var(--d-m) var(--ease-out-soft);
}
.orbit__phase svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orbit__phase-rim { fill: var(--umbra); stroke: rgba(237, 239, 242, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.orbit__phase-lit { fill: var(--moonmilk); }
/* R3-19 · P-55: 궤도 위 8개 = 실제 달(phase_atlas.webp 8프레임: 0 신월 · 2 상현 · 4 만월 · 6 하현 — 지구에서 본 모양).
   「달은 모양이 바뀌지 않습니다. 빛이 닿는 자리가 옮겨 갈 뿐입니다」를 도식이 그대로 보인다 */
.orbit__face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url('../assets/moon/phase_atlas.webp') no-repeat;
  background-size: 800% 100%;
  background-position: calc(var(--f, 0) * 100% / 7) 0;
  opacity: .82;
  transition: scale var(--d-m) var(--ease-out), opacity var(--d-m) var(--ease-out-soft);
}
.orbit__disc::after {                   /* 지금 칸 = 주황 1px 테(1.3배 된 달에 바로 붙어) */
  content: '';
  position: absolute;
  inset: -22%;
  border: 1px solid var(--sun);
  border-radius: 50%;
  opacity: 0;
  scale: .85;
  transition: opacity var(--d-m) var(--ease-out-soft), scale var(--d-m) var(--ease-out);
}
.orbit__disc.is-current::after { opacity: 1; scale: 1; }
.orbit__disc.is-current .orbit__face { scale: 1.3; opacity: 1; }
/* 궤도 위 현재 위치 점(6px). motion이 --marker-a(12시 = −90deg)·--marker-o(0..1)를 쓴다. 쓰기 전에는 숨김 */
.orbit__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--moonmilk);
  transform: rotate(var(--marker-a, -90deg)) translateX(calc(var(--orbit-d) / 2));
  opacity: var(--marker-o, 0);
  pointer-events: none;
}
@media (max-width: 1023px) and (min-width: 768px) {
  /* 두 덩어리 위·아래 배치 */
  .rhythm { --orbit-d: 46vh; --orbit-x: 50vw; --orbit-y: 38%; }
  .rhythm__copy { --copy-w: calc(100vw - 2 * var(--margin)); top: auto; bottom: 22%; }
  .rhythm__phase-box { translate: 0 0; }
  .rhythm__copy { --k2-half: 0px; }
  .rhythm__body { position: static; margin-top: calc(var(--s-5) + 12px); }   /* 10-16 +12px */
}
@media (max-width: 767px) {
  .rhythm { --orbit-d: 62vw; --orbit-x: 50vw; --orbit-y: 31%; }
  .orbit { --mini: min(4.2vh, 8vw); }
  .orbit__phase { transform: rotate(var(--a)) translateX(calc(var(--orbit-d) / 2 * 1.36)) rotate(calc(-1 * var(--a))); }
  .rhythm__label { top: calc(var(--hdr-h) + 8px); }
  .rhythm__copy { --copy-w: calc(100vw - 2 * var(--margin)); top: auto; bottom: 8svh; }
  .rhythm__phase-box { translate: 0 0; }
  .rhythm__copy { --k2-half: 0px; }
  .rhythm__body { position: static; margin-top: calc(var(--s-4) + 10px); width: auto; }   /* 10-16 +10px */
}

/* =====================================================================
   S05 · 검은 달 · 흰 달
   ===================================================================== */
/* 26-10-03 사장님 「지금에서 왼쪽 정렬」(CONSULT_월식_이름표_자리): 높이 14vh 그대로, 가로만 사이트 왼쪽 글 기준선(= 머리글 로고 왼쪽 끝 = 그리드 1열 = var(--margin), 장 레일 바깥).
   translate는 쓰지 않는다 — gsap이 CSS translate를 인라인 transform으로 가져가 폭이 768을 넘나들 때 자리가 어긋나지 않게. 휴대폰 가운데는 아래 767 규칙(margin auto) */
.eclipse__label {
  position: absolute;
  left: var(--margin);
  top: 14vh;
  white-space: nowrap;
  color: var(--dust);
}
/* 26-10-03 월식 문구 다′(CONSULT_월식_문구 §6-1): 오른쪽 아래에 세 줄이 차례로 쌓여 문장이 완성된다(한 칸 교대 → 쌓기).
   덩어리 아래 끝 = 화면 아래 16% · 오른쪽 여백에 맞춤. 앞 두 줄 26.6/34/19px 굵기 400 · 만월 줄 46/60/28px 굵기 500 */
.eclipse__lines {
  position: absolute;
  left: auto;
  right: var(--margin);
  bottom: 16vh;
  width: max-content;
  max-width: calc(var(--col) * 4 + var(--gutter) * 3);
  justify-items: end;
  text-align: right;
  row-gap: 0;
}
.eclipse__lines > * { grid-area: auto; }   /* .stack의 한 칸 겹침을 풀어 세 줄을 쌓는다 */
.eclipse__line { max-width: 100%; }
.eclipse .eclipse__line { font-size: calc(clamp(22px, 1.85vw, 34px) * var(--fs-scale)); font-weight: 400; letter-spacing: .01em; line-height: 1.4; }
.eclipse .eclipse__line[data-line="3"] { font-size: calc(clamp(34px, 3.2vw, 60px) * var(--fs-scale)); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; margin-top: .3em; }
.eclipse__mask { display: inline-block; }
/* FINAL F-05 ⓕ: EN 균형 줄바꿈, 「Where they meet, / the full moon.」 두 줄(i18n 줄바꿈 표시 data-i18n-break) — 다′: 만월 줄만 1440 34px(덩어리 폭 ≈ 앞 두 줄) */
:root:lang(en) .eclipse__lines { width: max-content; }
:root:lang(en) .eclipse .eclipse__line { font-size: calc(clamp(22px, 1.85vw, 34px) * var(--fs-scale)); min-width: 0; text-wrap: balance; }
:root:lang(en) .eclipse .eclipse__line[data-line="3"] { font-size: calc(clamp(28px, 2.36vw, 44px) * var(--fs-scale)); }
:root:lang(ja) .eclipse .eclipse__line[data-line="3"] { font-size: calc(clamp(31px, 2.94vw, 55px) * var(--fs-scale)); }
:root:lang(en) .eclipse__mask { text-wrap: balance; }
:root:lang(en) .eclipse__mask .i18n-row { display: block; }
/* 글 뒤 어둠: 글 상자 중심 방사형 rgba(6,7,8,.72) → 0, 반지름 ≈ 글 상자 대각선 × .9. 경계가 보이지 않게 여러 정지점으로 감쇠 */
.eclipse__scrim {
  position: absolute;
  left: auto;
  right: calc(var(--margin) - 8vw);   /* 다′: 오른쪽 아래 덩어리 뒤 */
  bottom: calc(16vh + 70px);
  width: min(46vw, 760px);
  height: 40vh;
  translate: 0 50%;
  opacity: .8;
  font-size: var(--fs-d2);
  pointer-events: none;
  --sg: radial-gradient(closest-side, rgba(6, 7, 8, .72) 0%, rgba(6, 7, 8, .62) 32%, rgba(6, 7, 8, .38) 58%, rgba(6, 7, 8, .14) 80%, rgba(6, 7, 8, 0) 100%); background: var(--sg);
}
@media (max-width: 767px) {
  /* FOCUS R1 P-07(F6): 휴대폰 = 달은 화면 위 45% 안(motion M-05: 중심 y ≤ 30% · 지름 ≤ 46vw), 글 묶음(해독 이름표 + 세 줄)은 화면 아래 35% 안에
     아래 기준으로 고정 — 장면 내내 같은 자리(위로 올라가 달 원반을 지나는 프레임 0). 줄은 같은 칸에 겹쳐 아래 정렬 */
  /* FOCUS R2 P2-09 ⑵: 글 묶음 = 화면 62~75%(두 달 묶음 중심 36% · 달 아래 끝 + 40px) — 라벨은 글 바로 위(장 머리 라벨 자리) 고정 */
  /* 다′ 휴대폰: 세 줄 쌓기(앞 두 줄 19px · 만월 줄 28px · 사이 8px) 덩어리 높이 = 이름표 자리 계산 */
  /* 26-10-03 아이폰 주소창: 움직임 켜진 휴대폰은 s05-eclipse.js가 이름표 · 세 줄에 위 기준 px(top, bottom auto)를 인라인으로 준다(달 아래 끝 + 틈). 아래 값은 js 전 · reduced 자리 */
  .eclipse { --ecl-b: 25svh; --ecl-h: calc((19px * 1.4 * 2 + 28px * 1.1) * var(--fs-scale) + 8px); }
  :root:lang(en) .eclipse { --ecl-h: calc((19px * 1.4 * 2 + 28px * 1.1 * 2) * var(--fs-scale) + 8px); }
  .eclipse__lines { top: auto; bottom: var(--ecl-b); left: var(--margin); right: var(--margin); width: auto; max-width: none; justify-items: center; align-items: end; text-align: center; }
  .eclipse__label { top: auto; bottom: calc(var(--ecl-b) + var(--ecl-h) + 20px); left: 0; right: 0; width: max-content; margin-inline: auto; }   /* 휴대폰은 가운데 그대로(translate 없이) */
  /* P-08: 글 뒤 스크림은 휴대폰에서 쓰지 않는다(가독성은 배치로 — 원칙 ④, 단차 0) */
  .eclipse__scrim { display: none; }
  :root:lang(en) .eclipse__lines { width: auto; }
  .eclipse .eclipse__line, :root:lang(en) .eclipse .eclipse__line { font-size: calc(19px * var(--fs-scale)); }
  .eclipse .eclipse__line[data-line="3"], :root:lang(en) .eclipse .eclipse__line[data-line="3"], :root:lang(ja) .eclipse .eclipse__line[data-line="3"] { font-size: calc(28px * var(--fs-scale)); margin-top: 8px; }
}
.is-reduced .eclipse__lines, .no-js .eclipse__lines, .rv-failsafe .eclipse__lines {
  position: absolute; bottom: 16vh; row-gap: 0;
}
.is-reduced .eclipse__line:not([data-line="3"]), .no-js .eclipse__line:not([data-line="3"]) { opacity: .6; }
@media (max-width: 767px) {
  .is-reduced .eclipse__lines, .no-js .eclipse__lines, .rv-failsafe .eclipse__lines { bottom: var(--ecl-b); }   /* 휴대폰은 이름표 바로 아래 자리 그대로 */
}

/* =====================================================================
   S06 · 22:00 → 22:10 정거장 (+ 미리내, 아이리스)
   공통 정거장 레이아웃: 큰 시각 + 오른쪽에 라벨·본문(마지막 기준선 정렬).
   텍스트는 호의 꼭대기(34%)보다 위에 머문다(호·달과 겹치지 않게)
   ===================================================================== */
.station {
  display: flex;
  align-items: last baseline;
  column-gap: var(--s-6);
}
.station__time { flex: none; }
.station__words {
  display: flex;
  flex-direction: column;
  row-gap: 16px;                         /* R3 · P-56: 부제(본문 한 줄)는 제목 바로 아래 16px — 한 덩어리로 읽힌다 */
  max-width: min(32vw, 30em);
  padding-bottom: .1em;
}
.station__label { color: var(--fg); }
.station__body { color: var(--fg); }
/* FOCUS R3 P3-07(F20): 시간표 본문 17~18px — 큰 시각 · 이름과 위계를 벌린다. 휴대폰 아래 기준 = 화면 아래 max(64px, 안전 영역 + 64px)(맨 위로 돔 위) */
.ritual .station__body { font-size: clamp(17px, 1.25vw, 18px); line-height: 1.6; font-weight: 400; }   /* 26-10-09 사장님 「두께는 한 단계 낮춰」 500 → 400 */
/* 26-10-09 사장님 「22:05 문구 자리가 이상함」: 등장 준비가 본문에 걸어 두는 사전 상태(transform y 24~60)가 장면이 넘겨받은 뒤에도 남아 본문이 제목에서 떨어져 떠 있었다.
   이 본문의 위치는 s06-ritual.js가 translate 속성으로만 움직이므로 transform은 늘 없앤다(제목 아래 16px 한 덩어리) */
.ritual .station__body, .station--0300 .station__body { transform: none !important; }   /* 03:00 「가장 깊은 밤」 본문도 같은 고장(s07-aurora.js가 translate로만 구동) */
.station--0300 .station__body { font-weight: 400; }   /* 26-10-09: 22시 정거장과 같은 굵기(500 → 400) */
:root { --tt-safe: max(64px, calc(env(safe-area-inset-bottom) + 64px)); }
.ritual__stations {
  position: absolute;
  left: var(--margin);
  top: calc(var(--hdr-h) + var(--below-hdr) + var(--fs-tag) + 32px);   /* 26-10-03: 표지 「— 만월 컬렉션의 밤」이 머리글 아래 여백 토큰으로 내려온 만큼 함께(표지 아래 32px — 큰 시각이 머리글 가드의 표지 줄 문턱 + 10px 밖에 앉는다, 예전 머리글 + 6vh) */
  right: var(--margin);
}
/* R2-1 · M-46 · P-44: 정거장 글 뒤 부드러운 어둠(경계 없는 타원). motion이 opacity를 쓴다, 기본 0 */
.ritual__scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: min(100%, calc(var(--margin) + 52vw));
  height: 72svh;
  pointer-events: none;
  opacity: 0;
  --sg: radial-gradient(ellipse 72% 62% at 32% 34%, rgb(6 7 8 / .9) 0%, rgb(6 7 8 / .74) 32%, rgb(6 7 8 / .42) 58%, rgb(6 7 8 / .14) 80%, rgb(6 7 8 / 0) 100%); background: var(--sg);
}
@media (max-width: 767px) {
  .ritual__scrim { width: 100%; height: 60svh; --sg: radial-gradient(ellipse 90% 60% at 40% 36%, rgb(6 7 8 / .9) 0%, rgb(6 7 8 / .74) 32%, rgb(6 7 8 / .42) 58%, rgb(6 7 8 / .14) 80%, rgb(6 7 8 / 0) 100%); background: var(--sg); }
}
/* 26-10-09 사장님 「잘 보이지도 않는데 — 빼도 될 것 같아」: 「22:10 · 은하수」 이름표는 화면에서 숨김(화면 읽어 주는 기능에는 남음) */
.ritual__mirinae { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ritual__mirinae {
  position: absolute;
  left: var(--margin);
  bottom: 32px;
  color: var(--dust);
}
/* 시간표 이름표(OR1 R7 · P-28) — 장 머리 라벨(모바일) + 따라오는 이름표(데스크톱, .col-tag와 같은 자리·같은 문법, 원 대신 1px 선 12px) */
.ritual-head {
  position: absolute;
  left: var(--margin);
  top: calc(var(--hdr-h) + 12px);
  margin: 0;
  color: var(--dust);
  white-space: nowrap;
}
.ritual-tag {
  position: fixed;
  left: 0;
  top: calc(var(--hdr-h) + var(--below-hdr));   /* 26-10-03: 머리글 + 14px → 머리글 아래 여백 토큰(「● 01 만월」과 같은 줄) */
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--moonmilk);
}
.ritual-tag[data-tone="light"] { color: var(--ink); }
.ritual-tag__inner {
  position: absolute;
  left: var(--margin);
  top: 0;
  display: flex;
  align-items: center;
  column-gap: 10px;
  white-space: nowrap;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-m) var(--ease-out), color var(--d-s) linear;
}
.ritual-tag.is-on .ritual-tag__inner, .ritual-tag[data-on] .ritual-tag__inner { clip-path: inset(-4px -4px -6px -4px); }
.is-reduced .ritual-tag__inner { transition: color var(--d-s) linear; }
.ritual-tag__line { flex: none; width: 12px; height: 1px; background: currentColor; }
.ritual-tag__text {
  font-family: var(--ff-display);
  font-weight: var(--fw-display-2);
  font-stretch: var(--fstretch-display);
  font-size: var(--fs-tag);   /* §44: 17 → 22~24px(메뉴 15px보다 확실히 한 단계 위, 「● 01 만월」 표지와 같은 크기) */
  line-height: 1;
  letter-spacing: -.01em;
}
@media (min-width: 768px) {
  .ritual-head { display: none; }
}
@media (max-width: 767px) {
  .ritual-tag { display: none; }
  /* FOCUS R1 P-07(F6): 이름표 「만월 컬렉션의 밤」은 정거장 묶음 바로 위(화면 아래 35% 안, 아래 기준) — 무대가 아래에서 들어올 때
     위쪽 달 원반을 지나가는 프레임 0. --ritual-stack-h = 정거장 묶음 높이(header.js가 잰다) */
  .ritual-head { left: var(--margin); right: auto; top: auto; bottom: calc(var(--tt-safe) + var(--ritual-stack-h, 190px) + 16px); }
  /* §44: 이름표가 16px로 커져 EN 「A NIGHT WITH THE MANWOL COLLECTION」이 화면 폭을 넘음 → 여백 안에서 균형 두 줄(아래 기준이라 위로 자란다) */
  .ritual-head { white-space: normal; max-width: calc(100vw - 2 * var(--margin)); text-wrap: balance; }
  .ritual .station__body { font-size: 17px; }
}
@media (max-width: 767px) { .is-reduced .ritual-head, .no-js .ritual-head { display: block; position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 0 var(--margin); padding-top: calc(var(--hdr-h) + 12px); text-align: left; } }
@media (max-width: 1023px) {
  .station { flex-direction: column; align-items: flex-start; row-gap: var(--s-3); }
  .station__words { max-width: 34em; }
}
@media (max-width: 767px) {
  .ritual__stations { top: auto; bottom: var(--tt-safe); }
  .station__words { max-width: none; }
}

/* =====================================================================
   S07 · 03:00 — 오로라, K7 조리개
   ===================================================================== */
/* R2-7 · M-47 · P-44: K7 글 줄 뒤 넓은 수평 감쇠 어둠(정점 = 밤색, motion이 opacity ≤ 0.45). 기본 0 */
.k7__scrim {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 76svh;
  translate: 0 -50%;
  pointer-events: none;
  opacity: 0;
  --sg: radial-gradient(ellipse 62% 50% at 50% 50%, rgb(6 7 8) 0%, rgb(6 7 8 / .82) 34%, rgb(6 7 8 / .46) 60%, rgb(6 7 8 / .14) 82%, rgb(6 7 8 / 0) 100%); background: var(--sg);
}
@media (max-width: 767px) { .k7__scrim { --sg: radial-gradient(ellipse 90% 46% at 50% 50%, rgb(6 7 8) 0%, rgb(6 7 8 / .82) 34%, rgb(6 7 8 / .46) 60%, rgb(6 7 8 / .14) 82%, rgb(6 7 8 / 0) 100%); background: var(--sg); } }
.k7 {
  position: absolute;
  inset: 0;
  margin: 0;
  color: var(--moonmilk);
  pointer-events: none;
}
/* K7 문구 4차(26-10-03 · 라′ + 둥근 따옴표, 사장님 "둥근 따옴표로 통일하고 첫 줄만 부피감 작게"): 「밤에도」 / “달율은 쉬지 않습니다”
   — 둘째 줄 굵기 400 · 크기 40% · 줄 간격 1.2, 첫 줄은 그 .72배 · 굵기 300 · 85%(머리말), 둘째 줄 따옴표는 CSS(한 · 영 · 일 같은 “ ”).
   글자는 data/i18n K7 키 · index.html 기본 글에만 둔다(여기에는 글자 0, 따옴표도 글에 넣지 않는다). 빈 줄(bottom = 빈 값)은 숨김 */
.k7.t-d1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0;
  font-size: calc(var(--fs-d1) * var(--fs-scale) * .4);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
}
.k7 > span:not(.k7__slit) {
  white-space: nowrap;
  text-align: center;
  color: var(--moonmilk);
  filter: drop-shadow(0 0 .015em rgb(6 7 8 / .7)) drop-shadow(0 0 .25em rgb(6 7 8 / .45));
}
.k7 > span:not(.k7__slit):empty { display: none; }
/* 첫 줄 = 머리말(작고 가늘게). span.을 붙여 위 공통 색(.k7 > span:not(...))보다 앞선다 */
.k7 > span.k7__top { font-size: .72em; font-weight: 300; letter-spacing: .04em; color: color-mix(in srgb, var(--moonmilk) 85%, transparent); margin-bottom: .32em; }
:root:lang(en) .k7 > span.k7__top { letter-spacing: .02em; }
/* 둘째 줄 둥근 따옴표 “ ” — 굵기 300 · 달빛 흰색 55% · 글자와 .1em. 기준선 맞춤(없으면 위아래로 떨어짐).
   모양을 세 나라 말 같게: 따옴표 글꼴은 늘 Archivo · 너비 118%(영어 본문과 같은 공 달린 둥근 모양 — Pretendard 따옴표는 곧은 빗금 ″처럼 보여 쓰지 않음). 별가루(js/fx/k7dust.js)가 이 값 그대로 함께 그린다 */
.k7 > span.k7__mid { display: flex; align-items: baseline; justify-content: center; font-weight: 600; }   /* 10-16 사장님 「달율은 쉬지 않습니다 — 두껍게, 부피감」 400 → 600(머리말 「밤에도」는 300 그대로) */
/* 휴대폰 03:00(26-10-03 · 사장님 "둥근 따옴표가 덩그러니 뜬다"): 따옴표는 글이 실제로 움직이는 줄(.rv-line — 등장 0 → 1 · 위치 · 되감기)에 붙인다.
   예전엔 바깥 줄 상자(span)에 붙어 글이 들어오기 전 · 되감은 뒤에도 따옴표만 떠 있었다. 줄 쪼개기가 없을 때(동작 줄이기 · 스크립트 없음)만 바깥 상자에 */
.k7 > span.k7__mid .rv-line::before, .k7 > span.k7__mid .rv-line::after,
.k7 > span.k7__mid:not(:has(.rv-line))::before, .k7 > span.k7__mid:not(:has(.rv-line))::after { font-family: var(--ff-archivo); font-stretch: 118%; font-weight: 300; letter-spacing: 0; color: color-mix(in srgb, var(--moonmilk) 55%, transparent); }
.k7 > span.k7__mid .rv-line::before, .k7 > span.k7__mid:not(:has(.rv-line))::before { content: "\201C"; margin-right: .1em; }
.k7 > span.k7__mid .rv-line::after, .k7 > span.k7__mid:not(:has(.rv-line))::after  { content: "\201D"; margin-left: .1em; }
:root:lang(en) .k7 > span.k7__mid .rv-line::before, :root:lang(en) .k7 > span.k7__mid:not(:has(.rv-line))::before { margin-right: .04em; }   /* 라틴 대문자는 옆 빈자리가 작아 한글 .1em과 같은 간격으로 보이게 */
:root:lang(en) .k7 > span.k7__mid .rv-line::after, :root:lang(en) .k7 > span.k7__mid:not(:has(.rv-line))::after  { margin-left: .02em; }
.k7__slit {                            /* 보이지 않는 상자: 화면 사각형 = 오로라 마스크(틈 타원의 바깥 사각형, 화면 안으로 자름). 장면(s07-aurora.js)이 left/top/width/height(px)를 쓴다 */
  position: absolute;
  left: 18vw;
  top: 50%;
  width: 64vw;
  height: 0;
  translate: none;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 767px) {
  .k7.t-d1 { font-size: 30px; }   /* 첫 줄 21.6px */
  :root:lang(en) .k7.t-d1 { font-size: min(28px, calc((100vw - 2 * var(--margin)) / 11.6)); }   /* 영어 긴 줄 + 따옴표도 여백 안(390 → 28px, 첫 줄 20.2px) */
}
/* R1 D3: 지면 띠(.aurora__ground) 삭제 — 은하수 하늘에는 지평선이 없다(레터박스 0). 03:00 정거장은 화면 바닥 쪽으로 */
.station--0300 {
  position: absolute;
  left: var(--margin);
  bottom: 9vh;
}
@media (max-width: 767px) {
  .station--0300 { bottom: var(--tt-safe); right: var(--margin); }
}
.is-reduced .k7, .no-js .k7, .rv-failsafe .k7, .k7.k7--static {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22svh;
}
/* K7 문구 3차 · 동작 줄이기: 같은 가운데 두 줄. 밝은 오로라 정지 그림 위를 지나가도 읽히게 진한 테를 글자에 바짝(4.5:1 이상, 깨끗한 두 겹 · 청록 번짐 0) */
.is-reduced .k7 > span:not(.k7__slit) { filter: drop-shadow(0 0 .05em rgb(6 7 8 / .9)) drop-shadow(0 0 .22em rgb(6 7 8 / .65)); }
/* 정적 스택: 03:00 정거장은 K7 아래로 흐른다 */
.is-reduced .station--0300, .no-js .station--0300 {
  position: relative;
  left: auto;
  bottom: auto;
  margin: var(--s-9) var(--margin) 0;
}
.is-reduced .aurora .scene__stage, .no-js .aurora .scene__stage { padding-bottom: var(--s-10); }
/* R3 · P-57: 동작 줄이기 정적 배치 — K7 큰 글(두 줄)과 03:00 제목은 각자 한 화면(100svh). 두 큰 제목이 한 화면에 쌓이지 않는다 */
.is-reduced .k7, .no-js .k7 { min-height: 100svh; justify-content: center; padding-top: 0; }
.is-reduced .station--0300, .no-js .station--0300 {
  margin: 0 var(--margin);
  min-height: 100svh;
  padding-block: 40svh 30svh;
  box-sizing: border-box;
}
.is-reduced .aurora .scene__stage, .no-js .aurora .scene__stage { padding-bottom: 0; }
/* S06 정적 배치: 세 정거장 사이를 넓혀(한 화면에 큰 시각 둘 이하) 달이 비켜 앉을 자리를 둔다 */
.is-reduced .ritual__stations, .no-js .ritual__stations { row-gap: 22svh; padding-block: 18svh 22svh; }
/* FOCUS R2 P2-09 ⑸ 동작 줄이기 겹침 2건: 정거장 묶음은 흐름 안으로(휴대폰 아래 기준 absolute가 위 장면 S05 글 위로 넘쳐 「22:00」이 세 줄과 겹쳤다),
   고정 호 층(호 · 눈금 · 시각 콜아웃)은 정적 세로 배치에서 숫자를 관통하므로 그리지 않는다(정거장 글이 시각을 이미 말한다) */
.is-reduced .ritual__stations, .no-js .ritual__stations { position: relative; inset: auto; margin-inline: var(--margin); }
.is-reduced .arc-layer :is(.ritual-arc, .arc-stops), .no-js .arc-layer :is(.ritual-arc, .arc-stops) { display: none; }

/* =====================================================================
   S08 · 07:00 만월의 아침 (와이프 후 .is-day → 잉크)
   ===================================================================== */
.station--0700 {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  top: calc(var(--hdr-h) + var(--below-hdr) + var(--fs-tag) + 32px);   /* 26-10-03: S06 정거장 묶음과 같은 줄(표지 「— 만월 컬렉션의 밤」 아래 32px, 예전 머리글 + 6vh) */
}
.morning { transition: color var(--d-m) linear; }
@media (max-width: 767px) {
  .station--0700 { top: auto; bottom: var(--tt-safe); }   /* 모바일 호(위 60%)와 겹치지 않게 아래로 */
}

/* =====================================================================
   S09 · 컬렉션 — COLLECTION 01 만월
   순서: [A] 머리 → .col-body( 바탕 무대 → [B/D] 스윕 아이리스·단품 → [D2] 성분 → [D3] 달빛향 → [E] 맺음 띠 ) → 인덱스 → [F] 다음 달
   R3-1: 블록 배경은 모두 투명. 색 면은 화면에 고정된 바탕 무대(.col-ground) 하나가 그리고, 상태는 달의 세 모양으로만 바뀐다.
   data-ground(light | dark | split …)는 헤더 판정·QA용 표시로만 남는다
   ===================================================================== */
.collections {
  --sweep-bg: var(--sweep-01);
  --sweep-fg: var(--ink);
  --silver: var(--sweep-01-alt-a);
  --basalt: var(--sweep-01-alt-b);
}
/* [A] 머리 — COLLECTION 01 / 「만월」(R3-4 · C3-3: 번호 없음) / 부제 「차오르는 빛」 / 소개 */
.col-head {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--hdr-h) var(--margin) 14vh;
}
.col-head__group { display: flex; flex-direction: column; }      /* FOCUS R2 P2-05: 머리 글 묶음(아이리스 게이트가 이 상자의 아래 끝을 본다) */
.col-head__index { color: var(--ink); }
.col-head__title {
  --ch-fs: calc(clamp(96px, 15vw, 216px) * var(--fs-scale));
  display: flex;
  align-items: last baseline;
  margin-top: var(--s-6);
  max-width: calc(var(--col) * 8 + var(--gutter) * 7);
  font-size: var(--ch-fs);
  line-height: .9;
  white-space: nowrap;
  color: var(--ink);
}
:root:lang(en) .col-head__title { --ch-fs: calc(clamp(64px, 11vw, 160px) * var(--fs-scale)); }
.col-head__no { display: none; }      /* R3-4: 큰 제목의 번호는 보이지 않는다(collection.js가 값은 계속 채운다) */
.col-head__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-peak, 800);        /* F22 정점(세 곳 중 하나) */
  font-stretch: var(--fstretch-display);
  letter-spacing: var(--ls-d1);
}
.col-head__sub {
  margin-top: var(--s-5);
  font-family: var(--ff-display);
  font-weight: var(--fw-display-2);
  font-size: calc(var(--fs-lead) * var(--fs-scale));
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--ink);
}
.col-head__lead {
  margin-top: var(--s-3);
  width: calc(var(--col) * 6 + var(--gutter) * 5);
  color: var(--ink);
}
@media (max-width: 767px) {
  .col-head__lead { width: auto; }
  /* 최종 점검 R1 P6: 휴대폰은 구절 경계로 줄을 나누고(한 두 줄 · 영 · 일은 구절마다 균형 두 줄) 줄 폭을 11em 안에 —
     글 끝이 오른쪽에서 내려오는 달 밑으로 들어가지 않게(실측 달 왼쪽 끝 최소 224px − 16) */
  .col-head__lead { max-width: 11em; }
  .col-head__lead .i18n-row { display: block; text-wrap: balance; }
  /* 점검 R1 확인 P6(서하): 영어는 네 줄 → 세 줄. 첫 문장은 균형 두 줄(8.2em), 둘째 문장은 한 줄 그대로(글자 크기 · 문구 그대로).
     실측(실제 휠 40px 간격) 글 줄과 달 사이 가장 가까운 거리 360 81px · 390 97px · 430 167px */
  :root:lang(en) .col-head__lead { max-width: none; }
  :root:lang(en) .col-head__lead .i18n-row:first-child { max-width: 8.2em; }
  :root:lang(en) .col-head__lead .i18n-row:last-child { white-space: nowrap; }
  .col-head__title { --ch-fs: 28vw; max-width: none; }
  :root:lang(en) .col-head__title { --ch-fs: 20vw; }
  .col-head { padding-bottom: 10svh; }
}

/* ---------------------------------------------------------------------
   R3-1 · 계약 1-1: 컬렉션 고정 바탕 무대(.col-ground)
   화면에 고정(position: fixed — 스크롤과 함께 지나가는 직선 경계가 원리적으로 0). main 쌓임 맥락의 맨 아래(z −1):
   하늘·캔버스(낮달) 위, 컬렉션 글·병 아래. 상태 변수(인라인, motion 또는 colground.js 대체 구동):
     --cg-iris-x/y/r  px    ⓐ 아이리스 원(실버 | 베이살트 두 면을 함께 감싼 한 원, 페더 24px)
     --cg-b-l/--cg-b-r 0..100  ⓑ 베이살트가 보이는 가로 구간(%): 기본 50..100 = 반반, 성분 = 100..100(실버 한 색), 달빛향 = 50..r
     --cg-night-x/y/r px    ⓐ 맺음 띠 밤 원(맺음 표시 달 중심에서, 페더 24px)
     --cg-dawn        0..1  ⓒ 종이 복귀 = 명암 경계 호(바탕 무대 전체가 타원 안에서 지워져 진짜 종이·낮달이 드러난다). motion이
                            --cg-dawn-mask(완성된 mask-image 값, terminatorMask와 같은 식)를 주면 그것을 쓴다
   동작 줄이기 = [data-cg] 상태별 즉시 전환(0.3초 불투명도, 마스크 움직임 0). no-js = 블록 자체 배경(맨 아래 규칙)
   --------------------------------------------------------------------- */
.col-ground {
  --cg-feather: 24px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  visibility: hidden;
  /* FOCUS R2 AD2-P01: 새벽 호 = colground.js arc()(호 밖 = 남은 밤). 다른 모듈의 --cg-dawn-mask는 읽지 않는다 */
  -webkit-mask-image: var(--arc-mask, none) !important;
          mask-image: var(--arc-mask, none) !important;
}
.col-ground:not([data-cg="none"]) { visibility: visible; }
.cg {
  position: absolute;
  inset: 0;
  display: block;
}
.cg--duo {
  background: var(--sweep-bg, var(--sweep-01));
  -webkit-mask-image: radial-gradient(circle var(--cg-iris-r, 0px) at var(--cg-iris-x, 74%) var(--cg-iris-y, 40%), #000 calc(100% - var(--cg-feather)), transparent 100%);
          mask-image: radial-gradient(circle var(--cg-iris-r, 0px) at var(--cg-iris-x, 74%) var(--cg-iris-y, 40%), #000 calc(100% - var(--cg-feather)), transparent 100%);
}
/* FOCUS R2 P2-04 · P2-02: 바잘트 층 = 상태 하나의 마스크(colground.js --cg-bas-mask): 두 병 = 오른쪽 반, 퇴장 = 오른쪽 반 ∩ 호 밖,
   휴대폰 = 교체 호 안 → 퇴장 호 밖, 크림 띠 = 덮기 호 안 → 다 덮음 → 숨은 교체 뒤 0. 아이리스 원 마스크는 쓰지 않는다(창이 다 열린 뒤에만 보임) */
.cg--basalt {
  display: none;
  background: var(--basalt);
  -webkit-mask-image: var(--cg-bas-mask, linear-gradient(transparent, transparent));
          mask-image: var(--cg-bas-mask, linear-gradient(transparent, transparent));
}
.col-ground.is-iris-open .cg--duo { -webkit-mask-image: none; mask-image: none; }
/* 쌓는 순서: 실버(duo) < 종이 빛 결(motion .cg--light, 실버 면 전용) < 바잘트 < 밤 — 빛 결이 바잘트를 회색으로 밝히는 프레임 0 */
.col-ground .cg--duo { z-index: 0; }
.col-ground .cg--light { z-index: 1; }
.col-ground .cg--basalt { z-index: 2; }
.col-ground .cg--night { z-index: 3; }   /* 다 열린 뒤 원 마스크 0(모서리 페더 0) */
.col-ground.cg-two .cg--basalt { -webkit-mask-composite: source-in; mask-composite: intersect; }
[data-variant="inverse"] .cg--duo { background: var(--silver); }
[data-variant="inverse"] .cg--basalt { display: block; }
/* FOCUS R3 P3-03 · F23: 밤 창(원 와이프) 삭제 — 맺음 띠의 밤은 바잘트 위에서 같은 자리로 짙어진다(colground --cg-deep 0..1, 바잘트 #161A24 → 밤 #0B0C0D).
   motion이 같은 색의 .cg--tail을 그리면 그것이 함께 덮는다(색이 같아 겹침 차이 0) */
.cg--night {
  background: #0B0C0D;
  opacity: var(--cg-deep, 0);
}
.cg--paper { display: none; }          /* 종이 복귀는 바탕 무대를 지우는 마스크(위)가 맡는다 — 진짜 종이·낮달과 픽셀이 같다 */
/* FOCUS R1 P-01: 창이 열리는 동안 바탕 무대의 같은 원(빈 실버 원 · 빈 검은 원)은 그리지 않는다 — 창 속 그림(패널 · 맺음 무대)이 그 자리를 맡는다.
   창이 화면을 다 덮은 뒤에만 바탕이 켜진다(colground.js [data-win]). 베이살트 바탕은 쓰지 않는다(성분 · 달빛향 = 실버 한 바탕) */
.col-ground[data-win="iris"] :is(.cg--duo, .cg--basalt, .cg--ring) { visibility: hidden; }
/* 동작 줄이기: 마스크 0, 블록 진입마다 상태만(0.3초) */
html.is-reduced .col-ground { -webkit-mask-image: none; mask-image: none; }
html.is-reduced .cg { -webkit-mask-image: none; mask-image: none; opacity: 0; transition: opacity .3s linear; }
/* FOCUS R3: 두 병 = 실버(패널이 자기 반반 바탕), 성분 · 크림 띠 · 달빛향 = 바잘트, 맺음 띠 = 밤 — 블록 진입마다 0.3초 교차 */
html.is-reduced .col-ground[data-cg="duo"] .cg--duo,
html.is-reduced .col-ground:is([data-phase="basalt"], [data-phase="deep"], [data-cg="tex"], [data-cg="scent"]) .cg--basalt,
html.is-reduced .col-ground[data-cg="close"] .cg--night { opacity: 1; }

/* 블록 배경 = 투명(R3-1). 지난 회차의 페더·렌즈 마스크·겹침 여백(motion.css §7)도 이 무대에서는 쓰지 않는다.
   예외(FOCUS R1): 창 속 그림 두 장 — 두 병 패널(.sweep-iris__panel)과 맺음 무대(.col-close__stage)는 자기 바탕을 가진 불투명 그림이다 */
.collections .sweep,
.collections .col-ing,
.collections .col-scent,
.collections .col-close,
.collections .col-next { background: transparent; }
html:not(.is-reduced):not(.no-js) .collections :is(.col-ing, .col-scent, .col-close) {
  -webkit-mask-image: none;
          mask-image: none;
}
/* FOCUS R1 원칙 ①(유령 페이드 0): 지난 회차 s09가 인라인으로 쓰던 퇴장(병 칸 마스크 · 패널 원 마스크 · 정보 불투명도 · 5% 비켜 오름 ·
   머리 글 옅어짐 · 달빛향 글 색 알파 · 검은 달 축소)을 무력화한다. 퇴장은 스크롤 1:1(패널이 위로 지나감) 또는 다음 창이 덮음뿐 */
html:not(.is-reduced):not(.no-js) .collections .sweep-iris__panel { -webkit-mask-image: none !important; mask-image: none !important; translate: none !important; }
/* FOCUS R3 F14: 호 ①② 삭제 — 칸은 더 이상 호 마스크로 잘리지 않는다(월식 검은 달 · 교체 원은 motion 층이 위에서 덮는다). 병은 어떤 전환에서도 1배 초과 0 */
html:not(.is-reduced):not(.no-js) .collections .product { -webkit-mask-image: none !important; mask-image: none !important; translate: none !important; }
html:not(.is-reduced):not(.no-js) .collections .products { scale: none !important; }   /* 'none'(1이라도 값이 있으면 fixed 자식의 기준 상자가 된다 — motion 교체 원) */
/* 안전망(FOCUS R3): 컬렉션이 화면 밖이거나 COLLECTION 02에 왔는데 motion의 화면 고정 층(성분 밤 층 · 검은 달 · 빛 테 · 그늘 · ●)이 켜진 채 남으면
   다른 장 위에 겹친다(바로 가기 링크 S12에서 실측). 바탕 무대의 상태(colground data-cg)로 한 번 더 끈다 — 컬렉션 안에서는 영향 0 */
.collections:has(.col-ground:is([data-cg="none"], [data-cg="next"])) :is(#ingredients.is-night, .s9-ecl, .s9-erim, .s9-shade, .s9-dot) { visibility: hidden !important; }
/* 새벽 호(AD2-P01): 맺음 무대 = 호 밖, 다음 자리 = 호 안 — 같은 함수 · 같은 좌표(colground.js --arc-mask). 다른 모듈의 인라인 마스크는 지는 쪽 */
html:not(.is-reduced):not(.no-js) .collections .col-next { -webkit-mask-image: var(--arc-mask, none) !important; mask-image: var(--arc-mask, none) !important; }
/* 전원 점검 A3: 맺음 무대 = 새벽 호(--arc-mask) ∩ 머리글 앞 부드러운 가림(--cc-soft, s09-collections.js가 매 프레임 — 핀 동안은 머리글 위,
   풀린 뒤 64px 동안 내려와 머리글 밑변 + 8px에서 멈춤 · 64px 동안 0 → 1). 바탕 막 · 그늘 띠 0. 동작 줄이기 · no-js는 이 규칙 밖(지금과 같음) */
html:not(.is-reduced):not(.no-js) .collections .col-close__stage { -webkit-mask-image: var(--arc-mask, linear-gradient(#000, #000)), var(--cc-soft, linear-gradient(#000, #000)) !important; mask-image: var(--arc-mask, linear-gradient(#000, #000)), var(--cc-soft, linear-gradient(#000, #000)) !important; -webkit-mask-composite: source-in !important; mask-composite: intersect !important; }
/* 창이 다 열린 뒤 두 병 패널은 투명 — 바탕(실버 | 바잘트)은 화면에 고정된 바탕 무대가 칠하고 병 · 글만 스크롤 1:1로 지나간다(판 밑변 0) */
html:not(.is-reduced):not(.no-js) .collections .sweep-iris__panel.is-win-open { background: transparent !important; }
html:not(.is-reduced):not(.no-js) .collections .sweep-iris__panel { visibility: visible !important; }
html:not(.is-reduced):not(.no-js) .collections :is(.product__info, .col-head) { opacity: 1 !important; translate: none !important; }
/* 달빛향 연기 퇴장(26-10-03, 서하+AD+모션 A안): s09 scentSmoke가 [data-smoke]와 요소별 --sm-o/-b/-y/-s를 쓴다. 등장(I2·두 달 커짐)은 그대로 */
html:not(.is-reduced):not(.no-js) .collections .col-body .col-scent[data-smoke] :is(.scent__label, .scent__word, .scent__text, .scent__cap) { opacity: var(--sm-o, 1) !important; filter: blur(var(--sm-b, 0px)); }
html:not(.is-reduced):not(.no-js) .collections .col-body .col-scent[data-smoke] :is(.scent__label, .scent__word, .scent__text) { translate: 0 var(--sm-y, 0px) !important; scale: var(--sm-s, 1); }
html:not(.is-reduced):not(.no-js) .collections .col-body .sweep--body .col-scent[data-smoke] .scent__half--a .scent__cap { translate: calc(var(--sc-near) * var(--sc-step)) var(--sm-y, 0px) !important; scale: var(--sm-s, 1); }
html:not(.is-reduced):not(.no-js) .collections .col-body .sweep--body .col-scent[data-smoke] .scent__half--b .scent__cap { translate: calc(var(--sc-near) * var(--sc-step) * -1) var(--sm-y, 0px) !important; scale: var(--sm-s, 1); }
/* 동작 줄이기: 흐림·떠오름·일렁임 0, 0.2초 교차만 */
html.is-reduced .collections .col-scent :is(.scent__label, .scent__word, .scent__text, .scent__cap) { transition: opacity .2s linear; }
html.is-reduced .collections .col-scent[data-smoke] :is(.scent__label, .scent__word, .scent__text, .scent__cap) { opacity: 0 !important; }

/* 컬렉션 01의 몸(.col-body) + 따라오는 표지 「● 01 만월」(CONSULT_컬렉션이름 §3).
   데스크톱 = 헤더 바로 아래 한 줄. 휴대폰 = 헤더 줄 안(로고 D 옆, 워드마크 자리) — 헤더 판 높이 = 헤더 높이(R3-5).
   글자색은 header.js가 표지 자리의 바탕으로 [data-tone="dark"]를 쓴다 */
.col-body { position: relative; }
.col-tag {
  --tag-top: var(--below-hdr);   /* 26-10-03: 14px → 머리글 아래 여백 토큰(휴대폰은 아래 헤더 줄 안 그대로) */
  position: fixed;
  left: 0;
  top: calc(var(--hdr-h) + var(--tag-top));
  width: 0;
  height: 0;
  z-index: var(--z-hud);
  pointer-events: none;
  color: var(--ink);
}
.col-tag[data-tone="dark"] { color: var(--moonmilk); }
.col-tag__inner {
  position: absolute;
  left: var(--margin);
  top: 0;
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: var(--fs-tag);   /* §44: 20 → 22~24px(「— 만월 컬렉션의 밤」 표지와 같은 크기) */
  line-height: 1;
  white-space: nowrap;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-m) var(--ease-out), color var(--d-s) linear;
}
/* 켜짐 = s09 .is-on(아이리스가 표지 자리를 덮음 ~ 맺음 띠 top 50%) 또는 header.js [data-on](표지 자리 바탕 = 컬렉션 색 면).
   s09 .is-off(맺음 띠 이후·장면 밖)는 둘 다를 이긴다(css/motion.css) */
.col-tag.is-on .col-tag__inner, .col-tag[data-on] .col-tag__inner { clip-path: inset(-4px -4px -6px -4px); }
.is-reduced .col-tag__inner { transition: color var(--d-s) linear; }
.col-tag__disc { flex: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.col-tag__no {
  font-family: 'Archivo', var(--ff-pretendard);
  font-stretch: 112%;
  font-weight: var(--fw-title, 600);
  letter-spacing: var(--ls-time);
  font-variant-numeric: tabular-nums lining-nums;
}
.col-tag__name {
  margin-left: calc(.25em - 10px);
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fstretch-display);
  letter-spacing: -.01em;
}
html.menu-open .col-tag { visibility: hidden; }
@media (max-width: 767px) {
  /* 헤더 줄 안: 로고 D(반달) 바로 옆, 워드마크 자리(표지가 켜진 동안 워드마크는 접힌다 — components.css #hud.has-tag) */
  .col-tag { top: calc(var(--hdr-h) / 2 - 8px); }
  .col-tag__inner { left: calc(var(--margin) + 19px + 12px); font-size: 16px; column-gap: 6px; }
  .col-tag__disc { display: none; }
  .col-tag__name { margin-left: 0; }
  /* 최종 점검 R1 P6: 펼칠 때는 워드마크가 다 사라진 뒤(--d-s) — 접힐 때는 기다림 없이(기본 규칙). 워드마크 쪽은 components.css */
  html:not(.is-reduced) .col-tag:is(.is-on, [data-on]):not(.is-off) .col-tag__inner { transition: clip-path var(--d-m) var(--ease-out) var(--d-s), color var(--d-s) linear; }
}

/* 스윕 면 공통(확대 창 #product-overlay도 쓴다): 불투명 단색(사진 스윕 배경과 픽셀 일치) — 카드 상자 없음 */
.sweep {
  --fg: var(--sweep-fg);
  --fg-2: var(--sweep-fg);
  --rule: rgba(10, 11, 12, .22);
  --focus: var(--ink);
  background: var(--sweep-bg);
  color: var(--fg);
}
/* 역상(기본, 나안): 왼쪽 실버(세럼) / 오른쪽 베이살트(크림) */
[data-variant="inverse"] {
  --sweep-bg: linear-gradient(90deg, var(--sweep-01-alt-a) 50%, var(--sweep-01-alt-b) 50%);
}
[data-variant="inverse"] .sweep { background: var(--sweep-bg); }
.collections[data-variant="inverse"] .sweep { background: transparent; }
[data-variant="inverse"] .product--cream { --fg: var(--moonmilk); --fg-2: var(--moonmilk); --rule: rgba(237, 239, 242, .22); --focus: var(--moonmilk); color: var(--fg); }

/* [B + D] 스윕 아이리스(sticky) = 내용을 담은 창(FOCUS R1 P-01 ⓐ). 패널 = 두 병 50/50 한 화면(자기 바탕 — 실버 | 베이살트),
   낮달 원반 자리에서 clip-path 원으로 열린다: 처음 1px부터 창 안에 실제 두 병 화면이 보이고 테두리는 또렷하다(페더 0).
   변수(패널 좌표 px)는 colground.js가 바탕 무대 값(motion)을 옮겨 쓴다: --cg-iris-x/y/r · --cg-iris-moon(창 안 낮달 무늬 1 → 0) · --cg-iris-r0.
   창이 열리는 동안 무대가 아직 붙지 않았으면 .is-win-fixed(화면에 고정 — 창 속 그림이 처음부터 화면 자리에), 다 열리면 .is-win-open(clip 없음).
   병 높이 = 화면 높이의 약 53%(1440×900에서 ≈ 477px): 사진 상자를 키우고(병 위아래 빈 스튜디오만 잘라 냄) 위 여백을 줄였다 */
.sweep-iris { height: calc(100svh + var(--pin-d)); position: relative; }
@media (max-width: 767px) { .sweep-iris { height: calc(100svh + var(--pin-m)); } }
.sweep-iris__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.sweep-iris__stage.is-win-fixed { position: fixed; left: 0; top: 0; width: 100%; }
.sweep-iris__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--hdr-h) + max(16px, 2svh)) 0 0;   /* FOCUS R3 P3-11: 캡 꼭대기 = 헤더 아래 ≥ 16px(1440×900 ≈ y 101) */
  background: var(--sweep-bg, var(--sweep-01));
  clip-path: circle(var(--cg-iris-r, 0px) at var(--cg-iris-x, 74%) var(--cg-iris-y, 40%));
}
.collections[data-variant="inverse"] .sweep-iris__panel { background: linear-gradient(90deg, var(--silver) 50%, var(--basalt) 50%); }
.sweep-iris__panel.is-win-open { clip-path: none; }
@media (min-width: 768px) and (max-height: 760px) { .sweep-iris__panel { padding-top: calc(var(--hdr-h) + 16px); } }
/* 창 안 낮달 무늬: 창이 낮달 원반에서 시작할 때 그 원반이 그대로 보이다가(1) 지름 1.3배가 될 때까지 0으로. 낮달처럼 옅게(종이 위 낮달과 같은 인상) */
.sweep-iris__moon {
  position: absolute;
  left: var(--cg-iris-x, 74%);
  top: var(--cg-iris-y, 40%);
  z-index: 3;
  width: calc(2 * var(--cg-iris-r0, 0px));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(var(--cg-iris-moon, 0) * .92);
  background: radial-gradient(circle closest-side, #E8E9EB 0%, #E3E4E6 86%, #DBDCDF 100%);   /* 10-16 컬러톤 바꿈-13(옛 #E9EAE6 · #E4E5E1 · #DCDDD9) */
}
.sweep-iris__moon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url('../assets/moon/sprite_white.webp') center / contain no-repeat;
  filter: grayscale(1) contrast(.78) brightness(1.06);
  opacity: .58;
  mix-blend-mode: multiply;
}
.sweep-iris__panel:not(.is-win-on) .sweep-iris__moon, .sweep-iris__panel.is-win-open .sweep-iris__moon { visibility: hidden; }   /* display: none이면 달 그림을 창이 열리는 순간에야 받아 첫 프레임이 빈 회색 원 */
.is-reduced .sweep-iris, .no-js .sweep-iris { height: auto; }
.is-reduced .sweep-iris__stage, .no-js .sweep-iris__stage { position: relative; height: auto; min-height: 100svh; }
.is-reduced .sweep-iris__panel, .no-js .sweep-iris__panel { position: relative; min-height: 100svh; clip-path: none; }
.is-reduced .sweep-iris__moon, .no-js .sweep-iris__moon { display: none; }

/* [D] 단품 줄 — FOCUS R2 P2-04 · AD2-P03(아트디렉터 자리값). 반반 면의 각 가운데에 병 하나씩(세럼 = 실버 · 크림 = 바잘트).
   바탕은 화면에 고정된 바탕 무대가 칠하고(패널은 창이 다 열린 뒤 투명) 병 · 글만 스크롤 1:1로 지나간다.
   세로 리듬(1440×900): 표지 「● 01 만월」 아래 끝 y≈108 → 사진 상자 위 끝 y 128 → 병 묶음(캡 꼭대기 → 병 바닥) 0.56H = 504px →
   병 바닥 → STEP 28px → STEP 12px 600 +0.16em → 제품명 48px 700 행간 1.15 → 12px → 부제 16px 400 80% → 16px → 스펙 줄 15px 500 → 화면 아래 ≥ 72px.
   노트북(높이 ≤ 760): 병 묶음 0.52H · 위 104px · 제품명 40px · 정보 아래 ≥ 56px. 높이 ≥ 1000: 0.58H(상한 600px).
   사진 = 4:5 원본 그대로 상자보다 크게 — 캡 꼭대기 = 사진 높이 22.07%, 병 바닥 = 83.93%(병 묶음 = 사진의 61.86%, 실측).
   상자 가장자리는 페더 마스크(위 2% · 좌우 7% · 아래 28px) — 사진 바탕과 바탕 무대 사이 사각 경계 0(asset 감쇠 사본이 오면 그것) */
/* FOCUS R3 F14 · P3-11(CONSULT_마우스_제품칸 4절 + AD 서명 4): 병 묶음 1440 558 · 1280 410 · 1920 670 · 390 472(상한 66% · 700px).
   병 바닥 → STEP 24px(--stem, AD 24–32), 글 묶음 아래 끝 ≥ 화면 아래 56px(1280×720 ≥ 40px), 글 폭 = max(상자 폭, 404px) ≤ 552px */
.products {
  /* FOCUS R3 qa r3-panel-space: 사진 속 실제 병 바닥(바탕이 아닌 마지막 줄)은 83.93%보다 사진 높이의 0.8% 아래(1280 · 1440 · 1920 실측 15.4~18.7px)
     → 병 바닥 → STEP = 27px + 0.8% 보정(1440 실측 세럼 28 · 크림 32, AD 24–32). 보정만큼 묶음을 위로 당겨(데스크톱) 글 묶음 아래 여백 감소는 3px뿐, 캡 위 ≥ 16px 유지 */
  --stem: calc(27px + var(--img-h) * .008);
  --pk: .85;                                                          /* 사장님 2026-10-03 「용기 줄여」: 병 묶음 = 예전의 85% */
  --bot-h0: min(clamp(52svh, calc(100svh - 342px), 62svh), 700px);    /* 예전 병 묶음 높이(줄이기 전, 위 여백 계산용) */
  --bot-h: calc(var(--bot-h0) * var(--pk));                           /* 병 묶음 높이(크림 기준) */
  --img-h: calc(var(--bot-h) / .6186);              /* 사진(4:5) 높이 */
  --cap-pad: calc(var(--img-h) * .012);             /* 캡 꼭대기 위 숨 */
  --box-h: calc(var(--bot-h) + var(--cap-pad) + var(--stem));   /* 상자 = 캡 위 숨 + 병 묶음 + 병 바닥 → STEP */
  --box-w: calc(var(--img-h) * .8 * .62);           /* 상자 폭: 사진 폭의 62%(병 40% + 그림자 + 숨) */
  --info-w: min(max(var(--box-w), 404px), 552px);
  --name-fs: clamp(34px, 3.2vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(2 * var(--margin-base));
  align-items: start;
  padding-inline: var(--margin);
}
@media (min-width: 768px) and (max-height: 760px) { .products { --bot-h0: clamp(50svh, calc(100svh - 310px), 57svh); --name-fs: 40px; } }
@media (min-width: 768px) { .products { margin-top: calc(var(--img-h) * -.008); padding-top: calc((var(--bot-h0) - var(--bot-h)) * .5); } }   /* 위 --stem 보정분만큼 위로(캡 위 − 헤더 1280 ≈ 19 · 1440 ≈ 22 · 1920 ≈ 26px) */
.product-room { display: contents; }                 /* 데스크톱: 칸 = 격자 칸(방 상자 없음). 휴대폰: 한 화면 + 머무름 0.9H(아래) */
.product { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.product__open, .product__rule { width: min(100%, var(--box-w)); }
.product__info { width: min(100%, var(--info-w)); }
.product__open { display: block; padding: 0; }
.product__media {
  display: block;
  position: relative;
  height: var(--box-h);
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 26px), transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 26px), transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-composite: intersect;
}
.product__media.is-alpha { -webkit-mask-image: none; mask-image: none; }   /* 마감판(바탕 투명 · 바닥 감쇠 내장) — 상자 페더 불필요 */
.product__img {
  position: absolute;
  left: 50%;
  top: calc(var(--box-h) - var(--stem) - var(--img-h) * var(--bs, 1) * .8393);   /* 병 바닥 = 상자 아래 − STEP 간격(두 병 같은 기준선) */
  width: auto;
  height: calc(var(--img-h) * var(--bs, 1));
  max-width: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  translate: -50% 0;
  /* FOCUS R3 F14(규제 firming_verdict ②): 마우스 올림 확대 · 돋보기 커서 삭제 — 사진은 늘 1배 */
}
.product--serum { --bs: .92; }   /* 세럼 = 크림의 0.92(세트 사진 실측 830/902, 30 mL < 50 mL) */
/* FINAL F-05 ⓐ: 사진 바닥 가는 구분선은 뺀다(사양표 인상 0). 요소는 남겨 두고(모션 타임라인 호환) 그리지 않는다 */
.product__rule { display: none; }
/* 글 위계(AD2-P03): STEP 12px 600 +0.16em → 제품명 48px 700 1.15 → 부제 16px 400 80% → 스펙 줄 15px 500
   사장님 2026-10-03 「네 줄이 일정하게 떨어져 덩어리감 부족」 → 여백 = 두 덩어리(서하): [STEP + 제품명 + 부제] 바짝 · 스펙 줄(+「자세히 보기 →」)은 바닥 정보로 확실히 뗌.
   간격은 제품명 글자 크기(--nm)에 비례 — 글자 잉크 기준 STEP→이름 ≈ 0.26N · 이름→부제 ≈ 0.3N · 부제→스펙 ≈ 0.95N(1440: 12 · 14 · 44px, 전 20 · 22 · 31px) */
.product__info { padding-top: 0; --nm: calc(min(var(--name-fs), 3.6vw) * var(--fs-scale)); }
.product__step {
  margin: 0;
  font-family: var(--ff-pretendard);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  opacity: .72;
}
.product__name {
  margin-top: .04em;                     /* STEP = 이름에 붙은 머리말(줄 상자 위 숨 ≈ 0.2em이 있어 잉크 간격 ≈ 0.26em) */
  margin-bottom: .08em;                  /* 부제 = 이름 바로 아래 받침 */
  font-size: calc(min(var(--name-fs), 3.6vw) * var(--fs-scale));   /* 좁은 데스크톱(1024)에서도 한 줄 · 칸 안(EN 「Milky Way Cream」 ≈ 9.5em) */
  font-weight: 700;                                                  /* 10-16 사장님 「제품명 두께 올려 줘」 → 「더 두껍게」 500 → 700 (옛 F22: 이름 층 500 — 병과 무게를 다투지 않게) */
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
  width: max-content;                    /* AD2-P03: KO/EN/JA 모두 한 줄 — 이름 상자 = 글 폭(줄 상승 마스크가 글을 자르지 않게) */
  max-width: none;
}
:root:lang(en) .product__name { letter-spacing: -.015em; }
:root:lang(ja) .product__name { letter-spacing: 0; }
/* 부제(결 한 줄): 제품명 아래 12px — 데스크톱 한 줄, 휴대폰 두 줄(i18n-row) */
.product__texture { margin-top: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--fg); opacity: .8; }
.product__texture .i18n-row { display: inline; }
.product__sub { margin-top: 16px; font-size: 15px; font-weight: 500; line-height: 1.5; opacity: .8; font-variant-numeric: tabular-nums; }
/* FOCUS R3 F14 안 1: 스펙 줄 + 「자세히 보기 →」 = 한 줄(기준선 맞춤, AD P3-11), 링크는 오른쪽 끝. 줄 상자에는 transform 0(늘린 누름 층이 깨지지 않게) */
.product__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 16px; row-gap: 10px; margin-top: calc(var(--nm) * .95 - 15px); }   /* 바닥 정보: 잉크 간격 ≈ 0.95N(작은 두 줄의 줄 상자 숨 15px 뺌). 단추가 보이는 화면에서 둘이 한 줄에 안 들어가면 단추가 스펙 줄 아래로(스펙 줄이 먼저 감기지 않게) */
.product__row .product__sub { margin-top: 0; }
.product__more {
  --ink-p: var(--ink);
  position: relative;
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: baseline; gap: 8px;
  margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--ff-body); font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: 0;
  color: var(--ink-p); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-variant="inverse"] .product--cream .product__more { --ink-p: var(--moonmilk); }
.product__more-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-thickness .24s var(--ease-out); }
.product__arrow { display: inline-block; width: 14px; height: 10px; align-self: center; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.product__arrow svg { display: block; width: 14px; height: 10px; overflow: visible; }
.product__arrow path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; }
@media (min-width: 1600px) {
  .product__more { font-size: 16px; gap: 9px; }
  .product__more-t { text-underline-offset: 6px; }
}
/* 칸 전체 = 단추의 늘린 ::before(z 2) — 자리는 collection.js가 --hit-*(단추 상자 기준)로, 머무는 동안만 켠다([data-hit="on"]) */
.product__more::before { content: ""; position: absolute; left: var(--hit-x, 0); top: var(--hit-y, 0); width: var(--hit-w, 0); height: var(--hit-h, 0); z-index: 2; }
.product__more:not([data-hit="on"])::before { pointer-events: none; }
html.cursor-sun .product__more[data-hit="on"], html.cursor-sun .product__more[data-hit="on"]::before { cursor: none; }
/* 칸 어디에 올려도: 밑줄 2px · 화살표 +4px(0.24초). 휴대폰 누름(.is-tap)도 같은 반응 */
.product:has(.product__more[data-hit="on"]:hover) .product__more-t, .product__more:hover .product__more-t, .product__more.is-tap .product__more-t { text-decoration-thickness: 2px; }
.product:has(.product__more[data-hit="on"]:hover) .product__arrow, .product__more:hover .product__arrow, .product__more.is-tap .product__arrow { transform: translateX(4px); }
.product__more:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 4px; }
.product__more:focus-visible::before { outline: none; }
/* 처음 머무를 때 칸마다 한 번: 0 → 6 → 0px(0.7초) */
.product__arrow.is-nudge { animation: prodNudge .7s cubic-bezier(.22, 1, .36, 1) 1; }
@keyframes prodNudge { 0% { transform: translateX(0); } 40% { transform: translateX(6px); } 100% { transform: translateX(0); } }
html.is-reduced .product__arrow, html.is-reduced .product__more-t { transition: none; animation: none; }
/* 안 2(오너가 고르면 html.aff-b 하나로 켬): 네모 테두리 단추 「자세히 보기」 — 기본은 꺼짐 */
html.aff-b .product__more { height: 36px; padding: 0 18px; border: 1px solid currentColor; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; align-items: center; transition: background-color .2s linear, color .2s linear; }
html.aff-b .product__more-t { text-decoration: none; }
html.aff-b .product__arrow { display: none; }
html.aff-b .product:has(.product__more[data-hit="on"]:hover) .product__more, html.aff-b .product__more:hover, html.aff-b .product__more:focus-visible, html.aff-b .product__more.is-tap { background: var(--ink-p); color: var(--inv-p, var(--moonmilk)); }
html.aff-b [data-variant="inverse"] .product--cream .product__more { --inv-p: var(--ink); }
/* 오너(2026-10-03): 마우스가 있는 화면에서는 커서에 「자세히 보기」가 크게 뜨므로 네모 단추를 보이지 않게 한다.
   칸 전체 누르는 층(::before)과 키보드 포커스는 그대로 살린다. 터치 화면(휴대폰·태블릿)은 단추를 그대로 보인다. */
@media (hover: hover) and (pointer: fine) {
  html.aff-b:not(.is-reduced) .product__more:not(:focus-visible),
  html.aff-b:not(.is-reduced) .product:has(.product__more[data-hit="on"]:hover) .product__more:not(:focus-visible) { border-color: transparent; background: none; color: transparent; }
}
/* 숨긴 단추는 자리도 비운다(2026-10-03 영어 스펙 줄 감김): 데스크톱 마우스 화면에서 단추를 줄 밖(절대 위치)으로 빼서 스펙 줄이 칸 폭을 다 쓴다.
   단추 상자 = 스펙 줄 바로 아래 왼쪽(휴대폰과 같은 자리) — 키보드 초점일 때 거기 보인다. 누르는 층(::before)은 collection.js가 단추 상자 기준으로 다시 잰다.
   스펙 줄 높이 자리는 단추가 있던 때와 같게(기준선 맞춤으로 생기던 위 띄움을 padding으로) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  html.aff-b:not(.is-reduced) .product__row { position: relative; padding-top: 6px; }   /* 6px = 단추(36px 상자)와 기준선을 맞추던 때 스펙 줄이 내려가 있던 만큼(실측 5.3–6.3) */
  html.aff-b:not(.is-reduced) .product__more { position: absolute; left: 0; top: calc(100% + 10px); }
}
/* 이름 줄 = 병 라벨 원문 + 용량 한 줄(A8 · C1). 용량 안은 줄 안 바뀜 공백이라 「30 mL」이 갈라지지 않음. 강조 · 확대 0(부제와 같은 글자) */
/* 정보 줄(확대 창 .po__specs가 쓴다): 대시는 여러 줄로 감겨도 첫 줄 가운데 — R1 P-05 */
.spec {
  display: flex;
  align-items: flex-start;
  column-gap: var(--s-4);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}
.spec__line {
  flex: none;
  width: 32px;
  height: 1px;
  margin-top: calc(.5lh - .5px);
  background: currentColor;
  transform-origin: 0 50%;
}
.spec__value { color: var(--fg); }
@media (max-width: 767px) {
  /* FOCUS R2 P2-04(휴대폰): 50/50 폐기 → 세럼 실버 전체 폭 한 화면 → 크림 바잘트 전체 폭 한 화면(세로). 아이리스 창 안에는 세럼 화면만.
     병 = 화면 높이 52%, 좌우 24px, 제품명 ≥ 32px, 부제 15px. 두 화면 사이 바탕 = 바잘트가 명암 경계 호로 덮음(colground mSwap, 스크롤 1:1) */
  html:not(.is-reduced):not(.no-js) .collections .sweep-iris { height: auto; }
  .sweep-iris__stage { position: relative; height: auto; overflow: visible; }
  .sweep-iris__panel { position: relative; inset: auto; padding: 0; }
  .products {
    --bot-h0: clamp(40svh, calc(100svh - 372px), 56svh);
    --bot-h: max(calc(var(--bot-h0) * var(--pk)), min(var(--bot-h0), 272px));   /* 작은 휴대폰 아래 한도(맺음 띠 라벨 ≤ 1.00) */
    --box-w: 100%;
    --info-w: auto;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding-inline: 0;
  }
  /* 방(.product-room) = 한 화면 + 머무름 0.9H: 칸은 화면 맨 위에 붙어(sticky) 0.9H 동안 그대로, 그 뒤 스크롤 1:1로 떠난다 */
  .product-room { display: block; height: 190svh; }
  .product { position: sticky; top: 0; align-items: stretch; min-height: 100svh; padding: calc(var(--hdr-h) + 14px + (var(--bot-h0) - var(--bot-h)) * .5) 24px 0; }
  html:is(.is-reduced, .no-js) .product-room { height: auto; }
  html:is(.is-reduced, .no-js) .product { position: relative; }                     /* 두 화면 사이 = 교체 호가 지나가는 자리(크림 칸은 호 안에서만 보인다) */
  .collections[data-variant="inverse"] .sweep-iris__panel { background: var(--silver); }   /* 창 안 = 세럼 화면만(수직 경계 0) */
  .product__open, .product__rule, .product__info { width: auto; }
  .product__media {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2%, #000 calc(100% - 24px), transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 2%, #000 calc(100% - 24px), transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .product__info { padding: 0; }
  .product__step { font-size: 12px; letter-spacing: .14em; }
  .product__name { font-size: calc(34px * var(--fs-scale)); white-space: normal; width: auto; }   /* 위 · 아래 여백 = 데스크톱과 같은 em(STEP · 부제 바짝) */
  :root:lang(en) .product__name, :root:lang(ja) .product__name { font-size: calc(32px * var(--fs-scale)); }
  .product__texture { font-size: 15px; line-height: 1.5; }
  .product__texture .i18n-row { display: inline; }
  .product__sub { margin-top: 12px; font-size: 14px; }
  /* 휴대폰: 「자세히 보기 →」는 스펙 줄 아래 따로 한 줄 16px, 누르는 높이 ≥ 44px */
  .product__row { display: block; margin-top: 22px; }   /* 바닥 정보(스펙 줄 + 「자세히 보기」): 부제와 잉크 ≈ 31px ≈ 0.9N */
  .product__row .product__sub { margin-top: 0; }
  .product__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .product__more-t { text-decoration-thickness: 1.5px; }
  html.aff-b .product__more { height: 44px; min-width: 148px; justify-content: center; margin-top: 4px; }
  html:is(.is-reduced, .no-js) .collections[data-variant="inverse"] .product--serum { background: var(--silver); }
  html:is(.is-reduced, .no-js) .collections[data-variant="inverse"] .product--cream { background: var(--basalt); margin-top: 0; }
  html:is(.is-reduced, .no-js) .collections[data-variant="inverse"] .sweep-iris__panel { background: transparent; }
}

/* ---------------------------------------------------------------------
   [D2] 성분 띠 — 달빛 세럼의 두 성분. 바탕 = 실버 한 색(두 병 패널이 스크롤 1:1로 위로 지나간 자리).
   FOCUS R1 P-01 ⓓ · AD-P10 ⑷: 단어는 사이트 큰 제목과 같은 디스플레이 굵기 · 자간 −0.02em · 먹색 #111(실버 위 대비 ≈ 13:1, 블렌드 0).
   데스크톱 clamp(72px, 8.5vw, 150px) 한 줄 「레티날 · (검은 캡 달 0.6em) · 흑삼」, 휴대폰 15vw 두 줄(가운데 검은 캡 달).
   이름표는 단어 바로 위 16px, 라틴 이름(12px 대문자 · 자간 0.14em · #45474A)은 단어 아래 작은 줄, 「밤에만 사용합니다.」(18px 먹색)는 단어 아래 32px.
   위 여백 = 두 병 패널 밑변 바로 아래(빈 실버 ≤ 150px)
   --------------------------------------------------------------------- */
.col-ing {
  --fg: var(--ink);
  --fg-2: var(--ink);
  --focus: var(--ink);
  --ing-ink: #111;
  /* FOCUS R2 P2-06(AD 결정): 성분 단어 clamp(56px, 6.5vw, 108px) 700 — 병이 주인공, 성분은 이름표(약국 광고 인상 0).
     가운데 검은 달 = 단어 캡 높이 1.2배 · 같은 기준선(달 아래 끝 = 글자 기준선). 캡 높이(실측, em): 한글 .80 · 라틴 .71 · 일본어 .82 */
  --ing-fs: calc(clamp(56px, 6.5vw, 108px) * var(--fs-scale));
  --ing-cap: .80;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px var(--margin) 9svh;
  color: var(--ing-ink);
  text-align: center;
}
html:not(.is-reduced):not(.no-js) .collections .col-body .sweep--body .col-ing { margin-top: 0; }
:root:lang(ja) .col-ing { --ing-cap: .82; }
:root:lang(en) .col-ing { --ing-cap: .71; }
/* 잔손질(유나): EN 「Black Ginseng」이 넘침 → EN만 작게. 성분 띠 정렬(2026-10-03): 달이 화면 가운데로 고정되니 오른쪽으로 길게 뻗어 4.4vw(최소 36px) */
:root:lang(en) .col-ing { --ing-fs: calc(clamp(36px, 4.4vw, 96px) * var(--fs-scale)); }
.col-ing:focus { outline: none; }
/* FOCUS R2 P2-03: 성분 묶음(이름표 · 단어 · 라틴 · 「밤에만 사용합니다.」) = 헤더 가드 한 덩어리. 띠(.col-ing)는 명암 경계 호 마스크(--arc-m)를 받는다 */
.col-ing__group { display: flex; flex-direction: column; align-items: center; }
/* FOCUS R3 F14: 성분은 월식의 밤 속(motion #ingredients.is-night 층). 호 마스크 0. 동작 줄이기 · no-js = 제자리 + 바잘트 바탕 → 밝은 글 */
html:is(.is-reduced, .no-js) .collections .col-ing { --ing-ink: var(--moonmilk); --fg: var(--moonmilk); --focus: var(--moonmilk); }
/* 글씨 단계(밤과 같은 비율): 제목 .68 · 영어 이름표 .54 · 「밤에만」 흰색 */
html:is(.is-reduced, .no-js) .collections .col-ing .col-ing__label { color: rgba(237, 239, 242, .68); }
html:is(.is-reduced, .no-js) .collections .col-ing .ing__label { color: rgba(237, 239, 242, .32); }
/* 성분 띠 정렬 · 서체(CONSULT_성분띠_정렬서체 2 · 3 · 4절 추천, 2026-10-03):
   축 하나 = 달 중심 = 화면 가운데(s09 layout). 단어 줄 = 세 칸 격자 1fr auto 1fr → 제목 · 「밤에만」이 저절로 같은 축.
   제목 「달빛 세럼에 담은 두 가지」 = 사장님 「좀 얇게」 → 300(결정 문서 400보다 가늘게), 밝기 .62 → .68(대비 ≥ 7 : 1). 한 · 영 · 일 같은 굵기 */
.col-ing__label {
  margin: 0 0 calc(var(--ing-fs) * .40);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: calc(clamp(15px, 1.02vw, 18px) * var(--fs-scale));
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ing-ink);
}
/* 영어 제목: 대문자라 한국어보다 커 보여 15px · 자간 .12em. Archivo는 400부터만 받아 두어 300이 안 나온다 → 이미 받은 Pretendard(가변 45~920)로 */
:root:lang(en) .col-ing__label { font-family: var(--ff-pretendard); font-size: calc(15px * var(--fs-scale)); letter-spacing: .12em; }
:root:lang(ja) .col-ing__label { letter-spacing: .04em; }
.ing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  column-gap: calc(var(--ing-fs) * .36);
}
@media (min-width: 768px) {
  .ing { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; justify-content: center; }
  .ing__item--a { justify-self: end; }
  .ing__item--b { justify-self: start; }
}
.ing__item { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ing__word {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--ing-fs);
  font-weight: var(--fw-title, 600);        /* F22 장 제목 층 */
  font-stretch: var(--fstretch-display);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--ing-ink);
}
:root:lang(ja) .ing__word { letter-spacing: -.01em; }
:root:lang(en) .ing__word { font-stretch: 112%; letter-spacing: -.02em; }
/* 잔손질(유나): 글자 조각(.s9-g, inline-block)에 든 띄어쓰기가 0폭으로 접혀 「BlackGinseng」이 되던 것 → 공백 유지 */
.ing__word .s9-g { white-space: pre; }
/* 라틴 이름(받침 층): 데스크톱 14px · 휴대폰 12px, 300, 자간 0.22em(휴대폰 .2em) — 끝 글자 뒤 자간만큼 오른쪽 여백을 당겨 단어 아래 가운데 */
.ing__label {
  margin: 14px -.22em 0 0;
  font-family: var(--ff-pretendard);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #45474A;
}
:root:lang(en) .ing__label { display: none; }   /* EN: 라틴 이름 = 단어와 같은 말 */
/* 가운데 검은 달 = 캡 높이 × 1.2(밤 상태는 s09 layout()의 D0와 같은 식). 데스크톱: 달 세로 가운데 = 글자 상자 세로 가운데 */
.ing__moon {
  --ing-md: calc(var(--ing-fs) * var(--ing-cap) * 1.2);
  flex: none;
  align-self: baseline;
  width: var(--ing-md);
  height: var(--ing-md);
  margin: 0;
}
#ingredients.is-night .ing__moon { --ing-md: clamp(64px, 7.2vw, 120px); }
@media (min-width: 768px) {
  .ing__moon { align-self: start; margin: calc(var(--ing-fs) * .5 - var(--ing-md) / 2) 0 0; }
}
/* 「밤에만 사용합니다.」(사용 안내 층) = 흰 500 + 앞에 작은 주황 반달(추천안 — 상세 창 .po__ing--dot과 같은 문법).
   반달은 글 왼쪽 바깥에 걸어(right: 100%) 글 가운데가 달 축에 그대로 선다 */
.ing__usage { position: relative; margin: 48px 0 0; font-size: clamp(17px, 1.13vw, 20px); line-height: 1.45; letter-spacing: -.005em; font-weight: 500; color: var(--ing-ink); }
.ing__usage::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  translate: 0 -50%;
  margin-right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 50%, var(--sun) 50%);   /* 반달(D) 면 — 주황은 면 · 점에만 */
  box-shadow: inset 0 0 0 1px rgba(237, 239, 242, .30);                   /* 흐린 둘레 — 휴대폰에서 점이 아니라 '달'로 읽히게 */
}
@media (max-width: 767px) {
  .col-ing { padding: 32px var(--margin) 6svh; }
  .col-ing__label { font-size: calc(15px * var(--fs-scale)); margin-bottom: 20px; }
  .ing { flex-direction: column; align-items: center; row-gap: calc(var(--ing-fs) * .14); }
  .ing__moon { align-self: center; margin: 0; }
  .ing__label { margin: 8px -.2em 0 0; font-size: 12px; letter-spacing: .2em; }
  .ing__usage { margin-top: 30px; font-size: 17px; }
  .ing__usage::before { width: 12px; height: 12px; margin-right: 10px; }
}
/* ---------------------------------------------------------------------
   ★ F13 크림 제형 띠(#cream-texture) — CONSULT_크림영상 「전체 화면 결정」 B-3 + 「심사 뒤 최종 다듬기」(우선).
   F13 전체 화면 · 크림 제형 = 성분 띠 다음, 효능어 0, FIRMING·성분어·제품 사진과 동시 노출 0, 색 보정 0(filter · blend · 그림자 · 글로우 0).
   상자 = 스크롤 길이(데스크톱 360vh = 무대 100vh + 핀 260vh · 휴대폰 calc(100lvh + 200svh)), 무대 = sticky 100vh(휴대폰 100lvh).
   구동(motion s09-tex.js)이 띠에 --tex-r/x/y(px · 렌더 r) · --tex-op · --tex-scale · --tex-ox/oy · --tex-note-y · --tex-note-clip을 쓰고
   퇴장 B에서 무대를 스크롤만큼 되밀어(translate) 화면에 고정한다. 인라인 값(마스크 · clip · translate)이 이기고, 아래는 같은 식의 기본값.
   바탕 색 면은 띠가 아니라 고정 바탕 무대(.col-ground — 'tex' 상태: 명암 경계 호로 덮는 바잘트 → 숨은 교체 뒤 실버)가 맡는다
   --------------------------------------------------------------------- */
.col-tex {
  --tex-ink: #161A24;                      /* 크림 위 글자 = 바잘트 한 색(받침 · 그림자 0) */
  --tex-light: var(--moonmilk);            /* 바잘트 위(원 밖) 밝은 판 — 10-16 컬러톤 바꿈-01(옛 #F2F2EE) */
  --tex-copy-top: calc(var(--hdr-h) + var(--below-hdr) + var(--fs-tag) + 20px);   /* 26-10-03: 「● 01 만월」 표지 바로 아래 20px 한 줄 리듬(예전 머리글 + 56px) */
  --tex-lx: calc(var(--tex-x, -9999px) - var(--margin));                         /* 원 중심 − 글 묶음 왼쪽 위(두 벌 자르기 기본식) */
  --tex-ly: calc(var(--tex-y, -9999px) - var(--tex-copy-top));
  position: relative;
  height: 360vh;
  margin: 0;
  color: var(--tex-ink);
}
.col-tex__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
}
.col-tex__tail { --tex-tail-more: 10vh; height: calc(50vh + var(--tex-tail-more) + var(--tex-tail-x, 0px)); }   /* 최종 다듬기: 데스크톱 꼬리 50vh(배경 투명 — 실버는 바탕 무대) · 26-10-03 크림 → 달빛향 여백 +10vh(fitTail은 이 몫을 빼고 재므로 어느 화면이든 그대로 더해짐) */
.col-tex__media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--tex-r, 0px) at var(--tex-x, 50%) var(--tex-y, 44%), #000 calc(var(--tex-r, 0px) - 1.5px), transparent var(--tex-r, 0px));
          mask-image: radial-gradient(circle var(--tex-r, 0px) at var(--tex-x, 50%) var(--tex-y, 44%), #000 calc(var(--tex-r, 0px) - 1.5px), transparent var(--tex-r, 0px));
}
.col-tex__media.is-full { -webkit-mask-image: none; mask-image: none; }
.col-tex__video,
.col-tex__still img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--tex-op, 73% 0%);
  transform: scale(var(--tex-scale, 1));
  transform-origin: var(--tex-ox, 50%) var(--tex-oy, 44%);
  background: transparent;
}
.col-tex__still { display: none; }        /* 동작 줄이기 정지판에서만(지연 로드 — 그 밖에서는 바이트 0) */
/* 글: 왼쪽 위 한 묶음(데스크톱 left = 여백, top = 헤더 + 56px). 이름표 13px 600 → 22px → 한 줄 Pretendard 300 → 16px → 고지 12px .8 */
.col-tex__copy {
  position: absolute;
  left: var(--margin);
  top: var(--tex-copy-top);
  z-index: 2;
}
.col-tex__labelbox { position: relative; }
.col-tex__label {
  margin: 0;
  font-family: var(--ff-pretendard);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--tex-light);
  -webkit-mask-image: radial-gradient(circle var(--tex-r, 0px) at var(--tex-lx) var(--tex-ly), transparent var(--tex-r, 0px), #000 calc(var(--tex-r, 0px) + .5px));
          mask-image: radial-gradient(circle var(--tex-r, 0px) at var(--tex-lx) var(--tex-ly), transparent var(--tex-r, 0px), #000 calc(var(--tex-r, 0px) + .5px));
}
.col-tex__label--ink {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tex-ink);
  -webkit-mask-image: none;
          mask-image: none;
  clip-path: circle(var(--tex-r, 0px) at var(--tex-lx) var(--tex-ly));
}
:root:lang(ja) .col-tex__label { font-family: var(--ff-pretendard-jp); }
.col-tex__line {
  margin: 22px 0 0;
  font-family: var(--ff-pretendard);
  font-weight: 500;   /* 10-16 사장님 「희고, 윤이 흐르는 제형 — 두께 2단계 올려」 300 → 500 */
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--tex-ink);
}
:root:lang(ja) .col-tex__line { font-family: var(--ff-pretendard-jp); letter-spacing: 0; }
.col-tex__line-m { display: none; }
/* 고지: 크림이 보이는 내내 같은 자리(한 줄 아래 16px). 퇴장 B에서 호를 따라 오르다 「01 만월」 아래 가로선(데스크톱 y 112 · 휴대폰 y 46)에서
   위쪽부터 잘리며 그 밑으로 미끄러진다 — 자르는 틀(.col-tex__noteclip)의 위 끝 = 그 가로선. --tex-note-y(≤ 0) = 고지 이동 */
.col-tex__noteclip {
  --tex-clip-y: calc(var(--hdr-h) + var(--below-hdr) + var(--fs-tag) + 10px);   /* 「01 만월」 아래 가로선(표지 아래 끝 + 10px — 고지가 표지에 닿는 프레임 0, 예전 112px) */
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tex-clip-y);
  bottom: 0;
  overflow: hidden;
  z-index: 2;
}
.col-tex__notebox {
  /* 10-15 밤 사장님 「AI로 생성한 연출 영상입니다 — 하단에 배치」: 제목 아래 → 화면 아래 왼쪽(여백 선 · 아래 40px). 옛 값 = calc(var(--tex-copy-top) + 13px * 1.3 + 22px + clamp(30px, 2.6vw, 44px) * 1.2 + 16px) */
  --tex-note-top: calc(100lvh - 40px - 12px * 1.4);
  position: absolute;
  left: var(--margin);
  top: calc(var(--tex-note-top) - var(--tex-clip-y));
  opacity: 1;   /* 전원 점검 A7: .8 → 1 */
  translate: 0 var(--tex-note-y, 0px);
}
.col-tex__note {
  margin: 0;
  font-family: var(--ff-pretendard);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--tex-light);
  -webkit-mask-image: radial-gradient(circle var(--tex-r, 0px) at calc(var(--tex-x, -9999px) - var(--margin)) calc(var(--tex-y, -9999px) - var(--tex-note-top) - var(--tex-note-y, 0px)), transparent var(--tex-r, 0px), #000 calc(var(--tex-r, 0px) + .5px));
          mask-image: radial-gradient(circle var(--tex-r, 0px) at calc(var(--tex-x, -9999px) - var(--margin)) calc(var(--tex-y, -9999px) - var(--tex-note-top) - var(--tex-note-y, 0px)), transparent var(--tex-r, 0px), #000 calc(var(--tex-r, 0px) + .5px));
}
.col-tex__note--ink {
  text-shadow: 0 0 6px rgba(237, 239, 242, .55);   /* 10-15: 화면 아래 영상 그늘 위에서도 먹 글자가 읽히게 옅은 흰 번짐 */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tex-ink);
  -webkit-mask-image: none;
          mask-image: none;
  clip-path: circle(var(--tex-r, 0px) at calc(var(--tex-x, -9999px) - var(--margin)) calc(var(--tex-y, -9999px) - var(--tex-note-top) - var(--tex-note-y, 0px)));
}
:root:lang(ja) .col-tex__note { font-family: var(--ff-pretendard-jp); }
@media (max-width: 767px) {
  .col-tex { height: calc(100lvh + 200svh); --tex-copy-top: calc(var(--hdr-h) + 28px); }
  .col-tex__stage { height: 100lvh; }
  .col-tex__tail { --tex-tail-more: 6svh; height: calc(15svh + var(--tex-tail-more) + var(--tex-tail-x, 0px)); }   /* 이음매: s09-tex.js fitTail — 가로가 긴 화면만 늘림 · 26-10-03 여백 +6svh */
  .col-tex__label { font-size: 12px; }
  .col-tex__line { margin-top: 14px; font-size: 24px; white-space: normal; }
  .col-tex__line-d { display: none; }
  .col-tex__line-m { display: block; }
  .col-tex__noteclip { --tex-clip-y: 46px; }
  /* 26-10-08(서하 + 아트디렉터): 휴대폰 고지 = 두 줄 글 바로 아래(한 묶음) — 예전 아래 왼쪽(100lvh − 72px)은 영상 그늘 위라 대비 3.0~3.6:1.
     이름표 12px·줄높이 1.3 → 14px → 두 줄 24px·1.2 → 12px → 고지. 위치식은 같은 --tex-note-top(먹 판 자르기 원과 같은 좌표) */
  .col-tex__notebox { --tex-note-top: calc(100svh - 28px - 12px * 1.4); max-width: 200px; }   /* 10-15 밤: 휴대폰도 화면 아래(아래 28px). 옛 = 두 줄 글 바로 아래 · 10-16 점검: 100lvh → 100svh(주소창 · 도구 막대가 보여도 보이는 화면 안 — 먹 판 자르기 원도 같은 변수라 함께 맞음) */
  .col-tex__note { font-size: 12px; white-space: normal; max-width: 200px; }      /* 최종 다듬기: 휴대폰 고지 12px(규제 권고) */
}
/* FOCUS R3 P3-08(F21): 고지는 크림 블록 안 — 크림 창(반지름 > 0)이 화면에 있을 때만(colground .is-cream-on). 성분 · 달빛향과 한 화면 0 */
html:not(.is-reduced):not(.no-js) .col-tex:not(.is-cream-on) .col-tex__noteclip { visibility: hidden; }
/* 동작 줄이기(B-3 · C-3 정지판): 핀 0 · 띠 100svh · 꼬리 0. 미디어 = 바탕 무대 자리의 정지 사진(끝 프레임 241)을 화면 고정 층으로 깔고
   띠가 화면 가운데를 덮는 동안만 0.3초 교차(직선 경계 0). 글은 같은 자리 · 같은 색, 0.4초, 이름표 먹 판만 */
html.is-reduced .col-tex { height: 100svh; }
html.is-reduced .col-tex__tail { height: 0; }
html.is-reduced .col-tex__stage { position: relative; height: 100svh; overflow: visible; contain: none; }
html.is-reduced .col-tex__media {
  position: fixed;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: none;
          mask-image: none;
  opacity: 0;
  transition: opacity .3s linear;
}
html.is-reduced .col-tex.is-tex .col-tex__media { opacity: 1; }
html.is-reduced .col-tex__video { display: none; }
html.is-reduced .col-tex__still { display: block; }
html.is-reduced .col-tex__still img { transform: none; }
html.is-reduced .col-tex :is(.col-tex__copy, .col-tex__noteclip) { position: fixed; opacity: 0; transition: opacity .4s linear; }   /* 같은 자리(화면 고정) · 크림이 보이는 동안만 */
html.is-reduced .col-tex .col-tex__noteclip { left: 0; right: 0; }
html.is-reduced .col-tex.is-tex :is(.col-tex__copy, .col-tex__noteclip) { opacity: 1; }
html.is-reduced .col-tex__label:not(.col-tex__label--ink) { visibility: hidden; }
html.is-reduced .col-tex :is(.col-tex__label--ink, .col-tex__note--ink) { clip-path: none; }
html.is-reduced .col-tex .col-tex__note:not(.col-tex__note--ink) { visibility: hidden; }
html.is-reduced .col-tex__notebox { translate: none; }
html.is-reduced .col-tex__line { clip-path: none !important; opacity: 1 !important; translate: none !important; }
/* no-js: 정지 사진 한 장(100svh, 띠 자체 배경) */
.no-js .col-tex { height: auto; }
.no-js .col-tex__stage { position: relative; height: 100svh; }
.no-js .col-tex__media { -webkit-mask-image: none; mask-image: none; }
.no-js .col-tex__video { display: none; }
.no-js .col-tex__still { display: block; }
.no-js .col-tex :is(.col-tex__label:not(.col-tex__label--ink), .col-tex__note:not(.col-tex__note--ink)) { visibility: hidden; }
.no-js .col-tex :is(.col-tex__label--ink, .col-tex__note--ink) { clip-path: none; }

/* ---------------------------------------------------------------------
   [D3] 달빛향 띠 — 세럼과 크림이 나누는 향. 바탕 = 실버 한 바탕. 제목 「달빛향」은 실버 위 먹색(대비 약 13:1), 블렌드 0.
   FOCUS R1 P-01 ⓕ: 제목 양옆 같은 기준선의 검은 달 · 흰 달 = 제목 캡 높이(한글 글자 몸 ≈ 0.76em)의 0.9배 ≈ 0.68em.
   스크롤 변수 --scent-near(0..1, motion — 없으면 colground.js --scent-near-pub)로 서로 4%(각 2vw) 다가간다(월식 예고).
   글은 바래지 않는다 — 흰 달 자리에서 열리는 밤 창(맺음 무대)이 덮는다
   --------------------------------------------------------------------- */
/* FOCUS R3 F23 · P3-05: 달빛향 띠 = 바잘트 바탕(크림 큰 달이 위로 떠난 자리) — 글 #EDEFF2(14:1), 이름표 · 무드 #A9ADB5(불투명, 7.6:1),
   제목 500(F22 이름 층). 양옆 검은 달(왼쪽 가장자리 지구빛 테 1.5px) · 흰 달 = 제목 캡 높이 0.9배, 제목과 간격 ≥ 0.4em(다가간 뒤에도) */
/* 26-10-03 부피감 정리(서하+AD 안 D): 제목 약 65% · 굵기 400 · 두 달 .68em(지름 약 62%) · 묶음 = 띠 가운데(위아래 11vh) · 띠 높이 불변 */
.col-scent {
  --sc-fs: calc(clamp(52px, 7.2vw, 132px) * var(--fs-scale));
  --sc-ink: var(--moonmilk);
  --sc-near: var(--scent-near, var(--scent-near-pub, 0));
  --sc-cap: max(30px, calc(var(--sc-fs) * .68));
  --sc-gap: .5;        /* 다가간 뒤 제목과 달 사이 = 0.5em */
  --sc-step: 1.4vw;    /* 다가감 거리(각각) */
  position: relative;
  min-height: 64svh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "label label label"
    "capb  word  capw"
    "text  text  text";
  align-content: center;
  justify-items: center;
  padding: 11vh var(--margin) 11vh;
  color: var(--moonmilk);
  text-align: center;
}
.scent__half { display: contents; }
.scent__label { grid-area: label; margin: 0 0 clamp(20px, 2.8vh, 28px); color: #A9ADB5; letter-spacing: .16em; }   /* 정적 반투명 0 — 불투명(바잘트 위 7.6:1) */
.scent__word {
  grid-area: word;
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--sc-fs);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: var(--sc-ink);
}
[data-variant="inverse"] .scent__word { color: var(--sc-ink); mix-blend-mode: normal; }
:root:lang(ja) .col-scent { --sc-fs: calc(clamp(44px, 5.6vw, 104px) * var(--fs-scale)); }
:root:lang(ja) .scent__word { letter-spacing: -.01em; }
/* EN 「Moonlight scent」 = 한 줄 — 라틴은 글 폭이 길어 달 비율만 .78 */
:root:lang(en) .col-scent { --sc-fs: calc(clamp(36px, 4.2vw, 78px) * var(--fs-scale)); --sc-cap: max(30px, calc(var(--sc-fs) * .78)); }
:root:lang(en) .scent__word { font-stretch: 112%; letter-spacing: -.02em; white-space: nowrap; }
/* 두 달 = 제목 줄 상자 가운데 = 글자 몸 가운데 높이 */
.scent__cap {
  position: relative;
  align-self: center;
  width: var(--sc-cap);
  height: var(--sc-cap);
  margin-top: 0;
}
/* 다가감 = 양쪽 대칭. !important = s09 등장 scale(GSAP)이 흰 달에 남기는 인라인 translate: none 을 이김(GSAP은 transform을 쓰므로 충돌 0) */
.scent__half--a .scent__cap { grid-area: capb; justify-self: end; margin-right: calc(var(--sc-fs) * var(--sc-gap) + var(--sc-step)); translate: calc(var(--sc-near) * var(--sc-step)) 0 !important; }
.scent__half--b .scent__cap { grid-area: capw; justify-self: start; margin-left: calc(var(--sc-fs) * var(--sc-gap) + var(--sc-step)); translate: calc(var(--sc-near) * var(--sc-step) * -1) 0 !important; }
/* 바잘트 위 검은 달: 왼쪽 가장자리 지구빛 테(1.5px · 달빛 55% — ●와 같은 문법, 번짐 0) */
.col-scent .scent__half--a .scent__cap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 1.5px 0 0 rgba(237, 239, 242, .55); pointer-events: none; }
.scent__text { grid-area: text; margin-top: clamp(28px, 3.8vh, 36px); max-width: 32em; }
.scent__body { margin: 0; color: var(--sc-ink); }
.scent__mood { margin: 10px 0 0; color: #A9ADB5; }                       /* 정적 반투명 0(달빛 72% 상당 불투명) */
[data-variant="inverse"] :is(.scent__body) { color: var(--sc-ink); }
/* 원칙 ①: 지난 회차 글 색 알파 퇴장(motion.css --sxa)을 무력화 */
html .collections .col-body .sweep--body .col-scent :is(.scent__word, .scent__body) { color: var(--moonmilk); }
html .collections .col-body .sweep--body .col-scent :is(.scent__label, .scent__mood) { color: #A9ADB5; }
html.is-reduced .scent__cap { translate: none !important; }
@media (max-width: 767px) {
  /* 휴대폰: 두 달이 제목 양옆 같은 기준선(motion.css F-02 배치와 같은 결) — 크기만 0.9 캡 높이로 */
  .col-scent {
    --sc-fs: calc(11vw * var(--fs-scale));
    --sc-step: 1.2vw;
    min-height: 60svh;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "label label label"
      "capb  word  capw"
      "text  text  text";
    padding: 9svh var(--margin) 9svh;
  }
  :root:lang(ja) .col-scent { --sc-fs: calc(7.8vw * var(--fs-scale)); }
  :root:lang(en) .col-scent { --sc-fs: calc(7.4vw * var(--fs-scale)); }
  /* 26-10-03 부피감 정리: motion.css(.collections .col-body .col-scent 16vw · 언어 11vw)를 이기는 선택자로 같은 값 */
  html:root .collections .col-body .col-scent { --sc-fs: calc(11vw * var(--fs-scale)); --sc-step: 1.2vw; padding: 9svh var(--margin) 9svh; }
  html:root:lang(ja) .collections .col-body .col-scent { --sc-fs: calc(7.8vw * var(--fs-scale)); }
  html:root:lang(en) .collections .col-body .col-scent { --sc-fs: calc(7.4vw * var(--fs-scale)); }
  /* 휴대폰 EN: 「Moonlight scent」 균형 두 줄 */
  :root:lang(en) .collections .col-body .col-scent .scent__word { white-space: normal; text-wrap: balance; max-width: 5.4em; text-align: center; line-height: .96; }
  html:not(.is-reduced):not(.no-js) .collections .col-body .sweep--body .col-scent .scent__cap { width: var(--sc-cap); height: var(--sc-cap); margin-top: 0 !important; margin-bottom: 0 !important; align-self: center; }   /* 좌우 여백은 아래 두 줄(이 줄이 더 강하므로 margin 축약 금지) */
  html .collections .col-body .sweep--body .col-scent .scent__half--a .scent__cap { justify-self: end !important; margin-right: calc(var(--sc-fs) * var(--sc-gap) + var(--sc-step)) !important; }
  html .collections .col-body .sweep--body .col-scent .scent__half--b .scent__cap { justify-self: start !important; margin-left: calc(var(--sc-fs) * var(--sc-gap) + var(--sc-step)) !important; }
  .scent__text { margin-top: 22px; }
  .scent__body { font-size: 16px; line-height: 1.5; }
  .scent__mood { font-size: 14px; }
}
/* 26-10-03 달빛향 더 오래 머물기(사장님 「나오는 게 너무 짧다」 — 준 · 유나, 박자 = 모션 디렉터, 자리 = 서하 · AD):
   달리기 칸(.col-scent-run) 끝에 머묾 거리(--scent-hold)를 덧대고, 띠는 다 드러난 채 화면 가운데에 붙어 머문다(sticky — 띠 높이 64svh · 휴대폰 60svh의 가운데).
   띠가 풀리는 순간부터는 예전과 같은 자리 관계라 연기 퇴장 · 맺음 띠 이음 · 크림 원 간격은 그대로. 동작 줄이기 · no-js = 예전처럼 흘러감(머묾 0) */
.col-scent-run { --scent-hold: 96vh; position: relative; }   /* A1: 앞 40vh 또렷한 머묾 + 뒤 56vh 연기 칸(s09-collections.js scentSmoke Z = 0.56H) */
.col-scent-run::after { content: ""; display: block; height: var(--scent-hold); pointer-events: none; }
html:not(.is-reduced):not(.no-js) .collections .col-scent-run > .col-scent { position: sticky; top: 18svh; }
@media (max-width: 767px) {
  .col-scent-run { --scent-hold: 140svh; }   /* A1: 88svh 또렷 + 52svh 연기 칸(Z = 0.52H 그대로) — 26-10-03 휴대폰 스크롤 박자: 센 손가락 한 번(화면 2배)에 또렷한 머묾을 통째로 지나쳐 또렷 몫만 44 → 88svh(예전 96svh) */
  html:not(.is-reduced):not(.no-js) .collections .col-scent-run > .col-scent { top: 20svh; }
}
html.is-reduced .col-scent-run::after, .no-js .col-scent-run::after { height: 0; }

/* [E] 만월 맺음 띠 = 세트 순간(FINAL F-03 → FOCUS R1 P-01 ⓑ ⓒ ⓖ · AD-P10).
   .col-close = 화면 하나 + 핀 길이(--cc-pin), 무대(.col-close__stage, sticky 100svh) = 밤 창: 자기 바탕(사진 바탕 #07090A — 경계 0)을 가진 그림이
   달빛향의 흰 달 자리에서 clip-path 원으로 열린다(colground.js가 --cg-night-x/y/r · .is-win-fixed · .is-win-open). 창 안에는 처음부터
   세트 사진 → 크림 캡 위 작은 만월 → 이름표 → 큰 제목이 있다(블러인 · 바램 0). 단추 묶음(세트 줄 · 본문 · 단추)은 collection.js .is-cta(창이 다 열린 뒤)에
   0.25초로 한 번에, .is-out(핀 끝 전)에 0.2초로 먼저 퇴장. 나머지는 핀이 끝나면 스크롤 1:1로 위로 지나간다.
   세트 사진 크기 기준 = 병 묶음(크림 캡 꼭대기 → 병 바닥, 바닥 반사 제외): 데스크톱 화면 높이 50% · 높이 ≤ 880 46% · ≤ 760 44% · 휴대폰 40%.
   set_night(16:10)의 병 묶음 = 사진 높이의 67.4%(위 15.8% → 83.2%), set_night_m(900:1100) = 62%(17.3% → 79.3%) → 사진 상자 높이 = 목표 ÷ 비율.
   2026-10-03 맺음 띠 여백 · 반사(서하 · 아트디렉터 A안 = 병은 바닥에 서 있다): 반사는 병 바닥에 딱 붙어(틈 0) 묶음 높이 9% 안에서 사라진다
   (사진에 구움 — tools/assets/make_set_reflect.py). 세로 리듬: 병 바닥 → 반사 끝(묶음 9%) → 여백 40(높이 ≤ 880 32 · 휴대폰 28) → 제목
   clamp(28px, 3vw, 52px) 500 → 20 → 세트 줄 16 600 → 32(높이 ≤ 880 · 휴대폰 28) → 단추 17 700 → 14(휴대폰 12) → 안내 줄 14 400.
   묶음 전체(사진 + 반사 + 글 + 단추)는 헤더 아래 공간의 가운데 */
.col-close {
  --fg: var(--moonmilk);
  --fg-2: var(--dust);
  --focus: var(--sun);
  --cc-pin: 760px;                           /* 핀 길이. 2026-10-03: 묶음을 가운데로 내리며 단추가 화면에 다 들어오는 때가 늦어져 660 → 760(단추 온전히 보임 ≈ 620px, 1440×900 실측) */
  --cc-night: #0B0C0D;                       /* set_night 사진 바탕(26-10-03 다시 구움 · 실측 11, 12, 13) = 무대 바탕 → 사진 가장자리 0 */
  --cc-cl: 45svh;                            /* 10-16 사장님 「제품 맨 아래 이미지 조금 줄여」 50 → 45%(약 10%) · 병 묶음 = 화면 높이 50%(1440×900 ≈ 450px) — 2026-10-03 오너: 병을 조금 작게(56% → 50%) */
  --cc-rf: .09;                              /* 반사 길이 = 병 묶음 높이의 9%(사진에 구운 값과 같음) */
  --cc-gap: 40px;                            /* 반사 끝 → 제목 윗변 */
  --cc-fr: .674;                             /* 사진 높이 중 병 묶음 비율 */
  --cc-top: .158;                            /* 사진 위 끝 → 크림 캡 꼭대기 */
  --cc-bot: .832;                            /* 사진 위 끝 → 병 바닥 */
  --cc-capx: 56.5%;                          /* 크림 캡 가운데 x(사진 폭 비) */
  --cc-ar: 1.6;                              /* 사진 가로세로비 */
  --cc-k: 1;                                 /* collection.js: 세트 라벨이 단품 라벨보다 크면 < 1 */
  --cc-vh: calc(var(--cc-cl) * var(--cc-k) / var(--cc-fr));
  position: relative;
  height: calc(100svh + var(--cc-pin));
  color: var(--moonmilk);
}
.col-close__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 2026-10-03: 묶음(사진 + 반사 + 글 + 단추)을 헤더 아래 공간의 가운데에(넘치면 위부터) */
  padding: calc(var(--hdr-h) + 12px) var(--margin) 24px;
  justify-content: safe center;
  overflow: clip;
  background: transparent;                /* FOCUS R3 F23: 밤 창 삭제 — 무대는 처음부터 보이고, 밤은 바탕 무대(.col-ground)가 같은 자리에서 짙어진다 */
  clip-path: none;
}
.col-close__visual {
  position: relative;
  flex: none;
  height: var(--cc-vh);
  width: calc(var(--cc-vh) * var(--cc-ar));
  max-width: none;
  /* 사진 위아래 빈 바탕은 흐름에서 빼고(병 묶음만 자리 차지) 병 바닥 → 제목 = 반사 길이(묶음 9%) + 여백(--cc-gap) — 제목은 반사에 겹치지 않는다 */
  margin: calc(var(--cc-vh) * var(--cc-top) * -1) 0 calc(var(--cc-cl) * var(--cc-k) * var(--cc-rf) + var(--cc-gap) - var(--cc-vh) * (1 - var(--cc-bot)));
}
.col-close__still { position: absolute; inset: 0; display: block; }
.col-close__still img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  scale: var(--cc-push, 1);
  transform-origin: 50% 83%;
  /* AD-P10 ⑶: 바탕 값은 같지만(7, 9, 10) 사진 속 미세한 압축 결이 대비 8배에서 사각 경계로 읽혔다 → 바깥 10%를 페더(병은 가로 25~74% 안) */
  /* FOCUS R3: 무대 바탕 = 바탕 무대의 밤(#0B0C0D, 사진 바탕보다 4단계 밝음) → 좌우 페더 20%(병은 가로 25~74% 안)로 사각 경계 0 */
  /* 전원 점검 A4: 셋째 층 = 둥근 페더(네 모서리의 사각 경계 0 — 병 몸통은 가로 25~74% · 세로 15.8~83.2% 안이라 안 깎임) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent), radial-gradient(ellipse 56% 64% at 50% 52%, #000 66%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent), radial-gradient(ellipse 56% 64% at 50% 52%, #000 66%, transparent 100%);
          mask-composite: intersect;
}
.col-close__visual.is-nostill .col-close__still { display: none; }
/* 크림 캡 위 작은 만월: 지름 = 병 묶음의 10%, 크림 캡 꼭대기와 간격 = 지름 0.6배. 메인 달과 같은 노출(스프라이트 평균 145 → 약 180) */
.col-close__mark {
  --mk: calc(var(--cc-cl) * var(--cc-k) * .10);
  position: absolute;
  left: var(--cc-capx);
  top: calc(var(--cc-top) * 100% - var(--mk) * 1.1);
  width: var(--mk);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: block;
  box-shadow: none;
}
.col-close__moon { position: absolute; inset: 0; }
.col-close__moon--white { filter: brightness(1.24) contrast(1.04); }
.col-close__visual.is-nostill { height: auto; width: auto; aspect-ratio: auto; margin: 0 0 40px; }
.col-close__visual.is-nostill .col-close__mark { position: relative; left: auto; top: auto; translate: none; width: clamp(96px, 7.5vw, 120px); }
.col-close__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }   /* 사진(위치 지정) 위에 그린다 */
.col-close__title {
  margin: 0;
  max-width: 18em;
  font-family: var(--ff-display);
  font-weight: var(--fw-name, 500);                                   /* F22: 이름 층 500 — 세트 사진보다 무겁지 않게 */
  font-stretch: var(--fstretch-display);
  font-size: calc(clamp(28px, 3vw, 52px) * var(--fs-scale));
  line-height: 1.08;
  letter-spacing: var(--ls-d2);
  text-wrap: balance;
  color: var(--moonmilk);
}
:root:lang(en) .col-close__title { line-height: 1; }
/* 단추 묶음(세트 줄 · 본문 · 단추): 하나로 들어오고 하나로 나간다 — 시간 기반 0.25초(스크롤 비례 반투명 0) */
.col-close__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  translate: 0 12px;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), translate .25s var(--ease-out), visibility 0s linear .25s;
}
.col-close.is-cta .col-close__act { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .25s var(--ease-out), translate .25s var(--ease-out), visibility 0s; }
/* 전원 점검 A3: .is-out(핀 끝 전)에 단추만 먼저 꺼지던 퇴장 삭제 — 병 · 제목 · 단추가 한 묶음으로 스크롤 1:1로 올라가 머리글 앞 부드러운 가림에서 함께 사라진다.
   클래스 .is-out은 header.js · totop.js가 읽으므로 그대로 붙는다 */
/* 세트 줄(16px 600 밝은 색) → 단추 → 안내 줄(14px 400, 밝은 색 72% = 불투명 #A9ADB5). 2026-10-03: 안내 줄은 세트 이름 옆이 아니라 단추 바로 아래 작은 한 줄 */
.col-close__set { margin: 16px 0 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--moonmilk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-close__set--m { display: none; }                                  /* 휴대폰 두 줄 판(COPY_F3 col.p01.set.line.m) */
.col-close__line { margin: 14px 0 0; max-width: 30em; text-wrap: balance; color: #A9ADB5; font-size: 14px; font-weight: 400; line-height: 1.5; }
/* 세로 쌓기: 제목 → 20 → 세트 줄 → 32 → 단추 → 14 → 안내 줄 */
.col-close__act > .col-close__set { margin-top: 20px; }
.col-close__act > .btn, .col-close__act > .col-close__shop { margin-top: 32px; }
.col-close .btn { height: 56px; padding: 0 36px; border-radius: 0; font-size: 17px; font-weight: 700; }
.col-close__shop { display: flex; flex-direction: column; align-items: center; row-gap: var(--s-5); }
.col-close .shops__link { color: var(--moonmilk); }
/* 노트북(높이 ≤ 880: 1366×768 · 1536×864 · 1280×800): 병 묶음 46% · 반사 끝 → 제목 32 · 세트 줄 → 단추 28 — 안내 줄 아래 ≥ 40px
   ≤ 760(1280×720): 44% */
@media (min-width: 768px) and (max-height: 880px) {
  .col-close { --cc-cl: 41svh; --cc-gap: 32px; }   /* 10-16: 46 → 41 */
  .col-close .btn { height: 52px; }
  .col-close__act > .btn, .col-close__act > .col-close__shop { margin-top: 28px; }
}
@media (min-width: 768px) and (max-height: 760px) { .col-close { --cc-cl: 40svh; } }   /* 10-16: 44 → 40 */
/* 동작 줄이기 · no-js: 핀 0 · 창 0, 모두 바로 보임 */
.is-reduced .col-close, .no-js .col-close { height: auto; }
.is-reduced .col-close__stage, .no-js .col-close__stage { padding-block: calc(var(--hdr-h) + 64px) 64px; clip-path: none; overflow: clip; background: var(--cc-night); }
:is(.is-reduced, .no-js) .col-close__still img { scale: 1; }
:is(.is-reduced, .no-js) .col-close__act { opacity: 1; translate: none; visibility: visible; transition: none; }
@media (max-width: 767px) {
  .col-close { --cc-pin: 620px; --cc-cl: 36svh; --cc-gap: 28px; --cc-fr: .62; --cc-top: .173; --cc-bot: .793; --cc-capx: 61.5%; --cc-ar: .8182; }
  .col-close__stage { align-items: stretch; padding: calc(var(--hdr-h) + 16px) var(--margin) 24px; }
  .col-close__visual { align-self: center; }
  .col-close__title { font-size: calc(30px * var(--fs-scale)); max-width: none; }
  .col-close__act, .col-close__head { align-items: stretch; }
  .col-close__act { padding-bottom: 0; }                                 /* 가운데 정렬이 바닥 여백을 맡는다 */
  .col-close__set { font-size: 15px; white-space: normal; }
  #col-close-set { display: none; }                                      /* 데스크톱 한 줄 판은 낭독 이름(aria-labelledby)으로만 */
  .col-close__set--m { display: block; }
  .col-close__act > .col-close__set--m { margin-top: 16px; }
  .col-close__act > .btn, .col-close__act > .col-close__shop { margin-top: 28px; }
  .col-close__line { font-size: 13px; margin: 12px 0 0; text-align: center; }
  .col-close .btn { width: 100%; height: 52px; padding: 0 16px; font-size: 16px; }
}

/* 작은 달 스프라이트(R2-15 · A-23): 사이트 MoonLayer 셰이더 + NASA 텍스처로 구운 실제 위상(256px 투명, 원 밖 알파 0 · 1px 고리 0 · 금색 0) */
.msprite {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.msprite--black { background-image: url('../assets/moon/sprite_black.webp'); }
.msprite--white { background-image: url('../assets/moon/sprite_white.webp'); }
.msprite--new   { background-image: url('../assets/moon/sprite_new.webp'); }

/* 인덱스 행(컬렉션 3개 이상) */
.col-index { padding: var(--s-9) var(--margin) 0; }
.col-index__row {
  position: relative;
  display: grid;
  grid-template-columns: 24px auto 1fr auto;
  align-items: center;
  column-gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule-day);
  overflow: hidden;
  isolation: isolate;
}
.col-index__row::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  scale: 0;
  background: var(--row-sweep, var(--sweep-01));
  z-index: -1;
  transition: scale var(--d-m) var(--ease-out);
}
.col-index__row:hover::before, .col-index__row:focus-visible::before { scale: 1; }
div.col-index__row::before { display: none; }   /* 주소 없는 행은 호버 차오름 없음(가짜 링크 금지) */

/* [F] 다음 컬렉션 자리 — 원 + 글 한 덩어리를 띠의 세로 가운데에.
   원 = 아직 뜨지 않은 달(P-56): 안 = 지구조만 남은 신월(11초 숨), 가는 테(1.5px)가 12초 주기로 초승만큼 차오르다 사라진다 */
/* FOCUS R1 P-01 ⓖ: COLLECTION 02 글과 빈 원은 처음부터 선명한 먹색으로 그려져 있다 — 새벽 호 와이프가 바탕 무대(밤)를 지우며
   그 아래 종이 면과 함께 드러낸다(.is-unlit 흐린 상태 삭제) */
.col-next {
  min-height: 60svh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-7);
  padding: var(--s-9) var(--margin);
}
.col-next__group { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; column-gap: var(--s-7); min-width: 0; }
.col-next__text { width: calc(var(--col) * 6 + var(--gutter) * 5); }
.col-next__index { color: var(--ink); }
.col-next__body { margin-top: var(--s-4); color: var(--ink); }     /* FOCUS R3 P3-08(F25): 먹 #0A0B0C — 종이 위 대비 ≥ 7:1(≈ 18:1) */
.col-next__orb {
  position: relative;
  flex: none;
  width: 28vh;
  height: 28vh;
  margin-right: calc(var(--col) + var(--gutter));
}
/* FOCUS R2 P2-05 ⑸ · AD2-P04 ④: 원 = 채움 종이색(회색 채운 접시 0) + 1px 테(먹 .35 — 01 도식 원 테와 같은 문법).
   안쪽 = 아주 옅은 초승 숨결(종이 대비 명도 차 ≤ 8%, 12초 — motion이 --next-k(0..1)를 쓰면 그 진행으로 차오름) */
.col-next__new {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: none !important;
  opacity: 1;
  overflow: hidden;
}
.col-next__new::before {                 /* 초승 = 옅은 그늘 조각(먹 6%) — 오른쪽 가장자리에서 숨처럼 차오르고 기운다 */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at calc(30% - var(--nb, 0%)) 50%, transparent 0 68%, rgb(10 11 12 / .08) 68.6%);   /* 10-16 컬러톤 바꿈-17(옛 rgb(23 25 27)) */
  animation: nextBreath 7s var(--ease-tide) infinite;              /* F16: 7초 주기로 명암선이 지름의 40%를 지나간다(3초의 약수 아님) */
}
@keyframes nextBreath { 0%, 100% { --nb: 0%; opacity: .8; } 50% { --nb: 40%; opacity: 1; } }
@property --nb { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.col-next__circle, .col-next__rise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.col-next__circle circle {             /* 12시 시작 회전은 SVG 속성 transform="rotate(-90 50 50)"(GSAP 트윈에도 원점 유지) */
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .35;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
/* 아직 뜨지 않은 달의 테: 오른쪽 반원(위 → 아래) 위에서, 3시 방향을 가운데로 초승 길이(반원의 0 → 64%)만큼 차오른 뒤 옅어진다. 끝은 둥글게 */
.col-next__rise path {
  fill: none;
  stroke: var(--ink);
  stroke-width: .62;                     /* viewBox 단위(28vh 원에서 ≈ 1.5px) — non-scaling-stroke를 쓰면 pathLength 대시가 화면 px로 풀려 길이가 틀어진다 */
  stroke-linecap: round;
  stroke-dasharray: 0 200;
  stroke-dashoffset: -50;
  opacity: 0;
  animation: nextRise 12s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes nextRise {
  0%   { stroke-dasharray: 0 200;  stroke-dashoffset: -50; opacity: 0; }
  10%  { opacity: .5; }
  46%  { stroke-dasharray: 64 200; stroke-dashoffset: -18; opacity: .72; }
  72%  { stroke-dasharray: 64 200; stroke-dashoffset: -18; opacity: 0; }
  100% { stroke-dasharray: 0 200;  stroke-dashoffset: -50; opacity: 0; }
}
.is-reduced .col-next__new, .is-reduced .col-next__rise path { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-full) .col-next__rise path { animation: none; } }
@media (max-width: 767px) {
  .col-next { min-height: 56svh; padding-block: var(--s-7); flex-direction: column-reverse; justify-content: center; align-items: center; row-gap: var(--s-7); text-align: center; }
  .col-next__group { flex-direction: column-reverse; justify-content: center; row-gap: var(--s-7); }
  .col-next__text { width: auto; }
  .col-next__orb { width: 44vw; height: 44vw; margin: 0; }
}

/* no-js: 바탕 무대를 구동할 수 없으므로 블록 자체 색(정적, 마스크 0) */
.no-js .col-ground { display: none; }
.no-js .collections[data-variant="inverse"] .sweep-iris__panel { background: linear-gradient(90deg, var(--sweep-01-alt-a) 50%, var(--sweep-01-alt-b) 50%); }
.no-js .collections[data-variant="inverse"] :is(.col-scent, .col-ing) { background: var(--basalt); }
.no-js .collections:not([data-variant="inverse"]) :is(.sweep-iris__panel, .col-scent, .col-ing) { background: var(--sweep-01); }
.no-js .collections .col-close { background: var(--cc-night, #0B0C0D); }   /* 10-16 컬러톤 바꿈-17(옛 #07090A) */
/* 동작 줄이기: 성분 이름표는 리빌 대기 없이 늘 보인다(P-50) */
html.is-reduced .col-ing :is(.col-ing__label, .ing__label) { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* =====================================================================
   S11 · 저널 3판(FOCUS R1 F8 · F11) — K5 장 카드 문법. 상자 · 테두리 · 구분선 0.
   행 = 밤 창 그림(종이 위 가로 레터박스 21:9 · 휴대폰 16:9, 바탕 #07080A = 스프라이트 바탕) + 큰 번호 「01」 · 큰 제목 · 한 줄(최대 2줄) · 「이야기 읽기 →」.
   01 = 그림 왼쪽 1~7칸 · 글 오른쪽 8~12칸, 02 = 반대(지그재그로 화면 폭을 채움), 행 사이 18vh.
   그림: 들어오기 = clip-path 아래 → 위 0.9초(journal.js .is-in, 한 번), 퇴장 = 스크롤 1:1. 01 위상 · 02 칭동은 journal.js
   ===================================================================== */
.journal { padding: 22vh 0 10vh; }     /* 26-10-03 사장님(한 번 넘김 계획 「다음 달 준비 ↔ 저널 01 여백이 좁아 위로 넘기면 저널 글이 늦게 없어짐」, 서하 값):
                                          「다음 달」 박자에 멈췄을 때 저널 머리(JOURNAL)가 화면 아래 끝 밖 ≈ 0.1H(데스크톱 0.92H → 1.12H)에 오게 2vh → 22vh.
                                          위로 넘기면 저널 글이 화면 아래로 다 빠져나간 뒤에 멈춘다(바닥에 남아 되감기는 모습 0). 예전 F19(사이 ≤ 150px)는 자유 스크롤 기준 */
.journal__inner { row-gap: 0; }
/* 10-16 사장님 결정(시안 4번 풍성): 저널 종이에 한지 결(닥 올 · 긴 올 · 티 · 컴퓨터 화면은 발 자국 — lab/한국적_꾸밈_시안.html hanji() 그대로 구운 타일,
   굽기 = scratchpad hanji/make.cjs · 결과 assets/fx/journal_hanji_{d,m}.webp) + 오른쪽 위 세로 쪽지(月律 · 선 · 01, 컴퓨터 화면만) */
.journal { position: relative; isolation: isolate; }
/* (10-16 3차) 한지 결은 이제 고정 낮 층 .sky__hanji(js/fx/sky.js · 아래) — 섹션 배경 .journal::before · .col-next::before 걷음 */
/* 10-16 사장님 「가로줄 배경이 저널 위쪽에서 잘리고 앞 섹션(다음 달)에 미리 조금 보여」(2차): 한지 결이 저널에만 있어 「다음 달」(같은 아침 종이)과 경계가 생기던 것 →
   한지 결을 「다음 달」부터 깔아 저널까지 한 장으로(사이 틈 0 실측 · 「다음 달」 무늬는 아래 끝에 맞춰 깔아 저널 첫 줄과 이음매 0).
   경계는 그 위 맺음 띠(밤) → 아침 종이 호 넘김 자리로 옮겨 감 — 위 16vh 동안 서서히(1차의 저널 위 흐림은 걷음) */

.jdia__disc { background-color: var(--morning); }   /* 위상 원 안에는 올이 지나가지 않게(시안의 keep 원) */
.journal__slip { position: absolute; top: calc(22vh - 8px); right: calc(var(--margin) - 4px); display: flex; flex-direction: column; align-items: center; margin: 0; color: var(--ink); pointer-events: none; }
.journal__slip-han { display: block; font: 600 28px/1 'Dalyul Han Serif', 'Dalyul Han', serif; }
.journal__slip-han + .journal__slip-han { margin-top: .2em; }
.journal__slip i { display: block; width: 1px; height: 96px; margin: 18px 0 14px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.journal__slip-no { display: block; font: 500 15px/1 var(--ff-pretendard); color: var(--ink); }
@media (max-width: 767px) {
  /* 휴대폰 한지 타일은 맨 끝 .sky__hanji 다음(덮어쓰기 순서) */
  .journal__slip { display: none; }   /* 휴대폰은 닥 올만(시안대로) */
}
/* 10-16 점검: 태블릿(1023 이하 · 세로가 긴 화면)에서 세로 쪽지가 맨 위로 단추 자리를 지나며 「律」가 가리던 것 → 컴퓨터 화면만(인수인계 그대로) */
@media (max-width: 1023px), (max-aspect-ratio: 4/5) { .journal__slip { display: none; } }
.journal__label { grid-column: 1 / -1; color: var(--ink); }
.journal__list { grid-column: 1 / -1; display: flex; flex-direction: column; row-gap: 30vh; padding-top: var(--s-6); }   /* 26-10-03: 18vh → 30vh — 저널 02 박자에서 01의 「이야기 읽기 →」가 머리글 밑에 남지 않게(한 번에 한 줄) */
.journal--list { padding-bottom: 0; }      /* FOCUS R3 motion §3: S12 저녁 호 0.25H(모션) + 저널 마지막 행 → S12 사이 12vh 삭제 = 0.37H 당김. 남은 0.03H는 음수 여백(S12가 행 아래 끝을 덮음 · 누름 가림)이라 하지 않음. 헤더 밑 잔상은 헤더 가드 v4가 줄 통째로 비킨다 */
.journal--feature { padding: 22vh 0 8vh; }    /* 26-10-04: 글이 1편일 때도 「다음 달」 박자에서 저널 머리가 화면 밖(목록과 같은 22vh — 위 .journal 주석) */
.jrow__link {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.jrow__link.is-static { cursor: default; }
.jrow__link:focus-visible { outline-offset: 8px; }
.jrow--a .jrow__win  { grid-column: 1 / span 7; grid-row: 1; }
.jrow--a .jrow__text { grid-column: 8 / -1;     grid-row: 1; }
.jrow--b .jrow__win  { grid-column: 6 / -1;     grid-row: 1; width: calc(100% + var(--margin)); max-width: none; }   /* FOCUS R3 P3-07: 02 그림은 오른쪽 바깥 여백까지(블리드 — 상자 테두리 인상 0) */
.jrow--b .jrow__text { grid-column: 1 / span 5; grid-row: 1; }
/* 밤 창 */
.jrow__win {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--jr-ar, 21 / 9);
  overflow: clip;
  background: #07080A;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.jrow__win.is-in { clip-path: inset(0 0 0 0); }
.jrow__win-in { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; transition: scale .6s var(--ease-out), opacity var(--d-s) linear; }
.jrow__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; scale: none !important; }
.jrow__cell { position: absolute; display: block; }
.jrow__cut { position: absolute; inset: 0; display: block; background-repeat: no-repeat; }
.jrow__cut--b { opacity: 0; }
.jrow__win:not(.has-sheet) .jrow__cell { visibility: hidden; }
/* 폴백(스프라이트 표·정지판 없음): 정적 첫 컷 = 밤 창 + 사이트 작은 달 스프라이트 */
.jrow__win.is-fallback .jrow__poster { display: none; }
.jrow__win.is-fallback .jrow__cell { visibility: visible; left: 53%; top: 18%; width: 27.4%; height: 64%; background: url('../assets/moon/sprite_white.webp') center / contain no-repeat; }
.jrow__win.is-fallback .jrow__cut { display: none; }
/* FOCUS R2 P2-07 · AD2-P04 ② 02 밤 창 = 밤색 #07080A 단색 · 데스크톱 16:9(정지판 비율, journal.js --jr-ar) · 직각 · 그림자 · 테두리 0 */
.jrow__win[data-win="cres"] { background: #07080A; }
.jrow__win[data-win="cres"] .jrow__cell { will-change: auto; }
/* ① 01 = 종이 위 8위상 띠 도식(정보 디자인). 12칸 폭 한 줄, 간격 24px, 원 지름 = (본문 폭 − 7 × 24) / 8, 위아래 여백 ≥ 48px.
   원 = 1px 테(먹 .35, 어두운 면) + 밝은 면만 있는 위상 컷(투명, 원반 = 칸의 93.4%). 이름 = 원 아래 12px · 12px 500 +0.04em 먹 70% 이상.
   왼쪽부터 차례로 아래 → 위 마스크 상승(journal.js --k 0 → 1, 블러 · 바램 0). 상자 · 바탕 띠 · 그림자 0 */
.jrow--dia .jrow__link { display: flex; flex-direction: column; align-items: stretch; }
/* FOCUS R3 P3-07: 01 행 = 번호 · 제목 · 한 줄 → 8위상 띠(12칸 폭 가득) → 「이야기 읽기 →」. 글 줄 폭은 7칸 안 */
.jrow--dia .jrow__text { width: 100%; }
.jrow--dia :is(.jrow__title, .jrow__lead) { max-width: calc(var(--col) * 7 + var(--gutter) * 6); }
.jrow--dia .jdia { width: 100%; align-self: stretch; padding: 28px 0 0; }   /* 26-10-09: 「이야기 읽기 →」가 글 묶음으로 올라가 띠가 행의 맨 아래(예전 40px 0 32px) */
.jdia {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding: 48px 0 56px;
}
.jdia__item {
  --k: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  clip-path: inset(calc((1 - var(--k)) * 100%) -4px -2px -4px);
}
.jdia__disc {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.jdia__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% / .93416);            /* 컷의 원반 = 칸의 93.4%(journal_r2.json rPctOfCell 46.708) */
  height: auto;
  max-width: none;
  translate: -50% -50%;
}
.jdia__name {
  display: block;
  margin-top: 12px;
  font-family: 'Dalyul Buri', var(--ff-pretendard);   /* 10-16 사장님: 위상 이름도 부리(저널 제목과 같은 'Dalyul Buri' — 서브셋에 위상 이름 글자 추가). 옛 = Pretendard 12px 500 */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: center;
  color: #45474A;                         /* 종이 위 대비 ≈ 8.6:1(먹 70% 이상) */
}
:root:lang(ja) .jdia__name { font-family: 'Dalyul Buri', var(--ff-pretendard-jp); letter-spacing: 0; }
html.is-reduced .jdia__item { clip-path: none; }
/* 글 */
.jrow__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.jrow__num {
  display: block;
  font-family: 'Dalyul Buri', var(--ff-archivo);   /* 10-16 사장님: 큰 번호 부리 600(옛 = Archivo 500) */
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(56px, 6vw, 96px);
  line-height: .86;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in srgb, var(--ink) 55%, transparent);   /* 불투명도 .55 — 리빌 판정과 겹치지 않게 색으로 */
}
.jrow__title {
  display: block;
  margin-top: var(--s-5);
  font-family: 'Dalyul Buri', var(--ff-display);   /* 10-16 사장님: 저널 제목 부리 700(옛 = 고딕 --fw-display-2) */
  font-weight: 700;
  font-size: calc(var(--fs-h2) * var(--fs-scale));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.jrow__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: var(--s-4);
  max-width: 30em;
  color: var(--stone);
  text-wrap: pretty;
}
/* R4 · 클릭 단서(CONSULT_저널클릭 2-4): 「이야기 읽기 →」 = 사이트 글 링크 문법(.po__notify와 같음). 상자·알약·주황 0 */
.jrow__cue {
  display: inline-flex;
  align-items: center;
  column-gap: .4em;
  min-height: 44px;
  margin-top: var(--s-3);          /* 12px */
  padding-block: 10px;
  font-size: 16px;                 /* FOCUS R2 F11: 데스크톱 16px · 휴대폰 15px */
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}
.jrow__cue-label {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--d-s) linear;
}
.jrow__cue-arrow { display: inline-block; text-decoration: none; transition: translate var(--d-s) var(--ease-out); }
/* 상태(CONSULT_저널클릭 3-1) — 마우스: 행 어디에 올려도 같이 반응(제목 변화 0) · 키보드: 같은 반응 · 휴대폰: 누르는 동안만 */
@media (hover: hover) and (pointer: fine) {
  .jrow__link:hover .jrow__cue-label { text-decoration-color: currentColor; }
  .jrow__link:hover .jrow__cue-arrow { translate: 6px 0; }
  /* .jrow__link:hover .jrow__win-in { scale: 1.03; }  10-16 사장님: 그림이 스스로 천천히 움직이게 바꾸며 마우스 올림 확대는 뺌(헷갈림) */
}
.jrow__link:focus-visible .jrow__cue-label { text-decoration-color: currentColor; }
.jrow__link:focus-visible .jrow__cue-arrow { translate: 6px 0; }
@media (hover: none) {
  .jrow__link:active .jrow__cue-label { text-decoration-color: currentColor; transition-duration: var(--d-xs); }
  .jrow__link:active .jrow__cue-arrow { translate: 6px 0; transition-duration: var(--d-xs); }
  .jrow__link:active .jrow__win-in { opacity: .82; transition: scale .6s var(--ease-out), opacity var(--d-xs) linear; }
}
/* 처음 한 번: 0 → 6px(0.35초, ease-out) → 0(0.55초, ease-tide) = 0.9초. 반복·바운스·깜빡임 0. fill-mode none(호버 이동을 덮지 않게) */
@keyframes jrowCueNudge {
  0%   { translate: 0 0;   animation-timing-function: cubic-bezier(.165, .84, .44, 1); }
  39%  { translate: 6px 0; animation-timing-function: cubic-bezier(.445, .05, .55, .95); }
  100% { translate: 0 0; }
}
.jrow__cue.is-cued .jrow__cue-arrow { animation: jrowCueNudge .9s linear .8s 1 none; }
/* 동작 줄이기: 신호 0 · 화살표 이동 0(밑줄 진해짐만) · 그림 들어오기 0 */
html.is-reduced .jrow__cue-arrow { animation: none !important; translate: none !important; transition: none; }
html.is-reduced .jrow__win, .no-js .jrow__win { clip-path: none; transition: none; }
html.is-reduced .jrow__win-in { scale: none !important; }
@media (min-width: 768px) and (max-width: 1023px) {
  .jrow--a .jrow__win  { grid-column: 1 / span 5; }
  .jrow--a .jrow__text { grid-column: 6 / -1; }
  .jrow--b .jrow__win  { grid-column: 4 / -1; }
  .jrow--b .jrow__text { grid-column: 1 / span 3; }
}
@media (max-width: 767px) {
  /* AD2-P04 ③: 행 사이 빈 종이 ≤ 160px */
  .journal { padding-top: 32vh; }          /* 26-10-03: 휴대폰 「다음 달」 박자 = 흰 막 화면 가운데 → 저널 머리 0.80H → 1.10H(화면 밖) */
  .journal__list { row-gap: 26vh; padding-top: var(--s-7); }   /* 26-10-03: 72px → 26vh — 저널 02 박자에서 01 단서가 머리글 밑에 남지 않게(예전 AD2-P04 ③ ≤ 160px는 자유 스크롤 기준) */
  .jrow__link { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  /* AD2-P04 ②: 휴대폰 02 창 = 좌우 24px 여백 안 4:3(화면 폭 가득한 띠 = '판' 인상 0) */
  .jrow--a .jrow__win, .jrow--b .jrow__win { grid-column: 1; grid-row: 1; width: auto; margin-inline: 0; aspect-ratio: var(--jr-ar, 4 / 3); }
  /* AD2-P04 ①: 휴대폰 도식 = 4 × 2, 원 64px, 행 간격 28px, 이름 12px */
  .jdia { grid-template-columns: repeat(4, 64px); justify-content: space-between; row-gap: 28px; column-gap: 0; padding: 8px 0 32px; }
  .jrow--dia .jdia { padding: 16px 0 0; }   /* 26-10-09: 단추 아래 띠 */
  .jdia__name { white-space: normal; width: 84px; text-wrap: balance; }
  .jrow__cue { font-size: 15px; }
  .jrow--a .jrow__text, .jrow--b .jrow__text { grid-column: 1; grid-row: 2; }
  .jrow__num { font-size: 56px; }
  .jrow__title { margin-top: var(--s-4); font-size: calc(28px * var(--fs-scale)); }
  .jrow__cue { margin-top: var(--s-2); }
}

/* =====================================================================
   저널 읽기 창 .jr (OR1 R6 · P-26) — 오버레이 층(z70), 아침 종이 위 잉크. 열림/닫힘 = 행 사진 중심 원(journal.js)
   글: 1~7컬럼(줄 34자 이하) · 사진: 8~12컬럼 sticky. 모바일: 한 단(사진 → 글)
   ===================================================================== */
.jr {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  --fg: var(--ink);
  --fg-2: var(--stone);
  --rule: var(--rule-day);
  --focus: var(--ink);
  background: var(--morning);   /* 26-10-15 아침 바탕 */
  color: var(--ink);
}
.jr[hidden] { display: none; }
html.is-reader { overflow: hidden; }
.jr__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.jr__scroll::-webkit-scrollbar { display: none; }
.jr__inner { position: relative; min-height: 100%; }
.jr__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: calc(var(--margin) - 12px);
  background: var(--morning);   /* 26-10-15 아침 바탕 */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
}
/* 닫기 = 제품 상세 창 .po__close와 같은 규칙(사장님 2026-10-03): 막대(.jr__bar)가 sticky라 늘 같은 자리, 누르는 자리 56px(휴대폰 48px),
   포커스 링은 단추 안쪽. X만(사장님 2026-10-03): 「닫기」는 .vh로 화면에서만 숨김(낭독기는 읽음), 56px 정사각(휴대폰 48px),
   × 획 30px · 1.75px(휴대폰 28px) */
.jr__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  margin-right: -4px;
  background: none;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
  outline-offset: -2px;
}
.jr__close-x { position: relative; flex: none; width: 24px; height: 24px; transition: rotate var(--d-s) var(--ease-out); }
.jr__close-x::before, .jr__close-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 1.75px;
  margin: -.875px 0 0 -15px;
  background: currentColor;
  rotate: 45deg;
}
.jr__close-x::after { rotate: -45deg; }
@media (max-width: 767px) {
  .jr__close { width: 48px; min-width: 48px; height: 48px; padding: 0; margin-right: 0; font-size: 15px; }
  .jr__close-x::before, .jr__close-x::after { width: 28px; margin-left: -14px; }
}
.jr__close:hover .jr__close-x, .jr__close:focus-visible .jr__close-x { rotate: 90deg; }
.jr__content {
  align-items: start;
  padding-top: 12vh;
  padding-bottom: 16vh;
}
.jr__article { grid-column: 1 / span 7; min-width: 0; }
.jr__kind { margin: 0; color: var(--sun); font-size: calc(var(--fs-label) + 2px); font-weight: 700; }   /* 10-15 밤 사장님: 주황은 그대로, 조금만 크게(+2px) · 굵기 한 단계 위(600 → 700) */   /* 26-10-09 사장님: 읽기 화면의 갈래 글(NOTE)과 맨 아래 점을 포인트 주황으로(예전 var(--stone)) */
.jr__title {
  margin: var(--s-5) 0 0;
  max-width: 13em;
  font-family: 'Dalyul Buri', var(--ff-display);   /* 10-16: 읽기 창 제목도 목록과 같은 부리 700 */
  font-weight: 700;
  font-size: calc(var(--fs-d2) * .8 * var(--fs-scale));
  line-height: 1.06;
  letter-spacing: var(--ls-d2);
  text-wrap: balance;
}
.jr__title:focus { outline: none; }
.jr__lead {
  margin: var(--s-7) 0 0;
  max-width: 24em;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: calc(var(--fs-lead) * .86 * var(--fs-scale));
  text-wrap: pretty;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}
.jr__body { margin-top: var(--s-8); max-width: min(100%, 34em); }
:root:lang(en) .jr__body { max-width: min(100%, 30em); }
.jr__p {
  margin: 0;
  font-size: var(--fs-body-l);
  line-height: 1.85;
  letter-spacing: var(--ls-body-l);
  color: var(--ink);
}
.jr__p + .jr__p { margin-top: 1.4em; }
:root:lang(ja) .jr__p { line-height: 1.95; }
.jr__end { margin: var(--s-8) 0 0; }
.jr__end-moon { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }   /* 26-10-09: 먹 → 주황 */
.jr__media {
  grid-column: 8 / span 5;
  position: sticky;
  top: calc(var(--hdr-h) + 12vh);
  margin: 0;
}
.jr__frame { display: block; aspect-ratio: 16 / 9; overflow: clip; background: var(--umbra); }
.jr__frame picture { display: contents; }
.jr__frame :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .jr__article { grid-column: 1 / -1; }
  .jr__media { grid-column: 1 / -1; grid-row: 1; position: relative; top: auto; margin-bottom: var(--s-8); }
  .jr__content { padding-top: 4vh; }
}
@media (max-width: 767px) {
  .jr__media { margin-inline: calc(-1 * var(--margin)); margin-bottom: var(--s-7); }
  .jr__title { font-size: calc(var(--fs-d2) * .9); }
  .jr__lead { margin-top: var(--s-6); font-size: 20px; }
  .jr__body { margin-top: var(--s-7); }
  .jr__p { font-size: 17px; line-height: 1.85; }
}

/* =====================================================================
   S12 · 피날레 + 알림 신청
   ===================================================================== */
.corner { position: absolute; color: var(--dust); white-space: nowrap; }
.corner--tl { left: var(--margin); top: calc(var(--hdr-h) + var(--below-hdr)); }   /* 26-10-03: 머리글 아래 여백 토큰(휴대폰 = 24px 그대로) */
/* FOCUS R3 P3-09: 데스크톱 라벨 「DALYUL · 月律」 = 가운데 정렬 제목과 같은 세로 축(휴대폰은 제목이 왼쪽 정렬이라 왼쪽 그대로) */
@media (min-width: 768px) { .corner--tl { left: 50%; translate: -50% 0; } }
.corner--br { right: var(--margin); bottom: 32px; }
.corner:empty { display: none; }
.notify__center {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  top: calc(var(--hdr-h) + 6vh);
  bottom: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;   /* 잔손질(유나): JA 두 줄 제목+폼이 상자보다 크면 위로 넘쳐 「DALYUL · 月律」과 겹침 → 넘칠 땐 위를 지킨다 */
  row-gap: var(--s-8);
}
/* 26-10-03 제목 묶음 시작 높이(서하): 귀퉁이 「DALYUL · 月律」이 머리글 아래 여백 토큰으로 내려온 만큼 상자 윗변 = 귀퉁이 아래 끝 + 28(글자 사이 한 · 영 · 일 ≥ 24).
   낮은 화면(≤ 900)은 제목–신청 칸 사이를 조금 좁혀 달 위 자리를 지킨다(768 = 53 · 800 = 56 · 900 이상 64 그대로). 휴대폰은 아래 규칙 그대로 */
@media (min-width: 768px) { .notify__center { top: calc(var(--hdr-h) + var(--below-hdr) + 1.25 * var(--fs-kicker) + 28px); row-gap: clamp(44px, 8svh - 8px, 64px); } }
/* 26-10-03 사장님 「부피감 조금 줄여」: 정점 800 → 이름 층 500(--fw-name, EN도 500) · 크기 70%(첫 화면 슬로건과 같은 결).
   1440 151 → 106px · 1767 186 → 130 · 1280 134 → 94 · 휴대폰 KO 52 → 36(--fs-d1 = 52px × .70). 출시 뒤 문구도 같은 상자라 같은 값 */
.notify__title { text-align: center; color: var(--moonmilk); max-width: 100%; font-weight: var(--fw-name); font-size: calc(var(--fs-d1) * var(--fs-scale) * .60); letter-spacing: -.015em; }   /* 10-16 사장님 「곧, 만월이 뜹니다 폰트 좀 줄여」 .70 → .60 */
.notify__title > span { display: block; }
/* 10-16 사장님 「곧, 만월이 뜹니다도 우리가 쓴 글꼴로」: 저널 · 이야기와 같은 부리 600('Dalyul Buri' — 서브셋에 notify.title · launched 글자 추가) */
.notify__title { font-family: 'Dalyul Buri', var(--ff-display); font-weight: 600; }
/* 10-16 점검 · 사장님 결정「일본어만 원래 글꼴」: 부리 서브셋(원본 Noto Serif KR 포함)에 '満'이 없어 「満月」이 고딕 満 + 부리 月로 섞이던 것 →
   ja 에서 満이 나오는 세 곳(큰 위상 이름 · 저널 위상 원 이름 · 곧 만월이)은 부리 전 글꼴 · 굵기로. 저널 제목 · 번호는 ja 글자가 다 있어 부리 그대로 */
:root:lang(ja) :is(.rhythm__phase, .notify__title) { font-family: var(--ff-display); font-weight: 500; }
:root:lang(ja) .jdia__name { font-family: var(--ff-pretendard-jp); font-weight: 500; }
/* P-45: 한글·가나 큰 제목은 받침·쉼표가 다음 줄 머리와 닿지 않게 1.08(EN은 .95 유지) */
:root:lang(ko) .notify__title, :root:lang(ja) .notify__title { line-height: 1.08; }
/* C2-5 줄 나눔(data-i18n-break): KO는 데스크톱 한 줄(가장 힘 있음) · 휴대폰 「곧,」 / 「만월이 뜹니다.」, EN·JA는 모든 폭에서 구절 두 줄 */
.notify__title .i18n-row { display: inline; }
:root:is(:lang(en), :lang(ja)) .notify__title .i18n-row { display: block; }
:root:lang(en) .notify__title, :root:lang(ja) .notify__title {
  font-size: min(calc(var(--fs-d1) * var(--fs-scale) * .70), 5.9vw);   /* 2줄(balance) + 폼이 위 60% 안에 · 26-10-03 70%(1440 121 → 85px) */
}
@media (max-width: 767px) {
  .corner--br { bottom: auto; top: 70svh; }
  /* FINAL F-09 ⓔ: 위상 이름표 = 제목 묶음 아래 메타 줄(form.js가 top을 제목 아래 12px로) — 왼쪽 기준선, 13px */
  .corner--br.is-meta { left: var(--margin); right: auto; font-size: 13px; }
  .notify__center { top: calc(var(--hdr-h) + 9svh); bottom: 34svh; row-gap: 52px; justify-content: flex-start; }
  .notify__title { text-align: left; align-self: stretch; }
  .notify__title .i18n-row { display: block; }
  :root:lang(en) .notify__title, :root:lang(ja) .notify__title { font-size: min(30px, 7.4vw); }   /* P-45: 360에서 「満月がのぼります。」 한 줄 · 26-10-03 40 → 30px */
}
.is-reduced .notify__center, .no-js .notify__center { position: relative; inset: auto; padding: 24svh var(--margin) 40svh; }

/* =====================================================================
   S13 · 푸터
   ===================================================================== */
.footer { min-height: 90svh; display: flex; }
.footer__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18vh var(--margin) var(--s-7);
}
/* FOCUS R2 P2-09 ⑴: 워드마크 = 본문 폭 70%(1440에서 ≈ 850px) · 휴대폰 84%. 한 줄 = 32px 이상, 그 아래. 법적 고지 · 내비는 별도 아래 줄 */
/* 26-10-03 사장님 「부피감 줄여」: 본문 폭 70 → 56%(1440 851 → 681px) — 첫 화면 큰 로고의 되풀이가 아닌 맺음 도장 */
/* 26-10-09 사장님 「푸터 글자 전체적으로 좀 줄이고, 달율 · 오늘도 두 문구는 20%쯤 줄여」: 워드마크 56 → 44.8%(최대 896 → 717px) · 한 줄 26~32 → 21~26px · 내비 19~24 → 16~20px · 고지 16~18 → 14~15px */
.footer__mark { width: calc((100vw - 2 * var(--margin)) * .448); max-width: 717px; height: auto; aspect-ratio: 89.33 / 10.304; color: var(--moonmilk); fill: currentColor; }
.footer__tagline { margin-top: 24px; font-size: clamp(21px, 1.66vw, 26px); font-weight: 400; line-height: 1.3; color: var(--moonmilk); }   /* 26-10-03: 37 → 30px(1440) · 600 → 400 */
:root:lang(en) .footer__tagline { font-weight: 400; }   /* base :lang(en) .t-lead 500을 이김 */
.footer__row {
  margin-top: auto;
  padding-top: 12vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
}
.footer__nav ul { display: flex; flex-wrap: wrap; column-gap: var(--s-6); row-gap: var(--s-2); }
.footer__nav a {
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 600;
  color: var(--moonmilk);
  padding: 4px 0;
  transition: color var(--d-xs) linear;
}
.footer__nav a:hover { color: var(--dust); }
.footer__tools { display: flex; align-items: center; column-gap: var(--s-6); }
.footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-night);
  color: var(--dust);
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}
.footer__legal .t-body { font-size: clamp(14px, 1vw, 15px); }
.footer__nowrap { white-space: nowrap; }        /* FOCUS R3 P3-07: 사업자등록번호는 줄바꿈하지 않는다 */
.footer__credit--sky { display: none; }
html[data-sky="photo"] .footer__credit--sky { display: block; }
.footer__meta { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.footer__copy { margin-left: auto; }
/* 10-16 점검: 여백이 좁은 폭(768 · 1024)에서 「© 2026 DALYUL」 끝이 맨 위로 단추(components.css .totop — 오른쪽 --tt-r · 폭 74)에 덮이거나 닿던 것 →
   단추 자리 + 16px만큼 오른쪽을 비움(여백이 넉넉한 1280 이상은 0). 휴대폰은 아래 64px 규칙 */
.footer__meta { padding-right: max(0px, calc(max(16px, var(--margin) / 2 - 37px) + 74px + 16px - var(--margin))); }
.footer__privacy { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .footer__mark { width: 54vw; }   /* 26-10-03: 84 → 68vw · 26-10-09: → 54vw(20% 줄임) */
  .footer__tagline { font-size: 21px; margin-top: 16px; }   /* 26-10-09: 26 → 21px */
  .footer__nav a { font-size: 16px; }
  .footer__inner { padding-top: 14svh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  /* FOCUS R1 P-07 · 모션 요청 1-3(AD-M10): 태그라인 ↔ 내비 사이 빈 하늘 = 0.40·폭 + 56px — 페이지 끝 달(지름 ≈ 37vw)이 글과 24px 이상 떨어져 앉는 자리.
     페이지 끝에서 워드마크가 화면 위 20~28% 띠에 남도록 아래 법적 고지 줄은 한 단계 작게(13px · 줄 1.55) */
  .footer__row { flex-direction: column; align-items: flex-start; padding-top: calc(40vw + 40px); }
  .footer__legal { margin-top: var(--s-5); padding-top: var(--s-4); }
  .footer__legal .t-body { font-size: 13px; line-height: 1.55; }
  .footer__copy { margin-left: 0; }
  /* 맨 아래 줄(AI 고지 · ©)은 오른쪽 아래 맨 위로 단추(48px + 16px)와 겹치지 않게 비켜 둔다 */
  .footer__meta { padding-right: 64px; }
}
/* 휴대폰 점검 M7: 좁은 휴대폰(360 등)에서 바닥글 언어 · SOUND · MOTION 줄이 340px라 MOTION이 화면 오른쪽 끝에서 잘렸다 → 간격 32 → 16(308px).
   그보다 좁으면 다음 줄로 접는다(잘림 0) */
@media (max-width: 389px) {
  .footer__tools { column-gap: var(--s-4); flex-wrap: wrap; row-gap: var(--s-2); }
}
@media (max-width: 767px) and (max-height: 800px) {
  /* 낮은 휴대폰(360×780 등): 워드마크 20% 띠가 먼저 — 빈 하늘을 32px 줄인다(달은 모션이 빈 하늘에 맞춰 줄여 앉힌다) */
  .footer__inner { padding-top: 12svh; }
  .footer__row { padding-top: calc(40vw + 4px); }
}

/* ---------- AI 뮤즈 슬롯(CONFIG.muse, 기본 hidden) ---------- */
.muse { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.muse img { position: absolute; height: auto; max-width: none; }
.muse--m1 img { left: 30%; bottom: 15%; height: 9%; width: auto; }      /* 지평선 위 왼쪽 1/3, 화면 높이 9% */
.muse--m2 img { left: var(--margin); bottom: 6%; height: 22%; width: auto; }
.muse__disclosure {
  position: absolute;
  left: var(--margin);
  bottom: 32px;
  color: var(--dust);
}

/* S06~S08 투명 섹션이 .arc-layer 콜아웃 클릭을 가로채지 않게(자식에 상호작용 요소 없음, WP-09) */
#ritual, #aurora, #morning { pointer-events: none; }

/* 상세 창 사용 순서 줄(.po__use · CONSULT_GPT의견 4번, 사장님 동의 2026-10-03): 「밤에만 사용합니다.」 바로 아래 두 줄까지만, 같은 본문 글씨(강조 · 주황 0).
   세럼 = 사용 순서 + 자외선 차단제, 크림 = 사용 순서 한 줄(성분 줄이 숨어 있으니 같은 틀 — 가는 선 — 안에서 단추 위). 대상 · 양 · 향 · 출시일 0 */
.po__use { flex: none; display: flex; flex-direction: column; row-gap: 2px; margin: var(--s-3) 0 0; max-width: 26em; text-wrap: pretty; }
.po__use-l { display: block; }
.po__ing[hidden] + .po__use { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
@media (max-width: 767px) {
  .po__use { margin-top: var(--s-1); row-gap: 0; }
  .po__ing[hidden] + .po__use { margin-top: var(--s-4); padding-top: var(--s-3); }
  /* 휴대폰 한 화면(§36): 늘어난 줄만큼 사이 여백을 덜어 낸다(영어 390×844에서 사진이 하한에 닿아 20px 넘치던 것). 사용 줄이 있을 때만 */
  #product-overlay .po__main:has(> .po__use:not([hidden])) :is(.po__desc, .po__ing) { margin-top: var(--s-4); }
  #product-overlay .po__main:has(> .po__use:not([hidden])) .po__cta { margin-top: var(--s-3); }
}

/* 10-16 사장님 결정(시안 6번 · 코드 그림): 「곧, 만월이 뜹니다」 달빛 윤슬 — 화면 아래 한 띠가 밤 수면(js/fx/moonglint.js).
   본문(main) 안이라 무대의 달 아래쪽을 가려 달이 물 위로 떠오름. 글 · 입력 칸보다 뒤(z −1) */
.notify__water { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 17.5vh;   /* 화면 아래에 붙음(장면이 끝나며 올라가도 수면은 제자리 — 대신 걷힘) */
  z-index: -1; pointer-events: none; display: block; }
@media (max-width: 767px) { .notify__water { height: 14vh; } }
html.is-reduced .notify__water { height: 17.5vh; }

/* 10-16 사장님 「큰 제목 아래 작은 글이 같은 선으로 안 보여 — 앞에 여백 조금, 같이 쓰는 곳 모두 동일하게」:
   큰 글자는 획 앞 빈자리(글자 옆 여백)가 커서 실제 줄보다 안쪽에서 시작해 보임 → 아래 작은 글을 같은 만큼 들여 눈으로 맞춤(광학 정렬).
   대상 = 큰 제목 + 작은 본문 짝: 시간표 정거장(달이 뜨는 시간 · 달빛 세럼 · 은하수 크림 · 가장 깊은 밤 · 만월의 아침), 이야기 달 이름 아래, 저널 제목 아래, 읽기 창 제목 아래 */
.station__body, .rhythm__body, .jrow__lead, .jr__lead { padding-inline-start: .3em; }


/* 10-16 사장님: 저널 「이야기 읽기 →」도 위 본문과 같은 만큼 들임(본문 글자 크기의 .3 — 본문과 같은 화소) */
.jrow__cue { padding-inline-start: calc(var(--fs-body-l) * .3); }
/* 10-16 사장님 「화살표는 마우스 가져가면 움직이는 게 아니고 계속 움직이게」: 늘 천천히 오른쪽으로 갔다 돌아옴(2.2초, 0 → 6px → 0). 동작 줄이기면 멈춤(위 html.is-reduced 규칙) */
@keyframes jrowCueLoop { 0%, 100% { translate: 0 0; } 45% { translate: 6px 0; } }
.jrow__cue .jrow__cue-arrow, .jrow__cue.is-cued .jrow__cue-arrow { animation: jrowCueLoop 2.2s cubic-bezier(.45, .05, .55, .95) infinite; }
html.is-reduced .jrow__cue .jrow__cue-arrow { animation: none !important; }

/* 10-16 사장님 「다음 달을 준비하고 있습니다 — 부실하고 달의 라인이 성의 없어 보임 · 실루엣 화장품이 바뀌다 ?」 시안 html.next-b
   (옛 = 1px 원 + 12초 초승 테 + 옅은 초승 숨). 14초 한 순환: 실루엣 다섯이 2초씩(흐림 → 또렷 → 흐림) 지나는 동안 달 점이 테를 한 바퀴 돌며 호가 차오르고,
   한 바퀴가 닫히는 순간 「?」(부리)가 4초 머문다. 동작 줄이기 = 「?」와 꽉 찬 테만 */
.col-next__dial, .col-next__sil { display: none; }
html.next-b .col-next__orb { width: 34vh; height: 34vh; }
html.next-b :is(.col-next__circle, .col-next__rise, .col-next__new) { display: none; }
html.next-b :is(.col-next__dial, .col-next__sil) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.col-next__dial-rim { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.col-next__dial-ticks line { stroke: var(--ink); stroke-opacity: .28; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.col-next__dial-ticks line.is-major { stroke-opacity: .6; }
.col-next__dial-arc { fill: none; stroke: var(--ink); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 0 100; animation: nextArc 14s linear infinite; }
.col-next__dial-orbit { transform-origin: 50px 50px; animation: nextOrbit 14s linear infinite; }
.col-next__dial-orbit circle { fill: var(--ink); }
@keyframes nextArc { 0% { stroke-dasharray: 0 100; opacity: 1; } 71.43% { stroke-dasharray: 100 0; opacity: 1; } 96% { stroke-dasharray: 100 0; opacity: 1; } 100% { stroke-dasharray: 100 0; opacity: 0; } }
@keyframes nextOrbit { 0% { rotate: 0deg; opacity: 1; } 71.43% { rotate: 360deg; opacity: 1; } 72.5% { opacity: 0; } 98% { rotate: 360deg; opacity: 0; } 100% { rotate: 360deg; opacity: 1; } }
.col-next__sil-i { fill: var(--ink); fill-opacity: .86; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: nextSil 14s var(--ease-tide, ease-in-out) infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes nextSil {
  0%     { opacity: 0; filter: blur(5px); scale: .94; }
  4.3%   { opacity: 1; filter: blur(0);   scale: 1; }
  10%    { opacity: 1; filter: blur(0);   scale: 1; }
  14.3%  { opacity: 0; filter: blur(5px); scale: 1.03; }
  100%   { opacity: 0; filter: blur(5px); scale: .94; }
}
.col-next__sil-q { font-family: 'Dalyul Buri', var(--ff-display); font-weight: 600; font-size: 44px; fill: var(--ink); opacity: 0; animation: nextQ 14s var(--ease-tide, ease-in-out) infinite; }
@keyframes nextQ { 0%, 70% { opacity: 0; filter: blur(6px); } 75% { opacity: 1; filter: blur(0); } 95% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(6px); } }
html.is-reduced.next-b :is(.col-next__dial-arc, .col-next__dial-orbit, .col-next__sil-i, .col-next__sil-q) { animation: none; }
html.is-reduced.next-b .col-next__dial-arc { stroke-dasharray: 100 0; }
html.is-reduced.next-b .col-next__sil-q { opacity: 1; }
@media (max-width: 767px) { html.next-b .col-next__orb { width: 52vw; height: 52vw; } }

/* 10-16 2차 시안 html.next-c — 한지 창 너머 그림자 + 시간이 지나며 그려지는 먹선 원 + 선 물음표. 14초 한 순환:
   0~10초 그림자 다섯이 2초씩(멀리서 다가오듯 흐림 → 또렷 → 흐림) · 그동안 12시에서 붓끝(달 점)이 돌며 원을 긋고,
   10초에 원이 닫히면 물음표가 한 획으로 그어짐(0.9초) → 점 → 13.2초까지 머묾 → 원 · 물음표가 함께 걷힘. 동작 줄이기 = 다 그려진 원 + 물음표 */
.col-next__shadows, .col-next__brush { display: none; }
html.next-c .col-next__orb { width: 42vh; height: 42vh; }   /* 10-16 원을 없앤 뒤 그림자가 작아 보여 36 → 42vh */
html.next-c :is(.col-next__circle, .col-next__rise, .col-next__new, .col-next__dial, .col-next__sil) { display: none; }
html.next-c :is(.col-next__shadows, .col-next__brush) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.col-next__shadows i { position: absolute; inset: 6%; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 0; animation: nextShadow 14s cubic-bezier(.45, .05, .55, .95) infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes nextShadow {
  0%    { opacity: 0; filter: blur(10px); scale: 1.05; }
  5%    { opacity: 1; filter: blur(0);    scale: 1; }
  10%   { opacity: 1; filter: blur(0);    scale: 1; }
  14.3% { opacity: 0; filter: blur(10px); scale: .985; }
  100%  { opacity: 0; filter: blur(10px); scale: 1.05; }
}
.col-next__brush-line { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-dasharray: 0 100; animation: nextBrush 14s linear infinite; }
@keyframes nextBrush { 0% { stroke-dasharray: 0 100; opacity: 1; } 71.43% { stroke-dasharray: 100 0; opacity: 1; } 94% { stroke-dasharray: 100 0; opacity: 1; } 100% { stroke-dasharray: 100 0; opacity: 0; } }
.col-next__brush-tip { transform-origin: 50px 50px; animation: nextTip 14s linear infinite; }
.col-next__brush-tip circle { fill: var(--ink); }
@keyframes nextTip { 0% { rotate: 0deg; opacity: 0; } 1.5% { opacity: 1; } 71.43% { rotate: 360deg; opacity: 1; } 74% { rotate: 360deg; opacity: 0; } 100% { rotate: 360deg; opacity: 0; } }
.col-next__brush-q { fill: none; stroke: var(--ink); stroke-opacity: .9; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 101; animation: nextQline 14s cubic-bezier(.55, 0, .3, 1) infinite; }
@keyframes nextQline { 0%, 71.9% { stroke-dasharray: 0 101; opacity: 0; } 72% { stroke-dasharray: 0 101; opacity: 1; } 78.5% { stroke-dasharray: 101 101; opacity: 1; } 94% { stroke-dasharray: 101 101; opacity: 1; } 100% { stroke-dasharray: 101 101; opacity: 0; } }   /* 틈 101 고정 — 그리는 도중 끝점에 둥근 점이 먼저 찍히던 것 */
.col-next__brush-dot { fill: var(--ink); fill-opacity: .9; opacity: 0; transform-box: fill-box; transform-origin: center; animation: nextQdot 14s ease-out infinite; }
@keyframes nextQdot { 0%, 78.5% { opacity: 0; scale: .2; } 81% { opacity: 1; scale: 1; } 94% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
html.is-reduced.next-c :is(.col-next__shadows i, .col-next__brush-line, .col-next__brush-tip, .col-next__brush-q, .col-next__brush-dot) { animation: none; }
html.is-reduced.next-c .col-next__brush-line { stroke-dasharray: 100 0; }
html.is-reduced.next-c .col-next__brush-q { stroke-dasharray: 101 101; opacity: 1; }
html.is-reduced.next-c .col-next__brush-dot { opacity: 1; }
html.is-reduced.next-c .col-next__brush-tip { opacity: 0; }
@media (max-width: 767px) { html.next-c .col-next__orb { width: min(62vw, 72svh); height: min(62vw, 72svh); } }   /* 10-16 점검: 가로로 눕힌 휴대폰(740×360 등)에서 원이 화면 높이보다 커 잘리던 것 → 높이 상한 72svh */
/* 10-16 점검 · 사장님 결정: 세로가 긴 태블릿(768 이상 · 가로:세로 4:5 이하 — 768×1024 · 820×1180 · 1024×1366)도 휴대폰처럼 위아래로 쌓기.
   원 42vh가 옆 글 칸을 91px까지 눌러 「다음 달을…」이 6~8줄로 쪼개지던 것. 1024×768 · 컴퓨터 가로 화면은 그대로 */
@media (min-width: 768px) and (max-aspect-ratio: 4/5) {
  .col-next { min-height: 56svh; padding-block: var(--s-7); flex-direction: column-reverse; justify-content: center; align-items: center; row-gap: var(--s-7); text-align: center; }
  .col-next__group { flex-direction: column-reverse; justify-content: center; row-gap: var(--s-7); }
  .col-next__text { width: auto; }
  .col-next__orb { margin: 0; }
  html.next-c .col-next__orb { width: min(56vw, 42vh); height: min(56vw, 42vh); }
}

/* 10-16 사장님 「시계 표시는 없애」 → 그려지는 원 · 붓끝 점 숨김(물음표 · 그림자만) */
html.next-c .col-next__brush > g { display: none; }

/* 10-16 물음표 = 글꼴 윤곽(손으로 짠 선 물음표 대신). 그림자 다섯이 지난 뒤(10초) 흐림 → 또렷으로 떠올라 머묾 → 걷힘 */
.col-next__qmark { display: none; }
html.next-c .col-next__qmark { display: inline; fill: var(--ink); fill-opacity: .9; opacity: 0; animation: nextQ2 14s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes nextQ2 { 0%, 71.4% { opacity: 0; filter: blur(6px); } 77% { opacity: 1; filter: blur(0); } 94% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(6px); } }
html.is-reduced.next-c .col-next__qmark { animation: none; opacity: 1; }

/* 10-16 사장님 「실루엣을 좀 더 흐릿하게 — 블라인드에 가려진 것처럼?」 시안 ?blind=a · b
   a = 흐릿하게만(번짐 2.4px · 옅게 70%) / b = 블라인드 너머: 가로 살(11px 간격) 사이로 비치듯 그림자에 줄무늬(살 자리 30%) + 번짐 1.5px,
   둘레 종이에도 살 그림자가 아주 옅게(먹 3.5%) — 가장자리는 둥글게 녹아 네모 자국 0 */
html.next-c.blind-a .col-next__shadows { filter: blur(6px); opacity: .6; scale: 1.04; }   /* 10-16 2판 「더 퍼지게」: 2.4 → 6px */
/* (블라인드 1판 — 그림자에 줄 마스크 — 은 2판으로 바뀜, 아래) */

/* 10-16 블라인드 2판 ?blind=b (사장님 참고 그림: 가로 살이 모양을 이루는 로고 · 반쯤 걷힌 블라인드, 「디테일을 더」)
   둥근 창(달) 안 가로 살 — 살마다 윗면 빛 1px · 몸(위 밝음 → 아래 살짝 어두움 = 굽은 알루미늄) · 아랫면 그늘 1px, 살은 92% 불투명(뒤 그림자가 아주 옅게 비침).
   살 사이 틈(--gap)으로 그림자가 엿보임: 제품이 또렷해질 때 틈이 1.4 → 5.6px 로 벌어지고(살이 기울어 열림) 바뀔 때 닫힘, 물음표 차례엔 7.2px.
   살을 매다는 줄 두 가닥(왼쪽 · 오른쪽 30%). 동작 줄이기 = 반쯤 열린 채 멈춤 */
.col-next__blind { display: none; }
/* 블라인드 4판(사장님 「움직임이 왜 어색할까」): ① 살이 반쯤 열린 채 제품이 녹아 바뀌던 것 → 살이 다 닫힌 순간에 바꾸고 다시 엶(닫고 → 바꾸고 → 열기)
   ② 줄무늬 한 장의 틈 숫자를 바꾸던 방식(픽셀 단위로 끊겨 떨림) → 살 18개를 따로, 하나하나 가운데 축으로 scaleY(화면 합성이라 매끄러움)
   ③ 물음표만 살 앞에 떠 있던 것 → 물음표도 살 뒤, 마지막에 살이 가장 넓게 열리며 보임. 기울수록 살 면이 어두워짐(::after) */
html.next-c.blind-b .col-next__blind { display: flex; flex-direction: column; position: absolute; inset: 1%; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 3;
  -webkit-mask-image: radial-gradient(closest-side, #000 calc(100% - 1.5px), transparent 100%);
          mask-image: radial-gradient(closest-side, #000 calc(100% - 1.5px), transparent 100%); }
html.next-c.blind-b .col-next__blind b { flex: 1 1 0; position: relative; transform-origin: 50% 50%; will-change: transform;
  background: linear-gradient(180deg, rgb(252 252 252) 0 1.5px, rgb(241 241 240) 1.5px, rgb(225 226 227) calc(100% - 2px), rgb(176 178 182) calc(100% - 2px));   /* 10-16 5판: 살 불투명(닫힌 살 너머로 그림이 바뀌는 게 비치던 것) */
  animation: nextSlat 14s cubic-bezier(.42, 0, .22, 1) infinite; }
html.next-c.blind-b .col-next__blind b::after { content: ''; position: absolute; inset: 0; background: #0A0B0C; opacity: 0; animation: nextSlatShade 14s cubic-bezier(.42, 0, .22, 1) infinite; }
html.next-c.blind-b .col-next__blind i { position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(30% - .5px), rgb(10 11 12 / .14) calc(30% - .5px) calc(30% + .5px), transparent calc(30% + .5px) calc(70% - .5px), rgb(10 11 12 / .14) calc(70% - .5px) calc(70% + .5px), transparent calc(70% + .5px)); }
@keyframes nextSlat { 0.0% { transform: scaleY(1.06); } 1.071% { transform: scaleY(1.06); } 5.357% { transform: scaleY(0.5); } 9.643% { transform: scaleY(0.5); } 13.214% { transform: scaleY(1.06); } 15.357% { transform: scaleY(1.06); } 19.643% { transform: scaleY(0.5); } 23.929% { transform: scaleY(0.5); } 27.5% { transform: scaleY(1.06); } 29.643% { transform: scaleY(1.06); } 33.929% { transform: scaleY(0.5); } 38.214% { transform: scaleY(0.5); } 41.786% { transform: scaleY(1.06); } 43.929% { transform: scaleY(1.06); } 48.214% { transform: scaleY(0.5); } 52.5% { transform: scaleY(0.5); } 56.071% { transform: scaleY(1.06); } 58.214% { transform: scaleY(1.06); } 62.5% { transform: scaleY(0.5); } 66.786% { transform: scaleY(0.5); } 70.357% { transform: scaleY(1.06); } 100.0% { transform: scaleY(1.06); } }
@keyframes nextSlatShade { 0.0% { opacity: 0.0; } 1.071% { opacity: 0.0; } 5.357% { opacity: 0.08; } 9.643% { opacity: 0.08; } 13.214% { opacity: 0.0; } 15.357% { opacity: 0.0; } 19.643% { opacity: 0.08; } 23.929% { opacity: 0.08; } 27.5% { opacity: 0.0; } 29.643% { opacity: 0.0; } 33.929% { opacity: 0.08; } 38.214% { opacity: 0.08; } 41.786% { opacity: 0.0; } 43.929% { opacity: 0.0; } 48.214% { opacity: 0.08; } 52.5% { opacity: 0.08; } 56.071% { opacity: 0.0; } 58.214% { opacity: 0.0; } 62.5% { opacity: 0.08; } 66.786% { opacity: 0.08; } 70.357% { opacity: 0.0; } 100.0% { opacity: 0.0; } }
/* 뒤의 그림자 · 물음표: 흐림 · 크기 변화 없이 살이 닫힌 순간에 딱 바뀜 */
html.next-c.blind-b .col-next__shadows { z-index: 1; filter: blur(.6px); }
html.next-c.blind-b .col-next__brush { z-index: 2; }
html.next-c.blind-b .col-next__shadows i { animation: nextShadowStep 14s linear infinite; animation-delay: calc(var(--i) * 2s); filter: none; scale: 1; }
@keyframes nextShadowStep { 0%, 14.27% { opacity: 1; } 14.29%, 100% { opacity: 0; } }
html.next-c.blind-b .col-next__qmark { animation: nextQstep 14s linear infinite; filter: none; }
@keyframes nextQstep { 0%, 71.41% { opacity: 0; } 71.43%, 99.98% { opacity: 1; } 100% { opacity: 0; } }
html.is-reduced.next-c.blind-b .col-next__blind b { animation: none; transform: scaleY(.5); }
html.is-reduced.next-c.blind-b .col-next__blind b::after { animation: none; opacity: .08; }

/* 10-16 사장님 「물음표는 블라인드 안에 들어가지 않고 앞으로」: 물음표 층을 살 위로(z 4), 흐림 → 또렷으로 떠오름(nextQ2) */
html.next-c.blind-b .col-next__brush { z-index: 4; }
html.next-c.blind-b .col-next__qmark { animation: nextQ2 14s cubic-bezier(.45, .05, .55, .95) infinite; }
/* 10-16 점검: 동작 줄이기 — 위 blind-b 규칙이 is-reduced 규칙과 무게가 같고 뒤에 있어 그림자 · 물음표가 계속 돌던 것 → 더 무겁게 · 맨 뒤에.
   그림자는 첫 장(토너)만 멈춰 보이고 물음표도 멈춘 채 보임. 셋이 함께 멈추니 동작을 다시 켜면 살 · 그림자 · 물음표가 같이 0초부터(박자 어긋남 0) */
html.is-reduced.next-c.blind-b .col-next__shadows i { animation: none; opacity: 0; }
html.is-reduced.next-c.blind-b .col-next__shadows i:first-child { opacity: 1; }
html.is-reduced.next-c.blind-b .col-next__qmark { animation: none; opacity: 1; filter: none; }

/* 10-16 3차: 한지 결 = 고정 낮 층 안(.sky__day > .sky__hanji, js/fx/sky.js가 「다음 달」 ~ 저널 끝이 화면 가운데를 지나는 동안 .is-on) — 자리에 경계선 0, 0.9초 서서히 */
.sky__hanji { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease-tide, ease);
  background: url('../assets/fx/journal_hanji_d.webp') 0 0 / 1200px 1200px repeat; }
.sky__hanji.is-on { opacity: 1; }
html.is-reduced .sky__hanji { transition: none; }
@media (max-width: 767px) { .sky__hanji { background-image: url('../assets/fx/journal_hanji_m.webp'); background-size: 600px 600px; } }