/* static/css/tokens.css — src/app/globals.css 디자인 토큰 1:1 포팅 (라벤더 프리미엄) */

:root {
  --bg: transparent;
  --surface: #ffffff;
  --surface-2: #f5f3ff;
  --text-primary: #1e1b4b;
  --text-secondary: #6b7280;
  --border: rgba(124, 58, 237, 0.08);
  --accent: #7c3aed;
  --accent-hover: #5b21b6;
  --accent-soft: #f5f3ff;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --shadow-sm: 0 1px 3px rgba(30, 27, 75, 0.08);
  --shadow-md: 0 8px 32px rgba(76, 29, 149, 0.10);
  --shadow-lg: 0 16px 56px rgba(76, 29, 149, 0.13);
  --shadow-card: 0 0 0 1px rgba(124,58,237,.04), 0 2px 8px rgba(76,29,149,.05), 0 12px 28px rgba(76,29,149,.07);
  --header-height: 64px;
  --lilac-50:  #faf9ff;
  --lilac-100: #f5f3ff;
  --lilac-200: #ede9fe;
  --lilac-300: #ddd6fe;
  --lilac-400: #c4b5fd;

  --tlogo-c1: #7c3aed;
  --tlogo-c2: #8b5cf6;
  --tlogo-c3: #a78bfa;
  --tlogo-c4: #5b21b6;
  --tlogo-glow: rgba(124, 58, 237, 0.40);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-pretendard: 'Pretendard Variable';
  --font-inter: 'Inter Variable';
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-pretendard), var(--font-inter), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.6;
  transition: color 200ms ease;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, select, button { font-family: inherit; }
::selection { background-color: var(--accent-soft); color: var(--text-primary); }

.container-max {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 767px) {
  .container-max { padding-inline: 16px; }
}

.dropzone-active {
  border-color: var(--accent) !important;
  background-color: var(--accent-soft) !important;
}

.progress-bar { transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  background-color: var(--surface-2);
  border-radius: 6px;
}

.queue-pending  { border-left: 3px solid var(--border); }
.queue-running  { border-left: 3px solid var(--accent); }
.queue-done     { border-left: 3px solid var(--success); }
.queue-error    { border-left: 3px solid var(--error); }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes check-draw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
.page-enter { animation: fade-in 80ms ease-out; }

/* 첫 화면(뷰포트 최상단)에서는 푸터가 절대 보이지 않도록 main이 최소한
   헤더를 제외한 뷰포트 전체 높이를 차지한다 — 콘텐츠가 짧은 페이지에서도
   푸터는 한 번 스크롤해야 나타난다. svh는 모바일 주소창 확장 기준 최소
   뷰포트라 전 해상도·모바일에서 안전(미지원 구형은 vh 폴백). */
main.page-enter { min-height: calc(100vh - var(--header-height)); }
main.page-enter { min-height: calc(100svh - var(--header-height)); }

@keyframes mega-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mega-menu-enter { animation: mega-slide-down 200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ─── Aurora 배경 드리프트 ─── */
@keyframes aurora-drift-1 {
  0%, 100% { transform: translate(0%, 0%)    scale(1);    }
  25%       { transform: translate(8%, 15%)   scale(1.1);  }
  50%       { transform: translate(-5%, 25%)  scale(0.94); }
  75%       { transform: translate(12%, -6%)  scale(1.06); }
}
@keyframes aurora-drift-2 {
  0%, 100% { transform: translate(0%, 0%)    scale(1);    }
  33%       { transform: translate(-11%, 9%)  scale(1.08); }
  66%       { transform: translate(9%, -17%) scale(0.92); }
}
@keyframes aurora-drift-3 {
  0%, 100% { transform: translate(0%, 0%)   scale(1);    }
  40%       { transform: translate(13%, 7%)  scale(1.06); }
  80%       { transform: translate(-7%, -11%) scale(0.96);}
}
@keyframes float-y {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-10px); }
}

/* hover 절제 원칙: glass-card는 배경 역할 래퍼라 hover 없음.
   클릭형 카드(.tool-card)만 components.css에서 hover를 가진다. */
.glass-card {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.glass-dropzone {
  background: var(--lilac-100);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-dropzone:hover { background: var(--lilac-200); }
.glass-dropzone-active { background: var(--lilac-200) !important; }

.glass-header {
  background: rgba(250, 249, 255, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.glass-header-scrolled {
  background: rgba(250, 249, 255, 0.94);
  border-bottom-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.09), 0 8px 28px rgba(76, 29, 149, 0.08);
}

.float-badge {
  animation: float-y 4s ease-in-out infinite;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; transform: none !important; }
  .tool-card { transition: none !important; }
  .float-badge { animation: none !important; }
}

@keyframes page-hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero-title { animation: page-hero-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.page-hero-desc { animation: page-hero-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
@media (prefers-reduced-motion: reduce) {
  .page-hero-title, .page-hero-desc { animation: none; }
}