/* ===================================================================== HT ENG — 공용 디자인 시스템 (theme.css) 모든 페이지의 에서 가장 먼저 로드되어 토큰을 제공합니다. Pretendard 폰트는 각 HTML 에서 link로 로드합니다. ===================================================================== */ :root { /* ---- 브랜드 그린 스케일 ---- */ --green-50: #ecf8f0; --green-100: #d6f0df; --green-200: #aee0c0; --green-300: #79cd98; --green-400: #44b873; --green-500: #1f9d57; /* primary */ --green-600: #178049; --green-700: #14633a; --green-800: #103f27; /* deep ink-green (dark cards) */ --green-900: #0c2b1b; --brand: var(--green-500); --brand-strong: var(--green-600); --brand-soft: var(--green-50); /* ---- 중립 ---- */ --ink: #14201a; /* 본문 텍스트 */ --ink-2: #3a463f; --muted: #67756c; /* 보조 텍스트 */ --line: #e6e9e4; /* 구분선/테두리 */ --line-2: #eef1ec; --surface: #ffffff; --surface-2: #f4f6f2; --page: #f5f6f3; /* 페이지 배경 (웜 오프화이트) */ --white: #ffffff; /* ---- 라운드 ---- */ --r-xs: 10px; --r-sm: 14px; --r: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; /* ---- 그림자 ---- */ --sh-xs: 0 1px 2px rgba(16, 40, 28, .06); --sh-sm: 0 4px 14px rgba(16, 40, 28, .07); --sh: 0 12px 34px rgba(16, 40, 28, .09); --sh-lg: 0 28px 60px rgba(16, 40, 28, .14); --ring: 0 0 0 4px rgba(31, 157, 87, .16); /* ---- 레이아웃 ---- */ --container: 1200px; --header-h: 76px; /* ---- 타이포 ---- */ --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; } /* ---- 리셋 ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } /* ===================================================================== 재사용 프리미티브 ===================================================================== */ /* 컨테이너 */ .ht-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } /* 섹션 라벨(아이브로) */ .ht-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-strong); } .ht-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--brand); } /* 헤딩 */ .ht-h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; margin: 0; } .ht-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; margin: 0; color: var(--ink); } .ht-lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--muted); line-height: 1.7; } /* 버튼 */ .ht-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font); font-weight: 700; font-size: 1rem; padding: 14px 26px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space: nowrap; } .ht-btn-dark { background: var(--ink); color: #fff; } .ht-btn-dark:hover { transform: translateY(-2px); box-shadow: var(--sh); } .ht-btn-brand { background: var(--brand); color: #fff; } .ht-btn-brand:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--sh); } .ht-btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); } .ht-btn-ghost:hover { border-color: var(--brand); color: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--sh-sm); } .ht-btn-light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); } .ht-btn-light:hover { background: rgba(255,255,255,.26); } /* 칩/뱃지 */ .ht-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); font-size: .85rem; font-weight: 700; } /* 카드 */ .ht-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .ht-card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--line-2); } /* 유틸 */ .ht-section { padding-block: clamp(64px, 9vw, 120px); } .ht-center { text-align: center; } .ht-muted { color: var(--muted); } /* 등장 애니메이션 (스크롤 리빌) */ .ht-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .ht-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ht-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }