/* ═══════════════════════════════════════════════════════════════
   판매용 상담채팅 «샘플 데모» — /ai-chat 전용 (2026-08-27)
   ───────────────────────────────────────────────────────────────
   🔴 `.cd-win` 의 640×780 은 **파는 물건의 실제 치수**다(사장님 확정 2026-08-27).
      손님이 여기서 보는 크기가 곧 자기 사이트에 붙는 크기여야 하므로 임의로 줄이지 말 것.
      좁은 화면에서만 `min()` 으로 내려간다.
   ⛔ 색은 업종 탭이 바꾼다 — 인라인 `--cd-accent` 를 JS 가 갈아끼운다.
      그래서 여기 하드코딩된 색을 늘리면 탭을 바꿔도 안 따라오는 자리가 생긴다.
   ⛔ 모든 토큰은 `var(--x, 폴백)` — 이 CSS 가 레이아웃 밖(이메일 캡처·단독 미리보기)에서
      쓰여도 색이 빠지지 않게. (2026-08-25 스튜디오 사고와 같은 함정)
   ═══════════════════════════════════════════════════════════════ */

.cd-sec {
    padding: 72px 20px;
    background: var(--canvas-alt, #FAF9F7);
    border-top: 1px solid var(--line, #E4E2DD);
    border-bottom: 1px solid var(--line, #E4E2DD);
}
.cd-wrap { max-width: 1160px; margin: 0 auto; }

.cd-head { text-align: center; margin-bottom: 28px; }
.cd-head h2 {
    font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em;
    color: var(--ink, #16181D); margin: 0 0 10px;
}
.cd-head h2 .g { color: var(--accent, #E8451A); }
.cd-head p { font-size: 15px; line-height: 1.75; color: var(--body, #5B6169); margin: 0; }

/* ── 업종 탭 ─────────────────────────────────────────────── */
.cd-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px;
}
.cd-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--line-strong, #C9C6BF); background: var(--surface, #fff);
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--body, #5B6169);
    cursor: pointer; transition: all .16s; line-height: 1.3;
}
.cd-tab:hover { border-color: var(--ink, #16181D); color: var(--ink, #16181D); }
.cd-tab.is-on {
    background: var(--cd-accent, #E8451A); border-color: var(--cd-accent, #E8451A);
    color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.cd-tab i { font-size: 15px; }

/* ── 무대: 왼쪽 창 · 오른쪽 설명 ───────────────────────── */
.cd-stage {
    display: flex; gap: 32px; align-items: flex-start; justify-content: center;
}

/* ── 창 — 파는 물건의 실제 크기 ─────────────────────────── */
.cd-win {
    width: 640px; flex-shrink: 0;
    height: 780px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #E4E2DD);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(22, 24, 29, .13);
}

.cd-bar {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px;
    background: var(--cd-accent, #E8451A); color: #fff; flex-shrink: 0;
}
.cd-ava {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .2); font-size: 18px;
}
.cd-bar-t { flex: 1; min-width: 0; }
.cd-bar-t b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.cd-bar-t span {
    display: block; font-size: 11.5px; line-height: 1.4; opacity: .85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; opacity: .9; }
.cd-live i { font-size: 8px; }

.cd-msgs {
    flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px;
    display: flex; flex-direction: column; gap: 12px;
    background: var(--surface-alt, #F6F5F2);
    scrollbar-width: thin;
}
.cd-msgs::-webkit-scrollbar { width: 5px; }
.cd-msgs::-webkit-scrollbar-thumb { background: var(--line-strong, #C9C6BF); border-radius: 3px; }

.cd-msg { display: flex; gap: 9px; max-width: 84%; }
.cd-msg-ava {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--cd-accent, #E8451A); color: #fff;
}
.cd-bubble {
    padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.68;
    background: var(--surface, #fff); color: var(--ink, #16181D);
    border: 1px solid var(--line, #E4E2DD);
    white-space: pre-wrap; word-break: break-word;
}
.cd-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.cd-msg.me .cd-bubble {
    background: var(--cd-accent, #E8451A); color: #fff; border-color: transparent;
}
.cd-msg.me .cd-msg-ava { background: var(--ink, #16181D); }

.cd-typing { display: flex; gap: 4px; padding: 13px 15px; }
.cd-typing i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--cd-accent, #E8451A);
    animation: cdBounce 1.3s infinite;
}
.cd-typing i:nth-child(2) { animation-delay: .18s; }
.cd-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes cdBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ── 추천 질문 칩 ─────────────────────────────────────── */
.cd-chips {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; flex-shrink: 0;
    background: var(--surface, #fff);
}
.cd-chips:empty { display: none; }
.cd-chip {
    padding: 7px 13px; border-radius: 999px; font-family: inherit; font-size: 12.5px;
    border: 1px solid var(--cd-accent, #E8451A); background: transparent;
    color: var(--cd-accent, #E8451A); cursor: pointer; transition: all .15s; line-height: 1.3;
}
.cd-chip:hover { background: var(--cd-accent, #E8451A); color: #fff; }

/* ── 입력 ─────────────────────────────────────────────── */
.cd-foot { flex-shrink: 0; background: var(--surface, #fff); border-top: 1px solid var(--line, #E4E2DD); }
.cd-input { display: flex; gap: 8px; padding: 12px 16px; align-items: flex-end; }
.cd-input textarea {
    flex: 1; min-height: 44px; max-height: 110px; resize: none;
    padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 14px; line-height: 1.5;
    border: 1px solid var(--line-strong, #C9C6BF); background: var(--surface, #fff); color: var(--ink, #16181D);
    outline: none; transition: border-color .15s;
}
.cd-input textarea:focus { border-color: var(--cd-accent, #E8451A); }
.cd-input textarea:disabled { background: var(--surface-alt, #F6F5F2); color: var(--body, #5B6169); }
.cd-send {
    width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 10px; cursor: pointer;
    background: var(--cd-accent, #E8451A); color: #fff; font-size: 17px; transition: opacity .15s;
    display: flex; align-items: center; justify-content: center;
}
.cd-send:disabled { opacity: .4; cursor: not-allowed; }

.cd-meter {
    padding: 0 16px 11px; font-size: 11.5px; line-height: 1.5; color: var(--body, #5B6169);
    display: flex; align-items: center; gap: 6px;
}
.cd-meter i { font-size: 12px; }

/* 상한 도달 — 입력 대신 상담 CTA */
.cd-locked { padding: 16px; text-align: center; }
.cd-locked p { font-size: 13.5px; line-height: 1.7; color: var(--body, #5B6169); margin: 0 0 12px; }
.cd-locked-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cd-locked button {
    padding: 11px 20px; border-radius: var(--r-lg, 8px); font-family: inherit;
    font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; line-height: 1.3;
}
.cd-locked .p { background: var(--cd-accent, #E8451A); color: #fff; }
.cd-locked .g { background: transparent; border-color: var(--line-strong, #C9C6BF); color: var(--ink, #16181D); }

/* ── 오른쪽 설명 + 회사 자료 ───────────────────────────── */
.cd-side { flex: 1; min-width: 0; max-width: 420px; padding-top: 4px; }
.cd-side h3 {
    font-size: 19px; font-weight: 800; color: var(--ink, #16181D); margin: 0 0 10px; letter-spacing: -.01em;
}
.cd-side > p { font-size: 14px; line-height: 1.8; color: var(--body, #5B6169); margin: 0 0 18px; }

.cd-points { list-style: none; margin: 0 0 20px; padding: 0; }
.cd-points li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 13.5px; line-height: 1.7; color: var(--body, #5B6169); padding: 7px 0;
    border-bottom: 1px dashed var(--line, #E4E2DD);
}
.cd-points li:last-child { border-bottom: 0; }
.cd-points i { color: var(--cd-accent, #E8451A); font-size: 14px; margin-top: 3px; flex-shrink: 0; }
.cd-points b { color: var(--ink, #16181D); font-weight: 700; }

.cd-facts { border: 1px solid var(--line, #E4E2DD); border-radius: var(--r-lg, 8px); background: var(--surface, #fff); }
.cd-facts > summary {
    padding: 13px 15px; cursor: pointer; font-size: 13.5px; font-weight: 700;
    color: var(--ink, #16181D); list-style: none; display: flex; align-items: center; gap: 8px;
}
.cd-facts > summary::-webkit-details-marker { display: none; }
.cd-facts > summary i { color: var(--cd-accent, #E8451A); }
.cd-facts > summary::after { content: '▾'; margin-left: auto; opacity: .5; font-size: 12px; }
.cd-facts[open] > summary::after { content: '▴'; }
.cd-facts-body { padding: 0 15px 14px; }
.cd-facts-body p { font-size: 12px; line-height: 1.7; color: var(--body, #5B6169); margin: 0 0 10px; }
.cd-facts-body ul { margin: 0; padding-left: 17px; }
.cd-facts-body li { font-size: 12.5px; line-height: 1.75; color: var(--body, #5B6169); margin-bottom: 5px; }

.cd-note {
    margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--body, #5B6169);
    display: flex; gap: 7px; align-items: flex-start;
}
.cd-note i { color: var(--cd-accent, #E8451A); margin-top: 2px; flex-shrink: 0; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1120px) {
    .cd-stage { flex-direction: column; align-items: center; }
    .cd-side { max-width: 640px; width: 100%; }
}
@media (max-width: 700px) {
    .cd-sec { padding: 52px 14px; }
    .cd-win { width: 100%; height: min(78vh, 640px); }
    .cd-tab { padding: 9px 14px; font-size: 13px; }
    .cd-msg { max-width: 90%; }
}