/* ═══════════════════════════════════════════════
 * wing.css — 윙패널 전역 스타일 (#wing-panel, .wing-*, .s13, .s14)
 * 출처: layout.css 분리 / 2026-07-11
 * ═══════════════════════════════════════════════ */


/* ── 윙 패널: ID(#wing-panel-*) + 클래스(.sector-wrap.s13/.s14) 이중 선택자 ──
   S13 = 좌측 윙, S14 = 우측 윙 (푸터 S10/S11/S12와는 완전 분리) */
#wing-panel-left,  .sector-wrap.s13,
#wing-panel-right, .sector-wrap.s14 {
  position: fixed;
  top: var(--wing-top, 0px);
  height: calc(100vh - var(--wing-top, 0px));
  z-index: 90;              /* 일반 콘텐츠 위, 모달·팝업 아래 */
  overflow: hidden;
  pointer-events: none;     /* 패널 배경은 클릭 통과 */
  display: flex;
  flex-direction: column;
  width: auto;              /* 하위 규칙에서 덮어씀 */
  /* FOUC(깜빡임) 방지: JS가 --wing-top 계산 완료 전까지 숨김 */
  visibility: hidden;
  /* transition 제거: JS로 위치 계산 중 번쩍임 방지 */
}
/* JS가 wing-top 계산 완료 후 .wing-ready 클래스 부여 → 표시 */
#wing-panel-left.wing-ready,  .sector-wrap.s13.wing-ready,
#wing-panel-right.wing-ready, .sector-wrap.s14.wing-ready {
  visibility: visible;
}
/* 좌측 윙: #wing-panel-left + .sector-wrap.s13 */
#wing-panel-left, .sector-wrap.s13 {
  /* 콘텐츠(--dw) 좌측 끝에 딱 붙임
   * right = 50% + dw/2 → 패널 우측끝이 1200px 콘텐츠 좌측끝과 일치
   * position:fixed이므로 뷰포트 바깥으로 나간 부분은 자동 클리핑됨 */
  right: calc(50% + var(--dw, 1200px) / 2);
  left: auto;
  width: var(--wlw, 120px);           /* DB wing_left_width → layout_core.php --wlw */
  background: var(--s13-bg, var(--wlbg, transparent)); /* DB wing_left_bg */
  border-right: var(--wing-border, none); /* 기본 테두리 없음 — DB/전역변수로 제어 */
}
/* 우측 윙: #wing-panel-right + .sector-wrap.s14 */
#wing-panel-right, .sector-wrap.s14 {
  /* 콘텐츠(--dw) 우측 끝에 딱 붙임 */
  left: calc(50% + var(--dw, 1200px) / 2);
  right: auto;
  width: var(--wrw, 120px);           /* DB wing_right_width → layout_core.php --wrw */
  background: var(--s14-bg, var(--wrbg, transparent)); /* DB wing_right_bg */
  border-left: var(--wing-border, none);  /* 기본 테두리 없음 — DB/전역변수로 제어 */
}

/* ── 윙 내부 컨테이너 ─────────────────────────── */
.wing-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 6px;
  gap: 8px;
  pointer-events: auto;     /* 배너·링크 클릭 가능 */
  overflow-y: auto;         /* 배너 많을 때 스크롤 */
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: none;    /* Firefox 스크롤바 숨김 */
}
.wing-inner::-webkit-scrollbar { display: none; } /* Chrome 스크롤바 숨김 */

/* ── 윙 내 fb-banner-wrap 오버라이드 ──────────── */
#wing-panel-left  .fb-banner-wrap,
#wing-panel-right .fb-banner-wrap,
.sector-wrap.s13  .fb-banner-wrap,
.sector-wrap.s14  .fb-banner-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 6px;
  overflow: hidden;
}

/* 슬라이드 래퍼 – 윙 높이에 맞게 */
#wing-panel-left  .fb-slide-wrap,
#wing-panel-right .fb-slide-wrap,
.sector-wrap.s13  .fb-slide-wrap,
.sector-wrap.s14  .fb-slide-wrap {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}
#wing-panel-left  .fb-slide-track,
#wing-panel-right .fb-slide-track,
.sector-wrap.s13  .fb-slide-track,
.sector-wrap.s14  .fb-slide-track {
  display: flex;
  transition: transform .5s ease;
}
#wing-panel-left  .fb-slide-item,
#wing-panel-right .fb-slide-item,
.sector-wrap.s13  .fb-slide-item,
.sector-wrap.s14  .fb-slide-item {
  min-width: 100%;
}
#wing-panel-left  .fb-text-banner,
#wing-panel-right .fb-text-banner,
.sector-wrap.s13  .fb-text-banner,
.sector-wrap.s14  .fb-text-banner {
  font-size: 12px !important;
  line-height: 1.5;
  word-break: keep-all;
  white-space: pre-line;    /* \n 개행 지원 */
  border-radius: 6px;
}

/* 이미지 배너 */
#wing-panel-left  .fb-banner-img,
#wing-panel-right .fb-banner-img,
.sector-wrap.s13  .fb-banner-img,
.sector-wrap.s14  .fb-banner-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* 슬라이드 화살표 숨김 (좁은 윙에서 불필요) */
#wing-panel-left  .fb-slide-arrow,
#wing-panel-right .fb-slide-arrow,
.sector-wrap.s13  .fb-slide-arrow,
.sector-wrap.s14  .fb-slide-arrow { display: none; }

/* 슬라이드 dots – 하단 중앙 */
#wing-panel-left  .fb-slide-dots,
#wing-panel-right .fb-slide-dots,
.sector-wrap.s13  .fb-slide-dots,
.sector-wrap.s14  .fb-slide-dots {
  bottom: 4px;
}

/* ── 플레이스홀더 광고 박스 ──────────────────── */
.wing-ad {
  width: 100%;
  background: transparent;
  border: var(--wing-ad-border, 1px dashed rgba(0,0,0,.15)); /* DB/전역변수로 제어 */
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--wing-ad-color, rgba(0,0,0,.3));               /* DB/전역변수로 제어 */
  text-align: center;
  padding: 10px 4px;
  gap: 6px;
  pointer-events: auto;
  box-sizing: border-box;
}
.wing-ad-tall  { min-height: var(--wing-ad-tall-height, 280px); flex: 1; } /* DB/전역변수로 제어 */
.wing-ad-short { min-height: var(--wing-ad-short-height, 120px); }          /* DB/전역변수로 제어 */
.wing-ad i { font-size: 20px; opacity: .35; }

/* 다크모드: 테두리는 --wing-border CSS변수로 제어 (기본 none — 규칙: 테두리 없음) */
html[data-theme="dark"] #wing-panel-left,
html[data-theme="dark"] .sector-wrap.s13,
html[data-theme="dark"] #wing-panel-right,
html[data-theme="dark"] .sector-wrap.s14 {
  /* border-color 하드코딩 제거 → --wing-border 전역변수로 통합 제어 */
  border-color: var(--wing-border-color, transparent);
}

/* 이전 섹터 내 wing-col은 완전 제거 */
.wing-col { display: none !important; }
  #wing-panel-left,  .sector-wrap.s13,
  #wing-panel-right, .sector-wrap.s14 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .wing-left, .wing-right {
    display: none !important;
  }