/*
=========================================
 Lineage II Freya Private Server
 Homepage Style V8 FINAL
 Visual reference: confirmed sample image
 Base layout: 1920x1080
=========================================
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    background: #000;
    color: #eee;
    font-family:
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
}

body {
    overflow: hidden;
}


/* =========================================
   背景层
========================================= */

.background {
    position: fixed;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.04) 42%,
            rgba(0, 0, 0, 0.62) 82%,
            rgba(0, 0, 0, 0.92) 100%
        ),
        url('/assets/images/123.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =========================================
   顶部导航
========================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: clamp(62px, 6.5vh, 74px);

    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 clamp(28px, 4vw, 80px);

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.88),
            rgba(0, 0, 0, 0.68)
        );

    border-bottom:
        1px solid rgba(214, 163, 66, 0.28);

    backdrop-filter: blur(3px);
}

.online {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #baff8a;

    font-size:
        clamp(12px, 0.75vw, 15px);

    white-space: nowrap;
}

.online span {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #4cf06a;

    box-shadow:
        0 0 8px #4cf06a,
        0 0 18px rgba(76, 240, 106, 0.8);
}

nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap:
        clamp(26px, 3.2vw, 58px);
}

nav a {
    position: relative;

    color: #d8c18d;

    text-decoration: none;

    font-size:
        clamp(12px, 0.82vw, 15px);

    font-weight: 700;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

nav a:hover,
nav a.active {
    color: #ffd979;

    text-shadow:
        0 0 10px rgba(255, 217, 121, 0.25);
}

nav a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -16px;

    transform: translateX(-50%);

    width: 26px;
    height: 2px;

    background: #e3ad4c;

    box-shadow:
        0 0 10px rgba(227, 173, 76, 0.45);
}

.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width:
        clamp(138px, 9vw, 178px);

    min-height:
        clamp(40px, 4.4vh, 48px);

    padding:
        10px clamp(20px, 1.8vw, 34px);

    color: #211504;

    text-decoration: none;

    font-size:
        clamp(12px, 0.78vw, 14px);

    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffe9aa 0%,
            #e0ac4e 55%,
            #b9781c 100%
        );

    border:
        1px solid #ffeab0;

    box-shadow:
        0 0 18px rgba(222, 166, 69, 0.2);

    transition:
        filter 0.2s ease,
        transform 0.2s ease;
}

.login-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}


/* =========================================
   主体区域
========================================= */

.main {
    position: relative;

    width: 100%;
    height: 100vh;

    z-index: 5;
}


/* =========================================
   中央 LOGO
   按确认图比例缩放和定位
========================================= */

.logo-area {
    position: absolute;

    left: 50%;
    top: 34.5%;

    transform:
        translate(-50%, -50%);

    width:
        clamp(320px, 30vw, 580px);

    text-align: center;

    pointer-events: none;
}

.small-logo {
    margin-bottom:
        clamp(7px, 0.7vh, 12px);

    color: #e8c377;

    font-size:
        clamp(13px, 1vw, 19px);

    letter-spacing:
        clamp(7px, 0.9vw, 15px);

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.9);
}

.logo-area h1 {
    color: #f2ca72;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(64px, 5.3vw, 102px);

    font-weight: 500;

    line-height: 0.95;

    letter-spacing:
        clamp(6px, 0.8vw, 14px);

    text-shadow:
        0 0 16px rgba(242, 202, 114, 0.5),
        0 0 34px rgba(242, 202, 114, 0.25),
        0 6px 24px rgba(0, 0, 0, 0.95);
}

.subtitle {
    margin-top:
        clamp(12px, 1.2vh, 18px);

    color: #e2e2e2;

    font-size:
        clamp(11px, 0.8vw, 15px);

    letter-spacing:
        clamp(5px, 0.75vw, 10px);

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95);
}


/* =========================================
   左右信息框公共样式
   同宽、同高、同底部坐标
========================================= */

