@charset "utf-8";

/* ============================================================
   2026 우리 모모콘 — 웰컴 페이지
   MO : 800px  고정 (mo-bg.webp  800 × 1433 / 하단 133px 잘라 씀)
   PC : 1920px 고정 (pc-bg.webp 1920 × 1587 / 하단  87px 잘라 씀)
   분기 : ~1919px MO(가운데 정렬) / 1920px~ PC
   ※ 반응형 스케일 없음. 전부 px 고정.

   [배치 방식]
   .visual 은 flex column. 위→아래로 자연스럽게 흐르고 세로 간격은 margin-top.
   맨 아래 그룹은 .visual__date 의 margin-top:auto 로 바닥에 붙인다.
   .visual__top 은 MO에서 display:contents 로 풀려 자식이 .visual 의 직계
   flex item 이 되고(order 로 순서 지정), PC에서는 실제 flex row 가 되어
   [일시 | 타이틀+응모기간 | 장소] 를 한 줄에 배치한다.
   ============================================================ */

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body, h1, h2, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
img { border: 0; vertical-align: top; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- base ---------- */
body {
  /* footer(#1d191b)와 같은 색이면 800px 밖 여백까지 footer 처럼 이어져 보인다.
     .wrap 경계가 드러나야 하므로 반드시 다른 색으로 둔다 */
  background: #1d191b;
  color: #fff;
  font-family: var(--font-base);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

.wrap {
  width: 800px;
  margin: 0 auto;
}

/* 내용이 화면보다 클 때 .visual 이 찌그러지지 않게 */
.visual,
.footer { flex: none; }

/* 창이 시안 폭(800)보다 좁아지는 구간.
   min-width 를 풀고, 아래 스크립트가 .wrap 에 zoom 을 걸어 통째로 축소한다.
   (모바일은 viewport 메타가 처리하므로 데스크톱 창을 줄인 경우가 대상) */
@media (max-width: 799px) {
  body { min-width: 0; }
}

/* ============================================================
   KEY VISUAL
   ============================================================ */
.visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  height: 1300px;
  padding: 100px 0 12px;
  background: #b7a2c9 url("../images/mo-bg.webp") no-repeat center top;
}

/* MO : 래퍼를 없애서 자식들이 .visual 의 flex item 이 되게 한다 */
.visual__top { display: contents; }

/* MO 순서 : 타이틀 → 응모기간 → 카드 → 일시 → 장소 → 시간 */
.visual__headline { order: 1; }
.visual__links    { order: 2; }
.visual__date     { order: 3; }
.visual__place    { order: 4; }
.visual__time     { order: 5; }

/* 타이틀 + 응모기간 */
.visual__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.visual__title { width: 402px; }
.visual__title img { width: 100%; }

.visual__period {

  margin-top: 17px;
  font-family: var(--font-point);
  font-weight: 600;
  font-size: 26.45px;
  line-height: 1.55;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 바로가기 카드 */
.visual__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}

.visual__links li { width: 486px; }
.visual__links li + li { margin-top: 20px; }

.card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 2px solid #2c3ba0;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.639);
  backdrop-filter: blur(6px);
  box-shadow: 14.849px 14.849px 22.8px 1.2px rgba(101, 101, 101, 0.51);
}

.card__icon {
  flex: none;
  width: 97px;
}

.card__icon img { width: 100%; }

.card__body {
  flex: 1 1 auto;
  text-align: center;
}

.card__label {
  display: block;
  font-family: var(--font-point);
  font-weight: 600;
  font-size: 26px;
  color: #1b2a8f;
}

.card__btn {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 29px 8px;
  border-radius: 50px;
  background: #1b2a8f;
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
}

.card__btn span { color: #6cecf7; }

.card__arrow {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1b2a8f;
}

.card__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-65%, -50%) rotate(45deg);
}

/* ---------- 일시 / 장소 / 시간 (하단 그룹) ---------- */
/* margin-top:auto 로 카드와 사이를 벌려 하단에 붙인다 */
.visual__date {
  width: 406px;
  height: 42px;
  margin-top: auto;
  background: url("../images/visual_date.webp") no-repeat 0 0;
}

