/* =============================================
   SHUGAD SPORTS — Global Reset & Variables
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:   #0a0a0a;
  --dark:    #111111;
  --dark2:   #222222;
  --white:   #ffffff;
  --light:   #f7f7f7;
  --light2:  #e8e8e8;
  --gray1:   #999999;
  --gray2:   #555555;
  --gray3:   #333333;
  --accent:  #1a1a1a;
  --accent2: #444444;
  --font-en: 'Montserrat', sans-serif;
  --font-kr: 'Noto Sans KR', sans-serif;
  --ease:    cubic-bezier(.4,0,.2,1);

  /* ── 레이아웃 시스템 ── */
  --wrap:      1400px;   /* 콘텐츠 최대 너비 */
  --wrap-wide: 1400px;   /* 넓은 콘텐츠 (스펙 등) */
  --gutter:    clamp(1.5rem, 4vw, 4rem); /* 좌우 여백 */
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-kr);
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
  cursor: none;
}

img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Custom cursor removed */

/* ---- Cursor ---- */
.cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .08s var(--ease), opacity .3s, width .25s, height .25s;
  mix-blend-mode: difference;
}

/* =============================================
   TYPOGRAPHY SYSTEM
============================================= */
h1, h2, h3, h4, h5 {
  font-family: var(--font-en);
  line-height: 1.15;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.4rem, 3.5vw, 5.2rem); font-weight: 800; }
h2 { font-size: clamp(1.314rem, 1.971vw, 2.628rem); font-weight: 700; }
h3 { font-size: clamp(.85rem, 1.1vw, 1.2rem); font-weight: 700; }

.tag-line {
  font-family: var(--font-en);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gray1);
  margin-bottom: 1rem;
  display: block;
}
.tag-line.light { color: rgba(255,255,255,.45); }

.body-text {
  font-size: clamp(.9rem, .95vw, 1.05rem);
  line-height: 1.9;
  color: var(--gray2);
  margin-top: 1.2rem;
}
.body-text.light { color: rgba(255,255,255,.72); }

/* =============================================
   REVEAL ANIMATIONS
============================================= */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-up    { transform: translateY(48px); }
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }

.revealed {
  opacity: 1 !important;
  transform: none !important;
}

.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }
.delay-4 { transition-delay: .48s; }

/* =============================================
   HEADER
============================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  height: 76px;
  display: flex; align-items: center;
  background: rgba(10,10,10,.45);
  backdrop-filter: blur(18px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .4s var(--ease), box-shadow .4s, border-color .4s;
}
/* 스크롤됐을 때 */
.header.scrolled {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(24px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.15);
}
/* 흰/밝은 섹션 위에 있을 때 — 톤 다운 */
.header.on-light,
.header.on-light.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(160%) brightness(1.0);
  -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(1.0);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header.on-light .hd-nav a,
.header.on-light.scrolled .hd-nav a {
  color: rgba(0,0,0,.75);
}
.header.on-light .hd-nav a:hover,
.header.on-light.scrolled .hd-nav a:hover {
  color: var(--black);
}
.header.on-light .hamburger span,
.header.on-light.scrolled .hamburger span {
  background: #111;
}
.header.on-light .hd-logo .logo-img,
.header.on-light.scrolled .hd-logo .logo-img {
  filter: invert(0);
}
.hd-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center;
  position: relative;
  box-sizing: border-box;
  padding: 0 var(--gutter);
}
.hd-logo .logo-img {
  height: 36px; width: auto;
  filter: invert(1);
  transition: opacity .3s;
}
.hd-logo:hover .logo-img { opacity: .75; }
.hd-nav--desktop {
  display: flex; align-items: center; gap: 2rem;
  position: absolute; left: 50%; transform: translateX(-50%);
}

/* 모바일 메뉴 (헤더 외부, 기본 숨김) */
.hd-nav:not(.hd-nav--desktop) {
  display: none;
  position: fixed;
  top: 76px; left: 0; right: 0;
  background: rgba(8,8,8,.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction: column;
  padding: 1.8rem 20px;
  gap: 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  z-index: 1001;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  max-height: calc(100vh - 76px);
  overflow-y: auto;
}
.hd-nav:not(.hd-nav--desktop).open {
  display: flex;
}
.hd-nav a {
  font-family: var(--font-en);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255,255,255,.7);
  transition: color .25s;
}
.hd-nav a:hover { color: var(--white); }
.hd-nav:not(.hd-nav--desktop) a {
  font-size: .88rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}
.hd-nav:not(.hd-nav--desktop) a:last-child {
  border-bottom: none;
}
.hd-cta {
  font-family: var(--font-en);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--black);
  background: var(--white);
  padding: .5rem 1.3rem;
  border-radius: 50px;
  transition: background .25s, color .25s, transform .2s;
}
.hd-cta:hover { background: var(--light2); transform: translateY(-2px); }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none;  padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: #fff;
  transition: .3s;
}

/* =============================================
   SECTION 01 · HERO (DARK)
============================================= */
.s-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  overflow: hidden;
}
.s-hero__bg {
  position: absolute; inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.s-hero__bgvideo {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 70%;
  object-fit: cover;
  object-position: 40% center;
  transform: scale(0.9);
  flex-shrink: 0;
}
.s-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.3) 35%,
    transparent 55%
  );
  pointer-events: none;
}
.s-hero__body {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  padding-top: 100px;
  box-sizing: border-box;
}
.s-hero__label {
  font-family: var(--font-en);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255,255,255,.45);
  margin-bottom: 1.4rem;
}
.s-hero__title {
  color: var(--white);
  margin-bottom: 1.4rem;
  max-width: 680px;
  font-size: clamp(1.8rem, 3.2vw, 3.8rem) !important;
}
.s-hero__desc {
  font-size: clamp(.9rem, 1vw, 1.05rem);
  line-height: 1.9;
  color: rgba(255,255,255,.55);
  margin-bottom: 3rem;
  max-width: 560px;
}
.s-hero__kps {
  display: flex; gap: 2.5rem;
  margin-bottom: 4rem;
}
.s-hero__kp {
  display: flex; flex-direction: column; gap: .3rem;
}
.s-hero__kp strong {
  font-family: var(--font-en);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--white);
  /* 숫자가 바뀌어도 아래 라벨이 흔들리지 않도록 고정 높이 */
  display: block;
  min-width: 6ch;
  height: 1.6em;
  line-height: 1.6em;
  overflow: hidden;
}
.s-hero__kp span {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .06em;
  /* 라벨 위치 완전 고정 */
  display: block;
  position: relative;
  z-index: 1;
}
.s-hero__scroll {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-en); font-size: .68rem;
  font-weight: 700; letter-spacing: .18em;
  color: rgba(255,255,255,.4);
  transition: color .25s;
  animation: bounceY 2s ease-in-out infinite;
}
.s-hero__scroll:hover { color: var(--accent); }
@keyframes bounceY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* =============================================
   SECTION 02 · INTRO (LIGHT)
