/* 뉴스레터 디자인 토큰 (CSS Custom Properties) */

/* 패턴 A: 매거진형 네이비 */
.nl-pattern-a {
	--nl-primary: #1a2744;
	--nl-primary-light: #e8ecf2;
	--nl-accent: #4a6cf7;
}

/* 패턴 B: 카드형 모노톤 */
.nl-pattern-b {
	--nl-primary: #333333;
	--nl-primary-light: #f5f5f5;
	--nl-accent: #666666;
}

/* 패턴 C: 타임라인형 그린 */
.nl-pattern-c {
	--nl-primary: #137333;
	--nl-primary-light: #e6f4ea;
	--nl-accent: #34a853;
}

/* 패턴 D: 인포그래픽형 오렌지 */
.nl-pattern-d {
	--nl-primary: #e65100;
	--nl-primary-light: #fff3e0;
	--nl-accent: #ff9800;
}

/* 공통 토큰 */
.nl-pattern-a,
.nl-pattern-b,
.nl-pattern-c,
.nl-pattern-d {
	--nl-text: #1a1a2e;
	--nl-text-muted: #666666;
	--nl-bg: #ffffff;
	--nl-border: #eeeeee;
	--nl-radius: 6px;
	--nl-section-gap: 40px;
	--nl-font-base: 15px;
	--nl-font-heading: 20px;
	--nl-font-small: 12px;
}

/* ── 블록 공통 스타일 ── */
.nl-block {
	margin-bottom: var(--nl-section-gap);
}
.nl-block-title {
	font-size: var(--nl-font-heading);
	font-weight: 700;
	color: var(--nl-primary);
	margin-bottom: 16px;
	padding-left: 12px;
	border-left: 3px solid var(--nl-accent);
	line-height: 1.4;
}
.nl-block-body {
	font-size: var(--nl-font-base);
	line-height: 1.8;
	color: var(--nl-text);
}
.nl-block-body p {
	margin-bottom: 12px;
}
.nl-block-body ul,
.nl-block-body ol {
	padding-left: 20px;
	margin-bottom: 12px;
}
.nl-block-body li {
	margin-bottom: 6px;
}
.nl-block-body table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
	font-size: 13px;
}
.nl-block-body th,
.nl-block-body td {
	border: 1px solid var(--nl-border);
	padding: 8px 12px;
	text-align: left;
}
.nl-block-body th {
	background: var(--nl-primary-light);
	font-weight: 600;
}

/* ── 파트너 섹션 (블록 렌더링 시) ── */
.nl-partners-section {
	margin-top: var(--nl-section-gap);
	padding-top: 24px;
	border-top: 1px solid var(--nl-border);
}

/* ═══════════════════════════════════════════
   스타일 팩 토큰 (Style Pack System)
   패턴(구조)과 독립적으로 비주얼 무드를 제어
   ═══════════════════════════════════════════ */

/* 스타일 팩: Clean — 깔끔한 공백 중심 */
.sp-clean {
	--sp-hero-bg: #f8fafc;
	--sp-hero-text: #1e293b;
	--sp-hero-accent: #3b82f6;
	--sp-accent: #3b82f6;
	--sp-accent-light: #eff6ff;
	--sp-body-bg: #ffffff;
	--sp-section-border: #e2e8f0;
	--sp-muted: #94a3b8;
	--sp-hero-size: 32px;
	--sp-heading-size: 20px;
	--sp-body-size: 15px;
	--sp-heading-weight: 700;
	--sp-line-height: 1.85;
	--sp-letter-spacing: 0;
	--sp-section-gap: 48px;
	--sp-block-padding: 0;
	--sp-hero-padding: 56px 32px 48px;
	--sp-title-border: 3px solid #3b82f6;
	--sp-block-bg: transparent;
	--sp-block-radius: 0;
	--sp-block-shadow: none;
}

/* 스타일 팩: Bold — 강한 대비, 시선 집중 */
.sp-bold {
	--sp-hero-bg: #0f172a;
	--sp-hero-text: #ffffff;
	--sp-hero-accent: #f59e0b;
	--sp-accent: #f59e0b;
	--sp-accent-light: #fef3c7;
	--sp-body-bg: #ffffff;
	--sp-section-border: #1e293b;
	--sp-muted: #64748b;
	--sp-hero-size: 36px;
	--sp-heading-size: 22px;
	--sp-body-size: 16px;
	--sp-heading-weight: 900;
	--sp-line-height: 1.75;
	--sp-letter-spacing: -0.02em;
	--sp-section-gap: 40px;
	--sp-block-padding: 0;
	--sp-hero-padding: 64px 32px 52px;
	--sp-title-border: 4px solid #f59e0b;
	--sp-block-bg: transparent;
	--sp-block-radius: 0;
	--sp-block-shadow: none;
}

/* 스타일 팩: Clinical — 과학적, 데이터 친화 */
.sp-clinical {
	--sp-hero-bg: #f1f5f9;
	--sp-hero-text: #334155;
	--sp-hero-accent: #0ea5e9;
	--sp-accent: #0ea5e9;
	--sp-accent-light: #e0f2fe;
	--sp-body-bg: #ffffff;
	--sp-section-border: #cbd5e1;
	--sp-muted: #64748b;
	--sp-hero-size: 28px;
	--sp-heading-size: 18px;
	--sp-body-size: 14px;
	--sp-heading-weight: 600;
	--sp-line-height: 1.7;
	--sp-letter-spacing: 0.01em;
	--sp-section-gap: 36px;
	--sp-block-padding: 24px;
	--sp-hero-padding: 40px 32px 36px;
	--sp-title-border: 2px solid #0ea5e9;
	--sp-block-bg: #f8fafc;
	--sp-block-radius: 8px;
	--sp-block-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* 스타일 팩: Catalog — 제품 밀도, 카탈로그 */
.sp-catalog {
	--sp-hero-bg: #1e1b4b;
	--sp-hero-text: #ffffff;
	--sp-hero-accent: #a78bfa;
	--sp-accent: #7c3aed;
	--sp-accent-light: #ede9fe;
	--sp-body-bg: #ffffff;
	--sp-section-border: #e5e7eb;
	--sp-muted: #6b7280;
	--sp-hero-size: 30px;
	--sp-heading-size: 19px;
	--sp-body-size: 15px;
	--sp-heading-weight: 700;
	--sp-line-height: 1.75;
	--sp-letter-spacing: 0;
	--sp-section-gap: 32px;
	--sp-block-padding: 20px;
	--sp-hero-padding: 48px 32px 40px;
	--sp-title-border: 3px solid #7c3aed;
	--sp-block-bg: #fafafa;
	--sp-block-radius: 6px;
	--sp-block-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
