@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ============ 뚝딱툴 · Flat (라운드X 다크X 아이콘X) ============ */
:root{
  --bg:#f2f2ef; --surface:#ffffff; --surface-2:#f6f6f3; --ink:#15171c; --muted:#565a63; --faint:#9498a1;
  --border:#161821; --line:#dcdcd6; --accent:#1633c0; --accent-dark:#0f259a; --accent-soft:#e6e9fa;
  --good:#12833f; --maxw:720px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  letter-spacing:-.01em; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* Header — 굵은 하단 라인으로 각진 인상 */
header.site{ background:var(--surface); border-bottom:2px solid var(--border); }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ font-weight:800; font-size:20px; letter-spacing:-.04em; color:var(--ink); }
.brand:hover{ text-decoration:none; }
nav.top{ display:flex; gap:20px; } nav.top a{ color:var(--muted); font-size:14px; font-weight:600; }
nav.top a:hover{ color:var(--accent); text-decoration:none; }

.hero{ padding:44px 0 10px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.hero h1{ font-size:clamp(1.8rem,1.2rem+2.6vw,2.5rem); font-weight:800; letter-spacing:-.045em; margin:0; line-height:1.1; }
.hero p{ color:var(--muted); font-size:16px; margin:14px 0 22px; max-width:36em; }

/* 도구 목록 — 각진 보더 블록, 아이콘 없음 */
.tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin:24px 0; }
.tool{ display:block; background:var(--surface); border:1px solid var(--line); padding:20px;
  color:var(--ink); transition:background .12s,border-color .12s; }
.tool:hover{ background:var(--surface-2); border-color:var(--accent); text-decoration:none; }
.tool .tt{ display:block; font-weight:800; font-size:16px; letter-spacing:-.025em; }
.tool:hover .tt{ color:var(--accent); }
.tool .td{ display:block; color:var(--muted); font-size:13px; margin-top:5px; }
.tool.soon{ opacity:.6; } .tool.soon:hover{ background:var(--surface); border-color:var(--line); }
.tool .badge{ display:inline-block; font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line); padding:2px 7px; margin-top:8px; }

.crumb{ font-size:13px; color:var(--faint); margin:22px 0 0; } .crumb a{ color:var(--muted); }
h1.page{ font-size:27px; letter-spacing:-.04em; margin:14px 0 4px; font-weight:800; }
.lead{ color:var(--muted); font-size:16px; margin:0 0 8px; }

.panel{ background:var(--surface); border:1px solid var(--border); padding:24px 22px; margin:20px 0; }
label{ display:block; font-weight:700; font-size:13.5px; margin:16px 0 7px; } label:first-child{ margin-top:0; }
input[type=number],input[type=text],select,textarea{ width:100%; padding:12px 14px; font-size:15px; font-family:inherit;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--border); border-radius:0; outline:none; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
textarea{ min-height:200px; resize:vertical; line-height:1.7; }
.row{ display:flex; gap:14px; } .row>*{ flex:1; min-width:0; }
@media(max-width:480px){ .row{ flex-direction:column; gap:0; } }

.drop{ border:2px dashed var(--border); padding:44px 20px; text-align:center; cursor:pointer; background:var(--surface-2); transition:.15s; }
.drop:hover,.drop.over{ border-color:var(--accent); background:var(--accent-soft); }
.drop .t{ font-weight:800; font-size:16px; } .drop .s{ color:var(--muted); font-size:13px; margin-top:6px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; padding:14px; border:none; border-radius:0;
  background:var(--accent); color:#fff; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; margin-top:16px; }
.btn:hover{ background:var(--accent-dark); }
.btn.sec{ background:var(--surface); color:var(--ink); border:1.5px solid var(--border); }
.range{ display:flex; align-items:center; gap:12px; } .range input[type=range]{ flex:1; accent-color:var(--accent); }
.range .val{ font-variant-numeric:tabular-nums; font-weight:800; min-width:52px; text-align:right; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin-top:18px; }
.stat{ background:var(--surface-2); border:1px solid var(--line); padding:14px; text-align:center; }
.stat .v{ font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .k{ color:var(--muted); font-size:12.5px; margin-top:2px; font-weight:600; }

.result{ margin-top:18px; padding:16px; background:var(--surface-2); border:1px solid var(--border); display:none; }
.result.show{ display:block; }
.preview{ max-width:100%; margin:10px 0; display:block; border:1px solid var(--line); }
.meta{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.out{ width:100%; padding:14px; font-size:17px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center;
  background:var(--surface); border:1.5px solid var(--border); border-radius:0; word-break:break-all; color:var(--ink); }

footer.site{ border-top:2px solid var(--border); margin-top:44px; background:var(--surface); }
footer.site .wrap{ padding:24px 20px 34px; }
.foot-top{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.foot-top a{ color:var(--muted); font-size:13px; font-weight:600; }
.foot-note{ color:var(--faint); font-size:12px; margin-top:12px; }
.prose h2{ font-size:18px; margin:24px 0 6px; letter-spacing:-.025em; font-weight:800; }
.prose p{ color:var(--muted); font-size:15px; margin:0 0 12px; } .prose p strong{ color:var(--ink); }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }