:root{--blue:#6aa6c9;--blue-d:#2f5f82;--bg:#050a10;--bg2:#0b141d;--ink:#fff;--mut:#9fb0bd;--line:rgba(255,255,255,.14);--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.in{max-width:1280px;margin:0 auto;padding:0 var(--pad)}

/* 헤더 */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s}
.hd.solid{background:rgba(5,10,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;height:92px;padding:0 var(--pad)}
.brand img{height:68px;width:auto;filter:brightness(0) invert(1)}
.gnb{display:flex;gap:40px;margin-left:auto;font-weight:700;font-size:16px}
.gnb a{opacity:.85;padding:6px 0;border-bottom:2px solid transparent}
.gnb a:hover{opacity:1;border-color:var(--blue)}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto}
.menu-btn span{display:block;width:24px;height:2px;background:#fff;margin:7px auto}

/* 히어로 */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#000}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.45) 100%),linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 45%)}
.hero-body{position:absolute;left:var(--pad);right:var(--pad);bottom:150px}
.slide{display:none}
.slide.on{display:block;animation:rise .8s ease both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--blue);font-weight:800;letter-spacing:.16em;font-size:13px;margin-bottom:16px;text-transform:uppercase}
h1{font-size:clamp(34px,5.6vw,76px);line-height:1.22;letter-spacing:-.03em;font-weight:800;margin-bottom:34px}
.tl{display:inline-block;border:1px solid rgba(255,255,255,.5);border-radius:40px;padding:11px 30px;font-weight:700;font-size:15px;transition:.2s}
.tl:hover{background:#fff;color:#000}
.tl.dk{color:#0b141d;border-color:#0b141d;margin-top:44px}
.tl.dk:hover{background:#0b141d;color:#fff}
.hero-ctl{position:absolute;left:var(--pad);bottom:44px;display:flex;align-items:center;gap:20px}
.arr svg{width:38px;height:19px;display:block}
.arr:hover{color:var(--blue)}
.count{font-size:14px;font-weight:700;letter-spacing:.04em}
.count i{opacity:.5;margin:0 6px;font-style:normal}
.count span{opacity:.6}
.pp{font-size:11px;font-weight:800;width:30px;height:30px;border:1px solid rgba(255,255,255,.5);border-radius:50%;letter-spacing:-1px}
.down{position:absolute;left:50%;bottom:36px;width:20px;height:40px;transform:translateX(-50%);animation:bob 2s ease-in-out infinite}
.down svg{width:100%;height:100%}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* 섹션 공통 */
.sec{padding:clamp(80px,12vw,150px) 0}
.dark{background:var(--bg)}
.dark.line{background:var(--bg2)}
.light{background:#f3f6f9;color:#0b141d}
.light .eyebrow{color:var(--blue-d)}
h2.big{font-size:clamp(30px,4.4vw,58px);line-height:1.3;letter-spacing:-.03em;font-weight:800}
h2.mid{font-size:clamp(28px,3.4vw,44px);line-height:1.3;letter-spacing:-.02em;font-weight:800}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px;color:var(--mut);font-size:18px}

/* 사업영역 목록 */
.rows{margin-top:56px;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:70px 1.2fr 1fr;gap:24px;align-items:center;padding:34px 12px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.rows li:hover{background:rgba(106,166,201,.08);padding-left:24px}
.rows .no{color:var(--blue);font-weight:800;font-size:15px}
.rows h3{font-size:clamp(20px,2.2vw,28px);line-height:1.35;font-weight:800}
.rows em{display:block;color:var(--blue);font-style:normal;font-weight:700;font-size:14px;margin-top:4px}
.rows p{color:var(--mut);font-size:16px}

/* POPCON */
.sub-lead{margin-top:28px;font-size:19px;color:#3b4a57;max-width:760px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:2px solid #0b141d}
.facts div{padding:28px 24px 8px 0}
.facts b{display:block;font-size:clamp(34px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;color:var(--blue-d)}
.facts span{color:#3b4a57;font-weight:600}
.parts{margin-top:48px}
.parts li{display:grid;grid-template-columns:280px 1fr;gap:20px;padding:20px 0;border-top:1px solid #cdd8e1}
.parts li:last-child{border-bottom:1px solid #cdd8e1}
.parts b{color:var(--blue-d)}
.parts span{color:#3b4a57}

/* 적용 분야 흐르는 띠 */
.marq{overflow:hidden;margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.marq-t{display:flex;gap:64px;width:max-content;animation:flow 38s linear infinite;font-size:clamp(26px,3.6vw,48px);font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:rgba(255,255,255,.88)}
.marq-t span::after{content:"/";margin-left:64px;color:var(--blue);opacity:.7}
@keyframes flow{to{transform:translateX(-50%)}}
.marq:hover .marq-t{animation-play-state:paused}

/* 문의 */
.info{display:grid;grid-template-columns:100px 1fr;row-gap:18px;margin-top:60px;border-top:1px solid var(--line);padding-top:28px;font-size:18px}
.info dt{color:var(--blue);font-weight:800}
.info a:hover{text-decoration:underline}

/* 푸터 */
.ft{background:#000;color:#8a9aa7;padding:44px 0;font-size:14.5px}
.ft-in{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.ft strong{color:#fff;font-size:16px}
.ft p{margin-top:6px}
.ft .copy{opacity:.7}
.totop:hover{color:#fff}

/* 모바일 */
@media (max-width:900px){
  .gnb{display:none;position:fixed;inset:84px 0 0 0;background:rgba(5,10,16,.98);flex-direction:column;gap:0;padding:12px var(--pad);font-size:22px}
  .gnb.open{display:flex}
  .gnb a{padding:20px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .hero-body{bottom:140px}
  .down{display:none}
  .cols,.facts{grid-template-columns:1fr;gap:24px}
  .facts div{padding:20px 0 4px}
  .rows li{grid-template-columns:44px 1fr;gap:8px 12px;padding:26px 4px}
  .rows li p{grid-column:2}
  .parts li{grid-template-columns:1fr;gap:4px}
  .ft-in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.marq-t,.down,.slide.on{animation:none}html{scroll-behavior:auto}}

/* ---- 하위 페이지 (제품 소개) ---- */
.gnb a.cur{opacity:1;border-color:var(--blue)}
.phero{position:relative;min-height:520px;height:68vh;overflow:hidden;background:#000;display:flex;align-items:flex-end}
.phero-body{position:relative;padding:0 var(--pad) 64px;width:100%;max-width:1280px;margin:0 auto}
.phero h1{margin-bottom:18px;font-size:clamp(44px,8vw,112px);line-height:1.05}
.phero-sub{font-size:clamp(17px,1.6vw,22px);color:#c7d3dc;margin-bottom:36px}
.anchors{display:flex;flex-wrap:wrap;gap:10px}
.anchors a{border:1px solid rgba(255,255,255,.35);border-radius:40px;padding:8px 20px;font-weight:700;font-size:14.5px}
.anchors a:hover{background:#fff;color:#000}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid var(--line)}
.stat3 div{padding:30px 24px 0 0}
.stat3 b{display:block;font-size:clamp(36px,5vw,68px);line-height:1.1;letter-spacing:-.03em;color:var(--blue)}
.stat3 span{color:var(--mut);font-weight:600}
.rows-3 li{grid-template-columns:70px 1fr 1.2fr}
.feat-g{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;margin-top:48px}
.fg h3{font-size:22px;padding-bottom:14px;border-bottom:2px solid #0b141d;margin-bottom:4px}
.fg li{padding:18px 0;border-bottom:1px solid #cdd8e1;color:#3b4a57;font-size:16px}
.fg li b{display:block;color:var(--blue-d);font-size:17px;margin-bottom:2px}
.tbl-w{overflow-x:auto;margin-top:44px}
.tbl{width:100%;border-collapse:collapse;min-width:640px;font-size:16px}
.tbl th,.tbl td{padding:20px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{color:var(--blue);font-size:14px;letter-spacing:.06em;border-bottom:2px solid #fff}
.tbl tbody th{width:150px;font-weight:800}
.tbl td{color:var(--mut)}
.tbl td:last-child{color:#fff}
.tbl-l{color:#0b141d}
.tbl-l th,.tbl-l td{border-bottom-color:#cdd8e1}
.tbl-l thead th{border-bottom-color:#0b141d;color:var(--blue-d)}
.tbl-l td,.tbl-l td:last-child{color:#3b4a57}
.tbl-l .hl{background:rgba(47,95,130,.1);color:var(--blue-d);font-weight:800}
.note{margin-top:20px;color:#5b6b78;font-size:14.5px}
.note.nd{color:var(--mut)}
.spec{display:grid;grid-template-columns:180px 1fr;margin-top:44px;border-top:1px solid var(--line)}
.spec dt,.spec dd{padding:20px 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--blue);font-weight:800}
.uses{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.uses li{border:1px solid var(--line);border-radius:40px;padding:14px 28px;font-weight:700;font-size:18px}
.docs{margin-top:36px;border-top:2px solid #0b141d}
.docs a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 8px;border-bottom:1px solid #cdd8e1;font-weight:700;color:#0b141d}
.docs a::after{content:"↗";color:var(--blue-d)}
.docs a:hover{background:rgba(47,95,130,.08)}
.docs small{margin-left:auto;color:#5b6b78;font-weight:600;font-size:14px}
@media (max-width:900px){
  .rows-3 li{grid-template-columns:44px 1fr}
  .feat-g,.stat3{grid-template-columns:1fr;gap:28px}
  .spec{grid-template-columns:120px 1fr}
  .docs a{flex-wrap:wrap}.docs small{margin-left:0;width:100%;order:3}
  .phero{min-height:480px}
}

/* POPCON 페이지: 터지는 그림 */
.popart{position:absolute;right:max(2vw,calc((100vw - 1280px)/2 + 20px));bottom:0;width:min(46vw,600px);height:auto;overflow:visible}
.phero-body h1,.phero-sub,.anchors,.phero-body .eyebrow{max-width:54%}
.pop{transform-box:fill-box;transform-origin:center;animation:pop 3.8s cubic-bezier(.2,.7,.3,1) var(--d) infinite;opacity:0}
@keyframes pop{
  0%{transform:translate(0,30px) rotate(0) scale(.15);opacity:0}
  12%{opacity:1}
  55%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1);opacity:1}
  85%{transform:translate(calc(var(--dx)*1.12),calc(var(--dy) + 90px)) rotate(calc(var(--r)*1.6)) scale(1);opacity:.9}
  100%{transform:translate(calc(var(--dx)*1.15),calc(var(--dy) + 150px)) rotate(calc(var(--r)*2)) scale(.9);opacity:0}
}
.pbox{transform-box:fill-box;transform-origin:50% 100%;animation:jolt 3.8s ease-in-out infinite}
@keyframes jolt{0%,100%{transform:scale(1)}6%{transform:scale(1.04,.95)}14%{transform:scale(.98,1.03)}22%{transform:scale(1)}}
@media (max-width:900px){
  .popart{top:76px;bottom:auto;right:-6vw;width:84vw;opacity:.9}
  .phero{min-height:640px;height:auto;padding-top:300px}
  .phero-body h1,.phero-sub,.anchors,.phero-body .eyebrow{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pop{animation:none;opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
  .pbox{animation:none}
}
.phero h1{font-size:clamp(40px,6.4vw,92px);white-space:nowrap;max-width:none}

/* ---- 밝은 구간 늘리기 (v5) ---- */
.white{background:#fff;color:#0b141d}
.light{background:#f3f6f9}
:is(.light,.white) .eyebrow{color:var(--blue-d)}
:is(.light,.white) .cols{color:#4a5b69}
:is(.light,.white) .rows{border-top:2px solid #0b141d}
:is(.light,.white) .rows li{border-bottom-color:#d5dee6}
:is(.light,.white) .rows li:hover{background:rgba(47,95,130,.06)}
:is(.light,.white) .rows .no,:is(.light,.white) .rows em{color:var(--blue-d)}
:is(.light,.white) .rows p{color:#4a5b69}
:is(.light,.white) .stat3{border-top:2px solid #0b141d}
:is(.light,.white) .stat3 b{color:var(--blue-d)}
:is(.light,.white) .stat3 span{color:#4a5b69}
:is(.light,.white) .spec{border-top:2px solid #0b141d}
:is(.light,.white) .spec dt,:is(.light,.white) .spec dd{border-bottom-color:#d5dee6}
:is(.light,.white) .spec dt{color:var(--blue-d)}
:is(.light,.white) .uses li{border-color:#cdd8e1;background:#fff}
:is(.light,.white) .marq{border-color:#d5dee6}
:is(.light,.white) .marq-t{color:#0b141d}
:is(.light,.white) .tbl th,:is(.light,.white) .tbl td{border-bottom-color:#d5dee6}
:is(.light,.white) .tbl thead th{color:var(--blue-d);border-bottom-color:#0b141d}
:is(.light,.white) .tbl td{color:#4a5b69}
:is(.light,.white) .tbl td:last-child{color:#0b141d}
:is(.light,.white) .tbl-l td:last-child{color:#4a5b69}
:is(.light,.white) .tbl-l .hl{color:var(--blue-d)}
:is(.light,.white) .note{color:#5b6b78}
.white .fg li,.light .fg li{border-bottom-color:#d5dee6}
.white .parts li,.light .parts li{border-color:#d5dee6}

/* 스크롤하면 헤더가 흰색으로 */
.hd.solid{background:rgba(255,255,255,.96);border-bottom:1px solid #e1e8ee}
.hd.solid .brand img{filter:none}
.hd.solid .gnb a{color:#0b141d}
.hd.solid .gnb a:hover{border-color:var(--blue-d)}
.hd.solid .gnb a.cur{border-color:var(--blue-d)}
.hd.solid .menu-btn span{background:#0b141d}
@media (max-width:900px){.hd.solid .gnb{background:#fff}.hd.solid .gnb a{border-bottom-color:#e1e8ee}}

@media (max-width:900px){.hd-in{height:84px}.brand img{height:58px}}

/* ---- 소제목: 큰 영문 제목 + 한글 한 줄 (v7) ---- */
.sh .en{font-size:clamp(38px,5.6vw,80px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.sh .kr{margin-top:18px;font-size:clamp(18px,2vw,28px);line-height:1.5;font-weight:600;letter-spacing:-.02em;opacity:.72}
.sec .sh+*{margin-top:56px}
.sec .sh+.sub-lead{margin-top:24px}

/* ---- 구조도 ---- */
.diag{margin-top:48px;overflow-x:auto}
.diag svg{display:block;width:100%;min-width:720px;height:auto}
.sh+.diag{margin-top:48px}
.rows-3+.diag{margin-top:56px}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

/* ---- 메뉴: 알약형 (카카오 스타일), 오른쪽 끝 정렬 (v10) ---- */
.gnb{gap:4px;margin-left:auto}
.gnb a{padding:9px 20px;border:0;border-radius:999px;opacity:1;font-size:16px;font-weight:600;transition:background .15s,color .15s}
.gnb a:hover{background:rgba(255,255,255,.18)}
.gnb a.cur{background:#fff;color:#0b141d}
.hd.solid .gnb a:hover{background:#eef2f6}
.hd.solid .gnb a.cur{background:#0b141d;color:#fff}
@media (max-width:900px){
  .gnb{gap:0}
  .gnb a{border-radius:0;padding:20px 0;font-size:22px}
  .gnb a.cur,.hd.solid .gnb a.cur{background:none;color:var(--blue)}
  .hd.solid .gnb a.cur{color:var(--blue-d)}
}

/* 비교표 글자 가운데 정렬 (v11) */
.tbl th,.tbl td,.tbl thead th,.tbl tbody th{text-align:center;vertical-align:middle}

/* ---- 움직임 (v13) ---- */
.prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease var(--rd,0s),transform .8s cubic-bezier(.2,.7,.3,1) var(--rd,0s)}
.js .rv.is-in{opacity:1;transform:none}
.js .rows li.rv{transition:opacity .8s ease var(--rd,0s),transform .8s cubic-bezier(.2,.7,.3,1) var(--rd,0s),background .25s,padding .25s}
.js .rows li.rv.is-in{transition-delay:var(--rd,0s),var(--rd,0s),0s,0s}
.js .marq.rv{transform:none}
/* 구조도: 노드가 차례로 올라온다 */
.js .diag svg>g{opacity:0}
.js .diag.is-in svg>g{animation:nodein .7s cubic-bezier(.2,.7,.3,1) both}
.js .diag.is-in svg>g:nth-of-type(2){animation-delay:.15s}
.js .diag.is-in svg>g:nth-of-type(3){animation-delay:.3s}
.js .diag.is-in svg>g:nth-of-type(4){animation-delay:.45s}
.js .diag.is-in svg>g.pulse{animation:nodein .7s cubic-bezier(.2,.7,.3,1) .6s both,pulse 2.4s ease-in-out 1.5s infinite}
@keyframes nodein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 마우스를 올렸을 때 */
.uses li{transition:transform .2s,box-shadow .2s,border-color .2s}
.uses li:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(47,95,130,.18);border-color:var(--blue-d)}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(47,95,130,.06)}
.tl{transition:background .2s,color .2s,transform .2s}
.tl:hover{transform:translateY(-2px)}
.parts li,.fg li{transition:padding .25s,background .25s}
.parts li:hover,.fg li:hover{background:rgba(47,95,130,.05);padding-left:12px}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .diag svg>g{opacity:1;transform:none;transition:none;animation:none}
  .js .diag.is-in svg>g.pulse{animation:none}
}

/* ---- 회사소개 페이지 (v15) ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:64px;list-style:none}
.steps::before{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:#cdd8e1}
.steps::after{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:var(--blue-d);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.3,.7,.2,1) .2s}
.steps.is-in::after{transform:scaleX(1)}
.steps li{position:relative;padding:48px 24px 0 0}
.steps li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blue-d);z-index:1}
.steps .n{display:block;color:var(--blue-d);font-weight:800;font-size:14px;margin-bottom:6px}
.steps h3{font-size:clamp(20px,2vw,26px);margin-bottom:8px}
.steps p{color:#4a5b69;font-size:15.5px}
.js .steps.rv{opacity:1;transform:none;transition:none}
.js .steps li{opacity:0}
.js .steps.is-in li{animation:nodein .7s cubic-bezier(.2,.7,.3,1) both}
.js .steps.is-in li:nth-child(2){animation-delay:.2s}.js .steps.is-in li:nth-child(3){animation-delay:.4s}
.js .steps.is-in li:nth-child(4){animation-delay:.6s}.js .steps.is-in li:nth-child(5){animation-delay:.8s}
.ptn{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ptn>div{border:1px solid #d5dee6;border-radius:16px;padding:32px 30px;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.ptn>div:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(47,95,130,.14);border-color:var(--blue-d)}
.ptn small{display:block;color:var(--blue-d);font-weight:800;font-size:14px;margin-bottom:10px}
.ptn b{display:block;font-size:clamp(22px,2.4vw,30px);line-height:1.35;letter-spacing:-.02em;margin-bottom:8px}
.ptn span{color:#4a5b69;font-size:15.5px}
.light .info dt,.white .info dt{color:var(--blue-d)}
.light .info,.white .info{border-top:2px solid #0b141d}
.light .info a:hover{color:var(--blue-d)}
.sec .tl.dk{margin-top:40px}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;margin-top:44px}
  .steps::before,.steps::after{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:none}
  .steps::after{transform:scaleY(0);transform-origin:50% 0}
  .steps.is-in::after{transform:scaleY(1)}
  .steps li{padding:0 0 34px 40px}
  .steps li::before{top:2px}
  .ptn{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.js .steps li{opacity:1;animation:none}.steps::after{transform:none;transition:none}}

/* 비교표: 항목 칸 고정, 나머지 두 칸 균등 분할 (v16) */
.tbl{table-layout:fixed;width:100%}
.tbl thead th:first-child,.tbl tbody th{width:22%}
.tbl thead th:not(:first-child){width:39%}
@media (max-width:900px){.tbl thead th:first-child,.tbl tbody th{width:130px}.tbl thead th:not(:first-child){width:auto}}

/* ---- 제목·본문 등장 통일 (v17) ---- */
.phero-body>*{animation:rise .8s cubic-bezier(.2,.7,.3,1) both}
.phero-body>:nth-child(2){animation-delay:.12s}
.phero-body>:nth-child(3){animation-delay:.24s}
.phero-body>:nth-child(4){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.phero-body>*{animation:none}}

/* ---- 문의 폼 (v18) ---- */
.contact-g{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
.cinfo .info{margin-top:0}
.cinfo .note{margin-top:24px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.cform .full{grid-column:1/-1}
.cform label>span{display:block;font-weight:700;font-size:15px;margin-bottom:8px;color:#0b141d}
.cform em{color:#d6453d;font-style:normal;margin-left:4px}
.cform input[type=text],.cform input[type=tel],.cform input[type=email],.cform select,.cform textarea{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid #cdd8e1;border-radius:10px;background:#fff;color:#0b141d;transition:border-color .15s,box-shadow .15s}
.cform textarea{resize:vertical;min-height:160px;line-height:1.6}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:var(--blue-d);box-shadow:0 0 0 3px rgba(47,95,130,.18)}
.cform .bad{border-color:#d6453d;box-shadow:0 0 0 3px rgba(214,69,61,.14)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{background:#f3f6f9;border-radius:12px;padding:22px 24px}
.chk{display:flex;gap:12px;align-items:center;font-weight:700;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--blue-d)}
.cdesc{margin-top:14px;color:#4a5b69;font-size:14.5px;list-style:none}
.cdesc li{padding:3px 0}
.cdesc b{display:inline-block;min-width:76px;color:#0b141d}
.cdesc2{margin-top:10px;color:#4a5b69;font-size:14px}
.cdesc2 a{color:var(--blue-d);text-decoration:underline}
.cact{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sbtn{background:#0b141d;color:#fff;border:0;border-radius:40px;padding:16px 48px;font:inherit;font-weight:800;font-size:17px;cursor:pointer;transition:background .2s,transform .2s}
.sbtn:hover{background:var(--blue-d);transform:translateY(-2px)}
.sbtn:disabled{opacity:.5;cursor:wait;transform:none}
.cmsg{font-weight:600;font-size:15px}
.cmsg.ok{color:var(--blue-d)}
.cmsg.err{color:#d6453d}
.cdone{background:#f3f6f9;border-radius:16px;padding:48px 40px}
.cdone h3{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.cdone p{color:#4a5b69}
.prose{max-width:820px}
.prose h2{font-size:22px;margin:40px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{color:#33414d}
@media (max-width:900px){.contact-g{grid-template-columns:1fr;gap:36px}.cform{grid-template-columns:1fr}}

/* ---- 비교도 순차 등장 (v19) ---- */
.js .diag.is-in svg>g .arw{animation:nudge 1.6s ease-in-out 2.2s infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.js .diag.is-in svg>g .arw{animation:none}}

/* ---- 구조도 단계별 등장 (v20) ---- */
.js .diag svg .rz{opacity:0}
.js .diag.is-in svg .rz{animation:lyin .6s cubic-bezier(.2,.7,.3,1) var(--ld,0s) both}
@keyframes lyin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .diag svg .cn{stroke-dasharray:38;stroke-dashoffset:38}
.js .diag svg .br{stroke-dasharray:960;stroke-dashoffset:960}
.js .diag.is-in svg .cn{animation:draw .45s ease-out var(--ld,0s) both}
.js .diag.is-in svg .br{animation:draw .9s ease-out var(--ld,0s) both}
@keyframes draw{to{stroke-dashoffset:0}}
.js .diag svg .join{opacity:0}
.js .diag.is-in svg .join{animation:join 6s ease-in-out var(--ld,0s) infinite}
@keyframes join{0%,8%{opacity:0}28%,72%{opacity:1}92%,100%{opacity:0}}
.js .diag svg .pk{opacity:0}
.js .diag.is-in svg .pk{animation:pk 2.4s linear var(--ld,0s) infinite}
@keyframes pk{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(34px)}}
@media (prefers-reduced-motion:reduce){
  .js .diag svg .rz{opacity:1;animation:none}
  .js .diag svg .cn,.js .diag svg .br{stroke-dashoffset:0;animation:none}
  .js .diag svg .join,.js .diag svg .pk{animation:none;opacity:0}
}

/* ---- 단계 점: 속이 찬 점 + 퍼지는 고리 (v21) ---- */
.steps li::before{left:2px;top:5px;width:18px;height:18px;background:var(--blue-d);border:3px solid #fff;box-shadow:0 0 0 2px var(--blue-d)}
.steps li::after{content:"";position:absolute;left:2px;top:5px;width:18px;height:18px;border-radius:50%;border:2px solid var(--blue-d);opacity:0;pointer-events:none}
.js .steps li::before{transform:scale(0)}
.js .steps.is-in li::before{animation:dotpop .5s cubic-bezier(.3,1.6,.5,1) both}
.js .steps.is-in li::after{animation:ring 2.8s ease-out infinite}
.js .steps.is-in li:nth-child(1)::before{animation-delay:.25s}.js .steps.is-in li:nth-child(1)::after{animation-delay:1.2s}
.js .steps.is-in li:nth-child(2)::before{animation-delay:.45s}.js .steps.is-in li:nth-child(2)::after{animation-delay:1.7s}
.js .steps.is-in li:nth-child(3)::before{animation-delay:.65s}.js .steps.is-in li:nth-child(3)::after{animation-delay:2.2s}
.js .steps.is-in li:nth-child(4)::before{animation-delay:.85s}.js .steps.is-in li:nth-child(4)::after{animation-delay:2.7s}
.js .steps.is-in li:nth-child(5)::before{animation-delay:1.05s}.js .steps.is-in li:nth-child(5)::after{animation-delay:3.2s}
@keyframes dotpop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.8);opacity:0}}
@media (max-width:900px){.steps li::before,.steps li::after{left:-1px;top:2px}}
@media (prefers-reduced-motion:reduce){.js .steps li::before{transform:none;animation:none}.steps li::after{display:none}}

/* 적용 분야 흐르는 글씨: 위아래 긴 선 제거 (v22) */
.marq,:is(.light,.white) .marq{border:0}

/* ---- 대체 솔루션 섹션 (v23) ---- */
.feat-g{grid-template-columns:1fr 1.2fr 1fr;gap:40px}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.sub-h{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:72px}
.sub-h+.steps{margin-top:36px}
.sec .sub-lead{max-width:860px}
.diag+.sub-lead{margin-top:36px}
@media (max-width:1100px){.feat-g{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.feat-g{grid-template-columns:1fr}.steps.s4{grid-template-columns:1fr}}

/* ---- 뉴스 & 이벤트 (v24) ---- */
.nlist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ncard a{display:block;border:1px solid #d5dee6;border-radius:18px;overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s;height:100%}
.ncard a:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(47,95,130,.16);border-color:var(--blue-d)}
.nimg{aspect-ratio:16/10;overflow:hidden;background:#e6eef4}
.nimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.ncard a:hover .nimg img{transform:scale(1.05)}
.nbody{padding:26px 28px 30px}
.nmeta{display:flex;align-items:center;gap:12px;color:#5b6b78;font-size:14.5px;font-weight:600}
.ncat{background:var(--blue-d);color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;padding:3px 10px;border-radius:20px}
.ncard h3{font-size:clamp(19px,1.9vw,24px);line-height:1.45;letter-spacing:-.02em;margin:14px 0 10px}
.nsum{color:#4a5b69;font-size:15.5px}
.nmore{display:inline-block;margin-top:16px;color:var(--blue-d);font-weight:800}
.post{max-width:900px}
.post-h{font-size:clamp(34px,6vw,84px)!important}
.post-t{font-size:clamp(26px,3.4vw,42px);line-height:1.4;letter-spacing:-.03em;margin:18px 0 32px}
.ph{margin:0;overflow:hidden;border-radius:16px;background:#e6eef4}
.ph img{width:100%;display:block}
.prose-n{margin-top:36px}
.prose-n p{font-size:18px;line-height:1.9;color:#33414d}
.prose-n p+p{margin-top:18px}
.prose-n b{color:#0b141d}
.ev{margin-top:44px}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
@media (max-width:900px){.nlist,.gal{grid-template-columns:1fr}}

/* 연락처 목록 아래 버튼 간격 (v25) */
.info+.tl{margin-top:48px}

/* ---- 협력 제품: 큰 카드 1 + 작은 카드 3 (v26) ---- */
.ptn{grid-template-columns:1.15fr 1fr;grid-template-rows:repeat(3,auto);gap:18px}
.ptn>div{display:flex;flex-direction:column;justify-content:center;border-radius:20px;padding:30px 32px;position:relative;overflow:hidden}
.ptn>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue-d);opacity:0;transition:opacity .25s}
.ptn>div:hover::before{opacity:1}
.ptn .pf{grid-row:1/4;background:linear-gradient(150deg,#2f5f82 0%,#1d4563 100%);border:0;color:#fff;padding:44px 44px;justify-content:flex-end;min-height:420px}
.ptn .pf::before{display:none}
.ptn .pf::after{content:"HCI";position:absolute;right:-8px;top:-18px;font-size:clamp(120px,16vw,220px);font-weight:900;letter-spacing:-.06em;color:rgba(255,255,255,.07);line-height:1;pointer-events:none}
.ptn .pf small{color:#9cc6e0}
.ptn .pf b{font-size:clamp(34px,4vw,54px);margin-bottom:12px}
.ptn .pf span{color:#d5e6f2;font-size:17px}
.ptn .pf:hover{box-shadow:0 18px 40px rgba(29,69,99,.35)}
@media (max-width:900px){.ptn{grid-template-columns:1fr}.ptn .pf{grid-row:auto;min-height:260px}}

/* ---- 전환 단계: 계단형 카드 (v27) ---- */
.stairs{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end;margin-top:36px}
.stairs li{position:relative;border-radius:18px;padding:26px 26px 30px;background:#f3f6f9;border-top:5px solid var(--c);transition:transform .25s,box-shadow .25s}
.stairs li:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(47,95,130,.16)}
.stairs li:nth-child(1){--c:#bcd6e8;min-height:230px}
.stairs li:nth-child(2){--c:#8fc2e0;min-height:290px}
.stairs li:nth-child(3){--c:#4f8fb8;min-height:350px}
.stairs li:nth-child(4){--c:#2f5f82;min-height:410px;background:#2f5f82;color:#fff}
.stairs .n{display:block;font-size:clamp(44px,5vw,72px);font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(47,95,130,.22);margin-bottom:22px}
.stairs li:nth-child(4) .n{color:rgba(255,255,255,.35)}
.stairs h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px}
.stairs p{color:#4a5b69;font-size:15.5px}
.stairs li:nth-child(4) p{color:#d5e6f2}
.js .stairs.rv{opacity:1;transform:none;transition:none}
.js .stairs li{opacity:0}
.js .stairs.is-in li{animation:stairin .8s cubic-bezier(.2,.7,.3,1) both}
.js .stairs.is-in li:nth-child(2){animation-delay:.18s}.js .stairs.is-in li:nth-child(3){animation-delay:.36s}.js .stairs.is-in li:nth-child(4){animation-delay:.54s}
@keyframes stairin{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
@media (max-width:900px){.stairs{grid-template-columns:1fr;align-items:stretch}.stairs li,.stairs li:nth-child(n){min-height:0}}
@media (prefers-reduced-motion:reduce){.js .stairs li{opacity:1;animation:none}}

/* ---- 적용 분야 페이지 (v29) ---- */
.uc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.uc-cards a{display:flex;flex-direction:column;gap:8px;border:1px solid #d5dee6;border-radius:18px;padding:26px 26px 28px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.uc-cards a:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(47,95,130,.16);border-color:var(--blue-d)}
.uc-cards .n{font-size:14px;font-weight:800;color:var(--blue-d)}
.uc-cards b{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.uc-cards em{font-style:normal;color:#4a5b69;font-size:15.5px}
.uc-g{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.uc-g.rev .uc-art{order:-1}
.uc-q{font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.5;letter-spacing:-.02em;margin-bottom:22px;color:#0b141d}
.uc-ul{list-style:none}
.uc-ul li{position:relative;padding:14px 0 14px 28px;border-top:1px solid #d5dee6;color:#33414d;font-size:16.5px}
.uc-ul li:last-child{border-bottom:1px solid #d5dee6}
.uc-ul li::before{content:"";position:absolute;left:4px;top:24px;width:10px;height:10px;border-radius:50%;background:var(--blue-d)}
.uc-art{background:#fff;border:1px solid #d5dee6;border-radius:22px;padding:22px}
.light .uc-art{background:#fff}
.white .uc-art{background:#f3f6f9;border-color:#e1e8ee}
.uc-art svg{display:block;width:100%;height:auto}
.js .uc-art.rv{opacity:1;transform:none;transition:none}
.js .uc-art svg>g{opacity:0}
.js .uc-art.is-in svg>g{animation:nodein .5s ease both}
.js .uc-art svg .rz{opacity:0}
.js .uc-art.is-in svg .rz{animation:lyin .6s cubic-bezier(.2,.7,.3,1) var(--ld,0s) both}
.js .uc-art svg .cn{stroke-dasharray:140;stroke-dashoffset:140}
.js .uc-art.is-in svg .cn{animation:draw .6s ease-out var(--ld,0s) both}
.js .uc-art.is-in svg .flow{animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.js .uc-art.is-in svg .pl{animation:plp 2.2s ease-in-out var(--ld,0s) infinite}
@keyframes plp{0%,100%{opacity:1}50%{opacity:.35}}
.js .uc-art svg .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.08)}
.js .uc-art.is-in svg .bar{animation:grow .9s cubic-bezier(.2,.7,.3,1) var(--ld,0s) both}
@keyframes grow{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
@media (max-width:900px){.uc-cards{grid-template-columns:1fr}.uc-g{grid-template-columns:1fr;gap:32px}.uc-g.rev .uc-art{order:0}}
@media (prefers-reduced-motion:reduce){
  .js .uc-art svg>g,.js .uc-art svg .rz{opacity:1;animation:none}
  .js .uc-art svg .cn{stroke-dashoffset:0;animation:none}
  .js .uc-art svg .bar{transform:none;animation:none}
  .js .uc-art svg .flow,.js .uc-art svg .pl{animation:none}
}

.rows .lnk{display:inline-block;margin-top:10px;color:var(--blue-d);font-weight:800}
.rows .lnk:hover{text-decoration:underline}

/* ---- 점검 후 보정 (v34) ---- */
.hero h2.hl{font-size:clamp(34px,5.6vw,76px);line-height:1.22;letter-spacing:-.03em;font-weight:800;margin-bottom:34px}
@media (max-width:900px){
  .popart{top:76px;width:60vw;right:4vw}
  .phero{padding-top:calc(76px + 60vw + 24px)}
  .diag::after{content:"← 옆으로 밀어서 보세요";display:block;position:sticky;left:0;width:max-content;max-width:100%;padding:10px 4px 0;font-size:13px;font-weight:600;color:#5b6b78}
}

/* ---- 솔루션 하위 메뉴 (v36) ---- */
.dd{position:relative}
.dd::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px}
.dd-m{position:absolute;top:calc(100% + 12px);left:50%;min-width:190px;padding:10px;background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .2s,transform .2s,visibility .2s;z-index:70}
.dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnb .dd-m a,.hd.solid .gnb .dd-m a{display:block;padding:12px 18px;border-radius:10px;color:#0b141d;font-weight:700;font-size:15.5px;white-space:nowrap;background:none}
.gnb .dd-m a:hover,.hd.solid .gnb .dd-m a:hover{background:#eef2f6;color:var(--blue-d)}
.gnb .dd-m a.on,.hd.solid .gnb .dd-m a.on{background:#e6eef4;color:var(--blue-d)}
.dd-t::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.dd:hover .dd-t::after,.dd:focus-within .dd-t::after{transform:rotate(225deg) translate(-2px,-2px)}
@media (max-width:900px){
  .dd::after,.dd-t::after{display:none}
  .dd-m,.dd:hover .dd-m,.dd:focus-within .dd-m{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;padding:0 0 6px 18px;min-width:0}
  .gnb .dd-m a,.hd.solid .gnb .dd-m a{color:inherit;font-size:19px;padding:14px 0;border-bottom:1px solid var(--line);border-radius:0;opacity:.85}
  .hd.solid .gnb .dd-m a{border-bottom-color:#e1e8ee;color:#0b141d}
  .gnb .dd-m a:hover,.gnb .dd-m a.on,.hd.solid .gnb .dd-m a:hover,.hd.solid .gnb .dd-m a.on{background:none;color:var(--blue)}
}

/* ---- 메뉴 보정 (v42): 솔루션 정렬 / 스크롤 후 메뉴바는 흰색, 현재 메뉴 알약만 검정 ---- */
.gnb{align-items:center}
.dd{display:flex;align-items:center}
.dd-t::after{display:none}
.hd.solid{background:rgba(255,255,255,.96);border-bottom:1px solid #e1e8ee}
.hd.solid .brand img{filter:none}
.hd.solid .gnb a{color:#0b141d}
.hd.solid .gnb a:hover{background:#eef2f6}
.hd.solid .gnb a.cur{background:#0b141d;color:#fff}
.hd.solid .menu-btn span{background:#0b141d}
@media (max-width:900px){
  .hd.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.97)}
  .gnb{align-items:stretch;background:#050a10}
  .dd{display:block}
  .hd.solid .gnb{background:#fff}
  .hd.solid .gnb a{border-bottom-color:#e1e8ee}
  .hd.solid .gnb a.cur{background:none;color:var(--blue-d)}
  .hd.solid .gnb .dd-m a{color:#0b141d;border-bottom-color:#e1e8ee}
  .hd.solid .gnb .dd-m a:hover,.hd.solid .gnb .dd-m a.on{color:var(--blue-d)}
}

/* 흰 메뉴바에서 마우스를 올리면 알약이 검정 (v43) */
.hd.solid .gnb a:hover,.hd.solid .dd:hover .dd-t,.hd.solid .dd:focus-within .dd-t{background:#0b141d;color:#fff}
@media (max-width:900px){
  .hd.solid .gnb a:hover{background:none;color:var(--blue-d)}
  .hd.solid .dd:hover .dd-t,.hd.solid .dd:focus-within .dd-t{background:none;color:var(--blue-d)}
}

/* ---- 솔루션 하위 메뉴: 전체 너비 패널 (v44) ---- */
.hd-in{position:relative}
.gnb{align-self:stretch}
.dd{position:static;align-self:stretch}
.dd::after{display:none}
.dd-m{left:0;right:0;top:100%;min-width:0;border-radius:0;transform:translateY(-8px);padding:34px max(var(--pad),calc((100vw - 1280px)/2 + var(--pad))) 40px;display:flex;gap:18px;justify-content:flex-start;background:#fff;border-top:1px solid #e1e8ee;box-shadow:0 22px 34px rgba(0,0,0,.10)}
.dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{transform:none}
.hd .gnb .dd-m a,.hd.solid .gnb .dd-m a{display:flex;flex-direction:column;gap:6px;position:relative;min-width:300px;padding:22px 64px 22px 28px;border-radius:18px;background:#f3f6f9;color:#0b141d;white-space:normal}
.hd .gnb .dd-m a b,.hd.solid .gnb .dd-m a b{font-size:21px;letter-spacing:-.02em;font-weight:800}
.hd .gnb .dd-m a span,.hd.solid .gnb .dd-m a span{font-size:14.5px;font-weight:600;color:#5b6b78;transition:color .2s}
.hd .gnb .dd-m a::after,.hd.solid .gnb .dd-m a::after{content:"→";position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700;transition:transform .2s}
.hd .gnb .dd-m a:hover,.hd.solid .gnb .dd-m a:hover{background:#0b141d;color:#fff}
.hd .gnb .dd-m a:hover span,.hd.solid .gnb .dd-m a:hover span{color:#b9c6d1}
.hd .gnb .dd-m a:hover::after,.hd.solid .gnb .dd-m a:hover::after{transform:translate(6px,-50%)}
.hd .gnb .dd-m a.on,.hd.solid .gnb .dd-m a.on{background:#e6eef4;color:var(--blue-d)}
.hd .gnb .dd-m a.on:hover,.hd.solid .gnb .dd-m a.on:hover{background:#0b141d;color:#fff}
@media (max-width:900px){
  .hd-in{position:static}
  .dd{align-self:auto}
  .dd-m,.dd:hover .dd-m,.dd:focus-within .dd-m{position:static;display:block;padding:0 0 6px 18px;box-shadow:none;border:0;background:none;transform:none;opacity:1;visibility:visible}
  .hd .gnb .dd-m a,.hd.solid .gnb .dd-m a{display:block;min-width:0;padding:14px 0;border-radius:0;background:none;color:inherit;font-size:19px}
  .hd.solid .gnb .dd-m a{color:#0b141d}
  .hd .gnb .dd-m a b,.hd.solid .gnb .dd-m a b{font-size:19px;font-weight:700}
  .hd .gnb .dd-m a span,.hd .gnb .dd-m a::after,.hd.solid .gnb .dd-m a::after{display:none}
  .hd .gnb .dd-m a:hover,.hd .gnb .dd-m a.on,.hd.solid .gnb .dd-m a:hover,.hd.solid .gnb .dd-m a.on{background:none;color:var(--blue)}
  .hd.solid .gnb .dd-m a:hover,.hd.solid .gnb .dd-m a.on{color:var(--blue-d)}
}

/* ---- 솔루션 하위 메뉴: 알약 바로 아래 짧은 세로 목록 (v45) ---- */
@media (min-width:901px){
  .dd{position:relative}
  .dd::after{display:none}
  .dd-m{left:50%;right:auto;top:calc(100% - 16px);width:max-content;min-width:170px;display:block;padding:8px;border:0;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.18);transform:translate(-50%,8px)}
  .dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{transform:translate(-50%,0)}
  .hd .gnb .dd-m a,.hd.solid .gnb .dd-m a{display:block;min-width:0;padding:11px 20px;border-radius:10px;background:none;color:#0b141d;font-size:15px;font-weight:700;white-space:nowrap}
  .hd .gnb .dd-m a::after,.hd.solid .gnb .dd-m a::after{display:none}
  .hd .gnb .dd-m a:hover,.hd.solid .gnb .dd-m a:hover,.hd .gnb .dd-m a.on:hover,.hd.solid .gnb .dd-m a.on:hover{background:#0b141d;color:#fff}
  .hd .gnb .dd-m a.on,.hd.solid .gnb .dd-m a.on{background:#e6eef4;color:var(--blue-d)}
}

/* ---- 첫 화면 배경: 은은한 빛 (v46) ---- */
.hero-cv{background:radial-gradient(55% 75% at 74% 38%,rgba(70,130,185,.26),rgba(0,0,0,0) 70%),radial-gradient(45% 55% at 16% 78%,rgba(47,95,130,.28),rgba(0,0,0,0) 72%),#02060b}
@media (max-width:900px){.hero-cv{background:radial-gradient(70% 55% at 70% 30%,rgba(70,130,185,.26),rgba(0,0,0,0) 70%),radial-gradient(70% 45% at 20% 80%,rgba(47,95,130,.28),rgba(0,0,0,0) 72%),#02060b}}

/* ---- 하위 페이지 첫 화면을 메인과 같은 느낌으로 (v47) ---- */
@media (min-width:901px){
  .phero{height:86vh;min-height:560px}
  .phero-body{position:absolute;left:var(--pad);right:var(--pad);bottom:96px;width:auto;max-width:none;margin:0;padding:0}
  .phero h1,.phero h1.post-h{font-size:clamp(34px,5.6vw,76px)!important;line-height:1.22;letter-spacing:-.03em;font-weight:800;margin-bottom:22px}
  .phero-body h1,.phero-sub,.anchors,.phero-body .eyebrow{max-width:62%}
  .phero-sub{margin-bottom:30px}
}

/* POPCON HCI 첫 화면: 팝콘 그림 크게, 오른쪽으로 (v48) */
@media (min-width:901px){
  .popart{width:min(58vw,820px);right:-5vw;bottom:-20px}
}
@media (min-width:901px){
  .popart{width:min(60vw,840px,calc(86vh - 60px));right:-5vw;bottom:-20px}
  .popart .burst{transform:scale(.85);transform-origin:260px 330px}
}
@media (min-width:901px){.popart{right:-1vw}}
@media (min-width:901px){.popart{right:3vw}}
@media (min-width:901px) and (max-width:1280px){.popart{width:min(48vw,calc(86vh - 60px));right:1vw}}

/* 솔루션 하위 메뉴: 지금 보는 페이지도 색 없이 흰 배경·검정 글씨 (v53) */
@media (min-width:901px){
  .hd .gnb .dd-m a.on,.hd.solid .gnb .dd-m a.on{background:none;color:#0b141d}
}
@media (max-width:900px){
  .hd .gnb .dd-m a.on{background:none;color:inherit}
  .hd.solid .gnb .dd-m a.on{background:none;color:#0b141d}
}

/* FAQ (자주 묻는 질문) */
.faq-list{max-width:880px}
.faq-list details{border-bottom:1px solid #dbe3ea;padding:20px 4px}
.faq-list summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;padding-right:32px;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:-2px;font-weight:400;font-size:24px;color:var(--blue-d)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list p{margin-top:12px;color:#44525e;line-height:1.75;font-size:15.5px}