/*
Theme Name: FEEDON
Template: twentytwentyfive
Version: 2.2.0
Description: FEEDON 블로그 — 2026-10 재구축(PRD 002). 흰 바탕 + 울트라마린 강조, Apple 문법.
Text Domain: feedon
*/

/* 값의 근거(2026-10-07 직접 열어 잼, getComputedStyle):
 *   apple.com/kr/newsroom  목록: 회색 면 #f5f5f7 · 흰 카드 모서리 32 · 카드 사이 36 · 카드 제목 32/39 700 ·
 *                          분류 14/20 700 #6e6e73 · 날짜 17 600 #6e6e73 · 폭 980
 *                          글:  분류 12/17 700 · 제목 48/57 700 · 본문 17/27 · 소제목 25.5/40.5 600 · 글 폭 653
 *   openai.com/news        분류 탭 줄 아래 카드 격자 (admiretheweb 「블로그」 태그에서 고름)
 *   apple.com/kr           머리 44~48 반투명 · 푸터 회색 면 12/16
 * 한글 본문은 행간을 1.75 로 둔다(라틴 27/17=1.59 보다 넉넉하게 — 한글 실측 기준, 홈페이지와 같음).
 */

:root {
	--fd-brand: #1f2fd6; /* 흰 8.62 · 회색 면 7.92 */
	--fd-ink: #1d1d1f; /* 16.83 */
	--fd-ink-2: #424245;
	--fd-muted: #6e6e73; /* 흰 5.07 · 회색 면 4.66 */
	--fd-tile: #f5f5f7;
	--fd-line: #d2d2d7;
	--fd-gutter: clamp(16px, 4vw, 22px);
	--fd-wide: 980px;
}

body {
	word-break: keep-all;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}
/* 부모 테마가 제목에 word-break: break-word 를 따로 건다 — 한글 제목이 「플/랜」처럼 갈렸다(2026-10-07 실측) */
h1, h2, h3, h4, h5, h6, .wp-block-post-title { word-break: keep-all; overflow-wrap: anywhere; }

.fd-wrap {
	max-width: calc(var(--fd-wide) + var(--fd-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fd-gutter);
}

:where(a, button, input):focus-visible {
	outline: 2px solid var(--fd-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── 머리 ─────────────────────────────────────────── */
.fd-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: saturate(1.8) blur(20px);
	backdrop-filter: saturate(1.8) blur(20px);
	border-bottom: 1px solid rgb(0 0 0 / 0.08);
}
.admin-bar .fd-header { top: 32px; }
.fd-header .fd-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 48px;
}
.fd-logo { display: block; color: var(--fd-ink); }
.fd-logo svg { display: block; height: 20px; width: auto; }
.fd-nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2.6vw, 24px);
	font-size: 0.875rem;
}
.fd-nav a { color: var(--fd-ink-2); text-decoration: none; white-space: nowrap; }
.fd-nav .fd-cta {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 980px;
	background: var(--fd-brand);
	color: #fff;
}
.fd-search input {
	width: 140px;
	height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: 980px;
	background: var(--fd-tile);
	font: inherit;
	color: var(--fd-ink);
}
@media (max-width: 600px) {
	.fd-search { display: none; }
}

