/* 빌드솔루션 v2 탭 페이지 공통 (2026-10-27) — 서비스·포트폴리오·사례 상세·인사이트·문의·개인정보
   home-v2.css(색·글꼴·머리·푸터·버튼·카드) 위에 얹는다. 문의 신청서 class 는 site.js 가 쓰는 이름 그대로 */

/* ── 페이지 첫 화면 ── */
.phero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--hd) + clamp(48px,7vw,104px)) 0 clamp(64px,8vw,112px);background:var(--ink);color:#fff}
.phero::before{content:"";position:absolute;left:62%;top:-38%;width:1100px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(58,91,255,.3),transparent);z-index:-2;pointer-events:none}
.phero .grid-bg{-webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(70% 80% at 70% 40%,#000 15%,transparent 75%)}
.phero-word{position:absolute;right:-1vw;bottom:-.14em;z-index:-1;font:800 clamp(110px,19vw,300px)/.8 var(--en);font-stretch:118%;letter-spacing:-.05em;color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:28px;font:600 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
.crumb a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--sub-d);transition:color .2s}
.crumb a:hover{color:#fff}
.crumb i{width:6px;height:6px;flex:none;background:var(--blue-2)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(36px,5vw,76px);align-items:center}
.phero.solo .phero-grid{grid-template-columns:minmax(0,1fr)}
.phero h1{font-size:clamp(36px,5vw,70px);font-weight:800;line-height:1.15;letter-spacing:-.05em;text-wrap:balance}
.phero h1 .ln{display:block}
.phero h1 .pre{margin-bottom:14px;font-size:max(18px,.42em);letter-spacing:-.03em;line-height:1.4;color:var(--blue-2)}
.ref-body .cat b{font-weight:800;color:var(--ink)}
.phero .lead{max-width:600px;margin-top:24px}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.phero .svc-vis{box-shadow:0 50px 100px -50px rgba(0,0,0,.8)}
.phero .svc-vis{order:0}

/* ── 서비스: 강점 3 ── */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,60px)}
.trio li{padding:28px 26px 30px;border-radius:22px;background:var(--mist);border:1px solid var(--line)}
.mist .trio li{background:#fff}
.trio .no{font:600 12.5px/1 var(--mono);letter-spacing:.1em;color:var(--blue)}
.trio h3{margin:18px 0 10px;font-size:22px;font-weight:800;line-height:1.35;letter-spacing:-.04em}
.trio p{font-size:15.5px;line-height:1.72;color:var(--sub)}

/* ── 서비스: 두 상품(홈페이지·랜딩) ── */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.duo-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,36px);border-radius:26px;background:#fff;border:1px solid var(--line)}
.duo-card.dk{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier{font:700 13px/1.2 var(--en);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.dk .tier{color:var(--blue-2)}
.duo-card h3{margin:14px 0 10px;font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.045em;line-height:1.3}
.duo-card>p{font-size:16px;line-height:1.72;color:var(--sub)}
.dk>p,.dk .when{color:var(--sub-d)}
.ticks{display:grid;gap:11px;margin:22px 0}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;font-weight:700;line-height:1.55;letter-spacing:-.02em}
.ticks li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;background:var(--blue)}
.dk .ticks li::before{background:var(--blue-2)}
.when{margin-bottom:24px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.65;color:var(--sub)}
.dk .when{border-color:var(--line-d)}
.when b{color:inherit;font-weight:800}
.duo-card .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto}
.duo-card .btn{min-height:50px;padding:0 22px;font-size:15.5px}
.duo-note{margin-top:22px;font-size:15px;line-height:1.7;color:var(--sub)}

/* ── 서비스: 결과물 4 ── */
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);border-top:1px solid var(--line-2)}
.quad li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 12px;padding:28px 0;border-bottom:1px solid var(--line)}
.quad .no{grid-row:span 2;font:600 13px/1.65 var(--mono);color:var(--blue)}
.quad h3{font-size:20px;font-weight:800;letter-spacing:-.035em;line-height:1.4}
.quad p{font-size:15.5px;line-height:1.72;color:var(--sub)}

