:root{
  --bg:#14161c; --bg2:#1d212b; --bg3:#262b38; --fg:#f2f4f8; --mut:#8a919c;
  --acc:#30D158; --acc2:#0A84FF; --line:#2b3140;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
  overscroll-behavior-y:contain}
body{padding-bottom:env(safe-area-inset-bottom)}

.bar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px; background:rgba(20,22,28,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{font-weight:800; font-size:17px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon-btn{background:none; border:0; color:var(--fg); font-size:26px; line-height:1;
  width:34px; height:34px; border-radius:10px; cursor:pointer}
.icon-btn:active{background:var(--bg3)}
.lang{background:var(--bg3); color:var(--fg); border:0; border-radius:9px; padding:7px 8px; font-size:13px; max-width:38vw}

main{padding:14px 14px 40px; max-width:760px; margin:0 auto}

/* 허브 */
.hero{padding:8px 2px 16px}
.hero h1{margin:0 0 6px; font-size:24px; line-height:1.28}
.hero p{margin:0; color:var(--mut); font-size:14px; line-height:1.6}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.card{display:flex; flex-direction:column; gap:5px; background:var(--bg2); border:1px solid var(--line);
  border-radius:15px; padding:14px 13px; text-decoration:none; color:var(--fg); cursor:pointer;
  transition:transform .08s ease}
.card:active{transform:scale(.975)}
.card .ic{font-size:26px; line-height:1}
.card b{font-size:15px}
.card small{color:var(--mut); font-size:12px; line-height:1.45}
.sec-t{margin:24px 0 10px; font-size:13px; color:var(--mut); font-weight:700; letter-spacing:.3px}

/* 설치 안내 */
.install{margin-top:22px; background:linear-gradient(140deg,#1e2a20,#1d212b); border:1px solid #2f4636;
  border-radius:15px; padding:15px}
.install b{display:block; margin-bottom:5px; font-size:15px}
.install p{margin:0; color:#b6c4b9; font-size:13px; line-height:1.65}

/* 도구 공통 */
.tool-h{margin:2px 0 14px}
.tool-h h2{margin:0 0 5px; font-size:20px}
.tool-h p{margin:0; color:var(--mut); font-size:13px; line-height:1.55}
.panel{background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:13px; margin-bottom:11px}
.row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:7px 0}
.row label{color:var(--mut); font-size:13px; min-width:74px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--bg3);
  color:var(--fg); border:0; border-radius:11px; padding:12px 15px; font-size:15px; cursor:pointer;
  font-family:inherit}
.btn:active{opacity:.75}
.btn.pri{background:var(--acc); color:#08210e; font-weight:700; width:100%; padding:15px}
.btn.blue{background:var(--acc2); color:#fff}
.btn.sm{padding:8px 11px; font-size:13px; border-radius:9px}
select,input[type=text],input[type=number],textarea{background:var(--bg3); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:10px; font-size:15px; font-family:inherit; width:100%}
textarea{min-height:150px; line-height:1.6; resize:vertical}
input[type=range]{width:100%; accent-color:var(--acc)}
.drop{border:2px dashed #39415a; border-radius:14px; padding:26px 14px; text-align:center; color:var(--mut);
  font-size:14px; cursor:pointer; background:var(--bg2)}
.drop.on{border-color:var(--acc); color:var(--fg)}
.list{margin:10px 0 0; max-height:44vh; overflow:auto; -webkit-overflow-scrolling:touch}
.item{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font-size:13px}
.item:last-child{border-bottom:0}
.item .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .sz{color:var(--mut); font-size:12px; white-space:nowrap}
.item img{width:38px; height:38px; object-fit:cover; border-radius:7px; background:var(--bg3)}
.ok{color:var(--acc)} .warn{color:#FFD400} .err{color:#FF453A}
.bar-prog{height:6px; background:var(--bg3); border-radius:99px; overflow:hidden; margin:10px 0 2px}
.bar-prog i{display:block; height:100%; width:0; background:var(--acc); transition:width .18s}
.hint{color:var(--mut); font-size:12px; line-height:1.6; margin:8px 0 0}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{background:var(--bg3); border:1px solid var(--line); border-radius:99px; padding:8px 13px; font-size:13px; cursor:pointer}
.chip.on{background:var(--acc); color:#08210e; border-color:var(--acc); font-weight:700}
.swatch{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer}
.swatch.on{border-color:#fff}
canvas.paint{width:100%; background:#fff; border-radius:12px; touch-action:none; display:block}
.viewer-box{background:#0c0d11; border-radius:12px; padding:8px; overflow:auto; max-height:66vh}
.viewer-box img{width:100%; display:block; border-radius:8px}
.viewer-box pre{margin:0; white-space:pre-wrap; word-break:break-word; color:var(--fg);
  font-size:14px; line-height:1.7; font-family:inherit}
table.sheet{border-collapse:collapse; font-size:12.5px; width:max-content}
table.sheet td{border:1px solid var(--line); padding:6px 9px; white-space:nowrap; max-width:190px;
  overflow:hidden; text-overflow:ellipsis}
table.sheet tr:first-child td{background:var(--bg3); font-weight:700; position:sticky; top:0}
.memo-card{background:#FFF19E; color:#282308; border-radius:13px; padding:12px; margin-bottom:9px}
.memo-card textarea{background:transparent; border:0; color:#282308; min-height:76px; padding:0; font-size:15px}
.cal{width:100%; border-collapse:collapse; text-align:center}
.cal th{color:var(--mut); font-size:12px; padding:7px 0; font-weight:600}
.cal td{padding:0}
.cal button{width:100%; aspect-ratio:1/1; background:none; border:0; color:var(--fg); font-size:15px;
  border-radius:11px; cursor:pointer; position:relative; font-family:inherit}
.cal button.today{background:var(--acc); color:#08210e; font-weight:800}
.cal button.dot::after{content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--acc2)}
.cal button.sun{color:#FF6B6B} .cal button.sat{color:#6FA8FF}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#2b3140; color:#fff;
  padding:12px 19px; border-radius:12px; font-size:14px; z-index:60; max-width:88vw; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
.foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); color:var(--mut); font-size:12px; line-height:1.7}
.foot a{color:var(--mut)}