/*
Theme Name: 지원금 블로그 (Jiwon)
Template: generatepress
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 7.4
Description: GeneratePress 자식 테마. 40~60대 모바일 독자를 위한 지원금·복지 정보 블로그. 글 부품 10종(요약·목차·주의·사례·팁·체크리스트·FAQ·CTA·표·하단 고정 영역)을 담았다.
Author: mrpapa
Text Domain: jiwon
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ── 색·치수 ─────────────────────────────────────────
   색은 남색 1 + 주황 1 두 가지만. 나머지는 그 둘의 연한 톤과 회색.
   주황은 흰 글자를 올려도 읽히도록 진하게(#c2410c, 대비 5:1 이상). */
:root {
	--jw-navy: #1e3a5f;
	--jw-navy-soft: #eef3f9;
	--jw-orange: #c2410c;
	--jw-orange-soft: #fff4ec;
	--jw-gray-soft: #f4f5f7;
	--jw-blue-soft: #eef6fd;
	--jw-blue: #3b82c4;
	--jw-text: #2b2f36;
	--jw-muted: #5f6672;
	--jw-line: #dfe3e8;
	--jw-radius: 8px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 글자 ──────────────────────────────────────────
   웹폰트를 내려받지 않는다(로딩 3초 목표). 기기에 깔린 한글 폰트를 쓴다.
   keep-all: 한국어 단어가 줄 끝에서 중간에 잘리지 않게. */
body,
button,
input,
select,
textarea {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
body {
	font-size: 17px;
	line-height: 1.8;
	color: var(--jw-text);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
@media (min-width: 769px) { body { font-size: 18px; } }

h1, h2, h3, h4 { color: var(--jw-navy); line-height: 1.4; font-weight: 800; }
.entry-title { font-size: 1.65em; }
.entry-content h2 {
	font-size: 1.4em;
	margin: 2.2em 0 .8em;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--jw-navy);
	scroll-margin-top: 80px; /* 목차에서 눌렀을 때 상단 고정 메뉴에 가리지 않게 */
}
.entry-content h3 { font-size: 1.2em; margin: 1.8em 0 .6em; scroll-margin-top: 80px; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* 본문 폭: 한 줄이 너무 길면 읽기 힘들다 */
@media (min-width: 769px) {
	.single .inside-article,
	.page .inside-article { max-width: 780px; margin-left: auto; margin-right: auto; }
}

/* ── 헤더·메뉴 ─────────────────────────────────────
   색은 functions.php 에서 GeneratePress 기본값으로 넣는다(사용자 정의에서 바꿀 수 있게).
   여기서는 메뉴 줄을 화면 위에 붙이는 것만. */
.site-title { font-weight: 800; }
.main-navigation { position: sticky; top: 0; z-index: 50; }
@media (min-width: 783px) { .admin-bar .main-navigation { top: 32px; } }
.main-navigation .main-nav ul li a { padding-left: 14px; padding-right: 14px; }

/* ── 1. 핵심 요약 / 3. 주의 / 4. 사례 / 5. 팁 박스 ────
   편집기에서 '그룹' 블록 → 오른쪽 '스타일'에서 고른다. */
.is-style-jw-summary,
.is-style-jw-warning,
.is-style-jw-example,
.is-style-jw-tip {
	border-radius: var(--jw-radius);
	padding: 1.1em 1.3em;
	margin: 1.6em 0;
}
.is-style-jw-summary { background: var(--jw-navy-soft); border-left: 6px solid var(--jw-navy); }
.is-style-jw-warning { background: var(--jw-orange-soft); border-left: 6px solid var(--jw-orange); }
.is-style-jw-example { background: var(--jw-gray-soft); border-left: 6px solid #9aa3ae; }
.is-style-jw-tip     { background: var(--jw-blue-soft); border-left: 6px solid var(--jw-blue); }
.is-style-jw-summary > :last-child,
.is-style-jw-warning > :last-child,
.is-style-jw-example > :last-child,
.is-style-jw-tip > :last-child { margin-bottom: 0; }
.jw-box-title { font-weight: 800; margin: 0 0 .4em; }
.is-style-jw-summary .jw-box-title { color: var(--jw-navy); }
.is-style-jw-warning .jw-box-title { color: var(--jw-orange); }
.is-style-jw-tip .jw-box-title     { color: var(--jw-blue); }
.is-style-jw-summary ul,
.is-style-jw-warning ul,
.is-style-jw-example ul,
.is-style-jw-tip ul { margin: 0 0 0 1.2em; }

/* ── 2. 목차 (functions.php 가 H2 3개 이상인 글에 자동으로 넣는다) ── */
.jw-toc {
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-radius);
	padding: 1em 1.3em;
	margin: 1.6em 0;
}
.jw-toc-title { font-weight: 800; color: var(--jw-navy); margin: 0 0 .4em; }
.jw-toc ol { margin: 0 0 0 1.3em; }
.jw-toc li { margin: .25em 0; }
.jw-toc a { text-decoration: none; }
.jw-toc a:hover { text-decoration: underline; }

/* ── 6. 체크리스트 — '목록' 블록 → 스타일 '체크리스트' ── */
.entry-content .is-style-jw-checklist {
	list-style: none;
	margin: 1.6em 0;
	padding: 1em 1.3em;
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-radius);
}
.is-style-jw-checklist li { position: relative; padding-left: 1.9em; margin: .45em 0; }
.is-style-jw-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid var(--jw-navy);
	border-radius: 3px;
}

/* ── 7. FAQ — '세부 정보(details)' 블록. 브라우저 기본 기능이라 스크립트가 없다 ── */
.entry-content .wp-block-details {
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-radius);
	margin: .6em 0;
	padding: 0;
}
.entry-content .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	padding: .9em 2.6em .9em 1.2em;
	list-style: none;
	position: relative;
}
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::before { content: "Q. "; color: var(--jw-orange); }
.entry-content .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3em;
	color: var(--jw-navy);
}
.entry-content .wp-block-details[open] summary::after { content: "−"; }
.entry-content .wp-block-details > :not(summary) { padding: 0 1.2em; }
.entry-content .wp-block-details[open] { padding-bottom: .4em; }

