/* AI 캠페인 도우미 응답 모달 — 색·간격·radius 는 tokens.css 토큰만 쓴다.
   거래명세서 상태 뱃지 색(--point-blue-5 / --point-yellow-*)은 color_root.css 토큰인데 홈 화면은 그 파일을 로드하지 않아 같은 값을 fallback 으로 둔다. */

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 모달 골격 ---------- */

.c-ai-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
  font-family: Pretendard, 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  word-break: keep-all;
}

.c-ai-modal.is-open {
  display: flex;
}

.c-ai-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: ai-fade-in 0.22s ease;
}

.c-ai-modal__box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(600px, 92vw);
  max-height: 80vh;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-floating);
  animation: ai-modal-in 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.c-ai-modal.is-wide .c-ai-modal__box {
  width: min(760px, 94vw);
}

.c-ai-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-mono-7);
}

.c-ai-modal__avatar,
.c-ai-loading__brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-img);
  background: var(--point-blue-1);
  color: var(--color-white);
  font-weight: 800;
}

.c-ai-modal__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--color-mono-1);
  font-size: 18px;
  font-weight: 800;
}

.c-ai-modal__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--space-3) * -1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-mono-4);
  cursor: pointer;
}

.c-ai-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6);
}

.c-ai-modal__fixed {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-mono-7);
}

.c-ai-modal__fixed[hidden],
.c-ai-modal__followup[hidden] {
  display: none;
}

.c-ai-fixed__guide {
  margin: 0 0 var(--space-3);
  color: var(--color-mono-4);
  font-size: 13px;
  line-height: 1.6;
}

.c-ai-fixed__guide a {
  color: var(--point-blue-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-ai-modal__fixed .c-ai-btn--full {
  margin-top: 0;
}

.c-ai-modal__followup {
  position: relative;
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-mono-7);
  background: var(--color-white);
}

.c-ai-modal__followup-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-ai-modal__followup input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-pill);
  color: var(--color-mono-1);
  font-family: inherit;
  font-size: 14px;
}

.c-ai-modal__attach,
.c-ai-modal__send {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.c-ai-modal__attach {
  background: transparent;
  color: var(--color-mono-4);
}

.c-ai-modal__attach[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.c-ai-modal__send {
  background: var(--point-blue-1);
  color: var(--color-white);
}

.c-ai-modal__attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin-bottom: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--color-mosaic-bg);
  color: var(--color-mono-3);
  font-size: var(--text-caption);
}

.c-ai-modal__attachment[hidden] {
  display: none;
}

.c-ai-modal__attachment span {
  overflow: hidden;
  max-width: 240px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-ai-modal__attachment-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.c-ai-modal__attachment-thumb:not([src]) {
  display: none;
}

.c-ai-modal__attachment button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: calc(var(--space-1) * -1) 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-mono-4);
  cursor: pointer;
}

/* ---------- 응답 헤더 · 말풍선 ---------- */

.c-ai-response-head {
  margin-bottom: var(--space-5);
}

.c-ai-response-head h3,
.c-ai-loading h3 {
  margin: 0;
  color: var(--color-mono-1);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.c-ai-response-head p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.c-ai-response-head .c-ai-response-head__note {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.c-ai-bubble {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-mosaic-bg);
}

.c-ai-bubble p {
  margin: 0;
  color: var(--color-mono-3);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
}

.c-ai-bubble--copy p {
  font-size: 13px;
  word-break: break-all;
}

.c-ai-bubble__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--color-mono-3);
  font-size: 13px;
  line-height: 1.6;
}

/* 에러·안내 — 경고 아이콘·붉은색 없이 옅은 회색 배너 */
.c-ai-notice {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-mono-7);
}

.c-ai-notice p {
  margin: 0;
  color: var(--color-mono-3);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 로딩 ---------- */

.c-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 200px;
  text-align: center;
}

.c-ai-loading__dots {
  display: inline-flex;
  gap: 6px;
}

.c-ai-loading__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--point-blue-1);
  animation: ai-dot 1.4s ease-in-out infinite;
}

.c-ai-loading__dots i:nth-child(2) { animation-delay: 0.2s; }
.c-ai-loading__dots i:nth-child(3) { animation-delay: 0.4s; }

/* ---------- 버튼 ---------- */

.c-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-btn-rect);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.c-ai-btn--primary {
  border-color: var(--point-blue-1);
  background: var(--point-blue-1);
  color: var(--color-white);
}

