/* FFFF 브랜드 기반(2026-10-20): 오행 5색·본문 서체·브랜드 컴포넌트(아이브로우·네 기둥 워드마크·인장·삼합 배지)·공통 모션 보정. concept.css 다음에 로드. */
/* =====================================================================
   읽는 순서: ⓪ 선행 수정(concept.css 가 잃은 것 되돌리기) → ① 토큰 → ② 타이포 → ③ 공통 부품 → ④ 키프레임 → ⑤ reduced-motion(맨 끝 한 곳).
   규칙: 움직이는 속성은 transform · opacity · clip-path(+ ink 의 font-weight) 뿐. 이징은 style.css 의 --ease-expo / --ease-back / --ease-io 만 쓴다(리터럴 금지).
   크기 변수 이름이 클래스 이름과 겹치는 곳: 크기 클래스 `.f4.f4-h`(18px 컨테이너) 와 한자 셀 `i.f4-h` — 한자 셀 규칙은 전부 `.f4-c>.f4-h` 로 적어 컨테이너에 닿지 않게 한다.
   ===================================================================== */

/* ---------- ⓪ 선행 수정 ---------- */
/* ① 모바일 하단 탭: concept.css:32 의 nav{padding:4px} 가 apple.css:144 의 safe-area 패딩을 덮어 버린 것을 되돌린다 */
@media (max-width: 760px) {
  nav { position: fixed; left: 0; right: 0; bottom: 0; border-radius: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: none; background: rgba(245,241,234,.92); }
  /* today 포커스 모드: 하단 고정 CTA 가 탭 자리를 쓴다(§5.6) */
  body[data-view=today].focus nav { display: none; }
}
/* 탭 알약: width 전환 대신 transform(translateX + scaleX) 만 움직인다. 폭은 motion.js placeNav 가 가장 넓은 탭으로 한 번 정한다 */
nav .nav-ind { transform-origin: 0 50%; }
nav .nav-ind.ready { transition: transform .5s var(--ease-expo); }
/* ② Syne 에 한글이 들어가던 곳(폴백 산세리프) → Hahmlet */
.pk-k, .tag .lbl, .bt h3, .s-head, .tk { font-family: var(--title); }
/* ③ 먹 번짐: Hahmlet 가변 300..900 안에서 400 → 800 */
@keyframes ink { from { font-weight: 400; } to { font-weight: 800; } }
#today-greet b { font-weight: 800; }
/* ④ 로고 옆 체커 점: 무한 회전 삭제 */
.logo .wm::after { animation: none; }
/* ⑤ 무한 애니 삭제: 스테퍼 맥동(fspulse) → 정적 코발트 링, 카드 과정 아이콘, 용신 라벨 글로우(ex-glow), 홈 제목 hue */
.fs.on .fs-ic { animation: none; box-shadow: 0 0 0 4px var(--cobalt-s); }
.pr.on .pr-ic { animation: none; }
.ex-lab.yong text:first-child { animation-name: rise; animation-duration: .6s; animation-iteration-count: 1; animation-delay: calc(var(--i) * 120ms + 700ms); }
.hm-title { animation: none; }
/* width 를 움직이던 것 → transform: 태그 점수 막대(grow), 통합 풀이 막대의 width 전환 */
.tag .meter i { width: var(--w); transform-origin: left center; animation: barx 1.1s var(--ease-expo) .3s both; }
.mg-row .bar i { transition: none; }
/* ⑥ 촬영 빈 틀 점멸: 3회만 */
.ob-photo:not(.has) .ob-frame::after { animation-iteration-count: 3; }
/* 홈 카드 스트립: 화면 밖(.off)·탭 숨김(body.hidden) 이면 멈춘다 — home.js 가 IO/visibilitychange 로 클래스를 붙인다 */
.hm-strip.off .hm-track, body.hidden .hm-track { animation-play-state: paused; }

