@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@600;800&family=IBM+Plex+Mono:wght@500;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

:root,
html[data-theme="cream"] {
  /* 1. 기본 테마: 🌤️ 따뜻한 크림 · 에디토리얼 라이트 (Warm Cream & Terracotta) */
  --bg: #F8F6F0;
  --bg2: #EFECE3;
  --card: #FFFFFF;
  --card2: #F4F1E8;
  --ink: #1C2228;
  --ink2: #4B5563;
  --ink3: #78828F;
  --rule: #E2DDD0;

  --accent: #D94E28;
  --accent-soft: #FDECE7;
  --stamp: #0E7C6B;
  --stamp-soft: #E0F5F1;
  --gold: #B45309;
  --bad: #E11D48;
  --bad-soft: #FFE4E6;
  --grit: #6D28D9;

  --map-bg: #EFECE2;
  --hud-bg: rgba(255, 255, 255, 0.94);
  --band-bg: linear-gradient(90deg, #FDF8F4 0%, #F4EFE6 100%);
  --cta-bg: linear-gradient(135deg, #E0532C 0%, #C23B18 100%);
  --cta-fg: #FFFFFF;
  --shadow: 0 8px 24px rgba(28, 34, 40, 0.06);
  --radius: 14px;

  --f-display: 'Hahmlet', 'Noto Serif KR', serif;
  --f-body: 'IBM Plex Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;
  --f-pixel: 'Galmuri11', 'IBM Plex Sans KR', monospace;
}

html[data-theme="toss"] {
  /* 2. 💎 모던 화이트 · 토스 블루 (Pure White & Royal Blue) */
  --bg: #F2F4F6;
  --bg2: #E5E8EB;
  --card: #FFFFFF;
  --card2: #F9FAFB;
  --ink: #191F28;
  --ink2: #4E5968;
  --ink3: #8B95A1;
  --rule: #E5E8EB;

  --accent: #3182F6;
  --accent-soft: #E8F3FF;
  --stamp: #00A889;
  --stamp-soft: #E5F8F4;
  --gold: #D97706;
  --bad: #F04452;
  --bad-soft: #FFEEEE;
  --grit: #6366F1;

  --map-bg: #EAF0F8;
  --hud-bg: rgba(255, 255, 255, 0.95);
  --band-bg: linear-gradient(90deg, #F0F6FF 0%, #E8F3FF 100%);
  --cta-bg: linear-gradient(135deg, #3182F6 0%, #1B64DA 100%);
  --cta-fg: #FFFFFF;
  --shadow: 0 8px 24px rgba(25, 31, 40, 0.06);
}

html[data-theme="mint"] {
  /* 3. 🌿 캠퍼스 민트 · 봄날 파스텔 (Spring Mint & Marigold) */
  --bg: #EFF7F4;
  --bg2: #E0EFEA;
  --card: #FFFFFF;
  --card2: #F3FAF7;
  --ink: #132A23;
  --ink2: #3B5B51;
  --ink3: #69897E;
  --rule: #CBE2D9;

  --accent: #0D9488;
  --accent-soft: #CCFBF1;
  --stamp: #EA580C;
  --stamp-soft: #FFEDD5;
  --gold: #B45309;
  --bad: #E11D48;
  --bad-soft: #FFE4E6;
  --grit: #0284C7;

  --map-bg: #E2F1EC;
  --hud-bg: rgba(255, 255, 255, 0.94);
  --band-bg: linear-gradient(90deg, #E6F7F2 0%, #D7F0E9 100%);
  --cta-bg: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
  --cta-fg: #FFFFFF;
  --shadow: 0 8px 24px rgba(19, 42, 35, 0.06);
}

html[data-theme="peach"] {
  /* 4. 🌸 청춘 다이어리 · 웜 피치 & 코랄 (Warm Blossom & Rose Coral) */
  --bg: #FDF5F2;
  --bg2: #F7E8E2;
  --card: #FFFFFF;
  --card2: #FCF0EC;
  --ink: #291A16;
  --ink2: #5C433C;
  --ink3: #8C6F66;
  --rule: #EBD5CE;

  --accent: #E11D48;
  --accent-soft: #FFE4E6;
  --stamp: #059669;
  --stamp-soft: #D1FAE5;
  --gold: #D97706;
  --bad: #DC2626;
  --bad-soft: #FEE2E2;
  --grit: #9333EA;

  --map-bg: #F8E7E0;
  --hud-bg: rgba(255, 255, 255, 0.94);
  --band-bg: linear-gradient(90deg, #FFF0F3 0%, #FDE6E9 100%);
  --cta-bg: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --cta-fg: #FFFFFF;
  --shadow: 0 8px 24px rgba(41, 26, 22, 0.06);
}

html[data-theme="night"],
html[data-theme="dark"] {
  /* 5. 🌙 야간 스탠드 · 소프트 다크 (너무 어둡지 않은 소프트 네이비 & 스탠드 앰버) */
  --bg: #1A2333;
  --bg2: #141C2B;
  --card: #232F46;
  --card2: #2C3B57;
  --ink: #F3F6FA;
  --ink2: #B8C7DC;
  --ink3: #8396B3;
  --rule: #3A4D6E;

  --accent: #FBBF24;
  --accent-soft: rgba(251, 191, 36, 0.16);
  --stamp: #34D399;
  --stamp-soft: rgba(52, 211, 153, 0.16);
  --gold: #F59E0B;
  --bad: #FB7185;
  --bad-soft: rgba(251, 113, 133, 0.18);
  --grit: #C084FC;

  --map-bg: #151E2E;
  --hud-bg: rgba(26, 35, 51, 0.94);
  --band-bg: linear-gradient(90deg, #2C3B57 0%, #232F46 100%);
  --cta-bg: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --cta-fg: #141C2B;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  padding-top: 54px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button, input, select {
  font: inherit;
  color: inherit;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ==================== 상단 글로벌 내비게이션 & 1클릭 비교·롤백 버튼 ==================== */
#toggleVisualStyleBtn,
#hudToggleStyleBtn {
  display: none !important;
}

.vstyle-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #283028 0%, #3E4A3E 100%);
  color: #FFFDF4;
  border: 2px solid #D94E28;
  padding: 6px 13px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(40, 48, 40, 0.18);
  transition: all 0.15s ease;
}

.vstyle-toggle-btn small {
  font-weight: 500;
  opacity: 0.88;
  font-size: 11px;
}

.vstyle-toggle-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

html[data-vstyle="classic"] .vstyle-toggle-btn {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--hud-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink2);
  height: 54px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.topnav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}

.topnav-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.topnav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* 프리미엄 타이포그래피 로고 타이틀 (버튼 스타일 제거 및 중앙 정렬) */
.brand-header-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.brand-header-title:hover {
  opacity: 0.85;
}

.brand-header-title .brand-icon {
  font-size: 19px;
  line-height: 1;
}

.brand-header-title .brand-name {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.topnav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 4px 6px;
  border-radius: 99px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.ts-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2);
  padding: 0 6px;
}

.ts-btn {
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ts-btn:hover {
  background: var(--card2);
  color: var(--ink);
}

.ts-btn.active {
  background: var(--accent);
  color: var(--cta-fg);
  font-weight: 700;
}

/* 인트로 테마 선택 카드 그리드 */
.theme-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

@media (max-width: 980px) {
  .theme-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.theme-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--rule);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.theme-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.theme-card .tc-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-card strong {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
}

.theme-card small {
  display: block;
  font-size: 11px;
  color: var(--ink2);
}

.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 14px;
  }
  .topnav {
    padding: 10px 14px;
    gap: 8px;
  }
  .topnav-sub {
    display: none;
  }
}

canvas {
  max-width: 100%;
  min-width: 0;
  display: block;
}

/* ==================== 1. 인트로 화면 (대한민국 생존 브리핑 보드) ==================== */
#intro {
  padding-top: 22px;
  padding-bottom: 64px;
}

.intro-banner {
  background: radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.14), transparent 55%),
              linear-gradient(135deg, var(--card) 0%, var(--bg2) 100%);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 28px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.intro-banner > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 960px) {
  .intro-banner {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 16px;
    gap: 20px;
  }
}