.c-ai-btn--outline {
  border-color: var(--color-mono-6);
  background: var(--color-white);
  color: var(--color-mono-1);
}

.c-ai-btn--soft {
  border-color: var(--color-mono-7);
  background: var(--color-mono-7);
  color: var(--color-mono-1);
}

.c-ai-btn[disabled],
.c-ai-text-actions button[disabled] {
  border-color: var(--color-mono-7);
  background: var(--color-mono-7);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.c-ai-text-actions button[disabled] {
  background: transparent;
}

.c-ai-btn--full {
  width: 100%;
  margin-top: var(--space-5);
}

.c-ai-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.c-ai-actions--start {
  justify-content: flex-start;
}

.c-ai-actions--recommend > :first-child { flex: 1 1 0; }
.c-ai-actions--recommend > :last-child { flex: 1.5 1 0; }
.c-ai-actions--quote > :nth-child(1),
.c-ai-actions--quote > :nth-child(2) { flex: 1 1 0; }
.c-ai-actions--quote > :nth-child(3) { flex: 1.4 1 0; }

.c-ai-cta-caption {
  margin: var(--space-5) 0 calc(var(--space-3) * -1);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  text-align: center;
}

.c-ai-cta-caption[hidden] {
  display: none;
}

.c-ai-text-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
}

.c-ai-text-actions > span {
  width: 1px;
  height: 12px;
  background: var(--color-mono-6);
}

.c-ai-text-actions button,
.c-ai-text-btn {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-mono-4);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- 예시 칩 · 되묻기 ---------- */

.c-ai-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.c-ai-suggest__chip,
.c-ai-chip {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-mono-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.c-ai-chip {
  min-height: 32px;
  padding: 0 var(--space-3);
  position: relative;
  white-space: nowrap;
}

.c-ai-chip::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}

.c-ai-chip.is-selected {
  border-color: var(--point-blue-1);
  background: var(--point-blue-1);
  color: var(--color-white);
}

.c-ai-clarify {
  display: grid;
  gap: var(--space-2);
}

.c-ai-clarify__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.c-ai-clarify__card strong {
  color: var(--color-mono-1);
  font-size: 15px;
}

.c-ai-clarify__card span {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ---------- 상품 카드 공통 ---------- */

.c-ai-products {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-ai-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: opacity 0.15s ease;
}

.c-ai-group + .c-ai-group {
  margin-top: var(--space-3);
}

.c-ai-group__head,
.c-ai-group__notice {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.c-ai-group__head {
  font-weight: 700;
}

.c-ai-group__notice {
  display: none;
}

.c-ai-group.is-inactive .c-ai-group__notice {
  display: block;
}

.c-ai-group.is-inactive .c-ai-product {
  opacity: 0.5;
}

.c-ai-product {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.c-ai-product.is-selected {
  border-color: var(--point-blue-1);
  background: color-mix(in srgb, var(--point-blue-1) 5%, var(--color-white));
}

.c-ai-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.c-ai-check svg {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 2px;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.c-ai-product.is-selected .c-ai-check {
  color: var(--color-white);
}

.c-ai-product.is-selected .c-ai-check svg {
  border-color: var(--point-blue-1);
  background: var(--point-blue-1);
}

.c-ai-product__info,
.c-ai-result__info,
.c-ai-cart-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-ai-product__brand {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* RM(기업·대학 전용) 뱃지 — 견적서 결과 카드·견적상품의 브랜드명 뒤. 견적서 문서·PDF 에는 없다(마이페이지 견적서와 통일) */
.c-ai-rm-badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 5px;
  border-radius: var(--radius-xs);
  background: var(--point-blue-5);
  color: var(--point-blue-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  vertical-align: 1px;
  white-space: nowrap;
}

.c-ai-product__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-mono-1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.c-ai-product__meta,
.c-ai-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.c-ai-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.c-ai-select select {
  height: 32px;
  padding: 0 var(--space-7) 0 var(--space-3);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-mono-3);
  font-family: inherit;
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.c-ai-select__arrow {
  position: absolute;
  right: var(--space-2);
  color: var(--color-mono-4);
  pointer-events: none;
}

.c-ai-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-mosaic-bg);
  color: var(--color-mono-4);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.c-ai-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-size: 13px;
}

.c-ai-price__origin {
  color: var(--color-text-muted);
}

.c-ai-price__rate {
  color: var(--point-blue-text);
  font-style: normal;
  font-weight: 700;
}

.c-ai-price__sale {
  color: var(--color-mono-1);
  font-size: 14px;
}

.c-ai-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: default;
}

.c-ai-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-mono-3);
  cursor: pointer;
}

