/* ── building-care.html (우편 유입 캠페인 랜딩) 전용 ─────────────
   styles.css 위에 얹는 페이지 stylesheet. 공유 페이지들은 이 파일을 읽지 않으므로
   여기서 무엇을 정의해도 index / fire / leak 화면에는 번지지 않는다.
   문법은 사이트 기준: border-radius 0, box-shadow 0, gradient 0, 선과 타이포로만 구분,
   경고색·색면 남용 금지, 한글 keep-all(base) 전제, 신규 컬러 토큰 0.

   글자 크기 하한: 보조 텍스트 12px, 설명 13~14px, CTA 15px.
   색이 깔린 판 위 작은 글자는 --muted 로 AA 미달이므로 #566176 을 쓴다. */

/* ── 1. 첫 화면 (Hero + 접수) ───────────────────────────────
  Hero 와 Form 은 같은 밴드 안의 두 열이다. 모바일은 DOM 순서대로 쌓인다(Hero → 바로 Form).
  띄운 카드·배경면을 쓰지 않는다 — 열 구분은 1px 선 하나만 쓴다. */
.cm-entry{border-bottom:1px solid var(--line)}
.cm-hero{padding:40px 0 44px}
.cm-kicker{font-size:12.5px;font-weight:700;color:var(--navy);margin:0 0 14px;line-height:1.5}
/* balance: H1 문구를 임의 지점에서 끊어 `사람` 같은 고아행을 만들지 않는다(카피는 확정 문장이라 줄바꿈만 제어한다). */
.cm-hero h1{font-size:clamp(25px,3.9vw,38px);line-height:1.42;letter-spacing:-.025em;margin:0 0 16px;color:var(--navy);font-weight:700;max-width:15em;text-wrap:balance}
.cm-hero h1 .cm-h1-2{display:block}
.cm-hero-sub{font-size:15px;line-height:1.7;color:#4a5468;margin:0 0 12px;max-width:38em}
.cm-hero-note{font-size:14px;line-height:1.7;color:#4a5468;margin:0;max-width:36em}
.cm-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin:14px 0 0}
.cm-meta span::before{content:"·";margin-right:8px}
.cm-meta span:first-child::before{content:"";margin:0}

/* ── 2. 버튼 · 공통 요소 ────────────────────────────────── */
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border:1px solid var(--navy);background:var(--navy);color:#fff;padding:0 22px;font-size:15px;font-weight:700;cursor:pointer;text-align:center}
.cm-btn:hover{background:var(--navy-dark)}
.cm-btn span{font-weight:400;font-size:16px}
.cm-btn-ghost{background:#fff;color:var(--navy)}
.cm-btn-ghost:hover{background:var(--soft-blue)}
.cm-btn:disabled{background:var(--soft);border-color:var(--line-strong);color:#566176;cursor:default}
.cm-btn-inline{min-height:34px;padding:0 12px;font-size:13px;gap:0}
/* 최종 CTA 의 세 번째 우선순위(상담 요청). 주 버튼과 크기로 경쟁하지 않는 텍스트 동작. */
.cm-btn-text{border:0;background:none;padding:2px 0;color:var(--navy);font-size:14.5px;font-weight:700;cursor:pointer;text-align:left;border-bottom:1px solid var(--line-strong);align-self:flex-start}
.cm-btn-text:hover{border-bottom-color:var(--navy)}
.cm-btn-text:disabled{background:none;border:0;border-bottom:1px solid var(--line);color:#566176}
.cm-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.cm-note{font-size:12px;color:var(--muted);line-height:1.6;margin:12px 0 0}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── 3. 문제 · 가치 (접수 아래로 온다) ───────────────────────
   항목은 문장이 아니라 명사구로 세워 6+6 으로 맞춘다 — 긴 체크리스트가 폼 아래 콘텐츠를 밀어내지 않게. */
.cm-trust{padding:40px 0 44px;border-bottom:1px solid var(--line)}
.cm-trust-head{max-width:660px;margin:0 0 26px}
.cm-trust-head h2{font-size:22px;line-height:1.45;color:var(--navy);letter-spacing:-.025em;margin:0 0 12px}
.cm-trust-head p{margin:0;font-size:14px;color:#4a5468;line-height:1.7}
.cm-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:2px solid var(--navy)}
.cm-trust-col h3{font-size:12.5px;color:var(--navy);margin:0;padding:12px 0 2px;letter-spacing:0}
.cm-trust-col li{position:relative;font-size:13.5px;color:#4a5468;padding:8px 0 8px 16px;border-bottom:1px solid var(--line);line-height:1.55}
.cm-trust-col li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:1.5px;background:var(--navy)}
.cm-trust-line{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.5;margin:22px 0 0}

/* ── 4. 접수 한 화면 (주소 선택 + 휴대폰 필수 + 동의) ──────── */
.cm-capture{padding:36px 0 40px}
.cm-capture-head{border-bottom:2px solid var(--navy);padding-bottom:11px;margin-bottom:22px;max-width:660px}
.cm-capture-head h2{font-size:20px;color:var(--navy);letter-spacing:-.025em;line-height:1.4;margin:0}
.cm-field{padding:0 0 20px}
.cm-field .field-help{line-height:1.6}
.cm-field-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px}
/* '선택' '필수' 표기는 라벨 뒤에 조용히 붙는다. 안내 문구로 필수의 무게를 설명하지 않는다. */
.cm-field-label em{font-style:normal;color:#566176;font-size:12px;margin-left:5px;font-weight:400}

/* ── 5. 연락처 · 동의 ───────────────────────────────────── */
.cm-consent-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin:18px 0 0}
.cm-consent{display:flex;align-items:flex-start;gap:9px;margin:0;padding:0;color:#4a5468;font-size:13.5px;font-weight:700;line-height:1.55;cursor:pointer}
.cm-consent input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--navy)}
.cm-consent em{font-style:normal;color:#566176;font-size:12px;font-weight:400;margin-left:3px}
/* 동의 상세는 기본 접힘. 토글은 주 버튼과 경쟁하지 않는 텍스트 동작이고 펼침 여부를 보조기술에 알린다. */
.cm-privacy-toggle{border:0;background:none;padding:1px 0 2px;color:var(--navy);font-size:12.5px;font-weight:700;line-height:1.4;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.cm-privacy-toggle:hover{border-bottom-color:var(--navy)}
.cm-marketing{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;color:#566176;font-size:13px;font-weight:400;line-height:1.55;cursor:pointer}
.cm-marketing input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--navy)}
.cm-marketing em{font-style:normal;color:#566176;font-size:12px;margin-left:3px}
.cm-privacy{border:1px solid var(--line);background:var(--soft);padding:14px 15px;margin:12px 0 0}
.cm-privacy h4{font-size:12.5px;color:var(--navy);margin:0 0 8px;letter-spacing:0}
.cm-privacy li{position:relative;padding:0 0 0 14px;margin-bottom:5px;font-size:12px;color:#4a5468;line-height:1.6}
.cm-privacy li:last-child{margin-bottom:0}
.cm-privacy li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1.5px;background:var(--line-strong)}
.cm-privacy strong{color:var(--ink);font-weight:700}
/* app.js 가 제출 버튼 뒤에 넣는 상태 문단이 버튼과 한 줄에 붙어 좁은 열에서 잘리지 않도록 자기 줄을 있게 한다. */
.cm-actions .lead-status{flex:1 1 100%;min-width:0}
/* 데스크톱에서 접수 열이 본문 전체 폭(1140px)으로 퍼지면 전화번호 칸이 기형적으로 길어진다.
   ≤1000(열이 쌓일 때)은 660px 에 맞춰 입력·동의 열을 세운다. 모바일은 전폭 그대로. */
@media(min-width:701px){
 .cm-entry .cm-field,
 .cm-entry .cm-consent-row,
 .cm-entry .cm-privacy,
 .cm-entry .cm-marketing,
 .cm-trust .cm-note{max-width:660px}
}
/* >1000 이면 Hero 오른쪽에 접수 열을 세운다. 첫 화면에서 제목·설명·주소·번호·CTA 가 한 폭에 들어온다. */
@media(min-width:1001px){
 .cm-entry-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:0;align-items:start}
 .cm-hero{padding:46px 0 52px}
 .cm-capture{margin-left:40px;border-left:1px solid var(--line);padding:46px 0 52px 40px}
 .cm-entry .cm-field,
 .cm-entry .cm-consent-row,
 .cm-entry .cm-privacy,
 .cm-entry .cm-marketing{max-width:none}
}

/* ── 6. 결과 머리에 저장 사실과 운영 문장 ─────────────────── */
.cm-result{padding:0 0 44px;background:#fff}
.cm-result-hero{background:var(--soft-blue);border-bottom:1px solid var(--line);padding:30px 0 32px}
.cm-result-hero::before{content:"";display:block;width:52px;height:2px;background:var(--navy);margin-bottom:16px}
.cm-result-kicker{font-size:12px;font-weight:700;color:#566176;margin:0 0 8px;letter-spacing:.02em}
.cm-result-hero h2{font-size:clamp(20px,2.7vw,27px);line-height:1.4;color:var(--navy);letter-spacing:-.025em;margin:0 0 10px;max-width:30em;overflow-wrap:break-word}
.cm-result-hero p{margin:0;font-size:13px;color:#4a5468;line-height:1.65;max-width:620px}
/* 스토리의 표지 문장. '.cm-result-hero p' 보다 강하게 잡으러 조상을 붙인다(!important 는 쓰지 않는다). */
.cm-result-hero .cm-result-lead{font-size:clamp(17px,2.1vw,20px);font-weight:700;color:var(--ink);line-height:1.5;letter-spacing:-.02em;max-width:24em;margin:0 0 2px}
.cm-result-hero .cm-result-legal{margin:16px 0 0;font-size:12px;color:#566176;line-height:1.6;border-left:2px solid var(--navy);padding-left:11px;max-width:660px}
/* 저장 성공과 실패는 다른 사실이다. 둘 다 결과 머리 문구에 띄우고, 실패해도 스토리는 그대로 보인다. */
.cm-result-hero .cm-save-state{display:block;margin:16px 0 0;padding:11px 13px;border:1px solid var(--line-strong);background:#fff;font-size:13px;line-height:1.6;color:var(--ink);max-width:660px}
.cm-result-hero .cm-save-state.is-success{border-left:2px solid var(--navy)}
.cm-result-hero .cm-save-state.is-error{border-left:2px solid #a14343;color:#4a5468}
.cm-save-state .cm-btn-inline{margin-left:8px;vertical-align:baseline}

/* ── 7. 장면(Story scene) 골격 ────────────────────────────
   카드 격자로 쌓지 않는다. 한 번의 방문 → 확인 → 이슈 → 처리 → 결정 → 기록 → 가격 순서로
   읽히는 긴 본문이므로, 장면 사이는 선 하나와 넉넉한 여백으로만 구분한다. */
.cm-scene{padding:40px 0;border-bottom:1px solid var(--line)}
.cm-scene:last-child{border-bottom:0}
.cm-scene-head{margin-bottom:20px;max-width:720px}
.cm-scene-head h2{font-size:clamp(20px,2.6vw,25px);color:var(--navy);letter-spacing:-.025em;line-height:1.42;margin:0 0 9px}
.cm-scene-head p{margin:0;font-size:14px;color:#566176;line-height:1.65}
.cm-scene-head .cm-scene-sub{font-size:16px;color:var(--ink);font-weight:700}

/* 방문 주기 카드 */
.cm-visit{border-top:2px solid var(--navy);border-bottom:1px solid var(--line);padding:14px 0 16px;margin:0}
.cm-visit-row{display:grid;grid-template-columns:126px 1fr;gap:8px 20px;padding:8px 0;align-items:baseline}
.cm-visit-row dt{font-size:12px;color:#566176;font-weight:700}
.cm-visit-row dd{margin:0;font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.55}

/* 방문 확인 항목 */
.cm-check{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border-top:1px solid var(--line-strong)}
.cm-check-group{border-bottom:1px solid var(--line)}
.cm-check-group h4{font-size:12.5px;color:var(--navy);padding:12px 0 2px;margin:0;letter-spacing:0}
.cm-check-group ul{margin:0}
.cm-check-group li{position:relative;font-size:13.5px;color:#4a5468;padding:7px 0 7px 18px;border-top:1px solid var(--line);line-height:1.55}
.cm-check-group li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:1.5px;background:var(--navy)}

/* 이슈 예시 — 이미지는 없고 기록 표로만 보여준다 */
.cm-issue{border:1px solid var(--line);border-left:2px solid var(--navy);padding:16px 15px;background:var(--soft)}
.cm-issue h3{font-size:15px;color:var(--ink);margin:0 0 10px;line-height:1.5}
.cm-issue dl{margin:0}
.cm-issue div{display:grid;grid-template-columns:88px 1fr;gap:6px 16px;padding:7px 0;border-top:1px solid var(--line);align-items:baseline}
.cm-issue dt{font-size:12px;color:#566176;font-weight:700}
.cm-issue dd{margin:0;font-size:13.5px;color:#4a5468;line-height:1.6}

/* 처리 9단계 */
/* 9단계는 두 열에 5+4로 앉힌다 — 한 열이면 데스크톱에서 오른쪽 절반이 비고 스토리가 잘려 보인다.
   열이 갈리면 세로 연결선은 의미가 없어 없애고 번호 배지만 남긴다(≤480 에서 1열로 쌓인다). */
.cm-process{border-top:2px solid var(--navy);padding-top:6px;margin:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:0 34px}
.cm-process li{position:relative;padding:0 0 18px 30px;list-style:none}
.cm-process li:last-child{padding-bottom:0}
.cm-process li::before{content:attr(data-num);position:absolute;left:0;top:0;width:20px;height:20px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.cm-process strong{display:block;font-size:14px;color:var(--navy);line-height:1.5}
.cm-process span{display:block;font-size:12.5px;color:#4a5468;line-height:1.6;margin-top:2px}
/* 중간 CTA 는 본문 흐름을 끊지 않는 한 자리에 둔다(전체 2개까지). */
.cm-mid{margin:24px 0 0}

/* 건물주 결정 카드 */
.cm-approval{border:1px solid var(--line-strong);background:#fff}
.cm-approval-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;padding:14px 15px;border-bottom:1px solid var(--line)}
.cm-approval-top h3{font-size:15px;color:var(--ink);margin:0;line-height:1.5;font-weight:700}
.cm-approval-state{font-size:12px;font-weight:700;color:var(--navy);border:1px solid var(--line-strong);padding:3px 8px}
.cm-approval-facts{display:grid;grid-template-columns:repeat(3,1fr)}
.cm-approval-facts.facts-2{grid-template-columns:repeat(2,1fr)}
.cm-approval-facts div{padding:11px 15px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cm-approval-facts div:last-child{border-right:0}
.cm-approval-facts span{display:block;font-size:12px;color:#566176;margin-bottom:3px}
.cm-approval-facts strong{font-size:13.5px;font-weight:700;color:var(--ink)}
.cm-approval-actions{display:flex;gap:10px;flex-wrap:wrap;padding:14px 15px;align-items:center}
.cm-approval-actions .cm-btn{min-height:46px;font-size:15px}
.cm-approval-result{padding:0 15px 14px;font-size:12.5px;color:#4a5468;line-height:1.6;margin:0}
.cm-pull{font-size:19px;line-height:1.5;font-weight:700;color:var(--navy);border-left:2px solid var(--navy);padding-left:15px;margin:24px 0 0;max-width:24em}

/* 직접 관리 ↔ 커넥스 관리 2열 비교 */
.cm-vs{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border-top:2px solid var(--navy)}
.cm-vs-col h3{font-size:12.5px;color:var(--navy);margin:0;padding:12px 0 2px;letter-spacing:0}
.cm-vs-col li{position:relative;font-size:13.5px;color:#4a5468;padding:8px 0 8px 16px;border-bottom:1px solid var(--line);line-height:1.55}
.cm-vs-col li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:1.5px;background:var(--line-strong)}
/* '커넥스와 관리할 때' 열만 좌측 선으로 구분한다. 색면·아이콘으로 강조하지 않는다. */
.cm-vs-col.is-after h3{color:var(--ink)}
.cm-vs-col.is-after li::before{background:var(--navy)}

/* 관리 현황 — 실제 화면은 없고 보고 형태만 보여준다 */
.cm-dash{border:1px solid var(--line)}
.cm-dash-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.cm-dash-stats div{padding:14px 15px;border-right:1px solid var(--line)}
.cm-dash-stats div:last-child{border-right:0}
.cm-dash-stats span{display:block;font-size:12px;color:#566176;margin-bottom:4px}
.cm-dash-stats strong{font-size:20px;color:var(--navy);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.cm-dash-stats strong small{font-size:12px;color:#566176;font-weight:400;letter-spacing:0}
.cm-dash-title{font-size:12.5px;color:var(--navy);margin:0;padding:13px 15px 0;letter-spacing:0;font-weight:700}
.cm-dash-list{margin:0}
.cm-dash-list li{display:grid;grid-template-columns:104px 1fr auto;gap:6px 14px;padding:11px 15px;border-bottom:1px solid var(--line);align-items:baseline;font-size:13px;color:#4a5468;list-style:none}
.cm-dash-list li:last-child{border-bottom:0}
.cm-dash-when{font-size:12px;color:#566176}
.cm-dash-list b{font-weight:700;color:var(--ink)}
.cm-dash-list em{font-style:normal;font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.cm-dash .cm-note{margin:0;padding:12px 15px 14px;border-top:1px solid var(--line)}

/* 맡는 일 4항목 */
.cm-value{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;border-top:1px solid var(--line-strong);margin:0}
.cm-value li{padding:16px 0 15px;border-bottom:1px solid var(--line);list-style:none}
.cm-value h3{font-size:15px;color:var(--navy);margin:0 0 6px;line-height:1.5;letter-spacing:-.02em;font-weight:700}
.cm-value p{margin:0;font-size:13px;color:#4a5468;line-height:1.65}

/* ── 8. 가격(스토리의 마지막) · 주소 보강 ─────────────────── */
/* 건물 정보를 읽지 못한 화면에만 서는 보강 안내. 주 버튼을 닮지 않게 판으로만 구분한다. */
.cm-enrich{margin:0 0 26px;border:1px solid var(--line);border-left:2px solid var(--navy);background:var(--soft);padding:18px 17px}
.cm-enrich h3{font-size:17px;color:var(--navy);letter-spacing:-.02em;margin:0 0 8px;line-height:1.5}
.cm-enrich p{margin:0;font-size:13px;color:#4a5468;line-height:1.65}
.cm-enrich ul{margin:10px 0 0}
.cm-enrich li{position:relative;font-size:13.5px;color:#4a5468;padding:5px 0 5px 16px;line-height:1.55;list-style:none}
.cm-enrich li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1.5px;background:var(--navy)}
.cm-enrich .cm-actions{margin:16px 0 0}
.cm-enrich .cm-enrich-state{margin:12px 0 0;font-size:13px;line-height:1.6;color:#4a5468}
.cm-enrich .cm-enrich-state.is-error{color:#a14343}
.cm-enrich .cm-enrich-state.is-success{color:#1f6b4c}

.cm-price-card{border:1px solid var(--line-strong);border-top:2px solid var(--navy);padding:18px 17px 20px}
.cm-price-title{font-size:12.5px;color:var(--navy);letter-spacing:0;margin:0 0 10px;font-weight:700}
.cm-plan{margin:0 0 18px;border-bottom:1px solid var(--line)}
.cm-plan li{position:relative;font-size:13.5px;color:#4a5468;padding:8px 0 8px 16px;border-top:1px solid var(--line);line-height:1.55;list-style:none}
.cm-plan li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:1.5px;background:var(--navy)}
.cm-price-figure{font-size:clamp(21px,3vw,28px);font-weight:700;color:var(--navy);letter-spacing:-.03em;line-height:1.4;margin:0 0 8px}
.cm-price-figure small{font-size:13px;font-weight:400;color:#566176;letter-spacing:0}
.cm-price-copy{font-size:13.5px;color:#4a5468;line-height:1.7;margin:0 0 14px;max-width:620px}
.cm-price-basis{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:0 24px;border-top:1px solid var(--line);padding-top:12px}
.cm-price-basis div{font-size:12.5px;color:#4a5468;line-height:1.6}
.cm-price-basis span{display:block;font-size:12px;color:#566176;margin-bottom:2px}
.cm-price-basis strong{font-weight:700;color:var(--ink)}

/* ── 9. 마지막 연락처 CTA ───────────────────────────────── */
.cm-final{padding:42px 0 52px}
.cm-final-stack{display:grid;gap:12px;justify-items:start;max-width:420px}
.cm-final-stack .cm-btn{width:100%}
.cm-final-number{margin:0;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cm-final-note{margin:0;font-size:13px;color:#4a5468;line-height:1.65;max-width:420px}
/* 데스크톱에서는 CTA 열이 420px에 갇혀 오른쪽 절반을 비운다 — 버튼은 나란히 한 칸씩,
   번호·고지는 두 칸을 모두 쓰며 자기 줄을 갖는다. 모바일은 위의 1열 전폭 grid 그대로. */
@media(min-width:701px){
 .cm-final-stack{grid-template-columns:repeat(2,minmax(0,236px));gap:12px 16px;max-width:760px}
 .cm-final-number,.cm-final-note,.cm-consult-status{grid-column:1/-1;max-width:none}
}
/* 상담 요청의 결과를 이 자리에서만 알린다(번호를 되묻지 않는다). */
.cm-consult-status{margin:16px 0 0;padding:11px 13px;border:1px solid var(--line-strong);background:#fff;font-size:13px;line-height:1.6;color:var(--ink);max-width:660px}
.cm-consult-status.is-success{border-left:2px solid var(--navy)}
.cm-consult-status.is-error{border-left:2px solid #a14343;color:#4a5468}
/* placeholderMode 채널을 눌렀을 때의 고지. 상담 전송이 아니라 상태 안내이므로 판을 깨지 않는 조용한 행이다. */
.cm-contact-status{margin:14px 0 0;font-size:13px;line-height:1.6;color:#566176;max-width:660px}

/* ── 10. 고정 CTA — 모바일 전용 */
.cm-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line-strong);padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
.cm-sticky .cm-btn{width:100%}
@media(min-width:701px){.cm-sticky{display:none!important}}

/* ── 11. 반응형 (styles.css 와 같은 경계: 1000 / 700 / 480) ── */
@media(max-width:1000px){
 .cm-check,.cm-value,.cm-vs{gap:0 28px}
}
@media(max-width:700px){
 /* 모바일은 Hero 를 짧게 쓰고 곧바로 접수 열로 들어간다(CTA 까지의 스크롤을 줄인다). */
 .cm-hero{padding:22px 0 22px}
 .cm-hero h1{font-size:25px;line-height:1.45}
 .cm-hero-sub{font-size:14.5px;margin-bottom:10px}
 .cm-hero-note{font-size:13.5px}
 .cm-hero .cm-actions{margin:18px 0 0}
 .cm-capture{padding:20px 0 32px}
 .cm-capture-head{padding-bottom:9px;margin-bottom:16px}
 .cm-field{padding-bottom:14px}
 .cm-consent-row{margin-top:14px}
 .cm-capture .cm-actions{margin-top:16px}
 .cm-trust{padding:34px 0 38px}
 .cm-trust-grid{grid-template-columns:1fr;gap:0}
 .cm-trust-col+.cm-trust-col{margin-top:16px}
 .cm-scene{padding:34px 0}
 .cm-scene-head h2{font-size:20px}
 .cm-visit-row{grid-template-columns:1fr;gap:2px}
 .cm-process{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:0}
 .cm-check{grid-template-columns:1fr;gap:0}
 .cm-vs{grid-template-columns:1fr;gap:0}
 .cm-vs-col+.cm-vs-col{margin-top:16px}
 .cm-approval-facts{grid-template-columns:1fr}
 .cm-approval-facts div{border-right:0}
 .cm-dash-stats{grid-template-columns:1fr 1fr}
 .cm-dash-stats div:nth-child(2){border-right:0}
 .cm-dash-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .cm-dash-list li{grid-template-columns:1fr auto;gap:2px 12px}
 .cm-dash-when{grid-column:1/3;order:3}
 .cm-value{grid-template-columns:1fr;gap:0}
 .cm-pull{font-size:17px}
 .cm-final{padding:36px 0 44px}
 .cm-final-stack{max-width:none}
}
@media(max-width:480px){
 .cm-actions{display:grid;grid-template-columns:1fr;gap:10px}
 .cm-btn{width:100%}
 .cm-mid .cm-btn{width:100%}
 .cm-btn-text{width:auto;align-self:flex-start}
 /* 인라인 재시도 버튼은 문장 아래로 내려 한 줄을 차지한다(본문 안에서 줄높이를 흔들지 않게). */
 .cm-save-state .cm-btn-inline{display:block;width:100%;margin:10px 0 0}
 .cm-issue div{grid-template-columns:1fr;gap:1px}
 .cm-price-basis{grid-template-columns:1fr;gap:0}
 .cm-price-basis div{padding:7px 0;border-bottom:1px solid var(--line)}
 .cm-dash-stats{grid-template-columns:1fr}
 .cm-dash-stats div{border-right:0;border-bottom:1px solid var(--line)}
 .cm-dash-stats div:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *{transition:none!important;animation:none!important}
}


/* 2026-09-22 Website 2.0 STEP 03: 승인 데모 UI 라벨 - 카드 위에 화면 예시임을 표시한다. */
.cm-demo-tag{font-size:12px;font-weight:700;color:#566176;margin:0 0 10px}