.kicker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 10px;
  max-width: 100%;
}

.intro-banner h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.intro-banner h1 em {
  font-style: normal;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(245, 158, 11, 0.4);
  text-underline-offset: 6px;
}

.lede {
  font-size: 15px;
  color: var(--ink2);
  margin-bottom: 20px;
  line-height: 1.72;
  max-width: 100%;
}

/* 모드 선택 카드 (흙수저 생존 모드 vs 5천만 분의 1 전체 추첨) */
.mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}

@media (max-width: 640px) {
  .mode-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mode-card {
  background: var(--card2);
  border: 2px solid var(--rule);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.mode-card:hover {
  border-color: var(--ink3);
}

.mode-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mode-card .mc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 4px;
  color: var(--ink);
}

.mode-card .mc-head span:last-child {
  flex-shrink: 0;
  font-size: 12px;
}

.mode-card.active .mc-head {
  color: var(--accent);
}

.mode-card .mc-desc {
  font-size: 12.5px;
  color: var(--ink2);
  line-height: 1.48;
}

/* 실시간 카운터 바 */
.counter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 14px;
  width: 100%;
}

.counter > div {
  min-width: 0;
}

.counter strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  transition: transform 0.25s ease;
}

@keyframes counterBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); color: #DC2626; }
  100% { transform: scale(1); }
}

.counter-pulse {
  animation: counterBump 0.5s ease-out;
}

.counter span {
  font-size: 11.5px;
  color: var(--ink2);
  display: block;
  line-height: 1.35;
}

.tg-live {
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stamp);
  animation: pulseDot 1.4s infinite;
  flex-shrink: 0;
}

.tg-live-txt {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.3); }
}

.map-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#introMapCanvas {
  width: 100%;
  max-width: 100%;
  height: 290px;
  display: block;
  border-radius: 10px;
  background: var(--map-bg);
}

.odds {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 20px;
}

.odds h2 {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.odds .sub {
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 10px;
}

.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}

.odds-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  background: var(--card2);
  border-radius: 8px;
  border: 1px solid var(--rule);
  font-size: 12px;
  min-width: 0;
}

.odds-item b {
  font-family: var(--f-mono);
  color: var(--accent);
}

/* 시작 설정 박스 */
.opts {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 820px) {
  .opts {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
  }
}

.optgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: 0.03em;
}

.hint {
  font-size: 12px;
  color: var(--ink3);
}

.seg {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
}

.seg button {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: all 0.15s;
}

@media (max-width: 640px) {
  .seg {
    flex-direction: column;
  }
  .seg button {
    width: 100%;
    text-align: center;
  }
}

