/* ==========================================================================
   Solar Open 2 완전정복 — 공통 디자인 시스템
   ========================================================================== */

:root{
  --bg: #0b0f17;
  --bg-soft: #0f141f;
  --card: #131a26;
  --card-hover: #171f2d;
  --border: #232d3d;
  --text: #f5f8fc;
  --sub: #c3cee0;
  --muted: #8b99ad;
  --accent: #8a6dfa; /* Upstage brand purple, sampled from the official Solar Open 2 release asset */
  --accent-soft: rgba(138,109,250,.16);
  --radius: 16px;
  --maxw: 980px;
  font-size: 17px;
}

*,*::before,*::after{ box-sizing:border-box; }
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}

::selection{ background:var(--accent); color:#0b0f17; }

a{ color:inherit; text-decoration:none; }

/* ---------------- Top nav ---------------- */
.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px clamp(18px,4vw,40px);
  background:rgba(11,15,23,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topnav .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; font-size:.95rem; color:var(--sub); }
.topnav .brand b{ color:var(--text); }
.topnav .lec-tag{
  flex:0 0 auto;
  font-size:.78rem; font-weight:800; color:var(--accent);
  background:var(--accent-soft); padding:4px 10px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.topnav .lec-title{
  flex:1 1 auto; min-width:0; text-align:center;
  font-size:.86rem; font-weight:700; color:var(--sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 12px;
}
.topnav .lec-title b{ color:var(--text); font-weight:800; }
.topnav .dots{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.topnav .dots span{
  width:8px; height:8px; border-radius:50%; background:var(--border);
  transition:background .25s, transform .25s;
  cursor:pointer;
}
.topnav .dots span:hover{ background:color-mix(in srgb, var(--accent) 50%, var(--border)); }
.topnav .dots span.active{ background:var(--accent); transform:scale(1.35); }
.topnav .nav-links{ flex:0 0 auto; display:flex; gap:18px; font-size:.85rem; color:var(--sub); font-weight:700; white-space:nowrap; }
.topnav .nav-links a:hover{ color:var(--text); }
@media (max-width:920px){
  .topnav .lec-title{ display:none; }
}
.topnav .dots span{ cursor:pointer; }
.topnav{ position:fixed; top:3px; left:0; right:0; }

/* progress bar (slide N of total) */
.progress-rail{ position:fixed; top:0; left:0; right:0; z-index:70; height:3px; background:var(--border); }
.progress-rail > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, white));
  transition:width .35s ease;
}

/* ---------------- Layout: carousel deck ---------------- */
html{ scroll-behavior:smooth; }
.section{
  position:fixed; inset:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:104px 0 132px;
  overflow-y:auto;
  overflow-anchor:none; /* stop the browser from silently re-scrolling a few px when
                           reveal/transform animations shift content height mid-transition */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(3vw);
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
  background:var(--bg);
}
/* margin:auto (not justify-content:center) so overflowing slides stay scrollable from their true top */
.section > .wrap{ margin-top:auto; margin-bottom:auto; flex-shrink:0; }
.hero.section > .wrap{ margin-top:0; margin-bottom:0; }
/* bottom vignette: only shown (by JS toggling .has-more) while a slide
   actually has more content below the fold that hasn't been scrolled to yet */
.section::after{
  content:""; position:fixed; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(to bottom, transparent, var(--bg) 92%);
  pointer-events:none; z-index:3; opacity:0; transition:opacity .3s;
}
.section.active.has-more::after{ opacity:1; }
.hero.section::after{ display:none; }
.section.active{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); z-index:5;
  transition:opacity .5s ease, transform .5s ease;
}
.section.prev{ transform:translateX(-3vw); }
.section.next{ transform:translateX(3vw); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,28px); width:100%; }

