/* 테이블 헤더 한글화 및 상단 여백 */
.mcb-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; border-top: 2px solid #333; }
.mcb-table th { padding: 15px 10px; background: #fcfcfc; border-bottom: 1px solid #ddd; color: #333; font-weight: 700; }
.mcb-table td { padding: 15px 10px; border-bottom: 1px solid #eee; text-align: center; color: #666; }

/* 제목 셀 내의 텍스트와 아이콘 정렬 */
.mcb-title-cell { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* 왼쪽 정렬 유지 */
    gap: 8px; /* 제목과 아이콘 사이 간격 */
    text-align: left !important; 
    color: #333 !important; 
    cursor: pointer; 
}

/* 자물쇠 아이콘을 뒤로 보내기 위해 order 속성 사용 가능 */
.mcb-icon-lock { 
    order: 2; /* 텍스트 뒤에 배치 */
    color: #f39c12; 
    font-size: 13px; 
}

/* 답변 상태 배지 */
.status-waiting { color: #e74c3c; font-weight: bold; font-size: 13px; }
.status-completed { color: #2ecc71; font-weight: bold; font-size: 13px; }

/* 푸터 및 버튼 디자인 */
.mcb-footer { display: flex; justify-content: flex-end; margin-top: 15px; }
.mcb-btn-write { 
    background: #ff3366; /* 마닌포스트 메인 톤에 맞춘 핑크색 */
    color: #fff; 
    border: none; 
    padding: 10px 25px; 
    font-size: 14px; 
    font-weight: bold; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: background 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.mcb-btn-write:hover { background: #e62e5c; }

/* 질문/답변 텍스트 왼쪽 정렬 */
.mcb-inner-content { text-align: left !important; }

/* 질문 박스 스타일 */
.q-box { 
    padding: 10px 15px; 
    background: #f9f9f9; 
    border-radius: 4px; 
    margin-bottom: 10px; 
    font-size: 18px;
}

/* 답변 박스 스타일 (역엔터 화살표 추가) */
.a-box { 
    position: relative;
    margin-top: 10px; 
    padding: 15px 15px 15px 40px; /* 왼쪽에 아이콘 들어갈 공간 확보 */
    background: #f0f8ff; 
    border-radius: 4px; 
    border-top: 1px dashed #ddd;
}

/* ㄴ자 역엔터 화살표 아이콘 */
.a-box::before {
    content: '↳'; 
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 20px;
    color: #007bff;
    font-weight: bold;
}

/* 관리자 답변 입력창 정렬 */
.admin-reply-box { text-align: left; }

/* =========================
   모바일 레이아웃 (반응형)
   ========================= */
   @media (max-width: 768px) {
    /* 테이블을 카드 리스트처럼 보이게 */
    .mcb-table {
        border-top: none;
        margin: 10px 0;
        font-size: 14px;
    }

    .mcb-table thead {
        display: none;
    }

    .mcb-table tbody tr {
        border-bottom: 8px solid #f5f5f5;
    }

    /* 목록 행 스타일 - Flexbox 도입 (핵심 수정) */
    .mcb-table tr.mcb-row {
        display: flex;             /* block 대신 flex 사용 */
        flex-wrap: wrap;           /* 내용이 넘치면 줄바꿈 허용 */
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        margin-bottom: 10px;
        overflow: hidden;
        width: 100%;               /* 가로폭 꽉 채우기 */
        box-sizing: border-box;    /* 패딩 포함 크기 계산 */
    }

    .mcb-table tr.mcb-row td {
        display: block;
        text-align: left;
        border-bottom: none;
        padding: 6px 12px;
    }

    /* 번호: 모바일 숨김 */
    .mcb-table tr.mcb-row td:nth-child(1) {
        display: none;
    }

    /* 제목: 최상단에 100% 너비 차지 */
    .mcb-table tr.mcb-row td:nth-child(2) {
        width: 100%;               /* 한 줄 독차지 */
        margin-top: 4px;
        font-size: 15px;
        font-weight: 600;
        padding: 8px 12px;         /* 터치하기 좋게 패딩 미세 조정 */
        box-sizing: border-box;
    }

    /* 작성자 / 날짜 / 상태: 3등분 자동 정렬 (핵심 수정) */
    .mcb-table tr.mcb-row td:nth-child(3),
    .mcb-table tr.mcb-row td:nth-child(4),
    .mcb-table tr.mcb-row td:nth-child(5) {
        display: block;
        flex: 1;                   /* 남은 공간을 1:1:1로 공평하게 가짐 */
        width: auto;               /* 가로 사이즈 자동 */
        box-sizing: border-box;
        font-size: 12px;
        color: #555;
        border-top: 1px solid #f1f1f1; /* 제목과 구분선 살짝 추가 */
        border-bottom: none;
        padding: 8px 5px 12px;     /* 위아래 여백 균형 */
        text-align: center;
    }

    /* 가상 요소(Label) 숨김 유지 */
    .mcb-table tr.mcb-row td:nth-child(3)::before,
    .mcb-table tr.mcb-row td:nth-child(4)::before,
    .mcb-table tr.mcb-row td:nth-child(5)::before {
        content: "";
        display: none;
    }

    /* 제목 셀 왼쪽 정렬 유지 */
    .mcb-title-cell {
        padding-left: 12px !important; /* 혹시 모를 상속 방지 */
    }

    /* 아코디언 내용 행 (기존 유지) */
    .mcb-table tr.mcb-content-area {
        display: none; /* 기본 숨김 상태여야 함 (JS로 토글) */
        /* JS에서 display:block 등으로 바뀔 때를 대비해 아래 속성은 유지 */
    }
    
    /* JS가 display:table-row 등을 줄 수 있으므로 강제 스타일 지정 */
    .mcb-table tr.mcb-content-area[style*="display: table-row"],
    .mcb-table tr.mcb-content-area[style*="display: block"] {
        display: block !important; /* 모바일에선 블록으로 강제 */
        width: 100%;
        background: #fafafa;
        box-sizing: border-box;
    }

    .mcb-table tr.mcb-content-area td {
        display: block;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 버튼 스타일 조정 */
    #mcb-board-container .mcb-header {
        margin-bottom: 12px;
    }
    #mcb-board-container .mcb-header .mcb-btn-write {
        padding: 8px 18px;
        font-size: 13px;
    }
}