@charset "UTF-8";

/* ==========================================================
   0. 구글 웹폰트 불러오기 (Noto Sans KR의 가장 두꺼운 두께 포함)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

/* ==========================================================
   1. 기본 스타일 초기화 & 전체 배경 고정 (유저 원본 유지)
   ========================================================== */
body, h1, h2, h3, p, ul, li { 
  margin: 0; 
  padding: 0; 
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  overflow-y: auto;
  min-width: 1200px; /* PC 전용 레이아웃 깨짐 방지 */
  
  /* 📌 전체 백그라운드 적용 및 고정 (유저 지정 상태 그대로 유지) */
  background-image: url('images/pre_background.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed; 
}
button { 
  cursor: pointer; 
  border: none; 
  background: none; 
}

/* 전체 감싸는 래퍼 */
.wrap {
  width: 100%;
  position: relative;
}

/* ==========================================================
   2. 상단 헤더 영역 (우측 상단 버튼 규격 및 정밀 정렬)
   ========================================================== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  box-sizing: border-box;
  z-index: 100; 
}
.logo-zone img { 
  height: 115px; 
  width: auto; 
  display: block; 
}

/* 📌 각 아이콘들이 윗선(상단)을 기준으로 10px 간격 나열 */
.header-sns { 
  position: relative; 
  display: flex; 
  flex-direction: row; 
  align-items: flex-start; 
  gap: 3px; 
}

/* 버튼 및 링크 박스의 기본 높이를 원본 규격인 64px로 통일 */
.header-sns button, 
.header-sns a {
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  vertical-align: top; 
  text-decoration: none;
  height: 64px; 
  box-sizing: border-box;
}
.header-sns button img, 
.header-sns a img {
  display: block;
}

/* 📌 순서 지정 (이벤트배너 -> SNS패널 -> 공유버튼 -> 홈버튼) */
.btn-event-sns { order: 1; } 
.share-links-panel  { order: 2; } 
.btn-share-trigger { order: 3; } 
.btn-home          { order: 4; } 

/* 📌 [규격 반영] sns-event-btn.png 박스 스타일 (144x77) */
.btn-event-sns {
  flex: 0 0 152px;
  height: 77px !important; 
  display: inline-block !important; 
  position: relative;
}
.btn-event-sns img { 
  width: 144px; 
  height: 77px;
  position: relative;
  top: -15px; 
}

/* 📌 [규격 반영] 나머지 버튼 원본 규격 세팅 (64x64) */
.btn-share-trigger img { width: 64px; height: 64px; }  
.btn-home img          { width: 64px; height: 64px; }  

/* 슬라이드 패널 기본 배치 (64px 규격 맞춤) */
.share-links-panel {
  display: flex; 
  align-items: flex-start; 
  height: 64px; 
  overflow: hidden; 
  
  /* 초기 은닉 상태 */
  width: 0; 
  gap: 0; 
  margin: 0 -5px; 
  opacity: 0; 
  visibility: hidden; 
  
  /* 부드러운 슬라이딩 모션 */
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              gap 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              margin 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.25s ease, 
              visibility 0.25s;
}

/* 📌 [규격 반영] 토글 패널 내부 SNS 아이콘 원본 규격 세팅 (64x64) */
.share-links-panel a img {
  width: 64px; 
  height: 64px;
}

/* 📌 [활성화 상태]: 가로폭 208px로 열리며 밀어냄 */
.share-links-panel.is-active { 
  width: 208px;
  gap: 3px; 
  /* 📌 여기서 margin-left 값을 조절하여 왼쪽 버튼과 띄웁니다 */
  margin-left: -5px; 
  margin-top: 0; 
  opacity: 1; 
  visibility: visible; 
}

/* ==========================================================
   3. 📌 [해상도 맞춤 제어] 1920x1080 탑 안착 vs 고해상도 전체 화면 정중앙
   ========================================================== */
.intro-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* [1920x1080 이하 모니터 기준]: padding-top: 0px 완벽 고정 적용 */
  justify-content: flex-start;
  min-height: auto; 
  padding-top: 0px; 
  padding-bottom: 50px; 
}

