/* 7Eyes EARTH — design tokens
 * 기준: claude.ai 캔버스 "7Eyes EARTH 디자인 방향"의 Final(최종 방향)·Main(01)·시연 모드 보드 (2026-10-17)
 * 규칙: UI 코드는 이 파일의 변수만 쓴다. HEX를 직접 쓰지 않는다.
 * 테마 전환: <html data-theme="light"> / <html data-theme="dark">
 *   밝은 회의실·빔프로젝터 → 라이트, 대형 TV·LED·전시장 → 다크. 현장에서 스위치 하나로.
 * 면적 비율(기준안): 3D 지도 70% · 패널 18% · 블루 7%(버튼·머리줄) · 라임 4%(선택 표시) · 오렌지 1%(경고만)
 * "(보드에 없음)"이라고 적힌 값은 보드에 수치가 없어 임시로 정한 것.
 */

:root {
  /* ── 크기·모양 ── */
  --edge: 24px;              /* 화면 가장자리와 떠 있는 요소 사이 */
  --btn: 48px;               /* 아이콘 버튼 한 변 (규칙) */
  --hit-min: 44px;           /* 누르는 면적 최소 */
  --icon: 24px;              /* 아이콘 격자 */
  --icon-in-btn: 22px;       /* 버튼 안 아이콘 표시 크기 */
  --icon-stroke: 1.75;
  --rail-gap: 10px;

  --radius-panel: 8px;
  --radius-change: 10px;     /* 변화 감지 카드 */
  --radius-card: 12px;       /* 높이 카드 등 */
  --radius-switch: 18px;
  --radius-btn: 24px;        /* 48px 버튼 = 원형 */
  --radius-search: 24px;
  --radius-timebar: 26px;
  --radius-pill: 999px;

  --search-w: 460px;
  --search-h: 48px;
  --sheet-w: 320px;          /* 왼쪽·오른쪽 떠 있는 시트 */
  --rail-w: 96px;            /* 왼쪽 아이콘 레일 (B5) */
  --panel-w: 336px;          /* 레일 옆 패널 (B5). 높이는 내용만큼 */
  --rail-item-h: 64px;       /* 레일 한 칸 높이 (메뉴 10개) */
  --menu-w: 120px;           /* (이전안, B5에서는 쓰지 않음) */
  --menu-w-icon: 48px;       /* (이전안, B5에서는 쓰지 않음) */
  --timebar-h: 52px;

  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-6: 24px;

  /* ── 글꼴 ── */
  --font: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;  /* 본문·라벨·버튼 (400/500/700) */
  --font-num: "Manrope", "Noto Sans KR", sans-serif;              /* 로고·숫자·시간 (600/700) */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;           /* 보조 라벨·날짜 칩 (500) */

  --fs-xs: 11px;             /* mono 보조 라벨, 출처 */
  --fs-s: 12px;              /* 상세 */
  --fs-m: 13px;              /* 칩·버튼·본문 */
  --fs-l: 15px;              /* 본문 큰 것, 단위 m, 시간 라벨 */
  --fs-h: 18px;              /* 소제목, 로고 */
  --fs-num: 32px;            /* 높이 카드 숫자 */

  /* ── 움직임 ── 장면 전환은 카메라 비행 하나. UI는 서서히 나타나고 튀는 효과 없음 */
  --ease: cubic-bezier(.25, .1, .25, 1);   /* (보드에 없음) */
  --dur: 240ms;                            /* (보드에 없음) */
  --toast-hold: 5s;                        /* 토스트는 5초 뒤 종 아이콘으로 접힘 */

  /* ── 데이터 레이어 예외 (DESIGN §1 규칙 보충) ── 지목별 색 같은 범주형 레이어만.
     색은 브랜드 3색과 겹치지 않게, 켰을 때만, 범례 필수 */
  --data-fill-opacity: 0.4;   /* 채움 불투명도 최댓값 */
  /* 범주형 데이터 색 (브랜드 3색과 겹치지 않게). 침수 깊이 4단계, 산사태 위험 등급 4단계 */
  --data-water-1: #BFE0FF;    /* 0.3 m 미만 */
  --data-water-2: #6FB3F2;    /* 0.3–1.0 m */
  --data-water-3: #2F78C9;    /* 1.0–2.0 m */
  --data-water-4: #123F7A;    /* 2.0 m 이상 */
  --data-water-surface: #3B8EE0;  /* 평면 수면 (불투명도 --data-fill-opacity 이하로) */
  --data-slope-1: #7A3E12;    /* 1등급 */
  --data-slope-2: #C9822F;    /* 2등급 */
  --data-slope-3: #E8C95A;    /* 3등급 */
  --data-slope-4: #F7F1B5;    /* 4·5등급 */
}

