/* 베러블 × 대전 빵빵런 구매 추첨 팝업
   모든 클래스는 vbl- 접두어로 묶어 사이트 기존 스타일과 충돌하지 않게 했습니다.
   폰트 경로(assets/fonts/)는 실제 업로드 위치에 맞게 바꿔주세요. */

@font-face{font-family:"VBL SUIT";src:url(assets/fonts/SUIT-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VBL SUIT";src:url(assets/fonts/SUIT-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"VBL SUIT";src:url(assets/fonts/SUIT-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"VBL SUIT";src:url(assets/fonts/SUIT-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"VBL SUIT";src:url(assets/fonts/SUIT-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"VBL Poppins";src:url(assets/fonts/Poppins-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

.vbl-overlay{
  --vbl-blue:#79c2f9; --vbl-blue-soft:#eaf5fe; --vbl-blue-mid:#cfe8fc;
  --vbl-navy:#0d2b45; --vbl-ink:#1c2733; --vbl-sub:#5b6875; --vbl-line:#e3e9ef; --vbl-gray:#f6f8fa;
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(13,27,40,.55);
}
.vbl-overlay.vbl-open{display:flex}
.vbl-overlay *{box-sizing:border-box;margin:0;padding:0}

.vbl-pop{
  width:100%; max-width:380px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column;
  background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  font-family:"VBL SUIT","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--vbl-ink); -webkit-font-smoothing:antialiased;
}
.vbl-body{overflow-y:auto; -webkit-overflow-scrolling:touch}

/* 상단 */
.vbl-top{padding:20px 20px 12px;text-align:center;background:linear-gradient(180deg,var(--vbl-blue-soft),#fff)}
.vbl-label{display:inline-block;font-size:12px;font-weight:700;color:var(--vbl-navy);background:#fff;border:1px solid var(--vbl-blue-mid);border-radius:999px;padding:5px 12px;letter-spacing:-.2px}
.vbl-title{margin-top:10px;font-size:29px;font-weight:800;color:var(--vbl-navy);letter-spacing:-1px;line-height:1.2}
.vbl-eq{color:var(--vbl-blue);font-family:"VBL Poppins",sans-serif;font-weight:700;margin:0 4px}
.vbl-sub{margin-top:4px;font-size:13px;font-weight:500;color:var(--vbl-sub);letter-spacing:-.3px}

/* 경품 */
.vbl-prizes{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;margin:4px 16px 0;height:236px}
.vbl-prize{position:relative}
.vbl-prize--main{grid-row:1 / span 2}
.vbl-prize img{position:absolute;left:50%;transform:translateX(-50%);display:block;max-width:none}
.vbl-prize--main img{top:6px;height:76%;filter:drop-shadow(0 8px 14px rgba(13,43,69,.18))}
.vbl-prize--airpods img{top:8px;left:42%;height:66%;filter:drop-shadow(0 6px 10px rgba(13,43,69,.15))}
.vbl-card{position:absolute;top:12px;left:50%;width:56%;aspect-ratio:1.586;transform:translateX(-50%) rotate(-6deg);
  background:#fff;border:1px solid var(--vbl-line);border-radius:7px;box-shadow:0 6px 14px rgba(13,43,69,.16);
  display:flex;flex-direction:column;justify-content:space-between;padding:9px 10px}
.vbl-card-name{font-size:11px;font-weight:700;color:#111;letter-spacing:-.3px}
.vbl-card-amount{align-self:flex-end;font-family:"VBL Poppins","VBL SUIT",sans-serif;font-weight:700;font-size:15px;color:#111;letter-spacing:-.3px}
.vbl-card-amount small{font-family:"VBL SUIT",sans-serif;font-size:11px;font-weight:700;margin-left:1px}
.vbl-tag{position:absolute;left:10px;right:10px;bottom:9px;display:flex;align-items:center;gap:6px}
.vbl-tag b{font-size:13px;font-weight:800;color:var(--vbl-navy);letter-spacing:-.4px;line-height:1.2}
.vbl-prize--main .vbl-tag b{font-size:15px}
.vbl-tag em{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--vbl-navy);border-radius:999px;padding:2px 8px;flex:0 0 auto}

/* 일정·쿠폰·버튼 */
.vbl-when{margin:12px 16px 0;text-align:center;font-size:13px;letter-spacing:-.3px;background:var(--vbl-gray);border-radius:12px;padding:10px 0}
.vbl-when strong{font-weight:800;color:var(--vbl-navy)}
.vbl-dot{color:#b4bec8;margin:0 6px}
.vbl-coupon{text-align:center;margin:10px 16px 0;font-size:12.5px;font-weight:600;color:var(--vbl-navy);letter-spacing:-.3px}
.vbl-coupon i{font-style:normal;background:linear-gradient(transparent 60%,var(--vbl-blue-mid) 60%)}
.vbl-cta{display:block;margin:8px 16px 0;background:var(--vbl-blue);color:var(--vbl-navy)!important;text-align:center;font-weight:800;font-size:16px;padding:14px 0;border-radius:14px;letter-spacing:-.4px;text-decoration:none!important}
.vbl-cta:active{filter:brightness(.95)}

/* 유의사항 */
.vbl-notice-toggle{display:block;margin:8px auto 0;background:none;border:0;font:inherit;font-size:11.5px;font-weight:500;color:var(--vbl-sub);cursor:pointer;padding:4px 8px}
.vbl-notice-toggle span{display:inline-block;transition:transform .2s}
.vbl-notice-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.vbl-notice{display:none;margin:6px 16px 4px;padding:12px 14px;background:var(--vbl-gray);border-radius:12px}
.vbl-notice.vbl-show{display:block}
.vbl-notice li{list-style:none;position:relative;padding-left:10px;font-size:11.5px;line-height:1.55;color:var(--vbl-sub);letter-spacing:-.2px}
.vbl-notice li+li{margin-top:4px}
.vbl-notice li::before{content:"·";position:absolute;left:0}

/* 하단 */
.vbl-bottom{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;border-top:1px solid var(--vbl-line);flex:0 0 auto}
.vbl-bottom button{background:#fff;border:0;font:inherit;padding:12px 0;font-size:13px;color:var(--vbl-sub);font-weight:500;cursor:pointer}
.vbl-bottom button+button{border-left:1px solid var(--vbl-line);color:var(--vbl-ink);font-weight:700}
.vbl-pop:focus{outline:none}
.vbl-cta:focus-visible,.vbl-bottom button:focus-visible,.vbl-notice-toggle:focus-visible{outline:2px solid var(--vbl-navy);outline-offset:2px}