/* 꿈이 감옥이 된 원장들 — 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: 30px; color: var(--dim); font-family: "PF Mono"; letter-spacing: .04em; }
.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); }