/* ==========================================================================
   생강이네 해피 베이커리 카페 - 스타일시트
   (2줄 상단바 + 좌우 드래그 스크롤 주문바 + 하단 좌측 가방 + 커스텀 SVG 아이콘)
   ========================================================================== */

:root {
  --bg-cream: #FFFDF7;
  --board-bg: #F7EFE1;
  --cell-light: #FFFDF9;
  --cell-alt: #FDF6E7;
  --cell-border: #EADBC4;
  --primary-amber: #F59E0B;
  --primary-amber-dark: #D97706;
  --pink-accent: #EC4899;
  --pink-soft: #FCE7F3;
  --green-ready: #10B981;
  --green-soft: #D1FAE5;
  --text-brown: #451A03;
  --text-muted: #78350F;
  --board-size: 320px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #291D12;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color: var(--text-brown);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-shell {
  width: 100%;
  max-width: 460px;
  height: 100%;
  max-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-cream);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 36px rgba(0, 0, 0, 0.45);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 1. 최상단 2줄 헤더 (재화 바와 메뉴 버튼을 2줄로 분리하여 절대 안 가려지게!) */
.top-status-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%);
  border-bottom: 1.5px solid #F59E0B;
  flex-shrink: 0;
}

.top-row-resources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 100%;
}

.res-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #FBBF24;
  border-radius: 999px;
  padding: 2.5px 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-brown);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(217, 119, 6, 0.15);
}

.res-pill.star-pill {
  background: #FEF9C3;
  border-color: #EAB308;
  cursor: pointer;
}

.star-lv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5px;
  line-height: 1;
}

.star-xp-track {
  width: 34px;
  height: 3.5px;
  background: #FDE68A;
  border-radius: 99px;
  overflow: hidden;
}

.star-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  border-radius: 99px;
  transition: width 0.25s ease;
}

.res-pill.energy-pill {
  cursor: pointer;
}

.energy-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  margin-left: 1px;
}

.top-row-menus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.store-title-box {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-brown);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-badge-pill {
  background: #F59E0B;
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  flex-shrink: 0;
}

.top-right-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-mini-menu {
  background: #fff;
  border: 1.5px solid #D97706;
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-brown);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1.5px 0 rgba(217, 119, 6, 0.2);
}

.btn-mini-menu:active {
  transform: translateY(1px);
}

.btn-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #D97706;
  background: #FFFBEB;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 2. 카페 스테이지 & 햄스터 크루(생강이·라미·몽이) 배너 */
.cafe-stage-banner {
  padding: 4px 8px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border-bottom: 1.5px solid #FDE68A;
  flex-shrink: 0;
}

.hamster-crew-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.owner-speech-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.crew-avatar-box {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #F59E0B;
  background: #FFFBEB;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crew-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.crew-fallback-emoji {
  font-size: 16px;
  position: absolute;
  z-index: 0;
}

.speech-bubble {
  background: #fff;
  border: 1.5px solid #FCD34D;
  border-radius: 10px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.32;
  word-break: keep-all;
  color: var(--text-brown);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.speech-bubble.pop {
  animation: jellyPop 0.32s ease;
}

.part-timers-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.staff-mini-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid #FCD34D;
  border-radius: 8px;
  padding: 2px 5px;
  cursor: pointer;
  min-width: 50px;
}

.staff-mini-slot.ready-glow {
  border-color: #10B981;
  background: #ECFDF5;
  animation: bounceGentle 1.1s infinite;
}

.staff-mini-avatar {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #F59E0B;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.staff-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.staff-mini-name {
  font-size: 9px;
  font-weight: 800;
}

.staff-mini-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 99px;
}

.staff-mini-badge.hire {
  background: #FEF3C7;
  color: #B45309;
}

.staff-mini-badge.ready {
  background: #10B981;
  color: #fff;
}

.staff-mini-badge.cooldown {
  background: #E5E7EB;
  color: #4B5563;
}

.cafe-decor-strip {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}

.cafe-decor-strip::-webkit-scrollbar {
  display: none;
}

.decor-mini-chip {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #FDE68A;
  white-space: nowrap;
  font-weight: 700;
  flex-shrink: 0;
}

