/* LECTURES 섹션 — SPEC-LECTURES-DESIGN v1.0 구현.
   원칙: 새 토큰 0·새 색 0(§0) — 전부 noir.css 토큰. 조판 값은 @designer 목업(java.html) 승계.
   학생 페이지 = 노와르 본채의 연장(Playfair 는 과목명 1곳만), 관리자 = 도구(Playfair 0·애니메이션 0). */

body.lect {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, sans-serif;
  margin: 0;
}

.lect .wrap { max-width: 920px; margin: 0 auto; padding: 56px var(--margin) 96px; }

/* 상단 바 — 본채 topbar 문법 승계(축약형: 워드마크 + 복귀 링크) */
.lect .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--margin); border-bottom: 1px solid rgba(154, 160, 168, 0.18); }
.lect .wordmark { color: var(--fg); text-decoration: none; font-size: var(--fs-label); letter-spacing: var(--track-label); font-weight: 600; }
.lect .topnav a { color: var(--fg-mute); text-decoration: none; font-size: var(--fs-label); letter-spacing: var(--track-label); margin-left: 18px; }
.lect .topnav a:hover { color: var(--gold); }

.lect .lbl,
.lect .crumb,
.lect .sub { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.lect .crumb { color: var(--fg-dim); }
.lect .crumb a { color: var(--fg-dim); text-decoration: none; }
.lect .crumb a:hover { color: var(--gold); }
.lect .crumb b { color: var(--fg); font-weight: 600; }
.lect .sub { color: var(--fg-mute); }

/* ── 인덱스 (/lectures/) — START HERE 카드 문법 재사용 (§1) ── */
.lect .sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.lect .rule-gold { display: block; width: 56px; height: 3px; background: var(--gold); }
.lect .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lect .course-card {
  display: block;
  text-decoration: none;
  background: var(--bg-raise);
  border-top: 3px solid var(--gold);
  padding: 28px;
  min-height: 150px;
}
.lect .course-card .idx { font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--gold); }
.lect .course-card h2 { margin: 10px 0 4px; font-size: 1.5rem; font-weight: 600; color: var(--fg); } /* 국문 과목명 — §7b-1 산세리프 600 as-built */
.lect .course-card .meta { margin-top: 12px; color: var(--fg-mute); font-size: var(--fs-small); }
.lect .course-card:hover h2 { color: var(--gold); }

/* ── 과목 페이지 헤더 (§2) ── */
.lect h1.course { font-family: "Playfair Display", serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 18px 0 4px; }
/* §7b-1: Playfair 는 한글 글리프가 없어 국문은 산세리프 600 폴백으로 렌더 — as-built 규칙. 한글 세리프 추가 로드 금지. */
.lect .meta { margin-top: 14px; color: var(--fg-mute); font-size: var(--fs-small); }
.lect .book { margin-top: 6px; color: var(--fg-mute); font-size: var(--fs-small); }
.lect .book a { color: var(--gold); text-decoration: none; }
.lect .ov { margin-top: 16px; max-width: 640px; line-height: 1.7; color: var(--fg); }
.lect .tw-btn {
  display: inline-block; margin-top: 20px; padding: 10px 18px;
  border: 1px solid var(--fg-dim); color: var(--fg); text-decoration: none;
  font-size: var(--fs-label); letter-spacing: var(--track-label);
}
.lect .tw-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── QR aside (SPEC-LECTURES-QR v1.0) — 헤더 우측·데스크톱 전용 ── */
.lect .course-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.lect .course-head-main { min-width: 0; }
.lect .qr-aside { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.lect .qr-card {
  display: block; width: 192px; height: 192px; box-sizing: border-box;
  padding: 12px; /* 콰이엇존 — 카드 192 = QR 168 + 12×2 (헤더 수납 192·스캔 거리 168 두 기준값 유지) */
  background: #ffffff; /* 사이트 유일 순백 면 — 스캔 대비(§2). radius 0·테두리·그림자 없음 */
}
.lect .qr-card img { display: block; width: 100%; height: 100%; }
.lect .qr-cap { font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--fg-mute); }
.lect .qr-url { font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--fg-dim); }
@media (max-width: 768px) {
  .lect .qr-aside { display: none; } /* 폰으로 이 페이지를 보는 사람에게 이 페이지 QR은 무의미(§1) */
}

