/* =====================================================
   /zone/assets/zone.css — PointZone 통합 스타일
   기반: handoff/untitled/project/tokens.css (oklch + Pretendard)
   ===================================================== */

/* ─── 디자인 토큰 ─────────────────────────────────── */
:root {
  --pz-primary:        oklch(0.55 0.11 210);
  --pz-primary-strong: oklch(0.42 0.13 215);
  --pz-primary-soft:   oklch(0.94 0.025 210);
  --pz-primary-deep:   oklch(0.28 0.08 220);

  /* Map */
  --pz-map-bg:    oklch(0.96 0.010 220);
  --pz-map-land:  oklch(0.985 0.005 220);
  --pz-map-line:  oklch(0.88 0.010 220);
  --pz-map-water: oklch(0.93 0.025 220);
  --pz-map-park:  oklch(0.93 0.035 150);

  /* Status 5종 */
  --pz-candidate: oklch(0.68 0.01 240);
  --pz-applied:   oklch(0.70 0.17 55);
  --pz-secured:   oklch(0.82 0.16 95);
  --pz-running:   oklch(0.58 0.15 235);
  --pz-sale:      oklch(0.62 0.22 25);

  --pz-candidate-soft: oklch(0.96 0.005 240);
  --pz-applied-soft:   oklch(0.96 0.04 55);
  --pz-secured-soft:   oklch(0.96 0.05 95);
  --pz-running-soft:   oklch(0.95 0.04 235);
  --pz-sale-soft:      oklch(0.97 0.035 25);

  --pz-text:        oklch(0.22 0.01 240);
  --pz-text-soft:   oklch(0.45 0.01 240);
  --pz-text-mute:   oklch(0.62 0.01 240);
  --pz-text-faint:  oklch(0.75 0.01 240);
  --pz-border:      oklch(0.91 0.006 240);
  --pz-border-soft: oklch(0.94 0.005 240);
  --pz-bg-page:     oklch(0.97 0.005 240);
  --pz-bg-card:     #ffffff;

  --pz-font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo",
             "Malgun Gothic", system-ui, sans-serif;
  --pz-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ─── 기본 ───────────────────────────────────────── */
.zone-root, .zone-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.zone-root { font-family: var(--pz-font); color: var(--pz-text); line-height: 1.45; }
.font-mono-pz { font-family: var(--pz-mono); }
/* 모든 링크 밑줄 제거 (사용자 요청 2026-05-24) */
.zone-root a, .zone-mobile a, .pz-admin-wrap a { text-decoration: none; color: inherit; }
.zone-root a:hover, .zone-mobile a:hover { text-decoration: none; }

/* 스크롤바 숨김 (가로 스크롤 칩 등) */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { scrollbar-width: none; }

/* ─── 모바일 컨테이너 (티머니 앱 웹뷰 + 데스크탑 폴백) ─ */
.zone-mobile {
  max-width: 480px;
  margin: 0 auto;
  background: var(--pz-bg-page);
  min-height: 100vh;
  position: relative;
}
@media (min-width: 481px) {
  .zone-mobile {
    box-shadow: 0 0 32px rgba(15,30,50,.08);
    min-height: 100vh;
  }
  body.zone-body {
    background: oklch(0.94 0.005 240);
  }
}

/* ─── 애니메이션 (handoff tokens.css 그대로) ──────── */
@keyframes pz-sheet-up { from { transform: translateY(110%); } to { transform: translateY(0); } }
.pz-sheet-in { animation: pz-sheet-up 280ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } }
.pz-fade-in { animation: pz-fade 220ms ease-out both; }

@keyframes pz-scale { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pz-scale-in { animation: pz-scale 260ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes pz-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.62 0.22 25 / 0.50); }
  70%  { box-shadow: 0 0 0 18px oklch(0.62 0.22 25 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.22 25 / 0); }
}
.pz-pulse { animation: pz-pulse 1.8s ease-out infinite; }

