/* =========================================================================
   DALYUL — motion.css (WP-07)
   리빌 사전 상태 · split 래퍼 · K6 명암선 색 · failsafe · reduced-motion 리빌 규칙
   TECH §6-3(FOUC 방지) · §6-5 · §6-6. 텍스트에 filter 0(I4 이미지만 JS가 blur).
   ========================================================================= */

/* ---------- 1. 사전 상태(FOUC 방지) ----------
   JS가 켜졌고 reveal.prepare()가 아직이면 [data-rv]를 숨긴다. prepare가 사전 상태(마스크 아래·투명)를 건 뒤
   html.rv-ready를 붙이면 이 규칙이 풀린다(같은 프레임).
   모듈이 통째로 실패해도 6s 뒤에는 CSS 애니메이션만으로 보인다(JS failsafe는 prepare 시작 후 4s → html.rv-failsafe). */
html.js:not(.rv-ready) [data-rv] {
  visibility: hidden;
  animation: rv-css-failsafe 0s linear 6s forwards;
}
@keyframes rv-css-failsafe { to { visibility: visible; } }

/* JS failsafe: 전부 보이게(사전 상태 무시) */
html.rv-failsafe [data-rv],
html.rv-failsafe [data-rv] .rv-line,
html.rv-failsafe [data-rv] .rv-word,
html.rv-failsafe [data-rv] .rv-char {
  visibility: visible !important;
  opacity: 1 !important;
}
html.rv-failsafe [data-rv] .rv-line,
html.rv-failsafe [data-rv] .rv-word,
html.rv-failsafe [data-rv] .rv-char { transform: none !important; }

/* ---------- 2. split 래퍼 ----------
   SplitText 3.13이 인라인으로 display·position을 준다. 여기서는 마스크의 잘림 상자만 넓힌다.
   overflow:clip 대신 clip-path inset(음수): 행간 0.95인 디스플레이에서도 받침·디센더·back 오버슈트가 잘리지 않고
   레이아웃은 그대로다. 값은 reveal.js CLIP_T / CLIP_B와 같아야 한다(상승 시작 거리 계산). */
.rv-mask {
  clip-path: inset(-0.30em -0.18em -0.34em -0.18em);
}
.rv-word, .rv-char { display: inline-block; }
.rv-line { display: block; }
/* 분할된 조각은 줄바꿈 규칙을 부모에서 상속(KO keep-all: 어절 = inline-block 단어라 어절 중간 줄바꿈 0) */
[data-rv-split] { font-kerning: normal; }

/* I1 스크램블: 진행 중 폭·높이는 JS가 min-width/min-height(px)로 예약한다 */
[data-rv-busy] { font-variant-numeric: tabular-nums; }

/* ---------- 3. K6 명암선 독서 ----------
   --k6: 0(어둠) → 1(밝음), --k6o: 경계를 막 지난 단어의 +4% 넘침(0→1→0, 0.3s).
   0 = --dust 50% / 1 = --moonmilk 100% (DESIGN §3-공통). 넘침은 흰색 쪽으로 최대 50% 섞어 밝기 +4%. filter 없음. */
