/* ==========================================================
   26050800 - 해커스편입 6월 박람회 PC 전용 (2540px 적응형)
   ========================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
img { border: 0; vertical-align: top; }
button { font: inherit; }

body {
  font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
  background: #fff;
  color: #111;
  -webkit-font-smoothing: antialiased;
}

#wrap { width: 100%; overflow: hidden; }

/* ── 공통 섹션 래퍼 ───────────────────────────────────────── */
.ov { overflow: hidden; }
.inner_wide {
  width: 2540px;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.bg-img {
  display: inline-block;
  vertical-align: top;
  width: 2540px;
  height: auto;
}

.bg-video {
  display: block;
  width: 2540px;
  object-fit: cover;
}

/* 공통 유틸 */
.cursor-pointer { cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   @main (con01) - 메인 KV + 근거 보기 버튼
   ============================================================ */
.con01-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 2540px;
  height: auto;
  pointer-events: none;
}

.con01 .btn-reason {
  position: absolute;
  top: 500px; left: 1166px;
  width: 78px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: 14px;
}

/* ============================================================
   @con1 (con02) - 박람회 신청 폼
   form rel = (938, 583, 666, 1622) — Figma con1 frame(2540x2253) 기준
   각 자식 좌표는 form 기준 상대값
   ============================================================ */
.con02 { background: #fff; }
.con02 .inner_wide { padding: 0; }

.apply-form {
  position: absolute;
  top: 583px; left: 938px;
  width: 666px; height: 1622px;
  text-align: left;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #222;
}

.apply-form .form-row {
  position: absolute;
  left: 0;
}
.apply-form .form-label {
  position: absolute;
  font-family: 'Pretendard', sans-serif;
  font-size: 31px;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.93px;
  white-space: nowrap;
  margin: 0;
}
.apply-form .form-label-block {
  position: relative;
  display: block;
}
.apply-form .req {
  color: #438DFE;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.66px;
  margin-left: 0;
  vertical-align: super;
}

/* 공통 input 스타일 — Figma Rectangle 14: fills #fff, stroke #C2D2EC 0.98px, radius 15.68px
   placeholder text: Noto Sans KR Regular 26px, color rgba(17,17,17,0.3), letter-spacing -1.3 */
.apply-form .form-input {
  border: 0.98px solid #C2D2EC;
  border-radius: 15.68px;
  background: #fff;
  padding: 0 28px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #111;
  letter-spacing: -1.3px;
  outline: none;
}
.apply-form .form-input::placeholder { color: rgba(17, 17, 17, 0.3); }
.apply-form .form-input:focus { border-color: #438DFE; }

/* 이름 — form 기준: 라벨 (22, 26), input (178, 0) 437x79 */
.apply-form .form-row-name { top: 0; width: 615px; height: 79px; }
.apply-form .form-row-name .form-label { top: 0; left: 22px; height: 79px; line-height: 79px; }
.apply-form .form-row-name .form-input {
  position: absolute;
  top: 0; left: 178px;
  width: 437px; height: 79px;
}

/* 연락처 — form 기준: 라벨 (22, 128), input (178, 100) 436x79 */
.apply-form .form-row-tel { top: 100px; width: 614px; height: 79px; }
.apply-form .form-row-tel .form-label { top: 0; left: 22px; height: 79px; line-height: 79px; }
.apply-form .form-row-tel .form-input {
  position: absolute;
  top: 0; left: 178px;
  width: 436px; height: 79px;
}

/* 희망 편입년도 — form 기준: 라벨 (22, 219), 라디오그룹 (34, 266) */
.apply-form .form-row-year { top: 219px; width: 515px; height: 87px; }
.apply-form .form-row-year .form-label-block {
  position: absolute;
  top: 0; left: 22px;
}
.apply-form .radio-group {
  position: absolute;
  top: 48px; left: 34px;
  width: 481px;
  height: 40px;
}
.apply-form .radio-item {
  width: 220px;
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 40px;
  font-family: 'Pretendard', sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #222;
  letter-spacing: -0.6px;
  user-select: none;
}
.apply-form .radio-item:nth-child(1) { left: 0; }
.apply-form .radio-item:nth-child(2) { left: 278px; } /* Figma 1250-972 = 278 */
.apply-form .radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 39px; height: 39px;
  margin: 0;
}
.apply-form .radio-circle {
  display: inline-block;
  width: 39px; height: 39px;
  border: 0.98px solid #C2D2EC;
  border-radius: 50%;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  margin-right: 16px;
}
.apply-form .radio-item input[type="radio"]:checked + .radio-circle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  background: #438DFE;
  border-radius: 50%;
}

/* 희망 편입계열 — form 기준: 라벨 (22, 350), btn 그리드 (34, 397) 519x170 */
.apply-form .form-row-field { top: 350px; width: 614px; height: 217px; }
.apply-form .form-row-field .form-label-block {
  position: absolute;
  top: 0; left: 22px;
}
.apply-form .field-group {
  position: absolute;
  top: 50px; left: 34px;
  width: 580px;
  height: 170px;
  display: grid;
  grid-template-columns: repeat(3, 185px);
  grid-template-rows: repeat(2, 77px);
  column-gap: 12px;
  row-gap: 16px;
}
.apply-form .field-btn {
  width: 185px;
  height: 77px;
  border: 1px solid #C2D2EC;
  border-radius: 16.28px;
  background: #fff;
  font-family: 'Pretendard', sans-serif;
  font-size: 28.74px;
  font-weight: 600;
  color: #232323;
  letter-spacing: -1.15px;
}
.apply-form .field-btn.is-active {
  background: #438DFE;
  border-color: #438DFE;
  color: #fff;
}

/* 보라색 강조 박스 (Rectangle 13) — Figma fills: rgba(88,64,218,0.05), radius 30.79px
   form 기준 (0, 609) 664x372
   배경 이미지(section-02.png)에 select/체크 영역이 함께 래스터화되어 있어,
   불투명 단색(흰색+5% 보라 합성값 #F2F0FB)으로 덮어 시스템폰트 오버레이와의 겹침을 차단 */
.apply-form .purple-box {
  position: absolute;
  top: 609px; left: 0;
  width: 664px; height: 372px;
  border-radius: 30.79px;
}

/* notice (※ 참석자 모의고사 교재 100% 무료제공!) — Figma form 기준 (106, 685) → purple-box 기준 (106, 76)
   Pretendard Medium 20px, color #222 (Figma 0.133), letter-spacing -1px */
.apply-form .purple-box .form-notice {
  position: absolute;
  top: 76px; left: 0;
  width: 664px;
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #222;
  letter-spacing: -1.2px;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

/* 오프라인 옵션 — Figma form 기준 (46, 651) → purple-box 기준 (46, 42)
   text Pretendard Medium 31px, color #121212 */
.apply-form .purple-box .chk-row-offline {
  width:500px;
  height:70px;
  position: absolute;
  top: 45px; left: 46px;
  display: inline-flex;
  align-items: flex-start;
  font-family: 'Pretendard', sans-serif;
  font-size: 31px;
  font-weight: 700;
  color: #121212;
  letter-spacing: -1.24px;
}
.apply-form .purple-box .chk-row-offline .chk-box {
  width: 41px; height: 41px;
  border-radius: 12px;
  border: 0.98px solid #C3B9E1;
  background: #fff;
  margin-right: 18px;
  position: relative;
  flex-shrink: 0;
}

/* 캠퍼스 select — Figma form 기준 (라벨 22, 1362)/(select 155, 1332) → purple-box 기준 (라벨 22, 753-609)/(select 155, 1332-609=723)
   form (155, 749, 456, 78) → purple-box(0,609) 기준 (155, 140) */
.apply-form .purple-box .select-row-campus {
  position: absolute;
  top: 140px; left: 43px;
  width: 506px;
  height: 78px;
}
.apply-form .purple-box .select-row-campus .form-label {
  top: 0; left: 0;
  height: 78px; line-height: 78px;
  color: #222;
}
.apply-form .purple-box .select-row-campus .form-select {
  position: absolute;
  top: 0; left: 112px;
  width: 456px; height: 78px;
}

/* 계열 select — Figma form (155, 847, 456, 78) → purple-box 기준 (155, 238) */
.apply-form .purple-box .select-row-time {
  position: absolute;
  top: 238px; left: 43px;
  width: 506px;
  height: 78px;
}
.apply-form .purple-box .select-row-time .form-label {
  top: 0; left: 0;
  height: 78px; line-height: 78px;
  color: #222;
}
.apply-form .purple-box .select-row-time .form-select {
  position: absolute;
  top: 0; left: 112px;
  width: 456px; height: 78px;
}

/* Figma Rectangle 15: fills #fff, stroke #C3B9E1 0.98px, radius 17.64px
   placeholder text: Noto Sans KR Regular 26px, color #333 (Figma 0.2), letter-spacing -1.3
   Vector 1 (chevron): stroke #000 2.33px, 19.8x9.9, right 28px center */
.apply-form .form-select {
  border: 0.98px solid #C3B9E1;
  border-radius: 17.64px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'><path d='M1 1l9 8 9-8' stroke='%23000' stroke-width='2.33' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 28px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 60px 0 36px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #333;
  letter-spacing: -1.3px;
  outline: none;
}

/* 동의 영역 타이틀 — form 기준 (39, 1043) */
.apply-form .agree-title {
  position: absolute;
  top: 1043px; left: 39px;
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 35px;
  font-weight: 700;
  color: #111;
  letter-spacing: -2.45px;
}

/* 모두동의 — form 기준 (23, 1116) 164x65 */
.apply-form .chk-all {
  position: absolute;
  top: 1096px; left: 23px;
  display: inline-flex;
  align-items: center;
  height: 65px;
  font-family: 'Pretendard', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #121212;
  letter-spacing: -0.6px;
}
.apply-form .chk-all .chk-box {
  width: 38px; height: 38px;
  border: 1px solid #CACACA;
  border-radius: 8px;
  background: #fff;
  margin-right: 16px;
  position: relative;
}

/* 동의박스 (agree, Figma 2:621) — form 기준 (17, 1166) 630x122
   Figma fills #fff, stroke #CACACA 1.03px, radius 17.53px */
.apply-form .agree-box {
  padding: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 1166px; left: 17px;
  width: 630px; height: 122px;
  background: #fff;
  border: 1.03px solid #CACACA;
  border-radius: 17.53px;
  overflow-y: auto;
  font-size: 16px;
  line-height:1.6;
}
/* 필수/선택 동의 input_chk — Figma 절대좌표 (form 기준)
   필수 (2:630): top=1321 left=23 480x38, Rectangle 17 38x38 #fff border #CACACA radius 8
   선택 (2:633): top=1369 left=23 561x38, Rectangle 18 38x38 동일
   text: Pretendard Regular 25px, color #595959, letter-spacing -1 */
.apply-form .chk-required,
.apply-form .chk-optional {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 38px;
  left: 23px;
  font-family: 'Pretendard', sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: #595959;
  letter-spacing: -1px;
}
.apply-form .chk-required { top: 1312px; }
.apply-form .chk-optional { top: 1360px; }
.apply-form .chk-required .chk-box,
.apply-form .chk-optional .chk-box {
  width: 38px; height: 38px;
  border: 1px solid #CACACA;
  border-radius: 8px;
  background: #fff;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
}

/* 체크박스 공통 (input 숨김 + 체크 표시) */
.apply-form .chk-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 38px; height: 38px;
  margin: 0;
  cursor: pointer;
}
.apply-form .chk-row input[type="checkbox"]:checked + .chk-box {
  background: #438DFE;
  border-color: #438DFE;
}
.apply-form .chk-row input[type="checkbox"]:checked + .chk-box::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 10px; height: 18px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
}

