/* ==========================================================================
   Festival SHIWOL 2026 · Stamp Tour
   Bright & minimal · Pretendard · Purple accent
   ========================================================================== */

:root {
  --bg:          #FFFFFF;
  --bg-soft:     #F6F6F8;
  --line:        #EEEEF2;
  --line-strong: #E2E2E9;

  --ink-900: #17171B;
  --ink-800: #2D2D34;
  --ink-700: #4B4B54;
  --ink-500: #7A7A85;
  --ink-400: #9E9EA8;
  --ink-300: #C7C7CE;
  --ink-200: #E5E5EA;
  --ink-100: #F2F2F5;

  /* 보라 팔레트 — 공식 로고 색(#5D4396)을 500 기준으로 동일 hue(≈258°)로 재구성 */
  --purple-50:  #F3F0F9;
  --purple-100: #E4DDF2;
  --purple-300: #B3A3D8;
  --purple-500: #5D4396;
  --purple-600: #4F3882;
  --purple-700: #412D6C;
  --purple-900: #2A1C48;

  --success: #14B87A;
  --danger:  #E15656;

  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --sh-card:   0 1px 2px rgba(23,23,27,.04), 0 8px 24px rgba(23,23,27,.06);
  --sh-raise:  0 20px 40px rgba(23,23,27,.16);
  --sh-purple: 0 10px 24px rgba(93,67,150,.28);
  --focus-ring: 0 0 0 3px rgba(93,67,150,.32);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink-900);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  /* 한글 어절 단위 줄바꿈 — 단어 중간 어짜핌 끊김 방지 (전역) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1,h2,h3,h4,p,ul,ol,li,figure { margin: 0; padding: 0; }
/* 제목은 줄 사이 공백 순바루방 방지 */
h1,h2,h3 { text-wrap: balance; }
ul,ol { list-style: none; }
button {
  font-family: inherit; border: none; background: none; cursor: pointer;
  color: inherit; padding: 0; letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent;
}
button:focus-visible, a:focus-visible, input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input { font-family: inherit; }

/* ==========================================================================
   App shell — 데스크톱 440px 프레임 / 모바일 풀블리드
   ========================================================================== */
.app-shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; justify-content: center;
  background: var(--bg-soft);
}
.app-frame {
  width: 100%; max-width: 480px;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
  position: relative;
  display: flex; flex-direction: column;
}
/* 모바일 퍼스트: 태블릿·데스크톱에서는 동일한 모바일 UI를 중앙 폰 프레임으로 표시 */
@media (min-width: 720px) {
  body { background: var(--bg-soft); }
  .app-shell { padding: 24px 16px; align-items: flex-start; }
  .app-frame {
    max-width: 440px;
    min-height: calc(100vh - 48px);
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(23,23,27,.10), 0 6px 20px rgba(23,23,27,.05);
    overflow: hidden;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 22px; height: 56px;
  border-radius: var(--r-pill);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  transition: transform .12s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: scale(.98); }
.btn:disabled { cursor: not-allowed; }
.btn-primary { background: var(--purple-500); color: #fff; box-shadow: var(--sh-purple); }
.btn-primary:hover { background: var(--purple-600); }
.btn-primary:disabled { background: var(--ink-200); color: var(--ink-400); box-shadow: none; }
.btn-ghost { background: var(--ink-100); color: var(--ink-800); }
.btn-ghost:hover { background: var(--ink-200); }
.btn-outline { background: #fff; color: var(--purple-600); border: 1.5px solid var(--purple-300); }
.btn-outline:hover { background: var(--purple-50); }
.btn-outline:disabled { color: var(--ink-400); border-color: var(--ink-200); background: var(--ink-100); }
.btn-block { width: 100%; }
.btn-lg { height: 60px; font-size: 17px; font-weight: 800; }

/* ==========================================================================
   공통 헤더 · 스크린
   ========================================================================== */
.screen {
  flex: 1; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
}
@media (min-width: 720px) { .screen { min-height: calc(100vh - 48px); } }

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(12px + var(--safe-t)) 16px 10px;
  flex-shrink: 0;
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.topbar .spacer { flex: 1; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--ink-900);
  transition: background .15s var(--ease);
}
.icon-btn:hover { background: var(--ink-100); }
.icon-btn svg { width: 22px; height: 22px; }

.wordmark {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  display: inline-flex; align-items: baseline; gap: 5px;
}
.wordmark .wm-fest { color: var(--purple-700); }
.wordmark .wm-year { font-size: 10.5px; font-weight: 700; color: var(--purple-500); letter-spacing: .1em; }
/* 상단바 워드마크: '스탬프 투어' 타이포 이미지 (원본에 여백이 있어 세로 기준으로 크기 지정) */
.wordmark .wm-img { height: 62px; width: auto; display: block; margin: -10px 0 -18px -6px; }

/* ==========================================================================
   00 · Splash — KV 아트웍 배경 + 캘리그래피 로고타입
   ========================================================================== */
.splash {
  flex: 1;
  padding: calc(24px + var(--safe-t)) 26px calc(20px + var(--safe-b));
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
/* 레퍼런스 톤 — KV 아트웍이 화면 전체에 은은하게 비치는 밝은 배경 */
.screen.splash { background: #fff; color: var(--ink-900); }
/* 스플래시는 정확히 한 화면: 높이를 고정해 KV 카드만 남는 공간에 맞춰 늘어나고 줄어듦 */
.screen.splash { height: 100vh; height: 100dvh; max-height: 100dvh; }
@media (min-width: 720px) { .screen.splash { height: calc(100vh - 48px); max-height: calc(100vh - 48px); } }
.splash-top, .splash-bottom { flex-shrink: 0; }
.splash-bg {
  display: block;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../images/kv-main.jpg');
  background-size: cover; background-position: center;
}
.splash-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.80) 40%, rgba(255,255,255,.88) 100%);
  backdrop-filter: blur(2px);
}
/* 상단: 아이브로우 → 브랜드 로고(보라) → '스탬프 투어' 타이포 (모두 중앙 정렬) */
.splash-top {
  position: relative; z-index: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  margin: 0 0 -30px;   /* 타이포 PNG 하단 투명 여백 상쇄 */
}
/* 관리자 진입 — 스플래시 우상단, 배경과 거의 같은 톤의 작은 점 (신경 써서 봐야 보임). 터치 영역은 넉넉히 */
.admin-door {
  position: absolute; top: calc(6px + var(--safe-t)); right: 6px; z-index: 3;
  width: 36px; height: 36px; display: block;
  -webkit-tap-highlight-color: transparent;
}
.admin-door::after {
  content: '•••'; position: absolute; right: 8px; top: 8px;
  font-size: 9px; letter-spacing: 1px; line-height: 1;
  color: var(--purple-500); opacity: .3;
}
.admin-door:hover::after, .admin-door:focus-visible::after { opacity: .75; }

.splash-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--purple-500); line-height: 1.5; margin-bottom: 8px;
}
.splash-eyebrow span { display: block; font-weight: 700; letter-spacing: .12em; }
.splash-brand { width: min(56%, 210px); height: auto; display: block; }
/* 메인: '스탬프 투어' 타이포 (원본 보라) */
.splash-logo { margin: -8px auto 0; width: min(58%, 218px); }
.splash-tour-img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 18px rgba(255,255,255,.9));
}