============================================= */
.s-intro {
  background: var(--dark);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 75vh;
}
/* s-intro__inner 래퍼 제거, 섹션 자체가 grid */
.s-intro__img {
  background: var(--dark);
  display: flex; align-items: stretch;
  overflow: hidden;
  padding: 0;
  position: relative;
  /* 이미지는 완전 100% 유지 — min-width 제한 없음 */
}

/* 슬라이더 래퍼 */
.s-intro__slider {
  width: 100%; height: 100%;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.s-intro__slides {
  width: 100%; height: 100%;
  position: relative;
}
.s-intro__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transform: scale(1.04);
}
.s-intro__slide.active {
  opacity: 1;
  transform: scale(1);
}
.s-intro__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 하단 dot 인디케이터 */
.s-intro__dots {
  position: absolute; bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .6rem;
  z-index: 10;
}
.s-intro__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none; cursor: pointer;
  transition: background .3s, transform .3s;
  padding: 0;
}
.s-intro__dot.active {
  background: #fff;
  transform: scale(1.3);
}
.s-intro__text {
  /* 화면 오른쪽 절반에서: 좌측 padding이 골든버드 */
  padding: 8% 6% 8% 6%;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--dark);
  position: relative;
  /* max-width로 텍스트 영역이 너무 넓어지는 것 방지 */
  max-width: calc(var(--wrap) / 2);
  min-width: 0;
  transform: translateX(45px);
}
/* 왼쪽과 자연스럽게 연결되는 그라데이션 경계 */
.s-intro__text::before {
  content: '';
  position: absolute; top: 0; left: -60px;
  width: 60px; height: 100%;
  background: linear-gradient(to right, transparent, var(--dark));
  pointer-events: none;
  z-index: 1;
}
.s-intro__text h2 { color: var(--white); margin-bottom: .5rem; }
.s-intro__list {
  margin-top: 1.8rem; display: flex; flex-direction: column; gap: .9rem;
}
.s-intro__list li {
  display: flex; align-items: center; gap: .9rem;
  font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.75);
}
.s-intro__list li i {
  color: var(--white); font-size: .8rem;
  background: var(--dark);
  padding: .4rem; border-radius: 50%;
  flex-shrink: 0;
}

/* ── intro-list 모션 ── */
.intro-list-item {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity .5s cubic-bezier(.4,0,.2,1),
    transform .5s cubic-bezier(.4,0,.2,1),
    background .3s,
    border-color .3s;
  border-left: 2px solid transparent;
  padding-left: .8rem;
  border-radius: 6px;
}
.intro-list-item.list-visible {
  opacity: 1;
  transform: translateX(0);
}
.intro-list-item.list-visible i {
  animation: checkPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes checkPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.25) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* 좌측 라인 + 배경 글로우 */
.intro-list-item.list-highlight {
  border-left-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  color: #ffffff;
}
.intro-list-item.list-highlight i {
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 10px rgba(255,255,255,.25);
}

/* =============================================
   SECTION 03 · FEATURES (WHITE, TOP CENTER + BOTTOM LEFT-RIGHT)
============================================= */
.s-features {
  background: #ffffff;
  padding: 8rem 0 0;
  border-top: none;
  overflow: visible !important;
}
.s-features__wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 상단 중앙 정렬 헤드 */
.s-features__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 5rem;
  padding: 0;
}
.s-features__head h2 { color: var(--dark); }
.s-features__head .body-text { color: var(--gray2); }

/* 하단 좌우 분할 */
.s-features__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1500px;
  margin: 0 auto;
  align-items: stretch;
  overflow: visible !important;
}

.s-features__neo {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 0 4% 6rem var(--gutter);
  justify-content: center;
  min-width: 0;
}

/* 오른쪽 이미지 — 컨테이너 완전 초기화 */
.s-features__img {
  position: relative;
  overflow: visible !important;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 100px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0;
  min-width: 0;
}
/* 이미지 자체 완전 초기화 */
.s-features__img img {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  /* scale(1.26) — 기존 1.05에서 20% 확대 */
  transform: scale(1.26);
  transform-origin: center center;
  /* 물체 모양대로 자연스러운 그림자 */
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
  /* 손목 오른쪽 끝 부분만 자연스럽게 페이드아웃 */
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 82%,
    rgba(0, 0, 0, 0.75) 89%,
    rgba(0, 0, 0, 0.3) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 82%,
    rgba(0, 0, 0, 0.75) 89%,
    rgba(0, 0, 0, 0.3) 95%,
    transparent 100%
  );
  mix-blend-mode: multiply;
}



.neo-card {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem 2.2rem;
  width: 400px;
  height: 160px;
  max-width: 100%;
  border-radius: 20px;
  background: #f3f4f4;
  box-shadow:
    8px 8px 20px rgba(180, 185, 200, 0.45),
    -8px -8px 20px rgba(255, 255, 255, 1);
  position: relative;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
  overflow: hidden;
}
.neo-card:hover {
  box-shadow:
    12px 12px 28px rgba(180, 185, 200, 0.55),
    -12px -12px 28px rgba(255, 255, 255, 1);
  transform: translateY(-4px);
}
.neo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.7);
  pointer-events: none;
}

.neo-card__icon {
  width: 96px; height: 96px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  color: #555;
  flex-shrink: 0;
  transition: none;
}
.neo-card:hover .neo-card__icon {
  box-shadow: none;
}

.neo-card__icon-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
  opacity: 1;
  filter: grayscale(1) brightness(0.45);
}

.neo-card__body { flex: 1; min-width: 0; }
.neo-card__body h3 {
  color: var(--dark);
  font-size: clamp(1rem, 1.3vw, 1.5rem);
  font-weight: 700;
  margin-bottom: .4rem;
  white-space: nowrap;
}
.neo-card__body p {
  font-size: clamp(.85rem, 1vw, 1.15rem);
  color: var(--gray1);
  line-height: 1.7;
  white-space: nowrap;
}