.left-panel,
.right-panel {
    position: absolute;

    bottom:
        clamp(72px, 7.8vh, 96px);

    width:
        clamp(335px, 23vw, 440px);

    height:
        clamp(172px, 17vh, 202px);

    padding:
        clamp(20px, 1.7vw, 28px);

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 7, 0.72),
            rgba(2, 2, 3, 0.86)
        );

    border:
        1px solid rgba(211, 160, 63, 0.38);

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.7),
        inset 0 0 25px rgba(255, 255, 255, 0.015);

    backdrop-filter: blur(3px);
}

.left-panel {
    left:
        clamp(70px, 6.8vw, 130px);
}

.right-panel {
    right:
        clamp(70px, 6.8vw, 130px);
}

.left-panel h2,
.right-panel h2 {
    color: #ffd77f;

    font-size:
        clamp(20px, 1.5vw, 27px);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom:
        clamp(13px, 1.2vh, 18px);

    text-shadow:
        0 0 12px rgba(255, 215, 127, 0.12);
}


/* =========================================
   左侧欢迎文字
========================================= */

.left-panel p {
    color: #ddd;

    font-size:
        clamp(12px, 0.8vw, 14px);

    line-height:
        clamp(1.7, 1.85, 1.95);

    word-break: keep-all;

    overflow-wrap: break-word;
}


/* 兼容旧HTML中的按钮，强制隐藏 */
.buttons {
    display: none !important;
}


/* =========================================
   右侧公告
========================================= */

.notice {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    column-gap:
        clamp(12px, 1vw, 22px);

    min-height:
        clamp(34px, 3.5vh, 42px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);

    color: #ddd;

    font-size:
        clamp(12px, 0.78vw, 14px);
}

.notice span {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.notice time {
    color: #999;

    white-space: nowrap;

    font-size:
        clamp(11px, 0.7vw, 13px);
}


/* =========================================
   底部版权
========================================= */

footer {
    position: fixed;

    left: 0;
    bottom: 0;

    width: 100%;
    height:
        clamp(56px, 6.5vh, 72px);

    z-index: 40;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #747474;

    font-size:
        clamp(10px, 0.66vw, 12px);

    line-height: 1.5;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.75),
            #000
        );

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}


/* =========================================
   16:9低分辨率
   1280x720 / 1366x768 / 1600x900
========================================= */

@media
(max-width: 1600px),
(max-height: 900px) {

    .header {
        height: 64px;

        padding:
            0 clamp(24px, 3vw, 48px);
    }

    .background {
        background-position:
            center center;
    }

    .logo-area {
        top: 33.5%;

        width:
            clamp(290px, 28vw, 450px);
    }

    .logo-area h1 {
        font-size:
            clamp(56px, 5vw, 78px);
    }

    .small-logo {
        font-size:
            clamp(12px, 0.95vw, 16px);
    }

    .subtitle {
        font-size:
            clamp(10px, 0.75vw, 13px);
    }

    .left-panel,
    .right-panel {
        bottom:
            clamp(60px, 7vh, 76px);

        width:
            clamp(300px, 23vw, 350px);

        height:
            clamp(148px, 18vh, 176px);

        padding:
            clamp(16px, 1.4vw, 21px);
    }

    .left-panel {
        left:
            clamp(36px, 6vw, 84px);
    }

    .right-panel {
        right:
            clamp(36px, 6vw, 84px);
    }

    .left-panel h2,
    .right-panel h2 {
        font-size:
            clamp(18px, 1.45vw, 22px);

        margin-bottom: 11px;
    }

    .left-panel p,
    .notice {
        font-size:
            clamp(11px, 0.82vw, 13px);
    }

    .notice {
        min-height:
            clamp(29px, 3.7vh, 35px);
    }

    footer {
        height:
            clamp(48px, 6vh, 58px);
    }
}


/* =========================================
   16:10显示器
   1920x1200 / 2560x1600
========================================= */

@media
(min-aspect-ratio: 8/5)
and (max-aspect-ratio: 17/10) {

    .background {
        background-position:
            center center;
    }

    .logo-area {
        top: 32%;
    }

    .left-panel,
    .right-panel {
        bottom:
            clamp(78px, 7.5vh, 110px);
    }
}


