/* KETI 디자인 토큰 + 공용 리셋 — STYLE.md 정본
 * index.html <style> 에서 분리(2026-09-15) — 원래 67~119행.
 * ⚠️ 이어붙인 순서가 캐스케이드다. <link> 순서를 바꾸지 마라(tokens → fleet → cockpit → panels).
 *    scripts/test_css_split.js 가 네 파일을 이어붙여 분리 시점 원본과 바이트 동일한지 검사한다. */

  /* ===== KETI 디자인 토큰 (STYLE.md) — 모든 UI 공통 톤. 다크 기본 + data-theme="light" 토글 ===== */
  :root{                                    /* DARK (기본) — KETI 네이비 + 블루 */
    color-scheme:dark;                        /* 네이티브 컨트롤(체크박스·select·스크롤바·포커스 링)도 테마를 따르게 */
    --bg:#0a0e16; --panel:#0f1722; --card:#0e1620; --card2:#0b121b; --surface:#13243a;
    --line:#1f3a5c; --line2:#2f4f7c;
    --ink:#d6e6f5; --ink2:#9fc0e3; --dim:#7f97b3;
    --accent:#2e9be0; --accent2:#6cc4e8; --on-accent:#04223a;   /* KETI 블루 / 라이트블루 */
    --ok:#2e9be0; --busy:#e3b96f; --err:#e36f6f; --help:#e3d36f; --off:#5a6f88;
    --idle:#9be36a;      /* IDLE 상태색 = 연두(사용자 규격 2026-09-15) — --ok(블루)는 연결/정상 일반, --link-ok(민트)는 링크 품질 */
    --link-ok:#3ddc84;   /* 연결 양호(초록) — base_state 색과 직교(연결품질 전용) */
    --map-floor:#1b3150; --map-wall3d:#e8f1fa; --map-unknown:#0c1421;   /* 3D 바닥판(자유공간) · 3D 벽 — 다크는 네이비 판 위 거의 흰 벽(블루프린트). 판이 배경과 붙지 않게 --surface 보다 한 단 밝게 */
    --err-bg:#2a1414; --err-line:#4a2b2b;
    /* path_plan 흐름/셰브런 하이라이트 — 다크: 화이트-핫 */
    --path-hot-g:color-mix(in srgb, var(--accent) 45%, #fff);
    --path-hot-l:color-mix(in srgb, var(--link-ok) 45%, #fff);
  }
  :root[data-theme="light"]{                /* LIGHT — KETI 로고 톤(흰 배경 + 블루) */
    color-scheme:light;
    --bg:#f4f8fc; --panel:#ffffff; --card:#ffffff; --card2:#eef4fa; --surface:#e6eef7;
    --line:#d2e0ee; --line2:#bcd0e6;
    --ink:#0a2540; --ink2:#3a5e82; --dim:#566f8a;   /* 라이트 --dim 은 흰 카드 위 4.5:1 을 넘겨야 한다(#6b86a3 은 3.8:1 — 9~13px 라벨이 전부 미달) */
    --accent:#0072ce; --accent2:#0098d8; --on-accent:#ffffff;
    --ok:#0072ce; --busy:#8f5f10; --err:#c62d2d; --help:#7d5f00; --off:#9bb0c6;   /* busy·help·err 는 글자로도 20여 곳에 쓰인다 — 흰 카드 위 4.5:1 을 넘기는 값 */
    --idle:#397515;      /* 연두 — 흰 카드 위 글자로도 4.5:1 */
    --map-floor:#ffffff; --map-wall3d:#3a5e82; --map-unknown:#d2e0ee;   /* 라이트는 흰 판 위 네이비 벽 */
    --link-ok:#1ca15a;   /* 연결 양호(초록) */
    --err-bg:#fdecec; --err-line:#f4c9c9;
    /* 라이트: 흰 배경에서 화이트-핫은 소실 — 네이비쪽으로 믹스해 대비 확보 */
    --path-hot-g:color-mix(in srgb, var(--accent) 60%, #072a4a);
    --path-hot-l:color-mix(in srgb, var(--link-ok) 60%, #072a4a);
  }
  /* ── 본문 서체 — 나눔스퀘어 라운드(사용자 지정 2026-09-15) ─────────────────────────
     CDN 이 아니라 **vendor 동봉**이다. 관제 콘솔은 로봇 로컬에서 외부 의존 0 으로 떠야 하고
     (file:// 더블클릭 포함), CDN 을 쓰면 인터넷이 끊긴 현장에서 글꼴이 통째로 사라진다 —
     three.js·urdf-loader 를 vendor 에 둔 것과 같은 이유다. 라이선스·출처는
     `vendor/nanumsquareround/LICENSE.md`(네이버 글꼴, 재배포 허용).
     woff2 2종 424KB. Light/ExtraBold 는 안 받는다 — 이 화면은 400·700 만 쓴다.
     ⚠️ 숫자는 이 서체로 **폭이 들쭉날쭉**하다. 좌표·지연·버전처럼 자리를 맞춰야 하는 숫자는
        기존대로 monospace 를 쓴다(header .uiver 등) — 여기서 바꾸지 않는다. */
  @font-face{ font-family:"NanumSquareRound"; font-style:normal; font-weight:400; font-display:swap;
    src:url("../vendor/nanumsquareround/NanumSquareRound.woff2") format("woff2"); }
  @font-face{ font-family:"NanumSquareRound"; font-style:normal; font-weight:700; font-display:swap;
    src:url("../vendor/nanumsquareround/NanumSquareRoundB.woff2") format("woff2"); }

  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink);
    font:13px/1.4 "NanumSquareRound","Apple SD Gothic Neo","Noto Sans CJK KR",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
    user-select:none; overflow:hidden; }
  button{ font:inherit; color:var(--ink); cursor:pointer; }
  #app{ display:flex; flex-direction:column; height:100vh; }
  /* 헤더는 **절대 두 줄이 되지 않는다**(사용자 지시 2026-09-15: "글자나 뱃지가 다 깨지면 문제").
     관제는 폰·태블릿·FHD·QHD·4K 에 150%·200% 배율까지 섞인다. `flex-wrap:wrap` 이면 그때마다
     헤더가 2~3줄로 접히면서 아래 화면을 밀어 올렸다. 이제 **안 접고**, 좁아지면 덜 중요한 것부터
     차례로 물러난다: 단축키 힌트 → 서버 주소 입력 → KPI 라벨(점+숫자만 남는다).
     기준 폭은 뷰포트 CSS px 이라 브라우저 배율도 같이 걸린다(200% = 폭 절반). */
  header{ padding:6px 12px; border-bottom:1px solid var(--line); display:flex; gap:14px;
    align-items:center; flex-wrap:nowrap; overflow:hidden; min-width:0; }
  header > *{ flex:0 0 auto; }                      /* 기본은 안 줄어든다 — 줄일 것만 아래에서 지정 */
  /* 폰 폭(430px 실측) — 남는 것끼리도 안 들어간다. 관제에서 덜 급한 순서로 더 접는다:
     버전 → 제목 글자 → 연결 주소. 상태 요약(KPI)·알람·설비는 끝까지 남긴다. */
  @media (max-width:760px){
    header{ gap:8px; padding:6px 8px; }
    header .uiver{ display:none; }
    header .conn{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  }
  header h1{ font-size:14px; margin:0; color:var(--accent); letter-spacing:.5px; white-space:nowrap; }
  /* 좁으면 제목 글자를 접고 ◈ 만 남긴다(0.13.37). 이 블록은 반드시 위의 기본 header h1 **뒤** 에 와야 한다 —
     @media 는 특이도를 못 올리므로 앞에 두면 같은 특이도의 기본 규칙(font-size:14px)에 그냥 덮인다.
     덮이면 index.html 의 h1 텍스트에 이미 있는 ◈ 와 ::before 의 ◈ 가 겹쳐 "◈◈ NEXUS 관제" 가 되고
     제목이 오히려 넓어진다(실측 96.1px → 108.2px, 고친 뒤 17.0px). 아래 .hint 블록이 뒤에 있는 것도 같은 이유다. */
  @media (max-width:760px){
    header h1{ font-size:0; }                       /* 글자는 접고 ◈ 만 남긴다 */
    header h1::before{ content:"◈"; font-size:15px; }
  }
  header .hint{ color:var(--dim); font-size:11px; flex:0 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* 좁아지면 힌트는 **글자만** 접고 ⌨ 한 글자를 남긴다 — header h1 의 font-size:0 + ::before 와 같은 수법.
     display:none 이면 title 툴팁이 걸릴 자리까지 사라져서, S=정지 를 알 방법이 화면에서 없어진다
     (1500px 는 뷰포트 px 이라 FHD+150% 면 이미 접힌다 — 드문 상황이 아니다). */
  @media (max-width:1500px){
    header .hint{ flex:0 0 auto; font-size:0; cursor:help; }
    header .hint::before{ content:"⌨"; font-size:13px; }          /* 색은 header .hint 의 var(--dim) 상속 */
  }
  @media (max-width:760px){ header .hint{ display:none; } }        /* 폰엔 물리 키보드가 없다 — 그때만 완전히 접는다 */
  /* 콘솔 자기 버전 배지 — 로봇이 보고하는 nexus_ui 값과 **다를 수 있는** 값이라 눈에 띄되 조용하게 */
  header .uiver{ font-size:10px; color:var(--dim); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    border:1px solid var(--line); border-radius:999px; padding:1px 7px; white-space:nowrap; }
  header .conn{ font-size:11px; }
  header .conn.ok{ color:var(--ok); } header .conn.bad{ color:var(--err); }
  header .srv{ margin-left:auto; display:flex; gap:4px; align-items:center; font-size:11px; }
  header .srv label{ color:var(--dim); }
  @media (max-width:1180px){ header .srv label{ display:none; } }
  @media (max-width:980px){  header .srv{ display:none; } }         /* 주소는 한 번 넣으면 저장된다 */
  header .srv input{ width:180px; background:var(--card); border:1px solid var(--line); color:var(--ink);
    border-radius:4px; padding:3px 6px; font:11px/1.3 ui-monospace,monospace; }
  header .srv button{ background:var(--accent); color:var(--on-accent); border:none; border-radius:4px; padding:3px 10px; font-weight:600; }
  header #themebtn{ background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:4px; padding:2px 8px; font-size:13px; line-height:1; }
  header #themebtn:hover{ border-color:var(--accent); }
  header #navtoggle{ background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:4px; padding:2px 9px; font-size:14px; line-height:1; cursor:pointer; }
  header #navtoggle:hover{ border-color:var(--accent); }