/* ══════════════════════════════════════════════════════════════════
   위닝 골격 정밀 이식 — 공용 서식 · 2026-08-10

   1차 시안(hm.css)이 "축약된 느낌"이라는 지적을 받고 다시 짰다.
   위닝피피티 홈을 섹션 단위로 실측해 **레이아웃·서식·밀도까지** 가져온다.

   ★실측한 위닝 서식
     섹션 패딩 128px 0 · 헤더 **가운데 정렬** · pill 알약형(bg #F0F9FF, radius 9999px)
     h2 52px/w600/ls -1.3px/lh 1.25 · sub 20px/lh 1.625/#64748B
     카드 radius 16px · 위닝 홈 전체 높이 ≈ 17,900px (1차 시안은 6,974px 이었다)

   ★★가져온 것과 지킨 것을 나눴다
     가져옴 = 가운데 정렬 · 알약 pill · 섹션 밀도 · 컴포넌트 레이아웃
     지킴  = 박퇴 색(코발트 단일 악센트) · 전역 폰트 규칙(.sec-title clamp 34~51 w700 /
             .sec-pill 14px / .sec-sub 17.5px) · 타이틀 끝 온점 금지 · Paperlogy 700 까지
     ⛔위닝의 52px/w600 을 그대로 쓰지 않는다 — 톤앤매너는 박퇴 규칙이 우선이다
   ══════════════════════════════════════════════════════════════════ */

.hw{ --hw-pad:32px; --hw-max:1520px; --hw-narrow:1180px; }
.hw-in{ max-width:var(--hw-max); margin:0 auto; padding:0 var(--hw-pad); }
.hw-in.nw{ max-width:var(--hw-narrow); }
.hw section{ position:relative; }

/* ── 섹션 공통 — 위닝식 가운데 정렬 헤더 ─────────────── */
.hw .sec{ padding:128px 0; }
.hw .sec-hd{ text-align:center; max-width:900px; margin:0 auto 62px; }
.hw .sec-hd.left{ text-align:left; margin-left:0; }
.hw .sec-pill{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; letter-spacing:.14em; color:var(--blue-d);
  background:#F0F7FF; border-radius:999px; padding:8px 18px 8px 15px;
}
.hw .sec-pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--blue); }
.hw .sec-title{ margin-top:22px; font-size:clamp(34px,3.9vw,51px); font-weight:700; letter-spacing:-.03em; line-height:1.3; color:var(--ink); }
.hw .sec-title .em{ color:var(--blue); }
.hw .sec-sub{ margin-top:20px; font-size:17.5px; line-height:1.85; color:var(--g700); }
.hw .sec-hd .sec-sub{ margin-left:auto; margin-right:auto; max-width:720px; }