.seg button[aria-pressed="true"] {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sel, .inp {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 13.5px;
}

.ctarow {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

button.cta {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 0;
  border-radius: 10px;
  padding: 13px 26px;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, filter 0.15s ease;
}

button.cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

button.ghost {
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

button.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

button.ghost.sm {
  padding: 6px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ==================== 2. 출생 추첨 & 신고서 (#roll) ==================== */
#roll {
  padding-top: 48px;
  padding-bottom: 72px;
}

.roller {
  max-width: 680px;
  margin: 40px auto;
  text-align: center;
  padding: 52px 28px;
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.45s ease, border-color 0.35s ease, background 0.45s ease;
}

.roller.rolling-slow {
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(217, 78, 40, 0.14);
}

.roller.landed-glow {
  border-color: var(--accent);
  background: radial-gradient(circle at 50% 35%, rgba(251, 191, 36, 0.22), var(--card) 72%);
  box-shadow: 0 0 0 4px rgba(217, 78, 40, 0.18), 0 18px 48px rgba(217, 78, 40, 0.22);
  transform: scale(1.015);
}

.roller .country {
  font-family: var(--f-display);
  font-size: clamp(26px, 4.5vw, 46px);
  font-weight: 800;
  margin: 14px 0 8px;
  transition: transform 0.18s ease, color 0.25s ease;
}

.roller.landed-glow .country {
  color: var(--accent);
  transform: scale(1.04);
}

.roller .meta {
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
}

.roller-sub-effect {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--stamp);
  letter-spacing: 0.02em;
  animation: gentlePulseIn 0.6s ease forwards;
}

@keyframes gentlePulseIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.cert {
  max-width: 820px;
  margin: 0 auto;
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: certGentleReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes certGentleReveal {
  0% { opacity: 0; transform: translateY(12px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cert .band {
  background: var(--band-bg);
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
  padding: 16px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cert .band b {
  color: var(--accent);
  font-size: 15px;
}

.cert .body {
  padding: 28px;
}

.cert h2 {
  font-family: var(--f-display);
  font-size: 36px;
  margin: 4px 0 12px;
}

.cert .story {
  font-size: 15px;
  color: var(--ink2);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--rule);
}

.cert .fields,
.modal-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .cert .fields,
  .modal-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .cert .body {
    padding: 18px 16px;
  }
  .cert .band {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .cert .foot {
    padding: 14px 16px;
  }
}

.field-item {
  background: var(--card2);
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  min-width: 0;
  max-width: 100%;
}

.field-item span {
  display: block;
  font-size: 11.5px;
  color: var(--ink3);
}

.field-item b {
  font-size: 14px;
  color: var(--ink);
}

.cert .foot {
  padding: 18px 28px;
  background: var(--bg2);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==================== 3. 인게임 생존 대시보드 (#lifeview - 독창적 레이아웃) ==================== */
.topbar {
  position: sticky;
  top: 54px;
  z-index: 40;
  background: var(--hud-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  min-height: 48px;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap; /* 사회인 생존기 옆으로 항상 고정, 줄바꿈에 의한 상하 덜컹거림 원천 차단 */
  min-width: 0;
  max-width: 100%;
  flex: 1 1 360px;
}

.stage-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.agebox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.agebox .age {
  font-family: var(--f-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}

.agebox .age small {
  font-size: 13px;
  color: var(--ink2);
  margin-left: 2px;
}

.yr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.yr .t {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

#uiYearAndPlace {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

#uiNextChoiceTag {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

/* 사계절 4분할 게이지 바 */
.prog {
  height: 8px;
  background: var(--card2);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
}

.prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--stamp), var(--accent), var(--bad));
  transition: width 0.1s linear;
}

.speed {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sps {
  display: inline-flex;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 2px;
}

.sps button {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink2);
}

.sps button.active {
  background: var(--accent);
  color: var(--cta-fg);
}

/* 상단 와이드 시네마틱 스테이지 배너 */
.stage-hero {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.stage-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  border-bottom: 1px solid var(--rule);
}

.stage-top-grid > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 960px) {
  .stage-top-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.scene-viewport {
  position: relative;
  background: var(--map-bg);
  height: 296px;
  min-height: 296px;
  max-height: 296px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.scene {
  position: relative;
  width: 100%;
  height: 212px;
  flex-shrink: 0;
  overflow: hidden;
  background: #202820;
}

.scene .scene-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 씬 상단 좌·우 위치/상태 배지 (모바일·PC 어떤 해상도에서도 절대 잘리지 않는 반응형 오버레이) */
.scene-hud-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.scene-chip-left,
.scene-chip-right {
  background: rgba(24, 30, 24, 0.84);
  color: #FFFDF4;
  border: 1.5px solid rgba(255, 253, 244, 0.65);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 58%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.scene-chip-right {
  max-width: 41%;
  text-align: right;
  color: #FDE68A;
}

@media (max-width: 520px) {
  .scene-chip-left,
  .scene-chip-right {
    font-size: 10.5px;
    padding: 2.5px 6px;
  }
}

.scenecap {
  position: relative;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  padding: 10px 24px 10px 14px;
  font-size: 13px;
  line-height: 1.52;
  font-weight: 600;
  color: var(--ink);
  background: var(--card2);
  border-top: 1px solid var(--rule);
  overflow-y: auto;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.focus-Console {
  padding: 14px 18px;
  background: var(--card2);
  height: 296px;
  min-height: 296px;
  max-height: 296px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .focus-Console {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 12px 14px;
    gap: 10px;
  }
}

.chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 198px;
  max-height: 198px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 960px) {
  .chips {
    height: auto;
    max-height: 260px;
  }
}

.chip {
  text-align: left;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  border-color: var(--accent);
}

.chip.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* 하단 3열 한국형 생존 보드 */
.life-grid {
  padding-top: 16px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 350px;
  gap: 16px;
  align-items: start;
}

.life-grid > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1140px) {
  .life-grid {
    grid-template-columns: 310px minmax(0, 1fr);
  }
  .col3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .life-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.panel h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

/* 한국형 생활기록부 / 사원증 카드 (여권 MRZ 완전 탈피!) */
.kr-dossier {
  background: linear-gradient(155deg, var(--card2) 0%, var(--card) 100%);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  position: relative;
}

.kr-dossier .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.kr-dossier .in {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: center;
}

.kr-dossier .portrait {
  width: 78px;
  height: 96px;
  border-radius: 10px;
  background: var(--bg);
  border: 2px solid var(--rule);
  overflow: hidden;
}

.kr-dossier .nm {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}

.kr-dossier dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12px;
}

.kr-dossier dt {
  color: var(--ink3);
}

.kr-dossier dd {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dossier-footer {
  margin-top: 12px;
  padding: 7px 10px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink2);
}

/* 6대 생존 스탯 바 */
.stat-row {
  margin-bottom: 9px;
}

.stat-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 3px;
}

.stat-bar {
  height: 7px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.25s ease;
}

.money-box {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}

.money-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 3px 0;
}

.money-line strong {
  font-family: var(--f-mono);
  font-size: 14.5px;
}

/* 사계절 생존 일지 (타임라인 피드) */
.feed-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
}

.filter-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.feed {
  list-style: none;
  height: 600px;
  min-height: 600px;
  max-height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.feed-item {
  padding: 11px 14px;
  background: var(--card2);
  border-radius: 10px;
  border-left: 3.5px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.6;
}

.feed-item.good { border-left-color: var(--stamp); }
.feed-item.big {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--card2) 100%);
}
.feed-item.bad { border-left-color: var(--bad); }
.feed-item.loss { border-left-color: #64748B; opacity: 0.9; }
.feed-item.comp { border-left-color: #38BDF8; }
.feed-item.milestone { border-left-color: var(--grit); }

.feed-item .feed-age {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.feed-item .feed-fact {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule);
  font-size: 11.5px;
  color: var(--ink2);
}

/* 우측 7단계 수저 계층 사다리 (1in8b 10x10 그리드 완전 대체!) */
.ladder-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ladder-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink2);
}

.ladder-step.cur-tier {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.ladder-tag {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.comps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.comp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 12.5px;
}

.comp-item.dead {
  opacity: 0.45;
}

/* ==================== 모달 (2년 주기 선택의 기로 & 재테크) ==================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 8, 15, 0.78);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.scrim[hidden] {
  display: none !important;
}

.modal-box {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-header h2,
.modal-box h2 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 8px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}

.modal-header h2 {
  margin: 0;
}

.modal-close-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 13px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  line-height: 1 !important;
}

.modal-box .desc {
  font-size: 14px;
  color: var(--ink2);
  margin-bottom: 18px;
  white-space: pre-line;
}

.dec-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dec-btn {
  text-align: left;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--card2);
  cursor: pointer;
  transition: all 0.14s ease;
}

.dec-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateX(3px);
}

.dec-btn b {
  display: block;
  font-size: 14.5px;
  margin-bottom: 3px;
  color: var(--ink);
}

.dec-btn small {
  font-size: 12.5px;
  color: var(--ink2);
}

/* ==================== 4. 사망 결산 화면 (#dead) ==================== */
#dead {
  padding-top: 36px;
  padding-bottom: 72px;
}

.dead-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

@media (max-width: 640px) {
  .dead-card {
    padding: 20px 16px;
  }
  .modal-box {
    padding: 18px 14px;
  }
  .modal-header h2,
  .modal-box h2 {
    font-size: 16.5px;
  }
  .modal-close-btn {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}
}

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 820px) {
  .notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.notes > div {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
  max-width: 100%;
}

.notes h3 {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 6px;
}

.notes p {
  font-size: 13px;
  color: var(--ink2);
}

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--accent);
  color: var(--cta-fg);
  padding: 12px 24px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  max-width: calc(100vw - 32px);
  width: max-content;
  word-break: keep-all;
  overflow-wrap: break-word;
  pointer-events: none;
  animation: toastFadeInCenter 0.22s ease-out;
}

@keyframes toastFadeInCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

html[data-vstyle="pokemon"] .toast {
  border: 2px solid #283028;
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(40, 48, 40, 0.35);
}

/* ==================== 5. 가족 메인 씬 애니메이션 (#4) ==================== */
/* 포켓몬 초기버전 2프레임 도트 걸음걸이/숨쉬기 바운스 */
.poke-char-bob {
  animation: pokeSpriteBob 0.85s steps(2, end) infinite;
  transform-origin: center bottom;
}

.poke-char-bob.delay-1 {
  animation-delay: 0.28s;
}

.poke-char-bob.delay-2 {
  animation-delay: 0.52s;
}

@keyframes pokeSpriteBob {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2.5px); }
}

/* 클래식 일러스트 모드에서의 부드러운 가족 숨쉬기/흔들림 애니메이션 */
.classic-char-sway {
  animation: classicCharSway 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}

.classic-char-sway.delay-1 {
  animation-delay: 0.6s;
}

.classic-char-sway.delay-2 {
  animation-delay: 1.2s;
}

@keyframes classicCharSway {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(0.8deg); }
}

/* 머리 위 감정 말풍선(♥, ♪, !, ✨) 둥실둥실 애니메이션 */
.poke-emote-float {
  animation: pokeEmoteFloat 1.6s ease-in-out infinite;
}

@keyframes pokeEmoteFloat {
  0%, 100% { transform: translateY(0px); opacity: 0.96; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* 구름 흐름 · 벚꽃잎/눈송이 낙하 · 창문 반짝임 */
.poke-cloud-drift {
  animation: pokeCloudDrift 14s linear infinite alternate;
}

.poke-cloud-drift.slow {
  animation-duration: 22s;
}

@keyframes pokeCloudDrift {
  0% { transform: translateX(-6px); }
  100% { transform: translateX(10px); }
}

.poke-petal-fall {
  animation: pokePetalFall 3.6s linear infinite;
}

.poke-petal-fall.delay-1 {
  animation-delay: 1.2s;
}

.poke-petal-fall.delay-2 {
  animation-delay: 2.3s;
}

@keyframes pokePetalFall {
  0% { transform: translate(0px, -6px); opacity: 0.9; }
  50% { transform: translate(-4px, 6px); opacity: 1; }
  100% { transform: translate(3px, 18px); opacity: 0.2; }
}

.poke-twinkle {
  animation: pokeTwinkle 1.8s steps(2, end) infinite;
}

@keyframes pokeTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ==================== 6. 포켓몬 초기버전(GB/GBA 1~2세대) 게임 분위기 테마 (#3) ==================== */
html[data-vstyle="pokemon"],
html[data-vstyle="pokemon"] body {
  font-family: var(--f-pixel);
  letter-spacing: -0.01em;
}

html[data-vstyle="pokemon"] .intro-banner h1,
html[data-vstyle="pokemon"] .cert h2,
html[data-vstyle="pokemon"] .roller .country,
html[data-vstyle="pokemon"] .kr-dossier .nm,
html[data-vstyle="pokemon"] .modal-box h2,
html[data-vstyle="pokemon"] .modal-header h2,
html[data-vstyle="pokemon"] #deadTitle {
  font-family: var(--f-pixel);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 포켓몬스터 골드/실버·레드/그린 특유의 이중 도트 대화창 프레임 */
html[data-vstyle="pokemon"] .panel,
html[data-vstyle="pokemon"] .stage-hero,
html[data-vstyle="pokemon"] .opts,
html[data-vstyle="pokemon"] .intro-banner,
html[data-vstyle="pokemon"] .roller,
html[data-vstyle="pokemon"] .cert,
html[data-vstyle="pokemon"] .dead-card {
  border: 3px solid #283028;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #FFFDF4, 0 5px 0 rgba(40, 48, 40, 0.16);
}

html[data-vstyle="pokemon"] .modal-box {
  border: 4px solid #283028;
  border-radius: 8px;
  background: #FFFDF6;
  box-shadow: inset 0 0 0 3px #D94E28, 0 12px 0 rgba(24, 32, 24, 0.45);
}

/* 상단 씬 하단 캡션을 포켓몬 RPG 대사창 스타일로 연출 + 깜빡이는 ▼ 커서 */
html[data-vstyle="pokemon"] .scenecap {
  background: #FFFDF6;
  border-top: 3px solid #283028;
  box-shadow: inset 0 0 0 2px #E8E2CE;
  font-family: var(--f-pixel);
  font-size: 12.8px;
  line-height: 1.55;
  color: #182018;
}

html[data-vstyle="pokemon"] .scenecap::after {
  content: "▼";
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 11px;
  color: var(--accent);
  animation: pokeCursorBlink 0.8s steps(2, end) infinite;
}

@keyframes pokeCursorBlink {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.15; transform: translateY(2px); }
}

/* 포켓몬 배틀/메뉴 커서(▶) 스타일 선택지 버튼 */
html[data-vstyle="pokemon"] .dec-btn {
  border: 2px solid #283028;
  border-radius: 6px;
  background: #F8F5E8;
  box-shadow: 0 3px 0 rgba(40, 48, 40, 0.14);
  position: relative;
  padding-left: 28px;
}

html[data-vstyle="pokemon"] .dec-btn::before {
  content: "▶";
  position: absolute;
  left: 10px;
  top: 14px;
  font-size: 12px;
  color: #283028;
  opacity: 0.45;
  transition: transform 0.12s ease, opacity 0.12s ease, color 0.12s ease;
}

html[data-vstyle="pokemon"] .dec-btn:hover::before,
html[data-vstyle="pokemon"] .dec-btn:focus::before {
  opacity: 1;
  color: var(--accent);
  transform: translateX(2px);
}

html[data-vstyle="pokemon"] .chip {
  border: 2px solid #384038;
  border-radius: 6px;
}

html[data-vstyle="pokemon"] .chip.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

html[data-vstyle="pokemon"] .chip.active::before {
  content: "▶ ";
  color: var(--accent);
  font-weight: 800;
}

/* 포켓몬 HP / EXP 게이지 바 감성의 생존 스탯 바 */
html[data-vstyle="pokemon"] .stat-bar {
  height: 10px;
  background: #283028;
  border: 2px solid #283028;
  border-radius: 3px;
  padding: 1px;
}

html[data-vstyle="pokemon"] .stat-fill {
  border-radius: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0px,
    rgba(255, 255, 255, 0.18) 6px,
    transparent 6px,
    transparent 8px
  );
}

html[data-vstyle="pokemon"] .kr-dossier .portrait {
  border: 2.5px solid #283028;
  border-radius: 6px;
  background: #D8E8C8;
}

html[data-vstyle="pokemon"] .scene-chip-left,
html[data-vstyle="pokemon"] .scene-chip-right {
  background: #FFFDF4;
  color: #182018;
  border: 2px solid #283028;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(24, 32, 24, 0.35);
}

html[data-vstyle="pokemon"] .scene-chip-right {
  color: #C23B18;
}

/* ==================== 7. 이벤트 발생 시 캡션 문장창(#uiSceneCap)에만 은은한 효과 ==================== */
.scenecap.cap-glow {
  animation: scenecapAmbientGlow 2.0s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes scenecapAmbientGlow {
  0% {
    background-color: var(--accent-soft);
    border-top-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px rgba(217, 78, 40, 0.28);
  }
  35% {
    background-color: rgba(253, 236, 231, 0.85);
    box-shadow: inset 0 0 0 1.5px rgba(217, 78, 40, 0.5), 0 0 10px rgba(217, 78, 40, 0.16);
  }
  100% {
    background-color: var(--card2);
    border-top-color: var(--rule);
    box-shadow: none;
  }
}

html[data-vstyle="pokemon"] .scenecap.cap-glow {
  animation: pokeScenecapGlow 2.0s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pokeScenecapGlow {
  0% {
    background-color: #FFF2DF;
    border-top-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent), 0 0 14px rgba(217, 78, 40, 0.32);
  }
  35% {
    background-color: #FFF7EC;
    box-shadow: inset 0 0 0 1.5px rgba(217, 78, 40, 0.6);
  }
  100% {
    background-color: #FFFDF6;
    border-top-color: #283028;
    box-shadow: inset 0 0 0 2px #E8E2CE;
  }
}

.feed-item.just-added {
  animation: feedItemGlow 2.0s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes feedItemGlow {
  0% {
    transform: translateX(4px);
    background: var(--accent-soft);
  }
  100% {
    transform: translateX(0);
    background: var(--card2);
  }
}

/* ==================== 8. AI 자동선택 팝업 (3초 안내 & 카운트다운 & 시각적 초강조) ==================== */
.auto-decide-banner {
  background: linear-gradient(135deg, rgba(217, 78, 40, 0.15) 0%, rgba(245, 158, 11, 0.22) 100%);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(217, 78, 40, 0.16);
}

.auto-decide-banner .adb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--accent);
  margin-bottom: 8px;
}

.auto-decide-banner .adb-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

.auto-decide-banner .adb-badge {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 800;
  background: var(--accent);
  color: #fff;
  padding: 3px 9px;
  border-radius: 99px;
  box-shadow: 0 2px 6px rgba(217, 78, 40, 0.35);
}

.auto-decide-banner .adb-selected-box {
  background: var(--card);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.auto-decide-banner .adb-opt-name {
  font-size: 14.5px;
  color: var(--accent);
  line-height: 1.4;
  margin-bottom: 4px;
}

.auto-decide-banner .adb-reason {
  font-size: 12px;
  font-weight: 600;
  color: var(--stamp);
  line-height: 1.4;
}

.auto-bar-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}

.auto-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--stamp), var(--gold), var(--accent));
  animation: autoDecideFill3s 3.0s linear forwards;
}

