/* gacha.css */
/* ── 소환 탭 — style.css 공통 pill 통일 그룹 사용 ── */
.gacha-tab { flex-direction:column; align-items:center; line-height:1.3; text-align:center; }
.gacha-tab-label { white-space: nowrap; }
.gacha-tab-sub { font-size: .8em; color: var(--text-muted); white-space: nowrap; }
.gacha-tab.active .gacha-tab-sub { color:rgba(255,255,255,.85); }

/* ── 픽업 박스 ── */
.gacha-pickup-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-light);
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.gacha-pickup-img {
  width: 52px; height: 52px;
  border-radius: 50%; object-fit: cover;
  background: var(--bg-muted);
  border: 2px solid var(--primary);
  flex-shrink: 0;
}
.gacha-period-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px;
  font-size: .84em;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.gacha-period-label { font-weight: 600; white-space: nowrap; }
.gacha-period-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.gacha-period-sep { color: var(--text-muted); }

/* ── 뽑기 옵션 테이블 비고 컬럼 ── */
.gacha-col-remark { white-space: nowrap; }

/* ── pity 테이블 래퍼 ── */
.gacha-pity-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 상세 패널이 열려도 pity 테이블 컬럼 너비가 흔들리지 않도록 고정 */
.gacha-pity-table { table-layout: fixed; width: 100%; }
.gacha-pity-table th, .gacha-pity-table td { overflow: hidden; }
.gacha-pity-table .gacha-detail-row > td { overflow: visible; }

/* ── pity 행 상태 ── */
.gacha-milestone-row { background: var(--primary-light); }
.gacha-pity-row:hover { background: var(--bg-alt) !important; }
.gacha-pity-row[data-detail]:hover { background: #e8edff !important; }
.gacha-row-open { background: var(--primary-light) !important; }

/* ── 상세 패널 ── */
.gacha-detail-inner {
  padding: 12px 16px;
}
.gacha-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gacha-detail-group {
  flex: 1 1 140px;
  min-width: 0;
}
.gacha-detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: .88em;
  min-width: 0;
}
.gacha-detail-item.gacha-pickup-item {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.04));
  border-left: 2px solid #f59e0b;
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: 3px;
}
.gacha-detail-item.gacha-pickup-item .gacha-detail-pct {
  color: var(--warning);
  font-weight: 700;
}
.gacha-pickup-mark {
  color: #f59e0b;
  font-size: .9em;
}
.gacha-detail-img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-muted);
  flex-shrink: 0;
}
.gacha-detail-name {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gacha-equip-grade { font-size:.92em; color:var(--text-muted); font-weight:400; }
.gacha-detail-pct {
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 모바일 ── */
@media (max-width: 768px) {
  .gacha-tab { padding: 5px 10px; font-size: .82em; }
  .gacha-tab-sub { display: none; }   /* 픽업 캐릭터 이름은 탭에서 숨김 (탭이 너무 길어짐) */
  .gacha-pickup-box { padding: 10px 12px; gap: 10px; }
  .gacha-pickup-img { width: 42px; height: 42px; }
  .gacha-period-box { font-size: .8em; padding: 5px 10px; }
  .gacha-col-remark { display: none; }  /* 모바일에서 비고 컬럼 숨김 */
  .gacha-detail-inner { padding: 10px 10px; }
  .gacha-detail-group { flex-basis: calc(50% - 5px); }
  .gacha-detail-item { font-size: .82em; gap: 4px; }
  .gacha-detail-img { width: 20px; height: 20px; }
}
@media (max-width: 400px) {
  .gacha-tab { padding: 4px 7px; font-size: .78em; }
  .gacha-detail-group { flex-basis: 100%; }
}