/* 폰 홈: 같은 로컬 고딕으로 읽는 흐름을 맞춘다.
   그림 안의 축소 UI·일본어 예시·캔버스 좌표는 건드리지 않는다.
   구간 CSS 일부는 body에서 뒤늦게 실리므로 아래 선택자는 의도적으로 더 구체적이다. */
@media (max-width: 767px) {
  :root {
    --am-gutter: 20px;
    --am-serif: var(--font);
  }
  html body {
    font-family: var(--font);
    font-weight: 450;
    line-height: 1.6;
  }
  html body :is(.hb, .s7x, .ft) {
    --am-serif: var(--font);
    --al-serif: var(--font);
  }
  html body :is(.hb.hb2, .hb.hb3, .hb.hb4, .hb.hb5, .hb.hb-duo, .hb.hb-ar, .s7x, .ft) {
    --al-g: 20px;
  }

  /* 읽는 기둥의 여백만 바꾼다. 그림의 내부 절대 좌표·축소 배율은 유지한다. */
  html body :is(.say-wrap, .rch-wrap, .wld-wrap, .wal-wrap, .glb-wrap, .go-wrap, .am-wrap) {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }
  html body .hdx-in { padding-left: 20px; padding-right: 20px; }

  /* 첫 화면의 문구·배치·두 줄 구성은 유지하고 획과 줄높이만 정돈한다. */
  html body #cf-hero-title {
    margin-left: 20px;
    margin-right: 20px;
    font-family: var(--font);
  }
  html body #cf-hero-title > span:first-child {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
  }
  html body #cf-hero-title > span:last-child {
    font-size: 36px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.025em;
  }
  html body .s0-lede {
    font-size: 16px;
    font-weight: 450;
    line-height: 1.6;
  }

  /* 구간 제목: 얇은 330과 명조 500의 혼용을 로컬 고딕 650으로 통일. */
  html body :is(
    .say-t, .rch-t, .wld-t, .wal-t, .glb-t, .go-t,
    .hb-dif .hb-dif-t, .am-h4, .am-h3, .am-h2s,
    .hb.hb2 .hb-h, .hb.hb3 .hb-h, .hb.hb4 .hb-h, .hb.hb5 .hb-h,
    .s7x .say h2
  ) {
    font-family: var(--font);
    font-size: 32px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.025em;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  html body .hb-say .say-t { color: #9ca9ad; }
  html body .hb-say .say-t > .is-on { color: #fff; }

  /* 소제목은 주제목보다 한 단계 작게. 창 머리줄과 같은 클래스는 h3로 한정. */
  html body :is(
    .hb .am-sub, .rch-h, .wld-h, .hb .al-ar-t, .hb .al-ar-ct,
    .hb.hb4 .hb4-fh, .hb.hb4 .hb4-prom h3, .hb.hb5 h3.hb5-wh,
    .go-steps li
  ) {
    font-family: var(--font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.015em;
    word-break: keep-all;
    text-wrap: pretty;
  }

  /* 실제 안내문만 키운다. .mk/.rch-sheet/.wld-shot 등의 가상 화면은 제외. */
  html body :is(
    .rch-p, .wld-p, .wal-p, .glb-p,
    .hb .am-body, .hb .hb-lead, .hb .hb1-off-t,
    .hb.hb2 .hb2-p, .hb.hb3 > .hb-wrap > .hb-lead,
    .hb.hb4 .hb4-prom p, .hb.hb4 .hb4-a > p,
    .hb.hb5 .who4 span, .hb.hb5 .hb5-not, .s7x .say p
  ) {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 450;
    line-height: 1.6;
    letter-spacing: -.01em;
    text-wrap: pretty;
  }
  html body :is(.rch-p, .wld-p, .wal-p, .glb-p) { color: #becacb; }
  html body .hb :is(.am-body, .hb-lead, .hb1-off-t) {
    color: color-mix(in srgb, var(--al-ink, var(--am-ink, var(--ink))) 84%, transparent);
  }
  html body .hb.hb4 .hb4-a > p { color: var(--al-ink); }
  html body .hb.hb5 .hb5-not { color: var(--al-ink); }

  /* 바닥·상담의 실제 누름 글도 산스. 상세 고지와 가상 UI는 자기 크기를 유지. */
  html body :is(.s0-solid, .s0-line, .hb .hb5-pill, .hb .hb-btn, .hb .go-btn) {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
  }
  html body .ft.ft7 .ft-col li > a {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
  }
  html body .ft.ft7 :is(.ft-h, .ft-col > summary h2) {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }

  /* iPhone에서 접수 칸에 초점을 둘 때 작은 글자로 인한 자동 확대를 막는다. */
  html body .hb.hb5 .hb5-form :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 450;
    line-height: 1.6;
  }
  html body .hb.hb5 .hb5-form :is(label, legend, .send) {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
  }
}