@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@400;600;700&display=swap");

:root {
  --ink-900: #0b1220;
  --ink-700: #1f2937;
  --ink-500: #475569;
  --sky-50: #f8fafc;
  --sky-100: #eef2f7;
  --sky-200: #e2e8f0;
  --sand-50: #fbfbf8;
  --sea-600: #0f766e;
  --accent-500: #0ea5a4;
  --card-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

body {
  font-family: "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: var(--ink-900);
}

.heading-serif {
  font-family: "Noto Serif KR", serif;
  letter-spacing: -0.02em;
}

.site-bg {
  background:
    radial-gradient(80% 60% at 10% -10%, rgba(14, 165, 164, 0.12) 0%, rgba(14, 165, 164, 0) 60%),
    radial-gradient(70% 60% at 100% 0%, rgba(15, 118, 110, 0.15) 0%, rgba(15, 118, 110, 0) 65%),
    linear-gradient(180deg, var(--sky-50) 0%, var(--sky-100) 55%, var(--sky-200) 100%);
  background-attachment: fixed;
}

.hero-scenery {
  background:
    linear-gradient(140deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 60%, rgba(14, 165, 164, 0.4) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 520' preserveAspectRatio='none'><rect width='1600' height='520' fill='%230f172a'/><path d='M0 420L160 340L320 390L480 300L640 380L800 320L960 400L1120 330L1280 410L1440 350L1600 400L1600 520L0 520Z' fill='%231e293b'/><path d='M0 460L200 380L400 450L600 360L800 440L1000 370L1200 450L1400 390L1600 440L1600 520L0 520Z' fill='%23334155'/></svg>");
  background-size: cover;
  background-position: center;
}

.glass-bar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px);
}

.card-surface {
  background: white;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: var(--card-shadow);
}

.chip {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 118, 110, 0.08);
  color: var(--sea-600);
}

.primary-btn {
  background: var(--ink-900);
  color: #fff;
}

.primary-btn:hover {
  opacity: 0.92;
}

.secondary-btn {
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: #fff;
}

.secondary-btn:hover {
  background: rgba(248, 250, 252, 0.9);
}

.tile {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(248, 250, 252, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
}