/*
  service-detail-eatery-manufacturing.css — /service-detail/eatery-sink-manufacturing/ 전용
  업종별 탭 전환 컴포넌트(순수 CSS, radio 트릭. JS 불필요). 공통 토큰(tokens.css) 색상만 사용,
  새 값은 이 페이지 전용 클래스에만 적용.
*/

/* 히어로 위 브레드크럼 대비 보정 */
.hero .breadcrumb{ color: rgba(255,255,255,.72); margin-bottom: 16px; }
.hero .breadcrumb a{ color: rgba(255,255,255,.85); }
.hero .breadcrumb a:hover{ color: var(--white); }
.hero .breadcrumb .sep{ color: rgba(255,255,255,.5); }

/* ===== 업종별 탭 (순수 CSS radio 트릭) ===== */
.cuisine-tabs{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; position: relative; }
.cuisine-tabs__radio{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.cuisine-tabs__btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: var(--r-chip); border: 1.5px solid var(--line-2);
  background: var(--white); color: var(--ink-2); font-weight: 700; font-size: 15px;
  cursor: pointer; min-height: 44px; user-select: none; text-align: center;
}
.cuisine-tabs__radio:checked + .cuisine-tabs__btn{
  border-color: var(--accent); color: var(--white); background: var(--accent);
}
.cuisine-tabs__radio:focus-visible + .cuisine-tabs__btn{ outline: 3px solid var(--teal); outline-offset: 2px; }

.cuisine-tabs__panel{
  display: none; flex-basis: 100%; order: 10;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--sh-1); margin-top: 6px;
}
.cuisine-tabs__panel h3{ margin-bottom: 10px; }
.cuisine-tabs__panel p{ margin: 0; color: var(--ink-2); }

#tab-korean:checked ~ #panel-korean,
#tab-chinese:checked ~ #panel-chinese,
#tab-japanese:checked ~ #panel-japanese,
#tab-snack:checked ~ #panel-snack{ display: block; }

/* ===== 본문 단독 삽화 ===== */
.illus-row{ display: grid; gap: 20px; grid-template-columns: 1fr; margin: 28px 0; max-width: 520px; }
@media (min-width: 640px){ .illus-row{ grid-template-columns: repeat(2, 1fr); } }
.illus-figure{ margin: 0; }
.illus-figure img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); display: block; box-shadow: var(--sh-1); }
.illus-figure figcaption{ margin-top: 8px; font-size: 14px; color: var(--ink-3); text-align: center; }