/* ============================================================
   components.css — 카드·진행바·배지·테이블·태그·버튼
   ============================================================ */

/* --- 카드 --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--sp-3); }
.card-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* --- 통계 타일 (홈 요약) --- */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 560px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4); text-align: center;
}
.stat-tile .value {
  font-size: var(--fs-2xl); font-weight: 800;
  background: var(--metal-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.stat-tile .label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }

/* --- 진행바 (판수) --- */
.progress {
  height: 10px; background: var(--surface-3); border-radius: 999px;
  overflow: hidden; margin: var(--sp-2) 0;
}
.progress .bar {
  height: 100%; border-radius: 999px;
  background: var(--metal-grad);
  transition: width .4s ease;
}
.progress.ok  .bar { background: linear-gradient(90deg, #2ea043, #3fb950); }
.progress.warn .bar { background: linear-gradient(90deg, #bb8009, #d29922); }
.progress.danger .bar { background: linear-gradient(90deg, #c93c34, #e5534b); }

/* --- 배지 --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.badge.role-회장    { color: var(--gold); border-color: #ffd47955; background: rgba(255,212,121,.1); }
.badge.role-클럽장  { color: var(--silver-bright); border-color: var(--silver-dim); background: rgba(199,204,209,.1); }
.badge.role-부클럽장 { color: var(--info-soft); border-color: #58a6ff55; background: rgba(88,166,255,.1); }
.badge.role-클럽원  { color: var(--text-muted); }
.badge.ok     { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.badge.warn   { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.badge.danger { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.badge.rest   { color: var(--info); border-color: var(--info); background: rgba(88,166,255,.1); }

/* --- 성향 태그 --- */
.tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 10px; border-radius: 999px; margin: 2px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--silver);
}

/* --- 승/무/패 표시 --- */
.wl { font-weight: 800; }
.wl.win  { color: var(--win); }
.wl.draw { color: var(--draw); }
.wl.lose { color: var(--lose); }
.wl-dot {
  display: inline-block; width: 20px; height: 20px; line-height: 20px;
  text-align: center; border-radius: 5px; font-size: 11px; font-weight: 800; margin: 1px;
}
.wl-dot.win  { background: var(--ok-bg);     color: var(--win); }
.wl-dot.draw { background: var(--surface-3); color: var(--draw); }
.wl-dot.lose { background: var(--danger-bg); color: var(--lose); }

/* --- 멤버 행 --- */
.member-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: none; }
.member-row .info { flex: 1; min-width: 0; }
.member-row .nick { font-weight: 700; }
.member-row .talk { font-size: var(--fs-xs); color: var(--text-muted); }
.member-row .meta { text-align: right; font-size: var(--fs-sm); color: var(--text-muted); }

/* --- 플레이스타일 (명단 행 안) --- */
.ps-note { font-size: var(--fs-xs); color: var(--text-dim); margin: 0 0 var(--sp-3); line-height: 1.6; }
.ps-note b { color: var(--text-muted); }
.ps-note summary { cursor: pointer; color: var(--silver); margin-top: 4px; }
.ps-note ul { margin: 6px 0; padding-left: 18px; }
.ps { margin-top: 4px; font-size: var(--fs-xs); }
.ps-name { color: var(--silver-bright); font-weight: 700; }
.ps-line { color: var(--text-muted); }
.ps-wait { color: var(--text-dim); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ps-chip {
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border);
  white-space: nowrap; font-size: 11px; cursor: help;
}
.ps-chip b { font-weight: 700; }
.ps-chip.key { border-width: 1.5px; font-weight: 700; }  /* 스타일 근거 지표 */
.ps-chip.up.key   { border-color: var(--win); }
.ps-chip.down.key { border-color: var(--lose); }
.ps-chip.up   { color: var(--win);  border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.08); }
.ps-chip.down { color: var(--lose); border-color: rgba(229,83,75,.4); background: rgba(229,83,75,.08); }

/* --- 테이블 --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
table.data th, table.data td {
  padding: var(--sp-2) var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data th { color: var(--text-muted); font-weight: 700; font-size: var(--fs-xs); }
table.data tr:hover td { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; }

/* --- 버튼 --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--silver); color: var(--bg); border-color: var(--silver); }
.btn.primary:hover { background: var(--silver-bright); }
.btn.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- 입력 --- */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-2); }
.input, select.input {
  width: 100%; font-size: var(--fs-base); color: var(--text);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-3);
}
.input:focus { outline: none; border-color: var(--silver-dim); }

