.mypage-qna-page .mq-topbar{
    display:flex;
    justify-content:space-between; /*  좌/우 끝으로 */
    align-items:center;
    margin: 0 0 14px 0;
}

.mypage-qna-page .mq-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding: 8px 12px;
    border-radius: 8px;
    background:#0b7b77;
    color:#fff;
    font-weight:600;
    font-size:14px;
    line-height:1.2;

    text-decoration:none;
    border:1px solid rgba(0,0,0,.05);
}

.mypage-qna-page .mq-detail{
    border:1px solid #e6e6e6;
    border-radius:10px;
    padding: 16px;
    margin-bottom: 18px;
    background:#fff;
}

.mq-detail-title{
    font-weight:700;
    margin-bottom: 12px;
}

.mq-detail-meta{
    border:1px solid #e6e6e6;
    border-radius:8px;
    overflow:hidden;
    margin-bottom: 14px;
}

.mq-meta-row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.mq-meta-th{
    background:#f6f7f8;
    padding: 10px 12px;
    font-weight:600;
    text-align:center;
    border-right:1px solid #e6e6e6;
}
.mq-meta-th:last-child{border-right:none;}

.mq-meta-row--val .mq-meta-td{
    padding: 12px;
    text-align:center;
    border-right:1px solid #e6e6e6;
    background:#fff;
}
.mq-meta-row--val .mq-meta-td:last-child{border-right:none;}

