/*
 * 화면 고유 규칙. 두 화면 이상이 쓰게 되면 ax_components.css 로 승격한다.
 * 색·간격 리터럴 금지 — ax_tokens.css 의 var(--ax-*) 만 쓴다.
 * (예외: 포커스 링의 rgba 그림자처럼 토큰이 없는 효과값은 리터럴 허용 — 해당 규칙에 주석.)
 */

/* ── bulk_edit: 세션별 아코디언 ───────────── */
.ax-accordion { display: flex; flex-direction: column; gap: var(--ax-space-2); }

/* overflow:hidden 은 필수 — 패널의 max-height 접힘을 잘라내고 모서리를 깎는다. */
.ax-accordion__item {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  overflow: hidden;
}

.ax-accordion__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ax-space-2); padding: var(--ax-space-2) var(--ax-space-3);
  min-height: 44px; cursor: pointer; user-select: none;
  transition: background-color 0.15s;
}
.ax-accordion__header:hover { background-color: var(--ax-surface-alt); }

.ax-accordion__left {
  display: flex; align-items: center; gap: var(--ax-space-2); min-width: 0;
}
.ax-accordion__right {
  display: flex; align-items: center; gap: var(--ax-space-2); flex-wrap: wrap;
}

/* width 고정 — 열림/닫힘 회전 시 좌측 항목들이 밀리지 않게 한다. */
.ax-accordion__icon {
  font-size: 0.625rem; color: var(--ax-ink-muted);
  width: 12px; text-align: center; flex-shrink: 0;
  transition: transform 0.2s;
}
.ax-accordion__header[aria-expanded="true"] .ax-accordion__icon { transform: rotate(90deg); }

