/*
Theme Name: GeneratePress Pickdism
Theme URI: https://pickdism.com
Description: 픽디즘 자식 테마 (GeneratePress 기반). 정보성 글(표·목록·직접 제작 그래픽·AI 개념 삽화)의 가독성과 애드센스 정책 대응을 위한 스타일. 원고가 클래스 없는 순수 HTML 이라 블록 스타일이 걸리지 않으므로 요소 선택자로 직접 지정한다.
Author: 남상준
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-pickdism
*/

/* ==========================================================================
   GeneratePress 본문 래퍼는 .entry-content 다.
   원고는 class 없는 시맨틱 HTML(<table> <img> <strong> <ul>)이므로
   요소 선택자로 직접 건다.

   색 토큰 — 값은 KRDS(대한민국 정부 디자인 시스템) 기준을 따른다.
   본문 #1E2124 (대비 15.9:1), 보조 #464C53 (8.5:1), 링크 #0B50D0 (6.8:1)
   ========================================================================== */

:root {
	--pd-text: #1e2124;
	--pd-muted: #464c53;
	--pd-primary: #0b50d0;
	--pd-secondary: #052b57;
	--pd-border: #cdd1d5;
	--pd-border-light: #e4e7ea;
	--pd-surface: #f2f5f9;
	--pd-accent-soft: #eaf1fd;
}

/* --- 0. 레이아웃 폭 ------------------------------------------------------ */
/*
 * 컨테이너 840px → .inside-article 좌우 패딩 40px 을 빼면 본문 실폭 760px.
 * Pretendard 17px 기준 한 줄 약 50자다.
 *
 * 읽기만 놓고 보면 38~40자(580px)가 최적이지만, 이 블로그는 표·카드·흐름도·삽화가
 * 많아 580px 에서는 시각 요소가 답답해진다. 운영자 판단으로 넓은 쪽을 택했다.
 *
 * CSS 로 덮는 이유: GeneratePress 의 container_width 는 DB(generate_settings)에
 * 저장돼 있어 functions.php 의 generate_option_defaults 필터로는 바뀌지 않는다.
 */
/*
 * 폭을 실제로 정하는 요소는 `#page.grid-container.container` 다.
 * 이 요소가 site-content 의 **조상**이라, `.site-content .container` 같은
 * 자손 선택자로는 잡히지 않는다(2026-09-13 DOM 실측으로 확인).
 */
#page.grid-container,
#page.container,
.site.grid-container,
.inside-header.grid-container,
.site-info .inside-site-info,
.inside-footer-widgets {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

/* 사이드바를 쓰지 않으므로 본문 영역이 폭을 온전히 쓴다. */
#primary.content-area {
	width: 100%;
	float: none;
	margin: 0 auto;
}

#right-sidebar,
#left-sidebar {
	display: none;
}

/* --- 1. 타이포그래피 ----------------------------------------------------- */
/* 한글 본문 17px / 줄간격 1.7 은 KRDS 기준(최소 16px, 줄간격 150% 이상)이다.
   Pretendard 는 functions.php 가 자체 호스팅으로 로드한다. */

/* 서체는 body 뿐 아니라 버튼·입력 요소에도 걸어야 화면이 섞이지 않는다.
   GeneratePress 기본값은 system-ui 계열이라 한글이 OS 폰트로 갈린다. */
body,
button,
input,
select,
textarea,
.entry-content,
.entry-title,
.site-title,
.main-navigation a,
.widget-title {
	font-family: "Pretendard Variable", Pretendard, -apple-system,
		BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
		"Malgun Gothic", sans-serif;
}

body,
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td {
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: normal;
	color: var(--pd-text);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	letter-spacing: normal;
	font-weight: 700;
}

.entry-title,
.entry-content h1 {
	font-size: 32px;
	line-height: 1.35;
	color: var(--pd-text);
}

.entry-content h2 {
	font-size: 24px;
	line-height: 1.4;
	color: var(--pd-secondary);
	margin-top: 48px;
	margin-bottom: 16px;
}

.entry-content h3 {
	font-size: 20px;
	line-height: 1.5;
	margin-top: 32px;
	margin-bottom: 12px;
}

.entry-content p {
	margin-top: 0;
	margin-bottom: 24px;
}

/* 부모 테마 본문 굵기가 가벼우면 강조가 묻힌다 */
.entry-content strong,
.entry-content b {
	font-weight: 700;
	color: var(--pd-text);
}

