/* ============================================================
   바이브 코딩 개론 — Live Slides
   Identity: "Blueprint Notebook" — bright graph-paper workspace where
   ideas are sketched and AI builds them. Signature: highlighter sticky
   notes (questions) that boing in, slightly rotated, like pinned cards.
   ============================================================ */

:root{
  /* paper + ink */
  --paper:#FBFAF7; --paper2:#F2F0EA; --ink:#14181F; --ink-soft:#5A6270;
  /* accents */
  --indigo:#3D4EFF;   /* code energy */
  --coral:#FF5C49;    /* collision / reactions */
  --mint:#00B383;     /* AI can do ✓ */
  --amber:#FFD84D;    /* questions / highlighter */
  --violet:#8B5CF6;
  /* grid + lines */
  --grid:rgba(61,78,255,.07); --grid2:rgba(61,78,255,.13);
  --line:#E4E1D8; --card:#FFFFFF;
  --r:20px;
  --sh:0 10px 34px rgba(20,24,31,.10);
  --sh-sm:0 4px 14px rgba(20,24,31,.08);
  --disp:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--disp); color:var(--ink); overflow:hidden;
  background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- blueprint graph-paper background ---- */
.bg-mesh{position:fixed;inset:0;z-index:0;background:var(--paper)}
.bg-mesh i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bg-mesh .m1{width:40vw;height:40vw;left:-10vw;top:-12vw;background:radial-gradient(circle,#C7CCFF,transparent 70%)}
.bg-mesh .m2{width:34vw;height:34vw;right:-8vw;top:6vw;background:radial-gradient(circle,#FFE0B8,transparent 70%)}
.bg-mesh .m3{width:36vw;height:36vw;left:30vw;bottom:-18vw;background:radial-gradient(circle,#B8F2DF,transparent 70%)}
.bg-mesh .m4{display:none}
.bg-grid{position:fixed;inset:0;z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid2) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 60%,transparent 100%)}

/* ============================================================ STAGE */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:flex;align-items:center;justify-content:center;padding:4vh 5vw}
.slide{
  flex:0 0 auto;
  width:min(1440px,94vw);max-width:1440px;height:min(810px,90vh);max-height:810px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);
  padding:48px 56px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  animation:slideIn .5s cubic-bezier(.2,.8,.2,1);
}
/* corner registration mark — blueprint detail */
.slide::after{content:"";position:absolute;top:18px;right:18px;width:22px;height:22px;
  border-top:2px solid var(--grid2);border-right:2px solid var(--grid2);opacity:.6}
@keyframes slideIn{from{opacity:0;transform:translateY(20px) scale(.99)}to{opacity:1;transform:none}}

.slide h2{font-size:29px;font-weight:800;margin-bottom:8px;letter-spacing:-.6px;display:flex;align-items:center;gap:13px;flex:0 0 auto}
.slide h2 .dot{width:13px;height:13px;border-radius:4px;transform:rotate(45deg);
  background:var(--indigo);box-shadow:0 0 0 4px rgba(61,78,255,.15)}
/* body wrapper — vertically centers content between header and bottom */
.sbody{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:0}
.step-tag{font-family:var(--mono);font-size:15px;font-weight:800;color:#fff;background:var(--indigo);
  padding:5px 13px;border-radius:9px;letter-spacing:1px}
.step-tag.bad{background:var(--coral)}

/* eyebrow label used across slides */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:3px;font-weight:700;
  color:var(--indigo);text-transform:uppercase}

/* progress bar */
.topbar{position:fixed;top:0;left:0;right:0;height:4px;z-index:6;background:var(--paper2)}
.topbar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--indigo),var(--violet));
  transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ============================================================ TITLE */
.slide-title{align-items:center;justify-content:center;text-align:center}
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.kicker{font-family:var(--mono);letter-spacing:7px;font-size:14px;font-weight:700;color:var(--indigo);
  margin-bottom:10px;animation:fadeUp .7s both}
.grad-title{font-size:78px;font-weight:900;letter-spacing:-2.5px;line-height:.98;color:var(--ink);
  animation:fadeUp .7s .08s both;position:relative}
/* highlighter swipe under title — signature highlighter motif */
.grad-title::after{content:"";position:absolute;left:-2%;right:-2%;bottom:8px;height:26px;z-index:-1;
  background:var(--amber);border-radius:4px;transform:skewX(-12deg) scaleX(0);transform-origin:left;
  animation:swipe .6s .6s cubic-bezier(.2,.8,.2,1) forwards;opacity:.85}
@keyframes swipe{to{transform:skewX(-12deg) scaleX(1)}}
.sub{font-size:21px;color:var(--ink-soft);margin-top:18px;animation:fadeUp .7s .2s both}
.sub b{color:var(--ink);font-weight:800}
.mut{font-size:.72em;color:var(--ink-soft);font-weight:600;opacity:.8}
.title-chips{display:flex;gap:12px;margin-top:28px;animation:fadeUp .7s .35s both}
.title-chips span{font-family:var(--mono);padding:9px 18px;border-radius:999px;background:var(--paper);
  border:1.5px solid var(--line);font-weight:600;font-size:14px;box-shadow:var(--sh-sm)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* sketch-to-build logo: pencil node wired to a built block */
.orbit{position:relative;width:150px;height:120px;margin-bottom:8px}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
  font-family:var(--mono);font-size:24px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--indigo),var(--violet));
  box-shadow:0 12px 30px rgba(61,78,255,.4);animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-62%)}}
.ring{position:absolute;left:50%;top:50%;border:1.5px dashed rgba(61,78,255,.35);border-radius:50%;transform:translate(-50%,-50%)}
.ring1{width:96px;height:96px;animation:spin 9s linear infinite}
.ring2{width:124px;height:124px;border-color:rgba(139,92,246,.3);animation:spin 13s linear infinite reverse}
.ring3{width:150px;height:150px;border-color:rgba(0,179,131,.28);animation:spin 18s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.sat{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:3px;background:var(--mint)}
.s1{animation:orbit1 9s linear infinite}
.s2{background:var(--coral);animation:orbit2 13s linear infinite}
.s3{background:var(--amber);animation:orbit3 18s linear infinite}
@keyframes orbit1{from{transform:translate(-50%,-50%) rotate(0) translateX(48px)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(48px)}}
@keyframes orbit2{from{transform:translate(-50%,-50%) rotate(0) translateX(62px)}to{transform:translate(-50%,-50%) rotate(-360deg) translateX(62px)}}
@keyframes orbit3{from{transform:translate(-50%,-50%) rotate(0) translateX(75px)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(75px)}}

/* ============================================================ SLIDE 1: tokens */
.token-stage{display:flex;align-items:center;gap:12px;justify-content:center;margin:26px 0;flex-wrap:wrap}
.token{padding:15px 20px;border-radius:13px;font-size:21px;font-weight:800;
  background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.token.done{animation:fadeUp .5s both}
.token.done:nth-child(1){animation-delay:.05s}
.token.done:nth-child(2){animation-delay:.2s}
.token.done:nth-child(3){animation-delay:.35s}
.token.guess{padding:14px 16px;background:#fff;border-color:var(--indigo);box-shadow:0 8px 22px rgba(61,78,255,.18)}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.bars span{width:60px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;color:var(--ink);font-size:13px;font-weight:700}
.bars span b{display:block;width:100%;height:var(--h);border-radius:7px 7px 0 0;
  background:var(--indigo);color:#fff;text-align:center;line-height:1.7;font-size:12px;
  transform-origin:bottom;animation:growBar .6s both}
.bars span:nth-child(1) b{animation-delay:.4s}
.bars span:nth-child(2) b{animation-delay:.55s}
.bars span:nth-child(3) b{animation-delay:.7s}
.bars span:nth-child(4) b{animation-delay:.85s}
/* winner bar: after all bars grow, flash + lift to show it was "chosen" */
.bars span:first-child b{background:var(--amber);color:var(--ink);box-shadow:0 6px 16px rgba(255,216,77,.5);
  animation:growBar .6s .4s both, winPick 1s 1.1s both}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes winPick{0%{box-shadow:0 6px 16px rgba(255,216,77,.5)}
  30%{transform:translateY(-8px) scale(1.06);box-shadow:0 14px 32px rgba(255,216,77,.85)}
  100%{transform:translateY(-4px);box-shadow:0 10px 24px rgba(255,216,77,.7)}}
.token.next{background:transparent;border:2px dashed var(--indigo);color:var(--indigo);font-size:28px}
.pulse{animation:pulseScale 1.4s infinite}
@keyframes pulseScale{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:1}}
.analogy{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:10px}
.ana-card{padding:16px 28px;border-radius:16px;background:var(--paper);border:1.5px solid var(--line);text-align:center;box-shadow:var(--sh-sm)}
.ana-card .emoji{font-size:40px}
.ana-card .lab{margin-top:6px;font-weight:700;color:var(--ink-soft);font-family:var(--mono);font-size:13px}
.ana-card.hot{border-color:var(--amber);box-shadow:0 8px 22px rgba(255,216,77,.35)}
.ana-card.hot .lab{color:var(--ink)}
.eq{font-size:36px;font-weight:900;color:var(--indigo)}

/* ============================================================ SLIDE 2: stages */
.stages{display:flex;align-items:stretch;justify-content:center;gap:10px;margin:22px 0;flex-wrap:wrap}
.stage-card{flex:1;min-width:178px;max-width:235px;padding:18px;border-radius:16px;text-align:center;
  background:var(--card);border:1.5px solid var(--line);position:relative;box-shadow:var(--sh-sm);
  animation:pop .55s var(--d,0s) both}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:none}}
.stage-card.hot{border-color:var(--mint);box-shadow:0 10px 28px rgba(0,179,131,.22)}
.snum{position:absolute;top:-13px;left:-13px;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;font-family:var(--mono);font-weight:800;color:#fff;font-size:15px;
  background:var(--indigo);box-shadow:0 6px 14px rgba(61,78,255,.4)}
.stage-card.hot .snum{background:var(--mint);box-shadow:0 6px 14px rgba(0,179,131,.4)}
.ill{width:100%;height:94px}
.slab{font-size:17px;font-weight:800;margin-top:6px}
.ssub{font-size:12px;color:var(--ink-soft);margin-top:2px;font-family:var(--mono)}
.flow-arrow{display:flex;align-items:center;font-size:26px;color:var(--indigo);animation:nudge 1.6s infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.fill-soft{fill:rgba(61,78,255,.1);stroke:var(--indigo);stroke-width:1.5}
.fill-soft2{fill:rgba(139,92,246,.1);stroke:var(--violet);stroke-width:1.5}
.fill-dark{fill:#14181F;stroke:var(--mint);stroke-width:1.5}
.ink{fill:var(--ink-soft)}
.ghost{fill:var(--indigo);opacity:.4}
.r{fill:#FF5C49}.y{fill:#FFD84D}.g{fill:#00B383}
.arrow{stroke:var(--indigo);stroke-width:2.5;fill:none}
.anim-dash{stroke-dasharray:6;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-12}}
.anim-fill{animation:wfill 2s ease-in-out infinite}
@keyframes wfill{0%,100%{width:30px}50%{width:60px}}
.termline,.termline2{fill:var(--mint)}
.anim-type{animation:type 2.4s steps(1) infinite}
@keyframes type{0%{width:0}40%{width:50px}100%{width:50px}}
.emojitext{font-size:18px}
.human-shrink{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:6px}
.human-shrink>span{font-weight:700;color:var(--ink-soft);font-size:14px}
.shrink-bar{display:flex;gap:8px;align-items:flex-end}
.shrink-bar i{height:20px;border-radius:5px;display:block;background:var(--indigo);
  width:var(--w);transform:scaleX(0);transform-origin:left;animation:shrinkw .8s ease forwards}
.shrink-bar i:nth-child(2){animation-delay:.15s}
.shrink-bar i:last-child{background:var(--coral);animation-delay:.3s}
@keyframes shrinkw{to{transform:scaleX(1)}}

/* ============================================================ SLIDE 3: broadcast */
.broadcast{display:flex;align-items:center;justify-content:center;gap:48px;margin:18px 0}
.tower{text-align:center}
.tower svg{width:124px;height:144px}
.beacon{fill:var(--coral);animation:beacon 1.4s infinite}
@keyframes beacon{0%,100%{opacity:1;r:6}50%{opacity:.4;r:8}}
.wave{stroke:var(--indigo);stroke-width:2.5;fill:none;opacity:0}
.w1{animation:wave 2s infinite}.w2{animation:wave 2s .3s infinite}.w3{animation:wave 2s .6s infinite}
@keyframes wave{0%{opacity:0;transform:scale(.6)}40%{opacity:.85}100%{opacity:0;transform:scale(1.1)}}
.fixed-cost{margin-top:6px;font-weight:800;color:var(--ink);font-family:var(--mono);font-size:13px}
.viewers{display:flex;flex-direction:column;gap:12px}
.vrow{display:flex;align-items:center;gap:16px;padding:13px 20px;border-radius:14px;
  background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);animation:fadeUp .55s both}
.vrow:nth-child(2){animation-delay:.18s}.vrow:nth-child(3){animation-delay:.36s}
.vrow.hot{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.2)}
.vrow .cnt{flex:1;font-weight:700}
.vrow .per{color:var(--indigo);font-weight:800;font-family:var(--mono);letter-spacing:-1px}
.vrow.hot .per{color:var(--mint)}
.punch{text-align:center;font-size:25px;font-weight:800;margin-top:4px}
.zero{font-size:38px;color:var(--mint)}

/* ============================================================ SLIDE 4: iceberg */
.iceberg-body{justify-content:center}
.iceberg{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.iceberg svg{width:min(420px,46vh);height:auto;display:block}
.sea{fill:rgba(61,78,255,.06)}
.sealine{stroke:var(--indigo);stroke-width:2;stroke-dasharray:8;animation:dash 2s linear infinite}
.ice-light{fill:#fff;stroke:var(--indigo);stroke-width:2}
.ice-dark{fill:rgba(61,78,255,.1);stroke:var(--indigo);stroke-width:1.5}
.berg-top{animation:bergbob 4s ease-in-out infinite}
@keyframes bergbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.berg-label{fill:var(--ink);font-weight:900;font-size:22px;text-anchor:middle}
.berg-label2{fill:var(--ink-soft);font-weight:700;font-size:16px;text-anchor:middle;opacity:0;animation:fadeUp .6s both}
.berg-bot text:nth-child(2){animation-delay:.3s}
.berg-bot text:nth-child(3){animation-delay:.5s}
.berg-bot text:nth-child(4){animation-delay:.7s}
.berg-bot text:nth-child(5){animation-delay:.9s}
/* caps are now stacked banners above/below the svg — no overlap with labels */
.berg-cap{padding:9px 20px;border-radius:999px;font-weight:700;font-size:15px;box-shadow:var(--sh-sm)}
.berg-cap b{font-weight:800}
.berg-cap.top{background:#fff;border:1.5px solid var(--mint);color:var(--mint)}
.berg-cap.bot{background:#fff;border:1.5px solid var(--indigo);color:var(--indigo)}

/* ============================================================ SLIDE 5: hands-on */
.slide-hands{align-items:center;text-align:center;justify-content:center}
.hands-intro{display:flex;flex-direction:column;align-items:center;gap:14px}
.badge-lab{font-family:var(--mono);letter-spacing:5px;font-weight:800;color:var(--ink);padding:8px 20px;border-radius:999px;
  background:var(--amber);box-shadow:0 8px 20px rgba(255,216,77,.45)}
.hands-intro h1{font-size:52px;font-weight:900;letter-spacing:-1.5px;color:var(--ink)}
.warn-card{display:flex;align-items:center;gap:14px;padding:15px 24px;border-radius:15px;font-size:19px;
  background:#fff;border:1.5px solid var(--coral);box-shadow:0 8px 22px rgba(255,92,73,.18)}
.warn-card b{color:var(--coral)}
.warn-ico{font-size:26px}
.shake{animation:shake 4.5s ease-in-out infinite}
@keyframes shake{0%,92%,100%{transform:translateX(0)}94%{transform:translateX(-4px)}96%{transform:translateX(4px)}98%{transform:translateX(-2px)}}
.csv-ill{width:296px;height:auto;margin-top:6px}
.csvh{fill:var(--ink-soft);font-size:11px;font-weight:700;font-family:monospace}
.warnfill{fill:var(--coral);animation:warnpulse 1.6s infinite}
@keyframes warnpulse{0%,100%{opacity:1}50%{opacity:.35}}
.tinytag{fill:var(--coral);font-size:10px;font-weight:800}

/* ============================================================ SLIDE 6: collision */
.collide{display:flex;align-items:center;justify-content:center;gap:22px;margin:16px 0}
.basis{padding:17px 24px;border-radius:16px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.basis .b-ico{font-size:38px}
.basis .b-name{font-weight:800;font-size:16px;margin-top:6px;font-family:var(--mono)}
.basis .b-sub{font-size:12px;color:var(--ink-soft)}
.b1{border-color:var(--indigo)}.b2{border-color:var(--coral)}
.crash{font-size:42px;animation:crash 1.2s infinite}
@keyframes crash{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(8deg)}}
.bars-compare{display:flex;justify-content:center;gap:28px;margin-top:6px;align-items:flex-end}
.bc-col{text-align:center}
.bc-name{font-size:13px;color:var(--ink-soft);margin-bottom:6px;font-weight:700}
.bc-bar{display:flex;gap:6px;align-items:flex-end;height:128px}
.bc-bar i{width:32px;display:flex;align-items:flex-start;justify-content:center;padding-top:4px;
  font-size:11px;font-weight:800;color:#fff;border-radius:6px 6px 0 0;height:var(--h);
  transform-origin:bottom;animation:growBar .7s both}
.bc-bar .was{background:var(--indigo)}
.bc-bar .now{background:var(--coral)}
.bc-col.ghost .was{opacity:.15}
.now.appear{animation:growBar .7s .8s both,glowNow 2s 1s infinite}
@keyframes glowNow{0%,100%{box-shadow:0 0 0 var(--coral)}50%{box-shadow:0 6px 18px rgba(255,92,73,.5)}}
.legend{display:flex;gap:16px;justify-content:center;margin-top:10px}
.legend .lg{font-family:var(--mono);font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px}
.legend .was{background:rgba(61,78,255,.12);color:var(--indigo)}
.legend .now{background:rgba(255,92,73,.12);color:var(--coral)}

/* ============================================================ CLOSING */
/* 이론 Q&A break slide */
.slide-qa{display:grid;place-items:center}
.qa-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;animation:fadeUp .6s both}
.qa-emoji{font-size:64px;animation:nudgeY 1.8s infinite}
.qa-sub{font-size:19px;color:var(--ink-soft);margin:0}.qa-sub b{color:var(--ink);font-weight:800}
.qa-steps{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.qa-step{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 18px;box-shadow:var(--sh-sm)}
.qa-step b{color:var(--indigo)}
.qa-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;font-size:12px;font-weight:800;flex:none}
.qa-hint{margin-top:14px;font-size:13px;color:var(--ink-soft);font-family:var(--mono);background:var(--paper2);padding:8px 16px;border-radius:9px}

.closing{display:flex;flex-direction:column;align-items:center;gap:18px}
.verdict{display:flex;align-items:center;gap:24px}
.v-ai,.v-cant{padding:22px 28px;border-radius:16px;background:var(--card);border:1.5px solid var(--line);text-align:center;box-shadow:var(--sh-sm)}
.v-ai{border-color:var(--mint)}.v-cant{border-color:var(--coral)}
.v-ico{font-size:44px}
.v-can{color:var(--mint);font-weight:800;margin-top:8px}
.v-txt{font-weight:800;margin-top:8px;line-height:1.4}
.v-but{font-size:21px;font-weight:900;color:var(--ink-soft)}
/* verdict entry: 두 카드가 양옆에서 들어오고, "하지만"이 팝, 화살표·pill 순차 */
.v-ai{animation:slideFromL .6s .1s both}
.v-cant{animation:slideFromR .6s .3s both}
.v-but{animation:pop .5s .55s both}
@keyframes slideFromL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes slideFromR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.final-arrow{font-size:32px;color:var(--indigo);animation:arrowIn .4s .7s both, nudgeY 1.4s 1.1s infinite}
@keyframes nudgeY{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes arrowIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.crm-pill{padding:18px 32px;border-radius:999px;font-size:23px;font-weight:800;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh);animation:pop .55s .9s both}
.crm-pill b{color:var(--indigo)}
.glow{animation:pop .55s .9s both, glowPill 2.6s 1.5s infinite}
@keyframes glowPill{0%,100%{box-shadow:var(--sh)}50%{box-shadow:0 14px 40px rgba(61,78,255,.32)}}

/* ============================================================ SIGNATURE: highlighter sticky questions (뽀잉) */
#qlayer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.q-bubble{position:absolute;max-width:290px;padding:14px 17px;border-radius:4px;
  background:var(--amber);color:var(--ink);
  box-shadow:0 14px 36px rgba(20,24,31,.22);font-weight:600;font-size:15px;line-height:1.4;
  transform:rotate(var(--rot,-2deg));
  animation:boing .55s cubic-bezier(.18,1.4,.4,1)}
/* tape strip on top of sticky */
.q-bubble::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:54px;height:18px;background:rgba(255,255,255,.55);border:1px solid rgba(20,24,31,.08)}
.q-bubble .q-name{display:block;font-family:var(--mono);font-size:11px;font-weight:800;color:#9a7a00;margin-bottom:4px}
.q-bubble .q-vote{display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  pointer-events:auto;cursor:pointer;font-size:12px;color:var(--ink);font-weight:800;
  padding:3px 11px;border-radius:999px;background:rgba(20,24,31,.08)}
.q-bubble .q-vote:hover{background:rgba(20,24,31,.16)}
.q-bubble.leaving{animation:fadeOutUp .55s forwards}
/* presenter-only dismiss (X) button on post-its */
.q-bubble .q-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;
  background:var(--coral);color:#fff;font-size:12px;font-weight:800;cursor:pointer;pointer-events:auto;
  box-shadow:0 3px 8px rgba(255,92,73,.5);display:grid;place-items:center;line-height:1;z-index:2}
.q-bubble .q-x:hover{transform:scale(1.15)}
@keyframes boing{0%{transform:scale(0) rotate(var(--rot,-2deg));opacity:0}60%{transform:scale(1.06) rotate(var(--rot,-2deg))}100%{transform:scale(1) rotate(var(--rot,-2deg));opacity:1}}
@keyframes fadeOutUp{to{opacity:0;transform:translateY(-36px) rotate(var(--rot,-2deg)) scale(.92)}}

/* ============================================================ REACTIONS float */
#reactlayer{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.float-emoji{position:absolute;bottom:88px;font-size:36px;animation:floatUp 2.6s ease-out forwards}
@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1;transform:translateY(-18px) scale(1.2)}100%{transform:translateY(-58vh) scale(1) rotate(16deg);opacity:0}}

