/* --- Reset & Global --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

body {
    background-color: #f7f8f7;
    font-family: 'Noto Sans KR', sans-serif;
    color: #444;
    word-break: break-all;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* --- Layout --- */
.main { max-width: 1100px; margin: 0 auto; display: flex; padding: 60px 20px; }
.area-main { flex: 1; min-width: 0; margin-right: 50px; }
.area-aside { width: 220px; }

/* --- Header --- */
.header { background-color: #7a9c91; padding: 30px 0; text-align: center; border-bottom: 4px solid rgba(0,0,0,0.05); }
.title-logo a { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; letter-spacing: 6px; color: #fff; text-transform: uppercase; }
.area-gnb { margin-top: 20px; }
.area-gnb ul { display: flex; justify-content: center; gap: 20px; }
.area-gnb ul li a { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }
.area-gnb ul li a:hover { color: #fff; }

/* --- List Area --- */
.list-header { margin-bottom: 30px; border-bottom: 1px solid #7a9c91; padding-bottom: 10px; }
.title-search { font-size: 18px; font-weight: 700; color: #7a9c91; font-family: 'JetBrains Mono'; }
.list-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; }

.poster-card { background: #fff; border: 1px solid #e0e0e0; transition: 0.3s; position: relative; padding-top: 10px; }
.poster-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: #7a9c91; }
.poster-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.poster-thumb { width: 100%; height: 380px; background: #f9f9f9; overflow: hidden; padding: 20px; display: flex; justify-content: center; align-items: center; }
.poster-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(3px 3px 10px rgba(0,0,0,0.15)); }
.poster-thumb .no-image { display: none; }
.poster-thumb:not(:has(img:not(.no-image))) .no-image { display: block !important; opacity: 0.5; max-width: 140%; max-height: 140%; }

.poster-info { padding: 20px; font-family: 'Gaegu', cursive; }
.poster-title { display: block; font-size: 20px; color: #333; margin-bottom: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }

.poster-summary-box {
    font-size: 16px; color: #555; line-height: 1.6 !important;
    height: 130px !important; overflow: hidden; margin-top: 10px; display: block;
}
.list-label { color: #7a9c91 !important; font-family: 'Noto Sans KR', sans-serif !important; font-weight: 500 !important; font-size: 14px !important; min-width: 60px; display: inline-block; }

.poster-footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #f0f0f0; text-align: right; }
.poster-date { font-family: 'JetBrains Mono'; font-size: 11px; color: #bbb; }

/* --- Post View --- */
.reading-journal-page { background: #fff; border: 1px solid #e0e0e0; position: relative; padding-top: 10px; }
.reading-journal-page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35px; background-color: #7a9c91; }
.journal-inner { padding: 50px 35px; background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px); background-size: 25px 25px; }
.view-content { font-family: 'Gaegu', cursive; font-size: 19px; line-height: 1.8; color: #333; }
/* 리뷰 내용 박스 (라벨 제외한 실제 텍스트 영역) */
.journal-body > div:first-child > div, 
.journal-body .review {
    font-family: 'NanumSquareRound', sans-serif !important; /* 폰트 변경 */
    font-size: 16px; /* 가독성을 위한 서체 크기 최적화 */
    line-height: 1.8; 
    letter-spacing: 0.1em; /* 💡 글자 사이 간격 미세하게 추가 */
}
.journal-body > div:first-child,
.journal-body .review-div { 
    background: #fbfdfc !important; /* 💡 격자가 비치지 않는 불투명한 연민트/흰색 계열로 변경 */
    padding: 25px; 
    border-radius: 10px; 
    border: 1px dashed #7a9c91; 
    margin-bottom: 30px; 
}

/* 상세 페이지 레이아웃 */
.journal-header { display: flex; gap: 30px; margin-bottom: 40px; align-items: flex-start; }
.journal-cover { flex: 0 0 250px; min-width: 250px; }
.journal-info { flex: 1; font-family: 'Gaegu', cursive; }
.journal-info h2 { font-size: 30px; border-bottom: 2px solid #7a9c91; padding-bottom: 10px; margin-top: 0; }
.journal-info p { margin: 8px 0; }

.journal-body { }
.journal-body > div:first-child { background: rgba(122, 156, 145, 0.05); padding: 25px; border-radius: 10px; border: 1px dashed #7a9c91; margin-bottom: 30px; }
.journal-body h3 { background: #7a9c91; color: #fff; display: inline-block; padding: 2px 15px; font-size: 18px; margin-bottom: 15px; border-radius: 3px; }
.journal-body > div:first-child > div { line-height: 1.8; }
.journal-body > div:last-child { padding: 0 10px; }
.journal-body > div:last-child h3 { background: #333; }

.quote-list { font-family: 'Gaegu', cursive; }
.quote-list > div { margin-bottom: 15px; padding-left: 20px; border-left: 3px solid #7a9c91; line-height: 1.6; }
.quote-list > div > span { display: block; font-size: 14px; color: #7a9c91; font-weight: bold; margin-bottom: 5px; }
.quote-list > div > div { }
/* IMPRESSIVE 라벨이나 소제목이 손글씨체로 유지되도록 명시 */
.quote-list > div > span { 
    display: block; 
    font-family: 'Gaegu', cursive; /* 라벨은 기존 손글씨 그대로! */
    font-size: 16px; 
    color: #7a9c91; 
    font-weight: bold; 
    margin-bottom: 5px; 
}
/* 실제 인상 깊은 구절 내용 텍스트 */
.quote-list > div > div { 
    font-family: 'NanumSquareRound', sans-serif; /* 내용만 나눔스퀘어로 변경 */
    font-size: 16px; 
    line-height: 1.6;
    letter-spacing: 0.1em; /* 💡 글자 사이 간격 미세하게 추가 */
}
/* 인상 깊은 구절 개별 문장 박스 */
.quote-list > div { 
    margin-bottom: 15px; 
    padding: 12px 20px; /* 💡 위아래 패딩을 조금 더 주어 배경 영역을 확보합니다 */
    border: 1px solid #7a9c9130;
    border-left: 3px solid #7a9c91; 
    line-height: 1.6; 
    background-color: #fff; /* 💡 글자 뒤쪽의 격자무늬를 완벽히 가려주는 흰색 배경 추가 */
    border-radius: 0 4px 4px 0; /* 오른쪽 모서리만 살짝 둥글게 처리 (선택사항) */
}

/* --- Sidebar --- */

.quote-list > div { margin-bottom: 15px; padding-left: 20px; border-left: 3px solid #7a9c91; line-height: 1.6; }
.quote-list > div > span { display: block; font-size: 14px; color: #7a9c91; font-weight: bold; margin-bottom: 5px; }
.quote-list > div > div { }

/* --- Sidebar --- */
.box-sidebar { background: #fff; padding: 25px 20px; margin-bottom: 30px; border: 1px solid #eee; border-radius: 4px; }
.profile-img { width: 70px; height: 70px; margin: 0 auto 15px; border-radius: 50%; background-size: cover; border: 2px solid #7a9c91; }
.profile-nickname { text-align: center; font-weight: 700; font-size: 18px; color: #333; margin-bottom: 8px; font-family: 'JetBrains Mono', sans-serif; }
.profile-desc { text-align: center; font-size: 13px; color: #888; margin-bottom: 15px; line-height: 1.6; font-family: 'Noto Sans KR', sans-serif; word-break: keep-all; }

/* INDEX 카테고리 고정 (항상 펼침) */
.aside-title { 
    font-size: 14px; font-weight: 500; color: #7a9c91; text-transform: uppercase; letter-spacing: 2px; 
    border-bottom: 1px solid #eee; padding-bottom: 12px; 
    margin-bottom: 15px;
    font-family: 'JetBrains Mono', sans-serif; 
}

/* 대분류(LITERATURE 등) 스타일 */
.category_list > li { 
    margin-bottom: 8px !important; 
    position: relative;
    padding-left: 0;
}

.category_list > li > a { 
    font-size: 14px; 
    font-weight: 500; 
    color: #444; 
    display: block !important;
    padding: 5px 0 5px 20px;
    position: relative;
}

/* 대분류 앞 체크박스(■) 추가 */
.category_list > li > a::before {
    content: '■';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #7a9c91;
    font-size: 14px;
    line-height: 1;
}

/* 소분류 영역 - 항상 노출 */
.category_list .sub_category_list { 
    display: block !important; 
    padding: 6px 0 4px 12px; 
}

.category_list .sub_category_list li { 
    position: relative; 
    padding-left: 20px; 
    margin-bottom: 10px !important;
    display: flex; 
    align-items: center; 
}

/* 소분류 체크박스(□) 위치 정렬 */
.category_list .sub_category_list li::before { 
    content: '□'; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #7a9c91; 
    font-size: 12px; 
    line-height: 1;
}

.category_list .sub_category_list li a { 
    font-size: 13px; 
    font-weight: 500;
    color: #777; 
}

.category_list .sub_category_list li a:hover { color: #7a9c91; text-decoration: none; }
.category_list .sub_category_list li .selected { color: #7a9c91 !important; font-weight: 700; }
.category_list .sub_category_list li .selected::before { content: '■'; }
.category_list .c_cnt { font-size: 11px; color: #ccc; font-family: 'JetBrains Mono'; margin-left: 4px; }

/* --- Etc --- */
.admin-menu { display: flex; gap: 5px; justify-content: center; }
.btn-admin { padding: 4px 10px; border-radius: 4px; font-size: 11px; border: 1px solid #eee; color: #999; font-family: 'JetBrains Mono'; }
.btn-admin.write { background: #7a9c91; color: #fff; border: none; }
#footer { text-align: center; padding: 50px 0; color: #bbb; font-size: 12px; letter-spacing: 1px; }

/* --- 모바일 반응형 --- */
@media (max-width: 900px) { 
    .main { flex-direction: column; padding: 30px 15px; } 
    .area-aside { width: 100%; margin-top: 40px; }
    .area-main { margin-right: 0; }
    
    /* 모바일 상세 페이지 - 레이아웃만 세로로 변경 */
    .journal-header {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .journal-cover {
        flex: none !important;
        min-width: 0 !important;
    }
    
    /* 모바일에서도 journal-body 스타일 유지 */
    .journal-inner {
        padding: 30px 20px;
    }
}

/* --- Tag Cloud & Guestbook --- */
.title-page {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    color: #7a9c91;
    border-bottom: 2px solid #7a9c91;
    padding-bottom: 15px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

/* 태그 페이지 스타일 */
.box-tag { padding: 30px; background: #fff; border: 1px solid #e0e0e0; }
.list-tag { display: flex; flex-wrap: wrap; gap: 10px; }
.list-tag li a {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    background: #f9f9f9;
    font-family: 'Noto Sans KR';
    transition: 0.2s;
}
.list-tag li a:hover {
    background: #7a9c91;
    color: #fff;
    border-color: #7a9c91;
}

/* 방명록 스타일 */
.box-guest { padding: 30px; background: #fff; border: 1px solid #e0e0e0; }

.guest-form { margin-bottom: 40px; padding: 20px; background: #f7f8f7; border-radius: 8px; }
.guest-form .input-wrap { display: flex; gap: 10px; margin-bottom: 10px; }
.guest-form input[type="text"], 
.guest-form input[type="password"] {
    padding: 10px; border: 1px solid #ddd; flex: 1; outline: none; font-family: 'Noto Sans KR';
}
.guest-form textarea {
    width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd; resize: none; outline: none;
    font-family: 'Noto Sans KR'; margin-bottom: 10px;
}
.guest-form .btn-submit {
    background: #7a9c91; color: #fff; border: none; padding: 10px 25px; cursor: pointer;
    font-family: 'Gaegu'; font-size: 16px; border-radius: 4px; transition: 0.3s;
}
.guest-form .btn-submit:hover { background: #66857a; }

/* 방명록 리스트 */
.guest-item { border-bottom: 1px solid #eee; padding: 20px 0; }
.guest-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.guest-name { color: #333; font-weight: 700; }
.guest-date { color: #bbb; font-family: 'JetBrains Mono'; font-size: 12px; }
.guest-control a { font-size: 11px; color: #999; margin-left: 5px; }
.guest-content { font-family: 'Gaegu'; font-size: 16px; line-height: 1.6; color: #444; }

/* 대댓글(답글) */
.guest-reply { margin-top: 15px; padding: 15px; background: #f9f9f9; border-left: 3px solid #7a9c91; margin-left: 20px; }

/* --- Comment Area (상세페이지 댓글) --- */
.comment-area { 
    margin-top: 60px; 
    padding: 40px 35px;
    border-top: 2px dashed #7a9c91; 
    max-width: 100%;
    box-sizing: border-box; 
}

.comment-title { 
    font-family: 'JetBrains Mono'; 
    font-size: 18px; 
    color: #7a9c91; 
    font-weight: 700; 
    letter-spacing: 1px; 
}
.comment-title em { 
    color: #ccc; 
    font-style: normal; 
    margin-left: 5px; 
    font-size: 14px;
}

/* 댓글 리스트 */
.comment-list { margin-bottom: 40px; }
.comment-item { padding: 20px 0; border-bottom: 1px solid #eee; }

/* 댓글 정보 */
.comment-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comment-name { font-weight: 700; color: #333; font-size: 15px; }
.comment-date { font-family: 'JetBrains Mono'; font-size: 11px; color: #bbb; }
.comment-control a { font-size: 11px; color: #999; margin-left: 5px; transition: 0.2s; }
.comment-control a:hover { color: #7a9c91; }

/* 댓글 본문 */
.comment-content { 
    font-family: 'Gaegu', cursive; 
    font-size: 16px; 
    line-height: 1.6; 
    color: #444; 
}

/* 대댓글 (답글) 스타일 */
.reply-list { margin-top: 15px; }
.reply-item { 
    padding: 15px; 
    background: rgba(122, 156, 145, 0.05); 
    border-left: 3px solid #7a9c91; 
    margin-left: 20px; 
    border-radius: 0 4px 4px 0; 
}

/* --- [수정된 부분] 댓글 작성 폼 --- */
.comment-form { 
    padding: 25px; 
    background: #f7f8f7; 
    border-radius: 8px; 
    border: 1px solid #eee; 
}

/* 입력창과 버튼 사이 간격 */
.comment-form .form-row { margin-bottom: 15px; }
/* 마지막 줄(버튼)은 아래 여백 제거 */
.comment-form .form-row:last-child { margin-bottom: 0; }

/* 텍스트 영역 */
.comment-form .input-comment {
    width: 100%; 
    height: 100px; 
    padding: 15px; 
    border: 1px solid #ddd;
    resize: none; 
    outline: none; 
    font-family: 'Gowun Dodum', 'Noto Sans KR'; /* 본문과 동일한 폰트 적용 */
    font-size: 15px;
    border-radius: 4px;
    background: #fff;
    transition: 0.3s;
}
.comment-form .input-comment:focus { border-color: #7a9c91; }

/* 하단 영역 (자물쇠 + 버튼) 우측 정렬 */
.bottom-row {
    display: flex;
    justify-content: flex-end; /* 오른쪽 끝으로 보냄 */
    align-items: center;
}

/* 자물쇠와 버튼을 묶는 그룹 */
.right-group {
    display: flex;
    align-items: center;
    gap: 15px; /* 자물쇠와 버튼 사이 간격 */
}

/* 비밀글 체크박스 (자물쇠) 디자인 */
.secret-check {
    position: relative;
    display: flex;
    align-items: center;
}

/* 실제 체크박스는 숨김 */
.input-secret {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

/* 자물쇠 아이콘 라벨 */
.secret-check label {
    cursor: pointer;
    color: #ccc; /* 체크 안 됐을 때: 회색 */
    transition: 0.3s;
    display: flex;
    align-items: center;
}

/* 체크됐을 때 자물쇠 색상 변경 (민트색) */
.input-secret:checked + label {
    color: #7a9c91; 
}

/* 마우스 올렸을 때 */
.secret-check label:hover {
    color: #999;
}

/* 댓글 작성 버튼 */
.comment-form .btn-submit {
    background: #7a9c91; 
    color: #fff; 
    border: none; 
    padding: 8px 20px;
    cursor: pointer; 
    font-family: 'Gaegu'; 
    font-size: 18px; 
    border-radius: 4px;
    transition: 0.3s;
}
.comment-form .btn-submit:hover { background: #66857a; }

.tt_box_namecard { margin-top: 0 !important; }

/* --- Pagination --- */
.pagination { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-top: 60px; 
    padding-top: 30px; 
    border-top: 2px dashed #7a9c91; 
    font-family: 'JetBrains Mono', monospace; 
}
.pagination .page-nums { 
    display: flex; 
    gap: 8px; 
    margin: 0 20px; 
}
.pagination a.num, 
.pagination .selected { 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    font-size: 14px; 
    color: #888; 
    transition: all 0.3s ease; 
}
.pagination a.num:hover { 
    color: #7a9c91; 
    background: rgba(122, 156, 145, 0.1); 
    font-weight: 700; 
}
/* 현재 보고 있는 페이지 번호 스타일 */
.pagination .selected { 
    background: #7a9c91; 
    color: #fff; 
    font-weight: 700; 
    box-shadow: 0 4px 10px rgba(122, 156, 145, 0.3); 
}
/* 이전/다음 버튼 스타일 */
.pagination .prev, 
.pagination .next { 
    color: #7a9c91; 
    font-weight: 700; 
    font-size: 13px; 
    letter-spacing: 1px; 
    padding: 6px 14px; 
    border-radius: 20px; 
    border: 1px solid transparent; 
    transition: 0.3s; 
    cursor: pointer;
}
.pagination .prev:hover, 
.pagination .next:hover { 
    border-color: #7a9c91; 
    background: rgba(122, 156, 145, 0.05); 
}

/* =========================================================
   [추가] 기본 에디터 전용 자동 스타일링 & SEO 최적화 CSS
   (기존 글과 100% 동일한 디자인, 폰트, 색상 유지)
   ========================================================= */

/* 1. 검색엔진 및 상단 한줄 요약용 도입부 (모눈종이 위 손글씨 감성) */
.seo-intro {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 15px !important;
    color: #444 !important;
    background: #ffffff !important;
    border: none !important;
    border-left: 4px solid #7a9c91 !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 16px 20px !important;
    margin-top: 0px !important;
    margin-bottom: 50px !important; /* 아래쪽 표지/제목 영역과의 간격을 확실하게 밀어냄 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    line-height: 1.7 !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    clear: both !important;
}

/* 2. DESCRIPTION 박스 (사탄탱고의 그라데이션 박스 완벽 재현) */
.journal-body .box-description {
    margin-bottom: 30px !important;
    padding: 25px 30px !important;
    background: linear-gradient(135deg, rgba(122,156,145,0.12) 0%, rgba(255,255,255,0.85) 100%) !important;
    border-radius: 10px !important;
    border: none !important;
    border-left: 4px solid #7a9c91 !important;
}
.journal-body .box-description p,
.journal-body .box-description div {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 16px !important;
    line-height: 2 !important;
    letter-spacing: 0.1em !important;
    color: #444 !important;
}

/* 3. REVIEW 박스 (연민트 불투명 점선 박스 완벽 재현) */
.journal-body .box-review {
    background: #fbfdfc !important;
    padding: 25px !important;
    border-radius: 10px !important;
    border: 1px dashed #7a9c91 !important;
    margin-bottom: 30px !important;
}
.journal-body .box-review p,
.journal-body .box-review div {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.1em !important;
    color: #333 !important;
    margin-bottom: 12px;
}

/* 4. IMPRESSIVE 영역 & 기본 에디터 '인용구' 연동 */
.journal-body .box-impressive {
    background: transparent !important;
    border: none !important;
    padding: 0 10px !important;
}
.journal-body .box-impressive h3 {
    background: #333 !important;
}

/* 기본 에디터에서 [인용구(따옴표)] 버튼을 누르면 기존 quote-list 디자인이 그대로 적용됨 */
.journal-body blockquote[data-ke-style="style2"],
.journal-body blockquote[data-ke-style="style3"],
.journal-body .quote-item {
    margin: 0 0 15px 0 !important;
    padding: 12px 20px !important;
    border: 1px solid #7a9c9130 !important;
    border-left: 3px solid #7a9c91 !important;
    background-color: #fff !important;
    border-radius: 0 4px 4px 0 !important;
    font-style: normal !important;
    text-align: left !important;
}
.journal-body blockquote[data-ke-style="style2"] p,
.journal-body blockquote[data-ke-style="style3"] p,
.journal-body .quote-item p {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.1em !important;
    color: #333 !important;
    margin: 4px 0 !important;
}
/* 인용구 안에서 '굵게(Ctrl+B)' 처리한 글자는 자동으로 손글씨 라벨(vol.1, 제사 등)로 변환! */
.journal-body blockquote b,
.journal-body blockquote strong,
.journal-body .quote-list p > b:first-child,
.journal-body .quote-list p > strong:first-child {
    display: block;
    font-family: 'Gaegu', cursive !important;
    font-size: 16px !important;
    color: #7a9c91 !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
    letter-spacing: 0 !important;
}

/* 5. '💬 내 소감' 민트색 점선 박스 자동 디자인 (퇴마록 외전 스타일 완벽 재현) */
.my-thought-box {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    line-height: 1.6 !important;
    background-color: #eef4f1 !important;
    border: 1px dashed #7a9c91 !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    margin-top: 10px !important;
}
.my-thought-box b,
.my-thought-box strong {
    display: inline !important;
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
}