/* ══════════════════════════════════════════════════════
   banner.css – 고정 배너 광고 (단독 / 슬라이드 / 타자)
   여수포털뉴스 v2.3
   수정일: 2026-05-02
   변경: v2.3 – 원칙8 완전 적용: 모든 플레이스홀더(.ad-placeholder 기본 포함)
               height:0·min-height:0·padding:0·overflow:hidden 일괄 적용
               대상: horizontal / vertical / side_left·right / in_content
                     square_300·200·120 / top·bottom·sub (사용자 지시)
         v2.2 – 원칙8 적용: 모든 배너 플레이스홀더 투명배경·테두리제거·비표시
         v2.1 – 배너 플레이스홀더 실제 규격 비율 반영
     · top/bottom: 1200×90, height 고정
     · sub: 728×90, max-width 728px 중앙정렬
     · square_300: 300×250, square_200: 200×200, square_120: 120×240
     · side_left/right: 120×600 스카이스크래퍼

   레이아웃 원칙 (단일 진실 원천 정책):
   ▸ sector-wrap    : 뷰포트 전체 너비 (배경색 좌우 끝까지)
   ▸ sector-main    : DB desktop_width 기준 중앙정렬 (layout.php 동적 주입)
   ▸ s1/s4/s6 배너  : sector-main max-width 해제 → 뷰포트 전체폭 (layout.php)
   ▸ fb-banner-wrap : width:100% — 부모 기준 전체 채움
   ▸ fb-banner-img  : width:100%, height:auto — 비율 유지 자동 조절
   ▸ min-height     : layout.php 에서 sector_config.slot_config.ad_size 기반 동적 주입
   ▸ 인라인 크기    : override 명시 시만 PHP 에서 인라인 style 출력
══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   공통 배너 래퍼
   ▸ sector-main(1200px) 안에서 width:100% 채움
   ▸ 섹터 배경색은 sector-wrap이 모니터 전체에 적용
────────────────────────────────────────────── */
.fb-banner-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: transparent;
  /* line-height:0 제거 — fb-text-banner 텍스트 높이 수축 방지 */
  box-sizing: border-box;
  /* 정렬 컨텍스트: 자식 fb-banner-link 가 flex 일 때 100% 높이 전달 */
  display: flex;
  flex-direction: column;
}

/* 배너 공통 링크
   ── PHP(_renderSingleBannerItem)가 인라인 style="display:flex;justify-content:…;align-items:…;" 를 주입.
      기본값은 flex 로 두되, PHP 인라인 style이 항상 우선 적용됩니다.
      (display:block 고정이면 인라인 flex가 덮어써지지 않음 → 정렬 깨짐)
*/
.fb-banner-link {
  display: flex;            /* PHP 인라인 style과 동일 기본값 */
  justify-content: center;  /* 기본: 가운데 — PHP 인라인이 덮어씀 */
  align-items: center;      /* 기본: 중간 — PHP 인라인이 덮어씀 */
  width: 100%;
  min-height: inherit;      /* 부모 fb-banner-wrap의 min-height 상속 */
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.fb-banner-link:hover { opacity: .92; transition: opacity .2s; }

/* ──────────────────────────────────────────────
   이미지 배너 – 자동 크기 조절
   ▸ width:100%, height:auto → 비율 유지 자동 조절
────────────────────────────────────────────── */
.fb-banner-img {
  display: block;
  width: 100%;      /* 부모 기준 100% — max-width 는 상위 .fb-banner-wrap 이 제어 */
  height: auto;     /* 비율 유지 자동 조절 */
  /* max-height: layout.php 에서 sector_config 기반으로 CSS 주입 (하드코딩 제거) */
  object-fit: cover;
}

/* ──────────────────────────────────────────────
   텍스트·배경색형 배너
   ▸ 정렬(justify-content/align-items)은 부모 .fb-banner-link 가 담당.
     → PHP _renderSingleBannerItem() 이 fb-banner-link 에 인라인 style 주입.
     → fb-text-banner 는 flex:1 로 부모 높이를 채우고 배경/색상만 담당.
   ▸ 텍스트 text-align 은 PHP 인라인 style(text-align:left/center/right) 로 주입.
────────────────────────────────────────────── */
.fb-text-banner {
  /* 부모 fb-banner-link(display:flex)가 수직·수평 중앙 정렬 담당 */
  display: flex;
  align-items: center;
  justify-content: center;  /* PHP 인라인 text-align 보완 */
  width: 100%;
  flex: 1;                  /* 부모 flex 컨테이너의 높이 100% 채움 */
  padding: 0 32px;
  box-sizing: border-box;
  line-height: 1.4;
  text-align: center;       /* PHP 인라인 style이 덮어쓰므로 기본값만 */
}
.fb-text-banner span {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: inherit;      /* 부모 text-align 상속 */
}

/* ──────────────────────────────────────────────
   슬라이드형 (slide)
────────────────────────────────────────────── */
.fb-slide-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.fb-slide-track {
  display: flex;
  width: 100%;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.fb-slide-item {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

/* 슬라이드 인디케이터 */
.fb-slide-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
.fb-slide-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .3s;
  border: none; padding: 0;
}
.fb-slide-dot.active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* 이전/다음 화살표 */
.fb-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: rgba(0,0,0,.35);
  border: none; border-radius: 50%;
  color: #fff; font-size: 14px; /* 원칙3: 12px→14px */
  cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  opacity: 0;
}
.fb-slide-wrap:hover .fb-slide-arrow { opacity: 1; }
.fb-slide-arrow:hover { background: rgba(0,0,0,.6); }
.fb-slide-arrow.prev { left: 16px; }
.fb-slide-arrow.next { right: 16px; }

/* 슬라이드 카운터 */
.fb-slide-counter {
  position: absolute;
  top: 8px; right: 16px;
  background: rgba(0,0,0,.45);
  color: #fff; font-size: 12px; font-weight: 700; /* 원칙3 예외: 배지형 카운터 12px */
  padding: 2px 8px; border-radius: 10px;
  z-index: 10; line-height: 1.6;
}

/* ──────────────────────────────────────────────
   타자형 (typing)
────────────────────────────────────────────── */
.fb-typing-wrap {
  display: flex;
  align-items: center;      /* CSS 기본값; PHP 인라인 style이 덮어씀 */
  justify-content: center;  /* CSS 기본값; PHP 인라인 style이 덮어씀 */
  width: 100%;
  flex: 1;                  /* 부모 fb-banner-link의 높이 100% 채움 */
  /* min-height: PHP 인라인 style로 주입 (image_height 기반) */
  padding: 0 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.fb-typing-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 900px;
}

/* 커서 깜빡임 */
.fb-typing-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: middle;
  animation: fb-blink .75s step-end infinite;
}
@keyframes fb-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.fb-typing-text.fade-out {
  animation: fb-fadeout .4s ease forwards;
}
@keyframes fb-fadeout {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
.fb-typing-text.fade-in {
  animation: fb-fadein .4s ease forwards;
}
@keyframes fb-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────
   HTML형 배너
────────────────────────────────────────────── */
.fb-html-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  overflow: hidden;
}
.fb-html-banner > * { max-width: 100%; }

/* ──────────────────────────────────────────────
   섹터별 최소 높이
   ▸ 하드코딩 제거 → PHP layout.php에서 sector_config.slot_config / min_height를
     읽어 동적으로 CSS 변수 주입 (단일 진실 원천)
────────────────────────────────────────────── */
/* 섹터별 min-height는 PHP includes/layout.php의 echoPortalCssVars()에서
   sector_config.slot_config.ad_size 또는 min_height 기반으로 동적 생성 */

/* 사이드 배너: min-height는 portal.php inline style(image_height 기반)에 위임 */
.fb-pos-side_left  .fb-banner-wrap,
.fb-pos-side_right .fb-banner-wrap { /* min-height: 배너 설정 image_height 기반 동적 주입 */ }

