/* ==========================================================
   ForumHub Unified Visual Theme V1

   기준:
   - 허브채팅의 Dark Navy UI
   - 약한 Cyan / Blue ambient gradient
   - 낮은 대비의 반투명 surface
   - 얇은 border
   - map 페이지에는 로드하지 않음
   ========================================================== */


:root {

    --fh-bg:
        #07101c;

    --fh-bg-deep:
        #050b14;

    --fh-surface:
        rgba(
            10,
            20,
            34,
            0.92
        );

    --fh-surface-soft:
        rgba(
            15,
            27,
            45,
            0.82
        );

    --fh-surface-hover:
        rgba(
            30,
            45,
            66,
            0.64
        );

    --fh-border:
        rgba(
            148,
            163,
            184,
            0.14
        );

    --fh-border-strong:
        rgba(
            148,
            163,
            184,
            0.22
        );

    --fh-text:
        #e8eef8;

    --fh-text-soft:
        #c5d0de;

    --fh-muted:
        #8b9bb0;

    --fh-muted-2:
        #66778d;

    --fh-accent:
        #5eead4;

    --fh-accent-soft:
        rgba(
            94,
            234,
            212,
            0.10
        );

    --fh-blue:
        #7dd3fc;

    --fh-blue-soft:
        rgba(
            96,
            165,
            250,
            0.10
        );

    --fh-danger:
        #fca5a5;

    --fh-success:
        #6ee7b7;

    --fh-radius-sm:
        10px;

    --fh-radius:
        14px;

    --fh-radius-lg:
        20px;

    --fh-shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.22
        );

    --fh-shadow-soft:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            0.14
        );
}


/* ==========================================================
   DOCUMENT / GLOBAL BACKGROUND
   ========================================================== */

html {

    min-height:
        100%;

    background:
        var(
            --fh-bg-deep
        );
}


body {

    min-height:
        100vh;

    margin:
        0;

    color:
        var(
            --fh-text
        );

    background:

        radial-gradient(
            circle at 14% -5%,
            rgba(
                94,
                234,
                212,
                0.075
            ),
            transparent 34%
        ),

        radial-gradient(
            circle at 88% 4%,
            rgba(
                96,
                165,
                250,
                0.075
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 52% 105%,
            rgba(
                99,
                102,
                241,
                0.035
            ),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            #081321 0%,
            #07101c 54%,
            #050c16 100%
        );

    background-attachment:
        fixed;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/*
   기존 각 페이지의 단색 shell 배경은
   global background가 보이도록 투명화한다.
*/

.detail-shell,
.member-shell,
.home-shell,
.page-shell,
.admin-shell,
.auth-shell,
.server-shell,
.notice-shell,
.players-shell {

    background:
        transparent !important;
}


/* ==========================================================
   GLOBAL HEADER
   ========================================================== */

.global-header {

    border-bottom:
        1px solid
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            6,
            14,
            25,
            0.80
        ) !important;

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.12
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.global-brand-copy strong {

    color:
        #f4f8fc !important;
}


.global-brand-copy small {

    color:
        var(
            --fh-muted-2
        ) !important;
}


.global-nav a {

    position:
        relative;

    border-radius:
        9px;

    color:
        var(
            --fh-muted
        ) !important;

    transition:
        color 150ms ease,
        background 150ms ease;
}


.global-nav a:hover {

    color:
        var(
            --fh-text
        ) !important;

    background:
        rgba(
            148,
            163,
            184,
            0.055
        );
}


.global-nav a.active {

    color:
        var(
            --fh-accent
        ) !important;

    background:
        var(
            --fh-accent-soft
        );
}


.global-account-trigger {

    border-color:
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            15,
            26,
            43,
            0.62
        ) !important;
}


.global-account-trigger:hover {

    border-color:
        rgba(
            94,
            234,
            212,
            0.24
        ) !important;

    background:
        rgba(
            20,
            34,
            54,
            0.80
        ) !important;
}


.global-account-avatar {

    border:
        1px solid
        rgba(
            94,
            234,
            212,
            0.20
        );

    background:
        var(
            --fh-accent-soft
        ) !important;

    color:
        var(
            --fh-accent
        ) !important;
}


.global-account-summary strong {

    color:
        var(
            --fh-text
        ) !important;
}


.global-account-summary small {

    color:
        var(
            --fh-muted-2
        ) !important;
}


.global-account-dropdown {

    border:
        1px solid
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            12,
            23,
            39,
            0.98
        ) !important;

    box-shadow:
        0 20px 50px
        rgba(
            0,
            0,
            0,
            0.36
        ) !important;

    backdrop-filter:
        blur(20px);
}


.global-account-dropdown a,
.global-account-dropdown button {

    color:
        var(
            --fh-text-soft
        ) !important;
}


.global-account-dropdown a:hover,
.global-account-dropdown button:hover {

    background:
        rgba(
            94,
            234,
            212,
            0.06
        ) !important;

    color:
        var(
            --fh-text
        ) !important;
}


.global-account-divider {

    background:
        var(
            --fh-border
        ) !important;
}


.global-notification-badge {

    border:
        1px solid
        rgba(
            94,
            234,
            212,
            0.34
        );

    background:
        rgba(
            94,
            234,
            212,
            0.14
        ) !important;

    color:
        #99f6e4 !important;
}


/* ==========================================================
   PAGE HEADING LANGUAGE
   ========================================================== */

.detail-heading,
.member-title,
.page-heading,
.admin-heading,
.server-heading,
.notice-heading,
.players-heading {

    color:
        var(
            --fh-text
        );
}


.detail-heading h1,
.member-title h1,
.page-heading h1,
.admin-heading h1,
.server-heading h1,
.notice-heading h1,
.players-heading h1 {

    color:
        #f2f7fc !important;

    letter-spacing:
        -0.025em;
}


.detail-heading p,
.member-title p,
.page-heading p,
.admin-heading p,
.server-heading p,
.notice-heading p,
.players-heading p {

    color:
        var(
            --fh-muted
        ) !important;
}


.detail-heading > div > span,
.member-title > div > span,
.page-heading > div > span,
.admin-heading > div > span,
.server-heading > div > span,
.notice-heading > div > span,
.players-heading > div > span {

    color:
        var(
            --fh-accent
        ) !important;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}


/* ==========================================================
   PANELS / CARDS
   ========================================================== */

/*
   대부분의 ForumHub 카드 클래스가 *-card 패턴이므로
   레이아웃값은 건드리지 않고 표면만 통일한다.
*/

.card,
.panel,
[class$="-card"],
[class*="-card "] {

    border-color:
        var(
            --fh-border
        ) !important;

    background-color:
        var(
            --fh-surface
        ) !important;

    box-shadow:
        var(
            --fh-shadow-soft
        );
}


[class$="-card"]:hover {

    border-color:
        rgba(
            148,
            163,
            184,
            0.20
        );
}


/*
   큰 주요 패널은 허브채팅과 동일한 20px 계열
*/

.forum-chat-card,
.hub-chat-card,
.member-card,
.profile-card,
.notice-card,
.server-card,
.admin-card,
.auth-card {

    border-radius:
        var(
            --fh-radius-lg
        ) !important;
}


/* ==========================================================
   TABLES
   ========================================================== */

table {

    color:
        var(
            --fh-text-soft
        );
}


thead {

    color:
        var(
            --fh-muted
        );
}


th {

    border-color:
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            15,
            27,
            45,
            0.68
        ) !important;
}


td {

    border-color:
        rgba(
            148,
            163,
            184,
            0.09
        ) !important;
}


tbody tr {

    transition:
        background 140ms ease;
}


tbody tr:hover {

    background:
        rgba(
            94,
            234,
            212,
            0.035
        ) !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

input:not(
    [type="checkbox"]
):not(
    [type="radio"]
),

textarea,

select {

    border-color:
        var(
            --fh-border-strong
        ) !important;

    border-radius:
        var(
            --fh-radius-sm
        );

    background:
        rgba(
            9,
            20,
            34,
            0.86
        ) !important;

    color:
        var(
            --fh-text
        ) !important;

    outline:
        none;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}


input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):focus,

textarea:focus,

select:focus {

    border-color:
        rgba(
            94,
            234,
            212,
            0.42
        ) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            94,
            234,
            212,
            0.055
        );

    background:
        rgba(
            11,
            24,
            40,
            0.96
        ) !important;
}


input::placeholder,
textarea::placeholder {

    color:
        #607087 !important;
}


select option {

    background:
        #101c2c;

    color:
        var(
            --fh-text
        );
}


/* ==========================================================
   BUTTONS
   ========================================================== */

button,
.button,
.btn {

    transition:
        transform 120ms ease,
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease,
        opacity 150ms ease;
}