/* ---------- ① 토큰 (§3) ---------- */
:root {
  --font: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --hanja: 'Noto Serif KR', 'Hahmlet', 'Apple SD Gothic Neo', serif;
  /* 오행 5색 — core.js ELHEX 와 같은 값(CSS = JS 단일값). 크림 바탕 대비 木 3.9 · 火 4.5 · 土 3.5 · 金 4.3 · 水 4.9 */
  --el0: #3d8f63; --el1: #cf4b58; --el2: #b07f2a; --el3: #7d7f8a; --el4: #3b6e9c;
  --level-high: var(--tangerine); --level-mid: var(--cobalt); --level-low: var(--muted);
  --src-saju: var(--cobalt); --src-face: var(--tangerine); --src-palm: var(--text);
  --f4-h: 18px; --f4-head: 28px; --f4-stage: clamp(40px, 11vw, 56px);
  --f4-gap: .18em; --f4-persp: 320px;
  --ink-stroke: 1.3px; --base-h: 3px;
  --flip-dur: .7s; --flip-out: .45s; --flip-stagger: 70ms;
  --src3: 8px;
  --sticky-cta: calc(64px + env(safe-area-inset-bottom, 0px));
  --strip-cell: 48px; --strip-cell-h: 72px;
  --row-step: 40ms; --why-step: 120ms;
}