/* ── 8. CTA 버튼 2종 — '버튼' 블록 → 스타일 선택 ── */
.wp-block-button.is-style-jw-cta-internal,
.wp-block-button.is-style-jw-cta-official { flex: 1 1 240px; }
.is-style-jw-cta-internal .wp-block-button__link,
.is-style-jw-cta-official .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 1em;
	padding: .9em 1.4em;
	border-radius: var(--jw-radius);
	text-decoration: none;
	color: #fff;
}
.is-style-jw-cta-internal .wp-block-button__link { background: var(--jw-orange); }
.is-style-jw-cta-official .wp-block-button__link { background: var(--jw-navy); }
.is-style-jw-cta-official .wp-block-button__link::after { content: " ↗"; }

/* ── 9. 표 — 모바일에서 좌우로 밀어서 본다. 첫 행은 배경으로 구분 ── */
.entry-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; }
.entry-content table { border-collapse: collapse; width: 100%; font-size: .94em; }
.entry-content th,
.entry-content td { border: 1px solid var(--jw-line); padding: .6em .8em; text-align: left; vertical-align: top; }
.entry-content table tr:first-child > * { background: var(--jw-navy-soft); color: var(--jw-navy); font-weight: 700; }

/* ── 10. 글 하단 고정 영역 (functions.php 가 모든 글 끝에 붙인다) ── */
.jw-post-footer {
	margin-top: 2.5em;
	padding-top: 1.2em;
	border-top: 1px solid var(--jw-line);
	font-size: .9em;
	color: var(--jw-muted);
}
.jw-post-footer .jw-meta { margin-bottom: .8em; }
.jw-disclaimer { background: var(--jw-gray-soft); padding: 1em 1.2em; border-radius: var(--jw-radius); margin: 0; }

/* ── 광고 자리 — 지금은 비어 있어서 화면에 안 나온다 ── */
.jw-ad { margin: 2em 0; text-align: center; }
.jw-ad:empty { display: none; }

/* ── 푸터 ── */
.jw-footer-links { margin-bottom: .4em; }
.jw-footer-links a { margin: 0 .6em; white-space: nowrap; }
.jw-footer-note { font-size: .85em; margin: 0; }