.k6-w {
  --k6-base: color-mix(in srgb, var(--moonmilk) calc(var(--k6, 1) * 100%), color-mix(in srgb, var(--dust) 50%, transparent));   /* 10-03 GPT 6번: 안 밝아진 낱말 바닥 #51(2.5:1) → 약 #72(약 4.1:1). 시작 밝기 base 0.2 그대로 */
  color: color-mix(in srgb, #fff calc(var(--k6o, 0) * 50%), var(--k6-base));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .k6-w { color: var(--moonmilk); opacity: calc(0.34 + 0.66 * var(--k6, 1)); }
}

/* ---------- 4. K2 폭 호흡 ---------- */
[data-kin="k2"] { transform-origin: 0% 50%; }

/* ---------- 5. reduced-motion ----------
   리빌은 JS가 opacity 대체로 처리한다(I1 즉시, I2·I3 200ms, I4·fade 400ms, I5 즉시). CSS는 남은 변형만 지운다. */
html.is-reduced .rv-line,
html.is-reduced .rv-word,
html.is-reduced .rv-char { transform: none !important; }
html.is-reduced .k6-w { --k6o: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .k6-w { --k6o: 0; }
}

/* noscript(무 JS)일 때는 index.html의 <noscript><style>이 [data-rv]를 보이게 한다 */

/* ---------- 6. 헤더 가드 v3(OR3 M-54 · R3-5, 계약 1-2) ----------
   reveal.js headerGuard()가 헤더 띠 근처의 노드에만 data-hg-on(exit|line) + 변수를 쓴다. data-hg(퍼블리셔 분류 표시)는 모양에 쓰지 않는다.
   exit: 균일 마스크(= 불투명도 1 − k, 요소 opacity와 곱해짐) + 위로 24px. 자르지 않는다(마스크 층을 상자보다 크게 깔아 오버슈트·받침 그대로).
   line: 헤더 아래 선 위쪽은 투명, 아래로 72px 동안 차오르는 마스크(본문 줄만). */
[data-hg-on] {
  -webkit-mask-size: calc(100% + 200vw) calc(100% + 200vh);
          mask-size: calc(100% + 200vw) calc(100% + 200vh);
  -webkit-mask-position: -100vw -100vh;
          mask-position: -100vw -100vh;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          mask-clip: no-clip;
}
[data-hg-on="exit"] {
  --hg-a: calc(1 - var(--hg-k, 0));
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, var(--hg-a)), rgba(0, 0, 0, var(--hg-a)));
          mask-image: linear-gradient(rgba(0, 0, 0, var(--hg-a)), rgba(0, 0, 0, var(--hg-a)));
  translate: 0 calc(var(--hg-k, 0) * -24px);
}
/* hold: 고정 무대가 떠날 때 헤더 가까이 쉬던 요소 — 무대가 올라간 만큼(--hg-hold) 되돌려 제자리에 붙잡은 채 통째 퇴장 */
[data-hg-on="hold"] {
  --hg-a: calc(1 - var(--hg-k, 0));
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, var(--hg-a)), rgba(0, 0, 0, var(--hg-a)));
          mask-image: linear-gradient(rgba(0, 0, 0, var(--hg-a)), rgba(0, 0, 0, var(--hg-a)));
  translate: 0 calc(var(--hg-hold, 0px) - var(--hg-k, 0) * 24px);
}
[data-hg-on="line"] {
  --hg-y: calc(var(--hg-top, 0px) + 100vh);
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--hg-y), #000 calc(var(--hg-y) + 72px));
          mask-image: linear-gradient(to bottom, transparent var(--hg-y), #000 calc(var(--hg-y) + 72px));
}

/* ---------- 6. OR1 M-22: 핀 장면 제자리 진입 ----------
   .scene--overlap(장면 모듈 prepare가 붙임, 지금 S07)은 앞 장면의 마지막 한 화면과 겹친다. 앞 장면 핀이 끝나는 순간 이 무대가
   바로 핀되므로 '아래에서 밀려 올라오는 무대'가 없다. 겹치는 동안 이 무대는 비어 있고 투명하다(글은 핀된 뒤에만 리빌).
   reduced·no-js는 핀이 없으므로 겹치지 않는다. */
html:not(.is-reduced):not(.no-js) .scene--pin.scene--overlap { margin-top: -100svh; }
/* FOCUS R2 M2-05(F7): S04 → S05 이음매 0.3H 당김 — S05 무대가 S04 마지막 화면의 아래 30%와 겹쳐 들어온다(「먼저, 검은 달.」이 S04 끝에서 오르고
   궤도 도식이 위로 다 빠지기 전에 검은 달 무대가 이미 자리 — 빈 밤 0). 두 무대 모두 투명 · 글 자리가 위/아래로 나뉘어 겹침 0 */
