* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 상단 네비 wrap 숨김 */
.tnav-wrap { display: none !important; }

html,
body {
  height: 100%;
  background: #fff;
  font-family: sans-serif;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.banner-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.image-wrapper {
  position: relative;
}

.banner-img {
  width: 100%;
  display: block;
}

.banner-form {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 6px;
  background: rgba(99, 93, 93, 0.95);
  z-index: 9990;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.form-row {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.banner-form input[type="text"],
.banner-form input[type="tel"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ccc;
  color: gray;
  font-size: 16px;
  min-width: 0;
  border-radius: 0;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #fff;
}

.checkbox-wrapper input {
  margin-right: 6px;
  width: 16px;
  height: 16px;
}

.select-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  color: gray;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  min-width: 0;
}

.select-button img {
  width: 16px;
  height: auto;
  flex-shrink: 0;
}

.btn-submit-image {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  height: auto;
  color: #fff;
  background: linear-gradient(135deg, #1478f5 0%, #00c4ff 100%);
  box-shadow: 0 6px 18px rgba(20, 120, 245, 0.28);
  font-size: 18px;
  border-radius: 5px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-submit-image:hover {
  box-shadow: 0 8px 24px rgba(20, 120, 245, 0.36);
  transform: translateY(-1px);
}
.btn-submit-image:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(20, 120, 245, 0.24);
}

/* 하단 녹색 CTA - 세로 2줄 (윗줄=1:1 프라이빗 / 아랫줄=울쎄라 혜택) */
.btn-cta-green {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  gap: 6px;
  box-sizing: border-box;
}
.btn-cta-green .btn-cta-half {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: -0.3px;
}
/* 윗줄 : 1:1 프라이빗 상담예약 (주요 CTA) */
.btn-cta-green .btn-cta-half:first-child {
  font-size: 18px;
  font-weight: 700;
}
/* 아랫줄 : 상담신청만 해도 울쎄라 30% 혜택 (혜택 안내) */
.btn-cta-green .btn-cta-half:last-child {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.95;
}

/* 검은색 CTA 섹션 */
.section-cta-black {
  padding: 16px 12px 20px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  line-height: normal;
  font-size: 15px;
}
.btn-cta-black {
  display: flex;
  align-items: stretch;
  height: 56px;
  background: linear-gradient(135deg, #a12e94 0%, #db0f69 100%);
  box-shadow: 0 6px 18px rgba(161, 46, 148, 0.28);
  color: #fff;
  border-radius: 15px;
  overflow: hidden;
  font-weight: 600;
  max-width: 450px;
  margin: 0 auto;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-cta-black:hover {
  box-shadow: 0 8px 24px rgba(161, 46, 148, 0.36);
  transform: translateY(-1px);
}
.btn-cta-black:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(161, 46, 148, 0.24);
}
.btn-cta-black .btn-cta-half {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  position: relative;
  letter-spacing: 2px;
  white-space: nowrap;
  word-break: keep-all;
}
.btn-cta-black .btn-cta-half:first-child {
  justify-content: flex-end;
}
.btn-cta-black .btn-cta-half:last-child {
  justify-content: flex-start;
}
.btn-cta-black .btn-cta-half + .btn-cta-half::before {
  content: "/";
  color: #fff;
  pointer-events: none;
  margin: 0 8px;
  letter-spacing: 0;
}

/* 작은 모바일 화면 대응 */
@media screen and (max-width: 420px) {
  .btn-cta-black .btn-cta-half {
    font-size: 14px;
    letter-spacing: 1px;
  }
  .btn-cta-black .btn-cta-half + .btn-cta-half::before {
    margin: 0 6px;
  }
  .btn-cta-green .btn-cta-half:first-child {
    font-size: 16px;
  }
  .btn-cta-green .btn-cta-half:last-child {
    font-size: 12px;
  }
}
@media screen and (max-width: 360px) {
  .btn-cta-black .btn-cta-half {
    font-size: 12px;
    letter-spacing: 0;
  }
  .btn-cta-black .btn-cta-half + .btn-cta-half::before {
    margin: 0 4px;
  }
  .btn-cta-green {
    padding: 8px 10px;
    gap: 5px;
  }
  .btn-cta-green .btn-cta-half:first-child {
    font-size: 15px;
  }
  .btn-cta-green .btn-cta-half:last-child {
    font-size: 11px;
  }
}

@media screen and (min-width: 961px) {
  .btn-cta-black {
    max-width: 960px;
    height: 72px;
  }
  .btn-cta-black .btn-cta-half {
    font-size: 18px;
  }
  .btn-cta-green .btn-cta-half {
    font-size: 17px;
  }
}

.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* 팝업 */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(90%, 360px);
  transform: translate(-50%, -50%);
  z-index: 999;
  display: none;
}

.popup-bg {
  width: 100%;
  height: 380px;
  border-radius: 12px;
  display: block;
}

.option-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 16px 20px;
  list-style: none;
  color: #000;
  font-size: 15px;
  background-color: #fff;
  border-radius: 20px;
}

.option-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  cursor: pointer;
  font-size: 22px;
}

.option-list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('/landing/bast/event_form_49/images/49event_5.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.option-list li.selected::before {
  background-image: url('/landing/bast/event_form_49/images/49event_4.jpg');
}

/* 딤드 */
.dimmed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  display: none;
}

