/* Detail page layout */
.detail-page {
  align-items: center;
  gap: 100px;
}

/* .detail-content is the container-query context (reference width
   668px), and .detail-stack is the descendant that actually reads
   --u — a container can't use cqw on its own box, so the frame/stack
   split mirrors .card-frame/.card in style.css. Every measurement
   inside, including .detail-stack's own section gap, shrinks in
   lockstep with the viewport instead of reflowing at breakpoints.
   Columns never merge — they just scale down together. */
.detail-content {
  width: 668px;
  max-width: 100%;
  container-type: inline-size;
}

.detail-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(80 * var(--u));
  --u: calc(100cqw / 668);
}

.detail-stack > section,
.detail-stack > button {
  width: 100%;
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin-bottom: calc(24 * var(--u));
}

.section-eyebrow {
  font-size: calc(18 * var(--u));
  font-weight: 500;
  font-family: 'Pretendard', sans-serif;
}

.section-title {
  font-size: calc(30 * var(--u));
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;
}

.section-desc {
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  font-family: 'Pretendard', sans-serif;
  margin-bottom: calc(40 * var(--u));
}

.highlight {
  color: #f0660d;
}

.highlight-strong {
  color: #f0660d;
  font-weight: 700;
  text-decoration: underline;
}

.underline-strong {
  font-weight: 600;
  text-decoration: underline;
}

/* Intro */
.intro {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.intro-media {
  width: 100%;
}

.intro-media img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(40 * var(--u));
}

.intro-heading {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.intro-eyebrow {
  font-size: calc(18 * var(--u));
}

.intro-title {
  font-size: calc(30 * var(--u));
}

.intro-body {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  width: 100%;
}

.intro-lead {
  font-size: calc(24 * var(--u));
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
}

.intro-desc {
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  font-family: 'Pretendard', sans-serif;
}

.intro-desc p {
  margin-bottom: calc(10 * var(--u));
}

/* CTA Button */
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: calc(200 * var(--u));
  height: calc(73 * var(--u));
  font-size: calc(18 * var(--u));
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  cursor: pointer;
}

/* Brief box */
.brief-box {
  background: #fafafa;
  padding: calc(40 * var(--u));
  font-size: calc(18 * var(--u));
  font-family: 'Pretendard', sans-serif;
  line-height: calc(26 * var(--u));
}

.brief-box p {
  margin-bottom: calc(10 * var(--u));
}

.brief-box p:last-child {
  margin-bottom: 0;
}

.note-center {
  font-size: calc(14 * var(--u));
  text-align: center;
  opacity: 0.6;
  font-family: 'Pretendard', sans-serif;
  margin-top: calc(14 * var(--u));
}

/* Youtube */
.youtube-block {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.youtube-title {
  font-size: calc(24 * var(--u));
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.tour-frame {
  width: 100%;
  background: #000000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  padding: calc(40 * var(--u)) 0;
}

.video-embed {
  position: relative;
  width: calc(296 * var(--u));
  max-width: 45%;
  aspect-ratio: 296 / 166;
  cursor: pointer;
  background: #000000;
  overflow: hidden;
}

.video-embed .video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: none;
  cursor: pointer;
}

.play-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 56%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(14 * var(--u));
  border-color: transparent transparent transparent #ffffff;
}

.video-embed:hover .play-button {
  background: rgba(240, 102, 13, 0.85);
}

.caption-right {
  font-size: calc(14 * var(--u));
  opacity: 0.6;
  text-align: right;
  font-family: 'Pretendard', sans-serif;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: calc(14 * var(--u));
  opacity: 0.6;
  font-family: 'Pretendard', sans-serif;
}

/* Event info table */
.event-info {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
}

.info-row {
  display: flex;
  gap: calc(40 * var(--u));
  align-items: baseline;
}

.info-label {
  font-weight: 700;
  font-size: calc(20 * var(--u));
  flex-shrink: 0;
  width: calc(140 * var(--u));
  font-family: 'Pretendard', sans-serif;
}

.info-value {
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
  font-family: 'Pretendard', sans-serif;
}

.info-value strong {
  font-weight: 700;
}

.venue-main {
  font-size: calc(18 * var(--u));
}

.venue-sub {
  font-size: calc(14 * var(--u));
  margin-top: calc(6 * var(--u));
}

.venue-note {
  font-size: calc(12 * var(--u));
  line-height: calc(16.8 * var(--u));
  margin-top: calc(10 * var(--u));
}

.info-value .ticket-note {
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  opacity: 0.7;
  margin-top: calc(6 * var(--u));
  margin-bottom: 0;
}

.ticket-note + .ticket-note {
  margin-top: 0;
}

/* Q&A */
.qna {
  display: flex;
  flex-direction: column;
}

.qna-title {
  font-size: calc(30 * var(--u));
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: calc(16 * var(--u));
}

.qna-list {
  font-size: calc(17 * var(--u));
  font-family: 'Pretendard', sans-serif;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-bottom: calc(40 * var(--u));
}

