/* 휴대폰 전용 정리 — 보통 휴대폰(360~430px)과 글자 크기를 키운 휴대폰(280px 안팎)에서
   제목·버튼·여백을 한 단계 작고 촘촘하게 맞춘다. 넓은 화면에는 영향 없음. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }

@media (max-width: 760px) {
  .phone { max-width: 100%; }
  .net-grid { grid-template-columns: minmax(0, 1fr); }
  .net-grid > * { min-width: 0; }
  .sec-title { word-break: keep-all; }
  .sec-desc br { display: none; }
}

@media (max-width: 480px) {
  /* 상단: 로고·버튼·과정 전환 */
  :root { --header-h: 60px; --track-h: 54px; }
  .inner { padding: 0 18px; }
  .logo img { height: 34px; }
  .nav .nav-cta { padding: 8px 14px; font-size: 14px; }
  .track-switch { padding: 4px; }
  .track-switch a { height: 38px; padding: 0 14px; font-size: 14px; gap: 5px; }
  .track-switch a .ic { font-size: 15px; }

  /* 첫 화면 */
  .hero { padding: calc(var(--header-h) + var(--track-h) + 22px) 0 60px; }
  .offer { font-size: 13px; padding: 7px 13px; }
  .hero h1 { font-size: clamp(26px, 8.6vw, 32px); line-height: 1.25; letter-spacing: -.04em; }
  .hero .lead { margin-top: 16px; font-size: 16px; line-height: 1.6; font-weight: 700; }
  .hero .btns { margin-top: 26px; gap: 10px; }
  .btn { height: 52px; padding: 0 22px; font-size: 16px; }
  .btn.ghost { box-shadow: inset 0 0 0 2px var(--navy); }
  .trust { margin-top: 16px; gap: 6px 12px; font-size: 13px; justify-content: center; position: relative; z-index: 2; }
  .hero-visual { padding-left: 34px; padding-top: 90px; }
  .hero-visual .hero-phone { width: 170px; }
  .hero-visual .hero-phone .voice-hint { right: -30px; }
  .hero-visual .hero-phone .voice-hint .txt { display: none; }

  /* 칸 공통: 여백·제목·설명 */
  .sec { padding: 72px 0; }
  .eyebrow { font-size: 14px; }
  .sec-title { margin-top: 10px; font-size: clamp(21px, 6.9vw, 26px); line-height: 1.28; letter-spacing: -.04em; }
  .sec-desc { margin-top: 14px; font-size: 15px; line-height: 1.65; font-weight: 600; }
  .method h3 { font-size: clamp(21px, 6.9vw, 26px); }
  .r3-card h3, .band h2, .promo h2 { font-size: clamp(20px, 6.4vw, 24px); }
  .final h2 { font-size: clamp(24px, 8vw, 30px); }
  .route h3, .vs-card h3, .r3-list h3, .curve-side h3 { font-size: clamp(18px, 5.8vw, 22px); }
  .tile h3 { font-size: clamp(18px, 6vw, 22px); }
  .band { padding: 56px 0; }
  .final { padding: 80px 0; }

  /* 숫자 */
  .proof { padding: 56px 0; }
  .stat .num { font-size: clamp(24px, 8.6vw, 32px); }
  .stat .label { margin-top: 10px; font-size: 13px; }
  .case-num { font-size: clamp(26px, 9vw, 34px); }
  .plan .price { font-size: 40px; }

  /* 앱 화면 틀 */
  .phone { width: 250px; padding: 11px; border-radius: 40px; }
  .phone img { border-radius: 30px; }
  .method-list { margin-top: 56px; gap: 80px; }

  /* 학습 사례 좌우 넘기기: 여백 맞춤 */
  .case-track { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }

  /* 추천 이벤트 */
  .promo-box { padding: 30px 18px; }
  .promo .btn { white-space: nowrap; }
  .promo-stamps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 18px; }
  .promo-stamps i { font-size: 13px; border-width: 2px; }
  .promo-prize b { font-size: 19px; }

  /* 그물망 계단 */
  .net-card { padding: 18px 14px; }
  .net-climb { gap: 5px; height: 210px; }
  .st em { padding: 3px 6px; font-size: 11px; }
  .st em .fish { display: none; }
  .st b { font-size: 14px; }
  .net-catch span { font-size: 13px; }
  .net-catch b { font-size: 18px; }
  .net-steps b { font-size: 16px; }
  .net-steps p { font-size: 14px; }

  /* 알람 카드 */
  .wake-card { padding: 28px 20px 26px; }
  .wake-clock b { font-size: clamp(40px, 14vw, 56px); }
  .wake-clock .ampm { font-size: 15px; }

  /* 아래 고정 버튼 */
  .sticky-cta { font-size: 16px; }
}

