/*
 * 유저F(디오니소스) — 남색 밤바탕에 밝은 파랑 (2026-10-22, dino-999 참고).
 *
 * 머리띠·공지띠·바닥글·빠른 메뉴는 **조합과 상관없이 늘 어둡습니다.** 밝은 조합에서도 그 넷은 강조색으로 물든
 * 밤색이고, 사이트 이름으로 그린 간판(흰 글자)이 그 위에 섭니다 — 밝은 머리띠였다면 간판이 바탕에 잠깁니다.
 * 그래서 `--dio-chrome-*` 는 `--t-base` 가 아니라 강조색과 고정된 밤색을 섞어 만듭니다.
 */
@font-face {
    font-family: "Exo 2";
    src: url("/skin/dionysus/fonts/exo2-latin.woff2") format("woff2");
    font-weight: 500 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
    --color-base: var(--t-base, #0a0f1c);
    --color-deep: color-mix(in srgb, var(--t-base, #0a0f1c) 90%, #000);
    --color-panel: var(--t-panel, #121a2c);
    --color-field: var(--t-sunk, #0e1524);
    --color-raise: color-mix(in srgb, var(--t-panel, #121a2c) 90%, rgb(var(--t-veil-rgb, 255 255 255)));
    --color-alt: color-mix(in srgb, var(--t-panel, #121a2c) 94%, rgb(var(--t-veil-rgb, 255 255 255)));
    --color-card: var(--t-panel, #121a2c);
    --color-sunk: var(--t-sunk, #0e1524);

    --color-line: rgb(var(--t-veil-rgb, 255 255 255) / 0.11);
    --color-line-soft: rgb(var(--t-veil-rgb, 255 255 255) / 0.065);
    --color-line-tile: rgb(var(--t-veil-rgb, 255 255 255) / 0.1);
    --color-line-head: rgb(var(--t-veil-rgb, 255 255 255) / 0.2);

    --color-brand: var(--t-accent, #2f7bff);
    --color-brand-glow: var(--t-accent-soft, #9cc2ff);

    --color-gold: var(--t-money, #ffd34d);
    --color-gold-alt: var(--t-money-soft, #ffe9a3);

    --color-danger: #e5484d;
    --color-danger-hover: #c8363b;
    --color-danger-text: color-mix(in srgb, #ff5a5a 62%, var(--t-ink, #eef3fb));
    --color-up: #2fbf71;
    --color-up-text: color-mix(in srgb, #3ddc97 56%, var(--t-ink, #eef3fb));
    --color-down: #e5484d;
    --color-down-text: color-mix(in srgb, #ff5a5a 56%, var(--t-ink, #eef3fb));
    --color-win: #8b5cf6;

    --color-ink: var(--t-ink, #eef3fb);
    --color-ink-strong: var(--t-ink, #eef3fb);
    --color-ink-soft: color-mix(in srgb, var(--t-ink, #eef3fb) 82%, var(--t-ink-muted, #9aa7c0));
    --color-ink-nav: color-mix(in srgb, var(--t-ink, #eef3fb) 40%, var(--t-ink-muted, #9aa7c0));
    --color-ink-label: var(--t-ink-muted, #9aa7c0);
    --color-ink-muted: var(--t-ink-muted, #9aa7c0);
    --color-ink-team: var(--t-ink-muted, #9aa7c0);

    --font-sans: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --font-numeric: "Exo 2", "Pretendard", sans-serif;
    --font-display: "Pretendard", "Noto Sans KR", sans-serif;

    /* 모서리 셋 — 판은 둥글되 아테나의 22px 같은 큰 곡선은 없습니다. */
    --dio-r-sm: 6px;
    --dio-r: 10px;
    --dio-r-lg: 14px;

    /* 늘 어두운 껍데기 (머리말 참조). */
    --dio-chrome-0: color-mix(in srgb, var(--t-accent, #2f7bff) 8%, #04070e);
    --dio-chrome-1: color-mix(in srgb, var(--t-accent, #2f7bff) 12%, #070b15);
    --dio-chrome-2: color-mix(in srgb, var(--t-accent, #2f7bff) 20%, #0b1120);
    --dio-chrome-3: color-mix(in srgb, var(--t-accent, #2f7bff) 30%, #101830);
    --dio-chrome-line: rgb(255 255 255 / 0.09);
    --dio-chrome-ink: #f2f6fd;
    --dio-chrome-muted: rgb(226 233 247 / 0.66);
    --dio-chrome-accent: color-mix(in srgb, var(--t-accent, #2f7bff) 72%, #ffffff);

    /* 파란 광택 — 단추, 판의 머리띠, 빠른 메뉴. 위가 밝고 아래가 깊습니다. */
    --dio-gloss: linear-gradient(
        180deg,
        color-mix(in srgb, var(--t-accent, #2f7bff) 78%, #ffffff) 0%,
        var(--t-accent, #2f7bff) 42%,
        var(--t-accent-deep, #1d5fd6) 100%
    );
    --dio-gloss-hover: linear-gradient(
        180deg,
        color-mix(in srgb, var(--t-accent, #2f7bff) 66%, #ffffff) 0%,
        color-mix(in srgb, var(--t-accent, #2f7bff) 88%, #ffffff) 42%,
        var(--t-accent, #2f7bff) 100%
    );
    --dio-glow: 0 10px 26px -10px rgb(var(--t-accent-rgb, 47 123 255) / 0.75);
    --dio-lift: 0 18px 40px -16px rgb(0 0 0 / 0.55);
}

:root {
    --ui-btn-radius: 8px;
    --ui-btn-h-sm: 36px;
    --ui-btn-h-md: 46px;
    --ui-btn-h-lg: 54px;

    --ui-btn-primary-bg: var(--t-accent, #2f7bff);
    --ui-btn-primary-ink: var(--t-accent-ink, #ffffff);
    --ui-btn-primary-bg-hover: var(--t-accent-deep, #1d5fd6);
    --ui-btn-primary-line: transparent;

    --ui-btn-accent-bg: var(--t-accent, #2f7bff);
    --ui-btn-accent-ink: var(--t-accent-ink, #ffffff);
    --ui-btn-accent-bg-hover: var(--t-accent-deep, #1d5fd6);
    --ui-btn-accent-line: transparent;

    --ui-btn-outline-bg: transparent;
    --ui-btn-outline-ink: var(--color-ink);
    --ui-btn-outline-bg-hover: rgb(var(--t-accent-rgb, 47 123 255) / 0.08);
    --ui-btn-outline-ink-hover: var(--color-brand);
    --ui-btn-outline-line: var(--color-line-head);

    --ui-btn-quiet-bg: var(--color-raise);
    --ui-btn-quiet-ink: var(--color-ink-nav);
    --ui-btn-quiet-bg-hover: color-mix(in srgb, var(--t-panel, #121a2c) 82%, rgb(var(--t-veil-rgb, 255 255 255)));
    --ui-btn-quiet-ink-hover: var(--color-ink);
    --ui-btn-quiet-line: transparent;
    --ui-btn-quiet-line-hover: var(--color-line);

    --ui-btn-gold-bg: transparent;
    --ui-btn-gold-ink: var(--t-money, #ffd34d);
    --ui-btn-gold-bg-hover: rgb(var(--t-money-rgb, 255 211 77) / 0.08);
    --ui-btn-gold-line: rgb(var(--t-money-rgb, 255 211 77) / 0.45);

    --ui-btn-danger-bg: var(--color-danger);
    --ui-btn-danger-ink: #ffffff;
    --ui-btn-danger-bg-hover: var(--color-danger-hover);
    --ui-btn-danger-line: transparent;

    --ui-alert-ok-bg: rgba(47, 191, 113, 0.1);
    --ui-alert-ok-ink: color-mix(in srgb, #2fbf71 58%, var(--t-ink, #eef3fb));
    --ui-alert-ok-line: rgba(47, 191, 113, 0.5);

    --ui-alert-bad-bg: rgba(229, 72, 77, 0.1);
    --ui-alert-bad-ink: color-mix(in srgb, #e5484d 60%, var(--t-ink, #eef3fb));
    --ui-alert-bad-line: rgba(229, 72, 77, 0.5);

    --ui-alert-info-bg: rgb(var(--t-accent-rgb, 47 123 255) / 0.09);
    --ui-alert-info-ink: var(--color-ink);
    --ui-alert-info-line: rgb(var(--t-accent-rgb, 47 123 255) / 0.5);

    --ui-alert-warn-bg: rgba(245, 165, 36, 0.1);
    --ui-alert-warn-ink: color-mix(in srgb, #d99a1e 58%, var(--t-ink, #eef3fb));
    --ui-alert-warn-line: rgba(245, 165, 36, 0.5);
}