/* ==========================================================================
   attendance-sheet 전용 스타일

   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 툴의 도메인(가로 A4 용지, 출석 표, 공휴일 목록)만 둡니다.

   🔴 인라인 style 금지 — 서버 CSP 가 style-src 'self' 라 style="" 은 차단됩니다.
      치수·상태는 data-* 로 넘기고 여기서 받습니다.
   🔴 인쇄물(.sheet 안)에는 --ink-* 만 씁니다. --color-* 를 쓰면 다크 모드에서
      밝은 회색이 되어 흰 종이에 거의 안 찍힙니다.
   ========================================================================== */

/* --- 입력 폼 --------------------------------------------------------------- */

/* 좁은 화면에서는 한 줄에 하나, 넓어지면 둘씩 */
.field-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 요일 7개. 375px 에서 7칸은 44px 이 안 나오므로 두 줄로 접습니다. */
.option-grid--week {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 620px) {
  .option-grid--week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* 표기 기호 네 칸 */
.mark-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px) {
  .mark-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.field-label--small {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

.text-input--mark {
  text-align: center;
  font-size: var(--text-lg);
}

.sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.sample-row .field-hint { margin: 0; }

.form-actions--wrap { flex-wrap: wrap; }

/* --- 체크 한 줄 -------------------------------------------------------------
   라벨 전체가 44px 짜리 누름 영역입니다.
   ------------------------------------------------------------------------- */
.check-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  cursor: pointer;
}

.check-row input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.check-row--lead {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-bold);
}

/* --- 공휴일 상자 ------------------------------------------------------------ */
.holiday-box {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}

.holiday-box__head {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.holiday-list {
  display: grid;
  gap: var(--space-1);
}

.holiday-list__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.notice--warn {
  margin-top: var(--space-3);
  border: 1px solid var(--color-warning);
  background: var(--color-surface);
  color: var(--color-warning);
  font-weight: var(--weight-bold);
}

.closure-field { margin-top: var(--space-4); }

/* --- 미리보기 ---------------------------------------------------------------
   A4 가로 용지는 어떤 화면보다도 넓습니다. 미리보기 안에서만 가로로 스크롤시켜
   페이지 전체가 밀리지 않게 합니다. 인쇄에는 영향이 없습니다.
   ------------------------------------------------------------------------- */
.sheet-stack {
  display: grid;
  gap: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.print-scope { margin-top: var(--space-5); }

/* --- A4 가로 용지 -----------------------------------------------------------
   print-sheet.css 의 .sheet 는 세로(210 x 297mm) 기준입니다.
   여기서 가로(297 x 210mm)로 되돌립니다. 이 파일이 뒤에 로드되므로 같은 특정도로 이깁니다.
   여백 15mm 를 빼면 본문은 267 x 180mm 입니다.

   🔴 인쇄에서는 min-height 를 두지 않습니다. 한 장의 내용이 180mm 를 아주 조금만
      넘어도 빈 두 번째 장이 따라 나오기 때문입니다. 장 나눔은 print-sheet.css 의
      `.sheet { break-before: page }` 가 이미 맡고 있습니다.
   ------------------------------------------------------------------------- */
@page {
  size: A4 landscape;
  margin: 15mm;
}

.sheet--land {
  width: 267mm;
  min-height: 0;
}

@media screen {
  .sheet--land {
    width: 297mm;
    max-width: none;
    min-height: 210mm;
    padding: 15mm;
  }
}

.sheet--land .sheet-head {
  margin-bottom: 3mm;
  padding-bottom: 2mm;
}

.sheet--land .sheet-meta {
  font-size: 9pt;
  color: var(--ink-700);
}

.sheet--land .sheet-foot {
  margin-top: auto;
  padding-top: 2mm;
}

/* --- 출석 표 ----------------------------------------------------------------
   colgroup 이 고정 열(번호·이름·출석률·비고)의 너비를 잡고,
   table-layout: fixed 가 남는 폭을 날짜 열에 똑같이 나눠 줍니다.
   ------------------------------------------------------------------------- */
.att-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 9pt;
}

/* 화면 낭독기용 표 설명. 눈으로는 보이지 않습니다. */
.att-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.att-table .col-no { width: 10mm; }
.att-table .col-name { width: 26mm; }
.att-table .col-rate { width: 18mm; }
.att-table .col-note { width: 24mm; }

.att-table th,
.att-table td {
  padding: 0;
  border: 0.4pt solid var(--ink-400);
  color: var(--ink-900);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

.att-th {
  height: 5.5mm;
  border-color: var(--ink-700);
  background: transparent;
  font-size: 8.5pt;
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.att-th--name { padding: 0 1.5mm; }
.att-th--wd { font-size: 8pt; font-weight: var(--weight-normal); color: var(--ink-600); }

/* --- 휴강 칸 ----------------------------------------------------------------
   색만으로 구분하지 않습니다. 빗금 + "휴" 글자를 함께 둡니다(SC 1.4.1).
   빗금은 브라우저 배경 인쇄 설정이 꺼져 있으면 사라질 수 있어 글자가 본체입니다.
   ------------------------------------------------------------------------- */
.att-cell--closed,
.att-th.is-closed {
  background-image: repeating-linear-gradient(
    45deg,
    var(--ink-300) 0,
    var(--ink-300) 0.4mm,
    transparent 0.4mm,
    transparent 2mm
  );
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.att-closed {
  display: inline-block;
  font-size: 8pt;
  color: var(--ink-600);
}

/* --- 본문 칸 ----------------------------------------------------------------- */
.att-no {
  height: 8.5mm;
  font-size: 8.5pt;
  color: var(--ink-600);
}

.att-name {
  padding: 0 1.5mm;
  font-size: 9.5pt;
  font-weight: var(--weight-normal);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.att-cell { height: 8.5mm; }

/* 표기 버튼 — 인쇄물에서는 그냥 빈칸으로 보여야 합니다. */
.att-mark {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-900);
  font-size: 11pt;
  line-height: 1;
  text-align: center;
}

.att-rate {
  padding: 0 1mm;
  font-size: 9pt;
  line-height: 1.1;
}

.att-rate__value { display: block; }

.att-rate__detail {
  display: block;
  font-size: 7.5pt;
  color: var(--ink-600);
}

.att-note { height: 8.5mm; }

/* --- 화면에서만 -------------------------------------------------------------
   표기 칸은 손가락으로 누르는 조작부라 화면에서는 44px 높이를 줍니다.
   인쇄 높이(8.5mm)는 그대로라 장수 계산은 달라지지 않습니다.
   ------------------------------------------------------------------------- */
@media screen {
  /* 테두리(0.4pt x 2) 를 빼고도 버튼이 44px 이 되도록 46px 로 잡습니다. */
  .att-cell,
  .att-no,
  .att-note { height: 46px; }

  .att-mark { cursor: pointer; }

  .att-mark:hover {
    box-shadow: inset 0 0 0 2px var(--ink-400);
  }

  .att-mark[data-mark=""]:hover::after {
    content: "+";
    color: var(--ink-400);
  }
}

/* --- 용지 안내 문구 ---------------------------------------------------------- */
.sheet--land .sheet-note {
  margin: 2mm 0 0;
  font-size: 8pt;
  color: var(--ink-700);
}

.sheet--land .sheet-note + .sheet-note { margin-top: 1mm; }

/* --- 모바일 ------------------------------------------------------------------
   375px 에서 가로 스크롤은 .sheet-stack 안에서만 생겨야 합니다.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .sample-row .button { width: 100%; }
  .form-actions--wrap .button { flex: 1 1 100%; }
}