/* ============================================
   AI 배너 (풀폭 퍼플 그라디언트) — 로그인 메인 최상단 (공용)
   미구매자(index-login) / 구매자(index-login-buyer) 메인 최상단.
   좌: eyebrow + 2줄 헤딩 + 입력 프롬프트 버튼 + 예시 칩 4개 / 우: 다크 채팅 카드(JS 타이핑, ai-campaign-chat.js).
   Figma: 배너 3693:1390 / 타이핑 3709:2835.
   [2026-07] 기존 "AI 도우미 + 지갑" 2열(.c-ai-wallet/.c-ai-helper/.c-wallet + 스파클) 제거 → 풀폭 배너로 교체.
   토큰 우선(색은 common-design 토큰 매핑). 컴포넌트 한정값만 직접값(퍼플 mid / 다크 채팅 색 / 프롬프트 보더·플레이스홀더).
   섹션이 .container 안이라 전역 패딩 미적용 → 섹션 리듬 직접 부여. 320px~ 반응형(BP 767/1279).
   ============================================ */

/* ---- 섹션 리듬 (유지 — 두 템플릿의 <section class="s-ai-wallet"> 래퍼 기준) ---- */
.s-ai-wallet {
  padding-top: var(--space-8);      /* 40 — 상단바 아래 첫 콘텐츠 여백 */
  padding-bottom: var(--space-8);   /* 40 */
}
/* 다음 섹션(진행 이벤트 .s-cp-banner)과의 간격은 위 섹션 pb(40)로만 → 이중 여백 방지. */
.s-ai-wallet + .s-cp-banner { padding-top: 0; }