/* --- 선택 칩(회원 선택 등) --- */
.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip {
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3);
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted);
}
.chip.active { background: var(--silver); color: var(--bg); border-color: var(--silver); }

/* --- 순위(명예의 전당) --- */
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: var(--fs-sm);
  background: var(--surface-3); color: var(--text-muted);
}
.rank.r1 { background: linear-gradient(135deg,#ffe08a,#d4a017); color:#3a2c00; }
.rank.r2 { background: linear-gradient(135deg, #e6e9ec 0%, #a9b0b8 45%, #6f767e 100%); color:#1a1c1f; }
.rank.r3 { background: linear-gradient(135deg,#e0a479,#a05a2c); color:#2a1400; }

/* --- 작은 버튼 (명단 행 [스쿼드] 등) --- */
.btn.sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); flex-shrink: 0; }

/* ============================================================
   스쿼드 모달 (js/squad.js) — 포메이션 필드 + 교체 명단
   ============================================================ */
body.sq-lock { overflow: hidden; }
.sq-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-4); overflow-y: auto;
}
.sq-modal {
  width: 100%; max-width: 520px; margin: auto 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
}
.sq-modal.wide { max-width: 980px; }
.sq-score { margin: 0 var(--sp-2); font-variant-numeric: tabular-nums; color: var(--silver-bright); }

/* 양팀 스쿼드 — 모바일은 위아래, 넓은 화면은 좌우 */
.sq-teams { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 760px) { .sq-teams { grid-template-columns: 1fr 1fr; } }
.sq-team { min-width: 0; }
.sq-team-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sq-team-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sq-title { font-size: var(--fs-lg); font-weight: 800; }
.sq-dim { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.sq-close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-base);
}
.sq-close:hover { background: var(--surface-3); }
.sq-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-dim); }

/* 필드 — 세로형 (위 = 공격, 아래 = 골키퍼) */
.sq-pitch {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(180deg, #1c4a2a 0 10%, #1a4327 10% 20%);
  border: 1px solid #2c5e3a;
}
.sq-line { position: absolute; border: 1px solid rgba(255,255,255,.18); }
.sq-line.half { left: 0; right: 0; top: 50%; border-width: 1px 0 0; }
.sq-line.circle { left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); }
.sq-line.box { left: 25%; right: 25%; height: 13%; }
.sq-line.box.top { top: 0; border-top: 0; }
.sq-line.box.bottom { bottom: 0; border-bottom: 0; }

