:root{
  --stage-bg: #F1F2F7;
  --panel-bg: #ffffff;
  --ink: #111;
  --accent: #5b49e9;
  /* 배너 기본 토큰 */
  --w: 686px; --h: 328px;
  --x: 44px; --y: 65px; --right: 44px; --bottom: 19px;
  --title-fs: 40px; --title-lh: 52px;
  --sub-fs: 28px; --sub-lh: 37px;
  --date-top: 31px; --date-fs: 26px;
  --logo-top: 27px; --logo-h: 37px; --logo-gap: 10px;
  --ad-left: 22px; --ad-top: 28px;
  --label-top: 20px; --label-right: 20px; --label-size: 90px; --label-radius: 50%;
}

/* 배너(자유) */
.banner{
  width:var(--w); height:var(--h);
  position:relative; overflow:hidden; background:#dde2ff;
}

/* 배경 이미지 레이어 */
.banner > *{ position: relative; z-index: 1; }

.banner .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:0;
}

/* 배너 내부 폰트 스택 */
.banner, .banner *{
  font-family:'Apple SD Gothic Neo', 'Roboto' 
}

/* ===== Free Banner: layout & meta elements ===== */

/* 본문 박스 (제목/서브) */
.banner .content{
  position: relative;
  /* 좌/우 안전 여백을 '마진'으로 확보하고, 박스 자체는 가용폭을 꽉 채움 */
  margin-left: var(--x);
  margin-right: var(--right);
  margin-top: var(--y);
  width: calc(var(--w) - (var(--x) + var(--right)));
  max-width: calc(var(--w) - (var(--x) + var(--right)));
}
.banner .title{
  font-size:var(--title-fs); line-height:var(--title-lh); font-weight:700; color:#000;
}
.banner .subtitle{
  font-size:var(--sub-fs); line-height:var(--sub-lh);
  font-weight:400;
  color:rgba(0,0,0,.8);
  position: absolute;
  top:119px;
}

/* 날짜 (기본: 우상단 텍스트) */
.banner .date{
  position:absolute; right:var(--right); top:var(--date-top);
  font-size:var(--date-fs); font-weight:500; color:rgba(0,0,0,.8);
}

/* 로고 리스트 */
.banner .logo{
  position:absolute; right:var(--right); top:var(--logo-top); height:var(--logo-h);
  display:flex; align-items:center; gap:var(--logo-gap);
}
.banner .logo img{ max-height:100%; width:auto; }

/* AD 마크 */
.banner .ad-mark{ position:absolute; left:var(--ad-left); top:var(--ad-top); }

/* 참고문구 */
.banner .warning{
  position:absolute; left:var(--x); bottom:var(--bottom);
  font-size:16px; color:rgba(0,0,0,.8);
}

/* 우상단 라벨 */
.banner .label{
  position:absolute; right:var(--label-right); top:var(--label-top);
  width:var(--label-size); height:var(--label-size);
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#111; color:#fff; line-height:1.35; border-radius:var(--label-radius);
  padding:8px; font-size:14px;
}