@keyframes autoDecideFill3s {
  0% { width: 0%; }
  100% { width: 100%; }
}

.auto-decide-banner .adb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink2);
}

/* 선택된 버튼 초강조 스타일 */
.dec-btn.auto-picked-highlight {
  border: 2.5px solid var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 0 3px rgba(217, 78, 40, 0.28), 0 6px 18px rgba(217, 78, 40, 0.2) !important;
  transform: scale(1.015);
  animation: autoPickedPulse 1.5s ease-in-out infinite alternate;
}

@keyframes autoPickedPulse {
  0% {
    box-shadow: 0 0 0 2px rgba(217, 78, 40, 0.25), 0 4px 12px rgba(217, 78, 40, 0.15);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(217, 78, 40, 0.45), 0 8px 24px rgba(217, 78, 40, 0.28);
  }
}

.dec-btn.auto-dimmed {
  opacity: 0.52;
  transition: opacity 0.15s ease;
}

.dec-btn.auto-dimmed:hover {
  opacity: 0.95;
}

.auto-pick-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  letter-spacing: -0.01em;
}

html[data-vstyle="pokemon"] .dec-btn.auto-picked-highlight {
  border: 3px solid #D94E28 !important;
  box-shadow: inset 0 0 0 2px #FFFDF4, 0 5px 0 rgba(217, 78, 40, 0.35) !important;
}