@keyframes pz-ring { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
.pz-ring { animation: pz-ring 2.2s ease-out infinite; transform-origin: center; }

@keyframes pz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pz-marquee { display: inline-flex; animation: pz-marquee 32s linear infinite; }

/* 세로 마퀴 — 인기 PointZone 랭킹 무한 스크롤 (사용자 요청 2026-05-24) */
@keyframes pz-vscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pz-vmarquee { will-change: transform; }
.pz-vmarquee:hover { animation-play-state: paused; }
.pz-leaderboard-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

@keyframes pz-spin { to { transform: rotate(360deg); } }
.pz-spin { animation: pz-spin 1s linear infinite; }

@keyframes pz-blink { 50% { opacity: 0.3; } }
.pz-blink { animation: pz-blink 1.4s ease-in-out infinite; }

/* LED Board */
.pz-led {
  background: radial-gradient(circle at 30% 30%, oklch(0.22 0.04 230) 0%, oklch(0.16 0.04 235) 100%);
  color: oklch(0.92 0.18 100);
  text-shadow: 0 0 8px oklch(0.78 0.22 90 / 0.55);
  font-family: var(--pz-mono);
}
.pz-led-red { color: oklch(0.78 0.20 28); text-shadow: 0 0 8px oklch(0.65 0.22 28 / 0.6); }
.pz-led-green { color: oklch(0.85 0.18 145); text-shadow: 0 0 8px oklch(0.72 0.20 145 / 0.55); }

.pz-progress-fill { transition: width 600ms cubic-bezier(.2,.8,.2,1); }

.pz-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    oklch(0.93 0.008 220) 0 8px,
    oklch(0.96 0.005 220) 8px 16px
  );
}

/* ─── 컴포넌트 ──────────────────────────────────── */

/* Avatar */
.pz-avatar {
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pz-primary) 0%, oklch(0.42 0.13 240) 100%);
  box-shadow: 0 2px 6px oklch(0.55 0.11 210 / 0.35);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

/* Status Chip */
.pz-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  line-height: 1; white-space: nowrap; letter-spacing: -0.2px;
}
.pz-chip-sm { padding: 2px 8px; font-size: 10.5px; }
.pz-chip-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.pz-chip-dot-sm { width: 5px; height: 5px; }

.pz-chip[data-status=candidate] { background: var(--pz-candidate-soft); color: oklch(0.30 0.005 240); }
.pz-chip[data-status=candidate] .pz-chip-dot { background: var(--pz-candidate); }
.pz-chip[data-status=applied]   { background: var(--pz-applied-soft);   color: oklch(0.38 0.13 55); }
.pz-chip[data-status=applied] .pz-chip-dot { background: var(--pz-applied); }
.pz-chip[data-status=secured]   { background: var(--pz-secured-soft);   color: oklch(0.36 0.12 95); }
.pz-chip[data-status=secured] .pz-chip-dot { background: var(--pz-secured); }
.pz-chip[data-status=running]   { background: var(--pz-running-soft);   color: oklch(0.36 0.13 235); }
.pz-chip[data-status=running] .pz-chip-dot { background: var(--pz-running); }
.pz-chip[data-status=sale]      { background: var(--pz-sale-soft);      color: oklch(0.40 0.18 25); }
.pz-chip[data-status=sale] .pz-chip-dot { background: var(--pz-sale); }

/* Card */
.pz-card {
  background: var(--pz-bg-card);
  border: 1px solid var(--pz-border);
  border-radius: 16px;
  overflow: hidden;
}

/* 선택형 라벨 (참여 유형, 결제 수단 등) — 브라우저 focus 이중 outline 차단 */
label.pz-eq-type, label.pz-pay-option { outline: none !important; }
label.pz-eq-type *, label.pz-pay-option * { outline: none !important; }
label.pz-eq-type:focus, label.pz-eq-type:focus-within,
label.pz-pay-option:focus, label.pz-pay-option:focus-within { outline: none !important; box-shadow: inherit; }

