/**
 * 모바일 앱 틀 챌린지(2-c) — 허브 · 모집 · 신청 · 진행
 * 정본 docs/mobile-app/README.md 2-c · 설계 원안 docs/mobile-app/04-challenge.md
 *
 * ⛔ 1024 이하 + body.omc-on 에서만(inc/challenge-mobile.php 가 켜진 요청의 챌린지 4페이지에만 싣는다). PC 는 그대로.
 * ⛔ 진행 CSS 의 기존 완전 원형·!important 는 PC 와 같이 쓰는 규칙이라 두고, 새로 만드는 부품만 규칙을 지킨다(04 §1).
 * ⛔ transform 이 걸린 조상(신청 패널 · t4 컬럼) 안에서는 fixed 가 깨진다 — 고정 요소는 그 밖에 둔다.
 *
 * 1) 무위험 수리(04 §8-2) — 진행 화면 가로 넘침 · dvh · 입력칸 16px · 퀴즈 드로어 안전 영역·누르는 칸 · 터치용 문구
 * 2) 진행 화면(작업) — 요약(칩 · 진행 · 할 일) · 「다음 할 일」 dock (12-picks ⑤)
 */

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

    /* ── 진행 화면 가로 넘침(2026-09-29 실측 703px) ──
       챕터 버튼 안 화면 읽기용 글자(.screen-reader-text = position:absolute)의 기준 상자가 가로 스크롤 줄 바깥이라
       잘리지 않고 네 번째 칸 자리(약 1,040px)까지 문서 폭을 늘렸다. 버튼을 기준 상자로 삼아 줄 안에 가둔다 */
    body.omc-on .cpv2-chap {
        position: relative;
    }

    /* ── 좌우 15px 안쪽 들어감(2026-09-30 운영자 「고칩니다」) ──
       style.css 의 `main#main.site-main`(1200 이하 좌우 15px, 첫 커밋부터)이 명시도로
       `body.chv2-page .site-main{padding:0}`(challenge-v2-common.css)을 이겨, 허브 히어로·모집 영상·회색 띠 양옆에 흰 줄이 났다.
       이 파일은 챌린지 4페이지에만 실리니 진행·대기·완주 화면(chv2-page 클래스 없음)까지 여기서 함께 푼다.
       안쪽 여백은 각 화면의 wrap·셸이 따로 가진다. 1025~1200 PC 는 그대로 */
    body.omc-on main#main.site-main {
        padding-left: 0;
        padding-right: 0;
    }

    /* ── 100vh → dvh(주소창이 접히고 펴질 때 아래가 잘리지 않게). dvh 를 모르는 브라우저는 이 줄을 버리고 기존 100vh 를 쓴다 ── */
    body.omc-on .cpv2-wait-root,
    body.omc-on .cpv2-t4 {
        min-height: 100dvh;
    }

    /* ── 입력칸 16px — iOS 는 16px 미만 입력칸을 누르면 화면을 확대한다 ── */
    body.omc-on .cpv2-rte-body,
    body.omc-on .cpv2-rec-url,
    body.omc-on .cpv2-t4-ta,
    body.omc-on .chv2--enroll .chv2-en-pledge-ta {
        font-size: 16px;
    }

    /* ── 퀴즈·교재 드로어 — 위아래 안전 영역, 본문 안 스크롤이 페이지로 새지 않게, 닫기 누르는 칸 44px(보이는 원은 그대로) ── */
    body.omc-on .cpv2-drawer-head {
        padding-top: calc(18px + env(safe-area-inset-top, 0px));
    }

    body.omc-on .cpv2-drawer-body {
        overscroll-behavior: contain;
    }

    body.omc-on .cpv2-drawer-foot {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    body.omc-on .cpv2-drawer-x {
        position: relative;
    }

    body.omc-on .cpv2-drawer-x::after {
        content: '';
        position: absolute;
        inset: -4px;
    }
}

/* ── 터치용 문구 — 「Ctrl + V · 클릭해서」 대신 「눌러」. 마크업은 켜진 요청에만 두 벌(chm-mouse · chm-touch),
   손가락 기기(pointer:coarse)에서만 바꿔 보인다. 마우스 달린 태블릿·PC 는 원래 문구 그대로 ── */
body.omc-on .chm-touch {
    display: none;
}

@media screen and (max-width: 1024px) and (pointer: coarse) {
    body.omc-on .chm-mouse {
        display: none;
    }

    body.omc-on .chm-touch {
        display: block;
    }
}

