/* theme.css — (v4.6.0) 밝게 / 어둡게 전환. 맨 마지막에 불러온다(다른 파일의 :root 토큰을 밝게 값으로 덮는다).
   <html data-theme="light|dark"> 는 index.html head 인라인 스크립트가 CSS 보다 먼저 정한다(첫 화면 깜빡임 방지) —
   저장된 선택(localStorage "theme") → 없으면 기기 설정(prefers-color-scheme). 전환 버튼 · 저장은 js/theme.js.
   어둡게 = 각 파일의 :root 기본값 그대로. 밝게 = 아래 값(디자인: 목업 아티팩트 「v4.6.0 테마 목업」 밝게 A — BPM 톤). */

:root { color-scheme: dark; --theme-ease: cubic-bezier(0.4, 0, 0.2, 1); }   /* 테마 전환 곡선(부드럽게 출발 · 감속) */

:root[data-theme="light"] {
  color-scheme: light;

  /* layout.css */
  --color-bg: #f5f4fb;
  --color-bg-secondary: #ffffff;
  --color-text: #232436;
  --color-text-muted: #5c6075;
  --color-border: #dcd8ea;
  --color-live: #e0202f;
  --color-live-text: #ffffff;
  --color-late: #a8650a;
  --color-sched: #5d6e8c;
  --color-collab: #6b5bc4;
  --color-text-faint: #8a8ea3;
  --color-line-soft: #e7e4f0;
  --color-grid: #eceaf3;
  --color-dawn: rgba(107, 91, 196, 0.11);
  --color-dawn-edge: rgba(107, 91, 196, 0.35);
  --color-hover: #f0eefa;
  --color-hover-veil: rgba(35, 36, 54, 0.06);
  --color-raised: #ece9f7;
  --color-raised-edge: #cfcae3;
  --color-img: #e7e4f2;
  --color-img-broken: #d6d3e2;
  --color-tag-bg: #e6e4ef;
  --color-tag-fg: #3d4052;
  --color-tag-mem-bg: #d7f0e1;
  --color-tag-mem-fg: #1e5a3c;
  --color-ended: #8a8d9c;
  --color-ended-edge: #d0cedb;
  --color-ended-mark: #c9c7d4;
  --color-past: rgba(35, 36, 54, 0.05);
  --color-ring-track: rgba(35, 36, 54, 0.1);
  --color-ph-deep: #ffffff;
  --color-ph-base: #f0eefa;
  --color-tint-ink: #1c1d2b;
  --shadow-pop: rgba(40, 30, 80, 0.18);

  /* notices.css */
  --ntc-surface2: #f0eefa;
  --ntc-hover: #f5f3fc;
  --ntc-faint: #8a8ea3;
  --ntc-border-soft: #e4e1ee;
  --ntc-focus: #2f8c80;
  --ntc-dsoon: #a85a0c;   /* (v4.6.4) D-7 이내 — 밝은 바탕 대비(AA)용 진한 주황 */
  --ntc-cat-live: #b02a6f;   /* (v4.6.4) 분류 6색 — 밝게 */
  --ntc-cat-event: #13786b;
  --ntc-cat-broadcast: #1d64ad;
  --ntc-cat-goods: #6247c0;
  --ntc-cat-game: #3a7a26;
  --ntc-cat-etc: #586174;
  --ntc-lamp-off: #f0d6d8;
  --ntc-shadow: rgba(40, 30, 80, 0.16);
  --ntc-accent: #6b5bc4;   /* (v4.6.4) 고정 팝업 테두리 · 팝업 링크 */
  --ntc-scrim: rgba(20, 18, 40, 0.38);   /* (v4.6.4) 모바일 시트 뒤 배경 */
  --ntc-lg-ink: #ffffff;                 /* (v4.7.0) 라이브공연 탭 공연별 묶음 — 밝게 */
  --ntc-lg-head: rgba(176, 42, 111, 0.06);
  --ntc-lg-rows: #faf9fd;
  --ntc-lg-past: #f3f2f7;

  /* banners.css */
  --bnr-surface: #f0eefa;
  --bnr-line: #dedbea;
  --bnr-live: #17788b;   --bnr-live-soft: #e1f3f7;   --bnr-fill-live: #3db1ca;
  --bnr-warn: #8f5b04;   --bnr-warn-soft: #fbefd3;   --bnr-fill-warn: #f4b42c;
  --bnr-urgent: #c0352f; --bnr-urgent-soft: #fbe3e1; --bnr-fill-urgent: #ec5a55;
  --bnr-sched: #4f6585;  --bnr-sched-soft: #e6ebf3;  --bnr-fill-sched: #8fa3c2;
  --bnr-hold-soft: #f8ecd6;
  --bnr-done: #6f7480;   --bnr-done-soft: #ececf1;   --bnr-fill-done: #a3a8b3;
  --bnr-track: #dcd8ea;
  --bnr-hatch: rgba(35, 36, 54, 0.28);
  --bnr-cut: #232436;
  --bnr-cut-edge: #ffffff;
  --bnr-bar-edge: rgba(35, 36, 54, 0.08);
  --bnr-veil-a: rgba(255, 255, 255, 0.62);
  --bnr-veil-b: rgba(255, 255, 255, 0.9);
  --bnr-cutline: rgba(35, 36, 54, 0.25);
  --bnr-eyebrow: #5c6075;
  --bnr-orig: #6b6f85;
  --bnr-dates: #5c6075;
  --bnr-done-name: #6b6f85;
  --bnr-tagline: #5c6075;
  --bnr-glass: rgba(255, 255, 255, 0.6);
  --bnr-glass-edge: rgba(35, 36, 54, 0.1);
  --bnr-tag-bg: rgba(35, 36, 54, 0.08);
  --bnr-tag-fg: #232436;
  --bnr-end-bg: rgba(255, 255, 255, 0.7);
  --bnr-end-edge: rgba(35, 36, 54, 0.12);
  --bnr-end-ink: #232436;
  --bnr-quiet: #8a8ea3;
  --bnr-arrow: #5c6075;
  --bnr-kind-event: #2f5bd3; --bnr-kind-event-ink: #ffffff;   /* (v4.5.11) 종류 배지 — 밝게 */
  --bnr-kind-gacha: #c2307f; --bnr-kind-gacha-ink: #ffffff;
  --bnr-arrow-hover: #8a8ea3;
  --bnr-dot: #cfcae3;
  --bnr-dot-on: #232436;

  /* tweets.css */
  --tw-badge-bg: var(--color-live);   /* (v4.9.6) 청록 → 빨강 */
  --tw-badge-fg: #ffffff;
  --tw-xcard-bg: #ffffff;

  /* playerpop.css */
  --mp-accent: #6b5bc4;
  --mp-accent-fg: #ffffff;
  --mp-panel-2: #f0eefa;
  --mp-well: #eeebf7;
  --mp-well-sh1: rgba(35, 36, 54, 0.1);
  --mp-well-sh2: rgba(35, 36, 54, 0.06);
  --mp-well-hi: rgba(255, 255, 255, 0.9);
  --mp-well-line: rgba(35, 36, 54, 0.08);
}

