@layer flat, core;

/* Setting */
:root {
    --LightTheme: #FAFAFA;
    --DarkTheme: #101010;
    
    --AccentColor: #50EB4B;

    --TextColor: #FFFFFF;
    --BaseColor: #101010;
    --NaviTextColor: #FFFFFF;
    --NaviBaseColor: #202020;

    --TextFontSet: "TextFont","system-ui";
    --BoldFontSet: "BoldFont","system-ui";

    --PcHeaderHeight: 38px;
    --PcNaviWidth: 46px;

    --MobHeaderHeight: 46px;
    --MobNaviHeight: 46px;

    --LineWidth: 1.6px;
    --BoxRadius: 3px;

    --FlipSec: 0.3s;
}

@font-face {
    font-family: "BoldFont";
    src: url(/assets/font/Mplus1-SemiBold.woff2);
    font-display: swap;
}

@font-face {
    font-family: "TextFont";
    src: url(/assets/font/Mplus1-Regular.woff2);
    font-display: swap;
}

*,input,textarea,select,button {
    font-family: var(--TextFontSet);
}

body {
    background-color: var(--BaseColor);
    min-width: 280px;
    transition-property: color background-color;
    transition-duration: var(--FlipSec);
}

/* Frame */

/* Common */
@layer core {
    #Main {
        padding: 16px;
    }
    
    #Main * {
        color: var(--TextColor);
    }
    
    #Main input,#Main textarea {
        color: var(--TextColor);
    }
}

/* PC */
@media screen and (min-width: 620px) {
    #MobHeader,#MobNavi,#MobSideNavi,#MobSideNaviClose {
        display: none;
    }

    #PcHeader {
        z-index: 1000;
        background-color: var(--NaviBaseColor);
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: var(--PcHeaderHeight);
        padding: 0 10px 0 6px;
        border-bottom: solid var(--LineWidth) var(--AccentColor);
    }

    #PcHeader div {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    #PcHeader div h1 {
        color: var(--NaviTextColor);
        font-family: var(--BoldFontSet);
        font-size: 26px;
    }

    #PcHeader div a,#PcHeader div a:link,#PcHeader div a:visited {
        color: var(--NaviTextColor);
        font-size: 20px;
    }

    #PcHeader button img {
        width: 80%;
        height: auto;
        aspect-ratio: 1/1;
    }

    #PcNavi {
        z-index: 999;
        background-color: var(--NaviBaseColor);
        position: absolute;
        top: var(--PcHeaderHeight);
        left: 0;
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        width: var(--PcNaviWidth);
        height: calc(100% - var(--PcHeaderHeight));
        padding: 10px 0 10px 0;
        border-right: solid var(--LineWidth) var(--AccentColor);
        overflow-x: auto;
    }

    #PcNavi div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #PcNavi button {
        border: 0;
    }

    #PcNavi button img {
        width: 80%;
        height: auto;
        margin-left: auto;
        margin-right: auto;

    }

    #PcNavi button span {
        color: var(--NaviTextColor);
        display: inline-block;
        width: var(--PcNaviWidth);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #Main {
        position: absolute;
        top: var(--PcHeaderHeight);
        left: var(--PcNaviWidth);
        width: calc(100% - var(--PcNaviWidth));
        height: calc(100% - var(--PcHeaderHeight));
        overflow-y: auto;
    }
}

/* Mob */
@media screen and (max-width: 620px) {
    #PcHeader,#PcNavi {
        display: none;
    }

    #MobHeader {
        z-index: 1000;
        background-color: var(--NaviBaseColor);
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: var(--MobHeaderHeight);
        border-bottom: solid var(--LineWidth) var(--AccentColor);
    }

    #MobHeader h1 {
        color: var(--NaviTextColor);
        font-size: 26px;
        word-break: keep-all;
    }

    #MobHeader button {
        width: 80px;
        height: 100%;
        border: 0;
    }

    #MobHeader button img {
        width: auto;
        height: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    #MobHeader span {
        color: var(--NaviTextColor);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #MobNavi {
        z-index: 999;
        background-color: var(--NaviBaseColor);
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: var(--MobNaviHeight);
        border-top: solid var(--LineWidth) var(--AccentColor);
    }

    #MobNavi button {
        width: 60px;
        border: 0;
    }

    #MobNavi button img {
        width: auto;
        height: 60%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1/1;
    }

    #MobNavi button span {
        display: inline-block;
        color: var(--NaviTextColor);
        width: 100%;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #MobSideNavi {
        z-index: 9999;
        background-color: var(--BaseColor);
        position: absolute;
        top: 0;
        left: -70%;
        display: flex;
        justify-content: space-between;
        width: 70%;
        height: 100%;
        border-right: solid var(--LineWidth) var(--AccentColor);
        transition-duration: var(--FlipSec);
        transition-property: left;
    }

    #MobSideNavi div img {
        width: 30%;
        margin: 26px auto 26px auto;
    }

    #MobSideNavi div h2 {
        position: relative;
        color: var(--TextColor);
        margin-bottom: 8px;
        margin-left: 6px;
        padding-left: 3px;
    }

    #MobSideNavi div h2::before {
        content: "";
        background-color: var(--TextColor);
        position: absolute;
        bottom: -3px;
        width: 100px;
        height: 3px;
    }
    
    #MobSideNavi div nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-left: 16px;
    }

    #MobSideNavi a,#MobSideNavi a:visited,#MobSideNavi a:link {
        color: var(--TextColor);
    }

    #MobSideNaviClose {
        z-index: 9998;
        background-color: var(--BaseColor);
        position: absolute;
        top: 0;
        left: -30%;
        width: 30%;
        height: 100%;
        opacity: 0.6;
        transition-duration: var(--FlipSec);
        transition-property: left;
    }

    #Main {
        position: absolute;
        top: var(--MobHeaderHeight);
        bottom: var(--MobNaviHeight);
        width: 100%;
        height: calc(100% - var(--MobHeaderHeight) - var(--MobNaviHeight));
        overflow-y: auto;
    }
}