@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

:root {
  --bg-dark: #050505;
  --bg-panel: rgba(10, 10, 10, 0.6);
  --border-light: rgba(255, 255, 255, 0.08);
  --text-main: #f5f5f7;
  --text-muted: #888888;
  
  --ferrari-red: #e0121a;
  --ferrari-glow: rgba(224, 18, 26, 0.3);
  --merc-teal: #62c3e4;
  --merc-glow: rgba(98, 195, 228, 0.3);

  /* 2026 SEASON — Black Apex / White Fang */
  --apex-red: #ff2d2d;
  --apex-glow: rgba(255, 45, 45, 0.32);
  --fang-white: #eaeaf0;
  --fang-glow: rgba(255, 255, 255, 0.28);
  
  --glass-bg: rgba(15, 15, 15, 0.5);
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);
  --glass-blur: blur(32px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Pretendard', 'Outfit', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 10% 0%, rgba(224, 18, 26, 0.03), transparent 40%),
              radial-gradient(circle at 90% 100%, rgba(98, 195, 228, 0.03), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 40px); position: relative; z-index: 1; }

/* ═══════════ TYPOGRAPHY ═══════════ */
.eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.headline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  color: #ffffff;
}

/* ═══════════ ANIMATIONS ═══════════ */

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes floatUp { 
  0% { opacity: 0; transform: translateY(40px); filter: blur(4px); } 
  100% { opacity: 1; transform: translateY(0); filter: blur(0); } 
}

/* ═══════════ TOP LIVE BAR ═══════════ */
.live-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 16px 24px;
  display: flex; justify-content: center; align-items: center; gap: 16px;
  font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px;
}
.live-dot {
  width: 6px; height: 6px; background: var(--ferrari-red); border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite; box-shadow: 0 0 12px var(--ferrari-glow);
}
.live-bar .live-text { color: var(--ferrari-red); }
.live-bar .live-divider { color: #444; }
.live-bar .live-info { color: #aaa; }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 700px;
  background: #000; overflow: hidden; display: flex; flex-direction: column;
}
.hero-video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(30px) brightness(0.25) saturate(1.1); transform: scale(1.1); z-index: 0;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; opacity: 0.6; mix-blend-mode: screen; }
.hero-image-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; z-index: 1;
  opacity: 0;
  animation: heroImageFadeIn 2.4s cubic-bezier(.16,1,.3,1) .2s forwards;
}
@keyframes heroImageFadeIn {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 0.92; transform: scale(1); }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

.hero-top-row {
  position: absolute; top: clamp(60px, 8vw, 80px); left: 0; right: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(30px, 6vw, 60px); opacity: 0.8;
}
.hero-top-row .left, .hero-top-row .right {
  font-size: 10px; font-weight: 700; letter-spacing: 4px; color: #fff;
}
.hero-top-row .left { color: var(--ferrari-red); text-shadow: 0 0 16px var(--ferrari-glow); }
.hero-top-row .right { color: var(--merc-teal); text-shadow: 0 0 16px var(--merc-glow); }

.hero-content {
  position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 100px 24px 80px;
}

/* Phase 1: Triggers immediately on load (While video is playing) */
.hero-content .release-stamp { opacity: 0; animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.hero-content .update-label  { opacity: 0; animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both; }
.hero-content .hero-title    { opacity: 0; animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s both; }
.hero-top-row { opacity: 0; animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }

/* Phase 2: Triggers when .revealed is added via JS (When video ends) */
.hero-content .hero-tagline  { opacity: 0; transform: translateY(40px); filter: blur(4px); }
.hero-content .hero-cta      { opacity: 0; transform: translateY(40px); filter: blur(4px); }
.scroll-hint { opacity: 0; }

.hero.revealed .hero-content .hero-tagline  { animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
.hero.revealed .hero-content .hero-cta      { animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }
.hero.revealed .scroll-hint { animation: floatUp 1s ease 0.8s both, bounce 2.5s ease-in-out 1s infinite; }

.release-stamp {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 20px; background: rgba(255,255,255,0.03); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 40px;
  color: #fff; font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px;
  margin-bottom: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.release-stamp .stamp-dot { width: 4px; height: 4px; background: #fff; border-radius: 50%; animation: pulse 2s infinite; }

.update-label { font-size: 11px; color: var(--text-muted); letter-spacing: 8px; font-weight: 500; margin-bottom: 24px; text-transform: uppercase; }

.hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 500;
  letter-spacing: clamp(2px, .35vw, 5px);
  color: #fff;
  margin-bottom: 160px;
  text-indent: clamp(2px, .35vw, 5px); /* offset the tracking so it centers properly */
  max-width: 92%;
  margin-left: auto; margin-right: auto;
  line-height: 1.15;
}

/* Redesigned VS block to prevent squishing */
.hero-subtitle {
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 40px);
  font-family: 'Outfit', sans-serif; font-size: clamp(40px, 8vw, 90px); font-weight: 900; letter-spacing: -2px; line-height: 1;
  margin-bottom: 48px; width: 100%; flex-wrap: wrap;
}
.hero-subtitle .red { color: #fff; text-shadow: 0 0 40px var(--ferrari-glow); }
.hero-subtitle .teal { color: #fff; text-shadow: 0 0 40px var(--merc-glow); }

.hero-subtitle .vs {
  font-family: 'Cinzel', serif; font-size: clamp(18px, 4vw, 28px); font-weight: 400; color: rgba(255,255,255,0.4); 
  font-style: italic; letter-spacing: 2px; flex-shrink: 0; padding: 0 10px;
}

.hero-tagline { font-family: 'Pretendard', sans-serif; font-size: 14px; color: #888; letter-spacing: 4px; font-weight: 400; margin-bottom: 56px; }

/* ═══════════ CTA ═══════════ */
.hero-cta { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px; height: 60px;
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px;
  background: rgba(5, 5, 5, 0.4); backdrop-filter: blur(24px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden; z-index: 1; cursor: pointer; color: #fff;
  text-align: center;
}
.btn::after { 
  content: ''; position: absolute; inset: 0; z-index: -1; 
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
}
.btn.cta-red { border-left: 3px solid var(--ferrari-red); }
.btn.cta-red::after { background: var(--ferrari-red); }
.btn.cta-red:hover { border-color: var(--ferrari-red); box-shadow: 0 10px 40px var(--ferrari-glow); color: #fff; letter-spacing: 6px; }
.btn.cta-red:hover::after { transform: scaleY(1); transform-origin: top; }

.btn.cta-teal { border-right: 3px solid var(--merc-teal); }
.btn.cta-teal::after { background: var(--merc-teal); }
.btn.cta-teal:hover { border-color: var(--merc-teal); box-shadow: 0 10px 40px var(--merc-glow); color: #000; letter-spacing: 6px; }
.btn.cta-teal:hover::after { transform: scaleY(1); transform-origin: top; }

.scroll-hint {
  position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; z-index: 4;
  font-family: 'Outfit', sans-serif; font-size: 9px; color: #666; letter-spacing: 6px; font-weight: 600;
  animation: bounce 2.5s ease-in-out infinite; mix-blend-mode: screen;
}

/* ═══════════ SECTIONS ═══════════ */
section { padding: clamp(100px, 15vw, 160px) 0; position: relative; border-bottom: 1px solid rgba(255,255,255,0.03); }
.section-head { text-align: center; margin-bottom: clamp(60px, 10vw, 100px); }
.section-head .eyebrow { margin-bottom: 24px; display: inline-block; color: var(--text-muted); }
.section-title { margin-top: 16px; }
.section-title .accent { font-style: italic; font-weight: 300; letter-spacing: 0; color: #fff; }

/* ═══════════ DRIVERS SELECT ═══════════ */
.split { background: #000; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 40px); max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }
.driver-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 4px;
  cursor: pointer; text-decoration: none; display: block; border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  background: #050505;
}
.driver-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,0.15); box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
.driver-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; filter: contrast(1.1) brightness(0.8); opacity: 0.7;
}
.driver-card:hover img { transform: scale(1.05); filter: contrast(1.15) brightness(0.9); opacity: 1; }
.driver-overlay { position: absolute; inset: 0; z-index: 1; transition: opacity 0.7s ease; }
.driver-card.damian .driver-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 40%, rgba(180, 10, 10, 0.8) 100%); opacity: 0.8; }
.driver-card.erik .driver-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 40%, rgba(40, 110, 150, 0.8) 100%); opacity: 0.8; }
.driver-card:hover .driver-overlay { opacity: 1; }

.driver-new-tag {
  position: absolute; top: 32px; left: 32px; z-index: 3;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2);
  font-family: 'Outfit', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 4px; padding: 6px 16px; border-radius: 40px;
}

.driver-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 48px; transform: translateY(16px); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.driver-card:hover .driver-content { transform: translateY(0); }
.driver-team { font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 6px; margin-bottom: 16px; opacity: 0.8; }
.driver-card.damian .driver-team { color: var(--ferrari-red); }
.driver-card.erik .driver-team { color: var(--merc-teal); }
.driver-name { font-family: 'Outfit', sans-serif; font-size: clamp(36px, 5vw, 56px); font-weight: 900; color: #fff; letter-spacing: -1.5px; line-height: 1; margin-bottom: 12px; }
.driver-nickname { font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 4px; font-weight: 500; margin-bottom: 32px; }
.driver-quote {
  font-size: 14px; color: #fff; font-style: italic; font-weight: 300; line-height: 1.8;
  padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.2);
  opacity: 0; transform: translateY(16px); transition: all 0.5s ease 0.1s;
}
.driver-card:hover .driver-quote { opacity: 1; transform: translateY(0); border-color: #fff; }
.driver-cta {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 4px; color: #fff;
  opacity: 0; transition: all 0.5s ease 0.2s;
}
.driver-card:hover .driver-cta { opacity: 1; }
.driver-cta::after { content: '→'; transition: transform 0.3s ease; }
.driver-card:hover .driver-cta::after { transform: translateX(8px); }

/* ═══════════ ABOUT ═══════════ */
.about { background: #020202; }
.about-glass {
  max-width: 900px; margin: 0 auto;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0 40px 60px;
}
.about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(max-width:768px){ .about-glass { border-left:none; border-top: 1px solid rgba(255,255,255,0.08); padding-left:0; padding-top:40px; } }
.about-body { font-size: clamp(15px, 2.5vw, 17px); color: var(--text-muted); line-height: 2.2; font-weight: 300; }
.about-body strong { color: #fff; font-weight: 500; }
.about-body .red { color: var(--ferrari-red); font-weight: 500; }
.about-body .teal { color: var(--merc-teal); font-weight: 500; }

/* ═══════════ COMMANDS ═══════════ */
.commands { background: #000; }
.commands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; max-width: 1000px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); }
.command-chip { 
  padding: 48px 32px; background: #050505; text-align: center; 
  transition: background 0.4s ease; 
}
.command-chip:hover { background: #0a0a0a; }
.command-chip .key { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 2px; margin-bottom: 16px; display: inline-block; }
.command-chip .desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-weight: 300; }

/* ═══════════ PATCH NOTES ═══════════ */
.patch { background: #030303; border-bottom: none; }
.patch-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05);
}
.patch-card {
  padding: 48px; background: #050505;
  transition: background 0.4s ease; position: relative;
}
.patch-card:hover { background: #0a0a0a; }
.patch-card .icon { font-size: 24px; margin-bottom: 24px; display: inline-block; filter: grayscale(1); transition: filter 0.5s ease; }
.patch-card:hover .icon { filter: grayscale(0); }
.patch-card .title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; letter-spacing: 0px; }
.patch-card .desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-weight: 300; }
.patch-card .badge { position: absolute; top: 48px; right: 48px; font-family: 'Outfit', sans-serif; font-size: 9px; color: rgba(255,255,255,0.3); letter-spacing: 4px; font-weight: 700; }
.patch-card:hover .badge { color: var(--ferrari-red); }

/* ═══════════ SUB-PAGE STYLES ═══════════ */
.back-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05); padding: 24px 40px;
  display: flex; justify-content: space-between; align-items: center;
}
.back-btn { font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 12px; transition: color 0.3s; }
.back-btn:hover { color: #fff; }
.nav-rivals { display: flex; gap: 32px; font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; }
.nav-rivals a { color: rgba(255,255,255,0.4); transition: color 0.3s; position: relative; }
.nav-rivals a.ferrari:hover, .nav-rivals a.ferrari.active { color: #fff; }
.nav-rivals a.merc:hover, .nav-rivals a.merc.active { color: #fff; }
.nav-rivals a.active::after { content: ''; position: absolute; bottom: -12px; left: 0; width: 100%; height: 1px; }
.nav-rivals a.ferrari.active::after { background: var(--ferrari-red); }
.nav-rivals a.merc.active::after { background: var(--merc-teal); }

.profile-wrap { max-width: 800px; margin: 100px auto 40px; padding: 0 24px; }
.profile-card { background: #000; border: 1px solid rgba(255,255,255,0.05); }
.profile-hero { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; }
.profile-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; filter: contrast(1.1) brightness(0.8); }
.profile-hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, transparent 60%); }
.profile-header { position: absolute; bottom: 0; left: 0; width: 100%; padding: 48px; }
.profile-team { font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 6px; margin-bottom: 16px; }
.profile-name { font-family: 'Outfit', sans-serif; font-size: clamp(48px, 8vw, 80px); font-weight: 900; letter-spacing: -2px; line-height: 0.9; color: #fff; margin-bottom: 12px; }

.profile-vs-bar { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; border-bottom: 1px solid rgba(255,255,255,0.05); font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; background: #020202; }

.profile-content { padding: 48px; background: #020202; }
.content-section { margin-bottom: 60px; }
.content-title { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 4px; }
.content-title .line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); }
.story-box { font-size: 15px; color: var(--text-muted); line-height: 2.2; font-weight: 300; }
.story-box strong { font-weight: 500; color: #fff; }

.char-grid { display: grid; gap: 1px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.char-card { display: flex; align-items: center; gap: 24px; padding: 24px; background: #050505; transition: background 0.4s; }
.char-card:hover { background: #0a0a0a; }
.char-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; filter: grayscale(0.8); transition: filter 0.4s; }
.char-card:hover .char-avatar { filter: grayscale(0); }
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.char-info { flex: 1; }
.char-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.char-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; font-weight: 300; }

/* ═══════════ FOOTER ═══════════ */
footer { padding: 80px 0; background: #000; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }
footer .credit { font-family: 'Outfit', sans-serif; font-size: 10px; color: #888; letter-spacing: 6px; font-weight: 500; margin-bottom: 16px; }
footer .copyright { color: #444; font-size: 10px; letter-spacing: 2px; }

/* ═══════════════════════════════════════════════════════════
   VS DUEL · STAT COMPARE
═══════════════════════════════════════════════════════════ */
.duel {
  background: #000;
  padding: clamp(80px,12vw,140px) clamp(20px,5vw,40px);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
.duel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(224,18,26,.08), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(98,195,228,.08), transparent 50%);
}
.duel > * { position: relative; z-index: 1; }
.duel-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px,2.2vw,11px);
  font-weight: 700;
  letter-spacing: clamp(4px,1.2vw,8px);
  color: var(--text-muted);
  margin-bottom: clamp(40px,6vw,60px);
}

.duel-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px,4vw,60px);
  max-width: 1100px;
  margin: 0 auto clamp(60px,9vw,90px);
}
.duel-col {
  text-align: center;
  padding: clamp(24px,4vw,40px) clamp(16px,3vw,28px);
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(8,8,8,.6);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.duel-col.damian { border-top: 3px solid var(--ferrari-red); box-shadow: 0 0 60px rgba(224,18,26,.1); }
.duel-col.erik { border-top: 3px solid var(--merc-teal); box-shadow: 0 0 60px rgba(98,195,228,.1); }
.duel-col .duel-team {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px,2vw,10px);
  font-weight: 800;
  letter-spacing: clamp(2px,.8vw,4px);
  margin-bottom: clamp(8px,1.6vw,12px);
}
.duel-col.damian .duel-team { color: var(--ferrari-red); }
.duel-col.erik .duel-team { color: var(--merc-teal); }
.duel-col .duel-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px,7vw,56px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: .95;
  color: #fff;
  margin-bottom: clamp(6px,1.4vw,10px);
}
.duel-col .duel-num {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(20px,4vw,28px);
  font-weight: 300;
  letter-spacing: 2px;
  color: rgba(255,255,255,.4);
}

.duel-vs {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px,3.5vw,26px);
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  padding: clamp(10px,2vw,14px) clamp(14px,2.6vw,18px);
  border: 2px solid #fff;
  background: rgba(0,0,0,.7);
  display: inline-block;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,.7), inset 0 0 12px rgba(255,255,255,.05);
}

