/* ============================================================
   SWS Landing Page — Page-Specific Styles
   히어로 목업, 데모 채팅, 소셜 프루프, 유즈케이스 등
   base design system (sws.css) 에 없는 커스텀 스타일
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. HERO — Layout Override (two-column)
   ──────────────────────────────────────────────────────────── */
.sws-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sws-space-16);
  align-items: center;
  text-align: left;
  padding: 140px var(--sws-space-6) var(--sws-space-24);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.sws-hero__content { z-index: 2; }

/* ────────────────────────────────────────────────────────────
   2. HERO — Trust Signals
   ──────────────────────────────────────────────────────────── */
.sws-hero__trust {
  display: flex;
  align-items: center;
  gap: var(--sws-space-4);
  margin-top: var(--sws-space-8);
  flex-wrap: wrap;
}
.sws-hero__trust-item {
  font-size: var(--sws-text-sm);
  color: var(--sws-text-muted);
}
.sws-hero__trust-divider {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sws-text-muted);
  opacity: .5;
}

/* ────────────────────────────────────────────────────────────
   3. HERO — Chat Widget Mockup
   ──────────────────────────────────────────────────────────── */
.sws-hero__visual {
  position: relative;
  z-index: 2;
}
.sws-hero__mockup {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
}
.sws-hero__mockup-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(102,126,234,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}
.sws-hero__mockup-card {
  background: rgba(13,13,37,.9);
  border: 1px solid rgba(102,126,234,.25);
  border-radius: var(--sws-border-radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(102,126,234,.1),
    0 20px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(20px);
  animation: float 8s ease-in-out infinite;
}
.sws-hero__mockup-header {
  display: flex;
  align-items: center;
  gap: var(--sws-space-2);
  padding: var(--sws-space-3) var(--sws-space-4);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sws-hero__mockup-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.sws-hero__mockup-dot--green { background: #43e97b; box-shadow: 0 0 6px #43e97b; }
.sws-hero__mockup-title {
  font-size: var(--sws-text-sm);
  font-weight: 600;
  color: var(--sws-text);
  flex: 1;
}
.sws-hero__mockup-status {
  font-size: 0.7rem;
  color: #43e97b;
}
.sws-hero__mockup-chat {
  padding: var(--sws-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sws-space-3);
  min-height: 180px;
}
.sws-hero__mockup-msg {
  display: flex;
  max-width: 85%;
}
.sws-hero__mockup-msg--bot { align-self: flex-start; }
.sws-hero__mockup-msg--user { align-self: flex-end; }
.sws-hero__mockup-msg-bubble {
  padding: var(--sws-space-3) var(--sws-space-4);
  border-radius: var(--sws-border-radius);
  font-size: var(--sws-text-sm);
  line-height: 1.6;
}
.sws-hero__mockup-msg--bot .sws-hero__mockup-msg-bubble {
  background: var(--sws-surface-2);
  color: var(--sws-text);
  border-bottom-left-radius: 4px;
}
.sws-hero__mockup-msg--user .sws-hero__mockup-msg-bubble {
  background: var(--sws-gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* Typing Indicator */
.sws-hero__mockup-msg-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--sws-space-3) var(--sws-space-4);
  background: var(--sws-surface-2);
  border-radius: var(--sws-border-radius);
  border-bottom-left-radius: 4px;
}
.typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sws-text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}
/* Chat Input */
.sws-hero__mockup-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sws-space-3) var(--sws-space-4);
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.sws-hero__mockup-input-placeholder {
  font-size: var(--sws-text-sm);
  color: var(--sws-text-muted);
}
.sws-hero__mockup-input-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sws-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* ────────────────────────────────────────────────────────────
   4. HERO — Floating Tags
   ──────────────────────────────────────────────────────────── */
.sws-hero__float {
  position: absolute;
  padding: 6px 14px;
  border-radius: var(--sws-border-radius-full);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  font-size: var(--sws-text-xs);
  font-weight: 700;
  color: var(--sws-text-secondary);
  z-index: 3;
  pointer-events: none;
}
.sws-hero__float--1 { top: 20%; right: 5%; animation-delay: 0s; }
.sws-hero__float--2 { bottom: 30%; right: 0%; animation-delay: 1.5s; }
.sws-hero__float--3 { bottom: 15%; right: 15%; animation-delay: 3s; }

/* ────────────────────────────────────────────────────────────
   5. HERO — Grid Background
   ──────────────────────────────────────────────────────────── */
.sws-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(102,126,234,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,126,234,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ────────────────────────────────────────────────────────────
   6. HERO — Step Visuals
   ──────────────────────────────────────────────────────────── */
.sws-hero__step-visual {
  margin-top: var(--sws-space-4);
  padding-top: var(--sws-space-4);
  border-top: 1px solid var(--sws-border);
}
.sws-hero__step-files {
  display: flex;
  gap: var(--sws-space-2);
  flex-wrap: wrap;
}
.sws-hero__step-palette {
  display: flex;
  gap: var(--sws-space-2);
}
.sws-hero__step-color {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c, #667eea);
  border: 2px solid rgba(255,255,255,.15);
  transition: transform .2s;
}
.sws-hero__step-color:hover { transform: scale(1.2); }

/* ────────────────────────────────────────────────────────────
   7. SOCIAL PROOF — Logos Strip
   ──────────────────────────────────────────────────────────── */
.sws-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sws-space-3);
  flex-wrap: wrap;
}
.sws-logos .sws-badge {
  font-size: var(--sws-text-sm);
  padding: var(--sws-space-2) var(--sws-space-4);
}

