@charset "UTF-8";
/* ============================================================
   KSSM - glo HYPER pro+ (PUBLISH-K / 260803_KSSS)

   [좌표/치수 체계]  CLAUDE.md 규칙 1 - 스코프 기반 단위
   전역 html font-size 를 건드리지 않고, 최상위 래퍼 .kssm 안에서만
   통하는 커스텀 프로퍼티 --kssm-unit 을 쓴다. 다른 사이트/페이지에
   이 블록을 그대로 삽입해도 전역 rem 기준과 충돌하지 않는다.

     PC : --kssm-unit = min(0.0520833vw, 1px)
          0.0520833vw = 100/1920 -> 디자인 1920px 기준의 1px.
          min(..., 1px) 이므로 뷰포트가 1920 을 넘으면 1px 에서 멈춘다.
          -> 1920 까지는 비율대로 늘고 줄며, 1920 초과 시 크기 고정.
             (.kssm 의 max-width:1920px + margin:auto 로 가운데 정렬)
     MO : --kssm-unit = 0.133333vw  (100/750, 디자인 375 x2 = 750 기준)

   모든 좌표/사이즈/폰트크기는 calc(디자인px값 * var(--kssm-unit)).
   이미지 경로 : ./assets/images/hyperproplus/kssm/
   폰트 : glo_base_v3.css 의 @font-face("Onemobile"/"Mont"/"NotoSans")
   ============================================================ */

/* [배포 환경] CLAUDE.md 규칙 11
   대상 사이트 brand.css 의 body .bat-wrapper { max-width:1440px } 가
   콘텐츠 폭을 1440 으로 묶어버리면, 뷰포트 기준으로 계산되는 --kssm-unit
   과 실제 렌더링 폭이 어긋나 배치가 무너진다. 제약 자체를 해제한다. */
body .bat-wrapper { max-width: unset; }

.kssm, .kssm * { margin: 0; padding: 0; box-sizing: border-box; }
.kssm ul, .kssm li { list-style: none; }
.kssm img { display: block; border: 0; }
.kssm a { text-decoration: none; color: inherit; }
.kssm sup { font-size: 0.645em; line-height: 1; }

.kssm {
  /* 스코프 전용 변수 — 전역 :root 에 두지 않아 다른 페이지와 충돌하지 않는다 */
  --kssm-unit: min(0.0520833vw, 1px);
  --green-1: #44ad6b;
  --green-2: #7bdaa8;
  --black: #2a2c2c;
  --font-kr: 'Onemobile', 'NotoSans', sans-serif;
  --font-en: 'Mont', 'NotoSans', sans-serif;
  --font-note: 'NotoSans', sans-serif;

  position: relative;
  max-width: 1920px;   /* 1920 초과 화면에서 확대 정지 */
  margin: 0 auto;      /* 남는 여백은 좌우 균등 */
  overflow: hidden;
  font-family: var(--font-kr);
  font-weight: 700;
  color: #fff;
}
.kssm .en   { font-family: var(--font-en); font-weight: 600; }
.kssm .en-r { font-family: var(--font-en); font-weight: 400; }
.blind {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* PC/MO 스위칭
   .pc / .mo        : 블록 요소용 (div, img 등). display:block 으로 전환된다.
   .pc-only/.mo-only: 인라인 요소용 (문장 중간의 span 등). display:inline 유지.
   ※ 문단 안의 <span> 에 .pc/.mo 를 쓰면 block 이 되어 혼자 줄을 차지한다.
   ※ 인라인 style 로 display 를 지정하면 미디어쿼리를 이겨버려 숨김이 깨진다. */
.mo { display: none; }
.pc { display: block; }
.pc-only { display: inline; }
.mo-only { display: none; }
img.mo { display: none; }

/* 공통 섹션 — 원본 1920x1008 */
.sec {
  position: relative;
  width: 100%;
  height: calc(1008 * var(--kssm-unit));
  overflow: hidden;
  background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%);
}
.sec__note {
  position: absolute;
  left: calc(60 * var(--kssm-unit));
  bottom: calc(40 * var(--kssm-unit));
  font-family: var(--font-note); font-weight: 400;
  font-size: calc(16 * var(--kssm-unit));
  line-height: 1.25; letter-spacing: -0.03em;
  color: #fff;
}