/* Button */
.pz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-weight: 800; font-size: 14px;
  border-radius: 12px; border: none; cursor: pointer;
  padding: 0 16px; height: 48px;
  transition: opacity .15s, transform .1s;
  text-decoration: none !important;  /* <a class="pz-btn"> 밑줄 차단 (위치보기 등) */
  color: inherit;
}
a.pz-btn, a.pz-btn:hover, a.pz-btn:visited, a.pz-btn:active { text-decoration: none !important; }
.pz-btn:active { transform: scale(.98); }
.pz-btn:disabled { opacity: .4; cursor: not-allowed; }
.pz-btn-primary {
  background: var(--pz-primary); color: #fff;
  box-shadow: 0 4px 14px oklch(0.55 0.11 210 / 0.4);
}
.pz-btn-outline {
  background: #fff; color: var(--pz-primary-strong);
  border: 2px solid var(--pz-primary);
}
.pz-btn-ghost {
  background: var(--pz-primary-soft); color: var(--pz-primary-strong);
  border: 1px solid oklch(0.85 0.05 210);
}
.pz-btn-sm { height: 36px; font-size: 12px; padding: 0 12px; border-radius: 10px; }

/* Progress Bar */
.pz-progress {
  width: 100%; border-radius: 999px; overflow: hidden;
  background: var(--pz-border-soft); height: 6px;
}
.pz-progress-fill {
  height: 100%; border-radius: 999px;
  background: var(--pz-primary);
}

/* TabBar — 모바일 viewport 바닥 강제 고정 (Apple-style minimal) */
.pz-tabbar {
  position: fixed !important; bottom: 0 !important;
  left: 50% !important; transform: translateX(-50%) !important;
  width: 100% !important; max-width: 480px !important;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--pz-border-soft);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  z-index: 9999 !important;
  box-shadow: 0 -1px 0 rgba(15,30,50,.04);
  contain: layout style;
}
/* iframe/내장 뷰에서도 보이도록 — body 하단 padding 강제 (CTA 바 + TabBar 둘 다 수용) */
.zone-mobile { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important; }
.zone-mobile.zone-has-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important; }
body.zone-body { padding-bottom: 0 !important; }
.pz-tabbar-row { display: grid; grid-template-columns: repeat(5, 1fr); align-items: flex-end; }
.pz-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 9px 0 4px; gap: 3px;
  background: transparent; border: none; cursor: pointer;
  color: var(--pz-text-mute); font-size: 10px; font-weight: 600; letter-spacing: -0.2px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s ease;
  position: relative;
}
.pz-tab.active { color: var(--pz-primary-strong); font-weight: 700; }
.pz-tab .pz-tab-svg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; position: relative;
}
.pz-tab .pz-tab-svg svg { width: 24px; height: 24px; display: block; }
.pz-tab.active .pz-tab-svg svg { transform: scale(1.02); }
.pz-tab-label { line-height: 1.1; }

/* 가운데 큰 버튼 (내 매장) — Apple 멀티스테이트 hub */
.pz-tab-center { padding-top: 0; }
.pz-tab-center .pz-tab-icon {
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, var(--pz-primary), oklch(0.42 0.13 240));
  box-shadow: 0 4px 14px oklch(0.55 0.11 210 / 0.35), 0 1px 2px rgba(15,30,50,.10);
  display: flex; align-items: center; justify-content: center;
  margin-top: -18px; margin-bottom: 3px;
}
.pz-tab-center .pz-tab-icon svg { width: 24px; height: 24px; }

.pz-tab-badge {
  position: absolute; top: -3px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--pz-sale); color: #fff; font-size: 9.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.96);
  letter-spacing: 0;
}

/* Header (모바일 상단) */
.pz-header {
  background: #fff; padding-top: 44px;
  border-bottom: 1px solid var(--pz-border-soft);
}
.pz-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
}
.pz-header-title { display: flex; flex-direction: column; line-height: 1; }
.pz-header-title .name { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.pz-header-title .sub  { font-size: 10px; color: var(--pz-text-faint); margin-top: 4px; }

/* Search */
.pz-search {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--pz-border);
  background: var(--pz-border-soft); border-radius: 16px;
  margin: 0 16px 8px;
}
.pz-search input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 14px; color: var(--pz-text); font-family: var(--pz-font);
}
.pz-search input::placeholder { color: var(--pz-text-faint); }

