.modal {
    z-index: 9999;
}
.modal-backdrop {
    z-index: 9998;
}

/* ===============================
   1. 전체 섹션
================================ */
.info-section {
	position: relative;
	overflow: hidden;
	min-height: 340px;
}

/* ===============================
   2. 배경 이미지 (좌우 이동) 이미지 애니메이션 담당
================================ */
.info-section .bg-image {
	position: absolute;
	inset: -40px; /* ★ 핵심 */
	animation: bgMove 20s linear infinite alternate;
	z-index: 0;
}

/* 좌우 이동 */
@keyframes bgMove {
	from { transform: translateX(30px); }
	to   { transform: translateX(-30px); }
}

/* ===============================
   3. 배경 흐림 레이어
================================ */
.info-section .bg-blur {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.4);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	z-index: 1;
}

/* ===============================
   4. 콘텐츠 영역
================================ */
.info-section .container {
	position: relative;
	z-index: 2;
}

/* ===============================
   5. 카드 공통
================================ */
.info-box {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 제목 */
.info-title {
	text-align: center;
	margin-bottom: 15px;
	font-weight: 600;
}

/* 전화번호 */
.info-phone {
	text-align: center;
	font-weight: 700;
	margin-bottom: 15px;
}

/* 한 줄 */
.info-line {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

/* 뱃지 */
.info-badge {
	background: var(--primary);
	color: #fff;
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 0.8rem;
	min-width: 70px;
	text-align: center;
}

.info-badge.wide {
	min-width: 80px;
}

.info-cont-size {
	font-size: 0.95rem;
}

/* 안내 문구 */
.info-note {
	margin-top: auto;
	text-align: center;
	color: #555;
}

/* ===============================
   6. 모바일 최적화
================================ */
@media (max-width: 768px) {
	.info-section .bg-image {
		animation: none;
	}
	.info-section .bg-blur {
		backdrop-filter: blur(1px);
	}
}

.slogan-box {
  background:
    repeating-linear-gradient(
      45deg,
      #F3EFE6,
      #F3EFE6 10px,
      #EFE9DB 10px,
      #EFE9DB 20px
    );
  color: #053170;
  padding: 22px 16px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  border-top: 6px solid #053170;
  border-bottom: 4px solid #D8C9A3;
}


.category-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 10px;
	font-size: 0.8rem;
	border-radius: 20px;
	color: #fff;
	font-weight: 600;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 색상 구분 */
.cate-all {
	background: #6c757d;
}

.cate-child {
	background: #0d6efd;
}

.cate-teen {
	background: #198754;
}

.cate-youth {
	background: #dc3545;
}

.service-item a.h5 {
	display: -webkit-box;
	-webkit-line-clamp: 2;   /* 최대 2줄 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

.service-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.service-img {
	position: relative;
}

.service-img img {
	height: 460px;              /* ★ 이미지 높이 고정 */
	object-fit: cover;
}

.service-item .rounded-bottom {
	flex: 1;                    /* ★ 하단 영역 늘림 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px !important;
}

/* ================= 공통 ================= */
.cp-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* 상단 포인트 라인 */
.cp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #053170 0%,
    #053170 40%,
    #d63a3a 100%
  );
}

/* ================= 헤더 ================= */
.cp-header {
  padding: 20px 26px 14px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #053170;
  background: transparent;
  border-bottom: none;
}

/* 헤더 하단 짧은 선 */
.cp-header::after {
  content: '';
  display: block;
  margin-top: 10px;
  width: 36px;
  height: 2px;
  background: #d63a3a;
}

/* + 버튼 */
.cp-plus {
  color: #d63a3a;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

/* ================= 공지사항 ================= */
.cp-notice-list {
  padding-bottom: 6px;
}

.cp-notice-item {
  position: relative;
  padding: 16px 90px 16px 46px;
  line-height: 1.45;
  background: #fff;
}

.cp-notice-item + .cp-notice-item {
  border-top: 1px dashed #eee;
}

/* 왼쪽 포인트 바 */
.cp-bar {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: #d63a3a;
  border-radius: 2px;
}

/* NEW */
.cp-new {
  background: #d63a3a;
  font-size: 0.7rem;
  margin-right: 6px;
}

/* 제목 */
.cp-notice-title {
  font-size: .95rem;
  font-weight: 600;
  color: #053170;
  text-decoration: none;
}

.cp-notice-item:hover {
  background: #fafafa;
}

.cp-notice-item:hover .cp-notice-title {
  color: #d63a3a;
}

/* 날짜 */
.cp-date {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  background: #053170;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  opacity: 0;
  transition: 0.2s;
}

.cp-notice-item:hover .cp-date {
  opacity: 1;
}

/* ================= 행사 ================= */
.cp-event-card {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafbff 100%
  );
}

.cp-event-info {
  padding-right: 10px;
}

.cp-event-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}