/* ── 라이트 (기본) ── */
:root,
[data-theme="light"] {
  color-scheme: light;
  --c-blue:        #1F3A93;  /* 틀: 패널 머리, 주 버튼, 활성 탭 글씨, 표 머리줄, 호버 */
  --c-navy:        #14265F;  /* 툴팁, 라임 위 아이콘·글씨 */
  --c-lime:        #8CC63F;  /* 지금 선택된 것 하나: 건물 외곽선, 켜진 토글, 현재 시점 점 */
  --c-orange:      #F26B21;  /* 변화·경고만: 변화 탐지 핀, 경고 토스트, 새 알림 점 */

  --gray-1: #F6F7FA;         /* 패널 바탕 */
  --gray-2: #E8ECF7;         /* 칩 */
  --gray-3: #D6D9E3;         /* 괘선 */
  --gray-4: #4A4F5C;         /* 보조 글씨, 기본 아이콘 */

  --bg-map:        #EEF2F7;  /* 3D가 비어 있을 때 바탕 */
  --surface:       rgb(255 255 255 / .96);  /* 떠 있는 카드·바. 50% 이하 투명 금지 */
  --surface-soft:  rgb(255 255 255 / .92);  /* 검색창 */
  --surface-solid: var(--gray-1);
  --line:          var(--gray-3);
  --outline:       var(--gray-3);
  --text:          #1A1A1A;
  --text-sub:      var(--gray-4);
  --text-faint:    var(--gray-4);
  --text-lime:     #4E7A14;  /* 라임 계열 글씨(예시 값 표시) */
  --text-orange:   #B4440C;  /* 오렌지 글씨는 이 값으로 */
  --tint-orange:   #FDE9DD;  /* 오렌지 배경 틴트 */

  --on-blue:   #FFFFFF;
  --on-lime:   var(--c-navy);  /* 라임 위 글씨는 흰색 금지 */
  --on-navy:   #FFFFFF;
  --chip-cur:  var(--c-navy);  /* 현재 시기 칩 바탕 (시연 보드) */

  --shadow-btn:  0 2px 8px rgb(20 38 95 / .10);
  --shadow-bar:  0 2px 10px rgb(20 38 95 / .10);
  --shadow-card: 0 2px 12px rgb(20 38 95 / .14);
}

/* ── 다크 ── */
[data-theme="dark"] {
  color-scheme: dark;
  --c-blue:        #3B5BD9;  /* 원래 블루는 검정 바탕에 묻혀서 한 단계 밝힘 */
  --c-navy:        #14265F;
  --c-lime:        #9FD653;
  --c-orange:      #FF8A4C;

  --gray-1: #0A1226;
  --gray-2: #22305A;
  --gray-3: #2E4180;
  --gray-4: #A3ADC4;

  --bg-map:        #0A1226;
  --surface:       rgb(20 38 95 / .94);    /* (보드에 없음) 딥 네이비 기반 */
  --surface-soft:  rgb(20 38 95 / .90);    /* (보드에 없음) */
  --surface-solid: #0A1226;
  --line:          #22305A;
  --outline:       #2E4180;
  --text:          #E4E9F5;
  --text-sub:      #A3ADC4;
  --text-faint:    #8E9AB8;
  --text-lime:     #9FD653;
  --text-orange:   #FF9A62;
  --tint-orange:   #3A1E12;

  --on-blue:   #FFFFFF;
  --on-lime:   var(--c-navy);
  --on-navy:   #FFFFFF;
  --chip-cur:  var(--c-blue);  /* (보드에 없음) 네이비 바탕에 묻혀서 블루로 */

  --shadow-btn:  0 2px 8px rgb(0 0 0 / .35);   /* (보드에 없음) */
  --shadow-bar:  0 2px 10px rgb(0 0 0 / .35);  /* (보드에 없음) */
  --shadow-card: 0 2px 12px rgb(0 0 0 / .45);  /* (보드에 없음) */
}