/* ==========================================================================
휴먼아크 디자인 토큰 (Design Tokens)
--------------------------------------------------------------------------
모든 페이지가 공유하는 디자인 변수의 단 하나의 출처(Single Source of Truth).
색상·폰트·간격을 바꾸고 싶다면 이 파일만 수정하면 전체 사이트에 반영됩니다.
시안 B: Navy + Gold + Cream — 신뢰·사명 통합 + 따뜻한 휴머니즘
========================================================================== */
:root {
/* --------------------------------------------------------------------
1. 색상 팔레트 (Colors)
-------------------------------------------------------------------- */
/* 메인 3색 — 시안 B 확정 */
--color-navy: #0B1F3A; /* Deep Navy: 메인 / 헤더 / 본문 강조 */
--color-gold: #C9A84C; /* Gold: 포인트 / 가교 / CTA */
--color-cream: #F8F5EE; /* Cream: 배경 / 따뜻한 영역 */
/* Navy 계열 변주 — 깊이감 표현용 */
--color-navy-deep: #061229; /* 더 진한 네이비: 푸터·강조 영역 */
--color-navy-soft: #1B3358; /* 부드러운 네이비: hover 상태 */
--color-navy-mist: #2E4670; /* 옅은 네이비: 보조 텍스트 */
/* Gold 계열 변주 */
--color-gold-deep: #A8862F; /* 진한 골드: hover·active */
--color-gold-soft: #E0C77A; /* 옅은 골드: 배경 강조 */
--color-gold-mist: rgba(201, 168, 76, 0.12); /* 매우 옅은 골드: 호버 배경 */
/* Cream 계열 변주 */
--color-cream-deep: #EFE9D8; /* 진한 크림: 카드 배경 */
--color-cream-soft: #FBF9F2; /* 옅은 크림: 가장 부드러운 배경 */
/* 텍스트 색상 */
--color-text: #0B1F3A; /* 본문 — 네이비 */
--color-text-soft: #2E4670; /* 보조 텍스트 */
--color-text-mute: #6B7C95; /* 캡션·메타 정보 */
--color-text-on-navy: #F8F5EE; /* 네이비 배경 위 텍스트 — 크림 */
--color-text-on-gold: #0B1F3A; /* 골드 배경 위 텍스트 — 네이비 */
/* 시스템 색상 (최소한만) */
--color-line: rgba(11, 31, 58, 0.10); /* 구분선 */
--color-line-soft: rgba(11, 31, 58, 0.06); /* 옅은 구분선 */
--color-line-on-navy: rgba(248, 245, 238, 0.15); /* 네이비 위 구분선 */
--color-shadow: rgba(11, 31, 58, 0.08); /* 기본 그림자 */
--color-shadow-deep: rgba(11, 31, 58, 0.16); /* 강조 그림자 */
/* --------------------------------------------------------------------
2. 타이포그래피 (Typography)
-------------------------------------------------------------------- */
/* 폰트 패밀리 */
--font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--font-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
--font-display: 'Cormorant Garamond', 'Noto Serif KR', serif;
/* 폰트 크기 (반응형 — clamp로 화면 크기에 따라 자동 조정) */
--fs-xs: 0.75rem; /* 12px — 캡션 */
--fs-sm: 0.875rem; /* 14px — 작은 본문 */
--fs-base: 1rem; /* 16px — 기본 본문 */
--fs-md: 1.125rem; /* 18px — 강조 본문 */
--fs-lg: 1.25rem; /* 20px — 부제목 */
--fs-xl: clamp(1.5rem, 2.5vw, 1.875rem); /* 24~30px */
--fs-2xl: clamp(1.875rem, 3.5vw, 2.5rem); /* 30~40px */
--fs-3xl: clamp(2.25rem, 5vw, 3.5rem); /* 36~56px */
--fs-hero: clamp(2.5rem, 6vw, 4.5rem); /* 40~72px — Hero 타이틀 */
/* 행간 (line-height) */
--lh-tight: 1.2; /* 헤드라인 */
--lh-snug: 1.4; /* 부제목 */
--lh-normal: 1.6; /* 본문 */
--lh-relaxed: 1.8; /* 긴 본문 */
/* 자간 (letter-spacing) */
--ls-tight: -0.02em; /* 큰 헤드라인 */
--ls-normal: 0; /* 본문 */
--ls-wide: 0.05em; /* 영문 표제 */
--ls-wider: 0.15em; /* 대문자 캡션 */
/* 폰트 굵기 */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* --------------------------------------------------------------------
3. 간격 (Spacing) — 8px 기본 그리드
-------------------------------------------------------------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px — 섹션 간 큰 여백 */
/* --------------------------------------------------------------------
4. 레이아웃 (Layout)
-------------------------------------------------------------------- */
--container-sm: 640px;
--container-md: 960px;
--container-lg: 1200px; /* 메인 컨테이너 너비 */
--container-xl: 1440px;
--header-height: 72px;
--section-pad-y: clamp(4rem, 10vw, 8rem); /* 섹션 위아래 여백 */
/* --------------------------------------------------------------------
5. 모서리 (Border Radius)
-------------------------------------------------------------------- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px; /* 완전 둥근 — 버튼·점 */
/* --------------------------------------------------------------------
6. 그림자 (Shadow)
-------------------------------------------------------------------- */
--shadow-sm: 0 1px 2px var(--color-shadow);
--shadow-md: 0 4px 12px var(--color-shadow);
--shadow-lg: 0 8px 24px var(--color-shadow-deep);
--shadow-xl: 0 16px 40px var(--color-shadow-deep);
--shadow-gold: 0 4px 16px rgba(201, 168, 76, 0.25); /* 골드 글로우 */
/* --------------------------------------------------------------------
7. 애니메이션 (Animation)
-------------------------------------------------------------------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 600ms;
--duration-slower: 1200ms; /* 가교 모티프 흐름 애니메이션 */
/* --------------------------------------------------------------------
8. Z-index 계층
-------------------------------------------------------------------- */
--z-base: 1;
--z-content: 10;
--z-sticky: 100; /* 헤더 */
--z-overlay: 500; /* 모달 오버레이 */
--z-modal: 1000; /* 모달·팝업 */
--z-toast: 2000; /* 알림 */
}
/* ==========================================================================
웹폰트 import — Pretendard + Noto Serif KR + Cormorant Garamond
--------------------------------------------------------------------------
CDN을 사용해 빠르게 로드. Firebase Hosting과도 잘 작동합니다.
========================================================================== */
/* Pretendard (한글 본문) */
/* Noto Serif KR (한글 슬로건·인용) */
/* Cormorant Garamond (영문 표제) */
/* ==========================================================================
웹폰트는 index.html의 태그로 로드됩니다.
--------------------------------------------------------------------------
이전 @import 방식은 폰트 로딩이 늦어 한글이 시스템 폰트로 잠시 보이는
FOUT 현상이 있었습니다. 로 head에서 직접 로드하는 편이 안정적.
========================================================================== */