/* ==================== 7. 성인 가족 & 직업 역동적 애니메이션 ==================== */
/* 랩탑 모니터 깜빡임 & 코드 줄 애니메이션 */
.poke-laptop-glow {
  animation: pokeLaptopGlow 2.2s ease-in-out infinite alternate;
}
@keyframes pokeLaptopGlow {
  0% { opacity: 0.82; filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.3)); }
  100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.75)); }
}

/* 따뜻한 커피 & 요리 연기 증기 애니메이션 */
.poke-steam-rise {
  animation: pokeSteamRise 2.4s ease-out infinite;
  transform-origin: center bottom;
}
@keyframes pokeSteamRise {
  0% { transform: translateY(0px) scale(0.9); opacity: 0.75; }
  50% { transform: translateY(-4px) scale(1.15); opacity: 0.9; }
  100% { transform: translateY(-9px) scale(1.3); opacity: 0; }
}

/* 1인 가구 반려동물(강아지/고양이) 꼬리 흔들기 바운스 */
.poke-pet-wag {
  animation: pokePetWag 0.9s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@keyframes pokePetWag {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* 아기 요람 / 유모차 부드러운 흔들림 */
.poke-baby-bob {
  animation: pokeBabyBob 1.6s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@keyframes pokeBabyBob {
  0% { transform: translateY(0px) rotate(-1.5deg); }
  100% { transform: translateY(-2px) rotate(1.5deg); }
}

/* ==================== 8. 사이버 하늘 추모관 (사망 DB & 다른 사람 결과 조회) ==================== */
.memorial-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 16px 60px;
}

.memorial-hero {
  background: linear-gradient(135deg, #182028 0%, #1e293b 60%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 30px 24px;
  color: #F8FAFC;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.memorial-hero::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.memorial-hero h2 {
  font-family: var(--f-display);
  font-size: 27px;
  color: #FFFDF0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.memorial-hero p {
  color: #CBD5E1;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
  max-width: 720px;
}

/* 검색창 & 필터 바 */
.memorial-controls {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.memorial-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.memorial-search-input {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s;
}

.memorial-search-input:focus {
  border-color: var(--accent);
}

.memorial-sort-select {
  flex-shrink: 0;
  min-width: 105px;
  max-width: 125px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

/* 추천 검색어 태그 바 */
.memorial-quick-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.quick-tag-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink3);
  white-space: nowrap;
  flex-shrink: 0;
}

.quick-tag-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px dashed var(--rule);
  background: var(--card);
  color: var(--ink2);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.quick-tag-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(217, 78, 40, 0.06);
}

.memorial-search-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink3);
  padding: 4px 2px;
}

.db-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--card2);
  border: 1px solid var(--rule);
}

.db-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #EAB308;
}

.db-sync-badge.online .db-dot {
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.db-sync-badge.local .db-dot {
  background: #F59E0B;
}

.memorial-highlight {
  background: rgba(234, 179, 8, 0.28);
  color: inherit;
  font-weight: 800;
  padding: 0 2px;
  border-radius: 3px;
}

.memorial-filter-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.memorial-chip {
  padding: 6px 13px;
  border-radius: 99px;
  border: 1px solid var(--rule);
  background: var(--card2);
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.memorial-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.memorial-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(217, 78, 40, 0.25);
}

/* 추모 카드 그리드 */
.memorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.memorial-card {
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
}

.memorial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

.memorial-card.is-my-life {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--card) 0%, var(--accent-soft) 100%);
}

.memorial-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.memorial-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.memorial-card-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}

.memorial-card-age {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink2);
}

.memorial-my-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
}

.memorial-spoon-shift {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--card2);
  color: var(--ink);
  margin-bottom: 10px;
}

.memorial-relic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  margin-bottom: 12px;
}

.memorial-relic-icon {
  font-size: 20px;
}

.memorial-relic-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #B45309;
}

.memorial-epitaph-box {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memorial-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink3);
}

.memorial-card-flower-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #D97706;
  font-weight: 800;
}

.memorial-enter-btn {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
}

/* ==================== 9. 상세 추모관 모달 (영정, 유품, 헌화, 방명록) ==================== */
.shrine-container {
  max-width: 680px;
  margin: 0 auto;
}