.mq-cards{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mq-card{
    border:1px solid #e6e6e6;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
}

.mq-card-head{
    padding: 12px 14px;
    font-weight:700;
    background:#f6f7f8;
    border-bottom:1px solid #e6e6e6;
}

.mq-card-body{
    padding: 14px;
    min-height: 96px;
    line-height:1.6;
}

.mq-muted{ color:#888; }

.mq-link{
    color:#0b7b77;
    text-decoration:none;
}
.mq-link:hover{ text-decoration:underline; }

.mq-row-active td{
    background:#f2fbfa !important;
}

.mq-pager{
    display:flex;
    justify-content:center;
    margin-top: 14px;
}

.mq-yearform{  margin:0;   }
.mq-yearselect{
    height: 34px;
    border:1px solid #e6e6e6;
    border-radius:8px;
    padding:0 10px;
    background:#fff;
}
/* ===== table (bootstrap 없이도 보이게) ===== */
.mypage-qna-page .table-responsive{
    overflow-x: auto;
}

.mypage-qna-page table.table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.mypage-qna-page .table thead th{
    background: #f6f7f8;
    font-weight: 700;
    padding: 12px 10px;
    border: 1px solid #e6e6e6;
}

.mypage-qna-page .table tbody td{
    padding: 12px 10px;
    border: 1px solid #e6e6e6;
    vertical-align: middle;
}

.mypage-qna-page .table tbody tr:nth-child(even) td{
    background: #fafafa;
}

/* text helpers (bootstrap 대체) */
.mypage-qna-page .text-start{ text-align:left; }
.mypage-qna-page .text-center{ text-align:center; }
.mypage-qna-page .text-nowrap{ white-space:nowrap; }

/* ===== badge (bootstrap 없이도 보이게) ===== */
.mypage-qna-page .badge{
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

/* config/qna_state.php에서 쓰는 클래스들을 직접 스타일링 */
.mypage-qna-page .bg-primary{ background:#0d6efd; }
.mypage-qna-page .bg-success{ background:#198754; }
.mypage-qna-page .bg-info{ background:#0dcaf0; }
.mypage-qna-page .bg-warning{ background:#ffc107; }
.mypage-qna-page .bg-dark{ background:#212529; }

.mypage-qna-page .text-dark{ color:#212529 !important; }

/* ====== Responsive: 모바일 카드 리스트 ====== */
.mq-cards-mobile{ display:none; }

.mq-mcard{
    display:block;
    border:1px solid #e6e6e6;
    border-radius:12px;
    padding:12px 12px;
    background:#fff;
    text-decoration:none;
    color:inherit;
    margin-bottom:10px;
}

.mq-mcard.is-active{
    border-color:#0b7b77;
    box-shadow: 0 0 0 2px rgba(11,123,119,.08);
}

.mq-mcard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.mq-mno{
    font-weight:700;
    font-size:13px;
    color:#333;
}

.mq-mtitle{
    font-weight:700;
    font-size:15px;
    line-height:1.35;
    margin-bottom:10px;
    color:#0b7b77;
}

.mq-mmeta{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mq-mmeta-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
}

.mq-mmeta-k{
    color:#666;
    white-space:nowrap;
}

.mq-mmeta-v{
    color:#111;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width: 70%;
}

.mq-empty-mobile{
    border:1px dashed #e6e6e6;
    border-radius:12px;
    padding:18px 14px;
    text-align:center;
    color:#777;
    background:#fff;
}

/* ====== breakpoint ====== */
@media (max-width: 768px){
    .mypage-qna-page .mq-topbar{
        gap:10px;
    }

    /* 모바일: 테이블 숨김, 카드 표시 */
    .mq-table-wrap{ display:none; }
    .mq-cards-mobile{ display:block; }

    /* 연도 셀렉트/버튼도 모바일에서 자연스럽게 */
    .mypage-qna-page .mq-topbar{
        justify-content:space-between;
    }

    .mq-yearselect{ height:34px; }
    .mypage-qna-page .mq-btn{
        padding:8px 12px;
        font-size:14px;
    }
}



/* ===== PC 테이블 글자/간격 축소 ===== */
.mypage-qna-page .mq-list table.table{
    font-size: 13px;      /* 기본보다 살짝 작게 */
}

.mypage-qna-page .mq-list .table thead th{
    font-size: 13px;
    padding: 10px 8px;    /* 헤더 높이 줄이기 */
}

.mypage-qna-page .mq-list .table tbody td{
    font-size: 13px;
    padding: 10px 8px;    /* 행 높이 줄이기 */
}

/* 상태 배지도 같이 살짝 줄이기 */
.mypage-qna-page .mq-list .badge{
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
}
/* ===== show(상세) 모바일 가독성 개선 ===== */
@media (max-width: 768px){

    /* 상세 박스 패딩 살짝 축소 */
    .mypage-qna-page .mq-detail{
        padding: 12px;
    }

    /*  메타(문의분류/처리상태/등록일) : 3컬럼 -> 세로 카드형 */
    .mq-detail-meta{
        border-radius: 10px;
    }

    /* 헤더 row 숨기고(라벨은 각 항목에 붙임) */
    .mq-detail-meta .mq-meta-row:first-child{
        display:none;
    }

    /* 값 row를 1컬럼으로 */
    .mq-detail-meta .mq-meta-row.mq-meta-row--val{
        display: grid;
        grid-template-columns: 1fr;
    }

    .mq-detail-meta .mq-meta-row--val .mq-meta-td{
        border-right: none !important;
        border-bottom: 1px solid #e6e6e6;
        text-align: left;
        padding: 12px;
    }
    .mq-detail-meta .mq-meta-row--val .mq-meta-td:last-child{
        border-bottom: none;
    }

    /* 각 값 앞에 라벨을 붙여서 “한줄 요약” 형태로 */
    .mq-detail-meta .mq-meta-row--val .mq-meta-td:nth-child(1)::before{
        content:"문의분류";
        display:block;
        font-size:12px;
        color:#666;
        margin-bottom:6px;
        font-weight:600;
    }
    .mq-detail-meta .mq-meta-row--val .mq-meta-td:nth-child(2)::before{
        content:"처리상태";
        display:block;
        font-size:12px;
        color:#666;
        margin-bottom:6px;
        font-weight:600;
    }
    .mq-detail-meta .mq-meta-row--val .mq-meta-td:nth-child(3)::before{
        content:"등록일";
        display:block;
        font-size:12px;
        color:#666;
        margin-bottom:6px;
        font-weight:600;
    }

    /* 긴 문자열 줄바꿈 개선(문의분류/등록일 등) */
    .mq-detail-meta .mq-meta-td{
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /*  본문 카드: 2컬럼 -> 1컬럼 */
    .mq-cards{
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .mq-card-head{
        padding: 10px 12px;
        font-size: 14px;
    }

    .mq-card-body{
        padding: 12px;
        font-size: 13px;
        min-height: auto;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 배지 크기/줄바꿈 안전 */
    .mypage-qna-page .badge{
        font-size: 11px;
        padding: 4px 8px;
        white-space: nowrap;
    }
}