/* ═══════════════════════════════════════════════
   enchant.css — 모의강화 페이지
   ═══════════════════════════════════════════════ */

/* ── 페이지 헤더 ──────────────────────── */
.enc-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px 32px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-secondary);
}

.enc-header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enc-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.enc-title i {
  color: var(--color-accent);
}

.enc-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.enc-header-controls {
  display: flex;
  align-items: center;
}

.enc-server-select {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}

.enc-server-select label {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.enc-select {
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.enc-server-rate {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-up);
  font-weight: 600;
}

/* ── 통합 컨트롤 패널 ───────────────────── */
/* ── 마스터 패널: flex 체인 ──────────────── */
/* enc-split(700px) → enc-arena(100%) → enc-master-panel(100%) */
/* → setup-zone(shrink) + action-zone(flex:1) */
/* → mode-content(100%) → display(flex:1 center) + actions(shrink) */

.enc-master-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ── Setup: 자연 높이, 축소 불가 ──────────── */
.enc-setup-zone {
  flex: 0 0 auto;
}

/* Section 1: 아이템 정보 (상단 20px, 좌우 20px) */
.enc-panel-item {
  padding: 20px 20px 10px 20px;
}

/* Section 2: 모드 선택 (좌우 20px) */
.enc-panel-mode {
  padding: 10px 20px;
}

.enc-mode-tabs-inner {
  display: flex;
  background: var(--bg-body);
  border-radius: 10px;
  padding: 6px;
  gap: 4px;
}

.enc-mode-tab {
  flex: 1;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  border-radius: 6px;
  z-index: 1;
  letter-spacing: 0.02em;
}

.enc-mode-tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.enc-mode-tab.active {
  color: #000;
  background: var(--color-accent);
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.3);
}

.enc-mode-tab i {
  font-size: 15px;
}

.enc-mode-indicator {
  display: none;
}

/* Section 3: 주문서 선택 (하단 20px, 좌우 20px) */
.enc-panel-scroll {
  display: flex;
  padding: 10px 20px 20px 20px;
  gap: 8px;
}

/* ── Action: 남은 공간 전부 차지 ──────────── */
.enc-action-zone {
  flex: 1 1 0;
  position: relative;
  border-top: 1px solid var(--border-secondary);
  min-height: 0;
}

/* ── 모드 콘텐츠: absolute로 action-zone 완전 채움 (전체 20px 패딩) ── */
.enc-mode-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

/* 디스플레이: 남은 공간 중앙 정렬 */
/* (enc-display는 아래 별도 정의) */

/* 버튼: 하단 고정 */
.enc-mode-content .enc-actions {
  flex: 0 0 auto;
  margin-top: auto;
}

/* ── 섹션 타이틀 (다중 모드) ──────────────── */
.enc-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-top: 4px;
}

.enc-section-title:not(:first-child) {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-secondary);
}

/* ── 메인 조작 영역 ──────────────────── */
.enc-workspace {
  padding: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.enc-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  height: 700px;
}

/* ── 좌측 컬럼 ──────────────────── */
.enc-left-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  height: 100%;
}

/* ── 좌측: 아이템 선택기 ──────────────────── */
.enc-selector {
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.enc-selector-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-secondary);
}

.enc-selector-header .enc-select {
  padding: 14px;
  font-size: 13px;
  border-right: 1px solid var(--border-secondary);
}

.enc-selector-header .enc-select:last-child {
  border-right: none;
}

.enc-search {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-secondary);
  gap: 10px;
}

.enc-search i {
  color: var(--text-muted);
}

.enc-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
}

.enc-item-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.enc-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.enc-item:hover {
  background: var(--bg-hover);
}

.enc-item.active {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.enc-item-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: var(--bg-body);
  border-radius: 4px;
  border: 1px solid var(--border-secondary);
}

.enc-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.enc-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enc-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.enc-safe-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
}

.safe-high {
  background: rgba(14, 203, 129, 0.1);
  color: var(--color-up);
}

.safe-mid {
  background: rgba(240, 185, 11, 0.1);
  color: var(--color-accent);
}

