:root{
  --fs-section: clamp(26px, 19px + 1.8vw, 42px);  
  --fs-prev-title: clamp(22px, 18.09px + 1.087vw, 32px);  
  --fs-title: clamp(18px, 17px + 0.8vw, 28px); 
  /*
  --fs-card-title: clamp(18px, 18px + 0.8vw, 26px); 
  --fs-item: clamp(18px, 18px + 0.8vw, 26px);;  
  --fs-text: clamp(17px, 17px + 0.6vw, 24px);;  
  --fs-body: clamp(16px, 16px + 0.5vw, 22px);  
  --fs-note: clamp(15px, 15px + 0.4vw, 20px); 
*/
--fs-card-title: clamp(16px, calc(14px + 0.8vw), 26px);
--fs-item:       clamp(16px, calc(14px + 0.8vw), 26px);
--fs-text:       clamp(15px, calc(14px + 0.6vw), 24px);
--fs-body:       clamp(14px, calc(14px + 0.5vw), 22px);
--fs-note:       clamp(13px, calc(13px + 0.4vw), 20px);
  
  
  --section-gap:   clamp(40px, 24px + 4vw, 72px);         /* 섹션 상하 간격 (메인·팝업 공통) */
  --block-gap:     clamp(24px, 12px + 3vw, 40px);         /* 섹션 내부 블록 간격 */
  --gutter:        clamp(20px, 4vw, 48px);                /* 좌우 여백 */
  --content-max:   920px;
}

/* --------------------------------------------------------------------------
   1. 전역: 단어 중간 줄바꿈 방지
   -------------------------------------------------------------------------- */
html{ word-break: keep-all; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   2. 폰트 크기 위계 (메인)
   -------------------------------------------------------------------------- */
.sub-title{ font-size: var(--fs-section); }
.sec_4_font1{ font-size: var(--fs-card-title); }
.event-title{ font-size: var(--fs-title); }
.event-body p,
.event-body p:last-child{ font-size: var(--fs-card-title); }
.sec_4_font2{ font-size: var(--fs-text); }
.faq-filter-btn{font-size: var(--fs-body);}
/* 유의사항 (기존 !important 덮어쓰기) */
.dot-list,
.small_txt_m{ font-size: var(--fs-text) !important; line-height: 1.65; }

/* FAQ — 768 이하에서 .8rem(12.8px)로 떨어지던 문제 포함 */
.faq-accordion .accordion-button{ font-size: var(--fs-body); }
.faq-accordion .accordion-body{ font-size: var(--fs-note); line-height: 1.7; }

/* 당첨 고객 안내 팝업 */
.guide-title{ font-size: var(--fs-card-title); }
.guide-subtitle{ font-size: var(--fs-item); }
.guide-desc,
.guide-table th,
.guide-table td,
.guide-list li{ font-size: var(--fs-body); }

.session-info strong,.qty-label strong{font-size: var(--fs-card-title) !important;}
.agree-title{font-size: var(--fs-card-title) !important;}
/* --------------------------------------------------------------------------
   3. 섹션 간격 · 태블릿 폭 (메인)
   -------------------------------------------------------------------------- */
.section-10,
.section-9,
.section-4,
.section-5{
  padding-top: var(--section-gap) !important;
  padding-bottom: var(--section-gap) !important;
}
.section-10 > .container,
.section-9 > .container,
.section-4 > .container,
.section-5 > .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: none;          /* 768~991px 에서 540px 에 머물던 컨테이너 해제 */
  width: 100%;
}

/* 섹션 제목 영역 */
.section-10 > .container > .text-center,
.section-9 > .container > .text-center,
.section-4 > .container > .text-center,
.section-5 > .container > .text-center{ margin-bottom: var(--block-gap) !important; }
.sub-title{ margin-top: 0 !important; }

