/* ============================================================
   폰 전용 홈페이지(2026-09-22 4차 — Stitch 시안 "일관된 규칙으로 정리" 반영)
   html.is-phone일 때만 보인다(index.html head에서 폰 UA면 붙임) — PC·태블릿은 영향 없음.
   디자인 규칙(유저가 "중구난방"이라 해서 Stitch에 맡긴 결과):
   - 구역 제목은 전부 왼쪽 정렬 "작은 회색 머리말 + 큰 제목 + 설명" 한 가지 모양
   - 카드는 한 종류(흰 바탕 + 연회색 테두리 + 16px 둥글기), 강조 카드는 파란 테두리 1개뿐
   - 파랑은 누르는 것·가장 중요한 숫자에만
   - 글자 크기 5단계: 32 / 20 / 18 / 14~16 / 12~13
   ⚠️ 왼쪽 세로띠 금지(CLAUDE.md 10-1).
   ============================================================ */
#m-home { display: none; }
html.is-phone #m-home { display: block; }
html.is-phone .nav,
html.is-phone main.page,
html.is-phone footer.footer,
html.is-phone #draw-fab { display: none !important; }
html.is-phone body { background: #fff; padding-bottom: 0 !important; }
html.is-phone .modal { word-break: keep-all; }

#m-home {
  --mh-main: #2b57c9; --mh-dark: #1d3c8f; --mh-tint: #f2f4fd;
  --mh-ink: #0f172a; --mh-ink2: #475569; --mh-ink3: #94a3b8;
  --mh-line: #e2e8f0; --mh-soft: #f8fafc; --mh-muted: #f1f5f9;
  --mh-pad: 20px; --mh-radius: 16px;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--mh-ink); word-break: keep-all; -webkit-font-smoothing: antialiased;
  max-width: 480px; margin: 0 auto; background: #fff;
}
#m-home * { box-sizing: border-box; }
#m-home a { text-decoration: none; color: inherit; }
#m-home p { margin: 0; }
#m-home .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400; line-height: 1; }

