/* ───────────────────────────────────────────────────────────── 디자인 토큰 요구사항 35·36번: 색상과 타이포를 변수로 관리하고 하드코딩하지 않는다. 컴포넌트 CSS 는 이 파일의 변수만 참조한다. ───────────────────────────────────────────────────────────── */ :root { /* ── 색상 ───────────────────────────────────────────────── */ --color-white: #ffffff; --color-warm-white: #fafaf8; --color-black: #171717; --color-gray: #55554f; --color-light-gray: #e4e4de; /* 글자 3단계. 옅은 쪽 두 단계는 흰 카드(#ffffff)와 목록 바닥(#f2f2f2) **둘 다**에서 4.5:1 을 넘도록 잡았다. 두 바탕에 같은 글자색이 오가기 때문에, 밝은 쪽만 맞추면 바닥에 놓인 날짜와 라벨이 흐려진다. 흰 카드 목록 바닥 text 17.93 16.01 muted 7.50 6.70 본문 보조 설명 subtle 5.44 4.86 날짜 · 갈래 라벨 · 위치 표시 예전에는 subtle 이 #999999 였다. 흰 바탕에서 2.85:1, 바닥에서 2.38:1 로 기준(4.5)에 한참 못 미쳤는데, 상단 메뉴와 목록의 날짜가 전부 이 색이었다. 회색이 아주 살짝 따뜻한 쪽으로 기울어 있다. 바탕이 따뜻하던 시절에 맞춘 것인데, 바닥을 중립색(#f2f2f2)으로 바꾼 뒤로는 근거가 약해졌다. 차이가 R-B 로 6 정도라 눈에 띄지는 않는다. 톤을 정리할 일이 생기면 테두리·light-gray 와 함께 한 번에 중립으로 옮기는 편이 낫다. */ --color-text: var(--color-black); --color-text-muted: var(--color-gray); --color-text-subtle: #6a6a64; --color-border: #dfdfdb; /* 흰 바탕 위에 놓이는 카드의 테두리. 카드도 희고 바탕도 희면 윤곽을 테두리 혼자 맡는다. 기본 테두리 (#dfdfdb, 흰 바탕에서 1.34:1)로는 카드가 카드로 안 보인다. 회색 바탕 위에서는 기본 테두리로 충분하다 — 색 차이가 이미 있으니까. */ --color-border-card: #d5d5d0; /* 밝은 색은 두 단계만 쓴다. 흰색 #ffffff — 앞에 있는 것. 카드, 상세 페이지 본문 바닥 #f2f2f2 — 뒤에 있는 것. 목록 바닥, 히어로, 섹션 교차, CTA 예전에는 #ffffff · #fafaf8 · #f3f3f0 · #f2f2f2 넷이 섞여 있었다. #f3f3f0 과 #f2f2f2 는 대비가 1.007 로 사실상 같은 색인데 자리마다 달라 '미세하게 어긋난' 느낌만 남겼다. 두 단계로 줄이고 간격을 벌린다. 바닥을 #ebebe6 에서 #f2f2f2 로 한 단계 밝혔다(2026-08-29). 화면이 가벼워지고 글자 대비도 조금씩 올라간다. 대신 흰 카드가 바닥에서 떠 보이는 정도는 1.196 → 1.119 로 줄어드니, 카드의 테두리를 없애면 경계가 사라진다. 테두리는 그대로 둔다. */ --color-page: #f2f2f2; --color-surface: var(--color-white); --color-surface-alt: var(--color-page); /* 세 번째 톤을 두지 않는다 */ /* 포인트 컬러. 기존 홈페이지가 쓰던 코랄을 이어받되 조금 눌러서 쓴다. 원래 색(#E2645B)은 흰 바탕에서 3.4:1 이라 13px 라벨이 흐려 보였다. #C4453B 로 한 번 눌렀지만 그것도 흰 바탕(4.93)만 통과였고, 그때의 바닥(#ebebe6)에서는 4.12 로 미달이었다. 'Books' 같은 섹션 라벨이 바로 그 바닥 위에 놓인다. 한 단계 더 눌러 두 바탕 모두 통과시킨다. #b93f36 — 흰 5.49 · 바닥 4.90 쓰는 곳을 일부러 좁혔다. 라벨 · 신간 배지 · 페이지 표시 정도다. 버튼과 CTA 까지 물들이면 표지의 색과 싸운다. 색은 책이 맡는다. */ --color-accent: #b93f36; --color-accent-soft: #fbf1ef; /* 브랜드 메인 컬러 — 로고/브랜드 자산 확인 후 확정한다. 확정 전까지는 먹색을 그대로 사용해 임시 색이 화면에 남지 않게 한다. */ --color-brand: var(--color-black); --color-brand-contrast: var(--color-white); /* 상태 색상 — 관리자 알림에만 사용 (프론트는 무채색 유지) */ --color-success: #1c7c4a; --color-success-bg: #eef7f1; --color-danger: #b42318; --color-danger-bg: #fdf2f1; --color-warning: #8a6100; --color-warning-bg: #fdf6e7; /* ── 타이포그래피 ───────────────────────────────────────── */ /* Pretendard 가 설치되어 있으면 사용하고, 없으면 OS 기본 한글 산세리프로 내려간다. PHASE 4 에서 서브셋 woff2 를 self-host 로 추가한다. */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif; --font-serif: "Nanum Myeongjo", "Apple SD Gothic Neo", Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, "D2Coding", monospace; --text-hero: 3.25rem; /* 52px — 첫 화면 큰 글씨. 64px 은 두 줄이 되면 화면을 다 먹었다 */ --text-display: 2.5rem; /* 40px */ --text-h1: 2rem; /* 32px */ --text-h2: 1.5rem; /* 24px */ --text-h3: 1.25rem; /* 20px */ --text-lg: 1.125rem; /* 18px — 큰 글씨 아래 설명, 부제 */ --text-body: 1rem; /* 16px — 본문 */ --text-md: 0.9375rem; /* 15px — 표지 옆 한 줄 소개·책 속의 한 줄 */ --text-sm: 0.875rem; /* 14px */ --text-xs: 0.8125rem; /* 13px */ --text-2xs: 0.6875rem; /* 11px — 배지, 카드의 곁말 */ --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.8; /* 한글 본문 가독성 */ --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* 영문 소제목(BOOKS, AUTHORS) */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Pretendard 가 지원한다. 큰 제목에만 쓴다 */ /* ── 여백 ───────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ── 레이아웃 ───────────────────────────────────────────── */ --container-max: 1280px; --container-narrow: 760px; /* 읽는 화면의 폭은 두 개만 쓴다. 머리(제목·요약) 56rem = 896px 본문(이미지·글) 45rem = 720px 하나로 합치면 큰 제목이 세 줄로 접히고, 넷으로 흩어지면 기준선이 사라진다. rem 으로 잡는 이유는 em 이 글자 크기를 따라가기 때문이다. 제목은 40px 라서 em 으로 주면 폭이 2.5배로 늘어난다. */ --measure-head: 56rem; --measure-body: 45rem; --gutter: var(--space-5); /* ── 형태 ───────────────────────────────────────────────── */ /* 머리 메뉴 높이(76px + 아래 선 1px). 메뉴가 화면에 고정돼 있으므로, 스크롤에 붙는 것들은 이만큼 내려야 메뉴 아래로 파고들지 않는다. */ --header-height: 77px; --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; /* 그림자는 최소한으로. 요구사항 34번 "과도한 그림자" 금지 */ --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06); --shadow: 0 4px 16px rgba(23, 23, 23, 0.08); /* 표지 가장자리에 두르는 머리카락 굵기 선. 흰 표지가 흰 바탕 위에 놓이면 어디까지가 책인지 보이지 않는다 (『모모와 다큰 왕자』가 그랬다). 그림자만으로는 부족하다. 테두리(border)가 아니라 그림자로 두는 이유는, 테두리는 자리를 차지해 표지 크기가 2px 씩 달라지기 때문이다. */ --cover-edge: 0 0 0 1px rgba(23, 23, 23, 0.14); /* ── 모션 ───────────────────────────────────────────────── */ --duration-fast: 0.15s; --duration: 0.25s; /* 도서 카드 hover 패널 (0.2~0.3s) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* ── 도서 표지 비율 ─────────────────────────────────────── */ --cover-ratio: 148 / 210; /* 국판 기준. 표지 비율을 유지해 Layout Shift 를 막는다 */ } @media (max-width: 767px) { :root { --text-hero: 2.25rem; /* 36px — Mobile Hero (32~40px 범위) */ --text-display: 1.75rem; --text-h1: 1.5rem; --gutter: var(--space-4); } } /* 요구사항 38번: prefers-reduced-motion 지원 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }