/* 꿈이 감옥이 된 원장들 — 11기 무료 라이브 발표자료 */

:root {
  --ink: #1c1916;
  --paper: #f3ece3;
  --terra: #c8693f;
  --terra-soft: #e3a07f;
  --gray: #8a8580;
  --green: #2f5d50;
  --gold: #e8b64c;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --W: 1920px;
  --H: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: "PF Sans", "Apple SD Gothic Neo", sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }

/* ---------- stage ---------- */
#stage { position: absolute; left: 50%; top: 50%; width: var(--W); height: var(--H); transform-origin: 50% 50%; }
.slide { position: absolute; inset: 0; display: none; overflow: hidden; padding: 120px 150px 110px; }
.slide.current { display: flex; flex-direction: column; justify-content: center; }
.slide:not(.current) { display: none !important; }
.slide.hide10 { display: none !important; }

/* ---------- themes ---------- */
.slide.t-dark  { --bg: #141210; --fg: #ede6dc; --dim: #6c655e; --line: rgba(237,230,220,.12); --card: rgba(255,255,255,.04); --acc: var(--terra); background: var(--bg); color: var(--fg); }
.slide.t-dusk  { --bg: #171310; --fg: #f1e9de; --dim: #7a6f65; --line: rgba(241,233,222,.14); --card: rgba(255,240,225,.05); --acc: #e07a48; color: var(--fg);
  background: radial-gradient(1200px 900px at calc(50% + var(--k, 0) * 10%) 40%, rgba(224, 122, 72, calc(.08 + var(--k, 0) * .22)), transparent 70%), #171310; }
.slide.t-paper { --bg: #f3ece3; --fg: #1c1916; --dim: #a69d93; --line: rgba(28,25,22,.10); --card: rgba(255,255,255,.55); --acc: #b9572c; background: var(--bg); color: var(--fg); }
.slide.t-white { --bg: #ffffff; --fg: #1c1916; --dim: #a8a29b; --line: rgba(28,25,22,.09); --card: #f7f4f0; --acc: #b9572c; background: var(--bg); color: var(--fg); }
.slide.t-black { --bg: #0c0b0a; --fg: #f3ece3; --dim: #5d5751; --line: rgba(243,236,227,.1); --card: rgba(255,255,255,.04); --acc: var(--terra); background: var(--bg); color: var(--fg); }

/* grain */
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.t-paper::after, .t-white::after { opacity: .07; mix-blend-mode: multiply; }

/* motifs */
.motif { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.motif-bars i { width: 2px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(237,230,220,.07) 20%, rgba(237,230,220,.07) 80%, transparent); }
.motif-bars i:nth-child(n+3):nth-last-child(n+3) { opacity: 0; }
.t-dusk .motif-bars i:nth-child(1), .t-dusk .motif-bars i:nth-last-child(1) { transform: translateX(calc(var(--k,0) * -30px)); }
.motif-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; background-position: -1px -1px; opacity: .55;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); }
.slide > .body, .slide > .slide-title, .slide > .slide-sub, .slide > .step, .slide > .spine, .slide > div:not([class]) { position: relative; z-index: 1; }

/* ---------- chrome ---------- */
.chrome-top { position: absolute; top: 48px; left: 150px; right: 150px; display: flex; justify-content: space-between; align-items: baseline; font-family: "PF Mono", monospace; font-size: 19px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; z-index: 2; }
.chrome-top .q { color: var(--acc); font-weight: 600; }
.chrome-top .qt { font-family: "PF Sans"; letter-spacing: 0; text-transform: none; font-size: 21px; margin-left: 18px; color: var(--dim); font-weight: 500; }
.chrome-bot { position: absolute; bottom: 42px; left: 150px; font-family: "PF Mono", monospace; font-size: 16px; letter-spacing: .14em; color: var(--dim); z-index: 2; }

.slide-title { font-family: "PF Mono", monospace; font-size: 22px; letter-spacing: .2em; color: var(--acc); text-transform: uppercase; margin-bottom: 34px; font-weight: 600; }
.slide-sub { font-size: 30px; font-weight: 700; color: var(--fg); margin: -14px 0 34px; letter-spacing: -.01em; }

/* ---------- steps (progressive reveal) ---------- */
.step { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity .55s var(--out), transform .8s var(--spring), filter .55s var(--out); }
.step.on { opacity: 1; transform: none; filter: none; }
.step.past { opacity: .42; }
.step.past .num, .step.past strong { color: inherit; }

.body { display: flex; flex-direction: column; gap: 26px; max-width: 1560px; }
.ln { font-size: 40px; line-height: 1.5; font-weight: 500; letter-spacing: -.012em; }
.ln strong { font-weight: 800; color: var(--acc); }
.ln.sm { font-size: 34px; }
.big { font-family: "PF Sans", sans-serif; font-weight: 800; font-size: 64px; line-height: 1.3; letter-spacing: -.035em; margin-top: 18px; }
.big.huge { font-size: 104px; line-height: 1.16; font-weight: 900; }
.big .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(4deg); transition: opacity .5s var(--out), transform .7s var(--spring); transition-delay: calc(var(--i) * 26ms); white-space: pre; }
.step.on .big .ch, .step.on.big .ch { opacity: 1; transform: none; }
.big .hl { color: var(--acc); }
.confirm { outline: 3px dashed var(--gold); outline-offset: 10px; border-radius: 6px; }
.confirm-tag { display: inline-block; font-family: "PF Mono"; font-size: 18px; color: #1c1916; background: var(--gold); padding: 4px 12px; border-radius: 4px; margin-right: 14px; vertical-align: middle; letter-spacing: .06em; }
.stage-note { display: none; }

/* ---------- slide types ---------- */
/* 인용 */
.ty-quote { display: flex; flex-direction: column; justify-content: center; }
.ty-quote .body { max-width: 1620px; }
.ty-quote .ln { font-size: 32px; color: var(--dim); font-family: "Apple SD Gothic Neo", "PF Sans", sans-serif; letter-spacing: -.01em; }
.ty-quote .big { font-size: 92px; font-weight: 900; line-height: 1.2; }
.qmark { position: relative; font-size: 300px; line-height: .68; height: 150px; font-weight: 900; color: var(--acc); flex: none; letter-spacing: -.05em; }
.qlabel { font-family: "PF Mono"; font-size: 22px; letter-spacing: .36em; color: var(--acc); margin-bottom: 18px; }

/* 장면 */
.ty-scene .ln:first-child { font-family: "PF Mono"; font-size: 30px; color: var(--acc); letter-spacing: .06em; }
.ty-scene .ln { border-left: 3px solid var(--line); padding-left: 30px; }
.ty-scene .big { border: 0; padding: 0; }

/* 오해 */
.ty-myth .ln { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 32px; color: color-mix(in oklab, var(--fg) 75%, var(--dim)); }

@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* 그 책 */
.slide.current.ty-book { display: grid; align-content: center; grid-template-columns: 210px 1fr; gap: 70px; align-items: start; }
.ty-book .spine { grid-row: 1 / 4; align-self: stretch; min-height: 420px; border-right: 2px solid var(--line); display: flex; align-items: flex-end; padding-bottom: 20px; }
.ty-book .spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "PF Mono"; letter-spacing: .4em; font-size: 22px; color: var(--acc); }
.ty-book .slide-title { grid-column: 2; }
.ty-book .body { grid-column: 2; gap: 20px; }
.ty-book .ln { font-size: 36px; }
.ty-book .big { font-size: 58px; }
.ty-book .step { clip-path: inset(0 100% 0 0); transform: none; filter: none; transition: clip-path .9s var(--out), opacity .3s; }
.ty-book .step.on { clip-path: inset(0 -20px 0 0); }

/* 펀치라인 */
.ty-punch { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ty-punch .big { font-size: 96px; font-weight: 900; max-width: 1600px; }
.ty-punch .ln { color: var(--dim); }

/* 전환 */
.ty-turn { display: flex; flex-direction: column; justify-content: center; }
.turn-count { position: absolute; top: 120px; right: 150px; font-family: "PF Mono"; font-size: 26px; letter-spacing: .2em; color: var(--dim); }
.turn-count b { color: var(--acc); font-size: 64px; letter-spacing: 0; margin-right: 6px; }
.turn-drop { font-size: 44px; color: var(--dim); position: relative; display: inline-block; padding: 6px 0; font-weight: 500; }
.turn-drop::before { content: "버릴 생각"; display: block; font-family: "PF Mono"; font-size: 20px; letter-spacing: .3em; margin-bottom: 14px; }
.turn-drop .txt { position: relative; }
.turn-drop .txt::after { content: ""; position: absolute; left: 0; top: 54%; height: 4px; width: 0; background: var(--dim); transition: width .7s var(--out) .45s; }
.turn-drop.on .txt::after { width: 100%; }
.turn-drop.on { animation: sink 1.2s var(--out) 1s forwards; }
@keyframes sink { to { opacity: .28; transform: translateY(14px); } }
.turn-keep-label { font-family: "PF Mono"; font-size: 20px; letter-spacing: .3em; color: var(--acc); margin-top: 60px; }
.ty-turn .big { font-size: 74px; font-weight: 900; position: relative; display: inline; background-image: linear-gradient(var(--acc), var(--acc)); background-size: 0 6px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 1.2s var(--out) .6s; padding-bottom: 6px; }
.ty-turn .step.on .big, .ty-turn .big.on { background-size: 100% 6px; }

/* 이번 주 */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 10px; }
.act { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 36px 38px 40px; min-height: 300px; display: flex; flex-direction: column; gap: 26px; }
.act .k { font-family: "PF Mono"; font-size: 24px; letter-spacing: .2em; color: var(--acc); font-weight: 700; }
.act .v { font-size: 32px; line-height: 1.45; font-weight: 600; }
.act .v.long { font-size: 28px; }
.act.step { transform: translateY(60px) scale(.96); }
.act.step.on { transform: none; }
.act.past { opacity: .55; }
.nextq { margin-top: 40px; font-size: 30px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 28px; }
.nextq b { color: var(--acc); font-family: "PF Mono"; font-weight: 600; letter-spacing: .1em; margin-right: 18px; font-size: 22px; }

/* ---------- diagrams ---------- */
.dg { margin: 6px 0 4px; }
.dg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 32px; }
.dg-table th { font-family: "PF Mono"; font-size: 21px; letter-spacing: .14em; color: var(--acc); text-align: left; font-weight: 600; padding: 0 26px 18px; text-transform: uppercase; }
.dg-table td { padding: 16px 26px; border-top: 1px solid var(--line); line-height: 1.35; font-weight: 500; }
.dg-table td:first-child { font-weight: 800; white-space: nowrap; }
.dg-table tr.row { opacity: 0; transform: translateX(-30px); transition: opacity .5s var(--out), transform .7s var(--spring); transition-delay: calc(var(--i) * 110ms + 120ms); }
.step.on .dg-table tr.row { opacity: 1; transform: none; }
.dg-table tr.em td { color: var(--acc); font-weight: 800; }
.dg-table.cols-4 { font-size: 30px; } .dg-table.cols-5, .dg-table.cols-6 { font-size: 26px; }

.dg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 0; }
.dg-flow .node { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 18px 32px; font-size: 32px; font-weight: 700; opacity: 0; transform: scale(.85); transition: opacity .45s var(--out), transform .6s var(--spring); transition-delay: calc(var(--i) * 140ms + 100ms); }
.dg-flow .node.hot { border-color: var(--acc); color: var(--acc); }
.dg-flow .arr { width: 70px; height: 24px; opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i) * 140ms + 60ms); }
.dg-flow .arr path { stroke: var(--acc); stroke-width: 3; fill: none; }
.step.on .dg-flow .node, .step.on .dg-flow .arr { opacity: 1; transform: none; }
.dg-flow .br { flex-basis: 100%; height: 0; }

.dg-list { display: flex; flex-direction: column; gap: 14px; }
.dg-list .it { font-size: 34px; font-weight: 600; padding: 16px 0 16px 34px; border-left: 4px solid var(--acc); opacity: 0; transform: translateX(-24px); transition: opacity .45s var(--out), transform .6s var(--spring); transition-delay: calc(var(--i) * 110ms + 100ms); }
.step.on .dg-list .it { opacity: 1; transform: none; }
.dg-list .it.plain { border-left-color: var(--line); font-weight: 500; }

