/*
Theme Name: FEEDON
Template: twentytwentyfive
Theme URI: https://feedonlabs.com
Author: FEEDON
Description: Twenty Twenty-Five 자식 테마. FEEDON 브랜드 다크 UI (검정/흰색/#0a84ff 3색 토큰).
Version: 1.0.6
Text Domain: feedon
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap&subset=korean');

/* ==========================================================================
   FEEDON design tokens (do not add a 4th color)
   ========================================================================== */
:root {
	--feedon-bg: #000000;
	--feedon-text: #ffffff;
	--feedon-accent: #0a84ff;
	--feedon-text-muted: rgba(255, 255, 255, 0.56);
	--feedon-border: rgba(255, 255, 255, 0.12);
	--feedon-surface: rgba(255, 255, 255, 0.03);
}

html {
	background: var(--feedon-bg);
}

body {
	background-color: var(--feedon-bg);
	color: var(--feedon-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Apple SD Gothic Neo',
		'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	line-height: 1.6;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--feedon-text);
}

a:hover {
	color: var(--feedon-accent);
}

.wp-site-blocks {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* 헤더-본문 상단 여백: 기존 preset spacing--60(최대 70px) 대비 약 35% 축소 */
.feedon-main-top {
	margin-top: clamp(20px, 4.5vw, 45px);
}

.entry-content,
.wp-block-post-content {
	max-width: 720px;
	margin-inline: auto;
}

/* ==========================================================================
   Logo
   ========================================================================== */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.04em;
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: 1.25rem;
	color: var(--feedon-text);
	text-decoration: none;
}

.logo .on {
	color: var(--feedon-accent);
	display: inline-flex;
	align-items: center;
}

.logo svg {
	width: 0.86em;
	height: 0.86em;
	margin-right: 0.02em;
}

.feedon-header {
	border-bottom: 1px solid var(--feedon-border);
	padding-block: 20px;
}

.feedon-header a {
	color: var(--feedon-text);
}

.feedon-header .wp-block-navigation a {
	color: var(--feedon-text-muted);
}

.feedon-header .wp-block-navigation a:hover {
	color: var(--feedon-text);
}

.feedon-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.feedon-nav a {
	color: var(--feedon-text-muted);
	text-decoration: none;
	font-size: 14px;
}

.feedon-nav a:hover {
	color: var(--feedon-accent);
}

.feedon-header-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px 28px;
}

/* 모바일: 카테고리 4개 텍스트가 검색창과 한 줄에 못 들어가므로
   검색창을 다음 줄로 내리고 카테고리 링크 간격을 줄인다. */
@media (max-width: 600px) {
	.feedon-header {
		flex-wrap: wrap;
	}

	.feedon-header-right {
		width: 100%;
		justify-content: space-between;
	}

	.feedon-nav {
		gap: 14px;
	}

	.feedon-search {
		width: 100%;
	}

	.feedon-search input[type="search"] {
		width: 100%;
	}
}

/* ==========================================================================
   Search
   ========================================================================== */
.feedon-search {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--feedon-border);
	border-radius: 999px;
	background: var(--feedon-surface);
}

.feedon-search svg {
	width: 15px;
	height: 15px;
	color: var(--feedon-text-muted);
	flex-shrink: 0;
}

.feedon-search input[type="search"] {
	background: transparent;
	border: none;
	outline: none;
	color: var(--feedon-text);
	font-size: 13px;
	width: 100px;
}

.feedon-search input[type="search"]::placeholder {
	color: var(--feedon-text-muted);
}

/* ==========================================================================
   Category filter tabs
   ========================================================================== */
.feedon-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.feedon-tab {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--feedon-border);
	color: var(--feedon-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: transform 0.2s ease;
}

.feedon-tab:hover {
	color: var(--feedon-text);
	transform: translateY(-1px);
}

.feedon-tab.is-active {
	background: var(--feedon-accent);
	border-color: var(--feedon-accent);
	color: var(--feedon-text);
}

/* ==========================================================================
   Reading time
   ========================================================================== */
.feedon-reading-time {
	color: var(--feedon-text-muted);
}

/* ==========================================================================
   Section titles (eyebrow labels)
   ========================================================================== */
.feedon-section-title,
.wp-block-post-terms {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--feedon-text-muted);
	font-weight: 500;
}

/* ==========================================================================
   Cards (post list items)
   ========================================================================== */
.feedon-card,
.wp-block-post-template li,
.wp-block-query .wp-block-post {
	padding: 24px;
	border: 1px solid var(--feedon-border);
	border-radius: 14px;
	background: var(--feedon-surface);
	transition: transform 0.2s ease;
	list-style: none;
}

.feedon-card:hover,
.wp-block-post-template li:hover,
.wp-block-query .wp-block-post:hover {
	transform: translateY(-1px);
}

.wp-block-post-template li a,
.wp-block-query .wp-block-post a {
	text-decoration: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link,
.wp-element-button {
	height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--feedon-text);
	border: 1px solid var(--feedon-border);
	transition: transform 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	color: var(--feedon-text);
}

.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button__link.has-accent-background-color {
	background: var(--feedon-accent);
	border-color: var(--feedon-accent);
	color: var(--feedon-text);
}

/* ==========================================================================
   Archive (category) title & description
   ========================================================================== */
.wp-block-query-title {
	font-size: 2rem;
	margin-bottom: 8px;
}

.wp-block-term-description {
	color: var(--feedon-text-muted);
	font-size: 15px;
	max-width: 720px;
	margin-bottom: 24px;
}

.wp-block-term-description p {
	margin: 0;
}