.safe-low {
  background: rgba(246, 70, 93, 0.1);
  color: var(--color-down);
}

/* ── 우측: 강화 영역 ──────────────────── */
.enc-arena {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.enc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
  border: 1px dashed var(--border-secondary);
  border-radius: 8px;
  color: var(--text-muted);
  gap: 16px;
  box-sizing: border-box;
}

.enc-placeholder i {
  font-size: 48px;
  opacity: 0.5;
}

/* ── 아이템 카드 (통합 패널 내부) ───────────── */

.enc-card-top {
  display: flex;
  align-items: center;
  gap: 24px;
}

.enc-card-img-wrap {
  width: 80px;
  height: 80px;
  background: var(--bg-body);
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.enc-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.enc-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.enc-card-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.enc-card-specs {
  font-size: 14px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.enc-card-cat {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 확률 미리보기 (아이템 카드 내) ──────────────────── */
.enc-prob-preview {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-secondary);
  max-height: 200px;
  overflow-y: auto;
}

/* ── 강화 상태 디스플레이 ──────────────────── */
.enc-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* ── 1. 레벨 전환 디스플레이 ──────────────────── */
.enc-level-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 32px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.enc-level-transition .enc-from {
  color: var(--text-muted);
}

.enc-level-transition i {
  font-size: 20px;
  color: var(--text-muted);
  opacity: 0.5;
}

.enc-level-transition .enc-to {
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(240, 185, 11, 0.4);
}

/* ── 2. 스탯 2분할 카드 ──────────────────── */
.enc-stat-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  padding: 16px 24px;
  width: 100%;
  max-width: 340px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

.enc-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.enc-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.enc-stat-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.enc-stat-value.success {
  color: var(--color-up);
}

.enc-stat-value.fail {
  color: var(--color-down);
}

.enc-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border-secondary);
}

/* ── 3. 확률 게이지 영역 ──────────────────── */
.enc-prob-section {
  width: 100%;
  max-width: 340px;
}

.enc-prob-labels {
  display: flex;
  width: 100%;
  margin-bottom: 6px;
}

.enc-label-success,
.enc-label-maintain,
.enc-label-destroy {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: width 0.3s, opacity 0.3s;
  letter-spacing: -0.01em;
}

.enc-label-success { color: var(--color-up); }
.enc-label-maintain { color: var(--color-accent); }
.enc-label-destroy { color: var(--color-down); }

.enc-prob-bar {
  width: 100%;
  display: flex;
  height: 12px;
  background: var(--bg-body);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.enc-bar-success {
  background: var(--color-up);
  transition: width 0.3s;
}

.enc-bar-maintain {
  background: var(--color-accent);
  transition: width 0.3s;
}

.enc-bar-destroy {
  background: var(--color-down);
  transition: width 0.3s;
}

.enc-prob-bar-legend {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
}

.enc-prob-bar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.enc-prob-bar-legend span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-success::before {
  background: var(--color-up);
}

.legend-maintain::before {
  background: var(--color-accent);
}

.legend-destroy::before {
  background: var(--color-down);
}

/* ── 주문서 버튼 (통합 패널 내부) ──────────────── */

.enc-scroll-btn {
  flex: 1;
  padding: 14px 8px 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  color: var(--text-muted);
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

/* 하단 액센트 바 (선택 시 표시) */
.enc-scroll-btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transition: opacity 0.25s ease, left 0.25s ease, right 0.25s ease;
}

.enc-scroll-btn .scroll-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0.3;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  filter: grayscale(0.5);
}

.enc-scroll-btn:hover:not([disabled]) {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

.enc-scroll-btn:hover:not([disabled]) .scroll-icon {
  opacity: 0.65;
  filter: grayscale(0.2);
}

.enc-scroll-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.enc-scroll-btn.active::before {
  opacity: 1;
  left: 25%;
  right: 25%;
}

.enc-scroll-btn.active .scroll-icon {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 0 6px rgba(240, 185, 11, 0.25));
}

.enc-scroll-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.enc-scroll-btn[disabled] .scroll-icon {
  opacity: 0.2;
  filter: grayscale(1);
}

