/* =================================================================== */
/* 1. CSS 변수 및 기본 스타일 (다크 모드 핵심)
/* =================================================================== */
:root {
    /* 라이트 모드 색상 (기본값) */
    --bg-color: #f4f4f4;
    --card-bg-color: #ffffff;
    --card-bg-hover: #f9f9f9;
    --text-color: #333333;
    --text-secondary-color: #777777;
    --border-color: #dddddd;
    --border-strong-color: #333333;
    --link-color: #007bff;
    --button-bg-color: #f4f4f4;
    --button-border-color: #dddddd;
    --button-text-color: #333333;
    --success-color: #4CAF50;
    --shadow-color: rgba(0, 0, 0, 0.05);
}

/* ▼▼▼▼▼ 이 부분을 추가하세요 ▼▼▼▼▼ */

html.dark-mode {
    /* 다크 모드일 때의 색상 값들 */
    --bg-color: #1a1a1a;                  /* 어두운 배경 */
    --card-bg-color: #2c2c2c;              /* 어두운 카드 배경 */
    --card-bg-hover: #3a3a3a;              /* 어두운 카드 호버 */
    --text-color: #e0e0e0;                /* 밝은 텍스트 */
    --text-secondary-color: #a0a0a0;       /* 밝은 보조 텍스트 */
    --border-color: #444444;              /* 어두운 경계선 */
    --border-strong-color: #e0e0e0;        /* 밝은 강조 경계선 */
    --link-color: #64b5f6;                /* 밝은 링크 색상 */
    --button-bg-color: #3c3c3c;            /* 어두운 버튼 배경 */
    --button-border-color: #555555;        /* 어두운 버튼 경계선 */
    --button-text-color: #e0e0e0;          /* 밝은 버튼 텍스트 */
    --success-color: #66bb6a;              /* 밝은 성공 색상 */
    --shadow-color: rgba(0, 0, 0, 0.4);   /* 어두운 그림자 */
}


body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

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

/* =================================================================== */
/* 2. 헤더 (Header)
/* =================================================================== */
header {
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color);
}
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.header-left img { height: 40px; }
.header-left h1 { margin: 0; font-size: 24px; white-space: nowrap; }
.header-left h1 a { color: var(--text-color); text-decoration: none; }
.header-right { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 15px; }
.header-right .user-info span { font-weight: bold; }
.login-container { position: relative; }
.login-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 10px;
    width: 280px; background-color: var(--card-bg-color);
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 20px; box-shadow: 0 5px 15px var(--shadow-color);
    z-index: 1000;
}
.login-dropdown form { display: flex; flex-direction: column; gap: 12px; }
.login-dropdown input {
    width: 100%; padding: 10px; box-sizing: border-box;
    border: 1px solid var(--border-color); border-radius: 4px;
    font-size: 14px; background-color: var(--bg-color); color: var(--text-color);
}
.login-dropdown .login-submit-button { background-color: var(--success-color); color: white; border: none; }
.login-dropdown .register-button { background-color: var(--button-bg-color); text-align: center; }
#loginMessage { color: red; font-size: 12px; margin-top: 10px; text-align: center; }

