/* ===== 노시언 위젯 공용 기반 CSS ===== */
:root{
  --ink:#37352f; --ink2:rgba(55,53,47,.62); --ink3:rgba(55,53,47,.4); --ink4:rgba(55,53,47,.24);
  --line:rgba(55,53,47,.11); --line2:rgba(55,53,47,.06); --fill:rgba(55,53,47,.045);
  --card:#ffffff; --cardb:rgba(55,53,47,.11);
  --accent:#37352f; --on:#ffffff; --red:#d6483c; --up:#c0392b; --down:#2f6f4e;
  --handle:rgba(55,53,47,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9e7e3; --ink2:rgba(233,231,227,.62); --ink3:rgba(233,231,227,.4); --ink4:rgba(233,231,227,.22);
    --line:rgba(233,231,227,.13); --line2:rgba(233,231,227,.07); --fill:rgba(233,231,227,.06);
    --card:#1f1e1c; --cardb:rgba(233,231,227,.12);
    --accent:#e9e7e3; --on:#23211e; --red:#ff7369; --up:#ff7369; --down:#4caf86;
    --handle:rgba(233,231,227,.32);
  }
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{background:transparent; height:100%;}
/* 수동/URL 다크 강제 시 위젯 배경 전체를 다크로 (노션 라이트 페이지에서도 다크 보장) */
html[data-theme="dark"], html[data-theme="dark"] body{ background:#191919; }
body{
  font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased; overflow:hidden; height:100%;
}
.stage{position:fixed; inset:0;}

.card{
  position:absolute; background:var(--card); border:1px solid var(--cardb); border-radius:16px;
  padding:18px; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(55,53,47,.04);
  touch-action:none; container-type:size;
}
.card.dragging, .card.resizing{box-shadow:0 12px 36px rgba(55,53,47,.16); user-select:none;}

.whead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none; margin-bottom:13px; cursor:grab;}
.whead:active{cursor:grabbing;}
.wname{font-size:13.5px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; white-space:nowrap;}
.wname .wic{color:var(--ink3); display:flex;}
.wname .wic svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.wsub{font-size:11.5px; color:var(--ink3); font-weight:500; white-space:nowrap;}

.wbody{flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0;}

.wfoot{flex:none; font-size:11px; color:var(--ink3); margin-top:12px; padding-top:12px; border-top:1px solid var(--line2);
  display:flex; align-items:center; justify-content:space-between; gap:8px;}

.seg{display:inline-flex; background:var(--fill); border-radius:8px; padding:2px; gap:2px; flex:none;}
.seg button{border:0; background:transparent; font:inherit; font-size:11px; font-weight:600; color:var(--ink3);
  padding:4px 9px; border-radius:6px; cursor:pointer; transition:.15s; letter-spacing:-.01em; white-space:nowrap;}
.seg button.on{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(55,53,47,.12);}

.ic{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink2); transition:.15s; flex:none;}
.ic:hover{background:var(--fill); color:var(--ink);}
.ic:active{transform:scale(.92);}
.ic svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.pill{font-size:11.5px; font-weight:600; color:var(--ink2); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; cursor:pointer; transition:.15s; white-space:nowrap; background:transparent; display:inline-flex; align-items:center; gap:6px;}
.pill:hover{background:var(--fill);}
.pill.on, .pill.dark{background:var(--accent); color:var(--on); border-color:var(--accent);}

.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}

/* 리사이즈 핸들 (frame.js가 주입) */
.rz{position:absolute; z-index:5;}
.rz.n{top:-4px; left:10px; right:10px; height:8px; cursor:ns-resize;}
.rz.s{bottom:-4px; left:10px; right:10px; height:8px; cursor:ns-resize;}
.rz.e{right:-4px; top:10px; bottom:10px; width:8px; cursor:ew-resize;}
.rz.w{left:-4px; top:10px; bottom:10px; width:8px; cursor:ew-resize;}
.rz.ne{top:-5px; right:-5px; width:14px; height:14px; cursor:nesw-resize;}
.rz.nw{top:-5px; left:-5px; width:14px; height:14px; cursor:nwse-resize;}
.rz.se{bottom:-5px; right:-5px; width:14px; height:14px; cursor:nwse-resize;}
.rz.sw{bottom:-5px; left:-5px; width:14px; height:14px; cursor:nesw-resize;}
.rz.corner::after{content:''; position:absolute; inset:4px; border-radius:50%; background:var(--handle); opacity:0; transition:.15s;}
.card:hover .rz.corner::after{opacity:1;}