:root {
  /* Design compliance vocabulary: IBM Plex Mono** for tiny terminal slips; IBM Plex Sans KR** for clean multilingual friendliness; Interpret “muhan” as 무한. */
  --cream: #F7EBCB;
  --manila: #D8B982;
  --persimmon: #E46F3A;
  --cocoa: #3C2A1E;
  --sage: #7B8D68;
  --raspberry: #C94F6D;
  --mint: #B7E3C0;
  --shadow: #6B5B4A;
  --split: 44%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: "IBM Plex Sans KR", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.notebook {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--split) 18px 1fr;
  background:
    radial-gradient(circle at 8% 12%, rgba(228,111,58,.18), transparent 28%),
    linear-gradient(90deg, rgba(216,185,130,.22), transparent 55%),
    var(--cream);
  transition: grid-template-columns 700ms cubic-bezier(.2,.8,.2,1);
  isolation: isolate;
}

.paper-grain, .scanline {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 30;
}

.paper-grain {
  opacity: .25;
  background-image:
    radial-gradient(circle at 20% 30%, var(--shadow) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, var(--manila) 0 1px, transparent 1px);
  background-size: 34px 34px, 22px 22px;
  mix-blend-mode: multiply;
}

.scanline {
  opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(60,42,30,.2) 7px, transparent 8px);
  animation: scanFlicker 4s infinite steps(6);
}

.desk-panel {
  position: relative;
  padding: clamp(26px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(123,141,104,.18) 31px, transparent 32px),
    linear-gradient(120deg, rgba(255,255,255,.35), rgba(216,185,130,.32));
}

.desk-sticky {
  width: max-content;
  transform: rotate(-3deg);
  padding: 8px 14px;
  background: var(--manila);
  border: 2px solid rgba(60,42,30,.28);
  border-radius: 4px 12px 5px 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  box-shadow: 6px 7px 0 rgba(107,91,74,.16);
}

.brand-stamp {
  position: relative;
  margin-top: 36px;
  font-family: Shrikhand, Georgia, serif;
  font-size: clamp(58px, 9vw, 128px);
  line-height: .85;
  color: var(--persimmon);
  letter-spacing: -.04em;
  filter: url(#none);
}

.brand-stamp::after {
  content: attr(data-text);
  position: absolute;
  left: 8px;
  top: 7px;
  color: var(--raspberry);
  opacity: .52;
  z-index: -1;
  animation: misregister 3.2s infinite steps(2);
}

.desk-thought {
  max-width: 530px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(24px, 3.2vw, 47px);
  line-height: 1.03;
  margin: 28px 0 30px;
}

.annotation-stack { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }

.note-chip {
  border: 2px solid rgba(60,42,30,.5);
  background: rgba(247,235,203,.78);
  border-radius: 999px;
  padding: 9px 13px;
  cursor: pointer;
  box-shadow: 3px 4px 0 rgba(107,91,74,.2);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.note-chip:hover, .note-chip.active {
  transform: translate(-2px, -2px) rotate(-1deg);
  background: var(--cocoa);
  color: var(--cream);
}

.margin-note {
  margin-top: 26px;
  width: min(440px, 100%);
  border-left: 5px solid var(--raspberry);
  padding: 12px 0 12px 17px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--shadow);
  min-height: 64px;
}

.book-gutter {
  position: relative;
  background: linear-gradient(90deg, rgba(60,42,30,.1), var(--shadow), rgba(60,42,30,.18));
  box-shadow: inset 5px 0 10px rgba(60,42,30,.16), inset -5px 0 12px rgba(247,235,203,.5);
  z-index: 4;
}

.book-gutter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(247,235,203,.35) 23px, transparent 24px);
}

.gutter-loop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 38px;
  border: 4px solid var(--persimmon);
  border-left-color: var(--raspberry);
  border-right-color: var(--sage);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(.15);
  opacity: 0;
  transition: transform 450ms ease, opacity 450ms ease;
}

.book-gutter.looping .gutter-loop { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }

.machine-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(183,227,192,.42), transparent 23%),
    repeating-linear-gradient(45deg, rgba(228,111,58,.16) 0 10px, transparent 10px 24px),
    var(--manila);
}

.projector-glow {
  position: absolute;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  right: -20vw;
  top: -18vw;
  background: radial-gradient(circle, rgba(183,227,192,.72), rgba(183,227,192,0) 60%);
  animation: projectorPulse 6s ease-in-out infinite;
}

.binder-rings { position: absolute; top: 40px; left: 20px; display: grid; gap: 16px; z-index: 5; }
.binder-rings span { width: 24px; height: 24px; border: 5px solid var(--shadow); border-radius: 50%; background: var(--cream); box-shadow: inset 3px 3px 0 rgba(60,42,30,.18); }

.chapter-stage, .spread { position: absolute; inset: 0; }

.spread {
  display: grid;
  align-content: center;
  padding: clamp(34px, 6vw, 92px);
  opacity: 0;
  transform: translateY(28px) rotate(.5deg);
  transition: opacity 520ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.spread.active { opacity: 1; transform: translateY(0) rotate(0); pointer-events: auto; }

.chapter-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  color: var(--raspberry);
  letter-spacing: .12em;
  margin-bottom: 12px;
}

h1, h2 { margin: 0; max-width: 780px; }
h1 { font-family: Shrikhand, Georgia, serif; font-size: clamp(46px, 7vw, 105px); line-height: .93; color: var(--cocoa); text-shadow: 5px 5px 0 rgba(228,111,58,.22); }
h2 { font-family: Fraunces, Georgia, serif; font-size: clamp(34px, 5vw, 78px); line-height: .98; color: var(--cocoa); }

.card-stack { position: relative; height: 300px; margin-top: 26px; }
.index-card, .library-card, .sort-card, .checkout-card {
  background: var(--cream);
  border: 2px solid rgba(60,42,30,.45);
  box-shadow: 10px 12px 0 rgba(107,91,74,.22);
}
.index-card {
  position: absolute;
  width: 230px;
  height: 142px;
  padding: 24px;
  border-radius: 8px;
  font-family: Fraunces, Georgia, serif;
  font-size: 34px;
  text-align: left;
  cursor: pointer;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), background 240ms ease;
}
.index-card small { display: block; margin-top: 12px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
.index-card::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: rgba(123,141,104,.25); box-shadow: 0 28px 0 rgba(123,141,104,.25), 0 56px 0 rgba(123,141,104,.25); }
.card-one { left: 6%; top: 28px; transform: rotate(-7deg); }
.card-two { left: 28%; top: 82px; transform: rotate(4deg); background: #D8B982; }
.card-three { left: 52%; top: 44px; transform: rotate(-2deg); background: #B7E3C0; }
.index-card:hover, .index-card.flipped { transform: translateY(-18px) rotate(2deg) scale(1.04); background: #F7EBCB; }
.flutter .index-card { animation: cardJitter 3.5s infinite ease-in-out; }
.flutter .card-two { animation-delay: .35s; }
.flutter .card-three { animation-delay: .7s; }

.tape { position: absolute; width: 130px; height: 34px; background: rgba(247,235,203,.56); border: 1px solid rgba(60,42,30,.18); transform: rotate(-13deg); }
.tape-a { right: 16%; top: 18%; }
.tape-b { left: 12%; bottom: 16%; transform: rotate(10deg); }

.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 18px; max-width: 720px; margin-top: 28px; }
.library-card { padding: 22px; min-height: 150px; border-radius: 6px; background-image: repeating-linear-gradient(0deg, transparent 0 29px, rgba(123,141,104,.18) 30px, transparent 31px); }
.library-card b { display: block; font-family: Shrikhand, Georgia, serif; color: var(--persimmon); font-size: 32px; }
.library-card span { display: block; margin-top: 18px; }
.library-card.raspberry b { color: var(--raspberry); }
.library-card.mint { background-color: var(--mint); }
.mono-slip { display: inline-block; width: max-content; margin-top: 24px; padding: 10px 14px; background: var(--cocoa); color: var(--mint); font-family: "IBM Plex Mono", ui-monospace, monospace; transform: rotate(.8deg); animation: slipIn 2.8s infinite steps(2); }

.sorter-track { display: flex; gap: 18px; margin-top: 38px; transform: rotate(-2deg); }
.sort-card { min-width: 174px; min-height: 210px; padding: 22px 18px; border-radius: 8px; font-family: Fraunces, Georgia, serif; font-size: 28px; animation: sortAdvance 5s infinite ease-in-out; }
.sort-card:nth-child(2) { animation-delay: .25s; }
.sort-card:nth-child(3) { animation-delay: .5s; }
.sort-card:nth-child(4) { animation-delay: .75s; }
.sort-card:nth-child(5) { animation-delay: 1s; }
.persimmon { background: #E46F3A; color: #F7EBCB; }
.sage { background: #7B8D68; color: #F7EBCB; }
.raspberry { background: #C94F6D; color: #F7EBCB; }
.manila { background: #D8B982; }
.sunburst { position: absolute; right: -120px; bottom: -130px; width: 420px; height: 420px; border-radius: 50%; background: repeating-conic-gradient(from 15deg, rgba(228,111,58,.5) 0 10deg, transparent 10deg 22deg); opacity: .65; }

.acetate-sheet { position: relative; margin-top: 32px; max-width: 720px; min-height: 350px; border: 2px solid rgba(60,42,30,.3); background: rgba(183,227,192,.34); box-shadow: 16px 18px 0 rgba(107,91,74,.2); backdrop-filter: blur(1px); }
.machine-window { position: absolute; left: 40px; top: 42px; right: 40px; height: 130px; border-radius: 18px; background: var(--cocoa); color: var(--mint); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; font-family: "IBM Plex Mono", ui-monospace, monospace; box-shadow: inset 0 0 28px rgba(183,227,192,.34); }
.machine-window em { font-family: Shrikhand, Georgia, serif; font-size: 86px; font-style: normal; color: var(--persimmon); }
.chalk-bridge { position: absolute; left: 42px; right: 42px; bottom: 30px; width: calc(100% - 84px); height: 170px; }
.chalk-bridge path, .chalk-bridge circle { fill: none; stroke: var(--cream); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 720; stroke-dashoffset: 720; animation: drawBridge 4s infinite ease-in-out; }
.chalk-bridge circle { fill: var(--cream); stroke: var(--sage); stroke-width: 4; }
.stamp-mark { position: absolute; right: 10%; top: 18%; border: 6px solid var(--raspberry); color: var(--raspberry); font-family: Shrikhand, Georgia, serif; font-size: clamp(32px, 5vw, 74px); padding: 8px 24px; transform: rotate(12deg); opacity: .78; animation: stampImpact 2.6s infinite; }

.final-copy { max-width: 620px; font-size: clamp(20px, 2.2vw, 31px); line-height: 1.35; margin: 22px 0; }
.checkout-card { max-width: 520px; padding: 28px; background: #F7EBCB; display: grid; gap: 14px; transform: rotate(-1deg); }
.checkout-card div { display: flex; justify-content: space-between; border-bottom: 2px dotted rgba(60,42,30,.35); padding-bottom: 10px; gap: 20px; }
.checkout-card span { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--shadow); text-transform: uppercase; font-size: 12px; }
.checkout-card strong { font-family: Fraunces, Georgia, serif; font-size: 22px; text-align: right; }

.scroll-spine { position: relative; z-index: -1; }
.scroll-spine section { min-height: 100vh; }

@keyframes misregister { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(5px,-3px); } }
@keyframes scanFlicker { 0%, 100% { transform: translateY(0); opacity: .12; } 50% { transform: translateY(8px); opacity: .2; } }
@keyframes projectorPulse { 0%, 100% { transform: scale(.95); opacity: .45; } 50% { transform: scale(1.08); opacity: .75; } }
@keyframes cardJitter { 0%, 100% { margin-top: 0; } 50% { margin-top: -9px; } }
@keyframes slipIn { 0%, 100% { transform: translateX(0) rotate(.8deg); } 50% { transform: translateX(9px) rotate(-.8deg); } }
@keyframes sortAdvance { 0%, 100% { transform: translateX(0) rotate(0); } 45% { transform: translateX(28px) rotate(2deg); } 70% { transform: translateX(0) rotate(-1deg); } }
@keyframes drawBridge { 0% { stroke-dashoffset: 720; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -720; } }
@keyframes stampImpact { 0%, 60%, 100% { transform: scale(1) rotate(12deg); } 8% { transform: scale(1.18) rotate(8deg); opacity: .45; } 16% { transform: scale(.96) rotate(12deg); opacity: .9; } }

@media (max-width: 820px) {
  .notebook { position: relative; min-height: 100vh; display: block; }
  .desk-panel, .machine-panel { min-height: 100vh; }
  .book-gutter { display: none; }
  .machine-panel { position: relative; }
  .chapter-stage, .spread { position: relative; min-height: 100vh; }
  .spread { display: none; opacity: 1; transform: none; }
  .spread.active { display: grid; }
  .scroll-spine { display: none; }
  .glossary-grid { grid-template-columns: 1fr; }
  .sorter-track { overflow: hidden; flex-wrap: wrap; }
  .card-three { left: 18%; top: 166px; }
}