/* ──────────────────────────────────────────────
   반응형 (모바일)
   ! 인라인 style="max-height:Npx" 를 CSS로 완전 오버라이드
────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fb-slide-arrow { display: none; }
  .fb-text-banner,
  .fb-typing-wrap {
    padding: 0 16px;
    font-size: 14px !important; /* 원칙3: 13px→14px */
  }

  /* ── 배너 이미지 모바일 반응형 ──
   * 이미지가 화면 폭을 초과하지 않도록 100% 제한
   * max-height는 layout.php 동적 CSS값의 60%(모바일 비율) 적용 */
  .fb-banner-img {
    width: 100% !important;
    max-width: 100% !important;
    /* max-height: layout.php 동적 주입값 사용 (하드코딩 제거)
       폴백: object-fit:contain으로 비율 유지 */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 전체폭 배너 이미지: 모바일 최대 높이 = 뷰포트 20% (동적 비율)
     - layout.php에서 주입된 max-height보다 작은 경우에만 동작 */
  .fb-pos-top .fb-banner-img,
  .s1 .fb-banner-img  { max-height: 20vh !important; }

  .fb-pos-sub .fb-banner-img,
  .s4 .fb-banner-img  { max-height: 15vh !important; }

  .fb-pos-bottom .fb-banner-img,
  .s6 .fb-banner-img  { max-height: 15vh !important; }

  /* 사이드 배너는 모바일에서 완전 숨김 */
  .fb-pos-side_left,
  .fb-pos-side_right {
    display: none !important;
  }

  .fb-text-banner span,
  .fb-typing-text { max-width: 100%; }
}

/* ── 600px 이하: 배너 추가 축소 ── */
@media (max-width: 600px) {
  .fb-pos-top .fb-banner-img,
  .s1 .fb-banner-img  { max-height: 15vh !important; }
  .fb-pos-sub .fb-banner-img,
  .s4 .fb-banner-img,
  .fb-pos-bottom .fb-banner-img,
  .s6 .fb-banner-img  { max-height: 12vh !important; }
}

/* ═══════════════════════════════════════════════════════
   광고 위치별 레이아웃 제한
   ▸ min-height 하드코딩 완전 제거
     → 모든 높이는 fixed_banners.image_height(배너 설정) 기반
     → portal.php inline style + layout.php 동적 CSS 주입
   ▸ max-width 만 레이아웃 목적으로 유지
════════════════════════════════════════════════════════ */

/* 상단/GNB하단/하단: 전체폭 → max-width 제한 없음, min-height는 동적 주입 */
.fb-pos-top .fb-banner-wrap,
.fb-pos-sub .fb-banner-wrap,
.fb-pos-bottom .fb-banner-wrap { width: 100%; }

