/* Keep the home cards and shared footer aligned at desktop and phone widths. */
.sg-simple-links > div{display:flex;flex-direction:column;align-items:flex-start}
.sg-simple-links p{min-height:0;margin:8px 0 16px}
.sg-simple-links .sg-button{margin-top:auto}

.footer-top{display:block}
.footer-links{display:flex;justify-content:flex-end;align-items:center;gap:8px 24px;margin-top:22px;padding:18px 0;border-top:1px solid var(--line)}
.footer-links a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap}
.footer-bottom{margin-top:0}

@media(min-width:761px){
  .footer-bottom{padding-right:92px}
}

@media(max-width:760px){
  .footer-links{justify-content:flex-start;gap:0 20px;padding:14px 0}
  .footer-links a{min-height:44px;white-space:normal}
}

/* [2026-11-03 클로드] 좁은 폭에서 고정 도움말 단추가 본문 카드 위를 덮던 것.
   320·375px 에서 실제로 「04 검수·승인」과 「내가 확인할 일」 카드를 가렸다.
   단추를 줄이고 구석으로 붙이고, 본문 아래쪽에 단추만큼 자리를 비워 둔다. */
@media(max-width:420px){
  .floating-chat{width:44px;height:44px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .floating-chat svg{width:20px;height:20px}
  main{padding-bottom:72px}
}

/* ════════════════════════════════════════════════════════════════════
   [2026-11-04 클로드] 모바일 실측 3건 — 폭 360px 으로 강제해 직접 재서 찾음
   잰 방법: 모든 요소의 좌표·글자 크기를 읽어 화면 밖으로 나간 것과
            13px 미만 글자, 44px 미만 터치 대상을 센다. (추측 아님)

   ★ 잘 돼 있던 것은 건드리지 않았다 — 가로 스크롤 없음, 금액 쉼표 정상.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1건 · 로고가 왼쪽으로 잘려 나갔다 (가장 급함) ───────────────────
   emerald-sub-plain.png     폭 180px · 왼쪽 좌표 −12px  → 12px 잘림
   emerald-base-tagline.png  폭 234px · 왼쪽 좌표  −6px  →  6px 잘림
   /ko 와 /ko/pricing 양쪽에서 똑같이 나왔다 = 공통 머리 부분.
   360px 화면에 234px 로고를 넣으면서 가운데 정렬이 음수로 밀린 것. */
@media(max-width:430px){
  .ribbon-lockup{
    max-width:100%;
    padding-inline:16px;
    justify-content:center;
    overflow:hidden
  }
  .ribbon-lockup img{
    max-width:100%;
    height:auto;
    object-fit:contain
  }
}

/* ── 2건 · 12px 글자 14곳 (/ko 8곳 · /ko/pricing 6곳) ─────────────────
   형님의 핵심 사용자는 40·50대 셀러다. 12px 는 작다.
   폰에서만 키운다 — PC 는 그대로 둔다. 바닥은 13px 로 잡는다. */
@media(max-width:430px){
  .sg-home p,
  .sg-simple-hero p,
  .sg-simple-links p,
  .step-label,
  .hero-note,
  main li{font-size:14px}

  /* 꼬리말·법적 고지처럼 참고용 글만 13px 까지 허용 */
  footer small,
  .legal-note,
  .footer-bottom{font-size:13px}
}

/* ── 3건 · 터치 44px 미만 2곳 ────────────────────────────────────────
   a.brand (왼쪽 위 홈 링크) 32px · button.floating-chat 42px
   손가락 기준은 44×44px. 글자·그림은 그대로 두고 padding 으로만 채운다. */
@media(max-width:430px){
  a.brand{
    min-height:44px;
    display:inline-flex;
    align-items:center
  }
  .floating-chat{
    width:48px;
    height:48px
  }
}

/* ── 4건 · /ko/radar — 글자가 가장 작은 페이지 (폰에서만) ──────────────
   [2026-11-04 클로드] 12 페이지를 360px 로 전수 측정한 결과,
   소싱 레이더가 압도적이었습니다:
     11px small ×33 · 12px span ×26 · 11px em ×20 · 12px b ×12
     .rp-category 11px ×10 · .rp-check 11px ×10 · .sp-eyebrow 11px ×4
     터치 19px 링크 ×12 · .rp-pack-link 38px ×10 · 16px 링크 ×3
   구독자가 자주 볼 페이지인데 40·50대에게 11px 는 읽기 어렵습니다.

   ※ span·b 는 부모에서 물려받는 경우가 많아 **직접 건드리지 않습니다**
     (전역으로 올리면 레이아웃이 깨집니다). 태그와 클래스를 짚어서만 올립니다. */
@media(max-width:430px){
  .sr-radar small, .rp-pack small, main small,
  .sr-radar em, .rp-pack em, main em{font-size:13px}

  .rp-category,
  .rp-check,
  .sp-eyebrow,
  .sr-radar-tag,
  .sr-demo-stage{font-size:13px!important}

  /* 본문 속 작은 링크 — 글자는 그대로 두고 **누를 자리만** 넓힌다.
     세로 padding 은 줄 높이를 밀지 않아 글이 흐트러지지 않는다. */
  main a{padding-block:6px}

  .rp-pack-link{min-height:44px; display:inline-flex; align-items:center}
}

/* 한 번 더 재서 범인을 좁혔습니다 — 122개 중 **56개가 `.rf-copy` 한 곳**에 몰려 있었습니다.
     .rf-copy > span 12px ×20 · em 11px ×20 · small 11px ×16
   나머지도 몇 군데에 뭉쳐 있어 그 자리만 짚습니다.
   (전역으로 span·b 를 올리지 않는 원칙은 그대로 지킵니다) */
@media(max-width:430px){
  /* ※ 선택자를 길게 쓰는 이유 —
       `radar-forecast.css` 에 `.rf-copy small{font-size:11px}` 가 있는데
       그 시트가 이 파일보다 **뒤에 실려서** 같은 세기로는 졌습니다(직접 재서 확인).
       `html body` 를 붙여 세기를 올리면 확실히 이깁니다. */
  html body .rf-copy,
  html body .rf-copy span,
  html body .rf-copy em,
  html body .rf-copy small{font-size:13px}

  html body .rp-item em,
  html body .sp-card-back small,
  html body .sr-flow span,
  html body button small{font-size:13px}

  html body .sr-radar small,
  html body .rp-pack small,
  html body main small,
  html body .sr-radar em,
  html body .rp-pack em,
  html body main em{font-size:13px}

  /* small 안의 b 는 small 을 따라가게 — 따로 작아지지 않는다 */
  html body small b,html body small strong{font-size:inherit}
}

/* 남은 42개를 다시 재서 좁혔습니다.
   `html body …` 는 **타입 선택자라 세기가 낮아** 클래스 하나짜리 규칙에 집니다
   (`.rp-pack button small` 0,1,2  >  `html body button small` 0,0,4).
   아래 몇 가지는 클래스가 제각각이라 짚을 수 없으므로 폰 폭에서만 !important 로 바닥을 깝니다.
   PC 는 건드리지 않습니다. */
@media(max-width:430px){
  html body small,
  html body small b,
  html body small strong,
  html body button small{font-size:13px!important}

  html body .footer-bottom span,
  html body .ra-head span,
  html body .rp-head span,
  html body .rp-metric-guide strong,
  html body .rtc-head strong{font-size:13px!important}
}