/*
 * 출결 공유 컴포넌트. 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; }
/* Zoom 입장 버튼(zoom/join/show). 일반 버튼보다 크다 — 이 화면에는 이 버튼 하나뿐이다.
 * .ax-btn--primary 와 함께 쓴다 — 색만 Zoom 파랑으로 바꿔 끼우고(테넌트 브랜드를 따르지
 * 않는다) 채움·hover 는 primary 것을 그대로 받는다. */
.ax-btn--zoom {
  --ax-brand: var(--ax-zoom); --ax-brand-ink: var(--ax-zoom-ink);
  gap: var(--ax-space-2);
  min-height: 52px; padding: 0 var(--ax-space-4);
  border-radius: 12px;
  font-size: 1rem; font-weight: 700;
}
.ax-btn--zoom svg { flex: none; fill: currentColor; }

/* Zoom 입장·오류 화면(zoom/join/*)의 좁은 가운데 정렬 골격. */
.ax-page--join {
  max-width: 560px;
  margin: calc(var(--ax-space-4) * 2) auto;
  text-align: center;
}

/* ── 폼 ───────────────────────────────────── */
/* 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; }

/* ── 출결 상태색 ──────────────────────────── */
/* 클래스명은 .icon-<상태> 그대로 둔다 — 뷰·JS 가 상태 문자열로 이름을 조립한다
 * (icon-<%= status %>, 'icon-' + lec.status). 지각 ▲ 는 helper status_icon 이 채운 ▲ 하나로 낸다. */
.icon-present { color: var(--ax-present); }
.icon-late    { color: var(--ax-late); }
.icon-absent  { color: var(--ax-absent); }
.icon-pending { color: var(--ax-pending); }

/* 네 아이콘의 보이는 크기를 맞춘다(#360).
 * ① 글꼴 고정 — 버튼(마킹·일괄 변경·변경 이력)은 페이지 글꼴을 물려받지 않아 Arial 로 그려졌고,
 *    Arial 의 ● 는 0.43em 로 ▲·✕ 의 절반 남짓이었다. 어디서든 같은 글꼴로 그리게 한다.
 * ② 글리프 보정 — 같은 글꼴에서도 잉크 높이가 ● 0.81em · ▲ 0.64em · ✕ 0.74em 라
 *    ✕ 에 맞춰 ● 는 줄이고 ▲ 는 키운다(2026-10-20 macOS Chromium 측정).
 *    transform 이라 줄 높이·칸 너비는 그대로다. — 는 선이라 보정하지 않는다. */
.icon-present, .icon-late, .icon-absent, .icon-pending {
  font-family: var(--ax-font);
  display: inline-block;
}
.icon-present { transform: scale(0.92); }
.icon-late    { transform: scale(1.18); }

/* ── 상태 카드 (출석·지각·결석·미결 집계) ──── */
/* 마크업은 attendance/ui/_stats_cards. 기본은 학생 출결·학생 상세의 작은 카드,
 * --filter 는 세션 상세(show)의 큰 카드 = 상태 필터 버튼.
 * 0.75rem·0.875rem 처럼 토큰에 없는 치수는 기존 화면 그대로 둔다. */
.ax-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ax-stat {
  display: flex; align-items: center; gap: var(--ax-space-2);
  padding: var(--ax-space-2) 0.875rem;
  background: var(--ax-surface); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06); /* 그림자 — 토큰 없는 효과값 */
}
.ax-stat__icon { font-size: 0.75rem; line-height: 1; }
.ax-stat__info { display: flex; flex-direction: column; }
.ax-stat__label { font-size: 0.6875rem; color: var(--ax-ink-muted); font-weight: 500; white-space: nowrap; }
.ax-stat__number { font-size: 1rem; font-weight: 600; color: var(--ax-ink); }

.ax-stat--filter {
  gap: var(--ax-space-3); padding: 1.25rem var(--ax-space-5); min-width: 120px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* 그림자 — 토큰 없는 효과값(:hover 도 같다) */
  border: 2px solid transparent; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ax-stat--filter:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.ax-stat--filter.is-active {
  border-color: var(--ax-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ax-brand) 15%, transparent);
}
.ax-stat--filter .ax-stat__icon { font-size: 1.75rem; font-weight: 700; line-height: normal; }
.ax-stat--filter .ax-stat__label { font-size: 0.8rem; }
.ax-stat--filter .ax-stat__number { font-size: 1.5rem; }

