/* ══════════════════════════════════════════════════════════════════
   홈 4차 (hw2) — 위닝 클론 × 기존 이식 × 섹션별 A/B/C 탭 · 2026-08-11

   질의 확정(2026-08-11):
     · "같이 진" = 비용 비교 + 수치 증명 둘 다 이식
     · 차별점 = 기존(이전/이후+01~04) 이식 + 위닝 4원칙 클론, 다른 자리 병존
     · 3안 = 구조 3안(자유 섹션) + 톤·밀도 변주(그대로 이식 지시 섹션)
     · 문제점 = V1 기본, V2(물리 낙하)는 변주 탭
   그 외 지시:
     · 카테고리 바 = 위닝 실사이트 클론(스티키 앵커 바 + 현재 섹션 하이라이트)
     · 좌우 여백 = 전 섹션 .hw2-in(1520+32) 하나로 통일 — 내부 상한(900·1240) 완화
     · 노란 형광펜(.hw-ask) 폐지 — 임의 수치 기재(사장님이 직접 교체 전제)
   ══════════════════════════════════════════════════════════════════ */

/* ── 0. 여백·안내선 통일 — 다른 페이지들(sv-final 1240 기준)과 같은 선 ── */
/* 2026-08-11b: "폰트가 크고 너비가 너무 넓다" 지적 → 1520 풀폭·1080 헤더 폐기,
   콘텐츠 1240 / 헤더 900(hw.css 기본) / 타이틀 46 상한(cf-final·estimate와 동일)으로 회귀 */
.hw2-in{ max-width:1240px; margin:0 auto; padding:0 32px; }
.hw.hw2 .hw-in{ max-width:1240px; }
.hw.hw2 .hw-in.nw{ max-width:1180px; }
/* legacy 컨테이너는 site.css 원래 폭으로 */
.hw2 .wrapc{ max-width:1240px; margin:0 auto; padding:0 24px; }
.hw2 .wrapw{ max-width:1520px; margin:0 auto; padding:0 24px; }

/* ── 0-b. 타이포 위계 — 위닝 6페이지(홈·service·media·portfolio·estimate·contact) 전수 실측 포트 ──
   실측(2026-08-11, SSR HTML의 Tailwind 클래스 기준 = 데스크톱 값):
     섹션 h2 = 홈 52 · 하위페이지 최빈 40 (전부 w600) / 카드 h3 16~20 / 본문 12.5~14.5 / 라벨 11~12
   "여전히 크다" 재지적 → 홈값(52)이 아니라 **하위페이지 티어(40)**로 확정. 굵기는 전부 600. */
.hw.hw2 .sec-title{ font-size:clamp(28px,2.7vw,40px); font-weight:600; }
.hw.hw2 .sec-sub{ font-size:16px; }
.hw.hw2 .sec-pill{ font-size:12.5px; padding:7px 15px 7px 13px; }
.hw2 .mx-band .tx h2{ font-size:clamp(24px,2.4vw,36px); font-weight:600; }
.hw2 .tr3 .big{ font-size:clamp(22px,2.2vw,32px); font-weight:600; }
.hw2 .tr3 .st .v{ font-size:clamp(26px,2.6vw,36px); }
.hw2 .mx-dg .r .sc .v{ font-size:clamp(36px,3.6vw,48px); }
.hw.hw2 .hw-cta h2{ font-size:clamp(28px,2.7vw,40px); font-weight:600; }
.hw.hw2 .hw-cta p{ font-size:16px; }

/* ── 0-c. 한국어 줄바꿈 규약 — 위닝의 break-keep 클론 ──
   keep-all = 어절(띄어쓰기) 단위로만 꺾여 조사·어미가 줄 머리에 오지 않는다.
   pretty = 마지막 줄 고아 단어 방지. .pcbr = 데스크톱 전용 수동 줄바꿈(모바일에선 무효). */
.hw2-sec :is(h1,h2,h3,h4,p,li,.sec-sub,.sec-title){ word-break:keep-all; overflow-wrap:break-word; }
.hw2-sec p{ text-wrap:pretty; }
@media(max-width:820px){ .hw2 .pcbr{ display:none; } }

/* ── 0-d. 가격 — 위닝 플랜 카드 실측 클론 (2026-08-11f) ──
   위닝 해부도 = 상단 aspect-video 실물 이미지 → 용도 pill → 이름 22 → 설명 13
   → 가격 32~36 → 체크서클 리스트 13.5 → 동적 총액 2줄 CTA. 호버 리프트. */
