/* 2026-10-21 devhwang 모바일 메인 슬라이드(카드형) v2 - 이름표 알약이 카드 넘김을 따라 미끄러지게(v1 은 반쯤 넘어갈 때 툭 바뀌었다)
   main/index.html 의 kw-hero 블록 전용. 이름은 전부 kw-hero- 로 시작해 다른 화면과 섞이지 않는다
   카드 6장 = PC 메인 슬라이드(default_gl/main/index.html)와 같은 순서. 그림은 images/main/hero */

.kw-hero { position: relative; background: #fff; padding: 16px 0 0; }

/* 가로로 넘기는 줄. 다음 카드가 오른쪽에 살짝 보이게 카드 폭을 줄인다 */
.kw-hero-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 0 16px 18px; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.kw-hero-track::-webkit-scrollbar { display: none; }

.kw-hero-card { position: relative; flex: 0 0 calc(100% - 24px); height: 388px; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; text-decoration: none; color: #111;
  background: #fff; border: 1px solid #eceff3; box-shadow: 0 6px 18px rgba(15, 35, 64, .12); -webkit-tap-highlight-color: transparent; }
a.kw-hero-card:active { transform: scale(.99); }
.kw-hero-card + .kw-hero-card { margin-left: 12px; }

.kw-hero-num { position: absolute; top: 16px; right: 16px; z-index: 6; font-size: 11px; font-weight: 800; line-height: 1;
  padding: 5px 8px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: #fff; letter-spacing: .02em; }

.kw-hero-txt { position: relative; z-index: 5; display: block; padding: 24px 22px 0; color: #111; }
/* 공통 a:link 색이 카드 전체(링크)에 먹으므로 글자 묶음과 버튼에 색을 직접 준다 */
.kw-hero a, .kw-hero a:link, .kw-hero a:visited, .kw-hero a:hover, .kw-hero a:active { text-decoration: none; }
.kw-hero--ls .kw-hero-txt, .kw-hero--tool .kw-hero-txt { color: #fff; }
.kw-hero--cat .kw-hero-txt { color: #0f2340; }
.kw-hero-eye { display: block; margin-bottom: 8px; padding-right: 52px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kw-hero-h { display: block; font-size: 23px; font-size: clamp(21px, 6.4vw, 25px); line-height: 1.28; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.kw-hero-sub { display: block; margin-top: 10px; max-width: 270px; font-size: 13.5px; line-height: 1.5; opacity: .75; word-break: keep-all; }
.kw-hero-badge { display: inline-block; margin-top: 10px; padding: 4px 10px; border: 2px solid #e8323c; border-radius: 6px;
  color: #e8323c; font-size: 13px; font-weight: 800; }
.kw-hero-ctas { display: flex; flex-wrap: wrap; margin-top: 16px; margin-bottom: -8px; }
.kw-hero-ctas .kw-hero-cta { margin: 0 8px 8px 0; }
.kw-hero-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.kw-hero-cta:after { content: "\2192"; margin-left: 6px; }

/* 제품 그림: 글자 묶음 바로 아래에서 크게 시작하고 넘치는 부분은 카드 밖으로 잘린다.
   그림 바탕을 카드 바탕과 같은 색으로 만들어 두어 경계가 보이지 않는다. 위치는 카드마다 아래에서 정한다 */
.kw-hero-artbox { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; }
.kw-hero-art { position: absolute; display: block; width: auto; max-width: none; }

/* 1 MOXA: 햇빛 받은 패널·풀밭이 밝게 보이게 그림은 그대로 두고, 글자는 하늘 쪽에 남색으로. 하늘만 흰 안개처럼 살짝 밝힌다 */
.kw-hero--moxa { border: 0; color: #0b2a4a; background: #9cc4ea url(../images/main/hero/hero_moxa_em_20261021.jpg) 50% 100% / cover; }
.kw-hero--moxa:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .74) 30%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, 0) 62%); }
.kw-hero--moxa .kw-hero-txt { color: #0b2a4a; }
.kw-hero--moxa .kw-hero-eye { color: #0a74b8; }
.kw-hero--moxa .kw-hero-sub { opacity: .82; }
.kw-hero--moxa .kw-hero-cta { background: #0b3a66; color: #fff; }

/* 2 3M: 단자부터 구불구불한 몸통까지 케이블 전체가 보이게. 위쪽 단자는 버튼 오른쪽, 왼쪽 USB 는 버튼 아래에서 시작한다 */
.kw-hero--3m .kw-hero-eye { color: #e10600; }
.kw-hero--3m .kw-hero-cta { background: #e10600; color: #fff; }
.kw-hero--3m .kw-hero-art { top: -60px; right: -10px; height: 234px; }

/* 3 카탈로그: 책 두 권만 오려 올린 그림. 바탕은 그림과 같은 색, 배지는 윗줄 옆으로 올려 책 자리를 넓힌다 */
.kw-hero--cat { background: #eef1f5; border-color: #e4e8ee; color: #0f2340; }
.kw-hero--cat .kw-hero-eye { color: #0d509c; }
.kw-hero--cat .kw-hero-cta { background: #0d509c; color: #fff; }
.kw-hero--cat .kw-hero-num { background: rgba(15, 35, 64, .3); }
.kw-hero-eye .kw-hero-badge { margin: 0 0 0 8px; padding: 2px 7px; border-width: 1.5px; font-size: 11.5px; letter-spacing: 0; vertical-align: 1px; }
.kw-hero--cat .kw-hero-art { top: 0; right: -20px; height: 240px; }

/* 4 피닉스: 제품만 오려 다시 배치한 그림(키 큰 전원장치는 오른쪽, 버튼 옆으로 올라온다). 바탕은 그림과 같은 색 */
.kw-hero--phx { background: #f2f7f7; border-color: #e3eded; }
.kw-hero--phx .kw-hero-eye { color: #0098a1; }
.kw-hero--phx .kw-hero-cta { background: #0098a1; color: #fff; }
.kw-hero--3m .kw-hero-num, .kw-hero--phx .kw-hero-num { background: rgba(0, 0, 0, .22); }
.kw-hero--phx .kw-hero-art { top: -50px; right: -6px; height: 236px; }

/* 5 LS전선: 원본 배너처럼 금색 틀 선·로고·금색 제목을 가운데로 */
.kw-hero--ls { justify-content: center; border: 0; color: #fff; text-align: center;
  background: radial-gradient(95% 62% at 50% 46%, #2c2311 0%, #0b0906 60%, #050505 100%); }
.kw-hero--ls:before, .kw-hero--ls:after { content: ""; position: absolute; left: 26px; right: 26px; height: 2px; z-index: 2;
  background: linear-gradient(90deg, rgba(201, 154, 50, 0) 0%, #e8c87a 18%, #c99a32 50%, #e8c87a 82%, rgba(201, 154, 50, 0) 100%); }
.kw-hero--ls:before { top: 48px; }
.kw-hero--ls:after { bottom: 32px; }
.kw-hero--ls .kw-hero-txt { padding: 18px 22px 0; z-index: auto; }  /* 로고의 검은 바탕을 카드 바탕과 섞으려면 글자 묶음이 따로 층을 만들면 안 된다 */
.kw-hero-logo { display: block; height: 27px; width: auto; margin: 0 auto 14px; mix-blend-mode: screen; }
.kw-hero--ls .kw-hero-h { font-size: 27px; font-size: clamp(25px, 7.6vw, 31px); color: #ddb35c; letter-spacing: -.01em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kw-hero--ls .kw-hero-h { background: linear-gradient(180deg, #f6e2a4 0%, #ddb35c 48%, #b9882f 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.kw-hero--ls .kw-hero-sub { max-width: none; margin: 12px auto 0; color: #ddd6c6; opacity: .92; font-size: 13px; }
.kw-hero-partner { display: block; height: 29px; width: auto; margin: 16px auto 0; mix-blend-mode: screen; }
.kw-hero--ls .kw-hero-ctas { justify-content: center; margin-top: 18px; }
.kw-hero--ls .kw-hero-ctas .kw-hero-cta { margin: 0 4px 8px; }
.kw-hero--ls .kw-hero-cta { background: #d4a94a; color: #111; }

/* 6 전동공구: 보쉬·디월트 공구를 바짝 잘라 크게, 사선으로 나란히. 버튼 두 개는 PC 슬라이드와 같다 */
.kw-hero--tool { border: 0; color: #fff; background: #121417; }
.kw-hero--tool .kw-hero-eye { color: #febd17; }
.kw-hero .kw-hero-cta--bosch, .kw-hero .kw-hero-cta--bosch:link, .kw-hero .kw-hero-cta--bosch:visited { background: #ea0016; color: #fff; }
.kw-hero .kw-hero-cta--dewalt, .kw-hero .kw-hero-cta--dewalt:link, .kw-hero .kw-hero-cta--dewalt:visited { background: #febd17; color: #111; }
.kw-hero-split { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1; }
.kw-hero-split:before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 70px; z-index: 2;
  background: linear-gradient(180deg, #121417, rgba(18, 20, 23, 0)); }
.kw-hero-split span { position: absolute; top: 0; bottom: 0; width: 62%; background-size: cover; }
.kw-hero-split .is-bosch { left: 0; background-image: url(../images/main/hero/hero_bosch_20261021.jpg); background-position: 34% 70%;
  -webkit-clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }
.kw-hero-split .is-dewalt { right: 0; background-image: url(../images/main/hero/hero_dewalt_20261021.jpg); background-position: 45% 70%;
  -webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); }
.kw-hero--tool .kw-hero-num { z-index: 6; }

/* 아래 이름표: 지금 보는 장 표시, 누르면 그 장으로.
   파란 알약(kw-hero-pill, 스크립트가 넣는다)이 카드 넘김 비율을 따라 미끄러진다. 층 순서 = 회색 바탕 < 알약 < 글자 */
.kw-hero-tabs { position: relative; z-index: 0; display: flex; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; }
.kw-hero-tabs::-webkit-scrollbar { display: none; }
.kw-hero-tab { position: relative; flex: 0 0 auto; margin: 0; padding: 7px 9px; border: 0; border-radius: 999px; background: transparent; color: #8b94a3;
  font-size: 12.5px; font-weight: 700; line-height: 1.2; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.kw-hero-tab:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; border-radius: 999px; background: #f1f3f6; }
.kw-hero-tab + .kw-hero-tab { margin-left: 4px; }
.kw-hero-tab.is-on { color: #fff; }
.kw-hero-tabs:not(.has-pill) .kw-hero-tab.is-on:before { background: #0d509c; }
.kw-hero-pill { position: absolute; top: 0; left: 0; z-index: -1; width: 0; height: 0; border-radius: 999px; background: #0d509c;
  pointer-events: none; will-change: transform, width; }

/* 좁은 폰(359px 이하)은 버튼이 케이블 단자·전원장치 쪽까지 닿으므로 그림을 조금 내리고 줄인다 */
@media (max-width: 359px) {
  .kw-hero--3m .kw-hero-art { top: -40px; height: 214px; }
  .kw-hero--phx .kw-hero-art { top: -36px; height: 214px; }
}

@media (prefers-reduced-motion: reduce) {
  .kw-hero-track { scroll-behavior: auto; }
  a.kw-hero-card:active { transform: none; }
}