.shrine-header {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--rule);
  margin-bottom: 18px;
}

.shrine-portrait-frame {
  position: relative;
  display: inline-block;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 10px 26px rgba(217, 119, 6, 0.35);
  margin-bottom: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.shrine-portrait-inner {
  border-radius: 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 150px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 1. 황금 바로크 명예 액자 */
.frame-gold-baroque {
  background: linear-gradient(135deg, #FFE27A 0%, #E5A93C 30%, #8C5C0F 70%, #FAD77A 100%) !important;
  box-shadow: 0 12px 30px rgba(212, 160, 23, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
  border: 3.5px ridge #FFE894 !important;
}

/* 2. 호두나무 원목 액자 */
.frame-walnut-wood {
  background: linear-gradient(135deg, #4A2810 0%, #784421 40%, #381A08 100%) !important;
  box-shadow: 0 12px 28px rgba(40, 20, 10, 0.55), inset 0 0 0 2px #A77342 !important;
  border: 3.5px solid #2A1406 !important;
}

/* 3. 16비트 레트로 도트 액자 */
.frame-neo-pixel {
  background: repeating-linear-gradient(45deg, #1E2818, #1E2818 4px, #304820 4px, #304820 8px) !important;
  box-shadow: 0 10px 24px rgba(20, 35, 15, 0.55) !important;
  border: 4px dashed #588838 !important;
  image-rendering: pixelated;
}

/* 4. 청자 비취 옥빛 액자 */
.frame-korean-celadon {
  background: linear-gradient(135deg, #B2DDD4 0%, #529B8B 50%, #2A6658 100%) !important;
  box-shadow: 0 12px 28px rgba(42, 102, 88, 0.45), inset 0 0 10px rgba(255, 255, 255, 0.6) !important;
  border: 3.5px double #C2EAE2 !important;
}

/* 5. 흑요석 티타늄 모던 액자 */
.frame-obsidian-metal {
  background: linear-gradient(145deg, #181B1E 0%, #2B3036 50%, #101214 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), inset 0 0 0 1.5px #E0B440 !important;
  border: 2.5px solid #555E68 !important;
}

/* 6. 영예의 헌정 리본 액자 */
.frame-memorial-ribbon {
  background: linear-gradient(135deg, #15181C 0%, #2C3038 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #D0D4DC !important;
  border: 3.5px solid #0B0D0F !important;
}
.frame-memorial-ribbon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-top: 3.5px solid #111;
  border-left: 3.5px solid #111;
  pointer-events: none;
}
.frame-memorial-ribbon::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-top: 3.5px solid #111;
  border-right: 3.5px solid #111;
  pointer-events: none;
}

/* 7. 사이버 시티 네온 액자 */
.frame-cyber-neon {
  background: linear-gradient(135deg, #090D18 0%, #151B30 100%) !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.65), 0 0 30px rgba(255, 0, 128, 0.35) !important;
  border: 2.5px solid #00F0FF !important;
}

/* 8. 오로라 자개 진주 액자 */
.frame-pearl-marble {
  background: linear-gradient(135deg, #FFF0F5 0%, #E0F2FE 35%, #F3E8FF 70%, #FEF9C3 100%) !important;
  box-shadow: 0 12px 28px rgba(160, 175, 200, 0.45), inset 0 0 10px #FFFFFF !important;
  border: 3.5px solid #D8DEE9 !important;
}

/* 모달 액자 스타일 배지 & 액자 바꾸기 컨트롤 */
.shrine-frame-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.shrine-frame-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--card2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
}

.shrine-cycle-frame-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.shrine-cycle-frame-btn:hover {
  background: var(--card2);
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ==================== 5. 추모관 DB 관리 & 삭제 UI ==================== */
.memorial-admin-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.admin-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.memorial-card-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}
.memorial-card-delete-btn:hover {
  background: #DC2626;
  color: #fff;
  border-color: #DC2626;
  transform: scale(1.05);
}
.memorial-card-avatar-wrap {
  flex-shrink: 0;
  margin-right: 12px;
}

.memorial-card-avatar {
  position: relative;
  width: 48px;
  height: 60px;
  border-radius: 8px;
  padding: 2.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: transform 0.2s ease;
}
.memorial-card:hover .memorial-card-avatar {
  transform: scale(1.05);
}

.memorial-card-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.memorial-card-frame-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  margin-top: 4px;
}

.shrine-epitaph {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.6;
  margin: 10px 0 6px;
}

.shrine-relic-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.05) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.shrine-relic-badge {
  font-size: 36px;
}

.shrine-milestones {
  background: var(--card2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.shrine-milestone-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 5px 0;
  color: var(--ink);
}

.shrine-milestone-year {
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
}

/* 헌화 버튼 & 애니메이션 */
.shrine-flower-action {
  text-align: center;
  margin: 22px 0;
}

.flower-tribute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 11px 20px;
  border-radius: 99px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  line-height: 1.35;
  text-align: center;
}

.flower-tribute-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.5);
}

.flower-tribute-btn:active {
  transform: scale(0.98);
}

.flower-tribute-btn.already-tributed {
  background: var(--card2) !important;
  color: var(--ink3) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}

.flower-tribute-btn.already-tributed .flower-btn-count {
  background: var(--card) !important;
  color: var(--ink2) !important;
}

.flower-btn-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.flower-btn-title {
  white-space: nowrap;
}

.flower-btn-count {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.12);
  padding: 2px 8px;
  border-radius: 99px;
}

/* 추모 방명록 */
.shrine-guestbook {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
}

.shrine-guestbook-input-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.shrine-guestbook-author-inp {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.shrine-guestbook-author-inp:focus {
  border-color: var(--accent);
}

.shrine-guestbook-msg-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.shrine-guestbook-text-inp {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.shrine-guestbook-text-inp:focus {
  border-color: var(--accent);
}

.shrine-guestbook-submit-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 16px;
  font-weight: 800;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shrine-guestbook-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.shrine-guestbook-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-size: 13px;
}

.shrine-guestbook-author {
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
}

.shrine-guestbook-date {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink3);
}

@media (max-width: 640px) {
  .memorial-wrap {
    padding: 16px 10px 70px;
  }
  .memorial-controls {
    padding: 12px;
  }
  .memorial-search-row {
    gap: 6px;
    margin-bottom: 10px;
  }
  .memorial-search-input {
    font-size: 13px;
    padding: 8px 10px;
  }
  .memorial-sort-select {
    min-width: 96px;
    max-width: 112px;
    padding: 8px 6px;
    font-size: 12px;
  }
  .memorial-chip {
    padding: 5px 11px;
    font-size: 12px;
  }
  .flower-tribute-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    box-sizing: border-box;
  }
  .shrine-milestone-year {
    min-width: 86px;
    font-size: 12.5px;
  }
  .shrine-milestone-item {
    font-size: 13px;
  }
}

/* ==============================================================================
 * (주) 넥스트 밸류 랩스 · 단순·몰입형 미니멀 UI ("minimal") 테마 시스템
 * - Plan A: 사이버 하늘 추모관 가독성 혁신 (노이즈 제거, 3단 핵심 정보, 소프트 섀도우)
 * - Plan B: 인게임 대시보드 미니멀화 (스토리 중심 가독성, 부드러운 패널 분리)
 * - 언제든 [상세 UI] 버튼 1클릭으로 기존 버전과 100% 동일하게 롤백/비교 지원
 * ============================================================================== */

/* 1. 상단 토글 버튼 스타일링 */
#toggleUiModeBtn {
  background: linear-gradient(135deg, #4A3E3D 0%, #2A2322 100%);
  color: #FFFDF8;
  border: 1.5px solid #F59E0B;
}

html[data-ui-mode="minimal"] #toggleUiModeBtn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  border-color: #34D399;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
}

/* 2. Plan A: 하늘 추모관 미니멀 뷰 */
html[data-ui-mode="minimal"] .memorial-hero {
  padding: 32px 18px 24px;
}

html[data-ui-mode="minimal"] .memorial-hero h2 {
  font-size: 26px;
  letter-spacing: -0.5px;
}

html[data-ui-mode="minimal"] .memorial-hero p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  opacity: 0.85;
}