.ax-accordion__week {
  font-weight: 600; font-size: 0.8125rem; color: var(--ax-ink);
  white-space: nowrap; flex-shrink: 0;
}
.ax-accordion__title {
  font-size: 0.8125rem; font-weight: 500; color: var(--ax-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* min-width 로 ON/OFF 배지 폭을 맞춰 우측 열이 들쭉날쭉하지 않게 한다. */
.ax-accordion__summary-tag { min-width: 72px; text-align: center; }
.ax-accordion__summary-tag.ax-badge--none { font-style: italic; }
.ax-accordion__summary { font-size: 0.75rem; font-weight: 600; color: var(--ax-ink); }

/* ── bulk_edit: 펼침 패널 ─────────────────── */
.ax-accordion__panel {
  border-top: 1px solid var(--ax-line);
  background: var(--ax-surface-alt);
  padding: 0 var(--ax-space-4);
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.ax-accordion__panel.is-open { max-height: 600px; padding: var(--ax-space-4); }

.ax-accordion__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ax-space-3) var(--ax-space-5);
}

/* 패널 안의 필드는 입력과 힌트를 세로로 쌓는다(공유 .ax-field__input 은 가로 배치). */
.ax-accordion__grid .ax-field__input {
  flex-direction: column; align-items: stretch; gap: var(--ax-space-1);
}
/* 체크박스 줄만 다시 가로로. 별도 클래스 없이 label 요소로 잡는다. */
.ax-accordion__grid .ax-field__input > label {
  display: flex; flex-direction: row; align-items: center; gap: var(--ax-space-2);
  cursor: pointer; font-size: 0.875rem;
}

.ax-accordion__grid .ax-input[type="datetime-local"] { width: 100%; }
.ax-accordion__grid .ax-input[type="number"] { width: 120px; }
/* 포커스 링 — rgba 그림자는 대응 토큰이 없어 리터럴 유지. */
.ax-accordion__grid .ax-input:focus {
  outline: none;
  border-color: var(--ax-brand);
  box-shadow: 0 0 0 2px rgba(3, 116, 181, 0.2);
}

/* ── bulk_edit: 툴바 검색창 고정폭 ────────── */
/* 원본 .search-input 의 width:200px 이월. `.ax-toolbar .ax-input` 으로 쓰면
 * 이 파일이 전역 로드되므로 앱의 모든 툴바 검색창을 가로챈다 → 뷰가 직접 붙이는
 * .ax-bulk-search 로 한정한다. (파셜 _toolbar 는 이 태스크 범위 밖이라
 * .ax-toolbar--search 모디파이어 대신 폼 쪽에 클래스를 둔다.) */
.ax-bulk-search .ax-input { width: 200px; }

/* ── bulk_edit: 신규 감지 그룹 ────────────── */
.ax-newgroup {
  border: 1px solid var(--ax-brand);
  border-radius: var(--ax-radius);
  padding: var(--ax-space-3);
  margin-bottom: var(--ax-space-4);
  background: var(--ax-surface);
}
.ax-newgroup__title {
  font-size: 0.875rem; font-weight: 700; color: var(--ax-brand);
  margin: 0 0 var(--ax-space-2);
}

/* hover 2종(.ax-pager__link / .ax-btn--ghost)·.ax-form-actions·레거시 h1 누수 차단·
 * .ax-btn box-sizing 은 전부 화면 고유가 아니었다 → ax_components.css 로 옮겼다.
 * 이 파일은 레이아웃이 전역 로드하므로 여기 두면 "화면 고유"가 아니라 그냥 전역 규칙이 된다. */

/* ── 모바일 (≤640px) ──────────────────────── */
@media (max-width: 640px) {
  .ax-accordion__grid { grid-template-columns: 1fr; }
  .ax-accordion__right { display: none; }
  /* 1열이 되면 패널이 600px 를 넘겨 잘린다(원본의 기존 결함). 여기서만 넉넉히 준다. */
  .ax-accordion__panel.is-open { max-height: 1600px; }
  /* 공유 .ax-input{width:100%} 보다 특정도가 높으므로 여기서 되돌린다. */
  .ax-bulk-search .ax-input { width: 100%; }
}

/* ── 생성 폼 골격(axf-) — vod_creations/new · live_creations/new 공용 ─────────
 *
 * 🔵 2026-09-05. 생김새의 출처는 우리 Canvas 포크의 add_vod 화면
 * (canvas-lms-linus: ui/features/vod/react/VODForm)이다. 교수는 같은 코스 안에서 세
 * 화면을 오간다(포크 add_vod · 우리 VOD · 우리 LIVE) — 한쪽만 다른 규칙으로 생기면
 * 매번 처음 보는 폼이 된다. 그래서 그쪽의 형태를 그대로 가져왔다:
 *   · 섹션 = [왼쪽 굵은 라벨 160px] + [소프트 패널]
 *   · 패널 = radius 8, 1px rgba(219,220,223,.52), padding 12/20
 *   · 행   = [라벨 180px] + [입력]  (세로로 쌓지 않는다)
 *   · 컨트롤 = 높이 40, radius 8, 같은 선색
 *   · 썸네일 160×90
 * ax_tokens 의 값(radius 4 · #C7CDD1)과 다른 것은 저쪽 화면이 그렇게 생겼기 때문이고,
 * 이 파일 안에서만 쓰는 지역 토큰으로 묶어 둔다 — 공유 ax-* 를 여기서 바꾸면 출결
 * 화면들이 같이 끌려간다.
 *
 * 🔴 접두사가 axf- 인 이유: 이 골격은 **VOD 전용이 아니다.** vod- 로 두면 LIVE 화면이
 * 남의 이름표를 달고 쓰거나, 같은 규칙을 두 벌 갖게 된다 — CLAUDE.md 가 LIVE 를 VOD 에서
 * 복사하며 실제로 겪었다고 적어 둔 그 자리다. 영상 슬롯(.vod-slot)만 VOD 고유다.
 *
 * 전역 로드 파일이라 ax- / axf- / vod- 접두사 필수. */
/* 지역 토큰은 **페이지**에 건다 — 제출 줄(.axf-actions)은 .axf-form 바깥의 형제라
 * 폼에 걸면 그 줄에서 var() 가 풀리지 않는다. */
.axf-page {
  --axf-line: rgba(219, 220, 223, 0.52);
  --axf-radius: 8px;
  --axf-control-h: 40px;
}
/* 라벨 열(160) + 패널이 한 줄에 서려면 720 은 좁다. */
.ax-page--form.axf-page { max-width: 880px; }

.axf-form { display: flex; flex-direction: column; gap: 22px; }

/* ── 섹션 ──────────────────────────────────────────────────────────────── */
.axf-sec { display: flex; align-items: flex-start; gap: var(--ax-space-3); }
.axf-sec__label {
  flex: 0 0 160px;
  margin: 0;
  padding-top: 14px;          /* 패널 첫 행의 글자 기준선에 맞춘다 */
  font-size: 0.9375rem; font-weight: 700; color: var(--ax-ink);
}
.axf-panel {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--axf-line);
  border-radius: var(--axf-radius);
  background: var(--ax-surface);
}

