/** * AllPlanner Design System - CSS Variables * Theme: Australian Sunset Gold * Version: 1.0.0 * * 구조: * 1. Color Palette (색상 팔레트) * 2. Typography (타이포그래피) * 3. Spacing (간격) * 4. Shadows (그림자) * 5. Borders (테두리) * 6. Transitions (전환 효과) * 7. Z-Index (레이어 순서) * 8. Breakpoints Reference (반응형 참조) */ :root { /* ======================================== 1. COLOR PALETTE - Australian Sunset Gold ======================================== */ /* Primary Colors - Gold Theme */ --color-primary: #FFB700; --color-primary-light: #FFC933; --color-primary-lighter: #FFD966; --color-primary-dark: #E5A400; --color-primary-darker: #CC9200; /* Primary RGB (for rgba usage) */ --color-primary-rgb: 255, 183, 0; /* Primary HSL (for dynamic theming / rebranding) */ --color-primary-h: 43; --color-primary-s: 100%; --color-primary-l: 50%; /* Secondary Colors - Deep Ocean Blue */ --color-secondary: #1E3A5F; --color-secondary-light: #2A4A73; --color-secondary-dark: #152A47; --color-secondary-rgb: 30, 58, 95; --color-secondary-h: 214; --color-secondary-s: 52%; --color-secondary-l: 25%; /* Accent Colors */ --color-accent-coral: #E85A4F; /* Energy, Passion */ --color-accent-teal: #2D9596; /* Nature, Trust */ --color-accent-coral-rgb: 232, 90, 79; --color-accent-teal-rgb: 45, 149, 150; /* Semantic Colors */ --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; /* Neutral Colors */ --color-white: #FFFFFF; --color-black: #000000; --color-bg-warm: #F7F7F5; /* 2026-10-01 결정 003 색 A: 연한 채움은 흰 계열 하나로 (옛 크림 #FFFBEB) */ /* Warm White */ --color-bg-cream: #F7F7F5; /* Cream */ --color-itinerary-source-bg: #FFF7E6; /* P0a-2 (S105): timeline source badge background — warm yellow tint */ --color-bg-light: #F7F7F5; /* 2026-10-01: 위와 같은 흰 계열 */ --color-bg-gray: #F7F7F5; /* 2026-10-01: 위와 같은 흰 계열 (선으로 쓰던 자리는 --color-border-light 로 옮김) */ /* Text Colors — WCAG AA 4.5:1 against white */ --color-text-primary: #1F2937; /* Charcoal — 12.6:1 */ --color-text-secondary: #46576C; /* 2026-10-23 회색 한 벌 = 남색 기운 (옛 #4B5563) */ /* — 7.0:1 */ --color-text-muted: #5F7085; /* 2026-10-23 남색 기운 회색, 흰 바탕 5.0:1 · #F7F7F5 위 4.7:1 (옛 #6B7280) */ /* — 4.6:1 */ --color-text-light: #5F7085; /* v48.2: was #9CA3AF (2.6:1, AA fail) → #6B7280 (4.6:1, AA pass) */ --color-text-inverse: #FFFFFF; /* Primary for text — darker variant for accessibility */ --color-primary-text: #b45309; /* Gold-dark, 4.6:1 against white. Use instead of --color-primary for text. */ /* Border Colors */ --color-border-light: #E1E7EE; /* 2026-10-23 남색 기운 선 (옛 #E5E7EB) */ --color-border-medium: #D1D5DB; --color-border-dark: #9CA3AF; /* ======================================== 1b. QW4 (S191) — Warm meaning-tag palette 커머스 카테고리 + 상세시트 의미태그 색을 웜 세계관으로 중앙화. 흩어진 SaaS/구글 리터럴(파랑·보라·청록·초록·빨강) 치환 SSOT. ======================================== */ /* Category accents — commerce tabs + product thumbnail fallback. Warm hue band, separated by lightness/chroma (구분은 아이콘·라벨이 보조). */ --color-cat-tour: var(--color-primary); /* gold — 투어 */ --color-cat-ticket: #E8941E; /* honey-amber — 입장권 */ --color-cat-activity: #E2691E; /* terracotta — 액티비티 */ --color-cat-transport: #9C6515; /* bronze (dark) — 교통 */ --color-cat-accommodation: #C79A2E; /* brass — 숙소 */ --color-cat-food: #C0451C; /* rust — 맛집 */ /* Tag tint/text pairs — pd-ri rotation · pd-vibe · pd-vi. Light warm bg + dark warm text, all targeted WCAG AA (>=4.5:1) for small text. */ --color-tag-gold-bg: #FFF3D6; --color-tag-gold-text: #8A5A00; --color-tag-amber-bg: #FDEBC8; --color-tag-amber-text: #92400E; --color-tag-honey-bg: #FBE3B8; --color-tag-honey-text: #7A4B12; --color-tag-bronze-bg: #F1E2C4; --color-tag-bronze-text: #6B4A1A; --color-tag-clay-bg: #FBE0CE; --color-tag-clay-text: #9A4A1E; --color-tag-rust-bg: #FCDDD2; --color-tag-rust-text: #A33617; --color-tag-sage-bg: #EFEAD8; --color-tag-sage-text: #5F5A2A; /* warm-olive, not cool green */ /* 빛·밝기 단계 (2026-10-23) — 남색·금색을 한 값으로 평평하게 칠하지 않고 9단계로 나눠 자리마다 고른다. 600 = --color-secondary, 700 = --color-secondary-dark 와 같은 값. 바탕·선·글자는 같은 집안 칸에서. */ --t2w-navy-50: #F2F5F9; --t2w-navy-100: #DCE4EE; --t2w-navy-200: #B5C4D6; --t2w-navy-300: #8399B3; --t2w-navy-400: #56708F; --t2w-navy-500: #2E4A6E; --t2w-navy-600: #1E3A5F; --t2w-navy-700: #152A47; --t2w-navy-800: #0E1B2E; --t2w-gold-50: #FFF8E8; --t2w-gold-100: #FCEBC2; --t2w-gold-200: #F6D58A; --t2w-gold-300: #EDBC52; --t2w-gold-400: #E0A43A; --t2w-gold-500: #C4862A; --t2w-gold-600: #9C6820; --t2w-gold-700: #7A5413; --t2w-gold-800: #553A0E; --t2w-gold-ink: #3E2A08; /* 금색 단추 위 글자 */ /* 빛: 윗면 반사 · 바닥에서 뜬 그림자 · 사진에 얹는 옅은 빛 */ --t2w-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.28); --t2w-lift: 0 1px 2px rgba(40, 32, 20, 0.05), 0 14px 30px -18px rgba(30, 51, 85, 0.35); --t2w-lift-hover: 0 2px 4px rgba(40, 32, 20, 0.06), 0 22px 38px -18px rgba(30, 51, 85, 0.45); --t2w-photo-light: linear-gradient(180deg, rgba(255, 236, 200, 0.08), rgba(14, 27, 46, 0.12)); --t2w-btn-navy: linear-gradient(180deg, rgba(48, 82, 125, 0.86), rgba(21, 42, 71, 0.86)); --t2w-btn-navy-shadow: var(--t2w-sheen), 0 8px 18px -10px rgba(14, 27, 46, 0.7); --t2w-btn-gold: linear-gradient(180deg, var(--t2w-gold-200), var(--t2w-gold-400)); --t2w-btn-gold-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 10px -4px rgba(156, 104, 32, 0.55); --t2w-chip-gold: linear-gradient(180deg, var(--color-white), var(--t2w-gold-50)); --t2w-chip-gold-shadow: var(--t2w-sheen), 0 6px 14px -10px rgba(156, 104, 32, 0.5); --t2w-wash-navy: linear-gradient(180deg, var(--t2w-navy-50) 0%, #F9FAFC 60%, var(--color-white) 100%); /* ======================================== 2. GRADIENTS ======================================== */ /* Primary Gradients */ --gradient-gold: linear-gradient(135deg, #FFB700 0%, #E5A400 100%); --gradient-gold-reverse: linear-gradient(135deg, #E5A400 0%, #FFB700 100%); --gradient-gold-horizontal: linear-gradient(90deg, #FFB700 0%, #FFC933 50%, #FFB700 100%); /* Hero Overlays */ --gradient-hero-dark: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); --gradient-hero-gold: linear-gradient(180deg, rgba(255, 183, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%); --gradient-hero-sunset: linear-gradient(180deg, rgba(255, 183, 0, 0.3) 0%, rgba(232, 90, 79, 0.2) 50%, rgba(0, 0, 0, 0.7) 100%); /* Card Overlays */ --gradient-card-hover: linear-gradient(180deg, transparent 0%, rgba(255, 183, 0, 0.1) 100%); /* Background Gradients */ --gradient-section-warm: linear-gradient(180deg, #FFFFFF 0%, #F8F6F0 100%); --gradient-section-gold: linear-gradient(180deg, #F7F7F5 0%, #FFFFFF 100%); /* ======================================== 3. TYPOGRAPHY ======================================== */ /* Font Families */ --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Poppins', 'Pretendard', sans-serif; --font-accent: 'Playfair Display', 'Noto Serif KR', serif; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* ======================================== 4. SPACING ======================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section Spacing */ --section-padding-sm: 1.5rem; --section-padding-md: 2.5rem; --section-padding-lg: 3.5rem; /* Container */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* 사이트 표준 컨테이너 — 전 페이지 "글 시작선" 하나 (S272, 마스터 승인 2026-07-25) 실측 근거: 페이지마다 시작선이 달랐음(1440px에서 홈 136·장소상세 178·투어 166·장소목록 186·푸터 104). 계산: 좌측선 = (뷰포트 - wrap-max)/2 + wrap-pad → 1440:152 / 1024:26 / 768:19 / 375:16 적용 대상 = 홈 .t2w-hp-wrap / 장소상세 .t2w-pd / 투어상세 .t2w-tour-detail / 목록 .t2w-pi·.t2w-celebx / 푸터 .t2w-footer__inner (헤더는 풀블리드 크롬으로 예외 — docs/DESIGN.md §컨테이너 표준) */ --t2w-wrap-max: 1200px; --t2w-wrap-pad: clamp(16px, 2.5vw, 32px); /* ======================================== 5. SHADOWS ======================================== */ /* Standard Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Gold Shadows */ --shadow-gold-sm: 0 2px 8px rgba(255, 183, 0, 0.2); --shadow-gold-md: 0 4px 15px rgba(255, 183, 0, 0.3); --shadow-gold-lg: 0 8px 25px rgba(255, 183, 0, 0.4); --shadow-gold-xl: 0 12px 35px rgba(255, 183, 0, 0.5); /* Card Shadows */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-card-gold: 0 8px 30px rgba(255, 183, 0, 0.15); /* Inset Shadows */ --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* Gold Glow (from golden-hour-tokens) */ --shadow-glow: 0 0 20px hsla(var(--color-primary-h), 100%, 50%, 0.3); /* ======================================== 5b. GLASSMORPHISM (from golden-hour-tokens) ======================================== */ --glass-blur: blur(12px); --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-dark: hsla(214, 52%, 10%, 0.8); --glass-border: 1px solid rgba(255, 255, 255, 0.4); /* ======================================== 6. BORDERS ======================================== */ /* Border Radius */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* Border Widths */ --border-0: 0; --border-1: 1px; --border-2: 2px; --border-4: 4px; --border-8: 8px; /* ======================================== 7. TRANSITIONS ======================================== */ /* Durations */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; /* Timing Functions */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Common Transitions */ --transition-fast: all 0.15s ease-out; --transition-base: all 0.3s ease-in-out; --transition-slow: all 0.5s ease-in-out; --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; --transition-transform: transform 0.3s ease-out; --transition-shadow: box-shadow 0.3s ease-out; /* ======================================== 8. Z-INDEX SCALE ======================================== */ --z-behind: -1; --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; --z-top: 999; /* ======================================== 9. COMPONENT SPECIFIC ======================================== */ /* Header */ --header-height: 64px; --header-height-mobile: 56px; --header-bg: rgba(255, 255, 255, 0.95); --header-bg-scrolled: rgba(255, 255, 255, 0.98); /* Hero */ --hero-height: 100vh; --hero-min-height: 600px; /* Cards */ --card-padding: 1.5rem; --card-radius: var(--radius-xl); /* Buttons */ --btn-padding-x: 2rem; --btn-padding-y: 0.75rem; --btn-radius: var(--radius-full); /* Inputs */ --input-padding-x: 1.25rem; --input-padding-y: 0.875rem; --input-radius: var(--radius-lg); --input-border: var(--color-border-light); --input-focus-border: var(--color-primary); /* ======================================== 10. BREAKPOINTS (Reference Only) Use @media queries with these values ======================================== */ /* --bp-xs: 0; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; */ /* ======================================== 11. T2W NAMESPACE (Canonical) css-standards.md 준수 — 신규 코드는 --t2w-* 사용. 기존 --color-*/--space-*/--shadow-* 는 하위호환 alias. ======================================== */ /* Colors */ --t2w-color-primary: var(--color-primary); --t2w-color-primary-light: var(--color-primary-light); --t2w-color-primary-dark: var(--color-primary-dark); --t2w-color-primary-text: var(--color-primary-text); --t2w-color-secondary: var(--color-secondary); --t2w-color-secondary-light: var(--color-secondary-light); --t2w-color-secondary-dark: var(--color-secondary-dark); --t2w-color-accent-coral: var(--color-accent-coral); --t2w-color-accent-teal: var(--color-accent-teal); --t2w-color-success: var(--color-success); --t2w-color-warning: var(--color-warning); --t2w-color-error: var(--color-error); --t2w-color-info: var(--color-info); --t2w-color-white: var(--color-white); --t2w-color-black: var(--color-black); --t2w-color-bg-warm: var(--color-bg-warm); --t2w-color-bg-cream: var(--color-bg-cream); --t2w-itinerary-source-bg: var(--color-itinerary-source-bg); --t2w-color-bg-light: var(--color-bg-light); --t2w-color-bg-gray: var(--color-bg-gray); /* Text */ --t2w-text-primary: var(--color-text-primary); --t2w-text-secondary: var(--color-text-secondary); --t2w-text-muted: var(--color-text-muted); --t2w-text-inverse: var(--color-text-inverse); /* S203: 흰 배경 위 '읽는 글자'(별점·가격 등)용 접근성 앰버. 골드(#FFB700)·앰버(#F59E0B)는 흰 배경 대비 미달(WCAG AA 4.5:1 미만). 이 토큰 ≈ 5.9:1 통과. 배경·테두리·아이콘 골드는 유지. */ --t2w-amber-ink: #8a5a00; /* Borders */ --t2w-border-light: var(--color-border-light); --t2w-border-medium: var(--color-border-medium); --t2w-border-dark: var(--color-border-dark); /* Gradients */ --t2w-gradient-gold: var(--gradient-gold); --t2w-gradient-hero-dark: var(--gradient-hero-dark); --t2w-gradient-card-hover: var(--gradient-card-hover); /* Typography */ --t2w-font-primary: var(--font-primary); --t2w-font-heading: var(--font-heading); --t2w-font-accent: var(--font-accent); --t2w-text-xs: var(--text-xs); --t2w-text-sm: var(--text-sm); --t2w-text-base: var(--text-base); --t2w-text-lg: var(--text-lg); --t2w-text-xl: var(--text-xl); --t2w-text-2xl: var(--text-2xl); --t2w-text-3xl: var(--text-3xl); --t2w-text-4xl: var(--text-4xl); --t2w-text-5xl: var(--text-5xl); /* Spacing */ --t2w-space-1: var(--space-1); --t2w-space-2: var(--space-2); --t2w-space-3: var(--space-3); --t2w-space-4: var(--space-4); --t2w-space-5: var(--space-5); --t2w-space-6: var(--space-6); --t2w-space-8: var(--space-8); --t2w-space-10: var(--space-10); --t2w-space-12: var(--space-12); --t2w-space-16: var(--space-16); --t2w-space-20: var(--space-20); --t2w-space-24: var(--space-24); /* Shadows */ --t2w-shadow-sm: var(--shadow-sm); --t2w-shadow-md: var(--shadow-md); --t2w-shadow-lg: var(--shadow-lg); --t2w-shadow-xl: var(--shadow-xl); --t2w-shadow-card: var(--shadow-card); --t2w-shadow-card-hover: var(--shadow-card-hover); --t2w-shadow-gold-sm: var(--shadow-gold-sm); --t2w-shadow-gold-md: var(--shadow-gold-md); --t2w-shadow-gold-lg: var(--shadow-gold-lg); /* Radius */ --t2w-radius-sm: var(--radius-sm); --t2w-radius-md: var(--radius-md); --t2w-radius-lg: var(--radius-lg); --t2w-radius-xl: var(--radius-xl); --t2w-radius-2xl: var(--radius-2xl); --t2w-radius-full: var(--radius-full); /* Transitions */ --t2w-transition-fast: var(--transition-fast); --t2w-transition-base: var(--transition-base); --t2w-transition-colors: var(--transition-colors); /* Z-Index */ --t2w-z-dropdown: var(--z-dropdown); --t2w-z-sticky: var(--z-sticky); --t2w-z-fixed: var(--z-fixed); --t2w-z-modal: var(--z-modal); --t2w-z-toast: var(--z-toast); /* Component */ --t2w-header-height: var(--header-height); --t2w-header-height-mobile: var(--header-height-mobile); --t2w-card-padding: var(--card-padding); --t2w-card-radius: var(--card-radius); --t2w-btn-radius: var(--btn-radius); --t2w-input-radius: var(--input-radius); /* Home redesign S212 — champagne display + hp surface tokens */ --t2w-gg: #C9A24B; --t2w-gg-lite: #E7C878; --t2w-gg-deep: #8C6C2A; --t2w-gg-ink: #060C16; --t2w-gg-paper: #EDE7DC; --t2w-gg-dim: #B7B2A8; --t2w-hp-paper: #FFFFFF; /* 2026-09-24: 바탕은 흰색 하나 — 따뜻함은 크림 띠와 금색 강조로 낸다 */ --t2w-hp-paper-2: #FFF6E6; --t2w-hp-paper-3: #FFEFD6; --t2w-hp-ink: #241E1A; --t2w-hp-ink-soft: #6B6157; --t2w-hp-line: rgba(30, 58, 95, .12); --t2w-hp-line-2: rgba(30, 58, 95, .08); --t2w-hp-coral: #FF7A59; --t2w-hp-mint: #2FB98A; --t2w-hp-violet: #7C5CFF; --t2w-hp-r-lg: 26px; --t2w-hp-r-md: 16px; --t2w-hp-r-sm: 12px; --t2w-hp-r-pill: 999px; /* shadow/easing = proto-j.html :root 실측값 (자리표시 아님) */ --t2w-hp-sh-sm: 0 6px 18px rgba(70, 45, 10, .08); --t2w-hp-sh-md: 0 18px 42px rgba(70, 45, 10, .14); --t2w-hp-sh-lg: 0 34px 70px rgba(60, 38, 10, .22); --t2w-hp-ease: cubic-bezier(.19, 1, .22, 1); --t2w-hp-pop: cubic-bezier(.2, .9, .3, 1.4); --t2w-footer-navy: #0E1A2B; --t2w-font-display: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; } /* Southern Cross brand mark: decorative, not an observed sky chart. One shape for the shared shell, Home, Community and footer. */ :root { --t2w-southern-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8L32 56M12 30L52 26' fill='none' stroke='white' stroke-opacity='.3' stroke-width='1'/%3E%3Cg fill='white'%3E%3Ccircle cx='32' cy='8' r='2.6'/%3E%3Ccircle cx='32' cy='56' r='3.2'/%3E%3Ccircle cx='12' cy='30' r='2.2'/%3E%3Ccircle cx='52' cy='26' r='2.6'/%3E%3Ccircle cx='44' cy='36' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); } /* ───────────────────────────────────────────────────────────── 한 벌의 옷 — 글꼴 (2026-09-28 마스터 결재) 부모 테마(taskhive)가 본문 = Nunito Sans, 제목·버튼 = Quicksand 로 박아 두어 한 화면에서 라틴 글자와 한글이 서로 다른 글꼴로 그려졌다. 부모 테마는 건드리지 않고, 자식 CSS가 합쳐진 번들 안에 들어가도 순서와 무관하게 이기도록 `html` 을 앞에 붙여 덮는다. `!important` 는 쓰지 않는다. 아이콘 글꼴(Material Symbols)은 건드리지 않는다. ───────────────────────────────────────────────────────────── */ html body { font-family: var(--t2w-font-display); } html h1, html h2, html h3, html h4, html h5, html h6, html fieldset legend, html .header-logo__name, html .comment__author, html .hp-review__author, html .editor-post-title__block, html .editor-post-title__input { font-family: var(--t2w-font-display); } html .button, html button, html button[type="submit"], html input[type="submit"], html .wp-block-button__link, html input, html select, html textarea, html .pagination > span, html .pagination > a, html .pagination .nav-links > a, html .pagination .nav-links > span { font-family: var(--t2w-font-display); } /* ───────────────────────────────────────────────────────────── 한 벌의 옷 — 둥근 모서리 (2026-09-28) 실측: 생활 다섯 화면에 모서리가 12가지(12·14·16·8·10·4·9·5·18·20·24px·알약). 같은 줄에 놓인 카드끼리 12px 과 14px 로 달라 '덜 정돈된' 인상을 만들었다. 역할은 셋뿐이다 — 작은 것(썸네일·작은 칩) · 상자(카드·모달) · 알약(단추·입력·태그). 값이 아니라 역할로 부르면 다음에 늘어나지 않는다. ───────────────────────────────────────────────────────────── */ :root { --t2w-r-sm: 8px; /* 썸네일·작은 이미지·작은 칩 */ --t2w-r: 12px; /* 카드·상자·모달 */ --t2w-r-pill: 999px;/* 단추·입력창·태그 */ } /* ─────────────────────────────────────────────────────────── 한 벌의 옷 — 글자색과 선 (2026-09-28) 실측: 생활 다섯 화면에 글자색 33가지 · 선 9가지. 뿌리는 같은 역할을 다섯 벌의 사전이 각자 부른 것이었다 — --comm-* · --dl-* · --g* · --t2w-life-* · life-nav.css 의 생값. 역할은 넷뿐이다. 앞으로는 이 넷을 이름으로 부른다. 진함 = 브랜드 남색(지금 제목이 쓰는 색 그대로) · 흰바탕 대비 13.5:1 보통 7.6:1 · 연함 5.2:1 — 세 단 모두 읽힐 수 있는 가장 연한 선 안에 있다. ─────────────────────────────────────────────────────────── */ :root { --t2w-ink: #152A47; /* 진함 — 제목·현재 위치·강조 */ --t2w-ink-2: #4B5563; /* 보통 — 본문 */ --t2w-ink-3: #6B7280; /* 연함 — 보조·날짜·출처 */ --t2w-line: #E5E7EB; /* 선 — 한 가지만 */ } /* ─────────────────────────────────────────────────────────── 한 벌의 옷 — 글자 단 (2026-09-28) 실측: 생활 화면에 크기·굵기 41가지, 한 화면에 18~25가지. 뿌리는 같은 역할에 두 벌 — 읽는 글이 14px 과 15px, 카드 제목이 16px 에 굵기만 500·600·700·800 넷, 보조 글자가 12·13·14px 셋. 역할은 다섯이다. 굵기는 보통·진함·가장 진함 셋만 쓴다(500·650 없애기). 13px = 폰에서 읽힐 수 있는 가장 작은 크기(반응형 규칙 최소치). ─────────────────────────────────────────────────────────── */ :root { --t2w-fs-title: 22px; /* 화면 제목 */ --t2w-fs-sec: 20px; /* 구역 제목 */ --t2w-fs-card: 16px; /* 카드 제목 */ --t2w-fs-body: 15px; /* 본문·읽는 글·단추·탭 */ --t2w-fs-meta: 13px; /* 보조·날짜·출처·라벨 */ }