@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Rajdhani:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Kufi+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&display=swap');
/* 접속 언어(html/element lang)에 따라 해당 스크립트의 Noto 폰트 적용 — 사이트가 다국어화되면 자동 반영 */
:lang(ja){font-family:'Noto Sans JP','Rajdhani',sans-serif}
:lang(zh){font-family:'Noto Sans SC','Rajdhani',sans-serif}
:lang(zh-TW),:lang(zh-Hant){font-family:'Noto Sans TC','Rajdhani',sans-serif}
:lang(th){font-family:'Noto Sans Thai','Rajdhani',sans-serif}
:lang(ar),:lang(fa),:lang(ur){font-family:'Noto Kufi Arabic','Rajdhani',sans-serif;direction:rtl}
:lang(he){font-family:'Noto Sans Hebrew','Rajdhani',sans-serif;direction:rtl}
:lang(hi),:lang(mr),:lang(ne){font-family:'Noto Sans Devanagari','Rajdhani',sans-serif}
:root{
  --bg:#05070f; --bg2:#0a0f1e; --card:#0e1730; --card2:#111a34;
  --line:#1c2b4d; --line2:#25406e;
  --cyan:#00f0ff; --blue:#0066d8; --violet:#8b5cf6; --pink:#ff3da6;
  --txt:#e6f0ff; --dim:#93a6cc;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR','Rajdhani',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.75;overflow-x:hidden;position:relative;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-2;background:
  radial-gradient(950px 520px at 82% -6%, rgba(0,240,255,.10), transparent),
  radial-gradient(760px 520px at 8% 8%, rgba(139,92,246,.10), transparent),
  var(--bg)}