/* 이름 input만 너비 조정 */
.form-row input[name="이름"] {
  flex: 0 0 80px;
}

/* PC */
@media screen and (min-width: 961px) {
  .banner-container {
    width: 960px;
    max-width: 960px;
  }

  .banner-form {
    width: 960px;
    max-width: 960px;
  }
}

/* 상담예약 팝업 */
.cs-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .55);
  z-index: 9998;
}

.cs-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 14px;
  padding: 32px 24px 24px;
  width: 90%;
  max-width: 400px;
  z-index: 9999;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
  box-sizing: border-box;
}

.cs-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

.cs-popup-close:hover {
  color: #222;
}

.cs-popup-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 20px;
  text-align: center;
  color: #1a1a1a;
}

.cs-popup-field {
  margin-bottom: 11px;
}

.cs-popup-field input:not([type="checkbox"]),
.cs-popup-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  background: #fff;
}

.cs-popup-field input:not([type="checkbox"]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
}

.cs-popup-field input:focus,
.cs-popup-field select:focus {
  border-color: #43bfc0;
}

.cs-popup-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
}

.cs-popup-agree input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.cs-popup-agree input[type="checkbox"]:checked {
  background: #43bfc0;
  border-color: #43bfc0;
}

.cs-popup-agree input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.cs-popup-submit-btn {
  width: 100%;
  padding: 14px;
  background: #43bfc0;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
}

.cs-popup-submit-btn:hover {
  background: #35adb0;
}

/* flatpickr 커스텀 */
.flatpickr-calendar {
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  z-index: 10001 !important;
}

.flatpickr-months {
  background: #43bfc0;
  border-radius: 14px 14px 0 0;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: #fff;
  fill: #fff;
}

.flatpickr-current-month .cur-month {
  font-weight: 700;
}

.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 4px;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper {
  display: none !important;
}

.fp-ym-label {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff;
  fill: #fff;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #fff;
}

.flatpickr-weekdays {
  background: #efe8ff;
}

span.flatpickr-weekday {
  font-weight: 600;
  color: #43bfc0;
  background: transparent;
}

.flatpickr-day {
  border-radius: 8px;
  border: none;
}

.flatpickr-day:hover {
  background: #f3eeff;
  color: #43bfc0;
}

.flatpickr-day.today {
  border: 2px solid #43bfc0;
  color: #43bfc0;
  font-weight: 700;
}

.flatpickr-day.today:hover {
  background: #43bfc0;
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #43bfc0;
  color: #fff;
  border: none;
  font-weight: 700;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #ddd;
  background: none;
  cursor: not-allowed;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #ccc;
}

/* 상담예약 완료 다이얼로그 (시안 A - 클린 & 웜 뉴트럴) */
.cs-done-popup {
  padding: 36px 26px 28px;
  max-width: 375px;
  text-align: center;
  border-radius: 22px;
}
.cs-done-badge {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #faf6ec;
  border: 1.5px solid #e8d9ae;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-done-popup .cs-popup-title {
  font-size: 21px;
  font-weight: 700;
  color: #191919;
  letter-spacing: -.3px;
  margin: 0 0 10px;
}
.cs-done-text {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: #767066;
  margin: 0 0 24px;
}
.cs-done-info {
  background: #f8f6f2;
  border-radius: 14px;
  padding: 8px 18px;
  margin: 0 0 22px;
  text-align: left;
}
.cs-done-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #ece8df;
}
.cs-done-info-row:last-child {
  border-bottom: none;
}
.cs-done-info-label {
  font-size: 13.5px;
  color: #9a9488;
  font-weight: 500;
}
.cs-done-info-value {
  font-size: 15px;
  color: #24211c;
  font-weight: 600;
  letter-spacing: -.2px;
}
.cs-done-info-em .cs-done-info-value {
  font-weight: 800;
  color: #111;
}
.cs-done-dow {
  color: #b0893a;
  font-weight: 700;
}
.cs-done-benefit {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 0;
}
.cs-done-benefit img {
  width: 100%;
  display: block;
  border-radius: 10px;
}
.cs-done-ok {
  width: 100%;
  background: #191919;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
}