/* deck nav arrows */
.deck-nav{ position:fixed; z-index:80; inset:0; pointer-events:none; }
.deck-nav button{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; pointer-events:auto; cursor:pointer;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, opacity .2s;
}
.deck-nav button:hover{ background:var(--card-hover); border-color:var(--accent); }
.deck-nav button.disabled{ opacity:.25; pointer-events:none; }
.deck-nav .prev-btn{ left:14px; }
.deck-nav .next-btn{ right:14px; }
.slide-counter{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:80;
  font-size:.78rem; font-weight:800; color:var(--muted); letter-spacing:.05em;
  background:var(--card); border:1px solid var(--border); padding:5px 12px; border-radius:999px;
}
@media (max-width:760px){
  .deck-nav button{ width:38px; height:38px; }
  .deck-nav .prev-btn{ left:6px; } .deck-nav .next-btn{ right:6px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:800; letter-spacing:.08em; color:var(--accent);
  text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:3px; background:var(--accent); display:inline-block; }

h1.headline, h2.headline{
  position:relative;
  font-size:clamp(1.55rem, 2.9vw, 2.3rem);
  font-weight:800; letter-spacing:-.015em; line-height:1.25; margin:0 0 18px;
  color:var(--text);
}
/* animated accent underline that draws in when the slide plays (re-fires per slide) */
h2.headline::after{
  content:""; display:block; width:46px; height:3px; margin-top:13px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  transform:scaleX(0); transform-origin:left;
}
.reveal.in-view h2.headline::after{ animation:hlDraw .85s .12s both cubic-bezier(.16,1,.3,1); }
@keyframes hlDraw{ from{ transform:scaleX(0); opacity:.4; } to{ transform:scaleX(1); opacity:1; } }

/* smoother, more refined entrance easing (expo-out) + micro-scale for depth */
.reveal{ opacity:0; transform:translateY(24px) scale(.985); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in-view{ opacity:1; transform:translateY(0) scale(1); }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.22s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.32s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.42s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.52s; }

/* ---------------- Bullets ----------------
   NOTE: li is intentionally NOT display:flex. Flexbox turns every inline
   child (each <b>...</b> and each surrounding text run) into its own
   separate flex item, which breaks normal text wrapping whenever a bullet
   contains inline markup. Plain block flow + an absolutely-positioned
   ::before dot keeps the text flowing as one paragraph. */
ul.bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
ul.bullets li{
  position:relative; padding-left:21px;
  font-size:1rem; line-height:1.55; color:var(--text);
}
ul.bullets li::before{
  content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%;
  background:var(--accent);
}
ul.bullets b{ color:var(--accent); font-weight:800; }

/* ---------------- Analogy callout ---------------- */
.analogy{
  margin-top:16px; padding:13px 18px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--border); border-left:3px solid var(--accent);
  display:flex; gap:12px; align-items:flex-start;
}
.analogy .icon{ font-size:1.2rem; line-height:1.4; }
.analogy .label{ font-weight:800; color:var(--accent); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.analogy p{ margin:0; color:var(--sub); }

/* ---------------- Stat cards ---------------- */
.stat-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); margin:16px 0; }
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px 14px; border-top:3px solid var(--accent);
  transition:transform .25s ease, background .25s ease;
}
.stat-card:hover{ transform:translateY(-5px); background:var(--card-hover); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 22%, transparent); }
.stat-card .value{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.stat-card .label{ margin-top:6px; font-size:.92rem; line-height:1.5; color:var(--sub); }

/* ---------------- Cards / compare ---------------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }

table.compare{ width:100%; border-collapse:collapse; margin:14px 0; border-radius:var(--radius); overflow:hidden; }
table.compare th, table.compare td{ padding:10px 14px; text-align:center; font-size:.92rem; line-height:1.45; }
table.compare th{ background:var(--bg-soft); color:var(--accent); font-weight:800; }
table.compare td:first-child, table.compare th:first-child{ text-align:left; color:var(--text); font-weight:700; }
table.compare tbody tr:nth-child(odd){ background:var(--card); }
table.compare tbody tr:nth-child(even){ background:var(--bg-soft); }
table.compare td{ color:var(--sub); }
.note{ margin-top:14px; color:var(--sub); font-size:.92rem; }
.note b{ color:var(--text); }

/* ---------------- Flow / timeline ---------------- */
.timeline{ position:relative; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:18px; }
.timeline::before{
  content:""; position:absolute; top:26px; left:0; right:0; height:2px;
  background:var(--border);
}
.timeline .rail{ position:absolute; top:26px; left:0; height:2px; background:var(--accent); width:0%; transition:width 1.1s ease; }
.tl-step{ position:relative; z-index:2; }
.tl-step .dot{
  width:52px; height:52px; border-radius:50%; background:var(--card); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--muted);
  margin-bottom:14px; transition:.35s;
}
.tl-step.on .dot{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.tl-step .tag{ font-size:.78rem; color:var(--accent); font-weight:800; text-transform:uppercase; }
.tl-step h4{ margin:6px 0 6px; font-size:1.05rem; }
.tl-step p{ margin:0; color:var(--sub); font-size:.9rem; }

/* ---------------- Bar chart ---------------- */
.barchart{ margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.bar-row{ display:grid; grid-template-columns:150px 1fr 64px; align-items:center; gap:12px; }
.bar-row .name{ font-size:.88rem; color:var(--sub); text-align:right; }
.bar-row .name.me{ color:var(--text); font-weight:800; }
.bar-track{ height:14px; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; width:0%; border-radius:999px; background:var(--muted); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.bar-fill.me{ background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); }
.bar-row .val{ font-size:.85rem; color:var(--sub); font-variant-numeric:tabular-nums; }
.bar-row .val.me{ color:var(--text); font-weight:800; }

/* ---------------- Checklist (summary) ---------------- */
ul.checklist{ list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:9px; }
ul.checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; }
ul.checklist .tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent);
  color:#0b0f17; font-size:.75rem; font-weight:900; display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.nextup{
  margin-top:24px; padding:18px 22px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--border);
  border-left:3px solid var(--accent);
}
.nextup .label{ font-size:.78rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.nextup p{ margin:8px 0 0; color:var(--sub); }

/* ---------------- Hero ---------------- */
.hero{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero .num-wm{
  position:absolute; right:clamp(-40px,-2vw,0); top:50%; transform:translateY(-50%);
  font-size:min(40vw,420px); font-weight:900; color:rgba(255,255,255,.03); line-height:1; user-select:none;
  pointer-events:none;
}
.hero .course{ font-size:.95rem; font-weight:800; color:var(--sub); margin-bottom:10px; }
.hero .brand-gif{
  width:300px; max-width:56vw; border-radius:16px; margin-bottom:22px; display:block;
  box-shadow:0 14px 48px rgba(138,109,250,.38), 0 2px 10px rgba(0,0,0,.4);
}
.hero .lec-num{ font-size:.9rem; font-weight:800; color:var(--accent); margin-bottom:18px; }
.hero h1{ font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800; letter-spacing:-.02em; margin:0 0 18px; max-width:820px; }
.hero .subtitle{ font-size:1.15rem; color:var(--sub); max-width:640px; margin:0 0 28px; }
.hero .accentline{ width:64px; height:4px; background:var(--accent); border-radius:2px; margin-bottom:20px; }
.hero .meta{ color:var(--muted); font-size:.9rem; }
.scrolldown{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:.78rem;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* ---------------- MoE diagram ---------------- */
.moe{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:16px 0; }
.moe .router{
  flex:0 0 auto; width:120px; height:120px; border-radius:20px; background:var(--accent-soft);
  border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--accent); text-align:center; font-size:.9rem; padding:10px;
}
.moe .experts{ flex:1 1 320px; display:grid; grid-template-columns:repeat(20,1fr); gap:6px; }
.moe .experts i{ display:block; width:100%; padding-top:100%; border-radius:3px; background:var(--border); position:relative; }
.moe .experts i.active{ background:var(--accent); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.moe .caption{ flex:0 0 100%; color:var(--sub); font-size:.88rem; }

/* ---------------- Attention pattern ---------------- */
.attn{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.attn .blk{
  flex:0 0 auto; width:46px; height:46px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; color:var(--sub); background:var(--card); border:1px solid var(--border);
  transition:transform .3s;
}
.attn .blk.s{ background:var(--accent); color:#0b0f17; border-color:var(--accent); }
/* traveling read-order highlight, one block lit at a time left-to-right.
   S(정독) blocks hold their glow much longer than L(속독) blocks — the animation
   TIMING itself is the "slow careful read vs quick skim" concept, not just a caption. */
.attn.flow .blk:not(.blk-skip):not(.s){ animation:blkflowFast 4.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
.attn.flow .blk.s{ animation:blkflowSlow 4.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
@keyframes blkflowFast{
  0%, 10%, 100%{ box-shadow:none; transform:translateY(0) scale(1); }
  4%{ box-shadow:0 0 0 3px var(--accent-soft), 0 4px 12px rgba(0,0,0,.3); transform:translateY(-3px) scale(1.05); }
}
@keyframes blkflowSlow{
  0%, 2%, 24%, 100%{ box-shadow:none; transform:translateY(0) scale(1); }
  6%, 18%{ box-shadow:0 0 0 5px var(--accent-soft), 0 6px 16px rgba(0,0,0,.4); transform:translateY(-4px) scale(1.1); }
}
.attn .legend{ flex:0 0 100%; display:flex; gap:22px; margin-top:6px; font-size:.85rem; color:var(--sub); }
.attn .legend span{ display:inline-flex; align-items:center; gap:8px; }
.attn .legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.attn .legend i.s{ background:var(--accent); }
.attn .legend i.l{ background:var(--card); border:1px solid var(--border); }

/* ---------------- End-of-lecture links (inside last slide) ---------------- */
.lecfoot{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.lecfoot a.navbtn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px;
  border:1px solid var(--border); background:var(--card); font-weight:700; font-size:.92rem;
  transition:background .2s, border-color .2s;
}
.lecfoot a.navbtn:hover{ background:var(--card-hover); border-color:var(--accent); }

/* ---------------- Live-demo cue (screen mapping) ---------------- */
.democue{
  margin-top:20px; padding:14px 18px; border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-left:4px solid var(--accent);
}
.democue .cue-head{
  display:flex; align-items:center; gap:9px; margin-bottom:8px;
  font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
}
.democue .cue-head .scr{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px; background:var(--accent); color:#04201c; font-size:.85rem;
}
.democue .path{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 8px; font-size:.86rem;
}
.democue .path .crumb{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:7px;
  padding:3px 9px; font-weight:700; color:var(--text); white-space:nowrap;
}
.democue .path .sep{ color:var(--muted); font-weight:800; }
.democue p{ margin:2px 0 0; color:var(--sub); font-size:.9rem; }
.democue p b{ color:var(--text); }

/* ---------------- Concept diagrams (sigmoid / eigenvalue / tokens / kv-graph) ---------------- */
.diagram{
  margin:14px 0; padding:16px clamp(14px,3vw,22px); background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius);
}
.diagram .dg-title{ font-size:.82rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.diagram .dg-note{ margin-top:12px; color:var(--sub); font-size:.9rem; }

/* sigmoid curve */
.sigmoid-svg{ width:100%; max-width:420px; height:auto; display:block; margin:0 auto; }
.sigmoid-svg .curve{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; }
.sigmoid-svg .axis{ stroke:var(--border); stroke-width:1.5; }
.sigmoid-svg .mid{ stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; }
.sigmoid-svg text{ fill:var(--sub); font-size:9px; font-family:inherit; }
.sigmoid-svg .dot{ fill:var(--accent); }
.sigmoid-svg .mover{ fill:var(--text); filter:drop-shadow(0 0 4px var(--accent)); }
.sigmoid-svg.playing .mover{ animation:sigmove 3s ease-in-out infinite; }
@keyframes sigmove{
  0%   { cx:20;    cy:119.7; }
  8.3% { cx:36.7;  cy:119.3; }
  16.6%{ cx:53.3;  cy:118.0; }
  25%  { cx:70;    cy:114.8; }
  33.3%{ cx:86.7;  cy:106.9; }
  41.6%{ cx:103.3; cy:90.4;  }
  50%  { cx:120;   cy:65;    }
  58.3%{ cx:136.7; cy:39.6;  }
  66.6%{ cx:153.3; cy:23.1;  }
  75%  { cx:170;   cy:15.2;  }
  83.3%{ cx:186.7; cy:12.0;  }
  91.6%{ cx:203.3; cy:10.7;  }
  100% { cx:220;   cy:10.3;  }
}

/* SVG "draw the line" reveal (used by kv-svg growth curves) */
.draw-path{ stroke-dasharray:500; stroke-dashoffset:500; transition:stroke-dashoffset 1.6s ease; }
.draw-path.drawn{ stroke-dashoffset:0; }

/* eigenvalue range lines */
.eigline{ display:flex; flex-direction:column; gap:16px; }
.eigline .row{ display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; }
.eigline .tag{ font-size:.85rem; font-weight:800; color:var(--sub); }
.eigline .tag.me{ color:var(--accent); }
.eigline .range{ position:relative; height:14px; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; }
.eigline .range::after{
  content:""; position:absolute; left:50%; top:-5px; bottom:-5px; width:1px; background:var(--border);
}
.eigline .fill{ position:absolute; top:0; bottom:0; border-radius:999px; background:var(--muted); }
.eigline .fill.me{ background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); }
.eigline .desc{ margin-top:6px; font-size:.85rem; color:var(--sub); }
/* animated marker: literally shows the value moving inside its allowed range.
   The "old" marker can only drift toward 0 (fade/hold); the "me" marker swings
   across the midline into negative territory and visibly changes color there —
   that color flip *is* the "can erase / flip sign" concept, no caption needed. */
.eig-marker{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--muted);
  box-shadow:0 0 0 4px var(--bg-soft), 0 2px 8px rgba(0,0,0,.4);
}
.eig-marker.old{ animation:eigOld 2.6s ease-in-out infinite; }
@keyframes eigOld{
  0%,100%{ left:52%; opacity:.35; }
  50%{ left:96%; opacity:1; }
}
.eig-marker.me{ animation:eigMe 2.6s ease-in-out infinite; background:var(--accent); }
@keyframes eigMe{
  0%{ left:50%; background:var(--muted); }
  25%{ left:94%; background:var(--accent); }
  50%{ left:50%; background:var(--muted); }
  75%{ left:6%; background:#f5734f; }
  100%{ left:50%; background:var(--muted); }
}

/* token / position-encoding row */
.tokrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tokrow .tok{
  position:relative; min-width:52px; height:40px; border-radius:8px; background:var(--bg-soft);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--text); font-weight:700;
}
.tokrow .tok .badge{
  position:absolute; top:-9px; right:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--accent); color:#0b0f17; font-size:.65rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.tokrow .arrow{ color:var(--accent); font-size:1.1rem; }
.tokrow-label{ font-size:.82rem; color:var(--sub); margin-top:10px; }
/* traveling highlight: visualizes the recurrent-state "flow" carrying order left-to-right */
.tokrow.flow .tok{ animation:tokflow 2.4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .3s); }
@keyframes tokflow{
  0%, 100%{ background:var(--bg-soft); border-color:var(--border); transform:scale(1); }
  15%{ background:var(--accent-soft); border-color:var(--accent); transform:scale(1.06); }
}

/* KV cache growth mini line-graph */
.kv-svg{ width:100%; height:auto; display:block; }
.kv-svg .axis{ stroke:var(--border); stroke-width:1.5; }
.kv-svg .softmax{ fill:none; stroke:#f5a51d; stroke-width:3; }
.kv-svg .linear{ fill:none; stroke:var(--accent); stroke-width:3; }
.kv-svg text{ fill:var(--sub); font-size:9px; }
.kv-legend{ display:flex; gap:20px; margin-top:10px; font-size:.85rem; color:var(--sub); }
.kv-legend span{ display:inline-flex; align-items:center; gap:8px; }
.kv-legend i{ width:14px; height:3px; border-radius:2px; display:inline-block; }

/* simple gantt-style sync/async bars */
.gantt{ display:flex; flex-direction:column; gap:14px; }
.gantt .lane{ display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:center; }
.gantt .lane .tag{ font-size:.82rem; color:var(--sub); font-weight:800; }
.gantt .track{ position:relative; height:22px; background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.gantt .seg{ position:absolute; top:2px; bottom:2px; border-radius:5px; background:var(--muted); }
.gantt .seg.busy{ background:var(--accent); }
.gantt .seg.idle{ background:transparent; border:1px dashed var(--border); }
.gantt .caption{ color:var(--sub); font-size:.88rem; margin-top:2px; }

@media (max-width:680px){
  .topnav .nav-links{ display:none; }
  .section{ padding-top:88px; }
  .eigline .row, .gantt .lane{ grid-template-columns:100px 1fr; }
}

/* ==========================================================================
   Animated architecture pipeline (.archflow) — JEV course
   A horizontal chain of stage-cards linked by connectors down which a
   glowing "data packet" travels left→right, repeating. The motion IS the
   concept: unstructured state flows in, a typed decision flows out.
   Pure CSS, infinite loop — no JS needed.
   ========================================================================== */
.archflow{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:0; margin:18px 0;
}
.archflow .stage{
  position:relative; flex:1 1 150px; min-width:130px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:16px 14px; text-align:center;
  border-top:3px solid var(--border);
  transition:border-color .4s, transform .4s, background .4s;
}
.archflow .stage .ico{ font-size:1.5rem; line-height:1; display:block; margin-bottom:8px; }
.archflow .stage .st-name{ display:block; font-weight:800; font-size:.92rem; color:var(--text); }
.archflow .stage .st-sub{ display:block; margin-top:4px; font-size:.76rem; color:var(--sub); line-height:1.35; }
.archflow .stage.core{ border-top-color:var(--accent); background:linear-gradient(180deg, var(--accent-soft), var(--card)); }
/* the connector between two stages */
.archflow .link{
  position:relative; flex:0 0 40px; align-self:center; height:3px; min-width:26px;
  background:var(--border); border-radius:2px; overflow:visible;
}
.archflow .link::after{ /* the traveling data packet */
  content:""; position:absolute; top:50%; left:0; width:11px; height:11px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--accent); box-shadow:0 0 10px 2px color-mix(in srgb, var(--accent) 70%, transparent);
  animation:archPacket 2.6s cubic-bezier(.55,0,.45,1) infinite;
  animation-delay:calc(var(--i,0) * .5s);
}
@keyframes archPacket{
  0%{ left:0%; opacity:0; transform:translate(-50%,-50%) scale(.5); }
  12%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  88%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ left:100%; opacity:0; transform:translate(-50%,-50%) scale(.5); }
}
/* the stage lights up as the packet "arrives" — staggered to feel like flow */
.archflow .stage{ animation:archPulse 2.6s ease-in-out infinite; animation-delay:calc(var(--i,0) * .5s); }
@keyframes archPulse{
  0%, 40%, 100%{ box-shadow:none; transform:translateY(0); }
  20%{ box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 26%, transparent); transform:translateY(-4px); border-top-color:var(--accent); }
}
.archflow-cap{ margin-top:12px; color:var(--sub); font-size:.88rem; text-align:center; }
.archflow-cap b{ color:var(--accent); }
@media (max-width:860px){
  .archflow{ flex-direction:column; }
  .archflow .link{ width:3px; height:26px; align-self:center; flex-basis:26px; }
  .archflow .link::after{ animation:archPacketV 2.6s cubic-bezier(.55,0,.45,1) infinite; animation-delay:calc(var(--i,0) * .5s); }
  @keyframes archPacketV{
    0%{ top:0%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:100%; opacity:0; }
  }
}

/* ==========================================================================
   Live API-call demo (.apidemo) — shows a real usage example animating:
   state JSON (left) → JEV engine (center, pulsing) → typed response (right).
   The response "types itself in" via a reveal, and a status LED blinks.
   ========================================================================== */
.apidemo{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch;
  margin:16px 0;
}
.apidemo .pane{
  background:#0a0e16; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}
.apidemo .pane .bar{
  display:flex; align-items:center; gap:7px; padding:8px 12px;
  background:var(--bg-soft); border-bottom:1px solid var(--border);
  font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--sub); text-transform:uppercase;
}
.apidemo .pane .bar .led{ width:9px; height:9px; border-radius:50%; background:var(--muted); }
.apidemo .pane.req .bar .led{ background:#f5a51d; }
.apidemo .pane.res .bar .led{ background:var(--accent); animation:ledBlink 1.4s ease-in-out infinite; }
@keyframes ledBlink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; box-shadow:0 0 8px var(--accent); } }
.apidemo pre{ margin:0; padding:14px; font-size:.78rem; line-height:1.55; color:var(--text); overflow:auto;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; }
.apidemo .k{ color:#7dd3fc; } .apidemo .s{ color:#a5d6a7; } .apidemo .n{ color:#f5a51d; } .apidemo .c{ color:var(--muted); }
.apidemo .engine{
  align-self:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 12px; min-width:96px; border-radius:14px;
  background:linear-gradient(180deg, var(--accent-soft), var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.apidemo .engine .badge{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#0b0f17; font-size:.95rem; letter-spacing:-.02em;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent) 55%, black));
  animation:enginePulse 1.8s ease-in-out infinite;
}
@keyframes enginePulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 var(--accent-soft); }
  50%{ transform:scale(1.06); box-shadow:0 0 0 10px transparent; }
}
.apidemo .engine .lbl{ font-size:.7rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.apidemo .engine .ms{ font-size:.72rem; color:var(--sub); font-variant-numeric:tabular-nums; }
/* typed-value chips in the response */
.apidemo .res .chip{
  display:inline-flex; align-items:center; gap:6px; margin:2px 4px 2px 0; padding:2px 8px;
  border-radius:999px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--text); font-size:.74rem; font-weight:700;
}
@media (max-width:680px){
  .apidemo{ grid-template-columns:1fr; }
  .apidemo .engine{ flex-direction:row; min-width:0; }
}

/* ==========================================================================
   Parallel fan-out (.fanout) — one state fans into N questions that all
   light up AT THE SAME TIME (the simultaneity IS the "parallel sampling"
   concept), then converge into one typed result. SVG connectors animate
   a shared pulse. Contrast with .tokrow.flow (sequential, staggered).
   ========================================================================== */
.fanout{
  display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:10px;
  margin:18px 0; position:relative;
}
.fanout .node{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; text-align:center; font-weight:800; font-size:.86rem; color:var(--text);
}
.fanout .node .sub{ display:block; margin-top:3px; font-size:.72rem; font-weight:600; color:var(--sub); }
.fanout .node.state{ border-left:3px solid var(--accent); }
.fanout .node.result{ border-right:3px solid var(--accent); background:linear-gradient(180deg,var(--accent-soft),var(--card)); }
.fanout .qs{ display:flex; flex-direction:column; gap:9px; }
.fanout .q{
  display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:10px;
  background:var(--bg-soft); border:1px solid var(--border); font-size:.82rem; color:var(--text); font-weight:700;
  animation:fanPulse 2.4s ease-in-out infinite; /* NO per-item delay → all fire together = parallel */
}
.fanout .q .type{
  flex:0 0 auto; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:2px 7px;
}
.fanout .q .out{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--sub); font-weight:800; }
@keyframes fanPulse{
  0%, 100%{ border-color:var(--border); box-shadow:none; transform:translateX(0); }
  45%, 55%{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); transform:translateX(2px); }
}
.fanout .brace{ position:relative; width:22px; align-self:stretch; }
.fanout .brace::before{
  content:""; position:absolute; top:10%; bottom:10%; left:50%; width:2px; background:var(--border);
}
.fanout .brace .spark{
  position:absolute; left:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--accent); box-shadow:0 0 8px 2px color-mix(in srgb, var(--accent) 70%, transparent);
  animation:braceSpark 2.4s ease-in-out infinite;
}
@keyframes braceSpark{ 0%{ top:12%; opacity:0; } 20%{ opacity:1; } 50%{ top:88%; opacity:1; } 60%,100%{ opacity:0; } }
.fanout-cap{ grid-column:1 / -1; margin-top:6px; color:var(--sub); font-size:.86rem; text-align:center; }
.fanout-cap b{ color:var(--accent); }
@media (max-width:680px){
  .fanout{ grid-template-columns:1fr; }
  .fanout .brace{ display:none; }
}