/* ── 2) 진행 화면(작업) — 12-picks ⑤ W1(챕터 칩 줄 · 진행 한 줄 · 할 일 상자) + W2(아래 고정 「다음 할 일」) ──
   요약(.chm-sum)은 899 이하 한 칸에서만 보이고, 레일의 MY PROGRESS · CHAPTERS 를 대신한다.
   900~1024 는 PC 와 같은 두 칸(레일이 옆에 있다)이라 dock 만 붙는다. */
.chm-sum {
    display: none;
}

@media screen and (max-width: 899px) {
    /* 순서: 요약 → 강의·미션(main) → 실습 자료(rail) → 완주 혜택·참여 현황(히어로) */
    body.omc-on .cpv2-shell.chm-work {
        display: flex;
        flex-direction: column;
    }

    body.omc-on .chm-work > .chm-sum {
        order: 1;
        display: block;
    }

    body.omc-on .chm-work > .cpv2-grid {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;        /* 그리드의 align-items:start 가 남으면 실습 자료 상자가 글자 폭으로 줄어든다 */
        margin-top: 16px;
    }

    body.omc-on .chm-work > .cpv2-hero {
        order: 3;
        margin-top: 22px;
    }

    body.omc-on .chm-work .cpv2-main {
        order: 1;
    }

    body.omc-on .chm-work .cpv2-rail {
        order: 2;
    }

    body.omc-on .chm-work .cpv2-railcard,
    body.omc-on .chm-work .cpv2-chapcard {
        display: none;
    }

    /* 제목은 상단 바가 말한다 — 문서(스크린리더)에는 남긴다 */
    body.omc-on .chm-work .cpv2-hero .cpv2-h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.omc-on .chm-sum {
        padding: 16px 0;
        border-radius: 8px;
        background: var(--surface-white);
        box-shadow: var(--card-sm);
    }

    body.omc-on .chm-chips {
        position: relative;          /* 칩 offsetLeft 기준(JS 가운데 맞춤) */
        display: flex;
        gap: 8px;
        padding: 0 16px 2px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    body.omc-on .chm-chips::-webkit-scrollbar {
        display: none;
    }

    body.omc-on .chm-chip {
        box-sizing: border-box;      /* 테마에 전역 리셋이 없다 */
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 52px;
        min-height: 44px;
        margin: 0;
        padding: 0 12px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--gray-700);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        cursor: pointer;
        scroll-snap-align: center;
    }

    body.omc-on .chm-chip.is-done .chm-chip__ic {
        color: var(--color-success);
    }

    body.omc-on .chm-chip.is-locked {
        background: var(--gray-50);
        color: var(--gray-400);
    }

    body.omc-on .chm-chip.is-cur {
        border-color: var(--brand-action);
        background: var(--brand-action);
        color: var(--text-white);
    }

    body.omc-on .chm-chip.is-cur .chm-chip__ic {
        color: inherit;
    }

    body.omc-on .chm-chip--gift {
        gap: 6px;
        color: var(--primary);
        font-size: 14px;
    }

    body.omc-on .chm-chip:focus-visible,
    body.omc-on .chm-todo__row:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    body.omc-on .chm-sum__line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 16px 0;
        font-size: 13px;
        color: var(--text-muted);
    }

    body.omc-on .chm-sum__k b {
        color: var(--gray-900);
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

    body.omc-on .chm-sum__due {
        flex: 0 0 auto;
        color: var(--gray-700);
        font-weight: 600;
        white-space: nowrap;
    }

    body.omc-on .chm-sum__bar {
        height: 4px;
        margin: 8px 16px 0;
        overflow: hidden;
        border-radius: 2px;
        background: var(--gray-100);
    }

    body.omc-on .chm-sum__bar i {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: var(--brand-action);
    }

    body.omc-on .chm-sum__note {
        margin: 10px 16px 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-warning-text);
    }

    body.omc-on .chm-todo {
        margin: 16px 16px 0;
        padding-top: 12px;
        border-top: 1px solid var(--gray-100);
    }

    body.omc-on .chm-todo__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-bottom: 2px;
        font-size: 14px;
        font-weight: 700;
        color: var(--gray-900);
    }

    body.omc-on .chm-todo__head b {
        color: var(--primary);
        font-variant-numeric: tabular-nums;
    }

    body.omc-on .chm-todo__row {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--gray-800);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    body.omc-on .chm-todo__box {
        flex: 0 0 auto;
        color: var(--gray-400);
    }

    body.omc-on .chm-todo__row.is-done .chm-todo__box {
        color: var(--color-success);
    }

    body.omc-on .chm-todo__t {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        font-weight: 600;
    }

    body.omc-on .chm-todo__row.is-done .chm-todo__t {
        color: var(--text-muted);
        font-weight: 500;
    }

    body.omc-on .chm-todo__s {
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--text-muted);
    }

    body.omc-on .chm-todo__go {
        flex: 0 0 auto;
        color: var(--gray-400);
    }

    /* 안내 가이드 다시 보기 — 할 일 상자 밑 한 줄(모바일은 제목 옆 「?」 가 숨는다) */
    body.omc-on .chm-sum__tour {
        width: auto;
        margin: 4px 16px 0;
        color: var(--gray-700);
        text-decoration: none;
    }

    body.omc-on .chm-sum__tour .chm-todo__t {
        font-size: 14px;
        font-weight: 500;
    }
}