/* 전체폭 배너 텍스트/타자: 좌우 패딩 제거하고 완전 가운데 정렬 */
.fb-pos-top .fb-text-banner,
.fb-pos-sub .fb-text-banner,
.fb-pos-bottom .fb-text-banner,
.s1 .fb-text-banner,
.s4 .fb-text-banner,
.s6 .fb-text-banner {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-pos-top .fb-text-banner span,
.fb-pos-sub .fb-text-banner span,
.fb-pos-bottom .fb-text-banner span,
.s1 .fb-text-banner span,
.s4 .fb-text-banner span,
.s6 .fb-text-banner span {
  width: auto;
  max-width: 100%;
  margin: 0;
  text-align: center;
}

/* 사이드 배너: max-width 제한만 유지, min-height는 배너 설정 기반 */
.fb-pos-side_left .fb-banner-wrap { max-width: 200px; }
.fb-pos-side_right .fb-banner-wrap { max-width: 200px; }

/* 본문 내 배너: max-width 제한만 유지 */
.fb-pos-in_content .fb-banner-wrap { max-width: 728px; margin: 0 auto; }
.fb-pos-in_content .fb-text-banner,
.fb-pos-in_content .fb-typing-wrap { max-width: 728px; margin: 0 auto; }

/* 스퀘어 200×200: max-width 제한만 유지 */
.fb-pos-square_200 .fb-banner-wrap { max-width: 200px; }
.fb-pos-square_200 .fb-text-banner,
.fb-pos-square_200 .fb-typing-wrap { max-width: 200px; }

/* 미디엄 렉탱글 300×250: max-width 제한만 유지 */
.fb-pos-square_300 .fb-banner-wrap { max-width: 300px; }
.fb-pos-square_300 .fb-text-banner,
.fb-pos-square_300 .fb-typing-wrap { max-width: 300px; }

/* 스몰 스퀘어 120×120: max-width 제한만 유지 */
.fb-pos-square_120 .fb-banner-wrap { max-width: 120px; }
.fb-pos-square_120 .fb-text-banner,
.fb-pos-square_120 .fb-typing-wrap { max-width: 120px; }

/* ═══════════════════════════════════════════════════════
   광고 플레이스홀더 (배너 미등록 시 표시)
   - 가로형 (horizontal): 1200px 전체폭, 얕은 높이
   - 세로형 (vertical): 좁은 폭, 깊은 높이
   - 정사각형 (square): 중앙 정렬 박스
════════════════════════════════════════════════════════ */
/* ★ 원칙8: ad-ph-wrap 자체도 높이 0 — 인라인 min-height 무력화
   PHP(header.php/footer.php)에서 style="min-height:Npx"가 주입되므로
   !important로 강제 0 처리 */
.ad-ph-wrap {
  width: 100%;
  box-sizing: border-box;
  height: 0 !important;       /* 원칙8: 광고 없으면 공간 차지 안 함 */
  min-height: 0 !important;   /* 원칙8: 인라인 min-height 무력화 */
  overflow: hidden !important; /* 원칙8: 내부 콘텐츠 클리핑 */
  padding: 0 !important;
}
/* ★ 원칙8: 배너 플레이스홀더 — 투명배경·테두리 제거·높이 0·비표시
   실제 광고가 없을 때 화면에 보이지 않고 레이아웃 공간도 차지하지 않음.
   실제 광고(fb-banner-wrap, fb-banner-img)가 삽입되면 높이는 자동 복원됨. */
.ad-ph-wrap .ad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;   /* 원칙8: 투명배경 */
  border: none;              /* 원칙8: 테두리 제거 */
  border-radius: 0;
  color: transparent;        /* 원칙8: 텍스트 숨김 */
  text-align: center;
  padding: 0;                /* 원칙8: 내부 여백 제거 */
  height: 0;                 /* 원칙8: 기본 높이 0 — 광고 없으면 공간 없음 */
  min-height: 0;             /* 원칙8: min-height도 0 */
  box-sizing: border-box;
  transition: none;
  pointer-events: none;      /* 원칙8: 마우스 이벤트 차단 */
  overflow: hidden;
}
.ad-ph-wrap .ad-placeholder:hover {
  background: transparent;   /* 원칙8: hover도 투명 유지 */
  border-color: transparent;
  color: transparent;
}
.ad-ph-wrap .ad-placeholder i {
  display: none;             /* 원칙8: 아이콘 숨김 */
}
/* 원칙8: 플레이스홀더 내부 텍스트·레이블 전부 숨김 */
.ad-ph-label,
.ad-ph-size,
.ad-ph-desc {
  display: none;  /* 원칙8: 크기표시·레이블 숨김 */
}

/* ★ 원칙8: 가로형 플레이스홀더 — 높이 0, 완전 비표시
   실제 광고가 없으면 공간 차지 없음 */
.ad-ph-horizontal .ad-placeholder {
  flex-direction: row;
  height: 0;        /* 원칙8: 광고 없을 때 높이 0 */
  min-height: 0;    /* 원칙8: min-height도 0 */
  padding: 0;
  overflow: hidden;
}
.ad-ph-horizontal .ad-placeholder i { display: none; } /* 원칙8: 아이콘 숨김 */
.ad-ph-horizontal .ad-ph-label,
.ad-ph-horizontal .ad-ph-size,
.ad-ph-horizontal .ad-ph-desc { display: none; } /* 원칙8: 레이블 숨김 */

/* ★ 원칙8: 세로형 플레이스홀더 — 높이 0, 완전 비표시 */
.ad-ph-vertical .ad-placeholder {
  height: 0;        /* 원칙8: 광고 없을 때 높이 0 */
  min-height: 0;    /* 원칙8: min-height도 0 */
  padding: 0;
  overflow: hidden;
}
.ad-ph-vertical .ad-placeholder i { display: none; } /* 원칙8: 아이콘 숨김 */

/* ★ 원칙8: 위치별 플레이스홀더 — 모두 height:0 비표시
   실제 광고 삽입 시 fb-banner-wrap이 높이를 자동 복원함
   - side_left/right: 윙 내부 → layout.css .wing-ad로 제어
   - square_300/200/120: 스퀘어 위젯 → 높이 0
   - in_content: 본문 삽입형 → 높이 0 */

/* ★ 원칙8: 사이드 배너 플레이스홀더 — 높이 0, 비표시 */
.fb-pos-side_left .ad-placeholder,
.fb-pos-side_right .ad-placeholder {
  max-width: 120px;
  min-width: 0;        /* 원칙8: 최소 너비 제거 */
  min-height: 0;       /* 원칙8: 높이 0 */
  height: 0;           /* 원칙8: 높이 0 */
  padding: 0;
  overflow: hidden;
}

