@charset "utf-8";
/* ============================================================
   WORKNEST — 과목 상세(목차) 화면
   ============================================================ */

/* ── 과목 헤더 ────────────────────────────────────────────── */
/* 바탕을 칠하지 않는 밝은 머리 띠 (2026-09-29, 배경 그라데이션 모두 제거 — 사이트 주인).
   예전의 어두운 바탕 · 번지는 빛을 뺐으므로 글자도 어두운 색으로 둔다. */
.course-hero {
  position: relative; overflow: hidden;
  /* 이 화면의 헤더는 흰 배경(불투명)이라 겹치지 않는다. 보통 여백만 준다. */
  padding: 44px 0 56px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}

.course-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 230px 1fr; gap: 42px; align-items: center;
  margin-top: 26px;
}
.course-hero-cover {
  border-radius: 4px 10px 10px 4px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(16,24,40,.18);
  transform: perspective(1000px) rotateY(-11deg);
  position: relative;
}
.course-hero-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 1;
  background: rgba(0,0,0,.28);   /* 책등 — 한 가지 색 띠 */
}
.course-hero h1 { margin: 12px 0 12px; font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.7rem); }
.course-hero .lead { color: var(--gray); max-width: 560px; }

.course-stats {
  display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 24px;
}
.course-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .84rem; color: var(--gray);
}
.course-stat b { color: var(--ink); font-weight: 700; }

/* 열람 권한 안내 띠(.access-note)는 여러 화면이 함께 쓰므로 base.css 에 있다. */

/* ── 목차 ─────────────────────────────────────────────────── */
.toc { margin-top: 40px; }
.toc-part {
  display: flex; align-items: center; gap: 14px;
  margin: 34px 0 14px; font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; color: var(--gray-2); text-transform: uppercase;
}
.toc-part::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.toc-part:first-child { margin-top: 0; }

.toc-list { display: grid; gap: 10px; }

.toc-row {
  position: relative;
  display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: center;
  padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease), background-color .22s var(--ease);
}
a.toc-row:hover {
  transform: translateX(4px);
  border-color: var(--tint-line); box-shadow: var(--shadow-2);
}
a.toc-row:hover .toc-title { color: var(--blue); }

.toc-code {
  display: block; text-align: left;
  font-size: .82rem; font-weight: 700; color: var(--blue);
  letter-spacing: -.01em;
}
.toc-title { display: block; text-align: left; font-size: 1.02rem; font-weight: 700; transition: color .2s var(--ease); }
.toc-sub { display: block; text-align: left; font-size: .85rem; color: var(--gray-2); margin-top: 3px; }

.toc-side { display: flex; align-items: center; gap: 10px; }
.toc-arrow { color: var(--gray-3); transition: transform .22s var(--ease), color .22s var(--ease); }
a.toc-row:hover .toc-arrow { color: var(--blue); transform: translateX(3px); }

/* 잠긴 항목 */
.toc-row.is-locked { background: var(--bg-soft); border-style: dashed; }
.toc-row.is-locked .toc-title { color: var(--gray-2); }
.toc-row.is-locked .toc-code  { color: var(--gray-3); }
.toc-row.is-locked:hover { border-color: #CBD5E1; }

/* 준비 중 항목 */
.toc-row.is-soon { opacity: .62; }

.lock-ico { width: 15px; height: 15px; color: var(--gray-3); flex-shrink: 0; }

/* 잠긴 줄을 누르면 나오는 말풍선 */
.toc-row.is-locked { cursor: pointer; }
.lock-tip {
  position: absolute; right: 20px; top: calc(100% - 4px); z-index: 10;
  width: max-content; max-width: 280px;
  padding: 11px 15px; border-radius: var(--r-sm);
  background: var(--navy-2); color: #fff; font-size: .82rem; line-height: 1.55;
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.lock-tip a { color: var(--on-dark-accent); text-decoration: underline; }
.toc-row.show-tip .lock-tip { opacity: 1; transform: none; pointer-events: auto; }

/* ── 목차 · 앨범형 카드(파트로 묶인 장) ───────────────────────
   3칸 고정폭 그리드. 1120px(=.wrap 안쪽 폭) = 360px × 3 + 20px × 2.
   fr 대신 고정 px 폭을 써서, 한 파트에 장이 2개뿐이어도 카드가
   늘어나지 않고 같은 크기를 유지한다. */
.toc-grid {
  display: grid; grid-template-columns: repeat(3, 360px); gap: 20px;
}

.toc-card {
  display: flex; flex-direction: column; align-items: stretch;
  width: 360px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease), background-color .22s var(--ease);
}
a.toc-card:hover { transform: translateY(-4px); }

/* 마우스를 올리면 카드 전체 영역에 배경색 */
.toc-card:hover { background: var(--blue-soft); }
.toc-card.is-locked:hover,
.toc-card.is-soon:hover { background: var(--bg-mute); }

.toc-card-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
}
.toc-card-body .toc-side { margin-top: 10px; justify-content: flex-start; }

/* ── 목차 · 넓은 카드(파트 없는 장 — 프롤로그 등) ─────────────── */
.toc-feature-list { display: grid; gap: 10px; }

.toc-feature {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 20px; align-items: center;
}

