/* 통신사 비교 카드(안 A 나란히 표) — T2 · 2026-10-28 · 부품 = public/js/chat-card-carrier-compare.js
   모양 = 시안 v1(문서/[챗봇]작업_통신사비교카드_20261025/시안_통신사비교카드_v1_20261025.html) · 아이폰 13 폭(390)에 이름 칸 + 셋 */
.ccc { background: #fff; border: 1px solid #e4e6ea; border-radius: 12px; padding: 14px 12px; font-size: var(--fs-body); word-break: keep-all; overflow-wrap: break-word; }
.ccc .ccc-head { font-size: var(--fs-subtitle); font-weight: 800; line-height: 1.4; }
.ccc .ccc-sum { background: #eef3fb; border-radius: 10px; padding: 8px 10px; margin: 8px 0 4px; font-size: var(--fs-sub); line-height: 1.55; color: #333; }
.ccc .ccc-sum b { color: #158f40; }
.ccc .ccc-axis { font-size: var(--fs-tiny); color: #888; margin: 4px 0 10px; }
.ccc .ccc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.ccc .ccc-chip { border: 1px solid #f5a623; color: #b06d00; background: #fff; border-radius: 14px; padding: 4px 12px; font-size: var(--fs-small); cursor: pointer; }
.ccc .ccc-chip.on { background: #fff7e8; font-weight: 800; }
.ccc .ccc-tg { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ccc .ccc-sw { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font-size: var(--fs-small); color: #555; cursor: pointer; }
.ccc .ccc-sw i { position: relative; width: 34px; height: 19px; border-radius: 10px; background: #ccc; transition: .2s; flex: none; }
.ccc .ccc-sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .2s; }
.ccc .ccc-sw.on i { background: #f5a623; }
.ccc .ccc-sw.on i::after { transform: translateX(15px); }
.ccc table.ccc-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ccc table.ccc-table col.lab { width: 64px; }
.ccc table.ccc-table th, .ccc table.ccc-table td { padding: 8px 3px; border-bottom: 1px solid #eef0f3; text-align: center; vertical-align: middle; font-size: var(--fs-small); line-height: 1.35; }
.ccc table.ccc-table thead th { font-size: var(--fs-sub); font-weight: 800; border-bottom: 2px solid #e4e6ea; }
.ccc table.ccc-table tbody th { text-align: left; font-weight: 600; color: #666; font-size: var(--fs-tiny); padding-left: 2px; }
.ccc table.ccc-table td.best { background: #f2fbf5; }
.ccc table.ccc-table td .v { display: block; font-weight: 800; font-size: var(--fs-sub); }
.ccc table.ccc-table td.best .v { color: #158f40; }
.ccc table.ccc-table td .v.ben { color: #c8531a; }
.ccc table.ccc-table td .was { display: block; font-size: var(--fs-tiny); color: #aaa; text-decoration: line-through; }
.ccc table.ccc-table td .sub { display: block; font-size: var(--fs-tiny); color: #999; }
.ccc table.ccc-table td.pd, .ccc table.ccc-table td .pd { color: #777; font-size: var(--fs-tiny); }
.ccc table.ccc-table .ccc-same { display: inline-block; font-size: var(--fs-tiny); font-weight: 700; color: #8a94a0; }
.ccc table.ccc-table tr.btn td, .ccc table.ccc-table tr.btn th { border-bottom: none; padding-top: 10px; }
.ccc .ccc-apply { width: 100%; border: none; border-radius: 10px; background: #f57c00; color: #fff; font-weight: 800; font-size: var(--fs-tiny); padding: 8px 2px; cursor: pointer; line-height: 1.3; }
.ccc .ccc-foot { font-size: var(--fs-tiny); color: #999; margin-top: 8px; line-height: 1.5; }
.ccc .ccc-sub { margin-top: 8px; width: 100%; border: 1px solid #e4e6ea; background: #fff; border-radius: 10px; padding: 8px; font-size: var(--fs-small); color: #444; cursor: pointer; }