/*
  반응형 테이블 — 2단계 / M0 (기반)
  ────────────────────────────────────────────────────────────────────────────
  목적: PC 전용 테이블을 모바일에서 카드 형태로 변환.
  같은 <table> 마크업을 그대로 두고 CSS 만으로 분기.

  메타데이터:
    <th data-priority="essential|important|optional">  - 컬럼 우선순위
    <th data-mobile-slot="title|meta|body|footer|action|hidden"> - 모바일 카드 슬롯
    <td data-priority="..."> data-mobile-slot="..."   - 본문 셀에도 동일하게 부여
    <td data-mobile-label="라벨">                      - 모바일에서 셀 앞에 라벨 노출(선택)

  브레이크포인트:
    >= 1200px : 모든 컬럼 노출(기본)
    768~1199px : optional 컬럼 숨김
    < 768px   : 카드 모드 (table → block grid)

  로드 순서: bootstrap.min.css → bootstrap-icons.css → tokens.css → style.css →
            shell.css → responsive-table.css (마지막)
*/

/* ───────────────────────────────────────────────────────────────────────────
   1. 데스크톱(1200px+) — 기본 테이블 그대로
   ─────────────────────────────────────────────────────────────────────── */
.responsive-table { width: 100%; }

/* ───────────────────────────────────────────────────────────────────────────
   2. 태블릿/소형 노트북 (768~1199px) — optional 컬럼 숨김
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .responsive-table th[data-priority="optional"],
    .responsive-table td[data-priority="optional"] { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. 모바일 (<768px) — 카드 모드
   - title  : 1행 1열
   - action : 1행 2열 (아이콘만, 컴팩트)
   - meta / body / footer : grid-column 1 / -1, 자동 흐름
   - 라벨(data-mobile-label)은 옅은 톤 + 일정 최소폭으로 정렬되어
     값이 위아래로 정렬되도록 함 → "직관적이고 깔끔한" 카드
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* 컨테이너의 가로 스크롤 제거 — 카드 모드에서는 불필요 */
    .responsive-table {
        overflow-x: visible;
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    .responsive-table > .table-responsive {
        overflow-x: visible;
    }

    /* 테이블 구조를 모두 block 화 */
    .responsive-table table,
    .responsive-table thead,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table th,
    .responsive-table td { display: block; width: 100%; }

    /* 헤더는 비표시(라벨이 필요한 경우 td[data-mobile-label] 로 대체) */
    .responsive-table thead { display: none; }

    /* 행을 카드로 변환 — 2열 grid 로 meta 슬롯이 가로 2열로 자연 흐름 */
    .responsive-table tbody tr {
        background: var(--ks-surface);
        border: 1px solid var(--ks-border);
        border-radius: var(--ks-r-lg);
        padding: 10px 10px 10px 12px;
        margin: 0 0 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        box-shadow: var(--ks-shadow-1);
    }

    /* 공통 셀 리셋 */
    .responsive-table td {
        padding: 0;
        border: none;
        text-align: left !important;
        min-width: 0;
    }

    /* ─── 1행: 닉네임(좌) + 액션(우) ─────────────────────────────── */
    .responsive-table td[data-mobile-slot="title"] {
        grid-column: 1;
        grid-row: 1;
        font-weight: var(--ks-fw-semi);
        font-size: var(--ks-fs-md);
        align-self: center;
    }
    .responsive-table td[data-mobile-slot="action"] {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        display: flex;
        gap: 4px;
        flex-wrap: nowrap;
    }
    /* action 슬롯이 없는 행 — title 이 1행 전체 폭 차지 */
    .responsive-table tbody tr:not(:has(td[data-mobile-slot="action"])) td[data-mobile-slot="title"] {
        grid-column: 1 / -1;
    }

    /* 카드 내 액션 버튼 — 아이콘 칩 (텍스트 숨김), 3개까지 우상단에 들어가도록 더 컴팩트 */
    .responsive-table td[data-mobile-slot="action"] .btn {
        padding: 0.25rem 0.45rem;
        font-size: 0.78rem;
        line-height: 1;
        min-height: 32px;
    }
    .responsive-table td[data-mobile-slot="action"] .btn > i.bi {
        margin-right: 0 !important;
        font-size: 0.95rem;
    }
    .responsive-table td[data-mobile-slot="action"] .btn > span {
        display: none;
    }

    /*
      ─── meta 슬롯 — 자동 분기 (stat / inline) ─────────────────────
      편집 컨트롤(select/input/btn)이 들어가는 셀: 라벨 위/값 아래 stat 패턴
      표시 전용 셀(텍스트/badge): 라벨+값 한 줄 inline 패턴 (더 컴팩트)
      meta-full: 1행 전체를 차지하는 변종 (초대권 select 등 폭이 필요한 항목용).
    */
    .responsive-table td[data-mobile-slot="meta"],
    .responsive-table td[data-mobile-slot="meta-full"] {
        padding: 2px 0;
        font-size: var(--ks-fs-sm);
        color: var(--ks-text);
        min-width: 0;
    }
    .responsive-table td[data-mobile-slot="meta"] {
        grid-column: span 1;
    }
    .responsive-table td[data-mobile-slot="meta-full"] {
        grid-column: 1 / -1;
    }

    /* 폼 컨트롤이 있는 meta: 라벨(위) / 값(아래) stat 패턴 */
    .responsive-table td[data-mobile-slot="meta"]:has(.form-select, .form-control, .btn),
    .responsive-table td[data-mobile-slot="meta-full"]:has(.form-select, .form-control, .btn) {
        display: grid;
        grid-template-rows: auto auto;
        align-content: start;
        gap: 1px;
    }
    .responsive-table td[data-mobile-slot="meta"]:has(.form-select, .form-control, .btn)[data-mobile-label]::before,
    .responsive-table td[data-mobile-slot="meta-full"]:has(.form-select, .form-control, .btn)[data-mobile-label]::before {
        content: attr(data-mobile-label);
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--ks-text-subtle);
        line-height: 1.1;
    }

    /* 폼 컨트롤이 없는 meta: 라벨(좌) + 값(우) inline 패턴 — 더 컴팩트 */
    .responsive-table td[data-mobile-slot="meta"]:not(:has(.form-select, .form-control, .btn)),
    .responsive-table td[data-mobile-slot="meta-full"]:not(:has(.form-select, .form-control, .btn)) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
    }
    .responsive-table td[data-mobile-slot="meta"]:not(:has(.form-select, .form-control, .btn))[data-mobile-label]::before,
    .responsive-table td[data-mobile-slot="meta-full"]:not(:has(.form-select, .form-control, .btn))[data-mobile-label]::before {
        content: attr(data-mobile-label);
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--ks-text-subtle);
        flex: 0 0 auto;
    }

    /*
      ─── body 슬롯 — 항상 1행 전체 (긴 텍스트 가능성) ───
      라벨+값 가로 배치 유지.
    */
    .responsive-table td[data-mobile-slot="body"] {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        font-size: var(--ks-fs-sm);
        color: var(--ks-text);
        padding: 2px 0;
    }
    .responsive-table td[data-mobile-slot="body"][data-mobile-label]::before {
        content: attr(data-mobile-label);
        flex: 0 0 auto;
        min-width: 4em;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--ks-text-subtle);
    }

    /* ─── footer 슬롯 — 카드 맨 아래, 구분선 위 ────────────────── */
    .responsive-table td[data-mobile-slot="footer"] {
        grid-column: 1 / -1;
        order: 10;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        font-size: var(--ks-fs-sm);
        color: var(--ks-text-muted);
        padding-top: 6px;
        border-top: 1px solid var(--ks-border);
        margin-top: 4px;
    }
    .responsive-table td[data-mobile-slot="footer"][data-mobile-label]::before {
        content: attr(data-mobile-label);
        flex: 0 0 auto;
        min-width: 4em;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--ks-text-subtle);
    }

    .responsive-table td[data-mobile-slot="hidden"] {
        display: none;
    }

    /* ─── 편집 컨트롤 자연 폭 — 카드 1셀 폭에 들어가도록 ─────────── */
    .responsive-table td[data-mobile-slot="meta"] .form-select,
    .responsive-table td[data-mobile-slot="meta"] .form-control,
    .responsive-table td[data-mobile-slot="meta-full"] .form-select,
    .responsive-table td[data-mobile-slot="meta-full"] .form-control,
    .responsive-table td[data-mobile-slot="body"] .form-select,
    .responsive-table td[data-mobile-slot="body"] .form-control {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* 터치 타깃 — 1셀 안에서도 충분한 높이 보장 */
    .responsive-table td[data-mobile-slot="meta"] .btn,
    .responsive-table td[data-mobile-slot="meta"] .form-select,
    .responsive-table td[data-mobile-slot="meta"] .form-control,
    .responsive-table td[data-mobile-slot="meta-full"] .form-select,
    .responsive-table td[data-mobile-slot="meta-full"] .form-control,
    .responsive-table td[data-mobile-slot="body"] .form-select,
    .responsive-table td[data-mobile-slot="body"] .form-control {
        min-height: 36px;
    }
    .responsive-table td[data-mobile-slot="meta"] .form-select-sm,
    .responsive-table td[data-mobile-slot="meta"] .form-control-sm,
    .responsive-table td[data-mobile-slot="meta-full"] .form-select-sm,
    .responsive-table td[data-mobile-slot="meta-full"] .form-control-sm,
    .responsive-table td[data-mobile-slot="body"] .form-select-sm,
    .responsive-table td[data-mobile-slot="body"] .form-control-sm {
        min-height: 36px;
        font-size: var(--ks-fs-sm);
    }
}