@charset "UTF-8";

/* ==================================
   Base
================================== */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body.game-layout-body{
    background:#f3f4f6;
    color:#111827;
    min-height:100vh;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        sans-serif;
}

/* ==================================
   Header
================================== */

.game-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    box-shadow:
        0 2px 12px rgba(0,0,0,.04);
}

.game-header-inner{
    max-width:1800px;

    height:64px;

    margin:0 auto;

    padding:0 24px;

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

.game-logo{
    text-decoration:none;

    color:#111827;

    font-size:22px;
    font-weight:900;
}

.game-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.game-nav a{
    text-decoration:none;

    color:#374151;

    font-size:15px;
    font-weight:700;

    transition:.2s;
}

.game-nav a:hover{
    color:#2563eb;
}

/* ==================================
   Layout
================================== */

.game-wrapper{
    max-width:1800px;

    margin:0 auto;

    padding:20px;

    display:grid;

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

    gap:20px;
}

.game-sidebar{
    min-height:800px;
}

.game-center{
    min-width:0;
}

/* ==================================
   Ad
================================== */

.game-ad-box{
    position:sticky;
    top:90px;

    min-height:600px;

    border-radius:18px;

    border:1px solid #e5e7eb;

    background:#ffffff;

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

    font-size:14px;
    font-weight:700;
    color:#9ca3af;
}

.game-footer-ad{
    max-width:1800px;

    margin:0 auto;

    padding:0 20px 30px;
}

.game-ad-wide{
    height:120px;

    border-radius:20px;

    border:1px solid #e5e7eb;

    background:#ffffff;

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

    color:#9ca3af;
    font-weight:700;
}

/* ==================================
   Desktop Game Area
================================== */

.game-center .sum-puzzle-page{
    max-width:none;
    margin:0;
}

/* ==================================
   Tablet
================================== */

@media (max-width:1280px){

    .game-wrapper{
        grid-template-columns:
            180px
            minmax(0,1fr)
            180px;
    }

}

/* ==================================
   Mobile
================================== */

@media (max-width:1024px){

    .game-wrapper{
        grid-template-columns:1fr;
    }

    .game-sidebar{
        display:none;
    }

    .game-footer-ad{
        display:none;
    }

}

@media (max-width:768px){

    .game-header-inner{
        height:auto;

        padding:14px;

        flex-direction:column;
        gap:12px;
    }

    .game-nav{
        width:100%;

        justify-content:center;
    }

}

.game-lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.game-lang-selector a {
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.game-lang-selector a:hover {
    background: #2563eb;
    color: #ffffff;
}