/* linguaedu.online 디자인 토큰 (시안 2026-10-20)
   기능 쪽은 이 파일을 그대로 가져다 쓴다. 이름은 바꾸지 말고 값만 바꾼다.
   브랜드 고정 = 짙은 남색 #1f3a68 + 민트 #d2f9e8 (학생본 팔레트) · 글꼴 = 페이퍼로지(SIL OFL 1.1)
   A안(표 중심)과 B안(카드 중심)은 같은 색 · 글꼴을 쓰고, 모서리 · 밀도 · 그림자만 [data-variant] 로 갈린다.
   대비: 본문 글자 4.5:1 이상 (아래 각 짝 옆에 잰 값). */

@font-face{font-family:"Paperlogy";font-weight:400;font-display:swap;src:url("assets/fonts/Paperlogy-400.woff") format("woff")}
@font-face{font-family:"Paperlogy";font-weight:600;font-display:swap;src:url("assets/fonts/Paperlogy-600.woff") format("woff")}
@font-face{font-family:"Paperlogy";font-weight:800;font-display:swap;src:url("assets/fonts/Paperlogy-800.woff") format("woff")}

:root{
  /* ---------- 브랜드 */
  --brand-navy:#1f3a68;          /* 흰 바탕 위 11.3:1 */
  --brand-mint:#d2f9e8;          /* 남색 글자 9.9:1 */

  /* ---------- 남색 계단 (차갑게 기운 뼈대) */
  --navy-950:#0f1f3d;
  --navy-900:#16294d;
  --navy-800:#1f3a68;            /* = brand */
  --navy-700:#2b4b80;
  --navy-600:#3c5d95;            /* 흰 바탕 6.6:1 */
  --navy-300:#9fb3d3;
  --navy-200:#c9d6ea;
  --navy-100:#e4ebf5;
  --navy-50:#f2f5fa;

  /* ---------- 민트 계단 */
  --mint-400:#7fe3b9;
  --mint-300:#a9f0d0;
  --mint-200:#d2f9e8;            /* = brand */
  --mint-100:#e8fcf3;
  --mint-ink:#0b5a40;            /* 민트 200 위 7.2:1 */

  /* ---------- 글자 · 바탕 · 선 */
  --ink:#121a2a;                 /* 흰 바탕 17.4:1 */
  --ink-2:#36425a;               /* 흰 10.1:1 · canvas 9.2:1 */
  --ink-3:#56627a;               /* 흰 6.1:1 · canvas 5.6:1 · canvas-2 5.2:1 (가장 옅은 글자) */
  --ink-on-navy:#ffffff;
  --ink-on-navy-2:#c9d6ea;       /* navy-800 위 7.7:1 */
  --surface:#ffffff;
  --canvas:#f3f5f9;              /* 앱 바닥 */
  --canvas-2:#e9edf4;            /* 옆 막대 · 도구 막대 */
  --line:#dde3ec;
  --line-2:#c3ccda;
  --line-strong:#7a879d;         /* 입력 칸 테두리 3.6:1 (3:1 이상) */

  /* ---------- 상태색 (글자 / 바탕) */
  --ok:#0b6a47;      --ok-bg:#d6f7e7;    --ok-line:#7fd8ae;   /* 승인 · 일치 5.8:1 */
  --warn:#7a4b00;    --warn-bg:#fff0cc;  --warn-line:#f0c25a; /* 고쳐 승인 · 어긋남 6.6:1 */
  --bad:#9b2f2f;     --bad-bg:#fbe2df;   --bad-line:#eba49c;  /* 거부 · 불일치 6.0:1 */
  --wait:#36425a;    --wait-bg:#e9edf4;  --wait-line:#c3ccda; /* 대기 */
  --info:#1f3a68;    --info-bg:#e4ebf5;  --info-line:#9fb3d3; /* 안내 */

  /* ---------- 난도 4단계 (1 기초 · 2 적용 · 3 사고 · 4 심화) — 남색 짙기로만 오른다 */
  --lv1-bg:#e4ebf5;  --lv1-ink:#1f3a68;   /* 9.4:1 */
  --lv2-bg:#c9d6ea;  --lv2-ink:#16294d;   /* 9.8:1 */
  --lv3-bg:#3c5d95;  --lv3-ink:#ffffff;   /* 6.6:1 */
  --lv4-bg:#16294d;  --lv4-ink:#d2f9e8;   /* 12.6:1 */

  /* ---------- 카카오 로그인 (공식 꼴: 바탕 #FEE500 · 글자 검정 85% · 심볼 검정) */
  --kakao-bg:#FEE500;
  --kakao-ink:rgba(0,0,0,.85);

  /* ---------- 글꼴 */
  --font:"Paperlogy","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-num:"Paperlogy","Malgun Gothic",sans-serif; /* font-variant-numeric:tabular-nums 와 같이 */
  --fs-12:.8125rem;  /* 13px 최소 크기 (메타 · 칸 이름) */
  --fs-14:.875rem;
  --fs-15:.9375rem;
  --fs-16:1rem;
  --fs-17:1.0625rem; /* 지문 영문 */
  --fs-18:1.125rem;
  --fs-20:1.25rem;
  --fs-24:1.5rem;
  --fs-30:1.875rem;
  --fs-40:2.5rem;
  --lh-tight:1.25;
  --lh-ui:1.45;
  --lh-read:1.7;     /* 지문 · 해설 */

  /* ---------- 간격 (4px 바탕) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ---------- 모서리 (규칙: 칩 = 알약 · 조작 = ctl · 판 = panel) */
  --r-ctl:6px;
  --r-panel:10px;
  --r-pill:999px;

  /* ---------- 그림자 (남색으로 물들임 · 흐림 있음) */
  --sh-1:0 1px 2px rgba(22,41,77,.06),0 1px 1px rgba(22,41,77,.04);
  --sh-2:0 2px 6px rgba(22,41,77,.06),0 10px 24px rgba(22,41,77,.08);
  --sh-pop:0 8px 28px rgba(22,41,77,.18);

  /* ---------- 밀도 */
  --row-h:40px;      /* 표 줄 높이 */
  --ctl-h:36px;      /* 단추 · 입력 높이 */
  --side-w:232px;    /* 옆 막대 */
  --top-h:56px;

  /* ---------- 움직임 (상태 변화에만) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:140ms;
  --t-mid:220ms;

  /* ---------- 초점 */
  --focus:0 0 0 3px #ffffff,0 0 0 5px var(--navy-700);
}

/* B안 = 카드 중심 · 학습 앱 결: 같은 색, 둥글고 넉넉하게 */
[data-variant="b"]{
  --r-ctl:12px;
  --r-panel:20px;
  --row-h:52px;
  --ctl-h:44px;
  --top-h:64px;
  --canvas:#f2f6f8;
  --sh-2:0 1px 2px rgba(22,41,77,.05),0 12px 32px rgba(22,41,77,.07);
}

@media (prefers-reduced-motion:reduce){
  :root{--t-fast:0ms;--t-mid:0ms}
}