.duel-stats {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.05);
}
.stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px,3vw,40px);
  padding: clamp(16px,3vw,22px) clamp(12px,3vw,24px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .25s ease;
}
.stat-row:hover { background: rgba(255,255,255,.015); }
.stat-l, .stat-r {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px,3.5vw,24px);
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
}
.stat-l { text-align: right; }
.stat-r { text-align: left; }
.stat-l.red { color: var(--ferrari-red); }
.stat-r.teal { color: var(--merc-teal); }
.stat-k {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px,2vw,11px);
  font-weight: 700;
  letter-spacing: clamp(2px,.8vw,4px);
  color: rgba(255,255,255,.3);
  min-width: clamp(60px,12vw,100px);
  text-align: center;
}

/* Mobile: vertical stack of duel header */
@media (max-width: 680px) {
  .duel-grid { grid-template-columns: 1fr; gap: 16px; }
  .duel-vs { justify-self: center; }
  .stat-row { gap: 8px; padding: 14px 8px; }
  .stat-l, .stat-r { font-size: clamp(14px,4vw,18px); }
  .stat-k { font-size: 9px; min-width: 60px; letter-spacing: 2px; }
}

/* ═══════════════════════════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════════════════════════ */
.finalcta {
  background: #000;
  padding: clamp(80px,12vw,140px) clamp(20px,5vw,40px);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
.finalcta::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(224,18,26,.04) 0%, transparent 30%, transparent 70%, rgba(98,195,228,.04) 100%);
}
.finalcta > * { position: relative; z-index: 1; }
.cta-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px,2.2vw,11px);
  font-weight: 700;
  letter-spacing: clamp(4px,1.2vw,8px);
  color: var(--text-muted);
  margin-bottom: clamp(20px,3vw,28px);
}
.cta-headline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(40px,9vw,80px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: .95;
  color: #fff;
  margin-bottom: clamp(40px,6vw,60px);
}
.cta-headline .red { color: var(--ferrari-red); text-shadow: 0 0 30px rgba(224,18,26,.4); }
.cta-headline .teal { color: var(--merc-teal); text-shadow: 0 0 30px rgba(98,195,228,.4); }

.cta-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px,2.4vw,20px);
  max-width: 900px;
  margin: 0 auto;
}
.cta-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(28px,5vw,40px) clamp(24px,4vw,36px);
  background: #050505;
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  text-align: left;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.cta-big::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  transition: width .35s ease;
}
.cta-big:hover { transform: translateY(-4px); background: #0a0a0a; }
.cta-big:hover::after { width: 100%; opacity: .08; }
.cta-big.damian-btn { border-left: 3px solid var(--ferrari-red); }
.cta-big.damian-btn::after { background: var(--ferrari-red); }
.cta-big.damian-btn:hover { box-shadow: 0 20px 60px rgba(224,18,26,.25); }
.cta-big.erik-btn { border-left: 3px solid var(--merc-teal); }
.cta-big.erik-btn::after { background: var(--merc-teal); }
.cta-big.erik-btn:hover { box-shadow: 0 20px 60px rgba(98,195,228,.25); }
.cta-big-num {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(11px,2.6vw,13px);
  font-weight: 700;
  letter-spacing: 4px;
  position: relative;
  z-index: 1;
}
.damian-btn .cta-big-num { color: var(--ferrari-red); }
.erik-btn .cta-big-num { color: var(--merc-teal); }
.cta-big-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(20px,4.5vw,30px);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.05;
  position: relative;
  z-index: 1;
}
.cta-big-sub {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px,2.2vw,11px);
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,255,255,.5);
  margin-top: 8px;
  position: relative;
  z-index: 1;
  transition: color .25s ease, transform .25s ease;
}
.cta-big:hover .cta-big-sub { color: #fff; transform: translateX(4px); }

@media (max-width: 680px) {
  .cta-buttons { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CTA TAIL — Below Driver Cards
═══════════════════════════════════════════════════════════ */
.cta-tail {
  margin-top: clamp(48px,7vw,72px);
  text-align: center;
}
.cta-tail-text {
  font-family: 'Pretendard','Outfit',sans-serif;
  font-size: clamp(15px,3vw,18px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
  margin-bottom: clamp(20px,3vw,28px);
}
.cta-tail-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px,2.4vw,20px);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 680px) {
  .cta-tail-buttons { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CTA BIG · STATS INSIDE BUTTON
═══════════════════════════════════════════════════════════ */
.cta-big-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-bottom: clamp(16px,3vw,22px);
}
.cta-big-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  padding: clamp(14px,2.6vw,18px) 0 clamp(16px,3vw,20px);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: clamp(14px,2.6vw,18px);
  position: relative;
  z-index: 1;
}
.cta-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: clamp(10px,2.2vw,12px);
  line-height: 1.4;
}
.cta-stat .k {
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,.35);
  flex: 0 0 auto;
}
.cta-stat .v {
  font-weight: 600;
  color: rgba(255,255,255,.92);
  text-align: right;
  letter-spacing: -.2px;
}
.damian-btn .cta-stat .v { color: #ffd9d9; }
.erik-btn .cta-stat .v { color: #c8e8f5; }

/* ═══════════════════════════════════════════════════════════
   TWEMOJI · render flag emojis as inline SVG
═══════════════════════════════════════════════════════════ */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .15em 0 0;
  vertical-align: -.18em;
  display: inline-block;
}

/* Allow stat values to wrap so long Korean text is fully visible */
.cta-stat {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.cta-stat .v {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  word-break: keep-all;
  white-space: normal;
  line-height: 1.4;
}
.cta-stat .k {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE MODAL · iframe popup for damian.html / erik.html
═══════════════════════════════════════════════════════════ */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px,3vw,40px);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.2,.8,.2,1);
}
.profile-modal.open {
  display: flex;
  opacity: 1;
}
.profile-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(20px);
  cursor: pointer;
}
.profile-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  height: 92vh;
  height: 92svh;
  background: #050505;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  transform: translateY(24px) scale(.98);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.profile-modal.open .profile-modal-content {
  transform: translateY(0) scale(1);
}
.profile-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
  font-family: 'Outfit',sans-serif;
}
.profile-modal-close:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
  transform: rotate(90deg);
}
#profileFrame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #050505;
}
@media (max-width: 680px) {
  .profile-modal { padding: 0; }
  .profile-modal-content {
    max-width: 100%;
    height: 100vh;
    height: 100svh;
    border: 0;
  }
  .profile-modal-close { top: 10px; right: 10px; }
}

