/* ============================================================
   Pretendard Variable  (SIL Open Font License 1.1)
   굵기 45~920 무단계. 파일 하나로 전 굵기를 씁니다.
   ============================================================ */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* ============================================================
   상림기술 — GNSS 메인 (자족형 단일 파일)
   컬러: 로고 실측 #36489C + 청록 포인트
   ============================================================ */
:root{
  --c-brand:#36489C; --c-brand-dark:#1F2A5A; --c-brand-deep:#141C3E;
  --c-brand-light:#7A86BE; --c-brand-pale:#EBEDF5; --c-brand-mist:#F7F8FB;
  --c-accent:#36489C; --c-accent-bright:#5B78E0; --c-accent-pale:#E9ECF8;
  --c-ink:#14181D; --c-body:#45505C; --c-muted:#7C8794;
  --c-line:#E2E6EE; --c-bg:#fff; --c-bg-soft:#F7F8FB;
  --w-wrap:1760px; --w-box:1600px; --w-area:1320px;
  --pad-x:clamp(20px,5vw,44px);
  --header-h:96px; --header-top:28px; --header-stuck:70px;
  --t-base:.4s cubic-bezier(.4,0,.2,1);
  --t-slow:.75s cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --fs-hero:clamp(2.3rem,5.4vw,4.9rem);
  --fs-h2:clamp(1.85rem,3.4vw,3rem);
  --fs-h3:clamp(1.25rem,1.9vw,1.7rem);
  --fs-lead:clamp(1rem,1.35vw,1.24rem);
  --sp-6:clamp(64px,9vw,140px);
  --radius:12px;
  --shadow:0 10px 40px rgba(20,28,62,.10);
  --scrollbar-w:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;
  color:var(--c-body);background:var(--c-bg);line-height:1.75;word-break:keep-all;overflow-x:hidden}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{color:var(--c-ink);line-height:1.24;font-weight:800;letter-spacing:-.02em}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
body.is-locked{overflow:hidden;padding-right:var(--scrollbar-w)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.area-wrap{max-width:var(--w-wrap)}.area-box{max-width:var(--w-box)}.area{max-width:var(--w-area)}
.area-wrap,.area-box,.area{width:100%;margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sp-6)}
.eyebrow{display:inline-block;margin-bottom:14px;font-size:.82rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--c-accent);
  vertical-align:middle;margin-right:10px;margin-bottom:4px}
.section-head{margin-bottom:56px;max-width:760px}
.section-head h2{font-size:var(--fs-h2)}
.section-head .lead{margin-top:18px;font-size:var(--fs-lead);color:var(--c-muted)}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);margin-top:var(--header-top);
  transition:margin-top var(--t-base),height var(--t-base),background var(--t-base),box-shadow var(--t-base)}
