/* pilot/site.css — 전화비서 상용 홈페이지 전용 보강.
   signup/signup.css(변수·카드·버튼)와 pilot/pilot.css(스텝·체크리스트) 위에 얹는다.
   기존 클래스를 다시 정의하지 않는다 — 여기에는 이번에 새로 필요한 것만 둔다. */

/* 가로 스크롤 0 — 375px 에서 어떤 요소도 화면을 넘지 않게 한다. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, table { max-width: 100%; }

/* 상단 내비 — 항목이 많아 가로 스크롤을 허용하되, 페이지 자체는 넘치지 않는다. */
.sitenav { background: var(--white); border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 9; }
.sitenav-scroll {
  max-width: 480px; margin: 0 auto; display: flex; gap: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px;
  scrollbar-width: none;
}
.sitenav-scroll::-webkit-scrollbar { display: none; }
.sitenav-item {
  flex: 0 0 auto; font-size: 13px; padding: 11px 14px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-800); white-space: nowrap;
  /* 손가락으로 누르는 대상이라 44px 아래로 내리지 않는다(글씨만 작게, 터치영역은 크게). */
  min-height: 44px; display: flex; align-items: center;
}
.sitenav-item.current { background: var(--navy); color: var(--white); font-weight: 700; }

/* 히어로 */
.hero { text-align: center; padding: 24px 8px 8px; }
.hero h1 { font-size: 21px; line-height: 1.45; color: var(--navy-dark); margin-bottom: 10px; }
.hero p.lead { font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }
.hero .cta-col { display: flex; flex-direction: column; gap: 8px; }

/* 큰 CTA — 터치영역 52px 이상 */
.btn.big { min-height: 54px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.btn.line { background: var(--white); color: var(--navy); border: 1.5px solid var(--gray-200); }

/* 4단계 인포그래픽 */
.flow4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 560px) { .flow4 { grid-template-columns: repeat(4, 1fr); } }
.flow4 .f { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 12px; padding: 12px 10px; text-align: center; }
.flow4 .f .ic { font-size: 26px; display: block; margin-bottom: 6px; }
.flow4 .f .t { font-size: 13px; font-weight: 700; color: var(--navy-dark); line-height: 1.35; }
.flow4 .f .d { font-size: 11px; color: var(--gray-600); margin-top: 4px; }

/* 비서 모드 카드 */
.mode { border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 11px 12px; margin: 6px 0; display: flex; gap: 12px; align-items: flex-start; }
.mode.reco { border-color: var(--navy); background: var(--blue-bg); }
.mode .ic { font-size: 24px; line-height: 1; }
.mode .t { font-size: 16px; font-weight: 700; color: var(--navy-dark); }
.mode .d { font-size: 13px; color: var(--gray-600); margin-top: 3px; }
.mode .tag { font-size: 11px; font-weight: 700; color: var(--navy); }

