/* 홈 (Figma: 홈 / Component 49 pc·tablet·mo, home interaction) */

.h-wrap { width: 900px; margin: 0 auto; }
.h-sec { padding-top: 150px; }

.h-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.h-sub { font-size: 20px; font-weight: 500; line-height: normal; color: #707070; }
.h-head { display: grid; gap: 10px; }
.h-head--center { text-align: center; }

/* ── 1. 메인 배너 ── */
.h-slider { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.h-slider-view { width: 100%; height: 409px; border-radius: 20px; overflow: hidden; }
.slide-track { display: flex; height: 100%; transition: transform 800ms ease-out; }
.h-slide { flex: 0 0 100%; height: 100%; }
.h-slide img { width: 100%; height: 100%; object-fit: cover; }
.h-dots { display: flex; gap: 14.33px; }
.slide-dot { width: 9.116px; height: 9.116px; border-radius: 50%; background: #d9d9d9; transition: background-color 800ms ease-out; }
.slide-dot.is-active { background: #2e2e27; }

/* 메인 배너 (임시 제작: 사이트 사진 + 흰 글씨 + 흰 pill 버튼) */
.h-banner { position: relative; display: block; overflow: hidden; isolation: isolate; color: #fff; }
.h-banner-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease-out; }
.h-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16, 16, 16, 0.78) 0%, rgba(16, 16, 16, 0.5) 42%, rgba(16, 16, 16, 0) 72%); }
.h-banner--pos .h-banner-bg { object-position: 70% 50%; }
.h-banner--kitchen .h-banner-bg { object-position: 60% 50%; }
.h-banner--interior .h-banner-bg { object-position: 65% 50%; }
.h-banner-copy { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; }
.h-banner-tag { height: 28px; padding: 0 12px; border-radius: 14px; background: #3182f6; font-size: 14px; font-weight: 600; line-height: 28px; }
.h-banner-title { margin-top: 18px; font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: -0.5px; }
.h-banner-sub { margin-top: 14px; font-size: 17px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.h-banner-btn { margin-top: 28px; height: 44px; padding: 0 22px; border-radius: 44.514px; background: #fff; color: #000; font-size: 16px; font-weight: 600; line-height: 44px; transition: background-color 300ms ease-out, color 300ms ease-out; }
@media (hover: hover) and (min-width: 768px) {
  .h-banner:hover .h-banner-bg { transform: scale(1.05); }
  .h-banner:hover .h-banner-btn { background: #3182f6; color: #fff; }
}

/* ── 2. 업종 ── */
.h-biz-list { display: flex; gap: 20px; margin-top: 50px; }
.h-biz-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 210px;
  height: 250px;
  padding: 0 20px;
  border-radius: 20px;
  background: #f8fafc;
  text-align: center;
}
.h-biz-card strong { font-size: 20px; font-weight: 600; line-height: normal; }
.h-biz-card span { font-size: 15px; font-weight: 500; line-height: 1.5; color: rgba(0, 0, 0, 0.5); }

/* ── 3. 결제 / 5. 인테리어 카드 ── */
.h-pay .h-title, .h-interior .h-title, .h-mkt .h-title { margin-bottom: 50px; }
.h-pay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.h-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 440px;
  padding: 50px;
  border-radius: 20px;
  color: #fff;
}
.h-card-title { font-size: 25px; font-weight: 700; line-height: normal; }
.h-card-desc { font-size: 20px; font-weight: 500; line-height: 25px; }
.h-card-more { display: flex; align-items: center; height: 54px; font-size: 20px; font-weight: 500; line-height: 25px; }
.h-card--wide { height: 440px; }
.zoom-bg-pic { position: absolute; inset: 0; z-index: -1; }
.zoom-card > .zoom-bg-pic > .zoom-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out, filter 300ms ease-out;
}
@media (hover: hover) and (min-width: 768px) {
  .zoom-card:hover > .zoom-bg-pic > .zoom-bg { transform: scale(1.1); filter: brightness(0.88); }
}

/* ── 4. 장비 대여 ── */
.h-equip { margin-top: 150px; background: #f7f9fb; }
.h-equip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 699.2px;
  padding: 0 20px;
}
.h-equip-head { display: grid; gap: 10px; width: 332px; }
.h-equip-grid {
  --eq-u: 96.944px;
  display: grid;
  grid-template-columns: 171.255px 171.455px 171.255px;
  grid-template-rows: repeat(5, var(--eq-u)) 84.9px;
  column-gap: 12.018px;
}
.h-eq {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.006px;
  height: 181.87px;
  padding: 20.03px 24.036px 20.03px 24.837px;
  border-radius: 16.024px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.h-eq-bg, .h-eq-on { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.h-eq-on { opacity: 0; }
.h-eq-pic { flex: none; width: 120.179px; height: 96.143px; }
.h-eq strong { flex: 1 0 0; display: flex; align-items: center; font-size: 16.024px; font-weight: 600; line-height: normal; color: #000; }
.h-eq-more { flex: 1 0 0; display: flex; align-items: center; font-size: 10.415px; font-weight: 500; line-height: normal; color: rgba(0, 0, 0, 0.5); }
@media (hover: hover) and (min-width: 768px) {
  .h-eq:hover .h-eq-on { opacity: 1; }
  .h-eq:hover strong { color: #fff; }
  .h-eq:hover .h-eq-more { color: rgba(255, 255, 255, 0.5); }
}
.h-eq--food   { grid-area: 1 / 2 / 3; }
.h-eq--washer { grid-area: 3 / 2 / 5; }
.h-eq--cctv   { grid-area: 5 / 2 / 7; }
.h-eq--dish   { grid-area: 2 / 1 / 4; margin-top: 0.8px; }
.h-eq--rice   { grid-area: 4 / 1 / 6; margin-top: 0.8px; }
.h-eq--fryer  { grid-area: 2 / 3 / 4; }
.h-eq--robot  { grid-area: 4 / 3 / 6; margin-top: 0.8px; }
.h-eq--all { display: none; }

/* ── 6. 마케팅 ── */
.h-mkt-list { display: flex; gap: 20px; }
.h-mkt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 287px;
  height: 350px;
  padding: 50px;
  border-radius: 20px;
  color: #000;
}
.h-mkt-card:nth-child(2) { width: 286px; }
.h-mkt-card strong { font-size: 25px; font-weight: 700; line-height: normal; white-space: nowrap; }
.h-mkt-card span { font-size: 20px; font-weight: 500; line-height: 25px; white-space: nowrap; }
@media (hover: hover) and (min-width: 768px) {
  .zoom-card--plain:hover > .zoom-bg { filter: none; }
}

/* ── 7. 후기 ── */
.h-review .h-head { margin-bottom: 50px; }
/* 후기는 읽을 수 있게 로고(약 120px/s)의 절반 속도(약 60px/s)로 흐르고, 마우스를 올리면 멈춤 */
.h-review-view { --marquee-dur: 22s; }
@media (hover: hover) { .h-review-view:hover .marquee-track { animation-play-state: paused; } }
.h-review-track > .h-rv { margin-right: 15px; }
.h-rv {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 270px;
  padding: 20px 25px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  background: #f9fafb;
  color: #2e2e27;
}
.h-rv--w1 { width: 275px; }
.h-rv--w2 { width: 187px; }
.h-rv--w3 { width: 210px; }
.h-rv--img { background: none; color: #fff; }
.h-rv-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.h-rv-text { font-size: 20px; font-weight: 500; line-height: normal; }
.h-rv-text--strong { font-weight: 600; }
.h-rv-who { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; line-height: normal; white-space: nowrap; }
.h-rv-who img { width: 25px; height: 25px; -webkit-user-drag: none; }

/* ── 8. 로고 ── */
.h-logos { display: flex; flex-direction: column; gap: 15.7px; width: 1199px; max-width: 100%; margin: 150px auto; }
.h-logo-row { --marquee-dur: 10s; }
.h-logo { position: relative; flex: none; width: 123.693px; height: 41.231px; margin-right: 10.72px; overflow: hidden; }
.h-logo img { position: absolute; max-width: none; }

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .h-wrap { width: min(650px, 100% - 40px); }
  .h-sec { padding-top: 100px; }
  .h-title { font-size: 25px; }
  .h-sub { font-size: 18px; }

  .h-slider { gap: 20px; }
  .h-slider-view { height: 377px; }
  .h-dots { gap: 10.75px; }
  .h-banner-copy { left: 40px; }
  .h-banner-title { margin-top: 14px; font-size: 28px; }
  .h-banner-sub { font-size: 15px; }
  .h-banner-btn { margin-top: 22px; height: 40px; line-height: 40px; font-size: 15px; }
  .slide-dot { width: 6.837px; height: 6.837px; }

  .h-biz-list { gap: 14px; margin-top: 30px; }
  .h-biz-card { flex: 1; width: auto; height: 181px; }
  .h-biz-card strong { font-size: 15px; }
  .h-biz-card span { font-size: 13px; }

  .h-pay .h-title, .h-interior .h-title, .h-mkt .h-title { margin-bottom: 30px; }
  /* Figma 태블릿: 3줄 제목 상자 108px (결제는 세로 가운데, 인테리어는 위 정렬) + 인테리어 섹션 하단 여백 20px */
  .h-pay .h-title { padding: 9px 0; }
  .h-interior .h-title { padding-bottom: 18px; }
  .h-interior { padding-bottom: 20px; }
  .h-pay-grid { gap: 16px; }
  .h-pay .h-card { height: auto; aspect-ratio: 317 / 318; padding: 40px; }
  .h-card-title { font-size: 20px; }
  .h-card-desc { font-size: 15px; }
  .h-pay .h-card-more { font-size: 15px; }
  .h-card--wide { height: 350px; }

  .h-equip { margin-top: 100px; }
  .h-equip-inner { gap: 31px; height: 500px; }
  .h-equip-head { width: 236.5px; }
  .h-equip-grid {
    --eq-u: 69.057px;
    grid-template-columns: 121.991px 122.134px 121.991px;
    grid-template-rows: repeat(5, var(--eq-u)) 60.5px;
    column-gap: 8.561px;
  }
  .h-eq { gap: 2.854px; height: 129.553px; padding: 14.268px 17.122px 14.268px 17.692px; border-radius: 11.414px; }
  .h-eq-pic { width: 85.608px; height: 68.486px; }
  .h-eq strong { font-size: 12px; }
  .h-eq-more { font-size: 8px; }
  .h-eq--dish, .h-eq--rice, .h-eq--robot { margin-top: 0.57px; }

  .h-mkt-list { gap: 15px; }
  .h-mkt-card { width: 210px; height: 300px; }
  .h-mkt-card:nth-child(2) { width: 208px; }
  .h-mkt-card strong { font-size: 20px; }
  .h-mkt-card span { font-size: 15px; }

  .h-review .h-head { margin-bottom: 30px; }
  .h-review-view { --marquee-dur: 16.4s; }
  .h-review-track > .h-rv { margin-right: 11.296px; }
  .h-rv { height: 203.326px; padding: 15.061px 18.826px; border-radius: 7.531px; }
  .h-rv--w1 { width: 207.091px; }
  .h-rv--w2 { width: 140.822px; }
  .h-rv--w3 { width: 158.142px; }
  .h-rv-text { font-size: 15.061px; }
  .h-rv-who { gap: 9.037px; font-size: 12.049px; }
  .h-rv-who img { width: 18.826px; height: 18.826px; }

  .h-logos { gap: 0.2px; width: 100%; margin: 100px 0; }
  .h-logo { width: 93.879px; height: 31.293px; margin-right: 8.136px; }
  .h-logo-row { --marquee-dur: 7.6s; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .h-wrap { width: calc(100% - 55px); }
  .h-sec { padding-top: 50px; }
  .h-pay .h-title, .h-interior .h-title { padding: 0; }
  .h-interior { padding-bottom: 0; }
  .h-title { font-size: 20px; }
  .h-sub { font-size: 15px; }

  .h-slider-view { height: 377px; }
  .h-banner::before { background: linear-gradient(0deg, rgba(16, 16, 16, 0.85) 0%, rgba(16, 16, 16, 0.55) 45%, rgba(16, 16, 16, 0.05) 80%); }
  .h-banner-copy { left: 24px; right: 24px; top: auto; bottom: 26px; transform: none; }
  .h-banner-tag { height: 24px; padding: 0 10px; font-size: 12px; line-height: 24px; }
  .h-banner-title { margin-top: 10px; font-size: 22px; }
  .h-banner-sub { margin-top: 8px; font-size: 13px; }
  .h-banner-btn { margin-top: 16px; height: 36px; padding: 0 18px; line-height: 36px; font-size: 14px; }

  .h-biz-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; height: 374px; }
  .h-biz-card { height: auto; white-space: nowrap; }

  .h-pay-grid { grid-template-columns: 1fr; gap: 15px; }
  .h-pay .h-card { aspect-ratio: 1; }
  .h-card--wide { height: auto; aspect-ratio: 1; padding: 40px; }
  .h-interior .h-card-more { font-size: 15px; }

  .h-equip { margin-top: 50px; }
  .h-equip-inner { flex-direction: column; gap: 30px; height: auto; padding: 46px 0; }
  .h-equip-head { width: 320px; }
  .h-equip-head .h-sub { display: none; }
  .h-equip-grid {
    grid-template-columns: repeat(2, 154.576px);
    grid-template-rows: repeat(4, 164.16px);
    gap: 10.847px;
    width: 320px;
  }
  .h-equip-grid > .h-eq { grid-area: auto; margin-top: 0; height: auto; gap: 3.616px; padding: 18.079px 21.695px 18.079px 22.418px; border-radius: 14.463px; }
  .h-eq-pic { width: 108.475px; height: 86.78px; }
  .h-eq strong { font-size: 15px; }
  .h-eq-more { font-size: 12px; }
  .h-equip-grid > .h-eq--all { display: flex; justify-content: center; background: #f7f9fb; }
  .h-eq--all strong, .h-eq--all .h-eq-more { flex: none; height: 15.91px; }

  .h-mkt-list { flex-direction: column; gap: 15px; }
  .h-mkt-card, .h-mkt-card:nth-child(2) { width: 100%; height: 380px; }
  .h-mkt-card strong { font-size: 25px; }
  .h-mkt-card span { font-size: 20px; }

  .h-review-view { --marquee-dur: 13s; }
  .h-review-track > .h-rv { margin-right: 8.979px; }
  .h-rv { height: 161.628px; padding: 11.972px 14.966px; border-radius: 5.986px; }
  .h-rv--w1 { width: 164.622px; }
  .h-rv--w2 { width: 111.943px; }
  .h-rv--w3 { width: 125.711px; }
  .h-rv-text { font-size: 12px; }
  .h-rv-who { gap: 7.183px; font-size: 12px; }
  .h-rv-who img { width: 14.966px; height: 14.966px; }

  .h-logos { margin: 50px 0; }
}

/* 헤더 메뉴(/#biz, /#pay, /#marketing)로 이동할 때 고정 헤더에 가리지 않게 */
#biz, #pay, #marketing { scroll-margin-top: var(--hd-h); }