/* ── 목록(블로그 홈 · 분류 · 검색) — Apple Newsroom ──── */
.fd-list-page {
	background: var(--fd-tile);
	padding: clamp(40px, 6vw, 64px) var(--fd-gutter) clamp(64px, 9vw, 96px);
	margin: 0 !important;
}
.fd-list-head,
.fd-tabs,
.fd-feed {
	max-width: var(--fd-wide);
	margin-inline: auto !important;
}
.fd-list-title {
	margin: 0;
	font-size: 2rem;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.fd-list-desc { color: var(--fd-muted); margin-top: 8px; }

.fd-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-top: 24px !important;
	margin-bottom: 28px !important;
	padding-bottom: 2px;
}
.fd-tabs::-webkit-scrollbar { display: none; }
.fd-tab {
	flex: none;
	padding: 7px 14px;
	border-radius: 980px;
	background: #fff;
	color: var(--fd-ink-2);
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}
.fd-tab.is-active { background: var(--fd-ink); color: #fff; }
/* 도구 줄 — 분류 줄 바로 아래, 한 단계 작게 */
.fd-tabs + .fd-tabs-tool { margin-top: -16px !important; align-items: center; }
.fd-tabs-label { flex: none; font-size: 0.8125rem; font-weight: 700; color: var(--fd-muted); margin-right: 2px; }
.fd-tabs-tool .fd-tab { padding: 5px 12px; font-size: 0.8125rem; }

/* 다른 형식 — 글 끝 · 도구 허브 머리 */
.fd-formats { margin-top: 24px; padding: 16px 20px; background: #fff; border: 1px solid var(--fd-line); border-radius: 12px; font-size: 0.9375rem; }
.fd-content .fd-formats { max-width: 680px; margin: 40px auto 0; }
.fd-formats-title { margin: 0 0 8px; font-weight: 700; color: var(--fd-ink); }
.fd-formats ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fd-formats a { color: var(--fd-brand); }
.fd-formats-date { color: var(--fd-muted); font-size: 0.8125rem; margin-left: 6px; font-variant-numeric: tabular-nums; }

.fd-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 흐름 레이아웃이 둘째 칸부터 위 여백을 붙인다 — 격자에선 첫 줄 두 칸이 어긋난다(분류 · 도구 화면) */
.fd-grid > li { margin-block: 0 !important; }
/* 첫 페이지의 첫 글은 한 줄을 다 쓴다(Newsroom 대표 카드) */
.home:not(.paged) .fd-grid > li:first-child { grid-column: 1 / -1; }
.home:not(.paged) .fd-grid > li:first-child .fd-card-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.22; }
.home:not(.paged) .fd-grid > li:first-child .fd-card { padding: clamp(28px, 4vw, 44px); }

.fd-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 28px 24px;
	background: #fff;
	border-radius: 24px;
	margin: 0 !important;
}
.fd-card > * { margin: 0 !important; }
.fd-card-cat,
.fd-card-cat a {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--fd-muted);
	text-decoration: none;
	position: relative;
	z-index: 1;
}
.fd-card-title {
	font-size: 1.3125rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.fd-card-title a { color: var(--fd-ink); text-decoration: none; }
/* 카드 전체를 누를 수 있게 — 제목 링크를 카드 크기로 넓힌다 */
.fd-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.fd-card-excerpt { color: var(--fd-ink-2); font-size: 0.9375rem; line-height: 1.65; }
/* 요약은 두 줄까지 — 카드가 글자 벽이 되지 않게(첫 글만 세 줄) */
.fd-card-excerpt p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.home:not(.paged) .fd-grid > li:first-child .fd-card-excerpt p { -webkit-line-clamp: 3; }
.fd-card-excerpt .wp-block-post-excerpt__more-text { display: none; }
.fd-card-date { margin-top: auto !important; font-size: 0.875rem; color: var(--fd-muted); padding-top: 6px; }

.fd-pagination { margin-top: 40px !important; gap: 6px; font-size: 0.9375rem; }
.fd-pagination a, .fd-pagination span { padding: 6px 12px; border-radius: 980px; color: var(--fd-ink-2); text-decoration: none; }
.fd-pagination .current { background: var(--fd-ink); color: #fff; }
.fd-empty { color: var(--fd-muted); }

@media (max-width: 734px) {
	.fd-grid { grid-template-columns: 1fr !important; gap: 14px; }
	.fd-card { padding: 22px 20px 20px; border-radius: 18px; }
}

/* ── 글 화면 ────────────────────────────────────────── */
.fd-article { padding: clamp(40px, 7vw, 80px) var(--fd-gutter) clamp(56px, 8vw, 96px); margin: 0 !important; }
.fd-article-head { margin-bottom: clamp(28px, 4vw, 44px) !important; }
.fd-article-head > * { margin-block: 0 !important; }
.fd-article-cat, .fd-article-cat a {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--fd-muted);
	text-decoration: none;
}
.fd-article-title {
	margin-top: 12px !important;
	font-size: clamp(2rem, 4.6vw, 3rem);
	line-height: 1.22;
	letter-spacing: -0.025em;
}
.fd-article-meta { margin-top: 16px !important; gap: 0 14px; font-size: 0.9375rem; color: var(--fd-muted); }
.fd-article-meta > * { margin: 0 !important; }
.fd-article-meta .fd-updated::before { content: '수정 '; }
.fd-byline { color: var(--fd-ink-2); }

/* 글 머리 상자 — 이런 분께 · 확인한 날짜 · 요약 (패턴 feedon/brief) */
.fd-content .fd-brief {
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--fd-tile);
	font-size: 0.96875rem;
	line-height: 1.65;
}
.fd-brief > * { margin: 0 !important; }
.fd-brief > * + * { margin-top: 8px !important; }
.fd-brief-row strong:first-child { display: inline-block; min-width: 5.5em; margin-right: 6px; color: var(--fd-ink); }
.fd-brief-row { color: var(--fd-ink-2); }
.fd-content .fd-brief-sum {
	margin-top: 14px !important;
	padding: 14px 0 0 1.2em;
	border-top: 1px solid var(--fd-line);
	font-weight: 600;
	color: var(--fd-ink);
}
.fd-content .fd-brief-sum li::marker { color: var(--fd-brand); }