.neo-card__num {
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(0,0,0,.05);
  letter-spacing: -.04em;
  position: absolute;
  right: 1.4rem;
  bottom: .6rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* =============================================
   SECTION 04 · DARK STATEMENT
============================================= */
.s-dark-statement {
  position: relative;
  padding: clamp(6rem, 10vw, 11rem) 0;
  text-align: center;
  overflow: hidden;
}

/* 배경 비디오 */
.s-dark-statement__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.s-dark-statement__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.s-dark-statement__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.60);
}

.s-dark-statement__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.s-dark-statement__content {
  max-width: 760px;
  margin: 0 auto;
}
.s-dark-statement h2 { color: var(--white); }
.s-dark-statement__stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 3.5rem 0;
  flex-wrap: wrap;
}
.stat {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 0 3.5rem;
}
.stat strong {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800; color: var(--white);
}
.stat span { font-size: .78rem; color: rgba(255,255,255,.65); letter-spacing: .06em; }
.stat-divider {
  width: 1px; height: 60px;
  background: rgba(255,255,255,.25);
}

/* =============================================
   SECTION 05 / 07 · DETAIL (LIGHT, LEFT-RIGHT)
============================================= */
.s-detail {
  background: var(--white);
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  border-top: 1px solid var(--light2);
}
.s-detail--reverse { direction: rtl; }
.s-detail--reverse > * { direction: ltr; }

.s-detail__text {
  padding: 7% 6%;
  display: flex; flex-direction: column; justify-content: center;
}
.s-detail__text h2 { color: var(--dark); }
.s-detail__items {
  margin-top: 2rem; display: flex; flex-direction: column; gap: 1.4rem;
}
.s-detail__item {
  display: flex; align-items: flex-start; gap: 1.2rem;
}
.s-detail__num {
  font-family: var(--font-en);
  font-size: .65rem; font-weight: 800;
  letter-spacing: .1em;
  color: var(--dark);
  background: var(--light2);
  padding: .35rem .7rem;
  border-radius: 4px;
  flex-shrink: 0; margin-top: .15rem;
}
.s-detail__item strong { display: block; font-size: .9rem; margin-bottom: .25rem; color: var(--dark); }
.s-detail__item p { font-size: .82rem; color: var(--gray1); }
.s-detail__tags {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem;
}
.s-detail__tags span {
  font-size: .75rem; font-weight: 600;
  padding: .4rem 1rem; border-radius: 50px;
  background: var(--light); color: var(--dark);
  border: 1px solid var(--light2);
}

.s-detail__img {
  background: var(--light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.s-detail__img-box {
  width: 80%; max-width: 360px;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}

/* LED visual */
.s-detail__led-visual {
  position: relative;
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.led-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(200,200,200,.35);
  animation: spinRing 6s linear infinite;
}
.led-core {
  width: 70px; height: 70px;
  background: var(--dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--white);
  box-shadow: 0 0 30px rgba(255,255,255,.15);
  z-index: 1;
}
.led-rays {
  position: absolute; inset: 0;
}
.led-rays span {
  position: absolute; width: 2px; height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
  left: 50%; top: 2px;
  transform-origin: bottom center;
  border-radius: 2px;
}
.led-rays span:nth-child(1) { transform: translateX(-50%) rotate(0deg)   translateY(-70px); }
.led-rays span:nth-child(2) { transform: translateX(-50%) rotate(72deg)  translateY(-70px); }
.led-rays span:nth-child(3) { transform: translateX(-50%) rotate(144deg) translateY(-70px); }
.led-rays span:nth-child(4) { transform: translateX(-50%) rotate(216deg) translateY(-70px); }
.led-rays span:nth-child(5) { transform: translateX(-50%) rotate(288deg) translateY(-70px); }

/* Heat visual */
.s-detail__heat-visual {
  position: relative;
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.heat-bars {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 8px;
}
.heat-bars span {
  width: 8px; border-radius: 4px;
  background: linear-gradient(to top, var(--dark), rgba(80,80,80,.2));
  animation: heatBar 1.5s ease-in-out infinite alternate;
}
.heat-bars span:nth-child(1) { height: 40px; animation-delay: 0s; }
.heat-bars span:nth-child(2) { height: 70px; animation-delay: .15s; }
.heat-bars span:nth-child(3) { height: 90px; animation-delay: .3s; }
.heat-bars span:nth-child(4) { height: 70px; animation-delay: .45s; }
.heat-bars span:nth-child(5) { height: 40px; animation-delay: .6s; }
@keyframes heatBar {
  from { opacity: .4; transform: scaleY(.7); }
  to   { opacity: 1;  transform: scaleY(1); }
}
.heat-icon {
  font-size: 2.5rem; color: var(--dark);
  position: relative; z-index: 1;
}

/* =============================================
   SECTION 06 · PRODUCT SHOWCASE (DARK)
============================================= */
.s-product {
  background: #eaeaea;
  padding: 8rem 0;
  text-align: center;
}
.s-product__wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.s-product__head { margin-bottom: 1rem; }
.s-product__head h2 { color: var(--black); }

.s-product__img {
  max-width: 600px;
  margin: 0 auto 4rem;
  display: flex;
  justify-content: center;
}
.s-product__img img {
  width: 100%;
  max-width: 520px;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}

/* ---- 갤러리 ---- */
.s-product__gallery {
  max-width: 580px;
  margin: 0 auto 4rem;
}

/* 메인 이미지 */
.spg-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  margin-bottom: 1.4rem;
  position: relative;
}
.spg-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .35s ease, transform .35s ease;
}
.spg-main img.spg-main--small {
  transform: scale(0.82);
}
.spg-main img.spg-main--smaller {
  transform: scale(0.81);
}
.spg-main img.spg-main--smallest {
  transform: scale(0.97);
}
.spg-main img.switching {
  opacity: 0;
  transform: scale(0.97);
}

/* PC 전용 이미지 */
.spg-main__pc { display: block; }

/* 슬라이드 트랙 (기본 숨김 — 모바일에서 표시) */
.spg-slide-track {
  display: none;
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.spg-slide-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.spg-slide-item.active {
  opacity: 1;
  pointer-events: auto;
}
.spg-slide-item img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* dot 인디케이터 (기본 숨김) */
.spg-dots {
  display: none;
  position: absolute;
  bottom: -1.8rem; left: 50%;
  transform: translateX(-50%);
  gap: .5rem;
  z-index: 10;
}
.spg-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.spg-dot.active {
  background: #333;
  transform: scale(1.35);
}

/* 모바일에서 슬라이드 모드 활성화 */
@media (max-width: 768px) {
  .spg-main__pc       { display: none; }
  .spg-slide-track    { display: block; }
  .spg-dots           { display: flex; }
}

/* 썸네일 리스트 */
.spg-thumbs {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.spg-thumb {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  box-shadow: none;
  flex-shrink: 0;
}
.spg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.spg-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.spg-thumb.active {
  border-color: #333;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}

.s-product__stage {
  max-width: 600px; margin: 0 auto 3rem;
}
.s-product__viewer {
  aspect-ratio: 4/3;
  background: var(--dark2);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,.06);
}
.s-product__slides { position: relative; width: 100%; height: 100%; }
.sp-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .5s var(--ease);
}
.sp-slide.active { opacity: 1; }
.sp-slide__placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: .8rem;
  color: rgba(255,255,255,.25);
}
.sp-slide__placeholder i  { font-size: 4rem; }
.sp-slide__placeholder span{ font-family: var(--font-en); font-size: 1rem; font-weight: 700; letter-spacing: .1em; }
.sp-slide__placeholder small{ font-family: var(--font-en); font-size: .7rem; letter-spacing: .15em; opacity: .6; }
.sp-slide__placeholder.dark { background: rgba(255,255,255,.03); }
.sp-slide__placeholder.uv  { color: rgba(200,200,200,.5); }

.s-product__thumbs {
  display: flex; justify-content: center; gap: 1.2rem;
}
.sp-thumb {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  background: none; border: none; 
  transition: opacity .25s;
}
.sp-thumb:not(.active) { opacity: .4; }
.sp-thumb__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color .25s, transform .25s;
}
.sp-thumb.active .sp-thumb__dot {
  border-color: var(--white);
  transform: scale(1.2);
}
.sp-thumb span {
  font-family: var(--font-en); font-size: .6rem;
  font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.5);
}

