/* ============================================================
   UR E27 — "Stratos" design tokens
   Maritime cybersecurity operations console
   ============================================================ */

/* 폰트 (2026-08-01, 사용자 지시로 IBM Plex Sans KR → Pretendard 전면 교체)
   · 본문·UI = **Pretendard** — `fonts/pretendard.css` 에서 로드한다(base.html).
     TTF 를 그대로 쓰지 않는다. 가중치당 2.7MB 라 한글 한 자만 있어도 통째로 받는다.
     unicode-range 조각 woff2(94×4)로 나눠 두었다 — 이전 plex.css 와 같은 분할 방식이라
     로딩 동작은 그대로고 폰트만 바뀐다.
   · 식별자·숫자 = **JetBrains Mono** (아래 @font-face). Pretendard 에는 모노스페이스가
     없다. SR 코드·§절 번호·IP·수치는 자릿수가 맞아야 표에서 읽힌다.
   두 폰트 모두 자체 호스팅이다 — CDN 의존 0건(폐쇄망 고객사). */

/* JetBrains Mono — identifiers, references, IPs (자체 호스팅) */
/* JetBrains Mono — 자체 호스팅 (B-008). Google Fonts CDN 의존 제거 */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fonts/JetBrainsMono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ═══════════════════════════════════════════════════════════════
     리디자인 팔레트 (REDESIGN-SPEC.md §3.2, 2026-08-01)
     **토큰 이름은 유지하고 값만 갈았다** — 20개 템플릿이 이 이름들을 이미 쓴다.
     이름을 새로 만들면 화면마다 전부 고쳐야 하고 그 사이 앱이 깨진다.
     신호색만 쓴다. 장식용 색·그라디언트 금지.
     ═══════════════════════════════════════════════════════════════ */

  /* ---------- Primary / ink navy ---------- */
  --brand-500: #16324f;   /* 프라이머리 (버튼 채움·강조) */
  --brand-700: #0f2438;   /* hover */
  --brand-400: #2b4a6b;
  --brand-100: #cdd6df;
  --brand-50:  #eef2f6;   /* 선택된 행 배경 */
  --nav-bg:    #0d1a27;   /* 좌측 내비 */

  /* ---------- Accent = 프라이머리와 같은 잉크. 별도 액센트색을 쓰지 않는다 ---------- */
  --accent-500: #16324f;
  --accent-600: #0f2438;
  --accent-400: #2b4a6b;
  --accent-50:  #eef2f6;
  --accent-100: #cdd6df;
  --accent-200: #b4c0cc;
  --accent-700: #16324f;

  /* ---------- 회색 계열 (지시서 텍스트/보더 값에 맞춤) ---------- */
  --gray-50:  #f7f8f9;
  --gray-100: #f4f6f7;
  --gray-200: #e2e6ea;
  --gray-300: #d9dee3;
  --gray-400: #98a3ae;
  --gray-500: #7b8794;
  --gray-600: #5c6874;
  --gray-700: #3d4a58;
  --gray-800: #22303d;
  --gray-900: #101a24;

  --fg-1: #101a24;   /* 본문 기본 */
  --fg-2: #3d4a58;   /* 보조 (진함) */
  --fg-3: #7b8794;   /* 보조 */
  --fg-4: #98a3ae;   /* 흐림 */
  --fg-5: #b8c1ca;

  /* ---------- Surfaces ---------- */
  --bg-app:    #f7f8f9;
  --bg-card:   #ffffff;
  --bg-subtle: #f4f6f7;
  --bg-hover:  #f7f8f9;

  /* ---------- Borders ---------- */
  --border-1: #e2e6ea;
  --border-2: #d9dee3;
  --border-strong: #98a3ae;

  /* ---------- Status — 확정/초안/미비 3단계 ---------- */
  --ok-500:     #0f7a53;   /* 확정·Compliant */
  --ok-50:      #eaf6f0;
  --ok-100:     #bfe3d2;
  --ok-700:     #0b5c3e;
  --warn-500:   #e0a530;   /* 초안·진행중 */
  --warn-50:    #fdf6e6;
  --warn-100:   #f2ddab;
  --warn-200:   #e8cb85;
  --warn-700:   #8a6508;
  --danger-500: #a32626;   /* 미비·위험 */
  --danger-50:  #fdeceb;
  --danger-100: #e6cfcf;
  --danger-700: #8a1f1f;
  --info-500:   var(--brand-500);
  --info-50:    var(--brand-50);

  /* 중립 Pending — 상태 없음을 위험처럼 보이게 하지 않는다 */
  --neutral-50:  #f2f4f6;
  --neutral-700: #7b8794;

  /* ---------- 셸 치수 (지시서 §2.1) ---------- */
  --nav-w:     246px;   /* 좌측 내비 고정 폭 */
  --topbar-h:  56px;    /* 헤더 */
  --tabbar-h:  0px;     /* 상단 탭 제거 — 좌측 내비로 통합. 옛 sticky 계산이 이 값을 참조한다 */
  --bg-chrome:       #f2f4f6;
  --bg-chrome-hover: #e8ecef;

  /* ---------- Shadows — hover/부유 요소에만 ---------- */
  --shadow-sm: 0 1px 0 rgba(16, 26, 36, .03);
  --shadow-md: 0 2px 6px rgba(16, 26, 36, .07);
  --shadow-lg: 0 12px 40px rgba(16, 26, 36, .22);
  --shadow-pop: 0 2px 6px rgba(16, 26, 36, .07);

  /* ---------- Radii (지시서 §3.3) ---------- */
  --r-xs:   4px;
  --r-sm:   5px;
  --r-md:   7px;    /* 버튼·입력 */
  --r-lg:   8px;
  --r-xl:   10px;   /* 카드 */
  --r-2xl:  12px;   /* 모달 */
  --r-pill: 999px;
  --radius-sm: 5px;

  /* ---------- Spacing (4-based) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- Type (지시서 §3.1) ----------
     본문 Pretendard · 수치·코드·라벨 JetBrains Mono.
     모노는 SR 코드·IP·날짜·버전·대문자 라벨·카운트에만 쓴다. */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', system-ui, sans-serif;
  /* 모노 스택에 **Pretendard 를 반드시 끼운다.**
     JetBrains Mono 에는 한글 글리프가 없다. 없으면 `최근 변경` `미검증` 같은
     mono 라벨의 한글이 Windows 기본 GulimChe(비트맵 계열)로 떨어진다 — 실측 57곳.
     라틴·숫자는 unicode-range 로 JetBrains Mono 가 먹고, 한글만 Pretendard 로 간다. */
  --font-mono: 'JetBrains Mono', 'Pretendard', 'SF Mono', Menlo, Consolas, monospace;
  --tracking:      -0.008em;
  --tracking-mono: 0;

  /* ---------- 선급 컬러 (유지 — 지시서 §3.2) ---------- */
  --soc-DNV:   #16324f;
  --soc-KR:    #1f7fb5;
  --soc-ABS:   #a32626;
  --soc-LR:    #0f7a53;
  --soc-BV:    #a6820c;
  --soc-NK:    #b3452a;
  --soc-OTHER: #4a5a6b;

  /* ---------- 네트워크 장비 컬러 (지시서 §3.2) ---------- */
  --dev-server: #2f5fa8;
  --dev-net:    #6b4fa8;
  --dev-sensor: #b3306b;
  --dev-power:  #c07a12;

  /* ---------- NIST CSF 태그 — 화면에서 뺐지만(ADR-0030) 대시보드 집계가 참조한다 ---------- */
  --csf-identify:    #2f5fa8;
  --csf-identify-bg: rgba(47,95,168,.09);
  --csf-identify-br: rgba(47,95,168,.30);
  --csf-detect:      #6b4fa8;
  --csf-detect-bg:   rgba(107,79,168,.09);
  --csf-detect-br:   rgba(107,79,168,.30);
}


/* ============================================================
   Typography presets
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  letter-spacing: var(--tracking);
}

.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mono);
}

.t-display { font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.022em; color: var(--fg-1); }
.t-h1      { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.018em; color: var(--fg-1); }
.t-h2      { font-weight: 700; font-size: 20px; line-height: 1.3;  letter-spacing: -0.015em; color: var(--fg-1); }
.t-h3      { font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--fg-1); }

.t-body         { font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--fg-1); }
.t-body-strong  { font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--fg-1); }
.t-label        { font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--fg-1); }
.t-caption      { font-weight: 500; font-size: 12px; line-height: 1.4; color: var(--fg-3); }
.t-micro        { font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.t-num-lg       { font-family: var(--font-mono); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); }

.t-muted   { color: var(--fg-3); }
.t-subtle  { color: var(--fg-4); }
.t-brand   { color: var(--brand-500); }
.t-accent  { color: var(--accent-500); }
.t-danger  { color: var(--danger-500); }
.t-ok      { color: var(--ok-500); }