@layer base, layout, components, utilities;

@layer base {
  :root {
    color-scheme: light;
    --bg: oklch(0.98 0.004 250);
    --bg-strong: oklch(0.95 0.01 250);
    --ink: oklch(0.2 0.01 260);
    --ink-soft: oklch(0.45 0.01 260);
    --accent: oklch(0.62 0.12 210);
    --accent-2: oklch(0.55 0.09 210);
    --card: oklch(0.99 0 0 / 0.9);
    --glow: 0 12px 30px oklch(0.62 0.12 210 / 0.18);
    --shadow-1: 0 18px 40px oklch(0.2 0.02 260 / 0.08);
    --shadow-2: 0 8px 18px oklch(0.2 0.02 260 / 0.06);
    --radius-xl: 28px;
    --radius-lg: 20px;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, #f9fafc 0%, var(--bg-strong) 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  h1,
  h2 {
    font-family: "Noto Serif KR", "Times New Roman", serif;
    letter-spacing: -0.01em;
  }

  h1 {
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    margin: 0 0 0.6rem;
  }

  h2 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    margin: 0 0 0.6rem;
  }

  ul {
    margin: 0;
    padding-inline-start: 1.2rem;
  }

  li {
    line-height: 1.6;
  }
}

@layer layout {
  .page {
    position: relative;
    z-index: 1;
    padding: 6vh clamp(1.5rem, 4vw, 4rem) 5rem;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .hero {
    max-width: 840px;
    display: grid;
    gap: 1rem;
    animation: rise 0.8s ease-out both;
  }

  .content {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
  }

  .draw-area {
    container-type: inline-size;
  }

  .info {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@layer components {
  .pill {
    align-self: start;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: oklch(0.96 0.02 210 / 0.9);
    font-size: 0.85rem;
    font-weight: 600;
    color: oklch(0.35 0.04 210);
    border: 1px solid oklch(0.85 0.04 210 / 0.6);
  }

  .lead {
    max-width: 58ch;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
  }

  .hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .ghost {
    border: 1px solid oklch(0.82 0.02 260);
    background: #ffffff;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
  }

  .ghost:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }

  .ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .hint {
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  .info-card {
    background: var(--card);
    padding: 1.5rem 1.6rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    border: 1px solid oklch(0.9 0.01 260);
  }
}

@layer utilities {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@container (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}