.qna-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1919 / 1248;
  overflow: hidden;
  margin-bottom: calc(14 * var(--u));
}

.qna-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qna-caption {
  display: flex;
  justify-content: space-between;
  font-size: calc(14 * var(--u));
  color: #6b6b6b;
  font-family: 'Pretendard', sans-serif;
}

/* Timeline — two fixed-ratio columns, always side by side */
.timeline-table {
  display: flex;
  gap: calc(24 * var(--u));
  align-items: flex-start;
}

.timeline-col {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.time-col {
  width: calc(207 * var(--u));
}

.program-col {
  width: calc(437 * var(--u));
  flex: 1;
}

.col-header {
  font-weight: 700;
  font-size: calc(18 * var(--u));
  text-align: center;
  font-family: 'Pretendard', sans-serif;
}

.col-divider {
  height: 1px;
  background: #000000;
  width: 100%;
}

.time-list, .program-list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  width: 100%;
}

.time-row {
  height: calc(58 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #000000;
  font-size: calc(18 * var(--u));
  line-height: calc(25 * var(--u));
  font-family: 'Pretendard', sans-serif;
}

.program-row {
  min-height: calc(58 * var(--u));
  display: flex;
  align-items: center;
  background: #fafafa;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(25 * var(--u));
  font-family: 'Pretendard', sans-serif;
}

.program-row.tall {
  min-height: calc(124 * var(--u));
}

.program-row.half-tall {
  min-height: calc(91 * var(--u));
}

.program-row.stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(2 * var(--u));
}

.gift-row {
  gap: calc(10 * var(--u));
}

.gift-label {
  font-size: calc(18 * var(--u));
}

.gift-desc {
  font-size: calc(14 * var(--u));
}

.timeline-footnote {
  font-size: calc(14 * var(--u));
  color: #6b6b6b;
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  margin-top: calc(14 * var(--u));
}

/* Recruit 2 */
.recruit2-lead {
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  font-family: 'Pretendard', sans-serif;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-bottom: calc(40 * var(--u));
}

.benefits-box {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.benefits-text p {
  line-height: calc(30 * var(--u));
}

.benefits-3 {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.benefits-3-heading {
  font-size: calc(18 * var(--u));
  line-height: calc(30 * var(--u));
}

.os-name {
  font-size: calc(14 * var(--u));
  margin-left: calc(8 * var(--u));
}

.benefits-3-list {
  list-style: disc;
  padding-left: calc(21 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(24 * var(--u));
}

.recruit2-closing {
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  font-family: 'Pretendard', sans-serif;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-top: calc(40 * var(--u));
}

/* Sponsor logos */
.sponsor-heading {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  font-family: 'Pretendard', sans-serif;
  margin-bottom: calc(40 * var(--u));
}

.logo-wall-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Sponsor host / official */
.host-logo {
  height: calc(26 * var(--u));
  width: auto;
}

.official-image {
  width: 100%;
  display: block;
  object-fit: cover;
  margin-bottom: calc(14 * var(--u));
}

.official-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(14 * var(--u));
  color: #6b6b6b;
  font-family: 'Pretendard', sans-serif;
}

.caption-brand {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.caption-brand img {
  height: calc(18 * var(--u));
  width: auto;
}

/* POC */
.poc-heading {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  font-family: 'Pretendard', sans-serif;
  margin-bottom: calc(24 * var(--u));
}

.poc-box {
  background: #fafafa;
  padding: calc(40 * var(--u)) calc(178 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  text-align: center;
  font-family: 'Pretendard', sans-serif;
}

.poc-name {
  font-size: calc(18 * var(--u));
  font-weight: 500;
}

.poc-contact {
  font-size: calc(18 * var(--u));
}

/* Participants */
.participants {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
}

.participant-group h4 {
  font-size: calc(24 * var(--u));
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: calc(16 * var(--u));
}

.participant-group.mc p,
.judge-list p {
  font-size: calc(20 * var(--u));
  font-family: 'Pretendard', sans-serif;
  line-height: calc(30 * var(--u));
}

.member-category {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  margin-bottom: calc(24 * var(--u));
}

.member-category:last-child {
  margin-bottom: 0;
}

.category-label {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;
  color: #6b6b6b;
}

.category-list {
  font-size: calc(16 * var(--u));
  line-height: calc(26 * var(--u));
  font-family: 'Pretendard', sans-serif;
  color: #231f20;
}

/* Notice */
.notice-heading {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  font-family: 'Pretendard', sans-serif;
  margin-bottom: calc(40 * var(--u));
}

.notice-list {
  list-style: disc;
  padding-left: calc(21 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.6;
  opacity: 0.8;
  font-family: 'Pretendard', sans-serif;
}

.notice-list li {
  margin-bottom: calc(6 * var(--u));
}

.notice-list li:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .logo-wall {
    display: none;
  }
}