/*
Theme Name: Jihoons Blog
Author: Jihoon Baek | Plus Minus Zero Studio
Author URI: https://john-baek.com/
Description: Theme based on screenshot design.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jihoons-blog
*/

/* Font Face Removed - Using CDN Dynamic Subset in Customizer Additional CSS */

/* Variables */
:root {
	--primary-color: #333333;
	--accent-color: #f25b24;
	--secondary-text: #666;
	--bg-color: #ffffff;
	--border-color: #eeeeee;
	--font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--sidebar-width: 300px;
	--container-width: 1200px;
}

/* Reset & Basics */
*,
*::before,
*::after {
	box-sizing: border-box;
}
/* 전체 화면(노치 포함) 배경 처리 */

body {
	margin: 0;
	font-family: var(--font-family);
	color: var(--primary-color);
	background: var(--bg-color);
	line-height: 1.6;
}

a {
	text-decoration: none;
	color: inherit;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.site-header {
	/* 노치(안전 영역)만큼 상단 패딩을 강제로 확장 */
	padding-top: calc(24px + env(safe-area-inset-top));
	padding-bottom: 24px;
	/* 가로 모드일 때 좌우 노치 침범 방지 */
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);

	position: sticky;
	top: 0;
	z-index: 1000;
	background: linear-gradient(
			to bottom, 
			rgba(255, 255, 255, 1) 0%,   /* 최상단: 흰색 완전 단색 */
			rgba(255, 255, 255, 0.5) 100% /* 최하단: 흰색 반투명(투명도 50%) */
		);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	margin-bottom: 40px;
}



.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-title {
	font-family: "Lobster", sans-serif;
	font-size: 34px;
	/* Slightly larger for Lobster font visual balance */
	font-weight: 400;
	margin: 0;
	letter-spacing: 0;
}

.site-description {
	display: block;
	font-size: 17px;
	color: var(--secondary-text);
	font-weight: normal;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 36px;
}

.main-navigation li a {
	font-size: 20px;
	/* 1.2x of base ~16px */
	font-weight: 700;
	color: #000;
	/* Brighter/Sharper color */
	text-transform: none;
	transition: color 0.2s;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item a,
.main-navigation li.current_page_item a {
	color: var(--accent-color);
}

/* Layout */
.site-content {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-width);
	gap: 60px;
	margin-bottom: 80px;
}

/* Post List */
.post-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.post-entry {
	display: grid;
	grid-template-columns: 280px 1fr;
	/* Image width fixed based on screenshot visual */
	gap: 10px;
	align-items: start;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 10px;
}

.post-entry:last-child {
	border-bottom: none;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
	object-fit: cover;
	aspect-ratio: 16/10;
}

.entry-header .entry-title {
	margin: 0 0 15px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.entry-content {
	color: var(--secondary-text);
	font-size: 15px;
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-meta {
	font-size: 13px;
	color: #999;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Sidebar */
.sidebar .widget {
	margin-bottom: 10px;
}

.sidebar {
	position: sticky;
	top: 100px;
	/* Adjusted for sticky header (approx 80px) + gap */
	align-self: start;
}

.widget-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	padding-left: 15px;
	border-left: 3px solid var(--accent-color);
	line-height: 1;
}

/* About Me Widget Style */
.about-me-widget {
	text-align: left;
}

.about-me-avatar {
	width: 120px;
	height: 120px;
	background-color: none;
	/* placeholder */
	margin: 0 0 15px 0;
	overflow: hidden;
}

.about-me-avatar img {
	width: 100%;
	height: 100%;
	object-fit: fit;
}

.about-me-name {
	font-family: "Lobster", sans-serif;
	font-weight: 700;
	margin-bottom: 5px;
}

.about-me-desc {
	font-size: 14px;
	color: var(--secondary-text);
	line-height: 1.5;
}

/* Contact List */
.contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 10px;
	font-size: 14px;
}

.contact-icon {
	width: 24px;
	height: 24px;
	/* rough size for icon container */
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: var(--accent-color);
}

.contact-info strong {
	display: block;
	color: var(--primary-color);
	margin-bottom: 2px;
}

.contact-info span {
	color: var(--secondary-text);
}


/* Search Form */
.search-form {
	display: flex;
}

.search-field {
	flex: 1;
	padding: 12px 15px;
	border: 1px solid var(--border-color);
	border-radius: 4px 0 0 4px;
	background: #f9f9f9;
	font-size: 14px;
}

.search-submit {
	padding: 0 20px;
	background: var(--accent-color);
	color: #fff;
	border: none;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
}

/* Tags */
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tagcloud a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--border-color);
	color: var(--secondary-text);
	font-size: 13px;
	border-radius: 2px;
	transition: all 0.2s;
}

.tagcloud a:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

/* Responsive */
@media (max-width: 900px) {
	.site-content {
		grid-template-columns: 1fr;
	}

	.post-entry {
		grid-template-columns: 1fr;
		/* Stack on mobile */
	}

	.post-thumbnail img {
		aspect-ratio: 16/9;
	}
}

/* Contact Page Styles */
.contact-page-container {
	padding-top: 20px;
}

