/* 상품 확정 카드 (가입 진입 개편 2026-08-04 — 시안 v1 정본) · 🆕10-11 글자 크기 = 값 표 역할 이름(글자 크기 통일 P4-1 · 01_분석 §7-2)
   부품: /js/chat-signup-confirm.js 전용 · 접두어 sgc- · 모바일(360px) 우선 */

.sgc-bubble { max-width: 96%; }
/* 카드 아래 여백 — 대화창 맨 아래에 이 카드가 오면 화면 아래에 늘 떠 있는 빠른 메뉴 단추가
   카드 아래쪽(고객 유형·신청 단추)을 덮어 손님이 누를 수 없다. 여백만큼 더 올릴 수 있게 한다
   (2026-08-27 실측 = 법인 칸이 빠른 메뉴 단추에 덮여 안 눌렸음) */
.sgc-message { margin-bottom: 76px; }
.sgc-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 14px 13px 12px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: #333;
}
.sgc-headline { font-size: var(--fs-subtitle); font-weight: 800; line-height: 1.4; }
.sgc-axis { font-size: var(--fs-tiny); color: #999; margin-top: 3px; }
.sgc-kept {
    margin-top: 9px;
    padding: 7px 9px;
    border: 1px dashed #9fd6ae;
    background: #f4fbf6;
    border-radius: 8px;
    font-size: var(--fs-small);
    color: #2c6e3f;
}
.sgc-dim { color: #bbb; font-weight: 400; font-size: var(--fs-tiny); }

/* 통신사 탭 */
.sgc-tel-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sgc-tel-tab {
    /* 10-05 T5 ⑱ = 통신사 다섯(KT·LG유플러스·SK브로드밴드·SKT·LG헬로비전)이면 휴대폰 폭에서 카드 밖으로 넘쳤다
       → 한 줄에 셋까지 · 넘으면 다음 줄(이름이 중간에서 꺾이지 않게 = 대표 「통신사는 정확하게 표시하자」) · 둘·셋이면 종전처럼 한 줄을 나눠 씀 */
    flex: 1 1 calc((100% - 12px) / 3);
    min-width: 0;
    border: 1.5px solid #e3e3e3;
    background: #fafafa;
    border-radius: 10px;
    padding: 7px 4px 6px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
}
.sgc-tel-tab .sgc-tn { display: block; font-size: var(--fs-sub); font-weight: 700; color: #444; word-break: keep-all; overflow-wrap: anywhere; }
.sgc-tel-tab .sgc-tb { display: block; font-size: var(--fs-tiny); color: #888; margin-top: 2px; word-break: keep-all; overflow-wrap: anywhere; }
.sgc-tel-tab.on { border-color: #1db954; background: #f0faf3; }
.sgc-tel-tab.on .sgc-tn { color: #158f40; }
.sgc-tel-tab.on .sgc-tb { color: #1db954; font-weight: 700; }

/* 구획 제목·인터넷 줄 */
.sgc-sec-label { font-size: var(--fs-small); font-weight: 700; color: #777; margin: 12px 0 5px; }
.sgc-prod-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: var(--fs-body);
}
.sgc-prod-line .sgc-spd { color: #999; font-size: var(--fs-small); margin-left: 6px; }
.sgc-lbl { font-size: var(--fs-tiny); border-radius: 6px; padding: 2px 6px; font-weight: 700; white-space: nowrap; }
.sgc-bp { background: #e9f8ee; color: #158f40; }

/* TV 등급 알약 */
.sgc-tv-row { display: flex; gap: 6px; }
.sgc-tv-pill {
    flex: 1;
    border: 1.5px solid #e3e3e3;
    background: #fff;
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    min-width: 0;
}
.sgc-tv-pill .sgc-lb { display: block; font-size: var(--fs-tiny); font-weight: 700; color: #b25e00; }
.sgc-tv-pill .sgc-nm { display: block; font-size: var(--fs-small); font-weight: 700; color: #444; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🆕09-30 TV 이름 2판 ⓒ(T5 회신) = 이름은 두 줄까지 — 「스탠다드 넷플릭스」가 「스탠다드…」로 잘려 넷플릭스 상품인지 안 보이던 것 · 낱말 단위로 꺾음 */
.sgc-tv-pill .sgc-nm { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; word-break: keep-all; line-height: 1.25; }
.sgc-tv-pill .sgc-df { display: block; font-size: var(--fs-tiny); color: #888; margin-top: 1px; }
.sgc-tv-pill.on { border-color: #1db954; background: #f0faf3; }
.sgc-tv-pill.on .sgc-nm { color: #158f40; }
.sgc-tv-off-line { font-size: var(--fs-small); color: #777; margin-top: 7px; }
.sgc-tv-off-line a { color: #1273e6; text-decoration: underline; cursor: pointer; }
.sgc-tv-jump {
    margin-top: 7px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: var(--fs-small);
    color: #7a5a00;
}

/* 금액 요약 */
.sgc-sum {
    margin-top: 11px;
    background: linear-gradient(135deg, #eafaf0, #f2fcf5);
    border: 1px solid #cdeeda;
    border-radius: 12px;
    padding: 11px 12px 10px;
    text-align: center;
}
.sgc-lead { font-size: var(--fs-small); color: #4a8a5f; font-weight: 700; }
.sgc-num { font-size: var(--fs-num-xl); font-weight: 900; color: #158f40; line-height: 1.15; }
.sgc-num .sgc-u { font-size: var(--fs-subtitle); font-weight: 800; margin-left: 1px; }
.sgc-split { font-size: var(--fs-small); color: #56795f; margin-top: 1px; }
.sgc-fee { font-size: var(--fs-sub); color: #333; margin-top: 7px; font-weight: 600; }
.sgc-fee small { display: block; font-weight: 400; font-size: var(--fs-tiny); color: #9ab3a0; margin-top: 3px; line-height: 1.5; }

/* 휴대폰 결합 할인 토글 — 답변 카드 토글과 같은 결(요금 자리 통일 2026-08-04 대표 ①) */
.sgc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 11px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: #f5f5f5;
    color: #888;
    font-size: var(--fs-small);
    cursor: pointer;
    user-select: none;
}
.sgc-toggle .sgc-toggle-pill { width: 26px; height: 14px; border-radius: 8px; background: #ccc; position: relative; transition: background .15s; }
.sgc-toggle .sgc-toggle-pill::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .15s; }
.sgc-toggle.on { border-color: #1db954; background: #f0faf3; color: #158f40; font-weight: 700; }
.sgc-toggle.on .sgc-toggle-pill { background: #1db954; }
.sgc-toggle.on .sgc-toggle-pill::after { left: 14px; }

/* 확인 카드 심플판 한 줄 (확정 카드 경유 손님 — 2026-08-04 대표 ③) */
.moabi-flow-entry-card .entry-summary-compact { text-align: center; }

/* 접힌 추천 */
.sgc-more { margin-top: 9px; border: 1px solid #eee; border-radius: 9px; padding: 7px 10px; }
.sgc-more summary { font-size: var(--fs-sub); color: #666; cursor: pointer; font-weight: 600; }
.sgc-more-inner { font-size: var(--fs-small); color: #555; margin-top: 6px; line-height: 1.7; }

/* 버튼·안심 문구 */
.sgc-btn-main {
    display: block;
    width: 100%;
    margin-top: 11px;
    background: #1db954;
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 12px 8px;
    font-size: var(--fs-body);
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.sgc-btn-main:disabled { opacity: 0.6; cursor: default; }
.sgc-ease { font-size: var(--fs-tiny); color: #999; text-align: center; margin-top: 6px; }
.sgc-btn-sub-row { display: flex; gap: 6px; margin-top: 7px; }
.sgc-btn-sub {
    flex: 1;
    background: #f5f5f5;
    color: #555;
    border: 1px solid #e5e5e5;
    border-radius: 9px;
    padding: 8px;
    font-size: var(--fs-sub);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

/* ── 확인 한 장 (2.5단계 연결 · 시안 ④ 확정 2026-08-26) ─────────────────
   고른 조건은 한 줄로 접고 [바꾸기]로 펼친다 · 해피콜·동의·고객 유형이 이 한 장 안에서 끝난다 */
.sgc-picked {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #9fd6ae;
    background: #f4fbf6;
    border-radius: 10px;
}
.sgc-p-body { flex: 1; font-size: var(--fs-sub); line-height: 1.55; color: #2c5c3c; }
.sgc-p-body b { color: #1f4d2e; }
.sgc-p-tag { font-size: var(--fs-tiny); color: #6f9a7e; font-weight: 400; }
.sgc-p-nw { white-space: nowrap; } /* 금액·단위가 줄바꿈으로 갈리지 않게 */
.sgc-p-split { font-size: var(--fs-tiny); color: #7a9a85; font-weight: 400; }
.sgc-btn-change {
    flex: 0 0 auto;
    border: 1px solid #bcdcc7;
    background: #fff;
    color: #2c6e3f;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.sgc-change-box {
    margin-top: 4px;
    padding: 2px 9px 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fcfcfc;
}
.sgc-change-box .sgc-kept { margin-top: 9px; }

/* 입력 단계 미리 보기 한 줄 (2026-09-25 · 입력 화면 「1 / 4」와 같은 분모) */
.sgc-steps { margin-top: 9px; font-size: var(--fs-sub); color: #444; line-height: 1.5; }

/* 해피콜 — 신청 직전 한 줄(문구 ㉮ 대표 확정) */
.sgc-happy {
    margin-top: 10px;
    padding: 7px 9px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: var(--fs-small);
    color: #666;
}

/* 동의 */
.sgc-agree { margin-top: 9px; }
.sgc-agree-all {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    font-size: var(--fs-sub);
    font-weight: 600;
    color: #444;
    cursor: pointer;
}
.sgc-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border: 1.5px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: transparent;
    font-size: var(--fs-small);
    font-weight: 800;
}
.sgc-chk.sm { width: 16px; height: 16px; font-size: var(--fs-tiny); }
.sgc-chk.on { border-color: #34a853; background: #34a853; color: #fff; }
.sgc-agree-opt { margin-top: 6px; }
.sgc-agree-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    font-size: var(--fs-small);
    color: #666;
    cursor: pointer;
}
.sgc-agree-note {
    margin-top: 5px;
    font-size: var(--fs-tiny);
    color: #999;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 고객 유형 */
.sgc-ctype { margin-top: 10px; }
.sgc-ctype-q { font-size: var(--fs-small); color: #777; font-weight: 600; }
/* 두 칸씩 두 줄 — 넷을 한 줄에 두면 칸이 좁아, 화면 오른쪽 아래에 떠 있는
   「맨 아래로」 단추가 마지막 칸을 통째로 덮어 못 누르는 자리가 생긴다(2026-08-27 실측) */
.sgc-ctype-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 6px; }
.sgc-ctype-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1.5px solid #e3e3e3;
    background: #fafafa;
    border-radius: 9px;
    padding: 7px 3px 6px;
    cursor: pointer;
    font-family: inherit;
}
.sgc-ctype-btn .sgc-ct-i { font-size: var(--fs-body); line-height: 1; }
.sgc-ctype-btn .sgc-ct-l { font-size: var(--fs-small); color: #666; font-weight: 600; }
.sgc-ctype-btn.on { border-color: #34a853; background: #f4fbf6; }
.sgc-ctype-btn.on .sgc-ct-l { color: #2c6e3f; }

/* 지금 이유 두 줄 — 가입 유도 문구 원칙(2026-07-16 대표) */
.sgc-why {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 11px;
    font-size: var(--fs-tiny);
    color: #888;
}

/* 동의 전 = 꺼진 단추 */
.sgc-btn-main.off { background: #c8e6c9; cursor: default; }
.sgc-ease.warn { color: #d93025; font-weight: 600; }

/* 좁은 화면(360px 언저리) — 알약 글자 줄임 유지 */
@media (max-width: 380px) {
    .sgc-card { padding: 12px 10px 10px; }
    .sgc-tv-pill .sgc-nm { font-size: var(--fs-tiny); }
    .sgc-num { font-size: var(--fs-num-xl); }
    .sgc-ctype-btn .sgc-ct-l { font-size: var(--fs-tiny); }
    .sgc-p-body { font-size: var(--fs-small); }
}