/* ==========================================================================
   MODULE: base/typography
   전역 폰트 적용 + 매거진 본문 래퍼(.wzs, .wzs-article) + 인라인 강조(.wzs-hl)
   ========================================================================== */

body {
	font-family: var(--wzs-font-base);
	font-size: var(--wzs-fs-base);
	line-height: var(--wzs-lh-base);
	-webkit-font-smoothing: antialiased;

	/* 한글은 기본값(break-word 계열)으로 두면 어절 중간에서 줄이 끊긴다
	   (예: "수출입 실무" → "…대신 받고, 수 / 출입 실무를"). keep-all 로 어절 단위 줄바꿈 강제.
	   단, 긴 영문/URL 한 덩어리가 컨테이너를 넘칠 때만 overflow-wrap 으로 예외 허용. */
	word-break: keep-all;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: var(--wzs-lh-tight);
	letter-spacing: -0.01em;
}

/* 제목 크기는 화면 폭을 따라간다.
   예전에는 h1 이 3rem(48px) 고정이라, 375px 폰에서 글 제목이 화면 밖으로 삐져나갔다.
   한글은 word-break: keep-all 이라 단어 중간에서 안 끊기는데, "(매입세액공제)" 같은
   한 덩어리가 48px 이면 폭이 336px 로 본문 칸(327px)을 넘겨 잘려 보였다.

   clamp 의 가운데 값(vw)은 폰에서 최소값에 걸리고 데스크톱에서 최대값에 걸리도록 잡았다 —
   375px 에서 h1 은 28px, 800px 이상에서 48px. 최소값을 더 내리면 제목이 본문과
   구분되지 않으므로 이 아래로는 내리지 말 것. */
h1 { font-size: clamp(1.75rem, 6vw, var(--wzs-fs-4xl)); }
h2 { font-size: clamp(1.5rem, 4.6vw, var(--wzs-fs-3xl)); }
h3 { font-size: clamp(1.25rem, 3.4vw, var(--wzs-fs-2xl)); }
h4 { font-size: clamp(1.125rem, 2.6vw, var(--wzs-fs-xl)); }

/* 디스플레이 서체(Space Grotesk)는 한글 글리프가 없어, 한글이 섞이면 한 단어 안에서
   숫자/영문만 Space Grotesk로 빠지고 한글은 Pretendard로 폴백되어 서체가 쪼개진다.
   (예: "5만원부터" → 5 는 SG, 만원부터 는 Pretendard)
   따라서 .wzs-display 는 순수 영문 텍스트(워드마크 등)에만 사용할 것.
   한글이 한 글자라도 섞이면 절대 쓰지 말 것. */
.wzs-display {
	font-family: var(--wzs-font-display);
}

/* 숫자 정렬용 (요금표/보고서 수치). 한글이 붙는 금액에도 서체 혼용 없이 쓸 수 있도록
   본문 서체를 유지한 채 자릿수만 고정폭으로 맞춘다. */
.wzs-nums {
	font-variant-numeric: tabular-nums;
}

/* --- 매거진 본문 래퍼: .wzs 는 공통 베이스, .wzs-article 은 단일글 본문 컨테이너 --- */
.wzs {
	color: var(--wzs-ink);
}

.wzs-article {
	max-width: var(--wzs-container-article);
	margin: 0 auto;
	font-size: 16px;
}

/* p/ul/ol/blockquote/table 등 본문 요소는 각자 margin-bottom을 갖고 있어(아래 규칙들),
   여기서 또 margin-top을 더하면 두 배로 벌어진다 — 그래서 자식 전체에 거는 규칙은 안 두고
   figure/img처럼 자기 여백이 없는 요소에만 아래에서 개별로 준다. */
.wzs-article figure,
.wzs-article > img {
	margin: var(--wzs-space-4) 0;
}

