:root {
    --navbar-height: 40px;
    --navbar-horizontal-padding: 8px;

    --navbar-logo-kor-height: 28px;
    --navbar-logo-eng-height: 24px;
    --navbar-logo-gap: 8px;
    
    --navbar-menu-width: 200px;
    
    --regames-symbol-width: 180px;
    --regames-logo-width: 240px;

    --main-box-gap: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'MinSans';
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--navbar-height) + env(safe-area-inset-top));
    
    padding-top: env(safe-area-inset-top);
    padding-left: var(--navbar-horizontal-padding);
    padding-right: var(--navbar-horizontal-padding);

    background-color: #4F3A15;
    z-index: 1000;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar button {
    border: none;
    outline: none;
    background: none;
    padding: 0;

    display: flex;
    align-items: center;
}

.side-menu {
    position: fixed;
    right: calc(var(--navbar-menu-width)*-1);
    width: var(--navbar-menu-width);
    background-color: #C5B89C;
    z-index: 2000;
    padding-top: env(safe-area-inset-top);
    transition: right 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.side-menu a {
    color: #121212;
    text-decoration: none;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 500;
}

.side-menu.open {
    right: 0;
}

.logo-area {
    display: flex;
    gap: var(--navbar-logo-gap);
    align-items: center;
}

#navbar-logo-kor {
    height: var(--navbar-logo-kor-height);
}

#navbar-logo-eng {
    height: var(--navbar-logo-eng-height)
}

#regames-symbol {
    width: var(--regames-symbol-width);
}

#regames-logo {
    width: var(--regames-logo-width);
}

.main-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--main-box-gap);
    height: calc(80vh - var(--navbar-height));
}

body {
    background-color: #F5F3EE;

     /* 상단바 높이만큼 내림 */
    margin-top: calc(var(--navbar-height) + env(safe-area-inset-top));
}

/* 모바일에서만 높이 줄이기 */
@media (max-width: 768px) {
    :root {
        --navbar-height: 32px;
        --navbar-horizontal-padding: 6px;
        --navbar-logo-kor-height: 22px;
        --navbar-logo-eng-height: 18px;
        --navbar-logo-gap: 4px;

        --regames-symbol-width: 120px;
        --regames-logo-width: 160px;

        --main-box-gap: 20px;
    }
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-1@1.0/MinSans-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-1@1.0/MinSans-Bold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-1@1.0/MinSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}