:root{
  --navy:#0b1e34; --navy-2:#13294b; --navy-3:#1d3a5f;
  --ink:#f5f5f5; --muted:#b9c4d4;
  --accent:#2e5ba8; --accent-2:#3d73c1;
  --white:#ffffff; --panel:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden} /* 모바일 우측 잘림 방지 */
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:#0a0a0a; min-height:100dvh;
  -webkit-text-size-adjust:100%;
}
a{color:var(--white); text-decoration:none}
img{max-width:100%; display:block}

/* utilities */
.nowrap{white-space:nowrap}

.container{width:min(1100px,92%); margin:0 auto}
.section{padding:56px 0}
.section.alt{background:var(--navy-2)}

.topbar {
  font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:var(--navy-3);
}
.topbar-inner {
  display:flex;
  flex-direction:column;   /* 세로 쌓기 */
  align-items:flex-start;  /* 왼쪽 정렬 */
  gap:4px;                 /* 줄 간격 */
  padding:8px 0;
}
.topbar-line {
  white-space:nowrap;      /* 숫자 깨지지 않게 */
}


/* header/nav */
.site-header{position:sticky; top:0; z-index:50; background:var(--navy); transition:box-shadow .25s, background-color .25s; border-bottom:1px solid rgba(255,255,255,.1)}
.site-header.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.35)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:36px; height:36px; border-radius:8px; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.brand-text{font-weight:800; letter-spacing:.2px; color:var(--white)}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{opacity:.95}
.nav-toggle{display:none}
.nav-toggle-bar{width:22px; height:2px; background:currentColor; box-shadow:0 6px 0 currentColor, 0 12px 0 currentColor}

/* hero */
.hero{position:relative; overflow:hidden}
.bg-shape{position:absolute; inset:-20% -10% auto -10%; height:60vh; background:radial-gradient(560px 300px at 22% 28%, rgba(46,91,168,.3), transparent 65%); pointer-events:none}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; min-height:62vh; padding:24px 0 8px}
.hero h1{font-size:clamp(28px,4vw,44px); margin:0 0 10px}
.tagline{font-size:1.05rem; color:var(--muted); max-width:52ch}
.hero-ctas{display:flex; gap:12px; margin:16px 0 8px; flex-wrap:wrap}
.hero-facts{display:flex; gap:14px; flex-wrap:wrap; padding:0; margin:10px 0 0; list-style:none}
.hero-image{width:100%; max-width:520px; border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.45)}

/* buttons */
.btn{background:var(--accent); color:var(--white); padding:10px 18px; border:none; border-radius:10px; font-weight:800; cursor:pointer}
.btn:hover{background:var(--accent-2)}
.btn-outline{background:transparent; color:var(--white); border:2px solid var(--white)}
.btn-outline:hover{background:var(--navy-2); border-color:var(--accent-2); color:var(--white)}
.btn-small{padding:8px 12px}

/* cards/features */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px}
.card{background:var(--navy-2); padding:20px; border-radius:14px; border:1px solid var(--panel)}
.card h3{margin:0 0 8px}
.card .time{font-size:1.05rem}
.card .hint{color:var(--muted)}
.card.accent{border-color:var(--accent-2)}
.features{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px}
.feature{background:var(--navy-3); padding:18px; border-radius:12px; border:1px solid var(--panel)}
.feature .icon{font-size:24px; margin-bottom:8px; color:var(--accent-2)}

/* video */
.video-card{background:var(--navy); border:1px solid var(--panel); border-radius:14px; padding:16px}
.video-wrap{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px}
.hero-video{width:100%; height:100%; object-fit:cover; display:block; border:0; border-radius:12px}
.video-note{color:var(--muted); font-size:.95rem; margin-top:8px}

/* location/map */
.grid.two{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
.contact-card{background:var(--navy-2); padding:18px; border-radius:12px; border:1px solid var(--panel)}
.contact-card .label{font-weight:800; color:var(--muted); margin:.5rem 0 .15rem}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.map-wrap{border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.15)}
.map-wrap iframe{width:100%; aspect-ratio:16 / 9; border:0; display:block}

/* footer */
.site-footer{border-top:1px solid rgba(255,255,255,.12); background:var(--navy)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0}
.brand-foot{font-weight:800; margin:.2rem 0}

/* a11y + reveal */
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:8px; top:8px; background:#000; padding:8px; border-radius:8px; color:#fff}
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s}
[data-reveal].is-visible{opacity:1; transform:translateY(0)}

/* back to top */
#backToTop{position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px; border:2px solid var(--white); background:var(--navy-3); color:var(--white); font-weight:800; cursor:pointer; display:none; align-items:center; justify-content:center}
#backToTop.show{display:flex}

/* responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex; background:transparent; border:0; color:var(--white)}
  .nav-links{position:absolute; inset:60px 0 auto 0; display:none; flex-direction:column; gap:10px; padding:12px; background:var(--navy); border-top:1px solid rgba(255,255,255,.12)}
  .nav-links.open{display:flex}
}

/* phones */
@media (max-width:600px){
  .topbar-inner{gap:10px}
  .btn{padding:10px 14px}
}

/* tiny phones */
@media (max-width:420px){
  .topbar{font-size:.9rem}
  .topbar-inner{gap:8px}
  .btn{padding:9px 12px}
}