/* 휴대폰: 카드 안 본문 글자를 15px 안팎으로 통일 */
@media (max-width: 480px) {
  .r3-no, .r3-when, .route .tag, .wake-when, .tile small { font-size: 13px; }
  .r3-card .pitch, .fam-card .pitch { font-size: 16px; }
  .r3-card li, .route li, .vs-card li, .method li, .wake-card li, .fam-card li, .plan li { font-size: 15px; line-height: 1.55; }
  .method li { font-size: 15px; }
  .why .ic { width: 44px; height: 44px; font-size: 20px; border-radius: 14px; }
  .why b { font-size: 17px; }
  .why p, .tile p, .curve-side p, .fam-root p, .fam-more, .method .summary { font-size: 14px; }
  .vs-card .who, .plan .tag, .wake-tag { font-size: 15px; }
  .r3-vis .tick { width: 38px; height: 38px; font-size: 16px; }
  .r3-vis .grad { font-size: 16px; padding: 10px 16px; }
  .schedule span { font-size: 14px; padding: 8px 12px; }
  .band p, .final p { font-size: 15px; }
  .faq summary { padding: 22px 2px; font-size: 16px; }
  .faq details p { padding: 0 2px 22px; font-size: 14px; }
  .case h3 { font-size: 19px; }
  .wake-card h3, .fam-card h3 { font-size: clamp(20px, 6.8vw, 24px); }
  .fam-root b { font-size: 32px; }
  .fam-kids li b { font-size: 18px; }
  .rung h3, .chunk h3 { font-size: 20px; }
  .rung .cnt { font-size: 32px; }
  .nf-step b, .topics h3 { font-size: 16px; }
  .toefl-now li b { font-size: 15px; }
  .plan .price small { font-size: 17px; }
  .plans-note, .wake-note { font-size: 13px; }
  .sticky-cta { font-size: 16px; }
}