/* 태블릿 폭: 카드 줄을 전체 폭으로 펴고 카드를 균등하게 늘려, 위아래 표·버튼 줄과
 * 오른쪽 끝을 맞춘다(#339, #350). 데스크톱은 그대로. */
@media (max-width: 960px) {
  .ax-stats { width: 100%; }
  .ax-stat { flex: 1 1 0; }
}

/* 모바일: 네 칸 한 줄(#360) — 2×2 는 줄 높이가 170px 가까이 돼 화면을 너무 차지했다.
 * 칸 안은 [아이콘 라벨] 위, 숫자 아래로 접어 줄 높이를 약 50px 로. 칸은 minmax(0,1fr) 라
 * 넘치지 않고, 큰 숫자(128 등)도 한 줄에 들어간다. 필터 카드(show)도 누르는 곳 44px 이상. */
@media (max-width: 640px) {
  .ax-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ax-space-1); width: 100%; }
  .ax-stat, .ax-stat--filter {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon label" "number number";
    align-items: center; column-gap: var(--ax-space-1); row-gap: 2px;
    min-width: 0; min-height: 44px; padding: 6px var(--ax-space-2);
  }
  .ax-stat__info { display: contents; } /* 라벨·숫자를 칸 격자에 바로 놓는다 */
  .ax-stat__icon, .ax-stat--filter .ax-stat__icon { grid-area: icon; font-size: 0.75rem; line-height: 1; }
  .ax-stat__label, .ax-stat--filter .ax-stat__label {
    grid-area: label; font-size: 0.6875rem; overflow: hidden; text-overflow: ellipsis;
  }
  .ax-stat__number, .ax-stat--filter .ax-stat__number {
    grid-area: number; font-size: 1.0625rem; line-height: 1.2; white-space: nowrap;
  }
}

/* ── 출결 화면 맨 위 탭·버튼 줄(#361) ────────────────────────────────
 * 탭(어느 화면을 볼지)은 세그먼트로, 동작(무엇을 할지)은 .ax-btn 으로 모양을 가른다.
 * 콘텐츠별·학생별 두 화면이 같이 쓴다. 글자는 줄바꿈하지 않고, 누르는 곳은 44px.
 * 휴대폰: 1줄 탭(반반), 2줄 동작 버튼(같은 폭). '콘텐츠/별'·'출결 추/가'처럼 쪼개지던 것을 막는다. */
.ax-tabbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ax-space-2) var(--ax-space-3); margin-bottom: var(--ax-space-4);
}
.ax-segment {
  display: inline-flex; padding: 0; gap: 0;
  background: var(--ax-surface-alt); border: 1px solid var(--ax-line); border-radius: 8px;
}
.ax-segment__tab {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--ax-space-3);
  border-radius: 7px; color: var(--ax-ink-muted);
  font-family: var(--ax-font); font-size: 0.875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.ax-segment__tab:hover { color: var(--ax-ink); }
/* 선택된 탭 — 흰 칸이 떠 있는 모양. 그림자 rgba 는 토큰이 없는 효과값(파일 머리 규칙의 예외) */
.ax-segment__tab[aria-current="page"] {
  background: var(--ax-surface); color: var(--ax-brand); font-weight: 700;
  box-shadow: 0 0 0 1px var(--ax-line), 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ax-segment__tab:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }
.ax-tabbar__actions { display: flex; align-items: center; gap: var(--ax-space-2); }
.ax-tabbar__actions .ax-btn { gap: var(--ax-space-1); white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) {
  .ax-tabbar { flex-direction: column; align-items: stretch; gap: var(--ax-space-2); margin-bottom: var(--ax-space-3); }
  .ax-segment { display: flex; }
  .ax-segment__tab { flex: 1 1 0; min-width: 0; padding: 0 var(--ax-space-2); }
  .ax-tabbar__actions > * { flex: 1 1 0; min-width: 0; }
  .ax-tabbar__actions .ax-btn { width: 100%; padding: 0 var(--ax-space-2); }
}