.c-ai-stepper button[disabled] {
  color: var(--color-mono-6);
  cursor: not-allowed;
}

.c-ai-stepper input {
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-mono-7);
  border-right: 1px solid var(--color-mono-7);
  color: var(--color-mono-1);
  font-family: inherit;
  font-size: 14px;
  text-align: center;
}

.c-ai-thumb {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-mono-7);
}

.c-ai-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-ai-thumb--48 { width: 48px; height: 48px; }
.c-ai-thumb--44 { width: 44px; height: 44px; }

/* ---------- 메시지 초안 ---------- */

.c-ai-section-title {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-mono-1);
  font-size: 15px;
  font-weight: 800;
}

.c-ai-messages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.c-ai-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  box-sizing: border-box;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  cursor: pointer;
}

.c-ai-message.is-selected {
  border-color: var(--point-blue-1);
  background: color-mix(in srgb, var(--point-blue-1) 5%, var(--color-white));
}

.c-ai-radio {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-mono-6);
  border-radius: 50%;
  background: var(--color-white);
}

.is-selected > .c-ai-radio {
  border: 6px solid var(--point-blue-1);
}

.c-ai-message__copy {
  display: -webkit-box;
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--color-mono-3);
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.c-ai-message__hint {
  display: none;
  color: var(--point-blue-text);
  font-size: var(--text-caption);
}

.c-ai-message.is-selected .c-ai-message__hint {
  display: block;
}

.c-ai-message__copy-btn {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-mono-4);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.c-ai-message__copy-btn.is-copied {
  border-color: var(--point-blue-1);
  color: var(--point-blue-text);
}

/* ---------- 견적서 ---------- */

.c-ai-quote {
  position: relative;
}

.c-ai-quote__grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-4);
}

.c-ai-quote__search,
.c-ai-quote__sheet {
  min-width: 0;
}

.c-ai-quote__sheet {
  transition: opacity 0.15s ease;
}

.c-ai-quote.is-panel-open .c-ai-quote__sheet,
.c-ai-quote.is-panel-open .c-ai-quote__chips {
  opacity: 0.4;
}

.c-ai-quote__search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-lg);
  color: var(--color-mono-4);
}

.c-ai-quote__search-box:focus-within {
  border-color: var(--point-blue-1);
}

.c-ai-quote__search-box input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-mono-1);
  font-family: inherit;
  font-size: 14px;
}

.c-ai-quote__chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.c-ai-quote__all {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--point-blue-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.c-ai-quote__all:focus-visible {
  outline: 2px solid var(--point-blue-1);
  outline-offset: 2px;
}

.c-ai-quote__caption {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.c-ai-quote__caption[hidden] {
  display: none;
}

.c-ai-quote__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.c-ai-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-ai-field--full {
  grid-column: 1 / -1;
}

.c-ai-field__label,
.c-ai-quote__label {
  color: var(--color-mono-1);
  font-size: 14px;
  font-weight: 800;
}

/* 홈에도 실리는 레거시 reset.css 의 input[type="text"|"tel"|"email"]{padding-left:3px} 보다 우선하도록 폼 안으로 한정한다 */
.c-ai-quote__form .c-ai-field__input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-lg);
  color: var(--color-mono-1);
  font-family: inherit;
  font-size: 14px;
}

.c-ai-quote__label {
  margin: var(--space-5) 0 var(--space-2);
}

.c-ai-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-mono-7);
}

.c-ai-cart-row .c-ai-badge {
  align-self: flex-start;
}

.c-ai-cart-row__subtotal {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.c-ai-cart-row__side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.c-ai-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-mono-4);
  cursor: pointer;
}

.c-ai-quote__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-mosaic-bg);
  color: var(--color-mono-3);
  font-size: 14px;
}

.c-ai-quote__summary > div {
  display: flex;
  justify-content: space-between;
}

.c-ai-quote__summary b {
  color: var(--color-mono-1);
}

.c-ai-quote-panel {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-height: 420px;
  padding: 0 var(--space-4) var(--space-4);
  border: 1px solid var(--color-mono-7);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-overlay);
}

.c-ai-quote-panel[hidden] {
  display: none;
}

.c-ai-quote-panel__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

.c-ai-quote-panel__head strong {
  flex: 1 1 auto;
  color: var(--color-mono-1);
  font-size: 14px;
}

.c-ai-quote-panel__sort {
  margin-left: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: 400;
}