/* ── 서비스: 이런 곳에 추천 ── */
.fitlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fitlist li{display:flex;gap:14px;align-items:flex-start;padding:24px;border-radius:18px;background:var(--ink-2);border:1px solid var(--line-d);font-size:17px;font-weight:700;line-height:1.6;letter-spacing:-.025em}
.fitlist .ck{display:grid;place-items:center;flex:none;width:30px;height:30px;margin-top:-1px;border-radius:50%;background:rgba(58,91,255,.22);color:#c4cfff}
.fitlist .ck .ic{width:16px;height:16px}

/* ── 진행 과정 4단계(홈 .steps 재사용) ── */
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.light .step{background:var(--mist)}

/* ── 참고 화면 ── */
.refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.refs.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ref{display:flex;flex-direction:column;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),border-color .3s}
a.ref:hover{transform:translateY(-4px);border-color:var(--line-2)}
.ref-media{position:relative;aspect-ratio:var(--ar,16/10);background:var(--bgm,#eceff4);border-bottom:1px solid var(--line);overflow:hidden}
.ref-media img{width:100%;height:100%;object-fit:contain}
.ref-media.fill img{object-fit:cover;object-position:top}
.ref-media .chrome{position:relative;z-index:1}
.ref-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:22px 24px 24px}
.ref-body h3{font-size:20px;font-weight:800;letter-spacing:-.035em;line-height:1.38}
.ref-body p{font-size:15.5px;line-height:1.7;color:var(--sub)}
.ref-body .go-txt{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:800;color:var(--blue)}
.refs.four .ref-body{padding:18px 18px 20px}
.refs.four .ref-body h3{font-size:17.5px}
.refs.four .ref-body p{font-size:14.5px}

/* ── 상품 구성 ── */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pkg{display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.pkg.dk{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 40px 80px -40px rgba(10,11,14,.6)}
.pkg h3{margin:14px 0 10px;font-size:25px;font-weight:800;letter-spacing:-.045em;line-height:1.3}
.pkg>p{font-size:15.5px;line-height:1.7;color:var(--sub)}
.pkg.dk>p{color:var(--sub-d)}
.pkg .ticks{margin:22px 0 28px}
.pkg .btn{margin-top:auto;min-height:50px;font-size:15.5px}
.pkg .btn-line{border-color:var(--line-2)}
.pkg-note{margin-top:22px;font-size:15px;line-height:1.7;color:var(--sub)}

/* ── 마무리 띠 ── */
.cta-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(84px,10vw,136px) 0;background:linear-gradient(140deg,#4763ff 0%,#2c44da 55%,#1b2898 100%);color:#fff;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 90% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(70% 90% at 50% 50%,#000,transparent 80%)}
.cta-band .eyebrow{color:rgba(255,255,255,.82)}
.cta-band h2{font-size:clamp(28px,3.6vw,48px);font-weight:800;line-height:1.3;letter-spacing:-.045em;text-wrap:balance}
.cta-band h2 .ln{display:block}
.cta-band .lead{max-width:620px;margin:18px auto 0;color:rgba(255,255,255,.86)}
.cta-band .cta-row{margin-top:36px}

/* ── 다른 서비스 ── */
.svc-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.svc-nav a{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border-radius:18px;background:#fff;border:1px solid var(--line-2);transition:background-color .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.svc-nav a:hover{transform:translateY(-3px);border-color:var(--ink)}
.svc-nav a[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}
.svc-nav b{font:800 30px/1 var(--en);font-stretch:112%;letter-spacing:-.03em;color:#cdd5ff}
.svc-nav span{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.svc-nav small{font-size:13.5px;color:var(--sub);line-height:1.5}
.svc-nav a[aria-current=page] small{color:var(--sub-d)}

/* ── 포트폴리오 ── */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.fchips button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink);transition:background-color .25s,color .25s,border-color .25s}
.fchips button small{font:600 12px/1 var(--mono);opacity:.55}
.fchips button:hover{border-color:var(--ink)}
.fchips button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wgrid .ref[hidden]{display:none}
.case-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.case-link{display:flex;flex-direction:column;gap:12px;min-height:220px;padding:26px 24px 22px;border-radius:22px;background:var(--ink-2);border:1px solid var(--line-d);color:#fff;transition:transform .35s var(--ease),border-color .3s}
.case-link:hover{transform:translateY(-4px);border-color:rgba(123,147,255,.5)}
.case-link .tier{color:var(--blue-2)}
.case-link h3{font-size:21px;font-weight:800;letter-spacing:-.04em;line-height:1.38}
.case-link p{font-size:14.5px;line-height:1.65;color:var(--sub-d)}
.case-link .go-txt{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:14.5px;font-weight:800;color:#c4cfff}

/* ── 사례 상세 (site.js 가 data-case-* 칸을 채운다) ── */
.cd-tags{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:22px}
.cd-tags span{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line-d2);font-size:13.5px;font-weight:700;color:var(--sub-d)}
.cd-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line-d2)}
.cd-meta div{padding:20px 20px 0 0}
.cd-meta dt{font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
.cd-meta dd{margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.5}
.cd-sec{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line-2)}
.cd-sec:first-of-type{border-top:0}
.cd-sec h2{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.045em;line-height:1.3}
.cd-sec .eyebrow{margin-bottom:14px}
.cd-sec p{font-size:17px;line-height:1.85;color:var(--sub)}
.cd-sec ul{display:grid;gap:12px}
.cd-problems li{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:var(--mist);font-size:16px;font-weight:700;line-height:1.6;letter-spacing:-.02em}
.cd-problems li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;background:#e5484d}
.cd-sec .trio{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
[data-reference-list]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.reference-card{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden}
.reference-card img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#eceff4;border-bottom:1px solid var(--line)}
.reference-card div{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.reference-card h3{font-size:18px;font-weight:800;letter-spacing:-.035em;line-height:1.4}
.reference-card p{font-size:14.5px;line-height:1.65;color:var(--sub)}
.reference-card span{margin-top:4px;font:600 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cd-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(28px,3vw,40px);border-radius:26px;background:var(--ink);color:#fff}
.cd-next .tier{color:var(--blue-2)}
.cd-next h3{margin-top:10px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.045em;line-height:1.3}
.cd-next .row{display:flex;flex-wrap:wrap;gap:10px}

/* ── 인사이트 ── */
.topic-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,60px)}
.topic-nav a{display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line-d);transition:background-color .25s,border-color .25s}
.topic-nav a:hover{background:rgba(255,255,255,.09);border-color:var(--line-d2)}
.topic-nav span{font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.topic-nav b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.topic-nav small{font-size:14px;line-height:1.55;color:var(--sub-d)}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.feature .lead{margin-top:20px}
.feature .more{margin-top:26px}
.points{display:grid;gap:14px}
.points li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 12px;padding:24px;border-radius:20px;background:var(--mist)}
.points .no{grid-row:span 2;font:800 28px/1 var(--en);font-stretch:112%;color:#c9d2ff}
.points h3{font-size:19px;font-weight:800;letter-spacing:-.035em}
.points p{font-size:15.5px;line-height:1.7;color:var(--sub)}
.lib{display:grid;gap:clamp(36px,4vw,52px)}
.lib-group{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);padding-top:28px;border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--hd) + 20px)}
.lib-group>div:first-child span{font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.lib-group h3.gt{margin-top:10px;font-size:24px;font-weight:800;letter-spacing:-.04em}
.lib-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lib-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform .35s var(--ease),border-color .3s}
.lib-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.lib-card h4{font-size:19px;font-weight:800;letter-spacing:-.035em;line-height:1.45}
.lib-card p{font-size:15.5px;line-height:1.7;color:var(--sub)}
.lib-card .go-txt{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:800;color:var(--blue)}
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:p}
.path a{display:flex;flex-direction:column;gap:10px;min-height:190px;padding:24px 22px 22px;border-radius:20px;background:var(--ink-2);border:1px solid var(--line-d);transition:border-color .3s,transform .35s var(--ease)}
.path a:hover{transform:translateY(-3px);border-color:rgba(123,147,255,.5)}
.path .no{font:800 34px/1 var(--en);font-stretch:112%;color:rgba(123,147,255,.55)}
.path b{font-size:18.5px;font-weight:800;letter-spacing:-.035em}
.path small{font-size:14.5px;line-height:1.6;color:var(--sub-d)}

