@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,400..900&family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap");

:root {
    color-scheme: light;
    --color-bg: #d7e7f4;
    --color-surface: rgba(255, 255, 255, .64);
    --color-text: #172033;
    --color-muted: #6b7280;
    --color-line: #dfe3e8;
    --color-primary: #123f56;
    --color-accent: #bd9a5f;
    --km-report-dark-accent: #B3956B;
    --km-report-dark-accent-hover: #D6BE96;
    --color-positive: #217a55;
    --color-negative: #b64b3c;
    --color-warning: #c87f23;
    --km-radius: 12px;
    --km-max: 100%;
    --km-content-ratio: 85%;
    --km-content-max: 1290px;
    --km-content-width: min(var(--km-content-ratio), var(--km-content-max));
    --km-ambient-base: #d7e7f4;
    --km-ambient-wash: rgba(255, 255, 255, .36);
    --km-ambient-blue: rgba(38, 105, 170, .20);
    --km-ambient-cyan: rgba(87, 157, 199, .13);
    --km-glass-bg: rgba(255, 255, 255, .42);
    --km-glass-bg-strong: rgba(255, 255, 255, .58);
    --km-glass-line: rgba(255, 255, 255, .68);
    --km-glass-line-soft: rgba(98, 132, 171, .16);
    --km-card-border: var(--km-glass-line);
    --km-card-border-hover: rgba(255, 255, 255, .84);
    --km-glass-shadow: 0 24px 70px rgba(28, 76, 124, .15);
    --km-glass-shadow-soft: 0 14px 42px rgba(28, 76, 124, .11);
    --km-glass-blur: blur(22px) saturate(1.18);
    --font-latin: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-japanese: "Noto Sans JP", "Noto Sans Japanese", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    --font-korean: "Noto Sans KR", "Pretendard", "Malgun Gothic", sans-serif;
    --font-base: var(--font-latin), var(--font-japanese), var(--font-korean);
}

:root[data-km-theme="dark"] {
    color-scheme: dark;
    --color-bg: #06192a;
    --color-surface: rgba(16, 38, 58, .64);
    --color-text: #eef6ff;
    --color-muted: #9fb3c8;
    --color-line: rgba(172, 196, 222, .22);
    --color-primary: #8ec5ff;
    --color-accent: #d2b778;
    --color-positive: #7cd4a4;
    --color-negative: #ff927f;
    --color-warning: #ffc46b;
    --km-ambient-base: #06192a;
    --km-ambient-wash: rgba(255, 255, 255, .035);
    --km-ambient-blue: rgba(50, 111, 178, .20);
    --km-ambient-cyan: rgba(72, 145, 190, .08);
    --km-glass-bg: rgba(255, 255, 255, .07);
    --km-glass-bg-strong: rgba(255, 255, 255, .105);
    --km-glass-line: rgba(190, 222, 255, .22);
    --km-glass-line-soft: rgba(190, 222, 255, .11);
    --km-card-border: rgba(178, 149, 94, .38);
    --km-card-border-hover: rgba(178, 149, 94, .78);
    --km-glass-shadow: 0 28px 80px rgba(0, 0, 0, .36);
    --km-glass-shadow-soft: 0 16px 46px rgba(0, 0, 0, .28);
}

@media (min-width: 1800px) {
    :root {
        --km-content-max: 1500px;
    }
}

@media (max-width: 1024px) {
    :root {
        --km-content-ratio: calc(100% - 32px);
    }
}

@media (max-width: 480px) {
    :root {
        --km-content-ratio: calc(100% - 24px);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        linear-gradient(115deg, var(--km-ambient-wash), transparent 36%),
        linear-gradient(235deg, var(--km-ambient-blue), transparent 44%),
        linear-gradient(15deg, transparent 20%, var(--km-ambient-cyan) 58%, transparent 82%),
        var(--km-ambient-base);
    background-attachment: fixed;
    background-size: 180% 180%, 190% 190%, 220% 220%, 100% 100%;
    animation: kmAmbientDrift 34s ease-in-out infinite alternate;
    color: var(--color-text);
    font-family: var(--font-base);
    line-height: 1.65;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 18%, transparent 82%, rgba(255, 255, 255, .10)),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 18px);
    mix-blend-mode: soft-light;
    opacity: .72;
}

:root[data-km-theme="dark"] body::before {
    opacity: .28;
}

@keyframes kmAmbientDrift {
    0% {
        background-position: 0% 10%, 100% 20%, 50% 100%, 0 0;
    }
    50% {
        background-position: 72% 38%, 34% 66%, 18% 42%, 0 0;
    }
    100% {
        background-position: 100% 84%, 0% 70%, 88% 12%, 0 0;
    }
}

body,
body * {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow, outline-color;
    transition-duration: .28s;
    transition-timing-function: ease;
}

:lang(en) {
    font-family: var(--font-latin);
}

:lang(ja),
:lang(ja-JP) {
    font-family: var(--font-japanese);
}

:lang(ko),
:lang(ko-KR) {
    font-family: var(--font-korean), var(--font-japanese), var(--font-latin);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(189, 154, 95, .7);
    outline-offset: 3px;
}

#skip_to_container a {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    transform: translateY(-160%);
    background: var(--color-primary);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
}

#skip_to_container a:focus {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }

    body,
    body * {
        transition-duration: .01ms !important;
    }
}