/* ========================= */
/* BOOT SCREEN */
/* ========================= */

#boot-screen{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    /* background:black; */
    background:#0000AA;

    z-index:99999;

    overflow:hidden;

    display:flex;

    justify-content:center;
    align-items:center;

    flex-direction:column;

    }

#boot-text{

    /* color:#00ff00; */
    color:white;

    /* font-size:48px; */
    font-size:clamp(24px, 8vw, 48px);

    /* font-family:Consolas, monospace; */
    font-family: "Pretendard", sans-serif;

    z-index:2;

    text-shadow:0 0 10px #00ff00;

    animation:blink 0.3s infinite;

    text-align:center;

    padding:0 20px;
}
#boot-noise{

    position:absolute;

    width:100%;
    height:100%;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(86, 25, 25, 0.03) 0px,
            rgba(218, 10, 10, 0.03) 1px,
            /* rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px, */
            transparent 1px,
            transparent 3px
        );

    animation:
        noiseMove 0.15s infinite,
        flicker 0.32s infinite;
}

@keyframes noiseMove{

    0%{
        transform:translateY(0px);
    }

    100%{
        transform:translateY(10px);
    }
}

@keyframes flicker{

    0%{
        opacity:0.8;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.75;
    }
}

@keyframes blink{

    50%{
        opacity:0;
    }
}

/* CRT 느낌 */
body::before{

    content:"";

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    pointer-events:none;

    background:
        linear-gradient(
            rgba(255,255,255,0.02) 50%,
            rgba(0,0,0,0.02) 50%
        );

    background-size:100% 4px;

    z-index:9999;
}


body{
    margin:0;
    background:#0000AA;
    color:#FFFFFF;
    /* font-family:Consolas, monospace; */
    /* font-family:"Nanum Myeongjo", serif; */
    font-family: "Pretendard", sans-serif;


}

#container{
    width:1200px;
    margin:auto;
    padding:20px;
}

#logo{
    text-align:center;
    font-size:42px;
    font-weight:bold;
    margin-top:30px;
    margin-bottom:20px;
    color:#FFFFFF;
    text-shadow:0 0 10px #FFFFFF;
    
}


#intro{
    flex:1;
    /* border:1px solid red; */
    /* padding-top:1px; */
    display:flex;
    flex-direction:column;
    justify-content:center; /* 세로 중앙 */
    align-items:center;     /* 가로 중앙 */
    font-size:20px;

    /* text-align:center; */
}

#intro-image{
    width:600px;
    align-items:flex-start;

    margin-top:0;
    padding-top:0;

}

#intro-image img{
    width:100%;
    height:auto;
    display:block;
    margin:0;
}

.main-layout{
    display:flex;
    gap:30px;
    align-items:flex-start;
    font-size:20px;
}

#main-layout{
    display:flex;
    gap:20px;
    align-items:flex-start;
    font-size:20px;
}

#left-panel{
    flex:1;
}

#right-panel{
    width:250px;
}

.panel{
    /* border:1px solid #FFFFFF; */
    padding:10px;
    font-family: "Pretendard", sans-serif;
    /* margin-bottom:20px; */
    /* background:#0000AA; */
}

/* .panel1{
    border:1px solid #FFFFFF;
    padding:15px;
    margin-bottom:20px;
    background:#0000AA;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:20px;
    background:red;
} */

.fixed-menu {
    display: flex;
    gap: 12px;
    align-items: center;
        font-size:20px;

    background: white;
    padding: 5px 4px;

    border-bottom: 2px solid #1e3a8a;
}

.fixed-item {
    color: #1e3a8a;        /* 파란 글씨 */
    text-decoration: none;

    /* padding: 6px 12px; */
    padding: 6px;
    border-radius: 6px;

    font-weight: bold;
}

.fixed-item:hover {
    background: #1e3a8a;
    color: white;
}

/* 대화방 강조 */
.fixed-item.chat {
    border: 1px solid #1e3a8a;
}
.panel1{
    display:flex;
    justify-content:space-between;
    /* margin-top:40px !important; */


}

.left,
.center,
.right{
    width:33%;
}

.spacer{
    height:30px;
}


.panel-title{
    /* margin-bottom:15px; */
    margin-top:15px;
    font-size:20px;
    color:#FFFFFF;
}

/* .left{
    flex:1;

    border-right:1px solid white;
}

.center{
    flex:1;
}

.right{
    flex:1;
} */


button{
    margin-top:10px;
    background:#0000AA;
    color:#FFFFFF;
    border:1px solid #FFFFFF;
    padding:8px 15px;
    font-family: "Pretendard", sans-serif;
    font-size:20px;
}

button:hover{
    background:#0000AA;
    cursor:pointer;
}

input{
    width:100%;
    box-sizing:border-box;
    margin-bottom:10px;
    background:#0000AA;
    color:#FFFFFF;
    border:1px solid #FFFFFF;
    padding:10px;
    font-family: "Pretendard", sans-serif;
}

a{
    color:#FFFFFF;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

#footer{
    margin-top:80px;
    text-align:center;
    color:#FFFFFF;
    font-size:20px;
}

.blink{
    animation:blink 1s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}
.btn,
.btn-link {
    display: inline-flex;          /* 🔥 핵심 */
    align-items: center;           /* 세로 중앙 */
    justify-content: center;

    height: 38px;                  /* 🔥 무조건 동일 높이 */
    min-width: 110px;              /* 🔥 폭도 통일 */

    padding: 0 16px;               /* 좌우만 padding */
    box-sizing: border-box;

    font-size: 20px;
    font-family: "Pretendard", sans-serif;

    border-radius: 6px;

    background: #1e3a8a;
    color: white;

    text-decoration: none;
    border: none;
    cursor: pointer;

    line-height: 1;               /* 🔥 중요 */
}

/* hover */
.btn:hover,
.btn-link:hover {
    background: #2563eb;
}

* {
    box-sizing: border-box;
}

#chat-layout{

    display:flex;

    gap:20px;
}

#chat-main{

    flex:1;
}

#user-list{

    width:220px;

    border:1px solid white;

    padding:10px;

    min-height:600px;
}
.ticker {
    width: 100%;
    height: 42px;

    overflow: hidden;
    white-space: nowrap;

    background: #000000;

    color: #00ff00;

    /* border-top: 1px solid #00ff00;
    border-bottom: 1px solid #00ff00; */

    line-height: 42px;

    font-family: Consolas, Monaco, monospace;
    font-size: 20px;
    font-weight: bold;

    /* box-shadow:
        0 0 5px #00ff00,
        inset 0 0 5px #00ff00; */
}

.ticker-track {
    display: inline-flex;
    width: max-content;
    animation: ticker-scroll 25s linear infinite;
}

.ticker-track span {
    padding-right: 120px;
    text-shadow:
        0 0 1px #00ff00,
        0 0 1px #00ff00;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}