/* =========================================================================
   DALYUL — components.css (WP-02)
   헤더 · K9 레일 · '밤의 목차' 메뉴 · 버튼(원형 차오름) · 토글 · 폼 · 커서 · 로더 · 제품 오버레이 · 건너뛰기
   JS가 붙이는 상태 훅은 docs/build/WP-02.md "상태 훅" 표 참고
   ========================================================================= */

/* ---------- 공용 SVG 심볼 컨테이너 ---------- */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 건너뛰기 (z90) ---------- */
/* 26-10-03 지피티 의견 2번 '보이지 않는 보강': 키보드로 처음 누를 때만 셋이 한 줄로 나타난다(본문 · 제품 · 출시 알림).
   「제품」 = 메뉴 「제품」과 같은 두 병 착지(header.js navigate · land 'products'). 초점이 떠나면 다시 화면 밖 — 평소 화면 변화 0 */
#skip {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  z-index: var(--z-skip);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-width: calc(100vw - 2 * var(--s-4));
  translate: 0 calc(-100% - 40px);
}
#skip:focus-within { translate: 0 0; }
/* 10-03 뒷정리(서하 눈): 주황 규칙에 맞춰 꽉 찬 주황 면 → 먹 면 + 우유빛 글자(약 17:1) + 가는 테. 주황은 초점 고리(2px, 먹 면 안쪽 = 늘 먹 위 약 6:1)만.
   셋 모두 같은 모양(「출시 알림」 건너뛰기도 단추가 아니라 같은 말씨) */
.skip__link {
  padding: 12px 18px;
  background: var(--umbra-2);
  color: var(--moonmilk);
  box-shadow: inset 0 0 0 1px rgba(237, 239, 242, .22);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.skip__link:focus, .skip__link:focus-visible { outline: 2px solid var(--sun); outline-offset: -2px; }
.noscript-note {
  position: relative;
  z-index: var(--z-skip);
  padding: 12px var(--margin);
  background: var(--umbra-2);
  color: var(--dust);
}

/* =====================================================================
   버튼 — 모서리 0, 플랫. 호버 = '달 차오름' 원형 채움(버튼 왼쪽 끝 중심)
   ===================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border-radius: 0;
  font-family: var(--ff-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color var(--d-xs) linear, background-color var(--d-m) linear;
}
:root:lang(en) .btn { font-stretch: 105%; letter-spacing: .01em; }
.btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  scale: 0;
  z-index: -1;
  background: var(--btn-fill, var(--moonmilk));
  transition: scale var(--d-s) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::before { scale: 1; }
}
.btn:active::before { scale: 1; }
.btn--sun { background: var(--sun); color: var(--umbra); --btn-fill: var(--moonmilk); }
.btn--ink { background: var(--ink); color: var(--moonmilk); --btn-fill: #2A2D30; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 24px; font-size: 16px; }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; }

/* 출시 전/후 전환 (html.is-launched = CONFIG.launched) */
html:not(.is-launched) [data-launch="post"] { display: none !important; }
html.is-launched [data-launch="pre"] { display: none !important; }

/* ---------- 토글(SOUND · MOTION) · 언어 ---------- */
.toggle, .lang__btn {
  position: relative;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 10px 0;
  color: inherit;
  white-space: nowrap;
}
.toggle { padding-left: 12px; }
.toggle::before {                    /* 켜짐 = 왼쪽 6px --sun 점 */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--sun);
  scale: 0;
  transition: scale var(--d-s) var(--ease-out);
}
.toggle[aria-pressed="true"]::before { scale: 1; }
.toggle:not([aria-pressed="true"]) { opacity: .7; }
.toggle:hover { opacity: 1; }
.lang { display: inline-flex; align-items: center; column-gap: 6px; }
.lang__sep { font-family: var(--ff-mono); font-size: 12px; opacity: .45; }
.lang__btn[aria-pressed="false"] { opacity: .45; }
.lang__btn:hover { opacity: 1; }

/* ---------- 언어 고르기 = 유리 알약(FIX_B1 '언어 고르기 = 유리 단추', 오너 2026-10-03 「아이폰 리퀴드 글래스처럼, 배경에 따라 비치고」 → ㉮ 세 칸 알약) ----------
   KO · EN · JA 셋이 늘 보이는 유리 알약 하나 + 고른 칸에 더 밝은 유리 방울(.lg__drop). 칸 폭 고정 → 언어를 바꿔도 알약 크기 같음.
   머리글 36 높이 · 칸 40 · 안쪽 여백 3(126×36) / 손가락 기기 40 · 44 / 휴대폰 메뉴 · 바닥글 44 · 52 · 글자 13(162×44).
   유리 = 흐림 6 + 채도 + 밝기(뒤 바탕이 비친다) · 왼쪽 위가 밝은 가는 빛 테 · 크롬 계열 머리글만 가장자리 굴절(js/ui/lang-glass.js 변위 지도).
   바탕: 밤 · 짙은 바탕 = 어두운 유리(기본), 종이 · 은색 · 크림 영상 = 밝은 유리(data-tone="light" — lang-glass.js가 header.js 글자색을 보고 붙인다, 잉크 사본은 늘 밝은 유리).
   대비(3배 실측, 가장 약한 곳): 고른 칸 8.8 · 고르지 않은 칸 8.4 — 흐림이 없어도(가림막 · 미지원) 유리 면 + 방울만으로 4.5 이상.
   빛깔 전환: 색 토큰을 @property로 등록해 층마다(::before · ::after · 방울 · 글자) 0.4초에 같이 바뀐다(.hdr__lang의 인라인 전환을 건드리지 않게). ㉯(한 칸 → 펼침)는 문서에만 */
@property --lg-t1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-t2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-t3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-rim-a { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-rim-b { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-rim-c { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-d1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-d2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lg-dim { syntax: '<percentage>'; inherits: true; initial-value: 88%; }
@property --lg-a { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.lg {
  --lg-h: 36px;
  --lg-pad: 3px;
  --lg-cell: 40px;
  /* 밤 · 짙은 바탕(어두운 유리) */
  --lg-t1: rgba(255, 255, 255, .11);
  --lg-t2: rgba(255, 255, 255, .035);
  --lg-t3: rgba(255, 255, 255, .06);
  --lg-bf: blur(6px) saturate(1.7) brightness(1.08);
  --lg-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --lg-rim-a: rgba(255, 255, 255, .62);
  --lg-rim-b: rgba(255, 255, 255, .16);
  --lg-rim-c: rgba(255, 255, 255, .26);
  --lg-d1: rgba(255, 255, 255, .24);
  --lg-d2: rgba(255, 255, 255, .12);
  --lg-dshadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 2px 8px -2px rgba(0, 0, 0, .45);
  --lg-dim: 88%;                        /* FINAL_CHECK_R1 P3: 어두운 유리의 고르지 않은 언어 0.74 → 0.88(대비 4.5 근처). 고른 칸 · 유리 모양 그대로 */
  position: relative;
  height: var(--lg-h);
  padding: 0 var(--lg-pad);
  border-radius: 999px;
  column-gap: 0;
  isolation: isolate;
  contain: layout style;
}
/* 종이 · 은색 · 크림 영상(밝은 유리). 처음 .52/.26/.34는 플라스틱처럼 막혀 보여 낮췄다 — 크림 영상 뒤 푸른 회색이 비친다 */
.lg[data-tone="light"], .hdr--day .lg {
  --lg-t1: rgba(255, 255, 255, .36);
  --lg-t2: rgba(255, 255, 255, .14);
  --lg-t3: rgba(255, 255, 255, .22);
  --lg-bf: blur(6px) saturate(1.6) brightness(1.03);
  --lg-shadow: 0 8px 20px -10px rgba(20, 22, 24, .28), inset 0 0 0 1px rgba(20, 22, 24, .06);
  --lg-rim-a: rgba(255, 255, 255, .95);
  --lg-rim-b: rgba(255, 255, 255, .5);
  --lg-rim-c: rgba(255, 255, 255, .7);
  --lg-d1: rgba(255, 255, 255, .96);
  --lg-d2: rgba(255, 255, 255, .80);
  --lg-dshadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(20, 22, 24, .14), 0 3px 10px -3px rgba(20, 22, 24, .22);
  --lg-dim: 80%;
}
.lg .lang__sep { display: none; }
.lg .lang__btn {
  --lg-a: 100%;
  position: relative;
  z-index: 1;
  width: var(--lg-cell);
  height: calc(var(--lg-h) - 2 * var(--lg-pad));
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .06em;
  background-image: none;              /* 공통 1px 밑줄(아래 ⓒ)은 유리 안에서는 끈다 */
  opacity: 1;
  color: color-mix(in srgb, currentColor var(--lg-a), transparent);
  transition: --lg-a .26s linear .1s;  /* 방울이 닿을 즈음 글자가 밝아진다. 글자색 자체는 머리글 잉크 전환을 그대로 따른다 */
}
.lg .lang__btn[aria-pressed="false"] { --lg-a: var(--lg-dim); opacity: 1; }
.lg .lang__btn[aria-pressed="false"]:hover { --lg-a: 100%; }
.lg .lang__btn:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: -2px; }
.lg::before {                          /* 유리 몸: 위가 살짝 밝은 면 + 뒤 바탕 흐림 · 채도 + 아주 옅은 바깥 그림자 */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--lg-t1), var(--lg-t2) 60%, var(--lg-t3));
  -webkit-backdrop-filter: var(--lg-bf);
          backdrop-filter: var(--lg-bf);
  box-shadow: var(--lg-shadow);
  pointer-events: none;
  transition: --lg-t1 var(--d-m) linear, --lg-t2 var(--d-m) linear, --lg-t3 var(--d-m) linear, box-shadow var(--d-m) linear;
}
.lg::after {                           /* 가는 빛 테: 왼쪽 위 밝게 → 옆은 비고 → 오른쪽 아래 은은히 */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, var(--lg-rim-a) 0%, var(--lg-rim-b) 28%, transparent 48%, transparent 62%, var(--lg-rim-c) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --lg-rim-a var(--d-m) linear, --lg-rim-b var(--d-m) linear, --lg-rim-c var(--d-m) linear;
}
.lg__drop {                            /* 고른 언어 = 더 밝은 유리 방울. 자리 = --lg-i(lang-glass.js), 미끄러짐은 lang-glass.js가 transform 하나로(합성 단계) */
  position: absolute;
  z-index: -1;
  top: var(--lg-pad);
  left: calc(var(--lg-pad) + var(--lg-i, 0) * var(--lg-cell));
  width: var(--lg-cell);
  height: calc(var(--lg-h) - 2 * var(--lg-pad));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lg-d1), var(--lg-d2));
  box-shadow: var(--lg-dshadow);
  transform-origin: 0 50%;            /* 미끄러짐 = translateX · scaleX · scaleY(왼쪽 가운데 기준) */
  pointer-events: none;
  transition: --lg-d1 var(--d-m) linear, --lg-d2 var(--d-m) linear, scale 80ms linear;
}
.lg:has(.lang__btn[aria-pressed="true"]:active) .lg__drop { scale: .98; }
html.is-reduced .lg__drop { transition: --lg-d1 var(--d-m) linear, --lg-d2 var(--d-m) linear; }
.hdr .lg[data-halo] { text-shadow: none; }   /* 머리글 옅은 그림자는 유리 안에서는 필요 없다 */
/* 크롬 계열 머리글만: 가장자리 굴절(Safari는 url()이 들어가면 선언 전체가 무효 → 흐림까지 사라지므로 JS가 붙인 클래스로만) */
html[data-tier="2"] .lg.lg--refract::before {
  -webkit-backdrop-filter: url(#lg-refract) var(--lg-bf);
          backdrop-filter: url(#lg-refract) var(--lg-bf);
}
@media (pointer: coarse) { .lg { --lg-h: 40px; --lg-cell: 44px; } }
@media (max-width: 767px) {             /* 휴대폰 메뉴 · 바닥글(머리글 언어 고르기는 아래 .hdr__lang 규칙대로 숨김 — .lg는 display를 쓰지 않는다) */
  .lg { --lg-h: 44px; --lg-cell: 52px; }
  .lg .lang__btn { font-size: 13px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { --lg-t1: rgba(28, 30, 33, .82); --lg-t2: rgba(28, 30, 33, .82); --lg-t3: rgba(28, 30, 33, .82); }
  .lg[data-tone="light"], .hdr--day .lg { --lg-t1: rgba(247, 248, 250, .86); --lg-t2: rgba(247, 248, 250, .86); --lg-t3: rgba(247, 248, 250, .86); }   /* 10-16 컬러톤 바꿈-14(옛 rgba(250, 250, 247)) */
}
@media (prefers-reduced-transparency: reduce) {
  .lg { --lg-t1: rgba(28, 30, 33, .82); --lg-t2: rgba(28, 30, 33, .82); --lg-t3: rgba(28, 30, 33, .82); --lg-bf: none; }
  .lg[data-tone="light"], .hdr--day .lg { --lg-t1: rgba(247, 248, 250, .86); --lg-t2: rgba(247, 248, 250, .86); --lg-t3: rgba(247, 248, 250, .86); --lg-bf: none; }   /* 10-16 컬러톤 바꿈-14(옛 rgba(250, 250, 247)) */
}
@media (forced-colors: active) {
  .lg::before, .lg::after { display: none; }
  .lg { border: 1px solid CanvasText; }
  .lg__drop { background: Highlight; box-shadow: none; forced-color-adjust: none; }
  .lg .lang__btn { color: CanvasText; }
  .lg .lang__btn[aria-pressed="true"] { color: HighlightText; forced-color-adjust: none; }
}

/* =====================================================================
   헤더 (#hud header, z40) — 배경 투명, 선 없음. 잉크 전환은 #hud.is-ink
   ===================================================================== */
#hud {
  --hud-fg: var(--moonmilk);
  --focus: var(--sun);
  position: relative;
  z-index: var(--z-hud);
  color: var(--hud-fg);
}
#hud.is-ink { --hud-fg: var(--ink); --focus: var(--ink); }
.hdr {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: var(--z-hud);
  height: var(--hdr-h);
  padding: 0 var(--margin);
  display: flex;
  align-items: center;
  column-gap: var(--s-7);
  color: var(--hud-fg);
  transition: color var(--d-m) linear;
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 12px;
  height: 40px;
  color: inherit;
}
.hdr__d  { width: calc(22px * 8.805 / 10.304); height: 22px; fill: currentColor; }
.hdr__wm { width: calc(11px * 89.33 / 10.304); height: 11px; fill: currentColor; }
/* 머리글 D 속 달 2판(FIX_B1 '머리글 D 속 달(2판)', 오너 2026-10-03 「모션이 구린데」): 사진 스티커·빛 덩어리·크기 튐을 버리고
   D 안쪽 품에 딱 맞는 단색 달빛 원반 하나가 위상 한 바퀴(어둠 → 오른쪽 초승 → 보름 → 왼쪽 그믐 → 어둠)를 돈다. 자리·크기 고정.
   원반 지름 = D 안쪽 지름(7.087/10.304 = .688 dh)의 66% = .454 dh(22px D → 10.0px), 중심 = D 안쪽 원의 중심(3.653, 5.152)
   → D 획까지 틈이 위·오른쪽·아래 모두 같은 .117 dh(2.6px). 캔버스는 원반 + 사방 3px(보름의 엷은 빛 자리).
   그림·박자·색(= 곁의 D 글자색)은 header.js initLogoMoon. 원본 #sym-d는 그대로 */
.hdr__dm { --dh: 22px; position: relative; display: inline-flex; flex: none; }
.hdr__dm .hdr__d { position: relative; z-index: 1; }
.hdr__moon {
  --md: calc(var(--dh) * .454);
  position: absolute; z-index: 0;
  width: calc(var(--md) + 6px); height: calc(var(--md) + 6px);
  left: calc(var(--dh) * 3.653 / 10.304 - var(--md) / 2 - 3px);
  top: calc(var(--dh) * .5 - var(--md) / 2 - 3px);
  pointer-events: none;
}
@media (max-width: 767px) { .hdr__dm { --dh: 20px; } }
.hdr__nav ul { display: flex; column-gap: var(--s-6); }
.hdr__nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-family: var(--ff-pretendard);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1;
  color: inherit;
}
:root:lang(ja) .hdr__nav a { font-family: var(--ff-pretendard-jp); font-size: 14px; letter-spacing: 0; }
:root:lang(en) .hdr__nav a {
  font-family: var(--ff-archivo);
  font-stretch: 112%;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hdr__nav a::after {                 /* 현재 챕터 = 아래 4px --sun 점 */
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--sun);
  scale: 0;
  transition: scale var(--d-s) var(--ease-out);
}
.hdr__nav a.is-current::after, .hdr__nav a[aria-current]::after { scale: 1; }
.hdr__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  column-gap: var(--s-5);
}
.hdr__phase {                       /* 26-10-03 아이콘만: 모든 폭 44 정사각(누르는 칸 44) · 아이콘 가운데 */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px;
  padding: 0;
  color: inherit;
}
.phase-icon { position: relative; display: block; width: 24px; height: 24px; }
.phase-icon__svg { width: 24px; height: 24px; overflow: visible; }
.phase-icon__disc { fill: transparent; }
.phase-icon__lit  { fill: currentColor; }
.phase-icon__rim  { fill: none; stroke: currentColor; stroke-opacity: .45; stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* phase_atlas.webp(8프레임 × 256px)를 쓸 때: header.js가 .hdr__phase.is-atlas + --frame(0..7) */
.phase-icon__atlas {
  position: absolute;
  inset: 0;
  display: none;
  background-repeat: no-repeat;
  background-size: 800% 100%;
  background-position: calc(var(--frame, 0) * 100% / 7) 0;
}
.hdr__phase.is-atlas .phase-icon__svg { display: none; }
.hdr__phase.is-atlas .phase-icon__atlas { display: block; background-image: url('../assets/moon/phase_atlas.webp'); }
/* 주황 규칙(26-10-03 지피티 의견 '색' · 팀 판정): 꽉 찬 주황 면은 출시 알림 계열 주요 단추에만, 나머지 주황은 점 · 반달 · 고리 같은 작은 표시까지 */
.hdr__cta { transition: background-color .2s linear, color .2s linear; }   /* R2-2: 늘 주황, 전환 0.2초 */
/* 언어 유리 알약 고정: 알약 오른쪽 항목(목차 · 출시 알림/구매)은 세 언어 중 가장 넓은 폭을 최소 폭으로, 글자는 가운데
   → 한 · 영 · 일을 바꿔도 알약이 옆으로 밀리지 않는다(실측 1배: 출시 알림 88 · 영 104 · お知らせ登録 115 / 구매하기 84 · Shop 73 · 購入する 89) */
.hdr__cta { justify-content: center; }
.hdr__cta[data-launch="pre"]  { min-width: 116px; }
.hdr__cta[data-launch="post"] { min-width: 90px; }
/* 목차 단추 최소 폭(◑ · 두 줄 + 「목차 · INDEX · 目次」 글자 자리 92 · 76px)은 26-10-03 아이콘만으로 바꾸며 뺐다 — 목차 · 소리 = 44 정사각, 세 언어 폭 같음 → 알약 밀림 0 */

/* ---------- 머리글 아이콘(26-10-03 사장님 「메뉴에 사운드와 목차는 아이콘을 넣는 게 좋을 것 같아」 · 서하 · 아트디렉터) ----------
   26-10-03 2판(사장님 「사운드와 목차는 아이콘만 · 아이콘도 작아, 좀 더 키워 줘」 · 서하 · 아트디렉터): 모든 폭 아이콘만(보이는 글자 0) ·
   18px · 선 1.4 → 24px · 선 1.75(배율과 상관없이 같은 굵기 — 커진 만큼 선도 한 단계, 메뉴 닫기 X 획 1.75와 같은 무게 · 언어 알약 36 · 주황 「출시 알림」 40 높이와 균형) ·
   누르는 칸 44 정사각 · 색 = currentColor(밤 · 종이 바탕 잉크 규칙 그대로 따라감). 낭독 이름: 소리 = 화면 밖 글자 SOUND, 목차 = aria-label(nav.menu).
   소리 = 스피커 + 물결 두 줄. 켜짐 = 물결이 아주 은은히 숨 쉼(3.6초, 동작 줄이기 = 멈춤) · 꺼짐 = 물결 0 + 가는 사선.
   켜짐 표시를 아이콘이 맡으므로 머리글 소리 단추의 왼쪽 주황 점은 쓰지 않는다(메뉴 · 바닥글 소리 단추는 그대로).
   목차 = 모든 폭(사장님 「모바일에도 통일」) 가는 두 줄 + 아랫줄 끝 작은 달 고리. ◑ 위상 원은 머리글에서 뺐다 */
.hdr-ico { display: block; flex: none; width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75px; stroke-linecap: round; stroke-linejoin: round; }
.hdr-ico :is(path, circle) { vector-effect: non-scaling-stroke; }
.hdr__sound { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -8px; padding: 0; }
.hdr__sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 모든 폭 화면 밖(낭독 이름) */
.hdr__sound::before { display: none; }
.hdr-ico__wave, .hdr-ico__mute { transition: opacity var(--d-s) linear; }
.hdr__sound:not([aria-pressed="true"]) .hdr-ico__wave { opacity: 0; }
.hdr__sound[aria-pressed="true"] .hdr-ico__mute { opacity: 0; }
.hdr__sound[aria-pressed="true"] .hdr-ico__wave { animation: hdrWave 3.6s ease-in-out infinite; }
.hdr__sound[aria-pressed="true"] .hdr-ico__wave--2 { animation-delay: .5s; }
@keyframes hdrWave { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
html.is-reduced .hdr__sound .hdr-ico__wave { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-full) .hdr__sound .hdr-ico__wave { animation: none; } }
/* 1279px 이하(지피티 의견 3번 · 우리 구체안): [로고] …… [(언어) (소리 아이콘)] [주황 「출시 알림」] [목차 아이콘]
   — 「출시 알림」은 늘 보이고(휴대폰 포함), 목차가 맨 오른쪽. 소리 · 목차는 모든 폭 아이콘만(위), 휴대폰은 목차 안 소리 단추로.
   누르는 칸 44 이상: 단추 위아래 투명 테로 넓히고 주황 면은 그 안쪽에만(background-clip) */
@media (max-width: 1279px) {
  .hdr__tools > .hdr__cta { order: 3; }
  .hdr__tools > .hdr__phase { order: 4; }
  .hdr__cta { height: 44px; border-block: 2px solid transparent; background-clip: padding-box; }
  #hud .hdr .hdr__cta.btn { background-clip: padding-box; }   /* 스윕 위 먹색 면(background 한 줄 규칙)도 안쪽에만 */
}
@media (max-width: 767px) {
  .hdr__sound { display: none; }
  .hdr__cta { border-block-width: 7px; padding: 0 12px; font-size: 13px; font-weight: 600; }
  .hdr__cta[data-launch] { min-width: 0; }
  #hud .hdr__cta:focus-visible { outline-offset: -5px; }
  #hud .hdr__cta { display: none; }   /* 26-10-03 사장님 「라」(CONSULT_휴대폰_출시알림_자리): 휴대폰 머리글 = 로고 · 목차, 출시 알림은 맨 위로 반달 위 떠 있는 원(.nfloat) — 위 크기 규칙은 되돌리기 쉽게 남김 */
}
/* FOCUS R3 P3-04(AD 서명 1): 사진 · 경계에 걸린 순간에만 아주 옅은 번짐 그림자(반경 ≤ 6px · 불투명도 ≤ .32). 테두리 · 판 0 */
.hdr [data-halo] { transition: color .2s linear, text-shadow .2s linear, filter .2s linear; }
.hdr [data-halo="dark"] { text-shadow: 0 0 6px rgba(6, 7, 8, .32), 0 0 2px rgba(6, 7, 8, .22); }
.hdr [data-halo="light"] { text-shadow: 0 0 6px rgba(237, 239, 242, .32), 0 0 2px rgba(237, 239, 242, .22); }
.hdr [data-halo="dark"] svg { filter: drop-shadow(0 0 3px rgba(6, 7, 8, .3)); }
.hdr [data-halo="light"] svg { filter: drop-shadow(0 0 3px rgba(237, 239, 242, .3)); }
.hdr--day [data-halo] { text-shadow: none; }
.hdr--day [data-halo] svg { filter: none; }
/* 헤더 띠 전체가 스윕 면 위일 때(header.js is-sweep-full): 같은 색 면을 깔아 본문이 로고·메뉴 밑으로 비치지 않게.
   R2 P-42: 면 아래 32px 그라데이션 띠 삭제 — 면은 바로 아래 바탕과 같은 색이라 경계가 보이지 않고, 본문 글은 헤더 가드(motion, 40px 마스크)가 흐린다.
   R1 P-04: 헤더 밑이 단색 블록이면 #hud.is-plate + --hdr-plate(그 블록의 색, 240ms 전환) */
.hdr::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--hdr-h);
  z-index: -1;
  background: var(--sweep-01);
  opacity: 0;
  pointer-events: none;
  transition: height .3s var(--ease-out);   /* 꺼질 때는 즉시(지난 색이 남지 않게), 표지 줄만 0.3초에 접힘 */
}
#hud.is-sweep-full .hdr::before { opacity: 1; }
/* 따라오는 표지 줄(OR1 P-22): 표지가 켜진 동안 헤더 면이 표지 줄까지(데스크톱 +40, 모바일 +30).
   R2 P-42: 표지가 꺼질 때 면도 0.3초에 접힌다(height 전환) — 맺음 띠 뒤에 검은 띠가 남지 않게 */
