/* ═══════════════════════════════════════════════════════════════════════════
   cert-dash.css — 정적 종목 홈 대시보드(구역 A·B·C) 스타일.
   근거: ORDER-DH-A 1-3, tokens.css, cert-home.css
   색·간격·글자 크기는 tokens.css 의 변수만 사용.
   밝음·어두움(data-mode)·큰 글씨(data-size="large") 대응.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 구역 B: 지금 할 일 카드 ── */
.dash-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--radius-md) var(--radius-lg);
  margin: var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--touch-min) * 1.5);
  box-sizing: border-box;
}

.dash-card-main {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.4;
  color: var(--foreground);
  word-break: keep-all;
}

@media (max-width: 640px) {
  .dash-card-main {
    min-height: calc(1.4em * 2);
  }
}

.dash-dn {
  color: var(--primary-strong);
  white-space: nowrap;
}

.dash-card-next {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.4;
  margin-top: var(--omr-gap);
  word-break: keep-all;
  min-height: calc(var(--text-sm) * 1.4);
}

/* ── 2. 구역 C: 일정표 컨테이너 및 제목 ── */
.dash-schedule {
  margin-top: var(--radius-lg);
  margin-bottom: var(--radius-lg);
}

.dash-schedule-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--foreground);
  margin: var(--radius-lg) 0 var(--radius-sm);
}

.dash-series-group {
  margin-top: var(--radius-md);
  margin-bottom: var(--radius-md);
}

.dash-series-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--foreground);
  margin: var(--radius-sm) 0 var(--omr-gap);
}

.dash-no-rounds {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: var(--omr-gap) 0;
}

/* ── 3. 일정표 테이블 (가로 넘침 방지 래퍼) ── */
.dash-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-top: var(--omr-gap);
  margin-bottom: var(--radius-sm);
  box-sizing: border-box;
}

.dash-table {
  width: 100%;
  min-width: 38.75rem; /* 620px 상당 rem 토큰 변환 */
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--card-foreground);
}

.dash-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dash-table th,
.dash-table td {
  padding: var(--omr-gap) var(--radius-sm);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

.dash-table thead th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 700;
  font-size: var(--text-xs);
}

.dash-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--foreground);
}

.dash-table tbody tr:last-child th,
.dash-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 640px) {
  .dash-table-wrap {
    overflow-x: hidden;
    border: none;
    background: transparent;
  }

  .dash-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .dash-table thead {
    /* 접근성 트리 보존을 위해 display:none 대신 시각적 클리핑 적용 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .dash-table tbody {
    display: block;
    width: 100%;
  }

  .dash-table tbody tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--radius-md);
    padding: var(--radius-sm) var(--radius-md);
    box-sizing: border-box;
  }

  .dash-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .dash-table th.dash-col-round {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--omr-gap) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
    white-space: normal;
  }

  .dash-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--radius-xs);
    padding: var(--omr-gap) 0;
    border-bottom: 1px dashed var(--border);
    white-space: normal;
    text-align: right;
  }

  .dash-table tbody tr td:last-child {
    border-bottom: none;
  }

  .dash-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    margin-right: var(--radius-sm);
    text-align: left;
    flex-shrink: 0;
  }

  .dash-table td .dash-extra-reg {
    width: 100%;
    text-align: right;
    margin-top: calc(var(--radius-xs) / 2);
  }
}

/* ── 4. 일정 변경됨 뱃지 및 추가 접수 ── */
/* 테두리 굵기 1px solid 및 sr-only의 1px 자르기는 접근성/테두리 표준 예외 */
.dash-changed {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--highlight-foreground);
  background: var(--highlight);
  padding: 0.1em var(--omr-gap);
  border-radius: var(--radius-xs);
  font-weight: 700;
  margin-left: var(--omr-gap);
  vertical-align: middle;
}

.dash-changed-row {
  background: var(--accent);
}

.dash-extra-reg {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: calc(var(--radius-xs) / 2);
}

/* ── 5. 지난 회차 접기/펼치기 (<details>) ── */
.dash-past-details {
  margin-top: var(--radius-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
}

.dash-past-summary {
  padding: var(--radius-sm) var(--radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.dash-past-summary:hover,
.dash-past-summary:focus-visible {
  color: var(--foreground);
  background: var(--accent);
}

.dash-past-details .dash-table-wrap {
  margin: var(--omr-gap) var(--radius-sm) var(--radius-sm);
  border: 1px solid var(--border);
}

/* ── 일정표 아래 안내·링크 한 줄 (H-0780 안내 문구 · H-0205 안내 글 링크 자리) ──
   dash-schedule-guide: 일정표 끝에 붙는 짧은 안내 문단(데일리룰 한 줄).
   dash-schedule-link: 안내 글(원서접수 방법)로 건 링크 — 문단 없이 단독으로도 쓴다. */
.dash-schedule-guide {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: var(--omr-gap) 0 var(--radius-sm);
  word-break: keep-all;
}
.dash-schedule-guide a,
.dash-schedule-link {
  color: var(--primary-strong);
  text-decoration: none;
  font-weight: 600;
}
.dash-schedule-guide a:hover,
.dash-schedule-guide a:focus-visible,
.dash-schedule-link:hover,
.dash-schedule-link:focus-visible {
  text-decoration: underline;
}
.dash-schedule-link {
  display: inline-block;
  font-size: var(--text-sm);
  margin: var(--omr-gap) 0 var(--radius-sm);
}