/* global.css — 토큰·리셋·접근성 기반. 원본 명세: docs/230 Ⅲ장 (값은 docs/210)
   페이지는 여기 정의를 재정의하지 않는다 — scoped 에는 배치만 (상위 20-Ⅰ) */

:root {
  /* 브랜드 (210) */
  --green-700: #175C3A;
  --green-600: #1F7A4D;
  --green-100: #E8F3EC;
  --flag-500: #F59E0B;
  /* 행사·축제 (확정 2026-08-04 보라, 2026-08-05 「행사 전체」로 범위 확대 — N-73).
     초록=서비스 자신, 주황=깃발 전용이라 행사에 쓸 제3의 색이 필요했다.
     주황을 행사 말풍선에 쓰던 것이 깃발과 겹쳐 보이던 문제도 이걸로 풀린다.
     흰 글자 대비 5.7:1 · 연한 판 위 진한 글자 7.2:1 (둘 다 AA) */
  --wk-600: #7C3AED;
  --wk-700: #5B21B6;
  --wk-100: #EDE4FD;
  /* 꺼진 테두리용 보라 — 흰 바탕 3.27:1 실측. 기능 테두리는 3:1 이 하한이다(230 Ⅲ).
     --wk-600 을 그대로 쓰면 「이미 켜진 것」으로 읽혀 꺼짐·켜짐이 안 갈린다 */
  --wk-line: #9C7BE8;
  --paper-50: #FBFAF6;
  --paper-100: #F6F1DE;
  --water: #7DB8D4;

  /* 의미 토큰 (20-Ⅱ 필수 목록) */
  --bg: var(--paper-50);
  --ink: #14211A;
  --ink-soft: #4C5B53;
  --panel: #FFFFFF;
  /* 지도 위에 뜨는 컨트롤(무드·전체화면·토스트)의 반투명 판.
     지도 콘텐츠가 아니라 **UI** 라 테마를 따른다 */
  --panel-glass: rgba(251, 250, 246, .93);
  --line: #E4E2D9;            /* 장식 선 */
  /* 말머리 띠 — 「이건 고를 것이 아니라 무엇을 고르는지 알려 주는 줄」 (지시 2026-08-07).
     **무채색이어야 한다.** 선택·호버 틴트는 색이 있다(초록 --green-100 / 주황 --accent-100).
     띠까지 색을 띠면 「이미 골라 둔 줄」로 읽힌다 — 색은 고른 것, 무채색은 구조 */
  --band: #ECEAE2;            /* --ink-soft 글자 5.95:1 */
  /* 기능 테두리 — 흰 판 3.41:1 · 크림 지면 3.26:1 실측 (230 Ⅲ).
     #8A9A90 이었는데 다시 재 보니 2.96:1 / 2.83:1 로 **기준 미달**이었다.
     문서에 적힌 3.05:1 이 애초에 틀린 값이었다 (N-236, 2026-08-06) */
  --line-ui: #7E8F86;
  --accent: var(--flag-500);
  /* 주황의 **글자용 톤** (N-89). 테두리 버튼의 글자는 테두리와 같은 계열을 쓰되
     명도를 맞춰야 한다 — 초록 700 은 흰 바탕 8.0:1, 보라 700 은 8.9:1 인데
     주황만 임시값(#A15C00, 5.2:1)이라 혼자 밝아 떠 보였다. 8.0:1 로 맞춘다 */
  --accent-700: #7E4200;
  --accent-100: #FFF6E6;      /* 주황 연한 판 — hover 틴트·안내 상자 */
  --accent-line: #F5DDB0;
  /* 지도 갈래 색 (N-91, 2026-08-05) — **두 가지뿐이다.**
     초록=가볼 만한 곳(관광지·문화시설), 회색=그 밖(편의·부가).
     갈래를 여섯 색으로 나눠 봐야 「문화시설이냐 레포츠냐」는 사용자에게 거의 쓸모가 없고,
     색이 늘수록 지도만 시끄러워진다. **색은 위계를, 갈래는 아이콘 모양이 말한다** */
  --pin-main: #1F7A4D;
  --pin-sub: #6B7A72;
  /* ── 지도 마커 윤곽 (N-111) ──
     말풍선은 border 가 아니라 drop-shadow 로 실루엣을 두른다(N-100).
     그 색을 토큰으로 묶는다 — 리터럴로 흩어져 있으면 다크 모드에서 안 뒤집힌다.
     정체성 색보다 **한 톤 옅다**: 윤곽은 「무엇인가」를 거들 뿐 주인공이 아니다 */
  --edge: #C9CFC7;          /* 보통 마커 */
  --edge-major: #8A9A90;    /* 큰 마커(상위 8곳) */
  --edge-flag: #E39100;     /* 다녀온 곳 */
  --edge-wish: #9AA5A0;     /* 깃대만 세운 곳 */
  --edge-fest: #A78BDA;     /* 행사 */
  --edge-urgent: #D98763;   /* 곧 끝남 */
  --pin-wish: #6B7A72;      /* 깃대 배지 바탕 (--pin-sub 와 같은 값이지만 뜻이 다르다) */
  --here: #2A6FF2;          /* 현위치 — 지도 관례색이라 정체성 색과 섞지 않는다 */
  --info-100: #E3EBFA;      /* 정보 배지(실내 등) — 갈래가 아니라 사실이라 중립 파랑 */
  --info-700: #2456C9;
  --accent-fg: var(--ink);    /* 주황 위 먹색 — 흰 글자 금지 (210 Ⅳ) */
  --warn: #C2410C;            /* 「곧 끝난다」 — 정체성 색이 아니라 상태 경고 (N-73) */
  /* 주홍의 **글자용 톤** — 연한 판 위에 얹힌다. 초록·보라의 700 과 같은 자리다.
     채움(--warn)을 그대로 글자로 쓰다가 --warn-100 위에서 4.21:1 로 **AA 미달**이었다
     (N-127, 검사가 잡음). 형제들과 나란한 7.0 으로 맞춘다 —
     초록 700 7.02 · 보라 700 7.32 · 주홍 700 6.98.
     **--accent-700 에서 똑같은 실수를 했었다**(N-89): 한 색만 톤이 어긋나면 혼자 떠 보인다 */
  --warn-700: #8A2C07;
  --warn-100: #FBE3D6;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 999px;
  --tap: 44px;
  /* 표 행 안 조밀 버튼 전용 (관리자 개편 480). --minibtn 32 의 있던 값에 이름을 준 것 —
     새 값을 들인 게 아니다. 버튼 표준은 .pill(48), 입력·탭타깃은 --tap(44), 표행만 이 값이다 */
  --tap-sm: 32px;
  /* ── 본문 폭 — **두 값뿐이다** (N-167, 지적 2026-08-05).
     상위 20-Ⅲ 이 「폭은 토큰으로」를 요구하는데 페이지마다 640·720·900·920·
     1080·1120 리터럴이 박혀 여섯 폭이 됐다. 읽는 글은 --wrap-read,
     목록·표·대시보드는 --wrap-app. 새 폭이 필요해 보이면 먼저 여기서 논한다 */
  --wrap-read: 720px;         /* 소개·방침·약관 — 한 줄 65자 안팎 */
  --wrap-app: 1520px;         /* 마이·관리자·행사 — 카드·표가 넓게.
     1120 → 1520 (지시 2026-08-06). 1920 화면에서 좌우가 400px 씩 비어 있었다.
     **무한정 넓히지는 않는다** — 표의 한 줄이 화면을 가로지르면 눈이 행을 잃는다 */
  /* 좌우 여백 — 화면에 따라 벌어진다. 모바일 16 → 데스크톱 32.
     페이지마다 다른 값(0·10·20·28px)을 적던 것을 하나로 (지시 2026-08-06) */
  --gutter: clamp(16px, 3vw, 32px);
  --shell: 760px;             /* (구) 푸터 폭 — 점진 폐기, footer 만 쓴다 */
  /* 머리(브랜드·계정)의 자리 — **다섯 화면이 다섯 값**이었다 (N-124, 지적).
     화면을 옮길 때마다 로고가 좌우 10px·위아래 19px 씩 움직였다.
     여기서 한 번만 정한다. 페이지가 다시 정하지 않는다 */
  --hdr-x: 18px;              /* 좌우 여백 */
  --hdr-y: 16px;              /* 위아래 여백 */
}

