/* 예배 안내 페이지 */

/* ── 예배 시간 카드 ── */
.worship-times { background: var(--bg-page); padding-block: var(--space-6) calc(var(--section-y) + var(--overlap)); }
.cards {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.card { background: var(--bg-surface); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); }
.card-time { margin-top: var(--space-2); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-desc { margin-top: var(--space-3); color: var(--text-secondary); font-size: 15px; }

/* ── 오시는 길 ── */
.location { scroll-margin-top: calc(var(--slot-gap) + var(--header-h) + 16px); }
.location-grid {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
/* 지도 상자: 지도가 뜨기 전·실패해도 같은 높이를 차지해 아래 내용이 밀리지 않게 */
.map {
  min-height: 392px; /* 지도 360 + 카카오맵 아래 막대 32 */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--border);
}
.map .root_daum_roughmap { width: 100% !important; }
.map .root_daum_roughmap .cont { display: none; } /* 지도 아래 주소·전화 칸: 오른쪽 정보와 겹쳐서 숨김 */
/* 누르기 전엔 지도가 스크롤·터치를 가로채지 않게 (아래 막대의 길찾기 링크는 그대로 동작) */
.map:not(.is-active) { cursor: pointer; }
.map:not(.is-active) .wrap_map { pointer-events: none; }
/* 내비 버튼: 지도 위, 휴대폰에서 누르기 쉽게 한 줄에 나눠 채움 */
.nav-apps { margin-bottom: var(--space-4); }
.nav-apps .lbl { color: var(--text-muted); margin-bottom: var(--space-3); }
.nav-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.nav-buttons .btn { flex: 1 1 0; min-width: 96px; padding-inline: var(--space-3); white-space: nowrap; }
.nav-buttons .btn[hidden] { display: none; }
.info-block + .info-block { margin-top: var(--space-6); }
.location-info .lbl { color: var(--text-muted); margin-bottom: 6px; }
.info-value { font-size: 20px; font-weight: 700; line-height: 1.5; }
.info-value a { text-decoration: none; }
.info-hint { margin-top: 6px; font-size: 14px; color: var(--text-secondary); }
.transport { margin-top: var(--space-8); border-top: 1px solid var(--border-strong); }

/* ── 온라인 헌금 (섹션 회색 → 패널 흰색 → 계좌 카드 회색) ── */
.offering-panel { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-12); }
.offering-desc { margin-top: var(--space-3); color: var(--text-secondary); }
.accounts { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.account { background: var(--bg-page); border-radius: var(--radius-md); padding: var(--space-6); }
.account-label { font-weight: 700; }
.account-row { margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
/* 계좌번호는 중간에 끊기지 않게, 좁은 폰(360px)에서도 카드 안에 들어오게 */
.account-bank { font-size: clamp(16px, 4.6vw, 18px); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.copy-btn {
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.075em;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
/* 손가락으로 누르기 쉽게: 보이는 크기는 36px, 누르는 영역은 44px */
.copy-btn { position: relative; }
.copy-btn::after { content: ""; position: absolute; inset: -4px; }
.copy-btn.is-done { background: var(--text-primary); color: var(--text-inverse); }
.account-holder { margin-top: var(--space-1); font-size: 14px; color: var(--text-muted); }
.account-desc { margin-top: var(--space-3); font-size: 14px; color: var(--text-secondary); }

@media (max-width: 820px) {
  .cards { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-8); }
  .location-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
  .offering-panel { padding: var(--space-8) var(--space-4); border-radius: 20px; }
  .account { padding: var(--space-5); }
  .accounts { grid-template-columns: minmax(0, 1fr); }
}