/* ==========================================================================
   typography.css — 한글 타이포그래피 (백서 §4)

   40대 여성 가독성 기준:
   - 본문 최소 16px, 권장 17px
   - 행간 1.6 이상 (한글 특성)
   - 자간 0 (헤드라인만 -0.02em)
   - Pretendard Variable 사용
   ========================================================================== */

/* ===== 본문 기본 ===== */
body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-relaxed);
	color: var(--text-primary);
	background-color: var(--bg-secondary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ===== 헤딩 ===== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	letter-spacing: -0.02em;
	margin-top: 0;
}

h1, .h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	margin-bottom: var(--space-5);
}

h2, .h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-4);
}

h3, .h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-3);
}

h4, .h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-normal);
	margin-bottom: var(--space-2);
	letter-spacing: 0;
}

/* ===== 본문 단락 ===== */
p {
	margin-top: 0;
	margin-bottom: var(--space-4);
	line-height: var(--lh-relaxed);
}

p.lead {
	font-size: var(--fs-h4);
	color: var(--text-secondary);
}

p.small {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-normal);
}

p.caption {
	font-size: var(--fs-caption);
	color: var(--text-tertiary);
	line-height: var(--lh-normal);
}

/* ===== 인라인 텍스트 요소 ===== */
strong, b {
	font-weight: var(--fw-medium);
	color: var(--text-primary);
}

em, i {
	font-style: italic;
}

small {
	font-size: var(--fs-caption);
	color: var(--text-tertiary);
}

/* ===== 영문 라벨 (히어로 위 작은 영문) ===== */
.eyebrow,
.label-en {
	font-size: var(--fs-caption);
	font-weight: var(--fw-medium);
	letter-spacing: 0.2em;
	color: var(--ink-blue);
	text-transform: uppercase;
	margin-bottom: var(--space-3);
	display: block;
}

/* ===== 링크 ===== */
a {
	color: var(--ink-blue);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--ink-blue-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:focus-visible {
	outline: 2px solid var(--cheecle-yellow);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ===== 숫자 표시 ===== */
.numeric,
.price {
	font-family: var(--font-numeric);
	font-weight: var(--fw-semibold);
	font-feature-settings: "tnum" 1;
}

/* ===== 어두운 배경 위 텍스트 ===== */
.bg-dark,
.bg-dark p,
.has-dark-bg {
	color: var(--text-inverse);
}

.bg-dark .eyebrow,
.bg-dark .label-en {
	color: var(--cheecle-yellow);
}

.bg-dark a {
	color: var(--cheecle-yellow);
}

.bg-dark a:hover {
	color: var(--yellow-hover);
}