/*
테이블 UI 모바일에서 카드형으로 보이게 (Dark 템플릿 대응)
mobile.table.dark.css
*/

@media (max-width: 768px) {
  .table-card {
    border: 0;
  }
  .table-card thead,
  .table-card colgroup {
    display: none;
  }
  .table-card tr {
    display: block;
    border: 1px solid #333;
    border-radius: .5rem;
    margin-bottom: .75rem;
    background: #1e1e1e;
  }
  .table-card tr.align-middle {
    padding: 0;
  }
  .table-card td {
    display: block;
    width: 100%;
    border: 0 !important;
    padding: .75rem 1rem;
    color: #ccc;
  }
  .table-card td.panel {
    background-color: #2d2d2d;
    font-weight: 600;
    border-bottom: 1px solid #444 !important;
    color: #fff;
    margin: 0;
  }
  .table-card .form-control,
  .table-card .form-select,
  .table-card textarea {
    width: 100% !important;
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #eee;
  }
  .table-card .d-inline-block {
    display: block !important;
    width: 100% !important;
  }
  .table-card .help-text {
    display: block;
    margin-top: .25rem;
    color: #888;
    font-size: .9rem;
  }
  .table-card .sound-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
    flex-wrap: wrap;
  }
  .table-card .audio-compact {
    height: 28px;
    width: 120px;
  }
  .table-card .action-row td {
    padding: .75rem 1rem;
  }
  .table-card .action-row .btn {
    width: 100%;
    margin: .25rem 0;
  }
  .table-card .action-row .btn + .btn {
    margin-left: 0;
  }
}

/* 모바일 list table => card 스타일 */
@media (max-width: 768px) {
  .table-card-list {
    border: 0;
  }
  .table-card-list thead {
    display: none;
  }
  .table-card-list tr {
    display: block;
    border: 1px solid #333;
    border-radius: .5rem;
    margin-bottom: .75rem;
    background-color: #1e1e1e;
  }
  .table-card-list td {
    display: block;
    width: 100%;
    border: 1px solid #333;
    padding: .5rem .75rem;
    text-align: left !important;
    color: #ccc;
  }
  .table-card-list td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: .25rem;
    color: #bbb;
  }
}

/* 버튼 그리드 */
.action-grid {
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  display: grid;
}

@media (min-width: 768px) {
  .action-grid {
    grid-template-columns: 150px 150px;
    justify-content: center;
  }
}

/* select 기본 스타일 */
#menuSelect {
  background-color: #222;
  color: #fff;
  font-weight: bold;
  border: 1px solid #444;
}