/* ===========================================================================
   외국인 전용 이벤트 — 목록 /foreigners/events.html · 상세 /foreigners/event.html (2026-09-14)
   ⛔ .foreigners-page 스코프 안에서만 쓴다(.ev-*). 공용 foreigners.css 는 건드리지 않는다.
   ℹ️ 카드 모양은 한국어 events.html 카드(2열 · 이미지 위 · 텍스트 아래)를 참고했다 — 데이터·코드는 공유하지 않는다.
   =========================================================================== */
.foreigners-page .ev-hero {
  background: linear-gradient(180deg, var(--fp-gray-50) 0%, var(--fp-white) 100%);
  padding: 56px 0 32px; border-bottom: 1px solid var(--fp-gray-100);
}
.foreigners-page .ev-h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 12px; }
.foreigners-page .ev-lead { font-size: 17px; line-height: 1.65; color: var(--fp-gray-500); margin: 0; max-width: 680px; }
.foreigners-page .ev-section { padding: 36px 0 64px; }

/* ===== 상단 줄 — 「N events」 + 정렬 탭 (2026-09-18) ===================================
   ⚠️ 정렬은 **화면에서** 한다(목록은 한 번에 다 온다). 서버 순서 = Recommended 이고,
      ⛔ 기본값을 다른 것으로 바꾸지 말 것 — 관리자가 ▲▼ 로 정한 순서가 곧 Recommended 다. */
.foreigners-page .ev-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.foreigners-page .ev-count { font-size: 14px; font-weight: 700; color: var(--fp-gray-500); }
.foreigners-page .ev-sort {
  margin-left: auto; display: flex; gap: 4px; background: var(--fp-gray-50);
  border: 1px solid var(--fp-gray-100); border-radius: 999px; padding: 3px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%;
}
.foreigners-page .ev-sort::-webkit-scrollbar { display: none; }
.foreigners-page .ev-sort-tab {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--fp-gray-500); white-space: nowrap;
}
.foreigners-page .ev-sort-tab:hover { color: var(--fp-gray-900); }
.foreigners-page .ev-sort-tab.is-active { background: var(--fp-white); color: var(--fp-gray-900); box-shadow: var(--fp-shadow-sm, 0 1px 3px rgba(16,24,40,.1)); }

/* ===== 배너 카드 (2026-09-18 개편) ====================================================
   카드 **전체가 이미지**이고 제목·요약은 그 위에 얹힌다. 이미지가 없으면 브랜드 그라데이션이 배경이다.
   🔴 `image_has_text` 인 이미지(문구가 이미 박힌 배너)는 오버레이를 **시각만** 감춘다 —
      DOM 은 남긴다(스크린리더·구조화 데이터·회귀가 제목을 계속 읽는다). ⛔ display:none 으로 바꾸지 말 것.
   ⚠️ 2열은 ≥900px 에서만이다. 그보다 좁으면 1열 — 배너는 글자가 이미지 위에 있어 좁으면 읽히지 않는다. */
