/* ── Fonts (오프라인 번들, OFL) ─────────────────────────────── */
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap;
  src:url("fonts/jbmono-400.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap;
  src:url("fonts/jbmono-500.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:700; font-display:swap;
  src:url("fonts/jbmono-700.woff2") format("woff2"); }

/* ── Design tokens (shadcn neutral / zinc) ─────────────────── */
:root{
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-sans:system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --radius:10px;
}
[data-theme="dark"]{
  --bg:hsl(240 10% 3.9%); --fg:hsl(0 0% 98%);
  --card:hsl(240 9% 6%); --elev:hsl(240 6% 10%);
  --muted:hsl(240 4% 14%); --muted-fg:hsl(240 5% 60%);
  --border:hsl(240 4% 16%); --border-strong:hsl(240 4% 26%);
  --primary:hsl(0 0% 98%); --primary-fg:hsl(240 6% 10%);
  --accent:hsl(141 65% 55%); --accent-dim:hsl(141 40% 22%);
  --ring:hsl(141 65% 55%);
  --grid:hsla(0 0% 100% / .025); --shadow:0 1px 0 hsla(0 0% 100% / .04), 0 16px 40px -24px hsla(0 0% 0% / .8);
}
[data-theme="light"]{
  --bg:hsl(0 0% 100%); --fg:hsl(240 10% 3.9%);
  --card:hsl(0 0% 100%); --elev:hsl(240 5% 98%);
  --muted:hsl(240 5% 96%); --muted-fg:hsl(240 4% 42%);
  --border:hsl(240 6% 90%); --border-strong:hsl(240 6% 80%);
  --primary:hsl(240 6% 10%); --primary-fg:hsl(0 0% 98%);
  --accent:hsl(142 71% 33%); --accent-dim:hsl(142 50% 90%);
  --ring:hsl(142 71% 33%);
  --grid:hsla(240 10% 4% / .04); --shadow:0 1px 2px hsla(240 10% 4% / .06), 0 12px 32px -20px hsla(240 10% 4% / .25);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; min-height:100vh; line-height:1.55;
}
.grid-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
code{font-family:var(--font-mono); font-size:.85em; background:var(--muted);
  border:1px solid var(--border); border-radius:5px; padding:.05em .4em}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar{display:flex; align-items:center; justify-content:space-between;
  max-width:760px; margin:0 auto; padding:22px 24px 8px}
.brand{font-family:var(--font-mono); font-size:14px; display:flex; align-items:center; gap:2px; letter-spacing:-.01em;
  background:none; border:0; padding:4px 6px; margin:-4px -6px; border-radius:8px; color:var(--fg); cursor:pointer; transition:.15s}
.brand:hover{background:var(--muted)}
.brand:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 25%,transparent)}
.caret{color:var(--accent); margin-right:6px}
.brand-name{font-weight:700} .sep{color:var(--muted-fg)} .brand-sub{color:var(--muted-fg)}
.badge{font-family:var(--font-mono); font-size:11px; color:var(--accent);
  border:1px solid var(--border-strong); border-radius:999px; padding:2px 9px; margin-left:10px}
.topbar-right{display:flex; align-items:center; gap:12px}
.ver{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-fg)}
.ghost-chip{font-family:var(--font-mono); font-size:11.5px; color:var(--fg);
  background:transparent; border:1px solid var(--border); border-radius:7px; padding:4px 10px; cursor:pointer; transition:.15s}
.ghost-chip:hover{background:var(--muted); border-color:var(--border-strong)}

/* ── Shell / panel ─────────────────────────────────────────── */
.shell{max-width:760px; margin:0 auto; padding:8px 24px 56px}
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}

/* ── Stepper ───────────────────────────────────────────────── */
.stepper{display:flex; gap:0; list-style:none; margin:0 0 0; padding:0;
  border:1px solid var(--border); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden;
  background:var(--elev)}
.stepper li{flex:1; display:flex; align-items:center; gap:9px; padding:13px 18px;
  font-family:var(--font-mono); font-size:13px; color:var(--muted-fg); border-right:1px solid var(--border); transition:.2s}
.stepper li:last-child{border-right:none}
.stepper li .sn{font-weight:700; color:var(--border-strong)}
.stepper li.active{color:var(--fg); background:var(--card)}
.stepper li.active .sn{color:var(--accent)}
.stepper li.done .sn{color:var(--accent)}
.stepper li.done{color:var(--muted-fg)}
.shell .panel{border-top-left-radius:0; border-top-right-radius:0}

/* panel padding */
.step{padding:26px 26px 8px; animation:rise .28s ease both}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.step-head{margin-bottom:20px}
.kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.step-head h1{font-size:22px; margin:6px 0 6px; letter-spacing:-.02em; font-weight:650}
.step-head p{margin:0; color:var(--muted-fg); font-size:14px; max-width:60ch}