/* ==========================================================================
   .jevmap — faithful animated recreation of the official JEV architecture
   diagram ("The Language Model That Won't Talk"): INPUTS → Jev core →
   probabilistic reasoning (probabilities / expected value / risk) →
   STRUCTURED OUTPUTS. Data pulses flow left→right; bars & risk curve are
   alive via CSS loops. Self-contained, no JS required.
   ========================================================================== */
.jevmap{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px clamp(12px,2.4vw,20px); margin:16px 0; }
.jevmap .jm-head{ text-align:center; margin-bottom:14px; }
.jevmap .jm-head h3{ margin:0; font-size:clamp(1.05rem,2.2vw,1.4rem); font-weight:900; letter-spacing:-.01em; color:var(--text); }
.jevmap .jm-head h3 b{ color:var(--accent); }
.jevmap .jm-head p{ margin:5px 0 0; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.jevmap .jm-body{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:nowrap; }
.jm-col{ display:flex; flex-direction:column; gap:9px; flex:0 0 auto; min-width:0; }
.jm-col .jm-col-label{ font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-align:center; margin-bottom:2px; }
.jm-item{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px;
  background:var(--bg-soft); border:1px solid var(--border); min-width:118px;
  animation:jmItem 3s ease-in-out infinite; animation-delay:calc(var(--i,0) * .28s);
}
.jm-item .ic{
  flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:1rem;
}
.jm-item .tx{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.jm-item .tx b{ font-size:.82rem; color:var(--text); font-weight:800; }
.jm-item .tx small{ font-size:.68rem; color:var(--sub); }
@keyframes jmItem{ 0%,100%{ border-color:var(--border); } 50%{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); } }
.jm-item.out .ic{ color:var(--accent); }

/* connector column — vertical rail with a traveling spark (converge/diverge feel) */
.jm-link{ position:relative; flex:0 0 34px; align-self:stretch; min-height:120px; }
.jm-link svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.jm-link .wire{ stroke:var(--border); stroke-width:1.6; fill:none; }
.jm-link .flow{ stroke:var(--accent); stroke-width:2; fill:none; stroke-dasharray:5 9; stroke-linecap:round;
  animation:jmDash 1.1s linear infinite; opacity:.9; }
@keyframes jmDash{ to{ stroke-dashoffset:-14; } }

/* Jev core chip */
.jm-core{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; padding:0 2px; }
.jm-chip{
  width:76px; height:76px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.35rem; color:#0b0f17; letter-spacing:-.03em;
  background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 92%, white), color-mix(in srgb,var(--accent) 50%, black));
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 40%, transparent);
  animation:jmChip 2s ease-in-out infinite;
}
@keyframes jmChip{ 0%,100%{ transform:scale(1); box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 34%, transparent); }
  50%{ transform:scale(1.05); box-shadow:0 12px 40px color-mix(in srgb,var(--accent) 55%, transparent); } }
.jm-core .jm-core-label{ font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; max-width:88px; line-height:1.3; }

/* reasoning column: probabilities / expected value / risk */
.jm-reason{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.jm-viz{ background:var(--bg-soft); border:1px solid var(--border); border-radius:11px; padding:8px 10px; min-width:150px; }
.jm-viz .vt{ font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.jm-prob-row{ display:grid; grid-template-columns:14px 1fr 30px; align-items:center; gap:6px; margin:3px 0; }
.jm-prob-row .lab{ font-size:.68rem; color:var(--sub); font-weight:700; }
.jm-prob-track{ height:8px; background:var(--card); border-radius:999px; overflow:hidden; }
.jm-prob-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,white));
  animation:jmGrow 3.2s ease-in-out infinite; }
.jm-prob-fill.a{ --to:72%; } .jm-prob-fill.b{ --to:18%; background:var(--muted); } .jm-prob-fill.c{ --to:10%; background:var(--muted); }
@keyframes jmGrow{ 0%{ width:0; } 45%,80%{ width:var(--to); } 100%{ width:0; } }
.jm-prob-row .pv{ font-size:.66rem; color:var(--sub); font-variant-numeric:tabular-nums; text-align:right; }
.jm-ev{ display:flex; align-items:flex-end; gap:5px; height:34px; }
.jm-ev i{ flex:1; background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 45%,transparent)); border-radius:3px 3px 0 0;
  transform-origin:bottom; animation:jmBar 2.6s ease-in-out infinite; }