html[data-ui-mode="minimal"] .memorial-search-row {
  max-width: 780px;
  margin: 0 auto 12px;
  gap: 8px;
}

html[data-ui-mode="minimal"] .memorial-quick-tags {
  display: none;
  max-width: 780px;
  margin: 0 auto 12px;
  animation: fadeInDown 0.2s ease-out;
}

html[data-ui-mode="minimal"] .memorial-quick-tags.is-expanded {
  display: flex;
}

html[data-ui-mode="minimal"] .memorial-filter-chips {
  max-width: 780px;
  margin: 0 auto 16px;
  gap: 6px;
}

html[data-ui-mode="minimal"] .memorial-chip {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--card);
}

html[data-ui-mode="minimal"] .memorial-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-ui-mode="minimal"] .memorial-card {
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 20px;
  background: var(--card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html[data-ui-mode="minimal"] .memorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

html[data-ui-mode="minimal"] .memorial-card-name {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

html[data-ui-mode="minimal"] .memorial-card-age {
  font-size: 13px;
  opacity: 0.85;
}

html[data-ui-mode="minimal"] .memorial-spoon-shift {
  background: var(--card2);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12.5px;
  margin-bottom: 8px;
}

html[data-ui-mode="minimal"] .memorial-relic-row {
  display: none; /* 미니멀 모드에서는 복잡한 2줄 유품 박스 숨김 -> 클릭 시 모달에서 우아하게 감상 */
}

html[data-ui-mode="minimal"] .memorial-epitaph-box {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--card2);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 14px;
  font-style: normal;
}

html[data-ui-mode="minimal"] .memorial-card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px;
}

/* 3. Plan B: 인게임 대시보드 미니멀 뷰 */
html[data-ui-mode="minimal"] .life-grid .panel {
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--card);
}

html[data-ui-mode="minimal"] .life-grid .panel h3 {
  font-size: 14.5px;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-ui-mode="minimal"] .feed li {
  font-size: 15px;
  line-height: 1.65;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-ui-mode="minimal"] .feed-tone-big,
html[data-ui-mode="minimal"] .feed-tone-milestone {
  font-size: 16px;
  font-weight: 800;
  border-left-width: 4px;
}

html[data-ui-mode="minimal"] .scenecap {
  font-size: 15.5px;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 12px;
  line-height: 1.55;
  letter-spacing: -0.2px;
}

html[data-ui-mode="minimal"] .st-bar-wrap {
  border-radius: 99px;
  height: 9px;
  background: var(--card2);
}

html[data-ui-mode="minimal"] .topbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

/* 태그 토글 버튼 스타일 */
.memorial-tag-toggle-btn {
  white-space: nowrap;
  font-size: 12.5px;
  padding: 6px 12px;
}

/* ==========================================================================
   v3.0 카드 온보딩 위저드 & 상단 버전 비교 배너
   ========================================================================== */

/* 1. 상단 버전 선택 배너 */
.version-select-banner {
  background: #181E24;
  color: #FFFFFF;
  padding: 7px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 100;
}

.ver-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ver-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ver-badge {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: -0.2px;
}

.ver-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
}

.ver-tabs {
  display: flex;
  gap: 8px;
}

.ver-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ver-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.ver-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(217, 78, 40, 0.4);
}

/* 2. v3.0 카드 온보딩 위저드 컨테이너 */
.wizard-container {
  min-height: calc(88vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 12px 36px;
  box-sizing: border-box;
}

/* 상단 스텝 프로그레스 인디케이터 */
.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 780px;
  margin: 0 auto 20px;
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 99px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.wizard-back-btn {
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 99px;
  transition: all 0.2s ease;
}

.wizard-back-btn:hover {
  background: var(--bg2);
  color: var(--ink);
}

.wizard-dots {
  display: flex;
  gap: 10px;
}

.w-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg2);
  color: var(--ink3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.w-dot.active {
  background: var(--accent);
  color: #FFFFFF;
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(217, 78, 40, 0.4);
}

.w-dot.done {
  background: var(--stamp);
  color: #FFFFFF;
}

.wizard-step-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink3);
  font-family: var(--f-mono);
}

/* 공통 위저드 카드 프레임 */
.wizard-card {
  display: none;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.wizard-card.active {
  display: block;
  animation: wzCardFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wzCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Step 1: 메인 인트로 카드 */
.wz-hero-header {
  text-align: center;
  margin-bottom: 22px;
}

.wz-brand-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 16px;
  border-radius: 99px;
  margin-bottom: 12px;
}

.wz-title {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.4px;
}

.wz-title .accent-text {
  color: var(--accent);
  font-weight: 800;
}

.wz-subtitle {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.5;
}

.wz-visual-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 20px;
}

.wz-canvas-wrap {
  width: 100%;
  max-width: 320px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--map-bg);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 auto;
}

#wizardMapCanvas {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
}

.wz-counter-strip {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.wz-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  background: var(--card);
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.wz-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wz-stat-dot.green {
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.wz-stat-dot.red {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

.wz-action-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.wz-start-btn {
  font-size: 17.5px;
  padding: 16px 36px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
  box-shadow: 0 6px 20px rgba(217, 78, 40, 0.32);
  transition: all 0.2s ease;
  width: 100%;
  max-width: 420px;
  text-align: center;
  cursor: pointer;
}

.wz-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(217, 78, 40, 0.42);
}

.wz-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13.5px;
}

.wz-link-btn {
  background: none;
  border: none;
  color: var(--ink2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.wz-link-btn:hover {
  color: var(--accent);
  text-decoration: underline;
}

.wz-link-sep {
  color: var(--rule);
}

/* Steps 2~4: 카드 헤더 및 선택지 그리드 */
.wz-card-header {
  text-align: center;
  margin-bottom: 26px;
}

.wz-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 10px;
}

.wz-card-header h2 {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.wz-card-header p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.5;
}

.wz-choice-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.wz-2cols {
  grid-template-columns: repeat(2, 1fr);
}

.wz-3cols {
  grid-template-columns: repeat(3, 1fr);
}

.wz-choice-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--card2);
  border: 2px solid var(--rule);
  border-radius: 16px;
  padding: 22px 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-sizing: border-box;
}

