@charset "UTF-8";

/* ==========================================================================
   Main Event Page Styles (Figma 1:312 1:1 Scale)
   ========================================================================== */

/* Hero Banner */
.main-hero {
  width: 84rem;
  max-width: 100%;
  line-height: 0;
}

.main-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Challenge Intro */
.challenge-intro {
  width: 84rem;
  max-width: 100%;
  padding: 10rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.6rem;
  background-color: var(--color-bg-dark);
}

.section-divider {
  width: 84rem;
  max-width: 100%;
  height: 4.8rem;
  display: block;
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.0rem;
  padding-top: 1rem;
}

.challenge-logo {
  width: 29.9rem;
  height: 21.9rem;
  display: block;
}

.challenge-title {
  font-family: var(--font-gmarket);
  font-weight: 700;
  font-size: 6.0rem;
  line-height: 5.7rem;
  letter-spacing: -0.02em;
  color: var(--color-white);
  text-align: center;
  width: 74.6rem;
  max-width: 100%;
}

/* Events List */
.events-section {
  width: 84rem;
  max-width: 100%;
  padding: 10.0rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.0rem;
}

/* Event Card Wrap */
.event-card-wrap {
  position: relative;
  width: 76rem;
  height: 70.5rem;
}

/* Tab Badge */
.event-tab-badge {
  position: absolute;
  top: 0;
  right: 3.0rem;
  width: 11.4rem;
  height: 6.4rem;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-gmarket);
  font-weight: 700;
  font-size: 3.0rem;
  line-height: 5.7rem;
  text-align: center;
  border-radius: 2.0rem 2.0rem 0 0;
  z-index: 2;
  letter-spacing: -0.02em;
}

.event-card-wrap.locked .event-tab-badge {
  right: 2.7rem;
  width: 24.1rem;
  font-size: 2.8rem;
  line-height: 6.4rem;
}

/* Card Body */
.event-card {
  position: absolute;
  top: 6.4rem;
  left: 0;
  width: 76rem;
  height: 64.1rem;
  background: var(--color-white);
  border: 0.5rem solid var(--color-blue);
  border-radius: 2.4rem;
  padding: 3.0rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
}

/* Pill */
.event-pill {
  width: 17.0rem;
  height: 4.4rem;
  border: 0.2rem solid #101010;
  border-radius: 2.5rem;
  font-family: var(--font-gmarket);
  font-weight: 500;
  font-size: 2.4rem;
  color: #101010;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-pill.pill-finish {
  width: 14.9rem;
}

/* Texts */
.card-content-grid {
  position: relative;
  width: 100%;
}

.card-text-area {
  padding-top: 2.5rem;
  width: 100%;
  z-index: 2;
  position: relative;
}

.card-title {
  max-width: 44rem;
  font-family: var(--font-gmarket);
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 5.4rem;
  color: #101010;
  letter-spacing: -0.02em;
}

.card-subtitle {
  max-width: 44rem;
  font-family: var(--font-gmarket);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 4.8rem;
  color: var(--color-blue);
  letter-spacing: -0.02em;
  margin-top: 1.0rem;
}

.card-schedule {
  width: 100%;
  font-family: var(--font-gmarket);
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 6.0rem;
  color: #101010;
  letter-spacing: -0.02em;
  margin-top: 1.5rem;
}

.card-schedule p {
  white-space: nowrap;
}

.card-schedule span.date {
  font-weight: 300;
  color: #101010;
}

/* Absolute Product Images */
.card-product-img {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.card-img-1 {
  width: 27.2rem;
  height: 27.2rem;
  right: 2.5rem;
  top: 0;
  filter: drop-shadow(0 0.4rem 0.4rem rgba(0, 0, 0, 0.25));
}

.card-img-2 {
  width: 36.9rem;
  height: 30rem;
  right: -3.6rem;
  top: -0.6rem;
}

.card-img-3 {
  width: 35.6rem;
  height: 28.8rem;
  right: 1.5rem;
  top: -1.8rem;
  opacity: 0.8;
}

.card-img-4 {
  width: 34.3rem;
  height: 27.7rem;
  right: 2.5rem;
  top: -2.0rem;
  opacity: 0.8;
}

/* Card CTA Button */
.card-cta-btn {
  width: 100%;
  height: 10.0rem;
  background: linear-gradient(180deg, #252525 0%, #090909 100%);
  border-radius: 1.6rem;
  color: var(--color-white);
  font-family: var(--font-gmarket);
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.card-cta-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-0.2rem);
}

/* Locked Card Overlay */
.card-overlay {
  position: absolute;
  top: 6.4rem;
  left: 0;
  width: 76rem;
  height: 64.1rem;
  background: rgba(16, 16, 16, 0.8);
  border-radius: 2.4rem;
  z-index: 3;
  cursor: not-allowed;
}

/* 메인 하단 통이미지 교체 (변경사항 2609161830 #1 메인) */
.main-bottom-img {
  width: 100%;
  height: auto;
  display: block;
}
.main-bottom-ev1 {
  position: relative;
  display: block;
  width: 84rem;
  max-width: 100%;
}
.main-bottom-cta {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4.2%;
  width: auto;
}
.main-bottom-ev1.locked .card-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ── 이벤트 카드(9/23 디자인: 760 단일 baked 이미지 4장) ────────── */
.event-card-link {
  display: block;
  position: relative;
  width: 76rem;
  max-width: 100%;
  line-height: 0;
}

.event-card-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 게시창 밖(오픈 전/종료) 또는 추후 오픈 = 흐리게 */
.event-card-link.locked {
  cursor: default;
}

.event-card-link.locked .event-card-img {
  filter: grayscale(0.5) brightness(0.62);
}

.main-bottom-rest {
  width: 84rem;
  max-width: 100%;
}