@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 700;
    &::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none;
    -ms-overflow-style: none;
}

@media screen and (max-width: 720px){
    html{ font-size: calc(8 * (100vw / 720)); }
    .playerbar-wrapper,
    nav,
    .modalbase-wrapper{ width: 100%; }
}

@media screen and (min-width: 721px){
    html{ font-size: 8px; }
    .playerbar-wrapper,
    nav,
    .modalbase-wrapper{ width: 720px; }
    .libra-wrapper{ outline: 0.125rem solid var(--bk50); }
}


:root{
    --base: #f0f0f0;
    --acc: #ff334a;
    --bcc: #4169ff;
    --bk10: hsl(0, 0%, 90%);
    --bk25: hsl(0, 0%, 75%);
    --bk35: hsl(0, 0%, 65%);
    --bk50: hsl(0, 0%, 50%);
    --bk100: hsl(0, 0%, 0%);
    --rbw : linear-gradient(in hsl longer hue to right, hsl(0, 60%, 80%), hsl(360, 60%, 80%));
    --sdw: 0 0.5rem 1rem rgb(from var(--bk100) r g b / 0.15);
    --navheight: 12rem
}

.libra-wrapper{
    max-width: 720px;
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: block;
    background-color: var(--base);
}


body{
    width: 100%;
    max-height: 100vh;
    display: flex;
    align-items: start;
    justify-content: center;
    background-color: white;
}