.jm-ev i:nth-child(1){ height:40%; animation-delay:0s } .jm-ev i:nth-child(2){ height:70%; animation-delay:.2s }
.jm-ev i:nth-child(3){ height:55%; animation-delay:.4s } .jm-ev i:nth-child(4){ height:88%; animation-delay:.6s }
.jm-ev i:nth-child(5){ height:64%; animation-delay:.8s }
@keyframes jmBar{ 0%,100%{ transform:scaleY(.55); opacity:.7 } 50%{ transform:scaleY(1); opacity:1 } }
.jm-risk-svg{ width:100%; height:36px; display:block; }
.jm-risk-svg .curve{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:220; stroke-dashoffset:220; animation:jmDraw 3.4s ease-in-out infinite; }
.jm-risk-svg .area{ fill:var(--accent-soft); opacity:0; animation:jmArea 3.4s ease-in-out infinite; }
@keyframes jmDraw{ 0%{ stroke-dashoffset:220 } 45%,80%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:220 } }
@keyframes jmArea{ 0%,20%{ opacity:0 } 55%,80%{ opacity:1 } 100%{ opacity:0 } }

.jevmap .jm-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--border);
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.jevmap .jm-foot b{ color:var(--accent); }

/* responsive: collapse to vertical stacks on narrow screens */
@media (max-width:900px){
  .jevmap .jm-body{ flex-wrap:wrap; }
  .jm-link{ flex-basis:100%; min-height:26px; transform:rotate(90deg); }
}
@media (max-width:560px){
  .jm-item{ min-width:0; } .jm-viz{ min-width:0; }
}