.dg-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.dg-stats .st { flex: 1; min-width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 34px 36px; opacity: 0; transform: translateY(30px); transition: opacity .5s var(--out), transform .7s var(--spring); transition-delay: calc(var(--i) * 140ms + 100ms); }
.dg-stats .st .lab { font-size: 26px; color: var(--dim); font-weight: 600; }
.dg-stats .st .val { font-family: "PF Sans"; font-size: 72px; font-weight: 900; color: var(--acc); line-height: 1.1; margin-top: 10px; }
.step.on .dg-stats .st { opacity: 1; transform: none; }

.num { font-variant-numeric: tabular-nums; }

/* bar chart */
.bars { display: flex; flex-direction: column; gap: 30px; }
.bar { display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; gap: 30px; }
.bar .lab { font-size: 36px; font-weight: 800; }
.bar .track { height: 56px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bar .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--terra-soft)); border-radius: 12px; transition: width 1.4s var(--out); transition-delay: calc(var(--i) * 200ms + 200ms); }
.step.on .bar .fill { width: var(--w); }
.bar .val { font-family: "PF Sans"; font-size: 54px; font-weight: 900; color: var(--acc); }
.bar.zero .val { color: var(--dim); }

.stack { display: flex; height: 120px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); margin-top: 26px; }
.stack div { width: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #fff; white-space: nowrap; transition: width 1.4s var(--out); transition-delay: calc(var(--i) * 220ms + 200ms); overflow: hidden; }
.step.on .stack div { width: var(--w); }

/* svg draw */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--out); transition-delay: calc(var(--i, 0) * 160ms + 150ms); }
.step.on .draw { stroke-dashoffset: 0; }
.pop { opacity: 0; transform: scale(.7); transform-box: fill-box; transform-origin: center; transition: opacity .45s var(--out), transform .7s var(--spring); transition-delay: calc(var(--i, 0) * 160ms + 250ms); }
.step.on .pop { opacity: 1; transform: none; }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- divider ---------- */
.ty-divider { display: flex; flex-direction: column; justify-content: center; padding-left: 220px; }
.ty-divider .pnum { font-family: "PF Mono"; font-size: 30px; letter-spacing: .4em; color: var(--acc); }
.ty-divider .ptitle { max-width: 980px; font-family: "PF Sans"; font-size: 140px; font-weight: 900; line-height: 1.08; margin: 30px 0 40px; letter-spacing: -.03em; }
.ty-divider .prange { font-family: "PF Mono"; font-size: 26px; color: var(--dim); letter-spacing: .2em; }
.div-art { position: absolute; inset: 0; z-index: 0; }
.div-art rect { transition: x 1.6s var(--out), width 1.6s var(--out), height 1.6s var(--out), y 1.6s var(--out), fill 1.2s, opacity 1.2s; }
.glow { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; background: radial-gradient(closest-side, rgba(232,140,90,.55), transparent); transform: translateX(-50%); transition: width 2s var(--out); z-index: 0; }
.slide.current .glow.go { width: 900px; }

/* ---------- pillar tracker (part 3) ---------- */
.pillars { position: absolute; right: 150px; bottom: 38px; display: flex; align-items: flex-end; gap: 9px; z-index: 3; }
.pillars i { width: 14px; height: 44px; border: 1.5px solid var(--dim); border-radius: 2px; opacity: .6; }
.pillars i.done { background: var(--fg); border-color: var(--fg); opacity: .55; }
.pillars i.now { background: var(--acc); border-color: var(--acc); opacity: 1; height: 56px; }
.pillars .gear { width: 34px; height: 34px; margin-right: 12px; color: var(--dim); }
.pillars .gear.now { color: var(--acc); }
.pillars .gear.now svg { animation: spin 6s linear infinite; }

/* ---------- sales ---------- */
.ty-sales .body { max-width: 1620px; }
.ty-sales .big { font-family: "PF Sans"; font-weight: 800; letter-spacing: -.03em; }
.ty-sales .big.huge { font-family: "PF Sans"; font-weight: 900; }
.ty-sales.key .big { font-size: 78px; }
.ty-section { display: flex; flex-direction: column; justify-content: center; }
.ty-section .snum { font-family: "PF Sans"; font-size: 260px; font-weight: 900; color: var(--acc); line-height: 1; }
.ty-section .stitle { font-size: 84px; font-weight: 800; letter-spacing: -.03em; margin-top: 20px; }
.price { font-family: "PF Sans"; font-weight: 900; font-size: 150px; line-height: 1; letter-spacing: -.03em; }
.price small { font-size: 60px; margin-left: 10px; }
.plus10-tag { position: absolute; top: 92px; right: 150px; z-index: 4; font-family: "PF Mono"; font-size: 18px; color: var(--acc); border: 1.5px solid var(--acc); border-radius: 999px; padding: 4px 14px; letter-spacing: .1em; }
.code { font-family: "PF Mono"; font-size: 30px; line-height: 1.6; white-space: pre; }

/* ---------- reveal (Q18-E4) ---------- */
.ty-reveal { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.ty-reveal .big { font-size: 140px; font-weight: 900; }
.ty-reveal .ln { color: var(--dim); }
.reveal-author { font-family: "PF Mono"; font-size: 40px; font-weight: 500; letter-spacing: .3em; color: var(--acc); margin-top: 28px; opacity: 0; transition: opacity 1s 1.2s; }
.step.on .reveal-author { opacity: 1; }

/* ---------- UI overlays ---------- */
#progress { position: fixed; left: 0; bottom: 0; height: 4px; width: 0; background: var(--terra); z-index: 50; transition: width .4s var(--out); }
#notes { position: fixed; left: 0; right: 0; bottom: 4px; background: rgba(12,11,10,.92); color: #e9e1d6; font-size: 20px; padding: 14px 28px; z-index: 60; display: none; line-height: 1.5; border-top: 1px solid #3a342f; }
#notes b { color: var(--terra); font-family: "PF Mono"; letter-spacing: .1em; margin-right: 12px; }
#timer { position: fixed; right: 14px; top: 10px; z-index: 60; font-family: "PF Mono"; font-size: 18px; color: #c9c1b7; background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 6px; display: none; }
#blackout { position: fixed; inset: 0; background: #000; z-index: 70; display: none; }
#overview { position: fixed; inset: 0; z-index: 80; background: rgba(12,11,10,.97); display: none; overflow: auto; padding: 40px; }
#overview .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
#overview .cell { background: #1f1c19; border: 1px solid #36302b; border-radius: 10px; padding: 12px 14px; color: #ddd4c9; cursor: pointer; font-size: 14px; line-height: 1.4; min-height: 84px; }
#overview .cell b { display: block; font-family: "PF Mono"; color: var(--terra); font-size: 13px; letter-spacing: .08em; margin-bottom: 6px; }
#overview .cell.cur { outline: 2px solid var(--terra); }
#overview h3 { color: #c8693f; font-family: "PF Mono"; letter-spacing: .2em; margin: 26px 0 12px; font-size: 15px; }
#goto { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 90; display: none; background: #1c1916; border: 1px solid #c8693f; border-radius: 12px; padding: 18px 22px; }
#goto input { background: transparent; border: 0; outline: 0; color: #fff; font-family: "PF Mono"; font-size: 28px; width: 260px; }
#help { position: fixed; left: 14px; top: 10px; z-index: 60; font-family: "PF Mono"; font-size: 13px; color: #8a8580; background: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 6px; display: none; line-height: 1.7; }

/* view transitions */
::view-transition-old(root) { animation: vt-out .38s var(--out) both; }
::view-transition-new(root) { animation: vt-in .5s var(--out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  .step, .step *, .draw, .pop, .ch { transition-duration: .2s !important; transition-delay: 0s !important; animation: none !important; transform: none !important; filter: none !important; }
}

/* cover */
.ty-cover { padding-left: 220px; }
.cv-k { font-family: "PF Mono"; font-size: 26px; letter-spacing: .32em; color: var(--acc); }
.cv-t { font-size: 190px; font-weight: 900; line-height: 1.04; letter-spacing: -.05em; margin: 40px 0 50px; }
.cv-t .ch { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .6s var(--out), transform .9s var(--spring); transition-delay: calc(var(--i) * 45ms + 200ms); }
.step.on .ch { opacity: 1; transform: none; }
.cv-a { font-size: 34px; color: var(--dim); font-weight: 600; letter-spacing: .1em; }

/* 문단 단위 등장: 한 번 누르면 문단 안의 문장들이 차례로 */
.para { display: flex; flex-direction: column; gap: 26px; }
.para .pi { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .5s var(--out), transform .7s var(--spring), filter .5s var(--out); transition-delay: calc(var(--j) * 110ms); }
.para.on .pi { opacity: 1; transform: none; filter: none; }
.ty-myth .para.on .ln { animation: shake .6s 1 both; animation-delay: calc(var(--j) * 110ms + .5s); }
.acts .act { opacity: 0; transform: translateY(60px) scale(.96); transition: opacity .5s var(--out), transform .8s var(--spring); transition-delay: calc(var(--j) * 160ms); }
.acts.on .act { opacity: 1; transform: none; }
.ty-divider .step > * , .ty-section .step > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--out), transform .9s var(--spring); }
.ty-divider .step.on > *, .ty-section .step.on > * { opacity: 1; transform: none; }
.ty-divider .step.on > :nth-child(2), .ty-section .step.on > :nth-child(2) { transition-delay: .25s; }
.ty-divider .step.on > :nth-child(3) { transition-delay: .5s; }

/* ---------- 감옥: 창살 상태 ---------- */
.cage { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.cage .bar rect { fill: rgba(237,230,220,.17); }
.cage .bar .lo { transform-box: view-box; transform-origin: var(--x) var(--cy); }
.cage .bar .crk { fill: none; stroke: var(--terra); stroke-width: 2.5; opacity: 0; }
.cage .bar .spark { fill: var(--terra); opacity: 0; transform-box: fill-box; transform-origin: center; }
/* 금 간 상태 */
.cage .st-crack .crk, .cage .st-broken .crk { opacity: .9; }
.cage .st-crack .lo { transform: translateY(5px) rotate(1.2deg); }
/* 금 가는 순간 */
.cage .st-cracking .lo { transition: transform .5s cubic-bezier(.3,1.6,.6,1) .25s; }
.cage .st-cracking .crk { transition: opacity .2s .35s; }
.cage.go .st-cracking .lo { transform: translateY(5px) rotate(1.2deg); }
.cage.go .st-cracking .crk { opacity: .9; }
.cage.go .st-cracking .spark { animation: spark .7s .3s both; }
@keyframes spark { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(2.4); } 100% { opacity: 0; transform: scale(4); } }
/* 부러진 상태 */
.cage .st-broken .lo { opacity: 0; transform: rotate(78deg) translate(60px, 120px); }
.cage .st-broken .up { fill: rgba(237,230,220,.08); }
/* 부러지는 순간 */
.cage .st-breaking .crk { opacity: .9; }
.cage .st-breaking .lo { transform: translateY(5px) rotate(1.2deg); }
.cage.go .st-breaking .lo { animation: fall 1.3s cubic-bezier(.55,.05,.9,.4) .35s both; }
.cage.go .st-breaking .spark { animation: spark .7s .3s both; }
.cage.go .st-breaking .crk { transition: opacity .6s 1.2s; opacity: .3; }
@keyframes fall { 0% { transform: translateY(5px) rotate(1.2deg); opacity: 1; } 25% { transform: translateY(8px) rotate(14deg); } 100% { transform: rotate(82deg) translate(90px, 420px); opacity: 0; } }
/* 사라짐 / 쏟아짐 (3부 간지) */
.cage .st-gone { opacity: 0; }
.cage .st-falling { transform-box: view-box; transform-origin: var(--x) 1080px; transition: transform 1.4s cubic-bezier(.55,.05,.9,.4) var(--d), opacity .8s calc(var(--d) + .8s); }
.cage.go .st-falling { transform: translateY(1200px) rotate(6deg); opacity: 0; }
.t-dusk .cage .bar rect { fill: rgba(241,233,222,.19); }

/* 3부 간지: 기둥이 올라온다 */
.div-art .pl { fill: var(--terra); opacity: .95; transform: translateY(0); transition: transform 1.1s var(--spring) calc(1.1s + var(--i) * .12s); }
.div-art.go .pl { transform: translateY(-260px); }
.div-art .pl-beam { fill: #1c1916; opacity: 0; transition: opacity .8s 2.3s; }
.div-art.go .pl-beam { opacity: 1; }

/* 3부 배경 기둥 */
.pillbg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.pillbg .pb { fill: #1c1916; opacity: .14; transform-box: fill-box; transform-origin: bottom; }
.pillbg .pb.todo { fill: none; stroke: #1c1916; stroke-width: 1.5; opacity: .14; }
.pillbg .pb.now { fill: var(--terra); opacity: .5; transform: scaleY(0); transition: transform 1.2s var(--spring) .3s; }
.pillbg.go .pb.now { transform: scaleY(1); }
.pillbg .pb-beam { fill: #1c1916; opacity: .14; }

/* ====== 디자인 업그레이드 ====== */
/* 큰 번호 워터마크 */
.wm { position: absolute; right: 110px; bottom: -70px; font-family: "PF Mono"; font-weight: 800; font-size: 560px; line-height: 1; letter-spacing: -.06em; color: var(--fg); opacity: .035; pointer-events: none; z-index: 0; user-select: none; }
.t-paper .wm, .t-white .wm { opacity: .045; }
.ty-quote .wm, .ty-punch .wm { font-size: 760px; right: 60px; bottom: -140px; opacity: .05; }
.ty-turn .wm { display: none; }

/* 어두운 장: 아주 느린 빛 */
.t-dark::before, .t-black::before { content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background: radial-gradient(700px 500px at 20% 30%, rgba(200,105,63,.10), transparent 70%), radial-gradient(900px 700px at 85% 80%, rgba(237,230,220,.05), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6%, -4%) rotate(2deg); } }
.t-paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1000px 600px at 80% 0%, rgba(200,105,63,.10), transparent 70%); }
.t-white::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); }
.slide > .chrome-top, .slide > .chrome-bot { z-index: 2; }

/* 장 제목 밑줄이 그어진다 */
.slide-title { position: relative; display: inline-block; padding-bottom: 14px; }
.slide-title::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acc); transition: width .9s var(--out) .15s; }
.slide.current .slide-title::after { width: 100%; }

/* 큰 문장: 형광펜이 쓸고 지나간다 */
.ty-generic .big, .ty-scene .big, .ty-myth .big, .ty-trans .big, .ty-case .big, .ty-shift .big, .ty-diagram .big, .ty-book .big, .ty-sales .big {
  background-image: linear-gradient(transparent 62%, color-mix(in oklab, var(--acc) 30%, transparent) 62%, color-mix(in oklab, var(--acc) 30%, transparent) 94%, transparent 94%);
  background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1.1s var(--out) .35s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.step.on.big { background-size: 100% 100%; }
.ty-punch .big { text-shadow: 0 30px 80px rgba(0,0,0,.35); }
.ty-punch .big .ch { transition-delay: calc(var(--i) * 18ms); }
.ty-quote .big { font-size: 96px; letter-spacing: -.045em; }

/* 카드: 유리 + 그라데이션 테두리 */
.act, .dg-stats .st, .map-card, .wk, .ly .l, .wf .r {
  position: relative; background: color-mix(in oklab, var(--fg) 4%, transparent); backdrop-filter: blur(6px); border: 1px solid transparent;
  background-clip: padding-box; box-shadow: 0 30px 60px -40px rgba(0,0,0,.6); }
.act::before, .dg-stats .st::before, .map-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in oklab, var(--acc) 55%, transparent), color-mix(in oklab, var(--fg) 10%, transparent) 50%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.act .k { display: inline-block; padding: 6px 14px; border-radius: 999px; background: color-mix(in oklab, var(--acc) 16%, transparent); }

/* 표: 행 강조 */
.dg-table tr.row:hover td { background: color-mix(in oklab, var(--acc) 8%, transparent); }
.dg-table th { border-bottom: 2px solid color-mix(in oklab, var(--acc) 50%, transparent); }
.dg-table td:first-child { color: var(--fg); }

/* 전환 장: 큰 문장 뒤 배경 글 */
.ty-turn::after { opacity: .08; }
.turn-count b { font-size: 84px; }
.ty-turn .big { font-size: 78px; }

/* 이번 주 카드 숫자 */
.acts .act { overflow: hidden; }
.acts .act::after { content: attr(data-n); position: absolute; right: 18px; bottom: -30px; font-family: "PF Mono"; font-size: 180px; font-weight: 800; color: var(--fg); opacity: .05; line-height: 1; }

/* 진행 막대 */
#progress { height: 5px; background: linear-gradient(90deg, var(--terra), #e8a07f); box-shadow: 0 0 18px rgba(200,105,63,.6); }

/* 세일즈 섹션 표지 */
.ty-section .snum { font-size: 360px; letter-spacing: -.08em; background: linear-gradient(180deg, var(--acc), #e3a07f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ty-section .stitle { font-size: 92px; }
.price { background: linear-gradient(180deg, var(--fg), #6b5f55); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price small { color: var(--fg); -webkit-text-fill-color: var(--fg); }

/* 표지 */
.ty-cover .cv-t { font-size: 210px; }
.ty-cover .cv-t .ch { transition-delay: calc(var(--i) * 55ms + 300ms); }
.ty-cover::before { animation-duration: 20s; }

/* ====== 표·도식·카드 등장 강화 ====== */
/* 도식 전체: 원근 기울기에서 일어서며 빛이 한 번 쓸고 지나간다 */
.para .pi .dg, .para .pi .dg-table, .para .pi > div { position: relative; }
.para .pi:has(.dg), .para .pi:has(.dg-table), .para .pi:has(.bars), .para .pi:has(.stack) { transform: perspective(1400px) rotateX(16deg) translateY(60px); transform-origin: 50% 100%; filter: blur(10px); transition: opacity .6s var(--out), transform 1.1s var(--spring), filter .7s var(--out); transition-delay: calc(var(--j) * 110ms); }
.para.on .pi:has(.dg), .para.on .pi:has(.dg-table), .para.on .pi:has(.bars), .para.on .pi:has(.stack) { transform: none; filter: none; }
.para .pi:has(.dg)::after, .para .pi:has(.dg-table)::after { content: ""; position: absolute; inset: -10px; pointer-events: none; border-radius: 20px; background: linear-gradient(110deg, transparent 30%, color-mix(in oklab, var(--acc) 22%, transparent) 50%, transparent 70%); background-size: 300% 100%; background-position: 120% 0; opacity: 0; }
.para.on .pi:has(.dg)::after, .para.on .pi:has(.dg-table)::after { animation: shine 1.3s var(--out) .55s 1; }
@keyframes shine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -120% 0; } }

/* 표: 행이 왼쪽에서 날아들고 셀 글자는 블러에서 또렷해진다. 첫 열에 강조 바 */
.dg-table { border-radius: 18px; overflow: hidden; background: color-mix(in oklab, var(--fg) 3%, transparent); box-shadow: 0 30px 70px -50px rgba(0,0,0,.7); }
.dg-table th { padding-top: 18px; background: color-mix(in oklab, var(--acc) 10%, transparent); }
.dg-table th:first-child, .dg-table td:first-child { padding-left: 34px; }
.dg-table td { border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); position: relative; }
.dg-table tr.row { transform: translateX(-60px); filter: blur(6px); transition: opacity .55s var(--out), transform .8s var(--spring), filter .55s var(--out); transition-delay: calc(var(--i) * 130ms + 250ms); }
.step.on .dg-table tr.row { filter: none; }
.dg-table tr.row td:first-child::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 4px; border-radius: 4px; background: var(--acc); transform: scaleY(0); transition: transform .5s var(--spring); transition-delay: calc(var(--i) * 130ms + 500ms); }
.step.on .dg-table tr.row td:first-child::before { transform: scaleY(1); }
.dg-table tr.em td { background: color-mix(in oklab, var(--acc) 12%, transparent); }
.dg-table tr.row.lit td { background: color-mix(in oklab, var(--acc) 14%, transparent); }

/* 흐름도: 노드가 튀어오르고 화살표가 그려지며 마지막 노드가 맥동 */
.dg-flow .node { box-shadow: 0 16px 40px -24px rgba(0,0,0,.8); transform: scale(.6) translateY(20px); }
.dg-flow .node.hot { background: color-mix(in oklab, var(--acc) 14%, transparent); }
.step.on .dg-flow .node.hot { animation: pulse 2.4s ease-in-out 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc) 45%, transparent); } 50% { box-shadow: 0 0 0 18px transparent; } }
.dg-flow .arr path { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset .5s var(--out); transition-delay: calc(var(--i) * 140ms + 160ms); }
.step.on .dg-flow .arr path { stroke-dashoffset: 0; }

/* 목록: 왼쪽 막대가 아래로 자라며 항목이 들어온다 */
.dg-list .it { border-left-color: transparent; position: relative; padding-left: 38px; }
.dg-list .it::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--out); transition-delay: calc(var(--i) * 110ms + 300ms); }
.step.on .dg-list .it::before { transform: scaleY(1); }
.dg-list .it.plain::before { background: var(--line); }

/* 막대 그래프: 채워지며 끝에서 반짝 */
.bar .fill { position: relative; overflow: hidden; }
.bar .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); background-size: 250% 100%; background-position: 150% 0; }
.step.on .bar .fill::after { animation: barshine 1.1s var(--out) calc(var(--i) * 200ms + 1.1s) 1; }
@keyframes barshine { to { background-position: -150% 0; } }
.bar .val { transform: scale(.6); opacity: 0; transition: transform .6s var(--spring), opacity .4s; transition-delay: calc(var(--i) * 200ms + 900ms); }
.step.on .bar .val { transform: none; opacity: 1; }
.stack div { position: relative; }
.stack div span { display: inline-block; transform: translateY(14px); opacity: 0; transition: transform .5s var(--spring), opacity .4s; transition-delay: calc(var(--i) * 220ms + 900ms); }
.step.on .stack div span { transform: none; opacity: 1; }

/* 통계 카드: 뒤집히며 등장 */
.dg-stats .st { transform: perspective(1000px) rotateY(-28deg) translateX(-40px); }
.step.on .dg-stats .st { transform: none; }

/* 이번 주 카드: 더 높이 솟고, 번호 배경이 늦게 떠오른다 */
.acts .act { transform: translateY(90px) rotateX(18deg) scale(.94); transform-origin: 50% 100%; transition-duration: .6s, 1s; }
.acts.on .act { transform: none; }
.acts .act::after { opacity: 0; transition: opacity .8s calc(var(--j) * 160ms + .9s); }
.acts.on .act::after { opacity: .06; }

/* 손으로 그린 도식들 */
.wf .r { box-shadow: 0 24px 50px -36px rgba(0,0,0,.6); }
.step.on .wf .r { animation: landed .5s var(--out) calc(var(--i) * 230ms + .75s) 1; }
@keyframes landed { 30% { transform: translateY(6px); } }
.wks .wb { transform: scale(0); transition: transform .6s var(--spring); transition-delay: calc(var(--i) * 380ms + 250ms); }
.step.on .wks .wb { transform: none; }
.ly .l.k { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc) 40%, transparent); }
.step.on .ly .l.k { animation: pulse 2.6s ease-in-out 1.4s 2; }
.map-card .map-ic svg { transform: scale(.4) rotate(-10deg); transition: transform .9s var(--spring) calc(var(--i) * 260ms + .35s); }
.step.on .map-card .map-ic svg { transform: none; }
.fnl .fc .fb { box-shadow: inset 0 -30px 40px -30px rgba(0,0,0,.25); }
.step.on .fnl .fc.last .fb { animation: pulse 2.4s ease-in-out 1.8s infinite; }
.mo .c i { box-shadow: inset 0 0 0 0 transparent; }
.step.on .mo .c i { animation: cellpop .4s var(--spring) backwards; animation-delay: inherit; }
@keyframes cellpop { from { transform: scaleY(.3); } }

/* 3부: 도식 장에서는 배경 기둥·워터마크를 낮춘다 */
.slide:has(.dg) .pillbg, .slide:has(.acts) .pillbg, .slide:has(.dg-table) .pillbg { opacity: .35; }
.slide:has(.dg) .wm, .slide:has(.dg-table) .wm, .slide:has(.acts) .wm { opacity: .02; }
.t-paper .slide-title::after { background: var(--acc); }