.spinner {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    border: 4px solid var(--bk25);
    border-radius: 50%;
    border-top-color: var(--acc);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

main,
.playerbar-wrapper,
nav{
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .1s; 

    &.is-login{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

.login-wrapper{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    padding: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: .1s; 

    &.is-login{
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }

    .login-wrapper__container{
        width: 100%;
        height: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        box-shadow: var(--sdw);
        border-radius: 1rem;
        padding: 16rem 0;

        .login-wrapper__contents{
            width: max-content;
            height: max-content;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            
            .login-wrapper__logo{
                display: flex;
                gap: 2rem;
                width: max-content;
                height: 7rem;
                font-size: 5rem;
                align-items: center;
                justify-content: space-between;

                &::before{
                    content: "";
                    background-image: url(../images/libra_icon.svg);
                    height: 100%;
                    width: auto;
                    aspect-ratio: 1 / 1;
                    display: block;
                }
            }            

            .login-wrapper__subtext{
                width: 100%;
                height: 3rem;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 3rem;
                margin: 2rem 0 4rem 0;
            }

            .login-wrapper__authBtn{
                width: 100%;
                height: 6rem;
                border-radius: 6rem;
                background-color: var(--bk100);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2rem;
                color: white;
                padding: 1.5rem 2.5rem;
                transition: .1s;

                &:hover{ background-color: var(--acc); }
            }
        }
    }
}

main{
    padding-bottom: var(--navheight);

    &.is-play{
        padding-bottom: calc(var(--navheight) * 2);
    }

    .main-spaarea{
        width: 100%;
        height: 100%;
        padding: 6rem;
        overflow: scroll;

        .main-spaarea__returnbtn{
            width: 6rem;
            height: 6rem;
            aspect-ratio: 1 / 1;
            display: flex;   
            background-color: var(--bk100);
            mask-image: url(../images/chevron_backward_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg);
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
            cursor: pointer;
        }

        .main-spaarea__header,
        .main-spaarea__midheader,
        .main-spaarea__smallheader{
            display: flex;
            align-items: center;
            justify-content: start;
            width: 100%;
        }

        .main-spaarea__header{
            height: 4rem;
            font-size: 4rem;
            margin-top: 6rem;
            margin-bottom: 2rem;
            white-space: nowrap;

            &:has(.viewmore-btn){
                display: flex;
                justify-content: space-between;
                flex-shrink: 0;
            }
        }

        .main-spaarea__midheader{
            height: 3rem;
            font-size: 3rem;
            line-height: 3rem;
            margin-bottom: 1rem;
        }

        .main-spaarea__smallheader{
            height: 3rem;
            font-size: 2rem;
            line-height: 3rem;
        }

        .main-spaarea__grid{
            width: 100%;
            height: max-content;
            display: grid;

            &.newrelease,
            &.recently,
            &.toptrack,
            &.artist{
                margin-bottom: 6rem;
            }
        }

        &.is-home{
            display: flex;
            flex-direction: column;
            height: 100%;

            .viewmore-btn{
                width: max-content;
                height: 4rem;
                text-align: right;
                text-decoration: underline;
                color: var(--bk50);
                background-color: transparent;
                font-size: 2.5rem;
                font-weight: 400;
                line-height: 4rem;
                cursor: pointer;
                transition: .1s ease-in-out;
                padding: 0;
                border-radius: 0.5rem;

                &:hover{
                    background-color: var(--bk10);
                    padding: 0 2rem;
                }
            }

            .main-spaarea__logo{
                width: 100%;
                height: 6rem;
                display: flex;   
                align-items: center;
                font-size: 4rem;
                gap: 2rem;

                &::before{
                    content: "";
                    width: auto;
                    height: 100%;
                    aspect-ratio: 1 / 1;
                    background-image: url(../images/libra_icon.svg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }

            .main-spaarea__grid{
                &.newrelease,
                &.recently,
                &.toptrack{ width: 100%; }

                &.newrelease{
                    display: grid;
                    grid-template-rows: 1fr;
                    grid-template-columns: repeat(3, 1fr);
                    column-gap: 4rem;

                    .newrelease-cardwrap{
                        width: 100%;
                        height: 100%;
                        aspect-ratio: 186.667 / 242.667;
                        background-color: white;
                        border-radius: 1rem;
                        box-shadow: var(--sdw);
                        display: flex;
                        flex-direction: column;

                        .newrelease-cardwrap__image{
                            width: 100%;
                            height: auto;
                            aspect-ratio: 1 / 1;
                            background-color: var(--bk25);
                            border-radius: 1rem;
                            transition: .1s;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            position: relative;
                            cursor: pointer;

                            &:hover{
                                &::before{
                                    background-color: white;
                                    opacity: 0.8;
                                }

                                &::after{
                                    background-color: black;
                                    opacity: 0.5;
                                }
                            }

                            &::before{
                                content: "";
                                width: 100%;
                                height: 100%;
                                display: block;
                                background-color: transparent;
                                mask-image: url(../images/play_arrow_24dp_000000_FILL1_wght400_GRAD0_opsz24.svg);
                                mask-position: center;
                                mask-repeat: no-repeat;
                                mask-size: 50%;
                                transition: .1s;
                                position: relative;
                                z-index: 5;
                            }

                            &::after{
                                content: "";
                                width: 100%;
                                height: 100%;
                                display: block;
                                background-color: transparent;
                                transition: .1s;
                                position: absolute;
                                z-index: 1;
                                top: 0;
                                left: 0;
                                border-radius: 1rem;
                            }
                        }

                        .newrelease-cardwrap__text{
                            width: 100%;
                            height: 7rem;
                            display: grid;
                            grid-template-columns: 1fr;
                            grid-template-rows: 3.5fr 2.5fr;
                            padding: 0 1rem 1rem 1rem;
                            text-decoration: none;
                            
                            p{
                                color: var(--bk100);
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                width: 100%;
                                display: flex;
                                justify-content: start;
                                align-items: center;
                                
                                &:nth-child(1){
                                    font-size: 2.5rem;
                                    line-height: 2.5rem;
                                    height: 4rem;
                                }

                                &:nth-child(2){
                                    font-size: 1.5rem;
                                    line-height: 1.5rem;
                                    height: 2rem;
                                    opacity: 0.35;
                                }
                            }

                        }
                    }
                }

                &.recently{
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(3, 1fr);
                    gap: 2rem;

                    .recently-cardwrap{
                    }
                }

                &.toptrack{
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    grid-template-rows: 1fr;
                    gap: 2rem;

                    .toptrack-cardwrap{
                    }

                }

                &.artist{
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: 1fr;
                    gap: calc(0.125rem * (64 / 3));

                    .artist-cardwrap{
                        width: 100%;
                        height: auto;
                        text-decoration: none;
                        aspect-ratio: 140 / 180;
                        display: grid;
                        grid-template-rows: auto 5rem;

                        .artist-cardwrap__image,
                        .artist-cardwrap__title{
                            width: 100%;
                            height: 100%;
                        }

                        .artist-cardwrap__image{
                            aspect-ratio: 1 / 1;
                            border-radius: 100%;
                            display: block;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            box-shadow: var(--sdw);
                            position: relative;

                            &.default::before{
                                content: "";
                                display: block;
                                width: 100%;
                                height: 100%;
                                background-color: white;
                                mask-image: url(../images/music_note_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                                mask-position: center;
                                mask-repeat: no-repeat;
                                mask-size: 50%;
                            }
                        }

                        .artist-cardwrap__title{
                            text-align: center;
                            font-size: 2rem;
                            line-height: 5rem;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: var(--bk100);
                            padding: 0 1rem;
                        }
                    }
                }
            }
        }

        &.is-search{
        }

        &.is-playlist{
        }

        &.is-setting{
        }

        &.is-uploader{
            display: flex;
            flex-direction: column;

            .main-spaarea__grid{
                &.audioupload,
                &.createrecord{
                    width: 100%;
                    padding: 2rem;
                    border-radius: 1rem;
                    box-shadow: var(--sdw);
                    background-color: white;
                    height: max-content;
                    display: grid;
                    
                    input[type="file"]{ display: none; }
                }

                &.audioupload{
                    grid-template-rows: repeat(3, auto);
                    grid-template-columns: 1fr;
                    row-gap: 4rem;

                    .audioupload-fileselector{
                        width: 100%;
                        height: 6rem;
                        background-color: var(--bk100);
                        border-radius: 1rem;
                        font-size: 2rem;
                        line-height: 6rem;
                        text-align: center;
                        color: white;
                        transition: .1s;

                        &:hover{ background-color: var(--acc); }
                    }

                    .audioupload-selectedfiles{
                        width: 100%;
                        display: grid;

                        .selectedfiles-link{
                            width: 100%;
                            height: max-content;
                            display: grid;
                            grid-template-columns: 424fr 160fr;
                            column-gap: 2rem;

                            .main-spaarea__smallheader{ color: var(--bk50); }

                            .selectedfiles-link__inputarea{
                                width: 100%;
                                height: max-content;
                                grid-column: 1 / 3;
                                display: grid;
                                grid-template-columns: inherit;
                                column-gap: inherit;

                                .inputarea-container{
                                    width: 100%;
                                    height: max-content;
                                    grid-column: 1 / 3;
                                    display: grid;
                                    grid-template-columns: inherit;
                                    column-gap: inherit;

                                    &:not(:last-child){
                                        padding-bottom: 1rem;
                                        border-bottom: 0.125rem solid var(--bk25);
                                        margin-bottom: 1rem;
                                    }

                                    input[type="text"]{
                                        width: 100%;
                                        height: 4rem;
                                        font-size: 2rem;
                                        line-height: 2rem;
                                        padding: 1rem;
                                        border-radius: 1rem;
                                        background-color: var(--base);
                                    }
                                }
                            }
                        }
                    }

                    .audioupload-actbtns{
                        width: 100%;
                        height: 4rem;
                        display: flex;
                        gap: 4rem;
                        justify-content: center;
                        align-items: center;

                        button{
                            width: 24rem;
                            height: 4rem;
                            color: white;
                            border-radius: 4rem;
                            font-size: 2rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 0 4rem;
                            border: 0.125rem solid transparent;
                            transition: .1s;

                            &#audioUploadBtn{ 
                                background-color: var(--acc); 

                                &:not(:disabled):hover{
                                    background-color: transparent;
                                    color: var(--bk100);
                                    border-color: var(--bk100);
                                }
                            }

                            &#fileClearBtn{
                                background-color: var(--bcc);

                                &:not(:disabled):hover{
                                    background-color: transparent;
                                    color: var(--acc);
                                    border-color: var(--acc);
                                }
                            }

                            &:disabled{
                                filter: saturate(0);
                            }
                        }
                    }
                }

                &.createrecord{
                    grid-template-rows: repeat(3, auto);
                    grid-template-columns: 1fr;
                    row-gap: 4rem;

                    .createrecord-maindata{
                        width: 100%;
                        height: max-content;
                        display: grid;
                        grid-template-columns: 160fr 416fr;
                        grid-template-rows: 1fr 1fr;
                        gap: 2rem;

                        .createrecord-fileselector{
                            width: 100%;
                            height: auto;
                            aspect-ratio: 1 / 1;
                            grid-row: 1 / 3;
                            background-color: var(--bk100);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            color: white;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            font-size: 2rem;
                            padding: 2rem;
                            border-radius: 1rem;
                            transition: .1s;

                            &:hover{ background-color: var(--acc); }
                        }

                        .createrecord-maindatainput{
                            width: 100%;
                            height: auto;
                            display: grid;
                            grid-template-rows: repeat(2, max-content);

                            input[type="text"]{
                                width: 100%;
                                font-size: 2rem;
                                line-height: 2rem;
                                padding: 2rem;
                                border-radius: 1rem;
                                background-color: var(--base);
                            }

                            input{
                                width: 100%;
                                height: 6rem;
                                background-color: var(--base);
                                border-radius: 1rem;
                            }

                        }
                    }

                    .createrecord-recordinfo{
                        width: 100%;
                        height: max-content;
                        display: flex;
                        flex-direction: column;

                        .createrecord-recordinfoarea{
                            width: 100%;
                            height: max-content;
                            display: flex;

                            .createrecord-recordlength{
                                width: fit-content;
                                height: max-content;
                                display: flex;
                            }                            
                        }
                    }

                    .createrecord-audiodata{
                        .createrecord-audioselector{
                            width: 100%;
                            height: 4rem;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 2rem;
                            border-radius: 4rem;
                            background-color: var(--acc);
                            color: white;
                            margin-bottom: 2rem;
                            border: 0.125rem solid transparent;
                            transition: .1s;

                            &:not(:disabled):hover{
                                background-color: transparent;
                                color: var(--acc);
                                border-color: var(--acc);
                            }

                            &:disabled{
                                filter: saturate(0);
                            }
                        }

                        .createrecord-recordsetarea{
                            width: 100%;
                            height: fit-content;
                            display: grid;
                            grid-template-columns: 88fr 304fr 144fr 56fr;

                            .recordsetarea-index,
                            .recordsetarea-labelarea,
                            .recordsetarea-audiolabel{
                                width: 100%;
                                display: grid;
                                grid-column: 1 / 5;
                                grid-template-columns: inherit;
                            }

                            .recordsetarea-index{
                                height: 3rem;
                                p{
                                    color: var(--bk50);

                                    &:first-child{
                                        justify-content: center;
                                    }
                                }
                            }

                            .recordsetarea-audiolabel{
                                counter-increment: track-number;
                                height: 4rem;
                                font-size: 2rem;
                                border-radius: 0.5rem;
                                border: 0.25rem dotted transparent;

                                &:has(input:checked){
                                    background-color: rgb(from var(--bcc) r g b / 0.1);
                                    border: 0.25rem dotted var(--bcc);
                                }

                                input[type="radio"]{
                                    display: none;
                                }

                                p,
                                &::before{
                                    font-weight: 400;
                                    display: flex;
                                    align-items: center;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                &::before{
                                    content: counter(track-number);
                                    justify-content: center;   
                                }
                            }

                        }

                    }

                    .createrecord-movebtns{
                        width: 100%;
                        height: 4rem;
                        display: flex;
                        gap: 6rem;
                        justify-content: center;
                        align-items: center;

                        button{
                            width: 4rem;
                            height: 100%;
                            aspect-ratio: 1 / 1;
                            background-color: transparent;
                            border-radius: 0.5rem;   
                            transition: .1s;                         

                            &:not(:disabled):hover{
                                background-color: rgb(from var(--bk100) r g b / 0.15);
                            }

                            &:disabled{ opacity: 0.5; }

                            &::before{
                                content: "";
                                width: 100%;
                                height: 100%;
                                display: block;
                                mask-position: center;
                                mask-size: contain;
                                mask-repeat: no-repeat;
                                transform-origin: center;
                                background-color: var(--bk100);                           
                            }

                            &#moveBtnForward::before,
                            &#moveBtnBackward::before{ 
                                mask-image: url(../images/chevron_backward_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg);
                            }

                            &#moveBtnTop::before,
                            &#moveBtnUnder::before{
                                mask-image: url(../images/last_page_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                            }

                            &#moveBtnForward::before,
                            &#moveBtnUnder::before{ transform: rotate(90deg); }

                            &#moveBtnBackward::before,
                            &#moveBtnTop::before{ transform: rotate(-90deg); }     
                        }
                    }

                    .createrecord-actbtns{
                        width: 100%;
                        height: 4rem;
                        display: flex;
                        gap: 4rem;
                        justify-content: center;
                        align-items: center;

                        button{
                            width: 24rem;
                            height: 4rem;
                            color: white;
                            border-radius: 4rem;
                            font-size: 2rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 0 4rem;
                            border: 0.125rem solid transparent;
                            transition: .1s;

                            &#recordUploadBtn{ 
                                background-color: var(--acc); 

                                &:not(:disabled):hover{
                                    background-color: transparent;
                                    color: var(--bk100);
                                    border-color: var(--bk100);
                                }
                            }

                            &#recordClearBtn{
                                background-color: var(--bcc);

                                &:not(:disabled):hover{
                                    background-color: transparent;
                                    color: var(--acc);
                                    border-color: var(--acc);
                                }
                            }

                            &:disabled{
                                filter: saturate(0);
                            }
                        }
                    }
                }
            }
        }

        &.is-record{    
            .main-spaarea__jacket{
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                display: block;
                border-radius: 4rem;
                background-color: var(--bk10);
                margin: 6rem 0 4rem;
                position: relative;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                box-shadow: var(--sdw);

                &.is-empty{
                    &::before{
                        content: "";
                        width: 100%;
                        height: 100%;
                        display: block;
                        background-color: var(--bk25);
                        position: absolute;
                        top: 0;
                        left: 0;
                        mask-image: url(../images/hard_disk_24dp_000000_FILL1_wght400_GRAD0_opsz24.svg);
                        mask-position: center;
                        mask-repeat: no-repeat;
                        mask-size: 35%;
                        border-radius: inherit;
                    }
                }
            }

            .main-spaarea__recordinfoarea{
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                padding-bottom: 4rem;
                border-bottom: 0.125rem solid var(--bk50);

                .recordinfoarea-title,
                .recordinfoarea-user,
                .recordinfoarea-other{
                    width: 100%;
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: keep-all;
                }

                .recordinfoarea-title{
                    height: 6rem;
                    font-size: 4rem;
                    line-height: 5rem;
                }

                .recordinfoarea-user{
                    height: 2rem;
                    font-size: 2rem;
                    line-height: 2rem;
                    margin: 1rem 0 3rem;
                    color: var(--bk50);
                    font-weight: 400;
                    text-decoration: none;
                }

                .recordinfoarea-other{
                    display: flex;
                    height: 3rem;
                    gap: 1rem;

                    .recordinfoarea-other__content{
                        width: fit-content;
                        height: 100%;
                        padding: 0 1.5rem;
                        border-radius: 3rem;
                        background-color: var(--bk100);
                        font-size: 2rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                    }
                }

            }

            .main-spaarea__grid{
                &.audiocolumn{
                    margin-top: 4rem;
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;
                    counter-reset: audiocolumn;

                    .audiocolumn-audiobar{
                        width: 100%;
                        height: 8rem;
                        display: grid;
                        grid-template-columns: 48fr 424fr 56fr 72fr;
                        grid-template-rows: 1fr 1fr;
                        padding: 1rem 0;
                        background-color: transparent;
                        border-radius: 1rem;
                        counter-increment: audiocolumn;
                        cursor: pointer;
                        transition: .1s;

                        &:hover{
                            background-color: var(--bk10);
                        }

                        &::before{
                            grid-column: 1 / 2;
                            grid-row: 1 / 3;
                            content: counter(audiocolumn);
                            width: 100%;
                            height: 100%;
                            font-size: 2rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        &::after{
                            grid-column: 4 / 5;
                            grid-row: 1 / 3;
                            content: "";
                            width: 100%;
                            height: 100%;
                            background-color: var(--bk100);
                            mask-image: url(../images/play_arrow_24dp_000000_FILL1_wght400_GRAD0_opsz24.svg);
                            mask-position: center;
                            mask-repeat: no-repeat;
                            mask-size: 35%;
                        }

                        .audiobar-audiotitle,
                        .audiobar-artistname,
                        .audiobar-duration{
                            display: flex;
                            align-items: center;
                        }

                        .audiobar-audiotitle{
                            grid-column: 2 / 3;
                            grid-row: 1 / 2;
                            justify-content: start;
                            font-size: 2.5rem;
                        }

                        .audiobar-artistname{
                            grid-column: 2 / 3;
                            grid-row: 2 / 3;
                            justify-content: start;
                            color: var(--bk35);
                            font-size: 2rem;
                            font-weight: 400;
                        }

                        .audiobar-duration{
                            grid-column: 3 / 4;
                            grid-row: 1 / 3;
                            justify-content: end;
                            color: var(--bk35);
                            font-size: 1.5rem;
                        }

                        &.is-playing{
                            background-color: var(--bk10);

                            &::after{
                                mask-image: url(../images/pause_24dp_000000_FILL1_wght400_GRAD0_opsz24.svg);
                            }

                        }
                    }
                }
            }
        }

        &.is-user{

        }
    }
}

.playerbar-wrapper{
    height: 12rem;
    background-color: var(--bk10);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    padding: 2rem 6rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    cursor: pointer;   

    .playerbar-wrap__progress{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        height: 0.5rem;
    }

    .playerbar-wrap__infoarea{
        width: 100%;
        height: 100%;
        grid-column: 1 / 2;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 2rem;      

        .infoarea-jacket{
            width: auto;
            height: 100%;
            aspect-ratio: 1 / 1;
            grid-row: 1 / 3;
            grid-column: 1 / 2;
            display: block;
            background-color: color-mix(in srgb, var(--acc), white 50%);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 0.5rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            &.is-empty{
                &::before{
                    content: "";
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(255, 255, 255, .5);
                    mask-image: url(../images/hard_disk_24dp_000000_FILL1_wght400_GRAD0_opsz24.svg);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 50%;
                }
            }
        }

        .infoarea-audiotitle,
        .infoarea-artistname{
            width: 100%;
            height: 3rem;
            display: flex;
            justify-content: start;
            align-items: center;
            color: var(--acc);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .infoarea-audiotitle{
            font-size: 2.5rem;
            margin-top: 1rem;
        }

        .infoarea-artistname{
            font-size: 2rem;
            font-weight: 400;
            margin-bottom: 1rem;
            opacity: .5;
        }
    }
    &.is-play{
        background-color: color-mix(in srgb, var(--acc), white 95%);
        bottom: var(--navheight);
    }
}

nav{
    height: var(--navheight);
    padding: 0 6rem;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 30;

    .nav-accountarea,
    .nav-navigatearea{
        width: 100%;
        height: 100%;
    }

    .nav-accountarea{
        width: 100%;
        height: 100%;
        padding: 3rem 0;
        
        button{
            display: flex;
            width: 100%;
            height: 100%;
            background-color: transparent;
            appearance: none;
            cursor: pointer;
            position: relative;

            &::before{
                content: "";
                width: calc(100% + 2rem);
                height: calc(100% + 2rem);
                top: -1rem;
                left: -1rem;
                display: block;
                position: absolute;
                background-color: var(--base);
                z-index: 0;
                border-radius: 6rem;
                visibility: hidden;
                pointer-events: none;
                opacity: 0;
                transition: .1s; 
            }

            &:hover::before{
                visibility: visible;
                opacity: 1;
            }
        }

        .accountarea-icon,
        .accountarea-nameuid{ z-index: 40; }

        .accountarea-icon{
            width: auto;
            height: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            &.is-default{
                &::before{
                    content: "";
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-color: white;
                    mask-image: url(../images/music_note_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 50%;
                }
            }
        }

        .accountarea-nameuid{
            width: 100%;
            max-width: 16rem;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: start;

            .account-name,
            .account-uid{
                width: 100%;
                display: block;
                text-align: left;
                padding: 0 1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
            }

            .account-name{
                height: calc(100% * (28 / 48));
                line-height: calc(6rem * (28 / 48));
                font-size: 2.5rem;
            }

            .account-uid{
                height: calc(100% * (20 / 48));
                line-height: calc(6rem * (20 / 48));
                font-size: 2rem;
                font-weight: 400;
                color: var(--bk50);
            }
        }
    }

    .nav-navigatearea{
        padding-left: 7rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;

        input[type="radio"]{
            display: none;

            &:not(:checked) + label:hover{
                p{ color: var(--bk100); }
                &::before{ background-color: var(--bk100); }
            }
            
            &:checked + label{ 
                background-color: var(--base);
                
                p{ color: var(--bk100); }
                &::before{ background-color: var(--bk100); }
            }
        }

        label{
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: filter 0.1s;

            p{  
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 1;
                font-size: 1.5rem;
                line-height: 2rem;
                text-align: center;
                color: var(--bk25);
            }

            &::before{
                content: "";
                width: calc(100% * (64 / 96)); 
                height: auto;
                aspect-ratio: 2 / 1;
                display: block;
                background-color: var(--bk25);
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
            }

            &[for="navHomeBtn"]::before{ mask-image: url(/images/home_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
            &[for="navSearchBtn"]::before{ mask-image: url(/images/search_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
            &[for="navPlayListBtn"]::before{ mask-image: url(/images/list_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
            &[for="navSettingBtn"]::before{ mask-image: url(/images/settings_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
        }
    }
}

.accountcard-wrapper{
    min-width: 30rem;
    width: fit-content;
    max-width: 60vw;
    height: fit-content;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 11rem;
    left: 6rem;
    z-index: 40;
    background-color: white;
    box-shadow: var(--sdw);
    border-radius: 1rem;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .1s; 

    &.is-open{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .accountcard-wrapper__mainarea,
    .accountcard-wrapper__rolearea,
    .accountcard-wrapper__btnarea{
        width: 100%;
    }

    .accountcard-wrapper__mainarea,
    .accountcard-wrapper__rolearea{
        grid-template-rows: 1fr;
    }

    .accountcard-wrapper__mainarea{
        height: 7rem;
        display: grid;
        grid-template-columns: 7rem 1fr;

        .mainarea-icon{
            width: auto;
            height: 7rem;
            aspect-ratio: 1 / 1;
            border-radius: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            &.is-default{
                &::before{
                    content: "";
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-color: white;
                    mask-image: url(../images/music_note_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 50%;
                }
            }
        }

        .mainarea-nameuid{
            width: 100%;
            min-width: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;

            .account-name,
            .account-uid{
                width: 100%;
                min-width: 0;
                height: calc(100% * (28 / 56));
                line-height: calc(7rem * (28 / 56));
                display: block;
                text-align: left;
                padding: 0 1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
            }

            .account-name{
                font-size: 2.5rem;
            }

            .account-uid{
                font-size: 2rem;
                font-weight: 400;
                color: var(--bk50);
            }
        }
    }

    .accountcard-wrapper__rolearea{
        height: 7rem;
        padding: 2rem 0;
        display: grid;
        grid-template-columns: 10fr 15fr;
        column-gap: 1rem;
        border-bottom: 0.125rem solid var(--bk10);

        .rolearea-current,
        .rolearea-req{
            width: 100%;
            height: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
        }

        .rolearea-current{
            background-color: var(--bk100);
            font-size: 2rem;
            color: white;
        }

        .rolearea-req{
            font-size: 1.5rem;
            background-color: var(--acc);
            color: white;
            border: 0.125rem solid transparent;
            transition: .1s;

            &:not(:disabled):hover{
                background-color: transparent;
                color: var(--acc);
                border-color: var(--acc);
            }

            &:disabled{
                filter: saturate(0);
            }
        }
    }

    .accountcard-wrapper__btnarea{
        height: fit-content;
        margin-top: 2rem;
        gap: 2rem;
        display: flex;
        flex-direction: column;

        button{
            width: 100%;
            height: 3rem;
            font-size: 2rem;
            line-height: 3rem;
            text-align: left;
            padding-left: 1rem;
            font-weight: 400;
            background-color: transparent;
            border-radius: 0.5rem;

            &:disabled{ color: var(--bk35); }

            &#logOutBtn{ color: var(--acc); }

            &:not(:disabled){
                &:hover{
                    background-color: var(--base);
                
                }
            }
        }
    }
}

.errordialog-wrapper{
    width: 100%;
    height: 100%;
    background-color: var(--base);
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 4rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .1s; 

    &.is-error{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    p{
        display: flex;
        justify-content: start;

        &:nth-child(1){
            height: 9rem;
            font-size: 9rem;
            align-items: center;
        }

        &:nth-child(2){
            height: 4rem;
            font-size: 4rem;
            align-items: center;
        }

        &:nth-child(3){
            min-height: 20rem;
            height: fit-content;
            font-size: 2.5rem;
            line-height: 4rem;
            font-weight: 400;
        }

        &:nth-child(4){
            height: 2rem;
            font-size: 2rem;
            align-items: center;

            &::after{
                content: '秒後に自動で戻ります。';
                width: 100%;
                height: 2rem;
                display: flex;
                justify-content: start;
                align-items: center;
                font-size: 2rem;
                font-weight: 400;
            }
        }
        
    }
}

.modalbase-wrapper{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    transition: .1s;
    visibility: hidden;
    background-color: rgb(from var(--bk100) r g b / 0);
    backdrop-filter: blur(0rem);
    pointer-events: none;
    padding: 6rem;
    opacity: 0;
    transform: translateX(-50%);
    left: 50%;

    &.is-open{
        visibility: visible;
        background-color: rgb(from var(--bk100) r g b / 0.25);
        backdrop-filter: blur(16px);
        pointer-events: auto;
        opacity: 1;
    }

    .modalbase-wrapper__container{
        width: 100%;
        height: fit-content;
        max-height: 100%;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        background-color: white;
        box-shadow: var(--sdw);
        border-radius: 1rem;
        
        .modalbase-wrapper__closebtn{
            width: 6rem;
            height: 6rem;
            background-color: var(--base);
            display: block;
            border-radius: 100%;
            transition: .1s;
            margin-left: auto;
            margin-right: 0;

            &::before{
                content: "";
                width: 100%;
                height: 100%;
                display: block;
                background-color: var(--bk100);
                mask-image: url(../images/close_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                mask-position: center;
                mask-size: 50%;
                mask-repeat: no-repeat;
            }

            &:hover{
                background-color: var(--acc);

                &::before{ background-color: white;}
            }

        }

        .modalbase-wrapper__maincontent{
            width: 100%;
            height: fit-content;

            .modal-header,
            .modal-midheader,
            .modal-smallheader{
                display: flex;
                align-items: center;
                justify-content: start;
                width: 100%;
            }

            .modal-header{
                height: 4rem;
                font-size: 4rem;
                margin-top: 6rem;
                margin-bottom: 2rem;
            }

            .modal-midheader{
                height: 3rem;
                font-size: 3rem;
                line-height: 3rem;
                margin-bottom: 2rem;
            }

            .modal-smallheader{
                height: 3rem;
                font-size: 2rem;
                line-height: 3rem;
            }

            input[type="text"]{
                &.is-invalid{
                    border-color: var(--acc);
                    background-color: rgb(from var(--acc) r g b / 0.25) !important;
                }
            }

            &.account{
                #iconSelector{ display: none; }

                #accountDisabledBtn{
                    width: 100%;
                    margin-top: 8rem;
                    color: var(--acc);
                    background-color: transparent;
                    text-align: left;
                    font-size: 2rem;
                    line-height: 2rem;
                    font-weight: 400;
                }

                .modalwrapper-account__container{
                    display: grid;
                    grid-template-columns: 128fr 416fr;
                    grid-template-rows: 64fr 48fr;
                    gap: 2rem;
                    
                    .account-iconselector,
                    .account-username,
                    .account-defaulticoncolor{
                        width: 100%;
                    }

                    .account-iconselector{
                        grid-row: 1 / 3;
                        grid-column: 1 / 2;
                        height: auto;
                        aspect-ratio: 1 / 1;
                        background-color: var(--bk100);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        color: white;
                        border-radius: 100%;
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 1.5rem;

                        &:hover{ background-color: var(--acc); }
                    }

                    .account-username{
                        display: grid;
                        grid-template-rows: 3rem 1fr;
                        grid-template-columns: 1fr;

                        .account-username__input{
                            width: 100%;
                            height: 5rem;
                            background-color: var(--base);
                            border-radius: 1rem;
                            padding: 1rem;
                            font-size: 2rem;
                        }
                    }

                    .account-defaulticoncolor{
                        display: grid;
                        grid-template-columns: 352fr 48fr;
                        grid-template-rows: 3fr 3fr;
                        column-gap: 2rem;
                        
                        .modal-smallheader{
                            grid-row: 1 / 2;
                            grid-column: 1 / 2;
                        }

                        .account-defaulticoncolor__colorbar{
                            margin: auto 0;
                            grid-row: 2 / 3;
                            grid-column: 1 / 2;
                            height: 0.75rem;
                            appearance: none;
                            background: var(--rbw);
                            border-radius: 1rem;

                            &::-webkit-slider-thumb {
                                -webkit-appearance: none;
                                appearance: none;
                                width: 1rem;
                                height: 3rem;
                                background-color: var(--bcc);
                                border-radius: 1rem;
                                cursor: grab;
                            }

                            &::-moz-range-thumb {
                                width: 1rem;
                                height: 3rem;
                                background-color: var(--bcc);
                                border-radius: 1rem;
                                border: none;
                                cursor: grab;
                            }
                        }

                        .account-defaulticoncolor__sample{
                            grid-row: 1 / 3;
                            grid-column: 2 / 3;
                            color: white;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 100%;
                            font-size: 2rem;
                        }

                    }
                }
            }

            &.audiolist{
                .audiolist-searchbar{
                    width: 100%;
                    height: 5rem;
                    position: relative;   

                    &::before{
                        content: '';
                        width: 3rem;
                        height: 3rem;
                        aspect-ratio: 1 / 1;
                        display: block;
                        background-color: var(--bk50);
                        mask-image: url(../images/search_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                        mask-position: center;
                        mask-repeat: no-repeat;
                        mask-size: cover;
                        position: absolute;
                        top: 1rem;
                        left: 2rem;
                    }

                    input[type="text"]{
                        width: 100%;
                        height: 100%;
                        background-color: var(--base);
                        border-radius: 5rem;
                        padding-left: 7rem;                          
                    }
                }

                .audiolist-listcounter{
                    width: 100%;
                    height: 3rem;
                    margin: 4rem 0 1rem 0;
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    font-size: 3rem;
                }

                .audiolist-listarea{
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;
                    min-height: 24rem;
                    max-height: 50vh;
                    overflow: scroll;

                    input[type="checkbox"]{
                        display: none; 

                        &:checked + label{
                            background-color: transparent;
                            color: var(--bcc);
                            background-color: rgb(from var(--bcc) r g b / 0.1);
                            border-color: var(--bcc);
                        }
                    }

                    label{
                        width: 100%;
                        min-height: 4rem;
                        padding: 1rem;
                        border-radius: 0.5rem;
                        background-color: var(--base);
                        border: 0.125rem solid transparent;
                        font-size: 1.5rem;
                        line-height: 1;
                        font-weight: 400;
                        user-select: none;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: keep-all;
                        white-space: nowrap;

                        &.is-hidden{ display: none; }
                    }
                }
            }
        }

        .modalbase-wrapper__actbtns{
            width: 100%;
            height: 4rem;
            display: flex;
            gap: 4rem;
            justify-content: center;
            align-items: center;

            button{
                width: 24rem;
                height: 4rem;
                color: white;
                border-radius: 4rem;
                font-size: 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 4rem;
                border: 0.125rem solid transparent;
                transition: .1s;

                &#modalBackBtn{ 
                    background-color: var(--bk100); 

                    &:not(:disabled):hover{
                        background-color: transparent;
                        color: var(--bk100);
                        border-color: var(--bk100);
                    }
                }

                &#modalCorrectBtn{
                    background-color: var(--acc);

                    &:not(:disabled):hover{
                        background-color: transparent;
                        color: var(--acc);
                        border-color: var(--acc);
                    }
                }

                &:disabled{
                    filter: saturate(0);
                }
            }
        }
    }
}

.showresult-wrapper{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgb(from var(--bk100) r g b / 0);
    backdrop-filter: blur(0rem);
    pointer-events: none;
    padding: 6rem;
    opacity: 0;

    &.is-open{
        visibility: visible;
        background-color: rgb(from var(--bk100) r g b / 0.1);
        backdrop-filter: blur(16px);
        pointer-events: auto;
        opacity: 1;
    }

    .showresult-wrapper__spinner{
        width: 8rem;
        height: 8rem;
    }

    .showresult-wrapper__status{
        margin-top: 2rem;
        text-align: center;
        font-size: 2rem;
        line-height: 2rem;
        height: 2rem;
    }

}