/* Figma Frame 1: 375×5326, fill #fff, stroke 0.1 black, radius 2 */
/*
  [배경 이미지 적용 방법]
  - 전체가 이어져 보이게: 디자인에서 세로로 긴 이미지를 섹션 높이대로 잘라
    assets/bg/ 아래 section-이름.jpg 로 저장 후 아래 변수 사용.
  - 각 섹션은 구분: 같은 이미지를 섹션별로 잘라 넣으면 경계만 자연스럽게 이어짐.
  - 이미지 없을 때: background-color 로 폴백됨.

  아래 주석 해제 후 경로만 수정하면 섹션별 배경 이미지 적용됨.
*/
/*
:root {
  --section-kv-bg:          url("assets/bg/section-kv.jpg");
  --section-product-bg:     url("assets/bg/section-product.jpg");
  --section-milkbar-bg:     url("assets/bg/section-milkbar.jpg");
  --section-prizes-bg:      url("assets/bg/section-prizes.jpg");
  --section-participate-bg: url("assets/bg/section-participate.jpg");
  --section-target-bg:     url("assets/bg/section-target.jpg");
  --section-notice-bg:     url("assets/bg/section-notice.jpg");
}
*/
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background: #f5f5f5;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
body.page-bg {
  background-image: url("assets/11_bg.png");
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; }

.page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-bg .page { background: transparent; }
body:not(.page-bg) .page { background: #fff; }

/* ===== 피그마 Section 1: 1075×10899 레이아웃 (절대 위치 % 변환) ===== */
.figma-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  background-color: #f4f1ea;
  padding-bottom: 24px;
}
.Section1 {
  position: relative;
  width: 100%;
  max-width: 1075px;
  margin: 0 auto;
  height: 0;
  padding-bottom: 1013.86%; /* 10899/1075 비율 유지 */
  overflow: hidden;
  background: transparent;
}
/* 배경 이미지 하단에서 보일 수 있는 선을 여백 색으로 덮음 */
.Section1::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #f4f1ea;
  z-index: 10;
  pointer-events: none;
}
.Section1 img,
.Section1 .EventButton1 {
  position: absolute;
  display: block;
  object-fit: fill;
}
/* 11_bg: 1075×10899, 0,0 */
.Bg1 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}
/* 04_section 1_contents: 955×1469, 58, 1653 */
.Section1Contents1 {
  left: 5.4%;
  top: 15.17%;
  width: 88.84%;
  height: 13.48%;
  z-index: 1;
}
/* 06_section 2_contents: 1080×3158, 0, 3419 */
.Section2Contents1 {
  left: 0;
  top: 31.38%;
  width: 100%;
  height: 28.98%;
  z-index: 1;
}
/* 08_event_process: 1006×1963, 69, 8230 */
.EvnetProcess1 {
  left: 6.42%;
  top: 75.52%;
  width: 93.58%;
  height: 18.01%;
  z-index: 1;
}
/* 09_event_button: 가로 정가운데, 537×130 기준 */
.EventButton1 {
  left: 50%;
  top: 91.37%;
  width: 49.95%;
  height: 1.19%;
  transform: translateX(-50%);
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.2s;
}
.EventButton1:hover { opacity: 0.9; }
.EventButton1 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* 10_event_product: 860×603, 106, 10284 */
.EventProduct1 {
  left: 9.86%;
  top: 94.36%;
  width: 80%;
  height: 5.53%;
  z-index: 1;
}
/* Section1 하단 여백: .figma-wrap의 padding-bottom으로 처리 (배경 #f4f1ea) */
/* 03_section 1_title: 863×393, 140, 1457 */
.Seciont1Title1 {
  left: 13.02%;
  top: 13.37%;
  width: 80.28%;
  height: 3.61%;
  z-index: 2;
}
/* 05_section 2_title: 724×331, 174, 3203 */
.Section2Title1 {
  left: 16.19%;
  top: 29.4%;
  width: 67.35%;
  height: 3.04%;
  z-index: 2;
}
/* 07_event_reward: 932×2019, 70, 6488 */
.EventReward1 {
  left: 6.51%;
  top: 59.55%;
  width: 86.7%;
  height: 18.53%;
  z-index: 1;
}
/* 02_main_title: 898×737, 122, 188 */
.MainTitle1 {
  left: 11.35%;
  top: 1.73%;
  width: 83.53%;
  height: 6.76%;
  z-index: 2;
}
/* 01_logo: 271×75, 57, 54 */
.Logo1 {
  left: 5.3%;
  top: 0.5%;
  width: 25.21%;
  height: 0.69%;
  z-index: 3;
}

