/* ===================================
   2026 평강제일교회 하계대성회
   style.css
   =================================== */

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

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111827;
  background: #ffffff;
}

/* ── 네비게이션 ── */
nav {
  background: white;
  border-bottom: 1px solid #E5E7EB;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.nav-brand {
  font-weight: 700;
  font-size: 12px;
  color: #171717;
  margin-right: auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.nav-brand i {
  font-size: 18px;
}

.nav-link {
  font-size: 13px;
  color: #6B7280;
  text-decoration: none;
  padding: 14px 10px;
  border-radius: 6px;
  font-weight: 500;
  transition: color 0.12s, background 0.12s;
  cursor: pointer;
  border: none;
  background: none;
}

.nav-link:hover {
  color: #4F46E5;
  background: #EEF2FF;
}

/* ── 히어로 배너 ── */
.hero {
  background:
    url("img/bg.png") center center / cover no-repeat;

  color: white;
  padding: 60px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/*.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
}*/

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(0,0,0,.35),
      rgba(0,0,0,.35)
    ),
    radial-gradient(
      ellipse at 30% 50%,
      rgba(255,255,255,.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(255,255,255,.06) 0%,
      transparent 50%
    );

  z-index:1;
}

.hero > * {
    position: relative;
    z-index: 2;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 14px;
  position: relative;
  word-break: keep-all;
}

.hero h1 span {
  color: #FDE68A;
}

.hero-verse {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 28px;
  line-height: 1.6;
  font-style: italic;
}

.hero-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-meta-item {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-meta-item i {
  font-size: 17px;
}

/* ── 버튼 ── */
.btn-kakao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FEE500;
  color: #191600;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s;
}

.btn-kakao:hover {
  transform: translateY(-2px);
}

.btn-kakao-big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FEE500;
  color: #191600;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-kakao-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── 공통 섹션 ── */
section {
  padding: 56px 24px;
  max-width: 720px;
  margin: 0 auto;
}

section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7C3AED;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.section-desc {
  font-size: 15px;
  color: #6B7280;
  margin-bottom: 32px;
  line-height: 1.6;
}

.divider {
  border: none;
  border-top: 1px solid #F3F4F6;
  margin: 0;
}

/* ── 안내 박스 ── */
.notice-box {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: #92400E;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.notice-box i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── 장소 ── */
.place-section {
  max-width: 960px;
  border-top: 1px solid #F3F4F6;
}

/* 지도 + 설명 가로 2블럭 */
.place-flex {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.place-map-card,
.place-info-card {
  flex: 1 1 0;
  min-width: 0;
}

.place-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}

/* 구글맵 iframe: 600x450(4:3) 비율을 유지하면서 폭에 맞춰 반응형으로 축소 */
.map-frame {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 450 / 600 */
  height: 0;
}

.map-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.place-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.place-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.place-row i {
  font-size: 18px;
  color: #7C3AED;
  flex-shrink: 0;
  margin-top: 1px;
}

.place-row span {
  color: #374151;
  line-height: 1.5;
}

.place-row span a {
  color: #4F46E5;
  font-weight: 600;
  text-decoration: underline;
}

/* ── 식사 안내 ── */
.meal-section {
  max-width: 960px;
  border-top: 1px solid #F3F4F6;
}

.meal-notice {
  margin-top: 16px;
  padding: 14px 16px;
}

/* ── 등록 ── */
.reg-block {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #ffffff; 
}

.reg-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F3F4F6;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #E5E7EB;
}

.reg-block-title i {
  font-size: 17px;
  color: #7C3AED;
}

.reg-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #F3F4F6;
  background: #ffffff;
}

.reg-row:last-child {
  border-bottom: none;
}

.reg-row-label {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
  width: 96px;
}

.reg-row-label small {
  display: block;
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 400;
}

.reg-row-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  flex: 1 1 0;
  min-width: 0;
}

/* ── 준비물 체크리스트 ── */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}

.check-item:hover {
  background: #EEF2FF;
  border-color: #C7D2FE;
}

.check-item.checked {
  background: #EEF2FF;
  border-color: #A5B4FC;
  color: #3730A3;
}

.check-box {
  width: 20px;
  height: 20px;
  border: 2px solid #D1D5DB;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}

.check-item.checked .check-box {
  background: #4F46E5;
  border-color: #4F46E5;
}

.check-item.checked .check-box::after {
  content: '✓';
  font-size: 12px;
  color: white;
  font-weight: 700;
}

#checkCount {
  font-size: 13px;
  color: #7C3AED;
  margin-top: 14px;
  font-weight: 600;
}

/* ── 일정표 ── */
.schedule-section {
  max-width: 960px;
}

/* 요일 탭: 기본(데스크톱)에서는 숨김, 표는 항상 전체 4일 표시 */
.schedule-day-tabs {
  display: none;
}

.schedule-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px;
}

.schedule-table thead tr {
  background: #1E1B4B;
  color: white;
}

