/* 몰트 마스터 — 모바일 세로 레이아웃 (360x800 ~ 414x896 기준) */

/* [폰트] 픽셀아트 글꼴 — 오프라인/APK용 로컬 번들(www/assets/fonts/). */
/*   UI(한글): 네오둥근모 NeoDunggeunmo (OFL) · 병 라벨(영문): Silkscreen (OFL). */
@font-face {
  font-family: 'NeoDunggeunmo';
  src: url('../assets/fonts/neodgm.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('../assets/fonts/silkscreen-400.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('../assets/fonts/silkscreen-700.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  font-family: 'NeoDunggeunmo', -apple-system, "Malgun Gothic", sans-serif;
  background: #1a1410;
  color: #e8dcc8;
  overflow: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* 앱 컨테이너: 세로 플렉스, 화면 꽉 채움 */
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 414px;
  margin: 0 auto;
  background: #1a1410;
}

/* ===== 상단 고정 바 ===== */
#top-bar {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: #2a221a;
  border-bottom: 1px solid #4a3c2a;
}

/* [상단바 정리] 3행 — 증류소명+자금 / 메타 칩 / 속도 제어 */
.tb-row { display: flex; align-items: center; }
.tb-identity { justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.status-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* [MVP+9] 증류소명 (터치 → 변경) — 브랜드 타이틀로 강조 */
#hdr-distillery {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #f4e2a8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-decoration: underline dotted #8a6a2a;
  text-underline-offset: 3px;
}

/* 자금 — 히어로(우측, 크게) */
.tb-money {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.tb-money .hdr-ico-img { width: 16px; height: 16px; }
#hdr-money {
  font-size: 19px;
  font-weight: bold;
  color: #f0d890;
  letter-spacing: 0.3px;
}

/* 메타 칩 행 — 날짜·유지비·명성 */
.tb-meta { gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #b8a888;
  background: #241c14;
  border: 1px solid #4a3c2a;
  border-radius: 6px;
  padding: 3px 8px;
}
.tb-chip .hdr-ico-img { width: 13px; height: 13px; margin-right: 0; }
#hdr-maint { color: #d8907a; }
.tb-chip-rep { color: #e0b860; cursor: pointer; }
#hdr-reputation .hdr-rep-text small { color: #f0d890; font-weight: bold; }
.hdr-medal-icon { vertical-align: middle; }

/* [MVP+10] 명성 섹션 */
.rep-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #f0d890;
}
.rep-headline .rep-premium {
  margin-left: auto;
  font-size: 12px;
  color: #e0b860;
}
.rep-hint {
  font-size: 12px;
  color: #c8a878;
  margin-top: 4px;
}
.cask-info-row.brand-premium b { color: #f0d890; }

/* [MVP+10-2] 업적 행 */
.rep-ach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
.rep-ach-name { color: #e0b860; font-weight: bold; min-width: 84px; }
.rep-ach-stars { color: #f0d890; }
.rep-ach-next { color: #9a8a72; flex: 1 1 100%; }

/* [MVP+10-3] 이벤트 모달 */
.rep-event-desc { color: #d8c8a8; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.rep-event-sub { color: #e0b860; font-size: 12px; margin-bottom: 6px; }
.rep-event-warn { color: #d88a6a; font-size: 12px; margin: 8px 0; }
.rep-event-count { color: #f0d890; font-size: 13px; text-align: center; margin: 8px 0; }
.rep-event-acclaim { color: #f0d24a; font-weight: bold; text-align: center; margin: 8px 0; }
.cask-select-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin: 4px 0;
  background: #2a2018;
  border: 1px solid #4a3a28;
  border-radius: 6px;
  color: #d8c8a8;
  font-size: 13px;
}
.cask-select-btn.selected { background: #4a3a1a; border-color: #e0b860; color: #f0d890; }

/* [MVP+10-4] 품평회 시상대 */
.podium-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  margin: 4px 0;
  border-radius: 6px;
  background: #241c14;
  font-size: 13px;
}
.podium-row.mine { background: #4a3a1a; box-shadow: 0 0 0 1px #e0b860 inset; }
.podium-who { color: #d8c8a8; }
.medal-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 11px;
  color: #2a1c08;
}
.medal-gold { background: #EFC75E; }
.medal-silver { background: #cfcfcf; }
.medal-bronze { background: #cf9b6a; }

#speed-controls {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;   /* [MVP+12 U1] 속도 버튼이 줄을 채우고 ⚙는 우측 끝 */
}

#speed-controls button {
  flex: 1;
  padding: 8px 4px;
  background: #4a3c2a;
  color: #b8a888;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
}

#speed-controls button.active {
  background: #6a5638;
  color: #f0d890;
  border-color: #c8a878;
}

/* ===== 본문 (스크롤) ===== */
#content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel {
  background: #2a221a;
  border: 1px solid #4a3c2a;
  border-radius: 8px;
  padding: 12px;
}

.panel h2 {
  font-size: 14px;
  color: #c8a878;
  margin-bottom: 10px;
}

.panel-body {
  font-size: 13px;
  color: #8a7c64;
}

/* [MVP+12 U1] 탭 페인 — 활성 탭만 표시 */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* [아트스테이지] 탭 상단 씬 배너 — 정적 일러스트 + 은은한 줌/팬·광택 연출.
   비활성 탭은 display:none이라 애니가 자동 정지(성능 안전). file:// 호환(상대경로·CSS transform). */
.panel.has-hero > h2 { display: none; }   /* 기존 제목은 히어로 타이틀로 대체 */
.tab-hero {
  position: relative;
  margin: -12px -12px 12px;               /* 패널 패딩 상쇄 → 가장자리까지 풀블리드 */
  height: 132px;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  background: #1a140e;
  box-shadow: inset 0 -1px 0 rgba(74,60,42,0.6);
}
.tab-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  will-change: transform;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero-warehouse  .tab-hero-img { background-image: url('../assets/scenes/warehouse.jpg'); }
.hero-production .tab-hero-img { background-image: url('../assets/scenes/production.jpg'); animation-duration: 30s; }
.hero-sales      .tab-hero-img { background-image: url('../assets/scenes/sales.jpg'); animation-name: kenburns2; }
.hero-shop       .tab-hero-img { background-image: url('../assets/scenes/shop.jpg'); animation-name: kenburns2; animation-duration: 28s; }
@keyframes kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2.5%, -2%); }
}
@keyframes kenburns2 {
  0%   { transform: scale(1.16) translate(2.5%, -1.5%); }
  100% { transform: scale(1.06) translate(0, 1%); }
}
/* 하단 그라데이션 — 본문(패널 배경 #2a221a)으로 자연스럽게 블렌딩 + 타이틀 가독성 */
.tab-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26,20,14,0) 42%, rgba(26,20,14,0.5) 76%, #2a221a 100%);
}
/* 은은한 광택 스윕 — 주기적으로 1회 지나감 */
.tab-hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.09) 50%, transparent);
  transform: skewX(-12deg); pointer-events: none;
  animation: heroGloss 9s ease-in-out infinite;
}
@keyframes heroGloss {
  0%, 55%   { left: -60%; }
  88%, 100% { left: 130%; }
}
.tab-hero-title {
  position: absolute; left: 12px; bottom: 7px;
  font-size: 15px; font-weight: bold; color: #f2e4c6; letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.7);
}
@media (prefers-reduced-motion: reduce) {
  .tab-hero-img { animation: none; transform: scale(1.06); }
  .tab-hero::after { display: none; }
}

