/* =====================================================================
   mathloop 홍보 웹사이트 (mathloop.co.kr) — DESIGN.md 토큰 1:1
   2026-10-09 디자인 개편: 따뜻한 뉴트럴 + 다크 프레임(내비·히어로·푸터) + 낮은 라운드(4/6/8/12)
   + 그림자 대신 1px 보더 + 컴팩트 타이포. 참고: designmd.ai command-center.
   Loop Orange #FF6B00 · Ink #1F1B17 · Shell #141210 · Noto Sans KR
   ===================================================================== */
:root {
    /* brand (유지) */
    --ml-primary: #FF6B00;
    --ml-primary-hover: #E55F00;
    --ml-primary-subtle: #FFF4EC;
    --ml-primary-light: #FF951C;
    /* warm neutrals */
    --ml-ink: #1F1B17;                 /* text/primary · brand/secondary */
    --ml-bg: #FFFFFF;                  /* bg/base — 카드·인풋·모달·흰 섹션 */
    --ml-bg-subtle: #F7F5F1;           /* bg/subtle — 페이지 캔버스·표 헤더 */
    --ml-bg-muted: #ECE9E4;            /* bg/muted — 비활성·구분 영역 */
    --ml-text: #1F1B17;
    --ml-text-2: #423D38;
    --ml-muted: #797067;
    --ml-disabled: #A9A298;
    --ml-border: #E3E0DD;
    --ml-border-strong: #CFC9C2;
    /* dark shell (프레임: 내비·히어로·CTA·푸터) */
    --ml-shell: #141210;
    --ml-shell-glass: rgba(20, 18, 16, .88);
    --ml-shell-border: rgba(255, 255, 255, .10);
    --ml-on-shell: #FFFFFF;
    --ml-on-shell-muted: rgba(255, 255, 255, .64);
    /* feedback (유지) */
    --ml-success: #16A34A;
    --ml-success-subtle: #DCFCE7;
    --ml-error: #DC2626;
    --ml-error-subtle: #FEE2E2;
    --ml-warning: #D97706;
    --ml-warning-subtle: #FEF3C7;
    --ml-info: #2563EB;
    --ml-info-subtle: #DBEAFE;
    /* radius 4/6/8/12 */
    --ml-r-sm: 4px;
    --ml-r-md: 6px;
    --ml-r-lg: 8px;
    --ml-r-xl: 12px;
    /* elevation — 보더 우선, 그림자는 모달·드롭다운만 */
    --ml-shadow-sm: 0 1px 2px rgba(31, 27, 23, .05);
    --ml-shadow-md: 0 2px 8px rgba(31, 27, 23, .08);
    --ml-shadow-lg: 0 12px 32px rgba(31, 27, 23, .16);
    --ml-ring: 0 0 0 2px rgba(255, 107, 0, .22);
}

html { scroll-behavior: smooth; }
.ml-body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: var(--ml-text);
    background: var(--ml-bg-subtle);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.005em;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ml-primary); text-decoration: none; }
a:hover { color: var(--ml-primary-hover); }
b, strong { font-weight: 700; }
h1, h2, h3, h4, .ml-h2, .ml-page-title, .ml-hero-title, .ml-auth-title { letter-spacing: -0.02em; }

/* ── 버튼 (radius/md 6 · 1px 보더 · sm 32 · md 36 · lg 44) ── */
/* <a>·<button> 이 같은 상자·같은 세로 정렬로 그려지도록 inline-flex 중앙 정렬 (2026-09-30 내비 높이 불일치 수정 유지) */
.btn { border-radius: var(--ml-r-md); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; padding: 0 16px; height: 36px; line-height: 1; border-width: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-family: inherit; vertical-align: middle; transition: background-color .12s, border-color .12s, color .12s; }
.btn.btn-sm { height: 32px; line-height: 1; padding: 0 12px; font-size: 13px; }
.btn.btn-lg { height: 44px; line-height: 1; padding: 0 22px; font-size: 15px; }
.btn:disabled, .btn.disabled { opacity: .4; }
.btn-ml-primary { background: var(--ml-primary); border-color: var(--ml-primary); color: #fff; }
.btn-ml-primary:hover, .btn-ml-primary:focus { background: var(--ml-primary-hover); border-color: var(--ml-primary-hover); color: #fff; }
.btn-ml-secondary { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff; }
.btn-ml-secondary:hover, .btn-ml-secondary:focus { background: #000; border-color: #000; color: #fff; }
.btn-ml-ghost { background: transparent; border-color: rgba(255, 107, 0, .45); color: var(--ml-primary); }
.btn-ml-ghost:hover, .btn-ml-ghost:focus { background: var(--ml-primary-subtle); border-color: var(--ml-primary); color: var(--ml-primary-hover); }
.btn-ml-outline { background: var(--ml-bg); border-color: var(--ml-border-strong); color: var(--ml-text); }
.btn-ml-outline:hover { background: var(--ml-bg-subtle); color: var(--ml-text); border-color: var(--ml-muted); }
.btn-ml-danger { background: var(--ml-bg); border-color: var(--ml-error); color: var(--ml-error); }
.btn-ml-danger:hover { background: var(--ml-error); color: #fff; border-color: var(--ml-error); }
.btn:focus-visible { box-shadow: var(--ml-ring); outline: none; }

/* ── 인풋 (38px · radius/md · 1px 보더 · 포커스 오렌지 2px 링) ── */
.form-control, .form-select { height: 38px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-border-strong); background-color: var(--ml-bg); font-size: 14px; color: var(--ml-text); padding: 0 12px; }
.form-control:focus, .form-select:focus { border-color: var(--ml-primary); box-shadow: var(--ml-ring); background-color: var(--ml-bg); }
.form-control::placeholder { color: var(--ml-disabled); }
.form-control.is-invalid { border-color: var(--ml-error); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, .18); }
.form-control[readonly] { background: var(--ml-bg-muted); color: var(--ml-muted); }
.form-label { font-size: 12px; font-weight: 600; color: var(--ml-text-2); margin-bottom: 6px; }
.form-text { font-size: 12px; color: var(--ml-muted); }
.form-check-input { width: 18px; height: 18px; border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-sm); margin-top: 2px; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--ml-primary); border-color: var(--ml-primary); }   /* 일부 선택(추천 학교 지역 체크, 2026-10-20)도 주황 — Bootstrap 은 [type=checkbox]:indeterminate 로 더 구체적이라 같은 선택자로 덮는다 */
.form-check-input:focus { box-shadow: var(--ml-ring); border-color: var(--ml-primary); }
.form-check-label { font-size: 14px; }
.ml-field-error { font-size: 12px; color: var(--ml-error); margin-top: 6px; display: none; }
.ml-field-error.show { display: block; }