/* 체크리스트(지금 해 볼 것) · 발행 전 확인 표시 */
.fd-content .fd-checklist { list-style: none; padding-left: 0; }
.fd-content .fd-checklist li { position: relative; padding-left: 1.9em; }
.fd-content .fd-checklist li::before {
	content: ''; position: absolute; left: 0; top: 0.32em;
	width: 1.05em; height: 1.05em; border: 1.5px solid var(--fd-brand); border-radius: 5px;
}
.fd-content .fd-todo { padding: 10px 14px; border: 1.5px dashed #b3261e; border-radius: 12px; color: #b3261e; font-size: 0.9375rem; }

/* 본문 — 글 폭 680(Newsroom 653 실측에 가깝게) */
.fd-content { font-size: 1.0625rem; line-height: 1.75; color: var(--fd-ink); }
.fd-content > * + * { margin-top: 1.25em; }
.fd-content h2 {
	margin-top: 2.4em !important;
	font-size: 1.5rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.fd-content h3 { margin-top: 1.8em !important; font-size: 1.25rem; line-height: 1.45; }
.fd-content a { color: var(--fd-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fd-content strong { font-weight: 700; }
.fd-content ul, .fd-content ol { padding-left: 1.3em; }
.fd-content li + li { margin-top: 0.4em; }
.fd-content blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--fd-brand);
	color: var(--fd-ink-2);
}
/* 증거 화면 — 회색 판 위에 흰 화면, 캡션은 왼쪽(무엇 · 날짜 · 출처) */
.fd-content .wp-block-image { background: var(--fd-tile); border-radius: 18px; padding: 14px; }
.fd-content figure img, .fd-content img { border-radius: 10px; }
.fd-content .wp-block-image img { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); }
.fd-content figcaption { font-size: 0.875rem; line-height: 1.5; color: var(--fd-ink-2); text-align: left; margin: 10px 2px 0; }
.fd-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fd-content .wp-block-table { overflow-x: auto; }
.fd-content th, .fd-content td { padding: 10px 12px; border-bottom: 1px solid var(--fd-line); text-align: left; vertical-align: top; word-break: keep-all; overflow-wrap: break-word; }
.fd-content th { font-weight: 700; background: var(--fd-tile); }
/* 첫 열은 항목 이름 — 한 글자씩 꺾이지 않게 */
.fd-content th:first-child, .fd-content td:first-child { white-space: nowrap; }
/* 칸 3개 이상 표 — 폰에서는 줄마다 카드, 칸 이름을 값 앞에 */
@media (max-width: 600px) {
	.fd-content .fd-stack thead { display: none; }
	.fd-content .fd-stack table, .fd-content .fd-stack tbody, .fd-content .fd-stack tr, .fd-content .fd-stack td { display: block; width: 100%; box-sizing: border-box; }
	.fd-content .fd-stack .wp-block-table, .fd-content .wp-block-table.fd-stack { overflow-x: visible; }
	.fd-content .fd-stack tr { border: 1px solid var(--fd-line); border-radius: 14px; padding: 6px 14px 8px; margin-bottom: 10px; background: #fff; }
	.fd-content .fd-stack td { border: 0; padding: 6px 0; white-space: normal; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
	.fd-content .fd-stack td::before { content: attr(data-label); font-size: 0.8125rem; font-weight: 700; color: var(--fd-muted); padding-top: 2px; }
	.fd-content .fd-stack td:first-child { display: block; font-weight: 700; font-size: 1.0625rem; padding-top: 8px; }
	.fd-content .fd-stack td:first-child::before { content: none; }
}
.fd-content code { background: var(--fd-tile); padding: 0.1em 0.35em; border-radius: 6px; font-size: 0.92em; }
.fd-content pre { background: var(--fd-tile); padding: 16px 18px; border-radius: 14px; overflow-x: auto; }

/* 글 끝 글쓴이 */
.fd-author {
	max-width: 680px;
	margin: clamp(48px, 7vw, 64px) auto 0 !important;
	padding-top: 24px;
	border-top: 1px solid var(--fd-line);
	font-size: 0.9375rem;
	color: var(--fd-ink-2);
}
.fd-author p { margin: 0 0 8px; }
.fd-author .fd-author-name { font-weight: 700; color: var(--fd-ink); font-size: 1.0625rem; }
.fd-author a, .fd-byline a { color: inherit; }

/* 글 끝 구독 — 회색 타일 */
.fd-subscribe {
	max-width: 680px;
	margin: clamp(48px, 7vw, 72px) auto 0 !important;
	padding: 32px 28px;
	border-radius: 24px;
	background: var(--fd-tile);
	text-align: center;
}
.fd-subscribe p { margin: 0 0 6px; color: var(--fd-ink-2); }
.fd-subscribe .fd-subscribe-title { font-size: 1.3125rem; font-weight: 700; color: var(--fd-ink); }
.fd-btn {
	display: inline-flex;
	margin-top: 14px;
	min-height: 44px;
	align-items: center;
	padding: 11px 21px;
	border-radius: 980px;
	background: var(--fd-brand);
	color: #fff !important;
	text-decoration: none !important;
}

.fd-post-nav { max-width: 680px; margin: 40px auto 0 !important; gap: 16px; font-size: 0.9375rem; }
.fd-post-nav a { color: var(--fd-ink); text-decoration: none; font-weight: 600; }
.fd-post-nav .post-navigation-link__label { display: block; color: var(--fd-muted); font-weight: 400; font-size: 0.8125rem; }

/* ── 푸터 — apple.com 회색 면 12/16 ─────────────────── */
.fd-footer { background: var(--fd-tile); border-top: 1px solid var(--fd-line); padding: 36px 0 24px; font-size: 0.75rem; line-height: 1.5; color: var(--fd-muted); }
.fd-footer-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.fd-footer .fd-logo svg { height: 16px; margin-bottom: 8px; }
.fd-footer p { margin: 0; }
.fd-footer h2 { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; color: var(--fd-ink); letter-spacing: 0; }
.fd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-footer a { color: var(--fd-muted); text-decoration: none; }
.fd-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--fd-line); }
@media (max-width: 734px) {
	.fd-footer-cols { grid-template-columns: 1fr 1fr; }
	.fd-footer-cols > :first-child { grid-column: 1 / -1; }
}

/* 호버는 정밀 포인터에서만 */
@media (hover: hover) and (pointer: fine) {
	.fd-nav a:hover, .fd-footer a:hover { color: var(--fd-ink); }
	.fd-tab:hover:not(.is-active) { background: #e8e8ed; }
	.fd-card { transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 300ms; }
	.fd-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.25); }
	.fd-post-nav a:hover { color: var(--fd-brand); }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}