/* ============================================================================
   톡meet — Design Tokens (V7 명칭 통일)
   Deep Navy (#0F172A) + Muted Gold (#D4A574) + Pretendard
   신설: 2026-05-14 (Step 16-F4-1a — 사장님 확정 디자인)
   V7 (2026-05-15): 제품 명칭 "톡meet" 통일 (사장님 결정 #61)
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');


:root {
  /* === 주색 === */
  --color-primary: #0F172A;        /* Deep Navy — 본문 텍스트·헤더 */
  --color-primary-light: #1E293B;  /* Slate 800 — 카드 헤더·사이드바 */
  --color-primary-dark: #020617;   /* Slate 950 — 강조 */

  /* === 액센트 === */
  --color-accent: #D4A574;         /* Muted Gold — CTA·강조 */
  --color-accent-hover: #B8915F;   /* 진한 골드 — 호버 */
  --color-accent-light: #E8D4B5;   /* 옅은 골드 — 배경·태그 */

  /* === 배경 === */
  --color-bg: #F8FAFC;             /* Slate 50 — 메인 배경 */
  --color-bg-card: #FFFFFF;
  --color-bg-section: #F1F5F9;
  --color-bg-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);

  /* === 텍스트 === */
  --color-text: #0F172A;
  --color-text-muted: #475569;
  --color-text-light: #94A3B8;
  --color-text-on-dark: #F8FAFC;
  --color-text-on-dark-muted: #94A3B8;

  /* === 보더 === */
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* === 상태 === */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  /* === 그림자 === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-card-hover: 0 12px 24px -8px rgb(0 0 0 / 0.12);

  /* === 라운드 === */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* === 폰트 === */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --font-mono: 'JetBrains Mono', 'D2Coding', monospace;
}


/* === 기본 리셋 === */
body.dx-marketing {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}


/* === 공통 컴포넌트 === */
.btn-primary {
  display: inline-block;
  padding: 14px 28px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  background: transparent;
  color: var(--color-text-on-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.2s ease;
}
.input-field:focus {
  border-color: var(--color-accent);
}

.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}


/* === 사이드바·레이아웃 토글 (라우터 분기) ===
   body.marketing-layout 일 때 사이드바·상단바 숨김 + 좌측 여백 제거.
   index.html 구조: <div id="app-layout">(사이드바/헤더), <main id="main-content"> */
body.marketing-layout #app-layout { display: none !important; }
body.marketing-layout #main-content {
  padding-top: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}


/* ============================================================================
   Step 16-F4-1c V3 보강 (사장님 결정 #40~#43)
   ========================================================================== */

/* sticky 헤더 앵커 점프 보정 — 메뉴 클릭 시 헤더에 가려지지 않도록 */
section[id] {
  scroll-margin-top: 80px;
}

/* 헤더 메뉴 클릭 시 부드러운 스크롤 */
html {
  scroll-behavior: smooth;
}

/* 헤더 네비 링크 호버 색상 (인라인 style 의 color 보다 !important 로 우선) */
.nav-link:hover {
  color: var(--color-accent) !important;
}