/* [고해상도 조건부 스위칭]: 세로 화면이 1080px보다 클 때만 한 섹션이 모니터 화면을 가득 채우며 중앙 정렬 */
@media screen and (min-height: 1081px) {
  .intro-section {
    justify-content: center; 
    min-height: 100vh;       
    padding-top: 0px;        
    padding-bottom: 0px;
  }
}

/* 중앙 정렬 기준 축 */
.center-container {
  position: relative;
  width: 1300px; 
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* 본문 대단위 세로 정렬 축 */
.main-content-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 접수 카드 영역 정렬 */
.form-box-zone {
  position: relative;
  z-index: 10; 
  display: flex;
  align-items: flex-start; 
  gap: 2px;
  margin-bottom: 50px; 
}

/* 카드 공통 스타일 */
.card {
  box-sizing: border-box;
}

/* 카드 1: 사전등록 혜택 */
.card-benefit {
  position: relative !important;
  width: 535px !important;      /* 📌 강제 고정 */
  height: 614px !important;     /* 📌 강제 고정 */
  padding: 0 !important; 
  overflow: visible !important; 
  background: none !important;
  box-shadow: none !important; 
}

.card-benefit .card-content,
.card-benefit .card-content img {
  display: block !important;
  width: 535px !important;      /* 📌 강제 고정 */
  height: 614px !important;     /* 📌 강제 고정 */
  object-fit: cover !important; /* 비율 유지 */
  max-width: 535px !important;  /* 📌 500px 제한 방지 */
}

/* 카드 2: 사전등록 신청 폼 */
.card-register {
  width: 777px;       
  height: 614px;      
  background-image: url('images/register_background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; 
  border-radius: 8px;
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.5); */
  display: flex;
  flex-direction: column;
  align-items: center; 
  padding: 63px 0 30px 0; 
  box-sizing: border-box;
}

/* 타이틀 */
.card-register h3 {
  font-family: 'Noto Sans KR', sans-serif; 
  font-size: 34px; 
  color: #111111; 
  text-align: center;
  margin-bottom: 6px;
  font-weight: 900; 
  letter-spacing: -1.5px; 
  width: 100%;
}
.card-register .sub-txt {
  font-size: 14px; 
  color: #444444; 
  text-align: center;
  margin-bottom: 25px; 
  width: 100%;
  letter-spacing: -0.5px;
}

/* 인풋 행 */
.input-row { 
  display: flex; 
  margin: 0 0 25px 0; 
  width: 550px; 
}

/* 입력창 (이미지 스타일 반영) */
.input-phone { 
  width: 100%; 
  height: 84px; 
  
  /* 1. line-height를 1로 설정하여 텍스트 줄 간격을 최소화 */
  line-height: 1; 
  
  /* 2. 패딩으로 수직 중앙을 맞춥니다. 
     전체 높이(84px)에서 글자 크기(38px)를 뺀 나머지를 위아래로 나눕니다.
     padding-top을 작게 설정하면 텍스트가 위로 올라갑니다. */
  padding-top: 20px;    /* 이 값을 줄이면(예: 18px, 15px) 텍스트가 더 위로 올라갑니다 */
  padding-bottom: 26px; /* 84 - 38(글자) - 20(탑패딩) = 26px */
  padding-left: 20px;
  padding-right: 20px;
  
  /* 테두리 및 배경 설정 */
  border: 3px solid #000000;
  background-color: #ffffff;
  border-radius: 0px; 
  
  /* 텍스트 스타일 */
  color: #000000;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 38px; 
  font-weight: 700;
  text-align: center; 
  letter-spacing: 0.5px;
  box-sizing: border-box;
}

/* 플레이스홀더 텍스트 색상도 회색으로 맞춤 */
.input-phone::placeholder {
  color: #777777;
    font-size: 34px; 
}

/* 약관 동의 영역 */
.agree-zone { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  font-size: 15px; 
  color: #222222;
  width: 550px; 
  box-sizing: border-box;
}
.agree-zone label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600; 
  width: 100%;
  letter-spacing: -0.5px;
}
.agree-zone input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  
  /* 이미지 스타일 반영 */
  background-color: #ffffff;    /* 배경색 흰색으로 변경 */
  border: 2px solid #000000;    /* 검은색 테두리 추가 (두께 2px) */
  
  border-radius: 0px; 
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 0 12px 0 0; 
  flex-shrink: 0;
  box-sizing: border-box;       /* 테두리 두께가 크기에 포함되도록 설정 */
}


