/* 부품: 답변 카드 v5 — 통신사 줄카드 (시안_카드개편_v1 확정 2026-08-07)
   공통 규칙: 모서리 12 · 안 여백 16 · 카드 사이 8 · 색 역할 고정(초록=선택·가입 / 주황=사은품·혜택) */

.acv5 { background: #fff; border: 1px solid #e4e6ea; border-radius: 12px; padding: 16px; font-size: var(--fs-body); word-break: keep-all; overflow-wrap: break-word; }
.acv5 .acv5-head { font-size: var(--fs-subtitle); font-weight: 800; line-height: 1.4; }
.acv5 .acv5-head .acv5-hb { color: #c8531a; }
.acv5 .acv5-axis { font-size: var(--fs-tiny); color: #888; margin: 3px 0 10px; }

/* 카드 안 조작: 속도 칩 + TV·할인 스위치 */
.acv5 .acv5-ctl { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.acv5 .acv5-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.acv5 .acv5-chips.q { margin-top: 6px; }
.acv5 .acv5-chip { border: 1px solid #f5a623; color: #b06d00; background: #fff; border-radius: 14px; padding: 4px 10px; font-size: var(--fs-small); cursor: pointer; }
.acv5 .acv5-chip.on { background: #fff7e8; font-weight: 800; }
/* 조합 칩 — 칩마다 그 조합의 최대 사은품을 함께 (2026-08-24 대표 안 · 시안 v2 확정)
   왜 = 누르기 전에 네 금액이 한눈에 들어와야 손님이 어디로 갈지 정할 수 있다 */
.acv5 .acv5-chip.acv5-combo { line-height: 1.3; text-align: center; padding: 5px 10px; }
.acv5 .acv5-chip.acv5-combo .amt { display: block; font-size: var(--fs-small); font-weight: 800; color: #c8531a; }
.acv5 .acv5-chip.acv5-combo.on { border-width: 2px; }
.acv5 .acv5-toggles { display: flex; gap: 12px; font-size: var(--fs-small); color: #555; align-items: center; flex-wrap: wrap; }
.acv5 .acv5-swl { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.acv5 .acv5-sw { position: relative; display: inline-block; width: 36px; height: 20px; }
.acv5 .acv5-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.acv5 .acv5-sw .tr { position: absolute; inset: 0; background: #ccc; border-radius: 10px; transition: .25s; cursor: pointer; }
.acv5 .acv5-sw .dot { position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .25s; pointer-events: none; }
.acv5 .acv5-sw input:checked + .tr { background: #f5a623; }
.acv5 .acv5-sw input:checked + .tr + .dot { transform: translateX(16px); }

/* 통신사 줄카드 — 1위 확대·초록 테두리 */
.acv5 .acv5-row { border: 1px solid #e6e9ed; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.acv5 .acv5-row.win { border: 2px solid #1db954; background: #f7fdf9; padding: 13px 12px; }
/* 이름 칸은 통신사 이름보다 좁아지지 않음 → 안 들어가면 요금·사은품 묶음(.vals)이 아랫줄 오른쪽으로 (2026-09-13 대표 「진행」)
   종전 = min-width 0 + 이름 줄바꿈 허용 → 320~384 폭 TV 결합 카드에서 「LG유플러/스」·「SK브로드밴/드」로 글자 중간이 꺾임
   이름이 들어가는 폭(PC·390 이상 대부분)에서는 종전과 같은 한 줄 배치 */
.acv5 .acv5-row .who { flex: 1; min-width: min-content; }
.acv5 .acv5-row .who .nm { font-size: var(--fs-sub); font-weight: 800; white-space: nowrap; }
.acv5 .acv5-row .vals { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.acv5 .acv5-row.win .who .nm { font-size: var(--fs-body); }
.acv5 .acv5-row .who .pd { font-size: var(--fs-small); color: #999; margin-top: 1px; line-height: 1.45; }
.acv5 .acv5-row .fee { text-align: right; min-width: 86px; }
.acv5 .acv5-row .fee .was { font-size: var(--fs-tiny); color: #aaa; text-decoration: line-through; }
.acv5 .acv5-row .fee .now { font-size: var(--fs-body); font-weight: 800; }
.acv5 .acv5-row .fee .now.none { color: #bbb; font-weight: 400; }
.acv5 .acv5-row.win .fee .now { font-size: var(--fs-subtitle); color: #158f40; }
.acv5 .acv5-row .fee .per { font-size: var(--fs-tiny); color: #999; font-weight: 400; }
.acv5 .acv5-row .ben { text-align: right; min-width: 74px; background: #fff7e8; border-radius: 9px; padding: 5px 8px; }
.acv5 .acv5-row .ben .bl { font-size: var(--fs-tiny); color: #b06d00; }
.acv5 .acv5-row .ben .bv { font-size: var(--fs-body); font-weight: 800; color: #c8531a; }
.acv5 .acv5-row.win .ben .bv { font-size: var(--fs-subtitle); }
/* 🆕10-17 사은품 설정 없는 켠 통신사 = 「상담 때 안내」(금액 자리 · 작은 글 한 줄) */
.acv5 .acv5-row .ben .bv.ask, .acv5 .acv5-row.win .ben .bv.ask { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }

/* 배지 — 높이 고정·세로 가운데 (8/7 대표 지적 반영) */
.acv5 .acv5-badges { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.acv5 .acv5-bdg { font-size: var(--fs-tiny); font-weight: 800; border-radius: 9px; padding: 0 7px; height: 18px; display: inline-flex; align-items: center; line-height: 1; }
.acv5 .acv5-bdg.b-fee { background: #E8F5E9; color: #1B5E20; }
.acv5 .acv5-bdg.b-gift { background: #fff3e0; color: #c8531a; }
/* 물어보신 통신사(핀) = 흰 바탕 (2026-08-08 대표 지시 — 회색보다 흰색이 낫겠다)
   초록·주황은 선택·사은품 몫이라 색 역할을 흐리지 않게 · 맨 윗줄 연초록 바탕 위에서 도드라지도록 얇은 테두리 */
.acv5 .acv5-bdg.b-ask { background: #fff; color: #44566b; border: 1px solid #dfe4ea; }
/* 배지 줄 = 통신사 줄 맨 아래 한 줄 전체 폭 (2026-09-13 대표 「이것도 해결하자」)
   종전 = 이름 칸 안 → TV 결합 카드처럼 값 칸이 넓어지면 이름 칸이 51~96px로 좁아져 배지 글이 두세 줄로 꺾여
          높이 18px 테두리 밖으로 삐져나옴(실측 = iPhone 13·SE·360·320 폭 · PC는 정상)
   지금 = 줄 전체 폭을 써서 한 줄로 · 이름·요금·사은품 칸 배치는 그대로(배지 줄은 flex-basis 100%라 따로 한 줄 · 이름 칸 폭 판단에 안 끼어듦) */
.acv5 .acv5-row { flex-wrap: wrap; row-gap: 6px; }
.acv5 .acv5-row > .acv5-badges { flex-basis: 100%; margin-top: -1px; } /* 줄 사이 6 − 1 = 종전 배지 위 간격 5px 그대로 */

/* 유도 블록 — 세운 배치 · 맺음말 "차이 납니다" */
.acv5 .acv5-pb { text-align: center; border: 1.5px solid #f0c060; background: linear-gradient(#fff8e8, #fffdf7); border-radius: 12px; padding: 10px 8px 9px; margin-top: 10px; }
.acv5 .acv5-pb .p1 { font-size: var(--fs-small); color: #776655; }
.acv5 .acv5-pb .p2 { font-size: var(--fs-num-xl); font-weight: 900; color: #c8531a; line-height: 1.25; }
.acv5 .acv5-pb .p2.small { font-size: var(--fs-num); }
.acv5 .acv5-pb .p3 { font-size: var(--fs-sub); font-weight: 800; }
.acv5 .acv5-pb .p4 { font-size: var(--fs-small); color: #998877; margin-top: 3px; line-height: 1.5; }
.acv5 .acv5-pb .p4 .nw { white-space: nowrap; }   /* 🆕10-04 「— 월 ○원 × 36개월」 한 덩어리(전체 이름으로 길어져 「36개월」만 홀로 꺾이던 것 · 대표 「추천대로 진행해」) */
/* 🆕10-03 3년 상자 화살표안(시안 v2) = 윗줄 굵은 한 문장 · 화살표와 금액 같은 색(이득 초록 = 카드 월 요금 초록 · 손해 빨강) · 「대신」 연한 초록 알약 */
.acv5 .acv5-pb .p1.hl { font-size: var(--fs-body); font-weight: 800; color: #3b3027; }
.acv5 .acv5-pb .p2.good { color: #158f40; }
.acv5 .acv5-pb .p2.bad { color: #d32f2f; }
.acv5 .acv5-pb .inst { display: inline-block; background: #e8f5ec; color: #0f7a35; border-radius: 12px; padding: 3px 12px; font-size: var(--fs-small); font-weight: 800; margin: 2px 0 3px; }

/* 버튼 — 주 버튼 = 카드에 하나뿐인 면 채움(초록) + 보조 2트랙 */
.acv5 .acv5-main { display: block; width: 100%; background: #1db954; color: #fff; border: none; border-radius: 10px; padding: 11px 0; font-size: var(--fs-body); font-weight: 800; margin-top: 10px; cursor: pointer; min-height: 44px; }
.acv5 .acv5-subs { display: flex; gap: 8px; margin-top: 8px; }
.acv5 .acv5-sub { flex: 1; background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 8px 0; font-size: var(--fs-sub); cursor: pointer; min-height: 40px; }
.acv5 .acv5-next { font-size: var(--fs-tiny); color: #999; margin-top: 10px; }

/* 안 B (2026-09-17 대표 「카드 흠 플랜 추천대로 진행해」 · 추천 카드 09-06 안 B와 같은 결)
   줄 첫 누름 = 열림 · 열린 줄 안 = [✓ 이 상품으로 가입 신청](초록 면) + [💰 TV·전화·공유기 고르고 견적 보기] + 안심 한 줄
   두 단추 = 줄 폭 가운데(09-16 대표 「중앙 정렬로 수정」 · 줄 폭 전체 = 가운데) · 안 연 줄 = 아랫줄 글자 「이 상품으로 가입 신청 →」 */
.acv5 .acv5-row > .acv5-inb { flex-basis: 100%; }
.acv5 .acv5-inb { margin-top: 2px; padding-top: 8px; border-top: 1px dashed #cfe9d6; text-align: center; }
.acv5 .acv5-apply { display: block; width: 100%; margin: 0 auto; background: #1db954; color: #fff; border: none; border-radius: 10px; padding: 11px 0; font-size: var(--fs-body); font-weight: 800; cursor: pointer; min-height: 44px; }
/* 🆕10-01 카드 선택 줄 시안(대표 「카드 새 시안 플랜 추천대로 진행해」) = 선택된 줄 안 「3년으로 보면」 상자 → 가입 → 견적 → [📞 상담사 연결]
   다른 줄 [선택하기] = 09-30 시안 A(연한 초록 바탕 · 진한 초록 글씨 · 얇은 초록 테두리 · 글자 대비 약 5:1) — 선택 줄의 진한 초록 [가입 신청]과 한눈에 구분 */
.acv5 .acv5-inb .acv5-pb { margin: 0 0 10px; }
.acv5 .acv5-inb .acv5-sub { display: block; width: 100%; margin-top: 4px; }
.acv5 .acv5-pick { display: block; width: 100%; margin: 0 auto; background: #eaf8ef; color: #0f7a35; border: none; box-shadow: inset 0 0 0 1.5px #9fdcb5; border-radius: 10px; padding: 9px 0; font-size: var(--fs-body); font-weight: 800; cursor: pointer; min-height: 44px; }
/* 견적 = 가입 단추 아래 작은 글 단추 (09-25 · 줄마다 늘 보이므로 카드 키를 줄임) */
.acv5 .acv5-detail { display: block; width: 100%; margin: 2px auto 0; background: none; border: none; padding: 6px 0; font-size: var(--fs-small); color: #666; text-decoration: underline; cursor: pointer; min-height: 36px; }
/* 결합 할인 답 카드 위 한 줄(서버 글이 올 때만) */
.acv5 .acv5-dnote { background: #eef6ff; color: #1f4f8f; border-radius: 9px; padding: 7px 10px; font-size: var(--fs-sub); font-weight: 700; margin-bottom: 8px; line-height: 1.45; }

/* 공통 규칙을 기존 답변 카드(설치비·폴백 v4)에도 — 모서리 12 통일 (구조·내용 무접촉) */
.answer-card { border-radius: 12px; word-break: keep-all; overflow-wrap: break-word; }   /* 🆕10-11 한글 낱말 중간 줄바꿈 막기(요금 카드 .acv5 와 같은 값 · 설치비 카드에서 「없어⏎요」·「5.6만⏎원」 = 원래 흠 · 글자 크기 P3) */
/* 🆕10-11 글자 크기 P3 = 공용 말풍선 규칙(.message.bot .message-bubble table 13px · th 12px · summary 13px)이 더 세서 chat.css 옛 답 카드 구획 값이 안 먹던 자리 → 크기만 한 단계 센 규칙(값 = 값 표 역할 이름 · 02_플랜 §3-2) */
.message.bot .answer-card table.answer-cmp { font-size: var(--fs-sub); }
.message.bot .answer-card table.answer-cmp th { font-size: var(--fs-small); }
.message.bot .answer-card .answer-more summary { font-size: var(--fs-sub); }

/* 부품: 설치비 카드 안 A (시안 ㉒ · 2026-09-14 대표 「안 A 로 결정」 · public/js/chat-card-install.js)
   표·설득 블록·큰 단추·이어 묻기 칩 = 종전 답변 카드 꾸밈(chat.css) 그대로 · 여기는 새로 붙은 것만 */
/* 칸 넷이 휴대폰 폭(390)에 들어가게 (09-14 실측 = 표 최소 폭 339 > 카드 안 312)
   까닭 = chat.css 휴대폰 규칙 「.message.bot .message-bubble table td { min-width: 60px; white-space: nowrap }」 + 칸 여백 12px가 이 표에도 걸림
   → 이 표만 그보다 센 선택자로 최소 폭 0 · 여백 3px · 이름 칸 줄바꿈 허용(다른 표는 그대로) */
.aci.answer-card table.aci-tbl.answer-cmp th, .aci.answer-card table.aci-tbl.answer-cmp td { min-width: 0; padding: 7px 3px; }
.aci.answer-card table.aci-tbl.answer-cmp th { padding-top: 4px; padding-bottom: 4px; white-space: normal; line-height: 1.3; vertical-align: bottom; }
.aci.answer-card table.aci-tbl.answer-cmp td:first-child { white-space: normal; }
.aci .aci-tbl th .aci-sub { font-weight: 400; }
.aci .aci-tbl .answer-tel-name { word-break: keep-all; }
.aci .aci-tbl .answer-price { font-size: var(--fs-sub); }
.aci .aci-tbl tr.aci-pin td { background: #fff8f0; }
/* 맨 위 통신사 배지 = 답변 카드 v5 「물어보신 통신사」와 같은 흰 바탕(08-08 대표 지시) */
.aci .aci-pinb { display: table; margin-top: 2px; font-size: var(--fs-tiny); font-weight: 800; color: #44566b; background: #fff; border: 1px solid #dfe4ea; border-radius: 9px; padding: 0 6px; line-height: 16px; white-space: nowrap; vertical-align: 1px; }
.aci .aci-unit { font-size: var(--fs-tiny); color: #999; text-align: right; margin-top: 3px; }
.aci .aci-night { background: #f5f6f8; color: #5a6472; border-radius: 8px; padding: 7px 9px; font-size: var(--fs-sub); margin-top: 6px; line-height: 1.5; }
.aci .aci-more { display: block; text-align: center; font-size: var(--fs-sub); font-weight: 700; color: #1f5fbf; border: 1px dashed #b8c7e0; border-radius: 9px; padding: 8px 6px; margin-top: 8px; cursor: pointer; line-height: 1.45; }
.aci .aci-more-hint { font-weight: 400; color: #7a8089; font-size: var(--fs-small); }
.aci .aci-xl { border-top: 1px dashed #e0e3e8; margin-top: 9px; padding-top: 8px; font-size: var(--fs-sub); }
.aci .aci-xl-h { font-weight: 800; margin-bottom: 4px; }
.aci .aci-xr { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f4f5f7; }
.aci .aci-xr > span { min-width: 0; overflow-wrap: anywhere; }
.aci .aci-xr b { white-space: nowrap; }
.aci .aci-c { display: block; color: #7a8089; font-size: var(--fs-small); font-weight: 400; line-height: 1.45; }
.aci .aci-pick { margin-top: 7px; }
.aci .aci-cbtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 2px; }
.aci .aci-cbtn { border: 1px solid #b8c7e0; color: #1f5fbf; background: #fff; border-radius: 14px; padding: 5px 10px; font-size: var(--fs-small); cursor: pointer; }
.aci.answer-card table.aci-tbl.answer-cmp td.aci-none { text-align: left; white-space: normal; font-size: var(--fs-sub); color: #7a8089; }

/* 좁은 폰(380px 이하) 축소 대응 — 확정 카드 부품과 같은 결 · 🆕10-11 글자 크기 = 역할 이름 · 1위 줄 금액 줄임 두 줄은 없앰(1위 = 소제목 그대로 · 360 폭 깨짐 0 측정 · 대표 「세 가지 모두 추천대로 진행해」) */
@media (max-width: 380px) {
    .aci.answer-card { padding: 12px 9px; }
    .aci .aci-tbl .answer-price { font-size: var(--fs-small); }
    .aci .aci-tbl .answer-tel-name { font-size: var(--fs-small); }
    .acv5 { padding: 13px 12px; }
    .acv5 .acv5-row .fee { min-width: 76px; }
    .acv5 .acv5-row .ben { min-width: 66px; padding: 4px 6px; }
}

/* 아주 좁은 폰(360px 이하) = 설치비 표 통신사 동그라미를 숨겨 금액 칸 자리를 냄(이름 글자는 그대로) */
@media (max-width: 360px) {
    .aci .aci-tbl .aci-emo { display: none; }
}

/* 🆕10-16 「요금 바로 조회」 끝 새 요금 카드 = 고르신 통신사 줄 안 「🧾 고르신 구성」 표(펼침 · 시안 v1 안 A · 대표 「고르신 구성은 펼쳐 보이게」)
   줄 전체 폭(배지 줄 아래 · 가입 단추 상자 위) · 항목 이름이 길면 이름만 꺾이고 금액은 한 줄 */
.acv5 .acv5-row > .acv5-cfg { flex-basis: 100%; }
.acv5 .acv5-cfg { background: #fff; border: 1px solid #e3e8ee; border-radius: 10px; padding: 9px 12px; font-size: var(--fs-small); color: #444; line-height: 1.75; }
.acv5 .acv5-cfg .cf-t { font-weight: 800; color: #222; }
.acv5 .acv5-cfg .cf-t span { font-weight: 400; color: #888; font-size: var(--fs-tiny); }
.acv5 .acv5-cfg .cf-l { display: flex; justify-content: space-between; gap: 10px; }
.acv5 .acv5-cfg .cf-l .v { white-space: nowrap; }
.acv5 .acv5-cfg .cf-l.mute { color: #888; }
.acv5 .acv5-cfg .cf-l.sum { border-top: 1px solid #eef0f3; margin-top: 4px; padding-top: 4px; }
.acv5 .acv5-cfg .cf-l.cut { color: #e74c3c; }
.acv5 .acv5-cfg .cf-l.fin { font-weight: 800; color: #158f40; }
/* 🆕10-17 TV 요금 물음 = 선택된 줄 안 「📺 ○○ TV 상품별 요금」(위 구성 표와 같은 모양 · 시안 v1 안 A) · TV 줄은 누를 수 있음 · 채널 수는 작은 회색 · 마지막 안내 줄은 금액 칸 없이 꺾임 */
.acv5 .acv5-tvl { margin-top: 4px; }
.acv5 .acv5-tvl .cf-l.tv { cursor: pointer; border-radius: 6px; }
.acv5 .acv5-tvl .cf-l.tv:active { background: #f1f8f3; }
.acv5 .acv5-tvl .cf-l small { color: #999; font-weight: 400; font-size: var(--fs-tiny); }
.acv5 .acv5-tvl .cf-l.more { justify-content: center; color: #1f5fbf; cursor: pointer; }
.acv5 .acv5-tvl .cf-l.mute { border-top: 1px solid #eef0f3; margin-top: 4px; padding-top: 4px; font-size: var(--fs-tiny); }
/* 🆕10-16 시안 v2 ⓐ = 비교 상자 기준 한 줄(「KT는 고르신 구성(…) · SK브로드밴드는 기본 구성」 · 시안 사진 색 그대로) */
.acv5 .acv5-pb .p4 .gb { color: #1B5E20; }
/* 🆕10-19 TV 요금 답 짧게(시안 v2 안 B · 02_플랜 §8) = 카드 위 한 줄 답 · 다른 통신사 접은 줄 · 비교 상자 한 줄 */
.direct-card-comment.acv5-tvans:empty { display: none; }
.acv5-tvans .ta1 { font-weight: 700; }
.acv5-tvans .ta1 span, .acv5-tvans .ta2 span { font-weight: 400; color: #555; }
.acv5 .acv5-fold { border: 1px solid #e6e9ed; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.acv5 .acv5-fold:active { background: #f6f8fa; }
.acv5 .acv5-fold .fd-t { font-size: var(--fs-sub); font-weight: 800; }
.acv5 .acv5-fold .fd-s { font-size: var(--fs-small); color: #555; margin-top: 4px; }
.acv5 .acv5-fold .fd-n { font-size: var(--fs-small); color: #888; margin-top: 2px; }
.acv5 .acv5-pb.one { padding: 8px 12px; }
.acv5 .acv5-pb.one .p2 { display: inline; font-size: inherit; white-space: nowrap; }   /* 「▲ 158,760원」 한 덩어리(화살표만 줄 끝에 남던 것) */
.acv5 .acv5-pb.one .p5 { font-weight: 400; color: #888; font-size: var(--fs-small); }