/* 「다음 할 일」 dock — 가리키는 자리가 화면에 보이면 아래로 밀어 둔다(높이는 그대로 → 본문이 튀지 않는다) */
@media screen and (max-width: 1024px) {
    body.omc-on .chm-dock {
        transition: transform 0.2s ease, visibility 0s linear 0s;
    }

    body.omc-on .chm-dock.is-off {
        display: none;
    }

    body.omc-on .chm-dock .omc-dock__main {
        font: inherit;               /* <button> 이라 글꼴·가운데 정렬을 버튼 기본값에서 되돌린다(다른 dock 은 <a>) */
        border: 0;
        text-align: left;
        cursor: pointer;
    }

    body.omc-on .chm-dock.is-away {
        visibility: hidden;
        transform: translateY(calc(100% + 1px));
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.omc-on .chm-dock,
    body.omc-on .chm-dock.is-away {
        transition: none;
    }
}

/* ── 3) 퀴즈 — 12-picks ⑥ Q1(한 문제씩 · 아래 [다음]) + Q3(결과 하단 시트 · 「채점 보기 · 계속하기」) + Q5(문제별 채점 카드) ──
   한 벌 마크업에 모바일·PC 글자를 둘 다 둔 곳: .chm-m(1024 이하) / .chm-pc(그 위). 「이전·다음」은 JS 가 넣고 .chm-step 에서만 보인다 */
.chm-m,
.chm-qnav {
    display: none;
}

@media screen and (max-width: 1024px) {
    body.omc-on .chm-m {
        display: inline;
    }

    body.omc-on .chm-pc {
        display: none;
    }

    /* 서랍 본문 좌우 50 → 20 (04 §2-f) */
    body.omc-on #cpv2-mission-modal .cpv2-drawer-body {
        padding-right: 20px;
        padding-left: 20px;
    }

    /* 한 문제씩 — 보는 문항만, 위 「0 / 6」 숫자는 빼고 막대만(문항 위 「문제 1 / 6」 이 말한다) */
    body.omc-on .chm-step .cpv2-exam:not(.is-on) {
        display: none;
    }

    body.omc-on .chm-step .cpv2-exam {
        border-top: 0;
    }

    body.omc-on .chm-step .cpv2-quiz-progress-text,
    body.omc-on .chm-step .cpv2-drawer-count {
        display: none;
    }

    body.omc-on .chm-step .cpv2-opt {
        min-height: 52px;
    }

    body.omc-on .chm-step .cpv2-drawer-foot {
        gap: 8px;
    }

    body.omc-on .chm-step .chm-qnav {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin: 0;
        border: 0;
        border-radius: 8px;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    body.omc-on .chm-step .chm-qnav[hidden] {
        display: none;
    }

    body.omc-on .chm-step .chm-qnav--prev {
        flex: 0 0 auto;
        padding: 0 16px;
        background: none;
        color: var(--gray-700);
    }

    body.omc-on .chm-step .chm-qnav--next {
        flex: 1 1 auto;
        padding: 0 20px;
        background: var(--brand-action);
        color: var(--text-white);
    }

    body.omc-on .chm-step .chm-qnav--next:disabled {
        background: var(--gray-100);
        color: var(--gray-400);
        cursor: default;
    }

    /* 제출 버튼은 마지막 문항에서만 — 그때 [다음] 자리를 차지한다 */
    body.omc-on .chm-step #cpv2-exam-submit {
        display: none;
    }

    body.omc-on .chm-step.chm-q-last #cpv2-exam-submit {
        display: inline-flex;
        flex: 1 1 auto;
        justify-content: center;
        min-height: 48px;
    }

    body.omc-on .chm-step.chm-q-last .chm-qnav--next {
        display: none;
    }

    /* 결과 = 아래에서 올라오는 시트(Q3). 이모지는 작게 왼쪽, 점수·한 줄은 오른쪽, 버튼은 아래 한 줄 */
    body.omc-on .cpv2-modal.cpv2-rmodal {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        width: 100%;
        height: auto;
        max-height: 80dvh;
        padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 12px 12px 0 0;
        transform: none;
        text-align: left;
        animation: chm-sheet-up 0.22s ease-out both;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-eye,
    body.omc-on .cpv2-rmodal .cpv2-rclose {
        display: none;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-fx {
        grid-row: 1 / span 2;
        width: 64px;
        height: 64px;
        margin: 0;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-emoji {
        font-size: 34px;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-score {
        margin: 0;
        font-size: 18px;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-score b {
        font-size: 28px;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-msg {
        margin: 2px 0 0;
    }

    body.omc-on .cpv2-rmodal .cpv2-result-actions {
        grid-column: 1 / -1;
        margin-top: 18px;
    }

    body.omc-on .cpv2-rmodal .chm-rs-why {
        order: 1;
        flex: 0 0 auto;
        background: var(--gray-100);
        color: var(--gray-800);
    }

    body.omc-on .cpv2-rmodal .chm-rs-go {
        order: 2;
        flex: 1 1 auto;
        background: var(--brand-action);
        color: var(--text-white);
    }

    body.omc-on .cpv2-rmodal .cpv2-result-actions > * {
        min-height: 48px;
    }

    /* 상세 채점 = 문제마다 테두리 카드(Q5), 아래 칸이 정답(성공)·오답(오류) 면 */
    body.omc-on .cpv2-dmodal .cpv2-dq {
        margin-top: 12px;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
    }

    body.omc-on .cpv2-dmodal .cpv2-dq:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 1px solid var(--gray-200);
    }

    body.omc-on .cpv2-dmodal .cpv2-dq-head {
        margin: 0;
        padding: 12px 14px 0;
    }

    body.omc-on .cpv2-dmodal .cpv2-dq-q {
        margin: 10px 0 14px;
        padding: 0 14px;
        text-align: left;
    }

    body.omc-on .cpv2-dmodal .cpv2-dq-ans {
        margin: 0;
        padding: 12px 14px;
        border-radius: 0;
        background: var(--color-success-bg);
    }

    body.omc-on .cpv2-dmodal .cpv2-dq:has(.cpv2-dq-lab.is-wrong) .cpv2-dq-ans {
        background: var(--color-danger-bg);
    }

    body.omc-on .cpv2-dmodal .cpv2-dq-ans .cpv2-chip {
        background: var(--surface-white);
    }
}

@keyframes chm-sheet-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.omc-on .cpv2-modal.cpv2-rmodal {
        animation: none;
    }
}

/* ── 4) 신청 — 12-picks ④ E5(한 줄 진행 막대 · 큰 단계 제목 · 아래 고정 버튼) + E6(체크 표시 줄) ──
   단계는 원래 한 번에 하나만 열린다(열린 칸만 보인다). 버튼 묶음은 js/challenge-enroll.js 가 1024 이하에서 dock 으로 옮긴다 */
.chm-en-more {
    display: none;
}

@media screen and (max-width: 1024px) {
    /* 머리 — 「챌린지 신청」은 상단 바가 말한다. 기수 줄(ENROLLMENT · 22기)만 남긴다 */
    body.omc-on .chv2--enroll .chv2-en-head {
        margin-bottom: 12px;
    }

    body.omc-on .chv2--enroll .chv2-en-title,
    body.omc-on .chv2--enroll .chv2-en-sub {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* 진행 = 칸 없이 한 줄 막대(E5) — 양끝 2px, 채움 브랜드 */
    body.omc-on .chv2--enroll .chv2-en-progress-track {
        gap: 0;
        height: 6px;
        overflow: hidden;
        border-radius: 2px;
        background: var(--gray-100);
    }

    body.omc-on .chv2--enroll .chv2-en-progress-segment {
        height: 6px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    body.omc-on .chv2--enroll .chv2-en-progress-segment::after {
        border-radius: 0;
        background: var(--brand-action);
    }

    /* 단계 = 큰 제목만(번호 동그라미·단계 이름 줄은 막대가 대신한다) */
    body.omc-on .chv2--enroll .chv2-en-panel > .chv2-en-step-head {
        display: none;
    }

    body.omc-on .chv2--enroll .chv2-en-step-content {
        padding-top: 22px;
    }

    body.omc-on .chv2--enroll .chv2-en-ph {
        margin-bottom: 14px;
        font-size: 22px;
        line-height: 1.35;
        text-wrap: balance;
    }

    /* 참여 안내 = 체크 표시만 붙은 줄(E6) */
    body.omc-on .chv2--enroll .chv2-en-rules li {
        padding-left: 28px;
    }

    body.omc-on .chv2--enroll .chv2-en-rules li::before {
        top: 3px;
        left: 0;
        width: 18px;
        height: 18px;
        border-radius: 0;
        background: var(--brand-action);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    }

    /* 아래 고정 버튼(dock) — 버튼 묶음이 신청 화면 밖(body)으로 나와 신청 CSS 가 안 닿는다 → 여기서 모양을 준다 */
    body.omc-on .chm-en-dock.is-off,
    body.omc-on .chm-en-dock:empty {
        display: none;          /* :empty — 신청 JS 가 버튼을 옮겨 오기 전·스크립트가 실패했을 때 빈 줄이 칠해지지 않게 */
    }

    body.omc-on .chm-en-dock .chv2-en-nav {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    body.omc-on .chm-en-dock .chv2-en-nav[hidden],
    body.omc-on .chm-en-dock .chv2-en-nav > [hidden] {
        display: none;
    }

    body.omc-on .chm-en-dock .chv2-en-nav > button {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin: 0;
        padding: 0 16px;
        border: 0;
        border-radius: 8px;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    body.omc-on .chm-en-dock .chv2-en-prev {
        flex: 0 0 auto;
        background: none;
        color: var(--gray-700);
    }

    body.omc-on .chm-en-dock .chv2-en-next,
    body.omc-on .chm-en-dock .chv2-en-submit {
        flex: 1 1 auto;
        height: auto;
        background: var(--brand-action);
        color: var(--text-white);
    }

    body.omc-on .chm-en-dock .chv2-en-next:disabled,
    body.omc-on .chm-en-dock .chv2-en-submit:disabled {
        background: var(--gray-100);
        color: var(--gray-400);
        cursor: default;
    }
}

/* 요약 = 맥락 한 줄(04 §2-c) — 썸네일 64 · 제목 · 난이도·기간·무료, 「혜택 보기」로 편다 */
@media screen and (max-width: 820px) {
    body.omc-on .chv2--enroll .chv2-en-sum {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        padding: 12px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        box-shadow: none;
    }

    body.omc-on .chv2--enroll .chv2-en-sum-thumb {
        width: 64px;
        height: 64px;
        min-height: 0;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 6px;
        background-position: center;
        background-size: cover;
    }

    body.omc-on .chv2--enroll .chv2-en-sum-badge {
        display: none;
    }

    body.omc-on .chv2--enroll .chv2-en-sum-body {
        padding: 0;
    }

    body.omc-on .chv2--enroll .chv2-en-sum-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 15px;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.omc-on .chv2--enroll .chv2-en-sum-meta {
        margin-top: 4px;
        font-size: 12.5px;
    }

    body.omc-on .chv2--enroll .chv2-en-sum:not(.is-open) .chv2-en-sum-divider,
    body.omc-on .chv2--enroll .chv2-en-sum:not(.is-open) .chv2-en-sum-label,
    body.omc-on .chv2--enroll .chv2-en-sum:not(.is-open) .chv2-en-sum-perks,
    body.omc-on .chv2--enroll .chv2-en-sum:not(.is-open) .chv2-en-sum-foot {
        display: none;
    }

    body.omc-on .chv2--enroll .chm-en-more {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        min-height: 44px;
        margin: 0 0 -10px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--primary);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    body.omc-on .chv2--enroll .chv2-en-sum.is-open .chm-en-more svg {
        transform: rotate(180deg);
    }
}

/* ── 5) 모집 — 12-picks ② L1(미디어 위로 겹친 흰 판 · 하단 신청 바) + L3(16:9 미리보기 · 「무료」 + 전폭 버튼)
         · ③ S2(후기 가로 넘김 + 전체 보기) + S4(긴 소개 → 아이콘·굵은 제목·회색 한 줄 행, 다섯 줄 자르기) ──
   ⚠️ 이 페이지는 비회원에게 페이지 캐시로 나간다 — 마크업(page-challenge-v2.php)을 바꾸면 캐시를 비운다 */
.chm-in-free {
    display: none;
}

@media screen and (max-width: 1024px) {
    /* 첫 화면 B안 — 영상은 16:9 띠로만, 글자는 그 아래 흰 판(위 모서리 12px, 16px 겹침) */
    body.omc-on .chv2--intro .chv2-in-hero {
        padding: 0;
        overflow: visible;
        background: var(--surface-white);
        color: var(--ink);
        text-align: left;
    }

    body.omc-on .chv2--intro .chv2-in-hero-video {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        background: var(--gray-900);
    }

    body.omc-on .chv2--intro .chv2-in-hero-overlay {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-in-hero-in {
        margin-top: -16px;
        padding-top: 22px;
        padding-bottom: 18px;
        border-radius: 12px 12px 0 0;
        background: var(--surface-white);
    }

    body.omc-on .chv2--intro .chv2-in-hero .chv2-eyebrow--light {
        color: var(--primary);
    }

    body.omc-on .chv2--intro .chv2-in-h1 {
        margin-top: 8px;
        color: var(--ink);
        font-size: 26px;
    }

    body.omc-on .chv2--intro .chv2-in-sub {
        max-width: none;
        margin: 10px 0 0;
        color: var(--body);
        font-size: 15px;
    }

    body.omc-on .chv2--intro .chv2-in-badges {
        justify-content: flex-start;
        margin-top: 14px;
    }

    body.omc-on .chv2--intro .chv2-in-hero .chv2-badge--onDark {
        border: 0;
        border-radius: var(--radius-md);
        background: var(--gray-100);
        color: var(--gray-800);
    }

    body.omc-on .chv2--intro .chv2-in-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 18px;
    }

    body.omc-on .chv2--intro .chm-in-free {
        display: block;
        margin: 0 0 2px;
        color: var(--ink);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    body.omc-on .chv2--intro .chv2-in-cta .chv2-btn--light,
    body.omc-on .chv2--intro .chv2-in-cta .chv2-btn--primary {
        justify-content: center;
        width: 100%;
        min-height: 52px;
        border: 0;
        border-radius: 8px;
        background: var(--brand-action);
        color: var(--text-white);
    }

    body.omc-on .chv2--intro .chv2-in-cta .chv2-btn--onDark {
        justify-content: center;
        min-height: 44px;
        border: 0;
        background: none;
        color: var(--primary);
    }

    body.omc-on .chv2--intro .chv2-in-cta-record--onDark a {
        color: var(--primary);
    }

    /* 값 3칸(L1) — 진행 기간 · 총 과제 · 누적 참여(난이도는 배지에 있다), 흰 판에 이어 세로선으로 나눈다 */
    body.omc-on .chv2--intro .chv2-wrap--stat {
        background: var(--surface-white);
    }

    body.omc-on .chv2--intro .chv2-in-statcard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-top: 0;
        padding: 14px 0;
        border-top: 1px solid var(--gray-100);
        border-radius: 0;
        box-shadow: none;
    }

    body.omc-on .chv2--intro .chv2-in-stat:nth-child(2) {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-in-statcard .chv2-in-stat {
        padding: 2px 6px;
        border-top: 0;
        border-left: 1px solid var(--gray-100);
    }

    body.omc-on .chv2--intro .chv2-in-statcard .chv2-in-stat:first-child {
        border-left: 0;
    }

    body.omc-on .chv2--intro .chv2-in-stat-v {
        font-size: 18px;
    }

    /* 하단 신청 바(L1) — 왼쪽 상태 두 줄, 오른쪽 버튼 */
    body.omc-on .chm-in-dock {
        gap: 12px;
        padding-left: calc(16px + var(--omc-safe-l));
        transition: transform 0.2s ease, visibility 0s linear 0s;
    }

    body.omc-on .chm-in-dock.is-away {
        visibility: hidden;
        transform: translateY(calc(100% + 1px));
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }

    body.omc-on .chm-in-dock__t {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        line-height: 1.35;
    }

    body.omc-on .chm-in-dock__t b {
        overflow: hidden;
        color: var(--gray-900);   /* dock 은 body 로 옮겨져 .chv2 의 --ink 가 안 닿는다 */
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.omc-on .chm-in-dock__t span {
        overflow: hidden;
        color: var(--text-muted);
        font-size: 12.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.omc-on .chm-in-dock__btn {
        box-sizing: border-box;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        background: var(--brand-action);
        color: var(--text-white);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
    }

    body.omc-on .chm-in-dock__btn.is-disabled,
    body.omc-on .chm-in-dock__btn:disabled {
        background: var(--gray-100);
        color: var(--gray-500);
    }

    body.omc-on .chm-in-dock__btn.is-done {
        background: var(--gray-100);
        color: var(--gray-700);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.omc-on .chm-in-dock,
    body.omc-on .chm-in-dock.is-away {
        transition: none;
    }
}

/* ③ 긴 소개 줄이기 — 한 칸으로 쌓이는 860 이하 */
@media screen and (max-width: 860px) {
    body.omc-on .chv2--intro .chv2-section,
    body.omc-on .chv2--intro .chv2-fy {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    body.omc-on .chv2--intro .chv2-section-head {
        margin-bottom: 18px;
    }

    /* 특징 — 미디어 16:9 전폭, 본문은 다섯 줄에서 자르고 「더 보기」(S4 · JS 가 넣는다) */
    body.omc-on .chv2--intro .chv2-in-sig {
        gap: 16px;
        padding: 16px;
    }

    body.omc-on .chv2--intro .chv2-in-sig-img {
        max-width: none;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    body.omc-on .chv2--intro .chv2-in-sig-text.chm-clamp:not(.is-open) {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
    }

    body.omc-on .chv2--intro .chm-more {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

    /* 추천 — 사진 카드 → 체크 + 굵은 한 줄 + 회색 설명 행(S4) */
    body.omc-on .chv2--intro .chv2-fy-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 16px;
    }

    body.omc-on .chv2--intro .chv2-fy-hero {
        min-height: 0;
        overflow: visible;
        padding: 14px 0;
        border-bottom: 1px solid var(--gray-100);
        border-radius: 0;
        background: none;
    }

    body.omc-on .chv2--intro .chv2-fy-hero-img,
    body.omc-on .chv2--intro .chv2-fy-hero-ol,
    body.omc-on .chv2--intro .chv2-fy-ph--hero,
    body.omc-on .chv2--intro .chv2-fy-item-media {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-fy-hero-txt {
        position: static;
    }

    body.omc-on .chv2--intro .chv2-fy-hero-badge {
        padding: 0;
        background: none;
        color: var(--gray-500);
        font-size: 12px;
    }

    body.omc-on .chv2--intro .chv2-fy-hero-t {
        margin-top: 4px;
        color: var(--gray-800);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.55;
    }

    body.omc-on .chv2--intro .chv2-fy-items {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    body.omc-on .chv2--intro .chv2-fy-item {
        padding: 14px 0;
        border-bottom: 1px solid var(--gray-100);
    }

    body.omc-on .chv2--intro .chv2-fy-item-label {
        margin-top: 0;
    }

    body.omc-on .chv2--intro .chv2-fy-item-t {
        margin-top: 4px;
        font-size: 15px;
        font-weight: 700;
    }

    /* 후기 — 가로로 넘기는 줄, 다음 장이 걸쳐 보인다(S2). 카드 테두리 없이 세로선 하나, 나머지는 「후기 전체 보기」 */
    body.omc-on .chv2--intro .chv2-reviews-top {
        margin-bottom: 14px;
    }

    body.omc-on .chv2--intro .chv2-review-grid:not(.chv2-review-grid--more) {
        display: flex;
        gap: 0;
        margin: 0 -20px;
        padding: 0 20px 4px;
        overflow-x: auto;
        scroll-padding: 0 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    body.omc-on .chv2--intro .chv2-review-grid::-webkit-scrollbar {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-review-grid:not(.chv2-review-grid--more) .chv2-review {
        flex: 0 0 80%;
        box-sizing: border-box;
        padding: 4px 16px 4px 0;
        margin-right: 16px;
        border-right: 1px solid var(--gray-200);
        border-radius: 0;
        background: none;
        box-shadow: none;
        scroll-snap-align: start;
    }

    body.omc-on .chv2--intro .chv2-review-grid:not(.chv2-review-grid--more) .chv2-review:last-child {
        border-right: 0;
    }

    body.omc-on .chv2--intro .chv2-review-body {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
    }

    body.omc-on .chv2--intro .chv2-reviews-more,
    body.omc-on .chv2--intro .chv2-review-more-btn[data-chv2-review-more] {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-review-more-wrap {
        margin-top: 16px;
    }

    body.omc-on .chv2--intro .chv2-review-more-link {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        border-radius: 8px;
        background: var(--gray-100);
        color: var(--ink);
    }

    /* 특별한 이유 — 그림 카드 → 행(S4) */
    body.omc-on .chv2--intro .chv2-in-features {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
    }

    body.omc-on .chv2--intro .chv2-in-feature {
        overflow: visible;
        padding: 14px 0;
        border-bottom: 1px solid var(--gray-100);
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    body.omc-on .chv2--intro .chv2-in-feature-img,
    body.omc-on .chv2--intro .chv2-in-feature-visual {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-in-feature-body {
        padding: 0;
    }

    body.omc-on .chv2--intro .chv2-in-feature-body .chv2-h3 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    /* 커리큘럼 — 챕터 그림을 2:1 로 낮추고 챕터 카드를 가로로 넘긴다(S2, 다음 챕터가 걸쳐 보인다) */
    body.omc-on .chv2--intro .chv2-cur-media {
        height: auto;
        aspect-ratio: 2 / 1;
    }

    body.omc-on .chv2--intro .chv2-cur-grid {
        display: flex;
        gap: 12px;
        margin: 16px -20px 0;
        padding: 0 20px 6px;
        overflow-x: auto;
        scroll-padding: 0 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    body.omc-on .chv2--intro .chv2-cur-grid::-webkit-scrollbar {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-cur-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    body.omc-on .chv2--intro .chv2-cur-body {
        padding: 16px 16px 18px;
    }

    /* 미션 혜택 — 그림(수료증·두드림 카드)은 살리고 가로로 넘긴다(S2) */
    body.omc-on .chv2--intro .chv2-in-rewards {
        display: flex;
        gap: 12px;
        margin: 0 -20px;
        padding: 0 20px 6px;
        overflow-x: auto;
        scroll-padding: 0 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    body.omc-on .chv2--intro .chv2-in-rewards::-webkit-scrollbar {
        display: none;
    }

    body.omc-on .chv2--intro .chv2-in-reward {
        flex: 0 0 80%;
        box-sizing: border-box;
        padding: 16px;
        scroll-snap-align: start;
    }

    body.omc-on .chv2--intro .chv2-in-reward-t {
        margin-top: 12px;
    }

    body.omc-on .chv2--intro .chv2-in-reward .chv2-badge {
        margin-top: 12px;
    }

    /* 진행 방식 — 번호 행 사이를 좁힌다 */
    body.omc-on .chv2--intro .chv2-in-steps {
        margin-top: 12px;
    }

    body.omc-on .chv2--intro .chv2-in-steps .chv2-in-step {
        padding: 12px 0;
    }

    body.omc-on .chv2--intro .chv2-in-open {
        padding-top: 32px;
        padding-bottom: 40px;
    }
}

/* ── 6) 허브 — 12-picks ① H1(「참여 중인 챌린지」 절 · 카드 전체가 링크) + H2(큰 값·작은 설명 3칸 띠) ──
   절은 로그인 회원에게만 서버가 그린다. PC(1025 이상)는 허브 그대로 — 절을 숨긴다 */
.chm-mine {
    display: none;
}

@media screen and (max-width: 1024px) {
    body.omc-on .chv2--hub .chm-mine {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px 20px;
        background: var(--surface-white);
    }

    body.omc-on .chm-mine__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.omc-on .chm-mine__h {
        margin: 0;
        color: var(--ink);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    body.omc-on .chm-mine__more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--primary);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    body.omc-on .chm-mine__card {
        display: block;
        overflow: hidden;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        background: var(--surface-white);
        color: inherit;
        text-decoration: none;
    }

    body.omc-on .chm-mine__card:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    body.omc-on .chm-mine__top {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 14px 12px;
    }

    body.omc-on .chm-mine__tx {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    body.omc-on .chm-mine__no {
        color: var(--primary);
        font-size: 12.5px;
        font-weight: 700;
    }

    body.omc-on .chm-mine__t {
        display: -webkit-box;
        overflow: hidden;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.omc-on .chm-mine__s {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        color: var(--text-muted);
        font-size: 13px;
    }

    body.omc-on .chm-mine__thumb {
        flex: 0 0 96px;
        height: 54px;
        border-radius: 6px;
        background-color: var(--gray-100);
        background-position: center;
        background-size: cover;
    }

    /* 3칸 띠(H2) — 큰 값 위, 작은 설명 아래, 세로선으로 나눈다. 짙은 띠 → 옅은 회색 */
    body.omc-on .chm-mine__strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 10px 0;
        background: var(--gray-50);
    }

    body.omc-on .chm-mine__cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
        padding: 0 6px;
        text-align: center;
    }

    body.omc-on .chm-mine__cell + .chm-mine__cell {
        border-left: 1px solid var(--gray-200);
    }

    body.omc-on .chm-mine__cell b {
        color: var(--ink);
        font-size: 17px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    body.omc-on .chm-mine__cell small {
        overflow: hidden;
        color: var(--text-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.omc-on .chm-mine__cell.is-urgent b {
        color: var(--color-warning-text);
    }

    body.omc-on .chm-mine__bar {
        display: block;
        height: 4px;
        background: var(--gray-100);
    }

    body.omc-on .chm-mine__bar i {
        display: block;
        height: 100%;
        background: var(--brand-action);
    }

    /* 히어로 높이를 줄인다(04 §2-a) — 숫자 2×2 는 모바일에서 뺀다(아래 후기 섹션과 겹치는 정보) */
    body.omc-on .chv2--hub .chv2-hh-stats {
        display: none;
    }
}

/* 900 이하 = 진행 화면 한 칸(900~1024 는 PC 와 같은 두 칸이라 건드리지 않는다).
   한 칸 그리드 1fr 는 안쪽 최소 폭(가로 챕터 줄 약 436px)만큼 늘어 화면 밖으로 83px 넘쳤다 */
@media screen and (max-width: 899px) {
    body.omc-on .cpv2-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.omc-on .cpv2-grid > * {
        min-width: 0;
    }
}

/* 560 이하 퀴즈 모달(전체 화면) — 결과(.cpv2-rmodal)·상세 채점(.cpv2-dmodal)은 제 크기라 뺀다 */
@media screen and (max-width: 560px) {
    body.omc-on .cpv2-modal:not(.cpv2-rmodal):not(.cpv2-dmodal) {
        height: 100dvh;
        max-height: 100dvh;
    }
}