/* 공통 속성 */

.subportal_grid{
    font-family:'Jeju Gothic',sans-serif;
    width:min(1440px,95vw);
    margin-block:4px;
    display:grid;
    grid-template-columns:
        2.2fr
        repeat(10, 1fr)
        2.2fr;
    grid-template-rows: repeat(8, 100px);
    gap:var(--gap);
}

.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 .ko{
}

.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;}
}

/* hover 효과 */

.notes:hover,.music:hover		{background:var(--blue); color:white;}
.research:hover,.painting:hover	{background:var(--yellow);}
.science:hover,.schism:hover	{background:var(--red);}


/* 카드 배치 */

.notes		{grid-column:2 / span 4; grid-row:1 / span 2;}
.research	{grid-column:7 / span 5; grid-row:1 / span 1;}
.science	{grid-column:4 / span 4; grid-row:3 / span 2;}
.music		{grid-column:8 / span 4; grid-row:3 / span 3;}
.painting	{grid-column:2 / span 3; grid-row:6 / span 3;}
.schism	{grid-column:6 / span 5; grid-row:6 / span 3;}

/* void 배치 */

.vl1{grid-column:1; grid-row:1 / span 1;}
.vl2{grid-column:1; grid-row:2 / span 5;}
.vl3{grid-column:1; grid-row:7 / span 2;}

.vr1{grid-column:12; grid-row:1 / span 4;}
.vr2{grid-column:12; grid-row:5 / span 1;}
.vr3{grid-column:12; grid-row:6 / span 3;}

.v01{grid-column:6 / span 1; grid-row:1 / span 1;}
.v02{grid-column:6 / span 6; grid-row:2 / span 1;}
.v03{grid-column:2 / span 2; grid-row:3 / span 3;}
.v04{grid-column:4 / span 4; grid-row:5 / span 1;}
.v05{grid-column:5 / span 1; grid-row:6 / span 3;}
.v06{grid-column:11 / span 1; grid-row:6 / span 1;}
.v07{grid-column:11 / span 1; grid-row:7 / span 2;}


/* 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 (max-width:768px){
.subportal_grid{
        grid-template-columns:
            repeat(10,1fr);
}

/* 카드 배치 - Desktop View의 grid-column값에서 1씩 빼주면 됨 */

.notes		{grid-column:1 / span 4; grid-row:1 / span 2;}
.research	{grid-column:6 / span 5; grid-row:1 / span 1;}
.science	{grid-column:3 / span 4; grid-row:3 / span 2;}
.music		{grid-column:7 / span 4; grid-row:3 / span 3;}
.painting	{grid-column:1 / span 3; grid-row:6 / span 3;}
.schism	{grid-column:5 / span 5; grid-row:6 / span 3;}

/* void 배치 - Desktop View의 grid-column값에서 1씩 빼주면 됨 */

.vl1,.vl2,.vl3,.vr1,.vr2,.vr3{display:none;}

.v01{grid-column:5 / span 1; grid-row:1 / span 1;}
.v02{grid-column:5 / span 6; grid-row:2 / span 1;}
.v03{grid-column:1 / span 2; grid-row:3 / span 3;}
.v04{grid-column:3 / span 4; grid-row:5 / span 1;}
.v05{grid-column:4 / span 1; grid-row:6 / span 3;}
.v06{grid-column:10 / span 1; grid-row:6 / span 1;}
.v07{grid-column:10 / span 1; grid-row:7 / span 2;}

}


/* 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);
}

}