/* 닷컴 메인. 다른 페이지와 겹치지 않게 home-·spa- 접두어만 쓴다. */
body { background-color: var(--coast-foam); }

/* 풀블리드 첫 화면 — 사진은 화면 전체, 그림자는 글자가 놓이는 왼쪽에만(오른쪽 바다·인물은 밝게 둔다).
   공통 헤더(site-shell, fixed)가 위에 겹친다. 사진은 장식이라 CSS 배경이다(대체 텍스트 없음). */
.home-hero {
  --home-width: min(1180px, calc(100% - 80px)); /* site-shell 헤더와 같은 폭 계약 */
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 720px; display: flex; align-items: center;
  padding: calc(var(--site-header-h, 84px) + 40px) 0 108px;
  color: #fff;
  background: url('../assets/about/about-hero.webp') center 46% / cover no-repeat;
}
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--coast-shade),.82) 0%, rgba(var(--coast-shade),.63) 37%, rgba(var(--coast-shade),.18) 66%, rgba(var(--coast-shade),.02) 100%);
}
.home-hero-in { width: var(--home-width); margin-inline: auto; animation: home-copy-enter .7s cubic-bezier(.2,.7,.2,1) both; }
.home-hero-in > * { max-width: min(650px, 48vw); }
.home-eyebrow { color: var(--coast-sea-soft); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; }
.home-hero h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(54px,5.3vw,80px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 24px; word-break: keep-all; }
.home-lead { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.88); max-width: 600px; margin-bottom: 30px; word-break: keep-all; }
.home-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.home-cta .pill-btn { min-height: 46px; padding: 0 23px; font-size: 14px; font-weight: 800; }
.home-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 25px; margin-top: 34px; font-size: 13px; color: rgba(255,255,255,.8); }
.home-proof b { color: #fff; }

/* 사진 아래 3칸 서비스 안내 — 첫 화면 아래 끝에 걸쳐 올라간다. */
.home-service {
  list-style: none; position: relative; z-index: 2;
  width: min(1180px, calc(100% - 80px)); margin: -46px auto 0;
  display: grid; grid-template-columns: repeat(3,1fr);
  background: #fff; border-radius: 20px; box-shadow: 0 18px 55px rgba(23,42,70,.09);
}
.home-service li { padding: 25px 28px; border-right: 1px solid var(--coast-line); }
.home-service li:last-child { border-right: 0; }
.home-service b { display: block; margin-bottom: 6px; color: var(--coast-ink); font-size: 16px; }
.home-service span { color: #708087; font-size: 13px; }

.home-section { width: min(1180px, calc(100% - 80px)); margin-inline: auto; padding: clamp(56px,8vw,96px) 0; scroll-margin-top: var(--site-header-h, 84px); }
.home-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 32px; }
.home-head h2, .home-final h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(28px,3.6vw,42px); line-height: 1.1; color: var(--coast-ink); }
.home-head p { color: var(--coast-muted); max-width: 460px; line-height: 1.55; word-break: keep-all; }
.spa-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px 28px; }
/* 전체 목록 카드 — 믿음을 쌓고 상세로 보내는 자리. 예약·지도 버튼은 상세에만 있다(카드 아래 줄은 시작가 + 상세 보기 하나). */
.spa-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dcd7cc; border-radius: 16px; overflow: hidden; }
.spa-card-media { position: relative; }
.spa-card-photo { display: block; aspect-ratio: 4/3; background-size: cover; }
.spa-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 22px 20px; }
.spa-card-kind { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5d6572; }
.spa-card h3 { font-size: 20px; font-weight: 600; color: #0B1018; }
.spa-card h3 a { color: inherit; text-decoration: none; }
.spa-card p { font-size: 14px; line-height: 1.5; block-size: 3em; color: #3b424d; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spa-card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eee; font-size: 14px; }
.spa-card-price { color: var(--coast-ink); white-space: nowrap; }
.spa-card-price b { font-size: 16px; }
.spa-card-detail { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--primary-navy); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.spa-card-detail::after { content: "→"; transition: transform .2s; }
.spa-card-detail:hover::after, .spa-card-detail:focus-visible::after { transform: translateX(3px); }
/* 할인 배지 — 실제 할인 값이 있을 때만, 사진 위 왼쪽 위에 작게 (2026-09-19 도입, 2026-09-30 사진 위로 이동) */
.spa-card-discount { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--coast-ink); font: 700 12px system-ui, sans-serif; box-shadow: 0 2px 8px rgba(23,42,70,.12); pointer-events: none; }
.spa-empty { color: #5d6572; }
.home-steps { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.home-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; counter-reset: step; padding: 0; }
.home-steps li { counter-increment: step; }
.home-steps li::before { content: "0" counter(step); display: block; font-family: Georgia, serif; font-size: 40px; color: #F29B38; margin-bottom: 8px; }
.home-steps li b { display: block; font-size: 18px; margin-bottom: 4px; }
.home-steps li span { color: #5d6572; font-size: 15px; }
.home-final { background: #172A46; color: #fff; text-align: center; padding: clamp(56px,8vw,96px) 16px; }
.home-final h2 { color: #fff; margin-bottom: 12px; }
.home-final p { opacity: .8; margin-bottom: 28px; }
.home-final .home-cta { justify-content: center; }
.home-final .home-other { margin: 20px 0 0; font-size: 14px; }
/* 대표 추천 3곳 — 전체 목록(#spas) 앞에서 먼저 고르게 한다. 업체 값은 spa-picks 카드 데이터. */
.home-picks { padding-top: 72px; padding-bottom: 24px; }
.home-pick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.home-pick { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 50px rgba(23,42,70,.09); }
.home-pick-photo { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--coast-line); }
.home-pick-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.home-pick-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.home-pick-tag { font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--coast-sea); }
.home-pick h3 { margin: 8px 0 7px; font: 600 22px/1.2 Georgia, "Times New Roman", serif; color: var(--coast-ink); }
.home-pick h3 a { color: inherit; }
.home-pick p { color: #667780; font-size: 14px; line-height: 1.5; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-pick-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--coast-line); font-size: 13px; color: var(--coast-muted); }
.home-pick-body p { margin-bottom: 18px; }
.home-pick-price { color: var(--coast-ink); white-space: nowrap; }
.home-pick-price b { font-size: 16px; color: var(--primary-navy); }

@keyframes home-copy-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  /* 모바일 전용 크롭 — 정사각 사진을 아래쪽에 두어 인물 얼굴이 글자 밑에 깔리지 않게 한다.
     위쪽은 사진 윗부분(창·바다) 위에 세로 그림자를 깔아 글자를 읽게 한다. */
  .home-hero { min-height: 720px; box-sizing: border-box; align-items: flex-start; padding: calc(var(--site-header-h, 64px) + 34px) 0 28px; background-position: 62% 100%; background-size: 160% auto; background-color: #d9ebe8; }
  .home-hero::before { background: linear-gradient(180deg, rgba(var(--coast-shade),.84) 0%, rgba(var(--coast-shade),.72) 55%, rgba(var(--coast-shade),.12) 80%, rgba(var(--coast-shade),0) 100%), linear-gradient(0deg, rgba(var(--coast-shade),.42), rgba(var(--coast-shade),0) 30%); }
  .home-hero-in { width: calc(100% - 36px); height: 100%; min-height: 530px; display: grid; grid-template-rows: auto auto auto minmax(100px, 1fr) auto; overflow: hidden; }
  .home-hero-in > * { max-width: none; }
  .home-hero h1 { font-size: 44px; }
  .home-lead { font-size: 16px; }
  .home-cta { flex-direction: column; align-items: stretch; align-self: end; min-width: 0; }
  .home-proof { display: grid; gap: 8px; margin-top: 26px; }
  .home-service { width: calc(100% - 36px); margin-top: -34px; grid-template-columns: 1fr; }
  .home-service li { border-right: 0; border-bottom: 1px solid var(--coast-line); padding: 18px 20px; }
  .home-service li:last-child { border-bottom: 0; }
  .home-section { width: calc(100% - 36px); }
  .home-head { display: block; }
  .home-head h2 { font-size: 34px; margin-bottom: 12px; }
  .home-picks { padding-top: 56px; }
  .home-pick-grid { grid-template-columns: 1fr; }
  .spa-grid { grid-template-columns: 1fr; gap: 24px; }
  .home-steps ol { grid-template-columns: 1fr; gap: 24px; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .home-pick-grid { grid-template-columns: repeat(2,1fr); }
  .spa-grid { grid-template-columns: repeat(2,1fr); gap: 28px 24px; }
  .home-hero-in > * { max-width: min(600px, 62vw); }
}
@media (prefers-reduced-motion: reduce) { .home-hero-in { animation: none; } .spa-card-detail::after { transition: none; } }