/* =====================================================================
   이미지성형외과 상담 챗봇 위젯 — styles.css
   디자인 프로토타입(design/chatbot.dc.html)의 인라인 스타일을
   CSS 클래스 + 토큰으로 이식한 프로덕션 스타일시트.
   프레임워크/빌드 없음. 순수 CSS.
   ===================================================================== */

/* ---------- 1. 디자인 토큰 ----------
   딥 그린 × 세이지 팔레트 재전환(2026-07-20 고객 요청, 한국 사이트 기준) — 골드 악센트 유지 */
:root {
  /* 브랜드 원색 */
  --ic-brand-deep: #1F4A3D; /* 헤더 그라디언트 하단·FAB·유저 버블 */
  --ic-brand:      #2D6A53; /* 딥그린 — 전송 버튼, 링크, 스텝 인디케이터, 캘린더 선택일, 아바타 */
  --ic-brand-soft: #E7EFE9; /* 옅은 강조 배경 — 호버, 선택 상태 */
  --ic-bg:         #F4F7F4; /* 메시지 영역 배경, 세이지 오프화이트 */
  --ic-line:       #D8E2DA; /* 보더/디바이더(세이지) */
  --ic-ink:        #1C2420; /* 본문 텍스트(그린틴트 다크) */
  --ic-muted:      #5F6F66; /* 보조 텍스트/플레이스홀더 */
  --ic-gold:       #C8A86B; /* champagne — 상태 점·헤어라인 등 미세 악센트만 */

  /* 기존 토큰명 유지(호환) — 값은 전량 딥그린×세이지 팔레트로 재매핑 */
  --ic-navy:      var(--ic-ink);      /* 주색 텍스트: 타이틀/강조 라벨 */
  --ic-navy-deep: var(--ic-brand-deep); /* 가장 짙은 다크 톤(FAB/닫기 버튼) */
  --ic-navy-soft: var(--ic-muted);    /* 보조 텍스트 */
  --ic-blue:      var(--ic-brand);    /* 포인트 CTA/링크/사용자 버블 강조/포커스 */
  --ic-blue-light:var(--ic-brand-soft); /* 하이라이트 */
  --ic-coral:     #f38c6c;            /* 응급 배지 등 경고색 — red/coral 계열 그대로 유지 */
  --ic-surface:   #ffffff;            /* 봇 버블 배경(흰 배경 + 보더) */
  --ic-surface-2: var(--ic-brand-soft); /* 입력영역/카드 배경(옅은 라일락) */
  --ic-white:     #ffffff;
  --ic-text:      var(--ic-ink);      /* 본문 */
  --ic-text-sub:  var(--ic-muted);    /* 캡션/타임스탬프 */

  --ic-grad-blue: linear-gradient(135deg, var(--ic-brand-deep), var(--ic-brand));
  --ic-grad-coral: linear-gradient(135deg, #f38c6c, #ef7a55);
}

/* ---------- 2. 리셋 (위젯 스코프 한정) ----------
   ⚠️ 이 스타일시트는 embed.js 를 통해 **임의의 외부 사이트**에도 주입된다.
   따라서 전역 셀렉터(`*`, `html`, `body`)를 쓰면 호스트 페이지의 레이아웃·서체를
   덮어써 사이트를 망가뜨린다. 모든 리셋은 위젯 루트 `#ic-root` 안으로만 스코프할 것.
   데모 페이지(index.html) 자체의 body 리셋은 index.html 인라인 <style> 에 있음. */
#ic-root, #ic-root *, #ic-root *::before, #ic-root *::after { box-sizing: border-box; }
#ic-root {
  font-family: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ic-ink);
  text-align: left;
  letter-spacing: normal;
}
/* 반대 방향 방어 ① — 호스트 사이트의 button/input 전역 규칙이 위젯 안으로 새는 것 차단.
   여기 적는 속성은 위젯 컴포넌트 클래스가 재선언하지 않는 것들만(ID 셀렉터라 특이도 1-0-1로
   컴포넌트 클래스를 이깁니다). 박스 속성은 아래 ②에 둘 것. */
