/* [참고] 주요 색상 - 수정 시 아래 클래스들에서 함께 검색·변경
   메인블루 #00469c, 강조빨강 #cc0000/#e91e63/#d32f2f, 배경 #f9f9f9/#f2f2f2, 테두리 #eee/#e0e0e0 */

/* CSS 변수 정의 */
:root {
  --color-brown: #5d4037;
}

/* ===== 0. 공통 유틸 (이미지·여백·테이블 col) ===== */
.event-page-img-responsive {
  max-width: 100%;
}
.event-page-mt-5 { margin-top: 5px; }
.event-page-my-5 { margin: 5px 0; }
.event-page-mt-8 { margin-top: 8px; }
.event-page-col-w15 { width: 15%; }
.event-page-col-w20 { width: 20%; }
.event-page-col-w25 { width: 25%; }
.event-page-col-w35 { width: 35%; }
.event-page-col-w50 { width: 50%; }

/* ===== 1. 이벤트 페이지 네비/탭 ===== */
/* 네비게이션 스타일은 custom.css의 .sub_wrap_tab.message_table 스타일을 사용합니다 */

/* 다운로드 버튼 상단 영역 */
.event-page-top-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

/* 안내책 다운로드 버튼 */
.event-page-guide-download-btn {
  display: inline-block;
  background-color: #f5c518;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 18px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.event-page-guide-download-btn:hover {
  background-color: #e0b000;
  color: #222;
  text-decoration: none;
}

.event-page-tab-content {
  display: none;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  color: #333;
  line-height: 1.6;
}

.event-page-tab-content.active {
  display: block;
}

/* ===== 2. 세부일정 표 ===== */
.schedule-title {
  font-size: 24px;
  color: #00469c;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 5px;
}

/* 테이블 반응형 래퍼 */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 600px;
  /* 모바일에서 표가 너무 찌그러지지 않게 최소 너비 설정 */
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #eee;
  padding: 15px 10px;
  vertical-align: middle;
}

.schedule-table th {
  background-color: #f9f9f9;
  font-weight: bold;
  color: #555;
  text-align: center;
}

.schedule-table td {
  text-align: center;
  /* 기본 가운데 정렬 */
}

/* 일정 컬럼만 왼쪽 정렬 */
.schedule-table td.align-left {
  text-align: left;
  padding-left: 20px;
  font-weight: 500;
}

/* 날짜/요일 스타일 */
.day-num {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.date-text {
  font-size: 13px;
  color: #cc0000;
}

/* 뱃지 및 박스 스타일 */
.time-badge {
  display: inline-block;
  background-color: #fce4ec;
  /* 옅은 분홍 */
  color: #333;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  margin-right: 5px;
  vertical-align: middle;
}

.spot-box {
  display: block;
  background-color: #f5f0e6;
  /* 옅은 베이지 */
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 14px;
  color: #746751;
  font-weight: 500;
  border-radius: 2px;
}

.highlight-red {
  color: #8E1A1D;
  font-weight: bold;
}

.hotel-info {
  display: block;
  margin-top: 10px;
  color: #666;
}

.hotel-info strong {
  color: #333;
  font-weight: bold;
  display: inline-block;
  margin-right: 5px;
}

/* 하단 안내 문구 */
.footer-notice {
  font-size: 14px;
  color: #e91e63;
  margin-top: 15px;
  line-height: 1.8;
}

/* ===== 3. 비용안내 ===== */
.cost-section {
  margin-top: 30px;
  /* 위쪽 일정표와 간격 */
  /* border-top: 1px solid #eee; */
  padding-top: 20px;
}

.cost-title {
  font-size: 24px;
  color: #00469c;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 비용 테이블 */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: center;
}

.cost-table th {
  background-color: #f9f9f9;
  padding: 15px 0;
  border: 1px solid #ececec;
  font-weight: bold;
  color: #555;
  text-align: center;
}

.cost-table td {
  padding: 15px 10px;
  border: 1px solid #ececec;
  vertical-align: middle;
  color: #333;
}

.cost-price {
  font-weight: bold;
  font-size: 16px;
}

.cost-remark-text {
  color: #e91e63;
  /* 핑크색 텍스트 */
  font-size: 13px;
  text-align: left;
  line-height: 1.6;
  display: inline-block;
}

/* 포함/불포함 박스 */
.inc-exc-box {
  display: flex;
  border: 1px solid #ececec;
  border-top: 0;
  margin-bottom: 20px;
}

.inc-exc-col {
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  background-color: #F9F9F9;
}

.inc-exc-col:first-child {
  border-right: 1px solid #ececec;
}

.ie-badge {
  display: inline-block;
  padding: 6px 25px;
  border-radius: 50px;
  color: white;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
}

.badge-blue {
  background-color: #00469c;
}

/* 파란색 */
.badge-dark {
  background-color: #152d50;
}

/* 짙은 남색 */

.ie-content {
  display: inline-block;
  line-height: 1.6;
  font-size: 16px;
  text-align: center;
}

/* 계좌 정보 박스 */
.bank-info-box {
  background-color: #fff0f5;
  /* 연한 핑크 배경 */
  padding: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

.bank-label {
  color: #00469c;
  margin-right: 10px;
}

/* 하단 유의사항 텍스트 */
.note-list {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
}

.note-item {
  margin-bottom: 16px;
}

.note-pink {
  color: #e91e63;
}

.note-title {
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
  word-break: break-all;
}

.cost-cell-emphasis {
  font-weight: bold;
  color: #d32f2f;
}
.cost-cell-remark {
  text-align: left;
  padding-left: 20px;
}
.cost-subtext {
  font-size: 13px;
  font-weight: normal;
}

/* ===== 4. 일본 순교지 정보 ===== */

/* 섹션 구분 */
.event-section {
  margin-bottom: 100px;
}

.event-section:last-child {
  margin-bottom: 0;
}

/* 공통 타이틀 스타일 (세로바 포함) */
.info-section-title {
  border-left: 5px solid var(--color-brown);
  /* 갈색 톤 */
  padding-left: 15px;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-brown);
  margin-bottom: 20px;
  line-height: 1.2;
}

/* 1. 선교 역사 테이블 */
#section-history {
    margin-top: 60px;
}