.entry-content a {
	color: var(--pd-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entry-content a:hover {
	text-decoration-thickness: 2px;
}

/* --- 2. 표 --------------------------------------------------------------- */
/* KRDS 방식 — 세로 격자선을 긋지 않고 가로 구분선과 헤더 강조로 구분한다 */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 32px 0;
	font-size: 16px;
	line-height: 1.6;
}

.entry-content thead th {
	background: var(--pd-surface);
	color: var(--pd-secondary);
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
	border: none;
	border-bottom: 2px solid var(--pd-primary);
}

.entry-content td {
	padding: 12px 14px;
	border: none;
	border-bottom: 1px solid var(--pd-border-light);
	color: var(--pd-text);
	vertical-align: top;
	text-align: left;
}

.entry-content tbody tr:last-child td {
	border-bottom: 1px solid var(--pd-border);
}

/* --- 3. 이미지 ----------------------------------------------------------- */
/* 본문 폭보다 큰 이미지가 칼럼을 넘쳐 가로 스크롤을 만들던 문제를 막는다 */

.entry-content img,
.post-image img,
.page-header-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

.entry-content figure {
	margin: 32px auto;
}

.entry-content figure img {
	margin: 0 auto;
	border-radius: 6px;
}

.entry-content figcaption {
	font-size: 15px;
	line-height: 1.5;
	color: var(--pd-muted);
	text-align: center;
	margin-top: 8px;
}

/* 대표 이미지를 고정 비율로 자르지 않는다.
   썸네일이 1200x630 인데 4:3 등으로 강제되면 제목 좌우가 잘린다. */
.post-image img,
.featured-image img {
	aspect-ratio: auto;
	object-fit: contain;
	width: 100%;
}

/* --- 4. 목록 ------------------------------------------------------------- */

.entry-content ul,
.entry-content ol {
	box-sizing: border-box;
	padding-left: 22px;
	margin: 24px 0;
	line-height: 1.7;
}

.entry-content li {
	margin-top: 10px;
}

.entry-content li::marker {
	color: var(--pd-primary);
}

/* --- 5. 핵심 정보 박스 (원고에서 <div class="pd-note">) ------------------ */

.pd-note {
	background: var(--pd-accent-soft);
	border-left: 4px solid var(--pd-primary);
	padding: 16px 20px;
	margin: 24px 0;
	border-radius: 0 6px 6px 0;
}

.pd-note > :last-child {
	margin-bottom: 0;
}

/* --- 6. 광고 슬롯 (애드센스 승인 후 사용) -------------------------------- */
/* min-height 로 자리를 미리 잡아 광고 로드에 의한 레이아웃 시프트를 없앤다.
   라벨 문구는 애드센스 정책상 '광고' 또는 '스폰서 링크' 만 허용된다. */

.pd-ad {
	margin: 40px 0;
	padding: 12px 0;
	border-top: 1px solid var(--pd-border-light);
	border-bottom: 1px solid var(--pd-border-light);
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pd-ad::before {
	content: "광고";
	display: block;
	align-self: flex-start;
	font-size: 13px;
	color: var(--pd-muted);
	margin-bottom: 8px;
}

/* --- 7. 푸터 ------------------------------------------------------------- */

.site-info {
	font-size: 15px;
	color: var(--pd-muted);
	text-align: center;
	padding: 28px 20px;
	border-top: 1px solid var(--pd-border-light);
	background: #fff;
}

.site-info .pd-footer-title {
	display: block;
	font-weight: 700;
	color: var(--pd-text);
	margin-bottom: 6px;
}

.site-info .pd-footer-tagline {
	display: block;
	margin-bottom: 14px;
}

.site-info .pd-footer-links {
	display: block;
	margin-bottom: 14px;
}

.site-info .pd-footer-links a {
	color: var(--pd-primary);
	text-decoration: underline;
	margin: 0 6px;
}

.site-info .pd-footer-copy {
	display: block;
	font-size: 14px;
}

/* --- 8. 모바일 ----------------------------------------------------------- */

@media (max-width: 768px) {
	.entry-title,
	.entry-content h1 {
		font-size: 26px;
	}

	.entry-content h2 {
		font-size: 22px;
		margin-top: 36px;
	}
}

@media (max-width: 600px) {
	/* 좁은 화면에서 좌우 40px 패딩은 본문을 지나치게 깎는다 */
	.inside-article,
	.site-content .container {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* 본문 크기는 줄이지 않는다. KRDS 최소 16px 기준을 지킨다 */
	.entry-content table {
		font-size: 15px;
	}

	.entry-content th,
	.entry-content td {
		padding: 10px 8px;
	}
}