/* 밝은 화면 (2026-10-18) — <html data-mode="light"> 일 때만 적용돼요. 맨 마지막에 불러요.
   켜는 곳: 내 메뉴 → 화면 → 밝게 / 자동(기기 설정 따라). 기본은 어두운 화면 그대로예요.
   원칙: 색은 아래 변수로만 바꾸고, 어두운 화면용으로 박아 둔 색(#…, rgba…)만 밑에서 하나씩 덮어요. */
html[data-mode="light"] {
  color-scheme: light;
  --page: #F5F4F9;
  --bg: #F5F4F9;
  --card: #FFFFFF;
  --raise: #EFEDF5;
  --line: #E1DEEA;
  --text: #1C1A24;
  --muted: #57536A;
  --faint: #6C6780;
  --accent: #6A4BDB;
  --accent-soft: #5A3CCF;     /* 밝은 화면에선 '연한 색'도 글자로 읽히게 진하게 */
  --accent-deep: #5434C4;
  --ok: #12793F;
  --live: #C9243F;
}
html[data-mode="light"][data-theme="yusin"] {
  --page: #F3F6FB; --bg: #F3F6FB; --card: #FFFFFF; --raise: #EBF0F8; --line: #DCE3EF;
  --accent: #2F62D6; --accent-soft: #2552BC; --accent-deep: #1F4BB0;
}
html[data-mode="light"][data-theme="sinyu"] {
  --page: #FBF4F7; --bg: #FBF4F7; --card: #FFFFFF; --raise: #F6EAF0; --line: #EEDCE5;
  --accent: #C2306F; --accent-soft: #A82860; --accent-deep: #9C2259;
}

