.blog-archive section .container{
   padding-top: 40px;
}
section.page-title {
   padding: 140px 100px 0 100px;   
}
section.page-title h1 {   
   font-size: 48px;
   font-weight: 800;
   /* margin: 0 auto 8px; */
}
section.page-title h2 {
   font-size: 16px;
   color: var(--dark-gray02);    
   font-weight: 600;
   line-height: 140%;
}
.list{   
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   justify-content: space-between;
   margin-inline: auto;
   /* padding-bottom: 80px;     */
   width: 100%;
   gap: 100px 3vw;
}
.list .item a{
   display: flex;
   flex-direction: column;
   gap: 24px;
}
.list .item .img-box{
   display: flex;
   overflow: hidden;
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.05);
}
.list .item .img-box img{
   width: 100%;
   height: 100%;
   aspect-ratio: 1.6;
   object-fit: cover;
}
.list .item .txt-box .blog-category{
   font-size: 14px;
   color:var(--green);
   margin-bottom: 8px;
   font-weight: 700;
}
.list .item .txt-box h2{
   font-size: 24px;
   font-weight: 800;
   margin-bottom: 16px;
}
.list .item .txt-box .excerpt{
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   /* line-height: 1.8rem; */
   max-height: 2.4rem;
   font-size: 16px;
   color:var(--dark-gray02);
   margin-bottom: 8px;
}
.list .item .txt-box time{
   font-size: 14px;
   color:var(--dark-gray01);
}
nav.filter{
   display: flex;
   align-items: center;
   margin-bottom: 32px;
}
nav.filter ul {
   display: flex;
   gap: 16px;    
 }
nav.filter a {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 40px;
   padding: 10px 24px;    
   border-radius: 32px;
   text-decoration: none;
   color: var(--black);
   font-weight: 600;
   font-size: 16px;
   background-color: #f7f7fa;
}
nav.filter a.active,
nav.filter a:hover {
   background-color: var(--green);
   color: #fff;    
}
.blog-single article.blog{
   width: 100%;
   /* max-width: 80ch;    */
   margin-inline: auto;   
   /* padding-inline: 32px; */
   letter-spacing: -0.25px;
}
.blog-single .hero{
   display: flex;
   justify-content: center;
   margin-block: 40px;
   /* margin-bottom: 60px; */   
   /* margin-inline: auto;    */
}
.blog-single .toc-box{
   width: 232px;
}
.blog-single .hero .txt-box{
   max-width: 720px;
   width: 100%;
}
.blog-single .hero h1{
   font-size: 34px;
   margin-bottom: 20px;
}
.blog-single .hero .meta{
   display: flex;
   gap: 16px;
   font-size: 14px;
   font-weight: 400;
   align-items: center;
}
.blog-single .entry-content{
   font-size: 18px;
   line-height: 1.8;
   text-align: justify;
   word-break: break-word;
   width: 100%;
   max-width: 720px;
} 
.blog-single .entry-content > *{
   margin-block: 28px;
}
.blog-single .entry-content > h2{
   font-size: 24px;
   font-weight: 800;
   padding-top: 28px;
   margin-block: 0 28px;
   text-align: left;
}