@media (min-width: 768px) { html:not(.is-reduced):not(.no-js) .scene--pin.scene--pull3 { margin-top: -30svh; } }   /* 휴대폰은 S04 글이 위에 남아 글 덩어리 3개가 되어 뺌 */
/* FOCUS R2 M2-05(F7): 휴대폰 히어로 직후 빈 밤 — S02 무대를 0.2H 당겨 첫 줄이 더 일찍 오른다(S01 끝 화면은 글이 이미 빠진 빈 하늘) */
@media (max-width: 767px) { html:not(.is-reduced):not(.no-js) .scene--pin.scene--pull2m { margin-top: -20svh; } }
/* FOCUS R3 M3-05(F19): 데스크톱 S01 → S02 — S02 무대를 0.3H 당긴다(히어로 끝 큰 달만 남는 6장 → 달이 오른쪽으로 옮겨 가는 동안 첫 줄이 오른다) */
@media (min-width: 768px) { html:not(.is-reduced):not(.no-js) .scene--pin.scene--pull2d { margin-top: -30svh; } }

/* ---------- 7. OR3 M-53 · R3-1: 컬렉션 고정 바탕 무대 ----------
   색 면은 .col-ground 한 장(퍼블리셔 sections.css, position: fixed)이 그리고 s09가 변수로 구동한다 → 띠의 겹침·페더·렌즈 마스크는 없앴다.
   따라오는 표지 「● 01 만월」: s09가 .is-on / .is-off를 쓴다. .is-off는 헤더의 [data-on](바탕 판정)보다 이긴다
   (맺음 띠 top이 화면 50%를 지나면 바탕과 상관없이 퇴장). .is-jump = goto·해시·복원 점프 직후 2프레임 전환 0(즉시). */
.col-tag.is-off .col-tag__inner { clip-path: inset(100% 0 0 0) !important; }
.col-tag.is-jump .col-tag__inner { transition: none !important; }
/* 맺음 표시: 두 달이 겹치는 순간 1px 빛 테 0.6s(S05 링의 작은 되풀이) — reveal.merge가 .is-ring을 붙였다 뗀다 */
.col-close__mark::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(237, 239, 242, .85), 0 0 14px 1px rgba(214, 226, 255, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-out;
}
.col-close__mark.is-ring::after { opacity: 1; transition: opacity .12s ease-out; }

/* ---------- 8. OR3 M-57 · R3-9 · 계약 1-4: 살아 있는 종이 '낮의 빛' ----------
   .paper-light(퍼블리셔 요소, main 첫 자식) = 화면에 고정된 빛 결 2장. 위치가 아니라 빛이 움직인다(어지러움 0):
   큰 타원 빛 결이 40초 주기로 왼쪽 → 오른쪽 한 방향으로 흐른다(두 장이 20초 어긋남), 밝기 +2~3%(따뜻한 흰빛),
   블루노이즈 디더 3%(assets/fx/bluenoise_64.png — 8비트 동심원 띠 0). 바탕 무대(.col-ground)보다 아래라 색 면 위에는 보이지 않는다.
   불투명도(--pl, 0..1)는 sky.js가 '종이가 화면을 덮은 정도'로 쓴다. 동작 줄이기·QA 정지·?freeze = 멈춘 한 장. */
.paper-light {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--pl, 0);
  contain: strict;
}
/* FINAL F-13: CSS 방사 그라데이션 빛 결(8비트 동심원 띠) → F-06이 미리 구운 종이 텍스처로 교체.
   텍스처는 낮 레이어 안(.sky__paper, sky.js)과 컬렉션 실버 면(.cg--light, s09)에 깐다. 이 층(.paper-light)은 비워 둔다(변수 계약만 유지) */
.paper-light::before, .paper-light::after, .paper-light__dither { display: none; }

/* 종이 빛 결 한 장: 2048px 타일(휴대폰 1024px, 이음 없는 원환 타일)을 40초에 한 타일 오른쪽 → 왼쪽으로 흘린다(위치만, 51px/s).
   텍스처 바탕 = #F6F6F2(10-15 전 옛 --paper 값으로 구운 그림 — 지금 --paper는 #F6F6F6). 지금 겹치는 법은 162줄(흑백 · 밝기 .955 · 불투명도 .70 → 평균 #ECECEC = --morning),
   빛 결 진폭 ±2~3%, 코팅지 결 ±0.7/255(보통 화면에서 보이지 않음). 동작 줄이기·QA·정지 = 멈춘 한 장 */