#hud { --tag-zone: calc(var(--below-hdr) + var(--fs-tag) + 4px); }   /* 26-10-03: 표지가 머리글 아래 여백 토큰으로 내려온 만큼(예전 40px) */
#hud.has-tag .hdr::before { height: calc(var(--hdr-h) + var(--tag-zone)); }
html:has(#collections[data-variant="inverse"]) .hdr::before { background: linear-gradient(90deg, var(--sweep-01-alt-a) 50%, var(--sweep-01-alt-b) 50%); }
#hud.is-plate .hdr::before,
html:has(#collections[data-variant="inverse"]) #hud.is-plate .hdr::before {
  background: var(--hdr-plate, var(--sweep-01));
  opacity: 0;                                            /* FOCUS R2 AD2-P02 (3): 곧은 밑변 판은 쓰지 않는다 → 아래 .hdr-plate(바탕 거울 + 32px 페더) */
  transition: background-color var(--d-s) linear, height .3s var(--ease-out);
}
#hud.is-sweep-full .hdr::before { opacity: 0; }
/* FOCUS R2 P2-03 (3) · AD2-P02 (3): 헤더 바탕 판 = 그 자리 바탕 그대로(컬렉션 바탕 무대 거울 + 종이), 밑변 = 32px 선형 페더(1 → 0).
   header.js가 병 사진 · 세트 사진 · 저널 그림 상자가 헤더 띠에 닿는 동안만 .is-on(0.15초) */
.hdr-plate {
  --plate-tag: 0px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: calc(var(--hdr-h) + var(--plate-tag) + 32px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s linear;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
}
#hud.has-tag .hdr-plate { --plate-tag: var(--tag-zone); }
.hdr-plate.is-on { opacity: 1; }
.hdr-plate__paper { position: absolute; inset: 0; background: var(--plate-paper, #ECECEC); }
.hdr-plate__cg {
  --cg-feather: 24px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100lvh;
  visibility: hidden;
  -webkit-mask-image: var(--arc-mask, none);
          mask-image: var(--arc-mask, none);
}
.hdr-plate__cg:not([data-cg="none"]) { visibility: visible; }
.hdr-plate__cg .cg, .hdr-plate__cg .cg--light { position: absolute; inset: 0; display: block; }
.hdr-plate__cg .cg--duo { z-index: 0; } .hdr-plate__cg .cg--light { z-index: 1; } .hdr-plate__cg .cg--basalt { z-index: 2; } .hdr-plate__cg .cg--night { z-index: 3; }
.hdr-plate__cg .cg--duo {
  background: var(--sweep-01-alt-a);
  -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%);
}
.hdr-plate__cg.is-iris-open .cg--duo { -webkit-mask-image: none; mask-image: none; }
.hdr-plate__cg .cg--basalt {
  background: var(--sweep-01-alt-b);
  -webkit-mask-image: var(--cg-bas-mask, linear-gradient(transparent, transparent));
          mask-image: var(--cg-bas-mask, linear-gradient(transparent, transparent));
}
.hdr-plate__cg.cg-two .cg--basalt { -webkit-mask-composite: source-in; mask-composite: intersect; }
.hdr-plate__cg .cg--night {
  --cg-feather: 12px;
  background: var(--umbra);
  -webkit-mask-image: radial-gradient(circle var(--cgp-night-r, 0px) at var(--cgp-night-x, 50%) var(--cgp-night-y, 50%), #000 calc(100% - var(--cg-feather)), transparent 100%);
          mask-image: radial-gradient(circle var(--cgp-night-r, 0px) at var(--cgp-night-x, 50%) var(--cgp-night-y, 50%), #000 calc(100% - var(--cg-feather)), transparent 100%);
}
.hdr-plate__cg[data-win="iris"] :is(.cg--duo, .cg--basalt), .hdr-plate__cg[data-win="night"] .cg--night { visibility: hidden; }
.hdr-plate__cg:not([data-cg="duo"]):not([data-cg="ing"]):not([data-cg="tex"]):not([data-cg="scent"]):not([data-cg="head"]) .cg--basalt { visibility: hidden; }
html.is-reduced .hdr-plate { display: none; }
/* S08 와이프 잉크 사본(header.js paintDayHeader): 낮 쪽에만 보이는 같은 헤더, 조작은 원본이 받는다 */
.hdr.hdr--day { pointer-events: none; transition: none; }
.hdr.hdr--day > * { pointer-events: none; }
.hdr.hdr--day::before { display: none; }
.hdr--day :is(.hdr__logo, .hdr__nav li, .hdr__lang, .hdr__sound, .hdr__phase) { color: var(--ink) !important; transition: none !important; }
#hud.is-sweep .hdr__cta { background: var(--ink); color: var(--moonmilk); --btn-fill: #2A2D30; }   /* 버밀리언 스윕(같은 주황) 위만 */
/* FINAL F-03: 맺음 띠·S12 폼의 주황 단추가 보이는 동안 헤더 단추는 테두리 없는 글 링크(주황 면 = 한 화면에 하나) */
#hud.is-cta-quiet .hdr__cta {
  background: transparent;
  color: var(--cta-ink, var(--moonmilk));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
#hud.is-cta-quiet .hdr__cta::before { display: none; }

@media (max-width: 1279px) {
  .hdr__nav { display: none; }
}
.hdr__wm { transition: opacity var(--d-s) linear; }
@media (max-width: 767px) {
  /* R3-5 · P-50: 휴대폰 컬렉션 표지는 헤더 줄 안(로고 D 옆) → 헤더 판 = 헤더 높이(판이 아래로 늘지 않는다).
     표지가 켜진 동안 워드마크는 접히고 D(반달)만 남는다 */
  #hud { --tag-zone: 0px; }
  /* 휴대폰 점검 M5: 표지가 s09 .is-off로 접혀 있으면(빠른 이동 뒤 data-on만 남은 때) 워드마크를 접지 않는다 — D만 남는 화면 0 */
  html:has(.col-tag:is(.is-on, [data-on]):not(.is-off)) .hdr__wm { opacity: 0; }
  /* 최종 점검 R1 P6: 표지 「01 만월」과 워드마크가 한 장도 겹치지 않게 차례로 — 워드마크는 표지가 다 접힌 뒤(--d-m) 나타나고,
     사라질 때는 바로(표지 쪽이 --d-s 기다렸다 펼친다 — sections.css .col-tag 휴대폰). 동작 줄이기는 즉시 바꿈 */
  .hdr__wm { transition: opacity var(--d-s) linear var(--d-m); }
  html:has(.col-tag:is(.is-on, [data-on]):not(.is-off)) .hdr__wm { transition-delay: 0s; }
  html.is-reduced .hdr__wm { transition: none; }
  .hdr { column-gap: var(--s-4); }
  .hdr__lang { display: none; }   /* 26-10-03: 「출시 알림」은 휴대폰에서도 보임(지피티 의견 3번) */
  .hdr__tools { column-gap: var(--s-5); }
  .hdr__wm { width: calc(10px * 89.33 / 10.304); height: 10px; }
  .hdr__d  { width: calc(20px * 8.805 / 10.304); height: 20px; }
}

/* =====================================================================
   챕터 레일 「한 달의 궤도」 곡선 2판(OWNER_UPDATE_R1 §20 · CONSULT_레일곡선) — ≥1280
   곡선: 화면 왼쪽 바깥에 중심을 둔 큰 반타원의 가로 끝. 양 끝이 벽(x 0)에 붙고(0.25H~0.75H) 가운데가 0.043H 불룩
        (1280×720 31.0 · 1440×900 38.7 · 1920×1080 46.4) — 오너 그림 비율 그대로. 1.25px, 지나온 쪽 100% · 남은 쪽 40%.
        식·값은 header.js railCurveGeom이 화면 크기마다 계산해 --rail-top · --rail-chord · --rail-hit을 쓴다(기본값 = 1440×900).
   상자: 벽(x 0)부터 폭 104, 세로 = 곡선 벽~벽. 누르는 자리는 벽 ~ (불룩 + R + 8)만 — 나머지는 본문 클릭을 막지 않는다.
   달: 지름 20(화면 폭 1600 이상 22 — header.js가 g를 R/10배), 실제 위상(초승 이각 30° → 보름 180°), 중심이 선 위.
        밤 = 밝은 면 달빛색 + 지구조 어두운 면 18% + 1px 테. 아침·스윕(.is-ink) = 잉크판(인쇄된 달처럼 위상이 그대로 읽힌다).
   지금 장 이름(.lun__now, FIX_B1 '레일 지금 장 이름' · 서하 + AD): 그 장에 있는 내내 달 오른쪽 위에 붙어 다닌다(달과 같은 기준점).
        자리 = 이름 아래 끝이 달 중심보다 0.5R 위, 왼쪽 = max(달 중심 + 0.7R + 4, 이름 높이 안 곡선 X + 6) → 선·달과 겹침 0, 선 끊기 0.
        11px 600(한·일 Pretendard / 영 Archivo 첫 글자만 대문자 .02em — 대문자는 「COLLECTION」 75px라 본문 여백을 넘는다).
        오른쪽 끝은 본문 여백(--margin) − 8 안. 그 장 구간에서 가장 불룩한 자리로 재어 넘치면 10px(.is-tight). 줄바꿈 0. 주황 점 없음.
        장이 바뀌면 앞 이름이 위로 0.2초 비키고 새 이름이 아래에서 0.25초 올라온다(투명도 변화 0 → 회색 잔상 0). 동작 줄이기 = 바로 바뀜.
   다른 구간 이름(.lun__label): 마우스·키보드 포커스 동안만, 그 구간 세로 가운데 · x = 곡선 X(y) + 18. 지금 장 구간을 가리키면 띄우지 않고
        (지금 이름이 이미 있다) 다른 구간 이름이 지금 이름과 세로로 겹치면 그 구간 쪽으로 비켜 선다. 선은 끊지 않는다.
   색: header.js가 달 자리 바탕으로 .is-ink(아침·스윕) / 기본 달빛색(밤)
   ===================================================================== */
.lun {
  position: fixed;
  left: 0;
  top: var(--rail-top, 25vh);
  width: var(--rail-box-w);
  height: var(--rail-chord, 50vh);
  pointer-events: none;
  z-index: var(--z-hud);
  color: var(--moonmilk);
  transition: opacity var(--d-m) var(--ease-out-soft), visibility 0s linear 0s, color var(--d-m) linear;
}
.lun.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-m) var(--ease-out-soft), visibility 0s linear var(--d-m);
}
.lun.is-ink, #hud.is-ink .lun { color: var(--ink); }
.lun__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lun__arc { fill: none; stroke: currentColor; stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.lun__arc--rest { stroke-opacity: .4; }    /* R2-11: 남은 쪽 40% */
.lun__arc--done { stroke-opacity: 1; }
.lun__arc--hot  { stroke-opacity: 0; transition: stroke-opacity var(--d-s) linear; }
.lun.is-hot .lun__arc--hot { stroke-opacity: 1; }
/* 달: 밤 */
.lun__disc { fill: currentColor; fill-opacity: .18; transition: fill-opacity var(--d-m) linear; }
.lun__lit  { fill: currentColor; transition: fill var(--d-m) linear; }
.lun__rim  { fill: none; stroke: currentColor; stroke-opacity: .55; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lun__halo { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* 달: 아침·스윕(잉크판) — 어두운 면이 잉크, 밝은 면이 종이 → 위상이 밤과 같은 모양으로 읽힌다 */
.lun.is-ink .lun__disc, #hud.is-ink .lun .lun__disc { fill-opacity: .78; }
.lun.is-ink .lun__lit,  #hud.is-ink .lun .lun__lit  { fill: var(--paper); }
.lun.is-ink .lun__rim,  #hud.is-ink .lun .lun__rim  { stroke-opacity: 1; }
/* 장이 바뀜: 달 0.8초 숨 — 지구조가 잠깐 밝아지고(18 → 45%) 1px 빛 테가 한 번 퍼진다(S05 링의 작은 되풀이).
   빛 테 1.4배(1440에서 테 끝 x 52.7, 본문까지 59 — 0.8초 동안만). 동작 줄이기면 header.js가 숨을 붙이지 않는다 */
.lun.is-breath .lun__disc { animation: lunBreathDisc .8s var(--ease-out-soft) both; }
.lun.is-breath .lun__halo { animation: lunBreathHalo .8s var(--ease-out) both; }
@keyframes lunBreathDisc { 0% { fill-opacity: .18; } 35% { fill-opacity: .45; } 100% { fill-opacity: .18; } }
@keyframes lunBreathHalo { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
.lun.is-ink.is-breath .lun__disc, #hud.is-ink .lun.is-breath .lun__disc { animation-name: lunBreathDiscInk; }
@keyframes lunBreathDiscInk { 0% { fill-opacity: .78; } 35% { fill-opacity: .5; } 100% { fill-opacity: .78; } }
html.is-reduced .lun.is-breath .lun__disc, html.is-reduced .lun.is-breath .lun__halo { animation: none; }
/* 누르는 띠: 벽(x 0) ~ (불룩 + R + 8)만(1440 0~57). 띠 세로 = 그 장 동안 달이 지나는 y(header.js layoutSegs, 최소 24px) */
.lun__segs { position: absolute; top: 0; bottom: 0; left: 0; width: var(--rail-hit, 57px); }
.lun__segs > li { position: absolute; left: 0; width: 100%; top: var(--seg-top, 0); height: var(--seg-h, 0); }
.lun__seg {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}
/* 벽에 붙은 단추 → 포커스 테두리를 안쪽 2px에(왼쪽 변이 화면 밖으로 잘리지 않게) */
.lun__seg:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
/* 다른 구간 이름: 마우스·포커스 동안만. 구간 세로 가운데(--name-y) · 곡선 X(y) + 18(--name-x, 1440 약 32~57). 11px.
   지금 장 구간을 가리키면 숨김(.is-here — 지금 이름이 대신한다) */
.lun__label {
  position: absolute;
  left: var(--name-x, 32px);
  top: var(--name-y, 0px);
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-m) var(--ease-out-soft);
}
.lun__label.is-glide { transition: opacity var(--d-s) var(--ease-out-soft), top var(--d-s) var(--ease-out), left var(--d-s) var(--ease-out); }
.lun__label-text { display: block; }
.lun.is-hot .lun__label { opacity: 1; transition-duration: var(--d-s); }
.lun.is-hot.is-here .lun__label { opacity: 0; }
/* 지금 장 이름: 달 오른쪽 위(header.js lunFrame이 달과 같은 프레임 · 같은 좌표로 transform을 쓴다). 높이 16 창 안에서만 오르내린다 */
.lun__now {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  color: inherit;
  pointer-events: none;
  transform: translate(-200px, 0);       /* 첫 자리를 재기 전에는 화면 밖 */
}
.lun__now.is-tight { font-size: 10px; }
:root:lang(ja) .lun .lun__now.is-tight { letter-spacing: -.02em; }
.lun__now-text { display: block; translate: 0 0; transition: translate .25s var(--ease-out); }
.lun__now-text.is-out { translate: 0 -110%; transition: translate .2s cubic-bezier(.5, 0, .75, 0); }
.lun__now-text.is-below { translate: 0 110%; transition: none; }
html.is-reduced .lun__now-text { transition: none; }
/* 영어: 레일 두 이름은 첫 글자만 대문자(대문자 라벨은 「COLLECTION」 75px — 본문 여백을 넘는다) */
:root:lang(en) .lun .lun__now, :root:lang(en) .lun .lun__label { text-transform: none; letter-spacing: .02em; }
/* 확대 창·저널 읽기 창이 열린 동안 레일 숨김(맨 위로 단추와 같은 규칙) */
html.is-reader .lun, html.is-overlay .lun { opacity: 0; visibility: hidden; }
@media (max-width: 1279px) {
  .lun { display: none; }
}

/* =====================================================================
   '달의 목차' 풀스크린 (#menu, z60)
   열기/닫기 clip-path circle은 menu.js. 메뉴 배경은 오른쪽 '오늘 밤의 달' 자리에 구멍을 낸다
   (--menu-moon-x/y/r: menu.js가 stage.project()로 맞춘다)
   ===================================================================== */
#menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  --fg: var(--moonmilk);
  --fg-2: var(--dust);
  --focus: var(--sun);
  color: var(--moonmilk);
  --menu-moon-x: 75%;
  --menu-moon-y: 50%;
  --menu-moon-r: 35vh;
}
.menu__bg {
  position: absolute;
  inset: 0;
  background: rgb(14 16 18 / .96);
  -webkit-mask: radial-gradient(circle at var(--menu-moon-x) var(--menu-moon-y), transparent calc(var(--menu-moon-r) - .5px), #000 calc(var(--menu-moon-r) + .5px));
          mask: radial-gradient(circle at var(--menu-moon-x) var(--menu-moon-y), transparent calc(var(--menu-moon-r) - .5px), #000 calc(var(--menu-moon-r) + .5px));
}
.menu__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hdr-h) var(--margin) var(--s-7);
}
/* 닫기 = X만(사장님 2026-10-03 「닫기 버튼도 X로 모두 통일」): 제품 상세 창 .po__close와 같은 자리 · 크기 · 획.
   「닫기」는 .vh로 화면에서만 숨김(낭독기는 언어별로 읽음). 56px 정사각(휴대폰 48px), 헤더 중심선 높이, 밤 바탕이라 밝은 색 */
.menu__close {
  position: absolute;
  right: calc(var(--margin) - 16px);
  top: max(4px, calc(var(--hdr-h) / 2 - 28px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--moonmilk);
  outline-offset: -2px;
}
.menu__close-x { position: relative; flex: none; width: 24px; height: 24px; transition: rotate var(--d-s) var(--ease-out); }
.menu__close-x::before, .menu__close-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 1.75px;
  margin: -.875px 0 0 -15px;
  background: currentColor;
  rotate: 45deg;
}
.menu__close-x::after { rotate: -45deg; }
.menu__close:hover .menu__close-x, .menu__close:focus-visible .menu__close-x { rotate: 90deg; }
@media (max-width: 767px) {
  .menu__close { right: calc(var(--margin) - 12px); top: max(4px, calc(var(--hdr-h) / 2 - 24px)); width: 48px; min-width: 48px; height: 48px; font-size: 15px; }
  .menu__close-x::before, .menu__close-x::after { width: 28px; margin-left: -14px; }
}
.menu__list { display: flex; flex-direction: column; row-gap: var(--s-3); width: calc(var(--col) * 6 + var(--gutter) * 5); }
.menu__item { padding: 4px; margin: -4px; }      /* I2 마스크(li overflow clip) 안에 포커스 링이 들어갈 여유 */
.menu__link {
  display: inline-flex;
  align-items: center;
  column-gap: var(--s-5);
  padding: 4px 0;
  color: var(--moonmilk);
}
.menu__link:focus-visible { outline-offset: -2px; padding-inline: 8px; margin-inline: -8px; }
#menu.is-pointer .menu__link:focus-visible { outline: none; }   /* 10-16: 마우스로 연 메뉴는 첫 항목 초점 테두리 0(focusVisible 옵션을 모르는 브라우저 대비 · 자판을 누르면 바로 다시 보임) */
.menu__dot {
  flex: none;
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(237, 239, 242, .5);
  overflow: hidden;
}
.menu__dot::after {                  /* 호버 = --sun으로 차오름(원형 채움 240ms) */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--sun);
  scale: 0;
  transition: scale var(--d-s) var(--ease-out);
}
.menu__link:hover .menu__dot::after, .menu__link:focus-visible .menu__dot::after, .menu__link[aria-current] .menu__dot::after { scale: 1; }
.menu__tools {
  position: absolute;
  left: var(--margin);
  bottom: var(--s-7);
  display: flex;
  align-items: center;
  column-gap: var(--s-6);
  color: var(--moonmilk);
}
/* 메뉴가 열린 동안 본문·워드마크는 감춘다(달 구멍 너머로 글이 보이지 않게). 원이 다 덮은 뒤에 감춘다 */
html.menu-open :is(main, .site-footer, #k4) { visibility: hidden; transition: visibility 0s linear .7s; }
/* 10-16 사장님(메뉴 사진): 첫 화면 유리 구슬 · 구름바다(메뉴보다 나중에 생김)가 메뉴 뒤에 남아 흐린 유리 공이 비치고 달 창 아래에 구름이 끼던 것 → 원이 다 덮인 뒤 감춤 */
html.menu-open :is(#glassmoon, #earthsky, #earthsky-front) { visibility: hidden; transition: visibility 0s linear .7s; }
html.menu-fading :is(#glassmoon, #earthsky, #earthsky-front) { opacity: 0 !important; transition: opacity .5s ease, visibility 0s linear .7s; }   /* 10-16 점검: 여는 순간부터 옅게(구름이 매 프레임 쓰는 인라인 불투명도보다 앞서게 !important) */
html.menu-open { overflow: hidden; }
/* 원이 다 덮은 뒤 헤더를 감춘다(96% 배경 너머 CTA 유령 방지, WP-02b) · 태양 커서는 메뉴(z60) 위 */
html.menu-open #hud { visibility: hidden; transition: visibility 0s linear .7s; }
html.menu-open #cursor { z-index: 65; }
@media (max-width: 767px) {
  #menu { --menu-moon-x: 50%; --menu-moon-y: 24%; --menu-moon-r: 30vw; }
  .menu__inner { justify-content: flex-end; padding-bottom: 120px; }
  .menu__list { width: auto; }
  .menu__tools { flex-wrap: wrap; row-gap: var(--s-2); }
}
/* 휴대폰 점검 M3: 좁은 휴대폰(360 등)에서 언어 · SOUND · MOTION 줄(162 + 53 + 61 + 간격 2×32 = 340px)이 넘쳐 MOTION이 다음 줄로 떨어지고
   줄이 위로 자라 목록 끝 「출시 알림」을 덮었다 → 간격만 32 → 16(한 줄 308px). 더 좁아(≤ 349) 두 줄이 되면 목록 아래 여백을 그만큼 늘린다 */
@media (max-width: 389px) {
  .menu__tools { column-gap: var(--s-4); }
}
@media (max-width: 349px) {
  .menu__inner { padding-bottom: 172px; }
}

/* =====================================================================
   월식 커서 「달 + 빛 링」 (#cursor, z50, (pointer:fine) + (hover:hover), 링 커서 사이트 반영 2026-10-03)
   cursor.js가 그림판(canvas 200×200 CSS px)을 만들고 #cursor에 transform만 쓴다(포인터 − 100). 표시 = #cursor.is-on,
   보이는 동안 html.cursor-sun(원래 커서 숨김). 입력 칸 · 로딩 · 상세 창 · 저널 읽기 창에서는 꺼지고 원래 커서.
   ===================================================================== */
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s linear;
  will-change: transform;
  contain: layout style size;
}
#cursor.is-on { opacity: 1; }
/* base.css `canvas{max-width:100%}`가 폭을 줄이지 않게 */
#cursor .cursor__canvas { position: absolute; left: 0; top: 0; width: 200px; height: 200px; max-width: none; display: block; }
#cursor .cursor__label {
  position: absolute; left: 100px; top: 100px;
  transform: translate(-50%, -50%) scale(.6); transform-origin: 50% 50%;
  opacity: 0; white-space: nowrap; text-align: center;
  font-family: var(--ff-pretendard); font-weight: 600; line-height: 1.12; letter-spacing: 0;
  color: #EDEFF2; will-change: transform, opacity;
}
:root:lang(ja) #cursor .cursor__label { font-family: var(--ff-pretendard-jp); }
#cursor .cursor__label--latin { font-family: var(--ff-archivo); white-space: normal; }
#cursor .cursor__label--caps { text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
/* 반달(세럼 | 크림 이음매) 위 — 달 그림과 차이 합성: 검은 쪽은 달빛, 흰 쪽은 먹 */
#cursor .cursor__label--diff { color: #EDEFF2 !important; mix-blend-mode: difference; }
html.cursor-sun, html.cursor-sun * { cursor: none !important; }
@media (pointer: coarse), (hover: none), (forced-colors: active) {
  #cursor { display: none !important; }
}

/* =====================================================================
   출시 알림 폼 (S12)
   ===================================================================== */
.notify-form { width: min(560px, 100%); display: flex; flex-direction: column; row-gap: var(--s-3); }
.notify-form__badge {                 /* C3-5: 개발 표시 같은 대문자 'PREVIEW' → 작은 본문 문장(대문자·모노 0) */
  margin: 0 0 var(--s-3);
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dust);
}
html.has-endpoint .notify-form__badge, .notify-form.has-endpoint .notify-form__badge { display: none; }
.notify-form.is-sent .notify-form__badge { display: none; }      /* FINAL F-09 ⓔ: 제출 뒤에는 상태 문장 하나만 */
.notify-form__row { display: flex; width: 100%; }
.notify-form__input {
  flex: 1 1 360px;               /* 폼 폭 560 = 입력 + 버튼(버튼은 글자 폭, EN이 길다) */
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--umbra-2);
  box-shadow: inset 0 -1px 0 var(--rule-night);
  color: var(--moonmilk);
  font-family: var(--ff-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  transition: box-shadow var(--d-s) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.notify-form__input::placeholder { color: var(--dust); opacity: 1; }
.notify-form__input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--sun); }
.notify-form__input:focus-visible { outline: none; }
.notify-form__input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--sun); }
.notify-form__submit { flex: none; min-width: 200px; }
.notify-form__status { min-height: 1.3em; color: var(--moonmilk); }
.notify-form__status:empty { min-height: 1.3em; }
.notify-form__error { display: flex; align-items: center; column-gap: 8px; color: var(--moonmilk); }
.notify-form__error::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); flex: none; }
.consent { display: flex; flex-direction: column; row-gap: var(--s-3); margin-top: var(--s-2); }
.consent__item { display: grid; grid-template-columns: 16px 1fr; column-gap: var(--s-3); align-items: start; }
.consent__box {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: .25em;
  border: 1px solid var(--dust);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.consent__box:checked { background: var(--sun); border-color: var(--sun); }
.consent__label { color: var(--moonmilk); cursor: pointer; }
.consent__more { grid-column: 2; }
.consent__more summary { cursor: pointer; color: var(--dust); list-style: none; padding: 4px 0; }
.consent__more summary::-webkit-details-marker { display: none; }
.consent__detail { white-space: pre-line; color: var(--dust); margin-top: var(--s-2); }
.consent__privacy { color: var(--dust); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .notify-form__row { flex-direction: column; row-gap: var(--s-2); }
  .notify-form__input { flex: none; width: 100%; height: 52px; }
  .notify-form__submit { width: 100%; height: 52px; }
}

/* 판매처 링크(출시 후) — 텍스트 + →, 1px 밑줄 */
.shops { display: flex; flex-direction: column; align-items: center; row-gap: var(--s-3); }
.shops__link {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  color: var(--fg);
}

/* =====================================================================
   제품 확대 오버레이 (#product-overlay, z70, P1)
   확대 컷은 단품 컷([D], 5컬럼)보다 커지지 않는다(라벨 확대 금지 조건)
   ===================================================================== */
#product-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  --sweep-bg: var(--sweep-01);
  --sweep-fg: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
html.is-overlay { overflow: hidden; }   /* collection.js가 오버레이를 여는 동안 */
#product-overlay[data-variant="inverse"] { --sweep-bg: linear-gradient(90deg, var(--sweep-01-alt-a) 50%, var(--sweep-01-alt-b) 50%); }
.po__inner {
  min-height: 100%;
  align-items: center;
  padding-top: var(--hdr-h);
  padding-bottom: 56px;   /* R2 P-47: 병 상자 + 고지 한 줄이 한 화면에 */
  position: relative;
}
/* 닫기(사장님 2026-10-03 「스크롤되면 닫기가 올라가 닫기 힘들고, 너무 작다」): 화면 기준 고정(창이 스크롤돼도 같은 자리),
   누르는 자리 56px(휴대폰 48px), 「닫기」 16px(휴대폰 15px) · × 20px 상자 1.5px 획. 단추 면 = 창 바탕과 같은 색(상자는 보이지 않고,
   밑으로 지나가는 글과 겹치지 않음). 포커스 링은 단추 안쪽(-2px)이라 화면 위로 잘리지 않는다. 저널 읽기 창 .jr__close도 같은 규칙
   X만(사장님 2026-10-03 「X가 있어서 닫기 글자는 없어도 될 것 같아」): 「닫기」는 .vh로 화면에서만 숨김(낭독기는 언어별로 「닫기」를 읽음),
   단추 = 56px 정사각(휴대폰 48px), × 획 30px · 1.75px(휴대폰 28px)로 조금 키움 */
.po__close {
  position: fixed;
  z-index: 3;
  right: calc(var(--margin) - 16px);
  top: max(4px, calc(var(--hdr-h) / 2 - 28px));     /* 헤더 중심선과 같은 높이 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: var(--sweep-bg);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
  outline-offset: -2px;
}
.po__close-x { position: relative; flex: none; width: 24px; height: 24px; transition: rotate var(--d-s) var(--ease-out); }
.po__close-x::before, .po__close-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 1.75px;
  margin: -.875px 0 0 -15px;
  background: currentColor;
  rotate: 45deg;
}
.po__close-x::after { rotate: -45deg; }
.po__close:hover .po__close-x, .po__close:focus-visible .po__close-x { rotate: 90deg; }
@media (max-width: 767px) {
  .po__close { right: calc(var(--margin) - 12px); top: max(4px, calc(var(--hdr-h) / 2 - 24px)); width: 48px; min-width: 48px; height: 48px; padding: 0; font-size: 15px; }
  .po__close-x::before, .po__close-x::after { width: 28px; margin-left: -14px; }
}
/* FINAL F-01(규제): 사진 높이 = --po-img-h(collection.js가 본문 단품 컷이 실제로 그려진 높이 이하로 묶음 → 라벨 배율 ≤ 1.00).
   상자 = 사진 높이의 74%(병 + 위아래 숨), 병 가운데(사진 높이 53%)를 상자 가운데에 — 스튜디오 바닥·빈 배경만 잘린다.
   남는 자리는 여백과 문장이 맡는다. 라벨 위 표시·주석·화살표 0. 가장자리는 면에 녹인다(카드 상자 0) */
.po__inner { grid-template-rows: 1fr; }
.po__media {
  --h: var(--po-img-h, 62svh);
  grid-column: 1 / span 6;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  margin: var(--po-top, 0px) 0 0;
  width: min(100%, calc(var(--h) * .62));
  height: calc(var(--h) * .74);
  position: relative;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}
.po__media img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  max-width: none;
  height: var(--h);
  aspect-ratio: 4 / 5;
  translate: -50% -53%;
}
/* 글 열: 한 덩어리(라벨 · 이름 · 영문·용량 · 두 문장 · 성분·사용 · 보조 링크)를 사진 병 높이에 맞춰 가운데.
   (사장님 2026-10-03: 성분·사용 줄은 「출시 알림 신청」 바로 위. 예전 '열 맨 아래 + min-height 100svh'는 창을 24px 넘치게 해 지움) */
.po__info {
  grid-column: 8 / span 5;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 24px;
  color: var(--ink);
}
.po__main { margin-block: auto; display: flex; flex-direction: column; max-width: 30em; }
.po__step { font-family: var(--ff-pretendard); font-size: 12px; font-weight: 600; opacity: .6; letter-spacing: .12em; }
.po__name {
  margin-top: var(--s-3);
  font-family: var(--ff-display);
  font-size: calc(var(--fs-h2) * .85 * var(--fs-scale));
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 600;
}
.po__sub { margin-top: var(--s-2); opacity: .65; font-variant-numeric: tabular-nums; }
.po__desc { margin-top: var(--s-6); display: flex; flex-direction: column; row-gap: 2px; text-wrap: pretty; }
.po__p { margin: 0; }
.po__cta { margin-top: var(--s-6); }
/* 성분·사용 틀(사장님 2026-10-03 「출시 알림 신청 윗쪽 + 강조」 · CONSULT_크림성분 ② 틀): 가는 선 → 주요 성분(큰 굵은 글) → 사용 줄.
   크림은 성분 확정 전이라 숨김(같은 자리·같은 모양을 쓴다; 이름표 · 「함께 담은 것」 · 「전성분 보기」는 확정 뒤 이 틀 안에 더한다).
   강조 세 안 = 클래스 하나: --dot(추천 ㉯, 주황은 「밤에만」 줄 앞 작은 반달 면에만) · --sun(㉮ 글자 전체 주황) · --plain(㉰ 주황 0).
   글자는 늘 먹색(실버 위 주황 글자 대비 2.2:1 < 4.5 → ㉮는 비교용) */
.po__ing {
  flex: none;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  max-width: 24em;
}
.po__ing-words {
  font-size: calc(var(--fs-body-l) * 1.2);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
}
.po__ing-use {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  font-size: var(--fs-body-l);
  line-height: 1.45;
  font-weight: 600;
}
.po__ing-use:empty { display: none; }
.po__ing--dot .po__ing-use::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 50%, var(--sun) 50%);   /* 반달(D) 면 — 주황은 면·점에만 */
}
.po__ing--sun { border-top-color: var(--sun); }
.po__ing--sun :is(.po__ing-words, .po__ing-use) { color: var(--sun); }
#product-overlay[data-variant="vermilion"] .po__ing--sun :is(.po__ing-words, .po__ing-use) { color: inherit; }
#product-overlay[data-variant="vermilion"] .po__ing--dot .po__ing-use::before { background: linear-gradient(90deg, transparent 50%, currentColor 50%); }
/* 이미지 고지: 작은 본문 한 문장(대문자 모노 4줄 → 문장형, R2 P-47) */
.po__note {
  position: absolute;
  left: var(--margin);
  bottom: var(--s-5);
  max-width: min(44em, calc(50vw - var(--margin) - var(--gutter)));
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  opacity: .72;
}
/* 바탕 명도에 따른 글자색(collection.js가 data-ground·--sweep-bg를 넣는다, WP-03) */
#product-overlay[data-ground="dark"] { --sweep-fg: var(--moonmilk); --focus: var(--moonmilk); }
#product-overlay :is(.po__info, .po__close, .po__note) { color: var(--sweep-fg); }
/* R3-16 · C3-4: 확대 창의 알림 = 테두리 없는 보조 링크 「출시 알림 신청 →」(검정 단추 0). 주 단추는 맺음 띠·S12 두 곳뿐 */
.po__notify {
  display: inline-flex;
  align-items: baseline;
  column-gap: .4em;                /* C2: 화살표 앞 한 칸 = 저널 「이야기 읽기 →」(.jrow__cue)와 같은 간격. 글 속 공백은 inline-flex에서 사라져 간격으로 둔다 */
  padding: 6px 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--d-s) linear;
}
.po__notify:hover, .po__notify:focus-visible { text-decoration-color: currentColor; }
.po__notify-arrow { display: inline-block; transition: translate var(--d-s) var(--ease-out); }
.po__notify:hover .po__notify-arrow { translate: 4px 0; }
#product-overlay[data-ground="dark"] .btn--ink { background: var(--moonmilk); color: var(--ink); }
@media (max-width: 767px) {
  .po__inner { grid-template-rows: auto auto auto; padding-bottom: var(--s-6); }
  .po__media, .po__info { grid-column: 1 / -1; }
  .po__media { grid-row: 1; width: min(100%, calc(var(--h) * .62)); margin-top: var(--s-4); }   /* 줄어든 사진도 둥근 가장자리가 사진에 맞게 */
  .po__info { grid-row: 2; min-height: 0; margin-top: var(--s-5); padding-bottom: 0; }
  .po__main { margin-block: 0; }
  .po__desc { margin-top: var(--s-5); }
  .po__cta { margin-top: var(--s-4); }
  .po__ing { margin-top: var(--s-5); padding-top: var(--s-3); row-gap: 2px; }
  .po__note { grid-row: 3; position: static; grid-column: 1 / -1; max-width: none; margin-top: var(--s-5); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .po__media { grid-column: 1 / span 6; }
  .po__info { grid-column: 7 / span 6; }
}

/* =====================================================================
   로더 (#loader, z80) — 결정안(2026-10-03 사이트 반영). 규칙은 전부 css/loader.css → index.html <head> 인라인(<style id="ldr-css">).
   옛 「D가 차오른다」 규칙(회색 D 30% · 8초 CSS 안전장치 · rv-failsafe 숨김)은 지웠다 — 막 걷기는 boot(14초 상한) · loader.js가 맡는다
   ===================================================================== */

/* =====================================================================
   reduced-motion: CSS 루프 정지 (JS 리빌 대체는 motion.css / reveal.js)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.grain-on #grain, .hero__hint-line::after { animation: none; }
  .hero__hint-line { background: rgba(237, 239, 242, .4); }
}
html.is-reduced.grain-on #grain, .is-reduced .hero__hint-line::after { animation: none; }
.is-reduced .hero__hint-line { background: rgba(237, 239, 242, .4); }

/* =====================================================================
   FINAL F-09 · 손끝에 닿는 미세 반응 — 화장품 패키지를 만지는 듯이, 한 번에 하나만 움직인다.
   자석·3D 기울기·반복 맥동 0. 동작 줄이기에서는 정지(색·밑줄만 즉시)
   ===================================================================== */
/* ⓐ 주황 주 단추: 마우스를 올리면 명암선 같은 밝은 띠가 단추 안에서 한 번(0.6초) 가로지른다(단추 밖 번짐 0 — .btn overflow hidden).
   '달 차오름' 원형 채움은 주황 단추에서는 쓰지 않는다(동시에 움직이는 것 1개). 누르면 0.98(80ms). 포커스 = 주황 2px · 간격 3px */
.btn--sun::before { display: none; }
.btn--sun::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 46%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .3) 54%, rgba(255, 255, 255, 0) 100%);   /* 10-16 컬러톤 여쭘-5 ②: 반짝 띠 순백(옛 살구빛 rgba(255, 244, 232)) */
  translate: -110% 0;
  pointer-events: none;
}
@media (hover: hover) {
  .btn--sun:hover::after { translate: 240% 0; transition: translate .6s cubic-bezier(.45, 0, .2, 1); }
}
.btn--sun { transition: color var(--d-xs) linear, background-color var(--d-m) linear, scale 80ms linear; }
.btn--sun:active { scale: .98; }
.btn--sun:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
#hud.is-cta-quiet .hdr__cta::after { display: none; }