/* LiveFeed Marquee */
.pz-live-feed {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--pz-border); border-bottom: 1px solid var(--pz-border);
  background: var(--pz-border-soft); padding: 6px 0;
  font-size: 11px; color: var(--pz-text-soft); font-weight: 500;
}

/* HubCard (bottom sheet) */
.pz-hub-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px;
  box-shadow: 0 -12px 32px rgba(15,30,50,.14);
  z-index: 10;
}
.pz-hub-handle {
  width: 40px; height: 4px; background: oklch(0.88 0.01 240); border-radius: 999px;
  margin: 10px auto 12px;
}

/* Pickup code card */
.pz-pickup-card {
  background: linear-gradient(135deg, oklch(0.42 0.13 215) 0%, oklch(0.30 0.10 230) 100%);
  border-radius: 24px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 12px 32px oklch(0.55 0.11 210 / 0.35);
}
.pz-pickup-code {
  font-family: var(--pz-mono);
  font-size: 40px; font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1;
  margin-top: 8px;
}

/* Stepper */
.pz-stepper { display: flex; align-items: center; gap: 6px; padding: 12px 20px; }
.pz-step { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pz-step-num {
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  background: var(--pz-border-soft); color: var(--pz-text-mute);
  flex-shrink: 0;
}
.pz-step.active .pz-step-num {
  background: var(--pz-primary-soft); color: var(--pz-primary-strong);
  border: 2px solid var(--pz-primary);
}
.pz-step.done .pz-step-num {
  background: var(--pz-primary); color: #fff;
}
.pz-step-line {
  flex: 1; height: 2px; border-radius: 999px;
  background: var(--pz-border-soft);
}
.pz-step.done .pz-step-line { background: var(--pz-primary); }

/* Sheet (모달) */
.pz-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100;
  display: flex; align-items: flex-end;
}
.pz-sheet {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  background: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px;
  height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 -16px 40px rgba(15,30,50,.22);
}
.pz-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 8px;
}

/* Photo Grid */
.pz-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pz-photo-grid img,
.pz-photo-grid .pz-stripe { width: 100%; aspect-ratio: 5/4; border-radius: 12px; object-fit: cover; }

/* Map placeholder (Phase 2 에서 카카오맵 SDK 로 교체) */
.pz-map {
  position: relative; width: 100%; height: 100%;
  background: var(--pz-map-land);
  overflow: hidden;
}
.pz-map-controls {
  position: absolute; right: 12px; top: 56px;
  display: flex; flex-direction: column; gap: 8px; z-index: 10;
}
.pz-map-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: #fff; border: 1px solid var(--pz-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* Pin marker (지도 위 PointZone 핀) */
.pz-pin {
  position: absolute; transform: translate(-50%, -100%);
  cursor: pointer;
}
.pz-pin-body {
  width: 32px; height: 32px; border-radius: 999px 999px 999px 4px;
  transform: rotate(-45deg);
  background: var(--pz-primary);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.pz-pin[data-status=candidate] .pz-pin-body { background: var(--pz-candidate); }
.pz-pin[data-status=applied]   .pz-pin-body { background: var(--pz-applied); }
.pz-pin[data-status=secured]   .pz-pin-body { background: var(--pz-secured); }
.pz-pin[data-status=running]   .pz-pin-body { background: var(--pz-running); }
.pz-pin[data-status=sale]      .pz-pin-body { background: var(--pz-sale); }

/* Utility */
.pz-flex { display: flex; }
.pz-grid { display: grid; }
.pz-row { display: flex; align-items: center; }
.pz-spacer { flex: 1; }
.pz-hidden { display: none !important; }
.pz-text-strike { text-decoration: line-through; color: var(--pz-text-faint); font-weight: 600; }
.pz-text-sale { color: var(--pz-sale); }
.pz-text-primary { color: var(--pz-primary-strong); }
.pz-rounded-pill { border-radius: 999px; }