:root {
  --paper: #f4efe5;
  --ink: #31363a;
  --muted: #6e777c;
  --blue: #49698a;
  --rule: rgb(49 54 58 / 16%);
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

.story-site-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:0 clamp(18px,4vw,64px);border-bottom:1px solid var(--rule);background:var(--paper);color:var(--ink);font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}.story-brand{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:800}.story-brand img{width:28px;height:28px;object-fit:contain}.story-site-header nav,.story-header-actions{display:flex;align-items:center;gap:16px}.story-site-header nav a,.story-header-actions>a{color:var(--muted);text-decoration:none}.story-header-actions>a{font-weight:700;color:var(--ink)}.story-site-header .language-selector select{width:94px;min-width:94px;min-height:34px;padding:4px 22px 4px 8px;border:1px solid #d8deeb;border-radius:8px;background:#fff;color:#36425d;font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; min-width: 0; }
button, p, h1 { font: inherit; }
figure { margin: 0; }
button { color: inherit; }
p, h1 { word-break: keep-all; line-break: strict; overflow-wrap: normal; }
html[lang="ja"] .source-line, html[lang="ja"] .scene-kicker, html[lang="ja"] .opening-caption, html[lang="ja"] .opening-sentence { word-break: normal; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sound-toggle { position: fixed; z-index: 50; top: max(16px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 1px solid rgb(67 58 48 / 32%); border-radius: 999px; background: rgb(247 242 232 / 96%); color: #433a30; font-size: 12px; line-height: 1.4; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; }
.sound-toggle:hover { background: #f1eadc; border-color: rgb(67 58 48 / 52%); }
.sound-toggle:focus-visible { outline: 2px solid #756553; outline-offset: 3px; }
.sound-toggle[aria-pressed="true"], .sound-toggle:active { background: #ebe3d5; border-color: rgb(67 58 48 / 48%); }
.sound-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.sound-icon-wave, .sound-toggle[aria-pressed="true"] .sound-icon-muted { display: none; }
.sound-toggle[aria-pressed="true"] .sound-icon-wave { display: block; }
.chapter { display: grid; grid-template-columns: 56% 44%; position: relative; align-items: start; }
.visual-canvas { position: relative; background: #e6e3d9; overflow: hidden; isolation: isolate; }
.desktop-visual { position: sticky; top: 0; height: 100svh; width: 100%; }
.mobile-visual { display: none; }
.visual-layer, .record-layer, .receipt-layer { position: absolute; inset: 0; overflow: hidden; }
.visual-layer { visibility: hidden; }
.visual-layer--memory { inset: 5% 5% 9%; border: 1px solid rgb(244 239 229 / 18%); }
.art-plane { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 2 / 3; transform: translate(-50%,-50%); container-type: inline-size; }
.artwork { display: block; width: 100%; height: 100%; object-fit: contain; }
.visual-layer[data-asset="hyejin"] .art-plane { overflow: hidden; }
.visual-layer[data-asset="hyejin"] .artwork { position: absolute; left: 0; top: -20.833333%; width: 160%; height: 160%; max-width: none; object-fit: fill; }
.record-layer { z-index: 4; pointer-events: none; visibility: hidden; }
.notebook-writing { position: absolute; top: 32%; left: 24%; width: 42%; transform: rotate(-12deg); color: #31363a; font-family: "Gungsuh", "궁서", "Batang", "Noto Serif KR", serif; font-size: clamp(24px,2.22vw,34px); line-height: 1.45; font-weight: 400; letter-spacing: -.055em; }
.notebook-writing p { position: relative; margin: 0 0 .6em; white-space: pre-line; }
.notebook-writing .paper-record { font-size: .92em; }
.notebook-writing[data-page] { top: 26%; left: 24%; height: 55%; transform: rotate(-12deg); }
.notebook-writing[data-page] .paper-record--page { position: absolute; left: var(--record-left); top: var(--record-top); width: max-content; max-width: 94%; margin: 0; font-size: calc(1em * var(--record-size)); line-height: 1.08; white-space: nowrap; letter-spacing: -.07em; transform: translateX(var(--record-shift)) rotate(var(--record-tilt)); transform-origin: left center; }
.notebook-writing[data-page="march-twenty-five"] .paper-record--page:nth-child(3) { white-space: normal; width: 83%; }
.notebook-writing[data-page="stand"] .paper-record--page, .notebook-writing[data-page="hardship"] .paper-record--page { white-space: normal; width: 88%; line-height: 1.1; }
.correction-stroke { position: absolute; height: .72em; left: -.04em; right: -.08em; top: 42%; border-top: 1.25px solid #424741; transform: rotate(-1.7deg) scaleX(var(--strike,0)); transform-origin: left; }
.correction-stroke::after { content: ""; position: absolute; left: .08em; right: -.04em; top: .22em; border-top: 1px solid rgb(66 71 65 / 82%); transform: rotate(1.4deg); }
.correction-stroke--black { top: 25%; height: .74em; border-top-width: 3px; border-top-color: #272a29; background: repeating-linear-gradient(172deg, transparent 0 2px, rgb(39 42 41 / 88%) 2px 4px, transparent 4px 6px); opacity: .94; }
.correction-new { margin-left: 38% !important; font-size: .82em; }
.notebook-writing[data-page] .correction-new { margin-left: 0 !important; }
.receipt-layer { z-index: 4; pointer-events: none; visibility: hidden; }
.receipt-writing { position: absolute; top: 25%; left: 36%; width: 29%; color: #3b3d36; font-family: "Batang", "Noto Serif KR", serif; font-size: clamp(23px,2.18vw,32px); line-height: 1.45; transform: rotate(-.65deg); }
.receipt-writing p { margin: 0; white-space: pre-line; }
.receipt-father { margin-top: 2.1em !important; font-weight: 600; letter-spacing: -.08em; transform: rotate(.5deg) scaleX(.86); transform-origin: left center; }
.canvas-folio { display: none; }
.narrative-track { min-width: 0; background: var(--paper); }
.scene { position: relative; }
.beat { position: relative; }
.beat-copy { padding: 48px clamp(28px,4.1vw,78px) 38px; min-height: 39svh; }
.scene:first-child .beat:first-child .beat-copy { padding-top: 100px; }
.source-line { margin: 0 0 1.15em; font-size: clamp(17px,1.35vw,21px); line-height: 1.95; letter-spacing: -.032em; }
.source-line:last-child { margin-bottom: 0; }
[data-source-line="4"] { margin-bottom: 0; }
.scene-kicker { margin: 0 0 42px; font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.source-line--title { font-size: clamp(32px,3vw,48px); line-height: 1.5; letter-spacing: -.06em; margin-bottom: 1.2em; }
.source-line--quote { margin: 1.1em 0; padding-left: 16px; border-left: 1px solid var(--rule); }
.speaker-label { display: block; margin-bottom: 6px; font-size: 12px; line-height: 1.45; letter-spacing: .07em; color: #62717c; font-weight: 600; }
.quote-text { display: block; }
.source-line--record { font-family: "Batang", "Noto Serif KR", serif; font-size: clamp(19px,1.55vw,24px); font-weight: 600; line-height: 1.8; margin: 1.25em 0; }
.source-line--visual-hold { max-width: 31ch; margin-top: clamp(44px,6svh,84px); margin-bottom: .62em; font-size: clamp(20px,1.58vw,25px); line-height: 1.82; font-weight: 500; letter-spacing: -.042em; }
.source-line--visual-hold + .source-line--visual-hold { margin-top: -.22em; }
.beat--hold .beat-copy { padding-top: 64px; padding-bottom: 64px; }
.beat--notebook-state:not(.beat--callback) .beat-copy { min-height: 56svh; padding-top: 72px; padding-bottom: 84px; }
.chapter--signature .narrative-track { background: #ebe9e1; }
.chapter--signature .scene-kicker { color: var(--blue); }
.chapter--signature .source-line--record { border-left: 2px solid #8193a1; padding-left: 16px; }
.beat--callback .beat-copy { padding-top: 48px; padding-bottom: 50px; }
.record-moment { min-height: max(220px,24svh); }
.memory-moment { min-height: max(300px,32svh); padding-top: 32px; padding-bottom: 44px; }
.memory-moment > .source-line, .memory-echo { opacity: var(--memory-ink,1); }
.record-echo { color: #405467; margin-bottom: 24px; }
.record-echo .echo-line { font-family: "Batang", "Noto Serif KR", serif; font-size: 22px; line-height: 1.7; }
.moment-label { display: block; margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .15em; }
.memory-echo { margin-bottom: 32px; padding-left: 18px; border-left: 1px solid #8f9a9b; }
.echo-line { margin: 0 0 14px; font-size: 18px; line-height: 1.85; }
.reduced-memory { display: none; }
.opening-composition { position: absolute; inset: 0; padding: 14svh 9%; background: #e6e3d9; display: flex; flex-direction: column; justify-content: center; }
.opening-title { white-space: pre-line; font-size: clamp(44px,5.4vw,86px); line-height: 1.28; letter-spacing: -.07em; font-weight: 500; margin: 0; }
.opening-rule { width: 46px; height: 1px; background: var(--blue); margin: 48px 0; transform: scaleX(calc(.7 + var(--opening-progress,0)*.3)); transform-origin: left; }
.opening-sentence { white-space: pre-line; font-size: clamp(18px,1.5vw,24px); line-height: 1.8; margin: 0; color: #5c6569; }
[data-scene="S16"] .beat-copy { padding-top: 62px; padding-bottom: 62px; }
[data-scene="S16"] .beat--hold .source-line--quote { padding-block: 18px; }
[data-scene="S17"] .beat-copy { padding-block: 72px; }
[data-scene="S18"] .beat-copy { padding-block: 78px; }
.beat--ending .beat-copy { min-height: 82svh; display: flex; flex-direction: column; justify-content: center; padding-block: 60px 15svh; }
.beat--ending .source-line { font-size: clamp(22px,2vw,32px); line-height: 1.85; font-weight: 500; letter-spacing: -.05em; margin: 0; }
.story-credit { margin-top: clamp(76px,12svh,156px); padding: 28px clamp(28px,4.1vw,78px) max(34px,env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); color: var(--muted); background: var(--paper); font-size: clamp(12px,.9vw,14px); line-height: 1.6; letter-spacing: .01em; }
.noscript-note { padding: 40px; line-height: 1.8; }
@media (min-width: 761px) {
  .chapter--opening { grid-template-columns: 43% 57%; }
  .chapter--visual-dominant { grid-template-columns: 68% 32%; }
  .chapter--text-dominant { grid-template-columns: 43% 57%; }
  .chapter--visual-right { grid-template-columns: 42% 58%; }
  .chapter--visual-right > .desktop-visual { grid-column: 2; grid-row: 1; }
  .chapter--visual-right > .narrative-track { grid-column: 1; grid-row: 1; }
  .chapter--text-dominant > .narrative-track { box-shadow: inset -1px 0 0 var(--rule); }
  .chapter--visual-right > .narrative-track { box-shadow: inset -1px 0 0 var(--rule); }
}
@media (min-width: 1700px) { .chapter { grid-template-columns: 59% 41%; } .beat-copy { padding-inline: clamp(64px,5vw,140px); } }
@media (max-width: 1000px) and (min-width: 761px) { .chapter { grid-template-columns: 51% 49%; } .beat-copy { padding-inline: 28px; } .source-line { font-size: 18px; } }
@media (max-width: 760px) {
  .story-site-header{min-height:56px;padding-inline:16px;gap:10px}.story-site-header nav{display:none}.story-header-actions{gap:9px}.story-header-actions>a{font-size:12px}.story-brand span{font-size:13px}
  .chapter { display: block; }
  .desktop-visual { display: none; }
  .mobile-visual { display: block; position: sticky; top: 0; z-index: 10; height: min(38svh,300px); width: 100%; }
  .visual-canvas--empty { display: none; }
  .sound-toggle { top: max(10px,env(safe-area-inset-top)); right: 12px; min-height: 44px; padding: 8px 12px; font-size: 12px; }
  .beat-copy, .scene:first-child .beat:first-child .beat-copy { padding: 30px 24px 42px; min-height: 0; }
  .source-line { font-size: 17px; line-height: 1.88; margin-bottom: 1.1em; }
  .source-line--title { font-size: 36px; margin-block: 55px 44px; }
  .source-line--record { font-size: 20px; }
  .source-line--visual-hold { max-width: none; margin-top: 52px; font-size: 20px; line-height: 1.84; }
  .scene-kicker { margin-bottom: 28px; font-size: 11px; }
  .speaker-label { font-size: 12px; }
  .moment-label { font-size: 11px; }
  .notebook-writing { font-size: 22px; top: 34%; left: 24%; width: 44%; line-height: 1.42; }
  .notebook-writing[data-page] { top: 23%; left: 24%; height: 60%; width: 52%; }
  .notebook-writing[data-page] .paper-record--page { line-height: 1.06; letter-spacing: -.085em; }
  .notebook-writing[data-page="march-eleven"] [data-record-source="509"] { top: 36%; left: 5%; }
  .receipt-writing { font-size: 21px; line-height: 1.45; }
  .canvas-folio { left: 16px; bottom: 12px; font-size: 10px; }
  .record-moment { min-height: 220px; }
  .memory-moment { min-height: 300px; padding-top: 28px; padding-bottom: 56px; }
  .beat--image-change .beat-copy, .beat--hold .beat-copy { min-height: 320px; }
  .beat--callback .beat-copy { padding-top: 30px; padding-bottom: 24px; }
  .record-echo .echo-line { font-size: 20px; }
  .echo-line { font-size: 17px; }
  .beat--hold .beat-copy, [data-scene="S16"] .beat-copy, [data-scene="S17"] .beat-copy, [data-scene="S18"] .beat-copy { padding: 38px 24px 48px; }
  .beat--notebook-state:not(.beat--callback) .beat-copy { min-height: 420px; padding: 52px 24px 60px; }
  .beat--ending .beat-copy { min-height: 58svh; padding: 38px 24px 70px; }
  .beat--ending .source-line { font-size: clamp(21px,5.1vw,29px); }
  .story-credit { margin-top: 68px; padding: 24px 24px max(30px,env(safe-area-inset-bottom)); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter { display: block; }
  .desktop-visual { display: none; }
  .mobile-visual { display: block; position: relative; height: min(55svh,480px); width: 100%; }
  .visual-canvas--empty { display: none; }
  .beat-copy { min-height: 0; width: min(100%,760px); margin-inline: auto; }
  .record-moment, .memory-moment { min-height: 0; }
  .memory-moment { padding-block: 24px; }
  .memory-moment > .source-line, .memory-echo { opacity: 1; }
  .reduced-memory { display: block; position: relative; margin: 0 0 26px; height: min(60svh,520px); overflow: hidden; }
  .reduced-memory .art-plane { width: auto; height: 100%; }
  .reduced-memory img { object-position: 50% 52%; }
  .notebook-writing { font-size: 27px; }
  .beat--ending .beat-copy { min-height: 55svh; }
}
.visual-run { display: contents; }
.correction-word { position: relative; display: inline-block; }
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .visual-run { display: block; position: relative; } }
@media (max-width: 760px) { .visual-run { overflow-x: clip; } }
.memory-moment > .source-line, .memory-echo { opacity: var(--memory-ink,0); }
.record-moment { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .record-moment, .memory-moment > .source-line, .memory-echo { opacity: 1 !important; } }
/* Keep handwriting registered to the paper as the complete image fits the frame. */
.notebook-writing { font-size: 4.6cqw; }
.opening-caption { position: absolute; top: 44%; left: 8%; width: 76%; margin: 0; color: #f4efe5; font-family: "Batang", "Noto Serif KR", serif; font-size: max(10px,4.5cqw); line-height: 1.55; letter-spacing: -.045em; text-shadow: 0 1px 2px rgb(0 0 0 / 25%); }
.memory-moment > .source-line, .memory-echo { opacity: 1; }

/* A quiet paper control, kept outside the narrative layout. */
.audio-control { position: fixed; z-index: 50; top: max(16px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); width: 220px; padding: 5px 12px 4px; border: 1px solid #b8aa94; border-radius: 6px; background: #f4efe5 url('./assets/ui/audio-paper.png') center / cover; color: #433a30; box-shadow: 0 2px 7px rgb(55 43 30 / 8%); }
.audio-control .sound-toggle { position: static; width: 100%; min-height: 36px; justify-content: flex-start; padding: 4px 0; border: 0; border-radius: 2px; background: transparent; font-size: 12px; }
.audio-control .sound-toggle:hover { background: rgb(110 87 57 / 5%); }
.volume-control { display: flex; align-items: center; gap: 8px; min-height: 38px; border-top: 1px solid rgb(87 66 41 / 15%); font-size: 11px; }
.volume-control label { flex: 0 0 auto; }
.volume-value { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
#story-volume { --volume-fill: 23%; appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
#story-volume::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right,#79644a 0 var(--volume-fill),#cbbda8 var(--volume-fill) 100%); }
#story-volume::-moz-range-track { height: 3px; border-radius: 2px; background: #cbbda8; }
#story-volume::-moz-range-progress { height: 3px; background: #79644a; }
#story-volume::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 1px solid #705b41; border-radius: 50%; background: #f8f1e3; }
#story-volume::-moz-range-thumb { width: 12px; height: 12px; border: 1px solid #705b41; border-radius: 50%; background: #f8f1e3; }
#story-volume:focus-visible { outline: 2px solid #756553; outline-offset: 2px; border-radius: 3px; }
.volume-summary { display: none; }
.story-credit { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.story-credit .story-view-count { flex-shrink: 0; color: #746b5e; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .audio-control { top: max(10px,env(safe-area-inset-top)); right: 12px; width: 112px; padding-inline: 10px; }
  .audio-control:has(.volume-settings[open]) { width: 200px; }
  .audio-control .sound-toggle { min-height: 40px; }
  .volume-control { min-height: 40px; gap: 6px; }
  #story-volume { height: 36px; }
  .volume-summary { display: flex; min-height: 38px; align-items: center; gap: 6px; border-top: 1px solid rgb(87 66 41 / 15%); cursor: pointer; font-size: 11px; list-style: none; }
  .volume-summary::-webkit-details-marker { display: none; }
  .volume-summary-value { margin-left: auto; font-variant-numeric: tabular-nums; }
  .volume-summary:focus-visible { outline: 2px solid #756553; outline-offset: 2px; }
}