.agree-zone input[type="checkbox"]:checked {
  background-image: url('images/check_icon.png'); /* 이미지 경로 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px; /* 24px 박스 안에서 적당한 크기(약 75% 비율) */
}


.agree-zone .btn-link {
  color: #000000;
  text-decoration: underline;
  margin-left: auto; 
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.5px;
}

/* 모두 동의 */
.all-agree { 
  border-top: none; 
  padding-top: 14px; 
  margin-top: 6px; 
  width: 100%;
}
.all-agree label {
  font-weight: 900; 
  color: #000000;
}

/* 사전 예약하기 버튼 */
/*
.btn-submit {
  width: 360px; 
  height: 60px; 
  margin: 35px auto 0 auto; 
  background: linear-gradient(to right, #cf007c, #6b007d);
  color: #ffffff; 
  font-weight: 900; 
  border-radius: 0px; 
  box-shadow: none; 
  text-shadow: none;
  font-size: 23px; 
  letter-spacing: 1px;
  transition: opacity 0.2s ease;
}
.btn-submit:hover {
  opacity: 0.95;
}
*/
.btn-submit {
    display: block;
    width: 342px;
    height: 68px;
    margin: 40px auto 0;
    position: relative;
    left: 0;
    /* 배경 설정 추가 */
    background: url('images/btn_submit.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-image 0.3s ease;
}

.btn-submit:hover {
    background-image: url('images/btn_submit_hover.png');
}

/* 스크롤 다운 화살표 */
.btn-slide-down {
  position: relative; 
  display: block;
  margin-top: -40px; 
  margin-bottom: 80px; 
  z-index: 20;
}
.btn-slide-down img {
  display: block;
  width: 66px; 
  height: auto;
  animation: bounce 1.5s infinite; 
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); } 
}

/* ==========================================================
   4. 📌 2Chapter: 하단 이벤트 배너 영역 (요청하신 하단 250px 여백 고정)
   ========================================================== */
.event-banner-zone {
  width: 100%;          
  max-width: 1300px;    
  margin: 0 auto;       
  padding: 0;           
  display: block;
  z-index: 10;
  position: relative;
  
  /* 📌 [1920 이하 해상도]: 배너 이미지 하단에 깔끔하게 250px 공백을 주어 푸터와 분리 */
  margin-bottom: 250px; 
}

/* [고해상도 조건부 스위칭]: 대형 화면 대응 */
@media screen and (min-height: 1081px) {
  .event-banner-zone {
    display: flex;
    align-items: center;     
    justify-content: center;
    min-height: 100vh;       
    
    /* 📌 고해상도 환경에서도 스크롤 시 푸터와 안전하게 250px 간격이 벌어지도록 설정 */
    margin-bottom: 0px;
    padding-bottom: 250px; 
  }
}

.event-banner-zone img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   5. 하단 푸터 영역
   ========================================================== */
.main-footer {
  width: 100%; 
  background-color: #000000;
  padding: 90px 0;
  box-sizing: border-box;
}
.footer-inner {
  max-width: 1200px; 
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}
.footer-row { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
}
.footer-logo { 
  width: auto;  
}
/* 다른 코드는 그대로 두고, 아래 스타일만 새로 추가하거나 변경하세요 */

.footer-inner .footer-row:nth-child(1) {
  margin-top: -20px; /* 위쪽 여백을 20px만큼 바짝 당깁니다 */
}

.footer-inner .footer-row:nth-child(1) .footer-logo {
  height: 32px; 
}
.footer-inner .footer-row:nth-child(2) .footer-logo {
  height: 24px; 
}
.copyright { 
  font-size: 12px; 
  color: #555; 
  letter-spacing: 0.5px; 
}


/* ==========================================================
   6. 자세히 보기 레이어 팝업 (테두리 정밀 마감)
   ========================================================== */
.agree-layer {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); 
  z-index: 9999; 
  justify-content: center;
  align-items: center;
}