/* ── 패널 안의 한 행: [라벨][입력] ───────────────────────────────────────── */
.axf-row { display: flex; align-items: center; gap: var(--ax-space-2); }
.axf-row__label { flex: 0 0 180px; font-size: 0.875rem; font-weight: 500; color: var(--ax-ink); }
.axf-row__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--ax-space-2); }
/* 설명이 딸린 행은 묶는다. 행과 설명을 패널의 형제로 두면 둘 사이(10px)와 다음 행
 * 사이(10px)가 같아져 어느 값의 설명인지 흐려지고, 음수 여백으로 당기면 값 위에 겹친다
 * (2026-09-05 실측 — "95%" 와 그 설명이 겹쳤다). 묶어서 안쪽만 좁힌다. */
.axf-group { display: flex; flex-direction: column; gap: 4px; }
/* 힌트는 입력 **아래**에 붙는다 — 라벨 열을 비워 두고 입력과 같은 열에서 시작한다. */
.axf-row__hint { margin: 0 0 0 calc(180px + var(--ax-space-2)); font-size: 0.75rem; color: var(--ax-ink-muted); }

/* 제목 아래 가는 선 하나. add_vod 와 같은 자리에서 화면이 시작한다. */
.axf-page .ax-header { padding-bottom: var(--ax-space-3); border-bottom: 1px solid var(--axf-line); }

/* 패널 안의 컨트롤은 저쪽 화면과 같은 형태를 쓴다. */
.axf-panel .ax-input,
.axf-panel .ax-select {
  width: 100%;
  height: var(--axf-control-h);
  border: 1px solid var(--axf-line);
  border-radius: var(--axf-radius);
  font-size: 0.875rem;
}
/* 짧은 값은 폭을 줄인다 — 주차·차시는 한 칸이 줄 전체를 먹으면 쌍으로 안 읽히고,
 * 분·% 는 뒤에 단위가 붙어 칸이 길면 값과 단위가 멀어진다.
 * (예전 .ax-input--num / --time 을 대신한다 — 그 둘은 아무 뷰도 안 쓰게 돼 지웠다.) */
.axf-row__field .ax-select--short { width: 215px; max-width: 100%; }
.axf-row__field .ax-input--short { width: 6rem; }

@media (max-width: 720px) {
  .axf-sec { flex-direction: column; gap: var(--ax-space-1); }
  .axf-sec__label { flex: none; padding-top: 0; }
  .axf-row { flex-direction: column; align-items: stretch; gap: var(--ax-space-1); }
  .axf-row__label { flex: none; }
  .axf-row__hint { margin-left: 0; margin-top: 0; }
}

/* ── 영상 슬롯 ──────────────────────────────────────────────────────────── */
/* 고르는 버튼과 고른 결과가 **한 자리**에 있다. 버튼이 왼쪽, 결과가 그 옆이다 —
 * 눌러야 채워진다는 관계가 배치로 보인다(add_vod 와 같은 배열). */