/* 중앙 KV 카드 — 밝은 배경 위 깊은 보라 그림자 */
.splash-kv {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  margin: 0; padding: 18px 0 18px;
  display: flex; flex-direction: column; justify-content: center;
}
/* 남는 세로 공간을 카드가 채움(최소 150 · 최대 340) → 화면 높이에 맞춰 스크롤 없이 한 화면 */
.splash-kv-card {
  position: relative;
  flex: 1; width: 100%; min-height: 150px; max-height: 340px;
  border-radius: 18px; overflow: hidden;
  background: #5D4396;
  box-shadow:
    0 24px 48px rgba(65,45,108,.22),
    0 6px 16px rgba(65,45,108,.12),
    0 0 0 1px rgba(255,255,255,.6);
}
/* 이미지는 카드에 절대 배치로 꽉 채움 — 일부 브라우저(iOS Safari)에서 flex 자식의 height:100%가
   해석되지 않아 하단에 흰 여백이 남는 문제 방지 */
.splash-kv-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}

.splash-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.splash-lang-label {
  text-align: center; margin-bottom: 2px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-900); line-height: 1.5;
}
.splash-lang-label small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ink-500); font-weight: 500; }
/* 언어 선택: 세로 4단 풀폭 흰 칩, 선택 = 블랙 (레퍼런스) */
.lang-grid { display: flex; flex-direction: column; gap: 8px; }
.lang-pill {
  padding: 0 16px; min-height: 44px;
  background: rgba(255,255,255,.96);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .16s var(--ease);
}
.lang-pill .lp-native { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.lang-pill .lp-label { display: none; }
.lang-pill:hover { border-color: var(--ink-300); background: #fff; }
.lang-pill.active { background: var(--ink-900); border-color: var(--ink-900); }
.lang-pill.active .lp-native { color: #fff; }
.splash-cta { margin-top: 8px; }

/* 인트로 → 스플래시 연속감: 요소 순차 페이드업 */
.splash-top, .splash-kv, .splash-bottom { animation: splashUp .7s var(--ease) backwards; }
.splash-kv     { animation-delay: .1s; }
.splash-bottom { animation-delay: .2s; }
@keyframes splashUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-top, .splash-kv, .splash-bottom { animation: none; }
}
/* 짧은 화면에서는 상단 로고·버튼을 줄여 한 화면에 모두 담기 (스크롤 없음) */
@media (max-height: 820px) {
  .splash { padding-top: calc(16px + var(--safe-t)); padding-bottom: calc(14px + var(--safe-b)); }
  .splash-eyebrow { margin-bottom: 4px; }
  .splash-brand { width: min(52%, 190px); }
  .splash-logo { width: min(54%, 200px); }
  .splash-top { margin-bottom: -28px; }
  .splash-kv { padding: 12px 0; }
  .splash-kv-card { min-height: 120px; }
  .lang-grid { gap: 6px; }
  .lang-pill { min-height: 42px; }
  .splash-cta.btn-lg { height: 54px; }
}
@media (max-height: 700px) {
  .splash-eyebrow { display: none; }
  .splash-brand { width: min(44%, 160px); }
  .splash-logo { width: min(48%, 176px); }
  .splash-top { margin-bottom: -24px; }
  .splash-kv-card { min-height: 0; }
  .lang-pill { min-height: 38px; }
}

/* 시트(언어 변경)에서는 라이트 스타일 */
.sheet .lang-grid { display: grid; grid-template-columns: 1fr 1fr; }
.sheet .lang-pill { border-radius: var(--r-md); flex-direction: column; gap: 1px; padding: 13px 14px; align-items: flex-start; background: #fff; border: 1.5px solid var(--line-strong); backdrop-filter: none; min-height: 0; }
.sheet .lang-pill .lp-native { color: var(--ink-900); font-size: 16px; }
.sheet .lang-pill .lp-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-400); letter-spacing: .06em; text-transform: uppercase; }
.sheet .lang-pill.active { background: var(--purple-50); border-color: var(--purple-500); box-shadow: 0 0 0 1px var(--purple-500) inset; }
.sheet .lang-pill.active .lp-native { color: var(--purple-700); }
.sheet .lang-pill.active .lp-label { color: var(--purple-500); }

/* ==========================================================================
   01 · How It Works
   ========================================================================== */
.hiw-progress-wrap { padding: 6px 24px 0; display: flex; justify-content: center; flex-shrink: 0; }
.hiw-progress { display: flex; gap: 6px; }
.hiw-progress span {
  width: 28px; height: 4px; border-radius: 999px;
  background: var(--ink-200); transition: background .3s var(--ease);
}
.hiw-progress span.on { background: var(--purple-500); }

.scroll-area {
  flex: 1; overflow-y: auto;
  padding: 20px 24px 28px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroll-area::-webkit-scrollbar { display: none; }

.hiw-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: var(--purple-500); text-transform: uppercase; margin-bottom: 12px;
}
.hiw-title { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.3; white-space: pre-line; }
.hiw-lead { margin-top: 12px; font-size: 15px; color: var(--ink-700); line-height: 1.65; word-break: keep-all; text-wrap: pretty; }

.hiw-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.sec-badge {
  padding: 4px 10px; background: var(--purple-500); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .14em;
}
.sec-badge.dark { background: var(--ink-900); }
.sec-head h2 { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }

.hiw-flow { display: flex; flex-direction: column; gap: 10px; }
.hiw-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 16px 18px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 18px;
  transition: all .2s var(--ease);
}
.hiw-step:hover { transform: translateY(-2px); border-color: var(--purple-100); }
.hiw-step-num {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--purple-500); color: #fff;
  font-size: 15px; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(93,67,150,.24);
  align-self: start; margin-top: 2px;
}
.hiw-step-tag {
  display: inline-block; padding: 2px 8px;
  background: var(--purple-50); color: var(--purple-600);
  border-radius: 999px; font-size: 10.5px; font-weight: 700; margin-bottom: 6px;
}
.hiw-step-body h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.hiw-step-body p { margin-top: 4px; font-size: 14px; color: var(--ink-700); line-height: 1.6; white-space: pre-line; word-break: keep-all; text-wrap: pretty; }

.hiw-rewards { display: flex; flex-direction: column; gap: 8px; }
.hiw-reward {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px; background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 18px;
}
.hiw-reward-num { line-height: 1; }
.rn-num { font-size: 32px; font-weight: 900; color: var(--purple-500); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.rn-unit { font-size: 9.5px; font-weight: 800; color: var(--ink-500); letter-spacing: .12em; margin-top: 4px; }
.hiw-reward-body { min-width: 0; }
.hiw-reward-body h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.hiw-reward-body p { margin-top: 3px; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; word-break: keep-all; text-wrap: pretty; }
.hiw-reward-qty {
  padding: 5px 11px; background: var(--purple-50); color: var(--purple-600);
  border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}

.hiw-draw-lead { font-size: 13.5px; color: var(--ink-700); line-height: 1.6; margin-bottom: 18px; word-break: keep-all; text-wrap: pretty; }
.draw-card { padding: 30px 20px 16px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 18px; }
.draw-track { position: relative; height: 8px; background: var(--ink-100); border-radius: 999px; margin: 40px 14px 58px; }
.draw-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--purple-300), var(--purple-500) 60%, var(--ink-900));
  border-radius: 999px;
  transition: width .6s var(--ease);
}
.draw-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.draw-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink-300);
  transition: border-color .3s var(--ease);
  position: relative; z-index: 2;
}
.draw-mark.on .draw-dot { border-color: var(--purple-500); box-shadow: 0 4px 10px rgba(93,67,150,.24); }
.draw-mark.max.on .draw-dot { border-color: var(--ink-900); }
.draw-mult {
  position: absolute; bottom: 26px;
  font-size: 15px; font-weight: 900; color: var(--ink-300);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color .3s var(--ease);
}
.draw-mark.on .draw-mult { color: var(--purple-500); }
.draw-mark.max.on .draw-mult { color: var(--ink-900); }
.draw-at { position: absolute; top: 26px; font-size: 11px; font-weight: 700; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.draw-legend { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-500); }
.draw-legend b { color: var(--purple-600); font-weight: 800; margin-right: 4px; }