/* ── 상단 내비 (56px · 다크 글래스 셸) ── */
.ml-nav { position: sticky; top: 0; z-index: 1020; background: var(--ml-shell-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ml-shell-border); color: var(--ml-on-shell); }
/* 2026-10-12 내비 개편: PC 는 로고 | 메뉴(가운데) | 버튼 3열 그리드, 메뉴 15px SemiBold 흰 88%(이전 13px 흰 64% — 어둡고 작아 안 보임), 호버·활성 = 흰색 + 오렌지 2px 하단선, 버튼 = 아이콘 + 3단계 */
.ml-nav-inner { height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.ml-nav-logo { grid-column: 1; justify-self: start; }
.ml-nav-logo img { display: block; height: 20px; width: auto; }
.ml-nav-links { grid-column: 2; justify-self: center; display: flex; gap: 32px; }
.ml-nav-links a { position: relative; display: inline-flex; align-items: center; height: 56px; color: rgba(255, 255, 255, .88); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.ml-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ml-primary); transform: scaleX(0); transition: transform .15s; }
.ml-nav-links a:hover, .ml-nav-links a.active { color: var(--ml-on-shell); }
.ml-nav-links a:hover::after, .ml-nav-links a.active::after { transform: scaleX(1); }
.ml-nav-actions { grid-column: 3; justify-self: end; display: flex; gap: 8px; align-items: center; }   /* 열 고정: 메뉴가 display:none 인 모바일에서 버튼이 가운데 열로 밀려 들어가지 않게 */
.ml-nav-actions form { display: contents; }   /* 로그아웃 form 을 감싸지 않고 버튼을 flex 항목으로 */
.ml-nav-actions .btn i { font-size: 15px; line-height: 1; }
.ml-nav-btn { height: 36px; padding: 0 14px; font-size: 14px; }
.ml-nav .btn-ml-ghost { color: var(--ml-on-shell); border-color: rgba(255, 255, 255, .45); }
.ml-nav .btn-ml-ghost:hover, .ml-nav .btn-ml-ghost:focus { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .8); color: var(--ml-on-shell); }
.ml-nav-textbtn { height: 32px; padding: 0 10px; font-size: 13px; font-weight: 500; background: transparent; border-color: transparent; color: var(--ml-on-shell-muted); }
.ml-nav-textbtn:hover, .ml-nav-textbtn:focus { color: var(--ml-on-shell); background: rgba(255, 255, 255, .08); border-color: transparent; }
[id] { scroll-margin-top: 64px; }   /* 앵커 이동 시 sticky 내비(56px) 아래로 제목이 숨지 않게 */
/* <1200: 로그아웃은 아이콘만(버튼 3개 폭이 1fr 을 넘어 메뉴 중심이 밀리던 것) · <576: 마이페이지도 아이콘만(3개가 컨테이너를 6px 넘침) */
@media (max-width: 1199.98px) {
    .ml-nav-textbtn span { display: none; }
    .ml-nav-textbtn { width: 32px; padding: 0; justify-content: center; }
    .ml-nav-textbtn i { font-size: 17px; }
}
.ml-main { min-height: calc(100vh - 56px - 200px); overflow-x: hidden; overflow-x: clip; }   /* .row.g-5 의 음수 거터가 992·420px 에서 문서 폭을 넘겨 가로 스크롤이 생기던 것(기존) */

/* ── 섹션 공통 ── */
.ml-section { padding: 64px 0; }
.ml-section.alt { background: var(--ml-bg); border-top: 1px solid var(--ml-border); border-bottom: 1px solid var(--ml-border); }
.ml-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ml-muted); margin-bottom: 10px; text-transform: uppercase; }
.ml-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--ml-primary); flex: none; }
.ml-h2 { font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; color: var(--ml-text); }
.ml-lead { font-size: 15px; line-height: 1.75; color: var(--ml-text-2); }
.ml-lead b { color: var(--ml-text); }
.ml-note { font-size: 12px; color: var(--ml-muted); }

