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

/* import */

@import url("fonts.css");

/* 전체 요소 */

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

body{
background:#000;
}


/* content */

main{
    width:min(1440px,95vw);
    margin: 4px auto;
}

main.document{
    background:#fff;
    padding-block:100px;
}

main.subportal{

}

.content{
    max-width:1000px;
    margin:0 auto;
}

article.content{
    font-family: 'Nanum Gothic', san-serif;
    font-size:1rem;
    letter-spacing:-0.01em;
    line-height:1.8;
    color:#000;
}

article.content section{
	margin-bottom:3em;
}

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

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

article.content section p{
    margin-bottom:1.3em;
    text-align: justify;
    letter-spacing:-0.01em;
    text-wrap: pretty;
}



/* 최종 수정일 */

.page_info p{
    margin-top:3rem;
    padding-top:1rem;
    border-top:1px solid #ddd;
    font-family:'Nanum Gothic',sans-serif;
    font-size:0.85rem;
    font-style:italic;
    color:#666;
    text-align:right;
}

.page_info p{
    margin:0.2em 0;
}

.page_info time{
    color:#444;
}


/* main 아래 mini grid */


.mini_grid{
display:grid;
gap:var(--gap);
font-family:'Jeju Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
grid-template-columns:repeat(4,1fr);
grid-template-rows:50px 50px 100px;
grid-template-areas:
"web me void1 news"
"essay essay article article"
"album album guest social";
}

.card{
display:flex;
align-items:flex-start;
justify-content:flex-start;
padding:6px;
text-decoration:none;
font-size:1rem;
line-height:1.2;
transition:background .2s ease;
}

/* 개별 grid */

.whitelink{color:#fff;}
.blacklink{color:#000;}
.intro_website{grid-area:web;background:var(--blue);}
.intro_fluorf{grid-area:me;background:var(--red);}
.news{grid-area:news;background:var(--yellow);}
.daily_essay{grid-area:essay;background:var(--blue);}
.article{grid-area:article;background:var(--yellow);}

.album{
grid-area:album;
background-image: url("../../album/album.jpg");
background-size: cover;
opacity:0.6;
color:#000;
}

.guestbook{grid-area:guest;background:var(--red);}

.void_01{
grid-area:void1;
background:white;
}

/* hover 효과 */

.intro_website:hover,.daily_essay:hover{
background:#000;
}
.intro_fluorf:hover,.guestbook:hover{
background:var(--yellow);
}
.news:hover,.article:hover{
background:var(--red);
}
.album:hover{
opacity:1;
}




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

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

main.document{
    padding-block:50px;
}

.content{
        padding-inline:50px;
}

.mini_grid{
grid-template-columns:repeat(5,1fr);
grid-template-rows:50px 100px 50px;
grid-template-areas:
"web web me me news"
"essay void1 article album album"
"guest guest guest social social";
}

}


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

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

main.document{
    padding-block:25px;
}

.content{
        padding-inline:25px;
}


.mini_grid{
grid-template-columns:repeat(4,1fr);
grid-template-rows:50px 50px 100px 50px;
grid-template-areas:
"web web me me"
"void1 news essay essay"
"article album album guest"
"article social social social";
}

}