/* ==========================================================================
   다크 모드
   --------------------------------------------------------------------------
   페이지마다 <style> 이 인라인으로 들어가 있으므로, 여기서는 항상
   `html[data-theme="dark"]` 를 앞에 붙여 명시도(specificity)로 이긴다.
   그래서 이 파일이 어느 순서로 로드되든 결과가 같다.

   테마 값은 <head> 의 인라인 스크립트가 첫 페인트 전에 넣는다.
   그래서 새로고침할 때 밝은 화면이 번쩍이지 않는다.
   ========================================================================== */

html[data-theme="dark"] {
    --ink: #f4f1e8;          /* 본문 글자 */
    --ink-dim: #b6b0a2;      /* 보조 글자 */
    --bg: #15130f;           /* 페이지 배경 */
    --surface: #201c16;      /* 카드 · 본문 상자 */
    --surface-2: #2a251d;    /* 인라인 코드처럼 한 단계 더 밝은 면 */
    --line: #f4f1e8;         /* 테두리 (밝게 뒤집는다) */
    color-scheme: dark;
}

/* ── 바탕 ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--ink);
}

/* ── 브루탈리즘 테두리 · 그림자 ─────────────────────────────────────────────
   테두리는 밝게 뒤집고 그림자는 검정을 유지한다. 카드 면(--surface)이 배경보다
   밝기 때문에, 검정 그림자가 배경보다 더 어두워 오프셋이 그대로 읽힌다. */
html[data-theme="dark"] .brutal-border,
html[data-theme="dark"] .brutal-border-sm { border-color: var(--line); }
html[data-theme="dark"] .border-black { border-color: var(--line) !important; }
html[data-theme="dark"] .border-b-4,
html[data-theme="dark"] .border-t-4 { border-color: var(--line); }

/* ── 면 ─────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--surface-2) !important; }

/* ── 글자 ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .text-black { color: var(--ink) !important; }
/* gray-900 은 본문 대표 글자다(게임 페이지 리드 문단). 빠뜨리면 어두운 배경에
   #111827 이 그대로 남아 대비 1.05:1 — 사실상 안 보인다. dim 이 아니라 ink 로 올린다. */
