@charset "UTF-8";
/* =========================================================
   STANDARD ALL — NETWORK / 글로벌 네트워크
   (sub_common.css 의 변수 · 폰트 사용)
   ========================================================= */

/* 세리프 고정 */
.nw-stats strong,.nw-stats em,.nw-pin__num,.nw-pin__label em,
.nw-group__country span,.nw-site__num,.nw-site em{font-family:var(--sub-serif)!important}

.article.nw-sec{position:relative;background-color:var(--sub-deep);color:#fff;overflow:clip;padding-top:clamp(120px,12vw,180px)}
.nw-sec::before{content:"";position:absolute;left:50%;top:0;width:min(1400px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}

/* =========================================================
   HEAD
   ========================================================= */
.nw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;width:100%}
.nw-head .sub-eyebrow{color:color-mix(in srgb, var(--main-color) 25%, #fff)}
.nw-head .sub-title{color:#fff}
.nw-head__desc{margin:24px 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.8;color:rgba(255,255,255,.75);letter-spacing:-.025em}

.nw-stats{display:flex;gap:clamp(28px,4vw,64px);margin:0;padding:0;list-style:none;flex-shrink:0}
.nw-stats li{display:flex;align-items:flex-end;gap:14px}
.nw-stats strong{font-size:clamp(72px,7vw,120px);font-weight:500;line-height:.8;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.nw-stats span{display:flex;flex-direction:column;gap:4px;margin-bottom:.3em;font-size:15px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:-.02em}
.nw-stats em{font-size:22px;font-weight:400;color:color-mix(in srgb, var(--main-color) 25%, #fff)}

/* =========================================================
   MAP
   ========================================================= */
.nw-map{
  --r:150%;
  position:relative;width:100%;margin-top:clamp(50px,6vw,90px);
}
.nw-map__view{position:relative;width:100%;aspect-ratio:1400/669}
.nw-map__canvas{position:absolute;inset:0}
.nw-map__layer{position:absolute;inset:0}
.nw-map__hint{display:none}
.nw-map__layer svg{display:block;width:100%;height:100%;overflow:visible}

/* 도트 : 파주를 중심으로 원형으로 펼쳐지는 마스크 */
.nw-map__dots{
  -webkit-mask-image:radial-gradient(circle at var(--px) var(--py), #000 var(--r), transparent calc(var(--r) + 14%));
          mask-image:radial-gradient(circle at var(--px) var(--py), #000 var(--r), transparent calc(var(--r) + 14%));
}
.nw-map__dots::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(90deg,var(--sub-deep) 0%,transparent 9%,transparent 91%,var(--sub-deep) 100%),
  linear-gradient(180deg,var(--sub-deep) 0%,transparent 10%,transparent 88%,var(--sub-deep) 100%)}
.nw-dots{fill:none;stroke-linecap:round;stroke-width:3.2}
.nw-dots--land{stroke:rgba(255,255,255,.16)}
.nw-dots--hl{stroke:color-mix(in srgb, var(--main-color) 30%, #fff);opacity:.7}

/* 연결선 */
.nw-arc{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 8;opacity:.75;transition:opacity .4s,stroke-width .4s}
.nw-traveler{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #fff);transition:opacity .6s}
.nw-map.is-live .nw-traveler{opacity:1}
.nw-map.is-focus .nw-arc{opacity:.15}
.nw-map.is-focus .nw-arc.is-on{opacity:1;stroke-width:3}

/* 핀 */
.nw-pin{position:absolute;z-index:2;width:0;height:0}
.nw-pin__dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px color-mix(in srgb, var(--main-color) 70%, transparent);transition:transform .4s var(--sub-ease)}
.nw-pin__dot i{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid #fff;animation:nwPulse 2.4s var(--sub-ease) infinite}
.nw-pin:nth-child(2) .nw-pin__dot i{animation-delay:.6s}
.nw-pin:nth-child(3) .nw-pin__dot i{animation-delay:1.2s}
.nw-pin:nth-child(4) .nw-pin__dot i{animation-delay:.3s}
.nw-pin:nth-child(5) .nw-pin__dot i{animation-delay:.9s}
@keyframes nwPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}

.nw-pin__label{position:absolute;top:0;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;color:var(--sub-ink);white-space:nowrap;box-shadow:0 14px 34px -14px rgba(0,0,0,.55);transition:transform .45s var(--sub-ease),background .4s,color .4s}
.nw-pin__label b,.nw-group__country b{flex-shrink:0}
.nw-pin__label b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--main-color);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
.nw-pin__label strong{font-size:16px;font-weight:700;letter-spacing:-.03em}
.nw-pin__label em{font-size:14px;font-style:italic;color:var(--sub-mute)}
.nw-pin--r .nw-pin__label{left:24px;transform:translateY(-50%)}
.nw-pin--l .nw-pin__label{right:24px;transform:translateY(-50%)}
.nw-pin--b .nw-pin__label{top:22px;left:0;transform:translateX(-50%)}
.nw-pin--t .nw-pin__label{top:auto;bottom:22px;left:0;transform:translateX(-50%)}
.nw-pin__num{display:none}

.nw-map.is-focus .nw-pin{opacity:.35;transition:opacity .4s}
.nw-map.is-focus .nw-pin.is-on{opacity:1}
.nw-pin.is-on{z-index:3}
.nw-pin.is-on .nw-pin__dot{transform:scale(1.3)}
.nw-pin.is-on .nw-pin__label{background:var(--main-color);color:#fff}
.nw-pin.is-on .nw-pin__label b{background:#fff;color:var(--main-color)}
.nw-pin.is-on .nw-pin__label em{color:rgba(255,255,255,.75)}

/* 목록 : 지도 아래 3단 */
.nw-sites{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(30px,3vw,50px);padding:30px 34px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nw-group{padding:0 30px}
.nw-group:first-child{padding-left:0}
.nw-group:last-child{padding-right:0}
.nw-group+.nw-group{border-left:1px solid rgba(255,255,255,.14)}
.nw-group__country{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.nw-group__country b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--main-color);font-size:12px;font-weight:700;letter-spacing:.04em}
.nw-group__country b i{font-size:17px;font-weight:400}
.nw-group__country span{font-size:24px;font-style:italic;color:#fff}
.nw-group__country em{font-size:15px;font-style:normal;font-weight:600;color:rgba(255,255,255,.6)}
.nw-group ul{margin:0;padding:0;list-style:none}
.nw-site{display:flex;align-items:baseline;gap:14px;padding:12px 14px;margin:0 -14px;border-radius:12px;cursor:default;outline:none;transition:background .35s var(--sub-ease)}
.nw-site__num{font-size:15px;color:color-mix(in srgb, var(--main-color) 25%, #fff)}
.nw-site strong{font-size:19px;font-weight:700;letter-spacing:-.03em}
.nw-site em{margin-left:auto;font-size:16px;font-style:italic;color:rgba(255,255,255,.55)}
.nw-site.is-on,.nw-site:focus-visible{background:rgba(255,255,255,.1)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .nw-head{flex-direction:column;align-items:flex-start}
  .nw-map{margin-top:50px}
  .nw-sites{padding:26px}
  .nw-group{padding:0 20px}
  .nw-pin__label strong{font-size:14px}
  .nw-pin__label em{display:none}
}
@media (max-width:640px){
  .article.nw-sec{padding-top:90px}
  .nw-head__desc br{display:none}
  .nw-stats strong{font-size:64px}
  .nw-stats em{font-size:18px}
  .nw-pin__label{display:none}
  .nw-pin__num{position:absolute;left:12px;top:-30px;display:block;padding:3px 8px;border-radius:999px;background:#fff;color:var(--main-color);font-size:12px;line-height:1.2}
  .nw-pin--l .nw-pin__num{left:auto;right:12px}
  .nw-pin__dot{left:-7px;top:-7px;width:14px;height:14px;box-shadow:0 0 0 4px color-mix(in srgb, var(--main-color) 70%, transparent)}
  .nw-dots{stroke-width:4.4}
  /* 모바일 : 지도를 가로로 넓게 두고 스와이프 (동아시아에서 시작) */
  .nw-map__view{aspect-ratio:auto;height:320px;overflow-x:auto;overflow-y:hidden;border-radius:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nw-map__view::-webkit-scrollbar{display:none}
  .nw-map__canvas{position:relative;inset:auto;height:100%;aspect-ratio:1400/669}
  .nw-map__hint{position:sticky;left:calc(100% - 92px);bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:6px;margin-top:-44px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12px;font-weight:600;letter-spacing:.06em;color:#fff;pointer-events:none;transition:opacity .4s}
  .nw-map__view.is-moved .nw-map__hint{opacity:0}
  .nw-sites{grid-template-columns:1fr;padding:24px}
  .nw-group,.nw-group:first-child,.nw-group:last-child{padding:0}
  .nw-group+.nw-group{margin-top:18px;padding-top:18px;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
}

@media (prefers-reduced-motion:reduce){
  .nw-pin__dot i{animation:none}
}