@charset "utf-8";
/* ==========================================================================
   2026_qna_board — Q&A 게시판 스킨
   목록(표) / 읽기 + 답변 / 쓰기
   ========================================================================== */

/* ---------- 토큰 ---------- */
.qb-list, .qb-view, .qb-write {
    --qb-primary: #1a3f80;
    --qb-primary-dark: #163669;
    --qb-link: #1a4a9c;
    --qb-hover: #5c2d91;
    --qb-line: #d8dade;
    --qb-line-soft: #e6e7ea;
    --qb-input-line: #cfd3d8;
    --qb-surface: #f5f6f7;
    --qb-surface-2: #fafbfc;
    --qb-ink: #222;
    --qb-text: #444;
    --qb-muted: #8b9099;
    --qb-muted-2: #9aa0a8;
    --qb-badge-bg: #eef2f8;
    --qb-badge-line: #d6e0ef;
    --qb-danger: #c0392b;

    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -.3px;
    color: var(--qb-text);
    word-break: keep-all;
    box-sizing: border-box;
}
.qb-list *, .qb-view *, .qb-write * { box-sizing: border-box; }

#bo_list.qb-list { max-width: none; margin: 0; padding: 0; min-height: 0; }
@media screen and (max-width: 1440px) { #bo_list.qb-list { padding: 0 20px; } }
@media screen and (max-width: 768px) { #bo_list.qb-list { padding: 0 16px; } }
#bo_v.qb-view, #bo_w.qb-write { max-width: 1240px; margin: 56px auto 100px; padding: 0 20px; min-height: 0; }

/* 기본 스킨이 의존하던 숨김 제목 */
#bo_v_info > h2, #bo_v_atc_title, #bo_vc_w > h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

/* ---------- 공통 버튼 / 폼 ---------- */
.qb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 20px;
    border: 1px solid var(--qb-primary); background: var(--qb-primary); color: #fff;
    font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; letter-spacing: -.3px;
    text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 0;
    transition: background .2s, border-color .2s, color .2s;
}
.qb-btn:hover, .qb-btn:focus { background: var(--qb-primary-dark); border-color: var(--qb-primary-dark); color: #fff; text-decoration: none; }
.qb-btn--ghost { background: var(--qb-surface); border-color: var(--qb-line); color: #555; }
.qb-btn--ghost:hover, .qb-btn--ghost:focus { background: #eceef1; border-color: #c5c9cf; color: #222; }
.qb-btn--sm { height: 30px; padding: 0 14px; background: #fff; border-color: var(--qb-line); color: #444; font-size: 12.5px; font-weight: 400; }
.qb-btn--sm:hover, .qb-btn--sm:focus { background: #fff; border-color: var(--qb-primary); color: var(--qb-primary); }
.qb-btn--danger:hover, .qb-btn--danger:focus { background: #fff; border-color: var(--qb-danger); color: var(--qb-danger); }
.qb-btn--lg { height: 40px; padding: 0 22px; }

.qb-select {
    height: 40px; min-width: 120px; padding: 0 34px 0 12px;
    border: 1px solid var(--qb-input-line); border-radius: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%239a9a9a'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none; appearance: none;
    font-size: 14px; color: #444; letter-spacing: -.3px;
}
.qb-select::-ms-expand { display: none; }
.qb-input {
    height: 40px; padding: 0 12px;
    border: 1px solid var(--qb-input-line); border-radius: 0; background: #fff;
    font-size: 14px; color: #222; letter-spacing: -.3px;
}
.qb-input::placeholder { color: #9aa0a8; }
.qb-input:focus, .qb-select:focus, .qb-view textarea:focus, .qb-write textarea:focus { outline: none; border-color: var(--qb-primary); }
.qb-input--half { width: 50%; max-width: 100%; }
.qb-input--full { width: 100%; }

.qb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #555; cursor: pointer; }
.qb-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--qb-primary); cursor: pointer; }

.qb-tag { flex: none; font-size: 12px; font-weight: 700; color: var(--qb-link); }

/* ==========================================================================
   목록
   ========================================================================== */
.qb-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; }
.qb-meta__total { margin: 0; font-size: 15px; color: #555; }
.qb-meta__total b { color: var(--qb-primary); font-weight: 700; }
.qb-cats { margin-left: auto; }
.qb-cats ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border: 1px solid var(--qb-line); }
.qb-cats li { margin: 0; }
.qb-cats li + li { border-left: 1px solid var(--qb-line-soft); }
.qb-cats a { display: block; padding: 8px 14px; background: #fff; color: #555; font-size: 13px; line-height: 1.4; text-decoration: none; }
.qb-cats a:hover { background: #f4f5f6; color: #222; }
.qb-cats a#bo_cate_on { background: var(--qb-primary); color: #fff; font-weight: 700; }

/* 검색 */
.qb-search {
    display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 24px 30px; margin: 0 0 18px; background: var(--qb-surface);
}
.qb-search .qb-input { width: 340px; max-width: 100%; }
.qb-search__btn {
    width: 46px; height: 40px; border: 0; background: var(--qb-primary); color: #fff;
    font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.qb-search__btn:hover { background: var(--qb-primary-dark); }

/* 관리자 도구 */
.qb-admin {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 10px 14px;
    background: var(--qb-surface-2); border: 1px dashed var(--qb-line); font-size: 12.5px;
}
.qb-admin button { height: 30px; padding: 0 12px; border: 1px solid var(--qb-line); background: #fff; color: #444; font-size: 12.5px; cursor: pointer; }
.qb-admin button:hover { border-color: var(--qb-primary); color: var(--qb-primary); }
.qb-admin__link { margin-left: auto; color: var(--qb-muted); text-decoration: none; }
.qb-admin__link:hover { color: var(--qb-primary); }

/* 표 */
.qb-table-wrap { border-top: 2px solid var(--qb-primary); }
.qb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qb-table th, .qb-table td { padding: 14px 8px; text-align: center; vertical-align: middle; font-size: 14px; }
.qb-table thead th {
    background: var(--qb-surface); border-bottom: 1px solid var(--qb-line);
    color: #333; font-weight: 500; white-space: nowrap;
}
.qb-table thead th a { color: inherit; text-decoration: none; }
.qb-table thead th a:hover { color: var(--qb-primary); }
.qb-table tbody td { border-bottom: 1px solid var(--qb-line-soft); padding: 15px 8px; }
.qb-table tbody tr { transition: background .15s; }
.qb-table tbody tr:hover { background: #f8f9fa; }
.qb-row--notice { background: var(--qb-surface-2); }
.qb-row--notice .qb-title__link { font-weight: 700; }
.qb-row--current .qb-title__link { color: var(--qb-primary); }

.qb-col-no    { width: 80px;  color: #888; }
.qb-col-title { width: auto; }
.qb-col-name  { width: 150px; color: #777; font-size: 13.5px; }
.qb-col-state { width: 110px; }
.qb-col-date  { width: 120px; color: #888; font-size: 13.5px; }
.qb-col-hit   { width: 90px;  color: #888; font-size: 13.5px; }
.qb-col-chk   { width: 60px; }
.qb-table td.qb-col-title { text-align: left; padding-left: 16px; padding-right: 16px; }

.qb-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qb-title__link {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #222; text-decoration: none; font-weight: 400;
}
.qb-title__link:hover { color: var(--qb-primary); text-decoration: underline; }
.qb-lock { flex: none; display: block; }
.qb-reply { flex: none; font-size: 11px; color: var(--qb-muted-2); }
.qb-icon { flex: none; font-size: 12px; color: var(--qb-muted-2); }
.qb-new { flex: none; font-size: 10px; font-weight: 700; color: #fff; background: var(--qb-danger); padding: 1px 5px; border-radius: 2px; line-height: 1.4; }

.qb-state { display: inline-block; padding: 3px 9px; border: 1px solid; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.qb-state--done { background: var(--qb-badge-bg); color: var(--qb-primary); border-color: var(--qb-badge-line); }
.qb-state--wait { background: var(--qb-surface); color: var(--qb-muted); border-color: #e0e2e6; }

.qb-table td.qb-empty { padding: 80px 20px; color: var(--qb-muted-2); }

/* 하단: 페이징 + 질문 등록 */
.qb-foot { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 34px; min-height: 38px; }
.qb-foot__write { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#bo_list.qb-list .pg_wrap { display: flex; justify-content: center; width: auto; margin: 0; padding: 0; }
#bo_list.qb-list .pg { display: flex; align-items: center; gap: 5px; }
#bo_list.qb-list .pg_page,
#bo_list.qb-list .pg_current {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; min-width: 0; padding: 0;
    border: 1px solid var(--qb-line); background: #fff; color: #666;
    font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: 0; text-decoration: none; text-indent: 0;
    transition: border-color .15s, color .15s;
}
#bo_list.qb-list .pg_page:hover { border-color: var(--qb-primary); color: var(--qb-primary); background: #fff; }
#bo_list.qb-list .pg_current { background: var(--qb-primary); border-color: var(--qb-primary); color: #fff; font-weight: 700; }
#bo_list.qb-list .pg_start, #bo_list.qb-list .pg_prev,
#bo_list.qb-list .pg_next, #bo_list.qb-list .pg_end { font-size: 0; color: var(--qb-muted-2); background-image: none; overflow: hidden; }
#bo_list.qb-list .pg_start::before, #bo_list.qb-list .pg_prev::before,
#bo_list.qb-list .pg_next::before, #bo_list.qb-list .pg_end::before { font-size: 14px; line-height: 1; }
#bo_list.qb-list .pg_start::before { content: '«'; }
#bo_list.qb-list .pg_prev::before { content: '‹'; }
#bo_list.qb-list .pg_next::before { content: '›'; }
#bo_list.qb-list .pg_end::before { content: '»'; }

/* ==========================================================================
   읽기
   ========================================================================== */
.qb-view__head { padding-bottom: 20px; }
.qb-view #bo_v_title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 22px; font-weight: 700; color: var(--qb-ink); letter-spacing: -.4px; line-height: 1.4; }
.qb-view #bo_v_title .bo_v_tit { min-width: 0; word-break: break-all; }
.qb-view #bo_v_title .qb-tag { font-size: 14px; }
.qb-view__lock { font-size: 16px; color: var(--qb-primary); }

.qb-info {
    display: grid; grid-template-columns: 100px 1fr 100px 1fr 100px 1fr;
    margin: 0; border-top: 2px solid var(--qb-primary); border-bottom: 1px solid var(--qb-line);
}
.qb-info dt, .qb-info dd { margin: 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; }
.qb-info dt { background: var(--qb-surface); color: #666; font-weight: 500; }
.qb-info dd { color: #333; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qb-view #bo_v_atc { padding: 34px 4px; min-height: 180px; }
.qb-view #bo_v_img { margin-bottom: 20px; }
.qb-view #bo_v_img img { max-width: 100%; height: auto; margin: 0 0 10px; }
.qb-view #bo_v_con { font-size: 14.5px; line-height: 1.9; color: #444; word-break: break-word; overflow-x: auto; }
.qb-view #bo_v_con img { max-width: 100%; height: auto; }
.qb-view #bo_v_con a { color: var(--qb-link); }

.qb-attach { margin: 0 0 20px; padding: 14px 20px; background: var(--qb-surface-2); border: 1px solid var(--qb-line-soft); }
.qb-attach__title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--qb-ink); }
.qb-attach__title i { color: var(--qb-muted); margin-right: 4px; }
.qb-attach ul { margin: 0; padding: 0; list-style: none; }
.qb-attach li { padding: 6px 0; font-size: 13.5px; border-top: 1px dashed var(--qb-line-soft); }
.qb-attach li:first-child { border-top: 0; }
.qb-attach a { color: var(--qb-link); text-decoration: none; }
.qb-attach a:hover { text-decoration: underline; }
.qb-attach a em { font-style: normal; color: #666; margin-left: 4px; }
.qb-attach__size { color: var(--qb-muted); margin-left: 2px; }
.qb-attach__meta { display: block; font-size: 12px; color: var(--qb-muted-2); }

/* ---------- 답변 ---------- */
.qb-answer { border-top: 1px solid #333; padding-top: 16px; }
.qb-answer__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--qb-ink); }

.qb-answer__box { margin-top: 14px; min-height: 120px; background: var(--qb-surface); border: 1px solid var(--qb-line-soft); }
.qb-answer__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid #e0e2e6; }
.qb-answer__logo {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: conic-gradient(#e0673b 0 25%, #3f9b4f 25% 50%, #2f6ba3 50% 75%, #f0b52e 75% 100%);
}
.qb-answer__name { font-size: 13.5px; font-weight: 700; color: var(--qb-ink); }
.qb-answer__date { font-size: 12px; color: var(--qb-muted-2); }
.qb-answer__acts { margin-left: auto; display: flex; gap: 7px; }
.qb-answer__content { padding: 20px; font-size: 14px; line-height: 1.8; color: #444; word-break: break-word; }
.qb-answer__content p { margin: 0; }
.qb-answer__content img { max-width: 100%; height: auto; }
.qb-answer__empty {
    margin: 14px 0 0; min-height: 120px; padding: 20px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--qb-surface-2); border: 1px solid var(--qb-line-soft);
    font-size: 13.5px; color: var(--qb-muted-2);
}

.qb-answer__write { margin-top: 14px; padding: 16px; background: var(--qb-surface-2); border: 1px solid var(--qb-line-soft); }
.qb-answer__write textarea, .qb-answer__box .bo_vc_w textarea {
    display: block; width: 100%; height: 100px; padding: 12px;
    border: 1px solid var(--qb-line); border-radius: 0; background: #fff;
    font: inherit; font-size: 14px; line-height: 1.7; color: #222; resize: vertical;
}
.qb-answer__write textarea::placeholder { color: #9aa0a8; }
.qb-answer__write-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; }
.qb-answer__write-foot .qb-btn { height: 36px; padding: 0 18px; font-size: 13px; }
.qb-answer__count { font-size: 12.5px; font-weight: 400; color: var(--qb-muted); }
/* 답변 수정 시 답변 박스 안으로 이동한 폼 */
.qb-answer__box .bo_vc_w { display: block; }
.qb-answer__box .bo_vc_w form { padding: 0 20px 20px; }

.qb-view__btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 24px 0; }

/* ==========================================================================
   쓰기
   ========================================================================== */
.qb-write__title { margin: 0; padding-bottom: 20px; font-size: 22px; font-weight: 700; color: var(--qb-ink); letter-spacing: -.4px; }

.qb-form { border-top: 2px solid var(--qb-primary); border-bottom: 1px solid var(--qb-line); }
.qb-form__row { display: grid; grid-template-columns: 120px 1fr; border-bottom: 1px solid var(--qb-line-soft); }
.qb-form__row:last-child { border-bottom: 0; }
.qb-form__label {
    display: flex; align-items: center; padding: 14px 16px;
    background: var(--qb-surface); color: #666; font-size: 13.5px; font-weight: 500; line-height: 1.4;
}
.qb-form__row--content .qb-form__label { align-items: flex-start; padding-top: 22px; }
.qb-form__field { padding: 12px 16px; min-width: 0; }
.qb-form__field .qb-select, .qb-form__field .qb-input { height: 38px; }
.qb-form__opts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qb-form__help { margin: 6px 0 0; font-size: 12.5px; color: var(--qb-muted); }
.qb-form__desc { margin: 0 0 8px; font-size: 12.5px; color: var(--qb-muted); }
.qb-form__count { margin-top: 6px; text-align: right; font-size: 12.5px; color: var(--qb-muted); }
.qb-form__file { display: flex; flex-direction: column; gap: 8px; }
.qb-file { font-size: 13px; color: #555; }
.qb-form__filedel { color: var(--qb-danger); }

.qb-write .wr_content { width: 100%; }
.qb-write .wr_content textarea, .qb-write #wr_content {
    width: 100%; height: 260px; padding: 12px;
    border: 1px solid var(--qb-input-line); border-radius: 0; background: #fff;
    font: inherit; font-size: 14px; line-height: 1.7; color: #222; resize: vertical;
}
.qb-write .wr_content textarea::placeholder { color: #9aa0a8; }
.qb-write .wr_content iframe { max-width: 100%; }

.qb-form__btns { display: flex; justify-content: flex-end; gap: 8px; padding-top: 20px; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media screen and (max-width: 1024px) {
    #bo_v.qb-view, #bo_w.qb-write { margin: 40px auto 70px; }
    .qb-col-name { width: 110px; }
    .qb-col-state { width: 96px; }
    .qb-col-date { width: 104px; }
    .qb-col-hit { width: 70px; }
    .qb-info { grid-template-columns: 90px 1fr 90px 1fr; }
    .qb-info dt:nth-of-type(3), .qb-info dd:nth-of-type(3) { border-top: 1px solid var(--qb-line-soft); }
}

@media screen and (max-width: 768px) {
    .qb-search { padding: 16px; }
    .qb-search .qb-select { min-width: 0; flex: 0 0 auto; }
    .qb-search .qb-input { flex: 1 1 160px; width: auto; }

    .qb-cats { flex: 1 1 100%; margin-left: 0; }
    .qb-cats ul { width: 100%; }
    .qb-cats li { flex: 1 1 auto; text-align: center; }

    /* 표 → 카드형 행 */
    .qb-table, .qb-table tbody { display: block; width: 100%; }
    .qb-table thead { display: none; }
    .qb-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 4px; border-bottom: 1px solid var(--qb-line-soft); }
    .qb-table tbody td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
    .qb-table td.qb-col-no, .qb-table td.qb-col-chk { display: none; }
    .qb-table td.qb-col-title { flex: 1 1 100%; order: 1; padding: 0; }
    .qb-title__link { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.45; }
    .qb-table td.qb-col-state { order: 2; }
    .qb-table td.qb-col-name, .qb-table td.qb-col-date, .qb-table td.qb-col-hit { order: 3; font-size: 12.5px; color: var(--qb-muted); }
    .qb-table td.qb-col-hit::before { content: '조회 '; }
    .qb-table td.qb-empty { flex: 1 1 100%; text-align: center; padding: 60px 0; }
    .qb-admin .qb-check { display: none; }

    .qb-foot { flex-direction: column; gap: 16px; margin-top: 24px; }
    .qb-foot__write { position: static; transform: none; width: 100%; }

    #bo_v.qb-view, #bo_w.qb-write { margin: 30px auto 60px; padding: 0 16px; }
    .qb-view #bo_v_title { font-size: 19px; }
    .qb-info { grid-template-columns: 90px 1fr; }
    .qb-info dt, .qb-info dd { padding: 11px 14px; border-top: 1px solid var(--qb-line-soft); }
    .qb-info dt:first-of-type, .qb-info dd:first-of-type { border-top: 0; }
    .qb-view #bo_v_atc { padding: 24px 0; }
    .qb-answer__head { padding: 12px 14px; }
    .qb-answer__content { padding: 14px; }
    .qb-answer__acts { flex: 1 1 100%; margin-left: 0; justify-content: flex-end; }

    .qb-form__row { grid-template-columns: 1fr; }
    .qb-form__label { padding: 10px 14px; }
    .qb-form__row--content .qb-form__label { padding-top: 10px; }
    .qb-form__field { padding: 12px 14px; }
    .qb-input--half { width: 100%; }
    .qb-write .wr_content textarea, .qb-write #wr_content { height: 220px; }
}

@media screen and (max-width: 480px) {
    .qb-search .qb-select { flex: 1 1 100%; }
    .qb-search .qb-input { flex: 1 1 0; }
    .qb-write__title { font-size: 19px; }
    .qb-view__btns .qb-btn, .qb-form__btns .qb-btn { flex: 1 1 auto; padding: 0 12px; }
    .qb-answer__write-foot { flex-direction: column; align-items: stretch; }
    .qb-answer__write-foot .qb-btn { width: 100%; }
}