@charset "utf-8";

/* ==============================
   Housekeeping Page — 숨카(Soomca)
   커뮤니티 공간케어 전문 브랜드
============================== */

/* 모바일 전용 줄바꿈: 기본은 숨기고, 좁은 카드 폭에서만 노출 */
.mo-br {
  display: none;
}

/* 이 페이지(숨카/오드이븐)는 메인 홈페이지와 동일하게 나눔스퀘어 사용 */
body {
  font-family: "NanumSquare", "Noto Sans KR", sans-serif;
}

/* 이 페이지의 퀵메뉴는 사이트 기본 오렌지 대신 페이지 포인트 컬러(틸)를 사용 */
.quick-menu {
  border-color: var(--hk-teal);
}

.quick-menu__item {
  background: var(--hk-teal);
}

.quick-menu__item--top {
  background: #fff;
  border-color: var(--hk-teal);
  color: var(--hk-teal);
}

.housekeeping-main {
  background: #fff;
  color: #121212;
}

.mo-only {
  display: none;
}

:root {
  --hk-teal: #0f6e63;
  --hk-teal-dark: #0a4a42;
  --hk-teal-soft: #e8f5f3;
  --hk-black: #121212;
  --hk-text: #333;
  --hk-muted: #6b7280;
  --hk-line: rgba(0, 0, 0, 0.08);
  --hk-bg: #f6f8f8;
  --hk-radius-lg: 28px;
  --hk-radius-md: 18px;
  --hk-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
  --hk-inner: min(1200px, calc(100% - 80px));
  --hk-gutter: calc((100vw - min(1200px, 100vw - 80px)) / 2);
}

.housekeeping-main section {
  position: relative;
}

.housekeeping-main h1,
.housekeeping-main h2,
.housekeeping-main h3,
.housekeeping-main h4,
.housekeeping-main p,
.housekeeping-main span,
.housekeeping-main a,
.housekeeping-main li,
.housekeeping-main label {
  word-break: keep-all;
}

.hk-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;

  color: var(--hk-teal);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.088em;
}

.hk-label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--hk-teal);
}

/* 헤더(nav) 색상 반전: 이 페이지의 밝은 배경/틸 포인트 컬러에 맞춤
   - 최상단: 투명 배경 + 어두운 글자 / 스크롤·서브메뉴 오픈: 흰 배경 + 어두운 글자
   - 포인트 컬러(hover, 밑줄, CONTACT 버튼)는 틸 */
.header {
  --point-color: var(--hk-teal);
  --header-bg: #fff;
  color: var(--hk-black);
}

.header.scrolled {
  box-shadow: 0 1px 0 var(--hk-line);
}

/* 서브메뉴는 흰 배경 띠 위에 어두운 글자 (공통 CSS의 !important 색상 override) */
.sub-menu-wrapper a {
  color: rgba(18, 18, 18, 0.72) !important;
}

.sub-menu-wrapper a:hover,
.sub-menu-wrapper a.is-active {
  color: var(--hk-teal) !important;
}

/* CONTACT 버튼: 틸 아웃라인, hover/활성 시 틸 채움 */
.header__contact {
  background: #fff;
  color: var(--hk-teal);
  border-color: var(--hk-teal);
}

.header__contact:hover,
.header__contact.is-active {
  background: var(--hk-teal);
  color: #fff;
}

/* 모바일 메뉴 버튼(햄버거)
   - 기본(스크롤 후 흰 배경 헤더 / 메뉴 열림 상태)은 어두운 색 유지
   - 스크롤 전(투명 헤더)에는 흰색: 모바일에서 히어로가 어두운 배경
     비디오라 어두운 색이면 잘 안 보이기 때문 */
.menu-btn span {
  background: var(--hk-black);
}

.header:not(.scrolled):not(.is-open) .menu-btn span {
  background: #fff;
}

/* ==============================
   Section 1 — Hero Banner
   (제목 + 브랜드 헤드라인을 하나의 포토 배경 히어로로 통합)
============================== */
.hk-hero {
  position: relative;
  height: 936px; /* 콘텐츠 높이 + 하단 padding(70px) + 카드 섹션과의 간격 100px 추가 */
  padding: 210px 0 70px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.hk-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: saturate(0.9);
  transform: scale(1.06);
}

/* 모바일 전용 배경 비디오: 데스크톱에서는 숨기고 ≤768px에서만 메인 섹션 전체를 채움 */
.hk-hero__mobile-bg,
.hk-hero__mobile-overlay {
  display: none;
}

/* 모바일 전용 타이틀 복제본(.hk-hero 바로 아래): 데스크톱에서는 숨김 */
.hk-hero > .hk-hero__title {
  display: none;
}

/* 스크롤 유도 아이콘: 데스크톱에서는 숨기고 모바일에서만 노출
   - JS(housekeeping.js)가 스크롤 위치에 따라 .is-hidden을 토글해 opacity로 페이드 인/아웃 */
.hk-hero__scroll {
  display: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hk-hero__scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 중앙 정렬용 translateX(-50%)는 바깥 래퍼에 있으므로, transform 충돌을 피해
   이미지 쪽에 둥둥 뜨는 애니메이션을 건다 */
.hk-hero__scroll img {
  animation: hk-hero-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes hk-hero-scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-hero__scroll img {
    animation: none;
  }
}

.hk-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--hk-inner);
  margin: 0 auto;
}

/* 좌측(제목+텍스트) / 우측(동영상+사진) 두 컬럼이 각자 독립적으로 세로 정렬됨 */
.hk-hero__top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: stretch; /* 우측 동영상 높이를 좌측 텍스트 영역 높이에 맞춤 */
  margin: 50px 0 60px;
}

.hk-hero__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  transform: translateX(-80px); /* 텍스트 영역 전체를 왼쪽으로 이동 */
}

.hk-hero__right {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hk-hero__title {
  margin: 0;
  font-size: 47px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #121212;
  animation: hkFadeInUp 0.8s ease both;
}

/* 첫 줄: 바로 아래 강조 줄('프리미엄 아파트 커뮤니티')의 폭을 넘지 않도록 축소 */
.hk-hero__title-sub {
  font-size: 42px;
}

.hk-hero__title strong {
  display: block;
  margin-top: 2px;
  color: #0f6e63;
  font-weight: 900;
}

/* 동영상: 우측 100px 여백으로 블리드, 높이는 좌측 텍스트 영역과 맞춤 */
.hk-hero__video {
  position: relative;
  width: calc(100% + var(--hk-gutter)); /* 화면 오른쪽 끝까지 블리드 */
  margin-right: calc(-1 * var(--hk-gutter));
  height: 100%; /* 좌측 텍스트 영역 높이에 맞춤 */
  border-radius: var(--hk-radius-lg) 0 0 var(--hk-radius-lg);
  overflow: hidden;
  background: #d9d9d9;
  animation: hkFadeInRight 1s ease-out both;
  animation-delay: 0.5s;
}

.hk-hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hk-hero__text {
  animation: hkFadeIn 0.8s ease both;
  animation-delay: 0.5s;
}

@keyframes hkFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hkFadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 히어로 이미지박스만 오른쪽 → 왼쪽으로 나타나는 fade */
@keyframes hkFadeInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-hero__title,
  .hk-hero__text,
  .hk-hero__video {
    animation: none;
  }
}

.hk-reveal.hk-reveal--armed {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hk-reveal.hk-reveal--armed.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hk-reveal.hk-reveal--armed {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Section 4(hk-proof)만 좌 → 우로 나타나는 fade */
.hk-proof.hk-reveal.hk-reveal--armed {
  transform: translateX(-60px);
}

.hk-proof.hk-reveal.hk-reveal--armed.is-visible {
  transform: translateX(0);
}

.hk-hero__text h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.36;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #121212;
}

.hk-hero__text h2 strong {
  color: #0f6e63;
  font-weight: 900;
}

/* 타이핑 효과: 타이핑 중에는 깜빡이는 커서 표시, 완료되면 커서 숨김 */
.hk-hero__typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 4px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: hkCursorBlink 0.9s steps(1, end) infinite;
}

.hk-hero__typing.is-typing-done::after {
  animation: none;
  opacity: 0;
}

@keyframes hkCursorBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-hero__typing::after {
    animation: none;
    opacity: 0;
  }
}

.hk-hero__text > p {
  max-width: 520px;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--hk-muted);
  letter-spacing: -0.02em;
}

/* 모바일 전용 흰 배경 섹션(히어로 바로 아래): 데스크톱에서는 숨김 */
.hk-hero__desc-mobile {
  display: none;
}

/* ==============================
   Section 2 — Brand Story
============================== */
.hk-story {
  padding: 120px 0;
  background: var(--hk-bg);
}

