/**
 * 모바일 앱 틀 홈 탭(2-d) — 비회원 정리판 + 회원 홈
 * 정본 docs/mobile-app/README.md 2-d · 채용 결과 docs/mobile-app/09-picks-home-my.md
 *   H2 NAVER: 검색칸 + 그 밑 선 아이콘 바로가기를 한 판에(회원·비회원 모두 맨 위) / H3 배민: 프로모션 문구 + 작은 버튼(민트 넓은 면은 뺀다)
 *   P1 Upside: 카드 + 달력 아이콘 남은 날 + 막대 + 왼쪽 테두리 버튼 / P5 NRC: 달성값만 색을 입힌 큰 숫자·가는 막대
 *   회원 멤버십 한 줄(M1 토스 줄 짜임). 「이어서 보기」(C4·C5)는 2026-09-28 MY 허브로 옮겼다 → css/my-dashboard-mobile.css
 * ⛔ 1024 이하 + body.omc-on 에서만(inc/main-home-me.php 가 켜진 요청에만 싣는다). PC 홈은 그대로.
 * ⛔ 이 블록은 .mv3 밖이다(.mv3 [hidden]{display:none !important} 를 피해서). .mv3 토큰(--shadow-* 등)은 여기 닿지 않는다.
 * ⛔ 카드 radius 8px 리터럴(var(--radius-lg) 16px 금지) · 버튼 var(--radius-md) · 채운 버튼만 --brand-action · 그라디언트·!important 없음.
 */

@media screen and (max-width: 1024px) {
    /* 옛 모바일 첫 화면(인사 + 검색 히어로 · 7칸 바로가기)은 아래 판이 대신한다. 라이브 히어로는 남기고 그 아래 검색칸만 뺀다 */
    body.omc-on .mv3-hero,
    body.omc-on .mv3-livesearch,
    body.omc-on .mv3-quick-wrap {
        display: none;
    }

    /* 부모 .site-content 가 769px 이상에서 flex 가로 줄이라 이 블록과 .mv3 가 나란히 선다 — 줄을 넘겨 위아래로 */
    body.omc-on.page-template-page-main-v3 .site-content {
        flex-wrap: wrap;
    }

    body.omc-on .omc-home {
        display: flex;
        flex: 0 0 100%;
        flex-direction: column;
        gap: 24px;
        box-sizing: border-box;
        padding: 8px 24px 0;   /* 아래 .mv3-wrap 과 같은 좌우 여백(768~1024 24px · 767 이하 16px)이라 가장자리가 맞는다 */
        color: var(--text-primary);
    }

    /* 뒤따르는 옛 홈 구획의 위 여백을 앱 간격으로 줄인다 */
    body.omc-on .mv3-livehero,
    body.omc-on .mv3-adcard-wrap {
        margin-top: 24px;
    }

    /* 처음 보는 화면에 무료 강의가 들어오게(기획 기준 「무료 강의」 제목 y≤560) — 활동 티커는 무료 강의·쇼츠 다음으로 내린다.
       마크업은 PC 와 한 벌이라 순서는 CSS order 로만 바꾼다. 나머지(챌린지 띠·클래스·멤버십)는 원래 순서 그대로 */
    body.omc-on .mv3 {
        display: flex;
        flex-direction: column;
    }

    body.omc-on .mv3 > * {
        order: 3;
    }

    body.omc-on .mv3 > .mv3-livehero,
    body.omc-on .mv3 > .mv3-livesearch,
    body.omc-on .mv3 > .mv3-hero,
    body.omc-on .mv3 > .mv3-adcard-wrap,
    body.omc-on .mv3 > .mv3-quick-wrap {
        order: 0;
    }

    body.omc-on .mv3 > .mv3-body:not(.mv3-body--challenge-after) {
        order: 1;
    }

    body.omc-on .mv3 > .mv3-ticker {
        order: 2;
        margin-top: 28px;
    }

    body.omc-on .mv3-ticker-sub {
        display: none;
    }

    body.omc-on .mv3-body {
        padding-top: 28px;
    }
}

@media screen and (max-width: 767px) {
    body.omc-on .omc-home {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── 부품(보이는 조건은 위 규칙) ── */
body.omc-on .omc-home-hi {
    margin: 8px 0 -8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--gray-900);
}

body.omc-on .omc-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

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

body.omc-on .omc-home-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -12px 0;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

/* H2 — 검색칸 + 바로가기 4칸을 옅은 회색 판 하나에 */
body.omc-on .omc-home-panel {
    padding: 12px 12px 4px;
    border-radius: 8px;
    background: var(--gray-50);
}

body.omc-on .omc-home-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    color: var(--text-muted);
    font: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

body.omc-on .omc-home-search svg {
    flex: 0 0 auto;
    color: var(--gray-700);
}

body.omc-on .omc-home-short {
    display: grid;
    grid-template-columns: repeat(var(--omc-short-cols, 4), minmax(0, 1fr));
    margin-top: 4px;
}

body.omc-on .omc-home-short__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    word-break: keep-all;      /* 운영자가 고친 긴 이름은 낱말 사이에서 두 줄로 */
    overflow-wrap: anywhere;   /* 띄어쓰기 없는 긴 낱말이 옆 칸으로 넘치지 않게 */
}

body.omc-on .omc-home-short__ic {
    color: var(--gray-700);
    line-height: 0;
}

body.omc-on .omc-home-short__ic svg {
    stroke-width: 1.6;
}

/* H3 — 프로모션 두 줄 + 작은 채운 버튼. 넓은 색 면 없이 hairline 구획 */
body.omc-on .omc-home-promo {
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--surface-white);
}

body.omc-on .omc-home-promo__tag {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-700);
}

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

body.omc-on .omc-home-promo__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

body.omc-on .omc-home-promo__btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    margin-top: 12px;
    padding: 0 12px 0 16px;
    border-radius: var(--radius-md);
    background: var(--brand-action);
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

body.omc-on .omc-home-promo__btn:active {
    background: var(--brand-hover);
}

/* 멤버십 한 줄(.omc-home-ms)은 홈·레슨 끝이 같이 쓴다 → css/mobile-chrome.css §9 로 옮겼다(2026-09-29) */

/* P1 + P5 — 진행 중 챌린지 카드 */
body.omc-on .omc-chal__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: var(--gray-50);
}

body.omc-on .omc-chal__no,
body.omc-on .omc-chal__title,
body.omc-on .omc-chal__bar,
body.omc-on .omc-chal__btn {
    grid-column: 1 / -1;
}

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

body.omc-on .omc-chal__title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gray-900);
}

body.omc-on .omc-chal__num {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* 달성값만 색(P5) */
body.omc-on .omc-chal__num b {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
}

body.omc-on .omc-chal__due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 3px;
    font-size: 13px;
    color: var(--text-secondary);
}

body.omc-on .omc-chal__due.is-urgent {
    color: var(--color-danger-text);
    font-weight: 600;
}

body.omc-on .omc-chal__bar {
    height: 4px;
    margin: 10px 0 14px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--gray-200);
}

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

/* 왼쪽 테두리 버튼(P1) — 알약 대신 버튼 radius */
body.omc-on .omc-chal__btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    color: var(--gray-900);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

body.omc-on .omc-home a:focus-visible,
body.omc-on .omc-home button:focus-visible {
    outline: 2px solid var(--chrome-focus);
    outline-offset: 2px;
}