FOUC(화면 깜빡임) 없는 다크 모드 및 다국어(KO/EN) 프리페인트(Pre-Paint) 아키텍처FOUC-Free Dark Mode and Multilingual (KO/EN) Pre-Paint Architecture

<!-- 1. <head> 최상단에 배치: 첫 페인트(First Paint) 이전에 동기 실행 -->
<script>
(function() {
    var docEl = document.documentElement;
    // 언어 상태 복원 (ko | en)
    try {
        var savedLang = localStorage.getItem('lysc-lang');
        if (savedLang === 'en' || savedLang === 'ko') {
            docEl.setAttribute('data-lang', savedLang);
            docEl.lang = savedLang;
        }
    } catch (e) {}

    // 테마 상태 복원 (localStorage 우선, 없으면 OS prefers-color-scheme 참조)
    try {
        var savedTheme = localStorage.getItem('lysc-theme');
        if (savedTheme !== 'dark' && savedTheme !== 'light') {
            savedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        docEl.setAttribute('data-theme', savedTheme);
    } catch (e) {
        docEl.setAttribute('data-theme', 'light');
    }
})();
</script>

<!-- 2. CSS 속성 선택자 기반 테마 및 전환 트랜지션 제어 -->
<style>
html[data-theme="dark"] {
    --ink: #f4f1e8;
    --ink-dim: #b6b0a2;
    --bg: #15130f;
    --surface: #201c16;
    --line: #f4f1e8;
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--ink);
}
/* 수동 토글 시에만 250ms 동안 부드러운 색상 전환 허용 */
html.theme-switching, html.theme-switching * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
/* 언어별 전용 블록 즉시 토글 */
html[data-lang="en"] [data-lang-only="ko"] { display: none !important; }
html:not([data-lang="en"]) [data-lang-only="en"] { display: none !important; }
</style>

<!-- 1. Place at the top of <head>: executes synchronously before First Paint -->
<script>
(function() {
    var docEl = document.documentElement;
    // Restore language state (ko | en)
    try {
        var savedLang = localStorage.getItem('lysc-lang');
        if (savedLang === 'en' || savedLang === 'ko') {
            docEl.setAttribute('data-lang', savedLang);
            docEl.lang = savedLang;
        }
    } catch (e) {}

    // Restore theme state (localStorage first, fallback to OS prefers-color-scheme)
    try {
        var savedTheme = localStorage.getItem('lysc-theme');
        if (savedTheme !== 'dark' && savedTheme !== 'light') {
            savedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        docEl.setAttribute('data-theme', savedTheme);
    } catch (e) {
        docEl.setAttribute('data-theme', 'light');
    }
})();
</script>

<!-- 2. CSS attribute selector theme rules and transition control -->
<style>
html[data-theme="dark"] {
    --ink: #f4f1e8;
    --ink-dim: #b6b0a2;
    --bg: #15130f;
    --surface: #201c16;
    --line: #f4f1e8;
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--ink);
}
/* Allow smooth 200ms color transition only during manual user toggle */
html.theme-switching, html.theme-switching * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
/* Immediately hide inactive language blocks */
html[data-lang="en"] [data-lang-only="ko"] { display: none !important; }
html:not([data-lang="en"]) [data-lang-only="en"] { display: none !important; }
</style>