.hk-story__inner {
  width: var(--hk-inner);
  margin: 0 auto;
}

.hk-story__head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.hk-story__head .hk-label {
  justify-content: center;
}

.hk-story__head h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--hk-black);
}

.hk-story__head h3 strong {
  color: var(--hk-teal);
  font-weight: 900;
}

.hk-story__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.hk-story__card {
  padding: 44px 40px;
  border-radius: var(--hk-radius-lg);
  background: #fff;
  border: 1px solid var(--hk-line);
}

.hk-story__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--hk-teal-soft);
  color: var(--hk-teal);
  font-size: 15px;
  font-weight: 900;
}

.hk-story__card h4 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hk-black);
}

.hk-story__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
  color: var(--hk-muted);
  letter-spacing: -0.02em;
}

/* ==============================
   Section 3 — Service Areas
============================== */
.hk-areas {
  padding: 120px 0;
  background: #fff;
}

.hk-areas__inner {
  width: var(--hk-inner);
  margin: 0 auto;
}

.hk-areas__head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.hk-areas__head .hk-label {
  justify-content: center;
}

.hk-areas__head h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--hk-black);
}

.hk-areas__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 18px;
}

.hk-areas__card {
  padding: 8px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 3px 56%;
  background-origin: border-box;
  transition: transform 0.3s ease;
}

.hk-areas__card:not(:first-child) {
  padding-left: 20px;
  background-image: linear-gradient(var(--hk-teal), var(--hk-teal));
}

.hk-areas__card:hover {
  transform: translateY(-6px);
}

.hk-areas__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--hk-teal);
  color: #fff;
}

.hk-areas__icon svg {
  width: 23px;
  height: 23px;
}

.hk-areas__eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--hk-teal);
  text-transform: uppercase;
}

.hk-areas__card h4 {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.36;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hk-black);
}

.hk-areas__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hk-areas__card li {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--hk-muted);
  letter-spacing: -0.02em;
}

.hk-areas__card li:first-child {
  margin-top: 0;
}

/* ==============================================================
   Section 3.5 — Before & After (호버 크로스페이드 카드)

   구조: .hk-compare__frame 안에 .hk-compare__img 2장을 절대 위치로
   겹쳐놓습니다. 아래(AFTER)가 항상 깔려 있고, 위(BEFORE)가 기본값으로
   전체를 덮고 있다가, 마우스가 올라간 지점(js/housekeeping.js가
   --hk-mx/--hk-my 로 좌표를 갱신)을 중심으로 원형 마스크가 퍼지면서
   BEFORE가 사라지고, 동시에 흐려지고(blur) 커지며(scale) 아래의
   AFTER 레이어가 자연스럽게 드러나는 방식입니다.

   ▼ 세부 효과 커스터마이징은 아래 CSS 변수만 바꾸면 됩니다.
   (값은 .hk-compare__frame / .hk-compare__img--before 선택자에 정의)

     --hk-compare-duration   전환에 걸리는 시간            예: 0.6s ~ 1.2s
     --hk-compare-ease       전환 타이밍 함수               예: ease, ease-out, cubic-bezier(.22,.61,.36,1)
     --hk-compare-blur       사라질 때 번지는 블러 강도      예: 8px(살짝) ~ 30px(진하게)
     --hk-compare-scale      사라질 때 확대 비율             예: 1.05(살짝) ~ 1.3(크게), 1보다 작으면 축소되며 사라짐
     --hk-compare-brightness 사라질 때 밝기 변화             예: 1(그대로), 1.2(밝아짐), 0.85(어두워짐)
     --hk-mx, --hk-my        원이 퍼지는 중심 좌표(%)        js/housekeeping.js가 마우스 위치로 자동 갱신
     --hk-reveal             원의 반지름(%), 0%→150%로 전환  숫자를 줄이면 다 퍼지는 데 더 오래 걸리는 것처럼 보임

   ▼ .hk-compare__img--before / --after 안에 <img> 태그로 실제 사진이
     들어가 있습니다(object-fit: cover). 배경 그라데이션은 이미지가
     로드되지 않았을 때를 대비한 fallback 색상으로 남겨뒀습니다.

   ▼ 박스 크기는 528x714(px) 비율로 고정되어 있습니다.
     아래 파일명(순서: 소파 → 매트리스 → 에어컨)이 img 폴더에
     들어있어야 합니다. (권장 크기 528x714 이상, 같은 비율이면
     더 큰 원본도 무방 — object-fit: cover 로 채워집니다)

       소파 청소     BEFORE → img/hk_sofa_before.jpg
                     AFTER  → img/hk_sofa_after.jpg
       매트리스 청소  BEFORE → img/hk_mattress_before.jpg
                     AFTER  → img/hk_mattress_after.jpg
       에어컨 청소    BEFORE → img/hk_aircon_before.jpg
                     AFTER  → img/hk_aircon_after.jpg
================================================================== */

