/*
 * 멤버십 라이브 클래스 재생 페이지(inc/live-player.php · js/live-player.js)
 * 2026-10-13 운영자 3단계 시안 3 「유데미 강의실」(claude.ai 아티팩트 DdV5BcGvyQG89Y3a1egj9c · db picks/player3):
 *   짙은 윗줄(클래스 이름 · 진행률 · 주소 복사) · 검은 영상 칸 · 영상 아래 탭(개요 · 질문 · 클래스 소개) · 오른쪽 「강의 내용」.
 *   10/14 운영자: 탭과 칸은 가운데 한 줄(--lr-col) · 「예제 파일」 탭은 개요로 합침 · 「클래스 소개」는 상세로 가지 않고 탭 아래 칸(.mlR-about).
 *   시안과 다른 점: 목차 줄의 체크 칸은 뺐다(수강 기록이 회차 단위라 — 다 본 회차는 묶음 머리에 체크) · 지금 목차는 회색 면 대신 초록 글자.
 *   사이트 규칙과 다른 점(운영자가 알고 고름): 넓은 어두운 면 — 윗줄(--gray-900)과 영상 칸(검정, 영상 화면).
 *   영상 첫 화면의 어둡게 덮기는 그라데이션이 아닌 고른 반투명 한 겹이다. 질문 칸 모양은 css/membership.css .msh .msh-qa-* 그대로(감싸개에 msh).
 */
.mlR { --lr-side: 380px; --lr-top: 61px; --lr-col: 920px; color: var(--gray-900); /* --lr-col = 탭·칸이 가운데 서는 폭(10/14 운영자 「탭 누르면 콘텐츠 가운데」) */ /* --lr-top = PC 에서 위에 붙어 있는 머리글 높이(#oppadu-nav sticky 60~61px) — 강의 내용 칸이 그 아래 붙는다 */ font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.mlR a { color: inherit; text-decoration: none; }
.mlR a:hover,
.mlR a:focus,
.mlR a:active { color: inherit; } /* 부모 테마 a:hover 파랑을 막는다 */
.mlR :where(p, h1, ol) { margin: 0; }
.mlR button { font: inherit; }
.mlR [hidden] { display: none; }

@media (min-width: 783px) {
	body.admin-bar .mlR { --lr-top: 93px; } /* 관리 막대(32px)가 머리글 위에 붙는다 */
}
/* 머리글 메뉴 숨김(10/14 운영자 「클래스 페이지에서는 네비게이션 숨겨볼까요」) — 이 화면 윗줄(.mlR-top · ‹ 뒤로)이 대신한다.
   폰도 같다: 휴대폰 틀 윗줄(= 같은 머리글)과 검색 줄을 숨기고, 아래 탭 줄은 inc/live-player.php 가 끈다(oppadu_omc_screen). 강의 내용 칸이 붙는 자리(--lr-top)도 머리글 없이 */
html body.mlR-page .oppadu-nav,
html body.mlR-page .oppadu-nav2-msearch { display: none; }
body.mlR-page .mlR { --lr-top: 0px; }
@media (min-width: 783px) {
	body.admin-bar.mlR-page .mlR { --lr-top: 32px; }
}

/* 윗줄 */
.mlR-top { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px 0 12px; background: var(--gray-900); color: var(--surface-white); }
.mlR .mlR-back { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; color: var(--surface-white); }
.mlR .mlR-back:hover { background: color-mix(in srgb, var(--surface-white) 12%, transparent); color: var(--surface-white); }
.mlR .mlR-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 14px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--surface-white) 22%, transparent); font-size: 16px; font-weight: 700; color: var(--surface-white); }
.mlR .mlR-title:hover { color: var(--surface-white); text-decoration: underline; text-underline-offset: 3px; }
.mlR-prog { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; white-space: nowrap; color: color-mix(in srgb, var(--surface-white) 82%, transparent); }
.mlR-prog b { color: var(--surface-white); font-variant-numeric: tabular-nums; }
.mlR-ring-bg { stroke: color-mix(in srgb, var(--surface-white) 22%, transparent); }
.mlR-ring-fg { stroke: var(--brand-bright); stroke-linecap: round; transition: stroke-dasharray .3s ease; }
.mlR-share { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-left: auto; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--surface-white); color: var(--surface-white); font-size: 14px; font-weight: 700; cursor: pointer; }
.mlR-prog + .mlR-share { margin-left: 12px; }
.mlR-share:hover { background: color-mix(in srgb, var(--surface-white) 12%, transparent); }
.mlR-share:focus-visible,
.mlR .mlR-back:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 2px; }
/* 오른쪽 끝 = 머리글(css/custom-navigation.css .oppadu-nav__avatar · __login)과 같은 자리·같은 동작(10/14 운영자 「멤버십 클래스에서는 우측 상단 프로필 아이콘이 없어서 불편 — 프로필 아이콘만 추가」).
   로그인 = 아바타(완전 원형 허용 자리) → 내 대시보드 · 새 알림·진행 중 챌린지면 빨간 점 / 손님 = 로그인(채운 단추) */
