/* svc-web2.css — /services/web-2 홈페이지 제작 상세(2026-10-16). home-a.css(메인·허브 판) 뒤에 붙는다(pageCss2).
   구간마다 판: 첫 화면 노랑 + 실제 사이트 창 / 제작 종류 흰 바탕 네 칸 / 반응형 남색 세 기기 / 작업 범위 연한 파랑 여섯 칸 /
   대표 사례 흰 바탕 + 고객사 색 / 진행 과정 노랑 고정 그림 / 결과물 흰 바탕 이어진 띠 / 질문 연한 파랑 / 문의. */
.v-web2 .s{min-height:0;display:block;padding:clamp(88px,13vh,140px) 0}
.v-web2 h2{font-size:clamp(34px,3.4vw,54px);line-height:1.3;letter-spacing:-.03em}
.ti{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ti) center/contain no-repeat;mask:var(--ti) center/contain no-repeat}
.btn.w2-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}.btn.w2-line:hover{background:var(--navy);color:#fff}

/* 공통 — 창 틀, 휴대폰 틀, 내려가는 화면 */
.w2-bar{display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;background:#eceef3;flex:none}
.w2-bar>i{width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:15px 0 0 #febc2e,30px 0 0 #28c840;margin-right:30px;flex:none}
.w2-url{flex:1;max-width:320px;height:22px;border-radius:7px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:600;color:var(--mute)}
.w2-view{position:relative;display:block;overflow:hidden;flex:1;min-height:0;background:#fff}
.w2-view img{display:block;width:100%;height:auto;will-change:transform}
.w2-win{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden}
.w2-phone{display:flex;flex-direction:column;padding:8px;background:#141827;border-radius:30px}
.w2-phone .w2-view{border-radius:23px}

/* 1 첫 화면 */
.w2-hero{background:var(--yellow);padding:clamp(72px,11vh,120px) 0 0!important;overflow:hidden}
.w2-hero-txt{text-align:center}
.w2-hero h1{font-size:clamp(40px,4.6vw,76px);line-height:1.28;letter-spacing:-.04em}
.w2-hero h1 .kw{background:var(--navy);color:#fff;padding:.02em .26em}
.w2-sub{display:block;margin-top:.12em}
.w2-os{width:.8em;height:.8em;margin:0 .14em -.05em 0}
.w2-acts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4.5vh,44px)}
.w2-stage{position:relative;margin-top:clamp(44px,7vh,72px);height:clamp(340px,52vh,560px);max-width:1080px}
.w2-hero-win{position:absolute;left:0;right:110px;top:0;bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 60px rgba(90,60,0,.22)}
.w2-hero-phone{position:absolute;right:0;bottom:-40px;width:clamp(170px,17vw,230px);height:calc(100% - 20px);box-shadow:0 30px 60px rgba(20,24,39,.35)}

/* 2 제작 종류 — 기업 홈페이지 넓은 칸, 랜딩페이지 세로로 긴 칸, 쇼핑몰·교육 솔루션 구조 그림 */
.w2-type{background:#fff}
.w2-type h2{text-align:center}.w2-type .kw{background:var(--yellow);color:var(--navy)}
.w2-type [data-var="sweep"] .kw{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat}
.w2-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:clamp(16px,1.8vw,24px);margin-top:clamp(40px,6vh,64px)}
.w2-t{display:flex;flex-direction:column;border-radius:28px;background:var(--soft);overflow:hidden;color:var(--ink);transition:transform .3s,box-shadow .3s}
a.w2-t:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,24,39,.12)}
.w2-t-corp{grid-column:1/3;background:#1e202d;color:#fff}
.w2-t-land{grid-column:3;grid-row:1/3;background:#1a1a1a;color:#fff}
.w2-t-pic{display:flex;flex-direction:column;margin:clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;flex:1;min-height:0}
.w2-mini img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.w2-long{flex:1;min-height:420px;border-radius:14px 14px 0 0}
.w2-long .w2-view{position:absolute;inset:0}
.w2-long{position:relative}
.w2-t-txt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px) clamp(20px,2.2vw,28px)}
.w2-t-txt em{font-style:normal;font:800 13px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--blue)}
.w2-t-corp .w2-t-txt em{color:#bd9540}.w2-t-land .w2-t-txt em{color:#ffd100}
.w2-t-txt b{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.03em}
.w2-t-txt small{margin-left:auto;font-size:14px;font-weight:700;opacity:.66}
/* 05 맞춤 웹 솔루션 — 셋째 줄 전체, 왼쪽 실제 화면 창 + 오른쪽 KAIST 로고·결과·항목(10-17) */
.w2-t-sol{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch;background:#eef3fb}
.w2-t-sol .w2-t-pic{margin:clamp(18px,2vw,28px) 0 0 clamp(18px,2vw,28px);box-shadow:0 20px 50px rgba(0,76,152,.14)}
.w2-t-sol .w2-mini img{aspect-ratio:16/10}
.w2-sol-txt{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(24px,3vw,44px)}
.w2-sol-txt .w2-t-txt{padding:0}
.w2-sol-txt .w2-t-txt b{font-size:clamp(24px,2.1vw,32px)}
.w2-sol-who{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.w2-sol-who img{width:auto;height:30px}
.w2-sol-who b{font-size:clamp(16px,1.3vw,19px);font-weight:800;color:#004c98;letter-spacing:-.02em}
.w2-sol-res{width:max-content;max-width:100%;padding:10px 18px;border-radius:999px;background:#004c98;color:#fff;font-size:clamp(15px,1.2vw,17px);font-weight:700}
.w2-sol-res s{opacity:.6}.w2-sol-res strong{color:var(--yellow);font-size:1.15em}
.w2-sol-tags{display:flex;flex-wrap:wrap;gap:8px}
.w2-sol-tags i{font-style:normal;height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--ink2,#3a3f52)}
.w2-sol-go{font-size:15px;font-weight:800;color:#004c98}
a.w2-t .w2-t-txt small::after{content:" →"}
/* 구조 그림 */
.w2-wire{border:1.5px solid var(--line);border-bottom:0;aspect-ratio:16/10;flex:none}
.wf-shop,.wf-edu{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px;position:relative}
.wf-shop .wf-ban{height:26%;border-radius:8px;background:linear-gradient(90deg,var(--blue2),#fff3cc)}
.wf-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wf-grid i{border-radius:8px;background:#eef0f5;position:relative}
.wf-grid i::after{content:"";position:absolute;left:8px;right:30%;bottom:8px;height:6px;border-radius:3px;background:#d3d8e3}
.wf-cart{position:absolute;right:16px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.wf-cart svg{width:18px;height:18px}
.wf-cart b{position:absolute;right:-4px;top:-4px;width:17px;height:17px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}
.wf-edu{flex-direction:row}
.wf-play{flex:1.6;border-radius:10px;background:var(--navy);position:relative}
.wf-play i{position:absolute;left:50%;top:50%;width:0;height:0;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;transform:translate(-40%,-50%)}
.wf-list{flex:1;display:flex;flex-direction:column;gap:8px}
.wf-list i{flex:1;border-radius:8px;background:#eef0f5;position:relative}
.wf-list i.on{background:var(--blue2);box-shadow:inset 3px 0 0 var(--blue)}
.wf-prog{position:absolute;left:14px;bottom:14px;width:calc((100% - 38px) * 1.6 / 2.6);height:6px;border-radius:3px;background:rgba(255,255,255,.3)}
.wf-prog i{display:block;width:62%;height:100%;border-radius:3px;background:var(--yellow)}

/* 3 반응형 — 남색 판, 세 기기 */
.w2-resp{background:var(--navy);color:#fff;overflow:hidden}
.w2-resp h2{color:#fff;text-align:center}.w2-resp .kw{background:var(--yellow);color:var(--navy)}
.w2-resp [data-var="load"] .kw{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat}
.w2-devs{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,2.4vw,36px);margin-top:clamp(40px,6vh,64px);height:clamp(380px,54vh,560px)}
.w2-dev{position:relative;display:flex;flex-direction:column;height:100%;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.w2-dev>em{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font-style:normal;font-size:14px;font-weight:800;letter-spacing:.02em;color:rgba(255,255,255,.7);white-space:nowrap}
.w2-dev.pc{flex:0 1 640px;border-radius:14px;overflow:visible;background:#fff}
.w2-dev.pc>.w2-bar{border-radius:14px 14px 0 0}
.w2-dev.pc>.w2-view{border-radius:0 0 14px 14px}
.w2-dev.tab{flex:0 0 auto;width:clamp(200px,17vw,260px);height:86%;padding:10px;border-radius:24px;background:#2a2f4d}
.w2-dev.tab .w2-view{border-radius:14px}
.w2-dev.mob{flex:0 0 auto;width:clamp(130px,10.4vw,160px);height:66%;padding:7px;border-radius:24px;background:#2a2f4d}
.w2-dev.mob .w2-view{border-radius:18px}
.w2-cap{display:flex;width:max-content;margin:clamp(64px,9vh,88px) auto 0;align-items:center;gap:12px;padding:12px 22px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:15px;transition:background .2s}
.w2-cap b{font-weight:800}.w2-cap span{font-weight:700;color:var(--yellow)}
.w2-cap span::after{content:" →"}
.w2-cap:hover{background:rgba(255,255,255,.18)}

/* 4 작업 범위 — 여섯 칸 */
.w2-scope{background:#eef3fd}
.w2-scope h2{text-align:center}.w2-scope .kw{background:var(--blue);color:#fff}
.w2-scope [data-var="rise"] .kw{background:linear-gradient(var(--blue),var(--blue)) no-repeat}
.w2-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:clamp(14px,1.6vw,20px);margin-top:clamp(40px,6vh,64px)}
.w2-b{background:#fff;border-radius:24px;padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:16px;box-shadow:0 14px 40px rgba(30,60,140,.06);min-width:0}
.w2-b-h{display:flex;align-items:center;gap:14px}
.w2-b-h img{width:56px;height:56px;object-fit:contain}
.w2-b-h b{font-size:clamp(19px,1.5vw,23px);font-weight:800;letter-spacing:-.03em}
.w2-b-pic{flex:1;min-height:0;border-radius:14px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.w2-b-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.b-conv{grid-column:4}
.b-blog{grid-column:3/5}
.b-track{grid-column:1/3}
.b-track .w2-b-pic{max-height:240px}
.w2-tags{list-style:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}
.w2-tags li{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--soft);font-size:14.5px;font-weight:700;color:var(--ink2)}
.w2-logos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:auto}
.w2-logos li{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:800}
.w2-logos img{width:34px;height:34px}
.w2-funnel{list-style:none;counter-reset:fn;display:flex;flex-direction:column;justify-content:center;gap:12px;margin-top:6px;flex:1}
.w2-funnel li{counter-increment:fn;display:flex;align-items:center;gap:12px;flex:none;height:62px;padding:0 22px;border-radius:14px;font-size:18px!important;background:var(--blue2);color:var(--navy);font-size:15px;font-weight:800}
.w2-funnel li::before{content:counter(fn);font:800 12px/1 ui-monospace,Menlo,monospace;color:var(--blue)}
.w2-funnel li:nth-child(2){margin-right:6%}.w2-funnel li:nth-child(3){margin-right:12%}.w2-funnel li:nth-child(4){margin-right:18%;background:var(--blue);color:#fff}
.w2-funnel li:nth-child(4)::before{color:var(--yellow)}
.w2-pair{display:flex;align-items:center;gap:14px}
.w2-arrow{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow);position:relative}
.w2-arrow::after{content:"→";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--navy)}
.w2-stack{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(28px,4vh,40px)}
.w2-stack li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink2)}
.w2-stack img{width:24px;height:24px}

/* 5 대표 사례 — 고객사 색 */
/* 검색 최적화 — 같은 틀 세 칸(10-16 '잘 안읽혀'): 노출 자리 그림 → 영문 이름 + 한글 이름 → 노출 위치 한 줄 → 항목 → 사례 */
.w2-search{background:#fff}
.w2-search .kw{background:var(--navy);color:#fff}
.w2-search [data-var="rise"] .kw{background:linear-gradient(var(--navy),var(--navy)) no-repeat}
.w2-eng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,6vh,64px)}
.w2-e{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2vw,28px);border-radius:26px;background:var(--soft);min-width:0}
.w2-e-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.w2-e-h strong{font-size:clamp(30px,2.6vw,40px);line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--blue)}
.w2-e-h b{font-size:clamp(19px,1.5vw,23px);font-weight:800;letter-spacing:-.03em}
.w2-e-w{font-size:clamp(16px,1.2vw,18px);font-weight:700;line-height:1.5;color:var(--ink2,#3a3f52)}
.w2-e .w2-tags li{background:#fff}
.w2-e-ev{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid rgba(20,24,39,.12)}
.w2-e-ev b{font-size:16px;font-weight:800}.w2-e-ev span{font-size:13.5px;font-weight:600;opacity:.7}
.w2-e-ev b::after{content:" →";transition:margin .2s}.w2-e-ev:hover b::after{margin-left:4px}
.w2-e .w2-logos{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.w2-e .w2-logos img{width:28px;height:28px}
/* 노출 자리 그림 — 흰 화면 위 검색창과 결과 */
.w2-mk{height:clamp(200px,17vw,236px);border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(30,60,140,.08);padding:18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.mk-q{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);font-size:14.5px;font-weight:700;color:var(--ink);flex:none}
.mk-ic{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue);position:relative;flex:none}
.mk-ic::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:var(--blue);rotate:45deg}
.mk-r{display:flex;flex-direction:column;gap:5px;padding:2px 4px}
.mk-r small{display:block;height:6px;width:30%;border-radius:3px;background:#e6e9f0}
.mk-r b{display:block;height:9px;width:62%;border-radius:4px;background:#c9d4f8}
.mk-r .tl{display:block;height:6px;width:86%;border-radius:3px;background:#eef0f5}
.mk-r.on{padding:10px 12px;border-radius:12px;background:#eef3ff;box-shadow:inset 3px 0 0 var(--blue)}
.mk-r.on small{width:auto;height:auto;background:none;font-size:12px;font-weight:700;color:#2fa36b}
.mk-r.on b{width:auto;height:auto;background:none;font-size:15px;font-weight:800;color:var(--blue)}
.mk-ans{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:14px;background:var(--yellow2,#fff1c2)}
.mk-ans em,.mk-ai em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:2px}
.mk-ans .tl,.mk-ai .tl{display:block;height:7px;border-radius:4px;background:rgba(20,24,39,.12)}
.mk-ans .tl.sh,.mk-ai .tl.sh{width:58%}
.mk-me{align-self:flex-end;max-width:86%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--navy);color:#fff;font-size:14px;font-weight:700}
.mk-ai{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:16px 16px 16px 4px;background:#eef1ff;width:90%}
.mk-ai img{width:16px;height:16px}
.mk-ai small{align-self:flex-start;margin-top:4px;padding:5px 10px;border-radius:999px;background:#fff;color:var(--blue);font-size:12px;font-weight:800;box-shadow:0 0 0 1.5px var(--blue)}

/* 작업 범위 셋 */
.w2-bento{grid-template-columns:1fr 1fr}
.b-blog{grid-column:1/3;grid-row:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,3vw,48px);align-items:center;padding:clamp(28px,3vw,44px)}
.b-conv{grid-column:1}.b-track{grid-column:2}
.w2-bl-txt{display:flex;flex-direction:column;gap:18px;align-self:stretch}
.w2-bl-txt .w2-b-h b{font-size:clamp(24px,2.1vw,32px);line-height:1.25}
.w2-bl-txt .w2-e-ev{border-top-color:var(--line)}
.b-blog .w2-pair{gap:clamp(16px,2.4vw,40px);justify-content:center}
.w2-ph{position:relative;flex:0 1 230px;min-width:0;aspect-ratio:9/18.5;padding:8px;border-radius:36px;background:#11142a;box-shadow:0 24px 50px rgba(30,60,140,.22)}
.w2-ph-v{position:relative;display:block;height:100%;border-radius:28px;overflow:hidden;background:#fff}
.w2-ph-v img{position:absolute;left:0;top:0;width:100%;height:auto;animation:w2-read 14s ease-in-out infinite alternate}
@keyframes w2-read{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(-45%)}}
.w2-ph em{position:absolute;left:50%;bottom:-16px;translate:-50% 0;font-style:normal;font-size:13px;font-weight:800;padding:6px 14px;border-radius:999px;background:var(--navy);color:#fff;white-space:nowrap}
.w2-ph:last-child em{background:var(--blue)}
.b-blog .w2-arrow{width:46px;height:46px;box-shadow:0 8px 20px rgba(245,180,0,.4)}
.b-blog .w2-arrow::after{font-size:20px}
.b-track .w2-b-pic{max-height:none;height:280px;flex:none}
.b-track .w2-b-pic img{width:150%;height:auto;max-width:none}

/* 리뉴얼과 이관 — 남색 판, 그림 카드 + 순서 셋 + 사례 둘 */
.w2-renew{background:var(--navy);color:#fff}
.w2-renew h2{color:#fff}.w2-renew .kw{background:var(--yellow);color:var(--navy)}
.w2-rn{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.w2-rn-fig{border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.w2-rn-fig img{display:block;width:100%;height:auto}
.w2-rn-steps{list-style:none;margin-top:clamp(28px,4vh,40px);display:flex;flex-direction:column}
.w2-rn-steps li{display:flex;align-items:center;gap:18px;padding:clamp(14px,2vh,20px) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.w2-rn-steps li:first-child{border-top:1px solid rgba(255,255,255,.16)}
.w2-rn-steps em{flex:none;font:800 14px/1 ui-monospace,Menlo,monospace;font-style:normal;color:var(--yellow)}
.w2-rn-steps b{font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.03em}
.w2-rn-ev{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(24px,3.5vh,34px)}
.w2-rn-ev a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.08);transition:background .2s}
.w2-rn-ev a:hover{background:rgba(255,255,255,.14)}
.w2-rn-ev b{font-size:16px;font-weight:800}.w2-rn-ev b::after{content:"\00a0→"}
.w2-rn-ev span{font-size:13.5px;opacity:.7}

.w2-case{background:#fff}
.w2-case h2{text-align:center}.w2-case .kw{background:var(--navy);color:#fff}
.w2-cs{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(36px,5vh,56px);padding:clamp(30px,4vw,60px);border-radius:32px;color:#fff;overflow:hidden;position:relative}
.w2-cs+.w2-cs{margin-top:clamp(18px,2.4vw,28px)}
.cs-law{background:#1e202d;--ac:#bd9540}
.cs-bs{background:#1a1a1a;--ac:#ffd100;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.cs-bs .w2-cs-fig{order:2}
.cs-kaist{background:linear-gradient(150deg,#004c98,#00336a);--ac:#8cc8ff}
.cs-kaist .w2-cs-fig .w2-win{right:22%;bottom:18%}
.cs-kaist .w2-cs-fig .w2-win2{left:30%;top:28%;right:0;bottom:0;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.cs-kaist .w2-view img{height:100%;object-fit:cover;object-position:left top}
.w2-cs-logo{display:block;height:34px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}
.cs-kaist .w2-cs-t::before{display:none}
.w2-cs-fig{position:relative;height:clamp(300px,36vw,420px)}
.w2-cs-fig .w2-win{position:absolute;left:0;top:0;right:16%;bottom:8%;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.w2-cs-fig .w2-view img{width:100%}
.cs-bs .w2-cs-fig .w2-view img{height:100%;object-fit:cover;object-position:left top}
.w2-cs-fig .w2-phone{position:absolute;right:0;bottom:0;width:30%;height:82%;box-shadow:0 24px 50px rgba(0,0,0,.5);background:#000}
.w2-cs-fig .w2-phone img{height:100%;object-fit:cover;object-position:top}
.w2-cs-t{display:block;font-size:clamp(24px,2.2vw,34px);font-weight:800;letter-spacing:-.03em}
.w2-cs-t::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--ac);margin-bottom:18px}
.w2-nums{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(22px,3vh,32px);border-top:1px solid rgba(255,255,255,.16)}
.w2-nums>span{display:flex;flex-direction:column;gap:6px;padding:clamp(16px,2.2vh,22px) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.w2-nums>span:nth-child(odd){padding-right:16px}
.w2-nums>span:nth-child(even){padding-left:18px;border-left:1px solid rgba(255,255,255,.16)}
.w2-nums strong{font-size:clamp(26px,2.4vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--ac);font-variant-numeric:tabular-nums;line-height:1.1}
.w2-nums small{font-size:14.5px;font-weight:700;opacity:.72}
.w2-go{display:inline-flex;margin-top:clamp(22px,3vh,30px);height:48px;align-items:center;padding:0 22px;border-radius:999px;background:var(--ac);color:#141827;font-size:15.5px;font-weight:800;transition:transform .2s}
.w2-go::after{content:"→";margin-left:10px;transition:transform .25s}
.w2-cs:hover .w2-go::after{transform:translateX(4px)}

/* 6 진행 과정 — 노랑 판, 왼쪽 그림 고정 */
.w2-flow{background:var(--yellow)}
.w2-flow .kw{background:var(--navy);color:#fff}
.w2-flow-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);margin-top:clamp(36px,5vh,56px);align-items:start}
.w2-flow-fig{position:sticky;top:calc(var(--w2-head,72px) + 24px)}
.w2-flow-card{position:relative;aspect-ratio:16/9;border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(90,60,0,.22)}
.w2-flow-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.w2-flow-card video.on{opacity:1;transform:none}
.w2-flow-no{position:absolute;left:22px;top:20px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:800 18px/1 ui-monospace,Menlo,monospace}
.w2-steps{list-style:none;counter-reset:st;position:relative}
.w2-steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;border-left:3px dashed var(--navy);opacity:.35}
.w2-steps li{position:relative;display:flex;align-items:center;gap:22px;min-height:clamp(84px,11vh,110px);cursor:default}
.w2-steps em{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:800 16px/1 ui-monospace,Menlo,monospace;font-style:normal;background:#fff;color:var(--navy);box-shadow:0 0 0 6px var(--yellow);transition:background .3s,color .3s,transform .3s;z-index:1}
.w2-steps b{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.03em;color:rgba(20,24,39,.38);transition:color .3s}
.w2-steps li.on em{background:var(--navy);color:#fff;transform:scale(1.08)}
.w2-steps li.on b{color:var(--navy)}
.w2-steps li video{display:none}

/* 7 결과물 — 흰 바탕, 단계 셋 카드(메인 톤 3D 그림 + 단계 이름 + 받는 문서) */
.w2-out{background:#fff}
.w2-out h2{text-align:center}.w2-out .kw{background:var(--yellow);color:var(--navy)}
.w2-out [data-var="sweep"] .kw{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat}
.w2-ocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,6vh,64px);counter-reset:oc}
.w2-oc{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px) clamp(24px,2.4vw,32px);border-radius:28px;background:var(--soft)}
.w2-oc+.w2-oc::before{content:"";position:absolute;left:calc(-1 * clamp(14px,1.6vw,22px) / 2 - 11px);top:calc(clamp(14px,1.4vw,18px) + 30%);width:22px;height:22px;border-radius:50%;background:var(--yellow);z-index:1;box-shadow:0 0 0 5px #fff}
.w2-oc-fig{border-radius:20px;background:#fff;overflow:hidden;aspect-ratio:3/2}
.w2-oc-fig img{display:block;width:100%;height:100%;object-fit:cover}
.w2-oc-h{display:flex;align-items:center;gap:12px;padding:0 clamp(6px,.8vw,12px)}
.w2-oc-h em{font:800 14px/1 ui-monospace,Menlo,monospace;font-style:normal;padding:7px 10px;border-radius:999px;background:var(--navy);color:#fff}
.w2-oc-h b{font-size:clamp(22px,1.9vw,28px);font-weight:800;letter-spacing:-.03em}
.w2-oc-l{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0 clamp(6px,.8vw,12px)}
.w2-oc-l li{display:flex;align-items:center;gap:10px;font-size:clamp(17px,1.35vw,20px);font-weight:700;letter-spacing:-.02em}
.w2-oc-l li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* 질문 · 문의 — 허브와 같은 값 */
.v-web2 .s-faq{background:#eef3fd;padding:clamp(80px,12vh,128px) 0}
.v-web2 .s-faq h2{background:transparent}
.v-web2 .s-cta{min-height:0}

/* 넓은 화면이지만 높이가 낮을 때 */
@media (max-height:780px) and (min-width:1024px){
  .w2-stage{height:340px}
  .w2-devs{height:400px}
  .w2-steps li{min-height:76px}
  .w2-cs-fig{height:320px}
}

/* 태블릿 */
@media (max-width:1100px){
  .w2-types{grid-template-columns:1fr 1fr}
  .w2-t-corp{grid-column:1/3}
  .w2-t-land{grid-column:1;grid-row:2/4}
  .w2-t-shop{grid-column:2}.w2-t-edu{grid-column:2}
  .w2-bento{grid-template-columns:1fr 1fr}
  .b-blog{grid-template-columns:minmax(0,1fr)}
  .w2-eng{grid-template-columns:1fr 1fr}
  .w2-rn{grid-template-columns:1fr}
  .w2-dev.pc{flex-basis:520px}
}

/* 휴대폰·좁은 태블릿 */
@media (max-width:860px){
  .v-web2 .s{padding:72px 0}
  .w2-hero{padding-top:56px!important}
  .w2-hero h1{font-size:clamp(30px,8.4vw,44px)}
  .w2-stage{height:340px;margin-top:40px}
  .w2-hero-win{right:64px}
  .w2-hero-phone{width:118px;padding:6px;border-radius:22px;bottom:-24px}
  .w2-hero-phone .w2-view{border-radius:17px}
  .w2-types{grid-template-columns:1fr}
  .w2-t-sol{grid-template-columns:1fr}.w2-t-sol .w2-t-pic{margin:18px 18px 0}
  .w2-t-corp,.w2-t-land,.w2-t-shop,.w2-t-edu{grid-column:auto;grid-row:auto}
  .w2-long{min-height:300px}
  .w2-t-txt small{margin-left:0;width:100%}
  .w2-devs{height:300px;gap:10px;align-items:flex-end}
  .w2-dev.pc{display:none}
  .w2-dev.tab{width:min(52vw,210px)}
  .w2-dev.mob{width:min(30vw,128px);height:76%}
  .w2-cap{width:auto;justify-content:center;margin-top:60px}
  .w2-bento{grid-template-columns:minmax(0,1fr)}
  .b-conv,.b-blog,.b-track{grid-column:auto}
  .w2-eng{grid-template-columns:minmax(0,1fr)}
  .w2-ph{flex-basis:40%;padding:6px;border-radius:26px}.w2-ph-v{border-radius:21px}
  .b-blog .w2-arrow{width:34px;height:34px}
  .w2-cs,.cs-bs{grid-template-columns:1fr;padding:22px 20px 26px;border-radius:24px}
  .cs-bs .w2-cs-fig{order:0}
  .w2-cs-fig{height:250px}
  .w2-nums strong{font-size:24px}
  .w2-nums small{font-size:13px}
  .w2-flow-in{grid-template-columns:1fr}
  .w2-flow-fig{display:none}
  .w2-steps::before{left:23px}
  .w2-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;row-gap:12px;min-height:0;padding:10px 0}
  .w2-steps em{width:48px;height:48px;font-size:14px;background:var(--navy);color:#fff}
  .w2-steps b{color:var(--navy);font-size:20px}
  .w2-steps li video{display:block;grid-column:2;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#fff;box-shadow:0 14px 30px rgba(90,60,0,.16)}
  .w2-steps li.dup video{display:none}
  .w2-ocs{grid-template-columns:minmax(0,1fr)}
  .w2-oc+.w2-oc::before{display:none}
  .v-web2 .s-faq{padding:72px 0}
}
@media (prefers-reduced-motion:reduce){.w2-ph-v img{animation:none}.w2-flow-card video,.w2-t{transition:none}}