/* ---------- ② 타이포 보정 (§4) ---------- */
.h1, .td-title, .pk-q, .ob-q { text-wrap: balance; word-break: keep-all; }
.hint, .pk-note, .f4-prog-say, .focus-sep { word-break: keep-all; }
/* 날짜 한 줄: <b class="dt">10.24</b> <span class="wd">토</span> · <em class="rel">4일 뒤</em> (값은 fmtDate/dateLabel 그대로, span 으로 나눌 뿐) */
.dline .dt, .dy-date .dt, .sc-ctx .dt, .eyebrow .dt { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dline .wd, .dy-date .wd { font-weight: 600; }
.dline .rel, .dy-date .rel, .sc-ctx .rel { font-style: normal; font-weight: 700; color: var(--cobalt); }
.num, .n.num { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- ③ 공통 부품 ---------- */
/* 5.1 아이브로우 — 기존 .sc-eyebrow 는 별칭 */
.eyebrow, .sc-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: none; color: var(--cobalt); word-break: keep-all; }
.eyebrow::before, .sc-eyebrow::before { content: ''; flex: none; width: 14px; height: 6px; border-radius: 2px; background: var(--checker); background-size: 6px 6px; }
.eyebrow .num, .sc-eyebrow .num { font-family: var(--display); letter-spacing: .06em; }
.eyebrow.play, .sc-eyebrow.play { animation: fadeup .45s var(--ease-expo) both; } /* full 일 때만 .play, 그 외 정지 */

/* 5.2 F4 네 기둥 워드마크
   <span class="f4 f4-head" role="img" data-ctx="tag" aria-label="…">
     <b class="f4-c" style="--k:0"><i class="f4-f" aria-hidden="true">F</i><i class="f4-h el1" aria-hidden="true">丙</i><i class="f4-base"></i></b> ×4  (빈 칸 = b.f4-c.empty, F 만)
   크기: .f4-h(18) .f4-head(28) .f4-stage(56) · 2줄 .f4-2(천간 i.f4-h + 지지 i.f4-h.f4-b) · 일주 b.f4-c.me(검정 배경)
   상태(.f4 에): .flip(앞→뒤 재생) .back(뒤→앞) .done(최종 즉시) · 한 칸만: b.f4-c.reflip(재생) / b.f4-c.done(즉시) */
.f4 { --cell: var(--f4-h); display: inline-grid; grid-auto-flow: column; gap: var(--f4-gap); perspective: var(--f4-persp); vertical-align: middle; line-height: 1; }
.f4.f4-h { --cell: var(--f4-h); gap: .2em; }
.f4.f4-head { --cell: var(--f4-head); }
.f4.f4-stage { --cell: var(--f4-stage); --ink-stroke: 2px; --base-h: 5px; gap: 10px; }
.f4-c { position: relative; display: grid; width: var(--cell); height: calc(var(--cell) * 1.1); place-items: center; transform-style: preserve-3d; }
.f4-c > i { grid-area: 1 / 1; line-height: 1; font-style: normal; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.f4-c > .f4-f { font: 800 var(--cell)/1 var(--display); letter-spacing: 0; color: transparent; -webkit-text-stroke: var(--ink-stroke) var(--text); }
.f4-c > .f4-h { font: 800 var(--cell)/1 var(--hanja); transform: rotateX(90deg); opacity: 0; }
.f4-c > .f4-base { align-self: end; width: 100%; height: var(--base-h); border-radius: 1px; background: var(--checker); background-size: var(--base-h) var(--base-h); transform: scaleX(0); transform-origin: left; }
.f4-c.empty > .f4-h, .f4-c.empty > .f4-base { display: none; }
.f4-c.empty { padding: 0; border: 0; border-radius: 0; text-align: inherit; grid-column: auto; font-size: inherit; font-weight: inherit; color: inherit; } /* style.css .empty(빈 목록 상자) 와 이름이 겹친다 */
.f4[data-ctx=tag] .f4-c:last-child > .f4-base, .f4[data-ctx=plan] .f4-c:last-child > .f4-base { background: var(--tangerine); }
.f4-c.me { background: var(--text); border-radius: .16em; }
.f4-c.me > .f4-h { color: #fff; }
.f4-c.me > .f4-f { -webkit-text-stroke-color: #fff; }
/* 2줄 변형: 윗줄 천간 · 아랫줄 지지 · 받침 */
.f4.f4-2 .f4-c { height: auto; grid-template-rows: var(--cell) var(--cell) var(--base-h); row-gap: .12em; padding: .08em 0 0; }
.f4.f4-2 .f4-c > i { grid-area: auto; grid-column: 1; }
.f4.f4-2 .f4-c > .f4-f { grid-row: 1 / 3; }
.f4.f4-2 .f4-c > .f4-h { grid-row: 1; }
.f4.f4-2 .f4-c > .f4-h.f4-b { grid-row: 2; }
.f4.f4-2 .f4-c > .f4-base { grid-row: 3; }
/* 최종 상태(즉시) */
.f4.done .f4-c:not(.empty) > .f4-f, .f4-c.done:not(.empty) > .f4-f { opacity: 0; transform: rotateX(-90deg); }
.f4.done .f4-c:not(.empty) > .f4-h, .f4-c.done:not(.empty) > .f4-h { opacity: 1; transform: none; }
.f4.done .f4-c:not(.empty) > .f4-base, .f4-c.done:not(.empty) > .f4-base { transform: none; }
/* 앞 → 뒤 (F 가 넘어가고 한자가 찍히고 받침이 깔린다) · 칸마다 --k × 70ms */
.f4.flip .f4-c:not(.empty) > .f4-f { animation: f4-out var(--flip-out) var(--ease-io) both; animation-delay: calc(var(--k) * var(--flip-stagger)); }
.f4.flip .f4-c:not(.empty) > .f4-h { animation: px-flip var(--flip-dur) var(--ease-back) both; animation-delay: calc(var(--k) * var(--flip-stagger) + 350ms); }
.f4.flip .f4-c:not(.empty) > .f4-h.f4-b { animation-delay: calc(var(--k) * var(--flip-stagger) + 490ms); }
.f4.flip .f4-c:not(.empty) > .f4-base { animation: barx .5s var(--ease-expo) both; animation-delay: calc(var(--k) * var(--flip-stagger) + 900ms); }
.f4.flip .f4-c > i { will-change: transform, opacity; }
/* 뒤 → 앞 (홈 사이클) */
.f4.back .f4-c:not(.empty) > .f4-h { animation: f4-hout var(--flip-out) var(--ease-io) both; animation-delay: calc(var(--k) * var(--flip-stagger)); }
.f4.back .f4-c:not(.empty) > .f4-f { animation: f4-fin var(--flip-dur) var(--ease-back) both; animation-delay: calc(var(--k) * var(--flip-stagger) + 350ms); }
.f4.back .f4-c:not(.empty) > .f4-base { transform: scaleX(0); transition: transform .3s var(--ease-io); }
/* 한 칸만 다시(지연 없음, --k 무시) */
.f4-c.reflip:not(.empty) > .f4-f { animation: f4-out var(--flip-out) var(--ease-io) both; }
.f4-c.reflip:not(.empty) > .f4-h { animation: px-flip var(--flip-dur) var(--ease-back) 350ms both; }
.f4-c.reflip:not(.empty) > .f4-h.f4-b { animation-delay: 490ms; }
.f4-c.reflip:not(.empty) > .f4-base { animation: barx .5s var(--ease-expo) 900ms both; }
/* 보관함 슬롯 F(정지 윤곽선) */
.slot-f { font: 800 14px/1 var(--display); color: transparent; -webkit-text-stroke: var(--ink-stroke) var(--text); }

/* 5.3 삼합 배지 .src3 — <span class="src3" role="img" aria-label="…"><i class="s on" data-k="saju">사주</i><i class="s on" data-k="face">관상</i><a class="s" data-k="palm" href="#photos">손금</a></span>
   상태(.s): .on 읽음 · .run 읽는 중(pkblink, 로딩 중에만) · .wait 사진만 있음(반 채움, button[data-retry]) · .fail 읽지 못함(점선, button[data-retry]) · 없음(윤곽선 ○, a[href=#photos]) */
.src3 { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.src3 .s { --c: var(--src-saju); display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; font: 700 11px/1 var(--font); font-style: normal; color: var(--text); text-decoration: none; white-space: nowrap; cursor: default; }
.src3 .s[data-k=face] { --c: var(--src-face); } .src3 .s[data-k=palm] { --c: var(--src-palm); }
.src3 .s::before { content: ''; flex: none; box-sizing: border-box; width: var(--src3); height: var(--src3); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); }
.src3 .s.on::before { background: var(--c); box-shadow: none; }
.src3 .s.run::before { background: var(--c); box-shadow: none; animation: pkblink .8s infinite alternate; }
.src3 .s.wait::before { background: var(--c); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3.5px var(--c); }
.src3 .s.fail::before { box-shadow: none; border: 1.5px dashed var(--c); }
.src3 .s:not(.on):not(.run) { color: var(--muted); }
.src3 .s[data-retry], .src3 a.s { cursor: pointer; }
.src3 .s em { font-style: normal; font-weight: 600; }
.src3.lg { --src3: 14px; gap: 14px; } .src3.lg .s { font-size: 12px; gap: 6px; }
.src3.lg .s.on.pop::before { animation: in-pop .6s var(--ease-back) both; } /* 방금 채워진 구슬만(src3() 가 .pop 를 붙인다) */
.src3.txt .s::after { content: '–'; color: var(--muted); font-weight: 800; }
.src3.txt .s.on::after { content: '✓'; color: var(--text); }
.src3.txt .s.run::after { content: '…'; }

/* 5.4 도장 .seal(상·중·하) · 일진 도장 b.ij.hj */
.seal { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font: 800 12px/1 var(--title); font-style: normal; transform: rotate(-4deg); }
.seal.lv-high { background: var(--level-high); color: var(--text); }
.seal.lv-mid { background: var(--level-mid); color: #fff; }
.seal.lv-low { box-shadow: inset 0 0 0 1.5px var(--level-low); color: var(--level-low); }
.seal.stamp { animation: stamp .7s var(--ease-back) both; }
.ij.hj { display: inline-flex; align-items: center; gap: 1px; margin: 0; grid-template-columns: none; font: 800 22px/1 var(--hanja); color: var(--text); }
.ij.hj i { font-style: normal; } /* 천간 i.elN 오행색 · 지지 i 잉크 */
.ij.hj.stamp i { animation: stamp .7s var(--ease-back) both; animation-delay: calc(var(--j, 0) * 220ms); }
.dy-month .hj { font: 800 14px/1 var(--hanja); color: var(--text); }

/* 5.5 봉인 띠 .band.tear — 카드·CTA 윗변에 두고 누르는 순간 .open */
.band { position: absolute; left: 14px; right: 14px; top: -1px; height: 6px; border-radius: 2px; background: var(--checker); background-size: 6px 6px; clip-path: inset(0); pointer-events: none; }
.band.tear { clip-path: inset(0 50% 0 50%); }
.band.tear.open { clip-path: inset(0); transition: clip-path .5s var(--ease-expo); }

/* 5.6 하단 고정 CTA — <div class="sticky-cta" hidden><span class="band tear"></span><span class="sc-ctx">…</span><a class="btn big" href="#rec/…">…</a></div> · 보이면 .on */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; gap: 12px; align-items: center; min-height: var(--sticky-cta); box-sizing: border-box; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(245,241,234,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(100%); transition: transform .35s var(--ease-expo); }
.sticky-cta[hidden] { display: none; }
.sticky-cta.on { transform: none; }
.sticky-cta .band { top: 0; }
.sticky-cta .sc-ctx { flex: 1 1 auto; min-width: 0; font: 600 13px/1.3 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .sc-ctx .dt, .sticky-cta .sc-ctx .n { font-family: var(--display); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sticky-cta .btn { flex: none; white-space: nowrap; }
body.has-sticky main { padding-bottom: calc(var(--sticky-cta) + 24px); }

/* 5.7 14일 띠 .dstrip — <div class="dstrip" role="listbox"><button class="ds" role="option" aria-selected="true" data-date="…" style="--i:0"><b>21</b><span>수</span><i class="lv mid"></i></button>…</div> · 등장은 .dstrip.play(full 만) */
.dstrip { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dstrip::-webkit-scrollbar { display: none; }
.ds { flex: 0 0 var(--strip-cell); height: var(--strip-cell-h); scroll-snap-align: center; display: grid; place-content: center; justify-items: center; gap: 2px; margin: 0; padding: 0; border: 0; background: var(--card); color: var(--text); border-radius: 12px; box-shadow: var(--shadow-s); font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; cursor: pointer; }
.ds span { font: 700 10px/1 var(--font); color: var(--muted); }
.ds .lv { width: 6px; height: 6px; border-radius: 50%; }
.ds .lv.high, .lv-dot.high { background: var(--tangerine); }
.ds .lv.mid, .lv-dot.mid { box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.ds .lv.low, .lv-dot.low { opacity: .3; background: var(--muted); }
.ds::after { content: ''; width: 100%; height: 3px; border-radius: 2px; background: var(--checker); background-size: 3px 3px; transform: scaleX(0); transition: transform .3s var(--ease-expo); }
.ds[aria-selected=true]::after { transform: none; }
.ds[aria-selected=true] { box-shadow: var(--shadow-s), inset 0 0 0 1.5px var(--cobalt); }
.ds:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.ds:active { transform: scale(.96); }
.dstrip.play .ds { animation: rise .5s var(--ease-expo) both; animation-delay: calc(var(--i) * var(--row-step)); }

/* 5.8 날짜 행 .dy-row / 월주 구분선 .dy-month / 스켈레톤 .dy-row.sk / 오늘 고정 행 .dy-row.today
   <button class="dy-row" data-date="…" style="--i:1" aria-label="…"><b class="ij hj"><i class="el2">己</i><i>巳</i></b><span class="dy-main"><span class="dy-date"><b class="dt">10.24</b> <span class="wd">토</span> · <em class="rel">4일 뒤</em></span><span class="dy-why">…</span><span class="dy-flags"><i>육합</i></span></span><span class="dy-score"><b class="n">87</b><i class="seal lv-high">상</i></span><span class="dy-go" aria-hidden="true">›</span></button>
   목록 컨테이너 .dy-list(+.wipe 로 와이프) · 첫 8행만 .dy-row.rise(full) */
.dy-list { display: grid; gap: 8px; }
.dy-list.wipe { animation: wipe-y .6s var(--ease-expo) both; }
.dy-month { position: sticky; top: calc(48px + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--bg); font: 700 12px/1.4 var(--font); color: var(--muted); padding: 10px 0 6px; word-break: keep-all; }
.dy-month .num { font-family: var(--display); letter-spacing: .02em; }
.dy-row { display: grid; grid-template-columns: 44px 1fr auto 16px; gap: 12px; align-items: center; width: 100%; min-height: 64px; margin: 0; padding: 12px 14px; box-sizing: border-box; border: 0; background: var(--card); color: var(--text); border-radius: var(--r-s); box-shadow: var(--shadow-s); font: inherit; text-align: left; cursor: pointer; transition: transform .2s var(--ease-expo); }
.dy-row:active { transform: scale(.98); }
.dy-row:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.dy-row.rise { animation: rise .5s var(--ease-expo) both; animation-delay: calc(var(--i) * var(--row-step)); }
.dy-row .ij.hj { justify-self: center; }
.dy-main { display: grid; gap: 3px; min-width: 0; }
.dy-date { font: 600 13px/1.3 var(--font); color: var(--text); }
.dy-date .dt { font-size: 15px; }
.dy-why { font: 400 13px/1.4 var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.dy-flags i { font: 700 10px/1.4 var(--font); font-style: normal; padding: 2px 6px; border-radius: 999px; background: var(--cobalt-s); color: var(--cobalt); }
.dy-score { display: inline-flex; align-items: center; gap: 6px; }
.dy-score .n { font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.dy-go { color: var(--line); font-size: 18px; line-height: 1; text-align: right; }
.dy-row.today { box-shadow: var(--shadow-s), inset 0 0 0 2px var(--cobalt); }
.dy-row.today .dy-date::after { content: '오늘도 괜찮아요'; margin-left: 6px; font: 700 10px/1.4 var(--font); padding: 2px 7px; border-radius: 999px; background: var(--cobalt); color: #fff; vertical-align: 1px; }
.dy-row.sk { pointer-events: none; cursor: default; box-shadow: none; }
.dy-row.sk .sk-b { display: block; height: 12px; border-radius: 6px; background: var(--line); }
.dy-row.sk .sk-b.hj { width: 32px; height: 24px; justify-self: center; }
.dy-row.sk .sk-b.n { width: 28px; height: 20px; }
.dy-row.sk .dy-main .sk-b { width: var(--w, 60%); }
.dy-note { font: 500 13px/1.5 var(--font); color: var(--muted); word-break: keep-all; margin: 8px 0; }

/* 5.9 세로 합류 .why-3.cf + 합의 노드 .why-node — 등장 .why-3.cf.in(리더선) · .why-node.on(chipin). short/none 은 즉시 */
.why-3.cf { position: relative; padding-left: 14px; }
.why-3.cf::before { content: ''; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1.5px; background: var(--cobalt); clip-path: inset(0 0 100% 0); }
.why-3.cf.in::before { clip-path: inset(0); transition: clip-path .5s var(--ease-expo); }
.why-3.cf.in li { animation: rise .5s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * var(--why-step) + 200ms); }
.why-3 .src.dim { background: var(--bg2); color: var(--muted); }
.why-node { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 700 13px/1.4 var(--font); color: var(--text); word-break: keep-all; }
.why-node i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.why-node[data-state=aligned] i { background: var(--tangerine); box-shadow: none; }
.why-node[data-state=partial] i { box-shadow: inset 0 0 0 1.5px var(--muted); }
.why-node.on { animation: chipin .55s var(--ease-back) both; animation-delay: 620ms; }

/* 5.11 체커 받침 진행 .f4-prog — --p = 단계/5 · 문구 .f4-prog-say */
.f4-prog { display: block; height: 4px; border-radius: 2px; background: var(--checker); background-size: 4px 4px; transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .7s var(--ease-expo); }
.f4-prog-say { margin: 6px 0 0; font: 600 12px/1.4 var(--font); color: var(--muted); }

/* ---------- ④ 키프레임 ---------- */
@keyframes f4-out { 60% { opacity: 0; } to { transform: rotateX(-90deg); opacity: 0; } }
@keyframes f4-hout { 60% { opacity: 0; } to { transform: rotateX(90deg); opacity: 0; } }
@keyframes f4-fin { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes px-flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } } /* concept.css 와 같은 이름으로 재선언(opacity 포함) → .px-ch 와 .f4-h 가 같은 키프레임 */
@keyframes in-merge { to { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(.45); opacity: .35; } } /* --tx/--ty = 링 중심까지 거리(px) */
@keyframes wipe-x { to { clip-path: inset(0); } }
@keyframes wipe-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ---------- ⑤ reduced-motion (§9, 한 곳) — 최종 상태 즉시 ---------- */
@media (prefers-reduced-motion: reduce) {
  .f4-c > .f4-f, .f4-c > .f4-h, .f4-c > .f4-base, .src3 .s, .src3 .s::before, .seal, .ij.hj i, .why-3.cf li, .why-3.cf::before, .why-node, .dy-row, .dy-list, .ds, .dstrip .ds, .in-orb, .in-path, .in-ring, .in-branch, .focus-cta, .sticky-cta, .band, .f4-prog, .slot-f, .ff-chain > *, .eyebrow, .sc-eyebrow, .tag .meter i, .nav-ind { animation: none !important; transition: none !important; opacity: 1 !important; clip-path: none !important; }
  .f4-c:not(.empty) > .f4-f { opacity: 0 !important; transform: rotateX(-90deg) !important; }
  .f4-c:not(.empty) > .f4-h { opacity: 1 !important; transform: none !important; }
  .f4-c:not(.empty) > .f4-base { transform: none !important; }
  .f4.back .f4-c:not(.empty) > .f4-f { opacity: 1 !important; transform: none !important; }
  .f4.back .f4-c:not(.empty) > .f4-h { opacity: 0 !important; }
  .f4.back .f4-c:not(.empty) > .f4-base { transform: scaleX(0) !important; }
  .f4-c.empty > .f4-f { opacity: 1 !important; transform: none !important; }
  .src3 .s.run::before { animation: none !important; }
  .sticky-cta:not(.on) { transform: translateY(100%) !important; }
  .band.tear:not(.open) { clip-path: inset(0 50% 0 50%) !important; }
  .ds::after { transition: none !important; }
}