/*
  service-detail-installation.css — /service-detail/restaurant-sink-installation/ 전용
  좌측 고정(sticky) 스텝 사이드 네비 + 우측 스크롤 콘텐츠 레이아웃. 공통 토큰(tokens.css) 값만 사용.
*/

.svc-detail-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px){
  .svc-detail-layout{ grid-template-columns: 260px 1fr; gap: 48px; }
}

/* ===== 좌측 스텝 사이드 네비 ===== */
.svc-detail-nav{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-1); }
@media (min-width: 1024px){
  .svc-detail-nav{ position: sticky; top: 88px; }
}
.svc-detail-nav__title{ font-size: 13px; font-weight: 800; color: var(--ink-3); letter-spacing: .04em; margin: 0 0 12px; padding: 0 4px; }
.svc-detail-nav__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.svc-detail-nav__list a{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r);
  font-weight: 600; font-size: 14.5px; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent;
}
.svc-detail-nav__list a:hover{ color: var(--accent); background: var(--accent-soft); }
.svc-detail-nav__num{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; background: var(--mist); color: var(--ink-3);
  font-weight: 800; font-size: 12px;
}
.svc-detail-nav__list a:hover .svc-detail-nav__num{ background: var(--accent); color: var(--white); }

/* ===== 우측 콘텐츠 ===== */
.svc-detail-content{ display: grid; gap: 36px; min-width: 0; }
.svc-detail-step{ scroll-margin-top: 84px; border-bottom: 1px solid var(--line); padding-bottom: 32px; }
.svc-detail-step:last-child{ border-bottom: none; padding-bottom: 0; }
.svc-detail-step__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.svc-detail-step__num{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--white);
  font-weight: 800; font-size: 14px;
}
.svc-detail-step h3{ margin: 0; }

.svc-detail-figure{ margin: 18px 0 4px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.svc-detail-figure img{ width: 100%; height: auto; display: block; }
.svc-detail-figure figcaption{ padding: 10px 14px; font-size: 13px; color: var(--ink-3); background: var(--card); border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}