/* 반응형. 앞의 규칙을 덮어쓰므로 반드시 뒤에 와야 한다.
   원래 style.css 한 파일이었다. base.html 의 읽는 순서를 바꾸면
   나중 규칙이 앞 규칙을 덮어쓰는 순서가 깨진다. */

/* =========================
   반응형
   ========================= */

@media (max-width: 860px) {
  .container {
    padding: 16px 14px 60px;
  }

  .topbar {
    padding: 12px 14px;
  }

  .dashboard-filter-grid {
    grid-template-columns: 1fr;
  }

  .teacher-dashboard-table {
    display: none;
  }

  .teacher-student-card-list {
    display: block;
  }

  .attempt-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 21px;
  }

  .card {
    padding: 18px 16px;
  }

  .gauge-outer {
    width: 170px;
    height: 170px;
  }

  .gauge-inner {
    width: 134px;
    height: 134px;
  }

  .gauge-inner strong {
    font-size: 38px;
  }

  .solve-choice span {
    min-width: 44px;
    height: 44px;
  }

  .preview-summary-grid,
  .result-stat-row,
  .solve-mini-stats {
    gap: 8px;
  }
}

/* 복수정답 안내 문구 */
.multi-hint {
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
}


/* =========================
   표를 모바일에서 카드로 (v0.9)

   예전에는 같은 데이터를 <table> 과 카드 목록으로 두 번 그려서 DOM이 두 배가
   되고, 고칠 때 두 곳을 맞춰야 했다. 이제 표 하나만 두고 화면이 좁을 때
   CSS로만 카드처럼 쌓는다.

   쓰는 법: .table-wrap 에 table-cards 를 함께 주고,
            각 <td> 에 data-label="항목이름" 을 붙인다.
   ========================= */

@media (max-width: 640px) {
  .table-cards table,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: auto;
    min-width: 0;
  }

  /* 머리글은 각 칸의 data-label 로 대신한다 */
  .table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table-cards { overflow-x: visible; }

  .table-cards tr {
    background: var(--surface);
    box-shadow: var(--raised-sm);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }

  .table-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-align: left;
  }

  /* 라벨이 없는 칸은 버튼만 들어 있다. 세로로 쌓지 않고 한 줄에 나란히. */
  .table-cards td[data-label=""] {
    display: inline-flex;
    width: auto;
    padding: 8px 6px 0 0;
  }

  .table-cards td[data-label=""]::before { content: none; }

  .table-cards td .btn,
  .table-cards td form {
    margin: 0;
  }

  .table-cards td .btn { width: auto; }
}

/* 통계 4칸은 좁은 화면에서 2x2 로 (3+1 로 접히면 어색하다) */
@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}