/* ── 히어로 (다크 셸 — 내비와 한 덩어리) ── */
/* 히어로 — 2026-10-12 밝은 배경(bg/base)으로 전환: 첫 화면이 너무 어둡다는 피드백. 다크 셸은 내비·CTA·푸터만 유지(DESIGN.md Hero 절) */
.ml-hero { background: var(--ml-bg); color: var(--ml-text); padding: 72px 0 64px; position: relative; overflow: hidden; border-bottom: 1px solid var(--ml-border); }
.ml-hero-symbol { position: relative; width: 24px; height: 24px; margin-bottom: 20px; }
.ml-hero-symbol::before, .ml-hero-symbol::after { content: ""; position: absolute; width: 12px; height: 12px; }
.ml-hero-symbol::before { top: 0; right: 0; background: var(--ml-primary); }
.ml-hero-symbol::after { bottom: 0; left: 0; background: var(--ml-primary-light); }
.ml-hero-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ml-muted); margin-bottom: 14px; }
.ml-hero-title { font-size: 40px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 16px; }
.ml-hero-desc { font-size: 16px; line-height: 1.75; color: var(--ml-text-2); max-width: 600px; }
.ml-hero-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 0 12px; height: 30px; border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-sm); background: var(--ml-bg-subtle); font-size: 12px; font-weight: 600; color: var(--ml-text); }
.ml-hero-badge i { color: var(--ml-primary); font-size: 13px; }
.ml-hero-cta { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.ml-hero-cta .btn { min-width: 160px; }
/* 캡처 이미지: 마크업의 width/height 속성(CLS 방지)은 유지하고 height:auto 로 비율 보존 — 이전엔 높이 834px 고정 + 폭 100% 라 세로로 늘어나 깨져 보였음 */
.ml-hero-shot { width: 100%; height: auto; display: block; border-radius: var(--ml-r-lg); border: 1px solid var(--ml-border); box-shadow: 0 24px 48px -24px rgba(31, 27, 23, .28); }

/* ── 숫자 그리드 (1px 구분선 그리드 — 표처럼) ── */
.ml-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ml-border); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); overflow: hidden; }
.ml-stat { background: var(--ml-bg); padding: 20px 18px 18px; }
.ml-stat-num { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ml-text); }
.ml-stat-unit { font-size: 13px; font-weight: 600; margin-left: 3px; color: var(--ml-muted); }
.ml-stat-label { font-size: 13px; font-weight: 600; margin: 8px 0 2px; }
.ml-stat-sub { font-size: 12px; color: var(--ml-muted); line-height: 1.5; }
.ml-stat.inverse { background: var(--ml-ink); color: var(--ml-on-shell); }
.ml-stats.two { grid-template-columns: repeat(2, 1fr); }   /* 소개 이미지 옆(2026-10-16) */
.ml-stat.inverse .ml-stat-num { color: var(--ml-on-shell); }
.ml-stat.inverse .ml-stat-unit, .ml-stat.inverse .ml-stat-sub { color: var(--ml-on-shell-muted); }
.ml-stat.inverse .ml-stat-label { color: var(--ml-primary-light); }
.ml-goal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 16px 20px; border-radius: var(--ml-r-lg); border: 1px solid var(--ml-border); border-left: 3px solid var(--ml-primary); background: var(--ml-bg); }
.ml-goal i { font-size: 20px; color: var(--ml-primary); }
.ml-goal-num { font-size: 20px; font-weight: 700; color: var(--ml-text); }
.ml-goal-desc { font-size: 14px; color: var(--ml-text-2); }

/* ── 소개 이미지 (2026-10-16 — 리드 문단·콘텐츠 칩 대신): 선생님이 태블릿으로 매쓰루프를 쓰는 사진(AI 생성 + 실제 앱 화면 합성, 3:2 그대로 — 자르지 않는다) + 범례 ── */
.ml-about-visual { margin: 0; }
.ml-about-media { border-radius: var(--ml-r-xl); background: var(--ml-bg-muted); overflow: hidden; }
.ml-about-media img { display: block; width: 100%; height: auto; }
.ml-about-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ml-text-2); }
.ml-about-legend i { color: var(--ml-primary); margin-right: 6px; }

/* ── 카드 (보더만, 그림자 없음) ── */
.ml-card { background: var(--ml-bg); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); padding: 20px; height: 100%; }
.ml-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.ml-card-desc { font-size: 14px; line-height: 1.65; color: var(--ml-text-2); }
.ml-icon { width: 32px; height: 32px; border-radius: var(--ml-r-md); background: var(--ml-bg-subtle); border: 1px solid var(--ml-border); color: var(--ml-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 14px; }
.ml-step-num { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ml-primary); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ml-check { font-size: 14px; line-height: 2.0; }
.ml-check i { color: var(--ml-primary); margin-right: 8px; font-size: 14px; }

/* ── 화면 캡처 (2026-10-16: 테두리 대신 색면 + 그림자 — 특징 이미지와 같은 결) ── */
.ml-shot-box { border-radius: var(--ml-r-lg); background: var(--ml-bg-subtle); padding: 16px; height: 220px; cursor: zoom-in; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.ml-shot-box:hover { transform: translateY(-2px); }
.ml-shot-box:not(.phone) { height: auto; aspect-ratio: 10 / 7; }   /* 선생님 화면(1194×834) 비율 칸 — 고정 220px 이면 휴대폰 2열에서 이미지가 작게 떠 있었다 */
.ml-shot-box.phone { height: 300px; }
.ml-shot-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--ml-r-md); box-shadow: 0 12px 28px -14px rgba(31, 27, 23, .42); }
.ml-shot-box.phone img { border-radius: 14px; }
.ml-shot-caption { font-size: 13px; font-weight: 600; margin-top: 8px; text-align: center; color: var(--ml-text-2); }

