:root {
  color-scheme: dark;
  --bg: #080b10;
  --panel: rgba(19, 24, 33, .78);
  --panel-strong: rgba(25, 31, 42, .92);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .24);
  --text: #f3f0e9;
  --muted: #aaa79f;
  --dim: #6f756f;
  --amber: #ffb85c;
  --cyan: #66e0d2;
  --red: #ff6b6b;
  --green: #7bd88f;
  --violet: #9d83ff;
  --ease: cubic-bezier(.18, .8, .2, 1);
  --slide-count: 8;
  --content-max: 1600px;
  --edge-pad: 42px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 78% 12%, rgba(255, 184, 92, .12), transparent 32%),
    radial-gradient(circle at 10% 84%, rgba(102, 224, 210, .10), transparent 30%),
    var(--bg);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.deck {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  min-width: 320px;
  overflow: hidden;
  isolation: isolate;
}

.deck::after {
  content: "";
  position: absolute;
  z-index: 24;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 0 38%, rgba(102, 224, 210, .16) 46%, rgba(255, 255, 255, .20) 50%, rgba(255, 184, 92, .12) 56%, transparent 68%);
  mix-blend-mode: screen;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 9px);
  mix-blend-mode: soft-light;
}

.topbar {
  position: absolute;
  z-index: 20;
  top: 28px;
  left: 50%;
  right: auto;
  width: min(calc(100% - (var(--edge-pad) * 2)), var(--content-max));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: rgba(243, 240, 233, .68);
  font-size: 12px;
  font-weight: 760;
}

.lecture { text-align: center; }
.counter { text-align: right; }

.stage {
  position: absolute;
  z-index: 10;
  top: 88px;
  bottom: 116px;
  left: 50%;
  right: auto;
  width: min(calc(100% - (var(--edge-pad) * 2)), var(--content-max));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 220px minmax(320px, .86fr) minmax(420px, 1.18fr);
  gap: 28px;
  align-items: stretch;
}

.hierarchy {
  position: relative;
  align-self: center;
  min-height: 520px;
  padding: 26px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.26);
}

.rail-title {
  margin-bottom: 22px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 850;
}

.hierarchy ol {
  position: relative;
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}

.hierarchy ol::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
}

.hierarchy li {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 0 0 0 15px;
  color: var(--muted);
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}

.hierarchy li::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #303743;
  box-shadow: 0 0 0 4px rgba(255,255,255,.03);
}

.hierarchy li.active {
  color: var(--text);
  transform: translateX(5px);
}

.hierarchy li.active::before {
  background: var(--accent, var(--amber));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent, var(--amber)) 16%, transparent), 0 0 28px var(--accent, var(--amber));
}

.hierarchy b {
  font-size: 14px;
  line-height: 1.2;
}

.hierarchy span {
  color: inherit;
  opacity: .62;
  font-size: 11px;
  line-height: 1.35;
}

.copy-pane {
  align-self: center;
  min-width: 0;
  padding: 14px 0;
}

.kicker {
  margin-bottom: 18px;
  color: var(--accent, var(--amber));
  font-size: 13px;
  font-weight: 850;
}

h1,
h2,
p { margin: 0; }

h1,
h2 {
  font-size: clamp(42px, 5.5vw, 82px);
  line-height: 1.03;
  font-weight: 930;
  word-break: keep-all;
}

.lead {
  margin-top: 26px;
  max-width: 620px;
  color: rgba(243, 240, 233, .74);
  font-size: clamp(18px, 1.65vw, 27px);
  line-height: 1.55;
  word-break: keep-all;
}

.point-list {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  max-width: 610px;
}

.point {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: rgba(243, 240, 233, .72);
  font-size: 15px;
  line-height: 1.4;
}

.point b {
  color: var(--accent, var(--amber));
  font-size: 12px;
  font-weight: 850;
}

.media-pane {
  position: relative;
  align-self: center;
  min-width: 0;
}

.media-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100%, 840px);
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(10, 14, 20, .72);
  box-shadow: 0 40px 110px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
}

.media-frame::before,
.media-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 28px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.40) 0 22px, rgba(255,255,255,.10) 22px 32px),
    rgba(0,0,0,.32);
}

.media-frame::before { top: 0; }
.media-frame::after { bottom: 0; }