/* 데스크탑 / 모바일 헤더 메뉴 토글 (768px 기준) */
@media (max-width: 768px) {
  #desktop-nav { display: none !important; }
  #desktop-actions { display: none !important; }
  #mobile-toggle { display: block !important; }
  /* AI 챗봇 섹션 2컬럼 → 1컬럼 */
  #chatbot div.chatbot-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ============================================================================
   V6 Hero 카피 시퀀스 페이드인 애니메이션 (사장님 결정 #58)
   - 배지(0.0s) → 1줄(0.2s) → 2줄(0.6s + Gold glow 1.3s) → 부제(1.1s) →
     캡션(1.4s) → CTA(1.7s) 순차 페이드인
   - prefers-reduced-motion: 접근성 대응 (애니메이션 OFF)
   ========================================================================== */
.hero-badge        { opacity: 0; transform: translateY(-10px); animation: heroFadeDown 0.5s ease-out 0.0s forwards; }
.hero-title-line-1 { opacity: 0; transform: translateY(-20px); animation: heroFadeDown 0.6s ease-out 0.2s forwards; }
.hero-title-line-2 { opacity: 0; transform: translateY(-20px);
                     animation: heroFadeDown 0.7s ease-out 0.6s forwards,
                                goldGlow 2.5s ease-in-out 1.3s 1; }
.hero-subtitle     { opacity: 0; animation: heroFadeIn 0.5s ease-out 1.1s forwards; }
.hero-caption      { opacity: 0; animation: heroFadeIn 0.5s ease-out 1.4s forwards; }
.hero-cta          { opacity: 0; transform: translateY(10px);
                     animation: heroFadeUp 0.6s ease-out 1.7s forwards; }

@keyframes heroFadeDown {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  to { opacity: 1; }
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes goldGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(212, 165, 116, 0); }
  50%      { text-shadow: 0 0 24px rgba(212, 165, 116, 0.6),
                          0 0 48px rgba(212, 165, 116, 0.3); }
}

/* 접근성: 모션 감소 선호 사용자 — 애니메이션 OFF (즉시 표시) */
@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero-title-line-1, .hero-title-line-2,
  .hero-subtitle, .hero-caption, .hero-cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ============================================================================
   V7 — Hero 이모지 + 부제 + 가치 제안 (V6 Final 부채 정리)
   합격 기준 #5: Hero 애니메이션 + 이모지 + 가치 제안 모두 표시
   변경 (V7, 2026-05-15, 사장님 결정 #61):
     · 클래스 표준화: hero-emoji-before/after → hero-emoji + hero-emoji--tired/happy
     · 인라인 style 제거 → 본 CSS 블록으로 집중
   ========================================================================== */

/* 페어 컨테이너 — flex 페어 + 시퀀스 페이드인 */
.hero-emoji-pair {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  opacity: 0;
  animation: heroFadeDown 0.5s ease-out 0.0s forwards;
}

/* 이모지 베이스 — 56px Gold 글리프 (애니메이션은 modifier 가 담당) */
.hero-emoji {
  font-size: 56px;
  line-height: 1;
  display: inline-block;
}

/* 😩 (지친) — shake 무한 반복 (페이드인 후 시작) */
.hero-emoji--tired {
  animation: heroEmojiShake 2.2s ease-in-out 0.6s infinite;
  transform-origin: center 70%;
}

/* 😊 (기쁜) — bounce 무한 반복 (shake 와 약간 어긋난 위상) */
.hero-emoji--happy {
  animation: heroEmojiBounce 2.2s ease-in-out 1.1s infinite;
  transform-origin: center bottom;
}

/* 화살표 — 페어 가운데, Gold 28px */
.hero-emoji-arrow {
  font-size: 28px;
  color: var(--color-accent);
  line-height: 1;
}

/* 부제 (V6 Final 보정 → V7 클래스화) — 15px White 65% */
.hero-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 12px;
}

/* 가치 제안 — 페이드인(캡션 직후) + 무한 반복 Gold glow */
.hero-value {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin: 0 0 40px;
  opacity: 0;
  animation: heroFadeIn 0.5s ease-out 1.5s forwards,
             heroValueGlow 2.8s ease-in-out 2.4s infinite;
}

@keyframes heroEmojiShake {
  0%, 60%, 100% { transform: translateX(0) rotate(0deg); }
  65%           { transform: translateX(-6px) rotate(-6deg); }
  72%           { transform: translateX(6px) rotate(6deg); }
  79%           { transform: translateX(-4px) rotate(-4deg); }
  86%           { transform: translateX(4px) rotate(4deg); }
  93%           { transform: translateX(-2px) rotate(-2deg); }
}

@keyframes heroEmojiBounce {
  0%, 50%, 100% { transform: translateY(0) scale(1); }
  60%           { transform: translateY(-16px) scale(1.06); }
  75%           { transform: translateY(0) scale(1); }
  85%           { transform: translateY(-8px) scale(1.03); }
  95%           { transform: translateY(0) scale(1); }
}

@keyframes heroValueGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(212, 165, 116, 0); }
  50%      { text-shadow: 0 0 18px rgba(212, 165, 116, 0.55),
                          0 0 36px rgba(212, 165, 116, 0.28); }
}

/* 접근성: 모션 감소 선호 — 이모지·가치 제안 무한 반복 OFF */
@media (prefers-reduced-motion: reduce) {
  .hero-emoji-pair,
  .hero-emoji,
  .hero-emoji--tired,
  .hero-emoji--happy,
  .hero-value {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    text-shadow: none !important;
  }
}


/* V5 브랜드 로고 (사장님 결정 #55) — 가로 배치 텍스트 로고
   "AI 회의록 · DX-VIEW" 패턴. 이미지 X.
   사용처: branding.js renderBrandLogo() — 모든 마케팅 view 헤더. */
.brand-logo {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  gap: 10px;
  flex-shrink: 0;
}
.brand-logo__main {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand-logo__sep {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.5;
  line-height: 1.1;
}
.brand-logo__sub {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.brand-logo__sub--dark  { color: rgba(255, 255, 255, 0.85); }
.brand-logo__sub--light { color: var(--color-text-muted); }

/* 모바일 (480px 이하) — 폰트 축소 */
@media (max-width: 480px) {
  .brand-logo { gap: 8px; }
  .brand-logo__main { font-size: 22px; }
  .brand-logo__sep  { font-size: 18px; }
  .brand-logo__sub  { font-size: 13px; }
}

/* V4 하루 시나리오 타임라인 — 640px 이하 원 축소 + 간격 좁힘 */
@media (max-width: 640px) {
  #daily-scenario .timeline-circle {
    width: 64px !important;
    height: 64px !important;
  }
  #daily-scenario .timeline-line {
    left: 31px !important;
  }
  #daily-scenario .timeline-row {
    gap: 16px !important;
  }
}


