/* ══════════════════════════════════════════════════════════════════════════
   v2.43 계절 팔레트 토글 — 봄 · 여름 · 가을 · 겨울
   · <html data-season="spring|summer|autumn|winter"> 속성으로 전환됩니다.
   · 여름(기본)은 원본 아케이드 팔레트라 오버라이드 블록이 없습니다.
   · style.css 뒤에 로드되어 토큰만 갈아끼웁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 컴포넌트(JSX) 장식색 — 여름 기본값 (빌드 JS에서 var() 로 참조) */
:root {
  --cld-1: #93e2fb;  --cld-navy: #111a24; --cld-sky: #4fd0f8;
  --cld-mist: #b9d3e0; --cld-mist2: #cfe5f2; --cld-lilac: #d9d0ee;
  --cld-deep: #0a1a24; --brand-cyan: #0DC2FA;
}

/* ──────────────────────────── 봄 (벚꽃 + 새싹) ─────────────────────────── */
:root[data-season="spring"] {
  --sky: #DF8FB0; --sky-deep: #C96F94;
  --page: #F7EEF3; --paper: #FCF8FB; --paper-soft: #F1E6EF;
  --ink: #463A44; --ink-soft: #4A4A4A;
  --muted: rgba(70,58,68,.58); --muted-2: rgba(70,58,68,.34);
  --line: rgba(70,58,68,.22); --line-strong: rgba(70,58,68,.55);
  --ink-line: #463A44; --glass: #FCF8FB; --hard-shadow: rgba(70,58,68,.42);
  --overlay: rgba(46,28,40,.58);
  --red: #E0698C; --yellow: #F2CC5A; --pink: #E8A0C0; --green: #7CBB5E;
  --accent: #C96F94; --accent-fill: #F2CC5A; --accent-ink: #463A44;
  --signal: #E0698C; --sun: #F2CC5A; --leaf: #7CBB5E; --rose: #E8A0C0;
  --chip-count-bg: rgba(70,58,68,.14); --tag-bg: #FCF8FB;
  --hover-yt: rgba(224,105,140,.16); --hover-soop: rgba(201,111,148,.16);
  --frame-b: #F1E6EF; --frame-c: #F7EEF3; --dot: rgba(70,58,68,.16);
  --code-bg: #F1E6EF; --cream-line: rgba(70,58,68,.22);
  --cream-label: rgba(70,58,68,.6); --heart-ink: #463A44;
  --alt-chip-ink: #C96F94;
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none'%3E%3Cpath d='M60 40l6 17 17 6-17 6-6 17-6-17-17-6 17-6z' fill='%23E8A0C0'/%3E%3Cpath d='M310 90l5 14 14 5-14 5-5 14-5-14-14-5 14-5z' fill='%23F2CC5A'/%3E%3Ccircle cx='140' cy='260' r='11' stroke='%23C96F94' stroke-width='4'/%3E%3Cpath d='M260 330l26 0-13 24z' fill='%237CBB5E'/%3E%3Cpath d='M60 352c14-16 28-16 42 0s28 16 42 0' stroke='%23E0698C' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"][data-season="spring"] {
  --sky: #3A2438; --sky-deep: #2B1A2A;
  --page: #402C42; --paper: #4A354E; --paper-soft: #38263C;
  --ink: #FBEFF5; --ink-soft: rgba(251,239,245,.86);
  --muted: rgba(251,239,245,.56); --muted-2: rgba(251,239,245,.32);
  --line: rgba(251,239,245,.20); --line-strong: rgba(251,239,245,.48);
  --ink-line: #FBEFF5; --glass: #4A354E; --hard-shadow: rgba(0,0,0,.5);
  --overlay: rgba(22,12,24,.72);
  --accent: #F2A9C9; --accent-fill: #F2CC5A; --accent-ink: #3A2438;
  --chip-count-bg: rgba(251,239,245,.16); --tag-bg: #4A354E;
  --code-bg: #38263C; --alt-chip-ink: #F2A9C9;
}
:root[data-theme="dark"][data-season="spring"] .topnav { background: #3A2438; }
:root[data-theme="dark"][data-season="spring"] .lyric-box {
  background: #38263C; color: rgba(251,239,245,.90); border-color: rgba(251,239,245,.55);
}
:root[data-theme="dark"][data-season="spring"] .ch-ls-panel { background: #38263C; }
:root[data-theme="dark"][data-season="spring"] .pf-tag.mint { background: #7CBB5E; }
:root[data-theme="dark"][data-season="spring"] .pf-tag.rose { background: #E8A0C0; color: #3A2438; }
:root[data-season="spring"] .heart-inline.blue { color: #E0698C; }

/* ──────────────────────────── 가을 (단풍 + 골드) ───────────────────────── */
:root[data-season="autumn"] {
  --sky: #B9702C; --sky-deep: #9A5720;
  --page: #F5EBD6; --paper: #FDF9EE; --paper-soft: #F4E8CF;
  --ink: #3D2B1C; --ink-soft: #4A4A4A;
  --muted: rgba(61,43,28,.58); --muted-2: rgba(61,43,28,.34);
  --line: rgba(61,43,28,.22); --line-strong: rgba(61,43,28,.55);
  --ink-line: #3D2B1C; --glass: #FDF9EE; --hard-shadow: rgba(61,43,28,.42);
  --overlay: rgba(43,28,16,.58);
  --red: #D9541E; --yellow: #F0A82E; --pink: #E07B39; --green: #8A9A3B;
  --accent: #9A5720; --accent-fill: #F0A82E; --accent-ink: #3D2B1C;
  --signal: #D9541E; --sun: #F0A82E; --leaf: #8A9A3B; --rose: #E07B39;
  --chip-count-bg: rgba(61,43,28,.14); --tag-bg: #FDF9EE;
  --hover-yt: rgba(217,84,30,.16); --hover-soop: rgba(185,109,43,.16);
  --frame-b: #F4E8CF; --frame-c: #F5EBD6; --dot: rgba(61,43,28,.16);
  --code-bg: #F4E8CF; --cream-line: rgba(61,43,28,.22);
  --cream-label: rgba(61,43,28,.6); --heart-ink: #3D2B1C;
  --alt-chip-ink: #9A5720;
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none'%3E%3Cpath d='M60 40l6 17 17 6-17 6-6 17-6-17-17-6 17-6z' fill='%23D9541E'/%3E%3Cpath d='M310 90l5 14 14 5-14 5-5 14-5-14-14-5 14-5z' fill='%23F0A82E'/%3E%3Ccircle cx='140' cy='260' r='11' stroke='%239A5720' stroke-width='4'/%3E%3Cpath d='M260 330l26 0-13 24z' fill='%238A9A3B'/%3E%3Cpath d='M60 352c14-16 28-16 42 0s28 16 42 0' stroke='%23E07B39' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"][data-season="autumn"] {
  --sky: #2A1C12; --sky-deep: #1B110A;
  --page: #2E2015; --paper: #43301F; --paper-soft: #2E2015;
  --ink: #F5E7D2; --ink-soft: rgba(245,231,210,.86);
  --muted: rgba(245,231,210,.56); --muted-2: rgba(245,231,210,.32);
  --line: rgba(245,231,210,.20); --line-strong: rgba(245,231,210,.48);
  --ink-line: #F5E7D2; --glass: #43301F; --hard-shadow: rgba(0,0,0,.5);
  --overlay: rgba(20,12,6,.72);
  --accent: #F0A82E; --accent-fill: #F0A82E; --accent-ink: #2A1C12;
  --chip-count-bg: rgba(245,231,210,.16); --tag-bg: #43301F;
  --code-bg: #2E2015; --alt-chip-ink: #F0A82E;
}
:root[data-theme="dark"][data-season="autumn"] .topnav { background: #3A2512; }
:root[data-theme="dark"][data-season="autumn"] .lyric-box {
  background: #3B2A1A; color: rgba(245,231,210,.90); border-color: rgba(245,231,210,.55);
}
:root[data-theme="dark"][data-season="autumn"] .ch-ls-panel { background: #3B2A1A; }
:root[data-theme="dark"][data-season="autumn"] .pf-tag.mint { background: #C9B458; }
:root[data-theme="dark"][data-season="autumn"] .pf-tag.rose { background: #E8955A; color: #3D2B1C; }
:root[data-season="autumn"] .heart-inline.blue { color: #FA7C0D; }
:root[data-theme="dark"][data-season="autumn"] .heart-inline.blue { color: #FFB84D; }

/* ──────────────────────────── 겨울 (눈꽃 + 아이스) ─────────────────────── */
:root[data-season="winter"] {
  --sky: #72B9E8; --sky-deep: #4A8CC0;
  --page: #EAF6FE; --paper: #FBFDFF; --paper-soft: #F0F8FE;
  --ink: #22425A; --ink-soft: #4A4A4A;
  --muted: rgba(34,66,90,.58); --muted-2: rgba(34,66,90,.34);
  --line: rgba(34,66,90,.22); --line-strong: rgba(34,66,90,.55);
  --ink-line: #22425A; --glass: #FBFDFF; --hard-shadow: rgba(34,66,90,.42);
  --overlay: rgba(20,32,48,.58);
  --red: #E0483E; --yellow: #F7C64A; --pink: #E88AB0; --green: #57A773;
  --accent: #4A8CC0; --accent-fill: #F7C64A; --accent-ink: #22425A;
  --signal: #E0483E; --sun: #F7C64A; --leaf: #57A773; --rose: #E88AB0;
  --chip-count-bg: rgba(34,66,90,.14); --tag-bg: #FBFDFF;
  --hover-yt: rgba(224,72,62,.16); --hover-soop: rgba(114,185,232,.16);
  --frame-b: #F0F8FE; --frame-c: #EAF6FE; --dot: rgba(34,66,90,.16);
  --code-bg: #F0F8FE; --cream-line: rgba(34,66,90,.22);
  --cream-label: rgba(34,66,90,.6); --heart-ink: #22425A;
  --alt-chip-ink: #4A8CC0;
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none'%3E%3Cpath d='M60 40l6 17 17 6-17 6-6 17-6-17-17-6 17-6z' fill='%239EDDFF'/%3E%3Cpath d='M310 90l5 14 14 5-14 5-5 14-5-14-14-5 14-5z' fill='%23F7C64A'/%3E%3Ccircle cx='140' cy='260' r='11' stroke='%234A8CC0' stroke-width='4'/%3E%3Cpath d='M260 330l26 0-13 24z' fill='%23FBFDFF'/%3E%3Cpath d='M60 352c14-16 28-16 42 0s28 16 42 0' stroke='%239EDDFF' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"][data-season="winter"] {
  --sky: #1B3549; --sky-deep: #142A3C;
  --page: #2A4258; --paper: #2C4459; --paper-soft: #22374A;
  --ink: #F0F8FF; --ink-soft: rgba(240,248,255,.86);
  --muted: rgba(240,248,255,.56); --muted-2: rgba(240,248,255,.32);
  --line: rgba(240,248,255,.20); --line-strong: rgba(240,248,255,.48);
  --ink-line: #F0F8FF; --glass: #2C4459; --hard-shadow: rgba(0,0,0,.5);
  --overlay: rgba(14,33,48,.72);
  --accent: #9EDDFF; --accent-fill: #F7C64A; --accent-ink: #1B3549;
  --chip-count-bg: rgba(240,248,255,.16); --tag-bg: #2C4459;
  --code-bg: #22374A; --alt-chip-ink: #9EDDFF;
}
:root[data-theme="dark"][data-season="winter"] .topnav { background: #1B3549; }
:root[data-theme="dark"][data-season="winter"] .lyric-box {
  background: #22374A; color: rgba(240,248,255,.90); border-color: rgba(240,248,255,.55);
}
:root[data-theme="dark"][data-season="winter"] .ch-ls-panel { background: #22374A; }
:root[data-theme="dark"][data-season="winter"] .pf-tag.mint { background: #9ED8C6; }
:root[data-theme="dark"][data-season="winter"] .pf-tag.rose { background: #E88AB0; color: #1B3549; }

/* ─────────────── 계절 배경 (body 캔버스 위 이미지 레이어) ─────────────── */
body::after {
  content: ""; position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
}
:root[data-season="autumn"] body {
  background-image: var(--noise);
}
:root[data-season="autumn"] body::after {
  background-color: #EBD6AE;
  background-image: url("assets/autumn-bg-pixel.webp"), var(--noise);
  background-size: cover, 120px 120px;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, overlay;
}
:root[data-season="winter"] body { background-image: var(--noise); }
:root[data-season="winter"] body::after {
  background-color: #BDF2FD;
  background-image: url("assets/winter-bg-pixel.webp"), var(--noise);
  background-size: cover, 120px 120px;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, overlay;
}
:root[data-season="spring"] body { background-image: var(--noise); }
:root[data-season="spring"] body::after {
  background-color: #F7EEF3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cg fill='%23E8A0C0'%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23FBFDFF'/%3E%3Crect x='9' y='8' width='1' height='1'/%3E%3Crect x='8' y='9' width='1' height='1'/%3E%3Crect x='10' y='9' width='1' height='1'/%3E%3Crect x='9' y='10' width='1' height='1'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%23FBFDFF'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23A8D08D'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%23A8D08D'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23F2CC5A'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23D97BA4'/%3E%3C/g%3E%3C/svg%3E"), var(--noise);
  background-size: 260px 260px, 120px 120px;
  background-repeat: repeat, repeat;
  background-blend-mode: normal, overlay;
}
:root[data-theme="dark"][data-season="autumn"] body::after {
  opacity: .3; background-color: #2A1C12;
}
:root[data-theme="dark"][data-season="winter"] body::after {
  opacity: .3; background-color: #16303F;
}
:root[data-theme="dark"][data-season="spring"] body::after {
  opacity: .3; background-color: #3A2438;
}

/* ──────────────────── 계절 파티클 (낙엽/눈꽃/꽃잎/반짝) ────────────────── */
#season-fx {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none; overflow: hidden;
}
.fx-bit {
  position: absolute; top: -26px;
  animation: fx-fall linear infinite, fx-sway ease-in-out infinite alternate;
  will-change: top, transform;
}
.fx-bit span { position: absolute; display: block; }
@keyframes fx-fall { from { top: -26px; } to { top: 110vh; } }
@keyframes fx-sway {
  from { transform: translateX(-14px) scale(var(--s, 1)); }
  to   { transform: translateX(14px)  scale(var(--s, 1)); }
}
@keyframes fx-twinkle { from { opacity: .2; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #season-fx { display: none !important; } }

/* ──────────────────────── 계절 전환 버튼 (토글 바) ────────────────────── */
.season-bar {
  position: fixed; right: 12px; bottom: 12px; z-index: 90;
  display: flex; gap: 6px; align-items: center;
  padding: 6px 8px;
  background: var(--paper);
  border: 3px solid var(--ink-line);
  border-radius: var(--r-pill);
  box-shadow: var(--hd-1);
}
.season-btn {
  width: 34px; height: 34px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: 2px solid var(--ink-line); border-radius: 50%;
  background: var(--paper-soft); color: var(--ink);
  font-family: var(--font-pixel); font-size: 11px; line-height: 1;
  cursor: pointer;
}
.season-btn::after {
  content: ""; width: 12px; height: 4px;
  background: var(--sw, var(--ink)); border-radius: 1px;
}
.season-btn.on {
  background: var(--yellow); color: var(--accent-ink);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--hard-shadow);
}
.season-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* 계절별 컴포넌트 장식색 오버라이드 (JSX var() 스왑분) */
:root[data-season="autumn"] { --cld-1:#FBC493; --brand-cyan:#FA7C0D; --cld-navy:#241A11; --cld-sky:#F89E4F; --cld-mist:#E0CBB9; --cld-mist2:#F2DFCF; --cld-lilac:#EEDED0; }
:root[data-season="spring"] { --cld-1:#FBD9E9; --brand-cyan:#E0698C; --cld-navy:#2E1F33; --cld-sky:#F2A9C9; --cld-mist:#E9CFE0; --cld-mist2:#F6E3F0; --cld-lilac:#EEDCF2; }

/* [v2.43-2] 토글 바 활성 시 페이지 끝 여백 확보 — 바닥 콘텐츠가 바에 가려지지 않게 */
body:has(.season-bar){padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px));}

/* ──────────────────────── v2.46: 접기 버튼 ──────────────────────────────
   · 스크롤 중 우하단 바가 내용을 잠깐 가릴 때 「숨김」을 눌러 작은 버튼으로 줄입니다.
   · 접힌 상태에서는 현재 계절 이름이 버튼에 보이고, 누르면 다시 펼쳐집니다. */
.season-toggle {
  height: 34px; padding: 0 12px;
  display: flex; align-items: center; gap: 7px;
  border: 2px solid var(--ink-line); border-radius: 999px;
  background: var(--paper-soft); color: var(--ink);
  font-family: var(--font-pixel); font-size: 11px; line-height: 1;
  cursor: pointer;
}
.season-toggle::before {
  content: ""; width: 10px; height: 6px; border-radius: 2px;
  background: var(--sw, var(--ink));
}
.season-bar.collapsed { padding: 8px; }
.season-bar.collapsed .season-btn { display: none; }