.layer-bg {
  /* 📌 이미지 원본 비율에 맞춰 박스 크기 고정 (contain 제거) */
  width: 777px; 
  height: 614px; 
  background-image: url('images/agree_layer_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* 박스를 꽉 채우도록 설정 */
  position: relative;
}

/* 📌 닫기 버튼: 테두리 중앙에 안착하도록 설정 */
.btn-layer-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  border: none !important;
  background-color: transparent !important;
  
  /* 기본 배경 이미지 */
  background-image: url('images/agree_x_btn.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* 1. HTML 내의 img 태그는 숨김 처리 유지 */
.btn-layer-close img {
  display: none !important; 
}

/* 2. [점검] 호버 시 배경 이미지 교체 */
.btn-layer-close:hover {
  /* 경로가 정확한지 다시 한번 확인해 주세요. 
     파일명 오타(예: x와 X 구분)가 있는지 확인이 필요합니다. */
  background-image: url('images/agree_x_btn_hover.png') !important;
}

/* 📌 내용 영역: 테두리 안쪽 왼쪽 정렬을 위한 패딩 조절 */
.layer-content {
  padding: 80px 60px 40px 85px; /* 💡 4번째 값(85px)을 더 키워서 왼쪽 테두리에 딱 맞춤 */
  color: #000;
  font-family: 'Noto Sans KR', sans-serif;
  box-sizing: border-box;
  text-align: left; /* 💡 텍스트 왼쪽 정렬 고정 */
}

/* 타이틀 정중앙 정렬 */
.layer-content h2 {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 30px;
  letter-spacing: -1px;
  text-align: center; /* 💡 이 한 줄이 핵심입니다 */
}

/* 소제목 스타일 */
.layer-content .section-title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 10px;
}

/* 목록 스타일 */
.layer-content ul {
  list-style: none; /* 불릿 없앰 */
  padding-left: 0;
}
.layer-content ul li {
  font-size: 14px;
  color: #222;
  line-height: 1.6;
  margin-bottom: 4px;
}
.layer-content ul li::before {
  content: '•'; /* 직접 불릿 넣음 */
  display: inline-block;
  margin-right: 6px;
}

/* 공지 텍스트 */
.layer-content .notice-txt {
  font-size: 14px;
  color: #111;
  margin-top: 15px;
  line-height: 1.6;
}


/* 1. 배경 이미지 수정 */
#sns-event-layer .layer-bg {
  background-image: url('images/share_layer_bg.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  width: 100%;
  max-width: 542px;
  margin: 0 auto;
}

/* 2. SNS 이벤트 섹션 레이아웃 */
.sns-event-section {
  width: 100%;
  /* 상, 우, 하, 좌 순서입니다. 우측에 20px을 줍니다. */
  padding: 40px 24px 40px 0px; 
  box-sizing: border-box;
  text-align: center;
}

/* 상단 제목 이미지 */
.sns-event-title { margin-top: -50px; margin-bottom: 25px; margin-left:-9px; }
/* .sns-event-title img { width: 100%; max-width: 391px; height: auto; } */
.sns-event-title img { width: 100%; width: 391px; height: auto;}

/* 안내 텍스트 영역 */
.sns-event-guide {
  margin-top: -7px;
  margin-bottom: 20px;
  text-align: center;
}
.sns-event-guide img {
  width: 100%;
  max-width: 364px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 입력 폼 및 버튼 영역 */
.sns-event-form {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 📌 입력창 사이 공백 12px -> 4px로 수정 */
  width: 100%;
  max-width: 480px; /* 📌 500px -> 480px로 20px 줄임 */
  margin: 0 auto;
}

/* 입력 필드 (너비 96% + 중앙 정렬) */
.input-field {
  width: 96%;           /* 📌 100%에서 96%로 줄임 */
  height: 40px;
  padding: 0 15px;
  margin: 0 auto;       /* 📌 자동으로 가운데 정렬 */
  background: #fff;
  border: 1px solid #aaa;
  font-size: 14px;
  box-sizing: border-box;
  display: block;       /* 📌 margin: 0 auto가 작동하도록 block으로 설정 */
}

/* 3. 등록 버튼 (256x60 크기 고정 및 중앙 정렬) */
.btn-sns-submit {
  width: 256px;
  height: 60px;
  margin: 13px auto 0 auto;
  border: none;
  cursor: pointer;
  display: block;
  
  /* 기본 이미지 설정 */
  background-image: url('../images/share_event_submit_btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  
  /* 전환 효과 (선택 사항) */
  transition: background-image 0.2s ease;
}

.btn-sns-submit img {
  width: 100%;
  height: 100%;
  display: block;
}

.btn-sns-submit:hover {
  /* 호버 시 이미지 교체 */
  background-image: url('images/share_event_submit_btn_hover.png');
}


#sns-layer-title {
  margin-top: -40px; /* 위쪽 공백 40px 제거 (위로 밀어 올림) */
  margin-bottom: 20px; /* 제목과 아래 내용 사이 간격 */
  text-align: center;
  font-size: 24px; /* 필요시 글자 크기 조정 */
}

/* 사전등록 상세보기 zoom 버튼 위치 잡기 */
/* 부모 요소인 카드를 기준점으로 잡습니다 */
.card-benefit {
  position: relative;
  display: inline-block;
  text-align: center;
}

/* 혜택 이미지 컨테이너 */
.card-content img {
  display: block;
  width: 100%;
  max-width: 500px; /* 필요에 따라 조정 */
  height: auto;
}

.btn-detail-view {
  position: absolute;
  left: 56%;
  top: 73%;
  
  /* 1. 위치 중심점 잡기 (translate 유지) */
  transform: translate(-50%, -50%); 
  
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 20;
  
  /* 2. transition에서 transform을 제거하거나 다른 방식을 씁니다 */
  transition: opacity 0.2s; 
}

/* 3. 호버 시 위치가 아닌 투명도나 그림자로 효과 변경 */
.btn-detail-view:hover {
  /* opacity: 0.8; */  /* 크기 대신 투명도로 효과 */
}

/* 만약 꼭 크기를 키우고 싶다면? */
/* transform을 유지하면서 scale을 합쳐서 써야 합니다 */
.btn-detail-view:hover {
  transform: translate(-50%, -50%) scale(1.1); /* 📌 translate와 scale을 함께 작성 > hover시 아이폰을 확대하는 기능 */
}



/* 혜택 상세보기 레이어 */
.benefit-layer {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* 1. 레이어 박스 (전체 크기 틀) */
.layer-bg-simple {
  position: relative;
  width: 934px; 
  height: 708px;
}

/* 2. 혜택 이미지 전용 스타일 (닫기 버튼과 별도) */
.benefit-main-img {
  width: 934px !important;
  height: 708px !important;
  display: block;
}

/* 1. 레이어 박스 (전체 크기 틀) */
.layer-bg-simple {
  position: relative;
  width: 934px; 
  height: 708px;
}

/* 2. 혜택 이미지 전용 스타일 (닫기 버튼과 별도) */
.benefit-main-img {
  width: 934px !important;
  height: 708px !important;
  display: block;
}

/* 3. 닫기 버튼 전용 스타일 (크기 고정) */
.benefit-layer .btn-layer-close {
  position: absolute;
  top: 0px;    
  right: 0px;  
  width: 48px !important; /* 📌 버튼 크기 강제 고정 */
  height: 48px !important; /* 📌 버튼 크기 강제 고정 */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 20;
}

/* 닫기 버튼 내부 이미지도 크기 고정 */
.benefit-layer .btn-layer-close img {
  width: 48px !important;
  height: 48px !important;
  display: block;
}


/* 사전등록 완료 레이어 시작 (S) */

/* 사전등록 완료 팝업 전용 스타일 */
.success-popup-wrap {
  width: 542px !important;  /* 이미지 가로 크기 */
  height: 636px !important; /* 이미지 세로 크기 */
  position: relative;
  background: none;
}

.success-main-img {
  width: 542px !important;
  height: 636px !important;
  display: block;
}
/* 닫기 버튼: 이미지 우측 상단 X 버튼 위치에 안착 */
#success-layer .btn-layer-close {
  position: absolute;
  top: 0px; 
  right: 0px;
  width: 48px !important; /* X 버튼 크기에 따라 조절 */
  height: 48px !important;
  z-index: 30;
  cursor: pointer;
}

/* 팝업 전체를 감싸는 컨테이너에 반드시 필요 */
.success-popup-wrap {
  position: relative; /* 필수: 이 안에서 버튼이 움직이도록 설정 */
}

.btn-sns-link {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px; 
  height: 70px; 
  display: block;
  z-index: 25; /* 팝업 내 다른 요소보다 위에 오도록 설정 */
  
  /* 이미지 설정 */
  /*
  background: url('images/share_sns_link_btn.png') no-repeat center;
  background-size: contain;
  transition: background 0.3s;
  */
}

/*
.btn-sns-link:hover {
  background-image: url('images/share_sns_link_btn_hover.png');
}
*/

/* 접근성을 위한 텍스트 숨김 처리 (기존 span 사용 시) */
.btn-sns-link span {
  display: none; 
}


/* 이벤트 베너존 돋보기 넣기 박스 세군데 */
.event-banner-zone {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
  display: block;
  z-index: 10;
  position: relative; /* 📌 이 한 줄이 핵심입니다. 돋보기 배치의 기준점 */
  margin-bottom: 250px;
}

.event-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 돋보기 버튼 공통 */
.btn-magnifier {
  position: absolute;
  width: 68px;
  height: 68px;
  background: url('images/zoom2.png') no-repeat center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 200;
}

/* 마우스 올렸을 때 확대 */
.btn-magnifier:hover {
  transform: scale(1.1); /* 1.1배 확대 */
}


/* 📌 돋보기 위치 조정 (예시값) */
.magnifier-1 { top: 550px; left: 270px; }

/* 📌 1번 레이어 (기존 유지) */
#detail-layer-1 { 
    display: none; position: fixed; z-index: 9999; background: none; pointer-events: none;
    width: 370px; height: 210px; transform: translateX(-50%);
    margin-left: -100px; margin-top: -314px; 
}

.magnifier-2 { top: 550px; left: 700px; }

/* 📌 2번 레이어 */
#detail-layer-2 { 
    display: none; position: fixed; z-index: 9999; background: none; pointer-events: none;
    width: 370px; height: 210px; transform: translateX(-50%);
    margin-left: -84px; margin-top: -310px; 
}

