* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  background:linear-gradient(135deg,#0f2540 0%,#1a3a5c 60%,#14304d 100%);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.stage { display:flex; gap:48px; align-items:center; padding:32px; }

/* ── 왼쪽 안내 ── */
.side { width:340px; color:#dbe8f4; }
.side h1 { font-size:34px; font-weight:900; color:#fff; margin-bottom:6px; }
.side .tag { color:#FFD84D; font-weight:700; margin-bottom:20px; }
.side ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.side li { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.55; }
.side code { background:rgba(254,229,0,.15); color:#FFD84D; padding:1px 6px; border-radius:6px; }
.side .fine { margin-top:18px; font-size:12.5px; color:#7f9ab5; }

/* ── 폰 프레임 ── */
.phone { width:420px; height:min(860px, 92vh); background:#111; border-radius:40px;
  padding:14px; box-shadow:0 30px 70px rgba(0,0,0,.55); }
.screen { background:#B2C7DA; border-radius:28px; height:100%;
  display:flex; flex-direction:column; overflow:hidden; }
.kkt-bar { background:#A9BFD3; padding:12px 16px; display:flex; gap:10px; align-items:center; flex:none; }
.kkt-bar .avatar { width:36px; height:36px; border-radius:12px; background:#0f2540; color:#FFD84D;
  font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; }
.kkt-bar .name { font-weight:800; font-size:16px; color:#1c2b3a; }
.kkt-bar .name small { display:block; font-size:11px; font-weight:600; color:#4f6478; }

.chat { flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:10px; }
.row { display:flex; gap:8px; }
.row.bot { justify-content:flex-start; }
.row.user { justify-content:flex-end; }
.bot-avatar { width:32px; height:32px; flex:none; border-radius:11px; background:#0f2540;
  color:#FFD84D; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.bubble { max-width:78%; font-size:14px; line-height:1.55; padding:9px 12px;
  border-radius:14px; white-space:pre-wrap; word-break:break-word; }
.row.bot .bubble { background:#fff; border-top-left-radius:4px; }
.row.bot .bubble.status { background:#eef2f6; color:#5c6f80; font-style:italic;
  font-size:13px; }
.row.user .bubble { background:#FEE500; border-top-right-radius:4px; font-weight:600; }

/* 카드류 */
.kcard { max-width:82%; background:#fff; border-radius:14px; border-top-left-radius:4px; overflow:hidden; }
.kcard img { width:100%; display:block; background:#f4f6f8; }
.kcard .body { padding:10px 12px; }
.kcard .title { font-size:14px; font-weight:800; margin-bottom:4px; }
.kcard .desc { font-size:13px; line-height:1.5; color:#33475c; white-space:pre-wrap; }
.kcard .btns { display:flex; border-top:1px solid #eef1f4; }
.kcard .btns button { flex:1; border:0; background:none; padding:9px 0; font-size:13px;
  font-weight:800; color:#2e6da4; cursor:pointer; font-family:inherit; }
.kcard .btns button + button { border-left:1px solid #eef1f4; }

/* 리스트카드 */
.klist .item { display:flex; flex-direction:column; padding:9px 12px; border-bottom:1px solid #f0f3f6; }
.klist .item .t { font-size:13.5px; font-weight:800; }
.klist .item .d { font-size:12px; color:#5c6f80; margin-top:2px; }
.klist .header { padding:10px 12px; font-size:14px; font-weight:900; background:#f7f9fb;
  border-bottom:1px solid #eef1f4; }

/* 캐러셀 */
.carousel { display:flex; gap:8px; overflow-x:auto; max-width:88%; padding-bottom:4px; }
.carousel .kcard { flex:none; width:230px; max-width:none; border-top-left-radius:14px; }

/* 콜백 대기(타이핑) */
.typing { display:inline-flex; gap:4px; padding:12px 14px; background:#fff;
  border-radius:14px; border-top-left-radius:4px; }
.typing i { width:7px; height:7px; border-radius:50%; background:#9db0c0;
  animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

/* 바로가기 버튼 (quickReplies) */
.quickbar { flex:none; display:flex; gap:6px; overflow-x:auto; padding:8px 10px;
  background:rgba(255,255,255,.35); }
.quickbar:empty { display:none; }
.qchip { flex:none; background:#fff; border:1.5px solid #8fa6ba; color:#33475c;
  font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:999px;
  cursor:pointer; font-family:inherit; }
.qchip:hover { background:#FEE500; border-color:#e3cb00; color:#191919; }

.inputbar { flex:none; display:flex; background:#fff; padding:10px; gap:8px; }
.inputbar input { flex:1; border:0; outline:none; font-size:14px; font-family:inherit; }
.inputbar button { border:0; background:#FEE500; font-weight:800; font-size:13px;
  padding:8px 16px; border-radius:10px; cursor:pointer; font-family:inherit; }

@media (max-width:900px){ .side{ display:none } .stage{ padding:0 } }

/* ── 미니 탭바 (엔진룸 전환) — position:fixed 오버레이라 기존 레이아웃에
      1px도 영향 없음. 신규 클래스만 추가, 기존 규칙 무변경. ── */
.mini-tabs { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; gap:3px; background:rgba(10,18,30,.78); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:3px; backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.35); }
.mini-tabs .mt { color:#c6d6e4; font-size:12.5px; font-weight:700; text-decoration:none;
  padding:5px 13px; border-radius:999px; line-height:1.2; white-space:nowrap; }
.mini-tabs .mt:hover { color:#fff; }
.mini-tabs .mt.on { background:#FEE500; color:#191919; }

/* 시연 시나리오 카드 — 원래 li 카드와 같은 톤, 하나만 추가 (2026-08-11) */
.demo-course { margin-top:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.demo-course .dc-head { color:#FFD84D; font-weight:800; font-size:14px; margin-bottom:2px; }
.demo-course .dc-head small { color:#7f9ab5; font-weight:600; font-size:12px; margin-left:6px; }
.dc-step { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:10px;
  font-size:14px; font-weight:600; color:#dbe8f4; line-height:1.5; text-align:left;
  background:transparent; border:1px solid transparent; font-family:inherit; }
.dc-step i { flex:none; font-style:normal; color:#7f9ab5; font-weight:800; font-size:12px;
  min-width:34px; text-align:right; letter-spacing:.02em; }
button.dc-step { cursor:pointer; background:rgba(254,229,0,.10); border-color:rgba(255,216,77,.5); }
button.dc-step i { color:#FFD84D; }
button.dc-step:hover { background:rgba(254,229,0,.18); border-color:#FFD84D; color:#fff; }