:root{
  --paper:#f6f1e6; --paper2:#fffdf7; --ink:#2b2a33; --ink2:#5d5a66; --line:#d9cfba;
  --yellow:#f2c94c; --yellow2:#fbe7a6; --blue:#2f4a7a; --wave:#7d8aa3; --ok:#3f8a5a; --no:#b5523b;
  --seen:#3f6fb0; --think:#b07a2a; --ask:#7a4fa8; --claim:#8a5a3c;
  --hand:"Gaegu",system-ui,sans-serif; --body:"Gowun Batang","Noto Serif KR",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--body);overscroll-behavior:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hidden{display:none!important}
#app{position:fixed;inset:0;max-width:560px;margin:0 auto;overflow:hidden;background:var(--paper)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}

/* 타이틀 */
#title{align-items:center;justify-content:center;text-align:center;padding:24px;
  background:radial-gradient(120% 80% at 50% 0%,#fff8e2 0,var(--paper) 60%)}
#title h1{font-size:40px;line-height:1.18;margin:14px 0 8px;letter-spacing:-1px}
.tt-sub{margin:0 0 30px;color:var(--ink2);font-size:16px}
.tt-btns{display:flex;flex-direction:column;gap:10px;width:min(280px,80vw)}
.tt-foot{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));font-size:12px;color:var(--ink2);opacity:.7}
.tt-umb{width:120px;height:120px;position:relative}
.tt-umb::before{content:"";position:absolute;left:6px;right:6px;top:18px;height:56px;background:var(--yellow);
  border-radius:60px 60px 8px 8px;border:3px solid var(--ink);clip-path:polygon(0 100%,0 40%,10% 10%,50% 0,90% 10%,100% 40%,100% 100%,83% 82%,66% 100%,50% 82%,33% 100%,17% 82%);
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.06)}
.tt-umb::after{content:"";position:absolute;left:57px;top:70px;width:4px;height:38px;background:var(--ink);border-radius:2px;
  box-shadow:-6px 34px 0 -1px var(--ink)}

