@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

@import "tailwindcss";

/* ─── Design Tokens ───────────────────────────────────────────────── */
@theme {
  /* Navy  ─  950(darkest) · 900 · 800 · 50(lightest)
     짙은 네이비 계열. 본문 텍스트, 다크 섹션 배경, 그라디언트 끝 */
  --color-navy-950: #021341;
  --color-navy-900: #0A1128;
  --color-navy-800: #1A2B5E;
  --color-navy-50:  #F4F6FB;

  /* Violet  ─  700(deep) · 500(accent)
     퍼플 계열. 그라디언트 시작(700), 활성 상태·아이콘(500) */
  --color-violet-700: #4F1DA1;
  --color-violet-500: #6C5CE7;
  /* Marketing accents (CTA / Process / Hero blobs — shared with DEMO) */
  --color-marketing-cream: #fff3eb;
  --color-marketing-lilac: #e4cfff;
  --color-marketing-ice:   #f5f9ff;
  --color-lavender-100: #f3e8ff;
  --color-lavender-200: #e9d4ff;
  --color-lavender-300: #d8b4fe;
  --color-violet-hover: #af90ff;
  /* Hero radial + blob tints */
  --color-hero-wash-start: #e0e7ff;
  --color-hero-wash-mid: #faf5ff;
  --color-hero-wash-end: #fdf2f8;
  --color-marketing-blush: #fbcfe8;

  /* Neutral  ─  90(darkest) · 80 · 70 · 60 · 40 · 30 · 20 · 10 · 00(white) */
  --color-neutral-90: #151515;
  --color-neutral-80: #303030;
  --color-neutral-70: #606060;
  --color-neutral-60: #808080;
  --color-neutral-40: #DADBDE;
  --color-neutral-30: #EAEBEF;
  --color-neutral-20: #F0F1F4;
  --color-neutral-10: #F7F8FA;
  --color-neutral-00: #FFFFFF;

  /* Status  ─  {critical | warning | good | info} × {bg | text | border | dot}
     파스텔 시맨틱 팔레트. 원색(빨강·초록) 사용 금지 */
  --color-status-critical-bg:     #FFF0F0;
  --color-status-critical-text:   #7C3A4B;
  --color-status-critical-border: #F5D5DC;
  --color-status-critical-dot:    #D4889A;

  --color-status-warning-bg:      #FFF6ED;
  --color-status-warning-text:    #7C5C3A;
  --color-status-warning-border:  #F5E0C5;
  --color-status-warning-dot:     #D4A872;

  --color-status-good-bg:         #F3F0FF;
  --color-status-good-text:       #4A3A7C;
  --color-status-good-border:     #D5CDF5;
  --color-status-good-dot:        #9B8AD4;

  --color-status-info-bg:         #EFF0FF;
  --color-status-info-text:       #3A3F7C;
  --color-status-info-border:     #C5CBF5;
  --color-status-info-dot:        #7A84D4;

  /* Typography */
  --font-sans:  "Pretendard Variable", "Pretendard", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", ui-serif, Georgia, Cambria, serif;
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Animation */
  --animate-blob:           blob 7s infinite;
  --animate-blob-large:     blob-large 25s infinite ease-in-out;
  --animate-fade-in-up:     fade-in-up   0.6s ease-out both;
  --animate-fade-in-left:   fade-in-left  0.6s ease-out both;
  --animate-fade-in-right:  fade-in-right 0.6s ease-out both;
  --animate-fade-in-scale:  fade-in-scale 0.8s ease-out both;
}

