.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:10px 18px;                 /* 12 → 10 */
  border:1px solid rgba(44,93,138,.20); /* 0.28 → 0.20 */
  border-radius:999px;
  background:rgba(44,93,138,.035);   /* 0.06 → 0.035 */

  font-size:16px;                    /* 18 → 16 */
  font-weight:600;                   /* 700 → 600 */
  line-height:1.45;
  color:rgba(44,93,138,.92);         /* 색감 부드럽게 */

  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;
    background:rgba(44,93,138,.03);
    border-color: rgba(44,93,138,.18);
  }

  /* 모바일에서는 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:"";
  }
}



/* ==========================================
   별매품: 좌우 AOS
========================================== */

/* wrapper는 block으로 (table-cell 안에서도 안정) */
.yh-opt-table .yh-opt-aoswrap{
  display:block;
  will-change: transform, opacity;
}

/* AOS가 opacity 0 상태로 남는 경우 예방 */
.yh-opt-table [data-aos]{
  opacity: 0;
}
.yh-opt-table [data-aos].aos-animate{
  opacity: 1;
}










/* ==========================================
   모바일: 특정 4열 옵션표(yh-opts4to2-target) → 2열 그리드
   - table 레이아웃 무력화(깨짐 방지)
   - 이미지 행만 2열로 배치
   - 기존 텍스트 행 숨김
   - JS가 삽입한 .yh-opt-cap(캡션) 표시
========================================== */
@media (max-width:768px){

  /* 테이블 레이아웃 무력화(깨짐 방지) */
  table.yh-opts4to2-target,
  table.yh-opts4to2-target tbody{
    display:block !important;
    width:100% !important;
  }

  /* 1행을 2열 그리드로 */
  table.yh-opts4to2-target tr:first-child{
    display:grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width:100% !important;
  }

  /* td는 그리드 아이템 */
  table.yh-opts4to2-target tr:first-child td{
    display:block !important;
    width:auto !important;
    padding:10px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    border:none !important;
  }

  /* 이미지 통일 */
  table.yh-opts4to2-target tr:first-child td img{
    width:100% !important;
    max-width:100% !important;
    height:120px !important;       /* 110~140 조절 */
    object-fit:contain !important;
    display:block !important;
    margin:0 auto !important;
  }

  /* 텍스트행은 모바일에서 숨김 */
  table.yh-opts4to2-target tr:nth-child(2){
    display:none !important;
  }

  /* 캡션(.yh-opt-cap) */
  table.yh-opts4to2-target tr:first-child td .yh-opt-cap{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    margin-top:8px;
    font-size:13px;
    font-weight:700;
    color:#555;
    line-height:1.35;
    text-align:center;

    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}







/* ===============================
   YH Product – grounded + floor (COUNT unified)
   - JS가 .yh-prod-count-1 / 2 / 3 를 stage에 부여
   - 3장 중앙 강조: .yh-prod-count-3 + .is-hero
   - Hover: 개별 샷만 미세 반응 (PC)
   - Mobile: 1 row horizontal scroll (안 잘리게 고정)
================================ */

/* -------------------------------
   PC Base
-------------------------------- */

/* stage */
.yh-prod-stage{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 22px;
  flex-wrap: wrap;
  position: relative;
}

/* shot (공통) */
.yh-prod-stage .yh-prod-shot{
  display:flex;
  align-items:flex-end;
  justify-content:center;

  flex: 0 1 520px;      /* 기본(1~2장) */
  min-width: 280px;

  position: relative;
  z-index: 1;
}

/* image (공통) */
.yh-prod-stage .yh-prod-shot img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:420px;
  display:block;

  /* ✅ 2겹 고급 그림자 */
  filter:
    drop-shadow(0 8px 12px rgba(0,0,0,.32))
    drop-shadow(0 22px 28px rgba(0,0,0,.18)) !important;

  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
  will-change: transform, filter;
}

/* hover: 개별 (PC에서만) */
@media (hover:hover) and (min-width:769px){
  .yh-prod-stage .yh-prod-shot:hover img{
    transform: translateY(-2px) scale(1.015);
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.16)) !important;
  }
}

/* -------------------------------
   COUNT: 1장 (PC)
-------------------------------- */
.yh-prod-stage.yh-prod-count-1 .yh-prod-shot{
  flex-basis: min(980px, 100%);
  min-width: 0;
}

/* -------------------------------
   COUNT: 2장 (PC)
-------------------------------- */
.yh-prod-stage.yh-prod-count-2{
  gap: 22px;
}
.yh-prod-stage.yh-prod-count-2 .yh-prod-shot{
  flex-basis: 520px;
}

