/*
  service-detail-cafe-sink.css — /service-detail/cafe-sink/ 전용
  디자인 #1: 사진 중심 split Hero (좌 텍스트 / 우 사진, 전체 화면 이미지 히어로 미사용).
  공통 토큰(tokens.css) 값만 사용.
*/

.split-hero{
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.split-hero__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 900px){
  .split-hero__grid{ grid-template-columns: 1.05fr 1fr; min-height: 62vh; }
}
.split-hero__text{
  padding: 56px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px){
  .split-hero__text{ padding: 0 48px 0 0; }
}
.split-hero__text h1{ color: var(--white); margin-bottom: 14px; }
.split-hero__text h2{ color: #E2E8F0; font-weight: 500; font-size: clamp(16px,2.4vw,20px); margin: 12px 0 24px; }
.split-hero__answer{ max-width: 520px; font-size: clamp(16px,2.2vw,19px); line-height: 1.7; color: #E2E8F0; margin-bottom: 24px; }
.split-hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.split-hero__cta .btn-ghost{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); color: var(--white); }
.split-hero__media{ position: relative; min-height: 280px; }
.split-hero__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px){
  .split-hero__text{ height: 33vh; min-height: 220px; padding: 24px 0 16px; overflow-y: auto; }
  .split-hero__media{ height: 66vh; min-height: 320px; }
}
@media (min-width: 900px){
  .split-hero__media::before{
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,0) 22%);
  }
}

/* ===== 환경 카드 (바 공간 / 컵세척 / 제빙기·정수기 동선 / 급배수) ===== */
.env-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px){ .env-grid{ grid-template-columns: repeat(4, 1fr); } }
.env-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px; box-shadow: var(--sh-1); }
.env-card__icon{ width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 12px; }
.env-card h3{ font-size: 16px; margin-bottom: 6px; }
.env-card p{ font-size: 14px; color: var(--ink-2); line-height: 1.6; }