/*
Theme Name: BuBuild Starter
Theme URI: https://bubuild.mycafe24.com
Description: 애드센스 승인 최적화 워드프레스 테마 - 깔끔하고 빠른 한국어 블로그 테마
Author: BuBuild
Author URI: https://bubuild.mycafe24.com
Template: twentytwentyfive
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bubuild-starter
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
*/

/* ===== 기본 리셋 및 변수 ===== */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --text-color: #1f2937;
    --text-light: #6b7280;
    --bg-color: #ffffff;
    --bg-light: #f9fafb;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --radius: 8px;
    --max-width: 1200px;
    --content-width: 800px;
}

/* ===== 타이포그래피 ===== */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--bg-color);
    word-break: keep-all;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.5em;
    color: var(--text-color);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1.5em;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* ===== 레이아웃 ===== */
.site-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.content-area {
    max-width: var(--content-width);
    margin: 0 auto;
}

/* ===== 헤더 ===== */
.site-header {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.site-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.site-logo:hover {
    color: var(--primary-color);
}

/* ===== 네비게이션 ===== */
.main-navigation ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    color: var(--text-color);
    font-weight: 500;
    padding: 8px 0;
    position: relative;
}

.main-navigation a:hover,
.main-navigation a.current {
    color: var(--primary-color);
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.2s ease;
}

.main-navigation a:hover::after {
    width: 100%;
}

/* ===== 모바일 메뉴 ===== */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
        padding: 20px;
    }

    .main-navigation.active {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 15px;
    }
}

/* ===== 메인 콘텐츠 ===== */
.site-main {
    padding: 40px 0;
    min-height: 60vh;
}

/* ===== 포스트 카드 ===== */
.post-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 30px;
    transition: box-shadow 0.2s ease;
}

.post-card:hover {
    box-shadow: var(--shadow-md);
}

.post-card-image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-card-image img {
    transform: scale(1.05);
}

.post-card-content {
    padding: 25px;
}

