/* 유체 회로 편집기 */
:root {
  --sym: #1f2a37;
  --sym-bg: #ffffff;
  --sym-act: #e7f0ff;
  --wire: #475569;
  --fl-tank: #3b82f6;
  --canvas: #fbfcfd;
  --grid-dot: #cfd6df;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sym: #d7dee8; --sym-bg: #1b222d; --sym-act: #22314d; --wire: #8b97a8; --canvas: #121820; --grid-dot: #2a3442; }
}
:root[data-theme="dark"] { --sym: #d7dee8; --sym-bg: #1b222d; --sym-act: #22314d; --wire: #8b97a8; --canvas: #121820; --grid-dot: #2a3442; }

.fe { position: absolute; inset: 0; display: flex; }
.fe-palette { width: 214px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); min-height: 0; }
.fe-ptitle { padding: 10px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fe-search { margin: 4px 10px 6px; width: auto; height: 30px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 7px; background: var(--panel2); }
.fe-search:focus { outline: none; border-color: var(--accent); }
.fe-plist { flex: 1; overflow: auto; padding: 0 6px 12px; }
.fe-cat summary { cursor: pointer; padding: 8px 6px 4px; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none; }
.fe-cat summary::-webkit-details-marker { display: none; }
.fe-cat summary::before { content: '▸'; display: inline-block; width: 12px; transition: transform .1s; }
.fe-cat[open] summary::before { transform: rotate(90deg); }
.fe-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fe-pitem { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 11px; line-height: 1.25; text-align: center; color: var(--text); cursor: grab; min-height: 86px; }
.fe-pitem:hover { border-color: var(--accent); background: var(--accent-soft); }
.fe-pitem span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fe-pv { width: 100%; height: 48px; }

.fe-canvas { position: relative; flex: 1; min-width: 0; background: var(--canvas); outline: none; overflow: hidden; }
.fe-svg { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
.fe-svg.panning { cursor: grabbing !important; }
.grid-dot { fill: var(--grid-dot); }
.fe-tools { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fe-tools .icon-btn { width: 30px; height: 30px; }
.fe-tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.fe-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.fe-tip { position: absolute; z-index: 4; padding: 6px 10px; border-radius: 8px; background: #111827; color: #fff; font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; }

/* 기호 */
.fe-svg .s, .fe-pv .s { fill: none; stroke: var(--sym); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.fe-svg .s.f, .fe-pv .s.f { fill: var(--sym-bg); }
.fe-svg .s.fill, .fe-pv .s.fill, .fe-svg .arw, .fe-pv .arw { fill: var(--sym); stroke: var(--sym); stroke-width: 1; }
.fe-svg .s.thin, .fe-pv .s.thin { stroke-width: 1; }
.fe-svg .s.dash, .fe-pv .s.dash { stroke-dasharray: 4 3; stroke-width: 1.1; }
.fe-svg .nofill, .fe-pv .nofill { fill: none !important; }
.fe-svg .box.act { fill: var(--sym-act); }
.fe-svg .s.on, .fe-pv .s.on { fill: #22c55e; stroke: #15803d; }
.fe-svg .on-soft { fill: color-mix(in srgb, #22c55e 25%, var(--sym-bg)); }
.fe-svg .body, .fe-pv .body { fill: var(--sym-bg); }
.fe-svg .piston, .fe-pv .piston { fill: var(--sym); }
.fe-svg .rod, .fe-pv .rod { fill: color-mix(in srgb, var(--sym) 18%, var(--sym-bg)); }
.fe-svg .sensor, .fe-pv .sensor { fill: var(--sym-bg); stroke-width: 1.1; }
.fe-svg .sensor.on { fill: #22c55e; stroke: #15803d; }
.fe-svg .unit, .fe-pv .unit { fill: none; stroke-dasharray: 5 3; stroke-width: 1.1; }
.fe-svg .needle { stroke: #dc2626; stroke-width: 1.8; }
.fe-svg .rotor { stroke: #dc2626; stroke-width: 2; }
.fe-svg .oil { fill: color-mix(in srgb, #f59e0b 55%, transparent); }
.fe-svg .junction { fill: var(--wire); }
.fe-svg .btn, .fe-pv .btn { stroke: rgba(0,0,0,.25); stroke-width: 1; }
.btn-green { fill: #16a34a; } .btn-red { fill: #dc2626; } .btn-yellow { fill: #eab308; } .btn-blue { fill: #2563eb; }
.fe-svg .btn.on { filter: brightness(.75); stroke: #000; stroke-width: 2; }
.fe-svg .lamp, .fe-pv .lamp { stroke: var(--sym); stroke-width: 1.5; fill: var(--sym-bg); }
.fe-svg .lamp.on.lamp-green { fill: #22c55e; } .fe-svg .lamp.on.lamp-red { fill: #ef4444; }
.fe-svg .lamp.on.lamp-yellow { fill: #facc15; } .fe-svg .lamp.on.lamp-blue { fill: #3b82f6; }
.fe-svg .lamp.on { filter: drop-shadow(0 0 6px currentColor); }
.fe-svg .memo { font-size: 14px; fill: var(--text); font-family: var(--font); }

/* 부품 · 선택 */
.fe-svg .c-hit { fill: transparent; stroke: none; }
.fe-svg .comp.sel .c-hit { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fe-svg .comp.faulty .c-hit { stroke: #dc2626; stroke-width: 1.2; stroke-dasharray: 2 2; }
.fe-svg .port { fill: var(--sym-bg); stroke: var(--accent); stroke-width: 1.2; opacity: 0; transition: opacity .1s; }
.fe-svg .port.open { opacity: .9; stroke: #f97316; }
.fe-svg:not(.running) .comp:hover .port, .fe-svg:not(.running) .comp.sel .port { opacity: 1; }
.fe-svg .jport { opacity: 0; fill: transparent; stroke: none; }
.fe-svg.running .port.open { opacity: 0; }
.fe-svg .port-hot { fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 2; }
.fe-svg .ghost { opacity: .55; pointer-events: none; }
.fe-svg .boxsel { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.fe-svg.running .comp { cursor: default; }

/* 배선 */
.fe-svg .w-hit { fill: none; stroke: transparent; stroke-width: 12; }
.fe-svg .w-line { fill: none; stroke: var(--wire); stroke-width: 2.2; stroke-linejoin: round; transition: stroke .2s; }
.fe-svg.pneu .w-line { stroke-width: 1.8; }
.fe-svg .w-flow { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.2; stroke-dasharray: 3 9; display: none; pointer-events: none; }
.fe-svg.running .w-flow { display: inline; }
.fe-svg .wire.sel .w-line { stroke: var(--accent) !important; stroke-width: 3; }
.fe-svg .wire:hover .w-line { stroke-width: 3; }
.fe-svg .wire-preview { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }

/* 라벨 */
.fe-svg .labels { pointer-events: none; }
.fe-svg .cname { font: 600 11px var(--font); fill: var(--muted); }
.fe-svg .tag { font: 700 10.5px var(--mono); fill: #b45309; text-anchor: middle; }
.fe-svg .tag.on { fill: #16a34a; }
.fe-svg .plabel { font: 500 8.5px var(--mono); fill: var(--muted); }
.fe-svg .readout rect { fill: var(--panel); stroke: var(--line2); }
.fe-svg .readout text { font: 600 10.5px var(--mono); fill: var(--text); }
.fe-svg .fault-badge circle { fill: #dc2626; }
.fe-svg .fault-badge text { fill: #fff; font: 800 10px var(--font); text-anchor: middle; }