* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #43464b;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 20px 12px 32px;
  color: #e6e8ea;
}

/* ---------- 전체 레이아웃 (설계문서 §4) ---------- */
.app {
  width: 100%;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apphead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  border-bottom: 1px solid #55585c;
  padding-bottom: 10px;
}
.apphead h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pagenav {
  display: flex;
  flex-wrap: wrap;          /* 좁은 폭에서 헤더가 문서 가로 스크롤을 만들지 않게 함 (M2 리뷰 F21) */
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.pagenav button {
  background: #4a4e54;
  color: #eee;
  border: 1px solid #6a6e74;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13px;
}
.pagenav button:hover { background: #5a5f66; }
.pagenav select {
  background: #33363a;
  color: #eee;
  border: 1px solid #6a6e74;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  min-width: 0;
  flex: 1 1 160px;
  max-width: 260px;
}
.pagelabel { color: #9fd0f0; font-variant-numeric: tabular-nums; min-width: 0; }
.pagenav select optgroup { color: #9fd0f0; font-style: normal; }
.pagenav select option { color: #eee; }

.cols {
  display: grid;
  grid-template-columns: minmax(420px, 760px) minmax(340px, 1fr);
  gap: 18px;
  align-items: start;
}
.col-device, .col-input { min-width: 0; }

/* ---------- 개발 툴바 ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #d8dadd;
  background: #333639;
  border: 1px solid #55585c;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.toolbar button {
  background: #4a4e54;
  color: #eee;
  border: 1px solid #6a6e74;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.toolbar button:hover { background: #5a5f66; }
.toolbar label { display: flex; align-items: center; gap: 6px; }
.toolbar input[type="range"] { width: 110px; }
.toolbar .sep { flex: 0 0 1px; height: 20px; background: #55585c; }

/* ---------- 제품 패널 ---------- */
/* 표시부·조작부를 열 폭의 80% 로 축소한다. LCD 는 SVG viewBox 라 폭만 줄이면 비율이 유지되고,
   버튼·LED 는 픽셀 고정값이므로 아래에서 같은 배율(≈0.8)로 따로 줄인다. */
.panel { /* SVG가 베젤을 자체 렌더링하므로 배경·테두리 없음(이중 링 방지) */
  background: none;
  border: none;
  padding: 0;
  max-width: 80%;
  margin: 0 auto;
}
.lcd-wrap { position: relative; width: 100%; }
#lcd svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  transition: filter 260ms ease;
}
/* 백라이트 디밍 ([N6] 설정 07) — 세그먼트 상태는 건드리지 않고 컨테이너에만 클래스를 붙인다 */
.lcd-wrap.lcd-dim #lcd svg {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)) brightness(0.42) saturate(0.55);
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 0.5;
  display: none;
}

.keypanel { /* 표시부 아래 조작부 파시아 — 표시부와 같은 배율(≈0.8)로 축소 */
  background: linear-gradient(135deg, #598BC8 45%, #719CD0);
  border: 3px solid #3F618C;
  border-radius: 18px;
  margin: 10px 16px 0;
  padding: 11px 14px 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.keys {
  display: flex;
  justify-content: center;
  gap: 21px;
}
.key {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #2c4368;
  background: radial-gradient(circle at 35% 30%, #4a6ea6, #274166 70%);
  color: #dfe8f5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}
.key.pressed,
.key:active {
  transform: translateY(2px);
  background: radial-gradient(circle at 35% 30%, #3a5d94, #1e3554 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.45);
}

.leds {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-top: 13px;
}
.led {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #31517d;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.led.blue { background: #16294a; }
.led.blue.on { background: #2f8bff; box-shadow: 0 0 10px 3px rgba(47, 139, 255, 0.7); }
.led.red { background: #3a1516; }
.led.red.on { background: #ff3b30; box-shadow: 0 0 10px 3px rgba(255, 59, 48, 0.7); }

/* ---------- 입력 패널 (§10) ---------- */
.ip {
  background: #2c2f33;
  border: 1px solid #55585c;
  border-radius: 12px;
  padding: 14px 16px 18px;
  font-size: 13px;
}
.ip-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #cfd3d7;
}
.ip-sec {
  border-top: 1px solid #44474b;
  padding: 12px 0 4px;
}
.ip-sec:first-of-type { border-top: none; padding-top: 0; }
.ip-sec h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #8fb8d8;
  text-transform: uppercase;
}
.ip-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ip-chk { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.ip-hint, .ip-note { color: #9a9ea3; font-size: 11.5px; margin-top: 4px; }

.ip-ctl {
  display: grid;
  grid-template-columns: 62px 1fr 84px 30px;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}
.ip-ctl.off { opacity: 0.45; }
.ip-ctl-l { color: #c3c7cb; }
.ip-ctl-u { color: #8d9297; font-size: 12px; }
.ip-ctl-r { width: 100%; accent-color: #4f9fe0; }
.ip-ctl-n {
  width: 100%;
  background: #1f2225;
  color: #e8eaec;
  border: 1px solid #5a5e63;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ip-ctl-n.wide { grid-column: 2 / 4; }
.ip-ctl-n:disabled { color: #7c8085; }
/* 입력 범위를 벗어나 클램프된 상태 표시 (M2 리뷰 F22) */
.ip-ctl-n.out {
  border-color: #e0913c;
  background: #3a2a1c;
  color: #ffc79a;
}

.ip-seg { display: flex; gap: 6px; grid-column: 2 / 5; flex-wrap: wrap; }
.ip-seg.wide { grid-column: auto; }
.ip-segb {
  background: #3a3e43;
  color: #d6d9dc;
  border: 1px solid #5f636a;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12.5px;
}
.ip-segb:hover { background: #464b51; }
.ip-segb.on {
  background: #2f6ea8;
  border-color: #4f9fe0;
  color: #fff;
}

/* '기본값 복원' — 프리셋 pill 과 별도 줄·별도 스타일로 분리해 오클릭을 막는다 (M2 2차 리뷰 G24) */
.ip-restore {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted #45484c;
  flex-wrap: wrap;
}
.ip-restb {
  background: #2b2e32;
  color: #c9ccd0;
  border: 1px dashed #6b7076;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}
.ip-restb:hover { background: #3a2a1c; border-color: #e0913c; color: #ffc79a; }
.ip-restore .ip-hint { margin-top: 0; }

.ip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.ip-kv {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted #45484c;
}
.ip-kv .k { color: #9a9ea3; }
.ip-kv .v { color: #e8eaec; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- 보호계전 상태 표시부 (§10.3, M4) ---------- */
.ip-do {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ip-dol {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border: 1px solid #4a4e53;
  border-radius: 999px;
  background: #26292d;
  color: #9a9ea3;
  font-size: 11.5px;
}
.ip-dol i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a1516;
  border: 1px solid #5a2b2c;
}
.ip-dol b { color: #c3c7cb; font-weight: 600; }
.ip-dol.on {
  background: #46181a;
  border-color: #a13a3a;
  color: #ffb3ae;
}
.ip-dol.on i { background: #ff3b30; box-shadow: 0 0 7px 2px rgba(255, 59, 48, 0.6); }
.ip-dol.on b { color: #fff; }

/* 기기 시각 표시값 (M6) */
.ip-clockv {
  color: #e8eaec;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.5px;
}

.ip-prow {
  display: grid;
  grid-template-columns: 42px 74px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #45484c;
}
.ip-prow .n { color: #c3c7cb; font-weight: 600; }
.ip-prow .v { color: #9a9ea3; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }
.ip-prow.trip .v { color: #ffb3ae; }
.ip-st {
  text-align: center;
  border-radius: 4px;
  padding: 2px 0;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
}
.ip-st.normal { background: #1d3a25; border-color: #2f6b40; color: #9fe0b4; }
.ip-st.pickup { background: #46381b; border-color: #a18a3a; color: #ffdf9a; }
.ip-st.trip { background: #46181a; border-color: #a13a3a; color: #ffb3ae; }
.ip-st.off { background: #2b2e32; border-color: #55585c; color: #8d9297; }
.ip-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #1f2225;
  border: 1px solid #45484c;
  overflow: hidden;
}
.ip-bar i {
  display: block;
  height: 100%;
  width: 0;
  transition: width 120ms linear;
}
.ip-bar i.pickup { background: #e0b13c; }
.ip-bar i.trip { background: #ff3b30; }
.ip-bar i.normal, .ip-bar i.off { background: transparent; }

.ip-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ip-badge {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  border: 1px solid transparent;
}
.ip-badge.ok { background: #1d3a25; border-color: #2f6b40; color: #9fe0b4; }
.ip-badge.warn { background: #46281b; border-color: #a1613a; color: #ffc79a; }

/* ---------- 파형·페이저 (§11, M5) ----------
   제품 패널 아래 **좌측 열에 수직 배치**한다(보호계전 상태 → 3상 파형 → 페이저 순). */
.viz {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
/* 좌측 열의 보호계전 상태 블록 — 입력 패널과 같은 카드 스킨을 쓰되 제목 h2 는 없다 */
#prot { margin-top: 14px; }
#prot:empty { display: none; }
.viz-card {
  background: #2c2f33;
  border: 1px solid #55585c;
  border-radius: 12px;
  padding: 10px 12px 12px;
}
.viz-card h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #8fb8d8;
  text-transform: uppercase;
}
.viz-card h2 span {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: #8d9297;
  text-transform: none;
}
.viz-card canvas {
  display: block;
  width: 100%;
  height: 230px;
  border-radius: 8px;
  background: #22252a;
}

/* ---------- 반응형 (태블릿 이하 상하 배치) ---------- */
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  .col-device { max-width: 760px; }
}
@media (max-width: 520px) {
  .keys { gap: 14px; }
  .key { width: 44px; height: 44px; font-size: 16px; }
  .ip-ctl { grid-template-columns: 54px 1fr 70px 24px; gap: 6px; }
  .ip-grid { grid-template-columns: 1fr; }
  .ip-prow { grid-template-columns: 38px 66px 1fr; gap: 6px; }
  .ip-prow .v { grid-column: 1 / 4; text-align: left; }
  .viz-card canvas { height: 180px; }
}