:root{--bg:#f3f2ef;--card:#fff;--tx:#1b1b1a;--tx2:#6b6a66;--tx3:#a3a19b;--line:rgba(0,0,0,.09);--dark:#1b1b1a;--ondark:#fff;--noise:none;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#121211;--card:#1d1d1c;--tx:#efeee9;--tx2:#a8a69f;--tx3:#6e6c66;--line:rgba(255,255,255,.1);--dark:#efeee9;--ondark:#121211;color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{padding-top:env(safe-area-inset-top);padding-bottom:calc(84px + env(safe-area-inset-bottom));overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 12px 4px 0;background:var(--bg)}
#bc{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:0 42%;height:38px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 84%,transparent)}
#bc::-webkit-scrollbar{display:none}
.cr{font-size:16px;color:var(--tx3);flex:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
.cr.cur{color:var(--tx);font-weight:600}
.cr.sel{text-decoration-line:underline;color:var(--tx2)}
.cr.sl{cursor:default}
.circ{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:.5px solid var(--line);flex:none;color:var(--tx)}
.circ .ic{width:16px;height:16px}
.circ.lg{width:42px;height:42px}
.circ.lg .ic{width:20px;height:20px}
.circ.dark{background:var(--dark);color:var(--ondark);border:0}

main{max-width:1280px;margin:0 auto}
.hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:14px 12px 7px}
.hd b{font-size:17px;font-weight:600;display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd b .ic{width:15px;height:15px;color:var(--tx3);stroke-width:2.2}
.hd small{font-size:12px;color:var(--tx3);flex:none}
.hd.nav b{cursor:pointer}
.row{display:flex;gap:6px;overflow-x:auto;padding:0 12px 2px;scrollbar-width:none;align-items:flex-start;scroll-padding:12px}
.row::-webkit-scrollbar{display:none}
.row.wrap{flex-wrap:wrap;overflow:visible}
.empty{font-size:13px;color:var(--tx3);padding:18px 12px;line-height:1.6}

.card{flex:none;position:relative;overflow:hidden;border-radius:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;color:#fff;transition:transform .12s}
.card:active{transform:scale(.98)}
.card.basic{background:var(--card);box-shadow:inset 0 0 0 .5px var(--line);color:var(--tx)}
.card.grain::after{content:'';position:absolute;inset:0;background-image:var(--noise);background-size:128px;mix-blend-mode:overlay;opacity:.4;pointer-events:none;z-index:1}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.card img.blur{filter:blur(12px) saturate(1.2);transform:scale(1.35)}
.card .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 48%);z-index:1}
.card .tt{position:absolute;left:8px;top:7px;right:7px;font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;z-index:2;word-break:keep-all;overflow-wrap:break-word}
.card .tt .ic{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:3px;stroke-width:2.2}
.card .dt{float:right;margin:1px 0 2px 5px;font-size:10px;line-height:1.25;font-weight:400;opacity:.62;font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.2px}
.card .sn{position:absolute;left:8px;right:8px;bottom:8px;font-size:11.5px;line-height:1.4;opacity:.75;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;z-index:2;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-line}
.card .cnt{position:absolute;left:8px;bottom:7px;font-size:11px;opacity:.65;z-index:2}
.card.folder .tt{right:7px}
.card .up{position:absolute;right:7px;bottom:7px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;z-index:2}

.ed-ov{position:absolute;inset:0;z-index:3;background:rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;pointer-events:none}
.ed-ov b{font-size:17px;font-weight:600}
.ed-ov span{font-size:11px;opacity:.85}
.hb,.hr{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;touch-action:none}
.hb{left:0;right:0;bottom:0;height:26px;cursor:ns-resize}
.hr{top:0;bottom:0;right:0;width:26px;cursor:ew-resize}
.hb i{width:26px;height:4px;border-radius:2px;background:#fff}
.hr i{width:4px;height:26px;border-radius:2px;background:#fff}
.edp{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 12px 2px;font-size:12px;color:var(--tx2)}
.edp .grp{display:flex;align-items:center;gap:6px}

.seg{display:inline-flex;background:var(--bg);border-radius:9px;padding:2px;flex:none}
.seg button{padding:5px 10px;border-radius:7px;font-size:13px;color:var(--tx2);white-space:nowrap}
.seg button.on{background:var(--card);color:var(--tx);box-shadow:0 0 0 .5px var(--line),0 1px 2px rgba(0,0,0,.06)}
.edp .seg{background:var(--card)}
.edp .seg button.on{background:var(--tx);color:var(--bg)}

.closed{display:flex;align-items:center;gap:6px;width:100%;padding:16px 12px 6px;font-size:14px;color:var(--tx2);text-align:left;border-top:.5px solid var(--line);margin-top:14px}
.closed .ic{width:14px;height:14px}
.dim{opacity:.55}
.addtab{display:flex;align-items:center;gap:6px;margin:18px 12px 0;font-size:13px;color:var(--tx3)}
.addtab .ic{width:14px;height:14px}

#bar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(0,0,0,0),var(--bg) 35%)}
@media (min-width:700px){#bar{left:50%;right:auto;width:640px;transform:translateX(-50%)}}
#inp{flex:1;min-width:0;resize:none;border:.5px solid var(--line);background:var(--card);color:var(--tx);border-radius:21px;padding:10px 16px;font:inherit;font-size:16px;line-height:1.35;height:42px;max-height:150px;outline:none}
#inp::placeholder{color:var(--tx3)}

#sheet{position:fixed;inset:0;z-index:20}
#sheet .scrim{position:absolute;inset:0;background:rgba(0,0,0,.32);animation:fi .15s}
#sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:90vh;max-height:90dvh;overflow:auto;background:var(--card);border-radius:18px 18px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;animation:su .2s ease-out;overscroll-behavior:contain}
@media (min-width:700px){#sheet .panel{bottom:auto;top:50%;transform:translateY(-50%);border-radius:18px;animation:fi .15s}}
@keyframes su{from{transform:translateY(30px);opacity:.4}}
@keyframes fi{from{opacity:0}}
.grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 10px}
.sh-t{font-size:17px;font-weight:600;margin:2px 0 8px}
.sr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:.5px solid var(--line);font-size:15px;min-height:48px}
.sr>span:first-child{flex:none;color:var(--tx)}
.sr .val{font-size:12px;color:var(--tx3);margin-left:6px}
.sws{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15);position:relative;overflow:hidden;flex:none}
.sw.on{outline:2px solid var(--tx);outline-offset:2px}
.sw.auto{background:conic-gradient(#D85A30,#BA7517,#0F6E56,#185FA5,#3C3489,#993556,#D85A30)}
.sw input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.sw.custom{display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.sw.custom .ic{width:12px;height:12px}
.btns{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:.5px solid var(--line)}
.btn{padding:9px 14px;border-radius:10px;background:var(--bg);font-size:14px}
.btn.pri{background:var(--dark);color:var(--ondark)}
.btn.danger{color:#d0453a}
.lnk{font-size:13px;color:var(--tx3);text-decoration:underline;text-underline-offset:3px}
.f{width:100%;font:inherit;font-size:16px;border:.5px solid var(--line);background:var(--bg);color:var(--tx);border-radius:10px;padding:10px 12px;outline:none}
textarea.f{resize:none;min-height:110px;line-height:1.55}
.f.title{font-weight:600;font-size:17px}
.dimg{width:100%;max-height:56vh;object-fit:contain;border-radius:12px;background:var(--bg);display:block;margin-bottom:10px}
.lk{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--bg);margin-bottom:10px;color:inherit;text-decoration:none}
.lk img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none}
.lk .m{flex:1;min-width:0}
.lk .m b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk .m small{font-size:12px;color:var(--tx2)}
.lk .ic{color:var(--tx3);flex:none}
.stack{display:flex;flex-direction:column;gap:8px}
.tree button{display:flex;align-items:center;gap:6px;width:100%;padding:11px 0;border-top:.5px solid var(--line);font-size:15px;text-align:left}
.tree button .dot{width:10px;height:10px;border-radius:50%;flex:none}
.tree button[disabled]{opacity:.3;cursor:default}
.res{display:block;width:100%;text-align:left;padding:10px 0;border-top:.5px solid var(--line)}
.res small{display:block;font-size:12px;color:var(--tx3);margin-bottom:2px}
.res b{font-size:15px;font-weight:500}
.hint{font-size:13px;color:var(--tx2);line-height:1.6;margin:4px 0 10px}

#toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--dark);color:var(--ondark);font-size:13px;padding:8px 14px;border-radius:18px;opacity:0;pointer-events:none;transition:.2s;z-index:30;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}