/* ============================================================================ * taein-ds.css — Taein × World Taekwondo Design System (single source of truth) * ---------------------------------------------------------------------------- * 목적: 사이트 전반의 "폰트 중구난방 / 토큰 분산" 문제를 단일 파일로 규격화. * - 디자인 토큰(컬러·여백·라운드·그림자·타입스케일)을 한 곳에서 정의 * - 언어별(ko/latin/ja/zh/ar) 폰트 스택을 html[lang] 기준으로 자동 전환 * - Porto/Bootstrap 테마 위에 마지막으로 로드되어 타이포만 일관 적용 * - 모바일 우선 반응형(유동 타입 스케일·터치 타깃) * * 로드 순서: main_template.php 의 가장 마지막. (테마보다 뒤) * 색상 출처: config/brand.php 의 palette 와 동일 값 유지. * ========================================================================== */ :root { /* ---- Brand palette (config/brand.php 와 동기화) ---- */ --ti-primary: #0B5FFF; /* taegeuk blue */ --ti-primary-700: #063DA8; /* primary dark */ --ti-blue: #0B5FFF; /* alias */ --ti-navy: #0B1A3A; /* header/footer */ --ti-red: #E4322B; /* taegeuk red */ --ti-gold: #C9A227; /* gold tip */ --ti-belt-black: #111111; --ti-ink: #1f2a44; /* primary text */ --ti-ink-2: #1A1A1A; --ti-muted: #6b7585; /* secondary text */ --ti-line: #e7ebf2; /* hairline */ --ti-paper: #f7f8fb; /* page surface */ --ti-surface: #ffffff; /* ---- Radius / shadow / layout ---- */ --ti-radius-sm: 8px; --ti-radius: 12px; --ti-radius-lg: 16px; --ti-radius-pill: 999px; --ti-shadow-1: 0 4px 14px rgba(11,26,58,.06); --ti-shadow-2: 0 12px 26px rgba(11,95,255,.12); --ti-shadow-3: 0 16px 40px rgba(10,20,48,.16); --ti-container: 1200px; /* ---- Type families (per-language overrides below) ---- */ --ti-font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --ti-font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ti-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --ti-font-sc: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --ti-font-ar: "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; /* 기본(한국어). html[lang] 으로 덮어씀. */ --ti-font-sans: var(--ti-font-ko); /* ---- Fluid type scale (mobile-first, clamp) ---- */ --ti-text-xs: clamp(.72rem, .69rem + .12vw, .78rem); --ti-text-sm: clamp(.82rem, .79rem + .14vw, .88rem); --ti-text-base: clamp(.92rem, .89rem + .16vw, 1rem); --ti-text-lg: clamp(1.05rem, 1rem + .25vw, 1.18rem); --ti-h4: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); --ti-h3: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); --ti-h2: clamp(1.6rem, 1.25rem + 1.7vw, 2.3rem); --ti-h1: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); --ti-leading-tight: 1.2; --ti-leading: 1.65; } /* ============================================================================ * 언어별 폰트 — html[lang] 속성으로 자동 전환 (I18n::locale() → ) * 시스템 폴백을 항상 포함하므로 웹폰트 로드 실패에도 일관 유지. * ========================================================================== */ html[lang="en"], html[lang="es"], html[lang="fr"], html[lang="pt"], html[lang="de"], html[lang="ru"] { --ti-font-sans: var(--ti-font-latin); } html[lang="ja"] { --ti-font-sans: var(--ti-font-ja); } html[lang="zh-CN"], html[lang="zh"] { --ti-font-sans: var(--ti-font-sc); } html[lang="ar"] { --ti-font-sans: var(--ti-font-ar); } /* ============================================================================ * 전역 타이포 규격화 — 테마가 element 별로 제각각 지정한 폰트를 단일 변수로 통일. * (테마보다 뒤에 로드되므로 일반 캐스케이드로 우선. 폼 요소는 inherit 안 되므로 명시.) * 아이콘 폰트(Font Awesome/Simple Line Icons 등)는 영향받지 않도록 제외. * ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, .ti-front, #main, .main, .main.shop, h1, h2, h3, h4, h5, h6, p, a, span, li, label, td, th, dt, dd, figcaption, blockquote, button, input, select, textarea, .btn, .form-control { font-family: var(--ti-font-sans); } body { font-size: var(--ti-text-base); line-height: var(--ti-leading); color: var(--ti-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; } /* NOTE: 아이콘 글꼴(.fa*, .ph* 등)은 위 전역 셀렉터에 포함하지 않으므로 손대지 않는다. (과거 font-family:revert 강제는 FA 폰트를 덮어써 아이콘을 깨뜨렸으므로 제거함.) */ /* ---- 제목 위계: 일관된 굵기/자간/행간 ---- */ h1, .h1, h2, .h2, h3, .h3, h4, .h4 { color: var(--ti-ink); line-height: var(--ti-leading-tight); letter-spacing: -.012em; font-weight: 800; /* 한글: 단어(어절) 중간에서 끊기지 않도록 — "스/토어" 깨짐 방지. 공백 단위로만 줄바꿈하고, 줄 길이를 균형 있게(balance) 배치해 가독성 향상. */ word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } /* 본문·리드 문단도 단어 단위 줄바꿈 + pretty(고아줄 방지) */ p, .ti-hero__sub, .tds-section-sub, blockquote { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; } h1, .h1 { font-size: var(--ti-h1); letter-spacing: -.02em; } h2, .h2 { font-size: var(--ti-h2); } h3, .h3 { font-size: var(--ti-h3); } h4, .h4 { font-size: var(--ti-h4); font-weight: 700; } /* CJK 는 음수 자간이 답답해 보이므로 0 으로 (가독성) */ html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; } /* ---- 본문 링크 기본 ---- */ a { color: inherit; } a:hover { color: var(--ti-primary); } /* ============================================================================ * 공용 유틸 (디자인 시스템 네임스페이스 .tds-*) * 새 컴포넌트는 토큰을 직접 참조 → 인라인 hex 재등장 방지. * ========================================================================== */ .tds-container { max-width: var(--ti-container); margin-inline: auto; padding-inline: 16px; } .tds-eyebrow { font-size: var(--ti-text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ti-primary); } .tds-section-title { font-size: var(--ti-h3); font-weight: 800; color: var(--ti-ink); letter-spacing: -.012em; } .tds-section-sub { color: var(--ti-muted); font-size: var(--ti-text-base); } .tds-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-weight: 700; font-size: var(--ti-text-sm); padding: .7em 1.4em; border-radius: var(--ti-radius-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .18s, color .18s, border-color .18s, transform .18s; } .tds-btn:active { transform: translateY(1px); } .tds-btn--primary { background: var(--ti-primary); color: #fff; } .tds-btn--primary:hover { background: var(--ti-primary-700); color: #fff; } .tds-btn--ghost { background: transparent; color: var(--ti-ink); border-color: var(--ti-line); } .tds-btn--ghost:hover { border-color: var(--ti-primary); color: var(--ti-primary); } .tds-btn--light { background: #fff; color: var(--ti-primary); } .tds-link-more { color: var(--ti-primary); font-weight: 600; text-decoration: none; white-space: nowrap; } .tds-link-more:hover { color: var(--ti-primary-700); } /* ---- Brand color helpers ---- */ .tds-bg-primary { background: var(--ti-primary) !important; } .tds-bg-navy { background: var(--ti-navy) !important; } .tds-text-primary { color: var(--ti-primary) !important; } .tds-text-gold { color: var(--ti-gold) !important; } /* ============================================================================ * RTL (아랍어) — 정렬/방향 보정. dir 은 main_template.php 에서 html[dir] 로 설정. * ========================================================================== */ html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .tds-eyebrow { letter-spacing: 0; } /* ============================================================================ * 모바일 최적화 — 터치 타깃·유동 여백·가독성. * ========================================================================== */ @media (max-width: 991.98px) { body { line-height: 1.6; } } @media (max-width: 575.98px) { .tds-container { padding-inline: 14px; } /* 모든 인터랙티브 요소 최소 44px 터치 타깃(접근성) */ .tds-btn { padding: .8em 1.3em; } a.tds-btn, button.tds-btn { min-height: 44px; } } /* 사용자 모션 최소화 선호 존중 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }