@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  --navy-dark: #0a192f;
  --navy-medium: #112240;
  --navy-light: #233554;
  --gold-light: #FFD700;
  --slate: #8892b0;
  --white: #e6f1ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  background: var(--navy-dark);
  color: var(--slate);
  margin: 0;
}

.bg-navy-dark { background-color: var(--navy-dark); }
.bg-navy-medium { background-color: var(--navy-medium); }
.bg-navy-light { background-color: var(--navy-light); }
.text-slate { color: var(--slate); }
.text-gold-light { color: var(--gold-light); }
.text-white { color: #ffffff; }
.border-navy-light { border-color: var(--navy-light); }
.border-navy-medium { border-color: var(--navy-medium); }

a { text-decoration: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.site-header { position: sticky; top: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled { background: rgba(10, 25, 47, 0.85); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(2,12,27,0.7); }

.navbar { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand img { height: 40px; display: block; }

.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }

.nav-link { position: relative; font-weight: 600; color: var(--white); padding: .25rem 0; transition: color .25s ease; }
.nav-link:hover { color: #fff; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: var(--gold-light); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { background: var(--gold-light); color: var(--navy-dark); font-weight: 800; border-radius: 8px; padding: .5rem 1rem; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.nav-cta:hover { transform: translateY(-1px); opacity: .95; box-shadow: 0 8px 22px rgba(255,215,0,.3); }

.dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--navy-medium); border: 1px solid var(--navy-light); padding: .5rem 0; border-radius: 10px; box-shadow: 0 10px 30px -10px rgba(2,12,27,0.7); min-width: 220px; display: none; z-index: 60; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-item { display: block; padding: .6rem 1rem; color: var(--slate); }
.dropdown-item:hover { background: var(--navy-light); color: #fff; }

.mobile-toggle { display: inline-flex; align-items: center; gap: .5rem; color: #fff; }
@media (min-width: 768px) { .mobile-toggle { display: none; } }

.mobile-panel { position: fixed; inset: 0 0 0 auto; width: 90%; max-width: 360px; background: var(--navy-medium); border-left: 1px solid var(--navy-light); transform: translateX(100%); transition: transform .35s ease; z-index: 70; display: flex; flex-direction: column; padding: 1.25rem; }
.mobile-panel.open { transform: translateX(0); }
.mobile-item { padding: .75rem 0; color: #fff; border-bottom: 1px dashed var(--navy-light); }
.mobile-cta { margin-top: 1rem; padding: .75rem 1rem; text-align: center; border: 1px solid var(--gold-light); color: var(--gold-light); border-radius: 10px; }

.section { padding: 4rem 0 3rem; }
.hero { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); line-height: 1.15; color: #fff; font-weight: 900; }
.lead { font-size: clamp(1rem, 1.1vw + .8rem, 1.25rem); max-width: 56ch; margin: 1rem auto 0; color: var(--slate); }

.card { background: var(--navy-medium); border: 1px solid var(--navy-light); border-radius: 14px; padding: 1.25rem; transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.25); }

.grid-3 { display: grid; gap: 1rem; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* Hall of Fame gallery */
.hof-row { position: relative; overflow: hidden; }
.hof-row::before,
.hof-row::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 2; }
.hof-row::before { left: 0; background: linear-gradient(90deg, rgba(10,25,47,0.9), rgba(10,25,47,0)); }
.hof-row::after { right: 0; background: linear-gradient(270deg, rgba(10,25,47,0.9), rgba(10,25,47,0)); }
.hof-track { display: flex; gap: 1rem; padding: .25rem; user-select: none; cursor: grab; scroll-behavior: smooth; overflow-x: scroll; scrollbar-width: none; scroll-snap-type: x proximity; }
.hof-track::-webkit-scrollbar { display: none; }
.hof-card { min-width: 300px; max-width: 300px; background: var(--navy-dark); border: 1px solid var(--navy-light); border-radius: 14px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; scroll-snap-align: start; box-shadow: 0 12px 20px rgba(0,0,0,.25); }
.hof-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(0,0,0,.35); }
.hof-card img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--navy-light); transition: transform .3s ease; }
.hof-card:hover img { transform: scale(1.03); }
.hof-card .meta { padding: .75rem 1rem; font-size: .95rem; color: var(--slate); }
.hof-controls { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: .5rem; padding: .75rem; pointer-events: none; z-index: 3; }
.hof-button { pointer-events: all; background: rgba(35,53,84,.9); border: 1px solid rgba(56, 189, 248, .35); border-radius: 999px; padding: .5rem .85rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; backdrop-filter: blur(6px); }
.hof-button:hover,
.hof-button:focus-visible { background: rgba(56,189,248,.9); color: var(--navy-dark); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(56,189,248,.35); outline: none; }
.hof-button:focus-visible { box-shadow: 0 0 0 2px rgba(10,25,47,1), 0 0 0 4px rgba(56,189,248,.6); }

.site-footer { border-top: 1px solid var(--navy-light); padding: 2rem 0; margin-top: 2rem; }

.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Language Toggle */
.lang-toggle {
  position: relative; display: inline-flex; align-items: center;
  background: var(--navy-light); border: 1px solid var(--navy-medium);
  border-radius: 999px; padding: 2px; gap: 6px; height: 32px; min-width: 82px;
}
.lang-toggle input { display: none; }
.lang-pill {
  position: absolute; top: 2px; bottom: 2px; width: calc(50% - 2px);
  background: var(--gold-light); border-radius: 999px; transition: transform .25s ease;
  transform: translateX(0);
}
.lang-toggle input:checked + .lang-pill { transform: translateX(100%); }
.lang-opt { position: relative; z-index: 1; font-size: 12px; font-weight: 800; color: #0a192f; padding: 0 10px; }
.lang-opt.muted { color: var(--white); opacity: .65; }

/* Competitions expandable cards */
.comp-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .comp-grid { grid-template-columns: repeat(3, 1fr); } }
.comp-card { background: var(--navy-medium); border: 1px solid var(--navy-light); border-radius: 14px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.comp-card.open { transform: scale(1.02); box-shadow: 0 16px 32px rgba(0,0,0,.25); }
.comp-head { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.25rem; cursor: pointer; }
.comp-title { color: #fff; font-weight: 800; }
.comp-desc { max-height: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; opacity: 0; }
.comp-card.open .comp-desc { max-height: 400px; opacity: 1; }
.comp-body { padding: 0 1.25rem 1rem; color: var(--slate); font-size: .95rem; }
.comp-tag { display:inline-block; margin-right: .5rem; margin-bottom: .5rem; padding:.25rem .5rem; border:1px solid var(--navy-light); border-radius:999px; font-size:12px; color:var(--white); }

/* Service CTAs on home */
.service-ctas { display:grid; gap:1rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .service-ctas { grid-template-columns: repeat(4,1fr); } }
.service-card { background: var(--navy-medium); border: 1px solid var(--navy-light); border-radius: 14px; padding:1.25rem; text-align:center; transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.25); }
.service-card .title { color:#fff; font-weight:900; margin-bottom:.25rem; }
.service-card .hint { font-size:.9rem; color:var(--slate); }
.service-card a { display:block; padding:.5rem .75rem; margin-top:.75rem; border:1px solid var(--gold-light); color: var(--gold-light); border-radius:10px; }

/* HoF controls clickable */
.hof-controls { pointer-events: auto; }


/* Progress bar at top */
.progress-wrap { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 80; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #FFD700, #ffef9f); transition: width .1s linear; }

/* Back-to-top button */
.back-to-top { position: fixed; right: 16px; bottom: 16px; background: var(--navy-light); border:1px solid var(--navy-medium);
  color:#fff; padding:.6rem .8rem; border-radius:999px; box-shadow:0 10px 20px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; }
.back-to-top.show { opacity:1; pointer-events:auto; transform: translateY(0); }

/* KPI counters */
.kpi-grid { display:grid; gap:1rem; margin-top:1.25rem; }
@media (min-width: 900px) { .kpi-grid { grid-template-columns: repeat(4,1fr); } }
.kpi-card { background: var(--navy-medium); border: 1px solid var(--navy-light); border-radius: 14px; padding:1rem; text-align:center; }
.kpi-number { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); color:#fff; font-weight:900; }
.kpi-label { color: var(--slate); }

/* Stepper / roadmap */
.stepper { counter-reset: step; }
.step { background: var(--navy-medium); border:1px solid var(--navy-light); border-radius:14px; margin-bottom: .75rem; overflow:hidden; }
.step summary { list-style:none; cursor:pointer; padding:1rem 1.25rem; color:#fff; font-weight:800; display:flex; align-items:center; gap:.5rem; }
.step summary::before { counter-increment: step; content: counter(step) "."; color: var(--gold-light); }
.step .content { padding:0 1.25rem 1rem; color: var(--slate); }
.step[open] { box-shadow: 0 16px 32px rgba(0,0,0,.25); }

/* Checklist */
.checklist { display:grid; gap:.5rem; margin-top:.5rem; }
.checklist label { display:flex; align-items:flex-start; gap:.5rem; background: var(--navy-medium); border: 1px dashed var(--navy-light); color: var(--slate);
  border-radius:12px; padding:.6rem .8rem; }
.checklist input { transform: translateY(2px); }

/* Chips */
.chips { display:flex; gap:.5rem; flex-wrap: wrap; }
.chip { border:1px solid var(--navy-light); background: var(--navy-medium); color:#fff; border-radius:999px; padding:.25rem .6rem; font-size: 12px; }
.chip.active { border-color: var(--gold-light); color: var(--gold-light); }

/* Lightbox */
.lightbox { position: fixed; inset:0; background: rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index: 90; backdrop-filter: blur(6px); padding: 3vh 3vw; }
.lightbox.open { display:flex; }
.lightbox img { max-width: 96vw; max-height: 96vh; width: auto; height: auto; border-radius: 16px; border:1px solid rgba(56,189,248,.35); background:#050b1a; box-shadow: 0 20px 60px rgba(0,0,0,.45); object-fit: contain; }
.lightbox-close { position:absolute; top:12px; right:12px; background: rgba(10,25,47,.9); color:#fff; border:1px solid var(--navy-light); border-radius:999px; padding:.4rem .6rem; }