/* ── 랜딩 밤 장면 (N-112 로 `dark` → `night` 개명) ──
   **다크 모드가 아니다.** 랜딩을 아래로 내리면 아침→낮→저녁→밤으로 이야기가 흐르는데,
   그 밤 구간에 붙는 이름이다(js/landing.js). 사용자가 고른 게 아니라 그 페이지 그 지점의
   풍경이다. `dark` 라는 이름을 쥐고 있으면 진짜 다크 모드와 부딪히므로 자리를 비켰다.

   □ **공용 UI 토큰을 여기서 덮지 않는다** (N-152, 지적 2026-08-05 — 밝은 테마인데
     계정 팝업이 어둡던 재발 버그). 밤 장면에서 보이는 것(로고·시계·문구)은 전부 직접색으로
     칠한다(index.html: body.night .word/.clock/.acct-btn, .light-text). 밤에 보이는 어떤
     요소도 --panel·--ink·--line 을 쓰지 않는다 — .dark-text 는 아침·낮 장면(밝은 배경)의
     어두운 글자라 밤엔 화면 밖이다. 그런데 이 토큰들을 body.night 에서 덮으면, 그 위에 뜨는
     **계정 팝업·시트(공용 부품)**까지 어두워졌다. 팝업·시트는 data-theme(밝게/어둡게)만
     따라야 하므로, 밤 장면은 토큰을 건드리지 않고 직접색으로만 칠한다 */

