/*
  sink-install.css — "업소용싱크대설치" 상세페이지 전용.
  다른 상세페이지와 달리 시공 프로세스(단계번호·타임라인)를 페이지 전반의 핵심 시각 요소로 사용한다.
  tokens.css 색상 변수는 재정의하지 않고 이 페이지 전용 클래스만 추가한다.
*/

/* ===== 브레드크럼 바 ===== */
.si-crumb-bar{ padding-block: 18px 0; }

/* ===== 히어로: 프로세스 강조용 배지 ===== */
.hero--install{ min-height: 50vh; }
@media (min-width: 768px){ .hero--install{ min-height: 58vh; } }

/* ===== 히어로 바로 아래 미니 타임라인(요약 단계 스트립) ===== */
.si-timeline-strip{ padding-block: 28px 0; border-top: none; }
.si-timeline{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  counter-reset: si-step;
}
@media (min-width: 768px){ .si-timeline{ grid-template-columns: repeat(5, 1fr); gap: 0; } }
.si-timeline__item{
  position: relative; counter-increment: si-step;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 14px; text-align: center;
}
@media (min-width: 768px){
  .si-timeline__item{ background: transparent; border: none; border-radius: 0; padding: 8px 10px 0; border-top: 3px solid var(--amber); }
  .si-timeline__item + .si-timeline__item{ border-left: 1px solid var(--line); }
}
.si-timeline__item::before{
  content: counter(si-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--white); font-weight: 800; font-size: 14px;
  margin-bottom: 8px;
}
.si-timeline__item span{ display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* ===== 시공 과정 핵심 섹션: 세로 타임라인(모바일) / 가로 타임라인(데스크톱) ===== */
.si-process{ position: relative; }
.si-steps{
  display: grid; grid-template-columns: 1fr; gap: 0;
  position: relative;
  counter-reset: si-process-step;
}
.si-steps::before{
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px;
  background: var(--line-2); z-index: 0;
}
@media (min-width: 900px){
  .si-steps{ grid-template-columns: repeat(5, 1fr); }
  .si-steps::before{ left: 0; right: 0; top: 19px; bottom: auto; height: 2px; width: auto; }
}
.si-step{
  position: relative; z-index: 1; counter-increment: si-process-step;
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 0 0 32px;
}
.si-step:last-child{ padding-bottom: 0; }
@media (min-width: 900px){
  .si-step{ grid-template-columns: 1fr; gap: 0; padding: 0 14px; text-align: center; }
}
.si-step__num{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 0 0 4px var(--paper);
}
@media (min-width: 900px){ .si-step__num{ margin: 0 auto 16px; } }
.si-step__body{ padding-top: 4px; }
@media (min-width: 900px){ .si-step__body{ padding-top: 0; } }
.si-step h3{ margin-bottom: 6px; font-size: 16.5px; }
.si-step p{ font-size: 14.5px; color: var(--ink-2); margin: 0; }
.si-step__time{
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px;
}

/* ===== 설치 당일 주의사항 카드 ===== */
.si-notice{
  background: var(--amber-soft); border: 1px solid #FDE68A; border-radius: var(--r-lg);
  padding: 24px 26px;
}
.si-notice h2{ color: var(--ink); margin-bottom: 12px; }
.si-notice ul{ margin: 0; padding-left: 20px; color: var(--ink-2); }
.si-notice li{ margin-bottom: 8px; }
.si-notice li:last-child{ margin-bottom: 0; }