.mlR .mlR-me { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 12px; border-radius: 6px; }
.mlR .mlR-me img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface-white) 28%, transparent); }
.mlR .mlR-me:hover img { box-shadow: 0 0 0 2px var(--surface-white); }
.mlR .mlR-me:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 2px; }
.mlR-me-dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 2px var(--gray-900); pointer-events: none; }
.mlR .mlR-login { flex: none; display: inline-flex; align-items: center; height: 34px; margin-left: 12px; padding: 0 14px; border-radius: 6px; background: var(--brand-action); color: var(--surface-white); font-size: 14px; font-weight: 700; white-space: nowrap; }
.mlR .mlR-login:hover { background: var(--brand-hover); color: var(--surface-white); }
.mlR .mlR-login:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 2px; }

/* 방 — 왼쪽 무대(영상 · 탭 · 칸) + 오른쪽 강의 내용 */
.mlR-room { display: grid; grid-template-columns: minmax(0, 1fr) var(--lr-side); align-items: start; }
.mlR-room.is-wide { grid-template-columns: minmax(0, 1fr); }
.mlR-room.is-wide .mlR-side { display: none; }
.mlR-stage { min-width: 0; }

/* 영상 칸 — 첫 화면(클래스 그림 + 재생 단추) · 유튜브 · 잠금 */
.mlR-v { background: #000; }
.mlR-vbox { position: relative; width: min(100%, calc((100vh - var(--lr-top) - 130px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; background: #000; }
.mlR-yt,
.mlR-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mlR-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: var(--surface-white); cursor: pointer; }
.mlR-poster img,
.mlR-lockbg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.mlR-dim { position: absolute; inset: 0; background: rgb(0 0 0 / .42); }
.mlR-cap { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--surface-white); }
.mlR-cap em { font-style: normal; font-size: 14px; font-weight: 600; opacity: .85; }
.mlR-cap b { font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.mlR-cap i { font-style: normal; font-size: 14px; opacity: .8; font-variant-numeric: tabular-nums; }
.mlR-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: color-mix(in srgb, var(--surface-white) 92%, transparent); color: var(--gray-900); transform: translate(-50%, -50%); transition: transform .15s ease; }
.mlR-play svg { margin-left: 4px; fill: currentColor; }
.mlR-poster:hover .mlR-play { transform: translate(-50%, -50%) scale(1.06); }
.mlR-poster:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: -3px; }
.mlR-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; background: rgb(0 0 0 / .7); text-align: center; color: var(--surface-white); }
.mlR-lock-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 8px; background: color-mix(in srgb, var(--surface-white) 14%, transparent); color: var(--brand-bright); }
.mlR .mlR-lock-need { font-size: 13px; font-weight: 700; color: var(--brand-bright); }
.mlR .mlR-lock-h { font-size: 21px; line-height: 1.4; font-weight: 700; }
.mlR .mlR-lock-p { font-size: 14px; color: color-mix(in srgb, var(--surface-white) 85%, transparent); }
.mlR .mlR-lock-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.mlR .mlR-lock-go,
.mlR .mlR-lock-more { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 700; color: var(--surface-white); }
.mlR .mlR-lock-go { background: var(--brand-action); }
.mlR .mlR-lock-go:hover { background: var(--brand-hover); color: var(--surface-white); }
.mlR .mlR-lock-more { background: color-mix(in srgb, var(--surface-white) 16%, transparent); }
.mlR .mlR-lock-more:hover { background: color-mix(in srgb, var(--surface-white) 24%, transparent); color: var(--surface-white); }
/* 영상 아래 안내 한 줄 — 연동한 회원에게 「이 브라우저의 유튜브가 연동한 채널로 로그인돼 있나」(10/13 운영자 · 유튜브로 보는 회차에만).
   라이브 글 플레이어 아래 줄(css/live-page.css .lp-video-help)과 같은 말 · 같은 모양(어두운 띠 안 · 가운데 · 흐린 글자) */
.mlR-help { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px 10px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--text-on-dark-muted); }
.mlR-help svg { flex: none; }

/* 탭 — 줄(밑선)은 무대 끝까지, 탭 글자는 아래 칸 글자 왼쪽 끝에 맞춘다(칸 글자 폭 = --lr-col 이 가운데 · 칸 여백 28 은 그 바깥이라 (100% − 폭) / 2 와 28 중 큰 쪽) */
.mlR-tabs { display: flex; align-items: center; gap: 26px; padding: 0 max(28px, calc((100% - var(--lr-col)) / 2)); border-bottom: 1px solid var(--gray-200); }
.mlR .mlR-tab { flex: none; margin: 0; padding: 16px 0 14px; border: 0; border-radius: 0; background: none; font-size: 15px; font-weight: 700; color: var(--gray-500); cursor: pointer; }
.mlR .mlR-tab:hover { color: var(--gray-900); }
.mlR .mlR-tab.is-on { color: var(--gray-900); box-shadow: inset 0 -2px 0 var(--gray-900); }
.mlR .mlR-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mlR .mlR-tab--list { display: none; } /* 「강의 내용」 탭 — 폰·태블릿에서만(아래 「태블릿·폰」, 10/14 운영자 「강의 내용을 탭으로」). 넓은 화면은 오른쪽 칸 */
.mlR-open { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-left: auto; padding: 0 12px; border: 0; border-radius: 6px; background: var(--surface-white); box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--gray-900); font-size: 14px; font-weight: 600; cursor: pointer; }
.mlR-open:hover { background: var(--gray-50); }

/* 칸 — 가운데(그 전엔 왼쪽에 붙어 넓은 화면에서 오른쪽이 비었다). max-width 는 글자 폭이다(여백 28 은 밖에 붙는다) */
.mlR-pane { max-width: var(--lr-col); margin-inline: auto; padding: 26px 28px 64px; }
.mlR-ovh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mlR .mlR-h { font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--gray-900); }
.mlR-prem { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--gray-900); color: var(--surface-white); font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.5; vertical-align: 3px; }
.mlR-done { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 6px; background: var(--surface-white); box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--gray-900); font-size: 14px; font-weight: 600; cursor: pointer; }
.mlR-done svg { color: var(--gray-400); }
.mlR-done:hover { background: var(--gray-50); }
.mlR-done.is-done { background: var(--color-success-bg); box-shadow: none; color: var(--color-success-text); }
.mlR-done.is-done svg { color: var(--color-success); }
.mlR-done:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mlR .mlR-done-note { flex: none; padding-top: 6px; font-size: 13px; color: var(--text-muted); }
.mlR .mlR-sum { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--gray-700); }
.mlR-nums { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.mlR-nums span { display: flex; flex-direction: column; }
.mlR-nums b { font-size: 16px; font-variant-numeric: tabular-nums; }
.mlR-nums i { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.mlR-files { margin-top: 12px; }
.mlR-file { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.mlR-ext { flex: none; min-width: 46px; padding: 3px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gray-900); font-size: 11px; font-weight: 800; line-height: 1.5; text-align: center; }
.mlR-fn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mlR-fn b { font-size: 14px; font-weight: 600; }
.mlR-fn i { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.mlR .mlR-fdl { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--primary); }
.mlR .mlR-fdl:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.mlR-flock { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); }
.mlR .mlR-nofile,
.mlR .mlR-wait { padding: 12px 0; font-size: 14px; color: var(--text-muted); }
.mlR .mlR-navs { display: flex; gap: 12px; margin-top: 24px; }
.mlR .mlR-nav { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--gray-700); }
.mlR .mlR-nav:hover { color: var(--gray-900); text-decoration: underline; text-underline-offset: 3px; }
.mlR .mlR-nav.is-next { margin-left: auto; }
.mlR .mlR-qa-in { margin: 0; padding: 0; border-top: 0; }
/* 클래스 소개 칸(10/14 운영자 「클래스 소개 누르면 다른 페이지로 가지 않고 그 밑으로 쭉」) — 상세(css/live-classes.css 4절)와 같은 내용을 이 화면 글자 크기로.
   숫자 줄은 개요 칸의 .mlR-nums 그대로. 별 = 클래스 별점 색 #F5A623(css/live-classes.css 와 같은 값 — 사이트 규칙 「별점은 코너 기존 색」) */