/* =========================================
   超宽显示器
   21:9 / 32:9
   保持核心区域接近图2，不让左右框无限分散
========================================= */

@media
(min-aspect-ratio: 2/1) {

    .background {
        background-size:
            auto 100%;

        background-position:
            center center;

        background-color: #000;
    }

    .main {
        width:
            min(100%, 2200px);

        margin:
            0 auto;
    }

    .logo-area {
        top: 34%;
    }

    .left-panel {
        left:
            clamp(60px, 5vw, 110px);
    }

    .right-panel {
        right:
            clamp(60px, 5vw, 110px);
    }
}


/* =========================================
   4K / 5K / 8K
   限制UI最大尺寸，避免无限放大
========================================= */

@media
(min-width: 3000px) {

    .header {
        height: 82px;

        padding:
            0 92px;
    }

    nav {
        gap: 58px;
    }

    .logo-area {
        top: 34.5%;

        width: 650px;
    }

    .logo-area h1 {
        font-size: 112px;
    }

    .small-logo {
        font-size: 20px;
    }

    .subtitle {
        font-size: 16px;
    }

    .left-panel,
    .right-panel {
        width: 455px;
        height: 210px;

        bottom: 112px;

        padding: 30px;
    }

    .left-panel {
        left: 150px;
    }

    .right-panel {
        right: 150px;
    }

    .left-panel h2,
    .right-panel h2 {
        font-size: 28px;
    }

    footer {
        height: 76px;
    }
}


/* =========================================
   平板 / 4:3 / 窄屏
========================================= */

@media
(max-width: 1050px) {

    body {
        overflow-y: auto;
    }

    .header {
        position: relative;

        height: auto;
        min-height: 68px;

        padding:
            14px 20px;

        flex-wrap: wrap;
    }

    nav {
        position: static;

        transform: none;

        order: 3;

        width: 100%;

        justify-content: center;

        margin-top: 14px;

        gap:
            clamp(16px, 4vw, 30px);
    }

    nav a.active::after {
        bottom: -8px;
    }

    .background {
        position: fixed;

        inset: 0;

        background-size: cover;
    }

    .main {
        min-height: 1100px;
        height: auto;

        padding-top: 40px;
    }

    .logo-area {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: min(90%, 520px);

        margin: 90px auto 60px;
    }

    .left-panel,
    .right-panel {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width:
            min(88%, 460px);

        height: auto;
        min-height: 180px;

        margin:
            30px auto;

        overflow: visible;
    }

    footer {
        position: relative;

        margin-top: 50px;
    }
}


/* =========================================
   手机
========================================= */

@media
(max-width: 640px) {

    .online {
        font-size: 12px;
    }

    nav {
        display: none;
    }

    .login-button {
        min-width: 130px;
    }

    .main {
        min-height: 1000px;
    }

    .logo-area {
        margin-top: 75px;
    }

    .logo-area h1 {
        font-size:
            clamp(50px, 15vw, 66px);
    }

    .small-logo {
        font-size: 11px;

        letter-spacing: 7px;
    }

    .subtitle {
        font-size: 10px;

        letter-spacing: 5px;
    }

    .left-panel,
    .right-panel {
        width: 90%;

        padding: 20px;
    }

    .notice {
        grid-template-columns: 1fr;

        row-gap: 4px;

        padding: 10px 0;
    }

    .notice time {
        font-size: 11px;
    }
}


/* =========================================
   通用
========================================= */

a {
    cursor: pointer;
}

img {
    max-width: 100%;
}
/*
=========================================
 公告弹窗
 Notice Modal
=========================================
*/


#noticeModal {


    display:none;


    position:fixed;


    inset:0;


    z-index:200;



    align-items:center;


    justify-content:center;



    background:


    rgba(0,0,0,.78);



    backdrop-filter:

    blur(4px);


}