.visual__place {
  margin-top: 20px;
  font-family: var(--font-point);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
}

.visual__time {
  font-family: var(--font-point);
  font-weight: 300;
  text-align: center;
}

.visual__time .text-bold { font-weight: 600; }

.visual__time .time {
  display: flex;
  justify-content: center;
  font-size: 22px;
  line-height: 1.5;
}

.visual__time .time li + li::before {
  content: "|";
  margin: 0 9px;
  opacity: 0.55;
}

.visual__time .enter {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 20px;
  line-height: 1.5;
}

.visual__time .enter .text-bold { margin-right: 5px; }

/* 시간 사이에만 구분자. 앞의 '공연장 입장' 뒤에는 붙지 않게 한다 */
.visual__time .enter span:not(.text-bold) + span:not(.text-bold)::before {
  content: "|";
  margin: 0 7px;
  opacity: 0.55;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  display: flex;
  justify-content: center;
  padding: 30px 0 32px;
  background: #1d191b;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__logo { width: 129px; }
.footer__logo img { width: 100%; }

.footer__copy {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.65;
  color: #c8c8c8;
  text-align: center;
}

.footer__copy a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   PC — 1920px ~
   ============================================================ */
@media (min-width: 1920px) {
  .wrap {
    width: 100%;
    max-width: 1920px;
  }

  /* ---------- key visual ---------- */
  .visual {
    width: 100%;
    height: 1481px;
    padding: 111px 0 59px;
    background-image: url("../images/pc-bg.webp");
  }

  /* 래퍼를 살려서 [일시 | 타이틀 | 장소] 한 줄로 */
  .visual__top {
    display: flex;
    align-items: flex-start; /* 위쪽 기준. 세로 위치는 각자 margin-top 으로 */
    justify-content: space-between;
    width: 100%;
  }

  /* 좌우 박스 폭(margin 포함)을 같게 둬야 가운데 타이틀이 화면 중앙에 온다.
     128 + 406 = 534 = 오른쪽 .visual__place 폭 */
  .visual__date {
    order: 1;
    flex: none;
    margin: 79px 0 0 128px;
  }

  .visual__headline {
    order: 2;
    flex: 1 1 auto;
  }

  .visual__place {
    order: 3;
    flex: none;
    width: 534px;
    padding-right: 125px;
    margin-top: 89px;
    text-align: right;
  }

  .visual__title { width: 565px; }

  .visual__period {

    margin-top: 36px;
    font-size: 33px;
    line-height: 1.6;
    color: #fff;
  }

  /* ---------- 카드 ---------- */
  .visual__links { margin-top: 42px; }
  .visual__links li { width: 700px; }
  .visual__links li + li { margin-top: 40px; }

  .card {
    gap: 24px;
    padding: 19px 26px;
    border-width: 3px;
    border-radius: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .card:hover { transform: translateY(-4px); }

  .card__icon { width: 147px; }
  .card__label { font-size: 34px; }

  .card__btn {
    margin-top: 14px;
    padding: 10px 40px 11px;
    font-size: 32px;
  }

  .card__arrow {
    width: 40px;
    height: 40px;
  }

  .card__arrow::before {
    width: 10px;
    height: 10px;
    border-top-width: 3px;
    border-right-width: 3px;
  }

  /* ---------- 시간 안내는 좌측 하단 ---------- */
  .visual__time {
    align-self: flex-start;
    margin-top: auto;
    margin-left: 60px;
    text-align: left;
  }

  .visual__time .time {
    display: block;
    font-size: 31px;
  }

  .visual__time .time li + li::before { content: none; }

  .visual__time .enter {
    margin-top: 12px;
    padding-top: 12px;
    font-size: 22px;
  }

  /* ---------- footer ---------- */
  .footer {
    align-items: center;
    height: 150px;
    padding: 0;
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    width: 1260px;
  }

  .footer__logo {
    order: 2;
    width: 118px;
  }

  .footer__copy {
    order: 1;
    margin-top: 0;
    font-size: 17px;
    line-height: 1.7;
    text-align: left;
  }
}