/* SELAH NOTE design tokens: one palette for every page, dark by default ("dark studio": near-black
   surfaces, a mint accent and one colour per kind of score) and a light theme in the same language.
   A small script in each page head sets <html data-theme> before anything is drawn (dark unless the
   visitor chose light). The score sheet keeps white paper unless 종이색 악보 is turned off (data-paper).
   Older names (--green, --gold, --rose, --paper, --serif) stay as aliases for code that still uses them. */
:root,:root[data-theme=dark]{color-scheme:dark;
 --bg:#0a0c0f;--surface:#12151a;--surface-2:#181c22;--raised:#1f242c;--line:#262c35;--line-strong:#343c47;
 --ink:#f1f4f7;--muted:#a0a9b4;--faint:#848e9b;
 --accent:#36e2b4;--accent-hover:#6aeec9;--accent-text:#36e2b4;--on-accent:#04140f;
 --accent-soft:#36e2b424;--accent-tint:#36e2b40f;--accent-line:#36e2b466;--focus:#36e2b4;--glow:0 0 0 3px #36e2b42e;
 --amber:#ffb547;--amber-text:#ffc46b;--amber-soft:#ffb5471f;--amber-line:#ffb54766;--on-amber:#1a1204;
 --danger:#ff5d6c;--danger-text:#ff7a86;--danger-soft:#ff5d6c1f;--danger-line:#ff5d6c66;--on-danger:#1c0609;
 --violet:#a993ff;--violet-text:#b9a8ff;--violet-soft:#a993ff21;
 --toast-bg:#f1f4f7;--toast-ink:#0a0c0f;--scrim:#000000a6;
 --c-hymn:#ffb547;--c-ccm:#36e2b4;--c-classic:#8fa8ff;--c-cello:#ff7a8a;--c-practice:#7ddc6a;--c-play:#c49bff;--c-like:#ff5d6c;
 --shadow-1:0 1px 0 #ffffff08 inset,0 1px 2px #00000066;--shadow-2:0 8px 24px #00000080,0 1px 0 #ffffff0a inset;--shadow-3:0 24px 64px #000000b3,0 0 0 1px #ffffff0f;
 --skeleton:#181c22;--skeleton-shine:#232931;
 /* The score sheet: white paper with black notes, or the page's own dark when 종이색 악보 is off */
 --paper-bg:#fff;--paper-ink:#14171b;--paper-muted:#5f6873;--paper-line:#d9dee4;--paper-accent:#06705a;--paper-tint:#eef6f3;
 --radius-s:8px;--radius-m:12px;--radius-l:16px;
 --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
 --green:var(--accent);--green-deep:var(--accent-hover);--green-soft:var(--accent-soft);--green-tint:var(--accent-tint);
 --gold:var(--amber);--gold-soft:var(--amber-soft);--rose:var(--danger-text);--rose-soft:var(--danger-soft);--paper:var(--surface);--serif:var(--font);
 --notation-ink:#e9edf1}
:root[data-theme=light]{color-scheme:light;
 --bg:#f3f5f7;--surface:#fff;--surface-2:#f7f8fa;--raised:#eef1f4;--line:#e2e6eb;--line-strong:#cdd3db;
 --ink:#0d1117;--muted:#4f5a66;--faint:#5b6470;
 --accent:#087f62;--accent-hover:#066a52;--accent-text:#06705a;--on-accent:#fff;
 --accent-soft:#087f621a;--accent-tint:#087f620b;--accent-line:#087f6266;--focus:#0a9c78;--glow:0 0 0 3px #0a9c7833;
 --amber:#b86e00;--amber-text:#9a5a00;--amber-soft:#ffb54724;--amber-line:#d9952f80;--on-amber:#fff;
 --danger:#c22f42;--danger-text:#c22f42;--danger-soft:#e0384a14;--danger-line:#c22f4266;--on-danger:#fff;
 --violet:#5b4ad1;--violet-text:#5b4ad1;--violet-soft:#5b4ad114;
 --toast-bg:#14171b;--toast-ink:#f1f4f7;--scrim:#0d111766;
 --c-hymn:#b86e00;--c-ccm:#0a9c78;--c-classic:#4a63d9;--c-cello:#d23f57;--c-practice:#3f8f2a;--c-play:#8a55d6;--c-like:#d0283c;
 --shadow-1:0 1px 2px #0d11170f;--shadow-2:0 6px 20px #0d111714,0 1px 3px #0d11170d;--shadow-3:0 24px 60px #0d111733,0 0 0 1px #0d11170d;
 --skeleton:#eceff3;--skeleton-shine:#f7f8fa;
 --notation-ink:#14171b}
/* 종이색 악보 off in the dark theme: the score is drawn in light ink on the dark page */
:root:not([data-theme=light]):not([data-paper=light]){--paper-bg:var(--surface);--paper-ink:var(--notation-ink);--paper-muted:var(--muted);--paper-line:var(--line-strong);--paper-accent:var(--accent-text);--paper-tint:var(--accent-tint)}
/* Japanese pages read kana and kanji in a Japanese face; Pretendard still draws Hangul */
html:lang(ja){--font:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic',Meiryo,system-ui,'Pretendard Variable',Pretendard,sans-serif}
html{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink);font-family:var(--font)}
::selection{background:var(--accent-soft);color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:root{scrollbar-color:var(--line-strong) transparent}
/* A loading placeholder in the shape of what comes: a still block that shimmers once the page is calm */
@keyframes selah-shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
.skeleton,.skeleton-line{background:var(--skeleton) linear-gradient(100deg,transparent 30%,var(--skeleton-shine) 50%,transparent 70%) no-repeat;background-size:220% 100%;animation:selah-shimmer 1.6s ease-in-out infinite;border-radius:var(--radius-s)}
@media(prefers-reduced-motion:reduce){.skeleton,.skeleton-line{animation:none;background-image:none}}
@media print{:root,:root[data-theme]{color-scheme:light;--bg:#fff;--surface:#fff;--ink:#000;--paper-bg:#fff;--paper-ink:#000;--paper-muted:#444;--paper-line:#ccc;--paper-accent:#000;--paper-tint:#fff}}