/*
  restaurant-kitchen-sink-install.css — /service/restaurant-kitchen-sink-install/ 전용
  인포그래픽 단계형 디자인(설치 당일 진행 순서 시각화). tokens.css/header-footer.css/main.css 다음에 로드.
  공통 토큰 색상(navy #1E293B, accent #0284C7, teal #0D9488)만 사용, 새 값은 아래 전용 클래스에만 적용.
*/

.breadcrumb-bar{ padding-block: 14px; border-bottom: 1px solid var(--line); }

/* ===== 설치 단계 인포그래픽 ===== */
.install-flow{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .install-flow{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .install-flow{ grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
}

.install-step{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: var(--sh-1);
}
.install-step__head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.install-step__num{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.install-step__icon{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.install-step__icon svg{ width: 24px; height: 24px; }
.install-step h3{ margin: 0 0 8px; font-size: 17px; }
.install-step p{ margin: 0; font-size: 14.5px; color: var(--ink-2); }
.install-step__time{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: var(--r-chip);
  background: var(--teal-soft);
  color: #0F6D63;
  font-size: 12.5px;
  font-weight: 700;
}

/* 데스크톱에서 카드 사이 진행 화살표(연결선) */
@media (min-width: 1024px){
  .install-step:not(:nth-child(3n))::after{
    content: "";
    position: absolute;
    top: 34px;
    right: -22px;
    width: 20px; height: 2px;
    background: var(--line-2);
  }
  .install-step:not(:nth-child(3n))::before{
    content: "";
    position: absolute;
    top: 30px;
    right: -24px;
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--line-2);
  }
}

@media (prefers-reduced-motion: reduce){
  .install-step{ transition: none; }
}