/* =====================================================================
   ChatBuilder · inline widgets that live inside an existing chat UI.
   Designed to MIRROR the host (newHeipresto) design system rather than
   override it:
     - Light glass palette
     - Purple→cyan gradient accents (#9f8edb → #60c6d3)
     - Dark blue text (#2a2f55)
     - Pretendard font
     - 16px radius for cards/msgs, 999px for buttons
   All class names prefixed `cb-` to avoid collisions.
   ===================================================================== */

.cb-msg {
  /* Chat 안에 push 되는 AI 메시지 버블의 컨테이너. 배경/보더는 호스트(newHeipresto
     의 .msg-ai, demo 의 자체 .msg-ai 등) 가 처리. chat-builder.css 는 자체 prefix
     (cb-) 외의 클래스를 selector 에서 참조하지 않음 — 모듈 독립성. 호스트가 없으면
     배경은 부모/페이지가 책임. */
  font-family: 'Pretendard', sans-serif;
  color: #2a2f55;
  font-size: 15px;
  line-height: 1.55;
  width: 100%;
  max-width: 100%;
  align-self: flex-start;
}

/* Header line inside a chat bubble — 5-step 단계 라벨. 비개발자도 한눈에 보이도록 키움. */
.cb-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(45deg, rgba(159,142,219,.18), rgba(96,198,211,.18));
  color: #2a2f55;
  margin: 6px 0 18px;
  font-weight: 700;
}
.cb-eyebrow .cb-step {
  font-weight: 800;
  font-size: 13px;
  color: #5a4ba8;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(159,142,219,.22);
}

/* Question line */
.cb-q {
  font-size: 15px; line-height: 1.55; margin: 0 0 14px;
  color: #2a2f55;
}
.cb-q b {
  font-weight: 700;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Detected-intent tag row */
.cb-detected {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px;
}
.cb-tag {
  font-size: 11px; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(159,142,219,.25);
  color: #2a2f55;
}
.cb-tag b { color: #5a4ba8; font-weight: 600; margin-right: 4px; }

/* ===== Option grid (theme/header/hero/sections/footer) =====
   "더 보기" 누적 방식 — pickCount 가 늘어나면 그리드 *내부* 에 카드가 추가됨.
   grid 의 height 는 chat-builder.js 가 step 별 cb-opt 실제 크기를 측정해
   "한 번에 카드 3개만 보이도록" 동적 설정. wide(header) 는 1열이라 3 카드 = 3행,
   3열(hero/section/footer) 은 3 카드 = 1행. */
.cb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  overflow-y: auto;
  /* 카드가 추가돼도 행이 fr 로 균등 분배되지 않게 — 카드 자연 높이 유지 */
  grid-auto-rows: max-content;
  align-content: start;
  /* 우측 스크롤바 공간 확보 — 카드와 스크롤바 사이 약간의 여백 */
  padding-right: 4px;
  scroll-behavior: smooth;
  /* 카드가 추가될 때 외곽이 잘려 보이지 않도록 padding-top 약간 */
  padding-top: 2px;
}
/* 얇은 스크롤바 (webkit) */
.cb-grid::-webkit-scrollbar { width: 6px; }
.cb-grid::-webkit-scrollbar-thumb {
  background: rgba(60, 70, 130, .25);
  border-radius: 3px;
}
.cb-grid::-webkit-scrollbar-thumb:hover { background: rgba(60, 70, 130, .4); }
.cb-grid::-webkit-scrollbar-track { background: transparent; }
.cb-grid.cb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cb-grid.cb-cols-1 { grid-template-columns: 1fr; }
.cb-grid.cb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cb-grid.cb-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Wide 모드 — Header step 전용. 1열 풀폭 + 가로로 두꺼운 비율로 헤더 크게 보이게.
   height 는 chat-builder.js 가 cb-opt 3개 + gap 2개 로 동적 계산. */
.cb-grid.cb-grid-wide { grid-template-columns: 1fr; gap: 12px; }
.cb-grid.cb-grid-wide .cb-opt { /* 가로 레이아웃: 좌 미리보기 + 우 정보 */
  flex-direction: row;
}
/* cb-prev 의 가로:세로 비율 — 8:1 (얇음). header 미리보기가 가로로 길게 보임 */
.cb-grid.cb-grid-wide .cb-prev { flex: 1; aspect-ratio: 8/1; }
.cb-grid.cb-grid-wide .cb-info {
  width: 160px; flex-shrink: 0;
  border-top: 0; border-left: 1px solid rgba(60,70,130,.08);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 700px) {
  .cb-grid.cb-grid-wide .cb-opt { flex-direction: column; }
  .cb-grid.cb-grid-wide .cb-info { width: auto; border-left: 0; border-top: 1px solid rgba(60,70,130,.08); }
}

.cb-opt {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(60,70,130,.12);
  border-radius: 14px;
  padding: 0;                /* iframe 이 박스 위쪽을 꽉 채우게 — 여백 제거 */
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 14px rgba(60,70,130,.08);
  transition: border-color .25s, transform .18s ease-out, box-shadow .18s ease-out;
}
.cb-opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(60,70,130,.18);
  border-color: rgba(159,142,219,.45);
}
.cb-opt.cb-on {
  border-color: #9f8edb;
  box-shadow: 0 0 0 1.5px #9f8edb, 0 10px 26px rgba(159,142,219,.25);
}
.cb-opt.cb-on .cb-info { background: linear-gradient(135deg, rgba(159,142,219,.12), rgba(96,198,211,.12)); }

