/* ============ Responsive ============ */
/* [T3] 섹션 제목 한 줄: 제목 폭(--em, 실측 글자 폭 + 3% 여유)과 감싸는 칸 폭(cqi)으로 글자 크기를 정해
   원래 크기(--fs)로 한 줄에 들어가면 그대로, 넘치면 딱 들어가는 크기까지만 줄인다.
   아주 좁은 화면에서 20px 보다 작아져야 하는 제목만 두 줄로 고르게 나눈다(읽기 어려운 크기 방지) */
.section-head,
.cs-copy,
.prereg-head,
.cta-inner {
  container-type: inline-size;
}
/* [F10] 기능 행 제목: 설명 칸이 글 폭에 맞춰지므로(컨테이너 기준 불가) 화면 폭으로 칸 폭을 계산
   데스크톱 칸 폭 = (본문 폭 − 좌우 여백 48 − 간격 80) / 2, 스크롤바 여유 16px */
@media (min-width: 961px) {
  .fcopy :is(h2, h3).title-1l {
    font-size: max(20px, min(var(--fs), calc((min(100vw - 16px, 1200px) - 128px) / 2 / var(--em))));
  }
}
@media (max-width: 960px) {
  .fcopy :is(h2, h3).title-1l {
    font-size: max(20px, min(var(--fs), calc((100vw - 56px) / var(--em))));
  }
}
:is(h2, h3).title-1l {
  font-size: max(20px, min(var(--fs), calc(100cqi / var(--em))));
  text-wrap: balance;
}
@media (max-width: 960px) {
  /* 모바일 헤더: 로고 + 햄버거만 남기고 CTA 버튼은 모바일 메뉴로 이동 */
  .nav-links {
    display: none;
  }
  .nav-cta .btn-ghost,
  .nav-cta .btn-primary {
    display: none;
  }
  .nav-cta {
    gap: 0;
  }
  .nav-toggle {
    display: block;
    margin-right: -8px;
  }
  .wrap {
    padding: 0 20px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(34px, 8.6vw, 58px);
  } /* 1단으로 바뀌므로 상한을 다시 계산 */
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions .stores,
  .hero-trust {
    justify-content: center;
  }
  .hero .phone-stage {
    margin-top: 40px;
  }
  /* [R1] 1단 레이아웃에서는 stage가 전체 폭이라 left/right:-40px 배지가 화면 가장자리에서 잘림
     → 가운데 정렬된 폰(폭 약 300px) 가장자리 기준으로 붙이되, stage 밖으로는 나가지 않게 max(0px, …) */
  /* [R1][D2] 1단 레이아웃: 기기 묶음을 가운데에 두고, 배지는 화면 가장자리에서 잘리지 않게 폰 쪽으로 붙임 */
  .hero-devices {
    margin-left: auto;
    margin-right: auto;
  }
  .pb-1 {
    left: -16px;
  }
  .pb-2 {
    left: -16px;
  }
  .frow,
  .frow.rev {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 32px 0; /* [S2] 1단에서는 행 사이 64px */
  }
  .frow.rev .fcopy {
    order: 0;
  }
  .fcopy {
    text-align: center;
  }
  .fvisual,
  .frow.rev .fvisual {
    justify-content: center; /* [F10] 1단에서는 가운데 */
  }
  .fcopy p {
    margin-left: auto;
    margin-right: auto;
  }
  .flist {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
  }
  .char-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* [V2] 대화 미리보기·사전 예약: 1단 (폰·폼이 설명 아래로) */
  .chat-show,
  .prereg-card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 28px;
  }
  .chat-show {
    grid-template-areas: 'copy' 'visual' 'points';
    gap: 32px;
  }
  .cs-point {
    margin-top: 0;
  }
  .cs-copy,
  .prereg-head,
  .prereg-copy {
    text-align: center;
  }
  .cs-copy .cs-picker,
  .cs-point,
  .prereg-benefits {
    text-align: left;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-col-service {
    grid-column: auto;
  }
  .mobile-menu.open {
    display: flex;
  }
}
@media (max-width: 560px) {
  .section {
    padding: 48px 0; /* [S2] 80 → 48px */
  }
  .char-grid {
    grid-template-columns: 1fr;
  }
  .chat-show,
  .prereg-card {
    padding: 32px 16px;
    border-radius: 26px;
  }
  .cs-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .chat-show {
    margin-top: 40px; /* [S2] */
  }
  .cta {
    padding-bottom: 56px; /* [S2] */
  }
  .prereg-panel {
    padding: 26px 18px;
  }
  .prereg-cta {
    padding: 28px 18px; /* [V2-5] */
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cta-inner {
    padding: 48px 22px;
  }
  .phone {
    --pw: 280px; /* [D1] */
  }
  /* [G2] 모바일 히어로: 세 기기 구도를 그대로 비율 축소 (560px 무대 → 화면 폭) */
  .hero-devices {
    width: 560px;
    max-width: none;
    zoom: 0.62;
  }
}
/* mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 72px 0 auto 0;
  z-index: 99;
  flex-direction: column;
  background: rgba(15, 13, 26, 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 18px 24px 26px;
}
.mobile-menu a {
  padding: 14px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn {
  margin-top: 18px;
}

/* [G1] 기능 01·02·03 의 아이폰 + 갤럭시 묶음(폭 525px)을 칸 폭에 맞춰 축소 */
@media (max-width: 1200px) and (min-width: 961px) {
  .device-pair {
    zoom: 0.9;
  }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .device-pair {
    zoom: 0.8;
  }
}
/* [H4] 961~1040px: 설명 칸(최대 480px) + 간격 80px 뒤 남는 폭에 두 폰이 들어가도록 더 축소 (실측: 961px 에서 0.8 배면 56px 넘침) */
@media (max-width: 1040px) and (min-width: 961px) {
  .device-pair {
    zoom: 0.74;
  }
}
@media (max-width: 1000px) and (min-width: 961px) {
  .device-pair {
    zoom: 0.66;
  }
}
@media (max-width: 600px) {
  .device-pair {
    zoom: 0.95;
  }
}
@media (max-width: 560px) {
  .device-pair {
    zoom: 0.64;
  }
}
@media (max-width: 380px) {
  .device-pair {
    zoom: 0.52;
  }
  .hero-devices {
    zoom: 0.5;
  }
}
/* [G3] 961~1100px: 2줄 기기 묶음(최소 폭 약 474px)이 문구 칸을 좁히지 않도록 살짝 축소 */
@media (max-width: 1100px) and (min-width: 961px) {
  .hero-devices {
    zoom: 0.85;
  }
}