.hiw-notice { margin-top: 28px; padding: 14px 18px; background: var(--ink-100); border-radius: 14px; font-size: 12px; color: var(--ink-700); line-height: 1.7; word-break: keep-all; }
.hiw-notice b { color: var(--ink-900); font-weight: 700; }

.bottom-cta {
  padding: 14px 24px calc(18px + var(--safe-b));
  flex-shrink: 0; background: var(--bg); border-top: 1px solid var(--line);
}
.skip-link {
  padding: 10px 16px; min-height: 44px;
  font-size: 14px; font-weight: 700; color: var(--ink-500);
  border-radius: 999px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.skip-link:hover { background: var(--ink-100); color: var(--ink-900); }
.guest-link {
  display: block; width: 100%;
  margin-top: 10px; padding: 12px;
  font-size: 14.5px; font-weight: 700; color: var(--ink-500);
  text-decoration: underline; text-underline-offset: 3px;
  border-radius: 12px;
}
.guest-link:hover { color: var(--purple-600); }

/* ==========================================================================
   02 · Auth (닉네임)
   ========================================================================== */
.auth-title-wrap { margin: 8px 0 32px; }
.auth-title { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; }
.auth-lead { margin-top: 12px; font-size: 15px; color: var(--ink-700); line-height: 1.65; word-break: keep-all; text-wrap: pretty; }
.field { margin-bottom: 26px; }
.field-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--ink-500); text-transform: uppercase; margin-bottom: 10px;
}
.text-input {
  width: 100%; height: 58px; padding: 0 18px;
  background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: 14px;
  font-size: 16px; font-weight: 600; color: var(--ink-900);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.text-input::placeholder { color: var(--ink-300); font-weight: 500; }
.text-input:focus { outline: none; border-color: var(--purple-500); box-shadow: var(--focus-ring); }
.field-hint { margin-top: 8px; font-size: 12px; color: var(--ink-400); }
.field-hint.error { color: var(--danger); }

/* ---- 전화번호 인증 (Firebase) ---- */
.pa-row { display: flex; gap: 8px; }
.pa-row .text-input { flex: 1; min-width: 0; }
.pa-btn { height: 58px; padding: 0 18px; font-size: 14px; flex-shrink: 0; }
.pa-ok { color: var(--success); font-weight: 600; }
.pa-err { color: var(--danger); font-weight: 600; }
.pa-verified-box {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: #EDFAF4;
  border: 1.5px solid rgba(20,184,122,.35);
}
.pa-verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 800; color: var(--success);
}
.pa-verified-badge svg { width: 16px; height: 16px; }
.pa-verified-num { font-size: 15px; font-weight: 700; color: var(--ink-800); letter-spacing: .01em; }
/* invisible reCAPTCHA 배지가 화면을 가리지 않게 */
#recaptcha-holder { position: fixed; bottom: 0; left: 0; z-index: 1; }
/* 데모(테스트) 모드 — 화면에 표시되는 인증 코드 */
.pa-demo-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: #FFF8E6;
  border: 1.5px dashed #E6A700;
}
.pa-demo-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #9A7100; background: #FFE9AE;
  padding: 3px 8px; border-radius: var(--r-pill);
}
.pa-demo-code {
  font-size: 20px; font-weight: 800; letter-spacing: .18em;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.pa-demo-note { font-size: 12px; color: #9A7100; width: 100%; }

/* ==========================================================================
   03 · Home
   ========================================================================== */
/* 토스/커머스 스타일 — 카드 테두리 최소화, 여백으로 구분, 사진 슬롯 확보 */
.home-scroll { padding: 0 0 8px; }

/* --- 내 스탬프 현황 (배너 위) --- */
.home-status {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: calc(100% - 32px); margin: 4px 16px 14px; padding: 6px 4px;
  text-align: left;
}
.hs-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-hello { font-size: 13.5px; font-weight: 600; color: var(--ink-500); }
.hs-hello b { color: var(--ink-900); font-weight: 800; }
.hs-count { display: inline-flex; align-items: baseline; gap: 5px; line-height: 1; margin: 4px 0 2px; }
.hs-count b { font-size: 40px; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.hs-count small { font-size: 16px; font-weight: 700; color: var(--ink-400); }
.hs-next { font-size: 13.5px; font-weight: 600; color: var(--purple-600); word-break: keep-all; }
/* 우측: 'STAMP HERE' 캐릭터 보드 (images/chars/stamp-here.png) — 없으면 원형 진행 링 */
.hs-art { position: relative; flex-shrink: 0; width: 108px; height: 84px; display: grid; place-items: center; }
.hs-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hs-art .hs-ring { display: none; }
.hs-art.no-img img { display: none; }
.hs-art.no-img .hs-ring { display: grid; }
/* 원형 진행 링 (conic-gradient) — 이미지 폴백 */
.hs-ring {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(var(--purple-500) calc(var(--p) * 1%), var(--ink-100) 0);
  display: grid; place-items: center;
}
.hs-ring span {
  width: 56px; height: 56px; border-radius: 50%; background: var(--bg);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: var(--purple-600); font-variant-numeric: tabular-nums;
}

/* --- 프로모 배너 슬라이더 (순수 사진 · 슬롯: images/home/banner-1~3.jpg) --- */
.promo { margin: 0 16px; }
.promo-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 18px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-slide {
  flex: 0 0 100%; scroll-snap-align: start; position: relative;
  aspect-ratio: 1024 / 482; overflow: hidden;   /* 배너 이미지 원본 비율 — 크롭 없이 꽉 채움 */
  background: var(--bg-soft);
  display: grid; place-items: center;
}
.promo-slide .ps-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* 사진 없을 때 플레이스홀더 (아이콘 + 파일명 힌트) */
.ps-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-300); }
.ps-ph svg { width: 34px; height: 34px; }
.ps-ph small { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
/* 컨트롤: ‹ 1 · ● ○ ○ · 3 › ⏸ */
.promo-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  margin-top: 8px;
}
.pc-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-500); }
.pc-btn:hover { background: var(--ink-100); }
.pc-btn svg { width: 15px; height: 15px; }
.pc-page { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pc-page b { color: var(--ink-900); }
#promo-dots { display: inline-flex; gap: 4px; }
#promo-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-200); transition: all .2s; }
#promo-dots i.on { background: var(--purple-500); width: 14px; border-radius: 999px; }
.pc-pause { margin-left: 4px; border: 1px solid var(--line); }

/* --- 2×2 큰 타일 메뉴 --- */
.tile-block { padding-top: 16px; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 78px; padding: 14px 14px 14px 16px;
  background: var(--bg-soft); border-radius: 16px; text-align: left;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.tile:hover { background: var(--ink-100); }
.tile:active { transform: scale(.98); }
.tile-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-txt b { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.tile-txt small { font-size: 12px; color: var(--ink-500); font-weight: 500; }
/* 타일 우측: 부기 캐릭터(images/chars/bugi-*.png) — 이미지가 있으면 아이콘 배경 대신 캐릭터만 표시 */
.tile-ic { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.tile-ic svg { width: 22px; height: 22px; }
.tile-ic.has-char { width: 60px; height: 68px; margin: -12px -8px -8px 0; background: transparent; align-self: center; }
.tile-ic.has-char svg { display: none; }
/* 원본 PNG의 하단 투명 여백이 상단보다 적어 살짝 내려 보임 → 위로 보정 */
.tile-char {
  width: 100%; height: 100%; object-fit: contain; object-position: center 40%;
  display: block; transform: translateY(-5px);
  filter: drop-shadow(0 4px 6px rgba(42,28,72,.12));
}
.tile-map   { background: #E8F0FE; color: #2F6BE0; }
.tile-stamp { background: var(--purple-50); color: var(--purple-600); }
.tile-gift  { background: #FFF3E0; color: #D18F1F; }
.tile-draw  { background: #E9F9F1; color: #14B87A; }

/* --- 블록 공통 --- */
.home-block { padding: 28px 16px 0; }
.hb-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.hb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hb-head .hb-title { margin: 0; }
.home-block > .hb-title { margin-bottom: 14px; }
.hb-more { font-size: 13px; font-weight: 600; color: var(--ink-500); display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; }
.hb-desc { margin: -8px 0 14px; font-size: 13.5px; color: var(--ink-500); font-weight: 500; word-break: keep-all; }
.hb-more svg { width: 13px; height: 13px; }

/* --- 축제 1줄 가로 롤링 (포스터 슬롯: images/festivals/fest-NN.jpg · 세로 3:4) --- */
.fest-scroll {
  display: flex; align-items: flex-start; gap: 12px; overflow-x: auto;
  margin: 0 -16px; padding: 0 16px 6px;
  scroll-snap-type: x mandatory; scroll-padding-left: 16px;
  scrollbar-width: none;
}
.fest-scroll::-webkit-scrollbar { display: none; }
/* 카드 폭 150px 고정 — 내부 콘텐츠(2줄 제목·이미지 고유 크기)가 폭을 늘리지 못하도록 width/min/max 모두 고정 */
.fest-card {
  flex: 0 0 150px; width: 150px; min-width: 150px; max-width: 150px;
  scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; gap: 0;
  align-items: stretch;
}
.fest-card .fc-photo {
  position: relative; width: 150px; height: 200px; /* 3:4 포스터 고정 */
  border-radius: 14px; overflow: hidden;
  background: var(--bg-soft);
  display: grid; place-items: center;
}
.fest-card .fc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; z-index: 1; }
.fest-card .fc-photo.has-photo { box-shadow: 0 0 0 1px rgba(23,23,27,.06) inset; }
.fest-card .fc-stamp { width: 78px; height: 78px; opacity: .9; }
.fest-card.got .fc-stamp { opacity: 1; }
/* 사진이 실제로 로드된 카드(onload → .has-photo)는 사진만 — 스탬프 플레이스홀더 숨김 */
.fest-card .fc-photo.has-photo .fc-stamp { display: none; }
.fest-card .fc-tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; color: #fff;
}
.fest-card .fc-tag.live { background: #E15656; }
.fest-card .fc-tag.got { background: var(--success); }
.fest-card .fc-tag svg { width: 11px; height: 11px; }
.fest-card .fc-name {
  margin-top: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(14px * 1.35 * 2); /* 항상 2줄 높이 확보 → 카드 하단(날짜) 정렬 일치 */
}
.fest-card .fc-meta {
  margin-top: 4px; font-size: 12px; color: var(--ink-500); font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 스탬프 굿즈: 세로형 카드 2열 그리드 (사진 슬롯: images/goods/goods-N.jpg) --- */
.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gift-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; text-align: left;
  transition: transform .15s var(--ease);
}
.gift-card:active { transform: scale(.98); }
/* 정방형 사진 + 좌상단 '스탬프 N개' 뱃지 */
.gc-photo {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: var(--ink-100); color: var(--ink-400);
  display: grid; place-items: center; margin-bottom: 8px;
}
.gc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
.gc-photo svg { width: 34px; height: 34px; }
/* 굿즈별 크롭 보정 */
.gift-card[data-goods="1"] .gc-photo img { object-position: 52% 58%; transform: scale(1.12); }
.gift-card[data-goods="2"] .gc-photo img { object-position: 50% 55%; transform: scale(1.25); }
.gift-card[data-goods="3"] .gc-photo img { object-position: 50% 48%; transform: scale(1.15); }
.gift-card.on .gc-photo { box-shadow: 0 0 0 2px var(--purple-500) inset; }
.gc-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 6px 10px; border-radius: 9px; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
  background: rgba(255,255,255,.94); color: var(--ink-800);
  box-shadow: 0 2px 8px rgba(23,23,27,.12);
}
.gc-badge.on { background: var(--purple-500); color: #fff; }
.gc-name { font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; word-break: keep-all; color: var(--ink-900); }
.gc-sub { font-size: 12.5px; color: var(--ink-500); font-weight: 500; }
.gc-sub b { color: var(--purple-600); font-weight: 800; }

/* --- 경품 응모 독립 섹션 (이미지 슬롯: images/home/prize.png) --- */
.draw-block { padding-top: 36px; }
.draw-banner.on .db-title { font-size: 32px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #FFD66B; }
.draw-banner {
  position: relative; display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px;
  width: 100%; min-height: 148px; padding: 20px 18px 20px 20px; text-align: left;
  background: linear-gradient(135deg, #2A1C48 0%, #412D6C 55%, #5D4396 100%);
  color: #fff; border-radius: 20px; overflow: hidden;
  transition: transform .2s var(--ease);
}
.draw-banner:hover { transform: translateY(-1px); }
.db-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; position: relative; z-index: 1; }
.db-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.7); text-transform: uppercase; }
/* 잠김 상태: '스탬프 모으고' → '경품 당첨 확률 UP!' 2줄 헤드라인 */
.db-eyebrow.db-eyebrow-lg { font-size: 19px; font-weight: 900; letter-spacing: -0.03em; color: #fff; text-transform: none; line-height: 1.25; margin-bottom: -4px; }
.db-title { font-size: 19px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; }
.draw-banner:not(.on) .db-title { color: #FFD66B; }
/* 배수 구간: 5개 → 2배 · 7개 → 3배 · 10개 → 4배 */
.db-tiers {
  margin-top: 4px; padding: 5px 10px; border-radius: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  font-size: 11.5px; font-weight: 800; letter-spacing: -0.01em; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.db-sub { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.78); line-height: 1.45; word-break: keep-all; }
.db-btn {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 3px;
  padding: 9px 14px; border-radius: 999px;
  background: #fff; color: var(--purple-700);
  font-size: 13px; font-weight: 800;
}
.db-btn svg { width: 13px; height: 13px; }
.draw-banner.on .db-btn { background: #FFD66B; color: #5A3D00; }
/* 우측 경품 이미지 슬롯 — 없으면 선물 아이콘 플레이스홀더 */
.db-photo {
  position: relative; width: 120px; height: 120px;
  display: grid; place-items: center; color: rgba(255,255,255,.35);
}
.db-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); }
.db-photo svg { width: 56px; height: 56px; }
/* 완성형 배너 이미지 모드 — 이미지가 카드 전체, 좌하단 흰 알약 자리에 버튼만 얹음 */
.db-img { display: none; }
/* 원본 이미지(1024×637, 연보라 카드) 픽셀 측정: 카드 영역 x 2.15~97.95% · y 16.8~89.0% (나머지는 흰 여백)
   → 래퍼를 카드 비율(981:460)로 두고 이미지를 확대 배치해 흰 여백을 완전히 잘라냄.
   좌측 콘텐츠(배수 칩) 하단은 카드 높이의 74%, 우측 선물상자는 카드 폭 71%부터 → 좌하단 26%×71% 영역이 비어 있음 = 버튼 자리 */
.db-img-wrap { display: none; }
/* 아트웍 위에는 버튼이 들어갈 빈 공간이 없어(배수 칩이 카드 하단 90%까지 내려옴)
   → 아트웍 아래에 같은 연보라 톤의 푸터 줄을 두고 거기에 기존 알약 버튼을 그대로 배치 (아트웍 가림 없음) */
.draw-banner.has-img {
  display: block; padding: 0; min-height: 0;
  background: #F1EDFC;
}
/* 픽셀 측정(1024×637): 카드 아트웍 x 22~1003 · y 107~566 (그 아래는 흰 여백) */
.draw-banner.has-img .db-img-wrap {
  display: block; position: relative; width: 100%; aspect-ratio: 981 / 459; overflow: hidden;
}
.draw-banner.has-img .db-img {
  display: block; position: absolute;
  left: -2.243%; width: 104.383%;    /* 1024/981 */
  top: -23.312%; height: 138.780%;   /* 637/459, 107px 오프셋 */
  max-width: none; object-fit: fill;
}
.draw-banner.has-img .db-copy, .draw-banner.has-img .db-photo, .draw-banner.has-img::after { display: none; }
/* 이미지 배너에는 별도 버튼 없음 — 배너 전체가 탭 영역(리워드 탭 이동) */
.draw-banner::after { /* 은은한 하이라이트 */
  content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events: none;
}

.home-bottom-pad { height: 24px; }

/* ==========================================================================
   TabBar
   ========================================================================== */
.tabbar {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  padding: 6px 8px calc(8px + var(--safe-b));
  position: sticky; bottom: 0; z-index: 30;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 5px; border-radius: 12px;
  color: var(--ink-500);
  font-size: 11.5px; font-weight: 700;
  transition: color .15s var(--ease);
  min-height: 52px;
}
.tab-item svg { width: 24px; height: 24px; }
.tab-item.active { color: var(--purple-600); }
.tab-item:hover { color: var(--ink-700); }
.tab-item.active:hover { color: var(--purple-600); }

/* ==========================================================================
   스탬프 (공식 아트웍 PNG · 투명 배경)
   ========================================================================== */
.stamp-vis { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 04 · 스탬프 컬렉션 (레퍼런스: 요약 카드 + 2열 카드 그리드) */
.stamps-summary {
  margin: 0 24px 22px; width: calc(100% - 48px);
  display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px;
  padding: 18px 18px 18px 8px; border-radius: 18px;
  background: var(--purple-50); text-align: left;
}
.ss-count { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ss-count b { font-size: 40px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ss-count small { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-500); }
.ss-tiers { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ss-tier { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ss-tier .ss-k { font-weight: 800; color: var(--ink-800); letter-spacing: .02em; white-space: nowrap; }
.ss-tier .ss-line { flex: 1; border-top: 1.5px dashed var(--purple-100); }
.ss-tier .ss-v { font-weight: 700; color: var(--ink-500); white-space: nowrap; }
.ss-tier.done .ss-k { color: var(--purple-600); }
.ss-tier.done .ss-v { color: var(--purple-600); font-weight: 800; }

#stamps-scroll, #stamps-scroll .sched-topbar { background: var(--bg); }
.stamps-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stamp-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 16px 14px 14px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 16px;
  transition: all .18s var(--ease);
}
.stamp-cell:hover { box-shadow: var(--sh-card); transform: translateY(-1px); }
.stamp-cell .sc-img { width: 100%; aspect-ratio: 1; position: relative; margin-bottom: 10px; padding: 4px; }
.stamp-cell .sc-check {
  position: absolute; right: 2px; bottom: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--success); color: #fff; display: grid; place-items: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.stamp-cell .sc-check svg { width: 13px; height: 13px; }
.stamp-cell .sc-name { font-size: 13px; font-weight: 800; color: var(--ink-900); line-height: 1.3; letter-spacing: -0.02em; }
.stamp-cell .sc-date { font-size: 11.5px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
/* 미획득: 스탬프를 흑백·반투명으로 (레퍼런스 톤) */
.stamp-cell.empty .sc-img { filter: grayscale(1); opacity: .45; }
.stamp-cell.got { border-color: var(--purple-100); }
/* 웰컴 거점 스탬프 (베이스) — 2열 풀폭 가로 카드, 컬렉션 맨 앞 */
.stamp-cell.welcome {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 14px;
  padding: 14px 16px 14px 14px;
  background: linear-gradient(135deg, var(--purple-50), #fff 70%);
  border-color: var(--purple-100);
}
.stamp-cell.welcome .sc-img { width: 96px; flex: 0 0 96px; margin-bottom: 0; padding: 2px; }
.stamp-cell.welcome .sc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stamp-cell.welcome .sc-badge {
  align-self: flex-start; padding: 3px 8px; border-radius: 6px;
  background: var(--purple-600); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
.stamp-cell.welcome .sc-name { font-size: 14.5px; word-break: keep-all; }
.stamp-cell.welcome.empty .sc-badge { background: var(--ink-300); }
.stamp-cell.welcome.got { border-color: var(--purple-300); }
.stamp-empty-slot {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px dashed var(--ink-200);
  display: grid; place-items: center;
  color: var(--ink-200);
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.stamp-pop { animation: stampPop .5s var(--ease); }
@keyframes stampPop {
  0% { transform: scale(1.5) rotate(-14deg); opacity: 0; }
  60% { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ==========================================================================
   05 · Events 리스트
   ========================================================================== */
.filter-row {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 4px 24px 12px; margin: 0;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0; padding: 10px 16px; min-height: 42px;
  border-radius: 999px; border: 1.5px solid var(--line-strong);
  font-size: 14px; font-weight: 700; color: var(--ink-700);
  background: var(--bg);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--ink-300); }
.filter-chip.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.filter-label { flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-400); text-transform: uppercase; margin-right: 4px; }

.event-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 24px 28px; }
.event-card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg);
  text-align: left; width: 100%;
  transition: all .2s var(--ease);
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--sh-card); border-color: var(--purple-100); }
.event-card .ec-stamp { width: 64px; height: 64px; }
.event-card .ec-body { min-width: 0; }
.event-card .ec-top { display: flex; align-items: center; gap: 6px; }
.ec-theme { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--purple-500); text-transform: uppercase; }
.ec-status {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--ink-100); color: var(--ink-500);
}
.ec-status.ongoing { background: rgba(20,184,122,.12); color: var(--success); }
.event-card h3 { margin-top: 3px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; word-break: keep-all; }
.event-card .ec-meta { margin-top: 4px; font-size: 13px; color: var(--ink-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.event-card .ec-check { color: var(--success); }
.event-card .ec-check svg { width: 22px; height: 22px; }
.event-card .ec-arrow { color: var(--ink-300); }
.event-card .ec-arrow svg { width: 18px; height: 18px; }

.empty-note { padding: 48px 24px; text-align: center; color: var(--ink-400); font-size: 14px; }
.empty-note .btn { margin-top: 16px; height: 44px; font-size: 13.5px; }

/* ==========================================================================
   06 · Event Detail
   ========================================================================== */
.detail-hero {
  margin: 4px 16px 0; border-radius: var(--r-lg);
  padding: 26px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
  background: var(--purple-50);
}
.detail-hero .dh-stamp { width: 128px; height: 128px; filter: drop-shadow(0 12px 22px rgba(42,28,72,.14)); }
.detail-hero .dh-theme { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--purple-600); text-transform: uppercase; }
.detail-hero h1 { font-size: 21px; font-weight: 900; letter-spacing: -0.03em; text-align: center; line-height: 1.3; word-break: keep-all; }
.detail-hero .dh-badge {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--success); color: #fff;
  font-size: 11.5px; font-weight: 800;
}
.detail-hero .dh-badge svg { width: 13px; height: 13px; }

.detail-desc { padding: 20px 24px 0; font-size: 14px; color: var(--ink-700); line-height: 1.7; word-break: keep-all; }
.detail-info { margin: 20px 24px 0; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; }
.detail-info .di-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 12px;
  padding: 13px 18px; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.detail-info .di-row:first-child { border-top: none; }
.detail-info .di-k { color: var(--ink-400); font-weight: 700; font-size: 12px; letter-spacing: .04em; align-self: center; }
.detail-info .di-v { font-weight: 700; color: var(--ink-800); }
.detail-cta-note { padding: 12px 24px 0; text-align: center; font-size: 11.5px; color: var(--ink-400); }

.detail-actions { padding: 16px 24px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }
.btn-sub {
  height: 46px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  font-size: 14px; font-weight: 700; color: var(--ink-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s var(--ease);
}
.btn-sub:hover { border-color: var(--ink-300); background: var(--ink-100); }
.btn-sub svg { width: 15px; height: 15px; flex-shrink: 0; }

/* 스캔 / 획득 모달 */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(23,23,27,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal-card {
  width: 100%; max-width: 340px;
  background: var(--bg); border-radius: 24px;
  padding: 32px 24px 24px;
  text-align: center;
  animation: popIn .3s var(--ease);
}
@keyframes popIn { from { transform: scale(.92); opacity: 0; } }
.scan-frame {
  width: 120px; height: 120px; margin: 0 auto 18px;
  border-radius: 20px; position: relative;
  background: var(--ink-100);
  display: grid; place-items: center;
  overflow: hidden;
}
.scan-frame svg { width: 64px; height: 64px; color: var(--ink-300); }
.scan-line {
  position: absolute; left: 10px; right: 10px; height: 3px;
  background: var(--purple-500); border-radius: 999px;
  box-shadow: 0 0 14px rgba(93,67,150,.8);
  animation: scanMove 1.1s ease-in-out infinite alternate;
}
@keyframes scanMove { from { top: 14px; } to { top: 102px; } }
.modal-title { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }
.modal-sub { margin-top: 6px; font-size: 13px; color: var(--ink-500); word-break: keep-all; }
.modal-stamp { width: 130px; height: 130px; margin: 0 auto 14px; }
.modal-card .btn { margin-top: 20px; }

/* ==========================================================================
   07 · 지도 탭 = 축제 일정(SCHEDULE) 화면
   ========================================================================== */
.sched-scroll { padding: 0 0 8px; background: var(--bg-soft); }
.sched-topbar { background: var(--bg-soft); }
.sched-topbar .sched-brand { height: 40px; width: auto; }
.sched-head { padding: 6px 24px 14px; }
.sched-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--purple-500); text-transform: uppercase; }
.sched-title { margin-top: 6px; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; }
.sched-lead { margin-top: 6px; font-size: 13px; color: var(--ink-500); font-weight: 500; line-height: 1.55; text-wrap: pretty; }

/* 스탬프 카운터 필 */
.sched-counter {
  margin: 0 24px 18px; width: calc(100% - 48px);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; height: 44px; border-radius: 999px;
  background: var(--purple-50); color: var(--purple-600);
  text-align: left;
}
.sched-counter .sc-num { font-size: 13.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sched-counter .sc-num b { font-size: 16px; font-weight: 900; }
.sched-counter .sc-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--purple-100); overflow: hidden; }
.sched-counter .sc-bar span { display: block; height: 100%; border-radius: 999px; background: var(--purple-500); transition: width .6s var(--ease); }
.sched-counter .sc-unit { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; }

.sched-block { padding: 0 24px; margin-bottom: 22px; }
.sched-h2 { font-size: 15.5px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sched-count { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--purple-500); color: #fff; font-size: 11px; font-weight: 800; }

/* 스탬프 투어 맵 카드 — 일러스트 맵 이미지(images/tour-map.jpg)가 있으면 이미지, 없으면 Leaflet */
.tour-map-card {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-100);
  box-shadow: 0 10px 28px rgba(42,28,72,.10), 0 0 0 1px var(--line);
}
#leaflet-map { position: absolute; inset: 0; z-index: 1; }
.tour-map-card .tour-map-img { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; display: none; }
.tour-map-card.has-img .tour-map-img { display: block; }
.tour-map-card.has-img #leaflet-map, .tour-map-card.has-img .map-legend { display: none; }

/* 필터: 라벨 제목 + 칩 (지역 / 테마) */
.sched-filters { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.sched-filter { padding-left: 24px; }
.sched-filter .sched-h2 { margin-bottom: 8px; }
.sched-filter .filter-row { padding: 0 24px 6px 0; }
.sched-filter .filter-chip { min-height: 38px; padding: 8px 15px; font-size: 13.5px; }

/* 축제 카드 리스트 */
.sched-cards { display: flex; flex-direction: column; gap: 10px; }
.sched-card {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: 100%; padding: 14px 14px 14px 12px; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  transition: all .18s var(--ease);
}
.sched-card:hover { box-shadow: var(--sh-card); transform: translateY(-1px); }
.sched-card.live { border-color: var(--purple-500); box-shadow: 0 0 0 1px var(--purple-500) inset; }
.sched-card .sd-stamp { position: relative; width: 52px; height: 52px; }
.sched-card .sd-check {
  position: absolute; right: -3px; bottom: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--success); color: #fff; display: grid; place-items: center;
  border: 2px solid #fff;
}
.sched-card .sd-check svg { width: 11px; height: 11px; }
.sched-card .sd-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sched-card .sd-tags { display: flex; gap: 4px; }
.sched-card .sd-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--ink-100); color: var(--ink-500); }
.sched-card .sd-name { font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink-900); }
.sched-card .sd-meta { font-size: 11.5px; color: var(--ink-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.sched-card .sd-badge {
  font-size: 11px; font-weight: 800; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--ink-100); color: var(--ink-700);
}
.sched-card .sd-badge.ticket { background: var(--purple-500); color: #fff; }
.sched-card .sd-badge.free { background: var(--purple-50); color: var(--purple-600); }
.map-legend {
  position: absolute; z-index: 10; left: 12px; bottom: 12px;
  display: flex; gap: 12px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-700);
  box-shadow: var(--sh-card);
}
.map-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.map-lead { padding: 0 24px 10px; font-size: 13px; color: var(--ink-500); font-weight: 600; }
.fest-pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: grid; place-items: center;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 10px rgba(23,23,27,.3);
}
.fest-pin svg { width: 14px; height: 14px; transform: rotate(45deg); color: #fff; }
.booth-pin {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--ink-900);
  display: grid; place-items: center;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 10px rgba(23,23,27,.3);
}
.booth-pin svg { width: 13px; height: 13px; color: #fff; }
.leaflet-popup-content-wrapper { border-radius: 14px; font-family: inherit; }
.leaflet-popup-content { margin: 12px 16px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content b { font-weight: 800; }
.map-pop-link { color: var(--purple-600); font-weight: 800; font-size: 12.5px; cursor: pointer; display: inline-block; margin-top: 4px; }

/* ==========================================================================
   08 · Rewards 탭
   ========================================================================== */
.rewards-lead { padding: 4px 24px 16px; font-size: 14px; color: var(--ink-500); font-weight: 600; }
.reward-tiers { display: flex; flex-direction: column; gap: 12px; padding: 0 24px; }
.reward-tier {
  border: 1.5px solid var(--line); border-radius: 20px;
  padding: 20px 18px; background: var(--bg);
  position: relative; overflow: hidden;
}
.reward-tier.unlocked { border-color: var(--purple-300); background: linear-gradient(0deg, rgba(244,240,255,.5), rgba(244,240,255,.5)), var(--bg); }
.reward-tier .rt-head { display: flex; align-items: center; gap: 12px; }
.rt-tier-badge {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ink-100); color: var(--ink-500);
  font-size: 17px; font-weight: 900;
}
.reward-tier.unlocked .rt-tier-badge { background: var(--purple-500); color: #fff; box-shadow: 0 6px 14px rgba(93,67,150,.24); }
.rt-head-body { flex: 1; min-width: 0; }
.rt-head-body h3 { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
.rt-head-body p { margin-top: 2px; font-size: 12.5px; color: var(--ink-500); word-break: keep-all; }
.rt-state { font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); white-space: nowrap; }
.reward-tier.unlocked .rt-state { background: var(--purple-500); color: #fff; }
/* 리워드 탭 굿즈 사진 (images/goods/goods-N.jpg) */
.rt-photo { margin-top: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-100); }
.rt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.rt-icons { display: flex; gap: 8px; margin-top: 12px; }
.rt-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--ink-100); color: var(--ink-500);
  display: grid; place-items: center;
}
.reward-tier.unlocked .rt-icon { background: var(--purple-100); color: var(--purple-600); }
.rt-icon svg { width: 26px; height: 26px; }
.rt-qty { margin-top: 12px; font-size: 11.5px; color: var(--ink-400); font-weight: 600; }

.howget-card {
  margin: 24px 24px 28px; padding: 18px;
  background: var(--ink-100); border-radius: 18px;
}
.howget-card h3 { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.howget-card h3 svg { width: 17px; height: 17px; color: var(--purple-600); }
.howget-card p { margin-top: 8px; font-size: 13px; color: var(--ink-700); line-height: 1.65; word-break: keep-all; }

.rewards-draw-sec { padding: 6px 24px 0; }

/* ==========================================================================
   09 · MY
   ========================================================================== */
.my-profile { padding: 12px 24px 20px; display: flex; align-items: center; gap: 16px; }
.my-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-300), var(--purple-600));
  color: #fff; font-size: 24px; font-weight: 900;
  display: grid; place-items: center;
}
.my-name { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.my-phone { margin-top: 2px; font-size: 12.5px; color: var(--ink-400); font-weight: 600; font-variant-numeric: tabular-nums; }
.my-stats {
  margin: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.my-stat {
  border: 1.5px solid var(--line); border-radius: 16px; padding: 16px;
  background: var(--bg);
}
.my-stat .ms-k { font-size: 11.5px; font-weight: 700; color: var(--ink-400); }
.my-stat .ms-v { margin-top: 4px; font-size: 19px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.my-stat .ms-v.on { color: var(--purple-600); }
.my-menu { margin: 20px 24px; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; }
.my-menu-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; text-align: left;
  border-top: 1px solid var(--line);
  font-size: 14.5px; font-weight: 700; color: var(--ink-800);
  transition: background .15s var(--ease);
}
.my-menu-item:first-child { border-top: none; }
.my-menu-item:hover { background: var(--bg-soft); }
.my-menu-item svg { width: 19px; height: 19px; color: var(--ink-400); flex-shrink: 0; }
.my-menu-item .mm-value { margin-left: auto; font-size: 13px; color: var(--ink-400); font-weight: 600; }
.my-menu-item.danger { color: var(--danger); }
.my-menu-item.danger svg { color: var(--danger); }
.my-footer { padding: 8px 24px 28px; text-align: center; font-size: 11px; color: var(--ink-300); }

/* 언어 선택 시트 */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(23,23,27,.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
.sheet {
  width: 100%; max-width: 440px;
  background: var(--bg); border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(28px + var(--safe-b));
  animation: sheetUp .3s var(--ease);
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
.sheet h3 { font-size: 17px; font-weight: 900; margin-bottom: 16px; }
.sheet .lang-grid { grid-template-columns: 1fr 1fr; }
.sheet .field { margin-bottom: 18px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 8px; }
.sheet-actions .btn { flex: 1; }

/* 축하 컨페티 (완주) */
.confetti-piece {
  position: fixed; top: -12px; z-index: 200;
  width: 8px; height: 13px; border-radius: 2px;
  animation: confettiFall linear forwards;
  pointer-events: none;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* 토스트 */
.toast {
  position: fixed; z-index: 150;
  left: 50%; bottom: calc(88px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--ink-900); color: #fff;
  padding: 11px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 12px 28px rgba(23,23,27,.3);
  animation: toastIn .3s var(--ease);
  max-width: calc(100vw - 48px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes toastIn { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ==========================================================================
   Welcome intro video overlay
   ========================================================================== */
html.intro-lock { overflow: hidden; }
.intro-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: #5D4396; /* 공식 로고 보라 */
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity .6s var(--ease);
}
.intro-overlay.intro-out { opacity: 0; pointer-events: none; }

/* ---- '영상 속으로 들어가는' 줌 전환 (부드러운 크로스페이드) ---- */
.intro-overlay.intro-zoom {
  pointer-events: none;
  animation: introZoomOut 1.8s ease-in-out forwards;
}
.intro-overlay.intro-zoom .intro-stage {
  animation: introStageZoom 1.8s ease-in-out forwards;
}
.intro-overlay.intro-zoom .intro-skip { opacity: 0; transition: opacity .3s; }
@keyframes introZoomOut {
  0%   { opacity: 1; background: transparent; }
  100% { opacity: 0; background: transparent; }
}
@keyframes introStageZoom {
  0%   { transform: scale(1); filter: blur(0); }
  100% { transform: scale(1.28); filter: blur(6px); }
}
/* 뒤에서 드러나는 앱 화면: 처음부터 은은하게 밝아지며 자리 잡음 */
#root.app-zoom-in {
  animation: appZoomIn 1.8s ease-out both;
}
@keyframes appZoomIn {
  0%   { transform: scale(.985); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-overlay.intro-zoom,
  .intro-overlay.intro-zoom .intro-stage,
  #root.app-zoom-in { animation: none; }
  .intro-overlay.intro-zoom { opacity: 0; }
}
.intro-stage {
  position: relative;
  width: 100%; height: 100%;
  max-width: 480px;
  overflow: hidden;
  background: #5D4396;
}
/* 영상 로드 전 — 보라 배경 위 다이아몬드·물결 반복 패턴 (배지 굿즈 무늬) */
.intro-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/pattern-intro.svg');
  background-size: 160px 160px;
  background-repeat: repeat;
  opacity: .5;
}
/* 데스크톱: 여백 없이 화면 전체를 영상으로 풀블리드 */
@media (min-width: 720px) {
  .intro-stage {
    width: 100vw;
    max-width: none;
    height: 100vh; height: 100dvh;
    border-radius: 0;
  }
}
.intro-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 재생 전엔 숨김 — 재생 시작 시 중앙에서 원형으로 열리며 등장 */
  clip-path: circle(0% at 50% 50%);
}
.intro-playing .intro-video {
  animation: introIris 1.2s cubic-bezier(.6, .05, .3, 1) .25s forwards;
}
@keyframes introIris {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}
/* 영상 로드 전 중앙 로고 — 보라 배경 위 흰색 대비, 영상 시작 시 천천히 페이드아웃 */
.intro-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: min(80%, 560px);
  filter: brightness(0) invert(1); /* 보라 로고 → 흰색 */
  opacity: .96;
  pointer-events: none;
  animation: introLogoIn 1.2s ease-out backwards; /* 처음엔 은은하게 떠오름 */
}
@keyframes introLogoIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: .96; transform: translate(-50%, -50%) scale(1); }
}
/* 영상 시작 → 로고가 뱅글뱅글 돌며 소용돌이 속으로 빨려 들어감 */
.intro-playing .intro-logo {
  animation: introLogoSwirl 1s cubic-bezier(.55, 0, .8, .4) forwards;
}
@keyframes introLogoSwirl {
  0%   { opacity: .96; transform: translate(-50%, -50%) rotate(0deg) scale(1); filter: brightness(0) invert(1) blur(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-540deg) scale(.02); filter: brightness(0) invert(1) blur(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-playing .intro-logo { animation: none; opacity: 0; transition: opacity .4s; }
  .intro-video { clip-path: none; }
  .intro-playing .intro-video { animation: none; }
}
.intro-skip {
  position: absolute; right: 16px; top: calc(16px + var(--safe-t));
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(20,12,50,.45);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  transition: background .15s var(--ease);
}
.intro-skip:hover { background: rgba(20,12,50,.7); }

/* ==========================================================================
   QR 찍기 — 플로팅 버튼 + 카메라 스캐너 오버레이
   ========================================================================== */
.qr-fab {
  position: fixed; z-index: 60;
  right: 16px; bottom: calc(84px + var(--safe-b));
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 18px 0 16px; border-radius: 999px;
  background: var(--purple-900); color: #fff;   /* 진보라 — 밝은 화면에서 확실히 눈에 띄게 */
  border: 1.5px solid rgba(255,255,255,.18);
  font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: 0 12px 28px rgba(42,28,72,.45), 0 2px 6px rgba(42,28,72,.3);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .15s var(--ease);
  animation: fabIn .5s var(--ease) backwards .2s;
}
.qr-fab svg { width: 22px; height: 22px; }
.qr-fab:hover { background: var(--purple-700); }
.qr-fab:active { transform: scale(.95); }
@keyframes fabIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
/* 데스크톱 폰 프레임 안에서도 프레임 기준 우하단에 고정 */
@media (min-width: 720px) {
  .qr-fab { right: calc(50% - 220px + 16px); }
}

html.qr-lock { overflow: hidden; }
.qr-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}
.qr-overlay[hidden] { display: none; }
.qr-stage { position: relative; width: 100%; height: 100%; max-width: 520px; overflow: hidden; background: #000; }
.qr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.qr-live .qr-video { opacity: 1; }
/* 어두운 마스크 + 중앙 뚫린 사각 프레임 */
.qr-mask { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.qr-frame {
  position: relative; width: min(68vw, 300px); aspect-ratio: 1;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,.55);
  border-radius: 22px;
}
.qr-frame span {
  position: absolute; width: 34px; height: 34px;
  border: 4px solid #fff; border-radius: 6px;
}
.qr-frame span:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 22px; }
.qr-frame span:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 22px; }
.qr-frame span:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 22px; }
.qr-frame span:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 22px; }
.qr-frame .qr-line {
  position: absolute; left: 14px; right: 14px; height: 3px; border-radius: 999px;
  background: #B3A3D8; box-shadow: 0 0 16px rgba(179,163,216,.9);
  animation: qrScan 1.6s ease-in-out infinite alternate;
}
@keyframes qrScan { from { top: 14px; } to { top: calc(100% - 17px); } }
.qr-hit .qr-frame span { border-color: #14B87A; }
.qr-hit .qr-frame .qr-line { animation: none; opacity: 0; }

.qr-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + var(--safe-t)) 14px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
}
.qr-title { flex: 1; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.qr-close, .qr-torch {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: #fff;
}
.qr-close svg, .qr-torch svg { width: 22px; height: 22px; }
.qr-torch.on { background: #FFD66B; color: #5A3D00; }
.qr-torch[hidden] { visibility: hidden; display: grid; }

.qr-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 24px calc(28px + var(--safe-b));
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  text-align: center;
}
.qr-hint { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.5; word-break: keep-all; }
.qr-status {
  padding: 9px 14px; border-radius: 12px;
  background: rgba(255,255,255,.14); font-size: 13px; font-weight: 700; line-height: 1.45;
  word-break: keep-all; max-width: 100%;
}
.qr-status.err { background: rgba(225,86,86,.9); }
.qr-status[hidden] { display: none; }
.qr-manual {
  margin-top: 4px; padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.55); color: #fff;
  font-size: 13.5px; font-weight: 800;
}
.qr-manual:hover { background: rgba(255,255,255,.12); }