/* ── 앱 스토어 (2026-10-20 — 두 앱 App Store · Google Play 출시): 랜딩 #apps 앱 행(아이콘 · 이름 · 기기 + 배지) · 마이페이지 앱 안내(배지만, web/partials/storeBadges).
      배지 = Apple · Google 공식 한국어 이미지를 고치지 않고 높이 40 그대로(Apple 화면 최소 높이 40px · 배지 사이 여백 = 높이의 1/4 이상, 호버 효과도 넣지 않는다) — 좁은 폭에서는 이름 아래로 줄바꿈 ── */
.ml-store { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); background: var(--ml-bg-subtle); }
.ml-store-icon { width: 48px; height: 48px; border-radius: var(--ml-r-xl); flex: none; }
.ml-store-name { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.ml-store-name b { font-size: 15px; font-weight: 700; color: var(--ml-text); }
.ml-store-name span { font-size: 12px; color: var(--ml-muted); }
.ml-store-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.ml-store-badges a { display: block; line-height: 0; border-radius: var(--ml-r-md); }
.ml-store-badges a:focus-visible { outline: 2px solid var(--ml-primary); outline-offset: 2px; }
.ml-store-badges img { display: block; height: 40px; width: auto; }

/* ── 구독 상세 표 ── */
.ml-info-row { display: flex; padding: 12px 0; border-bottom: 1px solid var(--ml-border); font-size: 14px; line-height: 1.7; }
.ml-info-row:last-child { border-bottom: none; }
.ml-info-label { width: 120px; min-width: 120px; font-weight: 700; color: var(--ml-text); }

/* ── CTA 밴드 (다크 셸 패널) ── */
.ml-cta { background: var(--ml-shell); color: var(--ml-on-shell); border: 1px solid var(--ml-shell-border); border-radius: var(--ml-r-lg); padding: 44px 32px; text-align: center; }
.ml-cta .ml-h2 { margin-bottom: 8px; color: var(--ml-on-shell); }
.ml-cta .ml-lead { color: rgba(255, 255, 255, .78); max-width: 720px; margin-left: auto; margin-right: auto; }
.ml-cta .ml-note { color: var(--ml-on-shell-muted); }
.ml-cta .btn-ml-secondary { background: transparent; border-color: rgba(255, 255, 255, .32); color: var(--ml-on-shell); }
.ml-cta .btn-ml-secondary:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); }

/* ── 인증 카드 (로그인/회원가입/비밀번호/초대) ── */
.ml-auth-wrap { padding: 48px 0 72px; background: var(--ml-bg-subtle); min-height: calc(100vh - 56px); }
.ml-auth { max-width: 440px; margin: 0 auto; background: var(--ml-bg); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); padding: 32px 32px 28px; box-shadow: var(--ml-shadow-sm); }
.ml-auth.wide { max-width: 560px; }
.ml-auth-logo { display: block; height: 30px; width: auto; margin: 0 auto 20px; }
.ml-auth-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.ml-auth-sub { font-size: 13px; color: var(--ml-muted); text-align: center; margin-bottom: 24px; line-height: 1.6; }
.ml-auth-links { display: flex; justify-content: center; gap: 14px; font-size: 13px; color: var(--ml-muted); margin-top: 20px; }
.ml-auth-links a { color: var(--ml-text-2); }
.ml-auth-links a:hover { color: var(--ml-primary); }
.ml-steps { display: flex; gap: 4px; margin-bottom: 24px; }
.ml-steps span { flex: 1; height: 3px; border-radius: 1px; background: var(--ml-bg-muted); }
.ml-steps span.on { background: var(--ml-primary); }
.ml-code-row { display: flex; gap: 6px; }
.ml-code-row .form-control { flex: 1; }
.ml-code-row .btn { white-space: nowrap; height: 38px; line-height: 1; }
.ml-timer { font-size: 12px; color: var(--ml-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-agree-box { border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); padding: 12px 14px; background: var(--ml-bg-subtle); }
.ml-agree-box .form-check { margin-bottom: 6px; }
.ml-agree-box .form-check:last-child { margin-bottom: 0; }
.ml-agree-box a { font-size: 12px; margin-left: 6px; }
.ml-alert { border-radius: var(--ml-r-md); font-size: 13px; line-height: 1.6; padding: 10px 12px; border: 1px solid transparent; }
.ml-alert.success { background: var(--ml-success-subtle); color: #14532D; border-color: #BBF7D0; }
.ml-alert.error { background: var(--ml-error-subtle); color: #7F1D1D; border-color: #FECACA; }
.ml-alert.info { background: var(--ml-info-subtle); color: #1E3A8A; border-color: #BFDBFE; }
.ml-alert.brand { background: var(--ml-bg); color: var(--ml-text); border-color: var(--ml-border-strong); border-left: 3px solid var(--ml-primary); }

/* ── 마이페이지 ── */
.ml-page { padding: 40px 0 72px; background: var(--ml-bg-subtle); }
.ml-page-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.ml-panel { background: var(--ml-bg); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); margin-bottom: 16px; overflow: hidden; }
.ml-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ml-border); background: var(--ml-bg-subtle); min-height: 48px; }
.ml-panel-head h3 { font-size: 14px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.ml-panel-head h3 i { color: var(--ml-muted); font-size: 15px; }
.ml-panel-head.brand { background: var(--ml-shell); color: var(--ml-on-shell); border-bottom-color: var(--ml-shell); }
.ml-panel-body { padding: 4px 20px; }
.ml-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ml-border); font-size: 14px; }
.ml-row:last-child { border-bottom: none; }
.ml-row-label { width: 120px; min-width: 120px; color: var(--ml-muted); font-weight: 500; font-size: 13px; }
.ml-row-value { flex: 1; color: var(--ml-text); word-break: break-all; }
.ml-row-actions { display: flex; gap: 6px; }
.ml-row-link { white-space: nowrap; flex-shrink: 0; margin-left: auto; font-size: 13px; }   /* 행 오른쪽 링크(요금 안내 보기) — 줄바꿈 금지 */
.ml-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--ml-r-sm); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ml-badge.success { background: var(--ml-success-subtle); color: #15803D; }
.ml-badge.secondary { background: var(--ml-bg-muted); color: var(--ml-muted); }
.ml-badge.danger { background: var(--ml-error-subtle); color: #B91C1C; }
.ml-badge.warning { background: var(--ml-warning-subtle); color: #B45309; }
.ml-badge.info { background: var(--ml-info-subtle); color: #1D4ED8; }
.ml-table { font-size: 13px; margin: 0; }
.ml-table thead th { background: var(--ml-bg-subtle); font-size: 12px; font-weight: 600; color: var(--ml-text-2); border-bottom: 1px solid var(--ml-border); padding: 10px 10px; white-space: nowrap; }
.ml-table td { padding: 11px 10px; border-bottom: 1px solid var(--ml-border); vertical-align: middle; }
.ml-table tr:last-child td { border-bottom: none; }
.ml-table tr.table-active td { background: var(--ml-primary-subtle); box-shadow: none; }
.table-sm { font-size: 13px; }
.table-sm thead th { font-size: 12px; font-weight: 600; color: var(--ml-text-2); background: var(--ml-bg-subtle); white-space: nowrap; }
.ml-app-box { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; font-size: 14px; }
.ml-app-box .ml-icon { margin: 0; flex: none; }

/* ── 약관 ── */
.ml-doc { max-width: 820px; margin: 0 auto; padding: 48px 0 72px; font-size: 14px; line-height: 1.8; color: var(--ml-text-2); }
.ml-doc h1 { font-size: 24px; font-weight: 700; color: var(--ml-text); margin-bottom: 6px; }
.ml-doc h2 { font-size: 17px; font-weight: 700; color: var(--ml-text); margin: 32px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ml-border); }
.ml-doc h3 { font-size: 14px; font-weight: 700; color: var(--ml-text); margin: 20px 0 4px; }
.ml-doc ol, .ml-doc ul { padding-left: 22px; }
.ml-doc table { font-size: 13px; background: var(--ml-bg); }
.ml-doc .ml-note { margin-bottom: 24px; }

/* ── 푸터 (다크 셸) ── */
.ml-footer { border-top: 1px solid var(--ml-shell-border); background: var(--ml-shell); color: var(--ml-on-shell-muted); padding: 32px 0 36px; }
.ml-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ml-shell-border); }
.ml-footer-links { display: flex; gap: 18px; font-size: 13px; }
.ml-footer-links a { color: rgba(255, 255, 255, .82); }
.ml-footer-links a:hover { color: var(--ml-on-shell); }
.ml-footer-info { font-size: 12px; color: rgba(255, 255, 255, .5); line-height: 1.9; }
.ml-footer-info a { color: rgba(255, 255, 255, .64); }
.ml-footer-info a:hover { color: var(--ml-on-shell); }

/* ── 토스트 ── */
.ml-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); background: var(--ml-ink); color: #fff; padding: 10px 16px; border-radius: var(--ml-r-md); font-size: 13px; box-shadow: var(--ml-shadow-lg); border: 1px solid rgba(255, 255, 255, .12); opacity: 0; pointer-events: none; transition: all .18s; z-index: 2000; max-width: calc(100vw - 32px); }
.ml-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ml-toast.error { background: var(--ml-error); }
.ml-toast.success { background: var(--ml-success); }

/* ── 모달 (radius/xl 12 · 보더 + shadow/lg) ── */
.modal-content { border-radius: var(--ml-r-xl); border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--ml-border); padding: 14px 20px; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--ml-border); padding: 12px 20px; background: var(--ml-bg-subtle); border-bottom-left-radius: var(--ml-r-xl); border-bottom-right-radius: var(--ml-r-xl); }
.ml-img-modal .modal-content { background: transparent; border: none; box-shadow: none; }
.ml-img-modal img { width: 100%; border-radius: var(--ml-r-lg); border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow-lg); background: #fff; }

/* ── 반응형 ── */
@media (max-width: 991.98px) {
    .ml-hero { padding: 48px 0; }
    .ml-hero-title { font-size: 30px; }
    .ml-hero-desc { font-size: 15px; }
    .ml-hero-shot { margin-top: 28px; }
    .ml-section { padding: 48px 0; }
    .ml-h2 { font-size: 21px; }
    .ml-stat-num { font-size: 22px; }
    .ml-info-row { flex-direction: column; }
    .ml-info-label { width: 100%; margin-bottom: 2px; }
    .ml-goal { padding: 14px 16px; }
    .ml-goal-desc { width: 100%; }
}
@media (max-width: 575.98px) {
    .ml-nav-inner { gap: 12px; }
    .ml-nav-btn { padding: 0 10px; font-size: 13px; height: 34px; }
    .ml-nav-btn.ml-nav-btn-compact span { display: none; }
    .ml-nav-btn.ml-nav-btn-compact { width: 34px; padding: 0; justify-content: center; }
    .ml-nav-btn.ml-nav-btn-compact i { font-size: 17px; }
    .ml-stats { grid-template-columns: repeat(2, 1fr); }
    .ml-auth { padding: 24px 18px; }
    .ml-auth-wrap { padding: 20px 0 44px; }
    .ml-row { flex-wrap: wrap; }
    .ml-row-label { width: 100%; }
    .ml-row-actions { width: 100%; justify-content: flex-end; }
    .ml-page-title { font-size: 20px; }
    .ml-cta { padding: 28px 18px; }
}