/* 모바일: 가로 100%, PC: 1075px 중앙 */
@media (min-width: 1076px) {
  .figma-wrap {
    max-width: 1075px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 섹션별 배경 이미지 (경로만 바꾸면 됨, 없으면 색상만 적용) */
.section-product { background-color: #fff; background-image: var(--section-product-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-milkbar { background-color: #ebebeb; background-image: var(--section-milkbar-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-prizes  { background-color: #fff; background-image: var(--section-prizes-bg, none);  background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-participate { background-color: #f8f8f8; background-image: var(--section-participate-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-target  { background-color: #f8f8f8; background-image: var(--section-target-bg, none);  background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-notice  { background-color: #fff; background-image: var(--section-notice-bg, none);  background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-kv      { background-color: transparent; background-image: var(--section-kv-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-header { background-color: #fff; }

/* ===== [1] 메인 - 탭 ===== */
.section-header { padding: 0; }
.tab {
  display: flex;
  height: 60px;
}
.tab-logo {
  width: 148px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.header-logo {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: contain;
  object-position: center;
}
.tab-right {
  flex: 1;
  border-left: 1px solid #ebebeb;
}

/* ===== [2] KV ===== */
.section-kv {
  padding: 10px 30px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}
.kv-banner {
  padding: 0;
  line-height: 0;
}
.kv-title-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.kv-duration {
  margin: 0;
  font-size: 0.9375rem;
  color: #222;
  text-align: center;
}
.kv-actions {
  padding: 0 4px;
  text-align: center;
}
.btn-img-wrap {
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-img-wrap:hover { opacity: 0.9; }
.btn-img {
  display: block;
  width: 100%;
  max-width: 307px;
  height: auto;
  vertical-align: top;
}
.kv-actions .btn-img-wrap { display: block; margin: 0 auto; }
.kv-actions .btn-img { margin: 0 auto; }

/* ===== 공통 버튼 ===== */
.btn { transition: opacity 0.2s; }
.btn:hover { opacity: 0.9; }
.btn-fill {
  background: #5e5e5e;
  color: #fff;
}
.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #222;
  color: #222;
  background: transparent;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
}

/* ===== Section 공통 ===== */
.section {
  width: 100%;
}
.section-title {
  margin: 0 0 20px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
}

/* ===== [3] 제품 ===== */
.section-product {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.product-slogan {
  margin: 0;
  font-size: 0.9375rem;
  color: #222;
  line-height: 1.5;
}
.product-steps {
  margin: 0;
  font-size: 0.9375rem;
  color: #222;
  line-height: 1.6;
}
.product-img-wrap {
  width: 100%;
  max-width: 307px;
  margin: 0 auto;
  aspect-ratio: 307 / 230;
  background: #9e9e9e;
  border: 1px solid #9e9e9e;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img-placeholder {
  font-size: 0.875rem;
  color: #222;
}
.product-desc {
  margin: 0;
  font-size: 0.875rem;
  color: #222;
  line-height: 1.5;
}
.product-desc--last { margin-bottom: 0; }

/* ===== [4] 파스퇴르 밀크바 (이미지 배너) ===== */
.section-milkbar {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.milkbar-assets {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.milkbar-assets img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.milkbar-title-img,
.milkbar-period-img,
.milkbar-menu-img,
.milkbar-gift-img,
.milkbar-process-img,
.milkbar-intro-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== [5] 이벤트 경품 안내 ===== */
.section-prizes {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.prize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.prize-card {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.prize-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 59px;
  height: 43px;
  padding: 8px 16px;
  background: #5e5e5e;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 1000px;
}
.prize-img {
  width: 100%;
  max-width: 267px;
  aspect-ratio: 267 / 192;
  background: #9e9e9e;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: #222;
}
.btn-prize {
  width: 100%;
  max-width: 267px;
  height: auto;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: #5e5e5e;
}
.prize-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #222;
  text-align: center;
  width: 100%;
}
.prize-disclaimer {
  margin: 0;
  font-size: 0.8125rem;
  color: #222;
  line-height: 1.5;
  text-align: center;
}

/* ===== [6] 참여방법 (배너 + 구매 인증 버튼) ===== */
.section-participate {
  padding: 0 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.participate-banner-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.participate-actions {
  text-align: center;
}
.participate-actions .btn-img-wrap {
  display: block;
  margin: 0 auto;
  max-width: 320px;
}
.participate-actions .btn-img {
  margin: 0 auto;
}

/* ===== [7] 이벤트 대상 제품 (배너) ===== */
.section-target {
  padding: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.target-banner-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.target-disclaimer {
  margin: 0;
  padding: 0 20px;
  font-size: 0.75rem;
  color: #555;
  line-height: 1.5;
  text-align: center;
}

/* ===== [7-2] 파스퇴르 밀크바 지점 현황 (드롭다운) ===== */
.section-branches {
  margin-top: -1px; /* 여백과의 경계에서 생기는 1px 선 제거 */
  padding: 24px 20px 28px;
  background: #f5f5f5;
  box-sizing: border-box;
}
.branches-title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
}
.branches-details {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  overflow: hidden;
}
.branches-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.branches-summary::-webkit-details-marker { display: none; }
.branches-summary::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  background-size: 20px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.branches-details[open] .branches-summary::after { transform: rotate(180deg); }
.branches-inner {
  padding: 0 0 12px;
  border-top: 1px solid #eee;
}
.branches-table-wrap {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.branches-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  color: #222;
}
.branches-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #222;
  color: #fff;
}
.branches-table th {
  padding: 10px 12px;
  font-weight: 600;
  text-align: left;
}
.branches-table th:first-child { width: 64px; min-width: 64px; }
.branches-table td {
  padding: 10px 12px;
  border-bottom: 1px dotted #ccc;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.branches-table tbody tr:last-child td { border-bottom: none; }
@media (min-width: 769px) {
  .section-branches {
    max-width: 1075px; /* 상단 이미지 영역과 동일 */
    margin-left: auto;
    margin-right: auto;
    padding: 32px 40px 36px;
  }
  .branches-title { font-size: 1.25rem; margin-bottom: 20px; }
  .branches-summary { padding: 16px 20px; font-size: 1rem; }
  .branches-table-wrap { max-height: 400px; }
  .branches-table { font-size: 0.875rem; }
  .branches-table th,
  .branches-table td { padding: 12px 16px; }
}

/* 지점 현황 - 카카오 지도 */
.branches-map-wrap {
  margin-top: 24px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  overflow: hidden;
}
.branches-map-title {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #222;
  border-bottom: 1px solid #eee;
}
.branches-map-hint {
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 0.8125rem;
  color: #666;
  line-height: 1.4;
  border-bottom: 1px solid #f0f0f0;
}
.branch-row {
  cursor: pointer;
  transition: background-color 0.15s;
}
.branch-row:hover {
  background-color: #f5f5f5;
}
.branch-row:focus {
  outline: 2px solid #333;
  outline-offset: -2px;
}
.kakao-map {
  width: 100%;
  height: 280px;
  min-height: 200px;
  background: #e8e8e8;
}
.branches-map-notice {
  margin: 0;
  padding: 10px 16px 14px;
  font-size: 0.75rem;
  color: #666;
  line-height: 1.5;
}
@media (min-width: 769px) {
  .branches-map-wrap { margin-top: 28px; }
  .branches-map-title { padding: 16px 20px; font-size: 1rem; }
  .branches-map-hint { padding: 10px 20px 14px; font-size: 0.875rem; }
  .kakao-map { height: 320px; }
  .branches-map-notice { padding: 12px 20px 16px; font-size: 0.8125rem; }
}

/* ===== [8] 이벤트 유의사항 (다크 테마) ===== */
.section-notice {
  padding: 28px 20px 36px;
  background: #3a3a3a;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}
.section-notice .notice-title {
  margin: 0 0 24px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.notice-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #e53935;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}
.notice-box {
  background: transparent;
  border-radius: 0;
  padding: 0;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.notice-inner {
  padding: 0;
  max-width: 100%;
  min-width: 0;
}
.notice-section-head {
  margin: 20px 0 12px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.notice-section-head:first-of-type { margin-top: 0; }
.notice-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
  max-width: 100%;
  min-width: 0;
}
.notice-list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 4px;
  font-size: 0.8125rem;
  color: #d0d0d0;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.notice-list li::before {
  content: "- ";
  position: absolute;
  left: -5px;
  color: #fff;
  font-weight: 400;
}
/* 하위 목록: 부모 항목의 '다음의 경우'에 해당하는 항목 */
.notice-sublist {
  margin: 8px 0 10px 0;
  padding-left: 20px;
  list-style: none;
}
.notice-sublist li {
  padding-left: 4px;
}
.notice-sublist li::before {
  content: "· ";
  left: -5px;
  color: #d0d0d0;
}
.notice-list li:last-child { margin-bottom: 0; }
.notice-list li > .notice-sublist:last-child { margin-bottom: 0; }
.notice-sublist li:last-child { margin-bottom: 0; }
.notice-list li strong { color: #fff; font-weight: 600; }
.notice-list .notice-item-highlight {
  color: #fff;
  font-weight: 600;
}
.notice-list .notice-item-highlight::before { color: #d0d0d0; }

/* 푸터: 고객센터 + 로고 (이미지 레이아웃 동일, 가운데 정렬) */
.notice-footer {
  margin-top: 28px;
  padding-top: 24px;
  padding-bottom: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}
.notice-footer-contact {
  margin-bottom: 40px;
}
.notice-footer-office {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  color: #fff;
  line-height: 1.6;
}
.notice-footer-office strong { font-weight: 700; }
.notice-footer-tel {
  font-size: 1.0625rem;
  color: #fff;
  text-decoration: none;
}
.notice-footer-tel:hover { text-decoration: underline; }
.notice-footer-hours {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  color: #d0d0d0;
  line-height: 1.6;
}
.notice-footer-off {
  margin: 0;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.6;
}
.notice-footer-logo-wrap {
  margin: 0;
  line-height: 0;
}
.notice-footer-logo {
  display: inline-block;
  max-width: 120px;
  height: auto;
  vertical-align: top;
  opacity: 0.95;
}

@media (min-width: 769px) {
  .section-notice {
    max-width: 1075px; /* 상단 이미지 영역과 동일 */
    margin-left: auto;
    margin-right: auto;
    padding: 36px 40px 48px;
  }
  .section-notice .notice-title { font-size: 1.5rem; margin-bottom: 28px; }
  .notice-title-badge { width: 32px; height: 32px; min-width: 32px; font-size: 1.05rem; }
  .notice-inner { max-width: 100%; margin: 0; width: 100%; }
  .notice-section-head { font-size: 1.125rem; margin: 24px 0 14px; }
  .notice-list li { font-size: 0.875rem; margin-bottom: 12px; }
  .notice-footer { margin-top: 32px; padding-top: 28px; padding-bottom: 40px; }
  .notice-footer-contact { margin-bottom: 48px; }
  .notice-footer-office { font-size: 1rem; margin-bottom: 12px; }
  .notice-footer-tel { font-size: 1.125rem; }
  .notice-footer-hours { font-size: 0.875rem; }
  .notice-footer-off { font-size: 0.8125rem; }
  .notice-footer-logo { max-width: 140px; }
}

@media (min-width: 400px) {
  .page { box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
}