:root{--ink:#e9dcc6;--ink-soft:#bfae92;--ink-dim:#a8977f;--brass:#c9a25a;--brass-hi:#e0bb72;--brass-ink:#22160c;--bar:#120c08e0;--line:#ffdcaa1f;--wood:#2b1b11;--serif:"Gowun Batang", serif;--sans:"Noto Sans KR", sans-serif;--logo:"Cinzel", serif}*{box-sizing:border-box}html,body{background:var(--wood);height:100%;color:var(--ink);font-family:var(--sans);word-break:keep-all;-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}button{font:inherit;color:inherit}#app{position:fixed;inset:0}.wood{background-color:#2b1b11;background-image:repeating-linear-gradient(92deg,#0000 0,#0000001a 3px,#0000 7px,#ffdcaa09 12px,#0000 19px),repeating-linear-gradient(90deg,#0000002e 0,#0000 2px 240px)}.lamp{pointer-events:none;background:radial-gradient(60% 70% at 40% 48%,#ffc47833,#ffaa5a0f 55%,#0000006b 100%);position:absolute;inset:0}.bar{background:var(--bar);z-index:10;border-bottom:1px solid #ffdcaa1a;align-items:center;gap:12px;height:56px;padding:0 16px 0 20px;display:flex;position:absolute;top:0;left:0;right:0}.logo{font-family:var(--logo);letter-spacing:.16em;color:#efe2c6;cursor:pointer;white-space:nowrap;background:0 0;border:0;align-items:center;gap:4px;padding:0;font-size:15px;font-weight:600;line-height:1;display:inline-flex}.logo svg{flex-shrink:0;transform:rotate(-8deg)}.bar-mid{flex:1;justify-content:center;align-items:center;gap:16px;min-width:0;display:flex;overflow:hidden}.bar-title{font-family:var(--serif);white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.bar-artist{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;max-width:220px;margin-left:-6px;font-size:13px;overflow:hidden}.progress{background:#ffe6be1f;border-radius:3px;flex-shrink:0;width:220px;height:6px}.progress i{background:linear-gradient(90deg,#c39a4f,#e0bb72);border-radius:3px;width:0;height:6px;transition:width .4s;display:block}.count{color:#d9c7a6;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.tools{border-right:1px solid #ffdcaa24;align-items:center;gap:2px;margin-right:6px;padding-right:8px;display:flex}.tb{min-width:40px;height:40px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 9px;font-size:12px;display:inline-flex;position:relative}.tb:hover{background:#ffe6be14}.tb.on{color:#f0d9a8;background:#c9a25a38}.tb[disabled]{color:#e9dcc661;cursor:default}.tb b{font-variant-numeric:tabular-nums;font-weight:700}[data-tip]:after{content:attr(data-tip);color:#2b1c0c;white-space:nowrap;opacity:0;pointer-events:none;z-index:30;background:#f3ead8;border-radius:6px;padding:6px 10px;font-size:12px;transition:opacity .12s .25s;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 6px 16px #0006}[data-tip]:hover:after{opacity:1}[data-tip-left]:after{left:0;right:auto}.lid-tab[data-tip]:after{top:50%;right:calc(100% + 8px);transform:translateY(-50%)}.table{position:absolute;inset:0}.table canvas{display:block;position:absolute;inset:0}.table.pan canvas{cursor:grab}.table.panning canvas{cursor:grabbing}.table.zoom canvas{cursor:zoom-in}.table.hint canvas{cursor:help}.lid{z-index:8;transform:translateX(var(--lid-w));pointer-events:none;align-items:flex-start;transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;right:0}.lid.open{transform:none}.lid-tab{pointer-events:auto;width:28px;height:64px;color:var(--brass-hi);cursor:pointer;background:#24170ef0;border:1px solid #ffdcaa38;border-right:0;border-radius:9px 0 0 9px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0;display:flex;position:relative;box-shadow:-4px 6px 12px #0006}.lid-tab .chev{transition:transform .28s}.lid.open .lid-tab .chev{transform:rotate(180deg)}.lid-box{pointer-events:auto;background:#ece2cf;border-radius:4px 0 0 4px;padding:6px 0 6px 6px;box-shadow:-16px 18px 32px #0009}.lid-img{cursor:pointer;background-position:50%;background-size:cover;position:relative;overflow:hidden}.lid-img:before{content:"";background:#140d0840;position:absolute;inset:0}.lid-view{box-shadow:0 0 0 2px var(--brass-hi), 0 0 0 3px #0006;cursor:move;background:#fff0d21f;position:absolute}.gauze{z-index:9;cursor:pointer;-webkit-backdrop-filter:blur(16px)saturate(.85)brightness(.92);background:repeating-linear-gradient(0deg,#f5e8d212 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#f5e8d20f 0 1px,#0000 1px 3px),linear-gradient(112deg,#fff2dc29 0%,#1e140c1a 18%,#fff2dc21 34%,#1e140c24 52%,#fff2dc1f 70%,#1e140c1a 86%,#fff2dc26 100%) 0 0/200% 100%;animation:14s ease-in-out infinite alternate gauze;display:none;position:absolute;inset:56px 0 0}.gauze.on{display:block}.gauze span{color:#e9dcc6bf;letter-spacing:.04em;font-size:12px;position:absolute;bottom:16px;right:20px}@keyframes gauze{0%{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,100% 0}}@media (prefers-reduced-motion:reduce){.gauze{animation:none}}.panel{z-index:20;background:#160e09f0;border:1px solid #ffdcaa1f;border-radius:14px;position:absolute;box-shadow:0 18px 40px #00000073}.menu{width:260px;padding:8px;display:none;top:62px;right:12px}.menu.on{display:block}.menu button{cursor:pointer;text-align:left;background:0 0;border:0;border-radius:9px;justify-content:space-between;align-items:center;width:100%;height:42px;padding:0 12px;font-size:14px;display:flex}.menu button:hover{background:#ffe6be12}.tog{background:#ffe6be29;border-radius:12px;flex-shrink:0;width:40px;height:24px;position:relative}.tog:after{content:"";background:var(--ink);border-radius:50%;width:18px;height:18px;transition:left .15s;position:absolute;top:3px;left:3px}.tog.on{background:var(--brass)}.tog.on:after{background:var(--brass-ink);left:19px}.sep{background:var(--line);height:1px;margin:6px 4px}.done{text-align:center;width:min(440px,100% - 32px);padding:30px 30px 24px;display:none;top:50%;left:50%;transform:translate(-50%,-50%)}.done.on{display:block}.done .lab{letter-spacing:.14em;color:var(--brass);font-size:12px;font-weight:700}.done .time{font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:6px 0 2px;font-size:54px;font-weight:700}.done .when{color:var(--ink-soft);font-size:13px}.done .art{font-family:var(--serif);margin:22px 0 4px;font-size:18px}.done .credit{color:var(--ink-soft);font-size:12px;line-height:1.6}.done .credit a{color:var(--brass)}.btn{height:44px;font:500 15px var(--sans);cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 22px;display:inline-flex}.btn-main{background:var(--brass);color:var(--brass-ink)}.btn-main:hover{background:#d8b36c}.btn-sub{color:var(--ink);background:0 0;box-shadow:inset 0 0 0 1px #ffdcaa47}.btn-sub:hover{background:#ffe6be12}.btns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;display:flex}.loading{color:var(--ink-soft);z-index:5;pointer-events:none;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;inset:56px 0 0}.shelf{padding:26px 32px 60px;position:absolute;inset:56px 0 0;overflow:auto}.shelf h2{font-family:var(--serif);align-items:baseline;gap:12px;margin:30px 0 4px;font-size:20px;font-weight:400;display:flex}.shelf h2 small{font-family:var(--sans);color:var(--ink-dim);letter-spacing:.04em;font-size:12px}.row{flex-wrap:wrap;gap:26px 22px;padding:18px 0 30px;display:flex;position:relative}.row:after{content:"";background:linear-gradient(#6b4a2c,#4a321d 55%,#2e1f12);border-radius:2px;height:18px;position:absolute;bottom:0;left:-12px;right:-12px;box-shadow:0 10px 18px #0000008c,inset 0 1px #ffdcaa2e}.pbox{cursor:pointer;text-align:left;background:#ece2cf;border:0;width:150px;margin-bottom:16px;padding:7px 7px 0;transition:transform .15s;position:relative;box-shadow:5px 5px #4a3420,6px 7px #1a110a,0 14px 18px #00000073}.pbox:hover{transform:translateY(-3px)}.pbox .art{background-position:50%;background-size:cover;width:100%;height:108px}.pbox .foot{color:#2b2016;letter-spacing:.04em;justify-content:space-between;align-items:center;gap:6px;height:24px;font-size:10px;font-weight:700;display:flex}.pbox .foot span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pbox .mark{display:none;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.pbox.sel .mark{display:block}.pbox .ring{background:conic-gradient(var(--brass) var(--p), #0000008c 0);border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:flex;position:absolute;top:12px;right:12px}.pbox .ring:after{content:"";background:#1d130c;border-radius:50%;width:20px;height:20px}.today{width:230px}.today .art{height:170px}.info{z-index:6;background:linear-gradient(#3a2716,#2a1b10);border-left:1px solid #ffdcaa24;width:360px;padding:22px;transition:transform .25s;position:absolute;top:56px;bottom:0;right:0;overflow:auto;transform:translate(100%);box-shadow:-10px 0 30px #00000073}.info.on{transform:none}.info .art{aspect-ratio:4/3;background-color:#00000040;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:4px;width:100%}.info h3{font-family:var(--serif);margin:16px 0 2px;font-size:21px;font-weight:400}.info .who{color:var(--ink-soft);font-size:13px}.chips{flex-wrap:wrap;gap:6px;margin:12px 0 2px;display:flex}.chip{height:22px;color:var(--ink-soft);background:#ffe6be14;border-radius:11px;align-items:center;padding:0 9px;font-size:12px;font-weight:700;display:inline-flex}.lv-easy{color:#9fd6b8;background:#408c6838}.lv-normal{color:#e6c78a;background:#c9a25a38}.lv-hard{color:#f0a594;background:#be503c40}.pcs{grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 8px;display:grid}.pcopt{cursor:pointer;background:#00000040;border:0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:64px;font-size:16px;font-weight:700;display:flex;box-shadow:inset 0 0 0 1px #ffdcaa24}.pcopt small{color:var(--ink-dim);font-size:10px;font-weight:500}.pcopt.on{box-shadow:inset 0 0 0 2px var(--brass);background:#c9a25a38}.pcopt[disabled]{opacity:.3;cursor:default}.info .btns{justify-content:stretch}.info .btns .btn{flex:1}.src{color:var(--ink-dim);margin-top:18px;font-size:11px;line-height:1.6}.src a{color:var(--ink-soft)}.devnote{color:var(--ink-dim);font-size:11px;position:absolute;top:18px;right:18px}.lv{flex-shrink:0;align-items:center;gap:1px;display:inline-flex;position:relative}.lv svg{display:block}.pbox .lv:after{top:calc(100% + 6px);right:-7px}.lvchip{background:#00000040}.lvchip .lv svg path[fill^=rgba]{fill:#ffe6be29}.pcnote{z-index:12;color:var(--ink-soft);white-space:nowrap;pointer-events:none;background:#100a06cc;border:1px solid #ffdcaa24;border-radius:999px;padding:6px 12px;font-size:12px;display:none;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}@media (width<=760px){.bar-mid .progress,.bar-mid .bar-artist{display:none}.bar-title{font-size:14px}.pcnote{display:block}.shelf{padding:18px 16px 60px}.info{width:100%}.devnote{margin-bottom:4px;position:static}}@media (width<=520px){.bar-mid{display:none}}