/* ────────────────────────────────────────────────────────────
   8. FEATURES — Grid Override
   ──────────────────────────────────────────────────────────── */
.sws-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sws-space-6);
}

/* ────────────────────────────────────────────────────────────
   9. DEMO — Layout
   ──────────────────────────────────────────────────────────── */
.sws-demo-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sws-space-8);
  align-items: start;
}
/* Demo Chat Card */
.sws-demo-chat {
  border-radius: var(--sws-border-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(102,126,234,.2);
  background: rgba(13,13,37,.95);
  box-shadow: 0 0 80px rgba(102,126,234,.06);
}
.sws-demo-chat__header {
  display: flex;
  align-items: center;
  gap: var(--sws-space-3);
  padding: var(--sws-space-4);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--sws-border);
}
.sws-demo-chat__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sws-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.sws-demo-chat__header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sws-demo-chat__header-title {
  font-size: var(--sws-text-sm);
  font-weight: 600;
  color: var(--sws-text);
}
.sws-demo-chat__header-status {
  font-size: var(--sws-text-xs);
  color: var(--sws-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sws-demo-chat__header-actions {
  display: flex;
  gap: var(--sws-space-1);
}
/* Demo Messages */
.sws-demo-chat__body {
  padding: var(--sws-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sws-space-4);
  min-height: 280px;
}
.sws-demo-chat__msg {
  display: flex;
  gap: var(--sws-space-2);
  max-width: 88%;
}
.sws-demo-chat__msg--bot { align-self: flex-start; }
.sws-demo-chat__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.sws-demo-chat__msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sws-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 4px;
}
.sws-demo-chat__msg-content {
  display: flex;
  flex-direction: column;
  gap: var(--sws-space-1);
}
.sws-demo-chat__msg-bubble {
  padding: var(--sws-space-3) var(--sws-space-4);
  border-radius: var(--sws-border-radius);
  font-size: var(--sws-text-sm);
  line-height: 1.65;
}
.sws-demo-chat__msg--bot .sws-demo-chat__msg-bubble {
  background: var(--sws-surface-2);
  color: var(--sws-text);
  border-bottom-left-radius: 4px;
}
.sws-demo-chat__msg--user .sws-demo-chat__msg-bubble {
  background: var(--sws-gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sws-demo-chat__msg-time {
  font-size: 0.65rem;
  color: var(--sws-text-muted);
  padding: 0 var(--sws-space-1);
}
.sws-demo-chat__msg-source {
  margin-top: var(--sws-space-1);
}
.sws-demo-chat__msg-source .sws-badge {
  font-size: 0.65rem;
}
/* Quick Actions */
.sws-demo-chat__quick-actions {
  display: flex;
  gap: var(--sws-space-2);
  flex-wrap: wrap;
  padding: 0 var(--sws-space-2);
}
/* Chat Footer / Input */
.sws-demo-chat__footer {
  padding: var(--sws-space-3) var(--sws-space-4);
  border-top: 1px solid var(--sws-border);
  display: flex;
  flex-direction: column;
  gap: var(--sws-space-2);
  align-items: center;
}
.sws-demo-chat__input-wrap {
  display: flex;
  gap: var(--sws-space-2);
  width: 100%;
}
.sws-demo-chat__input-wrap .sws-input {
  flex: 1;
  font-size: var(--sws-text-sm);
}
.sws-demo-chat__powered {
  opacity: .6;
}

/* ────────────────────────────────────────────────────────────
   10. DEMO — Info Panel
   ──────────────────────────────────────────────────────────── */
.sws-demo-info {
  display: flex;
  flex-direction: column;
  gap: var(--sws-space-6);
}
.sws-demo-info__title {
  font-size: var(--sws-text-lg);
  font-weight: 700;
  color: var(--sws-text);
}
.sws-demo-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sws-space-5);
}
.sws-demo-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sws-space-3);
}
.sws-demo-info__item .sws-feature__icon {
  font-size: 1.3rem;
  margin-top: 2px;
}
.sws-demo-info__item strong {
  display: block;
  font-size: var(--sws-text-sm);
  font-weight: 600;
  color: var(--sws-text);
  margin-bottom: 2px;
}
.sws-demo-info__item p {
  font-size: var(--sws-text-sm);
  color: var(--sws-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   11. USE CASES
   ──────────────────────────────────────────────────────────── */
.sws-usecases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sws-space-4);
}
.sws-usecase {
  display: flex;
  align-items: center;
  gap: var(--sws-space-4);
  padding: var(--sws-space-5);
  background: var(--sws-surface-1);
  border: 1px solid var(--sws-border);
  border-radius: var(--sws-border-radius-md);
  transition: all var(--sws-duration) var(--sws-ease);
  text-decoration: none;
  color: inherit;
}
.sws-usecase:hover {
  background: var(--sws-surface-hover);
  border-color: rgba(102,126,234,.3);
  transform: translateY(-2px);
}
.sws-usecase__icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.sws-usecase__content { flex: 1; }
.sws-usecase__title {
  font-size: var(--sws-text-base);
  font-weight: 600;
  color: var(--sws-text);
  margin-bottom: 4px;
}
.sws-usecase__desc {
  font-size: var(--sws-text-sm);
  color: var(--sws-text-secondary);
  line-height: 1.5;
  margin: 0;
}
.sws-usecase__arrow {
  color: var(--sws-text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.sws-usecase:hover .sws-usecase__arrow {
  transform: translateX(4px);
  color: var(--sws-primary);
}

/* ────────────────────────────────────────────────────────────
   12. CTA SECTION
   ──────────────────────────────────────────────────────────── */
.sws-cta {
  position: relative;
  background: var(--sws-gradient);
  border-radius: var(--sws-border-radius-xl, 24px);
  padding: var(--sws-space-16) var(--sws-space-8);
  text-align: center;
  overflow: hidden;
}
.sws-cta__glow {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(240,147,251,.2), transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,.1), transparent 50%);
  pointer-events: none;
}
.sws-cta__headline {
  font-size: clamp(var(--sws-text-2xl), 4vw, var(--sws-text-4xl));
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--sws-space-4);
  position: relative;
  z-index: 1;
}
.sws-cta__subtitle {
  font-size: var(--sws-text-lg);
  color: rgba(255,255,255,.8);
  margin-bottom: var(--sws-space-8);
  position: relative;
  z-index: 1;
}
.sws-cta__note {
  font-size: var(--sws-text-sm);
  color: rgba(255,255,255,.6);
  margin-top: var(--sws-space-4);
  position: relative;
  z-index: 1;
}
/* White button on gradient background */
.sws-btn--white {
  background: #fff;
  color: var(--sws-primary);
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.sws-btn--white:hover {
  background: rgba(255,255,255,.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,0,0,.2);
}

/* ────────────────────────────────────────────────────────────
   13. UTILITY — extras
   ──────────────────────────────────────────────────────────── */
.text-gradient {
  background: var(--sws-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-center { text-align: center; }
.text-muted { color: var(--sws-text-muted); }
.text-sm { font-size: var(--sws-text-sm); }
.text-xs { font-size: var(--sws-text-xs); }
.mt-8 { margin-top: var(--sws-space-8); }
.mb-8 { margin-bottom: var(--sws-space-8); }

/* ────────────────────────────────────────────────────────────
   14. RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sws-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 120px;
    min-height: auto;
  }
  .sws-hero__actions { justify-content: center; }
  .sws-hero__trust { justify-content: center; }
  .sws-hero__visual { order: 2; }
  .sws-hero__float { display: none; }

  .sws-features { grid-template-columns: repeat(2, 1fr); }
  .sws-demo-layout { grid-template-columns: 1fr; }
  .sws-usecases { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sws-hero {
    padding-top: 100px;
    gap: var(--sws-space-8);
  }
  .sws-hero__title { font-size: var(--sws-text-3xl); }
  .sws-hero__actions { flex-direction: column; }
  .sws-hero__actions .sws-btn { width: 100%; }

  .sws-features { grid-template-columns: 1fr; }

  .sws-cta {
    padding: var(--sws-space-10) var(--sws-space-5);
    border-radius: var(--sws-border-radius-lg);
  }

  .sws-hero__mockup { max-width: 100%; }
}