/* ==================================================
   Wing Banner (PC 우측 광고 윙) — components.css 에서 분리
   프론트(_layouts/root.php)와 관리자 PC 윙배너 등록 미리보기(/admin/pc-wing-banners)가 함께 쓴다.
   토큰은 tokens.css 를 따른다(관리자 화면은 tokens.css 를 같이 불러온다).
================================================== */

/* ==================================================
   Wing Banner Components
   Wing의 구조적 Layout(폭 / Stack / Sticky / Slot Size)은 layout.css 에 있다.
   여기서는 Banner 표현만 다룬다.

   Main과 Wing 사이에는 Divider를 두지 않고 40px whitespace로만 분리한다.
   Wing 배경을 별도 Gray Panel로 만들지 않는다.

   아래 수치는 실제 화면 검토 전 초기 구현값이며 Token으로 승격하지 않았다.
   - Banner Radius 12px
================================================== */

.wing-banner {
  position: relative; /* AD Badge Overlay 기준점 */
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 12px; /* TODO: Token 승격 검토 */
  background-color: var(--surface-default);
}

/* 광고 식별 Badge
   이미지에 합성하지 않고 UI Overlay로 분리해 Asset 교체 / Fade 순환에도
   각 광고에 그대로 따라가게 한다. Banner 크기·비율에는 영향을 주지 않는다.

   v1 QA: Dark Translucent(rgba(17,24,39,0.62))가 광고 이미지 위에서 너무 강해
          은은한 Gray-Blue(#C1CBE3 기반)로 변경했다.
          Border / Shadow는 사용하지 않고 Background만 바꾼다.
          배경이 밝아졌으므로 텍스트는 White 대신 --mono-900 을 쓴다.
   TODO: Token 승격 검토 */
.wing-banner__ad {
  position: absolute;
  top: 8px;   /* TODO: Token 승격 검토 */
  right: 8px;
  display: inline-flex;
  align-items: center;
  padding: 3px 6px; /* TODO: Token 승격 검토 */
  border-radius: var(--radius-sm);
  background-color: rgba(193, 203, 227, 0.88);
  color: var(--mono-900);
  font-size: 10px; /* TODO: Token 승격 검토 */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Banner Image Rendering (v2 / Bottom Clip)
   Image는 Viewport Height와 무관하게 항상 240 x 320으로 렌더링한다.
   .wing-slot이 290 / 270px로 줄어드는 구간에서도 Image는 축소되지 않고
   부모 .wing-banner의 overflow:hidden이 하단만 crop한다. (layout.css 뷰포트 대응 참고) */
.wing-banner__image {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
}

.wing-banner:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: 12px; /* Banner Radius와 동일 */
}

/* 문구(제목/부제) + CTA 버튼 오버레이
   신청 화면(mypage/general/banners-creative.php)에서 "이미지+텍스트"를 선택하면
   title/subtitle이, 버튼 문구를 입력하면 button_label이 채워진다(PC 전용, 모바일에는 버튼 없음).
   이미지 위에 그려 넣지 않고 UI Overlay로 분리해 AD Badge와 같은 원칙을 따른다.

   위치·크기는 app/Views/_pc/front/pages/new/assets/images/wing 참고 크리에이티브 3종의
   문법(상단 정렬 · 큰 제목 · 여백을 둔 CTA 버튼)을 기본값으로 삼되, 배너 신청/수정 화면에서
   두 축을 독립적으로 고를 수 있다(PcWingBannerCatalog::OVERLAY_STYLES/TEXT_POSITIONS):
     - 배경(overlay_style) : plain(스크림 없음) | scrim-white(기본) | scrim-black | scrim-navy
     - 위치(text_position) : top(기본, 참고 크리에이티브) | bottom(모바일 히어로형)
   색상별 반투명도·문구색은 CSS 커스텀 프로퍼티(--wing-overlay-*)로 값을 갈아끼우고,
   위치 수정자는 그 값을 그대로 재사용해 inset/그라데이션 방향만 뒤집는다
   (조합마다 규칙을 새로 쓰지 않기 위함 — 케이스가 늘어도 값만 추가하면 된다). */
