@charset "utf-8";
/* ==========================================================================
   당첨자 발표 모달 — 시안 PC 1:2 (1170×2160) / MO 1:74 (640×4713)

   style.css 를 건드리지 않으려고 파일을 나눴다(테스트 인덱스 전용 추가 분량).
   좌표·크기·행간은 전부 시안 실측값이다. 여기 숫자를 고치면 시안과 어긋난다.

   구조는 응모 모달(.modal)과 같다 — 뷰포트 레벨에 깔고 JS 가 --wn-scale 로 축소.
   다른 점은 시안이 PC·MO 두 벌이라 스테이지를 둘 두고 1060 에서 갈라 쓴다는 것뿐.
   ========================================================================== */

.wnmodal{
  /* --wn-w/-h 는 winner.js 가 활성 스테이지(PC 1170 / MO 640)에 맞춰 바꾼다 */
  --wn-w: 640px;
  --wn-h: 4713px;
  --wn-scale: 1;
  position:fixed; inset:0; z-index:110;   /* 응모 모달(100)·토스트(200) 사이 */
}
.wnmodal[hidden]{ display:none; }

.wnmodal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.66); border:0; padding:0; }

.wnmodal__fit{
  position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; justify-content:center; align-items:flex-start;
  padding:20px 0; overscroll-behavior:contain;
}
/* 배율을 곱한 만큼만 자리를 차지해야 스크롤 길이가 맞는다 (.modal__box 와 같은 방식) */
.wnmodal__box{
  position:relative; flex:0 0 auto;
  width:calc(var(--wn-w) * var(--wn-scale));
  height:calc(var(--wn-h) * var(--wn-scale));
}
/* 시안 '배경' 레이어(PC 1:3 / MO 1:75)는 프레임이 아니라 path 로 라운드를 갖는다 —
   네 귀 모두 반경 20. 여기서 한 번 잘라 주면 스테이지 배경도 주황 헤더도 같이 둥글어진다.
   transform 과 함께 스케일되므로 축소 화면에서도 비율이 유지된다. */
.wnmodal__viewport{
  position:absolute; left:0; top:0; width:var(--wn-w); height:var(--wn-h);
  transform:scale(var(--wn-scale)); transform-origin:0 0; overflow:hidden;
  border-radius:20px;
}

