/* ═══════════════════════════════════════════════════════════════════════════
   ecbt 색 — 팔레트 하나(2026-10-15) · 토큰
   주인님 10-15 「랜딩페이지의 색상을 기본색으로 해서 모든페이지의 색상을 기본색, 보조색, 포인트색등으로
   색상팔레트를 만들고 적용해줘」 · 앞선 지시 「배경은 검정색바탕을 쓰지말고 모든 배경에 흰색으로」.
   기록: ecbt-next docs/design/rounds/palette-20261015/README.md (표 · 옛 값 → 새 값 · 대비)

   구조     §P 팔레트(--pal-*) — 색 hex 는 이 블록에만 적는다(그림 전용 몇 개 · 시험 화면 고유색 제외, 아래 주석).
             §1 뜻 토큰(--primary · --foreground · --border …) — 부품이 쓰는 이름. 값은 전부 var(--pal-*).
             §4 첫 화면 토큰(--lp-*) — 같은 팔레트에 묶었다.
             앱(app.ecbt.kr) src/app/globals.css 에도 같은 이름·같은 값의 --pal-* 가 있다 — 바꿀 때는 두 곳을 같이.
   어둠     없다. 모든 쪽은 밝음(흰 바탕) 고정 — 기기 어둠 설정·data-mode="dark" 를 받아도 이 파일은 밝은 값만 낸다
             (예전 §1 어둠 · §2/§3 변형별 어둠 블록은 2026-10-15 걷었다. DD-25 「기기 설정 따름」은 주인님 지시로 멈춤).
   변형     data-palette="1|2" 는 이제 같은 팔레트다(속성은 남아 있어도 된다 — 없어도 색이 다 찬다).
   크기     <html data-size="normal|large"> — 큰 글씨는 글자 7:1 이상이 되게 팔레트 몇 칸만 진하게(§P 큰 글씨).
   규칙     테마는 루트 변수 교체로만(D-04) · 이 파일에는 변수 선언만(부품 규칙 0) · 그라데이션 없음.
             기본 파랑 금지(디자인 방 공통): 파랑 값은 Tailwind v3·v4 blue-500~800 · shadcn 기본 파랑과 ΔE00 8 이상.
   대비     글자 보통 4.5:1 · 큰 글씨 7:1 · 선(입력 테두리·초점 고리) 3:1 — 쌍마다 주석.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §0 색 아닌 값 — 글꼴 · 모서리 · 크기(보통) */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 10px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --color-scheme: light only;   /* 밝음 고정 — 「only」는 브라우저의 강제 어둡게(자동 다크)도 막는다 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 23px;
  --text-2xl: 30px;
  --ad-h-rect: 280px; /* DD-27: 직사각 광고 예약 높이 */
  --ad-h-band: 96px;  /* DD-27: 띠 광고 예약 높이 */
  --touch-min: 48px;   /* 누르는 영역 최소 높이(D-10) */
  --omr-cell: 48px;    /* OMR 칸 최소 높이 */
  --omr-gap: 6px;      /* OMR 칸 사이 */
}
/* §0 큰 글씨 — 크기만: 글자 약 1.5배 · 누르는 높이 64 · OMR 칸 64. 색은 §P 큰 글씨 블록 */
:root[data-size="large"] {
  --text-xs: 18px;
  --text-sm: 21px;
  --text-base: 24px;
  --text-lg: 28px;
  --text-xl: 34px;
  --text-2xl: 44px;
  --touch-min: 64px;
  --omr-cell: 64px;
  --omr-gap: 8px;
}

/* ════════ §P 팔레트 — 이CBT 색 하나 (첫 화면 DD-37 의 색에서 뽑음) ════════
   대비는 흰 바탕(#FFFFFF) 기준, 「/ 면」은 그 면 위. */
:root {
  /* 기본색 — 이CBT 파랑. 단추 채움 · 링크 · 고른 칸 · 체크 · 상단 메뉴의 지금 칸 */
  --pal-primary: #005EB4;          /* 6.44:1 · 흰 글자 얹기 6.44 · / surface 6.05 · / primary-soft 5.81 — 가장 가까운 기본 파랑과 ΔE00 8.3 */
  --pal-primary-strong: #004E8C;   /* 누름·호버·큰 글씨 파랑 · 8.51:1 · / primary-tint 6.64 — 기본 파랑과 ΔE00 9.2 */
  --pal-primary-soft: #EDF4FC;     /* 옅은 파랑 면 — 호버 · 고른 보기 · 해설 바탕 */
  --pal-primary-tint: #D5E5F7;     /* 조금 진한 옅은 파랑 — 고른 칸 · 배지 바탕 · 그림 뒤 빛 */
  --pal-primary-mid: #8DB7E6;      /* 꾸밈 파랑(그림 반짝임 · 옅은 파랑 테두리) — 글자에 쓰지 않는다 */
  --pal-on-primary: #FFFFFF;       /* 파랑 위 글자 */

  /* 보조색 — 남색. 과목 배지 글자 · 뜻 박스 왼쪽 줄 · 보조 강조. 제목 잉크보다 한 톤 푸르다 */
  --pal-secondary: #0F3460;        /* 12.50:1 · / secondary-soft 10.52 — 기본 파랑과 ΔE00 11.5 */
  --pal-secondary-soft: #E6ECF5;   /* 남색 옅은 면 — 과목 배지 바탕 */
  --pal-on-secondary: #FFFFFF;

  /* 포인트색 — 형광 노랑(첫 화면 OMR 「지금」 줄에서). 면으로만 쓴다: 위 글자는 늘 --pal-ink(11.90:1).
     흰 바탕 위 글자색으로 쓰지 않는다(1.54:1). 글자로 꼭 노랑 계열이 필요하면 --pal-point-ink */
  --pal-point: #FFC933;            /* 노랑 칩 · 「바뀜」 배지 · 즐겨찾기 별 */
  --pal-point-soft: #FFF0B3;       /* 형광펜 밑줄 면 · OMR 지금 줄 · ink 16.0:1 */
  --pal-point-ink: #7A5300;        /* 노랑 계열 글자 · 6.85:1 · / point-soft 5.99 */

  /* 중립 — 잉크 · 본문 · 보조 글자 · 선 · 상자 · 바탕(흰색) */
  --pal-ink: #10151D;              /* 큰 제목 · 18.3:1 */
  --pal-text: #1A1F28;             /* 본문 · 16.5:1 · / surface 15.5 */
  --pal-muted: #586375;            /* 보조 글자 · 6.08:1 · / surface 5.70 · / primary-soft 5.48 */
  --pal-subtle: #626C7F;           /* 작은 보조 글자 · 5.29:1 · / surface 4.96 */
  --pal-line: #E1E7EF;             /* 구분선 · 상자 테두리(꾸밈) */
  --pal-edge: #C9D3E0;             /* 누르는 상자 테두리(꾸밈 · 앱 border-edge) */
  --pal-line-strong: #838EA0;      /* 입력 테두리 · 3.31:1(선 3:1) */
  --pal-surface: #F5F8FC;          /* 상자 · 옅은 면(아주 옅은 회청) */
  --pal-bg: #FFFFFF;               /* 모든 바탕 — 흰색 */

  /* 상태색 — 시험의 뜻(정답 초록 · 오답 빨강 · 주의 호박) */
  --pal-correct: #057A2E;          /* 정답 · 5.48:1 · 흰 글자 5.48 · / correct-soft 4.75 */
  --pal-correct-strong: #045A22;   /* 정답 글자·선(옅은 면 위) · 8.43:1 · / correct-soft 7.31 */
  --pal-correct-soft: #E2F3E7;     /* 정답 옅은 면 */
  --pal-wrong: #C4262E;            /* 오답 · 위험(제출) · 5.73:1 · 흰 글자 5.73 · / wrong-soft 4.88 */
  --pal-wrong-strong: #9A1B22;     /* 오답 글자·선(옅은 면 위) · 8.22:1 · / wrong-soft 7.00 */
  --pal-wrong-soft: #FDE8E8;       /* 오답 옅은 면 */
  --pal-warn: #9A5200;             /* 주의 글자·선 · 5.86:1 · / warn-soft 5.45 */
  --pal-warn-ink: #7A4100;         /* 주의 진한 글자 · 8.13:1 · / warn-soft 7.55 */
  --pal-warn-soft: #FFF6E0;        /* 주의 옅은 면 */
}
/* §P 큰 글씨 — 글자 7:1 이상이 되게 진하게(나머지는 보통 값 그대로 7:1 이상) */
:root[data-size="large"] {
  --pal-primary: #004E8C;          /* 8.51:1 · 흰 글자 8.51 */
  --pal-primary-strong: #003770;   /* 11.79:1 — 기본 파랑과 ΔE00 9.7 */
  --pal-muted: #3D4757;            /* 9.39:1 */
  --pal-subtle: #3F4859;           /* 9.20:1 */
  --pal-point-ink: #5E4000;        /* 9.51:1 */
  --pal-correct: #046225;          /* 7.56:1 */
  --pal-correct-strong: #03541F;   /* 9.16:1 · / correct-soft 7.94 */
  --pal-wrong: #9A1B22;            /* 8.22:1 */
  --pal-wrong-strong: #83161C;     /* 10.02:1 · / wrong-soft 8.53 */
  --pal-warn: #7A4100;             /* 8.13:1 */
}

