/*
Theme Name: Fast My Style
Author: Gemini Partner
Description: 네이버 블로그 모바일 스타일의 초경량 워드프레스 테마 (최적화 완료)
Version: 1.2
*/

/* 1. 기본 리셋 & 공통 폰트 설정 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;
    font-size: 16px;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* 2. 레이아웃 컨테이너 (가독성 최적화 폭 700px) */
.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. 헤더 영역 (로고 + 검색창) */
.site-header { padding: 20px 0 10px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; }
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.site-title { font-size: 1.4rem; font-weight: bold; margin: 0; }
.custom-logo-link img { max-height: 50px; width: auto; }

/* 4. 메인 메뉴 (PC & 모바일 가로 스크롤 통합) */
/* 이 코드가 들어가 있어야 메뉴가 가로로 한 줄로 나옵니다 */
.main-navigation ul {
    display: flex;       /* 가로 나열 */
    flex-wrap: nowrap;   /* 줄바꿈 절대 금지 */
    list-style: none;
    gap: 25px;           /* 메뉴 사이 간격 */
}

.main-navigation li {
    flex: 0 0 auto;      /* 항목 크기 고정 */
}

.main-navigation li a {
    white-space: nowrap; /* 글자 줄바꿈 금지 (세로로 안 쪼개짐) */
    font-weight: bold;
}

/* 모바일 스크롤 설정 */
@media (max-width: 480px) {
    .main-navigation {
        overflow-x: auto; /* 옆으로 밀기 허용 */
        -webkit-overflow-scrolling: touch;
    }
}

/* 5. 본문 공통 스타일 (.entry-content) */
.entry-content { font-size: 17px; line-height: 1.8; word-break: break-word; }

/* 제목 (H2, H3, H4) */
.entry-content h2 {
    font-size: 22px; font-weight: 700; margin: 40px 0 20px;
    padding-bottom: 10px; border-bottom: 1px solid #ddd;
}
.entry-content h3 {
    font-size: 19px; font-weight: 700; color: #000000; /* 오렌지 포인트 */
    margin: 35px 0 15px; padding-left: 15px;
    border-left: 5px solid #666; /* 진회색 세로선 */
}
.entry-content h4 { font-size: 17px; font-weight: 600; color: #555; margin: 25px 0 10px; }

/* 리스트 계층 구조 */
.entry-content ul, .entry-content ol { margin: 20px 0 20px 30px; padding: 0; }
.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }
.entry-content li { margin-bottom: 10px; }
.entry-content ul ul, .entry-content ol ol, .entry-content ul ol, .entry-content ol ul {
    margin: 10px 0 10px 25px; /* 하위 리스트 추가 들여쓰기 */
}

/* 링크 스타일 */
.entry-content a { color: #0066cc; text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: #003366; text-decoration: none; }

/* 본문 이미지 & 캡션 */
.entry-content img {
    margin: 30px auto;
    border-radius: 8px; /* 둥근 모서리 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.entry-content figcaption {
    font-size: 13px; color: #888; text-align: center;
    margin-top: -20px; margin-bottom: 30px;
}

/* 표 (Table) & 인용구 */
.entry-content table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 15px; }
.entry-content th { background: #f9f9f9; font-weight: bold; border-top: 2px solid #333; border-bottom: 1px solid #ccc; padding: 12px; }
.entry-content td { border-bottom: 1px solid #eee; padding: 12px; }
.entry-content blockquote { margin: 30px 0; padding: 20px; background: #f9f9f9; border-left: 5px solid #ccc; font-style: italic; }

/* 6. 글 목록 (Index/Archive) */
.post-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 20px 0; border-bottom: 1px solid #f1f3f5;
}
.post-text { flex: 1; padding-right: 20px; }
.post-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.post-excerpt { font-size: 14px; color: #888; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-thumbnail { width: 100px; height: 100px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* 7. 페이지네이션 */
.pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.pagination .page-numbers.current { background: #333; color: #fff; border-color: #333; }

/* 8. 모바일 반응형 대응 */
@media (max-width: 480px) {
    .header-container { flex-direction: column; align-items: flex-start; gap: 15px; }
    .header-search, .search-form { width: 100%; }
    .search-field { flex: 1; }
    .post-title { font-size: 16px; }
    .post-thumbnail { width: 80px; height: 80px; }
}

/* =========================================
   15. 댓글 영역 (Comments) 디자인
   ========================================= */
.comment-list .comment {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f9f9f9;
}

/* 댓글 작성자 정보 */
.comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}
.comment-author .avatar {
    border-radius: 50%; /* 프로필 사진 동그랗게 */
}
.comment-metadata {
    font-size: 12px;
    color: #999;
}

/* 댓글 본문 */
.comment-content {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    padding-left: 50px; /* 프로필 사진 너비만큼 들여쓰기 */
}

/* 댓글 쓰기 버튼 */
.submit-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}
.submit-btn:hover { background: #000; }