/* 통신사 카드 */
.carrier { border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px; margin: 10px 0; }
.carrier h3 { font-size: 16px; color: var(--navy-dark); display: flex; align-items: center; gap: 8px; }
.carrier .fee { font-size: 13px; color: var(--gray-800); margin-top: 4px; }
.carrier .vtag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.carrier .vtag.ok { background: var(--green-bg); color: var(--green); }
.carrier .vtag.partial { background: var(--amber-bg); color: var(--amber); }
.carrier .vtag.none { background: var(--gray-200); color: var(--gray-600); }
.carrier .note { font-size: 12px; color: var(--gray-600); margin-top: 8px; }
.carrier .links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* 다운로드 카드 */
.dl-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 10px 0; }
.dl-meta dt { color: var(--gray-600); }
.dl-meta dd { color: var(--gray-800); word-break: break-all; }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* 클릭형 Android 설치 도우미 — 설명문보다 다음 터치가 먼저 보이게 한다. */
.install-flow { display: grid; gap: 10px; margin-top: 12px; }
.install-touch {
  border: 2px solid var(--gray-200); border-radius: 16px; padding: 14px;
  background: var(--white); transition: border-color .15s, background .15s;
}
.install-touch.active { border-color: var(--navy); background: var(--blue-bg); }
.install-touch .step-title { font-size: 17px; font-weight: 800; color: var(--navy-dark); margin-bottom: 5px; }
.install-touch .step-one { font-size: 13px; color: var(--gray-600); line-height: 1.45; margin-bottom: 10px; }
.install-touch .btn { margin-top: 0; }
.install-touch .tap-hint { font-size: 12px; color: var(--navy); font-weight: 700; margin-top: 8px; text-align: center; }
.install-flow.permission-returned .permission-step { border-color: var(--green); background: var(--green-bg); }
.install-flow.permission-returned .download-step { border-color: var(--navy); background: var(--blue-bg); }
.install-next {
  border: 2px solid var(--green); border-radius: 16px; background: var(--green-bg);
  padding: 15px; text-align: center;
}
.install-next strong { display: block; color: var(--green); font-size: 17px; margin-bottom: 4px; }
.install-next span { display: block; color: var(--gray-800); font-size: 13px; line-height: 1.45; }
.install-fallback { margin-top: 12px; }
.install-fallback summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--navy); }
.is-desktop .permission-step { display: none; }

/* 통신사 가입 — 초보자는 통신사 이름만 고르면 된다. 각 버튼은 공식 화면/전화로 직접 이어진다. */
.carrier-signup-list { display: grid; gap: 12px; margin-top: 12px; }
.carrier-choice {
  display: grid; gap: 7px; padding: 10px; border: 1px solid var(--gray-200);
  border-radius: 16px; background: var(--gray-50);
}
.carrier-choice .btn { margin: 0; }
.carrier-choice .carrier-call { min-height: 48px; font-size: 14px; }

/* 설치 단계 */
.howto { list-style: none; counter-reset: h; margin: 8px 0; padding: 0; }
.howto li { counter-increment: h; position: relative; padding: 12px 0 12px 40px; border-bottom: 1px solid var(--gray-100); font-size: 14px; color: var(--gray-800); }
.howto li:last-child { border-bottom: none; }
.howto li::before {
  content: counter(h); position: absolute; left: 0; top: 10px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--navy); color: var(--white);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.howto li .sub { display: block; font-size: 12px; color: var(--gray-600); margin-top: 4px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--gray-100); padding: 4px 0; }
.faq summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--navy-dark); padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
.faq p { font-size: 14px; color: var(--gray-800); padding: 0 0 12px; line-height: 1.6; }

/* 사용설명서 카드 그리드 */
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.manual-grid .m { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 12px; padding: 12px; }
.manual-grid .m .ic { font-size: 20px; }
.manual-grid .m .t { font-size: 14px; font-weight: 700; color: var(--navy-dark); margin-top: 4px; }
.manual-grid .m .d { font-size: 12px; color: var(--gray-600); margin-top: 3px; line-height: 1.45; }

/* 셀프서비스 상태 */
.state-box { border-radius: 10px; padding: 12px; font-size: 13px; margin: 10px 0; }
.state-box.ok { background: var(--green-bg); color: var(--green); }
.state-box.warn { background: var(--amber-bg); color: var(--amber); }
.state-box.err { background: var(--red-bg); color: var(--red); }
.state-box.info { background: var(--gray-100); color: var(--gray-800); }

.rec-row { display: flex; gap: 8px; }
.rec-row .btn { flex: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 기존 공용 pill 내비의 터치영역 보강 — 본문 속 인라인 링크가 아니라 "누르는 메뉴"다.
   (본문 문장 안의 링크까지 44px 로 키우면 문단이 망가지므로 대상에서 뺀다.) */
.section-nav a, .onboard-toc a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; }

/* ── 모바일 홈 = 앱과 같은 카드 조작판(§4) ─────────────────────────────────
   첫 화면에 제목·한 줄 설명·요금·CTA·비서 3모드·보조 카드 4개가 들어오게 압축한다.
   긴 설명은 아래 <details> 로 접는다. */