button:not(:disabled):active,
.button:active,
.btn:active {

    transform:
        translateY(1px);
}


button:disabled {

    opacity:
        0.48;
}


/*
   기존 outline 계열 버튼
*/

.outline-button,
.secondary-button,
.btn-secondary {

    border-color:
        var(
            --fh-border-strong
        ) !important;

    background:
        rgba(
            15,
            27,
            45,
            0.64
        ) !important;

    color:
        var(
            --fh-text-soft
        ) !important;
}


.outline-button:hover,
.secondary-button:hover,
.btn-secondary:hover {

    border-color:
        rgba(
            94,
            234,
            212,
            0.26
        ) !important;

    background:
        var(
            --fh-accent-soft
        ) !important;

    color:
        #ecfeff !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

main a {

    text-decoration-color:
        rgba(
            94,
            234,
            212,
            0.35
        );
}


main a:hover {

    text-decoration-color:
        var(
            --fh-accent
        );
}


/* ==========================================================
   STATUS PILLS / BADGES
   ========================================================== */

.badge,
.status,
[class*="-badge"],
[class*="-status"] {

    border-color:
        var(
            --fh-border
        );
}


/* ==========================================================
   NOTIFICATION UI
   ========================================================== */

.notification-list {

    color:
        var(
            --fh-text
        );
}


.notification-item {

    border-color:
        var(
            --fh-border
        ) !important;

    background:
        var(
            --fh-surface
        ) !important;

    border-radius:
        var(
            --fh-radius
        );
}


.notification-item:hover {

    border-color:
        rgba(
            94,
            234,
            212,
            0.20
        ) !important;

    background:
        rgba(
            15,
            30,
            48,
            0.96
        ) !important;
}


/* ==========================================================
   CHAT CONSISTENCY
   ========================================================== */

.forum-chat-card {

    overflow:
        hidden;

    border:
        1px solid
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            9,
            18,
            31,
            0.94
        ) !important;

    box-shadow:
        var(
            --fh-shadow
        ) !important;
}


.chat-info-bar {

    border-color:
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            15,
            26,
            43,
            0.82
        ) !important;
}


.chat-channel-bar {

    border-color:
        var(
            --fh-border
        ) !important;
}


.chat-channel-tab {

    border-color:
        var(
            --fh-border
        ) !important;
}


.chat-channel-tab.active {

    color:
        var(
            --fh-accent
        ) !important;

    background:
        var(
            --fh-accent-soft
        ) !important;
}


/* ==========================================================
   PROFILE / MEMBER
   ========================================================== */

.member-shell main {

    color:
        var(
            --fh-text
        );
}


/* ==========================================================
   AUTH
   ========================================================== */

.auth-card,
.login-card,
.register-card,
.recover-card {

    border:
        1px solid
        var(
            --fh-border
        ) !important;

    background:
        rgba(
            9,
            20,
            34,
            0.94
        ) !important;

    box-shadow:
        var(
            --fh-shadow
        ) !important;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(
            148,
            163,
            184,
            0.24
        )
        transparent;
}


*::-webkit-scrollbar {

    width:
        9px;

    height:
        9px;
}


*::-webkit-scrollbar-track {

    background:
        transparent;
}


*::-webkit-scrollbar-thumb {

    border:
        2px solid
        transparent;

    border-radius:
        999px;

    background:
        rgba(
            148,
            163,
            184,
            0.22
        );

    background-clip:
        padding-box;
}


*::-webkit-scrollbar-thumb:hover {

    background:
        rgba(
            148,
            163,
            184,
            0.34
        );

    background-clip:
        padding-box;
}


/* ==========================================================
   TEXT SELECTION
   ========================================================== */

::selection {

    background:
        rgba(
            94,
            234,
            212,
            0.24
        );

    color:
        #f8ffff;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
    max-width: 760px
) {

    body {

        background:

            radial-gradient(
                circle at 15% 0%,
                rgba(
                    94,
                    234,
                    212,
                    0.06
                ),
                transparent 34%
            ),

            linear-gradient(
                180deg,
                #081321,
                #060e19
            );

        background-attachment:
            scroll;
    }


    .global-header {

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .card,
    .panel,
    [class$="-card"],
    [class*="-card "] {

        box-shadow:
            0 10px 30px
            rgba(
                0,
                0,
                0,
                0.14
            );
    }
}


/* ==========================================================
   MOTION ACCESSIBILITY
   ========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    * {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}