@font-face { font-family: "Griun Popcorn"; src: url(fonts/griun-popcorn-title.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
/* Layout: a quiet white boutique page with small centred type, opened by one full-bleed illustration from an old picture book. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --soft: #6b6b6b;
  --tile: #efefef;
  --rule: #d9d9d9;
  --sepia: #2a1b12;
  --parch: #ffe9a8;
  --seal: #d9261c;
  --on-art: #ffffff;
  --type: "Google Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--type); font-weight: 400; font-size: 14px; line-height: 20px; word-break: keep-all; overflow-wrap: anywhere; }
:where(body, body *) { letter-spacing: -.03em; }
.bar-in, .bar-in * { letter-spacing: 0; }
.mark *, .t-head * { letter-spacing: inherit; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #2f7fb5; outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar-in { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 12px; line-height: 18px; }
.mark { margin: 0; font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.bar-in > span { white-space: nowrap; }
.bar-r { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 430px) { .bar-in { gap: 8px; font-size: 10px; line-height: 14px; } .mark { font-size: 15px; letter-spacing: .08em; } }

/* The illustration */
.stage { position: relative; overflow: hidden; filter: saturate(.9); background: linear-gradient(#123f73, #1c6f8e 45%, #2f6b3c 62%, #2f6b3c); color: var(--on-art); }
#paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-in { position: relative; padding-bottom: 28px; display: grid; justify-items: center; gap: 8px; }
#wheel { display: block; width: min(100%, max(330px, calc((100svh - 236px) * .882))); height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
#wheel.dragging { cursor: grabbing; }
#wheel.locked { cursor: default; }
.ink { stroke: #2a1b12; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wood { stroke: #e08f2e; fill: none; stroke-linecap: round; }
.leg { fill: #c9701f; stroke: #2a1b12; stroke-width: 2; stroke-linejoin: round; }
.hatch { stroke: #2a1b12; stroke-width: 1; opacity: .5; }
.spark { fill: #fff3b8; stroke: #2a1b12; stroke-width: .7; opacity: .35; transition: opacity .5s; }
.hub1 { fill: #ffe9a8; stroke: #2a1b12; stroke-width: 2; }
.hub2 { fill: #12a7b5; stroke: #2a1b12; stroke-width: 1.6; }
.hub3 { fill: #d9261c; stroke: #2a1b12; stroke-width: 1.6; }

.cabin { --c: #f3e7c8; --w: #e7d9b4; }
.cabin.lit { --c: var(--tone); --w: #fff6b4; }
.c-paint { fill: var(--c); stroke: #2a1b12; stroke-width: 2.5; stroke-linejoin: round; transition: fill .6s; }
.c-win { fill: var(--w); stroke: #2a1b12; stroke-width: 1.2; transition: fill .6s; }
.c-bar { stroke: #2a1b12; stroke-width: 1.5; stroke-linecap: round; }
.c-cream { fill: #fbf1d8; }
.c-stripe { fill: var(--c); transition: fill .6s; }
.cabin:not(.lit) .c-stripe { fill: #e3d3a8; }
.c-out { fill: none; stroke: #2a1b12; stroke-width: 2.5; }
.c-year { fill: #2a1b12; font-family: var(--type); font-weight: 500; font-size: 15px; text-anchor: middle; pointer-events: none; }
.c-plate { fill: #fbf1d8; stroke: #2a1b12; stroke-width: 1; }
.c-ring { fill: none; stroke: #fff6c8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 8; opacity: 0; }
.c-hit { fill: transparent; }
.cabin.selected .c-ring { opacity: 1; }
.cabin.blank .c-paint, .cabin.blank .c-win { fill: rgba(251, 241, 216, .35); }
.cabin.blank .c-stripe, .cabin.blank .c-cream, .cabin.blank .c-bar { opacity: 0; }
.cabin.flash .c-glow { animation: flash 1.5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes flash { 0% { transform: scale(.4); opacity: 1; } 40% { transform: scale(2); opacity: 1; } 100% { transform: scale(1); } }
#wheel.all-lit .spark { opacity: 1; animation: chase 1.4s linear infinite; animation-delay: calc(var(--n) * -60ms); }
@keyframes chase { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.stage-copy { position: relative; padding-top: 5px; padding-inline: 16px; text-align: center; display: grid; gap: 6px; text-shadow: 0 1px 8px rgba(8, 24, 20, .85); }
.stage-title, h2 { font-family: "Griun Popcorn", var(--type); font-synthesis: none; }
.stage-title { margin: 0; font-size: clamp(21.6px, 2.7vw, 28.8px); line-height: 1.17; font-weight: 500; font-variant-numeric: tabular-nums; }
.stage-sub { margin: 0; font-size: 12.6px; line-height: 16px; }
.stage-actions { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.boardbtn { min-height: 44px; padding: 10px 22px; background: #ffffff; border: 0; border-radius: 10px; color: var(--sepia); font-weight: 500; font-size: 14px; line-height: 18px; text-shadow: none; white-space: nowrap; }
.boardbtn:hover { background: var(--parch); }
.tri { flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; display: grid; place-items: center; }
.tri i { display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.tri-l { border-right: 16px solid #ffffff; }
.tri-r { border-left: 16px solid #ffffff; }
.tri:hover i { opacity: .75; }

/* White pages */
.mission { padding-block: 22px 0; display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.mission-copy { margin: 0; }
.ticks { width: min(100%, 480px); display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
.ticks i { display: block; height: 3px; background: var(--rule); transition: background .4s; }
.ticks i.on { background: var(--ink); }
.finale { margin: 0; padding: 10px 16px; background: var(--ink); color: var(--paper); font-weight: 500; text-align: center; }
.panel { padding-block: 34px 48px; scroll-margin-top: 72px; }
.view { display: grid; gap: 36px; }
.block { display: grid; gap: 16px; justify-items: center; text-align: center; min-width: 0; }
h2 { margin: 0; font-size: 20px; line-height: 25px; font-weight: 500; }
.tiles { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.tile { flex: 0 1 calc(50% - 1px); min-height: 136px; padding: 16px 12px; background: var(--tile); display: grid; align-content: center; justify-items: center; gap: 4px; }
.tile .m { font-size: 12px; line-height: 18px; color: var(--soft); font-variant-numeric: tabular-nums; }
.tile .t { font-weight: 500; line-height: 18px; }
.tile .role { font-size: 12px; line-height: 18px; color: var(--soft); }
/* Paper card: name, photo, show, date */
.tiles.cards { justify-content: flex-start; align-items: stretch; gap: 10px; }
.tiles.cards.one { justify-content: center; }
.tiles.cards .tile { flex: 0 0 calc((50% - 5px) * .85); }
@media (max-width: 767px) {
  .tiles.cards { display: grid; grid-template-columns: repeat(2, calc((50% - 5px) * .85)); justify-content: center; }
  .tiles.cards.one { grid-template-columns: calc((50% - 5px) * .85); }
  .tiles.cards .tile { width: 100%; }
}
.tiles.cards[hidden] { display: none; }
@media (min-width: 768px) {
  .tiles.cards { justify-content: center; gap: 11px; }
  .tiles.cards.many { justify-content: flex-start; }
  .tiles.cards .tile { flex-basis: calc(20% - 8.8px); }
}
.tile.badge { container-type: inline-size; padding: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background: #f5f5f1; border: 1px solid #dcdbd5; box-shadow: 0 1px 4px rgba(40, 35, 25, .14); }
.idcard, .idcard * { letter-spacing: 0; }
.idcard { width: 100%; box-sizing: border-box; padding: 9cqw 10cqw 10cqw; color: #222222; font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-synthesis: none; text-align: center; display: grid; justify-items: center; }
.id-name { position: relative; top: 3px; min-height: 34.6cqw; display: grid; align-content: center; font-size: 16cqw; line-height: 1.08; text-transform: uppercase; white-space: nowrap; }
.id-name span { display: block; }
.id-photo.empty { background: #e9e8e2; }
.id-photo { display: block; width: 100%; aspect-ratio: 1; margin-top: 5cqw; object-fit: cover; border: 1px solid #4a4a4a; }
.id-show { position: relative; top: 1px; margin-top: 5cqw; font-size: 9cqw; line-height: 1.15; text-transform: uppercase; }
.id-date { margin-top: 2cqw; font-size: 6.6cqw; line-height: 1.2; color: #555555; }
.empty-year { margin: 0; max-width: 42ch; color: var(--soft); }
.quote { margin: 0; max-width: 46ch; display: grid; gap: 8px; justify-items: center; }
.quote p { margin: 0; font-size: 16px; line-height: 24px; }
.by { font-size: 12px; line-height: 18px; color: var(--soft); }
.textlink { padding: 8px 0; background: none; border: 0; font-weight: 500; line-height: 16px; }
.textlink span { padding-bottom: 3px; border-bottom: 1px solid currentColor; }

.narrow { width: min(100%, 460px); margin: 0 auto; display: grid; gap: 18px; }
.narrow > * { min-width: 0; }
.head { display: grid; gap: 6px; text-align: center; }
.sub { margin: 0; color: var(--soft); line-height: 18px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 12px; line-height: 18px; color: var(--soft); }
textarea, input[type="text"] { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-size: 16px; line-height: 22px; }
textarea { min-height: 96px; resize: vertical; }
.flabel { font-size: 12px; line-height: 18px; color: var(--soft); }
.narrow > .field { grid-template-columns: minmax(0, 1fr); }
.avwrap { display: flex; align-items: center; gap: 4px; min-width: 0; }
.avcol { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.avpick { min-width: 0; display: flex; flex-wrap: nowrap; gap: 12px; padding: 6px 4px 8px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: none; }
.avpick::-webkit-scrollbar { display: none; }
.avbar { position: relative; height: 12px; margin-inline: 4px; touch-action: none; cursor: pointer; }
.avthumb { position: absolute; top: 2px; left: 0; height: 8px; min-width: 28px; background: #e4e4e4; border: 1px solid #c8c8c8; border-radius: 4px; cursor: grab; }
.avnav { display: none; flex: none; width: 28px; height: 44px; padding: 0; background: none; border: 0; place-items: center; }
.avnav i { display: block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.tri-d-l { border-right: 12px solid var(--ink); }
.tri-d-r { border-left: 12px solid var(--ink); }
@media (hover: hover) and (pointer: fine) { .avnav { display: grid; } }
.avopt { flex: none; scroll-snap-align: start; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: var(--tile); overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; }
.avopt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avopt[aria-checked="true"] { outline-color: var(--ink); }
.who { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.who img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.count { justify-self: end; color: var(--soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.err { margin: 0; color: #b3003c; font-size: 12px; line-height: 18px; }
.solid { width: 100%; min-height: 48px; padding: 12px 16px; background: var(--ink); color: var(--paper); border: 0; font-weight: 500; line-height: 16px; }
.center { justify-self: center; }

.letter { justify-self: center; width: 200px; padding: 0; border: 0; background: none; display: block; }
.letter svg { display: block; width: 100%; height: auto; }

#v-ticket { margin-top: 24px; }
.t-stage { padding: 8px 16px; background: none; }
@media (max-width: 520px) { .t-stage { margin-inline: -16px; } }
.ticket { position: relative; width: 100%; aspect-ratio: 1866 / 1000; container-type: inline-size; color: #1c1a17; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28)); letter-spacing: 0; }
.tk-paper { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tk-no, .tk-since { position: absolute; top: 10.6cqw; margin: 0; font-family: "Share Tech Mono", var(--type); font-size: 3.1cqw; line-height: 1; letter-spacing: .04em; }
.tk-no { left: 13.66cqw; } .tk-since { left: 74.3cqw; }
.tk-val { position: absolute; top: 39.6cqw; height: 8cqw; margin: 0; display: flex; align-items: center; font-weight: 500; font-size: 3cqw; line-height: 1.12; letter-spacing: -.02em; }
.tk-nick { left: calc(9cqw + 5px); width: calc(24cqw - 5px); }
.tk-span { left: 35.6cqw; width: 20cqw; }
.tk-nick .who { display: flex; align-items: center; justify-content: flex-start; gap: 1cqw; min-width: 0; }
.tk-nick .who img { width: 5.5cqw; height: 5.5cqw; border-radius: 50%; object-fit: cover; flex: none; }
.tk-nick .who span { min-width: 0; word-break: break-all; }
.stamp { position: absolute; left: 55.5cqw; top: 35.9cqw; width: 12cqw; aspect-ratio: 1; border: .5cqw solid #a32410; border-radius: 50%; color: #a32410; display: grid; place-content: center; text-align: center; font-size: 1.9cqw; line-height: 1.2; font-weight: 500; letter-spacing: -.03em; transform: rotate(-14deg); mix-blend-mode: multiply; }
.stamp[hidden] { display: none; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.code-row .solid { width: auto; }
.ok { margin: 0; text-align: center; font-weight: 500; }


@media (min-width: 768px) {
  .tile { flex-basis: calc(25% - 1px); min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #wheel.all-lit .spark { opacity: 1; }
}

/* torn notebook page */
.note { --k: 1; position: relative; padding: calc(38px * var(--k)) calc(16px * var(--k)) calc(18px * var(--k)) calc(58px * var(--k)); font-family: "Gowun Dodum", var(--type); color: #2c2622; }
.note canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.note > *:not(canvas) { position: relative; }
.note textarea, .note input[type="text"] { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; font-family: inherit; font-size: 16px; line-height: 32px; letter-spacing: -.03em; }
.note textarea { height: 160px; resize: none; overflow: hidden; }
.note input::placeholder { color: #8d887a; opacity: 1; }
.note .sign { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(8px * var(--k)); align-items: baseline; }
.note .sign label, .note .from { font-size: calc(14px * var(--k)); line-height: calc(32px * var(--k)); color: #6b665b; }
.note-text { margin: 0; min-height: calc(96px * var(--k)); font-size: calc(16px * var(--k)); line-height: calc(32px * var(--k)); }
.block > .note { width: min(100%, 460px); text-align: left; }
.note.read .sign { align-items: center; }
.note.read .from { line-height: calc(28px * var(--k)); height: calc(32px * var(--k)); }
.note-by { min-width: 0; font-size: calc(14px * var(--k)); line-height: calc(32px * var(--k)); color: #4a443b; }
.note-by .who { display: flex; justify-content: flex-start; align-items: center; height: calc(32px * var(--k)); }
.note-by .who img { width: 25.2px; height: 25.2px; transform: translateY(calc(-5px * var(--k))); }
@media (max-width: 430px) {
  .block > .note, .narrow > .note { --k: .9; width: 90%; justify-self: center; }
  .narrow > .count { margin-right: 5%; }
  /* Inputs stay 16px in layout and are scaled down, so iPhone Safari does not zoom in when they get focus. */
  .note textarea, .note input[type="text"] { width: 111.12%; transform: scale(.9); transform-origin: 0 0; }
  .note input[type="text"] { margin-bottom: -3.2px; }
  #noteWrite .sign { align-items: start; }
}
.narrow > .count { margin-top: -12px; }
/* sunset oil-painting treatment */
.stage{filter:none;background:#44709f}
#wheel{overflow:visible;outline:none;-webkit-tap-highlight-color:transparent}
#wheel:focus,#wheel:focus-visible{outline:none}
#wheel:focus-visible .cabin.selected .c-ring{stroke:#ffffff;stroke-width:3.4}
.ink{stroke:rgba(74,48,66,.3)}
.wood{stroke:#f3dcc6}
.leg{fill:url(#legG);stroke:rgba(74,48,66,.35);stroke-width:1}
.hatch{display:none}
.spark{fill:#fff0c0;stroke:none}
.hub1{fill:#f0dcc4;stroke:rgba(74,48,66,.4);stroke-width:1.2}
.hub2{fill:#a84a45;stroke:rgba(74,48,66,.35);stroke-width:1}
.hub3{fill:#96302f;stroke:rgba(74,48,66,.35);stroke-width:1}
.c-paint{stroke:rgba(70,42,58,.62);stroke-width:1.5}
.c-out{stroke:rgba(70,42,58,.62);stroke-width:1.5}
.c-win{stroke:rgba(70,42,58,.42);stroke-width:1}
.c-bar{stroke:rgba(70,42,58,.6);stroke-width:1.3}
.c-plate{fill:#f9edd6;stroke:none}
.c-year{fill:#3d2314;font-family:"Rubik Bubbles","Google Sans",sans-serif;font-weight:400;font-size:18px;letter-spacing:.2px;paint-order:stroke;stroke:#fbf1dc;stroke-width:2.6px;stroke-linejoin:round}
.cabin{--c:#ecdcc0;--w:#dccdb0}
.cabin.lit{--w:#ffe7a0}
.c-ring{stroke:#fff0c0;stroke-width:2.4}
[hidden] { display: none !important; }
.center { text-align: center; }
.mission .textlink.center:not([hidden]) { display: block; margin: 10px auto 0; }
.load-err[hidden], #saveErr[hidden], #capReview[hidden] { display: none; }
.load-err { margin: 10px 0 0; color: var(--soft); font-size: 12px; }
button[disabled] { opacity: .55; cursor: progress; }