.hk-compare-section {
  background: var(--hk-bg);
}

.hk-compare__list {
  display: flex;
  width: 100%;
  justify-content: center;
}

.hk-compare {
  flex: 0 0 528px;
  min-width: 0;
}

.hk-compare__frame {
  /* 커스터마이징 변수 (필요한 값만 바꿔서 사용하세요) */
  --hk-compare-duration: 1.5s;
  --hk-compare-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hk-compare-blur: 16px;
  --hk-compare-scale: 1.15;
  --hk-compare-brightness: 1.1;

  /* js/housekeeping.js가 마우스 위치로 실시간 갱신 (기본값: 중앙) */
  --hk-mx: 50%;
  --hk-my: 50%;

  position: relative;
  width: 528px;
  height: 714px;
  overflow: hidden;
  cursor: pointer;
}

.hk-compare__img {
  position: absolute;
  inset: 0;
}

.hk-compare__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* AFTER = 항상 아래 깔려 있는 레이어 */
.hk-compare__img--after {
  z-index: 1;
  background: linear-gradient(145deg, #16403a 0%, var(--hk-teal-dark) 55%, #0a2d28 100%);
}

/* 마우스가 올라간 지점(--hk-mx, --hk-my)을 기준으로 원이 퍼지며
   BEFORE 레이어가 사라지도록 하는 커스텀 프로퍼티.
   (transition으로 부드럽게 애니메이션되려면 @property 등록이 필요) */
@property --hk-reveal {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* BEFORE = 기본 상태에서 위를 덮고 있는 레이어 (호버 시 마우스 지점부터 사라짐) */
.hk-compare__img--before {
  z-index: 2;
  background: linear-gradient(145deg, #6b6155 0%, #4d463d 55%, #322d27 100%);

  --hk-reveal: 0%;

  /* --hk-reveal(0%~150%)이 커질수록 마우스 지점(--hk-mx, --hk-my)을
     중심으로 투명한 원이 넓어지며 아래 AFTER 레이어가 드러납니다.
     두 색상 정지점을 모두 --hk-reveal에 비례시켜서, reveal이 0%일
     때는 반지름이 0이 되어(= 완전히 불투명) hover 전에는 아무 지점도
     보이지 않습니다. */
  -webkit-mask-image: radial-gradient(
    circle at var(--hk-mx) var(--hk-my),
    transparent var(--hk-reveal),
    black calc(var(--hk-reveal) * 1.15)
  );
  mask-image: radial-gradient(
    circle at var(--hk-mx) var(--hk-my),
    transparent var(--hk-reveal),
    black calc(var(--hk-reveal) * 1.15)
  );

  filter: blur(0) brightness(1);
  transform: scale(1);
  transition:
    --hk-reveal var(--hk-compare-duration) var(--hk-compare-ease),
    filter var(--hk-compare-duration) var(--hk-compare-ease),
    transform var(--hk-compare-duration) var(--hk-compare-ease);
}

/* BEFORE 이미지 위에 50% 블랙 오버레이 (레이어 안에 있어서 hover 시 이미지와 함께 사라짐) */
.hk-compare__img--before::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.hk-compare__frame:hover .hk-compare__img--before,
.hk-compare__frame:focus-visible .hk-compare__img--before,
.hk-compare__frame.is-touch-active .hk-compare__img--before {
  --hk-reveal: 150%;
  filter: blur(var(--hk-compare-blur)) brightness(var(--hk-compare-brightness));
  transform: scale(var(--hk-compare-scale));
}

/* 카테고리별 BEFORE 톤 차이 (임시 placeholder 구분용) */
.hk-compare__img--sofa {
  background: linear-gradient(145deg, #5e564e 0%, #423b34 55%, #292420 100%);
}

.hk-compare__img--mattress {
  background: linear-gradient(145deg, #877a5f 0%, #6b6047 55%, #453d2c 100%);
}

.hk-compare__img--aircon {
  background: linear-gradient(145deg, #4a5049 0%, #383d35 55%, #232622 100%);
}

.hk-compare__text {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 28px;
  text-align: center;
  pointer-events: none;
}

.hk-compare__text h4 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.hk-compare__text p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.02em;
}

.hk-compare__arrow {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.hk-compare__arrow svg {
  width: 15px;
  height: 15px;
}

/* 터치 안내 문구: 데스크톱은 마우스 hover로 바로 알 수 있어 숨기고,
   모바일에서만 화살표 아이콘 왼쪽 옆에 작게 노출 (아이콘과 같은 줄) */
.hk-compare__touch-hint {
  display: none;
  position: absolute;
  z-index: 3;
  right: 62px; /* 화살표(34px, right:20px) 왼쪽에 여백 8px를 두고 배치 */
  bottom: 20px;
  height: 34px;
  line-height: 34px; /* 화살표 원과 세로 중앙이 맞도록 */
  font-size: 11px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
}

/* ==================================================================
   ▼ 응용 아이디어 (필요할 때 아래 예시를 참고해 추가하세요)

   1) 흑백 → 컬러 전환
      AFTER 레이어를 흑백으로 시작했다가 호버 시 컬러로 살아나게 하면
      "정리 전(무채색) → 정리 후(생동감)" 느낌을 더 강조할 수 있습니다.

      .hk-compare__img--after { filter: grayscale(1); }
      .hk-compare__frame:hover .hk-compare__img--after {
        filter: grayscale(0);
        transition: filter var(--hk-compare-duration) var(--hk-compare-ease);
      }

   2) 빛이 번지는 라이트 블룸 효과 추가
      .hk-compare__frame::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), transparent 60%);
        opacity: 0;
        mix-blend-mode: screen;
        pointer-events: none;
        transition: opacity var(--hk-compare-duration) var(--hk-compare-ease);
      }
      .hk-compare__frame:hover::after { opacity: .55; }

   3) 번짐(디졸브) 대신 방향성 있는 와이프(wipe) 전환으로 바꾸고 싶다면
      opacity 대신 clip-path를 애니메이션하면 됩니다.
      .hk-compare__img--before { clip-path: inset(0 0 0 0); }
      .hk-compare__frame:hover .hk-compare__img--before {
        clip-path: inset(0 100% 0 0); /* 왼쪽 → 오른쪽으로 걷히듯 사라짐 */
      }
================================================================== */

/* ==============================
   Section 4 — Social Proof
============================== */
/* hk-proof 섹션에만 단독 배경색 적용 */
.hk-proof {
  padding: 120px 0;
  background-color: #f4f6f8 !important;
  overflow: hidden; /* 높이 붕괴 방지 */
  color: #fff;
}

.hk-proof__inner {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  background-color: #0A4A42;
  background-image: url("../img/hk_proof_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 115.2px;
  padding-right: 200px;
}

.hk-proof__stat strong {
  display: block;
  font-size: 92px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}

/* 숫자 롤링/스크램블 중 자릿수 폭이 흔들리지 않도록 고정폭 숫자 사용 */
.hk-proof__stat-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.hk-proof__stat > span {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.02em;
}

.hk-proof__text h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #fff;
}

.hk-proof__text > p {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.02em;
}

.hk-proof__points {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hk-proof__points li {
  position: relative;
  margin-top: 14px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.02em;
}

.hk-proof__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

/* ==============================
   Section 5 — Service Inquiry
============================== */
.hk-contact {
  position: relative;
  min-height: 420px;
  padding: 130px 0 140px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hk-contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

/* 수상/인증 배너: 섹션 최상단에 붙는 전체 폭 스트립 (섹션과 함께 fade-in) */
.hk-line-banner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

.hk-line-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hk-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 25, 22, 0.62);
  pointer-events: none;
}

.hk-contact__inner {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 64px));
  margin: 0 auto;
  text-align: center;
}

.hk-contact__head {
  margin-bottom: 44px;
  text-align: center;
}

.hk-contact__head h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #fff;
}

.hk-contact__head h3 strong {
  color: #fff;
  font-weight: 900;
}

.hk-contact__head p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.74;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.02em;
}

.hk-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  border-radius: 999px;
  background: #5e9992;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  border: 1px solid #5e9992;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.hk-contact__btn:hover {
  background-color: var(--hk-teal-dark);
  border-color: transparent;
}

