@charset "utf-8"; 

/*####################
Layout Customization
######################*/
#container{flex-direction:column; padding:0; max-width:none;}
#container .section{align-items:center; gap:40px;}
#container .section-header,
#container .section-items{flex-direction:column; gap:8px; padding:0 32px !important; max-width:1280px; width:100%;}
.contents-page{margin:40px 0;}


/*####################
Story List
######################*/
.story-list{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 24px;}
.story-list-item{display:flex; flex-direction:column; gap:24px; position:relative; background-color:var(--lightgray-bg); border-radius:8px; overflow:hidden;}
.story-list-item:hover::after{content:''; position:absolute; inset:0; border-radius:8px; border:1px solid rgb(0 0 0 / 8%)}
.story-item-info{flex-grow:1; display:flex; flex-direction:column; gap:20px; padding:24px; box-sizing:border-box;}
.info-header{display:flex; justify-content:space-between; align-items:center; gap:8px;}
:is(.story-list, .story-view) .tags{display:flex; gap:8px;}
:is(.story-list, .story-view) .tags>span{padding:8px 10px; border-radius:4px; background-color:#fff; color:#555;}
.story-view .tags>span{background-color:var(--lightgray-bg);}
:is(.story-list, .story-view) .date{color:var(--gray-normal);}
.story-item-info h4{line-height:1.3; font-size:21px; font-family:var(--font-nanumsquareN);}
/* story view */
.story-view{align-self:center; display:flex; flex-direction:column; gap:40px; margin:40px 0; max-width:720px; width:100%;}
.story-view-header{display:flex; flex-direction:column; gap:16px;}
.story-view-contents{display:flex; border:0 !important;}


/*####################
Screen size
######################*/
@media (max-width: 960px) {
   #container .section-header,
   #container .section-items{padding:0 24px !important;}
   .story-list{grid-template-columns:repeat(2,1fr); gap:24px 16px;}
}

@media (max-width: 768px) {
   #container .section-header,
   #container .section-items{padding:0 16px !important;}
}

@media (max-width: 600px) {
}

@media (max-width: 480px) {
   .contents-page{margin:24px 0;}
   .section{gap:24px !important;}
   .section-header>em{font-size:14px;}
   .section-header>h4{font-size:20px;}
   /* .story-list{grid-template-columns:1fr; gap:16px 0;} */
   .story-list-item{gap:8px;}
   .story-item-info{padding:12px;}
   .info-header{flex-direction:column; align-items:flex-start;}
   .story-view{margin:24px 0;}
   .story-view-header h3{font-size:24px;}
   .story-item-info h4{font-size:15px;}
   :is(.story-list, .story-view) .tags>span{padding:6px 8px; font-size:11px;}
}