.mlR .mlR-aeye { font-size: 13px; font-weight: 700; color: var(--primary); }
.mlR .mlR-ah { margin: 4px 0 0; font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--gray-900); }
.mlR .mlR-asub { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--gray-700); }
.mlR .mlR-ameta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.mlR-ameta > span { display: inline-flex; align-items: center; gap: 4px; }
.mlR-ameta b { color: var(--gray-900); font-weight: 700; }
.mlR .mlC-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; color: var(--gray-200); }
.mlR .mlC-stars i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #F5A623; font-style: normal; }
.mlR-asec { margin-top: 32px; }
.mlR .mlR-asec h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--gray-900); }
.mlR .mlR-learn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 14px 0 0; padding: 0; list-style: none; }
.mlR-learn li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.55; }
.mlR-learn svg { margin-top: 3px; color: var(--primary); }
.mlR-inst { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 14px; }
.mlR-inst img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; } /* 아바타 — 완전 원형 허용 자리 */
.mlR .mlR-iname { font-size: 16px; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.mlR .mlR-iname:hover { color: var(--primary); }
.mlR .mlR-irole { margin-top: 2px; font-size: 13.5px; color: var(--text-muted); }
.mlR .mlR-inums { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--gray-700); }
.mlR-inums li { display: inline-flex; align-items: center; gap: 6px; }
.mlR-inums svg { color: var(--gray-500); }
.mlR .mlR-itext { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--gray-700); }