/* ====== 도식·도표 등장 모션 2차 강화 ====== */
/* 공통: 깊은 곳에서 솟아오르며 자리를 잡고, 빛이 터졌다가 가라앉는다 */
.para .pi:has(.dg), .para .pi:has(.dg-table), .para .pi:has(.bars), .para .pi:has(.stack), .para .pi:has(.acts), .para .pi:has(.wh), .para .pi:has(.tp), .para .pi:has(.inf), .para .pi:has(.map3) {
  transform: perspective(1600px) rotateX(34deg) translateY(120px) translateZ(-260px) scale(.86); transform-origin: 50% 100%; filter: blur(14px) saturate(.6);
  transition: opacity .5s var(--out), transform 1.25s cubic-bezier(.2, 1.4, .3, 1), filter .9s var(--out); transition-delay: calc(var(--j) * 110ms); }
.para.on .pi:has(.dg), .para.on .pi:has(.dg-table), .para.on .pi:has(.bars), .para.on .pi:has(.stack), .para.on .pi:has(.acts), .para.on .pi:has(.wh), .para.on .pi:has(.tp), .para.on .pi:has(.inf), .para.on .pi:has(.map3) { transform: none; filter: none; }
.para .pi:has(.dg)::before, .para .pi:has(.dg-table)::before, .para .pi:has(.bars)::before, .para .pi:has(.acts)::before {
  content: ""; position: absolute; inset: -30px; pointer-events: none; border-radius: 30px; opacity: 0;
  background: radial-gradient(60% 60% at 50% 60%, color-mix(in oklab, var(--acc) 38%, transparent), transparent 70%); }
.para.on .pi:has(.dg)::before, .para.on .pi:has(.dg-table)::before, .para.on .pi:has(.bars)::before, .para.on .pi:has(.acts)::before { animation: bloom 1.4s var(--out) .25s 1; }
@keyframes bloom { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
/* 테두리 빛이 한 바퀴 돈다 */
.dg-table, .dg-flow .node, .act, .dg-stats .st, .map-card, .wf .r, .ly .l { position: relative; }
.dg-table::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 2px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--acc) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.step.on .dg-table::after { animation: ring 1.6s var(--out) .5s 1; }
@keyframes ring { 0% { opacity: 1; --ang: 0deg; } 100% { opacity: 0; --ang: 360deg; } }

/* 표: 머리글이 먼저 쫙 펼쳐지고, 행은 뒤에서 앞으로 날아든다, 숫자 칸은 번쩍 */
.dg-table th { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--out) .15s; }
.step.on .dg-table th { clip-path: inset(0 0 0 0); }
.dg-table tr.row { transform: translateX(-120px) translateZ(-120px) rotateY(22deg); transform-origin: left; }
.dg-table tr.row td { transition: background .3s; }
.step.on .dg-table tr.row td { animation: cellflash .9s var(--out) calc(var(--i) * 130ms + .55s) 1; }
@keyframes cellflash { 0% { background: color-mix(in oklab, var(--acc) 26%, transparent); } 100% { background: transparent; } }
.step.on .dg-table tr.em td { animation: none; }

/* 흐름도: 노드가 회전하며 튀어오르고, 선 위로 점이 달린다 */
.dg-flow .node { transform: scale(.4) rotateY(70deg) translateY(30px); transform-origin: left center; }
.dg-flow .node::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--acc); opacity: 0; pointer-events: none; }
.step.on .dg-flow .node::after { animation: ripple 1s var(--out) calc(var(--i) * 140ms + .35s) 1; }
@keyframes ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.dg-flow .arr .dot { fill: var(--acc); opacity: 0; }
.step.on .dg-flow .arr .dot { opacity: 1; offset-path: path("M4 12 H62"); animation: travel 1.6s linear calc(var(--i) * 140ms + .6s) infinite; }
@keyframes travel { from { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }

/* 목록: 기울어진 채 미끄러져 들어오고 막대가 쏟아진다 */
.dg-list .it { transform: translateX(-90px) skewX(-10deg); transition-timing-function: var(--out), cubic-bezier(.2,1.5,.3,1); }
.step.on .dg-list .it { transform: none; }
.dg-list .it::before { transition-timing-function: cubic-bezier(.2,1.6,.3,1); }

/* 막대 그래프: 탄성 있게 넘쳤다 돌아오고, 그라데이션이 흐른다 */
.bar .fill { transition: width 1.5s cubic-bezier(.2, 1.35, .3, 1); background: linear-gradient(90deg, var(--acc), var(--terra-soft), var(--acc)); background-size: 200% 100%; }
.step.on .bar .fill { animation: flow 3s linear 1.4s infinite; }
@keyframes flow { to { background-position: -200% 0; } }
.bar .lab { transform: translateX(-30px); opacity: 0; transition: transform .6s var(--spring), opacity .4s; transition-delay: calc(var(--i) * 200ms); }
.step.on .bar .lab { transform: none; opacity: 1; }
.stack div { transition-timing-function: cubic-bezier(.2, 1.25, .3, 1); }

/* 통계 카드: 뒤집히며 날아들고 숫자가 커졌다 줄어든다 */
.dg-stats .st { transform: perspective(1000px) rotateY(-60deg) translateX(-80px) scale(.8); transform-origin: left; transition-duration: .6s, 1.1s; }
.dg-stats .st .val { display: inline-block; transform: scale(.5); transition: transform .8s cubic-bezier(.2,1.6,.3,1) calc(var(--i) * 140ms + .5s); }
.step.on .dg-stats .st .val { transform: none; }

/* 이번 주 카드: 카드가 뒤집히듯 세워지고 라벨이 튄다 */
.acts .act { transform: translateY(120px) rotateX(-40deg) scale(.9); transform-origin: 50% 0; transition: opacity .5s var(--out), transform 1.1s cubic-bezier(.2,1.45,.3,1); }
.acts .act .k { transform: scale(.6); opacity: 0; transition: transform .6s var(--spring), opacity .3s; transition-delay: calc(var(--j) * 160ms + .45s); }
.acts.on .act .k { transform: none; opacity: 1; }
.acts .act .v { transform: translateY(16px); opacity: 0; transition: transform .6s var(--out), opacity .5s; transition-delay: calc(var(--j) * 160ms + .55s); }
.acts.on .act .v { transform: none; opacity: 1; }

/* 손그림 도식 */
.wh svg { transform: rotate(-140deg) scale(.5); transition: transform 1.4s cubic-bezier(.2,1.3,.3,1) .2s; transform-origin: 50% 52%; }
.step.on .wh svg { transform: none; }
.tp svg circle { transition-duration: .7s, 1s; }
.step.on .tp svg circle:first-of-type { animation: ripple 1.2s var(--out) .6s 1; }
.inf .clock i { transform: scale(.3) rotate(25deg); transition: transform .55s cubic-bezier(.2,1.6,.3,1), background .3s, border-color .3s; transition-delay: calc(var(--i) * 45ms + 250ms); }
.step.on .inf .clock i { transform: none; }
.map-card { transform: perspective(1200px) rotateY(80deg) translateX(-60px); transform-origin: left; transition-duration: .6s, 1.2s; }
.step.on .map-card { transform: none; }
.wf .r { transform: translateY(-80px) translateX(-40px) rotate(-3deg); transition-timing-function: var(--out), cubic-bezier(.2,1.5,.3,1); }
.step.on .wf .r { transform: none; }
.wf .n { display: inline-block; transform: scale(0); transition: transform .5s cubic-bezier(.2,1.7,.3,1) calc(var(--i) * 230ms + .45s); }
.step.on .wf .n { transform: none; }
.ly .l { transform: rotateX(70deg) translateY(120px) translateZ(-200px); transform-origin: 50% 100%; }
.step.on .ly .l { transform: none; }
.wks .wt { transform: translateY(30px); opacity: 0; transition: transform .7s var(--spring), opacity .4s; transition-delay: calc(var(--i) * 380ms + .45s); }
.step.on .wks .wt { transform: none; opacity: 1; }
.fnl .fc .fb { transition-timing-function: cubic-bezier(.2,1.5,.3,1); }
.fnl .fc span { transform: translateY(20px); opacity: 0; transition: transform .6s var(--spring), opacity .4s; transition-delay: calc(var(--i) * 90ms + .7s); }
.step.on .fnl .fc span { transform: none; opacity: 1; }
.mo .p { transform: translateX(-60px); opacity: 0; transition: transform .8s var(--spring), opacity .4s; }
.step.on .mo .p { transform: none; opacity: 1; }
.pr .price { transform: scale(.6); transform-origin: right; transition: transform 1s cubic-bezier(.2,1.5,.3,1) .3s; }
.step.on .pr .price { transform: none; }
.mcal i.pick { animation: none; }
.step.on .mcal i.pick { animation: pulse 1.8s ease-in-out 1.8s infinite; }

/* ====== 그래프: 촤라락 차오르기 ====== */
/* 세로 막대 (하루 시간) */
.vb { display: flex; gap: 70px; align-items: flex-end; padding: 10px 0 0 20px; }
.vcol { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 240px; }
.vtrack { display: flex; flex-direction: column-reverse; gap: 5px; width: 100%; height: 340px; justify-content: flex-start; }
.vtrack i { display: block; height: 16px; border-radius: 6px; background: color-mix(in oklab, var(--fg) 7%, transparent); border: 1px solid var(--line); transform: scaleX(.3); opacity: .35; transition: none; }
.vtrack i.on { background: linear-gradient(90deg, var(--acc), var(--terra-soft)); border-color: transparent; }
.step.on .vtrack i { transform: none; opacity: 1; transition: transform .35s cubic-bezier(.2,1.6,.3,1), opacity .2s; transition-delay: calc(var(--k) * 260ms + var(--c) * 42ms + 150ms); }
.step.on .vtrack i.on { animation: tick .35s var(--out) calc(var(--k) * 260ms + var(--c) * 42ms + 150ms) 1 backwards; }
@keyframes tick { 0% { filter: brightness(2.2); transform: scaleX(1.12); } 100% { filter: none; transform: none; } }
.vval { font-size: 56px; font-weight: 900; color: var(--acc); transform: translateY(30px) scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.2,1.6,.3,1), opacity .4s; transition-delay: calc(var(--k) * 260ms + var(--n) * 42ms + 350ms); }
.step.on .vval { transform: none; opacity: 1; }
.vcol.zero .vval { color: var(--dim); }
.vlab { font-size: 34px; font-weight: 800; }
.vnote { margin-top: 24px; font-size: 26px; color: var(--dim); }

/* 가로 막대·비율 막대: 줄무늬가 흐르며 촤라락 */
.bar .fill, .stack div { background-image: linear-gradient(90deg, var(--acc), var(--terra-soft)), repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.18) 18px 22px); background-blend-mode: normal, overlay; }
.step.on .bar .fill { transition-timing-function: steps(24, end); }
.step.on .stack div { transition-timing-function: steps(18, end); }
.stack div::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.14) 24px 28px); pointer-events: none; }