/* ⓒ KO·EN·JA · SOUND · 메뉴 글자: 1px 밑줄이 왼쪽에서 그어진다(I5, 0.4초). 현재 챕터 점(::after)과 겹치지 않게 배경 선으로 */
:is(.hdr__nav a, .lang__btn, .toggle > span, .footer__nav a, .hdr__phase-label) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .4s var(--ease-out), opacity var(--d-s) linear;
}
.hdr__nav a { background-position: 0 calc(100% - 4px); }
@media (hover: hover) {
  :is(.hdr__nav a, .lang__btn, .toggle > span, .footer__nav a):hover,
  .hdr__phase:hover .hdr__phase-label { background-size: 100% 1px; }
}
:is(.hdr__nav a, .lang__btn, .toggle > span, .footer__nav a, .hdr__phase-label):focus-visible { background-size: 100% 1px; }

/* ⓓ 목차 이름표 「목차 · INDEX · 目次」: 26-10-03 사장님 「사운드와 목차는 아이콘만」 — 모든 폭 숨김(낭독 이름은 단추 aria-label nav.menu) */
.hdr__phase-label { display: none; }

/* 동작 줄이기: 움직임 0(띠·눌림·밑줄 그어짐 정지 — 밑줄은 즉시) */
html.is-reduced .btn--sun::after { display: none; }
html.is-reduced .btn--sun:active { scale: 1; }
html.is-reduced :is(.hdr__nav a, .lang__btn, .toggle > span, .footer__nav a, .hdr__phase-label) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .btn--sun::after { display: none; }
  :is(.hdr__nav a, .lang__btn, .toggle > span, .footer__nav a, .hdr__phase-label) { transition: none; }
}


