/* [DEV:FONT] 공통 토큰 비교 기준: 이전 퍼블리셔 백업. 상세: docs/STYLE_CHANGES.md body-1 크기 12→14px, body-1 행간 16→22px, body-2 행간 20→22px, label-2 행간 18→22px. 폼 요소 글자 크기 상속과 작은 텍스트 유틸리티 행간을 보정했다. 색상 토큰 전체를 바꾼 작업은 아니다. 새 개발에서는 푸터 예외와 컴포넌트별 후행 재정의를 확인. 이번 인수인계 정리는 선언을 바꾸지 않았다. */ /* ============================================================================ KRS Foundation — Design Tokens (Style Library) Figma: KRS_홈페이지 / foundation (Variables + Text Styles) ---------------------------------------------------------------------------- Figma 변수(디자인 토큰)를 CSS 커스텀 프로퍼티로 코드화한 시트. 컬러 / 타이포그래피 / 스페이싱 / 라디우스 / 섀도우를 정의한다. 이 파일은 "스타일 라이브러리"의 뿌리이며, 이후 컴포넌트 스타일이 이 토큰들만 참조하도록 확장해 나간다. 폰트: 원본대로 NanumSquareRound + NanumSquare Neo 2종을 웹폰트로 로드. (fonts-archive CDN, weight 700/800 제공) ========================================================================== */ /* Web fonts — family "Nanum Square Round" / "Nanum Square Neo" (weight 400/700/800) ⚠ @import는 CSS 파싱 후에야 로드가 시작돼 페이지 이동 시 폰트 스왑(레이아웃 흔들림)이 생김. → 각 HTML 에서 preconnect + 로 로드한다. (아래 목록 참조) https://cdn.jsdelivr.net/gh/fonts-archive/NanumSquareRound/NanumSquareRound.css https://cdn.jsdelivr.net/gh/fonts-archive/NanumSquareNeo/NanumSquareNeo.css */ :root { /* [개발자 확인 20260827] 푸터 제외: 글자 최소 14px, 홀수 px는 위 짝수, 14px 행간 22px 적용. */ /* -------------------------------------------------------------------------- COLOR — Palette (raw scales) -------------------------------------------------------------------------- */ --color-white: #ffffff; --color-black: #000000; /* Brand / Orange */ --color-brand-100: #fdefdc; --color-brand-200: #fed7aa; --color-brand-400: #ff8c2d; /* orange 400 */ --color-brand-500: #f97316; /* Brand Secondary / Sky-Blue */ --color-sky-50: #e6f4fe; --color-sky-100: #bfe6fd; --color-sky-400: #11a1f4; /* Grayscale */ --color-gray-900: #212529; --color-gray-400: #6d757e; --color-gray-300: #e5e5e5; --color-gray-150: #dee2e6; /* GrayScale/gr150 — 구분선 */ --overlay-dim: #16191c66; /* Black Opacity/bl_opc_40 — 모달 dim */ --color-error: #ef4444; /* 참고: 인풋 오류 상태 */ --color-success: #2ec369; /* 참고: 인풋 성공 상태 */ --color-gray-700: #666666; --color-gray-6: #aaaaaa; /* Neutral (Default) scale used across UI */ --color-neutral-900: #1a1a1a; --color-neutral-700: #303030; --color-neutral-600: #4a4a4a; --color-neutral-500: #8a8a8a; --color-neutral-200: #e3e3e3; --color-neutral-100: #f7f7f7; --color-neutral-50: #fafafa; --color-neutral-0: #ffffff; /* Slate scale */ --color-slate-900: #1e2834; --color-slate-600: #475569; --color-slate-500: #64748b; --color-slate-400: #94a3b8; --color-slate-100: #ebeef6; --color-slate-50: #f4f6fc; /* Accent extras */ --color-yellow-100: #fff9c4; --color-purple-600: #5e50d4; --color-home-blue: #2d9be6; --color-home-green: #0aa582; --color-lilac-100: #d7d2ff; /* concern card fill (Figma literal) */ --color-lilac-50: #e0dcf8; /* preview card fill (Figma literal) */ --color-mint-100: #cdf3de; /* concern card fill (Figma literal) */ --color-hero-blue: #2f9ff5; /* KV / banner sky blue (Figma literal) */ /* Reading-level stage colors (Figma literals) */ --color-level-basic: #5e50d4; /* 기초 단계 */ --color-level-fluent: #4a80ff; /* 유창성 단계 */ --color-level-master: #3dcbfe; /* 독서 숙달 */ --color-level-deep: #1fc691; /* 독서 심화 */ --color-level-lime: #cbe581; /* 레벨 바 gradient 끝 */ /* -------------------------------------------------------------------------- COLOR — Semantic (role-based) -------------------------------------------------------------------------- */ /* Text */ --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-tertiary: #8a8a8a; --text-inverse: #ffffff; --text-inverse-a80: #ffffffbf; --text-inverse-a40: #ffffff5c; --text-brand-400: #ff8c2d; --text-brand-500: #f97316; --text-brand-purple: #5e50d4; --text-slate-primary: #1e2834; --text-slate-secondary: #475569; --text-slate-tertiary: #94a3b8; --text-muted: #615b6a; /* wj_color_txt/txt_400 */ /* Background */ --bg-primary: #ffffff; --bg-secondary: #fafafa; --bg-tertiary: #e3e3e3; --bg-slate-primary: #f4f6fc; --bg-slate-secondary: #ebeef6; --bg-slate-400: #94a3b8; --bg-slate-500: #64748b; --bg-brand-100: #fdefdc; --bg-brand-200: #fed7aa; --bg-brand-500: #f97316; --bg-sky-50: #e6f4fe; --bg-sky-100: #bfe6fd; --bg-sky-400: #11a1f4; --bg-inverse-primary: #303030; --bg-inverse-secondary: #0a0a0a; --bg-inverse-100: #f7f7f7; --bg-inverse-600: #8a8a8a; --bg-alpha-white-20: #ffffff33; --bg-alpha-white-30: #ffffff47; --bg-alpha-dark-10: #1a1a1a17; --bg-alpha-dark-20: #1a1a1a33; --bg-alpha-dark-40: #1a1a1a66; --bg-alpha-dark-60: #1a1a1a99; --bg-home-blue: #2d9be6; --bg-home-green: #0aa582; --bg-home-book: #000000; --bg-home-focus: #1a1a1a0f; --bg-home-adventurer: #bfe6fd; /* Icon */ --icon-primary: #1a1a1a; --icon-secondary: #4a4a4a; --icon-inverse: #ffffff; --icon-inverse-a90: #ffffffcc; --icon-brand-500: #f97316; /* Border */ --border-dark-100: #1a1a1a17; --border-light: #ffffff33; /* -------------------------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------------------------- */ /* 원본 2종 폰트 (Round: 본문/라벨/타이틀 대부분 · Neo: Display/Title Secondary) */ --font-round: "Nanum Square Round", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-neo: "Nanum Square Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --weight-regular: 400; --weight-bold: 700; /* Bold */ --weight-extrabold: 800; /* ExtraBold */ --letter-spacing-tighter: 0; /* -------------------------------------------------------------------------- Type ramp — Figma 텍스트 스타일 확정값 (2026 승인 스케일) size / line-height. 🔒=Figma 변수 실측, 그 외=승인된 제안값 -------------------------------------------------------------------------- */ /* Body (weight 700) */ --font-body-1: 14px; --lh-body-1: 22px; /* [개발자 확인 20260827] 최소 본문 크기 상향; 푸터의 개별 크기는 유지. */ /* [개발자 확인 20260827] 14px 본문·라벨 공통 행간을 PC·모바일 모두 22px로 변경. */ --font-body-2: 14px; --lh-body-2: 22px; --font-body-3: 16px; --lh-body-3: 24px; /* 🔒 */ --font-body-4: 18px; --lh-body-4: 26px; --font-body-5: 20px; --lh-body-5: 32px; /* 🔒 */ /* Label (weight 800) */ --font-label-2: 14px; --lh-label-2: 22px; /* 14px 공통 행간 */ --font-label-3: 16px; --lh-label-3: 20px; /* 🔒 */ --font-label-4: 18px; --lh-label-4: 24px; --font-label-5: 20px; --lh-label-5: 26px; /* Title (weight 800) */ --font-title-1: 16px; --lh-title-1: 22px; --font-title-2: 18px; --lh-title-2: 24px; /* lh 🔒 (Title/Secondary/2) */ --font-title-3: 18px; --lh-title-3: 24px; /* 🔒 */ --font-title-4: 20px; --lh-title-4: 28px; --font-title-5: 22px; --lh-title-5: 30px; --font-title-6: 24px; --lh-title-6: 32px; /* 🔒 */ /* Display (weight 800) */ --font-display-1: 28px; --lh-display-1: 38px; /* Display/Primary/1 */ --font-display-2: 32px; --lh-display-2: 44px; /* Display/Primary/2 */ --font-display-3: 44px; --lh-display-3: 60px; /* Display/Secondary/1 🔒(히어로 실측) */ /* -------------------------------------------------------------------------- SPACING (Space/* scale) -------------------------------------------------------------------------- */ --space-0: 0; --space-1: 1px; --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-60: 60px; --space-64: 64px; /* -------------------------------------------------------------------------- RADIUS (Radius/* scale) -------------------------------------------------------------------------- */ --radius-0: 0; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-32: 32px; --radius-full: 999px; /* -------------------------------------------------------------------------- SHADOW / EFFECT -------------------------------------------------------------------------- */ --shadow-drop-100-color: #1a1a1a17; --shadow-100: 0 4px 16px 0 #1a1a1a17; --shadow-200: 0 4px 8px 0 #1a1a1a17, 0 1px 6px 0 #1a1a1a17; --shadow-gray-5: 4px 4px 20px 0 #0000000d; --shadow-book: 0 8px 24px 0 #1a1a1a33; /* -------------------------------------------------------------------------- LAYOUT (공통 레이아웃: 콘텐츠 폭 1200 + 좌우 패딩 20) -------------------------------------------------------------------------- */ --container-max: 1200px; /* 공통 콘텐츠 컬럼 폭 */ --container-pad: 20px; /* 좌우 내부 패딩 */ /* 스크롤 시 축소된 GNB 높이 — 페이지 네비가 이 값 바로 아래에 붙는다. .is-scrolled .gnb 의 height 와 항상 같은 값이어야 해서 변수로 묶는다. (≤1240 / ≤768 에서는 responsive.css 가 이 값을 다시 낮춘다) */ --gnb-scrolled-h: 80px; --page-max: 1920px; } /* ============================================================================ BASE RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; /* 스크롤바 생성/제거 시 레이아웃 흔들림 방지 */ } body { margin: 0; font-family: var(--font-round); font-weight: var(--weight-bold); color: var(--text-primary); background: var(--bg-primary); line-height: 1.5; word-break: keep-all; /* 한국어 — 단어 중간에서 줄바꿈되지 않게 (전체 상속) */ /* -webkit-font-smoothing: antialiased 는 macOS 취향값인데 Windows 에서는 ClearType(서브픽셀) 을 꺼버려 글자가 얇고 흐려진다. 실측에서 선명한 글자 경계가 27% 줄어 제거. */ } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ---------------------------------------------------------------------------- 키보드 포커스 링 :focus-visible 이라 마우스 클릭에는 안 뜨고 Tab 이동·키보드 조작에만 나타난다. 브랜드 컬러 2px 실선 — 눈에 거슬리지 않을 만큼만. border-radius 는 일부러 안 건드린다 — outline 은 요소 자신의 radius 를 따라가므로 원형 버튼(햄버거·FAB)도 동그랗게 감싼다. -------------------------------------------------------------------------- */ /* 입력 요소는 제외 — 브라우저가 마우스 클릭도 :focus-visible 로 쳐서 링이 뜬다. 인풋은 .input:focus 의 보더 색 변경만으로 충분히 구분된다. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-brand-400); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } /* 마우스로 눌렀을 때는 링을 띄우지 않는다 (:focus-visible 미지원 브라우저 대비) */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; box-shadow: none; } @media (prefers-reduced-motion: no-preference) { a, button, summary, [tabindex] { transition: outline-offset .12s ease; } } /* [개발자 확인 20260827] 기본 폼 글자가 브라우저 기본 13px대로 축소되지 않도록 상속. 푸터의 family-select는 기존 font: inherit과 개별 크기를 그대로 사용한다. */ button, input, select, textarea { font-size: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* ============================================================================ TYPOGRAPHY UTILITY CLASSES (Figma text styles → classes) ========================================================================== */ .t-display-1 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-display-1); line-height: var(--lh-display-1); } .t-display-2 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-display-2); line-height: var(--lh-display-2); } .t-display-3 { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: var(--font-display-3); line-height: var(--lh-display-3); } /* Display/Secondary/1 = Neo */ .t-title-1 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-1); line-height: var(--lh-title-1); } .t-title-2 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-2); line-height: var(--lh-title-2); } .t-title-3 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-3); line-height: var(--lh-title-3); } .t-title-4 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-4); line-height: var(--lh-title-4); } .t-title-5 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-5); line-height: var(--lh-title-5); } .t-title-6 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-6); line-height: var(--lh-title-6); } /* Secondary titles use NanumSquare Neo */ .t-title-2--neo, .t-title-3--neo { font-family: var(--font-neo); } .t-label-2 { /* [개발자 확인 20260827] 푸터 제외: 글자 최소 14px, 홀수 px는 위 짝수, 14px 행간 22px 적용. */ font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-label-2); line-height: 22px; } .t-label-3 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-label-3); line-height: var(--lh-label-3); } .t-label-4 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-label-4); line-height: var(--lh-label-4); } .t-label-5 { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-label-5); line-height: var(--lh-label-5); } .t-body-1 { /* [개발자 확인 20260827] 푸터 제외: 글자 최소 14px, 홀수 px는 위 짝수, 14px 행간 22px 적용. */ font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-1); line-height: 22px; } .t-body-2 { /* [개발자 확인 20260827] 푸터 제외: 글자 최소 14px, 홀수 px는 위 짝수, 14px 행간 22px 적용. */ font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; } .t-body-3 { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); } .t-body-4 { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-4); line-height: var(--lh-body-4); } .t-body-5 { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-5); line-height: var(--lh-body-5); } /* ============================================================================ COLOR UTILITY CLASSES ========================================================================== */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-inverse { color: var(--text-inverse); } .text-brand { color: var(--text-brand-500); } .text-brand-400 { color: var(--text-brand-400); } .text-purple { color: var(--text-brand-purple); }