/* NetScore — 브랜드 스타일.
   다크 베이스(#0B0F17) + 브랜드 블루(#348BFF) + 포인트 오렌지(#FF6B35).
   ⚠️ 움직임은 거들기만 한다. prefers-reduced-motion 이면 전부 멈춘다. */

:root{
  --ns-brand:#348BFF; --ns-accent:#FF6B35; --ns-violet:#7A5CFF;
  --ns-ink:#0B0F17; --ns-ink2:#121826; --ns-line:#243049;
  --ns-text:#E8EDF7; --ns-dim:#93A1BD;
  --ns-radius:18px;
  --ns-shadow:0 18px 50px rgba(0,0,0,.45);
}

body{background:var(--ns-ink);color:var(--ns-text);
  font-family:Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;}
a{color:var(--ns-brand)}
h1,h2,h3,h4{letter-spacing:-.02em}

/* ── 섹션 공통 ───────────────────────────────────────────── */
.ns-sec{padding:clamp(64px,9vw,120px) 20px;position:relative}
.ns-wrap{max-width:1180px;margin:0 auto}
.ns-eyebrow{display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ns-brand);margin-bottom:14px}
.ns-h2{font-size:clamp(1.75rem,4.2vw,2.75rem);font-weight:800;margin:0 0 14px;line-height:1.22}
.ns-lead{color:var(--ns-dim);font-size:clamp(1rem,1.6vw,1.1rem);max-width:62ch;margin:0 auto}
.ns-center{text-align:center}
.ns-grad{background:linear-gradient(120deg,var(--ns-brand) 0%,var(--ns-violet) 48%,var(--ns-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 히어로 ──────────────────────────────────────────────── */
.ns-hero{position:relative;overflow:hidden;padding:clamp(96px,13vw,160px) 20px clamp(64px,8vw,110px);
  background:radial-gradient(1200px 620px at 18% -10%,rgba(52,139,255,.28),transparent 60%),
             radial-gradient(900px 520px at 88% 8%,rgba(255,107,53,.18),transparent 62%),
             var(--ns-ink);}
.ns-hero__grid{position:absolute;inset:0;opacity:.28;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 30%,#000 40%,transparent 100%);
          mask-image:radial-gradient(70% 55% at 50% 30%,#000 40%,transparent 100%);}
.ns-hero__inner{position:relative;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.ns-hero__kicker{display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border:1px solid var(--ns-line);border-radius:999px;
  background:rgba(255,255,255,.03);font-size:.8125rem;color:var(--ns-dim)}
.ns-hero__kicker b{color:var(--ns-text);font-weight:700}
.ns-hero__dot{width:7px;height:7px;border-radius:50%;background:var(--ns-accent);
  box-shadow:0 0 0 0 rgba(255,107,53,.65);animation:ns-pulse 2.4s infinite}
@keyframes ns-pulse{0%{box-shadow:0 0 0 0 rgba(255,107,53,.55)}70%{box-shadow:0 0 0 12px rgba(255,107,53,0)}100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}}
.ns-hero h1{font-size:clamp(2.1rem,5.6vw,3.75rem);line-height:1.14;font-weight:800;margin:20px 0 16px}
.ns-hero p.ns-sub{color:var(--ns-dim);font-size:clamp(1rem,1.9vw,1.2rem);margin:0 0 30px;max-width:46ch}

/* 스코어보드 카드 */
.ns-board{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--ns-line);border-radius:var(--ns-radius);box-shadow:var(--ns-shadow);
  padding:22px;backdrop-filter:blur(6px)}
.ns-board__top{display:flex;justify-content:space-between;align-items:center;
  font-size:.8125rem;color:var(--ns-dim);margin-bottom:14px}
.ns-board__live{display:inline-flex;align-items:center;gap:6px;color:var(--ns-accent);font-weight:700}
.ns-board__score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:18px 6px 10px}
.ns-board__name{font-size:.9375rem;color:var(--ns-dim);text-align:center;margin-bottom:6px}
.ns-board__num{font-size:clamp(2.6rem,7vw,3.8rem);font-weight:800;text-align:center;line-height:1;
  font-variant-numeric:tabular-nums}
.ns-board__num.is-lead{color:var(--ns-brand)}
.ns-board__vs{color:var(--ns-dim);font-size:1.5rem;font-weight:700}
.ns-board__sets{display:flex;gap:6px;justify-content:center;margin-top:14px}
.ns-board__set{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:.8125rem;font-weight:700;background:rgba(255,255,255,.05);border:1px solid var(--ns-line);color:var(--ns-dim)}
.ns-board__set.is-win{background:rgba(52,139,255,.16);border-color:rgba(52,139,255,.45);color:var(--ns-text)}
.ns-board__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--ns-line);
  display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ns-dim)}

/* 매칭 카드 */
.ns-match{margin-top:16px;background:var(--ns-ink2);border:1px solid var(--ns-line);
  border-radius:var(--ns-radius);padding:16px 18px}
.ns-match__h{font-size:.8125rem;color:var(--ns-dim);margin-bottom:12px;font-weight:700;letter-spacing:.02em}
.ns-match__row{display:flex;align-items:center;gap:12px;padding:9px 0}
.ns-match__row+.ns-match__row{border-top:1px solid rgba(36,48,73,.6)}
.ns-match__av{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--ns-brand),var(--ns-violet))}
.ns-match__av:nth-child(1){background:linear-gradient(135deg,var(--ns-accent),#FFB088)}
.ns-match__info{flex:1;min-width:0}
.ns-match__name{font-size:.9375rem;font-weight:600}
.ns-match__lv{font-size:.8125rem;color:var(--ns-dim)}
.ns-match__pct{font-weight:800;color:var(--ns-brand);font-variant-numeric:tabular-nums}

/* ── 버튼 ────────────────────────────────────────────────── */
.ns-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.ns-btn--primary{background:linear-gradient(120deg,var(--ns-brand),var(--ns-violet));color:#fff;
  box-shadow:0 10px 30px rgba(52,139,255,.32)}
.ns-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(52,139,255,.42)}
.ns-btn--ghost{background:rgba(255,255,255,.04);border-color:var(--ns-line);color:var(--ns-text)}
.ns-btn--ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.ns-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── 스토어 버튼 ─────────────────────────────────────────── */
.ns-store{display:flex;gap:12px;flex-wrap:wrap}
.ns-store--center{justify-content:center}
.ns-store__btn{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;
  border-radius:14px;background:#fff;color:#0B0F17;text-decoration:none;font-weight:700;
  transition:transform .18s ease,box-shadow .18s ease}
.ns-store__btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4);color:#0B0F17}
.ns-store__btn svg{width:24px;height:24px;flex:none}
.ns-store__btn span{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.ns-store__btn em{font-style:normal;font-size:1.0625rem;font-weight:800}
.ns-store__btn strong{font-size:.75rem;font-weight:600;opacity:.7}

/* ── 기능 카드 ───────────────────────────────────────────── */
.ns-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px;margin-top:44px}
.ns-card{position:relative;background:var(--ns-ink2);border:1px solid var(--ns-line);
  border-radius:var(--ns-radius);padding:28px 24px;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease}
.ns-card:hover{transform:translateY(-4px);border-color:rgba(52,139,255,.5)}
.ns-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(52,139,255,.16),transparent 42%);opacity:0;transition:opacity .22s ease}
.ns-card:hover::after{opacity:1}
.ns-card__ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(52,139,255,.2),rgba(122,92,255,.2));
  border:1px solid rgba(52,139,255,.32);font-size:1.3rem}
.ns-card h3{font-size:1.1875rem;margin:0 0 10px;font-weight:700}
.ns-card p{color:var(--ns-dim);font-size:.9375rem;margin:0}
.ns-card ul{margin:12px 0 0;padding:0;list-style:none}
.ns-card li{color:var(--ns-dim);font-size:.9375rem;padding-left:18px;position:relative;margin-top:7px}
.ns-card li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--ns-brand)}

/* ── 통계 ────────────────────────────────────────────────── */
.ns-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:40px}
.ns-stat{text-align:center;padding:26px 16px;border-radius:var(--ns-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--ns-line)}
.ns-stat b{display:block;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--ns-brand),var(--ns-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ns-stat span{color:var(--ns-dim);font-size:.9375rem}

/* ── 스크린샷 ────────────────────────────────────────────── */
.ns-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:44px}
.ns-shot{text-align:center}
.ns-shot__frame{border-radius:26px;overflow:hidden;border:1px solid var(--ns-line);
  background:var(--ns-ink2);box-shadow:var(--ns-shadow);aspect-ratio:9/16;
  display:grid;place-items:center}
.ns-shot__frame img{width:100%;height:100%;object-fit:cover;display:block}
.ns-shot h3{font-size:1.0625rem;margin:18px 0 6px}
.ns-shot p{color:var(--ns-dim);font-size:.9375rem;margin:0}

/* ── FAQ ─────────────────────────────────────────────────── */
.ns-faq{max-width:760px;margin:36px auto 0}
.ns-faq__item{border:1px solid var(--ns-line);border-radius:14px;background:var(--ns-ink2);
  margin-bottom:10px;overflow:hidden}
.ns-faq__item summary{cursor:pointer;padding:18px 20px;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.ns-faq__item summary::-webkit-details-marker{display:none}
.ns-faq__item summary::after{content:'+';color:var(--ns-brand);font-size:1.3rem;font-weight:400;flex:none}
.ns-faq__item[open] summary::after{content:'−'}
.ns-faq__item p{margin:0;padding:0 20px 20px;color:var(--ns-dim);font-size:.9375rem}

/* ── 문의 폼 ─────────────────────────────────────────────── */
.ns-form{max-width:620px;margin:36px auto 0}
.ns-form__row{margin-bottom:16px}
.ns-form label{display:block;font-size:.875rem;color:var(--ns-dim);margin-bottom:7px;font-weight:600}
.ns-form input,.ns-form textarea{width:100%;padding:13px 15px;border-radius:12px;
  background:var(--ns-ink2);border:1px solid var(--ns-line);color:var(--ns-text);
  font-size:1rem;font-family:inherit;transition:border-color .18s ease}
.ns-form input:focus,.ns-form textarea:focus{outline:none;border-color:var(--ns-brand)}
.ns-form textarea{resize:vertical;min-height:130px}
.ns-form .ns-btn{width:100%}
.ns-form__msg{margin:14px 0 0;font-size:.9375rem;min-height:1.4em}
.ns-form__msg.is-ok{color:#4ADE80}
.ns-form__msg.is-err{color:#F87171}
.ns-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── 배포 버전 ───────────────────────────────────────────── */
.ns-rel__latest{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:36px}
.ns-rel__card{display:block;padding:22px;border-radius:var(--ns-radius);text-decoration:none;
  background:linear-gradient(135deg,rgba(52,139,255,.12),rgba(255,107,53,.08));
  border:1px solid var(--ns-line);transition:transform .18s ease,border-color .18s ease}
.ns-rel__card:hover{transform:translateY(-3px);border-color:rgba(52,139,255,.5)}
.ns-rel__plat{display:block;font-size:.8125rem;color:var(--ns-dim);font-weight:700;letter-spacing:.06em}
.ns-rel__ver{display:block;font-size:2rem;font-weight:800;color:var(--ns-text);margin:6px 0 10px}
.ns-rel__go{font-size:.875rem;color:var(--ns-brand);font-weight:600}
.ns-rel__list{list-style:none;margin:0;padding:0}
.ns-rel__item{border-left:2px solid var(--ns-line);padding:0 0 26px 22px;position:relative}
.ns-rel__item::before{content:'';position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--ns-ink);border:2px solid var(--ns-brand)}
.ns-rel__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ns-rel__head strong{font-size:1.25rem;font-weight:800}
.ns-rel__head time{color:var(--ns-dim);font-size:.875rem;margin-left:auto}
.ns-chip{font-size:.75rem;padding:3px 10px;border-radius:999px;border:1px solid var(--ns-line);
  color:var(--ns-dim)}
.ns-chip.is-latest{border-color:rgba(255,107,53,.5);color:var(--ns-accent);background:rgba(255,107,53,.1)}
.ns-rel__notes{margin:0;padding:0;list-style:none}
.ns-rel__notes li{color:var(--ns-dim);font-size:.9375rem;padding-left:16px;position:relative;margin-top:6px}
.ns-rel__notes li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--ns-line)}
.ns-note{color:var(--ns-dim);text-align:center}

