/* ===================================================================
   Zenith Autotech — home.css  (메인 원페이지 전용)
   =================================================================== */

/* ---------- 1. HERO ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
/* 예외: 메인 1번 히어로 섹션에만 Pretendard (var(--font-hero)) — 그 외 전부 토큰 규칙 적용 */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-desc{font-family:var(--font-hero)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-placeholder{
    position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
    background:
        radial-gradient(120% 120% at 70% 20%,#006CA7 0%,#03357E 60%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px);
    color:rgba(255,255,255,.2);font-family:var(--font-en);letter-spacing:2px;font-size:var(--fs-base);
}
.hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,rgba(13,16,21,.62) 30%,rgba(13,16,21,.12) 100%)}

.hero-content{position:relative;z-index:2;width:100%;max-width:760px;margin:0;padding-left:calc(clamp(20px,4vw,60px) + 170px);padding-right:24px;color:#fff}
.hero-eyebrow{
    font-family:var(--font-en);letter-spacing:6px;font-size:var(--fs-sm);color:var(--c-accent);
    margin-bottom:24px;opacity:0;animation:fadeUp .9s var(--ease) .2s forwards;
}
.hero-title{
    font-family:var(--font-en);font-weight:800;font-size:var(--fs-display);
    line-height:1.05;letter-spacing:-1px;margin-bottom:30px;white-space:nowrap;
    opacity:0;animation:fadeUp 1s var(--ease) .35s forwards;
}
.hero-title em{color:var(--c-accent);font-style:normal}
.hero-desc{
    font-size:var(--fs-md);color:#d6dbe1;font-weight:300;max-width:560px;text-wrap:balance;
    opacity:0;animation:fadeUp 1s var(--ease) .55s forwards;
}
.hero-desc strong{font-weight:600;color:#fff}

/* Scroll-down indicator — Dribbble #2807757 "Micro animation for site scroll" (Nick Buturishvili) */
.scroll-down{
    position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;
}
.scroll-down .mouse{                    /* thin outline mouse — nudges down 3×, then rests */
    position:relative;width:30px;height:52px;
    border:2px solid rgba(255,255,255,.8);border-radius:30px;
    transition:border-color .3s;
    animation:scrollNudge 5.25s ease-out infinite;
}
.scroll-down .mouse::before{            /* wheel dot — drops & fades, 3 pulses + pause */
    content:"";position:absolute;left:50%;top:7px;width:5px;height:5px;margin-left:-2.5px;
    border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.45);
    animation:scrollWheel 5.25s linear infinite;
}
.scroll-text{
    font-family:var(--font-en);font-size:var(--fs-2xs);
    letter-spacing:5px;text-indent:5px;color:rgba(255,255,255,.55);font-weight:300;
    animation:scrollNudgeText 5.25s ease-out infinite;
}
.scroll-down:hover .mouse{border-color:#fff}

@keyframes fadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes scrollWheel{
    /* pulse 1 */
    0%{opacity:1;transform:translateY(0) scale(1)}
    4%{opacity:1;transform:translateY(10px) scale(.95)}
    10%{opacity:0;transform:translateY(28px) scale(.5)}
    21%{opacity:0;transform:translateY(0) scale(.7)}
    28%{opacity:1;transform:translateY(0) scale(1)}
    /* pulse 2 */
    30%{opacity:1;transform:translateY(0) scale(1)}
    34%{opacity:1;transform:translateY(10px) scale(.95)}
    40%{opacity:0;transform:translateY(28px) scale(.5)}
    50%{opacity:0;transform:translateY(0) scale(.7)}
    56%{opacity:1;transform:translateY(0) scale(1)}
    /* long pause — dot rests at top */
    72%{opacity:1;transform:translateY(0) scale(1)}
    /* pulse 3 */
    76%{opacity:1;transform:translateY(10px) scale(.95)}
    82%{opacity:0;transform:translateY(28px) scale(.5)}
    92%{opacity:0;transform:translateY(0) scale(.7)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes scrollNudge{
    0%,12%,30%,42%,72%,84%,100%{transform:translateY(0)}
    4%,34%,76%{transform:translateY(5px)}
}
@keyframes scrollNudgeText{
    0%,12%,30%,42%,72%,84%,100%{transform:translateY(0)}
    4%,34%,76%{transform:translateY(2px)}
}

/* ---------- 2. ABOUT ---------- */
.about{position:relative;height:100vh;display:flex;align-items:center;padding:80px 0;overflow:hidden}
.about-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.about-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,12,16,.88) 18%,rgba(10,12,16,.6) 100%)}
.about .container{position:relative;z-index:2;width:min(1860px,98%)}
.about .sec-title,.about .about-lead{color:#fff}
.about .about-text{color:rgba(255,255,255,.8)}
/* 메인 히어로다운 스케일 — 제목을 크게, 리드·본문도 비례 확대 */
/* 제목·리드: 한 줄 강제(nowrap) 대신 어절 단위 줄바꿈 — 폭이 좁아질 때
   글자가 잘리지 않고 모바일처럼 자연스럽게 흐르게. 넉넉한 폭에선 그대로 한 줄 */
.about .sec-title{font-size:clamp(2.6rem,5.2vw,5rem);line-height:1.06;letter-spacing:-1px;white-space:normal;word-break:keep-all;text-wrap:balance}
.about .about-lead{font-size:clamp(1.3rem,2vw,2rem);line-height:1.35;margin-bottom:26px;white-space:normal;word-break:keep-all;text-wrap:balance}
.about .about-text{font-size:clamp(1.05rem,1.25vw,1.3rem);line-height:1.75;margin-bottom:36px;word-break:keep-all}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
/* 데스크탑: 문구(오른쪽)를 왼쪽으로, 영문 제목을 오른쪽으로 배치 */
.about-grid .about-left{order:2}
/* 음수 마진(-2vw) 제거: 좁은 폭에서 문구 왼쪽이 섹션 밖(overflow:hidden)으로
   밀려 잘리던 원인이라 0으로 둠 */
.about-grid .about-right{order:1;margin-left:0}
.sec-title{font-family:var(--font-en);font-weight:800;font-size:var(--fs-h2);
    line-height:1.18;letter-spacing:-.5px;word-break:keep-all;text-wrap:balance}
.sec-title .accent{color:var(--c-accent)}
.sec-title.light{color:#fff}
/* 한글 제목·라벨은 Noto Sans(var(--font-kr)) — 영문용 Poppins가 한글에 적용돼 어색해지는 것 방지 */
.network .sec-title,
.equipment .sec-title,
.network .country-name{font-family:var(--font-kr);letter-spacing:-.02em}
.about-lead{font-size:var(--fs-xl);font-weight:700;margin-bottom:22px;line-height:1.4}
.about-text{color:var(--c-gray);font-size:var(--fs-md);margin-bottom:30px}

.link-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);
    font-weight:600;color:var(--c-accent);font-size:var(--fs-base);position:relative}
.link-more::after{content:"→";transition:transform .3s var(--ease)}
.link-more:hover::after{transform:translateX(6px)}
.link-more.inline{margin-left:8px}

/* ---------- 3. NETWORK ---------- */
.network{
    /* 지도는 원래 크기로 100vh 중앙(상하 여백). 패널은 absolute+z-index로 지도 위에 오버레이
       → position:relative 로 패널의 기준 컨테이너 역할 */
    position:relative;
    height:100vh;padding:80px 0;color:var(--c-ink);
    overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    background:
        radial-gradient(110% 80% at 80% 0%,rgba(44,146,205,.06) 0%,transparent 55%),
        #fff;
}
.sec-eyebrow{font-family:var(--font-en);font-size:var(--fs-xl);font-weight:700;margin-bottom:18px;color:var(--c-accent)}
.sec-eyebrow em{font-style:italic}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:28px;
    padding:34px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.stat{text-align:center}
.stat-label{display:block;color:var(--c-gray);font-size:var(--fs-base);margin-bottom:14px}
.stat-num{font-family:var(--font-en);font-weight:800;color:var(--c-ink)}
.stat-num b{font-size:var(--fs-h2);line-height:1}
.stat-num i{font-style:normal;font-size:var(--fs-base);color:var(--c-accent);font-weight:600;margin-left:6px}

/* ---------- 4. EQUIPMENT ---------- */
.equipment{height:100vh;padding:80px 0;background:var(--c-bg-soft);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.process-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:54px 0 50px}
.process-tab{
    background:#fff;border:1px solid var(--c-line);border-radius:10px;cursor:pointer;
    padding:16px 22px;display:flex;flex-direction:column;gap:4px;transition:.3s var(--ease);min-width:118px;
}
.process-tab .p-num{font-family:var(--font-en);font-size:var(--fs-xs);color:var(--c-gray);font-weight:700}
.process-tab .p-name{font-weight:600;font-size:var(--fs-base)}
.process-tab:hover{border-color:var(--c-accent);transform:translateY(-3px)}
.process-tab.active{background:var(--c-ink);border-color:var(--c-ink)}
.process-tab.active .p-num{color:var(--c-accent)}
.process-tab.active .p-name{color:#fff}

/* PROCESS 3D 투어 iframe (Showroom/Process 임베드) */
.process-tour{
    margin-top:clamp(28px,4vh,56px);
    border-radius:18px;overflow:hidden;
    background:#0b1220;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.process-tour-frame{
    display:block;width:100%;height:clamp(360px,58vh,720px);border:0;
}
.process-more{margin-top:24px;text-align:right}
.process-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.process-head>div{min-width:0}
.process-head .link-more{flex:none;white-space:nowrap}
@media(max-width:640px){.process-head{flex-wrap:wrap;align-items:flex-start}}

.equip-slider{overflow:hidden}
.equip-track{display:flex;transition:transform .6s var(--ease)}
.equip-card{min-width:100%;display:grid;grid-template-columns:1.15fr 1fr;gap:0;
    background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.equip-img{position:relative;min-height:420px;
    background:linear-gradient(135deg,#222c38,#0d1015);
    display:flex;align-items:center;justify-content:center}
.equip-img .img-ph{color:rgba(255,255,255,.22);font-family:var(--font-en);letter-spacing:1px}
.equip-info{padding:60px 56px;display:flex;flex-direction:column;justify-content:center}
.equip-no{font-family:var(--font-en);font-size:var(--fs-h1);font-weight:800;color:var(--c-line);line-height:1}
.equip-name{font-size:var(--fs-2xl);font-weight:700;margin:8px 0 22px}
.equip-text{color:var(--c-gray);font-size:var(--fs-md);margin-bottom:30px}

.slider-nav{display:flex;align-items:center;gap:24px;margin-top:40px;justify-content:center}
.s-prev,.s-next{width:52px;height:52px;border-radius:50%;border:1px solid var(--c-line);
    background:#fff;cursor:pointer;font-size:var(--fs-xl);color:var(--c-ink);transition:.3s;
    display:flex;align-items:center;justify-content:center}
.s-prev:hover,.s-next:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.s-progress{width:220px;height:3px;background:var(--c-line);border-radius:3px;overflow:hidden}
.s-progress span{display:block;height:100%;background:var(--c-accent);width:14%;transition:width .5s var(--ease)}

/* ---------- 5. CTA ---------- */
.cta{height:100vh;display:flex;align-items:center;padding:80px 0;background:linear-gradient(120deg,var(--c-accent-deep),var(--c-accent));color:#fff;text-align:center;overflow:hidden}
.cta-inner{width:100%}
.cta-title{font-size:var(--fs-h2);font-weight:700;margin-bottom:16px}
.cta-text{font-size:var(--fs-md);opacity:.92;margin-bottom:36px;font-weight:300}
.btn-cta{display:inline-block;background:#fff;color:var(--c-accent-deep);
    padding:18px 44px;border-radius:40px;font-weight:700;font-size:var(--fs-md);transition:.3s var(--ease)}
.btn-cta:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(0,0,0,.4)}

/* ---------- 섹션 입장 애니메이션 ---------- */
/* .reveal 은 opacity:0 + translateY(46px) 에서 시작, JS가 .show 추가 시 전환 */
/* 각 섹션 하위 컨테이너에 지연 적용 */
.about .about-left,
.about .about-right{
    opacity:0;transform:translateY(50px);
    transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.about.show .about-left{opacity:1;transform:none;transition-delay:.05s}
.about.show .about-right{opacity:1;transform:none;transition-delay:.2s}

.network .sec-eyebrow,
.network .sec-title,
.network .stats{
    opacity:0;transform:translateY(40px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.network.show .sec-eyebrow{opacity:1;transform:none;transition-delay:.0s}
.network.show .sec-title{opacity:1;transform:none;transition-delay:.1s}
.network.show .stats{opacity:1;transform:none;transition-delay:.3s}

.equipment .sec-eyebrow,
.equipment .sec-title,
.equipment .process-tabs,
.equipment .equip-slider,
.equipment .slider-nav{
    opacity:0;transform:translateY(40px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.equipment.show .sec-eyebrow{opacity:1;transform:none;transition-delay:.0s}
.equipment.show .sec-title{opacity:1;transform:none;transition-delay:.1s}
.equipment.show .process-tabs{opacity:1;transform:none;transition-delay:.2s}
.equipment.show .equip-slider{opacity:1;transform:none;transition-delay:.3s}
.equipment.show .slider-nav{opacity:1;transform:none;transition-delay:.4s}

.cta .cta-title,
.cta .cta-text,
.cta .btn-cta{
    opacity:0;transform:translateY(30px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.cta.show .cta-title{opacity:1;transform:none;transition-delay:.05s}
.cta.show .cta-text{opacity:1;transform:none;transition-delay:.18s}
.cta.show .btn-cta{opacity:1;transform:none;transition-delay:.3s}

/* ---------- 6. FP-FOOTER ---------- */
/* 풀페이지 마지막 섹션이지만 높이는 일반 .site-footer 와 동일(내용 높이).
   마지막 스냅에서 JS가 footer 하단을 화면 하단에 맞춰 노출시킨다. */
.fp-footer{
    height:auto;
    /* .site-footer 의 background·color·padding 상속 */
}

/* ---------- SECTION INDEX (좌측 고정) ---------- */
.section-index{
    position:fixed;right:clamp(16px,2.5vw,36px);top:50%;
    transform:translateY(-50%);z-index:100;
    display:flex;flex-direction:column;align-items:flex-end;gap:22px;
    pointer-events:none;
}
.si-item{
    display:flex;flex-direction:row-reverse;align-items:center;gap:10px;
    cursor:pointer;pointer-events:all;
    text-decoration:none;
}
.si-line{
    display:block;width:18px;height:2px;
    background:#fff;opacity:.3;
    transition:width .4s var(--ease),opacity .4s var(--ease);
}
.si-label{
    font-family:var(--font-en);font-size:var(--fs-2xs);letter-spacing:2px;
    color:#fff;opacity:0;white-space:nowrap;font-weight:600;
    transition:opacity .4s var(--ease);
}
.si-item.active .si-line{width:28px;opacity:1}
.si-item.active .si-label{opacity:1}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
    .hero-placeholder{color:transparent}
    /* === 태블릿·모바일 동일 INTRO(히어로) 문구 처리 === */
    /* 데스크탑 좌측 인덱스용 여백(+170px) 제거 + 문구를 아래쪽으로 내려
       상단 중앙 로고/기계가 보이게 */
    .hero{align-items:flex-end}
    .hero-content{max-width:none;
        padding-left:clamp(22px,6vw,48px);padding-right:clamp(22px,6vw,48px);
        padding-bottom:clamp(130px,24vh,220px)}
    /* 타이틀: 한 줄 고정 해제(넘침 방지) */
    .hero-title{white-space:normal}
    /* 설명: 강제 줄바꿈 제거하고 어절 단위로 자연스럽게 흐르게 */
    .hero-desc br{display:none}
    .hero-desc{word-break:keep-all}
    /* "HPF 전문기업 제니스오토텍"은 한 묶음으로 묶어 한 줄 유지 */
    .hero-desc .hd-company{display:inline-block;white-space:nowrap}
    /* 영문은 길어 모바일에서 한 줄 고정 시 넘칠 수 있어 자연 줄바꿈 허용 */
    html[lang="en"] .hero-desc .hd-company{white-space:normal}
}
@media(max-width:900px){
    .about-grid{grid-template-columns:1fr;gap:30px}
    /* 단일 컬럼: 원래 순서(제목 → 문구)로 복귀 */
    .about-grid .about-left{order:1}
    .about-grid .about-right{order:2}
    .about .container{width:min(1860px,90%)}
    /* 제목·리드 줄바꿈(white-space:normal)은 기본 규칙으로 이동됨 */
    /* 히어로 여백/정렬은 ≤1024 블록에서 태블릿·모바일 공통 처리 */
    .stats{grid-template-columns:repeat(3,1fr);gap:18px}
    .equip-card{grid-template-columns:1fr}
    .equip-img{min-height:260px}
    .equip-info{padding:40px 30px}
    .country-body{grid-template-columns:1fr;gap:20px}
    .about,.network,.equipment,.cta{padding:60px 0}
}
/* 밝은 배경 섹션(ABOUT·PROCESS)에서 section-index 다크 컬러 */
.section-index.si-on-light .si-line{background:#0d1015}
.section-index.si-on-light .si-label{color:#0d1015}
@media(max-width:1600px){.section-index{display:none}}
@media(max-width:767px){
    .about,.network,.equipment,.cta{height:auto;overflow:visible;padding:80px 0}
}
@media(max-width:600px){
    .country-name{font-size:var(--fs-lg)}
    .process-tab{flex:1 1 calc(50% - 10px)}
    /* 히어로 문구 처리는 ≤1024 블록으로 통합 (태블릿·모바일 동일) */
    /* 통계: 좁은 화면에서 칸 간격·라벨만 살짝 정리(숫자 크기는 기본 유지) */
    .stats{gap:10px;padding:26px 0}
    .stat-label{margin-bottom:8px;font-size:var(--fs-sm)}
}

/* ===================================================================
   3-b. NETWORK MAP (netx) — Index.cshtml 인라인에서 통합 (2026-06-29)
   세계지도 + 한국 콜아웃 + 상단 통합 패널. 풀폭(.netx-full).
   =================================================================== */
.netx{width:100%;margin:20px 0 0}
.netx-head{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:16px}
.netx-tabs{display:inline-flex;background:#eef1f5;border-radius:999px;padding:4px}
.netx-tab{border:0;background:transparent;padding:9px 22px;border-radius:999px;font-size:.92rem;font-weight:700;color:#5a6270;cursor:pointer;transition:.25s}
.netx-tab.active{background:#fff;color:#03357E;box-shadow:0 4px 12px -4px rgba(13,16,21,.25)}
.netx-stage{position:relative;aspect-ratio:16/11;border-radius:20px;overflow:hidden;background:#b7ddf4;box-shadow:0 30px 60px -28px rgba(13,16,21,.55)}
.netx-map{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.netx-map.active{opacity:1;pointer-events:auto}
.netx-map img{width:100%;height:100%;object-fit:cover;display:block}
/* 글로벌 지도: 깨끗한 벡터 지도 + HTML 핀 (확대 애니메이션 없이 고정·선명) */
.netx-map[data-k="wd"]{display:flex;align-items:center;justify-content:center}
.netx-world{position:relative;width:100%}
.netx-world .netx-worldimg{width:100%;height:auto;display:block;object-fit:contain;pointer-events:none}
/* 국내 지도(세로형 벡터): 무대 중앙 배치 */
.netx-map[data-k="kr"]{display:flex;align-items:center;justify-content:center}
.netx-kr{position:relative;height:100%}
.netx-kr .netx-krimg{height:100%;width:auto;display:block;object-fit:contain;pointer-events:none}
/* 지도 핀 (국내·글로벌 공통) */
.netx-stage .gn-pin{position:absolute;width:0;height:0;z-index:2}
.netx-stage .gn-pinico{position:absolute;left:0;bottom:0;width:24px;height:28px;transform:translate(-50%,0);fill:var(--c-accent-deep);filter:drop-shadow(0 4px 5px rgba(3,53,126,.35))}
.netx-stage .gn-pin.is-hq{z-index:3}
.netx-stage .gn-pin.is-hq .gn-pinico{width:32px;height:38px;fill:#03357E}
.netx-stage .gn-pin.is-cust .gn-pinico{width:20px;height:24px;fill:#e8541c}
.netx-stage .gn-label{position:absolute;bottom:6px;display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.netx-stage .gn-label b{font-size:.9rem;font-weight:800;color:#000}
.netx-stage .gn-label i{font-style:normal;font-size:.74rem;color:#000}
.netx-stage .gn-label b,.netx-stage .gn-label i{text-shadow:0 1px 2px rgba(255,255,255,.7)}
.netx-stage .gn-pin.dir-r .gn-label{left:11px;align-items:flex-start;text-align:left}
.netx-stage .gn-pin.dir-l .gn-label{right:11px;align-items:flex-end;text-align:right}
/* 라벨을 핀 아래로 (밀집 구간 겹침 방지) */
.netx-stage .gn-pin.dir-rd .gn-label{top:9px;bottom:auto;left:11px;align-items:flex-start;text-align:left}
.netx-stage .gn-pin.dir-ld .gn-label{top:9px;bottom:auto;right:11px;align-items:flex-end;text-align:right}
/* 라벨 위로 더 올리기 */
.netx-stage .gn-pin.up-sm .gn-label{bottom:14px}
.netx-stage .gn-pin.up-lg .gn-label{bottom:36px}
.netx-stage .gn-pin.dn1 .gn-label{bottom:-4px}
.netx-stage .gn-pin.dn3 .gn-label{bottom:-3px}
/* 라벨을 핀 옆(핀 몸통 세로 중앙)으로 — 기준점이 핀 끝점이라 핀높이 절반만큼 위로 보정 */
.netx-stage .gn-pin.dir-rs .gn-label{top:-14px;bottom:auto;transform:translateY(-50%);left:12px;align-items:flex-start;text-align:left}
.netx-stage .gn-pin.dir-ls .gn-label{top:-14px;bottom:auto;transform:translateY(-50%);right:12px;align-items:flex-end;text-align:right}
.netx-stage .gn-pin.dir-rs2 .gn-label{top:-14px;bottom:auto;transform:translateY(-50%);left:8px;align-items:flex-start;text-align:left}
.netx-stage .gn-pin.is-hq.dir-rs .gn-label,.netx-stage .gn-pin.is-hq.dir-rs2 .gn-label{top:-26px}
.netx-stage .gn-pin.is-cust.dir-rs .gn-label{top:-12px}
.netx-stage .gn-pin.is-cust.dir-rs2 .gn-label{top:-6px}
.netx-stage .gn-pin.is-hq .gn-label b{color:#000}
.netx-stage .gn-pin.is-cust .gn-label b{font-size:.82rem;color:#000}
.netx-stage .gn-pin.is-cust .gn-label i{color:#000}
/* 범례 */
.netx-legend{position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.86);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;color:var(--c-ink);box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.netx-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.netx-legend .lg-z{background:#03357E}
.netx-legend .lg-c{background:#e8541c}
/* ===== 세계지도 마크: 점+라벨을 하나의 칩으로 ===== */
.netx-stage .gn-chip{position:absolute;transform:translate(-50%,calc(-100% - var(--k)*.0032));z-index:4;
    display:inline-flex;align-items:center;gap:calc(var(--k)*.00356);white-space:nowrap;
    background:#fff;border:1px solid #cfd5dd;border-radius:999px;
    padding:calc(var(--k)*.00391) calc(var(--k)*.00782) calc(var(--k)*.00391) calc(var(--k)*.00569);
    box-shadow:0 7px 18px -5px rgba(11,28,48,.45)}
.netx-stage .gn-chip::after{content:"";position:absolute;left:50%;bottom:calc(var(--k)*-.00285);transform:translateX(-50%);
    width:0;height:0;border-left:calc(var(--k)*.00285) solid transparent;border-right:calc(var(--k)*.00285) solid transparent;border-top:calc(var(--k)*.0032) solid #fff}
.netx-stage .gn-chip .dot{width:calc(var(--k)*.00462);height:calc(var(--k)*.00462);border-radius:50%;background:#03357E;flex:none}
.netx-stage .gn-chip .chip-logos{display:inline-flex;align-items:center;gap:calc(var(--k)*.0032)}
.netx-stage .gn-chip .chip-logos img{height:calc(var(--k)*.00854);width:auto;display:block}
.netx-stage .gn-chip .chip-logos img[alt="bmw"]{height:calc(var(--k)*.01067)}
.netx-stage .gn-chip .chip-logos img[alt="kia"]{height:calc(var(--k)*.00569)}
.netx-stage .gn-chip .hq-tag{margin-left:calc(var(--k)*.00249);background:#03357E;color:#fff;font-size:calc(var(--k)*.00427);font-weight:700;padding:calc(var(--k)*.00071) calc(var(--k)*.00285);border-radius:999px;line-height:1.4}
/* 칩 화살표 끝(거점 위치) 점 */
.netx-stage .gn-chip::before{content:"";position:absolute;width:calc(var(--k)*.0032);height:calc(var(--k)*.0032);border-radius:50%;background:#03357E;z-index:1;left:50%;top:calc(100% + var(--k)*.0032);transform:translate(-50%,-50%)}
.netx-stage .gn-chip.is-cust::before{background:#e8541c}
.netx-stage .gn-chip.cdir-u::before{top:calc(var(--k)*-.0032);left:50%}
.netx-stage .gn-chip.cdir-l::before{left:calc(var(--k)*-.0032);top:50%}
.netx-stage .gn-chip.cdir-r::before{left:calc(100% + var(--k)*.0032);top:50%}
.netx-stage .gn-chip.is-cust .dot{background:#e8541c}
.netx-stage .gn-chip b{font-size:calc(var(--k)*.0064);font-weight:800;color:#000;line-height:1}
.netx-stage .gn-chip i{font-style:normal;font-size:calc(var(--k)*.00498);color:#333;margin-left:calc(var(--k)*.00071);line-height:1}
/* 한국 본사: 핀(점)으로만 표시 */
.netx-stage .gn-hqdot{position:absolute;transform:translate(-50%,-50%);width:calc(var(--k)*.00569);height:calc(var(--k)*.00569);border-radius:50%;
    background:#03357E;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.35);z-index:4}
/* 칩 꼬리 방향: 기본=아래(점 위에 칩), u=위(점 아래), l=왼(점 오른쪽), r=오른(점 왼쪽) */
.netx-stage .gn-chip.cdir-u{transform:translate(-50%,calc(var(--k)*.0032))}
.netx-stage .gn-chip.cdir-u::after{top:calc(var(--k)*-.00213);bottom:auto;left:50%;transform:translateX(-50%);
    border:calc(var(--k)*.00249) solid transparent;border-top-width:0;border-bottom:calc(var(--k)*.00249) solid #fff}
.netx-stage .gn-chip.cdir-l{transform:translate(calc(var(--k)*.0032),-50%)}
.netx-stage .gn-chip.cdir-l::after{left:calc(var(--k)*-.00213);top:50%;bottom:auto;transform:translateY(-50%);
    border:calc(var(--k)*.00249) solid transparent;border-left-width:0;border-right:calc(var(--k)*.00249) solid #fff}
.netx-stage .gn-chip.cdir-r{transform:translate(calc(-100% - var(--k)*.0032),-50%)}
.netx-stage .gn-chip.cdir-r::after{right:calc(var(--k)*-.00213);left:auto;top:50%;bottom:auto;transform:translateY(-50%);
    border:calc(var(--k)*.00249) solid transparent;border-right-width:0;border-left:calc(var(--k)*.00249) solid #fff}
/* ===== 통합 뷰: 세계지도 + 한국 확대 콜아웃 ===== */
.netx-combined{display:flex;align-items:center;justify-content:center}
.netx-callout{position:absolute;left:35%;top:47%;width:37%;aspect-ratio:445/361;
    background:#b7ddf4;border:1px solid #03357E;border-radius:20px;
    box-shadow:0 14px 34px -16px rgba(11,28,48,.45);z-index:6}
/* 말풍선 꼬리 — 콜아웃 위쪽에서 한국으로(위 방향), 굵고 선명한 네이비 */
.netx-callout::before{content:"";position:absolute;top:-26px;left:22%;width:0;height:0;
    border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:26px solid #03357E}
.netx-callout .netx-krimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.netx-combined .netx-cap{left:3.5%;bottom:6%;transform:none}
.netx-combined .netx-legend{left:auto;right:4%;bottom:5%}
/* 풀폭(컨테이너 제거) + 문구 오버레이 */
/* 위아래 여백을 바다색과 동일하게, 하단 여백 제거 */
#network{background:#b7ddf4;padding-bottom:0}
#network .netx-full{margin-bottom:0}
/* position:static 라서 패널(absolute)은 netx-full 이 아니라 #network 기준으로 배치됨
   → 지도(stage)는 섹션 중앙에 그대로 두고 패널만 섹션 최상단 여백에 오버레이 */
.netx-full{position:static;width:100vw;margin-left:calc(50% - 50vw);margin-top:0}
/* --k: 마크(칩) 비례 스케일 단위 = 무대 폭(최대 2811px). 모든 칩 크기는 --k×비율 →
   화면이 좁아지면 지도와 함께 칩도 비례 축소(데스크탑 전 구간에서 지도가 보이도록) */
.netx-full .netx-stage{border-radius:0;aspect-ratio:auto;height:auto;max-width:2811px;margin-inline:auto;--k:min(100vw,2811px)}
.netx-full .netx-callout{left:40%;top:45%;width:28%}
.netx-full .netx-callout::before{left:12.5%;top:-50px;border-bottom:50px solid #03357E}
/* 상단 통합 패널: 지도 위에 absolute+z-index 오버레이. 고정 헤더(position:fixed, --header-h)
   아래로 내려 헤더에 가리지 않게 top=헤더높이+28px. 원래 크기 유지(width:max-content) */
.netx-topbar{position:absolute;top:calc(var(--header-h) + 28px);left:50%;transform:translateX(-50%);z-index:7;
    display:flex;align-items:center;gap:40px;width:max-content;max-width:94%;
    background:#fff;border-radius:16px;padding:22px 40px;box-shadow:0 16px 40px -16px rgba(11,28,48,.45)}
.netx-topbar .ntb-head{padding-right:40px;border-right:1px solid #e3e6ea}
.netx-topbar .sec-eyebrow{margin-bottom:6px}
.netx-topbar .sec-title{margin:0}
.netx-topbar .ntb-export{margin:10px 0 0;font-size:15px;font-weight:600;color:#333}
.netx-topbar .ntb-export b{color:#006CA7;font-weight:800}
.netx-topbar .link-more{margin-top:12px;display:inline-flex}
/* Process 제목 + More view (항상 제목 아래줄, 데스크탑·모바일 동일) */
.process-head .sec-eyebrow{margin-bottom:6px}
.ph-titlerow{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ph-titlerow .sec-title{margin-bottom:0}
.ph-titlerow .link-more{margin-bottom:0}
.netx-topbar .ntb-stats{display:flex;gap:32px;margin:0;padding:0;border:0}
.netx-topbar .stat-label{color:#555;white-space:nowrap}
.netx-topbar .stat-num,.netx-topbar .stat-num b{color:#03357E}
/* 모바일: 지도 숨기고 가운데 패널만 일반 블록으로 */
@media(max-width:767px){
    #network{background:#fff;padding:24px 16px 40px}
    .netx-full{width:auto;margin:0}
    .netx-full .netx-stage{display:block;height:auto;aspect-ratio:auto;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
    .netx-world,.netx-callout{display:none}
    .netx-topbar{position:static;transform:none;left:auto;top:auto;max-width:none;width:auto;
        flex-direction:column;align-items:flex-start;gap:18px;padding:22px 24px}
    .netx-topbar .ntb-head{border-right:0;padding-right:0;padding-bottom:18px;border-bottom:1px solid #e3e6ea;width:100%}
    .netx-topbar .ntb-stats{gap:22px;width:100%;justify-content:center}
}
/* 태블릿(768~1023px)만 지도 숨기고 패널만. 1024px 이상 데스크탑은 칩을 비례 축소해
   지도를 그대로 노출(--k 스케일) */
@media(min-width:768px) and (max-width:1023px){
    #network{background:#fff}
    .netx-full{width:auto;margin:0}
    .netx-full .netx-stage{height:auto;aspect-ratio:auto;max-width:none;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
    .netx-world,.netx-callout{display:none}
    /* 패널만: 풀사이즈가 가로로 안 들어가므로 모바일처럼 세로 스택 */
    .netx-topbar{position:static;transform:none;left:auto;top:auto;margin:0 auto;
        width:auto;max-width:none;flex-direction:column;align-items:flex-start;gap:18px}
    .netx-topbar .ntb-head{border-right:0;padding-right:0;padding-bottom:18px;border-bottom:1px solid #e3e6ea;width:100%}
    .netx-topbar .ntb-stats{gap:22px;width:100%;justify-content:center}
}
.netx-hq{position:absolute;transform:translate(-50%,-50%);width:0;height:0}
.netx-hq .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#e8541c;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.4)}
.netx-hq .ring{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;border:2px solid #e8541c;animation:nxpulse 2.4s ease-out infinite}
.netx-hq .ring.d2{animation-delay:1.2s}
@keyframes nxpulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.netx-hq .hqlbl{position:absolute;left:14px;top:-34px;white-space:nowrap;background:#03357E;color:#fff;font-size:.74rem;font-weight:700;padding:4px 11px;border-radius:7px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.netx-hq .hqlbl::after{content:"";position:absolute;left:-5px;bottom:6px;border:5px solid transparent;border-right-color:#03357E}
.netx-cap{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);background:rgba(3,53,126,.92);color:#fff;font-size:1rem;font-weight:600;padding:9px 20px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.netx-cap b{color:#7ec8ff;font-weight:800}
@media(max-width:560px){.netx-tab{padding:8px 16px;font-size:.85rem}.netx-cap{font-size:.85rem;padding:7px 14px}}