.home-wrap{max-width:1100px;margin:0 auto}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:6px 0 14px;
}
.section-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  font-size:16px;
}
.section-title::before{
  content:"";
  width:10px;height:10px;
  border-radius:3px;
  background:rgba(255,255,255,.26);
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.section-title span{
  position:relative;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  font-family:"EF WatermelonSalad",system-ui,-apple-system,"Noto Sans KR",sans-serif;
}
.section-head::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  opacity:.9;
}
@media(max-width:720px){
  .section-title{font-size:15px}
  .section-title span{padding:6px 11px}
}

 






 
@media (hover:hover) and (pointer:fine){
   
  .section-title span{ padding-top:7px; padding-bottom:5px; }
}
 

 
.hero{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:var(--pm-hero-mobile-bg, url("/assets/main-hero.jpg")) center/cover no-repeat;
  aspect-ratio:2160/1000;
  margin-bottom:24px;
}

 
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--pm-hero-mobile-layer, url("/assets/main-hero_10.png"));
  background-repeat:no-repeat;
  background-position:center 62%;
  background-size:min(78vw, 520px) auto;
  opacity:1;
  z-index:2;
  pointer-events:none;
}


 
.hero-track{display:none}
.hero-track-inner{display:flex;height:100%;width:100%;transform:translateX(0);will-change:transform}
.hero-slide{flex:0 0 100%;height:100%;background:center/cover no-repeat}
.hero-nav{display:none}


@media(min-width:721px){
  .hero{
    background-image:none;
  }
  .hero::before{display:none}

  .hero-track{
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
  }
  .hero-track-inner{
    transition:transform .38s ease;
  }

  .hero-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100px;
    height:100px;
    padding:0;
    border:none;
    background:transparent;
    color:#fff;
	    font-size:100px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:3;
	    opacity:.5;
    user-select:none;
    text-shadow:
      0 0 10px rgba(0,0,0,.95),
      0 0 22px rgba(0,0,0,.75);
  }
  .hero-nav:focus{outline:none}
  .hero-prev{left:14px}
  .hero-next{right:14px}
}

@media(min-width:721px) and (hover:hover) and (pointer:fine){
  .hero-nav:hover{opacity:1}
}

 
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}

 
.card{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,18,18,.9);
  overflow:hidden;
  transition:.15s;
}
@media (hover:hover) and (pointer:fine){
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26)}
}

 
.img-frame{
  margin:10px;
  padding:6px;
  border-radius:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0f0f0f;
  aspect-ratio:1/1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.thumb{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border:10px solid #e0e0e0;
  box-sizing:border-box;
  border-radius:0;
  background:transparent;
}

 
@media(max-width:720px){
  .thumb{border:0;}
}

.no-image{
  font-size:12px;
  letter-spacing:.5px;
  color:rgba(255,255,255,.35);
}

.meta{
  padding:2px 10px 12px;
  text-align:center;
}
.badge{
  font-size:10.5px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  display:inline-block;
  margin-bottom:6px;
}
.title{
  font-size:12.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.small{
  font-size:11px;
  opacity:.65;
  margin-top:4px;
}

.more-wrap{text-align:center;margin-top:18px}
.more-btn{
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
}
@media (hover:hover) and (pointer:fine){
  .more-btn:not(:disabled):hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.24);
  }
}
.is-hidden{display:none}