body::after{content:'';position:fixed;inset:0;z-index:-1;opacity:.4;pointer-events:none;
  background-image:linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% -10%, #000 45%, transparent 88%);
  mask-image:radial-gradient(circle at 50% -10%, #000 45%, transparent 88%)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
h1,h2,h3,.brand,.eyebrow{font-family:'Orbitron','Rajdhani',sans-serif}
.cyan{color:var(--cyan)}
.grad{background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
b{color:#dbe8ff;font-weight:600}

/* NAV */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(5,7,15,.82);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.5px;color:var(--txt)}
.brand img{height:38px;filter:drop-shadow(0 0 10px rgba(0,240,255,.55))}
.navlinks{display:flex;gap:19px;margin-left:auto;font-family:'Rajdhani';font-weight:600;font-size:15.5px;color:var(--dim)}
.navlinks a{padding:6px 1px;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap}
.navlinks a:hover,.navlinks a.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-family:'Rajdhani';font-weight:700;font-size:15px;letter-spacing:.3px;cursor:pointer;border:1px solid transparent;transition:.18s}
.btn-primary{background:#0d6bd4;color:#fff;box-shadow:0 4px 14px rgba(0,70,160,.38)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,70,160,.55)}
.btn-ghost{border-color:var(--line2);color:var(--txt)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 16px rgba(0,240,255,.25)}

/* 언어 선택기 — 다크 테마(appearance:none 로 네이티브 흰색 크롬 제거 + 커스텀 화살표). */
.langsel{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2393a6cc'/></svg>") no-repeat right 9px center;
  color:var(--txt);border:1px solid var(--line2);border-radius:10px;
  padding:7px 26px 7px 12px;font-family:'Rajdhani';font-weight:600;font-size:14px;
  height:38px;cursor:pointer;outline:none;max-width:150px}
.langsel:hover{border-color:var(--cyan)}
.langsel option{background:#0e1730;color:#e6f0ff}

/* 햄버거(모바일) */
.hamburger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line2);border-radius:10px;cursor:pointer;flex:0 0 auto}
.hamburger span{width:22px;height:2px;background:#cfe0ff;border-radius:2px;transition:.25s}
nav.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.nav-open .hamburger span:nth-child(2){opacity:0}
nav.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== 모바일 네비게이션(햄버거 드로어) ===== */
@media(max-width:900px){
  .hamburger{display:flex}
  nav .wrap{position:relative;gap:12px}
  .navlinks{position:absolute;top:70px;left:0;right:0;margin-left:0;flex-direction:column;gap:0;background:rgba(5,7,15,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:6px 0;display:none;box-shadow:0 18px 42px -12px rgba(0,0,0,.7)}
  nav.nav-open .navlinks{display:flex}
  .navlinks a{padding:14px 22px;font-size:16px;border-bottom:1px solid var(--line)}
  .navlinks a:last-child{border-bottom:0}
  .navlinks a:hover,.navlinks a.active{border-bottom-color:var(--line);color:var(--cyan)}
  .langsel{margin-left:auto;max-width:118px}
}

/* ===== 스마트폰 최적화 ===== */
@media(max-width:600px){
  .wrap{padding:0 15px}
  nav .wrap{height:62px;gap:8px}
  nav.nav-open .navlinks{top:62px}
  .brand{font-size:16px;gap:8px}
  .brand img{height:30px}
  .btn{padding:9px 13px;font-size:13.5px}
  .langsel{max-width:82px;padding:6px 20px 6px 8px;font-size:12.5px;height:34px;background-position:right 7px center}
  .hero{padding:38px 0 28px}
  .hero-logo{height:74px}
  .block{padding:19px 16px;border-radius:14px}
  .dl{padding:34px 17px;border-radius:16px}
  .cta{flex-direction:column}
  .cta .btn{width:100%;justify-content:center}
  footer .wrap{flex-direction:column;gap:16px}
  footer .wrap>div[style*="text-align:right"]{text-align:left!important}
  .toc a{font-size:12.5px;padding:6px 11px}
  .shot{border-radius:10px}
  .step{gap:10px}
}
/* 초소형 화면: 상단바에 언어선택기까지 넣기 위해 브랜드 글자 숨김(로고는 유지) */
@media(max-width:400px){
  .brand{font-size:0;gap:0}
  .brand img{height:30px;margin-right:0}
  .brand .cyan{font-size:0}
  nav .wrap{gap:6px}
  .btn{padding:8px 11px;font-size:13px}
}

/* HERO */
.hero{padding:72px 0 48px;text-align:center;position:relative}
.hero .eyebrow{color:var(--cyan);letter-spacing:3px;font-size:12.5px;font-weight:700;text-transform:uppercase}
.hero h1{font-size:clamp(30px,5.4vw,54px);font-weight:900;line-height:1.16;margin:14px 0 0;text-shadow:0 0 34px rgba(0,240,255,.28)}
.hero .tag{margin:20px auto 0;max-width:770px;color:var(--dim);font-size:clamp(15px,2.1vw,18px)}
.hero-logo{height:104px;margin:0 auto 16px;display:block;filter:drop-shadow(0 0 30px rgba(0,240,255,.55));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* SECTION HEAD */
.sect-head{text-align:center;margin:66px 0 6px}
.sect-head .eyebrow{color:var(--cyan);letter-spacing:3px;font-size:12px;font-weight:700;text-transform:uppercase}
.sect-head h2{font-size:clamp(24px,4vw,34px);font-weight:900;margin-top:8px}
.sect-head p{color:var(--dim);max-width:700px;margin:12px auto 0;font-size:15.5px}

/* BLOCKS */
main.wrap{padding-bottom:10px}
.block{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin:20px 0;position:relative;overflow:hidden}
.block::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),var(--violet))}
.block h2{font-size:clamp(19px,3vw,26px);font-weight:800;margin-bottom:14px;letter-spacing:.2px}
.block p{color:var(--dim);margin-bottom:12px;font-size:15.5px}
.block p:last-of-type{margin-bottom:0}

/* TECH POINTS */
.tech{margin-top:18px;background:rgba(0,240,255,.045);border:1px solid var(--line);border-radius:12px;padding:15px 18px}
.tech .th{font-family:'Rajdhani';font-weight:700;color:var(--cyan);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.tech ul{list-style:none;display:grid;gap:9px}
.tech li{position:relative;padding-left:22px;color:var(--txt);font-size:14.5px;line-height:1.6}
.tech li::before{content:'▹';position:absolute;left:1px;color:var(--cyan);font-weight:700}

/* HONEST BOX */
.honest{border:1px solid #3d3216;background:linear-gradient(180deg,rgba(255,196,0,.07),rgba(255,196,0,.02));border-radius:16px;padding:22px 24px;margin:28px 0}
.honest .th{font-family:'Orbitron';font-weight:700;color:#ffcf4d;font-size:14.5px;letter-spacing:.5px;margin-bottom:9px}
.honest p{color:#e3d3a8;font-size:14.5px;margin:0;line-height:1.75}

/* TOC */
.toc{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:2px 0 8px}
.toc a{font-family:'Rajdhani';font-weight:600;font-size:13.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 14px;transition:.15s}
.toc a:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px rgba(0,240,255,.2)}

/* CARDS */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g3{grid-template-columns:1fr}}
.fcard{display:block;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:16px;padding:24px;transition:.18s}
.fcard:hover{border-color:var(--cyan);transform:translateY(-4px);box-shadow:0 12px 34px -12px rgba(0,240,255,.35)}
.fcard .ic{font-size:28px;margin-bottom:12px}
.fcard h3{font-family:'Rajdhani';font-weight:700;font-size:19px;margin-bottom:8px}
.fcard p{color:var(--dim);font-size:14.5px}
.fcard .more{margin-top:13px;color:var(--cyan);font-weight:700;font-size:14px;font-family:'Rajdhani'}

/* DOWNLOAD */
.dl{background:linear-gradient(135deg,rgba(0,240,255,.10),rgba(139,92,246,.13));border:1px solid var(--line2);border-radius:22px;padding:52px 30px;text-align:center;margin:48px 0}
.dl h2{font-size:clamp(24px,4vw,34px);font-weight:900;margin-bottom:10px}
.dl p{color:var(--dim);margin-bottom:24px}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.note{margin-top:16px;font-size:13px;color:#6b7da3}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:44px 0;color:#6b7da3;font-size:14px;margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer .brand{font-size:17px;color:var(--txt)}
footer a:hover{color:var(--cyan)}