/* (v4.5.8) 밝게: 노노카 지각 이스터에그의 카드 · 팝업 본문 글자와 테두리(king.css 토큰). 은빛 · 연금색은 밝은 바탕에서 안 보여 진한 쇠색 · 진한 금색으로.
   무대 그림(.kg-scene)은 자체 어두운 배경이라 두 테마 공통 */
:root[data-theme="light"] .k-on {
  --k-ink-kick: #5b6476;
  --k-ink: #2f3445;
  --k-ink-gold-kick: #8f6312;
  --k-ink-gold: #8a5a00;
  --k-edge-lo: #a9afbf;
  --k-edge: #6f7787;
}

/* 밝게: 행사 배너 상태 딱지는 진한 상태색 위 흰 글자 */
:root[data-theme="light"] .bnr__card .bnr__state { color: #ffffff; }

/* ── 전환 버튼 — 소식 막대의 마지막 칸(▾ 오른쪽). notices.js 가 막대를 다시 그릴 때마다 같은 버튼을 옮겨 붙인다 ── */
.ntc__theme {
  flex: none;
  width: 2.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-left: 1px solid var(--ntc-border-soft);
  cursor: pointer;
}
.ntc__theme:hover { background: var(--ntc-surface2); }
/* 모바일: 버튼이 한 칸 늘어난 만큼 ▾ · 전환 두 칸을 좁혀 소식 제목 자리를 지킨다 */
@media (max-width: 767px) {
  .ntc__tgl, .ntc__theme { width: 2.25rem; }
}
.ntc__theme:focus-visible { outline: 2px solid var(--ntc-focus); outline-offset: -2px; }
/* 해 · 달을 같은 자리에 겹쳐 두고 바꿔 보인다(BPM 테마 토글과 같은 방식). 아이콘 = 지금 테마 */
.ntc__theme svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.4) rotate(-90deg);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
:root:not([data-theme="light"]) .ntc__theme [data-icon="dark"],
:root[data-theme="light"] .ntc__theme [data-icon="light"] {
  opacity: 1;
  transform: none;
}

