/* ToolayBox 툴 기본 스타일 (템플릿) — 색은 토큰만 바꿔서 툴마다 포인트 색을 줌 */
:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --hover:#efeee9; --soft:#f3f2ee;
  --accent:#6741d9; --accent-soft:#efeafd;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:calc(100vh - 48px);display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer}
.btn:hover{background:var(--hover)}
.btn--sm{height:30px;padding:0 12px;font-size:12px}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:28px 28px 64px;display:flex;flex-direction:column;gap:16px}

.safe-note{display:flex;align-items:flex-start;gap:8px;margin:0 2px;font-size:12.5px;line-height:1.55;color:var(--sub)}
.safe-note b{color:var(--ink-2);font-weight:500}
.safe-note .dot{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:#2f9e6b}
.limit-note .dot{background:#d08a1e}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.toast.is-show{opacity:1;transform:translate(-50%,0)}



/* ── 업무 화면 (부수는 대상) ── 블루프린트 느낌: 각진 선 · 모서리 표시 · 모눈 */
.wrap{max-width:1264px;gap:14px}
.smash{
  --s-bg:#f2f2f3; --s-ink:#1d1f20; --s-line:rgba(29,31,32,.16); --s-dim:rgba(29,31,32,.6);
  --s-acc:#5980a6; --s-acc-d:#416180; --s-acc-dd:#2c455d; --s-paper:#fbfbfc; --s-key:#e3e3e5;
  --s-glass:rgba(181,217,253,.38); --s-glass-l:rgba(65,97,128,.35); --s-dark:#2b2b2d; --s-screen:#1d2d3d; --s-screen-t:#d6ebff;
  --s-head:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;
  position:relative;padding:0 32px 120px;border:1px solid var(--s-line);background-color:var(--s-bg);color:var(--s-ink);
  font-family:"Barlow","Pretendard Variable",Pretendard,sans-serif;font-size:15px;line-height:1.55;
  background-image:linear-gradient(rgba(29,31,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(29,31,32,.045) 1px,transparent 1px);background-size:32px 32px;
  user-select:none;-webkit-user-select:none;cursor:crosshair;touch-action:pan-y;overflow:hidden;
}
.smash.is-bomb{cursor:cell}
.smash.is-swing{touch-action:none}
.sm-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:48px}

.blueprint{position:relative;border:1px solid var(--s-line,var(--line))}
.blueprint>.corner{position:absolute;width:11px;height:11px;color:rgba(29,31,32,.55)}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.blueprint>.corner.tl{top:-6px;left:-6px}.blueprint>.corner.tr{top:-6px;right:-6px}
.blueprint>.corner.bl{bottom:-6px;left:-6px}.blueprint>.corner.br{bottom:-6px;right:-6px}

/* 버튼 · 입력 (도구 막대와 화면 안에서 같이 씀) */
.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;font-weight:600;font-size:14px;line-height:1.2;padding:7px 12px;border:1px solid var(--line-2);background:transparent;color:var(--ink);border-radius:0;list-style:none}
.sm-btn::-webkit-details-marker{display:none}
.sm-btn-1{background:#5980a6;border-color:#5980a6;color:#f2f2f3}
.sm-btn-1:hover{background:#597ea3}
.sm-btn-2:hover{background:var(--hover)}
.smash .sm-btn{border-color:var(--s-line);color:var(--s-ink);font-size:15px;padding:12px 20px}
.smash .sm-btn-1{background:var(--s-acc);border-color:var(--s-acc);color:var(--s-bg)}
.sm-input{flex:1;min-width:220px;max-width:420px;min-height:44px;padding:6px 10px;font:inherit;font-size:15px;color:var(--s-ink);background:#e9e9ea;border:1px solid var(--s-line);border-radius:0;user-select:text;-webkit-user-select:text}
.sm-input:focus{outline:2px solid var(--s-acc);outline-offset:0}

/* 위쪽 도구 막대 (부서지지 않음) */
.sm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:70}
.sm-seg{display:flex;border:1px solid var(--line-2);overflow:hidden}
.sm-seg button{font:inherit;font-size:13px;padding:7px 14px;border:0;cursor:pointer;background:transparent;color:var(--ink)}
.sm-seg button+button{border-left:1px solid var(--line-2)}
.sm-seg button[aria-pressed="true"]{background:#5980a6;color:#f2f2f3}
.sm-count{font-family:"Barlow Condensed","Pretendard Variable",sans-serif;font-size:15px;letter-spacing:.06em;min-width:76px;margin-left:auto;text-align:right}
.sm-count b{font-size:20px;color:#416180}
.sm-opt{position:relative}
.sm-opt-in{position:absolute;right:0;top:calc(100% + 6px);display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--panel);border:1px solid var(--line-2);font-size:13px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.sm-opt-in label{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sm-opt-in select{font:inherit;font-size:13px;padding:4px 6px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}

/* 화면 내용 */
.sm-nav{display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding:20px 0;border-bottom:1px solid var(--s-line)}
.sm-logo{font-family:var(--s-head);font-weight:700;font-size:22px;letter-spacing:.08em}
.sm-links{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
.sm-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px;align-items:end}
.sm-col{display:flex;flex-direction:column;gap:16px}
.sm-col>*{align-self:flex-start}
.sm-kick{font-size:12px;letter-spacing:.12em;color:var(--s-acc-d)}
.sm-big{margin:0;font-family:var(--s-head);font-weight:700;font-size:clamp(48px,8vw,104px);line-height:.98;letter-spacing:-.015em;text-wrap:balance;align-self:stretch !important}
.sm-lead{margin:0;font-size:17px;max-width:460px}
.sm-row{display:flex;gap:12px;flex-wrap:wrap}
.sm-prog{padding:24px;display:flex;flex-direction:column;gap:14px}
.sm-prog-h{display:flex;justify-content:space-between;font-size:13px}
.sm-prog-h b{font-family:var(--s-head);font-size:18px;font-weight:600}
.sm-prog-bar{height:10px;border:1px solid var(--s-line)}
.sm-prog-bar div{width:3%;height:100%;background:var(--s-acc)}
.sm-dim{font-size:12px;color:var(--s-dim)}

.sm-objs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px;align-items:end}
.sm-obj{display:flex;flex-direction:column;gap:10px}
.sm-cap{font-size:12px;letter-spacing:.12em;color:var(--s-acc-d)}
.sm-window{height:260px;padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;border-color:rgba(29,31,32,.4)}
.sm-window>div{background:var(--s-glass);border:1px solid var(--s-glass-l)}
.sm-stand{display:flex;flex-direction:column;align-items:center;gap:4px;height:260px;justify-content:flex-end}
.sm-plate{width:150px;height:150px;border-radius:50%;background:var(--s-paper);border:1px solid rgba(29,31,32,.3);display:grid;place-items:center}
.sm-plate div{width:96px;height:96px;border-radius:50%;border:1px solid rgba(29,31,32,.18)}
.sm-dish{width:170px;height:12px;background:var(--s-paper);border:1px solid rgba(29,31,32,.3);border-radius:6px}
.sm-mon{width:100%;max-width:300px;height:180px;padding:8px;background:var(--s-dark);border-radius:3px}
.sm-screen{height:100%;background:var(--s-screen);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:var(--s-screen-t);font-size:13px;text-align:center;padding:0 8px}
.sm-screen b{font-family:var(--s-head);font-size:22px;font-weight:600}
.sm-neck{width:34px;height:40px;background:var(--s-dark);margin-top:-4px}
.sm-foot{width:130px;height:10px;background:var(--s-dark);border-radius:2px;margin-top:-4px}
.sm-kb{width:100%;padding:10px;background:var(--s-key);border:1px solid rgba(29,31,32,.3);border-radius:4px;display:flex;flex-direction:column;gap:5px;font-family:var(--s-head);font-size:13px}
.sm-kb>div{display:grid;gap:5px}
.sm-kb span{height:26px;display:grid;place-items:center;background:var(--s-paper);border:1px solid rgba(29,31,32,.25);border-radius:3px}

.sm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.sm-card{display:flex;flex-direction:column;gap:7px;padding:10px}
.sm-ck{font-size:10px;letter-spacing:.1em;color:var(--s-acc)}
.sm-ct{font-family:var(--s-head);font-weight:600;font-size:30px;line-height:1.2;overflow-wrap:anywhere}
.sm-cb{margin:0;font-size:13px;opacity:.8;flex:1;overflow-wrap:anywhere}
.sm-todo{grid-row:span 2}
.sm-list{display:flex;flex-direction:column;gap:10px;font-size:14px}
.sm-list>div{display:flex;gap:10px;align-items:center}
.sm-list span{flex:none;width:14px;height:14px;border:1px solid rgba(29,31,32,.4)}
.sm-add{display:flex;gap:12px;flex-wrap:wrap;align-items:center;cursor:default}
.smash .sm-add .sm-btn{min-height:44px;font-size:14px;padding:0 18px}
.sm-type{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}

/* 부서진 조각을 그리는 캔버스 (화면 전체에 겹침, 클릭은 통과) */
.sm-canvas{position:fixed;inset:0;pointer-events:none;z-index:50}

@media (max-width:640px){
  .smash{padding:0 16px 100px}
  .sm-in{gap:36px}
  .sm-count{margin-left:0}
}

/* 다크 모드 (인쇄는 라이트 그대로) */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#141318; --surface:#1a1920; --panel:#1f1e26; --panel-soft:#24232c;
    --ink:#ecebf0; --ink-hover:#ffffff; --ink-2:#c9c7d1; --sub:#a09eab; --muted:#8a8895;
    --line:#2e2d36; --line-2:#393843; --hover:#2a2932; --soft:#26252d;
    --accent:#a48ff7; --accent-soft:rgba(164,143,247,.16);
  }
  :root[data-theme="dark"] .smash{
    --s-bg:#17191b; --s-ink:#e4e6e8; --s-line:rgba(228,230,232,.16); --s-dim:rgba(228,230,232,.6);
    --s-acc:#749dc4; --s-acc-d:#94bce3; --s-paper:#2a2d30; --s-key:#202326;
    --s-glass:rgba(116,157,196,.22); --s-glass-l:rgba(148,188,227,.35); --s-dark:#0c0d0e;
    background-image:linear-gradient(rgba(228,230,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(228,230,232,.05) 1px,transparent 1px);
  }
  :root[data-theme="dark"] .blueprint>.corner{color:rgba(228,230,232,.55)}
  :root[data-theme="dark"] .sm-input{background:#202326}
  :root[data-theme="dark"] .sm-count b{color:#94bce3}
  :root[data-theme="dark"] .smash [style*="rgba(29,31,32"],:root[data-theme="dark"] .sm-plate,:root[data-theme="dark"] .sm-dish,:root[data-theme="dark"] .sm-kb,:root[data-theme="dark"] .sm-kb span,:root[data-theme="dark"] .sm-window,:root[data-theme="dark"] .sm-list span{border-color:rgba(228,230,232,.28)}
}