.sq-player {
  position: absolute; transform: translate(-50%,-50%);
  width: 19%; display: flex; flex-direction: column; align-items: center;
  text-align: center; line-height: 1.15;
}
.sq-face {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); border: 1px solid rgba(255,255,255,.25);
}
.sq-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sq-face img.sq-noimg { display: none; }
.sq-meta { display: flex; align-items: center; gap: 2px; margin-top: -8px; }
.sq-season { height: 14px; width: auto; }
.sq-season-txt { font-size: 9px; color: var(--text-muted); background: var(--surface); padding: 0 3px; border-radius: 3px; }
.sq-grade {
  min-width: 16px; height: 14px; padding: 0 3px; border-radius: 3px;
  font-size: 10px; font-weight: 800; line-height: 14px;
  background: var(--surface-3); color: var(--text-muted);
}
.sq-grade.g-bronze { background: #7a4a2a; color: #f3d2b8; }
.sq-grade.g-silver { background: #8b929b; color: #111; }
.sq-grade.g-gold   { background: #d4a017; color: #2a1e00; }
.sq-grade.g-plat   { background: linear-gradient(135deg,#e6f7ff,#8fd3f4 55%,#5ab4e0); color: #0b2233; }
.sq-player .sq-name {
  margin-top: 2px; max-width: 100%; font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-pos { font-size: 9px; color: rgba(255,255,255,.7); }

/* 교체 명단 — 가로 스크롤 없이 줄바꿈 그리드 */
.sq-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-3); }
.sq-sub { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sq-sub .sq-name { margin-top: 2px; font-size: 11px; color: var(--text); line-height: 1.2; word-break: keep-all; }

@media (max-width: 380px) {
  .sq-face { width: 36px; height: 36px; }
  .sq-player .sq-name { font-size: 10px; }
}

/* --- 토너먼트 (tournament.html) --- */
.tn-tools { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tn-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-pick {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer;
}
.tn-pick.on { background: var(--silver); color: var(--bg); border-color: var(--silver); font-weight: 700; }
.tn-guest { font-size: 10px; opacity: .8; }
.tn-summary { margin: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.tn-summary b { color: var(--silver-bright); }
.tn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.tn-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }

/* 대진표: 라운드별 칼럼, 모든 칼럼이 1라운드 높이에 맞춰 늘어나고 경기는 균등 배치 → 다음 라운드가 두 경기 사이에 위치 */
.tn-bracket {
  display: flex; gap: var(--sp-4); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-3);
}
.tn-col { display: flex; flex-direction: column; min-width: 150px; flex: 1 0 150px; }
.tn-round { text-align: center; font-size: var(--fs-xs); color: var(--silver); font-weight: 700; margin-bottom: var(--sp-2); }
.tn-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--sp-2); }
.tn-match {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  overflow: hidden;
}
.tn-match.reveal { animation: tn-pop .4s ease both; }
@keyframes tn-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.tn-slot {
  display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: var(--fs-sm);
  background: none; border: none; color: var(--text); min-height: 36px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-slot + .tn-slot { border-top: 1px solid var(--border); }
button.tn-slot { cursor: pointer; }
button.tn-slot:hover { background: var(--surface-3); }
.tn-slot.win { background: rgba(63,185,80,.14); color: var(--win); font-weight: 700; }
.tn-slot.lose { color: var(--text-dim); text-decoration: line-through; }
.tn-slot.bye, .tn-slot.tbd { color: var(--text-dim); font-style: italic; }

.tn-champ { text-align: center; margin-bottom: var(--sp-4); border-color: #d4a01766; }
.tn-trophy { font-size: 56px; animation: tn-bounce 1.2s ease infinite; }
@keyframes tn-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.tn-champ-name { font-size: 26px; font-weight: 800; color: var(--gold); margin: var(--sp-2) 0; }
.tn-runner { margin: var(--sp-2) 0 var(--sp-3); color: var(--silver); }

/* ---------- 경기 상세 인사이트 (v1.9.0) — 전적 페이지 카드 3종 + 명예의 전당 선수 칩 ---------- */
.in-note { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 400; }
.in-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: var(--sp-4); }
.in-grid .card + .card { margin-top: 0; }
.in-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  font-weight: 800; margin-bottom: var(--sp-3); }
.in-dim { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 400; }
.in-filter { gap: 4px; }
.in-filter .chip { padding: 2px 10px; font-size: var(--fs-xs); min-height: 0; }

/* 선수 칩 (얼굴·시즌·이름) */
.sq-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sq-chip .sq-face { width: 34px; height: 34px; flex: none; }
.sq-chip-name { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ① 에이스 */
.in-ace { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.in-ace:last-child { border-bottom: none; }
.in-ace { align-items: flex-start; }
.in-ace .rank { margin-top: 2px; }
.in-ace-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.in-ace-title { font-weight: 800; color: var(--gold); }
.in-ace-title.plain { font-weight: 600; color: var(--text-dim); font-size: var(--fs-xs); }
.in-ace-player { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.in-ace-stat { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.in-ace-stat b { color: var(--text); }
.in-ace-stat b.in-up { color: var(--win); }

/* ② 골 시간대 */
.in-legend { font-size: var(--fs-xs); color: var(--text-muted); }
.in-legend .win { color: var(--win); } .in-legend .lose { color: var(--lose); }
.in-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: var(--sp-2); }
.in-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.in-num { font-size: 10px; height: 13px; color: var(--win); font-variant-numeric: tabular-nums; }
.in-num.lose { color: var(--lose); }
.in-bar-up, .in-bar-down { width: 70%; height: 48px; display: flex; }
.in-bar-up { align-items: flex-end; border-bottom: 1px solid var(--silver-dim); }
.in-bar-down { align-items: flex-start; }
.in-bar-up i, .in-bar-down i { display: block; width: 100%; border-radius: 2px; }
.in-bar-up i { background: var(--win); }
.in-bar-down i { background: var(--lose); opacity: .8; }
.in-lbl { font-size: 9px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.in-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.in-badge { background: var(--surface-3); border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-sm); }

/* ③ 슈팅맵 */
.shotmap { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.sm-pitch { fill: #1d3a26; stroke: #cfd8d2; stroke-width: .3; }
.sm-line { fill: none; stroke: #cfd8d2; stroke-width: .3; }
.sm-goalpost { fill: #cfd8d2; }
.sm-dot { fill: #cfd8d2; }
.sm-goal { fill: #ffd479; stroke: #1d3a26; stroke-width: .25; }
.sm-on { fill: none; stroke: #8fd0ff; stroke-width: .35; }
.sm-off { stroke: #ff8a80; stroke-width: .35; opacity: .75; }
.sm-k.goal { color: var(--gold); } .sm-k.on { color: var(--info-soft); } .sm-k.off { color: var(--danger); }

/* 명단 컨트롤러 아이콘 */
.ctrl-ico { font-size: 13px; opacity: .85; cursor: help; }

/* ---------- 폼·연승 (v1.12.0) ---------- */
.form-dots { display: inline-flex; gap: 2px; font-style: normal; font-size: 11px; letter-spacing: 0; vertical-align: middle; }
.form-dots i { font-style: normal; }
.form-dots i.win { color: var(--win); }
.form-dots i.lose { color: var(--lose); }
.form-dots i.draw { color: var(--draw); }
.form-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }
.streak-badge { font-size: var(--fs-xs); font-weight: 800; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.streak-badge.hot { background: rgba(255,120,60,.16); color: var(--hot); }
.streak-badge.cold { background: rgba(120,180,255,.14); color: var(--info-soft); }

/* ---------- 클럽 내전 라이벌 (v1.13.0) ---------- */
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.rv-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-3); min-width: 0; }
.rv-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.rv-nick { font-size: var(--fs-lg); font-weight: 800; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-rec { font-size: var(--fs-xs); }
.rv-freq-title { font-weight: 700; font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-1); }
.rv-row { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); padding: 4px 0; border-bottom: 1px solid var(--border); }
.rv-row:last-child { border-bottom: none; }

/* ---------- v2.0.0 클럽원 탭 (검색 우선) ---------- */
.ms-search { font-size: var(--fs-base); padding: 12px 14px; margin-bottom: var(--sp-3); }
a.ms-row { color: inherit; text-decoration: none; }
a.ms-row:hover { background: var(--surface-2); }
.ms-go { color: var(--text-dim); font-size: 22px; padding-left: var(--sp-2); }
.ms-style { font-size: var(--fs-xs); color: var(--silver); white-space: nowrap; }
.ms-roster { margin-top: var(--sp-5); }
.ms-roster > summary { cursor: pointer; font-weight: 800; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); list-style: none; }
.ms-roster > summary::-webkit-details-marker { display: none; }
.ms-roster > summary::after { content: " ▾"; color: var(--text-dim); }
.ms-roster[open] > summary::after { content: " ▴"; }

/* ---------- v2.0.0 개인 프로필 ---------- */
.pf-back { display: inline-block; color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.pf-head { margin-bottom: var(--sp-3); }
.pf-name { font-size: var(--fs-2xl); font-weight: 800; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pf-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.pf-form { margin-top: var(--sp-2); }
.pf-rec { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.pf-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.pf-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; background: var(--bg); padding: var(--sp-2) 0; margin-bottom: var(--sp-3); scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { flex: 1 0 auto; text-align: center; padding: 8px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
.pf-tab.active { background: var(--silver); color: var(--bg); border-color: var(--silver); }
.rv-box a.rv-nick, .rv-row a { color: inherit; }

/* ---------- v2.0.0 공유 이미지 (화면 밖에서 렌더 → PNG) ---------- */
.sh-stage { position: fixed; left: -10000px; top: 0; pointer-events: none; }
.sh-card { background: var(--bg); color: var(--text); padding: 24px; font-family: var(--font); border: 1px solid var(--border); }
.sh-top { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; font-weight: 700; }
.sh-logo { width: 28px; height: 28px; }
.sh-nick { font-size: 28px; font-weight: 800; margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-sub { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.sh-stats { display: flex; gap: 10px; margin: 14px 0 8px; }
.sh-stats > div { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.sh-stats b { font-size: 22px; font-weight: 800; }
.sh-stats span { display: block; font-size: 12px; color: var(--text-dim); }
.sh-dim { color: var(--text-dim); font-size: 12px; font-weight: 400; }
/* 📸 탭 캡처 (v2.3.0) */
.sh-bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }
.sh-tab { padding: 20px 16px; }
.sh-tabhead { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.sh-tabhead-b { flex: 1; min-width: 0; }
.sh-tabnick { font-size: 20px; font-weight: 800; }
.sh-tabname { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--silver); color: var(--bg); }
.sh-tabbody .card { box-shadow: none; }
.sh-foot { margin-top: 16px; color: var(--text-dim); font-size: 11px; text-align: right; }
.sh-drow { display: grid; grid-template-columns: 22px 1fr 110px 56px 64px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sh-drow.rest { opacity: .55; }
.sh-drank { color: var(--text-dim); font-size: 11px; text-align: right; }
.sh-dnick { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-dbar { margin: 0; }
.sh-dbar .bar { display: block; height: 100%; }   /* span이라 인라인이면 width가 무시됨 */
.sh-dnum { text-align: right; font-variant-numeric: tabular-nums; }
.sh-dtag .badge { font-size: 10px; }
.sh-dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.sh-preview { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; margin: var(--sp-3) 0; background: var(--surface-2); }
.sh-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/* ---------- v2.1.0 패치노트 · 저작권 ---------- */
.pn-btn { margin-top: var(--sp-6); }
.copyright { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.6; }
.copyright-title { font-weight: 800; color: var(--text-muted); margin-bottom: var(--sp-2); }
.copyright p { margin: 0 0 var(--sp-2); }
.copyright p:last-child { margin-bottom: 0; }
.copyright b { color: var(--text-muted); }
.app-footer a { text-decoration: underline; }
.pn-day { margin-bottom: var(--sp-5); }
.pn-date { font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.pn-title { font-weight: 800; margin-bottom: var(--sp-3); color: var(--silver-bright); }
.pn-list { list-style: none; margin: 0; padding: 0; }
.pn-list li { display: flex; gap: var(--sp-2); align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.5; }
.pn-list li:last-child { border-bottom: none; }
.pn-tag { flex: none; font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; margin-top: 1px; }
.pn-tag.new { background: rgba(63,185,80,.14); color: var(--win); }
.pn-tag.improve { background: rgba(143,195,255,.14); color: var(--info-soft); }
.pn-tag.fix { background: rgba(255,154,92,.14); color: var(--hot); }

/* ---------- 구단운영 (v2.2.0, manage.html) ---------- */
.mg-cnt { font-size: 11px; font-weight: 600; opacity: .7; }
.mg-progress { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.mg-range { margin-bottom: var(--sp-3); }
.mg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.mg-stats div { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-2); text-align: center; }
.mg-stats span { display: block; font-size: 11px; color: var(--text-muted); }
.mg-stats b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .mg-stats { grid-template-columns: repeat(2, 1fr); } }
.mg-forms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.in-up { color: var(--win); }
.in-down { color: var(--lose); }
.mg-row { border-bottom: 1px solid var(--border); padding: var(--sp-2) 0; cursor: pointer; }
.mg-row:last-of-type { border-bottom: none; }
.mg-row.dim .mg-row-main { opacity: .6; }
.mg-row-main { display: flex; align-items: flex-start; gap: var(--sp-2); }
.mg-row-main .sq-face { width: 40px; height: 40px; flex: none; }
.mg-row-info { flex: 1; min-width: 0; }
.mg-row-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mg-ref { font-weight: 400; opacity: .75; }
.mg-verdict { flex: none; white-space: nowrap; }
/* v2.7.0 도륙 지수 */
.mg-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mg-index { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.mg-index b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.mg-index i { font-style: normal; font-size: 10px; color: var(--text-dim); }
.mg-index.up b { color: var(--win); }
.mg-index.down b { color: var(--lose); }
.mg-role { color: var(--silver); }
.mg-cats { display: flex; flex-direction: column; gap: 5px; }
.mg-cat { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.mg-cat-l { font-weight: 700; white-space: nowrap; }
.mg-cat-t { position: relative; height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.mg-cat-t i { display: block; height: 100%; border-radius: 5px; background: var(--silver-dim); }
.mg-cat-t i.up { background: var(--win); }
.mg-cat-t i.down { background: var(--lose); }
.mg-cat-t em { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .55; }
.mg-cat b { text-align: right; font-variant-numeric: tabular-nums; }
.mg-more-metrics summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); }
.badge.dim { color: var(--text-dim); }
.mg-detail { margin: var(--sp-3) 0 var(--sp-1); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--radius-sm); cursor: default; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-2); }
.mg-line { font-weight: 700; }
.mg-line.warn { color: var(--warn); }
.mg-line.danger { color: var(--danger); }
/* v2.9.0 도륙 지수 배점제 — 계산 근거 한 줄 · 카드 대비 안내 */
.mg-calc { font-size: var(--fs-sm); }
.mg-calc b { font-variant-numeric: tabular-nums; }
.mg-card { color: var(--warn); font-size: 10px; white-space: nowrap; }
.mg-cat b .in-dim { font-weight: 400; }
.mg-over { font-style: normal; color: var(--win); font-size: 10px; margin-left: 2px; }
.mg-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.mg-metric-h { font-weight: 700; font-size: var(--fs-xs); margin-bottom: 2px; }
.mg-bar { display: grid; grid-template-columns: 64px 1fr 38px; align-items: center; gap: 6px; font-size: 11px; }
.mg-bar-l { color: var(--text-muted); }
.mg-bar-t { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.mg-bar-t i { display: block; height: 100%; border-radius: 4px; }
.mg-bar-t i.me.up { background: var(--win); }
.mg-bar-t i.me.down { background: var(--lose); }
.mg-bar-t i.card { background: var(--info-soft); }
.mg-bar-t i.pos { background: var(--silver-dim); }
.mg-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.mg-extra { display: flex; flex-direction: column; gap: 4px; }
.mg-spark svg { width: 100%; height: 40px; display: block; }
.mg-spark polyline { fill: none; stroke: var(--silver); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mg-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: var(--sp-2) 0; padding: 4px; border: 1px solid rgba(255,255,255,.18); border-bottom-width: 3px; border-radius: var(--radius-sm); background: #14301f; }
.mg-lane { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) 4px; border-radius: 6px; background: rgba(229,83,75,var(--a)); text-align: center; }
.mg-lane b { font-size: var(--fs-xl); }
.mg-lane span { font-size: 11px; color: var(--text-muted); }
.mg-lane em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; }
.mg-lane.hot { outline: 2px solid var(--danger); }
.mg-notes { margin: 0; padding-left: 18px; font-size: var(--fs-sm); }
.mg-foot { margin-top: var(--sp-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.mg-pending { margin-top: var(--sp-2); border-top: 1px dashed var(--border); padding-top: var(--sp-2); }
.mg-pending > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); padding: var(--sp-2) 0; }
/* 구단운영 부품 (v2.4.0 — 프로필·검색 탭 안) */
.mg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* 모드별 현재·최고 등급 (v2.8.0) */
.mg-divs { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.mg-divline { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.mg-divlabel { display: inline-block; min-width: 2.4em; font-weight: 700; color: var(--text); }
.mg-divico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.mg-modes { margin-bottom: var(--sp-3); }
.mg-modes .chip { font-weight: 700; }
/* 레어 3조합 스타일 (v2.5.0) */
.ps-rare { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: #2a1e00; background: linear-gradient(135deg, #ffe08a, #d4a017); vertical-align: 1px; }
/* 클럽 가입 문의 배너 (v2.5.2, 일반 정보 검색 결과 맨 위) */
.recruit { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-3); border-radius: var(--radius); border: 1px solid #d4a01766; background: linear-gradient(135deg, rgba(212,160,23,.14), rgba(212,160,23,.04)); color: var(--text); text-decoration: none; }
.recruit:hover { border-color: #d4a017; }
.recruit-logo { width: 36px; height: 36px; flex: none; }
.recruit-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.recruit-b span { font-size: var(--fs-xs); color: var(--text-muted); }
.recruit-go { flex: none; font-size: var(--fs-xs); font-weight: 800; padding: 6px 10px; border-radius: 999px; background: #d4a017; color: #2a1e00; white-space: nowrap; }
/* 구단운영 분석 판수 직접 입력 (v2.5.3) */
.mg-custom { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 999px; }
.mg-custom.active { border-color: var(--silver); color: var(--text); }
.mg-custom .input { width: 58px; padding: 4px 6px; text-align: center; font-size: var(--fs-sm); }
.mg-custom .btn.sm { padding: 4px 10px; }

/* 📈 등급 기록 그래프 (v2.8.0, js/manage.js rankHistHtml) — 단일 선, 격자·축은 흐리게 */
.rh-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rh-mode { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); min-width: 0; }
.rh-head { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.rh-head b { color: var(--text); margin-right: 4px; }
.rh-chart { position: relative; }
.rh-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.rh-line { fill: none; stroke: var(--silver); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rh-last { fill: var(--silver); stroke: var(--surface-2); stroke-width: 2; }
.rh-hover { fill: var(--text); stroke: var(--surface-2); stroke-width: 2; }
.rh-grid { stroke: var(--border); stroke-width: 1; }
.rh-cross { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 2; }
.rh-ax { fill: var(--text-dim); font-size: 10px; }
.rh-tip { position: absolute; top: 0; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 12px; line-height: 1.4; color: var(--text); pointer-events: none; white-space: nowrap; }
.rh-dim { color: var(--text-dim); font-size: 11px; }
.rh-empty { font-size: 12px; color: var(--text-dim); padding: var(--sp-2) 0; }
.rh-best { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.rh-table summary { font-size: 11px; color: var(--text-dim); cursor: pointer; margin-top: 2px; }
.rh-table table { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 4px; }
.rh-table th, .rh-table td { text-align: right; padding: 2px 4px; border-bottom: 1px solid var(--border); }
.rh-table th:first-child, .rh-table td:first-child { text-align: left; }

/* --- 📢 FC온라인 소식 (v2.10.0, 홈) --- */
.nw-tabs { margin-bottom: var(--sp-3); }
.nw-list { padding: var(--sp-1) var(--sp-4); }
.nw-item { border-bottom: 1px solid var(--border); }
.nw-item:last-of-type { border-bottom: none; }
.nw-item summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 12px 0; cursor: pointer; list-style: none; min-height: 44px;
}
.nw-item summary::-webkit-details-marker { display: none; }
.nw-cat {
  flex: none; font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--silver);
}
.nw-cat.c-점검 { background: var(--warn-bg); color: var(--warn); }
.nw-cat.c-이벤트 { background: var(--ok-bg); color: var(--ok); }
.nw-cat.c-노트 { background: rgba(88,166,255,.12); color: var(--info); }
.nw-title {
  flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nw-item[open] .nw-title { white-space: normal; }
.nw-new {
  display: inline-block; font-size: 10px; font-weight: 800; line-height: 1; padding: 2px 4px;
  border-radius: 4px; background: var(--danger); color: #fff; vertical-align: 2px;
}
.nw-date { flex: none; font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; }
.nw-body { padding: 0 0 var(--sp-3); }
.nw-preview {
  margin: 0 0 var(--sp-2); padding: var(--sp-3); border-radius: 8px; background: var(--surface-2);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); white-space: pre-line; word-break: break-all;
}
.nw-link { font-size: var(--fs-sm); color: var(--info); font-weight: 600; }
.nw-more {
  display: block; width: 100%; padding: 10px 0; border: none; border-top: 1px solid var(--border);
  background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
/* 전문 (v2.10.1) — 넥슨 편집기 HTML을 정리한 본문 */
.nw-src { font-size: var(--fs-xs); color: var(--text-dim); margin-bottom: var(--sp-2); }
.nw-src a { color: var(--text-muted); text-decoration: underline; }
.nw-article {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text); word-break: break-all; overflow-wrap: anywhere;
  padding: var(--sp-3); border-radius: 8px; background: var(--surface-2);
}
.nw-article .nw-preview { padding: 0; background: none; }
.nw-article p { margin: 0 0 4px; }
.nw-article ul, .nw-article ol { margin: 4px 0; padding-left: 20px; }
.nw-article h4 { font-size: var(--fs-base); margin: var(--sp-3) 0 var(--sp-1); }
.nw-article img { max-width: 100%; height: auto; display: block; margin: var(--sp-2) auto; border-radius: 6px; }
.nw-article a { color: var(--info); text-decoration: underline; }
.nw-article .hl { color: var(--warn); }
.nw-article hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-3) 0; }
.nw-article blockquote { margin: var(--sp-2) 0; padding-left: var(--sp-3); border-left: 3px solid var(--border); color: var(--text-muted); }
.nw-tbl { overflow-x: auto; margin: var(--sp-2) 0; -webkit-overflow-scrolling: touch; }
.nw-tbl table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: var(--fs-xs); }  /* 좁은 화면에서 칸을 짓누르지 않고 가로 스크롤 */
.nw-tbl td, .nw-tbl th { border: 1px solid var(--border); padding: 4px 6px; vertical-align: top; word-break: keep-all; overflow-wrap: normal; min-width: 4em; max-width: 16em; }
.nw-tbl th, .nw-tbl thead td { background: var(--surface-3); }
.nw-loading { color: var(--text-dim); font-size: var(--fs-xs); margin-top: var(--sp-2); }
.nw-foot { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.5; }
.nw-foot p { margin: 0 0 var(--sp-2); }
.nw-foot-btns { display: flex; justify-content: space-between; align-items: center; }
.nw-close { border: 1px solid var(--border); background: var(--surface-3); color: var(--text-muted); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.nw-credit { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--sp-2); }

/* 🧭 내 플레이 가이드 (v2.18.0) */
.gd-sum { font-weight: 600; line-height: 1.55; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: 10px; margin-bottom: var(--sp-3); }
.gd-sec { margin-top: var(--sp-3); }
.gd-sec-title { font-weight: 800; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.gd-item { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 3px solid var(--border); margin-bottom: var(--sp-2); }
.gd-item.good { border-left-color: var(--ok); }
.gd-item.bad { border-left-color: var(--danger); }
.gd-item.key { border-left-color: var(--warn); }
.gd-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gd-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.gd-tag { font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); }
.gd-split { font-size: var(--fs-xs); margin-top: 2px; font-variant-numeric: tabular-nums; }
.gd-w { color: var(--ok); }
.gd-l { color: var(--danger); }
.gd-text { font-size: var(--fs-sm); line-height: 1.55; color: var(--text); margin-top: 4px; }
.gd-empty { padding: 2px 0; }