/* ════════ §1 뜻 토큰 — 부품이 쓰는 이름 (값은 팔레트) ════════ */
:root {
  --background: var(--pal-bg);                 /* 쪽 바탕 — 흰색(예전 #F3F6F9) */
  --foreground: var(--pal-text);               /* 본문 글자 */
  --card: var(--pal-bg);                       /* 카드 */
  --card-foreground: var(--pal-text);
  --muted: var(--pal-surface);                 /* 옅은 면(표 머리 · 칩 · 상자) */
  --muted-foreground: var(--pal-muted);        /* 보조 글자 */
  --muted-foreground-2: var(--pal-subtle);     /* 더 옅은 보조 글자 */
  --accent: var(--pal-primary-soft);           /* shadcn 「은은한 호버 면」 — 첫 화면처럼 옅은 파랑 */
  --accent-foreground: var(--pal-primary-strong);
  --border: var(--pal-line);                   /* 구분선 */
  --input: var(--pal-line-strong);             /* 입력 테두리(3:1) */
  --ring: var(--pal-primary);                  /* 초점 고리 */
  --primary: var(--pal-primary);               /* 기본색 */
  --primary-foreground: var(--pal-on-primary);
  --primary-strong: var(--pal-primary-strong);
  --primary-soft: var(--pal-primary-soft);
  --secondary: var(--pal-secondary);           /* 보조색 */
  --secondary-foreground: var(--pal-on-secondary);
  --highlight: var(--pal-point);               /* 포인트색(면) — 위 글자는 --highlight-foreground */
  --highlight-foreground: var(--pal-ink);
  --link: var(--pal-primary);
  --destructive: var(--pal-wrong);             /* 위험(제출) = 오답 빨강 */
  --destructive-foreground: #FFFFFF;
  --correct: var(--pal-correct);
  --correct-foreground: #FFFFFF;
  --correct-strong: var(--pal-correct-strong);
  --correct-soft: var(--pal-correct-soft);
  --wrong: var(--pal-wrong);
  --wrong-foreground: #FFFFFF;
  --wrong-strong: var(--pal-wrong-strong);
  --wrong-soft: var(--pal-wrong-soft);
  --warning-foreground: var(--pal-warn);
  --timer-warn: var(--pal-wrong);              /* 남은 시간 경고 */
  --subject-badge: var(--pal-secondary-soft);  /* 과목 배지 · 남색 글자 10.52:1 */
  --subject-badge-foreground: var(--pal-secondary);
  --ad-bg: var(--pal-surface);                 /* 광고 자리 바탕 */
  --figure-paper: #FFFFFF;                     /* 그림 종이 */
  /* 시험 화면 고유색 — 큐넷 CBT 화면의 뜻을 그대로 둔다(팔레트 밖 · 바꾸지 않음) */
  --later: #FF7F36;                /* 보류(나중에 풀기) · 위 글자 --later-foreground 7.67:1 */
  --later-foreground: #0B0E14;
  --omr-empty: #FFC9CE;            /* OMR 미응답 · 본문 글자 11.41:1 */
  --omr-filled: #C4C8CF;           /* OMR 응답 · 본문 글자 9.84:1 */
  --omr-current: #FFEB85;          /* OMR 현재 · 본문 글자 13.75:1 */
}