/* 시안에 없는 요소 — 닫기 수단이 보여야 해서 추가(응모 모달과 동일 규격) */
.wnmodal__close{
  position:absolute; right:18px; top:18px; width:58px; height:58px; z-index:3;
  border:0; padding:0; cursor:pointer;
  border-radius:50%; background:rgba(0,0,0,.42);
}
.wnmodal__close::before, .wnmodal__close::after{
  content:""; position:absolute; left:17px; top:28px; width:24px; height:2px; background:#fff;
}
.wnmodal__close::before{ transform:rotate(45deg); }
.wnmodal__close::after { transform:rotate(-45deg); }
.wnmodal__close:hover{ background:rgba(0,0,0,.62); }
.wnmodal__close:focus-visible{ outline:3px solid #FF6001; outline-offset:2px; }

/* --------------------------------------------------------------------------
   스테이지 — 시안 한 벌이 통째로 하나의 절대 좌표계다
   -------------------------------------------------------------------------- */
.wn-stage{
  position:absolute; left:0; top:0;
  font-family:var(--font, "Pretendard Variable", Pretendard, sans-serif);
  color:#000;
}
.wn-stage--pc{ width:1170px; height:2160px; background:#FFFFFF; border-radius:20px; }
.wn-stage--mo{ width:640px;  height:4713px; background:#F6F5F3; border-radius:20px; }

/* 1060 미만이면 MO 시안, 이상이면 PC 시안. 프로젝트 breakpoint 와 같은 값이다.
   안 쓰는 쪽은 display:none 이라 보조기기 트리에서도 빠진다. */
.wn-stage--pc{ display:none; }
@media (min-width:1060px){
  .wn-stage--pc{ display:block; }
  .wn-stage--mo{ display:none; }
}

.wn-stage p{ margin:0; }
.wn-stage img{ display:block; }

/* --------------------------------------------------------------------------
   헤더 바
   -------------------------------------------------------------------------- */
.wn-head{
  position:absolute; left:0; top:0; width:100%;
  background:#FF6000;
  box-shadow:inset 0 0 3px rgba(78,35,20,.1);   /* 시안 INNER_SHADOW #4E2314 10% blur3 */
}
.wn-stage--pc .wn-head{ height:178px; }
.wn-stage--mo .wn-head{ height:252px; }

.wn-head__eyebrow{ position:absolute; color:#fff; font-weight:700; text-align:center; }
.wn-stage--pc .wn-head__eyebrow{ left:231px; top:100px; width:101px; font-size:31.1px;  line-height:39.81px; }
/* MO 는 EVENT 도 1px 위로 올라붙는다(아래 목록과 같은 half-leading 반올림 차이) */
.wn-stage--mo .wn-head__eyebrow{ left:262px; top:57px;  width:120px; font-size:36.82px; line-height:47.13px; }

.wn-head__flower{ position:absolute; }
.wn-stage--pc .wn-head__flower--l{ left:202px; top:109px; width:21px; height:20px; }
.wn-stage--pc .wn-head__flower--r{ left:336px; top:109px; width:20px; height:20px; }
.wn-stage--mo .wn-head__flower--l{ left:228px; top:67px;  width:24px; height:24px; }
.wn-stage--mo .wn-head__flower--r{ left:386px; top:67px;  width:24px; height:24px; }

/* PC — 한 줄에 두 색이 이어진다 */
.wn-stage--pc .wn-head__title{
  position:absolute; left:385px; top:100px; width:572px; height:41px;
  font-size:34.177px; line-height:41px; white-space:nowrap;
}
.wn-stage--pc .wn-head__lead{ color:#FFE076; font-weight:400; letter-spacing:-.05em; }
.wn-stage--pc .wn-head__main{ color:#FFFFFF; font-weight:700; letter-spacing:-.03em; }

/* MO — 윗줄은 시안이 이미지, 아랫줄만 텍스트 */
.wn-stage--mo .wn-head__lead-img{ position:absolute; left:149px; top:107px; width:344px; height:66px; }
.wn-stage--mo .wn-head__main{
  position:absolute; left:198px; top:163px; width:248px; height:47px;
  color:#fff; font-size:34.83px; font-weight:700; line-height:47.24px;
  letter-spacing:-.03em; text-align:center;
}

/* --------------------------------------------------------------------------
   인사말 — 가운데 기준점이 시안 실측값이라 translateX(-50%) 로 건다
   -------------------------------------------------------------------------- */
.wn-lead{ position:absolute; transform:translateX(-50%); color:#FF6000; font-weight:700; text-align:center; white-space:nowrap; }
.wn-lead__bang{ font-family:Inter, var(--font), sans-serif; font-style:italic; }   /* 시안의 '!' 만 Inter Italic */
.wn-stage--pc .wn-lead{ left:582.5px; top:255px; font-size:36px; line-height:44px; letter-spacing:-.03em; }
/* MO 만 두 줄이다. 시안 텍스트 박스 폭(334) 안에서 '이벤트 당첨을 / 축하합니다!' 로
   자연 줄바꿈된다 — 폭을 늘리면 한 줄이 되므로 이 값을 고치지 말 것. */
.wn-stage--mo .wn-lead{ left:319px;   top:326px; font-size:63px; line-height:75.5px; letter-spacing:-.02em; white-space:normal; width:334px; }

/* ⚠ 폭을 주지 않으면 절대배치 박스가 '왼쪽 끝 ~ 스테이지 끝' 으로 좁아져 엉뚱한 데서
   줄바꿈된다(MO 본문이 3줄 → 4줄로 터졌던 원인). 줄바꿈은 마크업의 <br> 가 정하므로
   폭은 시안 박스보다 넉넉히 잡아도 가운데 기준점(left)이 같아 위치는 변하지 않는다. */
.wn-body{ position:absolute; transform:translateX(-50%); font-weight:300; text-align:center; }
.wn-stage--pc .wn-body{ left:584px;   top:317px; width:700px; font-size:20px; line-height:30px; letter-spacing:-.02em; }
.wn-stage--mo .wn-body{ left:323.5px; top:507px; width:620px; font-size:28px; line-height:42px; letter-spacing:-.02em; }

.wn-notice{ position:absolute; transform:translateX(-50%); color:#868686; font-weight:300; text-align:center; }
.wn-stage--pc .wn-notice{ left:584px;   top:389px; width:700px; font-size:16px; line-height:22px; letter-spacing:-.03em; }
.wn-stage--mo .wn-notice{ left:321.5px; top:655px; width:620px; font-size:22px; line-height:26px; letter-spacing:-.04em; }

/* --------------------------------------------------------------------------
   경품 카드
   카드 5종은 노드 cornerRadius 가 0 이고 라운드가 **이미지에 구워져** 있었다(PSD 임포트).
   그 상태로 축소 저장 → 확대 사용하면 구워진 호가 번져 모서리가 흐려 보인다.
   그래서 원본(rawImages)에서 호를 펴 꽉 찬 직사각형 그라디언트로 되돌리고,
   라운드는 CSS 로만 준다. 반경은 원본 알파의 원 피팅 실측값 22.10~22.36 → 22px
   (좌표·반경은 config/winners.php 의 'r').
   -------------------------------------------------------------------------- */
.wn-card{ position:absolute; z-index:0; }

.wn-prize{ position:static; }           /* 자식이 스테이지 좌표계를 그대로 쓴다 */
.wn-prize__img,
.wn-prize__badge{ position:absolute; z-index:1; }
.wn-prize__badge{ z-index:2; }

.wn-prize__count{
  position:absolute; z-index:3; display:block;
  color:#fff; font-weight:700; text-align:center;
}
.wn-stage--pc .wn-prize__count{ font-size:23.97px; line-height:34px; letter-spacing:-.02em; }
.wn-stage--mo .wn-prize__count{ font-size:35.96px; line-height:51px; letter-spacing:-.02em; }
/* 10명·50명만 시안 자간이 더 좁다(두 자리 숫자라 뱃지 폭에 맞춘 것) */
.wn-stage--pc .wn-prize__count--wide{ letter-spacing:-.06em; }

.wn-prize__label{
  position:absolute; z-index:3; display:block;
  font-weight:700; text-align:center; white-space:nowrap;
}
.wn-stage--pc .wn-prize__label{ font-size:20px; line-height:28px; letter-spacing:-.01em; }
.wn-stage--mo .wn-prize__label{ font-size:30px; line-height:45px; letter-spacing:-.02em; }

/* --------------------------------------------------------------------------
   당첨자 목록 — 이름 열과 번호 열이 따로 놓인다(열별 x 는 시안 실측)
   -------------------------------------------------------------------------- */
.wn-list{ position:static; }
/* nowrap 이 아니라 pre 다 — 시안의 '허   *' 처럼 공백이 여러 칸 들어간 값이 있는데
   HTML 은 연속 공백을 한 칸으로 줄여 버린다(줄바꿈 방지는 pre 로도 된다). */
.wn-list__col{ position:absolute; z-index:3; font-weight:300; white-space:pre; }
.wn-list__cell{ display:block; line-height:var(--wn-lh); }

/* 시안 대조에서 목록만 1px 위로 올라붙는다 — 피그마와 브라우저의 half-leading
   반올림 차이다(행간 36px / 글자 24px). 좌표(config)는 시안값 그대로 두고 여기서 보정한다.
   보정 전후: 평균차 14.25 -> 3.7 (커피 목록 기준) */
.wn-stage--pc .wn-list__col{ font-size:24px; margin-top:1px; }
.wn-stage--pc .wn-list__col--name{ letter-spacing:.02em; }
.wn-stage--pc .wn-list__col--num { letter-spacing:-.06em; }

.wn-stage--mo .wn-list__col{ font-size:36px; letter-spacing:0; margin-top:1px; }

/* --------------------------------------------------------------------------
   모션 최소화 설정 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .wnmodal, .wnmodal *{ animation:none !important; transition:none !important; }
}