/* 리스닝 미션 유튜브 4단계 플레이어 (js/listening-yt.js) — 학생 리스닝(index.php)·코치 리스닝 영상 탭(coach/index.php) 공용.
   2026-11-02 student.css 에서 옮겼다. 배속 버튼도 여기(.lyt-speed-*) — 코치 화면엔 student.css 가 없다. */
.lyt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 10px; }
.lyt-pill { padding: 3px 10px; border-radius: 999px; background: #E0F7FA; color: #00838F; font-weight: 800; font-size: 12px; }
.lyt-step-title { font-size: 16px; font-weight: 800; color: var(--slate-800); }
.lyt-guide { flex-basis: 100%; font-size: var(--font-size-sm); font-weight: 700; color: var(--slate-500); }
.lyt-player { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; container-type: inline-size; }
.lyt-frame, .lyt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lyt-tap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.lyt-pause { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; gap: 7px; }
/* 일시정지 막대는 글자(❚❚)가 아니라 도형으로 — 폰트에 없으면 네모로 깨진다(2026-10-27 dev-j 캡처) */
.lyt-pause i { display: block; width: 7px; height: 24px; border-radius: 2px; background: #fff; }
.lyt-caption { position: absolute; left: 4%; right: 4%; bottom: 6%; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .15em; }
/* 기존 Vimeo 영상에 입혀 있던 자막처럼 — 상자 없이 굵은 흰 글씨 + 검은 테두리, 영상 폭에 맞춰 커진다(사용자 요청 2026-10-27) */
.lyt-caption span { max-width: 100%; color: #fff; font-weight: 800; font-size: 16px; font-size: clamp(16px, 4cqw, 34px); line-height: 1.25; text-align: center; white-space: pre-line;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 2px 6px rgba(0,0,0,.85); }
.lyt-caption .lyt-cap-ko { color: #fff; font-weight: 600; font-size: 15px; font-size: clamp(15px, 3.6cqw, 30px); text-shadow: none; background: rgba(0,0,0,.55); padding: .08em .45em; border-radius: .35em; }
/* 4단계 따라하기 — 기존 영상처럼 작은 소리 + 연한 자막 + 「👇 따라하기」 */
.lyt-caption .lyt-cap-tag { color: #fff; font-size: 15px; font-size: clamp(15px, 3.6cqw, 30px); }
/* 따라하기 문장 안 진행(재생 바는 문장 끝에 멈춰 있으니 여기서 보여 준다) */
.lyt-cap-prog { display: block; width: 4.5em; height: 4px; margin: .25em auto 0; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.lyt-cap-prog b { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.lyt-caption.is-shadow .lyt-cap-en { opacity: .6; }
.lyt-caption.is-shadow .lyt-cap-ko { opacity: .7; }
.lyt-silent { position: absolute; top: 8px; right: 8px; z-index: 3; pointer-events: none; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 800; }
.lyt-cover { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; background: #0F172A; color: #fff; font-weight: 800; font-size: var(--font-size-sm); text-align: center; border: 0; font-family: inherit; }
.lyt-cover-btn { cursor: pointer; font-size: 34px; background: rgba(15,23,42,.92); }
.lyt-cover-btn span { font-size: 15px; }
/* 끝나면 유튜브 추천 화면이 뜨므로 완전히 덮는다(반투명이면 비친다) */
.lyt-end { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, #E0F7FA, #B2EBF2); color: #006064; text-align: center; }
.lyt-end b { font-size: 19px; font-weight: 800; }
.lyt-end span { font-size: var(--font-size-sm); font-weight: 700; }
/* 영상 가운데 「다음 스텝」 큰 버튼 */
.lyt-next { margin-top: 6px; border: 0; border-radius: 999px; padding: 12px 26px; background: #00ACC1; color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0,131,143,.35); animation: lyt-pop 1.4s ease-in-out infinite; }
.lyt-end .lyt-again { margin-top: 2px; color: #00838F; }
@keyframes lyt-pop { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .lyt-next { animation: none; } }
/* 크게 보기 — 플레이어 통째로 화면을 채운다(네이티브 전체 화면이 안 되는 아이폰도 같은 모양) */
.lyt-badge, .lyt-full-close { display: none; }
.lyt-player.is-full { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; padding: 0; border-radius: 0; }
.lyt-player.is-full .lyt-frame { inset: auto; top: 50%; left: 50%; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); transform: translate(-50%, -50%); }
/* 자막은 화면이 아니라 영상 안쪽 아래에(세로 화면이면 영상이 가운데 작게 있다) */
.lyt-player.is-full .lyt-caption { left: calc((100vw - min(100vw, 177.78vh)) / 2 + min(100vw, 177.78vh) * .04); right: calc((100vw - min(100vw, 177.78vh)) / 2 + min(100vw, 177.78vh) * .04);
  bottom: calc((100vh - min(56.25vw, 100vh)) / 2 + min(56.25vw, 100vh) * .06); }
.lyt-player.is-full .lyt-badge { display: block; position: absolute; top: 14px; left: 14px; z-index: 5; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0F172A; font-weight: 800; font-size: 15px; pointer-events: none; }
.lyt-player.is-full .lyt-full-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; z-index: 6; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; cursor: pointer; }
html.lyt-noscroll, html.lyt-noscroll body { overflow: hidden; }
/* 크게 보기 아래쪽 — 재생 바·1초/10초 버튼(js setFull 이 옮겨 넣는다). 영상 탭(.lyt-tap)보다 위 */
.lyt-full-ctrl { display: none; }
.lyt-player.is-full .lyt-full-ctrl { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 18px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
/* 자막이 아래 버튼에 가리지 않게 — 버튼 줄(약 92px) 위로 */
.lyt-player.is-full .lyt-caption { bottom: max(calc(var(--lyt-ctl-h, 100px) + 6px), calc((100vh - min(56.25vw, 100vh)) / 2 + min(56.25vw, 100vh) * .06)); }
/* 재생 바 — 누르거나 끌어서 옮긴다(2026-11-03). 손가락으로 잡기 쉽게 위아래 여백까지 누르는 칸.
   연한 칸(b)=옮겨 갈 수 있는 곳(이번 단계에서 들은 데까지), 진한 칸(i)=지금 위치 */
.lyt-seek { padding: 10px 0; margin: 2px 0; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.lyt-seek.is-off { cursor: default; }
.lyt-seek:focus-visible { outline: 2px solid #00ACC1; outline-offset: 2px; border-radius: 6px; }
.lyt-prog { position: relative; height: 6px; border-radius: 3px; background: var(--slate-100, #F1F5F9); }
.lyt-prog b, .lyt-prog i { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; }
.lyt-prog b { background: #B2EBF2; }
.lyt-prog i { background: #26C6DA; transition: width .25s linear; }
.lyt-thumb { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #00ACC1; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: left .25s linear; }
.lyt-seek.is-off .lyt-thumb { display: none; }
.lyt-seek.is-drag .lyt-prog i, .lyt-seek.is-drag .lyt-thumb { transition: none; }
.lyt-seek.is-drag .lyt-thumb { transform: scale(1.25); }
.lyt-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lyt-step-btn { width: 100%; min-height: 74px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border: 1.5px solid var(--slate-200, #E2E8F0); border-radius: 12px; background: #fff; text-align: left; font-family: inherit; color: var(--slate-400); cursor: default; }
.lyt-step-no { font-size: 11px; font-weight: 800; }
.lyt-step-label { font-size: 13px; font-weight: 800; line-height: 1.3; }
.lyt-step-state { margin-top: auto; font-size: 12px; font-weight: 800; }
/* 아래 단계 표시 — 끝낸 단계(done)는 눌러서 다시 보기, 안 한 단계(locked)는 잠김. 넘어가기는 영상 가운데 버튼 */
.lyt-step-btn[data-state="current"], .lyt-step-btn[data-state="ready"] { border-color: #00ACC1; color: #00838F; background: #F3FDFE; box-shadow: 0 0 0 2px rgba(0,172,193,.25); }
.lyt-step-btn[data-state="done"] { border-color: #A5D6A7; background: #E8F5E9; color: #2E7D32; cursor: pointer; }
.lyt-step-btn[data-state="next"] { border-style: dashed; color: var(--slate-500); cursor: pointer; }
.lyt-step-btn[data-state="locked"] { opacity: .6; }
.lyt-step-btn:disabled { cursor: default; }
.lyt-foot { margin-top: 10px; text-align: center; }
.lyt-again { border: 0; background: none; color: var(--slate-500); font: inherit; font-weight: 800; font-size: var(--font-size-sm); cursor: pointer; padding: 6px; }
/* 코치 화면 — 단계는 잠김 없이 아무 데나(free), 끝나면 자동으로 다음 단계 */
.lyt-step-btn[data-state="free"] { cursor: pointer; color: var(--slate-500, #64748B); }
.lyt-step-btn[data-state="free"]:hover { border-color: #80DEEA; }

/* ── 재생 바 아래 버튼 두 줄(2026-11-03 배치 정리 — 아이들용이라 숨기지 않고 펼쳐 두되 줄·모양을 맞춘다)
   위 줄 = 옮기기( -10초 · -1초 · ⏯ · +1초 · +10초 ), 아래 줄 = 설정(배속 한 덩어리 · 소리 켜기/끄기 · 크게 보기).
   플레이어 칸이 넓으면(≥640, 코치 PC·전체 화면 가로) 한 줄로 이어 붙인다. 버튼 높이는 모두 38px. */
.lyt-times { display: flex; justify-content: space-between; margin: -4px 0 2px; font-size: 12px; font-weight: 800; color: var(--slate-500, #64748B); font-variant-numeric: tabular-nums; }
.lyt-ctl-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.lyt-skip { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; gap: 8px; }
.lyt-skip-btn { min-width: 0; height: 38px; padding: 0 2px; border: 1.5px solid var(--slate-200, #E2E8F0); border-radius: 10px; background: #fff; color: #00838F; font: inherit; font-size: var(--font-size-sm, 13px); font-weight: 800; white-space: nowrap; cursor: pointer; }
.lyt-skip-btn:disabled { cursor: default; color: var(--slate-300, #CBD5E1); border-color: var(--slate-100, #F1F5F9); }
.lyt-play { width: 52px; height: 52px; border: 0; border-radius: 50%; background: #00ACC1; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,131,143,.3); }
.lyt-play svg { width: 26px; height: 26px; }
.lyt-play[data-state="paused"] .lyt-ic-pause, .lyt-play[data-state="playing"] .lyt-ic-play { display: none; }
.lyt-play:disabled { background: var(--slate-200, #E2E8F0); box-shadow: none; cursor: default; }
.lyt-controls { display: flex; align-items: center; gap: 8px; }
/* 배속 = 붙어 있는 버튼 한 덩어리 */
.lyt-speed-group { flex: 1; display: flex; height: 38px; border: 1.5px solid var(--slate-200, var(--jr-navy-soft, #E2E8F0)); border-radius: 10px; overflow: hidden; background: var(--jr-white, #fff); }
.lyt-speed-btn { flex: 1; min-width: 0; border: 0; border-left: 1.5px solid var(--slate-200, #E2E8F0); background: transparent; color: var(--slate-400, #94A3B8); font: inherit; font-weight: 800; font-size: var(--font-size-sm, 13px); cursor: pointer; white-space: nowrap; }
.lyt-speed-btn:first-child { border-left: 0; }
.lyt-speed-btn.active { background: var(--jr-sky-bg-50, #E3F2FD); color: var(--jr-sky-deep, #1976D2); }
/* 소리·크게 보기 = 같은 크기 아이콘 버튼 */
.lyt-icon-btn { flex: none; width: 44px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid var(--slate-200, #E2E8F0); border-radius: 10px; background: #fff; color: var(--slate-500, #64748B); font-size: 17px; cursor: pointer; }
.lyt-icon-btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 340px) { .lyt-skip { gap: 5px; } .lyt-skip-btn, .lyt-speed-btn { font-size: 12px; } .lyt-play { width: 46px; height: 46px; } }
/* 한 줄 배치는 화면 폭이 아니라 플레이어 칸 폭으로 — 학생 화면은 태블릿에서도 가운데 좁은 칸이라
   화면 폭(@media)으로 켜면 버튼이 찌그러졌다(2026-11-03 운영 캡처). 칸 폭을 모르는 옛 브라우저는 두 줄 그대로. */
.lyt-ctl { container-type: inline-size; }
@container (min-width: 640px) {
  .lyt-ctl-rows { flex-direction: row; align-items: center; gap: 16px; }
  .lyt-skip { flex: 1; max-width: 400px; }
  .lyt-controls { margin-left: auto; }
  .lyt-speed-group { flex: none; width: 190px; }
}
/* 크게 보기 아래쪽 띠 — 같은 두 줄(넓으면 한 줄)을 어두운 바탕 위에 */
.lyt-full-ctrl .lyt-ctl { max-width: 900px; margin: 0 auto; }
.lyt-full-ctrl .lyt-prog { background: rgba(255,255,255,.28); }
.lyt-full-ctrl .lyt-prog b { background: rgba(178,235,242,.6); }
.lyt-full-ctrl .lyt-times { color: #fff; }
.lyt-full-ctrl .lyt-ctl-rows { gap: 8px 16px; }
.lyt-full-ctrl .lyt-skip-btn, .lyt-full-ctrl .lyt-icon-btn, .lyt-full-ctrl .lyt-speed-group { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.35); color: #fff; }
.lyt-full-ctrl .lyt-speed-btn { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); }
.lyt-full-ctrl .lyt-speed-btn.active { background: rgba(255,255,255,.9); color: #0F172A; }
.lyt-full-ctrl .lyt-skip-btn:disabled { color: rgba(255,255,255,.35); border-color: rgba(255,255,255,.15); }