.toc-feature-icon {
  display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: var(--r);
  background: var(--brand); color: #fff;
}
.toc-feature-icon svg { width: 44px; height: 44px; }
.toc-feature.is-locked .toc-feature-icon,
.toc-feature.is-soon .toc-feature-icon { background: var(--bg-mute); color: var(--gray-3); }

/* 마우스를 올리면 카드 전체 영역에 배경색 */
.toc-feature:hover { background: var(--blue-soft); }
.toc-feature.is-locked:hover,
.toc-feature.is-soon:hover { background: var(--bg-mute); }

.toc-feature-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }

/* ── 진행률 ───────────────────────────────────────────────── */
.progress-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 20px 24px; margin-top: 32px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
}
.progress-card .p-text { flex: 1; min-width: 200px; font-size: .9rem; color: var(--gray); }
.progress-card .p-text b { color: var(--ink); }
.progress-bar { flex: 1 1 220px; height: 8px; border-radius: 8px; background: var(--bg-mute); overflow: hidden; }
.progress-bar i { display: block; height: 100%; border-radius: 8px; background: var(--brand); transition: width .9s var(--ease); }

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .course-hero-grid { grid-template-columns: 150px 1fr; gap: 24px; align-items: start; }

  .toc-grid { grid-template-columns: repeat(2, 1fr); }
  .toc-card { width: auto; }
}
@media (max-width: 640px) {
  .course-hero { padding: 30px 0 34px; }
  .course-hero-grid { grid-template-columns: 116px 1fr; gap: 18px; margin-top: 18px; }
  .course-hero-cover { transform: none; }
  .course-hero h1 { margin: 8px 0 8px; }
  .course-stats { gap: 6px 8px; margin-top: 16px; }
  .course-stat { padding: 5px 12px; font-size: .78rem; }

  .access-note { padding: 15px 17px; gap: 11px; font-size: .88rem; }
  .access-note p { min-width: 0; }

  .toc { margin-top: 28px; }
  .toc-part { margin: 26px 0 11px; font-size: .76rem; }
  .toc-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px; }
  .toc-code { grid-column: 1 / -1; }
  .toc-title { font-size: .96rem; }
  .toc-sub { font-size: .8rem; }
  .toc-side { gap: 7px; }
  .lock-tip { right: 8px; left: 8px; max-width: none; }

  .toc-grid { grid-template-columns: 1fr; gap: 10px; }
  .toc-card { width: auto; padding: 14px; }

  .toc-feature { grid-template-columns: 70px 1fr; grid-template-areas: "icon text" "side side"; gap: 6px 12px; padding: 14px; }
  .toc-feature-icon { grid-area: icon; width: 70px; height: 70px; }
  .toc-feature-icon svg { width: 30px; height: 30px; }
  .toc-feature-text { grid-area: text; }
  .toc-feature .toc-side { grid-area: side; }

  .progress-card { padding: 16px 18px; gap: 12px; border-radius: var(--r); }
  .progress-card .p-text { font-size: .86rem; }
}

/* ══════════════════════════════════════════════════════════════
   과정 상세 = 영상 목록 (2026-09 개편)
   전자책 목차 자리에 유튜브 영상이 들어온다.
   ══════════════════════════════════════════════════════════════ */

.cv-stage { margin: 26px 0 34px; }

/* 영상 틀 — 16:9 를 지키며 너비에 맞춘다 */
.cv-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg, 14px); overflow: hidden;
  background: #0B0C0D;
}
.cv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cv-title { margin: 20px 0 0; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 800; }
.cv-sub   { margin: 7px 0 0; color: var(--gray-2); }
.cv-body  { margin-top: 18px; line-height: 1.85; }
.cv-body p + p { margin-top: 14px; }

/* 목록 한 줄 */
.cv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.cv-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md, 11px);
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
a.cv-row:hover { border-color: var(--brand-300); background: var(--brand-50); }
.cv-row.is-now { border-color: var(--brand); background: var(--brand-50); }
.cv-row.is-locked { background: #FAFBFC; color: var(--gray-2); }

.cv-no {
  flex: 0 0 auto; width: 26px; text-align: center;
  font-weight: 700; color: var(--gray-2); font-variant-numeric: tabular-nums;
}
.cv-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-txt b { font-weight: 700; }
.cv-txt span { font-size: .88rem; color: var(--gray-2); }
.cv-tag { flex: 0 0 auto; }

.cv-note { margin-top: 30px; }
/* 안내 상자의 제목 — 제목 순서(H1 → H2) 때문에 h2 로 두었다. 크기는 예전 h4 그대로 */
.cv-note h2 { font-size: 1.03rem; }

@media (max-width: 760px) {
  .cv-row { padding: 12px 13px; gap: 10px; }
  .cv-no  { width: 20px; }
  .cv-txt span { display: none; }
}

/* ── 과정 소개 (서브타이틀 여러 줄 + 웹에디터 글) ────────────────
   글 모양 자체는 css/editor.css 의 .rich 가 맡는다. 여기서는 자리만 잡는다. */
.cr-lead + .cr-lead { margin-top: 4px; }

.cr-body {
  max-width: 780px;
  margin: 6px 0 34px;
  padding: 24px 26px;
  border: 1px solid var(--line-soft, #EEF1F4);
  border-radius: var(--r-lg, 14px);
  background: #fff;
}

@media (max-width: 760px) {
  .cr-body { padding: 18px 16px; margin-bottom: 26px; }
}