/* ── Step 1: dropzone + fields ─────────────────────────────── */
.dropzone{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  border:1.5px dashed var(--border-strong); border-radius:var(--radius); padding:22px; margin-bottom:18px;
  background:var(--elev); transition:.18s; text-align:center}
.dropzone:hover,.dropzone.drag{border-color:var(--accent); background:var(--accent-dim)}
.dz-icon{font-family:var(--font-mono); color:var(--accent); font-size:14px}
.dz-main{font-size:14px}
.dz-sub{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-fg)}
.field{margin-bottom:6px}
.field-label{display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--muted-fg);
  text-transform:lowercase; letter-spacing:.02em; margin:4px 2px 6px}
textarea{width:100%; resize:vertical; background:var(--bg); color:var(--fg);
  border:1px solid var(--border); border-radius:8px; padding:11px 12px;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.6; transition:.15s}
textarea::placeholder{color:var(--muted-fg); opacity:.7}
textarea:focus{outline:none; border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 22%,transparent)}
.idea-row{display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-top:12px}
.idea-hint{font-family:var(--font-mono); font-size:12px; color:var(--muted-fg)}
.idea-hint.warn{color:var(--accent)}
.btn-sm{padding:7px 12px; font-size:12px}
.adv{margin-top:12px}
.adv summary{cursor:pointer; font-family:var(--font-mono); font-size:12px; color:var(--muted-fg);
  list-style:none; padding:6px 0}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"+ "; color:var(--accent)}
.adv[open] summary::before{content:"− "}

/* ── Step 2: tool list ─────────────────────────────────────── */
.tool-list{display:flex; flex-direction:column; gap:9px}
.tool-row{display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:13px 15px; transition:.15s; color:var(--fg)}
.tool-row:hover{border-color:var(--border-strong); background:var(--elev)}
.tool-row.sel{border-color:var(--accent); background:var(--accent-dim)}
.tool-row:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 22%,transparent)}
.tool-radio{font-family:var(--font-mono); font-size:13px; color:var(--muted-fg); flex:none}
.tool-row.sel .tool-radio{color:var(--accent)}
.tool-info{flex:1; min-width:0}
.tool-name{display:block; font-family:var(--font-mono); font-weight:600; font-size:14px}
.tool-path{display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--muted-fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px}

/* ── Step 3: summary + console ─────────────────────────────── */
.summary{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 18px;
  border:1px solid var(--border); border-radius:9px; padding:14px 16px; background:var(--elev)}
.summary dt{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-fg); text-transform:uppercase; letter-spacing:.06em}
.summary dd{margin:0; font-family:var(--font-mono); font-size:12.5px; word-break:break-all}
.console{margin:16px 0 14px; border:1px solid var(--border); border-radius:9px; overflow:hidden;
  background:hsl(240 12% 5%)}
.console-bar{display:flex; align-items:center; gap:7px; padding:8px 12px; border-bottom:1px solid hsl(240 6% 14%);
  background:hsl(240 10% 8%)}
.cdot{width:9px; height:9px; border-radius:50%; background:hsl(240 5% 28%)}
.ctitle{font-family:var(--font-mono); font-size:11px; color:hsl(240 5% 55%); margin-left:6px}
.console-body{margin:0; padding:13px 14px; font-family:var(--font-mono); font-size:12.5px; line-height:1.6;
  color:hsl(141 60% 70%); white-space:pre-wrap; word-break:break-word}
.prompt{color:hsl(141 65% 55%); font-weight:700}
.blink{animation:blink 1.1s steps(1) infinite; color:hsl(141 60% 70%)}
@keyframes blink{50%{opacity:0}}
.hint{font-size:13px; color:var(--muted-fg); margin:8px 2px 4px}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{font-family:var(--font-mono); font-size:13px; font-weight:500; cursor:pointer;
  border-radius:8px; padding:9px 16px; border:1px solid transparent; transition:.15s; line-height:1}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 25%,transparent)}
.btn-primary{background:var(--primary); color:var(--primary-fg); border-color:var(--primary)}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.4; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-ghost:hover{background:var(--muted)}
.btn-ghost:disabled{opacity:.4; cursor:not-allowed}
.btn-block{width:100%; padding:13px; font-size:14px; margin-top:4px}

/* ── Wizard nav ────────────────────────────────────────────── */
.wizard-nav{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 26px 22px; margin-top:8px; border-top:1px solid var(--border)}
.progress{flex:1; display:flex; gap:6px; justify-content:center}
.progress .pip{width:26px; height:3px; border-radius:2px; background:var(--border-strong); transition:.2s}
.progress .pip.on{background:var(--accent)}

.foot{text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--muted-fg); padding:22px 16px 8px}

@media (max-width:560px){
  .stepper li .sl{display:none}
  .step{padding:22px 18px 6px}
  .wizard-nav{padding:14px 18px 20px}
}