/* ═══════════════════════════════════════════════════════════════════════════ 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" 는 이제 같은 팔레트다(속성은 남아 있어도 된다 — 없어도 색이 다 찬다). 크기 — 큰 글씨는 글자 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; --reading-max: 46rem; /* S6(2026-10-31) 읽기용 산문 문단 폭(736px) — 문단·목록 줄에만. 표·코드·그림은 틀 폭(--content-max 960 · D-022) 그대로 */ --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); } /* 바닥 AI 고지 링크 색 — 8673ea9 인라인 색 대신 클래스(ORDER-24) */ .ai-notice a, a.ai-link { color: inherit; }