@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans+JP:wght@400;700&family=IBM+Plex+Sans+KR:wght@400;700&display=swap');

/* 라이트모드 기본값, 다크모드는 아래 prefers-color-scheme에서 역전 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --panel-bg-color: #333333;
    --panel-text-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #e6e6e6;
        --panel-bg-color: #e6e6e6;
        --panel-text-color: #1a1a1a;
    }
}

en {font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; letter-spacing: -0.1em;}
kr {font-family: 'IBM Plex Sans KR', monospace; font-size: 0.9rem;}
jp {font-family: 'IBM Plex Sans JP', monospace; font-size: 0.9rem; letter-spacing: -0.1em;}

a:link{text-decoration:underline; color:var(--panel-text-color);}
a:visited{text-decoration:underline; color:var(--panel-text-color);}
a:active{text-decoration:underline; color:var(--panel-text-color);}

#content {width:100%; max-width:600px; box-sizing:border-box;}

#content p {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left;
}

img {
    height: auto;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

#floatMenu {
    position: absolute;
    width: 180px;
    right: 30px;
    top: 30px;
    background-color: var(--panel-bg-color);
    color: var(--panel-text-color);
    z-index: 1;
}

#floatMenu p {
    margin: 0;
}

#mobileMenuToggle {
    display: none;
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    display: none;
    position: relative;
    z-index: 1;
}

.dropdown-content a {
    background: var(--panel-bg-color);
    display: block;
    width: 180px;
    position: relative;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media (max-width: 1024px) {
    #mobileMenuToggle {
        display: block !important;
        position: fixed;
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        background: var(--panel-bg-color);
        color: var(--panel-text-color);
        font-size: 24px;
        line-height: 1;
        z-index: 9999;
    }

    #floatMenu {
        display: none;
        position: fixed;
        top: 64px;
        right: 12px;
        height: auto;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        z-index: 9998;
    }

    body.mobile-menu-open #floatMenu {
        display: block;
    }

    .dropdown.mobile-dropdown-open .dropdown-content {
        display: block;
    }
}

.toggle-content {
    display: none;
}

.toggle-content.open {
    display: block;
}

.toggle-open,
.toggle-close {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}