/* h2마다 구분선을 넣어 섹션을 눈에 띄게 나눈다 — 글이 길어질수록 효과가 커짐 */
.wzs-article h2 {
	margin: 44px 0 18px;
	padding-top: 36px;
	border-top: 1px solid var(--wzs-border);
}

.wzs-article h3 {
	margin-top: var(--wzs-space-6);
	margin-bottom: var(--wzs-space-2);
}

.wzs-article p {
	margin-bottom: 22px;
	font-size: 16px;
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-article a {
	color: var(--wzs-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wzs-article h4,
.wzs-article h5,
.wzs-article h6 {
	margin-top: var(--wzs-space-5);
	margin-bottom: var(--wzs-space-2);
}

.wzs-article ul,
.wzs-article ol {
	margin-bottom: 22px;
	padding-left: var(--wzs-space-5);
}

/* 리스트 마커 이중 표시 방지 — 브라우저 기본 마커(::marker)를 명시적으로 비우고
   ::before로 단일 도트만 그린다. list-style:disc만 믿으면 일부 환경에서
   커스텀 마커와 기본 마커가 겹쳐 보이는 문제가 있었다. */
.wzs-article ul {
	list-style: none;
}

.wzs-article ul li {
	position: relative;
	padding-left: var(--wzs-space-3);
}

.wzs-article ul li::marker {
	content: '';
}

.wzs-article ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wzs-amber);
}

.wzs-article ol {
	list-style: decimal;
}

.wzs-article li {
	font-size: 16px;
	line-height: 1.8;
	color: var(--wzs-ink-soft);
}

.wzs-article li + li {
	margin-top: var(--wzs-space-1);
}

.wzs-article blockquote {
	margin: 28px 0;
	padding: var(--wzs-space-3) var(--wzs-space-4);
	background: var(--wzs-bg-alt);
	border-left: 4px solid var(--wzs-ink);
	border-radius: 0 var(--wzs-radius-sm) var(--wzs-radius-sm) 0;
	color: var(--wzs-ink-soft);
}

.wzs-article blockquote p {
	margin: 0;
	color: inherit;
}

.wzs-article blockquote strong {
	color: var(--wzs-ink);
}

.wzs-article img {
	border-radius: var(--wzs-radius-md);
}

.wzs-article figcaption {
	margin-top: var(--wzs-space-2);
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
	text-align: center;
}

/* 표를 .wzs-scroll로 감싼 경우(가로로 넓은 표) 여백은 감싼 바깥쪽에 줘야 실제로 앞뒤
   문단과 떨어져 보인다 — margin을 안쪽 table에 주면 스크롤 박스 안에서만 여백이 생기고
   바깥에서 보기엔 그대로 붙어 있다. */
.wzs-article .wzs-scroll {
	margin: var(--wzs-space-4) 0;
}

/* 본문에 표를 그냥 <table>로 쓴 경우의 기본기 — 가로로 넓으면 components/table.css의
   .wzs-scroll(+.wzs-table)로 직접 감싸는 걸 권장하지만, 안 감쌌을 때의 최소 폴백. */
.wzs-article table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--wzs-space-4) 0;
	font-size: var(--wzs-fs-sm);
}

.wzs-article .wzs-scroll table {
	margin: 0;
}

.wzs-article th,
.wzs-article td {
	padding: var(--wzs-space-3);
	text-align: left;
	border-bottom: 1px solid var(--wzs-border);
}

.wzs-article thead th {
	background: var(--wzs-ink);
	color: var(--wzs-white);
	font-weight: 600;
}

.wzs-article tbody tr:nth-child(even) td {
	background: var(--wzs-bg);
}

/* --- 앰버 강조: 문장 중 핵심 수치/키워드에 절제된 포인트 --- */
.wzs-hl {
	color: var(--wzs-amber-ink);
	background: linear-gradient(to bottom, transparent 60%, var(--wzs-amber-soft) 60%);
	padding: 0 0.1em;
	font-weight: 600;
}