/* ===================================================================== _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)); /* 발사 밴드 은은한 틴트 배경 */ /* ---- 시맨틱 상태색 — 색 단독 금지, 항상 아이콘+라벨+좌측 컬러바 병기 ---- */ --color-correct:#047857; --color-correct-bg:#ECFDF5; --color-correct-bar:#047857; --color-wrong:#B91C1C; --color-wrong-bg:#FEF2F2; --color-wrong-bar:#B91C1C; --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' 로고만 */ /* ---- 타입스케일 — 위계는 손글씨가 아니라 크기/굵기로 ---- */ --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; /* 조문 표제 세리프 히어로 */ --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 하단 패딩 */ /* ---- 반경 + 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); } /* ===== 다크 토큰 세트 — 야간·장시간 수험 ===== 테마 선택(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; --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; --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)}