/* 공통 속성 */


.portal_card{
    background:#fff;
    display:flex;
    flex-direction:column;

    appearance:none;
    -webkit-appearance:none;
    border:none;

    text-align:left;
    font:inherit;
    color:inherit;
    padding:6px;
    text-decoration:none;

    cursor:pointer;
    transition:background .2s ease;
}

.portal_card .en{
    font-size:.85rem;
    line-height:1.5;
}


/* 개별 grid 색상 */

.void{
    background:#fff;
    pointer-events:none;
}
.white{background:white;}
.red{background:var(--red);}
.blue{background:var(--blue);}
.yellow{background:var(--yellow);}
.black{background:black;}

.v03{
animation:color_change_01 20s;
animation-iteration-count:infinite;
}

@keyframes color_change_01{
0%          {background:var(--red);}
33.33333%   {background:var(--blue);}
66.66666%   {background:var(--yellow);}
100%        {background:var(--red);}
}

.v06{
animation:color_change_02 10s;
animation-iteration-count:infinite;
}

@keyframes color_change_02{
0%          {background:white;}
50%   	{background:black;}
100%        {background:white;}
}



/* submenu 모달 창 설정 */

#navigation_modal{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index:1000;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .2s ease,
        visibility 0s linear .2s;
}

#navigation_modal.active{
    opacity:1;
    visibility:visible;
    transition:
        opacity .2s ease;
    pointer-events:auto;
}

.navigation_window{
    width:min(640px,90vw);
    max-height:85dvh;
    display:flex;
    flex-direction:column;
    overflow:auto;

    background:#fff;
    border-radius:16px;
    padding:2rem;
    box-shadow:0 16px 48px rgba(0,0,0,.25);

    transform:scale(.96);
    opacity:0;
    transition:
        transform .2s ease,
        opacity .2s ease;
}

#navigation_modal.active .navigation_window{
    transform:scale(1);
    opacity:1;
}

.navigation_title_row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}

.navigation_header{
    flex-shrink:0;
    border-bottom:1px solid #ddd;
    padding-bottom:1rem;
}

.navigation_header h2{
    font-family:'Jeju Gothic', sans-serif;
    font-size:1.5rem;
    font-weight:normal;
    letter-spacing:-0.01em;
    line-height:1.3;
    margin:0;
}

.navigation_header h2::before{
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background: black;
    margin-right: 0.6rem;
    vertical-align: middle;
}

.navigation_header p{
    color:#777;
}

#navigation_close{
    border:none;
    background:none;
    padding:0;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
}

#navigation_menu{
    flex:1;
    overflow-y:auto;
    counter-reset: nav-item;
}

.navigation_text{
    display:inline;
    flex:1;
}

.navigation_item{
    display:flex;
    align-items:flex-start;
    text-decoration:none;
    counter-increment: nav-item;
    padding:.7rem 0;
    border-bottom:1px solid #ddd;
}

.navigation_item:last-child{
    border-bottom:none;
}

.navigation_item{
    counter-increment: nav-item;
}

.navigation_item::before{
    content: counter(nav-item, decimal-leading-zero) ". ";
    width:2.6em;
    flex-shrink:0;
}

.navigation_item.appendix{
    counter-increment: none;
}

.navigation_item.appendix::before{
    content: attr(data-prefix) " ";
    width:2.6em;
    flex-shrink:0;
}

.navigation_item .en{
    margin-left:.4rem;
    color:#777;    
    font-size:.9rem;
}

.navigation_item:hover{
    padding-left:.75rem;
    transition:.2s;
}



/* Mobile view 지정 (767 px 이하) */


@media screen and (max-width:767px){

    .navigation_window{
        width:88vw;
        max-height:90dvh;
        }

    .navigation_text{
            display:flex;
            flex-direction:column;
            align-items:flex-start;
        }

    .navigation_item{
            transition:none;
    }

    .navigation_item:hover{
            padding-left:0;
    }

    .navigation_item .ko{
        line-height:1.3;
    }

    .navigation_item .en{
        margin-left:0;
        margin-top:0;
        margin-bottom:.2rem;
        line-height:1.3;
    }

    .navigation_item:active{
        color:var(--red);
    }

}