/* ---------------------------------------------------------------------
   FOCUS R1 AD-P11 · P-01 ⓗ: 헤더 가드 v4(js/ui/hguard.js, 줄 통째로 0.15초). 켜지면 html.hg4 —
   reveal.js 헤더 가드 v3의 모양([data-hg-on] 균일 마스크 · −24px · 줄 마스크)은 무력화한다(한 갈래에 하나만). v4는 인라인 !important 마스크를 쓴다
   --------------------------------------------------------------------- */
html.hg4 [data-hg-on] { -webkit-mask-image: none !important; mask-image: none !important; translate: none !important; }

/* ---------------------------------------------------------------------
   FOCUS R1 F9 → FOCUS R2 P2-08: 맨 위로 「떠오르는 반달」 2판(js/ui/totop.js).
   돔 52 × 26(휴대폰 44 × 22) + 지평선(돔 폭 1.4배 = 72.8px, 1px, 양끝 투명 그러데이션). 히트 영역 ≥ 48. 잉크 = 바탕 자동(data-ink).
   살아 있음(동시에 움직이는 것 ≤ 2): 돔 안 달빛 = 페이지 진행만큼 아래에서 차오름 + 명암 경계 7초 주기 ±3px 숨 + 7초마다 호를 따라 빛 한 줄.
   마우스 · 포커스 = 돔 4px 떠오름 + 「맨 위로」 마스크 상승. 누름 = 돔이 위로 솟아 사라짐. 동작 줄이기 = 정지형
   → 26-10-03(오너): 숨 · 호 빛 끔, 돔 안 점이 위로 스르륵(3초마다) · 마우스 · 포커스 = 돔 뒤 빛무리(떠오름 대신) · 누름 = 점이 쏙 빠져나감
   --------------------------------------------------------------------- */