/* (v4.9.10) 전환 방식 1 — View Transitions: 옛 화면은 그대로 두고 새 화면을 위에 서서히 드러낸다(기본 교차 페이드의 밝아졌다 어두워지는 겹침 없이). theme.js 가 html.theme-vt 를 켠다 */
@keyframes theme-vt-in { from { opacity: 0; } to { opacity: 1; } }
/* 새 화면은 찍힌 사진이 아니라 살아 있는 화면이라, 각 요소가 자기 transition(0.15~0.3s 색 · 투명도)을 따로 돌리면 서서히 드러나는 동안 두 번 바뀌는 것처럼 끊겨 보인다 → 전환 중엔 요소별 transition 을 끈다(페이드 한 가지만 남김) */
html.theme-vt *, html.theme-vt *::before, html.theme-vt *::after { transition: none !important; }
html.theme-vt::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { animation: theme-vt-in 0.9s cubic-bezier(0.45, 0, 0.25, 1); mix-blend-mode: normal; }

/* 전환 방식 2(View Transitions 를 못 쓸 때) — 누른 순간에만 배경 · 글자 · 테두리 색이 서서히 바뀐다(theme.js 가 html.theme-anim 을 잠깐 켠다). 평소 움직임에는 영향 없음 */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim *,
  html.theme-anim *::before,
  html.theme-anim *::after {
    /* (v4.9.10) 0.3s ease → 0.7s 감속 곡선, 그림자 · 외곽선 색도 같이 — 일부만 먼저 바뀌어 번쩍이던 것을 줄인다 */
    transition: background-color 0.7s var(--theme-ease), color 0.7s var(--theme-ease), border-color 0.7s var(--theme-ease), fill 0.7s var(--theme-ease), stroke 0.7s var(--theme-ease), box-shadow 0.7s var(--theme-ease), outline-color 0.7s var(--theme-ease), text-decoration-color 0.7s var(--theme-ease) !important;
  }
  /* 배경 장식(bgdeco.css)의 투명도 · 그라데이션 톤도 함께 */
  html.theme-anim #bgdeco .bgd-shape { transition: opacity 0.7s var(--theme-ease) !important; }
  html.theme-anim #bgdeco stop { transition: stop-opacity 0.7s var(--theme-ease), stop-color 0.7s var(--theme-ease) !important; }
  html.theme-anim .ntc__theme svg { transition: opacity 0.3s ease, transform 0.3s ease !important; }   /* 해 · 달 바꿔 보이기는 그대로 */
}
@media (prefers-reduced-motion: reduce) {
  .ntc__theme svg { transition: none; }
}