/* ============================================================================
   바로빌 개발자센터 · 제품/솔루션 랜딩 공통 스타일 (v2.1 · 2026-09-28)
   사용: index.html + products/*.html
   원래 메인 페이지 <style> 에 있던 내용을 그대로 옮기고, 끝에 상세 페이지용을 덧붙였다.
   ============================================================================ */
  :root{
  --navy:#08172b; --navy2:#0b1e38; --navy3:#12315b;
  --blue:#2f6bff; --blue-d:#1f4fd8; --blue-l:#eef3ff; --sky:#7fb0ff; --sky2:#9db8ff;
  --mint:#2ed3ac;
  --ink:#182742; --gray:#5b6b83; --gray-l:#8e9bad;
  --line:#e6ebf3; --bg:#f6f8fc; --white:#fff;
  --r:20px;
  --sh:0 4px 24px rgba(14,35,70,.06);
  --sh-h:0 18px 48px rgba(14,35,70,.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:86px;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',Arial,sans-serif;
  word-break:keep-all; overflow-wrap:break-word; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; line-height:1.72; font-size:16px;
}
h1,h2,h3,h4,summary,.pk h3,.trig h3,.pt-card h3,.case .co,.stp h4,.plan h3,.pr3 b,.tbox h3,.spec h3{text-wrap:balance;}
p,.sec-lead,.desc,.ans,.ti .v,.stp p,.pr3 span,.plan p,.disclaimer,.devnote,.formbox .sub,.prep .v,.case .eff{text-wrap:pretty;}
.nb{white-space:nowrap;}
br.pc{display:inline;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px;}

/* ══ 스크롤 리빌 ══ */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.js .rv.on{opacity:1; transform:none;}
.js .rv.d1{transition-delay:.08s;} .js .rv.d2{transition-delay:.16s;}
.js .rv.d3{transition-delay:.24s;} .js .rv.d4{transition-delay:.32s;} .js .rv.d5{transition-delay:.4s;}

/* ══ 내비 ══ */
.gnb{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
     border-bottom:1px solid rgba(230,235,243,.9);}
.gnb .wrap{display:flex; align-items:center; height:72px; gap:30px;}
.logo{font-weight:800; font-size:17.5px; letter-spacing:-.03em; color:var(--navy2); white-space:nowrap; display:flex; align-items:center; gap:9px;}
.logo .dot{width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--sky));
           display:grid; place-items:center; box-shadow:0 4px 12px rgba(47,107,255,.35);}
.logo .dot::after{content:""; width:9px; height:9px; border-radius:3px; background:#fff;}
.gnb nav{display:flex; align-items:center; gap:26px; margin-left:auto; font-size:15px; font-weight:600; color:var(--gray);}
.gnb nav > a:not(.btn),.gnb .nav-r > a:not(.btn){position:relative; padding:4px 0;}
.gnb nav > a:not(.btn)::after,.gnb .nav-r > a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--blue); transition:right .3s;}
.gnb nav > a:not(.btn):hover,.gnb .nav-r > a:not(.btn):hover{color:var(--blue);} .gnb nav > a:not(.btn):hover::after,.gnb .nav-r > a:not(.btn):hover::after{right:0;}
.gnb nav a.ext{color:var(--gray-l); font-weight:600; display:inline-flex; align-items:center; gap:5px;}
.gnb nav a.ext .aw{font-size:11.5px; opacity:.75;}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--blue),var(--mint)); transition:width .1s linear;}

/* ══ v2 · 메가메뉴 (제품 / 솔루션) ══ */
.gnb .wrap{position:relative;}
.gnb nav{margin-left:40px; flex:1;}
.gnb nav .nav-r{margin-left:auto; display:flex; align-items:center; gap:26px;}
.dd{position:static;}
.dd-t{display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:4px 0; cursor:pointer;
      font:inherit; font-size:15px; font-weight:600; color:var(--gray); transition:color .2s;}
.dd-t::after{content:""; width:6px; height:6px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
             transform:rotate(45deg) translateY(-2px); transition:transform .2s; opacity:.7;}
.dd:hover .dd-t,.dd.open .dd-t{color:var(--blue);}
.dd.open .dd-t::after{transform:rotate(-135deg) translateY(-1px);}
.mega{position:absolute; top:100%; left:50%; width:min(1140px, calc(100vw - 40px));
      background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(14,35,70,.16);
      overflow:hidden; opacity:0; visibility:hidden; transform:translate(-50%,8px);
      transition:opacity .2s, transform .2s, visibility 0s linear .2s; z-index:80; font-weight:400;}
.mega::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px;} /* 호버 다리 */
.dd.open .mega{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .2s, transform .2s;}
.mg-body{display:grid; grid-template-columns:3.1fr .9fr;}
.mg-main{padding:26px 28px 22px;}
.mg-main .mg-h{font-size:17px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.mg-main .mg-s{font-size:13.5px; color:var(--gray); margin-top:3px;}
.mg-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:6px 14px; margin-top:16px;}
.mg-k{font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--gray-l); margin:0 0 6px 12px;}
.mg-i{display:block; padding:10px 12px; border-radius:11px; border:1px solid transparent; transition:.18s;}
.mg-i b{display:block; font-size:15px; font-weight:800; color:var(--navy2); letter-spacing:-.025em; line-height:1.4;}
.mg-i span{display:block; font-size:12.8px; color:var(--gray); line-height:1.5; margin-top:2px;}
.mg-i:hover,.mg-i:focus-visible{background:var(--bg); border-color:var(--line); outline:none;}
.mg-i:hover b{color:var(--blue-d);}
.mg-i .q{display:inline-block; font-size:10.5px; font-weight:800; color:#a9670f; background:rgba(255,182,72,.18);
         border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:2px; letter-spacing:0;}