/* ============================================================ AUDIENCE DOCK */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:7;
  display:flex;align-items:center;gap:14px;padding:16px 22px;
  background:linear-gradient(180deg,transparent,var(--paper) 38%)}
#dock.hidden{display:none}
.dock-inner{margin:0 auto;display:flex;gap:10px;align-items:center;width:min(920px,94vw)}
#qinput{flex:1;padding:14px 18px;border-radius:13px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-size:15px;font-family:var(--disp);outline:none;box-shadow:var(--sh-sm)}
#qinput:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(61,78,255,.16)}
#qinput::placeholder{color:var(--ink-soft)}
.btn{padding:13px 20px;border-radius:13px;border:none;cursor:pointer;font-weight:800;font-size:15px;font-family:var(--disp);
  color:#fff;background:var(--indigo);box-shadow:0 6px 16px rgba(61,78,255,.32);transition:transform .14s,box-shadow .14s}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(61,78,255,.4)}
.btn:active{transform:scale(.96)}
.react-btn{background:#fff;border:1.5px solid var(--line);font-size:21px;padding:11px 16px;color:var(--ink);box-shadow:var(--sh-sm)}
.react-btn:hover{border-color:var(--coral)}

/* reaction tally chips top-right */
#tally{position:fixed;top:16px;right:18px;z-index:6;display:flex;gap:9px}
.tchip{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  background:#fff;border:1.5px solid var(--line);font-weight:800;box-shadow:var(--sh-sm)}
.tchip .tc-num{color:var(--indigo);font-family:var(--mono)}
.tchip.bump{animation:bump .4s}
.nick-chip{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;border-color:transparent;cursor:pointer}
.nick-chip:hover{filter:brightness(1.1)}
.presence-chip{background:var(--ink);color:#fff;border-color:transparent;cursor:pointer}
.presence-chip:hover{filter:brightness(1.2)}
.presence-chip .tc-num{color:#fff}
#presence-list{position:fixed;top:60px;right:18px;z-index:20;width:220px;max-height:60vh;overflow-y:auto;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);padding:8px}
#presence-list.hidden{display:none}
.pl-head{font-size:12px;font-weight:800;color:var(--ink-soft);padding:6px 10px;font-family:var(--mono)}
.pl-row{font-size:14px;font-weight:600;padding:7px 10px;border-radius:8px;display:flex;align-items:center;gap:8px}
.pl-row:hover{background:var(--paper2)}
.pl-av{width:20px;height:20px;object-fit:contain;background:#fff;border-radius:5px;padding:2px;border:1px solid var(--line);flex:0 0 auto}
.pl-empty{font-size:13px;color:var(--ink-soft);padding:16px;text-align:center}

/* presenter slide tree / table of contents (left side) */
#toc{position:fixed;top:0;left:0;bottom:0;width:min(380px,88vw);z-index:30;background:var(--card);
  border-right:1.5px solid var(--line);box-shadow:8px 0 30px rgba(20,24,31,.12);display:flex;flex-direction:column}
#toc.hidden{display:none}
.toc-list{flex:1;overflow-y:auto;padding:8px 10px}
.toc-item{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;cursor:pointer;font-size:14px}
.toc-item:hover{background:var(--paper2)}
.toc-item .toc-n{font-family:var(--mono);font-size:11px;color:var(--ink-soft);width:22px;flex:0 0 auto;text-align:right}
.toc-item .toc-t{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc-sec{background:rgba(61,78,255,.06);margin-top:6px}
.toc-sec .toc-t{font-weight:800;color:var(--indigo)}
.toc-cur{background:rgba(61,78,255,.14);outline:2px solid var(--indigo)}
.toc-cur .toc-t{font-weight:800}

/* presenter question history panel */
#qhistory{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);z-index:30;background:var(--card);
  border-left:1.5px solid var(--line);box-shadow:-8px 0 30px rgba(20,24,31,.12);display:flex;flex-direction:column}
#qhistory.hidden{display:none}
.qh-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1.5px solid var(--line);font-weight:800;font-size:16px}
.qh-head .btn{padding:4px 10px}
.qh-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.qh-empty{color:var(--ink-soft);text-align:center;padding:30px;font-size:14px}
.qh-item{padding:12px 14px;border-radius:11px;background:var(--paper);border:1px solid var(--line)}
.qh-meta{display:flex;gap:10px;align-items:center;font-size:12px;margin-bottom:5px}
.qh-name{font-weight:800;color:var(--indigo)}.qh-time{color:var(--ink-soft);font-family:var(--mono)}
.qh-votes{margin-left:auto;font-family:var(--mono);color:var(--ink-soft)}
.qh-text{font-size:14px;line-height:1.45;color:var(--ink)}
.nick-cancel{background:none;border:none;color:var(--ink-soft);font-size:13px;cursor:pointer;margin-top:8px;text-decoration:underline}
.nick-cancel.hidden{display:none}

/* feedback CTA on closing slide */
.fb-ask{margin-top:26px;font-size:18px;color:var(--ink);animation:fadeUp .6s .3s both}
.fb-ask b{color:var(--coral)}
.feedback-cta{display:inline-block;margin-top:14px;background:#fff;color:var(--indigo);border:2px solid var(--indigo);border-radius:14px;
  padding:14px 30px;font-size:17px;font-weight:800;cursor:pointer;box-shadow:var(--sh-sm);font-family:var(--disp);text-decoration:none}
.feedback-cta:hover{background:var(--indigo);color:#fff}

/* feedback modal */
#feedback{position:fixed;inset:0;z-index:40;background:rgba(20,24,31,.5);display:flex;align-items:center;justify-content:center}
#feedback.hidden{display:none}
.fb-card{background:var(--card);border-radius:22px;padding:30px 34px;width:min(520px,92vw);max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(20,24,31,.3);text-align:center}
.fb-emoji{font-size:40px}
.fb-card h2{font-size:24px;font-weight:900;margin:6px 0 2px}
.fb-card>p{color:var(--ink-soft);font-size:14px;margin-bottom:18px}
.fb-q{text-align:left;margin-bottom:16px}
.fb-q label{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.stars{display:flex;gap:6px}
.star{font-size:30px;color:var(--line);cursor:pointer;transition:color .12s,transform .12s;line-height:1}
.star:hover{transform:scale(1.15)}
.star.on{color:#FFB020}
#fb-text{width:100%;box-sizing:border-box;min-height:72px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;font-family:var(--disp);resize:vertical;margin-top:4px}
#fb-text:focus{outline:none;border-color:var(--indigo)}
.fb-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:16px}
.fb-actions .nick-cancel{margin-top:0}
.fb-thanks{margin-top:14px;font-size:16px;font-weight:800;color:var(--mint)}
.fb-thanks.hidden{display:none}

/* feedback summary panel (presenter) */
#fbsummary{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);z-index:30;background:var(--card);
  border-left:1.5px solid var(--line);box-shadow:-8px 0 30px rgba(20,24,31,.12);display:flex;flex-direction:column}
#fbsummary.hidden{display:none}
.fbs-avgs{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.fbs-row{display:flex;align-items:center;gap:10px}
.fbs-lbl{font-size:13px;font-weight:700;width:90px;flex:0 0 auto}
.fbs-bar{flex:1;height:12px;background:var(--paper2);border-radius:6px;overflow:hidden}
.fbs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--violet))}
.fbs-num{font-family:var(--mono);font-weight:800;color:var(--indigo);width:32px;text-align:right}
.fbs-texts-head{font-size:13px;font-weight:800;color:var(--ink-soft);margin:14px 0 10px}
/* overall score */
.fbs-overall{text-align:center;padding:14px 0 18px;border-bottom:1.5px solid var(--line);margin-bottom:16px}
.fbs-ov-num{font-size:44px;font-weight:900;color:var(--indigo);line-height:1;font-family:var(--mono)}
.fbs-ov-stars{font-size:22px;color:#FFB020;letter-spacing:2px;margin-top:4px}
.fbs-ov-lbl{font-size:12px;color:var(--ink-soft);margin-top:4px;font-weight:700}
/* per-submission */
.fbs-item{padding:11px 13px;border-radius:11px;background:var(--paper);border:1px solid var(--line);margin-bottom:9px}
.fbs-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.fbs-name{font-weight:800;color:var(--indigo);font-size:14px}
.fbs-time{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.fbs-item-stars{font-size:11.5px;color:var(--ink-soft);letter-spacing:.3px}
.fbs-item-text{font-size:13.5px;line-height:1.45;margin-top:6px;color:var(--ink)}
/* head buttons + danger */
.qh-head-btns{display:flex;gap:8px;align-items:center}
.btn.danger{background:rgba(255,92,73,.12);color:var(--coral);border:1px solid var(--coral)}
.btn.danger:hover{background:var(--coral);color:#fff}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* presenter controls */
#presenter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:8;
  display:flex;gap:11px;align-items:center;padding:12px 18px;border-radius:16px;
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh)}
#presenter.hidden{display:none}
#presenter .nav{width:46px;height:46px;border-radius:12px;font-size:22px;display:grid;place-items:center}
#presenter .pinfo{font-family:var(--mono);font-weight:800;color:var(--ink-soft);min-width:74px;text-align:center}

.pres-tag{position:fixed;top:16px;left:18px;z-index:6;padding:8px 15px;border-radius:999px;
  background:var(--amber);color:var(--ink);font-weight:800;font-size:13px;box-shadow:var(--sh-sm)}
/* audience follow toggle + free nav */
.follow-toggle{position:fixed;top:14px;left:18px;z-index:6;display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.follow-toggle .a-nav{width:30px;height:30px;padding:0;border-radius:8px;font-size:16px;
  background:var(--paper);border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.follow-toggle .a-nav:hover{border-color:var(--indigo)}
.follow-page{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink-soft);min-width:44px;text-align:center}
.follow-btn{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);cursor:pointer;
  font-family:var(--disp);font-weight:800;font-size:13px;background:var(--paper);color:var(--ink-soft);transition:.15s}
.follow-btn.on{background:rgba(0,179,131,.12);border-color:var(--mint);color:var(--mint)}
.behind-nudge{font-size:12px;font-weight:700;color:var(--coral);padding-left:4px}
.hidden{display:none}

/* connection dot */
#conn{position:fixed;bottom:13px;right:16px;z-index:9;display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--ink-soft);font-family:var(--mono);font-weight:600}
#conn .cdot{width:9px;height:9px;border-radius:50%;background:var(--coral)}
#conn.live .cdot{background:var(--mint);animation:livedot 2s infinite}
@keyframes livedot{0%,100%{box-shadow:0 0 0 0 rgba(0,179,131,.5)}50%{box-shadow:0 0 0 5px rgba(0,179,131,0)}}

/* ============================================================ NICKNAME MODAL */
#nick{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(251,250,247,.82);backdrop-filter:blur(8px)}
#nick.hidden{display:none}
.nick-card{width:min(440px,92vw);padding:40px 36px;border-radius:24px;text-align:center;
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh);animation:slideIn .45s}
.nick-card .nemoji{font-size:52px;animation:bob 3s ease-in-out infinite}
.nick-card h2{font-size:25px;margin:14px 0 6px;justify-content:center}
.nick-card p{color:var(--ink-soft);margin-bottom:20px}
#nickinput{width:100%;padding:16px 18px;border-radius:13px;text-align:center;font-size:18px;font-weight:700;
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);outline:none;font-family:var(--disp)}
#nickinput:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(61,78,255,.16)}
.nick-card .btn{width:100%;margin-top:18px;padding:16px}
.avatar-row{display:flex;gap:8px;justify-content:center;margin:16px 0 24px;flex-wrap:wrap}
.avatar-row .av-opt{cursor:pointer;width:44px;height:44px;border-radius:11px;transition:.14s;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;background:#fff;padding:8px;box-sizing:border-box}
.avatar-row .av-opt img{width:100%;height:100%;object-fit:contain}
.avatar-row .av-opt:hover{transform:scale(1.12)}
.avatar-row .av-opt.sel{background:rgba(61,78,255,.1);border-color:var(--indigo);border-width:2px;transform:scale(1.12)}
/* avatar in chip / nick chip */
.chip-av{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin-right:5px;background:#fff;border-radius:4px;padding:1px}
/* inline brand logo for slide body text */
.blogo{width:1.15em;height:1.15em;object-fit:contain;vertical-align:-0.22em;margin-right:.28em;background:#fff;border-radius:5px;padding:1.5px;box-shadow:0 1px 3px rgba(20,24,31,.14)}
.blogo.big{width:1.5em;height:1.5em;vertical-align:-0.35em}
.brand{white-space:nowrap}

/* 카파시 커리어 로고 부채 (Tesla → OpenAI → Anthropic) */
.kfan{display:inline-flex;align-items:center;vertical-align:-0.4em;margin-right:.4em}
.kfan img{width:1.5em;height:1.5em;object-fit:contain;background:#fff;border-radius:6px;padding:2px;
  border:1.5px solid var(--line);box-shadow:0 1px 4px rgba(20,24,31,.15);margin-left:-0.5em;
  transform-origin:bottom center;animation:kfanOut .5s both}
.kfan img:first-child{margin-left:0}
.kfan img:nth-child(1){animation-delay:.15s;--rot:-16deg;z-index:1}
.kfan img:nth-child(2){animation-delay:.3s;--rot:0deg;z-index:2}
.kfan img:nth-child(3){animation-delay:.45s;--rot:16deg;z-index:3}
@keyframes kfanOut{0%{opacity:0;transform:rotate(0) translateY(4px) scale(.6)}
  100%{opacity:1;transform:rotate(var(--rot)) translateY(0) scale(1)}}

/* 입장 토스트 — 오른쪽에서 슬라이드 인 */
#enter-toasts{position:fixed;right:16px;bottom:90px;z-index:50;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.enter-toast{display:flex;align-items:center;gap:9px;background:rgba(15,19,32,.94);color:#fff;
  padding:10px 16px 10px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:14px;font-weight:600;
  animation:toastIn .45s cubic-bezier(.2,1.2,.4,1) both;backdrop-filter:blur(6px);white-space:nowrap}
.enter-toast b{color:#ffd84d}
.enter-toast .et-av{width:22px;height:22px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}
.enter-toast.leaving{animation:toastOut .45s forwards}
@keyframes toastIn{0%{opacity:0;transform:translateX(60px)}100%{opacity:1;transform:none}}
@keyframes toastOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(60px)}}

/* 리더보드 초기화 버튼 (강사 전용) */
.lb-reset{margin-left:14px;font-size:14px;font-weight:700;color:var(--coral);background:rgba(255,92,73,.1);
  border:1.5px solid var(--coral);border-radius:10px;padding:6px 14px;cursor:pointer;vertical-align:middle}
.lb-reset:hover{background:var(--coral);color:#fff}
.lb-reset.hidden{display:none}

/* 오늘의 강의 주제 */
.topic-q{display:flex;align-items:stretch;justify-content:center;gap:20px;width:min(880px,94%)}
.tq-card{flex:1;max-width:340px;padding:24px 28px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:10px;animation:slideFromL .6s .1s both}
.tq-card.hot{border-color:var(--indigo);box-shadow:0 10px 26px rgba(61,78,255,.16);animation:slideFromR .6s .3s both}
.tq-n{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--ink-soft);letter-spacing:1px}
.tq-card.hot .tq-n{color:var(--indigo)}
.tq-t{font-size:20px;font-weight:800;line-height:1.4;color:var(--ink)}.tq-t b{color:var(--indigo)}
.tq-amp{align-self:center;font-family:var(--mono);font-weight:800;color:var(--ink-soft);font-size:22px}
.topic-note{width:min(820px,92%);background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
  padding:20px 26px;box-shadow:var(--sh-sm);animation:fadeUp .6s .55s both}
.topic-note p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 8px}
.topic-note p:last-child{margin-bottom:0}
.topic-note b{color:var(--ink)}
.topic-ps{font-size:14px !important;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:10px;margin-top:4px !important}

/* presenter speaker notes (presenter screen only) */
#note-panel{position:fixed;left:16px;bottom:74px;width:min(420px,32vw);max-height:38vh;z-index:40;
  background:rgba(15,19,32,.94);color:#e6e9f2;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px);font-family:'Pretendard',sans-serif}
#note-panel.collapsed .note-body{display:none}
.note-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;font-size:13px;font-weight:800;
  letter-spacing:.5px;background:rgba(255,255,255,.06);color:#aab3ff}
.note-head button{background:none;border:0;color:#aab3ff;font-size:16px;cursor:pointer;line-height:1}
.note-body{padding:13px 16px;overflow-y:auto;font-size:15px;line-height:1.65}
.note-body b{color:#ffd84d}
.note-body ul{margin:6px 0 0;padding-left:18px}.note-body li{margin:3px 0}
.note-empty{color:#6b7488;font-size:13px}

/* 거대한 지식 도서관 — 질문 → 알맞은 책이 빛남 → 답 (화살표 펄스로 흐름 표현) */
.library{display:flex;align-items:center;justify-content:center;gap:14px;width:min(940px,96%);margin:6px auto}
.lib-q,.lib-a{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:30px;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--sh-sm)}
.lib-q span,.lib-a span{font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.3}
.lib-a{border-color:var(--mint)}
.lib-arrow{flex:none;font-size:24px;color:var(--indigo);font-weight:800}
.lib-arrow.a1{animation:libFlow 2.4s .2s infinite}
.lib-arrow.a2{animation:libFlow 2.4s 1.2s infinite}
@keyframes libFlow{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:1;transform:translateX(5px)}}
.lib-shelf{position:relative;flex:1;background:linear-gradient(180deg,#f5ecd9,#ece0c7);border:1.5px solid #d8c7a4;
  border-radius:12px;padding:12px 14px 30px;box-shadow:inset 0 2px 8px rgba(120,90,40,.18)}
.shelf-row{display:flex;gap:3px;align-items:flex-end;height:34px;margin-bottom:5px;border-bottom:3px solid #c9b487;padding-bottom:2px}
.bk{flex:1;border-radius:2px 2px 0 0;height:calc(70% + var(--h,0)*30%)}
.bk:nth-child(odd){height:92%}.bk:nth-child(3n){height:78%}.bk:nth-child(4n){height:100%}
.bk.c0{background:#3d4eff}.bk.c1{background:#00b383}.bk.c2{background:#ff5c49}.bk.c3{background:#ffb84d}.bk.c4{background:#8b5cf6}
/* "선택되는 책" — 위로 살짝 튀어나오며, 빨간 체크(✓) 배지가 떠오른다 */
.bk.pick{transform-origin:bottom;position:relative;overflow:visible}
.bk.pick.p1{animation:bookPick 2.4s .6s infinite}
.bk.pick.p2{animation:bookPick 2.4s 1.0s infinite}
.bk.pick.p3{animation:bookPick 2.4s 1.4s infinite}
@keyframes bookPick{0%,100%{transform:translateY(0) scaleY(1);filter:none}
  40%,60%{transform:translateY(-10px) scaleY(1.12);filter:brightness(1.12)}}
/* red check badge above the picked book */
.bk.pick::after{content:"✓";position:absolute;left:50%;top:-14px;transform:translateX(-50%) scale(0);
  width:18px;height:18px;border-radius:50%;background:#ff3b30;color:#fff;font-size:11px;font-weight:900;
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(255,59,48,.5);opacity:0;line-height:1}
.bk.pick.p1::after{animation:checkPop 2.4s .6s infinite}
.bk.pick.p2::after{animation:checkPop 2.4s 1.0s infinite}
.bk.pick.p3::after{animation:checkPop 2.4s 1.4s infinite}
@keyframes checkPop{0%,30%{opacity:0;transform:translateX(-50%) scale(0)}
  45%{opacity:1;transform:translateX(-50%) scale(1.25)}
  60%{opacity:1;transform:translateX(-50%) scale(1)}
  75%,100%{opacity:0;transform:translateX(-50%) scale(1)}}
.lib-label{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;color:#7a5f2e}

/* DeepSeek — 큰 모델이 작게 압축되는 애니메이션 */
.compress{display:flex;align-items:center;justify-content:center;gap:20px;width:min(880px,94%);margin:4px auto}
.cmp-side{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1}
.cmp-big,.cmp-small{display:grid;gap:4px;background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;padding:14px;box-shadow:var(--sh-sm)}
.cmp-big{grid-template-columns:repeat(6,20px);grid-auto-rows:20px}
.cmp-small{grid-template-columns:repeat(6,11px);grid-auto-rows:11px;border-color:var(--mint);animation:cmpPulse 2.4s .4s infinite}
.cmp-big i,.cmp-small i{border-radius:4px;background:var(--indigo);opacity:.85;animation:cmpNode 2.4s var(--d,0s) infinite}
.cmp-small i{background:var(--mint);border-radius:2px}
@keyframes cmpNode{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes cmpPulse{0%,100%{box-shadow:var(--sh-sm)}50%{box-shadow:0 8px 26px rgba(0,179,131,.4)}}
.cmp-bolt{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.cmp-zap{font-size:34px;animation:pulseScale 1.4s infinite}
.cmp-lab{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap}
.cmp-arrow{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--coral)}
.sb-sub{font-size:13px;color:var(--ink-soft);font-weight:600;text-align:center}.sb-sub.hot{color:var(--mint)}
.sb-lab{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:2px;color:var(--ink-soft)}.sb-lab.hot{color:var(--mint)}

/* 모델 크기 × 시간 산점도 — 로고 점이 시간순으로 촥촥 찍힘 */
.scatter{width:min(1000px,96%);margin:0 auto}
.sc-svg{width:100%;height:auto;overflow:visible}
.sc-axis{stroke:var(--ink);stroke-width:2;opacity:.5}
.sc-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.sc-yl{fill:var(--ink-soft);font-size:12px;font-family:var(--mono);text-anchor:end;font-weight:700}
.sc-xl{fill:var(--ink-soft);font-size:14px;font-family:var(--mono);text-anchor:middle;font-weight:800}
.sc-ytitle{fill:var(--ink-soft);font-size:12px;font-weight:800}
.sc-pt{transform:translate(var(--x),var(--y));opacity:0;animation:scDrop .5s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both}
@keyframes scDrop{0%{opacity:0;transform:translate(var(--x),calc(var(--y) - 40px)) scale(.3)}
  100%{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}}
.sc-halo{fill:var(--indigo);opacity:.14}
.sc-disc{fill:#fff;stroke:var(--indigo);stroke-width:2}
.sc-pt.est .sc-disc{stroke-dasharray:3 3;stroke:var(--ink-soft);opacity:.9}
.sc-pt.est .sc-halo{fill:var(--ink-soft);opacity:.08}
.sc-pt.est image{opacity:.6}
.sc-name{fill:var(--ink);font-size:9px;font-weight:800;text-anchor:middle}
.sc-est{fill:var(--coral);font-size:8px;font-weight:700}
.sc-legend{float:right;font-size:12px;color:var(--ink-soft);font-weight:700}

/* translation flow (개발자=통역사) */
.xlate-flow{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:4px}
.xf-node{font-size:15px;font-weight:800;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:16px 20px;box-shadow:var(--sh-sm)}
.xf-mid{display:flex;flex-direction:column;gap:8px}
.xf-bad,.xf-good{font-size:13px;font-weight:700;text-align:center;border-radius:11px;padding:8px 16px;border:1.5px solid var(--line);background:var(--card);line-height:1.35;animation:pop .5s both}
.xf-bad{border-color:var(--coral)}.xf-good{border-color:var(--mint);animation-delay:.15s}
.xf-bad span,.xf-good span{display:block;font-size:11px;font-weight:600;color:var(--ink-soft);font-family:var(--mono)}

/* agent loop (관찰→기억→행동↻) */
.agent-loop{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.al-node{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:30px;background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:14px 22px;box-shadow:var(--sh-sm);animation:pop .5s both}
.al-node span{font-size:15px;font-weight:800;color:var(--ink)}
.al-node i{font-size:12px;font-style:normal;color:var(--ink-soft);font-family:var(--mono)}
.al-node.hot{border-color:var(--mint)}
.al-ar{font-size:24px;color:var(--indigo);font-weight:800}
.al-loop{font-size:14px;font-weight:800;color:var(--coral);background:rgba(255,92,73,.1);border-radius:10px;padding:8px 14px;animation:pulseScale 2s infinite}
.nick-chip{display:flex;align-items:center}
.av-img{width:16px;height:16px;object-fit:contain;vertical-align:middle}

/* ============================================================ SECTION DIVIDERS */
.slide-section{align-items:flex-start;justify-content:center}
.sec-wrap{display:flex;align-items:center;gap:34px;width:100%;padding-left:10px}
.sec-num{font-family:var(--mono);font-size:130px;font-weight:800;line-height:.9;color:transparent;
  -webkit-text-stroke:3px var(--indigo);text-stroke:3px var(--indigo);opacity:.85;
  animation:secNumIn .7s cubic-bezier(.2,.9,.2,1) both}
@keyframes secNumIn{0%{opacity:0;transform:translateX(-40px) scale(.7)}
  60%{opacity:.85;transform:translateX(6px) scale(1.04)}100%{opacity:.85;transform:none}}
.sec-num.lab{-webkit-text-stroke:0;font-size:110px;animation:secLabIn 1s both}
@keyframes secLabIn{0%,100%{transform:none}0%{opacity:0;transform:scale(.5) rotate(-12deg)}
  55%{opacity:1;transform:scale(1.15) rotate(6deg)}75%{transform:scale(.95) rotate(-3deg)}}
.sec-eyebrow{font-family:var(--mono);letter-spacing:5px;font-size:14px;font-weight:700;color:var(--indigo);margin-bottom:10px;
  animation:fadeUp .5s .25s both}
.sec-eyebrow.hot{color:var(--coral)}
.sec-meta h1{font-size:58px;font-weight:900;letter-spacing:-2px;line-height:1.04;animation:fadeUp .6s .38s both}
.sec-meta p{font-size:21px;color:var(--ink-soft);margin-top:12px;animation:fadeUp .6s .52s both}
.hands-divider .sec-num{-webkit-text-stroke:0}

/* generic punch line + quote */
.punch-line{flex:0 0 auto;text-align:center;font-size:20px;font-weight:700;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);padding:13px 26px;border-radius:14px;box-shadow:var(--sh-sm);
  animation:punchIn .6s .5s both}
.punch-line b{color:var(--indigo)}
@keyframes punchIn{0%{opacity:0;transform:translateY(14px) scale(.98)}
  100%{opacity:1;transform:none}}
/* the .hot (coral) punch-line = the money line → extra pop */
.punch-line.hot{animation:punchInHot .7s .6s both}
@keyframes punchInHot{0%{opacity:0;transform:translateY(16px) scale(.96)}
  60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{opacity:1;transform:none}}
.quote-card{text-align:center;font-size:21px;font-weight:700;padding:20px 30px;border-radius:16px;
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-sm);max-width:840px}
.quote-card b{color:var(--indigo)}
.mid-statement{font-size:26px;font-weight:800;text-align:center}.mid-statement b{color:var(--indigo)}

/* three-up cards */
.three-up{display:flex;gap:18px;justify-content:center}
.tu-card{width:230px;padding:24px 20px;border-radius:18px;text-align:center;background:var(--card);
  border:1.5px solid var(--line);box-shadow:var(--sh-sm);animation:pop .55s var(--d,0s) both}
.tu-card.hot{border-color:var(--coral);box-shadow:0 10px 26px rgba(255,92,73,.16)}
.tu-ico{font-size:46px}.tu-t{font-size:19px;font-weight:800;margin-top:10px;word-break:keep-all}
.tu-s{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.tu-s b{color:var(--indigo)}
/* logo tile inside a tu-card (partnership cards) */
.tu-logo{width:56px;height:56px;margin:0 auto;border-radius:14px;background:#fff;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(20,24,31,.12);padding:8px}
.tu-logo img{width:100%;height:100%;object-fit:contain}
.part-cards .tu-card{width:250px}
.part-cards .tu-t{font-size:16px;margin-top:12px}

/* GO board (알파고) */
.go-stage{display:flex;gap:34px;align-items:center}
.goban{display:grid;grid-template-columns:repeat(7,1fr);gap:0;width:300px;height:300px;
  background:#F0D9A8;border:2px solid #c9a874;border-radius:8px;padding:18px;box-shadow:var(--sh-sm)}
.gx{position:relative;border-right:1px solid rgba(120,80,30,.35);border-bottom:1px solid rgba(120,80,30,.35);display:grid;place-items:center}
.stone{width:26px;height:26px;border-radius:50%;display:block}
.stone.b{background:radial-gradient(circle at 35% 30%,#555,#000)}
.stone.w{background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf);border:1px solid #bbb}
.cand{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(61,78,255,calc(var(--p)/140));border:2px dashed var(--indigo);animation:candPulse 1.6s infinite}
.cand b{font-size:9px;font-weight:800;color:var(--indigo)}
@keyframes candPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.go-side{display:flex;flex-direction:column;gap:14px;width:280px}
.go-line{font-family:var(--mono);font-size:13px;color:var(--ink-soft);font-weight:700}
.go-prob{display:flex;flex-direction:column;gap:10px}
.pbar{position:relative}
.pbar span{display:block;height:30px;border-radius:8px;background:var(--indigo);width:0;animation:growW .9s ease forwards}
.pbar:nth-child(2) span{animation-delay:.15s;opacity:.7}.pbar:nth-child(3) span{animation-delay:.3s;opacity:.45}
.pbar label{position:absolute;left:12px;top:6px;font-size:13px;font-weight:700;color:#fff}
@keyframes growW{to{width:var(--w)}}
.go-note{font-size:14px;color:var(--ink-soft);line-height:1.5}.go-note b{color:var(--indigo)}

/* mirror (알파고=LLM) */
.mirror{display:flex;align-items:center;gap:22px}
.mirror-card{padding:16px 26px;border-radius:16px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.mirror-card.hot{border-color:var(--amber);box-shadow:0 8px 22px rgba(255,216,77,.3)}
.mc-ico{font-size:38px}.mc-t{font-size:14px;color:var(--ink-soft);margin-top:6px;line-height:1.5}.mc-t b{color:var(--ink);font-size:16px}
.mirror-eq{font-family:var(--mono);font-weight:800;color:var(--indigo);font-size:15px}

/* scale boxes (1막) */
.scale-row{display:flex;align-items:flex-end;gap:18px}
.scale-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;
  width:calc(80px + var(--s)*120px);height:calc(80px + var(--s)*120px);border-radius:18px;
  background:linear-gradient(160deg,rgba(61,78,255,.16),rgba(139,92,246,.1));border:1.5px solid var(--indigo);
  padding:16px;animation:pop .6s both}
.scale-box b{font-size:calc(13px + var(--s)*6px);font-weight:800}.scale-box span{font-size:12px;color:var(--ink-soft);font-family:var(--mono)}
.scale-arrow{font-size:30px;color:var(--indigo);align-self:center}
.law-card{font-size:17px;font-weight:700;padding:12px 22px;border-radius:13px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.law-card b{color:var(--indigo)}
.cost-warn{font-size:16px;font-weight:700;padding:12px 22px;border-radius:13px;background:rgba(255,92,73,.08);border:1.5px solid var(--coral);color:var(--ink)}
.cost-warn b{color:var(--coral)}

/* shock (2막) */
.shock{display:flex;align-items:center;gap:24px}
.shock-before,.shock-after{padding:20px 26px;border-radius:18px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);min-width:200px}
.shock-after{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.16)}
.sb-lab{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink-soft);letter-spacing:2px}
.sb-lab.hot{color:var(--mint)}
.sb-big{font-size:22px;font-weight:800;margin:10px 0 4px}.sb-sub{font-size:13px;color:var(--ink-soft)}
.shock-bolt{display:flex;flex-direction:column;align-items:center;font-size:38px;animation:crash 1.4s infinite}
.shock-bolt span{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--coral);margin-top:4px}
.tech-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:760px}
.tech-chips span{font-family:var(--mono);font-size:13px;font-weight:700;padding:8px 15px;border-radius:999px;
  background:rgba(61,78,255,.08);color:var(--indigo);border:1px solid rgba(61,78,255,.2)}

/* vs-evolve (3막) */
.vs-evolve{display:flex;align-items:center;gap:16px}
.ve-card{width:200px;padding:20px;border-radius:18px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.ve-card.hot{border-color:var(--amber)}.ve-card.win{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.18)}
.ve-ico{font-size:42px}.ve-t{font-size:18px;font-weight:800;margin-top:8px}.ve-s{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.ve-plus,.ve-eq{font-size:28px;font-weight:900;color:var(--indigo)}

/* benchmark */
.bench-wrap{display:flex;align-items:center;gap:30px}
.bench-col{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 24px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.bench-cap{font-size:15px;font-weight:800}
.bench-bars{display:flex;align-items:flex-end;gap:12px;height:120px}
.bb{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bb span{width:38px;border-radius:7px 7px 0 0;background:var(--ink-soft);height:var(--h);transform-origin:bottom;animation:growBar .8s both}
.bb span.claude{background:var(--indigo)}
.bb label{font-size:11px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.2}
.bench-note{font-size:13px;color:var(--ink-soft)}.bench-note b{color:var(--ink)}.bench-note.hot b{color:var(--coral)}
.bench-arrow{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--indigo)}

/* tool grid */
.tool-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:1000px}
.tool-card{width:180px;padding:18px;border-radius:16px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);animation:pop .5s var(--d,0s) both}
.tool-card.hot{border-color:var(--mint);box-shadow:0 10px 24px rgba(0,179,131,.16)}
.tc-logo{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:28px;margin:0 auto 10px}
.tc-logo img{width:32px;height:32px;object-fit:contain}
.tc-logo.a{background:rgba(61,78,255,.12)}.tc-logo.b{background:rgba(20,24,31,.08)}.tc-logo.c{background:rgba(139,92,246,.14)}.tc-logo.d{background:rgba(255,216,77,.2)}.tc-logo.e{background:rgba(0,179,131,.14)}
.tc-n{font-size:16px;font-weight:800}.tc-d{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.4}

/* abstraction stack (0/1 → asm → PL → 자연어) */
.abz{display:flex;flex-direction:column;width:min(760px,94%)}
.abz-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.abz-row.top{border-color:var(--coral);box-shadow:0 8px 20px rgba(255,92,73,.14)}
.abz-ico{font-size:22px;width:30px;text-align:center;flex:none}
.abz-t{font-weight:800;font-size:15.5px;color:var(--ink)}
.abz-d{font-size:12.5px;color:var(--ink-soft);margin-left:auto;font-family:var(--mono);text-align:right;line-height:1.4}
.abz-conv{align-self:center;font-family:var(--mono);font-size:12px;font-weight:800;color:var(--indigo);padding:5px 0}
.abz-conv b{color:var(--coral)}

/* case gallery (AI 사례 — 못 푼 걸 푼다 / 더 싸게) */
.case-grid{display:flex;flex-direction:column;gap:12px;width:min(940px,94%)}
.case{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:15px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.case.hot{border-color:var(--coral)}.case.buy{border-color:var(--mint)}
.case-logo{flex:none;width:46px;height:46px;border-radius:11px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 4px rgba(20,24,31,.12);padding:6px}
.case-logo img{width:100%;height:100%;object-fit:contain}
.case-body{flex:1;min-width:0}
.case-name{font-size:16px;font-weight:800;color:var(--ink)}
.case-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.45;margin-top:2px}
.case-desc b{color:var(--ink)}
.case-badge{flex:none;font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--indigo);background:rgba(61,78,255,.1);padding:7px 12px;border-radius:9px;text-align:center;line-height:1.35;max-width:180px}
.case.hot .case-badge{color:var(--coral);background:rgba(255,92,73,.1)}
.case.buy .case-badge{color:var(--mint);background:rgba(0,179,131,.1)}

/* claude code split */
.cc-split{display:flex;align-items:stretch;gap:18px}
.cc-old,.cc-new{flex:1;max-width:340px;padding:22px 26px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.cc-new{border-color:var(--mint)}
.cc-h{font-size:18px;font-weight:800;margin-bottom:14px}.cc-h.hot{color:var(--mint)}
.cc-old ul,.cc-new ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.cc-old li,.cc-new li{font-size:15px;color:var(--ink-soft);padding-left:4px}
.cc-vs{align-self:center;font-family:var(--mono);font-weight:800;color:var(--indigo);font-size:18px}

/* flow-3 */
.flow-3{display:flex;align-items:center;gap:14px}
.f3{width:190px;padding:22px 18px;border-radius:18px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.f3-ico{font-size:42px}.f3-t{font-size:18px;font-weight:800;margin-top:8px}.f3-s{font-size:13px;color:var(--ink-soft);margin-top:5px}
.f3-ar{font-size:26px;color:var(--indigo);animation:nudge 1.6s infinite}

/* two-col can/cant */
.two-col{display:flex;gap:20px;align-items:stretch}
.tc-can,.tc-cant{flex:1;max-width:380px;padding:22px 26px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.tc-can{border-color:var(--mint)}.tc-cant{border-color:var(--coral)}
.tc-head{font-size:18px;font-weight:800;margin-bottom:14px;color:var(--mint)}.tc-head.bad{color:var(--coral)}
.tc-can ul,.tc-cant ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.tc-can li,.tc-cant li{font-size:15px;color:var(--ink-soft);line-height:1.4}.tc-can b,.tc-cant b{color:var(--ink)}
/* two-col entry: 카드 슬라이드 + 리스트 항목 순차 등장 */
.tc-can{animation:slideFromL .55s .1s both}.tc-cant{animation:slideFromR .55s .25s both}
.tc-can li,.tc-cant li{animation:fadeUp .4s both}
.tc-can li:nth-child(1),.tc-cant li:nth-child(1){animation-delay:.4s}
.tc-can li:nth-child(2),.tc-cant li:nth-child(2){animation-delay:.55s}
.tc-can li:nth-child(3),.tc-cant li:nth-child(3){animation-delay:.7s}
.tc-can li:nth-child(4),.tc-cant li:nth-child(4){animation-delay:.85s}

/* logos row */
.logos-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.logos-row span{font-size:18px;font-weight:800;padding:12px 24px;border-radius:13px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-sm);color:var(--ink-soft);animation:pop .5s both}
.logos-row span:nth-child(1){animation-delay:.1s}.logos-row span:nth-child(2){animation-delay:.25s}
.logos-row span:nth-child(3){animation-delay:.4s}.logos-row span:nth-child(4){animation-delay:.55s}
.mid-statement{animation:fadeUp .6s .7s both}

/* setup steps */
.setup-steps{display:flex;flex-direction:column;gap:12px;width:min(680px,90%)}
.ss{display:flex;align-items:center;gap:18px;padding:16px 22px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.ss-n{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-weight:800;color:#fff;background:var(--indigo);flex:0 0 auto}
.ss-b b{font-size:17px}.ss-b span{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.ss-b code,.hint code{font-family:var(--mono);background:rgba(61,78,255,.1);color:var(--indigo);padding:2px 7px;border-radius:6px;font-size:13px}
.hint{font-size:14px;color:var(--ink-soft)}

/* prompt box */
.prompt-box{width:min(820px,92%);border-radius:14px;overflow:hidden;border:1.5px solid var(--indigo);box-shadow:var(--sh-sm)}
.prompt-box.big{width:min(900px,94%)}
.pb-head{display:flex;align-items:center;gap:9px;background:rgba(61,78,255,.1);padding:11px 18px;font-size:13px;font-weight:800;color:var(--indigo);font-family:var(--mono)}
.pb-head.bad{background:rgba(255,92,73,.1);color:var(--coral)}
.pb-dot{width:9px;height:9px;border-radius:50%;background:var(--indigo)}.pb-head.bad .pb-dot{background:var(--coral)}
.prompt-box code{display:block;white-space:pre-wrap;font-family:var(--mono);font-size:15px;line-height:1.6;color:var(--ink);background:#fff;padding:18px 20px}
.expect{font-size:15px;font-weight:700;color:var(--mint)}.expect b{color:var(--ink)}
.assume{font-family:var(--mono);font-size:14px;color:var(--ink-soft)}.assume code{background:rgba(61,78,255,.1);color:var(--indigo);padding:2px 7px;border-radius:6px}

/* data table */
.data-table{border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh-sm);font-size:15px}
.data-table th,.data-table td{padding:12px 22px;text-align:left;border-bottom:1px solid var(--line)}
.data-table th{background:var(--paper2);font-weight:800;font-size:13px;color:var(--ink-soft)}
.data-table td code{font-family:var(--mono);color:var(--indigo);font-weight:700}
.data-table .warn-row{background:rgba(255,92,73,.07)}.data-table .warn-row code{color:var(--coral)}
.trap-note{font-size:16px;font-weight:700;padding:12px 24px;border-radius:13px;background:rgba(255,92,73,.08);border:1.5px solid var(--coral);color:var(--ink)}
.trap-note code{font-family:var(--mono);color:var(--coral)}.trap-note b{color:var(--coral)}

/* debrief */
.debrief-list{display:flex;flex-direction:column;gap:11px;width:min(820px,92%)}
.dl{font-size:16px;font-weight:600;padding:14px 22px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.dl b{color:var(--indigo)}.dl.hot{border-color:var(--coral)}.dl.hot b{color:var(--coral)}

/* step-tag / pb-head success variant (good = mint) */
.step-tag.good{background:var(--mint)}
.pb-head.good{background:rgba(0,179,131,.12);color:var(--mint)}.pb-head.good .pb-dot{background:var(--mint)}

/* rank-flip (hands-on A 발견 — 순위 역전) */
.rankflip{display:flex;align-items:center;gap:22px;justify-content:center}
.rankflip.single .rf-col{min-width:340px}
.rf-col{display:flex;flex-direction:column;gap:8px;min-width:248px}
.rf-head{font-size:13px;font-weight:800;font-family:var(--mono);padding:8px 14px;border-radius:10px;text-align:center}
.rf-head.bad{background:rgba(255,92,73,.1);color:var(--coral)}
.rf-head.good{background:rgba(0,179,131,.12);color:var(--mint)}
.rf-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:11px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.rf-row.top{border-width:2px}
.rf-col:first-child .rf-row.top{border-color:var(--coral)}
.rf-col:last-child .rf-row.top{border-color:var(--mint)}
.rf-rank{font-family:var(--mono);font-weight:800;font-size:14px;color:var(--ink-soft);width:20px}
.rf-name{font-weight:800;font-size:16px;flex:1}
.rf-val{font-family:var(--mono);font-weight:800;font-size:15px;color:var(--ink)}
.rf-delta{font-size:12px;font-weight:800;font-family:var(--mono)}
.rf-row.up .rf-delta{color:var(--mint)}.rf-row.down .rf-delta{color:var(--coral)}
.rf-row.up{background:rgba(0,179,131,.06)}.rf-row.down{background:rgba(255,92,73,.06)}
.rf-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.rf-ar{font-size:30px;color:var(--indigo);font-weight:800}
.rf-cap{font-size:12px;font-family:var(--mono);color:var(--ink-soft)}

/* ask-compare (어떻게 물었어야?) */
.ask-compare{display:flex;gap:20px;justify-content:center;width:min(900px,94%)}
.ac-col{flex:1;padding:18px 20px;border-radius:16px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:10px}
.ac-col.bad{border-color:var(--coral)}.ac-col.good{border-color:var(--mint)}
.ac-tag{font-size:14px;font-weight:800}.ac-col.bad .ac-tag{color:var(--coral)}.ac-col.good .ac-tag{color:var(--mint)}
.ac-col code{display:block;font-family:var(--mono);font-size:14px;line-height:1.55;color:var(--ink);background:var(--paper2);padding:12px 14px;border-radius:10px}
.ac-note{font-size:13px;color:var(--ink-soft);line-height:1.5}

/* perf-row (hands-on B 발견 — 느림 체감) */
.perf-row{display:flex;align-items:center;gap:18px;justify-content:center}
.perf-plus{font-size:28px;font-weight:800;color:var(--ink-soft)}
.perf-card{padding:22px 30px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);text-align:center;min-width:220px}
.perf-card.slow{border-color:var(--coral)}
.perf-card.good{border-color:var(--mint)}
.perf-card.good .pf-clock{color:var(--mint)}
.pf-ico{font-size:34px}
.pf-t{font-size:14px;font-weight:800;color:var(--ink-soft);margin-top:6px}
.pf-clock{font-family:var(--mono);font-size:42px;font-weight:900;color:var(--coral);line-height:1.1;margin:4px 0}
.pf-clock span{font-size:16px;margin-left:3px}
.pf-d{font-size:13px;color:var(--ink-soft)}

/* before/after (hands-on B 개선 전후) */
.ba-row{display:flex;align-items:center;gap:20px;justify-content:center}
.ba-row.single .ba-card{min-width:360px}
.ba-ar{font-size:32px;font-weight:800;color:var(--indigo)}
.ba-card{padding:22px 28px;border-radius:18px;background:var(--card);border:2px solid var(--line);box-shadow:var(--sh-sm);text-align:center;min-width:260px}
.ba-card.bad{border-color:var(--coral)}.ba-card.good{border-color:var(--mint)}
.ba-tag{font-size:13px;font-weight:800;font-family:var(--mono)}.ba-card.bad .ba-tag{color:var(--coral)}.ba-card.good .ba-tag{color:var(--mint)}
.ba-clock{font-family:var(--mono);font-size:46px;font-weight:900;line-height:1.1;margin:6px 0}
.ba-card.bad .ba-clock{color:var(--coral)}.ba-card.good .ba-clock{color:var(--mint)}
.ba-clock span{font-size:16px;margin-left:3px}
.ba-sub{font-size:13px;color:var(--ink-soft);margin-bottom:10px}
.ba-bar{height:10px;border-radius:6px;background:var(--paper2);overflow:hidden}
.ba-bar i{display:block;height:100%;width:var(--w);border-radius:6px;transform-origin:left;animation:growX .8s both}
.ba-card.bad .ba-bar i{background:var(--coral)}.ba-card.good .ba-bar i{background:var(--mint)}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* arch-flow (지식 있고없고) */
.arch-flow{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:6px}
.af{padding:14px 20px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);box-shadow:var(--sh-sm);text-align:center;max-width:300px}
.af b{display:block;font-family:var(--mono);font-size:14px;margin-bottom:4px}
.af span{font-size:13px;color:var(--ink-soft);line-height:1.4}
.af.bad{border-color:var(--coral)}.af.bad b{color:var(--coral)}
.af.good{border-color:var(--mint)}.af.good b{color:var(--mint)}
.af-ar{font-size:18px;font-weight:800;color:var(--ink-soft);font-family:var(--mono)}

/* ===== HANDS-ON C: API maze ===== */
.copy-btn{margin-left:auto;background:var(--indigo);color:#fff;border:none;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--mono)}
.copy-btn:hover{background:var(--violet)}
.maze-prompt code{font-size:12.5px;line-height:1.55;max-height:none}
.maze-prompt-slide .sbody{justify-content:flex-start;padding-top:6px}
.maze-intro{display:flex;flex-direction:column;gap:14px;width:min(860px,94%)}
.mi-line{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);font-size:16px;line-height:1.5;text-align:left}
.mi-ico{font-size:28px;flex:0 0 auto}
.mi-line b{color:var(--indigo)}

.gate-cards{display:flex;gap:18px;justify-content:center;width:min(940px,96%)}
.gate-card{flex:1;padding:20px 18px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.gate-card:nth-child(1){border-top:4px solid var(--indigo)}
.gate-card:nth-child(2){border-top:4px solid var(--violet)}
.gate-card:nth-child(3){border-top:4px solid var(--mint)}
.gc-n{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink-soft)}
.gc-ico{font-size:40px}
.gc-t{font-size:20px;font-weight:900;color:var(--ink)}
.gc-d{font-size:14px;color:var(--ink-soft);line-height:1.5}.gc-d b{color:var(--ink)}

/* live leaderboard */
.lb-live{font-family:var(--mono);font-size:13px;font-weight:800;color:#fff;background:var(--coral);padding:2px 10px;border-radius:20px;vertical-align:middle;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.maze-board{display:flex;flex-direction:column;gap:8px;width:min(980px,96%);max-height:62vh;overflow-y:auto;padding-right:6px}
.maze-board::-webkit-scrollbar{width:8px}.maze-board::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.mb-count{font-size:13px;font-weight:700;color:var(--ink-soft);font-family:var(--mono);text-align:right;padding-right:4px}
.mb-empty{padding:40px;text-align:center;color:var(--ink-soft);font-size:16px;border:2px dashed var(--line);border-radius:16px}
.mb-row{display:grid;grid-template-columns:48px 1.3fr auto 1.1fr 1.4fr;align-items:center;gap:14px;padding:12px 18px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);animation:rowIn .3s both}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.mb-row.lead{border-color:var(--indigo);background:linear-gradient(90deg,rgba(61,78,255,.07),transparent)}
.mb-row.done{border-color:var(--mint);background:linear-gradient(90deg,rgba(0,179,131,.08),transparent)}
.mb-row.expired{border-color:var(--coral);background:linear-gradient(90deg,rgba(255,92,73,.08),transparent);opacity:.85}
.mb-dot.fail{background:var(--coral);color:#fff;border-color:var(--coral)}
.mb-rank{font-size:22px;font-weight:900;text-align:center;font-family:var(--mono)}
.mb-name{font-size:17px;font-weight:800}
.mb-dots{display:flex;gap:6px}
.mb-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:800;background:var(--paper2);color:var(--ink-soft);border:1.5px solid var(--line)}
.mb-dot.done{background:var(--mint);color:#fff;border-color:var(--mint)}
.mb-dot.cur{border-color:var(--indigo);color:var(--indigo);animation:pulse 1.4s infinite}
.mb-stage{font-size:13px;font-weight:700;color:var(--ink-soft)}
.mb-detail{font-family:var(--mono);font-size:13px;color:var(--indigo);text-align:right}
.mb-row.expired .mb-detail{color:var(--coral)}

/* QA list */
.qa-list{display:flex;flex-direction:column;gap:13px;width:min(900px,94%)}
.qa{padding:16px 22px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.qa-q{font-size:16px;font-weight:800;color:var(--coral);margin-bottom:7px}
.qa-q::before{content:"Q. "}
.qa-a{font-size:15px;color:var(--ink-soft);line-height:1.5}.qa-a::before{content:"A. ";font-weight:800;color:var(--mint)}

/* 강사 소개 */
.bio{display:flex;gap:26px;align-items:stretch;width:min(980px,95%)}
.bio-left{flex:0 0 300px;padding:24px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(61,78,255,.1),rgba(139,92,246,.08));border:1.5px solid var(--indigo);box-shadow:var(--sh-sm);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.bio-avatar{font-size:54px}
.bio-name{font-size:22px;font-weight:900;margin-top:4px}.bio-name span{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);font-family:var(--mono)}
.bio-role{font-size:13px;font-weight:800;color:var(--indigo);font-family:var(--mono)}
.bio-exp-v{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
.bev{font-size:14px;font-weight:600;color:var(--ink-soft);padding:10px 14px;border-radius:11px;background:var(--card);border:1.5px solid var(--line);text-align:left}
.bev b{color:var(--indigo);font-family:var(--mono);margin-right:6px}
.bev.hot{border-color:var(--mint)}.bev.hot b{color:var(--mint)}
.bio-links{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px}
.bl{font-size:13px;text-align:left;line-height:1.4;display:flex;flex-direction:column;gap:1px}
.bl .bl-top{white-space:nowrap}.bl .bl-top b{margin-left:5px}
.bl .bl-url{font-family:var(--mono);font-size:11.5px;color:var(--indigo);white-space:nowrap}
.bl .bl-url i{color:var(--coral);font-style:normal}
.bio-right{flex:1;display:flex;flex-direction:column;gap:12px}
.demo-label{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--mint)}
.video-wrap{flex:1;position:relative;border-radius:16px;overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--sh-sm);min-height:300px;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}

/* 개념 정리 ① — 모델 vs 툴 */
.mt-row{display:flex;flex-direction:column;align-items:center;gap:12px}
.mt-card{width:min(620px,90%);padding:20px 26px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);display:flex;align-items:center;gap:20px}
.mt-card.model{border-color:var(--indigo)}
.mt-card.tool{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.16)}
.mt-tag{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:1px;color:var(--indigo);white-space:nowrap}
.mt-tag.hot{color:var(--mint)}
.mt-ico{font-size:40px}
.mt-name{font-weight:800;font-size:17px;font-family:var(--mono)}
.mt-desc{font-size:14px;color:var(--ink-soft);line-height:1.5;margin-left:auto;text-align:right}
.mt-plus{font-size:14px;font-weight:700;color:var(--ink-soft)}
.mt-eq-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.mt-chip{font-family:var(--mono);font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px;background:rgba(61,78,255,.1);color:var(--indigo)}
.mt-chip.hot{background:rgba(0,179,131,.12);color:var(--mint)}
.mt-x{font-weight:800;color:var(--ink-soft)}
.mt-note{font-size:13px;color:var(--ink-soft);font-family:var(--mono);margin-left:6px}

/* 개념 정리 ② — 확률분포 */
.dist-row{display:flex;justify-content:center}
.dist-card{padding:20px 28px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);text-align:center}
.dist-h{font-size:16px;font-weight:700;margin-bottom:14px}.dist-h code{font-family:var(--mono);background:rgba(61,78,255,.1);color:var(--indigo);padding:2px 8px;border-radius:6px}
/* divergence fan — one input, three EQUAL but different-direction outcomes */
.fan{display:flex;align-items:center;gap:18px;justify-content:center;padding:6px 0}
.fan-src{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--indigo);background:rgba(61,78,255,.1);
  border:1.5px solid var(--indigo);padding:14px 16px;border-radius:13px;line-height:1.3}
.fan-arms{display:flex;flex-direction:column;gap:12px}
.arm{display:flex;align-items:center;gap:10px;opacity:0;animation:armIn .5s forwards}
.arm.a{animation-delay:.1s}.arm.b{animation-delay:.28s}.arm.c{animation-delay:.46s}
.arm-line{flex:0 0 46px;height:3px;border-radius:2px;transform-origin:left;display:block}
.arm.a .arm-line{background:var(--indigo);transform:rotate(-12deg)}
.arm.b .arm-line{background:var(--violet)}
.arm.c .arm-line{background:#06b6d4;transform:rotate(12deg)}
.arm-end{font-size:13.5px;font-weight:700;color:var(--ink);text-align:left;padding:9px 14px;border-radius:11px;
  background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--sh-sm);min-width:172px}
.arm.a .arm-end{border-left:4px solid var(--indigo)}
.arm.b .arm-end{border-left:4px solid var(--violet)}
.arm.c .arm-end{border-left:4px solid #06b6d4}
.arm-end b{color:var(--indigo)}.arm.b .arm-end b{color:var(--violet)}.arm.c .arm-end b{color:#0891b2}
.arm-end i{display:block;font-style:normal;font-weight:600;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
@keyframes armIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
.dist-cap{font-size:14px;color:var(--ink-soft);margin-top:14px;line-height:1.5;max-width:560px}.dist-cap b{color:var(--ink)}
.sync-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.sf{font-size:14px;font-weight:700;padding:12px 18px;border-radius:13px;background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.sf.hot{border-color:var(--mint);color:var(--mint)}
.sf-ar{font-size:20px;color:var(--indigo)}

/* 두 번째 이유 ②-A · model+tool set */
.set-eq{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.set-card{padding:18px 22px;border-radius:16px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);min-width:150px}
.set-card.win{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.18)}
.set-ico{font-size:34px}.set-t{font-size:14px;font-weight:800;margin-top:8px;line-height:1.4}
.set-link{font-size:24px;font-weight:900;color:var(--indigo)}
.set-evidence{display:flex;flex-direction:column;gap:9px;width:min(880px,94%)}
.se-row{font-size:15px;font-weight:600;padding:12px 20px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);color:var(--ink-soft)}
.se-row b{color:var(--ink)}
.se-row.good{border-color:var(--mint)}.se-row.good b{color:var(--mint)}
.se-row.bad{border-color:var(--coral)}.se-row.bad b{color:var(--coral)}

/* 두 번째 이유 ②-B · data moat */
.market-split{display:flex;align-items:stretch;gap:18px}
.mkt-card{flex:1;max-width:320px;padding:22px 26px;border-radius:18px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.mkt-card.hot{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.16)}
.mkt-h{font-size:19px;font-weight:800;word-break:keep-all}.mkt-s{font-size:13px;color:var(--ink-soft);margin-top:8px;font-family:var(--mono);line-height:1.5}
.mkt-logos{display:flex;gap:12px;justify-content:center;margin-top:12px}
.mkt-logos img{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:7px;padding:3px;box-shadow:0 1px 3px rgba(20,24,31,.12)}
.mkt-vs{align-self:center;font-family:var(--mono);font-weight:800;color:var(--coral);font-size:14px;text-align:center}
.data-why{display:flex;flex-direction:column;gap:10px;width:min(880px,94%)}
.dw{font-size:16px;font-weight:600;padding:13px 22px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.dw b{color:var(--indigo)}.dw.hot{border-color:var(--mint)}.dw.hot b{color:var(--mint)}

/* car analogy */
.car-q{display:flex;align-items:center;gap:24px}
.car-opt{width:240px;padding:24px 20px;border-radius:18px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.car-opt.diy{opacity:.85}
.car-opt.brand{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.16)}
.car-ico{font-size:46px}.car-t{font-size:18px;font-weight:800;margin-top:10px;line-height:1.4}
.car-vs{font-family:var(--mono);font-weight:800;color:var(--indigo);font-size:20px}
.car-cases{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.car-cases span{font-size:15px;font-weight:700;padding:10px 18px;border-radius:999px;background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}

/* ===== buy-vs-build 애니메이션 (자동차/PC/요리 공용) ===== */
.bvb{display:flex;align-items:stretch;justify-content:center;gap:28px;width:min(880px,94%);margin:2px auto}
.bvb-side{flex:1;max-width:360px;border-radius:20px;background:var(--card);border:1.5px solid var(--line);
  box-shadow:var(--sh-sm);padding:18px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bvb-side.build{border-color:var(--coral)}
.bvb-side.buy{border-color:var(--mint);box-shadow:0 10px 26px rgba(0,179,131,.16)}
.bvb-h{font-size:15px;font-weight:800;color:var(--ink)}
.bvb-side.build .bvb-h{color:var(--coral)}.bvb-side.buy .bvb-h{color:var(--mint)}
.bvb-sub{font-size:12.5px;color:var(--ink-soft);font-weight:600;text-align:center;line-height:1.4}
.bvb-stage{position:relative;width:100%;height:120px;overflow:hidden;border-radius:12px;background:var(--paper2)}
.bvb-vs{align-self:center;font-family:var(--mono);font-weight:800;color:var(--indigo);font-size:20px;display:flex;align-items:center}

/* BUILD: 부품들이 중앙으로 날아와 조립 */
.bvb-part{position:absolute;font-size:26px;left:50%;top:50%;opacity:0}
.bvb-part.p1{--fx:-90px;--fy:-34px;animation:partIn 2.6s .2s infinite}
.bvb-part.p2{--fx:88px;--fy:-30px;animation:partIn 2.6s .5s infinite}
.bvb-part.p3{--fx:-10px;--fy:42px;animation:partIn 2.6s .8s infinite}
.bvb-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:40px;opacity:0;
  animation:buildDone 2.6s 1.2s infinite}
@keyframes partIn{0%{opacity:0;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(.6)}
  12%{opacity:1}
  45%{opacity:1;transform:translate(-50%,-50%) scale(.95)}
  58%,100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}}
@keyframes buildDone{0%,40%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  70%{transform:translate(-50%,-50%) scale(1)}90%{opacity:1}100%{opacity:0}}
.bvb-toil{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:11px;color:var(--coral);font-weight:700;
  opacity:0;animation:toilBlink 2.6s .3s infinite}
@keyframes toilBlink{0%,40%{opacity:0}50%,80%{opacity:.9}100%{opacity:0}}

/* BUY: 벤더 → (제품이 미끄러져) → 구매자 */
.bvb-vendor,.bvb-buyer{position:absolute;top:50%;transform:translateY(-50%);font-size:34px}
.bvb-vendor{left:12px}.bvb-buyer{right:12px}
.bvb-product{position:absolute;top:50%;left:56px;transform:translateY(-50%);font-size:30px;opacity:0;
  animation:deliver 2.4s .4s infinite}
@keyframes deliver{0%{opacity:0;left:56px}12%{opacity:1}
  70%{opacity:1;left:calc(100% - 92px)}85%,100%{opacity:0;left:calc(100% - 92px)}}
.bvb-check{position:absolute;right:14px;top:8px;font-size:18px;opacity:0;animation:buyCheck 2.4s 1.9s infinite}
@keyframes buyCheck{0%,70%{opacity:0;transform:scale(0)}82%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}

/* tech debt */
.debt-lead{font-size:18px;font-weight:700;text-align:center;max-width:880px;line-height:1.5}.debt-lead b{color:var(--coral)}
.debt-grid{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;max-width:1000px}
.debt-card{width:178px;padding:20px 16px;border-radius:16px;text-align:center;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-sm);animation:pop .5s var(--d,0s) both}
.debt-ico{font-size:36px}.debt-t{font-size:14px;font-weight:700;margin-top:8px;line-height:1.4;color:var(--ink-soft)}

/* discover CTA — nudges audience to look at their own dashboard (no spoiler) */
.discover-cta{display:flex;align-items:center;gap:18px;padding:18px 26px;border-radius:16px;
  background:rgba(255,216,77,.16);border:1.5px solid var(--amber);box-shadow:var(--sh-sm);max-width:760px}
.dc-eye{font-size:40px;animation:bob 2.5s ease-in-out infinite}
.dc-txt{font-size:16px;line-height:1.5;color:var(--ink)}.dc-txt b{font-size:17px}

/* ============================================================ a11y + responsive */
.btn:focus-visible,#qinput:focus-visible,#nickinput:focus-visible,.avatar-row span:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:760px){
  .slide{padding:26px 20px}
  .grad-title{font-size:46px}
  .stages{flex-direction:column}.flow-arrow{transform:rotate(90deg)}
  .broadcast{flex-direction:column;gap:18px}
  .verdict{flex-direction:column}
  #tally{top:auto;bottom:74px}
}