/* ==========================================================================
   .dualsys — System 1 vs System 2 split panel (two brains, a VS divider).
   Each panel breathes; the active side glows. For the 1-1 opening.
   ========================================================================== */
.dualsys{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; margin:18px 0; }
.dualsys .ds-panel{
  border:1px solid var(--border); border-radius:14px; padding:16px 18px; background:var(--bg-soft);
  display:flex; flex-direction:column; gap:8px;
}
.dualsys .ds-panel.one{ border-top:3px solid var(--accent); animation:dsBreath 3.4s ease-in-out infinite; }
.dualsys .ds-panel.two{ border-top:3px solid var(--muted); animation:dsBreath 3.4s ease-in-out infinite; animation-delay:1.7s; }
@keyframes dsBreath{ 0%,100%{ box-shadow:none; } 50%{ box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 20%,transparent); } }
.dualsys .ds-head{ display:flex; align-items:center; gap:10px; }
.dualsys .ds-ico{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--accent-soft); }
.dualsys .ds-panel.two .ds-ico{ background:var(--border); }
.dualsys .ds-title{ font-weight:900; font-size:1rem; color:var(--text); }
.dualsys .ds-title small{ display:block; font-weight:700; font-size:.72rem; color:var(--sub); }
.dualsys .ds-list{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.dualsys .ds-list li{ position:relative; padding-left:16px; font-size:.84rem; color:var(--sub); line-height:1.4; }
.dualsys .ds-list li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.dualsys .ds-panel.two .ds-list li::before{ background:var(--muted); }
.dualsys .ds-vs{ display:flex; align-items:center; justify-content:center; padding:0 12px; }
.dualsys .ds-vs span{ width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.8rem; color:var(--muted); }
.dualsys .ds-tag{ margin-top:auto; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.dualsys .ds-panel.one .ds-tag{ color:var(--accent); }
.dualsys .ds-panel.two .ds-tag{ color:var(--muted); }
@media (max-width:640px){ .dualsys{ grid-template-columns:1fr; } .dualsys .ds-vs{ padding:8px 0; } }

/* ==========================================================================
   .calib — calibration / reliability diagram. x = 모델이 말한 확신도,
   y = 실제 정답률. 대각선 = 완벽 보정. JEV 점은 대각선 위(일치), LLM 점은
   대각선 아래(과신). 곡선/점이 그려지며 등장.
   ========================================================================== */
.calib{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:16px 0; }
.calib .cl-title{ font-size:.82rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.calib svg{ width:100%; max-width:360px; height:auto; display:block; margin:0 auto; }
.calib .grid{ stroke:var(--border); stroke-width:1; }
.calib .ideal{ stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 5; fill:none; }
.calib .jev{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260; animation:clDraw 3s ease-in-out infinite; }
.calib .llm{ fill:none; stroke:#f5734f; stroke-width:3; stroke-linecap:round; stroke-dasharray:6 6;
  stroke-dashoffset:0; opacity:.85; }
.calib .dot{ fill:var(--accent); opacity:0; animation:clDot 3s ease-in-out infinite; }
@keyframes clDraw{ 0%{ stroke-dashoffset:260; } 45%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:260; } }
@keyframes clDot{ 0%,30%{ opacity:0; } 55%,85%{ opacity:1; } 100%{ opacity:0; } }
.calib text{ fill:var(--sub); font-size:9px; font-family:inherit; }
.calib .cl-legend{ display:flex; gap:18px; justify-content:center; margin-top:8px; font-size:.8rem; color:var(--sub); }
.calib .cl-legend span{ display:inline-flex; align-items:center; gap:7px; }
.calib .cl-legend i{ width:16px; height:3px; border-radius:2px; display:inline-block; }
.calib .cl-legend i.jev{ background:var(--accent); } .calib .cl-legend i.llm{ background:#f5734f; }
.calib .cl-legend i.ideal{ background:var(--muted); }

/* ==========================================================================
   Visual & animation refinements (readability + polish) — global, additive
   ========================================================================== */
/* smoother depth on interactive cards */
.stat-card, .card, .chapter-card{ transition:transform .28s cubic-bezier(.16,1,.3,1), background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.card:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow:0 12px 30px rgba(0,0,0,.28); }

/* compare table: gentle row highlight on hover for scannability */
table.compare tbody tr{ transition:background .2s ease; }
table.compare tbody tr:hover{ background:color-mix(in srgb, var(--accent) 12%, var(--card)); }

/* checklist ticks pop in with a subtle spring when the summary slide plays */
.reveal-stagger.in-view ul.checklist li .tick{ animation:tickPop .5s both cubic-bezier(.34,1.56,.64,1); }
@keyframes tickPop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0; } 60%{ transform:scale(1.15) rotate(0); } 100%{ transform:scale(1); opacity:1; } }

/* eyebrow dot breathes softly to draw the eye to each new idea */
.eyebrow::before{ animation:eyebrowPulse 2.4s ease-in-out infinite; }
@keyframes eyebrowPulse{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 0 4px var(--accent-soft); } }

