/* ============================================================================
   화면 조정 파일 — 여기 숫자와 색만 바꾸면 됩니다.

   메모장으로 열어 값만 고치고 저장하세요. 이 파일에는 글자 크기와 색만 있고,
   화면을 움직이는 코드는 없습니다. 여기서 무엇을 바꿔도 값 수집이나 로그인은
   영향을 받지 않습니다.

   고친 뒤 반영하려면 (PowerShell):
     cd C:\Coding\HDAPS
     npx.cmd wrangler pages deploy --project-name gnd99 --branch main --commit-dirty=true

   규칙 두 가지
     - 숫자 뒤의 rem 은 지우지 마세요. 1.65rem 에서 1.65 만 고칩니다.
     - 줄 끝의 세미콜론(;) 을 지우면 그 아래가 전부 먹통이 됩니다.
   ========================================================================== */

:root {
  /* ── 글자 크기 (넓은 화면) ───────────────────────────────────────────── */
  --fs-title:      1.90rem;  /* 페이지 제목 "군남홍수조절지 현황" */
  --fs-badge:      0.90rem;  /* 상태 딱지 "초기 상태" */
  --fs-state:      1.70rem;  /* 상태 첫 줄 "수문 7개 개방" */
  --fs-state-sub:  1.00rem;  /* 상태 둘째 줄 "여름철 자연재난…" */
  --fs-tile-label: 1.00rem;  /* 값 이름 "댐수위" "유입량" "방류량" */
  --fs-tile-value: 1.70rem;  /* 값 자체 "23.32 EL.m" */
  --fs-card-title: 1.00rem;  /* 칸 제목 "수문현황" */
  --fs-gate-label: 1.00rem;  /* 도식 아래 안내 "수문 개도 (m)" */
  --fs-gate-no:    0.78rem;  /* 수문 번호 1~13 */
  --fs-gate-value: 1.05rem;  /* 수문별 개도값 "0.40" */
  --fs-footer:     0.80rem;  /* 맨 아래 관측 시각 */

  /* ── 색 ──────────────────────────────────────────────────────────────
     #rrggbb 형식입니다. 색을 고를 때는 아무 색상표 사이트에서 얻은
     여섯 자리 코드를 그대로 넣으면 됩니다. */
  --bg:       #14161a;  /* 배경 */
  --card:     #1c2027;  /* 칸 배경 */
  --fg:       #eceff3;  /* 글자 */
  --muted:    #8b95a3;  /* 흐린 글자 (이름·설명) */
  --line:     #282e37;  /* 테두리, 닫힌 수문 번호 배경 */

  --ok:       #3fbf7f;  /* 초록 — 초기 상태, 열린 수문 번호 */
  --alert:    #e05c4b;  /* 빨강 — 방류 중 */
  /* 위 두 색의 배경 그라데이션용. 같은 색을 R,G,B 숫자로 적습니다.
     #3fbf7f 는 63,191,127 입니다. 색을 바꾸면 이 줄도 함께 바꿔야
     배지와 배경이 따로 놀지 않습니다. 변환은 "hex to rgb" 로 검색하면
     바로 나옵니다. 귀찮으면 이 두 줄은 그냥 두어도 됩니다 — 배지 색만
     바뀌고 옅은 배경은 예전 색으로 남습니다. */
  --ok-rgb:    63,191,127;
  --alert-rgb: 224,92,75;
  --accent:   #1f6fb2;  /* 로그인 단추 */
  --accent-fg:#ffffff;  /* 로그인 단추 글자 */

  --warn-bg:  #38291c;  /* 수집 실패 알림 배경 */
  --warn-fg:  #f0c08a;  /* 수집 실패 알림 글자 */
  --err:      #e8756f;  /* 로그인 오류 글자 */

  /* ── 수문 도식 색 ────────────────────────────────────────────────────── */
  --water:     #3f7fb5;  /* 물 */
  --spray:     #9ecbe8;  /* 물보라 */
  --concrete:  #4a515b;  /* 콘크리트 구조물, 교각 */
  --bay:       #171a1f;  /* 수문 뒤 어두운 안쪽 */
  --gate:      #5a626d;  /* 수문 판 */
  --gate-line: #868f9b;  /* 수문 보강재 선 */
}

/* ── 좁은 화면 (휴대폰) ──────────────────────────────────────────────────
   640px 보다 좁아지면 아래 값으로 바뀝니다. 여기 적지 않은 항목은 위 값을
   그대로 씁니다. 색은 넓은 화면과 같습니다. */
@media (max-width: 640px) {
  :root {
    --fs-title:     1.60rem;
    --fs-state:     1.5rem;  /* 상태 첫 줄 "수문 7개 개방" */
    --fs-state-sub: 0.92rem; /* 상태 둘째 줄 "여름철 자연재난…" */
    --fs-tile-value:1.50rem;  /* 값 자체 "23.32 EL.m" */
  }
}