/* ── 문의 ── */
.contact-sec{padding:clamp(48px,6vw,80px) 0 var(--sec)}
.contact-wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,56px);align-items:start}
.contact-side{position:sticky;top:calc(var(--hd) + 28px);display:grid;gap:22px}
.side-box{padding:26px 24px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.side-box h3{margin-bottom:16px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.chan{display:grid;gap:10px}
.chan a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--mist);transition:background-color .2s}
.chan a:hover{background:#e9ecf2}
.chan .kk,.chan .ci{width:38px;height:38px}
.chan .ci{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--ink);color:#fff}
.chan .ci .ic{width:17px;height:17px}
.chan .kk .ic{width:19px;height:19px}
.chan b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.chan small{display:block;font-size:13.5px;color:var(--sub)}
.after{display:grid;gap:0;counter-reset:a}
.after li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
.after li:last-child{border-bottom:0}
.after .no{grid-row:span 2;font:600 12.5px/1.7 var(--mono);color:var(--blue)}
.after b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.after small{font-size:14px;line-height:1.6;color:var(--sub)}

.contact-form-panel{position:relative;padding:clamp(24px,3.4vw,40px);border-radius:28px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(10,11,14,.35)}
.contact-form-head span{font:600 12.5px/1.3 var(--mono);letter-spacing:.14em;color:var(--blue)}
.contact-form-head h2{margin:10px 0 8px;font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.045em}
.contact-form-head p{font-size:15.5px;line-height:1.7;color:var(--sub)}
.wizard-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 24px;padding-top:22px;border-top:1px solid var(--line)}
.wizard-dots{display:flex;gap:6px}
.wizard-dots span{width:34px;height:5px;border-radius:5px;background:#dfe3ea;transition:background-color .3s}
.wizard-dots span.is-on{background:var(--blue)}
.wizard-count{font:600 13px/1 var(--mono);color:var(--sub)}
.wizard-step[hidden]{display:none}
.wizard-step-title{font-size:clamp(21px,2vw,25px);font-weight:800;letter-spacing:-.04em;line-height:1.35}
.wizard-step-copy{margin:6px 0 22px;font-size:15px;line-height:1.65;color:var(--sub)}
.wizard-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wizard-card{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:18px;border:1.5px solid var(--line-2);background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.wizard-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.wizard-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(58,91,255,.18)}
.wizard-card__media{display:block;aspect-ratio:16/8;background:#eceff4;overflow:hidden}
.wizard-card__media img{width:100%;height:100%;object-fit:cover;object-position:top}
.wizard-card__body{display:grid;gap:4px;padding:14px 16px 16px}
.wizard-card__title{font-size:16.5px;font-weight:800;letter-spacing:-.03em}
.wizard-card__desc{font-size:13.5px;line-height:1.5;color:var(--sub)}
.wizard-card__check{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);border:1.5px solid var(--line-2);font-size:14px;font-weight:800;color:transparent}
.wizard-card.is-selected .wizard-card__check{background:var(--blue);border-color:var(--blue);color:#fff}
.contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.contact-dynamic{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.contact-dynamic:empty{display:none}
.contact-field{display:flex;flex-direction:column;gap:10px;min-width:0}
.contact-field--full{grid-column:1/-1}
.contact-field>label,.contact-field-label{font-size:15px;font-weight:800;letter-spacing:-.02em}
.contact-field input[type=text],.contact-field input[type=url],.contact-field input[type=date],.contact-field input:not([type]),.contact-field textarea{width:100%;min-height:52px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;font:500 16px/1.4 var(--ko);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.contact-field textarea{min-height:150px;padding:14px 16px;line-height:1.65;resize:vertical}
.contact-field input:focus,.contact-field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(58,91,255,.16)}
.contact-field ::placeholder{color:#9aa0ab}
.contact-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-l,.contact-chips .chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.contact-chips .chip:hover{border-color:var(--ink)}
.contact-chips .chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.contact-chips .chip__tick{display:none;font-size:13px}
.contact-chips .chip input:checked+.chip__tick{display:inline}
.contact-chips .chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.contact-chips .chip:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.ref-required-mark{font-style:normal;color:#e5484d}
.ref-list{display:grid;gap:8px}
.ref-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.ref-add{min-height:40px;padding:0 4px;font-size:14.5px;font-weight:800;color:var(--blue)}
.ref-add[hidden]{display:none}
.ref-hint{font-size:13.5px;line-height:1.55;color:var(--sub)}
.ref-warn{font-size:14px;font-weight:700;color:#d93036}
.ref-warn[hidden]{display:none}
.wizard-nav{display:flex;justify-content:space-between;gap:10px;margin-top:28px}
.wizard-nav .btn{min-height:54px;flex:1;max-width:220px}
.wizard-nav .btn:only-child{margin-left:auto}
.contact-form-panel .btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.contact-form-panel .btn-outline:hover{border-color:var(--ink)}
.contact-form-panel .btn-white{background:var(--ink);color:#fff}
.contact-form-panel .btn-white:hover{background:#000}
.contact-form-panel .btn:disabled{opacity:.55;cursor:default;transform:none}
.form-feedback{min-height:1.5em;margin-top:16px;font-size:15px;font-weight:700;color:var(--blue-deep)}
.form-feedback:empty{display:none}
.wizard-success{display:grid;justify-items:center;gap:10px;padding:24px 0 8px;text-align:center}
.wizard-success[hidden]{display:none}
.wizard-success__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;font-size:28px;font-weight:800}
.wizard-success h3{margin-top:6px;font-size:26px;font-weight:800;letter-spacing:-.04em}
.wizard-success__id{font:600 14px/1.4 var(--mono);color:var(--blue)}
.wizard-success p{font-size:16px;color:var(--sub)}
.wizard-success__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.contact-form-panel.is-complete .contact-form-head,.contact-form-panel.is-complete .contact-wizard{display:none}
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.qa-grid article{padding:26px 24px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.qa-grid h3{font-size:18.5px;font-weight:800;letter-spacing:-.035em;line-height:1.45}
.qa-grid p{margin-top:10px;font-size:15.5px;line-height:1.72;color:var(--sub)}

/* ── 개인정보처리방침 ── */
.prose{max-width:860px;font-size:16.5px;line-height:1.85;color:var(--sub)}
.prose h2{margin:48px 0 14px;font-size:22px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 10px;font-size:18px;font-weight:800;color:var(--ink)}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px;list-style:revert}
.prose li{margin:6px 0}
.prose table{width:100%;margin:10px 0 18px;border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--line-2);text-align:left;vertical-align:top}
.prose th{background:var(--mist);color:var(--ink);font-weight:800;white-space:nowrap}
.prose td:first-child{white-space:nowrap}
.prose a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ── 반응형 ── */
@media (max-width:1180px){
  .refs.four,.case-list,.path,.topic-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .phero-grid{grid-template-columns:minmax(0,1fr)}
  .phero .svc-vis{max-width:620px}
  .trio,.pkgs,.qa-grid{grid-template-columns:minmax(0,1fr)}
  .cd-sec .trio{grid-template-columns:minmax(0,1fr)}
  .duo,.fitlist{grid-template-columns:minmax(0,1fr)}
  .feature{grid-template-columns:minmax(0,1fr)}
  .lib-group{grid-template-columns:minmax(0,1fr)}
  .cd-sec{grid-template-columns:minmax(0,1fr)}
  .cd-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-reference-list]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-wrap{grid-template-columns:minmax(0,1fr)}
  .contact-side{position:static;order:2}
}
@media (max-width:760px){
  .phero{padding:calc(var(--hd) + 40px) 0 64px}
  .phero-word{display:none}
  .phero h1{font-size:clamp(30px,8.2vw,42px)}
  .tier{letter-spacing:.08em}
  .quad{grid-template-columns:minmax(0,1fr)}
  .refs,.wgrid,.lib-cards{grid-template-columns:minmax(0,1fr)}
  .refs.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .refs.four .ref-body{padding:14px 14px 16px}
  .refs.four .ref-body p{display:none}
  .case-list,.path,.topic-nav{grid-template-columns:minmax(0,1fr)}
  .case-link,.path a{min-height:0}
  .svc-nav{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc-nav a{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:2px 12px;padding:16px 18px}
  .svc-nav b{grid-row:span 2;font-size:26px}
  .svc-nav small{grid-column:2}
  [data-reference-list]{grid-template-columns:minmax(0,1fr)}
  .cd-next{grid-template-columns:minmax(0,1fr)}
  .steps.four{grid-template-columns:minmax(0,1fr)}
  .wizard-cards{grid-template-columns:minmax(0,1fr)}
  .wizard-card{flex-direction:row;align-items:stretch}
  .wizard-card__media{flex:0 0 30%;aspect-ratio:auto;min-height:84px}
  .wizard-card__body{align-content:center;padding:12px 44px 12px 14px}
  .wizard-card__title{white-space:nowrap}
  .wizard-card__desc{text-wrap:balance}
  .contact-form-grid,.contact-dynamic{grid-template-columns:minmax(0,1fr)}
  .contact-form-panel{border-radius:22px}
  .wizard-nav .btn{max-width:none}
  .fitlist li{padding:20px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  a.ref:hover,.case-link:hover,.lib-card:hover,.path a:hover,.svc-nav a:hover,.wizard-card:hover{transform:none}
}

/* 첫 화면 글자는 JS를 기다리지 않고 바로 등장(홈 첫 화면과 같은 방식) */
.js .phero .rv{opacity:1;transform:none;transition:none;animation:heroIn 1.05s var(--ease) both}
.js .phero .rv.d1{animation-delay:.1s}
.js .phero .rv.d2{animation-delay:.2s}
.js .phero .rv.d3{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.js .phero .rv{animation:none}}
.ref-media.phone-in{display:grid;place-items:center;padding:4% 0}
.ref-media.phone-in img{width:auto;height:100%;max-width:70%;object-fit:contain;border-radius:14px;box-shadow:0 22px 40px -22px rgba(10,11,14,.45)}
.wgrid .ref-body .cat{color:var(--blue)}
/* 사례 상세 표지: 실제 화면 그림 + 설명 */
.cd-cover{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px);margin:clamp(-96px,-7vw,-60px) 0 clamp(40px,5vw,64px);padding:clamp(18px,2.4vw,30px);border-radius:30px;background:var(--ink-2);border:1px solid var(--line-d);box-shadow:0 50px 100px -50px rgba(10,11,14,.6)}
.cd-cover .svc-vis[hidden]{display:none}
.cd-cover figcaption{position:static;display:grid;gap:12px;padding:0 clamp(4px,2vw,24px) 0 0;background:none;color:#fff}
.cd-cover figcaption span{font:600 12.5px/1.3 var(--mono);letter-spacing:.16em;color:var(--blue-2)}
.cd-cover figcaption b{font-size:clamp(22px,2.4vw,32px);font-weight:800;line-height:1.35;letter-spacing:-.045em}
@media (max-width:960px){.cd-cover{grid-template-columns:minmax(0,1fr)}.cd-cover figcaption{padding:4px 6px 8px}}
.prose-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-2);font-size:14.5px;line-height:1.9;color:var(--mute)}
.prose .tbl{overflow-x:auto}
@media (max-width:760px){.prose table{font-size:14px}.prose th,.prose td{padding:10px}}

/* ── 회사소개 ── */
.about-end{max-width:760px;margin-top:clamp(40px,5vw,64px);font-size:clamp(19px,2vw,26px);font-weight:800;line-height:1.5;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.loop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:l}
.loop li{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 28px 28px;border-radius:24px;background:var(--mist);border:1px solid var(--line)}
.loop li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-14px;z-index:1;width:10px;height:10px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:translateY(-50%) rotate(45deg)}
.loop li.me{background:var(--ink);color:#fff;border-color:var(--ink)}
.loop li.me .tier{color:var(--blue-2)}
.loop h3{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.045em}
.loop p:not(.tier){font-size:15.5px;line-height:1.75;color:var(--sub)}
.loop li.me p:not(.tier){color:var(--sub-d)}
.loop .more{margin-top:auto;align-self:flex-start}
.trio.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);border-top:1px solid var(--line-2)}
.info div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.info dt{font:600 12.5px/1.7 var(--mono);letter-spacing:.06em;color:var(--mute)}
.info dd{margin:0;font-size:16px;font-weight:700;line-height:1.65;color:var(--ink)}
.info a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.info dd.links{display:flex;flex-wrap:wrap;gap:0 18px}
.info dd.links a{min-width:44px;white-space:nowrap}

/* ── 서비스 전체 ── */
.svc-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.svc-jump a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line-d2);background:rgba(255,255,255,.05);font-size:15px;font-weight:800;letter-spacing:-.02em;transition:background-color .25s,border-color .25s}
.svc-jump a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.svc-jump b{font:800 13px/1 var(--en);font-stretch:112%;color:var(--blue-2)}
.picks{display:grid;gap:10px}
.pick{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 26px;border-radius:18px;background:var(--mist);border:1px solid var(--line);transition:border-color .25s,background-color .25s,transform .3s var(--ease)}
.pick:hover{background:#fff;border-color:var(--ink);transform:translateX(4px)}
.pick .q{font-size:clamp(17px,1.6vw,20px);font-weight:800;letter-spacing:-.035em;line-height:1.45}
.pick .a{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:15px;color:var(--blue)}
.pick .a b{font-weight:800}

/* ── 플랫폼 ── */
.plat-rows{display:grid;gap:clamp(48px,6vw,88px)}
.plat-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.plat-row.flip .plat-media{order:2}
.plat-media{position:relative;display:block;container-type:inline-size;padding:5% 14% 9% 5%;border-radius:26px;background:linear-gradient(140deg,#4a67ff,#2a41d6 60%,#1b2aa0);transition:transform .4s var(--ease)}
.plat-media:hover{transform:translateY(-4px)}
.plat-media::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.plat-media .win{position:relative}
.plat-media .phone{right:4%;bottom:5%;width:22%}
.plat-txt{display:grid;gap:12px;align-content:start}
.plat-txt h3{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.05em}
.plat-txt .pbadge{color:var(--blue)}
.plat-txt .one{font-size:clamp(17px,1.5vw,19px);font-weight:800;line-height:1.55;letter-spacing:-.03em;color:var(--ink)}
.plat-txt p{font-size:16px;line-height:1.78;color:var(--sub)}
.plat-txt .more{justify-self:start;margin-top:6px}
.ref-body .metric{display:inline-flex;align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:13.5px;font-weight:800}
.fam{display:flex;flex-wrap:wrap;gap:10px}
.fam a{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:15.5px;font-weight:800;letter-spacing:-.02em;transition:border-color .2s,background-color .2s}
.fam a:hover{border-color:var(--ink)}
.fam a .ic{width:15px;height:15px;opacity:.5}

@media (max-width:1180px){.trio.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .loop{grid-template-columns:minmax(0,1fr)}
  .loop li:not(:last-child)::after{top:auto;bottom:-14px;right:50%;transform:translateX(50%) rotate(135deg)}
  .info{grid-template-columns:minmax(0,1fr)}
  .plat-row,.plat-row.flip{grid-template-columns:minmax(0,1fr)}
  .plat-row.flip .plat-media{order:0}
}
@media (max-width:760px){
  .trio.four{grid-template-columns:minmax(0,1fr)}
  .info div{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .info a{display:inline-block;padding:8px 0}
  .pick{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 20px}
  .pick:hover{transform:none}
  .svc-jump a{min-height:44px;padding:0 14px;font-size:14.5px}
  .plat-media{padding:5% 12% 9% 5%;border-radius:20px}
}