.post-card-category {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.post-card-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.post-card-title a {
    color: var(--text-color);
}

.post-card-title a:hover {
    color: var(--primary-color);
}

.post-card-excerpt {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.post-card-meta {
    display: flex;
    gap: 15px;
    color: var(--text-light);
    font-size: 0.85rem;
}

/* ===== 싱글 포스트 ===== */
.single-post-wrapper {
    max-width: var(--content-width);
    margin: 0 auto;
}

.single-post .single-post-header,
.single-post-header {
    text-align: left !important;
    max-width: var(--content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 40px;
    box-sizing: border-box;
}

.single-post .single-post-title,
.single-post-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: left !important;
    padding-left: 0 !important;
}

.single-post .post-card-category,
.single-post-header .post-card-category {
    text-align: left !important;
    display: inline-block;
}

.single-post .single-post-meta,
.single-post-meta {
    color: var(--text-light);
    font-size: 0.95rem;
    justify-content: flex-start !important;
    padding-left: 0 !important;
}

.single-post-content,
.single-post .single-post-content {
    max-width: var(--content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

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

.single-post-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: var(--text-light);
}

.single-post-content ul,
.single-post-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

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

/* ===== 사이드바 ===== */
.sidebar {
    padding: 30px;
    background: var(--bg-light);
    border-radius: var(--radius);
}

.widget {
    margin-bottom: 30px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

/* ===== 애드센스 광고 영역 ===== */
.ad-container {
    background: var(--bg-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin: 30px 0;
    text-align: center;
    min-height: 100px;
}

.ad-container-header {
    margin: 20px 0 40px;
}

.ad-container-content {
    margin: 30px 0;
}

.ad-container-sidebar {
    margin-bottom: 20px;
}

.ad-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ===== 푸터 ===== */
.site-footer {
    background: var(--text-color);
    color: white;
    padding: 50px 0 30px;
    margin-top: 60px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    color: white;
    margin-bottom: 20px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 10px;
}

.footer-section a {
    color: #9ca3af;
    transition: color 0.2s ease;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #374151;
    color: #9ca3af;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.footer-links a {
    color: #9ca3af;
}

.footer-links a:hover {
    color: white;
}

/* ===== 검색 폼 ===== */
.search-form {
    display: flex;
    gap: 10px;
}

.search-form input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
}

.search-form button {
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-form button:hover {
    background: var(--primary-dark);
}

/* ===== 페이지네이션 ===== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.pagination a,
.pagination span {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-color);
    transition: all 0.2s ease;
}

.pagination a:hover,
.pagination .current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ===== 버튼 ===== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}

.btn:hover {
    background: var(--primary-dark);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* ===== 폼 스타일 ===== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* ===== 유틸리티 ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }

.hidden { display: none; }

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
    :root {
        --max-width: 100%;
    }

    .site-container {
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .single-post-title {
        font-size: 1.75rem;
    }

    .site-main {
        padding: 30px 0;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* ===== 인쇄 스타일 ===== */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .ad-container,
    .main-navigation {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}

/* =====================================================
   최근 글 섹션 스타일
===================================================== */
.recent-posts {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.recent-posts-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
    color: #212529;
}

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

.recent-post-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    transition: background 0.2s;
}

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

.recent-post-item:hover {
    background: #fff;
    border-radius: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.recent-post-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
}

.recent-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-post-info {
    flex: 1;
    min-width: 0;
}

.recent-post-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #212529;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-post-title:hover {
    color: #667eea;
}

.recent-post-date {
    font-size: 0.8rem;
    color: #868e96;
}

/* 반응형 */
@media (max-width: 768px) {
    .recent-posts {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .recent-post-thumb {
        width: 50px;
        height: 50px;
    }

    .recent-post-title {
        font-size: 0.9rem;
    }
}

/* =====================================================
   레이아웃 정리 (2026-06-19) — 로고/브레드크럼/그리드/헤더
   데스크탑·모바일 공통 최적화
===================================================== */

/* --- 헤더: 로고 크기 제한 (원본 279x262 이미지가 원본 크기로 노출되던 문제) --- */
.site-header .site-container {
    gap: 24px;
    min-height: 64px;
}

/* 텍스트 로고 (통일된 사이트 제목 "누띵즈") */
.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
    white-space: nowrap;
}

/* 이미지 커스텀 로고용 (현재 미사용, 안전망으로 유지) */
.site-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
    margin: 0;
}

.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .site-logo img {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* --- 브레드크럼: 기본 <ol> 숫자 목록 → 한 줄 가로 내비 --- */
.breadcrumb {
    padding: 14px 0 0;
    font-size: 0.875rem;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
}

.breadcrumb li:not(:first-child)::before {
    content: '›';
    color: var(--text-light);
    opacity: 0.55;
    font-size: 1rem;
    line-height: 1;
}

.breadcrumb a {
    color: var(--text-light);
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb li:last-child span[itemprop="name"] {
    color: var(--text-color);
    font-weight: 600;
}

/* --- 아카이브 헤더: 과도한 상하 여백 정리 --- */
.archive-header {
    padding: 24px 0 28px !important;
    margin-bottom: 32px !important;
}

/* --- 글 목록: 반응형 그리드 (데스크탑 2열, 모바일 1열) --- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.posts-grid .post-card {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.posts-grid .post-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.posts-grid .post-card-meta {
    margin-top: auto;
    padding-top: 12px;
}

/* --- 모바일 (≤768px) --- */
@media (max-width: 768px) {
    .site-header {
        padding: 10px 0;
    }

    .site-header .site-container {
        min-height: 52px;
        gap: 12px;
    }

    .site-header .site-logo {
        font-size: 1.35rem;
    }

    .site-header .custom-logo,
    .site-header .custom-logo-link img,
    .site-header .site-logo img {
        height: 40px;
        max-width: 160px;
    }

    .posts-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .archive-header {
        padding: 16px 0 20px !important;
        margin-bottom: 24px !important;
    }
}
/* =====================================================
   싱글 포스트 헤더 정렬 수정 (2026-06-21)
   - 카테고리, 제목, 본문 모두 동일 선상(왼쪽) 정렬
===================================================== */

/* 싱글 포스트 전체 래퍼 */
.single-post .single-post-wrapper,
.single-post-wrapper {
    max-width: var(--content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 헤더 영역 왼쪽 정렬 강제 */
.single-post .single-post-header,
.single-post-header {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 카테고리 (주황색 글씨) 왼쪽 정렬 */
.single-post .post-card-category,
.single-post-header .post-card-category {
    display: inline-block !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* 제목 왼쪽 정렬 강제 */
.single-post .single-post-title,
.single-post-title,
article.single-post h1,
.single-post h1.single-post-title {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 메타 정보 (날짜 등) 왼쪽 정렬 */
.single-post .single-post-meta,
.single-post-meta {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
}

/* 본문 콘텐츠 왼쪽 정렬 */
.single-post .single-post-content,
.single-post-content {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 썸네일 이미지도 왼쪽 정렬 (필요시) */
.single-post .single-post-thumbnail,
.single-post-thumbnail {
    text-align: left !important;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .single-post .single-post-wrapper,
    .single-post-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ===== Featured Image (썸네일) ===== */
/* 2026-06-21: 썸네일과 본문 이미지 사이즈 통일 */
/* 2026-06-28: 홈페이지와 싱글 포스트 구분 */

/* 싱글 포스트 페이지: 썸네일 800px */
.single .wp-block-post-featured-image {
    margin-top: 0.6em !important;
    margin-bottom: 0.6em !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 홈페이지/아카이브: 썸네일은 부모 컨테이너에 맞춤 */
.home .wp-block-post-featured-image,
.archive .wp-block-post-featured-image,
.blog .wp-block-post-featured-image {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.home .wp-block-post-featured-image img,
.archive .wp-block-post-featured-image img,
.blog .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.wp-block-post-featured-image img {
    max-width: 100% !important;
    height: auto !important;
}

/* 본문 이미지도 동일한 max-width 적용 */
.entry-content .wp-block-image,
.entry-content figure.wp-block-image,
.wp-block-post-content .wp-block-image {
    max-width: 800px !important;
    margin-top: 0.75em !important;
    margin-bottom: 0.75em !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content .wp-block-image img,
.wp-block-post-content .wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
}

/* =====================================================
   모바일 좌우 여백 통일 (2026-07-09)
   koreayo.com과 동일한 16px 좌우 여백 적용
===================================================== */

/* 전체 페이지 좌우 여백 - 모든 디바이스 */
body {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
}

/* 헤더는 전체 너비 유지하되 내부 콘텐츠에 여백 */
.site-header {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
}

/* 푸터도 전체 너비 유지 */
.site-footer {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
}

/* 기존 컨테이너 여백 조정 */
.site-container {
    padding-left: 0;
    padding-right: 0;
}

/* 싱글 포스트 래퍼 여백 제거 (body에서 처리) */
.single-post .single-post-wrapper,
.single-post-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 아카이브/홈 페이지 그리드 */
.posts-grid {
    padding-left: 0;
    padding-right: 0;
}

/* 모바일 추가 조정 */
@media (max-width: 768px) {
    body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .site-header,
    .site-footer {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 데스크탑에서는 기존 레이아웃 유지 */
@media (min-width: 1025px) {
    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .site-header,
    .site-footer {
        margin-left: 0;
        margin-right: 0;
    }
    
    .site-container {
        padding: 0 20px;
    }
}

/* =====================================================
   홈페이지/아카이브 카드 좌우 여백 통일 (2026-07-09)
   싱글 포스트와 동일한 16px 좌우 여백 적용
===================================================== */

/* 홈페이지/아카이브 전체 콘텐츠 영역 */
.home .site-main,
.archive .site-main,
.blog .site-main,
.category .site-main,
.tag .site-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* 포스트 카드 이미지가 카드 안에서 여백 없이 표시 */
.post-card {
    overflow: hidden;
    border-radius: var(--radius);
}

.post-card-image {
    margin: 0;
}

.post-card-image img {
    width: 100%;
    display: block;
}

/* 그리드 레이아웃 여백 조정 */
.posts-grid {
    margin-left: 0;
    margin-right: 0;
}

/* 모바일에서 여백 통일 */
@media (max-width: 768px) {
    .home .site-main,
    .archive .site-main,
    .blog .site-main,
    .category .site-main,
    .tag .site-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 그리드를 1열로, 카드 간격 조정 */
    .posts-grid {
        gap: 24px;
    }
}

/* 태블릿 */
@media (min-width: 769px) and (max-width: 1024px) {
    .home .site-main,
    .archive .site-main,
    .blog .site-main,
    .category .site-main,
    .tag .site-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =====================================================
   좌우 여백 통일 - 최종 수정 (2026-07-09)
   홈페이지/아카이브/싱글 모두 동일한 16px 여백
===================================================== */

/* 모바일: 모든 페이지 좌우 16px */
@media (max-width: 768px) {
    /* site-container 기본 여백 */
    .site-main .site-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 싱글 포스트 래퍼 */
    .single-post-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 홈/아카이브 그리드 - 컨테이너 안에서 추가 여백 없음 */
    .posts-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 포스트 카드 - 카드 자체는 여백 없이 */
    .post-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 태블릿: 20px */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-main .site-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .single-post-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =====================================================
   홈페이지 카드 여백 수정 (2026-07-09) - 블록 테마 대응
   싱글 포스트와 동일한 좌우 여백 적용
===================================================== */

/* 홈페이지/아카이브 포스트 카드 내부 여백 */
.wp-block-post {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 카드 내부 콘텐츠(제목, 발췌문, 날짜 등)에 좌우 여백 */
.wp-block-post .wp-block-post-terms,
.wp-block-post .wp-block-post-title,
.wp-block-post .wp-block-post-excerpt,
.wp-block-post .wp-block-post-date,
.wp-block-post .wp-block-post-author-name {
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
}

/* 카드 이미지는 전체 너비 유지 (디자인 의도) */
.wp-block-post .wp-block-post-featured-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 싱글 포스트 콘텐츠 영역 - 기존 여백 유지 확인 */
.single .entry-content,
.single .wp-block-post-content {
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
}

/* 모바일에서 main 태그 패딩 통일 */
@media (max-width: 768px) {
    main.wp-block-group {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}

/* =====================================================
   홈페이지 전체 콘텐츠 여백 통일 (2026-07-09) - 최종
   이미지 포함 모든 콘텐츠에 좌우 여백 적용
===================================================== */

/* Query Loop 전체에 여백 적용 */
.wp-block-query {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 포스트 목록(ul) 여백 */
.wp-block-post-template {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 개별 카드(li)에 여백 - 이미지 포함 전체 */
.wp-block-post-template > .wp-block-post {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 카드 내부 그룹(배경색 있는 컨테이너) */
.wp-block-post > .wp-block-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 카드 이미지도 좌우 여백 안으로 */
.wp-block-post .wp-block-post-featured-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

/* 카드 이미지 모서리 둥글게 */
.wp-block-post .wp-block-post-featured-image img {
    border-radius: 8px 8px 0 0;
}

/* =====================================================
   홈페이지 그리드 여백 강제 적용 (2026-07-09) - 최최종
   main 태그 패딩이 제대로 적용되도록 overflow 제어
===================================================== */

/* main 태그 - 좌우 패딩 강제 */
main.wp-block-group.has-global-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 그리드 레이아웃이 부모 패딩을 존중하도록 */
.wp-block-post-template.is-layout-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 그리드 아이템(카드)도 부모 안에서 */
.wp-block-post-template > .wp-block-post {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Query 블록 */
.wp-block-query {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 모바일에서 확실히 적용 */
@media (max-width: 768px) {
    main.wp-block-group {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .wp-block-post-template.is-layout-grid {
        gap: 16px !important;
    }
}

/* =====================================================
   싱글 포스트 모바일 좌우 여백 10px (2026-07-09)
===================================================== */

@media (max-width: 768px) {
    /* 싱글 포스트 main 영역 */
    .single main.wp-block-group {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* 싱글 포스트 콘텐츠 영역 */
    .single .wp-block-post-content,
    .single .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =====================================================
   싱글 포스트 모바일 좌우 여백 10px - 강제 적용 (2026-07-09)
===================================================== */

@media (max-width: 768px) {
    /* 더 구체적인 선택자로 인라인 스타일 덮어쓰기 */
    body.single main#wp--skip-link--target.wp-block-group[style] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    body.single main.wp-block-group.has-global-padding {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* =====================================================
   싱글 포스트 이미지-텍스트 간격 축소 - 모바일만 (2026-07-09)
   썸네일, 본문이미지와 텍스트 사이 여백 50% 감소
===================================================== */

@media (max-width: 768px) {
    /* 싱글 포스트: 썸네일 아래 여백 */
    .single .wp-block-post-featured-image {
        margin-top: 0.6em !important;
        margin-bottom: 0.8em !important;
    }

    /* 싱글 포스트: 본문 이미지 위아래 여백 */
    .single .entry-content .wp-block-image,
    .single .entry-content figure.wp-block-image,
    .single .wp-block-post-content .wp-block-image {
        margin-top: 0.8em !important;
        margin-bottom: 0.8em !important;
    }

    /* 싱글 포스트: 문단 여백 축소 */
    .single .entry-content p,
    .single .wp-block-post-content p {
        margin-top: 0.8em !important;
        margin-bottom: 0.8em !important;
    }

    /* 싱글 포스트: H2 위 여백 */
    .single .entry-content h2,
    .single .wp-block-post-content h2 {
        margin-top: 1.2em !important;
        margin-bottom: 0.6em !important;
    }
}