/* Hide leftover NEW tag if any HTML still references it */
.driver-new-tag { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   DYNAMIC ENHANCEMENTS · MOBILE-FIRST INTERACTIONS
═══════════════════════════════════════════════════════════ */

/* ─── DRIVER CARDS: 3D tilt + cinematic hover ─── */
.driver-card {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.driver-card img {
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  filter: brightness(.85) saturate(.9) contrast(1.05);
}
.driver-card .driver-content {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.driver-card .driver-cta {
  transition: letter-spacing .35s ease, color .35s ease;
}

/* Desktop hover */
@media (hover: hover) {
  .driver-card:hover {
    transform: translateY(-10px) scale(1.005);
  }
  .driver-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.05) saturate(1.15) contrast(1.1);
  }
  .driver-card:hover .driver-content {
    transform: translateY(-4px);
  }
  .driver-card:hover .driver-cta {
    letter-spacing: 4px;
  }
  .driver-card.damian:hover {
    box-shadow: 0 30px 90px rgba(224,18,26,.35), 0 0 0 1px var(--ferrari-red);
  }
  .driver-card.erik:hover {
    box-shadow: 0 30px 90px rgba(98,195,228,.35), 0 0 0 1px var(--merc-teal);
  }
}

/* Mobile tap feedback */
@media (hover: none) {
  .driver-card:active {
    transform: scale(.98);
    transition: transform .15s ease;
  }
  .driver-card:active img {
    transform: scale(1.04);
  }
}

/* ─── CTA BIG BUTTONS: lift + glow on tap ─── */
@media (hover: none) {
  .cta-big:active {
    transform: scale(.985);
    transition: transform .15s ease;
  }
}

/* ─── VS BADGE pulse (in hero) ─── */
.hero-subtitle .vs {
  animation: vsBeat 2.6s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes vsBeat {
  0%, 92%, 100% { transform: scale(1); box-shadow: 0 4px 18px rgba(0,0,0,.7), inset 0 0 8px rgba(255,255,255,.08); }
  94% { transform: scale(1.06); box-shadow: 0 6px 28px rgba(255,255,255,.18), inset 0 0 14px rgba(255,255,255,.18); }
  96% { transform: scale(1); }
  98% { transform: scale(1.03); }
}

/* ─── PROFILE MODAL: refined entrance ─── */
.profile-modal {
  transition: opacity .4s cubic-bezier(.2,.8,.2,1);
}
.profile-modal-overlay {
  transition: opacity .4s ease;
  opacity: 0;
}
.profile-modal.open .profile-modal-overlay {
  opacity: 1;
}
.profile-modal-content {
  transform: translateY(40px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease .05s;
}
.profile-modal.open .profile-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Mobile: bottom sheet pattern */
@media (max-width: 680px) {
  .profile-modal {
    padding: 0;
    align-items: flex-end;
  }
  .profile-modal-content {
    max-width: 100%;
    width: 100%;
    height: 94vh;
    height: 94svh;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    opacity: 1;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .profile-modal.open .profile-modal-content {
    transform: translateY(0);
  }
  /* Drag handle pill */
  .profile-modal-content::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;
  }
  .profile-modal-close {
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  /* Bump iframe down to clear handle pill */
  #profileFrame {
    padding-top: 24px;
    box-sizing: border-box;
    background: #050505;
  }
}

/* ─── HERO 4 CORNERS: subtle pulse glow ─── */
.hero-corner { transition: box-shadow .8s ease; }
@media (hover: hover) {
  .hero:hover .hero-corner.tl,
  .hero:hover .hero-corner.br { box-shadow: 0 0 24px rgba(224,18,26,.7); }
  .hero:hover .hero-corner.tr,
  .hero:hover .hero-corner.bl { box-shadow: 0 0 24px rgba(98,195,228,.7); }
}

/* ─── SCROLL-IN STAGGER: smooth driver card cascade ─── */
.split-grid .driver-card.fade-up.is-visible {
  animation: cardRise 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardRise {
  0% { opacity: 0; transform: translateY(60px) scale(.97); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ─── REDUCED MOTION respect ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-subtitle .vs { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL · slide in from sides
═══════════════════════════════════════════════════════════ */
.slide-in-left,
.slide-in-right,
.fade-up {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 2s cubic-bezier(.2,.8,.2,1),
    transform 2s cubic-bezier(.2,.8,.2,1),
    filter 2s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity, filter;
}
.slide-in-left { transform: translateX(-120px); }
.slide-in-right { transform: translateX(120px); }
.fade-up { transform: translateY(80px); }

.slide-in-left.is-visible,
.slide-in-right.is-visible,
.fade-up.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

/* Override card-rise animation when paired with slide-in classes */
.split-grid .driver-card.slide-in-left.is-visible,
.split-grid .driver-card.slide-in-right.is-visible {
  animation: none;
}

/* Mobile optimizations: typography, layout, and performance */
@media (max-width: 680px) {
  /* Fix text breaking */
  .hero-title {
    font-size: clamp(16px, 4vw, 20px);
    letter-spacing: 8px;
    margin-bottom: 100px;
    text-indent: 8px;
  }
  .hero-tagline { margin-bottom: 32px; letter-spacing: 2px; }
  
  /* Fix buttons layout */
  .hero-cta { gap: 16px; padding: 0 16px; width: 100%; }
  .btn { min-width: 100%; height: 52px; letter-spacing: 3px; backdrop-filter: blur(8px); }

  /* Faster, shorter animations to avoid mobile lag */
  .slide-in-left, .slide-in-right, .fade-up {
    transition: opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s cubic-bezier(.2,.8,.2,1);
    filter: blur(4px);
  }
  .slide-in-left { transform: translateX(-40px); }
  .slide-in-right { transform: translateX(40px); }
  .fade-up { transform: translateY(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .slide-in-left,
  .slide-in-right,
  .slide-in-up {
    transform: none;
    filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE REFINEMENT · 글자 깨짐 / 두-세줄 방지 · 한글 단어 단위 줄바꿈
═══════════════════════════════════════════════════════════ */

/* Korean text uses word-break:keep-all so words don't split mid-syllable */
.driver-quote, .driver-nickname, .driver-team, .driver-cta,
.cta-tail-text, .cta-big-name, .cta-big-num, .cta-big-sub,
.cta-stat .v, .cta-stat .k,
.hero-tagline, .hero-title, .update-label,
.section-head .headline, .section-head .eyebrow,
.live-bar .live-info, .live-bar .live-text,
footer .credit, footer .copyright {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ─── TABLET (≤900px) ─── */
@media (max-width: 900px) {
  section { padding: clamp(70px, 12vw, 110px) 0; }
  .driver-content { padding: clamp(28px, 5vw, 40px); }
  .driver-name { font-size: clamp(32px, 6vw, 44px); letter-spacing: -1px; }
  .driver-quote { font-size: 13px; line-height: 1.7; }
  .driver-nickname { margin-bottom: 20px; font-size: 12px; letter-spacing: 3px; }
  .driver-cta { margin-top: 20px; font-size: 10px; letter-spacing: 3px; }
  /* On tablet+ mobile, show driver content (quote/cta) without needing hover */
  .driver-quote, .driver-cta { opacity: 1; transform: translateY(0); }
}

/* ─── MOBILE (≤680px) ─── */
@media (max-width: 680px) {
  /* Live bar: tight, small */
  .live-bar { padding: 10px 14px; gap: 8px; font-size: 9px; letter-spacing: 2px; flex-wrap: wrap; }
  .live-bar .live-info { white-space: nowrap; }

  /* Hero text */
  .hero-content { padding: 80px 20px 60px; }
  .release-stamp { font-size: 9px; letter-spacing: 3px; padding: 5px 14px; margin-bottom: 24px; }
  .update-label { letter-spacing: 4px; }
  .hero-title { font-size: clamp(18px, 5.2vw, 28px); letter-spacing: 1px; text-indent: 1px; }
  .hero-tagline { font-size: 11px; letter-spacing: 2px; line-height: 1.6; }
  .hero-cta { gap: 10px; flex-direction: column; width: 100%; max-width: 280px; }
  .hero-cta a { width: 100%; justify-content: center; }
  .hero-top-row { padding: 0 18px; font-size: 8px; letter-spacing: 2px; }

  /* Section head */
  .section-head { margin-bottom: clamp(36px, 7vw, 56px); }
  .section-head .eyebrow { font-size: 9px; letter-spacing: 4px; }
  .section-head .headline { font-size: clamp(22px, 6vw, 32px); letter-spacing: -.5px; line-height: 1.3; }

  /* Driver cards */
  .driver-card { aspect-ratio: 4/5; }
  .driver-content { padding: 22px 20px; }
  .driver-team { font-size: 9px; letter-spacing: 3px; margin-bottom: 10px; }
  .driver-name { font-size: clamp(28px, 8vw, 38px); letter-spacing: -1px; line-height: .98; margin-bottom: 8px; }
  .driver-nickname { font-size: 10px; letter-spacing: 2px; margin-bottom: 14px; }
  .driver-quote { font-size: 12px; line-height: 1.65; padding-left: 14px; }
  .driver-cta { margin-top: 16px; font-size: 10px; letter-spacing: 2.5px; }

  /* CTA tail block */
  .cta-tail { margin-top: 36px; }
  .cta-tail-text { font-size: 14px; margin-bottom: 18px; }

  /* CTA big buttons (stats cards) */
  .cta-big { padding: 22px 18px; }
  .cta-big-head { gap: 4px; margin-bottom: 14px; }
  .cta-big-num { font-size: 11px; letter-spacing: 3px; }
  .cta-big-name { font-size: clamp(18px, 5vw, 24px); letter-spacing: -.5px; line-height: 1.05; }
  .cta-big-sub { font-size: 10px; letter-spacing: 2.5px; margin-top: 6px; }

  /* Stats inside button — stack k above v for narrow widths */
  .cta-big-stats { padding: 12px 0 14px; margin-bottom: 12px; gap: 4px; }
  .cta-stat {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 11px;
    line-height: 1.4;
    padding: 4px 0;
  }
  .cta-stat .k { letter-spacing: 1.5px; font-size: 9.5px; min-width: 0; }
  .cta-stat .v { font-size: 11.5px; text-align: left; line-height: 1.4; }

  /* Footer */
  footer { padding: 40px 0; }
  footer .credit { font-size: 9px; letter-spacing: 3px; }
  footer .copyright { font-size: 9px; letter-spacing: 1px; line-height: 1.6; }
}

/* ─── EXTRA SMALL (≤420px) ─── */
@media (max-width: 420px) {
  .live-bar { gap: 6px; font-size: 8.5px; letter-spacing: 1.5px; padding: 8px 12px; }
  /* Hide last info to keep bar in one line */
  .live-bar .live-info:last-of-type,
  .live-bar .live-divider:last-of-type { display: none; }

  .hero-title { font-size: clamp(16px, 4.6vw, 22px); letter-spacing: .5px; text-indent: .5px; }
  .release-stamp { font-size: 8.5px; padding: 4px 12px; margin-bottom: 18px; }
  .update-label { font-size: 9px; letter-spacing: 3px; }

  .driver-content { padding: 18px 16px; }
  .driver-name { font-size: clamp(24px, 7.5vw, 32px); }

  .cta-stat { grid-template-columns: 70px 1fr; }
  .cta-stat .k { font-size: 9px; letter-spacing: 1px; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL HINT · 덜덜거림 제거 — translateY 빼고 가벼운 페이드만
═══════════════════════════════════════════════════════════ */
.scroll-hint,
.hero.revealed .scroll-hint {
  animation: scrollPulse 3.4s ease-in-out infinite !important;
  transform: translateY(0) !important;
  will-change: opacity;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .85; }
}

/* ═══════════════════════════════════════════════════════════
   MUTE TOGGLE · hero video sound on/off
═══════════════════════════════════════════════════════════ */
.mute-toggle {
  position: absolute;
  bottom: clamp(60px, 9vw, 90px);
  right: clamp(20px, 5vw, 36px);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .25s ease, transform .25s ease, border-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.mute-toggle:hover,
.mute-toggle:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  transform: scale(1.07);
}
.mute-toggle:active {
  transform: scale(.95);
}
.mute-icon {
  display: none;
  pointer-events: none;
}
/* Default (muted) → show "speaker with X" icon */
.mute-toggle .mute-on { display: block; }
.mute-toggle .mute-off { display: none; }
/* When unmuted → show "speaker with sound waves" icon */
.mute-toggle.unmuted { color: #fff; border-color: rgba(255,255,255,.55); }
.mute-toggle.unmuted .mute-on { display: none; }
.mute-toggle.unmuted .mute-off { display: block; }
.mute-toggle.unmuted::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  pointer-events: none;
  animation: muteRing 2s ease-out infinite;
}
@keyframes muteRing {
  0% { transform: scale(.95); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Mobile: smaller, slightly higher to clear scroll-hint */
@media (max-width: 680px) {
  .mute-toggle {
    width: 40px;
    height: 40px;
    bottom: clamp(56px, 12vw, 72px);
    right: 16px;
  }
  .mute-icon { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   HERO TOP ROW · 모바일에서 한 줄 강제
═══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .hero-top-row {
    padding: 0 14px;
    gap: 8px;
  }
  .hero-top-row .left,
  .hero-top-row .right {
    font-size: 8px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    line-height: 1;
  }
  /* Twemoji ⚠ icon should be small to not push width */
  .hero-top-row img.emoji {
    height: .85em;
    width: .85em;
    margin-right: .12em;
  }
}

@media (max-width: 420px) {
  .hero-top-row {
    padding: 0 10px;
    gap: 6px;
  }
  .hero-top-row .left,
  .hero-top-row .right {
    font-size: 7px;
    letter-spacing: 1px;
  }
}

@media (max-width: 340px) {
  .hero-top-row .left,
  .hero-top-row .right {
    font-size: 6.5px;
    letter-spacing: .5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGES · iframe 모달 + 모바일 종합 리파인
═══════════════════════════════════════════════════════════ */

/* iframe 안일 때 → 상단 BACK 네비 숨기고 마진 제거 */
.in-iframe .back-bar { display: none !important; }
.in-iframe .profile-wrap { margin-top: 16px !important; }

/* ─── 모든 폭에서 한국어 keep-all ─── */
.profile-team, .profile-name, .profile-vs-bar,
.story-box, .story-box strong,
.char-name, .char-desc,
.content-title, .profile-header, .profile-header > div,
.back-btn, .nav-rivals a {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ─── TABLET (≤900px) ─── */
@media (max-width: 900px) {
  .profile-wrap { padding: 0 16px; margin: 60px auto 24px; }
  .profile-header { padding: 28px 24px !important; }
  .profile-content { padding: 32px 22px !important; }
  .content-section { margin-bottom: 44px; }
  .story-box { font-size: 14px; line-height: 2; }
}

/* ─── MOBILE (≤680px) ─── */
@media (max-width: 680px) {
  /* Back-bar (when standalone, not iframe) */
  .back-bar { padding: 12px 14px; }
  .back-btn { font-size: 9px; letter-spacing: 2px; gap: 8px; }
  .nav-rivals { gap: 14px; }
  .nav-rivals a { font-size: 9px !important; letter-spacing: 2px !important; }

  /* Wrap & spacing */
  .profile-wrap { padding: 0 10px; margin-top: 12px; }
  .profile-card { border-width: 0; }

  /* Hero portrait */
  .profile-hero { aspect-ratio: 4/5; }
  .profile-header { padding: 22px 18px !important; }
  .profile-team { font-size: 9px !important; letter-spacing: 3px !important; margin-bottom: 8px !important; }
  .profile-name {
    font-size: clamp(30px, 9vw, 44px) !important;
    letter-spacing: -1px !important;
    line-height: .95 !important;
    margin-bottom: 8px !important;
  }
  /* Top labels (WORLD DOMINION RACING / FRENCH ROUND) inside profile hero */
  .profile-hero > div[style*="top:24px"] {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    font-size: 8px !important;
    letter-spacing: 1.5px !important;
    gap: 6px !important;
  }
  /* Nickname line under name */
  .profile-header > div[style*="letter-spacing:3px"] {
    font-size: 10.5px !important;
    letter-spacing: 2px !important;
    margin-top: 6px !important;
  }
  /* Inline italic quote box */
  .profile-header > div[style*="font-style:italic"] {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 12px 14px !important;
    margin-top: 14px !important;
  }

  /* VS bar */
  .profile-vs-bar {
    padding: 14px 16px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    gap: 6px;
  }

  /* Profile content */
  .profile-content { padding: 24px 16px !important; }
  .content-section { margin-bottom: 32px; }

  /* Section title */
  .content-title {
    font-size: 10px !important;
    letter-spacing: 3px !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  .content-title .line { display: none; } /* save horizontal space */

  /* Intro story */
  .story-box {
    font-size: 12.5px !important;
    line-height: 1.85 !important;
    font-weight: 300;
  }

  /* Sub character cards */
  .char-grid { gap: 1px; }
  .char-card { padding: 14px 14px !important; gap: 12px !important; }
  .char-avatar { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; }
  .char-name {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }
  .char-name span { font-size: 10px !important; }
  .char-desc {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }
  /* Section sub-team labels (VELOCITÀ CORSE / RIVAL) */
  .profile-content > .content-section > div[style*="letter-spacing:4px"] {
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
    margin: 24px 0 12px !important;
  }

  /* Profile footer band (BREMSLOS · #7 / VDM · #27) */
  .profile-card > div:last-child {
    padding: 12px 18px !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* ─── EXTRA SMALL (≤420px) ─── */
@media (max-width: 420px) {
  .profile-name { font-size: clamp(26px, 8.5vw, 38px) !important; }
  .profile-header { padding: 18px 14px !important; }
  .profile-content { padding: 20px 14px !important; }
  .char-card { padding: 12px !important; gap: 10px !important; }
  .char-avatar { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
  .char-name { font-size: 12px !important; }
  .char-name span { font-size: 9.5px !important; }
  .char-desc { font-size: 11px !important; }
  .story-box { font-size: 12px !important; line-height: 1.8 !important; }
  .content-title { font-size: 9.5px !important; letter-spacing: 2.5px !important; }
}

/* ═══════════════════════════════════════════════════════════
   PROJECT BY · 작은 크레딧 라벨 (HERO 타이틀 바로 아래)
═══════════════════════════════════════════════════════════ */
.project-by {
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: clamp(10px,2.2vw,12px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.45);
  letter-spacing: 2px;
  margin-top: clamp(10px,1.8vw,14px);
  margin-bottom: clamp(8px,1.5vw,12px);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.project-by strong {
  font-weight: 700;
  color: rgba(255,255,255,.85);
  font-style: normal;
  letter-spacing: 1.5px;
}

/* HERO 진입 stagger에 맞춰 페이드인 */
.hero-content .project-by { opacity: 0; animation: floatUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.25s both; }

/* ═══════════════════════════════════════════════════════════
   PROJECT BY · 위는 타이트하게(타이틀에 붙임), 아래는 큰 공백
═══════════════════════════════════════════════════════════ */
.hero-content .hero-title {
  margin-bottom: clamp(2px, .4vw, 6px) !important;
}
.hero-content .project-by {
  margin-top: 0 !important;
  margin-bottom: clamp(28px, 5vw, 44px) !important;
}

/* HERO 크레딧 (2026 — 영상에 크레딧 없는 버전) · & 가 Project. 정중앙 바로 아래 */
.hero-content .project-by:has(+ .hero-credit) { margin-bottom: clamp(3px,.9vw,7px) !important; }
.hero-credit {
  display: flex; width: 100%;
  align-items: baseline; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: clamp(17px, 3.6vw, 27px);
  font-weight: 600;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 22px rgba(0,0,0,.95);
  margin-bottom: clamp(26px, 5vw, 42px);
}
.hero-credit .cd-side { flex: 1 1 0; min-width: 0; }
.hero-credit .cd-l { text-align: right; }
.hero-credit .cd-r { text-align: left; }
.hero-credit .amp {
  flex: 0 0 auto;
  color: var(--apex-red); font-weight: 400;
  margin: 0 clamp(.26em, 1vw, .4em);
  text-shadow: 0 0 14px var(--apex-glow);
}
.hero-content .hero-credit { opacity: 0; animation: floatUp 1s cubic-bezier(0.2,0.8,0.2,1) 1.35s both; }

/* ═══════════════════════════════════════════════════════════
   HERO 그룹 분리 · 위 그룹 ↑ / 아래 그룹 ↓
═══════════════════════════════════════════════════════════ */
.hero-content .hero-tagline {
  margin-top: clamp(80px, 16vh, 160px) !important;
}

/* HERO 컨텐츠 전체 10px 위로 살짝 올림 */
.hero-content {
  transform: translateY(-10px);
}

/* ═══════════════════════════════════════════════════════════
   SEASON ROUTE · 11 ROUND TIMELINE — 노선도 스타일
═══════════════════════════════════════════════════════════ */
.route { background: #050505; padding: clamp(80px, 12vw, 140px) 0; border-top: 1px solid rgba(255,255,255,.04); }

.route-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 60px 12px;
  margin: 0 auto;
  max-width: 1200px;
}

/* Subway line connecting all stops — horizontal */
.route-track::before {
  content: '';
  position: absolute;
  top: 90px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.18) 8%,
    rgba(255,255,255,.18) 92%,
    transparent 100%);
  z-index: 0;
}

.route-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
  z-index: 1;
}

.route-num {
  font-family: 'Outfit',sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255,255,255,.4);
  margin-bottom: 14px;
}

/* The dot */
.route-stop::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,.35);
  border-radius: 50%;
  border: 3px solid #050505;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
}

.route-stop:hover::after {
  background: #fff;
  transform: scale(1.4);
}

.route-flag {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 6px;
}
.route-flag img.emoji { height: 18px; width: 18px; vertical-align: -3px; margin: 0; }
.route-name {
  font-family: 'Outfit',sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 3px;
  white-space: nowrap;
}
.route-loc {
  font-family: 'Outfit',sans-serif;
  font-size: 8.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── CURRENT (France · STORY START) ─── */
.route-stop.current::after {
  width: 24px;
  height: 24px;
  background: var(--ferrari-red);
  border-color: #050505;
  box-shadow:
    0 0 0 1px var(--ferrari-red),
    0 0 24px var(--ferrari-glow),
    0 0 0 6px rgba(224,18,26,.12);
  animation: routePulse 2.4s ease-in-out infinite;
}
.route-stop.current .route-num { color: var(--ferrari-red); }
.route-stop.current .route-name { color: var(--ferrari-red); text-shadow: 0 0 14px var(--ferrari-glow); }
.route-stop.current .route-tag {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Outfit',sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 4px 9px;
  border: 1px solid var(--ferrari-red);
  color: var(--ferrari-red);
  background: rgba(0,0,0,.85);
  white-space: nowrap;
  z-index: 3;
  border-radius: 2px;
}
.route-stop.current .route-tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 12px;
  background: var(--ferrari-red);
  opacity: .6;
}

/* ─── FINALE (UAE) ─── */
.route-stop.finale::after {
  width: 18px;
  height: 18px;
  background: var(--merc-teal);
  box-shadow:
    0 0 0 1px var(--merc-teal),
    0 0 20px var(--merc-glow);
}
.route-stop.finale .route-name { color: var(--merc-teal); }
.route-stop.finale .route-tag {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Outfit',sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 4px 9px;
  border: 1px solid var(--merc-teal);
  color: var(--merc-teal);
  background: rgba(0,0,0,.85);
  white-space: nowrap;
  z-index: 3;
  border-radius: 2px;
}

@keyframes routePulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--ferrari-red),
      0 0 24px var(--ferrari-glow),
      0 0 0 6px rgba(224,18,26,.12);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--ferrari-red),
      0 0 40px var(--ferrari-red),
      0 0 0 12px rgba(224,18,26,.20);
  }
}

/* ─── 2026 시작점 마커 — 에이드리언(복귀) / 노아(스즈카) ─── */
.route-stop.start-adrian::after,
.route-stop.start-noah::after { width: 24px; height: 24px; border-color: #050505; }
.route-stop.start-adrian::after {
  background: var(--apex-red);
  box-shadow: 0 0 0 1px var(--apex-red), 0 0 24px var(--apex-glow), 0 0 0 6px rgba(255,45,45,.12);
  animation: routePulseApex 2.4s ease-in-out infinite;
}
.route-stop.start-noah::after {
  background: var(--fang-white);
  box-shadow: 0 0 0 1px var(--fang-white), 0 0 24px var(--fang-glow), 0 0 0 6px rgba(255,255,255,.1);
  animation: routePulseNoah 2.4s ease-in-out infinite;
}
.route-stop.start-adrian .route-num { color: var(--apex-red); }
.route-stop.start-adrian .route-name { color: var(--apex-red); text-shadow: 0 0 14px var(--apex-glow); }
.route-stop.start-noah .route-num { color: var(--fang-white); }
.route-stop.start-noah .route-name { color: var(--fang-white); text-shadow: 0 0 14px var(--fang-glow); }
.route-stop.start-adrian .route-tag,
.route-stop.start-noah .route-tag {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: 9px; font-weight: 900; letter-spacing: .5px;
  padding: 5px 12px; background: rgba(0,0,0,.9);
  white-space: nowrap; z-index: 3; border-radius: 3px;
}
.route-stop.start-adrian .route-tag img.emoji,
.route-stop.start-noah .route-tag img.emoji {
  width: 11px; height: 11px; margin: 0 1px 0 0; vertical-align: -1px;
}
.route-stop.start-adrian .route-tag { border: 1px solid var(--apex-red); color: var(--apex-red); }
.route-stop.start-noah .route-tag { border: 1px solid var(--fang-white); color: var(--fang-white); }
.route-stop.start-adrian .route-tag::after,
.route-stop.start-noah .route-tag::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 1px; height: 12px; opacity: .6;
}
.route-stop.start-adrian .route-tag::after { background: var(--apex-red); }
.route-stop.start-noah .route-tag::after { background: var(--fang-white); }
@keyframes routePulseApex {
  0%,100% { box-shadow: 0 0 0 1px var(--apex-red), 0 0 24px var(--apex-glow), 0 0 0 6px rgba(255,45,45,.12); }
  50% { box-shadow: 0 0 0 1px var(--apex-red), 0 0 40px var(--apex-red), 0 0 0 12px rgba(255,45,45,.2); }
}
@keyframes routePulseNoah {
  0%,100% { box-shadow: 0 0 0 1px var(--fang-white), 0 0 24px var(--fang-glow), 0 0 0 6px rgba(255,255,255,.1); }
  50% { box-shadow: 0 0 0 1px var(--fang-white), 0 0 38px rgba(255,255,255,.85), 0 0 0 12px rgba(255,255,255,.16); }
}

/* Legend */
.route-legend {
  margin-top: clamp(40px, 6vw, 60px);
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 36px);
  flex-wrap: wrap;
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: 1px;
}
.route-legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legend-current { background: var(--ferrari-red); box-shadow: 0 0 10px var(--ferrari-glow); }
.legend-finale { background: var(--merc-teal); box-shadow: 0 0 10px var(--merc-glow); }
.legend-adrian { background: var(--apex-red); box-shadow: 0 0 10px var(--apex-glow); }
.legend-noah { background: var(--fang-white); box-shadow: 0 0 10px var(--fang-glow); }

/* ─── MOBILE: vertical subway map ─── */
@media (max-width: 900px) {
  .route-track {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    max-width: 480px;
  }
  .route-track::before {
    top: 12px;
    bottom: 12px;
    left: 32px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(255,255,255,.18) 5%,
      rgba(255,255,255,.18) 95%,
      transparent 100%);
  }
  .route-stop {
    flex-direction: row;
    text-align: left;
    align-items: center;
    padding: 14px 0 14px 64px;
    gap: 10px;
    min-height: 44px;
  }
  .route-num {
    position: absolute;
    left: 0;
    width: 30px;
    margin-bottom: 0;
    text-align: center;
    font-size: 9px;
  }
  .route-stop::after {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
  }
  .route-stop:hover::after { transform: translateY(-50%) scale(1.4); }
  .route-flag { margin-bottom: 0; }
  .route-name { margin-bottom: 0; font-size: 12px; }
  .route-loc { font-size: 10px; opacity: .6; }
  .route-loc::before { content: '· '; }

  /* Tag positioning for mobile */
  .route-stop.current .route-tag,
  .route-stop.finale .route-tag {
    position: absolute;
    top: 50%;
    left: auto;
    right: 4px;
    transform: translateY(-50%);
    padding: 3px 7px;
    font-size: 8.5px;
    letter-spacing: 1.5px;
  }
  .route-stop.current .route-tag::after { display: none; }

  /* Bigger dot for current/finale on mobile */
  .route-stop.current::after { width: 18px; height: 18px; left: 23px; }
  .route-stop.finale::after { width: 14px; height: 14px; left: 25px; }
}

@media (max-width: 420px) {
  .route-stop { padding: 12px 0 12px 56px; }
  .route-num { font-size: 8.5px; }
  .route-name { font-size: 11px; }
  .route-loc { font-size: 9.5px; }
  .route-stop.current .route-tag,
  .route-stop.finale .route-tag {
    font-size: 8px;
    letter-spacing: 1px;
    padding: 2px 6px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL SNAP · 섹션 단위 한 칸씩 슬라이드
═══════════════════════════════════════════════════════════ */
html {
  scroll-snap-type: y mandatory;
  -webkit-scroll-snap-type: y mandatory;
}

/* 모달 열렸을 때는 body 스크롤 잠겨서 영향 없음 */

/* 모든 메인 섹션 + 푸터에 스냅 */
.hero,
.route,
.split,
footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* 각 섹션 풀 뷰포트 보장 */
.hero,
.route,
.split {
  min-height: 100vh;
  min-height: 100svh;
}

/* ROUTE 섹션은 콘텐츠가 짧으니 화면 가운데로 정렬 */
.route {
  display: flex;
  align-items: center;
}
.route > .container { width: 100%; }

/* DRIVERS는 가운데 정렬해서 카드+버튼이 viewport 안에 보기 좋게 */
.split {
  display: flex;
  align-items: center;
}
.split > .container { width: 100%; }

/* 모달 안 iframe(damian/erik.html)에는 스냅 적용 X */
html.in-iframe { scroll-snap-type: none; }

/* 모션 감소 사용자 → 스냅 비활성화 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* 모바일에서 너무 빡빡하면 proximity로 부드럽게 (선택사항)
   주석 해제 시 살짝 가까워지면 스냅, 정확한 카운팅 X
@media (max-width: 680px) {
  html { scroll-snap-type: y proximity; }
}
*/

/* ═══════════════════════════════════════════════════════════
   SIDE DOTS NAV · 우측 세로 점 네비
═══════════════════════════════════════════════════════════ */
.snap-dots {
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 40px;
}

.snap-dot {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.snap-dot span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 1px solid transparent;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.snap-dot:hover span {
  background: rgba(255,255,255,.7);
  width: 8px;
  height: 8px;
}
.snap-dot.active span {
  background: #fff;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 12px rgba(255,255,255,.65);
}

/* Tooltip on hover (desktop) */
.snap-dot::before {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 5px 11px;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Outfit',sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.snap-dot:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobile: smaller dots, no tooltip */
@media (max-width: 680px) {
  .snap-dots {
    right: 8px;
    gap: 8px;
    padding: 6px;
    border-radius: 30px;
  }
  .snap-dot { width: 24px; height: 24px; }
  .snap-dot span { width: 5px; height: 5px; }
  .snap-dot.active span { width: 8px; height: 8px; }
  .snap-dot::before { display: none; }
}

/* iframe 안일 때(프로필 모달 안) → 숨김 */
html.in-iframe .snap-dots { display: none; }

/* ═══════════════════════════════════════════════════════════
   FAN ART · 가로 스와이프 갤러리 (준비중 플레이스홀더)
═══════════════════════════════════════════════════════════ */
.fanart {
  background: #050505;
  padding: clamp(80px, 12vw, 140px) 0;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.04);
}
.fanart > .container { width: 100%; }

/* 페이지 스냅 등록 */
.fanart {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  min-height: 100svh;
}

.fanart-track {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 5vw, 40px) clamp(24px, 4vw, 36px);
  scrollbar-width: none;
  scroll-padding-left: clamp(20px, 5vw, 40px);
}
.fanart-track::-webkit-scrollbar { display: none; }

.fanart-card {
  flex: 0 0 clamp(260px, 70vw, 360px);
  aspect-ratio: 4 / 5;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 4vw, 36px);
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
}
.fanart-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18); }

/* 점선 격자 패턴 (준비중 분위기) */
.fanart-card.placeholder {
  background:
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(255,255,255,.018) 26px 27px),
    radial-gradient(circle at center, rgba(255,255,255,.025) 0%, #050505 70%);
}

.fanart-card .fanart-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: 'Outfit',sans-serif;
  font-size: 10.5px;
  letter-spacing: 3px;
  color: rgba(255,255,255,.25);
  font-weight: 700;
}
.fanart-card .fanart-icon {
  font-size: clamp(38px, 7vw, 52px);
  margin-bottom: 16px;
  opacity: .55;
  filter: grayscale(.4);
}
.fanart-card .fanart-icon img.emoji { height: 1em; width: 1em; vertical-align: middle; margin: 0; }
.fanart-card .fanart-status {
  font-family: 'Outfit',sans-serif;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
  font-weight: 700;
}
.fanart-card .fanart-text {
  font-family: 'Pretendard','Outfit',sans-serif;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 800;
  letter-spacing: -.5px;
  color: rgba(255,255,255,.7);
}

.fanart-hint {
  text-align: center;
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,.35);
  letter-spacing: 3px;
  margin-top: 14px;
}

/* 모바일 — 카드 좀 더 화면 폭 가깝게 */
@media (max-width: 680px) {
  .fanart-track {
    padding: 16px 14px 22px;
    scroll-padding-left: 14px;
    gap: 10px;
  }
  .fanart-card {
    flex: 0 0 78vw;
    padding: 22px;
  }
  .fanart-card .fanart-icon { font-size: 38px; margin-bottom: 12px; }
  .fanart-card .fanart-text { font-size: 18px; }
  .fanart-hint { font-size: 9px; letter-spacing: 2px; margin-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   FAN ART · 실제 이미지 카드 (네컷 팬아트)
═══════════════════════════════════════════════════════════ */
.fanart-card.art {
  flex: 0 0 clamp(280px, 75vw, 420px);
  aspect-ratio: 4 / 5;
  padding: 0;
  background: #000;
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
}
.fanart-card.art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.fanart-card.art:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}
.fanart-card.art:hover {
  transform: translateY(-6px);
}

/* Team-color top accent */
.fanart-card.art::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
}
.fanart-card.art.damian-art::before { background: var(--ferrari-red); box-shadow: 0 0 14px var(--ferrari-glow); }
.fanart-card.art.erik-art::before { background: var(--merc-teal); box-shadow: 0 0 14px var(--merc-glow); }

.fanart-card.art .fanart-num {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  z-index: 3;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 2px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
  letter-spacing: 2px;
}

.fanart-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(16px, 3vw, 22px) clamp(16px, 3vw, 22px) clamp(14px, 2.5vw, 20px);
  background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fanart-card.art .fanart-team {
  font-family: 'Outfit',sans-serif;
  font-size: clamp(8.5px, 2vw, 10px);
  font-weight: 800;
  letter-spacing: clamp(2px, .6vw, 3px);
}
.fanart-card.art.damian-art .fanart-team { color: var(--ferrari-red); text-shadow: 0 0 10px var(--ferrari-glow); }
.fanart-card.art.erik-art .fanart-team { color: var(--merc-teal); text-shadow: 0 0 10px var(--merc-glow); }
.fanart-card.art .fanart-title {
  font-family: 'Pretendard','Outfit',sans-serif;
  font-size: clamp(18px, 3.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.5px;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0,0,0,.95);
}

/* 모바일 */
@media (max-width: 680px) {
  .fanart-card.art {
    flex: 0 0 82vw;
  }
  .fanart-card.art .fanart-num {
    font-size: 9px;
    padding: 2px 7px;
  }
  .fanart-card.art .fanart-title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   FAN ART · 모바일 다중 카드 + 클릭 표시
═══════════════════════════════════════════════════════════ */
/* 카드 호버/탭 시 줌 힌트 */
.fanart-card.art::after {
  content: '⊕';
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 4;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.fanart-card.art:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* 모바일 — 항상 보이는 줌 힌트 + 작은 카드 */
@media (max-width: 680px) {
  .fanart-track {
    padding: 16px 14px 22px;
    scroll-padding-left: 14px;
    gap: 8px;
  }
  .fanart-card.art {
    flex: 0 0 calc(50% - 4px);  /* 정확히 한 화면에 2장 */
    aspect-ratio: 4 / 5;
  }
  /* 모바일에선 줌 힌트 항상 표시 (호버 없음) */
  .fanart-card.art::after {
    opacity: .85;
    transform: scale(1);
    width: 26px;
    height: 26px;
    font-size: 14px;
    bottom: 10px;
    right: 10px;
  }
  .fanart-card.art .fanart-num {
    font-size: 8.5px;
    padding: 2px 6px;
    top: 10px;
    right: 10px;
  }
  .fanart-card.art .fanart-team { font-size: 8px; letter-spacing: 1.5px; }
  .fanart-card.art .fanart-title { font-size: 14px; }
  .fanart-caption { padding: 12px 12px 10px; }
}

@media (max-width: 420px) {
  .fanart-card.art .fanart-title { font-size: 13px; }
  .fanart-card.art::after { width: 24px; height: 24px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX · 풀스크린 이미지 확대 보기
═══════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  opacity: 0;
  transition: opacity .35s ease;
}
.lightbox.open {
  display: flex;
  opacity: 1;
}
.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
}
.lightbox img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  max-height: calc(100svh - 100px);
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  background: #000;
  transform: scale(.92);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.lightbox.open img {
  transform: scale(1);
  opacity: 1;
}
.lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  font-family: 'Outfit',sans-serif;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.lightbox-close:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  transform: rotate(90deg);
}
.lightbox-caption {
  position: fixed;
  bottom: 22px;
  left: 0; right: 0;
  z-index: 2;
  text-align: center;
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.7);
  letter-spacing: 3px;
  font-weight: 600;
  padding: 0 60px;
  pointer-events: none;
}

@media (max-width: 680px) {
  .lightbox { padding: 50px 12px 60px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 20px; }
  .lightbox-caption { font-size: 10px; letter-spacing: 2px; bottom: 16px; padding: 0 24px; }
  .lightbox img { max-height: calc(100vh - 130px); max-height: calc(100svh - 130px); }
}

/* ═══════════════════════════════════════════════════════════
   DISCLAIMER · 강조 창작물 안내 (푸터 위)
═══════════════════════════════════════════════════════════ */
.disclaimer {
  background: #050505;
  padding: clamp(50px, 8vw, 80px) 0 clamp(40px, 6vw, 60px);
  border-top: 1px solid rgba(255,255,255,.04);
  position: relative;
}
/* 스크롤 스냅 비활성 — 자유롭게 흘러가도록 */
.disclaimer { scroll-snap-align: none; }

.disclaimer-box {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 18px,
      rgba(255,170,0,.025) 18px 19px),
    rgba(255,255,255,.015);
  border: 1px solid rgba(255,200,80,.25);
  border-left: 4px solid #ffb84a;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,200,80,.05);
}

.disclaimer-stripe {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(
    -45deg,
    #ffb84a 0 8px,
    #1a1a1a 8px 16px
  );
  opacity: .7;
}

.disclaimer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 2.5vw, 20px);
}
.disclaimer-icon {
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1;
  color: #ffb84a;
  text-shadow: 0 0 14px rgba(255,184,74,.6);
  flex: 0 0 auto;
}
.disclaimer-icon img.emoji { height: 1em; width: 1em; margin: 0; vertical-align: -.1em; }
.disclaimer-label {
  font-family: 'Outfit',sans-serif;
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 900;
  letter-spacing: clamp(2px, .8vw, 4px);
  color: #ffb84a;
  text-shadow: 0 0 10px rgba(255,184,74,.3);
}

.disclaimer-body {
  font-family: 'Pretendard','Outfit',sans-serif;
  font-size: clamp(13px, 2.8vw, 15.5px);
  font-weight: 500;
  line-height: 1.85;
  color: rgba(255,255,255,.88);
  letter-spacing: -.2px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.disclaimer-body strong {
  font-weight: 800;
  color: #ffd07a;
  text-shadow: 0 0 8px rgba(255,184,74,.25);
}

/* 모바일 — 좀 더 타이트 + 우측 빗금 띠 얇게 */
@media (max-width: 680px) {
  .disclaimer { padding: 40px 0 30px; }
  .disclaimer-box { padding: 22px 18px; border-left-width: 3px; }
  .disclaimer-stripe { width: 4px; }
  .disclaimer-head { gap: 10px; margin-bottom: 12px; }
  .disclaimer-icon { font-size: 22px; }
  .disclaimer-label { font-size: 10.5px; letter-spacing: 2.5px; }
  .disclaimer-body { font-size: 12.5px; line-height: 1.75; }
}

/* ═══════════════════════════════════════════════════════════
   WELCOME DISCLAIMER POPUP · 진입 시 자동 표시
═══════════════════════════════════════════════════════════ */
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  opacity: 1;
  transition: opacity .5s cubic-bezier(.2,.8,.2,1);
}
.welcome-modal.closed {
  opacity: 0;
  pointer-events: none;
}
.welcome-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.welcome-content {
  position: relative;
  z-index: 1;
  max-width: 540px;
  width: 100%;
  padding: clamp(36px, 6vw, 52px) clamp(28px, 5vw, 44px) clamp(28px, 5vw, 40px);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 18px,
      rgba(255,170,0,.03) 18px 19px),
    rgba(8,8,8,.96);
  border: 1px solid rgba(255,200,80,.3);
  border-left: 4px solid #ffb84a;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,184,74,.08), inset 0 0 0 1px rgba(255,200,80,.05);
  text-align: center;
  transform: scale(.94) translateY(20px);
  opacity: 0;
  animation: welcomePopIn .65s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.welcome-modal.closed .welcome-content {
  transform: scale(.96) translateY(10px);
  transition: transform .4s ease, opacity .4s ease;
  opacity: 0;
}
@keyframes welcomePopIn {
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.welcome-stripe {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(-45deg, #ffb84a 0 8px, #1a1a1a 8px 16px);
  opacity: .7;
}

.welcome-icon {
  font-size: clamp(40px, 6vw, 54px);
  line-height: 1;
  color: #ffb84a;
  text-shadow: 0 0 20px rgba(255,184,74,.6);
  margin-bottom: clamp(14px, 2.5vw, 20px);
}
.welcome-icon img.emoji { height: 1em; width: 1em; margin: 0; vertical-align: -.1em; }

.welcome-label {
  font-family: 'Outfit',sans-serif;
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 900;
  letter-spacing: clamp(2.5px, .9vw, 4.5px);
  color: #ffb84a;
  text-shadow: 0 0 12px rgba(255,184,74,.35);
  margin-bottom: clamp(20px, 3.5vw, 28px);
  padding-bottom: clamp(18px, 3vw, 24px);
  border-bottom: 1px solid rgba(255,200,80,.18);
}

.welcome-body {
  font-family: 'Pretendard','Outfit',sans-serif;
  font-size: clamp(13.5px, 2.8vw, 16px);
  font-weight: 500;
  line-height: 1.9;
  color: rgba(255,255,255,.92);
  letter-spacing: -.2px;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin-bottom: clamp(28px, 5vw, 40px);
}
.welcome-body strong {
  font-weight: 800;
  color: #ffd07a;
  text-shadow: 0 0 10px rgba(255,184,74,.3);
}

.welcome-confirm {
  display: inline-block;
  padding: clamp(13px, 2.6vw, 16px) clamp(28px, 5vw, 40px);
  background: #ffb84a;
  color: #1a0e00;
  border: 0;
  font-family: 'Pretendard','Outfit',sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  border-radius: 2px;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 20px rgba(255,184,74,.3);
  -webkit-tap-highlight-color: transparent;
}
.welcome-confirm:hover {
  background: #ffd07a;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,184,74,.45);
}
.welcome-confirm:active {
  transform: translateY(0);
}

/* 모바일 */
@media (max-width: 680px) {
  .welcome-modal { padding: 16px; }
  .welcome-content { padding: 32px 22px 28px; border-left-width: 3px; }
  .welcome-stripe { width: 4px; }
  .welcome-icon { font-size: 36px; margin-bottom: 12px; }
  .welcome-label {
    font-size: 10.5px;
    letter-spacing: 3px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .welcome-body { font-size: 13px; line-height: 1.75; margin-bottom: 22px; }
  .welcome-confirm { padding: 12px 24px; font-size: 12px; }
}

/* WELCOME 오버레이 투명도 조정 — 배경 영상 은은하게 비침 */
.welcome-overlay {
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   FAN ART · 리스크 방지 안내 (카드 + 갤러리 힌트)
═══════════════════════════════════════════════════════════ */
.fanart-card.art .fanart-disclaimer {
  display: block;
  margin-top: 8px;
  font-family: 'Outfit','Pretendard',sans-serif;
  font-size: clamp(8.5px, 1.9vw, 10px);
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255,184,74,.85);
  line-height: 1.4;
  word-break: keep-all;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
}
.fanart-card.art .fanart-disclaimer img.emoji {
  height: .9em;
  width: .9em;
  margin: 0 .1em 0 0;
  vertical-align: -.1em;
}

/* 라이트박스 캡션 — 디스클레이머 살짝 강조 */
.lightbox-caption {
  max-width: 90%;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   LOOKBOOK · 화보집 카드 + 책 펼침 뷰어
═══════════════════════════════════════════════════════════ */

/* ─── 카드 미리보기 (FAN ART 갤러리 내) ─── */
.fanart-card.lookbook-card {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.fanart-card.lookbook-card {
  border: 1px solid rgba(255,200,80,.25);
  border-top: 3px solid #ffb84a;
  position: relative;
  overflow: hidden;
}
.fanart-card.lookbook-card::before {
  background: linear-gradient(90deg, var(--ferrari-red) 0%, var(--ferrari-red) 49%, #ffb84a 49%, #ffb84a 51%, var(--merc-teal) 51%, var(--merc-teal) 100%);
  box-shadow: 0 0 14px rgba(255,184,74,.5);
}
.lookbook-preview {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.lookbook-preview img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7) contrast(1.05);
  transition: filter .5s ease;
}
.lookbook-preview img.lb-left {
  border-right: 1px solid rgba(255,184,74,.3);
}
.fanart-card.lookbook-card:hover .lookbook-preview img {
  filter: brightness(.85) contrast(1.1);
}
.fanart-card.lookbook-card .fanart-caption {
  background: linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 60%, transparent 100%);
}
.fanart-card.lookbook-card .fanart-team { color: #ffb84a !important; text-shadow: 0 0 10px rgba(255,184,74,.4); }

/* ─── 모달 ─── */
.lookbook-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  opacity: 0;
  transition: opacity .4s ease;
}
.lookbook-modal.open { display: flex; opacity: 1; }
.lookbook-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  cursor: pointer;
}
.lookbook-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  font-family: 'Outfit',sans-serif;
  transition: background .25s, transform .25s, border-color .25s;
}
.lookbook-close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); transform: rotate(90deg); }

.lookbook-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 24px);
  width: 100%;
  max-width: 1200px;
}

.lookbook-nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  font-family: 'Outfit',sans-serif;
  transition: background .25s, transform .25s, border-color .25s;
  flex: 0 0 48px;
  line-height: 1;
}
.lookbook-nav:hover { background: rgba(255,184,74,.18); border-color: rgba(255,184,74,.6); color: #ffd07a; }
.lookbook-prev:hover { transform: translateX(-3px); }
.lookbook-next:hover { transform: translateX(3px); }

/* ─── 책 spread (두 페이지 펼침) ─── */
.lookbook-book {
  flex: 1 1 auto;
  max-width: clamp(600px, 80vw, 980px);
  perspective: 1800px;
}
.lookbook-spread {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.lookbook-page {
  flex: 1 1 0;
  position: relative;
  background: #050505;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.lookbook-page-left  { border-right: 0; }
.lookbook-page-right { border-left: 0; }
.lookbook-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transition: opacity .4s ease;
}
.lookbook-spine {
  width: 2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.15) 8%,
    rgba(0,0,0,.7) 50%,
    rgba(255,255,255,.15) 92%,
    rgba(255,255,255,0) 100%);
  box-shadow: 0 0 12px rgba(0,0,0,.9);
  z-index: 2;
  flex: 0 0 2px;
}
.lookbook-page-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  font-family: 'Outfit',sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  padding: 5px 10px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.lookbook-page-left .lookbook-page-label  { color: var(--ferrari-red); border-color: rgba(224,18,26,.5); text-shadow: 0 0 6px var(--ferrari-glow); }
.lookbook-page-right .lookbook-page-label { left: auto; right: 14px; color: var(--merc-teal); border-color: rgba(98,195,228,.5); text-shadow: 0 0 6px var(--merc-glow); }

/* ─── 페이지 넘김 애니메이션 ─── */
.lookbook-spread.flip-next .lookbook-page-right {
  animation: flipNextRight .55s cubic-bezier(.4,0,.4,1) forwards;
  transform-origin: left center;
}
.lookbook-spread.flip-next .lookbook-page-left img,
.lookbook-spread.flip-next .lookbook-page-right img { opacity: .55; }

.lookbook-spread.flip-prev .lookbook-page-left {
  animation: flipPrevLeft .55s cubic-bezier(.4,0,.4,1) forwards;
  transform-origin: right center;
}
.lookbook-spread.flip-prev .lookbook-page-left img,
.lookbook-spread.flip-prev .lookbook-page-right img { opacity: .55; }

@keyframes flipNextRight {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(-95deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes flipPrevLeft {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(95deg); }
  100% { transform: rotateY(0deg); }
}

/* ─── 하단 메타 (제목 · 카운터 · 디스클레이머) ─── */
.lookbook-meta {
  position: relative;
  z-index: 1;
  margin-top: clamp(18px, 3vw, 28px);
  text-align: center;
  font-family: 'Outfit','Pretendard',sans-serif;
}
.lookbook-title {
  display: inline-block;
  font-size: clamp(12px, 2.6vw, 14px);
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,.85);
  margin-right: 14px;
}
.lookbook-counter {
  display: inline-block;
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  color: #ffb84a;
  padding: 3px 10px;
  border: 1px solid rgba(255,184,74,.35);
  border-radius: 2px;
}
.lookbook-disclaimer {
  display: block;
  margin-top: 8px;
  font-size: clamp(9px, 2vw, 10.5px);
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255,184,74,.7);
}

/* ─── 모바일 ─── */
@media (max-width: 680px) {
  .lookbook-modal { padding: 50px 10px 70px; }
  .lookbook-stage { gap: 6px; }
  .lookbook-nav { width: 36px; height: 36px; font-size: 22px; flex: 0 0 36px; }
  .lookbook-book { perspective: 1200px; }
  .lookbook-spread { aspect-ratio: auto; }
  .lookbook-page { aspect-ratio: 3 / 4; }
  .lookbook-page-label { font-size: 9px; padding: 3px 7px; letter-spacing: 2px; bottom: 8px; left: 8px; }
  .lookbook-page-right .lookbook-page-label { right: 8px; }
  .lookbook-close { width: 36px; height: 36px; font-size: 20px; top: 12px; right: 12px; }
  .lookbook-title { font-size: 11px; margin-right: 10px; }
  .lookbook-counter { font-size: 11px; padding: 2px 8px; }
  .lookbook-disclaimer { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════
   LOOKBOOK CARD — 미니 썸네일 그리드 (책 미리보기 대체)
═══════════════════════════════════════════════════════════ */
.fanart-card.lookbook-card .lookbook-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 0;
  background: #000;
  z-index: 0;
}
.fanart-card.lookbook-card .lookbook-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7) contrast(1.05) saturate(.9);
  transition: filter .4s ease;
  border-right: none;
}
.fanart-card.lookbook-card:hover .lookbook-preview img {
  filter: brightness(.95) contrast(1.1) saturate(1);
}
/* Active state on mobile tap */
@media (hover: none) {
  .fanart-card.lookbook-card:active .lookbook-preview img { filter: brightness(.95); }
}

/* 카드 하단 텍스트가 그리드 위에 잘 보이게 */
.fanart-card.lookbook-card .fanart-caption {
  background: linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 70%, transparent 100%);
  z-index: 2;
}

