/* banners.css — 소식 란을 펼쳤을 때 맨 위 「행사 배너」 (v4a, 2026-10-02). 디자인 = 아티팩트 「행사 배너 절충안 상세」.
   마크업은 js/banners.js. 계약: docs/SPEC.md 계약 J.
   (v4.6.0) 색은 전부 아래 토큰 — 어둡게가 기본값, 밝게는 css/theme.css 가 덮는다. */

:root {
  --bnr-surface: #202225;
  --bnr-line: #2e3033;
  --bnr-live: #5fb7c9;  --bnr-live-soft: #14343b;  --bnr-fill-live: #8fe3f5;     /* 진행 중 — 청록 */
  --bnr-warn: #f2c14e;  --bnr-warn-soft: #3b3010;  --bnr-fill-warn: #ffd45e;     /* 먼저 끝나는 종료 3일(달력) 전부터 — 노랑 */
  --bnr-urgent: #ff6a6f; --bnr-urgent-soft: #3a1618; --bnr-fill-urgent: #ff7377; /* 먼저 끝나는 종료를 넘김 — 빨강 */
  --bnr-sched: #9fb0c8; --bnr-sched-soft: #1f2733; --bnr-fill-sched: #b9c7dc;     /* 개최 전 — 슬레이트 */
  --bnr-hold: var(--color-late); --bnr-hold-soft: #3a2c10;                        /* 보류 — 앰버 */
  --bnr-done: #9aa0aa;  --bnr-done-soft: #272a2f;  --bnr-fill-done: #8a909a;      /* 모두 종료(자정까지) — 회색 */
  /* 진행 막대 — 빈칸 · /// 무늬 · 점선(밝은 칸 / 어두운 칸이 번갈아 어느 바탕에서도 보이게) · 막대 테두리 */
  --bnr-track: #474c54;
  --bnr-hatch: rgba(255, 255, 255, 0.34);
  --bnr-cut: #ffffff;
  --bnr-cut-edge: #0f0f0f;
  --bnr-bar-edge: rgba(255, 255, 255, 0.1);
  /* 카드 글자 · 유리 패널 · 종료 박스 (흐린 이미지 배경 위) */
  --bnr-veil-a: rgba(15, 15, 15, 0.45);
  --bnr-veil-b: rgba(15, 15, 15, 0.82);
  --bnr-cutline: rgba(255, 255, 255, 0.3);
  --bnr-eyebrow: #c4c4c4;
  --bnr-orig: #a9a9a9;
  --bnr-dates: #b3b3b3;
  --bnr-done-name: #cfcfcf;
  --bnr-tagline: #cfcfcf;
  --bnr-glass: rgba(255, 255, 255, 0.07);
  --bnr-glass-edge: rgba(255, 255, 255, 0.12);
  --bnr-tag-bg: rgba(255, 255, 255, 0.16);
  --bnr-tag-fg: #ffffff;
  --bnr-end-bg: rgba(255, 255, 255, 0.08);
  --bnr-end-edge: rgba(255, 255, 255, 0.16);
  --bnr-end-ink: #e8e8e8;
  --bnr-quiet: #9a9a9a;
  --bnr-arrow: #d9d9d9;
  --bnr-arrow-hover: #888888;
  --bnr-dot: #4a4e56;
  --bnr-dot-on: #ffffff;
  /* (v4.5.11) 배너 종류 배지 — 행사(이벤트) = 하늘, 가챠 = 분홍. 상태 색(청록 · 노랑 · 빨강 · 슬레이트)과 겹치지 않게 */
  --bnr-kind-event: #7ea6ff; --bnr-kind-event-ink: #0b1430;
  --bnr-kind-gacha: #ff8ccf; --bnr-kind-gacha-ink: #3a0723;
}

/* 기기 · 브라우저의 색 변환에 흔들리지 않게 (테마는 color-scheme 을 따라간다 — theme.css) */
.bnr, .bnr * { color-scheme: inherit; forced-color-adjust: none; }

