/* YMAS v4 — 정통 공공기관형
   톤: 차분한 블루/그레이, 정보밀도 높은 레이아웃, 관공서 웹사이트 정통 스타일 */

/* Pretendard 로컬 셀프호스팅 (정적 핸드오프 단독 로드 시에도 폰트 적용) */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  --blue: #1E5799;
  --blue-2: #164578;
  --blue-3: #0E3763;
  --blue-soft: #EAF1F9;
  --blue-line: #C9DAEC;
  --navy: #0C2340;
  --red: #C23030;
  --red-soft: #FBECEC;
  --green: #2E7D32;
  --amber: #B8860B;
  --ink: #1A1A1A;
  --ink-2: #3A3A3A;
  --ink-3: #6B6B6B;
  --ink-4: #999999;
  --line: #D9D9D9;
  --line-soft: #ECECEC;
  --bg: #FFFFFF;
  --bg-soft: #F5F7FA;
  --bg-soft-2: #EEF1F5;

  --sans: 'Pretendard', 'Malgun Gothic', '맑은 고딕', ui-sans-serif, system-ui, sans-serif;
  --serif: var(--sans);
  --mono: var(--sans);

  --maxw: 1240px;
}

* { box-sizing: border-box; }
/* Track 5E — 가로 overflow 방어. 단 `overflow-x: hidden` 은 html/body 에 걸면
   sticky 자식의 스크롤 컨테이너를 바꿔 position:sticky 가 깨진다 (Safari·일부 Chrome 빌드).
   `overflow-x: clip` 은 동일하게 가로 overflow 를 막으면서 스크롤 컨테이너를 만들지 않아 sticky 정상 동작.
   미지원 브라우저(Safari <16)는 fallback 으로 hidden 적용 → 그 환경에서만 sticky 깨짐을 감수. */