/* 모바일 — 그리드 더 촘촘하게 */
@media (max-width: 680px) {
  .fanart-card.lookbook-card .lookbook-preview {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1px;
  }
}
@media (max-width: 420px) {
  .fanart-card.lookbook-card .lookbook-preview {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}

/* 화보집 카드 텍스트 정렬 통일 (데미안/에리크 네컷과 동일하게 가운데) */
.fanart-card.art .fanart-caption {
  text-align: center;
  align-items: center;
}
.fanart-card.lookbook-card {
  text-align: center !important;
}

/* 라이트박스를 화보집 모달 위로 (1200 → 1300) */
.lightbox { z-index: 1300; }

/* 화보집 페이지 이미지 호버 줌 인디케이터 */
.lookbook-page { position: relative; }
.lookbook-page::after {
  content: '⊕';
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.lookbook-page:hover::after { opacity: 1; }
.lookbook-page-left::after { left: 12px; right: auto; }
@media (hover: none) {
  .lookbook-page::after { opacity: .8; width: 26px; height: 26px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   FAN ART 모바일 — 카드 3장 한 화면 (이전 50% → 33%)
═══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .fanart-track {
    padding: 16px 10px 22px;
    scroll-padding-left: 10px;
    gap: 6px;
  }
  .fanart-card.art {
    flex: 0 0 calc(33.333% - 4px);
    aspect-ratio: 4 / 5;
  }
  /* 카드 안 텍스트 좀 더 컴팩트하게 */
  .fanart-card.art .fanart-team { font-size: 7.5px; letter-spacing: 1px; }
  .fanart-card.art .fanart-title { font-size: 12px; }
  .fanart-card.art .fanart-disclaimer { font-size: 7.5px; letter-spacing: .5px; margin-top: 4px; }
  .fanart-card.art .fanart-num {
    font-size: 8px;
    padding: 2px 5px;
    top: 8px;
    right: 8px;
  }
  .fanart-card.art::after {
    width: 22px;
    height: 22px;
    font-size: 12px;
    bottom: 8px;
    right: 8px;
  }
  .fanart-caption {
    padding: 10px 8px 8px;
  }
  /* 화보집 카드 미니 그리드 — 모바일에서도 작은 칸 유지 */
  .fanart-card.lookbook-card .lookbook-preview {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1px;
  }
}

@media (max-width: 420px) {
  .fanart-card.art .fanart-title { font-size: 11px; }
  .fanart-card.art .fanart-team { font-size: 7px; }
  .fanart-card.art .fanart-disclaimer { font-size: 7px; }
  .fanart-caption { padding: 8px 6px 6px; }
}

/* ═══════════════════════════════════════════════════════════
   2026 SEASON · DRIVER SELECT (Black Apex / White Fang)
═══════════════════════════════════════════════════════════ */

/* ── 시즌 블록: 연도별 인물 선택 그룹 ── */
.season-block { max-width: 1100px; margin: 0 auto; }
.season-block + .season-block { margin-top: clamp(64px, 9vw, 110px); }
.season-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(9px, 1.6vw, 15px);
  padding-bottom: clamp(13px, 2vw, 18px);
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.season-yr {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 6.5vw, 56px); font-weight: 900;
  letter-spacing: -2px; line-height: .85; color: #fff;
}
.season-tag {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8px, 1.8vw, 10px); font-weight: 800; letter-spacing: 2px;
  padding: 5px 10px; white-space: nowrap; border-radius: 2px;
}
.season-block.s2025 .season-tag { color: var(--ferrari-red); border: 1px solid rgba(224,18,26,.5); }
.season-block.s2026 .season-tag { color: var(--apex-red); border: 1px solid rgba(255,45,45,.5); }
.season-matchup {
  margin-left: auto;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px, 2vw, 12px); font-weight: 700; letter-spacing: 2px;
  color: rgba(255,255,255,.5); white-space: nowrap;
}
.season-matchup b { color: #fff; font-weight: 900; }
/* 모바일: 매치업을 줄바꿈해 아래로 — 큰 연도+태그는 한 줄 유지 */
@media (max-width: 600px) {
  .season-matchup { margin-left: 0; flex-basis: 100%; }
}

/* ── 신캐 드라이버 카드: Adrian / Noah ── */
.driver-card.adrian .driver-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 38%, rgba(120,8,12,.86) 100%);
  opacity: .82;
}
.driver-card.noah .driver-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 38%, rgba(40,42,50,.92) 100%);
  opacity: .82;
}
.driver-card.adrian .driver-team { color: var(--apex-red); }
.driver-card.noah .driver-team { color: var(--fang-white); }
.driver-card.adrian:hover { box-shadow: 0 30px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(255,45,45,.25); }
.driver-card.noah:hover { box-shadow: 0 30px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.22); }

