/* ============================================
   AI 캠페인 도우미 — 3단계 모달
   진입: ai-wallet 카드 → ai-campaign-modal.js. 상태: .c-ai-modal[data-ai-step="1|2|3|error"].
   Figma: 3489:442 / 요구서 3499·3500. 색은 기존 토큰 우선 매핑, 모달 한정 그레이는 직접값(주석).
   px 기반(기존 popup.css 컨벤션 일치) + 320~ 반응형(@media max-width:767).
   ============================================ */

/* ---- 오버레이 / 박스 ---- */
.c-ai-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 2000);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif;
}
.c-ai-modal.is-open { display: flex; }
.c-ai-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.c-ai-modal__box {
  position: relative;
  z-index: 1;
  width: 520px;                    /* Step1/2 */
  max-width: 100%;
  max-height: calc(100vh - 32px);
  background: #fff;
  border-radius: var(--radius-xl); /* 16 */
  box-shadow: 0 24px 60px rgba(8, 12, 56, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.c-ai-modal[data-ai-step="3"] .c-ai-modal__box { width: 660px; }   /* Step3 넓게 */

/* ---- 헤더 ---- */
.c-ai-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 16px;
  flex: 0 0 auto;
}
.c-ai-modal__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-mono-1);      /* #222 ← #222 */
}
.c-ai-modal__spark { color: var(--point-blue-1); font-weight: 700; }
.c-ai-modal__close {
  border: 0;
  background: none;
  padding: 0;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: #999;                     /* 모달 한정 그레이 */
  cursor: pointer;
}
.c-ai-modal__close:hover { color: var(--color-mono-1); }

