/*
Theme Name: Aesan Theme
Theme URI: https://aesan.kr
Author: Just Whang
Author URI: https://aesan.kr
Description: 애산 김진호 목사 기념 홈페이지를 위한 맞춤형 WordPress 테마. 고전적이면서도 현대적인 디자인으로 한국 근대 기독교 역사를 담았습니다.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aesan-theme
Tags: custom-menu, featured-images, threaded-comments, translation-ready, blog, education, history
*/

/* ===== 기본 리셋 및 설정 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 색상 팔레트 - 따뜻하고 눈에 편안한 색상 */
    --primary-color: #8B7355;      /* 차분한 브라운 */
    --secondary-color: #C8B8A8;    /* 베이지 */
    --accent-color: #A0826D;       /* 따뜻한 갈색 */
    --text-color: #333333;         /* 진한 회색 */
    --text-light: #666666;         /* 중간 회색 */
    --bg-color: #FAF8F5;           /* 아이보리 배경 */
    --white: #FFFFFF;
    --border-color: #E5DDD5;       /* 연한 베이지 테두리 */
    --hover-color: #6B5847;        /* 진한 브라운 */
    
    /* 간격 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    /* 폰트 */
    --font-primary: 'Noto Serif KR', serif;
    --font-secondary: 'Noto Sans KR', sans-serif;
}

body {
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 모바일 가로 스크롤 방지 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

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

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== 컨테이너 ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===== 헤더 ===== */
.site-header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-xs) 0;
}

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.header-top a {
    color: var(--white);
    margin-left: var(--spacing-sm);
}

.header-main {
    padding: var(--spacing-md) 0;
}

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

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-logo h1 {
    margin: 0;
    font-size: 2rem;
    color: var(--primary-color);
}

.site-logo .logo-subtitle {
    font-size: 0.875rem;
    color: var(--text-light);
    font-family: var(--font-secondary);
}

/* ===== 네비게이션 ===== */
.main-navigation {
    background-color: var(--secondary-color);
}

.main-navigation ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation > ul > li {
    position: relative;
}

.main-navigation > ul > li > a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.main-navigation > ul > li > a:hover,
.main-navigation > ul > li.current-menu-item > a {
    background-color: var(--primary-color);
    color: var(--white);
}

/* 드롭다운 메뉴 */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 220px;
    z-index: 999;
}

.main-navigation li:hover > ul {
    display: block;
}

.main-navigation ul ul li {
    border-bottom: 1px solid var(--border-color);
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

.main-navigation ul ul a {
    padding: var(--spacing-sm) var(--spacing-md);
    display: block;
    color: var(--text-color);
    font-size: 0.95rem;
}

.main-navigation ul ul a:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
    padding-left: calc(var(--spacing-md) + 0.5rem);
}

/* 모바일 메뉴 토글 */
.menu-toggle {
    display: none;
    background: none;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    font-size: 1rem;
    border-radius: 4px;
}

/* ===== 메인 콘텐츠 영역 ===== */
.site-content {
    padding: var(--spacing-lg) 0;
}

/* 홈페이지 70:30 레이아웃 */
.home-layout {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: var(--spacing-md);
}