/* ───────── 어두운 화면용으로 박아 둔 색 덮기 ───────── */
/* 포인트 색 버튼·선택된 칩: 진한 보라 위에는 흰 글자 */
html[data-mode="light"] .btn:not(.ghost):not(.danger-solid),
html[data-mode="light"] .bd-tabs a.on, html[data-mode="light"] .bd-pages a.on,
html[data-mode="light"] .bd-catpick input:checked + span, html[data-mode="light"] .dm-msgs li.me p,
html[data-mode="light"] .ob-steps li.done .ob-check { color: #fff; }
html[data-mode="light"] .donation .coin, html[data-mode="light"] .songs li.next .song-no,
html[data-mode="light"] .w-new.first, html[data-mode="light"] .heart .combo { color: #fff !important; }
html[data-mode="light"] .btn.danger-solid { background: #C2334A; }
html[data-mode="light"] .switch.on .knob { background: #fff; }

/* 연한 회색 글자 → 읽히는 회색 */
html[data-mode="light"] .lp-lead, html[data-mode="light"] .lp-card p, html[data-mode="light"] .lp-cmd span,
html[data-mode="light"] .lp-steps p, html[data-mode="light"] .lp-list span, html[data-mode="light"] .lp-final-box p,
html[data-mode="light"] .lp-nav nav a:not(.btn), html[data-mode="light"] .lp-char figcaption span,
html[data-mode="light"] .w-about, html[data-mode="light"] .acc-list, html[data-mode="light"] .g-steps p,
html[data-mode="light"] .g-cmds dd, html[data-mode="light"] .u-list ul, html[data-mode="light"] .doc ul,
html[data-mode="light"] .onair.off h2, html[data-mode="light"] .w-top b, html[data-mode="light"] .join b { color: var(--muted); }
html[data-mode="light"] .lp-meta, html[data-mode="light"] .lp-tile span, html[data-mode="light"] .lp-foot a,
html[data-mode="light"] .lp-foot .lp-wrap, html[data-mode="light"] .lp-foot .lp-biz,
html[data-mode="light"] th, html[data-mode="light"] .dex-item small, html[data-mode="light"] .timeline-labels,
html[data-mode="light"] .song-body small, html[data-mode="light"] .toggles small, html[data-mode="light"] .song-no,
html[data-mode="light"] .join, html[data-mode="light"] .note-line span,
html[data-mode="light"] .live-stat small, html[data-mode="light"] .econ-tile small { color: var(--faint); }
html[data-mode="light"] .lp-foot a:hover { color: var(--text); }
html[data-mode="light"] .tags span.cat { --c: #6C6780; }

/* 초록·주황·분홍 같은 밝은 글자 → 흰 바탕에서 읽히게 진하게 */
html[data-mode="light"] .ok-badge, html[data-mode="light"] .bd-cat.c-info { color: #12793F; border-color: rgba(18, 121, 63, .45); }
html[data-mode="light"] .st-연결됨 .adm-state, html[data-mode="light"] .ah-pill.on, html[data-mode="light"] .hl-season a.saved::after,
html[data-mode="light"] .hi-note.auto, html[data-mode="light"] .ah-steps li.done b::after, html[data-mode="light"] .iq-kind.k-idea { color: #12793F; }
html[data-mode="light"] .ck-streak b, html[data-mode="light"] .warn-badge, html[data-mode="light"] .bd-cat.c-notice, html[data-mode="light"] .sp-warn { color: #A85A00; }
html[data-mode="light"] .warn-badge, html[data-mode="light"] .bd-cat.c-notice { border-color: rgba(168, 90, 0, .45); }
html[data-mode="light"] .lp-live { color: #C9243F; }
html[data-mode="light"] .lp-char-y, html[data-mode="light"] .w-card { --c: #2F62D6; }
html[data-mode="light"] .lp-char-s, html[data-mode="light"] .w-card.w-sinyu { --c: #C2306F; }

/* 출석 달력: 출석한 날은 진한 포인트 색 위 흰 글자 */
html[data-mode="light"] .ck-d.on { background: var(--accent); color: #fff; }

/* 방송 중 배지: 흰 글자 대신 빨강 글자 */
html[data-mode="light"] .live-badge.on { color: var(--live) !important; }

/* 채팅 닉네임 색(밝은 파스텔)은 흰 바탕에서 읽히게 어둡게 섞어요 */
html[data-mode="light"] .av, html[data-mode="light"] .msg-head b, html[data-mode="light"] .people span { color: color-mix(in srgb, var(--who) 55%, #1C1A24); }

/* 첫 화면 미리보기의 갈색 아바타 */
html[data-mode="light"] .lp-av[style*="#2A2210"] { background: var(--raise) !important; color: var(--accent) !important; }

/* 어두운 그라데이션 바탕 → 밝은 면 */
html[data-mode="light"] .w-card { background: linear-gradient(150deg, color-mix(in srgb, var(--c) 9%, #fff), #fff 60%); }
/* 어두운 반투명 바탕(rgba(12,10,22,…))으로 박아 둔 면 */
html[data-mode="light"] .regular-form input[type=number], html[data-mode="light"] .btn.ghost,
html[data-mode="light"] .theme-pick, html[data-mode="light"] .subnav { background: var(--card); }
html[data-mode="light"] .quiz-list li, html[data-mode="light"] .lp-cmd, html[data-mode="light"] .lp-steps li { background: var(--raise); }
html[data-mode="light"] .stat, html[data-mode="light"] .cmd-item, html[data-mode="light"] .report-nums div,
html[data-mode="light"] .econ-tile, html[data-mode="light"] .live-stat, html[data-mode="light"] .w-item { background: var(--raise); }
html[data-mode="light"] .lp-card { background: var(--card); }
html[data-mode="light"] .btn.danger-solid { color: #fff; }
/* 위로 뜨는 메뉴·말풍선의 그림자는 밝은 화면에선 옅게 */
html[data-mode="light"] .mm-pop { box-shadow: 0 12px 32px rgba(28, 26, 36, .14) !important; }
html[data-mode="light"] .mm-theme .theme-pick { background: var(--raise); }
html[data-mode="light"] .acc-tag.del { color: #B4233A; background: rgba(180, 35, 58, .1); }