/* 본문 래퍼: 좌우 여백을 폭과 무관하게 한 값으로, 콘텐츠 최대폭 고정 */
.event-wrap,
.faq-accordion,
.faq-filter-wrap,
.section-4 > .container > .cursor-point{
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
.section-4 > .container > .cursor-point{ padding-top: 0 !important; }

/* 블록 사이 간격 */
#preview-div{ padding-top: 0 !important; margin-top: var(--block-gap); }
#guide-div{ margin-top: var(--block-gap) !important; }
.btn-wrap{ padding: 0 !important; margin-top: var(--block-gap); }
.btn-wrap .gradient-btn{ margin-top: 0 !important; }
.faq-filter-wrap{ margin-bottom: var(--block-gap); }

/* --------------------------------------------------------------------------
   4. 리스트: 마커 방식(list-style) + 내어쓰기로 통일
   -------------------------------------------------------------------------- */
.dot-list,
.guide-list,
.prev_seat_notice,
.prev_schedule_notice,
.prev_ticket_notice,
.prev_location_list{
  list-style: disc outside;
  padding-left: 1.2em;      /* margin 은 건드리지 않음: 기존 위/아래 간격 유지 */
}
.dot-list li,
.guide-list li,
.prev_seat_notice li,
.prev_schedule_notice li,
.prev_ticket_notice li,
.prev_location_list li,
.accordion-body li{
  display: list-item;
  list-style: disc outside;
  position: static;
  padding-left: 0;
}
.dot-list li::before,
.prev_seat_notice li::before,
.prev_schedule_notice li::before,
.prev_ticket_notice li::before,
.prev_location_list li::before,
.accordion-body li::before{ content: none !important; }
.dot-list li::marker,
.guide-list li::marker,
.prev_seat_notice li::marker,
.prev_schedule_notice li::marker,
.prev_ticket_notice li::marker,
.prev_location_list li::marker{ color: currentColor; font-size: .9em; }
.dot-list li + li,
.prev_seat_notice li + li,
.prev_schedule_notice li + li,
.prev_ticket_notice li + li,
.prev_location_list li + li{ margin-top: .35em; }
.prev_location_list li{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. 미리보기 팝업 — 전체 화면 + 얇은 고정 헤더
   -------------------------------------------------------------------------- */
#musicalModal .modal-dialog{ max-width: none; margin: 0; }
#musicalModal .modal-content{ border: 0; border-radius: 0; background: #fff; }
#musicalModal .modal-header{
  position: sticky; top: 0; z-index: 5;
  flex: 0 0 auto;
  padding: 28px 12px 28px 16px !important;
  background: #fff;
  border-bottom: 1px solid #eee !important;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
#musicalModal .guide-title{
  padding-top: 0 !important;
  margin: 0;
  font-size: clamp(18px, calc(9px + 2.5vw), 32px);
}
#musicalModal .btn-close{ margin: 0; padding: 12px; }   /* 터치 영역 확보 */
#musicalModal .modal-body{
  display: flex; flex-direction: column; align-items: center;
  padding: 0;
  overscroll-behavior: contain;
}
#musicalModal .modal-body > div{ width: 100%; max-width: var(--content-max); }

/* --------------------------------------------------------------------------
   6. 미리보기 팝업 — 타이틀·본문 크기 통일, 섹션 간격을 메인 리듬과 일치
   -------------------------------------------------------------------------- */
.prev_chicago_title,
.prev_seat_title,
.prev_special_title,
.prev_schedule_title,
.prev_ticket_title,
.prev_location_title,
.prev_photo_title,
.prev_musical_title{ font-size: var(--fs-prev-title); line-height: 1.45; }

.prev_actor_name,
.prev_special_heading,
.prev_ticket_prepare_title,
.prev_location_heading{ font-size: var(--fs-card-title); }
.prev_actor_role,
.prev_location_subheading,
.prev_chicago_intro{ font-size: var(--fs-item); }

.prev_actor_desc,
.prev_seat_desc,
.prev_special_desc,
.prev_musical_desc,
.prev_photo_notice,
.prev_ticket_prepare_desc,
.prev_location_warning,
.prev_location_list,
.prev_event_info th, .prev_event_info td,
.prev_schedule_table th, .prev_schedule_table td,
.prev_ticket_table th, .prev_ticket_table td,
.prev_location_table th, .prev_location_table td,
.prev_cast_name{ font-size: var(--fs-body); }