/* ---- 배너 컨테이너 ---- */
.c-ai-banner {
  /* Figma 3693:1390 — 좌상→우하 퍼플 그라디언트(파랑 #5866FF → 보라 #8465F5 → 라벤더 #A67EF0).
     퍼플 mid 2색은 컴포넌트 한정 직접값, 시작 파랑은 --point-blue-4(#5866FF) 와 동일. */
  --ai-banner-gradient: linear-gradient(102.48deg, #5866FF 0%, #8465F5 49%, #A67EF0 99%);
  background: var(--ai-banner-gradient);
  border-radius: 28px;              /* Figma 3693:1390 (토큰 없음 — 컴포넌트 한정값) */
  padding: 30px 48px;               /* Figma 3693:1390 */
  display: flex;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* ---- 좌: 카피 영역 ---- */
.c-ai-banner__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-ai-banner__eyebrow {
  margin: 0;
  font-size: 21px;                  /* Figma 3693:1390 */
  font-weight: 400;                 /* Pretendard Regular */
  line-height: 1.35;
  color: var(--color-white);
}
.c-ai-banner__title {
  margin: 2px 0 0;                  /* eyebrow 바로 아래 */
  font-size: 28px;                  /* Figma 3693:1390 */
  font-weight: 800;                 /* Pretendard ExtraBold */
  line-height: 1.35;
  color: var(--color-white);
}

/* 입력형 프롬프트 버튼 (검색필드 룩) — 통째로 모달 오픈 트리거 */
.c-ai-banner__prompt {
  margin-top: var(--space-4);       /* 16 — 헤딩 → 입력 gap (부모 상하여백 30 보다 작게 + prompt→칩 gap 과 상하 대칭) */
  width: 417px;                     /* Figma 3693:1390 */
  max-width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 8px;
  background: var(--color-white);
  border: 1.5px solid #dfe4f5;      /* Figma 3693:1390 연퍼플 보더 (컴포넌트 한정값) */
  border-radius: var(--radius-pill);/* 999 */
  box-shadow: 0 2px 10px rgba(75, 117, 242, 0.08);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.c-ai-banner__prompt:hover { border-color: var(--point-blue-1); box-shadow: 0 4px 14px rgba(75, 117, 242, 0.14); }
.c-ai-banner__prompt:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.c-ai-banner__prompt-ph {
  flex: 0 1 auto;
  min-width: 0;                     /* flex 자식 말줄임 허용 */
  font-size: 14px;
  font-weight: 400;                 /* Pretendard Regular */
  color: #999;                      /* Figma 3693:1390 placeholder gray (컴포넌트 한정값) */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-ai-banner__prompt-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;               /* 원형 */
  background: var(--point-blue-1);
  color: var(--color-white);        /* 내부 svg stroke=currentColor */
}
.c-ai-banner__prompt-send svg { display: block; }

/* 예시 칩 (글래스) */
.c-ai-banner__chips {
  margin-top: 16px;                 /* 입력 → 칩 gap */
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.c-ai-banner__chip {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;                 /* Pretendard SemiBold */
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.c-ai-banner__chip:hover { background: rgba(255, 255, 255, 0.32); }
.c-ai-banner__chip:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* ---- 우: 다크 채팅 카드 ---- */
.c-ai-banner__chat {
  flex: 0 0 400px;
  width: 400px;
  height: 227px;                    /* 고정 — 케이스 순환 시 레이아웃 시프트 방지 */
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  align-items: stretch;
  background: #12121a;              /* Figma 3709:2835 다크 카드 (컴포넌트 한정값) */
  border-radius: var(--radius-card-lg);   /* 22 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.c-ai-banner__row { display: flex; width: 100%; }
.c-ai-banner__row--user { justify-content: flex-end; }
.c-ai-banner__row--ai { justify-content: flex-start; }

.c-ai-banner__bubble {
  font-size: 12.5px;
  font-weight: 400;                 /* Pretendard Regular */
  padding: 9px 12px;
}
.c-ai-banner__bubble--user {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 90%;
  line-height: 1.5;
  color: var(--color-white);
  background: var(--point-blue-1);
  border-radius: 12px 12px 2px 12px;   /* 꼬리 우하단 */
}
.c-ai-banner__bubble--ai {
  max-width: 272px;
  line-height: 1.55;
  color: #eee;                      /* Figma 3709:2835 (컴포넌트 한정값) */
  background: #23232f;              /* Figma 3709:2835 (컴포넌트 한정값) */
  border-radius: 12px 12px 12px 2px;   /* 꼬리 좌하단 */
  word-break: break-word;
}
.c-ai-banner__bubble-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.c-ai-banner__bubble-icon svg { display: block; }
.c-ai-banner__bubble-text { min-width: 0; word-break: break-word; }

/* ============================================
   반응형 (responsive.md — desktop-first max-width BP, 기존 파일과 동일 기준)
   ============================================ */
/* Tablet (≤1279): 2열 유지 + 채팅 카드 축소, 프롬프트 full-width */
@media (max-width: 1279px) {
  .c-ai-banner { padding: 28px 32px; }
  .c-ai-banner__prompt { width: 100%; }
  .c-ai-banner__chat { flex: 0 0 auto; width: clamp(300px, 40%, 400px); }
}
/* Mobile (≤767): 세로 stack (카피 위 / 채팅 아래) */
@media (max-width: 767px) {
  .s-ai-wallet { padding-top: var(--space-6); padding-bottom: var(--space-6); }   /* 24 */
  .c-ai-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    border-radius: 20px;
  }
  .c-ai-banner__eyebrow { font-size: 17px; }
  .c-ai-banner__title { font-size: clamp(22px, 6vw, 28px); }
  .c-ai-banner__prompt { width: 100%; }
  .c-ai-banner__chat { width: 100%; height: auto; min-height: 180px; }  /* 버블 공간 예약 → 점프 방지 */
}

/* Reduced Motion: 타이핑/순환은 JS 가 비활성(Case2 정적 렌더). CSS 는 hover 트랜지션만 정지. */
@media (prefers-reduced-motion: reduce) {
  .c-ai-banner__prompt,
  .c-ai-banner__chip { transition: none; }
}