/* ==========================================================================
   Post byline (author / date)
   ========================================================================== */
.feedon-byline {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--feedon-text-muted);
	font-size: 13px;
	margin-bottom: 32px;
}

.feedon-byline a {
	color: var(--feedon-text-muted);
}

.feedon-byline a:hover {
	color: var(--feedon-accent);
}

.feedon-byline .wp-block-post-author-name {
	font-weight: 500;
	color: var(--feedon-text);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.feedon-footer {
	border-top: 1px solid var(--feedon-border);
	padding-block: 40px;
	margin-top: 64px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.feedon-footer .logo {
	font-size: 1rem;
}

.feedon-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.feedon-footer-links a,
.feedon-footer-links a:visited {
	color: var(--feedon-text-muted);
	text-decoration: none;
	font-size: 13px;
}

.feedon-footer-links a:hover {
	color: var(--feedon-text);
}

.feedon-footer-copyright {
	color: var(--feedon-text-muted);
	font-size: 13px;
	width: 100%;
	order: 3;
	border-top: 1px solid var(--feedon-border);
	padding-top: 16px;
	margin-top: 8px;
}

/* ==========================================================================
   Misc
   ========================================================================== */
hr,
.wp-block-separator {
	border-color: var(--feedon-border);
}

::selection {
	background: var(--feedon-accent);
	color: var(--feedon-text);
}

/* ==========================================================================
   한글 조판 · 타이포그래피 (2026-07-26)
   feedonlabs.com 본사이트와 같은 규칙. 파일 맨 끝에 붙일 것 —
   뒤에 오는 규칙이 이기므로 위쪽 기존 선언을 덮어쓴다.
   ========================================================================== */

/* 본문 조판. theme.json이 폰트·행간·자간을 잡지만, 아래 세 줄은
   theme.json으로 표현할 수 없어서 CSS로만 가능하다. */
body {
	/* 한글 조판의 핵심. 기본값이면 브라우저가 한글을 음절 단위로 끊어서
	   '선별합니다'가 '선별합' / '니다'로 갈라진다. keep-all은 어절을 지킨다. */
	word-break: keep-all;
	/* keep-all이 못 자르는 긴 URL·영문 토큰이 화면 밖으로 나가는 것만 방어한다. */
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남는 것을 막는다. */
h1,
h2,
h3,
.wp-block-post-title,
.wp-block-query-title {
	text-wrap: balance;
}

p,
.wp-block-post-excerpt__excerpt {
	text-wrap: pretty;
}

/* 본문 단락 사이 간격 — 행간 1.7에 맞춰 넓힌다. */
.entry-content p,
.wp-block-post-content p {
	margin-block: 0 1.25em;
}

/* ==========================================================================
   로고
   ========================================================================== */
/* IBM Plex Sans KR의 최대 굵기는 700이다. 800으로 두면 브라우저가 가짜 볼드를
   합성해서 획이 뭉개진다. */
.logo {
	font-weight: 700;
}

/* ==========================================================================
   본문 가독성
   ========================================================================== */
/* 흐린 흰색(0.56) 위의 작은 글씨는 검정 배경에서 대비가 빠듯하다.
   본문에 딸린 설명글은 한 단계 키운다. */
.wp-block-term-description,
.wp-block-post-excerpt__excerpt {
	font-size: 16px;
	line-height: 1.7;
}

/* 목록·인용도 본문과 같은 조판을 따르게 한다. */
.entry-content li,
.wp-block-post-content li {
	line-height: 1.7;
	margin-bottom: 6px;
}

.wp-block-quote {
	border-left: 2px solid var(--feedon-accent);
	padding-left: 20px;
	margin-inline: 0;
	color: var(--feedon-text-muted);
}

/* ==========================================================================
   접근성
   ========================================================================== */
/* 키보드 탐색 시 현재 위치. 액센트 색을 그대로 쓴다 — 새 색을 만들지 않는다. */
:focus-visible {
	outline: 2px solid var(--feedon-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 활성 탭은 파란 배경 위 흰 글씨라 13px에서 대비가 빠듯하다. 굵기로 보완한다. */
.feedon-tab.is-active {
	font-weight: 600;
}

/* 카드 호버가 들리기만 하고 색 변화가 없어서 눌리는 대상인지 덜 읽힌다.
   글로우는 브랜드 가이드 금지 — 배경 한 단계와 테두리로만 표현한다. */
.feedon-card,
.wp-block-post-template li,
.wp-block-query .wp-block-post {
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.feedon-card:hover,
.wp-block-post-template li:hover,
.wp-block-query .wp-block-post:hover {
	border-color: rgba(10, 132, 255, 0.4);
	background: rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   홈 '더 보기' (카테고리 섹션 하단)
   ========================================================================== */
/* 카테고리 섹션 구분 — 네 갈래가 각각 하나의 덩어리로 읽혀야 한다.
   여백을 제목에 주면 첫 섹션까지 밀려나므로, 섹션을 닫는 '더 보기'에 준다. */
.feedon-more { margin: 4px 0 64px; }

/* 본사이트 버튼과 같은 모양. 브랜드 가이드대로 새 색을 만들지 않고,
   금지된 글로우 대신 리프트와 테두리·배경 변화로만 호버를 표현한다. */
.feedon-more a {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 22px;
	border: 1px solid var(--feedon-border);
	border-radius: 999px;
	color: var(--feedon-text);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.feedon-more a:hover {
	transform: translateY(-1px);
	border-color: rgba(10, 132, 255, .4);
	background: rgba(255, 255, 255, .06);
}
@media (prefers-reduced-motion: reduce) { .feedon-more a { transition: none; } }