/* 공용 디자인 토큰 — 산업 장비 조작반.
   상태색은 AMR 램프의 실제 4색(화이트/그린/엠버/레드)을 그대로 쓴다.
   표면·보더는 화이트 알파 레이어 방식: 배경 위에 얇게 쌓아 깊이를 만든다. */
:root {
  --bg: #0a0d12;
  --surface: #12161d;
  --surface-2: #1a1f28;
  --surface-3: #222834;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .14);
  --ink: #edf0f4;
  --muted: #98a1b0;
  --faint: #5f6874;

  --lamp-white: #eaf0f8;
  --lamp-green: #3ecf7a;
  --lamp-amber: #f5a623;
  --lamp-red: #f0554d;
  --accent: #5b95ff;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 24px -6px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, "Pretendard", "Inter", system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
body {
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(91, 149, 255, .06), transparent 60%),
    var(--bg);
}

.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.num { font-variant-numeric: tabular-nums; }

.good { color: var(--lamp-green); }
.bad  { color: var(--lamp-red); }
.warn { color: var(--lamp-amber); }

/* ---- 헤더 + 스택 라이트 (장비 신호등) ---- */
header.console {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { height: 26px; width: auto; flex: none; }
.brand h1 {
  margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lamp-strip {
  display: flex; gap: 5px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(180deg, #07090c, #0d1015);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .04);
}
.lamp-strip .seg {
  width: 24px; height: 9px; border-radius: 5px;
  background: #171b22; border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.lamp-strip .seg.on { border-color: transparent; box-shadow: none; }
.lamp-strip .seg.on[data-c="white"] { background: var(--lamp-white); box-shadow: 0 0 12px 1px rgba(234, 240, 248, .5); }
.lamp-strip .seg.on[data-c="green"] { background: var(--lamp-green); box-shadow: 0 0 12px 1px rgba(62, 207, 122, .55); }
.lamp-strip .seg.on[data-c="amber"] { background: var(--lamp-amber); box-shadow: 0 0 12px 1px rgba(245, 166, 35, .55); }
.lamp-strip .seg.on[data-c="red"]   { background: var(--lamp-red);   box-shadow: 0 0 12px 1px rgba(240, 85, 77, .6); }
.lamp-strip .seg.blink { animation: seg-blink .8s steps(1) infinite; }
@keyframes seg-blink {
  50% { background: #171b22; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
}

.conn-chip {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm), var(--highlight);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.conn-chip.ok { color: var(--ink); }
.conn-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp-red); }
.conn-chip.ok .dot { background: var(--lamp-green); box-shadow: 0 0 8px rgba(62, 207, 122, .8); }

/* ---- 아이콘 버튼 + 설명 툴팁(data-tip) ---- */
.icon-btn {
  position: relative; flex: none;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; cursor: pointer; text-decoration: none; font-size: 16px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: color .12s, border-color .12s;
}
.icon-btn:hover, .icon-btn:focus-visible { color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  padding: 7px 10px; border-radius: 8px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--surface-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .12s, transform .12s;
}
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after {
  opacity: 1; transform: none; transition-delay: .25s;
}
@media (hover: none) { .icon-btn[data-tip]::after { display: none; } }   /* 터치 기기엔 호버가 없음 */

/* ---- 앱 탭 (화면 이동) + 헤더 우측 ---- */
.app-tabs {
  display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .4);
}
.app-tabs a {
  padding: 7px 16px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: background .12s, color .12s;
}
.app-tabs a:hover { color: var(--ink); }
.app-tabs a.on { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-sm), var(--highlight); }
.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ---- 네트워크 설정 팝업 (net.js) ---- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(4, 6, 10, .66); backdrop-filter: blur(3px);
}
.modal-backdrop[hidden] { display: none; }   /* display:grid가 hidden 기본 스타일을 덮지 않게 */
.modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 10px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.net-form { display: grid; gap: 7px; padding: 10px 0 4px; }
.net-form input {
  padding: 9px 12px; font: inherit; font-size: 14px;
  background: rgba(0, 0, 0, .3); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.net-form input:focus { outline: none; border-color: var(--accent); }
.net-form button {
  padding: 9px; font-size: 13px; font-weight: 650; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink);
}
.net-form #net-connect { background: var(--accent); border-color: var(--accent); color: #fff; }
.net-note { color: var(--faint); font-size: 12px; margin: 6px 0 10px; }
.net-note.ok { color: var(--lamp-green); font-weight: 600; }
.net-note.bad { color: var(--lamp-red); font-weight: 600; }
.net-list { display: grid; gap: 5px; }
.net-list:empty { display: none; }
.net-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; font-size: 13.5px; text-align: left; cursor: pointer;
  background: rgba(0, 0, 0, .25); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.net-list button:hover { border-color: var(--accent); }
.net-list button.sel { border-color: var(--accent); background: rgba(91, 149, 255, .12); }
.net-list .meta { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* ---- 카드 / 행 ---- */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  box-shadow: var(--shadow-sm), var(--highlight);
}
.rows { display: flex; flex-direction: column; }
.rows .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; }
.rows .row + .row { border-top: 1px solid rgba(255, 255, 255, .045); }
.rows .row span { color: var(--muted); font-size: 12.5px; }
.rows .row b { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ---- 폼 컨트롤 (shadcn풍 커스텀) ---- */
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 20px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform .1s;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-3); }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0, 0, 0, .25);
}

input[type="checkbox"].switch {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 24px; margin: 0; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  position: relative; cursor: pointer;
  transition: background .15s, border-color .15s;
}
input[type="checkbox"].switch::after {
  content: ""; position: absolute; top: 2.5px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: left .15s, background .15s;
}
input[type="checkbox"].switch:checked { background: var(--accent); border-color: var(--accent); box-shadow: none; }
input[type="checkbox"].switch:checked::after { left: 20px; background: #fff; }

/* 좁거나 낮은 화면: 헤더 축소 — 세 화면 공통(페이지 CSS에서 따로 정하지 않는다) */
@media (max-width: 900px), (max-height: 560px) {
  header.console { padding: 8px 14px; gap: 12px; }
  .brand img { height: 20px; }
  .brand h1 { font-size: 15px; }
  .app-tabs a { padding: 6px 13px; font-size: 12.5px; }
  .lamp-strip { padding: 5px 7px; }
  .lamp-strip .seg { width: 20px; height: 8px; }
  .conn-chip { padding: 5px 10px; font-size: 12px; }
}

/* 폰: 헤더 공간 부족 — 로고만 남기고 제목 숨김 */
@media (max-width: 480px) {
  .brand { flex: none; }
  .brand h1 { display: none; }
  .lamp-strip { display: none; }
  .app-tabs a { padding: 6px 11px; font-size: 12.5px; }
  header.console { gap: 8px; }
  .header-actions { gap: 6px; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .conn-chip { padding: 9px; }
  .conn-chip span { display: none; }   /* 상태 점 색으로만 표시 */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}