/* 약어 정리 */

:root{
 --blue:#003DA5;
 --red:#D62828;
 --yellow:#F4C300;
 --void:#FFFFFF;
 --gap:4px;
}

/* Desktop view 지정 (1200 px 이상) */


/* 전체 요소 */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* 문서 뷰포트 */

html {
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* hidden */

.hidden{

    display:none;

}

/* header */

.header{
display:grid;
font-family:'Jeju Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
padding:20px 0;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
}

.site_logo{
    display: inline-block;
    color:#fff;
    font-size: 32px;
    font-weight: 700;
}

.logo_f{color:var(--red);}
.logo_l{color:var(--yellow);
}

.header_tools{

    position:relative;

    display:flex;
    align-items:center;
    gap:.5rem;

}

.header_tools > a{

    display:flex;
    justify-content:center;
    align-items:center;

    width:40px;
    height:40px;

}

.header_tools img{

    width:32px;
    height:32px;

    display:block;

    transition:transform .2s ease;

}

.header_tools a:hover img{

    transform:scale(1.1);

}

#auth-menu{

    position:relative;

    display:flex;
    align-items:center;

}

#auth-menu > a{

    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

}

#auth-menu img{
    width:32px;
    height:32px;
    display:block;

    transition:transform .2s ease;
}

#auth-menu a:hover img{
    transform:scale(1.1);
}

/* dropdown menu */

.auth-dropdown{

    position:absolute;

    top:calc(100% + .5rem);
    right:-40px;

    width:240px;

    background:#fff;

    border:1px solid #d8d8d8;
    border-radius:12px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.18);

    overflow:hidden;

    z-index:1000;

}

.auth-profile{

    padding:1rem;
    border-bottom:1px solid #eee;
    cursor:default;

}

.auth-name{

    font-weight:700;

}

.auth-email{

    margin-top:.25rem;

    font-size:.85rem;

    color:#777;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

.auth-dropdown-item{

    display:block;
    padding:.8rem 1rem;
    text-decoration:none;
    color:#333;
    white-space:nowrap;

}

.auth-dropdown-item:hover{

    background:#f5f5f5;

}

/* subheader */

.subheader{
display:grid;
gap:var(--gap);
font-family:'Jeju Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
    grid-template-columns:
        2.2fr
        repeat(10, 1fr)
        2.2fr;
grid-template-rows:50px;
}

.subheader_item{
    display:block;
    padding:6px;
    font-size:1rem;
    line-height:1.2;
}


.subheader_main{
    grid-column:1 / span 6; grid-row:1 / span 1;
    background:var(--yellow);
    text-decoration:none;
}

.subheader_sub{
    grid-column:7 / span 3; grid-row:1 / span 1;
    background:#fff;
    text-decoration:none;
}

.subheader_void{
    grid-column:10 / span 3; grid-row:1 / span 1;
    background:var(--red);
}

.subheader_item:not([href]){
    cursor:default;
}


/* footer */

.footer{
color:white;
font-family:'Nanum Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
padding:12px 0;
text-align:center;
line-height:1.2;
font-size:0.8rem;
}

.footer p{
margin:0.4rem 0;
}

.footer a{
color:white;
text-decoration:none;
}

.footer a:hover{
text-decoration:underline;
}


/* social grid */

.social{
grid-area:social;
background:#fff;
color:#000;
display:grid;
grid-template-columns:repeat(4,1fr);
align-items:center;
justify-items:center;
padding-inline:10px;
}

.social img{
width:50px;
height:50px;
display:block;
}


/* Tablet view 지정 (768~1199 px) */

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

.social img{
width:32px;
height:32px;
display:block;
}

}


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

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

.social img{
width:32px;
height:32px;
display:block;
}

    .subheader {
        grid-template-columns: 2fr 1fr;
    }

    .subheader_main {
        grid-column: 1;
    }

    .subheader_sub {
        grid-column: 2;
        white-space: nowrap;
    }

    .subheader_void {
        display:none;
    }

}