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

/* ---------- 1. 디자인 토큰 (KS 브랜드) ---------- */
:root {
  --ks-navy:      #36395b; /* 주색: 헤더, 봇 아이덴티티, 강조 */
  --ks-navy-deep: #314066; /* 그라데이션 짝, 호버 */
  --ks-navy-soft: #61749e; /* 보조 텍스트, 보더 강조 */
  --ks-blue:      #0092e5; /* 포인트 CTA/링크/사용자 버블/포커스 */
  --ks-blue-light:#7cccff; /* 하이라이트, 그라데이션 끝 */
  --ks-coral:     #f38c6c; /* 보조 포인트(예약 CTA, 응급 배지) */
  --ks-surface:   #e8ecf1; /* 봇 버블 배경, 패널 면 */
  --ks-surface-2: #f6f6f6; /* 입력영역/카드 배경 */
  --ks-white:     #ffffff;
  --ks-text:      #2c2c2c; /* 본문 */
  --ks-text-sub:  #737373; /* 캡션/타임스탬프 */

  --ks-grad-navy: linear-gradient(135deg, #36395b, #314066);
  --ks-grad-blue: linear-gradient(135deg, #0092e5, #7cccff);
  --ks-grad-coral: linear-gradient(135deg, #f38c6c, #ef7a55);
}

/* ---------- 2. 리셋 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. 키프레임 (모두 보존) ---------- */
@keyframes ksFabPulse {
  0%   { box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 0 0 rgba(26,26,26,.28); }
  70%  { box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 0 13px rgba(26,26,26,0); }
  100% { box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 0 0 rgba(26,26,26,0); }
}
@keyframes ksPanelIn  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ksDrawerIn { from { opacity: 0; transform: translateX(36px); }            to { opacity: 1; transform: translateX(0); } }
@keyframes ksBubbleIn { from { opacity: 0; transform: translateY(8px); }             to { opacity: 1; transform: translateY(0); } }
@keyframes ksTyping   { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ksFloat    { from { opacity: 0; transform: translateY(6px); }             to { opacity: 1; transform: translateY(0); } }
@keyframes ksMicPulse { 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 ksDot      { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

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

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

/* ---------- 5. FAB 환영 말풍선 ---------- */
.ks-fab-bubble {
  /* bottom/right는 폴백값 — app.js positionFabBubble()이 FAB 실측 위치로 재계산
     (호스트 사이트가 .ks-fab bottom을 오버라이드해도 말풍선이 가려지지 않게) */
  position: fixed; right: 24px; bottom: 110px; z-index: 40; max-width: 260px;
  background: #fff; border: 1px solid rgba(54,57,91,.08); border-radius: 16px;
  padding: 15px 16px; box-shadow: 0 12px 40px rgba(54,57,91,.18);
  animation: ksFloat .3s ease-out;
}
.ks-fab-bubble__close {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  border: none; background: transparent; color: #b6bccb; cursor: pointer;
  border-radius: 6px; font-size: 14px;
}
.ks-fab-bubble__title { font-size: 14px; font-weight: 700; color: var(--ks-navy); margin-bottom: 4px; }
.ks-fab-bubble__body  { font-size: 14px; color: #4a4a4a; line-height: 1.55; }
.ks-fab-bubble__tail {
  position: absolute; right: 30px; bottom: -7px; width: 14px; height: 14px;
  background: #fff; border-right: 1px solid rgba(54,57,91,.08);
  border-bottom: 1px solid rgba(54,57,91,.08); transform: rotate(45deg);
}

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

/* ---------- 7. 챗 패널 ---------- */
.ks-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(54,57,91,.24);
  display: flex; flex-direction: column; overflow: hidden;
  animation: ksPanelIn .25s ease-out;
}

/* header */
.ks-header {
  background: var(--ks-grad-navy);
  padding: 14px; display: flex; align-items: center; gap: 11px; flex: none;
}
.ks-header__avatar {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex: none;
}
.ks-header__dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: #4ade80; border: 2.5px solid var(--ks-navy);
}
.ks-header__meta { flex: 1; min-width: 0; }
.ks-header__title { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -.01em; }
.ks-header__sub   { font-size: 12px; color: #c8d0e4; margin-top: 2px; }
.ks-header__btn {
  width: 34px; height: 34px; border: none; background: rgba(255,255,255,.1);
  border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ks-header__btn.is-on { background: var(--ks-blue); }

/* messages */
.ks-messages {
  flex: 1; overflow-y: auto; padding: 18px 14px 8px;
  background: #fbfbfc; display: flex; flex-direction: column; gap: 14px;
}
.ks-msg-bot  { display: flex; gap: 9px; align-items: flex-start; animation: ksBubbleIn .18s ease-out; }
.ks-msg-user { display: flex; justify-content: flex-end; animation: ksBubbleIn .18s ease-out; }
.ks-avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ks-grad-navy);
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px;
}
.ks-bot-col  { max-width: 332px; min-width: 0; }
.ks-user-col { max-width: 326px; }

.ks-bubble-bot {
  background: var(--ks-surface); color: var(--ks-text); border-radius: 14px;
  padding: 12px 14px; font-size: 15px; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
}
.ks-bubble-user {
  background: var(--ks-blue); color: #fff; border-radius: 14px;
  padding: 12px 14px; font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.ks-time { font-size: 11px; color: #b0b0b0; font-variant-numeric: tabular-nums; }
.ks-time--user { display: block; margin-top: 5px; text-align: right; }

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

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

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

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

/* quick replies */
.ks-quick {
  flex: none; padding: 10px 14px 4px; background: #fbfbfc;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.ks-quick-chip {
  flex: none; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px;
  cursor: pointer; border: 1px solid rgba(54,57,91,.18); background: #fff; color: var(--ks-navy); white-space: nowrap;
}
.ks-quick-chip:hover { background: #eaf6ff; border-color: var(--ks-blue); color: var(--ks-blue); }

/* listening indicator */
.ks-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;
}
.ks-listening__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ks-coral); animation: ksDot 1s infinite; }
.ks-listening__label { font-size: 13.5px; font-weight: 700; color: #cf5a32; }
.ks-listening__src { font-size: 12px; color: #c98a72; margin-left: auto; }

/* input bar */
.ks-inputbar { flex: none; padding: 12px 14px 14px; background: #fff; border-top: 1px solid rgba(54,57,91,.08); }
.ks-inputbar__row {
  display: flex; gap: 9px; align-items: flex-end; background: var(--ks-surface-2);
  border: 1px solid rgba(54,57,91,.1); border-radius: 16px; padding: 7px 7px 7px 8px;
}
.ks-inputbar__row.is-listening { border-color: rgba(243,140,108,.55); }
.ks-mic-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; background: #eef0f5;
}
.ks-mic-btn.is-listening { background: var(--ks-coral); animation: ksMicPulse 1.2s infinite; }
.ks-textarea {
  flex: 1; border: none; background: transparent; resize: none; font-size: 15px; line-height: 1.5;
  font-family: inherit; outline: none; color: var(--ks-text); max-height: 96px; padding: 9px 2px;
}
.ks-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(--ks-grad-blue);
}
.ks-send-btn:disabled { background: #c4cad6; opacity: .7; cursor: default; }
.ks-mic-toast { font-size: 12px; color: #cf5a32; margin-top: 6px; text-align: center; }

/* ---------- 8. 예약 드로우어 ---------- */
.ks-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(20,22,46,.22);
  display: flex; flex-direction: column; overflow: hidden; animation: ksDrawerIn .26s ease-out;
}

/* drawer header */
.ks-drawer__head { flex: none; padding: 16px 16px 14px; border-bottom: 1px solid rgba(54,57,91,.09); }
.ks-drawer__head-row { display: flex; align-items: center; gap: 10px; }
.ks-drawer__icon {
  width: 30px; height: 30px; border-radius: 9px; background: #fef0eb;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ks-drawer__title { flex: 1; font-size: 16px; font-weight: 800; color: var(--ks-navy); }
.ks-drawer__close {
  width: 32px; height: 32px; border: none; background: #f3f5f8; border-radius: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* step indicator */
.ks-steps { display: flex; align-items: center; gap: 0; margin-top: 14px; }
.ks-step { display: flex; align-items: center; }
.ks-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;
}
.ks-step__line { flex: 1; height: 2px; margin: 0 4px; }

/* drawer notice */
.ks-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;
}
.ks-drawer__notice span { font-size: 12px; color: #b05a38; line-height: 1.5; font-weight: 600; }

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

/* dropdown field */
.ks-dd-field {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px;
  cursor: pointer; border: 1px solid rgba(54,57,91,.2); background: #fff; text-align: left;
}
.ks-dd-field.is-open { border-color: var(--ks-blue); }
.ks-dd-field__value { flex: 1; font-size: 15px; font-weight: 600; color: #9aa1ad; }
.ks-dd-field__value.has-value { color: var(--ks-text); }
.ks-dd-chevron { display: flex; transition: transform .2s; }
.ks-dd-chevron.is-open { transform: rotate(180deg); }
.ks-dd-badge {
  font-size: 11px; font-weight: 800; color: #0d7a4f; background: #e7f7ee;
  padding: 3px 9px; border-radius: 6px; flex: none;
}

/* dropdown list */
.ks-dd-list {
  margin-top: 8px; border: 1px solid rgba(54,57,91,.14); border-radius: 12px; overflow: hidden;
}
.ks-dd-list--scroll { max-height: 280px; overflow-y: auto; }
.ks-dd-group { font-size: 11.5px; font-weight: 800; color: #8a93ab; padding: 10px 14px 6px; background: #fafbfc; }
.ks-dd-opt {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border: none; border-top: 1px solid #f4f6f8; background: #fff; cursor: pointer; text-align: left;
}
.ks-dd-opt:hover { background: #f5f9ff; }
.ks-dd-opt.is-selected { background: #eaf6ff; }
.ks-dd-opt__name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ks-text); }

/* doctor option */
.ks-doc-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: none; border-top: 1px solid #f4f6f8; background: #fff; text-align: left; cursor: pointer;
}
.ks-doc-opt.is-selected { background: #eaf6ff; }
.ks-doc-opt:disabled { cursor: not-allowed; opacity: .55; }
.ks-doc-opt__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ks-text); }
.ks-doc-opt__name span { font-weight: 500; color: #8a93ab; }
.ks-doc-opt__badge { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 6px; flex: none; }
.ks-doc-opt__badge--on  { color: #0d7a4f; background: #e7f7ee; }
.ks-doc-opt__badge--off { color: #9aa1ad; background: #eef0f3; }

.ks-doc-label { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--ks-text); margin-bottom: 7px; }
.ks-doc-label span { font-weight: 600; color: #8a93ab; }

/* step 2 — dates & ampm */
.ks-summary-line { font-size: 13px; color: var(--ks-navy-soft); margin-bottom: 16px; }
.ks-summary-line b { color: var(--ks-navy); }
.ks-date-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.ks-date-chip {
  font-size: 13.5px; font-weight: 600; padding: 11px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(54,57,91,.18); background: #fff; color: var(--ks-navy-soft);
}
.ks-date-chip.is-selected { border-color: var(--ks-blue); background: #eaf6ff; color: var(--ks-blue); }
.ks-ampm-row { display: flex; gap: 8px; }
.ks-ampm-btn {
  flex: 1; font-size: 14.5px; font-weight: 700; padding: 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(54,57,91,.2); background: #fff; color: var(--ks-navy-soft);
}
.ks-ampm-btn.is-selected { border-color: var(--ks-blue); background: #eaf6ff; color: var(--ks-blue); }

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

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

/* summary cards (step 4 / step 5) */
.ks-summary {
  margin-top: 18px; background: #f9fafb; border: 1px solid rgba(54,57,91,.1); border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; color: var(--ks-text); line-height: 1.95;
}
.ks-summary__head { font-size: 12px; font-weight: 800; color: #8a93ab; margin-bottom: 6px; }
.ks-summary__row { display: flex; justify-content: space-between; }
.ks-summary__row span { color: #8a93ab; }
.ks-summary__row b.tabular { font-variant-numeric: tabular-nums; }

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

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

/* ---------- 9. FAB ---------- */
.ks-fab {
  /* 뉴트럴 블랙 — 어떤 호스트 사이트 톤에도 어울리는 무채색 (임베드 전제) */
  position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 64px; height: 64px;
  border-radius: 999px; border: none; cursor: pointer; background: #1a1a1a;
  box-shadow: 0 8px 28px rgba(0,0,0,.30); display: flex; align-items: center; justify-content: center;
  animation: ksFabPulse 2.6s infinite;
}
.ks-fab:hover { background: #000; }
/* 닫힘 상태: 헤드셋 + "24시간 상담" 알약형 */
.ks-fab--pill { width: auto; height: 68px; padding: 0 26px 0 20px; gap: 11px; }
.ks-fab__label {
  color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.2px; white-space: nowrap;
  font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
}

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

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

/* ---------- 10. 반응형 (모바일 풀스크린 시트) ---------- */
@media (max-width: 480px) {
  .ks-stage { padding: 0; gap: 0; flex-direction: column; }
  .ks-panel, .ks-drawer {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0;
  }
}

/* ===== 예약 달력 (Step 2) ===== */
.ks-calendar{border:1px solid rgba(54,57,91,.14);border-radius:14px;padding:10px 10px 12px;background:#fff;}
.ks-cal-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;}
.ks-cal-title{font-size:14.5px;font-weight:800;color:var(--ks-navy,#36395b);}
.ks-cal-nav{width:30px;height:30px;border:1px solid rgba(54,57,91,.14);background:#fff;border-radius:8px;cursor:pointer;font-size:16px;color:var(--ks-navy-soft,#61749e);line-height:1;}
.ks-cal-nav:hover{background:#eaf6ff;border-color:var(--ks-blue,#0092e5);color:var(--ks-blue,#0092e5);}
.ks-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.ks-cal-dow span{text-align:center;font-size:11.5px;font-weight:700;color:#9aa1ad;padding:4px 0;}
.ks-cal-dow .sun,.ks-cal-cell.sun{color:#d4475f;}
.ks-cal-dow .sat,.ks-cal-cell.sat{color:#0066b3;}
.ks-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.ks-cal-cell{aspect-ratio:1/1;border:none;background:transparent;border-radius:9px;font-size:13.5px;color:var(--ks-text,#2c2c2c);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.ks-cal-cell.is-empty{cursor:default;}
.ks-cal-cell:not(.is-disabled):not(.is-empty):hover{background:#eaf6ff;}
.ks-cal-cell.is-disabled{color:#c9cdd6;cursor:not-allowed;}
.ks-cal-cell.is-selected{background:linear-gradient(135deg,#0092e5,#7cccff);color:#fff;font-weight:800;}
.ks-cal-cell.is-selected.sun,.ks-cal-cell.is-selected.sat{color:#fff;}
.ks-cal-picked{margin-top:9px;font-size:13px;font-weight:700;color:var(--ks-navy,#36395b);}

/* ===== 예약 패널 의료진 프로필 카드 ===== */
.ks-doc-profile{display:flex;gap:12px;margin-top:14px;padding:13px;border:1px solid rgba(54,57,91,.12);border-radius:14px;background:var(--ks-surface-2,#f6f6f6);}
.ks-doc-profile__photo{width:66px;height:66px;border-radius:12px;object-fit:cover;flex:none;background:#e8ecf1;}
.ks-doc-profile__body{min-width:0;}
.ks-doc-profile__name{font-size:15px;font-weight:800;color:var(--ks-navy,#36395b);}
.ks-doc-profile__name span{font-size:13px;font-weight:600;color:var(--ks-navy-soft,#61749e);}
.ks-doc-profile__dept{font-size:12.5px;color:var(--ks-text-sub,#737373);margin-top:1px;}
.ks-doc-profile__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.ks-doc-profile__tags span{font-size:11.5px;font-weight:600;color:var(--ks-blue,#0092e5);background:#eaf6ff;border-radius:999px;padding:3px 9px;}
.ks-doc-profile__text{font-size:12.5px;line-height:1.6;color:var(--ks-text,#2c2c2c);margin-top:8px;}

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