.media-inner {
  position: absolute;
  inset: 48px 0;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 18px 30px;
}

.media-title {
  position: absolute;
  z-index: 5;
  left: 28px;
  top: 46px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  color: white;
  font-size: 12px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.frame-grid {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 14px;
  grid-auto-rows: minmax(0, 1fr);
}

.frame-grid.image { grid-template-columns: 1fr; }
.frame-grid.webtoon { grid-template-columns: .72fr 1fr .62fr; align-items: stretch; }
.frame-grid.video { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.frame-grid.map { grid-template-columns: 1fr; }

.panel {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent, var(--amber)) 22%, transparent), rgba(255,255,255,.04)),
    rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.22);
}

.panel::after {
  content: attr(data-label);
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: white;
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.16) 45% 47%, transparent 48%),
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.22), transparent 32%);
  opacity: .7;
}

.map-stack {
  display: grid;
  gap: 10px;
  width: min(520px, 100%);
}

.map-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

.map-row b { color: var(--accent, var(--amber)); }
.map-row span { color: rgba(243,240,233,.72); line-height: 1.35; }

.matrix-visual,
.agent-grid {
  display: grid;
  gap: 12px;
  width: min(620px, 100%);
}

.matrix-row,
.agent-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  color: var(--text);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 36px rgba(0,0,0,.22);
}

.matrix-row {
  grid-template-columns: 90px 1fr 120px;
  align-items: center;
}

.matrix-row b,
.agent-card b {
  color: var(--accent, var(--amber));
  font-size: 13px;
  font-weight: 900;
}

.matrix-row span,
.agent-card span {
  color: rgba(243,240,233,.76);
  line-height: 1.36;
}

.matrix-row em {
  color: rgba(243,240,233,.9);
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.agent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-card:hover {
  border-color: color-mix(in srgb, var(--accent, var(--amber)) 72%, white 8%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--amber)) 20%, transparent), rgba(255,255,255,.052));
}

.appendix-visual {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: grid;
  place-items: center;
}

.appendix-visual img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  box-shadow: 0 26px 80px rgba(0,0,0,.38);
}

.deck.is-appendix .stage {
  top: 84px;
  bottom: 96px;
  left: 50%;
  right: auto;
  width: min(calc(100% - (var(--edge-pad) * 2)), var(--content-max));
  transform: translateX(-50%);
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
}

.deck.is-appendix .hierarchy,
.deck.is-appendix .copy-pane {
  display: none;
}

.deck.is-appendix .media-pane {
  align-self: stretch;
  display: grid;
  place-items: center;
}

.deck.is-appendix .media-frame {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  margin: auto;
  border-radius: 16px;
  background: rgba(250,250,247,.98);
  box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.14);
}

.deck.is-appendix .media-frame::before,
.deck.is-appendix .media-frame::after {
  display: none;
}

.deck.is-appendix .media-inner {
  inset: 0;
  padding: 0;
}

.deck.is-appendix .media-title {
  left: 14px;
  top: 14px;
  background: rgba(8,11,16,.68);
  border: 1px solid rgba(255,255,255,.16);
}

.deck.is-appendix .appendix-visual img {
  border-radius: 16px;
  border: 0;
  background: white;
  box-shadow: none;
}
.timeline {
  position: absolute;
  z-index: 30;
  left: 50%;
  right: auto;
  width: min(calc(100% - (var(--edge-pad) * 2)), var(--content-max));
  transform: translateX(-50%);
  bottom: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}

.timeline-track {
  display: grid;
  grid-template-columns: repeat(var(--slide-count), minmax(64px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 11, 16, .58);
  backdrop-filter: blur(18px);
}

.timeline-item {
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: rgba(243,240,233,.56);
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
  border: 1px solid transparent;
}

.timeline-item.active {
  color: white;
  border-color: color-mix(in srgb, var(--accent, var(--amber)) 70%, white 8%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--amber)) 38%, transparent), rgba(255,255,255,.075));
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent, var(--amber)) 18%, transparent);
}

.timeline-item small { color: inherit; opacity: .62; }

.controls {
  display: flex;
  gap: 10px;
}

.controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: white;
  background: rgba(255,255,255,.08);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.controls button:hover { background: rgba(255,255,255,.15); }