/* NEW 배지 색상 변형 */
.driver-new-tag.apex { border-color: rgba(255,45,45,.6); color: #ff8a8a; }
.driver-new-tag.fang { border-color: rgba(255,255,255,.5); color: #fff; }

/* ── 시즌별 hero 진입 버튼 ── */
.btn.cta-apex { border-left: 3px solid var(--apex-red); }
.btn.cta-apex::after { background: var(--apex-red); }
.btn.cta-apex:hover { border-color: var(--apex-red); box-shadow: 0 10px 40px var(--apex-glow); color: #fff; letter-spacing: 6px; }
.btn.cta-apex:hover::after { transform: scaleY(1); transform-origin: top; }
.btn.cta-fang { border-left: 3px solid var(--fang-white); }
.btn.cta-fang::after { background: var(--fang-white); }
.btn.cta-fang:hover { border-color: var(--fang-white); box-shadow: 0 10px 40px var(--fang-glow); color: #000; letter-spacing: 6px; }
.btn.cta-fang:hover::after { transform: scaleY(1); transform-origin: top; }
.btn.is-soon, .btn.is-soon:hover { opacity: .5; cursor: default; box-shadow: none; letter-spacing: 4px; border-color: rgba(255,255,255,.08); color: #fff; }
.btn.is-soon:hover::after { transform: scaleY(0); }

/* ── cta-big 버튼: Adrian / Noah ── */
.cta-big.adrian-btn { border-left: 3px solid var(--apex-red); }
.cta-big.adrian-btn::after { background: var(--apex-red); }
.cta-big.adrian-btn:hover { box-shadow: 0 20px 60px rgba(255,45,45,.25); }
.adrian-btn .cta-big-num { color: var(--apex-red); }
.cta-big.noah-btn { border-left: 3px solid var(--fang-white); }
.cta-big.noah-btn::after { background: var(--fang-white); }
.cta-big.noah-btn:hover { box-shadow: 0 20px 60px rgba(255,255,255,.14); }
.noah-btn .cta-big-num { color: var(--fang-white); }

/* COMING SOON 비활성 상태 (Adrian — 스토리 미오픈) */
.cta-big.is-soon { cursor: default; }
.cta-big.is-soon:hover { transform: none; background: #050505; box-shadow: none; }
.cta-big.is-soon:hover::after { width: 4px; }
.cta-big.is-soon .cta-big-name { color: rgba(255,255,255,.55); }
.cta-big-sub.soon { color: var(--apex-red); }

/* cta-tail 4버튼 그리드 안 시즌 구분 라벨 */
.cta-season-label {
  grid-column: 1 / -1;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9px, 2vw, 11px); font-weight: 800; letter-spacing: 4px;
  text-align: left; padding: clamp(10px,2vw,16px) 2px 2px;
  display: flex; align-items: center; gap: 12px;
}
.cta-season-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.cta-season-label.s2025 { color: var(--ferrari-red); }
.cta-season-label.s2026 { color: var(--apex-red); }
.cta-tail-buttons .cta-season-label:first-child { padding-top: 0; }

/* ── 2026 프로필 페이지 nav-rivals ── */
.nav-rivals a.apex, .nav-rivals a.fang { color: rgba(255,255,255,.4); }
.nav-rivals a.apex:hover, .nav-rivals a.apex.active { color: #fff; }
.nav-rivals a.fang:hover, .nav-rivals a.fang.active { color: #fff; }
.nav-rivals a.apex.active::after { background: var(--apex-red); }
.nav-rivals a.fang.active::after { background: var(--fang-white); }

/* ═══════════════════════════════════════════════════════════
   SEASON SELECT SPLASH — 좌우 동적 split-screen (한 화면)
   호버한 쪽이 크게 확장 · 인물 이미지 풀블리드 · 스크롤 없음
═══════════════════════════════════════════════════════════ */
.entry {
  position: relative;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: row;
  overflow: hidden; background: #000;
}

.entry-half {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: flex-end;
  overflow: hidden; text-decoration: none;
  transition: flex .65s cubic-bezier(.16,1,.3,1);
}
.entry-half.s2026 { border-right: 1px solid rgba(255,255,255,.14); }

/* 데스크톱: 호버한 쪽이 크게 확장 — 둘 중 하나 선택 */
@media (hover: hover) and (min-width: 761px) {
  .entry:hover .entry-half { flex: 1; }
  .entry:hover .entry-half:hover { flex: 1.75; }
  .entry:hover .entry-half:not(:hover) .entry-imgs img { filter: brightness(.34) contrast(1) saturate(.7); }
  .entry:hover .entry-half:not(:hover) .entry-content { opacity: .55; }
}

.entry-imgs { position: absolute; inset: 0; z-index: 0; display: flex; }
.entry-imgs img {
  width: 50%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: brightness(.66) contrast(1.05) saturate(.98);
  transition: filter .55s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.entry-half:hover .entry-imgs img { filter: brightness(.96) contrast(1.08) saturate(1.06); transform: scale(1.04); }

.entry-overlay { position: absolute; inset: 0; z-index: 1; }
.entry-half.s2026 .entry-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.14) 52%, rgba(8,2,3,.82) 80%, rgba(120,8,12,.93) 100%);
}
.entry-half.s2025 .entry-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.14) 52%, rgba(2,8,7,.82) 80%, rgba(8,60,54,.9) 100%);
}

.entry-content {
  position: relative; z-index: 2; width: 100%; text-align: center;
  padding: clamp(24px,5vw,50px) clamp(14px,2.6vw,32px) clamp(40px,7vh,74px);
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.entry-half:hover .entry-content { transform: translateY(-8px); }

.entry-tag {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8px,1.2vw,12px); font-weight: 800;
  letter-spacing: clamp(2px,.7vw,5px);
  margin-bottom: clamp(6px,1vw,12px);
}
.entry-half.s2026 .entry-tag { color: var(--apex-red); text-shadow: 0 0 18px var(--apex-glow); }
.entry-half.s2025 .entry-tag { color: var(--ferrari-red); text-shadow: 0 0 18px var(--ferrari-glow); }

.entry-year {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(56px,9.5vw,156px); line-height: .82;
  letter-spacing: -4px; color: #fff;
  text-shadow: 0 8px 38px rgba(0,0,0,.9);
}
.entry-match {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(13px,1.7vw,24px); letter-spacing: -.3px;
  color: #fff; margin-top: clamp(6px,1vw,12px);
}
.entry-match .vs {
  font-weight: 300; font-style: italic; font-size: .7em;
  color: rgba(255,255,255,.55); padding: 0 .25em;
}
.entry-teams {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(7.5px,1vw,10.5px); letter-spacing: clamp(1px,.5vw,2.5px);
  color: rgba(255,255,255,.55); margin-top: clamp(8px,1.4vw,14px);
}
.entry-go {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(16px,2.4vw,26px);
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: clamp(10px,1.4vw,12px); font-weight: 800; letter-spacing: 3px; color: #fff;
  padding: clamp(11px,1.6vh,15px) clamp(22px,2.6vw,38px);
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  transition: background .3s ease, border-color .3s ease, letter-spacing .3s ease;
}
.entry-half:hover .entry-go { letter-spacing: 5px; }
.entry-half.s2026:hover .entry-go { background: var(--apex-red); border-color: var(--apex-red); }
.entry-half.s2025:hover .entry-go { background: var(--ferrari-red); border-color: var(--ferrari-red); }
.entry-go span { transition: transform .3s ease; }
.entry-half:hover .entry-go span { transform: translateX(6px); }

.entry-brand {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(12px,2.4vh,22px) 20px; pointer-events: none;
}
.entry-brand-name {
  font-family: 'Outfit', sans-serif; font-size: clamp(11px,2.4vw,15px);
  font-weight: 900; letter-spacing: clamp(4px,1.5vw,8px); color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
}
.entry-brand-sub {
  font-family: 'Outfit', sans-serif; font-size: clamp(7.5px,1.6vw,9px);
  font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,.55);
  margin-top: 5px; text-shadow: 0 2px 12px rgba(0,0,0,.95);
}
.entry-foot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  text-align: center; padding: clamp(8px,1.6vh,13px) 16px;
  pointer-events: none;
  font-size: clamp(7px,1.5vw,8.5px); letter-spacing: 1px;
  color: rgba(255,255,255,.5);
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}