/* ── 다크 모드 (N-112) ──
   **토큰만 뒤집는다.** 부품은 토큰을 보므로 components.css 는 손대지 않는다 —
   흰색이 박혀 있던 「판」만 var(--panel) 로 돌렸다.

   □ 기기 설정이 기본, 고르면 그 기기에 기억한다 — 지도 무드(N-79)와 같은 규칙이다.
     `prefers-color-scheme` 미디어쿼리를 쓰지 않고 js/theme.js 가 늘 data-theme 를
     **밝게/어둡게 둘 중 하나로 확정해** 붙인다. 미디어쿼리와 수동 선택을 함께 쓰면
     같은 토큰 목록을 두 벌 적게 되고, 두 벌은 반드시 갈라진다

   □ 랜딩(/)은 여기서 빠진다 — 시각이 흐르는 그림책이라 자기 명암을 이미 가지고 있다.
     아침 장면을 어둡게 칠하면 이야기가 깨진다

   □ 뒤집지 않는 것
     - --green-600 / --wk-600 / --warn / --accent : **채움**이다. 흰 글자를 얹어 쓰므로
       밝게 만들면 글자 대비가 오히려 무너진다. 어두운 바탕과도 3:1 이상이라 그대로 둔다
     - --edge-* / --pin-* : 지도 마커의 색인데, 마커 말풍선은 **흰색이고 지도 위에 있다.**
       페이지 배경이 아니라 **지도 무드**를 따라야 할 것들이라 여기 넣지 않는다
     - --accent-fg : 주황 위 글자. --ink 를 따르게 두면 다크에서 흰 글자가 되어
       주황 위에 얹힌다(2.1:1). 먹색으로 못 박는다 */
/* ── 지도 위 부품의 색 (N-238, 2026-08-06) ──
   **앱 테마가 아니라 지도 무드를 따른다.** 부품은 색을 앱 테마에서 받는데 깔고
   앉은 바닥의 밝기는 무드(아침·낮·노을·저녁)가 정한다. 둘은 서로를 몰라서
   「어두운 테마 + 아침 지도」 조합에서 헤더 글자가 **1.07:1** 까지 떨어졌다.
   흰 후광이 유일한 보호였는데, 밝은 바닥 위에서는 후광이 오히려 해가 된다.

   js/flagmap.js 의 applyMapSurface() 가 무드의 땅 색 휘도를 재서 심는다.
   무드가 없는 지도(카카오)는 밝은 바닥이 기본이다 — 아래 :root 값이 그것이다. */
