/* webCircuitAnalysis — 화면 */
:root {
  --bg: #f4f6fa; --panel: #ffffff; --panel2: #f8fafc; --line: #dfe4ec; --fg: #1d2433; --muted: #6b7486; --accent: #2563eb; --accent2: #06b6d4;
  --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --chip: #eef2f7; --code: #f1f5f9; --shadow: 0 10px 30px rgba(15, 23, 42, .14);
  /* 회로도 (KiCad 기본색에 가깝게) */
  --k-paper: #f5f4ef; --k-frame: #b9b5a6; --k-wire: #008400; --k-bus: #0000a4; --k-body: #840000; --k-fill: #ffffc2; --k-pin: #840000;
  --k-ref: #006464; --k-val: #006464; --k-pname: #006464; --k-pnum: #a40000; --k-label: #0b0b0b; --k-glabel: #840000; --k-sheet: #840084; --k-note: #2b2b9e;
  --k-in: rgba(37, 99, 235, .16); --k-region: #2563eb;
  --out-w: 50%; --dock-h: 300px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f141c; --panel: #161d28; --panel2: #1b2431; --line: #2a3546; --fg: #e5e9f0; --muted: #94a0b4; --accent: #60a5fa; --accent2: #22d3ee;
  --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --chip: #222c3b; --code: #1e2836; --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --k-paper: #1e2229; --k-frame: #4a4f59; --k-wire: #4ade80; --k-bus: #7c9cff; --k-body: #f28b82; --k-fill: #2b2a23; --k-pin: #f28b82;
  --k-ref: #5eead4; --k-val: #5eead4; --k-pname: #5eead4; --k-pnum: #fca5a5; --k-label: #e5e9f0; --k-glabel: #fca5a5; --k-sheet: #e879f9; --k-note: #a5b4fc;
  --k-in: rgba(96, 165, 250, .22); --k-region: #60a5fa;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.5 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }
code, pre, .mono { font-family: 'JetBrains Mono', Consolas, ui-monospace, monospace; font-size: 12.5px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.spacer { flex: 1; }
.pad { padding: 12px 14px; }

/* 단추 */
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.small { padding: 2px 8px; font-size: 12.5px; border-radius: 6px; }
.btn.on { background: var(--chip); border-color: var(--accent); color: var(--accent); }
.icon { border: 0; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 7px; border-radius: 7px; }
.icon:hover { background: var(--chip); }
.chip { border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.chip.ok { color: var(--ok); } .chip.bad { color: var(--bad); } .chip.warn { color: var(--warn); }
.sel { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 8px; max-width: 240px; }
.sel:empty { display: none; }

/* 배치 */
.app { display: flex; flex-direction: column; height: 100%; }
.top { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { text-decoration: none; color: var(--fg); font-size: 15px; white-space: nowrap; }
.grp { display: flex; align-items: center; gap: 6px; }
.seg { gap: 2px; }
.main { flex: 1; display: flex; min-height: 0; }
.left { flex: 1 1 auto; min-width: 280px; display: flex; flex-direction: column; min-height: 0; }
.right { flex: 0 0 var(--out-w); min-width: 280px; position: relative; background: var(--panel); }
.right iframe { width: 100%; height: 100%; border: 0; display: block; }
.sim-cover { position: absolute; inset: 0; }
.vgut { width: 6px; cursor: col-resize; background: var(--line); flex: 0 0 6px; }
.hgut { height: 6px; cursor: row-resize; background: var(--line); flex: 0 0 6px; }
.vgut:hover, .hgut:hover { background: var(--accent); }
.sch { flex: 1; position: relative; min-height: 120px; background: var(--panel2); overflow: hidden; }
.dock { flex: 0 0 var(--dock-h); display: flex; flex-direction: column; min-height: 80px; background: var(--panel); }
.status { display: flex; gap: 10px; padding: 3px 12px; font-size: 12.5px; border-top: 1px solid var(--line); background: var(--panel); }

/* 탭 */
.tabs { display: flex; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; flex: 0 0 auto; }
.tab { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.badge { font-size: 11px; background: var(--chip); border-radius: 999px; padding: 0 7px; color: var(--muted); }
.badge:empty { display: none; }
.tabbody { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; overflow: auto; display: none; }
.pane.on { display: block; }

/* 회로도 */
.schview { position: absolute; inset: 0; }
.sv { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: crosshair; }
.sv text { font-family: 'Pretendard Variable', Pretendard, 'Segoe UI', sans-serif; white-space: pre; }
.sv-sheet { fill: var(--k-paper); stroke: none; }
.sv-frame { fill: none; stroke: var(--k-frame); stroke-width: .25; }
.sv-wire { stroke: var(--k-wire); stroke-width: .18; stroke-linecap: round; }
.sv-bus { stroke: var(--k-bus); stroke-width: .5; stroke-linecap: round; }
.sv-junction { fill: var(--k-wire); }
.sv-nc { stroke: var(--k-bus); stroke-width: .15; }
.sv-g { stroke: var(--k-body); stroke-width: .2; stroke-linejoin: round; stroke-linecap: round; }
.sv-g.f-no { fill: none; } .sv-g.f-bg { fill: var(--k-fill); } .sv-g.f-ol { fill: var(--k-body); }
.sv-pin { stroke: var(--k-pin); stroke-width: .15; }
.sv-pin.f-no { fill: none; }
.sv-gtext { fill: var(--k-body); }
.sv-ref { fill: var(--k-ref); } .sv-val { fill: var(--k-val); }
.sv-pname { fill: var(--k-pname); } .sv-pnum { fill: var(--k-pnum); }
.sv-ltext { fill: var(--k-label); }
.sv-label.global .sv-ltext, .sv-label.hier .sv-ltext { fill: var(--k-glabel); }
.sv-lflag { fill: none; stroke: var(--k-glabel); stroke-width: .15; }
.sv-note { fill: var(--k-note); }
.sv-gline { fill: none; stroke: var(--k-note); stroke-width: .15; stroke-dasharray: .6 .4; }
.sv-subsheet rect { fill: rgba(132, 0, 132, .04); stroke: var(--k-sheet); stroke-width: .25; cursor: pointer; }
.sv-subsheet:hover rect { fill: rgba(132, 0, 132, .12); }
.sv-sname, .sv-sfile, .sv-slabel { fill: var(--k-sheet); }
.sv-spin { fill: var(--k-sheet); }
.sv-sym { cursor: pointer; }
.sv-sym.dnp { opacity: .45; }
.sv-sym.in .sv-g, .sv-sym.in .sv-pin { stroke: var(--accent); }
.sv-sym.in .sv-g.f-bg { fill: var(--k-in); }
.sv-sym.hl .sv-g { stroke: var(--warn); stroke-width: .45; }
.sv-region { fill: rgba(37, 99, 235, .06); stroke: var(--k-region); stroke-width: calc(var(--px, .1) * 2); stroke-dasharray: calc(var(--px, .1) * 8) calc(var(--px, .1) * 5); }
.sv-region.tmp { fill: rgba(37, 99, 235, .1); }
.sv-rtext { fill: var(--k-region); font-weight: 700; }
.sv-tip { position: absolute; z-index: 5; max-width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 7px 10px; font-size: 12.5px; pointer-events: none; }
.sv-tip b { font-size: 13.5px; }
.sv-tip table { border-collapse: collapse; margin-top: 4px; }
.sv-tip td { padding: 0 6px 0 0; font-family: Consolas, monospace; font-size: 11.5px; }

.drop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.drop-in { max-width: 520px; border: 2px dashed var(--line); border-radius: 16px; padding: 28px 24px; background: var(--panel); }
.drop-in .big { font-size: 46px; }
.drop-in h2 { margin: 4px 0 8px; font-size: 19px; }
.sch.dragover .drop-in, .sch.dragover { outline: 3px dashed var(--accent); outline-offset: -8px; }

/* 표 · 카드 */
table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
table.t th, table.t td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.t th { position: sticky; top: 0; background: var(--panel2); font-weight: 600; z-index: 1; color: var(--muted); font-size: 12px; }
table.t tr.row:hover { background: var(--panel2); cursor: pointer; }
table.t td.n { font-family: Consolas, monospace; white-space: nowrap; }
.tag { display: inline-block; border-radius: 6px; padding: 0 6px; font-size: 12px; background: var(--chip); white-space: nowrap; }
.tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); } .tag.bad { color: var(--bad); } .tag.skip { color: var(--muted); }
.summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 12px; background: var(--panel); }
.card h4 { margin: 0 0 6px; font-size: 14px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 160px; }
.field > span { font-size: 12px; color: var(--muted); }
textarea.in, input.in, select.in { border: 1px solid var(--line); background: var(--panel2); border-radius: 8px; padding: 6px 8px; width: 100%; }
textarea.in { resize: vertical; }
.log { margin: 0; padding: 8px 12px; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.55; }
.agentlog { max-height: 220px; overflow: auto; background: var(--code); border-radius: 8px; padding: 6px 9px; font-size: 12px; white-space: pre-wrap; word-break: break-word; font-family: Consolas, monospace; }
.md { font-size: 13.5px; line-height: 1.6; }
.md h1, .md h2, .md h3, .md h4 { font-size: 14.5px; margin: 10px 0 4px; }
.md p { margin: 4px 0 8px; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 22px; }
.md code { background: var(--code); border-radius: 4px; padding: 0 4px; }
.md pre { background: var(--code); border-radius: 8px; padding: 8px 10px; overflow: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; margin: 6px 0; }
.md td, .md th { border: 1px solid var(--line); padding: 3px 8px; }
.qa { border-left: 3px solid var(--accent); padding: 2px 0 2px 10px; margin: 10px 0; }
.qa .q { font-weight: 600; margin-bottom: 4px; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp 0.8s linear infinite; vertical-align: -1px; }
@keyframes sp { to { transform: rotate(360deg); } }
.dsdrop { border: 2px dashed var(--line); border-radius: 10px; padding: 14px; text-align: center; margin: 10px 12px; cursor: pointer; }
.dsdrop.dragover { border-color: var(--accent); background: var(--k-in); }
textarea.code { width: 100%; min-height: 260px; font-family: Consolas, monospace; font-size: 12.5px; border: 0; border-top: 1px solid var(--line); background: var(--panel2); padding: 8px 12px; resize: vertical; }

/* 창 · 알림 */
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-card { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); width: min(860px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.modal-body { padding: 14px 16px; overflow: auto; }
.modal-body h4 { margin: 14px 0 6px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.chk { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: #111827; color: #fff; padding: 9px 16px; border-radius: 10px; z-index: 60; box-shadow: var(--shadow); max-width: 80vw; }
.help h4 { margin: 12px 0 4px; }
.help ol, .help ul { padding-left: 20px; margin: 4px 0; }
.help pre { background: var(--code); padding: 8px 10px; border-radius: 8px; overflow: auto; }
.arch { width: 100%; height: auto; }

@media (max-width: 1360px) {
  .top { gap: 6px; }
  .brand b { display: none; }
  .top .btn { padding: 5px 9px; }
}
@media (max-width: 900px) {
  .main { flex-direction: column; }
  .right { flex: 0 0 55vh; min-width: 0; }
  .vgut { display: none; }
  .left { min-width: 0; }
  .dock { flex-basis: 220px; }
  .top { gap: 6px; padding: 6px 8px; }
  .brand b { display: none; }
}