/*
 * 화면 고유 규칙. 두 화면 이상이 쓰게 되면 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;
  /* 남는 폭을 요약 앞이 가져간다 → [왼쪽 묶음 ……… 요약][▾] (#361: 아이콘을 셋째 칸으로 넣으며 요약이
     제목 옆으로 당겨졌던 부수 효과를 되돌림 — auto margin 이 있으면 space-between 은 무시된다) */
  margin-left: auto;
}

/* 펼침 표시 ▾ — 오른쪽 끝 44px 칸(#361, 목록 카드 아코디언과 같은 결). 폭 고정이라 회전해도 안 밀린다. */
.ax-accordion__header { padding-right: 0; }
.ax-accordion__icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  font-size: 1.25rem; color: var(--ax-ink-muted);
  transition: transform 0.2s;
}
.ax-accordion__header[aria-expanded="true"] .ax-accordion__icon { transform: rotate(180deg); }

.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; }
  /* 휴대폰 머리(#361): [n주차 n차시 · 유형] / 제목(2줄까지) / 설정 요약 태그 — 예전엔 제목이 잘리고 요약은 숨었다 */
  .ax-accordion__header { flex-wrap: wrap; align-items: flex-start; padding-top: var(--ax-space-2); padding-bottom: var(--ax-space-2); }
  .ax-accordion__left { flex: 1 1 calc(100% - 52px); flex-wrap: wrap; row-gap: 2px; }
  .ax-accordion__title {
    flex-basis: 100%; white-space: normal; color: var(--ax-ink); font-size: 0.9375rem; font-weight: 600;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere;
  }
  .ax-accordion__icon { order: 2; margin-top: -6px; }
  .ax-accordion__right { order: 3; flex-basis: 100%; gap: var(--ax-space-1); }
  .ax-accordion__summary-tag { min-width: 0; }
  /* 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; }
}

/* ── 영상 올리기 ────────────────────────────────────────────────────────── */
/* 올리는 길과 고르는 길이 한 자리다 — 버튼 옆에 상태 한 줄. */

/* ── 영상 목록 ──────────────────────────────────────────────────────────── */
/* 이 코스의 Panopto 폴더 영상을 여기서 고른다(2026-09-07). 예전엔 피커를 새 창으로
 * 여는 버튼이었고, 그 창에서 고른 것은 아무 데도 안 꽂혔다 — 이제 목록이 곧 고르는 UI 다.
 * 위 슬롯은 "고른 것"을 보여주는 자리로 남는다(둘의 역할이 갈린다). */
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto;   /* 영상이 많은 폴더에서 폼이 끝없이 길어지지 않게 */
}
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--axf-radius);
  border: 1px solid transparent; cursor: pointer;
}
/* 고른 줄은 테두리로 표시한다 — 배경만으로는 hover 와 구분되지 않는다. */
  width: 96px; height: 54px; flex: none;
  object-fit: cover; border-radius: 4px; background: var(--ax-surface-alt);
}

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

/* 공급자 고르기(Zoom/Teams). 라디오 두 개짜리 한 줄이라 전용 부품을 만들지 않고
   간격만 준다 — 선택지가 셋 이상이 되면 그때 세그먼트 컨트롤을 꺼낸다. */
.ax-radio { display: inline-flex; align-items: center; gap: 0.375rem; margin-right: 1rem; }
.ax-radio__input { margin: 0; }

/* ── 제출 줄 ────────────────────────────────────────────────────────────── */
/* 스크롤 끝에만 있으면 위에서는 다음에 무엇을 눌러야 하는지 안 보인다(피드백 ⑥). */
.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; }

/* ── studio_creations/new: 라이브러리 영상 고르기 ────────────
 * 썸네일·제목·길이를 한 줄 카드로. 고른 카드는 ax-choice 와 같은 강조색을 쓴다. */