/* 패널 카테고리 칩 — 한 줄 + 좌우 화살표·페이드 */
.c-ai-chiprow {
  position: relative;
  flex: 0 0 auto;
  margin: 0 calc(var(--space-1) * -1);
}

.c-ai-quote-panel__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: var(--space-2) 40px var(--space-2) var(--space-1);
  scrollbar-width: none;
}

.c-ai-quote-panel__chips::-webkit-scrollbar {
  display: none;
}

.c-ai-chiprow .c-ai-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.c-ai-chiprow__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-mono-7);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-overlay);
  color: var(--color-mono-3);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}

.c-ai-chiprow__arrow.is-left {
  left: 0;
}

.c-ai-chiprow__arrow.is-right {
  right: 0;
}

.c-ai-chiprow__arrow[hidden],
.c-ai-chiprow__fade[hidden] {
  display: none;
}

.c-ai-chiprow__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 48px;
  pointer-events: none;
}

.c-ai-chiprow__fade.is-right {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--color-white) 70%);
}

.c-ai-chiprow__fade.is-left {
  left: 0;
  background: linear-gradient(270deg, transparent, var(--color-white) 70%);
}

.c-ai-quote-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--space-2);
}

.c-ai-quote-panel__more {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  text-align: center;
}

.c-ai-quote-panel .c-ai-btn--full {
  flex: 0 0 auto;
  margin-top: var(--space-3);
}

.c-ai-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.c-ai-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-mono-7);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.c-ai-result.is-added {
  border-color: var(--point-blue-1);
}

.c-ai-result__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-mono-4);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.c-ai-result.is-added .c-ai-result__state {
  color: var(--point-blue-text);
  font-weight: 700;
}

/* ---------- 목록·빈 상태 ---------- */

.c-ai-empty-small {
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

.c-ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6) 0 0;
  text-align: center;
}

.c-ai-empty__icon {
  color: var(--color-mono-6);
}

.c-ai-empty strong {
  margin-top: var(--space-3);
  color: var(--color-mono-1);
  font-size: 15px;
}

.c-ai-empty p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.c-ai-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-ai-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-mono-7);
  border-radius: var(--radius-lg);
}

.c-ai-info-card strong {
  color: var(--color-mono-1);
  font-size: 14px;
}

