/* gsung.me 공통 스타일 — MADE5 디자인을 기반으로 사이트 전체에 적용 */
:root{
  --bg:#f3f4f2; --surface:#ffffff; --sunk:#eef0ed; --ink:#1c2321; --muted:#626b67; --line:#dde1dc;
  --accent:#1f5f55; --accent-ink:#ffffff; --good:#0f7a4f; --bad:#c2322a; --warn-bg:#fdf3d8; --warn-ink:#7a5a06;
  --seg-fee:#c98b2b; --seg-bank:#8d6fb0; --seg-cost:#7e8a86; --seg-profit:#1f5f55;
  --font-body:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-num:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141917; --surface:#1c2220; --sunk:#232a28; --ink:#e7ebe9; --muted:#9aa4a0; --line:#2f3835;
  --accent:#5fb3a5; --accent-ink:#0d1513; --good:#4cc68d; --bad:#ff7a70; --warn-bg:#3a3118; --warn-ink:#f0d48a;
  --seg-fee:#d9a24a; --seg-bank:#a98dcc; --seg-cost:#6f7b77; --seg-profit:#5fb3a5; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--font-body)}
a{color:var(--accent)}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* 사이트 헤더 · 푸터 */
.site-head{border-bottom:1px solid var(--line);background:var(--surface)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;flex-wrap:wrap}
.logo{font-weight:700;letter-spacing:.08em;color:var(--ink);text-decoration:none;font-size:16px}
.logo span{color:var(--accent)}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--sunk);color:var(--ink)}
.site-foot{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 40px;font-size:13px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}

/* 페이지 머리 */
.page-head{padding:24px 0 16px}
.crumb{font-size:12px;color:var(--muted);margin:0 0 6px}
.crumb a{color:var(--muted);text-decoration:none}
h1{font-size:24px;line-height:1.3;margin:0 0 6px;letter-spacing:-.01em}
.lead{color:var(--muted);margin:0;max-width:640px}

/* 도구 UI (MADE5) */
.cols{display:grid;gap:14px}
@media(min-width:820px){.cols.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:14px;min-width:0}
.card h2{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:0}
.group{display:grid;gap:10px}
.group-title{font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:420px){.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:grid;gap:4px;min-width:0}
.field label{font-size:12px;color:var(--muted)}
.box{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}
.box:focus-within{border-color:var(--accent)}
.box input,.box select{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:10px;font:500 15px var(--font-num);font-variant-numeric:tabular-nums}
.box select{font-family:var(--font-body);font-size:14px}
.box input:focus{outline:none}
.box .unit{padding:0 10px 0 2px;font-size:12px;color:var(--muted);white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 12px;font:600 13px var(--font-body);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.small{padding:5px 9px;font-size:12px}
.btn[hidden]{display:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mode{display:flex;gap:6px;flex-wrap:wrap}
.mode .btn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.hint{font-size:12px;color:var(--muted);margin:0}
.fxline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:12px;color:var(--muted);background:var(--sunk);border-radius:9px;padding:8px 10px}
.fxline .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}
.fxline .dot.live{background:var(--good)} .fxline .dot.manual{background:var(--seg-fee)}
.fxline .fxtext{flex:1;min-width:0}
.hero{display:grid;gap:4px}
.hero .k{font-size:12px;color:var(--muted)}
.hero .v{font-size:32px;font-weight:600;line-height:1.15;overflow-wrap:anywhere}
.hero .sub{font-size:13px;color:var(--muted)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--sunk);color:var(--muted);justify-self:start}
.pill.good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.pill.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.good{color:var(--good)} .bad{color:var(--bad)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kpi{background:var(--sunk);border-radius:10px;padding:10px 12px;min-width:0}
.kpi .k{font-size:12px;color:var(--muted)}
.kpi .v{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.kpi.accent{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--sunk)}
.bar span{display:block;height:100%;transition:width .25s}
.legend{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:8px;font-size:13px}
.legend i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend .lv{margin-left:auto}
.legend .lp{color:var(--muted);font-size:12px;width:52px;text-align:right}
.notice{background:var(--warn-bg);color:var(--warn-ink);border-radius:9px;padding:10px 12px;font-size:13px}
.note{background:var(--sunk);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--muted)}
details.costs summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
details.costs[open] summary{margin-bottom:12px}

/* 표 */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th{font-size:12px;color:var(--muted);font-weight:600}
.tbl tr.hl td{background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* 일괄 계산기 */
.box textarea{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:10px;font:500 13px/1.6 var(--font-num);resize:vertical;white-space:pre;overflow-x:auto}
.box textarea:focus{outline:none}
.result-card{margin-top:14px}
.stack{display:grid;gap:14px;min-width:0}
.stack[hidden]{display:none}
@media(min-width:820px){.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sort{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.sort:hover,.sort.on{color:var(--ink);text-decoration:underline}
.sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tbl.bulk td.name{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.tbl .row-bad td{background:color-mix(in srgb,var(--bad) 7%,transparent);color:var(--muted)}

/* 평단가 계산기 */
.avg-rows{display:grid;gap:8px}
.avg-row{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 48px;gap:8px;align-items:center}
.avg-head{font-size:12px;color:var(--muted)}
.avg-no{font-size:12px;color:var(--muted)}
.avg-row .btn.small{justify-content:center;padding:5px 0}
.avg-row.row-err .box{border-color:var(--bad)}

/* 설명 글 */
.article{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 20px 20px;margin-top:20px}
.article h2{font-size:19px;margin:24px 0 8px}
.article h3{font-size:15px;margin:18px 0 6px}
.article p,.article li{color:var(--ink)}
.article .formula{font-family:var(--font-num);font-size:13px;background:var(--sunk);border-radius:9px;padding:10px 12px;overflow-x:auto;white-space:pre}
.article details{border-bottom:1px solid var(--line);padding:10px 0}
.article summary{cursor:pointer;font-weight:600}
.article details p{margin:8px 0 0}

/* 메인 */
.tool-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tool{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink)}
.tool:hover{border-color:var(--accent)}
.tool .tag{font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.06em}
.tool strong{font-size:16px}
.tool span.desc{font-size:13px;color:var(--muted)}
.tool.soon{opacity:.6;pointer-events:none}
.section-title{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.06em;margin:28px 0 10px}

/* 광고 자리 (애드센스 승인 후 사용) */
.ad-slot{margin:20px 0;min-height:0}
.ad-slot:empty{display:none}

@media (prefers-reduced-motion:reduce){.bar span{transition:none}}