/* my little world — app styles (Notion-like editor) */
.page[style*="--page-pad"]>.phead,.page[style*="--page-pad"]>.blocks{padding-left:min(var(--page-pad),20vw);padding-right:min(var(--page-pad),20vw)}
.page[style*="--page-top"]>.phead{padding-top:var(--page-top)}
.page[style*="--block-gap"] .blk{margin-bottom:var(--block-gap)}
.blk:focus{outline:2px solid var(--accent);outline-offset:2px}
.page-drop{outline:2px dashed var(--accent);background:var(--accent-soft)}
.ti[draggable]{cursor:grab}
.spacing-field{display:block;margin:12px 16px}
:root{
  --bg:#F7F7F4; --bg2:#EEEEEA; --hover:rgba(28,30,34,.055); --press:rgba(28,30,34,.1);
  --ink:#1C1E22; --muted:#666A73; --faint:#A2A4AA; --line:rgba(28,30,34,.11); --line2:rgba(28,30,34,.2);
  --accent:#2F47B5; --accent-soft:rgba(47,71,181,.1); --sel:rgba(47,71,181,.16);
  --heart:#B8475F; --sheet:#FFFFFF; --side:#ECECE7; --paper:#FFFFFF;
  --c-gray:#7A7D85; --c-brown:#8C6A4F; --c-orange:#C4622D; --c-yellow:#A8841C; --c-green:#2F7A55; --c-blue:#2F5FA8; --c-purple:#7B55A6; --c-pink:#B8477A; --c-red:#C0413B;
  --b-gray:#E6E6E1; --b-brown:#EEE3D7; --b-orange:#F7E0CE; --b-yellow:#F4EAC2; --b-green:#DAEBE0; --b-blue:#DCE4F4; --b-purple:#E8DEF2; --b-pink:#F5DEE8; --b-red:#F6DCD9;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --serif:"Gowun Batang","Noto Serif KR",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141518; --bg2:#1E2025; --hover:rgba(255,255,255,.05); --press:rgba(255,255,255,.09);
  --ink:#ECEBE6; --muted:#A2A4AB; --faint:#6E7077; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
  --accent:#93A4F5; --accent-soft:rgba(147,164,245,.14); --sel:rgba(147,164,245,.26);
  --heart:#EE8AA0; --sheet:#22242A; --side:#1A1B1F; --paper:#1D1F24;
  --c-gray:#9EA1A8; --c-brown:#C29A7A; --c-orange:#E08A56; --c-yellow:#D4B04E; --c-green:#6CC39A; --c-blue:#7FA3E6; --c-purple:#B292DD; --c-pink:#E283AE; --c-red:#EA7B74;
  --b-gray:#2A2C31; --b-brown:#3B3029; --b-orange:#45301F; --b-yellow:#3F3820; --b-green:#1F3629; --b-blue:#1D2A45; --b-purple:#312640; --b-pink:#40243A; --b-red:#462625;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141518; --bg2:#1E2025; --hover:rgba(255,255,255,.05); --press:rgba(255,255,255,.09);
  --ink:#ECEBE6; --muted:#A2A4AB; --faint:#6E7077; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
  --accent:#93A4F5; --accent-soft:rgba(147,164,245,.14); --sel:rgba(147,164,245,.26);
  --heart:#EE8AA0; --sheet:#22242A; --side:#1A1B1F; --paper:#1D1F24;
  --c-gray:#9EA1A8; --c-brown:#C29A7A; --c-orange:#E08A56; --c-yellow:#D4B04E; --c-green:#6CC39A; --c-blue:#7FA3E6; --c-purple:#B292DD; --c-pink:#E283AE; --c-red:#EA7B74;
  --b-gray:#2A2C31; --b-brown:#3B3029; --b-orange:#45301F; --b-yellow:#3F3820; --b-green:#1F3629; --b-blue:#1D2A45; --b-purple:#312640; --b-pink:#40243A; --b-red:#462625;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- shell ---------- */
#root,#app{height:100%}
.shell{display:flex;height:100%}
.content{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.side{width:260px;flex:none;background:var(--side);border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:calc(var(--st) + 8px) 8px 24px;font-size:14px}
.side-scrim{display:none}
.side-head{display:flex;align-items:center;gap:8px;padding:4px 6px 10px;min-height:40px}
.side-head b{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:5px 8px;border-radius:6px;color:var(--muted);min-height:32px;position:relative}
.si svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.si span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si:hover,.ti:hover{background:var(--hover)}
.si.on,.ti.on{background:var(--press);color:var(--ink);font-weight:500}
.si.faint{color:var(--faint)}
.sbadge{margin-left:auto;background:var(--heart);color:#fff;border-radius:8px;font-size:10px;padding:0 5px;line-height:16px;font-weight:600}
.ss{font-size:12px;font-weight:600;color:var(--faint);padding:16px 8px 4px}
.tree{display:flex;flex-direction:column;gap:1px}
.ti{display:flex;align-items:center;gap:4px;padding-right:8px;min-height:30px;border-radius:6px;cursor:pointer;color:var(--muted)}
.tt{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;flex:none}
.tt:hover{background:var(--press)}
.tt svg{width:10px;height:10px;fill:var(--faint);transition:transform .15s}
.tt.open svg{transform:rotate(90deg)}
.tic{width:22px;text-align:center;flex:none}
.tl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-note{margin:18px 8px 0;font-size:12px;color:var(--faint)}
.only-narrow,.only-collapsed,.only-mobile{display:none!important}
@media (min-width:1100px){
  .tabs{display:none!important}
  body.side-collapsed .side{display:none}
  body.side-collapsed .only-collapsed{display:grid!important}
}
@media (max-width:1099px){
  .only-narrow{display:grid!important}.only-wide{display:none!important}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:36;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow);width:min(300px,84vw)}
  body.side-open .side{transform:none}
  body.side-open .side-scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(15,15,15,.3)}
}
@media (min-width:768px) and (max-width:1099px){.tabs{display:none!important}}
@media (max-width:767px){.only-mobile{display:grid!important}}
body.guest .side,body.guest .tabs,body.guest .only-narrow,body.guest .only-collapsed{display:none!important}
.topbar{flex:none;display:flex;align-items:center;gap:4px;padding:calc(var(--st) + 6px) 8px 6px;min-height:calc(48px + var(--st));background:var(--bg);position:relative;z-index:3}
.topbar .crumb{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:14px;padding:0 4px;white-space:nowrap;overflow:hidden}
.topbar .crumb span{overflow:hidden;text-overflow:ellipsis}
.cr{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;min-width:0;max-width:220px;flex-shrink:1}
button.cr:hover{background:var(--hover)}
.cr.cur{flex-shrink:0;max-width:60%}
.sl{color:var(--faint);flex:none}
@media (max-width:767px){.crumb .cr:not(.cur),.crumb .sl{display:none}}
.ib{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--muted)}
.ib:hover,.ib:active{background:var(--hover)}
.ib svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.save-dot{font-size:12px;color:var(--faint);padding:0 6px;white-space:nowrap}
.main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative}
.tabs{flex:none;display:flex;border-top:1px solid var(--line);background:var(--bg);padding-bottom:var(--sb)}
.tabs button{flex:1;padding:8px 0 6px;font-size:11px;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-current="page"]{color:var(--ink);font-weight:600}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--heart);color:#fff;font-size:10px;line-height:16px;font-weight:600}
@media (pointer:coarse){body.editing .tabs{display:none}}

/* ---------- page ---------- */
.page{padding:0 0 60px}
.page>.phead,.page>.blocks,.page>.tail{max-width:900px;margin-inline:auto}
.page>.react,.page>.visit-bar{max-width:856px;margin-inline:max(22px,calc((100% - 856px)/2))}
.page.wide>.phead,.page.wide>.blocks,.page.wide>.tail{max-width:none}
.page.wide>.react,.page.wide>.visit-bar{max-width:none;margin-inline:22px}
.tail{height:160px;cursor:text}
.visit-bar{margin:12px 22px 0;padding:8px 12px;border-radius:8px;background:var(--bg2);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page.font-serif .ptitle,.page.font-serif .blocks{font-family:var(--serif)}
.page.font-mono .ptitle,.page.font-mono .blocks{font-family:var(--mono);font-size:14px}
.cover{height:180px;background-size:cover;background-position:center;position:relative}
.cover-actions{position:absolute;right:12px;bottom:10px;display:flex;gap:6px}
.cover-actions button{background:rgba(255,255,255,.85);color:#37352F;border-radius:6px;font-size:12px;padding:4px 10px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.phead{padding:0 22px;position:relative}
.picon{font-size:64px;line-height:1;width:78px;height:78px;display:grid;place-items:center;border-radius:8px;margin-top:-40px;position:relative}
.picon.no-cover{margin-top:28px}
.picon:hover{background:var(--hover)}
.picon img{width:78px;height:78px;border-radius:8px;object-fit:cover}
.ptools{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0 2px;min-height:4px}
.ptools button{font-size:13px;color:var(--faint);padding:3px 8px;border-radius:6px}
.ptools button:hover{background:var(--hover);color:var(--muted)}
.ptitle{font-size:34px;font-weight:700;line-height:1.2;margin:6px 0 4px;outline:none;word-break:keep-all;overflow-wrap:anywhere}
.ptitle:empty::before{content:attr(data-ph);color:var(--faint)}
.props{margin:8px 0 4px;display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:8px}
.prop{display:flex;align-items:center;min-height:34px;font-size:14px}
.prop .k{width:108px;flex:none;color:var(--muted);display:flex;align-items:center;gap:6px}
.prop .k svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.prop .v{flex:1;min-width:0}
.prop select,.prop input{border:0;background:transparent;padding:4px 6px;border-radius:4px;width:100%;max-width:240px}
.prop select:hover,.prop input:hover{background:var(--hover)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:1px 8px;border-radius:4px;white-space:nowrap;line-height:1.6}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.vis-private{background:var(--b-gray);color:var(--c-gray)} .vis-friends{background:var(--b-blue);color:var(--c-blue)} .vis-public{background:var(--b-green);color:var(--c-green)}
.readonly-note{font-size:13px;color:var(--muted);padding:6px 22px 0}

/* ---------- blocks ---------- */
.blocks{padding:10px 22px 0 4px}
.blk{position:relative}
.row{display:flex;align-items:flex-start;position:relative;border-radius:4px}
.gut{display:flex;flex:none;align-self:stretch}
.plus{display:none}
.hdl{flex:none;width:18px;align-self:stretch;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;color:var(--faint);opacity:.35;touch-action:none;cursor:grab}
.hdl svg{width:12px;height:16px;fill:currentColor}
.row:hover>.gut>.hdl,.blk.focus>.row>.gut>.hdl{opacity:1}
.ro .hdl{visibility:hidden}
.body{flex:1;min-width:0;display:flex;align-items:flex-start;gap:4px;border-radius:4px}
.tx{flex:1;min-width:0;outline:none;padding:3px 2px;min-height:1.5em;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;caret-color:var(--ink)}
.tx:empty::before{content:attr(data-ph);color:var(--faint);pointer-events:none}
.tx:not(:focus):empty::before{content:""}
.blk.t-text .tx:focus:empty::before{content:"명령어는 ‘/’ 입력";}
.kids{padding-left:24px}
.t-h1 .tx{font-size:1.875em;font-weight:700;line-height:1.3;padding-top:.6em}
.t-h2 .tx{font-size:1.5em;font-weight:700;line-height:1.3;padding-top:.5em}
.t-h3 .tx{font-size:1.25em;font-weight:600;line-height:1.3;padding-top:.4em}
.mk{flex:none;width:24px;display:flex;justify-content:center;padding-top:3px;min-height:1.5em;user-select:none}
.mk.bullet::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin-top:.55em}
.kids .kids .mk.bullet::before{background:transparent;border:1.5px solid currentColor}
.mk.num{font-variant-numeric:tabular-nums;justify-content:flex-end;padding-right:4px}
.chk{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:3px;margin-top:.3em;display:grid;place-items:center}
.chk.on{background:var(--accent);border-color:var(--accent)}
.chk.on::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.t-todo.done .tx{color:var(--faint);text-decoration:line-through}
.tri{width:24px;height:1.5em;display:grid;place-items:center;border-radius:4px;margin-top:3px}
.tri svg{width:12px;height:12px;fill:var(--ink);transition:transform .15s}
.tri.open svg{transform:rotate(90deg)}
.toggle-empty{color:var(--faint);font-size:14px;padding:3px 2px 3px 24px;cursor:pointer}
.t-quote .body{border-left:3px solid currentColor;padding-left:12px;margin:4px 0}
.t-quote .tx{font-size:1.05em}
.t-callout .body{padding:14px 14px 14px 12px;border-radius:6px;margin:4px 0;background:var(--b-gray)}
.callout-ic{font-size:20px;line-height:1.2;width:28px;height:28px;display:grid;place-items:center;border-radius:4px;flex:none}
.callout-ic:hover{background:var(--hover)}
.t-divider .body{padding:10px 2px;width:100%}
.t-divider hr{border:0;border-top:1px solid var(--line2);width:100%;margin:0}
.t-image figure{margin:4px 0;width:100%}
.t-image img{max-width:100%;border-radius:4px;display:block}
.img-empty{width:100%;background:var(--bg2);border-radius:4px;color:var(--muted);font-size:14px;padding:14px;display:flex;align-items:center;gap:8px}
.img-empty svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.cap{font-size:14px;color:var(--muted);padding:6px 2px 0;outline:none;min-height:1.4em}
.cap:empty::before{content:"";}
.cap:focus:empty::before{content:"캡션 쓰기";color:var(--faint)}
.plink{display:flex;align-items:center;gap:6px;padding:3px 2px;width:100%;text-align:left;border-radius:4px}
.plink:hover{background:var(--hover)}
.plink .pi{width:22px;text-align:center;flex:none}
.plink .pt{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cols{display:grid;gap:12px;width:100%;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.col{min-width:0}
.col-empty{color:var(--faint);font-size:13px;padding:6px 4px;border:1px dashed var(--line2);border-radius:4px;text-align:center;cursor:pointer}
.blk.focus>.row>.body{background:transparent}
.blk.picked>.row{background:var(--sel)}
.blk.multi-selected{outline:2px solid var(--accent);outline-offset:-2px;background:var(--sel);border-radius:4px}
.block-marquee{position:fixed;pointer-events:none;z-index:1000;border:1px solid var(--accent);background:rgba(90,140,220,.18)}
.drop-line{position:absolute;left:18px;right:0;height:3px;background:var(--accent);opacity:.6;border-radius:2px;pointer-events:none;z-index:4}
.ghost{position:fixed;pointer-events:none;z-index:50;opacity:.75;background:var(--bg);box-shadow:var(--shadow);border-radius:4px;padding:4px 8px;max-width:70vw;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* colors */
.fc-gray{color:var(--c-gray)}.fc-brown{color:var(--c-brown)}.fc-orange{color:var(--c-orange)}.fc-yellow{color:var(--c-yellow)}.fc-green{color:var(--c-green)}.fc-blue{color:var(--c-blue)}.fc-purple{color:var(--c-purple)}.fc-pink{color:var(--c-pink)}.fc-red{color:var(--c-red)}
.bc-gray{background:var(--b-gray)}.bc-brown{background:var(--b-brown)}.bc-orange{background:var(--b-orange)}.bc-yellow{background:var(--b-yellow)}.bc-green{background:var(--b-green)}.bc-blue{background:var(--b-blue)}.bc-purple{background:var(--b-purple)}.bc-pink{background:var(--b-pink)}.bc-red{background:var(--b-red)}
.body.bc-gray,.body.bc-brown,.body.bc-orange,.body.bc-yellow,.body.bc-green,.body.bc-blue,.body.bc-purple,.body.bc-pink,.body.bc-red{padding-inline:4px}
.t-callout .body.bc-default{background:var(--b-gray)}
.tx code{font-family:var(--mono);font-size:85%;background:var(--hover);color:var(--c-red);padding:.1em .35em;border-radius:4px}
.tx a{color:inherit;text-decoration:underline;text-decoration-color:var(--line2)}

/* ---------- collections ---------- */
.t-gallery .body,.t-board .body{flex-direction:column;align-items:stretch;gap:0;width:100%}
.coll-head{display:flex;align-items:center;gap:6px;padding:10px 2px 6px;border-bottom:1px solid var(--line)}
.coll-title{font-size:1.25em;font-weight:700;outline:none;flex:1;min-width:0}
.coll-title:empty::before{content:"제목 없음";color:var(--faint)}
.coll-view{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px}
.coll-view svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.coll-add{font-size:13px;color:#fff;background:var(--accent);border-radius:4px;padding:3px 10px;font-weight:500}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:10px 0 4px}
.card{border-radius:6px;box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(15,15,15,.06);overflow:hidden;background:var(--bg);text-align:left;display:flex;flex-direction:column}
.card:hover{background:var(--bg2)}
.card .cv{aspect-ratio:16/10;width:100%;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.card .ci{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.card .ct{font-size:14px;font-weight:500;display:flex;gap:5px;align-items:center;min-width:0}
.card .ct span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .cm{display:flex;gap:4px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.gal-add{border-radius:6px;border:1px dashed var(--line2);color:var(--faint);font-size:14px;min-height:120px;display:grid;place-items:center}
.board{display:flex;gap:10px;overflow-x:auto;padding:10px 0 8px;scroll-snap-type:x proximity}
.lane{flex:0 0 236px;scroll-snap-align:start;border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:6px}
.lane-h{display:flex;align-items:center;gap:6px;font-size:13px;padding:2px 4px 4px}
.lane-h b{font-weight:500}
.lane-h .n{color:var(--muted)}
.bcard{background:var(--bg);border-radius:6px;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(15,15,15,.08);padding:8px 10px;text-align:left;font-size:14px;font-weight:500;display:flex;gap:6px;align-items:center}
.bcard:hover{background:var(--bg2)}
.lane-add{font-size:13px;color:var(--muted);text-align:left;padding:4px 6px;border-radius:4px}
.lane-add:hover{background:var(--hover)}
.lane.s0{background:var(--b-gray)} .lane.s1{background:var(--b-blue)} .lane.s2{background:var(--b-green)}
.st0{background:var(--b-gray);color:var(--c-gray)} .st1{background:var(--b-blue);color:var(--c-blue)} .st2{background:var(--b-green);color:var(--c-green)}
.empty-note{color:var(--faint);font-size:14px;padding:12px 2px}

/* ---------- reactions ---------- */
.react{margin:32px 22px 0;padding:14px;border-radius:8px;background:var(--bg2)}
.react h4{margin:0;font-size:14px}
.react .sub{font-size:12px;color:var(--muted)}
.emos{display:flex;gap:6px;margin-top:10px}
.emos button{flex:1;border-radius:10px;padding:8px 0;font-size:20px;line-height:1;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.emos button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--heart)}
.rlist{margin-top:8px}
.ritem{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px}

/* ---------- lists (friends/news) ---------- */
.screen{padding:4px 18px 40px;max-width:640px;margin:0 auto}
.screen h1{font-size:28px;margin:8px 0 14px}
.sect{font-size:12px;font-weight:600;color:var(--muted);margin:22px 0 4px}
.item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .grow{flex:1;min-width:0}
.item .sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.link{cursor:pointer}
.dot{width:7px;height:7px;border-radius:50%;background:var(--heart);flex:none}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;flex:none;background:var(--b-gray)}
.btn{border-radius:6px;padding:6px 12px;font-size:13px;font-weight:500;box-shadow:0 0 0 1px var(--line2);white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--accent);color:#fff;box-shadow:none}
.btn.dng{color:var(--c-red)}
.btn.armed{background:var(--c-red);color:#fff;box-shadow:none}
.field{width:100%;border-radius:6px;background:var(--bg2);box-shadow:0 0 0 1px var(--line);border:0;padding:9px 12px}
.hint{font-size:13px;color:var(--muted);background:var(--bg2);border-radius:8px;padding:10px 12px;margin-top:10px}

/* ---------- editing toolbar ---------- */
.kbar{flex:none;display:none;align-items:center;gap:2px;padding:4px 6px calc(4px + var(--sb));border-top:1px solid var(--line);background:var(--bg);overflow-x:auto;scrollbar-width:none}
@media (pointer:coarse){body.editing .kbar{display:flex}}
.kbar button{flex:none;min-width:38px;height:38px;border-radius:6px;display:grid;place-items:center;font-size:15px;color:var(--ink)}
.kbar button:active,.kbar button:hover{background:var(--hover)}
.kbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kbar .sep{width:1px;height:22px;background:var(--line);flex:none;margin:0 3px}
.kbar .done{margin-left:auto;color:var(--accent);font-weight:600;padding:0 10px;font-size:14px}

/* ---------- menus / sheets ---------- */
.pop{position:fixed;z-index:40;background:var(--sheet);border-radius:8px;box-shadow:var(--shadow);width:290px;max-height:320px;overflow-y:auto;padding:6px 0}
.pop .grp{font-size:11px;color:var(--muted);padding:6px 12px 4px;font-weight:600}
.mi{display:flex;align-items:center;gap:10px;width:100%;padding:5px 12px;text-align:left;font-size:14px}
.mi .ic{width:36px;height:36px;border-radius:5px;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;font-size:15px;flex:none;background:var(--bg)}
.mi .ds{font-size:12px;color:var(--muted)}
.mi.on,.mi:hover{background:var(--hover)}
.scrim{position:fixed;inset:0;background:rgba(15,15,15,.35);z-index:30;animation:fade .15s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--sheet);border-radius:14px 14px 0 0;max-height:78%;overflow-y:auto;padding:8px 0 calc(16px + var(--sb));animation:up .2s ease;max-width:640px;margin:0 auto}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:2px auto 8px}
.sheet h3{margin:4px 16px 8px;font-size:15px}
.sheet .row2{display:flex;gap:8px;padding:4px 16px 8px;flex-wrap:wrap}
.chipbtn{border-radius:8px;box-shadow:0 0 0 1px var(--line);padding:8px 12px;font-size:13px;display:flex;align-items:center;gap:6px}
.chipbtn:hover{background:var(--hover)}
.chipbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.chipbtn.dng{color:var(--c-red)}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 16px 8px}
.tgrid button{border-radius:8px;box-shadow:0 0 0 1px var(--line);padding:8px 2px;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:3px}
.tgrid button b{font-size:16px;font-weight:600}
.tgrid button.on{box-shadow:0 0 0 2px var(--accent)}
.swrow{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:0 16px 10px}
.sw{width:100%;aspect-ratio:1;height:auto;border-radius:8px;display:grid;place-items:center;font-weight:600;box-shadow:0 0 0 1px var(--line);font-size:14px}
.sw.on{box-shadow:0 0 0 2px var(--accent)}
.emogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:0 12px 10px}
.emogrid button{font-size:24px;aspect-ratio:1;border-radius:6px}
.emogrid button:hover{background:var(--hover)}
.cvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 12px}
.cvgrid button{aspect-ratio:16/9;border-radius:6px;background-size:cover}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--sb));transform:translateX(-50%);background:#2F2F2F;color:#fff;padding:9px 14px;border-radius:8px;font-size:13px;z-index:60;max-width:88%;text-align:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(24px);opacity:.4}}
@media (prefers-reduced-motion:reduce){.sheet,.scrim,.toast{animation:none}}
@media (min-width:760px){.cover{height:30vh;max-height:280px;min-height:180px}}
@media (hover:hover) and (pointer:fine){
  .gut{position:absolute;left:-46px;top:0;height:100%;width:44px;opacity:0;transition:opacity .1s;align-items:flex-start}
  .row:hover>.gut,.blk.focus>.row>.gut{opacity:1}
  .plus{display:grid;place-items:center;width:22px;height:24px;border-radius:4px;color:var(--faint);margin-top:2px}
  .plus svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
  .plus:hover,.hdl:hover{background:var(--hover)}
  .hdl{opacity:1;height:24px;margin-top:2px;padding-top:4px;border-radius:4px;width:20px}
  .phead{padding:0 56px}
  .blocks{padding:10px 56px 0}
  .readonly-note{padding-inline:56px}
}
@media (hover:hover) and (pointer:fine) and (min-width:1000px){.phead{padding:0 96px}.blocks{padding:10px 96px 0}}
@media (pointer:coarse) and (min-width:760px){.phead{padding:0 48px}.blocks{padding:10px 48px 0 30px}}