/* ── 푸터 ────────────────────────────────────────────────── */
.ns-footer{background:#070A11;border-top:1px solid var(--ns-line);padding:54px 20px 40px;
  color:var(--ns-dim);font-size:.875rem}
.ns-footer__grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.ns-footer h4{color:var(--ns-text);font-size:.9375rem;margin:0 0 14px}
.ns-footer ul{list-style:none;margin:0;padding:0}
.ns-footer li{margin-bottom:9px}
.ns-footer a{color:var(--ns-dim);text-decoration:none}
.ns-footer a:hover{color:var(--ns-brand)}
.ns-footer__biz{line-height:1.9}
.ns-footer__bottom{max-width:1180px;margin:34px auto 0;padding-top:22px;
  border-top:1px solid var(--ns-line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ── 스크롤 등장 ───────────────────────────────────────────
   🔴 기본값은 **보이는 상태**다. opacity:0 으로 시작하면 JS 가 실패하거나
      늦게 뜨는 순간 본문이 통째로 사라진다 — 실제로 그렇게 만들었다가
      섹션 여섯 개가 빈 화면으로 나왔다.
      숨기는 일은 JS 가 살아 있다고 표시한 뒤에만 한다(.ns-js). */
.ns-reveal{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.ns-js .ns-reveal:not(.is-in){opacity:0;transform:translateY(22px)}
.ns-reveal.is-in{opacity:1;transform:none}
.ns-reveal[data-d="1"]{transition-delay:.08s}
.ns-reveal[data-d="2"]{transition-delay:.16s}
.ns-reveal[data-d="3"]{transition-delay:.24s}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width:980px){
  .ns-hero__inner{grid-template-columns:1fr}
  .ns-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ns-footer__grid{grid-template-columns:1fr}
  .ns-sec{padding:56px 18px}
  .ns-store__btn{flex:1 1 100%}
}

/* 움직임을 원하지 않는 사람에게는 전부 끈다. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ns-reveal{opacity:1;transform:none}
}

/* ════════════════════════════════════════════════════════════
   Kadence 기본 레이아웃을 랜딩용으로 편다.
   ⚠️ 부모 테마는 "박스 안의 글" 을 가정한다. 랜딩 섹션은 화면 끝까지
      닿아야 하므로 폭·배경·여백을 여기서 되돌린다.
   ════════════════════════════════════════════════════════════ */

/* 페이지 제목 영역 — 랜딩에는 히어로가 그 역할을 한다. */
.entry-hero,
.page-hero-section { display:none !important; }

/* 폭·배경·여백 */
.site-container,
.content-container,
.site-main,
.site-main > .wrap,
.entry-content,
.single-content,
.entry-content-wrap { max-width:none !important; width:100% !important;
  padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
.content-style-boxed .content-bg,
.content-bg,
.entry.single-entry { background:transparent !important; box-shadow:none !important;
  border:0 !important; padding:0 !important; }
.content-vertical-padding-show .site-main { padding-top:0 !important; padding-bottom:0 !important; }
article.entry { margin:0 !important; }

/* 본문 색이 부모 테마 값으로 덮이지 않게 한다. */
.ns-hero h1, .ns-h2, .ns-card h3, .ns-shot h3, .ns-stat b,
.ns-board__num, .ns-rel__head strong, .ns-faq__item summary { color:var(--ns-text); }
.ns-hero h1 .ns-grad, .ns-h2 .ns-grad { color:transparent; }
.ns-board__num.is-lead { color:var(--ns-brand); }
.ns-stat b { color:transparent; }

/* ── 헤더 ─────────────────────────────────────────────────── */
.site-header,
#masthead,
.site-header-wrap,
.site-header-row-container { background:transparent !important; }
#masthead { position:sticky; top:0; z-index:90;
  background:rgba(11,15,23,.78) !important; backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(36,48,73,.8) !important; }
#masthead .site-title,
#masthead .site-title a,
#masthead .header-navigation a,
#masthead .menu-item > a { color:var(--ns-text) !important; font-weight:600; }
#masthead .site-title a { font-weight:800; letter-spacing:-.02em; }
#masthead .menu-item > a:hover { color:var(--ns-brand) !important; }
#masthead .menu-item:last-child > a {
  background:linear-gradient(120deg,var(--ns-brand),var(--ns-violet));
  color:#fff !important; padding:9px 18px; border-radius:999px; }
#masthead .menu-item:last-child > a:hover { color:#fff !important; opacity:.92; }
.header-navigation .menu-item > a::after { display:none !important; }

/* ── 푸터 ─────────────────────────────────────────────────── */
.site-footer,
.site-footer-wrap,
.footer-widget-area,
.site-bottom-footer-wrap { background:#070A11 !important; border-top:1px solid var(--ns-line); }
.site-footer * { color:var(--ns-dim); }
.site-footer a { color:var(--ns-dim) !important; }
.site-footer a:hover { color:var(--ns-brand) !important; }
.site-footer h4 { color:var(--ns-text) !important; }
.site-footer .widget-area .widget { margin:0; }
/* 부모 테마 크레딧 — 사업자 정보를 우리 푸터에서 직접 적는다. */
.site-bottom-footer-inner-wrap .footer-html,
.site-info .powered-by { display:none !important; }
.footer-widget-area .widget-title { display:none; }

/* 워드프레스 관리 바가 sticky 헤더를 덮지 않게 */
body.admin-bar #masthead { top:32px; }
@media (max-width:782px){ body.admin-bar #masthead { top:46px; } }

/* ── 위 레이아웃 되돌리기의 부작용 교정 ───────────────────────
   ⚠️ .site-container 패딩을 0 으로 밀었더니 **헤더·푸터 로고까지 화면 끝에
      붙었다.** 본문 섹션만 끝까지 닿으면 되고, 머리글·바닥글은 여백이 필요하다. */
#masthead .site-container,
#masthead .site-header-row-container-inner,
.site-footer .site-container {
  max-width:1180px !important; margin:0 auto !important;
  padding-left:20px !important; padding-right:20px !important;
}
#masthead .site-container { max-width:none !important; padding-left:28px !important; padding-right:28px !important; }

/* 매칭 카드 — 이름과 부수가 한 줄에 붙어 있었다. */
.ns-match__info { display:flex; flex-direction:column; gap:2px; }
.ns-match__name,
.ns-match__lv { display:block; }

/* 아바타 색 — .ns-match__av 는 줄마다 첫 자식이라 nth-child(1) 이 전부 걸렸다.
   줄 단위로 색을 돌린다. */
.ns-match__row:nth-child(2) .ns-match__av { background:linear-gradient(135deg,var(--ns-brand),var(--ns-violet)); }
.ns-match__row:nth-child(3) .ns-match__av { background:linear-gradient(135deg,var(--ns-accent),#FFB088); }
.ns-match__row:nth-child(4) .ns-match__av { background:linear-gradient(135deg,#2DD4BF,#348BFF); }

/* 히어로 — sticky 헤더 아래 빈 띠가 생겼다. */
.ns-hero { padding-top:clamp(64px,8vw,104px); }

/* 부모 테마 푸터는 비워 둔다 — 우리 푸터를 wp_footer 에서 직접 그린다. */
.site-footer-wrap { display:none !important; }
.ns-footer .ns-store__btn { padding:9px 16px; }
.ns-footer .ns-store__btn strong { display:none; }