.header.stuck{margin-top:0;height:var(--header-stuck);background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--c-line),0 8px 30px rgba(20,28,62,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;
  max-width:var(--w-wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.logo{display:flex;align-items:center;height:100%;position:relative}
.logo img{height:40px;width:auto;transition:height var(--t-base),opacity var(--t-base)}
.header.stuck .logo img{height:34px}
.logo .lg-white{position:absolute;left:0;top:50%;translate:0 -50%}
.header.stuck .logo .lg-white{opacity:0}
.header:not(.stuck) .logo .lg-color{opacity:0}
.gnb{display:flex;gap:clamp(16px,2.5vw,46px)}
.gnb>li{position:relative}
.gnb>li>a{display:flex;align-items:center;height:var(--header-h);font-weight:600;font-size:1.02rem;
  color:#fff;transition:color var(--t-base),height var(--t-base)}
.header.stuck .gnb>li>a{color:var(--c-ink);height:var(--header-stuck)}
.gnb>li>a::after{content:"";position:absolute;left:0;bottom:26px;width:100%;height:2px;
  background:var(--c-accent-bright);transform:scaleX(0);transform-origin:right;transition:transform var(--t-base)}
.header.stuck .gnb>li>a::after{background:var(--c-accent);bottom:20px}
.gnb>li:hover>a{color:var(--c-accent-bright)}
.header.stuck .gnb>li:hover>a{color:var(--c-accent)}
.gnb>li:hover>a::after{transform:scaleX(1);transform-origin:left}
.gnb-2dep{position:absolute;top:100%;left:50%;translate:-50% 0;min-width:184px;
  display:grid;grid-template-rows:0fr;background:#fff;border-radius:10px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:grid-template-rows var(--t-base),opacity var(--t-base),visibility var(--t-base)}
.gnb>li:hover .gnb-2dep{grid-template-rows:1fr;opacity:1;visibility:visible}
.gnb-2dep>ul{overflow:hidden;padding:6px 0}
.gnb-2dep a{display:block;padding:11px 22px;font-size:.94rem;color:var(--c-body);white-space:nowrap;transition:var(--t-base)}
.gnb-2dep a:hover{background:var(--c-brand-mist);color:var(--c-brand)}
.header-util{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:6px;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.65)}
.header.stuck .lang{color:var(--c-muted)}
.lang a.on{color:#fff}.header.stuck .lang a.on{color:var(--c-ink)}
.navtog{display:none;width:42px;height:42px;position:relative}
.navtog span{position:absolute;left:10px;width:22px;height:2px;background:#fff;transition:var(--t-base)}
.header.stuck .navtog span{background:var(--c-ink)}
.navtog span:nth-child(1){top:15px}.navtog span:nth-child(2){top:21px}.navtog span:nth-child(3){top:27px}
.navtog.on span:nth-child(1){top:21px;rotate:45deg}.navtog.on span:nth-child(2){opacity:0}.navtog.on span:nth-child(3){top:21px;rotate:-45deg}

/* drawer */
.drawer{position:fixed;inset:0 0 0 auto;z-index:200;width:min(86vw,360px);
  padding:96px 24px 40px;background:#fff;overflow-y:auto;translate:100% 0;transition:translate var(--t-slow)}
.drawer.on{translate:0 0}
.drawer-dim{position:fixed;inset:0;z-index:199;background:rgba(10,15,30,.5);opacity:0;visibility:hidden;transition:var(--t-base)}
.drawer-dim.on{opacity:1;visibility:visible}
.drawer-item>button{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 4px;font-size:1.06rem;font-weight:700;color:var(--c-ink);border-bottom:1px solid var(--c-line)}
.drawer-item>button::after{content:"";width:9px;height:9px;margin-right:5px;border-right:2px solid var(--c-muted);
  border-bottom:2px solid var(--c-muted);rotate:45deg;transition:rotate var(--t-base)}
.drawer-item.on>button::after{rotate:-135deg}
.drawer-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base)}
.drawer-item.on .drawer-sub{grid-template-rows:1fr}
.drawer-sub>ul{overflow:hidden}
.drawer-sub a{display:block;padding:11px 6px;color:var(--c-body)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;background:#0d1330;
  overflow:hidden;display:flex;align-items:center}

/* 배경 영상 */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block}
/* 영상 위 어둡게 — 흰 글씨 가독성 확보 */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(9,14,38,.90) 0%,rgba(9,14,38,.66) 38%,rgba(9,14,38,.28) 68%,rgba(9,14,38,.42) 100%),
    linear-gradient(180deg,rgba(9,14,38,.72) 0%,rgba(9,14,38,.10) 26%,rgba(9,14,38,.16) 62%,rgba(9,14,38,.78) 100%)}

/* ★ 히어로 → 다음 흰 섹션 경계를 부드럽게 녹임 */
.hero-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:2;pointer-events:none;
  height:clamp(120px,17vh,230px);
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 34%,
    rgba(255,255,255,.30) 60%,
    rgba(255,255,255,.70) 82%,
    rgba(255,255,255,.94) 94%,
    #fff 100%)}
.hero-grid{position:absolute;inset:0;z-index:1;opacity:.34;
  background-image:linear-gradient(rgba(122,134,190,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,134,190,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask:radial-gradient(70% 70% at 50% 45%,#000,transparent 85%)}
.hero-inner{position:relative;z-index:4;width:100%;max-width:var(--w-wrap);
  margin-inline:auto;padding-inline:var(--pad-x)}
.hero h1{position:relative;font-size:var(--fs-hero);color:#fff;
  letter-spacing:-.038em;line-height:1.1;
  text-shadow:0 2px 30px rgba(6,10,30,.45),0 1px 3px rgba(6,10,30,.35)}
/* 왼쪽 강조 바 — 위에서 아래로 그어집니다 */
.hero h1::before{content:"";position:absolute;left:-26px;top:.16em;bottom:.2em;width:4px;
  border-radius:4px;background:linear-gradient(180deg,var(--c-accent-bright),rgba(91,120,224,0));
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s .35s var(--ease-out)}
.hero.in h1::before{transform:scaleY(1)}
/* 1행은 가볍게, 3행은 무겁게 — 무게 대비로 리듬을 줍니다 */
.hero h1 .thin{font-weight:420;color:rgba(255,255,255,.84);letter-spacing:-.026em}
.hero h1 .accent{position:relative;font-style:normal;
  background:linear-gradient(96deg,#A9C0FF 0%,var(--c-accent-bright) 44%,#A8BCFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(91,120,224,.34))}
/* 강조어 밑줄이 왼쪽에서 그어집니다 (background-clip 영향을 피해 래퍼에 붙입니다) */
.hero h1 .hl{position:relative;display:inline-block}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:5px;
  border-radius:6px;background:linear-gradient(90deg,var(--c-accent-bright),rgba(168,188,255,.18));
  transform:scaleX(0);transform-origin:left;transition:transform 1.05s .8s var(--ease-out);
  box-shadow:0 4px 18px rgba(91,120,224,.35)}
.hero.in h1 .hl::after{transform:scaleX(1)}
@media (max-width:700px){.hero h1::before{left:-14px;width:3px}}
@media (prefers-reduced-motion:reduce){
  .hero h1::before,.hero h1 .hl::after{transition:none;transform:none}
}
.hero .reveal-line{display:block;overflow:hidden}
.hero .reveal-line>span{display:inline-block;translate:0 110%;transition:translate 1s var(--ease-out)}
.hero.in .reveal-line>span{translate:0 0}
.hero .reveal-line:nth-child(2)>span{transition-delay:.12s}
.hero .reveal-line:nth-child(3)>span{transition-delay:.24s}
.hero-sub b{color:#fff;font-weight:var(--w-bold)}
.hero-sub{margin-top:28px;max-width:46ch;color:#c9d1ee;font-size:var(--fs-lead);
  opacity:0;translate:0 20px;transition:opacity 1s .5s ease,translate 1s .5s var(--ease-out)}
.hero.in .hero-sub{opacity:1;translate:0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;
  opacity:0;translate:0 20px;transition:opacity 1s .68s ease,translate 1s .68s var(--ease-out)}
.hero.in .hero-cta{opacity:1;translate:0 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:999px;
  font-weight:700;font-size:1rem;transition:transform var(--t-base),background var(--t-base),box-shadow var(--t-base)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--c-accent);color:#fff;box-shadow:0 8px 24px rgba(54,72,156,.35)}
.btn-primary:hover{background:#2B3A80;transform:translateY(-3px);box-shadow:0 14px 34px rgba(54,72,156,.45)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--c-brand-dark);border-color:#fff}
.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:4;translate:-50% 0;width:24px;height:38px;
  border:2px solid rgba(255,255,255,.45);border-radius:13px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;translate:-50% 0;width:3px;height:7px;
  border-radius:2px;background:#fff;animation:cue 1.7s infinite}
@keyframes cue{0%{opacity:0;translate:-50% 0}35%{opacity:1}100%{opacity:0;translate:-50% 13px}}

/* reveal */
[data-reveal]{opacity:0;translate:0 36px;transition:opacity var(--t-slow),translate var(--t-slow);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;translate:0 0}

/* about */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,88px);align-items:center}
.about-visual{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;
  background:linear-gradient(135deg,#25316b,#141c3e)}
.about-visual .ring{position:absolute;border:1px solid rgba(91,120,224,.35);border-radius:50%}
.about-visual .r1{inset:14%}.about-visual .r2{inset:26%}.about-visual .r3{inset:38%}
.about-visual .dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--c-accent-bright);
  box-shadow:0 0 16px 3px rgba(91,120,224,.6)}
.about-visual .core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:64px;height:64px;
  border-radius:50%;background:radial-gradient(circle,#5B78E0,#36489C);box-shadow:0 0 40px rgba(91,120,224,.5)}
.about-visual .lbl{position:absolute;left:22px;bottom:20px;color:#c3cbeb;font-size:.8rem;letter-spacing:.05em}
.about-body h2{font-size:var(--fs-h2);margin-bottom:22px}
.about-body p{margin-bottom:18px}
.about-body .sig{margin-top:26px;font-weight:700;color:var(--c-brand)}

/* feature cards */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{position:relative;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:34px 28px 30px;overflow:hidden;transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--c-brand),var(--c-accent-bright));transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:var(--c-brand-pale);color:var(--c-brand);transition:var(--t-base)}
.card:hover .ic{background:var(--c-accent);color:#fff}
.card .ic svg{width:28px;height:28px}
.card h3{font-size:1.24rem;margin-bottom:12px}
.card p{font-size:.96rem;color:var(--c-muted)}
.card .no{position:absolute;right:22px;top:24px;font-size:.8rem;font-weight:800;color:var(--c-line)}

/* stats band */
.band{background:linear-gradient(135deg,#1F2A5A 0%,#141C3E 60%,#10193a 100%);position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-8%;top:-40%;width:640px;height:640px;border-radius:50%;
  border:1px solid rgba(122,134,190,.18);box-shadow:0 0 0 60px rgba(122,134,190,.05)}
.band .area{position:relative;z-index:2}
.band .section-head h2{color:#fff}
.band .section-head .lead{color:#a9b2da}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.stat b{display:flex;align-items:baseline;line-height:1}
.stat .num{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800;color:#fff}
.stat b .u{font-size:1.35rem;color:var(--c-accent-bright);margin-left:5px;font-weight:700}
.stat span{display:block;margin-top:12px;color:#9aa3cc;font-size:.96rem}
.stat i{display:block;width:34px;height:3px;background:var(--c-accent-bright);margin-top:18px;border-radius:2px}

/* solutions tabs */
.tabs{border-top:1px solid var(--c-line)}
.tab-list{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--c-line);margin-bottom:44px}
.tab-btn{position:relative;padding:16px 28px;font-weight:700;font-size:1.02rem;color:var(--c-muted);transition:color var(--t-base)}
.tab-btn::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--c-brand);
  scale:0 1;transition:scale var(--t-base)}
.tab-btn:hover{color:var(--c-ink)}
.tab-btn.on{color:var(--c-brand)}.tab-btn.on::after{scale:1 1}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:fadeup .5s var(--ease-out)}
@keyframes fadeup{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.sol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.sol-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;position:relative;
  background:linear-gradient(135deg,#25316b,#141c3e);display:grid;place-items:center}
.sol-media .glyph{width:40%;opacity:.9}
.sol-body h3{font-size:var(--fs-h3);margin-bottom:16px}
.sol-body ul.chk{margin-top:22px}
.sol-body ul.chk li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--c-body)}
.sol-body ul.chk li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:var(--c-accent-pale)}
.sol-body ul.chk li::after{content:"";position:absolute;left:6px;top:11px;width:6px;height:9px;
  border-right:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);rotate:45deg}

/* cta */
.cta{background:radial-gradient(120% 140% at 80% 20%,#25316b,#141c3e);text-align:center;color:#fff}
.cta h2{color:#fff;font-size:var(--fs-h2);margin-bottom:18px}
.cta p{color:#a9b2da;max-width:52ch;margin:0 auto 34px;font-size:var(--fs-lead)}

/* footer */
.footer{background:#0f1533;color:rgba(255,255,255,.6);padding:66px 0 34px}
.footer-top{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between}
.footer-logo{height:88px;width:auto;margin-bottom:18px}
.footer-brand p{font-size:.9rem;line-height:1.7;max-width:34ch}
.footer-map{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,72px)}
.footer-map h4{color:#fff;font-size:.9rem;margin-bottom:16px;font-weight:700}
.footer-map li{margin-bottom:10px;font-size:.88rem}
.footer-map a{transition:color var(--t-base)}.footer-map a:hover{color:#fff}
.footer-bottom{margin-top:44px;padding-top:26px;padding-right:70px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.to-top{position:fixed;right:26px;bottom:26px;z-index:90;width:50px;height:50px;border-radius:50%;
  background:var(--c-brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;translate:0 14px;transition:var(--t-base)}
.to-top.on{opacity:1;visibility:visible;translate:0 0}
.to-top:hover{background:var(--c-accent)}

.note{background:var(--c-accent-pale);border-radius:var(--radius);padding:20px 26px;
  font-size:.92rem;color:#2A3878;margin-top:40px}
.note b{color:var(--c-accent)}

/* responsive */
@media (max-width:1280px){.feat-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr);gap:40px 30px}}
@media (max-width:800px){
  :root{--header-h:62px;--header-top:0px;--header-stuck:62px}
  .header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--c-line)}
  .header .logo .lg-white{opacity:0!important}.header .logo .lg-color{opacity:1!important}
  .gnb,.lang{display:none}.navtog{display:block}.navtog span{background:var(--c-ink)}
  .gnb>li>a,.header.stuck .gnb>li>a{color:var(--c-ink)}
  .split,.sol{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
}
@media (max-width:480px){.tab-btn{padding:13px 16px;font-size:.94rem}.footer-top{flex-direction:column}}

/* ---------- 추가: 인사말 / 구축사례 / 제품 스펙 ---------- */
.greet-card{background:var(--c-brand-mist);border-radius:var(--radius);padding:clamp(28px,4vw,52px)}
.greet-card .q{font-size:clamp(1.35rem,2.4vw,2rem);font-weight:800;color:var(--c-brand-dark);
  line-height:1.4;margin-bottom:26px;letter-spacing:-.02em}
.greet-card p{margin-bottom:16px}
.greet-sign{display:flex;align-items:flex-end;justify-content:flex-end;
  gap:16px 24px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--c-line)}
.greet-sign .gs-txt{display:flex;align-items:baseline;gap:10px}
.greet-sign .role{font-size:.9rem;color:var(--c-muted)}
.greet-sign .name{font-size:1.3rem;font-weight:800;color:var(--c-brand)}

.rec-cat{margin-bottom:38px}
.rec-cat h3{display:flex;align-items:center;gap:12px;font-size:1.1rem;margin-bottom:16px;color:#fff}
.rec-cat h3 .cnt{font-size:.78rem;font-weight:700;color:var(--c-accent-bright);
  background:rgba(91,120,224,.14);padding:3px 11px;border-radius:999px}
.rec-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rec-list li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:9px;padding:14px 18px;font-size:.92rem;color:#c9d0ee;
  transition:background var(--t-base),border-color var(--t-base),transform var(--t-base)}
.rec-list li:hover{background:rgba(91,120,224,.10);border-color:rgba(91,120,224,.35);transform:translateY(-2px)}
.rec-list li b{display:block;color:#fff;font-weight:600;margin-bottom:3px}
.rec-list li span{font-size:.8rem;color:#8c94be}

.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.spec div{background:var(--c-brand-mist);border-radius:10px;padding:18px 20px}
.spec h4{font-size:.98rem;margin-bottom:7px;color:var(--c-brand)}
.spec p{font-size:.89rem;color:var(--c-body);line-height:1.6}
.rnd{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.rnd span{padding:8px 16px;border:1px solid var(--c-line);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--c-brand)}
@media (max-width:1280px){.rec-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.rec-list,.spec{grid-template-columns:1fr}}


/* ============================================================
   타이포그래피 — 굵기로 위계를 만든다
   ------------------------------------------------------------
   크기만으로 나누지 않고 굵기·자간·행간을 함께 조절합니다.
   가변 폰트라 450 / 550 / 650 같은 중간값을 쓸 수 있어
   위계가 촘촘하면서도 부드럽게 이어집니다.
   ============================================================ */
:root{
  --ff:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
       'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  /* 굵기 토큰 */
  --w-body:400; --w-read:450; --w-nav:550; --w-mid:600;
  --w-semi:650; --w-bold:700; --w-head:760; --w-title:820;
}
body{
  font-family:var(--ff);
  font-weight:var(--w-body);
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;   /* 숫자 세로 정렬 */
}
h1,h2,h3,h4{font-family:var(--ff);text-wrap:balance}

/* --- 히어로 --- */
.hero h1{font-weight:880;letter-spacing:-.038em;line-height:1.1}
.hero h1 .accent{font-style:normal;font-weight:880}   /* em 기본 기울임 해제 */
.hero h1 .thin{font-weight:420}
.hero-sub{font-weight:var(--w-body);letter-spacing:-.008em;line-height:1.72}

/* --- 섹션 공통 --- */
.eyebrow{font-weight:var(--w-bold);letter-spacing:.2em}
.section-head h2{font-weight:var(--w-title);letter-spacing:-.035em;line-height:1.18}
.section-head .lead{font-weight:var(--w-body);letter-spacing:-.008em;line-height:1.72}

/* --- 내비게이션 --- */
.gnb>li>a{font-weight:var(--w-nav);letter-spacing:-.012em}
.gnb>li:hover>a{font-weight:var(--w-semi)}
.gnb-2dep a{font-weight:var(--w-read);letter-spacing:-.008em}
.lang{font-weight:var(--w-semi);letter-spacing:.02em}
.drawer-item>button{font-weight:var(--w-bold);letter-spacing:-.02em}
.drawer-sub a{font-weight:var(--w-read)}

/* --- 버튼 --- */
.btn{font-weight:var(--w-bold);letter-spacing:-.015em}

/* --- 인사말 --- */
.greet-card .q{font-weight:var(--w-head);letter-spacing:-.03em;line-height:1.46}
.greet-card p{font-weight:var(--w-body);letter-spacing:-.005em;line-height:1.85}
.greet-sign .role{font-weight:500;letter-spacing:.03em}
.greet-sign .name{font-weight:var(--w-title);letter-spacing:-.02em}
.rnd span{font-weight:var(--w-mid);letter-spacing:-.01em}

/* --- 카드 --- */
.card h3{font-weight:var(--w-bold);letter-spacing:-.024em;line-height:1.34}
.card p{font-weight:var(--w-body);letter-spacing:-.005em;line-height:1.74}
.card .no{font-weight:var(--w-title);letter-spacing:.06em}

/* --- 탭 / 제품 --- */
.tab-btn{font-weight:var(--w-mid);letter-spacing:-.015em}
.tab-btn.on{font-weight:var(--w-bold)}
.sol-body h3{font-weight:var(--w-head);letter-spacing:-.028em;line-height:1.3}
.sol-body>p{font-weight:var(--w-body);letter-spacing:-.005em;line-height:1.75}
.spec h4{font-weight:var(--w-bold);letter-spacing:-.015em}
.spec p{font-weight:var(--w-body);letter-spacing:-.003em;line-height:1.62}

/* --- 숫자 밴드 / 구축사례 --- */
.stat .num{font-weight:var(--w-title);letter-spacing:-.045em}
.stat b .u{font-weight:var(--w-mid)}
.stat span{font-weight:var(--w-read);letter-spacing:-.003em}
.rec-cat h3{font-weight:var(--w-bold);letter-spacing:-.022em}
.rec-cat h3 .cnt{font-weight:var(--w-bold);letter-spacing:.02em}
.rec-list li b{font-weight:var(--w-mid);letter-spacing:-.012em}
.rec-list li span{font-weight:var(--w-body);letter-spacing:0}

/* --- CTA / 푸터 --- */
.cta h2{font-weight:var(--w-title);letter-spacing:-.035em}
.cta p{font-weight:var(--w-body);letter-spacing:-.006em}
.footer-brand p{font-weight:var(--w-body);letter-spacing:-.004em}
.footer-map h4{font-weight:var(--w-bold);letter-spacing:.03em}
.footer-map li{font-weight:var(--w-body);letter-spacing:-.004em}
.footer-bottom{font-weight:var(--w-body);letter-spacing:-.002em}
.note{font-weight:var(--w-read);letter-spacing:-.004em}

/* 로고 옆 회사명 등 소형 라벨은 또렷하게 */
.about-visual .lbl{font-weight:var(--w-mid);letter-spacing:.06em}

/* ============================================================
   서브페이지 전용
   ============================================================ */
.subvis{position:relative;height:clamp(260px,34vw,400px);display:flex;align-items:flex-end;
  background:radial-gradient(120% 150% at 78% 20%,#2a3670 0%,#1f2a5a 45%,#141c3e 100%);overflow:hidden}
.subvis::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(122,134,190,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,134,190,.09) 1px,transparent 1px);background-size:56px 56px;
  mask:radial-gradient(70% 80% at 40% 50%,#000,transparent 88%)}
.subvis .orb{position:absolute;border-radius:50%}
.subvis .o1{width:clamp(180px,26vw,340px);aspect-ratio:1;right:6%;top:-14%;background:#2e3c86}
.subvis .o2{width:clamp(90px,13vw,170px);aspect-ratio:1;right:22%;bottom:-16%;
  background:transparent;border:1.5px solid var(--c-accent-bright)}
.subvis-inner{position:relative;z-index:2;width:100%;max-width:var(--w-wrap);
  margin-inline:auto;padding:0 var(--pad-x) clamp(34px,4.5vw,58px)}
.subvis h1{font-size:clamp(1.9rem,3.9vw,3.1rem);color:#fff;font-weight:var(--w-title);
  letter-spacing:-.035em;line-height:1.16}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;
  font-size:.86rem;color:#a9b2da;font-weight:var(--w-read)}
.crumb a{transition:color var(--t-base)}.crumb a:hover{color:#fff}
.crumb i{width:4px;height:4px;border-radius:50%;background:#6e77a0;display:inline-block}
.crumb .cur{color:var(--c-accent-bright);font-weight:var(--w-mid)}

/* 서브 탭 메뉴 (형제 페이지) */
.subnav{position:sticky;top:var(--header-stuck);z-index:80;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line)}
/* 항목이 잘려서 숨는 일이 없도록 줄바꿈으로 처리합니다 (가로 스크롤 금지) */
.subnav ul{display:flex;flex-wrap:wrap;justify-content:center;max-width:var(--w-wrap);
  margin-inline:auto;padding-inline:var(--pad-x)}
.subnav a{position:relative;display:block;padding:19px 22px;white-space:nowrap;
  font-size:.98rem;font-weight:var(--w-nav);color:var(--c-muted);letter-spacing:-.012em;
  transition:color var(--t-base)}
.subnav a::after{content:"";position:absolute;left:18px;right:18px;bottom:6px;height:2px;
  background:var(--c-brand);scale:0 1;transform-origin:center;transition:scale var(--t-base)}
.subnav a:hover{color:var(--c-ink)}
.subnav a.on{color:var(--c-brand);font-weight:var(--w-bold)}
.subnav a.on::after{scale:1 1}
@media (max-width:900px){
  .subnav a{padding:14px 15px;font-size:.93rem}
  .subnav a::after{left:11px;right:11px;bottom:4px}
}
@media (max-width:640px){
  /* 여러 줄로 접히므로 고정하지 않습니다 — 화면을 덜 차지합니다 */
  .subnav{position:static}
  .subnav ul{gap:2px 0;padding-block:6px}
  .subnav a{padding:10px 12px;font-size:.88rem}
  .subnav a::after{left:8px;right:8px;bottom:2px}
}

/* 본문 블록 */
.prose{max-width:74ch}
.prose p{margin-bottom:18px;font-weight:var(--w-body);letter-spacing:-.005em;line-height:1.85}
.prose p:last-child{margin-bottom:0}
.lead-box{background:var(--c-brand-mist);border-radius:var(--radius);
  padding:clamp(26px,3.4vw,42px);margin-bottom:48px}
.lead-box p{font-size:clamp(1.02rem,1.35vw,1.16rem);font-weight:var(--w-read);
  letter-spacing:-.012em;line-height:1.8;color:var(--c-ink);margin:0}

.need{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.need div{position:relative;padding:28px 26px 26px;border:1px solid var(--c-line);
  border-radius:var(--radius);background:#fff;transition:var(--t-base)}
.need div:hover{border-color:var(--c-accent);transform:translateY(-4px);box-shadow:var(--shadow)}
.need b{display:block;font-size:.78rem;font-weight:var(--w-bold);color:var(--c-accent);
  letter-spacing:.14em;margin-bottom:10px}
.need p{font-size:1rem;font-weight:var(--w-mid);color:var(--c-ink);letter-spacing:-.015em;line-height:1.5}

.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
/* 카드가 하나뿐일 때 가로로 늘어지지 않게 폭을 잡아 둡니다 */
.sol-grid.is-one{grid-template-columns:minmax(0,min(100%,480px))}
.sol-item{border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;
  background:#fff;transition:var(--t-base)}
.sol-item:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
/* 주요제품 페이지로 넘어가는 카드 — 사진 위 오른쪽 아래에 화살표가 나타납니다 */
a.sol-item{display:block;color:inherit}
a.sol-item:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.sol-go{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--c-accent);color:#fff;z-index:2;
  opacity:0;translate:0 8px;
  transition:opacity .4s ease,translate .4s var(--ease-out)}
.sol-go svg{width:16px;height:16px}
a.sol-item:hover .sol-go,a.sol-item:focus-visible .sol-go{opacity:1;translate:0 0}
a.sol-item:hover h3{color:var(--c-brand)}
@media (hover:none){.sol-go{opacity:1;translate:0 0}}
.sol-item .fig{aspect-ratio:16/10;display:grid;place-items:center;position:relative;
  overflow:hidden;background:linear-gradient(135deg,#2a3670,#141c3e)}
.sol-item .fig svg{width:38%;max-width:110px}
/* 실제 제품 사진을 쓰는 카드 */
.sol-item .fig picture{position:absolute;inset:0;display:block}
.sol-item .fig img{width:100%;height:100%;display:block;
  transition:scale .7s var(--ease-out)}
.sol-item.has-photo .fig{background:linear-gradient(150deg,#25316b,#111a3c)}
.sol-item.has-photo .fig img.fit-contain{object-fit:contain;padding:11% 13%;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.42))}
/* 세로로 긴 장비(함체 등)는 위아래 여백을 줄여 크게 보이도록 */
.sol-item.has-photo .fig img.fit-tall{object-fit:contain;padding:4% 12%;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.42))}
.sol-item.has-photo .fig img.fit-cover{object-fit:cover}
.sol-item.has-photo:hover .fig img{scale:1.045}
.sol-item .txt{padding:22px 24px}
.sol-item h3{font-size:1.08rem;font-weight:var(--w-bold);letter-spacing:-.02em;margin-bottom:8px}
.sol-item p{font-size:.92rem;color:var(--c-muted);font-weight:var(--w-body);line-height:1.65}

/* 정의 목록 (회사개요·연락처) */
.dl{border-top:2px solid var(--c-ink)}
.dl .row{display:grid;grid-template-columns:200px 1fr;gap:20px;
  padding:20px 8px;border-bottom:1px solid var(--c-line)}
.dl dt{font-weight:var(--w-bold);color:var(--c-ink);letter-spacing:-.015em}
.dl dd{margin:0;font-weight:var(--w-body);letter-spacing:-.005em;line-height:1.75}
.dl dd a{color:var(--c-brand);font-weight:var(--w-mid)}
.dl dd a:hover{text-decoration:underline}

/* 안내 박스 */
.empty{text-align:center;padding:clamp(50px,8vw,90px) 24px;background:var(--c-brand-mist);
  border-radius:var(--radius)}
.empty .ic{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--c-brand-light);box-shadow:var(--shadow)}
.empty h3{font-size:1.24rem;font-weight:var(--w-bold);letter-spacing:-.022em;margin-bottom:10px}
.empty p{color:var(--c-muted);font-weight:var(--w-body);letter-spacing:-.005em}

/* 문의 폼 */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.9rem;font-weight:var(--w-bold);color:var(--c-ink);letter-spacing:-.012em}
.field input,.field textarea{font-family:var(--ff);font-size:1rem;font-weight:var(--w-body);
  padding:14px 16px;border:1px solid var(--c-line);border-radius:9px;background:#fff;
  color:var(--c-ink);transition:border-color var(--t-base),box-shadow var(--t-base)}
.field textarea{min-height:170px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(54,72,156,.12)}
.form-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn-line{border:1px solid var(--c-line);color:var(--c-ink);background:#fff}
.btn-line:hover{border-color:var(--c-brand);color:var(--c-brand);background:var(--c-accent-pale)}
.field label .req{color:var(--c-accent);font-weight:var(--w-bold)}
/* 미입력·형식 오류 표시 */
.field.is-bad input,.field.is-bad textarea{border-color:#E05252;background:#FEF6F6}
.field.is-bad input:focus,.field.is-bad textarea:focus{border-color:#E05252;
  box-shadow:0 0 0 3px rgba(224,82,82,.16)}
.form-msg{margin-top:16px;padding:12px 16px;border-radius:10px;font-size:.92rem;
  line-height:1.6;font-weight:var(--w-mid);letter-spacing:-.012em;word-break:keep-all}
.form-msg.is-ok{background:var(--c-accent-pale);color:var(--c-brand)}
.form-msg.is-bad{background:#FDECEC;color:#B23131}
.form-note{margin-top:18px;font-size:.88rem;line-height:1.75;color:var(--c-muted);
  font-weight:var(--w-body);word-break:keep-all}
.form-note b{font-weight:var(--w-bold);color:var(--c-ink)}

@media (max-width:1280px){.need{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){
  .need{grid-template-columns:1fr}
  .dl .row{grid-template-columns:1fr;gap:6px;padding:16px 4px}
  .form-grid{grid-template-columns:1fr}
}

/* JS 비활성/실패 시에도 콘텐츠가 보이도록 */
.no-js [data-reveal]{opacity:1!important;translate:none!important}

/* ============================================================
   인증현황 — 카드 그리드 · 필터 · 라이트박스
   ============================================================ */
.cert-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px}
.cert-stats div{background:var(--c-brand-mist);border-radius:var(--radius);
  padding:26px 24px;text-align:center;transition:var(--t-base)}
.cert-stats div:hover{background:var(--c-accent-pale);transform:translateY(-3px)}
.cert-stats b{display:block;font-size:clamp(1.9rem,3vw,2.5rem);font-weight:var(--w-title);
  color:var(--c-brand);letter-spacing:-.04em;line-height:1}
.cert-stats span{display:block;margin-top:8px;font-size:.9rem;font-weight:var(--w-read);color:var(--c-muted)}

.cert-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}
.cert-filter button{padding:11px 22px;border:1px solid var(--c-line);border-radius:999px;
  font-size:.94rem;font-weight:var(--w-mid);color:var(--c-muted);letter-spacing:-.012em;
  background:#fff;transition:var(--t-base)}
.cert-filter button:hover{border-color:var(--c-brand-light);color:var(--c-ink)}
.cert-filter button.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff;font-weight:var(--w-bold)}

.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cert{margin:0;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;
  background:#fff;transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
.cert:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.cert.hide{display:none}
.cert-img{display:block;width:100%;padding:0;border:0;cursor:zoom-in;position:relative;
  background:var(--c-brand-mist);aspect-ratio:1/1.32;overflow:hidden}
.cert-img img{width:100%;height:100%;object-fit:contain;object-position:center;
  transition:scale var(--t-slow)}
.cert:hover .cert-img img{scale:1.04}
.cert-img::after{content:"확대";position:absolute;right:10px;bottom:10px;
  padding:5px 12px;border-radius:999px;background:rgba(20,28,62,.82);color:#fff;
  font-size:.74rem;font-weight:var(--w-mid);opacity:0;transition:opacity var(--t-base)}
.cert:hover .cert-img::after{opacity:1}
.cert figcaption{padding:20px 20px 22px;border-top:1px solid var(--c-line)}
.cert .tag{display:inline-block;margin-bottom:9px;padding:4px 11px;border-radius:999px;
  font-size:.7rem;font-weight:var(--w-bold);letter-spacing:.04em}
.tag-iso{background:#E6EDFA;color:#2B3E86}
.tag-kc{background:var(--c-accent-pale);color:#2A3878}
.tag-tta{background:#EAF0E7;color:#2E5C3A}
.tag-eco{background:#E4F3E8;color:#1F6B39}
.tag-rel{background:#F3ECDF;color:#7A5518}
.cert h3{font-size:1.04rem;font-weight:var(--w-bold);letter-spacing:-.022em;line-height:1.4;margin-bottom:4px}
.cert .model{font-size:.84rem;font-weight:var(--w-mid);color:var(--c-accent);
  letter-spacing:.01em;margin-bottom:12px}
.cert dl{margin:0;display:grid;gap:5px}
.cert dl div{display:grid;grid-template-columns:60px 1fr;gap:8px;font-size:.8rem;line-height:1.5}
.cert dt{color:var(--c-muted);font-weight:var(--w-read)}
.cert dd{margin:0;color:var(--c-body);font-weight:var(--w-mid);word-break:break-all}

/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:300;display:none;
  background:rgba(10,15,32,.93);backdrop-filter:blur(4px);padding:64px 84px 34px}
.lb.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.lb img{max-width:100%;min-height:0;flex:0 1 auto;object-fit:contain;border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);background:#fff}
.lb-cap{flex:0 0 auto;text-align:center;color:#c3cbeb;
  font-size:.94rem;font-weight:var(--w-read);padding-inline:12px}
.lb-x{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:var(--t-base)}
.lb-x:hover{background:var(--c-accent)}
.lb-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:var(--t-base)}
.lb-nav:hover{background:var(--c-accent)}
.lb-prev{left:20px}.lb-next{right:20px}

@media (max-width:1280px){.cert-grid{grid-template-columns:repeat(3,1fr)}.cert-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.cert-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .cert figcaption{padding:15px 14px 17px}.cert h3{font-size:.94rem}
  .lb{padding:56px 14px 26px}.lb-nav{width:40px;height:40px}}
@media (max-width:480px){.cert-grid{grid-template-columns:1fr}.cert-stats{grid-template-columns:1fr}}

/* ============================================================
   스크롤 텍스트 필 — 스크롤하면 글자에 색이 차오름
   원리: 흐린 글자색 위에 그라데이션을 background-clip:text 로
        글자 모양에 가두고, background-size 를 0→100% 로 늘림
   ============================================================ */
.fill-wrap{max-width:none}
.fill-line{display:block;white-space:nowrap;   /* 줄바꿈 금지 — 한 줄씩 채워야 자연스럽다 */
  font-size:clamp(1.55rem,4.4vw,4.2rem);font-weight:var(--w-title);
  letter-spacing:-.042em;line-height:1.26;color:var(--c-ink)}
.fill-line + .fill-line{margin-top:4px}
.fill-line.indent{margin-left:clamp(0px,5vw,104px)}
/* 한 줄짜리 — 줄바꿈 없이 가로로 꽉 차게 */
.fill-line.one{font-size:clamp(1.4rem,2.95vw,2.9rem);letter-spacing:-.045em;line-height:1.3}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fill-line{
    color:rgba(20,24,29,.15);
    background:linear-gradient(to right,var(--c-brand),var(--c-brand)) left center no-repeat;
    -webkit-background-clip:text;background-clip:text;
    background-size:0% 100%;
  }
  .fill-line.is-done{background-size:100% 100%}
}
@media (prefers-reduced-motion:reduce){.fill-line{background-size:100% 100%!important}}
@media (max-width:800px){
  .fill-line{background-size:100% 100%;white-space:normal;font-size:clamp(1.5rem,7vw,2.2rem);line-height:1.35}
  .fill-line.one{font-size:clamp(1.45rem,6.2vw,2.1rem);white-space:normal}
  .fill-line.indent{margin-left:0}
}

/* ============================================================
   커스텀 마우스 포인터
   ============================================================ */
.cursor{position:fixed;top:0;left:0;z-index:400;pointer-events:none;
  width:12px;height:12px;border-radius:50%;background:var(--c-accent);
  translate:-50% -50%;
  transition:width .32s var(--ease-out),height .32s var(--ease-out),
             background-color .32s var(--ease-out),opacity .25s ease;
  opacity:0;display:grid;place-items:center;mix-blend-mode:normal}
.cursor.on{opacity:1}
.cursor span{font-size:.68rem;font-weight:var(--w-bold);color:#fff;letter-spacing:.02em;
  opacity:0;scale:.6;transition:opacity .22s ease,scale .28s var(--ease-out);white-space:nowrap}
.cursor.hot{width:60px;height:60px;background:rgba(54,72,156,.92)}
.cursor.hot span{opacity:1;scale:1}
.cursor-ring{position:fixed;top:0;left:0;z-index:399;pointer-events:none;
  width:36px;height:36px;border:1px solid rgba(54,72,156,.45);border-radius:50%;
  translate:-50% -50%;opacity:0;transition:opacity .25s ease,scale .3s var(--ease-out)}
.cursor-ring.on{opacity:1}
.cursor-ring.hot{scale:0;opacity:0}
/* 터치 기기·모바일에서는 숨김 */
@media (hover:none),(max-width:800px){.cursor,.cursor-ring{display:none!important}}

/* ============================================================
   아코디언 확장 카드 — 하나가 펼쳐지고 나머지는 접힘
   원리: flex-grow 를 transition 걸어 폭을 부드럽게 배분
   ============================================================ */
.acc{display:flex;gap:16px;min-height:clamp(420px,46vw,600px)}
.acc-item{position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  --ease-acc:cubic-bezier(.22,.61,.36,1);
  border-radius:var(--radius);background:var(--c-brand-mist);
  border:1px solid var(--c-line);cursor:pointer;
  transition:flex-grow .78s var(--ease-acc),background-color .55s ease,
             border-color .55s ease,box-shadow .55s ease}
.acc-item.is-open{flex-grow:3.6;background:#fff;border-color:var(--c-brand-light);
  box-shadow:0 14px 46px rgba(20,28,62,.13)}
/* 분해도 확대(.is-zoom) 때 깔리는 짙은 파란 배경.
   그라디언트는 transition 이 안 되므로 별도 레이어를 opacity 로 페이드합니다.
   색은 제품 영상 섹션(.dark-sec)과 같은 계열입니다. */
.acc-item::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .5s ease;border-radius:inherit;
  background:
    radial-gradient(88% 70% at 18% 4%,rgba(91,120,224,.34),transparent 62%),
    radial-gradient(70% 62% at 92% 96%,rgba(54,72,156,.30),transparent 66%),
    linear-gradient(155deg,#1b2550 0%,#141c3e 46%,#0b1024 100%)}
.acc-item.is-zoom::before{opacity:1}
/* 가운데 깔린 분해도 위로 흰 글씨가 항상 읽히도록, 글 영역에만 얇게 어둡게 */
.acc-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;
  z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(0deg,rgba(9,13,32,.90) 0%,rgba(9,13,32,.60) 46%,transparent 100%)}
.acc-item.is-zoom::after{opacity:1}
.acc-item.is-zoom{border-color:rgba(91,120,224,.42);
  box-shadow:0 22px 60px rgba(5,7,15,.32)}
.acc-fig{z-index:1}

/* 배경 제품 그래픽 — 접혔을 땐 크고 흐리게 깔림 */
.acc-fig{position:absolute;right:-10%;top:40%;width:88%;opacity:.26;
  transition:opacity .55s ease,right .78s var(--ease-acc),
             top .78s var(--ease-acc),width .78s var(--ease-acc)}
.acc-fig svg{width:100%;height:auto}
.acc-item.is-open .acc-fig{opacity:1;right:6%;top:12%;width:44%}

/* 접힌 상태 라벨 */
.acc-mini{position:relative;z-index:2;padding:34px 26px;text-align:center;
  transition:opacity .4s .30s ease}
.acc-mini h3{font-size:clamp(1rem,1.35vw,1.22rem);font-weight:var(--w-bold);
  letter-spacing:-.022em;color:var(--c-ink);line-height:1.35}
.acc-mini p{margin-top:8px;font-size:.84rem;font-weight:var(--w-read);color:var(--c-muted)}
.acc-item.is-open .acc-mini{opacity:0;pointer-events:none;transition:opacity .18s ease}
.acc-plus{position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:2;
  width:34px;height:34px;color:var(--c-brand-light);
  transition:opacity .4s .30s ease,rotate .5s var(--ease-acc)}
.acc-item.is-open .acc-plus{opacity:0;rotate:45deg;transition:opacity .18s ease,rotate .5s var(--ease-acc)}

/* 펼쳐진 상태 내용 */
.acc-full{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(28px,3vw,46px);
  opacity:0;visibility:hidden;translate:0 16px;
  transition:opacity .28s ease,translate .28s ease,visibility 0s .28s}
.acc-item.is-open .acc-full{opacity:1;visibility:visible;translate:0 0;
  transition:opacity .5s .32s ease,translate .62s .32s var(--ease-acc),visibility 0s}
.acc-full .ser{font-size:.86rem;font-weight:var(--w-bold);color:var(--c-accent);
  letter-spacing:.03em;margin-bottom:8px;transition:color .45s ease}
.acc-full h3{font-size:clamp(1.5rem,2.6vw,2.5rem);font-weight:var(--w-title);
  letter-spacing:-.035em;line-height:1.2;margin-bottom:12px;transition:color .45s ease}
.acc-full .desc{font-size:.98rem;font-weight:var(--w-body);color:var(--c-body);
  letter-spacing:-.008em;line-height:1.7;max-width:44ch;margin-bottom:22px;
  transition:color .45s ease}
.acc-models{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.acc-models span{padding:9px 20px;border:1px solid var(--c-line);border-radius:999px;
  background:#fff;font-size:.86rem;font-weight:var(--w-mid);color:var(--c-brand);
  letter-spacing:-.005em;transition:var(--t-base)}
.acc-item.is-open .acc-models span:hover{border-color:var(--c-brand);background:var(--c-brand);color:#fff}
.acc-go{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:.94rem;font-weight:var(--w-bold);color:var(--c-brand);letter-spacing:-.012em;
  transition:color .45s ease}
.acc-go svg{width:17px;height:17px;transition:translate var(--t-base)}
.acc-item.is-open:hover .acc-go svg{translate:5px 0}

/* 태블릿 이하 — 세로 아코디언 */
@media (max-width:1100px){
  .acc{flex-direction:column;min-height:0;gap:12px}
  .acc-item{flex:0 0 auto;min-height:88px}
  .acc-item.is-open{min-height:clamp(400px,64vw,520px)}
  .acc-fig{width:40%;right:16%;bottom:-6%;opacity:.20}
  .acc-item.is-open .acc-fig{width:36%;top:auto;bottom:6%;right:5%;opacity:.9}
  .acc-mini{padding:28px 24px;text-align:left}
  .acc-plus{left:auto;right:24px;bottom:auto;top:26px;translate:0}
}
@media (max-width:640px){
  .acc-item.is-open .acc-fig{opacity:.16}
  .acc-full .desc{max-width:none}
}


/* 영상 히어로 보조 — 모션 최소화 설정이면 정지 화면(포스터)만 */
@media (prefers-reduced-motion:reduce){ .hero-media video{display:none} }
@media (prefers-reduced-motion:reduce){
  .hero-media{background:url('../assets/video/hero-poster.jpg') center/cover no-repeat}
}
/* 스크롤 유도 아이콘이 페이드에 묻히지 않게 살짝 올림 */
@media (min-width:801px){ .scroll-cue{bottom:clamp(70px,10vh,120px)} }

/* ============================================================
   인사말 — 대표 사진
   ============================================================ */
.ceo{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,4.5vw,72px);
  align-items:start}

/* 대표 사진 — 비율 고정 카드. 텍스트 길이와 무관하게 늘어나지 않습니다 */
.ceo-photo{position:relative;align-self:start;overflow:hidden;
  aspect-ratio:4/4.7;border-radius:var(--radius);
  display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(168deg,#f2f4fa 0%,#e4e9f6 52%,#d3dbee 100%);
  box-shadow:0 20px 50px rgba(20,28,62,.10)}
/* 인물 뒤 원형 배경 */
.ceo-photo::before{content:"";position:absolute;left:50%;top:8%;translate:-50% 0;
  width:84%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(54,72,156,.16),rgba(54,72,156,.06) 62%,transparent 72%)}
/* 하단으로 자연스럽게 사라지도록 */
.ceo-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(226,231,244,0) 0%,rgba(226,231,244,.55) 58%,rgba(219,225,242,.92) 100%)}
.ceo-photo img{position:relative;z-index:2;display:block;
  width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 16px 34px rgba(20,28,62,.20))}
/* 이름표 — 사진 아래쪽에 얹습니다 */
.ceo-badge{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:baseline;gap:9px;
  padding:16px 20px 18px;
  font-size:.95rem;font-weight:var(--w-title);color:var(--c-brand-dark);letter-spacing:-.02em}
.ceo-badge::before{content:"";width:22px;height:2px;border-radius:2px;
  background:var(--c-accent);translate:0 -5px}

@media (min-width:901px){
  /* 인사말이 길어도 사진이 따라옵니다 */
  .ceo-photo{position:sticky;top:calc(var(--header-stuck) + 92px)}
}
@media (max-width:900px){
  .ceo{grid-template-columns:1fr;gap:26px}
  .ceo-photo{aspect-ratio:4/4.2;max-width:420px;margin-inline:auto;width:100%}
}

/* ============================================================
   파트너사 — 줌인 인터랙션
   ============================================================ */
.pt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pt{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:18px 16px 36px;
  background:#fff;border:1px solid var(--c-line);border-radius:12px;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),
             border-color .4s ease,z-index 0s}
.pt img{max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1) opacity(.55);
  transition:filter .45s ease,scale .55s var(--ease-out)}
.pt:hover{transform:scale(1.14);z-index:5;box-shadow:0 18px 44px rgba(20,28,62,.16);
  border-color:transparent}
.pt:hover img{filter:grayscale(0) opacity(1);scale:1.06}
/* 기관명은 항상 노출합니다 (마우스를 올리면 브랜드 컬러로 강조) */
.pt-name{position:absolute;left:0;right:0;bottom:0;padding:7px 6px;
  background:#f3f5fb;border-top:1px solid var(--c-line);
  color:var(--c-muted);font-size:.73rem;font-weight:var(--w-mid);text-align:center;
  letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .35s ease,color .35s ease,border-color .35s ease}
.pt:hover .pt-name{background:var(--c-brand);border-color:transparent;color:#fff}
.pt-tabs{display:flex;gap:8px;margin-bottom:30px}
.pt-tabs button{padding:11px 24px;border:1px solid var(--c-line);border-radius:999px;background:#fff;
  font-size:.94rem;font-weight:var(--w-mid);color:var(--c-muted);transition:var(--t-base)}
.pt-tabs button.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff;font-weight:var(--w-bold)}
.pt-tabs button:hover{color:var(--c-ink)}
.pt-tabs button.on:hover{color:#fff}
@media (max-width:1100px){.pt-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.pt-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .pt{padding:12px}.pt:hover{transform:scale(1.08)}}

/* 홈 파트너 흐름 띠 */
/* '전체 보기' 버튼은 스크롤 위치와 무관하게 항상 보입니다 */
.pt-more{text-align:center;margin-top:36px;opacity:1!important;translate:none!important}
.pt-strip{overflow:hidden;padding-block:8px;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pt-track{display:flex;gap:46px;width:max-content;animation:ptflow 42s linear infinite}
.pt-strip:hover .pt-track{animation-play-state:paused}
.pt-track img{height:44px;width:auto;filter:grayscale(1) opacity(.45);
  transition:filter .35s ease,scale .35s var(--ease-out)}
.pt-track img:hover{filter:grayscale(0) opacity(1);scale:1.18}
@keyframes ptflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pt-track{animation:none}}

/* R&D 비전 카드 */
.rnd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rnd-card{position:relative;padding:34px 30px 30px;border:1px solid var(--c-line);
  border-radius:var(--radius);background:#fff;overflow:hidden;
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
.rnd-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.rnd-card .n{font-size:.76rem;font-weight:var(--w-bold);color:var(--c-accent);letter-spacing:.14em}
.rnd-card h3{margin:12px 0 12px;font-size:1.24rem;font-weight:var(--w-bold);letter-spacing:-.024em}
.rnd-card p{font-size:.95rem;color:var(--c-muted);line-height:1.72}
.rnd-card::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;
  border-radius:50%;background:var(--c-brand-pale);transition:scale .6s var(--ease-out)}
.rnd-card:hover::after{scale:1.5}
@media (max-width:900px){.rnd-grid{grid-template-columns:1fr}}

/* ============================================================
   연혁 타임라인 — 스크롤 연동 강조
   ============================================================ */
.tl-sec{overflow:clip}
.tl-wrap{display:grid;grid-template-columns:132px 1fr;gap:clamp(24px,4vw,64px);align-items:start}

/* 왼쪽 연도 레일 */
.tl-rail{position:sticky;top:calc(var(--header-stuck) + 96px);display:flex;gap:18px}
.tl-bar{position:relative;width:3px;border-radius:3px;background:var(--c-line);
  height:clamp(200px,32vh,300px);overflow:hidden;flex:none}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:0%;border-radius:3px;
  background:linear-gradient(180deg,var(--c-accent-bright),var(--c-brand));
  transition:height .12s linear}
.tl-jumps{display:flex;flex-direction:column;justify-content:space-between;
  height:clamp(200px,32vh,300px)}
.tl-jump{display:flex;align-items:center;gap:9px;background:0;padding:0;
  font-family:var(--ff);font-size:1rem;font-weight:var(--w-mid);color:#aeb4c8;
  letter-spacing:-.01em;cursor:pointer;transition:color .35s ease,transform .45s var(--ease-out)}
.tl-jump i{width:7px;height:7px;border-radius:50%;background:var(--c-line);flex:none;
  transition:background .35s ease,scale .45s var(--ease-out),box-shadow .35s ease}
.tl-jump:hover{color:var(--c-ink)}
.tl-jump.on{color:var(--c-brand);font-weight:var(--w-title);transform:translateX(4px);
  font-size:1.16rem}
.tl-jump.on i{background:var(--c-brand);scale:1.5;box-shadow:0 0 0 5px rgba(54,72,156,.14)}

/* 연도 블록 */
.tl{position:relative;padding-left:clamp(20px,3vw,42px);
  border-left:2px solid var(--c-line)}
.tl-year{position:relative;padding-block:clamp(30px,4vw,54px) clamp(34px,5vw,66px)}
.tl-year:first-child{padding-top:4px}
.tl-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.tl-y{position:relative;font-size:clamp(2.6rem,6.6vw,4.6rem);font-weight:var(--w-title);
  letter-spacing:-.05em;line-height:1;color:rgba(20,24,29,.10);
  transition:color .7s var(--ease-out),transform .8s var(--ease-out)}
.tl-y span{position:relative;z-index:1}
.tl-year.in .tl-y{color:var(--c-brand);transform:translateX(0)}
.tl-y{transform:translateX(-14px)}
.tl-cap{font-size:1.02rem;font-weight:var(--w-bold);color:var(--c-accent);
  letter-spacing:-.02em;opacity:0;translate:0 12px;
  transition:opacity .6s .18s ease,translate .7s .18s var(--ease-out)}
.tl-year.in .tl-cap{opacity:1;translate:0 0}
.tl-cnt{font-size:.78rem;font-weight:var(--w-bold);color:var(--c-muted);
  background:#eef1f8;border-radius:999px;padding:4px 12px;
  opacity:0;transition:opacity .5s .3s ease}
.tl-year.in .tl-cnt{opacity:1}

/* 연도 헤드의 큰 점 */
.tl-year::before{content:"";position:absolute;left:calc(-1 * clamp(20px,3vw,42px) - 9px);
  top:calc(clamp(30px,4vw,54px) + 14px);width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--c-line);z-index:2;
  transition:border-color .5s ease,scale .6s var(--ease-out),box-shadow .5s ease}
.tl-year:first-child::before{top:18px}
.tl-year.in::before{border-color:var(--c-brand);scale:1.18;
  box-shadow:0 0 0 6px rgba(54,72,156,.12)}

/* 항목 */
.tl-list{display:flex;flex-direction:column;gap:9px}
.tl-list li{position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px 14px 16px;background:#fff;border:1px solid var(--c-line);border-radius:12px;
  opacity:0;translate:-26px 0;transition-property:opacity,translate,box-shadow,border-color,transform;
  transition-duration:.62s,.72s,.4s,.4s,.4s;
  transition-timing-function:ease,var(--ease-out),ease,ease,var(--ease-out);
  transition-delay:var(--td,0ms)}
.tl-year.in .tl-list li{opacity:1;translate:0 0}
.tl-list li:hover{border-color:rgba(54,72,156,.36);transform:translateX(6px);
  box-shadow:0 12px 30px rgba(20,28,62,.09)}
.tl-list li.hi{background:linear-gradient(100deg,#fff,#f6f8ff);border-color:rgba(54,72,156,.22)}
.tl-dot{position:absolute;left:calc(-1 * clamp(20px,3vw,42px) - 21px);top:22px;
  width:9px;height:9px;border-radius:50%;background:var(--c-line);
  transition:background .45s ease,scale .5s var(--ease-out);transition-delay:var(--td,0ms)}
.tl-year.in .tl-list li .tl-dot{background:var(--c-brand-dark);scale:1}
.tl-year.in .tl-list li.hi .tl-dot{background:var(--c-accent-bright);scale:1.5;
  box-shadow:0 0 0 4px rgba(91,120,224,.18)}
.tl-list li.hi .tl-tag::before{content:"\2605 ";color:var(--c-accent-bright)}
.tl-tag{flex:none;font-size:.7rem;font-weight:var(--w-bold);letter-spacing:-.01em;
  padding:4px 9px;border-radius:6px;margin-top:1px;white-space:nowrap}
.k-b .tl-tag{background:rgba(54,72,156,.10);color:var(--c-brand)}
.k-c .tl-tag{background:rgba(54,72,156,.11);color:var(--c-accent)}
.k-s .tl-tag{background:rgba(216,138,32,.14);color:#B57414}
.tl-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-txt b{font-size:1rem;font-weight:var(--w-mid);color:var(--c-ink);letter-spacing:-.018em;
  line-height:1.5}
.tl-list li.hi .tl-txt b{font-weight:var(--w-bold)}
.tl-sub{font-size:.85rem;color:var(--c-muted);letter-spacing:-.012em;line-height:1.55}
@media (prefers-reduced-motion:reduce){
  .tl-list li,.tl-y,.tl-cap,.tl-cnt{opacity:1!important;translate:none!important;transition:none}
}
@media (max-width:900px){
  .tl-wrap{grid-template-columns:1fr}
  .tl-rail{display:none}
  .tl{padding-left:22px}
  .tl-year::before{left:-31px;width:14px;height:14px}
  .tl-dot{left:-38px}
}

/* ============================================================
   조직도
   ============================================================ */
.og{display:flex;flex-direction:column;align-items:center;gap:0}
.og-node{padding:14px 30px;border-radius:12px;font-weight:var(--w-bold);
  letter-spacing:-.022em;text-align:center}
.og-ceo{background:linear-gradient(120deg,var(--c-brand-dark),var(--c-brand));color:#fff;
  font-size:1.14rem;padding:17px 46px;box-shadow:0 14px 34px rgba(31,42,90,.22)}
.og-line-v{width:2px;height:34px;background:var(--c-line);position:relative;overflow:hidden}
.og-line-v span{position:absolute;inset:0;background:var(--c-brand);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-out)}
.og.in .og-line-v span{transform:scaleY(1)}
.og-l1{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;position:relative;
  padding-top:26px}
.og-l1::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:2px;
  background:var(--c-line);transform:scaleX(0);transform-origin:center;
  transition:transform .8s .25s var(--ease-out)}
.og.in .og-l1::before{transform:scaleX(1)}
.og-col{position:relative;display:flex;flex-direction:column;align-items:center;
  opacity:0;translate:0 20px;transition:opacity .6s var(--td,0ms) ease,translate .7s var(--td,0ms) var(--ease-out)}
.og.in .og-col{opacity:1;translate:0 0}
.og-col::before{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;
  background:var(--c-line)}
.og-dept{width:100%;background:#fff;border:1.5px solid var(--c-brand);color:var(--c-brand);
  font-size:1rem;transition:background .4s ease,color .4s ease,transform .45s var(--ease-out),
  box-shadow .45s ease}
.og-dept.og-rnd{border-color:var(--c-accent);color:var(--c-accent);
  background:linear-gradient(120deg,#fff,#EEF1FC)}
.og-col:hover .og-dept{background:var(--c-brand);color:#fff;transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(54,72,156,.24)}
.og-col:hover .og-rnd{background:var(--c-accent);box-shadow:0 14px 32px rgba(54,72,156,.24)}
.og-kids{display:flex;flex-direction:column;gap:8px;margin-top:14px;width:100%}
.og-kid{display:block;padding:11px 12px;border-radius:9px;background:#f4f6fb;
  border:1px solid var(--c-line);text-align:center;font-size:.92rem;
  font-weight:var(--w-mid);color:var(--c-muted);letter-spacing:-.015em;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .4s var(--ease-out)}
.og-col:hover .og-kid{background:#fff;color:var(--c-ink);border-color:rgba(54,72,156,.26);
  transform:translateX(3px)}
.og-support{margin-top:30px;opacity:0;translate:0 16px;
  transition:opacity .6s .55s ease,translate .7s .55s var(--ease-out)}
.og.in .og-support{opacity:1;translate:0 0}
.og-support span{display:inline-block;padding:10px 30px;border-radius:999px;
  background:#eef1f8;color:var(--c-muted);font-size:.92rem;font-weight:var(--w-mid)}
@media (max-width:900px){
  .og-l1{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .og-l1::before{left:25%;right:25%}
}
@media (max-width:520px){
  .og-l1{grid-template-columns:1fr}
  .og-l1::before{display:none}
  .og-col::before{display:none}
  .og-ceo{padding:15px 34px;font-size:1.05rem}
}

/* 직접생산확인 */
.dp-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dp{padding:20px 22px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  opacity:0;translate:0 20px;
  transition:opacity .6s var(--td,0ms) ease,translate .7s var(--td,0ms) var(--ease-out),
             background .4s ease,border-color .4s ease,transform .45s var(--ease-out)}
.dp.in{opacity:1;translate:0 0}
.dp:hover{background:rgba(255,255,255,.12);border-color:rgba(91,120,224,.5);
  transform:translateY(-4px)}
.dp b{display:block;font-size:1.02rem;font-weight:var(--w-bold);color:#fff;
  letter-spacing:-.022em;margin-bottom:7px}
.dp span{display:block;font-size:.87rem;line-height:1.7;color:rgba(255,255,255,.72);
  letter-spacing:-.012em}
@media (max-width:900px){.dp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dp-grid{grid-template-columns:1fr}}

/* 신인도 */
.cred{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cred-i{padding:24px 12px;text-align:center;border:1px solid var(--c-line);border-radius:14px;
  background:#fff;transition:transform .45s var(--ease-out),box-shadow .45s ease,border-color .4s ease}
.cred-i:hover{transform:translateY(-6px);border-color:rgba(54,72,156,.3);
  box-shadow:0 16px 36px rgba(20,28,62,.10)}
.cred-i b{display:block;font-size:1.7rem;font-weight:var(--w-title);color:var(--c-brand);
  letter-spacing:-.04em;margin-bottom:6px;font-variant-numeric:tabular-nums}
.cred-i span{font-size:.85rem;color:var(--c-muted);font-weight:var(--w-mid);letter-spacing:-.015em}
@media (max-width:1000px){.cred{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.cred{grid-template-columns:repeat(2,1fr)}.cred-i b{font-size:1.4rem}}

/* ============================================================
   우측 하단 상담 위젯 — 스크롤을 따라다니는 고정 패널
   ============================================================ */
.cw{position:fixed;right:24px;bottom:24px;z-index:120;
  font-family:var(--ff);display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* 플로팅 버튼 */
.cw-fab{position:relative;width:60px;height:60px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--c-brand-dark),var(--c-brand) 55%,var(--c-accent));
  box-shadow:0 14px 34px rgba(31,42,90,.34),0 2px 6px rgba(31,42,90,.2);
  transition:transform .45s var(--ease-out),box-shadow .4s ease}
.cw-fab:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 20px 44px rgba(31,42,90,.4)}
.cw-fab:active{transform:scale(.96)}
.cw-fab svg{width:27px;height:27px;grid-area:1/1;
  transition:opacity .3s ease,transform .4s var(--ease-out)}
.cw-i-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.cw.on .cw-i-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.cw.on .cw-i-x{opacity:1;transform:none}
.cw-ping{position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;
  background:var(--c-accent-bright);border:2.5px solid #fff}
.cw-ping::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;
  background:var(--c-accent-bright);animation:cwping 2.4s ease-out infinite}
@keyframes cwping{0%{transform:scale(.9);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}
.cw.on .cw-ping,.cw.seen .cw-ping{display:none}

/* 말풍선 힌트 */
.cw-tip{position:absolute;right:74px;bottom:14px;white-space:nowrap;
  background:#fff;color:var(--c-ink);font-size:.88rem;font-weight:var(--w-mid);
  letter-spacing:-.015em;padding:11px 16px;border-radius:12px;
  box-shadow:0 10px 30px rgba(20,28,62,.16);border:1px solid var(--c-line);
  opacity:0;translate:10px 0;pointer-events:none;transition:opacity .5s ease,translate .55s var(--ease-out)}
.cw-tip.on{opacity:1;translate:0 0}
.cw-tip i{position:absolute;right:-6px;bottom:16px;width:11px;height:11px;background:#fff;
  border-right:1px solid var(--c-line);border-top:1px solid var(--c-line);transform:rotate(45deg)}
.cw.on .cw-tip{opacity:0!important}

/* 패널 */
.cw-panel{position:absolute;right:0;bottom:76px;width:372px;
  height:min(618px,calc(100vh - 150px));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:20px;border:1px solid var(--c-line);
  box-shadow:0 28px 70px rgba(20,28,62,.24),0 4px 14px rgba(20,28,62,.1);
  opacity:0;translate:0 18px;scale:.97;transform-origin:100% 100%;
  transition:opacity .34s ease,translate .42s var(--ease-out),scale .42s var(--ease-out)}
.cw-panel[hidden]{display:none}
.cw.on .cw-panel{opacity:1;translate:0 0;scale:1}

.cw-head{display:flex;align-items:center;gap:12px;padding:16px 16px 15px;flex:none;
  background:linear-gradient(120deg,var(--c-brand-dark),var(--c-brand));color:#fff}
.cw-ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14)}
.cw-ava img{width:24px;height:auto}
.cw-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.cw-who b{font-size:1rem;font-weight:var(--w-bold);letter-spacing:-.02em}
.cw-who span{display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.76)}
.cw-who i{width:6px;height:6px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.cw-min{margin-left:auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.12);transition:background .3s ease}
.cw-min:hover{background:rgba(255,255,255,.24)}
.cw-min svg{width:18px;height:18px}

/* 대화 로그 */
.cw-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 6px;
  display:flex;flex-direction:column;gap:10px;background:#f7f9fc;scrollbar-width:thin}
.cw-log::-webkit-scrollbar{width:6px}
.cw-log::-webkit-scrollbar-thumb{background:#d6dbe8;border-radius:6px}
.cw-msg{max-width:84%;padding:12px 15px;border-radius:16px;font-size:.9rem;line-height:1.62;
  letter-spacing:-.015em;word-break:keep-all;
  animation:cwin .42s var(--ease-out) both}
@keyframes cwin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cw-bot{align-self:flex-start;background:#fff;color:var(--c-body);
  border:1px solid var(--c-line);border-bottom-left-radius:5px}
.cw-me{align-self:flex-end;background:var(--c-brand);color:#fff;border-bottom-right-radius:5px;
  font-weight:var(--w-mid)}
.cw-msg b{color:var(--c-ink);font-weight:var(--w-bold)}
.cw-me b{color:#fff}
.cw-msg a.cw-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:.85rem;font-weight:var(--w-bold);color:var(--c-brand);
  border-bottom:1px solid rgba(54,72,156,.3);padding-bottom:1px}
.cw-msg a.cw-link:hover{color:var(--c-accent);border-color:var(--c-accent)}
.cw-msg ul{margin:8px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.cw-msg li{position:relative;padding-left:13px;font-size:.87rem}
.cw-msg li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--c-accent)}

/* 입력 중 표시 */
.cw-typing{align-self:flex-start;display:flex;gap:4px;padding:14px 16px;background:#fff;
  border:1px solid var(--c-line);border-radius:16px;border-bottom-left-radius:5px}
.cw-typing span{width:6px;height:6px;border-radius:50%;background:#b9c0d4;
  animation:cwdot 1.15s infinite}
.cw-typing span:nth-child(2){animation-delay:.16s}
.cw-typing span:nth-child(3){animation-delay:.32s}
@keyframes cwdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* 폼 */
.cw-form{display:flex;flex-direction:column;gap:9px;padding:14px;background:#fff;
  border:1px solid var(--c-line);border-radius:16px;border-bottom-left-radius:5px;
  align-self:stretch;animation:cwin .42s var(--ease-out) both}
.cw-form label{font-size:.78rem;font-weight:var(--w-bold);color:var(--c-muted);
  letter-spacing:-.01em;margin-bottom:-4px}
.cw-form input,.cw-form textarea{font-family:var(--ff);font-size:.9rem;font-weight:var(--w-body);
  padding:10px 12px;border:1px solid var(--c-line);border-radius:9px;background:#fbfcfe;
  color:var(--c-ink);width:100%;transition:border-color .3s ease,box-shadow .3s ease}
.cw-form textarea{min-height:78px;resize:vertical;line-height:1.6}
.cw-form input:focus,.cw-form textarea:focus{outline:0;border-color:var(--c-accent);
  background:#fff;box-shadow:0 0 0 3px rgba(54,72,156,.12)}
.cw-send{margin-top:4px;padding:12px;border-radius:10px;background:var(--c-brand);color:#fff;
  font-size:.92rem;font-weight:var(--w-bold);letter-spacing:-.015em;cursor:pointer;
  transition:background .3s ease,transform .3s var(--ease-out)}
.cw-send:hover{background:var(--c-brand-dark);transform:translateY(-1px)}
.cw-err{font-size:.8rem;color:#C2410C;font-weight:var(--w-mid);margin-top:-2px}

/* 하단 */
.cw-foot{flex:none;background:#f7f9fc;border-top:1px solid var(--c-line);padding:12px 14px 13px}
.cw-chips{display:flex;flex-wrap:wrap;gap:7px}
.cw-chips:empty{display:none}
.cw-chip{padding:9px 14px;border-radius:999px;background:#fff;border:1px solid rgba(54,72,156,.28);
  color:var(--c-brand);font-family:var(--ff);font-size:.84rem;font-weight:var(--w-mid);
  letter-spacing:-.015em;cursor:pointer;white-space:nowrap;
  transition:background .28s ease,color .28s ease,transform .3s var(--ease-out)}
.cw-chip:hover{background:var(--c-brand);color:#fff;transform:translateY(-2px)}
.cw-chip.alt{border-color:var(--c-line);color:var(--c-muted)}
.cw-chip.alt:hover{background:var(--c-muted);color:#fff}
.cw-quick{display:flex;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid var(--c-line)}
.cw-q{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;
  border-radius:9px;background:#fff;border:1px solid var(--c-line);
  font-size:.8rem;font-weight:var(--w-mid);color:var(--c-muted);letter-spacing:-.015em;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.cw-q svg{width:14px;height:14px}
.cw-q:hover{border-color:var(--c-accent);color:var(--c-accent);background:#F2F5FD}

/* to-top 은 위젯 위로 — 상담창이 열리면 잠시 감춥니다 */
.to-top{bottom:96px;right:29px;width:44px;height:44px}
body:has(.cw.on) .to-top{opacity:0;visibility:hidden;translate:0 8px}

@media (max-width:520px){
  .cw{right:14px;bottom:14px;left:14px;align-items:flex-end}
  .cw-panel{right:0;left:0;width:auto;bottom:70px;height:min(560px,calc(100vh - 120px))}
  .cw-fab{width:54px;height:54px}
  .cw-tip{display:none}
  .to-top{bottom:80px;right:17px}
}
@media (prefers-reduced-motion:reduce){
  .cw-ping::after{animation:none}
  .cw-msg,.cw-form{animation:none}
}

/* ============================================================
   제품 실사 이미지
   ============================================================ */
/* 크기는 '높이' 로 잡고 폭은 aspect-ratio 가 정하게 합니다.
   폭(%)으로 잡으면 가로세로비가 다른 제품끼리 높이가 제각각이 되어
   접힌 카드가 뒤죽박죽으로 보입니다. 높이를 고정하면 모든 제품이
   같은 존재감으로 서고, 넓은 제품일수록 오른쪽으로 더 잘려 나갑니다.
   또한 top/bottom 을 섞으면 전환이 보간되지 않고 툭 튀므로 top 만 씁니다. */
.acc-photo{aspect-ratio:var(--ar-a);width:auto;max-width:120%;
  right:-12%;left:auto;top:50%;bottom:auto;height:calc(17% * var(--hk-a));translate:0 -50%;
  opacity:.20;filter:grayscale(.55) contrast(.95);
  transition:opacity .55s ease,right .78s var(--ease-acc),top .78s var(--ease-acc),
             height .78s var(--ease-acc),aspect-ratio .55s var(--ease-acc),
             left .6s var(--ease-acc),translate .55s var(--ease-acc),filter .6s ease}
.acc-photo .ph-a,.acc-photo .ph-b{position:absolute;inset:0;display:block}
.acc-photo picture{position:absolute;inset:0;width:100%;height:100%}
.acc-photo img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.acc-item.is-open .acc-photo{opacity:1;right:5.5%;top:10%;height:calc(28% * var(--hk-a));width:auto;
  translate:0 0;max-width:52%;filter:none}
/* 제품 PNG 는 배경이 투명하므로 box-shadow(사각형) 대신 drop-shadow 로
   실루엣을 따라 그림자를 넣습니다. */
.acc-item.is-open .acc-photo img{border-radius:0;
  filter:drop-shadow(0 16px 30px rgba(20,28,62,.20))}

/* 호버 시 두 번째 이미지(분해도)로 교차 전환 ------------------------------ */
.acc-photo .ph-b{opacity:0;transition:opacity .5s var(--ease-acc)}
.acc-photo .ph-a{transition:opacity .5s var(--ease-acc)}
@media (min-width:801px) and (hover:hover){
  /* .acc-full 이 카드 전체를 덮고 있어 이미지 호버를 가로막습니다.
     열린 카드에서만 통과시키고, 실제로 눌러야 하는 요소만 되살립니다. */
  .acc-item.is-open .acc-full{pointer-events:none}
  .acc-item.is-open .acc-full .acc-models span,
  .acc-item.is-open .acc-full .acc-go{pointer-events:auto}
  .acc-item.is-open .acc-photo{z-index:4}

  /* ── 확대 상태(.is-zoom) — 클래스는 app.js 가 붙입니다 ───────────────
     :hover 로 직접 키우면, 상자가 커지는 순간 커서가 밖으로 빠져
     커졌다 작아졌다 떨립니다. 그래서 '이미지에 진입하면 켜고,
     카드를 벗어나면 끈다' 를 JS 로 처리하고 CSS 는 클래스만 봅니다. */
  /* 글 위치와 상관없이 카드 정가운데에 크게 깔고, 투명도 50% 로 낮춰
     그 위의 흰 글씨가 그대로 읽히게 합니다. */
  /* --ar-b / --hk-b 는 분해도가 있는 제품에만 있습니다. 없는 제품(전기차
     충전소)은 자기 이미지 비율(--ar-a)로 그대로 커집니다. */
  .acc-item.is-open.is-zoom .acc-photo{
    aspect-ratio:var(--ar-b, var(--ar-a));
    height:calc(51% * var(--hk-b, var(--hk-a)));width:auto;max-width:92%;
    left:50%;right:auto;top:50%;bottom:auto;translate:-50% -50%;
    opacity:.5;filter:none}
  .acc-item.is-open.is-zoom .acc-photo img{filter:none;border-radius:12px}
  /* 완성품 → 분해도 교차 전환 (분해도가 있는 제품에만 — 없는 제품에서
     .ph-a 까지 숨기면 이미지가 통째로 사라집니다) */
  .acc-item.is-open.is-zoom .acc-photo.has-alt .ph-b{opacity:1}
  .acc-item.is-open.is-zoom .acc-photo.has-alt .ph-a{opacity:0}

  /* 배경이 짙어지므로 글씨는 전부 흰색 계열로 바꿉니다 */
  .acc-item.is-open.is-zoom .acc-full{z-index:5}
  .acc-item.is-open.is-zoom .acc-full .ser{color:#93A6F2}
  .acc-item.is-open.is-zoom .acc-full h3{color:#fff}
  .acc-item.is-open.is-zoom .acc-full .desc{color:rgba(226,232,250,.84)}
  .acc-item.is-open.is-zoom .acc-models span{
    background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);color:#E8ECFB}
  .acc-item.is-open.is-zoom .acc-models span:hover{
    background:#fff;border-color:#fff;color:var(--c-brand)}
  .acc-item.is-open.is-zoom .acc-go{color:#fff}
}
/* 세로 아코디언(≤1100px)에서의 has-alt 위치.
   기본 규칙과 명시도가 같으므로 반드시 '뒤'에 와야 적용됩니다. */
@media (max-width:1100px){
  /* 세로 아코디언 — 카드가 가로로 넓고 낮아 높이 비율을 키웁니다 */
  .acc-photo{height:calc(52% * var(--hk-a));right:-9%;max-width:46%}
  .acc-item.is-open .acc-photo{height:calc(48% * var(--hk-a));right:5%;top:50%;translate:0 -50%;width:auto;max-width:52%}
}
@media (min-width:801px) and (max-width:1100px) and (hover:hover){
  .acc-item.is-open.is-zoom .acc-photo{
    height:calc(78% * var(--hk-b, var(--hk-a)));width:auto;max-width:82%;
    left:50%;right:auto;top:50%;translate:-50% -50%}
}
@media (max-width:800px){
  .acc-photo{height:calc(46% * var(--hk-a));right:-8%;max-width:56%}
  .acc-item.is-open .acc-photo{height:calc(32% * var(--hk-a));right:5%;top:50%;translate:0 -50%;width:auto;max-width:64%}
}

/* 제품 상세 상단 비주얼 */
.sol-photo{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;
  background:linear-gradient(150deg,#f3f6fd,#e9eefb 55%,#EDF0FB);
  border:1px solid var(--c-line);border-radius:var(--radius)}
.sol-photo picture{display:block;width:100%;height:100%}
.sol-photo img{width:100%;height:100%;display:block;object-fit:contain;padding:clamp(18px,3vw,38px);
  transition:transform .7s var(--ease-out)}
.sol-photo img[data-fit="cover"]{object-fit:cover;padding:0}
.sol-photo:hover img{transform:scale(1.035)}

/* ============================================================
   오시는 길 — 지도 · 교통편
   ============================================================ */
.map-wrap{position:relative;margin-bottom:clamp(34px,4vw,56px);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-line);
  box-shadow:0 18px 46px rgba(20,28,62,.10)}
.map-frame{display:block;width:100%;height:clamp(320px,46vh,480px);border:0;
  filter:saturate(.92)}
.map-card{position:absolute;left:22px;bottom:22px;z-index:2;max-width:330px;
  padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);box-shadow:0 16px 40px rgba(20,28,62,.18)}
.map-eyebrow{display:block;font-size:.72rem;font-weight:var(--w-bold);letter-spacing:.12em;
  color:var(--c-accent);margin-bottom:7px}
.map-card b{display:block;font-size:1.08rem;font-weight:var(--w-title);color:var(--c-ink);
  letter-spacing:-.024em;margin-bottom:6px}
.map-card p{font-size:.88rem;line-height:1.65;color:var(--c-muted);letter-spacing:-.012em}
.map-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.map-links a{padding:7px 13px;border-radius:999px;border:1px solid var(--c-line);
  font-size:.8rem;font-weight:var(--w-mid);color:var(--c-brand);letter-spacing:-.015em;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .35s var(--ease-out)}
.map-links a:hover{background:var(--c-brand);border-color:var(--c-brand);color:#fff;
  transform:translateY(-2px)}
@media (max-width:640px){
  .map-card{position:static;max-width:none;border-radius:0;box-shadow:none;
    backdrop-filter:none;border-top:1px solid var(--c-line)}
  .map-frame{height:280px}
}

.way{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(34px,4vw,52px)}
.way-i{padding:26px 24px;border:1px solid var(--c-line);border-radius:16px;background:#fff;
  transition:transform .45s var(--ease-out),box-shadow .45s ease,border-color .4s ease}
.way-i:hover{transform:translateY(-5px);border-color:rgba(54,72,156,.28);
  box-shadow:0 18px 40px rgba(20,28,62,.10)}
.way-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:16px}
.way-ic svg{width:24px;height:24px}
.way-sub{background:rgba(54,72,156,.10);color:var(--c-brand)}
.way-bus{background:rgba(54,72,156,.11);color:var(--c-accent)}
.way-car{background:rgba(216,138,32,.13);color:#B57414}
.way-i h3{font-size:1.05rem;font-weight:var(--w-bold);color:var(--c-ink);
  letter-spacing:-.024em;margin-bottom:9px}
.way-i p{font-size:.92rem;line-height:1.75;color:var(--c-muted);letter-spacing:-.012em}
.way-i p b{color:var(--c-ink);font-weight:var(--w-bold)}
@media (max-width:820px){.way{grid-template-columns:1fr}}

/* 구축사례 — 카테고리 대표 사진 */
.rec-cat h3{gap:14px}
.rec-thumb{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:transform .5s var(--ease-out),border-color .4s ease,box-shadow .4s ease}
.rec-thumb picture{display:block;width:100%;height:100%}
.rec-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.rec-thumb img[data-fit="contain"]{object-fit:contain;padding:8px;background:#fff}
.rec-cat:hover .rec-thumb{transform:scale(1.1);border-color:rgba(91,120,224,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
.rec-t{flex:1;min-width:0}
@media (max-width:560px){.rec-thumb{width:46px;height:46px}}

/* ============================================================
   WHO WE ARE — 실사 콜라주
   ============================================================ */
.about-viz{position:relative;padding:46px 40px 56px 44px;isolation:isolate}
.av-glow{position:absolute;left:-4%;top:0;width:76%;aspect-ratio:1;z-index:0;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 38%,rgba(54,72,156,.16),rgba(91,120,224,.10) 46%,transparent 70%);
  filter:blur(6px)}

/* 제품 렌더가 배경 투명 PNG 라, 사각 카드의 그림자·모서리가 기기 밖으로 비쳐 보였습니다.
   카드 껍데기를 없애고 기기 자체만 떠 있게 합니다. */
.av-main{position:relative;z-index:2;border-radius:0;overflow:visible;
  box-shadow:none;transition:transform .7s var(--ease-out);
  transform:translate3d(var(--px,0px),var(--py,0px),0)}
.av-main picture{display:block}
.av-main img{width:100%;height:auto;display:block;aspect-ratio:16/10.6;object-fit:cover}
.about-viz:hover .av-main{transform:translate3d(var(--px,0px),calc(var(--py,0px) - 4px),0)}

.av-sub{position:absolute;z-index:4;border-radius:16px;overflow:hidden;
  background:#fff;border:5px solid #fff;box-shadow:0 20px 44px rgba(20,28,62,.24);
  transition:transform .6s var(--ease-out),box-shadow .5s ease;
  transform:translate3d(var(--px,0px),var(--py,0px),0)}
.av-sub picture{display:block}
.av-sub img{width:100%;height:auto;display:block;aspect-ratio:16/11;object-fit:cover}
.av-a{left:0;bottom:8px;width:37%}
.av-b{right:0;top:0;width:31%}
.av-sub:hover{transform:translate3d(var(--px,0px),calc(var(--py,0px) - 6px),0) scale(1.03);
  box-shadow:0 26px 54px rgba(20,28,62,.3);z-index:6}

/* 메인 캡션 — 우하단 알약형 (작은 카드와 겹치지 않도록) */
.av-cap{position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:rgba(11,17,45,.82);backdrop-filter:blur(6px);
  color:#fff;font-size:.79rem;font-weight:var(--w-mid);letter-spacing:-.015em;white-space:nowrap}
.av-cap i{width:7px;height:7px;border-radius:50%;background:var(--c-accent-bright);flex:none;
  box-shadow:0 0 0 3px rgba(91,120,224,.28)}
/* 작은 카드 캡션 — 하단 바 */
.av-cap.sm{left:0;right:0;bottom:0;border-radius:0;padding:20px 12px 9px;
  background:linear-gradient(180deg,transparent,rgba(11,17,45,.88));backdrop-filter:none;
  display:block;text-align:left;font-size:.74rem;font-weight:var(--w-bold)}

.av-chip{position:absolute;left:16%;bottom:-10px;z-index:7;
  padding:11px 20px;border-radius:999px;background:#fff;
  border:1px solid var(--c-line);box-shadow:0 14px 34px rgba(20,28,62,.16);
  font-size:.84rem;font-weight:var(--w-bold);color:var(--c-brand);letter-spacing:-.015em;
  white-space:nowrap}

@media (max-width:900px){
  .about-viz{padding:34px 26px 46px 28px}
  .av-a{width:40%}
  .av-b{width:33%}
  .av-cap{font-size:.72rem;padding:7px 12px;right:10px;bottom:10px}
  .av-cap.sm{font-size:.66rem}
  .av-chip{left:auto;right:8%;font-size:.75rem;padding:9px 15px}
}

/* ============================================================
   PTZ 카메라 — 스크롤 스크럽 몰입 섹션
   ============================================================ */
.ptz,.film{position:relative;background:#05070f}
.ptz-sticky,.film-sticky{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:grid;place-items:center;background:#05070f}
.ptz-vid,.film-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:#05070f;pointer-events:none}
.ptz-vig,.film-vig{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 62% 50%,transparent 22%,rgba(5,7,15,.62) 68%,rgba(5,7,15,.92) 100%),
    linear-gradient(90deg,rgba(5,7,15,.90) 0%,rgba(5,7,15,.55) 34%,transparent 62%)}
/* 위·아래 흰 섹션과 경계를 녹입니다 */
.ptz-sticky::before,.ptz-sticky::after,.film-sticky::before,.film-sticky::after{content:"";position:absolute;left:0;right:0;height:14vh;
  z-index:3;pointer-events:none}
.ptz-sticky::before,.film-sticky::before{top:0;background:linear-gradient(180deg,#141c3e 0%,rgba(20,28,62,.5) 34%,transparent 100%)}
.ptz-sticky::after,.film-sticky::after{bottom:0;background:linear-gradient(0deg,#05070f 0%,rgba(5,7,15,.6) 36%,transparent 100%)}

.ptz-stage,.film-stage{position:relative;z-index:4;width:100%;max-width:var(--w-wrap);
  margin-inline:auto;padding-inline:var(--pad-x);height:100%}
.ptz-cap,.film-cap{position:absolute;top:50%;left:var(--pad-x);translate:0 -50%;max-width:min(30rem,46vw);
  opacity:0;filter:blur(8px);transform:translateY(26px) scale(.98);
  transition:opacity .7s ease,filter .7s ease,transform .9s var(--ease-out);
  pointer-events:none}
.ptz-cap.on,.film-cap.on{opacity:1;filter:blur(0);transform:none;pointer-events:auto}
.ptz-cap .kick,.film-cap .kick{display:block;font-size:.8rem;font-weight:var(--w-bold);letter-spacing:.24em;
  color:var(--c-accent-bright);margin-bottom:18px}
.ptz-cap h2,.film-cap h2{font-size:clamp(2rem,4.4vw,3.9rem);font-weight:880;letter-spacing:-.045em;
  line-height:1.12;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.ptz-cap h2 em,.film-cap h2 em{font-style:normal;
  background:linear-gradient(96deg,#A9C0FF,var(--c-accent-bright) 48%,#A8BCFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 24px rgba(91,120,224,.35))}
.ptz-cap p,.film-cap p{margin-top:20px;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.8;
  color:rgba(226,232,255,.82);letter-spacing:-.012em;word-break:keep-all}
.ptz-chips,.film-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ptz-chips span,.film-chips span{padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:var(--w-mid);
  color:#dbe3ff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px)}
.ptz-cta,.film-cta{margin-top:28px}

.ptz-prog,.film-prog{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:9vh;z-index:5;
  height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.ptz-prog span,.film-prog span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--c-accent-bright),#A8BCFF)}
.ptz-hint,.film-hint{position:absolute;left:var(--pad-x);bottom:calc(9vh + 14px);z-index:5;
  font-size:.72rem;font-weight:var(--w-bold);letter-spacing:.2em;color:rgba(255,255,255,.42);
  transition:opacity .5s ease}


@media (max-width:900px){
  .ptz-cap,.film-cap{max-width:none;right:var(--pad-x);top:auto;bottom:16vh;translate:0 0}
  .ptz-cap.on,.film-cap.on{transform:none}
  .ptz-vid,.film-vid{object-position:60% center}
  .ptz-vig,.film-vig{background:
    linear-gradient(180deg,rgba(5,7,15,.5) 0%,transparent 30%,rgba(5,7,15,.88) 74%,rgba(5,7,15,.96) 100%)}
  .ptz-prog,.film-prog{bottom:7vh}
  .ptz-hint,.film-hint{bottom:calc(7vh + 12px)}
}
/* JS 가 없거나 모션을 줄인 경우 — 그냥 반복 재생 + 문구 나열 */
@media (prefers-reduced-motion:reduce){
  .ptz-sticky,.film-sticky{height:auto;padding-block:12vh}
  .ptz-vid,.film-vid{position:absolute;opacity:.4}
  .ptz-cap,.film-cap{position:relative;top:auto;left:auto;translate:0;opacity:1;filter:none;transform:none;
    margin-bottom:8vh;max-width:none}
  .ptz-prog,.ptz-hint,.film-prog,.film-hint{display:none}
}

/* ============================================================
   어두운 제품 상세 섹션 (PTZ)
   ============================================================ */
.dark-sec{background:#05070f;color:#dfe4f5;position:relative;overflow:clip}
.dark-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 14% 0%,rgba(54,72,156,.30),transparent 62%),
             radial-gradient(70% 60% at 92% 88%,rgba(54,72,156,.22),transparent 66%)}
.dark-sec > *{position:relative;z-index:1}
.dark-sec2{background:linear-gradient(180deg,#05070f 0%,#0b1024 55%,#141c3e 100%)}
.section-head.is-dark h2{color:#fff}
.section-head.is-dark .eyebrow{color:var(--c-accent-bright)}
.section-head.is-dark .eyebrow::before{background:var(--c-accent-bright)}
.section-head.is-dark .lead{color:rgba(214,222,246,.74)}

/* 제품 이미지 */
.dsol{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.dsol-fig{position:relative;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  transition:transform .7s var(--ease-out),border-color .5s ease}
.dsol-fig:hover{transform:translateY(-6px);border-color:rgba(91,120,224,.42)}
.dsol-glow{position:absolute;left:50%;top:44%;translate:-50% -50%;width:78%;aspect-ratio:1;
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(91,120,224,.28),transparent 66%);filter:blur(10px)}
.dsol-fig picture{position:relative;z-index:1;display:block}
.dsol-fig img{width:100%;height:auto;display:block;padding:clamp(20px,3vw,44px);
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
  transition:transform .8s var(--ease-out)}
.dsol-fig:hover img{transform:scale(1.04)}

.dsol-lead{font-size:var(--fs-lead);line-height:1.85;color:#e8ecfb;letter-spacing:-.014em;
  font-weight:var(--w-read);word-break:keep-all;
  opacity:0;translate:0 18px;transition:opacity .7s ease,translate .8s var(--ease-out)}
.dsol-lead.in{opacity:1;translate:0 0}

/* 스펙 카드 */
.dspec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.dspec{position:relative;padding:24px 22px 22px;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  opacity:0;translate:0 24px;
  transition:opacity .6s var(--td,0ms) ease,translate .75s var(--td,0ms) var(--ease-out),
             background .4s ease,border-color .4s ease,transform .5s var(--ease-out)}
.dspec.in{opacity:1;translate:0 0}
.dspec::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--c-accent-bright),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.dspec:hover{background:rgba(255,255,255,.10);border-color:rgba(91,120,224,.45);
  transform:translateY(-5px)}
.dspec:hover::after{transform:scaleX(1)}
.dspec .n{display:block;font-size:.72rem;font-weight:var(--w-title);letter-spacing:.14em;
  color:rgba(91,120,224,.85);margin-bottom:10px}
.dspec h3{font-size:1.05rem;font-weight:var(--w-bold);color:#fff;letter-spacing:-.024em;
  margin-bottom:9px}
.dspec p{font-size:.9rem;line-height:1.72;color:rgba(211,219,244,.74);letter-spacing:-.012em;
  word-break:keep-all}
.dsol-note{margin-top:24px;font-size:.88rem;line-height:1.75;color:rgba(190,199,228,.66);
  padding-left:16px;border-left:2px solid rgba(91,120,224,.5);
  opacity:0;translate:0 14px;transition:opacity .6s .2s ease,translate .7s .2s var(--ease-out)}
.dsol-note.in{opacity:1;translate:0 0}

/* 모델 라인업 */
.dmodels{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dmodel{position:relative;padding:32px 26px;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  opacity:0;translate:0 26px;
  transition:opacity .6s var(--td,0ms) ease,translate .8s var(--td,0ms) var(--ease-out),
             background .4s ease,border-color .4s ease,transform .5s var(--ease-out),
             box-shadow .5s ease}
.dmodel.in{opacity:1;translate:0 0}
.dmodel:hover{background:rgba(255,255,255,.10);border-color:rgba(91,120,224,.5);
  transform:translateY(-7px);box-shadow:0 22px 48px rgba(0,0,0,.4)}
.dmodel b{display:block;font-size:1.22rem;font-weight:var(--w-title);color:#fff;
  letter-spacing:-.03em;margin-bottom:8px}
.dmodel span{font-size:.9rem;color:rgba(211,219,244,.72);letter-spacing:-.012em}
.dmodel::before{content:"";position:absolute;right:-30%;top:-60%;width:70%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(91,120,224,.22),transparent 68%);
  opacity:0;transition:opacity .5s ease}
.dmodel:hover::before{opacity:1}

/* 인증 배지 */
.dcerts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}
.dcert{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  opacity:0;translate:0 22px;
  transition:opacity .6s var(--td,0ms) ease,translate .75s var(--td,0ms) var(--ease-out),
             border-color .4s ease,transform .5s var(--ease-out)}
.dcert.in{opacity:1;translate:0 0}
.dcert:hover{border-color:rgba(91,120,224,.45);transform:translateY(-4px)}
.dcert em{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
  font-style:normal;font-size:.92rem;font-weight:var(--w-title);letter-spacing:.02em;color:#05070f;
  background:linear-gradient(140deg,var(--c-accent-bright),#93A8EE)}
.dcert span{font-size:.9rem;line-height:1.6;color:rgba(211,219,244,.78);letter-spacing:-.012em}

@media (max-width:900px){
  .dsol{grid-template-columns:1fr}
  .dspec-grid{grid-template-columns:1fr}
  .dmodels,.dcerts{grid-template-columns:1fr}
}

/* 실물 인증서 갤러리 (다크) */
.dcert-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.cert.dcert-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;overflow:hidden;
  opacity:0;translate:0 26px;
  transition:opacity .6s var(--td,0ms) ease,translate .8s var(--td,0ms) var(--ease-out),
             transform .5s var(--ease-out),box-shadow .5s ease,border-color .4s ease}
.cert.dcert-card.in{opacity:1;translate:0 0}
.cert.dcert-card:hover{transform:translateY(-8px);border-color:rgba(91,120,224,.5);
  box-shadow:0 26px 56px rgba(0,0,0,.5)}
.dcert-card .cert-img{background:#fff;aspect-ratio:1/1.34;padding:0}
.dcert-card .cert-img img{padding:10px}
.dcert-card .cert-img::after{content:"확대";right:9px;bottom:9px;
  background:rgba(5,7,15,.86);border:1px solid rgba(91,120,224,.4)}
:lang(en) .dcert-card .cert-img::after{content:"Zoom"}
.dcert-card figcaption{padding:16px 16px 18px;border-top:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02)}
.dtag{display:inline-block;margin-bottom:8px;padding:4px 11px;border-radius:999px;
  font-size:.68rem;font-weight:var(--w-title);letter-spacing:.06em;color:#05070f;
  background:linear-gradient(140deg,var(--c-accent-bright),#93A8EE)}
.dcert-card h3{font-size:.94rem;font-weight:var(--w-bold);color:#fff;letter-spacing:-.02em;
  line-height:1.45;margin-bottom:4px}
.dcert-card .model{font-size:.8rem;font-weight:var(--w-mid);color:rgba(91,120,224,.9);
  letter-spacing:.01em}
@media (max-width:1000px){.dcert-gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.dcert-gal{grid-template-columns:1fr;gap:12px}}

/* ============================================================
   상황판(대시보드) — 키워드 → 상황판 확대 → 패널별 강조
   ============================================================ */
.dz{position:relative;height:620vh;background:#05070f}
.dz-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#05070f;
  display:grid;place-items:center}
.dz-sticky::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 20% 6%,rgba(54,72,156,.30),transparent 62%),
             radial-gradient(70% 60% at 88% 94%,rgba(54,72,156,.22),transparent 66%)}
.dz-sticky::after{content:"";position:absolute;top:0;left:0;right:0;height:12vh;z-index:6;
  pointer-events:none;background:linear-gradient(180deg,#141c3e,rgba(20,28,62,.4) 40%,transparent)}

/* 1) 거대 키워드 */
.dz-kw{position:absolute;z-index:5;width:100%;max-width:var(--w-wrap);
  margin-inline:auto;padding-inline:var(--pad-x);text-align:center;
  will-change:transform,opacity}
.dz-kick{display:block;font-size:.78rem;font-weight:var(--w-title);letter-spacing:.28em;
  color:var(--c-accent-bright);margin-bottom:24px}
.dz-kw h2{font-size:clamp(2rem,6.2vw,5.4rem);font-weight:900;letter-spacing:-.05em;
  line-height:1.02;color:#fff;text-shadow:0 4px 60px rgba(0,0,0,.55)}
.dz-kw h2 span{display:block}
.dz-kw h2 .l1{font-weight:420;color:rgba(255,255,255,.72);
  font-size:.52em;letter-spacing:-.03em;margin-bottom:.16em}
.dz-kw h2 em{font-style:normal;
  background:linear-gradient(96deg,#A9C0FF,var(--c-accent-bright) 46%,#A8BCFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 34px rgba(91,120,224,.4))}
.dz-kw p{margin:28px auto 0;max-width:48ch;font-size:var(--fs-lead);line-height:1.8;
  color:rgba(214,222,246,.7);letter-spacing:-.014em;word-break:keep-all}

/* 2) 상황판 */
.dz-stage{position:absolute;inset:0;z-index:3;display:grid;place-items:center;overflow:hidden;
  padding-bottom:clamp(150px,23vh,240px);padding-top:clamp(40px,7vh,80px)}
.dz-wall{position:relative;overflow:hidden;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:#04060d;
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 7px rgba(255,255,255,.025);
  transition:border-color .5s ease,box-shadow .5s ease;
  will-change:width,height,opacity}
.dz-wall picture{display:contents}
.dz-wall img{position:absolute;top:50%;translate:0 -50%;height:auto;display:block;
  max-width:none;will-change:width,left}
.dz-wall.zoomed{border-color:rgba(91,120,224,.55);
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 7px rgba(91,120,224,.10),
             0 0 60px rgba(91,120,224,.18)}
.dz-focus{display:none}

/* 3) 패널 설명 */
.dz-caps{position:absolute;left:0;right:0;bottom:clamp(52px,9vh,110px);z-index:5;
  width:100%;max-width:var(--w-wrap);margin-inline:auto;padding-inline:var(--pad-x);
  min-height:clamp(120px,17vh,180px);pointer-events:none}
.dz-cap{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:0;
  opacity:0;translate:0 22px;filter:blur(7px);
  transition:opacity .5s ease,translate .68s var(--ease-out),filter .5s ease}
.dz-cap.on{opacity:1;translate:0 0;filter:blur(0)}
.dz-n{display:inline-block;font-size:.74rem;font-weight:var(--w-title);letter-spacing:.2em;
  color:var(--c-accent-bright);margin-bottom:12px;
  padding:5px 12px;border-radius:999px;border:1px solid rgba(91,120,224,.4);
  background:rgba(91,120,224,.10)}
.dz-cap h3{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:880;color:#fff;
  letter-spacing:-.04em;line-height:1.16}
.dz-cap p{margin-top:12px;max-width:56ch;font-size:clamp(.92rem,1.15vw,1.06rem);line-height:1.75;
  color:rgba(214,222,246,.8);letter-spacing:-.014em;word-break:keep-all}
.dz-cap.dz-full h3{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:var(--w-title);
  color:rgba(255,255,255,.9);text-align:center}
.dz-full{text-align:center}

.dz-prog{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:clamp(22px,4vh,44px);
  z-index:6;height:2px;border-radius:2px;background:rgba(255,255,255,.13)}
.dz-prog span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--c-accent-bright),#A8BCFF)}

@media (max-width:900px){
  .dz{height:520vh}
  .dz-wall{width:96vw}
  .dz-caps{bottom:clamp(46px,8vh,90px);min-height:clamp(140px,22vh,190px)}
  .dz-cap p{font-size:.9rem}
  .dz-kw p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dz{height:auto}
  .dz-sticky{position:relative;height:auto;padding-block:12vh;display:block}
  .dz-kw{position:relative;margin-bottom:8vh}
  .dz-stage{position:relative;inset:auto;margin-bottom:6vh}
  .dz-caps{position:relative;bottom:auto;min-height:0}
  .dz-cap{position:relative;left:auto;right:auto;opacity:1;translate:0;filter:none;
    margin-bottom:4vh;padding-inline:0}
  .dz-focus,.dz-prog{display:none}
}

/* ---- 스크롤 시나리오 쇼케이스 ---- */
.ds{position:relative;height:560vh;background:#05070f}
.ds-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#05070f;
  display:grid;place-items:center}
.ds-sticky::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 20% 8%,rgba(54,72,156,.28),transparent 62%),
             radial-gradient(70% 60% at 88% 92%,rgba(54,72,156,.22),transparent 66%)}
.ds-inner{position:relative;z-index:1;width:100%;max-width:var(--w-wrap);
  margin-inline:auto;padding-inline:var(--pad-x);
  display:flex;flex-direction:column;gap:clamp(16px,2.4vh,30px)}
.ds-head .eyebrow{color:var(--c-accent-bright)}
.ds-head .eyebrow::before{background:var(--c-accent-bright)}
.ds-head h2{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:var(--w-title);color:#fff;
  letter-spacing:-.035em;margin-top:8px}
.ds-head p{margin-top:8px;font-size:.94rem;color:rgba(202,212,242,.62);letter-spacing:-.012em}

.ds-stage{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(20px,3vw,46px);
  align-items:center}
/* 초광각 화면 프레임 — 안에서 이미지가 가로로 흐릅니다 */
.ds-frame{position:relative;border-radius:14px;overflow:hidden;background:#04060d;
  border:1px solid rgba(255,255,255,.15);aspect-ratio:16/7.4;
  box-shadow:0 34px 74px rgba(0,0,0,.6),0 0 0 7px rgba(255,255,255,.03)}
.ds-shot{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.ds-shot.on{opacity:1}
.ds-shot picture{display:block;height:100%}
.ds-shot img{height:100%;width:auto;max-width:none;display:block;
  will-change:transform}
/* 스캔라인 한 줄 */
.ds-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(91,120,224,.7),transparent);
  animation:dsscan 5.5s linear infinite;opacity:.75}
@keyframes dsscan{0%{transform:translateY(0)}100%{transform:translateY(46vh)}}

.ds-caps{position:relative;min-height:clamp(240px,34vh,340px)}
.ds-cap{position:absolute;inset:0;opacity:0;translate:0 22px;filter:blur(6px);
  transition:opacity .55s ease,translate .7s var(--ease-out),filter .55s ease;pointer-events:none}
.ds-cap.on{opacity:1;translate:0 0;filter:blur(0);pointer-events:auto}
.ds-no{font-size:.76rem;font-weight:var(--w-title);letter-spacing:.2em;color:rgba(91,120,224,.9)}
.ds-en{display:block;margin-top:6px;font-size:.68rem;font-weight:var(--w-bold);
  letter-spacing:.22em;color:rgba(168,188,255,.5)}
.ds-cap h3{margin-top:12px;font-size:clamp(1.6rem,2.9vw,2.5rem);font-weight:880;color:#fff;
  letter-spacing:-.04em;line-height:1.16}
.ds-cap p{margin-top:14px;font-size:1rem;line-height:1.78;color:rgba(214,222,246,.78);
  letter-spacing:-.014em;word-break:keep-all}
.ds-cap ul{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:9px}
.ds-cap li{position:relative;padding-left:18px;font-size:.9rem;line-height:1.6;
  color:rgba(196,206,238,.72);letter-spacing:-.012em;word-break:keep-all}
.ds-cap li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--c-accent-bright);box-shadow:0 0 0 3px rgba(91,120,224,.18)}

.ds-rail{display:flex;flex-wrap:wrap;gap:8px}
.ds-dot{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  font-family:var(--ff);font-size:.84rem;font-weight:var(--w-mid);color:rgba(202,212,242,.62);
  letter-spacing:-.015em;cursor:pointer;white-space:nowrap;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .4s var(--ease-out)}
.ds-dot i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);flex:none;
  transition:background .35s ease,scale .4s var(--ease-out),box-shadow .35s ease}
.ds-dot:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.ds-dot.on{background:rgba(91,120,224,.14);border-color:rgba(91,120,224,.5);color:#fff;
  transform:translateY(-2px)}
.ds-dot.on i{background:var(--c-accent-bright);scale:1.35;box-shadow:0 0 0 4px rgba(91,120,224,.2)}
.ds-prog{height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.ds-prog span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--c-accent-bright),#A8BCFF)}

@media (max-width:960px){
  .ds{height:480vh}
  .ds-stage{grid-template-columns:1fr;gap:18px}
  .ds-frame{aspect-ratio:16/8.6}
  .ds-caps{min-height:clamp(210px,30vh,280px)}
  .ds-cap h3{font-size:1.5rem}
  .ds-cap li:nth-child(n+4){display:none}
  .ds-head p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ds{height:auto}
  .ds-sticky{position:relative;height:auto;padding-block:10vh}
  .ds-shot{position:relative;opacity:1;margin-bottom:14px}
  .ds-cap{position:relative;opacity:1;translate:0;filter:none;margin-bottom:26px}
  .ds-caps{min-height:0}
  .ds-scan,.ds-prog{display:none}
}

/* 공통 레이아웃 카드 */
.dlay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dlay{position:relative;padding:30px 26px 28px;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  opacity:0;translate:0 26px;
  transition:opacity .6s var(--td,0ms) ease,translate .8s var(--td,0ms) var(--ease-out),
             background .4s ease,border-color .4s ease,transform .5s var(--ease-out)}
.dlay.in{opacity:1;translate:0 0}
.dlay:hover{background:rgba(255,255,255,.09);border-color:rgba(91,120,224,.45);
  transform:translateY(-6px)}
.dlay .n{display:block;font-size:.72rem;font-weight:var(--w-title);letter-spacing:.16em;
  color:rgba(91,120,224,.85);margin-bottom:14px}
.dlay h3{font-size:1.12rem;font-weight:var(--w-bold);color:#fff;letter-spacing:-.026em;
  margin-bottom:10px}
.dlay p{font-size:.92rem;line-height:1.75;color:rgba(211,219,244,.74);letter-spacing:-.012em;
  word-break:keep-all}

/* 장애관리 */
.dfault{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.dfault-txt .eyebrow{color:var(--c-accent-bright);opacity:0;translate:0 12px;
  transition:opacity .6s ease,translate .7s var(--ease-out);display:block}
.dfault-txt .eyebrow.in{opacity:1;translate:0 0}
.dfault-txt h2{margin-top:10px;font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:880;color:#fff;
  letter-spacing:-.04em;line-height:1.16;
  opacity:0;translate:0 22px;transition:opacity .7s var(--d,0ms) ease,translate .85s var(--d,0ms) var(--ease-out)}
.dfault-txt h2.in{opacity:1;translate:0 0}
.dfault-txt > p{margin-top:18px;font-size:1rem;line-height:1.85;color:rgba(214,222,246,.76);
  letter-spacing:-.014em;word-break:keep-all;
  opacity:0;translate:0 18px;transition:opacity .7s var(--d,0ms) ease,translate .8s var(--d,0ms) var(--ease-out)}
.dfault-txt > p.in{opacity:1;translate:0 0}
.dfault-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.dfi{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);font-size:.86rem;font-weight:var(--w-mid);
  color:rgba(214,222,246,.86);letter-spacing:-.015em;
  opacity:0;translate:0 14px;
  transition:opacity .5s var(--td,0ms) ease,translate .6s var(--td,0ms) var(--ease-out),
             border-color .35s ease,background .35s ease}
.dfi.in{opacity:1;translate:0 0}
.dfi:hover{background:rgba(91,120,224,.14);border-color:rgba(91,120,224,.5)}

/* 장애 레이더 비주얼 */
.dfault-viz{position:relative;aspect-ratio:1;max-width:440px;margin-inline:auto;width:100%;
  opacity:0;transition:opacity .9s var(--d,0ms) ease}
.dfault-viz.in{opacity:1}
.dfv-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(91,120,224,.24)}
.dfv-ring.r1{width:34%;height:34%}
.dfv-ring.r2{width:64%;height:64%;border-color:rgba(91,120,224,.16)}
.dfv-ring.r3{width:94%;height:94%;border-color:rgba(91,120,224,.10)}
.dfv-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:16px;height:16px;
  border-radius:50%;background:var(--c-accent-bright);
  box-shadow:0 0 0 8px rgba(91,120,224,.16),0 0 30px rgba(91,120,224,.7)}
.dfv-core::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:rgba(91,120,224,.5);animation:dfvping 2.6s ease-out infinite}
@keyframes dfvping{0%{transform:scale(.8);opacity:.7}70%,100%{transform:scale(3.6);opacity:0}}
.dfv-pin{position:absolute;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(91,120,224,.2),0 0 18px rgba(91,120,224,.55);
  animation:dfvblink 3.2s ease-in-out infinite}
.dfv-pin.p1{left:24%;top:30%;animation-delay:0s}
.dfv-pin.p2{left:70%;top:22%;animation-delay:.5s;background:#FFD166;box-shadow:0 0 0 4px rgba(255,209,102,.18),0 0 18px rgba(255,209,102,.5)}
.dfv-pin.p3{left:80%;top:62%;animation-delay:1s}
.dfv-pin.p4{left:33%;top:74%;animation-delay:1.5s;background:#FF6B6B;box-shadow:0 0 0 4px rgba(255,107,107,.18),0 0 18px rgba(255,107,107,.5)}
.dfv-pin.p5{left:58%;top:48%;animation-delay:2s}
@keyframes dfvblink{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

@media (max-width:960px){
  .dlay-grid{grid-template-columns:1fr}
  .dfault{grid-template-columns:1fr}
  .dfault-viz{max-width:320px;order:-1}
}
@media (prefers-reduced-motion:reduce){
  .dfv-core::after,.dfv-pin,.ds-scan{animation:none}
}

/* ============================================================
   초정밀 GNSS — 스크롤 영상 도입부
   ============================================================ */
.gn{position:relative;background:#05070f}
.gn-sticky{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#05070f;
  display:grid;place-items:center}
.gn-cv{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  background:#05070f;pointer-events:none}
.gn-vig{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,7,15,.90) 0%,rgba(5,7,15,.60) 34%,rgba(5,7,15,.10) 62%,transparent 78%),
    linear-gradient(180deg,rgba(5,7,15,.55) 0%,transparent 26%,transparent 62%,rgba(5,7,15,.72) 100%)}
.gn-sticky::before,.gn-sticky::after{content:"";position:absolute;left:0;right:0;height:14vh;
  z-index:3;pointer-events:none}
.gn-sticky::before{top:0;background:linear-gradient(180deg,#141c3e 0%,rgba(20,28,62,.5) 34%,transparent 100%)}
.gn-sticky::after{bottom:0;background:linear-gradient(0deg,#05070f 0%,rgba(5,7,15,.6) 36%,transparent 100%)}

.gn-stage{position:relative;z-index:4;width:100%;max-width:var(--w-wrap);
  margin-inline:auto;padding-inline:var(--pad-x)}
.gn-kick{display:block;font-size:.76rem;font-weight:var(--w-title);letter-spacing:.26em;
  color:var(--c-accent-bright);margin-bottom:26px}
.gn-caps{position:relative;min-height:clamp(230px,32vh,320px);max-width:min(32rem,50vw)}
.gn-cap{position:absolute;inset:0;opacity:0;translate:0 26px;filter:blur(8px);
  transition:opacity .65s ease,translate .85s var(--ease-out),filter .65s ease;pointer-events:none}
.gn-cap.on{opacity:1;translate:0 0;filter:blur(0);pointer-events:auto}
.gn-cap h2{font-size:clamp(1.9rem,4.2vw,3.6rem);font-weight:880;color:#fff;
  letter-spacing:-.045em;line-height:1.14;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.gn-cap h2 em{font-style:normal;
  background:linear-gradient(96deg,#A9C0FF,var(--c-accent-bright) 46%,#A8BCFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 24px rgba(91,120,224,.34))}
.gn-cap p{margin-top:20px;font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.8;
  color:rgba(222,229,250,.8);letter-spacing:-.014em;word-break:keep-all}
.gn-prog{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:9vh;z-index:5;
  height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.gn-prog span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--c-accent-bright),#A8BCFF)}
.gn-hint{position:absolute;left:var(--pad-x);bottom:calc(9vh + 14px);z-index:5;
  font-size:.72rem;font-weight:var(--w-bold);letter-spacing:.2em;color:rgba(255,255,255,.42);
  transition:opacity .5s ease}

@media (max-width:900px){
  .gn-caps{max-width:none;min-height:clamp(210px,30vh,280px)}
  .gn-stage{padding-bottom:12vh}
  .gn-vig{background:linear-gradient(180deg,rgba(5,7,15,.45) 0%,transparent 26%,rgba(5,7,15,.9) 68%,rgba(5,7,15,.96) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .gn-sticky{height:auto;padding-block:12vh}
  .gn-cv{position:absolute;opacity:.4}
  .gn-cap{position:relative;opacity:1;translate:0;filter:none;margin-bottom:7vh}
  .gn-caps{min-height:0}
  .gn-prog,.gn-hint{display:none}
}

/* ---- 전국 측위망 지도 ---- */
.gn-mapsec{padding-block:clamp(72px,9vw,130px)}
.gn-map{position:relative;margin-top:clamp(28px,4vw,48px);border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#080d1c;
  box-shadow:0 34px 78px rgba(0,0,0,.5)}
.gn-map picture{display:block}
.gn-map img{width:100%;height:auto;display:block}
/* 훑고 지나가는 빛 */
.gn-sweep{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 38%,rgba(91,120,224,.10) 48%,
             rgba(168,188,255,.14) 52%,transparent 62%);
  background-size:260% 100%;animation:gnsweep 7s linear infinite}
@keyframes gnsweep{0%{background-position:120% 0}100%{background-position:-60% 0}}

.gn-dots{position:absolute;inset:0;z-index:3;pointer-events:none}
.gd{position:absolute;translate:-50% -50%;border-radius:50%;background:#8FF6FF;
  animation:gdblink 3.2s ease-in-out infinite;animation-delay:var(--dl,0s)}
.gd::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(143,246,255,.85);
  animation:gdring 3.2s ease-out infinite;animation-delay:var(--dl,0s)}
.gd-l{width:9px;height:9px;box-shadow:0 0 12px 3px rgba(22,192,206,.75)}
.gd-m{width:6px;height:6px;box-shadow:0 0 9px 2px rgba(22,192,206,.6)}
.gd-s{width:4px;height:4px;box-shadow:0 0 7px 1px rgba(22,192,206,.5)}
@keyframes gdblink{0%,100%{opacity:.35;transform:scale(.85)}
  46%{opacity:1;transform:scale(1.25)}70%{opacity:.6;transform:scale(1)}}
@keyframes gdring{0%{transform:scale(1);opacity:.55}
  55%{transform:scale(4.2);opacity:0}100%{transform:scale(4.2);opacity:0}}
.gd-s::after{animation-duration:3.6s}
.gd-m::after{animation-duration:3.4s}

.gn-legend{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:clamp(26px,3.4vw,42px)}
.gn-legend li{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  opacity:0;translate:0 20px;
  transition:opacity .6s var(--td,0ms) ease,translate .75s var(--td,0ms) var(--ease-out),
             border-color .4s ease,transform .5s var(--ease-out)}
.gn-legend li.in{opacity:1;translate:0 0}
.gn-legend li:hover{border-color:rgba(22,192,206,.45);transform:translateY(-4px)}
.gn-legend i{flex:none;width:13px;height:13px;border-radius:50%;margin-top:5px;
  background:#8FF6FF;box-shadow:0 0 12px 3px rgba(22,192,206,.7)}
.gn-legend .gl2 i{width:9px;height:9px;margin-top:7px;box-shadow:0 0 8px 2px rgba(22,192,206,.5)}
.gn-legend .gl3 i{width:22px;height:2px;border-radius:2px;margin-top:11px;
  background:linear-gradient(90deg,rgba(143,246,255,.9),rgba(168,188,255,.3));box-shadow:none}
.gn-legend b{display:block;font-size:.98rem;font-weight:var(--w-bold);color:#fff;
  letter-spacing:-.022em;margin-bottom:6px}
.gn-legend span{font-size:.88rem;line-height:1.68;color:rgba(211,219,244,.72);
  letter-spacing:-.012em;word-break:keep-all}
@media (max-width:900px){.gn-legend{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gd,.gd::after,.gn-sweep{animation:none}.gd{opacity:1}}

/* 다크 제품 상단 비주얼 */
.sol-media.sol-dark{background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12)}
.sol-media.sol-dark img{filter:drop-shadow(0 18px 36px rgba(0,0,0,.5))}

/* GNSS 마지막 장면 위에 얹히는 살아있는 점 */
.gn-live{position:absolute;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .4s ease}
.gn-live .gd{animation-play-state:paused}
.gn-live.on .gd{animation-play-state:running}
.gn-mapsec{padding-block:clamp(64px,8vw,110px)}
.gn-cap p b{color:#fff;font-weight:var(--w-bold)}

/* 자동 재생 필름 — 다시 보기 버튼 */
.pv-replay{position:absolute;right:var(--pad-x);bottom:calc(9vh + 10px);z-index:6;
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  font-family:var(--ff);font-size:.82rem;font-weight:var(--w-mid);color:rgba(255,255,255,.85);
  letter-spacing:-.015em;cursor:pointer;
  opacity:0;visibility:hidden;translate:0 10px;
  transition:opacity .45s ease,visibility .45s,translate .5s var(--ease-out),
             background .3s ease,border-color .3s ease}
.pv-replay svg{width:15px;height:15px}
.pv-replay:hover{background:rgba(91,120,224,.18);border-color:rgba(91,120,224,.55);color:#fff}
.is-done .pv-replay{opacity:1;visibility:visible;translate:0 0}
@media (max-width:900px){.pv-replay{bottom:calc(7vh + 8px);font-size:.76rem;padding:9px 15px}}

/* ============================================================
   메인 인덱스 인터랙션 강화
   ============================================================ */

/* 상단 스크롤 진행 바 */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--c-accent),#5B78E0 60%,#93A8EE);
  box-shadow:0 0 14px rgba(34,224,238,.55)}

/* 히어로 — 스크롤에 따라 위로 밀려나며 사라짐 */
.hero-inner{will-change:transform,opacity}
.hero-media{will-change:transform}

/* 섹션 제목 — 줄 단위 마스크 등장 (JS 가 .splt 를 붙일 때만 동작) */
.section-head h2.splt .ln{display:block;overflow:hidden;
  padding-bottom:.09em;margin-bottom:-.09em}
.section-head h2.splt .ln>i{display:block;font-style:normal;translate:0 108%;
  transition:translate .95s var(--ease-out)}
.section-head.in h2.splt .ln>i{translate:0 0}
.section-head h2.splt .ln:nth-child(2)>i{transition-delay:.09s}
.section-head h2.splt .ln:nth-child(3)>i{transition-delay:.18s}

/* 카드 — 포인터 따라 기울고, 커서 위치에 빛이 번짐 */
.feat-grid .card.tilt{transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .55s var(--ease-out),box-shadow .45s ease,border-color .45s ease}
.feat-grid .card.tilt.act{transition:transform .1s linear,box-shadow .45s ease,border-color .45s ease}
.feat-grid .card.tilt:hover{--ty:-8px}
.card .cglow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s ease;z-index:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(91,120,224,.20),transparent 68%)}
.card.act .cglow{opacity:1}
.card>*{position:relative;z-index:1}

/* 버튼 — 커서에 살짝 끌리고, 호버 시 빛이 스침 */
.btn.mag{will-change:transform}
.btn.mag>*{pointer-events:none}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent)}
.btn-primary:hover::after{animation:sheen .8s var(--ease-out)}
@keyframes sheen{from{left:-70%}to{left:130%}}

/* 파트너 띠 — 스크롤하면 잠깐 빨라짐 */
.pt-track{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .sprog{display:none}
  .section-head h2.splt .ln>i{translate:0 0;transition:none}
  .feat-grid .card.tilt{transform:none}
  .btn-primary:hover::after{animation:none}
}

/* WHO WE ARE 이미지 — 포인터 따라 미세하게 떠다님 */
.about-viz.pp .av-main,.about-viz.pp .av-sub{transition:transform .25s var(--ease-out),box-shadow .5s ease}

/* WHO WE ARE — 합성 이미지 한 장 버전 */
.about-viz.is-one{position:relative;display:block;padding:0}
.av-one{position:relative;z-index:2;will-change:transform;
  --s:1.1;                                   /* 이미지만 10% 키웁니다 (레이아웃은 그대로) */
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(var(--s));
  transition:transform .5s var(--ease-out)}
.av-one picture{display:block}
.av-one img{width:100%;height:auto;display:block;object-fit:contain}
.about-viz.is-one:hover .av-one{transform:translate3d(var(--px,0px),calc(var(--py,0px) - 5px),0) scale(var(--s))}
@media (max-width:900px){ .av-one{--s:1} }   /* 좁은 화면에서는 확대하지 않습니다 */
@media (prefers-reduced-motion:reduce){.av-one{transform:none!important;transition:none}}

/* WHO WE ARE — 이미지 칸 자체를 넓혀 시각물을 크게 보여 줍니다.
   scale() 로 키우면 그리드 칸 밖으로 삐져나와 본문을 침범하므로,
   칸 폭으로 키우고 이미지는 등배(scale 1)로 둡니다. */
.about-split .av-one{--s:1}
@media (min-width:1200px){
  .about-split{grid-template-columns:1.95fr 1fr;gap:clamp(32px,3vw,52px)}
}
@media (min-width:801px) and (max-width:1199px){
  .about-split{grid-template-columns:1.34fr 1fr;gap:clamp(26px,3vw,44px)}
}

/* 사업분야 카드 아이콘 — 벡터를 마스크로 찍어 색이 currentColor 를 따릅니다.
   .ic 의 color 가 기본 브랜드블루 → 호버 시 흰색으로 바뀌므로 별도 처리가 필요 없습니다. */
.card .ic .ico{width:34px;height:34px;display:block;background:currentColor}

@media (prefers-reduced-motion:reduce){
  .acc-item,.acc-fig,.acc-mini,.acc-plus,.acc-full,
  .acc-photo,.acc-photo .ph-a,.acc-photo .ph-b{transition-duration:.01ms!important;
    transition-delay:0s!important}
}


/* ============================================================
   지능형교통체계(ITS) 페이지 전용
   ------------------------------------------------------------
   외부 이미지를 쓰지 않고 전부 인라인 SVG + CSS 로 그렸습니다.
   ============================================================ */

/* --- 수집 → 가공 → 제공 흐름 --------------------------------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;
  gap:0;margin-top:clamp(28px,3.5vw,48px)}
.flow-step{position:relative;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--radius);padding:clamp(24px,2.6vw,36px);
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s ease,border-color .5s ease}
.flow-step::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 60% at 84% 0%,rgba(91,120,224,.14),transparent 70%);
  transition:opacity .5s ease}
.flow-step:hover{transform:translateY(-6px);border-color:var(--c-brand-light);
  box-shadow:0 18px 44px rgba(20,28,62,.12)}
.flow-step:hover::after{opacity:1}
.fs-no{position:absolute;right:clamp(16px,1.8vw,24px);top:clamp(12px,1.4vw,18px);
  font-size:clamp(2.4rem,4vw,3.6rem);font-weight:var(--w-title);letter-spacing:-.05em;
  color:var(--c-brand-pale);line-height:1;transition:color .5s ease}
.flow-step:hover .fs-no{color:var(--c-accent-pale)}
.fs-ico{display:block;width:44px;height:44px;color:var(--c-accent)}
.fs-ico svg{width:100%;height:100%}
.fs-en{font-size:.76rem;font-weight:var(--w-bold);letter-spacing:.14em;color:var(--c-brand-light)}
.flow-step h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:var(--w-title);
  letter-spacing:-.03em;color:var(--c-ink)}
.flow-step p{font-size:.95rem;line-height:1.75;color:var(--c-body);word-break:keep-all}
.fs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fs-tags li{padding:5px 11px;border-radius:999px;background:var(--c-brand-mist);
  border:1px solid var(--c-line);font-size:.79rem;font-weight:var(--w-mid);color:var(--c-brand)}

/* 사이 연결선 — 점 3개가 다음 단계로 흘러갑니다 */
.flow-link{position:relative;width:clamp(40px,5vw,84px);align-self:center;height:2px;
  background:linear-gradient(90deg,var(--c-line),var(--c-brand-light),var(--c-line))}
.flow-link i{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--c-accent-bright);translate:-50% -50%;
  box-shadow:0 0 0 4px rgba(91,120,224,.16);
  animation:flowdot 2.4s linear infinite}
.flow-link i:nth-child(2){animation-delay:.8s}
.flow-link i:nth-child(3){animation-delay:1.6s}
@keyframes flowdot{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

@media (max-width:900px){
  .flow{grid-template-columns:1fr}
  .flow-link{width:2px;height:clamp(28px,5vw,44px);justify-self:center;
    background:linear-gradient(180deg,var(--c-line),var(--c-brand-light),var(--c-line))}
  .flow-link i{animation-name:flowdotv;left:50%}
  @keyframes flowdotv{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
}

/* --- 7대 서비스 분야 ------------------------------------------ */
.svc7-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(26px,3vw,44px)}
.svc7{position:relative;padding:clamp(22px,2.2vw,30px);border-radius:var(--radius);
  background:#fff;border:1px solid var(--c-line);overflow:hidden;
  transition:transform .5s var(--ease-out),border-color .45s ease,box-shadow .45s ease}
.svc7::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-bright));
  scale:0 1;transform-origin:0 50%;transition:scale .55s var(--ease-out)}
.svc7:hover{transform:translateY(-5px);border-color:var(--c-brand-light);
  box-shadow:0 16px 38px rgba(20,28,62,.10)}
.svc7:hover::before{scale:1 1}
.svc7 .n{font-size:.8rem;font-weight:var(--w-bold);letter-spacing:.1em;color:var(--c-brand-light)}
.svc7 h3{margin-top:8px;font-size:1.1rem;font-weight:var(--w-bold);letter-spacing:-.025em;color:var(--c-ink)}
.svc7 p{margin-top:7px;font-size:.9rem;line-height:1.7;color:var(--c-muted);word-break:keep-all}

/* --- C-ITS V2X 개념도 ----------------------------------------- */
.v2x{margin-top:clamp(28px,3.4vw,50px)}
.v2x svg{display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.v2x-lane{stroke:rgba(214,222,246,.42);stroke-width:2;stroke-dasharray:22 20;
  animation:v2xlane 1.9s linear infinite}
@keyframes v2xlane{to{stroke-dashoffset:42}}
.v2x-node path,.v2x-node rect,.v2x-node circle,.v2x-node line{fill:none;stroke:#D6DEF6;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* 아이콘은 확대해서 쓰므로, 선 굵기를 배율(--s)로 나눠 모두 같은 두께로 보이게 합니다 */
.v2x-node .v2x-ico path,.v2x-node .v2x-ico rect,.v2x-node .v2x-ico circle,
.v2x-node .v2x-ico line,.v2x-node .v2x-ico use{stroke-width:calc(2 / var(--s,1))}
/* 노변기지국 안테나 호 — 안쪽에서 바깥쪽으로 밝아지며 전파를 표현 */
.v2x-sig{opacity:.18;animation:v2xsig 2.4s ease-in-out infinite}
.v2x-sig.s2{animation-delay:.42s}
@keyframes v2xsig{0%,100%{opacity:.16}42%{opacity:1}}
.v2x-node text{fill:rgba(214,222,246,.78);font-size:13px;font-weight:600;
  text-anchor:middle;letter-spacing:-.01em}
.v2x-halo{fill:url(#v2xGlow);stroke:none!important;opacity:.55;
  transform-box:fill-box;transform-origin:center;
  animation:v2xhalo 3.2s ease-in-out infinite}
.v2x-car .v2x-halo{animation-delay:.8s}
@keyframes v2xhalo{0%,100%{opacity:.28;scale:.9}50%{opacity:.7;scale:1.08}}
.v2x-wave{stroke:#8FA4F0;stroke-width:2;fill:none;opacity:0;
  animation:v2xwave 2.6s ease-out infinite}
.v2x-wave.w2{animation-delay:.65s}
@keyframes v2xwave{0%{opacity:0;scale:.6}30%{opacity:.85}100%{opacity:0;scale:1.25}}
.v2x-links path{fill:none;stroke:#5B78E0;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:9 13;opacity:.85;animation:v2xflow 1.6s linear infinite}
.v2x-link.l2{animation-delay:.25s}.v2x-link.l3{animation-delay:.5s}
.v2x-link.l4{animation-delay:.75s}.v2x-link.l5{animation-delay:1s}
@keyframes v2xflow{to{stroke-dashoffset:-44}}
.v2x-tag text{fill:#93A6F2;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-anchor:middle}
.v2x figcaption{margin-top:16px;font-size:.92rem;line-height:1.8;
  color:rgba(214,222,246,.72);word-break:keep-all}
.v2x figcaption b{color:#fff;font-weight:var(--w-bold)}

/* --- ITS vs C-ITS 비교 ---------------------------------------- */
.cmp{margin-top:clamp(30px,3.6vw,52px);border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.13)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:minmax(96px,.7fr) 1fr 1.15fr;
  gap:clamp(12px,1.6vw,26px);padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,28px);
  align-items:center}
.cmp-head{background:rgba(255,255,255,.07);font-weight:var(--w-bold);letter-spacing:-.01em}
.cmp-head .a{color:rgba(214,222,246,.72)}
.cmp-head .b{color:#fff}
.cmp-head .b em{font-style:normal;font-size:.78rem;font-weight:var(--w-mid);
  margin-left:7px;padding:3px 9px;border-radius:999px;
  background:rgba(91,120,224,.32);color:#C9D4FA;letter-spacing:.02em}
.cmp-row{border-top:1px solid rgba(255,255,255,.08);font-size:.94rem;line-height:1.7}
.cmp-row .k{font-weight:var(--w-bold);color:#93A6F2}
.cmp-row .a{color:rgba(214,222,246,.62)}
.cmp-row .b{color:#EDF1FC}
.cmp-row .b b,.cmp-row .a b{font-weight:var(--w-bold);color:#fff}
.cmp-row:hover{background:rgba(255,255,255,.04)}
@media (max-width:760px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;gap:6px}
  .cmp-row .a::before{content:var(--ha,"기존 ITS · ");color:#7A86BE;font-weight:600}
  .cmp-row .b::before{content:var(--hb,"C-ITS · ");color:#93A6F2;font-weight:700}
}

/* --- 정책 4대 전략 -------------------------------------------- */
.pol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,3vw,44px)}
.pol{position:relative;padding:clamp(24px,2.4vw,32px);border-radius:var(--radius);
  background:var(--c-brand-mist);border:1px solid var(--c-line);
  transition:transform .5s var(--ease-out),background-color .45s ease,border-color .45s ease}
.pol:hover{transform:translateY(-5px);background:#fff;border-color:var(--c-brand-light)}
.pol .n{font-size:.78rem;font-weight:var(--w-bold);letter-spacing:.12em;color:var(--c-accent-bright)}
.pol h3{margin-top:10px;font-size:1.06rem;font-weight:var(--w-bold);letter-spacing:-.025em;
  line-height:1.5;color:var(--c-ink);word-break:keep-all}
.pol p{margin-top:9px;font-size:.9rem;line-height:1.75;color:var(--c-body);word-break:keep-all}
.src{margin-top:clamp(22px,2.4vw,32px);font-size:.82rem;color:var(--c-muted);letter-spacing:-.01em}

@media (prefers-reduced-motion:reduce){
  .flow-link i,.v2x-lane,.v2x-halo,.v2x-wave,.v2x-sig,.v2x-links path{animation:none!important}
  .v2x-wave,.v2x-sig{opacity:.6}
}
.cmp-row .nw{white-space:nowrap;color:rgba(214,222,246,.62);font-weight:var(--w-body)}


/* ============================================================
   TECH VISION — 좌측 다크 스테이트먼트 패널 + 우측 2×2 번호 카드
   ============================================================ */
.tv{display:grid;grid-template-columns:minmax(300px,1fr) 1.62fr;
  gap:clamp(14px,1.5vw,22px);align-items:stretch}

/* 좌측 패널 ---------------------------------------------------- */
.tv-panel{position:relative;overflow:hidden;isolation:isolate;
  border-radius:14px;padding:clamp(30px,3vw,46px);
  display:flex;flex-direction:column;
  min-height:clamp(420px,38vw,560px);
  background:linear-gradient(155deg,#080b18 0%,#05070f 42%,#0a1030 100%)}
/* 우하단 프리즘 리본 — 흐릿한 blob 대신 각진 면으로 잡아 또렷하게 보이게 합니다 */
.tv-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.tv-art svg{position:absolute;right:0;bottom:0;width:104%;height:104%;
  transform-origin:78% 82%;
  transition:transform 1.1s var(--ease-out);
  animation:tvdrift 16s ease-in-out infinite alternate}
@keyframes tvdrift{from{transform:translate3d(0,0,0) scale(1)}
                   to{transform:translate3d(-2.5%,-2%,0) scale(1.05)}}
.tv-panel:hover .tv-art svg{transform:translate3d(-4%,-4%,0) scale(1.09)}
/* 헤드라인이 얹히는 좌·상단은 어둡게 눌러 대비를 지키고, 우하단만 밝게 남깁니다 */
.tv-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,#05070f 0%,rgba(5,7,15,.80) 22%,rgba(5,7,15,.28) 44%,transparent 62%),
    linear-gradient(112deg,#05070f 16%,rgba(5,7,15,.74) 36%,rgba(5,7,15,.12) 60%,transparent 78%)}

.tv-eyebrow{font-size:1.1rem;font-weight:var(--w-bold);letter-spacing:-.01em;
  color:#5B8CFF}
.tv-title{margin-top:16px;display:flex;flex-direction:column;gap:7px;
  font-size:clamp(1.62rem,2.22vw,2.23rem);font-weight:var(--w-title);
  letter-spacing:-.038em;line-height:1.42;color:#fff;word-break:keep-all}
.tv-title span{display:block;opacity:0;translate:0 16px;
  transition:opacity .7s ease,translate .8s var(--ease-out)}
.tv-panel.in .tv-title span{opacity:1;translate:0 0}
.tv-panel.in .tv-title span:nth-child(2){transition-delay:.11s}
.tv-panel.in .tv-title span:nth-child(3){transition-delay:.22s}
.tv-body{margin-top:auto;padding-top:clamp(40px,6vw,90px);
  display:flex;flex-direction:column;gap:clamp(14px,1.5vw,20px)}
.tv-body p{font-size:1.08rem;line-height:1.8;letter-spacing:-.012em;
  color:rgba(206,215,240,.78);word-break:keep-all}

/* 우측 카드 ---------------------------------------------------- */
.tv-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.5vw,22px)}
.tv-card{position:relative;overflow:hidden;border-radius:16px;
  padding:clamp(26px,2.7vw,38px);background:#EEF2FC;
  transition:transform .55s var(--ease-out),background-color .45s ease,
             box-shadow .45s ease}
.tv-card:hover{transform:translateY(-6px);background:#E7EDFC;
  box-shadow:0 20px 46px rgba(20,28,62,.13)}
/* 카드 전체가 링크인 경우(홈 · 사업 분야) — 하단에 화살표가 미끄러져 들어옵니다 */
a.tv-card{display:block;color:inherit;padding-bottom:clamp(56px,4.6vw,72px)}
a.tv-card:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.tv-go{position:absolute;left:clamp(26px,2.7vw,38px);bottom:clamp(22px,2.2vw,32px);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--c-accent);color:#fff;opacity:0;translate:-8px 0;
  transition:opacity .45s ease,translate .45s var(--ease-out)}
.tv-go svg{width:16px;height:16px}
a.tv-card:hover .tv-go,a.tv-card:focus-visible .tv-go{opacity:1;translate:0 0}
@media (hover:none){.tv-go{opacity:1;translate:0 0}}
.tv-n{display:block;font-size:.86rem;font-weight:var(--w-bold);letter-spacing:.03em;
  color:var(--c-accent-bright)}
.tv-n,.tv-card h3{padding-right:clamp(74px,6.6vw,100px)}
.tv-card h3{margin-top:7px;font-size:clamp(1.24rem,1.9vw,1.68rem);
  font-weight:var(--w-title);letter-spacing:-.032em;color:var(--c-ink)}
.tv-card b{display:block;margin-top:clamp(20px,2.4vw,34px);
  font-size:.98rem;font-weight:var(--w-bold);letter-spacing:-.025em;color:var(--c-ink)}
.tv-card p{margin-top:10px;font-size:.875rem;line-height:1.85;letter-spacing:-.012em;
  color:#8A93A6;word-break:keep-all;max-width:44ch}

/* 아이콘 타일 — 카드 우상단, 호버하면 살짝 떠오릅니다 */
.tv-ico{position:absolute;right:clamp(20px,2vw,30px);top:clamp(20px,2vw,30px);
  width:clamp(62px,5.6vw,84px);aspect-ratio:1;border-radius:18px;
  display:grid;place-items:center;color:#3E6BF0;
  background:linear-gradient(152deg,#E3EBFD 0%,#D2DFFB 58%,#C4D5F9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(62,107,240,.10);
  transition:transform .55s var(--ease-out),background-color .45s ease,color .45s ease,
             box-shadow .45s ease}
.tv-ico svg{width:56%;height:56%;filter:drop-shadow(0 2px 4px rgba(30,57,180,.22))}
.tv-card:hover .tv-ico{transform:translateY(-4px) scale(1.07);color:#2F53D8;
  background:linear-gradient(152deg,#DCE6FD 0%,#C4D5F9 58%,#B2C8F7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px rgba(30,57,180,.16)}

@media (max-width:1100px){
  .tv{grid-template-columns:1fr}
  .tv-panel{min-height:0}
  .tv-body{padding-top:clamp(26px,4vw,44px)}
}
@media (max-width:620px){
  .tv-grid{grid-template-columns:1fr}
  .tv-ico{width:54px}
  .tv-card b{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .tv-art svg{animation:none}
  .tv-title span{opacity:1;translate:0 0}
}

/* 홈 WHO WE ARE 콜라주 — 하단 반사가 '뒤집힌 글씨'로 읽혀 지저분해 보이므로
   아래로 갈수록 사라지게 마스크를 씌웁니다. 제품 이미지는 그대로 두고
   반사 부분만 배경으로 자연스럽게 녹아들게 합니다. */
.av-one-img{
  -webkit-mask-image:linear-gradient(180deg,#000 0 83%,rgba(0,0,0,.46) 89%,transparent 94%);
          mask-image:linear-gradient(180deg,#000 0 83%,rgba(0,0,0,.46) 89%,transparent 94%)}

/* 구성도 등 큰 그림 한 장을 담는 상자 */
.figbox{margin-top:clamp(26px,3vw,44px);padding:clamp(24px,3vw,52px);
  border-radius:var(--radius);border:1px solid var(--c-line);
  background:linear-gradient(150deg,#F5F8FE,#EDF1FB 55%,#F7F9FE);
  transition:border-color .5s ease,box-shadow .5s ease}
.figbox:hover{border-color:var(--c-brand-light);box-shadow:0 18px 44px rgba(20,28,62,.09)}
.figbox picture{display:block}
.figbox img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 28px rgba(20,28,62,.12))}
.figbox figcaption{margin-top:clamp(16px,1.8vw,24px);text-align:center;
  font-size:.9rem;line-height:1.7;color:var(--c-muted);letter-spacing:-.012em;word-break:keep-all}

/* --- 긴급차량 우선신호 개념도 ---------------------------------- */
.evsv{margin-top:clamp(28px,3.4vw,50px)}
.evsv svg{display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.evsv-lane{stroke:rgba(214,222,246,.4);stroke-width:2;stroke-dasharray:22 20;
  animation:evslane 1.9s linear infinite}
@keyframes evslane{to{stroke-dashoffset:42}}
/* 교차로가 순서대로 녹색으로 열립니다 */
.evsv-stop path{stroke:rgba(214,222,246,.2);stroke-width:2;stroke-dasharray:7 8;fill:none}
.evsv-open{fill:#37D08A;opacity:0;animation:evsopen 4.4s ease-in-out infinite}
.evsv-open.o2{animation-delay:.9s}
@keyframes evsopen{0%,26%{opacity:0}38%,66%{opacity:.16}82%,100%{opacity:0}}
.evsv-node path,.evsv-node rect,.evsv-node circle,.evsv-node line{fill:none;stroke:#D6DEF6;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.evsv-node .evsv-ico path,.evsv-node .evsv-ico rect,.evsv-node .evsv-ico circle{
  stroke-width:calc(2 / var(--s,1))}
.evsv-node text,.evsv-sgl text{fill:rgba(214,222,246,.78);font-size:13px;font-weight:600;
  text-anchor:middle;letter-spacing:-.01em}
.evsv-halo{fill:url(#evsGlow);stroke:none!important;transform-box:fill-box;transform-origin:center;
  animation:evshalo 3.2s ease-in-out infinite}
.evsv-halo.is-red{fill:url(#evsRed);animation-duration:1.5s}
@keyframes evshalo{0%,100%{opacity:.26;scale:.9}50%{opacity:.68;scale:1.08}}
.evsv-sig{opacity:.2;animation:evssig 2.2s ease-in-out infinite}
@keyframes evssig{0%,100%{opacity:.18}45%{opacity:1}}
/* 신호등 */
.evsv-box{fill:rgba(11,16,36,.92);stroke:rgba(214,222,246,.42);stroke-width:2}
.evsv-pole{stroke:rgba(214,222,246,.42);stroke-width:3;stroke-linecap:round;fill:none}
.evsv-lamp{stroke:none}
.evsv-lamp.red{fill:#FF5A5A;opacity:.16;animation:evsred 4.4s ease-in-out infinite}
.evsv-lamp.amb{fill:#FFC24B;opacity:.13}
.evsv-lamp.grn{fill:#37D08A;opacity:.14;animation:evsgrn 4.4s ease-in-out infinite}
.evsv-lamp.r2,.evsv-lamp.g2{animation-delay:.9s}
@keyframes evsred{0%,24%{opacity:1}34%,78%{opacity:.14}90%,100%{opacity:1}}
@keyframes evsgrn{0%,26%{opacity:.14}38%,72%{opacity:1}84%,100%{opacity:.14}}
.evsv-links path{fill:none;stroke:#5B78E0;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:9 13;opacity:.85;animation:evsflow 1.6s linear infinite}
.evsv-link.l2{animation-delay:.2s}.evsv-link.l3{animation-delay:.4s}
.evsv-link.l4{animation-delay:.6s}
@keyframes evsflow{to{stroke-dashoffset:-44}}
.evsv-tag text{fill:#93A6F2;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-anchor:middle}
/* 차량이 지나갈 길이 앞서 열리는 느낌의 진행선 */
.evsv-run{fill:none;stroke:#37D08A;stroke-width:3;stroke-linecap:round;opacity:.7;
  stroke-dasharray:452;stroke-dashoffset:452;animation:evsrun 4.4s ease-in-out infinite}
@keyframes evsrun{0%{stroke-dashoffset:452}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-452}}
.evsv figcaption{margin-top:16px;font-size:.92rem;line-height:1.8;
  color:rgba(214,222,246,.72);word-break:keep-all}
.evsv figcaption b{color:#fff;font-weight:var(--w-bold)}
@media (prefers-reduced-motion:reduce){
  .evsv-lane,.evsv-open,.evsv-halo,.evsv-sig,.evsv-links path,.evsv-run,
  .evsv-lamp.red,.evsv-lamp.grn{animation:none!important}
  .evsv-open{opacity:.16}.evsv-run{stroke-dashoffset:0}
  .evsv-lamp.grn{opacity:1}.evsv-lamp.red{opacity:.14}
}
@media (max-width:640px){
  .evsv-node text,.evsv-sgl text{font-size:15px}
  .evsv-tag text{font-size:14px}
}

/* --- 스마트 스쿨존 개념도 -------------------------------------- */
.sszv{margin-top:clamp(28px,3.4vw,50px)}
.sszv svg{display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.sszv-lane{stroke:rgba(214,222,246,.4);stroke-width:2;stroke-dasharray:22 20;
  animation:sszlane 2.4s linear infinite}
@keyframes sszlane{to{stroke-dashoffset:42}}
/* 스쿨존 구간 노면 */
.sszv-zone{fill:#C8973A;opacity:.1}
.sszv-cw rect{fill:rgba(236,241,255,.5)}
/* 카메라 검지 영역 — 보행자를 잡을 때 밝아집니다 */
.sszv-beam{fill:url(#sszBeam);opacity:.5;animation:sszbeam 3.6s ease-in-out infinite}
@keyframes sszbeam{0%,30%{opacity:.28}46%,74%{opacity:1}88%,100%{opacity:.28}}
.sszv-node path,.sszv-node rect,.sszv-node circle,.sszv-node line{fill:none;stroke:#D6DEF6;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sszv-node .sszv-ico path,.sszv-node .sszv-ico rect,.sszv-node .sszv-ico circle{
  stroke-width:calc(2 / var(--s,1))}
.sszv-node text{fill:rgba(214,222,246,.82);font-size:13px;font-weight:600;
  text-anchor:middle;letter-spacing:-.01em;
  paint-order:stroke fill;stroke:#080C1C;stroke-width:5;stroke-linejoin:round}
.sszv-node .sszv-warn,.sszv-node .sszv-spdn{stroke:none!important}
.sszv-halo{fill:url(#sszGlow);stroke:none!important;transform-box:fill-box;transform-origin:center;
  animation:sszhalo 3.6s ease-in-out infinite}
.sszv-halo.is-warm{fill:url(#sszWarm)}
@keyframes sszhalo{0%,30%{opacity:.2;scale:.9}46%,74%{opacity:.7;scale:1.06}88%,100%{opacity:.2;scale:.9}}
.sszv-pole{stroke:rgba(214,222,246,.4)!important;stroke-width:3!important}
.sszv-lens{fill:#8FA4F0!important;stroke:none!important;
  animation:sszlens 3.6s ease-in-out infinite}
@keyframes sszlens{0%,30%{opacity:.35}46%,74%{opacity:1}88%,100%{opacity:.35}}
/* 전광판 — 보행자가 잡히면 켜집니다 */
.sszv-panel{fill:#0B1024;stroke:rgba(214,222,246,.45);stroke-width:2;
  animation:sszpanel 3.6s ease-in-out infinite}
@keyframes sszpanel{0%,30%{stroke:rgba(214,222,246,.3)}46%,74%{stroke:#FFC24B}88%,100%{stroke:rgba(214,222,246,.3)}}
.sszv-warn{fill:#FFC24B!important;font-size:15.5px!important;font-weight:800!important;
  letter-spacing:-.02em;stroke:none!important;animation:sszwarn 3.6s ease-in-out infinite}
@keyframes sszwarn{0%,30%{fill:#4A5478}46%,74%{fill:#FFCE64}88%,100%{fill:#4A5478}}
/* 제한속도 표지 */
.sszv-spd{fill:#0B1024;stroke:#FF5A5A!important;stroke-width:4!important}
.sszv-spdn{fill:#EDF1FC!important;font-size:22px!important;font-weight:800!important;
  stroke:none!important;letter-spacing:-.02em}
/* 보행자 검지 박스 */
.sszv-box{fill:none;stroke:#FFC24B!important;stroke-width:2!important;stroke-dasharray:8 7;
  opacity:0;animation:sszbox 3.6s ease-in-out infinite}
@keyframes sszbox{0%,30%{opacity:0}46%,74%{opacity:.95}88%,100%{opacity:0}}
.sszv-links path{fill:none;stroke:#5B78E0;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:9 13;opacity:.85;animation:sszflow 1.6s linear infinite}
@keyframes sszflow{to{stroke-dashoffset:-44}}
.sszv-tag text{fill:#93A6F2;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-anchor:middle}
.sszv figcaption{margin-top:16px;font-size:.92rem;line-height:1.8;
  color:rgba(214,222,246,.72);word-break:keep-all}
.sszv figcaption b{color:#fff;font-weight:var(--w-bold)}
@media (prefers-reduced-motion:reduce){
  .sszv-lane,.sszv-beam,.sszv-halo,.sszv-lens,.sszv-panel,.sszv-warn,.sszv-box,
  .sszv-links path{animation:none!important}
  .sszv-beam{opacity:1}.sszv-box{opacity:.95}.sszv-warn{fill:#FFC24B!important}
}
@media (max-width:640px){
  .sszv-node text{font-size:15px}
  .sszv-tag text{font-size:14px}
}


/* --- 보행자 픽토그램 (상림기술 제공 SVG) ------------------------ */
.pedfig path{fill:#D6DEF6!important;stroke:none!important}
.sszv-node .pedfig path{fill:#EDF1FC!important}