/* ===== 쿠지 상세 ===== */
/* 티켓 이미지 기본값 (admin 미업로드 시 항상 fallback) — JS applyTicketImages 가 보드에 더 구체적인 값을 set 하면 그게 우선.
   url() 경로는 이 CSS 파일(/css/...) 기준이므로 ../ 로 루트로 올라감. */
:root {
  --ticket-img: url('../티켓%20이미지%20활성화.webp');
  --ticket-img-gray: url('../티켓%20이미지%20비활성화.webp');
}
.detail-wrap { max-width: 1280px; margin: 0 auto; padding: 0 4% 80px; }

/* ===== Hero + Fairness 2-컬럼 (상단, 같은 높이) ===== */
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 32px;
}
.hero-row .kuji-hero,
.hero-row .trust-box { margin-bottom: 0; margin-top: 0; }

/* 이미지가 위, 메타가 아래로 스택되는 새 레이아웃 — 세로 비율 (피규어 사진은 보통 세로) */
.hero-row .kuji-hero { align-content: start; }
.hero-row .kuji-hero .kuji-img-big {
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 320px;
  max-height: 560px;
  width: 100%;
}
.hero-row .kuji-hero .kuji-meta { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1000px) {
  .hero-row { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .hero-row .kuji-hero .kuji-img-big { aspect-ratio: 3 / 4; max-height: 480px; }
}
@media (max-width: 600px) {
  .hero-row .kuji-hero .kuji-img-big { aspect-ratio: 4 / 5; max-height: 420px; }
  .kuji-hero { padding: 20px; }
}

/* 이벤트 쿠지 — 공정성 박스 제거 후 hero-row 단일 컬럼 */
body.is-event-kuji .hero-row {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== 신뢰 박스 (TRUSTED) — 쿠지 보드와 시각적으로 분리 ===== */
.trust-box {
  background: linear-gradient(160deg, #ffffff 0%, #fff8f3 100%);
  border-radius: 22px;
  padding: 22px 24px 20px;
  margin-top: 0;
  box-shadow: 0 12px 32px rgba(255,107,157,.10), 0 0 0 1.5px rgba(255,107,157,.18);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 16px;
}
.trust-box::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,201,60,.18), transparent 65%);
  pointer-events: none;
}
.trust-head { position: relative; z-index: 1; }
.trust-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.trust-shield {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7FE3C5, #2da884);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(45,168,132,.28);
}
.trust-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--mint), #2da884);
  color: white;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .14em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.trust-badge h3 {
  font-family: 'Jua', sans-serif;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -.3px;
  line-height: 1.25;
}
.trust-lead {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0;
}
.trust-lead b { color: var(--pink-deep); }

/* 신뢰 포인트 4개 */
.trust-points {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0;
  margin: 0;
  position: relative; z-index: 1;
}
.trust-points li {
  background: white;
  border: 1.5px solid rgba(255,107,157,.14);
  border-radius: 14px;
  padding: 14px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform .15s, box-shadow .15s;
}
.trust-points li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,107,157,.12);
}
.trust-points li .tp-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF1E6, #FFE8EE);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.trust-points li b {
  display: block;
  font-family: 'Jua', sans-serif;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -.2px;
}
.trust-points li small {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
}
.trust-points li small b {
  display: inline;
  font-family: 'Pretendard', sans-serif;
  font-size: inherit;
  color: var(--pink-deep);
  margin: 0;
}

.trust-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(127,227,197,.12), rgba(255,201,60,.10));
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  position: relative; z-index: 1;
}
.trust-foot .tf-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mint);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
}
.trust-foot b { color: var(--pink-deep); }

