@charset "utf-8";
/* =========================================================
   DUAL WAFFLE 기획전 (PC / MO 반응형)
   - 클래스 prefix : dw-
   - 브레이크포인트 : 1024px 이하 태블릿 / 767px 이하 모바일
   ========================================================= */

.dw-wrap { width: 100%; overflow: hidden; background: #fff; color: #111; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; word-break: keep-all; }
.dw-wrap * { box-sizing: border-box; }
.dw-wrap img { display: block; max-width: none; border: 0; }

/* ---------- 1. 메인 히어로 (1920 x 760) ---------- */
.dw-hero { position: relative; width: 100%; max-width: 1920px; height: 760px; margin: 0 auto; overflow: hidden; }
.dw-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dw-hero .dw-mo { display: none; }

/* ---------- 2. 타이틀 / 본문 ---------- */
.dw-intro { padding: 70px 20px 90px; text-align: center; }
.dw-intro .dw-tit { margin: 0; font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #000; }
.dw-intro .dw-sub { margin: 10px 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: #000; }   /* 부제 : 본문과 구분되도록 굵게 */
.dw-intro .dw-desc { margin: 48px 0 0; font-size: 18px; font-weight: 400; line-height: 1.65; color: #333; }
.dw-intro .dw-desc p { margin: 0; }
.dw-intro .dw-desc p + p { margin-top: 26px; }
.dw-intro .dw-br-mo { display: none; }
.dw-intro .dw-sp-mo { display: none; }   /* 띄어쓰기 : CMS가 <br> 주변 공백을 지워도 유지되도록 &nbsp; 사용 */

/* ---------- 3. 오토 스와이프 ---------- */
.dw-flow { position: relative; width: 100%; margin-bottom: 120px; overflow: hidden; }
.dw-flow-track { display: flex; width: max-content; will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.dw-flow-track.is-drag { cursor: grabbing; }
.dw-flow-item { display: block; flex: 0 0 auto; width: auto; height: 660px; margin-right: 4px; overflow: hidden; line-height: 0; }
/* 모든 이미지 : 높이만 맞추고 너비는 원본 비율 그대로 (세로컷/가로컷 공통)
   - 너비는 JS가 원본 비율로 계산해서 px로 지정 (모바일 브라우저 찌그러짐 방지)
   - 사이트 공통 img 스타일(max-width:100% 등)에 영향받지 않도록 !important */
.dw-wrap .dw-flow-item img { display: block; width: auto; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; object-fit: fill; pointer-events: none; -webkit-user-drag: none; }

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
  .dw-hero { height: auto; aspect-ratio: 1920 / 760; }
  .dw-intro .dw-tit { font-size: 52px; }
  .dw-intro { padding-left: 12px; padding-right: 12px; }
  .dw-intro .dw-desc { font-size: 14px; letter-spacing: -0.03em; }
  .dw-flow-item { height: 510px; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  .dw-hero { aspect-ratio: auto; height: auto; }
  .dw-hero .dw-pc { display: none; }
  .dw-hero .dw-mo { display: block; width: 100%; height: auto; }

  .dw-intro { padding: 40px 16px 50px; }
  .dw-intro .dw-tit { font-size: 34px; }
  .dw-intro .dw-sub { margin-top: 6px; font-size: 15px; }
  .dw-intro .dw-desc { margin-top: 28px; font-size: 13px; line-height: 1.7; letter-spacing: -0.03em; }
  .dw-intro .dw-desc p + p { margin-top: 18px; }
  .dw-intro .dw-br-pc { display: none; }
  .dw-intro .dw-br-mo { display: inline; }
  .dw-intro .dw-sp-pc { display: none; }
  .dw-intro .dw-sp-mo { display: inline; }

  .dw-flow { margin-bottom: 60px; }
  .dw-flow-item { height: 93vw; margin-right: 4px; }
}