.sky__paper, .cg--light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.sky__paper { opacity: .70; filter: grayscale(1) brightness(.955); }   /* 26-10-15 아침 바탕 #ECECEC(사장님 지정): 텍스처(바탕 #F6F6F2, 따뜻한 흰빛)를 색 없이 · 평균 #ECECEC 로 눌러(텍스처 밝기 평균 247 × .955 = 236) 빛 결만 남김 — 안 누르면 0.7 겹쳐 #F3F3EF(더 밝고 누런) 로 보임 */      /* FOCUS R2 M2-06(F12): 07:00 종이 빛 결 진폭 상향(.45 → .58) — 3초 정지 화소 변화 ≥ 3% */
.sky__paper::before, .cg--light::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% + 2048px);
  height: 100%;
  background: url('../assets/fx/paper_light.webp') 0 0 / 2048px 2048px repeat;
  animation: dl-paper-tile 22s linear infinite;       /* FOCUS R2: 40 → 22초(빛 결만 흐름 — 위치 이동 0) */
  will-change: transform;
}
@keyframes dl-paper-tile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-2048px, 0, 0); }
}
@keyframes dl-paper-tile-m {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1024px, 0, 0); }
}
@media (max-width: 767px) {
  .sky__paper::before, .cg--light::before {
    width: calc(100% + 1024px);
    background-image: url('../assets/fx/paper_light_m.webp');
    background-size: 1024px 1024px;
    animation-name: dl-paper-tile-m;
  }
}
/* 실버 면(성분·달빛향 — 병이 다 비켜 난 뒤에만, s09가 .is-on): 같은 결을 옅게(실버 밝기 +1.5%) */
.cg--light { opacity: 0; transition: opacity .6s linear; }
.cg--light.is-on { opacity: .14; }
.cg--light { filter: grayscale(1); }   /* 26-10-15: 실버가 푸른 회색(#D6D9DE)이 되어 따뜻한 텍스처 기운을 뺌 */
html.is-reduced .cg--light { display: none; }
html.is-reduced .sky__paper::before, .sky__paper.is-still::before,
html.is-reduced .cg--light::before, .col-ground.is-still .cg--light::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .sky__paper::before, html:not(.motion-full) .cg--light::before { animation-play-state: paused; }
}

/* 성분 가운뎃점 = 세럼의 검은 달: 초승이 20초에 걸쳐 천천히 옮겨 간다(회전 = 위상 각 이동, 크기·위치 그대로) */
.ing__moon { animation: dl-ing-phase 20s ease-in-out infinite alternate; }
@keyframes dl-ing-phase { from { rotate: -22deg; } to { rotate: 26deg; } }
html.is-reduced .ing__moon { animation: none; }

/* OR3 M-59 → FOCUS R3 M3-01: 커서 태양 점(#cursor, 퍼블리셔 cursor.js)은 히어로에서만 — 그 밖에서는 cursor.js가 html.cursor-sun을 켠 곳
   (제품 칸 전체 [data-cursor="detail"] · 캡 · 열린 목차)에서만. :hover 판정은 쓰지 않는다 — 칸 전체 누름 층(::before)이 사진 위를 덮으면
   [data-cap]:hover가 꺼지기 때문(FOCUS_R3 F14 함정). 모양 · 색 규칙은 그대로(커서 모양 보류) */
html:not(.sun-hero):not(.cursor-sun):not(.menu-open) #cursor { opacity: 0 !important; }
html.cursor-sun:not(.sun-hero) [data-sun-zone]:not([data-scene="S01"]),
html.cursor-sun:not(.sun-hero) [data-sun-zone]:not([data-scene="S01"]) :not(a, button, input, label, summary, a *, button *) { cursor: auto; }

/* ---------- 9. FINAL F-02: 컬렉션 박자 다시 짜기 ----------
   ⓑ 성분 띠는 병 퇴장과 15~20% 겹쳐 달빛 세럼 바로 아래에서 올라온다 — 띠를 핀 무대 끝에 겹쳐 둔다(무대가 아직 붙어 있는 동안 들어옴).
      띠의 글은 차이 블렌드라 조상에 마스크·불투명도·변형을 두지 않는다(여백만).
   ⓒ 성분 → 달빛향은 실버 한 바탕(세로 경계 열림 삭제 — 퍼블리셔 F-05와 같은 결론: 먹색 제목, 블렌드 0). 두 색 은유는 제목 양옆
      같은 기준선의 검은 달·흰 달 두 개로만(휴대폰도 양옆 — 아래 규칙). 동작 줄이기에서도 달빛향 바탕 = 실버 한 색.
   ⓓ 달빛향 글은 흰 달이 화면 46% → 30%를 지나는 동안 색 알파(--sxa, s09)로 퇴장 → 그 뒤 흰 달 자리에서 밤 원이 열린다.
      맺음 띠는 밤 원이 화면을 다 덮은 뒤 들어오도록 위 여백을 둔다. */
