@charset "UTF-8";
/*
    자료공유 > 문의게시판 (/share/qna)

    이슈사항과 마크업 틀은 같지만(탭 → 도구줄 → 목록 → 모달) 담는 것이 다르다.
    이슈사항은 고객사 · 업체에서 생긴 일, 여기는 이 시스템에 대한 요청이다.
    구분 배지 색을 다르게 둬 두 화면을 헷갈리지 않게 한다.
*/

.qa-page{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
}

/* ── 진행상태 탭 ────────────────────────────────────────── */

.qa-tabs{
    display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;
    border-bottom:1px solid #e3e8f0; padding-bottom:10px;
}
.qa-tab{
    padding:7px 16px; border:1px solid #dfe5ee; border-radius:20px;
    background:#fff; color:#41506a; font-size:13px; cursor:pointer;
    font-family:inherit; white-space:nowrap;
}
.qa-tab:hover{ border-color:#9dc0ee; color:#0a529d; }
.qa-tab.is-on{ background:#0a529d; border-color:#0a529d; color:#fff; font-weight:700; }
.qa-tab b{ font-weight:700; margin-left:2px; }

/* ── 도구줄 ─────────────────────────────────────────────── */

.qa-sel{ height:36px; min-width:130px; padding:0 30px 0 10px; font-size:14px; width:auto; }
.qa-search{ width:250px; height:36px; }
.qa-search input{ height:100%; width:100%; padding:0 12px; font-size:14px; }

.qa-mine{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; color:#41506a; cursor:pointer; white-space:nowrap;
}
.qa-mine input{ width:16px; height:16px; cursor:pointer; }

.qa-hint{ margin:0 2px 8px; font-size:12px; color:#77839a; }
.qa-hint b{ color:#41506a; }

/* ── 목록 ───────────────────────────────────────────────── */

.qa-scroll{ max-height:calc(100vh - 380px); }
.qa-table tbody tr.qa-row{ cursor:pointer; }
.qa-table tbody tr.qa-row:hover{ background:#f6faff; }
/* 급한 건은 왼쪽에 띠를 둬 목록에서 바로 눈에 들어오게 */
.qa-table tbody tr.qa-row.is-urgent td:first-child{ box-shadow:inset 3px 0 0 #d93a45; }

.qa-title{ font-weight:600; color:#1b2b46; }
.qa-rcnt{ color:#0a529d; font-weight:700; }

.qa-urgentmark{
    display:inline-block; margin-right:6px; padding:1px 7px; border-radius:9px;
    background:#d93a45; color:#fff; font-size:11px; font-weight:700; vertical-align:1px;
}

/* ── 구분 배지 ──────────────────────────────────────────
   연한 바탕은 흰 카드 위에서 잘 안 보인다. 진한 바탕 + 흰 글씨로 둔다. */

.cfg-st.qa-tp-FIX,
.cfg-st.qa-tp-NEW,
.cfg-st.qa-tp-BUG,
.cfg-st.qa-tp-ETC{
    color:#fff; font-weight:700; padding:2px 9px; border-radius:10px; white-space:nowrap;
}
.cfg-st.qa-tp-FIX{ background:#1359c0; }   /* 수정 요청 — 가장 흔하다 */
.cfg-st.qa-tp-NEW{ background:#1f7a45; }   /* 기능 요청 */
.cfg-st.qa-tp-BUG{ background:#c9313d; }   /* 오류 신고 — 제일 급하다 */
.cfg-st.qa-tp-ETC{ background:#5c6b80; }   /* 그 밖 */

/* ── 모달 ───────────────────────────────────────────────── */

.qa-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.qa-modal .modal__box{
    position:relative; width:min(720px, calc(100% - 32px)); max-height:92vh;
    margin:4vh auto; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; overflow:hidden;
}
.qa-modal .modal__body{ overflow-y:auto; }
.qa-modal .modal__card{ padding:20px 24px; }
.qa-modal .qa-detailbox{ width:min(820px, calc(100% - 32px)); }

.qa-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qa-ta{ height:170px; padding:10px 12px; resize:vertical; line-height:1.7; }
.qa-ta--sm{ height:96px; }

/* 구분 고르기 */
.qa-types{ display:flex; flex-wrap:wrap; gap:6px; }
.qa-type{
    position:relative; display:inline-flex; align-items:center;
    padding:6px 12px; border:1px solid #dfe5ee; border-radius:16px;
    background:#fff; cursor:pointer; font-size:13px; color:#41506a;
}
.qa-type input{ position:absolute; opacity:0; width:0; height:0; }
.qa-type b{ font-weight:600; }
.qa-type::before{
    content:''; width:9px; height:9px; border-radius:3px;
    margin-right:6px; background:currentColor;
}
.qa-type.qa-tp-FIX{ color:#1359c0; background:#fff; }
.qa-type.qa-tp-NEW{ color:#1f7a45; background:#fff; }
.qa-type.qa-tp-BUG{ color:#c9313d; background:#fff; }
.qa-type.qa-tp-ETC{ color:#5c6b80; background:#fff; }
.qa-type:has(input:checked){
    border-color:currentColor; font-weight:700; box-shadow:inset 0 0 0 1px currentColor;
}
.qa-type input:checked + b{ text-decoration:underline; }

/* 급함 체크 */
.qa-urgent__box{
    display:flex; align-items:center; gap:8px; height:46px;
    padding:0 12px; border:1px solid #dfe5ee; border-radius:8px; background:#fafbfd;
}
.qa-urgent__box input{ width:18px; height:18px; flex:0 0 auto; cursor:pointer; }
.qa-urgent__box i{ font-style:normal; font-size:12px; color:#626f85; }

/* ── 상세 ───────────────────────────────────────────────── */

.qa-dtop{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; }
.qa-done{ font-size:12px; color:#1a6b3c; font-weight:600; }

.qa-content{
    padding:12px 14px; border:1px solid #eef1f6; border-radius:6px; background:#fafbfd;
    font-size:13.5px; color:#243247; line-height:1.75;
}

.qa-rhead{ margin:18px 0 8px; padding-top:14px; border-top:2px solid #e6eaf1; }
.qa-rhead h4{ margin:0; font-size:14px; font-weight:700; color:#1b2b46; }
.qa-n{
    display:inline-block; min-width:20px; margin-left:4px; padding:1px 7px;
    background:#eef3fa; color:#0a529d; border-radius:10px; font-size:12px; font-weight:700;
}

.qa-replies{ display:flex; flex-direction:column; gap:8px; }
.qa-noreply{ padding:14px 0; text-align:center; font-size:13px; }

.qa-reply{
    padding:10px 12px; border:1px solid #eef1f6; border-left:3px solid #9dc0ee;
    border-radius:6px; background:#fff;
}
.qa-reply__head{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:5px;
    font-size:12px; color:#626f85;
}
.qa-reply__head b{ font-size:13px; color:#1b2b46; }
.qa-reply__dt{ color:#8a94a6; }
.qa-reply-del{
    margin-left:auto; border:none; background:none; color:#c9313d;
    font-size:16px; line-height:1; cursor:pointer; padding:0 2px;
}
.qa-reply__body{ font-size:13.5px; color:#243247; line-height:1.7; }

.qa-newreply{
    margin-top:16px; padding-top:14px; border-top:1px solid #eef1f6;
}
.qa-newreply h4{ margin:0 0 8px; font-size:14px; font-weight:700; color:#1b2b46; }
.qa-newreply__foot{ display:flex; justify-content:flex-end; }

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 1024px){
    .qa-scroll{ max-height:none; }
    .qa-row2{ grid-template-columns:1fr; }
    .qa-search{ width:100% !important; }
    .qa-sel{ flex:1 1 130px; }
    .qa-urgent__box{ height:46px; }
}