/**
 * 모바일 앱 틀 강의 탭(2-b) — 강의 홈 목록 · 레슨 · 쇼츠 · 라이브 다시보기 · 클래스 영상 · 클래스 소개
 * 정본 docs/mobile-app/README.md 2-b · 채용 결과 docs/mobile-app/10-picks-lecture.md
 *   강의 홈: 글자 탭(1장 A2+A3) + 탭 바로 아래 정렬 칩(F3 YouTube) · 첫 강의만 큰 카드, 둘째부터 40% 썸네일 행(R1 YouTube)
 *   레슨: 영상 맨 위(가짜 창 틀 없이 전폭) → 지금 구간 한 줄(K1) → 제목 + 스크랩 하나(V4) → 메타 한 줄 + 더 보기(V1)
 *         → 강사 줄(V5) → 예제 파일(E1 + E4) · 본문 끝 다음에 볼 강의 · 하단 dock(1장 D3) — 시트·dock 껍데기는 css/mobile-chrome.css §8
 *   쇼츠 · 라이브 · 클래스 영상 · 클래스 소개는 파일 끝 절(body.omc-shorts / omc-live / omc-cv / omc-cl)
 * ⛔ 1024 이하 + body.omc-on 에서만(inc/lecture-mobile.php 가 켜진 요청에만 싣는다). PC 는 그대로.
 * ⛔ 강의 홈 목록은 조각 캐시 안이라 여기 CSS 로만 모양을 바꾼다(마크업 불변).
 * ⛔ 카드 radius 8px 리터럴 · 버튼·칩 var(--radius-md) · 채운 버튼·고른 칩은 --brand-action · 그라디언트·!important 없음.
 */

