/* 크기는 rem(높이 600에서 16px, 900에서 20px). 1300x600에서 페이지 스크롤 없이 들어간다.
   색과 효과는 design-ref 기준: 틀은 무채색, 강조는 파랑 하나, 그림자와 그라디언트 없음. */
:root {
  --brand: #2962ff;
  --brand-d: #1e4fd8;
  --brand-l: #eef2ff;
  --ink: #111111;
  --sub: #505050;
  --muted: #767676;
  --line: #e5e5ec;
  --line-l: #f1f1f5;
  --bg: #f7f7fb;
  --card: #ffffff;
  --blk: #ffe9a8;
  --blk-ink: #5c3f00;
  --done: #2e7d32;
  --r: 0.75rem;
  --r-s: 0.375rem;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.025em;
  color: var(--ink);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.err { padding: 2rem; font-size: 1.2rem; }

/* 블록 이름과 화살표 */
.blk {
  display: inline;
  background: var(--blk);
  color: var(--blk-ink);
  font-weight: 700;
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.arr { color: var(--brand); font-weight: 800; }

/* 진행 막대 */
.bar { display: block; height: 0.25rem; background: var(--line-l); border-radius: 1rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--done); }

/* ---------- 수업 고르기 ---------- */
.home { padding: 2rem 2.5rem; gap: 1.5rem; }
.home-head h1 { margin: 0; font-size: 1.75rem; line-height: 1.3; font-weight: 700; }
.home-head p { margin: 0.375rem 0 0; color: var(--sub); font-size: 1rem; }
.cgrid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: 1rem;
}
.ccard {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.ccard:hover { border-color: var(--brand); }
.cthumb { flex: 1; min-height: 6rem; background: var(--line-l); }
.cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cinfo { padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ceditor { color: var(--brand); font-weight: 700; font-size: 0.8125rem; }
.cname { font-weight: 700; font-size: 1.25rem; line-height: 1.35; }
.cabout { color: var(--sub); font-size: 0.875rem; line-height: 1.45; }
.cwho { color: var(--muted); font-size: 0.8125rem; margin-top: 0.25rem; }

/* ---------- 위 막대(수업 첫 화면, 차시 소개에만. 단계 화면에는 없다) ---------- */
.top {
  flex: none;
  height: 2.75rem;
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0 0.625rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  white-space: nowrap;
}
.crumb-lesson { font-weight: 700; margin-left: 0.375rem; }

/* ---------- 수업 첫 화면: 차시 격자 ---------- */
.lgrid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 1rem; padding: 1.25rem 1.5rem 1.5rem;
}
.lcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}
.lcard:hover { border-color: var(--brand); }
.lthumb { flex: 1; min-height: 0; background: var(--line-l); }
.lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linfo { padding: 0.625rem 0.875rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.lnum { color: var(--brand); font-weight: 700; font-size: 0.8125rem; }
.lname { font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
.lmeta { color: var(--muted); font-size: 0.8125rem; display: flex; gap: 0.5rem; }
.lmeta em { font-style: normal; color: var(--done); font-weight: 700; }
.linfo .bar { margin-top: 0.375rem; }

/* ---------- 차시 소개 ---------- */
.intro-body { flex: 1; min-height: 0; display: flex; gap: 1.5rem; padding: 1.25rem 1.5rem; }
.intro-video {
  flex: 1.5; min-width: 0; position: relative;
  background: #111; border-radius: var(--r); overflow: hidden;
  display: grid; place-items: center;
}
.intro-video video, .intro-video img { width: 100%; height: 100%; object-fit: contain; }
.tag {
  position: absolute; left: 0.75rem; top: 0.75rem;
  background: rgba(17, 17, 17, 0.72); color: #fff;
  padding: 0.25rem 0.625rem; border-radius: var(--r-s); font-weight: 600; font-size: 0.8125rem;
}
.intro-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.intro-side h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; font-weight: 700; display: flex; align-items: baseline; gap: 0.5rem; }
.intro-side h2 span { color: var(--brand); font-size: 0.875em; }
.start-note { margin: 0; color: var(--sub); font-size: 0.9375rem; }
.clist-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.clist { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; }
.more-hint {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.125rem;
  background: linear-gradient(rgba(247, 247, 251, 0), var(--bg) 75%);
  color: var(--brand); font-size: 0.8125rem; font-weight: 700;
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.clist-wrap.more .more-hint { opacity: 1; }
.clist a {
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 0.5rem 0.75rem;
}
.clist a:hover { border-color: var(--brand); }
.cnum {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--line-l); color: var(--ink); font-weight: 700;
  display: grid; place-items: center; font-size: 0.8125rem;
}
.ctext { flex: 1; min-width: 0; font-weight: 600; }
.goal-text { display: block; font-weight: 400; color: var(--muted); font-size: 0.85em; }
.ccount { flex: none; color: var(--muted); font-size: 0.8125rem; }
.extra { flex: none; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.extra h3 { margin: 0; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 0.375rem; }
.extra h3 .ic { color: var(--muted); width: 1em; height: 1em; }
.extra p { margin: 0.25rem 0 0; color: var(--sub); font-size: 0.8125rem; line-height: 1.5; }
.dlinks { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dlinks a { padding: 0.125rem 0.5rem; border-radius: var(--r-s); background: var(--card); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.dlinks a:hover { border-color: var(--brand); color: var(--brand); }
.dlinks .bgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; width: 100%; }
.dlinks .bgroup b { font-size: 0.8125rem; color: var(--ink); margin-right: 0.25rem; }

/* 학생 판: 끝점 고치기는 교사 판에서만 */
.student .endmark, .student .trim-copy { display: none !important; }
.top .top-open { margin-left: auto; height: 2.25rem; padding: 0 0.875rem; gap: 0.375rem; }
.top .me { margin-left: auto; padding: 0.25rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); font-weight: 700; }
.gate { align-items: center; justify-content: center; padding: 1rem; }
.gbox { width: min(26rem, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.gbox.wide { width: min(40rem, 100%); }
.gbox .btn.big { flex: none; }
.gbox h1 { margin: 0; font-size: 1.5rem; }
.gbox p { margin: 0; color: var(--sub); line-height: 1.5; }
.gbox input { font: inherit; font-size: 1.25rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.gbox input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.gmsg { min-height: 1.2em; color: #c62828 !important; font-weight: 600; }
.gme a { font-weight: 700; color: var(--brand); }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: 0.5rem; }
.nbtn { height: 3.5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); font-size: 1.25rem; font-weight: 700; }
.nbtn:hover, .nbtn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }
.cover { position: fixed; inset: 0; z-index: 50; background: rgba(17, 17, 17, 0.88); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.cover div { display: flex; flex-direction: column; gap: 0.5rem; }
.cover b { font-size: 3rem; }
.cover span { font-size: 1.5rem; }

/* 교사 판: 학생 화면 창, 번호별 진행 */
.dlg-back { position: fixed; inset: 0; z-index: 40; background: rgba(17, 17, 17, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dlg { width: min(34rem, 100%); max-height: 100%; overflow: auto; background: var(--card); border-radius: var(--r); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg h2 { margin: 0; font-size: 1.25rem; }
.dlg h2 small { font-size: 0.875rem; color: var(--muted); font-weight: 500; margin-left: 0.375rem; }
.dlg .st, .prog .st { margin: 0; color: var(--sub); line-height: 1.5; }
.dlg .lbl { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.25rem; }
.picks .lbl { grid-column: 1 / -1; }
.pick { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.pick input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.pick small { color: var(--muted); }
.dlg-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.codef { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.875rem; }
.codef label { color: var(--muted); }
.codef input { flex: 1; min-width: 10rem; font: inherit; padding: 0.375rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.codef .btn { height: 2.25rem; padding: 0 0.75rem; }
.codef span { color: var(--sub); }
.dlg-btns .btn:not(.big) { height: 2.5rem; padding: 0 0.875rem; }
.btn.on { border-color: #c62828; color: #c62828; }
.btn:disabled { opacity: 0.45; cursor: default; }
.seg2 { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; align-self: flex-start; }
.seg2 button { padding: 0.375rem 0.75rem; background: var(--card); }
.seg2 button.on { background: var(--brand); color: #fff; }
.prog .top { gap: 0.5rem; }
.prog .top .seg2 { margin-left: auto; align-self: center; }
.prog .top .btn { height: 2.25rem; padding: 0 0.75rem; }
.prog .st { padding: 0.5rem 1rem 0; }
.pgrid { flex: 1; overflow: auto; padding: 0.75rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; align-content: start; }
.pcell { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0.5rem 0.625rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.pcell.none { opacity: 0.55; }
.pcell.stale { background: #fff8e1; border-color: #f2c94c; }
.pnum { font-size: 1.125rem; font-weight: 800; }
.pat { color: var(--sub); line-height: 1.35; min-height: 2.2em; }
.pat b { color: var(--ink); }
.pbar { display: flex; align-items: center; gap: 0.375rem; }
.pbar .bar { flex: 1; }
.pt { display: flex; justify-content: space-between; color: var(--muted); }
.pre { color: var(--muted); text-decoration: underline; font-size: 0.75rem; }
.intro-btns { display: flex; gap: 0.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-s); font-weight: 700;
}
.btn:hover { border-color: var(--sub); }
.btn.big { flex: 1; height: 3rem; padding: 0 1rem; font-size: 1.0625rem; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-d); }
.btn small { font-weight: 500; opacity: 0.85; font-size: 0.8125rem; }

/* ---------- 단계 화면 ----------
   위 막대 없음. 왼쪽 칸(회색)과 아래 한 줄(회색)이 ㄴ자로 영상(흰색)을 감싼다. 칸 사이는 줄 대신 바탕색으로 나눈다.
   1300x600(1rem 16px): 아래 한 줄 3.75rem(60px), 영상 칸 1028x540 → 영상 960x540. */
.step { flex-direction: row; background: var(--bg); }

/* 왼쪽 칸 */
.side {
  flex: none; width: 17rem; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.side-head {
  flex: none; height: 3.25rem;
  display: flex; align-items: center; gap: 0.125rem;
  padding: 0 0.375rem;
}
.tbtn {
  flex: none; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-s); color: var(--sub);
}
.tbtn:hover { background: var(--line-l); color: var(--ink); }
.side-head .lesson {
  flex: 1; min-width: 0; padding: 0 0.25rem;
  font-weight: 700; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 덩어리 번호 칩: 늘 7칸 격자라 차시마다 칩 크기가 같다. 세 글자 넘는 이름(가져오기)은 두 칸 */
.chips {
  flex: none;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem;
  padding: 0 0.75rem;
}
.chip {
  height: 2.5rem; border-radius: var(--r-s);
  background: var(--card); color: var(--sub);
  font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.chip.word { font-size: 0.875rem; white-space: nowrap; }
.chip.wide { grid-column: span 2; }
.chip:hover { color: var(--ink); }
.chip.done { color: var(--done); }
.chip.view { outline: 2px solid var(--brand); outline-offset: -2px; color: var(--brand); }
.chip.cur { background: var(--brand); color: #fff; outline: 0; }

.chunk-head {
  flex: none; display: flex; flex-direction: column;
  padding: 0.75rem 1rem 0.5rem;
}
.chunk-title, .chunk-goal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chunk-title { font-weight: 700; font-size: 1rem; line-height: 1.4; }
.chunk-goal { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.chunk-goal:empty { display: none; }

/* 지금 보는 덩어리의 단계만 */
.slist {
  flex: 1; min-height: 0; position: relative;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0.5rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.grp { display: none; padding-bottom: 0.5rem; }
.grp.show { display: block; }
.slist ol { list-style: none; margin: 0; padding: 0; }
.sub {
  margin: 0.5rem 0 0.125rem; padding: 0 0.5rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--muted); line-height: 1.4;
}
.sub:first-child { margin-top: 0; }
.sub .goal-text { display: inline; margin-left: 0.375rem; font-size: 1em; font-weight: 400; }
.slist a {
  display: flex; gap: 0.5rem; align-items: flex-start;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--r-s);
  font-size: 0.875rem; line-height: 1.45; color: var(--sub);
}
.slist a:hover { background: var(--line-l); color: var(--ink); }
.slist a.cur { background: var(--card); color: var(--ink); font-weight: 600; }
.snum { flex: none; min-width: 1.75rem; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.8125rem; padding-top: 0.0625rem; }
.slist a.cur .snum { color: var(--brand); font-weight: 700; }
.stext { flex: 1; min-width: 0; }
.snote { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.sdone { flex: none; color: var(--done); visibility: hidden; }
.sdone .ic { width: 1.1em; height: 1.1em; }
.slist a.done .sdone { visibility: visible; }

/* 꼬리: 개수와 도구 */
.side-foot {
  flex: none; display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
}
.pos { display: flex; align-items: center; gap: 0.625rem; height: 1.25rem; padding: 0 0.25rem; }
.count { flex: none; font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.pos .bar { flex: 1; background: var(--line); }
.pos .bar i { background: var(--sub); transition: width 0.2s; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.tool {
  height: 2.5rem; min-width: 0;
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0 0.625rem; border-radius: var(--r-s);
  background: var(--card); color: var(--sub);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.tool .ic { width: 1.15em; height: 1.15em; }
.tool:hover { color: var(--ink); }
.tool.on { background: var(--brand-l); color: var(--brand); }
/* 멈추기는 가장 자주 쓰는 도구라 한 줄을 다 쓴다 */
.tool.pause { grid-column: 1 / -1; justify-content: center; }
.tool.code { grid-column: 1 / -1; justify-content: center; }
.tool.code.glow { background: var(--brand); color: #fff; }

/* 전체 코드 창: 장면 탭, 오브젝트마다 이름과 덩어리 그림 */
.code-back { z-index: 45; }
.codev { width: min(72rem, 100%); height: 100%; background: var(--card); border-radius: var(--r); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.codev h2 { margin: 0; font-size: 1.25rem; }
.codev h2 small { font-size: 0.875rem; color: var(--muted); font-weight: 500; margin-left: 0.375rem; }
.codev .lbl { margin: 0; color: var(--sub); font-size: 0.875rem; }
.codev-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 0.25rem; }
.cobj { border: 1px solid var(--line); border-radius: var(--r-s); }
.cobj h3 { margin: 0; padding: 0.375rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 1rem; position: sticky; top: 0; z-index: 1; }
.cobj h3 small { color: var(--muted); font-weight: 500; font-size: 0.8125rem; }
.othumb { width: 2rem; height: 2rem; object-fit: contain; flex: none; }
.cthreads { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.5rem; padding: 0.75rem; }
.cth { max-width: 100%; height: auto; cursor: zoom-in; }
.cth.big { max-width: none; cursor: zoom-out; }
.code-link { margin-left: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; color: var(--brand); font-weight: 700; font-size: 0.875rem; }
.code-link .ic { width: 1em; height: 1em; }
.tool:disabled { opacity: 0.4; cursor: default; }
.tool:disabled:hover { color: var(--sub); }

/* 목록을 접으면 아이콘 기둥만 남는다(뒤로, 목록 펴기, 도구, 개수) */
.no-side .side { width: 3.5rem; }
.no-side .side-head { flex-direction: column; height: auto; padding: 0.5rem 0; gap: 0.25rem; }
.no-side .side-head .lesson, .no-side .chips, .no-side .chunk-head, .no-side .slist, .no-side .pos .bar { display: none; }
.no-side .side-foot { margin-top: auto; align-items: center; padding: 0.5rem 0 0.75rem; }
.no-side .tools { grid-template-columns: 2.5rem; gap: 0.25rem; }
.no-side .tool { width: 2.5rem; padding: 0; justify-content: center; }
.no-side .tool span { display: none; }
.no-side .pos { padding: 0; justify-content: center; }
.no-side .count { font-size: 0.6875rem; }

/* 가운데: 영상과 아래 한 줄 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 영상 칸은 16:9 높이에서 시작해 높이가 모자라면 줄어든다(1300x600). 높이가 남으면(1600x900, 1920x1080)
   아래 한 줄이 그만큼 커지고 동작 글도 커진다. 영상과 아래 한 줄 사이에 빈 띠가 생기지 않는다 */
.stage {
  flex: 0 1 auto; aspect-ratio: 16 / 9; min-height: 0; position: relative;
  background: var(--bg); overflow: hidden;
  cursor: zoom-in;
}
.stage.novideo { cursor: default; background: var(--card); }
.stage.zoomed { cursor: zoom-out; background: #fff; }
.zoomer { position: absolute; inset: 0; transition: transform 0.25s ease-out; }
.stage video, .stage .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
/* 갈래의 정답 코드 그림: 흰 바탕 가운데, 둘레 여백 */
.stage .still.code { padding: 1.5rem; background: #fff; object-position: center; }
.stage .off { visibility: hidden; }
/* 안내 카드: 영상도 그림도 없는 단계. 이어지는 손 단계를 차례 목록으로, 지금 단계는 파랑 바탕 */
.hands {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 1.5rem 2rem;
}
.hands.off { display: none; }
.hcard { width: 100%; max-width: 46rem; margin: auto; }
.hhead {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--muted); font-weight: 600; font-size: 0.9375rem;
  padding: 0 0.25rem 0.75rem;
}
.hhead .ic { width: 1.5rem; height: 1.5rem; }
.hlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.hlist a {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.75rem 1rem; border-radius: var(--r);
  background: var(--bg); color: var(--sub);
  font-size: 1.25rem; font-weight: 600; line-height: 1.4;
}
.hlist a:hover { color: var(--ink); }
.hlist a.cur { background: var(--brand-l); color: var(--ink); font-size: 1.5rem; font-weight: 700; }
.hnum {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--muted); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hlist a.cur .hnum { background: var(--brand); color: #fff; }
.htext { flex: 1; min-width: 0; }
.hnote { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--sub); margin-top: 0.125rem; }
.hdone { flex: none; color: var(--done); visibility: hidden; }
.hdone .ic { width: 1.5rem; height: 1.5rem; }
.hlist a.done .hdone { visibility: visible; }
.zoom-hint {
  position: absolute; right: 0.625rem; bottom: 0.625rem;
  background: rgba(17, 17, 17, 0.72); color: #fff;
  padding: 0.25rem 0.625rem; border-radius: var(--r-s); font-size: 0.8125rem; pointer-events: none;
}
.stage.hint-done .zoom-hint, .stage.novideo .zoom-hint { display: none; }
.loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(17, 17, 17, 0.72); color: #fff; padding: 0.375rem 0.875rem; border-radius: var(--r-s);
  font-size: 0.875rem; opacity: 0; transition: opacity 0.2s 0.3s; pointer-events: none;
}
.loading.show { opacity: 1; }
.loading.failed { pointer-events: auto; display: flex; align-items: center; gap: 0.625rem; }
.loading .retry {
  font: inherit; color: #111; background: #fff; border: 0; border-radius: var(--r-s);
  padding: 0.25rem 0.625rem; cursor: pointer;
}
.paused-tag {
  position: absolute; left: 0.625rem; top: 0.625rem;
  display: none; align-items: center; gap: 0.375rem;
  background: rgba(17, 17, 17, 0.72); color: #fff;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem; border-radius: var(--r-s);
  font-size: 0.9375rem; font-weight: 700; pointer-events: none;
}
.paused-tag .ic { width: 1.1em; height: 1.1em; }
.paused .paused-tag { display: flex; }

/* 재생바: 영상 바로 아래. 줄은 얇고 누르는 자리는 넉넉하게(펜, 손가락). 영상 없는 단계는 자리만 남긴다 */
.scrub {
  flex: none; height: 2rem;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
  user-select: none;
}
.scrub.off > * { visibility: hidden; }
.tm { flex: none; min-width: 2.25rem; }
.tm:last-child { text-align: right; }
.track {
  flex: 1; height: 100%; position: relative;
  display: flex; align-items: center;
  cursor: pointer; touch-action: none;
}
.rail { flex: 1; height: 0.3125rem; border-radius: 1rem; background: var(--line); overflow: hidden; transition: height 0.15s; }
.fill { display: block; height: 100%; background: var(--brand); }
.knob {
  position: absolute; top: 50%; width: 0.875rem; height: 0.875rem; margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%; background: var(--card); border: 0.1875rem solid var(--brand);
  transform: scale(0.85); transition: transform 0.15s;
}
.track:hover .rail, .scrub.drag .rail { height: 0.5rem; }
.track:hover .knob, .scrub.drag-seek .knob { transform: scale(1.15); }
.scrub.drag { color: var(--ink); }
.rail { position: relative; }
/* 끝점 뒤(반복에서 빠지는 부분)는 빗금 */
.cut {
  position: absolute; top: 0; bottom: 0; right: 0;
  background: repeating-linear-gradient(-45deg, var(--line) 0 0.25rem, var(--card) 0.25rem 0.5rem);
}
/* 끝점 깃발: 세로 막대와 위 깃발. 누르는 자리는 막대보다 넓다 */
.endmark {
  position: absolute; top: 0.125rem; bottom: 0.125rem; width: 1.5rem; margin-left: -0.75rem;
  cursor: ew-resize; touch-action: none;
}
.endmark::before {
  content: ""; position: absolute; left: calc(50% - 0.125rem); top: 0; bottom: 0; width: 0.25rem;
  border-radius: 0.125rem; background: var(--muted);
}
.endmark::after {
  content: ""; position: absolute; left: calc(50% - 0.6875rem); top: 0; width: 0.5625rem; height: 0.5rem;
  border-radius: 0.125rem 0 0 0.125rem; background: var(--muted);
}
.scrub:not(.trimmed) .endmark { opacity: 0.45; }
.endmark:hover, .scrub.drag-end .endmark, .scrub.trimmed .endmark { opacity: 1; }
.scrub.trimmed .endmark::before, .scrub.trimmed .endmark::after,
.scrub.drag-end .endmark::before, .scrub.drag-end .endmark::after { background: var(--brand-d); }
.scrub.trimmed .tm:last-child, .scrub.drag-end .tm:last-child { color: var(--brand); }
/* 이 기기에서 고친 끝점이 있을 때만: 복사해서 채팅에 붙이면 고정한다 */
.trim-copy {
  height: 2.25rem; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  border-radius: var(--r-s); background: var(--brand-l); color: var(--brand);
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.trim-copy[hidden], .no-side .trim-copy { display: none; }
.trim-copy.copied { background: var(--done); color: #fff; }

/* 아래 한 줄: 이전 | 번호와 동작 글 | 다음. 3.75rem에서 남는 높이만큼 커지고, 글은 두 줄까지.
   글자는 줄 높이를 따라 1.25rem에서 2rem까지(cqh = 아래 한 줄 높이의 1%) */
.card {
  flex: 1 0 3.75rem; container-type: size;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.375rem 0.5rem;
}
.nav {
  flex: none; width: 6rem; height: 3rem;
  display: flex; align-items: center; justify-content: center; gap: 0.25rem;
  border-radius: var(--r-s); font-weight: 700; font-size: 1.0625rem;
  background: var(--card); color: var(--sub);
  user-select: none;
}
.nav .ic { width: 1.3em; height: 1.3em; }
.nav:hover { color: var(--ink); }
.nav.next { width: 8rem; background: var(--brand); color: #fff; }
.nav.next:hover { background: var(--brand-d); }
.nav.next.finish { background: var(--done); }
.say {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 0.75rem;
  font-size: clamp(1.25rem, 22cqh, 2rem); font-weight: 600; line-height: 1.25;
}
.num {
  flex: none; min-width: 2.25em; height: 2.25em; padding: 0 0.375em;
  border-radius: 1.125em; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 0.8em; font-weight: 700; font-variant-numeric: tabular-nums;
}
.say-body { min-width: 0; display: flex; flex-direction: column; }
.text {
  min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.say.tight { font-size: clamp(1.0625rem, 18cqh, 1.75rem); }
.say.has-note .text { -webkit-line-clamp: 1; }
.note {
  font-size: max(0.875rem, 0.7em); font-weight: 500; color: var(--sub); line-height: 1.35; margin-top: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note:empty { display: none; }

/* 세로로 돌린 화면(768x1366): 영상(16:9)과 아래 한 줄이 위, 목록 칸이 그 아래 */
@media (max-aspect-ratio: 1/1) {
  .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  .home { padding: 1.5rem; }
  .intro-body { flex-direction: column; }
  .intro-video { flex: none; aspect-ratio: 16 / 9; }

  .step { flex-direction: column; }
  .main { order: 1; flex: none; }
  .stage { flex: none; aspect-ratio: 16 / 9; }
  .side { order: 2; width: auto; flex: 1; }
  .chips { grid-template-columns: repeat(auto-fill, 3rem); }
  .tools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tool { justify-content: center; }
  .tool.pause, .tool.code { grid-column: auto; }

  /* 목록을 접으면 아래쪽에 아이콘 한 줄 */
  .no-side .main { flex: 1; min-height: 0; }
  .no-side .stage { flex: 1; aspect-ratio: auto; }
  .no-side .card { flex-grow: 0; }
  .no-side .side { flex: none; width: auto; flex-direction: row; align-items: center; padding: 0 0.5rem; }
  .no-side .side-head { flex-direction: row; padding: 0.375rem 0; }
  .no-side .side-foot { margin: 0 0 0 auto; flex-direction: row-reverse; align-items: center; gap: 0.75rem; padding: 0.375rem 0; }
  .no-side .tools { grid-template-columns: repeat(6, 2.5rem); }
  .no-side .count { font-size: 0.875rem; }
}

/* 휴대폰(학생이 아이북 옆에 두고 영상을 볼 때): 동작 글을 한 줄로 따로 두고 줄이지 않는다. 도구는 아이콘만 */
@media (max-width: 600px) {
  .card { flex: none; container-type: normal; flex-wrap: wrap; row-gap: 0.5rem; }
  .card .say { order: -1; flex: 1 1 100%; height: auto; font-size: 1.125rem; }
  .card .text { -webkit-line-clamp: 5; }
  .card .note { white-space: normal; }
  .card .nav { flex: 1 1 0; width: auto; }
  .tool span { display: none; }
  .zoom-hint { display: none; }
}