/* 제출 버튼 — Figma Rectangle 19 (2:623): form 기준 (51, 1434) 560x100
   bg #121212, radius 180 (캡슐), text Pretendard ExtraBold 30px #fff letter-spacing -0.9 */
.apply-form .btn-submit {
  position: absolute;
  top: 1434px; left: 51px;
  width: 560px; height: 100px;
  background: transparent;
  font-family: 'Pretendard', sans-serif;
  font-size: 0;
  font-weight: 800;
  letter-spacing: -0.9px;
  border: 0;
  border-radius: 180px;
}

/* ============================================================
   @con3 (con04) - 탭 + 슬라이드 + 라이브 알람 + QNA + 로고
   ============================================================ */
.con3-wrap { position: relative; }

/* 탭 영역 — Figma con3 기준점 (-1845, -2390) */
.tab-wrap {
  width: 100%;
  position:absolute;
  top:0; left:0;
}
/* 탭 버튼 — Figma: tab_btn 547x126, off/on 513.7x96.8, 버튼1 247.5x96.8, 버튼2 246.4x95.7, 간격 19.8 */
.tab-btns {
  position: absolute;
  top: 254px; left: 50%;
  transform: translateX(-50%);
  width: 514px;
  height: 97px;
  display: flex;
  gap: 20px;
  justify-content: center;
  z-index:2;
}
.tab-btn {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0;
}
.tab-btn[data-tab="0"] {
  width: 248px; height: 97px;
}
.tab-btn[data-tab="0"] .tab-btn-off {
  width: 248px; height: 97px;
}
.tab-btn[data-tab="0"] .tab-btn-on {
  position: absolute;
  top: 0; left: 0;
  width: 265px; height: 140px;
}
.tab-btn[data-tab="1"] {
  width: 246px; height: 96px;
}
.tab-btn[data-tab="1"] .tab-btn-off {
  width: 246px; height: 96px;
}
.tab-btn[data-tab="1"] .tab-btn-on {
  position: absolute;
  top: 0; left: 0;
  width: 290px; height: 140px;
}
.tab-btn .tab-btn-on,
.tab-btn .tab-btn-off { display: block; }
.tab-btn .tab-btn-on { display: none; }
.tab-btn.is-active .tab-btn-on { display: block; }
.tab-btn.is-active .tab-btn-off { display: none; }