/* ============================================================================
   V8 Use Cases Layout — 사용 사례 섹션 (사장님 결정 #62, 2026-05-14)
   좌(1.5fr) 주 사용처 큰 카드 + 우(1fr) 부 사용처 3개 세로 스택
   ========================================================================== */

.use-cases {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-bg-section);
}

.use-cases .section-header {
  text-align: center;
  margin-bottom: 48px;
}

.use-cases .section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
}

.use-cases .section-sub {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0;
}

/* 2열 그리드: 좌 1.5fr (주 사용처) + 우 1fr (부 사용처) */
.use-cases-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* 좌측: 주 사용처 (큰 카드 + Gold 보더 강조) */
.use-case-main {
  background: rgba(212, 165, 116, 0.06);
  border: 1.5px solid var(--color-accent);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.use-case-main__icon {
  font-size: 48px;
  line-height: 1;
  flex-shrink: 0;
}

.use-case-main__body {
  flex: 1;
  min-width: 0;
}

.use-case-badge {
  display: inline-block;
  background: rgba(212, 165, 116, 0.18);
  color: var(--color-accent);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.use-case-main__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
}

.use-case-main__quote {
  margin: 0 0 16px;
  color: var(--color-text);
  font-style: italic;
  font-size: 14px;
}

.use-case-main__compare {
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.use-case-main__compare p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.use-case-main__compare .text-warning { color: var(--color-danger); }
.use-case-main__compare .text-accent  { color: var(--color-accent); }

.use-case-main__examples {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.use-case-main__highlight {
  margin: 0;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
}

/* 우측: 부 사용처 세로 스택 */
.use-cases-sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.use-case-sub {
  background: var(--color-bg-card);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  transition: transform 0.2s, box-shadow 0.2s;
}

.use-case-sub:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.use-case-sub__emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.use-case-sub__body {
  flex: 1;
  min-width: 0;
}

.use-case-sub__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.use-case-sub__quote {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 12px;
  font-style: italic;
}

.use-case-sub__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 11px;
}

/* 하단 통합 문구 */
.use-cases-footer {
  text-align: center;
  margin-top: 24px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* === 모바일 반응형 (≤768px: 1열 세로 스택) === */
@media (max-width: 768px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .use-case-main {
    flex-direction: column;
    gap: 12px;
  }

  .use-case-main__icon {
    font-size: 40px;
  }

  .use-case-main__title {
    font-size: 20px;
  }

  .use-cases-sub {
    gap: 10px;
  }

  .use-case-sub {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .use-cases {
    padding: 48px 16px;
  }

  .use-cases .section-header h2 {
    font-size: 26px;
  }
}

/* ─────────────────────────────────────────────────────────────
   AI 정리 진행 표시 (Hotfix #101, 2026-05-21)
   mm:ss 카운터 + asymptotic 진행률 + ETA
   ───────────────────────────────────────────────────────────── */

.ai-progress {
  padding: 14px 16px;
  background: linear-gradient(90deg, #F0F9FF 0%, #E0F2FE 100%);
  border-radius: 8px;
  border: 1px solid #BAE6FD;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-progress__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-progress__icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.ai-progress__icon--spin {
  animation: aiProgressSpin 1.6s linear infinite;
}

@keyframes aiProgressSpin {
  to { transform: rotate(360deg); }
}

.ai-progress__message {
  font-size: 14px;
  color: #0F1E3D;
  font-weight: 500;
}

.ai-progress__bar-wrapper {
  background: #E0F2FE;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.ai-progress__bar {
  background: linear-gradient(90deg, #0F1E3D 0%, #C9A961 100%);
  height: 100%;
  transition: width 0.4s ease-out;
}

.ai-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #64748B;
}

.ai-progress__elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0F1E3D;
}

.ai-progress__eta {
  font-size: 12px;
  color: #94A3B8;
}

/* 에러 상태 */
.ai-progress--error {
  background: #FEF2F2;
  border-color: #FCA5A5;
}

.ai-progress--error .ai-progress__message {
  color: #B91C1C;
}

.ai-progress__retry {
  align-self: flex-start;
  background: #0F1E3D;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.ai-progress__retry:hover {
  background: #1E293B;
}

/* 캐시 뱃지 (재방문 시) */
.ai-cache-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748B;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 500;
}

.ai-cache-badge.hidden { display: none; }

/* prefers-reduced-motion 가드 */
@media (prefers-reduced-motion: reduce) {
  .ai-progress__icon--spin { animation: none; }
  .ai-progress__bar { transition: none; }
}