/* 추첨 알고리즘 요약 박스 — 코드 노출 X (보안/영업비밀 보호) */
.trust-rng-summary {
  background: linear-gradient(135deg, #FFF7E6, #FCE7BA);
  border: 1.5px solid #FCD34D;
  border-radius: 14px;
  padding: 16px 18px;
  position: relative; z-index: 1;
}
.trust-rng-summary .trs-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px;
}
.trust-rng-summary .trs-tag {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .8px;
  color: white;
  background: #92400E;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.trust-rng-summary .trs-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: #78350F;
  font-weight: 500;
}
.trust-rng-summary .trs-text b { color: #92400E; font-weight: 800; }
.trust-rng-summary .trs-foot {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(146, 64, 14, .35);
  font-size: 11.5px;
  color: #92400E;
  line-height: 1.5;
  opacity: .85;
}

/* CSPRNG 코드 박스 — 서버측 추첨 로직 데모 (사용자에게 "서버에서 난수로 처리됨" 신뢰 전달) */
.trust-rng {
  background: #0F1117;
  border-radius: 14px;
  border: 1px solid #1f2330;
  overflow: hidden;
  position: relative; z-index: 1;
}
.trust-rng .rng-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #161A24;
  border-bottom: 1px solid #1f2330;
}
.trust-rng .rng-tag {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .8px;
  color: #1F2330;
  background: #FFC93C;
  padding: 3px 8px;
  border-radius: 4px;
}
.trust-rng .rng-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  color: #d6dae3;
  font-weight: 600;
  flex: 1;
}
.trust-rng .rng-lang {
  font-family: 'Pretendard', sans-serif;
  font-size: 10.5px;
  color: #8a92a6;
  letter-spacing: .4px;
}
.trust-rng .rng-body { padding: 0; }
.trust-rng .rng-code {
  margin: 0;
  padding: 14px 16px;
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.65;
  color: #e7eaf3;
  overflow-x: auto;
  white-space: pre;
}
.trust-rng .rng-code code { font-family: inherit; }
.trust-rng .rng-code .ck { color: #6b7187; font-style: italic; }
.trust-rng .rng-code .kw { color: #ff7eb6; }
.trust-rng .rng-code .fn { color: #82d5ff; }
.trust-rng .rng-code .ob { color: #ffc93c; }
.trust-rng .rng-code .nm { color: #b3f0a3; }
.trust-rng .rng-foot {
  padding: 10px 14px;
  background: #161A24;
  border-top: 1px solid #1f2330;
  font-size: 11px;
  color: #8a92a6;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1180px) {
  .trust-points { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .trust-box { padding: 18px 18px 16px; }
  .trust-shield { width: 48px; height: 48px; font-size: 26px; }
  .trust-badge h3 { font-size: 18px; }
  .trust-rng .rng-code { font-size: 11px; }
}

/* ===== 구매 안내 ===== */
.notice-block {
  background: white;
  border-radius: 22px;
  padding: 0;
  margin-top: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1.5px solid #fde6ec;
  overflow: hidden;
  /* 스크롤 렉 방지 — 화면 밖일 땐 4×4 그리드 사항 paint 스킵 */
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}
/* 쿠지 현황판 (100셀 보드) 도 화면 밖에선 paint 스킵 */
.stock-preview-wrap {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}
.notice-block > h3 {
  background: linear-gradient(135deg, #fff5f8, #fffaec);
  border-bottom: 1.5px solid #fde6ec;
  font-family: 'Jua';
  font-size: 18px;
  color: var(--pink-deep);
  padding: 16px 24px;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
/* 2×2 그리드 — 모든 박스 동일 크기 + 내부 콘텐츠를 수직으로 균등 분포해 빈 공간 제거 */
.notice-block > .notice-body {
  padding: 22px 26px 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}
.notice-block > .notice-body > .notice-section {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.notice-block > .notice-body > .notice-section ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 4px 0;
}
@media (max-width: 760px) {
  .notice-block > .notice-body { grid-template-columns: 1fr; grid-auto-rows: auto; padding: 18px 18px 22px; }
  .notice-block > .notice-body > .notice-section ul { justify-content: flex-start; }
}
.notice-block .notice-section {
  border-radius: 16px;
  padding: 18px 22px;
  border: 1px solid;
  max-width: none;
  margin: 0;
}
.notice-block .notice-section h4 {
  font-family: 'Jua';
  font-size: 14.5px;
  margin-bottom: 8px;
}
.notice-block .notice-section ul {
  list-style: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.notice-block .notice-section ul li {
  padding-left: 14px;
  position: relative;
}
.notice-block .notice-section ul li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: currentColor;
  opacity: .55;
}
.notice-block .notice-section ul li.warn { color: #d4761a; }
/* 섹션 캡션 — 리스트 위에 강조 안내 (※ 표기) */
.notice-block .notice-section .ns-caption {
  font-size: 12.5px;
  line-height: 1.6;
  color: #c47a18;
  font-weight: 700;
  background: rgba(255, 213, 145, .35);
  border-left: 3px solid currentColor;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
/* 리스트 항목 보조 설명 (괄호 안 부연) */
.notice-block .notice-section ul li .ns-sub {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
  margin-top: 2px;
}
.notice-block .notice-section.ns-pink { background: #fff5f7; border-color: #ffd2dc; }
.notice-block .notice-section.ns-pink h4 { color: var(--pink-deep); }
.notice-block .notice-section.ns-mint { background: #f0fbf6; border-color: #c8eedd; }
.notice-block .notice-section.ns-mint h4 { color: #2da884; }
.notice-block .notice-section.ns-orange { background: #fff8ec; border-color: #ffe2b3; }
.notice-block .notice-section.ns-orange h4 { color: #c47a18; }
.notice-block .notice-section.ns-purple { background: #f7f3ff; border-color: #e2d4f7; }
.notice-block .notice-section.ns-purple h4 { color: #7d3ec1; }


.kuji-hero {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: white;
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  margin-bottom: 32px;
}
.kuji-img-big {
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  background: linear-gradient(135deg, #FFCAD4, #FF6B9D);
  display: flex; align-items: center; justify-content: center;
  font-size: 120px;  /* 고정 — viewport 비례 스케일 제거 */
  position: relative;
  overflow: hidden;
  max-height: 360px;
  width: 100%;
}
.kuji-img-big .ribbon { font-size: 13px; z-index: 2; }
/* 업로드 이미지가 들어왔을 때 컨테이너를 가득 채움 */
.kuji-img-big > img.real-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: absolute;
  inset: 0;
}
/* 이모지 폴백 */
.kuji-img-big > .emoji-fill {
  font-size: inherit;
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.15));
}
.kuji-meta .cat-chip {
  display: inline-block;
  background: var(--bg-2);
  color: var(--pink-deep);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.kuji-meta h2 { font-family: 'Jua'; font-size: 32px; line-height: 1.2; margin-bottom: 10px; }
.kuji-meta .desc { color: var(--text-soft); font-size: 14.5px; margin-bottom: 22px; }
.kuji-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.kuji-stat { background: var(--bg); border-radius: 14px; padding: 14px 18px; }
.kuji-stat label { font-size: 13px; color: var(--text-soft); display: block; margin-bottom: 4px; font-weight: 700; }
.kuji-stat .v { font-family: 'Jua'; font-size: 22px; color: var(--pink-deep); }
.stock-progress { background: var(--bg); border-radius: 14px; padding: 14px 18px; margin-bottom: 22px; }
.stock-progress label { font-size: 13.5px; color: var(--text-soft); display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 8px; }
.stock-progress .bar { height: 10px; background: rgba(0,0,0,.06); border-radius: 999px; overflow: hidden; }
.stock-progress .bar > div { height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow)); border-radius: 999px; transition: width .3s; }

.grade-list { background: white; border-radius: 28px; padding: 32px; margin-bottom: 32px; box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.grade-list h3 { font-family: 'Jua'; font-size: 22px; margin-bottom: 20px; }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.grade-item {
  border: 2px solid var(--bg-2);
  border-radius: 18px;
  overflow: hidden;
  background: white;
  display: flex; flex-direction: column;
  transition: all .15s;
}
.grade-item:hover { border-color: var(--pink); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(255,107,157,.15); }
/* 이미지가 카드 상단을 가득 채우도록 */
.grade-item .gemoji-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: var(--bg-2);
}
/* SVG 아이콘 fallback도 같은 크기 영역으로 */
.grade-item .gemoji {
  width: 100%;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 88px;
  background: linear-gradient(135deg, #fff7fb, #fff2e1);
  line-height: 1;
}
.grade-item .gemoji .kj-svg-icon { width: 56%; height: 56%; display: block; }
/* 텍스트 영역 — 정중앙 정렬 */
.grade-item .gr,
.grade-item .gname,
.grade-item .gqty { margin-left: auto; margin-right: auto; }
.grade-item .gr {
  font-family: 'Pretendard', sans-serif;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  margin-top: 14px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: .04em;
  display: inline-block;
}
.grade-item .gname {
  font-family: 'Jua';
  font-size: 15px;
  margin-top: 6px;
  text-align: center;
  padding: 0 14px;
}
/* 라벨과 상품명이 동일하면 gname 숨김 */
.grade-item .gname[data-same="1"] { display: none; }
.grade-item .gqty {
  font-size: 13px;
  color: var(--text-soft);
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 0 14px 16px;
  text-align: center;
}
.grade-item .gqty .left { color: var(--pink-deep); font-family: 'Jua'; font-size: 16px; line-height: 1; transition: color .2s; }
.grade-item .gqty .total { color: var(--text-soft); }
.grade-item .gqty .sold-tag { background: #ddd; color: #555; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.grade-item.sold-out { opacity: .45; filter: grayscale(.6); }
.grade-item.sold-out .gqty .left { color: #999; }

/* 차감 시 깜빡임 효과 */
@keyframes stockBlink {
  0%, 100% { color: var(--pink-deep); }
  50%      { color: var(--yellow); transform: scale(1.2); }
}
.grade-item .gqty .left.flash { animation: stockBlink .5s ease; }

/* 번호판 */
.board-wrap {
  background: white;
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  margin-bottom: 32px;
  /* 드래그 다중 선택 시 텍스트 선택 방지 */
  user-select: none;
  -webkit-user-select: none;
}

/* 박스 셀렉트 시각화 (직선/대각선 모두 영역 안 셀 일괄 선택)
   z-index: 뽑기 팝업(.draw-popup-overlay z:600) 위에 떠야 사용자가 드래그 범위를 볼 수 있음 */
.drag-box {
  position: fixed;
  pointer-events: none;
  border: 2px dashed var(--pink-deep);
  background: rgba(255, 64, 129, 0.08);
  border-radius: 6px;
  z-index: 650;
  box-sizing: border-box;
}
.drag-box.remove {
  border-color: #888;
  background: rgba(120, 120, 120, 0.1);
}
.board-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.board-head h3 { font-family: 'Jua'; font-size: 22px; }
.board-type-chip {
  font-family: 'Jua';
  font-size: 12.5px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: .3px;
  box-shadow: 0 3px 0 rgba(192, 38, 94, .3);
}
.board-type-chip.is-num {
  background: linear-gradient(135deg, var(--mint), #2da884);
  box-shadow: 0 3px 0 rgba(45, 168, 132, .3);
}
.board-tabs { display: flex; gap: 6px; background: var(--bg); padding: 4px; border-radius: 999px; }
.board-tab {
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-soft);
  font-family: 'Pretendard';
}
.board-tab.active { background: var(--pink); color: white; box-shadow: 0 3px 0 var(--pink-deep); }

/* ============ 추첨권 보드 ============
   8개 고정 그리드 — 모달 안에서 가로 영역 깨지지 않도록 8 열 고정 + Y축 확장.
   메인 페이지의 인라인 보드는 화면 폭을 넘기지 않도록 minmax 로 자동 축소. */
.alpha-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 100px));
  gap: 10px;
  justify-content: center;
}
.alpha-row { display: contents; }
.alpha-cells { display: contents; }
.num-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 100px));
  gap: 10px;
  justify-content: center;
}
/* 모달 안에서는 폭 제한 (양 끝 잘림 방지) */
.draw-popup-card .alpha-board,
.draw-popup-card .num-board {
  max-width: 100%;
  margin: 0 auto;
}

/* ============================================
   추첨권 티켓 디자인 (HIGH QUALITY) — 2:1 비율 (100×50)
   admin 권장 600×300 (2:1) 티켓 이미지와 동일 비율
   ============================================ */
.cell.ticket {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard', sans-serif;
  /* 부드러운 오프화이트 그라데이션 + 미세한 inner highlight + soft shadow */
  background: linear-gradient(165deg, #FFFFFF 0%, #F0F0F2 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(0, 0, 0, .04),
    0 1px 0 rgba(0, 0, 0, .03);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1),
              box-shadow .18s cubic-bezier(.4, 0, .2, 1);
  isolation: isolate;
  /* ⚠ 성능: 100셀 보드에서 paint 영역을 셀 단위로 격리 → hover/select 시 다른 셀까지 paint 가지 않음 */
  contain: layout style paint;
}
/* 가운데 점선 perforation — 세로 (2:1 비율 셀에 맞춤) */
.cell.ticket::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px;
  left: 50%;
  width: 0;
  border-left: 1.5px dashed rgba(0, 0, 0, .12);
  pointer-events: none;
  z-index: 1;
  transition: border-color .18s;
}
/* 상단 광택 하이라이트 — 고급감 */
.cell.ticket::after {
  content: '';
  position: absolute;
  top: 1px; left: 7px; right: 7px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, transparent 100%);
  border-radius: 9px 9px 999px 999px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
/* ? 마크 — 2:1 셀에 맞춘 적정 크기 */
.cell.ticket .cell-mark {
  font-family: 'Jua', sans-serif;
  font-size: 20px;
  color: #B8B8C2;
  line-height: 1;
  position: relative;
  z-index: 2;
  user-select: none;
  transition: color .18s, transform .18s;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* 호버 — 가볍게 떠오름 + 핑크 액센트 */
.cell.ticket:hover:not(.selected):not(.sold) {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 107, 157, .55),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 16px rgba(255, 107, 157, .18),
    0 2px 4px rgba(0, 0, 0, .05);
}
.cell.ticket:hover:not(.selected):not(.sold) .cell-mark {
  color: var(--pink-deep);
  transform: scale(1.08);
}

/* ============================================
   선택됨 — 티켓 이미지 유지 + 깔끔한 핑크 프레임 + 좌상단 코너 체크 배지
   (이전: 진한 핑크 그라데이션이 이미지를 덮음. 사용자 피드백으로 이미지 살리는 방향 변경)
   ============================================ */
.cell.ticket.selected {
  /* 배경 이미지는 .cell.ticket:not(.sold) 규칙에서 var(--ticket-img) 가 그대로 적용됨 */
  box-shadow:
    inset 0 0 0 2.5px #FF4081,
    0 0 0 3px rgba(255, 64, 129, .14),
    0 8px 18px rgba(255, 64, 129, .25);
  z-index: 3;
  cursor: default;
  transform: translateY(-3px);
  animation: ticketPick .28s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ticketPick {
  0%   { transform: translateY(0) scale(1); }
  55%  { transform: translateY(-5px) scale(1.025); }
  100% { transform: translateY(-3px) scale(1); }
}
.cell.ticket.selected .cell-mark { display: none; }
/* perforation line / 광택은 티켓 이미지와 함께 보이면 지저분 — 숨김 */
.cell.ticket.selected::before { display: none; }
.cell.ticket.selected::after { display: none; }

/* 체크 배지 — 좌상단 코너 작은 핑크 원 (세련된 인디케이터) */
.cell.ticket .cell-check {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  background: #FF4081;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 64, 129, .45), 0 0 0 1.5px white;
  z-index: 4;
  pointer-events: none;
}
.cell.ticket .cell-check::before { display: none; } /* 구 골드 링 제거 */
.cell.ticket .cell-check svg {
  width: 11px;
  height: 11px;
  display: block;
  color: white;
  stroke-width: 4;
  filter: none;
}
.cell.ticket.selected .cell-check {
  display: flex;
  animation: checkBadgePop .26s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes checkBadgePop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================
   매진 — 페이드 회색 (interaction 비활성)
   ============================================ */
.cell.ticket.sold {
  background: linear-gradient(165deg, #F5F5F5 0%, #E8E8E8 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, .04),
    0 1px 0 rgba(0, 0, 0, .02);
  pointer-events: none;
  opacity: .55;
}
.cell.ticket.sold .cell-mark {
  color: #C8C8C8;
  text-decoration: line-through;
  text-decoration-color: #B0B0B0;
  text-decoration-thickness: 2px;
}
.cell.ticket.sold::before { border-left-color: rgba(0, 0, 0, .06); }
.cell.ticket.sold::after { display: none; }

/* ============================================
   브랜드 티켓 이미지 (admin 업로드 또는 기본 webp) — 셀이 2:1 비율이라 이미지가 정확히 fit
   --ticket-img: 컬러(뽑기 전) / --ticket-img-gray: 흑백(뽑은 후)
   :root 에 기본값이 박혀있어 보드 클래스(.has-ticket-img) 게이트 없이도 항상 표시.
   admin 콘솔에서 커스텀 이미지 등록 시 JS applyTicketImages 가 보드 element 에 더
   구체적인 var 를 set 하여 자동으로 그게 우선 적용됨.
   ============================================ */
.cell.ticket:not(.sold) {
  background-color: #FFFFFF;
  background-image: var(--ticket-img);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.cell.ticket:not(.sold) .cell-mark { display: none; }
.cell.ticket:not(.sold)::after { display: none; }

/* 이미 뽑힌(sold) 셀 — 흑백 티켓 이미지로 교체 */
.cell.ticket.sold {
  background-color: #FFFFFF;
  background-image: var(--ticket-img-gray, var(--ticket-img));
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .85;
}
.cell.ticket.sold .cell-mark { display: none; }
.cell.ticket.sold::before { border-left-color: rgba(0, 0, 0, .04); }

/* ============================================
   ✕ 해제 버튼 — 선택 시 우상단 부착
   ============================================ */
.cell .cell-x {
  position: absolute;
  /* contain: paint 가 .cell.ticket 에 걸려있어 음수 좌표로 빠져나가면 잘림.
     셀 안쪽 우상단에 살짝 띄워 배치 — 가시성 확보 */
  top: 3px; right: 3px;
  width: 22px; height: 22px;
  background: #1A1A1A;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  cursor: pointer;
  z-index: 5;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .15s;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.cell.selected .cell-x { display: flex; animation: xPop .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes xPop {
  0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.cell .cell-x:hover { background: #FF4081; transform: scale(1.18) rotate(90deg); }
.cell.sold .cell-x { display: none; }

@media (max-width: 600px) {
  .cell.ticket { height: 50px; border-radius: 10px; }
  .cell.ticket .cell-mark { font-size: 20px; }
  .cell.ticket .cell-check { width: 16px; height: 16px; top: 3px; left: 3px; }
  .cell.ticket .cell-check svg { width: 10px; height: 10px; }
}

.board-legend { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-soft); align-items: center; font-weight: 600; }
.board-legend span { display: inline-flex; align-items: center; gap: 6px; }
.board-legend .swatch { width: 14px; height: 14px; border-radius: 4px; border: 2px solid #eee; }
.board-legend .swatch.sold { background: #f4f4f4; }
.board-legend .swatch.sel { background: var(--pink); border-color: var(--pink-deep); }
.clear-sel-btn {
  margin-left: auto;
  background: white;
  color: var(--pink-deep);
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 0 rgba(255, 107, 157, .25);
  transition: all .15s;
}
.clear-sel-btn::before {
  content: '✕';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--pink);
  color: white;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}
.clear-sel-btn:hover {
  background: var(--pink);
  color: white;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(255, 107, 157, .25);
}
.clear-sel-btn:hover::before {
  background: white;
  color: var(--pink-deep);
}
.clear-sel-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(255, 107, 157, .25);
}

/* 뽑기 액션 바 */
.draw-row {
  background: white;
  border-radius: 24px;
  padding: 18px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
  border: 3px solid var(--bg-2);
  z-index: 5;
}
.draw-info-wrap { display: flex; align-items: center; gap: 14px; }
.sel-badge {
  font-family: 'Jua';
  font-size: 24px;
  background: var(--pink);
  color: white;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.draw-info { font-size: 13.5px; color: var(--text-soft); }
.draw-info b { font-family: 'Jua'; font-size: 17px; color: var(--text); display: block; margin-bottom: 2px; }
.draw-info span { font-size: 12.5px; }
.draw-btn {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink));
  color: white;
  border: none;
  padding: 18px 32px;
  border-radius: 999px;
  font-family: 'Jua';
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 #c0265e;
  transition: transform .15s;
  flex-shrink: 0;
}
.draw-btn:hover:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #c0265e; }
.draw-btn:disabled { background: #ddd; box-shadow: 0 4px 0 #bbb; cursor: not-allowed; }

/* 뽑기 모달 — 모달 자체에서 스크롤 처리 (카드 짤림 방지)
   z-index: 700 — draw-popup-overlay(600) 보다 위에 위치해 추첨 결과가 팝업 위로 노출 */
.draw-modal {
  position: fixed; inset: 0;
  background: rgba(20, 10, 30, 0.85);
  backdrop-filter: blur(8px);
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .3s ease;
  overflow-y: auto;
}
.draw-modal.show { display: flex; }
.draw-stage {
  background: white;
  border-radius: 28px;
  padding: 32px 32px 28px;
  text-align: center;
  max-width: 720px;
  width: 100%;
  position: relative;
  margin: auto;
  /* 카드 수에 관계없이 일관된 레이아웃 — 콘텐츠 크기에 자연스럽게 적응 */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.draw-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,201,60,.3), transparent 60%);
  pointer-events: none;
  border-radius: 32px;
}
.draw-stage h2 { font-family: 'Jua'; font-size: 26px; margin-bottom: 6px; position: relative; flex-shrink: 0; }
.draw-stage > p { color: var(--text-soft); margin-bottom: 18px; position: relative; flex-shrink: 0; font-size: 14px; }

/* 결과 그리드 (플립 카드들) — 600×300 (2:1) 비율 카드 200×100 고정 */
.draw-results-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 8px 4px;
  perspective: 1200px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 157, 0.4) transparent;
  align-content: start;
}
.draw-results-grid::-webkit-scrollbar { width: 8px; }
.draw-results-grid::-webkit-scrollbar-track { background: transparent; }
.draw-results-grid::-webkit-scrollbar-thumb { background: rgba(255, 107, 157, 0.4); border-radius: 999px; }
.draw-results-grid::-webkit-scrollbar-thumb:hover { background: var(--pink); }
.draw-results-grid.loading {
  min-height: 280px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 0;
}
.draw-results-grid.loading::after { content: none; }

/* ===== 추첨 중 연출 — 티켓 카드 셔플 ===== */
.draw-loader {
  display: flex; gap: 14px;
  justify-content: center;
  padding: 24px 0;
}
.draw-loader-card {
  width: 70px; height: 96px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF4081 0%, #FF6B9D 50%, #FFC93C 100%);
  box-shadow: 0 10px 24px rgba(255,64,129,.45), inset 0 0 0 2px rgba(255,255,255,.25);
  position: relative;
  animation: ticketShuffle 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.draw-loader-card::before {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 8px;
  background-color: rgba(255,255,255,.95);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4 8 H28 Q30 8 30 10 V13.5 A3 3 0 0 0 30 18.5 V22 Q30 24 28 24 H4 Q2 24 2 22 V18.5 A3 3 0 0 0 2 13.5 V10 Q2 8 4 8 Z' fill='%23FF4081'/><rect x='5' y='10.5' width='22' height='11' rx='1.2' fill='%23fff'/><line x1='16' y1='11' x2='16' y2='21' stroke='%23FF4081' stroke-width='0.6' stroke-dasharray='1.2 1.4'/><path d='M9.5 13.7 L10.3 15.4 L12.1 15.7 L10.8 16.95 L11.15 18.7 L9.5 17.85 L7.85 18.7 L8.2 16.95 L6.9 15.7 L8.7 15.4 Z' fill='%23FFC93C' stroke='%23FF4081' stroke-width='0.5' stroke-linejoin='round'/><path d='M22.5 13.7 L23.3 15.4 L25.1 15.7 L23.8 16.95 L24.15 18.7 L22.5 17.85 L20.85 18.7 L21.2 16.95 L19.9 15.7 L21.7 15.4 Z' fill='%23FFC93C' stroke='%23FF4081' stroke-width='0.5' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64% auto;
}
.draw-loader-card:nth-child(1) { animation-delay: 0s; }
.draw-loader-card:nth-child(2) { animation-delay: .18s; }
.draw-loader-card:nth-child(3) { animation-delay: .36s; }
@keyframes ticketShuffle {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  25%      { transform: translateY(-14px) rotate(0deg) scale(1.05); }
  50%      { transform: translateY(0) rotate(4deg) scale(1); }
  75%      { transform: translateY(-6px) rotate(0deg) scale(.98); }
}

.draw-loader-tagline {
  text-align: center;
  color: white;
  font-family: 'Jua', sans-serif;
  font-size: 18px;
  letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  display: flex; gap: 6px; justify-content: center;
  align-items: center;
}
.draw-loader-tagline .pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  animation: dotBlink 0.9s ease-in-out infinite;
}
.draw-loader-tagline .pulse-dot:nth-child(2) { animation-delay: .15s; }
.draw-loader-tagline .pulse-dot:nth-child(3) { animation-delay: .3s; }
@keyframes dotBlink {
  0%, 60%, 100% { opacity: .25; transform: scale(.8); }
  30% { opacity: 1; transform: scale(1.2); }
}

/* ============================================
   뽑기 대기 큐 오버레이 (다른 사용자가 뽑는 중일 때 노출)
   ============================================ */
#drawQueueOverlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 30, .7);
  backdrop-filter: blur(10px);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .3s ease;
}
#drawQueueOverlay.show { display: flex; }
#drawQueueOverlay .dq-card {
  background: white;
  border-radius: 28px;
  padding: 40px 36px 32px;
  text-align: center;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: dqPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes dqPop {
  from { opacity: 0; transform: scale(.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#drawQueueOverlay .dq-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 14px;
  display: inline-block;
  animation: dqSpin 2.4s ease-in-out infinite;
}
@keyframes dqSpin {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}
#drawQueueOverlay .dq-title {
  font-family: 'Jua', sans-serif;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 8px;
}
#drawQueueOverlay .dq-sub {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 22px;
}
#drawQueueOverlay .dq-pos {
  background: linear-gradient(135deg, var(--bg-2), var(--bg));
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
#drawQueueOverlay .dq-pos-label {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 700;
}
#drawQueueOverlay .dq-pos-num {
  font-family: 'Jua', sans-serif;
  font-size: 38px;
  color: var(--pink-deep);
  background: linear-gradient(135deg, #ff4081, #ffc93c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#drawQueueOverlay .dq-pos-of {
  font-family: 'Jua', sans-serif;
  font-size: 16px;
  color: var(--text);
}
#drawQueueOverlay .dq-hint {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 22px;
  line-height: 1.6;
}
#drawQueueOverlay .dq-leave {
  background: white;
  border: 2px solid var(--pink);
  color: var(--pink-deep);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
#drawQueueOverlay .dq-leave:hover {
  background: var(--pink);
  color: white;
}

/* 대기 중 — 보드 / 뽑기 버튼 비활성화 */
/* ===== 뽑기 게이트 (1차 진입) ===== */
.draw-gate {
  margin: 28px 0 32px;
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.draw-gate .gate-btn {
  width: 100%;
  padding: 22px 24px;
  background: linear-gradient(135deg, #FF4081, #FF6B9D);
  color: white;
  border: none;
  border-radius: 18px;
  font-family: 'Jua';
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 6px 0 #C2185B, 0 14px 28px rgba(255,64,129,.35);
  transition: transform .12s, box-shadow .12s;
  position: relative;
}
.draw-gate .gate-btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 #C2185B, 0 10px 20px rgba(255,64,129,.4); }
.draw-gate .gate-btn:disabled,
.draw-gate .gate-btn.is-waiting {
  background: linear-gradient(135deg, #9CA3AF, #6B7280);
  box-shadow: 0 6px 0 #4B5563, 0 14px 28px rgba(75,85,99,.25);
  cursor: not-allowed;
}
.draw-gate .gate-btn.is-sold-out {
  background: linear-gradient(135deg, #6B7280, #374151);
  box-shadow: 0 6px 0 #1F2937;
  cursor: not-allowed;
}
.draw-gate .gate-btn .kj-svg-icon { width: 26px; height: 26px; }

.draw-gate .gate-notice {
  background: linear-gradient(135deg, #FFF7E6, #FCE7BA);
  border: 1.5px solid #FCD34D;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 13px; line-height: 1.7; color: #78350F;
}
.draw-gate .gate-notice .gate-lead {
  font-family: 'Jua'; font-size: 14px; color: #92400E; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.draw-gate .gate-notice .gate-lead::before { content: '📢'; font-size: 16px; }
.draw-gate .gate-notice ul { padding-left: 18px; }
.draw-gate .gate-notice li { margin-bottom: 4px; }
.draw-gate .gate-notice li b { color: #92400E; }
.draw-gate .gate-notice .gate-warn {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, .08);
  border: 1.5px solid rgba(239, 68, 68, .35);
  border-radius: 10px;
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}
.draw-gate .gate-notice .gate-warn b { color: #B91C1C; }

/* ===== 재고 현황판 (인라인, 비상호작용) =====
   뽑으러 가기 버튼 위에 배치, 현재 남은 티켓을 단순 가시성 목적으로 노출.
   클릭/선택/드래그 모두 비활성. 매진 셀은 흑백 티켓 이미지로 표시. */
.stock-preview-wrap {
  margin: 18px auto 0;
  max-width: 980px;
  background: white;
  border: 1.5px solid var(--bg-2, #f1e6ea);
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.stock-preview-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stock-preview-head h3 { font-family: 'Jua'; font-size: 20px; color: var(--text, #2a2a2a); margin: 0; padding: 8px 14px; background: linear-gradient(135deg, #FFE4F0, #FFD0E2); border: 1.5px solid var(--pink, #FF6B9D); border-radius: 12px; box-shadow: 0 3px 0 rgba(255, 64, 129, .18); display: inline-flex; align-items: center; gap: 6px; }
.stock-preview-head small,
.stock-preview-head .stock-preview-notice {
  display: inline-block;
  padding: 9px 14px;
  background: linear-gradient(135deg, #FFF7E6, #FCE7BA);
  border: 1.5px solid #FCD34D;
  border-radius: 10px;
  color: #92400E;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.stock-preview-head .stock-preview-notice b { color: #B91C1C; }
.stock-preview-board {
  /* 사용자 요청: 가로 8장 고정 / 세로축으로 자동 늘어남 (실제 뽑기판과 동일 레이아웃) */
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  justify-content: center;
  user-select: none;
  padding-bottom: 4px;
}
.stock-preview-board .pv-cell {
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  background-color: #FFFFFF;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1.5px solid rgba(0,0,0,.04);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  pointer-events: none;
}
.stock-preview-board .pv-cell.sold { opacity: .85; }
@media (max-width: 720px) {
  .stock-preview-wrap { padding: 14px 12px; border-radius: 14px; }
  /* 모바일에서도 8열 유지하되 셀 자체 폭을 줄임 */
  .stock-preview-board { gap: 5px; }
}

/* ===== 뽑기 팝업 ===== */
.draw-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(20,20,30,.65);
  backdrop-filter: blur(8px);
  z-index: 600;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.draw-popup-overlay.show { display: flex; opacity: 1; }
.draw-popup-card {
  background: white;
  border-radius: 24px;
  width: 100%; max-width: 980px;
  max-height: 92vh;
  /* 카드 자체는 스크롤하지 않고 내부 board-wrap 만 스크롤 — 우상단 닫기 버튼 잘림 방지 +
     하단 CTA 고정 가능하도록 flex-column 으로 재구성 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(20px) scale(.96);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.draw-popup-overlay.show .draw-popup-card { transform: translateY(0) scale(1); }

.draw-popup-card .dp-head {
  flex-shrink: 0;
  background: linear-gradient(135deg, #FF4081, #FF6B9D);
  color: white;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 24px 24px 0 0;
  z-index: 5;
}
.draw-popup-card .dp-timer {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Pretendard'; font-weight: 700; font-size: 14px;
}
.draw-popup-card .dp-timer .dp-timer-ico { font-size: 18px; }
.draw-popup-card .dp-timer b {
  font-family: 'Jua'; font-size: 22px;
  background: rgba(255,255,255,.22);
  padding: 4px 12px; border-radius: 10px;
  letter-spacing: .5px; min-width: 64px; text-align: center;
}
.draw-popup-card .dp-timer.warn b {
  background: rgba(255,255,255,.95);
  color: #B91C1C;
  animation: dpTimerPulse .6s ease-in-out infinite alternate;
}
@keyframes dpTimerPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.draw-popup-card .dp-close {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: white; font-size: 18px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .12s;
}
.draw-popup-card .dp-close:hover { background: rgba(255,255,255,.4); transform: rotate(90deg); }

/* 가운데(보드) 영역만 스크롤 — 우상단/하단이 잘리지 않도록 별도 스크롤 컨테이너 */
.draw-popup-card .board-wrap {
  margin: 0;
  padding: 20px 24px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* 하단 CTA — 항상 고정 (스크롤 없이 즉시 클릭 가능) */
.draw-popup-card .draw-row {
  flex-shrink: 0;
  margin: 0;
  padding: 14px 24px 18px;
  background: white;
  border-top: 1.5px solid rgba(0, 0, 0, .06);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, .04);
  border-radius: 0 0 24px 24px;
}

@media (max-width: 600px) {
  .draw-popup-card { border-radius: 18px; }
  .draw-popup-card .dp-head { padding: 14px 18px; border-radius: 18px 18px 0 0; }
  .draw-popup-card .dp-timer b { font-size: 18px; padding: 3px 10px; }
  .draw-popup-card .board-wrap { padding: 14px 16px 12px; }
  .draw-popup-card .draw-row { padding: 12px 16px 16px; border-radius: 0 0 18px 18px; }
}

/* 팝업 외부에는 board가 보이지 않도록 — popup이 열렸을 때 body scroll 차단 */
body.draw-popup-open { overflow: hidden; }

body.dq-waiting .board-wrap,
body.dq-waiting .draw-row {
  opacity: .35;
  pointer-events: none;
  filter: grayscale(.4);
}

/* ===== 결과 카드 글린트(미오픈 카드 hover 시 빛 흐름) ===== */
.result-card:not(.flipped) .rc-back {
  /* position 은 .rc-back, .rc-front 공통 absolute + inset: 0 유지 (카드 크기 보존) */
  overflow: hidden;
}
/* === 대량 뽑기(>30장) 시 무거운 idle 애니메이션 비활성화 — 렉 방지 === */
.draw-results-grid.bulk-mode .result-card:not(.flipped) .rc-back {
  animation: none !important;
}
.draw-results-grid.bulk-mode .result-card:not(.flipped) .rc-back::after {
  display: none;
}
.draw-results-grid.bulk-mode .rc-back::before {
  /* 도트 패턴도 무거우므로 단순화 */
  background: none;
}
.draw-results-grid.bulk-mode .result-card {
  animation-duration: .25s;
}
.result-card:not(.flipped) .rc-back::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: cardGlint 3.5s ease-in-out infinite;
}
@keyframes cardGlint {
  0%, 70% { left: -120%; }
  85% { left: 120%; }
  100% { left: 120%; }
}
.result-card:not(.flipped):hover .rc-back::after { animation-duration: 1.2s; }

/* "한 장씩 뽑기" 클릭 직전 카드 강조 */
.result-card.next-pulse { animation: nextPulse .35s ease-out; }
@keyframes nextPulse {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 64, 129, 0)); }
  50%  { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(255, 64, 129, .6)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 64, 129, 0)); }
}

/* ===== S/Last 등급 화면 플래시 ===== */
body.draw-flash::before {
  content: '';
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: 9100;
  pointer-events: none;
  animation: drawFlash .55s ease-out;
}
@keyframes drawFlash {
  0% { opacity: 0; }
  20% { opacity: .85; }
  100% { opacity: 0; }
}

/* ===== 추첨 결과 요약 (그리드 밖, draw-stage 직속) ===== */
.draw-summary {
  margin: 4px auto 16px;
  max-width: 100%;
  background: linear-gradient(135deg, #FFF8F3, #FFE8EE);
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  color: var(--text);
  animation: summaryIn .45s cubic-bezier(.34, 1.56, .64, 1);
  text-align: left;
  flex-shrink: 0;
}
@keyframes summaryIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.draw-summary h4 {
  font-family: 'Jua', sans-serif;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.draw-summary .ds-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.draw-summary .ds-cell {
  background: white;
  border-radius: 999px;
  padding: 8px 16px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 90px;
  justify-content: center;
}
.draw-summary .ds-cell .lbl { font-size: 11.5px; color: var(--text-soft); font-weight: 800; letter-spacing: .04em; }
.draw-summary .ds-cell .val { font-family: 'Jua', sans-serif; font-size: 18px; color: var(--text); line-height: 1; }
.draw-summary .ds-cell.s .val,
.draw-summary .ds-cell.last .val { background: linear-gradient(135deg, #ff4081, #ffc93c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.draw-summary .ds-cell.a .val { color: #d99500; }
.draw-summary .ds-cell.b .val { color: #2a8bd8; }
.draw-summary .ds-cell.c .val { color: #2da884; }
.draw-summary .ds-cell.d .val,
.draw-summary .ds-cell.e .val,
.draw-summary .ds-cell.f .val,
.draw-summary .ds-cell.g .val,
.draw-summary .ds-cell.h .val { color: #555; }

/* 플립 카드 컨테이너 — 2:1 비율 (200×100) */
.result-card {
  position: relative;
  aspect-ratio: 2 / 1;
  cursor: pointer;
  animation: rcPop .35s cubic-bezier(.34, 1.56, .64, 1);
  /* common.css 의 전역 .gr-* { background: ... } 가 카드 모서리로 비치는 것 차단 */
  background: transparent !important;
  border-radius: 14px;
}
/* 미완료 뽑기에서 복원된 카드는 등장/임팩트 애니메이션 없이 즉시 정적 노출 */
.result-card.restored,
.result-card.restored.flipped.gr-s,
.result-card.restored.flipped.gr-a,
.result-card.restored.flipped.gr-b,
.result-card.restored.flipped.gr-c,
.result-card.restored.flipped.gr-d,
.result-card.restored.is-last.flipped {
  animation: none !important;
}
.result-card.restored .rc-flipper { transition: none !important; }
@keyframes rcPop {
  0% { opacity: 0; transform: scale(.6) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 카드 회전부 */
.rc-flipper {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4, .15, .25, 1);
}
.result-card.flipped .rc-flipper { transform: rotateY(180deg); }

/* 양면 공통 — 동일 dimension/border/shadow 로 통일 (2:1 카드) */
.rc-back, .rc-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 3px solid white;
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
  box-sizing: border-box;
}
/* 양면 모두 overflow hidden — 둥근 모서리가 깔끔하게 떨어지도록 */
.rc-back, .rc-front { overflow: hidden; }
/* 뒷면이 정면일 때 가장 위에 (앞면 색이 비치지 않도록 보장) */
.result-card:not(.flipped) .rc-back { z-index: 2; }
.result-card:not(.flipped) .rc-front { z-index: 1; }
/* 플립 완료 후엔 뒷면을 완전히 숨김 (모서리 색 누설 차단) */
.result-card.flipped .rc-back {
  visibility: hidden;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 뒷면 (?) */
.rc-back {
  background:
    /* 광택 sweep — 좌상단 highlight */
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .35) 0%, transparent 55%),
    /* 메인 그라데이션 — 핑크 → 마젠타 → 골드 */
    linear-gradient(155deg, #FF85AB 0%, #FF4081 35%, #D81B60 70%, #FFB347 100%);
  color: white;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .25),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 6px rgba(120, 20, 60, .35);
  /* position: absolute + inset: 0 은 .rc-back, .rc-front 공통 규칙에서 적용됨 */
}
/* 미세 패턴 (도트) — 프리미엄 질감 */
.rc-back::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.15) 1.5px, transparent 2px),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,.12) 1.5px, transparent 2px);
  background-size: 18px 18px, 22px 22px;
  pointer-events: none;
  z-index: 0;
}
.rc-back .q {
  font-family: 'Jua', sans-serif;
  font-size: 44px;
  text-shadow:
    0 3px 10px rgba(120, 20, 60, .45),
    0 2px 0 rgba(0, 0, 0, .15),
    0 0 18px rgba(255, 215, 100, .35);
  position: relative;
  z-index: 1;
}
.rc-back .hint {
  position: absolute;
  bottom: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(0, 0, 0, .35);
  color: #FFE082;
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
  z-index: 1;
}

/* 브랜드 컬러 티켓 이미지 — 결과 카드 뒷면 (안 뽑힌 비포 상태)
   2:1 카드에 컬러 webp(티켓 이미지 활성화)가 정확히 fit. :root 의 --ticket-img 기본값으로 항상 동작.
   admin 콘솔에서 커스텀 이미지 등록 시 JS 가 .draw-results-grid 에 더 구체적인 var 를 set 하여 우선 적용. */
.rc-back {
  background-color: #FFFFFF;
  background-image: var(--ticket-img);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.rc-back::before { display: none; }
.rc-back .q { display: none; }
.rc-back .hint { bottom: 8px; }
.result-card:not(.flipped) .rc-back {
  animation: cardWiggle 2.4s ease-in-out infinite;
}
.result-card:not(.flipped):hover .rc-back {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
  animation-play-state: paused;
}
@keyframes cardWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.5deg); }
  75% { transform: rotate(1.5deg); }
}

/* ============================================
   앞면 (결과) — 등급별 그라데이션 배경 + 큰 이미지 + 프리미엄 등급 배지
   뒷면(rc-back) 의 프리미엄 톤과 일관되게 디자인
   ============================================ */
/* 앞면 (결과) — 가로 레이아웃: 좌측 이미지 / 우측 등급+이름 */
.rc-front {
  transform: rotateY(180deg);
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "img grade"
    "img name";
  gap: 4px 10px;
  align-items: center;
  align-content: center;
  padding: 8px 12px;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .55) 0%, transparent 55%),
    linear-gradient(160deg, #FFFFFF 0%, #F4F4F4 100%);
}
/* 이미지/이모지 래퍼 — 좌측 정사각형 영역 */
.rc-front .rc-imgwrap {
  grid-area: img;
  width: 76px;
  height: 76px;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .12),
    inset 0 0 0 1px rgba(0, 0, 0, .04);
  overflow: hidden;
  flex-shrink: 0;
}
.rc-front .rc-emoji { font-size: 42px; line-height: 1; }
.rc-front .rc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* 등급 배지 — 우측 상단 */
.rc-front .rc-grade {
  grid-area: grade;
  justify-self: start;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* 상품명 — 우측 하단 */
.rc-front .rc-name {
  grid-area: name;
  justify-self: start;
  font-size: 12px;
  color: var(--text);
  text-align: left;
  line-height: 1.25;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
}

/* === 등급별 카드 앞면 배경 (back 톤과 일관) === */
.result-card.gr-s .rc-front {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .5) 0%, transparent 55%),
    linear-gradient(160deg, #FFE4EC 0%, #FFF6E5 100%);
}
.result-card.gr-a .rc-front {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .5) 0%, transparent 55%),
    linear-gradient(160deg, #FFF8E0 0%, #FFEFC4 100%);
}
.result-card.gr-b .rc-front {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .5) 0%, transparent 55%),
    linear-gradient(160deg, #E5F3FF 0%, #C5E8FF 100%);
}
.result-card.gr-c .rc-front {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .5) 0%, transparent 55%),
    linear-gradient(160deg, #E0F8EE 0%, #C8F2DE 100%);
}
.result-card.gr-d .rc-front {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .55) 0%, transparent 55%),
    linear-gradient(160deg, #F8F8F8 0%, #ECECEC 100%);
}

/* ============================================
   등급별 오픈 임팩트 (프리미엄 모션)
   - S: 무지개 다중 글로우 + 흔들림
   - A: 골드 메탈릭 글로우
   - B: 사파이어 블루 펄스
   - C: 에메랄드 펄스
   - D: 차분한 페이드인
   ============================================ */

/* S/라스트원 — 무지개 메탈릭 임팩트 + 회전 흔들림 + 강한 다중 글로우 */
.result-card.flipped.gr-s {
  animation: rcImpactS 1.6s .55s cubic-bezier(.34, 1.56, .64, 1) both;
  z-index: 10;
}
@keyframes rcImpactS {
  0%   { transform: scale(1) rotate(0);           filter: none; }
  15%  { transform: scale(1.12) rotate(-5deg);    filter: drop-shadow(0 0 28px #FF1F6D) drop-shadow(0 0 40px #FFC93C) brightness(1.12); }
  30%  { transform: scale(1.07) rotate(5deg);     filter: drop-shadow(0 0 32px #FFC93C) drop-shadow(0 0 18px #FF4081) brightness(1.1); }
  45%  { transform: scale(1.10) rotate(-3deg);    filter: drop-shadow(0 0 30px #FF4081) drop-shadow(0 0 42px #FFB347); }
  60%  { transform: scale(1.05) rotate(2deg);     filter: drop-shadow(0 0 22px #FFC93C) drop-shadow(0 0 32px #FF1F6D); }
  80%  { transform: scale(1.03) rotate(-1deg);    filter: drop-shadow(0 0 14px #FF4081); }
  100% { transform: scale(1) rotate(0);           filter: drop-shadow(0 8px 18px rgba(255, 64, 129, .35)) drop-shadow(0 4px 12px rgba(255, 201, 60, .25)); }
}

/* A상 — 골드 메탈릭 글로우 */
.result-card.flipped.gr-a {
  animation: rcImpactA 1.2s .55s cubic-bezier(.34, 1.56, .64, 1) both;
  z-index: 5;
}
@keyframes rcImpactA {
  0%   { transform: scale(1) rotate(0);           filter: none; }
  25%  { transform: scale(1.10) rotate(-2.5deg);  filter: drop-shadow(0 0 24px #FFC93C) drop-shadow(0 0 14px #E5A800) brightness(1.08); }
  55%  { transform: scale(1.05) rotate(1.5deg);   filter: drop-shadow(0 0 18px #FFD76B) drop-shadow(0 0 10px #C68A00); }
  100% { transform: scale(1) rotate(0);           filter: drop-shadow(0 6px 14px rgba(217, 149, 0, .35)); }
}

/* B상 — 사파이어 블루 펄스 */
.result-card.flipped.gr-b {
  animation: rcImpactB 1s .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes rcImpactB {
  0%   { transform: scale(1);    filter: none; }
  35%  { transform: scale(1.08) rotate(-1deg); filter: drop-shadow(0 0 22px #6EC5FF) drop-shadow(0 0 12px #2A8BD8); }
  65%  { transform: scale(1.04); filter: drop-shadow(0 0 14px #2A8BD8); }
  100% { transform: scale(1);    filter: drop-shadow(0 4px 12px rgba(42, 139, 216, .3)); }
}

/* C상 — 에메랄드 펄스 */
.result-card.flipped.gr-c {
  animation: rcImpactC .85s .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes rcImpactC {
  0%   { transform: scale(1);    filter: none; }
  45%  { transform: scale(1.06); filter: drop-shadow(0 0 18px #7FE3C5) drop-shadow(0 0 10px #2DA884); }
  100% { transform: scale(1);    filter: drop-shadow(0 3px 10px rgba(45, 168, 132, .28)); }
}

/* D상 — 차분한 페이드 (가장 약한 반응) */
.result-card.flipped.gr-d {
  animation: rcImpactD .65s .55s ease both;
}
@keyframes rcImpactD {
  0%   { transform: scale(1);    filter: none; }
  55%  { transform: scale(1.03); filter: drop-shadow(0 0 8px rgba(150, 150, 150, .4)); }
  100% { transform: scale(1);    filter: none; }
}

/* 라스트원 — S 임팩트 모션 + 임팩트 끝난 뒤 무한 골드 펄스 (보더 대신 외곽 글로우) */
.result-card.is-last.flipped {
  animation:
    rcImpactS 1.5s .55s cubic-bezier(.34, 1.56, .64, 1) both,
    shineLast 1.8s ease 2.1s infinite alternate;
  z-index: 10;
}
@keyframes shineLast {
  from { filter: drop-shadow(0 6px 18px rgba(255, 64, 129, .35)); }
  to   { filter: drop-shadow(0 10px 28px rgba(255, 201, 60, .8)); }
}
.result-card.is-last.flipped .rc-front::before {
  content: '🏆 LAST';
  position: absolute;
  top: 8px; right: 8px;
  background: var(--pink-deep);
  color: white;
  font-family: 'Jua';
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
}
/* 라스트원: 카드 모서리에 회전 스파클 */
.result-card.is-last.flipped::after {
  content: '✨';
  position: absolute;
  top: -14px; left: -10px;
  font-size: 28px;
  pointer-events: none;
  animation: lastSparkle 1.4s .8s ease both;
}
@keyframes lastSparkle {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  25%  { opacity: 1; transform: scale(1.5) rotate(180deg); }
  60%  { opacity: 1; transform: scale(1.2) rotate(360deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(540deg); }
}

/* 오픈 진행 정보 */
.draw-progress {
  font-size: 12px;
  color: var(--text-soft);
  margin: 0 0 12px;
  position: relative;
  flex-shrink: 0;
}
.draw-progress b { color: var(--pink-deep); font-family: 'Jua'; }

.draw-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-content: center;
  align-items: flex-start;          /* 버튼 + hint 컬럼들의 윗선 정렬 */
  position: relative;
  flex-shrink: 0;
  max-width: 720px;
  margin: 0 auto;
}
/* 모든 액션 공통 — 통일 사이즈/모양. 3열 grid 로 같은 폭 강제 */
.draw-actions button, .draw-actions a {
  font-family: 'Pretendard';
  font-weight: 800;
  font-size: 13.5px;
  padding: 0 14px;
  height: 46px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, filter .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.draw-actions .win-act { width: 100%; }
.draw-actions .win-act button { width: 100%; }
@media (max-width: 720px) {
  .draw-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .draw-actions { grid-template-columns: 1fr; }
}
.draw-actions button:hover, .draw-actions a:hover { transform: translateY(2px); filter: brightness(1.03); }
.draw-actions button:disabled, .draw-actions a:disabled { opacity: .45; cursor: not-allowed; transform: none !important; filter: none; }

/* Pre-flip — 한번에 오픈 / 한 장씩 (allFlipped 전에만 표시) */
.draw-actions .open-all {
  background: var(--yellow);
  color: var(--text);
  box-shadow: 0 4px 0 #c98e00;
}
.draw-actions .open-all:hover { box-shadow: 0 2px 0 #c98e00; }
.draw-actions .open-next {
  background: linear-gradient(135deg, var(--mint), #5cd1ad);
  color: #0a4d3a;
  box-shadow: 0 4px 0 #2a9d7a;
  position: relative;
}
.draw-actions .open-next:hover { box-shadow: 0 2px 0 #2a9d7a; }
.draw-actions .open-next::after {
  content: attr(data-progress);
  background: rgba(255,255,255,.8);
  color: #0a4d3a;
  font-family: 'Jua';
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
  display: none;
}
.draw-actions .open-next[data-progress]:not([data-progress=""])::after { display: inline-block; }

/* Post-flip — 한번 더 뽑기 / 장바구니 */
.draw-actions .again { background: var(--pink-deep); color: white; box-shadow: 0 4px 0 #c0265e; }
.draw-actions .again:hover { box-shadow: 0 2px 0 #c0265e; }
.draw-actions .cart {
  background: white;
  color: var(--text);
  border: 1.5px solid var(--line, #e5e7eb);
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.draw-actions .cart:hover { background: var(--bg-2); transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,.06); }

/* 상위상 당첨 자랑하기 — 버튼 + hint 텍스트 묶음 (둘 다 .draw-act 안에 stacked) */
.draw-actions .win-act { display: none; flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; }
.draw-actions.has-win .win-act { display: inline-flex; }
.draw-actions .brag-win {
  background: linear-gradient(135deg, #FFD76B, #FFAA2E);
  color: #5C3A00;
  box-shadow: 0 4px 0 #C7811A;
  width: 100%;
  min-width: 0;
}
.draw-actions .brag-win:hover { box-shadow: 0 2px 0 #C7811A; }
.draw-actions .brag-sns {
  background: linear-gradient(135deg, #FF85AB, #FF4081);  /* 이전 파란색 → 핑크 톤으로 통일 */
  color: white;
  box-shadow: 0 4px 0 #C2185B;
  width: 100%;
  min-width: 0;
}
.draw-actions .brag-sns:hover { box-shadow: 0 2px 0 #C2185B; }
.draw-actions .brag-hint {
  font-family: 'Pretendard';
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);           /* 이전: rgba(255,255,255,.82) → light 배경에서 안 보였음 */
  line-height: 1.4;
  padding: 0 4px;
  text-align: center;
  word-break: keep-all;
  white-space: normal;
}

/* 상위상 자랑 안내 팝업 */
.brag-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 30, .65);
  backdrop-filter: blur(6px);
  z-index: 1200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: bragFadeIn .18s ease;
}
.brag-popup-overlay.open { display: flex; }
@keyframes bragFadeIn { from { opacity: 0 } to { opacity: 1 } }
.brag-popup-card {
  background: white;
  border-radius: 22px;
  max-width: 420px; width: 100%;
  padding: 28px 26px;
  text-align: center;
  box-shadow: 0 22px 64px rgba(0,0,0,.4);
  animation: bragPop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bragPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.brag-popup-card .brag-icon { font-size: 48px; line-height: 1; margin-bottom: 10px; }
.brag-popup-card h3 { font-family: 'Jua'; font-size: 22px; margin-bottom: 12px; color: var(--text, #2a2a2a); }
.brag-popup-card p { font-size: 14px; color: var(--text-soft, #6a6a6a); line-height: 1.7; margin-bottom: 22px; word-break: keep-all; }
.brag-popup-card p b { color: var(--pink-deep, #C2185B); }
.brag-popup-card .brag-popup-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.brag-popup-card button {
  font-family: 'Jua'; font-size: 14px;
  padding: 11px 22px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.brag-popup-card .brag-popup-ok { background: var(--pink, #FF4081); color: white; box-shadow: 0 4px 0 var(--pink-deep, #C2185B); }
.brag-popup-card .brag-popup-ok:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-deep, #C2185B); }
.brag-popup-card .brag-popup-cancel { background: var(--bg, #f5f0f2); color: var(--text, #2a2a2a); }

@media (max-width: 900px) {
  .kuji-hero { grid-template-columns: 1fr; padding: 20px; }
  .kuji-img-big { font-size: 100px; }
  .num-board { grid-template-columns: repeat(8, 1fr); }
  .alpha-cells { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }
  .draw-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .draw-info-wrap { justify-content: center; }
  .draw-results-grid { grid-template-columns: repeat(2, 1fr); max-height: 420px; }
  .draw-stage { padding: 28px 20px; }
}
@media (max-width: 540px) {
  .num-board { grid-template-columns: repeat(6, 1fr); }
  .draw-results-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== 다크모드 보정 — 하드코딩된 흰 배경/파스텔 그라데이션 위 텍스트가 비치지 않게 ===== */
body.dark-theme .trust-points li { background: var(--surface); border-color: var(--line); }
body.dark-theme .trust-points li b { color: var(--text); }
body.dark-theme .trust-points li small { color: var(--text-soft); }
body.dark-theme .trust-points li .tp-icon { background: linear-gradient(135deg, rgba(255,107,157,.18), rgba(255,201,60,.14)); }
body.dark-theme .trust-box {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1.5px var(--line);
}
body.dark-theme .trust-badge h3 { color: var(--text); }
body.dark-theme .trust-lead { color: var(--text-soft); }
body.dark-theme .trust-foot {
  background: linear-gradient(135deg, rgba(127,227,197,.16), rgba(255,201,60,.14));
  color: var(--text);
}
body.dark-theme .trust-rng-summary {
  background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(252,231,186,.10));
  border-color: rgba(252,211,77,.4);
}
body.dark-theme .trust-rng-summary .trs-text { color: var(--text); }
body.dark-theme .trust-rng-summary .trs-text b { color: #FFC93C; }
body.dark-theme .trust-rng-summary .trs-foot { color: var(--text-soft); border-top-color: rgba(255,201,60,.25); }
/* 쿠지 현황판 */
body.dark-theme .stock-preview-wrap { background: var(--surface); border-color: var(--line); }
body.dark-theme .stock-preview-head h3 {
  background: linear-gradient(135deg, rgba(255,107,157,.22), rgba(255,64,129,.16));
  border-color: var(--pink);
  color: var(--text);
}
body.dark-theme .stock-preview-head .stock-preview-notice {
  background: linear-gradient(135deg, rgba(255,201,60,.18), rgba(252,231,186,.12));
  border-color: rgba(252,211,77,.4);
  color: #FFD78A;
}
body.dark-theme .stock-preview-head .stock-preview-notice b { color: #FF8FA8; }
/* 뽑기 액션 바 (draw-row) — 팝업 안 / 팝업 밖 둘 다 */
body.dark-theme .draw-row { background: var(--surface); border-color: var(--line); }
body.dark-theme .draw-info { color: var(--text-soft); }
body.dark-theme .draw-info b { color: var(--text); }
body.dark-theme .draw-btn:disabled { background: var(--line); box-shadow: 0 4px 0 rgba(0,0,0,.3); color: var(--text-soft); }
/* 팝업 안 .draw-row — 외부 3px 보더 제거 (팝업 카드 모서리와 어긋남) */
.draw-popup-card .draw-row { border: none; border-top: 1.5px solid rgba(0,0,0,.06); }
body.dark-theme .draw-popup-card .draw-row { border-top-color: var(--line); }
/* 추첨 결과 요약 박스 — 라이트 그라데이션 → 다크 톤 */
body.dark-theme .draw-summary { background: linear-gradient(135deg, var(--bg-2), var(--surface)); border-color: var(--line); }
body.dark-theme .draw-summary h4 { color: var(--text); }
body.dark-theme .draw-summary .ds-cell { background: var(--surface); }
body.dark-theme .draw-summary .ds-cell .lbl { color: var(--text-soft); }
body.dark-theme .draw-summary .ds-cell .val { color: var(--text); }
body.dark-theme .draw-summary .ds-cell.a .val { color: #FFC93C; }
body.dark-theme .draw-summary .ds-cell.b .val { color: #6FB8FF; }
body.dark-theme .draw-summary .ds-cell.c .val { color: #6EE7B7; }
body.dark-theme .draw-summary .ds-cell.d .val,
body.dark-theme .draw-summary .ds-cell.e .val,
body.dark-theme .draw-summary .ds-cell.f .val,
body.dark-theme .draw-summary .ds-cell.g .val,
body.dark-theme .draw-summary .ds-cell.h .val { color: var(--text-soft); }
/* 장바구니로 이동 — 흰 ghost 버튼 → surface 톤 */
body.dark-theme .draw-actions .cart {
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
body.dark-theme .draw-actions .cart:hover { background: var(--surface); }
/* SNS 자랑하기 / 당첨 결과 자랑하기 팝업 — 흰 카드 + var(--text) 텍스트가 다크에서 비침 */
body.dark-theme .brag-popup-card { background: var(--surface); }
body.dark-theme .brag-popup-card h3 { color: var(--text); }
body.dark-theme .brag-popup-card p { color: var(--text-soft); }
body.dark-theme .brag-popup-card p b { color: var(--pink); }
body.dark-theme .brag-popup-card .brag-popup-cancel { background: var(--bg-2); color: var(--text); }
/* 결과 카드 (rc-front) 다크모드 — 라이트 그라데이션 위 var(--text) 텍스트가 안 보임 */
body.dark-theme .rc-front { background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%); border-color: var(--line); }
body.dark-theme .rc-front .rc-imgwrap { background: var(--bg-2); }
body.dark-theme .rc-front .rc-name { color: var(--text); }
body.dark-theme .result-card.gr-s .rc-front { background: linear-gradient(160deg, rgba(255,64,129,.18) 0%, rgba(255,201,60,.10) 100%); }
body.dark-theme .result-card.gr-a .rc-front { background: linear-gradient(160deg, rgba(255,201,60,.18) 0%, rgba(255,201,60,.08) 100%); }
body.dark-theme .result-card.gr-b .rc-front { background: linear-gradient(160deg, rgba(110,184,255,.18) 0%, rgba(110,184,255,.08) 100%); }
body.dark-theme .result-card.gr-c .rc-front { background: linear-gradient(160deg, rgba(127,227,197,.18) 0%, rgba(127,227,197,.08) 100%); }
body.dark-theme .result-card.gr-d .rc-front { background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%); }
body.dark-theme .grade-list { background: var(--surface); }
body.dark-theme .grade-item { background: var(--surface); border-color: var(--line); }
body.dark-theme .grade-item .gemoji { background: var(--bg-2); }
body.dark-theme .grade-item .gemoji-img { background: var(--bg-2); }
body.dark-theme .kuji-stat,
body.dark-theme .stock-progress { background: var(--bg-2); }
body.dark-theme .stock-progress .bar { background: rgba(255,255,255,.08); }
body.dark-theme .board-wrap { background: var(--surface); }
body.dark-theme .draw-stage { background: var(--surface); }
body.dark-theme .draw-summary { background: var(--bg-2); }
body.dark-theme .draw-popup-card { background: var(--surface); }
body.dark-theme .clear-sel-btn { background: var(--surface); color: var(--text); border-color: var(--line); }
body.dark-theme .board-legend .swatch { background: var(--bg-2); border-color: var(--line); }
body.dark-theme .board-legend .swatch.sold { background: rgba(255,255,255,.06); }
/* 구매 안내 4 섹션 — 색조 유지하되 어두운 배경으로 톤다운 (텍스트 가독성 확보) */
body.dark-theme .notice-block .notice-section.ns-pink { background: rgba(255,64,129,.12); border-color: rgba(255,210,220,.18); }
body.dark-theme .notice-block .notice-section.ns-mint { background: rgba(45,168,132,.14); border-color: rgba(200,238,221,.18); }
body.dark-theme .notice-block .notice-section.ns-orange { background: rgba(196,122,24,.16); border-color: rgba(255,226,179,.18); }
body.dark-theme .notice-block .notice-section.ns-purple { background: rgba(125,62,193,.16); border-color: rgba(226,212,247,.18); }
body.dark-theme .notice-block .notice-section { color: var(--text); }
body.dark-theme .notice-block .notice-section ul li { color: var(--text-soft); }
body.dark-theme .notice-block .notice-section ul li .ns-sub { color: var(--text-soft); }

/* ===== 결제 수단 선택 모달 (kuji-hit theme + 라이트/다크 자동) =====
   theme tokens 사용 — body.dark-theme override 로 다크모드 자동 적용 */
.kjpm-overlay {
  position: fixed; inset: 0; z-index: 2147483630;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  font-family: 'Pretendard', system-ui, sans-serif;
  animation: kjpmFadeIn 0.18s ease-out;
}
body.dark-theme .kjpm-overlay { background: rgba(0, 0, 0, 0.7); }

@keyframes kjpmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kjpmSlideUp { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.kjpm-card {
  max-width: 460px; width: 100%;
  background: var(--surface, #ffffff);
  color: var(--text, #2D2D2D);
  border-radius: 22px;
  padding: 26px 24px 24px;
  box-shadow: 0 24px 60px rgba(255, 64, 129, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1.5px solid rgba(255, 107, 157, 0.18);
  animation: kjpmSlideUp 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
body.dark-theme .kjpm-card {
  border-color: rgba(255, 107, 157, 0.25);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 64, 129, 0.08);
}

.kjpm-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.kjpm-title {
  margin: 0; font-size: 17px; font-weight: 800;
  color: var(--pink-deep, #FF4081);
  font-family: 'Jua', 'Pretendard', sans-serif;
  display: flex; align-items: center; gap: 8px;
}
.kjpm-title::before {
  content: '💳'; font-size: 18px;
}
.kjpm-close {
  background: transparent; border: none;
  width: 34px; height: 34px;
  border-radius: 10px; cursor: pointer;
  color: var(--text-soft, #94a3b8);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.kjpm-close:hover { background: rgba(255, 64, 129, 0.08); color: var(--pink-deep, #FF4081); }
body.dark-theme .kjpm-close { color: var(--text-soft); }
body.dark-theme .kjpm-close:hover { background: rgba(255, 107, 157, 0.12); }

.kjpm-amount-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.08), rgba(255, 64, 129, 0.04));
  border: 1px solid rgba(255, 107, 157, 0.16);
  border-radius: 14px;
  margin-bottom: 18px;
}
body.dark-theme .kjpm-amount-row {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 64, 129, 0.06));
  border-color: rgba(255, 107, 157, 0.2);
}
.kjpm-amount-label { color: var(--text-soft, #5A5A5A); font-size: 13px; font-weight: 600; }
.kjpm-amount-val {
  color: var(--pink-deep, #FF4081);
  font-size: 22px; font-weight: 800;
  font-family: 'Jua', 'Pretendard', sans-serif;
}

.kjpm-methods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.kjpm-method {
  position: relative;
  overflow: visible; /* badge 가 카드 모서리 밖으로 살짝 빠지도록 */
  background: var(--bg, #FFF8F3);
  border: 2px solid transparent;
  color: var(--text, #2D2D2D);
  padding: 20px 8px 14px;
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: inherit; cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4),
              border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
body.dark-theme .kjpm-method {
  background: var(--bg-2, #2a1f3a);
  color: var(--text);
}
.kjpm-method-icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.kjpm-method-icon svg { width: 28px; height: 28px; display: block; }
.kjpm-method-label { font-size: 13.5px; font-weight: 800; letter-spacing: -0.2px; }

/* 카드 (활성) — 핑크 강조 */
.kjpm-method.is-card .kjpm-method-icon {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
}
.kjpm-method.is-card:not(:disabled):hover {
  transform: translateY(-4px);
  border-color: var(--pink-deep, #FF4081);
  background: var(--surface, #fff);
  box-shadow: 0 12px 28px rgba(255, 64, 129, 0.18);
}
body.dark-theme .kjpm-method.is-card:not(:disabled):hover {
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(255, 64, 129, 0.26);
}
.kjpm-method.is-card:not(:disabled):active { transform: translateY(-1px); }

/* 무통장 (준비중) — 따뜻한 오렌지 */
.kjpm-method.is-bank .kjpm-method-icon {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 55%, #ea580c 100%);
}
/* 휴대폰 (준비중) — 민트 그린 */
.kjpm-method.is-phone .kjpm-method-icon {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 55%, #16a34a 100%);
}
.kjpm-method:disabled {
  opacity: 0.62; cursor: not-allowed;
}
.kjpm-method:disabled .kjpm-method-icon { filter: saturate(0.7); }
.kjpm-method:disabled .kjpm-method-label { color: var(--text-soft, #94a3b8); }

/* "준비중" 배지 — 카드 우상단 살짝 밖으로 빠지도록, 핫핑크 강조 */
.kjpm-badge {
  position: absolute; top: -8px; right: -8px; z-index: 3;
  background: linear-gradient(135deg, #FF6B9D, #FF4081);
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 10px rgba(255, 64, 129, 0.35);
  border: 2px solid var(--surface, #fff);
  font-family: 'Pretendard', sans-serif;
  animation: kjpmBadgePulse 2.4s ease-in-out infinite;
}
body.dark-theme .kjpm-badge {
  border-color: var(--surface, #251c33);
  /* 다크모드에선 핫핑크 톤다운 (feedback_dark_mode) */
  background: linear-gradient(135deg, #d65d88, #c9396d);
  box-shadow: 0 4px 12px rgba(201, 57, 109, 0.45);
}
@keyframes kjpmBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.kjpm-warn {
  font-size: 12.5px; color: #ef4444; text-align: center;
  margin: 0 0 6px; font-weight: 700;
}
body.dark-theme .kjpm-warn { color: #fca5a5; }
.kjpm-note {
  font-size: 11.5px; color: var(--text-soft, #6b7280); text-align: center;
  margin: 0; line-height: 1.6;
}
.kjpm-note b {
  color: var(--pink-deep, #FF4081); font-weight: 800;
}

/* 모바일 — 가로 좁을 때 메서드 카드 1열로 (또는 패딩 축소) */
@media (max-width: 420px) {
  .kjpm-card { padding: 22px 18px 20px; border-radius: 18px; }
  .kjpm-methods { gap: 8px; }
  .kjpm-method { padding: 14px 6px 12px; }
  .kjpm-method-icon { width: 40px; height: 40px; }
  .kjpm-method-label { font-size: 12.5px; }
  .kjpm-amount-val { font-size: 20px; }
}