/* 주문서 호버 툴팁 */
.enc-scroll-btn[data-tooltip] {
  cursor: pointer;
}

.enc-scroll-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  white-space: pre-line;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  min-width: 180px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.enc-scroll-btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 가격 설정 ───────────────────────── */
.enc-price-config {
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  overflow: hidden;
}










.enc-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.enc-price-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-right: 1px dashed var(--border-secondary);
  border-bottom: 1px dashed var(--border-secondary);
}

.enc-price-field:nth-child(2n) {
  border-right: none;
}

.enc-price-field:nth-child(n+3) {
  border-bottom: none;
}

.enc-price-field label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.enc-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-body);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  padding: 0 10px;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}

.enc-input-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb, 255, 204, 0), 0.15);
}

.enc-input-wrap input {
  flex: 1;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
}

.enc-input-unit {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  white-space: nowrap;
}

/* ── 강화 버튼 ──────────────────────── */
.enc-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.enc-go-btn {
  background: linear-gradient(135deg, var(--color-accent), #e6b800);
  color: #000;
  padding: 18px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.3);
  position: relative;
  overflow: hidden;
}

.enc-go-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.enc-go-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240, 185, 11, 0.4);
}

.enc-go-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.enc-go-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(240, 185, 11, 0.2);
}

.enc-go-main {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.enc-action-row {
  display: flex;
  justify-content: flex-end;
}

.enc-reset-btn {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.enc-reset-btn:hover {
  color: var(--text-primary);
}

/* ── Section 2: 결과 영역 ──────────────────── */
.enc-results-section {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── 통계 ──────────────────── */

.enc-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.enc-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enc-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.enc-stat-val {
  font-size: 20px;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.enc-stat-success .enc-stat-val {
  color: var(--color-up);
}

.enc-stat-fail .enc-stat-val {
  color: var(--color-accent);
}

.enc-stat-destroy .enc-stat-val {
  color: var(--color-down);
}

.enc-cost-card,
.enc-krw-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enc-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.enc-cost-row strong {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.enc-cost-total {
  border-top: 1px dashed var(--border-secondary);
  padding-top: 12px;
  margin-top: 4px;
}

.enc-cost-total strong {
  color: var(--color-accent);
  font-size: 15px;
}

/* ── 강화 로그 ──────────────────── */
.enc-log-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
}

.enc-log-header {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-secondary);
}

.enc-log-box {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
}

.enc-log-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-secondary);
}

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

.log-time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.log-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
}

.log-badge-success {
  background: rgba(14, 203, 129, 0.1);
  color: var(--color-up);
}

.log-badge-fail {
  background: rgba(240, 185, 11, 0.1);
  color: var(--color-accent);
}

.log-badge-destroy {
  background: rgba(246, 70, 93, 0.1);
  color: var(--color-down);
}


/* ── 결과 애니메이션 영역 ──────────────────── */
.enc-result {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 8px;
  margin: 10px 0;
}

.enc-result.success {
  background: rgba(14, 203, 129, 0.1);
  color: var(--color-up);
}

.enc-result.fail {
  background: rgba(240, 185, 11, 0.1);
  color: var(--color-accent);
}

.enc-result.destroy {
  background: rgba(246, 70, 93, 0.1);
  color: var(--color-down);
}


/* ── 다중강화 ──────────────────── */

.enc-multi-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 20px;
}

.enc-multi-config {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.enc-multi-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.enc-multi-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: 12px;
}

.enc-multi-scroll-btns {
  display: flex;
  gap: 8px;
}

.enc-mscroll-btn {
  flex: 1;
  padding: 12px;
  background: var(--bg-body);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-muted);
}

.enc-mscroll-btn.active {
  background: var(--bg-active);
  border-color: var(--border-secondary);
  color: var(--text-primary);
}

.enc-multi-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  padding: 16px 24px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