/* ==============================
   Responsive
============================== */
@media screen and (max-width: 1440px) {
  :root {
    --hk-inner: min(1120px, calc(100% - 80px));
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --hk-inner: calc(100% - 80px);
  }

  .hk-areas__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .hk-areas__card:not(:first-child) {
    padding-left: 8px;
    background-image: none;
  }

  .hk-areas__card:nth-child(even) {
    padding-left: 20px;
    background-image: linear-gradient(var(--hk-teal), var(--hk-teal));
  }

  /* 1584px(528x3) 디자인 기준 528x714 박스를 화면 폭에 맞춰
     같은 비율(528:714)로 유동적으로 축소합니다 */
  .hk-compare {
    flex: 1 1 0;
  }

  .hk-compare__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 528 / 714;
  }
}

@media screen and (max-width: 1024px) {
  .hk-hero {
    padding-top: 170px;
  }

  .hk-hero__top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 30px 0 36px;
  }

  /* 데스크톱 전용 좌측 이동(-80px)이 반응형에서 리셋되지 않아 텍스트가
     화면 왼쪽 밖으로 잘려 보이던 문제 수정 */
  .hk-hero__left {
    transform: none;
  }

  .hk-hero__video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11.7;
    margin-right: 0;
    border-radius: var(--hk-radius-lg);
  }

  .hk-hero__right {
    order: -1;
    height: auto;
  }

  .hk-story__grid {
    grid-template-columns: 1fr;
  }

  /* 원래 display: flex라 grid-template-columns는 적용되지 않아, 데스크톱용
     고정 height(500px)·padding-right(200px)가 모바일까지 남아 텍스트가
     잘리고 있었음 → grid로 전환하고 높이를 콘텐츠에 맞게 자동으로 늘림 */
  .hk-proof__inner {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    padding: 48px 24px;
    gap: 36px;
    text-align: center;
  }

  .hk-proof__stat {
    text-align: center;
  }

  .hk-proof__text > p {
    margin-left: auto;
    margin-right: auto;
  }

  .hk-proof__points {
    text-align: center;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 불릿 점이 li 왼쪽에 절대 위치로 고정돼 있어, 중앙정렬 시 점과 텍스트가
     따로 노는 것을 막기 위해 점을 텍스트 앞의 인라인 요소로 전환 */
  .hk-proof__points li {
    padding-left: 0;
  }

  .hk-proof__points li::before {
    position: static;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }
}