.foreigners-page .ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.foreigners-page .ev-card {
  display: block; background: var(--fp-white); border: 1px solid var(--fp-gray-300);
  border-radius: var(--fp-radius-md); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s;
  color: inherit;
}
.foreigners-page .ev-card:hover { border-color: var(--fp-kt-red); box-shadow: var(--fp-shadow-md); transform: translateY(-2px); }
.foreigners-page .ev-card-media { position: relative; }
.foreigners-page .ev-img {
  aspect-ratio: 16 / 9; background: linear-gradient(135deg, #E60012 0%, #7A0C12 55%, #2A0206 100%);
  position: relative; overflow: hidden;
}
.foreigners-page .ev-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 가독성용 좌→우 어두운 그라데이션 — 글자는 왼쪽 아래에 선다 */
.foreigners-page .ev-card-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.46) 42%, rgba(0,0,0,.06) 78%, rgba(0,0,0,0) 100%);
}
.foreigners-page .ev-card-ov {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; color: #fff;
}
/* 🔴 이미지에 문구가 박혀 있으면 겹쳐 쓰지 않는다 — 보이지만 않게 한다(DOM 유지) */
.foreigners-page .ev-card.has-image-text .ev-card-scrim,
.foreigners-page .ev-card.has-image-text .ev-card-ov { opacity: 0; pointer-events: none; }
.foreigners-page .ev-badge { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--fp-kt-red); color: #fff; letter-spacing: .02em; }
.foreigners-page .ev-badge.is-offer { background: #E60012; color: #fff; }
.foreigners-page .ev-badge.is-event { background: #0E9488; color: #fff; }
.foreigners-page .ev-badge.is-notice { background: #6B7280; color: #fff; }
.foreigners-page .ev-card-ov .ev-title {
  font-size: clamp(19px, 2.1vw, 25px); font-weight: 800; line-height: 1.28; margin: 0; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.foreigners-page .ev-card-ov .ev-summary {
  font-size: 14.5px; line-height: 1.5; margin: 0; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.foreigners-page .ev-card .ev-dates { padding: 12px 20px 14px; font-size: 13px; color: var(--fp-gray-500); font-weight: 700; }
/* 종료가 가까우면 빨강 — 「Ends in N days」 */
.foreigners-page .ev-dates.is-urgent { color: var(--fp-kt-red); }
.foreigners-page .ev-title { font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--fp-gray-900); margin: 0; }
.foreigners-page .ev-summary { font-size: 14.5px; line-height: 1.6; color: var(--fp-gray-700); margin: 0; }
.foreigners-page .ev-dates { font-size: 13px; color: var(--fp-gray-500); font-weight: 600; }
.foreigners-page .ev-empty { text-align: center; padding: 48px 16px; color: var(--fp-gray-500); font-size: 15.5px; line-height: 1.7; }

@media (max-width: 899px) {
  .foreigners-page .ev-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 상세 */
.foreigners-page .ev-detail { max-width: 860px; margin: 0 auto; padding: 32px 0 64px; }
.foreigners-page .ev-back { display: block; width: max-content; font-size: 14px; font-weight: 700; color: var(--fp-gray-500); margin-bottom: 16px; }
.foreigners-page .ev-back:hover { color: var(--fp-kt-red); }
.foreigners-page .ev-detail .ev-img { border-radius: var(--fp-radius-md); margin: 18px 0 22px; }

/* ===== 상세 히어로 — 목록 카드와 **같은 오버레이 규칙** (2026-09-18) ====================
   · 보통(이미지 있음 · 문구 없음) → 이미지 위에 배지 + H1 + 요약
   · `is-plain`(이미지에 문구가 박혔거나 이미지가 없음) → 이미지 아래에 **평범하게** 그린다
   🔴 `is-plain` 에서 오버레이를 감추지 않는 이유: 상세에는 **H1 이 하나뿐**이다.
      목록 카드처럼 opacity 0 으로 감추면 그 페이지에 보이는 제목이 사라진다. */
.foreigners-page .ev-hero-card { position: relative; margin: 0 0 14px; }
.foreigners-page .ev-hero-card .ev-img { margin: 0; border-radius: var(--fp-radius-md); }
.foreigners-page .ev-hero-card .ev-card-ov { padding: 22px 24px 22px; gap: 9px; }
.foreigners-page .ev-hero-card .ev-card-ov .ev-h1 {
  font-size: clamp(24px, 3.4vw, 40px); margin: 0; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.foreigners-page .ev-hero-card .ev-card-ov .ev-lead { color: rgba(255,255,255,.93); text-shadow: 0 1px 10px rgba(0,0,0,.45); margin: 0; max-width: none; }
.foreigners-page .ev-hero-card .ev-card-scrim { border-radius: var(--fp-radius-md); }
/* 평범판 — 오버레이를 흐름 안으로 되돌린다(겹치지 않는다) */
.foreigners-page .ev-hero-card.is-plain .ev-card-scrim { display: none; }
.foreigners-page .ev-hero-card.is-plain .ev-card-ov {
  position: static; padding: 0; color: inherit; gap: 10px; margin-top: 16px;
}
.foreigners-page .ev-hero-card.is-plain .ev-card-ov .ev-h1 { color: var(--fp-gray-900); text-shadow: none; }
.foreigners-page .ev-hero-card.is-plain .ev-card-ov .ev-lead { color: var(--fp-gray-500); text-shadow: none; }
.foreigners-page .ev-hero-card.is-plain .ev-img { margin-bottom: 4px; }
.foreigners-page .ev-ended {
  background: var(--fp-gray-50); border: 1px solid var(--fp-gray-300); border-radius: var(--fp-radius-sm);
  padding: 14px 16px; font-size: 15px; font-weight: 700; color: var(--fp-gray-700); margin: 12px 0 0;
}
.foreigners-page .ev-content { font-size: 16px; line-height: 1.8; color: var(--fp-gray-700); word-break: break-word; overflow-wrap: anywhere; }
.foreigners-page .ev-content h3 { font-size: 20px; font-weight: 800; color: var(--fp-gray-900); margin: 24px 0 8px; }
.foreigners-page .ev-content p { margin: 0 0 12px; }
.foreigners-page .ev-content ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.foreigners-page .ev-content a { color: var(--fp-kt-red); text-decoration: underline; }
.foreigners-page .ev-content img { max-width: 100%; height: auto; border-radius: 10px; }
.foreigners-page .ev-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.foreigners-page .ev-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 800; background: var(--fp-kt-red); color: #fff; border: 1px solid var(--fp-kt-red);
}
.foreigners-page .ev-cta:hover { background: var(--fp-kt-red-dark); color: #fff; }
.foreigners-page .ev-cta.is-ghost { background: var(--fp-white); color: var(--fp-gray-900); border-color: var(--fp-gray-300); }
.foreigners-page .ev-cta.is-wa { background: #25D366; border-color: #25D366; }
.foreigners-page .ev-cta.is-kakao { background: #FEE500; border-color: #FEE500; color: #3C1E1E; }

@media (max-width: 760px) {
  /* ⚠️ 그리드 1열 전환은 **899px** 이다(위 블록) — 여기로 되돌리지 말 것: 배너 카드는 글자가
     이미지 위에 있어 760~899 구간의 2열에서 제목이 두 줄로 잘린다. */
  .foreigners-page .ev-hero { padding: 40px 0 24px; }
  .foreigners-page .ev-card-ov { padding: 14px 16px; }
  .foreigners-page .ev-card .ev-dates { padding: 10px 16px 12px; }
  .foreigners-page .ev-detail { padding: 22px 0 48px; }
  .foreigners-page .ev-cta { width: 100%; }
}

/* ===== 🔒 접근 코드 잠금 카드 (2026-09-17) =============================================
   링크 전용 이벤트의 상세에서 **내용 대신** 그려진다. 서버가 본문을 주지 않으므로
   이 카드가 곧 페이지의 본문이다. ⛔ 여기에 본문을 숨겨 두는 식으로 쓰지 말 것. */
.foreigners-page .ev-gate {
  background: var(--fp-gray-50); border: 1px solid var(--fp-gray-300); border-radius: var(--fp-radius-md);
  padding: 28px 22px; margin: 22px 0 0; text-align: center;
}
.foreigners-page .ev-gate-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.foreigners-page .ev-gate-lead { font-size: 16.5px; font-weight: 700; color: var(--fp-gray-900); margin: 0; line-height: 1.55; }
.foreigners-page .ev-gate-note {
  font-size: 14.5px; line-height: 1.65; color: var(--fp-gray-700); margin: 10px auto 0;
  max-width: 480px; word-break: break-word; overflow-wrap: anywhere;
}
.foreigners-page .ev-gate-form { margin: 18px auto 0; max-width: 420px; text-align: left; }
.foreigners-page .ev-gate-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--fp-gray-500); margin-bottom: 6px; letter-spacing: .02em; }
/* 좁은 화면에서 버튼이 아래로 내려가며 넘치지 않게 — min-width:0 이 핵심이다(입력이 안 줄어든다) */
.foreigners-page .ev-gate-row { display: flex; gap: 8px; flex-wrap: wrap; }
.foreigners-page .ev-gate-input {
  flex: 1 1 180px; min-width: 0; padding: 12px 14px; font-size: 16px; /* 16px — iOS 가 확대하지 않는 최소값 */
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--fp-gray-300); border-radius: var(--fp-radius-sm); background: var(--fp-white); color: var(--fp-gray-900);
}
.foreigners-page .ev-gate-input:focus { outline: none; border-color: var(--fp-kt-red); box-shadow: 0 0 0 3px var(--fp-kt-red-soft); }
.foreigners-page .ev-gate-input::placeholder { font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--fp-gray-500); }
.foreigners-page .ev-gate-btn { flex: 0 0 auto; margin: 0; cursor: pointer; }
.foreigners-page .ev-gate-btn[disabled] { opacity: .6; cursor: default; }
.foreigners-page .ev-gate-err { font-size: 14px; font-weight: 700; color: var(--fp-kt-red); margin: 10px 0 0; }

/* ===== 🔒 목록 위 코드 모달 (2026-09-18) ===============================================
   카드를 눌렀을 때 **페이지를 떠나지 않고** 코드를 받는다. 내용은 서버가 여전히 주지 않는다 —
   이 모달은 입력 창일 뿐이고, 해제 판정은 POST /unlock 이 한다. */
.foreigners-page .ev-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.foreigners-page .ev-modal[hidden] { display: none; }
.foreigners-page .ev-modal-back { position: absolute; inset: 0; background: rgba(16, 18, 24, .58); backdrop-filter: blur(2px); }
.foreigners-page .ev-modal-card {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--fp-white); border-radius: var(--fp-radius-md); box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
  padding: 30px 24px 26px; text-align: center;
}
.foreigners-page .ev-modal-x {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--fp-gray-500); cursor: pointer; border-radius: 8px; font-family: inherit;
}
.foreigners-page .ev-modal-x:hover { background: var(--fp-gray-50); color: var(--fp-gray-900); }
.foreigners-page .ev-modal-title { font-size: 19px; font-weight: 800; line-height: 1.35; margin: 0 0 8px; color: var(--fp-gray-900); }
.foreigners-page .ev-modal-go { margin-top: 6px; }
.foreigners-page .ev-modal-go-lead { font-size: 15.5px; font-weight: 700; color: var(--fp-gray-900); margin: 0 0 14px; line-height: 1.55; }
.foreigners-page .ev-modal .ev-gate-form { margin-top: 16px; }

@media (max-width: 760px) {
  .foreigners-page .ev-modal { padding: 14px; align-items: flex-end; }
  .foreigners-page .ev-modal-card { padding: 26px 18px 22px; }
  .foreigners-page .ev-gate { padding: 22px 16px; }
  /* ⚠️ .ev-cta 가 이 폭에서 width:100% 라 잠금 버튼도 한 줄을 차지한다 — 의도한 모양이다 */
  .foreigners-page .ev-gate-input { flex: 1 1 100%; }
}