<div class="ad-preview">
  <div class="ad-preview__header">
    <h3 class="ad-preview__title">광고 미리보기 - 05. CATCH 인피드_가로형 14p 적용 예시</h3>
  </div>
  <div class="ad-preview__content">
    <div class="tab-content">
      <div class="tab-content__item is-active" data-tab-content="0">
        <!-- [미리보기 템플릿 복사 시작] 아래 ad-preview__item 요소를 복사하세요 -->
        <div class="ad-preview__item">
          <div class="ad-preview__frame">
            <div
              class="ad-preview__frame-item"
              style="
                width: 310px;
                height: 634px;
                background-image: url('/assets/images/media-frame/catch-horizontal-mo.png');
              "
            >
              <video
                controls
                class="frame-video"
                src="https://main-player-dev.sooplive.co.kr/v101/creatives/media/20251002/4574/4574.mp4"
                style="top: 213px; left: 12px; width: 286px; height: 163px"
              ></video>
              <div class="frame-meta" style="bottom: 105px; left: 23px">
                <div class="frame-badge">광고</div>
                <div
                  class="frame-text frame-text--white"
                  style="
                    width: 165px;
                    margin-top: 6px;
                    background-color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                    line-height: 14px;
                    text-align: center;
                  "
                >
                  일이삼사오육칠팔구십일이삼사오
                </div>
                <div
                  class="frame-button"
                  style="
                    width: 264px;
                    height: 32px;
                    margin-top: 15px;
                    border-radius: 5px;
                    background-color: #fff;
                    font-size: 16px;
                    line-height: 19px;
                  "
                >
                  일이삼사오
                </div>
              </div>
              <div class="frame-meta" style="bottom: 55px; left: 23px; width: 203px; height: 29px">
                <div
                  class="frame-thumbnail"
                  style="
                    width: 29px;
                    height: 29px;
                    border-radius: 50%;
                    background-image: url('https://img-display-dev.sooplive.co.kr/creatives/image/20250312/3497/3497.png');
                  "
                ></div>
                <div
                  class="frame-text frame-text--white frame-meta__info"
                  style="
                    top: 8px;
                    right: 0;
                    width: 165px;
                    background-color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                    line-height: 14px;
                    text-align: center;
                  "
                >
                  일이삼사오육칠팔구십
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- // [미리보기 템플릿 복사 끝] -->
      </div>
    </div>
  </div>
  <ul class="bullet-list">
    <li class="bullet-list__item">
      사용자의 디바이스 환경에 따라 실제 노출 결과가 다를 수 있습니다.
    </li>
    <li class="bullet-list__item">
      PC 이미지 소재의 경우, 미리보기 좌우 여백은 광고 노출 시 소재 배경색으로 제공합니다.
    </li>
    <li class="bullet-list__item">CTV는 미리보기를 제공하지 않습니다.</li>
  </ul>
</div>