.s-product__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.22),
    0 4px 16px rgba(0,0,0,0.12);
}

.sp-spec {
  position: relative;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: #0d0d0d;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s ease;
  overflow: hidden;
}
.sp-spec::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.sp-spec:hover {
  background: #141414;
}
.sp-spec:hover::before {
  opacity: 1;
}

.sp-spec__label {
  font-family: var(--font-en);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sp-spec__label::after {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

.sp-spec__value {
  font-family: var(--font-en);
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  letter-spacing: -.01em;
  line-height: 1.4;
}

.sp-spec__icon {
  position: absolute;
  bottom: 1rem;
  right: 1.2rem;
  font-size: .9rem;
  color: rgba(255,255,255,.06);
  transition: color .3s ease;
}
.sp-spec:hover .sp-spec__icon {
  color: rgba(255,255,255,.12);
}

/* =============================================
   SECTION 08 · BATTERY (DARK)
============================================= */
.s-battery {
  background: #000000;
  border-top: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
  position: relative;
}
/* 중간 경계선 자연스러운 그라데이션 오버레이 */
.s-battery::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 40%;
  width: 30%;
  background: linear-gradient(
    to right,
    #000000 0%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,.5) 50%,
    rgba(0,0,0,.15) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}
/* 왼쪽 텍스트 영역 보호 그라데이션 */
.s-battery::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: #000000;
  pointer-events: none;
  z-index: 2;
}
/* 하단 경계선 제거용 그라데이션 */
.s-battery__inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,.7)  40%,
    rgba(0,0,0,.3)  70%,
    rgba(0,0,0,0)  100%
  );
}
.s-battery__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: 60vh;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 4;
}
.s-battery__left {
  padding: clamp(4rem, 7%, 7rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.s-battery__left h2 { color: #ffffff; margin-bottom: .5rem; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.s-battery__stats {
  display: flex; gap: 2.5rem; margin: 2.5rem 0;
}
.bat-stat { display: flex; flex-direction: column; gap: .3rem; }
.bat-stat strong {
  font-family: var(--font-en);
  font-size: 1.6rem; font-weight: 800; color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.bat-stat span { font-size: .75rem; color: rgba(255,255,255,.75); letter-spacing: .04em; }
.s-battery__notice {
  display: flex; align-items: flex-start; gap: .9rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  width: fit-content;
  max-width: 100%;
  backdrop-filter: blur(8px);
}
.s-battery__notice i { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-top: .1rem; }
.s-battery__notice p { font-size: .85rem; color: rgba(255,255,255,.85); line-height: 1.7; }
.s-battery__notice strong { color: #ffffff; }

.s-battery__right {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem var(--gutter);
  overflow: hidden;
  position: relative;
  margin: 0;
  top: 0;
}

/* 영상 컨테이너 초기화 - 박스 완전 제거 */
.battery-media,
.battery-media-container,
.video-wrapper,
.s-battery__right {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 컨테이너 내부의 모든 요소도 투명하게 */
.battery-media *,
.battery-media::before,
.battery-media::after,
.s-battery__right::before,
.s-battery__right::after {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* 배터리 섹션 전용 텍스트 강조 */
.bat-visual       { display: none; } /* PC에서 기존 배터리 비주얼 숨김 */
.bat-video-pc {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: scale(1.15) translateX(70px);
  transform-origin: center right;
  margin-left: 30px;
  /* 영상 왼쪽을 점진적으로 투명하게 */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 100%
  );
}
.bat-img-pc { display: none; }
.s-battery .tag-line.light {
  color: rgba(255,255,255,.75);
  letter-spacing: .24em;
}
.s-battery .body-text.light {
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.bat-visual {
  display: flex; flex-direction: row; align-items: center; gap: 1.6rem;
}
.bat-body {
  width: 300px; height: 130px;
  border: 3px solid rgba(200,200,200,.3);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* 배터리 오른쪽 단자 (가로형) */
.bat-body::before {
  content: '';
  position: absolute; right: -18px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 50px;
  background: rgba(200,200,200,.3);
  border-radius: 0 6px 6px 0;
}
/* 게이지: 왼쪽 → 오른쪽 */
.bat-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(to right, #ffffff, rgba(180,180,180,.4));
  width: 0%;
  transition: width 2.8s cubic-bezier(.4,0,.2,1);
  border-radius: 8px 0 0 8px;
}
.bat-label {
  position: relative; z-index: 1;
  font-family: var(--font-en); font-size: 1.1rem; font-weight: 800;
  text-align: center; line-height: 1.3;
  color: var(--white);
}
.bat-label small { font-size: .6rem; opacity: .7; }
/* 번개 세로 배치 */
.bat-bolts {
  display: none;
}
.bat-bolts i {
  color: rgba(255,255,255,.12);
  font-size: 1.5rem;
  transition: color 0.8s ease, text-shadow 0.8s ease, transform 0.8s ease, opacity 0.8s ease;
  opacity: 0.2;
}
.bat-bolts i.bolt-on {
  color: #ffffff;
  opacity: 1;
  text-shadow:
    0 0 8px rgba(255,255,255,.8),
    0 0 20px rgba(255,255,255,.5),
    0 0 45px rgba(255,255,255,.3);
  transform: scale(1.25);
}

/* =============================================
   SECTION 09 · A/S BANNER (LIGHT)
============================================= */
.s-as {
  background: url('https://www.genspark.ai/api/files/s/pr3AFUm7') center center / cover no-repeat;
  padding: 6rem 0;
  border-top: none;
}
.s-as__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 3rem;
  flex-wrap: wrap;
}
.s-as__logo {
  height: 40px; width: auto;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.s-as__text { flex: 1; min-width: 240px; }
.s-as__text h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: #ffffff; margin-bottom: .6rem;
}
.s-as__text p { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.7; }
.s-as__notice { font-size: .75rem !important; color: rgba(255,255,255,.55) !important; margin-top: .5rem; }

.btn-register {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 2rem;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-en); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
  border-radius: 50px;
  flex-shrink: 0;
  transition: background .25s, color .25s, transform .2s, box-shadow .25s;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.btn-register:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.btn-register i { font-size: .85rem; }

/* =============================================
   SECTION 10 · CERT (DARK)
============================================= */
.s-cert {
  background: var(--dark);
  padding: clamp(6rem, 8vw, 10rem) 0;
  border-top: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
}
.s-cert__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.s-cert__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-cert__left h2               { color: var(--white); margin-bottom: .5rem; }
.s-cert__left .tag-line.light  { color: rgba(255,255,255,.45); }
.s-cert__left .body-text.light { color: rgba(255,255,255,.6); margin-top: .8rem; }

/* ---- 오른쪽 슬라이더 ---- */
.s-cert__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cert-slider {
  position: relative;
  width: 100%;
  max-width: 380px;
}

/* ---- 슬라이더: 고정 높이 컨테이너 ---- */
.cert-slider {
  position: relative;
  width: 100%;
  max-width: 380px;
}
.cert-slider__track {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;  /* 인증서 비율 고정 → 높이 절대 안 변함 */
}

/* ---- 카드: 전부 absolute, 높이 변화 없음 ---- */
.cert-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.cert-card.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- 플립 이너 ---- */
.cert-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.4,0,.2,1);
  border-radius: 18px;
}
.cert-card.flipped .cert-card__inner {
  transform: rotateY(180deg);
}

/* ---- 앞/뒷면 공통 ---- */
.cert-card__front,
.cert-card__back {
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cert-card__front {
  position: absolute;
  inset: 0;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3);
}
.cert-card__front img {
  width: 100%; height: 100%;
  display: block; border-radius: 18px;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.cert-card__front img.cert-img--shift-left {
  object-position: calc(50% - 10px) center;
}

/* ---- 뒷면 ---- */
.cert-card__back {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid rgba(255,255,255,.08);
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.cert-card__back-content {
  text-align: center;
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
}
.cert-card__back-content i    { font-size: 2.4rem; color: rgba(255,255,255,.25); }
.cert-card__back-content h4   { font-family: var(--font-kr); font-size: clamp(1rem,1.4vw,1.3rem); font-weight: 700; color: var(--white); line-height: 1.5; }
.cert-card__back-content p    { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.7; }
.cert-card__num {
  font-family: var(--font-en);
  font-size: 3.5rem; font-weight: 900;
  color: rgba(255,255,255,.05);
  line-height: 1; margin-top: .5rem;
  letter-spacing: -.04em;
}

/* ---- 인디케이터 ---- */
.cert-dots {
  display: flex; justify-content: center;
  gap: .6rem; margin-top: 1.6rem;
}
.cert-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: none; cursor: pointer; padding: 0;
  transition: background .3s, transform .3s;
}
.cert-dot.active { background: #fff; transform: scale(1.35); }

/* =============================================
   SECTION 11 · CONTACT (LIGHT)
============================================= */
.s-contact {
  background: var(--white);
  padding: clamp(6rem, 8vw, 10rem) 0;
  border-top: 1px solid var(--light2);
}
.s-contact__wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.s-contact__head {
  text-align: center;
  max-width: 600px; margin: 0 auto 4rem;
}
.s-contact__head h2 { color: var(--dark); }
.s-contact__body {
  display: flex;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}
.s-contact__form {
  width: 100%;
}
.s-contact__info {
  display: flex; flex-direction: column; gap: 1.6rem;
}
.ci-item {
  display: flex; align-items: flex-start; gap: 1rem;
}
.ci-item i {
  width: 40px; height: 40px;
  background: var(--dark); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--white);
  flex-shrink: 0;
}
.ci-item strong { display: block; font-size: .85rem; margin-bottom: .2rem; }
.ci-item span   { font-size: .82rem; color: var(--gray1); }
.s-contact__socials {
  display: flex; gap: .8rem; margin-top: .5rem;
}
.s-contact__socials a {
  width: 38px; height: 38px;
  background: var(--light);
  border: 1px solid var(--light2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--dark);
  transition: background .25s, color .25s, transform .2s;
}
.s-contact__socials a:hover {
  background: var(--dark); color: var(--white);
  transform: translateY(-2px);
}

.s-contact__form {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.fg { display: flex; flex-direction: column; gap: .5rem; }
.fg label { font-size: .78rem; font-weight: 700; color: var(--dark); letter-spacing: .04em; }
.fg input,
.fg select,
.fg textarea {
  padding: .85rem 1rem;
  background: var(--light); border: 1px solid var(--light2);
  border-radius: 8px; font-size: .88rem;
  font-family: var(--font-kr); color: var(--dark);
  transition: border-color .25s, box-shadow .25s;
  outline: none;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(150,150,150,.15);
}
.fg textarea { resize: vertical; }
.btn-submit {
  padding: 1rem;
  background: var(--dark); color: var(--white);
  font-family: var(--font-en); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; border: none; border-radius: 8px;
   transition: background .25s, transform .2s;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn-submit:hover { background: var(--dark2); color: var(--white); transform: translateY(-2px); }

/* =============================================
   FOOTER (DARK)
============================================= */
.s-footer {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 5rem 0 2rem;
}
.s-footer__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; justify-content: flex-start;
  padding: 0 var(--gutter) 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.s-footer__logo {
  height: 36px; filter: invert(1); margin-bottom: 1.2rem;
}
.s-footer__brand {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}
.s-footer__brand p {
  font-size: .82rem; color: #555; line-height: 1.9;
  max-width: 480px;
}
.s-footer__biz {
  margin-top: .8rem;
  font-size: .75rem !important; color: #3a3a3a !important;
  line-height: 1.7 !important;
}
.s-footer__bottom {
  max-width: var(--wrap); margin: 2rem auto 0;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1.4rem; flex-direction: row;
}
.s-footer__bottom span { font-size: .75rem; color: #333; }
.s-footer__socials { display: flex; gap: .7rem; }
.s-footer__socials a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: #555;
  transition: background .25s, color .25s;
}
.s-footer__socials a:hover { background: var(--white); color: var(--dark); }

/* 100svh 폴백 (구형 브라우저) */
@supports not (min-height: 100svh) {
  .s-hero { min-height: 100vh; }
}

/* =============================================
   RESPONSIVE — 와이드스크린 최적화 (≥1920px)
============================================= */
@media (min-width: 1920px) {
  :root {
    --wrap:      1400px;
    --wrap-wide: 1400px;
    --gutter:    clamp(2rem, 3vw, 4rem);
  }
  .s-hero__bgvideo  { width: 65%; }
  .s-product__gallery { max-width: 640px; }
  .sp-spec          { padding: 2.2rem 2rem; }
  .sp-spec__value   { font-size: 1rem; }
}

/* =============================================
   RESPONSIVE — 태블릿 (≤1024px)
============================================= */
@media (max-width: 1024px) {

  /* --- 공통 섹션 패딩 축소 --- */
  .s-battery__inner { min-height: auto; grid-template-columns: 1fr 2fr; }
  .bat-video-pc     { max-width: 100%; transform: scale(1.1); }

  /* --- Features 네오 카드: fit-content 유지 --- */

  /* --- Product 스펙 4열 유지, 패딩 축소 --- */
  .s-product__specs { grid-template-columns: repeat(4,1fr); }
  .sp-spec          { padding: 1.6rem 1.2rem; }
  .s-product__gallery { max-width: 480px; }
}

/* =============================================
   RESPONSIVE — 태블릿 가로 (≤900px)
============================================= */
@media (max-width: 900px) {

  /* === Hero === */
  .s-hero__bgvideo  { width: 100%; transform: scale(1); }
  .s-hero__veil     {
    background: linear-gradient(to bottom,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,.65) 100%
    );
  }
  .s-hero__body     { text-align: center; padding-top: 100px; padding-bottom: 60px; }
  .s-hero__title    { margin-left: auto; margin-right: auto; }
  .s-hero__desc     { margin-left: auto; margin-right: auto; }
  .s-hero__kps      { justify-content: center; flex-wrap: wrap; gap: 2rem; }
  .s-hero__scroll   { margin: 0 auto; display: flex; }

  /* === Intro === */
  .s-intro                { grid-template-columns: 1fr; }
  .s-intro__slider        { min-height: 340px; }
  .s-intro__text          { padding: 4rem 6%; max-width: 100%; }
  .s-intro__text::before  { display: none; }
  .s-intro__text h2       { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }
  .body-text br, h2 br, h1 br, .s-hero__desc br { display: none; }

  /* === Features === */
  .s-features             { padding: 5rem 0 0; }
  .s-features__head       { max-width: 100%; margin-bottom: 3rem; }
  .s-features__inner      { grid-template-columns: 1fr; }
  .s-features__neo        { padding: 0 6% 3rem; }
  .neo-card__body h3      { font-size: clamp(1rem, 3vw, 1.3rem); }
  .neo-card__body p       { font-size: clamp(.85rem, 2.2vw, 1rem); }
  .s-features__img        { min-height: 380px; }

  /* === Dark Statement === */
  .s-dark-statement__video { object-position: 70% center; }
  .s-dark-statement__stats{ flex-wrap: wrap; gap: 2.5rem 0; }
  .stat                   { padding: 0 2.5rem; }

  /* === Product === */
  .s-product__gallery     { max-width: 420px; }
  .spg-thumb              { width: 72px; height: 72px; }
  .s-product__specs       { grid-template-columns: repeat(2,1fr); border-radius: 16px; }
  .sp-spec                { padding: 1.6rem 1.4rem; }

  /* === Battery === */
  .s-battery__inner       { grid-template-columns: 1fr; }
  .s-battery__left        { padding: 5rem var(--gutter); }
  .s-battery__right       { padding: 3rem var(--gutter) 5rem; }
  .bat-video-pc           { max-width: 100%; transform: scale(1); }
  .bat-body               { width: 220px; height: 100px; }

  /* === A/S === */
  .s-as__inner            { flex-direction: column; align-items: flex-start; gap: 2rem; }

  /* === Cert === */
  .s-cert__inner          { grid-template-columns: 1fr; gap: 3rem; }
  .cert-slider            { max-width: 320px; }

  /* === Contact === */
  .s-contact__body        { grid-template-columns: 1fr; gap: 3rem; }

  /* === Footer === */
  .s-footer__bottom       { flex-direction: column; gap: 1rem; text-align: center; }
  .s-footer__links        { gap: 2.5rem; }
}

/* =============================================
   RESPONSIVE — 모바일 (≤768px)
============================================= */
@media (max-width: 768px) {

  /* ===================================================
     [ 공통 ] 좌우 여백 20px 통일 + 타이포 축소
  =================================================== */
  :root {
    --gutter: 20px;
  }

  h1          { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
  h2          { font-size: clamp(1.32rem, 5vw, 1.8rem); }
  h3          { font-size: clamp(.88rem, 3.5vw, 1.1rem); }
  .tag-line   { font-size: .65rem; letter-spacing: .16em; }
  .body-text  { font-size: .88rem; line-height: 1.8; }

  /* Hero h2는 제외 — .s-hero__title 로 별도 제어 */
  .s-hero h2  { font-size: clamp(1.1rem, 4.2vw, 1.5rem); }

  /* === 커서 숨김 (터치 기기) === */
  .cursor-dot { display: none; }
  body        { cursor: auto; }

  /* ===================================================
     [ Header ]
  =================================================== */
  .hd-nav--desktop, .hd-cta { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .hd-inner  { padding: 0 20px; }

  /* ===================================================
     [ Section 01 · Hero ]
  =================================================== */
  .s-hero             { min-height: 100svh; }
  .s-hero__body       { padding: 90px 20px 50px; }
  .s-hero__label      { font-size: .63rem; }
  .s-hero__title      { font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important; }
  .s-hero__desc       { font-size: .86rem; }
  .s-hero__kps        { flex-direction: row; justify-content: center; gap: 1.6rem; flex-wrap: wrap; }
  .s-hero__kp strong  { font-size: 1.1rem; }
  .s-hero__scroll     { display: none; }

  /* ===================================================
     [ Section 02 · Intro ] — 이미지 위, 텍스트 아래 (column)
  =================================================== */
  .s-intro              { display: flex; flex-direction: column; grid-template-columns: unset; min-height: unset; }
  .s-intro__img         { order: 0; min-height: 320px; height: 320px; flex-shrink: 0; }
  .s-intro__slider      { min-height: 320px; height: 100%; }
  .s-intro__text        { order: 1; flex-direction: column; padding: 3rem 20px; max-width: 100%; transform: none; }
  .s-intro__text::before{ display: none; }
  .s-intro__text h2     { font-size: clamp(1.32rem, 5vw, 1.8rem); }
  .s-intro__list li     { font-size: .85rem; }
  .body-text br, h2 br, h1 br, .s-hero__desc br { display: none; }

  /* ===================================================
     [ Section 03 · Features ] — 카드 위, 이미지 아래 (column)
  =================================================== */
  .s-features           { padding: 4rem 0 0; }
  .s-features__wrap     { padding: 0 20px; }
  .s-features__head     { max-width: 100%; margin-bottom: 2.5rem; padding: 0; }
  .s-features__inner    { display: flex; flex-direction: column; overflow: hidden; }
  .s-features__neo      { order: 0; gap: 1.2rem; padding: 0 20px 2.5rem; }
  .s-features__img      { order: 1; min-height: 300px; overflow: hidden; justify-content: center; padding-right: 0; }
  .s-features__img img  { -webkit-mask-image: none; mask-image: none; transform: none; transform-origin: center; width: 80%; max-width: 320px; mix-blend-mode: multiply; }
  .neo-card             { width: 100%; height: auto; padding: 1.3rem 1.5rem; gap: 1.1rem; border-radius: 16px; flex-direction: row; align-items: center; justify-content: center; text-align: left; }
  .neo-card__body       { flex: unset; }
  .neo-card__body h3    { font-size: clamp(.95rem, 3.8vw, 1.15rem); white-space: normal; }
  .neo-card__body p     { font-size: clamp(.82rem, 3vw, .95rem); white-space: normal; }
  .neo-card__icon       { width: 60px; height: 60px; font-size: 2.2rem; flex-shrink: 0; }
  .neo-card__icon-img   { width: 50px; height: 50px; }
  .neo-card__num        { display: none; }

  /* ===================================================
     [ Section 04 · Dark Statement ]
  =================================================== */
  .s-dark-statement       { padding: 5rem 20px; }
  .s-dark-statement__inner{ padding: 0; }
  .s-dark-statement__stats{ flex-direction: column; align-items: center; gap: 2rem; }
  .stat                   { padding: 0; }
  .stat-divider           { width: 50px; height: 1px; }
  .stat strong            { font-size: clamp(1.8rem, 8vw, 2.6rem); }

  /* ===================================================
     [ Section 05/07 · Detail ] — 텍스트·이미지 세로 쌓기 (column)
  =================================================== */
  .s-detail               { display: flex; flex-direction: column; }
  .s-detail--reverse      { direction: ltr; }
  .s-detail__text         { order: 1; padding: 3rem 20px; }
  .s-detail__img          { order: 0; min-height: 260px; }
  .s-detail__img-box      { width: 70%; }
  .s-detail__items        { gap: 1.2rem; }
  .s-detail__item strong  { font-size: .88rem; }
  .s-detail__item p       { font-size: .8rem; }

  /* ===================================================
     [ Section 06 · Product Showcase ]
  =================================================== */
  .s-product              { padding: 5rem 0; }
  .s-product__wrap        { padding: 0 20px; }
  .s-product__head        { margin-bottom: 2rem; }
  .s-product__gallery     { max-width: 100%; }
  .spg-thumbs             { display: none; }
  .spg-thumb              { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; }
  .s-product__specs       { grid-template-columns: repeat(2,1fr); border-radius: 14px; }
  .sp-spec                { padding: 1.3rem 1.1rem; }
  .sp-spec__value         { font-size: .84rem; }
  .sp-spec__label         { font-size: .55rem; }

  /* ===================================================
     [ Section 08 · Battery ] — 텍스트 위, 배터리 비주얼 아래 (column)
  =================================================== */
  .s-battery__inner       { display: flex; flex-direction: column; }
  .s-battery__left        { order: 0; padding: 4rem 20px 2rem; }
  .s-battery__right       { display: flex; order: 1; padding: 1.5rem 20px 4rem; justify-content: center; align-items: center; }
  .s-battery__left h2     { font-size: clamp(1.32rem, 5vw, 1.8rem); }
  .s-battery__stats       { gap: 1.8rem; flex-wrap: wrap; margin: 2rem 0; }
  .bat-stat strong        { font-size: 1.3rem; }
  .bat-stat span          { font-size: .72rem; }
  .s-battery__notice      { width: 100%; max-width: 100%; }
  .bat-img-pc             { display: none; }
  .bat-video-pc           { display: none; }
  .bat-visual             { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; width: 100%; }
  .bat-bolts              { display: flex; flex-direction: row; gap: 1.4rem; }
  .bat-bolts i            { font-size: 1.3rem; }
  .s-battery__right       { display: flex; order: 1; padding: 1.5rem 20px 4rem; justify-content: center; align-items: center; }
  .bat-body               { width: 200px; height: 92px; }

  /* ===================================================
     [ Section 09 · A/S Banner ]
  =================================================== */
  .s-as               { padding: 4rem 0; }
  .s-as__inner        { flex-direction: column; align-items: center; text-align: center; padding: 0 20px; gap: 1.8rem; }
  .s-as__text         { text-align: center; }
  .s-as__text h2      { font-size: clamp(1.32rem, 5vw, 1.8rem); }
  .s-as__text p       { font-size: .86rem; }
  .btn-register       { width: 100%; justify-content: center; background: linear-gradient(135deg, #555555 0%, #1a1a1a 50%, #000000 100%); border: 1px solid rgba(255,255,255,.12); }

  /* ===================================================
     [ Section 10 · Cert ]
  =================================================== */
  .s-cert__inner      { grid-template-columns: 1fr; gap: 2.5rem; }
  .s-cert__left       { padding: 0 20px; }
  .cert-slider        { max-width: 280px; margin: 0 auto; }

  /* ===================================================
     [ Section 11 · Contact ]
  =================================================== */
  .s-contact__wrap    { padding: 0 20px; }
  .s-contact__head    { margin-bottom: 2.5rem; }
  .s-contact__body    { gap: 2.5rem; }
  .ci-item            { align-items: center; }
  .fg input,
  .fg select,
  .fg textarea        { font-size: .88rem; padding: .85rem 1rem; }

  /* ===================================================
     [ Footer ]
  =================================================== */
  .s-footer__inner    { padding: 0 20px 3rem; }
  .s-footer__bottom   { padding: 0 20px; flex-direction: column; gap: 1rem; text-align: center; }
  .s-footer__links    { flex-direction: row; flex-wrap: wrap; gap: 2rem; }
  .s-footer__col      { min-width: 120px; }
  .s-footer__brand p  { max-width: 100%; font-size: .8rem; }
}

/* =============================================
   RESPONSIVE — 모바일 소형 (≤480px)
============================================= */
@media (max-width: 480px) {

  /* === Header (480px) === */
  .hd-inner           { padding: 0 20px; }
  .hd-logo .logo-img  { height: 28px; }

  /* === Hero (480px) === */
  .s-hero__body       { padding: 86px 20px 40px; }
  .s-hero__desc       { font-size: .82rem; }
  .s-hero__kps        { gap: 1.2rem; }
  .s-hero__kp strong  { font-size: 1rem; }
  .s-hero__kp span    { font-size: .68rem; }

  /* === Intro === */
  .s-intro__img         { min-height: 260px; height: 260px; }
  .s-intro__slider      { min-height: 260px; }
  .s-intro__text        { padding: 2.8rem 20px; }

  /* === Features === */
  .s-features__head   { padding: 0 20px; }
  .s-features__neo    { padding: 0 20px 2rem; }
  .neo-card           { padding: 1.1rem 1.2rem; gap: .9rem; border-radius: 14px; }
  .neo-card__body h3  { font-size: clamp(.92rem, 4.2vw, 1.05rem); }
  .neo-card__body p   { font-size: clamp(.8rem, 3.2vw, .92rem); }
  .neo-card__icon     { width: 50px; height: 50px; font-size: 1.9rem; }
  .neo-card__icon-img { width: 40px; height: 40px; }

  /* === Dark Statement === */
  .s-dark-statement   { padding: 4.5rem 20px; }
  .stat strong        { font-size: 2.2rem; }

  /* === Detail === */
  .s-detail__text     { padding: 2.5rem 20px; }

  /* === Product === */
  .s-product__wrap    { padding: 0 20px; }
  .spg-thumb          { width: 54px; height: 54px; border-radius: 8px; }
  .spg-thumbs         { gap: .5rem; }
  .s-product__specs   { grid-template-columns: repeat(2,1fr); border-radius: 12px; }
  .sp-spec            { padding: 1.1rem 1rem; }
  .sp-spec__value     { font-size: .8rem; }
  .sp-spec__label     { font-size: .52rem; letter-spacing: .12em; }
  .sp-spec__icon      { display: none; }

  /* === Battery === */
  .s-battery__left    { padding: 3.5rem 20px 1.5rem; }
  .s-battery__right   { padding: 1rem 20px 3.5rem; }
  .s-battery__stats   { flex-direction: row; flex-wrap: wrap; gap: 1.2rem; }
  .bat-body           { width: 175px; height: 84px; }
  .bat-label          { font-size: .88rem; }
  .s-battery__notice  { padding: .95rem 1rem; }

  /* === A/S (480px) === */
  .s-as               { padding: 3.5rem 0; }
  .s-as__inner        { padding: 0 20px; }

  /* === Cert === */
  .s-cert__left       { padding: 0 20px; }

  /* === Contact === */
  .s-contact__wrap    { padding: 0 20px; }
  .s-contact__socials { justify-content: flex-start; }

  /* === Footer === */
  .s-footer__inner    { padding: 0 20px 2.5rem; }
  .s-footer__bottom   { padding: 0 20px; }
  .s-footer__links    { flex-direction: column; gap: 1.5rem; }
  .s-footer__bottom   { flex-direction: column; gap: .8rem; text-align: center; }
}

/* =============================================
   PC / 모바일 텍스트 분기
============================================= */
.pc-only { display: inline; }
.mo-only { display: none;   }

@media (max-width: 768px) {
  .pc-only { display: none;  }
  .mo-only { display: block; }
}

/* =============================================
   RESPONSIVE — 초소형 (≤360px)
============================================= */
@media (max-width: 360px) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.1rem; }

  .s-hero__body     { padding: 86px 4% 36px; }
  .s-hero__kps      { flex-direction: column; gap: 1rem; }

  .s-product__specs { grid-template-columns: repeat(2,1fr); }
  .sp-spec          { padding: .9rem .85rem; }
  .sp-spec__value   { font-size: .76rem; }

  .bat-body         { width: 160px; height: 76px; }
  .bat-label        { font-size: .8rem; }
}