/* ─── Keyframes ───────────────────────────────────────────────────── */
@keyframes blob {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes blob-large {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(8vw, -8vh) scale(1.1); }
  66%  { transform: translate(-8vw, 8vh) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* fade + slide-up: replaces framer-motion entrance (opacity 0→1, y 20→0) */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fade + slide-left/right: whileInView x:-20→0 / x:20→0 */
@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Animation Delays ────────────────────────────────────────────── */
/* UI entrance stagger (short) */
.animation-delay-100  { animation-delay: 0.1s; }
.animation-delay-200  { animation-delay: 0.2s; }
.animation-delay-300  { animation-delay: 0.3s; }
.animation-delay-400  { animation-delay: 0.4s; }
.animation-delay-500  { animation-delay: 0.5s; }

/* Blob float delays (long) */
.animation-delay-2000  { animation-delay: 2s; }
.animation-delay-4000  { animation-delay: 4s; }
.animation-delay-7000  { animation-delay: 7s; }
.animation-delay-14000 { animation-delay: 14s; }

/* ─── Utility Classes ─────────────────────────────────────────────── */

/* 라이트 섹션 헤딩 그라디언트 텍스트
   - base의 h2 { color: navy }와 함께 쓸 때 color를 반드시 투명으로 두어야 그라데이션이 보임
   - background 단축 속성은 clip을 리셋할 수 있어 background-image만 사용 */
.text-gradient {
  color: transparent;
  background-image: linear-gradient(to right, var(--color-navy-900), #3b5998);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
 * 그라데이션 제목(h2)과 같은 레이아웃 안의 뱃지·버튼:
 * WebKit 계열에서 -webkit-text-fill-color 가 상속되면 text-* 만으로는 글씨가 비어 보일 수 있음.
 * currentColor 는 해당 요소의 (Tailwind) color 값과 맞춘다.
 */
.solid-text-paint {
  -webkit-text-fill-color: currentColor !important;
  /* bg-* 와 같은 요소에 clip:text가 남으면 글리프가 배경으로만 채워져 비어 보일 수 있음 */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* 반투명 글래스 카드 — 랜딩 섹션 */
.glass-card {
  @apply bg-white/70 backdrop-blur-xl border border-white/40 rounded-2xl;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* 다크 섹션 위 화이트 카드 사선 그림자 */
.card-shadow       { box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.06); }
.card-shadow:hover { box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.09); }

/* 브랜드 그라디언트 Primary 버튼 */
.btn-primary {
  @apply cursor-pointer bg-gradient-to-r from-violet-700 to-navy-950 text-white rounded-full font-medium transition-all;
}

/* ─── Typography Scale ────────────────────────────────────────────── */
/* Display */
.display-72 { font-family: var(--font-serif); font-size: 72px; font-weight: 700; line-height: 1.1;  letter-spacing: -1.44px; }
.display-48 { font-family: var(--font-serif); font-size: 48px; font-weight: 700; line-height: 1.1;  letter-spacing: -0.96px; }
.display-36 { font-family: var(--font-serif); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.72px; }

/* Headline */
.headline-30 { font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.6px; }
.headline-24 { font-family: var(--font-serif); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.48px; }
.headline-20 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.4px; }

/* Title */
.title-20          { font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.4px;  }
.title-18          { font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.36px; }
.title-18-semibold { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.36px; }
.title-16          { font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.32px; }
.title-14          { font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -0.28px; }

/* Body */
.body-20        { font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 1.6; letter-spacing: -0.4px;  }
.body-20-medium { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px;  }
.body-18        { font-family: var(--font-sans); font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: -0.36px; }
.body-16        { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px; }
.body-16-medium { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.32px; }
.body-14        { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px; }
.body-14-medium { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -0.28px; }

/* Label */
.label-12          { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.24px; }
.label-12-semibold { font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: -0.24px; }

/* Responsive body: 18px → 20px at md (text-lg / text-xl) */
.body-18-md-20 {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: -0.36px;
  font-size: 1.125rem;
}
@media (min-width: 768px) {
  .body-18-md-20 {
    font-size: 1.25rem;
    letter-spacing: -0.4px;
  }
}

/* Responsive sans title: 18px → 20px at md (module card titles 등) */
.title-18-md-20 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.36px;
  font-size: 1.125rem;
}
@media (min-width: 768px) {
  .title-18-md-20 {
    font-size: 1.25rem;
    letter-spacing: -0.4px;
  }
}

/* Responsive list body: 14px → 16px at md */
.body-14-md-16 {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: -0.28px;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .body-14-md-16 {
    font-size: 1rem;
    letter-spacing: -0.32px;
  }
}

/* ─── Base ────────────────────────────────────────────────────────── */
@layer base {
  html, body {
    @apply font-sans text-neutral-80 bg-neutral-10 antialiased;
    font-style: normal;
    line-height: normal;
    min-height: 100dvh;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-navy-900;
  }
}