/* ==========================================================================
   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; } }