/* =================================================================== */
/* 3. 공용 버튼 (Common Buttons)
/* =================================================================== */
.custom-button {
    display: inline-block; padding: 6px 12px; font-size: 13px;
    text-align: center; text-decoration: none; color: var(--button-text-color);
    background-color: var(--button-bg-color); border: 1px solid var(--button-border-color);
    border-radius: 4px; cursor: pointer; 
}
.custom-button:hover { background-color: var(--card-bg-hover); border-color: #ccc; text-decoration: none; }

/* =================================================================== */
/* 4. 메인 레이아웃 (Main Layout) - PC 환경 최종
/* =================================================================== */
.container {
    width: 96%;
    max-width: 1400px;
    margin: 20px auto;
}

.top-section {
    display: grid; /* ★★★ 이 속성이 있어야 Grid 레이아웃이 활성화됩니다. ★★★ */
    /* ★★★ 각 컬럼의 너비를 명확하게 설정합니다. ★★★ */
    grid-template-columns: 200px 250px auto 200px; /* 왼쪽광고(200px) 게시판(250px) 컨텐츠(자동) 오른쪽광고(200px) */
    gap: 20px; /* 컬럼 사이의 간격 */
    margin-bottom: 20px;
}

/* top-section의 각 자식 div들에 대한 기본 스타일 */
.ad-banner-left,
.board-list-section,
.main-content-area,
.ad-banner-right {
    background-color: var(--card-bg-color); /* 다크 모드 변수 사용 */
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 2px var(--shadow-color); /* 다크 모드 변수 사용 */
}

/* 광고 배너는 내부 패딩을 0으로 설정 */
.ad-banner-left, .ad-banner-right {
    padding: 0;
}
.ad-banner-left img, .ad-banner-right img {
    width: 100%;
    height: auto;
    display: block;
}

.main-content-area {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    /* ★★★ display: flex 와 flex-direction: column 을 제거합니다! ★★★ */
    position: relative; /* 자식 요소의 absolute 위치 기준 (선택사항) */

}
/* =================================================================== */
/* 5. 게시글 목록 (Post List)
/* =================================================================== */

/* 두 섹션의 공통 스타일 */
.post-list-section,
.post-detail-section {
    background-color: var(--card-bg-color);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 2px var(--shadow-color);
}

/* 상세 보기와 목록 사이에 간격을 줍니다. */
.post-detail-section {
    margin-bottom: 30px;
}





.sort-options { text-align: right; margin-bottom: 15px; }
.sort-options a, .sort-options span { margin-left: 10px; font-size: 0.9em; color: var(--text-secondary-color); }
.sort-options .active { font-weight: bold; color: var(--text-color); }

.board-table { width: 100%; border-collapse: collapse; vertical-align: top; }
.board-table th, .board-table td { padding: 12px 8px; text-align: center; vertical-align: middle; }
.board-table thead th {
    background-color: var(--card-bg-hover);
    font-weight: bold; border-top: 2px solid var(--border-strong-color);

}
.board-table .col-title-meta { width: auto; text-align: left; vertical-align: top; padding: 12px 10px; }
.board-table .col-tag { width: 10%; }
.board-table .col-thumbnail { width: 80px; }
.board-table .col-views, .board-table .col-likes { width: 8%; }

.post-title-link { display: inline-block; text-decoration: none; color: var(--text-color); }
.title-with-comment {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; text-overflow: ellipsis; word-break: break-all;
    font-size: 1.1em; font-weight: bold; line-height: 1.5;
    text-decoration: none !important;
}
.comment-count-inline { color: #d9534f; font-weight: bold; }
.meta-info { display: block; margin-top: 6px; font-size: 0.85em; color: var(--text-secondary-color); }
.meta-info .author {font-weight: bold; color: var(--text-color); }
.board-table .post-thumbnail { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }

.pagination { text-align: center; padding: 20px 0; }
.pagination a, .pagination span {
    padding: 8px 16px; border: 1px solid var(--border-color);
    margin: 0 4px; transition: background-color .3s;
}
.pagination a:hover { background-color: var(--card-bg-hover); }
.pagination .active { background-color: var(--success-color); color: white; border-color: var(--success-color); }

/* =================================================================== */
/* 다크 모드 전환 버튼
/* =================================================================== */
#dark-mode-toggle { /* ID 선택자로 변경하여 명확성 증대 */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem; /* 아이콘 크기 */
    padding: 5px 10px; /* 클릭 영역 확보 */
    /* 색상은 CSS 변수를 사용해 테마에 따라 자동 변경되도록 함 */
    color: var(--text-secondary-color);
}

#dark-mode-toggle:hover {
    color: var(--text-color); /* 호버 시 더 진한 색으로 */
}

/* =================================================================== */
/* 6. 게시글 상세 보기 (Post Detail) - 순서 문제 해결 최종본
/* =================================================================== */

/* ★★★ 기존 .post-area 규칙을 삭제하고 아래 코드로 대체합니다. ★★★ */



/* --- 나머지 상세 보기 관련 스타일 --- */
.post-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}
.post-meta-info {
    margin-bottom: 15px;
    color: var(--text-secondary-color);
    font-size: 0.9em;
}
.post-meta-info strong {
    color: var(--text-color);
}


.post-url-wrapper {
    width: 100%; box-sizing: border-box; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: flex-end;
    font-size: 0.9em; color: var(--text-secondary-color);
}
.post-url-wrapper .url-text { word-break: break-all; }
.post-url-wrapper .copy-button { margin-left: 10px; flex-shrink: 0; }

#post-content {
    line-height: 1.7; min-height: 150px; font-size: 1em;
    display: flex; flex-direction: column; align-items: flex-start;
}
#post-content img {
    max-width: 100%; /* ★★★ 핵심: 부모 요소의 너비를 절대 넘어가지 않음 */
    height: auto;    /* 이미지의 가로/세로 비율을 유지함 */
    display: block;  /* 이미지가 다른 텍스트와 어색하게 섞이는 것을 방지 (선택사항) */
}


/* .post-content 클래스 자체에 대한 스타일 (너비 기준) */
.post-content {
    /* 이 요소가 너비를 가질 수 있도록 display: block 속성을 확실히 해줍니다. */
    display: block;
    width: 100%;
    /* 내부 요소가 넘칠 경우를 대비합니다. */
    overflow: hidden; 
}