.magnifier-3 { top: 550px; left: 1100px; }

/* 📌 3번 레이어 */
#detail-layer-3 { 
    display: none; position: fixed; z-index: 9999; background: none; pointer-events: none;
    width: 370px; height: 210px; transform: translateX(-50%);
    margin-left: -40px; margin-top: -311px; 
}

/* 이미지 공통 클래스 */
.detail-img {
  display: block;
  width: 370px !important; 
  height: 210px !important;
  border: none;
}

.layer-content-simple {
  pointer-events: auto;
  cursor: default;
  
  /* 테두리나 배경이 있다면 여기서 제거 */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}


/* 1. 전체 중앙 정렬 (기존 코드) */
.event-banner-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

/* 2. 돋보기와 배너의 기준점 */
.banner-inner {
    position: relative; /* 돋보기의 절대 좌표 기준이 됨 */
    display: inline-block; /* 내용물 크기만큼만 가짐 */
}

/* 이벤트 기간 */
.sns-event-period{
    margin: -20px 0 25px; /* 위로 8px 당김 */
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    
}

.card-register{
    position: relative;
}

.btn-notice-img{
    position: absolute;
    right: 38px;
    bottom: 38px;
    display: block;
}

.btn-notice-img img{
    display: block;
    width: auto;   /* 이미지 원본 크기 */
    height: auto;
}

#event-notice-layer .layer-content {
    height: 500px;
    overflow-y: hidden; /* 스크롤바 강제 숨김 */
    
    /* 📌 왼쪽 여백(85px)은 원래 넓이 그대로 유지하고, 우측만 왼쪽과 똑같이 85px로 넓힙니다 */
    padding-left: 85px !important;
    padding-right: 85px !important; 
    box-sizing: border-box;
}

#event-notice-layer ul {
    padding-left: 0;
    margin: 0;
    width: 100%;
}

#event-notice-layer li {
    font-size: 11.6px;    /* 📌 우측 여백이 늘어나 가로폭이 좁아진 만큼, 하단이 잘리지 않도록 크기를 11.2px로 살짝만 더 압축했습니다 */
    line-height: 1.35;    
    margin-bottom: 3px;   /* 각 항목 줄간격을 3px로 촘촘하게 붙여 500px 안으로 넣기 */
    word-break: keep-all;
    
    /* 불릿 정렬 유지 */
    list-style-position: inside; 
    text-indent: -12px;   
    padding-left: 12px;
}