.decor-mini-chip.owned {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

.decor-mini-chip.locked {
  opacity: 0.45;
}

/* 3. 손님 주문 바 (고정 높이 74px - 좌측: 아이콘 세로 풀배치 / 우측 상단: 금액 / 우측 하단: 메뉴1 메뉴2) */
.orders-section {
  padding: 4px 8px;
  background: #FFF8EB;
  border-bottom: 1.5px solid #EADBC4;
  flex-shrink: 0;
  height: 74px;
  display: flex;
  align-items: center;
}

.orders-container {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  width: 100%;
  height: 64px;
}

.orders-container:active {
  cursor: grabbing;
}

.orders-container::-webkit-scrollbar {
  display: none;
}

.order-card {
  width: 124px;
  min-width: 124px;
  height: 62px;
  min-height: 62px;
  max-height: 62px;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid #E5D3B3;
  border-radius: 12px;
  padding: 4px 5px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: stretch;
  position: relative;
  gap: 5px;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}

.order-card.order-card-vip {
  border-color: #F59E0B;
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
}

/* 다 모았을 때 버튼 없이 카드 자체 배경·테두리가 초록빛으로 빛남 (터치 시 서빙!) */
.order-card.order-card-ready {
  background: linear-gradient(135deg, #D1FAE5 0%, #6EE7B7 100%);
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.28), 0 2px 6px rgba(5, 150, 105, 0.25);
  cursor: pointer;
  animation: pulseScale 1.1s infinite;
}

.order-card.order-card-ready:active {
  transform: scale(0.95);
}

/* 좌측 열: 손님 아이콘 (3줄 높이 전체 차지) */
.order-avatar-col {
  width: 36px;
  height: 100%;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-card.order-card-ready .order-avatar-col {
  background: rgba(255, 255, 255, 0.85);
  border-color: #10B981;
}

.customer-avatar {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* 우측 열: 1줄 금액 / 2~3줄 메뉴1 메뉴2 */
.order-main-col {
  display: grid;
  grid-template-rows: 14px 1fr;
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  height: 100%;
}

.order-reward {
  font-size: 9.5px;
  font-weight: 900;
  color: #B45309;
  white-space: nowrap;
  line-height: 1;
  background: #FEF3C7;
  padding: 1px 6px;
  border-radius: 99px;
}

.order-card.order-card-ready .order-reward {
  background: #065F46;
  color: #FFFFFF;
}

/* 라미 패시브 팁: 기본금 뒤에 다른 색으로 (+N) */
.order-tip {
  margin-left: 1px;
  color: #DB2777;
}
.order-card.order-card-ready .order-tip {
  color: #FBCFE8;
}

.order-reqs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.order-req-item {
  width: 33px;
  height: 34px;
  border-radius: 7px;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1px;
  flex-shrink: 0;
}

.order-req-item .svg-icon-wrap {
  width: 21px;
  height: 21px;
}

.order-req-item.req-ready {
  background: #FFFFFF;
  border-color: #059669;
}

.req-lv {
  font-size: 7.5px;
  font-weight: 800;
  color: #78350F;
  line-height: 1;
}

.req-check {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #059669;
  color: #fff;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

/* 4. 메인 7x7 머지 보드판 영역 */
.board-wrapper {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  overflow: hidden;
  container-type: size;
}

.merge-grid {
  width: var(--board-size, 320px);
  height: var(--board-size, 320px);
  background: var(--board-bg);
  border: 2.5px solid #D6C1A3;
  border-radius: 14px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 2.5px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.06);
  touch-action: none;
  flex-shrink: 0;
}

.board-cell {
  background: var(--cell-light);
  border-radius: 7px;
  border: 1px solid rgba(214, 193, 163, 0.45);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.board-cell.cell-alt {
  background: var(--cell-alt);
}

.board-cell.cell-selected {
  box-shadow: 0 0 0 2px #F59E0B inset;
  background: #FEF3C7;
}

.board-cell.merge-candidate {
  box-shadow: 0 0 0 2px #10B981 inset, 0 0 8px rgba(16, 185, 129, 0.45);
  background: #ECFDF5;
  animation: pulseScale 0.8s infinite;
}

.board-cell.drag-over {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #3B82F6 inset;
}

.board-cell.dragging-source .cell-item {
  opacity: 0.35;
}

.cell-item {
  width: 92%;
  height: 92%;
  border-radius: 7px;
  border: 1.5px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.08);
  cursor: grab;
  overflow: hidden;
}

.svg-icon-wrap {
  /* 그림 아이콘은 여백 5%로 맞춰 그려서 칸을 넉넉히 쓴다 (예전 SVG 는 68%) */
  width: 86%;
  height: 86%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.svg-icon-wrap img {
  -webkit-user-drag: none;
  user-select: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.item-emoji {
  font-size: calc(var(--board-size, 320px) / 15.5);
  line-height: 1;
}

.item-lv-badge {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 8px;
  font-weight: 800;
  color: #451A03;
  background: rgba(255, 255, 255, 0.88);
  padding: 0 2.5px;
  border-radius: 3px;
  line-height: 1.1;
}

/* 생성기 전용 스타일 (3단계 충전 게이지 & 유휴 상태 표시) */
.generator-item {
  border-width: 2px;
  box-shadow: 0 2px 0 rgba(180, 83, 9, 0.35);
  cursor: pointer;
}

.generator-item .svg-icon-wrap {
  width: 80%;
  height: 80%;
}

.generator-item.gen-holding {
  transform: scale(0.94);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.55);
}

.generator-item.gen-idle {
  filter: grayscale(0.45) brightness(0.93);
  border-style: dashed;
}

.gen-bolt-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: #F59E0B;
  color: #fff;
  font-size: 7.5px;
  padding: 0 2.5px;
  height: 12px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border: 1px solid #fff;
}

.gen-bolt-badge.idle {
  background: #6B7280;
}

.gen-stage-dots {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 1px;
  background: rgba(255, 255, 255, 0.88);
  padding: 1px 3.5px;
  border-radius: 99px;
}

.gen-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #D1D5DB;
}

.gen-dot.filled {
  background: #10B981;
  box-shadow: 0 0 3px rgba(16, 185, 129, 0.6);
}

.gen-dot.recharging {
  background: #F59E0B;
  animation: pulseScale 0.8s infinite;
}

.gen-idle-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
}

/* 거미줄/선물 포장 칸 */
.locked-cobweb {
  filter: saturate(0.75);
  border-style: dashed !important;
}

.cobweb-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(251, 113, 133, 0.16),
    rgba(251, 113, 133, 0.16) 5px,
    rgba(255, 255, 255, 0.35) 5px,
    rgba(255, 255, 255, 0.35) 10px
  );
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1px;
  pointer-events: none;
}

.cobweb-overlay span {
  font-size: 9px;
}

.order-ready-tag {
  position: absolute;
  top: 1px;
  left: 1px;
  background: #10B981;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  padding: 0.5px 2.5px;
  border-radius: 3px;
}

.consumable-tag {
  position: absolute;
  top: 1px;
  right: 1px;
  background: #0284C7;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  padding: 0.5px 2.5px;
  border-radius: 3px;
}

