.yh-splitbar-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  margin:22px 0 16px;
}

.yh-splitbar{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;

  width:auto;
  max-width:none;

  padding:12px 18px;
  border:1px solid rgba(44,93,138,.28);
  border-radius:999px;
  background:rgba(44,93,138,.06);

  font-size:18px;
  font-weight:700;
  line-height:1.45;
  color:#2c5d8a;

  text-align:center;
  word-break:keep-all;
}

.yh-splitbar .yh-part{
  white-space:nowrap;
}

/* ✅ PC 기본: |를 '뒤'에 붙임 */
.yh-splitbar .yh-part:not(:last-child)::after{
  content:" | ";
  opacity:.45;
}

/* ===============================
   Mobile
   - 폭 제한
   - |를 '앞'에 붙임(줄 끝 | 문제 방지)
   - 단, 2개 항목이고 실제 2줄일 때만 | 제거 (JS 클래스)
================================ */
@media (max-width:768px){
  .yh-splitbar{
    max-width:88vw;
    padding:11px 14px;
    font-size:15px;
    font-weight:600;
    line-height:1.5;
    gap:4px 6px;
    row-gap:6px;
  }

  /* 모바일에서는 PC용 after(| 뒤) 숨김 */
  .yh-splitbar .yh-part:not(:last-child)::after{
    content:"";
  }

  /* 모바일 기본: |를 항목 앞에 표시 */
  .yh-splitbar .yh-part:not(:first-child)::before{
    content:" | ";
    opacity:.35;
  }

  /* ✅ 2개 항목 + 실제 2줄일 때만 | 제거 (JS가 yh-mobile-two-lines 붙임) */
  .yh-splitbar.yh-mobile-two-lines .yh-part:not(:first-child)::before{
    content:"";
  }
}




/* ==========================================
   액세서리 표(2열) - 모바일 정렬 고정
   - 이미지 높이 통일
   - 캡션 높이 통일(2줄)
========================================== */

.yh-access-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed; /* ✅ 2칸 폭 고정 */
}

.yh-access-table td{
  padding: 10px;
  text-align: center;
  vertical-align: top; /* ✅ 위 기준으로 정렬 */
}

/* ✅ 이미지 박스 높이 고정 */
.yh-access-table td img{
  width: 100%;
  height: 150px;           /* ✅ 핵심: 높이 통일 (140~180 조절) */
  object-fit: contain;     /* ✅ 장비/부품은 contain 추천 */
  display: block;
  margin: 0 auto;
}

/* ✅ 캡션 높이 통일(2줄) */
.yh-access-table td p{
  margin: 10px 0 0;
  font-size: 14px;
  color: #555;
  line-height: 1.45;
  min-height: 40px;        /* ✅ 2줄 높이 확보 */
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* ✅ 2줄로 통일 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 모바일에서 여백/높이 살짝 조정 */
@media (max-width:768px){
  .yh-access-table td{ padding: 8px; }
  .yh-access-table td img{ height: 140px; }  /* 모바일에서 약간 낮게 */
  .yh-access-table td p{ font-size: 13.5px; min-height: 38px; }
}

/* 모바일 2열: 이미지/캡션 완전 정렬 마감 */
@media (max-width:768px){
  .yh-access-table td{
    vertical-align: top;
    padding: 8px;
  }

  /* ✅ 이미지 박스 높이 조금만 더 통일 */
  .yh-access-table td img{
    height: 140px;              /* 140 → 150 (2행 균형 좋아짐) */
    object-fit: contain;
  }

  /* ✅ 캡션은 2줄 기준으로 라인 맞춤 */
  .yh-access-table td p{
    min-height: 44px;           /* 38 → 44 (라인 완전 고정) */
    line-height: 1.45;
  }
}