/*
 * 헤르메스(유저E) — 숯빛 바탕에 분홍 (2026-10-22, sug12 참고).
 *
 * 머리글은 SB 어그로(샌드박스, 상업 이용 무료)입니다 — 그 사이트의 얼굴이 이 굵은 둥근 고딕이고, 본문은
 * 다른 스킨과 같은 Pretendard 입니다. 아래의 `--hms-set-*` 은 로비 시트가 무대·제목·단추를 칠하는 자리이고,
 * 전부 조합의 씨앗에서 셈합니다 — 그림 한 벌을 조합마다 따로 두지 않습니다.
 */
@font-face {
    font-family: "SB Aggro";
    src: url("/skin/hermes/fonts/sb-aggro-m.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

/*
 * ── 밝은 조합과 어두운 조합 (2026-10-22) ──
 *
 * 이 스킨은 어두운 판으로 그려졌고, 밝은 조합에서는 「한 단 위」가 검정을 얹어 회색이 되어 판이 바탕보다 탁했습니다.
 * 문서의 `color-scheme` 이 조합의 `--t-scheme` 을 따르므로(`globals.css`) 갈래가 갈리는 자리는 `light-dark(밝은, 어두운)`
 * 으로 적습니다 — 밝은 쪽은 흰 판·옅은 남보라 그림자, 어두운 쪽은 지금까지의 숯빛 판입니다.
 */
:root {
    --hms-set-stage-bg:
        radial-gradient(60% 70% at 26% 40%, rgb(var(--t-accent-rgb, 244 63 182) / 0.22) 0%, transparent 70%),
        radial-gradient(50% 60% at 88% 10%, rgb(var(--t-money-rgb, 34 211 238) / 0.1) 0%, transparent 70%),
        linear-gradient(180deg, light-dark(var(--t-panel, #fff), color-mix(in srgb, var(--t-base, #1a1820) 86%, var(--t-accent, #f43fb6))) 0%, var(--t-base, #1a1820) 78%);
    --hms-set-pill-on: linear-gradient(180deg, color-mix(in srgb, var(--t-accent, #f43fb6) 84%, #fff) 0%, var(--t-accent-deep, #c2168a) 100%);
    --hms-set-pill-ink: var(--t-accent-ink, #fff);
    --hms-set-title: linear-gradient(180deg,
        light-dark(var(--t-accent-deep, #9d1673), color-mix(in srgb, var(--t-accent, #f43fb6) 30%, #fff)) 0%,
        var(--t-accent, #f43fb6) 60%,
        light-dark(color-mix(in srgb, var(--t-accent-deep, #9d1673) 80%, #000), var(--t-accent-deep, #c2168a)) 100%);
    --hms-set-rail: linear-gradient(180deg, color-mix(in srgb, var(--t-accent, #f43fb6) 84%, #fff) 0%, var(--t-accent-deep, #c2168a) 100%);

    --hms-shade: light-dark(rgb(40 28 72 / 0.08), rgb(0 0 0 / 0.3));
    --hms-shade-lg: light-dark(rgb(40 28 72 / 0.14), rgb(0 0 0 / 0.45));
    --hms-money-ink: light-dark(#ffffff, var(--t-base, #1a1820));
    --hms-surface: light-dark(var(--t-panel, #fff), color-mix(in srgb, var(--t-panel, #2a2933) 86%, #000));
    --hms-surface-deep: light-dark(color-mix(in srgb, var(--t-sunk, #e8e6ee) 55%, var(--t-panel, #fff)), color-mix(in srgb, var(--t-panel, #2a2933) 66%, #000));
}

:root {
    --color-base: var(--t-base, #1a1820);

    --color-deep: color-mix(in srgb, var(--t-base, #1a1820) 94%, #000);

    --color-panel: light-dark(var(--t-panel, #fff), color-mix(in srgb, var(--t-base, #1a1820) 97%, #fff));
    --color-field: var(--t-sunk, #212029);

    --color-raise: light-dark(color-mix(in srgb, var(--t-sunk, #e8e6ee) 60%, var(--t-panel, #fff)), color-mix(in srgb, var(--t-base, #1a1820) 93%, #fff));
    --color-alt: color-mix(in srgb, var(--t-base, #1a1820) 94%, #000);
    --color-card: light-dark(var(--t-panel, #fff), color-mix(in srgb, var(--t-base, #1a1820) 97%, #fff));
    --color-sunk: var(--t-sunk, #212029);

    --color-line: light-dark(rgb(34 26 60 / 0.13), rgb(255 255 255 / 0.16));
    --color-line-soft: light-dark(rgb(34 26 60 / 0.08), rgb(255 255 255 / 0.09));
    --color-line-tile: light-dark(rgb(34 26 60 / 0.13), rgb(255 255 255 / 0.16));

    --color-line-head: light-dark(rgb(34 26 60 / 0.2), rgb(255 255 255 / 0.3));

    --color-brand: var(--t-accent, #f43fb6);
    --color-brand-glow: var(--t-accent-soft, #ffa6dd);

    --color-gold: var(--t-money, #22d3ee);
    --color-gold-alt: var(--t-money-soft, #a5f3fc);

    --color-danger: #d23b30;
    --color-danger-hover: #b12f26;
    --color-danger-text: color-mix(in srgb, #d23b30 64%, var(--t-ink, #f4f2f8));
    --color-up: #2f8f45;
    --color-up-text: color-mix(in srgb, #2f8f45 58%, var(--t-ink, #f4f2f8));
    --color-down: #d23b30;
    --color-down-text: color-mix(in srgb, #d23b30 58%, var(--t-ink, #f4f2f8));
    --color-win: #6d4bb8;

    --color-ink: var(--t-ink, #f4f2f8);

    --color-ink-strong: color-mix(in srgb, var(--t-ink, #f4f2f8) 84%, rgb(var(--t-veil-rgb, 255 255 255)));
    --color-ink-soft: color-mix(in srgb, var(--t-ink, #f4f2f8) 80%, var(--t-ink-muted, #aaa7b8));
    --color-ink-nav: var(--t-ink-muted, #aaa7b8);
    --color-ink-label: var(--t-ink-muted, #aaa7b8);
    --color-ink-muted: color-mix(in srgb, var(--t-ink-muted, #aaa7b8) 80%, var(--t-ink, #f4f2f8));
    --color-ink-team: var(--t-ink-muted, #aaa7b8);

    --font-sans: "Pretendard", "Noto Sans KR", sans-serif;
    --font-numeric: "Rajdhani", "Pretendard", sans-serif;
    --font-display: "SB Aggro", "Pretendard", "Noto Sans KR", sans-serif;
}

:root {
    --ui-btn-radius: 999px;
    --ui-btn-h-sm: 36px;
    --ui-btn-h-md: 46px;
    --ui-btn-h-lg: 56px;

    --ui-btn-primary-bg: var(--color-brand);
    --ui-btn-primary-ink: var(--t-accent-ink, #ffffff);
    --ui-btn-primary-bg-hover: color-mix(in srgb, var(--t-accent, #f43fb6) 88%, #000);
    --ui-btn-primary-line: transparent;

    --ui-btn-accent-bg: var(--color-brand);
    --ui-btn-accent-ink: var(--t-accent-ink, #ffffff);
    --ui-btn-accent-bg-hover: color-mix(in srgb, var(--t-accent, #f43fb6) 88%, #000);
    --ui-btn-accent-line: transparent;

    --ui-btn-outline-bg: transparent;
    --ui-btn-outline-ink: var(--color-ink);
    --ui-btn-outline-bg-hover: transparent;
    --ui-btn-outline-ink-hover: var(--color-brand);
    --ui-btn-outline-line: var(--color-line);

    --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-base, #1a1820) 88%, 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, #22d3ee);
    --ui-btn-gold-bg-hover: color-mix(in srgb, var(--t-base, #1a1820) 93%, rgb(var(--t-veil-rgb, 255 255 255)));
    --ui-btn-gold-line: var(--color-line);

    --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, 143, 69, 0.08);
    --ui-alert-ok-ink: color-mix(in srgb, #2f8f45 60%, var(--t-ink, #f4f2f8));
    --ui-alert-ok-line: rgba(47, 143, 69, 0.55);

    --ui-alert-bad-bg: rgba(210, 59, 48, 0.08);
    --ui-alert-bad-ink: color-mix(in srgb, #d23b30 60%, var(--t-ink, #f4f2f8));
    --ui-alert-bad-line: rgba(210, 59, 48, 0.55);

    --ui-alert-info-bg: rgb(var(--t-accent-rgb, 244 63 182) / 0.08);
    --ui-alert-info-ink: var(--color-ink);
    --ui-alert-info-line: rgb(var(--t-accent-rgb, 244 63 182) / 0.55);

    --ui-alert-warn-bg: rgba(180, 130, 30, 0.10);
    --ui-alert-warn-ink: color-mix(in srgb, #a8801f 58%, var(--t-ink, #f4f2f8));
    --ui-alert-warn-line: rgba(180, 130, 30, 0.55);
}