/* 이룬 양형 노트 — 디자인 토큰 단일 출처(:root). 2026-08-03 kit.css 에서 분리. 사유 = landing.html 이 kit.css(139KB) 전체를 로드하는데 PSI 실측상 93%(35.1/36.4KiB 전송분)가 미사용이었다 — landing.css 는 공용 클래스를 이미 자체 정의하고 있고 kit.css 에서 실제로 필요한 것은 이 :root 토큰뿐이다. 토큰을 landing.css 에 복사하지 않고 파일로 뽑은 이유 = 복사본은 반드시 드리프트한다 (sitemap 생성기 선례). index.html·landing.html 양쪽이 이 파일 하나를 참조한다. kit.css 보다 먼저 로드되어야 한다. */ :root { /* --- 브랜드 색(CI · 신설 없음) --- */ --sk-navy: #00285C; --sk-navy-dark: #001E48; --sk-sage: #87A96B; --sk-sage-dark: #4F6B3A; --sk-gold: #D4A853; --sk-cream: #ECE7DC; --sk-ink: #2A2E34; --sk-body: #4A4A5A; /* atom③(P3-1, TASK-52d696 2026-07-18) — #636E72 on #ECE7DC(--sk-cream) 이 3곳 공통 토큰 (체크리스트 __how·통계 __src·인트로 '준비 중' 배지)에서 4.25:1(WCAG AA 4.5 미달) 실측. #5A6468 로 어둡게: (relative luminance 계산) on #ECE7DC = 4.93:1 · on --sk-bg(#FAFAF7) = 5.81:1(기존보다 개선) — 다른 --sk-muted 사용처는 전부 더 밝은 배경이라 회귀 0. */ --sk-muted: #5A6468; --sk-bg: #FAFAF7; --sk-rust: #8A5A1E; /* --- 파생 선·그림자(신규 브랜드색 아님 · 기존 navy 의 투명도/color-mix 변형) --- */ --sk-line: color-mix(in srgb, var(--sk-navy) 12%, transparent); --sk-line-strong: color-mix(in srgb, var(--sk-navy) 18%, transparent); --sk-shadow-card: 0 1px 2px color-mix(in srgb, var(--sk-navy) 6%, transparent), 0 6px 16px color-mix(in srgb, var(--sk-navy) 5%, transparent); --sk-shadow-hover: 0 2px 6px color-mix(in srgb, var(--sk-navy) 10%, transparent), 0 12px 26px color-mix(in srgb, var(--sk-navy) 8%, transparent); /* PLAN-yanghyeong-easy-guide-card-interview(G6 resume r2 · 2026-07-29) — 대표님 OP-1 정정(카톡 수준 시각 문법). 신규 브랜드색 아님 — navy/gold 의 color-mix 파생만. */ --sk-eg-thread-bg: color-mix(in srgb, var(--sk-navy) 7%, #EDF0F4); --sk-eg-user-bubble-bg: color-mix(in srgb, var(--sk-gold) 30%, #fff); /* --- 역할 토큰(2026-07-31 대표님 색 체계 확정 · TDS 학습 L1 — docs/sentencing_kit(yirun-ax)/ 2026-07-31_tds_design_language_learnings_v1.md §2). 규칙: ① 행동(CTA·누르면 다음으로 가는 것) = 네이비 단일 — fill(주 행동 · 화면당 1개 원칙)은 --sk-action-grad, 보조 행동 배경은 --sk-action-weak. 두 번째 행동색 금지. ② 상태·발견 표시(뱃지 등) = --sk-state(세이지) — CTA 에 사용 금지. ③ 주의·확인 신호 = --sk-warn(골드). ④ 텍스트 위계 = ink/body/muted 스케일. ⑤ 클릭 유도는 색 추가가 아니라 효과(elevation·눌림·bump)로. --- */ --sk-action-grad: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-dark) 100%); --sk-action-weak: color-mix(in srgb, var(--sk-navy) 8%, #fff); --sk-action-weak-hover: color-mix(in srgb, var(--sk-navy) 13%, #fff); --sk-state: var(--sk-sage-dark); --sk-warn: var(--sk-gold); /* --- 타이포 스케일(제목·부제·본문·본문보조·보조 + 안읽어도됨 층) --- */ --sk-fs-title: clamp(1.4rem, 1.05rem + 2vw, 1.9rem); --sk-fs-head: 1.075rem; /* 카드·섹션 제목 */ --sk-fs-body: 0.95rem; /* 본문 */ --sk-fs-body2: 0.9rem; /* 본문 보조(리드·설명·표) */ --sk-fs-sm: 0.875rem; /* 보조(메타·배지) — 모바일 최소 가독성(TASK-3b1a7c 디자인#10) */ --sk-fs-notice: 0.9375rem; /* 법률 고지·설명 본문(TASK-3b1a7c 디자인#10 · --sk-fs-sm 보다 한 단 크게) */ --sk-fs-skim: 12.5px; /* "안 읽어도 됨" 층(정식 용어·출처·부가 주석 — 토스 t7 등가 · L1) — 사이클 4(2026-08-27): 12px → 12.5px(정본 §3 하한 · 대표님 「권고대로」) */ /* --- 간격 스케일 --- */ --sk-sp-1: 4px; --sk-sp-2: 8px; --sk-sp-3: 12px; --sk-sp-4: 16px; --sk-sp-5: 24px; --sk-sp-6: 32px; /* --- 모서리 --- */ --sk-radius-card: 16px; --sk-radius-inner: 12px; --sk-radius-pill: 999px; /* --- 포커스 링(전 인터랙티브 공통) --- 사이클 4(2026-08-27): 세이지 → 행동 단일색 (정본 §2 — 네이비·세이지 v2 미사용 · v1 세이지 링이 v2 표면 전반에 누출되던 잔재). */ --sk-focus: 2px solid var(--yg-action); --sk-focus-offset: 2px; /* --- 콘텐츠 유형별 가로폭 --- */ --sk-read: 46rem; /* 읽는 글: 가독 폭(65~75자) */ --sk-wide: 72rem; /* 선택 카드 그리드: 화면 폭 활용 */ /* TASK-9bfb94(resume r1, 2026-07-19) — sticky topbar 높이 상수. .sk-topbar 는 padding(18px×2) + 내용 행(가장 큰 자식 .sk-topbar__badge ≈ 22px 텍스트 라인박스[0.8rem×1.7 line-height] +12px 수직 패딩+2px 보더 ≈ 35.76px) ≈ 72px 계산 추정 + 폰트 렌더링 편차 안전여유 4px로 r1 은 76px 채택([VERIFY] 실기기 확인 권고). TASK-9bfb94(resume r2, atom C4, 2026-07-19) — CoS puppeteer 실기기 실측 결과 실제 높이 = 72px(r1 안전여유 4px 는 불필요했음 — 실측으로 [VERIFY] 해소) → 72px 로 정정. 이 값 하나만 조정하면 .sk-result-tabbar top·#sk-cta-sec scroll-margin-top·app.js TOPBAR_STICKY_OFFSET_PX 가 모두 동기(단일 소스 — 값 변경 시 app.js 상수도 함께 갱신 의무 · 두 파일 간 자동 동기는 아님). */ --sk-topbar-h: 72px; /* UX9-ST(2026-08-30 대표님 지적 ④ — 결과·노트 탭에서 카드 제목이 sticky 탭바에 가림) — 고정(sticky) 스택은 topbar 하나가 아니다. 그 밑에 결과/노트 탭바 (.sk-result-tabbar-wrap — sticky 포지션 · top:var(--sk-topbar-h))가 한 겹 더 붙는다. ※ 이 주석에 sticky 속성 선언 리터럴을 그대로 쓰면 dev-smoke V29-④g(사용처 정확히 3곳) 카운트에 잡힌다 — 산문으로 풀어 쓴다. 탭바가 있는 화면에서 scrollIntoView 로 점프하는 대상은 **두 겹을 합친 바닥**만큼 여유를 줘야 제목이 바 뒤로 들어가지 않는다. --sk-topbar-h 만 쓰면 탭바 높이만큼 모자란다 (실측: 소년 요약 탭 준비물 그리드 → 준비 자료 카드 점프에서 제목이 121px 아래 묻혔다). 실측(CoS puppeteer · 360/412/430/768/1280 5개 뷰포트에서 전부 같은 값): .sk-topbar 실제 높이 75.1px · 탭바 래퍼 sticky top 72px + 높이 61.6px → 바닥 133.6px. → 134px 채택(올림). 탭바는 overflow-x 단일 flex 행이라 줄바꿈이 없어 폭에 따라 변하지 않는다. 주의 1: --sk-topbar-h(72px)는 탭바의 top 오프셋이라는 별도 계약이므로 여기서 건드리지 않는다 (바꾸면 탭바 위치가 움직인다 = 시각 변경). 주의 2: 이 값은 app.js 의 renderNextTabNav 수동 계산(TOPBAR_STICKY_OFFSET_PX)과는 다른 문제다. 그쪽은 탭바를 **포함한 컨테이너(#view-result)의 top** 을 맞추므로 탭바가 아직 흐름 안에 있어 --sk-topbar-h 가 맞다(실측 확인 · 무변경). */ --sk-sticky-stack-h: 134px; } /* ═══════════════════════════════════════════════════════════════════════════ 디자인 시스템 v2 「웜 페이퍼 + 블루 액션」 토큰 (--yg-*) PLAN-design-overhaul Phase 4 사이클 1 (2026-08-26 · 최종 세트 r3 GR-1 확정). 정본 = yirun-ax docs/sentencing_kit/design_overhaul/design_system_v2.md §2·§4. 구 --sk-* 토큰은 앱 표면(index.html·kit.css)이 아직 소비하므로 존치 — 사이클 2(가이드)·3(노트)에서 표면 단위 이행 후 미사용분을 정리한다. --sk-* ↔ --yg-* 역할 매핑표 (값 치환이 아니라 역할 이행 기준): ┌───────────────────┬──────────────────────────────┬───────────────────────────────┐ │ 역할 │ 구 --sk-* (v1 네이비·세이지) │ 신 --yg-* (v2 웜 페이퍼·파랑) │ ├───────────────────┼──────────────────────────────┼───────────────────────────────┤ │ 페이지 바탕 │ --sk-bg #FAFAF7 │ --yg-bg #FAF7F1 │ │ 카드·시트 표면 │ (#fff 직접 지정) │ --yg-surface #FFFFFF │ │ 소프트 필 │ --sk-cream #ECE7DC │ --yg-fill-soft #F2EDE2 │ │ 옅은 필(트랙 카드) │ --sk-action-weak(navy 8%) │ --yg-fill-faint #FBF9F4 │ │ 카드 테두리 │ --sk-line(navy 12%) │ --yg-line #ECE5D6 │ │ 구분선 │ --sk-line-strong(navy 18%) │ --yg-line-soft/--yg-line-softer│ │ 제목·강조 │ --sk-ink #2A2E34 │ --yg-ink #26241F │ │ 본문 │ --sk-body #4A4A5A │ --yg-body #55534B │ │ 보조·메타 │ --sk-muted #5A6468 │ --yg-muted #8A857A (≥12.5px) │ │ 컨트롤 테두리 │ (파생) │ --yg-control-line #D5CDBC │ │ 행동 단일색(CTA) │ --sk-navy + --sk-action-grad │ --yg-action #2E5BFF │ │ 행동 hover/pressed │ --sk-navy-dark │ --yg-action-deep #1E44D4 │ │ 보조 행동 배경 │ --sk-action-weak │ --yg-action-tint #EEF2FF │ │ 상태·발견 표시 │ --sk-state(세이지) │ (v2 미사용 — 선택 표시도 action)│ │ 주의·한계 고지 │ --sk-warn(골드 #D4A853) │ --yg-warn 계열(골드 흡수) │ │ 그림자 │ --sk-shadow-card(navy 파생) │ --yg-shadow-* (웜 · 쿨그레이 X)│ └───────────────────┴──────────────────────────────┴───────────────────────────────┘ 네이비·세이지는 v2 에서 미사용(정본 §2). 타 채널(블로그·카드뉴스·플레이스) CI 는 불변 — 역반영 여부는 개편 완료 후 대표님 별도 결정(플랜 §3). */ :root { /* --- 바탕·잉크 --- r2(2026-08-27 · 대표님 「c로 진행」) — 배경 세트를 웜 페이퍼에서 「C 쿨 그레이지」로 교체: bg #FAF7F1→#F4F5F7 · fill-soft/faint · line 3종 · control-line · 웜 섀도 2종을 세트 동조(5안 비교 시트 GR-1 택일). 실기기에서 웜 페이퍼가 누렇게 떠 타 색과 부조화. 잉크 스케일·행동색·warn 계열(의미상 골드 유지)은 불변. */ --yg-bg: #F4F5F7; --yg-surface: #FFFFFF; --yg-fill-soft: #EAECEF; --yg-fill-faint: #F8F9FB; --yg-line: #E2E5EA; --yg-line-soft: #E8EAEE; --yg-line-softer: #ECEEF1; --yg-ink: #26241F; --yg-body-strong: #453F35; --yg-body: #55534B; --yg-muted: #8A857A; /* 보조·메타 전용 — 12.5px 미만 사용 금지(정본 §3 하한) */ --yg-control-line: #CBD1D9; /* --- 역할색 (행동 단일 = 파랑 · 두 번째 행동색 금지) --- */ --yg-action: #2E5BFF; --yg-action-deep: #1E44D4; --yg-action-tint: #EEF2FF; --yg-warn: #A9803B; --yg-warn-icon: #B8860B; --yg-warn-text: #7A5B10; --yg-warn-bg: #FFF7E8; /* --- 그림자 (r2 쿨 뉴트럴 — §2 r2 note가 정본 · 구 r1 「웜 섀도·쿨 그레이 금지」 문구는 배경 세트 C 교체 때 값만 바뀌고 주석이 남은 잔재라 사이클 4에서 정정) --- */ --yg-shadow-card: 0 2px 8px rgba(58, 66, 80, 0.05); --yg-shadow-sheet: 0 -8px 24px rgba(58, 66, 80, 0.06); --yg-shadow-cta: 0 6px 16px rgba(46, 91, 255, 0.16); --yg-shadow-cta-strong: 0 8px 20px rgba(46, 91, 255, 0.18); /* --- 기하 (정본 §4) --- */ --yg-r-card: 16px; --yg-r-control: 14px; --yg-r-inner: 12px; --yg-r-pill: 999px; /* --- 타이포 (정본 §3 · Noto Sans KR 단일 + 폴백) --- */ --yg-font: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }