:root{--bg: #0b1020;--glass: rgba(10, 14, 30, .72);--line: rgba(255, 255, 255, .14);--text: #f1f5f9;--sub: #b6c2d4;--accent: #22d3ee;--pin: #ff3da6}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}#app{position:fixed;top:0;right:0;bottom:0;left:0}button{font:inherit;color:inherit}svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}.hidden{display:none!important}.stage{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;cursor:grab}.stage:active{cursor:grabbing}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.bar-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.overlay>*{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform}.st-ring{border-radius:50%;border:2.5px solid rgba(34,211,238,.95);background:#22d3ee2e;box-shadow:0 0 14px #22d3ee8c;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .15s}.st-ring span{font-size:11px;font-weight:700;text-shadow:0 1px 3px #000}.st-ring:hover,.st-ring.cur{background:#22d3ee73}.pin{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;color:var(--pin);cursor:pointer;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}.pin svg{width:30px;height:30px}.pin-label{margin-top:2px;font-size:12px;font-weight:600;color:#fff;background:#0009;padding:2px 7px;border-radius:6px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}.pin.tag{color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:7px;background:color-mix(in srgb,var(--c) 80%,#000 20%);border:1.5px solid var(--c);white-space:nowrap}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:10px;padding:max(12px,env(safe-area-inset-top)) 16px 26px;background:linear-gradient(to bottom,rgba(5,8,20,.78),transparent);pointer-events:none}.ttl{flex:1;min-width:0}.ttl-main{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttl-sub{font-size:12.5px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tb-right{display:flex;gap:8px;pointer-events:auto}.tb-btn,.x-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--glass);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.x-btn{width:32px;height:32px;background:transparent;border:0}.bottombar{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:8px;align-items:center;padding:6px;border-radius:14px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100vw - 24px)}.bottombar:empty{display:none}.bb-group{display:flex;align-items:center;gap:2px}.bb-btn{height:40px;min-width:40px;border-radius:10px;border:0;background:#ffffff14;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:0 10px}.bb-btn:hover{background:#ffffff29}.bb-btn.wide span{font-size:13.5px;font-weight:600;white-space:nowrap}.bb-label{font-size:13px;font-weight:600;min-width:84px;text-align:center;white-space:nowrap}.card{position:absolute;right:16px;top:76px;width:340px;max-height:calc(100% - 170px);overflow-y:auto;background:#0a0e1eeb;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 12px 36px #00000080;-webkit-user-select:text;-moz-user-select:text;user-select:text}.card-head{display:flex;align-items:center;gap:8px}.card-title{flex:1;font-size:16px;font-weight:700}.card-memo{font-size:14px;line-height:1.6;color:#dbe4f0;white-space:pre-wrap;margin-top:8px}.card-media{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.card-media img{width:100%;aspect-ratio:4 / 3;-o-object-fit:cover;object-fit:cover;border-radius:8px;cursor:zoom-in}.card-media video,.card-media audio{width:100%;grid-column:1 / -1;border-radius:8px}.file-link{grid-column:1 / -1;color:var(--accent);font-size:13px;word-break:break-all}.card-go{margin-top:12px;width:100%;height:40px;border-radius:10px;border:1px solid rgba(34,211,238,.5);background:#22d3ee24;color:var(--accent);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;cursor:pointer}.drawer{position:absolute;left:50%;transform:translate(-50%);bottom:76px;width:min(360px,calc(100vw - 24px));max-height:50vh;overflow-y:auto;background:#0a0e1ef0;border:1px solid var(--line);border-radius:14px;padding:8px}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px;font-weight:700}.drawer-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left;font-size:14px}.drawer-item:hover{background:#ffffff14}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.lightbox{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000e0;display:flex;align-items:center;justify-content:center;z-index:30;cursor:zoom-out}.lightbox img{max-width:94%;max-height:90%;border-radius:6px}.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#050814cc;border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:14px;line-height:1.8;text-align:center;pointer-events:auto;max-width:calc(100vw - 32px)}.wm{position:absolute;right:12px;bottom:10px;font-size:11px;color:#ffffff8c;pointer-events:none}.cover{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#0b1020 center / cover no-repeat;transition:opacity .6s}.cover:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0508148c}.cover.gone{opacity:0;pointer-events:none}.cover-box{position:relative;text-align:center;padding:24px;max-width:520px}.cover-title{font-size:clamp(22px,5vw,32px);font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.6)}.cover-sub{font-size:15px;color:#dbe4f0;margin-top:8px}.start-btn{margin:26px auto 0;display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;border:0;background:var(--accent);color:#04111a;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 8px 26px #22d3ee73}.start-btn svg{width:22px;height:22px}.cover-info{margin-top:14px;font-size:13px;color:var(--sub)}.progress{margin:22px auto 0;width:240px;height:6px;border-radius:3px;background:#ffffff2e;overflow:hidden}.progress-fill{height:100%;width:0;background:var(--accent);transition:width .2s}.cover-msg{margin-top:10px;font-size:13px;color:var(--sub);min-height:18px}.fatal{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:15px}@media (max-width: 640px){.card{left:12px;right:12px;width:auto;top:auto;bottom:76px;max-height:55vh}.ttl-main{font-size:15px}.bb-btn.wide span{display:none}.bb-label{min-width:70px;font-size:12px}}.crosshair{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px #00000073;pointer-events:none;z-index:20}