/* ── 주차 리스트 (§3) — BOOKS 헤어라인 표 문법의 확장 ── */
.lect .weeks { margin-top: 48px; border-bottom: 1px solid rgba(154, 160, 168, 0.18); }
.lect .wk { border-top: 1px solid rgba(154, 160, 168, 0.18); }
.lect .wk > button {
  all: unset; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; cursor: pointer; box-sizing: border-box; padding: 8px 4px;
}
.lect .wk > button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.lect .wno { font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--fg-dim); font-variant-numeric: tabular-nums; min-width: 36px; }
.lect .badge {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  border: 1px solid var(--fg-dim); color: var(--fg-dim);
  border-radius: 2px; padding: 2px 8px; white-space: nowrap;
}
.lect .badge.remote { border-color: var(--fg-mute); color: var(--fg-mute); }
.lect .badge.exam { border-color: var(--gold); color: var(--gold); } /* 면 채움 금지 — 주홍 면적 규칙(§3.3) */
.lect .topic { font-weight: 500; flex: 1; min-width: 0; }
.lect .ind { font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--fg-dim); white-space: nowrap; }
.lect .chev { color: var(--fg-dim); transition: transform var(--dur-fast) var(--ease); }
.lect .wk.open .chev { transform: rotate(180deg); }

/* 펼침: max-height 금지(내용 가변, §3.2) — grid-template-rows 0fr→1fr */
.lect .panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-fast) var(--ease); }
.lect .wk.open .panel { grid-template-rows: 1fr; }
.lect .panel > div { overflow: hidden; }
.lect .pin { padding: 4px 4px 26px 54px; }
.lect .pin.bare { padding: 0; } /* 내용 전무 주차 — 빈 상자 여백 제거(자료 준비 중 문구 삭제에 따른 정리) */
.lect .detail { color: var(--fg-mute); line-height: 1.7; max-width: 600px; }
.lect .weight { margin-top: 10px; }
.lect .weight b { color: var(--gold); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.04em; }
.lect .bh { margin: 22px 0 8px; font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--fg-mute); }
.lect .file {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none; color: var(--fg); border-top: 1px solid rgba(154, 160, 168, 0.10);
}
.lect .file:first-of-type { border-top: 0; }
.lect .file:hover .fn { color: var(--gold); }
.lect .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lect .fm { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--fg-dim); white-space: nowrap; }
.lect .asg { line-height: 1.7; }
.lect .asgmeta { margin-top: 8px; font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--fg-dim); }
.lect .asgmeta b { color: var(--gold); font-weight: 600; }
.lect .notice { color: var(--fg-mute); line-height: 1.7; }
.lect .empty { color: var(--fg-dim); font-size: var(--fs-small); }

/* THIS WEEK (§3.4) — 좌측 3px 주홍 룰(카드 상단 룰의 세로 전개) + bg-raise, 동시에 1행만 */
.lect .wk.now { background: var(--bg-raise); box-shadow: inset 3px 0 0 var(--gold); }
.lect .wk.now .wno { min-width: auto; }
.lect .wk.now .wno::after { content: "THIS WEEK"; color: var(--gold); margin-left: 10px; }