.schedule-table th {
  padding: 14px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.schedule-table td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #F3F4F6;
  border-left: 1px solid #F3F4F6;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}

.schedule-table td.sch-time {
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-align: center;
  background: #F9FAFB;
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
  line-height: 1.35;
}

.sch-end {
  display: block;
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 400;
}

.sch-range {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 3px;
}

.sch-empty {
  background: #ffffff;
  color: #D1D5DB;
}

.sch-cell.cat-worship    { background: #ffffff; color: #065F46; border-left: 4px solid #34D399; }
.sch-cell.cat-redemption { background: #ffffff; color: #4C1D95; border-left: 4px solid #A78BFA; }
.sch-cell.cat-praise     { background: #ffffff; color: #0C4A6E; border-left: 4px solid #38BDF8; }
.sch-cell.cat-meal2      { background: #ffffff; color: #78350F; border-left: 4px solid #FBBF24; }
.sch-cell.cat-event      { background: #ffffff; color: #831843; border-left: 4px solid #F472B6; }
.sch-cell.cat-rest2      { background: #ffffff; color: #7C2D12; border-left: 4px solid #FB923C; }
.sch-cell.cat-prep       { background: #ffffff; color: #334155; border-left: 4px solid #94A3B8; }

/* 범례 */
.sch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.sch-tag {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
}

.sch-tag::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sch-tag.cat-worship::before    { background: #34D399; }
.sch-tag.cat-redemption::before { background: #A78BFA; }
.sch-tag.cat-praise::before     { background: #38BDF8; }
.sch-tag.cat-meal2::before      { background: #FBBF24; }
.sch-tag.cat-event::before      { background: #F472B6; }
.sch-tag.cat-rest2::before      { background: #FB923C; }
.sch-tag.cat-prep::before       { background: #94A3B8; }

/* ── 장소 및 교통 안내 / 접수 안내 : 일정표와 폭을 맞춘 섹션 ── */
.reg-section-full {
  max-width: 960px;
  border-top: 1px solid #F3F4F6;
}

/* Flexible iFrame 등, 지도 등을 폭에 맞게 자동 리사이징 */
.Flexible-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
      margin-bottom: 24px;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
} 


.place-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.place-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.place-row i {
  font-size: 18px;
  color: #7C3AED;
  flex-shrink: 0;
  margin-top: 1px;
}

.place-row span {
  color: #374151;
  line-height: 1.5;
}

.place-row span a {
  color: #4F46E5;
  font-weight: 600;
  text-decoration: underline;
}

 /* ── 기차 시간표 ── */
  .train-card {
    margin-top: 20px;
    padding: 20px;
  }

  .train-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
  }

  .train-card-title i {
    font-size: 20px;
    color: #7C3AED;
  }

  .train-year {
    font-size: 11px;
    font-weight: 700;
    color: #7C3AED;
    background: #EDE9FE;
    padding: 2px 8px;
    border-radius: 10px;
  }

  .train-flex {
    display: flex;
    gap: 20px;
  }

  .train-table-wrap {
    flex: 1 1 0;
    min-width: 0;
  }

  /* 식사 안내: 식사 메뉴표 70% / 브엘세바 판매 메뉴 30% */
  .meal-col-main {
    flex: 7 1 0;
  }

  .meal-col-side {
    flex: 3 1 0;
  }

  .train-table-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #4F46E5;
    margin-bottom: 8px;
  }

  .train-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
  }

  .train-table thead tr {
    background: #1E1B4B;
    color: white;
  }

  .train-table th {
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  }

  .train-table td {
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #F3F4F6;
    background: #ffffff;
  }

  .train-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* 모바일: 두 표를 세로로 쌓기 */
  @media (max-width: 600px) {
    .train-flex {
      flex-direction: column;
      gap: 24px;
    }
    .train-table {
      font-size: 14px;
    }
    .train-table th,
    .train-table td {
      padding: 10px 6px;
    }
  }

/* 접수 안내: 상단 안내박스와 카드 묶음 사이 여백 */
.reg-section-full .notice-box {
  margin-bottom: 24px;
}

/* 접수 안내: 좌우 두 묶음이 서로 독립적인 높이로 쌓임 */
.reg-columns {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.reg-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reg-col .reg-block {
  margin-bottom: 0;
}

/* ── Q&A 섹션 ── */
.qa-section {
  padding: 48px 24px;
  background: #ffffff;
  border-top: 1px solid #E5E7EB;
}

.qa-inner {
  max-width: 720px;
  margin: 0 auto;
}

.qa-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #DDD6FE;
  text-align: center;
}

.kakao-icon {
  width: 56px;
  height: 56px;
  background: #FEE500;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}

.qa-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.qa-desc {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.6;
  margin-bottom: 24px;
}

.qa-hours {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 14px;
}

.phone-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}

.phone-link:hover {
  color: #4F46E5;
  text-decoration: none;
}

.phone-link:visited,
.phone-link:active {
  color: inherit;
}

/* ── 푸터 ── */
footer {
  text-align: center;
  padding: 32px 24px;
  border-top: 1px solid #E5E7EB;
  font-size: 13px;
  color: #9CA3AF;
  line-height: 1.8;
}

footer strong {
  color: #4F46E5;
}

/* ── 반응형 (모바일) ── */
@media (max-width: 600px) {

  /* 장소: 모바일에서 지도/설명 세로로 쌓기 */
  .place-flex {
    flex-direction: column;
    align-items: stretch;
  }
  .place-map-card,
  .place-info-card {
    flex: none;
  }
  .place-row {
    font-size: 16px;
  }
  .place-row i {
    font-size: 22px;
  }

  /* 네비게이션 */
  nav {
    padding: 0 10px;
  }
  .nav-brand img {
    height: 32px;
    width: auto;
  }
  .nav-link {
    font-size: 14px;
    padding: 16px 9px;
    white-space: nowrap;
  }

  /* 히어로 */
  .hero {
    padding: 44px 20px 60px;
  }
  .hero-badge {
    font-size: 13px;
    padding: 6px 16px;
  }
  .hero h1 {
    font-size: 24px;
    line-height: 1.5;
  }
  .hero-verse {
    font-size: 13px;
    margin-bottom: 24px;
  }
  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
  }
  .hero-meta-item {
    font-size: 15px;
    padding: 11px 20px;
    width: 100%;
    justify-content: center;
    max-width: 300px;
  }
  .btn-kakao {
    font-size: 16px;
    padding: 16px 32px;
  }

  /* 섹션 공통 */
  section {
    padding: 44px 20px;
  }
  section h2 {
    font-size: 22px;
  }
  .section-eyebrow {
    font-size: 13px;
  }
  .section-desc {
    font-size: 16px;
  }

  /* 접수 안내: 모바일에서 카드 1열로 세로 스택 */
  .reg-columns {
    flex-direction: column;
    align-items: stretch;
  }

  /* 일정표: 모바일에서 탭으로 요일별 1개 컬럼만 표시 */
  .schedule-section { max-width: 100%; }

  .schedule-day-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
  }
  .tab-btn {
    flex: 1;
    padding: 11px 4px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: white;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.12s;
  }
  .tab-btn.active {
    background: #1E1B4B;
    color: white;
    border-color: #1E1B4B;
  }

  .schedule-table { min-width: 0; font-size: 15px; }
  .schedule-table th,
  .schedule-table td { padding: 12px 8px; font-size: 14px; }
  .schedule-table td.sch-time { font-size: 13px; }
  .sch-end, .sch-range { font-size: 11px; }

  /* 시간 칼럼은 좁게, 활성 요일 칼럼이 나머지 폭을 다 쓰도록 */
  .schedule-table-wrap colgroup col:first-child { width: 56px !important; }

  /* 활성 탭에 해당하지 않는 요일 컬럼은 폭을 0으로 접어서 숨김 */
  .schedule-table-wrap[data-active-day="1"] col.col-day:not([data-day="1"]) { width: 0 !important; }
  .schedule-table-wrap[data-active-day="2"] col.col-day:not([data-day="2"]) { width: 0 !important; }
  .schedule-table-wrap[data-active-day="3"] col.col-day:not([data-day="3"]) { width: 0 !important; }
  .schedule-table-wrap[data-active-day="4"] col.col-day:not([data-day="4"]) { width: 0 !important; }

  .schedule-table-wrap[data-active-day="1"] col.col-day[data-day="1"] { width: auto !important; }
  .schedule-table-wrap[data-active-day="2"] col.col-day[data-day="2"] { width: auto !important; }
  .schedule-table-wrap[data-active-day="3"] col.col-day[data-day="3"] { width: auto !important; }
  .schedule-table-wrap[data-active-day="4"] col.col-day[data-day="4"] { width: auto !important; }

  .schedule-table-wrap[data-active-day="1"] [data-day]:not([data-day="1"]) { display: none; }
  .schedule-table-wrap[data-active-day="2"] [data-day]:not([data-day="2"]) { display: none; }
  .schedule-table-wrap[data-active-day="3"] [data-day]:not([data-day="3"]) { display: none; }
  .schedule-table-wrap[data-active-day="4"] [data-day]:not([data-day="4"]) { display: none; }

  /* 안내박스 */
  .notice-box {
    font-size: 15px;
    padding: 16px;
  }

  /* 등록 */
  .reg-block-title {
    font-size: 15px;
    padding: 13px 16px;
  }
  .reg-row {
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
  }
  .reg-row-label {
    width: auto;
    font-size: 12px;
  }
  .reg-row-value {
    font-size: 15px;
  }

  /* Q&A */
  .qa-section {
    padding: 44px 20px;
  }
  .kakao-icon {
    width: 64px;
    height: 64px;
    font-size: 32px;
    border-radius: 18px;
  }
  .qa-title {
    font-size: 22px;
  }
  .qa-desc {
    font-size: 16px;
  }
  .btn-kakao-big {
    font-size: 17px;
    padding: 17px 36px;
    width: 100%;
    justify-content: center;
  }

  /* 푸터 */
  footer {
    font-size: 15px;
    padding: 32px 20px;
  }
}