.cb-prev {
  position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden;
  background: #f5f6fa;
  /* iframe 은 JS(mountPreview) 가 position: absolute + width/height/transform 으로 채움 */
}
.cb-prev.cb-prev-wide { aspect-ratio: 8/1; }

.cb-info {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(60,70,130,.08);
  transition: background .25s;
}
.cb-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cb-name { font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: #2a2f55; }
.cb-tag-sm { font-size: 10px; letter-spacing: .14em; color: rgba(42,47,85,.5); }
/* BG step 전용 — 팔레트의 대표 컬러를 동그라미로 미리 보여줌 (숫자 왼쪽).
   cb-prev 가 BG step 에서 숨겨지므로 동그라미가 유일한 시각 단서 → 크게 표시. */
.cb-color-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
  margin-right: 10px;
  border: 1px solid rgba(60,70,130,.25);
  box-shadow: 0 2px 6px rgba(60,70,130,.15);
}
.cb-desc { font-size: 11px; color: rgba(42,47,85,.65); margin: 2px 0 0; line-height: 1.4; }

.cb-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  color: #fff;
  display: none; align-items: center; justify-content: center;
  font: 700 11px/1 'Pretendard', sans-serif;
  box-shadow: 0 2px 8px rgba(159,142,219,.4);
}
.cb-opt.cb-on .cb-badge[data-show] { display: flex; }

/* ===== Refresh row — 그리드 바로 아래, 가로 중앙정렬 ===== */
.cb-refresh-wrap {
  display: flex; justify-content: center;
  margin: 14px 0 2px;
}
.cb-refresh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  font: 600 12px/1 'Pretendard', sans-serif; letter-spacing: .02em;
  color: #2a2f55;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(60,70,130,.18);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s;
}
.cb-refresh-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(159,142,219,.55);
  background: linear-gradient(135deg, rgba(159,142,219,.10), rgba(96,198,211,.10));
  color: #5a4ba8;
  box-shadow: 0 6px 16px rgba(60,70,130,.12);
}
.cb-refresh-btn:active { transform: translateY(0); }
.cb-refresh-btn svg { display: block; }
.cb-refresh-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: rgba(255,255,255,.4);
  color: rgba(42,47,85,.45);
  border-color: rgba(60,70,130,.12);
  transform: none;
  box-shadow: none;
}
.cb-refresh-btn:disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,.4);
  color: rgba(42,47,85,.45);
  border-color: rgba(60,70,130,.12);
}

/* ===== Actions row (Next / info) ===== */
.cb-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(60,70,130,.10);
}
.cb-info-line { font-size: 12px; color: rgba(42,47,85,.65); }
.cb-info-line b { color: #2a2f55; font-weight: 600; }
.cb-info-line b.warn { color: #c0843c; }
.cb-btns { display: flex; gap: 6px; }

.cb-btn {
  padding: 9px 18px; font: 600 12px/1 'Pretendard', sans-serif; letter-spacing: .02em;
  border: 0; cursor: pointer; border-radius: 999px;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  color: #fff;
  transition: transform .15s ease-out, box-shadow .15s ease-out, filter .15s;
  box-shadow: 0 4px 14px rgba(96,130,211,.25);
}
.cb-btn:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(96,130,211,.4); }
.cb-btn:disabled {
  opacity: .35; cursor: not-allowed; transform: none; box-shadow: none;
}
.cb-btn.cb-ghost {
  background: transparent;
  color: #2a2f55;
  border: 1px solid rgba(60,70,130,.18);
  box-shadow: none;
}
.cb-btn.cb-ghost:hover {
  border-color: rgba(159,142,219,.5);
  transform: none;
  background: rgba(159,142,219,.06);
}

/* ===== Recommended templates grid (3 cards) — 자체 카드 스타일 (cb-rec-card) ===== */
.cb-rec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 4px;
}
@media (max-width: 700px) { .cb-rec-grid { grid-template-columns: 1fr; } }