.credit {
  position: absolute;
  z-index: 32;
  left: 50%;
  right: auto;
  bottom: 168px;
  width: min(calc(100% - (var(--edge-pad) * 2)), var(--content-max));
  transform: translateX(-50%);
  color: rgba(243,240,233,.54);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  text-align: right;
  pointer-events: none;
}

.deck.is-revealing .hierarchy li {
  animation: railReveal 620ms var(--ease) both;
  animation-delay: calc(40ms + var(--i, 0) * 58ms);
}

.deck.is-revealing .reveal {
  animation: textReveal 720ms var(--ease) both;
  animation-delay: calc(90ms + var(--i, 0) * 88ms);
}

.deck.is-revealing .media-frame {
  animation: mediaReveal 760ms var(--ease) both;
  animation-delay: 190ms;
}

.deck.is-revealing .media-title {
  animation: chipReveal 520ms var(--ease) both;
  animation-delay: 480ms;
}

.deck.is-revealing .panel,
.deck.is-revealing .map-row,
.deck.is-revealing .agent-card,
.deck.is-revealing .matrix-row {
  animation: cardReveal 680ms var(--ease) both;
  animation-delay: calc(560ms + var(--i, 0) * 95ms);
}

.deck.is-revealing .timeline-item {
  animation: timelineReveal 560ms var(--ease) both;
  animation-delay: calc(220ms + var(--i, 0) * 42ms);
}

.deck.is-revealing .timeline-item.active {
  animation-name: timelineRevealActive;
}

.deck.is-changing::after { animation: sweepFlash 540ms var(--ease); }
.deck.is-changing .media-pane { animation: shutter 520ms var(--ease); }
.deck.is-changing .copy-pane { animation: copyIn 520ms var(--ease); }

@keyframes railReveal {
  from { opacity: 0; transform: translateX(-18px); filter: blur(6px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes textReveal {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes mediaReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0 round 22px); transform: translateX(34px) scale(.985); filter: brightness(.82) blur(8px); }
  45% { opacity: 1; filter: brightness(1.18) blur(0); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 22px); transform: translateX(0) scale(1); filter: none; }
}

@keyframes chipReveal {
  from { opacity: 0; transform: translateY(-8px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(6px) saturate(.8); }
  60% { opacity: 1; filter: blur(0) saturate(1.04); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes timelineReveal {
  from { opacity: 0; transform: translateY(18px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes timelineRevealActive {
  from { opacity: 0; transform: translateY(18px) scale(.96); box-shadow: none; }
  68% { opacity: 1; transform: translateY(-2px) scale(1.035); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sweepFlash {
  0% { opacity: 0; transform: translateX(-120%); }
  22% { opacity: .92; }
  100% { opacity: 0; transform: translateX(120%); }
}
@keyframes shutter {
  0% { filter: brightness(.82) blur(2px); transform: translateX(18px) scale(.992); }
  42% { filter: brightness(1.18) blur(0); transform: translateX(0) scale(1.006); }
  100% { filter: none; transform: none; }
}

@keyframes copyIn {
  0% { opacity: .25; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1060px) {
  .stage {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto auto;
  }
  .media-pane { grid-column: 1 / -1; }
  .media-frame { margin: 0 auto; width: min(100%, 840px); }
  .hierarchy { min-height: 430px; }
}

@media (max-width: 760px) {
  body { display: block; overflow-y: auto; }
  .deck { min-height: 100vh; height: auto; overflow: visible; }
  .topbar { position: relative; top: auto; left: auto; right: auto; margin: 20px; grid-template-columns: 1fr; gap: 6px; }
  .lecture, .counter { text-align: left; }
  .stage { position: relative; inset: auto; margin: 20px; grid-template-columns: 1fr; gap: 18px; }
  .hierarchy { min-height: auto; }
  h1, h2 { font-size: clamp(34px, 11vw, 54px); }
  .frame-grid.webtoon, .frame-grid.video, .agent-grid { grid-template-columns: 1fr; }
  .matrix-row { grid-template-columns: 1fr; }
  .matrix-row em { text-align: left; }
  .media-frame { min-height: 420px; aspect-ratio: auto; }
  .timeline { position: relative; left: auto; right: auto; bottom: auto; margin: 20px; grid-template-columns: 1fr; }
  .credit { position: relative; right: auto; bottom: auto; margin: 0 20px 24px; text-align: right; }
  .timeline-track { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}