.enc-range-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.enc-range-label {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.enc-select-wrapper {
  position: relative;
  display: inline-block;
  padding: 4px 0;
}

.enc-hidden-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.enc-hidden-select option {
  color: #000;
  font-size: 16px;
}

.enc-select-display {
  display: inline-block;
  color: var(--text-primary);
  font-size: 36px; /* 더 키움 */
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -0.05em;
  text-align: center;
}

.enc-select-display.target-display {
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(240, 185, 11, 0.4);
}

.enc-range-arrow {
  font-size: 20px;
  color: var(--text-muted);
  opacity: 0.5;
  margin-top: 20px;
}

.enc-range-desc {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
  margin-bottom: 24px;
}

/* ── 다중강화 횟수 설정 (가로 일체형 바) ──────────────── */
.enc-qty-unified-bar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  overflow: hidden;
}

.enc-qty-btn {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}

.enc-qty-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.enc-qty-btn.active {
  background: rgba(240, 185, 11, 0.1);
  color: var(--color-accent);
}

.enc-qty-divider {
  width: 1px;
  height: 24px;
  background: var(--border-secondary);
}

.enc-qty-custom {
  flex: 1.5;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: center;
  outline: none;
  padding: 14px 0;
}

.enc-qty-custom::placeholder {
  color: var(--text-muted);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
}

.enc-input {
  flex: 1;
  background: var(--bg-body);
  border: 1px solid var(--border-primary);
  padding: 12px;
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.enc-multi-prob {
  font-size: 12px;
  color: var(--text-muted);
}

.enc-mpp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.enc-mpp-level {
  width: 40px;
  font-family: var(--font-mono);
}

.enc-mpp-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-body);
  border-radius: 3px;
  overflow: hidden;
}

.enc-mpp-fill {
  height: 100%;
}

.enc-mpp-rate {
  width: 40px;
  text-align: right;
  font-family: var(--font-mono);
}

.enc-mpp-destroy {
  width: 40px;
  text-align: right;
  color: var(--color-down);
  font-family: var(--font-mono);
}

.enc-multi-result {
  width: 100%;
}

/* ── 강화 확률표 (터미널 대시보드 형태) ──────────────────── */
.enc-prob-section {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.enc-prob-body {
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 24px;
}

.enc-prob-badge {
  background: rgba(240, 185, 11, 0.2);
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* 필터 세그먼트 컨트롤 */
.segment-control {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
}

.segment-tab {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.segment-tab:hover {
  color: var(--text-secondary);
}

.segment-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 데이터 리스트 (표 대체) */
.enc-prob-list-wrap {
  width: 100%;
}

.prob-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s ease;
}

.prob-row:hover {
  background: rgba(255,255,255,0.03);
}

.prob-header {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  margin-bottom: 8px;
}

.prob-header:hover {
  background: transparent;
}

.prob-col {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.prob-lvl {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.prob-val-col {
  text-align: left;
}

.prob-bar-col {
  flex: 1.5;
  padding-left: 24px;
}

.prob-val-num {
  font-family: var(--font-mono);
  font-weight: 600;
  display: inline-block;
  width: 85px;
  text-align: left;
  white-space: nowrap;
}

.prob-val-num.success-num { color: var(--color-up); }
.prob-val-num.maintain-num { color: var(--color-accent); }
.prob-val-num.destroy-num { color: var(--color-down); }
.prob-val-num.empty { opacity: 0.3; color: var(--text-muted); }

/* 확률 분포 바 차트 */
.pt-bar-wrap {
  display: flex;
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 99px;
  overflow: hidden;
  gap: 1px;
}

.enc-bar-success { background: var(--color-up); height: 100%; }
.enc-bar-maintain { background: var(--color-accent); height: 100%; }
.enc-bar-destroy { background: var(--color-down); height: 100%; }

/* ── 애니메이션 ──────────────────── */
@keyframes enc-glow-success {
  0% {
    box-shadow: inset 0 0 0 2px transparent;
  }

  30% {
    box-shadow: inset 0 0 0 2px var(--color-up), 0 0 30px rgba(14, 203, 129, 0.3);
  }

  100% {
    box-shadow: inset 0 0 0 2px transparent;
  }
}

@keyframes enc-shake-destroy {

  0%,
  100% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-8px);
  }

  20% {
    transform: translateX(8px);
  }

  30% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  50% {
    transform: translateX(-4px);
  }

  60% {
    transform: translateX(4px);
  }

  70% {
    transform: translateX(-2px);
  }

  80% {
    transform: translateX(2px);
  }
}

@keyframes enc-result-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes enc-dot-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.enc-anim-success {
  animation: enc-glow-success 0.8s ease;
}

.enc-anim-destroy {
  animation: enc-shake-destroy 0.6s ease;
}

.enc-anim-maintain {
  animation: enc-glow-maintain 0.6s ease;
}

@keyframes enc-glow-maintain {
  0% {
    box-shadow: inset 0 0 0 2px transparent;
  }

  30% {
    box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 20px rgba(240, 185, 11, 0.2);
  }

  100% {
    box-shadow: inset 0 0 0 2px transparent;
  }
}

/* ── 플래시 오버레이 ──────────────────── */
.enc-flash-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 800;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
  pointer-events: none;
}

.enc-flash-overlay.flash-visible {
  opacity: 1;
}

.enc-flash-overlay.flash-success {
  background: rgba(14, 203, 129, 0.15);
  color: var(--color-up);
}

.enc-flash-overlay.flash-maintain {
  background: rgba(240, 185, 11, 0.1);
  color: var(--color-accent);
}

.enc-flash-overlay.flash-destroy {
  background: rgba(246, 70, 93, 0.15);
  color: var(--color-down);
}

.enc-flash-overlay i {
  font-size: 28px;
}

.enc-level-badge {
  transition: color 0.3s, text-shadow 0.3s;
}

.enc-go-btn {
  transition: all 0.2s ease, transform 0.15s ease;
}

.enc-go-btn:active {
  transform: scale(0.97);
}

.enc-item.active {
  transition: all 0.2s ease;
}

.enc-scroll-btn {
  transition: all 0.2s ease;
}

/* ── 도트 그리드 시각화 ──────────────────── */
.enc-dot-section {
  margin-top: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 16px;
}

.enc-dot-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.enc-dot-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: auto;
}