.btn{display:block;width:100%;padding:13px 16px;border-radius:14px;font-size:18px;font-weight:700;background:var(--paper2);
  border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.main{background:var(--yellow)}
.btn.ghost{background:transparent;border-style:dashed;box-shadow:none}
.btn[disabled]{opacity:.45}

/* 본편 */
#bar{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;border-bottom:1px solid var(--line);background:var(--paper)}
#barTitle{flex:1;min-width:0;text-align:center;line-height:1.15}
#barTitle small{display:block;font-size:12px;color:var(--ink2)}
#barTitle b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ico{width:42px;height:42px;border-radius:12px;font-size:20px;position:relative}
.ico:active{background:#0001}
.dot{position:absolute;right:6px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--no)}
#log{flex:1;overflow-y:auto;padding:14px 14px 24px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
#dock{padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.next{font-size:17px}

/* 로그 비트 */
.b{margin:0 0 12px;animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.b.n{font-size:16.5px;line-height:1.75;color:var(--ink)}
.b.scene{text-align:center;font-size:13px;color:var(--ink2);margin:20px 0 14px;letter-spacing:.5px}
.b.scene::before,.b.scene::after{content:"";display:inline-block;width:28px;height:1px;background:var(--line);vertical-align:middle;margin:0 8px}
.b.d{display:flex;gap:9px;align-items:flex-start}
.b.d.me{flex-direction:row-reverse}
.pt{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;border:2px solid var(--ink)}
.bub{max-width:80%;background:var(--paper2);border:1.5px solid var(--ink);border-radius:4px 14px 14px 14px;padding:7px 11px 8px;font-size:16.5px;line-height:1.6}
.me .bub{border-radius:14px 4px 14px 14px;background:#fff6d8}
.bub small{display:block;font-size:12px;color:var(--ink2);margin-bottom:1px;font-weight:700}
.b.d.wave .bub{border:1.5px dashed var(--wave);background:#eef1f6;color:#3b4560}
.b.d.wave .pt{filter:grayscale(.6);opacity:.8}
.b.note{font-family:var(--hand);font-size:20px;line-height:1.35;padding:6px 12px 6px 40px;position:relative;
  background:repeating-linear-gradient(#fffdf6 0 27px,#e8dfc8 27px 28px);border-left:3px solid #e9a3a3;border-radius:4px}
.b.note::before{position:absolute;left:8px;top:7px;font-size:13px;font-family:var(--body);font-weight:700;padding:1px 5px;border-radius:6px;color:#fff}
.b.note.seen::before{content:"봤다";background:var(--seen)}
.b.note.think::before{content:"생각";background:var(--think)}
.b.note.ask::before{content:"확인";background:var(--ask)}
.b.note.claim::before{content:"말";background:var(--claim)}
.b.card{border:2px solid var(--ink);border-radius:10px;background:#fff;padding:9px 12px 9px 46px;position:relative;font-size:15px;line-height:1.5;box-shadow:2px 3px 0 #0002}
.b.card::before{content:"🗂";position:absolute;left:12px;top:9px;font-size:22px}
.b.card small{display:block;color:var(--ink2);font-size:12px;margin-top:3px}
.b.card b{display:block;font-size:12px;color:var(--no);letter-spacing:.5px}
.b.obj{font-size:13.5px;color:var(--ink2);border:1.5px dashed var(--ink2);border-radius:8px;padding:6px 10px;background:#fbf7ec}
.b.res{font-size:14px;color:var(--ok);font-weight:700;text-align:center;padding:6px;border-radius:8px;background:#e9f3ec}
.b.end{border:2px solid var(--ink);border-radius:14px;background:var(--paper2);padding:16px;text-align:center;margin-top:20px}
.b.end h3{margin:0 0 6px;font-size:18px}
.b.end p{margin:6px 0 12px;color:var(--ink2);font-size:15px}
.b.end .stat{font-size:13px;color:var(--ink2);margin-bottom:12px}
.b.epcard{text-align:center;margin:8px 0 20px;padding:18px 10px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.b.epcard small{display:block;color:var(--ink2);font-size:13px}
.b.epcard h2{margin:6px 0;font-size:22px;line-height:1.35}
.b.partcard{text-align:center;padding:26px 10px;margin:4px 0 16px;background:var(--ink);color:var(--paper);border-radius:14px}
.b.partcard small{opacity:.75}.b.partcard h2{margin:6px 0 0;font-size:24px}

/* 시트(목록·수첩) */
.sheet{position:absolute;inset:0;z-index:20;background:#0006;display:flex;align-items:flex-end;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet-in{width:100%;max-height:92%;height:92%;background:var(--paper);border-radius:18px 18px 0 0;display:flex;flex-direction:column;animation:up .25s ease}
@keyframes up{from{transform:translateY(30px)}}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;font-size:18px}
.sheet-body{flex:1;overflow-y:auto;padding:4px 14px calc(16px + env(safe-area-inset-bottom))}
.lp{margin:14px 0 6px;font-size:13px;color:var(--ink2);font-weight:700}
.li{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:15px}
.li i{font-style:normal;width:34px;color:var(--ink2);font-size:13px}
.li.lock{opacity:.4}
.li.cur{background:#fff3c4;border-radius:8px}
#bookTabs{display:flex;gap:4px;padding:0 10px 6px;border-bottom:1px solid var(--line)}
#bookTabs button{flex:1;padding:8px 2px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink2)}
#bookTabs button.on{background:var(--ink);color:var(--paper)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.col h4{margin:0 0 6px;font-size:14px;text-align:center;color:#fff;border-radius:8px;padding:3px}
.col.seen h4{background:var(--seen)}.col.think h4{background:var(--think)}
.hl{font-family:var(--hand);font-size:17px;line-height:1.3;padding:4px 2px;border-bottom:1px solid #e8dfc8}
.hl small{font-family:var(--body);font-size:11px;color:var(--ink2);margin-right:4px}
.asks{margin-top:12px}.asks h4{background:var(--ask);color:#fff;border-radius:8px;padding:3px;text-align:center;font-size:14px;margin:0 0 6px}
.cardl{border:1.5px solid var(--ink);border-radius:9px;padding:8px 10px;margin:8px 0;background:#fff;font-size:14.5px;line-height:1.5}
.cardl small{display:block;color:var(--ink2);font-size:12px}
.objt{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.objt th,.objt td{border:1px solid var(--line);padding:6px 4px;text-align:center;vertical-align:top}
.objt th{background:#efe7d4;font-size:12px}
.objt td.p{background:#e3f1e6;font-weight:700}.objt td.c{background:#fff7dd}
.objt td.empty{color:#bbb}
.castl{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.empty-msg{color:var(--ink2);text-align:center;padding:30px 0;font-size:14px}

/* 실행 */
.act{position:absolute;inset:0;z-index:30;background:#1c1b22cc;display:flex;align-items:flex-end;animation:fade .2s}
.act-in{width:100%;max-height:94%;background:var(--paper);border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding:14px 14px calc(14px + env(safe-area-inset-bottom));animation:up .25s}
.act-hd{margin-bottom:10px}
.act-hd span{display:inline-block;font-size:12px;font-weight:700;background:var(--ink);color:var(--yellow);padding:2px 9px;border-radius:20px;margin-bottom:6px}
.act-hd b{display:block;font-size:17px;line-height:1.45}
#actBody{overflow-y:auto;flex:1;min-height:0}
.act-msg{min-height:0;font-size:14.5px;line-height:1.5;margin:8px 0 0;padding:0 4px}
.act-msg.no{color:var(--no)}.act-msg.ok{color:var(--ok);font-weight:700}
#actFoot{margin-top:10px;display:flex;gap:8px}
#actFoot .btn{font-size:16px;padding:11px}
.opt{display:block;width:100%;text-align:left;padding:11px 12px;margin:0 0 8px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);font-size:15.5px;line-height:1.45}
.opt.sel{background:var(--yellow2)}
.opt.ok{background:#dff0e3;border-color:var(--ok)}
.opt.no{background:#f7e1db;border-color:var(--no);opacity:.85}
.opt .why{display:block;font-size:13px;color:var(--no);margin-top:4px}
/* sort */
.srow{border:1.5px solid var(--ink);border-radius:12px;padding:9px 10px;margin-bottom:8px;background:var(--paper2)}
.srow p{margin:0 0 7px;font-size:15px;line-height:1.45}
.srow .bs{display:flex;gap:6px}
.srow .bs button{flex:1;padding:7px 2px;border-radius:9px;border:1.5px solid var(--ink2);font-size:13.5px;font-weight:700;background:#fff}
.srow .bs button.on{color:#fff;border-color:var(--ink)}
.srow.ok{border-color:var(--ok);background:#eef7f0}.srow.no{border-color:var(--no);background:#fbefeb}
.srow .why{font-size:13px;color:var(--no);margin-top:6px}
/* compare */
.doc{border:2px solid var(--ink);border-radius:10px;background:#fff;margin-bottom:10px;overflow:hidden}
.doc h5{margin:0;padding:6px 10px;background:#efe7d4;font-size:14px}
.doc button{display:flex;width:100%;text-align:left;border-top:1px solid var(--line);padding:9px 10px;font-size:14.5px;gap:8px;line-height:1.4}
.doc button span:first-child{flex:none;width:30%;color:var(--ink2)}
.doc button.sel{background:var(--yellow2)}
.doc button.ok{background:#dff0e3}
/* match */
.slot{border:1.5px solid var(--ink);border-radius:12px;padding:9px 10px;margin-bottom:8px;background:var(--paper2)}
.slot p{margin:0 0 6px;font-size:14.5px;font-weight:700}
.slot .bs{display:flex;flex-wrap:wrap;gap:6px}
.slot .bs button{padding:6px 10px;border-radius:20px;border:1.5px solid var(--ink2);font-size:13.5px;background:#fff}
.slot .bs button.on{background:var(--ink);color:#fff}
.slot.ok{border-color:var(--ok);background:#eef7f0}.slot.no{border-color:var(--no)}
.slot .why{font-size:13px;color:var(--no);margin-top:6px}
/* order */
.ord-done{min-height:44px;border:2px dashed var(--ink2);border-radius:12px;padding:6px;margin-bottom:10px}
.ord-done div{background:var(--yellow2);border-radius:8px;padding:7px 9px;margin:4px 0;font-size:14.5px}
.ord-done div i{font-style:normal;font-weight:700;margin-right:6px}
.ord-pool .opt{padding:9px 11px}
/* search */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.spot{min-height:64px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);padding:8px;font-size:14.5px;line-height:1.35;position:relative}
.spot.seen{background:#ece6d8;color:var(--ink2)}
.spot.seen::after{content:"✓";position:absolute;right:7px;top:4px;color:var(--ok);font-weight:700}
.spot-read{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.spot-read .b{margin-bottom:9px}
/* wave */
.wv{background:#1d1c24;border-radius:14px;padding:12px;color:#ece6d6}
.wv-top{display:flex;justify-content:space-between;font-size:12px;color:#b9b2a1;margin-bottom:8px}
.wv-screen{height:min(34vh,230px);border-radius:10px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#fff3c6 0,#f2c94c 35%,#c79a1f 70%,#6b5414 100%);display:flex;align-items:center;justify-content:center;padding:18px}
.wv-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,#0000 0 18px,#0000000d 18px 20px);animation:rain 1.4s linear infinite}
@keyframes rain{to{background-position:40px 0}}
.wv-screen.dim{background:radial-gradient(circle,#5a5446,#22201b)}
.wv-screen.k-cassette{background:radial-gradient(circle at 50% 40%,#e8e1d6,#9c8f7b 70%,#3a352d)}
.wv-screen.k-ticket{background:radial-gradient(circle at 50% 40%,#e3ecf0,#8fa6b0 70%,#2d3a40)}
.wv-screen.k-scissors{background:radial-gradient(circle at 50% 40%,#efe6ea,#a7909a 70%,#3a2d33)}
.wv-screen.k-key{background:radial-gradient(circle at 50% 40%,#dfe0e6,#80838f 70%,#22242b)}
.wv-text{position:relative;background:#fffdf5ee;color:#2b2a33;border-radius:10px;padding:10px 12px;font-size:15.5px;line-height:1.55;max-width:96%;text-align:center;box-shadow:0 2px 8px #0004;transition:opacity .35s}
.wv-text.voice{background:#eef1f6;border:1.5px dashed var(--wave)}
.wv-num{position:absolute;right:10px;bottom:8px;font-family:monospace;font-size:20px;color:#fff;text-shadow:0 1px 3px #000}
.wv-bar{height:8px;background:#ffffff22;border-radius:6px;margin:10px 0 8px;position:relative;cursor:pointer}
.wv-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--yellow);border-radius:6px}
.wv-bar b{position:absolute;top:-3px;width:3px;height:14px;background:#fff8;border-radius:2px}
.wv-ctl{display:flex;gap:8px}
.wv-ctl button{flex:1;padding:9px;border-radius:10px;background:#ffffff1a;color:#fff;font-size:15px;font-weight:700}
.wv-note{font-size:12.5px;color:#b9b2a1;margin-top:8px;text-align:center}
.wv-log{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink2);max-height:22vh;overflow-y:auto}
.wv-log div{padding:3px 0;border-bottom:1px dotted var(--line)}
.wv-log div i{font-style:normal;font-family:monospace;color:var(--ink);margin-right:6px}

#toast{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-10px);opacity:0;z-index:50;
  background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:20px;font-size:14px;transition:.25s;pointer-events:none;max-width:90%;text-align:center;line-height:1.45}
#toast.on{opacity:1;transform:translateX(-50%)}
.gl{text-decoration:underline dotted var(--think);text-underline-offset:4px;cursor:help}
.art{display:block;width:100%;border-radius:12px;margin:0 0 10px;border:1.5px solid var(--ink)}
.b.partcard .art{border-color:#0000;margin-bottom:12px;opacity:.92}
.b.artbox{margin:4px 0 14px}
.tt-art{width:min(230px,58vw);aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);margin-bottom:6px}
.tt-art img{width:100%;height:100%;object-fit:cover;display:block}
.tt-art:not(.none)+.tt-umb{display:none}
.tt-art.none{display:none}
#title h1{font-size:34px}