html, body { margin: 0; padding: 0; overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* 2026-05-26 — handoff html (notices/about) 의 inline static skeleton 레이아웃.
   #root 안에 미리 정적 skeleton HTML 을 넣어두고 React 가 마운트되면 그것을 교체.
   사용자 체감: 흰 화면 X → 회색 골격이 즉시 보임 → React 마운트되며 fade-in 으로 컨텐츠 교체. */
.handoff-shell { background: #F2F5F9; min-height: 100vh; }
.handoff-util {
  height: 34px; background: #3A3A3A;
  border-bottom: 1px solid #2A2A2A;
}
.handoff-header-skel {
  max-width: 1240px; margin: 0 auto;
  padding: 20px 28px;
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.handoff-hero-skel {
  padding: 56px 0 44px;
  background: linear-gradient(180deg, var(--blue-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.handoff-hero-skel > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }
.handoff-body-skel {
  max-width: 1240px; margin: 32px auto;
  padding: 24px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}

/* React 마운트 시 #root 안의 새 컨텐츠가 stagger 로 차례로 fade-in
   — 한 번에 띄우지 않고 섹션이 110ms 시차로 등장 (2026-05-26 — delay 강화). */
body.handoff-fade-in #root > *:not(.handoff-shell) {
  animation: handoffContentFade 440ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(1)  { animation-delay:    0ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(2)  { animation-delay:  110ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(3)  { animation-delay:  220ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(4)  { animation-delay:  330ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(5)  { animation-delay:  440ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(6)  { animation-delay:  550ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(7)  { animation-delay:  660ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(8)  { animation-delay:  770ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(9)  { animation-delay:  880ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(10) { animation-delay:  990ms; }
body.handoff-fade-in #root > *:not(.handoff-shell):nth-child(n+11) { animation-delay: 1100ms; }
@keyframes handoffContentFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.handoff-fade-in #root > *:not(.handoff-shell) { animation: none !important; }
}
/* Track 5E — 모바일 가로 오버플로우 방어 */
@media (max-width: 880px) {
  .container,
  .util-inner,
  .header-inner,
  .gnb-inner,
  .v4-header-inner,
  .mypage-grid {
    max-width: 100vw;
  }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
img, svg { display: block; max-width: 100%; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ Utility top bar ============ */
.util {
  background: #3A3A3A;
  color: #D9D9D9;
  font-size: 12px;
  border-bottom: 1px solid #2A2A2A;
}
.util-inner {
  display: flex; justify-content: space-between;
  height: 34px; align-items: center;
}
.util-l, .util-r { display: flex; gap: 0; align-items: center; }
/* util-l 외부 링크 2종 — 가로 분담 + 줄임표 (2026-05-25) */
.util-l { min-width: 0; flex: 1 1 auto; overflow: hidden; flex-wrap: nowrap; }
.util-l .home { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.util a { padding: 0 14px; border-right: 1px solid rgba(255,255,255,0.12); height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.util-l a:first-child { padding-left: 0; }
.util-r a:last-child { border-right: 0; }   /* 우측 패딩 유지 — hover 배경 breathing space */
.util a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.util .home { color: #FFD666; font-weight: 600; }
.util .lang {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
  margin-left: 10px;
  font-size: 11px;
}

/* ============ Header / brand row ============ */
.header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 16px;
}
.brand-seal {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0 8px 22px rgba(12, 35, 64, 0.22),
    0 2px 6px rgba(12, 35, 64, 0.14),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s;
}
.brand-seal::after {
  /* 외곽 골드 hairline ring (SVG 안쪽 ring 과 별개로 box-shadow 외곽 광택) */
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 60%, rgba(201,162,58,0.18) 100%);
  opacity: 0;
  transition: opacity .25s;
}
.brand:hover .brand-seal { transform: translateY(-1px) scale(1.02); }
.brand:hover .brand-seal::after { opacity: 1; }
.brand-seal svg { display: block; width: 100%; height: 100%; }
.brand-seal {
  /* legacy 텍스트 폴백 — SVG 가 로드되기 전 보일 수 있는 텍스트 톤 (현재는 SVG 인라인이라 무관) */
  color: #fff;
  font-family: var(--serif);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  border: 3px solid var(--blue-3);
  box-shadow: inset 0 0 0 2px #fff;
}
.brand-texts { display: flex; flex-direction: column; gap: 1px; }
/* 마이크로 라틴 라벨 — 브랜드명 위 작은 mono 라인 (2026-05-25 고급화) */
.brand-microline {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.brand-korean {
  font-family: var(--serif);
  font-size: 23px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: 2px;
}
/* Y-EDU 옆 (와이에듀) 작은 글자 — 2026-05-25 */
.brand-kana {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -0.01em;
  margin-left: 3px;
  vertical-align: 2px;
}
@media (max-width: 880px) {
  .brand-kana { font-size: 11px; }
}
.brand-english {
  font-family: var(--serif);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.brand-coop {
  font-size: 11px;
  color: var(--ink-3);
  padding-left: 18px;
  margin-left: 18px;
  border-left: 1px solid var(--line);
  line-height: 1.5;
}
.brand-coop strong { color: var(--navy); font-weight: 700; }

.header-right {
  display: flex; align-items: center; gap: 14px;
}
.search-box {
  display: flex; align-items: center;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  background: #fff;
  width: 280px;
}
.search-box input {
  border: 0; outline: 0;
  font: inherit; font-size: 13px;
  background: transparent;
  flex: 1;
  color: var(--ink);
}
.search-box input::placeholder { color: var(--ink-4); }
.search-btn {
  width: 28px; height: 28px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
}
.apply-btn {
  background: var(--red);
  color: #fff;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  display: inline-flex; gap: 8px; align-items: center;
}
.apply-btn:hover { background: #A02020; }

/* ============ Gnb (main nav) ============ */
.gnb {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--blue);
}
.gnb-inner {
  display: flex; align-items: stretch;
}
.gnb-home {
  padding: 0 22px;
  display: grid; place-items: center;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  height: 56px;          /* gnb-item 과 동일 — flex 부모의 stretch 의존 제거 */
  cursor: pointer;
}
.gnb-home:hover { background: var(--blue-2); }
/* globals.css 의 width:60px / bg:blue 강제 설정 무력화 (specificity 동일 + 후순위 선언) */
.gnb .gnb-home { width: auto; background: transparent; font-size: 14px; }
.gnb .gnb-home:hover { background: var(--blue-2); }
.gnb .gnb-home.active { background: var(--blue); }
.gnb-home.active { background: var(--blue); }
.gnb-home.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px; height: 3px;
  background: #FFD666;
}
.gnb-items {
  display: flex; flex: 1;
}
.gnb-item {
  flex: 1;
  padding: 0 10px;
  height: 56px;
  display: grid; place-items: center;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  position: relative;
  letter-spacing: -0.01em;
}
.gnb-item:hover { background: var(--blue-2); }
.gnb-item.active { background: var(--blue); }
.gnb-item.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -3px; height: 3px;
  background: #FFD666;
}
.gnb-sitemap {
  width: 56px;
  background: var(--blue-3);
  display: grid; place-items: center;
  color: #fff;
}

/* ============ Hero / Visual ============ */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(30,87,153,0.10), transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(245,176,66,0.08), transparent 60%),
    linear-gradient(180deg, var(--blue-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-pre {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,87,153,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,87,153,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,87,153,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,87,153,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0) 80%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -80px; top: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, rgba(30,87,153,0.18) 0%, rgba(30,87,153,0.05) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero {
  padding: 36px 0 28px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }

/* ===== 히어로 배경 이미지 슬라이드 (관리자 등록 시) — navy 글래스 스크림 + 화이트 텍스트 (2026-06-05) ===== */
.hero-has-bg { position: relative; overflow: hidden; }
.hero-has-bg .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-has-bg .hero-bg-scrim {
  position: absolute; inset: 0; z-index: 1;
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  background: linear-gradient(100deg, rgba(11,22,45,0.90) 0%, rgba(11,22,45,0.64) 46%, rgba(11,22,45,0.30) 100%);
}
.hero-has-bg .hero-inner { position: relative; z-index: 2; }
.hero-has-bg .hero-title { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.30); }
.hero-has-bg .hero-title span { color: #7FB2E8; }
.hero-has-bg .hero-sub { color: rgba(255,255,255,0.92); }
.hero-has-bg .hero-eyebrow { color: rgba(255,255,255,0.9); }
.hero-has-bg .hero-trust { border-top-color: rgba(255,255,255,0.25); }
.hero-has-bg .ht-cap, .hero-has-bg .ht-cap strong { color: #fff; }
.hero-has-bg .hero-pager span, .hero-has-bg .hero-pager .cur { color: rgba(255,255,255,0.92); }
.hero-has-bg .hero-pager button { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.4); }

.hero-slide {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-top: 3px solid var(--blue);
  padding: 36px 40px;
  display: flex; flex-direction: column;
  position: relative;
  min-height: 320px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 12px;
}
.hero-eyebrow .tag {
  background: var(--blue);
  color: #fff;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.hero-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 18px;
}
.hero-title span { color: var(--blue); }
.hero-sub {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 50ch;
}
.hero-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 14px 0 0;
  border-top: 1px dashed var(--blue-line);
  display: flex; flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--ink-2);
}
.hero-points li {
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
}
.hero-points li::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23000' d='M6.4 11.2 3.2 8l1.13-1.13L6.4 8.93l5.27-5.27L12.8 4.8z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23000' d='M6.4 11.2 3.2 8l1.13-1.13L6.4 8.93l5.27-5.27L12.8 4.8z'/></svg>") center/contain no-repeat;
}
.hero-ctas { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; align-items: center; }
.hbtn {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  display: inline-flex; gap: 8px; align-items: center;
  border: 1px solid transparent;
}
.hbtn.primary { background: var(--navy); color: #fff; }
.hbtn.primary:hover { background: var(--blue-3); }
.hbtn.outline { border-color: var(--line); color: var(--ink); background: #fff; }
.hbtn.outline:hover { border-color: var(--navy); color: var(--navy); }

.hero-pager {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: auto;
  align-self: center;
}
.hero-pager .cur { color: var(--blue); font-weight: 700; font-size: 15px; }
.hero-pager button {
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 2px;
  display: grid; place-items: center;
  font-size: 11px;
}
.hero-pager button:hover { border-color: var(--navy); }

/* Right-side quick-link grid (2x2) */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}
.ql {
  background: #fff;
  border: 1px solid var(--blue-line);
  padding: 18px 16px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: border-color .15s, background .15s;
}
.ql:hover { border-color: var(--blue); background: var(--blue-soft); }
.ql .ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 16px;
  margin-bottom: 2px;
}
.ql .t { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.ql .d { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.ql .arr {
  align-self: flex-end;
  margin-top: auto;
  color: var(--blue);
  font-size: 13px;
}

/* ============ Section header ============ */
.sec { padding: 48px 0 52px; border-bottom: 1px solid var(--line-soft); }
.sec-alt { background: var(--bg-soft); }
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap; gap: 12px;
}
.sec-t {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.sec-t::before {
  content: '';
  width: 4px; height: 22px;
  background: var(--blue);
  display: inline-block;
}
.sec-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px;
  color: var(--ink-2);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.sec-more:hover { border-color: var(--navy); color: var(--navy); }

/* ============ Notice + Events two-column board ============ */
.board-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
}
/* 중간 화면: 공지·행사 두 열 + 고객센터 아래 풀폭 */
@media (max-width: 1100px) {
  .board-row { grid-template-columns: 1fr 1fr; }
  .board-row > .contact-card { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .board-row { grid-template-columns: 1fr; } }

.board {
  background: #fff;
  border: 1px solid var(--line);
  min-width: 0;                                /* grid item 의 자식이 ellipsis 처리되도록 */
}
.board-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-bottom: 2px solid var(--navy);
  flex-wrap: wrap;                             /* 탭 많으면 줄바꿈 */
}
.board-head h3 {
  font-size: 16px; font-weight: 700; color: var(--navy);
  margin: 0; letter-spacing: -0.01em; flex-shrink: 0;
}
.board-head .tabs { display: flex; gap: 0; flex-wrap: wrap; }
.board-head .tab {
  font-size: 13px;
  padding: 4px 12px;
  color: var(--ink-3);
  border-right: 1px solid var(--line);
  background: transparent; cursor: pointer;
  white-space: nowrap;
}
.board-head .tab:last-child { border-right: 0; }
.board-head .tab.active { color: var(--navy); font-weight: 700; }
.board-head .more-ico {
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--ink-3);
  border-radius: 2px;
}
.board-body { padding: 6px 18px 12px; }

.board-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
.board-list li {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 13.5px;
  min-width: 0;                                /* 자식 ellipsis 가 유효하게 */
}
.board-list li:last-child { border-bottom: 0; }
.board-list .tag {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px;
  background: var(--bg-soft-2);
  color: var(--ink-2);
  border-radius: 2px;
  flex-shrink: 0;
}
.board-list .tag.imp { background: var(--red); color: #fff; }
.board-list .tag.evt { background: var(--green); color: #fff; }
.board-list .tag.sys { background: var(--amber); color: #fff; }
.board-list .tag.pol { background: #8B6500; color: #fff; }
.board-list .title {
  flex: 1 1 0;
  min-width: 0;                                /* flex item 줄어들기 허용 — ellipsis 핵심 */
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-list .title:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.board-list .date { font-size: 12px; color: var(--ink-3); flex-shrink: 0; font-family: var(--mono); }
.board-list .new {
  display: inline-block; width: 14px; height: 14px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 50%; text-align: center; line-height: 14px;
}

/* Contact card in board-row */
.contact-card {
  background: var(--navy);
  color: #fff;
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.contact-card .lbl { font-size: 11px; color: #A0B4CE; letter-spacing: 0.08em; }
.contact-card h4 {
  font-size: 18px; font-weight: 700; margin: 0;
  letter-spacing: -0.01em;
}
.contact-card .tel {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.01em;
  font-family: var(--mono);
}
.contact-card .hrs { font-size: 12px; color: #C9DAEC; line-height: 1.5; }
.contact-card .links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.contact-card .links a {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  color: #fff;
}
.contact-card .links a:hover { background: rgba(255,255,255,0.1); }

/* Rating + review snippet inside rcard */
.rcard-rev {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.rcard-rev-head, .ss-rev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rcard-rev .stars, .ss-rev .stars { color: var(--line); letter-spacing: 1px; font-size: 13px; }
.rcard-rev .stars .on, .ss-rev .stars .on { color: #E8A93B; }
.rcard-rev .rate, .ss-rev .rate { font-family: var(--mono); font-weight: 700; color: var(--navy); font-size: 13px; }
.rcard-rev .rev-c, .ss-rev .rev-c { font-size: 11.5px; color: var(--ink-3); padding-left: 6px; border-left: 1px solid var(--line); }
.rcard-rev-q, .ss-rev-q {
  font-size: 12px; color: var(--ink-2); line-height: 1.55;
  background: var(--bg-soft); padding: 8px 10px; border-left: 2px solid var(--blue);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ss-rev {
  margin: 8px 0 10px; padding: 10px 0 0;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px;
}

/* ============ Course (recruiting) grid ============ */
.recruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .recruit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .recruit-grid { grid-template-columns: 1fr; } }

/* ============ 미니멀 강좌 카드 (2026-06-05) — /apply · 홈 모집중 공통 ============
   구성: 썸네일 + 과목명 + 트랙명 + 교수님 + 시간(기간·총 강의 시간). */
.rcard-mini {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.rcard-mini:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(20,38,75,.25); }
.rcard-mini-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg-soft-2);
  display: flex; align-items: center; justify-content: center;
}
/* 2026-06-17 — 카드는 여백 없이 꽉 채움(fill). 비율 다르면 약간 늘어나지만 잘림·빈공간 없음. */
.rcard-mini-thumb img { width: 100%; height: 100%; object-fit: fill; display: block; }
.rcard-mini-thumb > svg,
.rcard-mini-thumb > .thumb-free { position: absolute; inset: 0; width: 100%; height: 100%; }
.rcard-mini-thumb.track-track1 { background: linear-gradient(135deg,#14264B,#2F6AA8); }
.rcard-mini-thumb.track-track2 { background: linear-gradient(135deg,#1F3F73,#5E97C9); }
.rcard-mini-thumb.track-track3 { background: linear-gradient(135deg,#0F2748,#6E5326); }
.rcard-mini-thumb.track-freeform { background: linear-gradient(135deg,#3B2D60,#7E68B0); }
.rcard-mini-ph {
  position: relative; z-index: 1; padding: 0 16px;
  color: rgba(255,255,255,.95); font-size: 13px; font-weight: 600;
  text-align: center; word-break: keep-all; line-height: 1.4;
}
.rcard-mini-closed {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(20,30,50,.82); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 2px;
}
.rcard-mini.is-closed { opacity: .92; }
.rcard-mini.is-closed .rcard-mini-thumb img,
.rcard-mini.is-closed .rcard-mini-thumb > svg,
.rcard-mini.is-closed .rcard-mini-thumb > .thumb-free { filter: grayscale(.5) brightness(.82); }
.rcard-mini-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rcard-mini-track { font-size: 11.5px; font-weight: 600; color: var(--blue); word-break: keep-all; }
.rcard-mini-title {
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.4;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcard-mini-prof { font-size: 13px; color: var(--ink-2); word-break: keep-all; }
.rcard-mini-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.rcard-mini-time .sep { color: var(--line); }
@media (max-width: 600px) {
  .rcard-mini-body { padding: 12px 14px 14px; }
  .rcard-mini-title { font-size: 15px; }
}

.rcard {
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.rcard:hover { border-color: var(--blue); transform: translateY(-2px); }
.hero {
  background:
    radial-gradient(900px 380px at 88% 0%, rgba(30,87,153,0.10), transparent 60%),
    radial-gradient(700px 320px at 0% 100%, rgba(245,176,66,0.10), transparent 65%),
    linear-gradient(180deg, #F4F7FB 0%, #EAF0F8 100%);
  border-bottom: 1px solid #d8e1ec;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,87,153,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,87,153,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 75%);
  pointer-events: none;
}

/* Hero-slide background fill + tighter spacing */
.hero-slide {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(30,87,153,0.10), transparent 65%),
    radial-gradient(360px 200px at 0% 100%, rgba(245,176,66,0.10), transparent 70%),
    linear-gradient(160deg, #FBFCFE 0%, #F2F6FC 100%);
  border: 1px solid #d8e1ec;
}
.hero-slide::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,87,153,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,87,153,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(80% 80% at 30% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-slide::after {
  content: '';
  position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,87,153,0.10), transparent 70%);
  pointer-events: none;
}
.hero-slide > * { position: relative; z-index: 1; }
.hero-eyebrow { margin-bottom: 12px; }
.hero-title { margin: 0 0 10px; line-height: 1.18; }
.hero-sub { margin: 0 0 18px; line-height: 1.6; }
.hero-ctas { margin-bottom: 18px; }
.hero-pager { margin-bottom: 0; padding-left: 6px; }
.hero-trust { margin-top: 16px; padding-top: 14px; }
.ht-v { font-size: 22px; }

.rcard .thumb-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rcard .thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,87,153,0.55) 0%, rgba(20,40,80,0.35) 60%, rgba(0,0,0,0.15) 100%);
}
.rcard .thumb.semi .thumb-overlay {
  background: linear-gradient(135deg, rgba(139,107,46,0.55) 0%, rgba(80,55,20,0.35) 60%, rgba(0,0,0,0.15) 100%);
}
.rcard .thumb-track {
  position: absolute;
  right: 14px; bottom: 12px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-weight: 600;
}
.rcard .thumb-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rcard .thumb {
  height: 140px;
  background: var(--blue-soft);
  position: relative;
  display: grid; place-items: center;
  color: var(--blue);
  font-size: 42px;
  border-bottom: 1px solid var(--line);
}
.rcard .thumb.semi { background: #F3EEE5; color: #8B6B2E; }
.rcard .status-stamp {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 700;
  background: var(--red); color: #fff;
  border-radius: 2px;
}
.rcard .status-stamp.open { background: var(--green); }
.rcard .status-stamp.soon { background: var(--amber); }
.rcard .ov {
  position: absolute;
  bottom: 10px; left: 10px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.rcard .body {
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  flex: 1;
}
.rcard .tagline { display: flex; gap: 6px; margin-bottom: 10px; }
.rcard .tagline span {
  font-size: 11px; font-weight: 600;
  padding: 2px 7px;
  background: var(--bg-soft-2);
  color: var(--ink-2);
  border-radius: 2px;
}
.rcard .tagline span.ai { background: var(--blue-soft); color: var(--blue); }
.rcard .tagline span.semi { background: #F3EEE5; color: #8B6B2E; }
.rcard h4 {
  font-size: 15.5px; font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.rcard .meta { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; padding-top: 10px; border-top: 1px dashed var(--line); }
.rcard .meta .r { display: flex; gap: 8px; }
.rcard .meta .r .k { color: var(--ink-4); width: 48px; flex-shrink: 0; font-size: 11.5px; }
.rcard .meta .r .v { color: var(--ink-2); }

.rcard .apply {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.rcard .apply:hover { background: var(--blue-2); }

/* ============ Process (step boxes) ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  background: #fff;
  border: 1px solid var(--blue-line);
  padding: 24px 22px;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.step .no {
  font-size: 11px; font-weight: 700;
  color: #fff; background: var(--blue);
  padding: 3px 10px;
  display: inline-block;
  border-radius: 2px;
  align-self: flex-start;
}
.step .t { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.step .d { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.step .ico {
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.step::after {
  content: '›';
  position: absolute;
  right: -14px; top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: var(--line);
  z-index: 2;
  background: var(--bg-soft);
  padding: 0 4px;
  line-height: 1;
}
.step:last-child::after { display: none; }

/* ============ Stats strip ============ */
.stats-strip {
  background: var(--navy);
  color: #fff;
  padding: 36px 0;
}
.stats-strip .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.stats-intro { font-size: 15px; line-height: 1.55; max-width: 600px; flex: 1 1 auto; min-width: 0; }
.stats-intro h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.015em; }
.stats-intro p { color: #C9DAEC; margin: 0; font-size: 13px; word-break: keep-all; }
@media (max-width: 880px) { .stats-intro { max-width: 100%; } }
.stats-nums { display: flex; gap: 36px; flex-wrap: wrap; }
.stats-nums .n {
  text-align: left;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.2);
}
.stats-nums .n .lbl { font-size: 12px; color: #A0B4CE; }
.stats-nums .n .val {
  font-size: 34px; font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-family: var(--mono);
}
.stats-nums .n .val small { font-size: 14px; color: #C9DAEC; margin-left: 2px; font-weight: 400; font-family: var(--sans); }

/* ============ Partners strip ============ */
.partners {
  background: var(--bg-soft);
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}
.partners .container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.partners .lbl {
  font-size: 12px; font-weight: 700;
  color: var(--ink-2);
  padding-right: 16px;
  border-right: 1px solid var(--line);
  letter-spacing: 0.04em;
}
.partners .logos {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
}
.plogo {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 6px;
}
.plogo::before {
  content: '';
  width: 24px; height: 24px;
  background: var(--line);
  border-radius: 50%;
  display: inline-block;
}

/* ============ Footer ============ */
.foot {
  background: #F0F2F5;
  border-top: 1px solid var(--line);
}
.foot-top {
  border-bottom: 1px solid var(--line);
}
.foot-top .container { display: flex; gap: 0; flex-wrap: wrap; }
.foot-top a {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
.foot-top a:first-child { padding-left: 0; }
.foot-top a.strong { color: var(--navy); font-weight: 700; }
.foot-top a:hover { color: var(--blue); }

.foot-main { padding: 28px 0 32px; }
.foot-main .container { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
@media (max-width: 700px) { .foot-main .container { grid-template-columns: 1fr; } }
.foot-org { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.foot-seal {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: transparent;
  box-shadow:
    0 10px 26px rgba(12, 35, 64, 0.22),
    0 2px 8px rgba(12, 35, 64, 0.16),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  /* legacy fallback */
  color: var(--navy);
  font-family: var(--serif);
  font-size: 20px; font-weight: 700;
}
.foot-seal svg { display: block; width: 100%; height: 100%; }
.foot-org-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.foot-microline {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.foot-org .t {
  font-family: var(--serif);
  font-size: 16px; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.35;
  word-break: keep-all;
}
.foot-kana {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-3);
  margin: 0 4px 0 2px;
  vertical-align: 2px;
}
.foot-org .s {
  font-size: 12px; color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.foot-addr { font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.foot-addr strong { color: var(--ink-2); }
.foot-copy {
  font-size: 11.5px; color: var(--ink-4);
  font-family: var(--mono);
  margin-top: 10px;
}

.foot-right { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.select-box {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  width: 220px;
  display: flex; justify-content: space-between;
  color: var(--ink-2);
}
.social-links { display: flex; gap: 6px; }
.social-links a {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--ink-3);
}
.social-links a:hover { border-color: var(--navy); color: var(--navy); }

/* Tweaks panel */
.tweaks-v4 {
  position: fixed; right: 20px; bottom: 20px;
  width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 100;
  display: none;
}
.tweaks-v4.open { display: block; }
.tweaks-v4 h5 { margin: 0 0 10px; font-size: 12px; color: var(--navy); font-weight: 700; display: flex; justify-content: space-between; align-items: center; letter-spacing: -0.01em; }
.tweaks-v4 label { display: block; font-size: 11px; color: var(--ink-3); margin: 10px 0 6px; }
.tweaks-v4 .row { display: flex; gap: 4px; }
.tweaks-v4 .row button { flex: 1; padding: 6px 8px; border: 1px solid var(--line); font-size: 11px; background: #fff; color: var(--ink-2); border-radius: 2px; }
.tweaks-v4 .row button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Quick-grid (right column) */
.ql {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 0; border: 1px solid #d8e1ec; border-radius: 10px; background: #fff;
  text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ql:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(30,87,153,0.14); border-color: rgba(30,87,153,0.4); }
.ql-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: saturate(0.95); }
.ql-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.ql .ico { font-size: 16px; color: #1E5799; margin-bottom: 2px; }
.ql .t { font-weight: 700; font-size: 14.5px; color: #0F1E3C; }
.ql .d { font-size: 12px; color: #6b7a90; }
.ql .arr {
  position: absolute; right: 12px; top: 12px;
  background: rgba(255,255,255,0.92); width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center;
  color: #1E5799; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Hero trust strip — fills empty space at bottom of hero-slide */
.hero-trust {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed #c9d4e3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 가치 배지 4종 (2026-06-05 — 통계 수치 폐지) */
  align-items: center;
  gap: 14px;
}
.ht-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 가치 배지 아이콘 (이모지) — ht-seal 과 동일 위계 */
.ht-ico { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.hero-trust .ht-item.ht-badge:first-child { border-left: none; padding-left: 0; }
.ht-k {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .06em;
  color: #6b7a90; text-transform: uppercase;
}
.ht-v {
  font-family: var(--sans);
  font-weight: 700; font-size: 26px; color: #0F1E3C;
  line-height: 1; letter-spacing: -0.02em;
}
.ht-v small { font-size: 13px; font-weight: 500; color: #6b7a90; margin-left: 3px; }
.ht-badge {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid #d8e1ec;
}
.ht-seal { flex: 0 0 auto; }
.ht-cap {
  font-size: 10.5px; line-height: 1.45; color: #4a5a72;
  font-weight: 600;
}
.ht-cap strong { color: #1E5799; }
@media (max-width: 720px) {
  .hero-trust { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* 2열에서 각 행 두 번째 칸 구분선 정리 — 홀수번째만 좌측선 제거 */
  .hero-trust .ht-item.ht-badge:nth-child(odd) { border-left: none; padding-left: 0; }
}


/* ============================================================
   Curriculum Matrix (3 트랙 × 3 레벨)
   ============================================================ */
.curriculum { padding: 56px 0 64px; background: #fff; }
.cm-head { max-width: 920px; margin: 0 0 28px; }
.cm-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 10px;
}
.cm-title {
  font-family: var(--serif);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.2;
}
.cm-sub {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 760px;
}
.cm-sub strong { color: var(--navy); font-weight: 700; }

/* 진급 흐름 표시 */
.cm-flow {
  display: flex; align-items: stretch;
  gap: 0;
  margin: 24px 0 28px;
  padding: 18px 24px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
}
.cm-flow-step {
  flex: 1;
  padding: 4px 14px;
  border-right: 1px dashed rgba(255,255,255,0.6);
}
.cm-flow-step:last-child { border-right: 0; }
.cm-flow-en {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.cm-flow-ko {
  font-size: 16px; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.lv-basic .cm-flow-ko { color: #1E5799; }
.lv-inter .cm-flow-ko { color: #7A1FA2; }
.lv-adv   .cm-flow-ko { color: #B8860B; }
.cm-flow-cap {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.cm-flow-arrow {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 14px;
  color: var(--ink-3);
}
.cm-flow-arrow span {
  font-size: 20px; font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.cm-flow-arrow small {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

/* 매트릭스 그리드 */
.cm-matrix {
  border: 1px solid var(--line);
  background: #fff;
  margin-top: 8px;
}
.cm-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
}
.cm-row + .cm-row { border-top: 1px solid var(--line); }
.cm-cell {
  padding: 18px 18px;
  border-right: 1px solid var(--line);
  background: #fff;
}
.cm-cell:last-child { border-right: 0; }

/* Header row */
.cm-row-head {
  background: var(--bg-soft);
  border-bottom: 2px solid var(--navy);
}
.cm-corner {
  background: var(--navy);
  color: #fff;
  padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: center;
}
.cm-corner-en {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em;
  opacity: 0.7;
}
.cm-corner-ko {
  font-size: 15px; font-weight: 700;
  margin-top: 4px;
}
.cm-h {
  padding: 16px 18px;
  border-top: 4px solid var(--blue);
  background: #fff;
}
.cm-h-en {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--ink-3);
}
.cm-h-ko {
  font-family: var(--serif);
  font-size: 22px; font-weight: 800;
  color: var(--navy);
  margin-top: 2px;
  letter-spacing: -0.02em;
}

/* Track 좌측 셀 */
.cm-track {
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  display: flex; flex-direction: column;
  gap: 6px;
  border-right: 2px solid var(--navy);
}
.cm-track-no {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
}
.cm-track-title {
  font-family: var(--serif);
  font-size: 17px; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cm-track-tagline {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-top: 4px;
}

/* 강좌 셀 */
.cm-course-cell {
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 240px;
}
.cm-course-cell:hover { background: var(--blue-soft); }
.cm-course-cell.active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.cm-cc-head {
  display: flex; align-items: center; justify-content: space-between;
}
.cm-cc-pill {
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.cm-cc-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.cm-cc-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.cm-cc-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-2);
  flex: 1;
}
.cm-cc-list li {
  display: flex; gap: 8px;
  line-height: 1.4;
}
.cm-cc-list .num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 2px;
}
.cm-cc-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
}
.cm-cc-cert {
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.cm-cc-arr {
  color: var(--blue);
  font-weight: 700;
}

/* 활성 셀 상세 패널 */
.cm-detail {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-top: 3px solid var(--blue);
  padding: 28px 28px 24px;
}
.cm-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.cm-detail-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 6px;
}
.cm-detail-title {
  font-family: var(--serif);
  font-size: 24px; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cm-detail-tagline {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}
.cm-detail-close {
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--sans);
  border-radius: 2px;
  flex-shrink: 0;
}
.cm-detail-close:hover { border-color: var(--navy); color: var(--navy); }

.cm-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cm-course {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: border-color .15s;
}
.cm-course:hover { border-color: var(--blue); background: #fff; }
.cm-course-no {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.08em;
}
.cm-course-name {
  font-size: 14px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.cm-course-tags {
  display: flex; gap: 6px;
  margin-top: 4px;
}
.cm-tag {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.cm-tag.online { background: var(--blue-soft); color: var(--blue); }
.cm-tag.offline { background: #F3EEE5; color: #8B6B2E; }
.cm-course-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.cm-course-link {
  font-size: 11.5px;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  margin-top: 4px;
}
.cm-course-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.cm-detail-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.cm-detail-foot strong { color: var(--navy); font-weight: 700; }
.cm-detail-foot .lock { color: var(--red); font-weight: 600; }

/* ============================================================
   Benefits (참여 혜택)
   ============================================================ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.benefit {
  background: #fff;
  border: 1px solid var(--blue-line);
  border-top: 3px solid var(--blue);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
  position: relative;
}
.bn-no {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.12em;
}
.bn-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid; place-items: center;
}
.bn-title {
  font-family: var(--serif);
  font-size: 19px; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.bn-lines {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.bn-lines li {
  position: relative;
  padding-left: 14px;
}
.bn-lines li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  background: var(--blue);
  border-radius: 50%;
}

/* 참여 방법 안내 스트립 */
.join-strip {
  margin-top: 14px;
  background: var(--navy);
  color: #fff;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
}
.js-l {
  padding: 32px 36px;
}
.js-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.js-title {
  font-family: var(--serif);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  line-height: 1.3;
}
.js-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.88);
  line-height: 1.6;
}
.js-list li {
  display: flex; gap: 12px;
  align-items: flex-start;
}
.js-num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  color: #FFD666;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  padding-top: 3px;
  width: 24px;
}
.js-list strong { color: #fff; font-weight: 700; }
.js-list a {
  color: #FFD666;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.js-r {
  background: var(--blue-3);
  padding: 28px 32px;
  display: flex; flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.js-card {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 14px;
}
.js-card:first-child { border-top: 0; padding-top: 0; }
.js-k {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.js-v {
  font-family: var(--serif);
  font-size: 22px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.js-link {
  font-size: 12.5px;
  color: #FFD666;
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}
.js-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 반응형 — 태블릿 이하에서는 매트릭스가 너무 좁아짐 */
@media (max-width: 1100px) {
  .cm-row { grid-template-columns: 180px 1fr 1fr 1fr; }
  .cm-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: 1fr; }
  .join-strip { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .cm-row { grid-template-columns: 1fr; }
  .cm-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  /* cm-flow / cm-flow-arrow 모바일 규칙은 880px 통합 블록에서 일원화 — 여기 중복 제거 */
  .cm-detail-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Curriculum Matrix — clickable course rows + modal
   ============================================================ */
/* Course row (clickable) */
.cm-cc-list .cm-cc-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 6px;
  margin: 0 -6px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
  outline: none;
  line-height: 1.35;
}
.cm-cc-list .cm-cc-row:hover,
.cm-cc-list .cm-cc-row:focus-visible {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px var(--blue-line);
}
.cm-cc-list .cm-cc-row .num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  font-weight: 600;
}
.cm-cc-list .cm-cc-row .cname {
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.cm-cc-list .cm-cc-row:hover .cname,
.cm-cc-list .cm-cc-row:focus-visible .cname {
  color: var(--navy);
  font-weight: 700;
}
.cm-cc-list .cm-cc-row .cmodes {
  display: flex; gap: 3px;
  flex-shrink: 0;
}
.cm-cc-list .cm-cc-row .m {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  font-style: normal;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.cm-cc-list .cm-cc-row .m.on  { background: var(--blue-soft); color: var(--blue); }
.cm-cc-list .cm-cc-row .m.off { background: #F3EEE5; color: #8B6B2E; }
.cm-cc-list .cm-cc-row .m.exam-pass    { background: #E8ECF6; color: var(--navy); }
.cm-cc-list .cm-cc-row .m.exam-course  { background: #DEE9F6; color: #1E5799; }
.cm-cc-list .cm-cc-row .m.professional { background: #FBF7EA; color: #A07A1F; }
.cm-cc-list .cm-cc-row .carr {
  font-size: 12px; color: var(--ink-4);
  flex-shrink: 0;
  transition: transform .12s, color .12s;
}
.cm-cc-list .cm-cc-row:hover .carr,
.cm-cc-list .cm-cc-row:focus-visible .carr {
  color: var(--blue);
  transform: translateX(2px);
}

/* Modal */
.cm-modal {
  position: fixed; inset: 0;
  background: rgba(12, 35, 64, 0.55);
  z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 24px 40px;
  overflow-y: auto;
  animation: cmFadeIn .15s ease-out;
}
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cm-modal-card {
  background: #fff;
  width: 100%;
  max-width: 1100px;
  border-top: 4px solid var(--blue);
  box-shadow: 0 30px 80px -20px rgba(12, 35, 64, 0.5);
  display: flex; flex-direction: column;
  animation: cmSlideUp .2s ease-out;
}
@keyframes cmSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cm-modal-head {
  padding: 32px 36px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cm-modal-bc {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cm-modal-bc .bc-sep { color: var(--ink-4); }
.cm-modal-title {
  font-family: var(--serif);
  font-size: 30px; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}
.cm-modal-sub {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 10px;
  line-height: 1.65;
  max-width: 880px;
}
.cm-modal-sub strong { color: var(--navy); font-weight: 700; }
.cm-modal-x {
  position: absolute;
  top: 24px; right: 28px;
  width: 36px; height: 36px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 22px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
  display: grid; place-items: center;
  font-family: var(--sans);
}
.cm-modal-x:hover { background: var(--bg-soft); border-color: var(--navy); color: var(--navy); }

/* Sessions grid inside modal */
.cm-sess-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 28px 36px;
  background: var(--bg-soft);
}
.cm-sess {
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: border-color .15s, transform .15s;
}
.cm-sess:hover { border-color: var(--blue); transform: translateY(-2px); }
.cm-sess.online  { border-left: 3px solid var(--blue); }
.cm-sess.offline { border-left: 3px solid var(--amber); }

.ss-top { display: flex; justify-content: space-between; align-items: center; }
.ss-mode {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.06em;
}
.ss-mode.online  { background: var(--blue-soft); color: var(--blue); }
.ss-mode.offline { background: #F3EEE5; color: #8B6B2E; }
.ss-mode.exam_pass    { background: #E8ECF6; color: var(--navy); }
.ss-mode.exam_course  { background: #DEE9F6; color: #1E5799; }
.ss-mode.professional { background: linear-gradient(135deg,#A07A1F 0%,#C9A23A 100%); color: #fff; }
.ss-status {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  font-family: var(--mono);
}
.ss-status.urgent { color: var(--red); }

.ss-title {
  font-size: 15px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.ss-instructor {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.ss-i-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.ss-i-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.ss-i-org  { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.ss-meta {
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.ss-meta > div { display: grid; grid-template-columns: 40px 1fr; gap: 8px; }
.ss-meta dt {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0.06em;
  padding-top: 1px;
  margin: 0;
}
.ss-meta dd { margin: 0; line-height: 1.5; }
.ss-meta dd strong { color: var(--navy); font-weight: 700; }

.ss-apply {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 14px;
  font-size: 13px; font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.ss-apply:hover { background: var(--blue-2); }

/* 회차 카드 액션 영역 — apply 페이지에서 ss-detail + ss-apply 두 버튼을 묶고, curriculum 페이지에서는 ss-apply 1개만 풀폭 */
.ss-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ss-actions .ss-apply { margin-top: 0; }
.ss-detail {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 9px 14px;
  font-size: 12.5px; font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.01em;
}
.ss-detail:hover { border-color: var(--navy); background: var(--bg-soft); }

/* 모달 제목 링크 — apply 페이지에서 강좌 상세로 이동 */
.cm-modal-title-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.cm-modal-title-link:hover { color: var(--blue); }
.cm-modal-title-link .cm-modal-title-arr {
  font-family: var(--mono); font-size: 0.7em; opacity: 0.6;
  transition: transform .15s, opacity .15s;
}
.cm-modal-title-link:hover .cm-modal-title-arr { opacity: 1; transform: translateX(3px); }

.cm-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px 36px 24px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  border-top: 1px solid var(--line);
}
.cm-modal-foot strong { color: var(--navy); font-weight: 700; }
.cm-modal-foot .lock { color: var(--red); font-weight: 600; }
.cm-modal-close {
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 16px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--sans);
  border-radius: 2px;
  flex-shrink: 0;
}
.cm-modal-close:hover { border-color: var(--navy); color: var(--navy); }

/* Cell hover — subtler now (rows are the click target) */
.cm-course-cell:hover { background: #fff; box-shadow: none; }
.cm-course-cell { cursor: default; }

@media (max-width: 1100px) {
  .cm-sess-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .cm-modal { padding: 20px 12px; }
  .cm-modal-head { padding: 24px 20px 18px; }
  .cm-modal-title { font-size: 24px; }
  .cm-sess-grid { grid-template-columns: 1fr; padding: 20px; }
  .cm-modal-foot { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}


/* Combined on/off pill — when a course has both online & offline rounds */
.cm-cc-list .cm-cc-row .m.both {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-radius: 2px;
  font-size: 0; /* kill inline whitespace */
}
.cm-cc-list .cm-cc-row .m.both b {
  font-weight: 700;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  display: inline-block;
}
.cm-cc-list .cm-cc-row .m.both .on-half  { background: var(--blue-soft); color: var(--blue); }
.cm-cc-list .cm-cc-row .m.both .off-half { background: #F3EEE5; color: #8B6B2E; border-left: 1px solid #fff; }


/* ============================================================
   Flow strip — refined (fixed spacing + level-tinted cards)
   ============================================================ */
.cm-flow {
  display: grid;
  grid-template-columns: 1fr 64px 1fr 64px 1fr;
  align-items: stretch;
  gap: 0;
  margin: 24px 0 32px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  overflow: hidden;
}
.cm-flow-step {
  padding: 22px 28px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px;
  border-right: 0;
}
.cm-flow-step.lv-basic { background: #EAF1F9; }
.cm-flow-step.lv-inter { background: #F1E9F6; }
.cm-flow-step.lv-adv   { background: #F7EFDC; }

.cm-flow-en {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0;
}
.cm-flow-ko {
  font-family: var(--serif);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2px;
  line-height: 1.15;
}
.cm-flow-step.lv-basic .cm-flow-ko { color: #1E5799; }
.cm-flow-step.lv-inter .cm-flow-ko { color: #7A1FA2; }
.cm-flow-step.lv-adv   .cm-flow-ko { color: #B8860B; }
.cm-flow-cap {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
  font-weight: 500;
}

.cm-flow-arrow {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: #fff;
  padding: 0;
  gap: 4px;
  border-left: 1px solid var(--blue-line);
  border-right: 1px solid var(--blue-line);
  position: relative;
}
.cm-flow-arrow span {
  font-size: 24px; font-weight: 700;
  color: var(--navy);
  line-height: 1;
  display: block;
}
.cm-flow-arrow small {
  font-size: 9.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
}
/* (cm-flow 모바일 규칙은 아래 880px 통합 블록으로 일원화 — 780px 중복 제거) */


/* ============================================================
   MOBILE RESPONSIVE — 전반적 보강
   ============================================================ */
@media (max-width: 1100px) {
  .container { padding: 0 20px; }
  .cm-title { font-size: 26px; }
  .cm-row { grid-template-columns: 160px 1fr 1fr 1fr; }
  .cm-cell { padding: 14px; }
  .cm-cc-title { font-size: 13.5px; }
}

@media (max-width: 880px) {
  /* 매트릭스: 트랙 헤더 + 3 레벨 카드 세로 스택 */
  .cm-matrix .cm-row { grid-template-columns: 1fr; }
  .cm-matrix .cm-row + .cm-row { border-top: 4px solid var(--navy); }
  .cm-row-head { display: none; }
  .cm-track {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--navy);
    color: #fff;
    padding: 16px 18px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .cm-track .cm-track-no { color: #FFD666 !important; font-size: 14px; flex-shrink: 0; }
  .cm-track .cm-track-title { color: #fff; font-size: 16px; flex: 1; }
  .cm-track .cm-track-tagline { display: none; }
  .cm-cell { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; }
  .cm-cell:last-child { border-bottom: 0; }
  .cm-course-cell { min-height: auto; }
  .cm-course-cell::before {
    content: attr(data-level-label);
  }

  /* Flow strip 모바일 — grid 폐기, flex column 으로 안전하게 1열 강제 + 단계 번호 + 명확한 진급 화살표 */
  .cm-flow {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch;
    border-left: 1px solid var(--blue-line);
    border-top: 3px solid var(--blue);
    margin: 20px 0 28px;
    background: #fff;
    counter-reset: flow-step;
  }
  .cm-flow > * { width: 100% !important; flex: 0 0 auto; }
  .cm-flow-step {
    counter-increment: flow-step;
    padding: 18px 20px 18px 64px;
    min-height: auto;
    position: relative;
  }
  .cm-flow-step::before {
    content: counter(flow-step, decimal-leading-zero);
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    border: 2px solid var(--blue);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.02em;
  }
  .cm-flow-step.lv-basic::before { border-color: #1E5799; color: #1E5799; }
  .cm-flow-step.lv-inter::before { border-color: #7A1FA2; color: #7A1FA2; }
  .cm-flow-step.lv-adv::before   { border-color: #B8860B; color: #B8860B; }
  .cm-flow-step .cm-flow-ko { font-size: 19px; }
  .cm-flow-step .cm-flow-cap { font-size: 11.5px; }
  .cm-flow-arrow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0;
    background: var(--bg-soft);
    border: 0;
  }
  /* span 안의 원본 "→" 텍스트는 숨기고 ::before 로 ↓ 직접 노출 (회전 X) */
  .cm-flow-arrow span {
    display: inline-grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0 !important;
    line-height: 1;
    position: relative;
  }
  .cm-flow-arrow span::before {
    content: '↓';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-family: var(--sans);
  }
  .cm-flow-arrow::after {
    content: '다음 단계';
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 600;
  }
  .cm-flow-arrow small { display: none; }

  /* Header 압축 */
  .header-inner { padding: 10px 0; height: auto; min-height: 64px; }
  .brand-coop { display: none; }
  .brand-english { display: none; }
  .brand-microline { display: none; }
  .brand-korean { font-size: 17px; }
  .brand-seal { width: 48px; height: 48px; font-size: 21px; }
  .foot-seal { width: 52px; height: 52px; }
  .foot-microline { font-size: 9px; letter-spacing: 0.14em; }
  .foot-org .t { font-size: 14px; }
  .header-right { display: none; }
  /* util 바 — 긴 home 텍스트 ellipsis */
  .util-inner { font-size: 11px; }
  .util .home { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; }
  /* 좁은 모바일에서는 첫 링크만 표시 (2026-05-25) */
  @media (max-width: 520px) {
    .util-l .home:nth-of-type(2) { display: none; }
    .util-l .home:first-of-type { max-width: 70vw; }
  }
  .util .lang { display: none; }
  .gnb-menu { overflow-x: auto; }
  /* 모바일에서만 가로 스크롤 허용 — y축 스크롤 invalid 동작 차단 */
  .gnb-inner { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .gnb-inner::-webkit-scrollbar { display: none; }
  .gnb-item { padding: 0 14px; font-size: 13px; flex: 0 0 auto; min-width: 80px; white-space: nowrap; }
  .gnb-items { flex: 1 0 auto; }
  .gnb-sitemap { display: none; }
  /* 아카데미 홈 — 모바일에서도 텍스트 표시 (SVG 아이콘 모드 폐기, 사용자 요청 2026-05-11) */
  .gnb-home {
    padding: 0 14px;
    font-size: 13px;
    flex: 0 0 auto;
    height: 56px;
    white-space: nowrap;
  }

  /* Hero 단일 컬럼 */
  .hero-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .hero-title { font-size: 28px !important; }
  .hero-card { padding: 24px 22px; }
  .ql-grid { grid-template-columns: 1fr 1fr; }

  /* Board 단일 컬럼 */
  .board-row { grid-template-columns: 1fr !important; gap: 16px; }

  /* Recruit cards 2-col */
  .rcards { grid-template-columns: 1fr 1fr !important; }

  /* Steps 2-col */
  .steps-grid { grid-template-columns: 1fr 1fr !important; }

  /* Stats stacked */
  .stats-row { flex-wrap: wrap; gap: 18px !important; }
  .stat { flex: 1 1 calc(50% - 9px) !important; }

  /* Partners */
  .partners { flex-wrap: wrap; gap: 14px; padding: 22px 0 !important; }
  .partners .lbl { border-right: 0; padding-right: 0; }

  /* Footer 단일 컬럼 */
  .foot-main { grid-template-columns: 1fr !important; gap: 24px; }

  /* Section title 축소 */
  .sec-t { font-size: 20px !important; }
  .sec { padding: 36px 0 !important; }

  /* Modal full-screen feel */
  .cm-modal { padding: 0; }
  .cm-modal-card { max-width: 100%; min-height: 100vh; }
  .cm-modal-head { padding: 22px 18px 16px; }
  .cm-modal-title { font-size: 22px; }
  .cm-modal-x { top: 18px; right: 18px; width: 32px; height: 32px; }
  .cm-sess-grid { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .cm-modal-foot { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
}

@media (max-width: 560px) {
  .container { padding: 0 14px; }
  .ql-grid { grid-template-columns: 1fr; }
  .rcards { grid-template-columns: 1fr !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
  .stat { flex-basis: 100% !important; }
  .cm-title { font-size: 22px; }
  .cm-sub { font-size: 13.5px; }
  .cm-flow-ko { font-size: 18px; }
  .gnb-menu .gnb-item { padding: 0 11px; font-size: 12.5px; }
  .gnb-item { padding: 0 12px; font-size: 12.5px; min-width: 72px; }
  .gnb-home { min-width: 44px; padding: 0 12px; }
  /* 좁은 폰: brand 더 축소, 마이페이지 util 링크 숨김 */
  .brand-seal { width: 42px; height: 42px; font-size: 18px; border-width: 2px; }
  .brand-korean { font-size: 15px; }
  .util-r a:nth-child(3) { display: none; }
}

/* Track 5A — ≤640px: util 바 최소화 (사용자 결정 2026-05-11: GNB가 '아카데미 홈' 제공 → util-l 통째 hide) */
@media (max-width: 640px) {
  .util-l { display: none; }
  .util a { padding: 0 10px; font-size: 11.5px; }
  .util-mypage { padding: 0 10px !important; }

  /* 섹션 헤더 — 좁은 모바일에서 제목과 탭/더보기를 세로 스택해 글자 단위 wrap 방지 */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sec-head > div { width: 100%; }
  .sec-head .tabs { flex-wrap: nowrap; }
  .sec-head .tabs button { white-space: nowrap; flex-shrink: 0; }
}


/* ============================================================
   MOBILE — button overflow / wrap fixes
   ============================================================ */
@media (max-width: 880px) {
  /* 모든 버튼 류 줄바꿈 방지 + 패딩 축소 */
  .hbtn, .ss-apply, .cm-modal-close, .cm-modal-x,
  .sec-more, .apply, .rcard .apply,
  .gnb-item, .search-btn, .more-ico {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .hbtn { padding: 11px 16px; font-size: 13px; }
  .hero-ctas { flex-wrap: wrap; gap: 8px; }
  .hero-ctas .hbtn { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; }
  .hero-pager { width: 100%; margin-left: 0; justify-content: flex-end; margin-top: 6px; }

  /* Recruit card apply 버튼 */
  .rcard .apply { padding: 10px 12px; font-size: 12.5px; white-space: nowrap; }
  .rcard .apply::after { display: none; } /* 화살표 숨겨 줄바꿈 방지 */

  /* 매트릭스 강좌 행: 모바일에서 카운트 배지가 줄바꿈되지 않도록 */
  .cm-cc-list .cm-cc-row {
    grid-template-columns: 22px 1fr auto auto;
    gap: 6px;
  }
  .cm-cc-list .cm-cc-row .cname { white-space: nowrap; min-width: 0; }
  .cm-cc-list .cm-cc-row .cmodes,
  .cm-cc-list .cm-cc-row .m,
  .cm-cc-list .cm-cc-row .m b { flex-shrink: 0; white-space: nowrap; }

  /* 모달 신청 버튼 */
  .ss-apply { padding: 10px 14px; font-size: 12.5px; white-space: nowrap; }

  /* 섹션 헤더 더보기 버튼 */
  .sec-more { padding: 5px 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .sec-head { gap: 8px; flex-wrap: nowrap; }

  /* GNB 항목 줄바꿈 방지 */
  .gnb-item { white-space: nowrap; }
}

@media (max-width: 560px) {
  .hbtn { padding: 10px 14px; font-size: 12.5px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .hbtn { width: 100%; }
  .rcard .apply { padding: 9px 11px; font-size: 12px; }
  .ss-apply { padding: 9px 12px; font-size: 12px; }
  .cm-cc-list .cm-cc-row .m,
  .cm-cc-list .cm-cc-row .m b { font-size: 9px; padding: 1px 4px; }
}

/* ===== sub-page .page-hero — 메인 .hero 와 동일 톤의 은은한 푸른 배경 ===== */
/* body 접두사로 inline <style> 의 .page-hero { background: ... } 보다 specificity 우위 */
body .page-hero {
  background:
    radial-gradient(900px 380px at 88% 0%, rgba(30,87,153,0.09), transparent 60%),
    radial-gradient(700px 320px at 0% 100%, rgba(245,176,66,0.06), transparent 65%),
    linear-gradient(180deg, #F4F7FB 0%, #EAF0F8 100%);
  border-bottom: 1px solid #d8e1ec;
  position: relative;
  overflow: hidden;
}
/* 섹션 본문 (.container) 을 ::before 위로 올림 */
.page-hero > * { position: relative; z-index: 1; }
/* 메인 .hero 와 동일한 그리드 텍스처 — 본문 위쪽만 살짝 보이도록 마스크 페이드 */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,87,153,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,87,153,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 75%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* ===== 공통 page-toc 활성 상태 + 섹션 앵커 오프셋 ===== */
/* page-toc 자체가 sticky(top:0) 라 클릭 시 섹션 헤더가 가려지지 않도록 scroll-margin */
.sec[id], section[id] { scroll-margin-top: 64px; }
.page-hero[id], .page-hero { scroll-margin-top: 64px; }

/* page-toc 항목 줄넘김 방지 + 좁은 화면에서 가로 스크롤 */
.page-toc-inner > * { flex-shrink: 0; }
.page-toc-inner a { white-space: nowrap; }
.page-toc-inner .lbl { white-space: nowrap; }

@media (max-width: 880px) {
  /* inline <style>의 .page-toc-inner { gap: 14px; overflow-x: auto } 와 협력 — 안전 장치로 !important */
  .page-toc-inner { gap: 14px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .page-toc-inner::-webkit-scrollbar { display: none; }
  .page-toc-inner a { font-size: 12.5px; padding: 4px 0; }
  .page-toc-inner .lbl { font-size: 9.5px; padding-right: 10px; }
}

/* 활성 링크 표시 — 진한 navy 텍스트 + 두꺼운 navy 밑줄 */
.page-toc-inner a.active {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--navy);
}
.page-toc-inner a.active::before {
  content: '';
  display: inline-block; width: 4px; height: 4px;
  background: var(--navy); border-radius: 50%;
  vertical-align: middle; margin-right: 6px;
}

/* ===== cert-left — 배경 이미지 + 오버레이 패턴 ===== */
/* 기본 navy 배경은 그대로 두고, 이미지가 들어가는 cert-left 는 .cert-left.has-image 모디파이어 */
.cert-left.has-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 텍스트 가독성 보장: 이미지 위에 navy 그라디언트 오버레이 */
}
.cert-left.has-image .cert-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  filter: saturate(0.85);
}
.cert-left.has-image .cert-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg,
    rgba(12,35,64,0.94) 0%,
    rgba(12,35,64,0.86) 45%,
    rgba(30,87,153,0.78) 100%);
}
.cert-left.has-image .cert-bg-attr {
  position: absolute; right: 14px; bottom: 10px; z-index: 1;
  font-family: var(--mono); font-size: 9.5px;
  color: rgba(255,255,255,0.45); letter-spacing: 0.06em;
  pointer-events: none;
}
/* 이미지 오버레이 안에서도 본문 콘텐츠는 z-index 0 이상 유지 */
.cert-left.has-image > *:not(.cert-bg):not(.cert-overlay):not(.cert-bg-attr) { position: relative; z-index: 1; }

/* 모바일에서는 이미지가 잘 보이도록 오버레이 강도 완화 + 적정 min-height */
@media (max-width: 880px) {
  .cert-left.has-image { min-height: 240px; }
  .cert-left.has-image .cert-overlay {
    background: linear-gradient(135deg,
      rgba(12,35,64,0.82) 0%,
      rgba(12,35,64,0.70) 45%,
      rgba(30,87,153,0.60) 100%);
  }
  .cert-left.has-image .cert-bg-attr { display: none; }
}

/* ===== /mypage 전용 — 사이드바 + 컨텐츠 그리드 ===== */
.mypage-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: flex-start;
  padding: 32px 0 60px;
}
.mypage-content { min-width: 0; }
.mypage-nav {
  background: #fff;
  border: 1px solid var(--line);
  position: sticky; top: 70px;
  align-self: flex-start;
}
.mypage-nav-head {
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.mypage-nav ul { list-style: none; margin: 0; padding: 0; }
.mypage-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 13px 15px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  transition: background-color .12s, color .12s, border-color .12s;
  text-decoration: none;
}
.mypage-nav-item:hover { background: var(--blue-soft); color: var(--blue); }
.mypage-nav-item.active {
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 700;
  border-left-color: #FFD666;
  padding-left: 15px;
}
.mypage-nav-item-ico {
  width: 16px; height: 16px;
  display: inline-grid; place-items: center;
  color: var(--ink-4);
  flex-shrink: 0;
}
.mypage-nav-item.active .mypage-nav-item-ico { color: var(--blue); }

@media (max-width: 880px) {
  .mypage-grid {
    /* minmax(0, 1fr) — 자식 max-content가 grid를 늘리지 못하게 막음 (Track 5C) */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0 40px;
  }
  .mypage-nav {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    border: 1px solid var(--line);
    padding: 0;
  }
  .mypage-nav-head { display: none; }
  .mypage-nav ul {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mypage-nav ul::-webkit-scrollbar { display: none; }
  .mypage-nav-item {
    flex-shrink: 0;
    padding: 12px 14px !important;
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
    border-left: 0;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .mypage-nav-item.active {
    border-bottom: 3px solid #FFD666;
    border-left: 0;
    padding-bottom: 9px !important;
  }
}

/* ===== apply-stats — apply.html 의 통계 칩과 동일 톤 (전역 등록) ===== */
.apply-stats { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.apply-stat { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; background: #fff; border: 1px solid var(--line); }
.apply-stat .v { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.apply-stat .v.urgent { color: var(--red); }
.apply-stat .l { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em; }

/* ===== /apply 히어로 안내 포인트 (2026-06-05 — apply-stats 숫자 대체) ===== */
.apply-points { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.apply-point { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px; background: #fff; border: 1px solid var(--line); }
.apply-point-ico { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.apply-point-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.apply-point-t { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; word-break: keep-all; }
.apply-point-d { font-size: 11.5px; color: var(--ink-3); word-break: keep-all; }
@media (max-width: 600px) {
  .apply-points { gap: 8px; }
  .apply-point { flex: 1 1 100%; }
}

/* ===== 홈 "이런 분께 추천합니다" (2026-06-05 — '숫자로 보는 Y-EDU' 통계 섹션 대체) ===== */
.audience-sec { padding: 56px 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.audience-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.audience-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--blue); }
.audience-head h3 { font-family: var(--serif); font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; margin: 8px 0 10px; }
.audience-head p { font-size: 14px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.audience-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.audience-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 18px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.audience-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 8px 22px -12px rgba(20,38,75,.28); }
.audience-emoji { font-size: 32px; line-height: 1; }
.audience-name { font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.audience-tagline { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .03em; }
.audience-desc { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 2px 0 0; word-break: keep-all; flex: 1 1 auto; }
.audience-go { font-size: 12px; font-weight: 700; color: var(--blue); margin-top: 6px; }
@media (max-width: 1024px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .audience-grid { grid-template-columns: 1fr 1fr; } .audience-sec { padding: 40px 0; } }
@media (max-width: 380px) { .audience-grid { grid-template-columns: 1fr; } }

/* ===== /mypage 공통 — 카드 + 액션 바 (enrollments / certificates / notifications 재사용) ===== */
.mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.mp-card-body { padding: 18px 20px 14px; display: flex; gap: 16px; align-items: flex-start; }
.mp-card-main { flex: 1; min-width: 0; }
.mp-card-thumb {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 22px; font-weight: 800; line-height: 1;
}
.mp-card-thumb.thumb-blue { background: var(--blue-soft); color: var(--blue); border: 2px solid var(--blue); }
.mp-card-thumb.thumb-green { background: #E6F4EA; color: var(--green); border: 2px solid var(--green); }
.mp-card-thumb.thumb-amber { background: #FFF7DB; color: #B47700; border: 2px solid #FFD666; }
.mp-card-thumb.thumb-gray  { background: var(--bg-soft); color: var(--ink-3); border: 2px solid var(--line); }
.mp-card-meta { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.mp-card-title {
  font-size: 15.5px; font-weight: 700; color: var(--navy);
  margin: 0 0 4px; letter-spacing: -0.01em; line-height: 1.45;
}
.mp-card-sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.mp-card-info {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}
.mp-card-info dt { color: var(--ink-4); font-weight: 500; white-space: nowrap; }
.mp-card-info dd { margin: 0; font-family: var(--mono); color: var(--navy); }
.mp-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px 10px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.mp-card-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; align-items: center; }
/* mp-btn 패밀리 (라인 ~2455) 는 .ymas-btn 도입으로 폐기 — globals.css 의 .ymas-btn 만 사용.
   링크 스타일(.mp-link-cancel/soft) 만 유지: 카드 좌측의 "신청 취소" 등 텍스트 링크용. */
.mp-link-cancel,
.mp-link-soft {
  background: none; border: 0; padding: 4px 0;
  font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; line-height: 1;
}
.mp-link-cancel:hover:not([disabled]) { color: var(--red); }
.mp-link-soft:hover:not([disabled])   { color: var(--blue); }
.mp-link-cancel:disabled,
.mp-link-soft:disabled { color: var(--ink-4); cursor: not-allowed; text-decoration: none; }

@media (max-width: 640px) {
  .mp-card-body { padding: 16px; gap: 12px; }
  .mp-card-thumb { width: 44px; height: 44px; font-size: 18px; }
  .mp-card-actions { flex-direction: column-reverse; align-items: stretch; padding: 12px 16px; }
  .mp-card-cta { justify-content: stretch; margin-left: 0; }
  .mp-card-cta .ymas-btn { flex: 1 1 0; min-width: 0; }
  .mp-link-cancel, .mp-link-soft { align-self: center; }
  /* Track 5D — 카드 메타 dl + 프로필 폼: 모바일 1 컬럼 */
  .mp-card-info { grid-template-columns: 1fr; }
  .mypage-profile-grid { grid-template-columns: 1fr !important; }
  /* 푸터 .foot-top — 모바일 2 column grid 정렬 (홀수 항목 마지막은 풀 너비) */
  .foot-top .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-left: 0; padding-right: 0;
  }
  .foot-top a {
    padding: 12px 16px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    font-size: 12.5px;
  }
  .foot-top a:nth-child(2n) { border-right: 0; }
  .foot-top a:first-child { padding-left: 16px; }
  .foot-top a:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}

/* === /mypage/notifications 전용 (목록 row + 읽음 표시) === */
.mp-notif { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line); padding: 14px 16px 14px 17px; }
.mp-notif.unread { border-color: var(--blue-line); border-left-color: var(--blue); background: var(--blue-soft); }
.mp-notif-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.mp-notif-time { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.mp-notif-dot  { color: var(--red); font-size: 10px; }
.mp-notif-action { margin-left: auto; }
.mp-notif-title {
  font-size: 13.5px; font-weight: 700; color: var(--navy);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.mp-notif-body { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.65; }

/* === 발급기관 안내(cert intro)는 더 살리되 인용박스 톤 === */
.mp-cert-intro {
  display: flex; gap: 16px;
  background: linear-gradient(180deg, #FBF7E8 0%, #FFFFFF 100%);
  border: 1px solid #E5D7A4;
  border-left: 4px solid #C9A23A;
  padding: 22px 26px;
  margin-bottom: 22px;
}
.mp-cert-intro .mp-cert-intro-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: #FFF; border: 2px solid #C9A23A;
  display: grid; place-items: center; color: #C9A23A;
  font-size: 22px; font-weight: 800; flex-shrink: 0;
}
.mp-cert-intro h3 { font-size: 15px; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.01em; }
.mp-cert-intro ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.mp-cert-intro ul li { margin-bottom: 2px; }

/* ============================================================
   알림 종 (NotificationBell) — 정적 핸드오프 (parts.jsx) 전용 정의.
   Next.js 라우트는 globals.css 의 동일 정의를 사용.
   양쪽 파일에 동일 정의 (mp-btn 사태와 동일한 dual-source 패턴 — 정적 페이지가
   globals.css 를 import 하지 않으므로 불가피).
   ============================================================ */
.util-r .notif-bell {
  position: relative;
  display: inline-flex; align-items: center;
  height: 34px;
  border-right: 1px solid rgba(255,255,255,0.12);
  padding: 0 6px;
  line-height: 1;
}
.notif-bell-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px;
  background: transparent; border: 0; cursor: pointer;
  color: #D9D9D9;
  padding: 0; margin: 0;
  line-height: 1;
  transition: color .12s, background .12s;
}
.notif-bell-btn:hover, .notif-bell-btn.open { color: #fff; }
.notif-bell-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border-radius: 8px;
  border: 1.5px solid #3A3A3A;
  font-family: var(--mono);
  pointer-events: none;
}
.notif-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 380px; max-width: calc(100vw - 24px);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(12, 35, 64, 0.18);
  z-index: 1000;
  text-align: left;
  overflow: hidden;
  display: flex !important; flex-direction: column !important;
}
.notif-dropdown-head {
  flex: 0 0 auto;
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 48px; box-sizing: border-box;
  background: var(--navy); color: #fff;
  line-height: 1;
}
.notif-dropdown-head strong { color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.notif-dropdown-head-r { display: inline-flex !important; align-items: center; gap: 10px; line-height: 1; }
.notif-dropdown-count { font-size: 11.5px; color: #FFD666; font-weight: 700; font-family: var(--mono); }
.notif-dropdown-count--empty { color: rgba(255,255,255,0.6); font-weight: 400; }
.notif-dropdown-mark {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 11px; padding: 4px 10px;
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  border-radius: 2px;
  transition: background .12s, border-color .12s;
  line-height: 1;
}
.notif-dropdown-mark:hover:not(:disabled) { background: rgba(255,255,255,0.15); border-color: #fff; }
.notif-dropdown-mark:disabled { opacity: 0.5; cursor: wait; }
.notif-dropdown-cats {
  flex: 0 0 auto;
  display: flex !important; gap: 6px; padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.notif-dropdown-cats::-webkit-scrollbar { display: none; }
.notif-cat-chip {
  flex-shrink: 0;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  font-size: 11.5px; padding: 5px 12px;
  cursor: pointer; font-family: var(--sans);
  border-radius: 100px; line-height: 1.3; font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.notif-cat-chip:hover { border-color: var(--navy); color: var(--navy); }
.notif-cat-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.notif-dropdown-list {
  flex: 1 1 auto;
  list-style: none; margin: 0 !important; padding: 0 !important;
  max-height: 360px; overflow-y: auto; overflow-x: hidden;
  background: #fff;
}
.notif-dropdown-empty { padding: 48px 20px; text-align: center; color: var(--ink-4); font-size: 13px; }
.notif-dropdown-item {
  border-bottom: 1px solid var(--line-soft);
  list-style: none; background: #fff;
  margin: 0 !important; padding: 0 !important;
}
.notif-dropdown-item:last-child { border-bottom: 0; }
.notif-dropdown-item > a {
  display: block !important;
  padding: 14px 16px !important;
  height: 90px !important;
  box-sizing: border-box !important;
  color: var(--ink); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
  line-height: 1.4;
  overflow: hidden;
  background: #fff;
}
.notif-dropdown-item > a:hover { background: var(--bg-soft); }
.notif-dropdown-item.unread { background: var(--blue-soft); }
.notif-dropdown-item.unread > a { background: var(--blue-soft); border-left-color: var(--blue); }
.notif-dropdown-item.unread > a:hover { background: #DBE7F4; }
.notif-dropdown-item-meta {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 8px; height: 18px;
  margin: 0 0 6px !important;
  overflow: hidden;
}
.notif-dropdown-tag {
  flex: 0 0 auto;
  display: inline-flex !important; align-items: center;
  background: var(--bg-soft-2); color: var(--ink-2);
  padding: 0 10px;
  font-size: 10.5px; line-height: 1; height: 18px; box-sizing: border-box;
  font-weight: 700; letter-spacing: -0.01em;
  border-radius: 100px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 110px;
}
.notif-dropdown-item.unread .notif-dropdown-tag { background: var(--navy); color: #fff; }
.notif-dropdown-time {
  flex: 0 0 auto;
  display: inline-flex !important; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-4); font-family: var(--mono);
  white-space: nowrap; line-height: 1; height: 18px;
}
.notif-dropdown-newdot { display: inline-block; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.notif-dropdown-title {
  font-size: 13px !important; font-weight: 700 !important; color: var(--navy) !important;
  margin: 0 0 4px !important; padding: 0 !important;
  letter-spacing: -0.01em !important; line-height: 1.4 !important;
  height: 19px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  display: block !important;
}
.notif-dropdown-body {
  font-size: 12px !important; color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin: 0 !important; padding: 0 !important;
  height: 18px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  display: block !important;
}
.notif-dropdown-more {
  flex: 0 0 auto;
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  padding: 0 16px !important; height: 48px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft); color: var(--navy) !important;
  font-size: 13px !important; font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  line-height: 1;
  transition: background .12s, color .12s;
}
.notif-dropdown-more:hover { color: var(--blue); background: var(--blue-soft); }

.util-mypage { position: relative; display: inline-flex !important; align-items: center; gap: 4px; }
/* 통합 신원 — 헤더 역할 포털 링크(강사/관리자)는 마이페이지·로그아웃과 동일한 기본 util 링크 스타일 사용(별도 색 지정 안 함). */

/* 2026-06-05 — 모바일(≤720px) 햄버거 → drawer 메뉴.
   .header-right 는 880px↓ 에서 display:none 으로 통째로 숨겨지므로 햄버거는 .header-inner 직속에 둠.
   자립형 스타일(globals 의존 제거) — styles.css 가 cascade 우선이라 확실히 적용. */
.header-inner > .hamburger { display: none; }
@media (max-width: 720px) {
  .header-inner > .hamburger {
    display: inline-flex;
    flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer;
  }
  .header-inner > .hamburger span { display: block; width: 19px; height: 2px; background: var(--navy); border-radius: 1px; }
}
.util-bell-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--red); border-radius: 50%;
  margin-left: 4px; vertical-align: middle;
}
@media (max-width: 880px) {
  .util-r .notif-bell { display: none; }
  .util-bell-dot { width: 8px; height: 8px; }
  .notif-dropdown { right: 4px; width: calc(100vw - 24px); max-width: 360px; }
  .notif-dropdown-item > a { padding: 12px 14px !important; height: 86px !important; }
}
@media (min-width: 881px) {
  .util-mypage .util-bell-dot { display: none; }
}


/* ============================================================
   Track 6 — utility 클래스 (인라인 style 정리, 2026-05-11)
   ============================================================ */
/* color */
.txt-muted { color: var(--ink-4); }
.txt-meta { color: var(--ink-3); font-size: 12px; }
.txt-link { color: var(--blue); }
.txt-mono-navy { font-family: var(--mono); color: var(--navy); }
/* spacing */
.m-0 { margin: 0; }
/* layout */
.flex-1-min0 { flex: 1; min-width: 0; }
.row-gap-6 { display: flex; gap: 6px; }
.divider-h { flex: 1; height: 1px; background: var(--line); }
.list-reset { list-style: none; margin: 0; padding: 0; }
/* card-flat 변종 (.card-flat 자체는 이미 정의됨) */
.card-flat--md { padding: 22px; }
.card-flat--lg { padding: 28px; }
.card-flat--xl { padding: 40px; }
.card-flat--center { padding: 30px; text-align: center; }
.card-flat-title { font-size: 15px; color: var(--navy); margin: 0 0 12px; }
/* col 변종 */
.col-6 { display: flex; flex-direction: column; gap: 6px; }
.col-10 { display: flex; flex-direction: column; gap: 10px; }
.col-14 { display: flex; flex-direction: column; gap: 14px; }
/* form */
.input-line {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px;
}
.label-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

/* ============================================================
   1:1 문의 (Phase 1, 2026-05-11) — /mypage/inquiry, /instructor/inquiries, /admin/inquiries
   ============================================================ */
.inquiry-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}

.inquiry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inquiry-card {
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.inquiry-card:hover { background: var(--bg-soft); transform: translateY(-1px); }
.inquiry-card.has-unread { border-left-color: var(--blue); background: var(--blue-soft); }
.inquiry-card > a { display: block; padding: 16px 18px; text-decoration: none; color: inherit; }
.inquiry-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.inquiry-card-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.inquiry-newdot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
.inquiry-card-title { font-size: 14.5px; font-weight: 700; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.01em; }
.inquiry-card-body { font-size: 12.5px; color: var(--ink-3); margin: 0; line-height: 1.55;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.inquiry-empty {
  background: #fff; border: 1px solid var(--line); padding: 40px 20px;
  text-align: center; color: var(--ink-3); font-size: 13.5px;
}

.inquiry-field { display: flex; flex-direction: column; gap: 6px; }
.inquiry-label { font-size: 12.5px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.inquiry-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .inquiry-radio-group { grid-template-columns: 1fr; } }
.inquiry-radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border: 1px solid var(--line); cursor: pointer;
  transition: background-color .15s, border-color .15s;
  font-size: 13px;
}
.inquiry-radio:hover { background: var(--bg-soft); }
.inquiry-radio.active { background: var(--blue-soft); border-color: var(--blue); }
.inquiry-radio input { margin-top: 2px; }
.inquiry-radio small { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }

/* 문의 채널 안내 — 3개 채널을 한눈에 구분 (2026-05-11) */
.inquiry-channels-guide {
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
}
.inquiry-channels-guide-title { font-size: 12.5px; font-weight: 800; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.01em; }
.inquiry-channels-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inquiry-channels-guide-list li {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 10px; align-items: baseline;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.inquiry-channels-guide-list .ch-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; text-align: center; white-space: nowrap;
}
.inquiry-channels-guide-list .ch-tag-qna    { background: #fff;             color: var(--green); border: 1px solid var(--green); }
.inquiry-channels-guide-list .ch-tag-course { background: var(--blue);      color: #fff; }
.inquiry-channels-guide-list .ch-tag-system { background: var(--ink-2);     color: #fff; }
.inquiry-channels-guide-list .ch-desc { color: var(--ink-2); word-break: keep-all; }
.inquiry-channels-guide-list .ch-where { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.inquiry-channels-guide-list .ch-where strong { color: var(--navy); }
@media (max-width: 640px) {
  .inquiry-channels-guide-list li { grid-template-columns: 1fr; gap: 2px; padding-bottom: 4px; border-bottom: 1px dashed var(--blue-line); }
  .inquiry-channels-guide-list li:last-child { border-bottom: 0; }
  .inquiry-channels-guide-list .ch-tag { justify-self: start; }
  .inquiry-channels-guide-list .ch-where { font-size: 11px; }
}

/* 관리자 1:1 문의 카테고리 필터 (시스템/강좌/회차/미답변) */
.inquiry-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.inquiry-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; font-family: var(--sans);
  cursor: pointer; letter-spacing: -0.01em;
  transition: all .12s;
}
.inquiry-filter-chip:hover { border-color: var(--navy); color: var(--navy); }
.inquiry-filter-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.inquiry-filter-chip .inquiry-filter-count {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 1px 7px;
  background: var(--bg-soft); color: var(--ink-3);
  border-radius: 10px;
}
.inquiry-filter-chip.active .inquiry-filter-count {
  background: rgba(255,255,255,0.2); color: #fff;
}

/* 강사·관리자 inquiry 카드 / 상세에서 회차 컨텍스트 링크 */
.inquiry-session-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 4px;
  padding: 5px 10px;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  font-size: 11.5px; color: var(--blue);
  text-decoration: none; line-height: 1.4;
  transition: background-color .12s;
  word-break: keep-all;
}
.inquiry-session-link:hover { background: var(--blue-line); }
.inquiry-session-link strong { color: var(--navy); font-weight: 700; }

/* 회차 컨텍스트 칩 — /apply SessionView 에서 진입 시 상단 노출 */
.inquiry-session-ctx {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  font-size: 13px;
}
.inquiry-session-ctx-label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.inquiry-session-ctx-title { color: var(--navy); font-weight: 700; flex: 1; min-width: 0; word-break: keep-all; }
.inquiry-session-ctx-link { color: var(--blue); font-weight: 600; text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.inquiry-session-ctx-link:hover { text-decoration: underline; }

.inquiry-warn {
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--amber, #C9A23A);
  font-size: 12.5px; color: var(--ink-2);
}
.inquiry-link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font-weight: 700; text-decoration: underline; font: inherit;
}
.inquiry-link:hover { color: var(--blue-2); }

.inquiry-thread {
  list-style: none; margin: 18px 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 60vh; overflow-y: auto; padding: 4px;
}
.inquiry-bubble {
  align-self: flex-start; max-width: 78%;
  background: #fff; border: 1px solid var(--line);
  padding: 12px 14px; border-radius: 12px 12px 12px 4px;
  animation: inquiry-bubble-in .18s ease-out;
}
.inquiry-bubble.mine {
  align-self: flex-end;
  background: var(--blue); color: #fff;
  border-color: var(--blue);
  border-radius: 12px 12px 4px 12px;
}
.inquiry-bubble-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 11px; opacity: 0.85; }
.inquiry-bubble.mine .inquiry-bubble-meta { color: rgba(255,255,255,0.85); }
.inquiry-bubble-from { font-weight: 700; letter-spacing: -0.01em; }
.inquiry-bubble-time { font-family: var(--mono); font-size: 10.5px; }
.inquiry-bubble-body { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

@keyframes inquiry-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.inquiry-reply-form {
  position: sticky; bottom: 0; background: #fff;
  border: 1px solid var(--line); padding: 12px;
  display: flex; gap: 10px; align-items: flex-end;
}
.inquiry-reply-form textarea { flex: 1; min-width: 0; }

/* ============================================================
   /learn 사이드 패널 (Phase 1, 2026-05-11) — 3 탭 (차시/Q&A/노트)
   ============================================================ */
.learn-side-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: calc(100vh - 80px);
  position: sticky;
  top: 20px;
}
.learn-side-tabs {
  display: flex;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.learn-side-tab {
  flex: 1;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  letter-spacing: -0.01em;
}
.learn-side-tab:last-child { border-right: 0; }
.learn-side-tab:hover { color: var(--navy); background: #fff; }
.learn-side-tab.active {
  background: #fff;
  color: var(--navy);
  border-bottom-color: var(--blue);
}
/* 차시 카운트 + 남은 N — 동일 폰트/크기/색감 통일 (2026-05-11) */
.learn-side-tab-count {
  font-family: var(--sans);
  font-size: 12px;
  color: inherit;
  background: rgba(0,0,0,0.06);
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.learn-side-tab.active .learn-side-tab-count { background: var(--blue-soft); color: var(--blue); }
.learn-side-tab-rem {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.learn-side-tab.active .learn-side-tab-rem { color: var(--navy); }

.learn-side-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  animation: learn-side-fade .18s ease-out;
}
@keyframes learn-side-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 모바일 — 사이드 패널을 비디오 아래 일반 흐름으로 (sticky 해제) */
@media (max-width: 1024px) {
  .learn-side-panel {
    position: static;
    min-height: 360px;
    max-height: none;
  }
}
@media (max-width: 640px) {
  .learn-side-tab { padding: 10px 6px; font-size: 12.5px; }
  .learn-side-tab-rem { display: none; }   /* 좁은 폰에서 보조 정보 hide */
  .learn-side-content { padding: 12px 14px; }
}

/* ─── /courses/[id] Detail View (Phase 2.A, 2026-05-11) ────────
   /apply#session= 프로토타입 톤을 강좌 상세에 적용.
   .detail-hero / .detail-chips / .detail-grid (1fr 340px) / .detail-sec(섹션) /
   .apply-card(우측 신청 sticky) / .related-card / .syllabus-table /
   .instructor-card / .review-* / .materials-* / .detail-foot recommendation
*/
.detail-hero { padding: 28px 0 8px; }
.detail-hero .crumb { color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; line-height: 1.6; font-size: 12.5px; }
.detail-hero .crumb a { cursor: pointer; white-space: nowrap; color: var(--blue); }
.detail-hero .crumb > * { flex-shrink: 0; }
.detail-hero h1 { font-family: var(--serif); font-size: 32px; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; margin: 14px 0 6px; line-height: 1.2; }
.detail-hero .sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* ===== 상세 헤더 — 항상 리치 톤 (2026-06-05) =====
   썸네일 미등록: 트랙 색상 그라데이션. 등록 시: 그 위에 이미지 + 글래스 블러 스크림.
   세로 높이 확대 · 화이트 텍스트. */
.detail-hero-rich { position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 52px 0 38px; min-height: 320px; }
.detail-hero-rich::before { display: none; }                 /* page-hero 연한 배경 제거 */
.detail-hero-rich .detail-hero-bg { position: absolute; inset: 0; z-index: 0; }
.detail-hero-rich.track-track1 .detail-hero-bg { background: linear-gradient(118deg,#0C1A36 0%,#1E4E86 58%,#2F6AA8 100%); }
.detail-hero-rich.track-track2 .detail-hero-bg { background: linear-gradient(118deg,#0F2A4C 0%,#235F92 58%,#3E86B8 100%); }
.detail-hero-rich.track-track3 .detail-hero-bg { background: linear-gradient(118deg,#13233F 0%,#4A5A3A 52%,#7E6326 100%); }
.detail-hero-rich.track-freeform .detail-hero-bg { background: linear-gradient(118deg,#211A3C 0%,#3B2D60 58%,#5E4A92 100%); }
.detail-hero-rich .detail-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 2026-06-17 — 높이에 맞춰 전체 표시(contain): 위아래 잘림·왜곡 없이 썸네일 전체가 보임.
     좌우 여백은 트랙 그라데이션(detail-hero-bg)이 채움. 블러 없음 → 선명. */
  object-fit: contain; object-position: center;
  z-index: 1;
}
/* 2026-06-17 — 흐림 제거: 블러 없이, 글자가 있는 왼쪽·위·아래만 어둡게 하는 방향성 그라데이션.
   → 이미지(특히 오른쪽)는 선명하게 보이고, 흰 글자(제목·칩)는 어두운 영역 위라 읽힘. */
.detail-hero-rich .detail-hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, rgba(8,16,34,0.82) 0%, rgba(8,16,34,0.52) 44%, rgba(8,16,34,0.08) 100%),
    linear-gradient(180deg, rgba(8,16,34,0.34) 0%, rgba(8,16,34,0.04) 38%, rgba(8,16,34,0.30) 100%);
}
.detail-hero-rich .detail-hero-scrim::after {                /* 상단 미세 하이라이트 = 유리 질감 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 22%);
}
.detail-hero-rich > .container { position: relative; z-index: 3; }
.detail-hero-rich .crumb { color: rgba(255,255,255,0.82); }
.detail-hero-rich .crumb a { color: rgba(255,255,255,0.94); }
.detail-hero-rich h1 { color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,0.32); }
.detail-hero-rich .sub { color: rgba(255,255,255,0.92); }
/* 칩 — 어두운 배경 위 가독성 보정 */
.detail-hero-rich .detail-chips .ch-level { background: rgba(255,255,255,0.94); border-color: transparent; }
.detail-hero-rich .detail-chips .ch-track { background: rgba(255,255,255,0.92); border-color: transparent; }
.detail-hero-rich .detail-chips .ch-dday { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.55); color: #fff; }
.detail-hero-rich .detail-chips .ch-dday.open { color: #7FE6AC; border-color: #7FE6AC; }
/* 2026-06-17 — 분할형 히어로: 왼쪽 정보 + 오른쪽 썸네일 카드. 이미지/제목 겹침·흐림 없음. */
.detail-hero-split { display: flex; align-items: center; gap: 36px; }
.detail-hero-info { flex: 1 1 auto; min-width: 0; }
.detail-hero-thumb { flex: 0 0 auto; width: 440px; max-width: 46%; order: -1; }   /* 이미지 왼쪽, 정보 오른쪽 */
.detail-hero-thumb img {
  /* 2026-06-17 — 자연 비율 그대로 전체 표시(잘림·여백 없음). 카드 높이는 이미지에 맞춰짐. */
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 14px 36px rgba(0,0,0,0.30); background: var(--bg-soft-2);
}
@media (max-width: 760px) {
  .detail-hero-split { flex-direction: column; align-items: stretch; gap: 18px; }
  .detail-hero-thumb { width: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
  .detail-hero-rich { padding: 34px 0 24px; min-height: 272px; }
}

.detail-chips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.detail-chips .ch { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 9px; letter-spacing: 0.06em; }
.detail-chips .ch-track { color: var(--blue); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.detail-chips .ch-level { color: var(--ink-2); background: #fff; border: 1px solid var(--line); }
.detail-chips .ch-mode { color: #fff; background: var(--ink-2); }
.detail-chips .ch-mode.online { background: var(--green); }
.detail-chips .ch-mode.offline { background: var(--blue-2); }
.detail-chips .ch-dday { color: var(--red); border: 1px solid var(--red); background: rgba(216,30,30,0.06); }
.detail-chips .ch-dday.open { color: var(--green); border-color: var(--green); background: rgba(31,107,63,0.06); }

/* 세로 패딩만 지정 — .container 의 좌우 패딩(0 20px / 모바일 0 14px)을 보존(덮어쓰지 않음).
   기존 `padding: 28px 0 36px` 는 좌우를 0 으로 만들어 모바일에서 본문이 화면 끝까지 붙던 버그. */
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 36px; }
.detail-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.detail-sec { padding: 26px 0; border-top: 1px solid var(--line); }
.detail-sec:first-child { border-top: 0; padding-top: 0; }
.detail-sec h3 { font-family: var(--serif); font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -0.025em; margin: 0 0 14px; }
.detail-sec p { font-size: 14px; line-height: 1.75; color: var(--ink-2); margin: 0 0 12px; white-space: pre-wrap; }
.detail-sec .out-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.detail-sec .out-list li { padding-left: 24px; position: relative; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.detail-sec .out-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }

.apply-card { background: #fff; border: 1px solid var(--line); padding: 22px; }
.apply-card-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 8px; }
.apply-card h4 { font-family: var(--serif); font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.3; }
.apply-card-meta { margin: 0; padding: 14px 0; border-top: 1px dotted var(--line); border-bottom: 1px dotted var(--line); }
.apply-card-meta .r { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 12.5px; padding: 4px 0; }
.apply-card-meta dt { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; padding-top: 2px; margin: 0; }
.apply-card-meta dd { margin: 0; color: var(--ink-2); line-height: 1.45; }
.apply-card-meta dd strong { color: var(--navy); font-weight: 700; }
.apply-card-progress { padding: 14px 0; }
.apply-card-cta { width: 100%; background: var(--navy); color: #fff; border: 0; padding: 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--sans); letter-spacing: -0.01em; margin-top: 6px; transition: background .15s; }
.apply-card-cta:hover:not(:disabled) { background: var(--blue-2); }
.apply-card-cta:disabled { background: var(--ink-3); cursor: not-allowed; opacity: 0.6; }
.apply-card-back { width: 100%; background: #fff; color: var(--navy); border: 1px solid var(--line); padding: 9px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); margin-top: 8px; transition: border-color .15s, background .15s; }
.apply-card-back:hover { border-color: var(--navy); background: var(--bg-soft); }

.related-card { background: var(--bg-soft); border: 1px solid var(--line); padding: 18px; }
.related-card h5 { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3); margin: 0 0 12px; }
.related-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.related-card li { padding: 10px 12px; background: #fff; border: 1px solid var(--line); transition: border-color .15s; }
.related-card li:hover { border-color: var(--blue); }
.related-card li a { display: block; text-decoration: none; }
.related-card li .t { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; line-height: 1.4; }
.related-card li .m { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.related-card .empty { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: center; padding: 12px 0; }

.syllabus-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.syllabus-table th, .syllabus-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.syllabus-table th { background: var(--bg-soft-2); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); border-bottom: 2px solid var(--navy); }
.syllabus-table td.week { font-family: var(--mono); font-weight: 700; color: var(--blue); width: 64px; }
.syllabus-table td.topic { font-weight: 700; color: var(--navy); width: 32%; }
.syllabus-table td.activity { color: var(--ink-2); }
.syllabus-table td.artifact { font-family: var(--mono); font-size: 12px; color: var(--ink-3); width: 22%; }
.syllabus-table tr:nth-child(even) td { background: var(--bg-soft); }

.instructor-card { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 18px; background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 14px; }
.instructor-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 26px; font-weight: 800; }
.instructor-info .name { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 2px; }
.instructor-info .title { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.instructor-info ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.instructor-info ul li { padding-left: 14px; position: relative; }
.instructor-info ul li::before { content: '·'; position: absolute; left: 4px; color: var(--blue); font-weight: 700; }
.instructor-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.instructor-tags .tg { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--blue-line); padding: 3px 8px; letter-spacing: 0.04em; }

.review-summary { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; padding: 14px 18px; background: var(--bg-soft); border-left: 3px solid var(--blue); flex-wrap: wrap; }
.review-summary .avg { font-family: var(--serif); font-size: 32px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.review-summary .stars { color: #FFA500; font-size: 16px; letter-spacing: 1px; }
.review-summary .stars span { color: var(--line); }
.review-summary .stars span.on { color: #FFA500; }
.review-summary .count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-card { padding: 14px 16px; background: #fff; border: 1px solid var(--line); }
.review-card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.review-card .who { font-size: 12px; font-weight: 700; color: var(--navy); }
.review-card .stars { color: #FFA500; font-size: 12px; letter-spacing: 1px; }
.review-card .body { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.review-pager { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.review-pager button { font-family: var(--mono); font-size: 11px; padding: 4px 10px; background: #fff; border: 1px solid var(--line); cursor: pointer; color: var(--ink-2); }
.review-pager button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.review-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.review-note { font-size: 13.5px; color: var(--ink-3); margin: 0; }
/* 후기 0건 카드 상태 — 별점 대신 안내 문구만 */
.rcard-rev-empty .rev-c, .ss-rev-empty .rev-c { color: var(--ink-4); font-style: normal; }

.materials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.materials-card { padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.materials-card .lbl { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--blue); letter-spacing: 0.08em; margin-bottom: 8px; }
.materials-card ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.materials-card p { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: 0; }

.detail-foot { padding: 36px 0; background: var(--bg-soft); border-top: 1px solid var(--line); margin-top: 28px; }
.detail-foot h3 { font-family: var(--serif); font-size: 18px; font-weight: 800; color: var(--navy); margin: 0 0 16px; letter-spacing: -0.02em; }
.detail-foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* (구 .rcard-mini 관련강좌 카드 CSS 제거 2026-06-05 — 마크업 미사용. 동명의 신규 미니 카드와 충돌하던 dead block) */

@media (max-width: 1024px) {
  .detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-aside { position: static; }
  .detail-foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .detail-hero h1 { font-size: 24px; }
  .review-grid { grid-template-columns: 1fr; }
  .materials-grid { grid-template-columns: 1fr; }
  .syllabus-table th, .syllabus-table td { padding: 8px 6px; font-size: 12px; }
  .syllabus-table td.artifact { display: none; }
  .instructor-card { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; }
  .instructor-avatar { width: 48px; height: 48px; font-size: 20px; }
}
@media (max-width: 480px) {
  .detail-foot-grid { grid-template-columns: 1fr; }
}

/* ─── VimeoUrlField (Phase 2.C, 2026-05-11) ──────────────────── */
.vimeo-field { display: flex; flex-direction: column; gap: 6px; }
.vimeo-field-preview-btn {
  white-space: nowrap;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid var(--blue-line);
  cursor: pointer;
  transition: background .15s;
}
.vimeo-field-preview-btn:hover:not(:disabled) { background: var(--blue); color: #fff; }
.vimeo-field-preview-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vimeo-field-hint { font-size: 11.5px; margin: 0; font-family: var(--mono); }
.vimeo-field-hint--err { color: var(--red); }
.vimeo-field-hint--ok { color: var(--green); }
.vimeo-field-preview {
  margin-top: 8px;
  border: 1px solid var(--line);
  background: #000;
  animation: vimeo-preview-in .2s ease-out;
}
@keyframes vimeo-preview-in {
  from { opacity: 0; max-height: 0; transform: translateY(-4px); }
  to   { opacity: 1; max-height: 500px; transform: translateY(0); }
}

/* ─── /admin/courses 통합 관리 (Phase 2.D, 2026-05-11) ──────── */
.admin-courses-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}
.admin-courses-filter {
  position: sticky;
  top: 84px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 16px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.admin-filter-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.admin-filter-block { margin-bottom: 14px; }
.admin-filter-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.admin-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-filter-chip {
  font-size: 11px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--sans);
}
.admin-filter-chip:hover { border-color: var(--blue); }
.admin-filter-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.admin-filter-reset { width: 100%; margin-top: 8px; font-size: 12px; padding: 8px; }

.admin-courses-main { min-width: 0; }
.admin-courses-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  margin-bottom: 0;
}
.admin-courses-tools-right { display: flex; align-items: center; gap: 8px; }

.admin-courses-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-top: 0; background: #fff; }
.admin-courses-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-courses-tbl th, .admin-courses-tbl td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.admin-courses-tbl th {
  background: var(--bg-soft-2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 2px solid var(--navy);
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-courses-tbl tr.is-selected td { background: var(--blue-soft); }
.admin-courses-tbl tr:hover td { background: var(--bg-soft); }
.admin-courses-tbl tr.is-selected:hover td { background: var(--blue-soft); }
.admin-courses-tbl td.mono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.admin-courses-tbl td.small { font-size: 11.5px; }
.admin-courses-title-link { color: var(--navy); font-weight: 700; }
.admin-courses-title-link:hover { color: var(--blue); }
.admin-courses-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.admin-courses-meta { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.admin-courses-meta .badge-role {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 1px 4px;
  background: var(--bg-soft-2);
  color: var(--ink-3);
}
.admin-courses-meta .badge-role.primary { background: var(--navy); color: #fff; }

.admin-courses-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.admin-courses-pager button {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
}
.admin-courses-pager button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.admin-courses-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 980px) {
  .admin-courses-grid { grid-template-columns: 1fr; }
  .admin-courses-filter { position: static; max-height: none; }
}

/* ─── /admin/courses/new 5-step Wizard (Phase 2.E, 2026-05-11) ── */
.wizard-stepper {
  list-style: none;
  display: flex;
  gap: 0;
  padding: 0;
  margin: 18px 0 22px;
  border: 1px solid var(--line);
  background: #fff;
}
.wizard-step { flex: 1; }
.wizard-step button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink-3);
  text-align: left;
}
.wizard-step:last-child button { border-right: 0; }
.wizard-step button:disabled { opacity: 0.5; cursor: not-allowed; }
.wizard-step.done button { color: var(--green); background: rgba(31,107,63,0.04); }
.wizard-step.active button {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--blue);
}
.wizard-step-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.wizard-step.active .wizard-step-num { background: #fff; color: var(--navy); border-color: #fff; }
.wizard-step-label { font-size: 13px; font-weight: 600; }

.wizard-section {
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px;
  animation: wizard-fade-in .18s ease-out;
}
.wizard-section h2 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
@keyframes wizard-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wizard-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.wizard-field > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.wizard-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wizard-hint { font-size: 11.5px; color: var(--ink-2); margin: 0; }

.wizard-selected {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.wizard-selected-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.wizard-selected ol {
  padding-left: 20px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wizard-selected ol li { display: flex; align-items: center; gap: 8px; }
.wizard-selected ol li .is-primary { color: var(--navy); font-weight: 700; }

.wizard-instructor-list {
  border: 1px solid var(--line);
  max-height: 360px;
  overflow-y: auto;
}
.wizard-instructor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  background: #fff;
}
.wizard-instructor-row:hover { background: var(--bg-soft); }
.wizard-instructor-row.is-selected { background: var(--blue-soft); }
.wizard-instructor-row .name { font-size: 13px; color: var(--navy); font-weight: 600; }
.wizard-instructor-row .name .sub { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.wizard-instructor-row .email { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.wizard-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.wizard-inline-num {
  width: 60px;
  padding: 2px 6px;
  margin: 0 4px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-family: var(--mono);
}

@media (max-width: 720px) {
  .wizard-stepper { flex-wrap: wrap; }
  .wizard-step { flex-basis: 50%; }
  .wizard-step:nth-child(odd) button { border-right: 1px solid var(--line); }
  .wizard-step:nth-child(even) button { border-right: 0; }
  .wizard-step button { padding: 10px 12px; font-size: 12px; }
  .wizard-step-label { font-size: 11.5px; }
  .wizard-field-row { grid-template-columns: 1fr; }
}

/* ─── /admin/courses/[id] tabs (Phase 2.F, 2026-05-11) ────────── */
.admin-tabs {
  display: flex;
  gap: 0;
  margin: 18px 0 14px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
  flex-wrap: nowrap;
}
.admin-tab {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--ink-3);
  white-space: nowrap;
}
.admin-tab:hover { color: var(--navy); }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--blue); }
.admin-tab-content { animation: admin-tab-fade .18s ease-out; }
@keyframes admin-tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.admin-card-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 0 0 10px;
  text-transform: uppercase;
}
@media (max-width: 980px) {
  .admin-overview-grid { grid-template-columns: 1fr; }
  .admin-overview-grid > section[style*="grid-column"] { grid-column: 1 / -1 !important; }
}

/* ─── 출석 chip + modal (Phase 3.A, 2026-05-11) ──────────────── */
.attendance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid var(--blue-line);
  cursor: pointer;
  transition: background .15s;
}
.attendance-chip:hover { background: var(--blue); color: #fff; }

.attendance-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 200;
  animation: attendance-fade-in .15s ease-out;
}
@keyframes attendance-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.attendance-modal {
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  padding: 0;
  animation: attendance-slide-in .2s ease-out;
}
@keyframes attendance-slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.attendance-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.attendance-modal-head h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.attendance-modal-close {
  font-size: 22px;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-3);
  width: 28px;
  height: 28px;
}
.attendance-modal-close:hover { color: var(--navy); }

.attendance-summary {
  padding: 18px 20px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.attendance-summary-rate { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.attendance-summary-rate .rate-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.attendance-summary-rate .rate-frac {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.attendance-summary-bar {
  height: 6px;
  background: var(--bg-soft-2);
  border-radius: 3px;
  overflow: hidden;
}
.attendance-summary-bar-fill {
  height: 100%;
  background: var(--green);
  transition: width .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.attendance-summary-course {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.attendance-session-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.attendance-session-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.attendance-session-item:last-child { border-bottom: 0; }
.attendance-session-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.attendance-session-ord {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 2px 7px;
}
.attendance-session-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
}
.attendance-session-status {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
}
.attendance-session-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
}

/* ─── 관리자 출석 통계 (Phase 3.B, 2026-05-11) ──────────────── */
.att-stat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.att-stat-row {
  display: grid;
  grid-template-columns: 1fr 200px 220px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.att-stat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-stat-ord {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 2px 7px;
  width: max-content;
}
.att-stat-title { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.att-stat-when { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.att-stat-bar {
  height: 8px;
  background: var(--bg-soft-2);
  border-radius: 4px;
  overflow: hidden;
}
.att-stat-bar-fill { height: 100%; transition: width .4s ease-out; }
.att-stat-numbers { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }
.att-stat-numbers .muted-mono { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

@media (max-width: 720px) {
  .att-stat-row { grid-template-columns: 1fr; gap: 8px; }
  .att-stat-numbers { align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   Phase 4 — 디자인 + 애니메이션 마감 (2026-05-11)
   세부 분류:
     · 페이지 전환 (.page-transition)
     · 마이크로 인터랙션 (카드 hover · 버튼 active · 토스트 · 진도바 · stepper · chip)
     · skeleton + empty illustration
     · 폼 마이크로 (validation hint · auto-height · 약관 toggle)
     · @media (prefers-reduced-motion: reduce) — 모든 keyframe / transition off
   ════════════════════════════════════════════════════════════════════ */

/* ─── P4.A 페이지 전환 ─── */
.page-transition {
  animation: page-fade-in 200ms ease-out;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .page-transition {
    animation: page-slide-in 220ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  @keyframes page-slide-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ─── P4.B 카드 hover / 버튼 active ─── */
.course-card,
.mp-card,
.rcard-mini,
.review-card,
.materials-card,
.related-card li,
.lesson-quiz-item {
  transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out;
}
.course-card:hover,
.mp-card:hover,
.rcard-mini:hover,
.materials-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* primary 버튼 active scale (탭 피드백) */
.ymas-btn,
.btn,
.apply-btn,
.apply-card-cta {
  transition: transform .08s ease-out, background .15s, color .15s, border-color .15s;
}
.ymas-btn:active:not(:disabled),
.btn:active:not(:disabled),
.apply-btn:active:not(:disabled),
.apply-card-cta:active:not(:disabled) {
  transform: scale(0.98);
}

/* ─── P4.B 토스트 ─── */
.learn-toast,
.toast-banner {
  animation: toast-slide-up 240ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes toast-slide-up {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── P4.B 진도바 (lesson-progress-fill, apply-card-progress, attendance bar) ─── */
.lesson-progress-fill,
.attendance-summary-bar-fill,
.att-stat-bar-fill {
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── P4.B Stepper 진행 bar (wizard) ─── */
.wizard-step.active button { transition: background .25s, color .25s, border-color .25s; }
.wizard-step.done .wizard-step-num {
  animation: stepper-pop .3s ease-out;
}
@keyframes stepper-pop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ─── P4.B Chip / Tag 추가 pop ─── */
.admin-filter-chip.active,
.detail-chips .ch,
.instructor-tags .tg {
  animation: chip-pop-in .18s ease-out;
}
@keyframes chip-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── P4.C Skeleton shimmer (2026-05-26 톤 강화 — 흰 배경 위 가시성 확보) ─── */
.skel,
.skel-row {
  background: linear-gradient(90deg, #DEE4EC 0%, #C9D1DC 50%, #DEE4EC 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 3px;
}
.skel-row {
  height: 14px;
  margin: 6px 0;
}
.skel-block {
  display: block;
  background: #DEE4EC;
  border: 1px solid var(--line);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.skel-block::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  animation: skel-sweep 1.5s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}
@keyframes skel-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── P4.C Empty state — bounce once ─── */
.empty-illustration {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  display: block;
  color: var(--ink-4);
  opacity: 0.6;
  animation: empty-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes empty-bounce {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  60%  { opacity: 0.6; transform: scale(1.1) translateY(-4px); }
  100% { opacity: 0.6; transform: scale(1) translateY(0); }
}

/* ─── P4.D 폼 validation hint slide-down ─── */
.field-hint--err,
.form-error {
  color: var(--red);
  font-size: 11.5px;
  margin: 4px 0 0;
  animation: form-hint-down .18s ease-out;
}
@keyframes form-hint-down {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 60px; }
}

/* 검색 결과 fade-in */
.search-results,
.search-result-fade {
  animation: search-fade .2s ease-out;
}
@keyframes search-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── P4.E prefers-reduced-motion: reduce ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   /learn 사이드 패널 재설계 (2026-05-11)
     · 전체 이수 진도 progress bar (탭 콘텐츠 최상단)
     · 챕터/차시 폰트 통일
     · 차시별 progress bar + 시청 진도% 표시
     · Q&A — 메시지 bubble + 시점 첨부 칩 + sticky compose
   ════════════════════════════════════════════════════════════════════ */

/* 전체 이수 진도 (차시 탭 최상단) */
.learn-course-progress {
  padding: 14px 4px 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.learn-course-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.learn-course-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.learn-course-progress-pct {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.learn-course-progress-bar {
  height: 8px;
  background: var(--bg-soft-2);
  border-radius: 4px;
  overflow: hidden;
}
.learn-course-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  border-radius: 4px;
  transition: width .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.learn-course-progress-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: right;
  letter-spacing: -0.01em;
}

/* 챕터 리스트 — 폰트 통일 */
.learn-chap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.learn-chap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.learn-chap-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.learn-chap-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
}
.learn-chap-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.learn-chap-count {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.learn-lesson-rows {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 각 차시 row — 진도 bar 가 row 하단에 박힘 */
.learn-lesson-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .15s, background .15s;
}
.learn-lesson-row:hover:not(.is-locked) {
  border-color: var(--blue-line);
  background: var(--bg-soft);
}
.learn-lesson-row.is-current {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.learn-lesson-row.is-current::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--blue);
  border-radius: 4px 0 0 4px;
}
.learn-lesson-row.is-locked {
  background: var(--bg-soft);
  color: var(--ink-3);
  cursor: not-allowed;
}
.learn-lesson-row.is-completed {
  border-color: rgba(31,107,63,0.25);
}

.learn-lesson-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.learn-lesson-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  min-width: 22px;
}
.learn-lesson-row.is-current .learn-lesson-num { color: var(--blue); }
.learn-lesson-row.is-completed .learn-lesson-num { color: var(--green); }

.learn-lesson-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.learn-lesson-row.is-locked .learn-lesson-title { color: var(--ink-3); }

.learn-lesson-state {
  font-size: 12px;
  color: var(--ink-4);
}
.learn-lesson-row.is-current .learn-lesson-state { color: var(--blue); }
.learn-lesson-row.is-completed .learn-lesson-state { color: var(--green); }

.learn-lesson-row-bar {
  height: 3px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.learn-lesson-row-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.learn-lesson-row-fill[data-completed="true"] {
  background: var(--green);
}

.learn-lesson-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.learn-lesson-row.is-completed .learn-lesson-row-meta { color: var(--green); font-weight: 700; }
.learn-lesson-dur { color: var(--ink-3); }

.learn-chap-foot-note {
  margin: 18px 4px 0;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}

/* ─── Q&A 모던 UI ─── */
.qna-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.qna-stream {
  flex: 1;
  overflow-y: auto;
  padding: 0 2px 12px;
  min-height: 200px;
}
.qna-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--ink-3);
}
.qna-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.6;
}
.qna-empty p {
  margin: 4px 0;
  font-size: 13px;
}

.qna-bubbles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qna-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 시점 banner — 질문 위에 명확히 표시 + 클릭해서 그 시점으로 이동 */
.qna-ts-banner {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  max-width: 92%;
}
.qna-ts-banner:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2);
}
.qna-ts-banner-icon { font-size: 14px; line-height: 1; }
.qna-ts-banner-label {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.qna-ts-banner-time {
  font-family: var(--mono);
  font-weight: 700;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.qna-ts-banner:hover .qna-ts-banner-time {
  background: rgba(255, 255, 255, 0.25);
}
.qna-ts-banner-cta {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: -0.01em;
}

.qna-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 92%;
  position: relative;
  animation: qna-bubble-pop .2s ease-out;
}
@keyframes qna-bubble-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qna-bubble--ask {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.qna-bubble--ans {
  align-self: flex-start;
  background: var(--bg-soft);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}

.qna-bubble-from {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.qna-bubble-body {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.qna-bubble-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 10.5px;
  font-family: var(--mono);
  opacity: 0.8;
}
.qna-bubble--ask .qna-bubble-meta { color: rgba(255,255,255,0.85); }
.qna-bubble--ans .qna-bubble-meta { color: var(--ink-3); }
.qna-bubble-ts {
  font-weight: 700;
  padding: 1px 6px;
  background: rgba(255,255,255,0.22);
  border-radius: 4px;
}
.qna-bubble--ans .qna-bubble-ts { background: var(--blue-soft); color: var(--blue); }

.qna-pending {
  align-self: flex-start;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--ink-3);
  padding: 6px 12px;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  letter-spacing: -0.01em;
}

/* 강의 외 문의 보조 링크 — compose 바로 위 */
.qna-aux-link {
  display: block; margin: 8px -16px 0;
  padding: 8px 16px;
  background: #fff; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--blue); font-weight: 600;
  text-decoration: none; letter-spacing: -0.01em;
  transition: background-color .12s;
}
.qna-aux-link:hover { background: var(--blue-soft); color: var(--blue-2); }

/* compose (sticky 하단) */
.qna-compose {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 10px 12px;
  margin: 0 -16px -14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qna-compose-input {
  width: 100%;
  resize: vertical;
  min-height: 56px;
  max-height: 200px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.qna-compose-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.qna-compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qna-ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-3);
  transition: all .15s;
}
.qna-ts-chip:hover { border-color: var(--blue); color: var(--blue); }
.qna-ts-chip.active {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--blue-line);
}
.qna-compose-hint {
  flex: 1;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--ink-4);
  text-align: center;
}
.qna-send-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.qna-send-btn:hover:not(:disabled) { background: var(--blue-2); }
.qna-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qna-compose-error {
  margin: 0;
  font-size: 11.5px;
  color: var(--red);
}

/* 강사 Q&A 관리 카드 — 2026-05-11 */
.qna-mgmt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.qna-mgmt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.qna-mgmt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.qna-mgmt-course {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.qna-mgmt-from { color: var(--navy); font-size: 13px; }
.qna-mgmt-when { color: var(--ink-3); font-family: var(--mono); font-size: 11px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qna-mgmt-course-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  flex: 1 1 200px;
  min-width: 0;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 질문자 + 강사 메타 row — 모바일에서 줄바꿈 안전 */
.qna-mgmt-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: 12px;
}
.qna-mgmt-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.qna-mgmt-meta-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  min-width: 52px;
}
.qna-mgmt-meta-val {
  color: var(--navy);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.qna-mgmt-meta-sub {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  word-break: break-all;        /* 긴 이메일 줄바꿈 */
  flex: 1 1 auto;
  min-width: 0;
}

/* 답변 헤더 — 수정 버튼이 들어가도 안전한 wrap */
.qna-mgmt-answer-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 1:1 문의 카드 — 질문자 정보 */
.inquiry-card-from {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
  flex-wrap: wrap;
  font-size: 12px;
}
.inquiry-card-from strong {
  color: var(--navy);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.inquiry-card-from-sub {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  word-break: break-all;
  min-width: 0;
}

@media (max-width: 640px) {
  .qna-mgmt-card { padding: 12px 14px; }
  .qna-mgmt-meta { padding: 6px 10px; }
  .qna-mgmt-meta-label { min-width: 44px; font-size: 10px; }
  .qna-mgmt-meta-sub { font-size: 10.5px; }
  .qna-mgmt-course-title { flex-basis: 100%; }
}
.qna-mgmt-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.qna-mgmt-badge.pending { color: #B47700; background: rgba(252, 191, 73, 0.18); border: 1px solid rgba(252, 191, 73, 0.4); }
.qna-mgmt-badge.answered { color: var(--green); background: rgba(31,107,63,0.1); border: 1px solid rgba(31,107,63,0.3); }
.qna-mgmt-question {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-1);
  white-space: pre-wrap;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: 6px;
  border-left: 3px solid var(--blue);
}
.qna-mgmt-answer {
  padding: 10px 14px;
  background: rgba(31,107,63,0.06);
  border-left: 3px solid var(--green);
  border-radius: 6px;
}
.qna-mgmt-answer-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.qna-mgmt-answer-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-1);
  white-space: pre-wrap;
}
.qna-mgmt-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════════
 * 관리자 공지 관리 — 모던 디자인 (Phase B / 2026-05-12)
 * ════════════════════════════════════════════════════════════════════ */
.admin-notice-page { padding: 24px 28px; max-width: 1280px; }
.admin-notice-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.admin-notice-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start;
}
@media (max-width: 880px) {
  .admin-notice-grid { grid-template-columns: 1fr; gap: 16px; }
}
.admin-notice-side {
  position: sticky; top: 72px;
  background: #fff; border: 1px solid var(--line);
}
.admin-notice-side-h {
  padding: 12px 14px; background: var(--navy); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
}
.admin-notice-cat-list { list-style: none; margin: 0; padding: 0; }
.admin-notice-cat-list li button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 14px;
  background: #fff; border: 0; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2); cursor: pointer; text-align: left;
  font-family: var(--sans);
  transition: background-color .12s, color .12s;
}
.admin-notice-cat-list li:first-child button { border-top: 0; }
.admin-notice-cat-list li button:hover { background: var(--bg-soft); color: var(--navy); }
.admin-notice-cat-list li.active button { background: var(--blue-soft); color: var(--blue); font-weight: 700; box-shadow: inset 3px 0 0 var(--blue); }
.admin-notice-cat-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.admin-notice-cat-list li.active .admin-notice-cat-count { color: var(--blue); }

.admin-notice-main { min-width: 0; }
.admin-notice-filter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-notice-search { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.admin-notice-search input { flex: 1; min-width: 0; }
.admin-notice-status-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-notice-status-chip {
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; font-family: var(--sans);
  cursor: pointer; transition: all .12s;
}
.admin-notice-status-chip:hover { border-color: var(--navy); color: var(--navy); }
.admin-notice-status-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.admin-notice-meta { font-size: 13px; color: var(--ink-2); padding: 10px 0; border-bottom: 2px solid var(--navy); margin-bottom: 10px; }
.admin-notice-meta strong { color: var(--navy); font-family: var(--mono); font-size: 16px; }

.admin-notice-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-notice-table thead th {
  padding: 10px 12px; text-align: left;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.06em;
  font-family: var(--mono); text-transform: uppercase;
}
.admin-notice-row { border-bottom: 1px solid var(--line); transition: background-color .12s; }
.admin-notice-row:hover { background: var(--bg-soft); }
.admin-notice-row td { padding: 12px; vertical-align: middle; }
.admin-notice-thumb { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--line); }
.admin-notice-thumb.is-empty {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; color: var(--ink-3); background: var(--bg-soft);
  width: 44px; height: 44px; border: 1px solid var(--line);
}
.admin-notice-row-title {
  color: var(--navy); font-weight: 700; font-size: 14px;
  text-decoration: none; letter-spacing: -0.01em; word-break: keep-all;
}
.admin-notice-row-title:hover { text-decoration: underline; }
.admin-notice-cat-chip { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--blue); background: var(--blue-soft); padding: 3px 8px; border: 1px solid var(--blue-line); }
.admin-notice-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.admin-notice-actions { text-align: right; white-space: nowrap; }
.admin-notice-action {
  background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--blue);
  cursor: pointer; padding: 4px 8px;
}
.admin-notice-action:hover { color: var(--navy); }
.admin-notice-action.danger { color: var(--red); }
.admin-notice-action.danger:hover { color: var(--red); text-decoration: underline; }

.admin-notice-pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 24px 0 0; flex-wrap: wrap; }
.admin-notice-pager button {
  min-width: 36px; height: 36px; padding: 0 10px;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.admin-notice-pager button:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.admin-notice-pager button.active { background: var(--navy); color: #fff; border-color: var(--navy); cursor: default; }
.admin-notice-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-notice-pager .ellipsis { font-family: var(--mono); color: var(--ink-3); padding: 0 4px; }

.admin-notice-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); background: #fff; border: 1px dashed var(--line); }

/* ────────────────────────────────────────────────────────────────────
 * 공지 작성·편집 (4-step wizard)
 * ──────────────────────────────────────────────────────────────────── */
.admin-notice-detail { padding: 24px 28px; max-width: 1120px; }
.admin-notice-detail-head { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-notice-detail-headrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.admin-notice-detail-headrow h1 { margin: 0; }
.admin-notice-detail-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

.admin-notice-detail-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--navy); margin-bottom: 20px; }
.admin-notice-detail-tabs button {
  padding: 10px 18px; background: #fff; border: 1px solid var(--line); border-bottom: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; font-family: var(--sans);
  position: relative; margin-bottom: -1px;
}
.admin-notice-detail-tabs button:hover { color: var(--navy); }
.admin-notice-detail-tabs button.active { color: var(--navy); font-weight: 700; background: var(--bg-soft); border-bottom: 2px solid var(--blue); }

/* Stepper */
.notice-stepper { display: flex; list-style: none; margin: 0 0 24px; padding: 0; gap: 6px; flex-wrap: wrap; }
.notice-stepper-item {
  flex: 1; min-width: 140px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: all .12s;
}
.notice-stepper-item:hover { border-color: var(--navy); }
.notice-stepper-item.active { background: var(--blue-soft); border-color: var(--blue); box-shadow: 0 2px 8px rgba(30,87,153,0.1); }
.notice-stepper-item.done { background: rgba(31,107,63,0.04); border-color: rgba(31,107,63,0.25); }
.notice-stepper-num {
  display: grid; place-items: center; width: 24px; height: 24px;
  background: var(--bg-soft); color: var(--ink-3); border-radius: 50%;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.notice-stepper-item.active .notice-stepper-num { background: var(--blue); color: #fff; }
.notice-stepper-item.done .notice-stepper-num { background: var(--green); color: #fff; }
.notice-stepper-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.notice-stepper-item.active .notice-stepper-label { color: var(--navy); }

.notice-step { background: #fff; border: 1px solid var(--line); padding: 24px; }
.notice-step-title { margin: 0 0 16px; font-family: var(--serif); font-size: 18px; font-weight: 800; color: var(--navy); }

/* 카테고리 카드 */
.notice-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.notice-cat-card {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); cursor: pointer; transition: all .12s;
}
.notice-cat-card:hover { background: var(--bg-soft); border-color: var(--navy); }
.notice-cat-card.active { background: var(--blue-soft); border-color: var(--blue); }
.notice-cat-card input { margin-top: 2px; }
.notice-cat-card-body strong { display: block; font-size: 13.5px; color: var(--navy); letter-spacing: -0.01em; }
.notice-cat-card-body small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.notice-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 6px 0; }
.notice-toggle strong { color: var(--navy); }

/* MarkdownEditor */
.md-editor { background: #fff; border: 1px solid var(--line); }
.md-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.md-editor-toolbar button {
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans);
  transition: all .12s;
}
.md-editor-toolbar button:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.md-editor-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }
.md-editor-toolbar-sep { width: 1px; background: var(--line); margin: 0 6px; }
.md-editor-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 320px; }
@media (max-width: 880px) { .md-editor-pane { grid-template-columns: 1fr; } }
.md-editor-textarea {
  border: 0; border-right: 1px solid var(--line); padding: 14px;
  font-family: var(--sans); font-size: 13px; line-height: 1.65;
  resize: vertical; outline: none; min-height: 320px;
  background: #fff; color: var(--ink-1);
}
.md-editor-textarea:focus { background: #FBFCFD; }
.md-editor-preview { padding: 14px 18px; background: var(--bg-soft); overflow: auto; min-height: 320px; }
.md-editor-preview-empty { color: var(--ink-3); font-size: 12.5px; }
.md-editor-error { color: var(--red); font-size: 12.5px; padding: 8px 14px; }

/* 마크다운 렌더 */
.markdown { font-size: 14px; line-height: 1.75; color: var(--ink-1); word-break: keep-all; }
.markdown h1, .markdown h2, .markdown h3 { font-family: var(--serif); color: var(--navy); margin: 1.4em 0 0.4em; letter-spacing: -0.02em; }
.markdown h1 { font-size: 24px; }
.markdown h2 { font-size: 20px; }
.markdown h3 { font-size: 17px; }
.markdown p { margin: 0.6em 0; }
.markdown ul, .markdown ol { margin: 0.6em 0; padding-left: 1.4em; }
.markdown li { margin: 0.2em 0; }
.markdown blockquote { margin: 0.8em 0; padding: 0.4em 1em; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--ink-2); }
.markdown code { font-family: var(--mono); font-size: 0.92em; background: var(--bg-soft); padding: 1px 6px; border: 1px solid var(--line); }
.markdown pre { background: #1A1A1A; color: #F8F8F8; padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.markdown pre code { background: transparent; color: inherit; border: 0; padding: 0; }
.markdown a { color: var(--blue); }
.markdown table { width: 100%; border-collapse: collapse; margin: 0.8em 0; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.markdown th { background: var(--bg-soft); font-weight: 700; }

/* ImageUploader */
.img-uploader { margin-bottom: 16px; }
.img-uploader-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.img-uploader-label { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.img-uploader-hint { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; }
.img-uploader-drop {
  width: 100%; padding: 28px 20px;
  background: var(--bg-soft); border: 2px dashed var(--line); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: all .12s; font-family: var(--sans);
}
.img-uploader-drop:hover, .img-uploader-drop.is-over { background: var(--blue-soft); border-color: var(--blue); }
.img-uploader-icon { font-family: var(--mono); font-size: 22px; color: var(--blue); }
.img-uploader-text { font-size: 13px; color: var(--ink-2); }
.img-uploader-text strong { color: var(--navy); }
.img-uploader-sub { font-size: 11.5px; color: var(--ink-3); }
.img-uploader-preview { position: relative; }
.img-uploader-preview img { max-width: 100%; border: 1px solid var(--line); display: block; }
.img-uploader-actions { display: flex; gap: 6px; margin-top: 8px; }
.img-uploader-err { color: var(--red); font-size: 12px; margin: 6px 0 0; }

/* AttachmentUploader */
.attach-uploader { margin-top: 12px; }
.attach-uploader-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.attach-uploader-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.attach-uploader-list li {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; background: #fff; border: 1px solid var(--line); font-size: 13px;
}
.attach-file-icon { color: var(--blue); }
.attach-file-name { color: var(--navy); font-weight: 600; word-break: break-all; }
.attach-file-size { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.attach-file-remove { background: transparent; border: 0; color: var(--red); font-size: 12px; font-weight: 600; cursor: pointer; }
.attach-file-remove:hover { text-decoration: underline; }

/* notice image row */
.notice-image-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 880px) { .notice-image-row { grid-template-columns: 1fr; } }
.notice-event-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
@media (max-width: 640px) { .notice-event-fields { grid-template-columns: 1fr; } }

/* publish radios */
.notice-publish-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 16px; }
.notice-publish-radio {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); cursor: pointer; transition: all .12s;
}
.notice-publish-radio:hover { background: var(--bg-soft); }
.notice-publish-radio.active { background: var(--blue-soft); border-color: var(--blue); box-shadow: 0 2px 8px rgba(30,87,153,0.1); }
.notice-publish-radio input { margin-top: 3px; }
.notice-publish-radio strong { display: block; font-size: 13.5px; color: var(--navy); }
.notice-publish-radio small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }

.notice-confirm-card {
  margin-top: 18px; padding: 16px; background: var(--bg-soft); border: 1px solid var(--line);
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px;
}
.notice-confirm-row { display: contents; }
.notice-confirm-row dt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; padding-top: 1px; }
.notice-confirm-row dd { margin: 0; font-size: 13px; color: var(--ink-1); word-break: keep-all; }

.notice-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.notice-form-error { color: var(--red); font-size: 13px; margin: 12px 0 0; padding: 10px 14px; background: rgba(216,30,30,0.06); border-left: 3px solid var(--red); }

/* 보관 상태 안내 배너 (개요 탭 위) */
.admin-notice-archived-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  font-size: 13px; color: var(--ink-2); word-break: keep-all;
}
.admin-notice-archived-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.admin-notice-archived-banner strong { color: var(--ink-1); }
.admin-notice-archived-when { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
.admin-notice-archived-help { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.admin-notice-archived-help em { color: var(--blue); font-style: normal; font-weight: 600; }

/* 이력 타임라인 (Phase B 후속) */
.admin-notice-history { background: #fff; border: 1px solid var(--line); padding: 24px; }
.admin-notice-history-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.admin-notice-history-item { position: relative; padding: 0 0 22px 18px; }
.admin-notice-history-item:last-child { padding-bottom: 0; }
.admin-notice-history-dot { position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--blue); }
.admin-notice-history-item.action-created  .admin-notice-history-dot { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.admin-notice-history-item.action-updated  .admin-notice-history-dot { background: var(--blue);  box-shadow: 0 0 0 1px var(--blue); }
.admin-notice-history-item.action-archived .admin-notice-history-dot { background: var(--ink-3); box-shadow: 0 0 0 1px var(--ink-3); }
.admin-notice-history-item.action-restored .admin-notice-history-dot { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.admin-notice-history-item.action-deleted  .admin-notice-history-dot { background: var(--red);   box-shadow: 0 0 0 1px var(--red); }
.admin-notice-history-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.admin-notice-history-action { font-weight: 700; color: var(--navy); font-size: 14px; }
.admin-notice-history-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.admin-notice-history-actor { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 6px; word-break: keep-all; }
.admin-notice-history-actor strong { color: var(--ink-1); }
.admin-notice-history-actor-sub { color: var(--ink-3); margin-left: 6px; }
.admin-notice-history-diffs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0 0; padding: 8px 12px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12.5px; }
.admin-notice-history-diff { display: contents; }
.admin-notice-history-diff dt { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; padding-top: 2px; }
.admin-notice-history-diff dd { margin: 0; color: var(--ink-1); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; word-break: keep-all; }
.admin-notice-history-diff .diff-before { color: var(--ink-3); text-decoration: line-through; }
.admin-notice-history-diff .diff-arrow { color: var(--blue); font-family: var(--mono); }
.admin-notice-history-diff .diff-after { color: var(--navy); font-weight: 600; }
.admin-notice-history-reason { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); font-style: italic; }

/* overview */
.admin-notice-overview { background: #fff; border: 1px solid var(--line); padding: 24px; }
.admin-notice-overview-cover { max-width: 100%; max-height: 360px; object-fit: cover; margin-bottom: 16px; border: 1px solid var(--line); }
.admin-notice-overview-body { font-size: 14px; line-height: 1.75; color: var(--ink-1); }
.admin-notice-overview-attach { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.admin-notice-overview-attach ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.admin-notice-overview-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* field-required indicator */
.field-required { color: var(--red); }
.field-hint { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.field-error { font-size: 11.5px; color: var(--red); margin-top: 4px; display: block; }

/* ════════════════════════════════════════════════════════════════════
 * 학습자 공지·이벤트 (Phase C / 2026-05-12)
 * ════════════════════════════════════════════════════════════════════ */
.sec-sub-t { font-family: var(--serif); font-size: 22px; font-weight: 800; color: var(--navy); margin: 0 0 14px; letter-spacing: -0.02em; }

.notice-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notice-filter-chip {
  display: inline-block; padding: 7px 16px;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: -0.01em;
  transition: all .12s;
}
.notice-filter-chip:hover { border-color: var(--navy); color: var(--navy); }
.notice-filter-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 이벤트 그리드 카드 */
.notice-event-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}
.notice-event-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); text-decoration: none;
  overflow: hidden; transition: transform .14s, box-shadow .14s, border-color .14s;
}
.notice-event-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(12, 35, 64, 0.10); border-color: var(--navy); }
.notice-event-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.notice-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notice-event-thumb-fallback {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-3);
}
.notice-event-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.notice-event-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.notice-event-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.notice-event-title { font-family: var(--serif); font-size: 16.5px; font-weight: 800; color: var(--navy); margin: 4px 0 0; letter-spacing: -0.02em; word-break: keep-all; line-height: 1.4; }
.notice-event-loc { font-size: 12.5px; color: var(--ink-2); margin: 2px 0 0; }
.notice-event-preview { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin: 6px 0 0; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 일반 공지 리스트 */
.notice-list-public { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.notice-list-public-item { border-bottom: 1px solid var(--line); transition: background-color .12s; }
.notice-list-public-item:hover { background: var(--bg-soft); }
.notice-list-public-link { display: block; padding: 18px 6px; text-decoration: none; color: inherit; }
.notice-list-public-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.notice-list-public-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.notice-list-public-title { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.02em; word-break: keep-all; }
.notice-list-public-preview { font-size: 13px; color: var(--ink-3); line-height: 1.65; margin: 0; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.notice-pin-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(216,30,30,0.06); color: var(--red); border: 1px solid #F2C7C7; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.notice-cat-tag { display: inline-block; padding: 3px 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; }
.notice-cat-general   { background: #F1F1F1; color: var(--ink-2); border: 1px solid var(--line); }
.notice-cat-important { background: rgba(216,30,30,0.06); color: var(--red); border: 1px solid #F2C7C7; }
.notice-cat-system    { background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line); }
.notice-cat-event     { background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue-line); }
.notice-cat-policy    { background: #FFF7DB; color: #8B6500; border: 1px solid #F0DE9B; }

.notice-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); background: #fff; border: 1px dashed var(--line); }

/* 세부 페이지 */
.notice-detail-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 12px; }
.notice-detail-crumb a { color: var(--blue); text-decoration: none; }
.notice-detail-crumb.light { color: rgba(255,255,255,0.7); }
.notice-detail-crumb.light a { color: #fff; }
.notice-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.notice-detail-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.notice-detail-cover { margin-top: 18px; }
.notice-detail-cover img { width: 100%; max-height: 420px; object-fit: cover; border: 1px solid var(--line); }

.notice-event-hero {
  position: relative; padding: 80px 0;
  background-size: cover; background-position: center; background-color: var(--navy);
  color: #fff;
}
.notice-event-hero-inner { position: relative; z-index: 2; }
.notice-event-hero-chips { display: flex; gap: 8px; margin-bottom: 12px; }
.notice-event-hero-title { font-family: var(--serif); font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 14px; }
.notice-event-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14.5px; color: rgba(255,255,255,0.9); }
@media (max-width: 640px) {
  .notice-event-hero { padding: 48px 0; }
  .notice-event-hero-title { font-size: 26px; }
  .notice-event-hero-meta { gap: 10px; font-size: 13px; }
}

.notice-detail-secondary-image { margin: 0 0 24px; }
.notice-detail-secondary-image img { width: 100%; max-height: 280px; object-fit: cover; border: 1px solid var(--line); }
.notice-detail-secondary-caption { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; font-family: var(--mono); letter-spacing: 0.06em; }

.notice-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
@media (max-width: 880px) { .notice-detail-grid { grid-template-columns: 1fr; gap: 18px; } }
.notice-detail-body { min-width: 0; }
.notice-detail-attach { margin-top: 28px; padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--line); }
.notice-detail-attach h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 15px; color: var(--navy); }
.notice-detail-attach ul { list-style: none; margin: 0; padding: 0; }
.notice-detail-attach li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.notice-detail-attach li:first-child { border-top: 0; }
.notice-detail-attach a { color: var(--blue); text-decoration: none; flex: 1; min-width: 0; word-break: break-all; }
.notice-detail-attach a:hover { text-decoration: underline; }
.notice-detail-attach-size { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.notice-detail-actions { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }

.notice-detail-event-side { position: sticky; top: 90px; }
@media (max-width: 880px) { .notice-detail-event-side { position: static; } }
.notice-detail-event-side-card { background: #fff; border: 1px solid var(--line); padding: 18px 20px; }
.notice-detail-event-side-card h3 { font-family: var(--serif); font-size: 15px; color: var(--navy); margin: 0 0 12px; }
.notice-detail-event-side-card .r { display: grid; grid-template-columns: 64px 1fr; gap: 6px 10px; padding: 8px 0; border-top: 1px dashed var(--line); align-items: baseline; }
.notice-detail-event-side-card .r:first-of-type { border-top: 0; }
.notice-detail-event-side-card dt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; }
.notice-detail-event-side-card dd { margin: 0; font-size: 13px; color: var(--ink-1); word-break: keep-all; }

/* ════════════════════════════════════════════════════════════════════
 * 강좌 후기 모니터링 (Phase D / 2026-05-12)
 * ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
 * 글로벌 Dialog + Toast — 브라우저 alert/confirm 대체 (2026-05-12)
 * Toss 풍 미니멀 모달 + 우상단 토스트.
 * ════════════════════════════════════════════════════════════════════ */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(12, 35, 64, 0.45);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 20px;
  animation: dialog-backdrop-in .14s ease-out;
}
.dialog-backdrop[data-active="false"] { pointer-events: none; }
@keyframes dialog-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(12, 35, 64, 0.20), 0 4px 12px rgba(12, 35, 64, 0.08);
  padding: 28px 24px 20px;
  animation: dialog-pop-in .18s cubic-bezier(0.32, 0.72, 0.32, 1.16);
  display: flex; flex-direction: column; gap: 14px;
}
@keyframes dialog-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dialog-title {
  margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 800;
  color: var(--navy); letter-spacing: -0.02em; line-height: 1.4;
}
.dialog-message {
  margin: 0; font-size: 14.5px; color: var(--ink-1); line-height: 1.7;
  white-space: pre-wrap; word-break: keep-all;
}
.dialog-tone-danger .dialog-message::before {
  content: '⚠ '; color: var(--red); font-weight: 700;
}
.dialog-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px;
}
.dialog-btn {
  min-width: 88px; padding: 10px 16px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; letter-spacing: -0.01em;
  transition: background-color .12s, border-color .12s, transform .08s;
}
.dialog-btn:active { transform: scale(0.97); }
.dialog-btn-secondary {
  background: #fff; color: var(--ink-2); border-color: var(--line);
}
.dialog-btn-secondary:hover { background: var(--bg-soft); color: var(--navy); border-color: var(--navy); }
.dialog-btn-primary {
  background: var(--navy); color: #fff;
}
.dialog-btn-primary:hover { background: var(--blue-2); }
.dialog-btn-primary.is-danger { background: var(--red); }
.dialog-btn-primary.is-danger:hover { background: #A11B1B; }
.dialog-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dialog-input-row {
  margin-top: 4px;
}
.dialog-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-family: var(--sans); font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink-1); transition: border-color .12s, box-shadow .12s;
}
.dialog-input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(20, 38, 75, 0.12);
}
.dialog-input::placeholder { color: var(--ink-3); }
.dialog-input-textarea { resize: vertical; min-height: 72px; line-height: 1.55; }

@media (max-width: 480px) {
  .dialog-card { padding: 22px 18px 18px; }
  .dialog-btn { min-width: 0; flex: 1; }
  .dialog-actions { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-backdrop, .dialog-card { animation: none; }
}

/* 토스트 — 우상단 슬라이드 */
.toast-stack {
  position: fixed; top: 86px; right: 16px; z-index: 9100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #fff; color: var(--ink-1);
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(12, 35, 64, 0.12);
  font-size: 13.5px; line-height: 1.55; word-break: keep-all;
  animation: toast-in .18s cubic-bezier(0.32, 0.72, 0.32, 1.16);
}
.toast-icon {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.toast-success { border-left-color: var(--green); }
.toast-success .toast-icon { background: var(--green); }
.toast-error   { border-left-color: var(--red); }
.toast-error   .toast-icon { background: var(--red); }
.toast-warn    { border-left-color: #C9A23A; }
.toast-warn    .toast-icon { background: #C9A23A; }
.toast-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast-title { color: var(--navy); font-weight: 700; font-size: 13px; }
.toast-message { color: var(--ink-1); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 480px) {
  .toast-stack { left: 16px; right: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* 홈 V4Board — DB 연동 로딩/빈 상태 + 클릭 가능한 title */
.board-list li .title { cursor: pointer; }
.board-list li a.title:hover { color: var(--blue); text-decoration: underline; }
.board-list-loading, .board-list-empty {
  padding: 14px 6px; font-size: 12.5px; color: var(--ink-3); text-align: center;
  font-style: italic; grid-column: 1 / -1;
}

.admin-reviews-page { padding: 24px 28px; max-width: 1120px; }
.admin-reviews-guide {
  margin: 0 0 16px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--blue);
  font-size: 13px; color: var(--ink-2);
}
.admin-reviews-guide summary {
  padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--navy);
  user-select: none; list-style: none;
}
.admin-reviews-guide summary::-webkit-details-marker { display: none; }
.admin-reviews-guide summary::before { content: '▸ '; color: var(--blue); transition: transform .12s; display: inline-block; }
.admin-reviews-guide[open] summary::before { content: '▾ '; }
.admin-reviews-guide-body { padding: 0 14px 14px; line-height: 1.7; word-break: keep-all; }
.admin-reviews-guide-body strong { color: var(--navy); }

.admin-reviews-status-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.admin-reviews-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; font-family: var(--sans);
  cursor: pointer; transition: all .12s;
}
.admin-reviews-chip:hover { border-color: var(--navy); color: var(--navy); }
.admin-reviews-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.admin-reviews-chip-count { font-family: var(--mono); font-size: 11px; padding: 1px 7px; background: var(--bg-soft); color: var(--ink-3); border-radius: 10px; }
.admin-reviews-chip.active .admin-reviews-chip-count { background: rgba(255,255,255,0.2); color: #fff; }

/* 검색 입력 · 검색 버튼 · 정렬 드롭다운을 한 줄로 정렬 */
.admin-reviews-searchrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  margin-bottom: 12px;
}
.admin-reviews-searchrow-input { flex: 1 1 auto; min-width: 0; }
.admin-reviews-searchrow-btn { flex: 0 0 auto; white-space: nowrap; }
.admin-reviews-searchrow-sort { flex: 0 0 auto; width: 180px; }
@media (max-width: 640px) {
  /* 모바일 — input 만 가로 풀폭, 버튼·드롭다운 다음 줄 */
  .admin-reviews-searchrow { flex-wrap: wrap; }
  .admin-reviews-searchrow-input { flex: 1 1 100%; }
  .admin-reviews-searchrow-sort { width: auto; flex: 1 1 auto; }
}

/* 작성일 범위 행 */
.admin-reviews-daterow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 16px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.admin-reviews-daterow-lbl { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); }
.admin-reviews-daterow input[type="date"] { max-width: 170px; font-family: var(--sans); }
.admin-reviews-daterow-sep { color: var(--ink-3); }
.admin-reviews-daterow-clear { background: transparent; border: 0; color: var(--red); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 6px; font-family: var(--sans); }
.admin-reviews-daterow-clear:hover { text-decoration: underline; }

.admin-reviews-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.admin-review-card { padding: 16px 18px; background: #fff; border: 1px solid var(--line); transition: border-color .12s; }
.admin-review-card.status-auto_hidden { border-left: 3px solid var(--red); background: rgba(216,30,30,0.02); }
.admin-review-card.status-manually_hidden { border-left: 3px solid var(--ink-3); background: var(--bg-soft); }
.admin-review-card.status-reviewed { border-left: 3px solid var(--blue); }
.admin-review-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.admin-review-stars { color: #C9A23A; font-size: 14px; letter-spacing: 1px; }
.admin-review-rating { font-family: var(--mono); font-weight: 700; color: var(--navy); font-size: 13px; }
.admin-review-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.admin-review-author { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; word-break: keep-all; }
.admin-review-author strong { color: var(--navy); }
.admin-review-author-sub { color: var(--ink-3); font-size: 11.5px; margin-left: 6px; }

/* 후기 컨텍스트 행 — 강좌·강사 + 작성자 정보를 라벨링해서 한눈에 식별 */
.admin-review-context {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px; padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.admin-review-context-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; word-break: keep-all; }
.admin-review-context-lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-3); min-width: 48px;
}
.admin-review-context-row strong { color: var(--navy); font-weight: 700; }
.admin-review-context-sub { color: var(--ink-3); font-size: 11.5px; }
.admin-review-context-sub strong { color: var(--ink-2); }
.admin-review-context-empty { color: var(--ink-3); font-style: italic; }
.admin-review-content { font-size: 13.5px; color: var(--ink-1); line-height: 1.7; margin: 0 0 8px; white-space: pre-wrap; word-break: keep-all; }
.admin-review-empty-content { font-size: 12.5px; color: var(--ink-3); font-style: italic; margin: 0 0 8px; }
.admin-review-reason { font-size: 12.5px; color: var(--red); padding: 8px 12px; background: rgba(216,30,30,0.06); border-left: 3px solid var(--red); margin: 8px 0; word-break: keep-all; }
.admin-review-reason strong { font-weight: 700; }
.admin-review-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.instructor-review-summary {
  display: flex; flex-wrap: wrap; gap: 24px; padding: 14px 18px; margin: 0 0 16px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--navy);
  font-size: 13px; color: var(--ink-2);
}
.instructor-review-summary strong { color: var(--navy); font-family: var(--mono); font-size: 18px; padding: 0 4px; }
.instructor-review-summary-lbl { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; margin-right: 6px; }
.instructor-review-summary-sub { font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }

/* ════════════════════════════════════════════════════════════════════
   Admin Dashboard 2026-05-12 — Action items, Pulse, Urgent courses, Recent
   ════════════════════════════════════════════════════════════════════ */
.action-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.action-item {
  display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; color: var(--ink-1);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.action-item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.05); border-color: var(--ink-3); }
.action-item.has-work { border-color: var(--red); background: rgba(216,30,30,0.04); }
.action-item.has-work:hover { background: rgba(216,30,30,0.07); }
.action-item-label { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; letter-spacing: -0.01em; }
.action-item-value { font-size: 30px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; font-family: var(--mono); }
.action-item.has-work .action-item-value { color: var(--red); }
.action-item-hint { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

.pulse-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px;
}
.pulse-card {
  padding: 12px 14px; background: var(--bg-soft); border-radius: 10px; border-left: 3px solid var(--navy);
}
.pulse-card--warn { border-left-color: #C58A05; background: rgba(197, 138, 5, 0.06); }
.pulse-card--mute { border-left-color: var(--line); background: var(--bg-soft); }
.pulse-label { font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.pulse-value { font-size: 22px; font-weight: 700; color: var(--navy); font-family: var(--mono); letter-spacing: -0.02em; }
.pulse-card--warn .pulse-value { color: #B07000; }

.pulse-trend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px;
}
@media (max-width: 720px) { .pulse-trend { grid-template-columns: 1fr; } }
.sparkline {
  padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.sparkline-title { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.sparkline-bars {
  display: flex; align-items: flex-end; justify-content: space-between; height: 80px; gap: 4px;
}
.sparkline-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  position: relative; height: 100%; padding-top: 15px;
}
.sparkline-bar {
  width: 100%; max-width: 28px; border-radius: 3px 3px 0 0; min-height: 2px;
  transition: opacity .15s;
}
.sparkline-bar-wrap:hover .sparkline-bar { opacity: 0.8; }
.sparkline-bar-label { font-size: 9.5px; color: var(--ink-3); margin-top: 4px; font-family: var(--mono); }
.sparkline-bar-value { font-size: 10px; color: var(--ink-2); font-family: var(--mono); position: absolute; top: 0; }

.urgent-courses {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.urgent-course-card {
  display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: var(--ink-1);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.urgent-course-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: var(--navy); }
.urgent-course-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.urgent-course-title { min-width: 0; flex: 1; }
.urgent-course-title strong { display: block; font-size: 13.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urgent-course-title code { font-size: 10.5px; color: var(--ink-3); }
.urgent-course-flags { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.urgent-course-bar { width: 100%; height: 6px; background: var(--bg-soft); border-radius: 3px; margin: 10px 0 6px; overflow: hidden; }
.urgent-course-bar-fill { height: 100%; transition: width .3s; }
.urgent-course-stats { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }

.dashboard-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) { .dashboard-two-col { grid-template-columns: 1fr; } }

.recent-broadcast-list, .recent-member-list, .recent-notice-list {
  list-style: none; margin: 0; padding: 0;
}
.recent-broadcast-row {
  padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
}
.recent-broadcast-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.recent-broadcast-subject { margin: 6px 0 4px; font-size: 13px; font-weight: 600; color: var(--navy); }
.recent-broadcast-stats { display: flex; gap: 12px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; }
.recent-broadcast-stats strong { color: var(--navy); }

.recent-member-row, .recent-notice-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px;
  text-decoration: none; color: var(--ink-1); font-size: 12.5px;
  transition: border-color .12s, background .12s;
}
.recent-member-row:hover, .recent-notice-row:hover { border-color: var(--navy); background: var(--bg-soft); }
.recent-member-row strong { color: var(--navy); }
.recent-member-row code { margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.recent-member-meta { display: flex; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.recent-notice-row { gap: 6px; }
.recent-notice-title { font-size: 12.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   CourseFormWizard 2026-05-13 — 관리자·강사 공용 강좌 개설 wizard
   ════════════════════════════════════════════════════════════════════ */
.course-wizard { display: flex; flex-direction: column; gap: 18px; }

/* Stepper */
.course-wizard .wizard-stepper {
  display: flex; flex-wrap: wrap; gap: 4px;
  list-style: none; margin: 0; padding: 6px; background: var(--bg-soft); border-radius: 10px; border: 1px solid var(--line);
}
.course-wizard .wizard-step-item { flex: 1 1 140px; min-width: 0; }
.course-wizard .wizard-step-item button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--ink-3); font-size: 12.5px; transition: background .12s, color .12s;
}
.course-wizard .wizard-step-item button:hover { background: rgba(20,38,75,0.05); color: var(--navy); }
.course-wizard .wizard-step-item.active button { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.course-wizard .wizard-step-item.done button { color: var(--navy); }
.course-wizard .wizard-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink-2);
  font-size: 11px; font-weight: 700; flex-shrink: 0; font-family: var(--mono);
}
.course-wizard .wizard-step-item.active .wizard-step-num { background: var(--navy); color: #fff; }
.course-wizard .wizard-step-item.done .wizard-step-num { background: var(--navy); color: #fff; }
.course-wizard .wizard-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Body */
.course-wizard .wizard-body { padding: 4px 0 12px; min-height: 320px; }
.course-wizard-pane { display: flex; flex-direction: column; gap: 14px; }
.course-wizard-pane-title { font-size: 16px; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.course-wizard-pane-subtitle { font-size: 13.5px; color: var(--navy); margin: 14px 0 4px; }
.course-wizard-pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wizard-error {
  margin-top: 10px; padding: 10px 12px; background: rgba(216,30,30,0.06); border-left: 3px solid var(--red);
  color: var(--red); font-size: 12.5px; word-break: keep-all;
}
.wizard-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* SubjectPicker — 트랙 사이드바 + 그룹 카드 */
.subject-picker {
  display: grid; grid-template-columns: 260px 1fr; gap: 16px;
}
@media (max-width: 760px) {
  .subject-picker { grid-template-columns: 1fr; }
}
.subject-track-rail { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.subject-rail-title { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 8px; letter-spacing: 0.05em; }
.subject-track-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.subject-rail-btn {
  width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid transparent; background: #fff; border-radius: 8px; cursor: pointer; text-align: left;
  font-size: 12.5px; color: var(--ink-2); transition: border-color .12s, background .12s;
}
.subject-rail-btn:hover { border-color: var(--navy); }
.subject-rail-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.subject-rail-btn small { font-size: 10.5px; color: var(--ink-3); }
.subject-rail-btn.active small { color: rgba(255,255,255,0.7); }
.subject-rail-btn.freeform { border-style: dashed; }

.subject-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.subject-chosen {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-soft); border: 1px solid var(--navy); border-radius: 8px;
}
.subject-chosen--freeform { border-style: dashed; }
.subject-chosen strong { display: block; font-size: 14px; color: var(--navy); }
.subject-chosen small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.subject-search input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.subject-search small { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-3); }

.subject-freeform-form { padding: 16px; background: var(--bg-soft); border-radius: 10px; border: 1px dashed var(--line); display: flex; flex-direction: column; gap: 12px; }

.subject-groups { display: flex; flex-direction: column; gap: 16px; }
.subject-group header { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.subject-group header strong { font-size: 13.5px; color: var(--navy); }
.subject-group header small { font-size: 11.5px; color: var(--ink-3); }
.subject-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
}
.subject-card {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-1); text-align: left; transition: border-color .12s, transform .08s;
}
.subject-card:hover { border-color: var(--navy); transform: translateY(-1px); }
.subject-card.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.subject-card-ord { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.subject-card.active .subject-card-ord { color: rgba(255,255,255,0.7); }
.subject-card-name { flex: 1; min-width: 0; word-break: keep-all; }
.subject-card-check { color: #fff; font-weight: 700; }

/* InstructorsStep */
.instructor-self-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-soft); border-left: 3px solid var(--navy); border-radius: 4px;
}
.instructor-self-row strong { font-size: 13.5px; color: var(--navy); }
.instructor-self-row small { font-size: 11.5px; color: var(--ink-3); }
.instructor-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.instructor-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; font-size: 12px;
}
.instructor-chip.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.instructor-chip em { font-style: normal; font-size: 10.5px; color: var(--ink-3); padding: 1px 6px; background: var(--bg-soft); border-radius: 999px; }
.instructor-chip.primary em { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }
.instructor-chip small { color: var(--ink-3); font-size: 11px; }
.instructor-chip.primary small { color: rgba(255,255,255,0.7); }
.instructor-chip button { border: none; background: transparent; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; color: inherit; }
.instructor-search input { width: 100%; }
.instructor-results { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.instructor-result-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  border: none; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 13px; text-align: left;
}
.instructor-result-row:hover:not(:disabled) { background: var(--bg-soft); }
.instructor-result-row.added { color: var(--ink-3); cursor: not-allowed; }
.instructor-result-row strong { color: var(--navy); }
.instructor-result-row small { color: var(--ink-3); flex: 1; font-size: 11.5px; }
.instructor-result-row em { font-style: normal; font-size: 11px; color: var(--ink-3); }

/* DetailSectionsStep — 빌더 */
.detail-builder { display: flex; flex-direction: column; gap: 16px; }
.detail-section { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.detail-section h4 { margin: 0; font-size: 14px; color: var(--navy); }
.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-list li { display: flex; gap: 6px; align-items: center; }
.detail-list li input { flex: 1; min-width: 0; }
.curriculum-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.curriculum-table th, .curriculum-table td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.curriculum-table th { background: var(--bg-soft); font-size: 11px; color: var(--ink-3); text-align: left; font-weight: 600; }
.curriculum-table input { width: 100%; }
.faq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.faq-list li { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--bg-soft); border-radius: 8px; }
.faq-list li > button { align-self: flex-end; }

/* CurriculumStep — 챕터·차시 트리 */
.curriculum-empty {
  padding: 22px; text-align: center; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 10px;
}
.curriculum-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.curriculum-chapter {
  padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.curriculum-chapter-head { display: flex; align-items: center; gap: 8px; }
.cw-chapter-ord { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding: 4px 8px; background: var(--bg-soft); border-radius: 4px; flex-shrink: 0; }
.cw-chapter-title { flex: 1; min-width: 0; font-weight: 600; }
.curriculum-lessons { list-style: none; margin: 0; padding: 0 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.curriculum-lesson { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bg-soft); border-radius: 8px; border-left: 3px solid var(--line); }
.curriculum-lesson .lesson-row-1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cw-lesson-ord { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; width: 22px; text-align: center; }
.cw-lesson-title { flex: 1; min-width: 160px; }
.lesson-duration { width: 70px; flex-shrink: 0; }
.lesson-preview { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); flex-shrink: 0; }
.lesson-row-2 { display: flex; flex-direction: column; gap: 2px; }
.lesson-video { width: 100%; }
.lesson-video.invalid { border-color: var(--red); }
.lesson-video-warn { color: var(--red); font-size: 11px; }
.lesson-row-3 .lesson-summary { width: 100%; }

/* CompletionStep — 수료 기준 + 검토 */
.completion-policy { padding: 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; }
.completion-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.notice-toggle.is-disabled { opacity: 0.5; cursor: not-allowed; }
.notice-toggle.is-disabled input { cursor: not-allowed; }
.cw-fmt-hint { font-size: 11px; }
.completion-combinator { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.completion-combinator label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* 2026-06-17 — 만족도는 위 조합(OR/AND)과 별개의 독립 필수 조건. 구분선으로 분리. */
.completion-survey-req { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.completion-review { padding: 16px; background: #fff; border: 1px solid var(--navy); border-radius: 10px; margin-top: 14px; }
.review-grid { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.review-grid dt { color: var(--ink-3); font-size: 11.5px; padding-top: 2px; }
.review-grid dd { margin: 0; color: var(--ink-1); word-break: keep-all; }
.review-grid dd code { font-family: var(--mono); font-size: 12px; color: var(--navy); }
.review-grid dd small { color: var(--ink-3); margin-left: 4px; }

/* 강좌 코드 read-only 표시 */
.v4-input--readonly {
  background: var(--bg-soft); color: var(--ink-3); cursor: not-allowed;
  font-family: var(--mono); font-size: 13px;
}

/* ThumbnailField (BasicsStep) */
.thumbnail-field { margin-top: 8px; }
.thumbnail-row {
  display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; padding: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
}
.thumbnail-preview {
  width: 240px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line); background: #fff;
  display: block;
}
.thumbnail-placeholder {
  width: 240px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-3); font-size: 12.5px;
}
.thumbnail-placeholder small { font-size: 11px; margin-top: 4px; }
.thumbnail-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 140px; }
@media (max-width: 540px) {
  .thumbnail-preview, .thumbnail-placeholder { width: 100%; }
  .thumbnail-actions { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   ExamRoundsStep — 시험 강좌 회차·문제 구성 (2026-05-13)
   ════════════════════════════════════════════════════════════════════ */
.exam-rounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.exam-round { padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }
.exam-round-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exam-round-ord { font-family: var(--mono); font-size: 11px; color: #fff; padding: 4px 10px; background: var(--navy); border-radius: 4px; flex-shrink: 0; font-weight: 700; }
.exam-round-title { flex: 1; min-width: 160px; font-weight: 600; }
.exam-round-opts {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-soft); border-radius: 8px;
  font-size: 12px;
}
.exam-round-opts > label { display: inline-flex; align-items: center; gap: 6px; }
.exam-round-opts > label > span { color: var(--ink-3); font-size: 11.5px; }
.exam-round-opts > label > small { color: var(--ink-3); font-size: 11px; }
.exam-round-opts input[type="number"] { width: 64px; padding: 4px 6px; font-size: 12px; }
.exam-round-toggle { gap: 4px !important; }

.exam-round-questions { padding: 8px 0 0; }
.exam-round-questions-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.exam-round-question-list { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.exam-round-question-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; background: var(--bg-soft); border-radius: 6px; }
.exam-round-question-list .qord { font-family: var(--mono); font-size: 11px; color: var(--ink-3); width: 22px; text-align: center; flex-shrink: 0; }
.exam-round-question-list .qtype { font-size: 10.5px; padding: 2px 6px; background: #fff; border: 1px solid var(--line); border-radius: 4px; flex-shrink: 0; color: var(--navy); }
.exam-round-question-list .qtext { flex: 1; min-width: 0; word-break: keep-all; }
.exam-round-question-list .qowner { font-size: 10px; padding: 2px 6px; background: rgba(20,38,75,0.08); border-radius: 4px; color: var(--navy); flex-shrink: 0; }
.exam-round-question-list .qactions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.exam-round-question-list .qactions button {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  width: 24px; height: 24px; border-radius: 4px; font-size: 12px; line-height: 1; color: var(--ink-2);
}
.exam-round-question-list .qactions button:disabled { opacity: 0.4; cursor: not-allowed; }
.exam-round-question-list .qactions button:hover:not(:disabled) { background: var(--bg-soft); }

/* ════════════════════════════════════════════════════════════════════
   QuestionBankPicker · InlineQuestionForm — 모달
   ════════════════════════════════════════════════════════════════════ */
.picker-backdrop {
  position: fixed; inset: 0; z-index: 9050;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.picker-card {
  width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden;
}
.picker-card--form { width: min(560px, 100%); }
.picker-card > header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.picker-card > header h3 { margin: 0; font-size: 15px; color: var(--navy); }
.picker-card > header button { border: none; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink-3); }
.picker-filters { padding: 12px 18px; display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.picker-filters input[type="search"] { flex: 1; }
.picker-filters select { flex: 0 0 130px; }
.picker-results { flex: 1; overflow-y: auto; padding: 0 18px; }
.picker-results ul { list-style: none; margin: 0; padding: 8px 0; }
.picker-results li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.picker-results li:last-child { border-bottom: 0; }
.picker-results li.disabled { opacity: 0.5; }
.picker-results label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.picker-results .qtype { font-size: 10.5px; padding: 2px 6px; background: var(--bg-soft); border-radius: 4px; color: var(--navy); flex-shrink: 0; }
.picker-results .qtext { flex: 1; min-width: 0; word-break: keep-all; }
.picker-results .qowner { font-size: 10px; padding: 2px 6px; background: rgba(20,38,75,0.08); border-radius: 4px; color: var(--navy); flex-shrink: 0; }
.picker-results small { color: var(--ink-3); font-size: 11px; }
.picker-card > footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.picker-body { padding: 14px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.choices-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.choices-edit li { display: flex; align-items: center; gap: 6px; }
.choices-edit li input[type="text"] { flex: 1; min-width: 0; }

/* Picker 탭 */
.picker-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 18px; }
.picker-tabs button {
  padding: 10px 16px; border: none; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.picker-tabs button.active { color: var(--navy); border-bottom-color: var(--navy); }
.picker-tabs button:hover:not(.active) { background: var(--bg-soft); color: var(--ink-1); }

.picker-filters--multi { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 6px; }
@media (max-width: 720px) { .picker-filters--multi { grid-template-columns: 1fr 1fr; } }

.qowner--inst { background: rgba(31,107,63,0.08) !important; color: #1f6b3f !important; }

.picker-results--split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; padding: 0 !important; }
@media (max-width: 720px) { .picker-results--split { grid-template-columns: 1fr; } }
.picker-groups-list { padding: 12px 18px; border-right: 1px solid var(--line); max-height: 50vh; overflow-y: auto; }
.picker-group-preview { padding: 12px 18px; background: var(--bg-soft); max-height: 50vh; overflow-y: auto; }
.picker-group-preview h4 { margin: 0 0 4px; font-size: 14px; color: var(--navy); }
.picker-group-preview p.muted { font-size: 12px; margin: 0 0 10px; }
.group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.group-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.group-row:hover { border-color: var(--navy); }
.group-row.active { border-color: var(--navy); background: rgba(20,38,75,0.04); }
.group-row strong { font-size: 13px; color: var(--navy); }
.group-row small { font-size: 11px; color: var(--ink-3); }
.group-row p { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); }
.group-preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.group-preview-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border-radius: 6px; font-size: 12px; }
.group-preview-list .qord { font-family: var(--mono); width: 22px; flex-shrink: 0; color: var(--ink-3); }
.group-preview-list .qtype { font-size: 10px; padding: 2px 6px; background: var(--bg-soft); border-radius: 4px; flex-shrink: 0; color: var(--navy); }
.group-preview-list .qtext { flex: 1; min-width: 0; word-break: keep-all; }
.group-preview-list small { font-size: 10px; color: var(--ink-3); flex-shrink: 0; }

/* InlineQuestionForm — 묶음 선택 */
.inline-groups { margin-bottom: 8px; }
.inline-groups ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.inline-groups li label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-soft); border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.inline-groups li label strong { color: var(--navy); flex: 1; }
.inline-groups li label small { color: var(--ink-3); }
.inline-group-create { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.inline-group-create input { flex: 1; min-width: 0; }

/* GroupEditor — 묶음 생성/편집 2-pane (선택된 문제 ↔ 문제은행) */
.group-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 960px) { .group-editor-grid { grid-template-columns: 1fr; } }
.group-editor-pane { border: 1px solid var(--line); border-radius: 8px; background: #fff; display: flex; flex-direction: column; min-height: 300px; max-height: 640px; }
.group-editor-pane-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.group-editor-pane-head h3 { font-size: 13px; margin: 0; color: var(--navy); font-weight: 600; }
.group-editor-selected { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.group-editor-selected-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.group-editor-num { font-size: 11px; font-weight: 700; color: var(--ink-3); padding-top: 2px; flex-shrink: 0; }
.group-editor-q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.group-editor-q-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.group-editor-q-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-1); word-break: keep-all; }
.group-editor-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.group-editor-actions button { padding: 2px 8px !important; min-width: 0; font-size: 11px; }
.group-editor-filters { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: center; }
@media (max-width: 720px) { .group-editor-filters { grid-template-columns: 1fr 1fr; } }
.group-editor-bank { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.group-editor-bank li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.group-editor-bank li.is-selected { background: var(--bg-soft); opacity: 0.7; }
.group-editor-bank li > button { flex-shrink: 0; }

/* QBank 필터 — 단건 문제 / 묶음 탭 공용 */
.qbank-filter { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.qbank-filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.qbank-filter-row--more { padding: 8px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 6px; }
.qbank-filter-search { flex: 1 1 240px; min-width: 200px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: #fff; }
.qbank-filter-sel { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: #fff; max-width: 240px; }
.qbank-filter-chk { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.qbank-total { font-size: 11px; margin-left: auto; }

/* Instructor portal shell — topbar/sidebar 보조 클래스 */
.portal-topbar-name { font-size: 12.5px; color: #C9DAEC; }
.portal-nav-icon { width: 16px; color: #A0B4CE; display: inline-flex; align-items: center; justify-content: center; }
.portal-nav-icon.is-active { color: #fff; }

/* Instructor — Approvals 카드 그리드 */
.approval-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.approval-card { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.approval-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.approval-applicant { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--navy); }
.approval-applicant code { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.approval-contact { font-size: 12px; color: var(--ink-2); display: flex; gap: 4px; flex-wrap: wrap; }
.approval-course { padding: 8px 10px; background: var(--bg-soft); border-radius: 6px; }
.approval-course-title { display: flex; align-items: center; gap: 6px; color: var(--navy); cursor: default; }
.approval-course-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.approval-course-empty { font-size: 12px; }
.approval-bulk-btn { margin-left: auto; }
.approval-card-applied-at { font-size: 11px; }
.approval-tab-nav { display: flex; gap: 4px; margin: 12px 0 16px; border-bottom: 2px solid var(--line); }
.approval-tab { background: transparent; border: 0; padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; }
.approval-tab:hover { color: var(--navy); }
.approval-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.approval-waitlist-pos { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 2px 8px; background: var(--navy); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; }
.approval-actions--readonly { padding-top: 8px; border-top: 1px dashed var(--line); }
.approval-waitlist-note { font-size: 11.5px; line-height: 1.5; word-break: keep-all; }
.approval-pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 16px 0 8px; }
.approval-pager-info { font-size: 12.5px; color: var(--ink-2); }
.approval-error-msg { color: var(--red); font-size: 12px; }
.approval-reject-reason { font-size: 12px; color: var(--red); margin: 0; padding: 8px 10px; background: #fef2f2; border-left: 3px solid var(--red); border-radius: 4px; }
.approval-actions { display: flex; gap: 6px; margin-top: 4px; }
.approval-reject { color: var(--red); border-color: var(--red); }

/* Instructor — QnA 답변 미리보기 */
.qna-mgmt-preview { padding: 8px 10px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 6px; font-size: 12.5px; margin-top: 4px; }

/* Instructor — Reviews 강좌별 평균 카드 */
.instructor-review-agg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.instructor-review-agg-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; width: 100%; text-align: left; transition: border-color 0.15s, background 0.15s; }
.instructor-review-agg-card:hover { border-color: var(--navy); }
.instructor-review-agg-card.is-active { border-color: var(--navy); background: rgba(15,42,86,0.06); }
.instructor-review-agg-title { font-size: 13px; font-weight: 600; color: var(--navy); word-break: keep-all; }
.instructor-review-agg-rating { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.instructor-review-agg-stars { color: #C58A05; letter-spacing: -1px; }
.instructor-review-agg-meta { font-size: 11px; color: var(--ink-3); }

/* Instructor — Course list 카드 그리드 */
.instructor-course-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.instructor-course-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.instructor-course-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.instructor-course-title { font-size: 14.5px; font-weight: 700; color: var(--navy); text-decoration: none; line-height: 1.45; word-break: keep-all; }
.instructor-course-title:hover { text-decoration: underline; }
.instructor-course-sub { font-size: 12px; color: var(--ink-2); margin: 0; word-break: keep-all; }
.instructor-course-stats { font-size: 11.5px; color: var(--ink-2); display: flex; gap: 4px; flex-wrap: wrap; }
.instructor-course-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* Instructor — Course sub-page 탭 */
.course-tab-wrap { margin-bottom: 14px; }
.course-tab-head { padding: 0 0 8px; }
.course-tab-title { margin: 6px 0 4px; display: inline; }
.course-tab-code { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.course-tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.course-tab-nav a { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.course-tab-nav a:hover { background: var(--bg-soft); color: var(--ink-1); }
.course-tab-nav a.active { color: var(--navy); border-bottom-color: var(--navy); }

/* 데이터 테이블 카드 wrapper (가로 스크롤 + 둥근 모서리) */
.table-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.table-card > table { margin: 0; }

/* Inquiry — 강좌별 그룹 (instructor + admin 공용) */
.inquiry-section { margin-bottom: 12px; }
.inquiry-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 8px 0 8px; font-weight: 600; }
.inquiry-course-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inquiry-course-group { padding: 0; overflow: hidden; }
.inquiry-course-group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; flex-wrap: wrap; }
.inquiry-course-group-head:hover { background: var(--bg-soft); }
.inquiry-course-group-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inquiry-course-group-title strong { font-size: 14px; color: var(--navy); }
.inquiry-course-group-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.inquiry-course-threads { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--line); padding-top: 10px; }
.inquiry-course-thread { padding: 8px 10px; background: var(--bg-soft); border-radius: 6px; }
.inquiry-course-thread.has-unread { background: #fef3f2; border-left: 3px solid var(--red); }
.inquiry-course-thread a { text-decoration: none; color: inherit; display: block; }
.inquiry-course-thread-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inquiry-course-thread-head strong { font-size: 13px; color: var(--navy); }

/* Inquiry — 즉시 확인 패널 (미답변 + 최근) */
.inquiry-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (max-width: 720px) { .inquiry-spotlight { grid-template-columns: 1fr; } }
.inquiry-spotlight-col { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.inquiry-spotlight-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.inquiry-spotlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.inquiry-spotlight-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; text-decoration: none; color: inherit; border-radius: 4px; transition: background 0.12s; }
.inquiry-spotlight-row:hover { background: var(--bg-soft); }
.inquiry-spotlight-subject { font-size: 12.5px; color: var(--navy); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }

/* Inquiry — 그룹 내부 페이저 */
.inquiry-course-pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 12px 12px; border-top: 1px dashed var(--line); }

/* Course edit — 발행 후 잠금 안내 */
.course-edit-notice { padding: 10px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; font-size: 12.5px; color: #92400e; margin-bottom: 14px; line-height: 1.6; }
.course-edit-notice strong { color: #78350f; }

/* Instructor — 출석 매트릭스 (학생 × 세션) */
.attendance-matrix-wrap { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: auto; max-height: 480px; }
.attendance-matrix { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.attendance-matrix th, .attendance-matrix td { padding: 6px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; white-space: nowrap; }
.attendance-matrix th { background: var(--bg-soft); font-weight: 600; color: var(--navy); position: sticky; top: 0; z-index: 2; }
.attendance-matrix th.sticky-col { left: 0; z-index: 3; min-width: 160px; text-align: left; }
.attendance-matrix td.sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; min-width: 160px; }
.attendance-matrix td.sticky-col strong { display: block; color: var(--navy); font-size: 12.5px; }
.attendance-matrix-ext { font-size: 10px; font-family: var(--mono); display: block; }
.attendance-matrix-session-ord { font-weight: 700; }
.attendance-matrix-session-date { font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.attendance-cell { font-size: 14px; font-weight: 700; width: 36px; height: 28px; padding: 0; }
.attendance-cell--present { background: rgba(31,107,63,0.12); color: #1f6b3f; }
.attendance-cell--late { background: rgba(197,138,5,0.14); color: #92400e; }
.attendance-cell--excused { background: rgba(15,42,86,0.08); color: var(--navy); }
.attendance-cell--absent { background: rgba(216,28,28,0.10); color: #b91c1c; }
.attendance-cell--pending { background: var(--bg-soft); color: var(--ink-3); }
.attendance-matrix-rate { font-size: 12.5px; text-align: right; padding: 6px 10px !important; }
.attendance-matrix-counts { display: block; font-size: 10px; }

.attendance-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); }
.att-tag { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 11px; margin-right: 4px; font-weight: 700; }
.att-tag.att-present { background: rgba(31,107,63,0.12); color: #1f6b3f; }
.att-tag.att-late { background: rgba(197,138,5,0.14); color: #92400e; }
.att-tag.att-excused { background: rgba(15,42,86,0.08); color: var(--navy); }
.att-tag.att-absent { background: rgba(216,28,28,0.10); color: #b91c1c; }
.att-tag.att-pending { background: var(--bg-soft); color: var(--ink-3); }

/* Instructor — 세션 자동 제안 보정 패널 */
.session-suggest-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.session-suggest-row { padding: 8px 10px; }
.session-suggest-fields { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.session-suggest-ord { font-weight: 700; color: var(--navy); min-width: 36px; }

/* Learn 진입 대기 화면 */
.learn-entry-loading { min-height: 40vh; }

/* Instructor — 강좌 공지 (목록/신규/상세) */
.course-notice-list-sub { font-size: 12px; margin: 4px 0 0; }
.course-notice-pinned-wrap { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.course-notice-section-h { font-size: 13px; color: var(--navy); margin: 0 0 8px; font-weight: 700; }
.course-notice-list { margin: 0; padding: 0; }
.course-notice-author { font-size: 11.5px; }
.course-notice-detail { max-width: 920px; }
.course-notice-form-head { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.course-notice-form-title { margin: 4px 0 0; font-size: 20px; color: var(--navy); }
.course-notice-form { display: flex; flex-direction: column; gap: 14px; }
.course-notice-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.course-notice-overview { display: flex; flex-direction: column; gap: 18px; }
.course-notice-overview-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.course-notice-overview-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.course-notice-overview-title { font-size: 22px; color: var(--navy); margin: 4px 0 0; word-break: keep-all; line-height: 1.4; font-weight: 800; }
.course-notice-overview-actions { display: flex; gap: 6px; margin-top: 4px; }
.course-notice-readonly-hint { font-size: 11.5px; margin: 4px 0 0; }
.course-notice-delete-btn { color: var(--red); }
.course-notice-overview-body { font-size: 14px; line-height: 1.7; color: var(--ink-1); }
.course-notice-overview-body p { margin: 0 0 12px; }
.course-notice-overview-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* 마이페이지 — 최근 강좌 공지 위젯 (대시보드) */
.mp-notice-section { margin-bottom: 28px; }
.mp-notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mp-notice-row { border-bottom: 1px dotted var(--line); }
.mp-notice-row:last-child { border-bottom: 0; }
.mp-notice-link { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px; text-decoration: none; color: inherit; transition: background 0.12s ease; }
.mp-notice-link:hover { background: var(--bg-soft); }
.mp-notice-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.mp-notice-date { color: var(--ink-3); }
.mp-notice-title { font-size: 14px; color: var(--navy); font-weight: 700; word-break: keep-all; line-height: 1.4; }
.mp-notice-preview { font-size: 12.5px; color: var(--ink-2); margin: 0; word-break: keep-all; line-height: 1.55; }

/* 마이페이지 — 강좌 공지 페이지 (/mypage/notices) */
.mypage-notice-page-title { font-size: 20px; margin-bottom: 16px; }
.mypage-notice-filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.mypage-notice-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.mypage-notice-search { display: flex; gap: 6px; align-items: center; }
.mypage-notice-search .v4-input { min-width: 220px; }
/* 2026-06-23 — 강좌 필터 드롭다운(칩 나열 대체) */
.mypage-notice-course-select { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; }
.mypage-notice-course-select-label { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.mypage-notice-course-select .v4-input { flex: 1; min-width: 0; max-width: 360px; }
.mypage-notice-course-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: rgba(15, 42, 86, 0.06); color: var(--navy); border-radius: 999px; font-size: 11px; font-weight: 600; word-break: keep-all; }
.mypage-notice-author { font-size: 11.5px; }
.mypage-notice-list { margin: 0 0 18px; }
.mypage-notice-pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 16px 0; }
.mypage-notice-pager-info { font-size: 12.5px; color: var(--ink-2); }

/* 마이페이지 — 강좌 공지 상세 (/mypage/notices/[id]) */
.mypage-notice-detail { display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.mypage-notice-detail-back { display: inline-block; font-size: 12px; }
.mypage-notice-detail-foot { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* Instructor — 세션 페이지 섹션 새로고침 바 (matrix / 회차 목록 헤더 우측) */
.section-head-refresh { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.section-refresh-controls { display: flex; align-items: center; gap: 8px; }
.section-refresh-time { font-size: 11px; color: var(--ink-3); }

/* Instructor — 세션 카드 + 출석부 */
.session-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.session-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.session-qr-block { display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--bg-soft); border-radius: 6px; }
.session-qr-info { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.session-qr-token { font-family: var(--mono); word-break: break-all; font-size: 11px; }
.session-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.session-roster { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.session-roster-table th { font-size: 11.5px; }
.session-roster-table td { font-size: 12px; }
.session-mark-actions { display: flex; gap: 3px; flex-wrap: wrap; }
.session-mark-actions button { padding: 2px 8px !important; font-size: 11px; }

/* Bulk upload — /admin/questions/bulk */
.bulk-stepper { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.bulk-step { padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; }
.bulk-step.is-active { color: var(--navy); border-bottom-color: var(--navy); }
.bulk-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 40px 20px; text-align: center; cursor: pointer; background: var(--bg-soft); transition: background 0.15s, border-color 0.15s; }
.bulk-drop:hover { background: rgba(15,42,86,0.04); border-color: var(--navy); }
.bulk-drop p { margin: 4px 0; }
.bulk-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bulk-preview-row { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; transition: opacity 0.15s; }
.bulk-preview-row.is-excluded { opacity: 0.4; background: var(--bg-soft); }
.bulk-preview-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.bulk-preview-body { display: flex; flex-direction: column; gap: 8px; }
.bulk-preview-choices { list-style: upper-alpha; margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 4px; }
.bulk-preview-choices li { font-size: 13px; line-height: 1.55; padding: 4px 8px; border-radius: 4px; }
.bulk-preview-choices li.is-correct { background: rgba(31,107,63,0.08); color: #1f6b3f; font-weight: 600; }
.bulk-preview-exp { background: var(--bg-soft); padding: 8px 10px; border-radius: 6px; font-size: 12.5px; }

/* QuestionMarkdown — 문제·선택지·해설 마크다운 렌더 */
.qmd { font-size: 13.5px; line-height: 1.65; word-break: keep-all; color: var(--ink-1); }
.qmd p { margin: 0 0 6px; }
.qmd p:last-child { margin-bottom: 0; }
.qmd--inline { display: inline; }
.qmd--inline p { display: inline; margin: 0; }
/* 인라인 코드 — 밝은 배경 + 자홍 글자로 가독성 ↑ */
.qmd code { background: #fef3f2; padding: 1px 6px; border-radius: 3px; font-size: 0.92em; font-family: var(--sans); color: #c2185b; border: 1px solid #fbcfe8; }
/* 코드 블록 — github-dark 테마와 동일한 배경/패딩으로 토큰 색이 의도대로 보이도록 */
.qmd pre { background: #0d1117; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 12.5px; line-height: 1.6; margin: 8px 0; border: 1px solid #21262d; }
.qmd pre code { background: transparent !important; padding: 0; font-size: inherit; border: none; color: #e6edf3; }
.qmd ul, .qmd ol { margin: 4px 0; padding-left: 22px; }
.qmd li { margin: 2px 0; }
.qmd blockquote { border-left: 3px solid var(--line); margin: 6px 0; padding: 4px 10px; color: var(--ink-2); background: var(--bg-soft); }
.qmd table { border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.qmd table th, .qmd table td { border: 1px solid var(--line); padding: 4px 8px; }
.qmd table th { background: var(--bg-soft); }
.qmd .katex { font-size: 1em; }
.qmd .katex-display { margin: 6px 0; overflow-x: auto; overflow-y: hidden; }