.wing-banner__overlay {
  --wing-overlay-rgb: 255, 255, 255; /* scrim-white 기본값 */
  --wing-overlay-alpha-near: 0.72;
  --wing-overlay-alpha-far: 0.32;
  --wing-overlay-text: var(--text-primary);
  --wing-overlay-sub-text: var(--text-secondary);

  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px; /* TODO: Token 승격 검토 */
  padding: 24px 16px 20px; /* TODO: Token 승격 검토 */
  background: linear-gradient(180deg,
    rgba(var(--wing-overlay-rgb), var(--wing-overlay-alpha-near)) 0%,
    rgba(var(--wing-overlay-rgb), var(--wing-overlay-alpha-far)) 65%,
    rgba(var(--wing-overlay-rgb), 0) 100%);
  color: var(--wing-overlay-text);
}

.wing-banner--scrim-black .wing-banner__overlay {
  --wing-overlay-rgb: 15, 23, 42;
  --wing-overlay-alpha-near: 0.78;
  --wing-overlay-alpha-far: 0.42;
  --wing-overlay-text: var(--text-inverse, #fff);
  --wing-overlay-sub-text: rgba(255, 255, 255, 0.85);
}

.wing-banner--scrim-navy .wing-banner__overlay {
  --wing-overlay-rgb: 18, 70, 163; /* --brand-secondary 톤 */
  --wing-overlay-alpha-near: 0.8;
  --wing-overlay-alpha-far: 0.45;
  --wing-overlay-text: var(--text-inverse, #fff);
  --wing-overlay-sub-text: rgba(255, 255, 255, 0.85);
}

/* 위치 수정자 — 색상 변수는 그대로 두고 inset/여백/그라데이션 방향만 하단 기준으로 뒤집는다 */
.wing-banner--pos-bottom .wing-banner__overlay {
  inset: auto 0 0 0;
  padding: 20px 16px 24px;
  background: linear-gradient(0deg,
    rgba(var(--wing-overlay-rgb), var(--wing-overlay-alpha-near)) 0%,
    rgba(var(--wing-overlay-rgb), var(--wing-overlay-alpha-far)) 65%,
    rgba(var(--wing-overlay-rgb), 0) 100%);
}

/* plain은 위치와 무관하게 배경만 지운다 — pos-bottom과 같은 우선순위라 소스 순서상 뒤에 둬서
   plain+bottom 조합에서도 확실히 이긴다(둘 다 배경을 다시 선언하는 유일한 두 규칙). */
.wing-banner--plain-overlay .wing-banner__overlay {
  background: none;
}

.wing-banner__title {
  font-size: 18px; /* TODO: Token 승격 검토 — 참고 크리에이티브 대비 환산값 */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight, 1.2);
  word-break: keep-all;
}

.wing-banner__sub {
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-regular);
  color: var(--wing-overlay-sub-text);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

.wing-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px; /* TODO: Token 승격 검토 — 참고 크리에이티브처럼 부제와 확실히 띄운다 */
  padding: 9px 16px; /* TODO: Token 승격 검토 */
  border-radius: var(--radius-pill);
  background-color: var(--brand-secondary);
  color: var(--text-inverse, #fff);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-semibold);
}

/* AD Badge 우선순위 + 문구 스크림 대비 자동 전환
   Badge와 Overlay는 둘 다 absolute 라 DOM 순서상 뒤에 오는 Overlay(스크림)가 Badge를 덮었다.
   z-index로 Badge를 항상 스크림 위에 둔다.

   문구가 상단(top)에 있으면 스크림이 Badge 자리(우상단)를 덮으므로 배경 스타일에 맞춰 색을 바꾼다.
     - scrim-white / plain(스크림 없음, 문구가 이미지 위) → 진한 Badge(어두운 배경 + 흰 글자)
     - scrim-black / scrim-navy                         → 밝은 Badge(흰 배경 + 진한 글자)
   문구가 하단(pos-bottom)이거나 문구가 없으면 Badge는 이미지 위에 있으므로 기본 색을 유지한다.
   wing-banner--has-text 는 문구·버튼이 있을 때 main-wing.php / 신청·관리자 미리보기가 붙인다. */
.wing-banner__overlay {
  z-index: 1;
}

.wing-banner__ad {
  z-index: 2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.wing-banner--has-text:not(.wing-banner--pos-bottom) .wing-banner__ad {
  background-color: rgba(17, 24, 39, 0.82);
  color: #fff;
}

.wing-banner--has-text.wing-banner--scrim-black:not(.wing-banner--pos-bottom) .wing-banner__ad,
.wing-banner--has-text.wing-banner--scrim-navy:not(.wing-banner--pos-bottom) .wing-banner__ad {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--mono-900, #111827);
}