.prev_seat_notice,
.prev_seat_warning,
.prev_schedule_notice,
.prev_schedule_sub,
.prev_ticket_notice,
.prev_ticket_sub,
.prev_ticket_prepare_sub,
.prev_cast_notice,
.prev_event_info .prev_sub_text{ font-size: var(--fs-note); }

/* 섹션 상하 간격 = 메인과 동일 토큰, 좌우 = --gutter */
.prev_chicago_wrap,
.prev_cast_wrap,
.prev_seat_wrap{
  padding: var(--section-gap) var(--gutter);
}
.prev_special_wrap,
.prev_schedule_wrap,
.prev_ticket_wrap,
.prev_location_wrap,
.prev_photo_wrap,
.prev_musical_wrap{
  padding: 0 var(--gutter) var(--section-gap);
}
.prev_chicago_wrap{ width: 100%; }            /* 600px 이하 calc(100% - 28px) 해제 */
.prev-wrap2{ padding-top: 0; padding-bottom: 0; }

/* 팝업 내 제목 아래 간격도 메인의 --block-gap 으로 */
.prev_seat_title,
.prev_special_title,
.prev_schedule_title,
.prev_ticket_title,
.prev_location_title,
.prev_photo_title,
.prev_musical_title{ margin-bottom: var(--block-gap); }

/* --------------------------------------------------------------------------
   7. 미리보기 표: 값 셀 좌측 정렬 (라벨 th 는 기존 유지)
   -------------------------------------------------------------------------- */
.prev_event_info td,
.prev_schedule_table td,
.prev_ticket_table td,
.prev_location_table td{ text-align: left; }
.prev_event_info td,
.prev_schedule_table td,
.prev_ticket_table td,
.prev_location_table td{ padding-left: clamp(14px, 3vw, 28px); }

/* --------------------------------------------------------------------------
   8. footer.php — 이벤트 유의사항 · 개인정보 위탁 · 저작권
   -------------------------------------------------------------------------- */
/* 글자 크기: 기존 clamp(.8rem,3vw,1.3rem) → 576px 에서 17.3px 로 본문보다 커지던 문제 해소 */
.sec-5-title{ font-size: var(--fs-item); }
.sec-5-text,
.sec-6-text{ font-size: var(--fs-note); }
.sec-5-text{ line-height: 1.7; }

/* 간격·폭: 메인과 같은 토큰 사용 (container 가 540px 에 머물던 태블릿 구간 포함) */
.section-6{
  padding-top: var(--section-gap) !important;
  padding-bottom: 0 !important;
}
.section-6 > .container,
.section-7 > .container{
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
.section-6 > .container{ padding-top: 0 !important; padding-bottom: 0 !important; }
.section-6 > .container > div{ margin-bottom: var(--block-gap) !important; }
.section-6 > .container > div:last-child{ margin-bottom: 0 !important; }
.section-6 .sec-5-title{ margin-bottom: clamp(12px, 8px + 1vw, 20px) !important; }
.section-7{ padding-top: var(--section-gap); padding-bottom: 0 !important; }
.section-7 > .container{ padding-top: 0 !important; padding-bottom: var(--section-gap) !important; }

/* 불릿: ::before 문자 방식 → list-style 마커 + 내어쓰기 (메인·팝업과 동일) */
.custom-list{ list-style: disc outside; padding-left: 1.2em !important; }   /* .ps-1 덮어쓰기 */
.custom-list li{
  display: list-item;
  list-style: disc outside;
  position: static;
  padding-left: 0;
  margin-bottom: .35em;
}
.custom-list li::before{ content: none !important; }
.custom-list li::marker{ color: currentColor; font-size: .9em; }

@media(max-width: 576px){
	 #musicalModal .modal-header{padding: 20px 12px 20px 16px !important;}
}

@media(max-width: 396px){
	 #musicalModal .modal-header{padding: 10px 12px 10px 16px !important;}
}