/* =================================================================
 [공통] Q&A 페이지 헤더
 ================================================================= */
.page-header {
    padding: 50px 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-surface);
}
.page-header h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin: 0 0 10px 0;
}
.page-header p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin: 0;
}

/* =================================================================
 [qna-list.html & index.html] Q&A 목록 페이지 스타일
 ================================================================= */
.qna-list-container {
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.qna-list-item {
    display: block;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    margin-bottom: 20px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease-in-out;
}

.qna-list-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-soft);
    border-color: var(--color-primary);
}

.qna-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}
.qna-item-header h3 {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.5;
    word-break: keep-all;
}
.qna-item-header h3 .fa {
    margin-right: 8px;
    color: var(--color-primary);
    font-size: 1.2rem;
}
.qna-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.qna-status.answered {
    background-color: #e6fcf5;
    color: #20c997;
}
.qna-status.pending {
    background-color: #fffbe6;
    color: #faad14;
}

.qna-item-meta {
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--color-text-light);
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

#qna-list-target .empty {
    text-align: center;
    padding: 60px 0;
    color: var(--color-text-light);
}


/* =================================================================
 [신규 추가] 홈페이지 메인 Q&A 목록 디자인 수정
 ================================================================= */
.qna-item-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s;
}

.qna-item-main:hover {
    background-color: var(--color-surface);
}

.qna-item-title-main {
    flex-basis: 100%;
    order: 1;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 500;
}

.qna-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qna-item-meta-main {
    flex-basis: 100%;
    order: 2;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* =================================================================
 2단 레이아웃 (최종 수정: 강제 중앙 정렬)
 ================================================================= */
.qna-detail-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1200px !important;
    width: 95% !important;
    margin: 40px auto !important;
    padding: 0 !important;
    float: none !important;
}

.qna-detail-main {
    flex: 1;
    min-width: 0;
}

.qna-detail-sidebar {
    width: 380px;
    flex-shrink: 0;
}

.sidebar-sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

.qna-detail-sidebar h3 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text-dark);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-search {
    position: relative;
    margin-bottom: 15px;
}

.sidebar-search .fa-search {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
}

#qna-sidebar-search, #solution-sidebar-search {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
    box-sizing: border-box;
    background-color: var(--color-surface);
}

.qna-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-surface);
}

.qna-sidebar-list a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.9rem;
    line-height: 1.5;
    transition: background-color 0.2s;
    word-break: keep-all;
}

.qna-sidebar-list li:last-child a {
    border-bottom: none;
}

.qna-sidebar-list a:hover {
    background-color: var(--color-background-light);
}

.qna-sidebar-list a.active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 700;
}


/* =================================================================
 [qna-post-sample.html] 상세 페이지 콘텐츠 스타일
 ================================================================= */
.qna-question-box {
    background-color: var(--color-surface);
    padding: 30px 40px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
}
.qna-question-box .post-header h1 {
    font-size: 2.2rem;
    line-height: 1.5;
    margin-bottom: 20px;
    word-break: keep-all;
}
.qna-question-box .post-meta {
    display: flex;
    gap: 20px;
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}
.qna-question-box .post-body {
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--color-text-main);
}
.media-gallery {
    margin-top: 20px;
}
.media-gallery img, .media-gallery video {
    max-width: 100%;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
}

.expert-reply-container h2,
.replies-section h2,
.reply-form-section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text-dark);
}
.expert-reply-container h2 .fa,
.replies-section h2 .fa,
.reply-form-section h2 .fa {
    margin-right: 10px;
    color: var(--color-primary);
}

.all-replies-container .empty-reply {
    text-align: center;
    color: var(--color-text-light);
    padding: 40px 0;
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-md);
}

.reply-item {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    margin-bottom: 15px;
    background-color: var(--color-surface);
}
.reply-item.expert-reply {
    background-color: #f0f7ff;
    border-color: #bce0ff;
}
.reply-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.reply-meta span:first-child { font-weight: 700; }
.reply-meta .reply-date { color: var(--color-text-light); font-size: 0.85rem; }
.expert-badge { font-weight: 700; color: var(--color-primary); }
.reply-item p { margin: 0; line-height: 1.7; color: var(--color-text); word-break: keep-all; }
.reply-attachment { margin-top: 15px; }
.reply-attachment a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
}
.reply-attachment a:hover { text-decoration: underline; }
.reply-attachment .fa { margin-right: 5px; }

