:root {
  --bg: #0b0d12;
  --fg: #e9ecf2;
  --muted: #8a93a6;
  --card: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.09);
  --accent: #7aa2ff;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(50vw 50vw at 85% 10%, color-mix(in srgb, #c58af9 14%, transparent), transparent 70%),
    radial-gradient(50vw 50vw at 10% 90%, color-mix(in srgb, #7aa2ff 14%, transparent), transparent 70%);
  pointer-events: none;
}
.wrap { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- 히어로 ---------- */
.hero { padding: 22vh 0 10vh; }
.hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(48px, 10vw, 120px);
  margin: 0; letter-spacing: -0.04em; line-height: 1;
}
.hero h1 span {
  background: linear-gradient(90deg, #f5b971, #f28b82, #c58af9, #7aa2ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); font-size: clamp(16px, 2vw, 20px); margin: 20px 0 0; max-width: 560px; }

/* 히어로 아래 장식용 눈금자 */
.ruler {
  margin-top: 48px; height: 28px; position: relative;
  background-image: repeating-linear-gradient(90deg, var(--card-border) 0 1px, transparent 1px 10%);
  border-bottom: 1px solid var(--card-border);
}
.ruler::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, #f5b971, #c58af9, #7aa2ff);
  animation: grow 2.4s var(--ease) 0.3s forwards;
}
@keyframes grow { to { width: 100%; } }

/* ---------- 카테고리 섹션 ---------- */
.group { padding-bottom: 12vh; }
.group:last-of-type { padding-bottom: 20vh; }
.group-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 0 0 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}
.group-head h2 {
  font-family: "Space Grotesk", "Noto Sans KR", sans-serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 700;
  margin: 0; letter-spacing: -0.03em; line-height: 1.1;
}
.group-head p { color: var(--muted); margin: 0; flex: 1; min-width: 200px; }
.group-count {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px; letter-spacing: 0.2em; color: var(--muted);
}
.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.tl {
  --c: var(--accent);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 24px;
  min-height: 260px;
  transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
  opacity: 0; transform: translateY(24px);
  animation: rise 0.7s var(--ease) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }
.tl:hover {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 6%, transparent);
  transform: translateY(-4px);
}
.tl:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.tl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tl-emoji { font-size: 34px; line-height: 1; }
.tl-range {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  color: var(--c); font-size: 15px; font-variant-numeric: tabular-nums;
}
.tl h2 { font-size: 24px; margin: 18px 0 6px; letter-spacing: -0.01em; }
.tl p { color: var(--muted); margin: 0; font-size: 15px; flex: 1; }

/* 카드 하단: 이벤트 분포 미니 타임라인 */
.strip { position: relative; height: 18px; margin: 22px 0 10px; }
.strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--card-border);
}
.strip i {
  position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--dot);
  transition: transform 0.25s var(--ease);
}
.tl:hover .strip i { transform: scale(1.4); }
.tl-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.tl-meta .go { color: var(--c); transition: transform 0.25s var(--ease); }
.tl:hover .tl-meta .go { transform: translateX(4px); }

/* 아직 데이터가 없는 타임라인 */
.tl.soon {
  border-style: dashed; background: transparent; cursor: default;
  min-height: 160px; justify-content: space-between;
}
.tl.soon:hover { transform: none; border-color: var(--card-border); background: transparent; }
.tl.soon h2 { margin-top: 0; color: var(--muted); }
.tl.soon .tl-meta { margin-top: 18px; }

footer { color: var(--muted); font-size: 13px; padding: 0 0 40px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .tl { animation: none; opacity: 1; transform: none; }
  .ruler::after { animation: none; width: 100%; }
}

/* ---------- 언어 전환 (English | 한국어) ---------- */
.lang-switch {
  position: fixed; top: 12px; right: 16px; z-index: 60;
  display: flex; align-items: center; gap: 2px;
  padding: 4px 4px 4px 12px; border-radius: 999px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 500;
}
.lang-switch svg {
  width: 15px; height: 15px; margin-right: 6px;
  fill: none; stroke: var(--muted); stroke-width: 1.6;
}
.lang-switch a {
  padding: 6px 14px; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.lang-switch a[href]:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.lang-switch a.on { color: var(--bg); background: var(--fg); }