@media screen and (max-width: 1024px) {

    /* ── 강의 홈 ─────────────────────────────────────────── */
    body.omc-on.omc-lh #lecture-home {
        background: var(--surface-white);
    }

    body.omc-on.omc-lh #lecture-home .lh-shell {
        gap: 0;
        padding: 0 0 24px;
    }

    body.omc-on.omc-lh #lecture-home .lh-main {
        box-sizing: border-box;   /* width:100% + 좌우 여백이 가로로 32px 넘쳤다 */
        padding: 0 16px;
    }

    /* 썸네일 위 재생시간 11px → 12px 하한 */
    body.omc-on.omc-lh #lecture-home .lh-dur {
        font-size: 12px;
    }

    /* 고르기 칸·패널 검색·섹션 검색은 탭 줄과 상단 바 검색이 대신한다 */
    body.omc-on.omc-lh #lecture-home .lh-nav-select-wrap,
    body.omc-on.omc-lh #lecture-home .lh-search,
    body.omc-on.omc-lh #lecture-home .lh-feed-search {
        display: none;
    }

    /* 패널 = 글자 탭 한 줄. 키 큰 .lh-shell 안의 sticky 라 목록 끝까지 따라온다(2차 줄 z 190) */
    body.omc-on.omc-lh #lecture-home .lh-panel {
        position: sticky;
        top: var(--omc-appbar-h);
        z-index: 190;
        gap: 0;
        background: var(--surface-white);
        border-bottom: 1px solid var(--gray-200);
    }

    body.omc-on.omc-lh.admin-bar #lecture-home .lh-panel {
        top: calc(var(--omc-appbar-h) + 32px);
    }

    /* 내 공부 기록 = MY 화면 — 강의 분류 탭 줄과 빈 sticky 패널을 내지 않는다 */
    body.omc-on.omc-lh--notes #lecture-home .lh-panel {
        display: none;
    }

    body.omc-on.omc-lh #lecture-home .omc-lh-tabs {
        --nav-accent: var(--chrome-control);   /* 공용 크롬 활성색 — .oppadu-nav 밖이라 다시 잇는다(mobile-chrome.css §0 과 같게) */
        display: flex;
        gap: 4px;
        padding: 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.omc-on.omc-lh #lecture-home .omc-lh-tabs::-webkit-scrollbar {
        display: none;
    }

    body.omc-on.omc-lh #lecture-home .omc-lh-tab {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 10px;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-muted);
        text-decoration: none;
        white-space: nowrap;
    }

    body.omc-on.omc-lh #lecture-home .omc-lh-tab.is-active {
        font-weight: 700;
        color: var(--gray-900);
    }

    /* 활성 = 글자 아래 짧은 막대(채용 A2) — 무채 */
    body.omc-on.omc-lh #lecture-home .omc-lh-tab.is-active::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 2px;
        border-radius: 1px;
        background: var(--nav-accent);
    }

    body.omc-on.omc-lh #lecture-home .omc-lh-tab:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: -4px;
    }

    /* 흰 카드 틀을 걷어 앱 목록처럼 평평하게 */
    body.omc-on.omc-lh #lecture-home .lh-block,
    body.omc-on.omc-lh #lecture-home .lh-shelf {
        padding: 12px 0 0;
        border-radius: 0;
        background: transparent;
    }

    body.omc-on.omc-lh #lecture-home .lh-main > .lh-view-head {
        padding: 16px 0 0;
    }

    /* F3 — 무료 강의·쇼츠는 탭이 곧 제목이라 제목·설명을 빼고 정렬 칩이 탭 바로 아래 온다(라이브는 가입 링크가 있어 남긴다) */
    body.omc-on.omc-lh--lessons #lecture-home .lh-feed-head .lh-view-head,
    body.omc-on.omc-lh--shorts #lecture-home .lh-feed-head .lh-view-head {
        position: absolute;   /* 화면에서만 숨긴다 — 이 칸의 h1(.lh-view-t)은 보조 기술에 남긴다 */
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.omc-on.omc-lh #lecture-home .lh-feed-head {
        margin-bottom: 12px;
    }

    /* 목록형 칸(무료 강의·라이브)의 폭 제한(--lh-list-w, 가운데 정렬)이 모바일에서 18px 들여쓰기가 됐다 — 탭·제목과 같은 선에 */
    body.omc-on.omc-lh #lecture-home .lh-feed-head--list,
    body.omc-on.omc-lh #lecture-home .lh-grid--list {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.omc-on.omc-lh #lecture-home .lh-feed-head .lh-sortchips {
        display: flex;
        width: 100%;
        gap: 8px;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    /* 칩 — 살짝 둥근 네모(6px), 고른 칩은 브랜드 채움(사례의 검정은 「주의」) */
    body.omc-on.omc-lh #lecture-home .lh-chip {
        position: relative;
        min-height: 36px;
        padding: 0 14px;
        border-radius: var(--radius-md);
        background: var(--gray-100);
        color: var(--gray-700);
        font-size: 14px;
    }

    /* 보이는 높이 36 · 누르는 높이 44 */
    body.omc-on.omc-lh #lecture-home .lh-chip::after {
        content: '';
        position: absolute;
        inset: -4px 0;
    }

    body.omc-on.omc-lh #lecture-home .lh-chip.is-active,
    body.omc-on.omc-lh #lecture-home .lh-chip.is-active:hover {
        background: var(--brand-action);
        color: var(--text-white);
    }

    /* R1 — 첫 강의만 큰 16:9 카드, 둘째부터 40% 썸네일 행(구분선 없음) */
    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow {
        padding: 0;
        border-top: 0;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow + .lh-lrow {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin-top: 16px;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow:first-child {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 8px;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow:first-child .lh-lrow-thumb {
        flex-basis: auto;
        width: 100%;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow + .lh-lrow .lh-lrow-thumb {
        flex: 0 0 40%;
        width: 40%;
        max-width: 264px;
        border-radius: var(--radius-md);
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow + .lh-lrow .lh-lrow-body {
        padding-top: 0;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow + .lh-lrow .lh-lrow-title {
        font-size: 15px;
        line-height: 1.4;
        -webkit-line-clamp: 3;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow + .lh-lrow .lh-meta {
        margin-top: 4px;
        font-size: 12.5px;
        line-height: 1.5;
    }

    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow-desc,
    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-lrow-toc {
        display: none;
    }

    /* ⋮ — 행 오른쪽 위(누르는 칸 44) */
    body.omc-on.omc-lh #lecture-home .lh-grid--list .lh-cmenu-btn {
        width: 44px;
        height: 44px;
        margin: -12px -14px -12px -8px;
    }

    /* ── 레슨 ──────────────────────────────────────────────
       .lec-page 를 세로 flex 로 바꿔 order 로 다시 놓는다: 영상 1 · 지금 구간·제목·메타 2 · 요약(더 보기) 3 · 강사·예제 파일 4 · 본문 5 */
    /* 본문 머리(#main)의 위 여백 30px 이 상단 바와 영상 사이 흰 틈을 만든다 */
    body.omc-on.omc-lec #main {
        margin-top: 0;
    }

    body.omc-on.omc-lec .lec-page {
        display: flex;
        flex-direction: column;
        max-width: none;
        padding: 0 0 24px;
    }

    body.omc-on.omc-lec .lec-page > * {
        order: 5;
    }

    body.omc-on.omc-lec .lec-hero,
    body.omc-on.omc-lec .lec-page > .lec-divider,
    body.omc-on.omc-lec .lec-download-card-wrapper,
    body.omc-on.omc-lec .lec-timeline,
    body.omc-on.omc-lec .oeg-bar {
        display: none;
    }

    /* 영상 — 상단 바 바로 아래 전폭 16:9, 가짜 창 틀 없음 */
    body.omc-on.omc-lec .lec-video-stage {
        order: 1;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: var(--gray-900);
    }

    body.omc-on.omc-lec .lec-video-wrapper {
        padding-top: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    body.omc-on.omc-lec .lec-video-wrapper::before,
    body.omc-on.omc-lec .lec-video-wrapper::after,
    body.omc-on.omc-lec .lec-video-frame__win {
        display: none;
    }

    body.omc-on.omc-lec .lec-lite-youtube,
    body.omc-on.omc-lec .lec-lite-youtube iframe {
        border-radius: 0;
    }

    body.omc-on.omc-lec .omc-lec-info {
        order: 2;
        display: block;
    }

    /* 원래 요약 카드는 영상 앞(읽는 순서)이라 모바일에서 숨기고, 「더 보기」 바로 뒤 #omc-lec-desc 가 같은 글을 보인다 */
    body.omc-on.omc-lec .lec-summary-card {
        display: none;
    }

    body.omc-on.omc-lec .omc-lec-desc {
        margin: 10px 0 0;
        padding: 16px;
        border-radius: 8px;
        background: var(--gray-50);
    }

    body.omc-on.omc-lec .omc-lec-desc__lead {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.55;
        color: var(--text-primary);
    }

    body.omc-on.omc-lec .omc-lec-desc__body {
        margin-top: 8px;
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    body.omc-on.omc-lec .omc-lec-desc__body p {
        margin: 0 0 8px;
    }

    body.omc-on.omc-lec .omc-lec-after {
        order: 4;
        display: block;
        padding: 0 16px;
    }

    body.omc-on.omc-lec .lec-grid {
        margin: 8px 16px 0;
    }

    /* K1 — 지금 구간 한 줄(누르면 챕터 시트) */
    body.omc-on.omc-lec .omc-lec-chap {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0 12px 0 16px;
        border: 0;
        border-bottom: 1px solid var(--gray-200);
        background: var(--surface-white);
        color: var(--text-primary);
        font: inherit;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
    }

    body.omc-on.omc-lec .omc-lec-chap__ic {
        flex: 0 0 auto;
        color: var(--gray-700);
        line-height: 0;
    }

    body.omc-on.omc-lec .omc-lec-chap__n {
        flex: 0 0 auto;
        font-weight: 700;
        color: var(--gray-900);
    }

    body.omc-on.omc-lec .omc-lec-chap__now {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--text-secondary);
    }

    body.omc-on.omc-lec .omc-lec-chap__t {
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }

    body.omc-on.omc-lec .omc-lec-chap__go {
        flex: 0 0 auto;
        color: var(--gray-400);
        line-height: 0;
    }

    /* 제목 + 스크랩 하나(V4) · 메타 한 줄 + 더 보기(V1) */
    body.omc-on.omc-lec .omc-lec-head {
        padding: 14px 16px 12px;
    }

    body.omc-on.omc-lec .omc-lec-cat {
        display: block;
        margin: 0 0 4px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-muted);
    }

    body.omc-on.omc-lec .omc-lec-titlerow {
        display: flex;
        align-items: flex-start;
        gap: 4px;
    }

    body.omc-on.omc-lec .omc-lec-title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.01em;
        color: var(--gray-900);
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.omc-on.omc-lec .omc-lec-scrap.oeg-ibtn {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: -8px -12px 0 0;
        border-radius: var(--radius-md);
    }

    body.omc-on.omc-lec .omc-lec-meta {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-muted);
    }

    /* 글자 버튼 — 보이는 줄은 그대로, 누르는 높이 44 */
    body.omc-on.omc-lec .omc-lec-more {
        margin: -13px 0;
        padding: 13px 4px;
        border: 0;
        background: none;
        font: inherit;
        font-weight: 700;
        color: var(--gray-900);
        cursor: pointer;
    }

    /* 강사 줄(V5) */
    body.omc-on.omc-lec .omc-lec-author {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
    }

    body.omc-on.omc-lec .omc-lec-author__ava,
    body.omc-on.omc-lec .omc-lec-author__img {
        display: block;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);   /* 아바타 = 완전 원형 허용 */
        object-fit: cover;
        overflow: hidden;
    }

    body.omc-on.omc-lec .omc-lec-author__txt {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    body.omc-on.omc-lec .omc-lec-author__name {
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
    }

    /* 소개는 한 줄(V5) — 계정 소개문이 길면 말줄임 */
    body.omc-on.omc-lec .omc-lec-author__sub {
        overflow: hidden;
        font-size: 12.5px;
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 예제 파일(E1 이름·크기 + E4 형식 글자 받기 버튼) */
    body.omc-on.omc-lec .omc-lec-files {
        margin-top: 16px;
        scroll-margin-top: calc(var(--omc-appbar-h) + 16px);
    }

    body.omc-on.omc-lec .omc-lec-files__head {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 4px;
    }

    body.omc-on.omc-lec .omc-lec-files__h {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--gray-900);
    }

    body.omc-on.omc-lec .omc-lec-files__n {
        font-size: 13px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    body.omc-on.omc-lec .omc-lec-file {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 10px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    body.omc-on.omc-lec .omc-lec-file__txt {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.omc-on.omc-lec .omc-lec-file__name {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--gray-900);
        overflow-wrap: anywhere;
    }

    body.omc-on.omc-lec .omc-lec-file__name svg {
        flex: 0 0 auto;
        color: var(--text-muted);
    }

    body.omc-on.omc-lec .omc-lec-file__meta {
        margin: 2px 0 0;
        font-size: 12.5px;
        color: var(--text-muted);
    }

    body.omc-on.omc-lec .omc-lec-file__btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: var(--radius-md);
        background: var(--gray-100);
        color: var(--gray-900);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    body.omc-on.omc-lec .omc-lec-file--locked .omc-lec-file__btn {
        background: var(--brand-action);
        color: var(--text-white);
    }

    /* 본문 끝 — 다음에 볼 강의(R1 행: 왼쪽 40% 썸네일 + 제목 3줄) · 멤버십 한 줄 또는 이어지는 라이브.
       PC 오른쪽 칸(관련 강의·멤버십)이 모바일에서 통째로 숨어 사라졌던 것을 본문 뒤·댓글 앞에 되살린다 */
    body.omc-on.omc-lec .omc-lec-end {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin: 24px 0 8px;
    }

    body.omc-on.omc-lec .omc-lec-sec-h {
        margin: 0 0 12px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
        color: var(--gray-900);
    }

    body.omc-on.omc-lec .omc-lec-rel__list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.omc-on.omc-lec .omc-lec-rel__item {
        display: grid;
        grid-template-columns: min(40%, 264px) minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        color: inherit;
        text-decoration: none;
    }

    body.omc-on.omc-lec .omc-lec-rel__thumb {
        display: block;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: var(--radius-md);   /* 강의 홈 R1 행 썸네일과 같게 */
        background: var(--gray-100);
    }

    body.omc-on.omc-lec .omc-lec-rel__thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.omc-on.omc-lec .omc-lec-rel__txt {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    body.omc-on.omc-lec .omc-lec-rel__t {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--gray-900);
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.omc-on.omc-lec .omc-lec-rel__m {
        font-size: 12.5px;
        color: var(--text-muted);
    }

    /* 옛 「관련 강의」 접기 칸(.lec-mobile-sidebar) — 위 목록이 관련 글을 전부 담았을 때만 대신한다
       (함수 글·블로그가 섞여 있으면 옛 칸을 남겨 그 글로 가는 길을 지킨다) */
    body.omc-on.omc-lec:has(.omc-lec-end--all) .lec-mobile-section {
        display: none;
    }

    /* 이어지는 라이브 카드 — PC 오른쪽 칸 전용 모양(16px·그림자·들림·그라디언트 알약)을 모바일 본문에선 v3 로 */
    body.omc-on.omc-lec .omc-lec-lives .lec-related-lives__card,
    body.omc-on.omc-lec .omc-lec-lives .lec-related-lives__card:hover {
        border-radius: 8px;
        box-shadow: none;
        transform: none;
    }

    body.omc-on.omc-lec .omc-lec-lives .lec-related-lives__card:hover .lec-related-lives__thumb img {
        transform: none;
    }

    body.omc-on.omc-lec .omc-lec-lives .lec-related-lives__badge {
        border-radius: var(--radius-md);
        background: var(--primary-dark);
        box-shadow: none;
        font-size: 12px;
    }

    body.omc-on.omc-lec .omc-lec-lives .lec-related-lives__badge::before {
        background: var(--brand-bright);
        animation: none;
    }

    body.omc-on.omc-lec .omc-lec-lives .lec-related-lives__card:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: 2px;
    }

    body.omc-on.omc-lec .omc-lec-rel__item:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: 2px;
    }

    /* 챕터 시트 안 행(K1) — 지금 구간은 옅은 회색 면 */
    body.omc-on .omc-chaps {
        margin: 0;
        padding: 0 0 8px;
        list-style: none;
    }

    body.omc-on .omc-chap {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
        gap: 8px;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 12px 16px;
        border: 0;
        background: none;
        color: var(--text-primary);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    body.omc-on .omc-chap.is-current {
        background: var(--gray-50);
    }

    body.omc-on .omc-chap__t {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    body.omc-on .omc-chap.is-current .omc-chap__t {
        color: var(--gray-900);
    }

    body.omc-on .omc-chap__title {
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--gray-900);
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.omc-on .omc-chap.is-current .omc-chap__title {
        font-weight: 700;
    }

    body.omc-on .omc-chap:focus-visible,
    body.omc-on.omc-lec .omc-lec-chap:focus-visible,
    body.omc-on.omc-lec .omc-lec-more:focus-visible,
    body.omc-on.omc-lec .omc-lec-file__btn:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: -2px;
    }
}

@media screen and (max-width: 1024px) {
    body.omc-on.omc-lec.admin-bar .omc-lec-files {
        scroll-margin-top: calc(var(--omc-appbar-h) + 48px);
    }
}

@media screen and (max-width: 782px) {
    body.omc-on.omc-lh.admin-bar #lecture-home .lh-panel {
        top: calc(var(--omc-appbar-h) + 46px);
    }

    body.omc-on.omc-lec.admin-bar .omc-lec-files {
        scroll-margin-top: calc(var(--omc-appbar-h) + 62px);
    }
}

/* ── 쇼츠 — 레일·노트 시트를 안전 영역(아이폰 홈 표시줄) 위로. 폭 기준은 쇼츠 피드의 모바일 폭(999 · 500, css/shorts-feed.css) ── */
@media screen and (max-width: 999px) {
    body.omc-on.omc-shorts .shorts-rail {
        bottom: calc(84px + var(--omc-safe-b));
    }

    body.omc-on.omc-shorts .rail-popover {
        bottom: calc(140px + var(--omc-safe-b));
    }

    /* 노트 시트는 화면 바닥까지 — 맨 아래 댓글 입력줄이 표시줄에 가리지 않게 */
    body.omc-on.omc-shorts .shorts-note-col {
        box-sizing: border-box;
        padding-bottom: var(--omc-safe-b);
    }

    /* 레일 이름 11.2px → 12px 하한 */
    body.omc-on.omc-shorts .rail-label {
        font-size: 12px;
    }
}

@media screen and (max-width: 500px) {
    body.omc-on.omc-shorts .shorts-rail {
        bottom: calc(76px + var(--omc-safe-b));
    }
}

/* ── 라이브 다시보기 — 영상 맨 위 → 제목 → 글자 탭(sticky) · 하단 dock(이전 · 스크랩 · 질문 | 다음 라이브) ──
   영상 위 흰 줄(← + 제목)은 상단 바와 겹친다 — ← 는 상단 바에 두고 제목만 영상 아래로(레슨과 같은 순서).
   12px 하한: 이 화면은 html 14px 에 0.62~0.8rem 이라 글자의 대부분이 9~11px 였다. */
@media screen and (max-width: 1024px) {
    body.omc-on.omc-live .lp-video-container {
        order: 1;
    }

    body.omc-on.omc-live .lp-top-bar {
        order: 2;
        min-height: 0;
        padding: 12px 16px 14px;
        border-bottom: 0;
    }

    body.omc-on.omc-live .lp-back-btn {
        display: none;
    }

    /* 영상 위 「프리미엄 콘텐츠」 리본 글자 10px → 12px 하한 */
    body.omc-on.omc-live .lp-premium-ribbon span {
        font-size: 12px;
    }

    body.omc-on.omc-live .lp-title {
        font-size: 19px;
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        word-break: keep-all;
    }

    /* 이전·다음·스크랩 줄은 하단 dock 이 대신한다(dock 이 있을 때만 — 없으면 제목 아래 제자리) */
    body.omc-on.omc-live .lp-bottom {
        order: 3;
    }

    body.omc-on.omc-live:has(.omc-live-dock) .lp-bottom {
        display: none;
    }

    body.omc-on.omc-live .lp-side-panel {
        border-top: 0;
    }

    /* 탭 = 강의 홈과 같은 글자 탭 + 밑줄, 상단 바 아래에 붙는다 */
    body.omc-on.omc-live .lp-tab-buttons {
        --nav-accent: var(--chrome-control);
        position: sticky;
        top: var(--omc-appbar-h);
        z-index: 190;
        background: var(--surface-white);
        border-top: 1px solid var(--gray-200);
    }

    body.omc-on.omc-live .lp-tab-btn,
    body.omc-on.omc-live .lp-tab-btn:hover {
        flex: 0 0 auto;           /* 원래 4등분(flex:1) — 밑줄을 강의 홈 탭처럼 글자 폭으로 */
        min-height: 44px;
        padding: 0 12px;
        font-size: 14px;
        color: var(--gray-500);
        background: none;
        box-shadow: none;
    }

    body.omc-on.omc-live .lp-tab-btn.active {
        color: var(--text-primary);
        font-weight: 700;
        box-shadow: inset 0 -2px 0 var(--nav-accent);
    }

    body.omc-on.omc-live .lp-tab-btn i {
        display: none;
    }

    /* 강의 자료 줄 — sticky(top 0)는 상단 바·탭 밑으로 파고든다. 모바일은 제자리 */
    body.omc-on.omc-live .lp-curriculum-dl {
        position: static;
    }

    body.omc-on.omc-live .lp-curriculum-dl__label {
        font-size: 13px;
    }

    body.omc-on.omc-live .lp-dl-btn,
    body.omc-on.omc-live .lp-dl-locked {
        box-sizing: border-box;
        min-height: 44px;
        font-size: 13px;
    }

    /* 커리큘럼(챕터) 행 */
    body.omc-on.omc-live .live-sidebar-timeline .lecture-time-list a {
        box-sizing: border-box;
        min-height: 44px;
        font-size: 14px;
    }

    body.omc-on.omc-live .live-sidebar-timeline .lecture-time-list a::before,
    body.omc-on.omc-live .live-sidebar-timeline .lecture-time-list a .lecture-time-log {
        font-size: 12px;
    }

    /* 라이브 정보 */
    body.omc-on.omc-live .lp-info-section-title {
        font-size: 12px;
    }

    body.omc-on.omc-live .lp-info-section-body,
    body.omc-on.omc-live .lp-info-table .lp-info-row {
        font-size: 13px;
    }

    body.omc-on.omc-live .lp-recommend-thumb {
        width: 40%;
        max-width: 160px;
    }

    body.omc-on.omc-live .lp-recommend-badge {
        font-size: 12px;
    }

    body.omc-on.omc-live .lp-recommend-title {
        font-size: 14px;
    }

    /* 스크립트 */
    body.omc-on.omc-live .lp-script-time {
        font-size: 12px;
    }

    body.omc-on.omc-live .lp-script-text {
        font-size: 14px;
    }

    body.omc-on.omc-live .lp-login-required p {
        font-size: 13px;
    }

    body.omc-on.omc-live .lp-login-btn {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 14px;
    }

    /* Q&A */
    body.omc-on.omc-live #lp-tab-qna .oc-feed-filter,
    body.omc-on.omc-live #lp-tab-qna .lp-comment-notice {
        font-size: 13px;
    }

    body.omc-on.omc-live #lp-tab-qna .oc-only-current-count,
    body.omc-on.omc-live #lp-tab-qna .oc-feed-source,
    body.omc-on.omc-live #lp-tab-qna .infinite-foot {
        font-size: 12px;
    }

    /* dock 스크랩 — 저장되면 채운 책갈피(전역 처리기가 .bookmarked 를 단다). dock 아이콘 활성은 무채(초록은 채운 주 버튼만) */
    body.omc-on .omc-live-dock .this-bookmark-status.bookmarked {
        color: var(--chrome-control);
    }

    body.omc-on .omc-live-dock .this-bookmark-status.bookmarked svg {
        fill: currentColor;
    }

    body.omc-on.omc-live .lp-tab-btn:focus-visible,
    body.omc-on.omc-live .lp-dl-btn:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: -2px;
    }
}

@media screen and (max-width: 1024px) {
    body.omc-on.omc-live.admin-bar .lp-tab-buttons {
        top: calc(var(--omc-appbar-h) + 32px);
    }
}

@media screen and (max-width: 782px) {
    body.omc-on.omc-live.admin-bar .lp-tab-buttons {
        top: calc(var(--omc-appbar-h) + 46px);
    }
}

/* ── 클래스 영상 — 영상 맨 위(전폭) · 1열 · 하단 dock(목차 · 커리큘럼 | 진도 버튼) ──
   961~1024 는 원래 2열(오른쪽 커리큘럼)이다 — 모바일 틀 폭 기준(1024)에 맞춰 원래 960 이하 규칙과 같은 값으로 1열.
   진도 버튼(.re-curriculum-foot)은 JS 가 dock 칸으로 옮긴다 — 옮기면 .re-lesson 밖이라 원래 모양 규칙이 안 닿아 여기서 새로 칠한다. */
@media screen and (max-width: 1024px) {
    body.omc-on.omc-cv .re-lesson {
        padding: 0 16px 64px;
    }

    body.omc-on.omc-cv .re-lesson .re-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.omc-on.omc-cv .re-lesson .re-side {
        position: static;
        top: auto;
    }

    body.omc-on.omc-cv .re-lesson .re-curriculum-list {
        max-height: 60vh;
    }

    /* 영상 = 상단 바 바로 밑 전폭(둥근 카드 틀 없이) */
    body.omc-on.omc-cv .re-lesson .re-video {
        margin: 0 -16px;
        border-radius: 0;
    }

    /* 플레이어 위 목차 버튼·팝오버 → dock 「목차」 시트(플레이어 위에 겹치는 것이 없게) */
    body.omc-on.omc-cv .re-lesson .re-ip-toc-btn,
    body.omc-on.omc-cv .re-lesson .re-ip-pop {
        display: none;
    }

    /* 12px 하한 */
    body.omc-on.omc-cv .re-lesson .re-curriculum-list .re-cur-chap,
    body.omc-on.omc-cv .re-lesson .re-curriculum-list .re-cur-time,
    body.omc-on.omc-cv .re-lesson .re-c-count,
    body.omc-on.omc-cv .re-lesson .re-curriculum-headrow .re-c-pct,
    body.omc-on.omc-cv .re-lesson .re-crumb-ch,
    body.omc-on.omc-cv .re-lesson .re-crumb-ls,
    body.omc-on.omc-cv .re-lesson .re-sup-dur,
    body.omc-on.omc-cv .re-lesson .re-q-meta,
    body.omc-on.omc-cv .re-lesson .session-type {
        font-size: 12px;
    }

    /* 제목 위 「챕터 › 레슨」 경로가 한 줄 고정(nowrap)이라 긴 이름이면 화면 밖으로 82px 넘쳤다 — 폭 안에서 줄을 바꾼다 */
    body.omc-on.omc-cv .re-lesson .re-tt {
        max-width: 100%;
    }

    body.omc-on.omc-cv .re-lesson .re-crumb {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    body.omc-on.omc-cv .re-lesson .re-crumb-ls {
        white-space: normal;
    }

    /* 44px 누르는 칸 */
    body.omc-on.omc-cv .re-lesson .re-tab,
    body.omc-on.omc-cv .re-lesson .re-curriculum-list .re-cur-lesson,
    body.omc-on.omc-cv .re-lesson .re-dl-file {
        box-sizing: border-box;
        min-height: 44px;
    }

    /* dock — .omc-dock__ic 의 display 가 [hidden] 을 이기므로 숨김을 다시 건다(목차 없는 영상) */
    body.omc-on .omc-cv-dock [hidden] {
        display: none;
    }

    body.omc-on .omc-cv-dock__cta {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
    }

    body.omc-on .omc-cv-dock__cta:empty {
        display: none;
    }

    body.omc-on .omc-cv-dock .re-curriculum-foot {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    body.omc-on .omc-cv-dock .re-next-cta {
        box-sizing: border-box;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 6px 14px;
        border: 0;
        border-radius: 8px;
        background: var(--brand-action);
        color: var(--text-white);
        font: inherit;
        font-size: 15px;          /* 클래스 소개 dock 버튼과 같게(한 줄 버튼) */
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        word-break: keep-all;
        cursor: pointer;
    }

    body.omc-on .omc-cv-dock .re-next-cta:active {
        background: var(--brand-hover);
    }

    body.omc-on .omc-cv-dock .re-next-cta svg {
        flex: 0 0 auto;
    }

    /* 로그인 유도 · 「모두 들었어요」 = 회색(누를 것이 없는 「모두 들었어요」는 누르기도 막는다) */
    body.omc-on .omc-cv-dock .re-next-cta.empty {
        background: var(--gray-100);
        color: var(--gray-700);
    }

    body.omc-on .omc-cv-dock .re-next-cta.empty[href="#"] {
        pointer-events: none;
    }

    body.omc-on .omc-cv-dock .re-next-cta:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: 2px;
    }

    /* ── 클래스 소개 — 하단 dock(가격 | 신청 버튼) ── */
    body.omc-on .omc-cl-dock__price {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: 0 12px 0 8px;
    }

    body.omc-on .omc-cl-dock__p {
        font-size: 17px;
        font-weight: 800;
        line-height: 1.3;
        color: var(--gray-900);
        white-space: nowrap;
    }

    body.omc-on .omc-cl-dock__cap {
        overflow: hidden;
        font-size: 12px;
        line-height: 1.3;
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.omc-on .omc-cl-dock__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    /* 신청 처리 중 — 페이지 버튼과 같게 옅게(진하게 하면 「눌린 채」로 보인다) */
    body.omc-on .omc-cl-dock__cta:disabled {
        opacity: 0.6;
        cursor: default;
    }

    /* 페이지 안 신청 버튼(카드 · 맨 아래)이 화면에 보이는 동안은 dock 을 내린다 — 같은 버튼 두 개가 붙지 않게.
       높이는 그대로 두어(visibility) --omc-dock-h 가 다시 재어지며 본문이 밀리지 않는다(js/lecture-mobile.js) */
    body.omc-on .omc-cl-dock.is-away {
        visibility: hidden;
        transform: translateY(100%);
    }
}

@media screen and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    body.omc-on .omc-cl-dock {
        transition: transform 0.18s ease-out, visibility 0.18s;
    }
}

/* 981~1024 는 오른쪽 신청 카드가 화면을 따라온다 — dock 을 겹쳐 내지 않는다(높이 0 → 본문 아래 여백도 0) */
@media screen and (min-width: 981px) and (max-width: 1024px) {
    body.omc-on.omc-cl .omc-cl-dock {
        display: none;
    }
}