@media screen and (max-width: 768px) {
  .gnb__item > a:hover,
  .gnb__item > a:active,
  .gnb__item > a:focus,
  .gnb__item > a.is-active,
  .gnb__item.has-sub:hover > a {
    color: var(--hk-teal);
    background: var(--hk-teal-soft);
  }

  .hk-hero {
    height: 100vh; /* 모바일 해상도(화면 높이)에 꽉 차도록 고정 936px 대신 뷰포트 기준으로 전환 */
    height: 100dvh; /* 지원 브라우저는 주소창 변화에 실시간으로 반응하는 동적 뷰포트 높이 사용 */
    padding: 140px 0 56px;
  }

  /* 배경 비디오가 메인 섹션 전체(100% width/height)를 채우고, z-index는 가장 아래 */
  .hk-hero__mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
  }

  /* 가독성을 위한 어두운 반투명 오버레이 (비디오 위, 텍스트 아래) */
  .hk-hero__mobile-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }

  /* 우측에 있던 작은 영상 박스는 배경 비디오로 대체되었으므로 숨김(중복 재생 방지) */
  .hk-hero__right {
    display: none;
  }

  /* 메인 섹션 중앙 하단 스크롤 유도 아이콘 (다른 페이지와 동일 위치·크기) */
  .hk-hero__scroll {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 50.4px;
    z-index: 2;
    transform: translateX(-50%);
  }

  .hk-hero__scroll img {
    display: block;
    width: 22px;
    height: auto;
  }

  .hk-hero__title {
    margin-bottom: 40px;
    font-size: 24px;
  }

  /* 히어로 안의 원본(데스크톱용, .hk-hero__left 안에 중첩) 타이틀·설명은 숨기고,
     .hk-hero 바로 아래 있는 모바일 전용 복제본을 대신 노출한다 */
  .hk-hero__left .hk-hero__title,
  .hk-hero__left .hk-hero__text {
    display: none;
  }

  /* 모바일 전용 타이틀: 히어로 중앙에 흰색·중앙정렬로 배치
     - 기존 hkFadeInUp 애니메이션(fill-mode: both)이 끝난 뒤에도
       transform: translateY(0)을 계속 유지해 translateY(-50%) 중앙정렬과
       충돌하므로, 이 복제본은 애니메이션을 끄고 고정 위치로 표시한다 */
  .hk-hero > .hk-hero__title {
    display: block;
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    transform: translateY(-50%);
    animation: none;
    opacity: 1;
    z-index: 2;
    margin-bottom: 0;
    text-align: center;
    color: #fff;
  }

  /* strong 구간(기본은 teal 계열 색)도 흰색으로 통일 */
  .hk-hero > .hk-hero__title strong {
    color: #fff;
  }

  /* 모바일 전용 흰 배경 섹션: 소제목(타이핑)/설명 문구 노출 */
  .hk-hero__desc-mobile {
    display: block;
    background: #fff;
    padding: 86px 24px; /* 상하 패딩 30px씩 증가 (56px → 86px) */
  }

  .hk-hero__text h2 {
    font-size: 28px;
    line-height: 1.4;
  }

  .hk-story,
  .hk-areas,
  .hk-proof {
    padding: 90px 0;
  }

  .hk-story__head h3,
  .hk-areas__head h3 {
    font-size: 26px;
  }

  /* 4개 카드를 2x2로 배치 (태블릿 구간과 동일).
     align-items: center(기본)는 카드마다 제목 줄바꿈 수·리스트 텍스트 길이가
     달라 전체 높이가 제각각이라, 아이콘/제목이 세로로 어긋나 보였음
     → 상단 정렬로 바꿔 모든 카드가 같은 위치에서 시작하도록 함 */
  .hk-areas__list {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .mo-br {
    display: inline;
  }

  .hk-areas__card,
  .hk-areas__card:not(:first-child) {
    padding-left: 8px;
    background-image: none;
  }

  .hk-areas__card:nth-child(even) {
    padding-left: 32px; /* 구분선과 텍스트 사이 여백 확보 (20px → 32px) */
    background-image: linear-gradient(var(--hk-teal), var(--hk-teal));
  }

  .hk-compare__list {
    flex-direction: column;
  }

  /* 세로 비율 50% 축소 (714 → 357). object-fit: cover가 유지되므로
     이미지가 찌그러지지 않고, 비율에 맞게 중앙 기준으로만 크롭된다 */
  .hk-compare__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 528 / 357;
  }

  .hk-compare__touch-hint {
    display: block;
  }

  .hk-proof__stat strong {
    font-size: 68px;
  }

  .hk-proof__text h3 {
    font-size: 26px;
  }

  .hk-contact {
    padding: 90px 0 50px; /* 하단 간격 50% 축소 (100px → 50px) */
  }

  /* 배너 이미지를 중앙 기준으로 확대: 양 사이드가 잘려도 무방 */
  .hk-line-banner img {
    position: relative;
    left: 50%;
    width: 130%;
    max-width: none;
    transform: translateX(-50%);
  }

  .hk-contact__head h3 {
    font-size: 24px;
  }

  /* 줄바꿈이 어색하지 않도록 균형 잡힌 2줄로 정리 */
  .hk-contact__head p {
    text-wrap: balance;
  }

  /* 버튼 색상을 숨카 페이지 포인트 컬러(--hk-teal)로 통일 */
  .hk-contact__btn {
    background: var(--hk-teal);
    border-color: var(--hk-teal);
  }

  /* 번호 배지와 제목을 감싸는 부모 컨테이너: flexbox로 수직 중앙 정렬을 강제 */
  .hk-story__head {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
  }

  /* 배지 크기를 옆 제목의 텍스트 줄 높이(21px × line-height 1.4 ≈ 29.4px)에 맞추고,
     배지 자체도 flex로 중앙 정렬 + line-height/padding을 초기화해 숫자가
     위아래로 쏠리지 않도록 함 */
  .hk-story__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 12px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1;
  }

  /* 제목: 기본 여백으로 인해 위아래로 밀리지 않도록 수직 중심축을 맞춤 */
  .hk-story__card h4 {
    margin: 0;
    line-height: 1.2;
  }
}

@media screen and (max-width: 430px) {
  .hk-hero__text h2 {
    font-size: 24px;
  }

  .hk-story__card {
    padding: 32px 26px;
  }
}