* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #222;
	background: #f8f9fa;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---- Header ---- */
.site-header {
	background: #fff;
	border-bottom: 1px solid #eee;
	padding: 18px 0;
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header .inner {
	max-width: 1200px; margin: 0 auto; padding: 0 20px;
	display: flex; align-items: center; justify-content: space-between;
}
.site-header .logo {
	font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
	color: #1a1a1a;
}
.site-header .logo span { color: #e13a3a; }
.site-header nav { font-size: 14px; color: #666; }

/* ---- Hero Slider ---- */
.hero {
	max-width: 1200px; margin: 30px auto 0; padding: 0 20px;
}
.hero .swiper {
	width: 100%; aspect-ratio: 3 / 1; max-height: 320px;
	border-radius: 12px; overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero .swiper-slide img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero .swiper-slide.no-banner {
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 28px; font-weight: 700; letter-spacing: -1px;
}
.swiper-pagination-bullet-active { background: #fff !important; }
.swiper-button-prev, .swiper-button-next { color: #fff !important; }

/* ---- Events Section ---- */
.events {
	max-width: 1200px; margin: 50px auto 60px; padding: 0 20px;
}
.section-title {
	font-size: 20px; font-weight: 600; letter-spacing: -1px;
	margin: 0 0 20px; color: #1a1a1a;
}
.section-title small {
	font-size: 14px; font-weight: 500; color: #999;
	margin-left: 10px;
}

/* ---- PC Grid ---- */
.event-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.event-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: transform 0.15s, box-shadow 0.15s;
}
.event-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.event-poster {
	width: 100%; aspect-ratio: 3.5 / 4.5; background: #eee;
	position: relative; overflow: hidden;
}
.event-poster img { width: 100%; height: 100%; object-fit: cover; }
.event-poster .no-poster {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
	color: #fff; font-size: 20px; font-weight: 700; padding: 20px; text-align: center;
}
.event-body { padding: 14px 14px 16px; }
.event-title {
	font-size: 15px; font-weight: 700; color: #1a1a1a;
	line-height: 1.35; margin: 0 0 6px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.event-meta { font-size: 12.5px; color: #6c757d; line-height: 1.5; }
.event-meta .venue { margin-bottom: 2px; }
.event-btns {
	display: flex; gap: 6px; margin-top: 12px;
}
.event-btns a {
	flex: 1; text-align: center;
	padding: 8px 4px; border-radius: 6px;
	font-size: 13px; font-weight: 600;
	border: 1px solid transparent;
}
.event-btns .btn-register {
	background: #e13a3a; color: #fff;
}
.event-btns .btn-register:hover { background: #c82c2c; }
.event-btns .btn-home {
	background: #fff; color: #333; border-color: #ccc;
}
.event-btns .btn-home:hover { background: #f5f5f5; }
.event-btns .btn-disabled {
	background: #f0f0f0; color: #aaa; cursor: not-allowed;
}

/* ---- Empty State ---- */
.empty-state {
	text-align: center; padding: 60px 20px; color: #999;
	background: #fff; border-radius: 10px;
}

/* ---- Footer ---- */
.site-footer {
	background: #22242a; color: #999;
	padding: 30px 20px; font-size: 13px;
	text-align: center; line-height: 1.7;
}
.site-footer strong { color: #ddd; }

/* ============================================================ */
/* Mobile (~768px) */
/* ============================================================ */
@media (max-width: 768px) {
	.site-header { padding: 14px 0; }
	.site-header .logo { font-size: 18px; }
	.hero { margin-top: 16px; padding: 0 12px; }
	.hero .swiper { border-radius: 8px; aspect-ratio: 16 / 9; }
	.events { margin: 30px auto 40px; padding: 0 12px; }
	.section-title { font-size: 20px; margin-bottom: 16px; }

	/* 리스트 뷰로 전환 */
	.event-grid {
		display: flex; flex-direction: column; gap: 0;
		background: #fff; border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	}
	.event-card {
		display: grid;
		grid-template-columns: 40px 100px 1fr;
		gap: 12px;
		align-items: center;
		padding: 14px 14px;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid #f0f0f0;
		transform: none;
	}
	.event-card:last-child { border-bottom: none; }
	.event-card:hover { transform: none; box-shadow: none; }
	.event-rank {
		font-size: 22px; font-weight: 800; color: #1a1a1a;
		text-align: center;
	}
	.event-poster {
		aspect-ratio: 3 / 4; width: 100px; border-radius: 6px;
	}
	.event-body { padding: 0; }
	.event-title { font-size: 14px; }
	.event-meta { font-size: 12px; }
	.event-btns { margin-top: 8px; }
	.event-btns a { padding: 6px 4px; font-size: 12px; }
}

/* ============================================================ */
/* Tablet */
/* ============================================================ */
@media (min-width: 769px) and (max-width: 1023px) {
	.event-grid { grid-template-columns: repeat(3, 1fr); }
	.event-rank { display: none; }
}
@media (min-width: 1024px) {
	.event-rank { display: none; }
}

	.landing-footer {
  --bs-footer-text: #fff;
  --bs-footer-bottom-text: #d3d4dc;
  --bs-footer-bottom-bg: #282c3e;
  --bs-footer-top-bg: #241d31
}

.landing-footer .footer-link,.landing-footer .footer-text {
  color: var(--bs-footer-text);
  opacity: .78
}

.landing-footer .footer-title {
  color: var(--bs-footer-text);
  opacity: .92
}

.landing-footer .footer-bottom-text {
  color: var(--bs-footer-bottom-text)
}

.landing-footer .footer-bottom {
  background-color: #f5f5f9;
}

.landing-footer .footer-link {
  transition: all .2s ease-in-out
}

.landing-footer .footer-link:hover {
  opacity: 1
}

.landing-footer .footer-top {
  padding-block:3.3rem 2.3rem;border-top-left-radius: 3.75rem;
  border-top-right-radius: 3.75rem
}

@media(max-width: 767.98px) {
  .landing-footer .footer-top {
    padding-block:3rem;
    padding-inline:0}
}

.landing-footer .footer-top .footer-bg {
  object-position: center
}

@media(min-width: 992px) {
  .landing-footer .footer-logo-description {
    max-inline-size:385px;
	font-size:0.8125rem;
	font-weight:400;
  }
}

.landing-footer .footer-form {
  max-inline-size: 22.25rem
}

.landing-footer .footer-form input {
  background-color: rgba(0,0,0,0);
  color: var(--bs-footer-text)
}

.landing-footer .footer-form input,.landing-footer .footer-form input:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, #e6e6f1 22%, #2b2c40)
}

.landing-footer .footer-form input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 .125rem .25rem color-mix(in srgb, var(--bs-primary) 0.1, #2b2c40)
}

.landing-footer .footer-form input::placeholder {
  color: rgba(var(--bs-white-rgb), 0.5)
}

.landing-footer .footer-form label {
  color: #d5d5e2
}
.banner-bg-img {
  position: absolute;
  block-size: 100%;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  object-fit: cover;
  object-position: left
}

.section-title-img {
  block-size: 100%;
  inline-size: 120%;
  inset-block-start: 10px;
  inset-inline-start: -12%
}