/* ★ 원칙8: 본문 내 삽입형 플레이스홀더 — 높이 0, 비표시 */
.fb-pos-in_content .ad-placeholder {
  min-height: 0;       /* 원칙8: 높이 0 */
  height: 0;           /* 원칙8: 높이 0 */
  max-width: 728px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

/* ★ 원칙8: 스퀘어 배너 플레이스홀더 — 높이 0, 비표시 */
.fb-pos-square_200 .ad-placeholder {
  min-width: 0;        /* 원칙8: 최소 너비 제거 */
  max-width: 200px;
  min-height: 0;       /* 원칙8: 높이 0 */
  height: 0;           /* 원칙8: 높이 0 */
  padding: 0;
  overflow: hidden;
}
.fb-pos-square_300 .ad-placeholder {
  min-width: 0;        /* 원칙8: 최소 너비 제거 */
  max-width: 300px;
  min-height: 0;       /* 원칙8: 높이 0 */
  height: 0;           /* 원칙8: 높이 0 */
  padding: 0;
  overflow: hidden;
}
.fb-pos-square_120 .ad-placeholder {
  min-width: 0;        /* 원칙8: 최소 너비 제거 */
  max-width: 120px;
  min-height: 0;       /* 원칙8: 높이 0 */
  height: 0;           /* 원칙8: 높이 0 */
  padding: 0;
  overflow: hidden;
}

/* ── 반응형 ── */
@media (max-width: 900px) {
  /* top/sub/bottom min-height: layout.php 동적 주입값 사용 */
  .fb-pos-in_content .fb-banner-wrap { max-width: 100%; }
  /* 모바일: 가로형 플레이스홀더 세로 전환 */
  .ad-ph-horizontal .ad-placeholder { flex-direction: column; }
  /* 전체폭 top/bottom: 모바일에서 100% 유지 */
  .ad-ph-wrap.fb-pos-top,
  .ad-ph-wrap.fb-pos-bottom { width:100% !important; max-width:100% !important; }
  /* sub(728×90): 모바일에서도 너비만 조정, 높이는 원칙8에 따라 0 유지 */
  .ad-ph-wrap.fb-pos-sub { width:100% !important; max-width:100% !important; }
  /* 원칙8: 플레이스홀더는 모바일에서도 height:0 유지 — 광고 없으면 공간 차지 안 함 */
  .widget-ad-banner.fb-pos-sub .ad-placeholder,
  .widget-ad-banner.fb-pos-top   .ad-placeholder,
  .widget-ad-banner.fb-pos-bottom .ad-placeholder,
  .fb-pos-side_left .ad-placeholder,
  .fb-pos-side_right .ad-placeholder,
  .fb-pos-in_content .ad-placeholder,
  .fb-pos-square_300 .ad-placeholder,
  .fb-pos-square_200 .ad-placeholder,
  .fb-pos-square_120 .ad-placeholder { height: 0; min-height: 0; padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   광고 위젯 컨테이너 – widget-ad-banner 클래스 보완
   (portal.php renderWidget의 플레이스홀더 div에 적용)
   ═══════════════════════════════════════════════════════════════ */

/* 본문 내 삽입형 (728×90) */
.widget-ad-banner.fb-pos-in_content {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}
.widget-ad-banner.fb-pos-in_content .ad-ph-wrap {
  max-width: 728px;
  width: 100%;
}

/* 스퀘어/렉탱글 플레이스홀더 컨테이너
   ⚠ HTML에서 widget-ad-banner + fb-pos-square_N + ad-ph-wrap이 같은 div이므로
   너비는 .widget-ad-banner.fb-pos-square_N 자체에 적용한다. */

/* 300×250 미디엄 렉탱글 컨테이너 */
.widget-ad-banner.fb-pos-square_300 {
  display: block;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}
/* 200×200 스퀘어 컨테이너 */
.widget-ad-banner.fb-pos-square_200 {
  display: block;
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
}
/* 120×240 하프페이지 컨테이너 */
.widget-ad-banner.fb-pos-square_120 {
  display: block;
  max-width: 120px;
  width: 100%;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   배너 섹터 sector-main 전체폭 강제
   ▸ layout.php가 .sector-main { max-width:1200px !important } 를 주입하므로
     s1(상단) / s9(하단) 배너 섹터는 여기서 !important로 오버라이드
   ▸ s4(서브) 배너는 728px → sector-main이 1200px이어도 widget 자체가 728px로 제한됨
════════════════════════════════════════════════════════════════ */
.sector-wrap.s1 .sector-main,
.sector-wrap.s9 .sector-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* s4(서브배너) sector-full: flex 컨테이너이므로 sub 위젯이 중앙정렬되도록 */
.sector-wrap.s4 .sector-full {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ── 전체폭 배너·플레이스홀더 (top/bottom: 1200×90, sub: 728×90)
   핵심:
   · top/bottom → sector-main 전체폭(위에서 강제), 높이 90px 고정 (1200×90 비율)
   · sub        → max-width:728px 중앙정렬, 높이 90px 고정 (728×90 비율)
   · 실제 배너 이미지가 등록되면 fb-banner-img 비율이 우선 적용 ── */

/* top / bottom: 1200×90 전체폭
   sector-main이 100%이므로 배너도 100% 채움 */
.widget-ad-banner.fb-pos-top,
.widget-ad-banner.fb-pos-bottom {
  width: 100%;
  max-width: 100% !important;
  display: block;
}
/* 원칙8: top/bottom 플레이스홀더 — 높이 0으로 완전 제거
   실제 광고 삽입 시 height가 자동 복원됨 */
.widget-ad-banner.fb-pos-top   .ad-placeholder,
.widget-ad-banner.fb-pos-bottom .ad-placeholder {
  width: 100%;
  max-width: 100% !important;
  height: 0;            /* 원칙8: 광고 없을 때 높이 0 — 레이아웃 공간 차지 안 함 */
  min-height: 0;
  border-radius: 0;
  border: none;         /* 원칙8: 테두리 없음 */
  padding: 0;
}

/* sub: 728×90 – 중앙 정렬, 너비 제한
   HTML에서 widget-ad-banner + fb-pos-sub + ad-ph-wrap이 같은 div이므로
   .widget-ad-banner.fb-pos-sub 사용 (ad-ph-wrap 하위 선택자 불필요)
   ⚠ flex 아이템이므로 max-width + margin: auto 조합으로 중앙정렬 */
.widget-ad-banner.fb-pos-sub {
  width: 100%;
  max-width: 728px !important;  /* 728px 너비 제한 */
  margin: 0 auto !important;    /* 중앙 정렬 (flex 아이템에서도 작동) */
  display: block;
  flex-shrink: 0;               /* flex 컨테이너에서 너비 축소 방지 */
}
/* 원칙8: sub 플레이스홀더도 높이 0으로 완전 제거 */
.widget-ad-banner.fb-pos-sub   .ad-placeholder {
  width: 100%;
  height: 0;            /* 원칙8: 광고 없을 때 높이 0 */
  min-height: 0;
  border: none;         /* 원칙8: 테두리 없음 */
  border-radius: 0;
  padding: 0;
}

/* 섹터5 우측 컬럼 광고 (300×250) 스타일 */
.col-right .widget-ad-banner,
.col-right .fb-banner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 반응형 보완 */
@media (max-width: 900px) {
  .widget-ad-banner.fb-pos-in_content { padding: 8px 0; }
  .widget-ad-banner.fb-pos-square_300 .ad-ph-wrap,
  .widget-ad-banner.fb-pos-square_200 .ad-ph-wrap,
  .widget-ad-banner.fb-pos-square_120 .ad-ph-wrap { max-width: 100%; }
}

/* ★ S9 하단 배너 높이 제한 — 이미지가 영역 밖으로 넘치지 않도록 */
.s9 .fb-banner-wrap {
  overflow: hidden !important;
  max-height: 90px;
}
.s9 .fb-banner-img {
  max-height: 90px !important;
  object-fit: cover;
  width: 100%;
}
.s9 .fb-banner-link {
  max-height: 90px !important;
  overflow: hidden !important;
}

/* ★ S9 하단 배너 높이 제한 — 이미지가 영역 밖으로 넘치지 않도록 */
.s9 .fb-banner-wrap {
  overflow: hidden !important;
  max-height: 90px;
}
.s9 .fb-banner-img {
  max-height: 90px !important;
  object-fit: cover;
  width: 100%;
}
.s9 .fb-banner-link {
  max-height: 90px !important;
  overflow: hidden !important;
}