/* 특가이벤트 페이지 (피그마 sub_특가이벤트_1920, 4054:6661 / mobile_360, 4054:7439)
   데스크톱 1920 (히어로 1208 + 인트로 밴드 442) / 모바일 360 (1175)
   컬러: 메인 #6d1316 / 밴드 #612b27 */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: #111; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
   /* overflow-x clip — hidden은 콘텐츠 순간 넘침 시 body를 세로 스크롤 컨테이너로 만들어
      이중 스크롤바가 생긴다. clip은 스크롤 컨테이너를 만들지 않아 원천 차단(미지원 브라우저는 hidden 유지) */
#page { position: relative; width: 1920px; transform-origin: 0 0; background: #fff; }
html.is-m #page { width: 360px; }

@font-face {
  font-family: 'JalnanGothic';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/JalnanGothic/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* ===== 히어로 (0~1208) ===== */
.ev-hero { position: absolute; top: 0; left: 0; width: 1920px; height: 1208px; overflow: hidden; }
.ev-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-hero__chuseok { position: absolute; left: 772px; top: 170px; width: 300px; height: 131px; object-fit: cover; }
.ev-hero__famtit { position: absolute; left: 0; top: 317px; width: 100%; text-align: center; font-family: 'JalnanGothic', sans-serif; font-size: 72px; letter-spacing: -0.72px; color: #5e5454; }
.ev-hero__banner { position: absolute; left: 50%; transform: translateX(-50%); top: 421px; width: 440px; height: 49px; }
.ev-hero__banner img { display: block; width: 100%; height: 100%; }
.ev-hero__banner span { position: absolute; left: 0; top: 0; width: 100%; text-align: center; line-height: 49px; font-family: 'Paperlogy', sans-serif; font-weight: 500; font-size: 26px; letter-spacing: -0.26px; color: #fff; white-space: nowrap; }
.ev-hero__desc { position: absolute; left: 0; top: 502px; width: 100%; text-align: center; font-family: 'Paperlogy', sans-serif; font-weight: 400; font-size: 22px; line-height: 34px; letter-spacing: -0.22px; color: #111; white-space: nowrap; }
.ev-hero__family { position: absolute; left: 654px; top: 588px; width: 612px; height: 620px; object-fit: cover; }

/* ===== 인트로 밴드 (1208~1650) ===== */
.ev-band { position: absolute; left: 0; width: 1920px; height: var(--dh, 442px); top: var(--d, 1208px); background: #612b27; }
.ev-band__corner { position: absolute; width: 48px; height: 48px; opacity: 0.6; }
.ev-band__corner.c-tl { left: 30px; top: 30px; }
.ev-band__corner.c-bl { left: 30px; bottom: 30px; transform: scaleY(-1); }
.ev-band__corner.c-tr { right: 30px; top: 30px; transform: rotate(180deg) scaleY(-1); }
.ev-band__corner.c-br { right: 30px; bottom: 30px; transform: rotate(180deg); }
.ev-band__line { position: absolute; left: 50%; transform: translateX(-50%); top: 80px; width: 172px; height: 10px; opacity: 0.8; }
.ev-band__text { position: absolute; left: 50%; transform: translateX(-50%); top: 140px; width: 816px; font-size: 22px; line-height: 40px; letter-spacing: -0.22px; color: #fff; opacity: 0.9; text-align: center; white-space: nowrap; }
.ev-band__logo { position: absolute; left: 50%; transform: translateX(-50%); top: 310px; width: 176px; height: 32px; }
.ev-band__logo img { position: absolute; }
.ev-band__logo .mark { left: 42.6px; top: 5.8px; width: 133.4px; height: 24.8px; }
.ev-band__logo .text { left: 0; top: 4.9px; width: 36.2px; height: 26.6px; }

/* 인트로 밴드 2 (19608~20010) — 줄바꿈은 <br> 고정, 자동 줄바꿈 방지 */
.ev-band__text--narrow { width: auto; }

/* ===== EVENT 섹션 (1652~8130) — 시안 통째 export 이미지 ===== */
/* ===== 랜딩 본문 (1650~30318) — 피그마 4276:5393 통째 export (860×28668, 4096px 7분할) ===== */
.ev-land-img { position: absolute; left: 530px; width: 860px; }
html.is-m .ev-land-img { display: none; }
/* ===== 모바일 랜딩 (1175~20902) — 피그마 4276:6918 통째 export (360×19727, 4096px 5분할) ===== */
.ev-m-land-img { position: absolute; left: 0; width: 360px; }
html:not(.is-m) .ev-m-land-img { display: none; }

html.is-m .ev-hero  { top: 60px; left: 0; width: 360px; height: 620px; }
html.is-m .ev-hero__chuseok  { left: 94px; top: 40px; width: 140px; height: 61px; }
html.is-m .ev-hero__famtit  { top: 109px; font-size: 46px; letter-spacing: -0.46px; }
html.is-m .ev-hero__banner  { top: 171px; width: 280px; height: 38px; }
html.is-m .ev-hero__banner span  { line-height: 38px; font-size: 18px; letter-spacing: -0.18px; }
html.is-m .ev-hero__desc  { left: 20px; top: 224px; width: 320px; font-size: 16px; line-height: 25px; letter-spacing: -0.16px; white-space: normal; word-break: keep-all; }
/* 텍스트 줄바꿈은 브라우저/피그마 렌더 폭 차이와 무관하게 고정 — d/m 변형 스왑 */
.ev-desc-m, .ev-band-m { display: none; }
html.is-m .ev-desc-d, html.is-m .ev-band-d { display: none; }
html.is-m .ev-desc-m, html.is-m .ev-band-m { display: inline; }
html.is-m .ev-hero__family  { left: 23px; top: 296px; width: 320px; height: 324px; }

/* 인트로 밴드 — 폭 360 재지정 필수: 데스크톱 1920폭이 그대로 남으면
   캔버스 밖으로 흘러 문서 폭이 늘고(iOS는 body{overflow-x:hidden}이
   뷰포트로 전파되지 않음) 실기기에서 좌우로 밀림 */
html.is-m .ev-band  { top: var(--m); height: var(--mh); width: 360px; }
html.is-m .ev-band__corner  { width: 36px; height: 36px; }
html.is-m .ev-band__corner.c-tl  { left: 20px; top: 20px; }
html.is-m .ev-band__corner.c-bl  { left: 20px; bottom: 20px; }
html.is-m .ev-band__corner.c-tr  { right: 20px; top: 20px; }
html.is-m .ev-band__corner.c-br  { right: 20px; bottom: 20px; }
html.is-m .ev-band__line  { left: 94px; transform: none; top: 70px; }
html.is-m .ev-band__text  { left: 40px; transform: none; top: 112px; width: 280px; font-size: 18px; line-height: 34px; letter-spacing: -0.18px; white-space: normal; word-break: keep-all; }
html.is-m .ev-band__logo  { left: 111px; transform: none; top: 390px; width: 138px; height: 25px; }
html.is-m .ev-band__logo .mark  { left: 33.4px; top: 4.6px; width: 104.6px; height: 19.4px; }
html.is-m .ev-band__logo .text  { left: 0; top: 3.9px; width: 28.4px; height: 20.8px; }