/* 깔때기: 아래에서 촤라락 솟는다 */
.fnl .fc .fb { transition: height .7s cubic-bezier(.2,1.5,.3,1); transition-delay: calc(var(--i) * 70ms + 120ms); background-image: linear-gradient(180deg, color-mix(in oklab, var(--acc) calc(100% - var(--i)*6%), #fff), color-mix(in oklab, var(--acc) calc(100% - var(--i)*6%), #fff)), repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.16) 22px 26px); }
.step.on .fnl .fc .fb { animation: tick .4s var(--out) calc(var(--i) * 70ms + .45s) 1 backwards; }
.fnl .fc.last .fb { background-image: linear-gradient(180deg, var(--green), var(--green)), repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.16) 22px 26px); }

/* 달력 칸·시계 칸: 빠른 파도 */
.step.on .mo .c i { transition: width .22s cubic-bezier(.2,1.4,.3,1); }
.inf .clock i { transition-delay: calc(var(--i) * 32ms + 250ms) !important; }
.step.on .inf .clock i { animation: tick .3s var(--out) calc(var(--i) * 32ms + .25s) 1 backwards; }
.pillbg .pb.now { transition-duration: .5s; }

/* 창살: 인용 장에서는 더 흐리게, 전환 장에서만 또렷하게 */
.ty-quote .cage .bar rect { fill: rgba(237,230,220,.09); }
.ty-turn .cage .bar rect { fill: rgba(237,230,220,.2); }

/* ====== 글 문단은 부드럽게 (튕김·흐림 제거) ====== */
.step { transform: translateY(14px); filter: none; transition: opacity .55s var(--out), transform .7s var(--out); }
.para .pi { transform: translateY(12px); filter: none; transition: opacity .5s var(--out), transform .65s var(--out); transition-delay: calc(var(--j) * 90ms); }
.para .pi:has(.dg), .para .pi:has(.dg-table), .para .pi:has(.bars), .para .pi:has(.stack), .para .pi:has(.acts), .para .pi:has(.wh), .para .pi:has(.tp), .para .pi:has(.inf), .para .pi:has(.map3) { transition: opacity .5s var(--out), transform 1.25s cubic-bezier(.2, 1.4, .3, 1), filter .9s var(--out); }
.big .ch { transform: translateY(.3em); transition: opacity .45s var(--out), transform .6s var(--out); }
.ty-cover .cv-t .ch { transform: translateY(.4em); }
.turn-drop { transition: opacity .5s var(--out), transform .7s var(--out); }
.ty-book .step { transition: clip-path .9s var(--out), opacity .3s; }
.step.on { transform: none; }
::view-transition-old(root) { animation: vt-fade-out .28s ease-out both; }
::view-transition-new(root) { animation: vt-fade-in .38s ease-out both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* 장 전환: 장 자체가 짧게 페이드인. 스냅샷 전환은 쓰지 않는다 */
.slide.arrive { animation: arrive .26s ease-out both; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* ================= 모션 쇼릴 업그레이드 ================= */
:root { --expo: cubic-bezier(.16,1,.3,1); --back: cubic-bezier(.34,1.56,.64,1); --elastic: cubic-bezier(.2,1.9,.3,.9); }
/* 캔버스 층: 장 배경을 무대로 올리고 장은 투명 */
#stage { background: #141210; transition: background .4s; }
#stage[data-theme="t-dark"] { background: #141210; } #stage[data-theme="t-dusk"] { background: #171310; } #stage[data-theme="t-black"] { background: #0c0b0a; }
#stage[data-theme="t-paper"] { background: #f3ece3; } #stage[data-theme="t-white"] { background: #fff; }
#fx { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 0; pointer-events: none; }
.slide { z-index: 1; }
.slide.t-dark, .slide.t-black, .slide.t-paper, .slide.t-white { background: transparent; }
.slide.t-dusk { background: radial-gradient(1200px 900px at calc(50% + var(--k, 0) * 10%) 40%, rgba(224, 122, 72, calc(.08 + var(--k, 0) * .22)), transparent 70%); }
.t-white::before { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,247,243,.8) 100%); }
.ty-cover, .ty-divider { background: transparent !important; }

/* 와이프: 주황 선이 쓸고 지나간다 */
#wipe { position: absolute; top: 0; bottom: 0; left: -8%; width: 8%; z-index: 40; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(200,105,63,.0) 40%, rgba(232,150,100,.9) 70%, #fff3e8 100%); filter: blur(1px); }
#wipe.run { animation: wipe .42s cubic-bezier(.7,0,.2,1) both; }
@keyframes wipe { 0% { left: -8%; opacity: 1; } 100% { left: 100%; opacity: 1; } }

/* HUD */
#hud { position: absolute; inset: 0; z-index: 30; pointer-events: none; font-family: "PF Mono"; font-size: 15px; letter-spacing: .14em; color: var(--hud, rgba(237,230,220,.5)); text-transform: uppercase; }
#stage[data-theme="t-paper"] #hud, #stage[data-theme="t-white"] #hud { --hud: rgba(28,25,22,.45); }
#hud .hud-tl { position: absolute; left: 48px; top: 16px; } #hud .hud-tl span { margin-left: 14px; color: var(--terra); }
#hud .hud-tr { position: absolute; right: 48px; top: 16px; }
#hud .hud-br { position: absolute; right: 48px; bottom: 14px; }
#hud .hud-rule { position: absolute; left: 150px; right: 150px; bottom: 22px; height: 10px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 100px); background-size: 100% 4px, 100% 10px; background-position: 0 6px, 0 0; background-repeat: no-repeat; opacity: .55; }
#hud .hud-rule i { position: absolute; left: 0; top: -8px; width: 2px; height: 26px; background: var(--terra); box-shadow: 0 0 12px var(--terra); transition: left .5s var(--expo); }
.chrome-bot { display: none; }
.chrome-top { top: 44px; }

/* 가속 곡선 분리: 글=expo, 카드=back, 그래프=elastic */
.step, .para .pi { transition-timing-function: var(--expo), var(--expo); }
.acts .act { transition-timing-function: var(--expo), var(--back); }
.acts.on .act { animation: land .55s var(--expo) calc(var(--j) * 160ms + .75s) 1; }
@keyframes land { 0% { transform: scale(1.05, .94); } 45% { transform: scale(.985, 1.02); } 100% { transform: none; } }
.step.on .bar .fill, .step.on .fnl .fc .fb, .step.on .vtrack i { transition-timing-function: var(--elastic); }
.dg-flow .node, .dg-stats .st, .map-card, .wf .r { transition-timing-function: var(--expo), var(--back); }

/* 큰 문장: 단어가 위에서 떨어져 눌렸다 선다 */
.big .w { display: inline-block; opacity: 0; transform: translateY(-.55em) scale(1.06, .9); transform-origin: 50% 100%; }
.step.on .w, .step.on.big .w { animation: wdrop .62s var(--back) calc(var(--i) * 55ms + 60ms) both; }
@keyframes wdrop { 0% { opacity: 0; transform: translateY(-.55em) scale(1.06, .9); } 60% { opacity: 1; transform: translateY(.06em) scale(.97, 1.05); } 100% { opacity: 1; transform: none; } }
/* 전환 장 '가질 생각' 착지 충격파 */
.ty-turn .step.keep { position: relative; }
.ty-turn .step.keep::after { content: ""; position: absolute; left: -40px; right: -40px; top: -30px; bottom: -30px; border: 2px solid var(--acc); border-radius: 30px; opacity: 0; pointer-events: none; }
.ty-turn .step.keep.on::after { animation: shock 1.1s var(--expo) .5s 1; }
@keyframes shock { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.12); } }

/* 인용·펀치 장: 중앙 십자선 (HUD 감성) */
.ty-quote::after, .ty-punch::after { opacity: .05; }
.ty-quote .body::before, .ty-punch .body::before { content: ""; position: absolute; right: 150px; top: 50%; width: 28px; height: 28px; border-left: 1px solid var(--dim); border-top: 1px solid var(--dim); transform: translate(0, -50%) rotate(0); opacity: .5; }
.ty-quote .body, .ty-punch .body { position: static; }

/* 표지 간격 · 인용 장 큰 문장(문단 안) */
.ty-cover .cv-t { font-size: 176px; line-height: 1.1; margin: 36px 0 44px; }
.ty-cover .cv-t .ch { transition-delay: calc(var(--i) * 55ms + 300ms); }
.ty-quote .para .pi .big { margin-top: 26px; }
.ty-quote .para.on .pi .big .ch { opacity: 1; transform: none; }

.qhead { opacity: 0; transform: translateY(14px); }
.slide.current .qhead { animation: qhead .7s var(--expo) .25s both; }
@keyframes qhead { to { opacity: 1; transform: none; } }
.ty-cover .cv-a { margin-top: 70px; }

/* 세일즈 밀도 · ASCII 도식 */
.ty-sales .ln { font-size: 36px; }
.ty-sales .body { gap: 20px; }
.ty-sales .dg-table td { padding: 12px 26px; }
.ty-sales .dg-table { font-size: 29px; }
.fnl { padding-bottom: 50px; }
pre.ascii { font-family: "PF Mono", monospace; font-size: 24px; line-height: 1.75; white-space: pre; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 34px; overflow: hidden; }
.ty-sales .dg-table td { padding: 9px 26px; }
.ty-sales .big { font-size: 58px; }
.fnl .fc span { font-size: 30px; }
.fnl { padding-bottom: 42px; }

/* 장 전환: 와이프 제거, 흐림에서 또렷해지는 조용한 페이드만 */
#wipe { display: none; }
.slide.arrive { animation: arrive2 .34s ease-out both; }
@keyframes arrive2 { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }

/* ====== 1.5배 분량용 타이포 · 새 구조물 ====== */
.ln { font-size: 34px; line-height: 1.5; }
.body { gap: 20px; max-width: 1640px; }
.big { font-size: 56px; }
.slide-title { margin-bottom: 26px; }
.dg-table { font-size: 29px; } .dg-table td { padding: 13px 24px; } .dg-table.cols-4 { font-size: 27px; } .dg-table.cols-5, .dg-table.cols-6 { font-size: 24px; }
.dg-list .it { font-size: 30px; padding: 12px 0 12px 34px; }
.dg-flow .node { font-size: 28px; padding: 14px 26px; }
/* 전·후 비교 */
.dg-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dg-vs.n3 { grid-template-columns: repeat(3, 1fr); }
.dg-vs .vs { border-radius: 22px; padding: 26px 30px; opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .5s var(--out), transform .8s var(--back); transition-delay: calc(var(--i) * 220ms + 120ms); position: relative; }
.step.on .dg-vs .vs { opacity: 1; transform: none; }
.dg-vs .vs-b { background: color-mix(in oklab, var(--fg) 5%, transparent); border: 1px solid var(--line); color: var(--dim); }
.dg-vs .vs-a { background: color-mix(in oklab, var(--acc) 12%, transparent); border: 1.5px solid var(--acc); color: var(--fg); }
.dg-vs .vl { font-family: "PF Mono"; font-size: 20px; letter-spacing: .24em; margin-bottom: 14px; color: var(--dim); }
.dg-vs .vs-a .vl { color: var(--acc); }
.dg-vs .vt { font-size: 30px; line-height: 1.45; font-weight: 600; }
.dg-vs .vs-a .vt { font-weight: 800; }
.dg-vs .vs-b::after { content: "→"; position: absolute; right: -26px; top: 50%; transform: translateY(-50%); color: var(--acc); font-size: 34px; font-weight: 800; }
.dg-vs.n3 .vs-b::after { display: none; }
/* 카드 묶음 */
.dg-cards { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 22px; }
.dg-cards.n2 { grid-template-columns: 1fr 1fr; } .dg-cards.n3 { grid-template-columns: repeat(3, 1fr); } .dg-cards.n4 { grid-template-columns: repeat(4, 1fr); }
.dg-cards .cd { border-radius: 22px; padding: 24px 26px; background: color-mix(in oklab, var(--fg) 4%, transparent); border: 1px solid var(--line); opacity: 0; transform: translateY(40px) rotateX(16deg); transform-origin: 50% 100%; transition: opacity .5s var(--out), transform .9s var(--back); transition-delay: calc(var(--i) * 150ms + 100ms); position: relative; }
.step.on .dg-cards .cd { opacity: 1; transform: none; }
.dg-cards .cd::before { content: ""; position: absolute; left: 26px; top: 0; width: 44px; height: 3px; background: var(--acc); border-radius: 2px; }
.dg-cards .ct { font-size: 30px; font-weight: 800; margin: 14px 0 10px; color: var(--acc); }
.dg-cards .cb { font-size: 26px; line-height: 1.45; font-weight: 500; }
.dg-cards.n4 .ct { font-size: 26px; } .dg-cards.n4 .cb { font-size: 23px; }

/* ====== 글꼴: 애플 산돌고딕 (원장 지시 10/22). 애플 기기 아니면 프리텐다드 ====== */
body, .ln, .big, .act .v, .act .k, .dg-table, .dg-list .it, .dg-flow .node, .dg-vs, .dg-cards, .cv-t, .ptitle, .stitle, .price, .qtitle, .turn-drop, .nextq, .slide-sub, .chrome-top .qt { font-family: "Apple SD Gothic Neo", "PF Sans", sans-serif; }
.big, .ty-punch .big, .ty-quote .big, .cv-t, .ptitle, .stitle, .snum, .price, .ty-turn .big, .ty-reveal .big { font-weight: 800; letter-spacing: -.02em; }
.ln { font-weight: 500; }