/* progress rail gets a soft moving sheen */
.progress-rail > i{ position:relative; overflow:hidden; }
.progress-rail > i::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(-100%); animation:railSheen 3.2s ease-in-out infinite;
}
@keyframes railSheen{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(320%); } }

/* readability: slightly larger, airier body copy inside slides */
.section p{ line-height:1.7; }
.note{ line-height:1.6; }
.analogy p{ line-height:1.65; }

/* deck arrows: clearer affordance on hover */
.deck-nav button:hover{ transform:translateY(-50%) scale(1.08); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Accessibility: honor reduced-motion — freeze looping/entrance animation */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
  /* resting states so draw-in diagrams stay fully visible when motion is frozen */
  .calib .jev{ stroke-dashoffset:0 !important; }
  .calib .dot{ opacity:1 !important; }
  .jm-prob-fill.a{ width:72% !important; } .jm-prob-fill.b{ width:18% !important; } .jm-prob-fill.c{ width:10% !important; }
  .jm-risk-svg .curve{ stroke-dashoffset:0 !important; } .jm-risk-svg .area{ opacity:1 !important; }
  .jm-ev i{ transform:none !important; opacity:1 !important; }
  .archflow .link .flow, .jm-link .flow{ opacity:1 !important; }
  .sg-chip.ok{ opacity:1 !important; } .sg-chip.bad{ opacity:.6 !important; transform:none !important; }
}

