:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --border: #d6dbe3;
  --text: #16202e;
  --muted: #66717f;
  --accent: #2b5fd9;
  --accent-soft: #e6edfd;
  --good: #128a4b;
  --good-soft: #e2f5eb;
  --bad: #c02626;
  --bad-soft: #fbe9e9;
  --wire: #2b3440;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --surface: #1a1f27;
    --surface-2: #232935;
    --border: #333c4a;
    --text: #e8ecf2;
    --muted: #98a3b3;
    --accent: #6f9bff;
    --accent-soft: #1e2a45;
    --good: #4ecf8f;
    --good-soft: #16302a;
    --bad: #ff7b7b;
    --bad-soft: #33201f;
    --wire: #cdd6e2;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.3; }

/* ── 회로도 SVG ─────────────────────────────────────────────────────────── */

.ct-svg {
  width: 100%;
  height: auto;
  max-width: 680px;
  display: block;
  margin: 0 auto;
}

.ct-wire, .ct-el {
  fill: none;
  stroke: var(--wire);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-src { fill: var(--surface); }
.ct-coil { fill: none; }
.ct-node { fill: var(--wire); }
.ct-term { fill: var(--surface); stroke: var(--wire); stroke-width: 2; }
.ct-dot { fill: var(--accent); }

.ct-gnd path {
  stroke: var(--wire);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.ct-label, .ct-term-label, .ct-sign {
  fill: var(--text);
  font-family: "Pretendard", "Malgun Gothic", sans-serif;
  font-size: 14px;
}

.ct-term-label { font-weight: 700; font-size: 15px; }
.ct-sign { font-size: 15px; font-weight: 700; }

.ct-annot, .ct-arrow-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.ct-arrow-line { stroke: var(--wire); }
.ct-arrow-head { fill: var(--wire); }
.ct-arrow-head-hl { fill: var(--accent); }

.ct-annot-label {
  fill: var(--accent);
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
}

.ct-couple {
  fill: none;
  stroke: var(--wire);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.ct-box {
  fill: var(--surface-2);
  stroke: var(--wire);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.ct-box-label { fill: var(--text); font-size: 15px; font-weight: 600; }