.wz-choice-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.wz-choice-card.active {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(217, 78, 40, 0.16);
}

.wz-choice-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.wz-choice-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--bg2);
  color: var(--ink2);
}

.wz-choice-tag.hot {
  background: var(--accent-soft);
  color: var(--accent);
}

.wz-choice-prob {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  font-family: var(--f-mono);
}

.wz-choice-icon {
  font-size: 32px;
  margin-bottom: 10px;
  line-height: 1;
}

.wz-choice-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.35;
}

.wz-choice-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink2);
  margin-bottom: 16px;
  flex-grow: 1;
}

.wz-choice-desc b {
  color: var(--ink);
}

.wz-choice-action {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-top: auto;
  display: flex;
  align-items: center;
}

.wz-final-start-btn {
  font-size: 17px;
  font-weight: 800;
  padding: 16px 36px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(217, 78, 40, 0.32);
  cursor: pointer;
}

/* 모바일 반응형 최적화 */
@media (max-width: 768px) {
  .ver-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ver-tabs {
    width: 100%;
  }

  .ver-pill {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 6px 8px;
  }

  .version-select-banner {
    display: none !important;
  }

  .desktop-only {
    display: none !important;
  }

  html, body {
    padding-top: 48px;
  }

  .topnav {
    height: 48px;
    padding: 0;
  }

  .topnav-inner {
    padding: 0 14px;
    gap: 8px;
  }

  .topbar {
    top: 48px;
  }

  .wizard-container {
    padding: 10px 4px 20px;
  }

  .wizard-card {
    padding: 20px 14px;
    border-radius: 16px;
  }

  .wz-title {
    font-size: 20px;
    line-height: 1.3;
  }

  .wz-choice-grid.wz-2cols,
  .wz-choice-grid.wz-3cols {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .wz-choice-card {
    padding: 16px 14px;
  }

  .wz-canvas-wrap {
    max-width: 280px;
    height: 230px;
  }

  .wz-start-btn {
    font-size: 16px;
    padding: 14px 24px;
  }
}

/* ==========================================================================
   햄버거 버튼 및 슬라이드 아웃 드로어 메뉴
   ========================================================================== */
.hamburger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.hamburger-btn:hover {
  background: var(--bg2);
  border-color: var(--accent);
  color: var(--accent);
}

.hamburger-icon {
  font-size: 15px;
  line-height: 1;
}

.hamburger-label {
  font-size: 12.5px;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.drawer-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.app-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  background: var(--card);
  z-index: 9999;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.app-drawer.open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--card2);
}

.drawer-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.drawer-head h3 {
  font-size: 15.5px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.drawer-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink2);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s;
}

.drawer-close-btn:hover {
  background: var(--bg2);
  color: var(--bad);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-sec-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink3);
  letter-spacing: 0.2px;
}

.drawer-ver-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.drawer-ver-btn {
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.drawer-ver-btn:hover {
  border-color: var(--accent);
}

.drawer-ver-btn.active {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(217, 78, 40, 0.3);
}

.drawer-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
  box-sizing: border-box;
}

.drawer-menu-item:hover {
  border-color: var(--accent);
  background: var(--card);
  transform: translateX(-2px);
}

.drawer-menu-item .d-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.drawer-menu-item .d-info b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 700;
}

.drawer-menu-item .d-info small {
  display: block;
  font-size: 11px;
  color: var(--ink3);
  margin-top: 2px;
  line-height: 1.35;
}

.drawer-menu-item.drawer-item-highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.drawer-menu-item.drawer-item-highlight .d-info b {
  color: var(--accent);
}

.drawer-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-setting-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s;
  width: 100%;
  box-sizing: border-box;
}

.drawer-setting-btn:hover {
  background: var(--card);
  border-color: var(--rule);
}

.drawer-setting-btn .d-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg2);
  color: var(--ink3);
  font-family: var(--f-mono);
  font-weight: 600;
}

.drawer-setting-btn .d-status.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.drawer-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  background: var(--card2);
  font-size: 11px;
  color: var(--ink3);
  text-align: center;
  line-height: 1.5;
}

.drawer-foot p {
  margin: 0 0 2px;
}

/* ==========================================================================
   사망 결산 화면(#dead) 액션 버튼 일관성 및 테마 통일
   ========================================================================== */
.dead-actions-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  margin: 28px auto 0;
  box-sizing: border-box;
}

.dead-btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  text-decoration: none;
  letter-spacing: -0.3px;
  padding: 0 18px;
}

/* 1. Primary CTA: 새로운 삶 다시 도전 (테라코타 브랜드 메인 컬러) */
.dead-btn-primary {
  background: var(--cta-bg);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 16px rgba(217, 78, 40, 0.3);
}

.dead-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 78, 40, 0.42);
}

/* 2. 하늘 추모관 안치 (차분한 웜 잉크 / 다크 차콜 컬러) */
.dead-btn-memorial {
  background: #242B33;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 3px 12px rgba(28, 34, 40, 0.12);
}

.dead-btn-memorial:hover {
  background: #181E24;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(28, 34, 40, 0.2);
}

/* 3. 성적표 이미지 저장 (크림 카드 + 테라코타 테두리 호버) */
.dead-btn-secondary {
  background: var(--card);
  border: 1.5px solid var(--rule);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dead-btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--card2);
  transform: translateY(-2px);
}

/* 4. 메인으로 복귀 (차분한 소프트 카드) */
.dead-btn-ghost {
  background: var(--card2);
  border: 1px solid var(--rule);
  color: var(--ink2);
}

.dead-btn-ghost:hover {
  background: var(--bg2);
  color: var(--ink);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .dead-actions-wrap {
    max-width: 100%;
    padding: 0 4px;
    gap: 10px;
  }
  .dead-btn {
    height: 48px;
    font-size: 14.5px;
  }
  .memorial-wrap {
    padding: 8px 12px 60px;
  }
}

/* ==========================================================================
   오마주 습작 프로젝트 & 제작 의도 모달 팝업 스타일
   ========================================================================== */
.homage-modal-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  max-width: 460px;
  width: 90%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 18px 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  text-align: center;
  position: relative;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  margin: auto;
}

.homage-modal-header {
  margin-bottom: 12px;
}

.homage-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.homage-title {
  font-family: var(--f-display);
  font-size: 17.5px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 0;
  word-break: keep-all;
}

.homage-modal-body {
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink2);
  text-align: left;
  margin-bottom: 14px;
  background: var(--card2);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  word-break: keep-all;
}

.homage-modal-body p {
  margin-bottom: 8px;
}

.homage-modal-body p:last-child {
  margin-bottom: 0;
}

.homage-closing {
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
  border-top: 1px dashed var(--rule);
  padding-top: 8px;
  margin-top: 8px;
}

.homage-modal-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.homage-confirm-btn {
  width: 100%;
  height: 44px;
  font-size: 14.5px;
  font-weight: 800;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  letter-spacing: -0.2px;
}

.homage-today-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink3);
  cursor: pointer;
  user-select: none;
}

@media (max-width: 768px) {
  .homage-modal-box {
    padding: 18px 16px 14px;
    width: 92%;
  }
  .homage-title {
    font-size: 16px;
  }
}