/* ---- 스텝 인디케이터 ---- */
.c-ai-modal__steps {
  display: flex;
  align-items: center;
  padding: 0 26px 18px;
  flex: 0 0 auto;
}
.c-ai-modal__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #f2f2f2;             /* 비활성 */
  color: #bbb;
}
.c-ai-modal__line {
  flex: 1 1 0;
  min-width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-mono-7); /* #eee */
}
.c-ai-modal__dot.is-active { background: var(--point-blue-1); color: #fff; }
.c-ai-modal__line.is-active { background: var(--point-blue-1); }

/* ---- 바디(스크롤) ---- */
.c-ai-modal__body {
  padding: 6px 26px 26px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ---- 뷰 전환(data-ai-step 구동) ---- */
.c-ai-view { display: none; }
.c-ai-modal[data-ai-step="1"] [data-ai-view="step1"],
.c-ai-modal[data-ai-step="2"] [data-ai-view="step2"],
.c-ai-modal[data-ai-step="3"] [data-ai-view="step3"],
.c-ai-modal[data-ai-step="error"] [data-ai-view="error"] { display: block; }

/* ============================================
   Step 1 — 이벤트 입력
   ============================================ */
.c-ai-view__title { margin: 0; font-size: 18px; font-weight: 900; color: var(--color-mono-1); }
.c-ai-view__desc  { margin: 6px 0 0; font-size: 14px; font-weight: 400; color: var(--color-mono-4); }  /* #666 */

.c-ai-tabs { display: flex; gap: 10px; margin-top: 18px; }
.c-ai-tab {
  border: 1px solid transparent;
  background: #f5f6f9;            /* 비활성 탭 */
  color: #646c7c;
  padding: 11px 17px;
  border-radius: var(--radius-btn-rect);   /* 10 */
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.c-ai-tab.is-active { background: var(--point-blue-1); border-color: var(--point-blue-1); color: #fff; }

.c-ai-panel { margin-top: 14px; }

/* 드롭존 */
.c-ai-dropzone {
  position: relative;
  height: 140px;
  background: #f9f9f9;
  border: 2px dashed var(--color-mono-6);   /* #ccc */
  border-radius: var(--radius-lg);          /* 12 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.c-ai-dropzone:hover,
.c-ai-dropzone.is-dragover { background: #f0f1f4; border-color: var(--point-blue-1); }
.c-ai-dropzone:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
.c-ai-dropzone__empty { text-align: center; }   /* hint/formats 수평 중앙 정렬 — 래퍼는 dropzone flex-center 로 중앙 배치되나 내부 텍스트 정렬은 별도 필요 */
.c-ai-dropzone__hint { margin: 0; font-size: 14px; color: #999; }
.c-ai-dropzone__formats { margin: 0; font-size: 12px; color: var(--color-mono-6); }  /* #ccc */
.c-ai-dropzone__preview { position: absolute; inset: 0; }
.c-ai-dropzone__thumb { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.c-ai-dropzone__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* 링크 / 텍스트 입력 */
.c-ai-field-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--color-mono-4); }
.c-ai-input,
.c-ai-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-mono-7);   /* #eee */
  border-radius: var(--radius-btn-rect);    /* 10 */
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-mono-1);
  background: #fff;
}
.c-ai-input { height: 44px; }
.c-ai-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.c-ai-input::placeholder,
.c-ai-textarea::placeholder { color: #bbb; }
.c-ai-input:focus,
.c-ai-textarea:focus { outline: none; border-color: var(--point-blue-1); }

/* 분석 시작하기 */
.c-ai-analyze {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  border: 0;
  border-radius: var(--radius-btn-rect);    /* 10 */
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-mono-7);           /* disabled #eee */
  color: #999;
  transition: background 0.15s ease, color 0.15s ease;
}
.c-ai-analyze:not([disabled]) { background: var(--point-blue-1); color: #fff; }
.c-ai-analyze:not([disabled]):hover { filter: brightness(0.96); }
.c-ai-analyze[disabled] { cursor: not-allowed; }

/* ============================================
   Step 2 — 분석 중
   ============================================ */
.c-ai-loading { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.c-ai-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--color-mono-7);     /* #eee */
  border-top-color: var(--point-blue-1);
  animation: ai-spin 0.8s linear infinite;
}
.c-ai-loading__title { margin: 22px 0 0; font-size: 16px; font-weight: 700; color: var(--color-mono-1); }
.c-ai-loading__desc  { margin: 6px 0 0; font-size: 13px; color: #999; }
.c-ai-progress {
  width: 100%;
  height: 4px;
  margin-top: 24px;
  border-radius: 2px;
  background: var(--color-mono-7);           /* #eee */
  overflow: hidden;
}
.c-ai-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--point-blue-1);
  transition: width 0.2s linear;
}
.c-ai-cancel {
  width: 100%;
  height: 50px;
  margin-top: 24px;
  border: 1px solid var(--color-mono-7);     /* #eee */
  border-radius: var(--radius-btn-rect);
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-mono-4);
  cursor: pointer;
}
.c-ai-cancel:hover { background: #fafbfd; }

@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .c-ai-spinner { animation-duration: 2s; }
}

/* ============================================
   Step 3 — 추천 결과
   ============================================ */
.c-ai-section-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--color-mono-1); }
.c-ai-section-title--gap { margin-top: 20px; }

