.okgs-clean-description img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-Tabs-panel .okgs-clean-description img,
.wd-single-content .okgs-clean-description img,
.entry-content .okgs-clean-description img,
.woocommerce-product-details__short-description .okgs-clean-description img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/*
 * 동영상 표시 정책 — 작업지시서 §10-12 (2026-07-27, 전체 상품 공통).
 * sourceType으로 분리한다: 공통 video{width:100%} 하나로 두 종류를 묶지 않는다.
 *
 * - gallery-shortclip: 세로형 짧은 영상. 상세이미지 전체 폭으로 확대하지 않고
 *   최대 480~520px, 가운데 정렬, 높이는 viewport 기준으로 제한.
 * - body-se-video: wrapper 폭 = 전체 폭 상세이미지. 영상 자체는 비율을 유지한 채
 *   최대 높이만 제한하고 남는 공간은 검은 여백(letterbox).
 */
.okgs-clean-description .okgs-description-video {
  display: block;
  margin: 24px auto;
  /* 등록기가 삽입하는 인라인 aspect-ratio(원본 비율 계산용, style="aspect-ratio:W/H")는
     아래 max-height 정책과 충돌해 컨테이너 높이가 실제 영상보다 커지는 빈 공간을
     만들 수 있다. 컨테이너 높이는 항상 내부 video/thumbnail 콘텐츠 크기를 그대로
     따르도록 auto로 되돌린다 — 영상 자체의 비율(object-fit: contain)은 그대로 유지됨. */
  aspect-ratio: auto !important;
}

.okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] {
  width: 100%;
  max-width: 520px;
}

.okgs-clean-description .okgs-description-video[data-source-type="body-se-video"] {
  display: flex;
  width: 100%;
  max-width: none;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

/* sourceType 메타가 없는 과거 데이터(하위호환) — 기존처럼 전체 폭으로 표시. */
.okgs-clean-description .okgs-description-video:not([data-source-type]) {
  width: 100%;
  max-width: none;
}

.okgs-clean-description .okgs-description-video__play {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.okgs-clean-description .okgs-description-video__player {
  width: 100%;
  max-width: 100%;
}

.okgs-clean-description .okgs-description-video__player video,
.okgs-clean-description .okgs-description-video__play video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  background: #000;
}

.okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] .okgs-description-video__player video,
.okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] .okgs-description-video__play video,
.okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] .okgs-description-video__thumbnail {
  max-height: 80vh;
}

.okgs-clean-description .okgs-description-video[data-source-type="body-se-video"] .okgs-description-video__player video,
.okgs-clean-description .okgs-description-video[data-source-type="body-se-video"] .okgs-description-video__play video,
.okgs-clean-description .okgs-description-video[data-source-type="body-se-video"] .okgs-description-video__thumbnail {
  max-height: min(70vh, 720px);
}

.okgs-clean-description .okgs-description-video__thumbnail {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  /* video와 동일하게 max-height 적용 시에도 비율 왜곡 없이 letterbox 처리 (§10-11). */
  object-fit: contain;
}

@media (max-width: 767px) {
  .okgs-clean-description .okgs-description-video {
    margin: 16px auto;
  }

  .okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] {
    max-width: 100%;
  }

  .okgs-clean-description .okgs-description-video__player video,
  .okgs-clean-description .okgs-description-video__play video {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] .okgs-description-video__player video,
  .okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] .okgs-description-video__play video,
  .okgs-clean-description .okgs-description-video[data-source-type="gallery-shortclip"] .okgs-description-video__thumbnail {
    max-height: 80vh;
  }
}

/*
 * MOBILE_PRODUCT_DESCRIPTION_TRUE_FULL_BLEED_PHASE_01B
 * v1.1.10 FAIL 원인: breakout 5px만 적용(의도적 10px gap) + .wd-single-content #F6F5F8 카드 배경이
 * 이미지 좌우에 회색 띠로 노출됨.
 * ≤767.98px: .okgs-clean-description→viewport 누적 inset 15px(.vc_column-inner) 전량 상쇄 → gap 0px.
 * 768–991.98px: 태블릿 완화(gap 12px). PC(≥992px): 변경 없음.
 */
@media (max-width: 991.98px) {
  .wpb_column:has(.okgs-clean-description) > .vc_column-inner,
  .wpb_column:has(.okgs-clean-description) .wpb_wrapper,
  .wd-single-content:has(.okgs-clean-description) {
    overflow: visible;
  }

  .wd-single-content:has(.okgs-clean-description) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .wd-single-content:has(.okgs-clean-description) .okgs-clean-description {
    --okgs-media-breakout: 15px;
  }

  .okgs-clean-description > p:has(> img),
  .okgs-clean-description > .okgs-description-video {
    box-sizing: border-box;
    width: calc(100% + (2 * var(--okgs-media-breakout))) !important;
    max-width: none;
    margin-left: calc(-1 * var(--okgs-media-breakout)) !important;
    margin-right: calc(-1 * var(--okgs-media-breakout)) !important;
  }

  .okgs-clean-description > p:has(> img) {
    padding: 0;
  }

  .okgs-clean-description > p:has(> img) > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .okgs-clean-description > .okgs-description-video[data-source-type="gallery-shortclip"] {
    max-width: calc(100% + (2 * var(--okgs-media-breakout))) !important;
    background: #000;
  }

  .okgs-clean-description > .okgs-description-video {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  .okgs-clean-description > .okgs-description-video:first-child {
    margin-top: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .wd-single-content:has(.okgs-clean-description) .okgs-clean-description {
    --okgs-media-breakout: 3px;
  }

  .okgs-clean-description > p:has(> img),
  .okgs-clean-description > .okgs-description-video {
    box-sizing: border-box;
    width: calc(100% + (2 * var(--okgs-media-breakout))) !important;
    max-width: none;
    margin-left: calc(-1 * var(--okgs-media-breakout)) !important;
    margin-right: calc(-1 * var(--okgs-media-breakout)) !important;
  }

  .okgs-clean-description > p:has(> img) {
    padding: 0;
  }

  .okgs-clean-description > p:has(> img) > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .okgs-clean-description > .okgs-description-video[data-source-type="gallery-shortclip"] {
    max-width: calc(100% + (2 * var(--okgs-media-breakout))) !important;
  }
}