/**
 * Glohub 디자인 토큰
 * ═══════════════════════════════════════════════════════════════
 * 화면 코드에 색을 직접 쓰지 않는다. 반드시 여기 변수를 통한다.
 * 그래야 브랜드를 한 번 바꿀 때 한 파일만 고치면 된다.
 *
 * 두 축만 쓴다 — 인디고(신뢰) · 코랄(사람).
 * 이전 팔레트는 크림·벽돌·골드·딥그린 네 축이라 무엇이 주색인지 알 수 없었다.
 *
 * 모든 글자/배경 조합은 WCAG AA(4.5:1)를 계산으로 통과시켰다(13/13).
 * 색을 새로 추가할 때도 같은 기준을 지킬 것.
 */

:root {
  /* ── 팔레트 ─────────────────────────────────────────── */
  --gh-indigo-50:#EEF1FC; --gh-indigo-100:#D9E0F8; --gh-indigo-200:#B4C1F0;
  --gh-indigo-300:#8B9CE6; --gh-indigo-400:#5B72E0; --gh-indigo-500:#2B3EA8;
  --gh-indigo-600:#243593; --gh-indigo-700:#1D2B78; --gh-indigo-800:#151E5C;
  --gh-indigo-900:#0F1640;

  --gh-coral-50:#FFF1ED;  --gh-coral-100:#FFE0D8; --gh-coral-200:#FFC2B2;
  --gh-coral-300:#FFA189; --gh-coral-400:#FF8464; --gh-coral-500:#FF6B4A;
  --gh-coral-600:#E5502F; --gh-coral-700:#BF3D20; --gh-coral-800:#942E17;
  --gh-coral-900:#6B2010;

  --gh-gray-0:#FFFFFF;    --gh-gray-50:#F7F8FB;   --gh-gray-100:#EFF1F6;
  --gh-gray-200:#E3E6EE; --gh-gray-300:#CBD1DE; --gh-gray-400:#9BA4B8;
  --gh-gray-500:#68728C; --gh-gray-600:#4C5570; --gh-gray-700:#333B52;
  --gh-gray-800:#212838; --gh-gray-900:#141A2E; --gh-gray-1000:#0B0E14;

  /* ── 의미색 ──────────────────────────────────────────
   * 한국 대기질 등급 관례를 따른다. 좋음=파랑 보통=초록 나쁨=주황 매우나쁨=빨강.
   * 임의로 정하면 유학생이 이미 아는 신호와 어긋난다. */
  --gh-good:#1871BD;        --gh-good-bg:#E8F3FC;
  --gh-moderate:#0B7F58; --gh-moderate-bg:#E6F7F0;
  --gh-bad:#A85D00;          --gh-bad-bg:#FEF3E2;
  --gh-verybad:#D1283C;  --gh-verybad-bg:#FDECEF;
  --gh-info:#2B3EA8;        --gh-info-bg:#EEF1FC;

  /* ── 역할 (화면 코드는 이것만 쓴다) ────────────────── */
  --gh-canvas:#F7F8FB;        /* 페이지 배경 */
  --gh-surface:#FFFFFF;        /* 카드 */
  --gh-surface-2:#EFF1F6;    /* 카드 위 강조 영역 */
  --gh-text:#141A2E;         /* 본문 */
  --gh-text-sub:#68728C;     /* 보조 — AA 통과선까지 어둡게 맞춘 값 */
  --gh-text-on:#FFFFFF;        /* 컬러 배경 위 글자 */
  --gh-line:#E3E6EE;
  --gh-line-strong:#CBD1DE;

  --gh-primary:#2B3EA8;      /* 주 동작 */
  --gh-primary-hover:#243593;
  --gh-primary-soft:#EEF1FC;
  --gh-accent:#BF3D20;       /* 강조 동작 — 흰 글자를 얹으려면 700 */
  --gh-accent-hover:#942E17;
  --gh-accent-soft:#FFF1ED;
  --gh-brand-coral:#FF6B4A;  /* 로고 전용. 글자 배경으로 쓰지 않는다 */

  /* ── 파스텔 8색 (2026-08-13 추가) ─────────────────────
   * ⚠ 위의 primary·accent 는 **동작**을 위한 색이라 진하다. 단추에는 옳지만
   *   카드 배경으로 깔면 화면이 무거워진다. 배경·도형·칩 전용으로 이 여덟 쌍을 둔다.
   * ⚠ 예쁘라고 쓰지 않는다. **뜻으로 묶는다** —
   *     돈·혜택 lime · 집 mint · 비자·서류 indigo · 기한 임박 peach
   *     교통·통신 sky · 커뮤니티 lilac · 알림 butter · 사람 rose
   *   색이 분류가 되면 글자를 못 읽는 이용자도 화면을 구분한다.
   * ⚠ 각 쌍은 (배경, 그 위 글자색)이다. 글자색은 배경 대비 4.5:1 이상으로 맞췄다.
   *   배경만 가져다 쓰고 글자색을 --gh-text-sub 로 얹으면 대비가 무너진다. */
  --gh-p-indigo:#EDF0FE; --gh-p-indigo-ink:#2B3EA8;
  --gh-p-sky:#E7F1FF;    --gh-p-sky-ink:#1B5FBF;
  --gh-p-mint:#E3F6F1;   --gh-p-mint-ink:#0B7A66;
  --gh-p-lime:#EAF6E1;   --gh-p-lime-ink:#3B7A22;
  --gh-p-butter:#FEF3DC; --gh-p-butter-ink:#8A5B00;
  --gh-p-peach:#FFEDE6;  --gh-p-peach-ink:#B4441F;
  --gh-p-rose:#FEE9F0;   --gh-p-rose-ink:#A83060;
  --gh-p-lilac:#F1EBFD;  --gh-p-lilac-ink:#6B3BC4;

  /* ── 크기 ────────────────────────────────────────────
   * 4의 배수. 눈으로 고르지 않고 규칙으로 정해야 화면마다 어긋나지 않는다. */
  /* 모서리 규칙 (2026-08-16 명문화) — 새로 만드는 것은 여기서 고른다.
   *   카드 --gh-r-lg(16) · 단추·칩 --gh-r-md(12) · 입력 --gh-r-in(10) · 아바타·태그 --gh-r-full
   * ⚠ 기존 화면을 일괄로 맞추지 않았다. 라운드는 눈에 안 띄게 어긋나 있어 한 번에 바꾸면
   *   무엇이 바뀌었는지 아무도 확인할 수 없다. 손대는 컴포넌트부터 이 규칙으로 옮긴다. */
  --gh-r-sm:8px; --gh-r-in:10px; --gh-r-md:12px; --gh-r-lg:16px; --gh-r-xl:22px; --gh-r-full:999px;
  --gh-s-1:4px; --gh-s-2:8px; --gh-s-3:12px; --gh-s-4:16px;
  --gh-s-5:24px; --gh-s-6:32px; --gh-s-7:48px; --gh-s-8:64px;

  /* ── 글자 ────────────────────────────────────────────
   * 한글은 라틴보다 작아 보인다. 본문 16px 아래로 내리지 않는다.
   * 유학생은 모국어가 아닌 글을 읽는다 — 행간을 넉넉히 준다. */
  /* 카카오톡·틱톡·인스타그램이 모두 쓰는 방식 — 웹폰트를 내려받지 않고
   * 각 OS의 기본 UI 서체를 그대로 부른다. 한글·중국어·베트남어·키릴이
   * 기기 안에서 이미 해결돼 있어, 4개 언어를 섞어 써도 글자가 깨지지 않고
   * 네트워크가 느린 곳에서도 글자가 늦게 뜨는 일이 없다. */
  /* ⚠ 윈도우에서 'Segoe UI' 를 앞에 두면 한글이 '맑은 고딕'으로 떨어진다.
   *   맑은 고딕은 자간이 넓고 획이 얇아, 같은 화면인데 PC에서만 헐렁하고 예스러워 보인다.
   *   그래서 한국어를 먼저 잡을 수 있는 서체를 앞에 세운다 —
   *   Pretendard(설치돼 있으면) → 애플 SD 산돌고딕 → 맑은 고딕 순.
   *   웹폰트는 내려받지 않는다. 없으면 다음 후보로 조용히 넘어간다.
   *   새로 더한 언어(네팔·미얀마)는 각 OS의 기본 서체가 받아준다 — 마지막 후보들이 그 몫이다. */
  --gh-font:-apple-system,BlinkMacSystemFont,'SF Pro Text',
    Pretendard,'Pretendard Variable','Apple SD Gothic Neo','Noto Sans KR',
    'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',
    'Malgun Gothic','Noto Sans','Noto Sans Devanagari','Noto Sans Myanmar','Pyidaungsu',
    'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  --gh-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gh-t-display:44px; --gh-t-h1:32px; --gh-t-h2:24px; --gh-t-h3:19px;
  --gh-t-body:16px;    --gh-t-sm:14px; --gh-t-xs:12.5px;
  --gh-lh-tight:1.25;  --gh-lh-body:1.7;
  /* 자간 — 한글은 라틴보다 붙어 보여 살짝 벌린다. PC에서 더 크게 잡는다(아래 참조). */
  --gh-tracking:-.01em;

  /* ── 그림자 ─────────────────────────────────────────
   * 인디고를 섞어 회색 그림자보다 브랜드와 붙어 보이게 한다. */
  --gh-sh-1:0 1px 2px rgba(20,26,46,.06), 0 1px 3px rgba(20,26,46,.08);
  --gh-sh-2:0 4px 12px rgba(20,26,46,.08), 0 2px 4px rgba(20,26,46,.06);
  --gh-sh-3:0 12px 32px rgba(20,26,46,.12);

  /* ── 테마 A "Clear Indigo" (2026-08-16 추가) ─────────────
   * primary(#2B3EA8)는 **동작**을 위해 진하다. 단추에는 옳지만 링크·활성탭·아이콘 라인처럼
   * 획이 얇은 자리에 쓰면 배경에 눌어붙어 '누를 수 있다'가 안 읽힌다.
   * 한 단계 밝고 채도 높은 값을 따로 둔다. 코어(primary/accent/canvas/…)는 건드리지 않는다.
   *
   * 대비비 — 계산: node scripts/contrast.mjs
   *   #4A5AE8 / #FFFFFF surface        5.36:1  AA 통과
   *   #4A5AE8 / #F7F8FB canvas         5.05:1  AA 통과
   *   #4A5AE8 / #F2F4F8 surface-hover  4.87:1  AA 통과
   *   #4A5AE8 / #EEF1FC primary-soft   4.75:1  (아이콘 라인 3:1 기준, 여유 통과) */
  --gh-primary-bright:#4A5AE8;
  --gh-primary-glow:rgba(74,90,232,.22);

  /* hover 로 깔리는 면.
   * ⚠ 면이 어두워지면 그 위 **보조 글자**가 먼저 무너진다 —
   *   #68728C / #F2F4F8 = 4.36:1 로 AA 미달이다(흰 바탕에서는 4.80:1 로 통과했다).
   *   그래서 hover 면에는 짝이 되는 보조 글자색을 함께 둔다. **면만 가져다 쓰지 말 것.**
   *   #646D86 / #F2F4F8 = 4.68:1  AA 통과 */
  --gh-surface-hover:#F2F4F8;
  --gh-text-sub-hover:#646D86;

  /* ── 2·3차 글자 (2026-08-16 추가) ─────────────────────
   * ⚠ 이 두 이름은 화면 코드에서 **20군데 넘게 쓰이고 있었는데 정의가 없었다.**
   *   정의가 없는 var() 는 «무시»가 아니라 그 속성을 통째로 무효로 만든다. 그래서
   *     · color 자리에서는 부모 색을 물려받아 **본문과 같은 진한 색**으로 찍혔고
   *     · background 자리(시트 손잡이)에서는 **투명**이 되어 아예 안 보였다
   *   오류는 한 줄도 안 났다. tests/tokens.test.mjs 가 이제 이 부류를 막는다.
   *
   * ⛔ 왜 셋 다 같은 값인가 — 더 옅게 갈 자리가 없다.
   *   이 이름들은 «비었을 때 뜨는 안내글»(placeholder)에도 쓰인다. 그건 장식이 아니라
   *   **글자**라서 4.5:1 을 지켜야 하는데, 우리 바탕 넷 중 가장 까다로운 peach 에서
   *   #68728C 조차 4.23:1 이다. 후보들을 재 보면 답이 분명하다(흰 바탕 기준):
   *       #9BA4B8 2.50:1 · #8A93A8 3.08:1 · #7E879E 3.59:1 · #767F96 4.00:1
   *   전부 미달이다. 색을 한 단 더 옅게 하는 방법으로는 3단을 만들 수 없다.
   *   → **3단은 색이 아니라 크기·굵기로 만든다.** 이름은 뜻을 남겨 두되 값은 같이 간다.
   *   (peach 처럼 색이 깔린 면에서는 --gh-text-sub-hover 로 갈아끼우는 규칙이 이미 있다) */
  --gh-text-2:#68728C;
  --gh-text-3:#68728C;

  /* 약한 구분선.
   * ⚠ 이것은 **장식**이다 (#EEF0F5 / 흰 바탕 = 1.14:1). 기존 --gh-line 도 같은 급이다(1.25:1).
   *   선은 4.5:1 을 지키면서 선으로 보일 수 없다. 그래서 기준을 «자리»로 정한다 —
   *   목록을 나누는 선에만 쓰고, **입력창·단추처럼 조작 대상의 경계에는 쓰지 않는다.**
   *   그 자리는 --gh-line-strong 이다. */
  --gh-line-soft:#EEF0F5;

  /* ── 테마 B "Aurora Indigo" — 프로모션 서피스 전용 ────────
   * ⚠ 리스트·폼·데이터 화면에는 쓰지 않는다. 랜딩 히어로 · 온보딩 · 이벤트 카드에만.
   *   정보를 읽는 화면에 그라데이션이 깔리면 같은 글자의 대비가 자리마다 달라진다.
   *
   *   #6B4EFF / #FFFFFF   5.05:1   (흰 글자를 얹어도 5.05:1 — 양방향 통과)
   *   #5A3AE0 / #FFFFFF   6.74:1
   *   #5A3AE0 / #F3F0FF   6.01:1   soft 면 위 글자
   * ⚠ 히어로 그라데이션 중간 지점을 원안 #5B72E0 로 두면 **흰 글자가 4.26:1** 로 미달한다.
   *   그라데이션 위 글자의 기준은 «가장 밝은 지점»이다. #5065D8 로 낮춰 5.01:1 을 확보했다.
   *   색의 흐름(인디고 → 페리윙클 → 바이올렛)은 원안 그대로다. */
  --gh-violet-500:#6B4EFF; --gh-violet-600:#5A3AE0; --gh-violet-soft:#F3F0FF;
  --gh-grad-hero:linear-gradient(135deg,#2B3EA8 0%,#5065D8 45%,#6B4EFF 100%);
  --gh-grad-cta:linear-gradient(120deg,#2B3EA8,#5B3AE6);   /* 흰 글자 8.91:1 → 6.58:1 */
  --gh-glow-coral:radial-gradient(circle,rgba(255,107,74,.28),transparent 68%);

  /* 키보드 포커스 — 절대 없애지 않는다.
   * ⚠ 원안은 glow 한 겹(rgba(74,90,232,.22))이었다. 흰 바탕에 얹으면 실제 색이 #D7DBFA 가 되어
   *   **1.36:1** 이다. 포커스 링은 글자가 아니지만 WCAG 1.4.11 이 3:1 을 요구하고,
   *   무엇보다 옛 값(#B4C1F0, 1.78:1)보다 **더 안 보이게** 된다 — 접근성이 뒷걸음질친다.
   *   두 겹으로 간다: 안쪽 실선이 대비를 책임지고(#4A5AE8, 5.36:1), 바깥 glow 가 인상을 맡는다. */
  --gh-focus:0 0 0 2px var(--gh-primary-bright), 0 0 0 6px var(--gh-primary-glow);


  /* 폼 컨트롤·스크롤바까지 밝게 잡는다. 이것을 빼면 입력창만 검게 남는다. */
  color-scheme:light;
}

/* ── 다크 모드 ──────────────────────────────────────────
 * ⚠ 기기 설정을 그대로 따라가지 않는다.
 *   글로버브의 정체성은 '흰 바탕 + 인디고, 강조는 코랄'이다.
 *   기기가 다크 모드면 앱 전체가 검게 뒤집혀 브랜드가 사라졌다.
 *   그래서 다크는 이용자가 직접 고를 때만 켜진다(html[data-theme="dark"]).
 * 색을 뒤집는 게 아니라 역할을 다시 배정한다.
 * 어두운 배경에서는 인디고500이 가라앉아 링크로 안 읽히므로 300을 쓴다. */
html[data-theme="dark"] {
    --gh-canvas:#0B0E14;
    --gh-surface:#141A2E;
    --gh-surface-2:#212838;
    --gh-text:#EFF1F6;
    --gh-text-sub:#9BA4B8;
    /* ⚠ 다크 짝을 빼먹으면 그 자리만 라이트 색(#68728C)이 남아 어두운 바탕에서 가라앉는다.
       밝은 화면과 같은 이유로 셋 다 같은 값이다 — 색으로 3단을 만들지 않는다. */
    --gh-text-2:#9BA4B8;
    --gh-text-3:#9BA4B8;
    --gh-line:#212838;
    --gh-line-strong:#333B52;
    /* 파스텔은 어두운 배경에서 그대로 쓰면 눈을 찌른다. 채도를 낮춘 짙은 판 + 밝은 글자로 뒤집는다. */
    --gh-p-indigo:#1B2450; --gh-p-indigo-ink:#B4C1F0;
    --gh-p-sky:#122744;    --gh-p-sky-ink:#8FBEFF;
    --gh-p-mint:#0B2E29;   --gh-p-mint-ink:#5EEAD4;
    --gh-p-lime:#172C10;   --gh-p-lime-ink:#8CE99A;
    --gh-p-butter:#2E2410; --gh-p-butter-ink:#FFD48A;
    --gh-p-peach:#331A12;  --gh-p-peach-ink:#FFA189;
    --gh-p-rose:#331424;   --gh-p-rose-ink:#FFA8C5;
    --gh-p-lilac:#241A3D;  --gh-p-lilac-ink:#C4B5FD;
    --gh-primary:#8B9CE6;
    --gh-primary-hover:#B4C1F0;
    --gh-primary-soft:#0F1640;
    --gh-accent:#FF8464;
    --gh-accent-hover:#FFA189;
    --gh-accent-soft:#6B2010;
    --gh-good:#6BB6F0; --gh-good-bg:#0C2438;
    --gh-moderate:#4ADE9E; --gh-moderate-bg:#062A1D;
    --gh-bad:#F5B14A; --gh-bad-bg:#2E1F06;
    --gh-verybad:#FF8494; --gh-verybad-bg:#2E0C12;
    --gh-info:#8B9CE6; --gh-info-bg:#0F1640;
    --gh-sh-1:0 1px 2px rgba(0,0,0,.4);
    --gh-sh-2:0 4px 12px rgba(0,0,0,.5);
    --gh-sh-3:0 12px 32px rgba(0,0,0,.6);

    /* ── 테마 A·B 의 다크 짝 (2026-08-16) ────────────────────
     * ⚠ 밝은 화면 값을 그대로 쓰면 어두운 바탕에서 가라앉아 링크로 안 읽힌다.
     *   밝기를 올린 짝을 반드시 같이 정의한다 — 하나라도 빠지면 그 자리만 라이트 색이 남는다.
     *
     *   #8FA0FF / #0B0E14 canvas        7.95:1
     *   #8FA0FF / #141A2E surface       7.10:1
     *   #8FA0FF / #1B2338 hover 면      6.43:1
     *   #B7A6FF / #141A2E surface       8.14:1
     *   #EFF1F6 / #1B2338 본문          13.83:1
     *   #9BA4B8 / #1B2338 보조 글자      6.25:1  (다크에서는 hover 면을 낮춰도 보조 글자가 버틴다) */
    --gh-primary-bright:#8FA0FF;
    --gh-primary-glow:rgba(143,160,255,.26);
    --gh-surface-hover:#1B2338;
    --gh-text-sub-hover:#9BA4B8;
    --gh-line-soft:#1A2032;          /* 장식 구분선 — 1.19:1, 조작 경계에는 쓰지 않는다 */
    --gh-violet-500:#B7A6FF; --gh-violet-600:#C4B5FD; --gh-violet-soft:#241A3D;
    /* 그라데이션은 어두운 화면에서 더 가라앉혀야 흰 글자가 산다 */
    --gh-grad-hero:linear-gradient(135deg,#151E5C 0%,#2B3EA8 45%,#4A31B8 100%);
    --gh-grad-cta:linear-gradient(120deg,#1D2B78,#3F27A8);
    --gh-focus:0 0 0 2px var(--gh-primary-bright), 0 0 0 6px var(--gh-primary-glow);
    color-scheme:dark;
}

/* 사용자가 애니메이션을 줄이도록 설정했다면 존중한다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── PC 화면 ──────────────────────────────────────────────
 * 같은 코드인데 PC에서만 어색해 보이는 이유는 서체가 달라서다.
 * 윈도우는 맑은 고딕(획이 얇고 자간이 넓다), 맥은 애플 SD 산돌고딕(단단하다).
 * 글자 크기를 살짝 줄이고 자간을 좁혀, 넓은 화면에서 문장이 흩어지지 않게 한다.
 * 마우스로 보는 화면은 손가락으로 보는 화면보다 눈이 가깝고 글자가 커 보인다. */
@media (min-width:900px) and (pointer:fine){
  :root{
    --gh-t-body:15.5px; --gh-t-sm:13.5px; --gh-t-xs:12px;
    --gh-lh-body:1.66;
    --gh-tracking:-.015em;
  }
  body{letter-spacing:var(--gh-tracking);
       -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
       text-rendering:optimizeLegibility}
}