.cb-rec-card {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(60,70,130,.12);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 14px rgba(60,70,130,.1);
  transition: border-color .25s, transform .18s ease-out, box-shadow .18s ease-out;
}
.cb-rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(60,70,130,.18);
  border-color: rgba(159,142,219,.45);
}
.cb-rec-card.cb-rec-on {
  border-color: #9f8edb;
  box-shadow: 0 0 0 1.5px #9f8edb, 0 12px 28px rgba(159,142,219,.28);
}
.cb-rec-card.cb-rec-off { opacity: .4; filter: saturate(.5); }

.cb-rec-thumb {
  width: 100%; aspect-ratio: 16/10; overflow: hidden;
  background: #eef0f7; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.cb-rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-rec-thumb-fb {
  background: linear-gradient(135deg, rgba(159,142,219,.25), rgba(96,198,211,.25));
}
.cb-rec-thumb-fb[data-tone="dark"]    { background: linear-gradient(135deg, #2a2f55, #4a4670); }
.cb-rec-thumb-fb[data-tone="light"]   { background: linear-gradient(135deg, #f6f4ee, #ffffff); }
.cb-rec-thumb-fb[data-tone="yellow"]  { background: linear-gradient(135deg, #ffe694, #f5c518); }
.cb-rec-thumb-fb[data-tone="soft"]    { background: linear-gradient(135deg, #ffd29a, #ffb8c8); }
.cb-rec-thumb-fb[data-tone="warm"]    { background: linear-gradient(135deg, #e8b87a, #c0843c); }
.cb-rec-thumb-fb[data-tone="neon"]    { background: linear-gradient(135deg, #2a2f55, #60c6d3); }
.cb-rec-thumb-fb[data-tone="minimal"] { background: linear-gradient(135deg, #ecedf2, #d8d9e0); }
.cb-rec-thumb-fb[data-tone="bold"]    { background: linear-gradient(135deg, #2a2f55, #ffe694); }
.cb-rec-thumb-fb[data-tone="tech"]    { background: linear-gradient(135deg, #2a2f55, #6aa6ff); }
.cb-rec-thumb-fb[data-tone="pastel"]  { background: linear-gradient(135deg, #fff3d8, #ffd29a); }
.cb-rec-thumb-fb[data-tone="playful"] { background: linear-gradient(135deg, #b6d7ff, #ffe694); }
.cb-rec-thumb-fb::after {
  content: attr(data-tone); color: rgba(255,255,255,.85);
  font-family: 'Pretendard', sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  position: absolute; inset: auto 0 12px 0; text-align: center; font-weight: 600;
}

.cb-rec-body { padding: 12px 16px 8px; }
.cb-rec-rank {
  font-size: 10px; letter-spacing: .2em;
  color: #5a4ba8;
  font-family: 'Pretendard', sans-serif; margin-bottom: 4px; font-weight: 700;
}
.cb-rec-name { font-size: 15px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.005em; color: #2a2f55; }
.cb-rec-cat  { font-size: 11px; color: rgba(42,47,85,.6); margin: 0 0 6px; }
.cb-rec-tags { font-size: 10px; color: rgba(42,47,85,.5); margin: 0; letter-spacing: .03em; }

.cb-rec-choose {
  margin: 4px 12px 14px;
  padding: 9px 14px;
  font: 600 12px/1 'Pretendard', sans-serif; letter-spacing: .02em;
  border: 0; cursor: pointer; border-radius: 999px;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  color: #fff;
  box-shadow: 0 4px 14px rgba(96,130,211,.25);
  transition: transform .15s, box-shadow .15s;
}
.cb-rec-choose:hover { transform: scale(1.03); box-shadow: 0 6px 18px rgba(96,130,211,.38); }

/* ===== Result card (clickable, navigates to _builder) ===== */
.cb-result-card {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  margin-top: 10px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(159,142,219,.4);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none; color: #2a2f55;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(60,70,130,.1);
  transition: border-color .25s, transform .18s ease-out, box-shadow .18s ease-out;
}
.cb-result-card:hover {
  transform: translateY(-3px);
  border-color: #9f8edb;
  box-shadow: 0 0 0 1.5px #9f8edb, 0 16px 36px rgba(159,142,219,.25);
}
.cb-result-card .cb-result-prev {
  position: relative;       /* mountPreview 의 position:absolute iframe 컨테이너 */
  aspect-ratio: 16/10;
  background: #f5f6fa;
  overflow: hidden;
  border-right: 1px solid rgba(60,70,130,.10);
}

.cb-result-meta {
  padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.cb-result-title {
  font-size: 17px; font-weight: 600; margin: 0;
  letter-spacing: -.005em; color: #2a2f55;
}
.cb-result-cta {
  display: inline-block; align-self: flex-start;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 8px 14px;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(96,130,211,.3);
}

.cb-recipe {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 8px;
  font-size: 10px; letter-spacing: .04em;
}
.cb-recipe .chip {
  background: rgba(159,142,219,.10);
  border: 1px solid rgba(159,142,219,.18);
  padding: 4px 10px; border-radius: 6px;
  color: rgba(42,47,85,.7);
}
.cb-recipe .chip b {
  color: #5a4ba8;
  font-weight: 600;
  margin-left: 4px;
}

@media (max-width: 700px) {
  .cb-result-card { grid-template-columns: 1fr; }
  .cb-result-card .cb-result-prev { border-right: 0; border-bottom: 1px solid rgba(60,70,130,.10); }
}

/* Responsive */
@media (max-width: 600px) {
  .cb-grid, .cb-grid.cb-cols-2 { grid-template-columns: 1fr; }
  .cb-actions { flex-direction: column; gap: 8px; align-items: stretch; }
  .cb-btns { justify-content: flex-end; }
}

/* ===== Fullscreen preview modal (네 번째 스크린샷 형식) ===== */
.cb-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 25, 60, .55);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  animation: cbFsIn .25s ease-out;
}
@keyframes cbFsIn { from { opacity: 0; } to { opacity: 1; } }

.cb-fs-frame {
  width: 100%; height: 100%;
  max-width: 1400px;
  border: 0; border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(20, 25, 60, .5);
}

.cb-fs-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.6);
  color: #2a2f55; font: 600 22px/1 'Pretendard', sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 25, 60, .25);
  transition: transform .15s, background .15s;
}
.cb-fs-close:hover { transform: scale(1.08); background: #fff; }

.cb-fs-try {
  position: absolute; bottom: 36px; right: 36px;
  padding: 14px 26px;
  font: 600 13px/1 'Pretendard', sans-serif; letter-spacing: .02em;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  color: #fff; border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(96, 130, 211, .5);
  transition: transform .15s, box-shadow .15s;
}
.cb-fs-try:hover { transform: scale(1.05); box-shadow: 0 12px 34px rgba(96, 130, 211, .65); }

@media (max-width: 700px) {
  .cb-fullscreen { padding: 60px 16px 16px; }
  .cb-fs-close { top: 16px; right: 16px; }
  .cb-fs-try { right: 16px; bottom: 16px; padding: 12px 18px; font-size: 12px; }
}

/* ── Custom background color + opacity panel (BG step) — 컴팩트 버전 ── */
.cb-custom-bg {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(60, 70, 130, .12);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(245,245,255,.4));
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, box-shadow .2s;
}
.cb-custom-bg.cb-custom-bg-active {
  border-color: #9f8edb;
  box-shadow: 0 0 0 1.5px #9f8edb, 0 6px 16px rgba(159,142,219,.18);
  background: linear-gradient(135deg, rgba(159,142,219,.10), rgba(96,198,211,.10));
}
.cb-custom-bg-head {
  display: flex; align-items: center; justify-content: space-between;
}
/* custom-bg 안의 eyebrow 는 컴팩트 — 다른 step 영향 없도록 .cb-custom-bg 안에서만 override */
.cb-custom-bg .cb-eyebrow {
  margin: 0;
  padding: 5px 12px;
  font-size: 12px;
}
.cb-custom-bg-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 80px;
  gap: 12px;
  align-items: center;
}
@media (max-width: 700px) {
  .cb-custom-bg-row { grid-template-columns: 1fr; gap: 12px; }
}
.cb-custom-bg-color, .cb-custom-bg-alpha {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Pretendard', sans-serif; font-size: 12px;
}
.cb-custom-bg-lbl {
  color: rgba(42, 47, 85, .65); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; font-size: 10px;
  min-width: 44px;
}
.cb-custom-bg-hex, .cb-custom-bg-pct {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 12px; color: #2a2f55; min-width: 56px;
}
.cb-color-input {
  width: 40px; height: 28px; padding: 0;
  border: 1px solid rgba(60,70,130,.18); border-radius: 8px;
  background: transparent; cursor: pointer;
}
.cb-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.cb-color-input::-webkit-color-swatch { border: 0; border-radius: 6px; }
.cb-alpha-input {
  flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, transparent, #9f8edb);
  border-radius: 999px; outline: none; cursor: pointer;
}
.cb-alpha-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #9f8edb;
  box-shadow: 0 2px 6px rgba(60,70,130,.18);
  cursor: pointer;
}
.cb-alpha-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #9f8edb; cursor: pointer;
}
.cb-custom-bg-swatch {
  width: 80px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(60,70,130,.18);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
}
.cb-custom-bg-next {
  align-self: flex-end;
  padding: 6px 14px; font-size: 11px;
  background: linear-gradient(45deg, #9f8edb, #60c6d3);
  color: #fff; border: 0; border-radius: 999px;
  font-family: 'Pretendard', sans-serif; font-weight: 600;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cb-custom-bg-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(159,142,219,.35);
}

/* ── Kakao Sans font stack — applied to ALL chat-builder text surfaces ── */
/* 본문은 'Kakao Small Sans', 강조/이름/버튼은 'Kakao Big Sans'. 둘 다 fonts-archive
   미러로 chat-builder.js 가 동적으로 link 주입 (Font loader 블록). */
.cb-msg, .cb-msg *,
.cb-q,
.cb-tag, .cb-tag b,
.cb-rec-cat, .cb-rec-tags,
.cb-desc, .cb-tag-sm,
.cb-info-line, .cb-info-line b,
.cb-custom-bg, .cb-custom-bg *,
.cb-result-card, .cb-result-card * {
  font-family:
    "Kakao Small Sans", "KakaoSmallSans",
    "Kakao Big Sans", "KakaoBigSans",
    "Apple SD Gothic Neo", "Noto Sans KR", "Pretendard",
    sans-serif !important;
}
/* 헤딩 / 강조 / 옵션 카드 이름 / 버튼 — Kakao Big Sans 우선 */
.cb-eyebrow, .cb-step,
.cb-rec-name, .cb-rec-rank,
.cb-name,
.cb-btn, .cb-rec-choose, .cb-custom-bg-next,
.chip, .cb-recipe .chip {
  font-family:
    "Kakao Big Sans", "KakaoBigSans",
    "Kakao Small Sans", "KakaoSmallSans",
    "Apple SD Gothic Neo", "Noto Sans KR", "Pretendard",
    sans-serif !important;
}
/* 모노/숫자 표시는 모노 유지 (HEX 코드, % 등) */
.cb-custom-bg-hex, .cb-custom-bg-pct {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace !important;
}

/* ── Path choice — 자체 제작 vs 외주 협업 (LLM 첫 응답 직후) ── */
.cb-path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 560px) {
  .cb-path-grid { grid-template-columns: 1fr; }
}
.cb-path-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(60,70,130,.14);
  background: rgba(255,255,255,.6);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.cb-path-card:hover {
  transform: translateY(-2px);
  border-color: rgba(159,142,219,.5);
  background: linear-gradient(135deg, rgba(159,142,219,.08), rgba(96,198,211,.08));
  box-shadow: 0 8px 22px rgba(60,70,130,.10);
}
.cb-path-card:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.cb-path-icon { font-size: 22px; margin-bottom: 4px; }
.cb-path-title {
  font-size: 15px; font-weight: 700;
  color: #2a2f55;
  letter-spacing: -.01em;
}
.cb-path-desc {
  font-size: 12.5px;
  color: rgba(42,47,85,.7);
  line-height: 1.5;
}
.cb-path-pill {
  display: inline-block;
  margin-top: 8px; align-self: flex-start;
  padding: 3px 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  border-radius: 999px;
  background: linear-gradient(45deg, rgba(159,142,219,.18), rgba(96,198,211,.18));
  color: #5a4ba8;
}

/* ── Typing indicator — LLM 응답 대기 중 "생각하는 중" 시각화 ── */
.cb-msg-typing {
  padding: 14px 18px;
  width: auto;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 40px;
}
.cb-typing { display: inline-flex; align-items: center; gap: 5px; height: 14px; }
.cb-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #9f8edb, #60c6d3);
  opacity: .35;
  animation: cb-typing-bounce 1.1s infinite ease-in-out;
}
.cb-typing span:nth-child(2) { animation-delay: .15s; }
.cb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cb-typing-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: .35; }
  35%          { transform: translateY(-5px); opacity: 1; }
}