#ic-root button, #ic-root input, #ic-root textarea, #ic-root select {
  font-family: inherit; letter-spacing: normal; text-transform: none;
}
/* 호스트가 input 에 appearance:none 을 걸어도 동의 체크박스는 보이도록 */
#ic-root input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; }

/* 반대 방향 방어 ② — 박스 속성.
   호스트 사이트가 `button { padding: 12px 20px }` 같은 element 전역 규칙을 갖는 경우
   padding 을 선언하지 않은 위젯 컨트롤이 그 값을 먹어 레이아웃이 깨진다
   (2026-07-23 실측: 헤더 아이콘 버튼의 svg 폭이 0px 로 찌그러짐).
   특이도를 **정확히 0-1-0(클래스 1개)** 로 맞추는 게 핵심 —
     · 호스트의 element 규칙(0-0-1)보다 높아 방어가 되고
     · 위젯 컴포넌트 클래스(0-1-0)와는 동률이라, **이 블록보다 뒤에 오는** 컴포넌트 선언이 이긴다.
   그래서 이 블록은 반드시 컴포넌트 규칙들보다 **위**에 있어야 한다. 순서를 바꾸지 말 것.
   (`:where()` 는 특이도 0 이므로 #ic-root 스코프를 특이도 상승 없이 붙이는 용도) */
:where(#ic-root) :is([class^="ic-"], [class*=" ic-"]):where(button, input, textarea, select, label) {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  text-indent: 0;
  box-shadow: none;
  float: none;
}
/* ⚠️ text-align / vertical-align 은 여기 넣지 말 것 — 버튼의 UA 기본값(text-align:center)까지
   덮어써 "다음" 같은 풀폭 버튼 라벨이 왼쪽으로 붙는다(2026-07-23 실측). */

