/*
 * 이벤트 메인 — 2026-10-29 Figma «07.Event» wide_new_1600 / 768 / 360(3026:2803 · 2952 · 3095).
 *   2026-10-31 갱신(3052:5562 · 5712 · 5810) — 히어로 · 행사별 버튼 색(--evf-btn) · 04 단계 카드.
 *   폭: PC 본문 1000 · 768 판 490 · 360 판 306(좌우 27).
 *   행사 블록 = 대표 이미지(2) : 곁 칸(1) — 곁 칸 = 곁 이미지 · 문구(정사각 자리) · «상담 문의»(맨 아래).
 *   수식자 --reverse(04, 곁 칸이 왼쪽) · --wide(05, 한 줄) · --tall(06·07, 대표 이미지 653×1078) · --trip(03, 모바일 곁 이미지 + 문구 나란히).
 */

/* 2026-11-10 앱 CSS 정리 — 화면 전체(`*`·`html`·`body`·`[hidden]`·버튼) 규칙은 `app/base.css`·`globals.css` 로 옮기거나 이 화면으로 범위를 좁혔다.
   (앱 이동은 앞 화면 CSS 를 지우지 않아 다른 화면에 걸렸다.) ⚠️ 시안 `final/` 에서 이 파일을 다시 가져오면 이 부분을 다시 정리할 것. */

.evf-page {
  min-width: 320px;
  background: #fff;
  font-family: var(--font-family-base, 'Noto Sans KR', sans-serif);
}

.evf-main h1,
.evf-main h2,
.evf-main h3,
.evf-main p {
  margin: 0;
}

.evf-main img {
  display: block;
}

.evf-only-mo,
.evf-steps-mo {
  display: none;
}

/* ── 히어로 ─────────────────────────────
   2026-10-31 Figma hero(3052:5564 · 5714 · 5812): 1280 가운데 · 사진(675:900) | 제목 칸 = 반반, 아래 1px 선.
   제목 칸 = 빈칸 1 : 로고 2(오른쪽 붙음 · 세로 가운데). 로고 = «MYWEDDINGSTORY EVENT» 줄 + «MWS» + ® (8fr : 1fr, 간격 4 · 줄 사이 8). */

.evf-hero {
  display: grid;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--semantic-input-border, #cbcbcb);
}

.evf-hero__visual {
  overflow: hidden;
  aspect-ratio: 675 / 900;
}

.evf-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evf-hero__tit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.evf-main .evf-hero__title {
  display: flex;
  grid-column: 2;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.evf-hero__logo-line {
  width: calc((100% - 4px) * 8 / 9);
  height: auto;
}

.evf-hero__logo-mws {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 1fr);
  gap: 4px;
}

.evf-hero__logo-mws img {
  width: 100%;
  height: auto;
}

/* ── 행사 블록 ─────────────────────────── */

.evf-event {
  display: flex;
  justify-content: center;
  padding: 80px 20px;
  background: #fff;
}