/* 5. 하단 컨트롤 덱 (윗줄: 아이템 정보 / 아랫줄: 제일 왼쪽 [가방] + [1·2·3호점 탭]) */
.bottom-control-deck {
  padding: 4px 8px 5px;
  background: #FFF8EB;
  border-top: 1.5px solid #EADBC4;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selection-info-bar {
  background: #fff;
  border: 1.5px solid #E5D3B3;
  border-radius: 10px;
  padding: 3px 8px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.sel-empty-hint {
  font-size: 10px;
  color: #92400E;
  opacity: 0.7;
  text-align: center;
  width: 100%;
}

.sel-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.sel-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sel-icon .svg-icon-wrap {
  width: 24px;
  height: 24px;
}

.sel-text {
  min-width: 0;
  flex: 1;
}

.sel-title {
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-desc {
  font-size: 9px;
  color: #92400E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-lv, .badge-gen, .badge-locked {
  font-size: 8.5px;
  padding: 0.5px 4px;
  border-radius: 99px;
  background: #FEF3C7;
  color: #B45309;
}

.badge-locked {
  background: #FFE4E6;
  color: #E11D48;
}

.sel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-quick-action {
  border: 1.5px solid #D97706;
  background: #FFFBEB;
  color: #78350F;
  border-radius: 7px;
  padding: 3.5px 7px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-quick-action.primary {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
  border-color: #B45309;
}

.btn-quick-action.sell {
  background: #FEF2F2;
  border-color: #F87171;
  color: #B91C1C;
}

/* 6. 최하단 네비게이션 줄: 제일 왼쪽 칸 [가방] + 우측 3칸 [1호점 / 2호점 / 3호점] */
.bottom-nav-row {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 5px;
  align-items: stretch;
}

.btn-storage-bag {
  background: #fff;
  border: 1.5px solid #D97706;
  border-radius: 9px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1.5px 0 rgba(217, 119, 6, 0.2);
}

.btn-storage-bag:active {
  transform: translateY(1px);
}

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

.bag-label-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.bag-title {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--text-brown);
}

.bag-count {
  font-size: 8.5px;
  font-weight: 800;
  color: #B45309;
}

.store-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.store-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 5px;
  border-radius: 9px;
  border: 1.5px solid #E5D3B3;
  background: #fff;
  color: var(--text-brown);
  cursor: pointer;
  position: relative;
}

/* 매장 주문 금화 배율 (2호점 ×1.5, 3호점 ×2) — 칸 모서리에 겹쳐 띄워 버튼 크기는 그대로 */
.tab-coin-mult {
  position: absolute; top: -7px; right: -3px; z-index: 2; pointer-events: none;
  font-size: 8.5px; font-weight: 900; line-height: 1; white-space: nowrap;
  padding: 2px 3px; border-radius: 6px; border: 1px solid #fff;
  background: linear-gradient(180deg, #FDE68A, #F59E0B); color: #451A03;
  box-shadow: 0 1px 2px rgba(69, 26, 3, 0.25);
}

.store-tab-btn.active {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #D97706;
  box-shadow: 0 1.5px 0 #D97706;
}

.store-tab-btn.locked {
  background: #F3F4F6;
  color: #6B7280;
  border-style: dashed;
}

.tab-icon {
  font-size: 13px;
}

.tab-label-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.tab-num {
  font-size: 9px;
  font-weight: 900;
  color: #B45309;
}

.tab-name {
  font-size: 9px;
  font-weight: 700;
}

/* 드래그 중 손가락 따라다니는 고스트 */
.drag-ghost-item {
  position: fixed;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -38px;
  background: rgba(255, 251, 235, 0.95);
  border: 2.5px solid #F59E0B;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transform: scale(1.1);
}

.drag-ghost-item .svg-icon-wrap {
  width: 32px;
  height: 32px;
}

.ghost-lv {
  font-size: 9.5px;
  font-weight: 800;
}

/* 플로팅 보상 텍스트 & 폭죽 */
.floating-reward-text {
  position: fixed;
  transform: translate(-50%, 0);
  font-size: 11.5px;
  font-weight: 900;
  color: #B45309;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #F59E0B;
  padding: 2px 7px;
  border-radius: 99px;
  pointer-events: none;
  z-index: 9500;
  animation: floatUpFade 0.95s ease-out forwards;
}

.confetti-particle {
  position: fixed;
  top: -20px;
  font-size: 20px;
  pointer-events: none;
  z-index: 9900;
  animation: confettiFall 1.5s ease-in forwards;
}

/* 모달 공통 스타일 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  width: 100%;
  max-width: 420px;
  max-height: 84dvh;
  background: #FFFDF7;
  border: 3px solid #F59E0B;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  animation: jellyPop 0.25s ease;
}

.modal-header {
  padding: 10px 14px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-bottom: 2px solid #F59E0B;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 900;
}

.btn-close-modal {
  background: #fff;
  border: 1.5px solid #D97706;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 900;
  cursor: pointer;
}

.modal-body {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 공용 확인 창 */
.confirm-dialog { max-width: 320px; }
.confirm-body { align-items: stretch; text-align: center; gap: 8px; padding: 16px 14px 14px; }
.confirm-message { margin: 0; font-size: 15px; font-weight: 800; color: #78350F; white-space: pre-line; line-height: 1.45; }
.confirm-detail { margin: 0; min-height: 1.2em; font-size: 12.5px; font-weight: 700; color: #B45309; font-variant-numeric: tabular-nums; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.confirm-actions button { min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 900; cursor: pointer; border: 2px solid; }
.confirm-cancel { background: #FFF; color: #92400E; border-color: #E5D3B3; }
.confirm-ok { background: linear-gradient(180deg, #FBBF24, #F59E0B); color: #451A03; border-color: #D97706; }
.confirm-actions button:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }

/* 최종 단계 아이템: 금색 테두리 + MAX (레이아웃 밖 오버레이) */
.cell-item.regular-item.item-max {
  box-shadow: inset 0 0 0 2px #FDE68A, 0 0 0 2px #D97706;
  border-color: #B45309 !important;
}
/* 최고 단계는 단계 배지 자리(오른쪽 아래)에 금색 MAX. 위쪽은 "터치!"·"주문✓" 자리라 겹치지 않게 */
.item-lv-badge.lv-max {
  background: linear-gradient(180deg, #FDE68A, #F59E0B);
  color: #451A03; font-weight: 900; padding: 0 3px;
}

/* 알바생 카드 */
.staff-card {
  display: flex;
  gap: 10px;
  background: #fff;
  border: 2px solid #E5D3B3;
  border-radius: 14px;
  padding: 10px;
  align-items: center;
}

.staff-card.owner-card {
  background: #FFFBEB;
  border-color: #F59E0B;
}

.staff-card.hired {
  border-color: #10B981;
  background: #F0FDF4;
}

.staff-portrait {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #F59E0B;
  flex-shrink: 0;
  background: #FEF3C7;
}

.staff-info {
  flex: 1;
}

.staff-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.staff-name {
  font-size: 13.5px;
  font-weight: 900;
}

.staff-species {
  font-size: 10px;
  background: #FEF3C7;
  padding: 2px 6px;
  border-radius: 99px;
  font-weight: 700;
}

.staff-desc {
  font-size: 11px;
  color: #78350F;
  line-height: 1.3;
  margin-bottom: 7px;
}

.staff-actions-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.btn-modal-action {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1.5px solid #D97706;
  background: #FFFBEB;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.btn-modal-action.primary {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
}

.btn-modal-action:disabled {
  background: #E5E7EB;
  border-color: #D1D5DB;
  color: #6B7280;
  cursor: not-allowed;
}

/* 매장 확장 & 인테리어 모달 */
.store-expansion-card {
  background: #fff;
  border: 2px solid #E5D3B3;
  border-radius: 14px;
  padding: 10px;
}

.store-expansion-card.unlocked {
  border-color: #F59E0B;
}

.store-exp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #E5D3B3;
}

.store-exp-header h4 {
  font-size: 13.5px;
  margin-bottom: 2px;
}

.store-exp-header p {
  font-size: 11px;
  color: #78350F;
}

.store-status-pill {
  font-size: 10.5px;
  font-weight: 800;
  background: #D1FAE5;
  color: #065F46;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}

.btn-unlock-store {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.decor-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.decor-item-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 9px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}

.decor-item-row.owned {
  background: #F0FDF4;
  border-color: #A7F3D0;
}

.decor-icon-box {
  font-size: 18px;
}

.decor-meta {
  flex: 1;
}

.decor-name {
  font-size: 11.5px;
  font-weight: 800;
}

.decor-desc {
  font-size: 10px;
  color: #78350F;
}

.btn-buy-decor {
  background: #F59E0B;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.btn-buy-decor:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}

.decor-owned-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: #059669;
}

/* 도감 & 보관함 */
.book-chain-card {
  background: #fff;
  border: 1.5px solid #E5D3B3;
  border-radius: 12px;
  padding: 9px;
}

.book-chain-card h4 {
  font-size: 12.5px;
  margin-bottom: 6px;
}

.book-chain-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.book-item-cell {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  padding: 5px 3px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book-item-cell.unknown {
  background: #F3F4F6;
  border-color: #E5E7EB;
  opacity: 0.6;
}

.book-emoji {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-lv {
  font-size: 9px;
  font-weight: 800;
  color: #B45309;
}

.book-name {
  font-size: 9.5px;
  font-weight: 700;
  margin-top: 1px;
}

.bag-upgrade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 8px 10px;
}

.bag-upgrade-info {
  font-size: 11.5px;
  font-weight: 800;
}

.bag-upgrade-info small {
  display: block;
  font-size: 10px;
  color: #92400E;
  font-weight: 600;
}

/* 가방 모달: 메인 보드의 1칸과 완전히 동일한 크기·디자인의 7열 보드형 슬롯 */
.storage-board-grid {
  width: var(--board-size, 320px);
  max-width: 100%;
  margin: 0 auto;
  background: var(--board-bg);
  border: 2.5px solid #D6C1A3;
  border-radius: 14px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2.5px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.storage-board-cell {
  aspect-ratio: 1 / 1;
  background: var(--cell-light);
  border-radius: 7px;
  border: 1px solid rgba(214, 193, 163, 0.45);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.storage-board-cell.filled {
  cursor: pointer;
}

.storage-board-cell.filled:active {
  transform: scale(0.94);
}

/* 다른 가게 물품이라 잠겼을 때: 음영 처리 + 이미지 위 자물쇠 표시 */
.storage-board-cell.other-store {
  cursor: not-allowed;
}

.storage-board-cell.other-store .cell-item {
  filter: brightness(0.52) saturate(0.55);
}

.bag-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.28);
  font-size: calc(var(--board-size, 320px) / 17);
  pointer-events: none;
  z-index: 4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 애니메이션 키프레임 */
@keyframes jellyPop {
  0% { transform: scale(0.75); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

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

@keyframes floatUpFade {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(1.05); }
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(95vh) rotate(360deg); opacity: 0; }
}

.anim-merge-pop {
  animation: jellyPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim-spawn-pop {
  animation: jellyPop 0.22s ease-out;
}

/* 생성기 누름: 제 크기에서 시작해 눌렸다 돌아온다 (빠르게 연타해도 크기가 툭 튀지 않게) */
@keyframes genTap {
  0% { transform: scale(1); }
  35% { transform: scale(0.9); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.anim-jelly {
  animation: genTap 0.24s ease-out;
}

/* 한국어 가독성 및 줄바꿈 정돈 */
.staff-desc,
.decor-desc,
.store-exp-header p,
.sel-desc {
  word-break: keep-all;
  line-height: 1.45;
}

/* 카페 레벨 & 성장 혜택 모달 (#modal-level) */
.level-modal-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #F59E0B;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.level-badge-hero {
  font-size: 16px;
  font-weight: 900;
  color: #92400E;
  background: #fff;
  padding: 4px 14px;
  border-radius: 99px;
  border: 1.5px solid #F59E0B;
}

.level-xp-bar-wrap {
  width: 100%;
  height: 22px;
  background: #FDE68A;
  border: 1.5px solid #D97706;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-xp-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  transition: width 0.3s ease;
}

.level-xp-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 900;
  color: #451A03;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

.level-next-reward-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #FCD34D;
  text-align: center;
}

.level-box-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #78350F;
  margin-bottom: 5px;
}

.level-reward-pills {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.level-reward-pills span {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  color: #92400E;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
}

.level-guide-section {
  background: #fff;
  border: 1.5px solid #EADBC4;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.level-guide-section h4 {
  font-size: 12.5px;
  font-weight: 900;
  color: #78350F;
  margin-bottom: 6px;
}

.level-guide-list {
  padding-left: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.level-guide-list li {
  font-size: 11.5px;
  line-height: 1.45;
  color: #451A03;
  word-break: keep-all;
}


/* ==========================================================================
   v6: 생성기 단계, 황금, 부재료, 상자·충전기·버블, 보상 창고, 2배 토글, 도감 보상
   ========================================================================== */
.bottom-nav-row { grid-template-columns: auto 1fr; }
.bottom-left-buttons { display: flex; gap: 4px; }
.bottom-left-buttons .btn-storage-bag { position: relative; padding: 4px 5px; min-width: 50px; }
.reward-count-badge {
  position: absolute; top: -5px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #E11D48; color: #fff; font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;
  font-variant-numeric: tabular-nums;
}
.reward-count-badge.empty { visibility: hidden; }
.btn-toggle-x2.on { background: linear-gradient(135deg, #FBBF24, #F59E0B); border-color: #B45309; }
.btn-toggle-x2.on .bag-title, .btn-toggle-x2.on .bag-count { color: #451A03; }
.btn-toggle-x2.locked { opacity: 0.55; filter: grayscale(0.6); }

.energy-over { color: #2563EB; }
.gem-pill { cursor: pointer; }

/* 선택 막대: 버튼 세 칸 고정 */
.sel-actions-fixed { display: grid; grid-template-columns: repeat(3, 62px); gap: 4px; }
.sel-actions-fixed .btn-quick-action { position: relative; padding: 3.5px 2px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.btn-quick-action:disabled { background: #F3F4F6; border-color: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }
.dot-badge { position: absolute; top: 2px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #E11D48; display: inline-block; }
.btn-mini-menu { position: relative; }
.btn-mini-menu.has-dot::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #E11D48; border: 1.5px solid #fff; }

/* 생성기 단계와 충전 막대 */
/* 생성기 단계는 아이템처럼 오른쪽 아래 (위쪽은 남은 횟수 ⚡ 자리라, 좁은 칸에서 둘이 겹쳤다) */
.gen-lv-badge {
  position: absolute; bottom: 1px; right: 2px; z-index: 2; font-size: 7.5px; font-weight: 900; color: #451A03;
  background: rgba(255, 255, 255, 0.9); padding: 0 3px; border-radius: 4px; line-height: 12px;
}
.gen-charge-bar { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.6); overflow: hidden; }
.gen-charge-bar i { display: block; height: 100%; background: #F59E0B; }
.generator-item.gen-part { filter: grayscale(0.7) brightness(1.05); border-style: dashed !important; cursor: grab; }

/* 황금 */
.cell-item.golden-item {
  background-image: linear-gradient(135deg, rgba(254, 240, 138, 0.85), rgba(245, 158, 11, 0.55)) !important;
  border-color: #B45309 !important; box-shadow: 0 0 0 1.5px #FDE68A inset, 0 0 6px rgba(245, 158, 11, 0.65);
}
.golden-spark { position: absolute; top: 0; right: 2px; font-size: 9px; pointer-events: none; }

/* 상한 자물쇠 */
.cap-lock-badge { position: absolute; top: 1px; left: 2px; font-size: 8px; line-height: 1; pointer-events: none; opacity: 0.85; }

/* 상자, 충전기, 버블 */
.special-item { background: #FFF7ED; border-color: #FB923C; cursor: pointer; }
.charger-item { background: #E0F2FE; border-color: #0EA5E9; }
.bubble-item {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(186, 230, 253, 0.55) 60%, rgba(125, 211, 252, 0.45));
  border: 2px solid #7DD3FC; border-radius: 50%; cursor: pointer;
}
.bubble-timer {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%); font-size: 7.5px; font-weight: 900;
  color: #0369A1; background: rgba(255, 255, 255, 0.9); padding: 0 3px; border-radius: 4px; font-variant-numeric: tabular-nums;
}

/* 주문 바꾸기 (카드 모서리, 늘 같은 자리) */
.order-card { position: relative; }
.order-swap-btn {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 18px; border-radius: 6px;
  border: 1px solid #E5D3B3; background: rgba(255, 255, 255, 0.92); font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 1px; padding: 0; cursor: pointer;
}
.order-swap-btn .swap-left { font-size: 8px; font-weight: 900; color: #92400E; font-variant-numeric: tabular-nums; }
.order-swap-btn.off, .order-swap-btn.locked { opacity: 0.45; }
.order-req-item.req-sub { outline: 1.5px dashed #16A34A; outline-offset: -2px; border-radius: 6px; }

/* 알바생 선물 고르기, 상점 */
.choice-hint { margin: 0; font-size: 11.5px; color: #92400E; }
.choice-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.choice-card { background: #fff; border: 1.5px solid #E5D3B3; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
button.choice-card { cursor: pointer; font: inherit; }
.choice-title { font-size: 12px; font-weight: 900; color: #78350F; align-self: flex-start; }
.choice-menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.choice-pick { background: #FFFBEB; border: 1.5px solid #FCD34D; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 800; color: #78350F; }
.choice-card .cell-item, .choice-pick .cell-item, .shop-item .cell-item { width: 48px; height: 48px; }
.shop-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shop-item { background: #FFFBEB; border: 1.5px solid #FCD34D; border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; font-size: 10px; font-weight: 800; color: #78350F; cursor: pointer; }
.shop-item:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-item b { color: #7C3AED; }

/* 도감: NEW 겹침 표시, 카테고리 완성 칸, 탭 */
.book-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.book-tab { position: relative; border: 1.5px solid #E5D3B3; background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 11px; font-weight: 800; color: #78350F; cursor: pointer; }
.book-tab.active { background: #FEF3C7; border-color: #D97706; }
button.book-item-cell { position: relative; font: inherit; cursor: default; }
.book-item-cell.is-new { cursor: pointer; border-color: #E11D48; box-shadow: 0 0 0 1.5px #FECDD3 inset; }
.new-badge { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); background: #E11D48; color: #fff; font-size: 7.5px; font-weight: 900; padding: 1px 4px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.book-emoji .cell-item, .book-emoji .svg-icon-wrap { width: 28px; height: 28px; }
.book-cat-reward { border: 1.5px dashed #D1D5DB; background: #F9FAFB; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: 9px; font-weight: 800; color: #6B7280; cursor: default; }
.book-cat-reward.ready { border: 1.5px solid #F59E0B; background: #FEF3C7; color: #92400E; cursor: pointer; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.book-cat-reward.claimed { border-style: solid; border-color: #86EFAC; background: #F0FDF4; color: #15803D; }
.cat-reward-icon { font-size: 16px; line-height: 1; }
.decor-item-row.decor-cap .decor-desc { color: #B45309; font-weight: 800; }
.btn-buy-decor:disabled { opacity: 0.5; cursor: not-allowed; }


/* ==========================================================================
   v6: 매장 화면 (실내 그림 + 인테리어 자리)
   ========================================================================== */
.interior-dialog { max-width: 440px; }
.interior-body { gap: 8px; }
.interior-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.interior-tab { border: 1.5px solid #E5D3B3; background: #fff; border-radius: 9px; padding: 5px 4px; font: inherit; font-size: 11.5px; font-weight: 800; color: #78350F; cursor: pointer; }
.interior-tab.active { background: #FEF3C7; border-color: #D97706; }
.interior-tab.locked { opacity: 0.55; }
.interior-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  border: 3px solid var(--trim, #B45309); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  background: #FFFBEB;
}
.interior-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.interior-bg-img { object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.interior-stage.closed .interior-bg { filter: grayscale(0.8) brightness(0.9); }
.interior-closed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #78350F; background: rgba(255, 251, 235, 0.55); }
.interior-slot {
  position: absolute; transform: translate(-50%, -50%); width: calc(13% * var(--s, 1)); aspect-ratio: 1;
  border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font: inherit;
}
.interior-slot .slot-icon { font-size: calc(min(9vw, 40px) * var(--s, 1)); line-height: 1; filter: drop-shadow(0 3px 2px rgba(69, 26, 3, 0.25)); }
.interior-slot.future .slot-icon { filter: grayscale(1) brightness(1.6); opacity: 0.22; }
.interior-slot.future { outline: 1.5px dashed rgba(120, 53, 15, 0.25); outline-offset: -2px; }
.interior-slot.next { outline: 2px dashed #D97706; outline-offset: -2px; background: rgba(255, 255, 255, 0.55); }
.interior-slot.next .slot-icon { opacity: 0.5; filter: grayscale(0.4); }
.interior-slot.selected { box-shadow: 0 0 0 3px #2563EB; }
.interior-slot:focus-visible { box-shadow: 0 0 0 3px #2563EB; outline: none; }
.slot-price {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: #FFFBEB; border: 1.5px solid #D97706; border-radius: 99px; padding: 0 5px;
  font-size: 9px; font-weight: 900; color: #78350F; font-variant-numeric: tabular-nums;
}
.interior-slot.just-bought .slot-icon { animation: decorPop 0.6s ease; }
@keyframes decorPop { 0% { transform: scale(0.2); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.interior-crew { position: absolute; bottom: 2%; width: 15%; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2)); }
.interior-progress { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: #92400E; }
.interior-progress b { font-variant-numeric: tabular-nums; }
.interior-info {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #E5D3B3; border-radius: 12px; padding: 8px; min-height: 64px;
}
.interior-info-icon { font-size: 30px; text-align: center; }
.interior-info-name { font-size: 13px; font-weight: 900; color: #451A03; }
.interior-info-reward { font-size: 11px; font-weight: 800; color: #B45309; }
.interior-info-note { font-size: 10.5px; color: #92400E; min-height: 1.3em; }
.interior-buy { min-width: 112px; min-height: 40px; border-radius: 10px; border: 2px solid #D97706; background: #FFFBEB; color: #78350F; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.interior-buy.primary { background: linear-gradient(180deg, #FBBF24, #F59E0B); color: #451A03; }
.interior-buy:disabled { background: #F3F4F6; border-color: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .interior-slot.just-bought .slot-icon { animation: none; } }
.choice-card > span, .choice-pick > span { font-size: 11px; font-weight: 800; color: #78350F; }
.interior-crew { border-radius: 12px; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(69, 26, 3, 0.25); background: #FFFBEB; }

/* ==========================================================================
   v7: 획득 연출 (재화 +N, 희귀 생성, 튀어나오기, 버블 터짐)
   ========================================================================== */
/* 재화가 늘면 표시 아래에 +N 이 떠올랐다 사라진다 */
.top-status-bar { position: relative; z-index: 30; }
.top-row-resources { position: relative; z-index: 2; } /* +N 이 아래 버튼 줄에 가려지지 않게 */
.res-pill { position: relative; }
.res-gain {
  position: absolute; left: 50%; top: 100%; z-index: 70; pointer-events: none; white-space: nowrap;
  font-size: 11px; font-weight: 900; color: #047857; background: #ECFDF5; border: 1.5px solid #10B981;
  border-radius: 99px; padding: 0 7px; line-height: 1.5; box-shadow: 0 2px 6px rgba(4, 120, 87, 0.25);
  animation: resGain 1.3s ease-out forwards;
}
@keyframes resGain {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%, 2px) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, 5px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 14px) scale(0.95); }
}

/* 보너스·생성 아이템: 출발 칸에서 포물선으로 날아와 앉는다 */
/* (움직임은 game.js applyPopFrom 의 Web Animations) */
.board-cell.cell-flying { overflow: visible; z-index: 6; }

/* 드물게 나온 아이템: 빛 고리 + 반짝이 + 글자가 떠올랐다 사라진다 */
.rare-fx { position: fixed; z-index: 80; width: var(--cell); height: var(--cell); transform: translate(-50%, -50%); pointer-events: none; }
.rare-ring {
  position: absolute; inset: 0; border-radius: 12px; border: 3px solid #FACC15;
  box-shadow: 0 0 14px 4px rgba(250, 204, 21, 0.75), inset 0 0 10px rgba(250, 204, 21, 0.6);
  animation: rareRing 1.2s ease-out forwards;
}
.rare-jackpot .rare-ring { border-color: #F472B6; box-shadow: 0 0 18px 6px rgba(244, 114, 182, 0.8), inset 0 0 12px rgba(244, 114, 182, 0.6); }
.rare-golden .rare-ring { border-color: #F59E0B; box-shadow: 0 0 20px 7px rgba(245, 158, 11, 0.85), inset 0 0 12px rgba(253, 224, 71, 0.8); }
.rare-double .rare-ring { border-color: #8B5CF6; box-shadow: 0 0 18px 6px rgba(139, 92, 246, 0.75), inset 0 0 12px rgba(196, 181, 253, 0.7); }
@keyframes rareRing { 0% { transform: scale(0.6); opacity: 0; } 20% { transform: scale(1.12); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.rare-spark {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: #FDE047; box-shadow: 0 0 6px #FACC15; animation: rareSpark 0.9s ease-out forwards;
}
.rare-spark:nth-child(2) { --a: 0deg; } .rare-spark:nth-child(3) { --a: 60deg; } .rare-spark:nth-child(4) { --a: 120deg; }
.rare-spark:nth-child(5) { --a: 180deg; } .rare-spark:nth-child(6) { --a: 240deg; } .rare-spark:nth-child(7) { --a: 300deg; }
@keyframes rareSpark { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--cell) * -0.85)) scale(0.3); opacity: 0; } }
.rare-label {
  position: absolute; left: 50%; bottom: 92%; white-space: nowrap; font-size: 12px; font-weight: 900; color: #78350F;
  background: #FEF9C3; border: 2px solid #4A2511; border-radius: 99px; padding: 1px 8px;
  animation: rareLabel 1.3s ease-out forwards;
}
.rare-jackpot .rare-label { background: #FCE7F3; color: #9D174D; }
.rare-golden .rare-label { background: #FDE047; }
.rare-double .rare-label { background: #EDE9FE; color: #5B21B6; }
@keyframes rareLabel {
  0% { transform: translate(-50%, 10px) scale(0.6); opacity: 0; }
  20% { transform: translate(-50%, 0) scale(1.1); opacity: 1; }
  75% { transform: translate(-50%, -6px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -16px) scale(1); opacity: 0; }
}

/* 버블 터짐: 고리가 퍼지고 물방울이 튄다 */
.bubble-burst { position: fixed; z-index: 80; width: var(--cell); height: var(--cell); transform: translate(-50%, -50%); pointer-events: none; }
.burst-ring {
  position: absolute; inset: 8%; border-radius: 50%; border: 3px solid #7DD3FC; background: rgba(224, 242, 254, 0.5);
  animation: burstRing 0.45s ease-out forwards;
}
@keyframes burstRing { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; border-width: 1px; } }
.burst-drop {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: #BAE6FD; border: 1.5px solid #0EA5E9; animation: burstDrop 0.55s ease-out forwards;
}
@keyframes burstDrop { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--cell) * -0.75)) scale(0.4); opacity: 0; } }

/* 동작 줄이기(Windows 애니메이션 효과 끔 등): 움직임은 빼고, 알려 주는 글자(+N, 대박!)는 제자리에서 잠깐 보여 준다 */
@media (prefers-reduced-motion: reduce) {
  .rare-ring { animation: none; }
  .rare-spark, .bubble-burst { display: none; }
  .res-gain { transform: translateX(-50%); animation: fadeHold 1.3s linear forwards; }
  .rare-label { transform: translateX(-50%); animation: fadeHold 1.3s linear forwards; }
}
@keyframes fadeHold { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* 매장 화면의 직원: 정해 준 바닥 자리에 가운데를 맞춰 선다 (인테리어와 겹치지 않게) */
.interior-crew { bottom: auto; width: 9.5%; transform: translate(-50%, -50%); }

/* 📲 설치 버튼과 설치 안내 창 */
#btn-install-app.install-ready { border-color: #10B981; background: #ECFDF5; animation: bounceGentle 1.1s infinite; }
.install-steps { margin: 4px 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.install-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #451A03; background: #FFFBEB; border: 1.5px solid #FDE68A; border-radius: 10px; padding: 8px 10px; }
.install-step { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #F59E0B; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.install-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; font-size: 15px; text-decoration: none; margin: 6px 0; box-sizing: border-box; }
.install-note { margin-top: 10px; }

/* 레벨 창: 앱 설치 · 저장 옮기기 */
.save-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.save-code {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 11px; padding: 6px 8px; resize: none;
  border: 1.5px solid #E5D3B3; border-radius: 8px; background: #FFFBEB; color: #78350F;
}

/* 손님 그림 */
.customer-avatar .svg-icon-wrap { width: 35px; height: 35px; }

/* 한국어는 낱말 단위로 줄바꿈 (긴 영문·숫자만 넘칠 때 끊는다) */
body { word-break: keep-all; overflow-wrap: break-word; }
.nowrap { white-space: nowrap; }
/* 나열 정보는 알약 단위로 묶어서, 항목 사이에서만 줄이 바뀐다 */
.info-chips { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 3px 0 1px; }
.info-chip { white-space: nowrap; font-size: 10.5px; font-weight: 800; line-height: 1.5; padding: 0 7px; border-radius: 99px; background: #FEF3C7; color: #92400E; }
.info-chips.center { justify-content: center; }
.info-line { display: block; }

/* 하단 선택 막대: 설명은 두 줄까지 (한 줄이면 거의 다 잘렸다) */
.selection-info-bar { height: 44px; }
/* 제목은 이름만 말줄임, 단계 표시는 늘 보이게 */
.sel-title { display: flex; align-items: center; gap: 3px; min-width: 0; }
.sel-title .sel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-title .badge-lv, .sel-title .badge-gen, .sel-title .badge-locked { flex-shrink: 0; }
/* 단계 표시는 아이콘 아래 모서리에 겹쳐 띄운다 */
.sel-icon { position: relative; width: 28px; height: 28px; }
.sel-icon .svg-icon-wrap { width: 28px; height: 28px; }
.sel-lv {
  position: absolute; right: -4px; bottom: -5px; font-size: 8px; font-weight: 900; line-height: 1; white-space: nowrap;
  color: #fff; background: #92400E; padding: 1.5px 3px; border-radius: 5px; border: 1px solid #fff;
}
.sel-actions-fixed { grid-template-columns: repeat(3, 58px); }
/* 12자 넘는 긴 이름은 살짝 작게 */
.sel-title.long { font-size: 9.5px; letter-spacing: -0.3px; }
.sel-desc {
  white-space: normal; line-height: 1.3; font-size: 9.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 사장님 말풍선: 자리는 2줄 크기로 고정. 넘치면 말풍선만 겹쳐서 펼친다 (레이아웃은 밀리지 않음) */
.speech-slot { position: relative; flex: 1; min-width: 0; height: 38px; }
.speech-slot .speech-bubble { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; box-sizing: border-box; display: -webkit-box; }
.speech-bubble.truncated { cursor: pointer; }
.speech-bubble.truncated:not(.expanded)::after {
  content: '▼'; position: absolute; right: 4px; bottom: 1px; font-size: 7px; color: #D97706;
}
.speech-slot .speech-bubble.expanded {
  display: block; -webkit-line-clamp: unset; overflow: visible; z-index: 60;
  box-shadow: 0 6px 16px rgba(69, 26, 3, 0.22); border-color: #F59E0B;
}

/* 주문 카드: 요구가 3개면 카드가 넓어진다. 금액(왼쪽)과 바꾸기 버튼(오른쪽)은 한 줄에 나란히 */
.orders-container { height: 68px; }
.order-card { width: auto; min-width: 124px; height: 64px; min-height: 64px; max-height: 64px; grid-template-columns: 36px auto; column-gap: 4px; }
.order-main-col { grid-template-rows: 16px 1fr; justify-items: stretch; }
.order-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.order-top .order-swap-btn { position: static; flex-shrink: 0; height: 16px; }
.order-reqs { padding: 0 1px; }

/* 가방 버튼으로 끌어 놓기 */
.btn-storage-bag.bag-drop-ready { box-shadow: 0 0 0 2px #10B981; }
.btn-storage-bag.bag-drop-over { background: #D1FAE5; transform: scale(1.08); box-shadow: 0 0 0 3px #059669; }

/* 조커 칸 */
.joker-item { background: #F5F3FF; border-color: #A78BFA; }

/* 짱꼬 룰렛 */
.roulette-stage { position: relative; width: min(250px, 70vw); aspect-ratio: 1; margin: 10px auto 4px; }
.roulette-wheel { width: 100%; height: 100%; }
.roulette-wheel svg { width: 100%; height: 100%; display: block; }
.roulette-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid #E11D48;
  filter: drop-shadow(0 2px 0 #4A2511);
}
.roulette-hub {
  position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px solid #4A2511; background: #FDF2F8; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.roulette-label { font-size: 9px; font-weight: 900; fill: #4A2511; paint-order: stroke; stroke: #FFFBEB; stroke-width: 2.6px; stroke-linejoin: round; }
.roulette-result { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 800; color: #78350F; }
.roulette-win { display: inline-flex; align-items: center; gap: 6px; }
.roulette-win .svg-icon-wrap { width: 38px; height: 38px; }
.roulette-spin { display: block; width: 100%; min-height: 42px; font-size: 14px; }
.roulette-odds { text-align: center; margin-top: 8px; line-height: 1.5; font-size: 10.5px; }

/* 인테리어 그림 (v7 SVG) */
.interior-slot .slot-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.interior-slot .slot-icon .svg-icon-wrap { width: 100%; height: 100%; }
.interior-info-icon { display: flex; align-items: center; justify-content: center; }
.interior-info-icon .svg-icon-wrap { width: 40px; height: 40px; }

/* 매장 이름: 넘치면 말줄임. 좁은 화면에서는 짧은 이름 */
.store-title-box { min-width: 0; }
.store-title-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.store-title-short { display: none; }

/* 하단 줄: 매장 탭 세 칸을 같은 폭으로, 글자는 한 줄로 */
.store-tabs-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.store-tab-btn { min-width: 0; }
.bag-title, .bag-count, .tab-num, .tab-name { white-space: nowrap; }
.tab-label-group { min-width: 0; max-width: 100%; }
.tab-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* 폰 폭 (375~430px): 아이콘을 글자 위로 올려 가로 폭을 줄인다 */
@media (max-width: 440px) {
  .store-title-full { display: none; }
  .store-title-short { display: inline; }
  .btn-mini-menu { padding: 3px 5px; font-size: 10px; }
  .bottom-left-buttons .btn-storage-bag { flex-direction: column; gap: 1px; padding: 3px 4px; min-width: 44px; }
  .store-tab-btn { flex-direction: column; gap: 1px; padding: 3px 3px; }
  .bag-label-group, .tab-label-group { align-items: center; }
}

/* ───────── 말풍선 주문서 (화면 세로 여유가 있을 때, body.orders-big) ─────────
   손님이 말풍선으로 주문한다. 금액은 손님 오른쪽에 금화 / 🎀팁 / 💎 세로로 (길어져도 손님 쪽으로 넘어가지 않게).
   여유가 없으면(짧은 폰) 위의 작은 카드 그대로. 판단은 game.js setupBoardResizeObserver */
.orders-big .orders-section { height: 140px; }
.orders-big .orders-container { height: 136px; align-items: flex-start; padding-top: 6px; }
.order-card.ob {
  width: 132px; min-width: 132px; height: 126px; min-height: 126px; max-height: 126px;
  display: flex; flex-direction: column; gap: 0; padding: 6px 6px 5px;
  border-radius: 16px; background: #fff; border: 2px solid #E5D3B3; box-shadow: 0 2px 0 #E5D3B3;
  animation: none;
}
.order-card.ob.order-card-vip { border-color: #F59E0B; box-shadow: 0 2px 0 #D97706; background: linear-gradient(180deg, #FFF7D6 0%, #fff 55%); }
.order-card.ob.order-card-ready { border-color: #10B981; box-shadow: 0 2px 0 #059669, 0 0 0 3px rgba(16, 185, 129, 0.22); background: #fff; animation: none; }
.order-card.ob.order-card-ready.order-card-vip { background: linear-gradient(180deg, #FFF7D6 0%, #fff 55%); }
.ob-tags { position: absolute; top: -2px; left: 8px; display: flex; gap: 3px; z-index: 1; pointer-events: none; }
.ob-tag { font-size: 9px; font-weight: 900; color: #fff; padding: 2px 6px 3px; border-radius: 0 0 7px 7px; white-space: nowrap; line-height: 1.1; }
.ob-tag.vip { background: linear-gradient(180deg, #F59E0B, #D97706); }
.ob-tag.serve { background: linear-gradient(180deg, #34D399, #059669); animation: bounceGentle 1.2s ease-in-out infinite; }
.order-card.ob .order-swap-btn { top: 3px; right: 4px; width: 22px; height: 18px; }
.ob-bubble {
  position: relative; background: #FFFBEB; border: 1.5px solid #F3E1BD; border-radius: 12px;
  padding: 5px 4px; display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 50px;
}
.order-card.ob.order-card-vip .ob-bubble, .order-card.ob.order-card-ready .ob-bubble { margin-top: 10px; }
.ob-bubble::after {
  content: ''; position: absolute; left: 20px; bottom: -7px; width: 12px; height: 12px; background: #FFFBEB;
  border-right: 1.5px solid #F3E1BD; border-bottom: 1.5px solid #F3E1BD; transform: rotate(45deg);
}
.ob-req { width: 36px; height: 36px; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 9px; flex-shrink: 0; }
.ob-req .svg-icon-wrap { width: 34px; height: 34px; }
.ob-lv { position: absolute; right: -2px; bottom: -3px; font-size: 8.5px; font-weight: 900; color: #451A03; background: #fff; border: 1px solid #F3E1BD; border-radius: 4px; padding: 0 2px; line-height: 1.15; }
.ob-req.ok { background: #D1FAE5; }
.ob-req.ok::after {
  content: '✓'; position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%;
  background: #10B981; color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;
}
.ob-req.sub { outline: 1.5px dashed #FB7185; outline-offset: -1px; }
.ob-bottom { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; }
.ob-cust { width: 50px; height: 50px; flex-shrink: 0; margin: 0 0 -3px -2px; display: flex; }
.ob-cust .svg-icon-wrap { width: 50px; height: 50px; }
.ob-pay { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; }
.ob-pay .c { font-size: 12px; font-weight: 900; color: #B45309; white-space: nowrap; }
.ob-pay .t { font-size: 10.5px; font-weight: 900; color: #DB2777; white-space: nowrap; }
.ob-pay .g { font-size: 10.5px; font-weight: 900; color: #7C3AED; white-space: nowrap; }