.c-ai-products { background: #f9f9f9; border-radius: var(--radius-btn-rect); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.c-ai-product {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--color-mono-7);   /* #eee */
  border-radius: var(--radius-md);           /* 8 */
  padding: 10px 12px;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.c-ai-product.is-checked { border-color: var(--point-blue-1); }
.c-ai-product.is-unchecked { opacity: 0.55; }
.c-ai-product__check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-mono-6);   /* #ccc */
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.c-ai-product.is-checked .c-ai-product__check { background: var(--point-blue-1); border-color: var(--point-blue-1); color: #fff; }
.c-ai-product__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* 브랜드/제휴사 태그(형광펜①) — 상품명 위 회색 소형 */
.c-ai-product__brand { font-size: 12px; font-weight: 500; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ai-product.is-unchecked .c-ai-product__brand { color: #bbb; }
.c-ai-product__name { font-size: 14px; font-weight: 600; color: var(--color-mono-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ai-product.is-unchecked .c-ai-product__name { color: #999; }
.c-ai-product__meta { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
/* 가격 3종(정가·할인율·판매가) 묶음 — 그룹 전체가 드롭다운(유효기간) 기준 세로 중앙, 그룹 내부는 밑선 정렬 */
.c-ai-product__price-group { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
/* 정가 취소선 + 할인율(형광펜②) */
.c-ai-product__price-org { font-size: 12px; font-weight: 400; color: #999; text-decoration: line-through; white-space: nowrap; }
.c-ai-product__discount { font-size: 13px; font-weight: 700; color: var(--point-blue-1); white-space: nowrap; }
.c-ai-product__limit {
  flex: 0 0 auto;           /* 수축 방지 — 유효기간 드롭다운이 가격 요소를 밀지 않도록 */
  border: 1px solid var(--color-mono-7);
  border-radius: 6px;
  padding: 2px 7px;         /* 상하 패딩 축소 → 다른 span 들과 시각 높이 맞춤 */
  font-size: 12px;
  font-weight: 600;
  color: #555;
  background: #fff;
  cursor: pointer;
  line-height: 1.5;         /* span 들과 동일 line-height → baseline 정렬 */
  vertical-align: middle;
}
.c-ai-product__limit[disabled] { cursor: default; }
.c-ai-product__price { font-size: 13px; font-weight: 700; color: var(--color-mono-1); }
.c-ai-stepper { flex: 0 0 auto; display: flex; border: 1px solid var(--color-mono-7); border-radius: var(--radius-md); overflow: hidden; }
.c-ai-stepper__btn {
  width: 30px;
  height: 32px;
  border: 0;
  background: #fff;
  color: var(--color-mono-4);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.c-ai-stepper__btn:hover { background: #f5f6f9; }
.c-ai-stepper__val { width: 42px; height: 32px; border: 0; background: transparent; padding: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--color-mono-1); }
.c-ai-stepper__val:focus { outline: none; }

/* 메시지 초안 */
.c-ai-messages { display: flex; gap: 10px; }
.c-ai-msg {
  flex: 1 1 0;
  min-width: 0;
  border: 1.5px solid var(--color-mono-7);   /* 선택 시 색만 변경 → 레이아웃 시프트 방지 */
  border-radius: var(--radius-btn-rect);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 선택(최대 1개) — 파란 테두리 강조(상품 카드 .c-ai-product.is-checked 와 동일 톤) */
.c-ai-msg.is-selected { border-color: var(--point-blue-1); }
/* 체크박스 + 안내 문구 행 */
.c-ai-msg__head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.c-ai-msg__check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-mono-6);   /* #ccc */
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.c-ai-msg.is-selected .c-ai-msg__check { background: var(--point-blue-1); border-color: var(--point-blue-1); color: #fff; }
/* "[주문하기] 버튼을 눌러야 적용돼요" — 선택 카드에만 노출 */
.c-ai-msg__hint { display: none; font-size: 12px; font-weight: 600; color: var(--point-blue-1); line-height: 1.4; }
.c-ai-msg.is-selected .c-ai-msg__hint { display: inline; }
.c-ai-msg__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-mono-3); }  /* #333 */
.c-ai-msg__copy-row { display: flex; justify-content: flex-end; }
.c-ai-msg__copy {
  border: 1.5px solid var(--color-mono-7);
  border-radius: var(--radius-md);
  background: #fff;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mono-4);
  cursor: pointer;
}
.c-ai-msg__copy:hover { background: #f5f6f9; }

/* 예상 발송 인원 */
.c-ai-estimate { margin-top: 20px; background: #f9f9f9; border-radius: var(--radius-btn-rect); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
/* 위 display:flex(author) 가 UA [hidden]{display:none} 을 덮으므로 명시 — 입력 소재에 인원 정보가 없을 때 JS 가 이 블록을 hidden 처리한다. */
.c-ai-estimate[hidden] { display: none; }
.c-ai-estimate__row { display: flex; align-items: center; gap: 8px; }
.c-ai-estimate__value { font-size: 15px; font-weight: 700; color: var(--color-mono-1); }
.c-ai-estimate__badge { background: #f2f2f2; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 500; color: #999; }
.c-ai-estimate__note { margin: 0; font-size: 12px; color: #999; }

/* CTA */
.c-ai-cta { display: flex; gap: 20px; margin-top: 20px; }
.c-ai-cta__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  border-radius: var(--radius-btn-rect);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease, background 0.15s ease;
}
.c-ai-cta__btn--outline { background: #fff; border: 1px solid var(--color-mono-7); color: var(--color-mono-4); }
.c-ai-cta__btn--outline:hover { background: #fafbfd; }
.c-ai-cta__btn--primary { background: var(--point-blue-1); border: 0; color: #fff; }
.c-ai-cta__btn--primary:hover { filter: brightness(0.96); }

.c-ai-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.c-ai-link { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 500; color: #888; cursor: pointer; }
.c-ai-link:hover { color: var(--point-blue-1); }
.c-ai-links__divider { color: #ddd; font-size: 12px; }

/* ============================================
   에러 상태
   ============================================ */
.c-ai-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 0; }
.c-ai-error__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff1f0;
  color: #e5484d;
  font-size: 26px;
  font-weight: 800;
  line-height: 48px;
}
.c-ai-error__title { margin: 16px 0 0; font-size: 16px; font-weight: 700; color: var(--color-mono-1); }
.c-ai-error__desc { margin: 6px 0 0; font-size: 13px; color: #999; }
.c-ai-retry {
  width: 100%;
  height: 50px;
  margin-top: 24px;
  border: 0;
  border-radius: var(--radius-btn-rect);
  background: var(--point-blue-1);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.c-ai-retry:hover { filter: brightness(0.96); }

/* ============================================
   반응형 (≤767) — 다이얼로그 폭 100%, 여백/버튼 조정 (responsive.md §5-9)
   ============================================ */
@media (max-width: 767px) {
  .c-ai-modal { padding: 12px; }
  .c-ai-modal__box,
  .c-ai-modal[data-ai-step="3"] .c-ai-modal__box { width: 100%; max-height: calc(100vh - 24px); }
  .c-ai-modal__header { padding: 18px 20px 12px; }
  .c-ai-modal__steps { padding: 0 20px 16px; }
  .c-ai-modal__body { padding: 4px 20px 20px; }
  .c-ai-view__title { font-size: 17px; }

  /* 상품 행: 좁은 폭에서 스텝퍼가 아래로 wrap */
  .c-ai-product { flex-wrap: wrap; }
  .c-ai-product__info { flex-basis: calc(100% - 32px); }
  .c-ai-stepper { margin-left: 32px; }

  /* 메시지 카드 1열 */
  .c-ai-messages { flex-direction: column; }

  /* CTA 세로 stack, 터치 영역 유지.
     column 전환 시 base 의 flex:1 1 0(flex-basis:0)이 주축(세로)에 걸려 height 가 무시되고
     버튼이 텍스트 높이로 붕괴 → flex:0 0 auto 로 리셋해 height 48 이 실제 높이로 적용되게 함. */
  .c-ai-cta { flex-direction: column; gap: 10px; }
  .c-ai-cta__btn { flex: 0 0 auto; height: 48px; }
  .c-ai-msg__copy { height: 34px; }
}

/* ============================================
   토스트 (모달 공용 — "복사됐어요"/"장바구니에 담겼어요"/포맷 에러 등)
   ============================================ */
.c-ai-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  z-index: var(--z-toast, 3000);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.c-ai-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 767px) {
  .c-ai-toast { bottom: 20px; font-size: 13px; }
}