/* ---------- floating format bar ---------- */
.fbar{position:fixed;z-index:45;display:flex;align-items:center;gap:1px;background:var(--sheet);border-radius:8px;box-shadow:var(--shadow);padding:3px}
.fbar[hidden]{display:none}
.fbar button{height:30px;min-width:30px;padding:0 8px;border-radius:5px;display:grid;place-items:center;font-size:14px;color:var(--ink)}
.fbar button:hover{background:var(--hover)}
.fbar svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.fbar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.lane.over{outline:2px solid var(--accent);outline-offset:-2px}
.bcard[draggable="true"]{cursor:grab}

/* ---------- sheet as dialog on wide screens ---------- */
@media (min-width:768px){
  .sheet{left:50%;right:auto;bottom:auto;top:12vh;transform:translateX(-50%);width:460px;border-radius:12px;max-height:76vh;animation:fade .12s;padding-bottom:12px}
  .sheet .grab{display:none}
  .sheet h3:first-of-type{margin-top:14px}
}
.sh-sub{color:var(--muted);font-size:12px!important;font-weight:600}
.chipbtn.on{box-shadow:0 0 0 2px var(--accent)}
.sres{padding:0 8px 8px;max-height:50vh;overflow-y:auto}
.sres .mi{border-radius:6px}