:root, :root[data-map-surface="light"] {
  --on-map-ink: #14211A;                    /* 판 없이 지도에 바로 얹는 글자 */
  --on-map-halo: rgba(255, 255, 255, .95);  /* 그 글자의 후광 */
  --on-map-line: #4C5B53;                   /* 지도 위 판의 테두리 */
}
:root[data-map-surface="dark"] {
  --on-map-ink: #EDEFE9;
  --on-map-halo: rgba(10, 16, 13, .95);
  --on-map-line: #C9CFC7;
}

:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;

  /* 바탕·글자 — 검정이 아니라 **초록 기운의 먹**이다. 나들이맵의 종이지도가 밤이 된 것 */
  --bg: #101714;
  /* --paper-50 은 「가장 밝은 종이」 — 다크에선 가장 어두운 바탕이 대응한다.
     이걸 빠뜨려 상세 판의 크림 그라디언트가 다크에서 라이트 크림으로 새어
     글자(밝은 먹)와 겹쳐 안 보였다 (지적 2026-08-05, N-172) */
  --paper-50: #101714;
  --panel: #19221D;
  --panel-glass: rgba(25, 34, 29, .93);
  --ink: #EDEFE9;             /* 15.5:1 */
  --ink-soft: #A2AEA6;        /*  8.0:1 */
  --line: #2A342E;            /* 장식 선 */
  --band: #222C26;            /* --ink-soft 글자 6.28:1 */
  /* 기능 테두리 — 어두운 판 위 4.78:1. 밝은 쪽이 #7E8F86 으로 내려오면서
     값이 같아졌지만, **뜻이 다르므로 줄은 남긴다** — 한쪽을 조정할 때
     다른 쪽을 딸려 옮기지 않기 위해서다 (N-236) */
  --line-ui: #7E8F86;

  /* 「가장 또렷한」 톤은 다크에서 **밝아진다.** 700 = 더 진한 색이 아니라
     더 또렷한 색이라는 뜻이다 — 밝은 바탕에선 진한 쪽이, 어두운 바탕에선 밝은 쪽이 또렷하다 */
  --green-700: #63D9A0;       /* 10.5:1 */
  --green-100: #1B3629;       /* 연한 판 → 진한 판 */
  --wk-700: #C0A8FF;
  --wk-100: #241C3A;
  --wk-line: #7A63BE;         /* 꺼진 테두리 — 켜진 --wk-600 보다 흐려야 갈린다 */
  --accent-700: #F0B45C;
  --accent-100: #33270F;
  --accent-line: #4E3D18;
  --warn-700: #F5A67E;
  --warn-100: #3A2018;
  --paper-100: #232E28;       /* hover 틴트·막대 */
  --accent-fg: #14211A;       /* 주황 위 먹색 — --ink 를 따라가면 안 된다 */
}

/* ── 리셋 ── */
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  word-break: keep-all;          /* 한글은 어절(띄어쓰기)에서만 끊는다 (상위 20 Ⅴ 한글 줄바꿈) */
  overflow-wrap: break-word;     /* 짝 — 띄어쓰기 없는 긴 덩어리(URL·영문 지명·붙인 시설명)는 넘칠 때만 쪼갠다 */
  text-wrap: pretty;             /* 마지막 줄에 한 단어만 남는 고아줄 방지 (미지원 브라우저는 무시) */
}
img, svg { max-width: 100%; }

/* ── 접근성 기반 (30-Ⅲ) ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--panel); color: var(--ink); font-weight: 800;
  border-radius: var(--radius-sm); padding: 10px 16px;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* 스크린리더 전용 (라벨 등) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* hidden 이 display 지정에 지지 않게 (30-Ⅵ-3) */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}