:root{
--bg:#010d1c;
--ink:#e8eef6;
--muted:#a9b7c7;
--brand1:#ab4dee;
--brand2:#4fbaf7;
--glass:rgba(255,255,255,.08);
--card:rgba(255,255,255,.06);
--stroke:rgba(255,255,255,.12);
--shadow:0 10px 30px rgba(0,0,0,.35);
--radius:18px;
--radius-lg:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',system-ui,Segoe UI,Apple SD Gothic Neo,sans-serif;}


a, .btn {text-decoration:none !important;}


.nav{position:fixed;inset:0 auto auto 0;height:72px;width:100%;display:flex;align-items:center;z-index:1000;transition:background .3s ease, box-shadow .3s ease;}
.nav-inner{width:min(1200px,92%);margin-inline:auto;display:flex;align-items:center;gap:18px}
.nav .logo{display:flex;align-items:center;gap:10px}
.nav .logo img{height:38px;width:auto;display:block}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav a{color:var(--ink);font-weight:700;padding:10px 14px;border-radius:12px;opacity:.95;text-align:center}
.nav a:hover{background:var(--glass)}
.nav-cta{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#001018;padding:10px 16px;border-radius:14px;font-weight:900;text-align:center}


.nav.scrolled{backdrop-filter:saturate(160%) blur(8px);background:rgba(1,13,28,.65);box-shadow:0 6px 18px rgba(0,0,0,.25)}


.hamburger{display:none;cursor:pointer;border:1px solid var(--stroke);padding:8px 11px;border-radius:12px}
#menu-toggle{display:none}
@media (max-width: 1024px){
.nav-links{display:none}
.hamburger{display:inline-flex;margin-left:auto}
#menu-toggle:checked ~ .sheet{max-height:320px;opacity:1;transform:translateY(0)}
}
.sheet{position:absolute;top:72px;left:0;right:0;margin:auto;width:min(1200px,92%);background:rgba(5,18,35,.9);border:1px solid var(--stroke);border-radius:16px;display:flex;flex-direction:column;gap:6px;padding:10px;max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:all .25s ease}
.sheet a{padding:12px 14px;border-radius:12px;text-align:center}
.sheet a:hover{background:var(--glass)}


.hero{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:url('/resources/images/main_image2.webp') center/cover no-repeat;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 20%,rgba(0,0,0,.08),rgba(0,0,0,.62) 55%, rgba(0,0,0,.85));z-index:-1}


.hero-inner{width:min(1100px,92%);margin-inline:auto;text-align:center;padding-block:6vh}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--stroke);border-radius:999px;background:var(--glass);font-size:14px;color:var(--muted)}
.title{margin:18px 0 14px;font-weight:900;letter-spacing:.4px;line-height:1.08;font-size:clamp(30px,7.4vw,64px);text-shadow:0 8px 28px rgba(0,0,0,.35)}
.title span{background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{max-width:780px;margin:0 auto;color:#b5d0ff;font-size:clamp(15px,2.6vw,18px);opacity:.92}


.cta-row{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{appearance:none;border:none;cursor:pointer;border-radius:14px;padding:14px 18px;font-weight:800;text-align:center}
.btn-primary{background:linear-gradient(90deg,var(--brand1),var(--brand1));color:#000000;box-shadow:var(--shadow)}
.btn-ghost{background:var(--glass);border:1px solid var(--stroke);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-ghost:active{transform:translateY(0);filter:brightness(1.05)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--brand1);outline-offset:2px}

.btn:hover{transform:translateY(-2px)}


.band{padding-block:80px;text-align:center}
.band-inner{width:min(1100px,92%);margin-inline:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.band figure{margin:0}
.band .shot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--stroke);box-shadow:var(--shadow)}
.band h2{margin:0 0 10px;font-weight:900;font-size:clamp(20px,3.4vw,28px)}
.band .lead{font-size:clamp(14px,2.6vw,18px);color:var(--muted);margin:12px 0 24px}
@media (max-width: 1024px){.band-inner{grid-template-columns:1fr;gap:20px}}


.section{padding-block:84px;border-top:1px solid var(--stroke)}
.section-inner{width:min(1100px,92%);margin-inline:auto}
.section h3{font-size:clamp(20px,4.6vw,30px);font-weight:900;background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.section h3{margin:0 0 12px}
.section .section-inner > p{margin:0 0 24px}
.band h2{margin:0 0 12px}
.band .lead{margin:12px 0 24px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid.partners {grid-template-columns:repeat(4,1fr);}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
.card img{width:100%;height:190px;object-fit:cover;display:block}
.card .body{padding:14px 14px 16px;}
.card .body h4{margin:0 0 8px;font-size:16px}
.card .body p{margin:0;color:var(--muted);font-size:14px}


.action{margin-top:18px;display:flex;justify-content:center}
.action .btn{min-width:240px;text-align:center}


footer{border-top:1px solid var(--stroke);padding:28px 0;color:#8ea0b4}
.foot-inner{width:min(1100px,92%);margin-inline:auto;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.foot-inner small{opacity:.8}

/* 태블릿: 768~1024px → 2열 */
@media (min-width:768px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .grid.partners{grid-template-columns:repeat(2,1fr)}
}

/* 모바일: ≤767px → 1열 */
@media (max-width:767px){
  .grid,
  .grid.partners{ grid-template-columns:1fr; }
}

a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--brand1);
  outline-offset:2px;
}

.subtitle{
  max-width: 860px;        /* 살짝 넓혀 줄 수 있음(기존 780px) */
  line-height: 1.75;        /* 가독성 업 */
  letter-spacing: 0.5px;   /* 미세 커닝 */
  margin-top: 10px;
}

@media (max-width: 480px){
  .subtitle{ line-height: 1.65; }
}

.nav.scrolled{
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(1,13,28,.72);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

#final-cta.section{padding-block:100px}
#final-cta .action .btn{min-width:220px}