/* 카메라 권한 거부 → 허용 안내 시트 */
.qr-perm {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #fff; color: var(--ink-900);
  border-radius: 24px 24px 0 0;
  padding: 26px 24px calc(22px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; animation: sheetUp .3s var(--ease);
}
.qr-perm[hidden] { display: none; }
.qr-perm-icon {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: var(--purple-50); color: var(--purple-600); margin-bottom: 2px;
}
.qr-perm-icon svg { width: 28px; height: 28px; }
.qr-perm-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.qr-perm-desc { font-size: 13.5px; color: var(--ink-500); line-height: 1.55; word-break: keep-all; }
.qr-perm-steps {
  width: 100%; margin: 6px 0 4px; padding: 14px 16px; list-style: none; counter-reset: step;
  background: var(--bg-soft, #F6F4FB); border-radius: 16px;
  display: flex; flex-direction: column; gap: 9px; text-align: left;
}
.qr-perm-steps li {
  counter-increment: step; position: relative; padding-left: 30px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-700, var(--ink-900)); line-height: 1.45; word-break: keep-all;
}
.qr-perm-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--purple-600); color: #fff; font-size: 11.5px; font-weight: 800;
}
.qr-perm-retry {
  width: 100%; height: 52px; border-radius: 16px; margin-top: 4px;
  background: var(--purple-600); color: #fff; font-size: 15px; font-weight: 800;
}
.qr-perm-retry:active { transform: scale(.98); }
.qr-perm-open {
  width: 100%; height: 48px; border-radius: 16px;
  border: 1.5px solid var(--purple-300); color: var(--purple-700); background: #fff;
  font-size: 14px; font-weight: 800;
}
.qr-perm-open[hidden] { display: none; }
.qr-perm-manual {
  margin-top: 2px; padding: 8px 12px; color: var(--ink-500);
  font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* 수동 입력 폼 */
.qr-manual-form {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #fff; color: var(--ink-900);
  border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(24px + var(--safe-b));
  display: flex; flex-direction: column; gap: 12px;
  animation: sheetUp .3s var(--ease);
}
.qr-manual-form[hidden] { display: none; }
.qr-manual-label { font-size: 13px; font-weight: 700; color: var(--ink-500); }
.qr-manual-row { display: flex; gap: 8px; width: 100%; }
.qr-manual-input {
  flex: 1 1 0; min-width: 0; width: 0; height: 54px; border-radius: 14px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); font-size: 16px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-900); outline: none;
}