/* .post-content 안의 p 태그에 대한 스타일 */
.post-content p {
    /* p 태그도 너비를 100%로 제한합니다. */
    max-width: 100%;
    /* 불필요한 공백으로 레이아웃이 깨지는 것을 방지합니다. */
    white-space: normal; 
    word-wrap: break-word;
}

/* .post-content 안의 img 태그에 대한 최종 스타일 */
.post-content img {
    /* 이미지가 부모(p 태그)의 너비를 넘지 못하게 합니다. */
    max-width: 100%;
    height: auto;
    display: block; /* 이미지 자체를 블록 요소로 만듭니다. */
}

.post-meta-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 30px; padding: 15px 0;
    
}
.post-actions { display: flex; align-items: center; gap: 10px; position: relative; }
.post-actions .like-count-display { font-weight: bold; }
#messageBox {
    position: absolute; left: calc(100% + 15px); white-space: nowrap;
    padding: 6px 12px; border-radius: 4px; color: white; font-size: 13px;
    transition: opacity 0.6s ease, visibility 0.6s;
    visibility: hidden; opacity: 0; pointer-events: none;
}
#messageBox.show { visibility: visible; opacity: 1; }
.post-edit-options { display: flex; gap: 10px; }

.post-thumbnail {
    width: 64px;  /* 원하는 썸네일 너비 */
    height: 64px; /* 원하는 썸네일 높이 */
    object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 표시됨 */
    border-radius: 4px;
    background-color: #eee; /* 이미지가 없을 때 배경색 */
}
.meta-info {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 12px; font-size: 0.8em; color: var(--text-secondary-color);
    }

/* =================================================================== */
/* 7. 댓글 (Comments)
/* =================================================================== */
.comment-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-size: 0.9em; color: var(--text-secondary-color);
}
.comment-author-info { display: flex; align-items: center; gap: 12px; }
.comment-author-info strong { color: var(--text-color); }
.comment-actions { font-size: 0.9em; display: flex; gap: 15px; }
.comment-actions a { color: var(--text-secondary-color); margin-left: 0; }

.comment-form { margin-top: 20px; display: flex; align-items: flex-start; gap: 10px; }
.comment-form textarea {
    flex-grow: 1; height: 90px; padding: 10px;
    border: 1px solid var(--border-color); border-radius: 4px;
    font-size: 1em; font-family: inherit; resize: none;
    background-color: var(--bg-color); color: var(--text-color);
}
.comment-form button {
    flex-shrink: 0; width: 120px; height: 112px; border: none;
    background-color: var(--text-color); color: var(--bg-color);
    border-radius: 4px; cursor: pointer; font-weight: bold;
    font-size: 1em; 
}
.comment-edit-textarea {
    width: 100%; min-height: 120px; padding: 10px;
    border: 1px solid var(--link-color); border-radius: 4px;
    font-size: 1em; font-family: inherit; line-height: 1.6;
    box-sizing: border-box; resize: none;
    background-color: var(--bg-color); color: var(--text-color);
}


.comment {
    /* ★★★ 이 부분을 추가하거나 기존 .comment 스타일에 합치세요 ★★★ */
    padding-bottom: 20px; /* 댓글 아래쪽 여백 */
    margin-bottom: 20px;  /* 구분선과 다음 댓글 사이의 간격 */
    border-bottom: 1px solid var(--border-color); /* 구분선 스타일 */
}

/* ★★★ 마지막 댓글에는 구분선이 필요 없으므로 제거합니다 (더 깔끔함) ★★★ */
.comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
}