.evf-event--mint { background: var(--color-brand-primary-light, #c0ede9); }
.evf-event--lime { background: #f3fdd6; }
.evf-event--aqua { background: #f0fefd; }
.evf-event--cream { background: #fff9f4; }

.evf-event__inner {
  display: flex;
  width: 100%;
  max-width: 1000px;
  flex-direction: column;
  gap: 40px;
}

.evf-event__label {
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.evf-event__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}

.evf-event--reverse .evf-event__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.evf-event--reverse .evf-event__main {
  grid-column: 2;
  grid-row: 1;
}

.evf-event--reverse .evf-event__side {
  grid-column: 1;
  grid-row: 1;
}

.evf-event__main {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
}

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

.evf-event--tall .evf-event__main {
  aspect-ratio: 653 / 1078;
}

/* 2026-11-05 Figma 07(1539:5192) — 그림 칸 653×1178(06 은 1078 그대로). 1078 이면 위아래가 잘린다 */
.evf-event--e07 .evf-event__main {
  aspect-ratio: 653 / 1178;
}

/* 2026-11-06 Figma 04(1587:9531) — 그림 칸 653×1025. 비율이 없으면 곁 칸 높이로 늘어 위(MWS 머리)가 잘렸다 */
.evf-event--e04 .evf-event__main {
  aspect-ratio: 653 / 1025;
}

.evf-event__side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.evf-event__body,
.evf-event__subs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evf-event__sub {
  overflow: hidden;
  background: #fff;
}

.evf-event__sub img {
  width: 100%;
  height: 100%;
}

.evf-event__sub--contain img { object-fit: contain; }
.evf-event__sub--cover img { object-fit: cover; }
.evf-event__sub--frame { border: 10px solid #fff; }
.evf-event__sub--frame img { object-fit: cover; }

/* 곁 이미지 자리 — Figma PC 크기 */
.evf-event--mint .evf-event__sub { aspect-ratio: 1; }
.evf-event--e02 .evf-event__sub { aspect-ratio: 327 / 253; }
.evf-event--trip .evf-event__sub { aspect-ratio: 327 / 607; }
.evf-event--reverse .evf-event__sub { aspect-ratio: 327 / 648; } /* 2026-11-05 단계 카드 새 그림(Figma 1559:6703 327×648 — 글 가운데 · 아이콘 없음, 예전 327×769) */
.evf-event--reverse .evf-event__text { aspect-ratio: auto; min-height: 174px; }
.evf-event--e06 .evf-event__sub { aspect-ratio: 327 / 385; }
.evf-event--cream .evf-event__sub:first-child { aspect-ratio: 327 / 266; }
.evf-event--cream .evf-event__sub:last-child { aspect-ratio: 327 / 246; }
.evf-event--cream .evf-event__sub img { width: 92%; height: 86%; margin: 7% auto 0; }

.evf-event__text {
  display: flex;
  aspect-ratio: 1;
  flex-direction: column;
  gap: 10px;
  color: #444;
}

.evf-event__text h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.evf-event__text p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.evf-event__button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--evf-btn, #1a1a1a);
  border-radius: 8px;
  background: var(--evf-btn, #1a1a1a);
  color: var(--evf-btn-text, #fff); /* 2026-11-05 행사별 글자색(05 검정) */
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
}

/* 05 — 한 줄 */
.evf-event--wide .evf-event__grid {
  grid-template-columns: minmax(0, 1fr);
}

.evf-event--wide .evf-event__main {
  aspect-ratio: 1000 / 613;
}

.evf-event--wide .evf-event__side {
  gap: 20px;
}

.evf-event--wide .evf-event__body {
  min-height: 138px;
}

.evf-event--wide .evf-event__text {
  aspect-ratio: auto;
  text-align: center;
}

/* ── 768 판(768~1023) ──────────────────── */
@media (max-width: 1023px) {
  .evf-event {
    padding: 64px 20px;
  }

  .evf-event__inner {
    max-width: 490px;
    gap: 20px;
  }

  .evf-event__label {
    font-size: 16px;
    line-height: 22px;
  }

  .evf-event__text h3 {
    font-size: 14px;
    line-height: 20px;
  }

  .evf-event__text p {
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
  }

  .evf-event__button {
    height: 32px;
    font-size: 12px;
    line-height: 16px;
  }

  .evf-event--wide .evf-event__body {
    min-height: 0;
  }

  .evf-hero {
    padding-right: 20px;
  }

  /* Figma 768 판 자리 */
  .evf-event--wide .evf-event__main { aspect-ratio: 490 / 275; }
  .evf-event--e06 .evf-event__main { aspect-ratio: 313 / 496; }
  .evf-event--e07 .evf-event__main { aspect-ratio: 313 / 601; }
  .evf-event--cream .evf-event__sub:first-child { aspect-ratio: 157 / 143; }
  .evf-event--cream .evf-event__sub:last-child { aspect-ratio: 157 / 134; }
  .evf-event--reverse .evf-event__text { min-height: 0; }
  .evf-event--reverse .evf-event__sub { aspect-ratio: 157 / 300; } /* 2026-11-05 Figma 768 1559:6803 */
  .evf-event--e04 .evf-event__main { aspect-ratio: 313 / 488; }
}

/* ── 360 판(≤767) ──────────────────────── */
@media (max-width: 767px) {
  .evf-only-pc,
  .evf-br-pc {
    display: none;
  }

  .evf-only-mo {
    display: inline;
  }

  .evf-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

  .evf-hero__tit {
    padding: 40px 20px 80px;
  }

  /* 04 — 모바일은 곁 그림 대신 «How to Enter» 묶음(Figma 3052:6005: 제목 그림 · 안내 · 단계 카드 4) */
  .evf-event--e04 .evf-event__subs {
    display: none;
  }

  .evf-steps-mo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .evf-steps-mo__head {
    width: 100%;
    max-width: 306px;
    height: auto;
  }

  .evf-steps-mo p {
    color: rgba(34, 34, 34, 0.8);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .evf-steps-mo__cards {
    width: calc(100% + 14px); /* Figma 320 — 카드 그림자까지 본문(306)보다 넓다 */
    max-width: none;
    height: auto;
  }

  .evf-event {
    padding: 40px 27px;
  }

  .evf-event__inner {
    max-width: none;
    gap: 10px;
  }

  .evf-event__label {
    font-size: 14px;
    line-height: 20px;
  }

  .evf-event__grid,
  .evf-event--reverse .evf-event__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .evf-event--reverse .evf-event__main,
  .evf-event--reverse .evf-event__side {
    grid-column: 1;
    grid-row: auto;
  }

  .evf-event__main,
  .evf-event--tall .evf-event__main {
    aspect-ratio: auto;
  }

  .evf-event__side {
    justify-content: flex-start;
    gap: 30px;
  }

  .evf-event__body,
  .evf-event__subs {
    gap: 10px;
  }

  .evf-event__text {
    aspect-ratio: auto;
  }

  .evf-event__text h3 {
    font-size: 12px;
    line-height: 16px;
  }

  .evf-event__button {
    border-radius: 6px;
  }

  /* Figma 360 판 대표 이미지 높이(폭 306 기준) */
  .evf-event--mint .evf-event__main { aspect-ratio: 306 / 495; }
  .evf-event--e02 .evf-event__main { aspect-ratio: 306 / 433; }
  .evf-event--trip .evf-event__main { aspect-ratio: 306 / 514; } /* 2026-11-06 Figma 1587:10015 */
  .evf-event--reverse .evf-event__main { aspect-ratio: 653 / 1018; }
  .evf-event--wide .evf-event__main { aspect-ratio: 1644 / 835; }
  .evf-event--e06 .evf-event__main { aspect-ratio: 1027 / 1618; }
  .evf-event--cream .evf-event__main { aspect-ratio: 306 / 601; }

  .evf-event--mint .evf-event__sub { aspect-ratio: 306 / 137; }
  .evf-event--mint .evf-event__sub--contain img { object-fit: cover; }
  .evf-event--e02 .evf-event__sub { aspect-ratio: 306 / 365; }
  .evf-event--cream .evf-event__sub:first-child { aspect-ratio: 306 / 252; }
  .evf-event--cream .evf-event__sub:last-child { aspect-ratio: 306 / 262; }
  .evf-event--cream .evf-event__sub img { width: 100%; height: 100%; margin: 0; object-fit: cover; }

  .evf-event--trip .evf-event__body {
    flex-direction: row;
  }

  .evf-event--trip .evf-event__subs {
    flex: none;
    width: 141px;
  }

  .evf-event--trip .evf-event__sub {
    aspect-ratio: 141 / 262;
  }

  .evf-event--trip .evf-event__text {
    flex: 1 1 0;
    min-width: 0;
  }

  .evf-event--trip .evf-event__text h3,
  .evf-event--reverse .evf-event__text h3,
  .evf-event--cream .evf-event__text h3 {
    font-size: 14px;
    line-height: 20px;
  }

  .evf-event--reverse .evf-event__side {
    gap: 20px;
  }

  .evf-event--wide .evf-event__body {
    min-height: 0;
  }

  .evf-event--e04 .evf-event__main { aspect-ratio: 306 / 498; }
  .evf-event--e04 .evf-event__text { min-height: 78px; }
  .evf-event--wide .evf-event__main { aspect-ratio: 306 / 169; }
  .evf-event--wide .evf-event__side,
  .evf-event--e06 .evf-event__side,
  .evf-event--e07 .evf-event__side { gap: 20px; }
  .evf-event--e06 .evf-event__grid { gap: 30px; }
  .evf-event--e06 .evf-event__main { aspect-ratio: 306 / 496; }
  .evf-event--e06 .evf-event__sub { aspect-ratio: 306 / 360; }
  .evf-event--e07 .evf-event__body { gap: 20px; }
  .evf-event--e06 .evf-event__text { min-height: 58px; }
  .evf-event--e07 .evf-event__text { min-height: 70px; }
  .evf-event--e07 .evf-event__text p { font-size: 14px; font-weight: 500; line-height: 20px; }
}

/* 2026-11-03 Figma(1365:5664·5912) — 03 드림 트립 대표 그림이 길어졌다(PC 653×1010 → 1098 · 모바일 306×523 → 487) */
@media (min-width: 1024px) {
  .evf-event--trip .evf-event__main { aspect-ratio: 653 / 1098; }
}
@media (max-width: 767px) {
  .evf-event--trip .evf-event__main { aspect-ratio: 306 / 487; }
}

/* ── 2026-11-04 Figma «07.Event» wide_new_360(1523:5044) — 모바일 이벤트 홈 새 판 ──
   그림 = 360 판 그대로 내보낸 것(대표 `ev0N-main-mo` · 곁 `-sub*-mo` · 04 단계 `ev04-steps-mo.jpg` 306×520) → 비율은 그림 자신을 따른다.
   글 = 가운데 · 제목 16/22 굵게 · 설명 14/20 · #444. 이벤트 번호 14/20(02·03 은 12/16 — Figma 그대로). 버튼 높이 32. */
@media (max-width: 767px) {
  /* 그림 칸 = 360 판 그림 비율(지연 로딩 전에도 자리를 잡는다) */
  .evf-event .evf-event__main img,
  .evf-event .evf-event__sub img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }
  .evf-event .evf-event__sub { position: relative; }
  .evf-event--e01 .evf-event__main { aspect-ratio: 306 / 495; }
  .evf-event--e01 .evf-event__sub { aspect-ratio: 306 / 137; }
  .evf-event--e02 .evf-event__main { aspect-ratio: 306 / 433; }
  .evf-event--e02 .evf-event__sub { aspect-ratio: 306 / 375; }
  .evf-event--e03 .evf-event__main { aspect-ratio: 306 / 557; }
  .evf-event--e03 .evf-event__sub { aspect-ratio: 141 / 262; }
  .evf-event--e04 .evf-event__main { aspect-ratio: 306 / 512; }
  .evf-event--e05 .evf-event__main { aspect-ratio: 306 / 260; }
  .evf-event--e06 .evf-event__main { aspect-ratio: 306 / 467; }
  .evf-event--e06 .evf-event__sub { aspect-ratio: 306 / 360; }
  .evf-event--e07 .evf-event__main { aspect-ratio: 306 / 644; }
  .evf-event--e07 .evf-event__sub:first-child { aspect-ratio: 306 / 252; }
  .evf-event--e07 .evf-event__sub:last-child { aspect-ratio: 306 / 250; }
  /* 360 판 그림은 흰 틀·바탕까지 그려져 있다 — 앱 쪽 틀(01 기프트몰 10px)은 뺀다 */
  .evf-event .evf-event__sub,
  .evf-event .evf-event__sub--frame { border: 0; background: none; }
  .evf-event__text h3,
  .evf-event__text p { word-break: keep-all; }
  .evf-event--e02 .evf-event__label,
  .evf-event--trip .evf-event__label {
    font-size: 12px;
    line-height: 16px;
  }

  .evf-event__side { gap: 30px; }
  .evf-event__body,
  .evf-event__subs { gap: 10px; }

  .evf-event__text,
  .evf-event--e04 .evf-event__text,
  .evf-event--e06 .evf-event__text,
  .evf-event--e07 .evf-event__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    color: #444;
    text-align: center;
  }
  .evf-event--mint .evf-event__text,
  .evf-event--e02 .evf-event__text { gap: 4px; }
  .evf-event__text h3,
  .evf-event--trip .evf-event__text h3,
  .evf-event--reverse .evf-event__text h3,
  .evf-event--cream .evf-event__text h3 {
    margin: 0;
    color: #444;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
  }
  .evf-event__text p,
  .evf-event--e07 .evf-event__text p {
    margin: 0;
    color: #444;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }
  .evf-event__button {
    height: 32px;
    min-height: 0;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 20px;
  }

  /* 02 — 대표 그림 아래 10 · 곁 그림(2×2) · 글 · 버튼 사이 10 */
  .evf-event--e02 .evf-event__side { gap: 10px; }

  /* 03 — 곁 그림 141 + 글(아래 정렬 · 왼쪽) */
  .evf-event--trip .evf-event__body { flex-direction: row; gap: 10px; }
  .evf-event--trip .evf-event__subs { flex: none; width: 141px; }
  .evf-event--trip .evf-event__text { justify-content: flex-end; gap: 6px; text-align: left; }

  /* 04 — 대표 → 20 → How to Eanter(197×44) · 안내(12/16) · 카드 그림 → 글(250) · 버튼(250) */
  .evf-event--e04 .evf-event__grid { gap: 20px; }
  .evf-event--e04 .evf-event__side { align-items: center; gap: 20px; }
  .evf-event--e04 .evf-event__body { align-items: center; gap: 20px; }
  .evf-steps-mo { gap: 20px; }
  .evf-steps-mo__head { width: 197px; max-width: none; }
  .evf-steps-mo p { font-size: 12px; line-height: 16px; }
  .evf-steps-mo__cards { width: 100%; }
  .evf-event--e04 .evf-event__text { width: 252px; }
  .evf-event--e04 .evf-event__text p { font-size: 11px; line-height: 14px; }
  .evf-event--e04 .evf-event__button { width: 250px; align-self: center; border-radius: 8px; }

  /* 05 — 대표 → 10 → 글 → 20 → 버튼(250 가운데) */
  .evf-event--wide .evf-event__side { align-items: center; gap: 20px; }
  .evf-event--wide .evf-event__body { align-self: stretch; }
  .evf-event--wide .evf-event__button { width: 250px; border-radius: 8px; }

  /* 06 — 대표 → 30 → 곁(306×360) → 20 → 글 → 20 → 버튼 */
  .evf-event--e06 .evf-event__grid { gap: 30px; }
  .evf-event--e06 .evf-event__side,
  .evf-event--e06 .evf-event__body { gap: 20px; }

  /* 07 — 대표 → 10 → 곁 2장(사이 10) → 20 → 글 → 32 → 버튼 */
  .evf-event--e07 .evf-event__body { gap: 20px; }
  .evf-event--e07 .evf-event__subs { gap: 10px; }
  .evf-event--e07 .evf-event__side { gap: 32px; }
}

/* 2026-11-04 — 모바일에서만 바꾸는 줄(앱 «\t» · final `<br class="evf-br-mo">`) · 앱 글꼴이 Figma 보다 조금 넓어 한 줄 글이 넘치므로 자간을 살짝 줄인다 */
.evf-br-mo { display: none; }
@media (max-width: 767px) {
  .evf-br-mo { display: inline; }
  .evf-event__text h3 { letter-spacing: -0.01em; }
  .evf-event__text p { letter-spacing: -0.02em; }
}