/*
  restaurant-sink-making.css — 식당싱크대제작 페이지 전용
  지그재그 스플릿(좌우 교차) 레이아웃. 공통 토큰(tokens.css)의 색상값만 사용, 재정의하지 않음.
*/

/* ===== 인트로 ===== */
.rsm-intro{ padding-block: 48px 8px; }
@media (min-width: 768px){ .rsm-intro{ padding-block: 72px 8px; } }
.rsm-intro__answer{ max-width: 760px; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.75; color: var(--ink-2); margin-top: 14px; }

/* ===== 스플릿(지그재그) 섹션 ===== */
.split-section{ padding-block: 44px; border-top: 1px solid var(--line); }
@media (min-width: 768px){ .split-section{ padding-block: 72px; } }
.split-section--mist{ background: var(--mist); }

.split-wrap{ display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 900px){
  .split-wrap{ grid-template-columns: 1fr 1fr; gap: 56px; }
}

.split-media{ order: 1; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); position: relative; }
.split-media img{ width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.split-media__step{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 800; font-size: 17px;
  box-shadow: var(--sh-2);
}

.split-body{ order: 2; }
.split-body .eyebrow{ margin-bottom: 10px; }
.split-body h2{ margin-bottom: 14px; }
.split-body p{ color: var(--ink-2); }
.split-body__accent{ display: block; width: 46px; height: 4px; border-radius: 999px; background: var(--teal); margin-bottom: 16px; }

@media (min-width: 900px){
  .split-section--reverse .split-media{ order: 2; }
  .split-section--reverse .split-body{ order: 1; }
}

/* ===== 공정 표 보조 ===== */
.rsm-table-section h2{ margin-bottom: 8px; }

/* ===== 관련페이지 링크 카드 ===== */
.rsm-related{ display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .rsm-related{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .rsm-related{ grid-template-columns: repeat(3, 1fr); } }
.rsm-related a{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 20px; border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px;
  box-shadow: var(--sh-1);
}
.rsm-related a:hover{ border-color: var(--accent); color: var(--accent); }
.rsm-related a::after{ content: ""; flex: none; width: 9px; height: 9px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }