/*
 * 출결 공유 컴포넌트. ax_tokens.css 의 변수만 참조한다(색·간격 리터럴 금지).
 * 접두사는 .ax- — .att- 는 기존 코드가 이미 쓰고 있으므로 쓰지 않는다.
 */

/* ── 페이지 골격 ───────────────────────────── */
.ax-page {
  font-family: var(--ax-font);
  color: var(--ax-ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ax-space-4);
}

/* ── 헤더 ─────────────────────────────────── */
.ax-header { margin-bottom: var(--ax-space-4); }
.ax-header__nav {
  display: flex; align-items: center; gap: var(--ax-space-1);
  font-size: 0.875rem; color: var(--ax-ink-muted);
  margin-bottom: var(--ax-space-2);
}
.ax-header__link { color: var(--ax-link); text-decoration: none; }
.ax-header__link:hover { text-decoration: underline; }
/*
 * 뒤 세 줄은 방어용이다. 레이아웃(application.html.erb)의 레거시 인라인 CSS 에
 * `h1 { color:#333; border-bottom:2px solid #007bff; padding-bottom:10px }` 라는
 * **맨 요소 셀렉터**가 있어 우리 <h1> 에도 그대로 먹는다. 특히 그 파란 밑줄은
 * 테넌트 브랜드(Task 2)를 무시하는 하드코딩 색이라 "남의 툴" 티가 난다.
 * 레거시 규칙은 admin 뷰가 아직 의존하므로 지우지 않고, 여기서 무력화한다.
 * → 레이아웃의 레거시 <style> 이 걷히면 이 세 줄도 함께 지운다.
 */
.ax-header__title {
  font-size: 1.5rem; font-weight: 700; margin: 0;
  border-bottom: none; padding-bottom: 0; color: var(--ax-ink);
}

/* ── 알림 ─────────────────────────────────── */
.ax-alert {
  padding: var(--ax-space-3);
  border-radius: var(--ax-radius);
  margin-bottom: var(--ax-space-3);
  border: 1px solid var(--ax-line);
}
.ax-alert--success { border-color: var(--ax-present); color: var(--ax-present); }
.ax-alert--danger  { border-color: var(--ax-absent);  color: var(--ax-absent); }

/* ── 버튼 ─────────────────────────────────── */
/*
 * box-sizing 은 필수다. 아래 모바일 블록이 .ax-btn 에 width:100% 를 주는데,
 * <button> 은 UA 스타일이 border-box 라 무사한 반면 <a class="ax-btn"> 은
 * content-box 라 padding+border 만큼(측정값 34px) 그대로 넘친다.
 */
.ax-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--ax-space-3);
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
  background: var(--ax-surface); color: var(--ax-ink);
  font-family: var(--ax-font); font-size: 0.875rem; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.ax-btn:hover { background: var(--ax-surface-alt); }
.ax-btn--primary {
  background: var(--ax-brand); color: var(--ax-brand-ink); border-color: var(--ax-brand);
}
.ax-btn--primary:hover { filter: brightness(0.92); background: var(--ax-brand); }
.ax-btn--secondary { background: var(--ax-surface); }
.ax-btn--ghost { border-color: transparent; background: transparent; color: var(--ax-brand); }
.ax-btn--ghost:hover { text-decoration: underline; }

/* ── 폼 ───────────────────────────────────── */
/* box-sizing 은 폼 컨트롤에선 UA 스타일이 이미 border-box 라 현시점 무해하지만,
 * 모바일 width:100% 와 겹치는 구조가 .ax-btn 과 동일하므로 UA 의존을 없앤다. */
.ax-input, .ax-select {
  box-sizing: border-box;
  min-height: 44px; padding: 0 var(--ax-space-2);
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
  background: var(--ax-surface); color: var(--ax-ink);
  font-family: var(--ax-font);
  font-size: 16px; /* iOS 자동 확대 방지 — 낮추지 말 것 */
}
.ax-field { display: flex; flex-direction: column; gap: var(--ax-space-1); }
.ax-field__label { font-size: 0.8125rem; font-weight: 600; color: var(--ax-ink-muted); }
.ax-field__input { display: flex; align-items: center; gap: var(--ax-space-2); }
.ax-field[data-disabled="true"] { opacity: 0.45; pointer-events: none; }
.ax-hint { font-size: 0.75rem; color: var(--ax-ink-muted); }

/* 짧은 칸 둘을 한 줄에 (주차·차시). 좁아지면 알아서 접힌다. */
.ax-field-row { display: flex; flex-wrap: wrap; gap: var(--ax-space-3); }
.ax-field-row > .ax-field { flex: 0 0 auto; }