.enc-dot-legend .dot-success,
.enc-dot-legend .dot-destroy {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
}

.enc-dot-legend .dot-success {
  background: var(--color-up);
}

.enc-dot-legend .dot-destroy {
  background: var(--color-down);
}

.enc-dot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.enc-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: enc-dot-pop 0.2s ease forwards;
}

.enc-dot.dot-success {
  background: var(--color-up);
}

.enc-dot.dot-destroy {
  background: var(--color-down);
}

/* 도트 애니메이션 딜레이 (최대 200개) */
.enc-dot:nth-child(n) {
  animation-delay: calc(var(--i, 0) * 5ms);
}

/* ── 다중강화 레벨 박스 그리드 ──────────── */
.enc-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 4px;
  margin-top: 12px;
}

.enc-level-box {
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,0.8);
}

.enc-level-box.level-box-success {
  background: var(--color-up);
}

.enc-level-box.level-box-destroy {
  background: var(--color-down);
}

/* ── 도달 레벨 비교 그리드 (기대값 vs 실제) ─── */
.level-compare-grid {
  width: 100%;
}

.level-compare-header {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-secondary);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.level-compare-header span:not(:first-child) {
  text-align: right;
}

.level-compare-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
  font-family: var(--font-mono);
}

.level-compare-row:last-child {
  border-bottom: none;
}

.level-compare-row .lv-label {
  font-weight: 700;
}

.level-compare-row.lv-success .lv-label {
  color: var(--color-up);
}

.level-compare-row.lv-destroy .lv-label {
  color: var(--color-down);
}

.level-compare-row .lv-expected,
.level-compare-row .lv-actual {
  text-align: right;
  color: var(--text-secondary);
}

.level-compare-row .lv-actual small {
  font-size: 10px;
  margin-left: 4px;
}

.level-compare-row .lv-actual small.diff-good {
  color: var(--color-up);
}

.level-compare-row .lv-actual small.diff-bad {
  color: var(--color-down);
}