/* ============================================================
   main (video 재생 후)
   ============================================================ */
.sec-main { background: #6eda7a; }
.sec-main__bg { position: absolute; inset: 0; }
.sec-main__bg img {
  position: absolute;
  left: calc(-307 * var(--kssm-unit));
  top: calc(-665 * var(--kssm-unit));
  width: calc(2777 * var(--kssm-unit));
  height: calc(1914 * var(--kssm-unit));
}
.sec-main__logo {
  position: absolute;
  left: calc(243.5 * var(--kssm-unit));
  top: calc(49.3 * var(--kssm-unit));
  width: calc(195 * var(--kssm-unit));
}
.sec-main__badge {
  position: absolute;
  right: calc(75 * var(--kssm-unit));
  top: calc(78 * var(--kssm-unit));
  width: calc(337 * var(--kssm-unit));
}
.sec-main__copy { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sec-main__lockup {
  position: absolute;
  left: calc(239 * var(--kssm-unit));
  top: calc(324 * var(--kssm-unit));
  width: calc(508.7 * var(--kssm-unit));
}
.sec-main__plus {
  position: absolute;
  left: calc(240.2 * var(--kssm-unit));
  top: calc(413 * var(--kssm-unit));
  width: calc(562.3 * var(--kssm-unit));
}
.sec-main__title {
  position: absolute;
  left: calc(241 * var(--kssm-unit));
  top: calc(531 * var(--kssm-unit));
  font-size: calc(52 * var(--kssm-unit));
  line-height: 1.3; letter-spacing: -0.02em;
}
.sec-main__note {
  position: absolute;
  left: calc(60 * var(--kssm-unit));
  bottom: calc(40 * var(--kssm-unit));
  font-family: var(--font-note); font-weight: 400;
  font-size: calc(16 * var(--kssm-unit));
  line-height: 1.25; letter-spacing: -0.03em;
}

/* ---- main 인트로 영상 + reveal ----
   JS(kssm.js)가 .sec-main 에 js-video 를 붙인 뒤 영상을 재생하고,
   재생이 끝나면(또는 실패 시 안전장치로) is-revealed 를 붙인다.
   JS 미동작 시에는 js-video 가 없으므로 콘텐츠가 처음부터 그대로 보인다(fail-open). */
.sec-main__video { display: none; }
.sec-main.js-video .sec-main__video {
  display: block;
  position: absolute; inset: 0; z-index: 5;
  background: #000;
}
.sec-main__video video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sec-main.is-revealed .sec-main__video {
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.sec-main.js-video .kv-reveal { opacity: 0; }
.sec-main.js-video .kv-reveal--btt { transform: translateY(calc(40 * var(--kssm-unit))); }
.sec-main.js-video .kv-reveal--ttb { transform: translateY(calc(-40 * var(--kssm-unit))); }
.sec-main.js-video.is-revealed .kv-reveal {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--d, 0s);
}

/* ============================================================
   section1 : QuickStart
   ============================================================ */
.sec1 { background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%); }
.sec1__bg { position: absolute; inset: 0; }
.sec1__bg img {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(-1238.3 * var(--kssm-unit));
  width: calc(1920 * var(--kssm-unit));
  height: calc(3675.6 * var(--kssm-unit));
}
.sec1__dim {
  position: absolute; left: 0; top: 0; width: 100%;
  height: calc(1009 * var(--kssm-unit));
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.sec1__cont {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(106.7 * var(--kssm-unit));
  text-align: center;
}
.sec1__icons {
  display: flex; justify-content: center;
  gap: calc(40 * var(--kssm-unit));
  margin-bottom: calc(40 * var(--kssm-unit));
}
.sec1__icons img {
  width: calc(94 * var(--kssm-unit));
  height: calc(94 * var(--kssm-unit));
}
.sec1__title {
  font-size: calc(64 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em;
  margin-bottom: calc(40 * var(--kssm-unit));
  white-space: nowrap;
}
.sec1__sub {
  font-size: calc(32 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em; white-space: nowrap;
}

/* ============================================================
   section2 : 모드 선택
   ============================================================ */
/* sec2-devices.png 는 섹션 영역(682x1008)으로 클리핑되어 export 됨 */
.sec2__device img.pc {
  position: absolute;
  left: calc(619.5 * var(--kssm-unit)); top: 0;
  width: calc(682 * var(--kssm-unit));
  height: calc(1008 * var(--kssm-unit));
}
.sec2__t1, .sec2__t2 {
  position: absolute;
  top: calc(50% - 44.7 * var(--kssm-unit));
  font-size: calc(64 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em;
  white-space: nowrap;
}
.sec2__t1 { left: calc(245.2 * var(--kssm-unit)); }
.sec2__t2 { left: calc(1366.1 * var(--kssm-unit)); }
.sec2__grad { display: none; }

/* ============================================================
   section3 : EasyView Screen
   ============================================================ */
/* sec3-device.png 는 섹션 하단에서 클리핑(842x995)되어 export 됨 */
.sec3__device img.pc {
  position: absolute;
  left: calc(862.7 * var(--kssm-unit));
  top: calc(13.3 * var(--kssm-unit));
  width: calc(841.6 * var(--kssm-unit));
  height: calc(995 * var(--kssm-unit));
}
.sec3__cont {
  position: absolute;
  left: calc(240 * var(--kssm-unit));
  top: 50%; transform: translateY(-50%);
}
/* 아이콘 2개 통합 svg(224x94) */
.sec3__icon {
  width: calc(224 * var(--kssm-unit));
  margin-bottom: calc(40 * var(--kssm-unit));
}
.sec3__title {
  font-size: calc(64 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em;
  margin-bottom: calc(40 * var(--kssm-unit));
}
.sec3__sub {
  font-size: calc(32 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em;
}

/* ============================================================
   section4 : 청소 알림
   ============================================================ */
.sec4__device img {
  position: absolute;
  left: calc(311.4 * var(--kssm-unit));
  top: calc(140 * var(--kssm-unit));
  width: calc(573.7 * var(--kssm-unit));
  height: calc(1013.3 * var(--kssm-unit));
}
.sec4__cont {
  position: absolute;
  left: calc(1114.3 * var(--kssm-unit));
  top: 50%; transform: translateY(-50%);
}
.sec4__icon {
  width: calc(93.3 * var(--kssm-unit));
  margin-bottom: calc(40 * var(--kssm-unit));
}
.sec4__title {
  font-size: calc(64 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.02em;
  margin-bottom: calc(40 * var(--kssm-unit));
}
.sec4__sub {
  font-size: calc(32 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em;
}

/* ============================================================
   section5 : 4가지 컬러
   ============================================================ */
.sec5__bg img.pc {
  position: absolute;
  left: calc(-72.1 * var(--kssm-unit));
  top: calc(-867.9 * var(--kssm-unit));
  width: calc(1997.2 * var(--kssm-unit));
  height: calc(1971.1 * var(--kssm-unit));
  object-fit: cover;
}
.sec5__title {
  position: absolute;
  left: calc(240 * var(--kssm-unit));
  top: calc(50% - 135 * var(--kssm-unit));
  font-size: calc(64 * var(--kssm-unit));
  line-height: 1.4; letter-spacing: -0.01em;
}
.mo-sp { display: none; }

/* ============================================================
   section6 : USP 카드
   ============================================================ */
.sec6 { height: calc(2228 * var(--kssm-unit)); }
.sec6__title {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(142.8 * var(--kssm-unit));
  width: calc(551 * var(--kssm-unit));
}
.sec6__cards {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(346 * var(--kssm-unit));
  width: calc(1440 * var(--kssm-unit));
  display: flex; flex-wrap: wrap;
  gap: calc(24 * var(--kssm-unit));
}
.sec6__card {
  position: relative;
  width: calc(708 * var(--kssm-unit));
  height: calc(500.3 * var(--kssm-unit));
  border-radius: calc(20 * var(--kssm-unit));
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sec6__tit {
  position: absolute; left: 7.14%; /* 카드 폭 대비 좌측 여백 (PC 50px / MO 20px) */
  top: 50%; transform: translateY(-50%); /* 줄 수와 무관하게 세로 중앙 */
  font-size: calc(34 * var(--kssm-unit));
  line-height: 1.2; letter-spacing: -0.03em;
}
/* PC 는 한 줄 / MO 는 줄바꿈되는 텍스트용 (sec6 카드2) */
.mo-br { display: none; }
.pc-sp { display: inline; }
.sec6__img { position: absolute; }
.sec6__img--hand    { left: 56.07%; top: 14.66%; width: 64.3%; height: 85.34%; object-fit: cover; }
.sec6__img--session { left: 64.73%; top: 16.51%; width: 17.47%; }
.sec6__img--charge  { left: 58.06%; top: 28.38%; width: 30.85%; }
.sec6__img--colors  { left: -7.14%; top: -0.81%; width: 154.3%; height: 101.6%; object-fit: cover; }
.sec6__img--modes   { left: 56.9%;  top: 19.38%; width: 35.03%; }
.sec6__img--clean   { left: 61.63%; top: 28.19%; width: 30.85%; }

.sec6__btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(2005 * var(--kssm-unit));
  display: flex; align-items: center; justify-content: center;
  gap: calc(15 * var(--kssm-unit));
  width: calc(401 * var(--kssm-unit));
  height: calc(73 * var(--kssm-unit));
  border: calc(2 * var(--kssm-unit)) solid #000;
  font-size: calc(26 * var(--kssm-unit));
  line-height: 1.25; letter-spacing: -0.03em;
  color: #000;
}
.sec6__btn img { width: calc(11.2 * var(--kssm-unit)); }
.sec6__note {
  position: absolute;
  left: calc(60 * var(--kssm-unit));
  bottom: calc(40 * var(--kssm-unit));
  font-family: var(--font-note); font-weight: 400;
  font-size: calc(16 * var(--kssm-unit));
  line-height: 1.25; letter-spacing: -0.03em;
  color: var(--black);
}
.sec6__note .indent { padding-left: 1.2em; }

/* ============================================================
   MOBILE (디자인 375 x2 = 750 기준)
   ============================================================ */
@media screen and (max-width: 768px) {
  .kssm {
    --kssm-unit: 0.133333vw;  /* 100/750 */
    max-width: none;          /* 모바일은 항상 뷰포트 폭 */
  }

  .pc { display: none; }
  img.pc { display: none; }
  .mo { display: block; }
  img.mo { display: block; }
  .pc-only { display: none; }
  .mo-only { display: inline; }
  .pc-br { display: none; }
  .mo-sp { display: inline; }

  .sec { height: calc(1300 * var(--kssm-unit)); }
  .sec__note {
    left: calc(48 * var(--kssm-unit));
    bottom: calc(40 * var(--kssm-unit));
    font-size: calc(14 * var(--kssm-unit));
    letter-spacing: -0.04em;
  }

  /* ---- main ---- */
  /* main-kv-mo.png 는 375x600 완성 컷 — 마스크 없이 풀블리드 */
  .sec-main { height: calc(1200 * var(--kssm-unit)); background: #0f0f0f; }
  .sec-main__bg img.mo {
    left: 0; top: 0;
    width: calc(750 * var(--kssm-unit));
    height: calc(1200 * var(--kssm-unit));
  }
  .sec-main__logo {
    left: calc(52 * var(--kssm-unit));
    top: calc(32.8 * var(--kssm-unit));
    width: calc(128 * var(--kssm-unit));
  }
  .sec-main__badge {
    right: calc(50 * var(--kssm-unit));
    top: calc(50 * var(--kssm-unit));
    width: calc(228 * var(--kssm-unit));
  }
  .sec-main__lockup {
    left: calc(40 * var(--kssm-unit));
    top: calc(150 * var(--kssm-unit));
    width: calc(431.8 * var(--kssm-unit));
  }
  .sec-main__plus {
    left: calc(72.4 * var(--kssm-unit));
    top: calc(252.2 * var(--kssm-unit));
    width: calc(444.4 * var(--kssm-unit));
  }
  .sec-main__title {
    left: calc(72.4 * var(--kssm-unit));
    top: calc(345.5 * var(--kssm-unit));
    font-size: calc(41.1 * var(--kssm-unit));
    letter-spacing: -0.02em;
  }
  .sec-main__note {
    left: calc(40 * var(--kssm-unit));
    bottom: calc(20 * var(--kssm-unit));
    font-size: calc(14 * var(--kssm-unit));
  }
  .sec-main.js-video .kv-reveal--btt { transform: translateY(calc(40 * var(--kssm-unit))); }
  .sec-main.js-video .kv-reveal--ttb { transform: translateY(calc(-40 * var(--kssm-unit))); }

  /* ---- section1 ---- */
  .sec1__bg img {
    top: calc(-86.4 * var(--kssm-unit));
    width: calc(865.9 * var(--kssm-unit));
    height: calc(1657.7 * var(--kssm-unit));
  }
  .sec1__dim { height: calc(478.5 * var(--kssm-unit)); }
  .sec1__cont { top: calc(116 * var(--kssm-unit)); }
  .sec1__icons {
    gap: calc(33.3 * var(--kssm-unit));
    margin-bottom: calc(33 * var(--kssm-unit));
  }
  .sec1__icons img {
    width: calc(78.3 * var(--kssm-unit));
    height: calc(78.3 * var(--kssm-unit));
  }
  .sec1__title {
    font-size: calc(53.3 * var(--kssm-unit));
    margin-bottom: calc(33 * var(--kssm-unit));
  }
  .sec1__sub { font-size: calc(26.7 * var(--kssm-unit)); }

  /* ---- section2 ---- */
  /* sec2-devices-mo.png 는 섹션 영역(275x650 @2x)으로 클리핑되어 export 됨 */
  .sec2__device img.mo {
    position: absolute;
    left: calc(100.2 * var(--kssm-unit)); top: 0;
    width: calc(550 * var(--kssm-unit));
    height: calc(1300 * var(--kssm-unit));
  }
  .sec2__grad {
    display: block; position: absolute; left: 0; width: 100%;
    height: calc(463.6 * var(--kssm-unit)); z-index: 1;
  }
  .sec2__grad--top { top: 0; background: linear-gradient(180deg, #2e9355 0%, rgba(46, 147, 85, 0) 100%); }
  .sec2__grad--btm { bottom: 0; background: linear-gradient(180deg, rgba(154, 247, 198, 0) 0%, #9af7c6 100%); }
  .sec2__t1 {
    left: 50%; transform: translateX(-50%);
    top: calc(110 * var(--kssm-unit)); z-index: 2;
    font-size: calc(60 * var(--kssm-unit));
    letter-spacing: -0.04em; text-align: center;
  }

  /* ---- section3 ---- */
  /* sec3-device-mo.png 는 섹션 하단에서 클리핑(326.5x386 @2x)되어 export 됨 */
  .sec3__device img.mo {
    position: absolute;
    left: calc(28 * var(--kssm-unit));
    top: calc(528 * var(--kssm-unit));
    width: calc(653 * var(--kssm-unit));
    height: calc(772 * var(--kssm-unit));
  }
  .sec3__cont {
    left: 50%; top: calc(120 * var(--kssm-unit)); transform: translateX(-50%);
    text-align: center; width: 100%;
  }
  .sec3__icon { margin: 0 auto calc(34.7 * var(--kssm-unit)); }
  .sec3__title {
    font-size: calc(60 * var(--kssm-unit));
    letter-spacing: -0.01em;
    margin-bottom: calc(34.7 * var(--kssm-unit));
  }
  .sec3__sub { font-size: calc(32 * var(--kssm-unit)); }

  /* ---- section4 ---- */
  .sec4__device img {
    left: calc(160 * var(--kssm-unit));
    top: calc(606 * var(--kssm-unit));
    width: calc(402 * var(--kssm-unit));
    height: calc(708 * var(--kssm-unit));
  }
  .sec4__cont {
    left: 50%; top: calc(118 * var(--kssm-unit)); transform: translateX(-50%);
    text-align: center; width: 100%;
  }
  .sec4__icon {
    width: calc(83.2 * var(--kssm-unit));
    margin: 0 auto calc(32.9 * var(--kssm-unit));
  }
  .sec4__title {
    font-size: calc(60 * var(--kssm-unit));
    letter-spacing: -0.02em;
    margin-bottom: calc(32.9 * var(--kssm-unit));
  }
  .sec4__sub { font-size: calc(32 * var(--kssm-unit)); }

  /* ---- section5 ---- */
  .sec5__bg img.mo {
    position: absolute;
    left: calc(50% - 130 * var(--kssm-unit)); transform: translateX(-50%);
    top: calc(-62 * var(--kssm-unit));
    width: calc(1398 * var(--kssm-unit));
    height: calc(1380 * var(--kssm-unit));
    object-fit: cover;
  }
  .sec5__title {
    left: 50%; top: calc(154 * var(--kssm-unit)); transform: translateX(-50%);
    width: 100%;
    font-size: calc(60 * var(--kssm-unit));
    letter-spacing: -0.01em; text-align: center;
  }

  /* ---- section6 ---- */
  .sec6 { height: calc(3200 * var(--kssm-unit)); }
  .sec6__title {
    top: calc(158 * var(--kssm-unit));
    width: calc(373.5 * var(--kssm-unit));
  }
  .sec6__cards {
    top: calc(282 * var(--kssm-unit));
    width: calc(560 * var(--kssm-unit));
    flex-direction: column; flex-wrap: nowrap;
    gap: calc(25.7 * var(--kssm-unit));
  }
  .sec6__card {
    width: calc(560 * var(--kssm-unit));
    height: calc(395.7 * var(--kssm-unit));
    border-radius: calc(15.8 * var(--kssm-unit));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .sec6__tit { font-size: calc(40 * var(--kssm-unit)); line-height: 1.3; }
  .mo-br { display: inline; }
  .pc-sp { display: none; }
  .sec6__btn {
    top: calc(2880 * var(--kssm-unit));
    width: calc(420 * var(--kssm-unit));
    height: calc(80 * var(--kssm-unit));
    border-width: 1px;
    font-size: calc(27.2 * var(--kssm-unit));
    letter-spacing: -0.03em;
    gap: calc(14 * var(--kssm-unit));
  }
  .sec6__btn img { width: calc(11.7 * var(--kssm-unit)); }
  .sec6__note {
    left: calc(40 * var(--kssm-unit));
    bottom: calc(46 * var(--kssm-unit));
    font-size: calc(14 * var(--kssm-unit));
    letter-spacing: -0.03em;
  }
}