/* ── 모바일 (§4·§7b-2) ── */
@media (max-width: 768px) {
  /**
   * §7c (2026-09-01) — **1행 = 메타 전용, 2행 = 제목 전폭**.
   * ★ 근본 처치: 가변 길이인 것은 제목뿐인데, 그것을 고정 길이 라벨들(W01·THIS WEEK·배지·인디케이터)과
   *   같은 줄에 두어 **좁은 잔여 폭에서 3줄로 감기고 우측으로 밀렸다.** 가변 요소를 고정 요소와
   *   같은 줄에 두지 않는 것이 처방이다(제목을 아래로 내리는 것만으로는 잔여 폭 문제가 남는다).
   * ★ 개정(2026-09-01 사용자 지시 "조건부 하강으로 두지 말고 그냥 한칸 밑으로 내리세요 모두"):
   *   **조건 분기를 두지 않는다.** 폭에 따라 위치가 달라지면 화면이 예측 불가능해진다 —
   *   인디케이터도 무조건 2행으로 내려 모든 주차·모든 뷰포트에서 같은 구조가 된다.
   *   1행 = W01 · THIS WEEK · 배지 · 셰브론(고정 라벨만) / 2행 = 제목 + 인디케이터(전폭 좌측 정렬).
   */
  /**
   * 행 간 숨 간격 — 사용자 지시("한줄 더 내립시다. 좀 답답해 보여서요", 2026-09-01) / §7c.3 확정값.
   * ★ row-gap 만 늘리면 **인접 주차가 서로 섞여 읽힌다** — 주차 행은 헤어라인으로만 구분되므로
   *   행 사이 여백이 행 내부 여백보다 커야 그룹핑이 유지된다. padding-block 을 함께 올려
   *   **부등식 `padding-block × 2 > row-gap`** 을 지킨다(14×2=28 > 8). 조정 시에도 이 부등식이 근거다.
   *   row-gap 은 6/8/10 사이에서 움직일 수 있고, 그 위로 가야 하면 padding-block 을 먼저 올린다.
   */
  .lect .wk > button { flex-wrap: wrap; row-gap: 8px; padding: 14px 4px; position: relative; align-items: baseline; }
  .lect .wno { order: 1; }
  .lect .badge { order: 2; }
  /* 인디케이터 — 2행, 제목 아래. 좌단은 제목과 같은 선에 맞춘다(조건 분기 없음) */
  .lect .ind { order: 6; flex: 0 0 100%; min-width: 100%; margin-left: 0; padding-left: 0; }
  /* §7b-2(셰브론 1행 우단) 유지 — 다만 **absolute + top 고정값을 폐기**하고 1행의 마지막 항목으로 둔다.
     그러면 세로 위치가 1행 baseline 에서 파생되어 어느 폭·어느 글자 크기에서도 정렬이 맞는다
     (고정 top 은 한 조건에서만 맞았고 실측 Δ4.5px 로 어긋났다). */
  /**
   * 셰브론 — 1행 우단(§7b-2). absolute 고정값 대신 1행 마지막 항목이라 정렬이 조판에서 파생된다.
   * ★ Δ 2.00px 은 여유 부족이 아니라 **구조적 상수**였다: 컨테이너가 align-items:baseline 이라
   *   글리프('⌄')와 라벨('W01')의 baseline 이 맞고, 두 글꼴 상자 높이 차(14px vs 11px)의 절반인
   *   1.5~2px 만큼 광학 중심이 어긋난다. 세 폭에서 같은 값이 나온 이유다.
   *   → baseline 대신 **그 flex 라인 안에서 center** 정렬로 바꿔 Δ 를 0 근처로 내린다
   *     (wrap 된 flex 에서 align-self 는 해당 라인 기준이므로 2·3행에 영향이 없다).
   */
  .lect .chev { order: 3; position: static; flex: 0 0 auto; margin-left: auto; align-self: center; }
  /**
   * 제목 — **좁아지면 자기 줄로 내려간다**(조건부 하강).
   * ★ 무조건 전폭으로 내리면 증상이 없는 행(THIS WEEK·긴 배지가 없어 잔여 폭이 넉넉한 행)까지
   *   한 줄씩 더 먹어 15행 목록 높이가 늘어난다(실측 +130px). §7c ④ "높이가 개정 전보다 크지 않을 것"과 충돌.
   * ★ 조건부 하강(min-width 로 잔여 폭이 좁을 때만 내리기)은 **이 구조에서 성립하지 않는다** —
   *   인디케이터가 1행 우측을 점유하므로 어느 행이든 제목 자리가 남지 않아 항상 내려간다(실측).
   *   그래서 스펙 문면대로 전폭 고정으로 둔다. 높이 증가(실측 +130px/15행)는 §7c ④와 충돌하며
   *   판정은 @designer 소관으로 남긴다 — 임의 절충은 의도를 흐린다.
   *   말줄임 금지(넓은 폭에서 2줄은 정상): 결함은 '감김'이 아니라 '좁은 폭에서 감김'이었다.
   */
  .lect .topic { order: 5; flex: 0 0 100%; min-width: 100%; }
  /* 펼침 패널 상단 10px — 첫 내용이 인디케이터에 붙지 않게(4px 은 새 row-gap 8px 보다 작아 역전됐다) */
  .lect .pin { padding-left: 4px; padding-top: 10px; }
  /* 파일 행: 파일명 1행 말줄임 + 메타 2행째 (§4) */
  .lect .file { flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
  .lect .fn { flex-basis: 100%; }
  .lect .fm { padding-left: 18px; }
}

/* ── 관리자 (§5) — 도구: Playfair 0 · 애니메이션 0 · 주홍 면은 저장 버튼만 ── */
.lect.admin * { transition: none !important; animation: none !important; }
.lect .admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.lect .login-card {
  max-width: 360px; margin: 18vh auto 0; background: var(--bg-raise); padding: 32px;
  border-top: 3px solid var(--gold);
}
.lect .login-card h1 { font-size: var(--fs-card); font-weight: 600; margin: 0 0 18px; }
.lect input[type="text"],
.lect input[type="password"],
.lect input[type="date"],
.lect textarea {
  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg);
  border: 1px solid var(--fg-dim); border-radius: 2px; padding: 10px 12px;
  font: inherit; font-size: var(--fs-small); margin-bottom: 12px;
}
.lect input:focus, .lect textarea:focus { outline: none; border-color: var(--gold); }
.lect .btn-save {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--gold); color: var(--on-gold); /* 관리자 화면의 유일한 면 채움(§5) */
  font-size: var(--fs-label); letter-spacing: var(--track-label); font-weight: 600;
  padding: 10px 20px; border-radius: 2px;
}
.lect .btn-ghost {
  display: inline-block; border: 1px solid var(--fg-dim); background: none; cursor: pointer;
  color: var(--fg-mute); font-size: var(--fs-label); letter-spacing: var(--track-label);
  padding: 8px 14px; border-radius: 2px;
}
.lect .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.lect .form-msg { font-size: var(--fs-small); color: var(--fg-mute); min-height: 1.4em; margin-top: 8px; } /* 인라인 피드백 — 토스트 불요(§5) */
.lect .form-msg.err { color: var(--gold); }
.lect .tabs { display: flex; gap: 10px; margin: 22px 0; }
.lect .tab { border: 1px solid var(--fg-dim); background: none; color: var(--fg-mute); cursor: pointer; padding: 8px 16px; font-size: var(--fs-label); letter-spacing: var(--track-label); border-radius: 2px; }
.lect .tab[aria-selected="true"] { border-color: var(--gold); color: var(--gold); }
.lect .vis-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: var(--fs-small); color: var(--fg-mute); }
.lect .wk .cur-radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--fg-dim); cursor: pointer; white-space: nowrap; }
.lect .dropzone {
  border: 1px dashed var(--fg-dim); border-radius: 2px; padding: 22px; text-align: center;
  color: var(--fg-dim); font-size: var(--fs-small); cursor: pointer; margin: 10px 0;
}
.lect .dropzone.over { border-color: var(--gold); color: var(--gold); }
.lect .file .del { border: 0; background: none; color: var(--fg-dim); cursor: pointer; font-size: var(--fs-label); letter-spacing: var(--track-label); padding: 6px; }
.lect .file .del:hover { color: var(--gold); }