/* ════════ §4 첫 화면(랜딩) 토큰 — 팔레트에 묶음 (2026-10-15) ════════
   쓰는 곳: 첫 화면·전체 종목 쪽(html.lp) — landing-v4.css §⑤. 값은 §P 팔레트(큰 글씨도 §P 를 따라 진해진다).
   예전 --lp-blue-strong #00478F 는 tw3 blue-800 과 ΔE00 7.1 로 「기본 파랑 금지」(8 이상)에 걸려 --pal-primary-strong #004E8C 로 옮겼다. */
:root {
  --lp-bg: var(--pal-bg);
  --lp-ink: var(--pal-ink);
  --lp-text: var(--pal-text);
  --lp-muted: var(--pal-muted);
  --lp-subtle: var(--pal-subtle);
  --lp-blue: var(--pal-primary);
  --lp-blue-strong: var(--pal-primary-strong);
  --lp-blue-soft: var(--pal-primary-soft);
  --lp-blue-tint: var(--pal-primary-tint);
  --lp-blue-mid: var(--pal-primary-mid);
  --lp-on-blue: var(--pal-on-primary);
  --lp-surface: var(--pal-surface);
  --lp-line: var(--pal-line);
  --lp-line-strong: var(--pal-line-strong);
  --lp-current: var(--pal-point-soft);
  /* 그림 전용(첫 화면 CBT·OMR 그림 안에서만) — 팔레트 밖 */
  --lp-bar: #E7EDF4;               /* 그림 속 자리 막대 */
  --lp-omr-line: #C5D0DE;          /* 그림 속 OMR 동그라미 테두리 */
  --lp-shadow-card: 0 1px 2px rgba(15, 35, 70, 0.06), 0 24px 48px -20px rgba(10, 60, 130, 0.30);
  --lp-shadow-tile: 0 14px 26px -10px rgba(0, 72, 150, 0.50);
  --lp-shadow-pop: 0 14px 32px -12px rgba(15, 35, 70, 0.22);
  --lp-shadow-bubble: inset 0 -0.14em 0 rgba(0, 0, 0, 0.20);
  --lp-shadow-ring: 0 0 0 4px rgba(0, 94, 180, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4~§5 — S0 부품용 덧붙임 (의뢰문 1 §3-1, 2026-10-07)
   그린 손: designer-high(Opus) · 의뢰·검수: 컨덕터

   위 §0~§4는 styles/tokens.css 를 바이트까지 그대로 옮긴 것이다(2026-10-15 팔레트 하나 — tokens.css 를 고치면 여기도 같이).
   여기서는 색 값을 하나도 새로 만들지 않는다. 더하는 것은 크기·간격 변수와 「아주 크게」 단계뿐이다.

   쓰는 법   <html data-size="normal|large|xlarge"> (data-palette·data-mode 는 이제 색에 영향 없음 — 밝음 하나)
   글자      --text-base(보기) 17 · --text-stem(지문) 18 · --text-expl(해설) 15.5 · --text-meta 13px
             (8-26 주인님 확정값). 크게 ×1.5 · 아주 크게 ×2.
             §0의 --text-base 16·24px은 색 보드용 임시값이었다(palette.md §8-9) → 여기서 덮는다.
   OMR 칸    --omr-cell 은 §0 값(48 · 64px)을 그대로 쓰고 아주 크게도 64px로 둔다.
             의뢰문 표의 32 · 44 · 52px은 누르는 칸으로는 D-10(누르는 높이 48 · 64px)에 못 미쳐 받지 않았다.
             간격 · 묶음 간격 · 열 수는 의뢰문 표 그대로다.
   배치      --split 은 의뢰문의 「7fr 3fr」을 minmax(0, …) 로 감쌌다 — 긴 수식·넓은 그림이 칸을 밀어내지 않게.
   손질      --omr-handle-h(의뢰문 4 #3, 2026-10-07) — 접힌 하단 시트의 높이(손잡이 한 줄 + 위 테두리 1px).
             시험 단추 줄은 시트가 접혀 있을 때 화면 바닥에서 이만큼 위에 멈춘다 — 손잡이가 단추를 덮지 않게.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §G4 크기 · 간격 — 보통 */
:root {
  --text-base: 17px;       /* 보기 · 본문 · 단추 */
  --text-stem: 18px;       /* 지문 */
  --text-expl: 15.5px;     /* 해설 */
  --text-meta: 13px;       /* 머리표 · 배지 · 설명 줄 */
  --leading: 1.7;          /* 줄 간격 */
  --touch-pad: 12px;       /* 누르는 것의 안쪽 여백 */
  --omr-group-gap: 14px;   /* OMR 묶음 사이 */
  --omr-cols: 5;           /* OMR 한 줄 칸 수 */
  --content-max: 960px;    /* 본문 폭 — D-022 봉인(10-30): 틀은 문서 전체가 한 값 */
  --split: minmax(0, 7fr) minmax(0, 3fr);  /* 시험 틀 본문 : OMR */
  --formula-scale: 1.05;   /* 수식 = 둘레 글자 × 이 값, 한 번만 */
  --figure-max: 60%;       /* 일반 그림 최대 폭(본문 폭 대비). 원본 폭은 넘지 않는다 */
  --ad-h-rect: 280px;      /* 광고 자리 본문형 높이 */
  --ad-h-band: 96px;       /* 광고 자리 띠형 높이 */
  --omr-handle-h: calc(var(--touch-min) + 1px);  /* 접힌 하단 시트 높이 = 손잡이(--touch-min) + 위 테두리. 글자 단계를 따라간다 */
}
/* §G4 크기 · 간격 — 크게(1.5배). 터치 64px · OMR 칸 64px · OMR 간격 8px 은 §0 큰 글씨 블록에 이미 있다 */
:root[data-size="large"] {
  --text-base: 25.5px;
  --text-stem: 27px;
  --text-expl: 23.25px;
  --text-meta: 19.5px;
  --leading: 1.8;
  --touch-pad: 16px;
  --omr-group-gap: 18px;
  --omr-cols: 4;
  --content-max: 960px;    /* D-022 — 글자 크기 기호는 글자만 키운다 */
  --split: minmax(0, 1fr);
  --figure-max: 80%;
}
/* §G4 크기 · 간격 — 아주 크게(2배) */
:root[data-size="xlarge"] {
  --text-xs: 24px;
  --text-sm: 28px;
  --text-base: 34px;
  --text-lg: 38px;
  --text-xl: 46px;
  --text-2xl: 60px;
  --text-stem: 36px;
  --text-expl: 31px;
  --text-meta: 26px;
  --leading: 1.8;
  --touch-min: 64px;
  --touch-pad: 20px;
  --omr-cell: 64px;
  --omr-gap: 10px;
  --omr-group-gap: 22px;
  --omr-cols: 4;
  --content-max: 960px;    /* D-022 */
  --split: minmax(0, 1fr);
  --figure-max: 100%;
}

/* §G5 아주 크게의 색 = 큰 글씨의 색(글자 7:1) — tokens.css §P 큰 글씨 블록과 같은 값(2026-10-15 팔레트) */
:root[data-size="xlarge"] {
  --pal-primary: #004E8C;          /* 8.51:1 */
  --pal-primary-strong: #003770;   /* 11.79:1 */
  --pal-muted: #3D4757;            /* 9.39:1 */
  --pal-subtle: #3F4859;           /* 9.20:1 */
  --pal-point-ink: #5E4000;        /* 9.51:1 */
  --pal-correct: #046225;          /* 7.56:1 */
  --pal-correct-strong: #03541F;   /* 9.16:1 */
  --pal-wrong: #9A1B22;            /* 8.22:1 */
  --pal-wrong-strong: #83161C;     /* 10.02:1 */
  --pal-warn: #7A4100;             /* 8.13:1 */
}