/* ══════════════════════════════════════════
   QnA 공통 (board_front.css 위에서 동작)
══════════════════════════════════════════ */

/* 검색바 */
.board-search {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.board-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #d0d8e8;
    border-radius: 5px;
    font-size: 1.4rem;
    font-family: inherit;
}
.board-search input:focus { outline: none; border-color: #0a3d6b; }
.board-search button {
    padding: 10px 22px;
    background: #0a3d6b;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s;
}
.board-search button:hover { filter: brightness(1.15); }

/* 비밀/상태 뱃지 */
.secret-badge {
    display: inline-block;
    padding: 2px 6px;
    background: #888;
    color: #fff;
    border-radius: 3px;
    font-size: 1.1rem;
    margin-right: 4px;
    vertical-align: middle;
}
.state-done { color: #0a3d6b; font-weight: 600; font-size: 15px; }
.state-wait { color: #aaa; font-size: 15px; }
.td-ellipsis {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════
   QnA 상세 (view.php)
══════════════════════════════════════════ */

/* Q&A post-head 텍스트 색상 (board와 별도) */
.bsb-faq .post-head { color: #707070; }
.bsb-faq .post-title {color: #707070;}
.bsb-faq .post-body {color: #707070;}
/* post-head 우측 작성자/작성일 */
.post-head-meta {
    display: flex;
    gap: 20px;
    text-align: right;
    flex-shrink: 0;
}
.post-meta-row {
    font-size: 15px;
    font-weight: 500;
    color: #707070;
    white-space: nowrap;
}
.meta-key {
    font-size: 15px;
    font-weight: 500;
    color: #707070;
    margin-right: 6px;
}

/* 답변 영역 */
.qna-answer-wrap {
    margin-top: 16px;
    border-top: 2px solid #707070;
    border-bottom: 2px solid #707070;
}
.qna-answer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 24px 6px;
    background: #F2F2F2;
    border-bottom: 1px solid #929398;
}
.re-icon { width: 12px; height: auto; display: block; flex-shrink: 0; margin-top: 4px; }
.answer-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #191919;
    line-height: 1.4;
}
.answer-head-meta .post-meta-row {
    font-weight: 700;
    color: #191919;
}
.answer-head-meta .meta-key {
    font-weight: 700;
    color: #191919;
}
.qna-answer-body {
    padding: 20px 30px;
    background: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #191919;
    letter-spacing: -0.05em;
    word-break: break-word;
}
.qna-answer-body p { margin: 0 0 .5em; }
.qna-answer-body p:last-child { margin-bottom: 0; }

/* 답변 대기 */
.qna-a-wait {
    margin-top: 16px;
    padding: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #929398;
    background: #F2F2F2;
    border-top: 2px solid #707070;
    border-bottom: 2px solid #707070;
}

/* ══════════════════════════════════════════
   비밀번호 모달 (view / write)
══════════════════════════════════════════ */
.pw-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.pw-modal-box {
    background: #fff;
    border-radius: 6px;
    padding: 20px 24px;
    min-width: 280px;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.pw-modal-box h4 {
    font-size: 15px;
    font-weight: 700;
    color: #191919;
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}
.pw-modal-desc { font-size: 13px; color: #aaa; margin-bottom: 14px; letter-spacing: -0.02em; }
.pw-modal-box input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #929398;
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.pw-modal-box input:focus { border-color: #0E82B4; }
.pw-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}
.pw-modal-actions button {
    padding: 5px 16px;
    border-radius: 0;
    border: 1px solid #929398;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    background: #fff;
    color: #191919;
    transition: opacity 0.15s;
}
.pw-modal-actions button:hover { opacity: 0.75; }
.pw-modal-actions button:first-child {
    background: #0E82B4;
    color: #fff;
    border-color: #0E82B4;
}

/* ══════════════════════════════════════════
   비밀번호 확인 페이지 (password.php)
══════════════════════════════════════════ */
.qna-pw-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0 40px;
}
.qna-pw-title {
    font-size: 23px;
    font-weight: 600;
    color: #0E82B4;
    letter-spacing: -0.05em;
    margin-bottom: 30px;
}
.qna-pw-desc { display: none; }
.qna-pw-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.qna-pw-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.qna-pw-form label {
    font-size: 15px;
    font-weight: 700;
    color: #191919;
    white-space: nowrap;
    letter-spacing: -0.05em;
}
.qna-pw-form input {
    width: 140px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid #929398;
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.qna-pw-form input:focus { border-color: #0E82B4; }
.qna-pw-error {
    font-size: 13px;
    color: #c0392b;
    min-height: 18px;
    letter-spacing: -0.03em;
}
.qna-pw-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px 3px 15px;
    border: 1px solid #929398;
    border-radius: 0;
    background: #0E82B4;
    color: #ffffff;
    font-size: inherit;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.qna-pw-form button:hover { opacity: 0.85; }

/* ══════════════════════════════════════════
   QnA 작성/수정 폼 (write.php)
══════════════════════════════════════════ */
.qna-form { padding-top: 6px; }
.qf-row { margin-bottom: 14px; }
.qf-group { display: flex; flex-direction: column; gap: 6px; }
.qf-group label {
    font-size: 1.35rem;
    font-weight: 500;
    color: #444;
}
.qf-group label em { color: #c0392b; font-style: normal; margin-left: 2px; }
.qf-group input,
.qf-group textarea {
    padding: 10px 13px;
    border: 1px solid #d0d8e8;
    border-radius: 5px;
    font-size: 1.4rem;
    font-family: inherit;
    transition: border-color 0.15s;
}
.qf-group input:focus,
.qf-group textarea:focus { outline: none; border-color: #0a3d6b; }
.qf-group textarea { resize: vertical; }
.qf-content-group textarea { min-height: 220px; }

/* 제목 + 비밀번호 같은 줄 */
.qf-row-inline {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.qf-title-group { flex: 3; }
.qf-pw-group    { flex: 1; min-width: 120px; }

/* 버튼 행 */
.qf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #edf0f5;
}
.qf-btn-cancel {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border: 1px solid #d0d8e8;
    border-radius: 5px;
    color: #555;
    font-size: 1.4rem;
    text-decoration: none;
    transition: background 0.15s;
}
.qf-btn-cancel:hover { background: #f0f5ff; }
.qf-btn-submit {
    padding: 10px 28px;
    background: #0a3d6b;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s;
}
.qf-btn-submit:hover { filter: brightness(1.15); }

/* 파일 첨부 */
.qf-file-hint   { font-size: 1.2rem; color: #999; font-weight: 400; margin-left: 4px; }
.qf-file-area   { display: flex; flex-direction: column; gap: 8px; }
.qf-btn-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid #d0d8e8;
    border-radius: 5px;
    background: #f7f9fc;
    color: #444;
    font-size: 1.35rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    width: fit-content;
}
.qf-btn-file:hover { background: #e8f0fb; }
.qf-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #f0f5ff;
    border-radius: 4px;
    font-size: 14px;
}
.qf-file-item-name { flex: 1; color: #2255a0; word-break: break-all; }
.qf-file-item-del {
    background: none;
    border: none;
    color: #999;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}
.qf-file-item-del:hover { color: #c0392b; }

/* ══════════════════════════════════════════
   QnA 작성/수정 폼 — 테이블 레이아웃 (qnaw)
══════════════════════════════════════════ */
.qnaw-form {}
.qnaw-row {
    display: flex;
    align-items: center;
}
.qnaw-row-stretch { align-items: stretch; }
.qnaw-row-file {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0 0;
}

/* 작성자/비밀번호 셀 */
.qnaw-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 14px;
    min-width: 0;
}

.qnaw-cell label {
    font-size: 15px;
    font-weight: 700;
    color: #191919;
    white-space: nowrap;
    letter-spacing: -0.05em;
    flex-shrink: 0;
}

.qnaw-cell input {
    flex: 1;
    width: 140px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid #929398;
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    min-width: 0;
    transition: border-color 0.15s;
}
.qnaw-cell input:focus { border-color: #0E82B4; }

/* 제목·내용·첨부 행 내부 패딩 */
.qnaw-row.qnaw-row-info{border-bottom:1px solid #929398;}
.qnaw-row-pad { padding: 20px 0; }
.qnaw-row-pad.qnaw-row-stretch { padding: 0; }

/* 제목 full-width 입력 */
.qnaw-title-input {
    width: 100%;
    height: 33px;
    padding: 0 10px;
    border: 1px solid #929398;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    color: #707070;
    font-family: inherit;
    letter-spacing: -0.05em;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.qnaw-title-input:focus { border-color: #0E82B4; }
.qnaw-title-input::placeholder { color: #929398; font-weight: 400; }

/* 내용 textarea */
.qnaw-textarea {
    flex: 1;
    width: 100%;
    min-height: 220px;
    padding: 10px;
    border: 1px solid #929398;
    border-radius: 0;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    line-height: 1.6;
    color: #191919;
    transition: border-color 0.15s;
}
.qnaw-textarea:focus { border-color: #0E82B4; }
.qnaw-textarea::placeholder { color: #929398; }

/* 첨부파일 목록 */
.qnaw-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.qnaw-btn-file { font-size: 13px; }

/* 버튼 행 */
.qnaw-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.qnaw-actions-right { display: flex; gap: 6px; }
.qnaw-actions-right .qnaw-btn-submit {
    background: #0E82B4;
    color: #ffffff;
    border-color: #0E82B4;
}

/* ══════════════════════════════════════════
   Responsive
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .post-head-meta { gap: 12px; }
    .qna-answer-body { font-size: 15px; padding: 16px 20px; }
    .bsb-faq .post-body { font-size: 15px; }
}

@media (max-width: 600px) {
    /* 비밀번호 모달 모바일 최적화 */
    .pw-modal-box {
        width: 92%;
        max-width: 100%;
        padding: 28px 20px 20px;
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(0,0,0,.2);
    }
    .pw-modal-box h4 { font-size: 17px; margin-bottom: 8px; }
    .pw-modal-desc { font-size: 13px; margin-bottom: 18px; }
    .pw-modal-box input {
        padding: 13px 14px;
        font-size: 16px; /* iOS 자동 줌 방지 */
        border-radius: 6px;
    }
    .pw-modal-actions {
        gap: 8px;
        margin-top: 16px;
    }
    .pw-modal-actions button {
        flex: 1;
        height: 48px;
        font-size: 15px;
        border-radius: 6px;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    .qf-row-inline { flex-direction: column; gap: 10px; }
    .qf-pw-group { min-width: 0; }
    .qna-post-head { flex-direction: column; align-items: flex-start; }
    .qna-post-actions { margin-left: 0; }

    /* 작성자/비밀번호 행 세로 스택 */
    .qnaw-row-info { align-items: stretch; gap: 20px;     padding: 0 10px;}
    .qnaw-cell { width: 100%; padding: 12px 0; }
    .qnaw-cell + .qnaw-cell { border-left: none;}
    .qnaw-cell input { width: 100%; flex: 1; }

    .qnaw-row-pad { padding: 20px 10px; }
    .qnaw-row-pad.qnaw-row-stretch { padding: 0 10px; }

    .qnaw-row-file { padding-left: 10px; padding-right: 10px; }
    .cf-turnstile { padding: 0 10px; }

    /* 버튼 행 */
    .qnaw-actions { flex-wrap: wrap; gap: 8px; padding: 0 10px; }
    .qnaw-actions-right { gap: 6px; }

    /* QnA 상세 메타 */
    .post-head-meta {justify-content: space-between;width: 100%; gap: 2px; text-align: left; padding: 11px 11px;}
    .post-meta-row { white-space: normal; }
    .post-meta-row{font-size: 13px;}
    .meta-key {font-size: 13px;}

    /* 답변 */
    .qna-answer-body { padding: 14px 16px; font-size: 14px; }
    .qna-answer-head { flex-direction: row; flex-wrap: wrap; padding: 0; gap: 0; align-items: center; }
    .re-icon { margin: 11px 6px 11px 10px; }
    .answer-title { flex: 1; padding: 11px 0; min-width: 0; background-color: #F2F2F2; }
    .answer-head-meta { width: 100%; padding: 11px 10px; display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; gap: 8px; border-top: 1px solid #929398;         background-color: #ffffff;}

    /* 비밀번호 확인 페이지 */
    .qna-pw-row { flex-wrap: wrap; justify-content: center; }
    .qna-pw-form input { width: 180px; }
}