/*
  custom-sink.css — 싱크대맞춤제작(/custom-sink/) 전용 스타일.
  치수·동선 중심의 설계형 톤: 점선 테두리, 치수선 스타일 라벨, 각진 넘버링을 은은하게 적용.
  tokens.css의 색상 변수는 재정의하지 않으며, 이 페이지 전용 클래스만 추가한다.
*/

/* 브레드크럼 상단 여백 */
.breadcrumb-bar{ padding-block: 16px 2px; }

/* 히어로 배지 - 도면 라벨 느낌 */
.hero__badge--plan{ border-style: dashed; letter-spacing: .07em; }

/* 치수 칩 스트립(도면 치수선 느낌) */
.dim-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.dim-chip{
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px dashed var(--line-2); border-radius: 3px;
  background: var(--mist); color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.dim-chip::before, .dim-chip::after{ content: ""; flex: none; width: 1px; height: 11px; background: var(--accent); opacity: .5; }

/* 은은한 도면 그리드 배경 섹션 */
.section--blueprint{ position: relative; background-color: var(--paper); }
.section--blueprint::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(180deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .5;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
  pointer-events: none;
}
.section--blueprint .container{ position: relative; z-index: 1; }

/* 각진 넘버링 스텝(실측→설계→제작→설치) */
.plan-steps .step__num{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 26px; padding: 0 9px; margin-bottom: 10px;
  border: 1.5px dashed var(--amber); border-radius: 2px;
  background: var(--amber-soft); color: var(--amber-deep);
}

/* 섹션 사이 치수선 스타일 구분자 */
.plan-divider{ display: flex; align-items: center; gap: 10px; margin: -6px 0 26px; color: var(--ink-3); font-size: 12px; letter-spacing: .08em; }
.plan-divider::before, .plan-divider::after{ content: ""; flex: 1; height: 0; border-top: 1px dashed var(--line-2); }

/* 주의사항 카드(점선 테두리) */
.notice-card{ border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); padding: 22px 24px; background: var(--mist); }
.notice-card h3{ margin-bottom: 10px; }
.notice-card ul{ margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }

/* 표 하단 보조 라벨(치수선 스타일) */
.spec-note{ display: block; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); border-top: 1px dashed var(--line-2); padding-top: 10px; }

/* 전문 설명 소제목 앞 각진 태그 */
.plan-tag{
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-right: 8px;
  border: 1px dashed var(--accent); border-radius: 2px; color: var(--accent-deep);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; vertical-align: middle;
}