/* -------------------------------
   COUNT: 3장 중앙 강조 (PC)
-------------------------------- */
.yh-prod-stage.yh-prod-count-3{
  gap: 18px;
}
.yh-prod-stage.yh-prod-count-3 .yh-prod-shot{
  flex-basis: 360px;  /* 좌우 */
  opacity: .92;
}
.yh-prod-stage.yh-prod-count-3 .yh-prod-shot.is-hero{
  flex-basis: 520px;  /* 중앙 메인 */
  opacity: 1;
}
.yh-prod-stage.yh-prod-count-3 .yh-prod-shot:not(.is-hero) img{
  transform: translateY(8px) scale(.96);
  opacity: .82;
  filter:
    drop-shadow(0 10px 16px rgba(0,0,0,.18))
    drop-shadow(0 26px 40px rgba(0,0,0,.12));
}

/* ✅ PC에서 3장 삼각형(줄바꿈) 방지 */
@media (min-width:769px){
  .yh-prod-stage.yh-prod-count-3{
    flex-wrap: nowrap;
    gap: 18px;
  }
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot{
    min-width: 0;
    flex: 0 1 340px;
  }
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot.is-hero{
    flex: 0 1 520px;
  }
}


/* ===============================
   Capsule ↔ Product rhythm fix
================================ */
.cont_area:has(.yh-splitbar){
  margin: 18px 0 22px !important;
}
.yh-splitbar{
  margin: 0 auto !important;
}
.yh-prod-stage{
  margin-top: 0 !important;
}


/* ===============================
   MOBILE (final)
   - 1장: 기존처럼 크게(스크롤/축소 적용 X)
   - 2~3장: 가로 1행으로 축소 적용
================================ */
@media (max-width:768px){

  /* ---------------------------
     1장: 예전처럼(크게) 유지
  --------------------------- */
  .yh-prod-stage.yh-prod-count-1{
    display:flex !important;
    flex-wrap: nowrap !important;
    justify-content:center !important;
    align-items:flex-end !important;

    overflow: visible !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .yh-prod-stage.yh-prod-count-1 .yh-prod-shot{
    flex: 0 1 100% !important;
    width: 100% !important;
    max-width: 520px !important;     /* ✅ 모바일 히어로 폭 */
    min-width: 0 !important;
    margin: 0 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
  }

  .yh-prod-stage.yh-prod-count-1 .yh-prod-shot img{
    width: auto !important;          /* ✅ 크롭 방지 핵심 */
    max-width: 100% !important;
    height: auto !important;
    max-height: 320px !important;    /* ✅ 1장만 크게 */
    object-fit: contain !important;
    display:block !important;

    /* 모바일 1장용 효과(조금 더 선명한 접지감) */
    filter:
      drop-shadow(0 10px 14px rgba(0,0,0,.26))
      drop-shadow(0 22px 26px rgba(0,0,0,.14)) !important;
  }


  /* ---------------------------
     2~3장: 가로 1열(축소) 적용
     (스크롤 없이 화면에 딱 맞춤)
  --------------------------- */
  .yh-prod-stage.yh-prod-count-2,
  .yh-prod-stage.yh-prod-count-3{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content:center !important;
    align-items:flex-end !important;

    overflow: hidden !important;     /* ✅ 스크롤 없음 */
    gap: 10px !important;
    padding: 6px 0 10px !important;
  }

  .yh-prod-stage.yh-prod-count-2 .yh-prod-shot,
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot{
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin: 0 !important;
  }

  /* ✅ 2장 = 2등분 */
  .yh-prod-stage.yh-prod-count-2 .yh-prod-shot{
    width: calc((100% - 10px) / 2) !important;
  }

  /* ✅ 3장 = 3등분 */
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot{
    width: calc((100% - 20px) / 3) !important;
  }

@media (max-width:768px){

  /* 모바일에서는 3장 중앙강조/보조 변형 제거 */
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot.is-hero,
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot:not(.is-hero) img{
    transform: none !important;
    opacity: 1 !important;
  }

  /* 🔹 2개일 때 */
  .yh-prod-stage.yh-prod-count-2 .yh-prod-shot img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 150px !important;
    object-fit: contain !important;
    display:block !important;

    filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)) !important;
  }

  /* 🔹 3개일 때 */
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 130px !important;
    object-fit: contain !important;
    display:block !important;

    filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)) !important;
  }

}

/* ===============================
   MOBILE shadow tune (2~3 only)
   - 1장은 그대로
   - 2장/3장만 퍼짐 줄이기
================================ */
@media (max-width:768px){

  /* ✅ 2장/3장: 퍼지는 2겹 그림자 제거 → 짧고 선명하게 */
  .yh-prod-stage.yh-prod-count-2 .yh-prod-shot img,
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot img{
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)) !important;
  }

  /* (선택) 2장/3장에서는 hover 변형도 과하면 끄기 */
  .yh-prod-stage.yh-prod-count-2 .yh-prod-shot:hover img,
  .yh-prod-stage.yh-prod-count-3 .yh-prod-shot:hover img{
    transform: none !important;
  }
}