/* ---------- 자동 맞춤 측정용 ---------- */
.slide.measure { visibility: hidden; }
.slide.measure * { transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; }
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
html.still .step.on .w, html.still .step.on .ch, html.still .cv-t .ch { opacity: 1 !important; transform: none !important; }

/* v3: 리드 한 줄은 헤드라인으로 (문단 나열 금지 판) */
.ln.lede { font-size: 46px; font-weight: 700; color: var(--fg); letter-spacing: -.02em; line-height: 1.3; margin-bottom: 6px; }
.ln.lede strong { color: var(--acc); }

/* 번호 목록 (제목 + 1. 2. 3.) */
.dg-num { display: flex; flex-direction: column; gap: 0; }
.dg-num .nt { font-size: 30px; font-weight: 800; color: var(--acc); letter-spacing: -.01em; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--acc); }
.dg-num .ni { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-30px); transition: opacity .45s var(--out), transform .7s var(--spring); transition-delay: calc(var(--i) * 140ms + 120ms); }
.step.on .dg-num .ni { opacity: 1; transform: none; }
.dg-num .nn { font-family: "PF Mono", monospace; font-size: 40px; font-weight: 800; color: var(--acc); letter-spacing: -.02em; }
.dg-num .nb b { font-size: 34px; font-weight: 800; }
.dg-num .nb em { display: block; font-style: normal; font-size: 27px; font-weight: 500; color: var(--dim); margin-top: 6px; line-height: 1.4; }
.dg-num, .dg-num * { font-family: "Apple SD Gothic Neo", "PF Sans", sans-serif; }
.dg-num .nn { font-family: "PF Mono", monospace; }

/* ===================================================================
   v4 몰입 디자인 (10/22 밤 · 원장 "전체 디자인 슈퍼 업그레이드, 더 몰입감 있게")
   장식은 더하지 않는다(구슬·공·와이프·점 금지). 시선을 이야기에 붙잡는다:
   빛이 지금 말하는 요소를 따라가고, 가장자리는 어둡게, 지나간 것은 가라앉는다.
   =================================================================== */
@property --sx { syntax: '<length>'; inherits: true; initial-value: 900px; }
@property --sy { syntax: '<length>'; inherits: true; initial-value: 480px; }
#spot { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 0; pointer-events: none;
  transition: --sx 1.1s var(--expo), --sy 1.1s var(--expo);
  background:
    radial-gradient(1000px 700px at var(--sx) var(--sy), rgba(232,138,88,.16), rgba(232,138,88,.05) 45%, transparent 72%),
    radial-gradient(ellipse 115% 105% at 50% 46%, transparent 52%, rgba(0,0,0,.62) 100%); }
#stage[data-theme="t-black"] #spot { background:
    radial-gradient(1000px 700px at var(--sx) var(--sy), rgba(232,138,88,.12), transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 46%, transparent 45%, rgba(0,0,0,.75) 100%); }
#stage[data-theme="t-paper"] #spot, #stage[data-theme="t-white"] #spot { background:
    radial-gradient(1000px 700px at var(--sx) var(--sy), rgba(214,120,72,.11), transparent 70%),
    radial-gradient(ellipse 115% 105% at 50% 46%, transparent 58%, rgba(92,60,36,.16) 100%); }
#stage[data-theme="t-paper"] { background: linear-gradient(160deg, #f6efe6 0%, #efe5d8 100%); }

/* 지나간 것은 가라앉는다 */
.step.past { opacity: .34; filter: saturate(.4); transition: opacity .6s var(--expo), filter .6s var(--expo); }

/* 타이포: 헤드라인은 크고 단단하게 */
.ln.lede { font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1.22; margin-bottom: 10px; }
.slide-title { font-size: 19px; letter-spacing: .28em; margin-bottom: 22px; }
.big { font-size: 60px; letter-spacing: -.035em; }
.body { gap: 30px; }

/* 표: 떠 있는 패널 */
.dg-table { border-spacing: 0; background: color-mix(in oklab, var(--fg) 3.5%, transparent);
  border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -60px rgba(0,0,0,.85); }
.dg-table th { background: color-mix(in oklab, var(--acc) 15%, transparent); padding: 20px 30px; border-bottom: 0; font-size: 19px; letter-spacing: .2em; }
.dg-table tr:first-child th:first-child { border-top-left-radius: 26px; } .dg-table tr:first-child th:last-child { border-top-right-radius: 26px; }
.dg-table td { padding: 19px 30px; border-top: 1px solid var(--line); }
.dg-table tr:first-child td { border-top: 0; }
.dg-table tr.row:nth-child(even) td { background: color-mix(in oklab, var(--fg) 2.2%, transparent); }
.dg-table td:first-child { color: var(--acc); font-weight: 800; }
.dg-table tr:last-child td:first-child { border-bottom-left-radius: 26px; } .dg-table tr:last-child td:last-child { border-bottom-right-radius: 26px; }

/* 전·후 비교: 지나간 쪽은 흐리게, 오는 쪽은 빛나게, 가운데 원형 화살표 */
.dg-vs { gap: 76px; align-items: stretch; }
.dg-vs .vs { border-radius: 28px; padding: 32px 36px; }
.dg-vs .vs-b { background: color-mix(in oklab, var(--fg) 2.5%, transparent); border: 1.5px dashed color-mix(in oklab, var(--fg) 18%, transparent); }
.dg-vs .vs-b .vt { color: color-mix(in oklab, var(--fg) 55%, transparent); font-weight: 600; }
.dg-vs .vs-a { background: linear-gradient(140deg, color-mix(in oklab, var(--acc) 30%, transparent), color-mix(in oklab, var(--acc) 7%, transparent) 70%);
  border: 1.5px solid var(--acc); box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--acc) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.dg-vs .vs-a .vt { font-size: 32px; }
.dg-vs .vs-b::after { content: "→"; right: -60px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 0 0 8px color-mix(in oklab, var(--acc) 18%, transparent), 0 10px 30px -6px var(--acc); z-index: 2; }
.dg-vs.n3 .vs-b::after { display: none; }

/* 카드: 떠 있는 판 + HUD 번호 */
.dg-cards { counter-reset: cd; gap: 26px; }
.dg-cards .cd { counter-increment: cd; padding: 34px 32px 34px; border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--fg) 7%, transparent), color-mix(in oklab, var(--fg) 2%, transparent));
  border: 1px solid var(--line); box-shadow: 0 50px 90px -60px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07); }
.dg-cards .cd::before { width: 60px; height: 4px; box-shadow: 0 0 18px var(--acc); }
.dg-cards .cd::after { content: counter(cd, decimal-leading-zero); position: absolute; right: 24px; top: 20px; font-family: "PF Mono", monospace; font-size: 18px; letter-spacing: .14em; color: var(--dim); }
.dg-cards .ct { font-size: 33px; letter-spacing: -.02em; }
.dg-cards .cb { font-size: 27px; color: color-mix(in oklab, var(--fg) 82%, transparent); }

/* 번호 목록: 세로형 — 번호가 빛난다 */
.dg-num .nt { font-size: 26px; letter-spacing: .02em; border-bottom-width: 3px; padding-bottom: 16px; }
.dg-num .ni { grid-template-columns: 110px 1fr; padding: 20px 0; }
.dg-num .nn { font-size: 46px; text-shadow: 0 0 28px color-mix(in oklab, var(--acc) 55%, transparent); }
.dg-num .nb b { font-size: 36px; letter-spacing: -.02em; }
/* 번호 목록: 가로형 — 짧은 항목 2~4개는 큰 타일로 */
.dg-num.row { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 22px; }
.dg-num.row.n2 { --n: 2; } .dg-num.row.n3 { --n: 3; } .dg-num.row.n4 { --n: 4; }
.dg-num.row .nt { grid-column: 1 / -1; }
.dg-num.row .ni { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 34px; border: 1px solid var(--line); border-top: 3px solid var(--acc); border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 12%, transparent), transparent 80%); transform: translateY(40px); }
.step.on .dg-num.row .ni { transform: none; }
.dg-num.row .nn { font-size: 64px; line-height: 1; }
.dg-num.row .nb b { font-size: 34px; }

/* 흐름: 단단한 알약 + 마지막 칸은 불이 켜진다 */
.dg-flow .node { background: color-mix(in oklab, var(--fg) 5%, transparent); border: 1px solid var(--line); box-shadow: 0 20px 40px -28px rgba(0,0,0,.8); padding: 20px 34px; }
.dg-flow .node.hot { background: var(--acc); color: #fff; border-color: var(--acc); box-shadow: 0 0 0 8px color-mix(in oklab, var(--acc) 16%, transparent), 0 24px 60px -20px var(--acc); }

/* 좌우 2단: 짧은 구조물 두 개 */
.pi.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pi.duo > * { margin: 0; min-width: 0; }

/* 큰 숫자 카드도 같은 무게감 */
.dg-stats .st { border-radius: 26px; box-shadow: 0 50px 90px -60px rgba(0,0,0,.9); }
.dg-stats .st .val { text-shadow: 0 0 40px color-mix(in oklab, var(--acc) 45%, transparent); }

/* 밝은 테마에서 그림자 톤 */
.t-paper .dg-table, .t-white .dg-table, .t-paper .dg-cards .cd, .t-white .dg-cards .cd { box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -50px rgba(92,60,36,.35); }
.t-paper .dg-cards .cd, .t-white .dg-cards .cd { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4)); }
.t-paper .dg-table, .t-white .dg-table { background: rgba(255,255,255,.55); }
.t-paper .dg-vs .vs-a, .t-white .dg-vs .vs-a { box-shadow: 0 30px 70px -40px color-mix(in oklab, var(--acc) 60%, transparent); }