.hw2 .hw-pl{ padding:0; border-radius:24px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.hw2 .hw-pl:hover{ transform:translateY(-6px); box-shadow:0 30px 62px -34px rgba(10,28,62,.3); border-color:var(--tint-b); }
.hw2 .hw-pl.hot:hover{ box-shadow:0 30px 62px -30px rgba(46,111,242,.5); }
.hw2 .hw-pl .im{ aspect-ratio:16/9; background:var(--bg2); border-bottom:1px solid var(--bg2); }
.hw2 .hw-pl .im img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hw2 .hw-pl .bd{ display:flex; flex-direction:column; flex:1; padding:24px 26px 22px; }
.hw2 .hw-pl .use{ align-self:flex-start; font-size:12px; font-weight:600; color:var(--blue-d);
  background:#F0F7FF; border:1px solid var(--tint-b); border-radius:999px; padding:5px 12px; }
.hw2 .hw-pl .nm{ margin-top:12px; font-size:22px; font-weight:600; letter-spacing:-.01em; }
.hw2 .hw-pl .ds{ margin-top:5px; font-size:13px; line-height:1.7; min-height:0; }
.hw2 .hw-pl .amt{ margin-top:16px; padding-bottom:15px; border-bottom:1px solid var(--bg2); }
.hw2 .hw-pl .amt .v{ font-size:clamp(28px,2.4vw,34px); font-weight:600; }
.hw2 .hw-pl ul{ margin-top:16px; padding-top:0; border-top:0; gap:10px; }
.hw2 .hw-pl li{ font-size:13.5px; }
.hw2 .hw-pl li .ck{ border-radius:50%; background:#F0F7FF; border:1px solid var(--tint-b); font-size:10px; }
.hw2 .hw-pl .go{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 14px; }
.hw2 .hw-pl .go .gk{ font-size:12px; font-weight:500; opacity:.72; }
.hw2 .hw-pl .go .gv{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.hw2 .hw-pl .est .v{ font-size:inherit; color:inherit; margin:0; display:inline; }
.hw2 .hw-pl .ribbon{ z-index:2; }
/* 계산 패널 — 위닝식 대형 수치 */
.hw2 .hw-calc{ text-align:center; }
.hw2 .hw-calc .tabs{ margin-bottom:4px; }
.hw2 .hw-calc .lbl{ margin-top:20px; flex-direction:column; align-items:center; gap:6px; }
.hw2 .hw-calc .lbl .v{ font-size:clamp(40px,4vw,52px); font-weight:600; }
.hw2 .hw-calc .opts{ justify-content:center; }

/* ── 0-e. 후기 — 위닝 자동 슬라이드 클론: 2열 반대 방향, 호버 정지 ── */
.hw2 .wv .rail + .rail{ margin-top:20px; }
.hw2 .wv .rail.rev .tk{ animation-name:hwrollRev; animation-duration:72s; }

/* ── 0-e1. 포토밴드 타일 — 원본(3166×2159) 비율에 맞춰 제목이 안 잘리게 ── */
.hw2 .mx-band .ph img{ height:auto; aspect-ratio:3166/2159; object-fit:cover; object-position:center; }
.hw2 .mx-band .ph-rail{ align-items:stretch; }
/* 타일이 원본 비율을 지키면 세로가 짧아진다 → 레일 쪽 폭을 넓혀 텍스트 단과 균형을 맞춘다 */
@media(min-width:1181px){ .hw2 .mx-band .row{ grid-template-columns:0.72fr 1.28fr; gap:48px; } }
@media(max-width:820px){ .hw2 .mx-band .ph img{ height:auto; } }

/* ── 0-e2. 진단 D안(목업+데모 조합) — 이어 붙인 데모 쪽 중복 헤더·여백 정리 ── */
.hw2 .dg-merge .sec-hd{ display:none; }
.hw2 .dg-merge > section{ padding-top:0; }

/* ── 0-f. 실사 이미지 — FIT 카드 헤더 + CTA 배경 (교체 전제 스톡) ── */
.hw2 .wb-tc{ padding:0; overflow:hidden; }
.hw2 .wb-tc .im{ aspect-ratio:16/9; background:var(--bg2); }
.hw2 .wb-tc .im img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease); }
.hw2 .wb-tc:hover .im img{ transform:scale(1.04); }
.hw2 .wb-tc .bd{ padding:22px 26px 26px; }
.hw2 .hw-cta{ background:linear-gradient(rgba(7,16,34,.9), rgba(10,24,54,.94)),
  url('assets/photo/office.webp') center/cover no-repeat; }

/* ── 1. 카테고리 바 (위닝 클론: GNB 아래 스티키 앵커) ── */
/* GNB(fixed 76px·z90) 아래에 붙는다 — top:0/z120이면 GNB를 덮는다(2026-08-11b 사장님 지적) */
.h2nav{ position:sticky; top:76px; z-index:80; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.h2nav .in{ max-width:1520px; margin:0 auto; padding:0 32px; display:flex; justify-content:center; gap:6px;
  overflow-x:auto; scrollbar-width:none; }
.h2nav .in::-webkit-scrollbar{ display:none; }
.h2nav a{ flex-shrink:0; position:relative; font-size:15px; font-weight:500; color:var(--g700);
  padding:17px 14px 15px; transition:color .25s; }
.h2nav a:hover{ color:var(--ink); }
.h2nav a::after{ content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.h2nav a.on{ color:var(--blue-d); font-weight:600; }
.h2nav a.on::after{ transform:scaleX(1); }
.hw2 section[id], .hw2 .hw2-sec[id]{ scroll-margin-top:120px; }

/* ── 2. 섹션 variant 스위처 (A/B/C 탭) ────────────────── */
.hw2-sec{ position:relative; }
.h2vt{ position:absolute; top:16px; right:22px; z-index:60; display:flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 7px 5px 13px;
  box-shadow:0 10px 28px -14px rgba(10,28,62,.35); }
.h2vt .lb{ font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--g500); white-space:nowrap; }
.h2vt button{ font-family:inherit; cursor:pointer; width:27px; height:27px; border-radius:50%;
  border:1px solid var(--line); background:#fff; font-size:12px; font-weight:700; color:var(--g500);
  transition:background .25s, color .25s, border-color .25s; }
.h2vt button:hover{ border-color:var(--blue); color:var(--blue); }
.h2vt button.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
@keyframes h2swap{ from{ opacity:0; transform:translateY(18px); } }
.hw2-vbody.swap{ animation:h2swap .5s var(--ease); }

/* ── 3. 위닝 4원칙 클론 (wb-) ─────────────────────────── */
.wb{ padding:128px 0 0; background:#fff; overflow:hidden; }
.wb .bene{ padding:96px 0; }
.wb .bene + .bene{ border-top:1px solid var(--bg2); }
.wb-pill{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700;
  color:var(--blue-d); background:#F0F7FF; border:1px solid var(--tint-b); border-radius:999px; padding:7px 14px; }
.wb-pill .dv{ width:1px; height:12px; background:var(--tint-b); }
.wb-pill .sub{ font-weight:600; color:var(--g700); }
/* B1 — 좌 텍스트 + 우 실물 3열 패널 */
.wb-split{ display:grid; grid-template-columns:.88fr 1.12fr; gap:64px; align-items:center; }
/* 위닝 원문 = 42px w600 lh1.25 break-keep. Paperlogy는 같은 px에서 커 보여 한 단계 아래(34)로 맞춘다 */
.wb-split h3, .wb-center h3{ margin-top:20px; font-size:clamp(24px,2.3vw,34px); font-weight:600;
  letter-spacing:-.035em; line-height:1.3; color:var(--ink); }
.wb-split h3 .em, .wb-center h3 .em{ color:var(--blue); }
.wb-split p, .wb-center > p{ margin-top:20px; font-size:15.5px; line-height:1.85; color:var(--g700); }
.wb-go{ margin-top:26px; display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600;
  color:var(--blue); border-bottom:1.5px solid transparent; transition:border-color .3s; }
.wb-go:hover{ border-color:var(--blue); }
.wb-go .ar{ transition:transform .4s var(--ease); }
.wb-go:hover .ar{ animation:h2arr .62s ease 2; }
@keyframes h2arr{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }
.wb-panel{ border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,var(--bg2),#fff);
  padding:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wb-panel .col .bt{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink);
  margin-bottom:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-panel .col .bt::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; }
.wb-panel .col a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.wb-panel .col a + a{ margin-top:12px; }
.wb-panel .col img{ width:100%; aspect-ratio:3166/2159; object-fit:cover; display:block;
  transition:transform .7s var(--ease); }
.wb-panel .col a:hover img{ transform:scale(1.05); }
/* B2 — 센터 + 와이드 스트립 */
.wb-center{ text-align:center; max-width:860px; margin:0 auto; }
.wb-strip{ margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch; }
.wb-st{ position:relative; border:1px solid var(--line); border-radius:16px; background:#fff; padding:24px 22px;
  text-align:left; }
.wb-st .no{ font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--blue); }
.wb-st h4{ margin-top:9px; font-size:17.5px; font-weight:600; color:var(--ink); }
.wb-st p{ margin-top:8px; font-size:13.5px; line-height:1.7; color:var(--g700); }
.wb-st .who{ margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--blue-d); background:var(--tint); border-radius:999px; padding:5px 11px; }
.wb-strip .lnk{ position:absolute; top:50%; right:-13px; transform:translateY(-50%); z-index:2;
  width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid var(--tint-b);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--blue); }
/* B3 — 비포/애프터 수치 카드 */
.wb-ba{ margin-top:52px; display:grid; grid-template-columns:1fr 76px 1fr; gap:0; align-items:stretch; }
.wb-bc{ border:1px solid var(--line); border-radius:20px; background:#fff; padding:30px 32px; }
.wb-bc .tag{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.1em; border-radius:999px; padding:6px 14px; }
.wb-bc.bef .tag{ color:var(--g500); background:var(--bg2); }
.wb-bc.aft{ border-color:var(--blue); box-shadow:0 26px 56px -30px rgba(46,111,242,.4); }
.wb-bc.aft .tag{ color:#fff; background:var(--blue); }
.wb-bc .rows{ margin-top:18px; }
.wb-bc .r{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--bg2); }
.wb-bc .r:last-child{ border-bottom:0; }
.wb-bc .r .k{ font-size:14.5px; color:var(--g700); }
.wb-bc .r .v{ font-size:clamp(19px,1.9vw,25px); font-weight:700; letter-spacing:-.03em; color:var(--ink); white-space:nowrap; }
.wb-bc.aft .r .v{ color:var(--blue); }
.wb-bc .r .v small{ font-size:.6em; font-weight:600; color:var(--g500); margin-left:2px; }
.wb-mid{ display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--blue); }
.wb-note{ margin-top:18px; font-size:13px; line-height:1.7; color:var(--g500); text-align:center; }
/* B4 — 3 서브카드 */
.wb-tri{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wb-tc{ border:1px solid var(--line); border-radius:18px; background:var(--bg2); padding:30px 28px;
  text-align:left; transition:transform .5s var(--ease), border-color .3s, background .3s; }
.wb-tc:hover{ transform:translateY(-5px); border-color:var(--tint-b); background:#fff; }
.wb-tc .no{ font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--blue); }
.wb-tc h4{ margin-top:10px; font-size:19px; font-weight:600; color:var(--ink); }
.wb-tc p{ margin-top:10px; font-size:14.5px; line-height:1.78; color:var(--g700); }
/* 사이 캡슐 CTA (위닝 알약 배너 클론) */
.wb-cap{ margin:8px auto 0; max-width:760px; display:flex; align-items:center; justify-content:space-between;
  gap:18px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:12px 12px 12px 30px;
  box-shadow:0 18px 44px -26px rgba(10,28,62,.28); flex-wrap:wrap; }
.wb-cap .tx{ font-size:16px; font-weight:600; color:var(--ink); }
.wb-cap .hbtn{ padding:13px 26px; font-size:15px; }
/* C안 — 컴팩트 2×2 */
.wbC{ padding:128px 0; background:#fff; }
.wbC .grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.wbC .c{ border:1px solid var(--line); border-radius:20px; padding:34px 32px; background:#fff;
  transition:transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.wbC .c:hover{ transform:translateY(-5px); border-color:var(--tint-b); box-shadow:0 24px 52px -28px rgba(10,28,62,.26); }
.wbC .c h4{ margin-top:14px; font-size:clamp(21px,2vw,26px); font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.4; }
.wbC .c h4 .em{ color:var(--blue); }
.wbC .c p{ margin-top:12px; font-size:15px; line-height:1.8; color:var(--g700); }

/* ── 4. 후기 (위닝 클론 · wv-) ────────────────────────── */
.wv{ padding:128px 0; background:var(--bg2); overflow:hidden; }
.wv .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wv-c{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:34px 30px 28px; transition:transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.wv-c:hover{ transform:translateY(-5px); border-color:var(--tint-b); box-shadow:0 24px 52px -28px rgba(10,28,62,.24); }
.wv-c .q{ font-size:clamp(18px,1.8vw,22px); font-weight:700; letter-spacing:-.025em; line-height:1.5; color:var(--ink); }
.wv-c .q::before{ content:'“'; color:var(--blue); margin-right:2px; }
.wv-c .q::after{ content:'”'; color:var(--blue); margin-left:2px; }
.wv-c p{ margin-top:14px; font-size:15px; line-height:1.85; color:var(--g700); flex:1; }
.wv-c .who{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.wv-c .av{ width:40px; height:40px; border-radius:50%; background:var(--tint); color:var(--blue-d); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.wv-c .who .nm{ font-size:14.5px; font-weight:600; color:var(--ink); }
.wv-c .who .rl{ margin-top:3px; font-size:13px; color:var(--g500); }
.wv .foot{ margin-top:26px; text-align:center; font-size:13px; line-height:1.7; color:var(--g500); }
/* B — 6장 그리드는 .grid 그대로 6개 / C — 마퀴 */
.wv .rail{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.wv .rail .tk{ display:flex; gap:20px; width:max-content; animation:hwroll 60s linear infinite; padding:4px; }
.wv .rail:hover .tk{ animation-play-state:paused; }
.wv .rail .wv-c{ width:420px; flex-shrink:0; }

/* ── 5. TRUSTED BY 변주 (tr2-) ────────────────────────── */
.tr2{ padding:96px 0; background:#fff; border-bottom:1px solid var(--line); }
.tr2 .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tr2-c{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:24px 24px 22px;
  transition:transform .45s var(--ease), border-color .3s; }
.tr2-c:hover{ transform:translateY(-4px); border-color:var(--tint-b); }
.tr2-c .f{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tr2-c .f b{ font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.tr2-c .f .n{ font-size:13px; font-weight:700; color:var(--blue); }
.tr2-c .ks{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.tr2-c .ks span{ font-size:12.5px; color:var(--g700); background:var(--bg2); border-radius:999px; padding:5px 11px; }
/* C — 대형 라인 + 통계 */
.tr3{ padding:96px 0; background:#fff; border-bottom:1px solid var(--line); overflow:hidden; }
.tr3 .big{ text-align:center; font-size:clamp(24px,2.6vw,36px); font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.tr3 .big .em{ color:var(--blue); }
.tr3 .stats{ margin:40px auto 0; max-width:900px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:center; }
.tr3 .st .v{ font-size:clamp(30px,3vw,42px); font-weight:700; letter-spacing:-.04em; color:var(--blue); }
.tr3 .st .v small{ font-size:.5em; font-weight:600; margin-left:2px; }
.tr3 .st .k{ margin-top:8px; font-size:14px; color:var(--g700); }
.tr3 .rows{ margin-top:44px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.tr3 .tk{ display:flex; gap:12px; width:max-content; animation:hwroll 54s linear infinite; }
.tr3 .rows:hover .tk{ animation-play-state:paused; }

/* ── 6. 포트폴리오 변주 + 위닝 모션 보강 ──────────────── */
.hw2 .hw-pf .hbtn .ar2{ display:inline-block; transition:transform .3s; }
.hw2 .hw-pf .hbtn:hover .ar2{ animation:h2arr .62s ease 2; }
/* CTA 도형 휠(위닝 히어로 러너 이식) — .h2run 을 버튼에 붙인다 */
.h2run{ position:relative; z-index:0; }
.h2run::before{ content:''; position:absolute; inset:-2.5px; z-index:1; border-radius:inherit; padding:2.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.h2run:hover::before{ opacity:1; animation:hxRunner 1.6s linear infinite; }
.h2run.dkbg::before{ background:conic-gradient(from var(--hxAngle),transparent 0deg,transparent 250deg,rgba(224,239,255,.35) 290deg,#cfe4ff 330deg,#ffffff 352deg,transparent 360deg); }
.h2run.ltbg::before{ background:conic-gradient(from var(--hxAngle),transparent 0deg,transparent 250deg,rgba(96,165,250,.3) 290deg,#93c5fd 330deg,#e0efff 352deg,transparent 360deg); }
/* B — 2열 대형 */
.pfB .grid{ grid-template-columns:1fr 1fr !important; }
.pfB .hw-pfc .ft .tt{ font-size:17.5px; -webkit-line-clamp:2; }
/* C — 마퀴 레일 */
/* ★section 한정 — 진단 목업 타이틀바의 배지도 class="wr"라 안 가르면 128px 패딩이 배지에 얹힌다 */
section.wr{ background:#0A1836; padding:128px 0; overflow:hidden; }
.wr .rows{ display:flex; flex-direction:column; gap:16px; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.wr .tk{ display:flex; gap:16px; width:max-content; animation:hwroll 58s linear infinite; }
.wr .tk.rev{ animation:hwrollRev 66s linear infinite; }
.wr .rows:hover .tk{ animation-play-state:paused; }
.wr-c{ width:340px; flex-shrink:0; border-radius:14px; overflow:hidden; background:#0E2044;
  border:1px solid rgba(255,255,255,.09); transition:border-color .3s, transform .5s var(--ease); }
.wr-c:hover{ border-color:rgba(77,162,255,.4); transform:translateY(-4px); }
.wr-c img{ width:100%; aspect-ratio:3166/2159; object-fit:cover; display:block; }
.wr-c .t{ padding:12px 15px 14px; font-size:14px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 7. 가치입증 (proof) 조립 여백 ─────────────────────── */
.hw2 .hw-cmp.tight{ padding-bottom:96px; }
.hw2 .hw-num.tight{ padding-top:96px; }

/* ── 8. legacy 이식 (main.html 발췌 · 원본 유지) ──────── */
/* 차별점(이전/이후 + 01~04) — 다크 */
.lgap{ background:var(--navy); padding:128px 0; }
.lgap .ba-wrap{ display:grid; grid-template-columns:1fr 84px 1fr; gap:0; align-items:stretch; }
.lgap .ba-panel{ background:var(--navy2,#0F1D33); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:26px 28px 30px; }
.lgap .ba-panel .tag{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.1em; border-radius:999px; padding:6px 15px; }
.lgap .ba-panel.before .tag{ color:#9FB0C8; border:1px solid rgba(255,255,255,.2); }
.lgap .ba-panel.after .tag{ color:#fff; background:var(--blue); }
.lgap .ba-panel h3{ margin-top:14px; font-size:19px; font-weight:600; color:#fff; }
.lgap .ba-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.lgap .ba-chips span{ font-size:13.5px; color:#9FB0C8; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 15px; }
.lgap .ba-panel .fig{ margin-top:20px; height:172px; }
.lgap .ba-panel .fig svg{ width:100%; height:100%; }
.lgap .ba-tl{ display:flex; gap:0; margin-top:20px; align-items:center; }
.lgap .ba-tl .tn{ flex:1; text-align:center; font-size:13.5px; font-weight:600; color:#fff; background:#16283F; border:1px solid var(--blue); border-radius:10px; padding:11px 6px; }
.lgap .ba-tl .tc{ flex:0 0 26px; height:1.5px; background:var(--blue-l); }
.lgap .ba-mid{ display:flex; align-items:center; justify-content:center; }
.lgap .ba-mid svg{ width:44px; height:44px; }
.lgap .pr4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; }
.lgap .pr4 .pcard{ border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px 22px 24px; transition:border-color .3s, transform .3s; }
.lgap .pr4 .pcard:hover{ border-color:rgba(91,141,247,.5); transform:translateY(-4px); }
.lgap .pr4 .ic{ width:44px; height:44px; border-radius:12px; background:rgba(91,141,247,.14); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.lgap .pr4 .ic svg{ width:23px; height:23px; }
.lgap .pr4 .no{ font-size:13px; font-weight:600; color:var(--blue-l); letter-spacing:.08em; }
.lgap .pr4 h4{ margin-top:9px; font-size:18.5px; font-weight:600; color:#fff; line-height:1.4; }
.lgap .pr4 p{ margin-top:9px; font-size:14px; line-height:1.66; color:#B8C5D9; }
/* B — 라이트 스킨 */
.lgap.light{ background:#fff; }
.lgap.light .ba-panel{ background:#fff; border-color:var(--line); }
.lgap.light .ba-panel.before .tag{ color:var(--g500); border-color:var(--line); }
.lgap.light .ba-panel h3{ color:var(--ink); }
.lgap.light .ba-chips span{ color:var(--g700); border-color:var(--line); }
.lgap.light .ba-tl .tn{ background:var(--tint); color:var(--blue-d); }
.lgap.light .pr4 .pcard{ border-color:var(--line); background:var(--bg2); }
.lgap.light .pr4 .pcard:hover{ border-color:var(--tint-b); }
.lgap.light .pr4 h4{ color:var(--ink); }
.lgap.light .pr4 p{ color:var(--g700); }
.lgap.light .pr4 .ic{ background:var(--tint); }
/* C — 이전/이후만 */
.lgap.baonly .pr4{ display:none; }

/* 서비스 4분야 */
.lgsv{ padding:128px 0; background:#fff; }
.lgsv .svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lgsv .svc-card{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:26px 26px 24px; display:flex; flex-direction:column; transition:transform .3s, border-color .3s; }
.lgsv .svc-card:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
.lgsv .svc-card .fig{ height:132px; margin-bottom:20px; }
.lgsv .svc-card .fig svg{ width:100%; height:100%; }
.lgsv .svc-card .stag{ font-size:13px; font-weight:600; color:var(--blue); letter-spacing:.02em; }
.lgsv .svc-card h3{ margin-top:8px; font-size:19px; font-weight:600; color:var(--ink); line-height:1.42; }
.lgsv .svc-card>p{ margin-top:9px; font-size:14.5px; line-height:1.65; color:var(--g700); flex:1; }
.lgsv .svc-card .go{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--blue); }
.lgsv .svc-card .go .ar{ transition:transform .2s; }
.lgsv .svc-card:hover .go .ar{ transform:translateX(4px); }
.lgsv.two .svc-grid{ grid-template-columns:1fr 1fr; }
.lgsv.two .svc-card .fig{ height:170px; }
/* C — 리스트형 */
.lgsv .svl{ border-top:1px solid var(--line); }
.lgsv .svl .row{ display:grid; grid-template-columns:230px 1fr auto; gap:28px; align-items:center;
  padding:30px 4px; border-bottom:1px solid var(--line); transition:background .25s; }
.lgsv .svl .row:hover{ background:var(--bg2); }
.lgsv .svl .stag{ font-size:13px; font-weight:700; color:var(--blue); }
.lgsv .svl h3{ margin-top:8px; font-size:20px; font-weight:600; color:var(--ink); line-height:1.4; }
.lgsv .svl p{ font-size:15px; line-height:1.75; color:var(--g700); }
.lgsv .svl .go{ font-size:14.5px; font-weight:600; color:var(--blue); white-space:nowrap; }

/* AX 전환 */
.lgax{ padding:128px 0; background:var(--bg2); }
.lgax .ax-flow{ max-width:900px; margin:0 auto 44px; padding:0 24px; }
.lgax .ax-flow svg{ width:100%; height:auto; display:block; }
.lgax .ax4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lgax .ax4 .acard{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:24px 24px 26px; transition:transform .3s, border-color .3s; }
.lgax .ax4 .acard:hover{ transform:translateY(-5px); border-color:var(--tint-b); }
.lgax .ax4 .acard.hl{ border:1.5px solid var(--blue); }
.lgax .ax4 .fig{ height:92px; margin-bottom:16px; }
.lgax .ax4 .fig svg{ width:100%; height:100%; }
.lgax .ax4 .no{ font-size:13px; font-weight:600; color:var(--blue); letter-spacing:.08em; }
.lgax .ax4 h4{ margin-top:8px; font-size:18.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.lgax .ax4 p{ margin-top:8px; font-size:14px; line-height:1.65; color:var(--g700); }
.lgax .ax-foot{ margin-top:40px; text-align:center; font-size:18.5px; font-weight:600; color:var(--ink); }
.lgax .ax-foot .em{ color:var(--blue); }
.lgax.noflow .ax-flow{ display:none; }

/* 3분 진단 (UI 목업형) */
.lgdg{ padding:128px 0; background:#fff; }
.lgdg .dgA{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:22px; align-items:stretch; }
.lgdg .dgA.solo{ grid-template-columns:1fr; max-width:900px; margin:0 auto; }
.lgdg .uiwin{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .3s, border-color .3s; }
.lgdg .uiwin:hover{ transform:translateY(-5px); border-color:var(--tint-b); }
.lgdg .uiwin .wbar{ height:38px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; padding:0 15px; }
.lgdg .uiwin .wbar i{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.lgdg .uiwin .wbar .wt{ margin-left:8px; font-size:12px; color:var(--g500); }
.lgdg .uiwin .wbar .wr{ margin-left:auto; font-size:12px; font-weight:600; color:var(--blue); }
.lgdg .uiwin .wbody{ padding:22px 24px 24px; }
.lgdg .qq{ font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.5; }
.lgdg .qopt{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.lgdg .qopt .o{ display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:11px; padding:12px 15px; font-size:14px; color:var(--g700); }
.lgdg .qopt .o.sel{ border-color:var(--blue); background:var(--tint); color:var(--blue-d); font-weight:600; }
.lgdg .qopt .r{ width:16px; height:16px; border-radius:50%; border:1.6px solid #D1D6DB; flex:0 0 auto; }
.lgdg .qopt .o.sel .r{ border-color:var(--blue); background:var(--blue); box-shadow:inset 0 0 0 3px #fff; }
.lgdg .qnext{ margin-top:18px; display:flex; justify-content:space-between; align-items:center; }
.lgdg .qnext .prog{ flex:1; height:7px; border-radius:4px; background:var(--tint); margin-right:16px; overflow:hidden; }
.lgdg .qnext .prog i{ display:block; width:28%; height:100%; border-radius:4px; background:var(--blue); }
.lgdg .qnext .nb{ font-size:13.5px; font-weight:600; color:#fff; background:var(--blue); border-radius:9px; padding:9px 18px; }
.lgdg .rs-top{ display:flex; gap:22px; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); }
.lgdg .rs-score .lb{ font-size:13px; font-weight:600; color:var(--g500); }
.lgdg .rs-score .num{ font-size:36px; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1.1; }
.lgdg .rs-score .num b{ color:var(--blue); font-weight:700; }
.lgdg .rs-score .cap{ margin-top:4px; font-size:13px; color:var(--g700); }
.lgdg .rs-donut{ margin-left:auto; flex:0 0 108px; }
.lgdg .rs-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:18px; }
.lgdg .rs-cell .l{ font-size:12.5px; font-weight:600; color:var(--g500); }
.lgdg .rs-cell .v{ margin-top:5px; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.lgdg .rs-cell .v.bl{ color:var(--blue); }
.lgdg .rs-cell .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.lgdg .rs-cell .chips span{ font-size:12px; font-weight:600; color:var(--blue-d); background:var(--tint); border-radius:7px; padding:5px 10px; }
.lgdg .rs-cell ul{ margin:8px 0 0; padding:0; list-style:none; }
.lgdg .rs-cell li{ display:flex; gap:7px; font-size:13px; color:var(--g700); line-height:1.55; margin-top:5px; }
.lgdg .rs-cell li .c{ color:var(--blue); font-weight:700; }
.lgdg .diag-cta{ text-align:center; margin-top:48px; }
.lgdg .diag-cta .note{ margin-top:14px; font-size:14px; color:var(--g500); }
.lgdg .btn-fill{ background:var(--blue); color:#fff; }
.lgdg .btn-fill:hover{ background:var(--blue-d); }

/* AX 사례집 */
.lgcs{ padding:128px 0; background:var(--bg2); }
.lgcs .case-legend{ display:flex; justify-content:center; gap:18px; margin:-30px 0 40px; font-size:13.5px; color:var(--g500); }
.lgcs .case-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.lgcs .case-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.lgcs.scroll .case-grid{ display:flex; overflow-x:auto; gap:18px; padding-bottom:14px; scroll-snap-type:x mandatory; }
.lgcs.scroll .case-card{ flex:0 0 460px; scroll-snap-align:start; }
.lgcs .case-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .3s, border-color .3s; }
.lgcs .case-card:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
.lgcs .case-card .thumb{ height:210px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.lgcs .cmp{ position:absolute; inset:0; display:flex; align-items:center; gap:10px; padding:18px; background:var(--bg2); }
.lgcs .cmp .side{ flex:1; height:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 13px; overflow:hidden; }
.lgcs .cmp .side.aft{ border-color:var(--tint-b); }
.lgcs .cmp .cap{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; border-radius:999px; padding:3px 9px; margin-bottom:9px; }
.lgcs .cmp .bef .cap{ color:var(--g500); background:var(--bg2); }
.lgcs .cmp .aft .cap{ color:#fff; background:var(--blue); }
.lgcs .cmp .xr{ display:flex; align-items:center; gap:7px; margin-top:6px; }
.lgcs .cmp .xr .xi{ flex:0 0 13px; font-size:11px; line-height:1; color:var(--g500); }
.lgcs .cmp .xr .bar{ flex:1; height:8px; border-radius:3px; background:var(--bg2); }
.lgcs .cmp .aft .xr .xi{ color:var(--blue); font-weight:700; }
.lgcs .cmp .aft .xr .bar{ background:var(--tint); }
.lgcs .cmp .mid{ flex:0 0 26px; display:flex; align-items:center; justify-content:center; }
.lgcs .cmp .mini{ margin-top:8px; border:1px solid var(--line); border-radius:7px; height:44px; display:flex; align-items:flex-end; gap:5px; padding:6px 8px; }
.lgcs .cmp .aft .mini{ border-color:var(--tint-b); }
.lgcs .cmp .mini i{ flex:1; border-radius:2px 2px 0 0; background:var(--tint); }
.lgcs .cmp .mini i.hi{ background:var(--blue); }
.lgcs .case-bd{ padding:22px 24px 24px; }
.lgcs .case-bd .top{ display:flex; align-items:center; gap:10px; }
.lgcs .badge{ font-size:12px; font-weight:600; border-radius:999px; padding:5px 12px; }
.lgcs .badge.real{ color:#fff; background:var(--blue); }
.lgcs .badge.ex{ color:var(--blue); border:1px solid var(--tint-b); background:var(--tint); }
.lgcs .case-bd .no{ font-size:13px; font-weight:600; color:var(--g500); letter-spacing:.08em; }
.lgcs .case-bd h3{ margin-top:10px; font-size:19px; font-weight:600; color:var(--ink); }
.lgcs .case-bd p{ margin-top:8px; font-size:14.5px; line-height:1.65; color:var(--g700); }
.lgcs .case-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.lgcs .case-tags span{ font-size:12.5px; font-weight:600; color:var(--g500); background:var(--bg2); border-radius:7px; padding:5px 11px; }
.lgcs .case-foot{ text-align:center; margin-top:44px; }
.lgcs .case-note{ max-width:860px; margin:26px auto 0; padding:16px 24px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:13.5px; line-height:1.7; color:var(--g500); text-align:center; }
.lgcs .btn-line{ border:1px solid var(--line); color:var(--ink); background:#fff; }
.lgcs .btn-line:hover{ border-color:var(--g500); }

/* 프로세스 B(기존 여정형) */
.lgpc{ padding:128px 0; background:#fff; }
.lgpc .journey{ max-width:1000px; margin:0 auto 36px; }
.lgpc .journey svg{ width:100%; height:auto; display:block; }
.lgpc .proc{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:14px; }
.lgpc .proc-step{ position:relative; padding:0 22px; text-align:center; }
.lgpc .proc-step + .proc-step{ border-left:1px solid var(--line); }
.lgpc .proc-step .no{ font-size:14px; font-weight:600; color:var(--blue); letter-spacing:.1em; }
.lgpc .proc-step .fig{ height:76px; margin:16px auto 14px; width:76px; }
.lgpc .proc-step .fig svg{ width:100%; height:100%; }
.lgpc .proc-step h3{ font-size:18px; font-weight:600; color:var(--ink); }
.lgpc .proc-step p{ margin-top:9px; font-size:13.5px; line-height:1.62; color:var(--g700); }
/* 프로세스 C(세로 타임라인) */
.pcv{ max-width:860px; margin:0 auto; position:relative; }
.pcv::before{ content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--tint); }
.pcv .row{ position:relative; display:grid; grid-template-columns:56px 1fr 150px; gap:18px; align-items:start; padding:22px 0; }
.pcv .dot{ position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--blue); }
.pcv h3{ font-size:19px; font-weight:600; color:var(--ink); }
.pcv h3 small{ font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--blue); margin-right:9px; }
.pcv p{ margin-top:8px; font-size:14.5px; line-height:1.75; color:var(--g700); }
.pcv .im{ border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.pcv .im img{ width:100%; aspect-ratio:3166/2159; object-fit:cover; display:block; }

/* 미디어 B(인사이트 4카드) */
.lgin{ padding:128px 0; background:#fff; }
.lgin .ins-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lgin .ins-card{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:26px 24px; display:flex; flex-direction:column; transition:transform .3s, border-color .3s; }
.lgin .ins-card:hover{ transform:translateY(-5px); border-color:var(--tint-b); }
.lgin .ins-card .fig{ width:54px; height:54px; border-radius:14px; background:var(--tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.lgin .ins-card .fig svg{ width:28px; height:28px; }
.lgin .ins-card .no{ font-size:13px; font-weight:600; color:var(--blue); letter-spacing:.08em; }
.lgin .ins-card h3{ margin-top:9px; font-size:18px; font-weight:600; color:var(--ink); line-height:1.42; }
.lgin .ins-card p{ margin-top:9px; font-size:14px; line-height:1.66; color:var(--g700); flex:1; }
.lgin .ins-card .go{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--blue); }
/* 미디어 C(리스트형) */
.mdl{ max-width:1080px; margin:0 auto; border-top:1px solid var(--line); }
.mdl a{ display:grid; grid-template-columns:120px 1fr auto auto; gap:22px; align-items:center; padding:26px 6px; border-bottom:1px solid var(--line); transition:background .25s; }
.mdl a:hover{ background:var(--bg2); }
.mdl .cg{ font-size:13px; font-weight:600; color:var(--blue); }
.mdl h3{ font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.mdl .dt{ font-size:13.5px; color:var(--g500); white-space:nowrap; }
.mdl .ga{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--blue); transition:background .3s, border-color .3s, color .3s; }
.mdl a:hover .ga{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* 풀블리드 포토밴드(기존) */
.lgpb{ position:relative; height:400px; background:url('assets/work-focus.jpg') center 32%/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.lgpb .veil{ position:absolute; inset:0; background:rgba(9,17,32,.58); }
.lgpb .in{ position:relative; text-align:center; padding:0 24px; }
.lgpb .kick{ font-size:13.5px; font-weight:600; letter-spacing:.2em; color:var(--blue-l); }
.lgpb h2{ margin-top:16px; font-size:clamp(26px,3vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.4; color:#fff; }
.lgpb p{ margin-top:12px; font-size:16px; color:rgba(255,255,255,.75); }

/* ── 9. FAQ 변주 ─────────────────────────────────────── */
.faqB .wrap{ grid-template-columns:1fr !important; }
.faqB .cats{ display:none; }
.faqC .wrap{ display:block !important; }
.faqC .cats{ display:none; }
.faqC .panel{ border-top:0 !important; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.faqC .hw-fq{ border:1px solid var(--line) !important; border-radius:16px; background:#fff; padding:6px 22px; }
.faqC .hw-fq .a{ max-height:none !important; }
.faqC .hw-fq .ic{ display:none; }
.faqC .hw-fq > button{ cursor:default; padding-bottom:12px; }
.faqC .hw-fq .a p{ padding-top:0; }

/* ── 10. px-v1 (문제점 6카드 · 원본 유지) ─────────────── */
.px2{ position:relative; padding:128px 0; background:#fff; }
.px-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:24px; margin-top:0; }
@media(min-width:768px){ .px-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1180px){ .px-grid{ grid-template-columns:repeat(3,1fr); } }
.px-card{ position:relative; z-index:1; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px 30px 36px; box-shadow:0 18px 44px -34px rgba(10,28,62,.5); transition:transform .4s var(--wz,cubic-bezier(.22,1,.36,1)), border-color .4s, box-shadow .4s; overflow:hidden; }
.px-card:hover{ transform:translateY(-8px); border-color:var(--tint-b); box-shadow:0 30px 60px -38px rgba(10,28,62,.55); }
.px-card:hover .px-t{ color:var(--blue); }
.px-key{ display:inline-block; width:fit-content; margin-bottom:20px; padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-d); background:var(--tint); border:1px solid var(--tint-b); }
.px-obj{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:172px; margin-bottom:24px; border-radius:20px; border:1px solid var(--line); overflow:hidden;
  background-color:#FCFDFF;
  background-image:
    linear-gradient(rgba(46,111,242,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,111,242,.10) 1px, transparent 1px),
    linear-gradient(rgba(46,111,242,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,111,242,.05) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 16px 16px, 16px 16px; }
.px-obj::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 78% 74% at 50% 50%, transparent 42%, #FCFDFF 100%); }
.px-obj > *{ position:relative; z-index:1; }
.px-em{ font-size:34px; line-height:1; filter:drop-shadow(0 6px 12px rgba(10,28,62,.18)); }
.px-t{ font-size:26px; font-weight:600; line-height:1.32; letter-spacing:-.024em; color:var(--ink); margin-bottom:13px; transition:color .3s; word-break:keep-all; }
@media(max-width:520px){ .px-t{ font-size:23px; } }
.px-d{ font-size:15.2px; line-height:1.68; color:var(--g700); word-break:keep-all; }
.px-o1{ position:relative; width:92px; height:92px; display:flex; align-items:center; justify-content:center; }
.px-o1 .ring{ position:absolute; inset:0; border:2px dashed var(--tint-b); border-radius:50%; animation:pxCW 12s linear infinite; }
.px-o1 .dial{ position:relative; width:56px; height:56px; border:3px solid var(--blue); border-radius:50%; background:#fff; }
.px-o1 .dial::after{ content:''; position:absolute; width:3px; height:22px; background:var(--blue-d); top:5px; left:23.5px; transform-origin:bottom; border-radius:2px; animation:pxCW 1.5s linear infinite; }
.px-o1 .warn{ position:absolute; top:-10px; right:-12px; font-size:26px; line-height:1; animation:pxTilt .5s infinite alternate; filter:drop-shadow(0 4px 8px rgba(10,28,62,.22)); }
@keyframes pxCW{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes pxTilt{ from{ transform:rotate(-9deg); } to{ transform:rotate(9deg); } }
.px-o2{ position:relative; width:100px; height:100px; display:flex; align-items:center; justify-content:center; }
.px-o2 .radar{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, var(--blue), transparent 40%); opacity:.22; animation:pxCW 3s linear infinite; }
.px-o2 .won{ position:relative; z-index:2; font-size:38px; font-weight:600; color:var(--blue); animation:pxGlow 1.5s ease-in-out infinite; }
@keyframes pxGlow{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.1); opacity:.68; } }
.px-o3{ position:relative; width:180px; height:130px; display:flex; align-items:center; justify-content:center; }
.px-o3 .orb{ position:absolute; inset:0; width:100%; height:100%; opacity:.34; pointer-events:none; }
.px-o3 .orb circle{ fill:none; stroke:var(--blue); stroke-width:1; stroke-dasharray:3; }
.px-o3 .hub{ position:relative; z-index:20; font-size:36px; line-height:1; animation:pxVibe 2s infinite ease-in-out; filter:drop-shadow(0 6px 12px rgba(10,28,62,.2)); }
.px-o3 .lane{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.px-o3 .tk{ position:absolute; font-size:19px; line-height:1; filter:drop-shadow(0 3px 7px rgba(10,28,62,.28)); }
.px-o3 .k1{ animation:pxLane1 8s linear infinite; }
.px-o3 .k2{ animation:pxLane2 12s linear infinite reverse; }
.px-o3 .k3{ animation:pxLane3 10s linear infinite; }
.px-o3 .k4{ animation:pxLane4 15s linear infinite reverse; }
@keyframes pxLane1{ from{ transform:rotate(0) translateX(38px) rotate(0); } to{ transform:rotate(360deg) translateX(38px) rotate(-360deg); } }
@keyframes pxLane2{ from{ transform:rotate(45deg) translateX(55px) rotate(-45deg); } to{ transform:rotate(405deg) translateX(55px) rotate(-405deg); } }
@keyframes pxLane3{ from{ transform:rotate(180deg) translateX(72px) rotate(-180deg); } to{ transform:rotate(540deg) translateX(72px) rotate(-540deg); } }
@keyframes pxLane4{ from{ transform:rotate(270deg) translateX(46px) rotate(-270deg); } to{ transform:rotate(630deg) translateX(46px) rotate(-630deg); } }
@keyframes pxVibe{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.px-o4{ position:relative; width:160px; height:130px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.px-o4 .rk{ position:absolute; bottom:22px; left:50%; display:flex; flex-direction:column; align-items:center; animation:pxRise 4s infinite cubic-bezier(.45,.05,.55,.95); }
.px-o4 .rk .ico{ font-size:40px; line-height:1; }
.px-o4 .flame{ position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width:15px; height:26px; background:linear-gradient(to bottom, var(--blue-l), var(--blue), transparent); clip-path:polygon(25% 0%,75% 0%,100% 100%,0% 100%); filter:blur(.5px); opacity:0; animation:pxFlame 4s infinite; }
@keyframes pxRise{
  0%{ transform:translate(-50%,0); filter:grayscale(0) brightness(1); animation-timing-function:ease-out; }
  25%{ transform:translate(-50%,-64px); filter:grayscale(0) brightness(1.1) drop-shadow(0 0 12px var(--blue-l)); }
  35%{ transform:translate(-50%,-64px); filter:grayscale(1) brightness(.62); }
  45%{ transform:translate(-50%,0) scaleY(.86); filter:grayscale(1) brightness(.6); }
  55%{ transform:translate(-50%,0) scaleY(1); filter:grayscale(1) brightness(.6); }
  100%{ transform:translate(-50%,0); filter:grayscale(0) brightness(1); }
}
@keyframes pxFlame{ 0%{ opacity:0; height:0; } 5%{ opacity:1; height:18px; } 25%{ opacity:1; height:32px; } 30%{ opacity:0; height:0; } 100%{ opacity:0; } }
.px-o5{ position:relative; width:88px; height:88px; }
.px-o5 .doc{ position:absolute; width:24px; height:31px; background:var(--tint-b); border:1.5px solid var(--blue); border-radius:3px; }
.px-o5 .doc:nth-child(1){ top:0; left:0; animation:pxMg1 3s infinite; }
.px-o5 .doc:nth-child(2){ top:0; right:0; animation:pxMg2 3s infinite; }
.px-o5 .doc:nth-child(3){ bottom:0; left:0; animation:pxMg3 3s infinite; }
.px-o5 .doc:nth-child(4){ bottom:0; right:0; animation:pxMg4 3s infinite; }
.px-o5 .core{ position:absolute; top:50%; left:50%; width:16px; height:16px; background:var(--blue); transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 16px var(--blue-l); opacity:0; animation:pxCore 3s infinite; }
@keyframes pxMg1{ 0%{ transform:translate(0,0); opacity:.85; } 40%,70%{ transform:translate(31px,27px) rotate(45deg); opacity:0; } 100%{ transform:translate(0,0); opacity:.85; } }
@keyframes pxMg2{ 0%{ transform:translate(0,0); opacity:.85; } 40%,70%{ transform:translate(-31px,27px) rotate(-45deg); opacity:0; } 100%{ transform:translate(0,0); opacity:.85; } }
@keyframes pxMg3{ 0%{ transform:translate(0,0); opacity:.85; } 40%,70%{ transform:translate(31px,-27px) rotate(-45deg); opacity:0; } 100%{ transform:translate(0,0); opacity:.85; } }
@keyframes pxMg4{ 0%{ transform:translate(0,0); opacity:.85; } 40%,70%{ transform:translate(-31px,-27px) rotate(-45deg); opacity:0; } 100%{ transform:translate(0,0); opacity:.85; } }
@keyframes pxCore{ 0%,35%{ transform:translate(-50%,-50%) scale(0) rotate(45deg); opacity:0; } 45%,65%{ transform:translate(-50%,-50%) scale(1.2) rotate(45deg); opacity:1; } 80%,100%{ transform:translate(-50%,-50%) scale(0) rotate(45deg); opacity:0; } }
.px-o6{ position:relative; width:180px; height:130px; display:flex; align-items:center; justify-content:center; }
.px-o6 .file{ position:relative; z-index:5; font-size:42px; line-height:1; filter:drop-shadow(0 8px 14px rgba(10,28,62,.2)); }
.px-o6 .slot{ position:absolute; top:18px; right:2px; height:24px; overflow:hidden; background:var(--tint); border:1px solid var(--tint-b); border-radius:6px; padding:0 8px; }
.px-o6 .list{ display:flex; flex-direction:column; animation:pxSlot 5s infinite cubic-bezier(.65,0,.35,1); }
.px-o6 .item{ height:22px; display:flex; align-items:center; white-space:nowrap; font-size:10px; font-weight:600; color:var(--blue-d); }
.px-o6 .pop{ position:absolute; left:2px; bottom:14px; background:var(--ink); color:#fff; font-size:9.5px; font-weight:600; padding:5px 9px; border-radius:8px 8px 8px 0; opacity:0; transform:scale(.5); animation:pxPop 5s infinite; }
@keyframes pxSlot{ 0%,10%{ transform:translateY(0); } 20%,30%{ transform:translateY(-22px); } 40%,50%{ transform:translateY(-44px); } 60%,70%{ transform:translateY(-66px); } 80%,90%{ transform:translateY(-88px); } 100%{ transform:translateY(0); } }
@keyframes pxPop{ 15%,25%,35%,45%,55%,65%,75%,85%{ opacity:1; transform:scale(1) translateY(-5px); } 0%,10%,30%,50%,70%,90%,100%{ opacity:0; transform:scale(.5) translateY(0); } }

/* ── 11. px-v2 (물리 낙하 · 원본 유지, lazy matter-js) ── */
.pxv2{ position:relative; padding:128px 0 0; overflow:hidden; background:#fff; }
.pxv2 .px-pile{ position:relative; height:780px; margin-top:64px; overflow:hidden; }
.pxv2 .px-pit{ position:absolute; inset:0; width:min(1520px,100%); margin-inline:auto; z-index:1; }
.pxv2 .px-pile::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:170px; background:linear-gradient(#fff0,#fff 72%); pointer-events:none; z-index:3; }
.pxv2 .px-pile::before{ content:''; position:absolute; left:0; right:0; top:0; height:130px; background:linear-gradient(#fff,#fff0); pointer-events:none; z-index:3; }
.px-lb{ position:absolute; top:0; left:0; white-space:nowrap; font-size:19px; font-weight:600; letter-spacing:-.01em; color:#fff; background:var(--ink); padding:9px 17px; box-shadow:0 8px 20px -14px rgba(10,28,62,.9);
  opacity:0; transform-origin:50% 50%; will-change:transform; pointer-events:none; }
.px-lb.on{ background:var(--blue); }
.px-lb.gh{ background:#fff; color:var(--g500); border:1.5px solid var(--line); box-shadow:none; }
.px-pit.px-static{ display:flex; flex-wrap:wrap; gap:9px; place-content:flex-end center; padding:0 24px 34px; inset:auto 0 0; height:auto; }
.px-pit.px-static .px-lb{ position:static; opacity:1; transform:none; }
.pxv2 .px-foot{ height:40px; }

/* ── 12. 반응형 ──────────────────────────────────────── */
@media(max-width:1180px){
  .wb .bene{ padding:72px 0; }
  .wb-split{ grid-template-columns:1fr; gap:36px; }
  /* ★그리드 자식 min-width:auto 가 .bt(nowrap) 최소폭을 강제해 패널이 삐져나온다 */
  .wb-split > *, .wb-panel .col{ min-width:0; }
  .wb-strip, .wb-tri{ grid-template-columns:1fr 1fr; }
  .wv .grid, .tr2 .grid{ grid-template-columns:1fr 1fr; }
  .wbC .grid{ grid-template-columns:1fr; }
  .lgap .ba-wrap{ grid-template-columns:1fr; }
  .lgap .ba-mid{ padding:14px 0; }
  .lgap .ba-mid svg{ transform:rotate(90deg); }
  .lgap .pr4, .lgsv .svc-grid, .lgax .ax4, .lgin .ins-grid{ grid-template-columns:1fr 1fr; }
  .lgdg .dgA{ grid-template-columns:1fr; }
  .lgpc .proc{ grid-template-columns:1fr 1fr; gap:34px 0; }
  .lgpc .proc-step:nth-child(3), .lgpc .proc-step:nth-child(5){ border-left:none; }
  .mdl a{ grid-template-columns:1fr auto; }
  .mdl .cg{ grid-column:1 / -1; }
  .pcv .row{ grid-template-columns:56px 1fr; }
  .pcv .im{ display:none; }
}
@media(max-width:820px){
  .h2vt{ top:10px; right:12px; }
  .h2nav a{ font-size:13.5px; padding:13px 10px 11px; }
  .h2nav .in{ justify-content:flex-start; }
  .wb-strip, .wb-tri, .wv .grid, .tr2 .grid, .lgap .pr4, .lgsv .svc-grid, .lgax .ax4, .lgin .ins-grid{ grid-template-columns:1fr; }
  .wb-panel{ grid-template-columns:1fr 1fr; }
  .lgsv .svl .row{ grid-template-columns:1fr; gap:10px; }
  .wb-ba{ grid-template-columns:1fr; }
  .wb-mid{ transform:rotate(90deg); padding:8px 0; }
  .wb-cap{ border-radius:24px; justify-content:center; text-align:center; }
  .lgcs .case-grid{ grid-template-columns:1fr; }
  .lgcs.scroll .case-card{ flex-basis:320px; }
  .lgpc .proc{ grid-template-columns:1fr; }
  .lgpc .proc-step + .proc-step{ border-left:none; border-top:1px solid var(--line); padding-top:30px; }
  .faqC .panel{ grid-template-columns:1fr; }
  .wv .rail .wv-c{ width:320px; }
  .px-lb{ font-size:15px; padding:7px 13px; }
  .pxv2 .px-pile{ height:600px; margin-top:44px; }
  .pxv2 .px-pile::after{ height:130px; }
  .pxv2 .px-pile::before{ height:90px; }
}
@media(prefers-reduced-motion:reduce){
  .px2 *,.px2 *::before,.px2 *::after{ animation:none !important; transition:none !important; }
  .px-o1 .warn,.px-o6 .pop{ opacity:1; transform:none; }
  .px-o5 .core{ opacity:1; transform:translate(-50%,-50%) rotate(45deg); }
  .h2run:hover::before{ animation:none; opacity:0; }
  .wb-go:hover .ar, .hw2 .hw-pf .hbtn:hover .ar2{ animation:none; }
  .hw2-vbody.swap{ animation:none; }
}