/* QR 그룹 → 축제 선택 모달 */
.pick-card { text-align: left; padding: 24px 20px 20px; }
.pick-group { display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 8px; background: var(--purple-50); color: var(--purple-600); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pick-card .modal-title, .pick-card .modal-sub { text-align: left; }
.pick-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.pick-item {
  display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
  transition: all .15s var(--ease);
}
.pick-item:hover { border-color: var(--purple-300); background: var(--purple-50); }
.pick-stamp { width: 44px; height: 44px; }
.pick-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-body b { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; word-break: keep-all; }
.pick-body small { font-size: 11.5px; color: var(--ink-500); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-chev { width: 18px; height: 18px; color: var(--ink-300); }

/* 인증 필수 안내 (시작 버튼 아래) */
.auth-required-note { margin-top: 10px; text-align: center; font-size: 12px; color: var(--ink-500); font-weight: 600; }
.qr-manual-input:focus { border-color: var(--purple-500); box-shadow: var(--focus-ring); }
.qr-manual-ok { flex-shrink: 0; min-width: 84px; height: 54px; padding: 0 20px; border-radius: 14px; background: var(--purple-500); color: #fff; font-size: 15px; font-weight: 800; }
.qr-manual-back { align-self: center; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--purple-600); }

/* 접근성 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}