:root{
  --night:#07080f;
  --ink:#0c0f1d;
  --gold:#d9b877;
  --gold-soft:rgba(217,184,119,.42);
  --mist:#a3abc9;
  --text:#efe9f6;
  --panel:rgba(9,11,22,.52);
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--night);color:var(--text);overflow:hidden}
body{font-family:"Gowun Batang","Nanum Myeongjo","AppleMyungjo","Batang",serif;-webkit-font-smoothing:antialiased}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
.veil{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 42%,rgba(0,0,0,0) 50%,rgba(3,4,10,.62) 100%)}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.top{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
     padding:calc(14px + env(safe-area-inset-top,0px)) 20px 0;pointer-events:none}
.top>*{pointer-events:auto}
.mark{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:24px;letter-spacing:.04em;color:var(--gold);line-height:1}
.mark small{font-family:"Gowun Batang",serif;font-style:normal;font-size:12px;letter-spacing:.24em;color:var(--mist);margin-left:10px;vertical-align:3px}
.chap{margin-top:8px;font-size:14px;color:var(--mist);display:flex;gap:10px;align-items:baseline;opacity:0;transition:opacity .8s}
.chap .no{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-variant-numeric:tabular-nums;color:var(--gold)}
.chap .ti{color:var(--text);letter-spacing:.06em}
body.open .chap{opacity:1}
.toggles{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:60vw}
.tg{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(163,171,201,.28);
    background:var(--panel);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:border-color .3s,opacity .3s,color .3s}
.tg svg{width:15px;height:15px;flex:none}
.tg:hover{border-color:var(--gold-soft)}
.tg[aria-pressed="false"]{opacity:.5}
.tg[aria-pressed="true"]{color:#f6ecd4}

.caption{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none}
.caption p{max-width:34em;margin:0;text-align:center;font-size:clamp(16px,1.75vw,21px);line-height:1.8;color:#f6f1fb;word-break:keep-all;
     text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 22px rgba(6,8,20,.95),0 0 44px rgba(6,8,20,.8);transition:opacity .55s ease,transform .55s ease}
.caption p.out{opacity:0;transform:translateY(6px)}

.nav{position:fixed;left:0;right:0;bottom:0;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:16px;
     opacity:0;pointer-events:none;transition:opacity .8s}
body.open .nav{opacity:1;pointer-events:auto}
body.closing .nav,body.closing .chap,body.closing .caption{opacity:0;pointer-events:none}
body.open .cover{opacity:0;pointer-events:none}
body.open .caption{display:flex}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-soft);background:var(--panel);color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:border-color .3s,opacity .3s}
.arrow svg{width:18px;height:18px}
.arrow:hover{border-color:var(--gold)}
.arrow:disabled{opacity:.25;cursor:default}
.dots{display:flex;gap:2px;align-items:center}
.dot{width:20px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(239,233,246,.28);transition:background .4s,box-shadow .4s,transform .4s}
.dot:hover::before{background:rgba(239,233,246,.6)}
.dot.on::before{background:var(--gold);box-shadow:0 0 10px var(--gold);transform:scale(1.35)}
.count{display:none;font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:4.2em;text-align:center}
.home{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px 0 13px;border-radius:999px;border:1px solid rgba(163,171,201,.3);background:var(--panel);
      font-size:13.5px;letter-spacing:.06em;cursor:pointer;transition:border-color .3s;margin-right:4px}
.home svg{width:17px;height:17px}
.home:hover{border-color:var(--gold-soft)}
body.en .caption p{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(18px,2vw,24px);line-height:1.55;font-weight:500}
body.en .chap .ti{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-style:italic;letter-spacing:.02em}
body.en .eyebrow{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:17px;letter-spacing:.12em}
body.en .open-btn{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;letter-spacing:.2em}
.again{height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--gold);background:var(--panel);color:var(--gold);letter-spacing:.14em;cursor:pointer}

.cover{position:fixed;left:16px;right:16px;bottom:calc(34px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:opacity .8s}
.eyebrow{margin:0;font-size:14px;letter-spacing:.3em;color:var(--mist)}
.open-btn{font-size:17px;letter-spacing:.34em;padding:15px 30px 15px 38px;border:1px solid var(--gold);color:var(--gold);background:rgba(10,12,24,.6);border-radius:999px;cursor:pointer;
          box-shadow:0 0 34px rgba(217,184,119,.18);transition:box-shadow .4s,background .4s}
.open-btn:hover{box-shadow:0 0 44px rgba(217,184,119,.36);background:rgba(24,22,30,.7)}
.open-btn:disabled{opacity:.4;cursor:wait}
.hint{margin:0;font-size:13px;color:var(--mist);line-height:1.6;word-break:keep-all}
.credit{margin:0;font-size:11.5px;color:rgba(163,171,201,.7);max-width:40em;line-height:1.7;word-break:keep-all}
.note{position:fixed;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));font-size:12.5px;color:var(--mist);background:var(--panel);
      border:1px solid rgba(163,171,201,.2);padding:7px 14px;border-radius:999px;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}

.loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--night);color:var(--mist);font-size:15px;letter-spacing:.24em;transition:opacity 1.2s}
.loading.gone{opacity:0;pointer-events:none}

@media (max-width:640px){
  .dots{display:none}
  .count{display:block}
  .tg span{display:none}
  .tg.tg-lang span{display:inline}
  .home{padding:0 13px 0 11px;margin-right:0}
  .nav{gap:10px}
  .tg{padding:0 10px}
  .top{padding-left:16px;padding-right:16px}
  .mark small{display:none}
  .caption{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .caption p,.chap,.nav,.cover,.loading{transition:none}
}