.ax-video-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto; }
.ax-video { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius); }
.ax-video:hover, .ax-video:has(input:checked) { border-color: var(--ax-brand); background: var(--ax-surface-alt); }
.ax-video__thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; background: var(--ax-surface-alt); flex: none; }
.ax-video__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-video__meta { font-size: 0.8125rem; color: var(--ax-ink-muted); font-variant-numeric: tabular-nums; }
.ax-video.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* Panopto 피커 모달 — Canvas 가 권장하는 피커 크기(900×700, 도구 213 실측)에 맞춘다. */
.vod-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1000;
             display: flex; align-items: center; justify-content: center; }
/* 🔴 위 display:flex 가 hidden 속성(UA 의 display:none)을 **이깁니다.** 이게 없으면
   모달이 페이지 로드부터 떠 있고 닫기 버튼도 먹지 않는다 — 운영에서 그 상태로 나갔다.
   JS 는 el.hidden 으로 여닫으므로 그 계약을 CSS 가 지켜 줘야 한다. */
.vod-modal[hidden] { display: none !important; }
.vod-modal__box { background: #fff; border-radius: 8px; width: min(920px, 96vw);
                  height: min(720px, 92vh); display: flex; flex-direction: column;
                  box-shadow: 0 10px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.vod-modal__head { display: flex; align-items: center; justify-content: space-between;
                   padding: 10px 14px; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.vod-modal__close { border: 0; background: none; font-size: 22px; line-height: 1;
                    cursor: pointer; color: #6b7280; }


/* 영상 고르기 — 왼쪽 폴더(권한 있는 것만), 오른쪽 그 폴더의 영상. */
.vod-pick2 { display: flex; flex: 1 1 auto; min-height: 0; }
.vod-pick2__folders { width: 260px; margin: 0; padding: 8px; list-style: none;
                      overflow-y: auto; border-right: 1px solid #e5e7eb; }
.vod-pick2__videos { flex: 1 1 auto; margin: 0; padding: 8px; list-style: none; overflow-y: auto; }
.vod-pick2__folder, .vod-pick2__video { padding: 8px 10px; border-radius: 6px; cursor: pointer;
                                        font-size: 13px; }
.vod-pick2__folder:hover, .vod-pick2__video:hover { background: #f3f4f6; }
.vod-pick2__folder.is-selected { background: #e5edff; font-weight: 600; }
.vod-pick2__folder.is-current::after { content: ' •'; color: #2563eb; }
.vod-pick2__msg { padding: 10px; color: #6b7280; font-size: 12px; }

              border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 10px; }

/* 피커 오른쪽: 위에 올리기 줄, 아래 영상 목록. */
.vod-pick2__right { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.vod-pick2__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
                  border-bottom: 1px solid #e5e7eb; }
.vod-pick2__state { font-size: 12px; color: #6b7280; }
.vod-pick2__twisty { display: inline-block; width: 14px; color: #9ca3af; cursor: pointer; }
.vod-pick2__video { display: flex; align-items: center; gap: 10px; }
.vod-pick2__thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; background: #f3f4f6; }
.vod-pick2__body { display: flex; flex-direction: column; min-width: 0; }
.vod-pick2__title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vod-pick2__meta { font-size: 11px; color: #6b7280; }

.vod-pickbar { margin-bottom: 10px; }

/* 재생 못 하는 영상은 고를 수 없다 — 고르면 학생 화면이 "더 이상 사용할 수 없습니다" 다. */
.vod-pick2__video.is-disabled { opacity: .5; cursor: not-allowed; }
.vod-pick2__video.is-disabled:hover { background: transparent; }

/* ── 강의별 출결 표(.detail-table) ─────────────────────────────────────
 * _lecture_table 조각 — 교수가 보는 학생 상세(#360)와 학생 본인 목록(#361)이 같이 쓴다.
 * 표 모드 8열 → 태블릿은 여백·최소폭을 줄이고 → 휴대폰은 [차시 | 강의 제목 | 출결] 3열.
 * 휴대폰에서도 카드가 아니라 표다: 가로 스크롤 없이 세로로만 길어진다(사용자 결정, #360).
 * 그림자 rgba 는 토큰이 없는 효과값(파일 머리 규칙의 예외). */
.detail-table-wrapper {
  overflow-x: auto; background: var(--ax-surface); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.detail-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.detail-table thead th {
  padding: 0.75rem 1rem; text-align: center; white-space: nowrap;
  word-break: keep-all; /* 줄을 바꿔야 할 때 '차시 출/결'이 아니라 '차시 / 출결'로(#360) */
  background: var(--ax-surface-alt); font-weight: 500; color: var(--ax-ink);
  border-bottom: 1px solid var(--ax-line);
}
.detail-table tbody td {
  padding: 0.75rem 1rem; text-align: center;
  font-size: 0.8125rem; color: var(--ax-ink); font-weight: 500;
}
.detail-table .col-week, .detail-table .col-lesson { min-width: 72px; }
.detail-table .col-lesson-status, .detail-table .col-type, .detail-table .col-status { min-width: 56px; }
.detail-table .col-title { min-width: 200px; }
.detail-table .col-time { min-width: 120px; }
.detail-table .col-due { min-width: 100px; }
.detail-table .td-week { font-weight: 600; white-space: nowrap; }
.detail-table .td-lesson { font-weight: 600; color: var(--ax-ink-muted); border-left: 1.5px solid var(--ax-surface-alt); white-space: nowrap; }
/* 제목은 머리말·내용 모두 왼쪽(#361) */
.detail-table thead th.col-title, .detail-table .td-title { text-align: left; }
.detail-table .td-type { color: var(--ax-ink-muted); }
/* 기간은 '~' 에서만 줄을 바꾼다(dt-part, #360) */
.detail-table .td-time, .detail-table .td-due { color: var(--ax-ink-muted); font-size: 0.75rem; }
.detail-table .td-due { white-space: nowrap; }
.detail-table .dt-part { white-space: nowrap; }
.detail-table .border-week-end { border-bottom: 2px solid var(--ax-line); }
.detail-table .border-lesson-end { border-bottom: 1.5px solid var(--ax-surface-alt); }
.detail-table .status-icon-cell { font-size: 0.875rem; }
.detail-table .opacity-low { opacity: 0.35; }
/* 학생 본인 목록: 제목을 누르면 출석 이력 창 */
.detail-table .student-title-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 500; text-align: left;
  color: var(--ax-link); text-decoration: underline; cursor: pointer;
}
.detail-table .student-title-link:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }
/* 휴대폰 전용 조각 — 표 모드(641px 이상)에서는 숨긴다 */
.detail-table .tr-week-head, .detail-table .m-lesson-status, .detail-table .m-meta, .detail-table .th-short { display: none; }

/* 태블릿(641~960px, #360): 열 최소폭 합(752px)+여백이 화면을 넘어 오른쪽 열이 잘렸다. */
@media (max-width: 960px) {
  .detail-table thead th, .detail-table tbody td { padding: 0.625rem 0.5rem; }
  .detail-table thead th { white-space: normal; }
  .detail-table .col-week, .detail-table .col-lesson { min-width: 48px; }
  .detail-table .col-lesson-status, .detail-table .col-type, .detail-table .col-status { min-width: 44px; }
  .detail-table .col-title { min-width: 120px; }
  .detail-table .col-time, .detail-table .col-due { min-width: 0; }
  .detail-table .td-due { white-space: normal; } /* 날짜 / 시각 두 줄 */
}

/* 휴대폰(≤640px): 주차는 묶음 머리줄로, 차시 출결은 차시 아래로, 유형·마감은 제목 아래 한 줄로 옮긴다. */
@media (max-width: 640px) {
  .detail-table .col-week, .detail-table .td-week,
  .detail-table .col-lesson-status, .detail-table .td-lesson-status,
  .detail-table .col-type, .detail-table .td-type,
  .detail-table .col-time, .detail-table .td-time,
  .detail-table .col-due, .detail-table .td-due { display: none; }
  .detail-table .col-lesson { width: 52px; min-width: 0; }
  .detail-table .col-status { width: 64px; min-width: 0; }
  .detail-table .col-title { min-width: 0; }
  .detail-table thead th, .detail-table tbody td { padding: 0.625rem 0.375rem; }
  .detail-table .td-lesson { border-left: 0; }
  .detail-table .th-full { display: none; }
  .detail-table .th-short { display: inline; }
  .detail-table .tr-week-head { display: table-row; }
  .detail-table .tr-week-head th {
    padding: 0.5rem 0.75rem; background: var(--ax-surface-alt); text-align: left;
    font-size: 0.8125rem; font-weight: 700; color: var(--ax-ink); border-bottom: 1px solid var(--ax-line);
  }
  .detail-table .m-lesson-status { display: block; margin-top: 2px; }
  .detail-table .td-title .title-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere; line-height: 1.4;
  }
  .detail-table .m-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem;
    margin-top: 0.25rem; font-size: 0.75rem; font-weight: 400; color: var(--ax-ink-muted);
  }
  /* 유형 배지 — 콘텐츠별 목록(index)의 .badge-* 와 같은 색. 학생 상세에는 그 스타일이 없어 여기서 준다. */
  .detail-table .m-meta .badge { display: inline-block; padding: 0.125rem 0.4rem; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.3; }
  .detail-table .m-meta .badge-vod { background-color: #e7f1ff; color: #0d6efd; }
  .detail-table .m-meta .badge-live { background-color: #fff3cd; color: #856404; }
  .detail-table .m-meta .badge-manual { background-color: #ede7f6; color: #5e35b1; }
  .detail-table .m-meta .badge-qr { background-color: #d7f2ec; color: #0b6b5c; }
  /* '차시' 머리말 — 보이지 않게만(화면 읽기 도구는 읽는다) */
  .detail-table .th-lesson-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* 출결 칸의 체크인 버튼은 아이콘 아래로 — 좁은 칸에서 옆으로 밀지 않는다 */
  .detail-table .td-status .student-checkin-btn { display: flex; margin: 0.375rem auto 0; padding: 0 0.5rem; }
}

/* ── QR 띄우기 화면(qr_display, #361) ──────────────────────────────────
 * 강의실 화면에 비추는 새 창. 큰 QR·강의 제목·일정 한 줄·안내만 — 학생 정보는 없다.
 * QR 은 화면 짧은 변에 맞춰 최대한 크게. */
.ax-qr-display {
  box-sizing: border-box; min-height: calc(100vh - 40px); /* 레이아웃 body 여백 20px×2 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ax-space-3); text-align: center; font-family: var(--ax-font); color: var(--ax-ink);
}
.ax-qr-display__meta { margin: 0; font-size: clamp(1rem, 2.2vh, 1.5rem); font-weight: 600; color: var(--ax-ink-muted); }
.ax-qr-display__title {
  margin: 0; padding: 0; border: 0; /* 레이아웃의 h1 밑줄을 지운다 */
  font-size: clamp(1.5rem, 4.5vh, 3rem); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; word-break: keep-all;
}
.ax-qr-display__code svg {
  display: block; width: min(62vh, 88vw); height: min(62vh, 88vw);
  padding: var(--ax-space-2); background: #fff; /* QR 은 어떤 테마에서도 흰 바탕이어야 찍힌다 */
  border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
}
.ax-qr-display__schedule { margin: 0; font-size: clamp(1.125rem, 3vh, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.ax-qr-display__hint { margin: 0; font-size: clamp(1rem, 2.4vh, 1.5rem); color: var(--ax-ink-muted); }

/* 'QR 띄우기' 버튼(세션 상세·콘텐츠별 목록 QR 행) — 새 창으로 연다 */
.qr-display-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 36px; padding: 0 0.875rem; border: 1px solid var(--ax-brand); border-radius: var(--ax-radius);
  background: var(--ax-surface); color: var(--ax-brand); font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.qr-display-btn:hover { background: var(--ax-surface-alt); }
.qr-display-btn:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }
@media (max-width: 640px) {
  .qr-display-btn { min-height: 44px; }
}