/* 탭 콘텐츠 영역 */
.tab-contents {
  width: 100%;
}
.tab-content { display: none; background-color: #F1F8FF;}
.tab-content.is-active { display: block; }

/* 탭1 (온라인) — Figma 자식 bbox(001/002/003) 기준 1693x3277, con3 rel(440, 406)
   tab-contents 컨테이너(top:480) 기준 상대 = (440, -74) */
.tab-content-1 {
  position: relative;
}
.tab-content-1 img {
  display: block;
}
.tab-content-1 .con3_mov_top {
  position: absolute;
  top: 2205px;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}
/* 선생님 라이브 장면 영상 — tab-content-1.png 내 태블릿 화면 영역에 꽉 차게 오버레이
   (실서버 캡처 기준: left 30.33%, top 66.24%, width 36.65%, height 8.92% of 1693×3277) */
.tab-content-1 .live-video {
  position: absolute;
  top: 2650px;
  left: 952px;
  width: 625px;
  height: 330px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* 탭2 (오프라인) — content/2 슬라이드 포함, 페이지 너비 초과(3469px) → 100vw 확장
   상단 여백 축소: tab-btn 바로 아래에서 콘텐츠가 시작되도록 위로 끌어올림 */
.tab-content-2 {
  position: relative;
}
.tab-content-2 > img {
  position: relative;
  display: block;
}

.con04 .btn-add {
  position: absolute;
  top: 1240px; left: 1440px;
  width: 120px; height: 40px;
  font-size: 0;
}

/* 라이브 알람신청 버튼 — Figma con3/tab/content/1/001/con_timeline/btn (x=-844,y=-646,w=535,h=133) → con3 rel(1001, 1744, 535, 133) */
.con04 .btn-alarm {
  position: absolute;
  top: 1750px; left: 1000px;
  width: 535px; height: 133px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size:0;
}

/* con3_s 이미지 — btn-alarm(top:1750,h:133) 하단 기준 배치 */
.tab-content-1 .con3-s-img {
  position: absolute;
  top: 1900px;
  left: 50%;
  transform: translateX(-50%);
  width: 2540px;
  height: auto;
  display: block;
}

/* con3 순차 활성 박스 — con3_s.png 위 오버레이 */
.tab-content-1 .con3-step-list {
  position: absolute;
  top: 3490px;
  left: 50%;
  transform: translateX(-50%);
  width: 579px;
  display: flex;
  flex-direction: column;
}
.tab-content-1 .con3-step-item {
  width: 100%;
  height: 100px;
  border-radius: 16px;
  background: url("https://cdn.hackersut.com/www/images/event/2026/05/0800/con3_s.png") no-repeat 0 5%/200%
}
.tab-content-1 .con3-step-item:nth-child(2){
  background-position-y: 50%;
}
.tab-content-1 .con3-step-item:nth-child(3){
  background-position-y: 96.5%;
}
.tab-content-1 .con3-step-item.is-active {
  background-position:101.7% -17px;
  height:90px;
}
.tab-content-1 .con3-step-item:nth-child(2).is-active{
  background-position:101.7% 50.1%;
}
.tab-content-1 .con3-step-item:nth-child(3).is-active{
  background-position:101.7% 92.1%;
}

/* 슬라이드 — con3 rel(-219, 2469, 2967, 310)
   tab-contents top:480 + tab-content-2 margin-top:-130 보정 → top=2469-480+130=2119 */
.con04 .tab-content-2 .slide-wrap {
  position: absolute;
  top: 2460px; left: 0;
  overflow: hidden;
  display: block;
}
.con04 .slider-main { list-style: none; }
.con04 .slider-main li { width: 464px; }
.con04 .slider-main li img {
  width: 464px;
  height: 310px;
  object-fit: cover;
  border-radius: 17px;
  display: block;
}

/* 편입 QNA 카드 — Figma con3/tab/content/1/002/bb */
.con04 .link-qna {
  position: absolute;
  top: 2158px; left: 510px;
  width: 630px; height: 330px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}
.con04 .link-qna img {
  width: 630px; height: 330px;
  display: block;
  object-fit: cover;
}
.con04 .tab-content-1 > img[src$="link-qna-bb.png"] {
  position: absolute;
  top: 1732px;
  width: 818px;
  height: auto;
  left: 832px;
  transform: translate(-50%);
}

/* 대학교 로고 — con3 rel(955, 3308, 205, 184) */
.con04 .logo-group {
  position: absolute;
  top: 3308px; left: 955px;
  width: 205px; height: 184px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 6px;
}
.con04 .logo-group img {
  max-width: 90px;
  max-height: 60px;
  object-fit: contain;
}

/* ============================================================
   @con4 (con05) - 박람회 참여자 특별 혜택
   ============================================================ */
.con05 .con4-textbox {
  position: absolute;
  top: 524px; left: 1238px;
  width: 213px; height: 77px;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.32px;
  line-height: 47px;
  color: #905be7;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
}

.con05 .btn-coupon {
  position: absolute;
  top: 962px; left: 987px;
  width: 560px; height: 100px;
  background: transparent;
  border: 0;
  border-radius: 50px;
}

/* ============================================================
   bxSlider 커스텀 (안정 적용)
   ============================================================ */
.bx-wrapper {
  margin: 0 auto;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.bx-wrapper .bx-viewport { background: transparent; border: 0; box-shadow: none; left: 0; }
.bx-wrapper .bx-controls-direction { display: none; }
.bx-wrapper .bx-pager { display: none; }

/* ============================================================
   자세히보기 팝업 (쿠폰 팝업과 동일 구조)
   ============================================================ */
.detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  justify-content: center;
  align-items: center;
}
.detail-overlay.is-open { display: flex; }
.detail-popup {
  position: relative;
  line-height: 0;
  width: 670px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 16px;
  background: #fff;
  scrollbar-width: initial;
  scrollbar-color: #c1c1c1 #ededed;
}
.detail-popup::-webkit-scrollbar { width: 12px; }
.detail-popup::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 12px; }
.detail-popup::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 12px; }
.detail-popup img {
  width: 100%;
  height: auto;
  display: block;
}
.detail-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  font-size: 22px;
  color: #333;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.detail-close:hover { color: #000; }

