/* =====================================================================
_tokens.css — 노무랩 시즌2 디자인 토큰 SoT (4 proto + 셸 공통)
2026-06-04 · 학습앱 디자인 벤치마킹 디렉션 산출
(docs/benchmark/2026-06-04_learning_app_design_benchmark.md)
원칙: 손글씨(Nanum Pen)+종이질감+점선 = 제거(drop). 신뢰감은 장식이 아니라
'보이지 않는 색·명도 일관성과 WCAG 대비'(Toss TDS)에서. 60/30/10 색 규칙.
사용: 각 proto 에 1줄.
(iframe 호스팅이므로 부모 CSS 상속 안 됨 → 각 proto 가 직접 link)
표준 브레이크포인트 (2026-06-12 W2-1 — 권장안 §2):
| 560px | 폰 ↔ 폰와이드 경계 (모바일퍼스트 min-width 정본 = study_drill) |
| 880px | 태블릿 ↔ 데스크탑 경계 |
기존 페이지의 상이한 쿼리값 일괄 교체 금지(회귀 위험 — §4-8 보류) · 페이지 개편 시 이 2값으로 수렴.
===================================================================== */
:root{
color-scheme:light; /* 네이티브 폼컨트롤·스크롤바·캐럿이 토큰 테마를 따르게 (dark 미디어에서 dark 로 전환) */
/* ---- 색: 표면 (60%) — 종이 노란기 제거, 중립 오프화이트 ---- */
--surface:#FAFAF7; /* 앱 배경 (구 --paper-bg #fbf7ec) */
--canvas:#FFFFFF; /* 카드 표면 */
--surface-sunken:#F2F3F5; /* 진행바 트랙·미학습 셀 */
/* ---- 색: 잉크 (30%) — 순흑 배제 ---- */
--ink:#1A1A2E; /* 본문/제목 (구 --ink-black) */
--ink-muted:#5A5E6B; /* 보조 텍스트 */
--ink-faint:#888C99; /* 캡션/플레이스홀더 */
/* ---- 구분선 — 점선 dashed/dotted 폐기, solid 1px 전용 ---- */
--line:#E4E6EC; /* 구 --paper-line */
--line-strong:#CFD2DB;
/* ---- 브랜드 강조 (10%) — CTA·진행바 전용, 의미색과 역할 분리 ---- */
--brand:#18E299; /* 시그니처 그린 (절제 유지) */
--brand-deep:#0B7A53; /* CTA 텍스트/테두리·focus ring — W2-1 명도 보정(구 #0F9E6B · 백색 on-brand-deep ≈5.4:1 AA 충족) */
--on-brand:#053D2A; /* 밝은 --brand(민트) 배경 위 텍스트 — 어두운 글씨 */
--on-brand-deep:#FFFFFF; /* --brand-deep 배경 위 텍스트 — 라이트=흰글씨 (다크에선 brand-deep 가 밝아져 어두운 글씨로 flip) */
/* ---- 브랜드 구조색 (2026-06-22 허브 리디자인) — 로고색 토큰화 아님·독립 UI 구조색.
민트(--brand)=발사 행동 단독 격리 / navy·blue=비액션 브랜드 표면(히어로 틴트·아이콘 프레임·보조 헤딩).
★blue 는 --color-brand-cite(#1E40AF 조문칩)와 명도/채도 분리(혼동 가드) — 다크 대비 게이트 검증 의무. ---- */
--brand-navy:#3A4150; /* 보조 헤딩·구조 텍스트 (라이트=어두운 슬레이트) */
--brand-blue:#5488CC; /* 아이콘 액센트·히어로 글리프 */
--hero-tint:color-mix(in srgb, var(--brand-blue) 5%, var(--canvas)); /* 발사 밴드 은은한 틴트 배경 */
/* ---- 시맨틱 상태색 — 색 단독 금지, 항상 아이콘+라벨 병기 · 상자 가장자리 색 바(좌·상·우·하 어디든)는 2026-09-21 오너 결정으로 금지 — *-bar 토큰은 표·범례·진행 막대 같은 «구조» 선에만 ---- */
--color-correct:#047857; --color-correct-bg:#ECFDF5; --color-correct-bar:#047857;
--color-wrong:#B91C1C; --color-wrong-bg:#FEF2F2; --color-wrong-bar:#B91C1C;
--pen:#c0392b; --pen-soft:#fbe9e7; --pen-line:#e8c4bd; /* 펜 획(채점 표식 «이 진술은 거짓») — 2026-09-13 qid_style.css 에서 승격 · 형제 채점 화면 공유 */
--color-omit:#9AA0AE; --color-omit-bg:#F2F3F5; --color-omit-bar:#9AA0AE;
--color-brand-cite:#1E40AF; --color-brand-cite-bg:#EEF2FF; /* 조문 근거 칩 */
--color-warn:#B45309; --color-warn-bg:#FFFBEB; /* 약점 경고 */
--color-accent:#7C3AED; /* 비교축/콤보 */
/* ---- 히트맵 숙련도 — 무지개 금지, 단색 4단계 채도 (Khan/GitHub) ---- */
--heat-0:#EDEFF3; /* 미학습 */
--heat-1:#BFE9D6; /* 학습중 */
--heat-2:#5FCF9F; /* 숙련 */
--heat-3:#0F9E6B; /* 마스터 */
--heat-weak-1:#FCA5A5; --heat-weak-2:#B91C1C; /* 약점 발산형 */
/* ---- 형광펜 하이라이트 — 상태색과 충돌 없는 채도 (AMBOSS) ---- */
--hl-yellow:rgba(253,230,138,.55); --hl-green:rgba(167,243,208,.55);
--hl-pink:rgba(251,207,232,.6); --hl-pink-soft:rgba(251,207,232,.3);
/* 함정 어절 형광 = 글자색 형광(study_drill R1·비교표 .cmp-em 공유 idiom · 2026-06-11 신설 · 2026-06-16 배경칠→글자색 전환 · 2026-06-21 시안→오렌지 통일) · 라이트는 흰배경 가독 위해 딥오렌지·글로우 없음 */
--hl-trap-ink:#C2410C; --hl-trap-ink-soft:#C9824F; --hl-trap-glow:none;
/* 비교표 셀 **볼드** 마커(공장 강조) = 형광(.cmp-em 오렌지)보다 더 밝고 도드라지는 핑크 잉크(.cmp-b) · 라이트=가독 핑크·글로우 없음 */
--cmp-b-ink:#DB2777; --cmp-b-glow:none;
/* ---- 출제각 9종 카테고리 (Phase 2 exam_angle enum 순서 고정:
암기형·요건절차·주체혼동·범위혼동·예외단서·수치변형·개념구별·반전함정·판례결합)
— 저채도 700계열로 신뢰감 유지, 상태색(correct/wrong)과 역할 분리 ---- */
--angle-1:#64748B; --angle-2:#0F9E6B; --angle-3:#B45309;
--angle-4:#0E7490; --angle-5:#B91C1C; --angle-6:#1E40AF;
--angle-7:#7C3AED; --angle-8:#BE185D; --angle-9:#4D7C0F;
/* ---- 타이포: 폰트 — 손글씨 전면 제거(워드마크 1포인트 예외) ---- */
--font-body:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
--font-serif:"Noto Serif KR","Nanum Myeongjo",Georgia,serif; /* 법령·판례 원문 인용면 한정 (W2-3 예외 헌장 ⑤ — qid stem 잔존은 ① 이월) */
--font-mono:ui-monospace,SFMono-Regular,"Courier New",monospace;
--font-wordmark:"Nanum Pen Script",cursive; /* 셸 상단 '노무랩 시즌2' 로고만 */
/* 말 건네는 안내문 한정(이벤트 팝업 본문 · 고객센터 신고 안내) — 학습 본문·UI 라벨에는 금지. @font-face = 이 파일 하단. */
--font-soft:"GangwonEduAll","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
/* ---- 타입스케일 — 위계는 손글씨가 아니라 크기/굵기로 ---- */
--fs-caption:0.875rem; /* 메타·칩·SRS 라벨 (2026-07-01: 12.8px→14px 전역 상향) */
--fs-body:1rem; /* 본문 (모바일 최소 16px) */
--fs-lede:1.125rem; /* 선지 본문 */
--fs-h3:1.0625rem; /* 섹션 헤더 */
--fs-title:1.25rem; /* 화면 타이틀·verdict */
--fs-hero:1.4rem; /* 조문 표제 세리프 히어로 */
/* design-pass 계약 5단의 아래 두 칸 — 2026-09-13 페이지 사본 7벌(qid_style·index·me·review_queue·coordinator·
tables·study_drill)을 여기로 승격. --fs-micro(분수·스트립)·--fs-nano(차트축 한정)는 UI 라벨에 못 써서 그 사이 칸이다.
px 인 이유 = 사본들이 px 였다(글자크기 다이얼과의 관계를 바꾸지 않는 무변 승격). 페이지 :root 재정의 금지
(verify_dossier_drift c_page_local_token_copies_agree). */
--fs-label:13px; /* 킥·라벨 (home_lead_redesign §6-5 .kick) */
--fs-meta:12px; /* 배지·메타 한 단 (계약 하한) */
--fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;
--fs:1; /* 글자크기 다이얼 기준 (postMessage 배선이 직접 set) */
/* ---- 메인 허브 (2026-06-10 SYNTHESIS) — 위험 2직교축·게이팅 빗금·KPI ----
위험축은 색온도로 직교(따뜻=시점역전 / 차가움=저신뢰) · 기존 토큰 재사용이라 다크 자동 상속.
게이팅 0셀은 색이 아니라 텍스처(빗금) — '데이터없음 ≠ 나쁨'. KPI 수치는 mono+tabular-nums. */
--risk-shift:var(--color-warn); /* 시점역전축 (호박) */
--risk-shift-bg:var(--color-warn-bg);
--risk-lowconf:var(--color-accent); /* 저신뢰축 (보라) */
/* ---- 「법 개정 소식」(amend_news) 3단 긴급도축 — 개정 패밀리(amber) 위 점 액센트.
news-fresh(주황빨강)=이번 점검 신규 포착 · news-shift(amber)=이미 시행된 개정 · news-upcoming(파랑)=미래 시행 예정.
★빨강(--color-wrong "내가 틀림")과 색상각 분리(orange-red) — 자책 시맨틱 회피 + amend_brief amber 일관성 유지.
설계 SoT: docs/ideation/2026-06-15_amend_news_page/SYNTHESIS.md §3 */
--news-shift:var(--risk-shift); --news-shift-bg:var(--risk-shift-bg);
--news-fresh:#C2410C; --news-fresh-bg:#FFF4ED;
--news-upcoming:var(--color-brand-cite); --news-upcoming-bg:var(--color-brand-cite-bg);
--gate-hatch:repeating-linear-gradient(45deg,var(--surface-sunken) 0 6px,var(--line) 6px 7px);
--fs-kpi:2.25rem;
--fs-kpi-sm:1.6rem; /* 보조 KPI (census 타일·카드 내 수치) */
--fs-micro:0.7rem; /* 분수·스트립 보조 수치 (coverage 원장 등) */
--fs-nano:0.66rem; /* 밀집 차트 축 라벨 한정 — 본문/버튼 사용 금지 */
/* ---- 컨테이너 폭 단일 통일 1140 (2026-06-29) — 전 페이지 본문 가로 일관화 · 3단(허브1140/리포트980/집중760) 폐기 ---- */
--w-hub:1140px; --w-report:1140px; --w-focus:1140px;
--w-read:720px; /* 단일 컬럼 읽기 페이지 폭 (2026-07-18) — me/support/release_notes 등 산문형. 가독 줄길이 유지 */
--rail-w:248px; /* 마스터-디테일 좌측 레일 폭 단일 (2026-06-21 통합 시스템 · subtopic/tables/mdetail 공용) */
/* ---- topbar 높이 정본 (T3-1 2026-06-19) — hub_ui.css .topbar{height:52px} 단일 SoT.
하위 sticky 요소(omni-zone·idbar·exambar·subject-tabbar·head·z0·side)는 top:var(--topbar-h) 로 정렬.
topbar 높이 변경 시 한 곳만 고치면 전 페이지 sticky offset 자동 동기(매직넘버 52 산재 제거). ---- */
--topbar-h:52px;
/* ---- z-index 스케일 정본 (2026-06-22 허브 리디자인) — 산재 매직넘버(30/35/40/50) 단일화.
sticky(필터바·omni-zone) < topbar < overlay(scrim) < palette(승격 omni-box) ---- */
--z-sticky:30; --z-topbar:40; --z-overlay:50; --z-palette:55;
/* ---- 모바일 하단 안전영역 (iOS 홈 인디케이터) — 하단탭/고정바 padding SoT ---- */
--safe-bottom:env(safe-area-inset-bottom, 0px);
/* ---- 모달/시트 스크림 (W2-1) ---- */
--scrim:rgba(16,24,40,.45);
/* ---- 자료 밀도 척도 (data_about·article 홈 출제 스트립) — 학습진척(--heat)과 의미 분리, 중립 슬레이트.
--heat = "내가 얼마나 풀었나" / --density = "자료가 얼마나 쌓였나" — 혼용 금지 ---- */
--density-0:#EDEFF3; --density-1:#D9DEE8; --density-2:#A9B5CB; --density-3:#5A6B8C;
/* ---- 간격: 8pt 그리드 ---- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
--sp-fixed-bottom:120px; /* OX 고정 듀얼버튼 회피용 .wrap 하단 패딩 */
/* ═══ 간격 «배정표» — 어느 자리에 어느 눈금인가 (2026-09-11 design-pass §1-c) ═══
★스케일이 있는데도 안 지켜지는 이유는 「8의 배수를 써라」가 «어느 값을» 고르라고 말해 주지 않기
때문이다. 전수 실측(51개 소스): 간격 선언의 토큰율 41% · 리터럴의 66%가 스케일 밖 ·
같은 역할인데 배지 패딩 7종·버튼 7종·카드 6종. → 값을 고르는 자리를 없앤다.
★아래는 새 눈금이 아니라 «--sp-* 를 가리키는 별칭»이다. 스케일은 여전히 하나다.
★부품 «안쪽» 패딩은 여기 없다 — 글자 크기에 비례해야 하므로 em 으로 쓴다(§1-c 표 B). */
--gutter:var(--sp-4); /* 페이지 좌우 거터 — .wrap/.shell 과 탑바가 같은 값이어야 검색창 폭이 본문과 맞는다 */
--zone-gap:var(--sp-6); /* 섹션·존 사이(카드와 카드 사이) */
--card-pad:var(--sp-5); /* 카드 안쪽 패딩 */
--block-gap:var(--sp-4); /* 카드 «안» 블록 사이 */
--label-gap:var(--sp-2); /* 라벨 ↔ 그 내용 */
--inline-gap:var(--sp-2); /* 나란한 인라인 요소(칩·배지·버튼) 사이 */
--tight-gap:var(--sp-1); /* 아이콘과 글자처럼 한 덩어리로 읽히는 것 사이 */
--row-py:var(--sp-4); /* 목록 행 상하 패딩 — 본문 16px 한 줄을 담는 실측 관행값 */
--row-px:var(--card-pad); /* 목록 행 좌우 — 카드 패딩과 같아야 글머리가 한 줄로 선다 */
--row-h:44px; /* 목록 행 «최소» 높이 = 터치 하한(hub_ui 주 CTA 44 와 합류).
실제 높이는 --row-py 가 만든다 — 이 값은 내용이 짧을 때의 바닥이다 */
--hair:1px; /* 헤어라인. 구분은 색이 아니라 이 한 줄이 한다 */
--bleed:calc(-1 * var(--card-pad));
/* ★함정(2026-09-12 qid 실측) — 이 값은 :root 에서 한 번 풀리고 «그대로 상속»된다.
어떤 카드가 자기 안에서 --card-pad 를 덮어써도 --bleed 는 :root 값(-20px)에 머문다.
좁은 폭에서 카드 여백만 줄이는 흔한 패턴에서 스트립이 4px 어긋난다(실측).
→ 지역에서 --card-pad 를 덮는 자리에서는 --bleed 대신 calc(-1 * var(--card-pad)) 를 쓸 것.
쓰임 = 카드 패딩을 빠져나가 가장자리까지 닿는 블록(전폭 스트립·목록). */
/* ---- 반경 + elevation — 불규칙 radius 폐기 ---- */
--r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:9999px;
--shadow-0:none;
--shadow-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); /* 카드 */
--shadow-2:0 4px 12px rgba(16,24,40,.08); /* 고정 하단바·팝오버 */
--shadow-3:0 8px 22px -1px rgba(16,24,40,.30); /* sticky 과목필터 하단 — 검색창 발산량(omni 계약)의 60% 스케일 */
--focus-ring:0 0 0 3px rgba(15,158,107,.45);
/* ---- 아이콘 3눈금 + 모션 1곡선 (2026-09-13 승격 · design-pass §1-e/§1-h) ----
★왜 여기로 올렸나: 두 계약이 이름까지 정해 두었는데 정의는 qid_style.css «한 페이지 안»에만
있었다. 그래서 공유 컴포넌트(hub_palette 등 31페이지 소비)가 그 이름을 쓰면 30페이지에서
정의 0 = 팬텀이 된다(전이 선언이 통째로 무효 · 화면은 멀쩡해 보이고 오류도 안 난다).
추가일 뿐 기존 값 변경이 아니라 어느 소비자도 안 깨진다. qid_style 의 지역 정의는 같은 값이라
그대로 둔다(지역이 이기고 결과가 같다 — 수술적 변경).
.fi 는 width/height 1em 이라 «부모 글자크기 = 아이콘 크기»다. 컨테이너와 짝지어 고정할 것. */
--ic-lg:20px; /* 탑바·이전/다음 화살표 (컨테이너 38~40) */
--ic-md:18px; /* 상태 마크·인라인 행동 (컨테이너 34) */
--ic-sm:16px; /* 메타 칩·chevron·검색 (인라인) */
--dp-dur:.22s; /* 상태 전환·펼침·토글 «전부» 이 한 벌. transition:all 은 금지(속성 열거) */
--dp-ease:cubic-bezier(.32,.72,0,1);
}
/* ===== 다크 토큰 세트 — 야간·장시간 수험 =====
테마 선택(2026-07-18 · me.html 토글 → pref_boot.js 가 html[data-theme] 부여):
· 속성 없음 = 자동 = OS(prefers-color-scheme) 따름 → 아래 @media 블록
· [data-theme="dark"] = 강제 다크(OS 무관) → 그 아래 미러 블록
· [data-theme="light"] = 강제 라이트 → @media 를 :not([data-theme]) 로 배제해 미적용
★★두 블록(@media / [data-theme="dark"])은 **동일 선언 미러** — 한쪽 수정 시 반드시 양쪽 동기.
(플레인 CSS 라 preprocessor 미사용 · hub_palette 폴백 미러와 동류 규약) */
@media (prefers-color-scheme:dark){
:root:not([data-theme]){
color-scheme:dark; /* 네이티브 컨트롤(입력창 글씨·스크롤바·셀렉트 화살표) 다크로 */
--surface:#15161A; /* 순검정 회피 (halation 방지) */
--canvas:#1C1D22;
--surface-sunken:#23252B;
--ink:#E9ECF1; /* 디밍화이트 (순백 회피) */
--ink-muted:#A6AAB5;
--ink-faint:#7A7E8A;
--line:#2E3138;
--line-strong:#3A3E47;
--brand:#34D399; --brand-deep:#34D399; --on-brand:#06281C; --on-brand-deep:#06281C;
/* 구조색 다크 — navy 는 어두운 표면 위 가독 위해 밝은 슬레이트로, blue 는 액센트 명도 보정 · cite 다크(#93B4FF)와 분리 유지 */
--brand-navy:#AEB6C7; --brand-blue:#6E9BD6;
--hero-tint:color-mix(in srgb, var(--brand-blue) 10%, var(--canvas));
--color-correct:#34D399; --color-correct-bg:#0E2A20; --color-correct-bar:#34D399;
--color-wrong:#F87171; --color-wrong-bg:#2C1517; --color-wrong-bar:#F87171;
--pen:#F08379; --pen-soft:#2C1517; --pen-line:#5A2A2A;
--color-omit:#6B7080; --color-omit-bg:#23252B; --color-omit-bar:#6B7080;
--color-brand-cite:#93B4FF; --color-brand-cite-bg:#1A2238;
--color-warn:#FBBF24; --color-warn-bg:#2A2310;
--color-accent:#A78BFA;
--news-fresh:#FB923C; --news-fresh-bg:#2A1B10; /* amend_news 신규 포착 — 다크 명도 보정(#C2410C 탁함) · shift/upcoming 은 토큰참조 자동상속 */
--heat-0:#23252B; --heat-1:#1F4D3A; --heat-2:#2E8C66; --heat-3:#34D399;
--density-0:#23252B; --density-1:#2E3340; --density-2:#46506A; --density-3:#8B9CC4;
--heat-weak-1:#7F2C2C; --heat-weak-2:#F87171;
--hl-yellow:rgba(253,230,138,.28); --hl-green:rgba(52,211,153,.25);
--hl-pink:rgba(244,114,182,.32); --hl-pink-soft:rgba(244,114,182,.16);
/* 함정 어절 형광 = 글자색 네온 오렌지(2026-06-16 배경칠→글자색 전환 · 2026-06-21 시안→오렌지 통일) · 다크는 글로우로 형광감 */
--hl-trap-ink:#FB923C; --hl-trap-ink-soft:#D9A57A; --hl-trap-glow:0 0 7px rgba(251,146,60,.5);
/* 비교표 **볼드** 마커 = 다크 네온 핑크(형광 오렌지보다 밝게 도드라짐) */
--cmp-b-ink:#F472B6; --cmp-b-glow:0 0 7px rgba(244,114,182,.45);
--angle-1:#94A3B8; --angle-2:#34D399; --angle-3:#FBBF24;
--angle-4:#22D3EE; --angle-5:#F87171; --angle-6:#93B4FF;
--angle-7:#A78BFA; --angle-8:#F472B6; --angle-9:#A3E635;
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 4px 14px rgba(0,0,0,.5);
--shadow-3:0 10px 24px 0 rgba(0,0,0,.9); /* 검색창 다크 발산량의 60% 스케일 */
--scrim:rgba(0,0,0,.55);
}
}
/* ===== 강제 다크 미러 (html[data-theme="dark"]) — 위 @media 블록과 동일 선언(★동기 필수) ===== */
:root[data-theme="dark"]{
color-scheme:dark;
--surface:#15161A; --canvas:#1C1D22; --surface-sunken:#23252B;
--ink:#E9ECF1; --ink-muted:#A6AAB5; --ink-faint:#7A7E8A;
--line:#2E3138; --line-strong:#3A3E47;
--brand:#34D399; --brand-deep:#34D399; --on-brand:#06281C; --on-brand-deep:#06281C;
--brand-navy:#AEB6C7; --brand-blue:#6E9BD6;
--hero-tint:color-mix(in srgb, var(--brand-blue) 10%, var(--canvas));
--color-correct:#34D399; --color-correct-bg:#0E2A20; --color-correct-bar:#34D399;
--color-wrong:#F87171; --color-wrong-bg:#2C1517; --color-wrong-bar:#F87171;
--pen:#F08379; --pen-soft:#2C1517; --pen-line:#5A2A2A;
--color-omit:#6B7080; --color-omit-bg:#23252B; --color-omit-bar:#6B7080;
--color-brand-cite:#93B4FF; --color-brand-cite-bg:#1A2238;
--color-warn:#FBBF24; --color-warn-bg:#2A2310;
--color-accent:#A78BFA;
--news-fresh:#FB923C; --news-fresh-bg:#2A1B10;
--heat-0:#23252B; --heat-1:#1F4D3A; --heat-2:#2E8C66; --heat-3:#34D399;
--density-0:#23252B; --density-1:#2E3340; --density-2:#46506A; --density-3:#8B9CC4;
--heat-weak-1:#7F2C2C; --heat-weak-2:#F87171;
--hl-yellow:rgba(253,230,138,.28); --hl-green:rgba(52,211,153,.25);
--hl-pink:rgba(244,114,182,.32); --hl-pink-soft:rgba(244,114,182,.16);
--hl-trap-ink:#FB923C; --hl-trap-ink-soft:#D9A57A; --hl-trap-glow:0 0 7px rgba(251,146,60,.5);
--cmp-b-ink:#F472B6; --cmp-b-glow:0 0 7px rgba(244,114,182,.45);
--angle-1:#94A3B8; --angle-2:#34D399; --angle-3:#FBBF24;
--angle-4:#22D3EE; --angle-5:#F87171; --angle-6:#93B4FF;
--angle-7:#A78BFA; --angle-8:#F472B6; --angle-9:#A3E635;
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 4px 14px rgba(0,0,0,.5);
--shadow-3:0 10px 24px 0 rgba(0,0,0,.9);
--scrim:rgba(0,0,0,.55);
}
/* theme-color 메타(모바일 브라우저 크롬)는 자동 미디어만 반영 — 강제 테마 시 pref_boot 가 갱신하지 않음(경미·의도적 비대응). */
html{font-size:calc(16px * var(--fs));-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* ===== 폼 컨트롤 테마 베이스 (전 페이지 공통) =====
네이티브 input/select/textarea 는 색 미지정 시 UA 기본(검은 글씨)로 떨어져 다크에서 안 보임
→ 잉크 토큰 강제. background:none 으로 카드 위에 얹는 검색창들의 글씨 가독 보장. */
input,select,textarea{color:var(--ink);font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}
/* ===== 배지 3티어 정본 (2026-07-12 — 한 행 내 배지 높이 난립 봉합) =====
왜 hub_ui.css 가 아니라 tokens 층인가: qid.html 은 hub_ui.css 를 로드하지 않는다(자체 qid_style.css 층).
배지는 qid 를 포함한 전 페이지에 걸쳐 있으므로 모든 페이지가 로드하는 이 파일이 유일한 공통 지점.
★기하 불변식 (높이 흔들림 원천 차단) — 새 배지는 반드시 이 3티어 중 하나로:
1) 높이는 height 가 결정한다 — 세로 패딩(padding-block) 금지. em 단위 패딩 금지.
2) border 는 항상 1px solid — 색이 없으면 transparent. (보더 유무로 ±2px 나던 문제)
3) line-height:1 · box-sizing:border-box · inline-flex 정렬.
4) 배지가 놓이는 행 컨테이너는 .bdg-row (align-items:center) — baseline 정렬 금지.
티어: S=비인터랙티브 표식(회차·밴드·함정) / M=정보 라벨·수치 칩 / L=클릭 가능(필터칩·탭) */
:root{
--bdg-h-s:20px; --bdg-h-m:26px; --bdg-h-l:38px;
--bdg-px-s:8px; --bdg-px-m:10px; --bdg-px-l:14px;
}
.bdg-s,.bdg-m,.bdg-l{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;
padding-block:0;border:1px solid transparent;border-radius:var(--r-pill);
line-height:1;white-space:nowrap;font-weight:var(--fw-semi,600)}
.bdg-s{height:var(--bdg-h-s);padding-inline:var(--bdg-px-s);font-size:var(--fs-micro)}
.bdg-m{height:var(--bdg-h-m);padding-inline:var(--bdg-px-m);font-size:var(--fs-caption)}
.bdg-l{height:var(--bdg-h-l);padding-inline:var(--bdg-px-l);font-size:var(--fs-caption)}
.bdg-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
/* 저대비 잠금 행 — NomuContent.lockNoteHtml 정본(2026-07-16 업셀 2층 위계 · tokens층 사유=qid 가 hub_ui 미로드) */
.lock-note{display:flex;align-items:center;gap:.4em;padding:.5em 2px;font-size:var(--fs-caption,.8rem);color:var(--ink-faint,var(--sub,#888));opacity:.8}
.lock-note .fi{width:.8em;height:.8em;flex:0 0 auto}
.lock-note .ln-meta{font-weight:var(--fw-semi,600)}
/* ===== 온·오프 스위치 정본 (2026-08-06 — 2택 세그먼트 버튼「받음/받지 않음」폐기) =====
왜 hub_ui.css 가 아니라 tokens 층인가: 배지와 같은 사유 — hub_ui.css 를 로드하지 않는 페이지도
설정 UI 를 가질 수 있고, 이 파일이 전 페이지가 공통으로 로드하는 유일한 지점이다.
★마크업 계약 (이 형태만 허용):
라벨부연
1) 켜짐/꺼짐의 정본은 **aria-checked 속성 하나**다. 켜짐을 클래스로 표시하지 않는다
(클래스와 속성이 갈리면 화면과 스크린리더가 서로 다른 상태를 말한다).
2) 쓸 수 없는 항목은 **숨기지 말고 disabled** — 조건부 항목도 자리는 항상 보인다(오너 방침 2026-08-06).
사유는 .swt-d 에 문장으로 적는다(비활성 이유를 알 수 없는 회색 스위치 금지).
3) 여백은 .swt-row 가 갖는다 — .swt 자체에 margin 금지(행 정렬이 어긋난다).
기하: iOS 비율(51:31 ≈ 1.65)을 유지한 축소치 46×28. 손가락 타깃 44px 은 .swt::before 확장이 담당
(★종전 「.swt-row 의 min-height 가 담당」은 거짓이었다 — 행은 div 라 눌리지 않고, 실제 히트는 46×28 이었다 · 2026-09-13). */
:root{ --swt-w:46px; --swt-h:28px; --swt-pad:2px; }
.swt{-webkit-appearance:none;appearance:none;box-sizing:border-box;flex:0 0 auto;position:relative;
display:inline-block;width:var(--swt-w);height:var(--swt-h);padding:0;margin:0;border:0;
border-radius:var(--r-pill);background:var(--line-strong);cursor:pointer;vertical-align:middle;
transition:background-color var(--dp-dur) var(--dp-ease)}
.swt::before{content:"";position:absolute;inset:-8px -1px}/* 히트 44 — 행(.swt-row)은 div 라 눌리지 않는다. 스위치 자체를 44 로(2026-09-13 · ::after 는 손잡이가 쓴다) */
.swt::after{content:"";position:absolute;top:var(--swt-pad);left:var(--swt-pad);
width:calc(var(--swt-h) - var(--swt-pad) * 2);height:calc(var(--swt-h) - var(--swt-pad) * 2);
border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.28),0 1px 1px rgba(16,24,40,.16);
transition:transform var(--dp-dur) var(--dp-ease)}
.swt[aria-checked="true"]{background:var(--brand-deep)}
.swt[aria-checked="true"]::after{transform:translateX(calc(var(--swt-w) - var(--swt-h)))}
.swt:not(:disabled):hover{filter:brightness(.97)}
.swt:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
.swt:disabled{cursor:default;opacity:.42}
/* 스위치 행 — 라벨·부연 좌 / 스위치 우 */
.swt-row{display:flex;align-items:center;gap:14px;min-height:44px;padding:9px 0;box-sizing:border-box}
.swt-row .swt-t{flex:1 1 auto;min-width:0}
.swt-row .swt-k{display:block;font-size:var(--fs-caption);font-weight:var(--fw-semi,600);
letter-spacing:-.01em;color:var(--ink)}
.swt-row .swt-d{display:block;margin-top:3px;font-size:.78rem;line-height:1.5;color:var(--ink-faint)}
.swt-row.is-locked .swt-k{color:var(--ink-muted)}
/* ===== 펜 획 정본 (2026-09-13 — qid 채점 표식을 형제 채점 화면으로 · 사본 금지) =====
뜻 = «소거» — 선지형은 현행 정답이 아닌 선지(「옳지 않은 것은?」 발문에선 참인 진술에 그어진다) · OX 카드는 X 진술 — 내 오답 표시가 아니다(qid_layout_redesign §채점 화면 시각 마감).
길이·기울기·세로 위치 = kz.js kzPenFit() 실측(CSS 는 글자 끝을 모른다). 부모(행)에 position:relative 필요.
qid 는 버블 기하에 맞춘 자기 .slash 를 쓰고 토큰(--pen*)·모션(penDraw)만 공유한다.
★모션 가드를 컴포넌트가 들고 다닌다 — hub_ui.css 를 안 싣는 자족 페이지에서도 동작 줄이기가 먹게(design-pass §1-h). */
.pen-slash{position:absolute;left:var(--pen-x,0px);top:calc(var(--pen-y,50%) - 1px + var(--slash-dy,0px));
width:var(--slash-w,100%);height:2px;border-radius:var(--r-pill);background:var(--pen);opacity:.9;
transform-origin:0 50%;transform:rotate(var(--slash-rot,-2deg));pointer-events:none}
.pen-draw .pen-slash{animation:penDraw var(--dp-dur) var(--dp-ease) both}
@keyframes penDraw{from{transform:rotate(var(--slash-rot,-2deg)) scaleX(0)}to{transform:rotate(var(--slash-rot,-2deg)) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pen-draw .pen-slash{animation:none}}
html[data-motion="reduce"] .pen-draw .pen-slash{animation:none}
/* ===========================================================================
* 강원교육모두 OTF — --font-soft 실체(강원도교육청 무료 배포 · 웹폰트 임베딩 허용 · 파일 안 라이선스 필드 = http://www.gwe.go.kr).
* 원본 OTF 4.9MB → 한글 11,172자 전음절 + 라틴·기호 서브셋 woff2 (Light 211KB · Bold 210KB).
* ★굵기 2벌 필수 — Light 만 실으면 굵은 글자가 합성볼드로 뭉툭해진다. 굵기 값은 700 으로(800 금지).
* ★url 은 이 스타일시트 기준 상대경로 = /dashboard/fonts/. 실제 다운로드는 --font-soft 를 쓰는 화면에서만 일어난다.
* ★★2026-09-20 수리 — 종전 두 파일은 Chrome 이 **거부**했다(OTS: 「CFF: Failed to parse Name INDEX」 = 원본 OTF 의 CFF 내부 이름
* 「GangwonEdu OTFLight」에 공백 · 덤으로 kern 표 정렬 오류). 07-26 부터 이 서체를 쓰는 화면(고객센터 머리·이벤트 토스트)은
* 전부 Pretendard 폴백으로 그려지고 있었고, 아무도 못 봤다(오류 0 · 폰트 폴백은 조용하다). 원본에서 이름을 고치고 kern 을
* 떼어 다시 서브셋(fontTools) → OTS 통과. 파일명에 날짜를 붙여 캐시된 옛 파일이 다시 오지 않게 했다.
* 확인법 = 프로브에서 document.fonts.load("300 16px GangwonEduAll") 가 resolve 되는지(거부되면 NetworkError).
* ★한자는 없다(甲·乙·丙 0자) — 한자가 섞이는 답안지(essay_exam·essay_report)는 시스템 서체 폴백에 세로 계량을 맞춰 둔다.
* ======================================================================== */
@font-face{font-family:"GangwonEduAll";src:url("./fonts/GangwonEduAll-Light-20260920.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"GangwonEduAll";src:url("./fonts/GangwonEduAll-Bold-20260920.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}