/* ── 채우는 화면 (생성 폼) ─────────────────── */
/*
 * 목록 화면은 표가 넓을수록 좋지만 폼은 반대다. .ax-page 의 1200px 를 그대로 쓰면
 * 120px 짜리 주차 칸 옆에 1000px 빈 자리가 남아, 라벨과 값이 한눈에 안 묶인다
 * (2026-08-27 운영 화면 실측 — VOD·LIVE 두 화면 모두 그랬다). 폼만 좁힌다.
 *
 * 칸 폭은 값의 성격이 정한다: 제목·검색·모듈은 줄 전체, 숫자는 손가락 두 개,
 * 날짜는 브라우저 위젯이 잘리지 않을 만큼. 폭을 안 주면 UA 기본값이 정하는데
 * 그 기본값은 셋을 구분하지 않는다.
 */
.ax-page--form { max-width: 720px; }
.ax-page--form .ax-input,
.ax-page--form .ax-select { width: 100%; }

/* ── 툴바 ─────────────────────────────────── */
.ax-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ax-space-2);
  padding: var(--ax-space-3);
  background: var(--ax-surface-alt);
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
  margin-bottom: var(--ax-space-3);
}
.ax-toolbar__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ax-space-2); }
.ax-toolbar__count { margin-left: auto; font-size: 0.875rem; color: var(--ax-ink-muted); }

/* ── 배지 ─────────────────────────────────── */
.ax-badge {
  display: inline-block; padding: 2px var(--ax-space-2);
  border-radius: 10px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid currentColor;
}
.ax-badge--vod  { color: var(--ax-brand); }
.ax-badge--live { color: var(--ax-late); }
.ax-badge--on   { color: var(--ax-present); }
.ax-badge--off  { color: var(--ax-ink-muted); }
.ax-badge--none { color: var(--ax-line); }
.ax-badge--danger { color: var(--ax-absent); }

/* ── 빈 상태 ──────────────────────────────── */
.ax-empty {
  padding: var(--ax-space-5) var(--ax-space-3);
  text-align: center; color: var(--ax-ink-muted);
  border: 1px dashed var(--ax-line); border-radius: var(--ax-radius);
}

/* ── 페이지네이션 ─────────────────────────── */
.ax-pager { display: flex; gap: var(--ax-space-1); justify-content: center; margin-top: var(--ax-space-4); }
.ax-pager__link, .ax-pager__current {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
  text-decoration: none; color: var(--ax-ink);
}
.ax-pager__link:hover { background: var(--ax-surface-alt); }
.ax-pager__current { background: var(--ax-brand); color: var(--ax-brand-ink); border-color: var(--ax-brand); }

/* ── 폼 하단 액션 줄 (저장/취소) ──────────── */
/* 툴바가 아니다 — .ax-toolbar__form 을 빌려 쓰면 툴바 조정이 이 줄까지 움직인다.
 * 모바일 전용 규칙은 두지 않는다: 원본 .bulk-actions 에도 @media 규칙이 없었고,
 * 좁은 폭에선 .ax-btn{width:100%} 가 두 버튼을 한 줄에 균등히 채운다. */
.ax-form-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: var(--ax-space-2);
  padding: var(--ax-space-3) 0;
}

/* ── 모바일 (≤640px) ──────────────────────── */
@media (max-width: 640px) {
  .ax-page { padding: var(--ax-space-2); }
  .ax-toolbar { flex-direction: column; align-items: stretch; }
  .ax-toolbar__count { margin-left: 0; }
  .ax-toolbar__form { flex-direction: column; align-items: stretch; }
  .ax-input, .ax-select, .ax-btn { width: 100%; }
}

/* ── 모달 임베드 모드 (Canvas iframe 안) ──── */
.ax-page--embed { padding: var(--ax-space-3); max-width: none; }

/* ── 카드 (프로바이더별 자격증명 섹션 등) ──── */
.ax-card {
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
  padding: var(--ax-space-3); margin-bottom: var(--ax-space-3);
  background: var(--ax-surface);
}
.ax-card legend {
  font-weight: 600; padding: 0 var(--ax-space-1);
  color: var(--ax-ink);
}
/* 카드 제목. 카드가 여러 칸을 묶기 시작하면 그 묶음이 무엇인지 이름이 필요하다 —
 * 이름이 없으면 칸 하나에 카드 하나를 쓰게 되고(생성 화면들이 실제로 그랬다)
 * 테두리만 늘어난다. .ax-field__label 보다 한 단 위다. */
.ax-card__title {
  font-size: 0.9375rem; font-weight: 700; color: var(--ax-ink);
  margin: 0 0 var(--ax-space-3);
}
.ax-card .ax-field { margin-bottom: var(--ax-space-2); }
.ax-card .ax-field:last-child { margin-bottom: 0; }