/* 다크 섹션 */
.hw .sec-dark{ background:var(--navy); }
.hw .sec-dark .sec-title{ color:#fff; }
.hw .sec-dark .sec-sub{ color:var(--navy-tx); }
.hw .sec-dark .sec-pill{ color:var(--blue-l); background:rgba(77,162,255,.13); }
.hw .sec-dark .sec-pill::before{ background:var(--blue-l); }
.hw .sec-ink{ background:#060A14; }          /* 위닝의 수치 섹션이 쓰는 초다크 */
.hw .sec-ink .sec-title{ color:#fff; }
.hw .sec-ink .sec-sub{ color:#8FA6C8; }
.hw .sec-ink .sec-pill{ color:var(--blue-l); background:rgba(77,162,255,.11); }
.hw .sec-ink .sec-pill::before{ background:var(--blue-l); }

/* 리빌 */
.hw .rv{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .9s var(--ease); }
.hw .rv.in{ opacity:1; transform:none; }
.hw .rv.d1{ transition-delay:.08s } .hw .rv.d2{ transition-delay:.16s } .hw .rv.d3{ transition-delay:.24s }
@media(prefers-reduced-motion:reduce){ .hw .rv{ opacity:1; transform:none; transition:none; } }

/* 버튼 */
.hw .hbtn{ display:inline-flex; align-items:center; gap:10px; font-size:16.5px; font-weight:600; padding:16px 32px; border-radius:999px;
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .45s var(--ease); }
.hw .hbtn.fill{ background:var(--blue); color:#fff; }
.hw .hbtn.fill:hover{ background:var(--blue-d); transform:translateY(-2px); }
.hw .hbtn.line{ border:1px solid var(--line); color:var(--ink); background:#fff; }
.hw .hbtn.line:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.hw .sec-dark .hbtn.line, .hw .sec-ink .hbtn.line{ background:transparent; border-color:rgba(255,255,255,.24); color:#fff; }
.hw .sec-dark .hbtn.line:hover, .hw .sec-ink .hbtn.line:hover{ border-color:#fff; }
.hw .ctr{ text-align:center; margin-top:52px; }

/* 확인 필요 표시 — 지어낸 숫자를 홈에 박지 않기 위한 자리 */
.hw-ask{ background:linear-gradient(180deg,transparent 62%,#FFE9A8 62%); border-bottom:1px dashed #C79A16; padding:0 2px; }
.hw .sec-dark .hw-ask, .hw .sec-ink .hw-ask{ background:linear-gradient(180deg,transparent 62%,rgba(255,214,102,.3) 62%); border-bottom-color:#E0B94A; }

/* ══ ① TRUSTED BY — 분야·키워드 마퀴 2줄 ═══════════════
   위닝은 고객사 로고 88장을 흘린다. 박퇴는 로고를 못 쓰므로
   **분야·업무 키워드 칩**을 같은 자리에 같은 밀도로 흘린다. */
.hw-trust{ padding:96px 0; background:#fff; border-bottom:1px solid var(--line); overflow:hidden; }
.hw-trust .rows{ margin-top:52px; display:flex; flex-direction:column; gap:14px; 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); }
.hw-trust .tk{ display:flex; gap:12px; width:max-content; animation:hwroll 54s linear infinite; }
.hw-trust .tk.rev{ animation:hwrollRev 64s linear infinite; }
.hw-trust:hover .tk{ animation-play-state:paused; }
.hw-chip{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  font-size:16px; font-weight:500; color:var(--g700); background:var(--bg2);
  border:1px solid var(--line); border-radius:999px; padding:13px 22px; white-space:nowrap; }
.hw-chip b{ font-weight:600; color:var(--ink); }
.hw-chip .dt{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; }
@keyframes hwroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes hwrollRev{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
@media(prefers-reduced-motion:reduce){ .hw-trust .tk{ animation:none; } }

/* ══ ② 다크 포트폴리오 그리드 ═════════════════════════
   위닝 섹션2(1325px·다크 #0A1836)와 같은 자리. 카드에 분류 뱃지 + 호버 오버레이. */
.hw-pf{ background:#0A1836; padding:128px 0; overflow:hidden; }
.hw-pf .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hw-pfc{ position:relative; display:block; border-radius:16px; overflow:hidden; background:#0E2044;
  border:1px solid rgba(255,255,255,.09); transition:transform .55s var(--ease), border-color .3s; }
.hw-pfc:hover{ transform:translateY(-6px); border-color:rgba(77,162,255,.42); }
.hw-pfc .im{ display:block; aspect-ratio:3166/2159; overflow:hidden; }
.hw-pfc .im img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.hw-pfc:hover .im img{ transform:scale(1.05); }
.hw-pfc .bdg{ position:absolute; top:14px; left:14px; z-index:2; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:#fff; background:rgba(10,24,54,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:6px 13px; }
.hw-pfc .ov{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(10,24,54,.1),rgba(10,24,54,.82));
  opacity:0; transition:opacity .45s var(--ease); }
.hw-pfc:hover .ov{ opacity:1; }
.hw-pfc .ov .pl{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:300; color:#fff;
  transform:scale(.86); transition:transform .5s var(--ease); }
.hw-pfc:hover .ov .pl{ transform:scale(1); }
.hw-pfc .ft{ padding:16px 18px 18px; }
.hw-pfc .ft .tt{ font-size:15.5px; font-weight:500; line-height:1.55; color:#fff; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hw-pfc .ft .fd{ margin-top:9px; font-size:13px; color:#8FA6C8; }

/* ★3차 — 카테고리 필터 칩 (다크 그리드 위) */
.hw-fil{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:-18px 0 46px; }
.hw-fil button{ font-family:inherit; cursor:pointer; font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  color:#8FA6C8; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:999px; padding:11px 20px; transition:background .3s var(--ease), color .3s, border-color .3s; }
.hw-fil button b{ font-weight:600; margin-left:4px; color:rgba(143,166,200,.66); }
.hw-fil button:hover{ border-color:rgba(77,162,255,.45); color:#fff; }
.hw-fil button.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.hw-fil button.on b{ color:rgba(255,255,255,.72); }
/* 필터로 다시 깐 카드 등장 */
@keyframes hwfd{ from{ opacity:0; transform:translateY(16px); } }
.hw-pfc.fd{ animation:hwfd .55s var(--ease) both; }
@media(prefers-reduced-motion:reduce){ .hw-pfc.fd{ animation:none; } }

/* ══ ③ Benefit 대형 블록 ═══════════════════════════════
   위닝 섹션3(5437px)의 뼈대. 한 블록 = 라벨 + 2줄 헤드 + 설명 + 증거 + CTA.
   좌우가 번갈아 뒤집힌다(.alt). */
.hw-bn{ padding:110px 0; border-bottom:1px solid var(--line); }
.hw-bn:last-of-type{ border-bottom:0; }
.hw-bn .row{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:72px; align-items:center; }
.hw-bn.alt .row{ direction:rtl; }
.hw-bn.alt .row > *{ direction:ltr; }
.hw-bn .no{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
.hw-bn .no .bar{ width:26px; height:2px; background:var(--blue); border-radius:2px; }
.hw-bn .lb{ margin-top:16px; font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--g500); }
.hw-bn h3{ margin-top:12px; font-size:clamp(28px,3.1vw,40px); font-weight:700; letter-spacing:-.035em; line-height:1.34; color:var(--ink); }
.hw-bn h3 .em{ color:var(--blue); }
.hw-bn p{ margin-top:20px; font-size:17px; line-height:1.88; color:var(--g700); }
.hw-bn .go{ margin-top:28px; display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; color:var(--blue); }
.hw-bn .go .ar{ transition:transform .4s var(--ease); }
.hw-bn .go:hover .ar{ transform:translateX(4px); }
/* 증거 — 작업물 3장 계단 배치 */
.hw-bn .ev{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hw-bn .ev a{ display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg2);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.hw-bn .ev a:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(10,28,62,.3); }
.hw-bn .ev a:first-child{ grid-column:1/-1; }
.hw-bn .ev img{ width:100%; aspect-ratio:3166/2159; object-fit:cover; display:block; }
.hw-bn .ev .cap{ padding:12px 15px 14px; font-size:13.5px; line-height:1.5; color:var(--g700);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ══ ④ 비용 비교표 ═══════════════════════════════════
   위닝 섹션4(1763px)의 "타사 A/B vs 위닝" 표 + 총액 막대. */
.hw-cmp{ padding:128px 0; background:var(--bg2); }
.hw-cmp .cols{ display:grid; grid-template-columns:1fr 1fr 1.06fr; gap:20px; align-items:start; }
.hw-cd{ border-radius:18px; border:1px solid var(--line); background:#fff; padding:30px 28px 28px; }
.hw-cd.us{ border-color:var(--blue); background:linear-gradient(180deg,var(--tint),#fff 40%); box-shadow:0 26px 58px -30px rgba(46,111,242,.42); }
.hw-cd .nm{ font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--g500); }
.hw-cd.us .nm{ color:var(--blue-d); }
.hw-cd .sm{ margin-top:7px; font-size:13.5px; line-height:1.6; color:var(--g500); }
.hw-cd .rows{ margin-top:22px; border-top:1px solid var(--line); }
.hw-cd .r{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.hw-cd .r .k{ font-size:14.5px; line-height:1.55; color:var(--g700); }
.hw-cd .r .v{ font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.hw-cd .r .v.x{ color:#D6246E; }
.hw-cd .r .v.o{ color:var(--blue); }
/* 서비스 "되는 일/안 되는 일" — 항목에 부연을 한 줄 더 단다 */
.hw-cd .r .k b{ font-weight:600; color:var(--ink); }
.hw-cd .r .k .sm{ display:inline-block; margin-top:5px; font-size:13.5px; line-height:1.55; color:var(--g500); }
.hw-cd .note a{ color:var(--blue); font-weight:600; }
.hw-cd .sum{ margin-top:20px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hw-cd .sum .k{ font-size:14.5px; font-weight:600; color:var(--g700); }
.hw-cd .sum .v{ font-size:clamp(22px,2.3vw,29px); font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.hw-cd.us .sum .v{ color:var(--blue); }
/* 총액 막대 */
.hw-cmp .bars{ margin-top:46px; padding:34px 32px 30px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.hw-cmp .bars .ttl{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.hw-cmp .bars .sub{ margin-top:8px; font-size:14.5px; color:var(--g500); }
.hw-bar{ margin-top:22px; }
.hw-bar .hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.hw-bar .hd .n{ font-size:14.5px; font-weight:600; color:var(--g700); }
.hw-bar .hd .a{ font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.hw-bar .tr{ height:16px; border-radius:999px; background:var(--bg2); overflow:hidden; }
.hw-bar .fl{ height:100%; border-radius:999px; width:0; transition:width 1.1s var(--ease); }
.hw-bar.a .fl{ background:linear-gradient(90deg,#F6C6D9,#D6246E); }
.hw-bar.b .fl{ background:linear-gradient(90deg,#E7D6F2,#8B5FBF); }
.hw-bar.us .fl{ background:linear-gradient(90deg,var(--blue-l),var(--blue-d)); }
.hw-cmp .note{ margin-top:20px; font-size:13.5px; line-height:1.8; color:var(--g500); }

/* ══ ⑤ 수치 증명 — 초다크 + 카운트업 ═══════════════════ */
.hw-num{ position:relative; padding:128px 0; background:#060A14; overflow:hidden; }
.hw-num::before{ content:''; position:absolute; width:76%; height:120%; left:12%; top:-52%;
  background:radial-gradient(ellipse at center, rgba(46,111,242,.16), transparent 68%); pointer-events:none; }
.hw-num .hw-in{ position:relative; z-index:1; }
.hw-num .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hw-nc{ padding:38px 30px 34px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.hw-nc .n{ display:flex; align-items:baseline; gap:3px; font-size:clamp(40px,4.6vw,62px); font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--blue-l); }
.hw-nc .n .u{ font-size:.4em; font-weight:600; letter-spacing:-.02em; }
.hw-nc .t{ margin-top:18px; font-size:17.5px; font-weight:600; letter-spacing:-.02em; color:#fff; }
.hw-nc .d{ margin-top:11px; font-size:14.5px; line-height:1.75; color:#8FA6C8; }

/* ══ ⑥ 프로세스 5단계 — 이미지 슬롯 포함 ═══════════════
   ★3차 — .im 은 자리만 잡고(overflow 를 풀어 연결 화살표를 밖으로 내밀고),
     둥근 모서리·자르기는 안쪽 .crop 이 맡는다 */
.hw-proc{ padding:128px 0; background:#fff; }
.hw-proc .steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.hw-ps{ display:flex; flex-direction:column; }
.hw-ps .im{ position:relative; aspect-ratio:4/3; }
.hw-ps .crop{ position:absolute; inset:0; display:block; border-radius:14px; overflow:hidden;
  background:var(--bg2); border:1px solid var(--line); }
.hw-ps .im img{ width:100%; height:100%; object-fit:cover; display:block; }
.hw-ps .nx{ position:absolute; top:50%; right:-9px; transform:translate(50%,-50%); z-index:3;
  width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--blue);
  box-shadow:0 6px 16px -6px rgba(10,28,62,.18); }
@media(max-width:1180px){ .hw-ps .nx{ display:none; } }
.hw-ps .im .slot{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.hw-ps .no{ position:absolute; top:12px; left:12px; z-index:2; width:32px; height:32px; border-radius:9px;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; letter-spacing:.02em; }
.hw-ps .st{ margin-top:18px; font-size:12.5px; font-weight:700; letter-spacing:.13em; color:var(--blue); }
.hw-ps h3{ margin-top:10px; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.hw-ps p{ margin-top:11px; font-size:14.5px; line-height:1.78; color:var(--g700); }

/* ══ ⑦ 가격 — 슬라이더 + 플랜 카드 ════════════════════ */
.hw-price{ padding:128px 0; background:#fff; }
/* 계산 패널 */
.hw-calc{ max-width:860px; margin:0 auto 52px; padding:30px 32px 28px; border-radius:20px; background:var(--bg2); border:1px solid var(--line); }
.hw-calc .tabs{ display:inline-flex; padding:5px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.hw-calc .tabs button{ font-family:inherit; font-size:14.5px; font-weight:600; padding:9px 26px; border-radius:999px;
  border:0; background:none; color:var(--g500); cursor:pointer; transition:background .3s var(--ease), color .3s; }
.hw-calc .tabs button.on{ background:var(--blue); color:#fff; }
.hw-calc .lbl{ margin-top:24px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hw-calc .lbl .k{ font-size:14.5px; color:var(--g500); }
.hw-calc .lbl .v{ font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--blue); }
.hw-calc input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:14px;
  border-radius:999px; background:linear-gradient(90deg,var(--blue) var(--p,20%), var(--line) var(--p,20%)); cursor:pointer; }
.hw-calc input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid var(--blue); box-shadow:0 4px 12px rgba(46,111,242,.35); cursor:grab; }
.hw-calc .ends{ margin-top:9px; display:flex; justify-content:space-between; font-size:12.5px; color:var(--g500); }
.hw-calc .opts{ margin-top:22px; padding-top:20px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:9px; }
.hw-calc .opts span{ font-size:13px; color:var(--g700); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; }
/* 플랜 카드 */
.hw-price .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hw-pl{ position:relative; display:flex; flex-direction:column; padding:34px 30px 30px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.hw-pl.hot{ border-color:var(--blue); box-shadow:0 26px 58px -30px rgba(46,111,242,.45); }
.hw-pl .ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:12.5px; font-weight:700;
  letter-spacing:.04em; color:#fff; background:var(--blue); border-radius:999px; padding:6px 16px; white-space:nowrap; }
.hw-pl .use{ font-size:13.5px; font-weight:600; color:var(--g500); }
.hw-pl .nm{ margin-top:8px; font-size:22px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.hw-pl .ds{ margin-top:12px; font-size:14.5px; line-height:1.75; color:var(--g700); min-height:52px; }
.hw-pl .amt{ margin-top:20px; display:flex; align-items:baseline; gap:4px; }
.hw-pl .amt .v{ font-size:clamp(30px,3.2vw,40px); font-weight:700; letter-spacing:-.035em; color:var(--ink); line-height:1; }
.hw-pl .amt .u{ font-size:16px; font-weight:600; color:var(--g700); }
.hw-pl .amt .per{ font-size:14.5px; color:var(--g500); margin-left:2px; }
.hw-pl ul{ margin-top:22px; padding:22px 0 0; border-top:1px solid var(--line); list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; }
.hw-pl li{ display:flex; gap:10px; font-size:14.5px; line-height:1.65; color:var(--g700); }
.hw-pl li .ck{ flex-shrink:0; width:18px; height:18px; border-radius:6px; background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:2px; }
.hw-pl li.inc{ font-weight:600; color:var(--ink); }
.hw-pl .est{ margin-top:24px; padding:16px; border-radius:12px; background:var(--bg2); text-align:center; }
.hw-pl .est .k{ font-size:12.5px; color:var(--g500); }
.hw-pl .est .v{ margin-top:6px; font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--blue); }
.hw-pl .go{ margin-top:16px; display:block; text-align:center; font-size:15.5px; font-weight:600; padding:14px; border-radius:12px;
  background:var(--bg2); color:var(--ink); transition:background .3s var(--ease), color .3s; }
.hw-pl.hot .go{ background:var(--blue); color:#fff; }
.hw-pl .go:hover{ background:var(--blue-d); color:#fff; }
/* 상위 등급 띠 */
.hw-price .top{ margin-top:20px; padding:26px 30px; border-radius:18px; border:1px dashed var(--tint-b); background:rgba(234,242,255,.5);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hw-price .top .l .nm{ font-size:19px; font-weight:700; letter-spacing:.02em; }
.hw-price .top .l .ds{ margin-top:8px; font-size:14.5px; line-height:1.75; color:var(--g700); max-width:720px; }

/* ══ ⑧ 미디어 ════════════════════════════════════════
   ★3차 — 고스트 인덱스 + 하단 화살표로 텍스트 카드의 밀도를 올렸다 */
.hw-media{ padding:128px 0; background:#fff; }
.hw-media .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hw-md{ position:relative; display:flex; flex-direction:column; padding:30px 28px 26px; border-radius:18px;
  background:#fff; border:1px solid var(--line);
  transition:transform .55s var(--ease), border-color .3s, box-shadow .55s var(--ease); }
.hw-md:hover{ transform:translateY(-5px); border-color:var(--tint-b); box-shadow:0 24px 50px -26px rgba(10,28,62,.26); }
.hw-md .ix{ position:absolute; top:26px; right:28px; font-size:15px; font-weight:700; letter-spacing:.06em;
  color:var(--line); transition:color .3s; }
.hw-md:hover .ix{ color:var(--tint-b); }
.hw-md .cg{ font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--blue); }
.hw-md h3{ margin-top:15px; font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.55; flex:1; }
.hw-md .bt{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hw-md .dt{ font-size:13.5px; color:var(--g500); }
.hw-md .ga{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--blue);
  transition:background .3s var(--ease), border-color .3s, color .3s, transform .45s var(--ease); }
.hw-md:hover .ga{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(3px); }

/* ══ ⑨ 고객 후기 ═════════════════════════════════════ */
.hw-voice{ padding:128px 0; background:var(--bg2); overflow:hidden; }
.hw-voice .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hw-vc{ display:flex; flex-direction:column; padding:32px 30px 28px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.hw-vc .q{ font-size:18.5px; font-weight:600; letter-spacing:-.02em; line-height:1.55; color:var(--ink); }
.hw-vc p{ margin-top:16px; font-size:15px; line-height:1.85; color:var(--g700); flex:1; }
.hw-vc .who{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.hw-vc .av{ width:40px; height:40px; border-radius:50%; background:var(--tint); color:var(--blue-d);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; flex-shrink:0; }
.hw-vc .who .nm{ font-size:15px; font-weight:600; }
.hw-vc .who .rl{ margin-top:3px; font-size:13px; color:var(--g500); }

/* ══ ⑩ FAQ — 카테고리 분류형 ═══════════════════════════
   위닝 섹션10 구조: 좌측 카테고리 4개(개수 표시) + 우측 아코디언. */
.hw-faq{ padding:128px 0; background:#F9F9FB; border-top:1px solid var(--line); }
.hw-faq .wrap{ display:grid; grid-template-columns:300px 1fr; gap:52px; align-items:start; }
.hw-faq .cats{ position:sticky; top:100px; }
.hw-faq .cats .lb{ font-size:12.5px; font-weight:700; letter-spacing:.16em; color:var(--g500); margin-bottom:16px; }
.hw-ct{ width:100%; display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:14px; text-align:left;
  background:#fff; border:1px solid var(--line); cursor:pointer; font-family:inherit; margin-bottom:9px;
  transition:border-color .3s, background .3s, transform .4s var(--ease); }
.hw-ct:hover{ transform:translateX(3px); }
.hw-ct.on{ border-color:var(--blue); background:var(--tint); }
.hw-ct .no{ font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--g500); }
.hw-ct.on .no{ color:var(--blue-d); }
.hw-ct .nm{ flex:1; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.hw-ct .cnt{ font-size:12.5px; font-weight:600; color:var(--g500); background:var(--bg2); border-radius:999px; padding:4px 10px; }
.hw-ct.on .cnt{ color:#fff; background:var(--blue); }
.hw-faq .panel{ border-top:1px solid var(--line); }
.hw-fq{ border-bottom:1px solid var(--line); }
.hw-fq > button{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; text-align:left;
  background:none; border:0; cursor:pointer; font-family:inherit; padding:26px 4px; color:var(--ink); }
.hw-fq .cg{ font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--blue); }
.hw-fq .q{ margin-top:8px; font-size:18.5px; font-weight:600; letter-spacing:-.02em; line-height:1.5; }
.hw-fq .ic{ flex-shrink:0; width:28px; height:28px; border-radius:9px; background:#fff; border:1px solid var(--line); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:17px; margin-top:14px;
  transition:transform .45s var(--ease), background .3s, border-color .3s; }
.hw-fq.open .ic{ transform:rotate(45deg); background:var(--tint); border-color:var(--tint-b); }
.hw-fq .a{ overflow:hidden; max-height:0; transition:max-height .5s var(--ease); }
.hw-fq.open .a{ max-height:520px; }
.hw-fq .a p{ padding:0 4px 30px; font-size:16px; line-height:1.92; color:var(--g700); max-width:860px; }

/* ══ ⑪ 마지막 CTA ═══════════════════════════════════ */
.hw-cta{ background:var(--navy); color:#fff; padding:120px 0; text-align:center; overflow:hidden; position:relative; }
.hw-cta::before{ content:''; position:absolute; width:70%; height:150%; left:15%; top:-40%;
  background:radial-gradient(ellipse at center, rgba(46,111,242,.22), transparent 70%); pointer-events:none; }
.hw-cta .in2{ position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 var(--hw-pad); }
.hw-cta .eb{ font-size:15px; font-weight:600; color:var(--blue-l); }
.hw-cta h2{ margin-top:20px; font-size:clamp(30px,3.8vw,50px); font-weight:700; letter-spacing:-.035em; line-height:1.3; }
.hw-cta p{ margin-top:20px; font-size:17.5px; line-height:1.85; color:var(--navy-tx); }
.hw-cta .bs{ margin-top:38px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── 반응형 ──────────────────────────────────────────── */
@media(max-width:1180px){
  .hw .sec, .hw-pf, .hw-cmp, .hw-num, .hw-proc, .hw-price, .hw-media, .hw-voice, .hw-faq{ padding:96px 0; }
  .hw-pf .grid, .hw-media .grid, .hw-voice .grid, .hw-price .plans{ grid-template-columns:1fr 1fr; }
  .hw-num .grid{ grid-template-columns:1fr 1fr; }
  .hw-proc .steps{ grid-template-columns:repeat(3,1fr); row-gap:38px; }
  .hw-cmp .cols{ grid-template-columns:1fr; }
  .hw-bn .row{ grid-template-columns:1fr; gap:40px; }
  .hw-bn.alt .row{ direction:ltr; }
  .hw-faq .wrap{ grid-template-columns:1fr; gap:32px; }
  .hw-faq .cats{ position:static; }
  .hw-faq .cats .list{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .hw-ct{ margin-bottom:0; }
}
@media(max-width:820px){
  .hw{ --hw-pad:20px; }
  .hw .sec, .hw-pf, .hw-cmp, .hw-num, .hw-proc, .hw-price, .hw-media, .hw-voice, .hw-faq, .hw-trust{ padding:68px 0; }
  .hw .sec-hd{ margin-bottom:40px; }
  .hw-pf .grid, .hw-media .grid, .hw-voice .grid, .hw-price .plans, .hw-num .grid{ grid-template-columns:1fr; }
  .hw-proc .steps{ grid-template-columns:1fr; row-gap:30px; }
  .hw-bn .ev{ grid-template-columns:1fr; }
  .hw-faq .cats .list{ grid-template-columns:1fr; }
  .hw-calc{ padding:24px 20px 22px; }
  .hw-cta{ padding:74px 0; }
}