/* [T2] 볼일 질문 정보 카드 (2026-09-11 · 문서/[챗봇]작업_배송3정보카드_20260911 · 시안 ㉑ v1.2 대표 확정 · 부품 chat-card-errand.js)
   결정 = ⓐ다른 통신사 번호 접어 둠 ⓑ설치 기간만 [상담사 연결] ⓒ지식 글의 표는 줄마다 목록 ⓓPC 번호 복사 알림 ⓔ무료·유료 딱지 ⓕ전화 아이콘 바탕 연한 주황 */
.moabi-ec-bubble { padding: 0 !important; background: transparent !important; box-shadow: none !important; max-width: 100%; }
/* 챗봇 공용 꾸밈의 말풍선 링크 밑줄(.message.bot .message-bubble a)이 번호 링크에 걸리지 않게 — 같은 무게 규칙을 뒤에서 덮음(사전 모양 점검에서 잡음) */
.message.bot .moabi-ec a { text-decoration: none; }
.moabi-ec { background: #fff; border: 2px solid #F57C00; border-radius: 14px; overflow: hidden; font-size: var(--fs-body); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; white-space: normal; }
/* 머리 = 제목과 작은 글을 한 줄에(좁으면 저절로 다음 줄) · 🆕10-11 글자 크기 = 값 표 역할 이름(02_플랜 §3-1 · 제목 = 소제목 · 작은 글 = 보조) */
.moabi-ec .hd { background: linear-gradient(135deg, #FB8C00, #EF6C00); color: #fff; font-weight: 800; padding: 10px 14px; font-size: var(--fs-subtitle); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.moabi-ec .hd small { font-weight: 600; font-size: var(--fs-sub); opacity: .95; }

/* ① 고객센터 — 맨 위 통신사(번호와 아이콘을 한 덩어리로 누름 · 누르는 높이 48px) */
.moabi-ec .cc-main { padding: 8px 14px 10px; }
.moabi-ec .cc-name { font-size: var(--fs-sub); font-weight: 800; color: #6b7280; margin-top: 4px; }
.moabi-ec .cc-num { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin-top: 4px; padding: 2px 2px 2px 0; text-decoration: none; color: inherit; border-radius: 10px; }
.moabi-ec .cc-num:active { background: #fff3e0; }
.moabi-ec .cc-num .n { font-size: var(--fs-num); font-weight: 800; color: #E65100; letter-spacing: .5px; }
.moabi-ec .cc-num .n small { font-size: var(--fs-tiny); color: #777; margin-left: 6px; font-weight: 600; letter-spacing: 0; }
.moabi-ec .call-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #FFF3E0; border: 1.5px solid #FFCC80; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-num); }
.moabi-ec .ic-sm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #FFF3E0; border: 1.5px solid #FFCC80; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-body); }
.moabi-ec .cc-hours { font-size: var(--fs-small); color: #555; margin-top: 6px; }
.moabi-ec .cc-more { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-top: 1px solid #f1f3f5; padding: 11px 14px; font-size: var(--fs-sub); font-weight: 800; color: #E65100; cursor: pointer; font-family: inherit; }

/* 통신사 줄 = 윗줄(통신사 · 번호+아이콘) + 아랫줄(운영 시간 · 폭 전체) → 긴 운영 시간이 번호를 밀지 않음 · 누르는 높이 44px */
.moabi-ec .cc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm nums" "hr hr"; column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 14px 9px; border-top: 1px solid #f1f3f5; }
.moabi-ec .cc-row .nm { grid-area: nm; font-size: var(--fs-body); font-weight: 800; }
.moabi-ec .cc-row .hr { grid-area: hr; font-size: var(--fs-small); color: #8a8f96; line-height: 1.45; }
.moabi-ec .cc-row .nums { grid-area: nums; display: flex; flex-direction: column; align-items: flex-end; }
.moabi-ec .cc-row .nums a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-body); font-weight: 800; color: #E65100; text-decoration: none; padding: 0 0 0 8px; border-radius: 10px; }
.moabi-ec .cc-row .nums a:active { background: #fff3e0; }
.moabi-ec .cc-row .nums a small { font-size: var(--fs-tiny); color: #999; font-weight: 600; margin-left: -4px; }

/* ⓔ 무료·유료 딱지 */
.moabi-ec small.bd { background: #E8F5E9; color: #1B5E20; font-weight: 800; padding: 1px 6px; border-radius: 8px; }
.moabi-ec small.bd.paid { background: #eceff1; color: #546e7a; }
.moabi-ec .cc-num .n small.bd { color: #1B5E20; font-weight: 800; }
.moabi-ec .cc-num .n small.bd.paid, .moabi-ec .cc-row .nums a small.bd.paid { color: #546e7a; }
.moabi-ec .cc-row .nums a small.bd { color: #1B5E20; font-weight: 800; margin-left: -2px; }
.moabi-ec .ft { font-size: var(--fs-small); color: #6b7280; background: #fafbfc; padding: 8px 14px; line-height: 1.5; border-top: 1px solid #f1f3f5; }

/* ② 지식 글 원문 — 굵은 글씨 = 주황 굵게 · 표 = 줄마다 목록(결정 ⓒ) */
.moabi-ec .kb { padding: 2px 14px 10px; font-size: var(--fs-body); line-height: 1.65; }
.moabi-ec .kb h4 { font-size: var(--fs-body); font-weight: 800; color: #333; margin: 10px 0 3px; }
/* 🆕10-11 공용 꾸밈 말풍선 소제목(.message.bot .message-bubble h4 = 0.95em)이 더 센 규칙이라 위 줄의 크기가 안 먹던 것 → 크기만 같은 무게 + 1로 덮음(간격·색은 지금 화면 그대로 · P2 깨짐 확인에서 잡음) */
.message.bot .moabi-ec .kb h4 { font-size: var(--fs-body); }
.moabi-ec .kb ul { margin: 0 0 0 16px; padding: 0; }
.moabi-ec .kb ol { margin: 0 0 0 18px; padding: 0; }
.moabi-ec .kb li { margin: 0; }
.moabi-ec .kb p { margin: 6px 0 0; }
.moabi-ec .kb strong { color: #E65100; }
.moabi-ec .kb .warn { background: #fff3e0; border-radius: 8px; padding: 7px 9px; font-size: var(--fs-body); margin-top: 10px; }
.moabi-ec .kb .steps { background: #f7f9fc; border-radius: 8px; padding: 8px 10px; font-size: var(--fs-body); line-height: 1.75; margin-top: 10px; }
.moabi-ec .kb .lrow { border: 1px solid #eef0f3; border-radius: 8px; padding: 6px 9px; margin-top: 5px; font-size: var(--fs-body); }
/* 🆕10-11 전화 요금 표(통신사 · 인터넷전화 · 전화기·모뎀) — 값 칸은 오른쪽 맞춤·한 줄 */
.moabi-ec .kb table.pt { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--fs-body); }   /* 글자 크기 = 값 표 이름(숫자 막기 장치 · 10-11) · 🆕P2 = 본문(카드 본문·표) */
.moabi-ec .kb table.pt th, .moabi-ec .kb table.pt td { border: 1px solid #eef0f3; padding: 5px 7px; text-align: left; }
.moabi-ec .kb table.pt th { background: #f7f9fc; font-weight: 700; color: #444; }
.message.bot .moabi-ec .kb table.pt th { font-size: inherit; }   /* 🆕10-11 공용 말풍선 표 머리(12px · 더 센 규칙)를 덮어 표 머리도 표와 같은 본문 크기(P2) */
.moabi-ec .kb table.pt td.n { text-align: right; white-space: nowrap; }
.moabi-ec .cta { padding: 8px 14px 12px; }
.moabi-ec .cta .moabi-flow-btn { width: 100%; }

/* 다음 걸음 — 이어 물을 거리 (2026-09-12 · 요금 카드 칩과 같은 결) */
.moabi-ec .cta + .cta { padding-top: 0; }
.moabi-ec .cta .moabi-flow-btn + .moabi-flow-btn { margin-top: 6px; }
.moabi-ec .nx { padding: 2px 14px 12px; }
.moabi-ec .nx-t { font-size: var(--fs-tiny); color: #90a0b0; margin-bottom: 6px; }
.moabi-ec .nx-c { display: flex; flex-wrap: wrap; gap: 6px; }
.moabi-ec .nx-chip { display: inline-block; border: 1px solid #ffd7a8; background: #fff8f0; color: #E65100; border-radius: 14px; padding: 6px 11px; font-size: var(--fs-small); line-height: 1.3; cursor: pointer; min-height: 30px; }
.moabi-ec .nx-chip:active { background: #ffeede; }

/* ⓓ PC(마우스)에서 번호를 누르면 복사 알림 */
.moabi-ec-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(33, 33, 33, .92); color: #fff; font-size: var(--fs-sub); padding: 10px 16px; border-radius: 22px; z-index: 10050; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.moabi-ec-toast.on { opacity: 1; }

/* 머리 바로 밑 되묻기 · 꿀봇 번호 전화 줄 (2026-09-12 그림 확인 뒤) */
.moabi-ec .cta.ask-top { padding: 10px 14px 2px; }
.moabi-ec .tel-row { padding: 2px 14px 10px; }
.moabi-ec .tel-row .cc-num { display: block; text-align: center; background: #fff8f0; border: 1px solid #ffd7a8; border-radius: 10px; padding: 11px 12px; color: #E65100; font-weight: 700; font-size: var(--fs-sub); text-decoration: none; min-height: 44px; box-sizing: border-box; }
.moabi-ec .now-line { margin: 0 14px 8px; padding: 8px 10px; border-radius: 10px; background: #f5f6f8; color: #5a6472; font-size: var(--fs-sub); font-weight: 700; line-height: 1.5; }
.moabi-ec .now-line.on { background: #E8F5E9; color: #1B5E20; }
/* 기사 방문 날짜를 물은 손님 = 머리 바로 밑 한 줄 (2026-09-14 대표 확정 문구 · 통신사 확인) */
.moabi-ec .visit-note { margin: 10px 14px 2px; padding: 9px 11px; border-radius: 10px; background: #fff3e0; color: #b45309; font-size: var(--fs-sub); font-weight: 700; line-height: 1.5; }
/* 그 밖 설치 기간 카드 = 세 단계 바로 밑 같은 한 줄 (가입 전 손님 읽기를 막지 않게 한 단계 옅게) */
.moabi-ec .kb .steps-note { margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: #fff8f0; color: #b45309; font-size: var(--fs-sub); font-weight: 600; line-height: 1.5; }

/* 대안 카드 다음 걸음 (2026-09-13 · 볼일 카드 칩과 같은 결 · 대안 카드는 별도 꾸밈 파일이 없어 여기에 둠) */
.moabi-alt-card .alt-nx { padding: 2px 14px 12px; }
.moabi-alt-card .alt-nx-t { font-size: var(--fs-tiny); color: #90a0b0; margin-bottom: 6px; }
.moabi-alt-card .alt-nx-c { display: flex; flex-wrap: wrap; gap: 6px; }
.moabi-alt-card .alt-nx-chip { display: inline-block; border: 1px solid #ffd7a8; background: #fff8f0; color: #E65100; border-radius: 14px; padding: 6px 11px; font-size: var(--fs-small); line-height: 1.3; cursor: pointer; min-height: 30px; }
.moabi-alt-card .alt-nx-chip:active { background: #ffeede; }
