@charset "utf-8";

/* =========================================================
   promotion.css  —  기획전 공통 스타일
   ========================================================= */
:root{
  --promo-max:1040px;               /* 콘텐츠 1024 */
  --promo-gap:20px;                    /* 배너 간 간격 */
  --promo-thumb-bg:#f3f3f3;      /* 이미지 로딩 전 placeholder 배경 */
}

/* ---- 레이아웃 / 타이틀 ---- */
.promo-page{max-width:var(--promo-max);margin:0 auto;padding:44px 20px 80px;color:var(--color-text-default);}
.promo-page__title{text-align:center;font-size:1.9rem;font-weight:500;letter-spacing:-0.03em;color:var(--color-text-default);font-family:'NoonnuBasicGothic', sans-serif;margin-bottom:40px;}

/* =========================================================
   기획전 배너 리스트 
   ========================================================= */
.promo-list{display:flex;flex-direction:column;gap:var(--promo-gap);}
.promo-item{margin:0;}
.promo-item__link{display:block;position:relative;aspect-ratio:1000 / 256;overflow:hidden;background:var(--promo-thumb-bg);transition:transform .2s ease, box-shadow .2s ease;}
.promo-item__img{width:100%;height:100%;object-fit:cover;display:block;}

/* =========================================================
   반응형
   ========================================================= */
/* 태블릿 */
@media (max-width:1024px){
  .promo-page{padding:36px 20px 64px;}
  .promo-list{gap:16px;}
}
/* 모바일 */
@media (max-width:560px){
  .promo-page{padding:20px 16px 35px;}
  .promo-page__title{font-size:1.5rem;margin-bottom:28px;}
  .promo-list{gap:14px;}

  /* [옵션] 모바일 전용 배너(<picture>)를 쓸 때만 아래 주석 해제
     → 세로가 넉넉한 비율로 교체해 가독성 확보 (예: 540×240 원본)
  .promo-item__link{aspect-ratio:540 / 240;}
  */
}