/* 학습 사례 카드: 휴대폰에서는 이름표를 사진 밖(아래)으로 빼서 얼굴을 가리지 않게, 한 줄로 */
@media (max-width: 760px) {
  .case-top { position: static; order: 0; padding: 14px 20px 0; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .case-tag, .case-label { white-space: nowrap; font-size: 12px; padding: 5px 10px; }
  .case-label { background: rgba(255, 255, 255, .14); }
  .case-body { padding: 10px 20px 24px; }
}
@media (max-width: 480px) {
  .case { flex-basis: 86%; border-radius: 24px; }
  .case-done { font-size: 12px; padding: 5px 10px; margin-bottom: 10px; }
  .case-num small { font-size: 13px; }
  .case h3 { margin-top: 12px; font-size: 18px; }
  .case h3 br { display: none; }
  .case li { font-size: 13px; line-height: 1.5; }
  .case .who { font-size: 12px; }
  .case-btns button { width: 48px; height: 48px; font-size: 18px; }
  .cases-note { font-size: 12px; }
}
@media (max-width: 480px) {
  .sticky-cta { left: 14px; right: 14px; bottom: 12px; height: 50px; font-size: 16px; }
  .footer { padding-bottom: 90px; }
}

/* ==========================================================
   휴대폰 크기 점검 (2026-09-28) — 390px 에서 한 화면을 넘게 차지하던 칸을 줄인다.
   새 칸(어원 학습 · 검색 단어장 · 앱 다운로드)도 여기서 맞춘다.
   ========================================================== */
@media (max-width: 760px) {
  /* 휴대폰 화면에 뜬 QR 은 그 휴대폰으로 찍을 수 없다 — 스토어 버튼만 남긴다 */
  .dl-qr-card { display: none; }
  .dl-sec .inner { gap: 0; }
}
@media (max-width: 480px) {
  /* 학습 방법: 앱 화면 틀 4개 (250×510 → 210×430) */
  .method .phone { width: 210px; }
  .method-list { gap: 64px; }

  /* 장점 카드 6장 · 요금 카드 3장 */
  .tile { padding: 26px 22px; border-radius: 24px; }
  .tile .emoji { margin-bottom: 10px; font-size: 30px; }
  .plans { margin-top: 40px; gap: 14px; }
  .plan { padding: 28px 22px; }
  .plan h3 { font-size: 22px; }
  .plan .price { margin-top: 12px; font-size: 34px; }
  .plan ul { margin-top: 20px; gap: 8px; }

  /* 알람 시계 숫자 */
  .wake-clock b { font-size: 42px; }

  /* 두 무기 요약 카드 */
  .power-grid { margin-top: 36px; gap: 16px; }
  .power-card { padding: 26px 20px; }
  .power-card h3 { margin-top: 14px; font-size: 22px; }
  .power-card li { font-size: 15px; }
  .power-formula, .power-search, .power-card ul { margin-top: 18px; }
  .power-more { padding-top: 18px; font-size: 15px; }

  /* 어원 학습 */
  .etym-demo { gap: 16px; }
  .etym-card { padding: 24px 18px; }
  .ec-head b { font-size: 34px; }
  .ec-logic { font-size: 18px; }
  .etym-root { padding: 24px 16px; }
  .etym-root ul { margin-top: 16px; gap: 8px; }
  .etym-root li { padding: 10px 14px; border-radius: 14px; }
  .etym-root li b { font-size: 18px; }
  .etym-root li span { font-size: 13px; }
  .etym-more { font-size: 14px; }
  .etym-grid { gap: 14px; }
  .fam-card { padding: 24px 20px; }
  .fam-card .ic { font-size: 30px; }
  .fam-card h3 { margin-top: 12px; }
  .fam-card ul { margin-top: 16px; gap: 8px; }
  .etym-note { font-size: 13px; }

  /* 단어 확장: 학습 효과 칸 (1,540px → 약 1,000px) */
  .fam-effect { padding: 32px 18px; }
  .fe-head h3 { font-size: 22px; }
  .fe-grid { margin-top: 24px; gap: 10px; }
  .fe-item { padding: 20px 16px; border-radius: 18px; }
  .fe-num { font-size: 32px; }
  .fe-num small { font-size: 15px; }
  .fe-lab { margin-top: 10px; font-size: 16px; }
  .fe-txt { font-size: 14px; }
  .fe-mid { font-size: 24px; }
  .fe-list { margin-top: 20px; gap: 10px; }
  .fe-list li { padding: 18px 16px; border-radius: 16px; }
  .fe-list b { font-size: 17px; }
  .fe-list p { font-size: 14px; }
  .fe-note { font-size: 13px; }

  /* 검색 단어장 */
  .search-flow { gap: 14px; }
  .sf-step { padding: 24px 18px; }
  .sf-step h3 { font-size: 20px; }
  .sf-ui { margin-top: 16px; padding: 14px; }
  .sf-step > p { padding-top: 14px; font-size: 14px; }
  .search-band { padding: 28px 14px; }
  .sbd-nums { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sbd-nums .n { font-size: 22px; }
  .sbd-nums .n small { font-size: 12px; }
  .sbd-nums .l { margin-top: 6px; font-size: 12px; }
  .sbd-flow { margin-top: 22px; gap: 6px; }
  .sbd-flow span { padding: 7px 11px; font-size: 13px; }
  .sbd-note { margin-top: 18px; font-size: 14px; }

  /* 앱 다운로드 */
  .dl-btns { margin-top: 26px; gap: 12px; }
  .dl-steps { margin-top: 26px; gap: 8px; }
  .dl-steps li { padding: 12px 14px; }
}

/* ==========================================================
   핵심 제목은 휴대폰에서도 크게 (2026-09-28 대표 요청)
   첫 화면 32→42px · 마지막 제목 30→38px · 핵심 칸 제목 26→32px
   ========================================================== */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(34px, 11vw, 44px); line-height: 1.18; letter-spacing: -.05em; }
  .final h2 { font-size: clamp(30px, 9.8vw, 38px); line-height: 1.2; }
  #power .sec-title, #etym .sec-title, #search .sec-title,
  #review3 .sec-title, #pricing .sec-title, #download .sec-title {
    font-size: clamp(26px, 8.2vw, 32px); line-height: 1.24; letter-spacing: -.05em;
  }
  .promo h2 { font-size: clamp(24px, 7.6vw, 30px); }
}

/* ==========================================================
   첫 화면 순서 (2026-09-28 대표 요청) — 휴대폰에서는
   작은 표시 → 제목 → 부제목 → 사진 → 버튼 → 믿음 줄 → 스토어 버튼
   글자 묶음(.reveal)을 풀어서(display: contents) 사진을 부제목 바로 아래로 끼운다.
   ========================================================== */
@media (max-width: 760px) {
  .hero .inner { gap: 0; }
  .hero .inner > .reveal:first-child { display: contents; }
  .hero .offer { order: 1; align-self: center; }
  .hero h1 { order: 2; }
  .hero .lead { order: 3; }
  .hero .hero-visual { order: 4; margin-top: 26px; }
  .hero .btns { order: 5; width: 100%; }
  .hero .trust { order: 6; }
  .hero .dl-mini { order: 7; }
}
@media (max-width: 480px) {
  .hero-visual { padding-top: 0; padding-bottom: 44px; }
  .hero .btns { margin-top: 22px; }
}