/* ---------- friends screen ---------- */
.screen h1{font-size:30px;font-weight:700}
.myid{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:-4px 0 14px}
.myid b{color:var(--ink)}
.acts{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.av.sm{width:24px;height:24px;font-size:14px}
#fres .item:first-child{border-top:0}
#fres{margin-top:6px}

/* ---------- auth ---------- */
.auth{min-height:100%;display:grid;place-items:center;padding:24px 16px calc(24px + var(--sb))}
.auth-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.auth-mark{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1.15}
.auth-lead{color:var(--muted);margin:0 0 14px;font-size:15px}
.btn.kakao{background:#fee500;border-color:#fee500;color:#191919;font-weight:600}
.btn.kakao:hover{background:#f5dc00;border-color:#f5dc00}
.kakao-mark{width:18px;height:14px;display:inline-grid;place-items:center;font-size:18px;line-height:1;color:#191919;transform:scaleX(1.15)}
.btn.big{padding:11px 14px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.row-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin:6px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.err{color:var(--c-red);font-size:13px;min-height:18px}
.linkbtn{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:8px;margin-top:4px}
.lbl{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.lbl span{color:var(--faint);font-size:12px}
.at-field{display:flex;align-items:center;gap:0;background:var(--bg2);border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.at-field span{padding-left:12px;color:var(--muted)}
.at-field .field{box-shadow:none;background:transparent;padding-left:4px}

/* =========================================================
   my little world identity layer (exhibition look)
   ========================================================= */
body{font-size:15.5px;letter-spacing:-.005em}
.topbar{background:var(--bg)}
.side{background:var(--side);border-right:0}
.side-head b{font-family:var(--serif);font-size:15px;font-weight:700}
.si,.ti{border-radius:10px}
.si.on,.ti.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ss{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.tabs{background:var(--paper)}
.tabs button[aria-current="page"]{color:var(--accent)}

/* cover as a framed banner */
.cover{margin:10px 14px 0;border-radius:16px;height:170px}
@media (min-width:760px){.cover{margin:14px 24px 0;height:26vh;max-height:240px;min-height:170px}}
.cover-actions button{border-radius:999px;background:rgba(255,255,255,.9)}

/* page header: museum label + icon beside title */
.phead{padding-top:22px}
.plabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.trow{display:flex;align-items:center;gap:12px}
.picon,.picon.no-cover{margin:0;width:52px;height:52px;font-size:34px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--line);flex:none}
.ptitle{font-family:var(--serif);font-size:32px;margin:0;flex:1;min-width:0}
.ptools{margin:0 0 6px}
.ptools button{border-radius:999px;box-shadow:0 0 0 1px var(--line);color:var(--muted)}
.props{border-bottom:0;margin-top:14px;background:var(--paper);border-radius:12px;padding:6px 12px;box-shadow:0 0 0 1px var(--line)}
.pill{border-radius:999px}

/* handle & plus */
.hdl svg{width:12px;height:18px;fill:none}
.plus{border-radius:50%!important}
@media (hover:hover) and (pointer:fine){.plus{box-shadow:0 0 0 1px var(--line2);width:20px!important;height:20px!important;margin-top:4px!important;margin-right:2px}}

/* blocks */
.t-h1 .tx,.t-h2 .tx,.t-h3 .tx{font-family:var(--serif)}
.t-callout .body{border-radius:14px;padding:14px 16px 14px 12px}
.t-callout .body.bc-default{background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.t-quote .body{border-left:0;padding-left:0;position:relative}
.t-quote .body::before{content:"\201C";font-family:var(--serif);font-size:2.4em;line-height:1;color:var(--accent);opacity:.5;margin-right:6px;margin-top:-4px}
.t-quote .tx{font-family:var(--serif);font-style:italic}
.t-divider hr{border-top:1px dashed var(--line2);position:relative;overflow:visible}
.t-divider hr::after{content:"✦";position:absolute;left:50%;top:-10px;transform:translateX(-50%);background:var(--bg);padding:0 10px;color:var(--faint);font-size:11px}
.chk{border-radius:6px;border-color:var(--muted)}
.chk.on{background:var(--c-green);border-color:var(--c-green)}
.mk.bullet::before{width:5px;height:5px;border-radius:1px;transform:rotate(45deg)}
.plink .pt{text-decoration:none;border-bottom:1px solid var(--line2)}
.img-empty{border-radius:12px;border:1px dashed var(--line2);background:transparent}
.t-image img{border-radius:10px}

/* collections: framed artworks */
.coll-head{border-bottom:0;padding:18px 2px 4px}
.coll-title{font-family:var(--serif)}
.coll-view{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.coll-add{border-radius:999px;background:var(--ink);color:var(--bg);padding:4px 12px}
.gal{gap:22px 16px;padding-top:14px}
.card{box-shadow:none;background:transparent;overflow:visible;border-radius:0}
.card:hover{background:transparent}
.card .mat{background:var(--paper);padding:8px;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(20,22,30,.08);transition:transform .15s}
.card:hover .mat{transform:translateY(-2px)}
.card .cv{aspect-ratio:4/5;border:0;border-radius:2px;display:grid;place-items:center}
.cv-ic{font-size:34px;opacity:.85}
.card .ci{padding:10px 2px 0}
.cno{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.gal-add{border-radius:4px;min-height:160px}
.lane{border-radius:14px;background:var(--bg2)!important}
.lane-h .pill{font-weight:500}
.bcard{border-radius:10px;box-shadow:0 0 0 1px var(--line)}

/* menus & sheets */
.pop,.sheet{border-radius:16px}
.mi .ic{border-radius:50%;background:var(--bg2);box-shadow:none}
.sheet{border-radius:20px 20px 0 0}
@media (min-width:768px){.sheet{border-radius:16px}}
.chipbtn,.tgrid button,.btn{border-radius:999px}
.tgrid button{border-radius:12px}
.btn.pri,.coll-add{background:var(--accent);color:#fff}
.react{border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.fbar{border-radius:999px;padding:3px 6px}
.fbar button{border-radius:999px}
.auth-mark{letter-spacing:-.01em}

/* ---------- header customisation ---------- */
.cover.ch-s{height:110px!important;min-height:0!important}
.cover.ch-m{}
.cover.ch-l{height:300px!important;max-height:none!important}
.cover.ch-xl{height:48vh!important;max-height:none!important}
.cover.cs-full{margin:0!important;border-radius:0!important}
.cover.cs-round{margin:10px 10px 0!important;border-radius:32px!important}
.picon.is-s{width:40px;height:40px;font-size:24px}
.picon.is-l{width:72px;height:72px;font-size:48px}
.picon.is-xl{width:104px;height:104px;font-size:72px}
.picon.ish-circle{border-radius:50%}
.picon.ish-plain{background:transparent;box-shadow:none}
.picon .ic-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ic-img{width:1.2em;height:1.2em;object-fit:cover;border-radius:4px;vertical-align:-.2em;display:inline-block}
.phead.al-center{text-align:center}
.phead.al-center .trow{flex-direction:column;gap:10px}
.phead.al-center .ptools{justify-content:center}
.phead.al-center .ptitle{flex:none;width:100%}
.phead.ts-s .ptitle{font-size:24px}
.phead.ts-l .ptitle{font-size:42px}
.phead.ts-xl .ptitle{font-size:54px;line-height:1.1}
@media (max-width:600px){.phead.ts-l .ptitle{font-size:34px}.phead.ts-xl .ptitle{font-size:40px}}
.htabs{display:flex;gap:4px;margin:0 16px 8px;background:var(--bg2);border-radius:999px;padding:3px}
.htabs button{flex:1;padding:7px 0;border-radius:999px;font-size:14px;color:var(--muted)}
.htabs button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cvgrid button.on,.solidrow button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent)}
.solidrow{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.solidrow button,.solid-pick{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.solid-pick{display:grid;place-items:center;color:var(--muted);cursor:pointer;position:relative;overflow:hidden}
.solid-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sheet-p{margin:0 16px 12px;color:var(--muted);font-size:14px;line-height:1.6}
.sheet-p.faint{color:var(--faint);font-size:13px}
.srcgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 12px}
.srcgrid button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:14px;box-shadow:0 0 0 1px var(--line);text-align:left}
.srcgrid button:hover{background:var(--hover)}
.srcgrid b svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.srcgrid span{font-weight:600;font-size:14px}
.srcgrid small{color:var(--muted);font-size:12px}
.chips-row{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:0;box-shadow:0 0 0 1px var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:13px}
.chip.on{background:var(--ink);color:var(--bg);box-shadow:none}
.steps-mini{margin:0 16px 12px;padding-left:20px;font-size:14px;line-height:1.7}
.imp-prog{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:13px;box-shadow:var(--shadow)}

/* ---------- image block display ---------- */
.t-image figure{display:flex;flex-direction:column}
.t-image figure.ia-left{align-items:flex-start}.t-image figure.ia-center{align-items:center}.t-image figure.ia-right{align-items:flex-end}
.t-image figure img,.t-image figure>div[role="img"]{max-width:100%}
.image-size-box{position:relative;max-width:100%;flex-shrink:0}
.t-image figure .image-size-box img{width:100%;display:block;height:auto;user-select:none;touch-action:none;cursor:move}
.image-size-box.selected{outline:2px solid var(--accent)}
.image-size-handle{display:none;position:absolute;width:14px;height:14px;background:white;border:2px solid var(--accent);border-radius:2px;z-index:5;touch-action:none}
.image-size-box.selected .image-size-handle{display:block}
.image-size-handle.nw{left:-7px;top:-7px;cursor:nwse-resize}.image-size-handle.ne{right:-7px;top:-7px;cursor:nesw-resize}
.image-size-handle.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.image-size-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.image-edit-btn,.image-size-label{display:none;position:absolute;background:var(--paper);color:var(--ink);padding:4px 8px;border-radius:4px;font-size:12px;z-index:6}
.image-edit-btn{top:8px;right:8px}.image-size-label{bottom:8px;left:8px;pointer-events:none}
.image-size-box.selected .image-edit-btn,.image-size-box.selected .image-size-label:not(:empty){display:block}
figure.iw-s img{width:33%}figure.iw-m img{width:55%}figure.iw-l img{width:78%}figure.iw-full img{width:100%}
@media (max-width:600px){figure.iw-s img{width:50%}figure.iw-m img{width:75%}}
figure.ish-square img{border-radius:0!important}figure.ish-round img{border-radius:24px!important}
figure.ish-circle img{border-radius:50%!important;aspect-ratio:1;object-fit:cover}
figure.if-mat img{background:var(--paper);padding:10px;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(20,22,30,.08)}
figure.if-polaroid img{background:#fff;padding:10px 10px 38px;box-shadow:0 2px 10px rgba(20,22,30,.15);border-radius:2px!important}
figure.if-shadow img{box-shadow:0 12px 28px rgba(20,22,30,.22)}
.t-image figcaption{align-self:stretch}
figure.ia-center figcaption{text-align:center}figure.ia-right figcaption{text-align:right}

/* ---------- photo editor ---------- */
.ie{position:fixed;inset:0;z-index:80;background:#101114;color:#F2F1EC;display:flex;flex-direction:column;padding-top:var(--st);padding-bottom:var(--sb)}
.ie-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.ie-top .btn{color:#F2F1EC;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.ie-top .btn.pri{background:#93A4F5;color:#10132A;box-shadow:none}
.ie-stage{flex:1;min-height:0;display:grid;place-items:center;position:relative;padding:12px}
.ie-stage canvas{max-width:100%;max-height:100%;touch-action:none;cursor:grab;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.ie-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:12px;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:999px;pointer-events:none;transition:opacity .3s}
.ie-tabs{display:flex;justify-content:center;gap:4px;padding:6px}
.ie-tabs button{padding:8px 18px;border-radius:999px;color:#A2A4AB;font-size:14px}
.ie-tabs button.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.ie-panel{padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px;max-width:640px;width:100%;margin:0 auto;min-height:150px}
.ie .chip{box-shadow:0 0 0 1px rgba(255,255,255,.25);color:#F2F1EC}
.ie .chip.on{background:#F2F1EC;color:#101114}
.rng{display:grid;grid-template-columns:64px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.rng input{width:100%;accent-color:#93A4F5}
.rng em{font-style:normal;font-variant-numeric:tabular-nums;color:#A2A4AB;text-align:right}
.flt{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.flt button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#A2A4AB;flex:none}
.flt canvas{width:64px;height:64px;border-radius:10px}
.flt button.on{color:#fff}.flt button.on canvas{box-shadow:0 0 0 2px #93A4F5}

/* =========================================================
   v4 — databases, trackers, canvas, code, private space
   ========================================================= */
:root{--hand:"Nanum Pen Script","Gaegu",cursive;--round:"Jua","Gowun Dodum",var(--sans);--pagebg:transparent}
.num{font-variant-numeric:tabular-nums}
.faint{color:var(--faint)}
.ib.sm{width:30px;height:30px}
.ib.sm svg{width:17px;height:17px}
.ib.flip svg{transform:scaleX(-1)}
.mini{font-size:12px;padding:3px 8px;border-radius:999px;box-shadow:0 0 0 1px var(--line2);white-space:nowrap}
.mini.off{color:var(--faint)}
.mini.dng,.mini.armed{color:var(--c-red)}

/* block styles */
.blk.sf-serif .tx{font-family:var(--serif)} .blk.sf-hand .tx{font-family:var(--hand);font-size:1.35em;line-height:1.35} .blk.sf-round .tx{font-family:var(--round)} .blk.sf-mono .tx{font-family:var(--mono);font-size:.92em}
.blk.ss-s>.row .tx{font-size:.85em} .blk.ss-l>.row .tx{font-size:1.25em} .blk.ss-xl>.row .tx{font-size:1.6em;line-height:1.3} .blk.ss-xxl>.row .tx{font-size:2.2em;line-height:1.2;font-weight:700}
.blk.sa-center>.row .tx,.blk.sa-center>.row .body{text-align:center;justify-content:center} .blk.sa-right>.row .tx,.blk.sa-right>.row .body{text-align:right;justify-content:flex-end}
.blk.sb-card>.row>.body{background:var(--paper);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(20,22,30,.06);border-radius:14px;padding:12px 14px}
.blk.sb-line>.row>.body{box-shadow:0 0 0 1.5px var(--ink);border-radius:4px;padding:10px 12px}
.blk.sb-dash>.row>.body{border:1.5px dashed var(--line2);border-radius:12px;padding:10px 12px}
.blk.sb-memo>.row>.body{background:#FFF3B0;color:#3A3325;padding:14px 16px;box-shadow:0 6px 14px rgba(20,22,30,.1);border-radius:2px}
.blk.sb-tape>.row>.body{background:var(--paper);padding:16px 16px 12px;box-shadow:0 2px 10px rgba(20,22,30,.08);position:relative;margin-top:10px}
.blk.sb-tape>.row>.body::before{content:"";position:absolute;top:-10px;left:50%;width:80px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(245,208,197,.85)}
.blk.sb-hl>.row .tx{background:linear-gradient(transparent 58%,rgba(251,231,161,.9) 58%);display:inline;padding:0 2px}
.blk.sp-tight>.row>.body{padding-block:0} .blk.sp-loose{margin:14px 0} .blk.sp-xloose{margin:32px 0}
.blk.st-l1>.row>.body{transform:rotate(-1.2deg)} .blk.st-l2>.row>.body{transform:rotate(-3deg)} .blk.st-r1>.row>.body{transform:rotate(1.2deg)} .blk.st-r2>.row>.body{transform:rotate(3deg)}
.cols.stack{grid-auto-flow:column}
@media (max-width:600px){.cols.stack{grid-auto-flow:row!important;grid-template-columns:1fr!important}}

/* page background & width */
.page.full>.phead,.page.full>.blocks,.page.full>.tail{max-width:none}
.page.pbg-color{background:var(--pagebg)}
.pbg-grid,.bgsw.pbg-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:22px 22px}
.pbg-dots,.bgsw.pbg-dots{background-image:radial-gradient(var(--line2) 1.2px,transparent 1.3px);background-size:18px 18px}
.pbg-lined,.bgsw.pbg-lined{background-image:linear-gradient(transparent 27px,rgba(47,71,181,.14) 28px);background-size:100% 28px}
.pbg-paper,.bgsw.pbg-paper{background-color:#FBF7EE;background-image:radial-gradient(rgba(120,100,60,.06) 1px,transparent 1px);background-size:6px 6px}
.pbg-cork,.bgsw.pbg-cork{background-color:#D8B98C;background-image:radial-gradient(rgba(90,60,20,.18) 1.4px,transparent 1.5px),radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.2px);background-size:9px 9px,13px 13px;color:#2B2218}
.page.pbg-paper,.page.pbg-cork{color:#2B2218}
.bgsw{display:block;width:100%;height:28px;border-radius:6px;box-shadow:0 0 0 1px var(--line);margin-bottom:4px;background-color:var(--paper)}
.secret-bar{margin:12px 22px 0;padding:8px 12px;border-radius:999px;background:var(--b-gray);font-size:13px;color:var(--muted);text-align:center}
.lockscreen{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12vh}
.lock-ic{font-size:44px}
.field.pin{text-align:center;font-size:22px;letter-spacing:.4em;max-width:220px}

/* free decoration layer */
.page{position:relative}
.deco-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.deco-layer .cvi{pointer-events:auto}
.deco-fab{position:fixed;right:18px;bottom:calc(18px + var(--sb));z-index:20;display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;box-shadow:var(--shadow);font-size:14px}
.deco-fab:hover{transform:translateY(-1px)}
@media (max-width:767px){.deco-fab{bottom:calc(74px + var(--sb));right:14px;padding:10px 13px}.deco-fab span{display:none}}
@media (pointer:coarse){body.editing .deco-fab{display:none}}
body.dropping .page{outline:3px dashed var(--accent);outline-offset:-8px}
.deco-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:480px){.deco-grid{grid-template-columns:1fr 1fr}}
.deco-grid b{font-size:24px}

/* canvas */
.cvs{position:relative;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background-color:var(--paper);margin:6px 0;touch-action:pan-y}
.cvbg-dots{background-image:radial-gradient(var(--line2) 1.2px,transparent 1.3px);background-size:18px 18px}
.cvbg-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:22px 22px}
.cvbg-lined{background-image:linear-gradient(transparent 27px,rgba(47,71,181,.14) 28px);background-size:100% 28px}
.cvbg-cork{background-color:#D8B98C;background-image:radial-gradient(rgba(90,60,20,.18) 1.4px,transparent 1.5px);background-size:9px 9px}
.cvi{position:absolute;touch-action:none;user-select:none;cursor:grab}
.cvi:active{cursor:grabbing}
.cvi-note{padding:14px 12px;min-height:80px;box-shadow:0 8px 18px rgba(20,22,30,.14);color:#2B2A28;font-size:15px;line-height:1.5}
.cvi-text{line-height:1.25;padding:4px}
.cvi-tx{outline:none;min-height:1.2em;cursor:text;word-break:keep-all;overflow-wrap:anywhere;user-select:text}
.cvi-tx:empty::before{content:"여기에 쓰기";opacity:.4}
.cvi-sticker{line-height:1;text-align:center;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.cvi-img{width:100%;display:block;pointer-events:none;border-radius:3px;box-shadow:0 6px 16px rgba(20,22,30,.18)}
.cvi-img.fr-polaroid{background:#fff;padding:8px 8px 30px;border-radius:2px}
.cvi-img.fr-mat{background:#fff;padding:8px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 16px rgba(20,22,30,.18)}
.cvi-img.fr-round{border-radius:24px}
.cvi-tape{height:26px;opacity:.85;box-shadow:0 1px 2px rgba(0,0,0,.08);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px)}
.cvi-h{position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;opacity:0;cursor:nwse-resize;touch-action:none}
.cvi:hover .cvi-h,.cvi:focus-within .cvi-h{opacity:1}
@media (pointer:coarse){.cvi-h{opacity:.75}}
.cvs-bar{position:absolute;left:8px;bottom:8px;display:flex;gap:4px;flex-wrap:wrap;z-index:50}
.cvs-bar button{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(0,0,0,.06)}
.cvs-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:14px;pointer-events:none;padding:20px;text-align:center}
.cvs-rs{position:absolute;right:4px;bottom:4px;width:16px;height:16px;cursor:ns-resize;border-right:2px solid var(--line2);border-bottom:2px solid var(--line2);z-index:50;touch-action:none}

/* database */
.t-db .body{flex-direction:column;align-items:stretch;gap:0;width:100%}
.db-acts{display:flex;align-items:center;gap:6px}
.db-q{width:110px;border:0;background:var(--bg2);border-radius:999px;padding:4px 12px;font-size:13px}
.db-q:focus{width:160px}
.vtabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:8px}
.vtab{display:flex;align-items:center;gap:5px;padding:6px 10px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.vtab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.vtab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.vtab.add{color:var(--faint)}
.vt-grid{grid-template-columns:repeat(3,1fr)!important}
.vt-grid button{flex-direction:row!important;justify-content:center;gap:6px!important;font-size:13px!important}
.vt-grid svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.vs-opts{display:grid;gap:8px;padding:6px 16px 8px}
.vs-opts label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.vs-opts select,.pe-row select{border:0;background:var(--bg2);border-radius:8px;padding:7px 8px;color:var(--ink)}
.props-ed{display:flex;flex-direction:column;gap:6px;padding:0 16px 8px}
.pe-row{display:flex;align-items:center;gap:6px}
.pe-row .field{flex:1;padding:6px 10px}
.pt-ic{display:inline-grid;place-items:center;width:18px;color:var(--faint);font-size:12px;margin-right:4px;flex:none}
.db-addrow{display:block;width:100%;text-align:left;padding:8px 6px;font-size:13px;color:var(--muted);border-radius:8px}
.db-addrow:hover{background:var(--hover)}
.tbl-scroll{overflow-x:auto;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.dbt{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;background:var(--paper)}
.dbt th{font-size:12px;color:var(--muted);font-weight:500;text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg2)}
.dbt td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:middle}
.dbt td:last-child{border-right:0}
.dbt td>*:not(.tt-wrap):not(.place-ed){margin:0 8px}
.dbt .cell,.dbt td input,.dbt td select{width:100%;border:0;background:transparent;padding:7px 8px;font-size:14px;min-width:90px;border-radius:0}
.dbt td input:focus,.dbt td select:focus{outline:2px solid var(--accent);outline-offset:-2px;background:var(--paper)}
.dbt td input[type=checkbox]{width:auto;min-width:0;margin:0 10px;accent-color:var(--c-green)}
.c-title{min-width:180px}
.tt-wrap{display:flex;align-items:center}
.t-ic{padding:0 2px 0 8px}
.t-go{font-size:11px;color:var(--muted);padding:3px 7px;margin-right:6px;border-radius:6px;box-shadow:0 0 0 1px var(--line);opacity:0}
tr:hover .t-go,.t-go:focus{opacity:1}
@media (pointer:coarse){.t-go{opacity:1}}
.t-open{display:flex;gap:6px;align-items:center;padding:7px 8px;font-weight:500}
.c-add button{width:24px;height:24px;border-radius:6px;color:var(--muted)}
.dbt tfoot td{font-size:12px;color:var(--muted);padding:6px 8px}
.place-ed{display:flex;align-items:center;gap:4px;padding-right:6px}
.dbl{display:flex;flex-direction:column}
.dbl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;border-radius:6px}
.dbl-row:hover{background:var(--hover)}
.dbl-t{display:flex;gap:6px;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.bcard{flex-direction:column;align-items:flex-start!important}
.bc-t{display:flex;gap:6px}
.gal.gs-s{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} .gal.gs-l{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.feed{display:flex;flex-direction:column;gap:18px;max-width:640px}
.feed-card{border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.feed-cv{height:160px;background-size:cover;background-position:center}
.feed-in{padding:14px 16px}
.feed-meta{font-size:12px;color:var(--muted);font-family:var(--mono)}
.feed-t{font-family:var(--serif);font-size:20px;font-weight:700;text-align:left;margin:4px 0 6px}
.feed-body{font-size:14.5px;max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 75%,transparent)}
.feed-body .blk .gut{display:none}
.dash{display:flex;flex-direction:column;gap:12px}
.dtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.dtile{background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--line);padding:12px 14px;display:flex;flex-direction:column}
.dtile span{font-size:12px;color:var(--muted)} .dtile b{font-size:26px;font-family:var(--serif);font-variant-numeric:tabular-nums} .dtile em{font-style:normal;font-size:12px;color:var(--faint)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.dchart{background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--line);padding:12px 14px}
.dchart h5,.lg-block h5{margin:0 0 8px;font-size:13px}
.dbar{display:grid;grid-template-columns:minmax(60px,90px) 1fr auto;align-items:center;gap:8px;font-size:12.5px;margin:5px 0}
.dbar .dl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt{height:10px;border-radius:999px;background:var(--bg2);overflow:hidden;display:block}
.dt i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.dt i.st0{background:var(--c-gray)}.dt i.st1{background:var(--c-blue)}.dt i.st2{background:var(--c-green)}
.dt i[class^="bc-"]{filter:saturate(1.8) brightness(.9)}
.dn{font-variant-numeric:tabular-nums;color:var(--muted)}
.dcols{display:flex;align-items:flex-end;gap:8px;height:120px}
.dcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:11px}
.dcol i{width:100%;max-width:28px;background:var(--accent);border-radius:6px 6px 2px 2px;min-height:2px}
.cal-nav{display:flex;align-items:center;gap:6px;margin:4px 0 8px}
.cal-nav b{font-size:14px;min-width:0}
.cal{border-radius:12px;box-shadow:0 0 0 1px var(--line);overflow:hidden;background:var(--paper)}
.cal-h{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;color:var(--muted);text-align:center;padding:6px 0;background:var(--bg2)}
.cal-h span:first-child{color:var(--c-red)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-d{min-height:86px;border-top:1px solid var(--line);border-right:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.cal-d:nth-child(7n){border-right:0}
.cal-d:hover{background:var(--hover)}
.cal-d.om{opacity:.4}
.cal-n{font-size:12px;font-variant-numeric:tabular-nums;width:22px;height:22px;display:grid;place-items:center;border-radius:50%}
.cal-d.sun .cal-n{color:var(--c-red)}
.cal-d.today .cal-n{background:var(--accent);color:#fff}
.cal-i{font-size:11.5px;text-align:left;padding:2px 5px;border-radius:5px;background:var(--accent-soft);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font-size:11px;color:var(--muted)}
@media (max-width:600px){.cal-d{min-height:60px;padding:2px}.cal-i{font-size:10px;padding:1px 3px}}
.tl-scroll{overflow-x:auto;border-radius:12px;box-shadow:0 0 0 1px var(--line);background:var(--paper)}
.tl{min-width:max-content}
.tl-row{display:grid;grid-template-columns:150px auto;border-bottom:1px solid var(--line);align-items:center;min-height:36px}
.tl-name{position:sticky;left:0;background:var(--paper);z-index:1;border-right:1px solid var(--line);height:100%;display:flex;align-items:center;overflow:hidden}
.tl-name .t-open{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:13px}
.tl-track{display:grid;grid-template-columns:repeat(var(--n),28px);position:relative;align-items:center;height:100%}
.tl-head .tl-track{height:auto}
.tl-day{font-size:11px;text-align:center;color:var(--muted);padding:4px 0;position:relative;font-variant-numeric:tabular-nums;line-height:1.2}
.tl-day em{display:block;font-style:normal;font-size:10px;color:var(--ink);font-weight:600}
.tl-day.today{color:#fff;background:var(--accent);border-radius:6px}
.tl-day.sun{color:var(--c-red)}
.tl-bar{height:24px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;padding:0 10px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 2px}
.tl-off{grid-column:1/-1;font-size:11px;color:var(--faint);padding-left:10px}
.map{height:340px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--bg2)}
.map .empty-note{padding:20px}
.prop-add{font-size:13px;padding:6px 0;text-align:left}
.prop .v input,.prop .v select{max-width:260px}
.prop .v input[type=checkbox]{width:auto;accent-color:var(--c-green)}

/* trackers */
.t-habit .body,.t-mood .body,.t-ledger .body,.t-canvas .body,.t-embed .body,.t-progress .body,.t-code .body{width:100%;flex-direction:column;align-items:stretch}
.tracker{background:var(--paper);border-radius:18px;box-shadow:0 0 0 1px var(--line);padding:14px 16px;margin:6px 0}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-seg{display:flex;background:var(--bg2);border-radius:999px;padding:2px}
.mini-seg button{padding:4px 12px;border-radius:999px;font-size:12px;color:var(--muted)}
.mini-seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.hb-scroll{overflow-x:auto}
.hb-grid{min-width:max-content}
.hb-row{display:grid;grid-template-columns:130px auto 70px;align-items:center;gap:8px;padding:5px 0}
.hb-hd{font-size:11px;color:var(--muted)}
.hb-name{display:flex;align-items:center;gap:6px;text-align:left;min-width:0;font-size:14px}
.hb-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-days{display:grid;gap:4px}
.hb-days.week{grid-template-columns:repeat(7,34px)}
.hb-days.month{grid-template-columns:repeat(31,22px)}
.hb-days span{text-align:center;line-height:1.2;font-variant-numeric:tabular-nums}
.hb-days span.today{color:var(--accent);font-weight:700}
.hb-c{aspect-ratio:1;border-radius:10px;background:var(--bg2);font-size:13px;color:#fff;font-weight:700;display:grid;place-items:center}
.hb-days.month .hb-c{border-radius:6px;font-size:10px}

.hb-c.today{box-shadow:0 0 0 2px var(--accent)}
.hb-c.future{opacity:.45}
.hb-stat{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--muted);line-height:1.2}
.hb-stat b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.md-h,.md-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.md-h{font-size:11px;color:var(--muted);text-align:center;margin-bottom:4px}
.md-d{aspect-ratio:1;border-radius:12px;background:var(--bg2);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.md-d.today{box-shadow:0 0 0 2px var(--accent)}
.md-d.future{opacity:.4}
.md-n{font-size:10px;color:var(--muted);position:absolute;top:3px;left:6px;font-variant-numeric:tabular-nums}
.md-e{font-size:20px;line-height:1}
.md-note{position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.5}
.md-sum{margin-top:10px}
.md-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--bg2);gap:2px}
.md-avg{font-size:12px;color:var(--muted);margin-top:6px}
.md-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--muted);margin-top:10px}
.md-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:3px;vertical-align:-1px}
.md-year{display:flex;flex-direction:column;gap:2px;overflow-x:auto}
.md-yh,.md-yr{display:grid;grid-template-columns:22px repeat(12,1fr);gap:2px;font-size:10px;color:var(--muted);text-align:center}
.md-yr i{aspect-ratio:1.6;border-radius:3px;background:var(--bg2);cursor:pointer}
.md-yr i.na{background:transparent;cursor:default}
.md-yr i.today{box-shadow:0 0 0 1.5px var(--accent)}
.md-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 16px 12px}
.md-pick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-radius:14px;background:var(--bg2);font-size:12px}
.md-pick b{font-size:26px}
.md-pick button.on{background:var(--c);box-shadow:0 0 0 2px var(--ink)}
.lg-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.lg-sum div{background:var(--bg2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.lg-sum span{font-size:12px;color:var(--muted)}
.lg-sum b{font-size:18px;font-variant-numeric:tabular-nums}
.in{color:var(--c-blue)!important}.out{color:var(--c-red)!important}
.lg-total{margin-bottom:10px}
.lg-total .sub{font-size:12px;color:var(--muted);margin-top:2px}
.lg-bud{display:grid;grid-template-columns:minmax(70px,100px) 1fr auto;align-items:center;gap:8px;font-size:12.5px;margin:5px 0}
.lg-bud .dt i.over{background:var(--c-red)}
.lg-block{background:var(--bg2);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.lg-block .dt{background:var(--paper)}
.lg-day{margin-top:8px}
.lg-dh{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:6px 2px;border-bottom:1px solid var(--line)}
.lg-dh em{font-style:normal;font-variant-numeric:tabular-nums}
.lg-e{display:flex;align-items:center;gap:10px;width:100%;padding:8px 2px;text-align:left;border-radius:8px}
.lg-e:hover{background:var(--hover)}
.lg-ic{width:34px;height:34px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;flex:none}
.lg-m{flex:1;min-width:0;display:flex;flex-direction:column}
.lg-m b{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-m small{font-size:12px;color:var(--muted)}
.lg-amt{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:4px 16px 6px}
.lg-amt input{border:0;background:transparent;font-size:36px;font-weight:700;text-align:right;width:100%;max-width:280px;font-variant-numeric:tabular-nums;outline:none}
.lg-amt span{font-size:20px;color:var(--muted)}
.lg-quick{display:flex;gap:6px;justify-content:center;padding:0 16px 10px;flex-wrap:wrap}
.lg-budget-ed{display:grid;gap:8px;padding:0 16px 10px}
.lg-budget-ed label{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;font-size:14px}
.lg-budget-ed input{text-align:right;font-variant-numeric:tabular-nums}

/* embed, bookmark, progress */
.embed{width:100%;border-radius:14px;overflow:hidden;background:var(--bg2);margin:6px 0}
.embed iframe{width:100%;height:100%;border:0;display:block}
.bookmark{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;box-shadow:0 0 0 1px var(--line);text-decoration:none;color:inherit;width:100%;margin:4px 0}
.bookmark small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog{width:100%;padding:10px 0;cursor:pointer}
.prog-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:6px}
.prog-top span{color:var(--muted);font-size:13px}
.prog-bar{height:14px;border-radius:999px;background:var(--bg2);overflow:hidden}
.prog-bar i{display:block;height:100%;border-radius:999px;transition:width .3s}

/* code */
.codeblk{width:100%;border-radius:12px;overflow:hidden;background:#16181D;color:#E6E4DE;margin:6px 0;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.code-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#1F2229;font-size:12px}
.code-lang{background:transparent;border:0;color:#A9B1C6;font-size:12px;font-family:var(--mono)}
.code-lang option{color:#111}
.code-sp{flex:1}
.code-btn{color:#C9CEDC;padding:3px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.15);font-size:12px}
.code-btn:hover,.code-btn.on{background:rgba(255,255,255,.1)}
.code-wrap{position:relative;font-family:var(--mono);font-size:13.5px;line-height:1.6}
.code-hl,.code-ta{margin:0;padding:12px 14px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font:inherit;tab-size:2}
.code-hl{min-height:44px}
.code-ta{position:absolute;inset:0;width:100%;height:100%;background:transparent;color:transparent;caret-color:#fff;border:0;resize:none;outline:none;overflow:hidden}
.code-ta::placeholder{color:#6B7185}
.code-ta::selection{background:rgba(147,164,245,.35);color:transparent}
.code-run{width:100%;height:220px;border:0;background:#fff;display:block}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-built_in{color:#C792EA}
.hljs-string,.hljs-attr,.hljs-template-tag{color:#C3E88D}
.hljs-number,.hljs-symbol{color:#F78C6C}
.hljs-comment,.hljs-quote{color:#6B7185;font-style:italic}
.hljs-title,.hljs-title.function_,.hljs-section{color:#82AAFF}
.hljs-type,.hljs-class .hljs-title,.hljs-title.class_{color:#FFCB6B}
.hljs-tag,.hljs-name{color:#F07178}
.hljs-attribute,.hljs-variable,.hljs-params{color:#E6E4DE}
.hljs-meta{color:#89DDFF}
@media (max-width:480px){.lg-sum b{font-size:15px}.lg-sum div{padding:8px 10px}}

/* v5 — resize/rotate handles, calendar cell decoration, background photos */
.deco-layer,.cvs,.cal-deco{container-type:inline-size}
.cvi.sel{outline:1.5px dashed var(--accent);outline-offset:4px}
.cvh{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);touch-action:none;z-index:2}
.cvh.nw{left:-11px;top:-11px;cursor:nwse-resize}.cvh.ne{right:-11px;top:-11px;cursor:nesw-resize}.cvh.sw{left:-11px;bottom:-11px;cursor:nesw-resize}.cvh.se{right:-11px;bottom:-11px;cursor:nwse-resize}
@media (pointer:coarse){.cvh{width:22px;height:22px}.cvh.nw{left:-15px;top:-15px}.cvh.ne{right:-15px;top:-15px}.cvh.sw{left:-15px;bottom:-15px}.cvh.se{right:-15px;bottom:-15px}}
.cvr{position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;display:grid;place-items:center;cursor:grab;touch-action:none;z-index:2}
.cvi-h{display:none}
.cvi-tools{position:absolute;z-index:999;display:flex;gap:2px;background:var(--sheet);border-radius:999px;box-shadow:var(--shadow);padding:3px;pointer-events:auto;white-space:nowrap}
.cvi-tools button{width:30px;height:30px;border-radius:50%;font-size:14px;display:grid;place-items:center;color:var(--ink)}
.cvi-tools button:hover{background:var(--hover)}
.cvi-sticker{line-height:1.05}
.cvi-note .cvi-tx{min-height:2em}
.cal-d{position:relative;overflow:hidden;background-size:cover;background-position:center}
.cal-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.cal-d>.cal-n,.cal-d>.cal-i,.cal-d>.cal-more{position:relative;z-index:1}
.cal.decomode .cal-deco{pointer-events:none}
.cal.decomode .cal-deco .cvi,.cal.decomode .cal-deco .cvi-tools{pointer-events:auto}
.cal.decomode .cal-d{outline:1px dashed transparent}
.cal.decomode .cal-d:hover{outline-color:var(--accent);outline-offset:-3px;background-color:var(--accent-soft)}
.cal-deco .cvi{cursor:default}
.cal.decomode .cal-deco .cvi{cursor:grab}
.cal-d.has-bg .cal-n{background:rgba(255,255,255,.85);color:#1C1E22}
.cal-d.has-bg.today .cal-n{background:var(--accent);color:#fff}
.cal-deco .cvi-img{box-shadow:0 2px 6px rgba(0,0,0,.18)}
.chip.on{background:var(--ink);color:var(--bg)}
.page.has-bgimg{background:transparent}
.page-bgimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center top;pointer-events:none}
.page-bgimg::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:var(--bgdim,.45)}
.page-bgimg.fit-fixed{position:fixed;background-attachment:fixed}
.page-bgimg.fit-tile{background-size:220px auto;background-repeat:repeat}
.page.has-bgimg>*:not(.page-bgimg):not(.deco-layer){position:relative;z-index:1}
.page.has-bgimg>.deco-layer{z-index:4}

/* v6 — screen-wide page background */
.content{position:relative}
.screen-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:transparent}
.content>.topbar,.content>.main,.content>.kbar,.content>.tabs{position:relative;z-index:1}
.sb-img{position:absolute;inset:0;background-size:cover;background-position:center}
.screen-bg.fit-tile .sb-img{background-size:240px auto;background-repeat:repeat}
.screen-bg.fit-fixed .sb-img{background-size:cover}
.sb-dim{position:absolute;inset:0;background:var(--bg)}
body.has-screen-bg .main{background:transparent}
body.has-screen-bg .topbar{background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.has-screen-bg .page .props,body.has-screen-bg .picon{background:color-mix(in srgb,var(--paper) 88%,transparent)}
body.screen-bg-dark .main{color:#F2F1EC}
body.screen-bg-dark .topbar{color:#F2F1EC}

/* Starter Worlds — sample exhibitions live inside the original LIVO editor */
.starter-entry{margin-top:4px;background:linear-gradient(90deg,var(--accent-soft),transparent);color:var(--accent);font-weight:600}
.starter-entry .tic{font-size:17px}.starter-entry:hover{background:var(--accent-soft)}
.ptools .starter-top{background:var(--ink);color:var(--bg);font-weight:600;padding:5px 11px;border-radius:999px}
.ptools .starter-top:hover{background:var(--accent);color:#fff}
.ptools .clear-sample{color:var(--c-red);margin-left:auto}
.starter-sheet-head{padding:2px 2px 8px}.starter-sheet-head h3{margin:5px 0 4px;font-family:var(--serif);font-size:25px}.starter-sheet-head p{margin:0;color:var(--muted);font-size:13px}
.starter-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent)}
.starter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.starter-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s}
.starter-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.starter-photo{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}.starter-photo img{display:block;width:100%;height:100%;object-fit:cover}
.starter-info{display:block;padding:12px}.starter-info i{display:block;margin-bottom:4px;color:var(--faint);font:500 9px var(--mono);letter-spacing:.13em}.starter-info b{display:block;font-family:var(--serif);font-size:17px}.starter-info small{display:block;margin:3px 0 10px;color:var(--muted);font-size:11px}.starter-info em{display:inline-block;font-style:normal;color:var(--accent);font-size:12px;font-weight:600}
.starter-card.mina .starter-info b{font-family:"Nanum Pen Script",cursive;font-size:22px;color:var(--c-blue)}
.starter-blank{width:100%;min-height:60px;border:1px dashed var(--line2);border-radius:10px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:10px 13px}
.starter-blank:hover{background:var(--hover)}.starter-blank>span{grid-row:1/3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);font-size:18px}.starter-blank>b{font-size:13px}.starter-blank>small{color:var(--muted);font-size:11px}
.starter-safe{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--accent-soft);color:var(--muted);font-size:11px;line-height:1.6}
@media(max-width:560px){.starter-grid{grid-template-columns:1fr}.starter-photo{aspect-ratio:2.2/1}.ptools .clear-sample{margin-left:0}.ptools .starter-top{width:100%;text-align:center}}

/* copied starter pages: current editorial / scrapbook visual language */
.page.starter-world{--starter-blue:#244f8e;--starter-red:#ef5947;--starter-yellow:#f5d652;--starter-cream:#f6f1e7;min-height:100%;padding-bottom:120px}
.page.starter-world>.phead,.page.starter-world>.blocks{max-width:940px}
.page.starter-world .plabel{width:max-content;padding:4px 8px;border:1px solid currentColor;font:500 10px var(--mono);letter-spacing:.14em}
.page.starter-world .ptitle{letter-spacing:-.04em}
.page.starter-world .props{border:1px solid var(--line);padding:8px 12px;background:color-mix(in srgb,var(--paper) 76%,transparent)}
.page.starter-world .t-h3 .tx{font:500 12px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.page.starter-world .t-image figure{position:relative;padding:9px;background:#fff;box-shadow:0 14px 32px rgba(40,34,25,.13);transform:rotate(-.35deg)}
.page.starter-world .t-image figure::before{content:"";position:absolute;z-index:2;top:-13px;left:50%;width:86px;height:25px;background:rgba(213,201,169,.65);transform:translateX(-50%) rotate(-3deg);clip-path:polygon(2% 8%,98% 0,96% 95%,0 100%)}
.page.starter-world .t-image .cap{padding:9px 3px 2px;font:11px var(--mono);letter-spacing:.03em}
.page.starter-world .t-columns>.row>.body>.cols{gap:14px}
.page.starter-world .t-columns .t-callout .body{min-height:122px;border:1px solid rgba(30,28,24,.1);border-radius:0;box-shadow:4px 5px 0 rgba(32,29,24,.08)}
.page.starter-world .t-columns .tx{font-size:13px;line-height:1.7}
.page.starter-world .t-divider hr{border-top-style:dashed}

.page.starter-yuna{background:linear-gradient(110deg,rgba(36,79,142,.035),transparent 42%),var(--starter-cream)}
.page.starter-yuna .cover{margin:20px 22px 0;border-radius:2px;box-shadow:0 0 0 8px #fff,0 16px 38px rgba(43,36,28,.13);transform:rotate(.25deg)}
.page.starter-yuna .phead{padding-top:18px}.page.starter-yuna .plabel{color:var(--starter-blue)}
.page.starter-yuna .ptitle{font-family:Georgia,"Gowun Batang",serif;font-style:italic;font-weight:400;font-size:clamp(42px,6vw,72px);color:#25231f}
.page.starter-yuna .t-quote .body{margin:9px 0;padding:22px 26px;border-left:5px solid var(--starter-blue);background:#fff;box-shadow:6px 7px 0 rgba(36,79,142,.09)}
.page.starter-yuna .t-quote .tx{font-family:var(--serif);font-size:clamp(19px,2.6vw,27px)}
.page.starter-yuna .t-h2 .tx{font-family:Georgia,var(--serif);font-style:italic;font-weight:400;font-size:32px}
.page.starter-yuna .blocks>.t-callout .body{border-radius:0;background:var(--starter-yellow);transform:rotate(-.4deg);box-shadow:7px 8px 0 rgba(83,63,20,.1)}
.page.starter-yuna .blocks>.t-text:last-child .tx{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:right}

.page.starter-mina{background-color:#fff9ed;background-image:radial-gradient(rgba(36,79,142,.16) 1px,transparent 1px);background-size:18px 18px}
.page.starter-mina .cover{margin:16px 18px 0;box-shadow:7px 8px 0 var(--starter-blue);transform:rotate(-.4deg)}
.page.starter-mina .plabel{color:#fff;background:var(--starter-blue);border-color:var(--starter-blue);transform:rotate(-1deg)}
.page.starter-mina .ptitle{font-family:"Nanum Pen Script",cursive;font-weight:400;font-size:clamp(54px,8vw,86px);line-height:.95;color:var(--starter-blue);transform:rotate(-1deg);text-shadow:3px 3px 0 rgba(245,214,82,.65)}
.page.starter-mina .picon{background:var(--starter-yellow);border:2px solid var(--starter-blue);transform:rotate(5deg)}
.page.starter-mina .t-h3 .tx{display:inline-block;width:auto;background:var(--starter-red);color:#fff;padding:5px 9px;transform:rotate(-1deg)}
.page.starter-mina .t-image figure{transform:rotate(.55deg);box-shadow:8px 9px 0 rgba(36,79,142,.2)}
.page.starter-mina .t-columns .col:nth-child(1) .t-callout .body{background:#dce9f7;transform:rotate(-1deg)}
.page.starter-mina .t-columns .col:nth-child(2) .t-callout .body{background:var(--starter-yellow);transform:rotate(1.2deg)}
.page.starter-mina .t-columns .col:nth-child(3) .t-callout .body{background:#f6c0aa;transform:rotate(-.7deg)}
.page.starter-mina .t-h2 .tx{font-family:"Nanum Pen Script",cursive;font-size:42px;color:var(--starter-blue);font-weight:400;text-transform:uppercase}
.page.starter-mina .t-quote .body{padding:20px 22px;background:#fff;border:2px solid var(--starter-blue);box-shadow:6px 7px 0 var(--starter-red);transform:rotate(.35deg)}
.page.starter-mina .blocks>.t-callout .body{border-radius:0;background:var(--starter-yellow);border:2px solid var(--starter-blue);box-shadow:7px 8px 0 rgba(36,79,142,.2);transform:rotate(-.5deg)}
.page.starter-mina .blocks>.t-text:last-child .tx{font:500 11px var(--mono);letter-spacing:.1em;color:var(--starter-blue);text-align:center;border-top:2px dashed var(--starter-blue);padding-top:15px}
@media(max-width:680px){.page.starter-world .t-columns>.row>.body>.cols{grid-auto-flow:row;grid-template-columns:1fr!important}.page.starter-world .cover{margin-inline:10px}.page.starter-world .blocks{padding-left:8px}.page.starter-mina .ptitle{font-size:58px}.page.starter-yuna .ptitle{font-size:48px}}