/* ── i 정보 툴팁 시스템 ── */
/* 헤더별 button 스타일이 .info-btn을 덮어쓰지 않도록 !important 사용 */
/* pointer-events: auto — 부모 span(헤더 제목 가운데정렬용 pointer-events:none) 무력화해서 클릭 가능 */
.info-btn {
  --info-color: #e53e3e;
  --info-read: rgba(255,255,255,0.7);
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  border-radius: 50% !important;
  border: 1.2px solid currentColor !important;
  background: transparent !important;
  color: var(--info-color) !important;
  font-family: var(--font-pixel, sans-serif) !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  vertical-align: middle !important;
  pointer-events: auto !important;
  animation: info-blink 3s ease-in-out infinite;
}
.info-btn:hover { transform: scale(1.1); }
.info-btn.info-btn-read {
  color: var(--info-read) !important;
  animation: none;
}
.info-on-light .info-btn {
  --info-read: rgba(0,0,0,0.7);
}
/* 미니게임 헤더는 밝은 톤 — i 버튼 검은색 */
#minigame-info-btn-slot .info-btn { color: #1a1a1a !important; }
#minigame-info-btn-slot .info-btn.info-btn-read { color: rgba(0,0,0,0.55) !important; }
@keyframes info-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* 정보 모달 */
.info-modal-overlay { z-index: 1300; }
.info-modal-card {
  background: #1c1814;
  border: 1px solid #5c5040;
  border-radius: 12px;
  padding: 16px 18px 18px;
  max-width: 320px;
  width: 85%;
  max-height: 80vh;        /* 뷰포트 80% 한계 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #e0d4c0;
  overflow: hidden;        /* 내부에서만 스크롤 */
}
.info-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3a3228;
  padding-bottom: 8px;
  flex-shrink: 0;          /* 본문 스크롤 시에도 헤더 고정 */
}
.info-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0c060;
}
.info-modal-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.info-modal-close:hover { color: #fff; }
/* 툴팁 본문 0.78rem 통일 — 가독성 우선 (v20.1 0.7 → 0.78 상향) */
.info-modal-body,
.info-modal-body p,
.info-modal-body span,
.info-modal-body strong,
.info-modal-body b,
.info-modal-body div {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 1.6 !important;
}
.info-modal-body strong { font-weight: 700 !important; }
/* 강조 박스 — 노란 좌측 라인 + 옅은 황금 배경 (가독성 위해 색 명시 !important) */
.info-modal-body .info-callout {
  background: rgba(240, 192, 80, 0.10) !important;
  border-left: 2px solid #f0c060;
  padding: 9px 11px !important;
  border-radius: 0 6px 6px 0;
  margin: 6px 0 10px !important;
  color: #f0e0c0 !important;
}
.info-modal-body .info-callout strong { color: #ffd870 !important; }
/* 작은 회색 팁 줄 */
.info-modal-body .info-tip {
  font-size: 0.72rem !important;
  color: #9a8a72 !important;
  text-align: center !important;
  margin-top: 8px !important;
}
.info-modal-body .info-tip strong { color: #c0a878 !important; font-weight: 600 !important; }
.info-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.info-modal-body::-webkit-scrollbar { width: 4px; }
.info-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.info-modal-body::-webkit-scrollbar-track { background: transparent; }
/* v20.1: .modal-overlay p의 박스 스타일(border/background/padding) 제거 — 툴팁은 카드 1개만 */
.info-modal-body p {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  text-align: left !important;
  margin: 0 0 8px !important;
  line-height: 1.55 !important;
}
.info-modal-body p:last-child { margin-bottom: 0 !important; }
/* 섹션 제목만 노란색 + 굵기 700 (본문은 모두 흰색) */
.info-modal-body .info-section-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #f0c060 !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}
.info-modal-body .info-section-title:first-child { margin-top: 0 !important; }

/* 인포 모달 — 헤더 일러스트 (단일 또는 흐름) */
.info-modal-body .info-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 8px 0;
}
.info-modal-body .info-hero img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.info-modal-body .info-hero.info-hero-flow img {
  width: 64px;
  height: 64px;
}
.info-modal-body .info-hero-arrow {
  color: #8a7a5a;
  font-size: 1.1rem;
  font-family: var(--font-pixel);
  user-select: none;
}

/* 본문 인라인 아이콘 — 텍스트 옆에 자연스럽게 박힘 */
.info-modal-body .info-icon-inline {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: -0.22em;
  margin: 0 1px;
}

/* 자세히 보기 토글 */
.info-modal-body .info-details {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.info-modal-body .info-details > summary {
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: #c0a878;
  padding: 6px 4px;
  list-style: none;
  user-select: none;
}
.info-modal-body .info-details > summary::-webkit-details-marker { display: none; }
.info-modal-body .info-details > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 6px;
  font-size: 0.65rem;
  transition: transform 0.18s ease;
  color: #8a7a5a;
}
.info-modal-body .info-details[open] > summary::before {
  transform: rotate(90deg);
}
.info-modal-body .info-details > p:first-of-type { margin-top: 4px !important; }

/* 환경 편집 — 잠금 슬롯 숨김 토글 */
.env-layout-toggle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  margin: 6px 0 14px;
  padding: 12px 14px;
  background: rgba(60, 50, 30, 0.28);
  border: 1px solid #3a2e1e;
  border-radius: 10px;
}
.env-layout-toggle-label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: #f0d8a0;
  font-weight: 700;
}
.env-layout-toggle-desc {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.7rem;
  color: #a89880;
  line-height: 1.5;
  margin-top: 2px;
  word-break: keep-all;
}
.env-layout-toggle-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #2a2218;
  border: 1px solid #3a2e1e;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.env-layout-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6a5232;
  transition: transform 0.18s ease, background 0.15s ease;
}
.env-layout-toggle-btn.env-layout-toggle-on { background: #5a4322; }
.env-layout-toggle-btn.env-layout-toggle-on .env-layout-toggle-knob {
  transform: translateX(20px);
  background: #f0c060;
}

/* 자기개발 잠금 모달 — 액션 버튼 row */
.selfdev-lock-btns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 4px;
}
.selfdev-lock-btn-primary,
.selfdev-lock-btn-secondary {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.selfdev-lock-btn-primary {
  background: #5a4322;
  border: 1px solid #6a5232;
  color: #f0d8a0;
  font-weight: 700;
}
.selfdev-lock-btn-secondary {
  background: #2a2218;
  border: 1px solid #3a2e1e;
  color: #c0a878;
}
.selfdev-lock-btn-primary:active,
.selfdev-lock-btn-secondary:active { filter: brightness(1.2); }

/* ── 패널 헤더 통일 (퀄리티 일관성) ── */
/* 모든 메인 패널 헤더는 동일한 padding/border/font/back button 스타일 */
#shop-header,
#gamble-header,
#adventure-header,
#market-header,
#lottery-header,
#guild-header,
#ranking-header,
#mailbox-header,
#event-header,
#dex-header,
#inventory-header,
#enhancement-header,
#env-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid #2a2418 !important;
}
/* 헤더 타이틀 통일 */
#shop-header > span,
#gamble-header > span,
#adventure-header > span,
#market-header > span,
#lottery-header > span,
#guild-header > span,
#ranking-header > span,
#mailbox-header > span,
#event-header > span,
#dex-header > span,
#inventory-header > span,
#enhancement-header > span,
#env-header > span,
#archive-header > span,
#portal-header > span {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}
/* 헤더 뒤로가기 버튼 통일 */
#shop-header > button,
#gamble-header > button,
#adventure-header > button,
#market-header > button,
#lottery-header > button,
#guild-header > button,
#ranking-header > button,
#mailbox-header > button,
#event-header > button,
#dex-header > button,
#inventory-header > button,
#enhancement-header > button,
#env-header > button {
  font-size: 0.85rem !important;
  color: var(--color-text-dim, #c4b99a) !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 4px 8px;
}
/* 탭 폰트 사이즈 통일 — 0.75rem */
.shop-tab,
.market-tab,
.guild-tab,
.ranking-tab,
.hukbak-tab,
.chat-tab {
  font-size: 0.75rem !important;
}

