@font-face{font-family:'Black Han Sans';src:url('/fonts/BlackHanSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url('/fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{font-family:Pretendard,sans-serif;font-synthesis:none;color:#f6efdf;background:#8e2939;--paper:#f6efdf;--ink:#f6efdf;--red:#f6efdf;--muted:#e6d4cc;--wine:#8e2939;--focus:#f6efdf}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,.reader-image:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
::selection{background:#f6efdf;color:#8e2939}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:20px;background:var(--red);color:var(--paper);padding:14px 20px;z-index:100}
.skip:focus{top:16px}

.header,.footer{width:calc(100% - 104px);margin-inline:auto;position:relative;z-index:4}
.header{height:88px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:4px;font-family:'Black Han Sans',sans-serif;font-size:27px;line-height:1;letter-spacing:.01em;color:var(--red)}
.brand-ticker{font-family:Pretendard,sans-serif;font-size:12px;font-weight:650;letter-spacing:.06em;color:#edcb67}
.header nav{display:flex;gap:32px;align-items:center}
.header nav button{min-height:44px;font-size:14px;padding:0;line-height:1.4}
.header nav button:hover{color:var(--red)}
.short-label{display:none}

/* The accepted character framing and stage dimensions are unchanged from v5. */
.hero{position:relative;isolation:isolate;flex:1;min-height:490px;height:calc(100svh - 186px);overflow:clip}
.document-ground{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
/* Low resting contrast is intentional: authentic document atmosphere, requested by the user.
   Keep native aspect ratios and sharp glyphs. Menu focus reveals each source more clearly. */
.document{position:absolute;width:auto;max-width:none;mix-blend-mode:screen;filter:grayscale(1) invert(1);object-fit:contain;transition:opacity 180ms cubic-bezier(.23,1,.32,1);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 74%,transparent),linear-gradient(transparent,#000 12%,#000 76%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 74%,transparent),linear-gradient(transparent,#000 12%,#000 76%,transparent);
  -webkit-mask-composite:source-in;
}
.bitcoin{height:92%;left:-1%;top:50%;opacity:.105;transform:translateY(-50%)}
.eonhae{height:90%;right:0;top:50%;opacity:.072;transform:translate(40%,-50%);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 94%,transparent),linear-gradient(transparent,#000 8%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 94%,transparent),linear-gradient(transparent,#000 8%,#000 85%,transparent)}
.hero-character{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-character canvas{display:block;width:100%;height:100%;opacity:0}
.hero-character canvas[data-ready=true]{opacity:1}
.loading{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:14px;color:var(--muted);margin:0;white-space:nowrap}
.loading[hidden]{display:none}
.footer{min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-shrink:0}
.footer>p{font-size:27px;font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.35;word-break:keep-all}
.footer .story-trigger{min-width:126px;min-height:48px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;font-size:15px;font-weight:650;color:var(--wine);background:var(--paper);border-radius:7px}

body:has(.header [data-open=bitcoin]:focus-visible) .bitcoin{opacity:.19}
body:has(.header [data-open=hunmin]:focus-visible) .eonhae{opacity:.14}
@media(hover:hover) and (pointer:fine){
  body:has(.header [data-open=bitcoin]:hover) .bitcoin{opacity:.19}
  body:has(.header [data-open=hunmin]:hover) .eonhae{opacity:.14}
}

dialog{--paper:#f0f1ec;--ink:#292724;--red:#962c39;--muted:#626057;--focus:#8e2939;border:0;border-radius:12px;width:min(980px,calc(100% - 32px));padding:25px 28px;max-height:calc(100dvh - 32px);background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #29272424;overflow:auto}
dialog::backdrop{background:#29272485}
.reader-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.reader-head h2{font-size:22px;font-weight:650;margin:0;letter-spacing:-.025em}
.icon-close{width:44px;height:44px;border-radius:6px;display:grid;place-items:center}
.icon-close:hover{background:#e3e4dc}
.reader-tabs{display:flex;gap:21px;margin:15px 0 4px}
.reader-tabs button{min-height:44px;padding:0 2px;color:var(--muted);font-size:13px;border-bottom:2px solid transparent}
.reader-tabs button[aria-pressed=true]{border-bottom-color:var(--red);color:var(--red)}
.reader-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;padding:7px 0 16px;color:var(--muted)}
.reader-toolbar p{flex:1;margin:0;min-width:200px;line-height:1.7}
.reader-toolbar button,.reader-toolbar a{min-height:44px;display:inline-flex;align-items:center;font-size:13px;white-space:nowrap}
.reader-toolbar a:hover{color:var(--red)}
.reader-image{max-height:65dvh;overflow:auto;overscroll-behavior:contain;text-align:center;background:#e3e4dc;padding:25px;scrollbar-color:#a4a598 #e3e4dc}
.reader-image img{display:block;max-width:100%;height:auto;width:640px;background:white;margin:auto}
.reader-image.zoomed img{max-width:none;width:1500px}
.source-body{font-size:15px;line-height:1.85;padding:10px 0 16px;color:var(--muted);max-width:70ch}
.source-body h3{font-size:15px;color:var(--ink);margin:24px 0 6px}
.source-body p{margin:7px 0 12px}
.source-body a{text-decoration:underline;text-underline-offset:4px}

@media(min-width:1700px){
  .header,.footer{width:calc(100% - 144px)}
  .footer>p{font-size:30px}
  .bitcoin{left:4%}.eonhae{right:4%}
}
@media(max-width:800px){
  .header,.footer{width:calc(100% - 48px)}
  .header{height:76px}.brand{font-size:24px}
  .header nav{gap:20px}.header nav button{font-size:12px}
  .hero{height:calc(100svh - 170px);min-height:460px}
  .footer{min-height:94px}.footer>p{font-size:23px}
  .bitcoin{height:86%;left:-14%;opacity:.10}.eonhae{height:87%;right:0;opacity:.068}
  .reader-toolbar p{min-width:100%}.reader-image{padding:12px}dialog{padding:18px 16px}.reader-head h2{font-size:20px}
}
@media(max-width:480px){
  .header,.footer{width:calc(100% - 36px)}
  .header{height:72px}.brand{font-size:21px;gap:3px}.brand-ticker{font-size:10px}
  .header nav{gap:16px}.header nav button{font-size:11px}
  .hero{height:calc(100svh - 180px);min-height:450px}
  .footer{min-height:108px;align-items:center;justify-content:space-between;flex-direction:row;gap:16px;padding-block:12px}
  .footer>p{font-size:20px}.footer .story-trigger{font-size:13px;min-height:46px;min-width:110px;padding:12px 16px}
  .full-label{display:none}.short-label{display:inline}
  .bitcoin{height:83%;left:-49%;top:47%;opacity:.105}
  .eonhae{height:84%;right:0;top:49%;opacity:.072;transform:translate(60%,-50%)}
}
@media(max-height:680px) and (min-width:801px){
  .header{height:70px}.footer{min-height:76px}.hero{height:calc(100svh - 146px);min-height:390px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}