/* ==========================================================================
   1. PC 및 공통 스타일 (기존 스타일 보완 및 초기화)
   ========================================================================== */
/* 감싸는 영역 초기화 및 여백 조정 */
[class^="s"][class*="_"] {
    box-sizing: border-box;
}

.inner {
    margin: 0 auto;
    box-sizing: border-box;
}

/* 테이블 공통 스타일 */
.AW_common_table.view {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 20px;
    border-top: 2px solid #333;
    table-layout: fixed; /* PC에서 비율 고정 */
}

.AW_common_table.view tr {
    border-bottom: 1px solid #e9ecef;
}

.AW_common_table.view th,
.AW_common_table.view td {
    padding: 12px 15px !important;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    height: auto !important; /* 고정 높이 제거 */
}

.AW_common_table.view th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
}

/* 본문 내용 영역 */
.AW_common_table.view tr:nth-last-child(1) td {
    word-break: break-all; /* 영문 긴 문자열 깨짐 방지 */
}

/* 본문 내부 이미지/비디오 자동 반응형 */
.AW_common_table.view td img,
.AW_common_table.view td video,
.AW_common_table.view td iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-bottom: 10px;
}

/* ==========================================================================
   2. 모바일 반응형 스타일 (화면 너비 768px 이하)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 패딩 조절 (모바일 화면에 맞게 줄임) */
    [class^="s"][class*="_"] {
        padding: 2.5rem 0 4rem !important;
    }
    
    .inner {
        padding: 0 15px;
    }

    /* 테이블 요소들을 전부 블록화하여 한 줄씩 차지하게 변경 */
    .AW_common_table.view,
    .AW_common_table.view tbody,
    .AW_common_table.view tr,
    .AW_common_table.view th,
    .AW_common_table.view td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    /* 1. 상단 정보 영역 (이름, 이메일, 작성일, 조회수) 세련되게 정렬 */
    .AW_common_table.view tr:nth-child(1) th,
    .AW_common_table.view tr:nth-child(1) td,
    .AW_common_table.view tr:nth-child(2) th,
    .AW_common_table.view tr:nth-child(2) td {
        display: inline-block !important; /* 좌우 매칭을 위해 인라인 블록화 */
        border: none !important;
    }

    /* 항목 이름(th) 스타일 조정 */
    .AW_common_table.view tr th {
        width: 25% !important;
        background-color: transparent !important; /* 모바일은 배경을 빼서 깔끔하게 */
        padding: 8px 0 8px 10px !important;
        color: #888;
        font-size: 13px;
    }

    /* 항목 내용(td) 스타일 조정 */
    .AW_common_table.view tr td {
        width: 75% !important;
        padding: 8px 10px 8px 0 !important;
        font-size: 14px;
    }

    /* 2. 파일첨부, 제목, 본문 영역은 가로 100% 꽉 차게 변경 */
    /* 가로줄(tr) 단독으로 떨어지는 부분들 처리 */
    .AW_common_table.view tr:has(td[colspan="3"]),
    .AW_common_table.view tr:has(td[colspan="4"]),
    .AW_common_table.view tr:has(td[colspan="85%"]) {
        display: block !important;
    }

    .AW_common_table.view tr:has(td[colspan]) th {
        width: 100% !important;
        background-color: #f8f9fa !important;
        padding: 10px 15px !important;
        border-bottom: 1px solid #edf2f7;
        color: #333;
    }

    .AW_common_table.view tr:has(td[colspan]) td {
        width: 100% !important;
        padding: 15px !important;
        colspan: none !important;
    }

    /* 본문 텍스트 영역 여백 확보 */
    .AW_common_table.view tr td[colspan="4"] {
        padding: 30px 10px !important;
    }

    /* 3. 이전글 / 다음글 모바일 최적화 */
    /* 이전글 다음글 테이블의 th, td 비율 조정 */
    .AW_common_table.view:last-of-type tr th {
        width: 20% !important;
        display: inline-block !important;
        background-color: transparent !important;
        padding: 12px 0 12px 10px !important;
    }
    
    .AW_common_table.view:last-of-type tr td {
        width: 80% !important;
        display: inline-block !important;
        padding: 12px 10px 12px 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 제목이 너무 길면 말줄임표(...) 처리 */
        vertical-align: middle;
    }
}