/* ---------- 3. 키프레임 (모두 보존) ---------- */
@keyframes icFabPulse {
  0%   { box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 0 0 rgba(45,106,83,.30); }
  70%  { box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 0 13px rgba(45,106,83,0); }
  100% { box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 0 0 rgba(45,106,83,0); }
}
@keyframes icPanelIn  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes icDrawerIn { from { opacity: 0; transform: translateX(36px); }            to { opacity: 1; transform: translateX(0); } }
@keyframes icBubbleIn { from { opacity: 0; transform: translateY(8px); }             to { opacity: 1; transform: translateY(0); } }
@keyframes icTyping   { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes icFloat    { from { opacity: 0; transform: translateY(6px); }             to { opacity: 1; transform: translateY(0); } }
@keyframes icMicPulse { 0% { box-shadow: 0 0 0 0 rgba(243,140,108,.5); } 70% { box-shadow: 0 0 0 9px rgba(243,140,108,0); } 100% { box-shadow: 0 0 0 0 rgba(243,140,108,0); } }
@keyframes icDot      { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ---------- 4. 데모 호스트 배경 ---------- */
.ic-demo-bg {
  min-height: 100vh;
  background: radial-gradient(1100px 620px at 50% -8%, #F8FBF8 0%, #F1F6F2 55%, #E9F1EB 100%);
  position: relative;
  overflow: hidden;
}

/* ---------- 5. FAB 환영 말풍선 ---------- */
.ic-fab-bubble {
  /* bottom/right는 폴백값 — app.js positionFabBubble()이 FAB 실측 위치로 재계산
     (호스트 사이트가 .ic-fab bottom을 오버라이드해도 말풍선이 가려지지 않게) */
  position: fixed; right: 24px; bottom: 110px; z-index: 40; max-width: 260px;
  background: #fff; border: 1px solid var(--ic-line); border-radius: 16px;
  padding: 15px 16px; box-shadow: 0 12px 40px rgba(28,36,32,.16);
  animation: icFloat .3s ease-out;
}
.ic-fab-bubble__close {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  border: none; background: transparent; color: var(--ic-muted); cursor: pointer;
  border-radius: 6px; font-size: 14px;
}
/* word-break: keep-all — 한글이 단어 중간에서 끊기는 것 방지("도와드 / 려요." 같은 어색한 줄바꿈) */
.ic-fab-bubble__title { font-size: 14px; font-weight: 700; color: var(--ic-navy); margin-bottom: 4px; word-break: keep-all; }
.ic-fab-bubble__body  { font-size: 14px; color: var(--ic-ink); line-height: 1.55; word-break: keep-all; }
.ic-fab-bubble__tail {
  position: absolute; right: 30px; bottom: -7px; width: 14px; height: 14px;
  background: #fff; border-right: 1px solid var(--ic-line);
  border-bottom: 1px solid var(--ic-line); transform: rotate(45deg);
}

/* ---------- 6. 중앙 패널 스테이지 ---------- */
.ic-stage {
  position: fixed; inset: 0; z-index: 46;
  display: flex; align-items: center; justify-content: center;
  gap: 22px; padding: 40px; pointer-events: none;
}

/* ---------- 7. 챗 패널 ---------- */
.ic-panel {
  position: relative; pointer-events: auto; flex: none;
  width: 480px; max-width: calc(100vw - 32px); height: 700px; max-height: 88vh;
  background: #fff; border-radius: 22px; box-shadow: 0 22px 60px rgba(28,36,32,.20);
  display: flex; flex-direction: column; overflow: hidden;
  animation: icPanelIn .25s ease-out;
}

/* header — 딥그린 그라디언트(프리저베 브랜드 톤) */
.ic-header {
  background: linear-gradient(180deg, #2D6A53, #1F4A3D);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 14px; display: flex; align-items: center; gap: 12px; flex: none;
}
/* 아바타 — 52px 대형 원형(고객 요청: 아이콘 크게), 흰 원 + 딥그린 세리프 P 모노그램 */
.ic-header__avatar {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 4px 14px rgba(28,36,32,.25);
}
.ic-mono {
  font-family: "Noto Serif KR", "Pretendard", serif; font-weight: 600;
  color: var(--ic-brand); font-size: 26px; line-height: 1;
  transform: translateY(-1px);
}
.ic-header__dot {
  position: absolute; right: 0; bottom: 0; width: 13px; height: 13px;
  border-radius: 50%; background: var(--ic-gold); border: 2.5px solid #FFFFFF;
}
.ic-header__meta { flex: 1; min-width: 0; }
.ic-header__title {
  font-size: 16px; font-weight: 600; color: #FFFFFF; line-height: 1.2; letter-spacing: -.01em;
  font-family: "Noto Serif KR", "Pretendard", serif;
}
.ic-header__sub   { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px; }
.ic-header__btn {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.28); background: transparent;
  border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.ic-header__btn:hover { background: rgba(255,255,255,.12); }
.ic-header__btn.is-on { background: var(--ic-brand); border-color: var(--ic-brand); }

/* messages */
.ic-messages {
  flex: 1; overflow-y: auto; padding: 18px 14px 8px;
  background: var(--ic-bg); display: flex; flex-direction: column; gap: 14px;
}
.ic-msg-bot  { display: flex; gap: 9px; align-items: flex-start; animation: icBubbleIn .18s ease-out; }
.ic-msg-user { display: flex; justify-content: flex-end; animation: icBubbleIn .18s ease-out; }
.ic-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF;
  border: 1px solid var(--ic-line);
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px;
}
.ic-avatar-sm .ic-mono { font-size: 15px; }
.ic-bot-col  { max-width: 332px; min-width: 0; }
.ic-user-col { max-width: 326px; }

.ic-bubble-bot {
  background: #ffffff; color: var(--ic-ink); border: 1px solid var(--ic-line); border-radius: 14px;
  padding: 12px 14px; font-size: 15px; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
}
.ic-bubble-user {
  background: var(--ic-brand-deep); color: var(--ic-bg); border-radius: 14px;
  padding: 12px 14px; font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.ic-time { font-size: 11px; color: var(--ic-muted); font-variant-numeric: tabular-nums; }
.ic-time--user { display: block; margin-top: 5px; text-align: right; }

/* emergency banner — 경고색은 red/coral 계열 유지 */
.ic-emergency {
  border: 1.5px solid var(--ic-coral); background: #fff5f1; border-radius: 12px;
  padding: 11px 13px; margin-bottom: 8px; display: flex; gap: 9px; align-items: flex-start;
}
.ic-emergency__text { font-size: 14px; color: #b94a27; line-height: 1.5; font-weight: 600; }
.ic-emergency__tel { color: #e2603b; font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; }

/* source chips */
.ic-sources { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.ic-source-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--ic-line); border-radius: 999px; padding: 6px 11px;
  cursor: pointer; max-width: 250px;
}
.ic-source-chip:hover { background: var(--ic-brand-soft); border-color: var(--ic-brand); }
.ic-source-chip__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ic-source-chip__type { font-size: 11px; font-weight: 800; color: var(--ic-navy-soft); flex: none; }
.ic-source-chip__title { font-size: 12px; color: var(--ic-navy-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-source-disclaimer { font-size: 11px; color: var(--ic-muted); margin-top: 7px; line-height: 1.5; }

/* per-message actions (speak + time) */
.ic-msg-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ic-speak-btn {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--ic-line);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none;
}
.ic-speak-btn.is-speaking { border-color: rgba(243,140,108,.5); background: #fff5f1; }

/* typing indicator */
.ic-typing-row { display: flex; gap: 9px; align-items: flex-start; }
.ic-typing {
  background: #ffffff; border: 1px solid var(--ic-line); border-radius: 14px; padding: 14px 16px;
  display: flex; gap: 5px; align-items: center;
}
.ic-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-muted); animation: icTyping 1.1s infinite; }
.ic-typing span:nth-child(2) { animation-delay: .18s; }
.ic-typing span:nth-child(3) { animation-delay: .36s; }

/* quick replies */
.ic-quick {
  flex: none; padding: 10px 14px 4px; background: var(--ic-bg);
  display: flex; flex-wrap: wrap; gap: 7px;
}
.ic-quick-chip {
  flex: none; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--ic-line); background: #fff; color: var(--ic-ink); white-space: nowrap;
}
.ic-quick-chip:hover { background: var(--ic-brand-soft); border-color: var(--ic-brand); }

/* listening indicator — 경고색은 red/coral 계열 유지 */
.ic-listening {
  flex: none; margin: 6px 14px 0; display: flex; align-items: center; gap: 9px;
  background: #fff5f1; border: 1px solid rgba(243,140,108,.4); border-radius: 12px; padding: 9px 13px;
}
.ic-listening__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ic-coral); animation: icDot 1s infinite; }
.ic-listening__label { font-size: 13.5px; font-weight: 700; color: #cf5a32; }
.ic-listening__src { font-size: 12px; color: #c98a72; margin-left: auto; }

/* input bar */
.ic-inputbar { flex: none; padding: 12px 14px 14px; background: #fff; border-top: 1px solid var(--ic-line); }
.ic-inputbar__row {
  display: flex; gap: 9px; align-items: flex-end; background: #ffffff;
  border: 1px solid var(--ic-line); border-radius: 16px; padding: 7px 7px 7px 8px;
}
.ic-inputbar__row.is-listening { border-color: rgba(243,140,108,.55); }
.ic-mic-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--ic-brand-soft);
}
.ic-mic-btn.is-listening { background: var(--ic-coral); animation: icMicPulse 1.2s infinite; }
.ic-textarea {
  flex: 1; border: none; background: transparent; resize: none; font-size: 15px; line-height: 1.5;
  font-family: inherit; outline: none; color: var(--ic-text); max-height: 96px; padding: 9px 2px;
}
.ic-textarea::placeholder { color: var(--ic-muted); opacity: 1; }
.ic-send-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--ic-brand);
}
.ic-send-btn:disabled { background: #D8E2DA; opacity: 1; cursor: default; }
.ic-mic-toast { font-size: 12px; color: #cf5a32; margin-top: 6px; text-align: center; }

/* ---------- 8. 예약 드로우어 ---------- */
.ic-drawer {
  position: relative; pointer-events: auto; flex: none;
  width: 400px; max-width: calc(100vw - 32px); height: 700px; max-height: 88vh;
  background: #fff; border-radius: 22px; box-shadow: 0 22px 60px rgba(28,36,32,.20);
  display: flex; flex-direction: column; overflow: hidden; animation: icDrawerIn .26s ease-out;
}

/* drawer header */
.ic-drawer__head { flex: none; padding: 16px 16px 14px; border-bottom: 1px solid var(--ic-line); }
.ic-drawer__head-row { display: flex; align-items: center; gap: 10px; }
.ic-drawer__icon {
  width: 30px; height: 30px; border-radius: 9px; background: var(--ic-brand-soft);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ic-drawer__title {
  flex: 1; font-size: 16px; font-weight: 600; color: var(--ic-navy);
  font-family: "Noto Serif KR", "Pretendard", serif;
}
.ic-drawer__close {
  width: 32px; height: 32px; border: 1px solid var(--ic-line); background: transparent; border-radius: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.ic-drawer__close:hover { background: var(--ic-brand-soft); }

/* step indicator */
.ic-steps { display: flex; align-items: center; gap: 0; margin-top: 14px; }
.ic-step { display: flex; align-items: center; }
.ic-step__dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; border: 1.5px solid;
}
.ic-step__line { flex: 1; height: 2px; margin: 0 4px; }

/* drawer notice — 경고색은 red/coral 계열 유지 */
.ic-drawer__notice {
  margin-top: 13px; display: flex; align-items: flex-start; gap: 8px;
  background: #fff5f1; border: 1px solid rgba(243,140,108,.35); border-radius: 10px; padding: 9px 11px;
}
.ic-drawer__notice span { font-size: 12px; color: #b05a38; line-height: 1.5; font-weight: 600; }

/* drawer body */
.ic-drawer__body { flex: 1; overflow-y: auto; padding: 18px 16px; }
.ic-field-title { font-size: 15px; font-weight: 800; color: var(--ic-text); margin-bottom: 4px; }
.ic-field-sub   { font-size: 13px; color: var(--ic-muted); margin-bottom: 18px; }
.ic-field-label { font-size: 13px; font-weight: 700; color: var(--ic-text); margin-bottom: 7px; }

/* step 2 — dates & ampm */
.ic-summary-line { font-size: 13px; color: var(--ic-navy-soft); margin-bottom: 16px; }
.ic-summary-line b { color: var(--ic-navy); }
.ic-ampm-row { display: flex; gap: 8px; }
.ic-ampm-btn {
  flex: 1; font-size: 14.5px; font-weight: 700; padding: 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--ic-line); background: #fff; color: var(--ic-navy-soft);
}
.ic-ampm-btn.is-selected { border-color: var(--ic-blue); background: var(--ic-brand-soft); color: var(--ic-blue); }

/* step 3 — inputs */
.ic-input-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ic-text); margin-bottom: 7px; }
.ic-text-input {
  width: 100%; font-size: 15px; padding: 13px 14px; border: 1px solid var(--ic-line);
  border-radius: 12px; outline: none; font-family: inherit;
}
.ic-text-input--name { margin-bottom: 16px; }
.ic-text-input--phone { font-variant-numeric: tabular-nums; }
.ic-text-input--phone.has-error { border-color: #B3563E; }
.ic-input-error { font-size: 12px; color: #e2603b; margin-top: 7px; }

/* step 4 — consent */
.ic-consent-box {
  background: var(--ic-surface-2); border-radius: 12px; padding: 15px 16px;
  font-size: 13px; color: var(--ic-ink); line-height: 1.7; margin-bottom: 14px;
}
.ic-consent-box b { color: var(--ic-navy); }
.ic-consent-link { color: var(--ic-blue); font-weight: 700; text-decoration: underline; cursor: pointer; }
.ic-consent-check {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--ic-line); border-radius: 12px; padding: 14px; background: #fff;
}
.ic-consent-check.is-checked { border-color: var(--ic-blue); background: var(--ic-brand-soft); }
.ic-consent-check input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--ic-blue); flex: none; cursor: pointer; }
.ic-consent-check__label { font-size: 14px; color: var(--ic-text); font-weight: 700; line-height: 1.5; }
.ic-consent-check__req { color: #cf5a32; }

/* summary cards (step 4 / step 5) */
.ic-summary {
  margin-top: 18px; background: var(--ic-brand-soft); border: 1px solid var(--ic-line); border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; color: var(--ic-text); line-height: 1.95;
}
.ic-summary__head { font-size: 12px; font-weight: 800; color: var(--ic-muted); margin-bottom: 6px; }
.ic-summary__row { display: flex; justify-content: space-between; }
.ic-summary__row span { color: var(--ic-muted); }
.ic-summary__row b.tabular { font-variant-numeric: tabular-nums; }

/* step 5 — complete */
.ic-complete { text-align: center; padding: 24px 0 2px; }
.ic-complete__icon {
  width: 60px; height: 60px; border-radius: 50%; background: #e7f7ee;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.ic-complete__title { font-size: 17px; font-weight: 800; color: var(--ic-navy); margin-bottom: 8px; }
.ic-complete__sub { font-size: 14px; color: var(--ic-text-sub); line-height: 1.55; margin-bottom: 20px; }
.ic-complete__sub b { color: #b05a38; }
.ic-complete__summary {
  background: var(--ic-surface-2); border-radius: 12px; padding: 16px; text-align: left;
  font-size: 14px; color: var(--ic-text); line-height: 2.05;
}

/* drawer footer */
.ic-drawer__foot {
  flex: none; padding: 14px 16px 16px; border-top: 1px solid var(--ic-line); background: #fff;
}
.ic-foot-row { display: flex; gap: 8px; }
.ic-foot-back {
  font-size: 14.5px; font-weight: 700; padding: 15px 20px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--ic-line); background: #fff; color: var(--ic-navy-soft);
}
.ic-foot-next {
  flex: 1; font-size: 15.5px; font-weight: 800; padding: 15px; border-radius: 13px; cursor: pointer;
  border: none; color: #fff; background: var(--ic-grad-blue);
}
.ic-foot-next.is-submit { background: var(--ic-grad-coral); }
.ic-foot-next:disabled { opacity: .45; cursor: default; }
.ic-foot-close {
  width: 100%; font-size: 15.5px; font-weight: 800; padding: 15px; border-radius: 13px; cursor: pointer;
  border: none; color: #FFFFFF; background: var(--ic-brand-deep);
}

/* ---------- 9. FAB ---------- */
.ic-fab {
  /* 딥그린 — 브랜드 팔레트 내 가장 짙은 톤 (임베드 전제) */
  position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 64px; height: 64px;
  border-radius: 999px; border: none; cursor: pointer; background: var(--ic-brand-deep);
  box-shadow: 0 8px 28px rgba(0,0,0,.30); display: flex; align-items: center; justify-content: center;
  animation: icFabPulse 2.6s infinite;
}
.ic-fab:hover { background: #163830; }
/* 닫힘 상태: 헤드셋 + "24시간 상담" 대형 알약형 (2026-07-23 고객 요청 — 크게).
   임의의 외부 사이트에 얹히므로 크기를 CSS 변수로 노출해 호스트별 미세조정 가능. */
.ic-fab--pill {
  width: auto; height: 88px; padding: 0 34px 0 26px; gap: 13px;
  box-shadow: 0 10px 34px rgba(0,0,0,.32);
}
.ic-fab--pill:hover { transform: translateY(-2px); }
.ic-fab--pill { transition: transform .18s ease, background .18s ease; }
.ic-fab__label {
  color: #FFFFFF; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap;
  line-height: 1;
  font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
}
.ic-fab__icon { flex: none; display: block; }

/* utility */
.ic-hidden { display: none !important; }

/* focus ring (접근성) */
.ic-fab:focus-visible,
.ic-header__btn:focus-visible,
.ic-send-btn:focus-visible,
.ic-mic-btn:focus-visible,
.ic-quick-chip:focus-visible,
.ic-source-chip:focus-visible,
.ic-foot-next:focus-visible,
.ic-foot-back:focus-visible,
.ic-foot-close:focus-visible,
.ic-text-input:focus-visible,
.ic-textarea:focus-visible {
  outline: 2px solid var(--ic-blue); outline-offset: 2px;
}

/* ---------- 10. 반응형 (모바일 풀스크린 시트) ---------- */
@media (max-width: 480px) {
  /* 데스크톱은 중앙정렬이지만 모바일은 패널을 화면 상단에 고정 —
     중앙정렬 상태에서 패널 높이를 줄이면 위에 빈 공간이 뜨는 문제 방지 */
  .ic-stage { padding: 0; gap: 0; align-items: flex-start; justify-content: flex-start; }
  .ic-panel {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0;
  }
  /* 드로우어 오픈 시(고객 요청 2026-07-20): 대화가 주 — 패널은 상단 고정된 채
     하단 시트 높이만큼만 줄어 헤더·탭·메시지·입력창이 전부 보인다.
     영상 시트는 290px(카드 2~3개 + 내부 스크롤), 예약 시트는 위저드 공간이 필요해 60vh.
     :has 미지원 구형 브라우저는 패널 100vh 위에 시트가 겹침(내용 손실 없음). */
  .ic-stage:has(.ic-video) .ic-panel { height: calc(100vh - 290px); max-height: calc(100vh - 290px); }
  .ic-stage:has(.ic-drawer:not(.ic-video)) .ic-panel { height: 40vh; max-height: 40vh; }
  .ic-drawer {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 48;
    width: 100vw; max-width: 100vw;
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(28, 36, 32, .28);
  }
  .ic-drawer.ic-video { height: 290px; max-height: 290px; }
  .ic-drawer:not(.ic-video) { height: 60vh; max-height: 60vh; }
  /* 시트 공간 절약: 히어로 카드·빈 플레이어는 모바일에서 숨겨 영상 리스트가 바로 보이게 */
  .ic-drawer .ic-hero { display: none; }
  .ic-drawer .ic-video__player.is-empty { display: none; }

  /* 대형 FAB — 모바일에선 한 단계 축소(화면 하단을 과하게 가리지 않게) */
  .ic-fab { right: 16px; bottom: 16px; }
  .ic-fab--pill { height: 72px; padding: 0 24px 0 18px; gap: 10px; }
  .ic-fab__label { font-size: 23px; }
  .ic-fab__icon { width: 34px; height: 34px; }
  .ic-fab-bubble { max-width: min(280px, calc(100vw - 32px)); }
}

/* ===== 예약 달력 (Step 2) ===== */
.ic-calendar{border:1px solid var(--ic-line);border-radius:14px;padding:10px 10px 12px;background:#fff;}
.ic-cal-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;}
.ic-cal-title{font-size:14.5px;font-weight:800;color:var(--ic-navy,#1C2420);}
.ic-cal-nav{width:30px;height:30px;border:1px solid var(--ic-line);background:#fff;border-radius:8px;cursor:pointer;font-size:16px;color:var(--ic-navy-soft,#5F6F66);line-height:1;}
.ic-cal-nav:hover{background:var(--ic-brand-soft,#E7EFE9);border-color:var(--ic-blue,#2D6A53);color:var(--ic-blue,#2D6A53);}
.ic-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.ic-cal-dow span{text-align:center;font-size:11.5px;font-weight:700;color:var(--ic-muted,#5F6F66);padding:4px 0;}
.ic-cal-dow .sun,.ic-cal-cell.sun{color:#d4475f;}
.ic-cal-dow .sat,.ic-cal-cell.sat{color:#8A6A2E;}
.ic-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.ic-cal-cell{aspect-ratio:1/1;border:none;background:transparent;border-radius:9px;font-size:13.5px;color:var(--ic-text,#1C2420);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.ic-cal-cell.is-empty{cursor:default;}
.ic-cal-cell:not(.is-disabled):not(.is-empty):hover{background:var(--ic-brand-soft,#E7EFE9);}
.ic-cal-cell.is-disabled{color:#B7C2BB;cursor:not-allowed;}
.ic-cal-cell.is-selected{background:#2D6A53;color:#fff;font-weight:800;}
.ic-cal-cell.is-selected.sun,.ic-cal-cell.is-selected.sat{color:#fff;}
.ic-cal-picked{margin-top:9px;font-size:13px;font-weight:700;color:var(--ic-navy,#1C2420);}

/* ===== 예약 패널 시술 선택 리스트(Step1) ===== */
.ic-proc-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ic-proc{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid #D8E2DA;border-radius:10px;background:#fff;font-size:14px;cursor:pointer}
.ic-proc.is-selected{border-color:#2D6A53;background:#E7EFE9;font-weight:600}

/* ===== 예약 전송 실패 안내(Step4) — 경고색은 red 계열 유지 ===== */
.ic-book-error{margin:10px 0;padding:10px 12px;border:1px solid #B3563E;border-radius:10px;background:#FDF6F3;font-size:13px;color:#1C2420}
.ic-book-retry{margin-left:8px;padding:4px 10px;border:1px solid #B3563E;border-radius:8px;background:#fff;cursor:pointer}

/* ===== 유튜브 추천 패널 (예약 드로우어와 상호 배제) ===== */
.ic-video__body{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:14px 16px;}
.ic-video__player{border-radius:12px;overflow:hidden;background:#1C2420;aspect-ratio:16/9;flex:none;}
.ic-video__player iframe{width:100%;height:100%;border:0;display:block;}
.ic-video__player.is-empty{display:flex;align-items:center;justify-content:center;color:#9AA6A0;font-size:12.5px;}
.ic-video__list{display:flex;flex-direction:column;gap:8px;}
.ic-video__card{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid #D8E2DA;border-radius:12px;background:#fff;cursor:pointer;text-align:left;}
.ic-video__card:hover{border-color:var(--ic-blue,#2D6A53);}
.ic-video__card.is-active{border-color:var(--ic-blue,#2D6A53);background:#E7EFE9;}
.ic-video__thumb{width:96px;height:54px;object-fit:cover;border-radius:8px;flex:none;background:#E7EFE9;}
.ic-video__meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ic-video__vtitle{font-size:12.5px;font-weight:700;color:var(--ic-navy,#1C2420);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ic-video__channel{font-size:11px;color:var(--ic-navy-soft,#5F6F66);}
.ic-video__card:focus-visible{outline:2px solid var(--ic-blue,#2D6A53);outline-offset:2px;}
.ic-video__disclaim{flex:none;padding:10px 16px;font-size:11px;color:var(--ic-navy-soft,#5F6F66);border-top:1px solid #D8E2DA;background:#F4F7F4;}

/* ===== 우측 패널 프리저베 히어로 카드 (예약/영상 드로우어 공통 상단) ===== */
.ic-hero {
  background: linear-gradient(150deg, #1F4A3D 0%, #2D6A53 55%, #3B8A69 100%);
  border-radius: 14px; padding: 18px 18px 16px; color: #fff;
  position: relative; overflow: hidden; flex: none;
}
.ic-hero__wordmark {
  font-family: "Noto Serif KR", "Pretendard", serif; font-weight: 600;
  font-size: 19px; letter-spacing: .02em; line-height: 1.25;
}
.ic-hero__wordmark .tm { font-size: 10px; vertical-align: super; opacity: .75; }
.ic-hero__bar { width: 32px; height: 2px; background: var(--ic-gold); margin: 9px 0 8px; border-radius: 2px; }
.ic-hero__tagline { font-size: 12.5px; color: rgba(255,255,255,.86); line-height: 1.5; }
.ic-hero__watermark {
  position: absolute; right: -14px; top: -16px; font-family: "Noto Serif KR", serif;
  font-size: 92px; font-weight: 700; color: rgba(255,255,255,.08); line-height: 1;
  pointer-events: none; user-select: none;
}
.ic-drawer__head .ic-hero { margin-top: 13px; }
.ic-video__body .ic-hero { margin-bottom: 2px; }

/* ===== 퀵필탭 (모드 탭바 / 시작 선택 그리드 / 전환 제안 칩) ===== */
.ic-tabs {
  display: flex; gap: 6px; padding: 8px 12px 4px;
  background: var(--ic-bg, #F4F7F4); overflow-x: auto; scrollbar-width: none;
}
.ic-tabs::-webkit-scrollbar { display: none; }
.ic-tab {
  flex: 0 0 auto; border: 1px solid var(--ic-line, #D8E2DA); background: #fff; color: var(--ic-brand-deep, #1F4A3D);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s;
}
.ic-tab.is-active { background: var(--ic-brand, #2D6A53); border-color: var(--ic-brand, #2D6A53); color: #fff; font-weight: 600; }
.ic-tab-suggest {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  border: 1px dashed var(--ic-brand, #2D6A53); background: var(--ic-bg, #F4F7F4); color: var(--ic-brand, #2D6A53);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.ic-tab-suggest:hover { background: var(--ic-brand-soft, #E7EFE9); }