html:has(.event-page) { background: #000; }
html:has(.event-page) .event-page { background: #000; color: #fff; }

html:has(.event-page) .event-page .hero {
  height: 900rem;
  max-width: 1440rem;
  position: relative;
  overflow: hidden;
  background: #000;
}
html:has(.event-page) .event-page .hero::after { display: none; }
.event-page .hero .dither-art {
  width: 2675rem;
  height: 900rem;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.event-page .hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 46%, #000 100%);
  pointer-events: none;
}
html:has(.event-page) .event-page .recruit-header { z-index: 3; }
.event-page .recruit-header > a:first-child { display: flex; align-items: center; padding: 12.852rem; }
.event-page .recruit-header > a:first-child img { width: 199.548rem; height: auto; }
.event-page .contact { flex-shrink: 0; }

html:has(.event-page) .event-page .hero-copy {
  z-index: 2;
  top: 270rem;
  left: 50%;
  width: min(1050rem, 90%);
  transform: translateX(-50%);
  text-align: center;
}
html:has(.event-page) .event-page .hero-copy h1 { margin: 0; line-height: 0; }
html:has(.event-page) .event-page .hero-title-art { display: block; width: min(953rem, 100%); height: auto; margin: 0 auto; }
html:has(.event-page) .event-page .hero-copy > p {
  max-width: 674rem;
  margin: 26rem auto 0;
  color: rgba(255,255,255,.7);
  font-size: 20rem;
  font-weight: 600;
  line-height: 26.64rem;
}
html:has(.event-page) .event-page .hero-copy .apply {
  width: auto;
  height: 98rem;
  min-height: 98rem;
  padding: 0 45rem;
  margin-top: 85rem;
  white-space: nowrap;
}
.event-page .hero-budget-sticker {
  position: absolute;
  z-index: 3;
  left: calc(50% + 322rem);
  top: 412rem;
  width: 264rem;
  height: auto;
  pointer-events: none;
}

.event-page .hero-sticker {
  position: absolute;
  z-index: 2;
  width: 100rem;
  height: 100rem;
  object-fit: contain;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: event-sticker-float 5.6s ease-in-out infinite;
}
.event-page .hero-sticker.is-dragging { z-index: 4; cursor: grabbing; animation-play-state: paused; }
.event-page .hero-sticker-disco { left: 12.8%; top: 553rem; width: 92rem; height: 92rem; transform: rotate(15deg); }
.event-page .hero-sticker-love { left: 79.7%; top: 261rem; width: 102rem; height: 102rem; transform: rotate(-15deg); animation-duration: 5.1s; animation-delay: -3.4s; }
.event-page .hero-sticker-school { left: 75.5%; top: 639rem; width: 122rem; height: 122rem; transform: rotate(15deg); animation-duration: 6.4s; animation-delay: -2.1s; }
@keyframes event-sticker-float { 0%, 100% { translate: 0; rotate: -2deg; } 50% { translate: 0 -7rem; rotate: 2deg; } }
@media (hover: hover) and (pointer: fine) { .event-page .hero-sticker:hover { animation-play-state: paused; } }

html:has(.event-page) .event-page .section {
  max-width: 1440rem;
  padding: 120rem 88rem;
  margin: 0 auto;
}
html:has(.event-page) .event-page .section-title {
  min-height: 120rem;
  gap: 25rem;
  font-size: 55rem;
  line-height: 62.077rem;
  letter-spacing: .55rem;
  white-space: nowrap;
}
.event-page .section-title > img:first-child { width: 120rem; height: 120rem; object-fit: contain; }
html:has(.event-page) .event-page .section-title .heading-art { display: block; width: auto; height: auto; max-width: calc(100% - 145rem); max-height: 70rem; object-fit: contain; }
.event-page .moment-card {
  position: relative;
  width: min(724rem, 100%);
  height: 239rem;
  padding: 32rem 40rem;
  margin: 60rem auto 0;
  border: 0;
  border-radius: 45rem;
  background: linear-gradient(#c1ff33, #d7ff7d);
  color: #000;
  box-shadow: 0 4rem 2rem #0004;
}
.event-page .moment-card h3 { font-size: 32rem; line-height: 38rem; font-weight: 900; }
.event-page .moment-card .card-rule { width: 100%; height: 2rem; margin: 20rem 0; }
.event-page .moment-card p { max-width: 620rem; font-size: 24rem; line-height: 31.6rem; font-weight: 600; opacity: .6; }
.event-page .heart-sticker { position: absolute; left: -75rem; top: 112rem; width: 100rem; height: 100rem; transform: rotate(-13deg); }
.event-page .heart-sticker img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
html:has(.event-page) .event-page .campus-moments { padding-bottom: 180rem; }

.event-page .work-steps { width: min(828rem, 100%); padding: 0; margin: 90rem auto 0; display: grid; gap: 22.667rem; list-style: none; }
.event-page .work-steps li {
  position: relative;
  min-height: 100rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 15rem 48rem;
  color: #000;
  text-align: center;
  background: transparent;
  transform: rotate(1deg);
}
.event-page .work-steps li::before { content: ''; position: absolute; z-index: 0; left: -5rem; top: -5rem; width: calc(100% + 10rem); height: calc(100% + var(--art-extra, 10rem)); background: var(--step-art) center / 100% 100% no-repeat; pointer-events: none; }
.event-page .work-steps li > :not(.star-sticker) { position: relative; z-index: 1; }
.event-page .work-steps li:first-child { min-height: 114rem; border: 0; --step-art: url('/assets/event/step-orange.svg?v=no-border-1'); }
.event-page .work-steps li:nth-child(2) { --step-art: url('/assets/event/step-green.svg'); --art-extra: 14rem; transform: rotate(-1deg); }
.event-page .work-steps li:nth-child(3) { --step-art: url('/assets/event/step-pink.svg'); --art-extra: 8rem; }
.event-page .work-steps li:nth-child(4) { --step-art: url('/assets/event/step-yellow.svg'); --art-extra: 8rem; transform: rotate(-1deg); }
.event-page .work-steps strong { font-size: 24rem; line-height: 31.6rem; font-weight: 700; }
.event-page .work-steps li:first-child strong { font-size: 30rem; }
.event-page .work-steps li > span:not(.star-sticker) { font-size: 20rem; line-height: 31.6rem; font-weight: 600; opacity: .6; }
.event-page .star-sticker { position: absolute; z-index: 2; left: -40rem; top: -56rem; width: 100rem; height: 90rem; }
.event-page .star-sticker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.event-page .ways-card {
  width: min(800rem, 100%);
  padding: 32rem;
  margin: 90rem auto 0;
  border: 1rem solid #fff;
  border-radius: 45rem;
  background: linear-gradient(#fff42e, #faf379);
  color: #000;
  text-align: center;
}
.event-page .ways-card ul { padding: 24rem; margin: 0; list-style: none; border-radius: 35rem; background: #0001; }
.event-page .ways-card li { font-size: 32rem; line-height: 53rem; font-weight: 700; }
.event-page .ways-card li:not(:last-child) { margin-bottom: 12rem; }
.event-page .ways-card li::before { content: '• '; }
.event-page .ways-card p { max-width: 597rem; margin: 44rem auto 0; font-size: 26rem; line-height: 44rem; font-weight: 500; opacity: .5; }

.event-page .faq-pup { position: relative; display: block; width: 121rem; height: 120rem; flex-shrink: 0; }
.event-page .faq-pup img { position: absolute; inset: 0; width: 114rem; height: 114rem; object-fit: contain; }
.event-page .faq-pup img:last-child { transform: rotate(4.11deg); }
html:has(.event-page) .event-page .faq-list { width: min(820rem, 100%); margin: 90rem auto 0; gap: 12rem; }
html:has(.event-page) .event-page .faq { padding-bottom: 84rem; }
.event-page .faq details { border-radius: 29rem; padding: 32rem; }
.event-page .faq summary { font-size: 24rem; line-height: 31.6rem; }
.event-page .faq summary::before { width: 18rem; height: 18rem; flex-basis: 18rem; }
.event-page .faq summary::after { width: 28rem; height: 28rem; border: 0; background: url('/assets/event/59e63.svg') center / contain no-repeat; transform: rotate(-90deg); }
.event-page .faq details[open] summary::after { transform: rotate(90deg); }
.event-page .faq .answer { font-size: 24rem; line-height: 31.6rem; color: rgba(235,235,245,.6); }

html:has(.event-page) .event-page .join { position: relative; overflow: hidden; max-width: 1440rem; padding: 120rem 88rem; margin: auto; text-align: center; background: #000; }
.event-page .join .dither-art { top: 0; bottom: auto; left: 50%; width: 4283rem; height: 1484rem; transform: translateX(-50%) rotate(180deg); }
.event-page .join > :not(.dither-art) { position: relative; z-index: 1; }
html:has(.event-page) .event-page .join h2 { margin: 0; line-height: 0; -webkit-text-stroke: 0; text-shadow: none; }
html:has(.event-page) .event-page .join .footer-title-art { display: block; width: 737rem; max-width: 100%; height: auto; margin: 0 auto; }
html:has(.event-page) .event-page .join p { margin: 32rem 0 0; line-height: 0; }
html:has(.event-page) .event-page .join .footer-subtitle-art { display: block; width: 275rem; max-width: 100%; height: auto; margin: 0 auto; }
html:has(.event-page) .event-page .join .apply { width: auto; height: 98rem; min-height: 98rem; padding: 0 45rem; margin-top: 60rem; white-space: nowrap; }
.event-page .join .lineup { width: 720rem; height: 260.8rem; object-fit: contain; margin: 90rem auto 0; opacity: .95; filter: drop-shadow(0 0 32rem #a7ff1729); }
html:has(.event-page) .event-page .join { min-height: 887rem; }
html:has(.event-page) .event-page .sticky-apply { width: 340px; white-space: nowrap; font-size: 18px; }

@media (max-width: 600px) {
  html:has(.event-page) { font-size: 1px; }
  html:has(.event-page) .event-page .hero { min-height: 570px; height: auto; padding: 150px 24px 70px; }
  .event-page .hero .dither-art { width: 1200px; height: 680px; }
  .event-page .hero::before { background: linear-gradient(to bottom, transparent 35%, #000 100%); }
  html:has(.event-page) .event-page .recruit-header { height: 88px; padding: 16px; }
  .event-page .recruit-header > a:first-child { padding: 0; }
  .event-page .recruit-header > a:first-child img { width: 130px; }
  html:has(.event-page) .event-page .hero-copy { position: relative; top: auto; left: auto; width: 100%; transform: none; }
  html:has(.event-page) .event-page .hero-title-art { width: 100%; }
  html:has(.event-page) .event-page .hero-copy > p { max-width: 330px; margin: 28px auto 0; font-size: 15px; line-height: 1.5; }
  html:has(.event-page) .event-page .hero-copy .apply { min-height: 68px; height: 68px; padding: 0 24px; margin-top: 45px; font-size: 17px; }
  .event-page .hero-copy .apply img, .event-page .join .apply img { width: 24px; }
  .event-page .hero-budget-sticker { left: auto; right: 16px; top: 201px; width: 132px; height: auto; }
  .event-page .hero-sticker-disco { left: 24px; top: 440px; width: 48px; height: 48px; }
  .event-page .hero-sticker-love { left: auto; right: 18px; top: 112px; width: 48px; height: 48px; }
  .event-page .hero-sticker-school { left: auto; right: 18px; top: 490px; width: 56px; height: 56px; }
  html:has(.event-page) .event-page .section { padding: 64px 24px; }
  html:has(.event-page) .event-page .campus-moments { padding-top: 32px; }
  html:has(.event-page) .event-page .section-title { min-height: 70px; gap: 8px; font-size: clamp(25px, 7vw, 32px); line-height: 1.15; letter-spacing: 0; white-space: normal; }
  .event-page .section-title > img:first-child { width: 66px; height: 70px; }
  html:has(.event-page) .event-page .section-title .heading-art { max-width: calc(100% - 74px); max-height: 45px; }
  .event-page .moment-card { min-height: 0; padding: 28px; margin-top: 40px; border-radius: 30px; }
  .event-page .moment-card { height: auto; }
  html:has(.event-page) .event-page .campus-moments { padding-bottom: 64px; }
  .event-page .moment-card h3 { font-size: 25px; line-height: 1.2; }
  .event-page .moment-card .card-rule { margin: 16px 0; }
  .event-page .moment-card p { font-size: 17px; line-height: 1.5; }
  .event-page .heart-sticker { left: -22px; top: auto; bottom: -24px; width: 62px; height: 62px; }
  .event-page .work-steps { gap: 18px; margin-top: 44px; }
  .event-page .work-steps li { min-height: 82px; padding: 14px 18px; border-radius: 28px; }
  .event-page .work-steps li::before { display: none; }
  .event-page .work-steps li:first-child { background: #ff9843; border: 0; }
  .event-page .work-steps li:nth-child(2) { background: #4dff7b; }
  .event-page .work-steps li:nth-child(3) { background: #ff71d4; }
  .event-page .work-steps li:nth-child(4) { background: #fff42e; }
  .event-page .work-steps li:first-child { min-height: 96px; }
  .event-page .work-steps strong, .event-page .work-steps li:first-child strong { font-size: 20px; line-height: 1.2; }
  .event-page .work-steps li > span:not(.star-sticker) { font-size: 14px; line-height: 1.3; }
  .event-page .star-sticker { left: -18px; top: -28px; width: 54px; height: 60px; }
  .event-page .ways-card { padding: 22px; margin-top: 42px; border-radius: 30px; }
  .event-page .ways-card ul { padding: 18px; border-radius: 24px; }
  .event-page .ways-card li { font-size: 20px; line-height: 1.65; }
  .event-page .ways-card li:not(:last-child) { margin-bottom: 7px; }
  .event-page .ways-card p { margin-top: 24px; font-size: 16px; line-height: 1.5; }
  .event-page .faq-pup { width: 66px; height: 70px; }
  .event-page .faq-pup img { width: 66px; height: 66px; }
  html:has(.event-page) .event-page .faq-list { margin-top: 40px; }
  html:has(.event-page) .event-page .faq { padding-bottom: 64px; }
  .event-page .faq details { padding: 22px 18px; border-radius: 22px; }
  .event-page .faq summary { font-size: 16px; line-height: 1.5; }
  .event-page .faq summary::before { width: 10px; height: 10px; flex-basis: 10px; }
  .event-page .faq summary::after { width: 22px; height: 22px; }
  .event-page .faq .answer { font-size: 15px; line-height: 1.5; }
  html:has(.event-page) .event-page .join { padding: 65px 24px; }
  .event-page .join .dither-art { width: 1800px; height: 1000px; }
  html:has(.event-page) .event-page .join .footer-title-art { width: 100%; }
  html:has(.event-page) .event-page .join p { margin-top: 22px; }
  html:has(.event-page) .event-page .join .footer-subtitle-art { width: min(220px, 70%); }
  html:has(.event-page) .event-page .join { min-height: 0; }
  html:has(.event-page) .event-page .sticky-apply { width: min(310px, calc(100vw - 40px)); font-size: 15.5px; gap: 8px; padding: 0 20px; }
  html:has(.event-page) .event-page .join .apply { min-height: 68px; height: 68px; padding: 0 20px; margin-top: 35px; font-size: 17px; }
  .event-page .join .lineup { width: 100%; height: auto; margin-top: 60px; }
}