:root { --ink:#1d1d1f; --quiet:#6e6e73; --line:#d9d9de; --bg:#f5f5f7; --card:#fff; --accent:#2f6fde; --accent-bg:#e7f0ff; --warn:#b26a00; --err:#c0392b; --ok:#2e7d32; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; color:var(--ink); background:var(--bg); font-size:14px; line-height:1.55; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.layout { display:flex; min-height:100vh; }
nav { width:220px; background:#fff; border-right:1px solid var(--line); padding:20px 12px; position:sticky; top:0; height:100vh; flex-shrink:0; }
nav .brand { font-weight:700; font-size:16px; padding:4px 10px 14px; }
nav .brand small { display:block; color:var(--quiet); font-weight:400; font-size:12px; }
nav a.item { display:block; padding:8px 10px; border-radius:8px; color:var(--ink); margin-bottom:2px; }
nav a.item.active { background:var(--accent-bg); color:var(--accent); font-weight:600; }
nav .foot { position:absolute; bottom:16px; left:12px; right:12px; font-size:12px; color:var(--quiet); padding:0 10px; }
main { flex:1; padding:28px 36px; max-width:1200px; min-width:0; }
h1 { font-size:20px; margin:0 0 4px; } h2 { font-size:15px; margin:24px 0 8px; } .lead { color:var(--quiet); margin:0 0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:18px; }
.card h2:first-child { margin-top:0; }
.flash { background:#eef8ee; border:1px solid #bfe3c0; color:var(--ok); padding:10px 14px; border-radius:8px; margin-bottom:16px; }
.flash.bad { background:#fdeeee; border-color:#f3c0c0; color:var(--err); }
table { border-collapse:collapse; width:100%; } th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { background:#fafafa; font-weight:600; color:var(--quiet); font-size:12.5px; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
input[type=number], input[type=text], input[type=password], select, textarea { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
input[type=number] { width:76px; text-align:right; } input.wide { width:100%; }
button, .btn { font:inherit; font-weight:600; padding:8px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button.secondary, .btn.secondary { background:#fff; color:var(--accent); }
button.small { padding:4px 10px; font-size:12.5px; }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:24px; flex-wrap:wrap; } .row > * { flex:1; min-width:260px; }
.tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.tag.error { background:#fdeeee; color:var(--err); } .tag.warn { background:#fff6e5; color:var(--warn); } .tag.info { background:#eef2f7; color:var(--quiet); }
.tag.ok { background:#eef8ee; color:var(--ok); }
.muted { color:var(--quiet); } .small { font-size:12.5px; } .chg { background:#e7f0ff; }
.grid-radio label { margin-right:16px; }
.file-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line); }
.file-row .name { min-width:200px; font-weight:600; }
.file-row .status { flex:1; color:var(--quiet); font-size:12.5px; }
#busy { display:none; position:fixed; inset:0; background:rgba(255,255,255,.8); z-index:9; align-items:center; justify-content:center; font-size:16px; font-weight:600; text-align:center; }
#busy .bar { width:320px; height:8px; background:#e5e5ea; border-radius:4px; margin:14px auto 0; overflow:hidden; }
#busy .bar div { height:100%; width:0; background:var(--accent); transition:width .2s; }
ul.compact { margin:4px 0; padding-left:18px; }
code { background:#f0f0f3; padding:1px 5px; border-radius:4px; font-size:12.5px; }
@media (max-width: 760px) {
  .layout { flex-direction:column; } nav { width:auto; height:auto; position:static; display:flex; flex-wrap:wrap; gap:4px; padding:12px; }
  nav .brand { width:100%; padding-bottom:6px; } nav .foot { position:static; width:100%; margin-top:8px; } nav a.item { padding:6px 10px; font-size:13px; }
  main { padding:18px 16px; }
}