.main-content-area {
    background-color: var(--white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sidebar-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ===== 게시판 스타일 ===== */
.board-list {
    list-style: none;
}

.board-item {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.board-item:hover {
    background-color: var(--bg-color);
}

.board-item-title {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 0.3rem;
}

.board-item-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

.board-item-meta span {
    margin-right: var(--spacing-sm);
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.pagination a,
.pagination span {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--white);
}

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

.pagination a:hover {
    background-color: var(--secondary-color);
}

/* ===== 사이드바 위젯 ===== */
.widget {
    background-color: var(--white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.widget-title {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.widget ul {
    list-style: none;
}

.widget ul li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    color: var(--text-color);
    display: block;
    transition: all 0.2s ease;
}

.widget ul li a:hover {
    color: var(--primary-color);
    padding-left: var(--spacing-xs);
}

/* ===== 로그인 폼 ===== */
.login-form {
    background-color: var(--white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

.login-form input[type="submit"],
.button,
.btn {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.login-form input[type="submit"]:hover,
.button:hover,
.btn:hover {
    background-color: var(--hover-color);
}

/* ===== 푸터 ===== */
.site-footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-lg) 0 var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.footer-widget h3 {
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
}

.footer-widget ul {
    list-style: none;
}

.footer-widget ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-widget a {
    color: rgba(255,255,255,0.8);
}

.footer-widget a:hover {
    color: var(--white);
}

.site-info {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 0.9rem;
}

/* ===== 반응형 디자인 ===== */
@media screen and (max-width: 1024px) {
    .home-layout {
        grid-template-columns: 65% 35%;
    }
    
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    /* 가로 스크롤 방지 */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .container {
        padding: 0 var(--spacing-sm); /* 모바일에서 패딩 축소 */
        max-width: 100%;
    }
    
    /* 모든 콘텐츠 영역이 화면을 넘지 않도록 */
    .main-content-area,
    .single-content,
    .page-main-content,
    .archive-content,
    .search-content,
    .widget {
        padding: var(--spacing-sm);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .main-navigation {
        display: none;
        background-color: var(--secondary-color); /* 연한 베이지 색상 */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        overflow-x: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 그림자 추가로 구분감 */
    }
    
    .main-navigation.toggled {
        display: block;
        overflow-y: auto;
        max-height: calc(100vh - 200px); /* 헤더 높이를 제외한 화면 높이 */
        -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
        padding-bottom: 1rem; /* 하단 여백 추가 */
    }
    
    .main-navigation ul {
        flex-direction: column;
    }
    
    .main-navigation > ul > li > a {
        padding: 0.75rem 1rem; /* 모바일에서 터치하기 쉽도록 패딩 조정 */
        color: var(--text-color); /* 진한 회색 텍스트 */
        border-bottom: 1px solid var(--border-color); /* 구분선 추가 */
    }
    
    .main-navigation > ul > li > a:hover,
    .main-navigation > ul > li.current-menu-item > a {
        background-color: var(--white);
        color: var(--primary-color);
    }
    
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        background-color: rgba(255,255,255,0.3); /* 서브메뉴를 더 밝게 */
        max-height: none; /* 서브메뉴는 제한 없음 */
    }
    
    .main-navigation ul ul a {
        padding: 0.75rem 2rem; /* 서브메뉴 들여쓰기 */
        color: var(--text-color);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .main-navigation ul ul a:hover {
        background-color: var(--white);
        color: var(--primary-color);
    }
    
    .home-layout {
        grid-template-columns: 1fr;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

@media screen and (max-width: 480px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    .container {
        padding: 0 0.5rem; /* 작은 화면에서 패딩 더 축소 */
    }
    
    .header-main .container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .main-navigation.toggled {
        max-height: calc(100vh - 150px); /* 작은 화면에서 더 많은 공간 확보 */
    }
    
    :root {
        --spacing-md: 1rem;
        --spacing-lg: 2rem;
    }
}

/* ===== 유틸리티 클래스 ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }

/* ===== 이미지 스타일 ===== */
.featured-image {
    margin-bottom: var(--spacing-md);
    border-radius: 8px;
    overflow: hidden;
}

.featured-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

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

/* ===== 글 내용 스타일 ===== */
.entry-content {
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: var(--spacing-sm);
}

.entry-content img {
    margin: var(--spacing-md) 0;
    border-radius: 4px;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-style: italic;
    color: var(--text-light);
}

/* ===== 게시판 테이블 스타일 ===== */
.board-table {
    width: 100%;
    max-width: 100%; /* 화면을 넘지 않도록 */
    border-collapse: collapse;
    background-color: var(--white);
    margin: var(--spacing-md) 0;
    overflow-x: auto; /* 필요시 스크롤 */
    display: block; /* 테이블을 블록으로 만들어 overflow 적용 */
}

.board-table thead,
.board-table tbody {
    display: table;
    width: 100%;
}

.board-table tr {
    display: table-row;
}

.board-table th,
.board-table td {
    display: table-cell;
}

.board-table thead {
    background-color: var(--secondary-color);
}

.board-table th {
    padding: var(--spacing-sm);
    text-align: center;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
}

.board-table td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.board-table .col-num {
    width: 60px;
    text-align: center;
}

.board-table .col-title {
    text-align: left;
}

.board-table .col-author {
    width: 120px;
    text-align: center;
}

.board-table .col-date {
    width: 100px;
    text-align: center;
}

.board-table .col-views {
    width: 60px;
    text-align: center;
}

.board-table .board-row:hover {
    background-color: var(--bg-color);
}

.board-table .comment-count {
    color: var(--accent-color);
    font-size: 0.875rem;
}

.board-table .new-badge {
    background-color: var(--accent-color);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    margin-left: 5px;
}

.board-table .has-image {
    margin-left: 5px;
}

.board-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
}

/* ===== 카테고리 그리드 ===== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.category-box {
    background-color: var(--white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.category-box h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.category-box .category-image {
    margin-bottom: var(--spacing-sm);
    border-radius: 4px;
    overflow: hidden;
}

.category-box .category-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-box:hover .category-image img {
    transform: scale(1.05);
}

.category-box ul {
    list-style: none;
    margin-bottom: var(--spacing-sm);
}

.category-box ul li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
}

.category-box ul li:last-child {
    border-bottom: none;
}

/* ===== 반응형 게시판 ===== */
@media screen and (max-width: 768px) {
    /* 테이블을 블록 형태로 변경하여 가로 스크롤 제거 */
    .board-table,
    .board-table thead,
    .board-table tbody,
    .board-table tr,
    .board-table th,
    .board-table td {
        display: block;
        width: 100%;
    }
    
    /* 테이블 헤더 숨기기 */
    .board-table thead {
        display: none;
    }
    
    /* 각 행을 카드 형태로 */
    .board-table tr {
        margin-bottom: var(--spacing-sm);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: var(--spacing-sm);
        background-color: var(--white);
    }
    
    .board-table tr:hover {
        background-color: var(--bg-color);
    }
    
    /* 각 셀 스타일 재정의 */
    .board-table td {
        padding: 0.3rem 0;
        border: none;
        text-align: left !important;
    }
    
    /* 제목은 크게 */
    .board-table .col-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    /* 번호는 작게 우측 상단에 */
    .board-table .col-num {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        font-size: 0.75rem;
        color: var(--text-light);
        width: auto;
    }
    
    .board-table tr {
        position: relative;
    }
    
    /* 작성자, 날짜, 조회수를 한 줄로 */
    .board-table .col-author,
    .board-table .col-date,
    .board-table .col-views {
        display: inline-block !important;
        width: auto;
        font-size: 0.8rem;
        color: var(--text-light);
        margin-right: var(--spacing-sm);
    }
    
    /* 라벨 추가 */
    .board-table .col-author::before {
        content: "작성자: ";
        font-weight: 600;
        color: var(--text-color);
    }
    
    .board-table .col-date::before {
        content: "날짜: ";
        font-weight: 600;
        color: var(--text-color);
    }
    
    .board-table .col-views::before {
        content: "조회: ";
        font-weight: 600;
        color: var(--text-color);
    }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 단일 콘텐츠 레이아웃 ===== */
.content-layout,
.archive-layout,
.search-layout {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: var(--spacing-md);
}

.single-content,
.page-main-content,
.archive-content,
.search-content {
    background-color: var(--white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

@media screen and (max-width: 1024px) {
    .content-layout,
    .archive-layout,
    .search-layout {
        grid-template-columns: 65% 35%;
    }
}

@media screen and (max-width: 768px) {
    .content-layout,
    .archive-layout,
    .search-layout {
        grid-template-columns: 1fr;
    }
    
    .single-sidebar,
    .page-sidebar,
    .archive-sidebar,
    .search-sidebar {
        margin-top: var(--spacing-md);
    }
}

/* ===== 댓글 스타일 ===== */
.comments-area {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--border-color);
}

.comments-title {
    margin-bottom: var(--spacing-md);
}

.comment-list {
    list-style: none;
}

.comment-body {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: 8px;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.comment-author img {
    border-radius: 50%;
}

.comment-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

.comment-content {
    margin: var(--spacing-sm) 0;
}

.comment-reply-link {
    font-size: 0.875rem;
    color: var(--primary-color);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
}

.comment-form textarea {
    min-height: 150px;
}

.comment-form .form-submit input {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.comment-form .form-submit input:hover {
    background-color: var(--hover-color);
}

/* ===== 검색 결과 ===== */
.search-results .search-form {
    margin-bottom: var(--spacing-md);
}

.search-results .page-header {
    margin-bottom: var(--spacing-md);
}

/* ===== 테이블 반응형 래퍼 ===== */
.table-responsive {
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

/* ===== 포스트 네비게이션 ===== */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation .nav-next {
    text-align: right;
}