@charset "utf-8";

/*
 * 문의내역 (폰 목업 셸 전용)
 *
 * 기존 규칙은 qna_list.php 의 인라인 <style>(40-83행)에 있었다.
 * 항목 구분은 상담후기 '작성한 후기'(.review_list .review_item)와 동일하게
 * 얇은 회색 구분선을 쓴다 — 마이페이지에서 '내 내역을 읽는' 목록이라는 성격이
 * 같으므로 두 화면의 규칙을 맞춘다. 답변 박스의 연분홍은 원본대로 유지한다.
 * rem -> px 환산.
 */

.qna-content {
    min-height: calc(var(--phone-visible-height, 740px) - 50px);
    padding: 0 0 30px;
    background: #fff;
}

.id_qna_list {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 20px;
}

/* 상담후기 '작성한 후기'와 동일한 행 + 얇은 회색 구분선 */
.qna_item {
    padding: 16px 0;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
}

.qna_item:last-child { border-bottom: 0; }

.qna_item.no_qna {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    border: 0;
    color: #999;
    font-size: 13px;
}

/*
 * 실제 마크업은 .top > (.left > icon+title+date) + button.del_qna_btn 이다.
 * 원본 CSS 에는 .left / .del_qna_btn 규칙이 없어(PC 레이아웃에서 우연히 정렬됨)
 * 폰 프레임에서 줄이 어긋났다. 여기서 명시한다.
 */
.qna_item .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.qna_item .top .left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qna_item .top .icon { flex: 0 0 auto; width: 16px; }
.qna_item .top .title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.qna_item .top .date { margin: 0; color: var(--muted); font-size: 12px; }

.qna_item .top .del_qna_btn {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-family: Pretendard, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.qna_item .desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
}

.qna_item .answer_lsit {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qna_item .answer_box {
    padding: 12px 14px;
    /* 원본은 border var(--third)#ffcacc / background var(--bg)#fff1f0 였다.
       상담후기 답변란과 동일한 연분홍. */
    border: 1px solid #ffcacc;
    border-radius: 6px;
    background: var(--pink);
}

.qna_item .answer_box .answer_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.qna_item .answer_box .answer_titbox { display: flex; align-items: center; gap: 5px; }
.qna_item .answer_box .answer_titbox .icon { width: 16px; }
.qna_item .answer_box .answer_titbox .title { color: var(--muted); font-size: 13px; font-weight: 500; }
.qna_item .answer_box .answer_titbox .title .name { color: var(--ink); }
.qna_item .answer_box .date { color: var(--muted); font-size: 12px; }

.qna_item .answer_desc {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.qna_item .re_answer_lsit {
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}