/* 다크 모드 색상 */
.banner.is-dark .title{ color:#fff; }
.banner.is-dark .subtitle{ color:rgba(255,255,255,.8); }
.banner.is-dark .date{ color:rgba(255,255,255,.8); }
.banner.is-dark .warning{ color:rgba(255,255,255,.8); }



/* ===== 규격별 확장 ===== */

/* Big Tile (686x686) */
.banner.big{
  --w: 686px; --h: 686px;
  --x: 48px; --y: 68px; --right: 48px; --bottom: 14px;

  /* 타이포 (피그마) */
  --title-fs: 40px; --title-lh: 1.37;
  --sub-fs: 28px; --sub-lh: 1.45;

  /* 날짜 배지 토큰 */
  --date-fs: 26px;
  --date-bg: rgba(17,17,17,.9);
  --date-color: #fff;
  --date-pill-h: 36px;
  --date-pill-r: 18px;
  --date-pad-x: 24px;

  --logo-h: 44px;
}
/* 중앙 정렬 */
.banner.big .content{
  /* 중앙 정렬: 좌/우 자동 마진으로 가운데에 배치 */
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--y);
  width: calc(var(--w) - (var(--x) * 2));
  max-width: calc(var(--w) - (var(--x) * 2));
  text-align: center;
}
/* 자간 */
.banner.big .title{ letter-spacing:-0.02em; }
.banner.big .subtitle{
  letter-spacing:-0.01em;
  position: absolute;
  top: 123px;
}
/* 날짜: 서브텍스트 아래 중앙 배지 */
/* 참고문구 좌하단 */
.banner.big .warning{ left: var(--x); bottom: var(--bottom); }
/* 다크 모드에서 날짜 배경 커스터마이즈 가능 */
.banner.is-dark.big .date{
  background: var(--date-bg, rgba(255,255,255,.9));
  color: var(--date-color, #111);
}

/* === Consolidated: Home (750x464) 가이드 반영 === */
.banner.home{
  --w: 750px; --h: 464px;
  --x: 54px;               /* 좌 여백 */
  --y: 71px;               /* 위 여백 */
  --right: 44px; --bottom: 20px;
  --title-fs: 36px;        /* 메인 텍스트 사이즈 */
  --title-lh: 45px;        /* 피그마 기준 폰트 높이값 */
  --sub-fs: 28px;          /* 서브 텍스트 사이즈 */
  --sub-lh: 38px;          /* 피그마 기준 폰트 높이값 */
  --date-top: 36px; --date-fs: 26px;
  --logo-top: 57px; --logo-h: 27px; --logo-gap: 10px;
  --label-top: 24px; --label-right: 24px; --label-size: 90px;
}
.banner.home .content{ text-align: left; }
.banner.home .title{ letter-spacing: -0.02em; }
.banner.home .subtitle{
  letter-spacing: -0.01em;
  top:109px;
}
.banner.home .logo{ left:var(--x); right:auto; top:var(--logo-top); height:var(--logo-h); display:flex; align-items:center; gap:var(--logo-gap); }
.banner.home.has-logo .content{ margin-top:117px; }

/* === Consolidated: Popup (750x387) 가이드 반영 === */
.banner.popup{
  --w: 750px; --h: 387px;
  --x: 55px;          /* 좌여백 */
  --y: 71px;          /* 위여백 */
  --right: 36px; --bottom: 20px;
  --title-fs: 48px;   /* 메인 텍스트 */
  --title-lh: 61px;
  --sub-fs: 30px;     /* 서브 텍스트 */
  --sub-lh: 42px;
  --date-top: 32px; --date-fs: 26px;
  --logo-top: 33px; --logo-h: 27px; --logo-gap: 10px;
  --label-top: 20px; --label-right: 20px; --label-size: 80px;
}
.banner.popup .content{ text-align: left; }
.banner.popup .subtitle{ top:146px; }
}
/* 날짜 위치 (좌하단, 하단에서 34px) */
.banner.popup .date{
  left: var(--x);
  right: auto;
  bottom: 34px;
  top: auto;
  font-size:var(--date-fs);
  font-weight:500;
  color:rgba(0,0,0,.8);
}
/* 참고문구 10px 더 아래 */
.banner.popup .warning{ bottom: calc(var(--bottom) - 10px); }


/* Title/Subtitle normalize */
.banner .title,
.banner .subtitle{
  display:block;
  white-space:normal;
  height:auto;
  width:100%;
}

/* === Big Tile: center logo + push content when logo exists === */
.banner.big .logo{
  position:absolute;
  top:38px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  height:var(--logo-h);
  display:flex; align-items:center; justify-content:center; gap:var(--logo-gap);
}
.banner.big.has-logo .content{ margin-top:97px; }

/* Canonical Big Tile date (centered pill under subtitle) */
.banner.big .date{
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--date-pill-h);
  padding: 0 24px;
  margin: 0;
  background: var(--date-bg);
  color: var(--date-color);
  border-radius: var(--date-pill-r);
  font-size: var(--date-fs);
  font-weight: 500;
  line-height: 1;
  top: 228px;
}

/* Big title line spans */
.banner.big .title > span{ display:block; }

/* Big Tile: bottom-left image tag */
.banner.big .big-tag{
  position:absolute;
  left:32px;
  bottom:32px;
  width:auto;
  height:46px;
  object-fit:contain;
  z-index: 2;
}


/* 폰트 수직 정렬 보정 */
.banner .title span,
.banner .subtitle span,
.banner .date span {
  position: relative;
  top: 0px;
}