/* =================================================================== */
/* 8. 반응형 디자인 (Responsive Design)
/* =================================================================== */
@media screen and (max-width: 768px) {
    /* --- 기본 & 레이아웃 --- */
    .container { width: auto; margin: 0; padding: 10px; }
    .top-section { display: flex; flex-direction: column; gap: 15px; }
    .ad-banner-left, .ad-banner-right { display: none; }

    /* --- 헤더 --- */
    .header-inner { padding: 10px 15px; }
    .header-left h1 { font-size: 20px; }
    .header-left img { height: 35px; }
    
    /* --- 게시판 목록 --- */
    .board-list-section { padding: 0; }
    .board-list-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 20px; cursor: pointer;
        border-bottom: 1px solid var(--border-color);
    }
    .current-board-name { margin: 0; font-size: 1.2em; }
    .board-toggle-button {
        background: none; border: 1px solid var(--border-color);
        padding: 6px 12px; border-radius: 4px; font-size: 0.9em;
        cursor: pointer; color: var(--text-color);
    }
    .board-toggle-button::after { content: ' ▼'; font-size: 0.8em; }
    .board-toggle-button.active::after { transform: rotate(180deg); }
    .board-list-dropdown {
        display: none; background-color: var(--card-bg-color);
        padding: 10px 20px 20px; border-bottom: 1px solid var(--border-color);
    }
    .board-list-dropdown li a {
        display: block; padding: 10px 0; color: var(--text-color);
        border-bottom: 1px solid var(--border-color);
    }
    .write-button-bottom { display: block; margin: 20px; text-align: center; }

    /* --- 게시글 목록 (모바일 전용) --- */
    .board-table, .board-table thead, .board-table tbody, .board-table tr { display: block; }
    .board-table thead { display: none; }
    .board-table tr { display: flex; align-items: center; }
    .board-table td { display: block; border: none; padding: 0; }
    
    .board-table .col-thumbnail {
        width: 60px; height: 60px; margin-right: 12px;
        flex-shrink: 0; display: block !important;
    }
    .board-table .post-thumbnail { width: 100%; height: 100%; }
    .board-table .col-title-meta {
        flex-grow: 1; height: 65px; display: flex; flex-direction: column;
        justify-content: space-between;
    }
    .post-title-link { font-size: 1em; line-height: 1.3; }
    .meta-info {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 12px; font-size: 0.8em; color: var(--text-secondary-color);
    }
    .board-table .col-tag, .board-table .col-views, .board-table .col-likes { display: none; }

    /* 광고 */
    .board-table .ad-row td { background-color: var(--bg-color); }
    .ad-banner-link { color: var(--text-color); }
    
    /* --- 댓글 폼 (모바일) --- */
    .comment-form { flex-direction: column; gap: 8px; }
    .comment-form textarea { width: 100%; box-sizing: border-box; height: 80px; }
    .comment-form button { width: 100%; height: 45px; }
}

/* =================================================================== */
/* 9. 글쓰기/수정 폼 (Write/Edit Form)
/* =================================================================== */
.write-container, .form-section {
    max-width: 800px; margin: 20px auto; padding: 20px;
    background-color: var(--card-bg-hover); border-radius: 8px;
    border: 1px solid var(--border-color);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
#title, #category, .editable-content {
    width: 100%; padding: 12px; font-size: 1em;
    border: 1px solid var(--border-color); border-radius: 4px;
    box-sizing: border-box; background-color: var(--card-bg-color);
    color: var(--text-color);
}
.editable-content { min-height: 350px; line-height: 1.6; }
.editable-content img {
    max-width: 50%; height: auto; margin: 0 8px 5px 0;
    display: inline-block; vertical-align: middle;
    border: 1px solid var(--border-color); border-radius: 4px;
}

/* =================================================================== */
/* 9. 글쓰기/수정 폼 (Write/Edit Form)
/* =================================================================== */

.write-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 30px;
    
    /* ★★★ 이 두 줄이 다크 모드의 핵심입니다. ★★★ */
    background-color: var(--card-bg-color); 
    border: 1px solid var(--border-color);

    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color);
}


.write-container h1 {
    margin-top: 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color); /* ★★★ 추가 ★★★ */
}

#title, #board, #editor-container {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-color); /* ★★★ 수정 ★★★ */
    border-radius: 4px;
    /* ★★★ 다크 모드 지원 ★★★ */
    background-color: var(--bg-color);
    color: var(--text-color);
}

#title, #board {
    padding: 12px;
    font-size: 1em;
}

/* --- Quill.js 에디터 다크모드 스타일 --- */
.ql-toolbar {
    border-bottom: 1px solid var(--border-color) !important;
}

.ql-toolbar, .ql-container {
    background-color: var(--bg-color);
    border-color: var(--border-color) !important;
    color: var(--text-color);
}

.ql-snow .ql-stroke {
    stroke: var(--text-color); /* 툴바 아이콘 색상 */
}
.ql-snow .ql-picker-label {
    color: var(--text-color); /* 폰트/사이즈 선택 색상 */
}
.ql-snow .ql-picker-options {
    background-color: var(--card-bg-color); /* 드롭다운 메뉴 배경 */
    border-color: var(--border-color) !important;
}

/* ▼▼▼ 이 규칙을 추가하세요 ▼▼▼ */
/* html에 dark-mode 클래스가 있을 때, 
   비어있는(.ql-blank) 에디터의 placeholder(::before) 스타일을 지정합니다. */
html.dark-mode .ql-editor.ql-blank::before {
    /* 기본 텍스트보다 약간 연한 색상을 사용하여 구분감을 줍니다. */
    color: var(--text-secondary-color);
    opacity: 0.7; /* 약간 투명하게 만들어 더 잘 보이게 함 */
}

/* --- Form Actions --- */
.form-actions {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex; /* 버튼 정렬을 위해 추가 */
    justify-content: flex-end; /* 오른쪽 정렬 */
    gap: 10px; /* 버튼 사이 간격 */
}

/* ★★★★★ 순서 문제 해결을 위한 최종 테스트 ★★★★★ */
.main-content-area.post-view-active .post-detail-section {
    display: block !important;
}