/* modakbul — 디자인 시스템 정본 (3단계 · designer) * 이름은 Tailwind 4 @theme 이름공간 그대로(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*). * 승급 때 이 블록을 globals.css 의 `@theme { … }` 로 옮긴다 — 지금은 브라우저가 읽도록 :root 에 둔다. * style.css 는 var() 만 쓴다(raw 색 금지). 치수의 근거는 _design/wireframe.md 6절 폭 표, 색의 근거는 DESIGN.md 대비표. * 브레이크포인트(이름공간 밖이라 여기 값으로 두지 않는다): < 720 1단 유동 · 720–1023 1단 고정 672 · 1024–1279 2단 672+32+272 · ≥ 1280 2단 784+48+304 */ :root { /* ── 색 · 바탕(면) ─────────────────────────────── */ --color-bg: #f5e4c3; /* 화덕 크림 — 페이지 바탕 · 장판 홀수 줄 */ --color-surface: #fbf1dd; /* 밝은 장판 — 짝수 줄 · 칸 모양 · 고지 상자 */ --color-surface-straw: #eedab6; /* 짚 — 재 배지 · 줄 hover · 지금 보는 줄 · 추천 버튼 기본 · 자리표시자 */ --color-surface-spark: #f0ca96; /* 불씨 — 불씨 배지 · 지나가는 강조(끝 상태로 남지 않는다) */ --color-surface-flame: #e87f25; /* 불꽃 — 불꽃 배지(한 목록 ≤ 3) · 누른 추천 버튼 */ --color-band: #2a1c11; /* 먹 띠 — 방송 띠 · 먹 버튼 바탕 */ /* ── 색 · 글자(전경) ───────────────────────────── */ --color-ink: #2a1c11; /* 먹 — 본문 · 제목 · Dongle */ --color-ink-muted: #695746; /* 재빛 — 메타 · 비활성 탭 · 말머리 */ --color-ember: #984500; /* 불티 — 글자용 강조: 활성 막대 · 공지 말머리 · 알림 줄 · 포커스 링 (OKLCH h50) */ --color-flame: #e87f25; /* 불꽃 — 먹 띠 위 방송 점에만 (크림 위 글자로 쓰지 않는다 — 2.24:1) (OKLCH h55) */ --color-cream: #f5e4c3; /* 먹 띠·먹 버튼 위 글자 */ /* 닉네임 불빛 여섯 — 글자에만, 면이 되지 않는다. OKLCH L 0.47–0.49 로 밝기를 맞췄다 */ --color-nick-pat: #9f364b; /* 팥 h12 */ --color-nick-ssuk: #5d6000; /* 쑥 h112 */ --color-nick-sol: #296a3b; /* 솔 h150 */ --color-nick-mul: #006871; /* 물 h205 */ --color-nick-jjok: #2c5a9d; /* 쪽 h258 */ --color-nick-jin: #983474; /* 진달래 h345 */ /* ── 서체 ─────────────────────────────────────── */ --font-display: "Dongle", "Pretendard Variable", sans-serif; --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* ── 글자 크기 · Dongle (글자 잉크가 em 의 0.35–0.88 — 같은 시각 크기는 Pretendard 의 ≈ 1.7배) ── */ --text-mark: 3.5rem; /* 56 워드마크 */ --text-mark--line-height: 1; --text-mark-sm: 2.5rem; /* 40 워드마크 < 720 */ --text-mark-sm--line-height: 1; --text-mark-sub: 2.5rem; /* 40 워드마크 — 홈이 아닌 쪽(쪽 제목이 가장 커야 한다, qa-1 P2-2) */ --text-mark-sub--line-height: 1; --text-mark-sub-sm: 2rem; /* 32 워드마크 — 홈이 아닌 쪽 < 720 */ --text-mark-sub-sm--line-height: 1; --text-page: 5rem; /* 80 쪽 제목 — 한 화면에서 가장 큰 글자. 받침 없는 "베스트" 도 잉크가 워드마크(40)보다 크게 */ --text-page--line-height: 1; --text-page-sm: 4rem; /* 64 쪽 제목 < 720 */ --text-page-sm--line-height: 1; --text-post: 3.75rem; /* 60 글 제목 — 최대 2줄 */ --text-post--line-height: 1.05; --text-post-sm: 2.75rem; /* 44 글 제목 < 720 */ --text-post-sm--line-height: 1.05; --text-tab: 2.5rem; /* 40 새글·베스트 · 기간 · 내 정보 탭 */ --text-tab--line-height: 1; --text-tab-sm: 2.25rem; /* 36 탭 < 720 */ --text-tab-sm--line-height: 1; --text-nav: 2rem; /* 32 머리 이동 낱말 · 주제 필터 · 게시판 고르기 */ --text-nav--line-height: 1; --text-nav-sm: 1.875rem; /* 30 < 720 */ --text-nav-sm--line-height: 1; --text-side: 2.25rem; /* 36 옆 칸 블록 제목 · 댓글 머리 */ --text-side--line-height: 1; --text-stat: 3rem; /* 48 불 쬐는 사람 수 */ --text-stat--line-height: 1; --text-rank: 3.5rem; /* 56 베스트 순위 · 규칙 번호 */ --text-rank--line-height: 1; --text-page-no: 2rem; /* 32 페이지 번호 */ --text-page-no--line-height: 1; --text-reply: 2.25rem; /* 36 대댓글 ㄴ */ --text-reply--line-height: 1; --text-count: 1.875rem; /* 30 추천 배지 숫자 */ --text-count--line-height: 1; --text-tag: 1.75rem; /* 28 말머리 · 레벨 · "새" · "글쓴이" · "운영" 낱말 */ --text-tag--line-height: 1; /* ── 글자 크기 · Pretendard ─────────────────────── */ --text-body: 1.0625rem; /* 17 글 본문 */ --text-body--line-height: 1.75; --text-row: 1.0625rem; /* 17 목록 제목 (≥ 720) */ --text-row--line-height: 1.45; --text-row-sm: 1rem; /* 16 목록 제목 < 720 — 두 줄까지 */ --text-row-sm--line-height: 1.45; --text-name: 1.25rem; /* 20 프로필 닉네임 */ --text-name--line-height: 1.3; --text-ui: 0.9375rem; /* 15 버튼 · 옆 칸 줄 · 댓글 본문 · 고지 */ --text-ui--line-height: 1.55; --text-meta: 0.875rem; /* 14 닉네임(목록) · 시각 · 조회 · 경로 · 방송 띠 */ --text-meta--line-height: 1.4; --text-small: 0.8125rem; /* 13 부제 · 자리표시자 · 꼬리 작은 글자 */ --text-small--line-height: 1.4; /* ── 간격 (4px 척도 · 칸 폭은 고정값) ──────────── */ --spacing: 0.25rem; /* 4 — 기본 단위 */ --spacing-col-main: 49rem; /* 784 본 칸 ≥ 1280 */ --spacing-col-main-md: 42rem; /* 672 본 칸 720–1279 */ --spacing-col-side: 19rem; /* 304 옆 칸 ≥ 1280 */ --spacing-col-side-md: 17rem; /* 272 옆 칸 1024–1279 */ --spacing-col-gap: 3rem; /* 48 두 칸 사이 ≥ 1280 */ --spacing-col-gap-md: 2rem; /* 32 두 칸 사이 1024–1279 · 아래 2열 사이 720–1023 */ --spacing-page-x: 1rem; /* 16 좌우 여백 < 720 */ --spacing-page-x-md: 1.5rem; /* 24 좌우 여백 ≥ 720 */ --spacing-band: 2.75rem; /* 44 방송 띠 높이 — 알림 버튼 44 터치 (모든 폭) */ --spacing-row: 2.75rem; /* 44 목록 한 줄 최소 높이 = 터치 44 */ --spacing-row-y: 0.625rem; /* 10 줄 위아래 안쪽 */ --spacing-row-x: 0.75rem; /* 12 줄 좌우 안쪽 · 칸 사이 */ --spacing-tag-col: 3.25rem; /* 52 말머리 칸 */ --spacing-nick-col: 7rem; /* 112 닉네임 칸 (8자 = 97) */ --spacing-time-col: 3rem; /* 48 시각 칸 */ --spacing-badge-col: 3.25rem; /* 52 추천 배지 칸 (999 = 48) */ --spacing-rank-col: 3rem; /* 48 순위 칸 */ --spacing-reply: 1.75rem; /* 28 대댓글 들여쓰기 */ --spacing-block: 2.5rem; /* 40 옆 칸 블록 사이 */ --spacing-section: 4rem; /* 64 본 칸 큰 구획 사이(글 보기 · 규칙) */ --spacing-touch: 2.75rem; /* 44 최소 터치 */ /* ── 반지름 ──────────────────────────────────── */ --radius-sm: 4px; /* 먹 버튼 · 글자 버튼 포커스 */ --radius-md: 8px; /* 칸 모양 · 추천/비추 버튼 · 고지 상자 · 닉네임 견본 */ --radius-lg: 14px; /* 아바타 · 그림 · 자리표시자 */ --radius-pill: 999px; /* 추천 배지 하나에만 */ /* ── 그림자 — 하나뿐, 누른 추천 버튼 안쪽에만 ──── */ --shadow-press: inset 0 2px 0 rgb(42 28 17 / 0.16); /* ── 이징 (시간은 DESIGN.md 모션 표) ─────────── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* 반응 · 펼침 · 틴트 사라짐 */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* 활성 막대 이동 */ --ease-press: cubic-bezier(0.2, 0, 0, 1); /* 누름 */ }