/* 헤더 */
.mh-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 8px rgba(0,0,0,.03); padding-top: env(safe-area-inset-top, 0px); }
.mh-header-in { height: 56px; padding: 0 var(--mh-pad); display: flex; align-items: center; justify-content: space-between; }
.mh-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .3px; color: var(--mh-main) !important; }
.mh-login { min-height: 40px; padding: 0 14px; border-radius: 8px; background: #eaedff; color: var(--mh-main); font-size: 13px; font-weight: 700; border: 0; font-family: inherit; cursor: pointer; }
.mh-user { display: none; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #eaedff; color: var(--mh-dark); font-size: 13px; font-weight: 700; align-items: center; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#m-home.is-in .mh-login { display: none; }
#m-home.is-in .mh-user { display: inline-flex; }

/* 첫 화면 */
.mh-hero { padding: 32px var(--mh-pad) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; }
.mh-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--mh-line); box-shadow: 0 1px 2px rgba(15,23,42,.05); font-size: 12px; font-weight: 500; color: var(--mh-ink2); margin-bottom: 20px; white-space: nowrap; }
.mh-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--mh-main); flex-shrink: 0; }
.mh-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--mh-main); opacity: .75; animation: mh-ping 1.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes mh-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.mh-h1 { font-size: 32px; line-height: 1.35; letter-spacing: -.02em; font-weight: 700; margin: 0 0 24px; }
.mh-mark { display: inline-block; padding: 1px 8px 3px; margin-right: 4px; border-radius: 10px; background: var(--mh-main); color: #fff; font-weight: 800; transform: rotate(-1.2deg); box-shadow: 0 4px 12px rgba(43,87,201,.25); }
.mh-cta { width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--mh-main); color: #fff; font-family: inherit; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.08); transition: background .15s, transform .1s; }
.mh-cta:active { background: var(--mh-dark); transform: scale(.98); }
.mh-code { display: block; margin-top: 14px; font-size: 14px; color: #475569; text-decoration: none; text-align: center; }
.mh-code b { color: var(--mh-main); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mh-device { width: 100%; margin-top: 24px; background: var(--mh-tint); border: 1px solid var(--mh-line); border-radius: var(--mh-radius); padding: 16px; display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.mh-device .material-symbols-outlined { font-size: 22px; color: var(--mh-main); margin-top: 1px; }
#mh-hero-note { font-size: 14px; font-weight: 700; line-height: 1.45; }
#mh-hero-note strong { color: var(--mh-main); font-weight: 800; }
#mh-hero-note span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--mh-ink2); text-wrap: balance; }

/* 구역 공통 */
.mh-sec { padding: 40px var(--mh-pad); }
.mh-sec.soft { background: var(--mh-soft); }
.mh-sec-head { margin-bottom: 24px; }
.mh-eyebrow { font-size: 13px; font-weight: 500; color: var(--mh-ink3); margin-bottom: 4px !important; }
.mh-h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.015em; font-weight: 700; margin: 0; }
.mh-sec-desc { font-size: 14px; line-height: 1.6; color: var(--mh-ink2); margin-top: 4px !important; }
.mh-list { display: flex; flex-direction: column; gap: 16px; }
.mh-list.tight { gap: 12px; }
.mh-card { background: #fff; border: 1px solid var(--mh-line); border-radius: var(--mh-radius); padding: var(--mh-pad); }
.mh-card.hot { border: 2px solid var(--mh-main); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.mh-h3 { font-size: 18px; line-height: 1.45; letter-spacing: -.01em; font-weight: 700; margin: 0; }
.mh-small { font-size: 13px; color: var(--mh-ink2); line-height: 1.5; }

/* 기능 카드 — 영상은 카드 폭을 꽉 채운다 */
.mh-feat { padding-bottom: 0; overflow: hidden; }
.mh-worry { font-size: 12px; font-weight: 500; color: var(--mh-ink2); margin-bottom: 4px !important; }
.mh-feat-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mh-chip { background: var(--mh-soft); border: 1px solid var(--mh-line); color: var(--mh-ink2); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.mh-feat-text { font-size: 14px; line-height: 1.65; color: var(--mh-ink2); text-wrap: pretty; }
.mh-shot { margin: 16px calc(-1 * var(--mh-pad)) 0; aspect-ratio: 1840 / 944; background: var(--mh-muted); border-top: 1px solid var(--mh-line); overflow: hidden; }
.mh-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 요금 */
.mh-gift { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.mh-gift .material-symbols-outlined { font-size: 24px; color: var(--mh-ink3); }
.mh-gift-t { font-size: 15px; font-weight: 700; }
.mh-group-t { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.mh-group-t span { font-size: 13px; font-weight: 500; color: var(--mh-ink3); margin-left: 4px; }
.mh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mh-row-l { display: flex; flex-direction: column; min-width: 0; }
.mh-row-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; font-weight: 700; }
.mh-row-name .mh-small { font-weight: 400; }
.mh-row-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mh-was { font-size: 13px; color: var(--mh-ink3); text-decoration: line-through; margin-right: 4px; }
.mh-now { font-size: 18px; font-weight: 700; }
.mh-card.hot .mh-now { font-size: 20px; color: var(--mh-main); }
.mh-hot { background: var(--mh-main); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.mh-mt32 { margin-top: 32px; }

/* 마지막 */
.mh-last { padding: 48px var(--mh-pad); text-align: center; background: #fff; }
.mh-last-t { font-size: 18px; font-weight: 700; line-height: 1.6; margin-bottom: 24px !important; text-wrap: balance; }
.mh-last-s { font-size: 13px; color: var(--mh-ink3); margin-top: 14px !important; }

/* 하단 */
.mh-footer { background: var(--mh-muted); border-top: 1px solid var(--mh-line); padding: 40px var(--mh-pad) calc(40px + env(safe-area-inset-bottom, 0px)); }
.mh-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--mh-ink2); margin-bottom: 24px; }
.mh-links a { padding: 4px 0; }
.mh-links b { color: var(--mh-ink); font-weight: 600; }
.mh-biz { font-size: 13px; line-height: 1.7; color: var(--mh-ink3); margin-bottom: 24px; }
.mh-biz a { text-decoration: underline !important; }
.mh-copy { font-size: 12px; color: var(--mh-ink3); }

@media (max-width: 360px) {
  #m-home { --mh-pad: 16px; }
  .mh-pill { font-size: 11px; padding: 6px 12px; }
  .mh-h1 { font-size: 28px; }
  .mh-row-name { font-size: 16px; }
  .mh-now { font-size: 16px; }
  .mh-card.hot .mh-now { font-size: 18px; }
  .mh-was { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mh-dot::after { animation: none; } .mh-cta { transition: none; } }