.mg-side{background:#f7f9f3; border-left:1px solid var(--line); padding:26px 26px 22px;}
.mg-side.blue{background:#f3f7ff;}
.mg-side .mg-h{display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.mg-side .pill{font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--blue); border-radius:99px; padding:3px 9px;}
.mg-side .mg-s{font-size:13.5px; color:var(--gray); margin-top:3px;}
.mg-side ul{list-style:none; padding:0; margin:18px 0 0;}
.mg-side li{position:relative; padding-left:16px; font-size:13.8px; color:var(--ink); line-height:1.6; margin-bottom:9px;}
.mg-side li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:.6;}
.mg-side li small{color:var(--gray-l); font-size:12px;}
.mg-side .btn{margin-top:10px; padding:12px 20px; font-size:14.5px; border-radius:11px;}
.mg-side .cap2{font-size:12px; color:var(--gray-l); margin-top:9px;}
.mg-band{position:relative; border-top:1px solid var(--line); background:#fbfcfe; padding:26px 28px 18px;
         display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.mg-band.four{grid-template-columns:repeat(4,1fr);}
.mg-band .lbl{position:absolute; top:0; left:50%; transform:translate(-50%,-50%); white-space:nowrap;
              font-size:11.5px; font-weight:800; color:var(--blue-d); background:#fff; border:1px solid #cfdcff; border-radius:99px; padding:3px 12px;}
.mg-band a{display:flex; gap:11px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; transition:.18s;}
.mg-band a:hover{border-color:var(--sky2); box-shadow:var(--sh);}
.mg-band a i{flex:0 0 auto; width:28px; height:28px; border-radius:8px; background:var(--blue-l); display:grid; place-items:center;
             font-style:normal; font-size:13px; font-weight:900; color:var(--blue);}
.mg-band a b{display:block; font-size:14.5px; font-weight:800; color:var(--navy2); letter-spacing:-.02em;}
.mg-band a span{display:block; font-size:12.5px; color:var(--gray); line-height:1.5; margin-top:1px;}
.mg-foot{display:flex; align-items:center; gap:14px; padding:15px 28px; border-top:1px solid var(--line);
         background:linear-gradient(90deg,#eef3ff,#fff); border-left:4px solid var(--blue); transition:.18s;}
.mg-foot:hover{background:linear-gradient(90deg,#e3ecff,#fff);}
.mg-foot .pill{flex:0 0 auto; font-size:11px; font-weight:800; color:#fff; background:var(--blue); border-radius:99px; padding:4px 11px;}
.mg-foot b{font-size:14.5px; font-weight:800; color:var(--navy2);}
.mg-foot span{display:block; font-size:12.8px; color:var(--gray);}
.mg-foot .ar{margin-left:auto; color:var(--blue); font-weight:800;}
/* 솔루션 — 두 트랙 컬럼 */
.mg-two{display:grid; grid-template-columns:1fr 1fr;}
.mg-two > div{padding:24px 26px 20px;}
.mg-two > div + div{border-left:1px solid var(--line); background:#f8faff;}
.mg-tr{display:flex; align-items:center; gap:9px; margin:0 0 4px 12px;}
.mg-tr .tg{font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--blue); background:var(--blue-l); border-radius:6px; padding:3px 8px;}
.mg-tr b{font-size:16px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.mg-two .mg-s{font-size:12.8px; color:var(--gray); margin:0 0 10px 12px;}

/* 모바일 햄버거 · 드로어 */
.menu-btn{display:none; margin-left:auto; width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:#fff; cursor:pointer;
          align-items:center; justify-content:center; flex-direction:column; gap:4px;}
.menu-btn i{display:block; width:18px; height:2px; background:var(--navy2); border-radius:2px; transition:.2s;}
.gnb.m-open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.gnb.m-open .menu-btn i:nth-child(2){opacity:0;}
.gnb.m-open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mnav{display:none;}

/* ══ 버튼 ══ */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; border-radius:13px;
     padding:16px 28px; font-size:16px; letter-spacing:-.02em; border:1.5px solid transparent;
     transition:transform .2s, box-shadow .2s, background .2s; cursor:pointer; font-family:inherit;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--blue),#4a7fff); color:#fff; box-shadow:0 8px 24px rgba(47,107,255,.34);}
.btn-primary:hover{box-shadow:0 14px 32px rgba(47,107,255,.44);}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.32); backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.16);}
.btn-line{background:#fff; color:var(--blue); border-color:#cfdcff;}
.btn-line:hover{background:var(--blue-l);}
.btn-cta{background:linear-gradient(135deg,#ff5f18 0%,#ff8a1f 100%); color:#fff !important; padding:15px 30px !important; font-size:16.5px; font-weight:800; border-radius:14px; margin-left:8px; animation:ctaGlow 2.6s ease-in-out infinite;}
.btn-cta:hover{background:linear-gradient(135deg,#f25510 0%,#ff7d0a 100%); box-shadow:0 16px 34px rgba(255,95,24,.58) !important;}
@keyframes ctaGlow{0%,100%{box-shadow:0 8px 22px rgba(255,95,24,.40);} 50%{box-shadow:0 10px 32px rgba(255,95,24,.66);}}
.btn-sm{padding:11px 20px; font-size:14.5px; border-radius:10px;}
.btn .ar{transition:transform .2s;} .btn:hover .ar{transform:translateX(3px);}

/* ══ 히어로 ══ */
.hero{position:relative; overflow:hidden; color:#fff;
      background:linear-gradient(150deg,#08172b 0%,#0e2748 42%,#173a6b 78%,#1c4682 100%);}
.hero::before,.hero::after{content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none;}
.hero::before{width:520px; height:520px; background:#2f6bff; top:-190px; right:-120px; animation:drift 18s ease-in-out infinite;}
.hero::after{width:420px; height:420px; background:#12b6a0; bottom:-220px; left:-140px; opacity:.28; animation:drift 22s ease-in-out infinite reverse;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,34px) scale(1.12);}}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:44px;
            align-items:center; padding-top:80px; padding-bottom:84px;}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.8px; font-weight:800; letter-spacing:.02em;
         color:var(--sky); background:rgba(127,176,255,.12); border:1px solid rgba(127,176,255,.24);
         padding:7px 14px; border-radius:99px;}
.eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--mint); animation:blink 2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(46,211,172,.6);} 50%{opacity:.5; box-shadow:0 0 0 7px rgba(46,211,172,0);}}
.hero h1{font-size:45px; line-height:1.3; font-weight:800; letter-spacing:-.04em; margin:22px 0 0;}
.hero h1 .g{background:linear-gradient(100deg,#7fb0ff,#8ef0da); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:18px; line-height:1.75; color:#b9cbe6; margin:20px 0 0; max-width:31em;}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.devnote{margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:14.5px; color:#93aac9;}
.devnote a{color:var(--sky); font-weight:700; white-space:nowrap;}
.dn-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:15px;}
.dn-links a{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:#d3e2f8; white-space:nowrap;
           background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.19); border-radius:10px; padding:9px 14px; transition:.2s;}
.dn-links a:hover{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.36); transform:translateY(-2px);}
.dn-links a .aw{font-size:11.5px; opacity:.75;}
.hero-art{display:grid; place-items:center;}
.hero-art svg{width:100%; max-width:560px; height:auto;}

/* ══ 일러스트 공통 애니메이션 ══ */
.dash{stroke-dasharray:7 7; animation:flow 1.1s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-28;}}
.pkt{animation:pkt 2.6s cubic-bezier(.45,0,.55,1) infinite;}
.pkt.b{animation-delay:.55s;} .pkt.c{animation-delay:1.1s;} .pkt.d{animation-delay:1.65s;}
@keyframes pkt{0%{opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{opacity:0;}}
.fl{animation:fl 4s ease-in-out infinite;} .fl2{animation:fl 4.6s ease-in-out .4s infinite;} .fl3{animation:fl 5.2s ease-in-out .8s infinite;}
@keyframes fl{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
.hub{animation:fl 3.4s ease-in-out infinite;}
.pulse{animation:pl 2.4s ease-in-out infinite;} .pulse.b{animation-delay:.9s;}
@keyframes pl{0%,100%{opacity:.3;} 50%{opacity:1;}}
.draw{stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.6s ease-out .25s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

/* ══ 커서 3D 틸트 ══ */
.tilt{perspective:1100px; perspective-origin:50% 44%;}
.tilt svg{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
          transition:transform .5s cubic-bezier(.2,.7,.3,1); will-change:transform;}
.tilt.tilting svg{transition:transform .1s linear;}

/* ══ 섹션 공통 ══ */
section{padding:92px 0; position:relative;}
section.alt{background:#fff;}
.shead{max-width:56em;}            /* 46em(736px)이면 sec-lead 가 2줄로 접혔다 */
.step-tag{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:.12em;
          color:var(--blue); background:var(--blue-l); padding:8px 16px; border-radius:99px;}
.step-tag b{background:var(--blue); color:#fff; padding:0 8px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:11px; letter-spacing:.08em;}
h2{font-size:38px; line-height:1.34; font-weight:800; letter-spacing:-.04em; margin:20px 0 0; color:var(--navy2);}
h2 .g{background:linear-gradient(100deg,var(--blue),#22b6d8); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sec-lead{font-size:17px; color:var(--gray); margin:14px 0 0; line-height:1.82;
          max-width:50em;}      /* 42em=714px < 최장 리드 자연폭 782px 였다 */
/* 소제목 — 01·02·03 번호 + 크기 3단 차등으로 트랙 안에 위계를 만든다.
   전부 같은 23px 이던 탓에 「설득 핵심(02)」이 병렬로 읽혔다. */
.subhead{margin-top:44px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.subhead .no{flex:0 0 auto; font-size:13px; font-weight:900; letter-spacing:.08em;
             color:var(--sky2); font-variant-numeric:tabular-nums;}
.subhead b{font-size:20px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.subhead span{font-size:14.5px; color:var(--gray);}
.subhead.key{margin-top:0;}
.subhead.key .no{font-size:16px; color:var(--blue);}
.subhead.key b{font-size:30px;}
.subhead.key span{font-size:15.5px;}
.darktrack .subhead .no{color:var(--sky);}
.darktrack .subhead.key .no{color:#9fc4ff;}

/* 02 블록 — 색 밴드로 「여기가 주인공」을 표시 */
.keyband{margin-top:46px; border-radius:28px; padding:30px 34px 34px;
         background:linear-gradient(180deg,#e9f0ff 0%,rgba(233,240,255,.28) 100%);
         border:1px solid #d8e5ff;}
/* 다크밴드 위에서는 밴드·키밴드·타일이 모두 네이비라 면 대비가 1.17 까지 떨어졌다.
   키밴드 배경을 빼 겹을 하나 줄이고, 타일만 띄운다 (1.17 → 1.61) */
.darktrack .keyband{border-color:rgba(127,176,255,.16); background:none;}

/* 03 블록 — 증거를 한 덩어리로 (레퍼런스 + 레거시) */
.proof{display:grid; gap:12px; margin-top:22px;}
.proof .ref-main,.proof .devbar{margin-top:0;}

/* ══ 분기 선택기 ══ */
.picker{padding:76px 0 82px; background:#fff; border-bottom:1px solid var(--line);}
/* 부제는 데스크톱에서 한 줄로 — 40em(640px)이면 2줄로 접혔다 */
.pick-q{text-align:center; max-width:64em; margin:0 auto;}
.pick-q b{display:block; font-size:30px; font-weight:800; letter-spacing:-.04em; color:var(--navy2); line-height:1.4;}
.pick-q span{display:block; font-size:16.5px; color:var(--gray); margin-top:12px; line-height:1.8;}
.picks{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px;}
.pk{background:var(--bg); border:1.5px solid var(--line); border-radius:26px; padding:30px 32px 26px;
    display:flex; flex-direction:column; transition:.26s; position:relative; overflow:hidden;}
.pk::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; transform:scaleX(0); transform-origin:left; transition:transform .45s;
            background:linear-gradient(90deg,var(--blue),var(--mint));}
.pk:hover{transform:translateY(-7px); box-shadow:var(--sh-h); border-color:var(--sky2); background:#fff;}
.pk:hover::before{transform:scaleX(1);}
/* 태그 + 적용 조건을 한 줄에 — 「이런 상황이면 이 트랙」을 먼저 읽히게 한다 */
.pk-top{display:flex; align-items:center; gap:11px; flex-wrap:wrap;}
.pk .tag{display:inline-flex; flex:0 0 auto; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.1em;
         color:var(--blue); background:var(--blue-l); border-radius:8px; padding:6px 11px; white-space:nowrap;}
.pk .who{flex:1 1 210px; min-width:0; margin:0; font-size:17px; font-weight:600;
         color:var(--gray); line-height:1.55; letter-spacing:-.035em;}
.pk .art{flex:1 1 auto; margin:16px 0 6px; display:grid; place-items:center;}
.pk .art svg{width:100%; max-width:200px; height:auto;}
.pk h3{font-size:24px; font-weight:800; letter-spacing:-.035em; color:var(--navy2); margin:8px 0 0; line-height:1.4;}
.pk .who b{color:var(--blue-d); font-weight:800;}
.pk .mini{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;}
.pk .mini span{font-size:12.8px; font-weight:700; color:var(--blue-d); background:var(--blue-l); border-radius:8px; padding:6px 11px;}
.pk .go{display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-size:15px; font-weight:800; color:var(--blue); transition:.2s;}
.pk:hover .go{gap:11px;}

/* 트랙 CTA 안의 과금 안내 한 줄 */
.cta-cost{margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.17);
          font-size:13.8px; color:#b9cbe6; line-height:1.75;}
.cta-cost b{color:#fff; font-weight:800;}
.cta-cost a{color:var(--sky); font-weight:700; white-space:nowrap;}
.cta-cost a:hover{text-decoration:underline;}


/* ══ 신뢰 스트립 ══ */
.strip{background:var(--bg); position:relative; overflow:hidden; padding:46px 0 34px; border-bottom:1px solid var(--line); z-index:2;}
.strip::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(47,107,255,.13) 1.3px, transparent 1.3px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse 62% 88% at 50% 50%, #000 0%, transparent 78%); mask-image:radial-gradient(ellipse 62% 88% at 50% 50%, #000 0%, transparent 78%); pointer-events:none;}
.strip .wrap{position:relative; z-index:2;}
.strip .cap{display:flex; align-items:center; justify-content:center; gap:16px; font-size:13.5px; font-weight:700; color:var(--gray);}
.strip .cap .ln{flex:0 0 60px; height:1px; background:linear-gradient(90deg,transparent,#c9d9ff);}
.strip .cap .ln:last-child{background:linear-gradient(90deg,#c9d9ff,transparent);}
.strip .cap b{color:var(--navy2); font-weight:800;}
.logowall{position:relative; z-index:2; margin-top:24px; overflow:hidden; padding:8px 0;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.lw-track{display:flex; gap:10px; width:max-content; animation:mq 46s linear infinite;}
.logowall:hover .lw-track{animation-play-state:paused;}
@keyframes mq{to{transform:translateX(-50%);}}
.lw{flex:0 0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 22px;
    font-size:16px; font-weight:800; letter-spacing:-.03em; color:var(--navy3); white-space:nowrap; box-shadow:var(--sh); transition:.22s;}
.lw:hover{color:var(--blue-d); border-color:var(--sky2); transform:translateY(-3px);}
.strip .note{margin-top:22px; text-align:center; font-size:13.5px; color:var(--gray-l);}
.strip .note b{color:var(--gray); font-weight:700;}

/* ══ 트리거 4카드 ══ */
.trigs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
.trig{background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px 22px 24px; transition:.26s; box-shadow:var(--sh);
      display:flex; flex-direction:column;}
.trig:hover{transform:translateY(-6px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.trig .art{display:grid; place-items:center; margin:-6px 0 6px;}
.trig .art svg{width:100%; max-width:150px; height:auto;}
.trig .k{font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--gray-l);}
.trig h3{font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--navy2); margin:7px 0 0; line-height:1.35;}
.trig p{font-size:14.5px; color:var(--gray); line-height:1.75; margin:10px 0 0; flex:1;}
.trig .svc{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:6px;}
.trig .svc span{font-size:12.5px; font-weight:700; color:var(--blue-d); background:var(--blue-l); border-radius:8px; padding:5px 10px;}

/* ══ "직접 만들면 떠안는 것" 대비 ══ */

/* ══ 사례 ══ */
.ref-main{background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:30px 32px; box-shadow:var(--sh);
          display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; margin-top:22px;}
.ref-main .co{font-size:23px; font-weight:800; color:var(--navy2); letter-spacing:-.035em;}
.ref-main .since{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--blue); margin-top:7px;}
.ref-main .since i{width:5px; height:5px; border-radius:50%; background:var(--mint);}
.ref-main .eff{font-size:16px; line-height:1.8; color:var(--ink); margin:14px 0 0;}
.ref-main .used{margin-top:16px; display:flex; flex-wrap:wrap; gap:6px;}
.ref-main .used span{font-size:12.5px; font-weight:700; color:var(--gray); background:#f0f3f8; border-radius:7px; padding:5px 10px;}
.ref-more{margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 28px; display:flex; gap:18px; flex-wrap:wrap; align-items:baseline;}
.ref-more .k{font-size:13.5px; font-weight:800; color:var(--navy2); flex:0 0 auto;}
.ref-more .v{font-size:14.8px; color:var(--gray); line-height:1.8;}

/* ══ 레거시 배너 ══ */
.devbar{margin-top:16px; background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:26px 30px;
        display:flex; align-items:center; gap:24px; flex-wrap:wrap; box-shadow:var(--sh);}
.devbar .db-t{flex:1 1 340px;}
.devbar .db-t b{display:block; font-size:19px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.devbar .db-t span{display:block; font-size:14.8px; color:var(--gray); margin-top:6px; line-height:1.75;}
.db-links{display:flex; flex-wrap:wrap; gap:8px;}
.db-links a{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:var(--blue-d); white-space:nowrap;
            background:#fff; border:1.5px solid #cfdcff; border-radius:11px; padding:11px 16px; transition:.2s;}
.db-links a:hover{background:var(--blue-l); border-color:var(--sky2); transform:translateY(-2px);}
.db-links a .aw{font-size:11.5px; opacity:.75;}

/* ══ 트랙 CTA 바 ══ */
.track-cta{margin-top:36px; background:linear-gradient(135deg,#0b1e38,#1c4682); border-radius:20px; padding:28px 34px;
           display:flex; align-items:center; gap:24px; flex-wrap:wrap; color:#fff;}
.track-cta .t{flex:1 1 340px;}
.track-cta .t > b{display:block; font-size:20px; font-weight:800; letter-spacing:-.03em;}
.track-cta .t > span{display:block; font-size:15px; color:#b9cbe6; margin-top:7px; line-height:1.7;}

/* ══ TRACK B — 다크 밴드 ══ */
.darktrack{color:#fff; overflow:hidden; padding-bottom:84px;
           background:linear-gradient(160deg,#08172b 0%,#0b1e38 28%,#12315b 68%,#1a4177 100%);}
.darktrack::before{content:""; position:absolute; inset:0; pointer-events:none;
                   background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
                   background-size:26px 26px;}
.darktrack::after{content:""; position:absolute; width:560px; height:560px; border-radius:50%; filter:blur(95px);
                  background:#2f6bff; opacity:.24; top:-220px; right:-160px; pointer-events:none;}
.darktrack .wrap{position:relative; z-index:2;}
.darktrack h2{color:#fff;}
.darktrack h2 .g{background:linear-gradient(100deg,#7fb0ff,#8ef0da); -webkit-background-clip:text; background-clip:text; color:transparent;}
.darktrack .sec-lead{color:#b9cbe6;}
.darktrack .step-tag{color:var(--sky); background:rgba(127,176,255,.13); border:1px solid rgba(127,176,255,.26);}
.darktrack .step-tag b{background:var(--sky); color:var(--navy2);}
.darktrack .subhead b{color:#fff;} .darktrack .subhead span{color:#93aac9;}

.ptypes{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
.pt-card{border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.05); border-radius:22px;
         padding:20px 22px 24px; transition:.26s; display:flex; flex-direction:column;}
.pt-card:hover{background:rgba(255,255,255,.1); border-color:rgba(127,176,255,.44); transform:translateY(-6px);}
.pt-card .art{display:grid; place-items:center; margin:-4px 0 6px;}
.pt-card .art svg{width:100%; max-width:198px; height:auto;}
/* 제목 2줄분 확보 — 1줄짜리 카드 때문에 아래 요소들이 통째로 어긋났다 */
.pt-card h3{font-size:18.5px; font-weight:800; letter-spacing:-.03em; color:#fff; margin:4px 0 0;
            line-height:1.4; min-height:2.8em;}
/* #93aac9 는 카드 배경 대비 4.19 로 WCAG AA(4.5) 미달이었다 → 6.04 */
.pt-card .ex{font-size:14px; color:#b9cbe6; margin:9px 0 0; line-height:1.68;}
.pt-card .warn{margin-top:10px; font-size:12.5px; color:#ffd9a0; line-height:1.6;}
/* 칩 블록을 카드 바닥에 고정 — 4장의 칩 줄이 가로로 맞는다 */
.pt-card .svc{margin-top:auto; padding-top:16px; border-top:1px dashed rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:6px;}
.pt-card .svc span{font-size:12.5px; font-weight:700; color:#cfe0f8; background:rgba(127,176,255,.13);
                   border:1px solid rgba(127,176,255,.22); border-radius:8px; padding:5px 10px;}

/* 02 · 「기능으로 넣으면」 — 불릿 텍스트를 키워드 타일로. 훑어서 읽히게 한다 */
.gains{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px;}
/* 네이비 위에 네이비를 얹으면 아무리 톤을 바꿔도 대비가 1.6 을 못 넘는다.
   색 계열 자체를 뒤집어 밝은 카드로 — 다크밴드 대비 10.28 */
.gain{border-radius:18px; padding:24px 22px 22px; transition:.25s; position:relative; overflow:hidden;
      background:linear-gradient(158deg,#ffffff 0%,#e7efff 100%); box-shadow:var(--sh);}
.gain::before{content:""; position:absolute; inset:0 0 auto 0; height:4px;
              background:linear-gradient(90deg,var(--blue),var(--mint));}
.gain:hover{transform:translateY(-6px); box-shadow:var(--sh-h);}
/* 다크밴드 위에서는 그림자를 깊게 — 밝은 카드가 떠 보이도록 */
.darktrack .gain{box-shadow:0 10px 28px rgba(4,14,34,.3);}
.darktrack .gain:hover{box-shadow:0 18px 40px rgba(4,14,34,.42);}
.gain b{display:block; font-size:24px; font-weight:800; letter-spacing:-.045em; line-height:1.3; color:var(--navy2);}
.gain b em{font-style:normal; color:var(--blue-d);}
.gain span{display:block; font-size:13.5px; color:var(--gray); line-height:1.72; margin-top:11px;}
.gain span em{font-style:normal; color:var(--navy2); font-weight:800;}

.gain-wide{margin-top:14px; border:1px solid var(--line); border-radius:18px; padding:20px 26px;
           background:#fff; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;}
.gain-wide b{flex:0 0 auto; font-size:18px; font-weight:800; letter-spacing:-.035em; color:var(--blue-d);}
.gain-wide span{flex:1 1 320px; min-width:0; font-size:14.5px; color:var(--gray); line-height:1.7;}
.darktrack .gain-wide{background:rgba(255,255,255,.14); border-color:rgba(127,176,255,.38);}
.darktrack .gain-wide b{color:var(--mint);}
.darktrack .gain-wide span{color:#ccdcf2;}
/* 「직접 만들면 남는 일」 — 이득이 아니라 부담이라 앰버로 구분한다 */
.gain-wide.caution{background:linear-gradient(90deg,rgba(255,182,72,.16),rgba(255,182,72,.03));
                   border-color:#f0ddbb;}
.gain-wide.caution b{color:#a9670f;}


.refs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px;}
.ref{border:1px solid var(--line); background:#fff; border-radius:20px; padding:26px 26px; transition:.26s;
     box-shadow:var(--sh); position:relative; overflow:hidden;}
section.alt .ref{background:var(--bg);}
.ref::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; transform:scaleX(0); transform-origin:left;
             transition:transform .4s; background:linear-gradient(90deg,var(--blue),var(--mint));}
.ref:hover{transform:translateY(-6px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.ref:hover::before{transform:scaleX(1);}
.ref .co{font-size:18px; font-weight:800; color:var(--navy2); letter-spacing:-.03em; line-height:1.35;}
.ref .since{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--blue); margin-top:8px;}
.ref .since i{width:5px; height:5px; border-radius:50%; background:var(--mint);}
.ref .eff{font-size:14.8px; color:var(--gray); line-height:1.78; margin:13px 0 0;}

/* ══ 기술 스펙 정직 블록 ══ */
.spec{margin-top:22px; border:1.5px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; box-shadow:var(--sh);}
section.alt .spec{background:var(--bg);}
.spec h3{margin:0; padding:22px 30px; font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--navy2);
         border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px;
         background:linear-gradient(90deg, rgba(255,182,72,.16), rgba(255,182,72,.02));}
.spec h3 .ic{width:25px; height:25px; border-radius:8px; background:#ffb648; color:#fff; display:grid; place-items:center;
             font-size:14px; font-weight:900; flex:0 0 auto; box-shadow:0 4px 12px rgba(255,182,72,.42);}
.sp-row{display:grid; grid-template-columns:.42fr 1.58fr; gap:20px; padding:18px 30px; border-bottom:1px solid var(--line); font-size:15px;}
.sp-row:last-child{border-bottom:none;}
.sp-row .k{font-weight:800; color:var(--navy2);}
.sp-row .v{color:var(--gray); line-height:1.78;}
.sp-row .v b{color:var(--navy2);}

/* ══ 공통 · 요금·도입 ══ */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px;}
.plan{background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:26px 28px; transition:.26s; box-shadow:var(--sh);}
.plan:hover{transform:translateY(-6px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.plan .phead{display:flex; align-items:center; gap:15px;}
.plan .pic{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--blue-l); flex:0 0 auto;}
.plan .pic svg{width:25px; height:25px;}
.plan h3{font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--navy2); margin:0; line-height:1.25;}
.plan .u{display:inline-block; font-size:12.5px; font-weight:800; color:var(--blue); background:var(--blue-l); border-radius:7px; padding:4px 10px; margin-top:6px;}
.plan p{font-size:15px; color:var(--gray); line-height:1.72; margin:16px 0 0;}
.plan .list{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:6px;}
.plan .list span{font-size:13px; font-weight:700; color:var(--gray); background:#f0f3f8; border-radius:7px; padding:6px 11px;}
.prin{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px;}
.pr3{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; display:flex; gap:14px; align-items:center; transition:.24s;}
.pr3:hover{transform:translateY(-4px); box-shadow:var(--sh);}
.pr3 .ic{width:36px; height:36px; border-radius:11px; background:rgba(46,211,172,.14); display:grid; place-items:center; flex:0 0 auto;}
.pr3 .ic svg{width:20px; height:20px; stroke:#12a888;}
.pr3 b{display:block; font-size:15.5px; font-weight:800; color:var(--navy2); letter-spacing:-.02em;}
.pr3 span{display:block; font-size:14px; color:var(--gray); margin-top:3px; line-height:1.6;}
.flow4{margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative;}
.flow4::before{content:""; position:absolute; top:31px; left:9%; right:9%; height:2px;
              background:repeating-linear-gradient(90deg,var(--sky2) 0 8px,transparent 8px 16px); opacity:.6;}
.stp{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px; position:relative; z-index:2; transition:.26s;}
.stp:hover{transform:translateY(-5px); box-shadow:var(--sh-h);}
.stp .num{width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,var(--blue),#4a7fff); color:#fff;
          display:grid; place-items:center; font-size:15px; font-weight:800; box-shadow:0 6px 16px rgba(47,107,255,.3);}
.stp h4{margin:13px 0 0; font-size:17px; font-weight:800; color:var(--navy2); letter-spacing:-.02em;}
.stp p{margin:9px 0 0; font-size:14.5px; color:var(--gray); line-height:1.8;}
.stp-a{display:inline-flex; align-items:center; gap:5px; margin-top:13px; font-size:13.5px; font-weight:800; color:var(--blue); transition:.2s;}
.stp-a:hover{color:var(--blue-d); gap:8px;}
.stp-a .aw{font-size:11.5px; opacity:.8;}

/* ══ 아코디언 ══ */
.acc{margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;}
section.alt .acc{background:var(--bg);}
.acc details{border-bottom:1px solid var(--line);}
.acc details:last-child{border-bottom:none;}
.acc summary{cursor:pointer; list-style:none; padding:24px 30px 24px 0; margin:0 30px; position:relative;
             font-size:17.5px; font-weight:700; color:var(--navy2); letter-spacing:-.025em; line-height:1.5; transition:color .2s;}
.acc summary:hover{color:var(--blue);}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:""; position:absolute; right:2px; top:50%; width:11px; height:11px; margin-top:-7px;
                    border-right:2.2px solid var(--blue); border-bottom:2.2px solid var(--blue);
                    transform:rotate(45deg); transition:transform .25s;}
.acc details[open] summary::after{transform:rotate(-135deg); margin-top:-3px;}
.acc .ans{padding:0 30px 26px; font-size:15.5px; line-height:1.85; color:var(--gray); animation:rise .35s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.acc .ans b{color:var(--navy2);}
.acc .tk{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; border-radius:6px; padding:3px 8px; margin-right:9px; vertical-align:2px;}
.acc .tk.a{color:var(--blue); background:var(--blue-l);}
.acc .tk.b{color:#0d8f74; background:rgba(46,211,172,.14);}
.prep{display:grid; grid-template-columns:.7fr 1.3fr; gap:16px; padding:16px 30px; border-bottom:1px solid var(--line); font-size:15px;}
.prep:last-child{border-bottom:none;}
.prep .k{font-weight:800; color:var(--navy2);}
.prep .v{color:var(--gray); line-height:1.7;}

/* ══ 상담 ══ */
.contact{position:relative; overflow:hidden; color:#fff;
         background:linear-gradient(150deg,#08172b 0%,#0e2748 45%,#173a6b 100%);}
.contact::before{content:""; position:absolute; width:560px; height:560px; border-radius:50%; filter:blur(90px);
                 background:#2f6bff; opacity:.32; top:-200px; left:-120px; animation:drift 20s ease-in-out infinite;}
.contact .wrap{position:relative; z-index:2;}
.contact h2{color:#fff;} .contact .sec-lead{color:#b9cbe6;}
.contact .step-tag{color:var(--sky); background:rgba(127,176,255,.13); border:1px solid rgba(127,176,255,.26);}
.contact .step-tag b{background:var(--sky); color:var(--navy2);}
.cwrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; margin-top:44px; align-items:start;}
.tbox{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:32px 30px; backdrop-filter:blur(6px);}
.tbox h3{color:#fff; font-size:19px; font-weight:800; letter-spacing:-.03em; margin:0 0 6px;}
.ti{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.11);}
.ti:last-child{border-bottom:none; padding-bottom:0;}
.ti .ic{width:36px; height:36px; border-radius:11px; background:rgba(127,176,255,.16); display:grid; place-items:center; flex:0 0 auto;}
.ti .ic svg{width:18px; height:18px; stroke:var(--sky);}
.ti .k{font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--sky);}
.ti .v{font-size:14.8px; line-height:1.78; color:#cfdcee; margin-top:4px;}
.ti .v b{color:#fff;}
.formbox{background:#fff; border-radius:24px; padding:38px 36px; color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.24);}
.formbox h3{font-size:22px; font-weight:800; letter-spacing:-.03em; margin:0; color:var(--navy2);}
.formbox .sub{font-size:14.5px; color:var(--gray); margin:8px 0 0;}
.fast{display:inline-flex; align-items:center; gap:8px; margin-top:15px; font-size:13.5px; font-weight:700; color:#0d8f74; background:rgba(46,211,172,.12); border:1px solid rgba(46,211,172,.32); border-radius:99px; padding:8px 15px;}
.fast b{color:#0a7a63;}
.fast .dot2{width:7px; height:7px; border-radius:50%; background:#2ed3ac; animation:blink 2s ease-in-out infinite; flex:0 0 auto;}
.field{margin-top:18px;}
.field label{display:block; font-size:13.5px; font-weight:800; color:var(--navy2); margin-bottom:8px;}
.field label em{color:var(--blue); font-style:normal; margin-left:3px;}
.field .opt{font-weight:600; color:var(--gray-l); font-size:12.5px; margin-left:5px;}
input[type=text],input[type=email],select,textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:14px 15px;
  font-size:15px; font-family:inherit; color:var(--ink); background:#fbfcfe; transition:.2s;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,107,255,.11);}
textarea{min-height:104px; resize:vertical; line-height:1.7;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.pick{display:flex; flex-wrap:wrap; gap:8px;}
.pick label{display:inline-flex; align-items:center; gap:7px; background:#fbfcfe; border:1.5px solid var(--line);
            border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:700; color:var(--gray); cursor:pointer; margin:0; transition:.18s;}
.pick label:hover{border-color:var(--sky2); color:var(--blue-d);}
.pick input{accent-color:var(--blue);}
.agree{margin-top:20px; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--gray); line-height:1.65;}
.agree input{margin-top:3px; accent-color:var(--blue);}
.agree a{color:var(--blue); font-weight:700; text-decoration:underline;}
.submit{width:100%; margin-top:22px; justify-content:center; border:none;}
.altcta{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--gray); line-height:1.9;}
.altcta a{color:var(--blue); font-weight:700;}
.altcta a:hover{text-decoration:underline;}

/* ══ 푸터 ══ */
footer{background:#061222; color:#7c90ac; padding:46px 0; font-size:13.5px; line-height:1.85;}
footer b{color:#c9d8ee;}
.fl-row{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between;}
.fnav{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px;}
.fnav a{color:#9db0c9; font-weight:600;}
.fnav a:hover{color:#fff;}
.aw{font-size:11px; opacity:.7;}

/* ══ 모바일 고정 CTA ══ */
.mbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; padding:11px 16px calc(11px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-top:1px solid var(--line);}
.mbar .btn{width:100%; justify-content:center;}

/* ══ v2 · TRACK A 세그먼트 카드 ══ */
.segs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;}
.seg{background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:26px 28px 24px; box-shadow:var(--sh);
     display:flex; flex-direction:column; transition:.26s; position:relative; overflow:hidden;}
.seg::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--blue),var(--mint));
             transform:scaleX(0); transform-origin:left; transition:transform .45s;}
.seg:hover{transform:translateY(-6px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.seg:hover::before,.seg:target::before{transform:scaleX(1);}
.seg:target{border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,107,255,.12), var(--sh-h);}
.seg .k{font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--gray-l);}
.seg h3{font-size:22px; font-weight:800; letter-spacing:-.035em; color:var(--navy2); margin:6px 0 0; line-height:1.35;}
.seg .ex{font-size:14.8px; color:var(--gray); line-height:1.75; margin:10px 0 0;}
.seg .when{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.8px; color:var(--gray);}
.seg .when em{font-style:normal; font-weight:800; color:var(--navy2); margin-right:2px;}
.seg .when span{font-weight:700; color:var(--navy3); background:#f0f3f8; border-radius:7px; padding:4px 9px;}
.seg .ex{margin-bottom:16px;}
.seg .svc{margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:6px;}
.seg .svc a{font-size:12.5px; font-weight:700; color:var(--blue-d); background:var(--blue-l); border-radius:8px; padding:5px 10px; transition:.18s;}
.seg .svc a:hover{background:#dde8ff;}
.pt-card:target{border-color:rgba(127,176,255,.8); background:rgba(255,255,255,.12);}
.pt-card .warn.soap{color:#cfe0f8;}
.pt-card .warn.soap b{color:#fff;}

/* ══ v2 · 제품 섹션 ══ */
.pgroup{margin-top:34px;}
.pgroup .gk{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.pgroup .gk b{font-size:19px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.pgroup .gk span{font-size:14px; color:var(--gray);}
.pgroup .gk .u{font-size:12px; font-weight:800; color:var(--blue); background:var(--blue-l); border-radius:7px; padding:3px 9px;}
.pgroup .gk .u.m{color:#0d8f74; background:rgba(46,211,172,.14);}
.prods{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px;}
.prods.four{grid-template-columns:repeat(4,1fr);}
.prod{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 22px 20px; transition:.24s;
      display:flex; flex-direction:column; box-shadow:var(--sh);}
section.alt .prod{background:var(--bg);}
.prod:hover{transform:translateY(-5px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.prod:target{border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,107,255,.12), var(--sh-h);}
.prod h3{font-size:18px; font-weight:800; color:var(--navy2); letter-spacing:-.03em; margin:0; line-height:1.4; text-wrap:balance;}
.prod p{font-size:14.3px; color:var(--gray); line-height:1.72; margin:9px 0 0; text-wrap:pretty;}
.prod .note{font-size:12.5px; color:#a9670f; line-height:1.6; margin-top:10px;}
.prod .fit{margin-top:auto; padding-top:14px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--gray); line-height:1.6;}
.prod .fit b{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--gray-l); margin-bottom:5px;}
.prod > :nth-last-child(2){margin-bottom:14px;}  /* 「주로 붙는 곳」은 카드 바닥에 맞추고 위 간격만 확보 */
.prod .fit a{display:inline-block; font-weight:700; color:var(--blue-d); background:var(--blue-l); border-radius:7px; padding:3px 8px; margin:0 3px 5px 0;}
.prod .fit a:hover{background:#dde8ff;}
/* 요금·도입 섹션이 흰 배경(alt)으로 바뀌어 카드 면을 회청으로 */
section.alt .plan,section.alt .pr3,section.alt .stp{background:var(--bg);}
.p-excl{margin-top:18px; font-size:13.5px; color:var(--gray-l); line-height:1.75;}

/* ══ 반응형 ══ */
@media (max-width:1000px){
  .gnb nav .dd,.gnb nav .nav-r a.ext{display:none;}
  .gnb nav{margin-left:auto; flex:0 0 auto;}
  .gnb nav .nav-r{margin-left:0;}
  .menu-btn{display:flex; margin-left:12px;}
  .gnb.m-open .mnav{display:block;}
  .mnav{position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 72px); overflow-y:auto;
        background:#fff; border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(14,35,70,.14); padding:6px 24px 26px;}
  .mnav details{border-bottom:1px solid var(--line);}
  .mnav summary{list-style:none; cursor:pointer; padding:17px 0; font-size:16.5px; font-weight:800; color:var(--navy2); position:relative;}
  .mnav summary::-webkit-details-marker{display:none;}
  .mnav summary::after{content:""; position:absolute; right:4px; top:50%; width:8px; height:8px; margin-top:-6px;
                       border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg); transition:.2s;}
  .mnav details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
  .mnav .mk{font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--gray-l); margin:6px 0 4px;}
  .mnav .mi{display:block; padding:10px 0 10px 12px; font-size:15px; font-weight:700; color:var(--ink); border-left:2px solid var(--line);}
  .mnav .mi small{display:block; font-size:12.5px; font-weight:500; color:var(--gray); margin-top:1px;}
  .mnav .mi:hover{border-left-color:var(--blue); color:var(--blue-d);}
  .mnav .grp{padding-bottom:14px;}
  .mnav > a.mtop{display:block; padding:17px 0; font-size:16.5px; font-weight:800; color:var(--navy2); border-bottom:1px solid var(--line);}
  .segs{grid-template-columns:1fr;}
  .prods,.prods.four{grid-template-columns:1fr 1fr;}
  br.pc{display:none;}
  .hero .wrap{grid-template-columns:1fr; gap:36px; padding-top:60px; padding-bottom:66px;}
  .hero h1{font-size:33px;}
  .picks,.plans,.cwrap{grid-template-columns:1fr;}
  .trigs,.ptypes,.refs,.gains{grid-template-columns:1fr 1fr;}
  .prin,.flow4{grid-template-columns:1fr 1fr;}
  .flow4::before{display:none;}
  .ref-main{grid-template-columns:1fr; gap:18px;}
  .sp-row{grid-template-columns:1fr; gap:8px;}
  h2{font-size:29px;}
  .pick-q b{font-size:24px;}
  section{padding:72px 0;}
  .gnb nav > a:not(.btn){display:none;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .hero h1{font-size:28px;}
  .trigs,.ptypes,.refs,.gains,.prin,.flow4,.row2,.prods,.prods.four{grid-template-columns:1fr;}
  .gnb nav{display:none;}           /* 하단 고정 CTA(.mbar)가 있어 헤더 CTA는 뺀다 — 햄버거 자리 확보 */
  .menu-btn{margin-left:auto;}
  .mnav{padding:6px 20px 96px;}     /* 하단 고정 CTA 높이만큼 */
  .pk{padding:24px 24px 22px;}
  .formbox{padding:28px 22px;}
  .spec h3,.sp-row{padding-left:22px; padding-right:22px;}
  .acc summary{margin:0 22px; font-size:16.5px;}
  .acc .ans{padding:0 22px 24px;}
  .mbar{display:block;}
  body{padding-bottom:74px;}
  .prep{grid-template-columns:1fr; gap:4px;}
  .track-cta,.devbar{padding:24px 22px;}
  .keyband{padding:22px 18px 26px; border-radius:22px;}
  .subhead.key b{font-size:24px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .js .rv{opacity:1; transform:none;}
  .draw{stroke-dasharray:none; stroke-dashoffset:0;}
}

/* ══ 인쇄 (내부 검토용) ══ */
@media print{
  @page{size:A4; margin:13mm 11mm;}
  html{scroll-padding-top:0;}
  body{background:#fff; font-size:10.5pt; line-height:1.6; padding-bottom:0;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .js .rv{opacity:1 !important; transform:none !important;}
  .draw{stroke-dasharray:none !important; stroke-dashoffset:0 !important;}
  .tilt svg{transform:none !important;}
  .gnb,.mbar,.hero .cta,.altcta,.submit{display:none !important;}
  .logowall{overflow:visible; -webkit-mask-image:none; mask-image:none;}
  .lw-track{animation:none !important; width:auto; flex-wrap:wrap; justify-content:center; gap:7px;}
  .lw{font-size:11pt; padding:8px 14px; box-shadow:none;}
  .lw:nth-child(n+13){display:none;}
  .wrap{max-width:none; padding:0;}
  section,.picker{padding:18px 0;}
  .hero,.contact,footer,.darktrack,.track-cta,.keyband,.gain{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .keyband{break-inside:avoid;}
  .hero .wrap{padding:26px 0; gap:22px; grid-template-columns:1.1fr .9fr;}
  .trigs,.ptypes,.refs{grid-template-columns:repeat(2,1fr);}
  .trig,.pt-card,.pk,.ref,.stp,.plan,.seg,.prod{break-inside:avoid;}
  .mega,.mnav{display:none !important;}
  .prods,.prods.four{grid-template-columns:repeat(2,1fr);}
  .segs{grid-template-columns:1fr 1fr;}
  .acc details{break-inside:avoid;}
  .acc details summary::after{display:none;}
  .acc .ans{display:block !important;}
}

/* ════════════════════════════════════════════════════════════════
   v2.1 · 메인 「제품」 축약 목록  (상세는 products/*.html)
   ════════════════════════════════════════════════════════════════ */
.plist{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px;}
.plist.four{grid-template-columns:repeat(4,1fr);}
.pl{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px 16px;
    box-shadow:var(--sh); transition:.22s;}
.pl:hover{transform:translateY(-4px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.pl b{font-size:16.5px; font-weight:800; color:var(--navy2); letter-spacing:-.03em; line-height:1.4;}
.pl span{font-size:13.8px; color:var(--gray); line-height:1.65; margin-top:5px; flex:1;}
.pl i{font-style:normal; margin-top:12px; font-size:13.5px; font-weight:800; color:var(--blue); transition:.2s;}
.pl:hover i{letter-spacing:.02em;}

/* ════════════════════════════════════════════════════════════════
   v2.1 · 제품 상세 페이지
   ════════════════════════════════════════════════════════════════ */
.phero{position:relative; overflow:hidden; color:#fff;
       background:linear-gradient(150deg,#08172b 0%,#0e2748 45%,#173a6b 82%,#1c4682 100%);}
.phero::before{content:""; position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(80px);
               background:#2f6bff; opacity:.4; top:-230px; right:-140px; pointer-events:none;}
.phero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center;
             padding-top:54px; padding-bottom:64px;}
.crumb{font-size:13.5px; color:#93aac9; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.crumb a{color:#b9cbe6; font-weight:600;} .crumb a:hover{color:#fff;}
.crumb i{font-style:normal; opacity:.5;}
.phero h1{font-size:42px; line-height:1.3; font-weight:800; letter-spacing:-.04em; margin:18px 0 0;}
.phero h1 small{display:block; font-size:17px; font-weight:700; color:var(--sky); letter-spacing:-.02em; margin-top:8px;}
.phero .lead{font-size:17.5px; line-height:1.78; color:#b9cbe6; margin:18px 0 0; max-width:34em;}
.phero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.pcard{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:22px 24px; backdrop-filter:blur(6px);}
.pcard .r{display:grid; grid-template-columns:5.4em 1fr; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px;}
.pcard .r:last-child{border-bottom:none;}
.pcard .r .k{font-weight:800; color:var(--sky); font-size:12.5px; letter-spacing:.04em; padding-top:1px;}
.pcard .r .v{color:#dbe6f6; line-height:1.6;}
.pcard .r .v b{color:#fff;}

.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px;}
.feats.two{grid-template-columns:repeat(2,1fr);}
.feat{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 22px 20px; box-shadow:var(--sh); transition:.24s;}
section.alt .feat{background:var(--bg);}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-h); border-color:var(--sky2);}
.feat .n{width:30px; height:30px; border-radius:9px; background:var(--blue-l); color:var(--blue); display:grid; place-items:center;
         font-size:13px; font-weight:900;}
.feat h3{font-size:17.5px; font-weight:800; color:var(--navy2); letter-spacing:-.03em; margin:12px 0 0; line-height:1.4;}
.feat p{font-size:14.3px; color:var(--gray); line-height:1.72; margin:8px 0 0;}
.feat p b{color:var(--navy2);}

.uses{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px;}
.use{display:flex; gap:16px; align-items:flex-start; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:20px 22px; transition:.22s;}
section.alt .use{background:var(--bg);}
a.use:hover{border-color:var(--sky2); box-shadow:var(--sh-h); transform:translateY(-3px);}
.use .tg{flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--blue); background:var(--blue-l); border-radius:6px; padding:4px 8px; margin-top:3px;}
.use b{display:block; font-size:16.5px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.use span{display:block; font-size:14.2px; color:var(--gray); line-height:1.7; margin-top:4px;}
.use .go{font-size:13px; font-weight:800; color:var(--blue); margin-top:8px;}
.prefs{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px;}
.pref{flex:1 1 240px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px;}
section.alt .pref{background:var(--bg);}
.pref b{font-size:15px; font-weight:800; color:var(--navy2);}
.pref .since{font-size:12px; font-weight:700; color:var(--blue); margin-left:6px;}
.pref span{display:block; font-size:13.5px; color:var(--gray); margin-top:4px; line-height:1.6;}

.testbox{margin-top:16px; display:flex; gap:14px; align-items:flex-start; border-radius:16px; padding:18px 22px;
         background:rgba(46,211,172,.1); border:1px solid rgba(46,211,172,.35);}
.testbox .ic{flex:0 0 auto; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:#12a888; border-radius:7px; padding:4px 9px; margin-top:2px;}
.testbox p{margin:0; font-size:14.8px; color:var(--ink); line-height:1.75;}
.testbox p b{color:#0a7a63;}

.withs{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px;}
.with{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; transition:.22s;}
section.alt .with{background:var(--bg);}
.with:hover{border-color:var(--sky2); box-shadow:var(--sh-h); transform:translateY(-3px);}
.with b{font-size:15.5px; font-weight:800; color:var(--navy2); letter-spacing:-.02em;}
.with span{font-size:13.5px; color:var(--gray); line-height:1.62; margin-top:5px; flex:1;}
.with i{font-style:normal; font-size:13px; font-weight:800; color:var(--blue); margin-top:10px;}

.pnav{margin-top:40px; padding-top:28px; border-top:1px solid var(--line);}
.pnav .h{font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--gray-l);}
.pnav .g{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center;}
.pnav .g em{font-style:normal; font-size:12px; font-weight:800; color:var(--gray); margin:0 4px 0 10px;}
.pnav .g em:first-child{margin-left:0;}
.pnav a{font-size:13.5px; font-weight:700; color:var(--navy3); background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 12px; transition:.18s;}
.pnav a:hover{border-color:var(--sky2); color:var(--blue-d);}
.pnav a[aria-current]{background:var(--blue); border-color:var(--blue); color:#fff;}

@media (max-width:1000px){
  .plist,.plist.four{grid-template-columns:1fr 1fr;}
  .phero .wrap{grid-template-columns:1fr; gap:28px; padding-top:40px; padding-bottom:50px;}
  .phero h1{font-size:32px;}
  .feats{grid-template-columns:1fr 1fr;}
  .uses{grid-template-columns:1fr;}
  .withs{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .plist,.plist.four,.feats,.feats.two,.withs{grid-template-columns:1fr;}
  .phero h1{font-size:27px;}
  .pcard .r{grid-template-columns:1fr; gap:3px;}
}
@media print{
  .phero,.pcard,.testbox{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .phero .cta,.pnav{display:none !important;}
  .phero .wrap{padding:24px 0; grid-template-columns:1.2fr .8fr;}
  .feat,.use,.with,.pl{break-inside:avoid;}
  .feats{grid-template-columns:repeat(3,1fr);}
  .withs,.plist.four{grid-template-columns:repeat(4,1fr);}
}

/* ════════════════════════════════════════════════════════════════
   v2.2 · 월정액 서비스 「신청월 무료」 강조 (홈택스 · 계좌 · 카드)
   ════════════════════════════════════════════════════════════════ */
.freepill{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; font-weight:800; color:#0b3b30;
          background:linear-gradient(135deg,#8ef0da,#2ed3ac); border-radius:99px; padding:7px 15px; box-shadow:0 6px 18px rgba(46,211,172,.35);}
.freepill i{width:7px; height:7px; border-radius:50%; background:#0b3b30; animation:blink 2s ease-in-out infinite;}
.phero .freepill + h1{margin-top:14px;}
.freeband{background:linear-gradient(90deg,#e6fbf4 0%,#f1fdf9 60%,#fff 100%); border-bottom:1px solid #c9f1e4;}
.freeband .wrap{display:grid; grid-template-columns:1fr 1.25fr; gap:32px; align-items:center; padding-top:34px; padding-bottom:34px;}
.fb-k{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; color:#0d8f74; background:rgba(46,211,172,.16);
      border-radius:7px; padding:4px 10px;}
.fb-t b{display:block; font-size:28px; font-weight:800; letter-spacing:-.04em; color:var(--navy2); line-height:1.35; margin-top:10px;}
.fb-t b em{font-style:normal; color:#0d8f74;}
.fb-s{display:block; font-size:14.8px; color:var(--gray); line-height:1.75; margin-top:8px;}
.fb-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative;}
.fb-steps li{background:#fff; border:1px solid #d6f3ea; border-radius:16px; padding:16px 16px 15px; position:relative;}
.fb-steps li:first-child{border:2px solid #2ed3ac; box-shadow:0 10px 26px rgba(46,211,172,.22);}
.fb-steps li + li::before{content:"→"; position:absolute; left:-10px; top:50%; transform:translate(-50%,-50%); color:#7fcfbb; font-weight:800; font-size:14px;}
.fb-steps em{display:block; font-style:normal; font-size:12px; font-weight:800; color:var(--gray-l); letter-spacing:.04em;}
.fb-steps li:first-child em{color:#0d8f74;}
.fb-steps b{display:block; font-size:16.5px; font-weight:800; color:var(--navy2); margin-top:4px; letter-spacing:-.02em;}
.fb-steps li:first-child b{color:#0d8f74;}
.fb-steps span{display:block; font-size:13px; color:var(--gray); margin-top:3px;}
@media (max-width:1000px){ .freeband .wrap{grid-template-columns:1fr; gap:20px;} .fb-t b{font-size:24px;} }
@media (max-width:640px){ .fb-steps{grid-template-columns:1fr;} .fb-steps li + li::before{content:"↓"; left:50%; top:-5px;} }
@media print{ .freeband,.freepill{-webkit-print-color-adjust:exact; print-color-adjust:exact;} }

/* ════════════════════════════════════════════════════════════════
   v2.3 · 제품 「골라 담기」 — 서비스 칩 + 내 조합 트레이
   그룹 색: 발행 = 블루 · 발송 = 앰버 · 조회·수집 = 민트
   ════════════════════════════════════════════════════════════════ */
.combo{display:grid; grid-template-columns:1fr 360px; gap:36px; margin-top:40px; align-items:start;}
.crows{display:flex; flex-direction:column; gap:30px;}
.crow{--ac:#2f6bff; --acl:#eef3ff;}
.crow.g2{--ac:#f0962c; --acl:#fff4e5;}
.crow.g3{--ac:#16b791; --acl:#e4f8f2;}
.cl{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-left:14px; border-left:3px solid var(--ac);}
.cl b{font-size:19px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.cl .u{font-size:12px; font-weight:800; color:var(--blue); background:var(--blue-l); border-radius:7px; padding:3px 9px;}
.cl .u.m{color:#0d8f74; background:rgba(46,211,172,.14);}
.cl span:last-child{font-size:14px; color:var(--gray);}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.chip{position:relative; display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 9px; border-radius:99px;
      background:#fff; border:1.5px solid var(--line); cursor:pointer; font:inherit; color:var(--navy2);
      box-shadow:0 2px 10px rgba(14,35,70,.05); transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;}
.chip .ci{width:38px; height:38px; border-radius:50%; background:var(--acl); color:var(--ac); display:grid; place-items:center; flex:0 0 auto; transition:.18s;}
.chip .ci svg{width:21px; height:21px;}
.chip .cn{font-size:15.5px; font-weight:800; letter-spacing:-.03em; white-space:nowrap;}
.chip .cf{font-style:normal; font-size:11px; font-weight:800; color:#0d8f74; background:rgba(46,211,172,.14); border-radius:99px; padding:3px 8px; white-space:nowrap;}
.chip .ck{width:22px; height:22px; border-radius:50%; border:1.5px solid #cfd8e6; position:relative; flex:0 0 auto; margin-left:2px; transition:.18s;}
.chip .ck::before,.chip .ck::after{content:""; position:absolute; left:50%; top:50%; background:#9aa9bf; border-radius:2px; transition:.18s;}
.chip .ck::before{width:10px; height:2px; transform:translate(-50%,-50%);}
.chip .ck::after{width:2px; height:10px; transform:translate(-50%,-50%);}
.chip:hover{transform:translateY(-3px); border-color:var(--ac); box-shadow:0 12px 26px rgba(14,35,70,.12);}
.chip:focus-visible{outline:3px solid rgba(47,107,255,.35); outline-offset:2px;}
/* 한 줄 설명 말풍선 */
.chip::after{content:attr(data-desc); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px);
             background:var(--navy2); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; padding:7px 11px; border-radius:9px;
             opacity:0; pointer-events:none; transition:.18s; z-index:5;}
.chip:hover::after{opacity:1; transform:translate(-50%,0);}
/* 선택됨 */
.chip[aria-pressed="true"]{background:var(--ac); border-color:var(--ac); color:#fff; box-shadow:0 10px 24px rgba(14,35,70,.16);}
.chip[aria-pressed="true"] .ci{background:rgba(255,255,255,.22); color:#fff;}
.chip[aria-pressed="true"] .cf{background:rgba(255,255,255,.24); color:#fff;}
.chip[aria-pressed="true"] .ck{border-color:#fff; background:#fff;}
.chip[aria-pressed="true"] .ck::before{width:6px; height:2px; background:var(--ac); left:5px; top:11px; transform:rotate(45deg);}
.chip[aria-pressed="true"] .ck::after{width:2px; height:11px; background:var(--ac); left:11px; top:4px; transform:rotate(40deg);}
.chip.pop{animation:chipPop .32s ease;}
@keyframes chipPop{0%{transform:scale(1);} 45%{transform:scale(1.06);} 100%{transform:scale(1);}}

/* 트레이 */
.tray{position:sticky; top:96px; border-radius:24px; padding:24px 24px 20px; color:#fff; overflow:hidden;
      background:linear-gradient(160deg,#0b1e38 0%,#12315b 70%,#1a4177 100%); box-shadow:0 24px 50px rgba(8,23,43,.28);}
.tray::before{content:""; position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(70px); background:#2f6bff; opacity:.35; top:-120px; right:-90px; pointer-events:none;}
.tray > *{position:relative;}
.tr-h{display:flex; align-items:center; justify-content:space-between;}
.tr-h b{font-size:19px; font-weight:800; letter-spacing:-.03em;}
.tr-n{font-size:12.5px; font-weight:800; color:var(--navy2); background:#8ef0da; border-radius:99px; padding:4px 11px;}
.tr-empty{margin-top:16px; padding:22px 18px; border:1.5px dashed rgba(255,255,255,.22); border-radius:16px; font-size:14px; color:#b9cbe6; line-height:1.7; text-align:center;}
.tr-ghost{display:flex; justify-content:center; gap:8px; margin-bottom:12px;}
.tr-ghost i{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); border:1.5px dashed rgba(255,255,255,.22);}
.tr-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto;}
.tr-list li{display:flex; gap:11px; align-items:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:11px 12px; animation:trIn .28s ease;}
@keyframes trIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.tr-list .ti2{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:rgba(255,255,255,.14);}
.tr-list .ti2 svg{width:18px; height:18px;}
.tr-list .g1 .ti2{color:#9dbdff;} .tr-list .g2 .ti2{color:#ffc27a;} .tr-list .g3 .ti2{color:#8ef0da;}
.tr-list .tx{flex:1; min-width:0;}
.tr-list .tx b{display:block; font-size:14.5px; font-weight:800;}
.tr-list .tx span{display:block; font-size:12.5px; color:#b9cbe6; line-height:1.5; margin-top:2px;}
.tr-list .tx a{display:inline-block; font-size:12px; font-weight:800; color:var(--sky); margin-top:4px;}
.tr-list .tx a:hover{text-decoration:underline;}
.tr-list .tx .bl{display:inline-block; margin-top:0; line-height:1.4; font-size:10.5px; font-weight:800; border-radius:6px; padding:2px 7px; margin-left:6px; vertical-align:1px; background:rgba(127,176,255,.2); color:#cfe0f8;}
.tr-list .tx .bl.m{background:rgba(46,211,172,.22); color:#8ef0da;}
.tr-list .rm{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#cfdcee; cursor:pointer; font-size:14px; line-height:1;}
.tr-list .rm:hover{background:rgba(255,255,255,.22); color:#fff;}
.tr-sum{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);}
.tr-bill{display:flex; gap:8px;}
.tr-bill span{flex:1; text-align:center; font-size:12.5px; color:#b9cbe6; background:rgba(255,255,255,.07); border-radius:10px; padding:8px 6px;}
.tr-bill b{display:block; font-size:20px; font-weight:800; color:#fff;}
.tr-free{margin-top:10px; font-size:13.5px; color:#0b3b30; background:linear-gradient(135deg,#8ef0da,#2ed3ac); border-radius:10px; padding:9px 12px; text-align:center;}
.tr-note{margin-top:10px; font-size:12.8px; color:#b9cbe6; text-align:center;}
.tr-note b{color:#fff;}
.tr-cta{width:100%; justify-content:center; margin-top:16px;}
.tr-reset{display:block; margin:10px auto 0; background:none; border:none; color:#93aac9; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:underline;}
.tr-reset[hidden],.tr-sum[hidden],.tr-free[hidden],.tr-empty[hidden]{display:none;}

@media (max-width:1000px){
  .combo{grid-template-columns:1fr; gap:28px;}
  .tray{position:relative; top:0;}
}
@media (max-width:640px){
  .chip{padding:7px 13px 7px 7px; gap:8px;}
  .chip .ci{width:32px; height:32px;} .chip .ci svg{width:18px; height:18px;}
  .chip .cn{font-size:14.5px;}
  .chip::after{display:none;}
}
@media print{
  .tray{display:none !important;}
  .combo{grid-template-columns:1fr;}
  .chip{box-shadow:none;} .chip::after{display:none;}
}

/* ── v2.4 · 「골라 담기」 행동 유도 ── 3단계 띠 · 첫 칩 힌트 · 추천 조합 */
.howpick{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.howpick li{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1.5px solid #d8e5ff; border-radius:99px; padding:7px 16px 7px 7px;
            box-shadow:0 4px 14px rgba(47,107,255,.08);}
.howpick li + li::before{content:"→"; margin:0 6px 0 -2px; color:var(--sky2); font-weight:800;}
.howpick li + li{padding-left:10px;}
.howpick i{font-style:normal; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--blue),#4a7fff); color:#fff;
           display:grid; place-items:center; font-size:12.5px; font-weight:900; flex:0 0 auto;}
.howpick b{font-size:14.5px; font-weight:700; color:var(--gray); letter-spacing:-.02em;}
.howpick b em{font-style:normal; color:var(--navy2); font-weight:800;}

/* 첫 칩 힌트 — 섹션이 보이면 시작, 아무 칩이나 누르면 사라짐 */
.chip.hint{animation:hintRing 1.6s ease-out infinite; border-color:var(--ac);}
@keyframes hintRing{0%{box-shadow:0 0 0 0 rgba(47,107,255,.45);} 80%,100%{box-shadow:0 0 0 14px rgba(47,107,255,0);}}
.chip .tap{position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%); white-space:nowrap;
           font-size:13px; font-weight:800; color:#fff; background:var(--blue); border-radius:10px; padding:7px 12px;
           box-shadow:0 8px 20px rgba(47,107,255,.35); animation:tapBob 1.2s ease-in-out infinite; pointer-events:none; z-index:6;}
.chip .tap::after{content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--blue);}
@keyframes tapBob{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,-5px);}}
.chip.hint::after{display:none;}   /* 힌트 중에는 설명 말풍선과 겹치지 않게 */

/* 빈 트레이 */
.tr-go{display:block; font-size:16px; font-weight:800; color:#fff; margin-bottom:4px;}
.tr-ghost i{animation:ghostIn 2.4s ease-in-out infinite;}
.tr-ghost i:nth-child(2){animation-delay:.3s;} .tr-ghost i:nth-child(3){animation-delay:.6s;}
@keyframes ghostIn{0%,100%{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2);} 40%{background:rgba(142,240,218,.22); border-color:#8ef0da;}}
.tr-pre{margin-top:14px;}
.tr-pre > span{display:block; font-size:12.5px; font-weight:700; color:#93aac9; text-align:center;}
.tr-pre > div{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:9px;}
.tr-pre button{font:inherit; font-size:13px; font-weight:800; color:#dbe6f6; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
               border-radius:99px; padding:7px 13px; cursor:pointer; transition:.18s;}
.tr-pre button:hover{background:rgba(142,240,218,.18); border-color:#8ef0da; color:#fff;}
.tr-pre[hidden]{display:none;}

@media (max-width:640px){
  .howpick{flex-direction:column; align-items:stretch;}
  .howpick li + li::before{display:none;}
  .howpick li + li{padding-left:7px;}
}
@media (prefers-reduced-motion:reduce){ .chip .tap{animation:none;} }
@media print{ .howpick,.chip .tap{display:none !important;} }

/* ── v2.5 · TRACK A 트리거 압축 — 카드 4장 → 한 줄 띠 (서비스 칩은 세그먼트·제품 섹션과 중복이라 제거) ── */
.trigs.mini{gap:0; margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh); overflow:hidden;}
.trigs.mini .trig{background:none; border:none; border-radius:0; box-shadow:none; padding:18px 20px 20px; flex-direction:row; align-items:center; gap:12px;}
.trigs.mini .trig + .trig{border-left:1px dashed var(--line);}
.trigs.mini .trig:hover{transform:none; box-shadow:none; background:var(--bg);}
.trigs.mini .trig .art{flex:0 0 76px; margin:0;}
.trigs.mini .trig .art svg{max-width:76px;}
.trigs.mini .trig .tt{flex:1; min-width:0;}
.trigs.mini .trig h3{font-size:16.5px; margin:0;}
.trigs.mini .trig p{font-size:13.2px; line-height:1.6; margin:4px 0 0;}
@media (max-width:1000px){
  .trigs.mini .trig:nth-child(3){border-left:none;}
  .trigs.mini .trig:nth-child(n+3){border-top:1px dashed var(--line);}
}
@media (max-width:640px){
  .trigs.mini .trig + .trig{border-left:none; border-top:1px dashed var(--line);}
}

/* ════════════════════════════════════════════════════════════════
   v2.6 · 세그먼트 → 조합 연결 · 서비스 아이콘 통일 · 박스 형태 다양화
   ════════════════════════════════════════════════════════════════ */

/* ── TRACK B 카드 서비스 칩 → 상세 페이지 링크 ── */
.pt-card .svc a{font-size:12.5px; font-weight:700; color:#cfe0f8; background:rgba(127,176,255,.13);
                border:1px solid rgba(127,176,255,.22); border-radius:8px; padding:5px 10px; transition:.18s;}
.pt-card .svc a:hover{background:rgba(127,176,255,.26); color:#fff;}

/* ── 서비스 아이콘 (그룹 색) ── */
.g-tax,.g-cash,.g-edoc{--ic:#2f6bff; --icl:#eef3ff;}
.g-sms,.g-fax,.g-kakao{--ic:#f0962c; --icl:#fff4e5;}
.g-hometax,.g-bank,.g-card,.g-corp{--ic:#16b791; --icl:#e4f8f2;}
.mg-i.ic{display:flex; gap:11px; align-items:flex-start;}
.mg-i .mic{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--icl); color:var(--ic); display:grid; place-items:center; margin-top:1px;}
.mg-i .mic svg{width:17px; height:17px;}
.mg-i .mtx{display:block; min-width:0;}
.mg-i .mtx span{margin-top:2px;}
.mg-i.ic:hover .mic{background:var(--ic); color:#fff;}
/* 상세 페이지 히어로 아이콘 */
.picon{display:inline-grid; place-items:center; width:58px; height:58px; border-radius:18px; margin-top:18px;
       background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:var(--ic);}
.picon svg{width:30px; height:30px;}
.g-tax.picon,.g-cash.picon,.g-edoc.picon{color:#9dbdff;}
.g-sms.picon,.g-fax.picon,.g-kakao.picon{color:#ffc27a;}
.g-hometax.picon,.g-bank.picon,.g-card.picon,.g-corp.picon{color:#8ef0da;}
.phero .picon + .freepill{margin-left:10px; vertical-align:14px;}
/* 상세 페이지 「함께 쓰는 서비스」 아이콘 */
.with .wic{width:34px; height:34px; border-radius:50%; background:var(--icl); color:var(--ic); display:grid; place-items:center; margin-bottom:10px;}
.with .wic svg{width:18px; height:18px;}

/* ── 11-1 · 이유 카드 → 큰 숫자 줄 (카드 대신 세로 구분선) ── */
.keyband .gains{gap:0;}
.gain{background:none; box-shadow:none; border-radius:0; padding:6px 24px 6px 22px; border-left:2px solid rgba(47,107,255,.22);}
.gain::before{display:none;}
.gain:hover{transform:none; box-shadow:none;}
.gain b{font-size:28px;}
.darktrack .gain{box-shadow:none; border-left-color:rgba(142,240,218,.35);}
.darktrack .gain:hover{box-shadow:none;}
.darktrack .gain b{color:#fff;}
.darktrack .gain b em{color:#8ef0da;}
.darktrack .gain span{color:#b9cbe6;}
.darktrack .gain span em{color:#fff;}
.keyband .gain-wide{margin-top:24px;}

/* ── 11-2 · 레퍼런스 4칸 → 한 줄 띠 (인용 스타일) ── */
.refs{gap:0; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh); overflow:hidden;}
section.alt .refs{background:var(--bg);}
.refs .ref{background:none !important; border:none; border-radius:0; box-shadow:none; padding:38px 26px 24px 30px; position:relative;}
.refs .ref + .ref{border-left:1px dashed var(--line);}
.refs .ref::before{content:"\201C"; position:absolute; left:26px; top:4px; height:auto; width:auto; background:none; transform:none;
                   font-size:44px; font-weight:900; color:var(--sky2); opacity:.55; line-height:1;}
.refs .ref:hover{transform:none; box-shadow:none; background:rgba(47,107,255,.03) !important;}

/* ── 11-3 · 도입 4단계 → 가로 타임라인 ── */
.flow4{gap:0;}
.flow4::before{top:22px; left:22px; right:12%; height:2px; opacity:.9;
               background:linear-gradient(90deg,var(--blue),var(--mint));}
.flow4 .stp{background:none !important; border:none; border-radius:0; padding:0 22px 0 0;}
.flow4 .stp:hover{transform:none; box-shadow:none;}
.flow4 .stp .num{width:44px; height:44px; border-radius:50%; font-size:17px; border:4px solid #fff;
                 box-shadow:0 0 0 1px #d8e5ff, 0 8px 18px rgba(47,107,255,.28);}
section.alt .flow4 .stp .num{border-color:#fff;}
.flow4 .stp h4{margin-top:16px;}

/* ── 11-4 · 요금 3원칙 → 체크 리스트 한 줄 ── */
.prin{gap:0; margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pr3{background:none !important; border:none; border-radius:0; padding:18px 20px 18px 0;}
.pr3 + .pr3{padding-left:22px; border-left:1px dashed var(--line);}
.pr3:hover{transform:none; box-shadow:none;}

@media (max-width:1000px){
  .keyband .gains{row-gap:22px;}
  .refs .ref:nth-child(3){border-left:none;}
  .refs .ref:nth-child(n+3){border-top:1px dashed var(--line);}
  .flow4{row-gap:28px;} .flow4 .stp{padding-right:14px;}
  .pr3:nth-child(3){padding-left:0; border-left:none;}
}
@media (max-width:640px){
  .refs .ref + .ref{border-left:none; border-top:1px dashed var(--line);}
  .pr3 + .pr3{padding-left:0; border-left:none; border-top:1px dashed var(--line);}
  .flow4 .stp{padding-left:0;}
}

/* ════════════════════════════════════════════════════════════════
   v2.7 · 솔루션 상세 페이지 (ERP · 커머스 · 웹·SaaS · SI) + 진입 링크
   ════════════════════════════════════════════════════════════════ */
/* 메가메뉴 솔루션 — 3칸 (SI 추가) */
.mg-two.three{grid-template-columns:1fr 1fr .9fr;}
.mg-two.three > div + div + div{background:#fbf8f2;}
.mg-two.three > div:nth-child(3) .tg{color:#a9670f; background:rgba(255,182,72,.18);}

/* 메인 세그먼트 카드 → 솔루션 페이지 */
.segmore{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14px; font-weight:800; color:var(--blue);}
.segmore:hover{color:var(--blue-d);} .segmore .ar{transition:transform .2s;} .segmore:hover .ar{transform:translateX(3px);}
.darktrack .segmore{color:#8ef0da;} .darktrack .segmore:hover{color:#fff;}

/* 선택기 아래 SI 한 줄 */
.pick-si{display:flex; align-items:center; gap:12px; margin-top:16px; padding:15px 22px; border-radius:16px; border:1.5px dashed #e3cfa9;
         background:#fffaf2; transition:.2s;}
.pick-si:hover{border-style:solid; border-color:#ffb648; transform:translateY(-2px);}
.pick-si .tg{flex:0 0 auto; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#a9670f; background:rgba(255,182,72,.2); border-radius:7px; padding:5px 10px;}
.pick-si b{font-size:15.5px; font-weight:800; color:var(--navy2); letter-spacing:-.02em;}
.pick-si .ar{margin-left:auto; color:#a9670f; font-weight:800;}

/* 솔루션 히어로 */
.stag{display:inline-block; margin-top:16px; font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--navy2); background:#8ef0da; border-radius:7px; padding:5px 10px;}
.phero .stag + h1{margin-top:12px;}
.snotice{margin:16px 0 0; max-width:36em; font-size:14.3px; line-height:1.7; color:#ffe2b0; background:rgba(255,182,72,.1);
         border:1px solid rgba(255,182,72,.35); border-radius:12px; padding:12px 16px;}
.snotice a{color:#fff; font-weight:800; text-decoration:underline;}
.snotice b{color:#fff;}

/* 실제 문의 발화 */
.squotes{background:#fff; border-bottom:1px solid var(--line);}
.squotes .wrap{padding-top:34px; padding-bottom:30px; display:flex; flex-wrap:wrap; gap:12px 28px; align-items:baseline;}
.sq{margin:0; font-size:21px; font-weight:800; letter-spacing:-.035em; color:var(--navy2); line-height:1.45; padding-left:16px; border-left:3px solid var(--blue);}
.sq-note{flex-basis:100%; font-size:12.8px; color:var(--gray-l);}

/* 붙는 지점 */
.spts{display:grid; grid-template-columns:repeat(2,1fr); gap:0 36px; margin-top:30px;}
.spt{display:flex; gap:16px; align-items:flex-start; padding:20px 4px; border-bottom:1px solid var(--line); transition:.2s;}
.spt:hover{background:rgba(47,107,255,.03);}
.spt .wic{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--icl); color:var(--ic); display:grid; place-items:center;}
.spt .wic svg{width:21px; height:21px;}
.spt b{display:block; font-size:17px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.spt span{display:block; font-size:14.3px; color:var(--gray); line-height:1.72; margin-top:5px;}
.spt em{display:inline-block; font-style:normal; font-size:12.8px; font-weight:800; color:var(--blue); margin-top:8px;}
.spt:hover em{color:var(--blue-d);}

/* 레퍼런스 수 대응 */
.refs.n1{grid-template-columns:1fr;} .refs.n3{grid-template-columns:repeat(3,1fr);}

/* 파트너 지원 */
.ssup{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.ssup li{padding:16px 18px 16px 0;} .ssup li + li{padding-left:18px; border-left:1px dashed var(--line);}
.ssup b{display:block; font-size:15px; font-weight:800; color:var(--navy2);}
.ssup span{display:block; font-size:13.3px; color:var(--gray); margin-top:3px; line-height:1.6;}

/* 수익 구조 */
.rev{border-radius:26px; padding:34px 36px; color:#fff; position:relative; overflow:hidden;
     background:linear-gradient(135deg,#0b1e38 0%,#12315b 60%,#1a4177 100%);}
.rev::before{content:""; position:absolute; width:320px; height:320px; border-radius:50%; filter:blur(80px); background:#2ed3ac; opacity:.22; right:-80px; top:-140px;}
.rev > *{position:relative;}
.rev-k{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.08em; color:var(--navy2); background:#8ef0da; border-radius:7px; padding:5px 10px;}
.rev-h b{display:block; font-size:26px; font-weight:800; letter-spacing:-.04em; line-height:1.4; margin-top:12px;}
.rev-h b em{font-style:normal; color:#8ef0da;}
.rev-h > span:last-child{display:block; font-size:15px; color:#b9cbe6; margin-top:8px;}
.rev-2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.rev-c{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:20px 22px;}
.rev-c i{font-style:normal; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#8ef0da; color:var(--navy2); font-size:12.5px; font-weight:900;}
.rev-c b{display:block; font-size:17px; font-weight:800; margin-top:10px;}
.rev-c span{display:block; font-size:14.3px; color:#cfdcee; line-height:1.7; margin-top:6px;}
.rev-c span em{font-style:normal; color:#fff; font-weight:800;}
.rev-n{margin:16px 0 0; font-size:13.5px; color:#93aac9;}

@media (max-width:1000px){
  .mg-two.three{grid-template-columns:1fr;}
  .spts{grid-template-columns:1fr;}
  .refs.n3{grid-template-columns:1fr;}
  .ssup{grid-template-columns:1fr 1fr;} .ssup li:nth-child(3){padding-left:0; border-left:none;}
  .rev-2{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pick-si{flex-wrap:wrap;} .pick-si .ar{display:none;}
  .sq{font-size:18px;}
  .ssup{grid-template-columns:1fr;} .ssup li + li{padding-left:0; border-left:none; border-top:1px dashed var(--line);}
  .rev{padding:26px 22px;} .rev-h b{font-size:22px;}
}
@media print{ .rev,.squotes{-webkit-print-color-adjust:exact; print-color-adjust:exact;} .rev,.spt,.ssup li{break-inside:avoid;} }

/* v2.8 · 사전 준비 서비스별 목록 */
.prep-list{margin:10px 0 0; padding-left:18px;}
.prep-list li{margin:4px 0; line-height:1.7;}
.prep-list b{color:var(--navy2);}

/* ════════════════════════════════════════════════════════════════
   v2.9 · 고객 인터뷰 카드 (더블유컨셉코리아 · 애터미 — 공개 동의 2026-09-29)
   ════════════════════════════════════════════════════════════════ */
.voices{display:grid; gap:16px; margin-top:30px;}
.voices.n1{grid-template-columns:1fr;} .voices.n2{grid-template-columns:1fr 1fr;}
.voice{margin:0; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 28px 22px; box-shadow:var(--sh);
       position:relative; overflow:hidden;}
section.alt .voice{background:var(--bg);}
.voice::before{content:"\201C"; position:absolute; right:22px; top:-8px; font-size:120px; font-weight:900; line-height:1;
               color:var(--blue); opacity:.07; pointer-events:none;}
.voice figcaption{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.voice figcaption b{font-size:19px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.voice figcaption span{font-size:13.5px; color:var(--gray);}
.vsvc{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.vsvc span{font-size:12px; font-weight:700; color:var(--blue-d); background:var(--blue-l); border-radius:7px; padding:4px 9px;}
.voice blockquote{margin:14px 0 0; padding-left:14px; border-left:3px solid var(--blue); font-size:16px; font-weight:600;
                  line-height:1.7; color:var(--ink); letter-spacing:-.02em;}
.vsrc{margin-top:14px; font-size:12px; font-weight:700; color:var(--gray-l); letter-spacing:.04em;}
.proof .voice.wide{margin-top:0;}
@media (max-width:1000px){ .voices.n2{grid-template-columns:1fr;} }
@media (max-width:640px){ .voice{padding:22px 20px 18px;} .voice blockquote{font-size:15px;} }
@media print{ .voice{break-inside:avoid; box-shadow:none;} }

/* v2.9.1 · TRACK A 레퍼런스 — 국가철도공단 + 애터미 나란히 (카드 안은 세로) */
.proof-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.proof-2 .ref-main{grid-template-columns:1fr; gap:14px; align-content:start; margin-top:0; padding:26px 28px;}
.proof-2 .ref-main .eff{margin-top:0;}
.proof-2 .voice{margin:0; padding:26px 28px 22px;}
@media (max-width:1000px){ .proof-2{grid-template-columns:1fr;} }

/* v2.9.2 · 도입 단계 「필요 시」 태그 — 필수 단계가 아님을 표시 */
.opt-tag{display:inline-block; margin-left:6px; font-size:11.5px; font-weight:800; color:var(--gray); background:#eef1f6; border:1px solid #dde3ec; border-radius:6px; padding:2px 8px; vertical-align:2px; letter-spacing:0;}

/* v2.9.3 · 단계 화살표가 박스와 겹치지 않도록 — 화살표를 박스 사이 간격 한가운데에 둔다 */
.fb-steps{column-gap:30px; row-gap:30px;}
.fb-steps li + li::before{left:-15px; top:50%; transform:translate(-50%,-50%);}
.howpick{gap:10px 30px;}
.howpick li{position:relative;}
.howpick li + li{padding-left:7px;}
.howpick li + li::before{position:absolute; left:-15px; top:50%; transform:translate(-50%,-50%); margin:0;}
@media (max-width:640px){
  .fb-steps li + li::before{content:"↓"; left:50%; top:-15px; transform:translate(-50%,-50%);}
  .howpick{gap:10px;}
}

/* v2.9.4 · TRACK A 세그먼트 카드 단순화 — 두 카드 같은 구조 · 칩 대신 아이콘 목록 · 하단 링크 정렬 */
.segs2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;}
.seg2{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 30px 24px;
      box-shadow:var(--sh); transition:box-shadow .22s, border-color .22s;}
.seg2:hover{box-shadow:var(--sh-h); border-color:var(--sky2);}
.s2-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.s2-h h3{margin:0; font-size:21px; font-weight:800; color:var(--navy2); letter-spacing:-.035em;}
.s2-h span{font-size:12.5px; font-weight:700; color:var(--gray-l);}
.seg2 > p{margin:10px 0 0; font-size:15px; color:var(--gray); line-height:1.72;}
.s2-svc{display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);}
.s2-svc a{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14.3px; font-weight:700; color:var(--navy2); transition:color .18s;}
.s2-svc a:hover{color:var(--blue-d);}
.s2-svc i{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--icl); color:var(--ic); display:grid; place-items:center;}
.s2-svc i svg{width:15px; height:15px;}
.s2-go{margin-top:auto; padding-top:18px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:800; color:var(--blue);}
.s2-go .ar{transition:transform .2s;} .s2-go:hover .ar{transform:translateX(3px);}
@media (max-width:1000px){ .segs2{grid-template-columns:1fr;} }
@media (max-width:640px){ .seg2{padding:22px 20px 20px;} .s2-svc{grid-template-columns:1fr;} }
@media print{ .seg2{break-inside:avoid; box-shadow:none;} }

/* ════════════════════════════════════════════════════════════════
   v3.0 · TRACK A 리듬 — 탭 패널 → 열린 일러스트 → 꽉 찬 색 띠 → 큰 인용문
   ════════════════════════════════════════════════════════════════ */
/* 01 · 탭 패널 */
.segtabs{margin-top:22px;}
.st-tabs{display:flex; gap:6px; flex-wrap:wrap;}
.st-tabs button{font:inherit; font-size:15.5px; font-weight:800; letter-spacing:-.02em; cursor:pointer; color:var(--gray);
                background:transparent; border:none; border-bottom:3px solid transparent; padding:10px 16px 12px; transition:.18s;}
.st-tabs button:hover{color:var(--navy2);}
.st-tabs button.on{color:var(--blue-d); border-bottom-color:var(--blue);}
.segtabs .seg2{display:none; grid-template-columns:1fr 1.15fr; gap:36px; align-items:center;
               background:#fff; border:1px solid var(--line); border-radius:0 22px 22px 22px; padding:30px 34px; box-shadow:var(--sh);}
.segtabs .seg2:hover{box-shadow:var(--sh);}
.segtabs .seg2.on{display:grid;}
.no-js .segtabs .seg2{display:grid; margin-bottom:12px;}
.segtabs .s2-l{display:flex; flex-direction:column; align-self:stretch;}
.segtabs .s2-l > p{margin:10px 0 0; font-size:15.5px; color:var(--gray); line-height:1.75;}
.segtabs .s2-svc{margin:0; padding:0 0 0 30px; border-top:none; border-left:1px solid var(--line);}
.segtabs .s2-go{padding-top:20px;}

/* 02 · 트리거 — 상자 없이, 흐름선 위에 */
.trigs.open{position:relative; gap:18px; margin-top:26px; background:none; border:none; box-shadow:none; border-radius:0; overflow:visible;}
.trigs.open::before{content:""; position:absolute; left:12%; right:12%; top:46px; height:2px;
                    background:repeating-linear-gradient(90deg,var(--sky2) 0 8px,transparent 8px 16px); opacity:.7;}
.trigs.open .trig{background:none; border:none; box-shadow:none; padding:0; flex-direction:column; align-items:center; text-align:center; position:relative;}
.trigs.open .trig:hover{transform:none; box-shadow:none;}
.trigs.open .trig .art{margin:0; width:96px; height:96px; border-radius:50%; background:#fff; border:1px solid var(--line);
                       box-shadow:var(--sh); display:grid; place-items:center;}
.trigs.open .trig .art svg{max-width:78px;}
.trigs.open .trig .tt{margin-top:14px;}
.trigs.open .trig h3{font-size:17px; margin:0;}
.trigs.open .trig p{font-size:13.8px; line-height:1.65; margin:6px auto 0; max-width:16em;}

/* 03 · 꽉 찬 색 띠 */
.keyband.bleed{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; border:none;
               padding:56px max(28px, calc(50vw - 542px)) 58px;
               background:linear-gradient(180deg,#eaf1ff 0%,#f2f7ff 100%);}

/* 04 · 큰 인용문 + 레퍼런스 한 줄 */
.pull{margin:8px 0 0; padding:10px 0 0; text-align:center; position:relative;}
.pull::before{content:"\201C"; display:block; font-size:84px; font-weight:900; line-height:.6; color:var(--blue); opacity:.25; height:40px;}
.pull blockquote{margin:0 auto; max-width:30em; font-size:27px; font-weight:800; letter-spacing:-.035em; line-height:1.45; color:var(--navy2);}
.pull blockquote em{font-style:normal; color:var(--blue-d);}
.pull-sub{margin:14px auto 0; max-width:40em; font-size:16px; color:var(--gray); line-height:1.7;}
.pull figcaption{margin-top:18px; display:flex; justify-content:center; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--gray);}
.pull figcaption b{font-size:16px; color:var(--navy2);}
.pull figcaption .src{font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--gray-l);}
.refline{margin-top:28px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:16px 4px;
         border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.refline b{font-size:16px; color:var(--navy2);}
.refline .since{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--blue);}
.refline .since i{width:5px; height:5px; border-radius:50%; background:var(--mint);}
.refline .rl-t{font-size:14.5px; color:var(--ink);}
.refline .rl-s{font-size:12.8px; color:var(--gray-l); margin-left:auto;}
.proof .refline + .devbar{margin-top:20px;}

@media (max-width:1000px){
  .segtabs .seg2{grid-template-columns:1fr; gap:20px;}
  .segtabs .s2-svc{padding:18px 0 0; border-left:none; border-top:1px solid var(--line);}
  .trigs.open::before{display:none;}
  .trigs.open{row-gap:28px;}
  .pull blockquote{font-size:22px;}
  .refline .rl-s{margin-left:0;}
}
@media (max-width:640px){
  .st-tabs button{font-size:14px; padding:8px 10px 10px;}
  .segtabs .seg2{padding:22px 20px; border-radius:0 18px 18px 18px;}
  .keyband.bleed{padding:40px 20px 42px;}
  .pull blockquote{font-size:19px;}
}
@media print{
  .segtabs .seg2{display:grid !important; margin-bottom:10px;}
  .st-tabs{display:none;}
  .keyband.bleed{margin-left:0; margin-right:0; padding:20px;}
}

/* 탭 이름과 패널 제목 중복 제거 — 패널에서는 붙는 업무만 표시 */
.segtabs .s2-h h3{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.segtabs .s2-h span{font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--blue); background:var(--blue-l); border-radius:7px; padding:4px 10px;}
.segtabs .s2-l > p{font-size:16.5px; color:var(--ink); margin-top:14px;}
@media print{ .segtabs .s2-h h3{position:static; width:auto; height:auto; clip:auto;} }

/* ════════════════════════════════════════════════════════════════
   v3.1 · TRACK B 리듬 (A와 다른 형태) — 번호 행 목록 → 좌우 분할 → 연도 타임라인
   ════════════════════════════════════════════════════════════════ */
/* 01 · 제품 유형 4행 (다크) */
.prows{margin-top:26px; border-top:1px solid rgba(255,255,255,.14);}
.prow{display:grid; grid-template-columns:128px 1.15fr 1.25fr auto; gap:28px; align-items:center;
      padding:22px 14px; border-bottom:1px solid rgba(255,255,255,.14); transition:background .2s;}
.prow:hover{background:rgba(255,255,255,.04);}
.prow .art{display:grid; place-items:center;}
.prow .art svg{width:100%; max-width:120px; height:auto;}
.pr-n{font-size:12.5px; font-weight:900; letter-spacing:.1em; color:#8ef0da;}
.pr-t h3{margin:4px 0 0; font-size:20px; font-weight:800; color:#fff; letter-spacing:-.03em;}
.pr-t p{margin:6px 0 0; font-size:14.3px; color:#b9cbe6; line-height:1.65;}
.pr-t .warn{font-size:12.8px; color:#ffd9a0; margin-top:6px;}
.pr-t .warn.soap{color:#cfe0f8;} .pr-t .warn.soap b{color:#fff;}
.pr-svc{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;}
.pr-svc a{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:#dbe6f6; transition:color .18s;}
.pr-svc a:hover{color:#fff;}
.pr-svc i{flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center;}
.pr-svc i svg{width:14px; height:14px;}
.pr-svc .g-tax i,.pr-svc .g-cash i{color:#9dbdff;}
.pr-svc .g-hometax i,.pr-svc .g-bank i,.pr-svc .g-card i,.pr-svc .g-corp i{color:#8ef0da;}
.pr-go{white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:#8ef0da;
       border:1px solid rgba(142,240,218,.4); border-radius:99px; padding:9px 16px; transition:.2s;}
.pr-go:hover{background:rgba(142,240,218,.12); color:#fff;}
.prow:target{background:rgba(127,176,255,.1);}

/* 02 · 좌우 분할 — 왼쪽 큰 제목, 오른쪽 2×2 체크 */
.keyband.split{display:grid; grid-template-columns:.9fr 1.3fr; gap:40px; align-items:center; margin-top:50px;
               border:none; padding:0; background:none;}
.keyband.split .subhead.key{flex-direction:column; align-items:flex-start; gap:10px;}
.keyband.split .subhead.key b{font-size:32px; line-height:1.35;}
.keyband.split .gains{grid-template-columns:1fr 1fr; gap:14px; margin-top:0;}
.keyband.split .gain{border-left:none; border-radius:18px; padding:22px 22px 20px 58px; position:relative;
                     background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);}
.keyband.split .gain::after{content:""; position:absolute; left:20px; top:24px; width:24px; height:24px; border-radius:50%;
                            background:#8ef0da url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1e38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;}
.keyband.split .gain b{font-size:21px;}
.keyband.split .gain span{font-size:13.8px;}

/* 03 · 레퍼런스 연도 타임라인 */
.tline{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr) .55fr; gap:0; position:relative;}
.tline::before{content:""; position:absolute; left:0; right:0; top:34px; height:2px; background:linear-gradient(90deg,var(--blue),var(--mint));}
.tline li{position:relative; padding-right:22px;}
.tl-y{display:block; font-size:14px; font-weight:900; color:var(--blue-d); letter-spacing:.02em; height:24px;}
.tline li i{display:block; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--blue); margin:3px 0 16px;
            box-shadow:0 0 0 5px rgba(47,107,255,.12);}
.tline li b{display:block; font-size:18px; font-weight:800; color:var(--navy2); letter-spacing:-.03em;}
.tline li b small{font-size:13px; font-weight:600; color:var(--gray);}
.tl-e{display:block; font-size:14px; color:var(--gray); line-height:1.7; margin-top:6px;}
.tline .tl-now i{border-color:var(--mint); box-shadow:0 0 0 5px rgba(46,211,172,.18);}
.tline .tl-now .tl-y{color:#0d8f74;}
.tline .tl-now b{font-size:15px; color:#0d8f74;}

@media (max-width:1000px){
  .prow{grid-template-columns:96px 1fr; gap:14px 18px;}
  .prow .pr-svc,.prow .pr-go{grid-column:2;} .prow .pr-go{justify-self:start;}
  .keyband.split{grid-template-columns:1fr; gap:22px;}
  .tline{grid-template-columns:1fr; gap:22px; padding-left:30px;}
  .tline::before{left:8px; right:auto; top:0; bottom:0; width:2px; height:auto; background:linear-gradient(180deg,var(--blue),var(--mint));}
  .tline li i{position:absolute; left:-30px; top:2px; margin:0;}
  .tl-y{height:auto;}
}
@media (max-width:640px){
  .prow{grid-template-columns:1fr;} .prow .art{justify-self:start;} .prow .art svg{max-width:96px;}
  .prow .pr-svc,.prow .pr-go{grid-column:1;} .pr-svc{grid-template-columns:1fr;}
  .keyband.split .gains{grid-template-columns:1fr;} .keyband.split .subhead.key b{font-size:24px;}
}
@media print{ .prow,.tline li{break-inside:avoid;} }

/* v3.1 보정 — 행 서비스 열 정렬 · 분할 제목 줄바꿈 */
.prow{grid-template-columns:128px 1.15fr 1.25fr 150px;}
.pr-go{justify-self:end;}
.keyband.split{grid-template-columns:1fr 1.25fr;}
.keyband.split .subhead.key b{font-size:29px; word-break:keep-all;}
@media (max-width:1000px){ .prow{grid-template-columns:96px 1fr;} .pr-go{justify-self:start;} }
@media (max-width:640px){ .prow{grid-template-columns:1fr;} }

/* v3.2 · TRACK B 유형 — 한눈에: 일러스트 · 이름 · 차이 한 줄 · 화살표 (2×2, 행 전체 클릭) */
.prows2{display:grid; grid-template-columns:1fr 1fr; margin-top:24px; border-top:1px solid rgba(255,255,255,.14);}
.prow2{display:grid; grid-template-columns:104px 1fr 44px; gap:18px; align-items:center; padding:20px 18px;
       border-bottom:1px solid rgba(255,255,255,.14); transition:background .2s;}
.prow2:nth-child(odd){border-right:1px solid rgba(255,255,255,.14);}
.prow2:hover{background:rgba(255,255,255,.05);}
.prow2 .art{display:grid; place-items:center;} .prow2 .art svg{width:100%; max-width:100px; height:auto;}
.p2-t b{display:block; font-size:19px; font-weight:800; color:#fff; letter-spacing:-.03em;}
.p2-t span{display:block; margin-top:6px; font-size:15px; color:#b9cbe6; line-height:1.6;}
.p2-go{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#8ef0da;
       border:1px solid rgba(142,240,218,.4); transition:.2s;}
.prow2:hover .p2-go{background:#8ef0da; color:var(--navy2); transform:translateX(3px);}
.prow2:target{background:rgba(127,176,255,.1);}
@media (max-width:1000px){ .prows2{grid-template-columns:1fr;} .prow2:nth-child(odd){border-right:none;} }
@media (max-width:640px){ .prow2{grid-template-columns:72px 1fr 36px; gap:12px; padding:16px 6px;} .p2-t b{font-size:17px;} .p2-t span{font-size:14px;} }

/* v3.2.1 · TRACK B 01·02 제목 크기 통일 + 구분선 */
.keyband.split{display:block; margin-top:64px; padding-top:44px; border-top:1px solid rgba(255,255,255,.14);}
.keyband.split .subhead{margin-top:0;}
.keyband.split .gains{grid-template-columns:repeat(4,1fr); margin-top:24px;}
@media (max-width:1000px){ .keyband.split .gains{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .keyband.split .gains{grid-template-columns:1fr;} .keyband.split{margin-top:48px; padding-top:32px;} }
.darktrack .keyband.split{border:none; border-top:1px solid rgba(255,255,255,.14); border-radius:0; background:none;}
/* 목록 하단선과 구분선이 겹쳐 보여 선은 빼고 여백으로 구분 */
.darktrack .keyband.split{border-top:none; margin-top:80px; padding-top:0;}
@media (max-width:640px){ .darktrack .keyband.split{margin-top:56px;} }

/* v3.2.2 · 시스템 탭 → 버튼형(세그먼트 컨트롤) */
.st-tabs{display:inline-flex; gap:6px; padding:6px; background:#e9eef7; border-radius:16px; margin-bottom:14px;}
.st-tabs button{border:none; border-radius:11px; padding:12px 22px; font-size:15px; color:var(--gray); background:transparent;
                display:inline-flex; align-items:center; gap:8px;}
.st-tabs button::after{content:"→"; font-size:13px; opacity:0; transform:translateX(-4px); transition:.18s;}
.st-tabs button:hover{background:#fff; color:var(--navy2);}
.st-tabs button:hover::after{opacity:.6; transform:none;}
.st-tabs button.on{background:#fff; color:var(--blue-d); box-shadow:0 4px 14px rgba(14,35,70,.12); border-bottom:none;}
.st-tabs button.on::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--blue);}
.st-tabs button.on::after{display:none;}
.segtabs .seg2{border-radius:22px;}
@media (max-width:640px){ .st-tabs{display:flex;} .st-tabs button{flex:1; justify-content:center; padding:10px 8px; font-size:13.5px;} }

.acc .ans .prep-list{margin:10px 0 0;}

/* v3.3 · 수익 구조 흐름 도식 */
.rev-flow{display:block; width:100%; max-width:420px; height:auto; margin:4px auto 16px; overflow:visible;}
.rev-flow .rv-node{animation:fl 4s ease-in-out infinite;}
.rev-flow .rv-node:nth-of-type(2){animation-delay:.5s;} .rev-flow .rv-node:nth-of-type(3){animation-delay:1s;}
.rev-c{display:flex; flex-direction:column;}
.rev-c i{align-self:flex-start;}
@media (prefers-reduced-motion:reduce){ .rev-flow animateMotion{display:none;} }

/* 수익 구조 번호를 카드 맨 위로 — 크게 */
.rev-c i{width:32px; height:32px; font-size:15px; margin-bottom:6px; box-shadow:0 0 0 5px rgba(142,240,218,.15);}

/* ════════════════════════════════════════════════════════════════
   v3.4 · 컬러 단순화 (피드백 2026-10-02)
   역할: 기본·정보 = 블루 1색 / 행동 = 오렌지(주요 버튼 · 골라 담기 +) / 혜택 = 민트(신청월 무료) / 주의 = 앰버
   ════════════════════════════════════════════════════════════════ */
/* 그라데이션 제목 → 단색 */
h2 .g,.hero h1 .g,.darktrack h2 .g{background:none !important; -webkit-background-clip:border-box; background-clip:border-box; color:var(--blue) !important; -webkit-text-fill-color:currentColor;}
.hero h1 .g,.contact h2 .g{color:#7fb0ff !important;}

/* 서비스 아이콘 그룹색 → 블루 통일 (모양으로만 구분) */
.g-tax,.g-cash,.g-edoc,.g-sms,.g-fax,.g-kakao,.g-hometax,.g-bank,.g-card,.g-corp{--ic:var(--blue); --icl:var(--blue-l);}
.g-tax.picon,.g-cash.picon,.g-edoc.picon,.g-sms.picon,.g-fax.picon,.g-kakao.picon,.g-hometax.picon,.g-bank.picon,.g-card.picon,.g-corp.picon{color:#9dbdff;}
.pr-svc .g-tax i,.pr-svc .g-cash i,.pr-svc .g-hometax i,.pr-svc .g-bank i,.pr-svc .g-card i,.pr-svc .g-corp i{color:var(--blue);}

/* 골라 담기 — 칩 색 통일, + 는 오렌지, 단계 번호는 검정 */
.crow,.crow.g2,.crow.g3{--ac:var(--blue); --acl:var(--blue-l);}
.cl{border-left-color:var(--blue);}
.chip .ck{border-color:#ff7a1a;}
.chip .ck::before,.chip .ck::after{background:#ff7a1a;}
.chip:hover .ck{background:#fff1e6;}
.chip[aria-pressed="true"] .ck{border-color:#fff; background:#fff;}
.chip[aria-pressed="true"] .ck::before,.chip[aria-pressed="true"] .ck::after{background:var(--blue);}
.plus-k{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1.5px solid #ff7a1a; color:#ff7a1a;
        font-size:15px; font-weight:900; line-height:1; vertical-align:1px; margin:0 1px;}
.howpick i{background:#111 !important;}
.howpick b em{color:#111;}
.tr-list .g1 .ti2,.tr-list .g2 .ti2,.tr-list .g3 .ti2{color:#9dbdff;}
.chip.hint{animation:hintRing 1.6s ease-out infinite;}

/* 민트는 혜택에만 — 그 외 강조는 블루 */
.step-tag b{background:var(--blue);}
.tline::before{background:var(--blue);}
.tline .tl-now i{border-color:var(--blue); box-shadow:0 0 0 5px rgba(47,107,255,.12);}
.tline .tl-now .tl-y,.tline .tl-now b{color:var(--blue-d);}
.gain::before{background:var(--blue);}
.trigs.open::before{background:repeating-linear-gradient(90deg,#c9d6ee 0 8px,transparent 8px 16px);}
.flow4::before{background:var(--blue);}
.progress{background:var(--blue);}

/* ══ TRACK B — 진한 남색 → 밝은 면 ══ */
.darktrack{background:#eef3fb !important; color:var(--ink);}
.darktrack::before,.darktrack::after{display:none;}
.darktrack h2,.darktrack .subhead b{color:var(--navy2);}
.darktrack .subhead span{color:var(--gray);}
.darktrack .subhead .no{color:var(--blue);}
.darktrack .step-tag{color:var(--blue); background:#fff; border-color:#d8e5ff;}
.darktrack .step-tag b{background:var(--blue); color:#fff;}
.prows2{border-top-color:#d6e0f0;}
.prow2{border-bottom-color:#d6e0f0;}
.prow2:nth-child(odd){border-right-color:#d6e0f0;}
.prow2:hover{background:#fff;}
.p2-t b{color:var(--navy2);}
.p2-t span{color:var(--gray);}
.p2-go{color:var(--blue); border-color:#bcd0f5;}
.prow2:hover .p2-go{background:var(--blue); color:#fff;}
.prow2:target{background:#fff;}
.keyband.split .gain,.darktrack .keyband.split .gain{background:#fff; border:1px solid #d8e2f2; box-shadow:var(--sh);}
.darktrack .gain b{color:var(--navy2);}
.darktrack .gain b em{color:var(--blue-d);}
.darktrack .gain span{color:var(--gray);}
.darktrack .gain span em{color:var(--navy2);}
.keyband.split .gain::after{background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");}

/* ══ 요금제 카드 ══ */
.plans2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px;}
.plan2{position:relative; background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:28px 30px 26px; box-shadow:var(--sh); overflow:hidden;}
section.alt .plan2{background:#fff;}
.plan2::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--blue);}
.pl-name{display:flex; align-items:center; gap:12px;}
.pl-badge{font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--blue); background:var(--blue-l); border-radius:7px; padding:4px 10px;}
.pl-name h3{margin:0; font-size:28px; font-weight:800; color:var(--navy2); letter-spacing:-.04em;}
.pl-basis{margin-top:14px; padding:14px 18px; border-radius:14px; background:var(--bg); font-size:15px; color:var(--gray);}
.pl-basis b{font-size:22px; font-weight:800; color:var(--blue-d); letter-spacing:-.03em; margin-right:4px;}
.pl-desc{margin:14px 0 0; font-size:14.8px; color:var(--gray); line-height:1.75;}
.pl-desc b{color:var(--navy2);}
.pl-list{list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px dashed var(--line); display:grid; gap:8px;}
.pl-list li{position:relative; padding-left:24px; font-size:14.8px; font-weight:700; color:var(--navy2);}
.pl-list li::before{content:""; position:absolute; left:0; top:.32em; width:15px; height:15px; border-radius:50%; background:var(--blue-l);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6bff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;}
.pl-list small{font-weight:600; color:var(--gray-l);}
.pl-ribbon{position:absolute; top:22px; right:-38px; transform:rotate(35deg); width:150px; text-align:center;
           font-size:12px; font-weight:800; color:#0b3b30; background:#8ef0da; padding:6px 0; box-shadow:0 4px 10px rgba(46,211,172,.3);}
.pl-note{margin:16px 0 0; font-size:13.8px; color:var(--gray); text-align:center;}

/* ══ 상담 영역 ══ */
.gets{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px;}
.gets li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.gets li i{flex:0 0 auto; font-style:normal; width:30px; height:30px; border-radius:50%; background:#7fb0ff; color:var(--navy2); display:grid; place-items:center; font-size:14px; font-weight:900;}
.gets b{display:block; font-size:16.5px; color:#fff; font-weight:800;}
.gets span{display:block; font-size:13.8px; color:#b9cbe6; margin-top:3px; line-height:1.6;}
.next{margin-top:18px; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);}
.next b{display:block; font-size:12.5px; font-weight:800; letter-spacing:.06em; color:#7fb0ff;}
.next span{display:block; margin-top:6px; font-size:14.8px; color:#fff; font-weight:700; line-height:1.6;}
.next small{display:block; margin-top:8px; font-size:12.5px; color:#93aac9; line-height:1.6;}
.fast{color:var(--blue-d); background:var(--blue-l); border-color:#cfdcff;}
.fast b{color:var(--blue-d);} .fast .dot2{background:var(--blue);}

@media (max-width:1000px){ .plans2{grid-template-columns:1fr;} }
@media print{ .plan2{break-inside:avoid;} .darktrack{-webkit-print-color-adjust:exact; print-color-adjust:exact;} }

.plus-k.big{width:38px; height:38px; font-size:26px; border-width:2.5px; vertical-align:5px; margin:0 3px;}
@media (max-width:640px){ .plus-k.big{width:28px; height:28px; font-size:19px; vertical-align:3px;} }

/* v3.4.1 · 골라 담기 섹션 초록 → 회색 (색 수 줄이기) */
.cl .u.m{color:var(--gray); background:#eef1f6;}
.chip .cf{color:var(--gray); background:#eef1f6;}
.chip[aria-pressed="true"] .cf{color:#fff; background:rgba(255,255,255,.22);}
.tr-free{color:#fff; background:rgba(255,255,255,.12);}
.tr-n{color:var(--navy2); background:#fff;}
.tr-list .tx .bl.m{color:#cfe0f8; background:rgba(255,255,255,.14);}


/* v3.4.3 · 시스템 탭 패널 — 탭마다 다른 면 + 전환 애니메이션 */
.segtabs .seg2{position:relative; overflow:hidden;}
.segtabs .seg2::after{position:absolute; right:26px; bottom:-18px; font-size:110px; font-weight:900; letter-spacing:-.04em; line-height:1;
                      pointer-events:none; opacity:.06; color:var(--navy2);}
#seg-erp.seg2{background:#fff; border-color:#cfdcff;}
#seg-erp.seg2::after{content:"ERP";}
#seg-inhouse.seg2{background:linear-gradient(150deg,#0e2748 0%,#173a6b 100%); border-color:#173a6b;}
#seg-inhouse.seg2::after{content:"ADMIN"; color:#fff;}
#seg-inhouse .s2-l > p{color:#dbe6f6;}
#seg-inhouse .s2-h span{color:#fff; background:rgba(255,255,255,.14);}
#seg-inhouse .s2-svc{border-left-color:rgba(255,255,255,.16);}
#seg-inhouse .s2-svc a{color:#fff;}
#seg-inhouse .s2-svc i{background:rgba(255,255,255,.12); color:#9dbdff;}
#seg-inhouse .s2-go{color:#9dbdff;}
.segtabs .seg2.on{animation:panelIn .38s cubic-bezier(.2,.7,.3,1);}
@keyframes panelIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
/* 선택 탭 색을 패널과 맞춤 */
.st-tabs button[data-tab="seg-inhouse"].on{background:#173a6b; color:#fff;}
.st-tabs button[data-tab="seg-inhouse"].on::before{background:#9dbdff;}
@media (max-width:1000px){ #seg-inhouse .s2-svc{border-top-color:rgba(255,255,255,.16);} .segtabs .seg2::after{font-size:72px;} }
@media (prefers-reduced-motion:reduce){ .segtabs .seg2.on{animation:none;} }

/* v3.4.4 · 사내 프로그램 패널 — 남색 → 브랜드 블루 */
#seg-inhouse.seg2{background:linear-gradient(135deg,#2f6bff 0%,#4a7fff 100%); border-color:#2f6bff;}
#seg-inhouse .s2-l > p{color:#fff;}
#seg-inhouse .s2-h span{background:rgba(255,255,255,.2);}
#seg-inhouse .s2-svc{border-left-color:rgba(255,255,255,.28);}
#seg-inhouse .s2-svc i{background:rgba(255,255,255,.2); color:#fff;}
#seg-inhouse .s2-go{color:#fff;}
#seg-inhouse.seg2::after{opacity:.1;}
.st-tabs button[data-tab="seg-inhouse"].on{background:var(--blue); color:#fff;}
.st-tabs button[data-tab="seg-inhouse"].on::before{background:#fff;}
@media (max-width:1000px){ #seg-inhouse .s2-svc{border-top-color:rgba(255,255,255,.28);} }

/* v3.4.5 · 사내 프로그램 패널 — 채도 낮춘 차분한 블루 (#2456A6 계열) */
#seg-inhouse.seg2{background:linear-gradient(135deg,#2456a6 0%,#2f62b3 100%); border-color:#2456a6;}
.st-tabs button[data-tab="seg-inhouse"].on{background:#2456a6;}
#seg-inhouse.seg2::after{opacity:.08;}

/* ════════════════════════════════════════════════════════════════
   v3.5 · 남색 정리 — 남색은 히어로·상담·푸터에만, 중간의 진한 면은 딥블루 1색
   ════════════════════════════════════════════════════════════════ */
:root{--deep:#2456a6; --deep2:#2f62b3;}
.tray{background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 100%); box-shadow:0 20px 44px rgba(36,86,166,.28);}
.tray::before{display:none;}
.track-cta{background:linear-gradient(135deg,var(--deep) 0%,var(--deep2) 100%);}
.rev{background:linear-gradient(135deg,var(--deep) 0%,var(--deep2) 100%);}
.rev::before{display:none;}
/* 진한 면 위 보조 글씨 밝게 */
.tr-empty,.tr-list .tx span,.tr-bill span,.tr-note,.tr-pre > span,.tr-reset{color:#dbe6f6;}
.tr-empty{border-color:rgba(255,255,255,.35);}
.track-cta .t > span,.cta-cost{color:#dbe6f6;}
.cta-cost a,.tr-list .tx a{color:#fff; text-decoration:underline;}
.rev-h > span:last-child,.rev-c span,.rev-n{color:#dbe6f6;}
.rev-c{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22);}
.gets span,.next small{color:#c9d6ea;}
.ti .v,.pcard .r .v{color:#dbe6f6;}
.hero p,.phero .lead{color:#c9d6ea;}
.devnote{color:#b3c4dc;}


/* v3.5.2 · 딥블루 면 위 버튼 — 같은 파랑이라 묻히던 것을 흰 버튼으로 */
.tray .btn-primary,.track-cta .btn-primary,.rev .btn-primary{background:#fff; color:var(--deep); box-shadow:0 8px 20px rgba(8,23,43,.22);}
.tray .btn-primary:hover,.track-cta .btn-primary:hover,.rev .btn-primary:hover{background:#eef3ff; box-shadow:0 12px 26px rgba(8,23,43,.28);}

/* ════════════════════════════════════════════════════════════════
   v3.6 · 문의 폼 드롭다운 — 둥근 목록 (입력창·카드와 같은 모양)
   ════════════════════════════════════════════════════════════════ */
.csel{position:relative;}
.csel-native{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; border:0 !important;
             opacity:0; pointer-events:none; left:12px; bottom:0;}
.csel-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; cursor:pointer;
          border:1.5px solid var(--line); border-radius:12px; padding:14px 15px; background:#fbfcfe;
          font:inherit; font-size:15px; color:var(--ink); transition:border-color .2s, box-shadow .2s, background .2s;}
.csel-btn::after{content:""; flex:0 0 auto; width:8px; height:8px; margin:-4px 4px 0 0;
                 border-right:2px solid var(--gray); border-bottom:2px solid var(--gray); transform:rotate(45deg); transition:transform .2s;}
.csel-btn:hover{border-color:var(--sky2);}
.csel-btn:focus-visible,.csel.open .csel-btn{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,107,255,.11);}
.csel.open .csel-btn::after{transform:rotate(-135deg); margin-top:4px;}
.csel.empty .csel-cur{color:var(--gray-l);}
.csel-list{display:none; position:absolute; z-index:30; left:0; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none;
           background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 44px rgba(14,35,70,.16);
           max-height:460px; overflow-y:auto; animation:cselIn .16s ease;}
.csel.up .csel-list{top:auto; bottom:calc(100% + 8px);}
.csel.open .csel-list{display:block;}
@keyframes cselIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.csel-grp{padding:10px 12px 4px; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--gray-l);}
.csel-grp:not(:first-child){margin-top:6px; border-top:1px solid var(--line); padding-top:12px;}
.csel-opt{position:relative; padding:10px 36px 10px 12px; border-radius:10px; font-size:14.5px; color:var(--ink); cursor:pointer; outline:none;}
.csel-opt.in{padding-left:20px;}
.csel-opt:hover,.csel-opt:focus{background:var(--bg);}
.csel-opt[aria-selected="true"]{background:var(--blue-l); color:var(--blue-d); font-weight:700;}
.csel-opt[aria-selected="true"]::after{content:""; position:absolute; right:15px; top:50%; width:5px; height:10px; margin-top:-7px;
                                       border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(40deg);}
.csel-opt.in + .csel-opt:not(.in){margin-top:6px; position:relative;}
.csel-opt.in + .csel-opt:not(.in)::before{content:""; position:absolute; left:6px; right:6px; top:-4px; border-top:1px solid var(--line);}
@media (prefers-reduced-motion:reduce){ .csel-list{animation:none;} }
@media print{ .csel-list{display:none !important;} }

/* v3.6.1 · 연동 방법 4단계 — 여백 · 큰 제목 · 짧은 문구 */
.howto-h{margin-top:96px;}
.howto-h h3{margin:0; font-size:28px; font-weight:800; letter-spacing:-.04em; color:var(--navy2);}
.flow4.big{margin-top:32px;}
.flow4.big::before{top:27px;}
.flow4.big .stp .num{width:56px; height:56px; font-size:21px;}
.flow4.big .stp h4{margin-top:20px; font-size:20px;}
.flow4.big .stp p{margin-top:8px; font-size:15.5px; color:var(--ink); line-height:1.6;}
.flow4.big .stp-a{margin-top:14px; font-size:14px;}
@media (max-width:1000px){ .howto-h{margin-top:72px;} .howto-h h3{font-size:24px;} }
@media (max-width:640px){ .howto-h{margin-top:56px;} .howto-h h3{font-size:22px;} }
.flow4.big .stp{display:flex; flex-direction:column;}
.flow4.big .stp p{flex:1;}
.flow4.big .stp-a{align-self:flex-start;}

/* v3.6.2 · 요금제 카드 — 카드 사용내역 하위 항목(승인·매입) */
.pl-sub{list-style:none; margin:8px 0 0; padding:0 0 0 2px; display:grid; gap:6px;}
.pl-sub li{position:relative; padding-left:18px; font-size:14px; font-weight:600; color:var(--gray);}
.pl-sub li::before{content:""; position:absolute; left:2px; top:.2em; width:8px; height:8px; border-left:1.5px solid #c3cddc; border-bottom:1.5px solid #c3cddc;
                   border-radius:0 0 0 3px; background:none;}
.pl-sub small{font-weight:600; color:var(--gray-l);}

/* v3.6.3 · 선택기 카드 — 처음 모양으로 되돌리고, 상자 자체에 입체감(그림자)으로 변화 */
.picks .pk{background:#fff; border:1px solid #e3e9f3; cursor:pointer;
           box-shadow:0 1px 2px rgba(14,35,70,.04), 0 12px 32px rgba(14,35,70,.09);
           transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;}
.picks .pk::before{background:var(--blue);}
.picks .pk:hover{background:#fff; transform:translateY(-8px); border-color:#c9d8f5;
                 box-shadow:0 2px 4px rgba(14,35,70,.05), 0 28px 56px rgba(14,35,70,.17);}
.picks .pk:active{transform:translateY(-3px); box-shadow:0 2px 4px rgba(14,35,70,.05), 0 14px 30px rgba(14,35,70,.12);}

/* v3.6.4 · 선택기 TRACK B 카드만 옅은 파란 면 — A(흰색)와 구분 */
.picks .pk:last-child,.picks .pk:last-child:hover{background:linear-gradient(160deg,#f2f6ff 0%,#e8efff 100%);}
.picks .pk:last-child{border-color:#d6e2fb;}
.picks .pk:last-child:hover{border-color:#b9cdf6;}
.picks .pk:last-child .tag,.picks .pk:last-child .mini span{background:#fff;}

/* v3.6.5
 · 상단 「개발자센터」 — 흐린 글자 링크 → 블루 외곽선 버튼 (2026-10-02) */
.gnb nav a.ext.btn-dev{color:var(--blue-d); background:var(--blue-l); border:1.5px solid #c9d8ff; border-radius:12px;
                       padding:11px 17px; font-weight:800; gap:7px; transition:background .2s, border-color .2s, color .2s, transform .2s;}
.gnb nav a.ext.btn-dev::after{display:none;}
.gnb nav a.ext.btn-dev:hover{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-1px);}
.gnb nav a.ext.btn-dev .dic{width:17px; height:17px; flex:0 0 auto;}
.gnb nav a.ext.btn-dev .aw{opacity:.85;}

/* v3.6.6 · 상담 폼 「20분 이내」 강조 */
.fast .fast-em{display:inline-flex; align-items:center; gap:5px; margin:0 2px; padding:3px 10px 3px 8px; border-radius:99px;
               background:var(--blue); color:#fff; font-weight:800; box-shadow:0 4px 10px rgba(47,107,255,.25);}
.fast .fast-ic{width:14px; height:14px; flex:0 0 auto;}

/* v3.6.7 · 제품 상세 히어로 아이콘 — 제목 위 단독 배치 → 제목 앞 작은 아이콘 */
.phero h1 .h1-row{display:flex; align-items:center; gap:14px;}
.phero h1 .picon{width:46px; height:46px; margin:0; border-radius:13px; flex:0 0 auto;}
.phero h1 .picon svg{width:24px; height:24px;}
.phero .freepill + h1{margin-top:14px;}
@media (max-width:640px){ .phero h1 .picon{width:38px; height:38px; border-radius:11px;} .phero h1 .picon svg{width:20px; height:20px;} .phero h1 .h1-row{gap:10px;} }

/* v3.6.8 · 상세·솔루션 「붙이기 전에」 섹션 여백 확대 */
#check .spec{margin-top:36px;}
#check .spec h3{padding:26px 34px;}
#check .sp-row{padding:26px 34px; gap:28px; line-height:1.85;}
#check .ssup{margin-top:48px;}
#check .ssup li{padding:26px 24px 26px 0;}
#check .ssup li + li{padding-left:24px;}
#check .ssup span{margin-top:6px;}
#check .devbar{margin-top:48px; padding:32px 36px;}
#check .testbox{margin-top:32px; padding:22px 26px;}
@media (max-width:640px){
  #check .spec h3,#check .sp-row{padding-left:22px; padding-right:22px;}
  #check .ssup li,#check .ssup li + li{padding:20px 0;}
  #check .ssup{margin-top:36px;} #check .devbar{margin-top:36px; padding:26px 22px;}
}

/* ════════════════════════════════════════════════════════════════
   v3.6.9 · 시스템 탭 — 「눌러봐야 하는 버튼」으로 (라디오형 선택 버튼 + 안내 문구 + 첫 클릭 전 깜빡임)
   ════════════════════════════════════════════════════════════════ */
.segtabs .st-hint{display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:14px; font-weight:700; color:var(--blue-d);}
.segtabs .st-hint svg{width:19px; height:19px; flex:0 0 auto;}
.segtabs .st-tabs{display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:0 0 18px; background:none; border-radius:0;}
.segtabs .st-tabs button{position:relative; display:inline-flex; align-items:center; gap:11px; padding:15px 24px 15px 18px;
  border:1.5px solid #cfdbef; border-radius:14px; background:#fff; color:var(--navy2);
  font:inherit; font-size:16px; font-weight:800; letter-spacing:-.02em; cursor:pointer;
  box-shadow:0 4px 12px rgba(14,35,70,.07); transition:transform .18s, box-shadow .18s, border-color .18s, background .18s, color .18s;}
/* 라디오 동그라미 — 하나를 고르는 버튼임을 알린다 */
.segtabs .st-tabs button::before{content:""; flex:0 0 auto; width:18px; height:18px; box-sizing:border-box; border-radius:50%;
  border:2px solid #b5c4dc; background:#fff; transition:border .18s, background .18s;}
.segtabs .st-tabs button::after{content:none;}
.segtabs .st-tabs button:hover{transform:translateY(-2px); border-color:var(--blue); box-shadow:0 10px 22px rgba(47,107,255,.16);}
.segtabs .st-tabs button:hover::before{border-color:var(--blue);}
.segtabs .st-tabs button:focus-visible{outline:3px solid rgba(47,107,255,.35); outline-offset:2px;}
/* 선택됨 — ERP */
.segtabs .st-tabs button.on{background:var(--blue-l); border:2px solid var(--blue); color:var(--blue-d); box-shadow:0 6px 16px rgba(47,107,255,.18);}
.segtabs .st-tabs button.on::before{border:5px solid var(--blue); background:#fff;}
/* 선택됨 — 사내 프로그램 (패널과 같은 딥블루) */
.segtabs .st-tabs button[data-tab="seg-inhouse"].on{background:#2456a6; border-color:#2456a6; color:#fff;}
.segtabs .st-tabs button[data-tab="seg-inhouse"].on::before{border:5px solid #fff; background:#2456a6;}
/* 선택된 버튼에서 패널로 내려가는 꼬리 */
.segtabs .st-tabs button.on::after{content:""; position:absolute; left:50%; bottom:-10px; width:14px; height:14px;
  transform:translateX(-50%) rotate(45deg); background:var(--blue-l); border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);}
.segtabs .st-tabs button[data-tab="seg-inhouse"].on::after{background:#2456a6; border-color:#2456a6;}
/* 아직 한 번도 안 눌렀으면 안 고른 쪽이 은은하게 깜빡인다 */
.segtabs.nudge .st-tabs button:not(.on){animation:tabNudge 1.8s ease-out infinite;}
@keyframes tabNudge{0%{box-shadow:0 0 0 0 rgba(47,107,255,.35), 0 4px 12px rgba(14,35,70,.07);} 75%,100%{box-shadow:0 0 0 10px rgba(47,107,255,0), 0 4px 12px rgba(14,35,70,.07);}}
/* 패널 테두리 — 진하고 두껍게 */
#seg-erp.seg2{border:2px solid #8caef0;}
#seg-inhouse.seg2{border:2px solid #2456a6;}
@media (max-width:640px){
  .segtabs .st-tabs{gap:8px;}
  .segtabs .st-tabs button{flex:1 1 0; justify-content:center; padding:12px 10px; font-size:14px; gap:8px;}
  .segtabs .st-tabs button::before{width:15px; height:15px;}
}
@media (prefers-reduced-motion:reduce){ .segtabs.nudge .st-tabs button:not(.on){animation:none;} }
@media print{ .segtabs .st-hint{display:none;} }
.segtabs .st-tabs button.on::after{display:block; opacity:1;}

/* ════════════════════════════════════════════════════════════════
   v3.7 · 도입 상담 폼 — 구글 시트 전송 · 개인정보 고지 · 결과 화면
   ════════════════════════════════════════════════════════════════ */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.cf-frame{position:absolute; width:0; height:0; border:0; visibility:hidden;}
.agree .req{font-style:normal; color:var(--blue); font-weight:700;}
.consent{margin-top:10px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe;}
.consent summary{list-style:none; cursor:pointer; padding:11px 14px; font-size:13px; font-weight:700; color:var(--gray); display:flex; align-items:center; justify-content:space-between;}
.consent summary::-webkit-details-marker{display:none;}
.consent summary::after{content:""; width:7px; height:7px; border-right:1.8px solid var(--gray); border-bottom:1.8px solid var(--gray); transform:rotate(45deg); margin:-4px 4px 0 0; transition:transform .2s;}
.consent[open] summary::after{transform:rotate(-135deg); margin-top:3px;}
.consent dl{margin:0; padding:2px 14px 6px; display:grid; grid-template-columns:5.2em 1fr; gap:8px 10px; font-size:12.8px; line-height:1.6;}
.consent dt{font-weight:800; color:var(--navy2);}
.consent dd{margin:0; color:var(--gray);}
.consent-op{margin:0; padding:0 14px 12px; font-size:12px; color:var(--gray-l);}
.form-status{margin:14px 0 0; padding:12px 14px; border-radius:12px; background:#fff4f0; border:1px solid #ffd2c2; color:#b8401a; font-size:13.5px; line-height:1.6;}
.form-status a{color:#b8401a; font-weight:800; text-decoration:underline;}
.submit[disabled]{opacity:.7; cursor:wait; transform:none;}
.form-done{text-align:center; padding:26px 6px 8px; outline:none;}
.form-done .fd-ic{width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center;
                  box-shadow:0 10px 24px rgba(47,107,255,.3);}
.form-done .fd-ic svg{width:32px; height:32px;}
.form-done h3{margin:18px 0 0; font-size:21px;}
.form-done p{margin:10px 0 0; font-size:14.5px; color:var(--gray); line-height:1.7;}
.form-done p b{color:var(--blue-d);}
.form-done .fd-id{font-size:13px;}
.form-done .btn{margin-top:20px;}
@media (max-width:640px){ .consent dl{grid-template-columns:1fr; gap:2px;} .consent dd{margin-bottom:6px;} }

/* v3.7.1 · 개인정보 수집·이용 — 펼침 대신 개발자센터 개인정보처리방침으로 이동(새 탭) */
.consent-link{display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:11px 14px;
              border:1px solid var(--line); border-radius:12px; background:#fbfcfe; font-size:13px; font-weight:700; color:var(--gray); transition:.18s;}
.consent-link:hover{border-color:var(--sky2); color:var(--blue-d); background:#fff;}
.consent-link .aw{font-size:12px; opacity:.8;}

/* v3.7.2 · 동의 체크 아래 저장 위치 한 줄 고지 */
.consent-note{margin:8px 0 0 26px; font-size:12.5px; color:var(--gray); line-height:1.6;}
@media (max-width:640px){ .consent-note{margin-left:0;} }