/* [MVP+12 U1] 하단 탭바 */
#tabbar {
  flex: 0 0 auto;
  display: flex;
  background: #221a12;
  border-top: 1px solid #4a3c2a;
}
.tab-btn {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px;
  background: transparent;
  border: none;
  color: #8a7c64;
}
.tab-btn.active {
  color: #f0d890;
  box-shadow: inset 0 2px 0 #c8a878;
  background: #2a221a;
}
.tab-ico { font-size: 18px; line-height: 1; height: 22px; display: flex; align-items: center; justify-content: center; }
.tab-ico .tab-svg { display: block; width: 22px; height: 22px; }
.tab-label { font-size: 10px; letter-spacing: 0.5px; }
.tab-badge {
  position: absolute;
  top: 3px;
  right: 50%;
  transform: translateX(16px);
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #c84a3a;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}
.tab-badge.hidden { display: none; }

/* [MVP+12 U3] 생산 파이프라인 시각화 */
.prod-pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 0 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #3a2e20;
}
.pl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  width: 50px;
}
.pl-ico { width: 30px; height: 30px; }
.pl-ico svg { width: 30px; height: 30px; display: block; }
.pl-name { font-size: 9px; color: #9a8a6a; }
.pl-val { font-size: 10px; color: #e0c089; font-weight: bold; }
.pl-conn {
  flex: 1 1 auto;
  min-width: 8px;
  height: 4px;
  margin-top: 14px;
  background: #2a2018;
  border-radius: 2px;
  overflow: hidden;
}
.pl-conn.active { background: #3a2e14; }
.pl-fill { height: 100%; background: #e0b860; border-radius: 2px; transition: width 0.3s; }

/* ===== 생산 라인 ===== */
.prod-stock {
  font-size: 13px;
  color: #c8a878;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #3a2e20;
}

.prod-stock b {
  color: #f0d890;
}

.prod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 0;
}

.prod-label {
  flex: 0 0 auto;
  font-size: 13px;
  color: #e8dcc8;
}

.prod-label b {
  color: #f0d890;
}

.prod-btn {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 9px 8px;
  background: #5a7a3a;
  color: #f0f0e0;
  border: none;
  border-radius: 6px;
  font-size: 13px;
}

.prod-btn:active {
  background: #6a8a4a;
}

.prod-btn:disabled {
  background: #3a3a30;
  color: #6a6a5a;
}

/* [MVP+5] 보리 타입별 시작 버튼 묶음 — 가로 넘침 시 줄바꿈 (스크롤 방지) */
.prod-type-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.prod-btn.small {
  min-width: 0;
  flex: 0 0 auto;
  padding: 8px 12px;
}

/* 진행 바 */
.progress-wrap {
  flex: 1 1 auto;
  position: relative;
  height: 28px;
  background: #1a1410;
  border: 1px solid #4a3c2a;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #5a7a3a;
  transition: width 0.3s linear;
}

.progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #f0f0e0;
}

/* ===== 창고 (캐스크 그리드) ===== */
.wh-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #c8a878;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #3a2e20;
}
/* [숙성 슬롯] 상세/조밀 뷰 토글 (세그먼트) */
.wh-view-toggle { display: flex; gap: 0; border: 1px solid #4a3c2a; border-radius: 6px; overflow: hidden; }
.wh-view-btn {
  font-family: inherit; font-size: 11px; color: #9a8a6a;
  background: #211a13; border: none; padding: 4px 10px;
}
.wh-view-btn.active { background: #6a5638; color: #f0d890; }

/* [숙성 필터/정렬] 슬롯 그리드 컨트롤 바 */
.wh-controls {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.wh-sel {
  flex: 1 1 0;
  min-width: 0;
  font-family: inherit;
  font-size: 12px;
  color: #d8c4a0;
  background: #211a13;
  border: 1px solid #4a3c2a;
  border-radius: 6px;
  padding: 6px 4px;
  appearance: none;
  -webkit-appearance: none;
}
.wh-sel:focus { outline: none; border-color: #7a5a2a; }
.wh-filter-count {
  font-size: 11px;
  color: #9a8a6a;
  margin: -2px 0 8px;
}

/* [MVP+12 U2] 숙성 캐스크 타일 그리드 (UI_DIRECTION §7 Tier1) */
.wh-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* [숙성 슬롯] 뷰 모드 — 상세=2열 카드 / 조밀=4열 타일 */
.wh-tile-grid.detail { grid-template-columns: repeat(2, 1fr); }
.wh-tile-grid.dense { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wh-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 6px;
  background: #241c14;
  border: 1px solid #4a3c2a;
  border-radius: 8px;
  color: #c8a878;
  text-align: center;
}
/* 간단히 모드 — 더 작고 낮은 타일(이미지+종류·크기+등급+연수) */
.wh-tile-grid.dense .wh-tile { padding: 5px 2px 4px; gap: 1px; }
.wh-tile-grid.dense .tile-art { width: 36px; height: 40px; }
.wh-tile-grid.dense .tile-art svg,
.wh-tile-grid.dense .tile-art img.cask-art-img { width: 36px; height: 40px; }
.wh-tile-grid.dense .wh-tile.empty { min-height: 64px; }
.tile-typesize { font-size: 10px; color: #c8b896; line-height: 1.15; }
.tile-ga { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wh-tile-grid.dense .fill-badge { font-size: 9px; padding: 0 4px; }

/* [숙성 슬롯] 상세 2열 카드 — 좌측 아트+액량 / 우측 정보 */
.wh-card {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #241c14;
  border: 1px solid #4a3c2a;
  border-radius: 10px;
  color: #c8a878;
  text-align: left;
  align-items: flex-start;
}
.wh-card.cask.phase-official { border-color: #d8a868; }
.wh-card.cask.phase-premium { border-color: #e0b860; }
.wh-card.cask.phase-danger { border-color: #c8503c; }
.wh-card.has-event { border-color: #e0503c; box-shadow: inset 0 0 0 1px #e0503c; }
.wh-card.bottleable { box-shadow: 0 0 7px -1px #e0b860; }
.wh-card.bottled { border-color: #c8a878; }
.wh-card-art { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wh-card-info { flex: 1; min-width: 0; line-height: 1.4; }
.wh-card-title { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; color: #e8dcc8; margin-bottom: 1px; }
.wh-card-title .wh-type { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wh-card-title .fill-badge { flex: none; }
.wh-card-row { font-size: 11px; color: #9a8a6a; }
.wh-card-row.strong { font-size: 12px; color: #d8c4a0; margin-top: 1px; }
.wh-ico { font-style: normal; color: #6a5c44; margin-right: 2px; }
.wh-peat { display: inline-block; white-space: nowrap; font-size: 10px; border-radius: 4px; padding: 0 4px; margin-left: 2px; vertical-align: 1px; }
.wh-peat.peat-on { color: #e0a060; border: 1px solid #8a5a2a; background: #2e2212; }
.wh-peat.peat-off { color: #9a9080; border: 1px solid #564c3c; background: #221d16; }
.wh-finish-badge {
  display: inline-block; margin-top: 3px;
  font-size: 10px; color: #d8c0e8;
  background: #2e2440; border: 1px solid #6a5080; border-radius: 5px; padding: 1px 5px;
}

/* [숙성 슬롯] 액량 바 — 잔여 액체량(타입·등급 액체색) */
.cask-liquid { width: 38px; height: 6px; background: #1a140e; border-radius: 3px; overflow: hidden; }
.cask-liquid-fill { height: 100%; }
.cask-liquid-pct { font-size: 10px; color: #9a8a6a; line-height: 1; }
.wh-tile.cask.phase-official { border-color: #d8a868; }
.wh-tile.cask.phase-premium { border-color: #e0b860; }
.wh-tile.cask.phase-danger { border-color: #c8503c; }
.wh-tile.has-event { border-color: #e0503c; box-shadow: inset 0 0 0 1px #e0503c; }
.wh-tile.bottleable { box-shadow: 0 0 7px -1px #e0b860; }
.wh-tile.bottled { border-color: #c8a878; }
.wh-tile.empty {
  color: #5a4c38;
  border-style: dashed;
  justify-content: center;
  min-height: 86px;
}
.tile-art { position: relative; width: 46px; height: 54px; }
.tile-art svg { width: 46px; height: 54px; display: block; }
.tile-art img.cask-art-img { width: 46px; height: 54px; display: block; object-fit: contain; }
.cask-art-modal-wrap { text-align: center; margin: 2px 0 10px; }
img.cask-art-modal { width: 150px; height: 150px; object-fit: contain; display: inline-block; }
.tile-badge {
  position: absolute;
  top: -3px;
  font-size: 10px;
  line-height: 1.1;
  padding: 1px 3px;
  border-radius: 7px;
  background: #2a2018;
  border: 1px solid #6a5638;
}
.tile-badge.ev { right: -5px; background: #5a1f1a; border-color: #e0503c; }
.tile-badge.ok { right: -5px; background: #3a3010; border-color: #e0b860; color: #f0d890; }
.tile-badge.sp { left: -5px; background: #3a1420; border-color: #e0a0b0; color: #f0c8d4; }
.tile-badge.dc { top: auto; bottom: -3px; right: -5px; background: #3a2a14; border-color: #d99a5a; color: #f0c890; }
.tile-badge.done { right: -5px; background: #3a3010; border-color: #e0b860; }
.tile-lock { position: absolute; bottom: -2px; left: -2px; font-size: 11px; }
.tile-name { font-size: 11px; color: #e8dcc8; line-height: 1.2; }
.tile-sub { font-size: 10px; color: #9a8a6a; }
.tile-empty-mark { font-size: 20px; }

/* [MVP+14] 캐스크 피니시 */
.finish-btn {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  background: #3a2a4a;
  color: #d8c0e8;
  border: 1px solid #6a5080;
  border-radius: 6px;
  font-size: 13px;
}
.finish-btn:disabled { opacity: 0.5; }
.finish-warn {
  font-size: 12px;
  color: #e0a85a;
  background: #2e2414;
  border: 1px solid #6a5028;
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.finish-note { font-size: 12px; color: #9a8a6a; margin-bottom: 8px; }
.finish-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  margin: 4px 0;
  background: #2a2230;
  border: 1px solid #5a4a70;
  border-radius: 6px;
  color: #d8c8e0;
  font-size: 13px;
}
.finish-opt:disabled { opacity: 0.45; }

/* [MVP+13 1단계] 풍미 차원 레이더 */
.flavor-radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 4px 0 8px;
}
.flavor-radar { width: 150px; height: 150px; }
.flavor-char {
  font-size: 13px;
  font-weight: bold;
  color: #e0c089;
}

/* [MVP+12 U4] 폴리시 / 피드백 (juice) */
@keyframes paneFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.tab-pane.active { animation: paneFade 0.18s ease-out; }
.tab-btn { transition: color 0.15s, background 0.15s, box-shadow 0.15s; }
#speed-controls button { transition: background 0.15s, color 0.15s, border-color 0.15s; }
#hdr-money { transition: color 0.2s; }
/* 병입 가능 캐스크 — 은은한 골드 펄스로 "수확 준비" 강조 */
@keyframes bottleablePulse {
  0%, 100% { box-shadow: 0 0 6px -2px #e0b860; }
  50% { box-shadow: 0 0 11px 0 #e0b860; }
}
/* [UX] 펄스는 일시정지·정상 속도에서만 — 가속(30×/365×)은 매 tick 재렌더로 애니가 재시작돼
   깜빡이므로, 그 구간은 정적 글로우(위 box-shadow)만 유지한다. */
body[data-speed="paused"] .wh-tile.bottleable,
body[data-speed="normal"] .wh-tile.bottleable,
body[data-speed="paused"] .wh-card.bottleable,
body[data-speed="normal"] .wh-card.bottleable { animation: bottleablePulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .wh-tile.bottleable, .wh-card.bottleable { animation: none; }
}
/* 타일 탭 피드백 */
.wh-tile { transition: transform 0.08s; }
.wh-tile:active { transform: scale(0.96); }
/* 탭바 배지 등장 */
@keyframes badgePop { from { transform: translateX(16px) scale(0.4); } to { transform: translateX(16px) scale(1); } }
.tab-badge { animation: badgePop 0.18s ease-out; }

.wh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wh-slot {
  min-height: 76px;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.wh-slot.empty {
  border: 1px dashed #4a3c2a;
  background: #1f1812;
  align-items: center;
}

.wh-slot.empty-cask {
  border: 1px solid #6a5638;
  background: #2a221a;
}

.wh-slot.cask {
  border: 1px solid #7a6038;
  background: #3a2e1e;
}

.wh-slot.cask.ready {
  border: 2px solid #e0b860;
  background: #4a3a1e;
}

.wh-slot.cask.has-event {
  border: 2px solid #e05050;
  background: #4a2a1e;
}

.slot-countdown {
  font-size: 10px;
  color: #e08868;
}

/* 캐스크 슬롯 진행 바 (CASK_SPEC §4.3) — 0~50년 기준, 12/15/30년 마커 */
.cask-progress {
  position: relative;
  height: 6px;
  background: #2a221a;
  border-radius: 3px;
  margin-top: 4px;
}

.cask-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.cask-progress-fill.phase-normal   { background: #8a7c64; }
.cask-progress-fill.phase-official { background: #d8a868; }
.cask-progress-fill.phase-premium  { background: #e0b860; }
.cask-progress-fill.phase-danger   {
  background: linear-gradient(to right, #e08868, #e04040);
}

.cask-marker {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: #1a1410;
  pointer-events: none;
}

.slot-flavor-hidden {
  font-size: 10px;
  color: #8a7c64;
  margin-top: 2px;
}

/* 병입 결과 모달 가격 분해 (CASK_SPEC §10.6) */
.bottle-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #c8b89a;
  padding: 2px 0;
}

.bottle-price-row b {
  color: #e8dcc8;
}

.bottle-total {
  font-size: 16px;
  font-weight: bold;
  color: #e0b860;
  text-align: center;
  margin: 8px 0 4px;
  padding-top: 6px;
  border-top: 1px solid #3a2e20;
}

/* [MVP+7] 라벨/병 시각화 (LABEL_SPEC) */
.bottle-vis {
  text-align: center;
  margin: 4px 0 8px;
}
.bottle-vis .bottle-svg {
  width: 118px;
  height: auto;
  display: inline-block;
}

/* [병디자인] PNG 병 + 라벨 오버레이. 병 PNG는 투명여백을 잘라낸 세로형이라 높이 기준으로 표시. */
.bottle-png-vis {
  position: relative;
  display: table;            /* 이미지에 맞춰 줄어들고 좌우 auto 마진으로 가운데 정렬 */
  margin: 6px auto 10px;
}
.bottle-png {
  height: 340px;
  width: auto;
  max-width: 100%;
  display: block;
  image-rendering: pixelated;
}
.bottle-label-overlay {
  position: absolute;
  pointer-events: none;
  overflow: hidden;   /* SVG 높이가 오버레이 보다 크면 위로 밀리지 않게 차단 */
}
.bottle-label-overlay .bottle-label-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;   /* 좌측 딱지·우측 수상 배지가 라벨면을 살짝 넘겨도 보이게 */
}
/* [병디자인] 판매/병입 모달의 병은 눌러서 확대 */
#bottle-modal-body .bottle-png-vis { cursor: zoom-in; }

/* [병디자인] 병 확대 보기 오버레이 */
#bottle-zoom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 12px;
  cursor: zoom-out;
}
#bottle-zoom.hidden { display: none; }
#bottle-zoom .bottle-png-vis { margin: 0; }
#bottle-zoom .bottle-png { height: 82vh; max-height: 82vh; width: auto; max-width: 96vw; }

/* [병디자인] 디자인 선택 그리드 */
.bottle-design-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 8px 0;
}
.bottle-design-opt {
  flex: 0 0 auto;
  padding: 4px;
  background: #2a221a;
  border: 2px solid #4a3a28;
  border-radius: 6px;
  cursor: pointer;
}
.bottle-design-opt.selected {
  border-color: #e0b860;
  background: #3a2e1c;
}
.bottle-design-opt .bottle-png-vis {
  margin: 0;
}
.bottle-design-opt .bottle-png {
  height: 130px;
}
.bottle-design-opt .bottle-vis {
  margin: 0;
}

/* [MVP+9] 판매 로트 탭(제품 안내) */
.sales-lot-tap {
  cursor: pointer;
}

/* [MVP+9] 생산 안내 힌트 (탱크 부족 등) */
.prod-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #c8a050;
}

/* [MVP+9] 스피릿 탱크 재고 상세 */
.spirit-detail {
  margin: 4px 0 6px;
  font-size: 11px;
  color: #c8b890;
}
.spirit-line {
  padding: 1px 0;
}
.spirit-line b {
  color: #e0b860;
}

/* [MVP+9] 채우기 스피릿 선택 강조 */
.fill-buy-btn.fill-spirit-sel {
  outline: 2px solid #e0b860;
  background: #4a3c2a;
}

/* [MVP+8] 가수 목표 도수 스텝퍼 */
.abv-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0;
}
.abv-step-btn {
  width: 40px;
  padding: 8px 0;
  font-size: 18px;
  background: #4a3c2a;
  color: #e8dcc8;
  border: none;
  border-radius: 6px;
}
.abv-step-btn:disabled {
  opacity: 0.4;
}
.abv-step-val {
  font-size: 18px;
  font-weight: bold;
  color: #e0b860;
  min-width: 110px;
  text-align: center;
}
.abv-step-val small {
  font-size: 11px;
  color: #c8a878;
}

.slot-title {
  font-size: 12px;
  font-weight: bold;
  color: #e8dcc8;
}

.slot-detail {
  font-size: 11px;
  color: #8a7c64;
}

.slot-quality {
  font-size: 11px;
  color: #c8a878;
}

.slot-liquid {
  font-size: 10px;
  color: #8a9c7c;
}

.slot-badge {
  font-size: 10px;
  color: #1a1410;
  background: #e0b860;
  border-radius: 3px;
  padding: 1px 4px;
  align-self: flex-start;
  margin-top: 2px;
}

/* ===== 캐스크 상세 모달 ===== */
.cask-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #3a2e20;
}

.cask-info-row span {
  color: #8a7c64;
}

.cask-info-row b {
  color: #e8dcc8;
}

.bottle-btn {
  margin-top: 8px;
  padding: 11px;
  background: #5a7a3a;
  color: #f0f0e0;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

.bottle-btn.early {
  background: #8a6038;
}

.bottle-btn:active {
  opacity: 0.8;
}

.modal-note {
  font-size: 12px;
  color: #8a7c64;
  margin-bottom: 4px;
}

/* 채우기 모달 종류 그룹 라벨 */
.fill-group-label {
  font-size: 12px;
  color: #c8a878;
  font-weight: bold;
  margin: 10px 0 4px;
}

/* ===== 상점 ===== */
.shop-group-label {
  font-size: 12px;
  color: #c8a878;
  font-weight: bold;
  margin: 10px 0 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid #4a3a28;
}

/* [상점 통일] 카테고리 섹션 카드 (원재료·캐스크·설비·금융) */
.shop-section {
  background: #241c14;
  border: 1px solid #3a2e20;
  border-radius: 8px;
  padding: 6px 10px 4px;
  margin-bottom: 10px;
}
.shop-section:last-child { margin-bottom: 0; }
.shop-section-title {
  font-size: 12px;
  font-weight: bold;
  color: #e0b860;
  letter-spacing: 0.5px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid #4a3c2a;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #3a2e20;
}

.shop-item:last-child {
  border-bottom: none;
}

.shop-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

/* [MVP+5] 상점 보리 드롭다운 */
.barley-select {
  width: 100%;
  margin: 3px 0;
  padding: 6px 8px;
  background: #1a1410;
  color: #e8dcc8;
  border: 1px solid #6a5638;
  border-radius: 5px;
  font-size: 12px;
}

.shop-item-name {
  font-size: 13px;
  color: #e8dcc8;
}

.shop-item-sub {
  font-size: 11px;
  color: #8a7c64;
}

.buy-btn {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 9px 8px;
  background: #5a7a3a;
  color: #f0f0e0;
  border: none;
  border-radius: 6px;
  font-size: 13px;
}

.buy-btn:active {
  background: #6a8a4a;
}

.buy-btn:disabled {
  background: #3a3a30;
  color: #6a6a5a;
}

/* ===== 상점 캐스크 24종 3단계 (MVP+4) ===== */
.shop-cask-group {
  border-bottom: 1px solid #3a2e20;
  padding: 4px 0;
}

.shop-group-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #c8a878;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 2px;
}

.shop-toggle-icon {
  display: inline-block;
  width: 14px;
  color: #8a7c64;
}

.shop-size-row {
  padding: 4px 0 4px 16px;
}

.shop-size-name {
  font-size: 12px;
  color: #e8dcc8;
  margin-bottom: 4px;
}

.shop-fill-btns {
  display: flex;
  gap: 6px;
}

.fill-buy-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px;
  border: none;
  border-radius: 6px;
  color: #f0f0e0;
  font-size: 11px;
  line-height: 1.3;
}

/* 등급별 색: 1st 진함 → 3rd 흐림 */
.fill-buy-btn.fill-1st { background: #5a7a3a; }
.fill-buy-btn.fill-2nd { background: #4a6a4a; }
.fill-buy-btn.fill-3rd { background: #44563a; }
.fill-buy-btn:active { filter: brightness(1.2); }
.fill-buy-btn:disabled { background: #3a3a30; color: #6a6a5a; }

.fill-grade { font-weight: bold; }
.fill-price { color: #f0e0b0; }
.fill-owned { color: #c8c0a8; font-size: 10px; }

.shop-fill-hint {
  font-size: 10px;
  color: #8a7c64;
  padding: 2px 0 6px 16px;
}

/* 채우기 모달 3단계 (MVP+4) — 등급 버튼은 .fill-buy-btn 재사용 */
.fill-size-row {
  padding: 4px 0 8px;
}

.fill-size-name {
  font-size: 12px;
  color: #e8dcc8;
  margin-bottom: 4px;
}

.fill-grade-btns {
  display: flex;
  gap: 6px;
}

/* 등급 배지 (MVP+4) — 슬롯/상세/병입 모달. 1st 진함 → 3rd 흐림 */
.fill-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
  color: #f0f0e0;
  vertical-align: middle;
}
.fill-badge.fill-1st { background: #5a7a3a; }
.fill-badge.fill-2nd { background: #5a6a4a; color: #e0e0d0; }
.fill-badge.fill-3rd { background: #555048; color: #c8c0b0; }

/* 리랙킹 24종 선택 (MVP+4) — 등급 버튼은 .fill-buy-btn 재사용 */
.rerack-note {
  font-size: 11px;
  color: #c8a878;
  margin: 6px 0 4px;
}
.rerack-row {
  padding: 3px 0;
}
.rerack-row-name {
  font-size: 11px;
  color: #e8dcc8;
  margin-bottom: 3px;
}
.rerack-grade-btns {
  display: flex;
  gap: 5px;
}

/* ===== 하단 고정 바 ===== */
#bottom-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #2a221a;
  border-top: 1px solid #4a3c2a;
}

.log-line {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.4;
  color: #b8a888;
  max-height: 34px;
  overflow: hidden;
}

#debug-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  background: #4a3c2a;
  color: #c8a878;
  border: none;
  border-radius: 6px;
  font-size: 16px;
}

/* 로그 타입별 색상 */
.log-info { color: #b8a888; }
.log-success { color: #8ac888; }
.log-warning { color: #e0a860; }
.log-danger { color: #e86850; font-weight: bold; }

/* ===== 토스트 알림 ===== */
#toast-container {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 380px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
  pointer-events: none;
}

.toast {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: #f0f0e0;
  background: #4a3c2a;
  border-left: 4px solid #8a7c64;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: #3a4a2a;
  border-left-color: #8ac888;
}

.toast-warning {
  background: #4a3a22;
  border-left-color: #e0a860;
}

.toast-info {
  background: #3a3a4a;
  border-left-color: #88a8c8;
}

.toast-danger {
  background: #4a2622;
  border-left-color: #e85050;
}

/* ===== 모달 (로그 / 디버그 공용) ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.hidden {
  display: none;
}

.modal-box {
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  background: #2a221a;
  border: 1px solid #6a5638;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-box h2 {
  font-size: 15px;
  color: #c8a878;
  margin-bottom: 4px;
}

.modal-box button {
  padding: 10px;
  background: #4a3c2a;
  color: #e8dcc8;
  border: none;
  border-radius: 6px;
  font-size: 13px;
}

.modal-box button:active {
  background: #6a5638;
}

.modal-box .modal-close {
  /* [MVP+5] 모달 내용이 길어 스크롤돼도 닫기 버튼은 항상 하단에 고정 */
  position: sticky;
  bottom: -16px;          /* modal-box 하단 패딩(16px)만큼 당겨 바닥에 밀착 */
  margin-top: 8px;
  background: #3a2a1a;
  color: #c8a878;
  z-index: 2;
  box-shadow: 0 -8px 12px -4px #2a221a;
}

/* [MVP+11-B] 강제 알림 팝업 (CASK_MARKET_SPEC §2) */
.forced-popup-box {
  border-color: #b58a50;
  box-shadow: 0 0 0 1px #b58a50, 0 8px 28px -6px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.forced-popup-box h2 {
  color: #e0c089;
  text-align: center;
}
#forced-popup-body {
  font-size: 13px;
  line-height: 1.6;
  color: #e8dcc8;
}
.forced-popup-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #9a8a6a;
}

/* [MVP+11-B] 캐스크 세일 표시 (CASK_MARKET_SPEC §4.3) */
.shop-sale-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #2a221a;
  background: #d9a441;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}
.shop-sale-group {
  border-left: 2px solid #d9a441;
  padding-left: 4px;
}
.fill-price-orig {
  font-size: 10px;
  color: #8a7a5a;
  text-decoration: line-through;
}
.fill-price-sale {
  color: #e0c089;
  font-weight: 600;
}

/* [MVP+11-B] 상점 스페셜 셰리 그룹 (CASK_MARKET_SPEC §6) */
.shop-special-group {
  border: 1px solid #b58a50;
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(181, 138, 80, 0.12), rgba(181, 138, 80, 0.04));
}
.shop-special-header {
  font-size: 13px;
  font-weight: 600;
  color: #e0c089;
  margin-bottom: 4px;
}
.shop-special-note {
  font-size: 11px;
  color: #9a8a6a;
  margin-bottom: 6px;
}
.shop-special-warn {
  font-size: 11px;
  color: #d99a5a;
  margin-bottom: 6px;
}
.shop-special-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #3a2e20;
}
.shop-special-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.shop-special-name {
  font-size: 13px;
  color: #e8dcc8;
}
.shop-special-certs {
  font-size: 10px;
  color: #9a8a6a;
}
.shop-special-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}
.shop-special-remain {
  font-size: 10px;
  opacity: 0.85;
}

.debug-row {
  display: flex;
  gap: 6px;
}

.debug-label {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #3a2e20;
  font-size: 11px;
  color: #c8a878;
}

/* [MVP+6-2] 판매 방식 모달 */
.sale-section-label {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #3a2e20;
  font-size: 11px;
  color: #c8a878;
}

.country-btn {
  width: 100%;
  margin-top: 4px;
  padding: 9px;
  background: #3a4a5a;
  color: #e8f0f8;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  text-align: left;
}

.country-btn:active {
  background: #4a5a6a;
}

.country-btn .country-evt {
  font-size: 11px;
  color: #b8c8d8;
}

/* [MVP+15] 출시 제품 — 선택 상태·라인 태그·스몰배치 진입 */
.country-btn.selected,
.bottle-btn.selected {
  background: #4a3a1a;
  box-shadow: inset 0 0 0 2px #e0b860;
  color: #f0d890;
}
.bottle-btn[disabled] {
  opacity: 0.45;
}
.line-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  margin-left: 2px;
  border-radius: 4px;
  background: #5a4a2a;
  color: #f0d890;
  vertical-align: middle;
}
.smallbatch-entry {
  margin-bottom: 8px;
}
.product-entry {
  display: flex;
  gap: 6px;
}
.product-entry .smallbatch-entry {
  flex: 1;
}
/* [MVP+16] 제품 라인 버튼 (판매 탭) */
.product-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.pline-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: #4a3a1a;
  color: #f0d890;
  border: none;
  border-radius: 8px;
  font-size: 13px;
}
.pline-btn:active { background: #5a4626; }
.pline-btn.pline-disabled {
  background: #2a2620;
  color: #7a7060;
}
.pline-label { font-weight: bold; }
.pline-req { font-size: 10px; color: #b58a6a; line-height: 1.3; text-align: center; }
.official-warn {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid #b5564a;
  background: #3a2420;
  color: #f0c8b8;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.45;
}
.sales-lot.official-prep .sales-lot-head {
  color: #e0b860;
}
.archive-year {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: #2a2218;
  color: #e0c890;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
}
.archive-year .archive-count { float: right; color: #b8a880; font-size: 12px; }
.archive-title {
  width: calc(100% - 10px);
  margin: 3px 0 3px 10px;
  padding: 7px 9px;
  background: #241d15;
  color: #e8d4a0;
  border: none;
  border-left: 2px solid #5a4a2a;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  text-align: left;
}
.archive-title:active { background: #2e2418; }

/* [MVP+6-2 QA] 상단 국가 이벤트 바 */
#hdr-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: #221c14;
  border-top: 1px solid #3a2e20;
}

.country-chip {
  flex: 1 1 auto;
  padding: 5px 4px;
  font-size: 11px;
  border: none;
  border-radius: 5px;
  background: #3a3228;
  color: #e8dcc8;
}

.country-chip.tone-pos { background: #2e4a2e; color: #c8f0c8; }
.country-chip.tone-neg { background: #4a2e2e; color: #f0c8c8; }
.country-chip .chip-mark { font-weight: bold; }

.evt-pos { color: #7ad07a; }
.evt-neg { color: #e08a8a; }
.evt-neutral { color: #d8c8a8; }

/* [MVP+6-2 QA] 병입 완료 슬롯 */
.wh-slot.bottled {
  border: 1px solid #6a8a4a;
  background: #2a2e1e;
}

.wh-slot.bottled .slot-detail {
  color: #b8d878;
}

/* [MVP+6-2] 판매 현황 섹션 */
.sales-empty {
  font-size: 12px;
  color: #8a7c64;
  padding: 6px 0;
}

.sales-lot {
  padding: 8px 0;
  border-bottom: 1px solid #3a2e20;
}

.sales-lot:last-child {
  border-bottom: none;
}

.sales-lot-head {
  font-size: 13px;
  color: #e8dcc8;
}

.sales-lot-sub {
  font-size: 11px;
  color: #8a7c64;
  margin-top: 2px;
}

.sales-status {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.sales-status.shipping { background: #3a4a5a; color: #b8d8f0; }
.sales-status.selling  { background: #3a5a3a; color: #c8f0c8; }
.sales-status.stock    { background: #5a4a24; color: #f0d8a0; }

.recover-btn {
  margin-top: 6px;
  padding: 7px 10px;
  background: #5a4a24;
  color: #f0e0c0;
  border: none;
  border-radius: 5px;
  font-size: 12px;
}

/* 처리 대기 사건 인디케이터 바 */
#pending-bar {
  background: #5a2424;
  color: #ffd8d8;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  flex: none;
}

/* 사건 모달 */
.event-cask-info {
  font-size: 12px;
  color: #c8b89a;
  line-height: 1.5;
  margin-bottom: 8px;
}

.event-card {
  background: #3a2e20;
  border-left: 4px solid #888;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  text-align: left;
}

.event-card.cond-80 { border-left-color: #e0c040; }
.event-card.cond-50 { border-left-color: #e08020; }
.event-card.cond-30 { border-left-color: #e04040; }

.event-card-head {
  font-size: 14px;
  font-weight: bold;
  color: #e8dcc8;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.cond-tag { font-size: 11px; color: #c8a878; font-weight: normal; }

.event-card-effect {
  font-size: 12px;
  color: #d8c8a8;
  margin-bottom: 6px;
}

.event-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-countdown {
  text-align: center;
  font-size: 13px;
  color: #e0a040;
  margin: 8px 0 2px;
}

.event-pending-count {
  text-align: center;
  font-size: 11px;
  color: #c8a878;
  margin-bottom: 6px;
}

/* 캐스크 상세 모달의 사건 정보 */
.cask-event-warn {
  color: #e87050;
  font-weight: bold;
  font-size: 13px;
  margin-top: 8px;
}

.cask-event-line {
  font-size: 12px;
  color: #d8b8a8;
  margin-top: 2px;
}

.debug-row button {
  flex: 1;
}

/* 로그 모달: 목록만 스크롤하고 닫기 버튼은 하단 고정 */
#log-modal .modal-box {
  overflow: hidden;
}

#log-full-list {
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#log-full-list li {
  padding: 3px 0;
  border-bottom: 1px solid #3a2e20;
}

/* === 픽셀아트 에셋 이미지 (ASSET_SPEC Tier 2~5) === */
.tab-ico-img { display: block; width: 22px; height: 22px; image-rendering: pixelated; }
.speed-ico-img { width: 14px; height: 14px; vertical-align: middle; image-rendering: pixelated; }
.hdr-ico-img { width: 13px; height: 13px; vertical-align: middle; image-rendering: pixelated; margin-right: 1px; }
.hdr-medal-icon { width: 16px; height: 16px; vertical-align: middle; image-rendering: pixelated; }
.pl-ico img, .pl-ico .pl-svg { width: 30px; height: 30px; display: block; image-rendering: pixelated; }
.caskevent-ico { width: 16px; height: 16px; vertical-align: middle; image-rendering: pixelated; margin-right: 4px; }
.repevt-ico { width: 20px; height: 20px; vertical-align: middle; image-rendering: pixelated; margin-right: 6px; }

/* ===== [MVP+17 P3] 숙련도/전문가 UI ===== */
.skill-xp-bar { height: 8px; background: #2a2418; border-radius: 4px; overflow: hidden; margin: 5px 0; }
.skill-xp-fill { height: 100%; background: linear-gradient(90deg, #b8893a, #e0b860); border-radius: 4px; transition: width .3s ease; }
.skill-switch-row, .skill-staff-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.skill-switch-btn { min-width: auto; flex: 1 1 30%; font-size: 12px; }
.buy-btn.ghost { background: #3a3a30; color: #d0d0c0; }
.buy-btn.ghost:active { background: #4a4a3a; }
.buy-btn.danger { background: #7a3a30; color: #f0e0d0; min-width: auto; }
.buy-btn.danger:active { background: #8a4a3a; }
.skill-staff-actions .buy-btn { flex: 1 1 auto; }
.trait-badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #3a3a30; color: #d0d0c0; margin-right: 2px; }
.trait-badge.trait-pos { background: #2e5a34; color: #cdeccc; }
.trait-badge.trait-neg { background: #6a3330; color: #f0d5d0; }
.trait-badge.trait-none { background: #333; color: #999; }
.trait-badge.trait-vet { background: #7a5a20; color: #f0e0b0; }

/* ===== [MVP+17 QA] 고용 시장 3열 카드 그리드 + 상세 팝업 ===== */
.staff-refresh-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #3a3a30; color: #d0d0c0;
  border: none; border-radius: 50%;
}
.staff-refresh-btn:active { background: #4a4a3a; transform: rotate(-30deg); }
.staff-refresh-btn:disabled { background: #2a2a22; color: #6a6a5a; }

.staff-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 0;
}
.staff-card {
  background: #241d14;
  border: 1px solid #3a2e20;
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.staff-card:active { background: #2e2519; }
.staff-card-name { font-size: 13px; color: #e8dcc8; font-weight: bold; }
.staff-card-level { font-size: 12px; color: #c8a878; }
.staff-card-salary { font-size: 11px; color: #8a7c64; }
.staff-card .buy-btn { width: 100%; margin-top: 4px; min-width: auto; padding: 6px 4px; font-size: 12px; }

.staff-detail-avatar { display: flex; justify-content: center; margin-bottom: 6px; }
.staff-avatar { width: 96px; height: 96px; }
.staff-detail-name { text-align: center; font-size: 16px; font-weight: bold; color: #e8dcc8; margin-bottom: 6px; }

/* ===== [MVP+17 QA4] 직원 배치 6행×3슬롯 그리드 ===== */
.staff-row { margin-bottom: 10px; }
.staff-row-label { font-size: 13px; color: #c8a878; font-weight: bold; margin-bottom: 4px; }
.staff-slot-row { display: flex; gap: 5px; flex-wrap: wrap; }
/* [QA6] 카드 크기 축소 — 행 폭 균등분할(flex:1) 대신 고정 크기로 컴팩트하게. */
.staff-slot, .staff-slot-player {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.staff-slot-empty {
  background: #1e180f;
  border: 1px dashed #3a2e20;
  color: #5a4c38;
  font-size: 15px;
  cursor: pointer;
}
.staff-slot-empty:active { background: #2a2418; }
.staff-slot-locked { background: #17130c; border: 1px solid #2a2418; color: #4a3c2a; font-size: 12px; opacity: 0.7; }
.staff-slot-filled { background: #241d14; border: 1px solid #4a3c2a; cursor: pointer; padding: 2px; }
.staff-slot-filled:active { background: #2e2519; }
/* [QA7] 내 정보 슬롯 — 강점 분야 0번 슬롯(유저 본인), 골드 테두리로 구분. 터치 시 상세 팝업. */
.staff-slot-player { background: #2e2519; border: 1px solid #7a5a20; padding: 2px; cursor: pointer; }
.staff-slot-player:active { background: #3a2e1c; }
.staff-slot-avatar { width: 68%; }
.staff-slot-avatar svg { width: 100%; height: auto; display: block; }
.staff-slot-name { font-size: 8px; color: #e8dcc8; margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== [MVP+17 QA4] 캐릭터 생성(성별/얼굴) ===== */
.player-setup-gender-row { display: flex; gap: 8px; margin: 10px 0; }
.player-setup-gender-row .buy-btn { flex: 1 1 0; }