html:not(.is-reduced):not(.no-js) .collections .col-body .col-ing { margin-top: calc(-15svh - 96px); }
@media (max-width: 767px) {
  html:not(.is-reduced):not(.no-js) .collections .col-body .col-ing { margin-top: calc(-15svh - 40px); }
}
.collections .col-body .col-scent :is(.scent__label, .scent__word, .scent__body, .scent__mood) { color: color-mix(in srgb, var(--ink) calc(var(--sxa, 1) * 100%), transparent); }
/* 휴대폰 점검 M6 ③: 달빛향 글은 지금 달빛색(sections.css .sweep--body .col-scent) — 동작 줄이기도 움직임 판처럼 바잘트 위(실버 · 종이 위 흐린 글 0). 옛 줄: [data-cg="scent"] .cg--basalt { opacity: 0 } */
@media (max-width: 767px) {
  /* 휴대폰: 두 달이 제목 양옆 같은 기준선(위에 따로 줄을 두지 않는다) */
  .collections .col-body .col-scent {
    --sc-fs: calc(16vw * var(--fs-scale));
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "label label label"
      "capb  word  capw"
      "text  text  text";
  }
  :root:lang(ja) .collections .col-body .col-scent, :root:lang(en) .collections .col-body .col-scent { --sc-fs: calc(11vw * var(--fs-scale)); }
  .collections .col-body .col-scent .scent__cap { width: 10vw; height: 10vw; margin: 0 !important; align-self: center; }
  .collections .col-body .col-scent .scent__half--a .scent__cap { justify-self: end !important; margin-right: 12px !important; }
  .collections .col-body .col-scent .scent__half--b .scent__cap { justify-self: start !important; margin-left: 12px !important; }
}
html:not(.is-reduced):not(.no-js) .collections .col-body .col-close { margin-top: var(--close-gap, 18svh); }
@media (max-width: 767px) {
  html:not(.is-reduced):not(.no-js) .collections .col-body .col-close { margin-top: var(--close-gap-m, 8svh); }
}

/* ---------- 10. 컬렉션 전환 「해 질 녘」 층(s09-eclipse.js, 2026-10-03 — 예전 월식 원 · 흰 테 · 크림 뚜껑 그늘 층은 지움) ----------
   두 병 핀 안: 밤(.s9-night)이 화면 위에서부터 긴 그러데이션으로 내려온다(병 아래 · 바탕 위 — 무대 · 방의 맨 앞 자식) → 두 병이 함께 저묾 →
   밤 속 성분(#ingredients를 그대로 옮긴 .is-night 층) → ●가 흰 크림 달로 차오름 → 크림 띠.
   층은 모두 화면 고정 · 누름 0 · 낭독 0(성분 글은 원래 요소 그대로라 낭독됨). 그러데이션 = 인라인 mask(경계 폭 0.7H). 원 · 선 · 그림자 0. */