/* ── 랜딩 재구성 (2026-10-09): 학습 루프 도식 · 특징 교차 배치 · 칩 · 스테퍼 · 접힘 버튼 (소개의 태그 칩은 2026-10-16 이미지로 대체돼 삭제) ── */
.ml-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-chips span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); background: var(--ml-bg-subtle); font-size: 13px; font-weight: 500; color: var(--ml-text-2); }

.ml-loop { display: flex; align-items: stretch; gap: 8px; }
/* 2026-10-16: 단계마다 사람이 행동하는 사진(AI 생성 640×516) — 카드 = bg/subtle 색면(테두리 없음), 사진 칸 비율 = 사진 비율(잘리지 않게) */
.ml-loop-step { flex: 1 1 0; background: var(--ml-bg-subtle); border-radius: var(--ml-r-lg); padding: 10px 10px 16px; position: relative; min-width: 0; }
.ml-loop-media { aspect-ratio: 640 / 516; overflow: hidden; border-radius: var(--ml-r-md); background: var(--ml-bg-muted); margin-bottom: 14px; }
.ml-loop-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-loop-body { padding: 0 6px; }
.ml-loop-no { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ml-primary); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.ml-loop-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.ml-loop-desc { font-size: 13px; line-height: 1.55; color: var(--ml-muted); }
.ml-loop-arrow { flex: 0 0 auto; display: flex; align-items: center; color: var(--ml-disabled); font-size: 18px; }
.ml-loop-return { margin-top: 10px; display: flex; justify-content: flex-end; }
.ml-loop-return span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ml-text-2); padding: 6px 12px; border: 1px dashed var(--ml-border-strong); border-radius: var(--ml-r-sm); background: var(--ml-bg); }
.ml-loop-return i { color: var(--ml-primary); font-size: 14px; }

/* 특징 (2026-10-16 개편): 항목 사이 구분선·이미지 이중 테두리 없이 — 웜 뉴트럴 색면(bg/muted, 그라데이션·글로우 없음) 위에 그림자 진 화면. 태블릿 화면은 색면 아래로 이어지고(위 모서리만 둥글게), 휴대폰은 떠 있게 */
.ml-feature { padding: 40px 0; }
.ml-feature:first-of-type { padding-top: 28px; }
.ml-feature-media { position: relative; overflow: hidden; border-radius: var(--ml-r-xl); background: var(--ml-bg-muted); }
.ml-feature-media img { position: relative; display: block; }
.ml-feature-media.wide { padding: 40px 40px 0; }
.ml-feature-media.wide img { width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 24px 56px -22px rgba(31, 27, 23, .40); }
.ml-feature-media.phone { padding: 40px 0; display: flex; justify-content: center; }
.ml-feature-media.phone img { width: auto; max-width: 100%; height: 440px; border-radius: 26px; box-shadow: 0 28px 56px -22px rgba(31, 27, 23, .42); }   /* 고정 높이 + <img width height> 비율 → 로드 전에도 같은 자리(앵커 진입 시 아래 섹션이 밀리지 않게, 2026-10-13) */
.ml-feature-no { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ml-primary); margin-bottom: 8px; }
.ml-feature-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.3; }
.ml-feature-desc { font-size: 15px; line-height: 1.7; color: var(--ml-text-2); margin-bottom: 14px; }
.ml-feature-points { list-style: none; padding: 0; margin: 0; }
.ml-feature-points li { font-size: 14px; line-height: 1.9; color: var(--ml-text); }
.ml-feature-points li i { color: var(--ml-primary); margin-right: 8px; font-size: 15px; }

.ml-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ml-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ml-step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border-radius: var(--ml-r-sm); background: var(--ml-ink); color: var(--ml-on-shell); font-size: 12px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; flex: none; }
.ml-step-line { flex: 1; height: 1px; background: var(--ml-border-strong); }
.ml-step:last-child .ml-step-line { background: linear-gradient(to right, var(--ml-border-strong), transparent); }
.ml-step-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.ml-step-desc { font-size: 13px; line-height: 1.6; color: var(--ml-muted); }

.ml-collapse-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--ml-bg); border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--ml-text-2); font-family: inherit; cursor: pointer; transition: border-color .12s; }
.ml-collapse-btn:hover { border-color: var(--ml-border-strong); color: var(--ml-text); }
.ml-collapse-btn i { color: var(--ml-primary); transition: transform .18s; }
.ml-collapse-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.ml-collapse-sub { font-weight: 400; color: var(--ml-muted); margin-left: 4px; }

.ml-hero-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 13px; color: var(--ml-muted); }   /* 히어로 → 문의 폼 바로 가기 */
.ml-hero-link b { color: var(--ml-text); font-weight: 600; margin-left: 2px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ml-border-strong); }
.ml-hero-link i { color: var(--ml-primary); font-size: 18px; line-height: 1; }
.ml-hero-link:hover { color: var(--ml-text-2); }
.ml-hero-link:hover b { color: var(--ml-primary); text-decoration-color: var(--ml-primary); }

