/* ==========================================================================
   promotions — 프로모션
   히어로(좌우 2단) · 분류 필터 · 카드 3열.
   분류 색은 components.css 의 `.tag--*` 를 그대로 쓴다.
   필터에서도, 히어로에서도, 카드 안에서도 같은 색이다 (문서 §3).
   ========================================================================== */

/* ---- 그림 자리 ----------------------------------------------------------
   아직 이미지가 없다. 분류 색을 옅게 깐 면으로 자리를 잡아 둔다.
   실제 이미지가 나오면 background-image 로 바꾼다.
   ------------------------------------------------------------------------ */
.pr-art{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, color-mix(in oklab, var(--c) 55%, transparent), transparent 62%),
    linear-gradient(140deg, color-mix(in oklab, var(--c) 30%, var(--surface-2)), var(--surface-1));
}
.pr-art--casino{ --c:var(--tag-casino); }
.pr-art--sports{ --c:var(--tag-sports); }
.pr-art--mini  { --c:var(--tag-mini); }
.pr-art--vip   { --c:var(--tag-vip); }

/*
  ★ 프로모션 그림 (레드 2026-09-14). 색 면 <위에> 얹는다 — 운영이 그림을
    안 올린 프로모션은 예전처럼 색 면만 남아 자리가 빈 채로 서지 않는다.

  ⚠ 그림이 정사각이고 칸은 가로로 넓다. cover 로 채우되 <위쪽>을 남긴다 —
    받은 여섯 장 모두 위에 글자, 아래에 그림이 있어 가운데를 자르면 글자가 잘린다.
*/
.pr-art__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}

/* 그림이 있는 칸은 색 면을 끄고 카드색만 깐다 — 그림 바탕과 이어진다 */
.pr-art--photo{ background:var(--surface-1); }

/* ---- 히어로 — 왼쪽 그림 480, 오른쪽 내용 (문서 §2) ---------------------- */
.pr-hero{
  display:grid; grid-template-columns:480px 1fr;
  min-height:256px; border-radius:var(--r); overflow:clip;
  background:var(--surface-1); border:1px solid var(--line);
}
.pr-hero__body{
  padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  justify-content:center;
}
.pr-hero__title{ font-size:var(--fs-2xl); font-weight:900; }
.pr-hero__desc{ font-size:var(--fs-md); font-weight:500; color:var(--text-5); }
/* 종료 시각은 시간대까지 적는다 */
.pr-hero__ends{ font-size:var(--fs-base); font-weight:500; color:var(--text-3); }
.pr-hero .btn{ margin-top:6px; }

/* ---- 분류 필터 ---------------------------------------------------------- */
.pr-filter{ display:flex; flex-wrap:wrap; gap:var(--gap-card); }
/* 고르지 않은 태그는 색을 죽여 둔다. 고르면 제 색으로 살아난다. */
.pr-filter .tag{ opacity:.42; transition:opacity var(--t-color), filter var(--t-bg); }
.pr-filter .tag.is-on{ opacity:1; }
.pr-filter .tag:hover{ opacity:1; }

