/* ==========================================================
   Responsive CSS - 테이블 → 카드 전환 + 레이아웃 반응형
   ========================================================== */

/* viewport meta 보장 */
@viewport { width: device-width; }

/* ── 991px 이하: 테이블 → 카드 전환 ── */
@media (max-width: 991px) {

    /* 테이블 컨테이너 */
    .table-box { overflow-x: visible; white-space: normal; }
    .table-box table { border: none; }
    .table-box table thead { display: none; }

    /* 각 행 → 카드 */
    .table-box table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #686868;
        border-radius: 8px;
        padding: 12px;
        background: #2a2a2a;
    }

    /* 각 셀 → flex 레이아웃 */
    .table-box table tbody tr td {
        display: flex;
        align-items: center;
        padding: 6px 0;
        border: none;
        text-align: left;
        white-space: normal;
        word-break: break-all;
    }

    /* data-label 레이블 영역 */
    .table-box table tbody tr td::before {
        content: attr(data-label);
        width: 100px;
        min-width: 100px;
        flex-shrink: 0;
        font-weight: 500;
        color: #d9d9d9;
        font-size: 13px;
    }

    /* data-label 없는 td는 레이블 영역 제거 */
    .table-box table tbody tr td:not([data-label])::before,
    .table-box table tbody tr td[data-label=""]::before {
        display: none;
    }

    /* data-label 없는 td: 버튼 영역 (inline) */
    .table-box table tbody tr td:not([data-label]),
    .table-box table tbody tr td[data-label=""] {
        display: inline-flex;
        padding: 4px 4px 4px 0;
    }

    /* 카드 내 링크 정렬 */
    .table-box table tbody tr td a {
        text-align: left;
    }

    /* subject ellipsis 해제 */
    .table-box table tbody tr td a.subject {
        overflow: visible;
        white-space: normal;
        text-overflow: unset;
        max-width: none;
    }

    /* 카드 내 버튼 영역 */
    .table-box table tbody tr td .button-box {
        width: auto;
        margin: 0;
    }

    /* 빈 데이터 행 (colspan) */
    .table-box table tbody tr td[colspan] {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .table-box table tbody tr td[colspan]::before {
        display: none;
    }

    /* 체크박스 td */
    .table-box table tbody tr td.td-checkbox {
        display: inline-flex;
        width: auto;
    }

    /* 이미지 축소 */
    .table-box table tbody tr td img.drink-img {
        width: 80px;
        height: auto;
    }

    /* ── 타이틀 영역 반응형 ── */
    .title-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    .title-box h2 { font-size: 18px; }
    .title-box .button-box {
        width: 100%;
        justify-content: flex-end;
    }

    /* ── 검색 영역 반응형 ── */
    .search-box {
        flex-direction: column;
        gap: 8px;
    }
    .search-box select,
    .search-box input[type="text"],
    .search-box input[type="search"],
    .search-box .btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* ── 버튼 영역 줄바꿈 ── */
    .button-box {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── 페이징 반응형 ── */
    .paging-box ul {
        gap: 4px;
    }
    .paging-box ul li {
        margin: 0 3px;
    }
    .paging-box ul li a,
    .paging-box ul li p {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* ── 포스터 그리드 반응형 (post_change) ── */
    .poster-box ul {
        margin: 0 -6px -12px;
    }
    .poster-box ul li {
        width: calc(50% - 12px);
        margin: 0 6px 12px;
    }

    /* ── 대시보드 테이블 반응형 (table-responsive / table-flush) ── */
    .table-responsive { overflow-x: visible; }
    .table-responsive table thead { display: none; }
    .table-responsive table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #686868;
        border-radius: 8px;
        padding: 12px;
        background: #2a2a2a;
    }
    .table-responsive table tbody tr td {
        display: flex;
        align-items: center;
        padding: 6px 0;
        border: none;
        text-align: left;
        white-space: normal;
    }
    .table-responsive table tbody tr td::before {
        content: attr(data-label);
        width: 100px;
        min-width: 100px;
        flex-shrink: 0;
        font-weight: 500;
        color: #d9d9d9;
        font-size: 13px;
    }
    .table-responsive table tbody tr td:not([data-label])::before,
    .table-responsive table tbody tr td[data-label=""]::before {
        display: none;
    }

    /* ── blind-area 반응형 (src/list.php) ── */
    .blind-area > li {
        flex-direction: column;
    }
    .blind-area > li .b-header,
    .blind-area > li .b-body {
        width: 100% !important;
    }
    .blind-area > li .b-body > li {
        flex-direction: column;
    }
    .blind-area > li .b-body > li > div {
        width: 100% !important;
    }

    /* ── 회원가입 폼 반응형 (join.php) ── */
    #joinContainer {
        margin-top: 60px !important;
        padding: 20px 15px !important;
    }
    .gs_loginBox ul li {
        flex-wrap: wrap;
        gap: 8px;
    }
    .gs_loginBox ul li input[type="text"],
    .gs_loginBox ul li input[type="password"],
    .gs_loginBox ul li input[type="number"] {
        width: 100% !important;
    }
    .txConfigTbl {
        width: 95% !important;
    }

    /* ── 텍스트 박스 반응형 ── */
    .text-box {
        font-size: 13px;
        line-height: 1.4;
    }

    /* ── 컨테이너 패딩 조정 ── */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ── structure/list.php 레이블 너비 확장 ── */
@media (max-width: 991px) {
    .table-box.structure-table table tbody tr td::before {
        width: 110px;
        min-width: 110px;
    }
}

/* ── tournament/list.php 카드 전환 ── */
@media (max-width: 991px) {
    .tournament-table-box { display: none; }
    .m-tournament-cards { display: block; }
}

/* ── 767px 이하: 모바일 추가 조정 ── */
@media (max-width: 767px) {

    /* 포스터 1열 */
    .poster-box ul li {
        width: calc(100% - 12px);
    }

    /* 컨테이너 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 타이틀 */
    .title-box h2 { font-size: 16px; }

    /* 카드 내 패딩 축소 */
    .table-box table tbody tr {
        padding: 10px;
    }
    .table-responsive table tbody tr {
        padding: 10px;
    }

    /* 폰트 축소 */
    .table-box table tbody tr td {
        font-size: 13px;
    }
    .table-box table tbody tr td::before {
        font-size: 12px;
    }

    /* 페이징 축소 */
    .paging-box ul li a,
    .paging-box ul li p {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    /* 회원가입 */
    #joinContainer {
        margin-top: 40px !important;
    }

    /* 주소검색 레이어 모바일 */
    #layer {
        width: 90% !important;
        left: 5% !important;
    }

    /* 토너먼트 카드 모바일 미세조정 */
    .tc-card-body { padding: 10px 12px; }
    .tc-card-actions { padding: 8px 12px; gap: 4px; }
    .tc-game-name { font-size: 13px; }
}