/**
 * 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;  /* 로고 전용. 글자 배경으로 쓰지 않는다 */

  /* ── 크기 ────────────────────────────────────────────
   * 4의 배수. 눈으로 고르지 않고 규칙으로 정해야 화면마다 어긋나지 않는다. */
  --gh-r-sm:8px; --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);

  --gh-focus:0 0 0 3px #B4C1F0;   /* 키보드 포커스 — 절대 없애지 않는다 */

  /* 폼 컨트롤·스크롤바까지 밝게 잡는다. 이것을 빼면 입력창만 검게 남는다. */
  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;
    --gh-line:#212838;
    --gh-line-strong:#333B52;
    --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);
    --gh-focus:0 0 0 3px #1D2B78;
    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}
}