.s9-layer { position: fixed; inset: 0; pointer-events: none; }
.s9-layer.s9-night { z-index: auto; background: #0E0F10; visibility: visible; }   /* 휴대폰 방은 칸 묶음이 숨어도(s9-panels-off) 밤은 남는다. html.s9-night(상태 표시)과 구별 — 층에만 */
.collections:has(.col-ground:is([data-cg="none"], [data-cg="next"])) .s9-layer.s9-night { visibility: hidden !important; }
html:not(.is-reduced):not(.no-js) .collections #ingredients.is-night {
  position: fixed; inset: 0; z-index: 22;
  margin: 0 !important; padding: 0 !important;
  display: block; visibility: hidden; pointer-events: none;
  -webkit-mask-image: none !important; mask-image: none !important;
  --ing-ink: #EDEFF2; color: #EDEFF2;
}
html:not(.is-reduced):not(.no-js) .collections #ingredients.is-night.is-on { visibility: visible; }
#ingredients.is-night .col-ing__group { position: absolute; left: 0; top: 0; }
#ingredients.is-night :is(.ing__word) { color: #EDEFF2; }
/* 성분 띠 글씨 단계(CONSULT_성분띠_정렬서체 3절 + 사장님 「두 가지」 더 가늘게): 단어 흰 600 · 「밤에만」 흰 500 · 제목 300 .68 · 영어 이름표 300 .54 */
#ingredients.is-night .col-ing__label { color: rgba(237, 239, 242, .68); }
#ingredients.is-night .ing__label { color: rgba(237, 239, 242, .32); }   /* 사장님 26-10-03: 영어 이름표는 꾸밈 요소 — 더 어둡게(.54 → .32, 읽기용 아님 · aria-hidden) */
#ingredients.is-night .ing__usage { color: #EDEFF2; }
#ingredients.is-night .ing__moon { visibility: hidden; animation: none; }
#ingredients.is-night .s9-g { display: inline-block; will-change: transform, opacity; }
.s9-dot { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; transform-origin: 50% 50%; }
.s9-dot__cream { position: absolute; inset: 0; border-radius: 50%; background: #D9D9D4 no-repeat; }
.s9-dot__black { position: absolute; inset: 0; border-radius: 50%; background: url('../assets/moon/sprite_black_lift.webp') center / contain no-repeat, url('../assets/moon/sprite_black.webp') center / contain no-repeat; }   /* A3-02 5% 밝힌 사본(없으면 원본) */
/* (5% 밝힘은 사본 sprite_black_lift.webp가 맡는다 — 덧칠 층 0) */
.s9-dot__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* u ≥ 0.90: 칸 숨김(밤이 화면을 다 덮은 뒤) · 휴대폰 교체가 끝나면 세럼 칸 숨김 */
html.s9-panels-off .collections .sweep-iris__panel .products { visibility: hidden; }
html.s9-mswap-done .collections .product--serum { visibility: hidden; }
/* 크림 띠는 두 병 무대(데스크톱 핀 · 휴대폰 크림 방)의 마지막 화면에 겹쳐 시작한다 — ● 차오름 끝 = 크림 띠 핀 시작(빈 바탕 0) */
html:not(.is-reduced):not(.no-js) .collections .sweep--body > #cream-texture { margin-top: -100svh; }
@media (max-width: 767px) {
  /* 휴대폰 방: 세럼 = 한 화면 + 머무름 0.9H + 교체 0.52H, 크림 = 한 화면 + 0.9H + 성분 0.80H + 머묾 0.40H + 단어 퇴장 0.20H + 차오름 0.22H + 여유 0.06H */
  html:not(.is-reduced):not(.no-js) .collections .product-room--serum { height: 242svh; }
  /* 크림 방은 교체 u 0.62에 화면 아래로 들어와 캡(방 위 끝 + 약 82px)이 u 0.80에 보이기 시작한다 — 검은 바탕만 있는 칸 ≤ 1장(실측) */
  html:not(.is-reduced):not(.no-js) .collections .product-room--cream { height: 358svh; margin-top: -20svh; }
}

/* FOCUS R3 M3-01: 칸에 걸던 명암 경계 호 마스크(--arc-m, 호 ①②)는 월식으로 바뀌어 쓰지 않는다 — 퍼블리셔 colground가 아직 값을 쓰더라도 칸은 잘리지 않게
   (sections.css 979의 같은 규칙보다 구체적 · !important). 퍼블리셔가 규칙을 지우면 이 줄은 아무 일도 하지 않는다 */
html:not(.is-reduced):not(.no-js) body .collections .sweep-iris .product { -webkit-mask-image: none !important; mask-image: none !important; }
/* 병 묶음 배율은 'none'이어야 한다 — scale: 1이라도 값이 있으면 고정(fixed) 자식의 기준 상자가 되어 휴대폰 교체 원(.s9-ecl--m1, 세럼 방 안)이 화면이 아니라
   묶음 상자에 붙는다(실측: 원이 y −1207 · 높이 4726). 1배 초과 0 규칙은 그대로 */
html:not(.is-reduced):not(.no-js) body .collections .sweep-iris .products { scale: none !important; }

/* FOCUS R3 M3-02: S09 꼬리 바탕 층(s09-collections가 .col-ground 안에 넣는 .cg--tail). 바잘트(크림 퇴장 B · 달빛향) → 밤(맺음 띠, 같은 자리에서 0.4H).
   바탕 무대(.col-ground)의 새벽 호 마스크를 그대로 받아 종이 복귀와 같은 호로 지워진다. 동작 줄이기 = 0(퍼블리셔 [data-cg] 교차) */
.col-ground .cg--tail { z-index: 2; background: #161A24; visibility: hidden; }
.col-ground .cg--tail.is-on { visibility: inherit; }
html.is-reduced .col-ground .cg--tail { display: none; }

/* FOCUS R3 M3-03(F16): 머무는 화면 생동 — 위상 숨결 변수(s09-collections가 시간 기반으로 씀: --scent-ph 9초 · --next-ph 7초, 검수 · 정지 · 동작 줄이기 = 0.5 고정).
   ⓐ 달빛향 두 달: 흰 달 = 오른쪽 가장자리 그늘이 지름 0 → 24% 사이로 차고 기움, 검은 달 = 오른쪽 초승이 가늘어졌다 굵어짐(반대 위상).
      그늘은 원 안에서만(원 밖 0) · 블러 · 글로우 0 */
html:not(.is-reduced):not(.no-js) .collections .col-scent .scent__cap { position: relative; }
html:not(.is-reduced):not(.no-js) .collections .col-scent .scent__cap::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
html:not(.is-reduced):not(.no-js) .collections .col-scent .scent__half--b .scent__cap::after {
  background: radial-gradient(circle at calc(-26% + var(--scent-ph, .5) * 24%) 50%, transparent 0 75.5%, rgb(16 17 18 / .62) 76.5%);
}
html:not(.is-reduced):not(.no-js) .collections .col-scent .scent__half--a .scent__cap::after {
  background: radial-gradient(circle at calc(-24% - var(--scent-ph, .5) * 8%) 50%, transparent 0 75.5%, rgb(12 13 14 / .78) 76.5%);
}
/* FINAL R1 A2(아트디렉터 공동결정): 두 달 캡 밝기 숨결 --sc-br 0.94~1.06(s09가 9초 사인 · 반 주기 엇갈림으로 씀, 연기 · 검수 · 정지 = 1).
   연기 규칙(sections.css 1042행 blur)과 같은 세기 + 뒤에 읽히므로 이 두 줄이 캡의 filter를 정한다 — 연기 중에는 blur 뒤에 brightness를 이어 붙임 */
html:not(.is-reduced):not(.no-js) .collections .col-body .col-scent .scent__cap { filter: brightness(var(--sc-br, 1)); }
html:not(.is-reduced):not(.no-js) .collections .col-body .col-scent[data-smoke] .scent__cap { filter: blur(var(--sm-b, 0px)) brightness(var(--sc-br, 1)); }
/* ⓑ COLLECTION 02 원: 안쪽 초승(먹 6%)이 7초 주기로 지름의 40%를 지나간다(12초 → 7초, 이동 12% → 40%) */
html:not(.is-reduced):not(.no-js) .collections .col-next__new::before { animation: dlNext7 7s cubic-bezier(.37, 0, .63, 1) infinite; }
@keyframes dlNext7 { 0%, 100% { --nb: -12%; opacity: .75; } 50% { --nb: 28%; opacity: 1; } }

/* FOCUS R3 M3-04(F18): 동작 줄이기 K7 정지 배치 — 세 줄은 띠 위 어두운 하늘(화면 위 18~42%)에, 오로라 밝은 핵은 화면 아래 55% 아래(webgl W3-04).
   글 뒤 어둠 막 · 그림자 0(판 문법 0) — 자리 나눔으로 대비를 얻는다 */
html.is-reduced .aurora .k7 { justify-content: flex-start; padding-top: 18svh; }