/* ============ Find the Orange — 복권 한 장 (모바일 가로 기준) ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Noto Sans KR", sans-serif;
  background: #5b5b5b; /* 스토리보드와 동일한 무채색 배경 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none; /* 당겨서 새로고침·바운스 방지 */
  touch-action: manipulation; /* 더블탭 줌 방지 */
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 무대: 세로로 들면 UI 전체를 90도 돌려 항상 가로 ---------- */
.stage {
  position: fixed;
  inset: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (orientation: portrait) {
  .stage {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    width: 100dvh;
    height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* ---------- 복권 한 장: 무대에 온전히 들어오도록 맞춤 ---------- */
.ticket {
  position: relative;
  aspect-ratio: 1920 / 1080;
  width: min(98cqw, calc(96cqh * 1920 / 1080));
  border-radius: 1.2%;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  user-select: none;
}
/* 스포트라이트 중에는 패널이 티켓 밖으로 나갈 수 있게 */
.ticket.spotlight-mode { overflow: visible; }

/* 롤링 스포트라이트: 나머지 화면을 검게 덮는 오버레이 */
.dim-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 10;
}
.dim-overlay.on { opacity: 0.88; }

.t-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* ---------- 우측 패널 오버레이 (목업의 흰 패널 좌표와 동일) ---------- */
.t-panel {
  position: absolute;
  left: 49.1%;
  top: 7.4%;
  width: 46.6%;
  height: 85.2%;
  container-type: size;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 스포트라이트: 패널만 화면 정중앙으로 이동·확대
   배율은 기기 화면 크기에 맞춰 JS가 --spot-scale로 계산 (짧은 변의 92%) */
.t-panel.spotlight {
  transform: translateX(-48.1%) scale(var(--spot-scale, 1.25));
  z-index: 20;
}

.t-panel > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hidden { display: none !important; }

/* ---------- START (스토리보드 1번 프레임) ---------- */
.p-start {
  background: #fff;
  border-radius: 6cqw;
  border: 1px solid #e2e2e2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6cqh;
  padding: 5cqh 7cqw;
  text-align: center;
}

.oa-title {
  font-family: "Anton", sans-serif;
  font-size: 8.4cqh;
  letter-spacing: 0.14em;
  color: #1a1a1a;
  line-height: 1;
}
.oa-title span { color: #e8501e; }

.oa-sub {
  font-size: 3.4cqh;
  color: #444;
  margin-top: -1.4cqh;
}

.oa-partners {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 3.6cqh;
  font-weight: 600;
  color: #222;
}
.oa-partners .p-logo {
  height: 3.4cqh;
  width: auto;
  -webkit-user-drag: none;
}
.oa-partners .bar { color: #bbb; margin: 0 0.6cqw; }

.saseul-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqh;
}
.saseul-mark .saseul-logo {
  height: 7cqh;
  width: auto;
  -webkit-user-drag: none;
}
.saseul-mark .sname {
  font-family: "Anton", sans-serif;
  font-size: 3.8cqh;
  letter-spacing: 0.22em;
  color: #3a3a3a;
}

.oa-quote {
  font-size: 3.2cqh;
  line-height: 1.45;
  color: #333;
}
.oa-quote b { color: #e8501e; }

.scratch-cta {
  font-family: "Anton", sans-serif;
  font-size: 3.4cqh;
  letter-spacing: 0.1em;
  color: #e8501e;
}

.start-btn {
  font-family: "Anton", sans-serif;
  font-size: 4.6cqh;
  letter-spacing: 0.16em;
  color: #fff;
  background: #f2711c;
  border: 0;
  border-radius: 1.6cqh;
  padding: 2.2cqh 16cqw;
  cursor: pointer;
  transition: transform 0.12s, filter 0.15s;
  animation: startGlow 1.8s ease-in-out infinite;
}
@keyframes startGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.start-btn:active:not(:disabled) { transform: scale(0.96); }
.start-btn:disabled { background: #b8c0cb; cursor: not-allowed; animation: none; }

.stock-line {
  font-size: 2.6cqh;
  color: #999;
  font-variant-numeric: tabular-nums;
}
.stock-line b { color: #444; }
.stock-line.soldout b { color: #c62828; }

.reset-link {
  border: 0;
  background: none;
  color: #ccc;
  font-size: 2.4cqh;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- 스크래치 / 추첨 패널 ---------- */
.p-play {
  background: #fff;
  border-radius: 6cqw;
  overflow: hidden;
}

.swirl {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  background: repeating-conic-gradient(#dfe6e7 0deg 11deg, #ffffff 11deg 30deg);
  border-radius: 50%;
}
.swirl.spin { animation: swirlSpin 1.1s linear infinite; }
@keyframes swirlSpin {
  to { transform: rotate(360deg); }
}

.play-sym {
  position: absolute;
  left: 26%;
  top: 26%;
  width: 48%;
  height: 48%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  -webkit-user-drag: none;
}
.play-sym.rolling { animation: symRoll 0.24s ease-in-out infinite; }
@keyframes symRoll {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50% { transform: scale(1.12) rotate(4deg); }
}
.play-sym.final {
  animation: symFinal 0.6s cubic-bezier(0.2, 1.5, 0.4, 1);
  filter: drop-shadow(0 0 22px rgba(236, 90, 30, 0.6));
}
@keyframes symFinal {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 스토리보드처럼 패널 상단 검정 Anton 텍스트 */
.play-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  height: auto;
  text-align: center;
  font-family: "Anton", sans-serif;
  font-size: 7cqh;
  letter-spacing: 0.08em;
  color: #111;
  animation: labelBlink 0.5s steps(1) infinite;
  pointer-events: none;
}
@keyframes labelBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  transition: opacity 0.5s;
}
#cover.cleared { opacity: 0; pointer-events: none; }

.p-play.shaking { animation: panelShake 0.35s ease-in-out infinite; }
@keyframes panelShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-0.4%, 0.3%); }
  75% { transform: translate(0.4%, -0.3%); }
}

/* Play Again 상태에서 티켓 전체 탭 가능 표시 */
.ticket.tappable { cursor: pointer; }

.t-actions {
  position: absolute;
  left: 49.1%;
  width: 46.6%;
  bottom: 1.2%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: max(10px, 1.6cqh);
  z-index: 20;
  pointer-events: none;
}

.t-act-btn {
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  background: rgba(33, 21, 16, 0.78);
  color: #fff;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 600;
  font-size: max(13px, 2.4cqh);
  padding: max(7px, 1.1cqh) max(14px, 2.6cqh);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
}

.t-act-btn .qr-ico { width: 1.05em; height: 1.05em; display: block; }

.p-load {
  background: #fff;
  border-radius: 6cqw;
  border: 1px solid #e2e2e2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqh;
  padding: 5cqh 7cqw;
  text-align: center;
}

.load-spinner {
  width: 12cqh;
  height: 12cqh;
  border: 1.4cqh solid #f3d9cb;
  border-top-color: #e8501e;
  border-radius: 50%;
  animation: loadSpin 0.9s linear infinite;
}

@keyframes loadSpin {
  to { transform: rotate(360deg); }
}

.load-title {
  font-family: "Anton", sans-serif;
  font-size: 4.4cqh;
  letter-spacing: 0.1em;
  color: #1a1a1a;
}

.load-status {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 600;
  font-size: 3cqh;
  letter-spacing: 0.06em;
  color: #8a8a8a;
  min-height: 4cqh;
}

.qr-overlay {
  position: absolute;
  left: 49.1%;
  top: 7.4%;
  width: 46.6%;
  height: 85.2%;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.qr-card {
  position: relative;
  background: #fff;
  border-radius: 6cqw;
  border: 1px solid #eee;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  width: 88%;
  height: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqh;
  padding: 4cqh 4cqw;
}

.qr-box {
  width: 52cqh;
  height: 52cqh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-box img,
.qr-box canvas {
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
}

.qr-caption {
  font-family: "Anton", sans-serif;
  font-size: 3.2cqh;
  letter-spacing: 0.06em;
  color: #e8501e;
  text-align: center;
}

.qr-close {
  position: absolute;
  top: 2cqh;
  right: 2cqh;
  width: 7cqh;
  height: 7cqh;
  border: 0;
  border-radius: 50%;
  background: #211510;
  color: #fff;
  font-size: 4.4cqh;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.detail-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.detail-card {
  position: relative;
  width: min(92cqw, 560px);
  max-height: 86cqh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-family: "Anton", sans-serif;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  border-bottom: 1px solid #eee;
}

.detail-close {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

.detail-body {
  padding: 12px 18px 18px;
  font-family: "Noto Sans KR", sans-serif;
}

.d-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 10px;
}

.d-tab {
  flex: 1;
  border: 1px solid #eee;
  background: #faf7f4;
  border-radius: 10px;
  padding: 8px 0;
  font-family: "Anton", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #999;
  cursor: pointer;
}

.d-tab.on {
  background: linear-gradient(135deg, #f2711c, #e8501e);
  border-color: transparent;
  color: #fff;
}

.d-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 13px;
}

.d-key {
  flex: 0 0 108px;
  color: #888;
}

.d-val {
  flex: 1;
  min-width: 0;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a.d-val { color: #d84315; }

.d-orange { color: #e8501e; font-weight: 800; }
.d-lemon { color: #cf9b00; font-weight: 800; }
.d-lime { color: #4e9e2e; font-weight: 800; }
.d-gray { color: #777; }

.d-empty {
  color: #888;
  font-size: 14px;
  padding: 12px 0;
}