/* ============================================================
   sj_banner_v3 스타일시트
   class prefix: sjb3-
   ============================================================ */

.sjb3-banner-wrap {position: relative; overflow: hidden; display: block; line-height: 0;}
.sjb3-banner-item {display: inline-block; vertical-align: top;}
.sjb3-banner-item a {display: block; line-height: 0;}
.sjb3-banner-item img {display: block; max-width: 100%; height: auto;}

.sjb3-slide-wrap {overflow: hidden;}
.sjb3-slide-track {position: relative; width: 100%;}
.sjb3-slide-item {display: none; width: 100%;}
.sjb3-slide-item.active {display: block;}
.sjb3-slide-item img {display: block; width: 100%; height: auto;}

.sjb3-btn {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.35); color: #fff; border: none; padding: 0; width: 36px; height: 36px; font-size: 22px; line-height: 36px; text-align: center; cursor: pointer; border-radius: 50%; z-index: 10; transition: background 0.2s;}
.sjb3-btn:hover {background: rgba(0, 0, 0, 0.6);}
.sjb3-btn-prev {left: 8px;}
.sjb3-btn-next {right: 8px;}

.sjb3-dots {position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10;}
.sjb3-dot {width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; transition: background 0.2s;}
.sjb3-dot.active {background: #fff;}

.sjb3-stats-table {width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px;}
.sjb3-stats-table th, .sjb3-stats-table td {border: 1px solid #ddd; padding: 8px 10px; text-align: center; vertical-align: middle;}
.sjb3-stats-table thead th {background: #f5f5f5; font-weight: bold; white-space: nowrap;}
.sjb3-stats-table tbody tr:hover {background: #fafafa;}
.sjb3-stats-table .ctr-col {color: #0066cc; font-weight: bold;}

.sjb3-mypage-wrap {padding: 20px 0;}
.sjb3-stat-cards {display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;}
.sjb3-stat-card {flex: 1; min-width: 140px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 18px 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06);}
.sjb3-stat-card .card-label {font-size: 12px; color: #888; margin-bottom: 6px;}
.sjb3-stat-card .card-value {font-size: 26px; font-weight: bold; color: #333;}
.sjb3-stat-card .card-value.ctr {color: #0066cc;}

@media (max-width: 768px) {
	.sjb3-btn {width: 28px; height: 28px; font-size: 16px; line-height: 28px;}
	.sjb3-stat-card .card-value {font-size: 20px;}
	.sjb3-stats-table {font-size: 11px;}
}

/* ============================================================
   [추가] 외부광고 wrapper — STEP 2
   ============================================================ */

/* 공통 외부광고 wrapper */
.sjb3-external-ad {display: block; line-height: normal; overflow: visible; overflow-x: hidden; max-width: 100%; text-align: center;}

/* 광고 유형별 개별 클래스 (필요 시 재정의 가능) */
.sjb3-ad-adsense   { /* Google AdSense — 별도 스타일 불필요, AdSense 자체 렌더링 */ }
.sjb3-ad-coupang   { /* 쿠팡 파트너스 */ }
.sjb3-ad-linkprice { /* 링크프라이스 */ }
.sjb3-ad-adpick { /* AdPick */ }
.sjb3-ad-adlix  { /* Adlix */ }
.sjb3-ad-targetad  { /* TargetAd */ }
.sjb3-ad-html   { /* HTML/기타 */ }


/* ============================================================
   [6차 마무리] 프론트 출력 스킨
   - single / multi / responsive / slide
   ============================================================ */
.sjb3-skin {box-sizing: border-box; max-width: 100%;}
.sjb3-skin *, .sjb3-skin *::before, .sjb3-skin *::after {box-sizing: border-box;}

.sjb3-skin .sjb3-banner-item, .sjb3-skin .sjb3-banner-item a, .sjb3-skin .sjb3-banner-item img {max-width: 100%;}

.sjb3-skin-single {display: block; width: 100%; overflow: hidden; line-height: 0; text-align: center;}
.sjb3-skin-single .sjb3-banner-item {display: block; width: 100%;}
.sjb3-skin-single img {display: inline-block; width: auto; max-width: 100%; height: auto;}

.sjb3-skin-responsive {display: block; width: 100%; overflow: hidden; line-height: 0; text-align: center;}
.sjb3-skin-responsive .sjb3-banner-item {display: block; width: 100%;}
.sjb3-skin-responsive img, .sjb3-skin-responsive iframe, .sjb3-skin-responsive ins {max-width: 100%;}
.sjb3-skin-responsive img {width: 100%; height: auto;}

.sjb3-skin-multi {--sjb3-cols: 3; display: grid; grid-template-columns: repeat(var(--sjb3-cols), minmax(0, 1fr)); gap: 10px; width: 100%; line-height: 0;}
.sjb3-skin-multi .sjb3-banner-item {display: block; width: 100%;}
.sjb3-skin-multi img {width: 100%; height: auto;}

.sjb3-skin-slide {width: 100%; max-width: 100%; line-height: 0;}
.sjb3-skin-slide .sjb3-slide-track, .sjb3-skin-slide .sjb3-slide-item, .sjb3-skin-slide .sjb3-banner-item, .sjb3-skin-slide .sjb3-banner-item a {width: 100%;}
.sjb3-skin-slide img {width: 100%; height: auto;}

@media (max-width: 768px) {
	.sjb3-skin-multi {--sjb3-cols: 2; gap: 8px;}
}
@media (max-width: 480px) {
	.sjb3-skin-multi {--sjb3-cols: 1; gap: 8px;}
}

/* ============================================================
   [6차 보정] 슬라이드/다중 출력 강제 안정화
   - CSS 누락/기존 inline-block 영향으로 슬라이드가 한 줄로 풀리는 현상 방지
   ============================================================ */
.sjb3-slide-wrap {position: relative; display: block; overflow: hidden; width: 100%; max-width: 100%;}
.sjb3-slide-wrap .sjb3-slide-track {position: relative; display: block; width: 100%; overflow: hidden;}
.sjb3-slide-wrap .sjb3-slide-item {display: none !important; width: 100%; max-width: 100%; float: none !important;}
.sjb3-slide-wrap .sjb3-slide-item.active {display: block !important;}
.sjb3-slide-wrap .sjb3-banner-item {display: block; width: 100%;}
.sjb3-slide-wrap img {display: block; width: 100%; max-width: 100%; height: auto;}
.sjb3-skin-multi .sjb3-banner-item {display: block !important;}

/* ============================================================
   [7차] Grid / Carousel / Display Effects
   ============================================================ */
.sjb3-skin-grid, .sjb3-skin-carousel {box-sizing: border-box; width: 100%; max-width: 100%;}
.sjb3-skin-grid *, .sjb3-skin-carousel * {box-sizing: border-box;}
.sjb3-skin-grid {display: grid; grid-template-columns: repeat(var(--sjb3-pc-cols, 3), minmax(0, 1fr)); gap: var(--sjb3-gap, 10px); line-height: 0;}
.sjb3-skin-grid .sjb3-banner-item, .sjb3-skin-grid .sjb3-banner-item a, .sjb3-skin-carousel .sjb3-banner-item, .sjb3-skin-carousel .sjb3-banner-item a {display: block; width: 100%;}
.sjb3-skin-grid img, .sjb3-skin-carousel img {display: block; width: 100%; max-width: 100%; height: auto;}
.sjb3-is-rounded .sjb3-banner-item, .sjb3-is-rounded .sjb3-banner-item a, .sjb3-is-rounded img, .sjb3-is-rounded iframe, .sjb3-is-rounded ins, .sjb3-is-rounded .sjb3-external-ad {border-radius: 10px; overflow: hidden;}
.sjb3-has-shadow .sjb3-banner-item, .sjb3-has-shadow .sjb3-external-ad {box-shadow: 0 6px 18px rgba(0,0,0,.12);}
.sjb3-effect-fade-up .sjb3-banner-item, .sjb3-effect-fade .sjb3-banner-item, .sjb3-effect-zoom .sjb3-banner-item, .sjb3-effect-smooth .sjb3-banner-item {transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;}
.sjb3-effect-fade .sjb3-banner-item:hover {opacity: .86;}
.sjb3-effect-fade-up .sjb3-banner-item:hover {transform: translateY(-3px);}
.sjb3-effect-zoom .sjb3-banner-item:hover img {transform: scale(1.035);}
.sjb3-effect-zoom img {transition: transform .28s ease;}
.sjb3-effect-smooth .sjb3-banner-item:hover {transform: translateY(-2px);}

.sjb3-skin-carousel {position: relative; overflow: hidden; line-height: 0; padding: 0 0;}
.sjb3-carousel-viewport {overflow: hidden; width: 100%;}
.sjb3-carousel-track {display: flex; gap: var(--sjb3-gap, 10px); width: 100%; will-change: transform; transition: transform var(--sjb3-duration, 450ms) ease;}
.sjb3-carousel-cell {flex: 0 0 calc((100% - (var(--sjb3-gap, 10px) * (var(--sjb3-pc-view, 4) - 1))) / var(--sjb3-pc-view, 4)); min-width: 0;}
.sjb3-carousel-btn {position: absolute; top: 50%; z-index: 5; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; background: rgba(0,0,0,.38); color: #fff; font-size: 24px; line-height: 30px; text-align: center; cursor: pointer;}
.sjb3-carousel-btn:hover {background: rgba(0,0,0,.58);}
.sjb3-carousel-prev {left: 8px;}
.sjb3-carousel-next {right: 8px;}
.sjb3-carousel-dots {display: flex; justify-content: center; gap: 5px; margin-top: 8px; line-height: 1;}
.sjb3-carousel-dot {width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #ccc; cursor: pointer;}
.sjb3-carousel-dot.active {background: #333;}

@media (max-width: 992px) {
	.sjb3-skin-grid {grid-template-columns: repeat(var(--sjb3-tablet-cols, 2), minmax(0, 1fr));}
	.sjb3-carousel-cell {flex-basis: calc((100% - (var(--sjb3-gap, 10px) * (var(--sjb3-tablet-view, 2) - 1))) / var(--sjb3-tablet-view, 2));}
}
@media (max-width: 640px) {
	.sjb3-skin-grid {grid-template-columns: repeat(var(--sjb3-mobile-cols, 1), minmax(0, 1fr)); padding: 0 15px;}
	.sjb3-carousel-cell {flex-basis: calc((100% - (var(--sjb3-gap, 10px) * (var(--sjb3-mobile-view, 1) - 1))) / var(--sjb3-mobile-view, 1));}
	.sjb3-carousel-btn {width: 28px; height: 28px; margin-top: -14px; font-size: 20px; line-height: 26px;}
}

/* ============================================================
   [8차 최소패치] zone 크기 적용 + 썸네일 출력 안정화
   - 관리자 광고존 크기 입력값이 실제 img width/height와 CSS에 반영됨
   - grid 300x300 / 400x400 정사각형 배너 안정화
   ============================================================ */
.sjb3-banner-wrap {max-width: 100%;}
.sjb3-banner-item img {max-width: 100%; image-rendering: auto;}
.sjb3-banner-item[style*="height"] a, .sjb3-slide-item a {width: 100%; height: 100%;}
.sjb3-banner-item[style*="height"] img, .sjb3-slide-item img[height] {width: 100%; height: 100%; object-fit: cover;}
.sjb3-skin-grid {justify-content: start; align-items: start;}
.sjb3-skin-grid .sjb3-banner-item {width: var(--sjb3-item-width, 100%); max-width: 100%;}
.sjb3-skin-grid .sjb3-banner-item a {width: 100%; height: auto;}
.sjb3-skin-grid .sjb3-banner-item img {width: 100%; height: var(--sjb3-item-height, auto); object-fit: cover;}
.sjb3-skin-grid .sjb3-external-ad, .sjb3-external-ad iframe, .sjb3-external-ad img {max-width: 100%;}


/* 배너 높이 조절 */
@media (max-width: 767px) {
	.sjb3-banner-item.sjb3-affiliate-ad.sjb3-ad-adpick {height: auto !important;}
	.sjb3-skin-grid.sjb3-effect-fade-up.sjb3-is-rounded {--sjb3-item-height: auto !important;}
}