.ntc__list > .ntc__banners { padding: 12px var(--m-pad, 0.8rem); background: var(--bnr-surface); border-bottom: 1px solid var(--ntc-border-soft); }   /* (v4.6.4) 소식 목록이 ul → div 로 바뀌어 li 를 뺐다 */

.bnr { display: grid; grid-template-columns: 1fr; gap: 10px; }   /* (v4.4) PC 는 탭으로 고른 카드 1장만 보인다 — 아래 .has-tabs */

/* 상태 → 색 토큰 */
.bnr__card { --acc: var(--bnr-live); --acc-soft: var(--bnr-live-soft); --fill: var(--bnr-fill-live); }
.bnr__card[data-st="sched"]  { --acc: var(--bnr-sched);  --acc-soft: var(--bnr-sched-soft);  --fill: var(--bnr-fill-sched); }
.bnr__card[data-st="warn"]   { --acc: var(--bnr-warn);   --acc-soft: var(--bnr-warn-soft);   --fill: var(--bnr-fill-warn); }
.bnr__card[data-st="urgent"] { --acc: var(--bnr-urgent); --acc-soft: var(--bnr-urgent-soft); --fill: var(--bnr-fill-urgent); }
.bnr__card[data-st="hold"]   { --acc: var(--bnr-hold);   --acc-soft: var(--bnr-hold-soft);   --fill: var(--bnr-hold); }
.bnr__card[data-st="done"]   { --acc: var(--bnr-done);   --acc-soft: var(--bnr-done-soft);   --fill: var(--bnr-fill-done); }

.bnr__card { position: relative; display: flex; min-width: 0; border-radius: 12px; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--bnr-line)); background: var(--color-bg-secondary); }
.bnr__bg { position: absolute; inset: -24px; z-index: -2; background-size: cover; background-position: center; filter: blur(24px) saturate(1.25); transform: scale(1.1); opacity: 0.6; }
.bnr__card:has(.bnr__bg)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bnr-veil-a), var(--bnr-veil-b)); }