/* ============================================================
   근거 팝업
   ============================================================ */
.reason-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  justify-content: center;
  align-items: center;
}
.reason-overlay.is-open {
  display: flex;
}
.reason-popup {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 50px 40px 40px;
  max-width: 700px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.reason-close {
  position: absolute;
  top: 24px; right: 28px;
  background: none;
  border: 0;
  font-size: 36px;
  color: #888;
  line-height: 1;
}
.reason-close:hover { color: #222; }
.reason-list {
  list-style: none;
  padding: 0; margin: 0;
}
.reason-list li {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #222;
  letter-spacing: -0.8px;
  line-height: 1.6;
}
.reason-list li strong {
  color: #438DFE;
  font-weight: 700;
}

/* ============================================================
   쿠폰 팝업
   ============================================================ */
.coupon-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  justify-content: center;
  align-items: center;
}
.coupon-overlay.is-open {
  display: flex;
}
.coupon-popup {
  position: relative;
  line-height: 0;
}
.coupon-popup img {
  max-width: 90vw;
  max-height: 90vh;
  display: block;
}
.coupon-close {
  position: absolute;
  top: -20px; right: -20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  font-size: 22px;
  color: #333;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.coupon-close:hover { color: #000; }
/* 쿠폰 팝업 1·2·3번 클릭 영역 오버레이 (세로 3등분 추정 — Stage 3 좌표 검증) */
.coupon-link {
  position: absolute;
  top: 457px;
  left: 55px;
  width: 160px;
  height: 60px;
  display: block;
  z-index: 2;
}
.coupon-link-2 { top: 479px;left:196px; }
.coupon-link-3 { left: 345px; }
.coupon-text {
  position: absolute;
  top: 81.52%;
  left: 61.49%;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #905BE7;
  letter-spacing: -1.5px;
  white-space: nowrap;
  pointer-events: none;
}