/* ==========================================================================
   .schemaguard — visualizes type-safety: values defined in the schema pass
   (✓ glow), while an out-of-schema value is rejected (✕ shake+fade). Teaches
   "the model can only return schema-defined values → hallucination impossible."
   ========================================================================== */
.schemaguard{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:16px 0; }
.schemaguard .sg-title{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.schemaguard .sg-title .shield{ font-size:1rem; }
.sg-lane{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sg-chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px; font-weight:700; font-size:.9rem;
  border:1px solid var(--border); font-family:"SFMono-Regular",Consolas,monospace; }
.sg-chip.ok{ background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 45%,transparent); color:var(--text);
  animation:sgOk 3s ease-in-out infinite; animation-delay:calc(var(--i,0)*.28s); }
.sg-chip.ok::after{ content:"✓"; color:var(--accent); font-weight:900; }
@keyframes sgOk{ 0%,100%{ box-shadow:none; transform:translateY(0); } 50%{ box-shadow:0 0 0 3px var(--accent-soft); transform:translateY(-2px); } }
.sg-chip.bad{ background:var(--bg-soft); border:1px dashed #f5734f; color:var(--muted); animation:sgBad 3s ease-in-out infinite; }
.sg-chip.bad::after{ content:"✕ 스키마 밖"; color:#f5734f; font-weight:800; font-size:.72rem; }
@keyframes sgBad{ 0%,55%,100%{ transform:translateX(0); opacity:.6; } 63%{ transform:translateX(7px) rotate(1.5deg); } 69%{ transform:translateX(-7px) rotate(-1.5deg); } 75%{ transform:translateX(4px); } 82%{ transform:translateX(0); opacity:.32; } }
.sg-cap{ margin-top:11px; font-size:.86rem; color:var(--sub); line-height:1.55; }
.sg-cap b{ color:var(--accent); }