.bnr__left { flex: none; width: min(42%, 440px); padding: 12px; display: grid; align-items: center; }
.bnr__img { position: relative; overflow: hidden; border-radius: 6px; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
.bnr__img[hidden] { display: none; }
.bnr__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; will-change: transform; }   /* 16:9 그대로, 잘리지 않게 */
.bnr__card[data-st="hold"] .bnr__img img { filter: grayscale(1) brightness(0.7); }
.bnr__card[data-st="done"] .bnr__img img { filter: grayscale(0.75) brightness(0.8); }
.bnr__state { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 1px 7px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; background: var(--acc); color: #1b1303; }
.bnr__card[data-st="live"] .bnr__state { color: #071418; }
.bnr__card[data-st="sched"] .bnr__state { color: #0d1117; }
.bnr__card[data-st="urgent"] .bnr__state { color: #fff; }
.bnr__card[data-st="done"] .bnr__state { color: #14161a; }

.bnr__mid { flex: none; width: 0; border-left: 2px dashed var(--bnr-cutline); margin: 12px 0; }   /* 절취선 */
.bnr__right { flex: 1; min-width: 0; padding: 12px 14px; display: grid; gap: 5px; align-content: center; }

.bnr__eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--bnr-eyebrow); }
/* (v4.5.11) 종류 배지 — 카드 머리 · 탭 이름 앞 · 딸린 가챠 블록 */
.bnr__kind { --k: var(--bnr-kind-event); --k-ink: var(--bnr-kind-event-ink); display: inline-block; font-style: normal; font-weight: 800; letter-spacing: 0.06em;
  padding: 1px 8px; border-radius: 999px; background: var(--k); color: var(--k-ink); }
.bnr__kind[data-kind="gacha"] { --k: var(--bnr-kind-gacha); --k-ink: var(--bnr-kind-gacha-ink); }
.bnr__eyebrow .bnr__kind { font-size: 0.74rem; padding: 2px 10px; }
.bnr__kindnote { font-weight: 600; letter-spacing: 0.02em; color: var(--bnr-kind-gacha); }
.bnr__card { box-shadow: inset 4px 0 0 var(--bnr-kind-event); }
.bnr__card[data-kind="gacha"] { box-shadow: inset 4px 0 0 var(--bnr-kind-gacha); }
/* (v4.5.11 A안, 2026-10-21 운영자 선택) 종류를 색으로 — 카드 테두리 · 진행 막대 채움 · 종료 박스 윗선 · 딸린 가챠 패널 · 고른 탭은 종류 색(행사 = 하늘 · 가챠 = 분홍).
   진행 상태(진행 중 · 곧 종료 · 종료 임박)는 이미지 위 상태 표시 · 말풍선 · 탭 머리 글자가 그대로 상태 색으로 보인다. 보류 · 종료 카드는 상태 색(앰버 · 회색) 유지 */
.bnr__card[data-kind="event"] { border-color: color-mix(in srgb, var(--bnr-kind-event) 45%, var(--bnr-line)); --bar-fill: var(--bnr-kind-event); }
.bnr__card[data-kind="gacha"] { border-color: color-mix(in srgb, var(--bnr-kind-gacha) 45%, var(--bnr-line)); --bar-fill: var(--bnr-kind-gacha); }
.bnr__card[data-st="hold"], .bnr__card[data-st="done"] { --bar-fill: var(--fill); }
.bnr__name { font-size: 1.1rem; font-weight: 600; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.bnr__card[data-st="done"] .bnr__name { color: var(--bnr-done-name); }
.bnr__orig { font-size: 0.72rem; line-height: 1.35; color: var(--bnr-orig); opacity: 0.92; overflow-wrap: anywhere; }   /* 원제 — 작고 희미하게 */
.bnr__dates { font-size: 0.72rem; line-height: 1.35; color: var(--bnr-dates); opacity: 0.92; font-variant-numeric: tabular-nums; }   /* 날짜 — 원제와 같은 글자 스타일 */
.bnr__card[data-st="hold"] .bnr__dates { color: var(--bnr-hold); }
.bnr__open { color: var(--acc); font-weight: 600; }
.bnr__chip { color: var(--acc); }

/* 딸린 가챠 — 날짜 텍스트 바로 아래, 행사 안에 포함된 유리 패널 */
.bnr__glass { margin-top: 4px; padding: 8px 10px 8px 12px; display: grid; gap: 1px; border-radius: 8px; backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bnr-kind-gacha) 8%, var(--bnr-glass)); border: 1px solid color-mix(in srgb, var(--bnr-kind-gacha) 35%, var(--bnr-glass-edge));
  border-left: 3px solid var(--bnr-kind-gacha); }   /* (v4.5.11 A안) 딸린 가챠 = 가챠 색 */
.bnr__name--sub { font-size: 0.9rem; }
.bnr__tagline { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bnr-tagline); }
.bnr__tagline i { font-style: normal; padding: 0 6px; margin-right: 6px; border-radius: 3px; background: var(--bnr-tag-bg); color: var(--bnr-tag-fg); }
.bnr__tagline i.bnr__kind { padding: 0 7px; border-radius: 999px; background: var(--k); color: var(--k-ink); }

/* 종료 일정 박스 — 행사 종료 / 가챠 종료 */
.bnr__ends { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 4px; }
.bnr__end { padding: 5px 9px; border-radius: 7px; background: var(--bnr-end-bg); border: 1px solid var(--bnr-end-edge); backdrop-filter: blur(6px); }
.bnr__end small { display: block; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--bnr-eyebrow); }
.bnr__end b { font-size: 0.8rem; font-weight: 600; color: var(--bnr-end-ink); font-variant-numeric: tabular-nums; }
.bnr__end[data-kind="event"] { border-top: 3px solid var(--bnr-kind-event); }   /* (v4.5.11 A안) 어느 쪽 종료인지 윗선 색으로 */
.bnr__end[data-kind="gacha"] { border-top: 3px solid var(--bnr-kind-gacha); }
.bnr__end.is-hot { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.bnr__end.is-hot b { color: var(--acc); }
.bnr__end.is-tbd b { color: var(--bnr-quiet); font-weight: 400; }
.bnr__end.is-over b { color: var(--bnr-quiet); text-decoration: line-through; }
.bnr__end.is-over small::after { content: " · 종료됨"; }

/* 진행 막대 — 늦게 끝나는 종료가 100%, 먼저 끝나는 종료는 점선, 점선~100% 는 /// 무늬.
   (v4.6.0) 둥근 막대(12px) 하나 — 동그란 손잡이를 없애고 채움 끝이 현재 위치. /// 무늬는 지난 구간(채움) 위에도 보이고,
   점선은 막대 세로 폭 안에만 있되 밝은 칸 / 어두운 칸이 번갈아 채움 · 빈칸 · 무늬 어느 위에서도 보인다.
   색은 background-color + 같은 색 background-image 두 겹 — 브라우저 강제 색 변환에 흔들리지 않게(v4a 와 같은 방식) */
.bnr__prog { position: relative; margin-top: 6px; --cut: 100%; }
.bnr__prog.has-bubble { padding-top: 34px; }
.bnr__bar { position: relative; z-index: 1; height: 12px; border-radius: 999px; overflow: hidden;
  background-color: var(--bnr-track); background-image: linear-gradient(var(--bnr-track), var(--bnr-track)); box-shadow: inset 0 0 0 1px var(--bnr-bar-edge); }
.bnr__bar i { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; display: block; width: var(--pct); border-radius: 999px;
  background-color: var(--bar-fill, var(--fill)); background-image: linear-gradient(var(--bar-fill, var(--fill)), var(--bar-fill, var(--fill))); }
.bnr__bar.has-cut::before { content: ""; position: absolute; left: var(--cut); right: 0; top: 0; bottom: 0; z-index: 2;
  background: repeating-linear-gradient(135deg, var(--hatch, var(--bnr-hatch)) 0 3px, transparent 3px 8px); }
.bnr__prog[data-late="gacha"] { --hatch: color-mix(in srgb, var(--bnr-kind-gacha) 70%, transparent); }   /* (v4.5.11 A안) 늦게 끝나는 쪽 색 */
.bnr__prog[data-late="event"] { --hatch: color-mix(in srgb, var(--bnr-kind-event) 70%, transparent); }
.bnr__card[data-st="hold"] .bnr__prog, .bnr__card[data-st="done"] .bnr__prog { --hatch: var(--bnr-hatch); }
.bnr__cut { position: absolute; bottom: 0; height: 12px; width: 3px; left: var(--cut); margin-left: -1.5px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--bnr-cut) 0 3px, var(--bnr-cut-edge) 3px 5px); }
.bnr__bubble { position: absolute; bottom: 20px; left: var(--pct); z-index: 4; width: 0; }
.bnr__bd { position: absolute; bottom: 0; left: 0; transform: translateX(var(--shift, -50%)); white-space: nowrap; padding: 4px 10px; border-radius: 8px;
  font-size: 0.74rem; font-weight: 700; background: var(--fill); color: #1b1303; }
.bnr__card[data-st="urgent"] .bnr__bd { color: #3a0509; }
.bnr__card[data-st="sched"] .bnr__bd { color: #0d1117; }
.bnr__bubble::after { content: ""; position: absolute; bottom: -7px; left: -6px; border: 6px solid transparent; border-top-color: var(--fill); border-bottom: 0; }

/* (v4.4) 탭 줄 + 선택한 카드 1장 — PC. 탭이 3개 넘으면 좌우 화살표로 한 칸씩 이동. 선택한 카드 외에는 숨긴다(모바일은 아래에서 전부 보임) */
.bnr.has-tabs { gap: 8px; }
.bnr.has-tabs > .bnr__card:not([data-active="true"]) { display: none; }
.bnr__tabbar { display: flex; align-items: stretch; gap: 8px; }
.bnr__tabvp { flex: 1; min-width: 0; overflow: hidden; }
.bnr__tabtrack { --off: 0; display: flex; gap: 8px; transform: translateX(calc(var(--off) * -1 * ((100% - 16px) / 3 + 8px))); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bnr__tab { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 calc((100% - 16px) / 3); min-width: 0; display: grid; gap: 1px; padding: 7px 12px; border-radius: 10px;
  background: var(--color-bg-secondary); border: 1px solid var(--bnr-line); --acc: var(--bnr-live); }
.bnr__tab[data-st="sched"]  { --acc: var(--bnr-sched); }
.bnr__tab[data-st="warn"]   { --acc: var(--bnr-warn); }
.bnr__tab[data-st="urgent"] { --acc: var(--bnr-urgent); }
.bnr__tab[data-st="hold"]   { --acc: var(--bnr-hold); }
.bnr__tab[data-st="done"]   { --acc: var(--bnr-done); }
.bnr__tab:hover { border-color: color-mix(in srgb, var(--acc) 60%, var(--bnr-line)); }
.bnr__tab[aria-selected="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, var(--color-bg-secondary)); }
.bnr__tab[data-kind="event"][aria-selected="true"] { border-color: var(--bnr-kind-event); background: color-mix(in srgb, var(--bnr-kind-event) 12%, var(--color-bg-secondary)); }   /* (v4.5.11 A안) */
.bnr__tab[data-kind="gacha"][aria-selected="true"] { border-color: var(--bnr-kind-gacha); background: color-mix(in srgb, var(--bnr-kind-gacha) 12%, var(--color-bg-secondary)); }
.bnr__tabtop { display: flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 700; color: var(--acc); white-space: nowrap; overflow: hidden; }
.bnr__tabtop i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.bnr__tabname { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnr__tabname .bnr__kind { font-size: 0.66rem; padding: 0 6px; margin-right: 6px; vertical-align: 1px; }
.bnr__arrow { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  color: var(--bnr-arrow); background: var(--color-bg-secondary); border: 1px solid var(--bnr-line); }
.bnr__arrow:hover:not(:disabled) { border-color: var(--bnr-arrow-hover); color: var(--color-text); }
.bnr__arrow:disabled { opacity: 0.3; cursor: default; }
.bnr__tab:focus-visible, .bnr__arrow:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.bnr__dots { display: none; }   /* 점 표시는 모바일만 */

/* (v4.6.4) 카드 좌우 드래그 — 손가락 스와이프 · 마우스 드래그로 옆 배너(banners.js _wireCardDrag). 세로 스크롤은 브라우저에 맡긴다.
   배너가 2개 이상(.has-tabs)일 때만. 끄는 동안 카드가 손을 따라 움직이고(transform 은 JS), 글자 선택 · 이미지 끌기는 막는다 */
.bnr.has-tabs > .bnr__card { touch-action: pan-y; cursor: grab; }
.bnr.has-tabs > .bnr__card.is-drag { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* 모바일: 이미지를 맨 위에 가로로 꽉 채우고(16:9) 절취선은 가로로, 텍스트 · 가챠 · 종료 박스 · 진행 막대는 그 아래 */
@media (max-width: 640px) {
  .bnr { grid-template-columns: 1fr; }
  /* (v4.3.6) 모바일도 탭 + 카드 1장. 화살표 대신 탭 줄을 가로 스와이프(터치) · 드래그(마우스)하고, 다음 탭이 살짝 보이게 탭 폭을 58% 로 */
  .bnr__arrow { display: none; }
  .bnr__tabbar { position: relative; }
  .bnr__tabbar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, transparent, var(--bnr-surface)); transition: opacity 0.2s; }
  .bnr__tabbar.at-end::after { opacity: 0; }
  .bnr__tabvp { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 1px; cursor: grab; }
  .bnr__tabvp::-webkit-scrollbar { display: none; }
  .bnr__tabvp.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .bnr__tabtrack { position: relative; transform: none; transition: none; }
  .bnr__tab { flex: 0 0 min(58%, 220px); scroll-snap-align: start; min-height: 44px; align-content: center; }
  .bnr__dots { display: flex; justify-content: center; gap: 6px; }
  .bnr__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--bnr-dot); }
  .bnr__dots i.on { background: var(--bnr-dot-on); }
  .bnr__card { flex-direction: column; }
  .bnr__left { width: 100%; }
  .bnr__mid { width: auto; height: 0; border-left: 0; border-top: 2px dashed var(--bnr-cutline); margin: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .bnr__img img, .bnr__tabtrack { transition: none; } }