.modal-box {


    width:


    min(520px,90vw);



    max-height:70vh;



    overflow-y:auto;



    padding:


    35px;



    background:


    linear-gradient(

        180deg,

        rgba(25,25,25,.98),

        rgba(5,5,5,.98)

    );



    border:


    1px solid

    rgba(220,170,70,.55);



    box-shadow:


    0 20px 80px rgba(0,0,0,.95),



    inset 0 0 25px rgba(255,215,127,.05);



}




.modal-box h2 {


    color:


    #ffd77f;



    font-size:


    26px;



    margin-bottom:


    15px;



    text-align:center;



}





#modalDate {


    color:


    #999;



    font-size:


    13px;



    text-align:center;



    margin-bottom:


    25px;



}





#modalContent {


    color:


    #ddd;



    font-size:


    15px;



    line-height:


    1.9;



}





#noticeModal {


    display:none;


    position:fixed;


    top:0;

    left:0;


    width:100vw;

    height:100vh;



    z-index:99999;



    align-items:center;


    justify-content:center;



    background:

    rgba(0,0,0,.85);



}



.modal-box {


    position:relative;


    z-index:100000;



    width:

    min(520px,90vw);



    max-height:70vh;



    overflow:auto;



    padding:35px;



    background:

    #080808;



    border:

    2px solid #d6a344;



    box-shadow:

    0 0 80px rgba(0,0,0,.95);



}
/*
=========================================
 회원가입 Modal
 Register Modal
=========================================
*/


#registerModal,
#passwordModal {


    display:none;


    position:fixed;


    inset:0;


    z-index:300000;



    align-items:center;


    justify-content:center;



    background:

    rgba(0,0,0,.86);



    backdrop-filter:

    blur(5px);


}




.register-box {


    width:

    min(430px,90vw);



    padding:

    38px;



    background:


    linear-gradient(

        180deg,

        rgba(25,25,25,.98),

        rgba(5,5,5,.98)

    );



    border:

    2px solid

    rgba(214,163,66,.65);



    box-shadow:


    0 0 80px rgba(0,0,0,.95),


    inset 0 0 30px rgba(255,215,127,.06);



    text-align:center;


}




.register-box h2 {


    color:

    #ffd77f;



    font-size:

    28px;



    margin-bottom:

    28px;



    text-shadow:

    0 0 12px rgba(255,215,127,.25);


}





.register-box input {


    width:100%;



    height:45px;



    margin-bottom:14px;



    padding:

    0 15px;



    color:#eee;



    background:

    rgba(0,0,0,.75);



    border:

    1px solid

    rgba(214,163,66,.45);



    outline:none;



    font-size:14px;


}





.register-box input:focus {


    border-color:#ffd77f;



    box-shadow:

    0 0 12px rgba(255,215,127,.25);


}





.register-box button {


    width:48%;



    height:42px;



    margin:

    10px 1%;



    cursor:pointer;



    color:#211504;



    font-weight:700;



    background:


    linear-gradient(

        180deg,

        #ffe9aa,

        #b9781c

    );



    border:

    1px solid #ffeab0;



}





.register-box button:hover {


    filter:

    brightness(1.1);


}




#registerMsg,
#passwordMsg {


    margin-top:

    18px;



    min-height:

    24px;



    color:

    #ffd77f;



    font-size:

    14px;



    line-height:

    1.6;


}





@media(max-width:640px){


    .register-box{


        padding:25px;


    }



    .register-box h2{


        font-size:22px;


    }


}
/*
=========================================
 다운로드 Modal
 Download Modal
=========================================
*/


#downloadModal {


    display:none;


    position:fixed;


    inset:0;


    z-index:300000;


    align-items:center;


    justify-content:center;


    background:

    rgba(0,0,0,.86);



    backdrop-filter:

    blur(5px);


}
/* Notice hover effect */

.notice {
    cursor: pointer;
}

.notice:hover {
    text-decoration: underline;
}

/*
=========================================
 Password Change Button State
=========================================
*/

.register-box button:disabled {
    cursor: wait;
    opacity: .6;
    filter: grayscale(.3);
}



#loginModal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.7);

    z-index:9999;

}