/* 혜택 상세 팝업 */
.cs-benefit-popup {
  padding: 0;
  max-width: 420px;
  max-height: 85vh;
  overflow: hidden;
  border-radius: 14px;
}
.cs-benefit-popup .cs-popup-close {
  top: 8px;
  right: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.cs-benefit-scroll {
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cs-benefit-image {
  width: 100%;
  display: block;
}

/* AI 챗봇 검색 인트로 (SC AI · Sera) — 2026-08 메타 광고 챗봇 적용 */
.section_ai_intro {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #FBFAF6; /* 배경사진 여백과 동일한 톤 — 가로 크롭 시 잘려나가는 부분과 이음매 없이 맞춤 */
}
/* 사진 구도(왼쪽 여백 + 오른쪽 인물)를 그대로 살리면서 세로를 꽉 채우기 위해
   높이를 뷰포트에 맞추고 오른쪽 정렬 → 잘리는 건 인물이 아니라 왼쪽 여백 쪽이다 */
.ai-intro-bg {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: auto;
}
.ai-intro-bg img {
  display: block;
  height: 100%;
  width: auto;
  /* style_new.css의 `.section img { max-width:100% }` 가 이 div도 .section 이라 그대로 매칭돼서
     너비를 뷰포트 폭으로 눌러버림 → height:100%(뷰포트 높이)와 충돌해 원본 비율이 깨지고 늘어져 보임 */
  max-width: none;
  object-fit: cover;
  opacity: 0.65;
}
.ai-intro-copy {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  /* padding-top(퍼센트)은 요소 너비 기준이라 화면 높이와는 무관 → 작은 기기에서 과하게 밀림.
     뷰포트 높이(vh) 기준으로 바꾸고 상/하한을 둬서 기기별로 자연스럽게 스케일되게 함 */
  padding-top: clamp(90px, 30vh, 280px);
  padding-left: 7%;
  padding-right: 7%;
  box-sizing: border-box;
}
/* 이 섹션만 시안(v13)과 동일한 폰트로 표시 — 사이트 전체 기본 폰트(Noto Sans KR)는 그대로 둠.
   index_a.html/index_c.html 안에 h1~h6, p, input, button 등 태그 셀렉터로 직접
   font-family(Nanum Gothic)를 지정하는 전역 리셋(<style> 인라인, 예: index_c.html:1125)이 있어서,
   부모(.ai-intro-copy)에만 지정하고 상속에 맡기면 그 전역 규칙(태그 셀렉터)이 상속보다 먼저 이겨버림.
   그래서 하위 전체(*)에 클래스 기반으로 직접 지정해 우선순위(specificity)를 확실히 이기도록 함
   — .ai-intro-copy *(클래스 1개)가 전역 리셋의 h2/p(태그 1개)보다 우선순위가 높음 */
.ai-intro-copy,
.ai-intro-copy * {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.ai-intro-copy .ai-eyebrow { font-family: 'Antonio', 'Pretendard Variable', sans-serif; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: #B9827C; font-weight: 500; }
.ai-intro-copy .ai-headline { margin-top: 10px; font-size: 26px; line-height: 1.35; font-weight: 600; letter-spacing: -.04em; color: #101010; }
.ai-intro-copy .ai-sub { margin-top: 12px; font-size: 13px; line-height: 1.7; font-weight: 400; color: #7a7168; }
.ai-search {
  margin-top: 22px; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid rgba(20,18,16,.09); border-radius: 999px;
  padding: 10px 12px; box-shadow: 0 14px 30px -14px rgba(94,58,68,.35);
  max-width: 86%;
}
.ai-search .ai-badge {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(150deg,#cd9892,#b9827c); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
  font-family: 'Antonio', 'Pretendard Variable', sans-serif;
  text-align: center; line-height: 1;
  /* "A"와 "I" 사이 글자폭 차이 때문에 기하학적으로는 중앙이어도 눈에는 오른쪽으로 쏠려 보임 → 시각 보정 */
  padding-right: 1px;
  letter-spacing: -0.5px;
}
.ai-search input.q {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #101010;
  border: 0; outline: 0; background: transparent; padding: 0; font-family: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-search input.q::placeholder { color: #101010; opacity: .55; }
.ai-search .go {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fbf9f6;
  border: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  color: #b9827c; cursor: pointer;
}
.ai-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chips .chip {
  font-family: inherit; font-size: 11px; font-weight: 600; color: #8d8378;
  background: rgba(255,255,255,.75); border: 1px solid rgba(20,18,16,.07);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.ai-chips .chip:active { background: rgba(255,255,255,.95); }
.ai-skip { margin-top: 18px; background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: #9a9086; }
@media only screen and (max-width: 360px) {
  .ai-intro-copy .ai-headline { font-size: 22px; }
}

/* 기존 히어로(.hidden_section) — AI 챗봇 인트로로 대체, 화면에 노출하지 않음 */
.hidden_section { display: none; }