/* ── 반응형 (모바일) ──────────────────── */
@media (max-width: 600px) {
  .enc-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .enc-header-controls {
    width: 100%;
  }

  .enc-server-select {
    width: 100%;
    justify-content: space-between;
  }

  .enc-mode-tab {
    padding: 10px 0;
    font-size: 13px;
  }

  .enc-workspace {
    padding: 12px;
  }

  /* ═══ Phase 1: 레이아웃 구조 수정 (T1-1 ~ T1-4) ═══ */

  /* T1-1: 고정 높이 700px 제거 → 자연 높이 */
  .enc-split {
    grid-template-columns: 1fr;
    gap: 12px;
    height: auto;
  }

  /* enc-left-col 고정 높이 해제 */
  .enc-left-col {
    height: auto;
    overflow: visible;
    gap: 12px;
  }

  /* T1-3: arena, master-panel 고정 높이 해제 */
  .enc-arena {
    height: auto;
  }

  .enc-master-panel {
    height: auto;
  }

  /* T1-4: action-zone relative 유지, flex 정상화 */
  .enc-action-zone {
    flex: 0 0 auto;
    position: relative;
  }

  /* T1-2: 모드 콘텐츠 absolute → static */
  .enc-mode-content {
    position: static;
    padding: 16px;
  }

  /* ═══ 아이템 선택기 (바텀시트 패턴) ═══ */

  .enc-selector {
    height: auto;
    max-height: 50vh;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
  }

  /* 아이템 선택 후 셀렉터 축소 */
  .enc-selector.collapsed {
    max-height: 0;
    overflow: hidden;
    border: none;
    padding: 0;
    transition: max-height 0.3s ease;
  }

  /* 모바일 아이템 선택 바 */
  .enc-mobile-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    margin-bottom: 0;
  }

  .enc-mobile-selected-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .enc-mobile-selected-info img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: var(--bg-body);
    border-radius: 4px;
    border: 1px solid var(--border-secondary);
  }

  .enc-mobile-selected-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
  }

  .enc-mobile-selected-meta {
    font-size: 11px;
    color: var(--text-muted);
  }

  .enc-mobile-change-btn {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(240, 185, 11, 0.08);
  }

  /* 플레이스홀더 PC/모바일 분기 (G4) */
  .enc-ph-pc { display: none; }
  .enc-ph-mobile { display: inline; }

  /* ═══ Phase 2: 가격 패널 아코디언 ═══ */

  .enc-price-config {
    border-radius: 8px;
    overflow: hidden;
  }

  .enc-price-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }

  .enc-price-toggle i {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s;
  }

  .enc-price-config.expanded .enc-price-toggle i {
    transform: rotate(180deg);
  }

  .enc-price-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .enc-price-config.expanded .enc-price-body {
    max-height: 200px;
  }

  .enc-price-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  /* ═══ Phase 3: 시뮬레이터 컴팩트화 (T3-1 ~ T3-5) ═══ */

  /* T3-1: 주문서 이미지 축소 + 가로 배치 */
  .enc-scroll-btn {
    padding: 10px 8px;
    font-size: 12px;
    flex-direction: row;
    gap: 6px;
  }

  .enc-scroll-btn .scroll-icon {
    width: 28px;
    height: 28px;
  }

  /* T3-2: 아이템 카드 축소 */
  .enc-card-name {
    font-size: 16px;
  }

  .enc-card-img-wrap {
    width: 48px;
    height: 48px;
    padding: 4px;
  }

  .enc-card-top {
    gap: 12px;
  }

  .enc-card-specs {
    font-size: 12px;
  }

  .enc-card-cat {
    font-size: 11px;
  }

  .enc-panel-item {
    padding: 14px 16px 8px;
  }

  .enc-panel-mode {
    padding: 8px 16px;
  }

  .enc-panel-scroll {
    padding: 8px 16px 14px;
    gap: 6px;
  }

  /* T3-2: 레벨 전환 폰트 축소 */
  .enc-level-transition {
    font-size: 24px;
    gap: 12px;
  }

  .enc-level-transition i {
    font-size: 16px;
  }

  /* T3-3: 스탯 바 컴팩트 */
  .enc-stat-bar {
    padding: 10px 16px;
    gap: 14px;
    max-width: 100%;
  }

  .enc-stat-item .enc-stat-label {
    font-size: 11px;
  }

  .enc-stat-item .enc-stat-value {
    font-size: 16px;
  }

  .enc-stat-divider {
    height: 28px;
  }

  /* T3-4: 확률 바 컴팩트 */
  .enc-display .enc-prob-section {
    max-width: 100%;
  }

  .enc-prob-bar {
    height: 8px;
    margin-bottom: 8px;
  }

  .enc-prob-bar-legend {
    gap: 12px;
    font-size: 11px;
  }

  /* T3-5: 디스플레이 gap 축소 */
  .enc-display {
    gap: 16px;
    padding: 16px 0;
  }

  /* 강화 버튼 */
  .enc-go-btn {
    padding: 14px;
  }

  .enc-go-main {
    font-size: 16px;
  }

  /* ═══ 다중강화 컴팩트 ═══ */

  .enc-multi-range {
    max-width: 100%;
    padding: 12px 16px;
  }

  .enc-select-display {
    font-size: 28px;
  }

  .enc-range-arrow {
    margin-top: 16px;
  }

  .enc-range-desc {
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .enc-qty-unified-bar {
    max-width: 100%;
  }

  .enc-multi-config {
    gap: 12px;
  }

  /* ═══ Phase 4: 결과 & 확률표 최적화 ═══ */

  /* T4-3: 리포트 패딩 축소 */
  .enc-results-section {
    padding: 0 12px 12px;
  }

  .enc-report-receipt {
    padding: 16px;
    border-radius: 10px;
  }

  .receipt-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .brand-title {
    font-size: 12px;
  }

  .enc-btn-export {
    font-size: 11px;
    padding: 6px 10px;
  }

  .receipt-item-profile {
    gap: 12px;
    margin-bottom: 12px;
  }

  .receipt-item-img {
    width: 44px;
    height: 44px;
  }

  .receipt-item-name {
    font-size: 15px;
  }

  .receipt-item-meta {
    font-size: 11px;
  }

  .receipt-timestamp {
    font-size: 10px;
    padding: 6px 10px;
  }

  .receipt-header {
    margin-bottom: 16px;
  }

  .receipt-stat-grid {
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .r-stat {
    padding: 8px;
    min-width: calc(50% - 6px);
    flex: 1 1 calc(50% - 6px);
  }

  .r-label {
    font-size: 10px;
  }

  .r-val {
    font-size: 16px;
  }

  .receipt-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .fortune-title, .finance-title, .log-header {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .fortune-row, .finance-row {
    font-size: 12px;
    margin-bottom: 6px;
  }

  /* T4-1: 확률표 카드형 변환 (CSS-only, G6) */
  .enc-prob-section {
    padding: 0 12px;
  }

  .enc-prob-body {
    padding: 14px;
  }

  .enc-prob-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
  }

  .enc-prob-header h3 {
    font-size: 14px !important;
  }

  .enc-prob-safe-inline {
    font-size: 12px;
  }

  /* T4-2: 필터 탭 가로 스크롤 */
  .enc-prob-filters {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .enc-prob-cat-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }

  .enc-prob-cat-tabs::-webkit-scrollbar { display: none; }

  .segment-tab {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 확률표 행: 카드형 레이아웃 */
  .prob-row {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 4px;
  }

  .prob-header {
    display: none;
  }

  .prob-row .prob-lvl {
    flex: 0 0 100%;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
  }

  .prob-row .prob-val-col {
    flex: 1 1 30%;
  }

  .prob-row .prob-val-col .prob-val-num {
    width: auto;
    font-size: 12px;
  }

  .prob-row .prob-val-col::before {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 2px;
    letter-spacing: 0.03em;
  }

  .prob-row .prob-val-col:nth-child(2)::before { content: '성공'; }
  .prob-row .prob-val-col:nth-child(3)::before { content: '유지'; }
  .prob-row .prob-val-col:nth-child(4)::before { content: '파괴'; }

  .prob-row .prob-bar-col {
    flex: 0 0 100%;
    padding-left: 0;
    margin-top: 4px;
  }

  /* 도트/레벨 그리드 */
  .enc-dot {
    width: 8px;
    height: 8px;
  }

  .enc-dot-grid {
    gap: 2px;
  }

  .enc-level-grid {
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    gap: 3px;
  }

  .enc-level-box {
    height: 24px;
    font-size: 10px;
  }

  /* 도달 레벨 비교 그리드 컴팩트 */
  .level-compare-header {
    grid-template-columns: 80px 1fr 1fr;
    font-size: 10px;
  }

  .level-compare-row {
    grid-template-columns: 80px 1fr 1fr;
    font-size: 11px;
  }

  /* 다중강화 로딩 */
  .enc-multi-loading {
    padding: 40px 16px;
  }

  .enc-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .enc-stat-card {
    padding: 12px;
  }

  .enc-stat-val {
    font-size: 16px;
  }

  .enc-multi-section {
    padding: 16px;
  }

  /* 안전강화 레벨 표시 간격 */
  .enc-prob-safe-desc {
    display: block !important;
  }
}

/* ═══ PC 가드 (G2: 모바일 전용 요소 강제 비활성화) ═══ */
@media (min-width: 601px) {
  .enc-mobile-selected {
    display: none !important;
  }

  .enc-selector.collapsed {
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid var(--border-secondary) !important;
  }

  /* G4: 플레이스홀더 PC/모바일 분기 */
  .enc-ph-mobile { display: none !important; }
  .enc-ph-pc { display: inline !important; }

  /* G2: 가격 아코디언 토글 버튼 숨김 */
  .enc-price-toggle { display: none !important; }

  /* G2: 가격 패널 항상 펼침 */
  .enc-price-body {
    max-height: none !important;
    overflow: visible !important;
  }

  .enc-price-config {
    max-height: none !important;
    overflow: visible !important;
  }
}
/* ── 8. 영수증 리포트 (Receipt) ──────────────────── */
#enc-single-report-wrap {
  width: 100%;
  margin: 0 auto;
  color: #fff;
  font-family: var(--font-sans);
}

.enc-report-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.enc-btn-export {
  background: rgba(14, 203, 129, 0.1);
  color: var(--color-up);
  border: 1px solid rgba(14, 203, 129, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  white-space: nowrap;
}

.enc-btn-export:hover {
  background: rgba(14, 203, 129, 0.2);
  transform: translateY(-1px);
}

.enc-report-receipt {
  background: #111418;
  border: 1px solid var(--border-secondary);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.receipt-header {
  margin-bottom: 24px;
}

.receipt-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}

.brand-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.receipt-brand-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.brand-url {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.receipt-item-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.receipt-item-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  object-fit: contain;
}

.receipt-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.receipt-item-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.receipt-level {
  color: var(--color-accent);
}

.receipt-item-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.receipt-timestamp {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

.receipt-stat-grid {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
  margin-bottom: 24px;
}

.r-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.r-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.r-val {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-mono);
}
.r-val.success { color: var(--color-up); }
.r-val.maintain { color: var(--color-accent); }
.r-val.destroy { color: var(--color-down); }

.receipt-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}

.fortune-title, .finance-title, .log-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fortune-row, .finance-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.f-val {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.f-total {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
  color: var(--text-primary);
}

.f-total strong {
  color: var(--color-accent);
}
.f-cash strong {
  color: var(--color-up);
}

.fortune-result {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.receipt-log-box {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.receipt-log-box .log-item {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  align-items: center;
}

.log-time { opacity: 0.5; }
.log-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.log-badge-success { background: rgba(14,203,129,0.15); color: var(--color-up); }
.log-badge-fail { background: rgba(240,185,11,0.15); color: var(--color-accent); }
.log-badge-destroy { background: rgba(244,102,102,0.15); color: var(--color-down); }

.receipt-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  font-family: var(--font-mono);
  padding-top: 12px;
}