:root {
  --bg: #0f1420; --panel: #181f30; --panel2: #202a40; --line: #2c3752;
  --text: #e8ecf6; --muted: #93a0bd; --accent: #ff8a3d; --accent2: #ffb36b;
  --good: #3ecf8e; --bad: #ff6b6b; --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.app { max-width: 980px; margin: 0 auto; padding: 16px 14px 48px; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
.muted { color: var(--muted); } .center { text-align: center; } .small { font-size: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.banner { background: #3a2a14; border: 1px solid #6b4a1f; color: #ffd9a8; border-radius: var(--radius); padding: 10px 12px; font-size: 13px; }
.banner.warn { background: #3a1d1d; border-color: #7a3030; color: #ffc4c4; }
button, .btn { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #1b1206; font-weight: 700; }
button.primary:hover:not(:disabled) { background: var(--accent2); }
button.ghost { background: transparent; }
button.danger { border-color: #7a3030; color: #ffb3b3; }
input[type=text], select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; }
.hero { text-align: center; padding: 18px 0 8px; }
.hero .ball { font-size: 44px; }
.stats { display: flex; gap: 10px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px; min-width: 110px; text-align: center; }
.stat b { display: block; font-size: 20px; color: var(--accent2); }
.roll { text-align: center; background: linear-gradient(135deg, #2a3555, #1b2540); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; }
.roll .year { font-size: 40px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
.roll .team { font-size: 20px; font-weight: 700; }
.progress { display: flex; gap: 6px; }
.progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.progress i.done { background: var(--accent); } .progress i.now { background: var(--accent2); }
.lineup { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px; min-height: 74px; text-align: center; }
.slot.open { border-color: var(--accent); }
.slot .pos { font-weight: 800; color: var(--accent2); font-size: 13px; }
.slot .nm { font-size: 13px; font-weight: 600; word-break: keep-all; }
.slot .sub { font-size: 11px; color: var(--muted); }
.slot.filled { border-style: solid; background: var(--panel2); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 8px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
tr.off td { opacity: .4; }
td .sub { display: block; font-size: 11px; color: var(--muted); }
td.pos { text-align: center; }
td.act { text-align: center; }
td.act button { padding: 5px 10px; }
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line); margin-right: 3px; }
.total { text-align: center; padding: 18px; }
.total .big { font-size: 48px; font-weight: 800; color: var(--accent); }
.list { width: 100%; }
.list td, .list th { text-align: left; }
.list td.num, .list th.num { text-align: right; }
.list td:first-child, .list th:first-child { position: static; background: none; }
details.entry { border-bottom: 1px solid var(--line); padding: 8px 0; }
details.entry summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
details.entry .r { width: 34px; color: var(--muted); } details.entry .s { margin-left: auto; font-weight: 700; color: var(--accent2); }
.overlay { position: fixed; inset: 0; background: rgba(5, 8, 15, .7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-width: 480px; width: 100%; max-height: 86vh; overflow: auto; }
.modal ul { padding-left: 18px; margin: 8px 0; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); padding: 9px 16px; border-radius: 10px; z-index: 60; }
@media (max-width: 640px) {
  .lineup { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .slot { padding: 6px 3px; } .slot .nm { font-size: 11px; }
  .roll .year { font-size: 32px; }
}
/* 9Cat 매치업 모달 스타일 */
.matchup-modal {
  max-width: 520px !important;
}
.matchup-modal td, .matchup-modal th {
  text-align: center;
  padding: 8px 6px;
}
.stat-win {
  color: var(--good) !important;
  font-weight: 800;
  background: rgba(62, 207, 142, 0.08);
}
.stat-label {
  font-weight: 600;
  color: var(--text) !important;
}
/* public/style.css 맨 아래에 추가 */
.player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* 기준치보다 높은 엘리트 스탯 강조 효과 */
.stat-elite {
  color: var(--accent) !important;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 138, 61, 0.4);
}
/* 모바일 화면(폭 768px 이하)에서 선수 선택 카드가 가로로 넘칠 때 세로로 배치 */
@media (max-width: 768px) {
  /* 선수 선택 카드 목록을 담고 있는 컨테이너 클래스 (프로젝트 내 실제 클래스명에 맞게 조절) */
  .choices, .draft-choices, .player-grid {
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
  }
  
  /* 개별 선수 선택 카드 스타일 조정 */
  .choice-card, .player-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.site-footer {
  text-align: center;
  padding: 24px 16px;
  margin-top: 40px;
  color: var(--muted, #93a0bd);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-footer b {
  color: var(--text, #e2e8f0);
}

.site-footer .dot {
  opacity: 0.5;
}
/* 모바일 화면에서 불필요한 스탯 열 숨기기 */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}