@charset "utf-8";

/* ==========================================================================
   GLTV 컬러 토큰
   - 라이트/다크 두 벌의 색상을 이 파일 한 곳에서 관리합니다.
   - default.css, mobile.css, 각 스킨 style.css 는 아래 변수만 참조합니다.
   - <html data-theme="light|dark"> 값으로 전환됩니다. (head.sub.php 참고)
   ========================================================================== */

/* ---------- 라이트 모드 ---------- */
:root,
:root[data-theme="light"] {
    color-scheme: light;

    /* 바탕 */
    --bg: #f4f6f9;              /* 페이지 바탕 */
    --surface: #ffffff;         /* 박스, 카드, 입력창 */
    --surface-2: #f6f8fa;       /* 살짝 가라앉은 면 (목록 헤더 등) */
    --surface-3: #eaeef2;       /* 더 진한 면 */
    --tint: #eef1f8;            /* 네이비 기운의 강조 면 (hover, 선택) */
    --tint-strong: #dde3f0;
    --neutral: #8f99a6;         /* 회색 버튼 */
    --neutral-strong: #6e7781;
    --inverse: #1b2a41;         /* 어두운 블록 (툴팁, 진한 버튼) */

    /* 글자 */
    --text-strong: #0f1722;
    --text: #3b4552;
    --text-muted: #5f6a78;
    --text-faint: #8691a0;
    --on-accent: #ffffff;       /* 강조색/어두운 면 위의 글자 */
    --on-accent-muted: rgba(255, 255, 255, .78);

    /* 선 */
    --border: #d8dee6;
    --border-soft: #e9edf2;
    --border-strong: #4a5565;

    /* 브랜드 : 크림슨 */
    --primary: #c42b12;
    --primary-hover: #a31f0b;
    --primary-text: #b4230d;    /* 바탕 위에 올라가는 강조 글자 */

    /* 보조 : 인디고 / 포인트 : 옐로 */
    --accent: #3949ab;
    --highlight: #edff00;

    /* 헤더·푸터 : 네이비 그라데이션 (두 모드 공통으로 어두운 면) */
    --chrome-bg: linear-gradient(125deg, #0a172a 0%, #0a172a 50%, #3d5670 100%);
    --chrome-solid: #0a172a;
    --chrome-text: #ffffff;
    --chrome-text-muted: #a3b1c2;
    --chrome-line: rgba(255, 255, 255, .14);
    --chrome-field: rgba(255, 255, 255, .10);

    --shadow: 0 1px 3px rgba(15, 23, 34, .08);
}

/* ---------- 다크 모드 ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #1c2129;
    --surface-3: #262c35;
    --tint: #1a2233;
    --tint-strong: #24304a;
    --neutral: #3d444d;
    --neutral-strong: #59636e;
    --inverse: #30363d;

    --text-strong: #f0f3f6;
    --text: #c5ccd3;
    --text-muted: #8b949e;
    --text-faint: #6e7681;
    --on-accent: #ffffff;
    --on-accent-muted: rgba(255, 255, 255, .78);

    --border: #30363d;
    --border-soft: #21262d;
    --border-strong: #6e7681;

    --primary: #d93a1c;
    --primary-hover: #b82c12;
    --primary-text: #ff7a5c;

    --accent: #7986cb;
    --highlight: #edff00;

    --chrome-bg: linear-gradient(125deg, #0a172a 0%, #0a172a 50%, #34495f 100%);
    --chrome-solid: #0a172a;
    --chrome-text: #ffffff;
    --chrome-text-muted: #94a3b5;
    --chrome-line: rgba(255, 255, 255, .12);
    --chrome-field: rgba(255, 255, 255, .08);

    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ---------- 공통 바탕 ---------- */
body {background: var(--bg); color: var(--text)}
input, textarea, select {background-color: var(--surface); color: var(--text-strong)}
input::placeholder, textarea::placeholder {color: var(--text-faint)}
::selection {background: var(--primary); color: var(--on-accent)}
hr {border-color: var(--border)}

/* ---------- 모드 전환 버튼 ---------- */
.theme_toggle {display: inline-block; width: 30px; height: 30px; padding: 0; border: 1px solid var(--chrome-line); border-radius: 50%; background: var(--chrome-field); color: var(--chrome-text); font-size: 14px; line-height: 28px; text-align: center; cursor: pointer; vertical-align: middle}
.theme_toggle:hover {border-color: var(--highlight); color: var(--highlight)}
.theme_toggle .fa-sun-o {display: none}
:root[data-theme="dark"] .theme_toggle .fa-sun-o {display: inline}
:root[data-theme="dark"] .theme_toggle .fa-moon-o {display: none}