.contact-name {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #444;
}

.contact-sub {
	font-size: 14px;
	font-weight: normal;
	color: var(--secondary-text);
	margin-left: 5px;
}

.contact-links {
	margin-bottom: 30px;
}

.contact-link-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 5px 0;
	font-size: 14px;
	color: #333;
}

.contact-link-item a {
	text-decoration: underline;
	text-decoration-color: #ddd;
	text-underline-offset: 3px;
}

.contact-link-item a:hover {
	text-decoration-color: var(--primary-color);
}

.contact-intro {
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 40px;
}

.contact-divider {
	border: none;
	border-top: 1px solid var(--border-color);
	margin: 40px 0;
}

.faq-title {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 50px;
	color: #333;
}

.faq-item {
	margin-bottom: 40px;
}

.faq-question {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 15px;
	color: #444;
}

.faq-answer {
	font-size: 15px;
	line-height: 1.7;
	color: var(--secondary-text);
}


/* Make sure main content respects grid */
#main {
	/* If custom styling needed for page vs post list */
}

/* Post Page Header (Blog Archive) */
.post-archive-header {
	margin-bottom: 30px;
}

.post-archive-header .page-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 30px;
}

.post-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	/* allow wrapping on small screens */
}

/* Long Search Bar */
.post-search-container {
	flex: 1;
	/* Takes available space */
	min-width: 300px;
}

.post-search-form {
	display: flex;
	position: relative;
	width: 100%;
}

.post-search-input {
	width: 100%;
	padding: 12px 15px;
	padding-right: 40px;
	/* space for icon */
	border: 1px solid var(--border-color);
	border-radius: 4px;
	/* Slightly rounded or full round? User said "Search Bar", usually implies rounded */
	background: #f9f9f9;
	font-size: 15px;
	height: 46px;
}

.post-search-submit {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0 10px;
}

.post-search-submit svg {
	display: block;
}

/* Category Filters */
.post-category-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:5px;
}

.cat-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1px solid #ddd;
	border-radius: 999px;
	/* Pill shape */
	font-size: 14px;
	color: #333;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
	background: white;
	white-space: nowrap;
	cursor: pointer;
	/* Button reset */
	font-family: inherit;
	line-height: inherit;
}

.cat-pill:hover {
	border-color: #333;
}

.cat-pill.active {
	background: #000;
	color: #fff;
	border-color: #000;
}

/* Stacked Link Post Style */
/* Stacked Link Post Style */
.post-entry-stacked {
	padding-bottom: 35px;
	margin-bottom: 35px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.post-thumbnail-stacked {
	margin-bottom: 25px;
}

.post-thumbnail-stacked img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	/* Standard widescreen */
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.entry-title-stacked {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 15px;
	line-height: 1.3;
}

.entry-content-stacked {
	color: var(--secondary-text);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 15px;
	display: block;
	/* Show full excerpt usually? Or clamped? "short" typically means excerpt */
}

/* Single Post Styles */
.single-title {
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 24px;
	line-height: 1.3;
	color: #111;
}

.single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	font-size: 14px;
	color: #666;
	margin-bottom: 0px;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.meta-item svg {
	width: 18px;
	height: 18px;
	stroke: #888;
	fill: none;
}

.meta-text {
	font-weight: 500;
}

.single-divider {
	border: 0;
	border-top: 1px solid #eee;
	margin: 30px 0 40px 0;
}

.single-content {
	font-size: 17px;
	line-height: 1.8;
	color: #333;
}

.single-content p {
	margin-bottom: 24px;
}

.single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 20px 0;
}

/* Specific icon adjustments */
.author-meta svg {
	stroke: #888;
}

.date-meta svg {
	stroke: #888;
}

.cat-meta svg {
	fill: #888;
	stroke: none;
}

/* Fix truncation on single posts */
/* Fix truncation on single posts and pages */
.single-content,
.page-content {
	display: block !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	height: auto !important;
}


/* Refine SVG styles for single post meta */
.meta-item svg {
	stroke: #888;
	fill: none;
	stroke-width: 1.5;
}

/* Category and Comments icons use fill instead of stroke based on their path data */
.cat-meta svg,
.comments-meta svg {
	fill: #888;
	stroke: none;
}

.meta-item {
	font-size: 15px;
	font-weight: 500;
	color: #555;
	margin-right: 15px;
}

.single-header {
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

/* Static Cat Pill for Single Post */
.cat-pill.static {
	padding: 6px 14px;
	font-size: 13px;
	background: #fff;
	border: 1px solid #ddd;
	color: #555;
	cursor: default;
}

.cat-pill.static:hover {
	border-color: #ddd;
	color: #555;
	background: #fff;
}

/* About More Link */
.about-more-link {
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--accent-color);
	font-weight: 600;
	text-decoration: none;
}

.about-more-link:hover {
	text-decoration: underline;
}

/* Page Template Styles using page.php */
.page-title {
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 30px;
	color: #111;
}

.page-content {
	font-size: 16px;
	line-height: 1.8;
	color: #333;
}

.page-content p {
	margin-bottom: 24px;
}

.page-content h2 {
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: 700;
}

.page-content ul {
	margin-bottom: 24px;
	padding-left: 20px;
}

.page-content li {
	margin-bottom: 10px;
}

/* Comments Styles */
.comments-area {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border-color);
}

.comments-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 30px;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-body {
	margin-bottom: 30px;
	border-bottom: 1px solid #eee;
	padding-bottom: 30px;
}

.comment-meta {
	margin-bottom: 10px;
	font-size: 14px;
	color: #666;
}

.fn {
	font-weight: 700;
	color: #333;
	margin-right: 5px;
}

.comment-content {
	font-size: 15px;
	line-height: 1.6;
	color: #444;
}

.comment-reply-link {
	font-size: 13px;
	color: var(--accent-color);
	font-weight: 600;
}

/* Comment Form */
.comment-reply-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	margin-top: 40px;
}

.comment-form p {
	margin-bottom: 15px;
}

.comment-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #555;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
}

.comment-form .submit {
	background: var(--accent-color);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
}

/* Related Posts Styles */
.related-posts-section {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border-color);
}

.related-posts-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 30px;
}

.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 768px) {
	.related-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.related-posts-grid {
		grid-template-columns: 1fr;
	}
}

.related-post-card {
	display: block;
}

.related-post-link {
	display: block;
}

.related-post-thumb {
	margin-bottom: 10px;
	overflow: hidden;
	border-radius: 4px;
}

.related-post-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/10;
	object-fit: cover;
	transition: transform 0.3s;
}

.related-post-link:hover .related-post-thumb img {
	transform: scale(1.05);
}

.related-no-thumb {
	width: 100%;
	aspect-ratio: 16/10;
	background: #f0f0f0;
}

.related-post-heading {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 5px;
	line-height: 1.4;
	color: #333;
}

.related-post-meta {
	font-size: 12px;
	color: #999;
}

/* TOC Styles */
.post-toc {
	background: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 30px;
	border: 1px solid #eee;
}

.post-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-toc li {
	margin-bottom: 8px;
}

.post-toc a {
	text-decoration: none;
	color: #555;
	font-size: 15px;
	font-weight: 500;
	transition: color 0.2s;
}

.post-toc a:hover {
	color: var(--accent-color);
}

.toc-h3 {
	padding-left: 20px;
	font-size: 14px;
}

/* Comment Form Restructuring */
.comment-form {
	display: flex;
	flex-direction: column;
}

/* Force comment textarea to top */
.comment-form-comment {
	order: -1;
	margin-bottom: 20px;
}

/* Initially small textarea */
#comment {
	height: 48px;
	min-height: 48px;
	transition: height 0.3s ease;
	resize: none;
	overflow-y: hidden;
}

/* Email Helper Text */
.email-notes {
	display: block;
	font-size: 13px;
	color: #999;
	margin-bottom: 5px;
	margin-top: -2px;
}

/* Hide other fields initially handled by JS, but add backup CSS */
/* We don't want to hide them permanently if JS fails, 
   but for this task, JS is assumed working. 
   Actually, let's keep them visible in CSS and let JS hide them to avoid FOUC or accessibility issues without JS. 
   But the user wants the interaction specifically. 
   I'll style them nicely anyway. */

.comment-form-author,
.comment-form-email {
	margin-bottom: 20px;
}

.comment-form-cookies-consent {
	margin-bottom: 20px;
	font-size: 13px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Required asterisk color */
.required {
	color: var(--accent-color);
}

/* Style Inputs */
.comment-form input[type="text"],
.comment-form input[type="email"] {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	/* "Small input" style */
	height: 42px;
}

.toc-h1 {
	font-weight: 700;
	margin-top: 5px;
	color: #333;
}

.toc-h2 {
	font-weight: 500;
	padding-left: 15px;
	/* Indent level 1 */
}

.toc-h3 {
	padding-left: 30px;
	/* Indent level 2 */
	font-size: 14px;
}

.toc-h4 {
	padding-left: 45px;
	/* Indent level 3 */
	font-size: 13px;
	color: #666;
}

/* Hide 'Says' in comments */
.says {
	display: none;
}

/* Ensure comment author and date are on separate lines or styled as requested */
/* Default WP output structure is: Author says: (newline) Metadata (Date). */
/* We removed 'Says' via CSS. */
/* If we want them stacked purely (Name \n Date), standard structure usually puts them in header/footer containers. */
/* Let's ensure proper block display for metadata */
.comment-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 10px;
}

.comment-author {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}

.comment-metadata {
	font-size: 13px;
	color: #999;
}

.comment-content {
	margin-bottom: 15px;
}

/* Post Hashtags */
.post-hashtag {
	font-size: 14px;
	color: var(--secondary-text);
	text-decoration: none;
	margin-right: 10px;
	transition: color 0.2s;
}

.post-hashtag:hover {
	color: var(--accent-color);
}

/* Back Button */
.back-link-container {
	margin-bottom: 20px;
	margin-top: 10px;
}

.back-to-list {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	color: #999;
	text-decoration: none;
	transition: color 0.2s;
}

.back-to-list:hover {
	color: var(--accent-color);
}