/* 이벤트 게시판 — 상태 배지·고정 CTA·핏스톱 페이지 레이아웃 (2026-09-30). 이벤트 글·events 카테고리에서만 로드 */

/* ── 상태 배지 (single-event.php 상단) ── */
.sl-event__badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; font: 600 13.5px/1.4 var(--sl-font); color: var(--sl-text-sub); }
.sl-event__state { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 999px; background: var(--sl-blue-soft, #F2F8FF); color: var(--sl-blue); }
.sl-event__state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sl-event__badge--ongoing .sl-event__state::before { animation: sl-ev-pulse 1.6s ease-in-out infinite; }
.sl-event__badge--ended .sl-event__state { background: #F1F2F5; color: var(--sl-text-sub); }
.sl-event__period, .sl-event__place { display: inline-flex; align-items: center; }
.sl-event__period::before, .sl-event__place::before { content: '·'; margin-right: 8px; color: #C5C9D3; }
.sl-event__state + .sl-event__place::before { content: none; } /* 10/1: 기간 생략 시 장소 앞 점 제거 (모바일 줄바꿈 때 점만 남는 문제) */
.sl-fit__nowrap { white-space: nowrap; }
.sl-event__endnote { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #F6F7FA; font-size: 13.5px; line-height: 1.6; color: var(--sl-text-sub); }
@keyframes sl-ev-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sl-event__badge--ongoing .sl-event__state::before { animation: none; } }

/* ── 우하단 고정 CTA (옵션 cta_fixed=1 일 때만 출력) ── */
.sl-event__cta { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 55; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 14px 22px; border-radius: 999px; background: var(--sl-blue); color: #fff; font: 700 15px/1.2 var(--sl-font); text-decoration: none; box-shadow: 0 10px 28px rgba(0, 60, 220, .28); transition: transform .2s ease, box-shadow .2s ease; }
.sl-event__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 60, 220, .34); color: #fff; text-decoration: none; }
.sl-event__cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--sl-blue); }
@media (max-width: 599px) { .sl-event__cta { right: 14px; min-height: 48px; padding: 12px 18px; font-size: 14px; } }

/* ── 이벤트 글 골격 (single-event.php) ── */
.sl-event-page { padding: 28px 0 72px; }
.sl-event-page .sl-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--sl-text-sub); margin-bottom: 14px; }
.sl-event-page .sl-crumb a { color: inherit; text-decoration: none; padding: 4px 0; }
.sl-event-page .sl-crumb a:hover { color: var(--sl-blue); }
.sl-event-page__content > * + * { margin-top: 0; }

/* ── 핏스톱 페이지 (시안 2026-09-22 기준) ── */
.sl-fit { --fit-sky: #B3E3F7; --fit-yellow: #FFF27A; --fit-soft: #E8F0FF; display: grid; gap: 28px; word-break: keep-all; }
.sl-fit__card { position: relative; background: #fff; border: 1px solid var(--sl-card-border, #E6E8EE); border-radius: 28px; padding: 40px 44px; }
.sl-fit__h2 { font: 800 30px/1.3 var(--sl-font); margin: 0; color: var(--sl-text); letter-spacing: -.01em; }
.sl-fit__h3 { font: 700 18px/1.5 var(--sl-font); margin: 0 0 10px; color: var(--sl-text); }
.sl-fit p { font-size: 16px; line-height: 1.85; margin: 0; color: var(--sl-text); }
.sl-fit__chip { display: inline-flex; align-items: center; min-height: 34px; height: auto; text-align: left; padding: 6px 16px; border-radius: 999px; background: var(--fit-soft); color: var(--sl-blue); font: 700 14px/1.3 var(--sl-font); }
.sl-fit__chip--white { background: #fff; }

/* 히어로 */
.sl-fit__hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.sl-fit__hero-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 56px 48px; background: #fff; border: 1px solid var(--sl-card-border, #E6E8EE); border-radius: 28px; overflow: hidden; }
.sl-fit__hero-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--sl-blue); }
.sl-fit__hero-card .sl-fit__chip { align-self: flex-start; }
.sl-fit__title { font: 800 46px/1.2 var(--sl-font); letter-spacing: -.02em; margin: 0; color: var(--sl-text); }
.sl-fit__lead { font-size: 18px !important; line-height: 1.7 !important; color: var(--sl-text-sub) !important; }
.sl-fit__lead strong { color: var(--sl-text); font-weight: 700; }
.sl-fit__hero-visual { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: var(--fit-sky); min-height: 100%; }
/* 10/1: 로고 잘리지 않게 cover → contain. height:100% 는 부모 높이가 불확정이면 구형 WebKit(사파리·삼성인터넷·인앱)에서 0 이 되어 이미지가 사라지므로, PC 는 절대배치, 모바일은 height:auto */
.sl-fit__hero-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }

/* 소개: [H2 | H3] 머리행 + 구분선, [부제 | 본문] 본문행, 콜아웃 전폭 */
.sl-fit__about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); column-gap: 40px; row-gap: 0; align-items: end; }
.sl-fit__about-h2, .sl-fit__about-h3 { padding-bottom: 18px; border-bottom: 1px solid var(--sl-line, #E6E8EE); margin: 0; }
.sl-fit__about-h3 { font-size: 17px; }
.sl-fit__about-sub, .sl-fit__about-body { padding-top: 20px; color: var(--sl-text-sub) !important; align-self: start; }
.sl-fit__callout { grid-column: 1 / -1; display: grid; gap: 16px; margin-top: 30px; padding: 36px 40px; border-radius: 24px; background: var(--fit-soft); }
.sl-fit__callout .sl-fit__chip { justify-self: start; }
.sl-fit__callout-lead strong { font-weight: 800; }

/* 일정 */
.sl-fit__h2--accent { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--sl-line, #E6E8EE); }
.sl-fit__accent { color: var(--sl-blue); }
.sl-fit__flag { display: inline-block; width: 150px; height: 18px; background: repeating-linear-gradient(-70deg, var(--sl-blue) 0 12px, transparent 12px 20px); mask-image: linear-gradient(90deg, #000 45%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); }
.sl-fit__where-desc { margin: 22px 0 24px !important; color: var(--sl-text-sub) !important; }
.sl-fit__map { margin: 0; border-radius: 24px; overflow: hidden; background: var(--fit-sky); }
.sl-fit__map img { display: block; width: 100%; height: auto; }
.sl-fit__stops { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sl-fit__stops li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--sl-bg-soft, #F4F6FA); font: 600 14.5px/1.5 var(--sl-font); color: var(--sl-text-sub); }
.sl-fit__stop-name { font-size: 16px; font-weight: 800; color: var(--sl-blue); }
.sl-fit__stop-date { white-space: nowrap; }
.sl-fit__stop-name small { font-size: 13px; font-weight: 600; color: var(--sl-text-sub); }

/* 미션 */
.sl-fit__mission { background: var(--fit-yellow); border-color: transparent; overflow: hidden; }
.sl-fit__wave { position: absolute; right: -40px; bottom: -40px; width: 60%; max-width: 900px; height: auto; pointer-events: none; }
.sl-fit__mission > :not(.sl-fit__wave) { position: relative; }
.sl-fit__mission-desc { margin: 12px 0 26px !important; font-size: 15px !important; }
.sl-fit__pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 80%; } /* 10/1: 줄바꿈 뒤 2줄 안에 들어가도록 70% → 80% */
.sl-fit__pills li { padding: 18px 28px; border-radius: 999px; background: #fff; font: 700 17px/1.45 var(--sl-font); color: var(--sl-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .05); }

/* 하단 CTA (시안 우하단) */
.sl-fit__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; padding: 12px 8px 0; }
.sl-fit__cta-text { font-weight: 700 !important; font-size: 18px !important; }
.sl-fit__cta-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 16px 32px; border-radius: 999px; background: var(--sl-blue); color: #fff; font: 800 19px/1.2 var(--sl-font); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.sl-fit__cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 60, 220, .28); color: #fff; text-decoration: none; }
.sl-fit__cta-btn:focus-visible { outline: 3px solid var(--sl-blue); outline-offset: 3px; }

/* ── 태블릿 ── */
@media (max-width: 1023px) {
	.sl-fit__card { padding: 32px 28px; border-radius: 24px; }
	.sl-fit__h2 { font-size: 26px; }
	.sl-fit__title { font-size: 38px; }
	.sl-fit__hero-card { padding: 40px 32px; }
	.sl-fit__about { grid-template-columns: 1fr; }
	.sl-fit__about-h2 { order: 1; } .sl-fit__about-sub { order: 2; padding-bottom: 24px; } .sl-fit__about-h3 { order: 3; } .sl-fit__about-body { order: 4; } .sl-fit__callout { order: 5; }
	.sl-fit__callout { padding: 28px 24px; }
	.sl-fit__pills { max-width: 100%; }
	.sl-fit__wave { width: 70%; opacity: .55; }
	.sl-fit__stops { grid-template-columns: 1fr 1fr; }
}
/* ── 모바일 ── */
@media (max-width: 599px) {
	.sl-fit { gap: 18px; }
	.sl-fit__card { padding: 26px 20px; border-radius: 20px; }
	.sl-fit__hero { grid-template-columns: 1fr; gap: 18px; }
	.sl-fit__hero-card { padding: 34px 22px; gap: 14px; }
	.sl-fit__title { font-size: 30px; }
	.sl-fit__lead { font-size: 16px !important; }
	/* 10/1 광고주 요청 줄바꿈은 모바일에서도 유지. 시안 원본의 소개 본문 긴 줄바꿈만 해제(요청분 .sl-fit__br-keep 은 유지) */
	.sl-fit__about-body br:not(.sl-fit__br-keep) { display: none; }
	.sl-fit__hero-visual { min-height: 0; }
	.sl-fit__hero-visual img { position: static; height: auto; }
	.sl-fit__h2 { font-size: 22px; }
	.sl-fit p { font-size: 15px; }
	.sl-fit__chip { font-size: 13px; min-height: 32px; padding: 5px 13px; }
	.sl-fit__flag { width: 90px; height: 14px; }
	.sl-fit__map { border-radius: 16px; }
	.sl-fit__stops { grid-template-columns: 1fr; }
	.sl-fit__pills li { padding: 14px 16px; border-radius: 20px; font-size: 15px; }
	.sl-fit__wave { width: 90%; opacity: .35; }
	.sl-fit__cta { justify-content: center; text-align: center; }
	.sl-fit__cta-btn { width: 100%; justify-content: center; min-height: 56px; font-size: 17px; }
}