/* ---- 카드 4열 ------------------------------------------------------------ */
.pr-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap-card);
  grid-auto-rows:1fr;        /* 마지막 줄이 덜 차도 카드 높이가 흐트러지지 않는다 */
}
.pr-card{
  display:flex; flex-direction:column;
  border-radius:var(--r); overflow:clip;
  background:var(--surface-1); border:1px solid var(--line);
  transition:border-color var(--t-color), transform var(--t-bg);
}
.pr-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
/*
  그림 자리는 <정사각>이다 (레드 2026-09-14, 받은 그림이 정사각).

  ⚠⚠ height:50% 로 잡았다가 화면이 무너졌다(같은 날 되돌림).
    카드 높이는 grid-auto-rows:1fr 이 <내용으로> 정한다. 그림 자리가 %가 되면
    제 높이를 스스로 못 내놓으므로 카드 높이가 <본문만으로> 정해지고,
    그 절반을 그림이 도로 가져가 본문 아래(기간·단추)가 잘렸다.
    비율로 잡으면 그림이 제 높이를 내놓아 순환이 풀린다.

  ★ 1:1 이라 정사각 그림이 <좌우 여백 없이> 가로를 다 쓴다. 카드에서 차지하는
    몫도 대략 절반이다(그림 285 + 본문 200 기준).
*/
.pr-card__art{ aspect-ratio:1 / 1; flex:none; }
.pr-card__body{
  flex:1; padding:20px; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.pr-card__title{ font-size:var(--fs-md); font-weight:900; }
.pr-card__desc{
  font-size:var(--fs-base); font-weight:500; color:var(--text-5);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.pr-card__ends{ font-size:var(--fs-sm); color:var(--text-6); }
/*
  아래 한 줄 — 기간은 왼쪽, 「자세히 보기」는 오른쪽 (레드 2026-09-14).
  margin-top:auto 를 <이 칸이> 받는다. 예전처럼 단추에 걸면 기간과 단추가
  따로 밀려 둘 사이가 벌어진다.
*/
.pr-card__foot{
  margin-top:auto; align-self:stretch;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pr-card__foot .pr-card__ends{ margin:0; }

.pr-empty{
  grid-column:1 / -1; padding:48px; text-align:center;
  font-size:var(--fs-md); color:var(--text-5);
}

/* ---- 좁은 화면 ---------------------------------------------------------- */
@media (max-width:1024px){
  .pr-hero{ grid-template-columns:1fr; }
  .pr-hero .pr-art{ height:180px; }
  .pr-hero__body{ padding:20px; }
  .pr-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  /* 한 줄에 하나면 카드 한 장이 화면을 다 먹는다. 두 장씩 두고 안쪽을 조인다. */
  .pr-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .pr-card__body{ padding:12px; gap:6px; }
  .pr-card__title{ font-size:var(--fs-base); word-break:keep-all; }
  .pr-card__desc{ font-size:var(--fs-sm); }
  .pr-card__ends{ font-size:var(--fs-badge); }
  .pr-card .btn{ height:34px; padding:0 10px; }
  .pr-hero .pr-art{ height:140px; }
  .pr-hero__body{ padding:16px; }
  .pr-hero__title{ font-size:var(--fs-xl); }
  .pr-hero__desc{ font-size:var(--fs-base); }
}

/* ==========================================================================
   개별 프로모션 (promotion.html)
   목록 카드에서 `자세히 보기` 로 들어오는 화면.
   왼쪽에 내용, 오른쪽에 기간과 참여 버튼.
   ========================================================================== */

/* ---- 머리 — 그림 위, 내용 아래 ------------------------------------------
   ★★ <프로모션 상세는 이제 이것을 안 쓴다> (레드 2026-09-15).

     그 머리는 그림 자리를 <색 면>으로만 두고 썸네일을 아예 안 읽었다.
     목록에서 선물상자 그림을 보고 들어온 회원이 상세에서는 빈 분홍 띠를
     만났다 — 같은 프로모션인지 한눈에 이어지지 않았다.
     이제 상세도 목록과 <같은 .pr-hero> 를 쓴다.

   ⚠ 그래도 <지우지 않는다>. 게시판 상세(BoardDetailPage)가 아직 이 옷을 입는다.
     그쪽은 썸네일이 없는 글이라 색 면 머리가 맞다.
   ------------------------------------------------------------------------ */
.pd-hero{
  border-radius:var(--r); overflow:clip;
  background:var(--surface-1); border:1px solid var(--line);
}
.pd-hero__art{ height:220px; }
.pd-hero__body{
  padding:20px 24px 24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.pd-hero__title{ font-size:var(--fs-2xl); font-weight:900; word-break:keep-all; }
.pd-hero__desc{ font-size:var(--fs-md); font-weight:500; color:var(--text-5); }

/* ---- 판 짜기 — 오른쪽 304 는 예측마켓 · 선물게임 카트와 같은 폭 ---------- */
.pd-body{
  margin-top:var(--gap-card);
  display:grid; grid-template-columns:minmax(0,1fr) 304px;
  gap:var(--gap-card); align-items:start;
}
.pd-body > *{ min-width:0; }

/* ---- 한눈에 — 핵심 숫자 셋 ---------------------------------------------- */
.pd-facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap-card); }
.pd-fact{
  padding:16px 18px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.pd-fact span{ display:block; font-size:var(--fs-sm); color:var(--text-5); }
.pd-fact b{ display:block; margin-top:4px; font-size:var(--fs-lg); font-weight:900; }

/* ---- 글 판 -------------------------------------------------------------- */
.pd-panel{
  margin-top:var(--gap-card); padding:20px 24px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.pd-panel__title{ font-size:var(--fs-md); font-weight:900; }

/* 참여 방법 — 번호를 동그라미로 앞에 세운다 */
.pd-steps{ margin-top:14px; display:grid; gap:12px; counter-reset:step; list-style:none; }
.pd-steps li{
  position:relative; padding-left:38px; counter-increment:step;
  font-size:var(--fs-base); color:var(--text-3); line-height:1.6;
}
.pd-steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--primary); color:#fff;
  font-size:var(--fs-sm); font-weight:900;
}

/* 유의사항 — 점 하나로 충분하다 */
.pd-rules{ margin-top:12px; display:grid; gap:8px; list-style:none; }
.pd-rules li{
  position:relative; padding-left:16px;
  font-size:var(--fs-base); color:var(--text-5); line-height:1.6;
}
.pd-rules li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:5px; height:5px; border-radius:var(--r-full); background:var(--text-6);
}
.pd-note{
  margin-top:16px; padding:12px 14px; border-radius:var(--r-chip);
  display:flex; align-items:flex-start; gap:8px;
  background:var(--bg); font-size:var(--fs-sm); color:var(--text-6); line-height:1.6;
}
.pd-note svg{ flex:none; margin-top:2px; width:16px; height:16px; }

/* ---- 오른쪽 — 스크롤해도 따라온다 (헤더 72 + 여백 24) ------------------- */
.pd-side{ position:sticky; top:96px; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.pd-side__box{
  padding:16px 18px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
}
.pd-side__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pd-side__row span{ flex:none; font-size:var(--fs-sm); color:var(--text-5); }
.pd-side__row b{ font-size:var(--fs-base); font-weight:800; text-align:right; }
.pd-side__left{
  display:flex; align-items:center; gap:6px;
  padding-top:10px; border-top:1px solid var(--line);
  font-size:var(--fs-base); font-weight:800; color:var(--cta);
}

/* 다른 프로모션 — 작은 줄 셋 */
.pd-side__more{
  padding:16px 18px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.pd-side__moretitle{ font-size:var(--fs-sm); font-weight:900; color:var(--text-4); }
.pd-mini{
  margin-top:10px; display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:var(--r-chip);
  transition:background var(--t-bg);
}
.pd-mini:hover{ background:var(--surface-2); }
/* ★ 썸네일이 들어온다 (레드 2026-09-15). 색 면만 있던 자리라 석 줄이 전부
     같은 사각형으로 보였다 — 무엇이 무엇인지 그림으로는 하나도 안 갈렸다.
   ⚠ 조금 키운다. 52×36 은 그림을 넣어도 무엇인지 안 보인다.
   ⚠ position:relative — .pr-art__img 가 absolute 라 기준이 필요하다.
     (.pr-art 가 이미 relative 지만, 이 칸이 그 규칙보다 뒤에 오므로 함께 적는다) */
.pd-mini__art{
  position:relative; flex:none;
  width:72px; height:48px; border-radius:var(--r-chip);
}
.pd-mini__body{ min-width:0; display:grid; gap:2px; }
.pd-mini__body b{
  font-size:var(--fs-base); font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd-mini__body span{ font-size:var(--fs-sm); color:var(--text-5); }

/* ---- 좁은 화면 ---------------------------------------------------------- */
@media (max-width:1024px){
  .pd-body{ grid-template-columns:minmax(0,1fr); }
  .pd-side{ position:static; }
  .pd-hero__art{ height:160px; }
  .pd-hero__title{ font-size:var(--fs-xl); }
}
@media (max-width:640px){
  .pd-hero__art{ height:130px; }
  .pd-hero__body{ padding:16px; }
  .pd-panel{ padding:16px; }
  /* 셋을 나란히 두면 한 칸이 100px 도 안 된다 */
  .pd-facts{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .pd-fact{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 14px; }
  .pd-fact b{ margin-top:0; font-size:var(--fs-md); }
}

/* ==========================================================================
   프로모션 머리 — 고정 배너 (레드 2026-09-15)

   ★ 그림 한 장이 전부라 규칙도 셋이면 된다 — 모서리를 깎고, 폭을 채우고,
     비율을 지킨다.
   ⚠ height 를 박지 않는다. 그림은 가로가 긴데 세로를 고정하면 좁은 화면에서
     양옆이 잘려 글자(「초기 자본 0원」)가 사라진다.
   ========================================================================== */
.pr-banner{
  display:block;
  border-radius:var(--r);
  overflow:hidden;
  line-height:0;                 /* ⚠ 없으면 그림 아래 몇 px 틈이 생긴다 */
  transition:transform var(--t-bg, .2s);
}
.pr-banner img{ width:100%; height:auto; display:block; }
.pr-banner:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .pr-banner{ transition:none; } .pr-banner:hover{ transform:none; } }
/* ★ 친구초대 머리 — 같은 그림이지만 <링크가 아니다>(이미 그 화면이다). 떠오르면 눌러지는 줄 안다 (레드 2026-09-27) */
.pr-banner.is-static:hover{ transform:none; }

/* ==========================================================================
   주간 캐시백 — 예상 금액 (레드 2026-09-20)
   ★ 오른쪽 사이드 맨 위. 분류·종료가 왼쪽 카드 줄로 간 그 자리다.
   ========================================================================== */
.pd-cash{ display:flex; flex-direction:column; gap:4px; }
.pd-cash__head{
  margin:0 0 6px; font-size:var(--fs-sm); font-weight:900; color:var(--text-5);
}
.pd-cash__label{ margin:0; font-size:var(--fs-sm); color:var(--text-4); }
/* 이 화면에서 가장 큰 숫자다 — 회원이 찾는 값이 이것이다 */
.pd-cash__amount{
  margin:2px 0 0; font-size:28px; font-weight:900; line-height:1.2;
  color:var(--cta); font-variant-numeric:tabular-nums;
}
/* 정산 중·비로그인 — 숫자 자리에 글자가 온다. 크기를 낮춰 숫자로 안 읽히게 */
.pd-cash__plain{
  margin:2px 0 0; font-size:var(--fs-lg); font-weight:800; line-height:1.4;
  color:var(--text-2);
}
.pd-cash__note{
  margin:8px 0 0; font-size:var(--fs-sm); line-height:1.6; color:var(--text-5);
}

/* ==========================================================================
   이벤트 목록 — 시안 css/event.css 그대로 (레드 2026-09-27 「디자인은 똑같이 옮기자」)
   ┌ 친구초대 대배너 (밤하늘 · 성운 · 도시 실루엣 | 네트워크 그림 · 대시보드 · 알림)
   ├ 제목 줄 : 제목 · 건수 ········ 분류 판 [● 이름 개수]
   └ 카드 4열 (정사각 그림 · 제목 · 설명 2줄 · 기간 | 자세히 보기)

   ★ 이름은 ev-* 다. 시안은 .pr-* 인데 우리 .pr-hero · .pr-card 가 이벤트 상세 ·
     게시판에서 다른 모양으로 이미 쓰인다. 같은 이름으로 붙이면 한쪽이 무너진다(9/26).
   ★ 크기는 시안 <지정값> 그대로 적는다 — 시안 토큰(--fs-sm 14 · --fs-lg 16 · --r-lg 14)과
     우리 토큰(12 · 18 · 16)은 이름이 같아도 값이 달라, 토큰을 쓰면 크기가 어긋난다.
     (시안 PC 에 걸린 zoom:.9 는 따르지 않는다 — 우리는 zoom 이 없다. 휴대폰은 시안도 1)
   ★ 색은 우리 토큰 — 면(--surface-1/2) · 선(--line) · 글자(--text-4/5 — 시안 #9aa3b8 · #5f6880 에 가장 가까운 값).
     금색 강조는 웨일리 톤으로 (레드 2026-09-27) — 면 · 단추는 사파이어(--primary),
     어두운 바탕 위 글자 · 빛은 하늘(#4EC3F7, 우리 추천 아이콘 색). 배너 그림(SVG)도 같은 톤.
   ★ 배너의 대시보드 카드 · 실시간 알림은 우선 더미값 (레드 2026-09-27) — 실데이터 연동은 스모크 TODO.
   ========================================================================== */
/* 바탕 글자 — 시안 body(14 · 1.5 · 400). 우리 기본은 16 · 450 이라 줄 높이가 전부 어긋난다 */
.ev-page{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; font-size:14px; line-height:1.5; font-weight:400;
  /* 시안 --line-strong(단추 · 대화상자 테두리). 우리 --line-2 는 이 화면에서 정의되지 않아 테두리째 사라졌다(9/27) */
  --ev-line-strong:#5b6580; }

/* ---- 밤하늘 층 — 반짝이는 별 + 가끔 떨어지는 별똥별 (시안 components.css .sky) ---- */
.ev-sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.ev-sky::before, .ev-sky::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 140px 80px, #dfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 90px 150px, #fff, transparent), radial-gradient(1px 1px at 200px 190px, #ffe9c2, transparent),
    radial-gradient(1px 1px at 260px 40px, #fff, transparent), radial-gradient(.8px .8px at 60px 220px, #cfe0ff, transparent);
  background-size:300px 240px; animation:evTwinkle 4s ease-in-out infinite alternate;
}
.ev-sky::after{ background-size:420px 330px; background-position:130px 90px; animation-duration:6s; animation-delay:-2s; opacity:.7; }
@keyframes evTwinkle{ from{ opacity:.35; } to{ opacity:1; } }
.ev-sky i{
  position:absolute; top:-10%; left:70%; width:140px; height:2px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff 70%, #fff8dc);
  filter:drop-shadow(0 0 6px rgba(255,236,190,.9));
  transform:rotate(-32deg); animation:evShoot 9s linear infinite;
}
.ev-sky i:nth-child(2){ left:40%; animation-duration:13s; animation-delay:4s; width:110px; }
.ev-sky i:nth-child(3){ left:90%; animation-duration:17s; animation-delay:9s; width:160px; }
@keyframes evShoot{
  0%{ opacity:0; translate:0 0; }
  1%{ opacity:1; }
  6%{ opacity:0; translate:-420px 260px; }
  100%{ opacity:0; translate:-420px 260px; }
}

/* ---- 친구초대 대배너 ------------------------------------------------------ */
.ev-hero{
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 640px; align-items:center;
  min-height:330px; padding:36px 0 40px 56px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  background:linear-gradient(180deg,#0b1024 0%,#070a16 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.ev-hero__nebula{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 30% 55% at 70% 45%, rgba(42,99,196,.22), transparent 70%),
    radial-gradient(ellipse 35% 70% at 88% 20%, rgba(74,108,255,.35), transparent 70%),
    radial-gradient(ellipse 30% 60% at 55% 90%, rgba(150,90,255,.18), transparent 70%);
  filter:blur(8px); animation:evNeb 18s ease-in-out infinite alternate;
}
@keyframes evNeb{ to{ transform:translate(-2%,2%) scale(1.05); } }
.ev-hero__city{ position:absolute; left:0; right:0; bottom:0; width:100%; height:90px; opacity:.9;
  -webkit-mask-image:linear-gradient(to top,#000 40%,transparent); mask-image:linear-gradient(to top,#000 40%,transparent); }
.ev-win{ animation:evWin 3.4s ease-in-out infinite; }
@keyframes evWin{ 50%{ opacity:.15; } }

.ev-hero__copy{ position:relative; z-index:2; display:grid; gap:12px; justify-items:start; }
.ev-hero__kicker{ display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:999px;
  background:rgba(78,195,247,.12); border:1px solid rgba(78,195,247,.35); color:#4EC3F7;
  font:800 12px/1 var(--font); letter-spacing:.14em; }
.ev-hero__kicker i{ width:6px; height:6px; border-radius:50%; background:#4EC3F7; box-shadow:0 0 8px #4EC3F7; }
/* 배너 글자는 시안(44 · 22/34 · 15)보다 한 단계 작게 — 레드 2026-09-27 「폰트 좀 줄여도 될 거 같아」 */
.ev-hero__title{ margin:0; font-size:38px; font-weight:900; line-height:1.18; letter-spacing:-.02em; color:#fff; }
.ev-hero__title span{ background:linear-gradient(100deg,#dff4ff,#4EC3F7 45%,#2A63C4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ev-hero__punch{ margin:0; font-size:19px; font-weight:800; color:var(--text-4); }
.ev-hero__punch b{ font-family:var(--font); font-size:29px; color:#fff; text-shadow:0 0 18px rgba(78,195,247,.5); }
.ev-hero__sub{ margin:0; color:var(--text-4); font-size:14px; word-break:keep-all; }
.ev-hero__cta{ display:flex; gap:10px; margin-top:6px; }
.ev-hero .ev-btn--gold{ box-shadow:0 8px 26px rgba(30,79,168,.45); }
.ev-hero .ev-btn--gold:hover{ background:transparent; border-color:#4EC3F7; color:#4EC3F7; }
.ev-hero__ghost{ background:rgba(255,255,255,.04); }
.ev-hero .ev-btn:hover{ border-color:#4EC3F7; color:#4EC3F7; }

.ev-hero__scene{ position:relative; z-index:1; height:300px; }
.ev-hero__net{ position:absolute; inset:0; width:100%; height:100%; }

/* 파트너 대시보드 · 실시간 알림 — 값은 우선 더미(PromotionsPage DASH_DUMMY · TODO 스모크 연동).
   시안 금색 선 · 정산 구슬은 하늘/사파이어로 (웨일리 톤) */
.ev-glass{
  background:linear-gradient(160deg, rgba(34,44,74,.72), rgba(12,17,32,.72));
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.ev-dash{ position:absolute; left:6px; top:40px; width:236px; padding:14px 16px; display:grid; gap:4px; animation:evBob 6s ease-in-out infinite; }
@keyframes evBob{ 50%{ transform:translateY(-6px); } }
.ev-dash p{ margin:0; }
.ev-dash__head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; color:var(--text-4); }
.ev-dash__head em{ font-style:normal; font-size:10px; font-weight:900; padding:2px 7px; border-radius:999px; background:#d7374b; color:#fff; letter-spacing:.06em; }
.ev-dash .ev-dash__label{ margin-top:6px; font-size:11px; color:var(--text-4); }
.ev-dash__num{ font-family:var(--font); font-size:30px; font-weight:800; letter-spacing:.01em; font-variant-numeric:tabular-nums; color:#fff; }
.ev-dash__spark{ width:100%; height:48px; margin-top:4px; overflow:visible; }
.ev-dash__line{ fill:none; stroke:#4EC3F7; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:400; stroke-dashoffset:400; animation:evDraw 2.2s .3s cubic-bezier(.2,.8,.2,1) forwards; filter:drop-shadow(0 0 4px rgba(78,195,247,.7)); }
@keyframes evDraw{ to{ stroke-dashoffset:0; } }
.ev-dash__area{ opacity:0; animation:evFade 1s 1.2s forwards; }
@keyframes evFade{ to{ opacity:1; } }
.ev-dash__foot{ font-size:11px; color:var(--text-4); }
.ev-dash__foot .is-up{ color:#2fd39a; font-weight:800; }

/* 실시간 알림 — 세 장이 차례로 떠올랐다 사라진다 (같은 자리, 12초 주기) */
.ev-toasts{ position:absolute; right:16px; bottom:8px; width:290px; height:52px; margin:0; padding:0; list-style:none; }
.ev-toasts li{
  position:absolute; inset:0; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; padding:0 14px;
  font-size:12px; opacity:0; animation:evToast 12s ease-in-out infinite;
}
.ev-toasts li:nth-child(2){ animation-delay:4s; }
.ev-toasts li:nth-child(3){ animation-delay:8s; }
@keyframes evToast{ 0%{ opacity:0; transform:translateY(14px); } 4%, 28%{ opacity:1; transform:none; } 33%, 100%{ opacity:0; transform:translateY(-10px); } }
.ev-toasts i{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.ev-toasts i.is-join{ background:radial-gradient(circle at 35% 30%, #bfe0ff, #3b82f6 60%, #1b3a8a); }
.ev-toasts i.is-pay{ background:radial-gradient(circle at 35% 30%, #e6f7ff, #4EC3F7 60%, #1b6fa8); }
.ev-toasts span{ color:#dfe4ee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-toasts em{ font-style:normal; font-weight:900; color:#2fd39a; font-variant-numeric:tabular-nums; }

/* ---- 단추 — 시안 .btn (42 · 1px 선 · 8 모서리 · 14/700), --lg 48 · 16 ---------- */
.ev-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:42px; padding:0 20px;
  border:1px solid var(--ev-line-strong); border-radius:8px;
  background:transparent; color:var(--text);
  font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ev-btn svg{ width:16px; height:16px; }
.ev-btn:hover{ border-color:var(--primary); color:var(--primary); }
.ev-btn--lg{ height:48px; padding:0 30px; font-size:16px; }
.ev-btn--gold{ background:var(--primary); border-color:var(--primary); color:#fff; }
.ev-btn--gold:hover{ background:transparent; color:var(--primary); }

/* ---- 제목 줄 + 분류 판 — 한 판 안에 [● 이름 개수], 고른 것만 그 분류 색으로 켜진다 ---- */
/* ⚠ 열 폭을 minmax(0,1fr) 로 못박는다. 시안 .pr-sec 에는 이게 없어서 휴대폰(390)에서
     칸이 분류 판 한 줄 길이(560)만큼 늘고, 카드 오른쪽 반이 잘리고 분류 판도 안 밀렸다(9/27 실측). */
.ev-sec{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.ev-sec__head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; row-gap:10px; }
.ev-sec__head h1{ margin:0; font-size:28px; font-weight:900; line-height:1.5; }
.ev-sec__count{ font-size:14px; color:var(--text-4); }
.ev-filter{ display:flex; gap:2px; margin-left:auto; padding:4px; border-radius:14px; background:var(--surface-1); box-shadow:inset 0 0 0 1px var(--line); }
.ev-tag{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 8px 0 11px; border-radius:10px;
  font-size:14px; font-weight:800; color:var(--text-4); white-space:nowrap; text-decoration:none;
  transition:background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.ev-tag__dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.ev-tag em{
  min-width:20px; height:18px; padding:0 6px; border-radius:9px; display:grid; place-items:center;
  background:var(--bg); font-style:normal; font-size:11px; font-weight:800; color:var(--text-5); font-variant-numeric:tabular-nums;
  transition:background-color 150ms ease, color 150ms ease;
}
.ev-tag:hover{ color:var(--text); background:color-mix(in srgb, var(--c) 9%, transparent); }
.ev-tag.is-on{
  color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, var(--surface-2)), color-mix(in srgb, var(--c) 12%, var(--surface-2)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 8px 18px -10px var(--c);
}
.ev-tag.is-on em{ background:var(--c); color:#0a0d16; }
.ev-tag:focus-visible{ outline:2px solid var(--c); outline-offset:1px; }

/* ---- 카드 4열 ------------------------------------------------------------ */
.ev-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ev-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-1);
  transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.ev-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow:0 14px 28px rgba(0,0,0,.4); }
/* 그림 — 정사각 칸, 투명 3D 그림을 contain 으로(잘리지 않게) · 바탕은 분류 색 밤하늘 */
.ev-card__art{
  position:relative; display:grid; place-items:center; aspect-ratio:1; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 62%, color-mix(in srgb, var(--c) 38%, transparent), transparent 72%),
    linear-gradient(180deg,#0d1426,#080b14);
}
.ev-card__art img{ width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.ev-card:hover .ev-card__art img{ transform:scale(1.05); }
.ev-card__tag{
  position:absolute; top:12px; left:12px; height:26px; padding:0 10px; display:inline-flex; align-items:center;
  border-radius:999px; background:rgba(0,0,0,.55); color:color-mix(in srgb, var(--c) 80%, #fff); font-size:12px; font-weight:800;
}
.ev-card__ended{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(6,8,15,.62);
  font-size:16px; font-weight:900; color:var(--text-4);
}
.ev-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.ev-card__title{ display:flex; align-items:center; gap:6px; margin:0; font-size:16px; font-weight:900; line-height:1.4; }
.ev-card__title span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-card__desc{
  margin:0; color:var(--text-4); font-size:14px; line-height:1.7; word-break:keep-all; min-height:calc(1.7em * 2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.ev-card__foot{ margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ev-card__ends{ margin:0; font-size:14px; color:var(--text-4); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ev-card.is-end .ev-card__art img{ filter:grayscale(.8) brightness(.7); }
.ev-empty{ margin:0; padding:48px; text-align:center; font-size:15px; color:var(--text-5); }

@media (prefers-reduced-motion:reduce){
  .ev-sky::before, .ev-sky::after, .ev-sky i{ animation:none; } .ev-sky i{ display:none; }
  .ev-hero__nebula, .ev-win, .ev-dash{ animation:none; }
  .ev-dash__line{ animation:none; stroke-dashoffset:0; } .ev-dash__area{ animation:none; opacity:1; }
  .ev-toasts li{ animation:none; } .ev-toasts li:first-child{ opacity:1; }
  .ev-card, .ev-card__art img{ transition:none; }
  .ev-card:hover{ transform:none; }
}

/* ==========================================================================
   이벤트 상세 <모달> — 시안 css/event.css 의 .evm-* + 모달 틀(components.css .modal)
   ┌ 머리 띠(고정) : 분류 · 제목 · 그림 · ✕
   ├ 본문(여기서만 스크롤) : 상태 · 기간 칩 → 설명 → 지급 기준 → 참여 방법 → 유의사항
   └ 아래 띠(고정) : 참여 단추 (끝난 이벤트는 닫기만)
   ⚠ 우리에게는 .modal 틀이 없다(지갑 창 안에만 있다). 틀째 여기 적는다 —
     없으면 대화상자가 투명하고, 화면보다 길어져 위가 잘리고, ✕ 가 화면 밖으로 나간다(9/27 실측 867 > 820).
   ⚠ 시안 --bg-deep · --surface 는 우리에게 없는 이름이다 — 쓰면 배경 한 줄이 통째로 무효가 된다.
   ========================================================================== */
.evm.pg-overlay{ padding:30px; }
.evm .modal__dialog{
  position:relative; z-index:1; display:flex; flex-direction:column; width:min(640px,100%);
  max-height:calc(100vh - 60px); overflow:hidden; border-radius:18px;
  border:1px solid color-mix(in srgb, var(--c, var(--primary)) 30%, var(--ev-line-strong));
  background:var(--surface-1); box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.evm .modal__head{
  flex:none; position:relative; display:grid; align-content:end; gap:4px; min-height:168px; padding:22px 190px 20px 26px; border-bottom:0;
  background:
    radial-gradient(ellipse 55% 110% at 88% 40%, color-mix(in srgb, var(--c, var(--primary)) 34%, transparent), transparent 70%),
    linear-gradient(160deg, #141b33 0%, #06080f 80%);
}
/* 제목을 키운다 (레드 2026-09-27) — 시안은 제목 아래 핵심 혜택(44)이 머리 띠를 채우는데,
   우리 데이터에는 그 칸이 없어 22 짜리 제목만 남으면 띠가 비어 보였다 */
.evm .modal__head h2{ position:relative; margin:0; font-size:30px; font-weight:900; line-height:1.25; word-break:keep-all; }
.evm .modal__close{
  position:absolute; top:12px; right:12px; z-index:2; display:grid; place-items:center; width:32px; height:32px;
  border:0; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; cursor:pointer;
  transition:color 150ms ease, background-color 150ms ease;
}
.evm .modal__close:hover{ background:var(--surface-2); }
.evm .modal__close svg{ width:18px; height:18px; }
.evm-cat{ position:relative; margin:0; font-size:12px; font-weight:900; letter-spacing:.08em; color:var(--c, var(--primary)); }
.evm-art{ position:absolute; right:22px; bottom:10px; width:160px; max-height:150px; object-fit:contain; rotate:-6deg;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.55)); }

.evm .modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; display:grid; align-content:start; gap:10px; padding:18px 26px 20px; }
.evm-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.evm-chip{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:999px; background:var(--bg); font-size:12px; font-weight:700; color:var(--text-4); white-space:nowrap; }
.evm-chip svg{ width:13px; height:13px; }
.evm-chip--state i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.evm-chip--state.is-on{ color:#2fd39a; }
.evm-sub{ margin:0; font-size:14px; line-height:1.65; color:var(--text); word-break:keep-all; }
.evm-h{ margin:8px 0 0; font-size:14px; font-weight:900; color:var(--c, var(--primary)); }
/* 지급 기준 표 */
.evm-table{ width:100%; border-collapse:separate; border-spacing:0 4px; margin-top:-4px; font-variant-numeric:tabular-nums; }
.evm-table tbody th, .evm-table tbody td{ height:40px; padding:0 14px; background:var(--bg); font-size:14px; }
/* 우리 지급 기준은 [항목 | 값] 두 칸이라 항목이 두 줄로 접히면 줄이 38 → 42 로 커진다 */
.evm-table tbody th{ border-radius:10px 0 0 10px; font-weight:700; color:var(--text-4); text-align:left; white-space:nowrap; }
.evm-table tbody td{ font-size:14px; font-weight:900; text-align:right; }
.evm-table tbody td:last-child{ border-radius:0 10px 10px 0; }
/* 참여 방법 · 유의사항 */
.evm-how{ display:grid; gap:6px; margin:0; padding:0; list-style:none; counter-reset:evm; }
.evm-how li{ position:relative; padding-left:28px; font-size:14px; line-height:1.6; word-break:keep-all; counter-increment:evm; }
.evm-how li::before{ content:counter(evm); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c, var(--primary)) 20%, transparent); color:var(--c, var(--primary)); font-size:11px; font-weight:900; }
.evm-notes{ display:grid; gap:3px; margin:0; padding-left:16px; font-size:12px; line-height:1.6; color:var(--text-5); word-break:keep-all; }

.evm .modal__foot{ flex:none; display:flex; gap:10px; justify-content:center; padding:12px 16px 16px; border-top:1px solid var(--line); background:var(--surface-1); }
.evm-cta{ width:100%; justify-content:center; }
.evm-cta svg{ width:16px; height:16px; }
.evm.is-end .modal__head{ filter:grayscale(.7); }
@media (prefers-reduced-motion:reduce){ .evm .modal__dialog{ animation:none !important; } }

/* ==========================================================================
   휴대폰 (1023px 이하) — 배너는 글만(오른쪽 장면은 숨김), 카드 2열, 상세는 아래에서 올라오는 시트
   ========================================================================== */
@media (max-width:1023px){
  .ev-page{ gap:16px; }
  .ev-sec{ gap:10px; }
  .ev-sec__head h1{ font-size:22px; }
  /* 분류 판 — 제목 아래 한 줄 가득, 넘치면 옆으로 민다 */
  .ev-filter{ flex:1 1 100%; margin-left:0; overflow-x:auto; scrollbar-width:none; }
  .ev-filter::-webkit-scrollbar{ display:none; }
  .ev-tag{ flex:none; height:32px; padding:0 7px 0 10px; font-size:12px; }
  .ev-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ev-card__art{ aspect-ratio:4 / 3; }
  .ev-card__body{ padding:10px; gap:4px; }
  .ev-card__title{ font-size:13px; }
  .ev-card__desc{ font-size:11px; line-height:1.5; min-height:0; -webkit-line-clamp:1; }
  .ev-card__foot{ padding-top:4px; }
  .ev-card__foot .ev-btn{ height:28px; padding:0 10px; font-size:11px; }
  .ev-card__ends{ font-size:11px; }

  /* 상세 — 아래에서 올라오는 시트 */
  .evm.pg-overlay{ align-items:end; justify-items:stretch; padding:0; }
  .evm .modal__dialog{ width:100%; max-height:92vh; border-radius:18px 18px 0 0; border-bottom:0; animation:evmUp .26s cubic-bezier(.2,.8,.2,1); }
  @keyframes evmUp{ from{ translate:0 40px; opacity:.6; } to{ translate:0 0; opacity:1; } }
  .evm .modal__head{ min-height:128px; padding:16px 120px 14px 16px; }
  .evm .modal__head h2{ font-size:22px; }
  .evm-art{ right:10px; bottom:8px; width:104px; max-height:104px; }
  .evm .modal__body{ gap:8px; padding:14px 16px 16px; }
  .evm-sub{ font-size:14px; }
  .evm-table tbody th, .evm-table tbody td{ height:38px; padding:0 12px; }
  .evm .modal__foot{ padding:10px 12px calc(12px + env(safe-area-inset-bottom)); }
}

/* 태블릿 세로 (600~1023px) — 이벤트 카드 3열.
   ★ 배너는 시안처럼 글만 남기지 않는다 — PC 배너를 폭에 맞춰 줄여 그림째 보인다 (레드 2026-09-27 「여기 확인점」).
     시안은 이 폭에서 그림을 숨겨 오른쪽 절반이 빈 밤하늘로 남았다. 제목 34 규칙도 그래서 뺐다 */
@media (min-width:600px) and (max-width:1023px){
  .ev-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* 휴대폰 (599px 이하) — 배너는 글만 한 칸으로 쌓는다 (시안 휴대폰 값 그대로) */
@media (max-width:599px){
  .ev-hero{ grid-template-columns:minmax(0,1fr); min-height:0; padding:16px 14px 48px; }
  .ev-hero__copy{ gap:8px; }
  .ev-hero__city{ height:44px; }
  .ev-hero__scene{ display:none; }
  .ev-hero__kicker{ height:26px; padding:0 10px; font-size:10px; letter-spacing:.1em; }
  .ev-hero__title{ font-size:21px; }
  .ev-hero__punch{ font-size:16px; }
  .ev-hero__punch b{ font-size:24px; }
  .ev-hero__sub{ font-size:13px; }
  .ev-hero__cta{ flex-wrap:nowrap; margin-top:2px; }
  .ev-hero__cta .ev-btn{ flex:1 1 auto; height:36px; padding:0 10px; font-size:12px; }
}

/* ★★ 이벤트 모달 닫기 — 폰에서 ✕ 가 안 눌린다 (레드 2026-09-27 「여기눌려도 안닫힘 모바일기기에서」).
     ✕ 가 기울인 그림(.evm-art: rotate + drop-shadow)과 겹친다. 그림은 따로 합성되는 층이라
     기기 브라우저가 터치를 그림에 먼저 준다 — PC 크롬은 괜찮아 보여 놓치기 쉽다.
   ① 그림은 터치를 받지 않는다(장식일 뿐이다).
   ② ✕ 를 제 층으로 올리고, 누르는 자리를 44px 로 넓힌다(보이는 원은 32 그대로).
   ③ 아래 띠는 참여 단추 <아래>에 닫기를 한 줄 더 둔다 — 세로로 쌓는다. */
.evm-art{ pointer-events:none; }
.evm .modal__close{ z-index:5; transform:translateZ(0); touch-action:manipulation; }
.evm .modal__close::before{ content:''; position:absolute; inset:-6px; border-radius:50%; }
.evm .modal__foot{ flex-direction:column; gap:8px; }
.evm .modal__foot .evm-close{ background:var(--surface-2); color:var(--text); border:0; }