.history-intro {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ececec;
  font-size: 16px;
}

.history-table td {
  padding: 8px 20px;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
}

.history-table td.h-year {
  vertical-align: middle;
}

.h-year {
  background-color: #f7f7f7;
  font-weight: bold;
  color: #666;
  width: 120px;
  text-align: center;
  border-right: 1px solid #ececec;
  vertical-align: middle;
}

.h-desc {
  padding-left: 20px;
  line-height: 1.6;
}

/* 2. 지역 소개 리스트 */
.location-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#section-region-intro .location-item {
  align-items: center;
}

#section-region-intro .location-item {
    padding-bottom: 0;
}

.location-item {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #ececec;
  padding-bottom: 16px;
}

/* 순교지 순례 지역소개(나가사키시·히라도시·오무라시·고토시)는 border-bottom 제거 */
.location-list.region-intro .location-item {
  border-bottom: none;
}

/* 이미지 영역 (공간 확보) */
.loc-img-box {
  width: 200px;
  height: 150px;
  background-color: #e0e0e0;
  flex-shrink: 0;
  margin-right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  overflow: hidden;
}

.loc-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 비율 유지하며 꽉 채움 */
  display: block;
}

/* 텍스트 영역 */
.loc-text-box {
  flex: 1;
}

.loc-title {
  color: #00469c;
  font-size: 24px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 4px;
}

.loc-desc {
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
}

.location-item--text-only .loc-text-box {
  flex: 1;
}

/* --- 모바일 (768px) --- */
@media (max-width: 768px) {
    .event-page-top-bar {
        justify-content: center;
        margin-bottom: 8px;
    }

    .event-page-guide-download-btn {
        font-size: 13px;
        padding: 8px 12px;
    }

    .sub_wrap_tab.message_table ul li a {
        height: 50px;
        padding: 0 5px;
        line-height: 1.3;
    } 

    .schedule-title {
        font-size: 20px;
    }
     
    .event-section {
        margin-bottom: 50px;
    }

    .schedule-table, .hotel-info, .hotel-info strong  {
        font-size: 14px;
    }

    .inc-exc-col {
        padding: 20px 10px;
    }

    .ie-badge {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .ie-content {
        line-height: 1.5;
        font-size: 14px;
    }

    .inc-exc-box {
        flex-direction: column;
        margin-bottom: 10px;
      }
    
      .inc-exc-col:first-child {
        border-right: none;
        border-bottom: 1px solid #eee;
      }
    
      .cost-table th,
      .cost-table td {
        font-size: 13px;
        padding: 10px 5px;
      }

    .info-section-title {
        font-size: 20px;
        padding-left: 8px;
    }

    .history-table {
        font-size: 14px;
    }

    .history-table td {
        padding: 5px 10px;
    }

    .loc-title {
        font-size: 18px;
        text-align: center;
    }

    .loc-desc {
        font-size: 14px;
        text-align: center;
    }

    .h-year {
        width: 90px;
        font-size: 14px;
        padding: 10px 5px;
    }

    .location-item {
        flex-direction: column;
    }

    .loc-img-box {
        width: 100%;
        height: 200px;
        margin-right: 0;
        margin-bottom: 15px;
    }

    #section-history {
        margin-top: 30px;
    }
}