/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

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

/* 기본 폰트 및 여백 초기화 (스코핑) */
.single-post-wrapper {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.7;
    color: #333;
    background: white; /* 이 컨테이너의 배경은 흰색 */
}

.single-post-wrapper *,
.single-post-wrapper *::before,
.single-post-wrapper *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 포스트 헤더 */
.single-post-wrapper .post-header {
    padding: 60px 40px 40px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.single-post-wrapper .post-category a {
    display: inline-block;
    background: #BBC9A3;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.single-post-wrapper .post-category a:hover {
    background: #a8b694;
    text-decoration: none;
    color: white;
}

.single-post-wrapper .post-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 25px;
    line-height: 1.4;
}

.single-post-wrapper .post-meta {
    display: flex;
    justify-content: center;
    gap: 30px;
    color: #666;
    font-size: 0.9rem;
}

.single-post-wrapper .post-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-post-wrapper .post-meta-icon {
    font-size: 1rem;
    color: #BBC9A3;
}

/* Featured Image */
.single-post-wrapper .post-featured-image {
    width: 100%;
    height: 400px;
    background-color: #f0f3f5;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1.1rem;
    border-bottom: 1px solid #f0f0f0;
}

/* 포스트 콘텐츠 */
.single-post-wrapper .post-content { padding: 50px 40px; }
.single-post-wrapper .post-content h2 { font-size: 1.6rem; font-weight: 600; color: #2c3e50; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 2px solid #BBC9A3; }
.single-post-wrapper .post-content h3 { font-size: 1.3rem; font-weight: 500; color: #34495e; margin: 30px 0 15px; }
.single-post-wrapper .post-content p { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.8; color: #444; }
.single-post-wrapper .post-content ul, .single-post-wrapper .post-content ol { margin: 20px 0; padding-left: 25px; }
.single-post-wrapper .post-content li { margin-bottom: 8px; font-size: 1.05rem; color: #444; }
.single-post-wrapper .post-content blockquote { background: #f8f9fa; border-left: 4px solid #BBC9A3; padding: 20px 25px; margin: 30px 0; font-style: italic; color: #555; }
.single-post-wrapper .post-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }

/* 포스트 태그 */
.single-post-wrapper .post-tags { padding: 30px 40px; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.single-post-wrapper .post-tags-title { font-size: 0.9rem; color: #666; margin-bottom: 15px; font-weight: 500; }
.single-post-wrapper .post-tags-list { display: flex; flex-wrap: wrap; gap: 10px; }
.single-post-wrapper .post-tags a { background: #f8f9fa; color: #666; padding: 8px 15px; border-radius: 20px; font-size: 0.85rem; text-decoration: none; transition: all 0.3s ease; border: 1px solid #e9ecef; }
.single-post-wrapper .post-tags a:hover { background: #BBC9A3; color: white; border-color: #BBC9A3; }

/* 소셜 공유 */
.single-post-wrapper .post-share { padding: 30px 40px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.single-post-wrapper .post-share-title { font-size: 1rem; color: #333; margin-bottom: 20px; font-weight: 500; }
.single-post-wrapper .post-share-buttons { display: flex; justify-content: center; gap: 15px; }
.single-post-wrapper .share-button { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.3rem; transition: all 0.3s ease; border: 2px solid transparent; }
.single-post-wrapper .share-button.facebook { background: #1877f2; color: white; }
.single-post-wrapper .share-button.twitter { background: #1da1f2; color: white; }
.single-post-wrapper .share-button.kakao { background: #fee500; color: #000; }
.single-post-wrapper .share-button.naver { background: #03C75A; color: white; }
.single-post-wrapper .share-button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* 포스트 네비게이션 */
.single-post-wrapper .post-navigation { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #f0f0f0; }
.single-post-wrapper .post-navigation .nav-links { display: contents; } /* a 태그가 grid의 자식이 되도록 */
.single-post-wrapper .post-navigation a { padding: 30px 40px; text-decoration: none; color: #333; transition: all 0.3s ease; }
.single-post-wrapper .post-navigation .nav-previous { border-right: 1px solid #f0f0f0; }
.single-post-wrapper .post-navigation a:hover { background: #f8f9fa; color: #BBC9A3; }
.single-post-wrapper .post-navigation .post-nav-label { font-size: 0.85rem; color: #666; margin-bottom: 8px; display: block; }
.single-post-wrapper .post-navigation .post-nav-title { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.single-post-wrapper .post-navigation .nav-next { text-align: right; }

/* 관련 포스트 */
.single-post-wrapper .related-posts { padding: 50px 40px; }
.single-post-wrapper .related-posts-title { font-size: 1.4rem; font-weight: 600; color: #2c3e50; margin-bottom: 30px; text-align: center; }
.single-post-wrapper .related-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.single-post-wrapper .related-post-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; text-decoration: none; color: inherit; }
.single-post-wrapper .related-post-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.single-post-wrapper .related-post-image { width: 100%; height: 150px; background-color: #f0f3f5; background-size: cover; background-position: center; }
.single-post-wrapper .related-post-content { padding: 20px; }
.single-post-wrapper .related-post-category { font-size: 0.8rem; color: #BBC9A3; font-weight: 500; margin-bottom: 8px; }
.single-post-wrapper .related-post-title { font-size: 1rem; font-weight: 500; color: #333; line-height: 1.5; margin-bottom: 10px; }
.single-post-wrapper .related-post-date { font-size: 0.85rem; color: #666; }

/* 댓글 섹션 */
.single-post-wrapper .comments-area { padding: 50px 40px; background: #f8f9fa; }
.single-post-wrapper .comments-title { font-size: 1.4rem; font-weight: 600; color: #2c3e50; margin-bottom: 30px; }
.single-post-wrapper .comment-form { background: white; padding: 30px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.single-post-wrapper .comment-form-title { font-size: 1.1rem; font-weight: 500; color: #333; margin-bottom: 20px; }
.single-post-wrapper .comment-form-group { margin-bottom: 20px; }
.single-post-wrapper .comment-form-input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-family: 'Noto Sans KR', sans-serif; transition: border-color 0.3s ease; }
.single-post-wrapper .comment-form-input:focus { outline: none; border-color: #BBC9A3; box-shadow: 0 0 0 3px rgba(187, 201, 163, 0.1); }
.single-post-wrapper .comment-form-textarea { min-height: 120px; resize: vertical; }
.single-post-wrapper .comment-form .submit { background: #BBC9A3; color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.single-post-wrapper .comment-form .submit:hover { background: #a8b694; transform: translateY(-1px); }

/* 반응형 */
@media (max-width: 768px) {
    .single-post-wrapper .post-header { padding: 40px 20px 30px; }
    .single-post-wrapper .post-title { font-size: 1.8rem; }
    .single-post-wrapper .post-meta { flex-direction: column; gap: 10px; }
    .single-post-wrapper .post-content { padding: 40px 20px; }
    .single-post-wrapper .post-content h2 { font-size: 1.4rem; }
    .single-post-wrapper .post-tags,
    .single-post-wrapper .post-share,
    .single-post-wrapper .related-posts,
    .single-post-wrapper .comments-area { padding: 30px 20px; }
    .single-post-wrapper .post-navigation { grid-template-columns: 1fr; }
    .single-post-wrapper .post-navigation .nav-previous { border-right: none; border-bottom: 1px solid #f0f0f0; }
    .single-post-wrapper .post-navigation a { padding: 20px; }
    .single-post-wrapper .post-navigation .nav-next { text-align: left; }
    .single-post-wrapper .related-posts-grid { grid-template-columns: 1fr; }
    .single-post-wrapper .post-share-buttons { gap: 10px; }
    .single-post-wrapper .share-button { width: 45px; height: 45px; font-size: 1.1rem; }
}