/* ── 강화 결과 Reveal 모달 (도파민 UX) ── */
.enh-reveal-overlay { z-index: 1400; }
.enh-reveal-card {
  background: linear-gradient(180deg, #1f1a14 0%, #1a1610 100%);
  border: 1px solid #5c5040;
  border-radius: 14px;
  padding: 22px 24px 20px;
  max-width: 320px;
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #e0d4c0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.enh-reveal-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #f0c060;
  letter-spacing: 0.04em;
}
.enh-reveal-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}
.enh-reveal-slots {
  display: flex;
  gap: 12px;
  margin: 6px 0 10px;
}
.enh-roll-slot {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1.5px solid #3e3527;
  background: radial-gradient(circle at 35% 30%, #1f1812 0%, #110d09 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #5a4d35;
  transition: transform 0.25s ease, background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.enh-roll-slot.rolling {
  animation: enh-shake 0.5s ease-in-out infinite;
  border-color: #f0c060;
  color: #f0c060;
  box-shadow: 0 0 14px rgba(240,192,96,0.35);
}
.enh-roll-slot.roll-success {
  background: linear-gradient(135deg, #1d3a2a 0%, #2a4e3a 100%);
  border-color: #6fcf95;
  color: #c8f0d8;
  box-shadow: 0 0 18px rgba(111,207,149,0.35);
  animation: enh-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.enh-roll-slot.roll-fail {
  background: linear-gradient(135deg, #2e1c1c 0%, #3e2828 100%);
  border-color: #a85050;
  color: #e0a0a0;
  box-shadow: 0 0 12px rgba(168,80,80,0.25);
  animation: enh-shrink 0.35s ease-out;
}
@keyframes enh-shake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-2px) rotate(-2deg); }
  60%      { transform: translateY(2px) rotate(2deg); }
}
@keyframes enh-pop {
  0%   { transform: scale(0.82); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes enh-shrink {
  0%   { transform: scale(1.04); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(0.97); }
}
.enh-reveal-status {
  font-size: 0.78rem;
  text-align: center;
  color: rgba(255,255,255,0.78);
  min-height: 1.5em;
  letter-spacing: 0.02em;
}
.enh-reveal-status.enh-reveal-success { color: #b7f0d0; font-weight: 700; }
.enh-reveal-status.enh-reveal-drop    { color: #f0a0a0; font-weight: 700; }
.enh-reveal-status.enh-reveal-fail    { color: #c4b99a; }
.enh-reveal-btn {
  background: linear-gradient(135deg, #f7c948 0%, #e8a830 100%);
  border: 1px solid #c08818;
  border-radius: 8px;
  color: #2a1e10;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 28px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(192,136,24,0.3);
  letter-spacing: 0.04em;
}
.enh-reveal-btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(192,136,24,0.4); }
.enh-reveal-btn:active { transform: translateY(0); }
.enh-reveal-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.enh-reveal-close {
  background: rgba(74,106,170,0.85);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 8px 24px;
  cursor: pointer;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.enh-reveal-close:hover { background: rgba(74,106,170,1); }

/* 자기개발 화분 — 빈 체크리스트 인라인 안내 */
.selfdev-empty-hint {
  font-size: 0.65rem;
  color: rgba(255, 200, 100, 0.85);
  text-align: center;
  padding: 8px 12px;
  background: rgba(247, 201, 72, 0.08);
  border: 1px dashed rgba(247, 201, 72, 0.4);
  border-radius: 6px;
  margin: 6px 0;
  line-height: 1.5;
}

/* ── 인게임 확인 모달 ── */
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.confirm-modal {
  background: var(--color-panel, #1e1a15);
  border: 1px solid #3a3228;
  border-radius: 14px;
  padding: 20px 22px 16px;
  max-width: 300px; width: 85%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.confirm-modal-title {
  font-size: 0.9rem; font-weight: 700;
  color: #f0c040; margin-bottom: 10px;
}
.confirm-modal-msg {
  font-size: 0.75rem; color: #c4b99a;
  line-height: 1.5; margin-bottom: 18px;
  white-space: pre-line;
}
.confirm-modal-btns {
  display: flex; gap: 10px;
}
.confirm-modal-btns button {
  flex: 1; padding: 10px 0;
  border-radius: 8px; border: none;
  font-size: 0.8rem; font-weight: 700;
  cursor: pointer;
}
.confirm-modal-cancel {
  background: #2a2520; color: #8a7a6a;
}
.confirm-modal-cancel:active { background: #3a3228; }
.confirm-modal-ok {
  background: #c0392b; color: #fff;
}
.confirm-modal-ok:active { background: #e74c3c; }

/* ── 튜토리얼 양파 이미지 ── */
.tut-onion-img {
  width: 90px; height: 90px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 20px;
}
.tut-onion-img-lg { width: 120px; height: 120px; }
.tut-onion-img-sm { width: 70px; height: 70px; margin-bottom: 12px; }
.tut-onion-growing {
  animation: tut-breathe 1.2s ease-in-out infinite;
}
.tut-onion-pulse {
  animation: adv-pulse 0.8s ease infinite alternate;
}
.tut-onion-pop {
  animation: tut-pop 0.45s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes tut-breathe {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes tut-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* 페이드인 */
.tut-fade-in {
  animation: tutFadeIn 0.5s ease-out;
}
@keyframes tutFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 슬라이드인 (상호작용 가이드) */
.tut-slide-in {
  animation: tutSlideIn 0.4s ease-out;
}
@keyframes tutSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 부유 효과 (인트로 씨앗) */
.tut-float {
  animation: tutFloat 3s ease-in-out infinite;
}
@keyframes tutFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 물주기 완료 효과 */
.tut-water-done {
  background: #2a4a6a !important; color: #90d0ff !important;
  pointer-events: none;
}
.tut-water-ripple {
  animation: tutWaterRipple 0.6s ease-out;
}
@keyframes tutWaterRipple {
  0%   { transform: scale(1); filter: brightness(1); }
  50%  { transform: scale(1.08); filter: brightness(1.3) hue-rotate(-20deg); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 새싹 변신 효과 */
.tut-sprout-reveal {
  animation: tutSproutReveal 0.5s ease-in;
}
@keyframes tutSproutReveal {
  0%   { transform: scale(1); opacity: 1; filter: brightness(1); }
  50%  { transform: scale(1.15); opacity: 0.6; filter: brightness(2); }
  100% { transform: scale(0.9); opacity: 0; filter: brightness(3); }
}

/* 순환 팁 문구 */
.tut-tip {
  font-size: 0.75rem; color: #9a90b0; text-align: center;
  min-height: 24px; margin-top: 16px; padding: 0 12px;
  opacity: 0; transition: opacity 0.4s ease;
}
.tut-tip-visible { opacity: 1; }

/* 상호작용 도트 인디케이터 */
.tut-interact-dots {
  display: flex; justify-content: center; gap: 6px; margin: 14px 0 8px;
}
.tut-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a3050; transition: all 0.3s;
}
.tut-dot.active { background: #c8a0e0; transform: scale(1.3); }
.tut-dot.done { background: #6a5a8a; }

/* 아이콘 바운스 (상호작용) */
.tut-icon-bounce {
  animation: tutIconBounce 0.5s cubic-bezier(.2,.8,.3,1.3);
}
@keyframes tutIconBounce {
  0%   { transform: scale(0) rotate(-15deg); }
  60%  { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 질문 번호 */
.tut-q-number {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #5a3080, #7a50b0);
  color: #f0e0ff; font-size: 1.1rem; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}

/* 선택된 옵션 / 딤 처리 */
.tut-option-selected {
  background: #3a5a8a !important; color: #90d0ff !important;
  border-color: #5a8aba !important; transform: scale(1.03);
}
.tut-option-dim {
  opacity: 0.3; pointer-events: none;
}

/* AI 생성 중 점 애니메이션 */
.tut-generating-dots {
  display: flex; justify-content: center; gap: 6px; margin-top: 16px;
}
.tut-generating-dots span {
  font-size: 2rem; color: #8a7aaa; animation: tutDotBlink 1.4s ease-in-out infinite;
}
.tut-generating-dots span:nth-child(2) { animation-delay: 0.2s; }
.tut-generating-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tutDotBlink {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

.tut-icon-praise   { color: #7eca84; }
.tut-icon-criticize { color: #e07a7a; }
.tut-btn-praise {
  background: #1e3e22 !important;
  color: #7eca84 !important;
  border-color: #3a7a3e !important;
}
.tut-btn-criticize {
  background: #3e1e1e !important;
  color: #e07a7a !important;
  border-color: #7a3a3a !important;
}

/* ── 화분 ! 배지 ── */
.pot-wrap { position: relative; }
/* 자기개발 화분 잠금 슬롯 */
.pot-slot-locked { opacity: 0.85; cursor: pointer; }
.pot-lock-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  /* 박스 제거 — 자물쇠 아이콘만 표시 + 가독성 위해 그림자 */
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
/* 자기개발 화분 — 이미지 준비중 플레이스홀더 박스 */
.pot-img-placeholder {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 230px; height: 129px;
  background: rgba(60, 50, 80, 0.55);
  border: 2px dashed rgba(232, 163, 78, 0.55);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
}
.pot-placeholder-text {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  color: #d8c0a0;
  text-align: center;
  line-height: 1.5;
}
.pot-img-locked { filter: grayscale(1) brightness(0.6); }

/* 미확인 성장/독립 결과 — 검은 실루엣으로 스포 차단 */
.onion-silhouette {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #1a1024 35%, #0a0612 80%);
  border-radius: 50%;
  position: relative;
  animation: silhouette-pulse 1.6s ease-in-out infinite;
}
.onion-silhouette::after {
  content: '?';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-pixel);
  color: rgba(232, 163, 78, 0.65);
  font-size: 1rem;
  font-weight: bold;
}
@keyframes silhouette-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 80, 80, 0); }
  50%      { box-shadow: 0 0 16px 2px rgba(232, 80, 80, 0.45); }
}

/* 자기개발 sprout→grown 성장 카드 — 체크리스트 달성률 박스 */
.growth-reveal-selfdev-stats {
  margin: 10px auto 4px;
  padding: 10px 14px;
  background: rgba(232, 163, 78, 0.12);
  border: 1px solid rgba(232, 163, 78, 0.4);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-pixel);
}
.growth-reveal-selfdev-label {
  font-size: 0.66rem;
  color: #c0a070;
  margin-bottom: 4px;
}
.growth-reveal-selfdev-pct {
  font-size: 0.95rem;
  color: #ffe066;
  font-weight: bold;
  margin-bottom: 4px;
}
.growth-reveal-selfdev-msg {
  font-size: 0.62rem;
  color: #d8c0a0;
  opacity: 0.9;
}

/* 화분 3개도 새 사이즈(128×176)에 맞춰 모바일 폭에 fit — 자동 축소 불필요 */
/* 3개 × 128 + gap 8 × 2 = 400px ≤ 모바일 viewport 390~430 */
#pots-container.pots-many {
  gap: 8px;
}

/* ── 자기개발 화분 체크리스트 ── */
#selfdev-checklist-area {
  margin: 12px 16px;
  padding: 12px;
  background: rgba(28, 22, 42, 0.85);
  border: 1px solid rgba(232, 163, 78, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.checklist-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(232, 163, 78, 0.2);
}
.checklist-title {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: #f0d088;
}
.checklist-count {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: #c0a070;
}
.checklist-input-row {
  display: flex; gap: 6px; align-items: center;
}
#checklist-input {
  flex: 1;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  padding: 8px 10px;
  background: #161024;
  border: 1px solid #4a3e62;
  border-radius: 8px;
  color: #e8e0f0;
}
#checklist-input::placeholder { color: #6a5a7e; }
#checklist-add-btn {
  font-family: var(--font-pixel);
  font-size: 1rem;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #ffe066, #e6a020);
  color: #3a2a10;
  border: none; border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
#checklist-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#checklist-items {
  display: flex; flex-direction: column; gap: 4px;
}
.checklist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #221830;
  border-radius: 8px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: #d8c8e8;
  border: 1px solid rgba(232, 163, 78, 0.1);
}
.checklist-item.done {
  opacity: 0.55;
  text-decoration: line-through;
}
.checklist-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 2px solid #8a6a4a;
  border-radius: 4px;
  background: #161024;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-weight: bold;
  color: #ffe066;
  font-size: 0.85rem;
}
.checklist-item.done .checklist-check {
  background: #4a8a5a;
  border-color: #4a8a5a;
  color: #fff;
}
.checklist-text {
  flex: 1;
  word-break: break-word;
}
.checklist-del {
  flex-shrink: 0;
  background: none; border: none;
  color: #8a6a8a;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
}
.checklist-del:hover { color: #d04060; }
.pot-notify-badge {
  position: absolute;
  /* 화분 우측 상단(흙 영역 근처)에 배치 — 양파 머리 위 빈 공간 활용 */
  top: 6px;
  right: 14px;
  width: 18px; height: 18px;
  background: #ff4444;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px #ff444488, 0 1px 3px rgba(0,0,0,0.5);
  animation: badge-pulse 1.2s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}
@keyframes badge-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 8px #ff444488; }
  50%      { transform: scale(1.18); box-shadow: 0 0 14px #ff4444cc; }
}

/* ── 칭찬/비난 버튼 ── */
.btn-praise {
  background: #1e3e22 !important;
  color: #7eca84 !important;
  border: 1px solid #3a7a3e !important;
}
.btn-praise:active { background: #2a5e2e !important; }
.btn-criticize {
  background: #3e1e1e !important;
  color: #e07a7a !important;
  border: 1px solid #7a3a3a !important;
}
.btn-criticize:active { background: #5e2a2a !important; }
.btn-reply {
  background: #1e2a3e !important;
  color: #7aaaee !important;
  border: 1px solid #3a5a8e !important;
}

/* 채팅 액션 버튼 영역 — 입력란 바로 아래 (간격 최소) */
.chat-action-btns {
  display: flex;
  gap: 6px;
  margin-top: 0;
  width: 100%;
}
.chat-action-btns button {
  flex: 1;
  padding: 8px 4px;
  border: none; border-radius: 8px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-action-btns button:disabled { opacity: 0.45; cursor: default; }

/* 상태 메시지 */
#status-message-area {
  margin: 4px 14px 0;
  padding: 6px 12px;
  background: #1e1a2e88;
  border: 1px solid #4a3a6a;
  border-radius: 8px;
  font-size: 0.7rem;
  color: #c8a8e8;
   text-align: center;
  animation: status-fade 0.4s ease;
}
@keyframes status-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 성장 결과 오버레이 ── */
.growth-reveal-overlay {
  position: fixed; inset: 0;
  background: #0008;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 9100;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 24px 0;
}
.growth-reveal-overlay > * { margin: auto 0; }
.growth-reveal-card {
  background: #1e1a2e;
  border: 1px solid #5a3a8a;
  border-radius: 16px;
  padding: 28px 22px;
  max-width: 300px; width: 88%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
 }
.growth-reveal-emoji { font-size: 2.8rem; }
.growth-reveal-title { font-size: 1.1rem; color: #e8d8f8; }
.growth-reveal-msg   { font-size: 0.75rem; color: #9880b8; text-align: center; line-height: 1.7; }
.growth-reveal-stage-label { font-size: 0.65rem; color: #7a6aaa; letter-spacing: 2px; text-transform: uppercase; }
.growth-reveal-story {
  font-size: 0.78rem; color: #d8c8e8;
  line-height: 1.8; text-align: center;
  min-height: 60px;
}
/* 탄생 텍스트 */
.growth-reveal-birth {
  font-size: 1.3rem; color: #ffe8a0; letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,220,100,0.5);
  animation: birth-pop 0.6s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes birth-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

/* 티어 라벨 */
.growth-reveal-tier {
  font-size: 0.65rem; letter-spacing: 2px; font-weight: bold;
  padding: 2px 10px; border-radius: 8px;
}
/* 밝은 파스텔 카드 배경 대비 — 등급 라벨 색 어둡게 */
.tier-text-rare      { color: #4a6d96; background: rgba(74,109,150,0.14); }
.tier-text-epic      { color: #8a5aaa; background: rgba(138,90,170,0.14); }
.tier-text-legendary { color: #a8842a; background: rgba(168,132,42,0.14); }
.tier-text-hidden    { color: #bb5a78; background: rgba(187,90,120,0.14); }

/* 이미지 컨테이너 + 글로우 */
.growth-reveal-img-wrap {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.growth-reveal-img-glow {
  position: absolute; inset: -10px; border-radius: 50%;
  animation: glow-pulse 1.5s ease-in-out infinite alternate;
}
.tier-glow-normal    { box-shadow: 0 0 20px rgba(200,200,200,0.2); }
.tier-glow-rare      { box-shadow: 0 0 25px rgba(107,197,255,0.4); }
.tier-glow-epic      { box-shadow: 0 0 30px rgba(200,125,255,0.5); }
.tier-glow-legendary { box-shadow: 0 0 35px rgba(255,204,68,0.5); }
.tier-glow-hidden    { box-shadow: 0 0 35px rgba(255,107,138,0.5); }
@keyframes glow-pulse {
  from { opacity: 0.6; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}
.growth-reveal-img-main {
  width: 110px; height: 110px; object-fit: contain;
  position: relative; z-index: 1;
  animation: img-reveal 0.5s ease;
}
@keyframes img-reveal {
  from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 카드 티어 테두리 */
.growth-reveal-card.tier-rare      { border-color: #6bc5ff; }
.growth-reveal-card.tier-epic      { border-color: #c87dff; }
.growth-reveal-card.tier-legendary { border-color: #ffcc44; box-shadow: 0 0 30px rgba(255,204,68,0.2); }
.growth-reveal-card.tier-hidden    { border-color: #ff6b8a; box-shadow: 0 0 30px rgba(255,107,138,0.2); }

.growth-reveal-name {
  font-size: 1.2rem; color: #f8e8d0;
  text-align: center;
  animation: name-shine 0.5s ease 0.2s both;
}
@keyframes name-shine {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.growth-reveal-btn {
  background: #3a2a5a; border: none; border-radius: 10px;
  color: #d8c8f8; font-family: var(--font-pixel); font-size: 0.78rem;
  padding: 10px 28px; cursor: pointer; margin-top: 4px;
}
.growth-reveal-btn:active { background: #4a3a6a; }
.growth-reveal-btn.hidden { display: none; }
.grown-reveal { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ── 독립 카드 ── */
.indep-card-overlay {
  position: fixed; inset: 0;
  background: #000c;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 700;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 24px 0;
}
.indep-card-card {
  background: #14121e;
  border: 2px solid #5a3a2a;
  border-radius: 18px;
  padding: 28px 20px;
  max-width: 310px; width: 90%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: auto;
  animation: indep-appear 0.5s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes indep-appear {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.indep-card-grade {
  font-size: 0.72rem; letter-spacing: 3px;
  padding: 0; border-radius: 0;
  background: transparent !important;
  font-weight: 700;
}
.indep-card-grade.grade-normal    { color: #4a7a4a; }
.indep-card-grade.grade-rare      { color: #3a5a8a; }
.indep-card-grade.grade-legendary { color: #8a6a30; }
.indep-card-grade.grade-hidden    { color: #b04020; }
/* 독립 "다음" 이후 — 복 보상 + 작별 멘트 통합 화면 (카드 파스텔 톤, 따뜻한 여운) */
.indep-finale-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9600;
  padding: 24px;
  animation: indep-finale-fade 0.4s ease;
}
@keyframes indep-finale-fade { from { opacity: 0; } to { opacity: 1; } }
.indep-finale-card {
  /* 기본(일반) — 베이지. 등급별 tier-X는 아래 override */
  background: linear-gradient(135deg, #f3ebda 0%, #e4d5bb 100%);
  border: 2px solid #a18d68;
  border-radius: 18px;
  padding: 26px 22px 22px;
  max-width: 300px; width: 88%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
  animation: indep-finale-pop 0.45s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes indep-finale-pop {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.indep-finale-card.tier-rare {
  background: linear-gradient(135deg, #e6edf5 0%, #cdd9ea 100%); border-color: #7e98b8;
}
.indep-finale-card.tier-legendary {
  background: linear-gradient(135deg, #f8efd3 0%, #eddba8 100%); border-color: #c2a256;
  box-shadow: 0 10px 36px rgba(194, 162, 86, 0.4);
}
.indep-finale-card.tier-hidden {
  background: linear-gradient(135deg, #f3e0e8 0%, #e4c8d6 100%); border-color: #bb8aa1;
  box-shadow: 0 10px 36px rgba(187, 138, 161, 0.4);
}
.indep-finale-reward {
  font-family: var(--font-pixel);
  font-size: 1.25rem; font-weight: 700;
  color: #b07d28;
}
.indep-finale-reward .pixel-icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.indep-finale-msg {
  font-family: var(--font-pixel);
  font-size: 0.92rem; line-height: 1.75;
  color: #5c4d38; text-align: center; font-style: italic;
  word-break: keep-all;
}
.indep-finale-dexnote {
  font-family: var(--font-pixel);
  font-size: 0.72rem; line-height: 1.6;
  color: #8a6a4a; text-align: center;
  background: rgba(74,60,42,0.06); border-radius: 8px; padding: 8px 10px;
}
.indep-finale-btns { display: flex; gap: 10px; width: 100%; }
.indep-finale-btn {
  flex: 1;
  font-family: var(--font-pixel); font-size: 0.82rem;
  background: #c2a256; color: #fff8ec; border: none;
  border-radius: 10px; padding: 11px 22px; cursor: pointer;
}
.indep-finale-btn:active { background: #a8893f; }
.indep-finale-btn-sub {
  flex: 1;
  font-family: var(--font-pixel); font-size: 0.82rem;
  background: rgba(74,60,42,0.06); color: #6a5838;
  border: 1px solid rgba(74,60,42,0.25);
  border-radius: 10px; padding: 11px 22px; cursor: pointer;
}
.indep-finale-btn-sub:active { background: rgba(74,60,42,0.14); }

/* ── 게임 내 성장/독립 카드 — 공유 카드 파스텔 톤 + 등급별 색 ── */
/* 기본(일반) — 베이지 */
.indep-card-card,
.growth-reveal-card {
  background: linear-gradient(135deg, #f3ebda 0%, #e4d5bb 100%) !important;
  border: 2px solid #a18d68 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
}
/* 희귀 — 블루 */
.indep-card-card.tier-rare,
.growth-reveal-card.tier-rare {
  background: linear-gradient(135deg, #e6edf5 0%, #cdd9ea 100%) !important;
  border-color: #7e98b8 !important;
}
/* 전설 — 골드 */
.indep-card-card.tier-legendary,
.growth-reveal-card.tier-legendary {
  background: linear-gradient(135deg, #f8efd3 0%, #eddba8 100%) !important;
  border-color: #c2a256 !important;
  box-shadow: 0 8px 30px rgba(194, 162, 86, 0.35) !important;
}
/* 히든 — 핑크 */
.indep-card-card.tier-hidden,
.growth-reveal-card.tier-hidden {
  background: linear-gradient(135deg, #f3e0e8 0%, #e4c8d6 100%) !important;
  border-color: #bb8aa1 !important;
  box-shadow: 0 8px 30px rgba(187, 138, 161, 0.35) !important;
}
/* 텍스트 — 어두운 갈색 (밝은 배경 대비) */
.indep-card-name,
.growth-reveal-name { color: #4a3c2a; }
.indep-card-name { border-bottom-color: rgba(74, 60, 42, 0.18); }
.indep-card-story,
.growth-reveal-story { color: #6a5838; }
.growth-reveal-title { color: #4a3c2a; }
.growth-reveal-msg { color: #8a7048; }
.growth-reveal-stage-label { color: #a08850; }
.growth-reveal-birth { color: #c2884a; text-shadow: 0 1px 6px rgba(194, 136, 74, 0.3); }
.indep-card-grade { color: #4a3c2a; }
/* 게이지 */
.indep-gauges-title { color: #8a7038; }
.indep-gauge-label,
.indep-gauge-pct { color: #6a5838; }
.indep-gauge-bar-bg { background: rgba(74, 60, 42, 0.12); }
/* 자기개발 총평/스탯 */
.growth-reveal-selfdev-stats { background: rgba(74, 60, 42, 0.06); }
.growth-reveal-selfdev-label,
.growth-reveal-selfdev-pct,
.growth-reveal-selfdev-msg { color: #6a5838; }
/* '결과 보기' / '잘 가!' 버튼 */
.indep-card-btn,
.growth-reveal-btn {
  background: #c2a256 !important; color: #fff8ec !important; border: none !important;
}
.indep-card-btn:active,
.growth-reveal-btn:active { background: #a8893f !important; }
/* 카드 내 공유/저장 버튼 — 밝은 배경용 */
.indep-card-card .card-share-btn,
.growth-reveal-card .card-share-btn {
  background: rgba(74, 60, 42, 0.05);
  border-color: rgba(74, 60, 42, 0.22);
  color: #6a5838;
}
.indep-card-card .card-share-btn:hover,
.growth-reveal-card .card-share-btn:hover {
  background: rgba(74, 60, 42, 0.12);
  border-color: rgba(74, 60, 42, 0.4);
  color: #4a3c2a;
}
.indep-card-card .card-share-row,
.growth-reveal-card .card-share-row { border-top-color: rgba(74, 60, 42, 0.15); }
.indep-card-img { margin: 6px 0; }
.indep-card-img img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 12px #c8a87044); }
.indep-card-name {
  font-size: 1.1rem; color: #1a1410;
  border-bottom: 1px solid #3a2a2a; padding-bottom: 8px; width: 100%; text-align: center;
}
.indep-card-story {
  font-size: 0.78rem; color: #b8a090; line-height: 1.85;
  text-align: center; padding: 4px 4px;
  word-break: keep-all;
  align-self: stretch;
}
.indep-card-btn {
  background: #2a1a1a; border: 1px solid #5a3a2a;
  border-radius: 10px; color: #c8a870;
  font-family: var(--font-pixel); font-size: 0.78rem;
  padding: 10px 32px; cursor: pointer; margin-top: 6px;
}
.indep-card-btn:active { background: #3a2a2a; }

/* ── 도감 저장 프롬프트 ── */
.dex-save-overlay {
  position: fixed; inset: 0; background: #0009;
  display: flex; align-items: center; justify-content: center; z-index: 710;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 0;
}
.dex-save-card {
  background: #1a1a2e; border: 1px solid #4a3a7a;
  border-radius: 14px; padding: 24px 20px;
  max-width: 270px; width: 86%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
 }
.dex-save-title { font-size: 0.85rem; color: #d8c8f8; }
.dex-save-name  { font-size: 1rem; color: #f0e0d0; }
.dex-save-notice { font-size: 0.65rem; color: #e09050; background: #2a1a10; padding: 6px 10px; border-radius: 6px; }
.dex-save-btns  { display: flex; gap: 10px; margin-top: 4px; }
.dex-save-yes {
  background: #1e3e22; border: 1px solid #3a7a3e; border-radius: 10px;
  color: #7eca84; font-family: var(--font-pixel); font-size: 0.78rem;
  padding: 9px 22px; cursor: pointer;
}
.dex-save-no {
  background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 10px;
  color: #888; font-family: var(--font-pixel); font-size: 0.78rem;
  padding: 9px 22px; cursor: pointer;
}

/* ── 랭킹 패널 ── */
#ranking-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #2a2440;
  font-family: var(--font-pixel); font-size: 1rem; color: var(--color-text);
}
#ranking-header button {
  background: none; border: none; color: var(--color-text-dim);
  font-family: var(--font-pixel); font-size: 0.85rem; cursor: pointer;
}
#ranking-tabs {
  display: flex; border-bottom: 1px solid #2a2440;
}
.ranking-tab {
  flex: 1; padding: 10px 4px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--font-pixel); font-size: 0.68rem; color: var(--color-text-dim);
  cursor: pointer; transition: color 0.15s;
}
.ranking-tab.active {
  color: #c8a8e8; border-bottom-color: #c8a8e8;
}
#ranking-content {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
/* 글로벌 랭킹 — 50위 목록 내부 스크롤 + 내 순위 하단 고정 */
.ranking-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.ranking-my-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 11px 14px;
  background: linear-gradient(135deg, #3a3056, #4a3a68);
  border: 1px solid #6a5a98; border-radius: 12px;
}
.ranking-my-bar-label { font-size: 0.7rem; color: #c8b8e8; font-weight: bold; }
.ranking-my-bar-rank { margin-left: auto; font-size: 1rem; color: #f7d77a; font-weight: bold; }
.ranking-my-bar-val { font-size: 0.74rem; color: #b0a0d0; }
.ranking-server-notice {
  font-size: 0.65rem; color: #7a6aaa;
  text-align: center; padding: 6px 0 10px;
}
.ranking-loading {
  text-align: center; padding: 30px 0;
  font-size: 0.72rem; color: #7a6aaa;
}
.ranking-separator {
  text-align: center; color: #5a4a7a; font-size: 0.7rem;
  padding: 4px 0; letter-spacing: 4px;
}
.ranking-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #1e1a2e; border: 1px solid #2a2440;
 }
.ranking-row-me {
  background: #1e2a3e; border-color: #3a5a8e;
}
.ranking-row-empty { opacity: 0.35; }
.ranking-rank {
  min-width: 24px; font-size: 0.72rem; color: #9880b8; text-align: center;
}
.ranking-row-me .ranking-rank { color: #7ab0f0; }
.ranking-name {
  flex: 1; font-size: 0.8rem; color: var(--color-text);
}
.ranking-value {
  font-size: 0.85rem; color: #f0e0d0; font-weight: bold;
}
.ranking-unit { font-size: 0.65rem; color: #9880b8; margin-left: 2px; }

/* 명예의 전당 행 */
.ranking-hof-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #1e1a2e; border: 1px solid #2a2440;
 }
.ranking-hof-img img {
  width: 40px; height: 40px; object-fit: contain;
}
.ranking-hof-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ranking-hof-name { font-size: 0.78rem; color: #f0e0d0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ranking-hof-story {
  font-size: 0.62rem; color: #9880b8; line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
.ranking-hof-date  { font-size: 0.6rem;  color: #5a4a7a; }
.ranking-hof-score { font-size: 0.85rem; color: #f7d77a; font-weight: bold; white-space: nowrap; }
.ranking-hof-empty {
  text-align: center; padding: 40px 20px;
  font-size: 0.75rem; color: #7a6aaa; line-height: 2;
}

/* ── 도감 상세 뷰 ── */
.dex-pending-badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #ff4444; color: #fff;
  border-radius: 50%; font-size: 0.7rem; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  animation: badge-pulse 1.2s ease-in-out infinite;
}
.dex-card { position: relative; }
.dex-detail-overlay {
  position: fixed; inset: 0; background: #000a;
  display: flex; align-items: center; justify-content: center;
  z-index: 9700;  /* 책 모드 dex-panel(9500) 위로 표시 — 튜토리얼에서 양파 카드 클릭 시 X 버튼 활성화 */
}
.dex-detail-card {
  background: #1a1a2e; border: 1px solid #4a3a7a;
  border-radius: 16px; padding: 22px 18px;
  max-width: 300px; width: 88%; max-height: 80vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-pixel); position: relative;
}
.dex-detail-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; color: #888; font-size: 1.1rem; cursor: pointer;
}
.dex-detail-img img { width: 100px; height: 100px; object-fit: contain; }
.dex-detail-name { font-size: 1.1rem; color: #f0e0d0; }
.dex-detail-grade { font-size: 0.65rem; padding: 2px 10px; border-radius: 6px; }
.dex-detail-count { font-size: 0.68rem; color: #9880b8; }
.dex-claim-btn {
  background: #2a3a1a; border: 1px solid #5a8a3a; border-radius: 10px;
  color: #a0d070; font-family: var(--font-pixel); font-size: 0.75rem;
  padding: 8px 18px; cursor: pointer; animation: badge-pulse 1.2s ease-in-out infinite;
}
.dex-detail-section-label {
  font-size: 0.65rem; color: #7a6aaa; letter-spacing: 1px;
  margin-top: 6px; align-self: flex-start;
}
.dex-entries-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.dex-entry-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #22203a; border: 1px solid #3a3260;
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.dex-entry-row:active { background: #2e2a50; }
.dex-entry-name { font-size: 0.78rem; color: #d8c8f8; }
.dex-entry-arrow { color: #7a6aaa; }
.dex-story-overlay {
  position: fixed; inset: 0; background: #000b;
  display: flex; align-items: center; justify-content: center;
  z-index: 9720;  /* dex-detail-overlay(9700) 위 — 스토리는 detail 위에 떠야 */
}
.dex-story-card {
  background: #14121e; border: 1px solid #4a3a6a;
  border-radius: 14px; padding: 24px 20px;
  max-width: 300px; width: 88%;
  display: flex; flex-direction: column; gap: 14px;
 }
.dex-story-name { font-size: 0.95rem; color: #f0e0d0; text-align: center; }
.dex-story-text { font-size: 0.75rem; color: #b8a8d8; line-height: 1.9; text-align: center; }
.dex-story-close {
  background: #2a2040; border: 1px solid #4a3a6a; border-radius: 10px;
  color: #c8b8e8; font-family: var(--font-pixel); font-size: 0.75rem;
  padding: 9px 0; cursor: pointer; align-self: stretch; text-align: center;
}

/* ══════════════════════════════════════════════════════════
   미니게임
   ══════════════════════════════════════════════════════════ */

/* 패널 배경: 아이보리 */
#minigame-panel {
  background: #f5f0e1;
}

/* 헤더 */
#mg-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #d8d0b8;
  font-family: var(--font-pixel); font-size: 1rem; color: #3a3020;
}
#mg-header button {
  background: none; border: none; color: #8a7a60;
  font-family: var(--font-pixel); font-size: 0.85rem; cursor: pointer;
}
#mg-stats {
  margin-left: auto; font-size: 0.85rem; color: #b8860b;
}
#mg-hof-btn {
  background: #e8e0c8; border: 1px solid #c8b888; border-radius: 8px;
  font-family: var(--font-pixel); font-size: 0.65rem; color: #8a7a50;
  padding: 4px 10px; cursor: pointer; margin-left: 8px;
}
#mg-hof-btn:active { background: #ddd8b8; }

/* 얼음 타격 영역 */
#mg-ice-area {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px; gap: 16px;
  user-select: none; -webkit-user-select: none;
  position: relative; overflow: hidden;
}
#mg-hit-counter {
  font-family: var(--font-pixel); font-size: 0.75rem; color: #7a6a50;
}
#mg-surge-bar-wrap {
  width: 70%; height: 6px; background: #d8d0b8; border-radius: 3px; overflow: hidden;
}
#mg-surge-bar {
  height: 100%; width: 0%; background: linear-gradient(90deg, #b8860b, #d4a020);
  border-radius: 3px; transition: width 0.15s ease;
}
#mg-ice-block {
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
  border-radius: 18px;
  background: linear-gradient(135deg, #a0d8f8 0%, #60a8e8 40%, #3888d0 100%);
  box-shadow: 0 0 30px #3888d044, inset 0 0 20px #ffffff44;
  transition: transform 0.08s;
}
#mg-ice-block:active { transform: scale(0.93); }
#mg-ice-emoji {
  font-size: 3.5rem; pointer-events: none;
  filter: drop-shadow(0 2px 6px #00000044);
}
#mg-ice-cracks {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 18px; opacity: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 8px, #ffffff33 8px, #ffffff33 9px
  );
  transition: opacity 0.2s;
}
.mg-ice-crack-show { opacity: 0.7 !important; }

/* 얼음 타격 이펙트 */
@keyframes mg-ice-shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -3px); }
}
.mg-ice-shake { animation: mg-ice-shake 0.15s ease; }

/* 복 드롭 플로팅 */
#mg-drop-float {
  position: absolute;
  font-family: var(--font-pixel); font-size: 1.1rem; color: #f7d77a;
  font-weight: bold; pointer-events: none;
  text-shadow: 0 0 8px #f7d77a88;
}
@keyframes mg-float-up {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-60px); }
}
.mg-float-anim { animation: mg-float-up 0.8s ease forwards; }

/* 매크로 경고 */
#mg-tap-warn {
  font-family: var(--font-pixel); font-size: 0.7rem; color: #c05040;
  animation: mg-warn-pulse 0.5s ease;
}
@keyframes mg-warn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 돌발 시작 버튼 (v22) — 자동 트리거 대신 사용자가 직접 시작 */
#mg-surge-start-btn {
  margin-top: 14px;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: #ffeebb;
  background: linear-gradient(180deg, #d4a020 0%, #b8860b 100%);
  border: 2px solid #ffd060;
  border-radius: 8px;
  padding: 12px 28px;
  box-shadow: 0 0 16px #ffd06088, inset 0 1px 0 #ffffff66;
  cursor: pointer;
  letter-spacing: 0.02em;
  animation: mg-surge-btn-pulse 0.9s ease-in-out infinite alternate;
  transition: transform 0.08s;
}
#mg-surge-start-btn:active { transform: scale(0.95); }
@keyframes mg-surge-btn-pulse {
  from { box-shadow: 0 0 14px #ffd06066, inset 0 1px 0 #ffffff66; transform: scale(1); }
  to   { box-shadow: 0 0 24px #ffd060cc, inset 0 1px 0 #ffffff88; transform: scale(1.05); }
}

/* ── 돌발 미니게임 오버레이 ── */
#mg-surge-overlay {
  position: absolute; inset: 0;
  background: #12101eee;
  display: flex; flex-direction: column;
  align-items: center;
  z-index: 10;
  animation: mg-surge-appear 0.3s ease;
}
@keyframes mg-surge-appear {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
/* 카운트다운 */
.mg-countdown {
  font-family: var(--font-pixel); font-size: 3.5rem; color: #f7d77a;
  text-shadow: 0 0 20px #f7d77a66;
  animation: mg-countdown-pop 0.6s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes mg-countdown-pop {
  0%   { transform: scale(2); opacity: 0; }
  50%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); }
}

#mg-surge-header {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
 }
#mg-surge-title { font-size: 0.9rem; color: #e8d8f8; }
#mg-surge-timer { font-size: 0.85rem; color: #f7d77a; }
#mg-surge-content {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 16px; overflow: hidden;
  position: relative;
}
#mg-surge-score {
  padding: 20px; text-align: center;
 }
.mg-surge-result-title {
  font-size: 1.1rem; color: #f0e0d0; margin-bottom: 8px;
}
.mg-surge-result-reward {
  font-size: 1.3rem; color: #f7d77a; margin-bottom: 16px;
}
.mg-surge-result-btn {
  background: #3a2a5a; border: none; border-radius: 10px;
  color: #d8c8f8; font-family: var(--font-pixel); font-size: 0.85rem;
  padding: 12px 36px; cursor: pointer;
}
.mg-surge-result-btn:active { background: #4a3a6a; }

/* ── 순발력: 숫자 그리드 ── */
.mg-num-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  width: 100%; max-width: 320px;
}
.mg-num-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: #2a2440; border: 1px solid #4a3a7a; border-radius: 10px;
  font-family: var(--font-pixel); font-size: 1rem; color: #d8c8f8;
  cursor: pointer; transition: all 0.1s;
  user-select: none; -webkit-user-select: none;
}
.mg-num-cell:active { transform: scale(0.9); }
.mg-num-cell.mg-num-done {
  background: #1a3a1a; border-color: #3a8a3a; color: #7eca84;
}
.mg-num-cell.mg-num-wrong {
  background: #3a1a1a; border-color: #8a3a3a;
  animation: mg-wrong-shake 0.3s ease;
}
@keyframes mg-wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── 캐치: 좌우 이동 ── */
.mg-catch-field {
  width: 100%; max-width: 320px; height: 320px;
  position: relative; overflow: hidden;
  background: #1a1828; border: 1px solid #2a2440; border-radius: 12px;
}
.mg-catch-basket {
  position: absolute; bottom: 8px;
  width: 60px; height: 30px;
  background: #8a6830; border: 2px solid #c8a050; border-radius: 0 0 12px 12px;
  display: flex; align-items: center; justify-content: center;
  transition: left 0.12s ease;
  font-size: 1.2rem;
}
.mg-catch-onion-img {
  width: 30px; height: 30px;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}
.mg-slash-onion-img {
  width: 38px; height: 38px;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}

.mg-catch-item {
  position: absolute; font-size: 1.4rem;
  transition: none; pointer-events: none;
}
/* v22: 터치 영역을 surge content 전체로 확장 — 필드 아래 부분도 좌우 이동 */
.mg-catch-touch {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 10;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mg-catch-touch-left { left: 0; }
.mg-catch-touch-right { right: 0; }
.mg-catch-touch:active { background: rgba(255,255,255,0.04); }
/* 필드/스코어는 터치 통과 — 클릭이 아래 touch zone에 도달하도록 */
.mg-catch-field { pointer-events: none; position: relative; z-index: 11; }
.mg-catch-field > * { pointer-events: none; }
.mg-catch-score-display { position: relative; z-index: 11; pointer-events: none; }
.mg-catch-score-display {
  font-family: var(--font-pixel); font-size: 0.85rem; color: #f0e0d0;
  margin-top: 8px;
}

/* ── 슬래시: 터치 베기 ── */
.mg-slash-field {
  width: 100%; max-width: 320px; height: 360px;
  position: relative; overflow: hidden;
  background: #1a1828; border: 1px solid #2a2440; border-radius: 12px;
}
.mg-slash-onion {
  position: absolute; font-size: 1.8rem; cursor: pointer;
  transition: none; user-select: none; -webkit-user-select: none;
}
.mg-slash-onion:active { transform: scale(0.7); }
@keyframes mg-slash-cut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5) rotate(30deg); opacity: 0; }
}
.mg-slash-cut { animation: mg-slash-cut 0.3s ease forwards; pointer-events: none; }
.mg-slash-hud {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 0 4px; max-width: 320px;
}
.mg-slash-lives {
  font-family: var(--font-pixel); font-size: 0.85rem; color: #e07a7a;
}
.mg-slash-timer-display {
  font-family: var(--font-pixel); font-size: 0.9rem; color: #f7d77a;
  font-weight: bold;
}
.mg-slash-score-display {
  font-family: var(--font-pixel); font-size: 0.85rem; color: #f0e0d0;
}
.mg-slash-bomb { filter: none; }
@keyframes mg-bomb-explode {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; filter: brightness(3); }
}
.mg-slash-bomb.mg-slash-cut { animation: mg-bomb-explode 0.3s ease forwards; }

/* ── 양파탑 (v22 신규 미니게임) ── */
/* 위에서 아래로: 우주(검정) → 어두운 하늘 → 하늘 → 노을 → 땅 */
.mg-tower-stage {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg,
    #000008 0%,
    #050518 8%,
    #0a0e2a 16%,
    #1a2050 26%,
    #3a4d8e 40%,
    #6f8ad8 58%,
    #b0d0f0 76%,
    #d8a878 88%,
    #5b4628 100%);
  border: 2px solid #2a2418;
  border-radius: 8px;
}
/* 우주 영역(상단 25%)에만 별 반짝임 — radial gradient + 마스크 + opacity 애니 */
.mg-tower-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 3%,  #ffffff, transparent 60%),
    radial-gradient(1px 1px   at 19% 7%,  #fff8e0, transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 4%, #ffffff, transparent 60%),
    radial-gradient(1px 1px   at 48% 9%,  #e8e8ff, transparent 60%),
    radial-gradient(1.2px 1.2px at 61% 2%, #ffffff, transparent 60%),
    radial-gradient(1px 1px   at 74% 6%,  #fff0c8, transparent 60%),
    radial-gradient(1.5px 1.5px at 87% 11%, #ffffff, transparent 60%),
    radial-gradient(1px 1px   at 5%  14%, #ffffff, transparent 60%),
    radial-gradient(1px 1px   at 28% 18%, #e8e8ff, transparent 60%),
    radial-gradient(1.2px 1.2px at 53% 17%, #ffffff, transparent 60%),
    radial-gradient(1px 1px   at 80% 20%, #fff8e0, transparent 60%);
  pointer-events: none;
  animation: mg-tower-twinkle 2.6s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 18%, transparent 26%);
  mask-image: linear-gradient(180deg, #000 0%, #000 18%, transparent 26%);
}
@keyframes mg-tower-twinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.mg-tower-camera {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
  transition: transform 0.25s ease;
}
.mg-tower-stack-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 100%;
  transition: transform 0.2s ease;
}
.mg-tower-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #6b4e2c 0%, #4a3520 100%);
  border-top: 2px solid #3a2a1a;
}
.mg-tower-stack {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
}
.mg-tower-onion {
  position: absolute;
  image-rendering: pixelated;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #00000044);
}
.mg-tower-current-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mg-tower-tap-zone {
  position: absolute; inset: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}
.mg-tower-score-display {
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  color: #f0e0d0;
}
.mg-tower-score-display span { color: #ffd060; font-weight: bold; }

/* ── 명예의 전당 오버레이 ── */
#mg-hof-overlay {
  position: fixed; inset: 0; background: #0008;
  display: flex; align-items: center; justify-content: center;
  z-index: 800;
}
.mg-hof-card {
  background: #f5f0e1; border: 2px solid #c8b888;
  border-radius: 16px; padding: 20px 16px;
  max-width: 360px; width: 92%;
  max-height: 85vh; display: flex; flex-direction: column;
  animation: mg-surge-appear 0.3s ease;
}
.mg-hof-title {
  font-size: 1rem; color: #3a3020; text-align: center;
  margin-bottom: 4px;
}
.mg-hof-reset-info {
  font-size: 0.6rem; color: #a09070; text-align: center;
  margin-bottom: 12px;
}
.mg-hof-section {
  background: #ece6d0; border: 1px solid #d8d0b8; border-radius: 10px;
  margin-bottom: 8px; overflow: hidden;
}
.mg-hof-section-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; cursor: pointer; user-select: none;
}
.mg-hof-section-header:active { background: #e4dcc6; }
.mg-hof-section-title {
  font-size: 0.7rem; color: #8a7a50;
  flex-shrink: 0;
}
.mg-hof-section-my {
  flex: 1; text-align: right;
  font-size: 0.72rem; color: #b8860b; font-weight: bold;
}
.mg-hof-arrow {
  font-size: 0.7rem; color: #a09070;
  transition: transform 0.25s ease;
}
.mg-hof-open > .mg-hof-section-header .mg-hof-arrow {
  transform: rotate(90deg);
}
.mg-hof-section-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 12px;
}
.mg-hof-open > .mg-hof-section-body {
  max-height: 300px;
  padding: 0 12px 10px;
}
.mg-hof-record {
  display: flex; justify-content: space-between; align-items: center;
}
.mg-hof-label { font-size: 0.72rem; color: #5a4a30; }
.mg-hof-value { font-size: 0.85rem; color: #b8860b; font-weight: bold; }
.mg-hof-empty { font-size: 0.68rem; color: #a09070; text-align: center; padding: 4px 0; }
.mg-hof-global-list {
  margin-top: 6px; border-top: 1px dashed #d0c8b0; padding-top: 6px;
}
.mg-hof-global-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px; font-size: 0.65rem; color: #6a5a40;
}
.mg-hof-global-me { color: #b8860b; font-weight: bold; }
.mg-hof-global-rank { min-width: 16px; text-align: center; color: #a09070; }
.mg-hof-global-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-hof-global-val { font-weight: bold; white-space: nowrap; }

/* v22: 지난주 1등 (상단 고정) — 황금 톤 강조 */
.mg-hof-champion-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; margin-bottom: 4px;
  font-size: 0.7rem; color: #6a4c10;
  background: linear-gradient(180deg, #f7e4a0 0%, #e6c870 100%);
  border: 1px solid #c89c3a; border-radius: 6px;
  box-shadow: inset 0 1px 0 #ffffff88, 0 1px 3px #00000022;
  font-weight: bold;
}
.mg-hof-champion-badge {
  background: #b8860b; color: #fffae0;
  padding: 2px 6px; border-radius: 4px;
  font-size: 0.6rem; letter-spacing: 0.02em;
  white-space: nowrap;
}
.mg-hof-close {
  display: block; width: 100%; margin-top: 12px;
  background: #e0d8c0; border: 1px solid #c8b888; border-radius: 10px;
  color: #5a4a30; font-family: var(--font-pixel); font-size: 0.78rem;
  padding: 10px 0; cursor: pointer; text-align: center;
}
.mg-hof-close:active { background: #d8d0b0; }
.mg-hof-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.mg-hof-tab {
  flex: 1; padding: 7px 0; text-align: center;
  background: #e0d8c0; border: 1px solid #c8b888; border-radius: 8px;
  font-family: var(--font-pixel); font-size: 0.6rem; color: #8a7a50;
  cursor: pointer;
}
.mg-hof-tab-active {
  background: #c8b888; color: #3a3020; font-weight: 700;
}
.mg-hof-my-record {
  text-align: center; font-size: 0.75rem; color: #5a4a30;
  margin-bottom: 8px; padding: 6px 0;
  background: #ece6d0; border-radius: 8px;
}
.mg-hof-my-record strong { color: #b8860b; }
.mg-hof-global-scroll {
  flex: 1; overflow-y: auto; min-height: 200px; max-height: 50vh;
  background: #ece6d0; border: 1px solid #d8d0b8; border-radius: 10px;
  padding: 8px;
}

/* 설정 진동 토글 OFF 상태 */
#haptics-toggle.off { color: #8a7a60; opacity: 0.7; }

/* v23: 사이드바 첫-양파-잠금 게이트 모달 — 게임 흙갈색 톤 + 픽셀 폰트 */
.first-onion-gate-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  animation: first-onion-gate-fade 0.2s ease;
  padding: 20px;
}
.first-onion-gate-card {
  background: linear-gradient(135deg, #3a2e1e 0%, #2a2218 100%);
  border: 2px solid #5a4a32;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  padding: 28px 24px 22px;
  width: 100%; max-width: 300px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  font-family: var(--font-pixel);
}
.first-onion-gate-icon {
  font-size: 3rem;          /* pixel-icon-xl(2.2em) 컨테이너 크기 결정 */
  margin-bottom: 14px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.first-onion-gate-title {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0d8a0;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.first-onion-gate-msg {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: #d0b890;
  margin-bottom: 16px;
  line-height: 1.6;
}
.first-onion-gate-tip {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  color: #e8c878;
  background: rgba(80, 60, 30, 0.45);
  border: 1px solid #6a5230;
  border-radius: 10px;
  padding: 11px 13px;
  line-height: 1.7;
  margin-bottom: 18px;
  width: 100%; box-sizing: border-box;
}
.first-onion-gate-close {
  background: #4a3a28;
  border: 1px solid #6a5230;
  border-radius: 10px;
  color: #f0d8a0;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  padding: 10px 36px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.first-onion-gate-close:active { background: #5a4a32; }
@keyframes first-onion-gate-fade {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────── */
/* v23: 양파 운세 패널                                       */
/* ─────────────────────────────────────────────────────── */
#fortune-panel { background: var(--color-bg); }

#fortune-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #2a2418;
  font-size: 0.95rem; color: var(--color-text);
  position: relative;
}
#fortune-header > button {
  background: none; border: none; color: var(--color-text-dim);
  font-size: 0.85rem; cursor: pointer;
  font-family: var(--font-pixel);
}
#fortune-header > span:first-of-type {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-pixel);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

#fortune-tabs {
  display: flex; gap: 6px;
  padding: 10px 12px 6px;
  border-bottom: 1px solid #2a2418;
}
.fortune-tab {
  flex: 1; padding: 8px 0;
  background: rgba(60, 50, 30, 0.25);
  border: 1px solid #4a3a28;
  border-radius: 8px;
  color: #a09080;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.fortune-tab:active { background: rgba(80, 60, 30, 0.45); }
.fortune-tab-active {
  background: rgba(90, 70, 40, 0.55);
  color: #f0d8a0;
  font-weight: 700;
}

#fortune-content {
  flex: 1; overflow-y: auto;
  padding: 16px 14px 24px;
  font-family: var(--font-pixel);
}

#fortune-mascot {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 0 4px;
  pointer-events: none;
  position: relative;
}
#fortune-mascot img {
  width: 96px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 14px rgba(240, 200, 80, 0.22));
  animation: fortune-mascot-float 3.4s ease-in-out infinite;
}
@keyframes fortune-mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.fortune-today-intro {
  text-align: center;
  font-size: 0.85rem;
  color: #d0b890;
  margin-bottom: 18px;
  line-height: 1.6;
}

.fortune-card-row {
  display: flex; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.fortune-card {
  background: linear-gradient(135deg, #3a2e1e 0%, #2a2218 100%);
  border: 2px solid #5a4a32;
  border-radius: 14px;
  padding: 16px 10px 14px;
  width: 102px; min-height: 180px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-pixel);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.fortune-card-back:hover {
  transform: translateY(-3px);
  border-color: #8a6a40;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.fortune-card-back:active { transform: scale(0.96); }
.fortune-card-icon { font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.fortune-card-label {
  font-size: 0.78rem; color: #d0b890; margin-bottom: 6px;
}
.fortune-card-hint {
  font-size: 0.95rem; color: #8a7a5a;
  margin-top: auto;
  font-weight: 700;
}
.fortune-card-revealed {
  cursor: default;
  animation: fortune-card-reveal 0.5s ease;
}
.fortune-card-revealed:hover { transform: none; box-shadow: none; }
.fortune-card-grade {
  font-size: 1.05rem; font-weight: 700;
  margin: 6px 0 4px;
  letter-spacing: 0.08em;
}
.fortune-card-money {
  font-size: 0.8rem; color: #f0c050;
  margin-bottom: 8px;
  font-weight: 700;
}
.fortune-card-msg {
  font-size: 0.66rem; color: #c0a878;
  line-height: 1.5;
  margin-top: auto;
  word-break: keep-all;
}
.fortune-card-locked {
  background: linear-gradient(135deg, #2a2218 0%, #1a1410 100%);
  border-color: #3a2e1e;
}
.fortune-card-locked .fortune-card-hint {
  color: #a09070;
  font-size: 0.62rem;
  font-weight: 400;
}
@keyframes fortune-card-reveal {
  0%   { transform: rotateY(180deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotateY(0deg);   opacity: 1; }
}

/* 컬렉션 탭 */
.fortune-col-intro {
  text-align: center;
  font-size: 0.76rem;
  color: #c8a888;
  background: rgba(60, 50, 30, 0.25);
  border: 1px solid #4a3a28;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.fortune-col-section-title {
  font-size: 0.85rem;
  color: #f0d8a0;
  margin: 16px 4px 8px;
  font-weight: 700;
}
.fortune-col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.fortune-col-card {
  background: rgba(58, 46, 30, 0.5);
  border: 1px solid #5a4a32;
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column;
  gap: 3px;
  font-family: var(--font-pixel);
  position: relative;        /* 강화 이펙트(별 파티클/+N강 flyer) 위치 기준 */
  overflow: visible;
}
.fortune-col-name {
  font-size: 0.76rem; color: #f0d8a0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fortune-col-lv {
  font-size: 0.7rem;
  color: #e8c878;
}
.fortune-col-effect {
  font-size: 0.66rem;
  color: #c0a878;
}
.fortune-col-enhance {
  margin-top: 6px;
  background: #4a3a28;
  border: 1px solid #6a5230;
  border-radius: 8px;
  color: #f0d8a0;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  padding: 8px 0;
  cursor: pointer;
  transition: background 0.12s ease;
}
.fortune-col-enhance:active { background: #5a4a32; }
.fortune-col-enhance.disabled,
.fortune-col-enhance:disabled {
  background: #2a2218;
  color: #6a5840;
  border-color: #3a2e1e;
  cursor: not-allowed;
}
.fortune-collection-empty {
  text-align: center;
  font-size: 0.82rem;
  color: #a09080;
  padding: 40px 20px;
  line-height: 1.7;
  font-family: var(--font-pixel);
}

/* v23.1: 컬렉션 강화 이펙트 — 카드 빛 펄스 + 별 파티클 + +N강 fly-in */
.fortune-col-card-pulse {
  animation: fortune-card-pulse 1.4s ease-out;
}
@keyframes fortune-card-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 200, 80, 0); border-color: #5a4a32; }
  20%  { box-shadow: 0 0 26px 6px rgba(240, 200, 80, 0.55); border-color: #f0c050; }
  100% { box-shadow: 0 0 0 0 rgba(240, 200, 80, 0); border-color: #5a4a32; }
}
.fortune-enhance-flyer {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, 0);
  font-family: var(--font-pixel);
  font-size: 1.45rem; font-weight: 700;
  color: #f0c050;
  text-shadow: 0 0 10px rgba(240, 200, 80, 0.8), 0 2px 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  animation: fortune-flyer 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  z-index: 5;
}
@keyframes fortune-flyer {
  0%   { transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
  20%  { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  80%  { transform: translate(-50%, -30px) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -52px) scale(0.9); opacity: 0; }
}
.fortune-enhance-star {
  position: absolute;
  left: 50%; top: 50%;
  font-size: 1.1rem;
  pointer-events: none;
  animation: fortune-star 0.9s ease-out forwards;
  z-index: 4;
}
@keyframes fortune-star {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx, 40px)), calc(-50% + var(--dy, -40px))) scale(0.4);
    opacity: 0;
  }
}

/* v23.1: 컬렉션 일일 보상 자동 모달 ─────────────────────── */
.collection-daily-overlay {
  position: fixed; inset: 0; z-index: 850;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  animation: first-onion-gate-fade 0.22s ease;
  padding: 20px;
}
.collection-daily-card {
  background: linear-gradient(135deg, #3a2e1e 0%, #2a2218 100%);
  border: 2px solid #6a5232;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  padding: 22px 20px 18px;
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  font-family: var(--font-pixel);
  max-height: 84vh;
}
.collection-daily-title {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0c050;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.collection-daily-sub {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: #c0a878;
  margin-bottom: 14px;
  line-height: 1.5;
}
.collection-daily-list {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 52vh;
  margin-bottom: 14px;
  padding-right: 4px;
}
.collection-daily-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(80, 60, 30, 0.35);
  border: 1px solid #5a4a32;
  border-left-width: 4px;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-pixel);
}
.collection-daily-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.collection-daily-name {
  flex: 1;
  font-size: 0.82rem;
  color: #f0d8a0;
  text-align: left;
}
.collection-daily-amount {
  font-size: 0.92rem;
  color: #f0c050;
  font-weight: 700;
  flex-shrink: 0;
}
.collection-daily-close {
  background: #4a3a28;
  border: 1px solid #6a5230;
  border-radius: 10px;
  color: #f0d8a0;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  padding: 10px 40px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.collection-daily-close:active { background: #5a4a32; }

/* v23.2: 운세 카드(미니) + 큰 결과 영역 ─────────────────────── */
.fortune-card-row-mini {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.fortune-card-mini {
  flex: 1 1 0;
  min-width: 78px; max-width: 110px;
  background: linear-gradient(135deg, #3a2e1e 0%, #2a2218 100%);
  border: 2px solid #5a4a32;
  border-radius: 12px;
  padding: 11px 6px 9px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-pixel);
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.fortune-card-mini:active { transform: scale(0.96); }
.fortune-card-mini-back  { opacity: 0.88; }
.fortune-card-mini-selected {
  border-color: #f0c050;
  box-shadow: 0 0 14px rgba(240, 200, 80, 0.35);
}
.fortune-card-mini-icon  { font-size: 1.45rem; line-height: 1; margin-bottom: 5px; }
.fortune-card-mini-label { font-size: 0.72rem; color: #d0b890; }
.fortune-card-mini-mark {
  position: absolute;
  top: 5px; right: 7px;
  font-size: 0.82rem; color: #8a7a5a;
  font-weight: 700;
}

.fortune-result-empty {
  background: rgba(60, 50, 30, 0.25);
  border: 1px solid #4a3a28;
  border-radius: 12px;
  padding: 32px 22px;
  text-align: center;
  font-size: 0.85rem;
  color: #c0a878;
  line-height: 1.7;
  font-family: var(--font-pixel);
}
.fortune-result-box {
  background: linear-gradient(135deg, #3a2e1e 0%, #251d12 100%);
  border: 2px solid #6a5232;
  border-radius: 14px;
  padding: 24px 18px 22px;
  text-align: center;
  font-family: var(--font-pixel);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  animation: fortune-result-pop 0.32s ease;
}
@keyframes fortune-result-pop {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.fortune-result-cat {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.fortune-result-cat-icon  { font-size: 1.75rem; line-height: 1; }
.fortune-result-cat-label {
  font-size: 1.2rem; color: #f0d8a0;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.fortune-result-grade-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.fortune-result-grade {
  font-family: var(--font-pixel);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.1;
}
.fortune-grade-reward {
  font-size: 1.15rem;
  color: #f0c050;
  font-weight: 700;
  background: rgba(240, 192, 80, 0.12);
  border: 1px solid rgba(240, 192, 80, 0.35);
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
}
.fortune-grade-reward .pixel-icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.fortune-result-msg {
  font-size: 1.08rem;
  color: #d0b090;
  line-height: 1.75;
  font-style: italic;
  padding: 4px 8px 2px;
  word-break: keep-all;
}

/* ── 10연차 박스 그리드 오버레이 ─────────────────────── */
#box-10pull-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1c1814 0%, #0a0806 100%);
  z-index: 9200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#box-10pull-overlay.hidden { display: none !important; }

.b10-skip-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(60, 50, 40, 0.85);
  border: 1px solid #5a4a30;
  border-radius: 8px;
  color: #d8c8a8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  z-index: 10;
}
.b10-skip-btn:hover { background: rgba(80, 65, 50, 0.95); }

.b10-title {
  font-family: var(--font-title, var(--font-pixel, sans-serif));
  font-size: 1.2rem;
  color: #f0d090;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(240, 192, 80, 0.4);
}

.b10-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 460px;
  width: 100%;
}
.b10-grid.hidden { display: none !important; }

/* chest phase — 1개씩 흔들·열림·미니카드 */
.b10-chest-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.b10-chest-phase.hidden { display: none !important; }

.b10-chest-counter {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  color: #c8b890;
  font-weight: 700;
  letter-spacing: 1px;
}

.b10-chest-stage {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b10-chest-img {
  width: 110px;
  height: 110px;
  image-rendering: pixelated;
  position: relative;
  z-index: 2;
}
.b10-chest-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(232, 168, 80, 0.6) 0%, rgba(232, 168, 80, 0) 60%);
  opacity: 0;
  z-index: 1;
}
.b10-chest-glow.b10-chest-glow-rare {
  background: radial-gradient(circle, rgba(255, 220, 100, 0.8) 0%, rgba(255, 180, 60, 0) 65%);
}

.b10-chest-stage.b10-chest-shake .b10-chest-img {
  animation: b10ChestShake 0.2s ease-in-out 2;
}
.b10-chest-stage.b10-chest-shake-rare .b10-chest-img {
  animation: b10ChestShakeRare 0.2s ease-in-out 2;
}
.b10-chest-stage.b10-chest-shake-rare .b10-chest-glow,
.b10-chest-stage.b10-chest-shake .b10-chest-glow { opacity: 0.3; }

.b10-chest-stage.b10-chest-open .b10-chest-img {
  animation: b10ChestBurst 0.3s ease-out;
}
.b10-chest-stage.b10-chest-open .b10-chest-glow {
  animation: b10ChestGlowBurst 0.4s ease-out;
}

@keyframes b10ChestShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  50% { transform: translateX(0) rotate(0); }
  75% { transform: translateX(4px) rotate(3deg); }
}
@keyframes b10ChestShakeRare {
  0%, 100% { transform: translateX(0) rotate(0) scale(1); }
  25% { transform: translateX(-6px) rotate(-5deg) scale(1.05); }
  50% { transform: translateX(0) rotate(0) scale(1.1); }
  75% { transform: translateX(6px) rotate(5deg) scale(1.05); }
}
@keyframes b10ChestBurst {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes b10ChestGlowBurst {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.8); }
}

.b10-mini-card {
  background: linear-gradient(135deg, #2a2418 0%, #1c1810 100%);
  border: 1px solid #4a3e28;
  border-radius: 10px;
  padding: 10px 18px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.b10-mini-card.hidden { display: none !important; }
.b10-mini-card-rare {
  border-color: #e8a850;
  box-shadow: 0 0 14px rgba(232, 168, 80, 0.5);
}
.b10-mini-card.b10-mini-card-pop {
  animation: b10MiniPop 0.3s ease-out;
}
@keyframes b10MiniPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.b10-mini-card-icon { font-size: 28px; }
.b10-mini-card-icon .pixel-icon { width: 36px; height: 36px; image-rendering: pixelated; }
.b10-mini-card-label {
  font-size: 0.75rem;
  color: #c8b890;
  text-align: center;
  word-break: keep-all;
}
.b10-mini-card-rare .b10-mini-card-label { color: #f0d090; }

@media (max-width: 360px) {
  .b10-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}

.b10-card {
  aspect-ratio: 1 / 1.25;
  position: relative;
  background: linear-gradient(135deg, #2a2418 0%, #1c1810 100%);
  border: 1px solid #4a3e28;
  border-radius: 8px;
  perspective: 600px;
  overflow: hidden;
}

.b10-card-back-face,
.b10-card-front-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transition: transform 0.4s ease;
  padding: 4px;
}

.b10-card-back-face {
  background: linear-gradient(135deg, #4a3a20 0%, #2a2010 100%);
  color: #d8c8a8;
  font-size: 1.6rem;
  font-weight: 700;
  transform: rotateY(0deg);
}
.b10-card-front-face {
  background: linear-gradient(135deg, #2a2418 0%, #1c1810 100%);
  transform: rotateY(180deg);
}

.b10-card-flip .b10-card-back-face { transform: rotateY(-180deg); }
.b10-card-flip .b10-card-front-face { transform: rotateY(0deg); }

.b10-card-flip { animation: b10Pop 0.4s ease; }
@keyframes b10Pop {
  0% { transform: scale(0.7); opacity: 0.5; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

.b10-card-rare {
  border-color: #e8a850;
  box-shadow: 0 0 12px rgba(232, 168, 80, 0.5), inset 0 0 8px rgba(232, 168, 80, 0.2);
}
.b10-card-rare.b10-card-flip {
  animation: b10PopRare 0.5s ease;
}
@keyframes b10PopRare {
  0% { transform: scale(0.7); opacity: 0.5; }
  60% { transform: scale(1.12); box-shadow: 0 0 24px rgba(232, 168, 80, 0.8); }
  100% { transform: scale(1); opacity: 1; }
}

.b10-card-icon {
  font-size: 28px;
  margin-bottom: 4px;
}
.b10-card-icon .pixel-icon {
  image-rendering: pixelated;
}
.b10-card-label {
  font-size: 0.62rem;
  color: #c8b890;
  text-align: center;
  line-height: 1.2;
  padding: 0 3px;
  word-break: keep-all;
}
.b10-card-rare .b10-card-label { color: #f0d090; }

.b10-confirm {
  margin-top: 22px;
  background: linear-gradient(180deg, #6a5028 0%, #4a3818 100%);
  border: 1px solid #8a6838;
  border-radius: 10px;
  color: #f0e0c0;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 36px;
  cursor: pointer;
}
.b10-confirm:hover:not(:disabled) { background: linear-gradient(180deg, #8a6838 0%, #6a5028 100%); }
.b10-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 골든 플래시 (스킵 시 희귀+ 있으면) */
.b10-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.85) 0%, rgba(255, 180, 60, 0) 60%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.b10-flash.b10-flash-active {
  animation: b10FlashAnim 0.5s ease;
}
@keyframes b10FlashAnim {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 상점 박스 액션 (1회/×10 버튼 묶음) ───────────────── */
.shop-box-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.shop-buy-btn-x10 {
  background: linear-gradient(180deg, #5a3a18 0%, #3a2410 100%);
  border-color: #8a5828;
  color: #f0c060;
  font-size: 0.66rem;
  padding: 4px 8px;
  min-height: 22px;
  font-weight: 700;
}
.shop-buy-btn-x10:hover:not(:disabled) {
  background: linear-gradient(180deg, #8a5828 0%, #5a3a18 100%);
}
.shop-buy-btn-x10:disabled {
  background: #2a2418;
  border-color: #3a3228;
  color: #5a4f3a;
}

/* ── 설정 패널 — UID 표시 박스 ────────────────────────── */
.settings-uid-box {
  background: #2a2418;
  border: 1px solid #4a3e28;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-uid-label {
  font-size: 0.7rem;
  color: #a89878;
  text-align: center;
}
.settings-uid-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-uid-value {
  flex: 1;
  font-family: monospace, var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  color: #d8c8a8;
  background: #1c1810;
  border-radius: 4px;
  padding: 5px 7px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.settings-uid-copy {
  flex-shrink: 0;
  background: #4a3e28;
  border: 1px solid #6a583c;
  border-radius: 6px;
  color: #f0e0c0;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  padding: 6px 12px;
  cursor: pointer;
}
.settings-uid-copy:hover { background: #6a583c; }
.settings-uid-copy:active { transform: scale(0.95); }

/* ── 우편함 탭 ────────────────────────────────────────── */
#mailbox-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  background: #1c1814;
  border-bottom: 1px solid #2a2418;
}
.mailbox-tab {
  flex: 1;
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #a89878;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 8px;
  cursor: pointer;
  transition: color 0.15s;
}
.mailbox-tab:hover { color: #d8c8a8; }
.mailbox-tab-active {
  color: #f0d090;
  border-bottom-color: #d0a060;
}
.mailbox-tab-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #e84848;
  border-radius: 50%;
  vertical-align: 1px;
  margin-left: 2px;
  box-shadow: 0 0 4px rgba(232, 72, 72, 0.6);
}
.mailbox-tab-dot.hidden { display: none !important; }

/* 우편함 로딩 상태 */
.mailbox-loading {
  text-align: center;
  padding: 30px;
  color: #8a7e64;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 운영자 우편 태그 (개인/공용) */
.mail-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 2px;
}
.mail-tag-personal {
  background: #5a3a18;
  color: #f0c060;
  border: 1px solid #8a6028;
}
.mail-tag-global {
  background: #1a3a5a;
  color: #80c0e0;
  border: 1px solid #2a5a8a;
}

/* ── 공지 카드 ────────────────────────────────────────── */
.notice-card {
  background: #1f1c14;
}
.notice-card.notice-urgent {
  background: #2c1814;
  border-left: 4px solid #e84848;
}
.notice-card.notice-important {
  background: #2c2418;
  border-left: 4px solid #e8a848;
}
.notice-card.notice-normal {
  border-left: 4px solid #3a3228;
}
.notice-card.notice-new-card {
  box-shadow: 0 0 12px rgba(232, 168, 80, 0.15);
}
.notice-pin {
  margin-right: 4px;
  font-size: 0.85rem;
}
.notice-new {
  display: inline-block;
  background: #e84848;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: 2px;
  letter-spacing: 0.5px;
}

/* 이벤트 패널 — 도감 마일스톤 윈도우 truncate 안내 */
.evt-milestone-truncate {
  text-align: center;
  font-size: 0.72rem;
  color: #8a7e64;
  padding: 6px 0;
  font-style: italic;
}

/* 이벤트 패널 — 출시 기념 패키지 (작은 카드, 출시 퀘스트 위) */
.evt-launch-bundle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #3a2818 0%, #2a1c12 100%);
  border: 1px solid #6a4a28;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 0 16px rgba(232, 168, 80, 0.18);
}
.evt-launch-bundle-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.evt-launch-bundle-title {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  color: #f0d090;
  font-weight: 700;
}
.evt-launch-bundle-desc {
  font-size: 0.72rem;
  color: #c8b090;
  line-height: 1.4;
}
.evt-launch-bundle-btn {
  flex-shrink: 0;
  background: linear-gradient(180deg, #e8a850 0%, #b07028 100%);
  border: 1px solid #e8a850;
  border-radius: 8px;
  color: #1c1410;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}
.evt-launch-bundle-btn:hover { filter: brightness(1.1); }
.evt-launch-bundle-btn:active { transform: scale(0.97); }

/* 광고 보고 확인 버튼 (운세 탭 전환 시) */
.fortune-ad-confirm-btn {
  margin-top: 14px;
  background: linear-gradient(180deg, #5a8c3a 0%, #3a6020 100%);
  border: 1px solid #6ea84a;
  border-radius: 10px;
  color: #f0e0c0;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(110, 168, 74, 0.25);
}
.fortune-ad-confirm-btn:hover { background: linear-gradient(180deg, #6ea84a 0%, #467830 100%); }
.fortune-ad-confirm-btn:active { transform: scale(0.97); }
.fortune-result-locked .fortune-result-cat-label { opacity: 0.7; }
.fortune-result-locked-msg {
  font-size: 0.82rem;
  color: #a09080;
  line-height: 1.7;
  margin-bottom: 18px;
}
.fortune-result-ad-btn {
  background: #4a3a28;
  border: 1px solid #6a5230;
  border-radius: 10px;
  color: #f0d8a0;
  font-family: var(--font-pixel);
  font-size: 0.86rem;
  padding: 12px 30px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.fortune-result-ad-btn:active { background: #5a4a32; }

/* 컬렉션 탭 — 컨트롤 행 (×2 토글 + 보유 복) */
.fortune-col-controls {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  margin: -4px 4px 12px;
}
.fortune-col-money {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: #c8a888;
}
.fortune-col-money strong { color: #f0c050; }
.fortune-col-money .pixel-icon { width: 1em; height: 1em; vertical-align: -0.18em; }

/* ×2 자동 강화 토글 */
.fortune-x2-btn {
  background: #4a3a28;
  border: 1px solid #6a5230;
  border-radius: 8px;
  color: #d0b890;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.fortune-x2-btn:active { transform: scale(0.96); }
.fortune-x2-btn.active {
  background: #f0c050;
  color: #2a2218;
  border-color: #f0c050;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(240, 200, 80, 0.45);
}

/* v23.4: 광고 힌트 (결과 박스 아래 안내) + 미공개 카드 광고 뱃지 */
.fortune-ad-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  color: #e8c878;
  background: rgba(80, 60, 30, 0.35);
  border: 1px solid #6a5230;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-pixel);
  animation: fortune-ad-hint-pulse 2.4s ease-in-out infinite;
}
@keyframes fortune-ad-hint-pulse {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
.fortune-card-mini-ad {
  border-color: #c8a050;
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.28);
}
.fortune-card-mini-mark-ad {
  font-size: 0.95rem;
  top: 4px; right: 5px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  color: inherit;
}

/* ── 복권 ── */
#lottery-panel {
  display: flex; flex-direction: column; height: 100%;
}
/* 헤더는 도박 패널(#gamble-header)과 동일하게 — 흙박 통합 */
#lottery-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-panel);
  border-bottom: 2px solid #3a3228;
  font-size: 0.9rem;
  flex-shrink: 0;
}
#lottery-header button {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}
#lottery-header span { font-size: 0.9rem; color: var(--color-text); }
#lottery-content {
  flex: 1; overflow-y: auto; padding: 12px 14px;
}
.lot-loading, .lot-empty {
  text-align: center; padding: 30px 0; color: #7a6aaa; font-size: 0.72rem;
}

/* 상금 카드 */
.lot-pool-card {
  background: linear-gradient(135deg, #2a2060 0%, #1a1040 100%);
  border: 1px solid #4a3a8a; border-radius: 14px;
  padding: 18px 16px; text-align: center; margin-bottom: 14px;
}
.lot-pool-label { font-size: 0.65rem; color: #9880b8; margin-bottom: 4px; }
.lot-pool-amount { font-size: 1.3rem; color: #f7d77a; font-weight: bold; }
.lot-pool-detail { font-size: 0.58rem; color: #7a6aaa; margin-top: 4px; }
.lot-draw-time {
  font-size: 0.65rem; color: #a090c0; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid #3a2a6a;
}

/* 구매 */
.lot-buy-section {
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
}
.lot-buy-title { font-size: 0.75rem; color: #f0e0d0; margin-bottom: 10px; }
.lot-buy-row { display: flex; gap: 8px; align-items: center; }
.lot-input {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid #2a2440; background: #1a1628;
  color: var(--color-text); font-family: var(--font-pixel); font-size: 0.78rem;
}
.lot-num-input { width: 70px; text-align: center; }
.lot-count-select { width: 60px; }
.lot-btn {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid #2a2440; background: #1e1a2e;
  color: var(--color-text); font-family: var(--font-pixel); font-size: 0.72rem;
  cursor: pointer;
}
.lot-btn-buy {
  background: #3a3080; border-color: #5a50a0; color: #f0e0d0;
}
.lot-btn-buy:active { background: #4a40a0; }
.lot-btn-buy:disabled { opacity: 0.4; cursor: not-allowed; }
.lot-buy-info {
  font-size: 0.6rem; color: #7a6aaa; margin-top: 8px;
}

/* 내 티켓 */
.lot-mybets-title {
  font-size: 0.72rem; color: #9880b8; margin: 10px 0 6px;
  border-bottom: 1px solid #2a2440; padding-bottom: 4px;
}
.lot-mybet-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 3px;
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 8px;
  font-size: 0.72rem;
}
.lot-mybet-num { color: #f7d77a; font-weight: bold; }
.lot-mybet-count { color: #9880b8; }

/* 이전 회차 */
.lot-prev-card {
  background: #1a1628; border: 1px solid #2a2440; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; text-align: center;
}
.lot-prev-won { border-color: #6a8a2a; background: #1a2a10; }
.lot-prev-label { font-size: 0.65rem; color: #7a6aaa; margin-bottom: 6px; }
.lot-prev-number { font-size: 0.85rem; color: #f0e0d0; }
.lot-prev-number strong { color: #f7d77a; font-size: 1rem; }
.lot-prev-pool { font-size: 0.62rem; color: #9880b8; margin-top: 4px; }
.lot-prev-prize {
  font-size: 0.8rem; color: #80e080; margin-top: 8px;
}
.lot-prev-prize strong { font-size: 1rem; }
.lot-prev-tax { font-size: 0.58rem; color: #7a6aaa; }
.lot-prev-detail { font-size: 0.6rem; color: #9880b8; margin-top: 2px; }
.lot-btn-claim {
  background: #4a8a20; border-color: #6aaa30; color: #f0f0d0;
  margin-top: 10px; width: 100%; padding: 10px;
}
.lot-btn-claim:active { background: #5a9a30; }
.lot-prev-claimed { font-size: 0.68rem; color: #7aaa7a; margin-top: 6px; }
.lot-prev-expired { font-size: 0.68rem; color: #aa6a6a; margin-top: 6px; }
.lot-prev-miss { font-size: 0.62rem; color: #9880b8; margin-top: 6px; }

/* 규칙 */
.lot-rules {
  background: #1a1628; border: 1px solid #2a2440; border-radius: 10px;
  padding: 12px 14px; margin-top: 14px;
}
.lot-rules-title { font-size: 0.7rem; color: #9880b8; margin-bottom: 6px; }
.lot-rule { font-size: 0.6rem; color: #7a6aaa; line-height: 1.8; }

/* ══════════════════════════════════════════════════════════
   메인 채팅 패널 — 가독성/계층 우선 디자인
   ══════════════════════════════════════════════════════════ */
#chat-panel {
  display: flex; flex-direction: column; height: 100%;
  background: #0e0a18;
}
#chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: #16122a;
  border-bottom: 1px solid #2a2448;
  flex-shrink: 0;
}
#chat-header > button {
  background: none; border: none; color: #b0a0d0;
  font-size: 1.2rem; cursor: pointer;
  font-family: var(--font-pixel);
  padding: 4px 10px;
}
#chat-tabs {
  display: flex; gap: 0; flex: 1;
  background: #1e1a32; border-radius: 10px;
  overflow: hidden; border: 1px solid #2a2448;
}
.chat-tab {
  flex: 1; padding: 9px 0; font-size: 0.78rem;
  background: transparent; border: none;
  color: #8a78b0; font-family: var(--font-pixel);
  cursor: pointer; text-align: center;
  font-weight: 600;
  transition: all 0.2s;
}
.chat-tab.active {
  background: #3a3080; color: #f0e0ff;
}

#main-chat-messages {
  flex: 1; overflow-y: auto;
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ── 일반 메시지 행 ── */
.mchat-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 0;
  line-height: 1.4;
  word-break: break-all;
}
.mchat-row-me { align-items: flex-end; }
.mchat-head {
  display: flex; align-items: baseline; gap: 5px;
  flex-wrap: wrap;
}
.mchat-title {
  font-size: 0.62rem; font-weight: 700;
  flex-shrink: 0;
}
.mchat-name {
  color: #b0a0d0;
  font-size: 0.7rem; font-weight: 700;
  flex-shrink: 0;
}
.mchat-name-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(176,160,208,0.4);
  text-underline-offset: 2px;
}
.mchat-name-link:active { color: #d8c8f0; }
.mchat-text {
  color: #e0d8e8;
  font-size: 0.78rem;
  line-height: 1.4;
  padding-left: 2px;
}
.mchat-row-me .mchat-text {
  color: #e8e0f0;
  text-align: right;
}
.mchat-time {
  color: #6a5a90;
  font-size: 0.58rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.mchat-notice {
  text-align: center; padding: 50px 0; color: #6a5a90; font-size: 0.85rem;
}

/* ── 자랑(brag) 메시지 — 시스템 알림처럼 강조 (강화/박스/전설/히든 공통) ── */
.mchat-row-brag {
  align-items: stretch;
  padding: 6px 10px 7px;
  border-radius: 8px;
  border-left: 3px solid currentColor;
  background: rgba(60, 40, 60, 0.18);
  margin: 1px 0;
}
.mchat-row-brag .mchat-head {
  align-items: center;
}
.mchat-row-brag .mchat-name {
  color: inherit;
  opacity: 0.95;
  font-size: 0.66rem;
}
.mchat-row-brag .mchat-text {
  color: inherit;
  font-weight: 700;
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: left !important;
  padding-left: 0;
  margin-top: 1px;
}
.mchat-row-brag .mchat-time {
  margin-left: auto;
  opacity: 0.75;
}
.mchat-brag-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
}
.mchat-brag-pixel {
  width: 13px;
  height: 13px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
}

/* 타입별 색상 + 배경 tint */
.mchat-row-brag.brag-enhance {
  color: #ff9c4a;
  background: rgba(255, 144, 68, 0.13);
  border-color: #ff9044;
}
.mchat-row-brag.brag-box {
  color: #54c4ff;
  background: rgba(68, 184, 255, 0.13);
  border-color: #44b8ff;
}
.mchat-row-brag.brag-legendary {
  color: #ffd445;
  background: rgba(255, 204, 51, 0.16);
  border-color: #ffcc33;
  text-shadow: 0 0 6px rgba(255,200,50,0.4);
}
.mchat-row-brag.brag-hidden {
  color: #ff66c8;
  background: rgba(255, 85, 192, 0.16);
  border-color: #ff55c0;
  text-shadow: 0 0 6px rgba(255,80,180,0.45);
}
#main-chat-input-wrap {
  display: flex; gap: 8px; padding: 11px 14px 16px;
  background: #16122a;
  border-top: 1px solid #2a2448;
  flex-shrink: 0;
}
#main-chat-input {
  flex: 1; padding: 11px 16px; border-radius: 22px;
  border: 1px solid #2a2448; background: #1e1a32;
  color: var(--color-text); font-family: var(--font-pixel);
  font-size: 0.86rem;
}
#main-chat-input:focus {
  border-color: #5a4ac0; outline: none;
  background: #221e38;
}
#main-chat-send {
  padding: 11px 18px; border-radius: 22px;
  background: linear-gradient(135deg, #5a48b8, #3a3080);
  border: none;
  color: #f0e0ff; font-family: var(--font-pixel);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#main-chat-send:active { background: #6a58c8; }

/* 채팅 버튼 뱃지 */
.chat-badge {
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e53e3e; border: 1.5px solid #1a1225;
}

/* ── 길드 시스템 ── */
#guild-panel {
  display: flex; flex-direction: column; height: 100%;
}
#guild-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid #2a2440;
}
#guild-header button {
  background: none; border: none; color: #9880b8;
  font-family: var(--font-pixel); font-size: 1rem; cursor: pointer;
  padding: 4px 8px;
}
#guild-header span { font-size: 0.9rem; color: var(--color-text); }
#guild-tabs {
  display: flex; border-bottom: 1px solid #2a2440;
}
.guild-tab {
  flex: 1; padding: 10px 0; text-align: center;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: #7a6aaa; font-family: var(--font-pixel); font-size: 0.7rem;
  cursor: pointer; transition: all 0.2s;
  position: relative;
}
.guild-tab-dot {
  position: absolute; top: 4px; right: calc(50% - 20px);
  width: 7px; height: 7px; border-radius: 50%;
  background: #e53e3e;
}
.guild-tab-dot.hidden { display: none; }
.guild-tab.active {
  color: #f0e0d0; border-bottom-color: #f7d77a;
}
#guild-content {
  flex: 1; overflow-y: auto; padding: 12px 14px;
}
#guild-content.guild-chat-mode {
  display: flex; flex-direction: column; overflow: hidden;
}
.guild-loading {
  text-align: center; padding: 30px 0; color: #7a6aaa; font-size: 0.72rem;
}
.guild-empty {
  text-align: center; padding: 30px 16px; color: #7a6aaa;
  font-size: 0.72rem; line-height: 1.8;
}
.guild-notice {
  text-align: center; font-size: 0.7rem; color: #a09080;
  padding: 8px 0 12px; line-height: 1.6;
}
.guild-hint {
  text-align: center; font-size: 0.65rem; color: #7a6aaa;
  padding: 6px 0;
}
.guild-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #2a2440; background: #1a1628;
  color: var(--color-text); font-family: var(--font-pixel); font-size: 0.78rem;
  box-sizing: border-box;
}
.guild-btn {
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid #2a2440; background: #1e1a2e;
  color: var(--color-text); font-family: var(--font-pixel); font-size: 0.75rem;
  cursor: pointer; transition: background 0.15s;
}
.guild-btn:active { background: #2a2440; }
.guild-btn-primary {
  background: #3a3080; border-color: #5a50a0; color: #f0e0d0;
}
.guild-btn-primary:active { background: #4a40a0; }
.guild-btn-small { padding: 6px 12px; font-size: 0.68rem; }
.guild-btn-tiny {
  padding: 3px 8px; font-size: 0.6rem; border-radius: 6px;
  background: #2a2440; border: 1px solid #3a3460; color: #9880b8; cursor: pointer;
}
.guild-btn-danger {
  background: #3a1a1a; border-color: #6a2a2a; color: #e08080;
  width: 100%;
}
.guild-btn-disabled {
  background: #1a1628; color: #5a4a7a; cursor: not-allowed; opacity: 0.6;
}

/* 길드 생성 */
.guild-create-box {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.guild-create-box .guild-input { flex: 1; }

/* 길드 목록 */
.guild-list-title {
  font-size: 0.72rem; color: #9880b8; margin: 12px 0 8px;
  border-bottom: 1px solid #2a2440; padding-bottom: 6px;
}
.guild-list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 4px;
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 10px;
}
.guild-list-name { font-size: 0.78rem; color: #f0e0d0; }
.guild-list-meta { font-size: 0.6rem; color: #7a6aaa; margin-top: 2px; }
.guild-full { font-size: 0.6rem; color: #7a6aaa; }

/* 길드 검색 */
.guild-search-box {
  display: flex; gap: 6px; margin: 12px 0;
}
.guild-search-field { flex: 1; }
.guild-btn-outline {
  padding: 6px 12px; font-size: 0.68rem;
  background: transparent; border: 1px solid #5a50a0; color: #9880d8;
  border-radius: 8px; cursor: pointer;
}
.guild-btn-outline:active { background: #2a2060; }

/* 길드 정보 카드 */
.guild-info-card {
  background: #1e2a3e; border: 1px solid #3a5a8e; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; text-align: center;
}
.guild-info-name { font-size: 1rem; color: #f7d77a; margin-bottom: 6px; }
.guild-info-stats {
  display: flex; justify-content: center; gap: 16px;
  font-size: 0.68rem; color: #9880b8;
}

/* 기부 */
.guild-donate-box {
  display: flex; align-items: center; justify-content: space-between;
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.guild-donate-label { font-size: 0.65rem; color: #9880b8; }
.guild-donate-btns { display: flex; gap: 6px; }

/* 멤버 목록 */
.guild-members-title {
  font-size: 0.72rem; color: #9880b8; margin-bottom: 8px;
  border-bottom: 1px solid #2a2440; padding-bottom: 6px;
}
.guild-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 3px;
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 8px;
}
.guild-member-me { background: #1e2a3e; border-color: #3a5a8e; }
.guild-member-name { flex: 1; font-size: 0.75rem; color: #f0e0d0; }
.guild-member-contrib { font-size: 0.65rem; color: #9880b8; }
.guild-role-tag {
  display: inline-block; font-size: 0.55rem;
  padding: 1px 5px; border-radius: 4px; margin-right: 4px;
}
.guild-role-leader { background: #f7d77a; color: #3a3020; }
.guild-role-subleader { background: #7ab0f0; color: #1a2040; }
.guild-role-honor { background: #c080e0; color: #2a1040; }

/* 역할 변경 셀렉트 */
.guild-role-select {
  padding: 2px 4px; font-size: 0.58rem; border-radius: 4px;
  background: #1a1628; border: 1px solid #3a3460; color: #9880b8;
  font-family: var(--font-pixel); cursor: pointer;
}
.guild-member-actions { display: flex; gap: 4px; align-items: center; }

/* 강퇴 버튼 */
.guild-btn-tiny-kick { color: #e08080; border-color: #6a2a2a; }
.guild-btn-tiny-active { background: #3a3080; color: #f0e0d0; border-color: #5a50a0; }
.guild-btn-tiny-accept { color: #80e080; border-color: #2a6a2a; }

/* 가입방식 토글 */
.guild-joinmode-toggle {
  display: flex; justify-content: center; gap: 6px; margin-top: 8px;
}

/* 가입 신청 */
.guild-app-count {
  display: inline-block; background: #e06060; color: #fff;
  font-size: 0.55rem; padding: 0 5px; border-radius: 8px;
  margin-left: 4px;
}
.guild-app-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; margin-bottom: 3px;
  background: #2a1a2e; border: 1px solid #4a2a4a; border-radius: 8px;
}
.guild-app-info { display: flex; gap: 8px; align-items: center; }
.guild-app-name { font-size: 0.72rem; color: #f0e0d0; }
.guild-app-level { font-size: 0.6rem; color: #9880b8; }
.guild-app-btns { display: flex; gap: 4px; }

/* 퀘스트 */
.guild-quest-section {
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.guild-quest-title {
  font-size: 0.8rem; color: #f7d77a; margin-bottom: 10px;
}
.guild-quest-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 0.72rem; color: #f0e0d0;
}
.guild-quest-prog { color: #9880b8; }
.guild-quest-reward {
  font-size: 0.65rem; color: #a09080; margin: 8px 0;
  padding-top: 8px; border-top: 1px solid #2a2440;
}
.guild-quest-section .guild-btn { width: 100%; margin-top: 6px; }

/* 채팅 */
.guild-chat-messages {
  flex: 1; min-height: 0;
  overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 8px;
}
.guild-chat-msg {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 0.72rem; color: #c0b0a0; line-height: 1.5;
}
.guild-chat-me .guild-chat-name { color: #7ab0f0; }
.guild-chat-name { color: #9880b8; font-size: 0.65rem; white-space: nowrap; }
.guild-chat-name-link { cursor: pointer; text-decoration: underline; text-decoration-color: #5a4a8a; }
.guild-chat-name-link:active { color: #b0a0d0; }
.guild-chat-text { flex: 1; word-break: break-all; }
.guild-chat-time { font-size: 0.55rem; color: #5a4a7a; white-space: nowrap; }
.guild-chat-input-wrap {
  display: flex; gap: 8px; padding-top: 8px;
  border-top: 1px solid #2a2440;
  flex-shrink: 0;
}
.guild-chat-field { flex: 1; }
.guild-chat-send { white-space: nowrap; }

/* 길드전 */
.guild-war-header { text-align: center; margin-bottom: 12px; }
.guild-war-title { font-size: 0.85rem; color: #f7d77a; }
.guild-war-info { font-size: 0.6rem; color: #9880b8; margin-top: 4px; }
.guild-war-scores {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
}
.guild-war-score-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #1e1a2e;
  border: 1px solid #2a2440; border-radius: 10px;
}
.guild-war-my { background: #1e2a3e; border-color: #3a5a8e; }
.guild-war-rank { min-width: 30px; font-size: 0.75rem; color: #f7d77a; }
.guild-war-gname { flex: 1; font-size: 0.75rem; color: #f0e0d0; }
.guild-war-pts { font-size: 0.8rem; color: #f0e0d0; font-weight: bold; }
.guild-war-rules {
  background: #1a1628; border: 1px solid #2a2440; border-radius: 10px;
  padding: 12px 14px;
}
.guild-war-rules-title { font-size: 0.7rem; color: #9880b8; margin-bottom: 6px; }
.guild-war-rule { font-size: 0.62rem; color: #7a6aaa; line-height: 1.8; }

/* 버프 */
.guild-buff-header {
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.guild-buff-points {
  text-align: center; font-size: 0.78rem; color: #f7d77a;
  margin-bottom: 6px;
}
.guild-donate-inline {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.guild-donate-rate {
  font-size: 0.55rem; color: #7a6aaa;
}
.guild-buff-card {
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.guild-buff-name { font-size: 0.78rem; color: #f0e0d0; margin-bottom: 4px; }
.guild-buff-current { font-size: 0.65rem; color: #9880b8; }
.guild-buff-next { font-size: 0.65rem; color: #a09080; margin: 6px 0; }
.guild-buff-maxed {
  display: inline-block; background: #f7d77a; color: #3a3020;
  font-size: 0.6rem; padding: 2px 8px; border-radius: 4px; margin-top: 4px;
}
.guild-buff-hint { font-size: 0.6rem; color: #7a6aaa; margin-top: 6px; }

/* 염탐 */
.guild-spy-search {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.guild-spy-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 480px; overflow-y: auto;
}
.guild-spy-row {
  display: flex; align-items: center; gap: 8px;
  background: #1e1a2e; border: 1px solid #2a2440; border-radius: 8px;
  padding: 10px 12px; cursor: pointer; transition: background 0.15s;
}
.guild-spy-row:active { background: #2a2440; }
.guild-spy-mine { border-color: #f7d77a; background: #2a2620; }
.guild-spy-rank {
  font-size: 0.7rem; color: #f7d77a; min-width: 22px; text-align: center; font-weight: 700;
}
.guild-spy-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.guild-spy-name { font-size: 0.75rem; color: #f0e0d0; }
.guild-spy-meta { font-size: 0.55rem; color: #7a6aaa; }
.guild-spy-pts { font-size: 0.7rem; color: #c9926a; font-weight: 700; white-space: nowrap; }

/* ── 기능 잠금 오버레이 ── */
.feature-lock-overlay {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: 40px 20px;
}
.feature-lock-card {
  text-align: center; padding: 36px 28px; border-radius: 18px;
  background: linear-gradient(135deg, #2a2235 60%, #3a2a4a);
  border: 2px solid #5a4a6a; box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  max-width: 260px; width: 100%;
}
.feature-lock-icon {
  font-size: 3rem; margin-bottom: 12px;
  animation: lockPulse 2s ease-in-out infinite;
}
@keyframes lockPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 1; }
}
.feature-lock-title {
  font-size: 1.15rem; font-weight: bold; color: #f0e0c0; margin-bottom: 10px;
}
.feature-lock-msg {
  font-size: 0.85rem; color: #c8a0e0; margin-bottom: 8px;
}
.feature-lock-current {
  font-size: 0.75rem; color: #8a7a9a;
}

/* ── 이벤트 별 버튼 (top-bar-row2 내부로 이동, 기존 fixed 스타일 제거) ── */

/* ── 이벤트 패널 ── */
#event-panel {
  border: 1.5px solid #e6a020;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(230,160,32,0.08);
}
/* 이벤트 패널 전체 픽셀 폰트 */
#event-panel, #event-panel * { font-family: var(--font-pixel); }
#event-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2a1f3a, #3a2850);
  border-bottom: 1.5px solid #e6a020;
}
#event-header button {
  background: none; border: none; color: #e6a020; font-size: 0.9rem; cursor: pointer;
}
#event-header span { font-size: 1rem; font-weight: bold; color: #ffe066; }
#event-content { padding: 12px; overflow-y: auto; max-height: calc(100vh - 50px); }

.evt-banner {
  text-align: center; padding: 18px 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, #2a1a30, #3a2050);
  border-radius: 12px; border: 1px solid #e6a020;
}
.evt-banner-title { font-size: 1.2rem; font-weight: bold; color: #ffe066; margin-bottom: 4px; }
.evt-banner-period { font-size: 0.75rem; color: #c8a0e0; }

.evt-section {
  background: #1e1730; border-radius: 12px; padding: 14px;
  margin-bottom: 12px; border: 1px solid rgba(230,160,32,0.3);
}
.evt-section-title {
  font-size: 0.85rem; font-weight: bold; color: #e6a020;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(230,160,32,0.2);
}
.evt-empty { text-align: center; padding: 40px; color: #8a7a9a; }

/* 일일 보상 */
.evt-daily {
  display: flex; align-items: center; justify-content: space-between;
}
.evt-daily span { font-size: 0.8rem; color: #d0c0a0; }
.evt-claim-btn {
  padding: 6px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 0.75rem; font-weight: bold;
  background: linear-gradient(135deg, #ffe066, #e6a020); color: #3a2a10;
}
.evt-claim-btn:disabled, .evt-claim-btn.claimed {
  background: #3a3050; color: #7a6a8a; cursor: default;
}
.evt-claim-btn.disabled { background: #3a3050; color: #7a6a8a; cursor: default; }

/* 도감 마일스톤 */
.evt-milestones { display: flex; flex-direction: column; gap: 6px; }
.evt-milestone {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #221a35; border-radius: 8px; font-size: 0.75rem;
  border: 1px solid rgba(230,160,32,0.15);
}
.evt-milestone.reached { background: #2a2545; border-color: rgba(230,160,32,0.3); }
.evt-milestone.claimed { opacity: 0.5; }
.evt-ms-count { color: #e6a020; min-width: 40px; font-weight: bold; }
.evt-ms-reward { color: #a0c0a0; flex: 1; }
.evt-ms-btn {
  padding: 4px 12px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.65rem; background: linear-gradient(135deg, #ffe066, #e6a020); color: #3a2a10; font-weight: bold;
}
.evt-ms-btn:disabled { background: #3a3050; color: #7a6a8a; cursor: default; }
.evt-ms-btn.claimed { background: #4a6a4a; color: #a0d0a0; }

/* 선착순 */
.evt-fulldex { font-size: 0.8rem; }
.evt-fulldex-progress { color: #c0b0d0; margin-bottom: 8px; }
.evt-fulldex-ranking {
  background: #221a35; border-radius: 8px; padding: 8px; margin-bottom: 8px;
  border: 1px solid rgba(230,160,32,0.15);
}
.evt-fulldex-row { color: #e6a020; padding: 3px 0; font-size: 0.75rem; }
.evt-fulldex-empty { color: #6a5a8a; font-size: 0.75rem; margin-bottom: 8px; }
.evt-fulldex-done { color: #a0d0a0; font-size: 0.75rem; margin-top: 6px; }

/* 퀘스트 */
.evt-quests { display: flex; flex-direction: column; gap: 6px; }
.evt-quest {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: #221a35; border-radius: 8px;
  border: 1px solid rgba(230,160,32,0.15);
}
.evt-quest.claimed { opacity: 0.5; }
.evt-quest-info { display: flex; align-items: center; gap: 6px; }
.evt-quest-check { font-size: 0.8rem; }
.evt-quest-label { font-size: 0.75rem; color: #d0c0e0; }
.evt-quest-right { display: flex; align-items: center; gap: 8px; }
.evt-quest-reward { font-size: 0.65rem; color: #a0c0a0; }
.evt-quest-btn {
  padding: 4px 12px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.65rem; background: linear-gradient(135deg, #ffe066, #e6a020); color: #3a2a10; font-weight: bold;
}
.evt-quest-btn:disabled { background: #3a3050; color: #7a6a8a; cursor: default; }
.evt-quest-btn.claimed { background: #4a6a4a; color: #a0d0a0; }
.evt-quest.evt-allclear {
  background: linear-gradient(135deg, #2a2040, #302010);
  border: 1px solid rgba(247, 215, 122, 0.3);
  margin-top: 6px;
}
.evt-quest.evt-allclear .evt-quest-label { color: #f7d77a; font-weight: 600; }
.evt-quest.evt-allclear .evt-quest-reward { color: #f7d77a; }

/* ── 거래소 ── */
#market-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: linear-gradient(135deg, #1a2030, #2a3050);
  border-bottom: 1px solid #4a5a7a;
}
#market-header button {
  background: none; border: none; color: #90b0d0; font-size: 0.9rem; cursor: pointer;
}
#market-header span { font-size: 1rem; font-weight: bold; color: #e0d0c0; }

#market-tabs {
  display: flex; background: #1a1a2a; border-bottom: 1px solid #3a3a5a;
}
.market-tab {
  flex: 1; padding: 10px; border: none; background: none;
  color: #8a8aaa; font-size: 0.8rem; cursor: pointer; text-align: center;
}
.market-tab.active {
  color: #90d0ff; border-bottom: 2px solid #90d0ff; font-weight: bold;
}

#market-content { padding: 12px; overflow-y: auto; max-height: calc(100vh - 100px); }
.mkt-loading { text-align: center; padding: 30px; color: #8a8aaa; }
.mkt-empty { text-align: center; padding: 40px; color: #6a6a8a; font-size: 0.85rem; }

/* 수익 수령 배너 */
.mkt-inbox-banner {
  background: linear-gradient(135deg, #3a4a20, #4a5a30); color: #d0e090;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 10px;
  font-size: 0.8rem; cursor: pointer; text-align: center;
  border: 1px solid #6a7a40;
}

/* 필터바 */
.mkt-filter-bar {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.mkt-filter-select, .mkt-sort-select {
  flex: 1; padding: 7px 8px; border-radius: 8px; border: 1px solid #3a3a5a;
  background: #1a1a2a; color: #c0c0d0; font-size: 0.75rem;
}

/* 물품 리스트 */
.mkt-list { display: flex; flex-direction: column; gap: 8px; }
.mkt-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #1e1e30; border-radius: 10px;
  border: 1px solid #3a3a5a;
}
.mkt-item-mine { border-color: #4a5a7a; }
.mkt-item-left { display: flex; align-items: center; gap: 10px; }
.mkt-item-emoji { font-size: 1.5rem; }
.mkt-item-info { display: flex; flex-direction: column; }
.mkt-item-name { font-size: 0.8rem; color: #d0d0e0; font-weight: bold; }
.mkt-item-seller { font-size: 0.65rem; color: #7a7a9a; }
.mkt-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mkt-item-price { font-size: 0.85rem; color: #f0d070; font-weight: bold; }
.mkt-item-unit { font-size: 0.6rem; color: #8a8aaa; }
.mkt-buy-btn {
  padding: 5px 14px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 0.7rem; font-weight: bold;
  background: linear-gradient(135deg, #70b0ff, #5090e0); color: #fff;
}
.mkt-cancel-btn {
  padding: 5px 12px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 0.7rem; background: #4a3040; color: #e0a0a0;
}

/* 판매 폼 */
.mkt-sell-section { padding: 4px; }
.mkt-sell-title {
  font-size: 0.9rem; font-weight: bold; color: #d0c0e0; margin-bottom: 12px;
}
.mkt-sell-form {
  display: flex; flex-direction: column; gap: 8px;
}
.mkt-sell-form label { font-size: 0.75rem; color: #9a9ab0; }
.mkt-sell-form select, .mkt-sell-form input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid #3a3a5a;
  background: #1a1a2a; color: #d0d0e0; font-size: 0.8rem;
}
.mkt-sell-summary {
  font-size: 0.75rem; color: #a0c0a0; min-height: 18px;
}
.mkt-sell-btn {
  padding: 10px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 0.85rem; font-weight: bold;
  background: linear-gradient(135deg, #70b0ff, #5090e0); color: #fff;
}
.mkt-sell-fee-note {
  font-size: 0.65rem; color: #7a7a9a; margin-top: 8px; text-align: center;
}

/* 판매 서브타이틀 */
.mkt-sell-subtitle {
  font-size: 0.8rem; font-weight: bold; color: #b0c0d0;
  margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #2a2a4a;
}

/* 인스턴스 아이템 리스트 */
.mkt-instance-list { display: flex; flex-direction: column; gap: 6px; }
.mkt-instance-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #1e1e30; border-radius: 8px; border: 1px solid #3a3a5a;
}
.mkt-instance-icon { font-size: 1.2rem; }
.mkt-instance-name { flex: 1; font-size: 0.75rem; color: #d0d0e0; }
.mkt-instance-price {
  width: 80px; padding: 5px 6px; border-radius: 6px; border: 1px solid #3a3a5a;
  background: #1a1a2a; color: #d0d0e0; font-size: 0.75rem; text-align: right;
}
.mkt-instance-sell-btn {
  padding: 5px 10px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.65rem; font-weight: bold;
  background: linear-gradient(135deg, #70b0ff, #5090e0); color: #fff;
}

/* 내 물품 */
.mkt-my-title {
  font-size: 0.9rem; font-weight: bold; color: #d0c0e0; margin-bottom: 10px;
}

/* ── 거래소 판매 탭 카드 (v22 개편) ── */
.mkt-sell-wrap { padding: 2px; }
.mkt-sell-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 0.9rem; font-weight: bold; color: #d0c0e0; margin-bottom: 12px;
}
.mkt-sell-head-sub { font-size: 0.62rem; color: #7a7a9a; font-weight: normal; }
.mkt-sell-group-label {
  font-size: 0.72rem; color: #8a8ab0; font-weight: bold;
  margin: 16px 0 6px; padding-left: 2px;
}
.mkt-sell-group-note { font-size: 0.6rem; color: #6a6a8a; font-weight: normal; }
.mkt-sell-cards { display: flex; flex-direction: column; gap: 8px; }
.mkt-sc {
  background: #1e1e30; border: 1px solid #3a3a5a; border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.mkt-sc-top { display: flex; align-items: center; gap: 10px; }
.mkt-sc-icon { font-size: 1.5rem; display: flex; align-items: center; flex-shrink: 0; }
.mkt-sc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mkt-sc-name { font-size: 0.82rem; color: #d8d8e8; font-weight: bold; }
.mkt-sc-owned { font-size: 0.64rem; color: #8a8aaa; }
.mkt-sc-equipped { color: #e8a34e; font-size: 0.58rem; }
.mkt-sc-form { display: flex; gap: 6px; }
.mkt-sc-input {
  padding: 7px 8px; border-radius: 8px; border: 1px solid #3a3a5a;
  background: #15151f; color: #d0d0e0; font-size: 0.74rem; text-align: right;
  min-width: 0;
}
.mkt-sc-input:disabled { opacity: 0.4; }
.mkt-sc-qty { width: 62px; flex-shrink: 0; }
.mkt-sc-price { flex: 1; }
.mkt-sc-btn {
  flex-shrink: 0;
  padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 0.72rem; font-weight: bold;
  background: linear-gradient(135deg, #70b0ff, #5090e0); color: #fff;
}
.mkt-sc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mkt-sc-btn:active:not(:disabled) { filter: brightness(0.9); }

/* 거래소 구매 목록 — 카드 폴리시 */
.mkt-item { border-radius: 12px; padding: 11px 13px; }
.mkt-item-emoji { display: flex; align-items: center; }
.mkt-buy-btn { padding: 7px 18px; }

/* ── 칭호 도감 탭 ─────────────────────────────────────── */

.title-header {
  text-align: center; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid #2a2a4a;
}
.title-count {
  font-size: 0.85rem; color: #a0a0c0; margin-bottom: 6px;
}
.title-equipped {
  font-size: 0.8rem; color: #c0c0e0;
}
.title-unequip-btn {
  margin-left: 8px; padding: 3px 10px; border-radius: 6px;
  border: 1px solid #ff6b6b; background: transparent; color: #ff6b6b;
  font-size: 0.65rem; cursor: pointer; transition: all 0.2s;
}
.title-unequip-btn:hover { background: #ff6b6b22; }

.title-grade-section {
  margin-bottom: 16px;
}
.title-grade-label {
  font-size: 0.8rem; font-weight: bold; margin-bottom: 8px;
  padding-left: 4px; border-left: 3px solid currentColor; padding-bottom: 2px;
}

.title-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

.title-card {
  padding: 10px 8px; border-radius: 10px; text-align: center;
  border: 1px solid #3a3a5a; background: #1a1a2e; transition: all 0.2s;
  position: relative; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.title-card.unlocked {
  cursor: pointer; border-color: #4a4a7a;
  background: linear-gradient(135deg, #1e1e38, #24243e);
}
.title-card.unlocked:hover {
  transform: translateY(-2px); border-color: #6a6aaa;
  box-shadow: 0 4px 12px rgba(100, 100, 200, 0.15);
}
.title-card.equipped {
  border-color: #ffd700; background: linear-gradient(135deg, #2a2a1e, #302a18);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}
.title-card.locked {
  opacity: 0.45;
  cursor: pointer;
  user-select: none;
}
.title-card.locked.title-card-hidden { cursor: default; }
.title-card.locked:active { opacity: 0.65; }

/* v20.1: 칭호 잠금 힌트 — 길게 누르는 동안만 표시 */
.title-lock-hint {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1c1814;
  border: 1px solid #5c5040;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.65rem;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  max-width: 220px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s;
}
.title-lock-hint.hidden { opacity: 0; pointer-events: none; }
.title-lock-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #5c5040;
}

.title-name {
  font-size: 0.72rem; font-weight: bold; line-height: 1.3;
  word-break: keep-all;
}
.title-lock-icon {
  font-size: 0.7rem; margin-top: 4px;
}
.title-equipped-tag {
  font-size: 0.55rem; color: #ffd700; margin-top: 4px;
  background: #ffd70015; padding: 1px 6px; border-radius: 4px;
}

/* 칭호 뱃지 (닉네임 옆) */
.title-badge {
  font-size: 0.65rem; font-weight: bold; margin-left: 4px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.08); vertical-align: middle;
}

/* ── AI 판정 대기 중 이펙트 펄스 ── */
@keyframes evo-hold-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* ── 튜토리얼 트랜지션 로딩 ── */
#tut-transition {
  position: fixed; inset: 0; z-index: 9500;
  background: linear-gradient(180deg, #0e0c1a 0%, #1a1530 50%, #0e0c1a 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.6s ease-out;
}
#tut-transition.hidden { display: none; }
#tut-transition.fade-out { opacity: 0; pointer-events: none; }

.tut-tr-inner {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  width: 80%; max-width: 320px;
}

/* 도트 바운스 로딩 */
.tut-tr-onion {
  display: flex; gap: 10px; align-items: flex-end; height: 40px;
}
.tut-tr-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #c8a0e8;
  animation: tut-tr-bounce 1s ease-in-out infinite;
}
.tut-tr-dot:nth-child(2) { animation-delay: 0.15s; background: #e0c0ff; }
.tut-tr-dot:nth-child(3) { animation-delay: 0.3s; background: #a080d0; }
@keyframes tut-tr-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-18px); opacity: 1; }
}

/* 프로그레스 바 */
.tut-tr-bar-wrap {
  width: 100%; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
#tut-tr-bar {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #8060c0, #c8a0e8);
  transition: width 0.3s ease-out;
}

/* 팁 텍스트 */
#tut-tr-tip {
  font-size: 0.78rem; color: #a090c0; text-align: center;
  min-height: 2.4em; line-height: 1.5;
  white-space: pre-line;
  opacity: 1; transition: opacity 0.3s ease;
}
#tut-tr-tip.tip-fade { opacity: 0; }

/* 스킵 버튼 (튜토리얼 파트1용) */
#tut1-skip-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 100;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.6);
  font-size: 0.7rem; font-weight: 600;
  padding: 4px 12px; border-radius: 14px;
  cursor: pointer;
}
#tut1-skip-btn:active {
  background: rgba(255,255,255,0.25); color: #fff;
}

/* ── 성장 게이지 바 (pot view) ── */
#grown-gauges {
  width: 100%;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.grown-gauge-row {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
}
.grown-gauge-label {
  font-size: 0.65rem; color: #c8b8a0;
  min-width: 58px; text-align: right;
  font-family: var(--font-pixel);
}
.grown-gauge-bar-bg {
  flex: 1; height: 10px;
  background: #1a1814;
  border: 1px solid #3c3428;
  border-radius: 5px;
  overflow: hidden;
}
.grown-gauge-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.grown-gauge-pct {
  font-size: 0.6rem; color: #8a7d6c;
  min-width: 32px; text-align: right;
  font-family: var(--font-pixel);
}

/* ── 독립 카드 게이지 바 ── */
.indep-card-gauges {
  width: 100%;
  background: #1a1420;
  border: 1px solid #2a2040;
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin-top: 4px;
}
.indep-gauges-title {
  font-size: 0.65rem; color: #a090c0;
  text-align: center;
  margin-bottom: 8px;
  font-family: var(--font-pixel);
}
.indep-gauge-row {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  margin-bottom: 4px;
}
.indep-gauge-row.indep-gauge-trigger {
  background: rgba(200, 168, 112, 0.08);
  border-radius: 6px;
  padding: 2px 4px;
  margin-left: -4px; margin-right: -4px;
}
.indep-gauge-row.indep-gauge-trigger .indep-gauge-label {
  color: #f0d080;
}
.indep-gauge-row.indep-gauge-trigger .indep-gauge-pct {
  color: #f0d080;
  font-weight: bold;
}
.indep-gauge-label {
  font-size: 0.62rem; color: #b0a0c0;
  min-width: 54px; text-align: right;
  font-family: var(--font-pixel);
}
.indep-gauge-bar-bg {
  flex: 1; height: 8px;
  background: #0e0a16;
  border: 1px solid #2a2040;
  border-radius: 4px;
  overflow: hidden;
}
.indep-gauge-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.indep-gauge-pct {
  font-size: 0.58rem; color: #8070a0;
  min-width: 30px; text-align: right;
  font-family: var(--font-pixel);
}

/* ── 상호작용 보상 파티클 ── */
.interaction-reward-particle {
  position: absolute;
  font-size: 0.8rem;
  font-family: var(--font-pixel);
  color: #ffe066;
  text-shadow: 0 0 6px #c8a040, 0 1px 2px #000;
  pointer-events: none;
  white-space: nowrap;
  z-index: 200;
  animation: reward-float 1.4s ease-out forwards;
}

@keyframes reward-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-50px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.9); }
}

/* ── 모달 박스 공통 ── */
.modal-box {
  background: #1c1828;
  border: 1px solid #3a3060;
  border-radius: 16px;
  padding: 20px;
  max-width: 320px;
  width: 90%;
  position: relative;
  animation: fade-in 0.3s ease;
}
.modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; color: #9880b8;
  font-size: 1.2rem; cursor: pointer;
}

/* ── 길드전 드릴다운 ── */
.guild-war-clickable { cursor: pointer; transition: background 0.15s; }
.guild-war-clickable:active { background: #2a2450; }
.guild-war-arrow { color: #5a4a8a; font-size: 1rem; margin-left: 4px; }
.guild-war-drilldown { display: flex; flex-direction: column; gap: 8px; }
.guild-war-back { align-self: flex-start; margin-bottom: 4px; }
.guild-war-drill-title {
  font-size: 0.8rem; color: #f7d77a; margin-bottom: 4px;
}
.guild-war-member-list { display: flex; flex-direction: column; gap: 4px; }
.guild-war-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #1e1a2e;
  border: 1px solid #2a2440; border-radius: 10px;
  cursor: pointer; transition: background 0.15s;
}
.guild-war-member-row:active { background: #2a2450; }
.guild-war-mname { flex: 1; font-size: 0.75rem; color: #f0e0d0; }

/* ── 유저 프로필 모달 ── */
.profile-modal-box { max-width: 300px; }
.profile-card { display: flex; flex-direction: column; gap: 16px; }
.profile-header {
  display: flex; align-items: center; gap: 14px;
}
.profile-onion-img {
  width: 56px; height: 56px; object-fit: contain;
  background: #12101a; border-radius: 12px; padding: 6px;
}
.profile-info { display: flex; flex-direction: column; gap: 4px; }
.profile-name { font-size: 0.9rem; color: #f0e0d0; font-weight: bold; }
.profile-level { font-size: 0.72rem; color: #9880b8; }
.profile-stats {
  display: flex; gap: 12px; justify-content: center;
  background: #12101a; border-radius: 12px; padding: 12px 16px;
}
.profile-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1;
}
.profile-stat-label { font-size: 0.6rem; color: #7a6aaa; }
.profile-stat-value { font-size: 0.85rem; color: #f0e0d0; font-weight: bold; }
.profile-pop-plus { color: #7ae87a; }
.profile-pop-minus { color: #e87a7a; }
.profile-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.profile-vote-section {
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.profile-vote-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid #3a3060;
  background: #1e1a2e; color: #f0e0d0; font-size: 0.75rem;
  cursor: pointer; transition: background 0.15s;
}
.profile-vote-btn:active:not(.disabled) { background: #3a3060; }
.profile-vote-btn.disabled { opacity: 0.35; cursor: default; }
.profile-vote-up { border-color: #3a6030; }
.profile-vote-up:active:not(.disabled) { background: #2a4020; }
.profile-vote-down { border-color: #603030; }
.profile-vote-down:active:not(.disabled) { background: #402020; }
.profile-vote-info { font-size: 0.6rem; color: #7a6aaa; }
.profile-visit-btn {
  padding: 10px; border-radius: 10px; border: 1px solid #3a5a8e;
  background: #1e2a3e; color: #a0c0f0; font-size: 0.78rem;
  cursor: pointer; text-align: center; transition: background 0.15s;
}
.profile-visit-btn:active { background: #2a3a5e; }

/* ── 방문하기 화면 ── */
#visit-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: #0a0818;
}
.visit-bg {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  position: relative;
}
.visit-bg-custom { background-color: #0a0818; }
.visit-pot-area {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.visit-pot-wrap {
  position: relative; display: flex; flex-direction: column; align-items: center;
}
.visit-onion {
  width: 80px; height: 80px; object-fit: contain;
  position: relative; z-index: 2;
}
.visit-pot-img {
  width: 96px; height: 48px; object-fit: contain;
  margin-top: -12px; position: relative; z-index: 1;
}
.visit-enhance {
  position: absolute; bottom: 2px; right: -4px;
  font-size: 0.55rem; color: #f7d77a; background: #1c1828;
  padding: 1px 5px; border-radius: 6px; border: 1px solid #3a3060;
}
.visit-owner {
  font-size: 0.75rem; color: #9880b8; margin-top: 8px;
}
.visit-back-btn {
  position: absolute; top: 16px; left: 16px; z-index: 110;
  background: rgba(28, 24, 40, 0.85); border: 1px solid #3a3060;
  border-radius: 8px; padding: 8px 14px;
  color: #f0e0d0; font-size: 0.75rem; cursor: pointer;
}

/* 길드전 보상 수령 배너 */
.guild-war-claim-banner {
  background: linear-gradient(135deg, rgba(247, 215, 122, 0.18), rgba(160, 120, 40, 0.15));
  border: 1px solid #f7d77a;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #f7d77a;
  font-size: 0.75rem;
  font-weight: 600;
}
.guild-war-claim-btn {
  background: #f7d77a;
  color: #1a1a2e;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-pixel);
}
.guild-war-claim-btn:hover { background: #ffe090; }

/* ── BM (현질 재화 탭) ───────────────────────────────── */
.bm-welcome-banner {
  background: linear-gradient(135deg, #ff6b00 0%, #ffb347 100%);
  border: 2px solid #ffd280;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255,140,0,0.4);
  animation: bm-welcome-pulse 2s ease-in-out infinite;
}
@keyframes bm-welcome-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,140,0,0.4); }
  50%      { box-shadow: 0 0 20px rgba(255,180,70,0.7); }
}
.bm-welcome-title { font-size: 0.85rem; color: #fff; font-weight: 700; }
.bm-welcome-desc  { font-size: 0.68rem; color: #fff8e0; margin-top: 4px; line-height: 1.5; }
.bm-welcome-row   { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.bm-welcome-price { font-size: 1rem; color: #fff; font-weight: 700; }
.bm-welcome-timer { font-size: 0.72rem; color: #fff; background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 6px; }

.bm-status {
  background: #1a2a1a; border: 1px solid #3a5a3a; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px;
  font-size: 0.7rem; color: #a0d0a0; line-height: 1.8;
}

.bm-product-card {
  background: #1a1a28; border: 1px solid #3a3a5a;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.bm-grid-2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.bm-grid-2 .bm-product-card { margin-bottom: 0; }
.bm-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.bm-grid-3 .bm-product-card {
  margin-bottom: 0; padding: 8px 6px; gap: 4px;
}
.bm-grid-3 .bm-product-name { font-size: 0.68rem; }
.bm-grid-3 .bm-product-desc { font-size: 0.58rem; line-height: 1.4; }
.bm-grid-3 .bm-buy-btn { padding: 6px 4px; font-size: 0.65rem; }

.bm-em-card {
  align-items: center; justify-content: space-between;
  min-height: 140px; padding: 12px 4px !important; gap: 6px !important;
  background: linear-gradient(160deg, #1a2a28 0%, #1a1a28 100%);
  border-color: #4a7a6a;
}
.bm-em-card .bm-buy-btn {
  width: 100%; padding: 8px 2px !important; font-size: 0.72rem !important;
  box-sizing: border-box; white-space: nowrap;
}
.bm-grid-emerald { gap: 4px !important; }
.bm-em-icon { font-size: 1.6rem; line-height: 1; }
.bm-em-amount {
  font-size: 1.3rem; font-weight: 800; color: #7effc0;
  text-shadow: 0 0 6px rgba(126,255,192,0.4);
  line-height: 1;
}
.bm-em-bonus {
  font-size: 0.55rem; color: #ffd060; min-height: 0.8rem;
}
.bm-grid-2 .bm-product-name { font-size: 0.74rem; }
.bm-grid-2 .bm-product-desc { font-size: 0.62rem; }
.bm-grid-2 .bm-buy-btn { padding: 6px 8px; font-size: 0.7rem; }
.bm-product-head { display: flex; justify-content: space-between; align-items: center; }
.bm-product-name { font-size: 0.82rem; color: #f0f0ff; font-weight: 700; }
.bm-product-price { font-size: 0.82rem; color: #ffd060; }
.bm-product-desc  { font-size: 0.68rem; color: #a0a0c0; line-height: 1.6; }
.bm-price-old { text-decoration: line-through; color: #888; font-size: 0.7rem; }
.bm-price-new { color: #ff6b6b; font-weight: 700; }
.bm-sale-badge {
  background: #e04040; color: #fff; font-size: 0.58rem;
  padding: 2px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle;
}
.bm-offer-timer {
  font-size: 0.66rem; color: #ff8080;
  background: #2a1010; padding: 4px 8px; border-radius: 4px;
  align-self: flex-start;
}
.bm-buy-btn {
  background: #3a3a7a; border: 1px solid #5a5aaa; border-radius: 8px;
  color: #e0e0ff; font-family: var(--font-pixel); font-size: 0.75rem;
  padding: 8px 16px; cursor: pointer; margin-top: 4px;
}
.bm-buy-btn:active { background: #5a5aaa; }
.bm-notice {
  font-size: 0.72rem; color: #a0c0e0;
  background: #1a2030; border: 1px solid #3a4a6a;
  padding: 10px 12px; border-radius: 8px; text-align: center;
}

/* ── 랭킹/명전 TOP3 이펙트 ───────────────────────────── */
.ranking-row, .ranking-hof-row { position: relative; overflow: hidden; }

.ranking-row-gold, .ranking-hof-gold {
  background: linear-gradient(135deg, #3a2e10 0%, #5a4a18 50%, #3a2e10 100%) !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 14px rgba(255,215,0,0.55), inset 0 0 12px rgba(255,215,0,0.18);
  animation: rank-gold-pulse 2.4s ease-in-out infinite;
}
@keyframes rank-gold-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,215,0,0.55), inset 0 0 12px rgba(255,215,0,0.18); }
  50%      { box-shadow: 0 0 22px rgba(255,230,80,0.85), inset 0 0 18px rgba(255,230,80,0.28); }
}
.ranking-row-silver, .ranking-hof-silver {
  background: linear-gradient(135deg, #20242a 0%, #3a4048 50%, #20242a 100%) !important;
  border: 2px solid #c8d0d8 !important;
  box-shadow: 0 0 10px rgba(200,208,216,0.45), inset 0 0 8px rgba(200,208,216,0.12);
}
.ranking-row-bronze, .ranking-hof-bronze {
  background: linear-gradient(135deg, #2a1e12 0%, #4a3420 50%, #2a1e12 100%) !important;
  border: 2px solid #cd7f32 !important;
  box-shadow: 0 0 10px rgba(205,127,50,0.45), inset 0 0 8px rgba(205,127,50,0.15);
}

.ranking-crown {
  display: inline-block;
  font-size: 0.95rem;
  margin-right: 3px;
  animation: rank-crown-bob 2s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,215,0,0.8);
}
@keyframes rank-crown-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.ranking-rank-num { font-size: 0.85rem; font-weight: 700; }

/* 1등 전용 스파클 오버레이 */
.ranking-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,200,0.9) 0, rgba(255,255,200,0) 2px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 2px),
    radial-gradient(circle at 40% 70%, rgba(255,240,150,0.9) 0, rgba(255,240,150,0) 2px),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 2px),
    radial-gradient(circle at 25% 85%, rgba(255,255,200,0.9) 0, rgba(255,255,200,0) 2px);
  animation: rank-sparkle 1.8s linear infinite;
}
@keyframes rank-sparkle {
  0%   { opacity: 0.2; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.08); }
  100% { opacity: 0.2; transform: scale(1); }
}

.ranking-hof-row { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ranking-hof-row:hover { transform: translateY(-2px) scale(1.02); }

/* ── 상품 이름 옆 지속시간 보조 라벨 ── */
.bm-dur {
  font-size: 0.7rem;
  color: #a8b0c0;
  font-weight: 500;
  margin-left: 2px;
}

/* ── 상품 카드 가격 영역 (빗금 + 버튼) ── */
.bm-price-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; margin-top: 4px;
}
.bm-price-row .bm-price-old {
  text-align: right;
  font-size: 0.75rem;
  color: #888;
  text-decoration: line-through;
  padding-right: 4px;
}
.bm-price-row .bm-buy-btn { width: 100%; }

/* ── 기부탭 적용중 혜택 박스 ── */
.bm-active-box {
  background: linear-gradient(160deg, #1a2235 0%, #201a30 100%);
  border: 1px solid #5a6a8a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 0 14px rgba(90,150,220,0.18);
}
.bm-active-title {
  font-size: 0.8rem; font-weight: 800; color: #9ecbff;
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.bm-active-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 4px;
  font-size: 0.82rem;
}
.bm-active-row:last-child { margin-bottom: 0; }
.bm-active-icon { font-size: 1rem; }
.bm-active-name { flex: 1; color: #e8e8f0; font-weight: 600; }
.bm-active-until { color: #b8c4d8; font-size: 0.75rem; font-weight: 500; }
.bm-active-silver { border-left: 3px solid #6ec3ff; }
.bm-active-silver .bm-active-name { color: #a0d4ff; }
.bm-active-gold { border-left: 3px solid #ffd86b; }
.bm-active-gold .bm-active-name { color: #ffe89a; }

/* ── 일일 보상 모달 ── */
.daily-reward-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.daily-reward-modal {
  background: linear-gradient(160deg, #1e1a15 0%, #251f18 100%);
  border: 2px solid #d4a853;
  border-radius: 14px;
  padding: 24px 20px;
  width: 88%; max-width: 340px;
  box-shadow: 0 0 24px rgba(212,168,83,0.3);
  text-align: center;
}
.daily-reward-title {
  font-size: 1.2rem; font-weight: 800;
  color: #ffd86b; margin-bottom: 4px;
}
.daily-reward-sub { font-size: 0.75rem; color: #c8c0b0; margin-bottom: 16px; }
.daily-reward-list {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}
.daily-reward-item {
  display: flex; justify-content: space-between;
  padding: 4px 6px; font-size: 0.9rem; color: #e8dfc8;
}
.daily-reward-item.money { color: #ffd86b; font-weight: 700; }
.daily-reward-btns { display: flex; flex-direction: column; gap: 8px; }
.daily-reward-btn {
  padding: 12px; border-radius: 8px; border: none;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.daily-reward-btn-claim {
  background: linear-gradient(180deg, #d4a853 0%, #a67c2e 100%);
  color: #1a1000;
}
.daily-reward-btn-double {
  background: linear-gradient(180deg, #5a8a4a 0%, #3a6a2a 100%);
  color: #fff;
}

/* ── 채팅 회원권 닉네임 색상 ── */
.mchat-name-silver {
  color: #6ec3ff !important;
  text-shadow: 0 0 4px rgba(110,195,255,0.6), 0 0 8px rgba(110,195,255,0.35);
  animation: mchat-silver-glow 2.2s ease-in-out infinite;
  font-weight: 700;
}
@keyframes mchat-silver-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(110,195,255,0.6), 0 0 8px rgba(110,195,255,0.35); }
  50%      { text-shadow: 0 0 6px rgba(160,220,255,0.9), 0 0 14px rgba(110,195,255,0.6); }
}
.mchat-name-gold {
  color: #ffd86b !important;
  text-shadow: 0 0 4px rgba(255,216,107,0.7), 0 0 10px rgba(255,180,50,0.4);
  animation: mchat-gold-glow 1.8s ease-in-out infinite;
  font-weight: 800;
}
@keyframes mchat-gold-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(255,216,107,0.7), 0 0 10px rgba(255,180,50,0.4); }
  50%      { text-shadow: 0 0 8px rgba(255,240,160,1), 0 0 18px rgba(255,180,50,0.75); }
}

/* ── 패널 헤더 타이틀 중앙 정렬 ── */
#shop-header,
#dex-header,
#inventory-header,
#guild-header,
#ranking-header,
#market-header,
#lottery-header,
#mailbox-header,
#event-header,
#gamble-header,
#adventure-header,
#enhancement-header,
#pot-header,
#env-header,
#mg-header {
  position: relative;
}
#dex-header > span,
#inventory-header > span,
#guild-header > span,
#ranking-header > span,
#market-header > span,
#lottery-header > span,
#mailbox-header > span,
#event-header > span,
#gamble-header > span,
#adventure-header > span,
#enhancement-header > span,
#pot-header > span,
#env-header > span,
#archive-header > span,
#portal-header > span,
#mg-header > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  flex: none;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 모험 티켓 수 우측 고정 */
#adventure-daily-count {
  position: absolute !important;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* 미니게임 획득 표시 우측 고정 */
#mg-header #mg-stats {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
#mg-header #mg-hof-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* 상점 헤더 2단 레이아웃 */
#shop-header {
  min-height: 62px;
  padding: 10px 14px 10px 14px !important;
}
#shop-header > span {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  flex: none !important;
  pointer-events: none;
  white-space: nowrap;
}
#shop-header #shop-balance {
  position: absolute;
  right: 14px;
  bottom: 8px;
  justify-content: flex-end !important;
}

/* ══════════════════════════════════════════════════════════
   양파 연구 일지 — 튜토리얼 책 UI
   ══════════════════════════════════════════════════════════ */

#tutorial-panel.book-mode {
  background: radial-gradient(ellipse at center, #2a1f14 0%, #14100a 70%, #0a0805 100%);
  align-items: center;  /* 가운데 정렬 — 위아래 공간 균형 */
  justify-content: center;
  padding: 0;
}
#tutorial-panel.book-mode #tutorial-content {
  max-width: 360px;     /* 380 → 360: 폰 화면 안쪽으로 좁힘 */
  padding: 8px 10px 16px;  /* 14/14/40 → 8/10/16: 위아래 여백 대폭 축소 */
  margin: 0 auto;
}

.book-stage {
  position: relative;
  width: 100%;
  min-height: 600px;    /* 760 → 600: 위아래 콤팩트 */
  perspective: 1800px;
  perspective-origin: 50% 30%;
}

.book-page {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #f8eecd;
  background-image:
    /* 동화책 페이지 모서리 따뜻한 글로우 */
    radial-gradient(ellipse at 50% 0%, rgba(255,220,150,0.25), transparent 55%),
    /* 좌상단·우하단 차분한 음영 — 종이 깊이감 */
    radial-gradient(ellipse at 88% 8%, rgba(150,110,50,0.10), transparent 50%),
    radial-gradient(ellipse at 12% 92%, rgba(140,100,40,0.10), transparent 45%),
    /* 좌측 책 등(spine) 그림자 */
    linear-gradient(to right, rgba(120,80,30,0.16) 0%, transparent 6%, transparent 100%),
    /* 베이스 종이 톤 — 따뜻한 크림 */
    linear-gradient(135deg, #faf2d8 0%, #efe1b8 100%);
  color: #3a2614;
  padding: 18px 22px 56px;  /* 32/26/60 → 18/22/56: 위·좌우 축소, 하단 힌트 공간만 유지 */
  border-radius: 5px;
  font-family: 'Gowun Batang', 'Batang', serif;
  box-shadow:
    /* 페이지 상단 따뜻한 빛 */
    0 1px 0 rgba(255,250,235,0.95) inset,
    /* 페이지 하단 미세 음영 */
    0 -1px 0 rgba(80,50,20,0.08) inset,
    /* 페이지 그림자 — 약간 따뜻한 톤 */
    0 12px 28px rgba(40,20,5,0.55),
    /* 따뜻한 글로우 — 페이지 전체 부드럽게 */
    0 0 40px rgba(255,200,130,0.08);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: left center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* 스택 z-index: outgoing이 위, incoming이 아래로 깔림 → 종이가 들리며 새 페이지 노출 */
.book-page[data-page="current"]  { z-index: 1; }
.book-page[data-page="outgoing"] { z-index: 3; pointer-events: none; }

/* 페이지 넘김 — 종이 들리듯 회전 + 그림자/밝기 변화 */
.book-page.flip-out-next {
  animation: bookFlipOutNext 520ms cubic-bezier(0.55, 0.1, 0.5, 1) forwards;
  transform-origin: left center;
}
.book-page.flip-out-prev {
  animation: bookFlipOutPrev 520ms cubic-bezier(0.55, 0.1, 0.5, 1) forwards;
  transform-origin: right center;
}
@keyframes bookFlipOutNext {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.55);
    filter: brightness(1);
  }
  35% {
    box-shadow: -10px 14px 28px rgba(0,0,0,0.65);
    filter: brightness(0.92);
  }
  100% {
    transform: rotateY(-178deg);
    box-shadow: -28px 8px 32px rgba(0,0,0,0.4);
    filter: brightness(0.55);
  }
}
@keyframes bookFlipOutPrev {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.55);
    filter: brightness(1);
  }
  35% {
    box-shadow: 10px 14px 28px rgba(0,0,0,0.65);
    filter: brightness(0.92);
  }
  100% {
    transform: rotateY(178deg);
    box-shadow: 28px 8px 32px rgba(0,0,0,0.4);
    filter: brightness(0.55);
  }
}

/* 좌/우 탭 영역 — 페이지 위에 깔리는 invisible hit-zone */
.book-tap-left,
.book-tap-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}
.book-tap-left  { left: 0;  }
.book-tap-right { right: 0; }

/* 페이지 헤더/번호/제목 */
.book-page-header {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  color: #6b3818;  /* 좀 더 따뜻한 갈색 */
  margin-bottom: 3px;  /* 4 → 3 */
  font-weight: 600;
  /* 동화책 헤더 — 부드러운 텍스트 그림자로 종이에 묻힌 느낌 */
  text-shadow: 0 1px 0 rgba(255,250,230,0.5);
}
.book-page-num {
  text-align: center;
  font-size: 0.62rem;
  color: #8a5828;  /* 가독성 살짝 보강 */
  margin-bottom: 14px;  /* 22 → 14: 헤더-본문 간격 축소 */
  font-style: italic;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255,250,230,0.5);
}
.book-page-title {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 1.05rem;
  color: #1a1004;
  font-weight: 700;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(60,30,10,0.32);
  padding-bottom: 8px;
  letter-spacing: 0.04em;
}
.book-page-body {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.95rem;       /* 1.02 → 0.95: 살짝 축소 — 한 줄에 더 많은 글자 → "다만" 등 단어 줄 떨어짐 ↓ */
  line-height: 1.7;          /* 1.75 → 1.7: 미세 조정 */
  color: #2a1808;
  font-weight: 700;          /* 두께는 그대로 — 가독성 유지 */
  white-space: pre-wrap;
  word-break: keep-all;
  min-height: 220px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,250,230,0.45);
  text-align: center;
}
/* 삽화 있는 페이지는 본문 최소높이 축소 (삽화가 공간 차지) */
.book-page-body--fig { min-height: 140px; }  /* 180 → 140 */
/* 텍스트 많은 페이지(예: 화분 4) 줄간격 살짝 축소 */
.book-page-body--tight { line-height: 1.7; }

/* 연구 일지 삽화 행 */
.book-page-figs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  margin: 2px 0 22px;
  flex-wrap: wrap;
}
.book-page-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.book-page-fig img {
  image-rendering: pixelated;
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(80,50,20,0.28));
}
.book-page-fig.fig-lg img { width: 91px; height: 91px; }  /* 96 → 91 (5% 축소) */
/* 새싹 — 단일 이미지 (스프라이트 X). 책 / 인디케이터 / 툴팁에서 공통 사용. */
.book-fig-sprout {
  width: 64px;
  height: 56px;
  background-image: url('images/sprout_single.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(80,50,20,0.28));
}
.book-page-fig-cap {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.66rem;
  color: #5a3818;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.book-page-fig-arrow {
  align-self: center;
  font-size: 1rem;
  color: #8a6630;
  margin-bottom: 20px;
}

/* ── 페이지 1 인터랙션 — 잉크 얼룩 → 양파 등장 ── */
.book-page-fig.fig-ink-blot {
  position: relative;
  cursor: pointer;
  z-index: 6;  /* book-tap-* (5) 보다 위 — 직접 탭 받기 */
}
.book-page-fig.fig-ink-blot img,
.book-page-fig.fig-ink-blot .book-fig-sprout {
  opacity: 0;
  transform: scale(0.3);
}
.book-page-fig.fig-ink-blot::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 62px;  /* 92 → 62: 양파 크기에 맞춰 훨씬 작게 */
  background: radial-gradient(circle, #1f1208 0%, rgba(50,28,10,0.78) 38%, rgba(80,45,18,0.35) 62%, transparent 80%);
  border-radius: 50%;
  filter: blur(2px);
  animation: bookInkBlotPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bookInkBlotPulse {
  0%, 100% { transform: translateX(-50%) scale(0.92); opacity: 0.85; }
  50%      { transform: translateX(-50%) scale(1.12); opacity: 1; }
}
.book-page-fig.fig-revealed img,
.book-page-fig.fig-revealed .book-fig-sprout {
  opacity: 1;
  animation: bookFigReveal 0.75s cubic-bezier(.2,.8,.3,1.1);
}
.book-page-fig.fig-revealed::before {
  animation: bookInkScatter 0.55s ease-out forwards;
}
@keyframes bookFigReveal {
  0%   { transform: scale(0.35) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(1.18) rotate(5deg);  opacity: 1; }
  85%  { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bookInkScatter {
  0%   { transform: translateX(-50%) scale(1);   opacity: 1; filter: blur(2px); }
  50%  { transform: translateX(-50%) scale(1.6); opacity: 0.5; filter: blur(8px); }
  100% { transform: translateX(-50%) scale(2);   opacity: 0; filter: blur(14px); }
}

/* 페이지 1 탭 힌트 — 잉크 얼룩 아래 작은 안내 */
.book-fig-tap-hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: #6b3818;
  letter-spacing: 0.05em;
  font-family: 'Gowun Batang', 'Batang', serif;
  font-style: italic;
  animation: bookFigTapHintBob 1.6s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,250,230,0.5);
}
@keyframes bookFigTapHintBob {
  0%, 100% { transform: translate(-50%, 0);    opacity: 0.65; }
  50%      { transform: translate(-50%, -4px); opacity: 1; }
}
.book-page-fig.fig-revealed .book-fig-tap-hint { display: none; }

/* ── 페이지 3 인터랙션 — 어른 탭 → 게이지 차오름 → 씨앗 → 도감 등록 (게임 사이클 미리보기) ── */
.book-page-fig-gauges {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
  height: 6px;
}
.book-page-fig-gauge {
  width: 14px;
  height: 5px;
  background: #2a1f14;
  border: 1px solid #4a3624;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
}
.book-page-fig-gauge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: var(--gauge-color, #8a6630);
  transition: width 0.85s cubic-bezier(.3,.7,.4,1);
  box-shadow: 0 0 4px var(--gauge-color, #8a6630);
}
.book-page-fig-gauge.gauge-filled::before { width: 100%; }
.book-page-fig-gauge.gauge-growth { --gauge-color: #6ca545; }
.book-page-fig-gauge.gauge-smart  { --gauge-color: #4a8cd8; }
.book-page-fig-gauge.gauge-charm  { --gauge-color: #d868a8; }
.book-page-fig-gauge.gauge-toxic  { --gauge-color: #9a5ad8; }
/* 도감 등록 — 황금빛 반짝 효과 */
.book-page-fig.fig-dex-glow img {
  animation: bookDexGlow 1.4s ease;
}
@keyframes bookDexGlow {
  0%   { filter: brightness(1); transform: scale(1); }
  35%  { filter: brightness(1.8) drop-shadow(0 0 12px #f8d878); transform: scale(1.18); }
  70%  { filter: brightness(1.3) drop-shadow(0 0 6px #f0c868); transform: scale(0.96); }
  100% { filter: brightness(1.05); transform: scale(1); }
}
/* 페이지 3 도감 등록 메시지 — 책 안 떠오르는 작은 토스트 */
.book-page-dex-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #6b3818;
  background: rgba(255, 244, 214, 0.95);
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid #c8a868;
  box-shadow: 0 4px 14px rgba(80,50,20,0.35), 0 0 24px rgba(248,216,120,0.5);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  animation: bookDexToast 2.4s ease forwards;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
@keyframes bookDexToast {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -65%) scale(0.95); }
}

/* ── 페이지 2 인터랙션 — 씨앗 탭 → 새싹 → 어른 순차 reveal ── */
.book-page-fig.fig-grow-locked img,
.book-page-fig.fig-grow-locked .book-fig-sprout {
  filter: grayscale(1) brightness(0.35);
  opacity: 0.42;
  transition: filter 0.7s ease, opacity 0.7s ease;
}
.book-page-fig.fig-grow-locked .book-page-fig-cap {
  color: #8a7858;
  opacity: 0.6;
  transition: color 0.7s ease, opacity 0.7s ease;
}
.book-page-fig-arrow.arrow-locked {
  color: #8a7858;
  opacity: 0.35;
  transition: color 0.7s ease, opacity 0.7s ease, transform 0.5s ease;
}
.book-page-fig.fig-grow-active {
  cursor: pointer;
  position: relative;
  z-index: 6;
}
.book-page-fig.fig-grow-active::after {
  content: '↑';
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: #6b3818;
  font-weight: bold;
  animation: bookFigTapHintBob 1.4s ease-in-out infinite;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,250,230,0.5);
}
.book-page-fig.fig-grow-revealed img,
.book-page-fig.fig-grow-revealed .book-fig-sprout {
  filter: none;
  opacity: 1;
  animation: bookFigReveal 0.7s cubic-bezier(.2,.8,.3,1.1);
}
.book-page-fig.fig-grow-revealed .book-page-fig-cap {
  color: #5a3818;
  opacity: 1;
}
.book-page-fig.fig-grow-revealed::after,
.book-page-fig.fig-grow-active.fig-grow-done::after { display: none; }
.book-page-fig-arrow.arrow-revealed {
  color: #8a6630;
  opacity: 1;
  animation: bookArrowGlow 0.55s ease;
}
@keyframes bookArrowGlow {
  0%   { transform: scale(0.7); opacity: 0.4; }
  60%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── 책 페이지 상단 진행 인디케이터 (씨앗·새싹·어른) ── */
.book-stage-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 8px 12px;
  background: rgba(255, 244, 214, 0.4);
  border: 1px solid rgba(120, 80, 30, 0.18);
  border-radius: 24px;
  width: fit-content;
}
.book-stage-step {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.7s ease, opacity 0.7s ease, transform 0.3s ease;
}
.book-stage-step img.pixel-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.book-stage-step .book-fig-sprout {
  /* 인디케이터용 작은 새싹 — 단일 이미지 축소 */
  width: 28px;
  height: 28px;
  background-size: contain;
  background-position: center;
}
.book-stage-step[data-state="locked"] {
  filter: grayscale(1) brightness(0.35);
  opacity: 0.32;
}
.book-stage-step[data-state="done"] {
  filter: grayscale(0.6) brightness(0.7);
  opacity: 0.62;
}
.book-stage-step[data-state="active"] {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
  animation: bookStageActivePulse 1.8s ease-in-out infinite;
}
@keyframes bookStageActivePulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50%      { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,220,150,0.7)); }
}
.book-stage-arrow {
  font-size: 0.9rem;
  color: #8a6630;
  opacity: 0.65;
  font-weight: bold;
}

/* 페이지 3 — 새싹 4기운 게이지 (가로 크게) */
.sprout-gauges {
  width: 200px;
  height: 10px;
  gap: 4px;
  margin: 6px 0 4px;
}
.sprout-gauges .book-page-fig-gauge {
  flex: 1;
  width: auto;
  height: 8px;
}
.sprout-gauges .book-page-fig-gauge::before {
  width: var(--sprout-fill, 0);
  transition: width 0.5s cubic-bezier(.3,.7,.4,1);
}

/* ── 책 페이지 인터랙티브 영역 (Phase 2 — 페이지 2 물주기 등) ── */
.book-page-interactive {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 6;
}
.book-action-btn {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.95rem;
  color: #f8eecd;
  background: linear-gradient(135deg, #6b3818 0%, #4a2410 100%);
  border: 1px solid #8a4828;
  border-radius: 22px;
  padding: 10px 26px;
  cursor: pointer;
  box-shadow:
    0 3px 8px rgba(40,20,5,0.45),
    inset 0 1px 0 rgba(255,220,150,0.25);
  letter-spacing: 0.04em;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.book-action-btn:not(:disabled):hover,
.book-action-btn:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(40,20,5,0.5);
}
.book-action-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.book-action-btn--pulse {
  animation: bookActionBtnPulse 1.4s ease-in-out infinite;
}
@keyframes bookActionBtnPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(40,20,5,0.45), inset 0 1px 0 rgba(255,220,150,0.25), 0 0 0 rgba(255,200,130,0); }
  50%      { box-shadow: 0 3px 8px rgba(40,20,5,0.45), inset 0 1px 0 rgba(255,220,150,0.25), 0 0 16px rgba(255,200,130,0.55); }
}
.book-action-btn--done {
  background: linear-gradient(135deg, #4a3624 0%, #2e1f12 100%);
  border-color: #5a4434;
}
/* 6초 성장 바 — 시작 로딩 바 미니 버전 */
.book-grow-bar {
  width: 200px;
  height: 8px;
  background: #2a1f14;
  border: 1px solid #5a3818;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  position: relative;
}
.book-grow-bar.hidden { display: none; }
.book-grow-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6ca545 0%, #8cc560 50%, #a8e078 100%);
  box-shadow: 0 0 8px rgba(168,224,120,0.6);
  transition: width 6s linear;
  border-radius: 4px;
}
/* 인터랙션 메시지 — 책 안 작은 안내 */
.book-action-msg {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.82rem;
  color: #6b3818;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255,250,230,0.5);
  letter-spacing: 0.04em;
  text-align: center;
  min-height: 1.2em;
  transition: opacity 0.3s ease;
}
.book-action-msg.hidden { display: none; }
.book-action-msg--fade {
  animation: bookActionMsgFade 2s ease;
}
@keyframes bookActionMsgFade {
  0%   { opacity: 0; transform: translateY(4px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0.7; }
}
/* 우측 탭 비활성 — noTapNav 페이지에서 우측 탭으로 진행 막음 */
.book-tap-right.book-tap-disabled {
  pointer-events: none;
  cursor: default;
}

/* 타이핑 커서 */
.book-typing-cursor {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  background: #1a1004;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: bookCursorBlink 0.85s step-end infinite;
}
@keyframes bookCursorBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 검열된 부분 — 검은 박스 (구식 [REDACT:N], 현재 미사용) */
.book-redact {
  display: inline-block;
  background: #1a1004;
  color: transparent;
  border-radius: 1px;
  padding: 0 2px;
  margin: 0 1px;
  user-select: none;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* ㅁ 자리 채움 — 폰트 무관 정사각형 박스 */
.book-square {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  background: #1a1004;
  vertical-align: -0.05em;
  margin: 0 1px;
  border-radius: 1px;
  user-select: none;
}

/* 페이지 하단 힌트 (다음/이전) */
/* 다음 힌트 — 우측 정렬 (오른쪽 탭 = 다음 페이지) */
.book-page-hint {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: 0.92rem;
  color: #3a2210;
  font-style: normal;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,250,230,0.6);
  letter-spacing: 0.06em;
  animation: bookHintPulse 1.6s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}
@keyframes bookHintPulse {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50%      { opacity: 1.0;  transform: translateY(-2px); }
}
.book-page-hint.hidden { display: none; }

/* 이전 힌트 — 좌측 정렬 (왼쪽 탭 = 이전 페이지). 다음보다 작고 흐릿하게 (사용자 의도: 좌우 구분 명확) */
.book-page-hint-prev {
  position: absolute;
  bottom: 18px;
  left: 22px;
  font-size: 0.72rem;
  color: #6a4828;
  font-style: italic;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255,250,230,0.5);
  animation: bookHintPulse 1.8s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}
.book-page-hint-prev.hidden { display: none; }

/* 페이지 1 — 잉크 얼룩 잠금 상태 (탭 비활성 + 힌트 X) */
.book-page-fig.fig-ink-locked {
  cursor: default;
  z-index: 5;  /* 첫 fig(z-index 6)보다 아래 — 탭 가로채기 X */
}
/* 페이지 1만 — 씨앗 살짝 작게 */
.book-page[data-page-id="1"] .book-page-fig[data-fig-slot="0"] img {
  width: 52px;
  height: 52px;
}
/* 페이지 1만 — 양파(튜토리얼) 살짝 아래로 */
.book-page[data-page-id="1"] .book-page-fig[data-fig-slot="2"] {
  margin-top: 8px;
}

/* 책 메시지 글자별 wave — 시간 흐름 시각화 (페이지 3·4 게이지 진행 중) */
.book-msg-wave-char {
  display: inline-block;
  animation: bookMsgWave 1.8s ease-in-out infinite;
}
@keyframes bookMsgWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* 책 모드 도감 가이드 — 우측 상단에 작게 띄우는 안내 (스크롤 + 클릭) */
.book-dex-guide {
  position: absolute;
  top: 56px;     /* 패널 헤더 아래 */
  right: 12px;
  z-index: 9550;  /* 도감 패널(9500) 위 */
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(20, 14, 8, 0.78);
  border: 1px solid rgba(180, 140, 80, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.7rem;
  color: #f0d8a8;
  letter-spacing: 0.04em;
  pointer-events: none;
  animation: bookDexGuideIn 600ms ease-out;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  max-width: 180px;
  text-align: right;
}
.book-dex-guide-line {
  white-space: nowrap;
}
@keyframes bookDexGuideIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.book-dex-guide.book-dex-guide-fade {
  animation: bookDexGuideOut 700ms ease forwards;
}
@keyframes bookDexGuideOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* 검은 배경 인트로 — 표지 탭 후 책 펼치기 전 시네마틱 도입부 */
.book-intro-scene {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 40px 24px;
  opacity: 0;
  animation: bookIntroFadeIn 800ms ease forwards;
  cursor: pointer;
}
@keyframes bookIntroFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.book-intro-scene.book-intro-fadeout {
  animation: bookIntroFadeOut 600ms ease forwards;
}
@keyframes bookIntroFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* 빨려들어가는 신비 전환 — 화면이 중심으로 모이며 사라짐 (책으로 흡수되는 듯) */
/* 회전·왜곡 없이 깔끔한 zoom-out + blur로 세련되게 */
.book-intro-scene.book-intro-suck-in {
  animation: bookIntroSuckIn 700ms cubic-bezier(0.5, 0.0, 0.75, 0.0) forwards;
  transform-origin: 50% 50%;
}
@keyframes bookIntroSuckIn {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.15);
    filter: blur(5px);
  }
}
/* 인트로 줄 텍스트 — 부드러운 fade (왜곡 없음) */
.book-intro-scene.book-intro-suck-in .book-intro-line {
  animation: bookIntroLineSuck 450ms ease-out forwards;
}
@keyframes bookIntroLineSuck {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.book-intro-line {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 1.1rem;
  color: #d8c498;
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1.7;
  opacity: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 0 14px rgba(220,170,90,0.25);
  max-width: 480px;
}
/* 첫 줄은 자동 등장 (살짝 더 천천히 음미하게). 2·3번째 줄은 탭 시 .intro-line-shown 트리거. */
.book-intro-line-1 { animation: bookIntroLineIn 1800ms ease 700ms forwards; }
.book-intro-line-2.intro-line-shown,
.book-intro-line-3.intro-line-shown { animation: bookIntroLineIn 1600ms ease forwards; }
@keyframes bookIntroLineIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* "탭하여 계속" 힌트 — 화면 하단 작게 펄스 */
.book-intro-tap-hint {
  position: absolute;
  bottom: 36px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.78rem;
  color: #d8c498;
  letter-spacing: 0.2em;
  opacity: 0;
  animation: bookIntroTapHintIn 1200ms ease 2400ms forwards, bookHintPulse 1.8s ease-in-out 3600ms infinite;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(220,170,90,0.25);
}
@keyframes bookIntroTapHintIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0.7; transform: translateY(0); }
}

/* "소리를 켜면 더 좋습니다" 안내 — 화면 상단 작게, 4초 후 자동 페이드아웃 */
.book-intro-audio-hint {
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.72rem;
  color: rgba(216, 196, 152, 0.75);
  letter-spacing: 0.08em;
  opacity: 0;
  animation: bookIntroAudioHintIn 700ms ease 300ms forwards, bookIntroAudioHintOut 1000ms ease 3800ms forwards;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(220,170,90,0.2);
}
@keyframes bookIntroAudioHintIn {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0.85; transform: translateY(0); }
}
@keyframes bookIntroAudioHintOut {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}

/* 표지 — 미니멀 가죽 디자인. 양파 + 제목만, 군더더기 없이 깔끔. */
/* padding은 .book-page 기본값(32 26 60) 그대로 사용 — 내부 페이지와 크기/위치 동일 */
.book-cover {
  background-color: #2a1608;
  background-image:
    /* 가죽 결 — 미세 그레인 다층 */
    repeating-linear-gradient(35deg,  transparent 0 1px, rgba(255,200,140,0.02) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(125deg, transparent 0 1px, rgba(0,0,0,0.03) 1px 2px, transparent 2px 5px),
    /* 빛 반사 — 상단 부드러운 하이라이트 */
    radial-gradient(ellipse at 50% 8%, rgba(220,170,90,0.15), transparent 55%),
    /* 하단 어두운 그림자 — 가죽 깊이감 */
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.45), transparent 55%),
    /* 베이스 — 진한 가죽 갈색 */
    linear-gradient(160deg, #3a1f0c 0%, #2a1608 50%, #18090a 100%);
  color: #d6b988;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #4a2810;
  box-shadow:
    0 1px 0 rgba(220,170,100,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset,
    0 0 0 1px rgba(0,0,0,0.6) inset,
    0 16px 40px rgba(0,0,0,0.8);
  cursor: pointer;
  position: absolute;  /* book-page 상속 — 명시 */
  /* padding은 .book-page 기본 32 26 60 그대로 — 내부 페이지와 크기 일치 */
  gap: 32px;
}
/* 양파 엠블럼 — 가운데 단독 일러스트 */
.book-cover-emblem {
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.6))
    drop-shadow(0 0 14px rgba(200,150,80,0.32));
  animation: bookCoverEmblemGlow 3.6s ease-in-out infinite;
}
.book-cover-emblem img.pixel-icon {
  width: 110px;
  height: 110px;
  image-rendering: pixelated;
}
@keyframes bookCoverEmblemGlow {
  0%, 100% { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(200,150,80,0.28)); }
  50%      { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 22px rgba(240,200,110,0.52)); }
}
/* 제목 — 단순한 세리프 + 위아래 hairline border만. 부제·작가 없음. */
.book-cover-title {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #e8c896;
  padding: 16px 0;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 0 14px rgba(220,170,90,0.18);
}
.book-cover-title::before,
.book-cover-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(200,160,80,0.5), transparent);
}
.book-cover-title::before { margin-bottom: 14px; }
.book-cover-title::after  { margin-top: 14px; }
.book-cover .book-page-hint {
  color: #b89868;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  z-index: 5;
}


/* 인계 화면 — 검은 화면 + ??? */
.book-inheritance {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(180,130,60,0.10), transparent 60%),
    #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 200;
  opacity: 0;
  animation: bookInheritFadeIn 1300ms ease forwards;
  gap: 28px;
}
@keyframes bookInheritFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* 양파 엠블럼 — 차원문 같은 글로우. 마지막 인사 */
.book-inheritance-emblem {
  opacity: 0;
  animation: bookInheritEmblemIn 1800ms ease 300ms forwards, bookInheritEmblemFloat 4s ease-in-out 2100ms infinite;
  filter:
    drop-shadow(0 4px 12px rgba(0,0,0,0.6))
    drop-shadow(0 0 20px rgba(220,170,90,0.4));
}
.book-inheritance-emblem img.pixel-icon {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}
@keyframes bookInheritEmblemIn {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bookInheritEmblemFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.book-inheritance-prompt {
  color: #d8c498;
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-align: center;
  opacity: 0;
  animation: bookInheritItemIn 1400ms ease 1300ms forwards;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.book-inheritance-confirm {
  background: linear-gradient(135deg, #4a3018 0%, #2c1808 100%);
  border: 1px solid #8a6630;
  color: #f0d8a8;
  padding: 14px 42px;
  border-radius: 22px;
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 0.16em;
  opacity: 0;
  animation: bookInheritItemIn 1400ms ease 2200ms forwards;
  box-shadow:
    inset 0 1px 0 rgba(255,220,140,0.2),
    0 4px 14px rgba(0,0,0,0.6),
    0 0 20px rgba(220,170,90,0.18);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.book-inheritance-confirm:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,220,140,0.2),
    0 2px 6px rgba(0,0,0,0.6);
}
@keyframes bookInheritItemIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 책 모드에서 스킵 버튼 톤 조정 */
#tutorial-panel.book-mode #tut1-skip-btn {
  background: rgba(180,140,90,0.12);
  border: 1px solid rgba(180,140,90,0.4);
  color: rgba(220,190,140,0.7);
}
#tutorial-panel.book-mode #tut1-skip-btn:active {
  background: rgba(180,140,90,0.3);
  color: #f0d8a0;
}

/* ══════════════════════════════════════════════════════════
   흙박 탭 (도박 패널 / 흙또 패널 공용)
   ══════════════════════════════════════════════════════════ */

.hukbak-tabs {
  display: flex;
  gap: 0;
  background: var(--color-panel, #1e1a15);
  border-bottom: 1px solid #3a3228;
  flex-shrink: 0;
}
.hukbak-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-dim, #aaa);
  padding: 11px 0;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.hukbak-tab.active {
  color: var(--color-accent, #d8b870);
  border-bottom-color: var(--color-accent, #d8b870);
}
.hukbak-tab:active { background: rgba(255,255,255,0.05); }

/* ══════════════════════════════════════════════════════════
   자료 패널
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   양파 차원문 (v22 teaser — 껍데기)
   ══════════════════════════════════════════════════════════ */

#portal-panel {
  background: var(--color-bg, #14100a);
  display: flex;
  flex-direction: column;
}
#portal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-panel, #1e1a15);
  border-bottom: 2px solid #3a3228;
  font-size: 0.9rem;
  flex-shrink: 0;
}
#portal-header button {
  background: none;
  border: none;
  color: var(--color-accent, #d8b870);
  font-size: 1rem;
  cursor: pointer;
}
#portal-content {
  flex: 1;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.portal-locked-card {
  background: linear-gradient(135deg, #1a1424 0%, #2a1e3a 100%);
  border: 1px solid #4a3a6a;
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.portal-locked-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(180, 140, 240, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.portal-emoji {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 12px;
  animation: portal-spin 6s linear infinite;
  display: inline-block;
  filter: drop-shadow(0 0 12px rgba(180, 140, 240, 0.5));
}
.portal-emoji img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  display: block;
}
@keyframes portal-spin {
  to { transform: rotate(360deg); }
}
.portal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #d8b8f8;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.portal-desc {
  font-size: 0.8rem;
  color: #a89cb8;
  line-height: 1.7;
}
.portal-section-label {
  font-size: 0.7rem;
  color: #7a6aaa;
  letter-spacing: 1.5px;
  margin: 14px 4px 4px;
  text-transform: uppercase;
}
.portal-coming-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #1c1820;
  border: 1px dashed #3a3050;
  border-radius: 10px;
  opacity: 0.7;
}
.portal-coming-emoji {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  filter: grayscale(0.4);
}
.portal-coming-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-coming-title {
  font-size: 0.88rem;
  color: #c0b8d0;
  font-weight: 600;
}
.portal-coming-desc {
  font-size: 0.7rem;
  color: #6a607a;
}
.portal-coming-status {
  font-size: 0.7rem;
  color: #7a6aaa;
  padding: 4px 10px;
  border: 1px solid #3a3050;
  border-radius: 6px;
  background: rgba(58, 48, 80, 0.3);
}
.portal-foot-note {
  font-size: 0.68rem;
  color: #5a5070;
  text-align: center;
  line-height: 1.6;
  margin-top: 12px;
  padding: 10px;
  border-top: 1px solid #2a2030;
}

#archive-panel {
  background: var(--color-bg, #14100a);
  display: flex;
  flex-direction: column;
}
#archive-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-panel, #1e1a15);
  border-bottom: 2px solid #3a3228;
  font-size: 0.9rem;
  flex-shrink: 0;
}
#archive-header button {
  background: none;
  border: none;
  color: var(--color-accent, #d8b870);
  font-size: 1rem;
  cursor: pointer;
}
#archive-content {
  flex: 1;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.archive-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
  background: #1e1a15;
  border: 1px solid #3a3228;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font-family: inherit;
}
.archive-item:active { background: #2a241c; }
.archive-item-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.archive-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.archive-item-title {
  font-size: 0.95rem;
  color: var(--color-text, #e0d0a8);
  font-weight: 700;
}
.archive-item-desc {
  font-size: 0.74rem;
  color: var(--color-text-dim, #8a7860);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   쪽지 패널
   ══════════════════════════════════════════════════════════ */

#notes-panel {
  background: var(--color-bg, #14100a);
  display: flex;
  flex-direction: column;
}
#notes-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-panel, #1e1a15);
  border-bottom: 2px solid #3a3228;
  font-size: 0.9rem;
  flex-shrink: 0;
}
#notes-header button {
  background: none;
  border: none;
  color: var(--color-accent, #d8b870);
  font-size: 1rem;
  cursor: pointer;
}
#notes-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1e1a15;
  border-bottom: 1px solid #3a3228;
  flex-shrink: 0;
}
#notes-buy-info {
  font-size: 0.78rem;
  color: var(--color-text-dim, #8a7860);
}
#notes-buy-btn {
  background: #2a2620;
  border: 1px solid #3a3228;
  color: #6a604c;
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: not-allowed;
}
.notes-buy-btns {
  display: flex;
  gap: 6px;
}
.notes-buy-btn-money,
.notes-buy-btn-emerald {
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid;
}
.notes-buy-btn-money {
  background: #4a3818;
  border-color: #8a6828;
  color: #f0d8a0;
}
.notes-buy-btn-money:active:not(:disabled) { background: #5a4828; }
.notes-buy-btn-emerald {
  background: #1e4a3a;
  border-color: #4a8e6a;
  color: #aef0c8;
}
.notes-buy-btn-emerald:active:not(:disabled) { background: #2a5e4a; }
.notes-buy-btn-money:disabled,
.notes-buy-btn-emerald:disabled {
  background: #2a2620;
  border-color: #3a3228;
  color: #6a604c;
  cursor: not-allowed;
}
#notes-list {
  flex: 1;
  padding: 18px 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.notes-empty {
  text-align: center;
  color: var(--color-text-dim, #8a7860);
  font-size: 0.84rem;
  padding: 60px 0;
  line-height: 1.8;
}
.notes-item {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: #1e1a15;
  border: 1px solid #3a3228;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text, #e0d0a8);
}
.notes-item-num {
  color: var(--color-accent, #d8b870);
  font-weight: 700;
  flex-shrink: 0;
}
.notes-item-text {
  flex: 1;
  word-break: keep-all;
}
.notes-dup {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.74rem;
  color: var(--color-text-dim, #8a7860);
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   확률형 아이템 표기 (게임산업법 33조의2 준수)
   ══════════════════════════════════════════════════════════ */

/* 박스 카드 하단 고지문 */
.shop-prob-disclosure {
  font-size: 0.65rem;
  color: #8a7860;
  padding: 6px 10px;
  margin: 4px 0 10px;
  border-left: 2px solid #5a4828;
  background: rgba(90, 72, 40, 0.08);
  border-radius: 0 4px 4px 0;
  line-height: 1.55;
}

/* 확률표 모달 */
.prob-modal {
  background: #1a1610;
  border: 1px solid #3a3228;
  border-radius: 14px;
  padding: 20px 18px 18px;
  max-width: 320px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 85vh;
}
.prob-title {
  font-size: 0.95rem;
  color: #f0e0c8;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.prob-list {
  font-size: 0.78rem;
  color: #d0c0a0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 0;
}
.prob-disclosure-toggle {
  background: transparent;
  border: 1px dashed #4a3e30;
  border-radius: 6px;
  padding: 7px 10px;
  color: #a89880;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.prob-disclosure-toggle:hover { color: #d0c0a0; border-color: #6a5a40; }
.prob-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  color: #8a7860;
}
.prob-disclosure-toggle.open .prob-toggle-arrow { transform: rotate(180deg); }
.prob-disclosure-group {
  display: none;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.prob-disclosure-group.open { display: flex; }
.prob-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1.45;
}
.prob-row:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
.prob-row.prob-sum {
  margin-top: 6px;
  border-top: 1px solid #3a3228;
  padding-top: 8px;
  color: #f0d8a0;
  font-weight: 700;
}
.prob-pct {
  color: #f0d8a0;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 8px;
}
.prob-notice {
  font-size: 0.7rem;
  color: #d8c098;
  line-height: 1.7;
  padding: 9px 11px;
  background: rgba(80, 56, 28, 0.35);
  border-left: 3px solid #c89048;
  border-radius: 0 6px 6px 0;
}
.prob-notice b {
  color: #ffd068;
  font-weight: 700;
}
.prob-disclaimer {
  font-size: 0.62rem;
  color: #8a7860;
  line-height: 1.65;
  padding: 8px 10px;
  background: rgba(50, 40, 30, 0.4);
  border-radius: 6px;
}
.prob-close {
  background: #3a3228;
  border: none;
  border-radius: 8px;
  color: #d0c0a0;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  padding: 9px 18px;
  cursor: pointer;
  align-self: center;
  font-weight: 600;
}
.prob-close:active { background: #4a4238; }

/* 첫 진입 확률형 아이템 고지 모달 */
.lootbox-disclosure-overlay {
  position: fixed; inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.lootbox-disclosure-card {
  background: #1a1610;
  border: 1px solid #3a3228;
  border-radius: 14px;
  padding: 22px 20px;
  max-width: 320px; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.lootbox-disclosure-card h3 {
  font-size: 0.95rem;
  color: #f0d8a0;
  text-align: center;
  margin: 0;
  font-weight: 700;
}
.lootbox-disclosure-card p {
  font-size: 0.78rem;
  color: #c8b8a0;
  line-height: 1.7;
  margin: 0;
}
.lootbox-disclosure-card .law-cite {
  font-size: 0.65rem;
  color: #8a7860;
  background: rgba(60,48,30,0.35);
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.55;
}
.lootbox-disclosure-confirm {
  background: #4a3a20;
  border: 1px solid #6a5238;
  border-radius: 8px;
  color: #f0d8a0;
  font-family: var(--font-pixel);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.lootbox-disclosure-confirm:active { background: #5a4828; }

/* ── 설정 패널 크레딧 버튼 — 라이선스 모달 진입 ── */
.settings-credits-btn {
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--color-text-dim, #8a7a5a);
  font-size: 0.65rem;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.settings-credits-btn:hover { color: var(--color-accent, #d4b070); }

/* ── 크레딧 모달 ── */
.credits-modal-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.credits-modal {
  background: var(--color-panel, #1e1a15);
  border: 1px solid #3a3228;
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 320px; width: 88%;
  font-size: 0.7rem;
  color: var(--color-text-dim, #c4b99a);
  line-height: 1.7;
}
.credits-modal h3 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #f0c040;
}
.credits-modal a {
  color: var(--color-accent, #d4b070);
  text-decoration: underline;
}
.credits-modal-close {
  margin-top: 14px;
  width: 100%;
  background: #3a3228;
  border: none;
  color: #d4b070;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.7rem;
}

/* ── 픽셀 아이콘 (Sprout Lands UI Pack — Cup Nooble) ── */
/* width/height 는 부모 font-size 기준 em — 자체 font-size 변경 금지 */
.pixel-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  object-fit: contain;
}
/* alt 텍스트는 img 로드 실패 시에만 보이지만 이때만 폴백으로 작게 표시 */
.pixel-icon::after {
  content: '';
}
/* 큰 컨텍스트 (박스 결과 카드, 환경편집 카드 등) */
.pixel-icon-lg {
  width: 1.6em;
  height: 1.6em;
  vertical-align: -0.4em;
}
.pixel-icon-xl {
  width: 2.2em;
  height: 2.2em;
  vertical-align: -0.6em;
}

/* ── 서버 검증 로딩 스피너 (작은 빙글빙글, 모달 X) ── */
#busy-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(240, 192, 64, 0.25);
  border-top-color: #f0c040;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  display: none;
  animation: busy-spin 0.8s linear infinite;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.001); /* hit-test only */
}
#busy-spinner.show {
  display: block;
}
/* 양파 성장 로딩 / 모험 트랜지션 진행 중엔 스피너 중복 노출 방지 */
body:has(.evo-overlay) #busy-spinner,
body:has(.adv-transition) #busy-spinner {
  display: none !important;
}
@keyframes busy-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* busy 동안 입력 차단 */
body.busy {
  pointer-events: none;
  cursor: wait;
}
body.busy #busy-spinner {
  pointer-events: none;
}


/* ── 길드 교환소 (v19) ────────────────────────────── */
.guild-exchange-header {
  background: rgba(40, 32, 24, 0.5);
  border: 1px solid #2a2418;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  text-align: center;
}
.guild-exchange-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0d090;
  margin-bottom: 4px;
}
.guild-exchange-balance {
  font-size: 0.85rem;
  color: #d9c69c;
  margin: 4px 0;
}
.guild-exchange-balance strong {
  color: #f0c040;
  font-size: 1.1rem;
}
.guild-exchange-hint {
  font-size: 0.7rem;
  color: #9880b8;
  margin-top: 4px;
}
.guild-exchange-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guild-exchange-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30, 24, 16, 0.5);
  border: 1px solid #2a2418;
  border-radius: 6px;
  padding: 10px 12px;
}
.guild-exchange-item.disabled {
  opacity: 0.5;
}
.guild-exchange-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.guild-exchange-info {
  flex: 1;
  min-width: 0;
}
.guild-exchange-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e8d4a8;
}
.guild-exchange-meta {
  font-size: 0.7rem;
  color: #9c8866;
  margin-top: 2px;
}
.guild-exchange-item button {
  flex-shrink: 0;
}

/* ── 길드 기부 UI 재디자인 (v20.1) ──────────────────────── */
.guild-buff-section {
  margin-bottom: 16px;
}
.guild-buff-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0d090;
  margin-bottom: 10px;
  padding: 0 4px;
}
.guild-buff-points-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(40, 32, 24, 0.4);
  border: 1px solid #2a2418;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.guild-buff-points-label { color: #9c8866; }
.guild-buff-points-val { color: #f0c040; font-size: 1.05rem; }
.guild-buff-money-val { color: #d9c69c; display: flex; align-items: center; gap: 4px; }
.guild-buff-money-val .pixel-icon { width: 14px; height: 14px; }

.guild-donate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.guild-donate-card {
  background: rgba(60, 48, 32, 0.6);
  border: 1px solid #4a3820;
  border-radius: 6px;
  padding: 10px 6px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
  font-family: inherit;
  color: #e8d4a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.guild-donate-card:hover:not(.disabled) {
  background: rgba(80, 64, 40, 0.7);
  transform: translateY(-1px);
}
.guild-donate-card:active:not(.disabled) {
  transform: translateY(0);
}
.guild-donate-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.guild-donate-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0d090;
}
.guild-donate-card-cost {
  font-size: 0.72rem;
  color: #d9c69c;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.guild-donate-card-cost .pixel-icon { width: 12px; height: 12px; }
.guild-donate-card-rewards {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.65rem;
  width: 100%;
  align-items: center;
  margin-top: 2px;
}
.guild-donate-reward-guild { color: #88c8a0; }
.guild-donate-reward-personal { color: #c8a060; }

.guild-donate-rate-info {
  font-size: 0.7rem;
  color: #9880b8;
  text-align: center;
  margin-top: 6px;
  padding: 0 4px;
}

.guild-buff-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.guild-buff-lvl {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0c040;
}
.guild-buff-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.guild-buff-pip {
  flex: 1;
  height: 4px;
  background: #2a2418;
  border-radius: 2px;
}
.guild-buff-pip.filled {
  background: linear-gradient(90deg, #f0c040, #f7d77a);
  box-shadow: 0 0 4px rgba(240, 192, 64, 0.5);
}
.guild-buff-maxed-badge {
  text-align: center;
  font-size: 0.78rem;
  color: #f0c040;
  background: rgba(240, 192, 64, 0.1);
  padding: 6px;
  border-radius: 4px;
  margin-top: 6px;
}
.guild-buff-buy-btn {
  width: 100%;
  margin-top: 6px;
}
.guild-buff-buy-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── 길드 v20.1 — 설명/신청수/프로필 모달 ────────── */
.guild-list-desc {
  font-size: 0.66rem;
  color: #b8a888;
  margin-top: 4px;
  line-height: 1.3;
  word-break: break-word;
}
.guild-info-desc-row {
  margin-top: 8px;
}
.guild-info-desc-label {
  font-size: 0.7rem;
  color: #9c8866;
  margin-bottom: 4px;
}
.guild-info-desc-edit {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.guild-info-desc-edit textarea {
  flex: 1;
  min-height: 36px;
  resize: vertical;
  font-size: 0.7rem;
  font-family: inherit;
  padding: 6px 8px;
}
.guild-info-desc {
  font-size: 0.72rem;
  color: #d4c0a0;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(40, 32, 24, 0.4);
  border-radius: 4px;
  line-height: 1.4;
}
.guild-info-desc-empty { color: #6a5a48; font-style: italic; }

.guild-info-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.guild-info-mode-label {
  font-size: 0.7rem;
  color: #9c8866;
}
.guild-info-mode-display {
  font-size: 0.72rem;
  color: #d4c0a0;
}

.guild-app-count-badge {
  margin-left: auto;
  background: linear-gradient(135deg, #f0c040, #e0a020);
  color: #1c1814;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #c08818;
}
.guild-app-count-badge:hover { transform: translateY(-1px); }

.guild-applications-list { margin-top: 10px; }
.guild-app-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(40, 32, 24, 0.4);
  border: 1px solid #2a2418;
  border-radius: 4px;
  margin-bottom: 4px;
}
.guild-app-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.72rem;
}
.guild-app-name { color: #e8d4a8; font-weight: 600; }
.guild-app-level { color: #9c8866; }
.guild-app-time {
  margin-left: auto;
  color: #7a6a48;
  font-size: 0.65rem;
}
.guild-app-btns { display: flex; gap: 4px; }

/* 프로필 모달 — v20.1 화분 강화 + 길드 액션 */
.profile-pots-section {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(40, 32, 24, 0.4);
  border-radius: 6px;
}
.profile-pots-title {
  font-size: 0.7rem;
  color: #9c8866;
  margin-bottom: 6px;
}
.profile-pots-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.profile-pot-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(20, 16, 12, 0.5);
  border-radius: 4px;
}
.profile-pot-label {
  font-size: 0.62rem;
  color: #c0a888;
}
.profile-pot-enh {
  font-size: 0.78rem;
  font-weight: 700;
}

.profile-guild-actions {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(40, 32, 24, 0.4);
  border-radius: 6px;
}
.profile-guild-actions-title {
  font-size: 0.7rem;
  color: #f0c040;
  margin-bottom: 6px;
}
.profile-guild-action-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.profile-guild-action-row > button { flex: 1; }

/* ── v20.1 길드전 진행도 바 + 기부 압축 ────────── */
.gw-progress-row {
  background: rgba(40, 32, 24, 0.4);
  border: 1px solid #2a2418;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 5px;
}
.gw-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.7rem;
}
.gw-progress-label {
  color: #d4c0a0;
  font-weight: 600;
}
.gw-progress-count {
  color: #9c8866;
  font-size: 0.66rem;
}
.gw-progress-count.gw-progress-done {
  color: #f0c040;
  font-weight: 700;
}
.gw-progress-bar-wrap {
  background: rgba(20, 16, 12, 0.7);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 3px;
}
.gw-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #88c8a0, #66ccaa);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.gw-progress-rate {
  font-size: 0.6rem;
  color: #7a6a48;
  text-align: right;
}

/* 기부 잔액 한 줄 */
.guild-buff-balance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(40, 32, 24, 0.4);
  border: 1px solid #2a2418;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 0.7rem;
}
.guild-buff-balance-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.guild-buff-balance-label {
  color: #9c8866;
  font-size: 0.65rem;
}
.guild-buff-balance-val {
  color: #f0c040;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.guild-buff-balance-val .pixel-icon {
  width: 12px; height: 12px;
}
.guild-buff-balance-divider {
  color: #5c5040;
  font-size: 0.7rem;
}

/* ── v20.1 길드전 시각 효과 ────────── */
.guild-war-title {
  background: linear-gradient(90deg, #f7d77a, #f0c040, #f7d77a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gw-title-shimmer 4s linear infinite;
  font-weight: 700;
}
@keyframes gw-title-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.guild-war-timer {
  margin-top: 6px;
  font-size: 0.74rem;
  text-align: center;
  color: #d4c0a0;
  padding: 4px 8px;
  background: rgba(40, 32, 24, 0.4);
  border-radius: 4px;
}
.guild-war-timer-pending { color: #88aaee; }
.guild-war-timer-final {
  color: #ff8866;
  font-weight: 700;
  animation: gw-final-pulse 1s ease-in-out infinite alternate;
}
@keyframes gw-final-pulse {
  from { box-shadow: 0 0 4px rgba(255,136,102,0.3); }
  to   { box-shadow: 0 0 12px rgba(255,136,102,0.6); }
}

/* 순위 카드 — 1등/2등/3등/4등 차등 색상 */
.guild-war-score-row.gw-rank-gold {
  border: 1px solid #f0c040;
  background: linear-gradient(135deg, rgba(240,192,64,0.15), rgba(240,192,64,0.05));
  box-shadow: 0 0 12px rgba(240,192,64,0.2);
}
.guild-war-score-row.gw-rank-gold .guild-war-rank {
  color: #f0c040;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(240,192,64,0.5);
}
.guild-war-score-row.gw-rank-silver {
  border: 1px solid #c0c0c0;
  background: linear-gradient(135deg, rgba(192,192,192,0.12), rgba(192,192,192,0.04));
}
.guild-war-score-row.gw-rank-silver .guild-war-rank {
  color: #d8d8d8;
  font-weight: 700;
}
.guild-war-score-row.gw-rank-bronze {
  border: 1px solid #cd7f32;
  background: linear-gradient(135deg, rgba(205,127,50,0.12), rgba(205,127,50,0.04));
}
.guild-war-score-row.gw-rank-bronze .guild-war-rank {
  color: #cd7f32;
  font-weight: 700;
}
.guild-war-score-row.gw-rank-iron {
  border: 1px solid #555;
  background: rgba(50, 50, 50, 0.2);
}
.guild-war-score-row.gw-rank-iron .guild-war-rank { color: #888; }

/* 우리 길드 강조 — 모든 순위에 추가 */
.guild-war-score-row.guild-war-my {
  outline: 2px solid #88c8a0;
  outline-offset: -2px;
}
.guild-war-score-row.gw-rank-gold.guild-war-my {
  animation: gw-my-glow 2s ease-in-out infinite alternate;
}
@keyframes gw-my-glow {
  from { box-shadow: 0 0 12px rgba(240,192,64,0.3), 0 0 0 2px rgba(136,200,160,0.5) inset; }
  to   { box-shadow: 0 0 24px rgba(240,192,64,0.6), 0 0 0 2px rgba(136,200,160,0.8) inset; }
}

/* ── v20.1 픽셀 메달/아이콘 ────────── */
.ranking-medal {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}
.gw-rank-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: middle;
}
.gw-timer-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: middle;
}
.gw-duel-icon {
  width: 18px;
  height: 18px;
  margin: 0 4px;
  vertical-align: middle;
  /* 헤더 그라디언트 텍스트 영향 안 받게 */
  -webkit-text-fill-color: initial;
}

/* ── 말걸기 쿨타임 (Q&A 쿨타임과 시각 차별화 — 갈색 톤) ── */
.chat-cooldown-mode {
  background: #2a2418 !important;
  border-color: #4a3e30 !important;
  color: #c0a070 !important;
  font-family: 'DungGeunMo', monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  cursor: not-allowed !important;
  opacity: 0.85;
}

/* ── 모험 결과 화면 v2 — 줄 분리 가독성 ── */
.adv-result-stage-v2 {
  display: block !important;        /* 기존 .adv-result-stage display:flex 덮어쓰기 */
  text-align: center !important;
  padding: 18px 16px !important;
  line-height: 1.7;
  border-bottom: none !important;
  gap: 0 !important;
  font-size: inherit !important;
}
.adv-result-event-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f7d77a;
  margin-bottom: 10px;
  word-break: keep-all;
}
.adv-result-divider {
  width: 60%;
  height: 1px;
  margin: 8px auto 14px;
  background: linear-gradient(90deg, transparent, #4a3e30, transparent);
}
.adv-result-stage-v2 .adv-result-log {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 0 6px;
  word-break: keep-all;
}
.adv-result-stage-v2 .adv-log-hidden { color: #b88cf0; font-weight: 600; }
.adv-result-stage-v2 .adv-log-success { color: #7eca84; }
.adv-result-stage-v2 .adv-log-fail    { color: #e08070; }
.adv-result-double-dmg {
  display: inline-block;
  margin: 6px auto 10px;
  padding: 6px 12px;
  background: #3a1818;
  border: 1px solid #c04040;
  border-radius: 6px;
  color: #ffaaaa;
  font-size: 0.82rem;
  font-weight: 700;
  animation: advHeartShake 0.6s ease-in-out;
}
.adv-result-heart-loss {
  margin: 6px 0 10px;
  font-size: 1rem;
}
.adv-result-mult {
  font-size: 0.78rem;
  color: #f7d77a;
  margin: 8px 0;
  padding: 4px 10px;
  display: inline-block;
  background: #3a2e18;
  border-radius: 12px;
}
.adv-result-reward-line {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 14px 0 18px;
  letter-spacing: 0.02em;
}
.adv-result-continue {
  margin-top: 6px;
  min-width: 140px;
}

/* ── 모험 HUD: 하트 아이콘 (icon_adventure_heart.png) ── */
.adv-hud-heart-icon {
  width: 18px;
  height: 18px;
  margin: 0 1px;
  vertical-align: middle;
  display: inline-block;
}
.adv-hud-heart-icon.adv-hud-heart-empty {
  filter: grayscale(1) brightness(0.45);
  opacity: 0.5;
}
/* 하트 손실 표시 — 결과 화면 dmg ×N 자리 */
.adv-hud-heart-icon.adv-heart-loss {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  filter: drop-shadow(0 0 2px #e06060) brightness(1.1);
  animation: advHeartShake 0.45s ease-in-out;
}
@keyframes advHeartShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-8deg); }
  50% { transform: translateX(2px) rotate(8deg); }
  80% { transform: translateX(-1px) rotate(-3deg); }
}

/* ── 모험 — 여정의 기록 모달 ── */
.adv-journey-modal {
  background: #1a1612;
  border: 1px solid #3a2e22;
  border-radius: 8px;
  padding: 14px 12px;
  max-height: 80vh;
  overflow-y: auto;
}
.adv-journey-header {
  text-align: center;
  margin-bottom: 8px;
}
.adv-journey-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f7d77a;
  margin-top: 6px;
}
.adv-journey-onion {
  font-size: 0.85rem;
  color: #c8b890;
  margin-top: 4px;
}
.adv-journey-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #4a3e30, transparent);
  margin: 10px 0;
}
.adv-journey-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}
.adv-journey-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: #221b15;
  border: 1px solid #2e2418;
  border-radius: 5px;
  font-size: 0.78rem;
  line-height: 1.45;
  animation: adv-fade-in 0.3s ease;
}
.adv-journey-row.adv-journey-boss {
  background: linear-gradient(90deg, #2e1818, #221b15);
  border-color: #5a2e2e;
}
.adv-journey-row.adv-journey-mini-row {
  background: #1f1c14;
  border-color: #3a3220;
}
.adv-journey-row.adv-journey-portal-row {
  background: #1a1c24;
  border-color: #2e3148;
}
.adv-journey-row.adv-journey-oasis-row {
  background: #182218;
  border-color: #2e482e;
}
.adv-journey-stage {
  flex: 0 0 50px;
  font-size: 0.7rem;
  color: #9c8866;
  font-weight: 700;
  padding-top: 2px;
}
.adv-journey-content {
  flex: 1;
  min-width: 0;
}
.adv-journey-event-title {
  color: #e0d4c0;
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 2px;
}
.adv-journey-event-line {
  color: #b8aa90;
  font-size: 0.74rem;
}
.adv-journey-gain { color: #f7d77a; font-weight: 700; }
.adv-journey-hidden { color: #b88cf0; font-weight: 700; }
.adv-journey-loss { color: #e06060; font-weight: 700; }
.adv-journey-flee { color: #aac0d8; font-weight: 600; }
.adv-journey-neutral { color: #888; }
.adv-journey-mult {
  display: inline-block;
  font-size: 0.65rem;
  color: #c0a070;
  margin-left: 2px;
}
.adv-journey-empty {
  text-align: center;
  color: #7a7060;
  font-size: 0.8rem;
  padding: 20px;
}
.adv-journey-footer {
  text-align: center;
  padding-top: 6px;
}
.adv-journey-earned {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f7d77a;
  margin-bottom: 6px;
}
.adv-journey-bonus {
  font-size: 0.78rem;
  color: #7eca84;
  margin-bottom: 4px;
}

/* ── 모험 나쁜 이벤트 ── */
.adv-event-bad {
  background: linear-gradient(135deg, #2a1818, #221b15) !important;
  border-color: #5a2e2e !important;
  position: relative;
}
.adv-bad-badge {
  display: inline-block;
  background: #4a2020;
  border: 1px solid #c04040;
  color: #ffaaaa;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.adv-bad-choice {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px !important;
  text-align: left !important;
}
.adv-bad-choice .adv-bad-label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.adv-bad-choice .adv-bad-effect {
  font-size: 0.78rem;
  opacity: 0.85;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.adv-bad-choice-money {
  border-color: #c0a070 !important;
  color: #c0a070 !important;
}
.adv-bad-choice-heart {
  border-color: #c07070 !important;
  color: #c07070 !important;
}
.adv-bad-choice-combo {
  border-color: #a070c0 !important;
  color: #a070c0 !important;
}
.adv-bad-effect-plus {
  color: #f7d77a;
  font-weight: 700;
  margin-left: 4px;
}

/* 타이핑 효과 — 빈 텍스트 시 높이 유지 + 깜빡이는 커서 */
.adv-transition-text {
  min-height: 1.5em;
  white-space: pre-wrap;
}
.adv-transition-text:empty::before {
  content: '\200B';
}
.adv-transition .adv-transition-text::after {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 1em;
  vertical-align: text-bottom;
  background: #c0a070;
  margin-left: 2px;
  animation: advBlinkCursor 0.8s steps(2) infinite;
}
@keyframes advBlinkCursor {
  to { opacity: 0; }
}

/* ── 모험 미니컨텐츠 v3: 카운터 애니메이션 + 카드 뒤집기 ── */
.adv-mini-spin, .adv-mini-card {
  animation: adv-fade-in 0.4s ease;
}
.adv-mini-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.adv-mini-tap-hint {
  font-size: 0.7rem;
  color: #7a7060;
  margin-top: 12px;
  font-style: italic;
}
.adv-mini-card-hint {
  font-size: 0.78rem;
  color: #c8b890;
  margin: 8px 0 14px;
}
.adv-mini-result-line {
  margin-top: 16px;
  min-height: 80px;
}
.adv-mini-label {
  font-size: 1rem;
  color: #f7d77a;
  font-weight: 700;
  margin-bottom: 4px;
}
.adv-mini-display {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 14px;
}
.adv-mini-intuition {
  color: #b88cf0;
  font-size: 0.78rem;
  margin-bottom: 12px;
}

/* ── 룰렛 그리드 ── */
.adv-roulette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 320px;
  margin: 0 auto 12px;
}
.adv-roulette-cell {
  aspect-ratio: 1;
  background: #28201a;
  border: 2px solid #4a3e30;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #7a7060;
  transition: all 0.15s ease;
}
.adv-roulette-cell.active {
  background: linear-gradient(135deg, #4a3a20, #6a4a28);
  border-color: #f7d77a;
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 12px #f7d77a88;
}

/* ── 주사위 큰 숫자 ── */
.adv-dice-num {
  font-size: 4.5rem;
  font-weight: 900;
  color: #fff;
  margin: 12px 0 8px;
  font-family: 'DungGeunMo', monospace;
  letter-spacing: 0.05em;
  text-shadow: 0 0 16px #7eca8444;
  animation: adv-fade-in 0.3s ease;
}

/* ── 카드 뒤집기 (3D flip) ── */
.adv-mini-card-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
}
.adv-flip-card {
  width: 78px;
  height: 110px;
  perspective: 1000px;
  cursor: pointer;
}
.adv-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.adv-flip-card.flipped .adv-flip-card-inner {
  transform: rotateY(180deg);
}
.adv-flip-card-back, .adv-flip-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding: 4px;
  word-break: keep-all;
  line-height: 1.3;
}
.adv-flip-card-back {
  background: linear-gradient(135deg, #2a1a3a, #4a2a5a);
  border: 2px solid #b88cf0;
  color: #b88cf0;
  font-size: 1.6rem;
}
.adv-flip-card-front {
  background: #3a2e22;
  border: 2px solid #4a3e30;
  color: #fff;
  transform: rotateY(180deg);
}
.adv-flip-card.adv-flip-picked .adv-flip-card-front {
  background: linear-gradient(135deg, #4a3a20, #6a4a28);
  border-color: #f7d77a;
  color: #f7d77a;
  box-shadow: 0 0 12px #f7d77a88;
}
.adv-flip-card.adv-flip-other .adv-flip-card-front {
  opacity: 0.55;
  filter: grayscale(0.3);
}
.adv-flip-card.adv-flip-dim .adv-flip-card-back {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.adv-flip-card:hover:not(.flipped) .adv-flip-card-inner {
  transform: translateY(-4px) rotateY(0deg);
}

/* ── 모험 v2: 차원문/미니컨텐츠 애니메이션 ── */
@keyframes advPortalPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.18); filter: brightness(1.3); }
}
@keyframes advRouletteSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}
@keyframes advDiceRoll {
  0%   { transform: rotate(0deg) scale(0.8); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}
.adv-mini, .adv-portal-branch, .adv-portal-result {
  animation: adv-fade-in 0.4s ease;
}

/* ── 모험 화면 전환 폴리싱 ── */
@keyframes adv-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.adv-event-card,
.adv-result-stage-v2,
.adv-oasis,
.adv-ticket-choice,
.adv-bonus,
.adv-close-choice,
.adv-retry-card,
.adv-resume-card {
  animation: adv-screen-in 0.32s ease;
}

/* 재시도 카드 (서버 연결 실패) */
.adv-retry-card {
  text-align: center;
  padding: 32px 16px;
}
.adv-retry-title {
  font-size: 1rem;
  color: #e08070;
  font-weight: 700;
  margin-bottom: 8px;
}
.adv-retry-desc {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  line-height: 1.7;
  margin-bottom: 20px;
}
.adv-transition {
  animation: adv-screen-in 0.28s ease;
}

/* 보스 이벤트 카드 강조 — 빨간 글로우 + 펄스 */
.adv-event-card.adv-event-boss-card {
  border-color: #c04040;
  background: linear-gradient(135deg, #2c1818, #272318);
  box-shadow: 0 0 14px rgba(224, 96, 96, 0.18), inset 0 0 8px rgba(224, 96, 96, 0.05);
  animation: adv-screen-in 0.32s ease, adv-boss-card-pulse 2.4s ease-in-out 0.4s infinite alternate;
}
@keyframes adv-boss-card-pulse {
  from { box-shadow: 0 0 12px rgba(224, 96, 96, 0.14), inset 0 0 8px rgba(224, 96, 96, 0.04); }
  to   { box-shadow: 0 0 22px rgba(224, 96, 96, 0.32), inset 0 0 12px rgba(224, 96, 96, 0.10); }
}

/* 결과 보상 숫자 팝 인 */
.adv-result-reward-line {
  animation: adv-reward-pop 0.5s ease 0.15s backwards;
}
@keyframes adv-reward-pop {
  0%   { opacity: 0; transform: scale(0.78); }
  65%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* 결과 "계속" 버튼 — 펄스로 클릭 유도 */
.adv-result-continue {
  animation: adv-cont-pulse 2.4s ease-in-out 0.6s infinite;
}
@keyframes adv-cont-pulse {
  0%, 70%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(122, 202, 132, 0); }
  85% { transform: translateY(-2px); box-shadow: 0 0 12px rgba(122, 202, 132, 0.3); }
}

/* 게임오버 — 페이드 + 흔들림 합성 + 아이콘 박동 */
.adv-gameover {
  animation: adv-gameover-in 0.65s ease;
}
@keyframes adv-gameover-in {
  0%   { opacity: 0; transform: translateY(10px) translateX(0); }
  30%  { opacity: 1; transform: translateY(0) translateX(0); }
  40%  { transform: translateX(-5px); }
  55%  { transform: translateX(5px); }
  70%  { transform: translateX(-3px); }
  85%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.adv-gameover-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 16px;
  animation: adv-gameover-icon-pulse 1.6s ease 0.3s infinite alternate;
}
@keyframes adv-gameover-icon-pulse {
  from { opacity: 0.75; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.06); }
}

/* 클리어 모달 — 부드러운 등장 */
.adv-journey-modal {
  animation: adv-screen-in 0.5s ease;
}

/* HUD earned 변동 시 살짝 글로우 — JS에서 클래스 토글 */
.adv-hud-earned-glow {
  animation: adv-earned-glow 0.7s ease;
}
@keyframes adv-earned-glow {
  0%   { text-shadow: 0 0 0 transparent; }
  40%  { color: #fff2c0; text-shadow: 0 0 10px rgba(247, 215, 122, 0.85); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* 미니컨텐츠 결과 — 결과 숫자 팝 */
.adv-mini-display {
  animation: adv-reward-pop 0.45s ease 0.1s backwards;
}

/* 트랜지션 양파 이미지 페이드 */
.adv-transition-onion {
  animation: adv-walk 0.4s ease infinite, adv-fade-in 0.35s ease;
}

/* ── 프로필 설정 모달 (좌상단 아이콘) — 설정 패널 톤 ── */
.profile-edit-modal {
  background: #1c1814;
  border: 1px solid #4a4236;
  border-radius: 16px;
  padding: 20px;
  width: 280px;
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pe-title {
  font-size: 0.9rem;
  color: var(--color-accent, #d8b870);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #3a3228;
}
.pe-section { display: flex; flex-direction: column; gap: 8px; }
.pe-label { font-size: 0.78rem; color: var(--color-text, #e0d0a8); }
.pe-hint { font-size: 0.6rem; color: var(--color-text-dim, #8a7860); margin-left: 4px; }
.pe-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-height: 172px;
  overflow-y: auto;
}
.pe-icon-cell {
  aspect-ratio: 1;
  background: #2a241c;
  border: 1px solid #3a3228;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
}
.pe-icon-cell.selected {
  border-color: var(--color-accent, #d8b870);
  background: #3a3024;
}
.pe-icon-cell img { width: 100%; height: 100%; object-fit: contain; }
.pe-nick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pe-nick {
  font-size: 0.82rem;
  color: var(--color-text, #e0d0a8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-btn, .pe-settings-btn, .pe-close-btn {
  background: #3a3228;
  border: 1px solid #4a4236;
  border-radius: 8px;
  color: var(--color-text, #e0d0a8);
  font-size: 0.72rem;
  cursor: pointer;
}
.pe-btn { padding: 6px 14px; }
.pe-settings-btn { padding: 8px; text-align: center; }
.pe-close-btn { padding: 8px; background: #2a241c; }
/* 아이콘(좌) + 닉네임(우) 가로 배치 — 변경 버튼은 각 칸 아래 */
.pe-id-row { display: flex; gap: 14px; align-items: stretch; }
.pe-id-icon-col {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; flex-shrink: 0;
}
.pe-id-nick-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  justify-content: center;
}
.pe-btn-block { width: 100%; text-align: center; padding: 6px 8px; }

/* 현재 아이콘 + 변경 버튼 한 줄 */
.pe-icon-current-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pe-current-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #2a241c;
  border: 1px solid #3a3228;
  border-radius: 10px;
  padding: 4px;
}
/* 도감/인기도 */
.pe-stats-row {
  display: flex;
  gap: 8px;
}
.pe-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #2a241c;
  border: 1px solid #3a3228;
  border-radius: 8px;
  padding: 8px 4px;
}
.pe-stat-label { font-size: 0.66rem; color: var(--color-text-dim, #8a7860); }
.pe-stat-val { font-size: 0.92rem; color: var(--color-accent, #d8b870); }
/* 화분 강화 */
.pe-pots-row {
  display: flex;
  gap: 6px;
}
.pe-pot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #2a241c;
  border: 1px solid #3a3228;
  border-radius: 8px;
  padding: 6px 4px;
}
.pe-pot-label { font-size: 0.6rem; color: var(--color-text-dim, #8a7860); }
.pe-pot-enh { font-size: 0.82rem; color: var(--color-text, #e0d0a8); }
/* 설정/닫기 한 줄 (작게) */
.pe-foot-row {
  display: flex;
  gap: 8px;
}
.pe-foot-btn {
  flex: 1;
  background: #3a3228;
  border: 1px solid #4a4236;
  border-radius: 8px;
  color: var(--color-text, #e0d0a8);
  font-size: 0.7rem;
  padding: 7px;
  cursor: pointer;
}

/* 메인 채팅 — 발신자 프로필 아이콘 */
.mchat-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 3px;
}
/* 일반 메시지 — 왼쪽 아이콘 + 오른쪽 본문 가로 레이아웃 */
.mchat-row-msg {
  flex-direction: row;
  align-items: flex-start;
  gap: 7px;
}
.mchat-row-msg .mchat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mchat-row-msg.mchat-row-me { align-items: flex-start; }
.mchat-row-msg.mchat-row-me .mchat-text { text-align: left; }

/* ── 길드 홈/버프 컴팩트 개편 (v22) ── */
.guild-info-stats {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.guild-info-stats-dot { color: #4a4366; }
.guild-info-stats .guild-joinmode-toggle { margin-top: 0; gap: 4px; }
.guild-info-stats .guild-btn-tiny { padding: 2px 7px; font-size: 0.56rem; }
.guild-info-mode-display {
  font-size: 0.62rem; color: #b0a0d0;
  background: #2a2440; border: 1px solid #3a3460;
  padding: 2px 7px; border-radius: 6px;
}
/* 버프 카드 — 현재효과/다음 + 구매 한 줄 */
.guild-buff-info-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.guild-buff-info-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.guild-buff-info-text .guild-buff-next { margin: 0; }
.guild-buff-buy-sm {
  flex-shrink: 0;
  background: #3a3080; border: 1px solid #5a50a0; color: #f0e0d0;
  font-size: 0.66rem; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.guild-buff-buy-sm:active { background: #4a40a0; }
.guild-buff-buy-sm.disabled { opacity: 0.4; cursor: not-allowed; }
.guild-buff-info-row .guild-buff-maxed-badge {
  margin-top: 0; flex-shrink: 0;
  padding: 6px 10px; font-size: 0.66rem;
}
.guild-buff-info-row .guild-buff-hint { margin-top: 0; flex-shrink: 0; }

/* ── 온보딩 힌트 — 튜토리얼 직후 이벤트·사이드바 버튼 강조 (1회용) ── */
@keyframes onboardHintPulse {
  0%, 100% { box-shadow: 0 0 3px 1px rgba(240, 208, 96, 0.45); }
  50%      { box-shadow: 0 0 9px 4px rgba(240, 208, 96, 0.9); }
}
.onboard-hint {
  position: relative;
  border-radius: 8px;
  animation: onboardHintPulse 1.25s ease-in-out infinite;
}

/* ── 차원문 입장 조건 표시 ── */
.portal-req {
  margin-top: 14px;
  padding: 8px 14px;
  font-size: 0.78rem;
  color: var(--color-accent-soft, #d4ae8c);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border, #3c3428);
  border-radius: 8px;
  display: inline-block;
}
.portal-req strong { color: var(--color-accent, #c9926a); }

/* ── 양파 카드 공유/저장 버튼 (성장·독립 카드) ── */
.card-share-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin: 14px 0 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.card-share-btn {
  flex: 1;
  max-width: 130px;
  padding: 11px 6px;
  font-size: 0.8rem;
  font-family: var(--font-pixel, monospace);
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #d8c8b0;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.card-share-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.32);
  color: #f0e6d6;
}
.card-share-btn:active { transform: scale(0.95); }

/* ── 낮 시간대 — 메인 화면 감정·UI숨김 버튼 색상 (밝은 배경 대비) ── */
/* 밤(기본)은 기존 색 유지, 낮(6~18시)만 어둡게 */
body[data-time-of-day="day"] #emotion-btn { color: #141414; }
body[data-time-of-day="day"] #ui-hide-btn { color: #6a6a6a; }

/* ── 매일 특가 (기부 탭) — 고급형 카드 ── */
.daily-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.daily-deal-card {
  position: relative;
  background: linear-gradient(160deg, #3c2f1c 0%, #271f12 100%);
  border: 1px solid #6f5526;
  border-radius: 11px;
  padding: 11px 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,221,150,0.14);
}
.daily-deal-card.bought { opacity: 0.62; }
.daily-deal-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(240,200,110,0.18) 0%, transparent 70%);
}
.daily-deal-icon img { width: 40px; height: 40px; image-rendering: pixelated; }
.daily-deal-name {
  font-size: 0.66rem;
  color: #ecdcb4;
  line-height: 1.32;
  min-height: 1.75em;
  text-align: center;
}
.daily-deal-buy {
  width: 100%;
  border: none;
  border-radius: 7px;
  padding: 6px 0;
  background: linear-gradient(180deg, #eebc4d 0%, #c8902c 100%);
  color: #3a2a0e;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.daily-deal-buy:disabled {
  background: #4a4030;
  color: #8d7c58;
  cursor: default;
  box-shadow: none;
}
.daily-deal-page {
  color: #f2cd66;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ── 카드 저장 모달 (모바일 웹 — 길게 눌러 저장 fallback) ── */
.card-save-overlay {
  background: rgba(0, 0, 0, 0.92);
  z-index: 9600;
}
.card-save-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 94vw;
  max-height: 94vh;
  padding: 12px;
}
.card-save-hint {
  color: #f0d8a0;
  font-size: 0.74rem;
  text-align: center;
  font-family: var(--font-pixel, sans-serif);
  background: rgba(40, 30, 18, 0.88);
  padding: 9px 14px;
  border-radius: 8px;
  max-width: 88vw;
  line-height: 1.5;
}
.card-save-img {
  max-width: 88vw;
  max-height: 70vh;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  /* iOS Safari 길게 누르기 → "사진에 추가" 컨텍스트 메뉴 활성화 */
  -webkit-touch-callout: default !important;
  touch-action: manipulation;
  user-select: auto;
  -webkit-user-select: auto;
}
.card-save-close {
  background: #3a3228;
  border: none;
  border-radius: 8px;
  color: #d0c0a0;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  padding: 10px 24px;
  cursor: pointer;
}

/* ── 법적 정보 (설정 패널 섹션 + 풀스크린 문서 모달) ── */
.settings-section-title {
  font-size: 0.78rem;
  color: #b5a98a;
  border-top: 1px solid #3a3228;
  padding-top: 10px;
  margin-top: 2px;
  text-align: center;
  letter-spacing: 0.5px;
}

.settings-legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.settings-legal-btn {
  background: #2a2418;
  border: 1px solid #4a4236;
  border-radius: 6px;
  color: var(--color-text, #e0d8c8);
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.70rem;
  padding: 6px 8px;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.settings-legal-btn:hover { background: #3a3228; }
.settings-legal-btn:active { transform: scale(0.98); }

/* 쿠폰 사용하기 트리거 버튼 (설정 패널) — 법적 버튼과 톤 통일하되 풀폭 */
.settings-coupon-trigger {
  display: block;
  width: 100%;
  background: #2a2418;
  border: 1px solid #4a4236;
  border-radius: 6px;
  color: var(--color-text, #e0d8c8);
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  padding: 9px 10px;
  cursor: pointer;
  text-align: center;
  margin-top: 4px;
  transition: background 0.15s;
}
.settings-coupon-trigger:hover { background: #3a3228; }
.settings-coupon-trigger:active { transform: scale(0.98); }

/* 쿠폰 입력 모달 */
.coupon-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  padding: 20px;
  animation: coupon-fade-in 0.2s ease;
}
@keyframes coupon-fade-in { from { opacity: 0; } to { opacity: 1; } }
.coupon-modal-card {
  background: linear-gradient(135deg, #2a2418 0%, #1f1a12 100%);
  border: 1px solid #4a4236;
  border-radius: 14px;
  padding: 22px 20px 18px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  animation: coupon-pop 0.25s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes coupon-pop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.coupon-modal-title {
  font-family: var(--font-pixel, sans-serif);
  font-size: 1rem;
  color: #b5a98a;
  text-align: center;
  font-weight: 700;
}
.coupon-modal-hint {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  color: #8a8070;
  text-align: center;
  line-height: 1.5;
}
.coupon-modal-input {
  background: #1a1610;
  border: 1px solid #4a4236;
  border-radius: 8px;
  color: var(--color-text, #e0d8c8);
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.9rem;
  padding: 12px 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}
.coupon-modal-input::placeholder { color: #5a5040; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.coupon-modal-input:focus { outline: none; border-color: #b5a98a; }
.coupon-modal-btns { display: flex; gap: 8px; }
.coupon-modal-btn {
  flex: 1;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.82rem;
  background: #b5a98a;
  color: #1a1610;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  font-weight: 700;
}
.coupon-modal-btn:active { background: #9a8e6f; transform: scale(0.97); }
.coupon-modal-btn-sub {
  flex: 1;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.82rem;
  background: transparent;
  color: #8a8070;
  border: 1px solid #4a4236;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
}
.coupon-modal-btn-sub:active { background: rgba(74, 66, 54, 0.3); }

/* 설정 패널 닫기·계정삭제 버튼 크기 통일 */
.settings-close-btn {
  margin-top: 6px;
}
.settings-credits-btn {
  font-size: 0.7rem;
  margin-top: 2px;
}
.settings-danger-btn {
  margin-top: 4px;
  font-size: 0.72rem;
  padding: 8px 10px;
}

/* 10연차 chest phase — "탭하여 다음" 안내 (카드 reveal 후 깜빡임) */
.b10-chest-hint {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  color: #e8d8a8;
  text-align: center;
  margin-top: 12px;
  min-height: 1.2em;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(232, 216, 168, 0.4);
  animation: b10-hint-blink 1.1s ease-in-out infinite;
}
.b10-chest-hint:empty { animation: none; }
@keyframes b10-hint-blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 스킵 시 희귀 카드 강조 펄스 */
.b10-card-rare-pulse {
  animation: b10-rare-pulse 0.55s ease-out;
  box-shadow: 0 0 24px rgba(255, 220, 120, 0.85);
}
@keyframes b10-rare-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255, 220, 120, 0); }
  35%  { transform: scale(1.12); box-shadow: 0 0 32px rgba(255, 220, 120, 0.9); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 220, 120, 0.5); }
}

#legal-modal {
  position: fixed;
  inset: 0;
  background: #15110d;
  z-index: 9900;  /* 9700 → 9900: consent-modal(9800)·설정 패널 위로 올라와 뒤 UI 완전 가림 */
  display: flex;
  flex-direction: column;
}
#legal-modal.hidden { display: none !important; }

.legal-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #1c1814;
  border-bottom: 1px solid #2a2418;
}

.legal-modal-back {
  background: #3a3228;
  border: 1px solid #4a4236;
  border-radius: 8px;
  color: #e0d8c8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  padding: 6px 12px;
  cursor: pointer;
}

.legal-modal-title {
  font-family: var(--font-title, var(--font-pixel, sans-serif));
  font-size: 0.95rem;
  color: #e8dcc0;
  font-weight: 700;
}

.legal-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 60px;
  color: #d8d0c0;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: keep-all;
}

.legal-modal-body h1 {
  font-family: var(--font-title, var(--font-pixel, sans-serif));
  font-size: 1.15rem;
  color: #f0e0b8;
  margin: 0 0 18px;
  text-align: center;
}
.legal-modal-body h2 {
  font-size: 0.95rem;
  color: #f0d090;
  margin: 22px 0 8px;
  padding-top: 10px;
  border-top: 1px solid #2a2418;
}
.legal-modal-body h3 {
  font-size: 0.85rem;
  color: #d8c890;
  margin: 16px 0 6px;
}
.legal-modal-body p { margin: 6px 0; }
.legal-modal-body ul, .legal-modal-body ol { padding-left: 22px; margin: 6px 0; }
.legal-modal-body li { margin: 3px 0; }
.legal-modal-body strong { color: #f0e0b8; }
.legal-modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.76rem;
}
.legal-modal-body th, .legal-modal-body td {
  border: 1px solid #3a3228;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.legal-modal-body th {
  background: #2a2418;
  color: #f0d090;
}

/* ── 첫 실행 동의 모달 ── */
#consent-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.95);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#consent-modal.hidden { display: none !important; }

.consent-card {
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  background: #1c1814;
  border: 1px solid #4a4236;
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent-title {
  font-family: var(--font-title, var(--font-pixel, sans-serif));
  font-size: 1.1rem;
  color: #f0e0b8;
  text-align: center;
  font-weight: 700;
}

.consent-subtitle {
  font-size: 0.78rem;
  color: #b5a98a;
  text-align: center;
  margin-bottom: 4px;
}

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

.consent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #2a2418;
  border: 1px solid #3a3228;
  border-radius: 8px;
  cursor: pointer;
}

.consent-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #d0a060;
  cursor: pointer;
}

.consent-item-label {
  flex: 1;
  font-size: 0.8rem;
  color: #e0d8c8;
}

.consent-view {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #5a4f3a;
  border-radius: 6px;
  color: #d8c890;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.7rem;
  padding: 4px 10px;
  cursor: pointer;
}
.consent-view:hover { background: #3a3228; }

.consent-age { background: #2e2618; border-color: #5a4824; }

.consent-all-row {
  border-top: 1px solid #3a3228;
  padding-top: 10px;
}
.consent-all-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #f0d090;
  font-weight: 700;
  cursor: pointer;
}
.consent-all-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #d0a060;
}

.consent-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.consent-agree-btn {
  background: linear-gradient(180deg, #d0a060 0%, #a8783a 100%);
  border: 1px solid #b5894a;
  border-radius: 8px;
  color: #1c1410;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
.consent-agree-btn:disabled {
  background: #3a3228;
  border-color: #2a2418;
  color: #6a604f;
  cursor: not-allowed;
}

.consent-decline-btn {
  background: transparent;
  border: 1px solid #4a4236;
  border-radius: 8px;
  color: #a89878;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  padding: 8px;
  cursor: pointer;
}
.consent-decline-btn:hover { background: #2a2418; }

.consent-foot {
  font-size: 0.72rem;
  color: #8a7e64;
  text-align: center;
  margin-top: 2px;
}

/* ── 동의 모달 — 빨간 경고 / 미체크 항목 펄스 ── */
.consent-warning {
  background: #5a1f1f;
  border: 1px solid #a04040;
  color: #ffd0d0;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  padding: 9px 12px;
  border-radius: 8px;
  animation: consentWarnPulse 0.6s ease 2;
}
.consent-warning.hidden { display: none !important; }

@keyframes consentWarnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 80, 80, 0); }
}

.consent-item.consent-item-flash {
  border-color: #e05050 !important;
  background: #3a1e1c !important;
  animation: consentItemFlash 0.5s ease 3;
}

@keyframes consentItemFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 80, 80, 0.35); }
}

/* ── 설정 패널 — 계정 삭제 (위험 버튼) ── */
.settings-danger-btn {
  background: #2a1818;
  border: 1px solid #4a2828;
  border-radius: 8px;
  color: #d08888;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  padding: 7px 10px;
  cursor: pointer;
  margin-top: 4px;
}
.settings-danger-btn:hover { background: #3a2020; color: #e89898; }

/* ── 계정 삭제 확인 모달 ── */
#delete-account-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.96);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#delete-account-modal.hidden { display: none !important; }

.delete-account-card {
  width: 100%;
  max-width: 380px;
  max-height: 92vh;
  overflow-y: auto;
  background: #1c1410;
  border: 1px solid #5a2828;
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delete-account-title {
  font-family: var(--font-title, var(--font-pixel, sans-serif));
  font-size: 1.1rem;
  color: #e89090;
  text-align: center;
  font-weight: 700;
}

.delete-account-warn {
  background: #3a1818;
  border: 1px solid #6a2828;
  color: #ffd0d0;
  text-align: center;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}
.delete-account-warn strong { color: #ff8080; }

.delete-account-detail {
  font-size: 0.78rem;
  color: #c8b8a8;
  line-height: 1.55;
  background: #2a1c14;
  border-radius: 8px;
  padding: 10px 12px;
}
.delete-account-detail p { margin: 5px 0; }
.delete-account-detail b { color: #f0d8b8; }

.delete-account-confirm-label {
  font-size: 0.8rem;
  color: #d8c8a8;
  text-align: center;
  margin-top: 4px;
}
.delete-account-confirm-label b { color: #f08080; }

.delete-account-input {
  width: 100%;
  background: #2a1c14;
  border: 1px solid #4a3828;
  border-radius: 8px;
  color: #f0e0c0;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.95rem;
  text-align: center;
  padding: 10px;
  outline: none;
  box-sizing: border-box;
}
.delete-account-input:focus { border-color: #6a4828; }

.delete-account-error {
  background: #4a1818;
  border: 1px solid #6a2828;
  color: #ffb0b0;
  font-size: 0.76rem;
  text-align: center;
  padding: 7px 10px;
  border-radius: 6px;
}
.delete-account-error.hidden { display: none !important; }

.delete-account-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.delete-account-confirm {
  background: linear-gradient(180deg, #c04040 0%, #802020 100%);
  border: 1px solid #a83a3a;
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
.delete-account-confirm:disabled {
  background: #2a1818;
  border-color: #3a1c1c;
  color: #6a4a4a;
  cursor: not-allowed;
}

.delete-account-cancel {
  background: transparent;
  border: 1px solid #4a4236;
  border-radius: 8px;
  color: #a89878;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  padding: 8px;
  cursor: pointer;
}
.delete-account-cancel:hover { background: #2a2418; }

/* 씨앗 단계 카운트다운 — 상호작용 버튼 바로 위 */
#seed-countdown {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  color: #b5a98a;
  text-align: center;
  padding: 4px 8px 2px;
  margin: 4px 0 2px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
#seed-countdown.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════ */
/* 설정 패널 — 섹션화 + 컴팩트 (v23+)                          */
/* ═══════════════════════════════════════════════════════════ */
.settings-section {
  padding: 10px 0 6px;
  border-top: 1px solid #3a3228;
  margin-top: 4px;
}
.settings-section:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}
.settings-section-label {
  font-size: 0.66rem;
  color: #8a8070;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* 접히는 섹션 (<details>) — 자주 안 보는 약관·정보 등 */
.settings-section-collapsible {
  padding: 8px 0 4px;
}
.settings-section-collapsible[open] {
  padding-bottom: 8px;
}
.settings-section-collapsible summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 16px;
  margin-bottom: 4px;
  user-select: none;
}
.settings-section-collapsible summary::-webkit-details-marker { display: none; }
.settings-section-collapsible summary::after {
  content: '▾';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  color: #8a8070;
  transition: transform 0.2s;
}
.settings-section-collapsible[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.settings-section-collapsible[open] summary {
  margin-bottom: 8px;
}
.settings-section-collapsible summary:hover { color: #b5a98a; }

/* UID 한 줄 컴팩트 (기존 settings-uid-box 대체) */
.settings-uid-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
}
.settings-uid-row .settings-uid-label {
  font-size: 0.66rem;
  color: #8a8070;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.settings-uid-row .settings-uid-value {
  flex: 1;
  font-family: monospace;
  font-size: 0.66rem;
  color: #b5a98a;
  background: #1a1610;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid #2a2418;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.settings-uid-row .settings-uid-copy {
  background: #4a4236;
  border: none;
  color: #e0d8c8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.65rem;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.settings-uid-row .settings-uid-copy:active { background: #5a5042; }

/* 풋터 — 크레딧·계정삭제 가로 컴팩트 */
.settings-footer {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.settings-footer .settings-credits-btn,
.settings-footer .settings-danger-btn {
  flex: 1;
  font-size: 0.66rem !important;
  padding: 7px 8px !important;
  margin: 0 !important;
}

/* 실제 날씨 위치 표시 행 */
.settings-weather-loc-row {
  background: rgba(74, 66, 54, 0.18);
  border-radius: 4px;
  padding: 6px 8px !important;
  margin-top: 4px !important;
  display: flex;
  align-items: center;
}
.settings-weather-loc-label {
  flex: 1;
  font-size: 0.7rem;
  color: #b5a98a;
}
.settings-weather-loc-change {
  background: transparent;
  border: 1px solid #6a6050;
  color: #b5a98a;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.65rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.settings-weather-loc-change:hover { background: #4a4236; }

/* real-weather 토글 활성화 상태 */
#real-weather-toggle.active {
  background: #b5a98a !important;
  color: #1a1610 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 도시 선택 모달                                              */
/* ═══════════════════════════════════════════════════════════ */
.weather-loc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500; padding: 20px;
  animation: weather-loc-fade 0.2s ease;
}
@keyframes weather-loc-fade { from { opacity: 0; } to { opacity: 1; } }
.weather-loc-modal-card {
  background: linear-gradient(135deg, #2a2418 0%, #1f1a12 100%);
  border: 1px solid #4a4236;
  border-radius: 14px;
  padding: 18px 16px 16px;
  width: 100%;
  max-width: 320px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  animation: weather-loc-pop 0.25s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes weather-loc-pop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.weather-loc-modal-title {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.95rem;
  color: #b5a98a;
  text-align: center;
  font-weight: 700;
}
.weather-loc-modal-hint {
  font-size: 0.7rem;
  color: #8a8070;
  text-align: center;
  line-height: 1.5;
}
.weather-loc-modal-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 54vh;
  padding-right: 4px;
}
.weather-loc-modal-item {
  background: #1a1610;
  border: 1px solid #4a4236;
  border-radius: 6px;
  color: var(--color-text, #e0d8c8);
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.76rem;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}
.weather-loc-modal-item:hover { background: #2a2418; border-color: #6a6050; }
.weather-loc-modal-item:active { transform: scale(0.98); }
.weather-loc-modal-item-active {
  border-color: #b5a98a;
  background: #2a2418;
  color: #d8c890;
}
.weather-loc-modal-btns {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.weather-loc-modal-geo {
  flex: 1;
  background: #b5a98a;
  color: #1a1610;
  border: none;
  border-radius: 6px;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
.weather-loc-modal-geo:active { background: #9a8e6f; transform: scale(0.97); }
.weather-loc-modal-cancel {
  flex: 1;
  background: transparent;
  border: 1px solid #4a4236;
  color: #8a8070;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}
.weather-loc-modal-cancel:active { background: rgba(74,66,54,0.3); }

/* ═══════════════════════════════════════════════════════════════
   CONSENT V2 — 베타 단계 경량 동의 모달 (단일 체크 + 자세히 보기)
   원본 5체크 모달은 consent_modal_legacy.html.bak 보존
   ═══════════════════════════════════════════════════════════════ */
.consent-card-v2 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(220,170,90,0.10), transparent 60%),
    linear-gradient(135deg, #2a2418 0%, #1f1a12 100%) !important;
  max-width: 360px;
  padding: 28px 22px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid #3a3224 !important;
  box-shadow:
    0 1px 0 rgba(220,170,100,0.18) inset,
    0 20px 50px rgba(0,0,0,0.7);
}
/* 양파 엠블럼 — 환영 톤. 표지 양파와 시각적 연결 */
.consent-v2-emblem {
  display: flex;
  justify-content: center;
  margin-bottom: -6px;
  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,0.55))
    drop-shadow(0 0 12px rgba(220,170,90,0.32));
  animation: consentEmblemGlow 3.2s ease-in-out infinite;
}
.consent-v2-emblem img.pixel-icon {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
}
@keyframes consentEmblemGlow {
  0%, 100% { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)) drop-shadow(0 0 12px rgba(220,170,90,0.28)); }
  50%      { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)) drop-shadow(0 0 20px rgba(240,200,110,0.5)); }
}
.consent-v2-title {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 1.25rem;
  color: #f0d8a8;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.consent-v2-subtitle {
  font-family: 'Gowun Batang', 'Batang', serif;
  font-size: 0.84rem;
  color: #c0a890;
  text-align: center;
  line-height: 1.75;
  letter-spacing: 0.02em;
}
/* 하단 사업자 정보 — 작고 차분하게 */
.consent-v2-footer-info {
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.62rem;
  color: #7a6850;
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.consent-v2-row {
  display: flex;
  gap: 10px;
  background: #1a1610;
  border: 1px solid #4a4236;
  border-radius: 10px;
  padding: 14px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.consent-v2-row:hover { border-color: #6a6050; }
.consent-v2-row input[type=checkbox] {
  margin-top: 2px;
  transform: scale(1.25);
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #b5a98a;
}
.consent-v2-label {
  flex: 1;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.78rem;
  color: #d8c8a8;
  line-height: 1.65;
}
.consent-v2-label strong { color: #e8d8a8; font-weight: 700; }
.consent-v2-row-flash {
  animation: consent-v2-flash 0.5s ease;
  border-color: #d8a060 !important;
}
@keyframes consent-v2-flash {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.consent-v2-details {
  margin-top: -2px;
}
.consent-v2-details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  color: #8a8070;
  text-align: center;
  padding: 6px 8px;
  user-select: none;
}
.consent-v2-details summary::-webkit-details-marker { display: none; }
.consent-v2-details summary::after {
  content: '▾';
  margin-left: 4px;
  font-size: 0.6rem;
  transition: transform 0.2s;
  display: inline-block;
}
.consent-v2-details[open] summary::after { transform: rotate(180deg); }
.consent-v2-details summary:hover { color: #b5a98a; }
.consent-v2-doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.consent-v2-doc-btn {
  background: #2a2418;
  border: 1px solid #4a4236;
  border-radius: 6px;
  color: #d8c8a8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.7rem;
  padding: 9px 6px;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background 0.15s;
}
.consent-v2-doc-btn:hover { background: #3a3228; }
.consent-v2-doc-btn:active { background: #4a4236; }
.consent-v2-start-btn {
  background: #b5a98a;
  border: none;
  border-radius: 10px;
  color: #1a1610;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  margin-top: 6px;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.1s;
}
.consent-v2-start-btn:active:not(:disabled) { background: #9a8e6f; transform: scale(0.98); }
.consent-v2-start-btn:disabled {
  background: #3a3328;
  color: #6a6050;
  cursor: not-allowed;
}
.consent-v2-later-btn {
  background: transparent;
  border: none;
  color: #6a6050;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
}
.consent-v2-later-btn:hover { color: #8a8070; }

/* ═══════════════════════════════════════════════════════════════
   인앱브라우저 안내 모달 — 모바일 + X/Discord/카톡/네이버 등
   다크모드 보정으로 화면이 어두워지는 문제 안내
   ═══════════════════════════════════════════════════════════════ */
#inapp-browser-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  padding: 20px;
}
#inapp-browser-modal.hidden { display: none; }
.inapp-modal-card {
  background: linear-gradient(135deg, #f3ebda 0%, #e4d5bb 100%);
  border-radius: 14px;
  max-width: 360px;
  width: 100%;
  padding: 24px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 14px;
  color: #2a1f12;
  font-family: var(--font-pixel, sans-serif);
}
.inapp-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1410;
  text-align: center;
  letter-spacing: 0.02em;
}
.inapp-modal-body {
  font-size: 0.8rem;
  line-height: 1.7;
  color: #3a2f22;
  text-align: center;
  word-break: keep-all;
}
.inapp-modal-body strong { color: #1a1410; font-weight: 700; }
.inapp-modal-url-box {
  display: flex;
  gap: 6px;
  background: #fdf6e8;
  border: 1px solid #c8b88a;
  border-radius: 8px;
  padding: 8px 8px 8px 12px;
  align-items: center;
}
.inapp-modal-url {
  flex: 1;
  font-size: 0.78rem;
  color: #3a2f22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inapp-modal-copy-btn {
  background: #8a6a3a;
  border: none;
  border-radius: 6px;
  color: #fdf6e8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.inapp-modal-copy-btn:active { background: #6a4f28; }
.inapp-modal-open-btn {
  background: #2a8a3a;
  border: none;
  border-radius: 10px;
  color: #fdf6e8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.1s;
}
.inapp-modal-open-btn:active { background: #1a6a2a; transform: scale(0.98); }
.inapp-modal-skip-btn {
  background: transparent;
  border: none;
  color: #6a5040;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  padding: 4px;
  cursor: pointer;
  text-decoration: underline;
}
.inapp-modal-skip-btn:hover { color: #3a2a1a; }
.inapp-modal-enter-btn {
  background: #8a6a3a;
  border: none;
  border-radius: 10px;
  color: #fdf6e8;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.1s;
}
.inapp-modal-enter-btn:active { background: #6a4f28; transform: scale(0.98); }
.inapp-modal-dontshow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: var(--font-pixel, sans-serif);
  font-size: 0.72rem;
  color: #6a5040;
  padding: 2px 0;
  cursor: pointer;
  user-select: none;
}
.inapp-modal-dontshow-row input[type=checkbox] {
  margin: 0;
  transform: scale(1.1);
  accent-color: #8a6a3a;
  cursor: pointer;
}

/* ── 힐링 톤 강화 (v23.17) ─────────────────────────────────────────── */

/* 물주기 ripple — 부드러운 파스텔 블루 확산 원 (이미 spawnWaterRipple으로 생성) */
.water-ripple {
  position: fixed;
  pointer-events: none;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border: 2px solid rgba(140, 200, 240, 0.55);
  border-radius: 50%;
  z-index: 250;
  animation: water-ripple-expand 1100ms cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
@keyframes water-ripple-expand {
  0%   { transform: scale(0.5); opacity: 0.0; border-width: 3px; }
  15%  { opacity: 0.85; }
  100% { transform: scale(6); opacity: 0; border-width: 1px; }
}

/* 토양 wet 톤 — 화분 발치 살짝 어두워졌다가 복귀 (촉촉한 흙 느낌) */
.soil-wet-tone {
  position: fixed;
  pointer-events: none;
  width: 60px;
  height: 22px;
  margin-left: -30px;
  margin-top: -11px;
  background: radial-gradient(ellipse at center, rgba(80, 50, 30, 0.35) 0%, rgba(80, 50, 30, 0.18) 50%, transparent 80%);
  border-radius: 50%;
  z-index: 240;
  opacity: 0;
  animation: soil-wet-fade 900ms ease-out forwards;
  filter: blur(2px);
}
@keyframes soil-wet-fade {
  0%   { opacity: 0; }
  15%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* 양파 ambient sway — 화분 상세창에서 잎사귀 살짝 흔들림 (transform-origin 아래 중심) */
@keyframes onion-ambient-sway {
  0%   { transform: rotate(-0.6deg); }
  25%  { transform: rotate(0.9deg); }
  50%  { transform: rotate(-0.4deg); }
  75%  { transform: rotate(1.1deg); }
  100% { transform: rotate(-0.6deg); }
}
.anim-ambient-sway {
  animation: onion-ambient-sway 5.5s ease-in-out infinite;
  transform-origin: 50% 100%;  /* 아래 중심 — 양파 뿌리 부분 기준으로 흔들림 */
}

/* ── 로그인 화면 ───────────────────────────────────────────── */
#login-screen {
  background: radial-gradient(ellipse at center, #2a1f14 0%, #14100a 70%, #0a0805 100%);
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  gap: 24px;
}
.login-logo {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  animation: onion-ambient-sway 5.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.login-logo img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.login-title {
  font-family: 'Cafe24Ssurround', 'Pretendard', sans-serif;
  font-size: 2.4rem;
  color: #f0d8a8;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(220, 170, 90, 0.3);
  line-height: 1.1;
}
.login-subtitle {
  font-family: 'Cafe24Ssurround', 'Pretendard', sans-serif;
  font-size: 1.4rem;
  color: #c8a878;
  letter-spacing: 0.08em;
  margin-top: -4px;
  margin-bottom: 32px;
}
.login-buttons {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-btn {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: none;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.1s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.login-btn:active {
  transform: scale(0.97);
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}
.login-btn-icon {
  font-size: 1.2rem;
  font-weight: 700;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-btn-label {
  letter-spacing: 0.03em;
}

/* Google 버튼 — 흰 배경 + 어두운 글씨 (Google 공식 가이드라인) */
.login-btn-google {
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.login-btn-google .login-btn-icon {
  color: #4285f4;
  background: linear-gradient(180deg, #4285f4 0%, #4285f4 25%, #34a853 25%, #34a853 50%, #fbbc05 50%, #fbbc05 75%, #ea4335 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Apple 버튼 — 검정 배경 + 흰 글씨 (Apple 공식 가이드라인) */
.login-btn-apple {
  background: #000;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.login-btn-apple .login-btn-icon {
  font-size: 1.4rem;
  color: #fff;
}

.login-footer {
  font-family: 'Pretendard', sans-serif;
  font-size: 0.7rem;
  color: #8a7858;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.6;
  max-width: 320px;
  margin-top: 12px;
}
.login-footer a {
  color: #c8a878;
  text-decoration: underline;
}
.login-error {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(180, 60, 50, 0.18);
  border: 1px solid rgba(220, 80, 70, 0.4);
  border-radius: 6px;
  color: #f0a8a0;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 4px;
}
.login-error.hidden { display: none; }