.reply-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
}
.reply-to-comment-btn {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}
.reply-to-comment-btn:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.reply-to-comment-btn .fa {
    margin-right: 5px;
}

.reply-target-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #e6fcf5;
    border: 1px solid #20c997;
    border-radius: var(--border-radius-md);
    margin-bottom: 15px;
    font-size: 0.9rem;
}
#reply-target-author {
    font-weight: bold;
    color: #205c4b;
}
.cancel-reply-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #20c997;
}

#reply-form .qna-form-group { margin-bottom: 15px; }
#reply-form label { display: block; font-weight: 500; margin-bottom: 8px; }
#reply-form input[type="text"], #reply-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    box-sizing: border-box;
}
#reply-form textarea { resize: vertical; min-height: 120px; }
#reply-form .qna-submit-btn {
    display: inline-block;
    width: 100%;
    background-color: var(--color-primary);
    color: white;
    padding: 15px;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}
#reply-form .qna-submit-btn:hover { background-color: #0056b3; }


/* =================================================================
 [공통] 질문하기 기능 관련 스타일
 ================================================================= */
.qna-fab-container { position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: flex; align-items: center; gap: 10px; }
.qna-character { width: 80px; height: 80px; background-image: url('https://storage.googleapis.com/gemini-prod/images/841e57a3-82b5-4720-8321-2f785f838e55'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.3s ease; }
.qna-fab-container:hover .qna-character { transform: scale(1.1) rotate(-5deg); }
.qna-button { display: block; padding: 15px 25px; background-color: var(--color-primary); color: white !important; border-radius: 50px; font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-decoration: none; transition: all 0.3s ease; cursor: pointer; }
.qna-button:hover { background-color: var(--color-primary-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.qna-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); animation: qnaFadeIn 0.3s; }
.qna-modal-content { background-color: #fff; margin: 10% auto; padding: 30px 40px; border-radius: var(--border-radius-lg); box-shadow: 0 5px 25px rgba(0,0,0,0.2); max-width: 700px; width: 90%; position: relative; animation: qnaSlideDown 0.4s; }
.qna-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 15px; margin-bottom: 25px; }
.qna-modal-header h2 { font-family: var(--font-heading); margin: 0; color: var(--color-primary); font-size: 1.8rem; }
.qna-close-button { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.qna-close-button:hover, .qna-close-button:focus { color: black; }
.qna-form-group { margin-bottom: 20px; }
.qna-form-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 1rem; }
.qna-form-group input, .qna-form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); font-size: 1rem; box-sizing: border-box; }
.qna-form-group textarea { min-height: 150px; resize: vertical; }
.qna-modal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.qna-upload-btn, .qna-submit-btn { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--border-radius-md); cursor: pointer; border: none; transition: all 0.2s; }
.qna-upload-btn { background-color: #e9ecef; color: var(--color-text); }
.qna-upload-btn:hover { background-color: #ced4da; }
.qna-submit-btn { background-color: var(--color-primary); color: white; }
.qna-submit-btn:hover { background-color: var(--color-primary-dark); }

@keyframes qnaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qnaSlideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 1200px) {
    .qna-detail-layout {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    .qna-detail-sidebar {
        width: 100%;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .qna-character { display: none; }
    .qna-modal-content { width: 95%; margin: 15% auto; padding: 20px; }
}

/* =================================================================
 페이지네이션 (페이지 번호) 버튼 스타일
 ================================================================= */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
    padding-bottom: 30px;
}

.pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination-button:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.pagination-button.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-weight: 700;
    cursor: default;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pagination-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-background);
}
.pagination-button.disabled:hover {
    background-color: var(--color-background);
    color: var(--color-text);
    border-color: var(--color-border);
    transform: none;
}