.totop {
  --tt: #EDEFF2;   /* 10-16 컬러톤 바꿈-01(옛 #E8E6DF) */
  position: fixed;
  --tt-r: max(16px, calc(var(--margin) / 2 - 37px));
  --tt-lab-slack: calc(var(--tt-r) - 16px);   /* 글이 상자 오른쪽 밖으로 나가도 되는 폭(화면 끝 16px까지) */
  right: var(--tt-r);
  bottom: 10px;                    /* 26-10-03 §42: 상자를 아래로 18px 늘려 「맨 위로」 글을 지평선 아래 상자 안에 — 돔 자리는 그대로(상자 위 끝 = 바닥 80px) */
  z-index: var(--z-hud);
  width: 74px;
  height: 70px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tt);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity .4s var(--ease-out), translate .4s var(--ease-out), visibility 0s linear .4s, color .4s linear;
  -webkit-tap-highlight-color: transparent;
}
.totop[data-ink="day"] { --tt: #111; }
/* FOCUS R3 P3-09: 밝은 바탕에서는 먹선 돔 + 먹 30% 채움(검은 헬멧 0)
   → 26-10-09(사장님 「흰색 바탕일 때 무슨 모양인지 모르겠어」 · 서하 「흰 달」): 차오른 곳 = 종이보다 살짝 환한 은빛 흰빛(index.html #totop-pearl, 못 읽는 브라우저는 #F8F9FB — 26-10-16 컬러톤 정리) — 달은 다시 '둘레보다 밝은 것' */
.totop[data-ink="day"] .totop__fill-rect { fill: url(#totop-pearl) #F8F9FB; fill-opacity: 1; }   /* 10-16 컬러톤 바꿈-02(옛 #FFFDF6) */
.totop.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .4s var(--ease-out), translate .4s var(--ease-out), visibility 0s, color .4s linear; }
.totop:focus-visible { outline: 2px solid var(--tt); outline-offset: 2px; }
.totop__mark { display: block; width: 74px; height: 29px; translate: 0 -1px; }
.totop__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.totop__dome { transition: translate .4s var(--ease-out), opacity .35s linear; }
.totop__disc { fill: var(--tt); fill-opacity: .12; }
/* 26-10-03 맨 위로 점: 움직이는 것은 점 하나뿐 — 명암 경계 숨 · 호 빛 한 줄은 껐다(점과 겹쳐 산만 0). 채움(페이지 진행)은 그대로 */
.totop__fill-rect { fill: var(--tt); }
.totop__rim { fill: none; stroke: var(--tt); stroke-width: 1.4; stroke-opacity: 1; }   /* 10-03 뒷정리: 1.2 · .92 → 머리글 아이콘과 같은 1.4 · 1(회색 전환 바탕 그림 대비 2.89 → 3.31) */
.totop__glint { display: none; }
.totop__hz-stop { stop-color: var(--tt); }
.totop__horizon { stroke-width: 1; }
/* 점(지름 5 · 휴대폰 4.2): 돔 아래에서 위로 1.1초(부드러운 가속 · 감속) → 위 끝에서 옅어짐 → 1.9초 쉼, 3초마다.
   색 = 잉크(밤 달빛 · 낮 먹). 진행 채움 위를 지나는 동안은 반전색(밤 = 먹)으로 그린 사본이 채움 모양대로 덮는다(#totop-lit, totop.js).
   주황 안 씀: 주황은 커서 태양 · 주요 단추 — 작은 점이 '두 번째 태양'이 되면 튄다(서하 · 아트디렉터) */
.totop { --tt-inv: #0A0B0C; --tt-glow: 1; --tt-dy: -15px; }
.totop[data-ink="day"] { --tt-inv: #111; --tt-glow: 0; }   /* 10-09 흰 달: 종이 위 옛 먹 번짐(.85) 끔 → 달무리(.totop__halo)가 맡는다. 크림 질감은 아랫줄 그대로 1 */
/* 26-10-03 심사: 은색(크림 질감) 바탕에서는 빛무리를 먹 대신 밝은 달빛색 — 어느 바탕에서나 '뒤에서 빛남'(data-ground, totop.js) */
.totop[data-ground="silver"] { --tt-glow-c: #FFFFFF; --tt-glow: 1; }   /* 10-16 컬러톤 바꿈-03(옛 #FFFDF6) */
.totop__dot-c { fill: var(--tt); }
.totop__dot-c--inv { fill: var(--tt-inv); }
/* 점 출발 자리(cy)와 오르는 길이(--tt-dy)는 totop.js가 진행 채움에 맞춘다: 차오른 달빛 경계 4px 위에서 출발(경계에 걸쳐 반쪽만 보이는 출발 0) */
.totop__dot { opacity: 0; animation: totopDotY 3s infinite, totopDotA 3s linear infinite; }
@keyframes totopDotY {
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(.42, 0, .28, 1); }
  36.7%, 100% { translate: 0 var(--tt-dy); }
}
/* 26-10-03(오너 「점이 올라가면서 사라지고 빛이 생기는」): 점은 같은 길로 오르다 위쪽 1/3(17%)부터 작아지며 옅어져 29%에 사라지고,
   사라지는 순간 그 자리(돔 위쪽)에 둥근 빛(지름 14 = 점의 2.8배, 테 · 빛줄기 · 십자 0)이 0.36초에 피어 1.3초에 걸쳐 천천히 스러진다 — '점이 빛이 된다'.
   빛 색 = 돔 뒤 빛무리와 같은 문법(밤 달빛 · 종이 먹 · 은색 밝은 달빛), 채움 위 사본은 반전색. 구석 단추라 가장 밝을 때도 점보다 옅다(서하) */
.totop__dot, .totop__bloom { transform-box: fill-box; transform-origin: center; }
@keyframes totopDotA {
  0% { opacity: 0; scale: 1; } 6% { opacity: .95; }
  17% { opacity: .95; scale: 1; animation-timing-function: cubic-bezier(.4, 0, .7, 1); }
  29%, 100% { opacity: 0; scale: .3; }
}
/* 확인 뒤 서하: 종이 바탕에서 먹 빛은 '번진 얼룩'으로 읽혀 — 밝은 바탕(종이 · 은색)에서는 돔 안 회색 위에 밝은 달빛(#FFFFFF)으로 피운다(진짜 빛) */
.totop__bloom-stop { stop-color: var(--tt-bloom-c, var(--tt-glow-c, var(--tt))); }
.totop__bloom-stop--inv { stop-color: var(--tt-bloom-c, var(--tt-inv)); }
.totop[data-ink="day"] { --tt-bloom-c: #FFFFFF; }   /* 10-16 컬러톤 바꿈-03(옛 #FFFDF6) */
.totop__bloom { opacity: 0; translate: 0 var(--tt-dy); animation: totopBloom 3s infinite; }
@keyframes totopBloom {
  0%, 24% { opacity: 0; scale: .45; animation-timing-function: cubic-bezier(.25, .6, .35, 1); }
  36% { opacity: var(--tt-bloom, 1); scale: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  78%, 100% { opacity: 0; scale: 1.2; }
}
@keyframes totopBloomFast {
  0%, 24% { opacity: 0; scale: .45; animation-timing-function: cubic-bezier(.25, .6, .35, 1); }
  40% { opacity: var(--tt-bloom, 1); scale: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { opacity: 0; scale: 1.2; }
}
/* 돔 뒤 빛무리(마우스 · 포커스): 돔 윤곽 바깥으로만, 지평선 쪽으로 옅게. 밤 = 달빛색, 낮 = 아주 옅은 먹 빛무리. 0.35초에 차오름 */
.totop__glow-stop { stop-color: var(--tt-glow-c, var(--tt)); }
.totop__glow { opacity: 0; transition: opacity .35s var(--ease-out); }
/* 26-10-09 「흰 달」(서하) — 밝은 바탕(data-ink="day")에서만 보이는 층 둘 + 먹 테 · 그늘. 밤 규칙은 그대로(두 층 모두 밤에는 opacity 0).
   · 달 둘레 하늘(.totop__sky): 옛 수묵화처럼 달을 칠하지 않고 둘레를 옅은 먹으로 물들여 달이 스스로 밝아 보이게. 쉴 때 --tt-sky(가장자리 먹 = 값 × .5),
     점이 사라지는 순간 --tt-sky-pk 까지 한 번 짙어졌다 가라앉는다(= totopBloom 과 같은 시각 — '달이 환해지는 숨'). 크림 질감에서는 같은 층이 밝은 달빛(--tt-glow-c)
   · 달무리(.totop__halo): 마우스 · 자판 초점 때 달에서 3px 띄운 밝은 띠 + 그 밖 먹 하늘(종이 바탕만 — 크림 질감은 옛 밝은 빛무리 그대로)
   · 테: 바닥 선을 숨기고 호만(호 길이 79.8 · 바닥 50.8) — 지평선 한 줄 뒤에서 올라오는 달. 그림자(필터 · box-shadow) 0, 쉴 때 --tt-sky 는 .4 를 넘기지 않는다 */
.totop__sky, .totop__halo { opacity: 0; transition: opacity .35s var(--ease-out); }
.totop__sky-r { opacity: var(--tt-sky, 0); animation: totopSky 3s infinite; }
@keyframes totopSky {
  0%, 24% { opacity: var(--tt-sky, 0); animation-timing-function: cubic-bezier(.25, .6, .35, 1); }
  36% { opacity: var(--tt-sky-pk, 0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  78%, 100% { opacity: var(--tt-sky, 0); }
}
.totop[data-ink="day"] { --tt-sky: .3; --tt-sky-pk: .5; }
.totop[data-ink="day"][data-ground="silver"] { --tt-sky: 0; --tt-sky-pk: .45; }
.totop[data-ink="day"] .totop__sky { opacity: 1; }
.totop[data-ink="day"] .totop__disc { fill-opacity: .16; }
.totop[data-ink="day"][data-ground="silver"] .totop__disc { fill: #B0B4BA; fill-opacity: 1; }   /* 어두운 영상 위에서 흐려지지 않게 불투명 */   /* 10-16 컬러톤 바꿈-04(옛 #B4B4AE) */
.totop[data-ink="day"] .totop__rim { stroke-width: 1.2; stroke-dasharray: 79.8 50.8; }
.totop[data-ink="day"][data-ground="silver"] .totop__rim { stroke-width: 1.4; }
.totop[data-ink="day"] .totop__hz-stop:is(:nth-child(2), :nth-child(3)) { stop-opacity: .8; }
/* 10-09 심사: 주황 컬렉션 바탕(data-ground="sweep" — 기본 사이트에는 없고 견줌 주소 ?variant=vermilion 에서만 나온다). 둘레 먹이 주황 위에서는 갈색 그림자로 보여 끄고(숨도 0 — 돔 안 둥근 빛은 그대로), 덜 찬 그늘은 .16 → .10(탁한 주황 덩어리 방지).
   마우스 · 자판 초점 빛도 달무리(흰 띠 + 먹 = 주황 위 갈색 그림자) 대신 크림 질감과 같은 밝은 달빛 빛무리(아래 :is(:hover, :focus-visible) 줄이 달무리를 끈다) */
.totop[data-ink="day"][data-ground="sweep"] { --tt-sky: 0; --tt-sky-pk: 0; --tt-glow-c: #FFFFFF; --tt-glow: 1; }   /* 10-16 컬러톤 바꿈-03(옛 #FFFDF6) */
.totop[data-ink="day"][data-ground="sweep"] .totop__disc { fill-opacity: .10; }
@keyframes totopDotFastY { from { translate: 0 0; } to { translate: 0 var(--tt-dy); } }
@keyframes totopDotFastA { 0% { opacity: 0; scale: 1; } 12% { opacity: .95; } 42% { opacity: .95; scale: 1; } 85%, 100% { opacity: 0; scale: .3; } }
/* 누름: 점이 돔 위로 쏙 빠져나감(0.45초, 점점 빠르게) */
/* → 26-10-03 빛: 누름도 같은 문법 — 점이 돔 위쪽까지 빠르게 올라 사라지며(0.3초) 그 자리에 빛이 확 피고, 돔이 빛을 안고 솟아 사라진다 */
@keyframes totopDotFlyY { from { translate: 0 0; } to { translate: 0 var(--tt-dy); } }
@keyframes totopDotFlyA { 0% { opacity: .95; scale: 1; } 45% { opacity: .95; scale: 1; } 100% { opacity: 0; scale: .3; } }
@keyframes totopBloomFly { 0%, 30% { opacity: 0; scale: .45; } 62% { opacity: var(--tt-bloom, 1); scale: 1.05; } 100% { opacity: var(--tt-bloom, 1); scale: 1.3; } }
/* 26-10-03 §42(오너 「왼쪽 말고 위쪽이나 아래쪽」): 「맨 위로」 글 = 지평선 아래 가운데(서하 · 아트디렉터 — 위쪽은 떠오르는 점 · 빛무리 · 누름 때 솟는 점과 겹침,
   아래쪽은 '지평선 위 달 + 아래 이름' 한 덩어리). 상자 안(포커스 테두리 안)에 들어가고, 긴 말(EN · JA)은 가운데에서 왼쪽으로만 비켜
   오른쪽 끝이 화면 가장자리 16px(휴대폰 = 상자 오른쪽 끝) 안에 머문다 */
.totop__label {
  position: absolute;
  left: 50%;
  top: 51px;                        /* 지평선(상자 y 47) 아래 4px */
  translate: min(-50%, calc(37px + var(--tt-lab-slack, 0px) - 100%)) 0;
  text-align: center;
  overflow: hidden;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--tt);
  pointer-events: none;
}
.totop__label-in { display: block; translate: 0 110%; transition: translate .4s var(--ease-out); }
/* 26-10-03: 마우스 · 포커스 = 돔은 제자리, 뒤에서 빛무리 + 점이 한 번 더 빠르게(0.65초) 올라감 + 「맨 위로」 마스크 상승 */
@media (hover: hover) and (pointer: fine) {
  .totop:hover .totop__glow { opacity: var(--tt-glow); }
  .totop:hover .totop__dot { animation: totopDotFastY .65s cubic-bezier(.4, 0, .25, 1) both, totopDotFastA .65s linear both; }
  .totop:hover .totop__bloom { animation: totopBloomFast 1.7s both; }
  .totop:hover .totop__label-in { translate: 0 0; }
  /* 10-09 흰 달: 종이 = 달무리 켜고 둘레 먹 하늘은 끔(0.35초 맞바꿈 — 겹쳐 진해지지 않게) · 크림 질감 = 옛 밝은 빛무리가 켜지니 둘레 숨만 끔 */
  .totop[data-ink="day"]:not([data-ground="silver"]):hover .totop__halo { opacity: 1; }
  .totop[data-ink="day"]:hover .totop__sky { opacity: 0; }
}
.totop:focus-visible .totop__glow { opacity: var(--tt-glow); }
.totop:focus-visible .totop__label-in { translate: 0 0; }
.totop[data-ink="day"]:not([data-ground="silver"]):focus-visible .totop__halo { opacity: 1; }
.totop[data-ink="day"]:focus-visible .totop__sky { opacity: 0; }
.totop[data-ink="day"][data-ground="sweep"]:is(:hover, :focus-visible) .totop__halo { opacity: 0; }   /* 10-09 심사: 주황 바탕 = 달무리 끔(밝은 빛무리가 맡는다) */
/* 누름: 점이 먼저 쏙 빠져나가고 돔이 위로 솟아 사라진다(0.35초) — motion toTop()의 덮개 · 월출이 이어받는다 */
.totop.is-rising .totop__dot { animation: totopDotFlyY .3s cubic-bezier(.5, 0, .5, 1) both, totopDotFlyA .3s linear both; }
.totop.is-rising .totop__bloom { animation: totopBloomFly .5s cubic-bezier(.25, .6, .35, 1) both; }
.totop.is-rising .totop__dome { translate: 0 -34px; opacity: 0; transition: translate .35s cubic-bezier(.5, 0, .75, 0) .16s, opacity .35s linear .16s; }
.totop.is-rising .totop__sky-r { animation: none; opacity: var(--tt-sky-pk, 0); }   /* 10-09 흰 달: 달이 둘레 빛을 안은 채 솟아 사라짐 */
/* 동작 줄이기 = 점이 돔 위쪽에 멈춰 있는 정지형(빛무리는 옅어짐만) */
/* → 26-10-03 빛: 동작 줄이기 = 점 없음, 돔 위쪽에 빛이 아주 옅게 고정 */
html.is-reduced .totop__dot, html.is-reduced .totop:hover .totop__dot, html.is-reduced .totop.is-rising .totop__dot { animation: none; opacity: 0; }
html.is-reduced .totop__bloom, html.is-reduced .totop:hover .totop__bloom, html.is-reduced .totop.is-rising .totop__bloom { animation: none; opacity: calc(var(--tt-bloom, 1) * .45); scale: 1; }
html.is-reduced .totop__dome, html.is-reduced .totop__label-in { transition: none; }
html.is-reduced .totop__sky-r { animation: none; opacity: var(--tt-sky, 0); }   /* 10-09 흰 달: 둘레 숨 0(쉴 때 값 고정) — 달무리 · 먹 하늘의 옅어짐(0.35초)만 남김 */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) :is(.totop__dot, .totop:hover .totop__dot, .totop.is-rising .totop__dot) { animation: none; opacity: 0; }
  html:not(.motion-full) :is(.totop__bloom, .totop:hover .totop__bloom, .totop.is-rising .totop__bloom) { animation: none; opacity: calc(var(--tt-bloom, 1) * .45); scale: 1; }
  html:not(.motion-full) .totop__sky-r { animation: none; opacity: var(--tt-sky, 0); }
}
/* 26-10-09 둘째 안 「먹달」(취향 대리 안 — 견줌용): 주소 끝 ?totop=b 일 때만(js/ui/totop.js 가 data-variant="b" 를 붙임), 종이 바탕에서만 다르다(크림 질감 · 밤 = 기본 안과 같음).
   먹으로 꽉 채운 달 + 채움 위 점은 달빛 흰색 + 둘레 숨 끔. 사장님이 고르신 뒤 안 쓰는 쪽 규칙과 totop.js 의 한 줄을 지운다 */
.totop[data-variant="b"][data-ink="day"]:not([data-ground="silver"]) { --tt-inv: #EDEFF2; --tt-sky: 0; --tt-sky-pk: 0; }   /* 10-16 컬러톤 바꿈-01(옛 #FFFDF6) */
.totop[data-variant="b"][data-ink="day"]:not([data-ground="silver"]) .totop__fill-rect { fill: #111; fill-opacity: 1; }
.totop[data-variant="b"][data-ink="day"]:not([data-ground="silver"]) .totop__disc { fill-opacity: .06; }
.totop[data-variant="b"][data-ink="day"]:not([data-ground="silver"]) .totop__rim { stroke-width: 1.4; }
.totop[data-variant="b"][data-ink="day"]:not([data-ground="silver"]) .totop__hz-stop:is(:nth-child(2), :nth-child(3)) { stop-opacity: .9; }
html.menu-open .totop, html.is-reader .totop, html.is-overlay .totop { opacity: 0; visibility: hidden; }
@media (max-width: 767px) {
  .totop { --tt-lab-slack: 0px; width: 64px; height: 60px; right: calc(8px + env(safe-area-inset-right)); bottom: calc(4px + env(safe-area-inset-bottom)); }   /* 상자 위 끝 = 바닥 64px(전과 같음), 글 자리만큼 아래로 12px */
  /* 26-10-03 사장님 「맨 위로 원과 출시 알림 원 정렬」(서하): 윗줄 주석이 닫히지 않아 아래 '돔 44' 규칙이 꺼진 채 데스크톱 돔 52가 상자(64) 밖 오른쪽으로 5px 밀려 있었음 →
     지금 보이는 돔 52를 그대로 두고(= 떠 있는 원 지름 52) 상자 가운데로: 돔 가운데 = 원 가운데 = 화면 오른쪽 끝에서 40px, 양쪽 끝 같음. 지평선 높이(상자 y 42)는 그대로 */
  .totop__mark { width: 74px; height: 29px; margin-inline: -5px; translate: 0 -1px; }      /* 돔 52 × 26(옛 돔 44 규칙: width 62.6 · height 24.5 · translate 0 1px) */
  .totop__label { top: 45px; translate: min(-50%, calc(32px - 100%)) 0; font-size: 11px; }   /* 지평선(상자 y 42) 아래 3px · 오른쪽 끝 ≤ 상자 끝 */
}
/* 26-10-03 휴대폰 떠 있는 출시 알림 원(사장님 「라」 · CONSULT_휴대폰_출시알림_자리 · js/ui/notifyfloat.js). 767 이하만 — 태블릿 · 데스크톱은 머리글 단추.
   서하: 원 지름 52 = 맨 위로 돔 지름 52, 같은 세로 축(가운데 = 화면 오른쪽 끝에서 40px → 양쪽 끝도 같음).
   원 아래 끝 ↔ 돔 위 끝 12px(돔 위 끝 = 바닥 48.5px → 원 bottom 60.5px). 누르는 칸 = 투명 테 사방 4px → 60(≥ 44) */
.nfloat { display: none; }
@media (max-width: 767px) {
  .nfloat {
    position: fixed; z-index: var(--z-hud);
    right: calc(14px + env(safe-area-inset-right)); bottom: calc(60.5px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sun); color: var(--umbra); text-decoration: none;
    font-family: var(--ff-body); font-weight: 600; font-size: 12px; line-height: 1.12; letter-spacing: -.01em; text-align: center;
    box-shadow: 0 4px 14px rgba(6, 7, 8, .22); -webkit-tap-highlight-color: transparent;
    opacity: 0; visibility: hidden; translate: 0 10px; scale: .9;
    transition: opacity .4s var(--ease-out) .12s, translate .4s var(--ease-out) .12s, scale .4s var(--ease-out) .12s, visibility 0s linear .52s;
  }
  .nfloat::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }   /* 누르는 칸 60 */
  .nfloat__t { display: block; white-space: pre-line; pointer-events: none; }
  .nfloat.is-on { opacity: 1; visibility: visible; translate: 0 0; scale: 1;
    transition: opacity .4s var(--ease-out) .12s, translate .4s var(--ease-out) .12s, scale .4s var(--ease-out) .12s, visibility 0s; }
  .nfloat--post .nfloat__t { font-size: 11px; }
  :root:lang(en) .nfloat, :root:lang(ja) .nfloat { font-size: 11px; }
  :root:lang(en) .nfloat--post .nfloat__t, :root:lang(ja) .nfloat--post .nfloat__t { font-size: 10.5px; }
  .nfloat:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
  .nfloat:active { scale: .96; }
  html.menu-open .nfloat, html.is-reader .nfloat, html.is-overlay .nfloat { opacity: 0; visibility: hidden; }
}
html.is-reduced .nfloat { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-full) .nfloat { transition: none; } }
/* P2-08('달 세 개' 0): 26-10-03부터 머리글 ◑ 위상 원 자체를 뺐다(모든 폭 목차 = 두 줄 + 작은 달 고리 아이콘만) — 이 폭 따로 고칠 것 없음 */

/* FINAL R1 B7: 휴대폰 누르는 칸 44×44 — 보이는 크기·모습은 그대로, 투명한 가상 요소로 누르는 영역만 넓힌다.
   각 변은 min(0, 50% − 22px) = 이미 44 이상인 쪽은 그대로(이웃 칸과 겹침 0). 「기울여 보기」 · 「이미지로 저장」 · 바닥글 메뉴 · 언어 · 목차 = ::before,
   소리 · 움직임 줄이기(.toggle)는 ::before가 켜짐 점이라 ::after */
@media (max-width: 767px) {
  .hero__tilt, .hero__save, .footer__nav a, .hdr__phase, .hdr__logo, .po__notify { position: relative; }
  /* 휴대폰 점검 M9: 머리글 로고(40) · 상세 창 「출시 알림 신청 →」(41) · s06 시간 단추(32, 이미 absolute)도 같은 방식으로 44 */
  :is(.hero__tilt, .hero__save, .footer__nav a, .lang__btn, .hdr__phase, .hdr__logo, .po__notify, .arc-stop__btn)::before,
  .toggle::after {
    content: '';
    position: absolute;
    inset: min(0px, calc(50% - 22px));   /* 위·아래 %는 높이, 왼·오른쪽 %는 너비 기준 */
  }
}
/* 26-10-03 지피티 의견 3번: 첫 화면 「오늘 밤의 달 저장 →」 · 「기울여 보기」는 모든 폭에서 누르는 칸 44(글자 · 자리 · 모습 그대로) */
.hero__tilt, .hero__save { position: relative; }
:is(.hero__tilt, .hero__save)::before { content: ''; position: absolute; inset: min(0px, calc(50% - 22px)); }

/* 26-10-09 사장님 「상세 페이지 부피감이 다 비슷비슷해서 글이 잘 안 읽혀」: 글 묶음의 크기 · 굵기를 세 단으로 벌린다.
   ① 이름(그대로 · 가장 큼) ② 주요 성분 + 「밤에만 사용합니다.」(굵게 · 중간) ③ 읽는 글(소개 · 사용법 — 한 단 작게 · 보통 굵기 · 살짝 옅게) ④ 영문 이름 · 용량(작게)
   예전: 소개 21 · 성분 25 · 밤에만 21 · 사용법 17~18 · 단추 20(1440 기준) — 17~25 사이에 다 몰려 있었다 */
#product-overlay .po__sub { font-size: 14px; letter-spacing: .04em; opacity: .6; }
#product-overlay .po__desc { font-size: var(--fs-body); line-height: 1.5; row-gap: 0; font-weight: 500; opacity: .84; }   /* 사장님 「소개 두 줄 행간이 너무 넓어」 1.7 → 1.5 */
#product-overlay .po__ing { row-gap: 8px; }
#product-overlay .po__ing-words { font-size: calc(var(--fs-body-l) * 1.3); }
#product-overlay .po__ing-use { font-size: calc(var(--fs-body-l) * .76); }   /* 사장님 「밤에만 사용합니다도 좀 작아도」 18 → 16 */
#product-overlay .po__ing--dot .po__ing-use::before { width: 11px; height: 11px; }
#product-overlay .po__use { font-size: 15px; line-height: 1.4; font-weight: 400; opacity: .72; margin-top: var(--s-4); }
/* 26-10-09 사장님 「출시 알림 신청 — 화살표와 글자 사이 아래 줄이 끊기고, 좀 큰 편」: 글자 밑줄(글과 화살표가 따로 그어져 사이가 끊김) 대신 단추 전체 아래에 한 줄 · 21 → 17px */
#product-overlay .po__notify { font-size: var(--fs-body); font-weight: 600; text-decoration: none; padding: 6px 0 5px; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); transition: border-color var(--d-s) linear; }
#product-overlay .po__notify:hover, #product-overlay .po__notify:focus-visible { border-bottom-color: currentColor; }
@media (max-width: 767px) {
  #product-overlay .po__sub { font-size: 13px; }
  #product-overlay .po__desc { font-size: 15px; line-height: 1.5; }
  #product-overlay .po__use { font-size: 14px; line-height: 1.4; margin-top: var(--s-2); }
}