.c-ai-info-card span {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* 임시저장 목록 — 행별 [이어서 구매하기] */
.c-ai-info-card--action {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
}

.c-ai-info-card__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.c-ai-info-card__txt strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-ai-temp-continue {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--point-blue-1);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--point-blue-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.c-ai-temp-continue:hover {
  background: var(--point-blue-5);
}

.c-ai-temp-continue:focus-visible {
  outline: 2px solid var(--point-blue-1);
  outline-offset: 2px;
}

.c-ai-statements {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 372px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-ai-statement {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-mono-7);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.c-ai-statement__check {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: var(--space-3);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-xs);
  background: var(--color-white);
}

.c-ai-statement[aria-checked="true"] > .c-ai-statement__check {
  border-color: var(--point-blue-1);
  background: var(--point-blue-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.c-ai-statement:focus-visible {
  outline: 2px solid var(--point-blue-1);
  outline-offset: 2px;
}

.c-ai-statement.is-selected {
  border-color: var(--point-blue-1);
  background: color-mix(in srgb, var(--point-blue-1) 5%, var(--color-white));
}

.c-ai-statement__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-ai-statement__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.c-ai-statement__title strong {
  overflow: hidden;
  color: var(--color-mono-1);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-ai-statement__msg {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-ai-statement__meta {
  color: var(--color-mono-4);
  font-size: 13px;
}

.c-ai-statement__reserve {
  color: var(--color-mono-1);
  font-size: 13px;
  font-weight: 700;
}

.c-ai-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 700;
}

.c-ai-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.c-ai-status--sent {
  background: var(--point-blue-5, #E8EFF6);
  color: var(--point-blue-1);
}

/* 모달에서 연 전자거래명세서 팝업은 모달 위에 띄운다 */
#ets_download_popup.is-over-ai {
  z-index: calc(var(--z-modal) + 100);
}

/* ---------- 토스트 ---------- */

.c-ai-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-7);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  max-width: calc(100% - 32px);
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  transform: translate(-50%, 12px);
  border-radius: var(--radius-btn-rect);
  background: var(--color-mono-1);
  box-shadow: var(--shadow-floating);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-ai-toast--anchored {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--space-2));
  max-width: none;
  transform: translateY(8px);
  text-align: left;
}

.c-ai-toast.is-show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.c-ai-toast--anchored.is-show {
  transform: none;
}

/* ---------- 포커스 · 모션 ---------- */

.c-ai-modal button:focus-visible,
.c-ai-modal a:focus-visible,
.c-ai-modal input:focus-visible,
.c-ai-modal select:focus-visible,
.c-ai-modal [tabindex]:focus-visible {
  outline: 2px solid var(--point-blue-1);
  outline-offset: 2px;
}

@keyframes ai-modal-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ai-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ai-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ---------- 견적서 미리보기·PDF — 마이페이지 견적서와 같은 내용 ---------- */

.c-ai-quote-editor[hidden],
.c-ai-quote-preview[hidden] {
  display: none;
}

/*
 * 견적서 본문은 마이페이지 견적서(#estimate_popup)와 같은 마크업이라, 모양은 홈에도 실리는 레거시 CSS
 * (/css/common.css · new/popup.css)가 그대로 입힌다. 여기서는 팝업용 위치·높이만 풀어 모달 안에 놓는다.
 * ⚠ !important 는 이 위치·높이 보정에만 쓴다 — new/popup.css 의 `.popup_wrap:not(…)×5 > .popup_box` 규칙(클래스 7개 상당)이
 *   max-height: calc(100vh - 64px) · overflow: hidden 을 걸어, 일반 선택자로는 미리보기·PDF 가 화면 높이에서 잘린다.
 */
.c-ai-quote-preview .popup_wrap.c-ai-qdoc-wrap {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  background: none !important;
  overflow: hidden !important;
}

/* 미리보기도 PDF 와 같은 1000px 로 그리고, 모달 폭에 맞춰 JS(fitQuoteDoc)가 zoom 으로 줄인다 — 좁은 폭에서 상품명이 말줄임되지 않게 */
.c-ai-qdoc-wrap > .popup_box.c-ai-qdoc-core {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 1000px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  border: 1px solid var(--color-mono-7) !important;
  box-shadow: none !important;
}

.c-ai-qdoc-wrap > .popup_box.c-ai-qdoc-core > .popup_cont {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* PDF 캡처용 복제본 — 마이페이지 견적서 PDF 와 같은 조건: 레거시 팝업 폭(.big_box max-width 1000px), 높이·스크롤 제한 없음, 흰 배경 */
.c-ai-quote-preview .popup_wrap.c-ai-qdoc-wrap.is-capture,
.popup_wrap.c-ai-qdoc-wrap.is-capture {
  position: fixed !important;
  top: 0 !important;
  left: -10000px !important;
  z-index: -1 !important;
  display: block !important;
  width: 1000px !important;
  height: auto !important;
  background: none !important;
  overflow: visible !important;
}

.popup_wrap.c-ai-qdoc-wrap.is-capture > .popup_box.c-ai-qdoc-core {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  border: none !important;
}

.popup_wrap.c-ai-qdoc-wrap.is-capture .popup_cont {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  background-color: white !important;
}

.popup_wrap.c-ai-qdoc-wrap.is-capture .com_table_wrap {
  overflow: visible !important;
}
.c-ai-quote-preview__bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 2px;
  background: var(--color-white);
}

.c-ai-quote-preview__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- 반응형 ---------- */

@media (max-width: 899px) {
  .c-ai-quote__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-ai-quote__chips {
    flex-direction: row;
    overflow-x: auto;
  }

  .c-ai-quote__all {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .c-ai-modal__box {
    width: 92vw;
    max-height: calc(100vh - 32px);
  }

  .c-ai-modal.is-wide .c-ai-modal__box {
    width: 94vw;
  }

  .c-ai-modal__header,
  .c-ai-modal__body,
  .c-ai-modal__followup,
  .c-ai-modal__fixed {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .c-ai-actions--quote {
    flex-direction: column;
  }

  .c-ai-product {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .c-ai-product .c-ai-stepper {
    grid-column: 2;
    justify-self: start;
  }

  .c-ai-messages,
  .c-ai-results,
  .c-ai-quote__form {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-ai-cart-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .c-ai-quote-preview__bar {
    flex-wrap: wrap;
  }

  .c-ai-quote-preview__opt {
    flex: 1 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-ai-modal__box,
  .c-ai-modal__backdrop,
  .c-ai-loading__dots i,
  .c-ai-toast,
  .c-ai-group,
  .c-ai-product,
  .c-ai-quote__sheet {
    animation: none;
    transition: none;
  }
}