.vod-slot { display: flex; align-items: flex-start; gap: 12px; }
.vod-slot__thumb {
  width: 160px; height: 90px; flex: none;
  object-fit: cover;
  border-radius: var(--axf-radius);
  background: var(--ax-surface-alt);
}
.vod-slot__thumb[hidden] { display: none; }
.vod-slot__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vod-slot__title { font-size: 0.875rem; font-weight: 600; color: var(--ax-ink); line-height: 1.4; overflow-wrap: anywhere; }
.vod-slot__meta { font-size: 0.75rem; color: var(--ax-ink-muted); line-height: 1.4; }
/* 아직 안 골랐을 때 같은 자리는 값이 아니라 안내다 — 굵기와 색을 내려 둔다.
 * 별도 클래스를 두지 않는 이유: 그러면 JS 가 채울 때마다 클래스를 하나 더 갈아 끼워야
 * 하고, 한쪽만 갈리는 순간 "고른 영상이 안내문처럼 보이는" 상태가 생긴다. */
.vod-slot:not(.is-filled) .vod-slot__title { font-weight: 400; color: var(--ax-ink-muted); }

@media (max-width: 520px) {
  .vod-slot { flex-direction: column; align-items: stretch; }
  .vod-slot__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ── 읽기 전용 값(진도율) ───────────────────────────────────────────────── */
/* 95% 는 고정값이지 입력값이 아니다(피드백 ④ — 입력칸처럼 보였다). */
.axf-readonly { font-size: 0.875rem; color: var(--ax-ink-muted); font-variant-numeric: tabular-nums; }

/* ── 제출 줄 ────────────────────────────────────────────────────────────── */
/* 스크롤 끝에만 있으면 위에서는 다음에 무엇을 눌러야 하는지 안 보인다(피드백 ⑥). */
.axf-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 23px;
  padding: var(--ax-space-3) 0;
  background: var(--ax-surface);
  border-top: 1px solid var(--axf-line);
}
/* 부족한 것을 말하는 자리. 버튼 왼쪽에 두어 시선이 버튼으로 이어진다. */
.axf-actions__say { flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; color: var(--ax-ink-muted); }
.axf-actions__say.is-error { color: var(--ax-absent); font-weight: 600; }

/* ── 출결 생성 진입(문) — attendance_creations/new ──────────────────────────
 * 두 갈래를 고르는 화면. 인라인 <style> 금지 가드(test/views/inline_style_guard_test.rb)
 * 아래에 있는 뷰라 규칙은 전부 여기 산다.
 *
 * 링크를 카드처럼 크게 만드는 이유: 모달 안이라 화면이 좁고, 교수가 여기서 할 일은
 * 정확히 하나(둘 중 하나 고르기)다. 작은 텍스트 링크로 두면 모달 한가운데의 빈 공간에
 * 두 줄이 떠 있는 모양이 되어 무엇을 하라는 화면인지 읽히지 않는다. */
.ax-choice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ax-choice { margin: 0; }
.ax-choice__link {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  text-decoration: none;
  color: var(--ax-ink);
}
/* 키보드 진입도 마우스와 같은 것을 본다 — :hover 만 주면 Tab 으로 온 교수는
 * 지금 어느 갈래에 서 있는지 알 수 없다. */
.ax-choice__link:hover,
.ax-choice__link:focus-visible { border-color: var(--ax-brand); background: var(--ax-surface-alt); }
.ax-choice__title { display: block; font-weight: 600; }
.ax-choice__desc { display: block; margin-top: 2px; font-size: 0.9em; color: var(--ax-ink-muted); }

/* ── vod_creations/new: 파일 끌어다 놓기 ────────────
 * 교수가 이 화면에서 할 수 있는 두 가지 중 하나다(고르기 / 올리기). 그래서 검색창과
 * 같은 무게로 보여야 한다 — 곁다리 링크가 아니다. */
.ax-drop {
  margin-top: var(--ax-space-3);
  padding: var(--ax-space-3);
  border: 1px dashed var(--ax-line);
  border-radius: var(--ax-radius);
}
.ax-drop.is-over { border-color: var(--ax-brand); background: var(--ax-surface-alt); }
.ax-drop__label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ax-ink-muted); }
.ax-drop__input { margin-top: var(--ax-space-2); }
/* 업로드 중에는 다시 못 누르게 — 같은 파일이 두 번 올라가면 영상이 둘 생긴다. */
.ax-drop[aria-busy="true"] { opacity: 0.6; pointer-events: none; }