.cp-event-desc {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

/* 신청 버튼 */
.cp-btn-apply {
  background: #d63a3a;
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
}

/* ======================================================
   공지사항 카드(왼쪽 첫 카드) 강제 타겟
   - 그라데이션 헤더
   - 오른쪽 '-' 제거(요소/가상요소 모두)
   - '+' 오른쪽 정렬 + hover 회전
====================================================== */

/* 1) 공지사항 카드 자체를 정확히 잡기: "공지사항" 헤더가 있는 카드 */
.card:has(.card-header):has(.list-group) .card-header {
  /* 혹시 다른 카드도 잡힐 수 있어 공지 전용으로 아래에서 더 좁힙니다 */
}

/* 2) 공지사항 헤더에 그라데이션 강제 적용
   - 헤더 텍스트가 "공지사항"인 경우까지 좁히기 위해 :has() + :is() 사용 */
.card:has(.list-group) .card-header:has(:is(a,span,div)) {
  /* 일단 기본값 */
}

.card:has(.list-group) .card-header {
  background: linear-gradient(135deg, #053170 0%, #0a3d91 60%, #d63a3a 100%) !important;
  color: #fff !important;
  padding: 22px 26px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  position: relative !important;
}

/* 헤더 안의 글자/링크/아이콘 흰색 고정 */
.card:has(.list-group) .card-header * {
  color: #fff !important;
}

/* 3) 오른쪽 '-' 제거: (1) 가상요소로 그린 경우 */
.card:has(.list-group) .card-header::after,
.card:has(.list-group) .card-header::before {
  content: none !important;
  display: none !important;
}

/* 3-2) 오른쪽 '-'가 실제 요소(span/div 등)로 있는 경우:
        ' - ' 또는 길이 1~2인 선 표시 요소를 광범위하게 숨김 */
.card:has(.list-group) .card-header .minus,
.card:has(.list-group) .card-header .line,
.card:has(.list-group) .card-header .hr,
.card:has(.list-group) .card-header .dash,
.card:has(.list-group) .card-header .toggle,
.card:has(.list-group) .card-header [class*="minus"],
.card:has(.list-group) .card-header [class*="line"],
.card:has(.list-group) .card-header [class*="dash"],
.card:has(.list-group) .card-header [class*="hr"] {
  display: none !important;
}

/* 3-3) 혹시 '-'가 텍스트로 박혀있는 경우를 대비해
        헤더 안에 있는 마지막 짧은 요소를 숨김(+, 제목 제외) */
.card:has(.list-group) .card-header > *:last-child:not(a):not(.cp-plus):not(.plus) {
  display: none !important;
}

/* 4) + 버튼을 오른쪽으로 보내고 hover 회전
   - 클래스가 cp-plus / plus / 또는 a태그로 들어온 경우까지 커버 */
.card:has(.list-group) .card-header .cp-plus,
.card:has(.list-group) .card-header .plus,
.card:has(.list-group) .card-header a.cp-plus,
.card:has(.list-group) .card-header a.plus {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.35s ease, opacity 0.2s ease !important;
  opacity: 0.95 !important;
}

.card:has(.list-group) .card-header:hover .cp-plus,
.card:has(.list-group) .card-header:hover .plus,
.card:has(.list-group) .card-header:hover a.cp-plus,
.card:has(.list-group) .card-header:hover a.plus {
  transform: translateY(-50%) rotate(180deg) !important;
  opacity: 1 !important;
}


/* ======================================================
   본당 행사 신청 버튼 깨짐 방지
====================================================== */

/* 행사 카드 body가 flex일 경우 대비 */
.cp-event-card .card-body,
.card .card-body {
  align-items: flex-start; /* 세로 중앙 정렬 해제 */
}

/* 신청 버튼 고정 */
.cp-btn-apply,
.card .btn-apply,
.card .btn-danger {

  flex-shrink: 0;           /* 압축 금지 */
  align-self: center;       /* 버튼만 세로 중앙 */
  
  min-width: 64px;          /* 최소 가로 */
  height: 36px;             /* 높이 고정 */
  padding: 0 16px;          /* 좌우 여백 */

  border-radius: 999px;     /* pill 버튼 */
  line-height: 36px;        /* 세로 중앙 텍스트 */
  white-space: nowrap;      /* 줄바꿈 방지 */

  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.today-schedule-box {
	padding: 0;
}

.today-schedule-list {
	padding: 12px 18px 16px 18px;
}

.today-schedule-item {
	display: flex;
	gap: 10px;
	padding: 14px 0;
	border-bottom: 1px solid #f1f3f5;
}

.today-schedule-item:last-child {
	border-bottom: 0;
}

.today-schedule-time {
	min-width: 45px;
	font-size: 0.8rem;
	font-weight: 800;
	color: #0d6efd;
	letter-spacing: -0.5px;
}

.today-schedule-name {
	font-size: 0.85rem;
	font-weight: 600;
	color: #333333;
	line-height: 1.4;
	letter-spacing: -0.7px;
}

.today-schedule-empty {
	color: #777777;
	font-size: 0.95rem;
	padding: 8px 0;
}