/* ── 문의 (랜딩 #contact, 2026-10-13) — 좌: 안내·연락처 / 우: 폼 카드. 접수 완료는 같은 카드 안에서 교체 ── */
textarea.form-control { height: auto; min-height: 148px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.ml-contact-list { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--ml-border); }
.ml-contact-list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ml-border); font-size: 14px; }
.ml-contact-list li i { color: var(--ml-primary); font-size: 15px; }
.ml-contact-list li span { width: 68px; color: var(--ml-muted); font-size: 13px; }
.ml-contact-list li a { color: var(--ml-text); font-weight: 600; }
.ml-contact-list li a:hover { color: var(--ml-primary); }
.ml-inquiry { height: auto; padding: 24px; background: var(--ml-bg-subtle); }
.ml-label-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ml-counter { font-size: 12px; color: var(--ml-muted); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.ml-counter.over { color: var(--ml-error); font-weight: 600; }
.ml-inquiry .ml-agree-box { background: var(--ml-bg); }
.ml-agree-desc { font-size: 12px; line-height: 1.6; color: var(--ml-muted); margin: 4px 0 0 26px; }
.ml-inquiry .form-check .ml-field-error { margin-top: 2px; }
.ml-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* 자동 제출 방지 입력 — 화면·키보드 탐색에서 숨김 */
.ml-inquiry-done { text-align: center; padding: 36px 8px; outline: none; }
.ml-inquiry-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); background: var(--ml-bg); color: var(--ml-success); font-size: 20px; margin-bottom: 14px; }
.ml-inquiry-done-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.ml-inquiry-done-desc { font-size: 14px; line-height: 1.7; color: var(--ml-text-2); margin-bottom: 18px; }

@media (max-width: 991.98px) {
    .ml-loop { flex-direction: column; gap: 6px; }
    .ml-loop-step { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; }   /* 세로로 쌓일 때는 그림 왼쪽 · 글 오른쪽 */
    .ml-loop-media { margin-bottom: 0; }
    .ml-loop-body { padding: 0; }
    .ml-loop-arrow { justify-content: center; height: 20px; }
    .ml-loop-arrow i { transform: rotate(90deg); }
    .ml-loop-return { justify-content: flex-start; }
    .ml-stepper { grid-template-columns: repeat(2, 1fr); }
    .ml-feature { padding: 28px 0; }
    .ml-feature-title { font-size: 19px; }
    .ml-feature-media.wide { padding: 28px 28px 0; }
    .ml-feature-media.phone { padding: 28px 0; }
    .ml-feature-media.phone img { height: 380px; }
}
@media (max-width: 575.98px) {
    .ml-stepper { grid-template-columns: 1fr; gap: 12px; }
    .ml-inquiry { padding: 16px; }
    .ml-chips span { height: 26px; font-size: 12px; }
    .ml-feature-media.wide { padding: 20px 20px 0; }
    .ml-feature-media.phone img { height: 340px; border-radius: 22px; }
    .ml-collapse-sub { display: none; }
}

/* ── 요금표 (2026-10-16 개편 — 참고: 스티비 요금제 표) ──
   가운데 제목 → 재원생 수 찾기 → 요금제 = 열(이름 · 월 요금 크게), 행 = 재원생 수 · 월 출력 문항 → 공통 조건 카드 → 시작하는 방법 → 접힘 상세.
   재원생 수를 넣으면 해당 열 전체(모바일은 카드)에 .is-match = 오렌지 띠. 위 1px 잉크 선 · 아래 1px 선만 두고 행 구분선은 두지 않는다 */
.ml-pricing-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.ml-pricing-head .ml-eyebrow { justify-content: center; }
.ml-pricing-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px; }
.ml-pricing-sub { font-size: 15px; line-height: 1.7; color: var(--ml-text-2); margin-bottom: 16px; }
.ml-pricing-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ml-pricing-pills span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ml-bg); border: 1px solid var(--ml-border); font-size: 13px; font-weight: 600; color: var(--ml-text-2); }
.ml-pricing-pills i { color: var(--ml-primary); font-size: 14px; }

.ml-pricing-finder { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; max-width: 760px; margin: 0 auto 24px; padding: 14px 18px; background: var(--ml-bg); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); }
.ml-pricing-finder-label { font-size: 14px; font-weight: 700; color: var(--ml-text); }
.ml-pricing-finder-input { display: flex; align-items: center; gap: 6px; }
.ml-pricing-finder-input .form-control { width: 104px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-pricing-finder-input span { font-size: 14px; color: var(--ml-text-2); }
.ml-pricing-result { font-size: 14px; color: var(--ml-muted); }
.ml-pricing-result.on { color: var(--ml-text); font-weight: 500; }
.ml-pricing-result b { color: var(--ml-primary); }

.ml-pricing-table-wrap { background: var(--ml-bg); border-radius: var(--ml-r-xl); padding: 12px 24px 16px; }
.ml-pricing-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ml-pricing-table th, .ml-pricing-table td { text-align: center; vertical-align: middle; padding: 16px 6px; }
.ml-pricing-table thead th, .ml-pricing-table thead td { padding: 26px 6px 22px; border-bottom: 1px solid var(--ml-ink); }
.ml-pricing-table tbody tr:last-child > * { padding-bottom: 22px; }
.ml-pricing-table .ml-pt-corner { width: 14%; }
.ml-pricing-table tbody th { text-align: left; padding-left: 4px; font-size: 13px; font-weight: 600; color: var(--ml-muted); }
.ml-pricing-table tbody td { font-size: 15px; font-weight: 500; color: var(--ml-text); }
.ml-pt-name { font-size: 17px; font-weight: 700; color: var(--ml-text); margin-bottom: 8px; }
.ml-pt-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap; color: var(--ml-text); }
.ml-pt-price b { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ml-pt-unit { font-size: 13px; font-weight: 500; color: var(--ml-text-2); }
.ml-pt-plus { font-size: 15px; font-weight: 700; margin-left: 1px; }
.ml-pt-extra { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--ml-muted); }
.ml-pricing-table [data-plan] { transition: background-color .15s; }
.ml-pricing-table [data-plan].is-match { background: var(--ml-primary-subtle); }
.ml-pricing-table thead th.is-match { box-shadow: inset 0 3px 0 var(--ml-primary); border-radius: var(--ml-r-md) var(--ml-r-md) 0 0; }
.ml-pricing-table thead th.is-match .ml-pt-name { color: var(--ml-primary); }
.ml-pricing-table tbody tr:last-child td.is-match { border-radius: 0 0 var(--ml-r-md) var(--ml-r-md); }

.ml-plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ml-plan-card { background: var(--ml-bg); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); padding: 16px 14px 14px; transition: background-color .15s, border-color .15s; }
.ml-plan-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ml-plan-card .ml-pt-price { justify-content: flex-start; margin-bottom: 12px; }
.ml-plan-card .ml-pt-price b { font-size: 21px; }
.ml-plan-card dl { margin: 0; display: grid; gap: 4px; }
.ml-plan-card dl > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ml-plan-card dt { font-weight: 500; color: var(--ml-muted); white-space: nowrap; }
.ml-plan-card dd { margin: 0; font-weight: 600; color: var(--ml-text); text-align: right; }
.ml-plan-card-extra { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ml-muted); }
.ml-plan-card.is-match { background: var(--ml-primary-subtle); border-color: var(--ml-primary); }
.ml-plan-card.is-match .ml-plan-card-name { color: var(--ml-primary); }

.ml-pricing-common { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ml-pricing-common li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--ml-bg); border-radius: var(--ml-r-lg); }
.ml-pricing-common i { font-size: 18px; line-height: 1.25; color: var(--ml-primary); }
.ml-pricing-common b { display: block; font-size: 14px; font-weight: 700; color: var(--ml-text); }
.ml-pricing-common span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--ml-muted); }
.ml-pricing-note { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--ml-muted); }
.ml-pricing-h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 16px; }

@media (max-width: 991.98px) {
    .ml-pricing-title { font-size: 24px; }
    .ml-pricing-common { grid-template-columns: repeat(2, 1fr); }
    .ml-pricing-h3 { margin-top: 36px; }
}
@media (max-width: 575.98px) {
    .ml-pricing-head { text-align: left; }
    .ml-pricing-head .ml-eyebrow { justify-content: flex-start; }
    .ml-pricing-pills { justify-content: flex-start; }
    .ml-pricing-finder { justify-content: flex-start; padding: 12px 14px; }
    .ml-pricing-result { width: 100%; }
    .ml-plan-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ml-plan-card { padding: 14px 12px 12px; }
    .ml-pricing-common { grid-template-columns: 1fr; gap: 8px; }
    .ml-pricing-note { text-align: left; }
}

/* ── 추천 학교 (마이페이지, 2026-10-20) — 고른 학교 칩 · 고르기 모달 트리(내신기출 › 지역 › 학교) ── */
.ml-rs-chips, .ml-rs-picked { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; }
.ml-rs-chips { max-height: 150px; overflow-y: auto; margin-bottom: 12px; padding-bottom: 0; }   /* 지역을 통째로 고르면 수십 곳 — 네 줄 남짓에서 스크롤 */
.ml-rs-head-count { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ml-primary); }
.ml-rs-picked { padding: 10px 0 0; max-height: 96px; overflow-y: auto; }
.ml-rs-picked:empty { display: none; }
.ml-rs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid rgba(255, 107, 0, .35); border-radius: var(--ml-r-sm); background: var(--ml-primary-subtle); font-size: 13px; color: var(--ml-text); }
.ml-rs-chips .ml-rs-chip { padding-right: 10px; }
.ml-rs-chip small { font-size: 11px; color: var(--ml-muted); }
.ml-rs-x { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--ml-muted); font-size: 15px; line-height: 20px; cursor: pointer; }
.ml-rs-x:hover { color: var(--ml-text); }
.ml-rs-tree { height: 420px; overflow-y: auto; border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); padding: 6px 4px; }
.ml-rs-root { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ml-text); }
.ml-rs-root .bi { color: var(--ml-primary); }
.ml-rs-region { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 18px; border-radius: var(--ml-r-sm); font-size: 14px; }
.ml-rs-region:hover, .ml-rs-school:hover { background: var(--ml-bg-subtle); }
.ml-rs-caret { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--ml-muted); line-height: 1; }
.ml-rs-region .form-check-input, .ml-rs-school .form-check-input { flex: 0 0 auto; margin: 0; }
.ml-rs-region .ml-rs-name { flex: 1 1 auto; min-width: 0; cursor: pointer; font-weight: 500; }
.ml-rs-schools { padding: 0 0 4px 54px; }
.ml-rs-school { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 0; padding: 0 10px; border-radius: var(--ml-r-sm); font-size: 13px; cursor: pointer; }
.ml-rs-school.is-on { background: var(--ml-primary-subtle); }
.ml-rs-school .ml-rs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-rs-cnt { flex: 0 0 auto; font-size: 12px; color: var(--ml-muted); }
.ml-rs-cnt b { color: var(--ml-primary); font-weight: 600; }
.ml-rs-cnt.is-zero { color: #A9A298; }   /* text/disabled */
.ml-rs-empty { padding: 40px 12px; text-align: center; font-size: 13px; color: var(--ml-muted); }
@media (max-width: 575.98px) {
    .ml-rs-tree { height: 55vh; }
    .ml-rs-schools { padding-left: 30px; }
}