.blog-single .wp-block-list{
   list-style: revert;
   padding:revert;   
}
.blog-single .blog-category{
   display: flex;
   width: fit-content;
   font-size: 12px;
   color: var(--green);
   font-weight: 700;
   border: 1px solid var(--green);
   border-radius: 32px;
   padding: 4px 7px;   
}
.blog-single section.cont{
   display: flex;
   justify-content: space-between;
   /* margin-right: 32px; */
   /* margin-right: 200px; */
}
.blog-single nav.toc{
   position: sticky;
   top: 200px;      
   margin-right: 32px;
}
.blog-single nav.toc > strong{
   font-size: 12px;
   color: var(--dark-gray02);
}
.blog-single nav.toc ol{
   display: flex;
   flex-direction: column;
   gap: 12px;
   border-left: 1px solid #dddddd;
   width: fit-content;
   width: 200px;
   margin-block: 16px;
   font-size: 13px;
}
.toc .depth-3 { opacity: .9; }
.toc .depth-4 { opacity: .8; }
.toc a {
  display: block;
  text-decoration: none;  
  transition: .15s ease;
  padding-left: 12px;  
  border-left: 2px solid transparent;  
  margin-left: -1px;
}
.toc a:hover {
  color: var(--green);    
}
.toc a.active {
  color: var(--green);  
  border-left-color:var(--green);    
}
.toc .depth-3 a{
   padding-left: 28px;
}
.toc .depth-4 a{
   padding-left: 44px;
}
section.related{
   background-color: var(--black);
   color:#ffffff;   
}
section.related .container{
   width: 100%;
   max-width: 80ch;
   padding:100px 32px;
   margin-inline: auto;
}
section.related .container > h3{
   font-size: 32px;
   margin-bottom: 40px;
}
section.related .list{
   grid-template-columns: repeat(2, 1fr);
   padding-bottom: 0;
   gap: 60px 3vw;
}
section.related .item a{
   display: flex;
   gap: 16px;
}
section.related .item .img-box{
   width: 100%;
   aspect-ratio: 1.6;
   overflow: hidden;
   border-radius: 16px;
}
section.related .item .txt-box h1{
   font-size: 18px;
   font-weight: 800;
}

/* 고정 헤더 대비 앵커 보정 */
.blog-single .entry-content h2[id],
.blog-single .entry-content h3[id],
.blog-single .entry-content h4[id] { scroll-margin-top: calc(var(--header-height) + 64px); }

.header-btn-box a{
   display: flex;
   align-items: center;
   width: fit-content;
   opacity: 0.8;
}
.blog-single iframe{
   width: 100%;
   aspect-ratio: 16 / 9;
   height: auto;   
   border-radius: 16px;
}

@media (max-width: 767px){
   section .container{
       padding:24px 24px 40px;
   }
   section.page-title{
       padding-top: 64px;
       padding-inline: 24px;
   }
   section.page-title h1{
       font-size: 32px;
       margin: 40px auto 0;        
   }
   section.page-title h2{
       font-size: 14px;
   }
   nav.filter{
      margin-bottom: 20px;
   }
   nav.filter ul{
         gap: 8px;
         overflow: auto;
   }
   nav.filter a{
         height: 40px;
         font-size: 16px;
         padding-inline: 16px;
         white-space: nowrap;
   }
   .list{
      grid-template-columns: 1fr;
      gap: 60px;
      padding-bottom: 0;
   }
   .list .item a{
      gap: 16px;
   }
   .list .item .txt-box h2{
      font-size: 20px;
      margin-bottom: 8px;
   }
   .blog-single nav.toc,
   .blog-single .toc-box{
      display: none;
   }
   .blog-single article.blog{
      padding-inline: 0;
   }
   .blog-single .entry-content{
      font-size: 16px;
      line-height: 1.4;
   }
   .blog-single .hero{
      margin-top: 80px;
   }
   .blog-single .hero h1{
      font-size: 24px;
   }
   section.related .container{
      padding:48px 24px;
   }  
   section.related .list{
      gap: 32px 4vw;
   } 
   section.related .container > h3{
      font-size: 24px;
      margin-bottom: 16px;
   }
   .blog-single iframe{
       border-radius: 8px;
   }
 }

 @media screen and (min-width: 768px) and (max-width: 1024px){
   section .container{
       padding: 80px 24px 0;
   }
   section.page-title {
       padding-top: 80px;
       padding-inline: 24px;
   }
   section.page-title h1 {
       font-size: 40px;
       margin: 60px auto 8px;
   }
   section.page-title h2 {
       font-size: 16px;
   }
   nav.filter{
      margin-bottom: 24px;
   }
   .blog-single nav.toc,
   .blog-single .toc-box{
      display: none;
   }
 }