/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  wing.css                                           │
 * │  위치        │  /assets/css/wing.css                                        │
 * │  생성일      │  2026-05-16                                           │
 * │  수정일      │  2026-05-16                                           │
 * │  버전        │  v1.0                                                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  스타일시트 — 포털·컴포넌트별 규칙 적용               │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px (전역·포털 변수와 연동)            │
 * │  섹터 구조   │  .sector-wrap width:100% — 다열은 .sector-inner (원칙2) │
 * │  폰트 기준   │  최소 14px (--fs-base 등 변수 연동)                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : header.php·포털 레이아웃 (상이)            │
 * │              │  변수 주입: echoLayoutVars()·포털 CSS (해당 시)       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-16 v1.0 - FILE INDEX 일괄 부여                     │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

/* ── 윙 패널: ID(#wing-panel-*) + 클래스(.sector-wrap.s13/.s14) 이중 선택자 ──
   S13 = 좌측 윙, S14 = 우측 윙 (푸터 S10/S11/S12와는 완전 분리)
   2026-05-18 v2: 사용자 보고 — 윙이 GNB(헤더 카테고리 바)까지 침범 + 푸터 침범
   → fallback top 200 → 280px, footer.php JS WING_MIN_TOP 도 220px 로 상향.
   → --wing-max-h: 360px 응급 세로 제한(SSOT 120×360). 환경에 따라 layout.css 의
      :root 또는 인라인 style 로 손쉽게 조정 가능. */
#wing-panel-left,  .sector-wrap.s13,
#wing-panel-right, .sector-wrap.s14 {
  position: fixed;
  top: var(--wing-top, 280px);
  /* 높이 계산 우선순위:
     1) --wing-h (footer.php JS 가 푸터 회피 계산해서 주입) — 1순위
     2) --wing-max-h (응급 세로 제한) — JS 실패해도 360px 안 넘어감
     3) viewport 잔여 영역 fallback
     → 셋 중 가장 작은 값을 채택하여 GNB·푸터 어느 쪽도 침범하지 않음. */
  height: min(
    var(--wing-h, calc(100vh - var(--wing-top, 280px))),
    var(--wing-max-h, 360px)
  );
  z-index: var(--z-wing, 700); /* 광고 윙은 헤더/GNB/본문/푸터보다 위, 드롭다운/모달보다 아래 */
  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/전역변수로 제어 */
}

/* 동적 layout_core CSS가 누락되어도 퀵바와 겹치지 않도록 양쪽 윙 표시 최소폭을 보수적으로 고정 */
@media (max-width: 1440px) {
  #wing-panel-left,  .sector-wrap.s13,
  #wing-panel-right, .sector-wrap.s14 {
    display: none !important;
  }
}

/* ── 윙 내부 컨테이너 ─────────────────────────── */
.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: 14px !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: contain;
  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: 14px;
  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; }

/* 2026-05-18 v3 (긴급): 미디어 쿼리 래퍼가 누락되어 있던 블록을 정상 복구.
 *  사용자 반복 보고: 「좁은 화면에서도 윙이 본문·헤더를 침범한다」
 *  원인: 아래 블록이 @media 외부에 있어서 의도하지 않게 항상 효력 → 다른 규칙과
 *        specificity 경쟁만 발생하고 1400px 미만 차단이 동작하지 않았음.
 *  복구: 「뷰포트 < 1400px 일 때 윙 완전 숨김」 (PROJECT_RULES §11.7 좌·우 외곽 스카이 윙 ≥1400px 규칙 준수).
 *  ≥1400px 에서는 위쪽 정의(좌:right=calc(50%+dw/2), 우:left=calc(50%+dw/2)) 가 그대로 유효. */
@media (max-width: 1399.98px) {
  #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; }
}