.home-hero { text-align: center; padding: 8px 8px 8px; }
.home-hero h1 { font-size: 21px; color: var(--navy-dark); margin-bottom: 6px; }
.home-hero .one { font-size: 14px; color: var(--gray-600); line-height: 1.5; margin-bottom: 8px; }
.home-hero .price-line { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.home-hero .price-line .amt { font-size: 27px; font-weight: 800; color: var(--gray-800); }
.home-hero .price-line .per { font-size: 13px; color: var(--gray-600); }
.home-hero .vat { font-size: 12px; color: var(--gray-400); margin: 2px 0 10px; }

/* 보조 카드 2열 — 앱 홈의 보조 카드와 같은 모양·같은 역할 */
.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hcard {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 14px;
  padding: 10px 12px; min-height: 72px; color: var(--navy-dark);
}
.hcard .ic { font-size: 18px; }
.hcard .t { font-size: 15px; font-weight: 700; margin-top: 3px; }
.hcard .d { font-size: 12px; color: var(--gray-600); margin-top: 2px; }

/* 접히는 상세 — 첫 화면을 짧게 유지하는 장치 */
.card.detail { padding: 0 14px; }
.card.detail > summary {
  cursor: pointer; font-size: 16px; font-weight: 700; color: var(--navy);
  min-height: 52px; display: flex; align-items: center;
}
.card.detail > *:not(summary) { margin-bottom: 12px; }

/* ── PC 넓은 화면(§2-C) ────────────────────────────────────────────────────
   모바일이 정본이고, 데스크톱은 **같은 정보구조를 넓게 펼친 것**이다.
   순서·문구·카드 의미를 바꾸지 않는다 — 폭과 열 수만 바꾼다.
   (모바일 규칙은 이 블록 밖에 있으므로 여기 손대도 375px 레이아웃은 그대로다.) */
@media (min-width: 900px) {
  .wrap { max-width: 960px; padding: 20px 24px 32px; }
  .topnav-inner { max-width: 960px; }
  .sitenav-scroll { max-width: 960px; justify-content: center; overflow-x: visible; }

  /* 히어로: 좁은 칼럼에서 벗어나 한눈에 */
  .home-hero { padding: 28px 8px 20px; }
  .home-hero h1 { font-size: 30px; }
  .home-hero .one { font-size: 17px; }
  .home-hero .price-line .amt { font-size: 34px; }
  .home-hero .btn.big { max-width: 320px; margin: 0 auto; }

  /* 비서 3모드를 가로로 — PC 에서는 세 선택지가 한눈에 비교돼야 한다 */
  #modes-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #modes-list .mode { margin: 0; height: 100%; }

  /* 보조 카드 4개는 한 줄로 */
  .home-cards { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .hcard { min-height: 88px; }

  /* 상세는 2열로 접어 펼쳐도 페이지가 길어지지 않게 */
  #how { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  #how .card.detail { margin: 0; }

  /* 통신사·사용설명서·FAQ 도 넓게 */
  .manual-grid { grid-template-columns: repeat(4, 1fr); }
  .carrier { padding: 18px; }
  .carrier .links { flex-direction: row; flex-wrap: wrap; }
  .carrier .links .btn { flex: 1 1 240px; }
  .howto li { font-size: 15px; }

  /* 신청폼·셀프서비스는 읽기 좋은 폭을 유지한다(폼이 넓으면 오히려 어렵다) */
  body.narrow .wrap { max-width: 620px; }
}

/* 상세 페이지 CTA 블록 — 읽다가 결정한 순간 바로 누를 수 있어야 한다(§7) */
.cta-block { margin: 14px 0; }
.cta-block.final { margin: 18px 0 8px; }
.cta-block .hint { text-align: center; margin-top: 8px; }
@media (min-width: 900px) {
  .cta-block .btn.big { max-width: 380px; margin: 0 auto; }
}