/* v4 보정: 지나간 것은 가라앉되 읽힌다 · 전환 장 창살은 도식 뒤로 */
.step.past { opacity: .5; filter: saturate(.55); }
.ty-turn .cage, .ty-quote .cage { opacity: .5; }
.dg-cards .cd, .dg-flow .node, .dg-table, .dg-vs .vs, .dg-num.row .ni { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ty-turn .dg-cards .cd, .ty-turn .dg-vs .vs, .ty-turn .dg-table, .ty-quote .dg-cards .cd, .ty-quote .dg-table { background-color: color-mix(in oklab, var(--bg, #141210) 82%, transparent); }

/* v4 보정: 번호 목록은 한 줄형(이름 + 설명 같은 줄), 다섯 개 이상은 두 단 */
.dg-num:not(.row) .ni { padding: 13px 0; grid-template-columns: 92px 1fr; align-items: center; }
.dg-num:not(.row) .nb { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.dg-num:not(.row) .nb em { display: inline; margin: 0; font-size: 26px; }
.dg-num:not(.row) .nn { font-size: 40px; }
.dg-num:not(.row) .nb b { font-size: 33px; }
.dg-num.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.dg-num.two .nt { grid-column: 1 / -1; }
.dg-num.two .nb { flex-direction: column; gap: 4px; }
.pi.duo .dg-num .nb { flex-direction: column; gap: 4px; }

/* v4 보정: '그 책' 장은 세로 띠를 왼쪽에 띄우고 내용은 넓게 */
.slide.current.ty-book { display: flex; flex-direction: column; justify-content: center; padding-left: 300px; }
.ty-book .spine { position: absolute; left: 150px; top: 120px; bottom: 110px; min-height: 0; width: 80px; }
.ty-book .slide-title, .ty-book .body { grid-column: auto; }
.ty-book .body { gap: 26px; }

/* v4 보정: 하루 시간 막대는 낮게 · 바퀴는 표 옆에 */
.vtrack { height: 240px; gap: 4px; } .vtrack i { height: 11px; }
.pi.duo .wheel, .pi.duo svg { max-width: 100%; }

/* v5 설명 추가판: 요소 안 설명 */
.dg-num.row .nb em { display: block; font-size: 25px; line-height: 1.45; margin-top: 10px; color: color-mix(in oklab, var(--fg) 72%, transparent); font-weight: 500; }
.dg-num.row .ni { justify-content: flex-start; }
.dg-num:not(.row) .nb em { color: color-mix(in oklab, var(--fg) 70%, transparent); line-height: 1.4; }
.dg-cards .cb { line-height: 1.5; }
.dg-vs .vt { line-height: 1.45; }
.dg-table td { line-height: 1.4; }
.tcap { font-size: 26px; font-weight: 800; color: var(--acc); margin: 0 0 14px 4px; letter-spacing: -.01em; }

/* 글 많은 장: 단계 2단 배치 (deck.js fitSlides 가 더 크게 보일 때만 고름) */
.body.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; align-items: start; max-width: none; }
.body.cols2 > .big, .body.cols2 > .step.big { grid-column: 1 / -1; }
.body.cols2 > .para:first-child:has(.lede) { grid-column: 1 / -1; }
.body.cols2 .dg-num.row, .body.cols2 .dg-cards { grid-template-columns: 1fr 1fr; }
.body.cols2 .dg-num.row .nt { grid-column: 1 / -1; }
.body.cols2 .dg-vs { grid-template-columns: 1fr; gap: 40px; }
.body.cols2 .dg-vs .vs-b::after { right: 50%; top: auto; bottom: -44px; transform: translateX(50%) rotate(90deg); }

/* 인용 장 따옴표: 글꼴 기호 대신 그림, 질문 번호 옆에 나란히 (10/23 원장 지적: 따옴표가 번호를 덮음) */
.qhead { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; }
.qhead .qmark { width: 92px; height: 70px; flex: none; fill: var(--acc); line-height: normal; font-size: 0; filter: drop-shadow(0 10px 30px color-mix(in oklab, var(--acc) 45%, transparent)); }
.qhead .qlabel { margin: 0; }
html.still .qhead { opacity: 1 !important; transform: none !important; }

/* ---------- 책 표지 (Q00-01 공개 · Q16-E4) ---------- */
.reveal-book { display: flex; align-items: center; justify-content: center; gap: 72px; text-align: left; }
.reveal-book .reveal-tt { flex: none; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; }
.book-cover { display: block; height: 470px; width: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transform: translateY(40px) rotate(-3deg) scale(.94); transition: opacity 1s var(--out), transform 1.2s var(--out); }
.step.on .book-cover, html.still .step.on .book-cover { opacity: 1; transform: none; }
.book-line { display: flex; align-items: center; gap: 36px; }
.book-cover.sm { height: 190px; flex: none; border-radius: 4px; }

/* ---------- 핵심 문장(slide-sub) 강조 ---------- */
.slide-sub { font-size: 58px; font-weight: 800; line-height: 1.26; letter-spacing: -.03em; color: var(--fg); margin: -2px 0 44px; max-width: 1560px; text-wrap: balance; }
.slide-title:has(+ .slide-sub) { margin-bottom: 20px; }
.slide-sub { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--out) .1s, transform .9s var(--out) .1s; }
.slide.current .slide-sub, html.still .slide-sub { opacity: 1; transform: none; }

/* ---------- 대비 표: 두 편을 색으로 가른다 ---------- */
.dg-table.cmp { --cA: #8fa6ba; --cB: var(--acc); }
.t-paper .dg-table.cmp, .t-white .dg-table.cmp { --cA: #5b7186; }
/* 머리줄 */
.dg-table.cmp th:nth-last-child(2) { color: var(--cA); background: color-mix(in oklab, var(--cA) 15%, transparent); }
.dg-table.cmp th:last-child { color: var(--cB); background: color-mix(in oklab, var(--cB) 26%, transparent); font-weight: 800; }
.dg-table.cmp.cmp-3 th:first-child { color: color-mix(in oklab, var(--fg) 55%, transparent); }
/* 라벨 칸은 중립 */
.dg-table.cmp.cmp-3 td:first-child { color: var(--fg); }
.dg-table.cmp.cmp-3 tr.row td:first-child::before { background: color-mix(in oklab, var(--fg) 40%, transparent); }
/* A 편: 차갑고 가볍게 */
.dg-table.cmp td:nth-last-child(2) { color: color-mix(in oklab, var(--cA) 78%, var(--fg)); font-weight: 400; background: color-mix(in oklab, var(--cA) 6%, transparent); }
.dg-table.cmp:not(.cmp-3) td:first-child { white-space: normal; }
.dg-table.cmp:not(.cmp-3) tr.row td:first-child::before { background: var(--cA); }
/* B 편: 따뜻하고 굵게 */
.dg-table.cmp td:last-child { color: var(--fg); font-weight: 750; background: color-mix(in oklab, var(--cB) 13%, transparent); box-shadow: inset 4px 0 0 color-mix(in oklab, var(--cB) 75%, transparent); }
.dg-table.cmp:not(.cmp-rev):not(.cmp-even) td:last-child { padding-left: 64px; }
.dg-table.cmp:not(.cmp-rev):not(.cmp-even) tr.row td:last-child::after { content: "→"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: .8em; font-weight: 800; color: var(--cB); }
/* 앞쪽이 지킬 편일 때 */
.dg-table.cmp-rev th:nth-last-child(2) { color: var(--cB); background: color-mix(in oklab, var(--cB) 26%, transparent); font-weight: 800; }
.dg-table.cmp-rev th:last-child { color: var(--cA); background: color-mix(in oklab, var(--cA) 15%, transparent); font-weight: 600; }
.dg-table.cmp-rev td:nth-last-child(2) { color: var(--fg); font-weight: 750; background: color-mix(in oklab, var(--cB) 13%, transparent); box-shadow: inset 4px 0 0 color-mix(in oklab, var(--cB) 75%, transparent); }
.dg-table.cmp-rev td:last-child { color: color-mix(in oklab, var(--cA) 78%, var(--fg)); font-weight: 400; background: color-mix(in oklab, var(--cA) 6%, transparent); box-shadow: none; }
/* 어느 편도 아닌 두 얼굴 */
.dg-table.cmp-even td:nth-last-child(2) { color: var(--fg); font-weight: 600; background: color-mix(in oklab, var(--cA) 10%, transparent); }
.dg-table.cmp-even td:last-child { font-weight: 600; box-shadow: none; }

/* ---------- 버릴 생각: 두 번 그어 지운다 ---------- */
.turn-drop { font-size: 56px; font-weight: 700; color: var(--fg); padding: 10px 0; }
.turn-drop::before { content: "✕  버릴 생각"; color: var(--acc); font-size: 22px; font-weight: 700; }
.turn-drop .txt { display: inline; transition: color .5s var(--out) .95s, filter .5s var(--out) .95s; }
.turn-drop .txt::after, .turn-drop .txt::before { content: ""; position: absolute; left: -14px; height: 11px; width: 0; border-radius: 6px; background: var(--acc); box-shadow: 0 0 22px color-mix(in oklab, var(--acc) 60%, transparent); pointer-events: none; }
.turn-drop .txt::after { top: 40%; transform: rotate(-2.2deg); transform-origin: left center; transition: width .42s cubic-bezier(.7,0,.3,1) .35s; }
.turn-drop .txt::before { top: 60%; transform: rotate(1.6deg); transform-origin: left center; transition: width .42s cubic-bezier(.7,0,.3,1) .75s; }
.turn-drop.on .txt::after, .turn-drop.on .txt::before { width: calc(100% + 28px); }
.turn-drop.on .txt { color: var(--dim); filter: blur(.4px); }
.turn-drop.on { animation: scratch .4s ease-out .5s 1, scratch .35s ease-out .9s 1, sink 1.2s var(--out) 1.6s forwards; }
@keyframes scratch { 0% { transform: none; } 30% { transform: translateX(-7px) rotate(-.4deg); } 60% { transform: translateX(5px); } 100% { transform: none; } }
html.still .turn-drop.on { animation: none; opacity: .55; }
@keyframes sink-keep { to { opacity: .55; transform: translateY(10px) scale(.97); } }
.turn-drop.on { animation: scratch .4s ease-out .5s 1, scratch .35s ease-out .9s 1, sink-keep 1.2s var(--out) 1.6s forwards; transform-origin: left center; }
/* 대비 표: B 편 조금 더 진하게 */
.dg-table.cmp:not(.cmp-rev):not(.cmp-even) td:last-child, .dg-table.cmp-rev td:nth-last-child(2) { background: color-mix(in oklab, var(--cB) 17%, transparent); }
/* 책 장: 블록 사이 고정 간격(70px) 대신 여백으로 */
.slide.current.ty-book { gap: 0; }
.ty-book .body { margin-top: 26px; }

/* 큰 문장 밑줄: 화면 끝까지가 아니라 문장보다 조금 길게 */
.ty-generic .big, .ty-scene .big, .ty-myth .big, .ty-trans .big, .ty-case .big, .ty-shift .big, .ty-diagram .big, .ty-book .big, .ty-sales .big { background-image: none; }
.big .hlr { background-image: linear-gradient(transparent 60%, color-mix(in oklab, var(--acc) 34%, transparent) 60%, color-mix(in oklab, var(--acc) 34%, transparent) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1.1s var(--out) .35s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .45em 0 .1em; margin-left: -.1em; }
.step.on.big .hlr, html.still .step.on.big .hlr { background-size: 100% 100%; }

/* 큰 문장이 두 줄로 넘어갈 때: 줄 사이 여유 + 두 줄 길이 고르게 */
.big:has(.hlr) { line-height: 1.55; text-wrap: balance; }
.big.huge:has(.hlr) { line-height: 1.4; }
.big .hlr .cl { white-space: nowrap; }

/* ---------- 인물 사진 (Q07-02 레이 크록) ---------- */
.person-line { display: flex; align-items: center; gap: 40px; margin-bottom: 8px; }
.person { margin: 0; flex: none; position: relative; }
.person img { display: block; height: 230px; width: 190px; object-fit: cover; object-position: 30% 30%; border-radius: 14px; filter: grayscale(1) contrast(1.08); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--acc) 45%, transparent); }
.person::after { content: ""; position: absolute; left: 14px; right: -14px; top: 14px; bottom: 26px; border: 2px solid var(--acc); border-radius: 14px; z-index: -1; opacity: .7; }
.person figcaption { font-family: "PF Mono"; font-size: 15px; letter-spacing: .18em; color: var(--acc); margin-top: 12px; }
.person-line .lede { font-size: 40px; font-weight: 800; color: var(--fg); line-height: 1.3; }
.person-line .lede small { display: block; font-size: 26px; font-weight: 500; color: var(--dim); margin-top: 12px; letter-spacing: -.01em; }

/* 줄 끝에 한 단어만 떨어지지 않게 (외톨이 줄 방지) */
.ln, .dg-table td, .dg-cards .cd, .dg-vs .vt, .act .v, .nextq.note, .dg-list .it, .lede { text-wrap: pretty; word-break: keep-all; }

/* 파트 사이 이동: 페이지가 바뀌어도 끊기지 않고 부드럽게 겹쳐 넘어간다 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* ---------- 세일즈 증거 원본 이미지 ---------- */
.evid { display: flex; justify-content: center; margin: 14px 0; }
.ev-kakao { height: 420px; width: auto; border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.28); }
.ev-ledger { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(0,0,0,.3); }
.ev-paper { width: 1100px; height: 760px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.35); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.ev-paper img { width: 100%; height: auto; display: block; }

/* ---------- 오프라인 모임 사진 (S3-2) ---------- */
.meet { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; height: 600px; margin-bottom: 22px; overflow: hidden; }
.meet img { min-height: 0; min-width: 0; }
.meet img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.4); }
.meet .m1 { grid-row: 1 / 3; }
/* ---------- QR 카드 (상담 · 선물) ---------- */
.qrcard { display: inline-flex; align-items: center; gap: 22px; padding: 16px 26px 16px 16px; border-radius: 20px; background: color-mix(in oklab, var(--fg) 6%, transparent); border: 1px solid var(--line); margin-top: 18px; align-self: flex-start; }
.qrcard img { width: 150px; height: 150px; border-radius: 10px; background: #fff; padding: 6px; }
.qrcard b { display: block; font-size: 30px; font-weight: 800; }
.qrcard span { display: block; font-size: 22px; color: var(--dim); margin-top: 6px; font-family: "PF Mono", monospace; }
.qrcard.big img { width: 230px; height: 230px; }
.qrcard.big b { font-size: 40px; }
.qrcard.big { border-color: color-mix(in oklab, var(--acc) 60%, transparent); background: color-mix(in oklab, var(--acc) 10%, transparent); }
/* ---------- 매 기수 실제 라이브 (S2-1b) ---------- */
.livegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.livegrid figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px -24px rgba(0,0,0,.45); }
.livegrid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.livegrid figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(20,18,16,.78); color: #fff; font-family: "PF Mono", monospace; font-size: 17px; letter-spacing: .08em; padding: 4px 10px; border-radius: 6px; }
/* ---------- SaaS 실제 화면 (S3-5a~j) — 핵심 화면을 가운데 크게 ---------- */
.shot { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 22px; margin: 4px auto 26px; width: 100%; }
.shot img { display: block; max-height: 560px; max-width: 100%; width: auto; height: auto; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 34px 80px -36px rgba(0,0,0,.5); }
.shot.n2 img { max-width: calc(50% - 11px); }
.demo-tag { position: absolute; left: 50%; transform: translateX(-50%); bottom: -16px; font-family: "PF Mono", monospace; font-size: 15px; letter-spacing: .06em; color: #fff; background: rgba(20,18,16,.78); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.body:has(> .shot) .big { text-align: center; }
.body:has(> .shot) > .para, .body:has(> .shot) > .step:not(.shot) { width: 100%; }
/* ---------- 세일즈 내내 오른쪽 아래 상담 카톡 QR ---------- */
#qr-fixed { position: absolute; right: 40px; bottom: 78px; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 8px; background: #fff; border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.08); }
#qr-fixed img { width: 112px; height: 112px; display: block; }
#qr-fixed span { font-family: "Apple SD Gothic Neo", sans-serif; font-size: 15px; font-weight: 800; color: #1c1916; letter-spacing: -.01em; }
/* ---------- 주차별 실제 라이브 움직이는 화면 (S2-2~6) ---------- */
.clips { position: relative; display: flex; justify-content: center; gap: 18px; margin: 0 auto 26px; width: 100%; }
.clips video { width: calc(50% - 9px); max-height: 400px; object-fit: cover; object-position: top left; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 70px -34px rgba(0,0,0,.45); }
.shot.eb-shot img { max-height: 420px; }
.shot.n3 img { max-width: calc(33.3% - 15px); max-height: 440px; object-fit: cover; object-position: top; }
/* ---------- 카톡방에서 온 말 ---------- */
.kakao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
.kk { background: #fee500; color: #1c1916; border-radius: 22px 22px 22px 6px; padding: 22px 24px 18px; box-shadow: 0 22px 44px -28px rgba(0,0,0,.45); opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--spring); transition-delay: calc(var(--i) * 110ms + 150ms); }
.step.on .kk, html.still .kk { opacity: 1; transform: none; }
.kk-b { font-size: 25px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.kk-c { margin-top: 12px; font-size: 17px; font-weight: 700; color: rgba(28,25,22,.6); }
/* ---------- 한 장 두 주제: 덩어리마다 번호 + 확실한 구분선 ---------- */
.para.topic { position: relative; }
.para.topic::before { content: attr(data-topic); position: absolute; left: -96px; top: 2px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "PF Mono", monospace; font-size: 22px; font-weight: 700; color: var(--bg, #141210); background: var(--acc); box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--acc) 70%, transparent); }
.para.topic + .para.topic, .para.topic ~ .para.topic { margin-top: 34px; padding-top: 30px; border-top: 3px solid color-mix(in oklab, var(--acc) 70%, transparent); }
.para.topic ~ .para.topic::before { top: 32px; }
.body > .shot.rank-shot { display: flex; }
.body:has(> .shot.rank-shot) { display: flex; flex-direction: column; }
.shot.rank-shot img { max-height: 520px; width: auto; }
/* ---------- 그로우 실제 조직도·업무표·직무 지도 (Q12-12b·c) ---------- */
.body:has(> .shot.grow-shot) { display: flex; flex-direction: column; }
.shot.grow-shot img { max-height: 600px; }
.shot.n1.grow-shot img { max-height: 640px; }
/* ---------- 커넥트 치료 후 안내 휴대폰 세 컷 (Q16-09b) ---------- */
.body:has(> .shot.care-shot) { display: flex; flex-direction: column; }
.shot.care-shot img { max-width: none; width: auto; max-height: 640px; object-fit: contain; border-radius: 22px; }
.meet video { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.4); min-height: 0; min-width: 0; }
/* ---------- 무료 라이브 아카이브 11회 (S3-3b) ---------- */
.live11 { margin-bottom: 26px; }
.lv-head { display: flex; gap: 14px; margin-bottom: 18px; }
.lv-head em { font-style: normal; font-size: 30px; font-weight: 800; letter-spacing: -.02em; padding: 10px 22px; border-radius: 999px; background: color-mix(in oklab, var(--acc) 14%, transparent); color: var(--acc); }
.lv-head em:nth-child(2) { background: var(--acc); color: #fff; }
.lv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lv { position: relative; padding: 18px 20px 16px; border-radius: 18px; background: color-mix(in oklab, var(--fg, #1c1916) 5%, transparent); border: 1px solid var(--line); opacity: 0; transform: translateY(18px); transition: opacity .45s, transform .6s var(--spring); transition-delay: calc(var(--i) * 70ms + 120ms); }
.step.on .lv, html.still .lv { opacity: 1; transform: none; }
.lv b { display: block; font-family: "PF Mono", monospace; font-size: 22px; font-weight: 700; color: var(--acc); margin-bottom: 6px; }
.lv strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.lv span { display: block; margin-top: 4px; font-size: 17px; font-weight: 600; opacity: .62; }
.lv.today { grid-column: span 2; background: var(--acc); border-color: var(--acc); color: #fff; }
.lv.today b { color: #fff; opacity: .85; }
/* ---------- 수강 원장님 카톡 원본 (S5-15) ---------- */
.body:has(> .shot.kk-shot) { display: flex; flex-direction: column; }
.shot.kk-shot img { max-height: 420px; border-radius: 18px; }
.body:has(> .shot.toss-shot) { display: flex; flex-direction: column; }
.shot.toss-shot img { max-height: 500px; object-fit: contain; }
/* ---------- 11기 일정 달력 (S0-6b) ---------- */
.cal11 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-bottom: 26px; }
.cal-m h4 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-g i { font-style: normal; min-height: 74px; border-radius: 12px; padding: 8px 10px; background: color-mix(in oklab, var(--fg, #1c1916) 4%, transparent); display: flex; flex-direction: column; gap: 2px; }
.cal-g i.dow { min-height: 0; background: none; font-size: 18px; font-weight: 700; opacity: .55; text-align: center; padding: 0 0 4px; }
.cal-g i.dow:first-child { color: var(--acc); opacity: .9; }
.cal-g i.none { background: none; }
.cal-g i b { font-size: 20px; font-weight: 700; opacity: .55; }
.cal-g i.ev b { opacity: 1; }
.cal-g i em { font-style: normal; font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.cal-g i small { font-size: 13.5px; font-weight: 700; line-height: 1.25; opacity: .85; }
.cal-g i.live { background: var(--acc); color: #fff; }
.cal-g i.mt { background: #1c1916; color: #fff; box-shadow: 0 0 0 3px var(--acc); }
.cal-g i.off { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in oklab, var(--fg, #1c1916) 8%, transparent) 8px 16px); }
.cal-g i.off em { opacity: .55; }
.cal-g i { min-height: 86px; overflow: hidden; }
.cal-g i em { font-size: 22px; white-space: nowrap; }
.cal-g i small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cal-g i.mt em { font-size: 19px; }
/* ---------- SaaS 움짤 두 개씩 (S3-5a~j) ---------- */
.body:has(> .shot.saas-clip) { display: flex; flex-direction: column; }
.shot.saas-clip { align-items: center; }
.shot.saas-clip video { display: block; max-width: calc(50% - 11px); max-height: 520px; width: auto; height: auto; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 34px 80px -36px rgba(0,0,0,.5); }
.body:has(> .shot.meta-shot) { display: flex; flex-direction: column; }
.shot.meta-shot img { max-height: 380px; }
/* ---------- 발표판: 질문 장마다 지금 어느 박자인지 (질문 › 장면 › 오해 › 그 책 › 우리 병원 › 한 줄 › 이번 주) ---------- */
.beats { position: absolute; top: 84px; left: 150px; display: flex; gap: 6px; z-index: 2; font-family: "PF Sans"; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.beats i { font-style: normal; padding: 3px 11px; border-radius: 999px; color: var(--dim); background: color-mix(in oklab, var(--dim) 12%, transparent); opacity: .55; }
.beats i.done { opacity: .8; }
.beats i.on { opacity: 1; color: #fff; background: var(--acc); }
.beats i + i::before { content: ""; }
/* ---------- 발표판: 표가 든 펀치라인 장은 밝은 바탕에 큰 문장 작게 ---------- */
.ty-punch.punch-full { justify-content: flex-start; padding-top: 150px; }
.ty-punch.punch-full .big { font-size: 60px; line-height: 1.25; max-width: 1500px; }
.ty-punch.punch-full .turn-drop { font-size: 32px; margin-top: 26px !important; }
.ty-punch.punch-full .turn-drop::before { font-size: 16px; margin-bottom: 8px; }
.ty-punch.punch-full .turn-keep-label { font-size: 16px; margin-top: 18px !important; }
.ty-punch.punch-full .keep .ln { font-size: 30px !important; margin-top: 8px !important; }
.ty-punch.punch-full .ln.sm { font-size: 24px; }
/* 10/25 원장: 발표판 펀치라인 — 버릴 생각·가질 생각 크게, 지우기는 가로 평행선 하나 */
.ty-punch.punch-full .turn-drop { font-size: 52px; line-height: 1.3; margin-top: 34px !important; }
.ty-punch.punch-full .turn-drop::before { font-size: 22px; margin-bottom: 12px; }
.ty-punch.punch-full .turn-keep-label { font-size: 22px; margin-top: 30px !important; }
.ty-punch.punch-full .keep .ln { font-size: 52px !important; line-height: 1.3; margin-top: 12px !important; color: var(--fg); font-weight: 800; }
.ty-punch.punch-full .turn-drop .txt::before { display: none; }
.ty-punch.punch-full .turn-drop .txt::after { top: 50%; height: 6px; transform: none; border-radius: 3px; box-shadow: none; transition: width .5s cubic-bezier(.7,0,.3,1) .35s; }
.ty-punch.punch-full .turn-drop.on .txt::after { width: calc(100% + 28px); }
.ty-punch.punch-full .turn-drop.on .txt { filter: none; }
.ty-punch.punch-full .turn-drop.on { animation: none; }
/* 10/25 발표판: 7비트 칩 줄이 있는 장은 작은 유형 라벨(장면·병원 번역…)을 숨긴다 — 칩과 겹침, 유형은 우상단 chrome 에 있음 */
.slide:has(> .beats) > .slide-title { display: none; }
/* 10/25 원장 「여백 확실하게」: 제목 줄 → 칩 → 본문 사이를 넉넉히, 요소 사이도 넓게 */
.beats { top: 118px; }
.slide:has(> .beats) { padding-top: 196px; }
.slide:has(> .beats) .body { gap: 34px; }
.slide:has(> .beats) .para { gap: 28px; }
.slide:has(> .beats) .big { margin-top: 30px; }
.slide:has(> .beats) .body.cols2 > .para:not(:has(.dg)) { grid-column: 1 / -1; }  /* lede·연결 줄은 가로 전체, 구조물 둘만 좌우 */
.slide:has(> .beats) .slide-sub { margin-bottom: 0; padding-bottom: 52px; }
.slide.current:has(> .beats) { justify-content: flex-start; }  /* 위 정렬: 넘쳐도 칩 줄을 침범하지 않고, 제목 위치가 장마다 같다 */
.slide:has(> .beats) .body.cols2 { gap: 40px 64px; }
/* 펀치라인·이번 주 장은 제목(sub)이 없어 위 여백을 덜 준다 — 넘침 방지 */
.ty-punch.punch-full:has(> .beats), .ty-act:has(> .beats) { padding-top: 150px; }
.ty-punch.punch-full:has(> .beats) .body, .ty-act:has(> .beats) .body { gap: 26px; }