/* ── 모바일·태블릿: 좌우 → 상하 스택 · 각 시즌이 가로 전체 사용 ── */
@media (max-width: 760px) {
  .entry { flex-direction: column; }
  .entry-half { flex: 1; min-height: 0; }
  .entry-half.s2026 {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .entry-content {
    padding: clamp(16px,3.5vw,30px) clamp(16px,5vw,30px) clamp(40px,6vh,56px);
  }
  .entry-tag {
    font-size: clamp(9px,2.6vw,11px);
    letter-spacing: 3px;
    margin-bottom: clamp(5px,1.4vw,9px);
  }
  .entry-year { font-size: clamp(48px,16vw,110px); letter-spacing: -2px; }
  .entry-match { font-size: clamp(13px,3.8vw,21px); margin-top: clamp(5px,1.4vw,9px); }
  .entry-teams { font-size: clamp(8px,2.3vw,10.5px); margin-top: clamp(8px,2vw,13px); }
  .entry-go {
    margin-top: clamp(13px,3vw,20px);
    font-size: clamp(10px,2.6vw,12px);
    padding: clamp(11px,2.4vw,14px) clamp(24px,6vw,36px);
  }
}

/* 아주 좁은 화면: 텍스트 한 번 더 압축 */
@media (max-width: 380px) {
  .entry-year { font-size: clamp(42px,15vw,58px); }
  .entry-teams { letter-spacing: 1px; }
}

/* ═══════════ 시즌 페이지 → 스플래시 복귀 링크 ═══════════ */
.entry-back {
  position: fixed; left: clamp(14px,3vw,26px); bottom: clamp(14px,3vw,26px);
  z-index: 120;
  font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 3px; color: rgba(255,255,255,.7);
  background: rgba(5,5,5,.72); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  padding: 11px 18px; border-radius: 40px;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.entry-back:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(15,15,15,.92); }
.in-iframe .entry-back { display: none !important; }

/* ═══════════ 정적 히어로 (season-2026) ═══════════ */
.hero-split-bg { position: absolute; inset: 0; z-index: 0; display: flex; }
.hero-split-bg img {
  width: 50%; height: 100%; object-fit: cover; object-position: top center;
  filter: brightness(.4) contrast(1.06) saturate(.92);
}
.hero-split-bg img:first-child { border-right: 1px solid rgba(255,255,255,.06); }
.hero-static .hero-overlay {
  background:
    radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 32%, transparent 68%, rgba(0,0,0,.62) 100%);
}