/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  background: #1a1208;
  min-height: 100vh;
  color: #2c1f0e;
}

a { text-decoration: none; color: inherit; }

/* ── Wrapper ──────────────────────────────────────────── */
.app-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background: #f0e5c8;
  min-height: 100vh;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

/* ── Header ───────────────────────────────────────────── */
.app-header {
  background: linear-gradient(180deg, #3d2a08 0%, #2a1c04 100%);
  border-bottom: 3px solid #7a5a1a;
  padding: 0 12px;
}

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

.clan-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clan-icon { font-size: 22px; }

.clan-name {
  font-size: 18px;
  font-weight: 900;
  color: #f5c842;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
}

.clan-tag {
  font-size: 11px;
  color: #a89060;
}

/* ── Nav Tabs ─────────────────────────────────────────── */
.nav-tabs {
  display: flex;
  gap: 4px;
}

.nav-tab {
  padding: 7px 16px;
  border-radius: 8px 8px 0 0;
  background: #4a3510;
  color: #c8a864;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid #6a4f1a;
  border-bottom: none;
  transition: background 0.15s;
}

.nav-tab:hover { background: #5a4218; }

.nav-tab.active {
  background: linear-gradient(180deg, #d4a830 0%, #b88820 100%);
  color: #2a1c04;
  border-color: #8a6010;
}

.tab-icon { margin-right: 4px; }

/* ── Main ─────────────────────────────────────────────── */
.app-main {
  padding: 12px;
}

/* ── Top Banner ───────────────────────────────────────── */
.top-banner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .top-banner { grid-template-columns: 1fr; }
}

/* Last War Card */
.last-war-card {
  background: linear-gradient(135deg, #2d4a20 0%, #1e3314 100%);
  border: 2px solid #4a7a30;
  border-radius: 10px;
  padding: 12px;
  color: white;
}

.last-war-label {
  font-size: 11px;
  color: #8ec870;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.last-war-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.war-result-badge {
  font-size: 15px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 12px;
}

.result-win   { background: #2e7d32; color: #a5d6a7; }
.result-lose  { background: #c62828; color: #ef9a9a; }
.result-tie   { background: #f57f17; color: #fff59d; }

.war-score  { font-size: 16px; font-weight: 900; color: #f5c842; }
.war-opponent { font-size: 12px; color: #aaa; }
.war-size   { font-size: 11px; color: #777; }

/* Excluded Card */
.excluded-card {
  background: #fff8ee;
  border: 2px solid #d4a830;
  border-radius: 10px;
  padding: 12px;
}

.excluded-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.excluded-title {
  font-size: 13px;
  font-weight: 700;
  color: #8a5010;
}

.excluded-war-date {
  font-size: 11px;
  font-weight: 400;
  color: #b08030;
  margin-left: 4px;
}

.btn-copy {
  background: linear-gradient(180deg, #d4a830, #b88820);
  color: #2a1c04;
  border: 1px solid #8a6010;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-copy:hover { background: linear-gradient(180deg, #e0b840, #c89830); }

.excluded-text {
  font-size: 12px;
  color: #5a3a10;
  white-space: pre-line;
  max-height: 100px;
  overflow-y: auto;
  background: #fdf3dc;
  border-radius: 6px;
  padding: 8px;
  line-height: 1.6;
}

/* ── Member List Header ───────────────────────────────── */
.member-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  font-size: 12px;
  color: #6a4a20;
  font-weight: 700;
  margin-bottom: 4px;
}

.sort-hint { font-size: 11px; color: #9a7a50; font-weight: 400; }

/* ── Member Row ───────────────────────────────────────── */
.member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffdf5;
  border: 1px solid #d8c898;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.1s;
}

.member-row:hover { background: #fff8e8; }

.member-row.rank-first {
  background: linear-gradient(90deg, #e8f5e0 0%, #f0fbea 100%);
  border-color: #5aaa3a;
  box-shadow: 0 2px 6px rgba(74,158,63,0.2);
}

.member-row.row-excluded {
  background: #fff5f5;
  border-color: #e8a0a0;
}

.member-row { position: relative; }

.member-row.row-in-war {
  border-color: #6aaa60;
}

.war-active-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  background: #2e7d32;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 9px 0 6px 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* 래퍼를 평탄화 — member-row가 직접 flex 단일행 관리 */
.member-row-top,
.member-row-bottom {
  display: contents;
}

/* 이름: 자연 너비 사용, 최소 너비 보장 */
.member-info { min-width: 0; }

/* 통계 그룹: 왼쪽 여백 auto로 오른쪽 정렬 */
.war-stats { margin-left: auto; }

/* Rank Badge */
.rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-weight: 900;
  font-size: 14px;
  color: #5a7a3a;
}

.rank-badge-first {
  /* SVG handles its own styling */
}

/* League Icon */
.league-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.league-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.league-tier {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #2a1c04;
  color: #f5c842;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 3px;
  border-radius: 4px;
  line-height: 1;
}

.no-league {
  width: 44px;
  height: 44px;
  background: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 11px;
}

/* TH Badge */
.th-image {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, #9e9e9e, #616161);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.th-badge.th-1  { background: linear-gradient(135deg, #a1887f, #5d4037); }
.th-badge.th-2  { background: linear-gradient(135deg, #a1887f, #5d4037); }
.th-badge.th-3  { background: linear-gradient(135deg, #a1887f, #5d4037); }
.th-badge.th-4  { background: linear-gradient(135deg, #90a4ae, #455a64); }
.th-badge.th-5  { background: linear-gradient(135deg, #90a4ae, #455a64); }
.th-badge.th-6  { background: linear-gradient(135deg, #81c784, #2e7d32); }
.th-badge.th-7  { background: linear-gradient(135deg, #81c784, #2e7d32); }
.th-badge.th-8  { background: linear-gradient(135deg, #4dd0e1, #00695c); }
.th-badge.th-9  { background: linear-gradient(135deg, #4dd0e1, #00695c); }
.th-badge.th-10 { background: linear-gradient(135deg, #64b5f6, #1565c0); }
.th-badge.th-11 { background: linear-gradient(135deg, #5c6bc0, #1a237e); }
.th-badge.th-12 { background: linear-gradient(135deg, #7e57c2, #311b92); }
.th-badge.th-13 { background: linear-gradient(135deg, #ab47bc, #4a148c); }
.th-badge.th-14 { background: linear-gradient(135deg, #ec407a, #880e4f); }
.th-badge.th-15 { background: linear-gradient(135deg, #ef5350, #b71c1c); }
.th-badge.th-16 { background: linear-gradient(135deg, #ff7043, #bf360c); }
.th-badge.th-17 { background: linear-gradient(135deg, #ffa726, #e65100); }
.th-badge.th-18 { background: linear-gradient(135deg, #ffd54f, #f57f17); color: #3e2000; text-shadow: none; }

/* TH 이미지 실제 img 태그 */
.th-image img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

/* 전쟁 상세/CWL 내 TH 이미지 */
.col-th-img img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* 전쟁 상세/CWL 내 작은 TH 배지 (fallback) */
.col-th-img .th-badge {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 6px;
}

/* Member Info */
/* .member-info flex/min-width는 위 래퍼 섹션에서 정의 */

.member-name {
  font-size: 15px;
  font-weight: 900;
  color: #1a1208;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role {
  font-size: 11px;
  color: #7a5a30;
  margin-top: 2px;
}

.member-tag {
  font-size: 10px;
  color: #b0a080;
  margin-top: 1px;
}

/* War Stats */
.war-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.stat-label {
  font-size: 10px;
  color: #9a7a50;
  font-weight: 700;
  margin-bottom: 3px;
  white-space: nowrap;
}

.stat-value { display: flex; align-items: center; }

/* Badges */
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.badge-green  { background: #e8f5e0; color: #2e7d32; border: 1px solid #66bb6a; }
.badge-red    { background: #ffebee; color: #c62828; border: 1px solid #ef5350; }
.badge-orange { background: #fff3e0; color: #e65100; border: 1px solid #ffa726; }
.badge-gray   { background: #f5f5f5; color: #616161; border: 1px solid #bdbdbd; }

/* War preference */
.pref-in      { color: #2e7d32; font-weight: 700; font-size: 13px; }
.pref-out     { color: #c62828; font-weight: 700; font-size: 13px; }
.pref-unknown { color: #aaa; font-size: 11px; }

/* Miss count */
.miss-count {
  font-size: 12px;
  font-weight: 700;
  color: #5a3a10;
}

.miss-mid  { color: #e65100; }
.miss-high { color: #c62828; }

.total-miss {
  font-size: 10px;
  color: #9a7a50;
  font-weight: 400;
  margin-left: 2px;
}

/* Trophy */
.trophy-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #707070;
  color: white;
  border-radius: 16px;
  padding: 4px 10px;
  min-width: 70px;
  justify-content: flex-end;
  white-space: nowrap;
}

.trophy-pill.trophy-first {
  background: #4a9e3f;
}

.trophy-num {
  font-size: 15px;
  font-weight: 900;
}

.trophy-icon { font-size: 16px; }

/* Action col */
.action-col {
  min-width: 52px;
  display: flex;
  justify-content: center;
}

.btn-restore {
  background: linear-gradient(180deg, #4a9e3f, #2e7d32);
  color: white;
  border: 1px solid #1b5e20;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-restore:hover { background: linear-gradient(180deg, #5ab84d, #388e3c); }

/* ── War List ─────────────────────────────────────────── */
.wars-header {
  padding: 4px 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: #3d2a08;
}

.war-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── War Card (새 디자인) ─────────────────────────────── */
.wc-card {
  display: grid;
  grid-template-columns: 72px 1fr auto auto 28px;
  align-items: center;
  gap: 0;
  background: #fffdf5;
  border: 1px solid #d8c898;
  border-radius: 12px;
  border-left: 5px solid #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.wc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
}

.wc-win         { border-left-color: #4caf50; }
.wc-lose        { border-left-color: #f44336; }
.wc-tie         { border-left-color: #ff9800; }
.wc-inWar       { border-left-color: #1565c0; }
.wc-preparation { border-left-color: #7b1fa2; }
.wc-unknown     { border-left-color: #aaa; }

/* 결과 박스 */
.wc-result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 4px;
  gap: 3px;
  height: 100%;
}

.wc-win         .wc-result-box { background: linear-gradient(180deg, #e8f5e0, #d0edc0); }
.wc-lose        .wc-result-box { background: linear-gradient(180deg, #ffebee, #ffd0d0); }
.wc-tie         .wc-result-box { background: linear-gradient(180deg, #fff3e0, #ffe0b0); }
.wc-inWar       .wc-result-box { background: linear-gradient(180deg, #e3f2fd, #bbdefb); }
.wc-preparation .wc-result-box { background: linear-gradient(180deg, #f3e5f5, #e1bee7); }
.wc-unknown     .wc-result-box { background: #f5f5f5; }

.wc-result-icon { font-size: 22px; line-height: 1; }

@keyframes pulse-icon {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
.wc-pulse { animation: pulse-icon 1.5s ease-in-out infinite; }

.wc-result-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.wc-result-text.win    { color: #2e7d32; }
.wc-result-text.lose   { color: #c62828; }
.wc-result-text.tie    { color: #e65100; }
.wc-result-text.inwar  { color: #1565c0; }
.wc-result-text.prep   { color: #7b1fa2; }
.wc-result-text.unknown { color: #888; }

/* 상대방 정보 */
.wc-info {
  padding: 12px 8px 12px 12px;
  overflow: hidden;
  border-left: 1px solid #e8d8b0;
}

.wc-opponent {
  font-size: 15px;
  font-weight: 900;
  color: #1a1208;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}

.wc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9a7a50;
  flex-wrap: wrap;
}

.wc-size {
  background: #e8d8b0;
  border-radius: 8px;
  padding: 1px 7px;
  font-weight: 700;
  color: #5a3a10;
  font-size: 11px;
}

/* 스코어 */
.wc-score {
  text-align: center;
  padding: 10px 12px;
  border-left: 1px solid #e8d8b0;
}

.wc-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  margin-bottom: 4px;
}

.wc-our-stars {
  font-size: 20px;
  font-weight: 900;
  color: #2e7d32;
  min-width: 26px;
  text-align: right;
}
.wc-opp-stars {
  font-size: 20px;
  font-weight: 900;
  color: #c62828;
  min-width: 26px;
  text-align: left;
}
.wc-star-icon { font-size: 13px; }
.wc-sep { font-size: 13px; color: #bbb; margin: 0 2px; font-weight: 700; }

.wc-destr {
  font-size: 11px;
  color: #7a5a30;
  white-space: nowrap;
}
.wc-destr-sep { color: #bbb; margin: 0 3px; }

/* 참전 통계 */
.wc-parti {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 10px;
  align-items: flex-end;
  border-left: 1px solid #e8d8b0;
}

.wc-parti-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wc-parti-num {
  font-size: 16px;
  font-weight: 900;
  min-width: 22px;
  text-align: right;
}
.wc-parti-lbl {
  font-size: 11px;
  color: #9a7a50;
  white-space: nowrap;
}

.wc-attacked .wc-parti-num { color: #2e7d32; }
.wc-missed   .wc-parti-num { color: #c62828; }

.wc-arrow {
  font-size: 20px;
  color: #c8a864;
  padding: 0 6px;
  text-align: center;
}

/* 기존 호환성 유지 */
.war-card {
  display: grid;
  grid-template-columns: 80px 1fr auto auto 24px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fffdf5;
  border: 2px solid #d8c898;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.1s, transform 0.1s;
}
.war-card:hover { background: #fff8e8; transform: translateY(-1px); }
.war-card.result-win  { border-left: 5px solid #4caf50; }
.war-card.result-lose { border-left: 5px solid #f44336; }
.war-card.result-tie  { border-left: 5px solid #ff9800; }

.result-big { font-size: 16px; font-weight: 900; display: block; text-align: center; }
.result-big.win  { color: #2e7d32; }
.result-big.lose { color: #c62828; }
.result-big.tie  { color: #e65100; }
.result-big.unknown { color: #888; font-size: 13px; }

.war-opponent-name { font-size: 14px; font-weight: 700; color: #1a1208; }
.war-date { font-size: 11px; color: #9a7a50; margin-top: 2px; }
.war-size-label { font-size: 11px; color: #b0a080; }
.war-card-score { text-align: center; }
.score-row { font-size: 15px; font-weight: 900; color: #3d2a08; }
.score-sep { margin: 0 6px; }
.destr-row { font-size: 11px; color: #9a7a50; margin-top: 2px; }
.war-card-parti { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.parti-stat { display: flex; align-items: center; gap: 4px; }
.parti-num { font-size: 14px; font-weight: 900; color: #2e7d32; }
.parti-stat.miss .parti-num { color: #c62828; }
.parti-label { font-size: 10px; color: #9a7a50; }
.war-card-arrow { font-size: 22px; color: #c8a864; }

/* ── War Detail ───────────────────────────────────────── */
.detail-header {
  padding: 10px 0 12px;
  border-bottom: 2px solid #d8c898;
  margin-bottom: 12px;
}

.btn-back {
  display: inline-block;
  font-size: 13px;
  color: #7a5a30;
  font-weight: 700;
  margin-bottom: 8px;
}

.btn-back:hover { color: #3d2a08; }

.detail-title {
  font-size: 18px;
  font-weight: 900;
  color: #1a1208;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.result-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.detail-size { font-size: 13px; color: #9a7a50; }

.detail-score {
  font-size: 14px;
  font-weight: 700;
  color: #5a3a10;
  margin-top: 6px;
}

/* Participant list */
.participant-list { display: flex; flex-direction: column; gap: 3px; }

.parti-list-header {
  display: grid;
  grid-template-columns: 36px 48px 1fr 50px 50px 70px;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #9a7a50;
  border-bottom: 1px solid #d8c898;
}

.parti-row {
  display: grid;
  grid-template-columns: 36px 48px 1fr 50px 50px 70px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: #fffdf5;
  border: 1px solid #e8d8b0;
  border-radius: 8px;
  font-size: 13px;
}

.parti-row.missed { background: #fff5f5; border-color: #f0c0c0; }

.col-map   { font-size: 12px; font-weight: 700; color: #7a5a30; text-align: center; }
.col-th    { display: flex; align-items: center; }
.col-name  { display: flex; align-items: center; gap: 4px; font-weight: 700; overflow: hidden; }
.col-attacks { text-align: center; color: #5a3a10; }
.col-stars   { text-align: center; font-weight: 700; }
.col-result  { display: flex; justify-content: center; }

.th-small { width: 38px; height: 38px; object-fit: contain; }
.league-small { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

/* ── Misc ─────────────────────────────────────────────── */
.no-data {
  padding: 40px;
  text-align: center;
  color: #9a7a50;
  font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .app-main { padding: 8px; }

  /* 배너: 세로 스택 */
  .top-banner { grid-template-columns: 1fr; }

  /* Member Row: 단일 행 유지, 요소 축소 */
  .member-row { gap: 5px; padding: 6px 8px; }

  /* 아이콘 축소 */
  .league-icon { width: 28px; height: 28px; }
  .league-icon img { width: 26px; height: 26px; }
  .league-tier { font-size: 7px; }
  .th-image { width: 34px; height: 34px; }
  .th-image .th-badge { width: 30px; height: 30px; font-size: 11px; }
  .rank-badge { width: 26px; height: 26px; font-size: 12px; }

  /* 이름만 표시 (역할·태그 숨김) */
  .member-role, .member-tag { display: none; }
  .member-name { font-size: 12px; white-space: nowrap; }

  /* 통계 컴팩트 */
  .war-stats { gap: 5px; }
  .stat-label { font-size: 8px; margin-bottom: 2px; }
  .stat-item { min-width: 42px; }
  .badge { font-size: 9px; padding: 1px 4px; }
  .pref-in, .pref-out { font-size: 11px; }
  .miss-count { font-size: 11px; }

  /* 트로피 */
  .trophy-pill { min-width: 44px; padding: 2px 6px; }
  .trophy-num { font-size: 12px; }
  .trophy-icon { font-size: 13px; }

  /* 복귀 버튼 */
  .btn-restore { font-size: 10px; padding: 2px 6px; }

  /* War 카드: 3컬럼 */
  .war-card { grid-template-columns: 60px 1fr auto; gap: 8px; padding: 10px; }
  .war-card-parti { display: none; }
  .war-card-arrow { display: none; }

  /* 새 wc-card 모바일 */
  .wc-card { grid-template-columns: 60px 1fr auto 22px; }
  .wc-parti { display: none; }
  .wc-score { padding: 8px; }
  .wc-our-stars, .wc-opp-stars { font-size: 16px; }
  .wc-destr { font-size: 10px; }
  .wc-opponent { font-size: 13px; }
  .wc-info { padding: 10px 6px 10px 10px; }

  /* War 상세 */
  .parti-list-header,
  .parti-row {
    grid-template-columns: 28px 38px 1fr 38px 38px 58px;
    font-size: 11px;
    gap: 4px;
    padding: 6px 8px;
  }
  .th-small { width: 32px; height: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   WAR DETAIL — CoC 스타일 리디자인
═══════════════════════════════════════════════════════════ */

/* ── 배너 배경 ──────────────────────────────────────────── */
.war-banner-bg {
  position: relative;
  background: #1e1a14;
  padding: 16px 12px 12px;
  margin: -12px -12px 0;
}

.banner-back {
  display: inline-block;
  color: #c8a864;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
}
.banner-back:hover { color: #f5c842; }

/* ── 리본 (배너 형태) ───────────────────────────────────── */
.war-ribbon {
  background: linear-gradient(180deg, #9b2020 0%, #6e1515 50%, #9b2020 100%);
  clip-path: polygon(
    0 0, 100% 0,
    100% 38%, calc(100% - 22px) 50%, 100% 62%,
    100% 100%, 0 100%,
    0 62%, 22px 50%, 0 38%
  );
  padding: 14px 52px 14px;
  border: 2px solid #c8401a;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,100,0.2);
  text-align: center;
  user-select: none;
}

.banner-win    .war-ribbon { background: linear-gradient(180deg, #1a7a20 0%, #0e4a10 50%, #1a7a20 100%); border-color: #2ea830; }
.banner-lose   .war-ribbon { background: linear-gradient(180deg, #9b2020 0%, #6e1515 50%, #9b2020 100%); border-color: #c8401a; }
.banner-tie    .war-ribbon { background: linear-gradient(180deg, #7a6010 0%, #4e3e08 50%, #7a6010 100%); border-color: #c8a030; }

.ribbon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ribbon-clan, .ribbon-opp {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.flame-badge { display: flex; }

.ribbon-score {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
  letter-spacing: 4px;
  margin-top: 4px;
}

.ribbon-prep {
  font-size: 16px;
  letter-spacing: 1px;
  opacity: 0.85;
}

.ribbon-clan-block, .ribbon-opp-block {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
}

.clan-badge-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));
  flex-shrink: 0;
}

/* ── 요약 스탯 바 ───────────────────────────────────────── */
.war-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: #2a2010;
  padding: 8px 16px;
  border-bottom: 2px solid #4a3510;
  margin: 0 -12px 0;
}

.wib-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 14px;
  border-right: 1px solid #4a3510;
}
.wib-item:last-child { border-right: none; }

.wib-label {
  font-size: 10px;
  color: #8a6a30;
  font-weight: 700;
  text-transform: uppercase;
}

.wib-val {
  font-size: 13px;
  font-weight: 700;
  color: #f5c842;
  margin-top: 2px;
}

.wib-vs { color: #8a6a30; margin: 0 4px; font-size: 11px; }

.wib-result {
  font-size: 13px;
  font-weight: 900;
  margin-top: 2px;
}

/* ── 탭 버튼 ────────────────────────────────────────────── */
.war-tabs {
  display: flex;
  background: #2a2010;
  margin: 0 -12px;
  border-bottom: 3px solid #4a3510;
}

.war-tab {
  flex: 1;
  padding: 10px 8px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  color: #8a6a30;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.war-tab:hover { color: #f5c842; background: rgba(255,255,255,0.04); }

.war-tab.active {
  color: #f5c842;
  border-bottom-color: #f5c842;
  background: rgba(245,200,66,0.06);
}

/* ── 탭 패널 ────────────────────────────────────────────── */
.tab-panel { padding-top: 6px; }

/* ── 공격 테이블 헤더 ───────────────────────────────────── */
.atk-table-header {
  display: grid;
  grid-template-columns: 32px 40px 1fr 110px 110px 64px 46px;
  gap: 4px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #9a7a50;
  text-transform: uppercase;
  border-bottom: 2px solid #d8c898;
  margin-bottom: 4px;
}

.atk-table-header span { text-align: center; }
.col-h-name { text-align: left !important; }
.col-h-wide { text-align: center; }

/* CWL은 attack2 컬럼 없음 */
.cwl-header {
  grid-template-columns: 32px 40px 1fr 130px 64px 46px;
}

/* ── 공격 행 ────────────────────────────────────────────── */
.atk-row {
  display: grid;
  grid-template-columns: 32px 40px 1fr 110px 110px 64px 46px;
  gap: 4px;
  align-items: center;
  padding: 6px 8px;
  background: #fffdf5;
  border: 1px solid #e8d8b0;
  border-radius: 8px;
  margin-bottom: 3px;
  font-size: 12px;
}

.atk-row.atk-row-miss {
  background: #fff5f5;
  border-color: #f0c0c0;
  opacity: 0.85;
}

.atk-row.atk-row-great {
  background: linear-gradient(90deg, #f0fae8 0%, #fffdf5 100%);
  border-color: #8ecf60;
}

.atk-row.def-row-perfect {
  background: linear-gradient(90deg, #e8f0ff 0%, #fffdf5 100%);
  border-color: #80aaff;
}

/* ── 맵 뱃지 (파란 육각형) ─────────────────────────────── */
.col-map-hex {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #3a6abf, #254ea0);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 900;
  justify-self: center;
}

/* ── TH 이미지 ──────────────────────────────────────────── */
.col-th-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-th-img img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* ── 이름 열 ────────────────────────────────────────────── */
.col-pname {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.league-tiny {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.pname-text {
  font-size: 13px;
  font-weight: 700;
  color: #1a1208;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 공격 블록 ──────────────────────────────────────────── */
.atk-block {
  background: #f0e8d0;
  border: 1px solid #d4c090;
  border-radius: 6px;
  padding: 4px 6px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.atk-block.atk-perfect {
  background: linear-gradient(135deg, #e8f8e0, #d0f0c0);
  border-color: #6abf40;
}

.atk-block.atk-empty {
  background: #f8f5ee;
  border-color: #e0d8c0;
}

.atk-top {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.atk-dest {
  font-size: 12px;
  font-weight: 700;
  color: #2a1c04;
  white-space: nowrap;
}

.atk-stars {
  font-size: 12px;
  color: #d4a000;
  letter-spacing: -1px;
  white-space: nowrap;
}

.atk-target {
  font-size: 10px;
  color: #8a6030;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atk-not-used {
  font-size: 11px;
  font-weight: 700;
  color: #c8860a;
  text-align: center;
}

/* ── 방어 성공 열 ───────────────────────────────────────── */
.col-def-won {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.def-won-pill {
  background: #e8e0d0;
  border: 1px solid #c8b890;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #3a2a10;
  white-space: nowrap;
}

.def-won-pill.def-won-perfect {
  background: #d0f0ff;
  border-color: #60b0e0;
  color: #104080;
}

.def-label-tiny {
  font-size: 9px;
  color: #9a7a50;
}

/* ── 총 스타 박스 ───────────────────────────────────────── */
.col-stars-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8d0a0;
  border: 1px solid #c8a060;
  border-radius: 8px;
  padding: 4px;
  min-width: 40px;
}

.col-stars-box.stars-max {
  background: linear-gradient(135deg, #d0f0c0, #a8e880);
  border-color: #5abf30;
}

.col-stars-box.stars-zero {
  background: #f8e0e0;
  border-color: #e08080;
}

.stars-num {
  font-size: 16px;
  font-weight: 900;
  color: #3a2a10;
  line-height: 1;
}

.stars-icon { font-size: 12px; }

/* ── 방어 결과 탭 전용 ──────────────────────────────────── */
.def-info-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.def-received-num {
  font-size: 14px;
  font-weight: 700;
  color: #1a1208;
}

.def-received-lbl {
  font-size: 9px;
  color: #9a7a50;
}

.def-conceded {
  font-size: 16px;
  font-weight: 900;
  color: #c62828;
}

.def-conceded.def-clean { color: #2e7d32; }
.def-conceded.def-heavy { color: #b71c1c; }

/* 방어 결과 탭은 컬럼 다름 */
#panel-defense .atk-table-header {
  grid-template-columns: 32px 40px 1fr 80px 70px 64px;
}
#panel-defense .atk-row {
  grid-template-columns: 32px 40px 1fr 80px 70px 64px;
}

/* ── 종합 리포트 ────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
}

.summary-card {
  background: #fffdf5;
  border: 2px solid #d8c898;
  border-radius: 10px;
  padding: 14px;
}

.summary-card.summary-result { grid-column: 1 / -1; text-align: center; }
.summary-card.summary-miss   { grid-column: 1 / -1; }
.summary-card.summary-perfect-parti { grid-column: 1 / -1; text-align: center; }

.sc-title {
  font-size: 12px;
  font-weight: 700;
  color: #9a7a50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.sc-result {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 4px;
}

.sc-result.result-win  { color: #2e7d32; }
.sc-result.result-lose { color: #c62828; }
.sc-result.result-tie  { color: #e65100; }

.sc-score {
  font-size: 22px;
  font-weight: 900;
  color: #3d2a08;
  margin-bottom: 4px;
}

.sc-sub {
  font-size: 12px;
  color: #9a7a50;
}

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #e8d8b0;
  font-size: 13px;
  color: #5a3a10;
}
.sc-row:last-child { border-bottom: none; }
.sc-row strong { font-weight: 900; color: #1a1208; }

.sc-mvp-name {
  font-size: 18px;
  font-weight: 900;
  color: #1a1208;
  margin-bottom: 4px;
}

.sc-mvp-stat {
  font-size: 14px;
  font-weight: 700;
  color: #4a9e3f;
  margin-bottom: 2px;
}

.sc-mvp-detail {
  font-size: 11px;
  color: #9a7a50;
}

.sc-miss-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0e0e0;
  font-size: 13px;
  color: #5a1010;
}
.sc-miss-item:last-child { border-bottom: none; }

.miss-pos {
  font-size: 11px;
  color: #9a7a50;
  min-width: 28px;
}
.miss-th { font-size: 11px; color: #9a7a50; margin-left: auto; }

.sc-perfect-msg {
  font-size: 16px;
  font-weight: 700;
  color: #2e7d32;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   CWL 페이지
═══════════════════════════════════════════════════════════ */

/* ── 공통 페이지 헤더 ───────────────────────────────────── */
.page-header {
  padding: 12px 4px 10px;
  border-bottom: 2px solid #d8c898;
  margin-bottom: 12px;
}
.page-title { font-size: 18px; font-weight: 900; color: #3d2a08; }
.page-sub { font-size: 12px; color: #9a7a50; margin-top: 2px; }

/* ── CWL 시즌 카드 목록 ─────────────────────────────────── */
.cwl-season-list { display: flex; flex-direction: column; gap: 6px; }

.cwl-season-card {
  display: grid;
  grid-template-columns: 1fr auto auto 24px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fffdf5;
  border: 2px solid #d8c898;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: background 0.1s, transform 0.1s;
}
.cwl-season-card:hover { background: #fff8e8; transform: translateY(-1px); }

.cwl-season-left { display: flex; flex-direction: column; gap: 2px; }

.cwl-season-label {
  font-size: 18px;
  font-weight: 900;
  color: #1a1208;
}

.cwl-league-name { font-size: 12px; color: #7a5a30; }

.cwl-state-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 2px;
  width: fit-content;
}
.state-inWar, .state-preparation { background: #e8f5e0; color: #2e7d32; }
.state-ended, .state-warEnded { background: #f0f0f0; color: #666; }

.cwl-season-record {
  font-size: 16px;
  font-weight: 900;
  color: #3d2a08;
  text-align: center;
  white-space: nowrap;
}

.cwl-win  { color: #2e7d32; }
.cwl-lose { color: #c62828; }
.cwl-tie  { color: #e65100; }
.cwl-sep  { color: #9a7a50; }

.cwl-season-stars { text-align: right; }
.cwl-stars-row { font-size: 14px; font-weight: 700; color: #5a3a10; white-space: nowrap; }
.cwl-star-vs { font-size: 11px; color: #9a7a50; margin: 0 4px; }
.cwl-our-stars { color: #d4a000; }
.cwl-opp-stars { color: #9a7a50; }
.cwl-wars-count { font-size: 11px; color: #9a7a50; margin-top: 2px; text-align: right; }

.cwl-card-arrow { font-size: 22px; color: #c8a864; }

/* no-data 보강 */
.no-data-icon { font-size: 40px; margin-bottom: 8px; }
.no-data-sub { font-size: 12px; color: #b0a080; margin-top: 4px; }

/* ── CWL 상세 배너 ──────────────────────────────────────── */
.cwl-banner-bg {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  padding: 12px 16px 16px;
  margin: -12px -12px 0;
}

.cwl-banner-content { text-align: center; }
.cwl-banner-title {
  font-size: 22px;
  font-weight: 900;
  color: #f5c842;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}
.cwl-banner-league {
  font-size: 13px;
  color: #a89060;
  margin: 4px 0;
}
.cwl-banner-record {
  font-size: 20px;
  font-weight: 900;
  margin-top: 6px;
}

/* ── CWL 일별 블록 ──────────────────────────────────────── */
.cwl-day-block {
  margin-bottom: 16px;
  background: #fffdf5;
  border: 2px solid #d8c898;
  border-radius: 10px;
  overflow: hidden;
}

.cwl-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: linear-gradient(90deg, #2a1c04 0%, #3d2a08 100%);
  color: #f5c842;
}

.cwl-day-num {
  font-size: 14px;
  font-weight: 900;
  color: #f5c842;
  white-space: nowrap;
}

.cwl-day-opp {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwl-day-score {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}

.cwl-day-destr {
  font-size: 11px;
  color: #a89060;
  white-space: nowrap;
}

/* CWL 일별 내 atk-row는 하단 테두리 없이 */
.cwl-day-block .atk-table-header {
  grid-template-columns: 32px 40px 1fr 130px 64px 46px;
  margin-bottom: 0;
  padding: 6px 12px;
  background: #f5ecd5;
}

.cwl-day-block .atk-row {
  grid-template-columns: 32px 40px 1fr 130px 64px 46px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #e8d8b0;
  margin-bottom: 0;
  padding: 6px 12px;
}

.cwl-day-block .atk-row:last-child { border-bottom: none; }

/* ── 선수 통계 탭 ───────────────────────────────────────── */
.stat-cell {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #3d2a08;
}

.cwl-star-cell { color: #d4a000; }

/* player stats 탭의 컬럼 */
#panel-players .atk-table-header {
  grid-template-columns: 40px 1fr 60px 80px 80px 64px;
}
#panel-players .atk-row {
  grid-template-columns: 40px 1fr 60px 80px 80px 64px;
}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .war-banner-bg { margin: -8px -8px 0; padding: 10px 8px 8px; }
  .war-info-bar { margin: 0 -8px 0; }
  .war-tabs { margin: 0 -8px; }

  .ribbon-clan, .ribbon-opp { font-size: 13px; max-width: 100px; }
  .ribbon-score { font-size: 22px; }
  .flame-badge svg { width: 28px; height: 32px; }

  .wib-item { padding: 4px 8px; }
  .wib-val { font-size: 11px; }

  .war-tab { font-size: 11px; padding: 8px 4px; }

  /* 모바일 공격표: 컬럼 재배치 */
  .atk-table-header,
  .atk-row {
    grid-template-columns: 26px 34px 1fr 90px 90px 50px 38px;
    gap: 2px;
    padding: 5px 6px;
  }

  .atk-block { padding: 3px 4px; min-height: 38px; }
  .atk-dest { font-size: 11px; }
  .atk-stars { font-size: 11px; }
  .atk-target { font-size: 9px; }
  .atk-not-used { font-size: 10px; }
  .pname-text { font-size: 11px; }

  .def-won-pill { font-size: 10px; padding: 1px 5px; }
  .stars-num { font-size: 13px; }

  /* 방어 결과 모바일 */
  #panel-defense .atk-table-header,
  #panel-defense .atk-row {
    grid-template-columns: 26px 34px 1fr 60px 55px 50px;
  }

  /* 종합 */
  .summary-grid { grid-template-columns: 1fr; }

  /* CWL */
  .cwl-day-block .atk-table-header,
  .cwl-day-block .atk-row {
    grid-template-columns: 26px 34px 1fr 110px 50px 38px;
  }

  .cwl-season-card { grid-template-columns: 1fr auto; }
  .cwl-season-stars { display: none; }
  .cwl-card-arrow { display: none; }

  #panel-players .atk-table-header,
  #panel-players .atk-row {
    grid-template-columns: 34px 1fr 50px 60px 64px 50px;
  }
}