/* 강의 내용 — 회차 묶음(펴면 목차). 지금 회차 이름·지금 목차는 초록 글자(선택 = 글자색) */
.mlR-side { position: sticky; top: var(--lr-top); max-height: calc(100vh - var(--lr-top)); overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--gray-200); background: var(--surface-white); }
.mlR-sideh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--gray-200); background: var(--surface-white); font-size: 16px; }
.mlR-close { display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--gray-700); cursor: pointer; }
.mlR-close:hover { background: var(--gray-100); color: var(--gray-900); }
.mlR-sec { border-bottom: 1px solid var(--gray-200); }
.mlR-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: var(--gray-50); color: var(--gray-900); text-align: left; cursor: pointer; }
.mlR-sh:hover { background: var(--gray-100); }
.mlR-sh:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mlR-shl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mlR-shl b { font-size: 14.5px; line-height: 1.4; }
.mlR-sec.is-cur .mlR-shl b { color: var(--primary); }
.mlR-shl i { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-style: normal; font-size: 12px; color: var(--text-muted); }
.mlR-shl i svg { vertical-align: -1px; }
.mlR-dm { display: none; color: var(--color-success); }
.mlR-sec.is-done .mlR-dm { display: inline-flex; }
.mlR-sec.is-done .mlR-dt { color: var(--color-success-text); }
.mlR-sh > svg { flex: none; margin-top: 2px; color: var(--gray-500); transition: transform .15s ease; }
.mlR-sec.is-open .mlR-sh > svg { transform: rotate(180deg); }
.mlR-chs { display: none; margin: 0; padding: 4px 0; list-style: none; }
.mlR-sec.is-open .mlR-chs { display: block; }
.mlR .mlR-ch { display: flex; gap: 10px; padding: 9px 16px 9px 18px; color: var(--gray-900); }
.mlR .mlR-ch:hover { background: var(--gray-50); color: var(--gray-900); }
.mlR .mlR-ch:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mlR-cn { flex: none; min-width: 22px; padding-top: 1px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mlR-ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mlR-ct b { font-size: 13.5px; line-height: 1.45; font-weight: 400; }
.mlR-ct i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mlR-ct i svg { fill: currentColor; }
.mlR .mlR-ch.is-on .mlR-ct b,
.mlR .mlR-ch.is-on .mlR-cn { color: var(--primary); font-weight: 700; }
.mlR .mlR-ch.is-on .mlR-ct i { color: var(--primary); }

/* 태블릿·폰 — 위에서 아래로: 윗줄 · 영상 · 탭 · 칸 · 강의 내용 */
@media (max-width: 1024px) {
	.mlR { margin-inline: calc(50% - 50vw); } /* 테마가 폰 본문 양옆에 둔 15px 를 넘어 화면 끝까지(10/14 — 머리글을 숨기니 윗줄·영상 양옆 흰 틈이 드러났다) */
	.mlR-top { gap: 6px; height: 50px; padding: 0 8px 0 4px; }
	.mlR .mlR-title { padding-left: 10px; font-size: 14px; }
	.mlR-prog { gap: 6px; font-size: 12.5px; }
	.mlR-share { width: 34px; padding: 0; justify-content: center; }
	.mlR-share span { display: none; }
	.mlR-prog + .mlR-share { margin-left: 4px; }
	.mlR .mlR-me,
	.mlR .mlR-login { margin-left: 4px; }
	.mlR .mlR-login { height: 32px; padding: 0 12px; font-size: 13px; }
	/* 강의 내용 = 넷째 탭(10/14 운영자). 방은 격자 대신 한 줄로 쌓고 무대 상자를 풀어(display: contents) 머리(영상 + 탭)가 강의 내용 칸까지 같은 상자 안에 있게 —
	   격자 칸은 그 칸 높이 안에서만 붙어 있을 수 있어 머리가 바로 떨어진다 */
	.mlR-room,
	.mlR-room.is-wide { display: block; }
	.mlR-stage { display: contents; }
	.mlR-room .mlR-side { display: none; }
	.mlR-room.is-list .mlR-side { display: block; }
	.mlR .mlR-tab--list { display: block; }
	.mlR-vbox { width: 100%; }
	.mlR-cap { left: 16px; right: 16px; bottom: 14px; }
	.mlR-cap b { font-size: 20px; }
	.mlR-play { width: 60px; height: 60px; }
	.mlR-tabs { gap: 20px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
	.mlR-tabs::-webkit-scrollbar { display: none; }
	.mlR-tabs .mlR-open,
	.mlR-close { display: none; }
	.mlR-pane { padding: 20px 16px 28px; }
	.mlR-ovh { flex-direction: column; gap: 10px; }
	.mlR .mlR-h { font-size: 19px; }
	.mlR-nums { gap: 10px 22px; }
	.mlR .mlR-ah { font-size: 19px; }
	.mlR .mlR-learn { grid-template-columns: 1fr; }
	.mlR-side { position: static; max-height: none; overflow: visible; border-left: 0; }
	.mlR-sideh { display: none; } /* 탭 이름이 「강의 내용」이라 칸 머리는 겹친다 */
}
/* 폰·태블릿 세로 — 영상 + 탭을 화면 위에 붙인다(10/14 운영자 「모바일에서는 영상 상단 고정」). 아래 칸(개요·질문·클래스 소개·강의 내용)만 굴러간다.
   가로 화면은 영상만으로 화면이 차서 붙이지 않는다 · 잠긴 회차(안내 칸 320px)도 화면 반을 덮어 붙이지 않는다 */
@media (max-width: 1024px) and (orientation: portrait) {
	.mlR-head { position: sticky; top: var(--lr-top); z-index: 5; background: var(--surface-white); }
	.mlR-head:has(.mlR-lock) { position: static; }
}
@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar.mlR-page .mlR { --lr-top: 46px; } /* 이 폭에선 관리 막대(46px)가 위에 붙어 있다 — 관리자에게만 */
}
@media (max-width: 600px) {
	.mlR-vbox:has(.mlR-lock) { aspect-ratio: auto; min-height: 320px; } /* 폰 16:9 칸(약 220px)에는 잠금 안내가 다 안 들어간다 */
	.mlR .mlR-lock-h { font-size: 18px; }
	.mlR .mlR-lock-p { font-size: 13px; }
	.mlR-help { align-items: flex-start; justify-content: flex-start; text-align: left; } /* 두 줄로 넘어가면 가운데 맞춤이 읽기 어렵다 */
	.mlR-help svg { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
	.mlR-play,
	.mlR-ring-fg,
	.mlR-sh > svg { transition: none; }
}