html[data-theme="dark"] .text-gray-900 { color: var(--ink) !important; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800 { color: var(--ink-dim) !important; }

/* `bg-gray-300 text-gray-600` 조합의 비활성 버튼(데모 준비중)이 있다.
   글자만 밝게 뒤집으면 밝은 회색 면 위에 밝은 글자가 된다. 면도 같이 어둡게 내린다. */
html[data-theme="dark"] .bg-gray-300 { background-color: var(--surface-2) !important; }

/* ── 강조색 위에서는 항상 검정 글자 ─────────────────────────────────────────
   포인트 색(노랑·하늘·분홍·연두)은 브랜드라 그대로 두되,
   그 위의 글자는 대비를 위해 검정으로 고정한다. */
html[data-theme="dark"] :is(.bg-brutal-yellow, .bg-brutal-blue, .bg-brutal-pink, .bg-brutal-green) {
    color: #000;
}
/* 자손을 `*` 로 싹 덮으면 `bg-black text-white` 같은 배지까지 검은 글자가 된다.
   상속에 맡기고, 어두운 글자를 기대하는 유틸만 골라서 되돌린다.
   강조색 클래스와 글자색 클래스가 같은 요소에 함께 붙은 경우도 있으므로 둘 다 잡는다. */
html[data-theme="dark"] :is(.bg-brutal-yellow, .bg-brutal-blue, .bg-brutal-pink, .bg-brutal-green):is(.text-black, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900),
html[data-theme="dark"] :is(.bg-brutal-yellow, .bg-brutal-blue, .bg-brutal-pink, .bg-brutal-green) :is(.text-black, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900) {
    color: #2f2b26 !important;
}
/* 강조색 면 위의 링크도 검정으로.
   단, 자기 배경과 글자색을 스스로 정한 요소(`bg-black text-white` 버튼 등)는 건드리지 않는다. */
html[data-theme="dark"] :is(.bg-brutal-yellow, .bg-brutal-blue, .bg-brutal-pink, .bg-brutal-green) a:not(.text-white):not(.bg-black):not(.bg-white),
html[data-theme="dark"] .article-body :is(.bg-brutal-yellow, .bg-brutal-blue, .bg-brutal-pink, .bg-brutal-green) a:not(.text-white):not(.bg-black):not(.bg-white) { color: #000; }

/* 메인 흐르는 띠 — 배경색이 클래스가 아니라 CSS 규칙에 하드코딩돼 있다 */
html[data-theme="dark"] .marquee-container { color: #000; }

/* 배경을 어둡게 뒤집은 면에서는 글자도 함께 뒤집는다.
   (강조색 헤더 안에 놓인 `bg-white` 배지가 검은 글자 그대로 남는 문제) */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-100 { color: var(--ink); }
html[data-theme="dark"] .hover\:bg-brutal-yellow:hover { color: #000; }

/* ── 본문 ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .article-body li { color: var(--ink); }
html[data-theme="dark"] .article-body h2 > span { color: #000; }
html[data-theme="dark"] .article-body h3 { border-left-color: var(--line); }
html[data-theme="dark"] .article-body a { color: var(--ink); }

/* 밑줄 하이라이트는 밝은 글자 뒤에서 톤을 낮춘다 */
html[data-theme="dark"] .article-body strong {
    background: linear-gradient(transparent 60%, rgba(92, 225, 230, 0.28) 60%);
}

/* 인라인 코드 */
html[data-theme="dark"] .article-body code {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}
/* 코드 블록은 원래도 어두우므로 테두리만 맞춘다 */
html[data-theme="dark"] .article-body pre { border-color: var(--line); }
html[data-theme="dark"] .article-body pre code { color: inherit; }

/* 표 */
html[data-theme="dark"] .article-body th,
html[data-theme="dark"] .article-body td { border-color: var(--line); }
html[data-theme="dark"] .article-body td {
    background-color: var(--surface);
    color: var(--ink);
}
html[data-theme="dark"] .article-body th { color: #000; }

/* 이미지 · 캡션 */
html[data-theme="dark"] .article-body figure img { border-color: var(--line); }
html[data-theme="dark"] .article-body figcaption { color: var(--ink-dim); }

/* 콜아웃 · 연재 목차 */
html[data-theme="dark"] .callout { border-color: var(--line); }
html[data-theme="dark"] .series-box {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .series-no { border-color: var(--line); }
html[data-theme="dark"] .series-current .series-no { background: var(--line); color: #000; }
html[data-theme="dark"] .series-item a:hover { color: #000; }

/* 목록 카드 썸네일 자리 */
html[data-theme="dark"] .post-card { background-color: var(--surface); }

/* ==========================================================================
   테마 전환 버튼
   ========================================================================== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 3px solid #000;
    background: #fdfbf7;
    color: #000;
    box-shadow: 4px 4px 0 0 #000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.theme-toggle:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #000; }
.theme-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #000; }
.theme-toggle:focus-visible { outline: 3px solid #5ce1e6; outline-offset: 3px; }
.theme-toggle svg { width: 20px; height: 20px; }

html[data-theme="dark"] .theme-toggle {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 4px 4px 0 0 #000;
}

/* 지금 테마의 반대쪽 아이콘을 보여준다 — 누르면 무엇이 될지가 보이도록 */
.theme-toggle .theme-ico-sun { display: none; }
.theme-toggle .theme-ico-moon { display: block; }
html[data-theme="dark"] .theme-toggle .theme-ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-ico-moon { display: none; }

/* 전환 순간에만 부드럽게 — 평소 상호작용은 그대로 둔다 */
html.theme-switching,
html.theme-switching body,
html.theme-switching .brutal-border,
html.theme-switching .bg-white,
html.theme-switching .article-body td {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
    html.theme-switching, html.theme-switching * { transition: none !important; }
}


/* ==========================================================================
   페이지 인라인 스타일이 색을 하드코딩한 곳들
   (클래스가 아니라 CSS 규칙으로 박혀 있어 위의 유틸 오버라이드가 닿지 않는다)
   ========================================================================== */

/* 게임 상세 — 탭 */
html[data-theme="dark"] .tab-btn {
    background-color: var(--surface);
    color: var(--ink);
}
html[data-theme="dark"] .tab-btn:hover { background-color: var(--surface-2); }
html[data-theme="dark"] .tab-btn[aria-selected="true"] {
    background-color: var(--line);
    color: #000;
}

/* 게임 상세 — 본문 */
html[data-theme="dark"] .prose-brutal p,
html[data-theme="dark"] .prose-brutal li,
html[data-theme="dark"] .prose-brutal { color: var(--ink); }

/* 블로그 — 카테고리 사이드바 */
html[data-theme="dark"] .cat-link:hover {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .cat-link[aria-current="true"] {
    border-color: var(--line);
    color: #000;
}

/* 코드 블록 기본 글자색.
   highlight.js 가 로드되기 전이나 실패했을 때, 어두운 pre 위에 검은 글자가 남는다.
   atom-one-dark 의 기본 글자색과 같은 값이라 하이라이트가 뜬 뒤에도 어색하지 않다. */
.article-body pre code { color: #abb2bf; }

/* ==========================================================================
   about · SiteHistory · partnership · Information
   --------------------------------------------------------------------------
   이 네 페이지는 원래 다크 테마로 만들어졌다가 밝은 테마로 옮겨진 흔적이 있다.
   페이지 안에 `#content-area .text-white { color:#000 !important }` 같은
   "하위 호환 강제 적용" 블록이 들어 있어서, 배경만 어둡게 바꾸면
   어두운 배경 위에 검은 글자가 남는다. 다크 모드에서는 그 블록을 되돌린다.
   ========================================================================== */
html[data-theme="dark"] #content-area :is(.text-white, .text-zinc-100, .text-zinc-300, .text-zinc-400, .text-zinc-500) {
    color: var(--ink) !important;
}
html[data-theme="dark"] #content-area :is(.bg-black, .bg-zinc-900, .bg-zinc-800) {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
}
html[data-theme="dark"] #content-area :is(.border-zinc-800, .border-zinc-700) {
    border-color: var(--line) !important;
}

/* 네온 강조색은 어두운 배경을 전제로 고른 값이라, 밝은 면 위에서는 읽히지 않는다.
   (개인정보처리방침 조항 제목이 흰 카드 위 형광 하늘색이라 사실상 안 보였다)
   밝은 테마에서만 같은 계열의 어두운 색으로 낮춘다. */
#content-area .text-\[\#00fff9\] { color: #06696d; }
#content-area .text-\[\#fbbf24\] { color: #8a5a00; }
#content-area .text-\[\#ff00c1\] { color: #a3007b; }
#content-area .text-\[\#a855f7\] { color: #6d28d9; }
#content-area .text-\[\#7ed957\] { color: #3f7a24; }
#content-area .text-\[\#ff66c4\] { color: #a3006e; }

html[data-theme="dark"] #content-area .text-\[\#00fff9\] { color: #00fff9; }
html[data-theme="dark"] #content-area .text-\[\#fbbf24\] { color: #fbbf24; }
html[data-theme="dark"] #content-area .text-\[\#ff00c1\] { color: #ff4fd4; }
html[data-theme="dark"] #content-area .text-\[\#a855f7\] { color: #c084fc; }
html[data-theme="dark"] #content-area .text-\[\#7ed957\] { color: #7ed957; }
html[data-theme="dark"] #content-area .text-\[\#ff66c4\] { color: #ff66c4; }

/* 강조 배경 버튼 위 글자는 항상 검정 */
#content-area :is(.bg-\[\#fbbf24\], .bg-\[\#7ed957\], .bg-\[\#00fff9\], .bg-\[\#ff00c1\], .bg-\[\#a855f7\]),
html[data-theme="dark"] #content-area :is(.bg-\[\#fbbf24\], .bg-\[\#7ed957\], .bg-\[\#00fff9\], .bg-\[\#ff00c1\], .bg-\[\#a855f7\]) {
    color: #000 !important;
}

/* `bg-zinc-900/50` 처럼 투명도 변형이 붙은 클래스는 위의 호환 블록이 못 잡는다.
   (about 의 스킬 바 — 밝은 테마에서 어두운 면 위에 검은 글자로 남아 있었다) */
#content-area .bg-zinc-900\/50 {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}
html[data-theme="dark"] #content-area .bg-zinc-900\/50 {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
}

/* 밝은 테마에서도 강조색 위의 회색 글자는 대비가 모자란다 (예: 분홍 위 gray-700) */
:is(.bg-brutal-yellow, .bg-brutal-blue, .bg-brutal-pink, .bg-brutal-green)
    :is(.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900) {
    color: #2f2b26;
}
