/* 내전 팀 분배 — FaCer World
 *
 * 디자인 기준: op.gg 처럼 차분한 남색 배경 + 박스 대비 + 파란 강조색.
 *   --accent : 선택·강조·주요 버튼 (파랑)
 *   --red    : 경고·마감 임박·삭제·오류에만
 */

:root {
  --bg: #1c1c1f;        /* 페이지 바탕 */
  --bg-2: #25252b;      /* 입력칸 · 박스 안쪽 */
  --panel: #2e2e37;     /* 박스 */
  --panel-2: #383845;   /* 박스 위에 뜬 것 · 마우스 올림 */
  --line: #3a3a47;
  --line-2: #4a4a5a;

  --text: #ffffff;
  --text-2: #c9c9d6;
  --text-3: #a9a9ba;      /* 가장 옅은 글자 — 박스 위에서도 명암비 4.5:1 이상 (WCAG AA) */

  --accent: #5383e8;
  --accent-2: #8fb0f5;  /* 강조 글자 (어두운 바탕 위) */
  --accent-fill: #3f6fde;    /* 흰 글자가 올라가는 강조 바탕 (명암비 4.5:1 이상) */
  --accent-fill-2: #3562cc;  /* 그 위에 마우스 올림 */
  --accent-soft: rgba(83, 131, 232, .16);

  --red: #e84057;
  --red-text: #ff7a8a;  /* 빨간 글자 (어두운 바탕 위) */
  --red-dim: #c9323f;
  --teal: #00bba3;
  --amber: #f5a524;
  --violet: #8b7cf6;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .4);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif;
  --mono: "Pretendard Variable", Pretendard, ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/*
 * hidden 속성은 브라우저 기본 display:none으로 동작하는데,
 * .btn{display:inline-flex} .lot{display:flex} 처럼 작성자 규칙이 있으면 그쪽이 이깁니다.
 * 자바스크립트에서 el.hidden = true 로 숨기는 곳이 많아 전역으로 못박아 둡니다.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.55 var(--font);
  font-feature-settings: "tnum" 1;   /* 숫자 폭을 같게 (점수·포인트 정렬) */
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 22px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
p { margin: 0; }

button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ---------------- 상단바 ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 60px;
  padding: 0 20px;
  background: rgba(28, 28, 31, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand a { color: inherit; text-decoration: none; }
.brand a.brand-text:hover { color: var(--text); }
.brand-logo { display: block; height: 36px; width: auto; }
.brand-text {
  padding-left: 10px;
  border-left: 1px solid var(--line-2);
  font-weight: 700; font-size: 13px; letter-spacing: -.02em;
  color: var(--text-2);
  white-space: nowrap;
}

.tabs {
  display: flex; gap: 4px; align-self: stretch;
  /* 메뉴가 많아 폭이 모자라면 오른쪽 버튼을 밀어내지 않고 메뉴 줄만 가로로 넘깁니다 */
  flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.topbar-right { flex-shrink: 0; }
@media (max-width: 1200px) {
  .topbar { gap: 14px; }
  .tab { padding: 0 9px; }
}
.tab {
  position: relative;
  white-space: nowrap;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--text-3);
  font-weight: 600;
  font-size: 14px;
  transition: color .12s;
}
.tab::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: transparent;
}
.tab:hover { color: var(--text-2); }
/* 부가 메뉴 (조준점 · 스킨 · 갤러리): 팀 나누기 메뉴와 구분선으로 떼고, 작은 버튼 모양으로 */
.tab-sep { flex: none; align-self: center; width: 1px; height: 18px; margin: 0 10px 0 8px; background: var(--line-2); }
.tab.tab-extra { align-self: center; height: 28px; padding: 0 11px; margin-right: 2px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.tab.tab-extra::after { display: none; }
.tab.tab-extra:hover { border-color: var(--line-2); }
.tab.tab-extra.is-active { border-color: var(--accent); background: var(--accent-soft); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { background: var(--accent); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.conn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.conn[data-state="local"]      .conn-dot { background: var(--text-3); }
.conn[data-state="connecting"] .conn-dot { background: var(--amber); animation: pulse 1s infinite; }
.conn[data-state="connected"]  .conn-dot { background: var(--teal); box-shadow: 0 0 8px rgba(24, 194, 156, .7); }
.conn[data-state="error"]      .conn-dot { background: var(--red); }
.conn[data-state="closed"]     .conn-dot { background: var(--text-3); }

@keyframes pulse { 50% { opacity: .3; } }

/* ---------------- 레이아웃 ---------------- */

.main { max-width: 1280px; margin: 0 auto; padding: 28px 20px 80px; }

/* ---------------- 게임 선택 · 드롭다운 ---------------- */

.game-switch { flex-shrink: 0; }

.dd { position: relative; display: inline-block; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 12px 0 7px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-weight: 700; font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.dd-btn:hover { background: var(--panel-2); border-color: #41505f; }
.dd.is-open .dd-btn { border-color: var(--accent); background: var(--panel-2); }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 입력칸 모양 (방 목록의 게임별 보기) */
.dd-field .dd-btn { height: 40px; border-radius: var(--radius-sm); border-color: var(--line); padding: 0 12px 0 9px; font-weight: 600; }

.dd-logo { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; display: block; }
.dd-grid { color: var(--text-3); padding: 3px; }
.dd-chev { margin-left: 2px; color: var(--text-3); transition: transform .15s; flex-shrink: 0; }
.dd.is-open .dd-chev { transform: rotate(180deg); color: var(--text-2); }

.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 100%; width: max-content;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  animation: dd-in .12s ease-out;
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }

.dd-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  background: none; border: 0;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-2);
  text-align: left;
  white-space: nowrap;
}
.dd-opt + .dd-opt { margin-top: 2px; }
.dd-opt .dd-logo { width: 26px; height: 26px; }
.dd-opt:hover, .dd-opt:focus-visible { background: var(--panel-2); color: var(--text); outline: none; }
.dd-opt.is-selected { color: var(--text); background: var(--accent-soft); }
.dd-check { margin-left: auto; padding-left: 14px; color: var(--accent-2); visibility: hidden; flex-shrink: 0; box-sizing: content-box; }
.dd-opt.is-selected .dd-check { visibility: visible; }

.game-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 4px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--gc); color: oklch(from var(--gc) max(l, .87) c h);
  background: color-mix(in srgb, var(--gc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent);
  white-space: nowrap;
}
.room-game-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.game-badge-logo { width: 14px; height: 14px; object-fit: contain; display: block; }

.lobby-game { flex: 0 0 auto; }

/* 캐릭터가 없는 게임(배틀그라운드)은 MOST 칸을 숨깁니다 */
.no-picks .col-most,
.no-picks .cell-most { display: none; }

/* 탭이 4개라 중간 폭에서는 로고 옆 글자를 숨겨 상단바가 넘치지 않게 합니다 */
@media (max-width: 1000px) {
  .brand-text { display: none; }
}

/* ---------------- 좌우 광고 자리 (300×1050) ----------------
 * 광고 두 칸(300px)과 본문이 함께 들어갈 만큼 넓을 때만 3단으로 펼칩니다.
 * 1760px = 광고 300×2 + 간격 24×2 + 바깥 여백 16×2 + 본문 최소 약 1080.
 * 이 숫자는 js/ads.js 의 RAIL_QUERY 와 같아야 합니다.
 */
:root { --ad-w: 300px; --ad-h: 1050px; }

.ad-rail { display: none; }

@media (min-width: 1760px) {
  .page.ads-on {
    display: grid;
    grid-template-columns: var(--ad-w) minmax(0, 1fr) var(--ad-w);
    gap: 24px;
    align-items: start;
    max-width: calc(1280px + var(--ad-w) * 2 + 48px + 32px);
    margin: 0 auto;
    padding: 0 16px;
  }
  .page.ads-on .main { grid-column: 2; grid-row: 1; min-width: 0; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .page.ads-on .ad-rail-left { grid-column: 1; grid-row: 1; }
  .page.ads-on .ad-rail-right { grid-column: 3; grid-row: 1; }
  .page.ads-on .ad-rail { display: block; padding: 22px 0 80px; }
}

.ad-slot {
  width: var(--ad-w);
}
.ad-slot.is-placeholder {
  height: var(--ad-h);
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 255, 255, .015) 14px 28px),
    var(--bg-2);
}
.ad-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-3); font-size: 12px;
}
.ad-placeholder strong { font-size: 13px; color: var(--text-2); }
.ad-placeholder span { font-family: var(--mono); }
.view { display: none; }
.view.is-active { display: block; }

.view-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.view-head-actions { display: flex; gap: 8px; }
.sub { margin-top: 6px; color: var(--text-3); font-size: 13px; max-width: 64ch; line-height: 1.6; }
.sub .line, .perk .line { display: block; white-space: pre-line; }

/* 제목 아래 "회원이면 좋은 점" (로그아웃 상태에서만) */
.perk {
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}
.perk[hidden] { display: none; }
.perk-label { display: block; color: var(--text); font-weight: 700; }
.perk-text { flex: 1 1 260px; min-width: 0; }
.perk-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sub-title { margin: 20px 0 10px; color: var(--text-2); font-size: 13px; font-weight: 700; }
.note { margin-top: 8px; color: var(--text-3); font-size: 13px; line-height: 1.6; }

/* 박스: 테두리 대신 바탕색 대비로 구분 (op.gg 방식) */
.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
}
.card-title {
  margin: -4px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

/* ---------------- 버튼 ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: #444453; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { min-height: 46px; padding: 0 28px; font-size: 15px; font-weight: 700; }

.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
/* 빨간 버튼은 흐리게만 하면 여전히 눌러도 될 것처럼 보여서, 꺼진 상태는 회색으로 바꿉니다. */
.btn-primary:disabled { background: var(--panel-2); border-color: var(--line-2); color: var(--text-3); opacity: .8; }
.btn-primary:hover:not(:disabled) { background: var(--accent-fill-2); border-color: var(--accent-fill-2); }

.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--text-3); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }

.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--red-text); }
.btn-danger-ghost:hover:not(:disabled) { background: rgba(255, 70, 85, .12); border-color: rgba(255, 70, 85, .3); }

.link {
  background: none; border: 0; padding: 0;
  color: var(--accent-2); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------- 입력 ---------------- */

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-grow { flex: 1 1 200px; }
.field-narrow { max-width: 84px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field-label em { font-style: normal; font-weight: 400; color: var(--text-3); }

input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color .12s, background .12s;
}

/* 비밀번호 ● 가 작아 몇 자리인지 세기 어려워서 글자 간격을 넓혀 또렷하게 보이게 합니다 */
input[type="password"]:not(:placeholder-shown) {
  letter-spacing: .18em;
  font-weight: 700;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
select { cursor: pointer; }
textarea { resize: vertical; min-height: 140px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }

.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

input[type="range"] { accent-color: var(--accent); cursor: pointer; padding: 0; background: none; border: 0; }
.range-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }

/* ---------------- 명단 추가 폼 ---------------- */

.add-form { margin-bottom: 16px; }
.add-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.name-pick { display: flex; gap: 8px; }
.name-pick input { flex: 1 1 auto; min-width: 0; }
.name-pick .btn { flex: 0 0 auto; white-space: nowrap; }

.site-footer {
  margin-top: 48px; padding: 20px 0 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.7; color: var(--text-3);
}
.add-row + .add-row { margin-top: 12px; }

.role-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.role-opt {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 0 13px 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3);
  transition: all .12s;
}
.role-opt:hover { border-color: var(--line-2); color: var(--text-2); }
.role-opt.is-on {
  color: #fff;
  background: color-mix(in srgb, var(--rc) 22%, transparent);
  border-color: var(--rc);
}
.role-opt .role-icon { color: var(--text-3); transition: color .12s; }
.role-opt.is-on .role-icon { color: var(--rc); color: oklch(from var(--rc) max(l, .87) c h); }

/* ---------------- 명단 툴바 · 표 ---------------- */

.roster-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.roster-search { flex: 0 1 240px; }
.roster-filters { display: flex; gap: 4px; }
.roster-bulk { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.chip {
  min-height: 34px;
  padding: 0 14px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--text-3);
}
.chip:hover { color: var(--text-2); background: var(--panel-2); }
.chip.is-active { color: #fff; background: var(--accent-soft); border-color: var(--accent); }

.count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.table-wrap {
  background: var(--panel);
  border-radius: var(--radius);
  overflow-x: auto;
}
table.roster { width: 100%; border-collapse: collapse; }
.roster th {
  padding: 11px 14px;
  background: #27272e;
  text-align: left;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.roster th.sortable { cursor: pointer; user-select: none; }
.roster th.sortable:hover { color: var(--text-2); }
.roster th.sortable::after { content: ""; }
.roster th[data-dir="asc"]::after  { content: " ↑"; color: var(--accent-2); }
.roster th[data-dir="desc"]::after { content: " ↓"; color: var(--accent-2); }

.roster td { padding: 10px 14px; border-top: 1px solid var(--bg); vertical-align: middle; }
.roster tbody tr:hover { background: #34343e; }
.roster tr.is-out { opacity: .42; }

.col-in { width: 54px; text-align: center; }
.col-in + td, td.col-in { text-align: center; }
.col-tier { width: 130px; }
.col-roles { width: 292px; }
.col-score { width: 68px; }
.col-act { width: 44px; }
.col-memo { width: 200px; }

.roster td.col-in { text-align: center; }
.roster input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

.cell-name input {
  background: transparent; border-color: transparent;
  padding: 5px 7px; font-weight: 700; font-size: 14px;
}
.cell-name input:hover { border-color: var(--line); }
.cell-name input:focus { border-color: var(--accent); background: var(--bg); }

.cell-memo input { background: transparent; border-color: transparent; padding: 5px 7px; font-size: 12.5px; color: var(--text-2); }
.cell-memo input:hover { border-color: var(--line); }

.cell-tier select { padding: 5px 7px; font-size: 13px; }
.cell-score { font-size: 14px; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* 점수 칸: 평소엔 숫자처럼 보이다가, 마우스를 올리면 고칠 수 있는 칸이라는 게 드러납니다 */
.score-wrap { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.score-input {
  width: 54px !important;
  padding: 4px 6px !important;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: transparent !important;
  border-color: transparent !important;
}
.score-input:hover { border-color: var(--line-2) !important; }
.score-input:focus { border-color: var(--accent) !important; background: var(--bg) !important; }
.score-bonus { font-size: 10.5px; font-weight: 700; min-width: 20px; text-align: left; }
.score-bonus.is-up { color: var(--teal); }
.score-bonus.is-down { color: var(--amber); }

.roles-mini { display: flex; gap: 3px; flex-wrap: nowrap; }
.role-mini {
  flex: 0 0 auto;
  height: 27px;
  padding: 0 8px 0 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-3);
  transition: all .1s;
}
.role-mini:hover { border-color: var(--line-2); }
.role-mini .role-icon { color: var(--text-3); }
.role-mini.is-on .role-icon { color: var(--rc); color: oklch(from var(--rc) max(l, .87) c h); }
.role-mini.is-on {
  color: #fff;
  background: color-mix(in srgb, var(--rc) 26%, transparent);
  border-color: var(--rc);
}

.btn-del {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-3); font-size: 16px; line-height: 1;
}
.btn-del:hover { color: var(--red-text); background: rgba(255, 70, 85, .12); border-color: rgba(255, 70, 85, .3); }

.tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--tc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  color: var(--tc); color: oklch(from var(--tc) max(l, .87) c h);
  white-space: nowrap;
}

.empty { padding: 40px 20px; text-align: center; color: var(--text-2); font-size: 14px; }
.empty-state { padding: 70px 20px; text-align: center; color: var(--text-2); }
.empty-state p { margin-bottom: 16px; }

/* ---------------- 세션 설정 ---------------- */

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.setup-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }

.mode-picker { display: grid; gap: 8px; }
.mode {
  display: block;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .12s;
}
.mode:hover { border-color: var(--line-2); }
.mode.is-active { border-color: var(--accent); background: var(--accent-soft); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode-name { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.mode-desc { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.mode.is-active .mode-name { color: var(--accent-2); }

/* 팀이 많아도(최대 30팀) 카드가 끝없이 길어지지 않게 높이 제한 + 스크롤 */
.team-config {
  display: grid; gap: 6px;
  max-height: 520px; overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.team-row { display: flex; gap: 8px; align-items: center; }
.team-row .swatch { width: 4px; height: 34px; border-radius: 2px; background: var(--tc); flex-shrink: 0; }
.team-row input[type="text"] { flex: 0 1 120px; font-weight: 600; }
.team-row select { flex: 1 1 140px; font-size: 13px; }

.setup-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 20px; flex-wrap: wrap;
}
.participants { font-size: 14px; color: var(--text-2); }
.participants strong { color: var(--text); }
.participants .warn { color: var(--amber); }
.participants .bad { color: var(--red-text); }

/* ---------------- 경매 무대 ---------------- */

.stage {
  background: var(--panel);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.stage-main { padding: 24px 24px 22px; min-height: 168px; display: flex; align-items: center; }
.stage-empty { width: 100%; text-align: center; color: var(--text-3); }
.stage-empty p { margin-bottom: 14px; }

.lot { display: flex; align-items: center; gap: 28px; width: 100%; flex-wrap: wrap; }
.lot-info { flex: 1 1 240px; min-width: 0; }
.lot-name {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  margin-bottom: 10px; line-height: 1.15;
}
.lot-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lot-score { font-size: 13px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }

.role-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px; border-radius: 4px;
  font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--rc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc) 42%, transparent);
  color: var(--rc); color: oklch(from var(--rc) max(l, .87) c h);
}
.role-chip.is-none { background: none; border-color: var(--line); color: var(--text-3); }

.lot-bid { flex: 0 0 auto; text-align: center; min-width: 160px; }
.bid-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.bid-amount {
  font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.bid-amount.is-empty { color: var(--text-3); }
.bid-team { font-size: 14px; font-weight: 700; color: var(--text); }
.bid-rule { margin-top: 6px; font-size: 12px; color: var(--text-3); }

/* ---- 남은 시간 (큰 시계) ----
 * 숫자를 크게 두고, 마감 임박이면 빨갛게 깜빡, 일시정지면 주황.
 * 아래 .clock-bar 는 남은 비율만큼 줄어드는 막대입니다. */
.clock {
  flex: 0 0 auto;
  min-width: 168px;
  padding: 12px 20px 14px;
  text-align: center;
  background: var(--bg-2);
  border-radius: var(--radius);
}
.clock-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.clock-num {
  font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.is-urgent .clock-num { color: var(--red-text); animation: clock-beat 1s ease-in-out infinite; }
.is-paused .clock-num { color: var(--amber); }
.is-paused .clock-label { color: var(--amber); }
@keyframes clock-beat { 50% { opacity: .55; } }

.clock-bar { height: 6px; background: var(--bg-2); }
.clock-bar-fill {
  height: 100%; width: 100%;
  background: var(--accent);
  transition: width .1s linear, background .2s;
}
.is-urgent .clock-bar-fill { background: var(--red); }
.is-paused .clock-bar-fill { background: var(--amber); }

/* 세션 설정: 타이머 방식 */
.timer-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.timer-mode {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .12s, background .12s;
}
.timer-mode:hover { border-color: var(--line-2); }
.timer-mode.is-active { border-color: var(--accent); background: var(--accent-soft); }
.timer-mode-name { font-weight: 700; font-size: 13px; }
.timer-mode-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

.timer-options { display: flex; gap: 6px; flex-wrap: wrap; }
.timer-chip { padding: 8px 16px; font-size: 13px; }
.timer-chip em { font-style: normal; font-weight: 500; color: var(--text-3); }

.lot-result { width: 100%; text-align: center; }
.lot-result .r-kind { font-size: 13px; font-weight: 700; color: var(--text-3); }
.lot-result .r-main { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0; }
.lot-result .r-sub { font-size: 14px; color: var(--text-2); }
.lot-result.is-sold .r-main { color: var(--teal); }
.lot-result.is-passed .r-main { color: var(--amber); }

.stage-controls {
  display: flex; gap: 8px; padding: 12px 24px;
  background: #292931;
  flex-wrap: wrap;
}

.host-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }

/* ---------------- 진행 레이아웃 ---------------- */

.run-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.run-layout[hidden] { display: none !important; }
.run-main { min-width: 0; }

.board {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
}
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.board-actions { display: flex; gap: 8px; }
.board-summary {
  display: flex; gap: 6px 18px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 10px 14px;
  background: var(--bg-2); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-3);
}
.board-summary b { color: var(--text); font-weight: 700; }
.board-summary .good { color: var(--teal); }
.board-summary .warn { color: var(--amber); }

.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

.team {
  background: var(--bg-2);
  border: 1px solid transparent;
  border-top: 3px solid var(--tc);
  border-radius: var(--radius-sm);
  padding: 12px 12px 14px;
  min-height: 130px;
  transition: background .12s, border-color .12s;
}
.team.is-drop { background: var(--accent-soft); border-color: var(--accent); }
.team.is-full .team-slots { color: var(--teal); }

.team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.team-name { font-weight: 800; font-size: 15px; color: var(--text); }
.team-slots { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.team-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--text-3);
}
.team-stats b { color: var(--text); font-weight: 700; }
.team-stats .pts { color: var(--amber); }
.team-missing { font-size: 11px; color: var(--amber); }

.team-members { display: grid; gap: 4px; min-height: 30px; }

.player {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  cursor: grab;
  transition: border-color .1s, background .1s;
}
.player:hover { background: var(--panel-2); }
.player.is-dragging { opacity: .4; }
.player.is-leader { border-left: 3px solid var(--tc); }
.player .p-name { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .p-tier {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--tc2) 20%, transparent);
  color: var(--tc2); color: oklch(from var(--tc2) max(l, .87) c h);
}
.player .p-roles { display: flex; gap: 2px; flex-shrink: 0; }
.player .p-role { display: inline-flex; color: var(--rc); color: oklch(from var(--rc) max(l, .87) c h); }
.player .p-cost { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
.player .p-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--tc); color: oklch(from var(--tc) max(l, .87) c h); }

.pool-zone {
  margin-top: 16px; padding: 14px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  transition: background .12s, border-color .12s;
}
.pool-zone.is-drop { background: var(--accent-soft); border-color: var(--accent); }
.pool-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.pool-list { display: flex; gap: 5px; flex-wrap: wrap; min-height: 28px; }
.pool-list .player { flex: 0 0 auto; }
.pool-list .empty-hint { font-size: 12px; color: var(--text-3); padding: 4px; }

/* ---------------- 사이드 (채팅/기록) ---------------- */

.side {
  background: var(--panel);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  /* 상단바(60px) 아래부터 화면 끝까지. 스크롤해도 따라와서 매물 · 입력칸이 항상 보입니다 */
  height: calc(100vh - 92px);
  min-height: 420px;
  position: sticky; top: 76px;
  overflow: hidden;
}
.side-tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.side-tab {
  flex: 1; padding: 13px 6px 11px;
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-3); font-size: 13px; font-weight: 600;
}
.side-tab:hover { color: var(--text-2); }
.side-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.peer-count {
  display: inline-block; min-width: 17px; padding: 0 4px;
  background: var(--panel-2); border-radius: 9px;
  font-size: 10.5px; font-family: var(--mono);
}

.side-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.side-panel.is-active { display: flex; }

.chat-log, .event-log, .peer-list {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 7px;
  scrollbar-width: thin;
}
.chat-log::-webkit-scrollbar, .event-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb, .event-log::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.msg { font-size: 13px; line-height: 1.55; }
.msg .who { font-weight: 700; color: var(--text-2); }
.msg .body { color: var(--text-2); }
.msg.is-bid {
  padding: 7px 10px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 5px 5px 0;
}
.msg.is-bid .amt { font-weight: 800; color: var(--accent-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.msg.is-bid .team { font-weight: 700; }
.msg.is-sys { color: var(--text-3); font-size: 11.5px; font-style: italic; }
.msg.is-err { color: var(--red-text); font-size: 11.5px; }
.msg .time { font-size: 10.5px; color: var(--text-3); font-family: var(--mono); margin-right: 5px; }

.chat-form { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); flex-shrink: 0; }
.chat-form input { flex: 1; min-width: 0; }
.chat-help {
  padding: 0 12px 10px;
  font-size: 11px; color: var(--text-3); line-height: 1.6;
  flex-shrink: 0;
}
.chat-help code {
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 4px; background: var(--bg-2); border-radius: 3px; color: var(--text-2);
}

.ev { font-size: 12.5px; line-height: 1.55; display: flex; gap: 8px; }
.ev .t { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); flex-shrink: 0; padding-top: 1px; }
.ev.k-sold .x { color: var(--teal); font-weight: 600; }
.ev.k-passed .x { color: var(--amber); }
.ev.k-bid .x { color: var(--text-2); }
.ev.k-nominate .x { color: var(--text); font-weight: 600; }
.ev.k-info .x { color: var(--text-3); }

.peer {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  background: var(--bg-2);
  border-radius: 6px;
  font-size: 13px;
}
.peer .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.peer .nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer .rl { font-size: 11px; color: var(--text-3); }
.peer-hint { padding: 12px; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* ---------------- 팀장 참가 화면 ---------------- */

.client-wrap { max-width: 560px; margin: 0 auto; }
.client-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 22px;
  overflow: hidden;
}
.client-card + .client-card { margin-top: 12px; }
.client-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.client-sub { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; }
/* 팀장 화면 경매 카드: 시간 막대를 카드 좌우 끝까지 꽉 차게 */
.client-card > .clock-bar { margin: 16px -22px 4px; }

.my-team {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  background: var(--bg-2);
  border-left: 3px solid var(--tc);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.my-team .mt-name { font-weight: 800; font-size: 15px; }
.my-team .mt-pts { font-size: 22px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }
.my-team .mt-meta { font-size: 12px; color: var(--text-3); }

.quick-bids { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.quick-bids .btn { flex: 1 1 auto; }

/* ---------------- 토스트 · 모달 ---------------- */

.toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  padding: 11px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 13px; font-weight: 500;
  animation: rise .18s ease-out;
  max-width: 100%;
}
.toast.is-error { border-color: var(--red); background: #2a1b1f; }
.toast.is-ok { border-color: var(--teal); background: #16241f; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.modal {
  border: 0;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 0;
  max-width: min(560px, calc(100vw - 32px));
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.modal::backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(2px); }
.modal-inner { padding: 24px; }
.modal-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------------- 반응형 ---------------- */

@media (max-width: 1080px) {
  .run-layout { grid-template-columns: 1fr; }
  .side { height: auto; max-height: 560px; position: static; }
}

@media (max-width: 720px) {
  /* 1줄: 로고 · 방 버튼 · 접속 상태 / 2줄: 탭 (넘치면 가로 스크롤) */
  .topbar { flex-wrap: wrap; height: auto; gap: 6px 10px; padding: 8px 12px 0; }
  .brand-text { display: none; }
  .brand-logo { height: 28px; }
  .topbar-right { order: 1; margin-left: auto; }
  .topbar-right .conn { display: none; }   /* 방 코드는 오른쪽 버튼에 이미 보입니다 */
  .game-switch .dd-btn { height: 32px; font-size: 12.5px; }
  .game-switch .dd-logo { width: 20px; height: 20px; }
  .tabs {
    order: 2;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px; }
  .main { padding: 16px 12px 70px; }

  .stage-main { padding: 18px 16px; }
  .stage-controls { padding: 10px 16px; }
  /* 폰: 1줄 선수 정보 / 2줄 현재가 · 남은 시간 나란히 */
  .lot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .lot-info { grid-column: 1 / -1; }
  .lot-info + .clock { grid-column: 1 / -1; }   /* 팀장 화면처럼 현재가 칸이 없으면 시계를 가로로 꽉 */
  .lot-name { font-size: 22px; }
  .lot-bid { min-width: 0; }
  .bid-amount { font-size: 32px; }
  .clock { min-width: 0; padding: 10px 12px; }
  .clock-num { font-size: 44px; }
  .timer-modes { grid-template-columns: 1fr; }

  .roster-bulk { margin-left: 0; width: 100%; }
  .col-memo, .roster td.cell-memo { display: none; }
  .setup-footer { flex-direction: column; align-items: stretch; }
  .setup-footer .btn { width: 100%; }
}


/* ---------------- 티어 아이콘 ---------------- */

.tier-icon {
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* 아이콘이 있는 배지는 위아래 여백을 줄여 아이콘이 배지를 밀어내지 않게 합니다 */
.tier-badge:has(.tier-icon) { padding-top: 2px; padding-bottom: 2px; padding-left: 5px; }

.tier-pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tier-pick select { flex: 1 1 auto; min-width: 0; }
.tier-pick-lg { min-height: 40px; }
.tier-icon-slot { flex: 0 0 auto; display: inline-flex; min-width: 0; }
.tier-icon-slot:empty { display: none; }

.player .p-tier { display: inline-flex; align-items: center; gap: 3px; }
.player .p-tier:has(.tier-icon) { padding-left: 2px; }

.lot-meta .tier-badge { font-size: 13px; }

.col-tier { width: 196px; }


/* ---------------- 역할 아이콘 ---------------- */

/* 흰색 글리프 PNG를 마스크로 써서 currentColor로 물들입니다. 마스크 이미지는 JS에서 인라인으로 지정합니다. */
.role-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--s, 14px);
  height: var(--s, 14px);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---------------- 요원 · MOST ---------------- */

/* 초상화는 배경이 투명한 얼굴 사진이라 원형으로 잘라 어두운 배경 위에 얹습니다 */
.agent-avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--s, 28px); height: var(--s, 28px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  font-size: calc(var(--s, 28px) * .42);
  font-weight: 800;
  color: var(--text-2);
  user-select: none;
}
.agent-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* 선수 카드 안에서 겹쳐 보이는 MOST */
.player .p-most { display: inline-flex; flex-shrink: 0; }
.player .p-most .agent-avatar { border-color: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2); }
.player .p-most .agent-avatar + .agent-avatar { margin-left: -6px; }

/* 명단에서 요원을 고르는 3칸 */
.most-slots { display: flex; gap: 8px; }
.most-slot {
  position: relative;
  flex: 0 0 auto;
  width: var(--s, 30px); height: var(--s, 30px);
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  color: var(--text-3);
  transition: border-color .12s, color .12s, background .12s;
}
.most-slot:hover { border-color: var(--accent); color: var(--text); }
.most-slot.is-set { border-style: solid; border-color: transparent; background: none; }
.most-slot.is-set:hover { border-color: var(--accent); }
.most-slot .agent-avatar { width: 100%; height: 100%; }
.most-plus { font-size: 16px; line-height: 1; font-weight: 400; }
.most-num {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 14px; height: 14px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--text-2);
  pointer-events: none;
}
.col-most { width: 132px; }
.cell-most .most-slots { gap: 9px; }

/* 매물 카드: 입찰할 때 참고하도록 이름까지 크게 */
#lot-most:not(:empty) { margin-top: 12px; }
.most-list { display: flex; gap: 10px 16px; flex-wrap: wrap; }
.most-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.most-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.most-rank { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.most-name { font-size: 13px; font-weight: 700; }

/* 요원 고르는 창 */
.agent-groups {
  display: grid; gap: 16px;
  max-height: min(62vh, 520px);
  overflow-y: auto; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.agent-group-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--rc); color: oklch(from var(--rc) max(l, .87) c h);
}
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.agent-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  transition: border-color .12s, background .12s;
}
.agent-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--panel-2); }
.agent-opt.is-current { border-color: var(--accent); background: var(--accent-soft); }
.agent-opt:disabled { opacity: .35; cursor: not-allowed; }
.agent-opt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 방 목록 · 방 정보 ---------------- */

/* op.gg 전적 목록처럼: 줄 사이 간격은 좁게, 테두리 대신 왼쪽 색 막대로 구분 */
.room-list { display: grid; gap: 6px; }

.room-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  background: var(--panel);
  border-left: 4px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.room-card:hover { background: #33333d; }
.room-card.is-mine { border-left-color: var(--teal); }
.room-card:has(.st-running) { border-left-color: var(--red); }

.room-main { min-width: 0; flex: 1 1 auto; }
.room-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.room-title { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.room-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--text-3); }
.room-clan { color: var(--text-2); font-weight: 600; }
.room-code { font-family: var(--mono); letter-spacing: .06em; }

.room-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.room-tags { display: flex; align-items: center; gap: 6px; }
.room-count { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.room-badge {
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.room-badge.st-waiting { color: var(--text-2); }
.room-badge.st-running { color: #fff; border-color: var(--red-dim); background: var(--red-dim); }
.room-badge.st-done { color: var(--text-3); }
.room-badge.is-mine { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 50%, transparent); }

.room-lock {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text-3);
}
.room-lock.is-on { color: var(--amber); background: rgba(245, 165, 36, .12); }
.lock-icon { display: block; }

.lobby-empty { padding: 56px 20px; background: var(--panel); border-radius: var(--radius); }

.myroom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 16px; padding: 14px 20px;
  background: rgba(0, 187, 163, .09);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm);
}
.myroom-label { font-size: 12px; font-weight: 700; color: var(--teal); }
.myroom-title { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 700; }
.myroom-title .room-lock { width: 20px; height: 20px; }

/* 방 만들기 · 관리 · 참가 화면의 방 요약 */
.room-summary { display: flex; align-items: center; gap: 12px; }
.room-summary .room-lock { width: 34px; height: 34px; border-radius: 8px; }
.room-summary-title { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.client-actions { display: flex; justify-content: space-between; gap: 8px; }
.client-actions .btn-lg { flex: 1 1 auto; }

.code-input {
  text-transform: uppercase;
  font-family: var(--mono); font-size: 22px; letter-spacing: .2em; text-align: center;
}

.host-offline {
  margin-bottom: 12px; padding: 11px 14px;
  background: #2a1b1f;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-2);
}
.host-offline strong { color: var(--text); }

@media (max-width: 720px) {
  .room-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .room-side { justify-content: space-between; }
  .myroom { flex-direction: column; align-items: stretch; }
}

/* 폭이 좁으면 역할 버튼을 2줄로 접어 아이디·티어 칸이 눌리지 않게 합니다 */
@media (max-width: 1180px) {
  .roles-mini { flex-wrap: wrap; }
  .col-roles { width: 160px; }
  .col-memo { width: 130px; }
  .roster td.cell-name, .roster th.col-name { min-width: 110px; }
}

/* ---------------- FaCer World 회원 ---------------- */

.account { display: flex; align-items: center; }
.account-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 4px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
  max-width: 180px;
}
.account-chip:hover { background: var(--panel-2); }
.account-avatar {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
}
.account-avatar.is-empty {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-fill); color: #fff; font-size: 12px; font-weight: 700;
}
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cloud-note { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.cloud-note:empty { display: none; }
.cloud-note a, .link-btn {
  color: var(--accent-2); font-weight: 600; text-decoration: none;
  background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer;
}
.cloud-note a:hover, .link-btn:hover { text-decoration: underline; }
.cloud-state.is-saved { color: var(--teal); font-weight: 600; }
.cloud-state.is-syncing { color: var(--text-2); }
.cloud-state.is-error { color: var(--red-text); font-weight: 600; }

.cloud-choice { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-2); }
.choice-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.choice-list b { color: var(--text); }

@media (max-width: 720px) {
  .account-name { display: none; }
  .account-chip { padding: 0 4px; }
}
a.btn { text-decoration: none; }

/* 로그인 · 회원가입 창 */
.account { gap: 6px; }
.auth-dialog { display: flex; flex-direction: column; gap: 14px; }
.auth-sub { font-size: 13.5px; color: var(--text-2); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .btn-lg { margin-top: 4px; width: 100%; }
.auth-error {
  margin: 0; padding: 10px 12px;
  background: #2a1b1f; border-left: 3px solid var(--red); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
}
.auth-check { font-size: 12px; color: var(--text-3); }
.auth-check.is-ok { color: var(--teal); }
.auth-check.is-bad { color: var(--red-text); }
.auth-terms { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); }
.auth-terms input { margin-top: 2px; accent-color: var(--accent); }
.auth-terms a { color: var(--accent-2); }
.auth-switch { align-self: center; font-size: 13.5px; }

/* ================= 회원 기능: 클랜 · 참가 신청 · 기록 ================= */

/* 회원 메뉴 */
.account-chip { border: 0; cursor: pointer; font-family: inherit; }
.account-menu { display: grid; gap: 6px; }
.menu-item {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); border: 0; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; text-align: left; cursor: pointer; font-family: inherit;
}
.menu-item:hover { background: var(--panel-2); }
.menu-item b { font-size: 14px; }
.menu-item span { font-size: 12.5px; color: var(--text-3); }

/* 명단 위치 고르기 */
.roster-target { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.roster-target select { width: auto; min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* 참가 신청 목록 */
.signup-panel { margin-bottom: 16px; }
.signup-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.signup-list { display: grid; gap: 6px; }
.signup-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--bg-2); border-radius: var(--radius-sm);
  border-left: 3px solid var(--teal);
}
.signup-row.is-closed { border-left-color: var(--line-2); opacity: .8; }
.signup-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.signup-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.entries-wrap { max-height: 50vh; overflow: auto; }
.roster.entries td { padding: 8px 10px; }
.cell-strong { font-weight: 700; }

/* 참가 신청 화면 (링크로 들어온 사람) */
.signup-head .client-title { font-size: 24px; margin: 8px 0 6px; }
.signup-kicker { display: flex; align-items: center; gap: 10px; }
.signup-note {
  margin: 14px 0 0; padding: 12px 14px; white-space: pre-wrap;
  background: var(--bg-2); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-2);
}
.signup-entries { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: se; }
.signup-entries li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--bg-2); border-radius: var(--radius-sm); counter-increment: se;
}
.signup-entries li::before { content: counter(se); min-width: 18px; color: var(--text-3); font-size: 12px; font-weight: 700; }
.signup-entries li.is-mine { outline: 1px solid var(--accent); }
.se-name { font-weight: 700; }
.se-nick { font-size: 12.5px; color: var(--text-3); }
.profile-form .add-row + .add-row { margin-top: 12px; }

/* 클랜 탭 */
.clan-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
.clan-side { display: grid; gap: 16px; }
.clan-intro .intro-list { margin: 0 0 18px; padding-left: 18px; display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.clan-intro b { color: var(--text); }
.clan-list { display: grid; gap: 4px; margin-bottom: 14px; }
.clan-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--bg-2); border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; cursor: pointer; text-align: left;
}
.clan-item:hover { background: var(--panel-2); }
.clan-item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.clan-item-name { font-weight: 700; }
.clan-item-meta { font-size: 12px; color: var(--text-3); }
.clan-join { display: grid; gap: 8px; }
.clan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.clan-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.clan-head-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.subtab {
  padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-3); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.subtab:hover { color: var(--text-2); }
.subtab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.member-list { display: grid; gap: 4px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-2); border-radius: var(--radius-sm); flex-wrap: wrap; }
.member-name { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.member-date { font-size: 12px; color: var(--text-3); }
.member-actions { display: flex; gap: 6px; }
.role-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--panel-2); color: var(--text-2); }
.role-tag.is-owner { background: rgba(245, 165, 36, .16); color: var(--amber); }
.role-tag.is-staff { background: var(--accent-soft); color: var(--accent-2); }

/* 기록 · 랭킹 */
.rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.rank-card { padding: 14px; background: var(--bg-2); border-radius: var(--radius-sm); }
.rank-title { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.rank-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rank-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.rank-no { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); font-size: 11.5px; font-weight: 800; flex-shrink: 0; }
.rank-list li:first-child .rank-no { background: var(--amber); color: #1c1c1f; }
.rank-name { font-weight: 700; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-list { display: grid; gap: 8px; }
.match { padding: 12px 14px; background: var(--bg-2); border-radius: var(--radius-sm); }
.match-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.match-title { font-weight: 800; }
.match-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.match-team { padding: 10px; background: var(--panel); border-radius: var(--radius-sm); border-top: 3px solid var(--line-2); }
.match-team.is-win { border-top-color: var(--teal); }
.match-team.is-lose { opacity: .7; }
.match-team-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.match-team ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; }
.match-team li { display: flex; justify-content: space-between; gap: 6px; }
.win-tag { font-size: 11.5px; font-weight: 800; color: var(--teal); }
.room-badge.st-waiting { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }

/* 클랜원 바로 입장 */
.clan-enter-box { margin: 0 0 14px; padding: 12px; background: var(--accent-soft); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.clan-enter { width: 100%; }

@media (max-width: 960px) {
  .clan-layout { grid-template-columns: 1fr; }
}

/* 매물 등록: 랜덤 · 티어 높은 순 · 직접 고르기 */
.nominate-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pick-hint { margin: 16px 0 8px; font-size: 13px; color: var(--text-3); }
.stage-empty .host-pick {
  max-height: 220px; overflow-y: auto; padding: 2px; margin-top: 0;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.pick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-family: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pick-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.pick-name { font-weight: 700; }
.pick-tier { font-size: 12px; font-weight: 700; color: var(--text-3); }
.pick-roles { display: inline-flex; gap: 2px; color: var(--text-3); }
.pick-roles:empty { display: none; }

/* ================= 갤러리 (커뮤니티 글) ================= */
.gallery-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.gallery-list { display: grid; gap: 4px; }
.gallery-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 16px; background: var(--panel); border: 0; border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
}
.gallery-row:hover { background: #33333d; }
.gallery-row.is-notice { border-left: 3px solid var(--red); }
.gallery-thumb {
  width: 64px; height: 48px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: var(--bg-2);
}
.gallery-thumb.is-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.gallery-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.gallery-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 700; }
.gallery-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-cc { color: var(--accent-2); font-size: 13px; flex-shrink: 0; }
.gallery-meta { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
.gallery-meta b { color: var(--text-2); }
.gallery-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }

.post-head { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.post-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.post-body { font-size: 15px; line-height: 1.75; color: var(--text); word-break: break-word; }
.post-body p { margin: 0 0 10px; }
.post-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 6px 0; }
.post-body a { color: var(--accent-2); }
.post-body blockquote { margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--line-2); color: var(--text-2); }
.post-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.post-actions-right { display: flex; gap: 6px; }
.comments { margin-top: 12px; }
.comment-list { display: grid; gap: 2px; margin-bottom: 14px; }
.comment { padding: 10px 0; border-top: 1px solid var(--line); }
.comment.is-reply { margin-left: 22px; padding-left: 12px; border-top: 0; border-left: 2px solid var(--line); }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.comment .post-body { font-size: 14px; line-height: 1.6; }
.comment-form { display: grid; gap: 8px; }
.comment-form .btn { justify-self: end; }
.reply-tag { font-size: 13px; color: var(--accent-2); }
.write-form { display: grid; gap: 14px; }

/* ================= 커뮤니티 레벨 아이콘 =================
 * facer.co.kr 메인 사이트 assets/fixes.css 의 레벨 아이콘 규칙을 그대로 옮긴 것 (모양을 똑같이 맞추려고).
 * 메인 사이트에서 레벨 아이콘 디자인을 바꾸면 이 칸도 다시 옮겨오세요.
 */
.list-level-icon { position:relative; isolation:isolate; display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; overflow:hidden; min-width:38px; min-height:23px; padding:3px 6px; border:1px solid #0002; border-radius:6px; font-size:9px; font-weight:1000; line-height:1; letter-spacing:-.2px; box-shadow:1px 2px 0 #101722 !important; }
.list-level-icon::after { position:absolute; z-index:0; inset:-60% -90%; content:""; opacity:0; pointer-events:none; mix-blend-mode:screen; transform:translateX(-65%) rotate(18deg); }
/* Community level tiers and administrator identity */
.level-badge[class*="level-tier-"],.profile-level-badge[class*="level-tier-"],.list-level-icon[class*="level-tier-"] { position:relative; isolation:isolate; overflow:hidden; border:1px solid #0002; transition:filter .2s ease,transform .2s ease,box-shadow .2s ease; }
.level-badge[class*="level-tier-"]::after,.profile-level-badge[class*="level-tier-"]::after,.list-level-icon[class*="level-tier-"]::after { position:absolute; z-index:0; inset:-60% -90%; content:""; opacity:0; pointer-events:none; mix-blend-mode:screen; transform:translateX(-65%) rotate(18deg); }
.level-tier-1 { background:#d9dce2 !important; color:#303641 !important; }
.level-tier-10 { background:linear-gradient(135deg,#f7f8fa,#adb5c1) !important; color:#202631 !important; box-shadow:0 0 0 1px #fff8 inset,2px 3px 0 #101722 !important; }
.level-tier-20 { background:linear-gradient(135deg,#8dd7ff,#2878df) !important; color:#07182e !important; box-shadow:0 0 12px #3ea6ff88,2px 3px 0 #101722 !important; }
.level-tier-30 { background:linear-gradient(135deg,#ffe789,#f4ae1b) !important; color:#2b1b00 !important; box-shadow:0 0 13px #ffc43d88,2px 3px 0 #101722 !important; }
.level-tier-30::after,.level-tier-40::after,.level-tier-50::after,.level-tier-60::after,.level-tier-70::after,.level-tier-80::after,.level-tier-90::after,.level-tier-100::after { opacity:.75; background:linear-gradient(90deg,transparent 42%,#fff 49%,#fff9 51%,transparent 58%); animation:levelShine 5.8s ease-in-out infinite; }
.level-tier-40 { background:linear-gradient(135deg,#ffd45c,#ff7a24) !important; color:#281000 !important; box-shadow:0 0 16px #ff8a2caa,2px 3px 0 #101722 !important; animation:levelGlow 3.2s ease-in-out infinite; }
.level-tier-50 { background:linear-gradient(135deg,#81ffd1,#0ca77e) !important; color:#03251c !important; box-shadow:0 0 17px #2ce3a599,2px 3px 0 #101722 !important; animation:levelGlow 2.9s ease-in-out infinite; }
.level-tier-60 { background:linear-gradient(135deg,#d6a4ff,#7042d8) !important; color:#fff !important; text-shadow:0 1px 2px #321a70; box-shadow:0 0 18px #945cffaa,2px 3px 0 #101722 !important; animation:levelPulse 3s ease-in-out infinite; }
.level-tier-70 { background:linear-gradient(135deg,#ff8d9e,#db244d) !important; color:#fff !important; text-shadow:0 1px 2px #780019; box-shadow:0 0 19px #ff416caa,2px 3px 0 #101722 !important; animation:levelPulse 2.7s ease-in-out infinite; }
.level-tier-80 { background:linear-gradient(120deg,#4fd9ff,#8d64ff,#ff5ba9,#ffd35c) !important; background-size:240% 240% !important; color:#fff !important; text-shadow:0 1px 3px #24114d; box-shadow:0 0 21px #8d64ffbb,2px 3px 0 #101722 !important; animation:levelAurora 7s ease infinite; }
.level-tier-90 { background:linear-gradient(120deg,#ffdb57,#ff5a32,#a4133c) !important; color:#fff !important; text-shadow:0 1px 3px #5d061a; box-shadow:0 0 10px #fff3,0 0 24px #ff4b2bbb,2px 3px 0 #101722 !important; animation:levelLegend 2.8s ease-in-out infinite; }
.level-tier-100 { background:linear-gradient(120deg,#58e6ff,#9c62ff,#ff5a9e,#ffe86a,#58e6ff) !important; background-size:300% 300% !important; color:#fff !important; text-shadow:0 1px 3px #24114d; box-shadow:0 0 8px #fff8,0 0 27px #a76dffcc,2px 3px 0 #101722 !important; animation:levelAurora 4.8s linear infinite,levelLegend 2.4s ease-in-out infinite; }
@keyframes levelShine { 0%,58% { transform:translateX(-72%) rotate(18deg); } 78%,100% { transform:translateX(72%) rotate(18deg); } }
@keyframes levelGlow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.13) saturate(1.13); } }
@keyframes levelPulse { 0%,100% { filter:brightness(1); transform:translateY(0); } 50% { filter:brightness(1.15); transform:translateY(-1px); } }
@keyframes levelAurora { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes levelLegend { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.2) saturate(1.2); } }
@media (prefers-reduced-motion:reduce) {
  .level-badge[class*="level-tier-"],.profile-level-badge[class*="level-tier-"],.list-level-icon[class*="level-tier-"],.level-badge[class*="level-tier-"]::after,.profile-level-badge[class*="level-tier-"]::after,.list-level-icon[class*="level-tier-"]::after,.admin-crown { animation:none !important; }
}
.portal-ranking .ranking-member .list-level-icon { flex:0 0 auto; min-width:36px; padding:3px 5px; font-size:8px; font-style:normal; }
.level-tier-50,.level-tier-55,.level-tier-60,.level-tier-65,.level-tier-70,.level-tier-75,.level-tier-80,.level-tier-85,.level-tier-90,.level-tier-95,.level-tier-100 { background-size:260% 260%!important; animation:levelSweep 2.6s linear infinite,levelEnergy 1.45s ease-in-out infinite!important; }
.level-tier-50 { background:linear-gradient(110deg,#064f3c,#31efba,#08795c,#91ffe0)!important; }
.level-tier-55 { background:linear-gradient(110deg,#076b72,#42f5ff,#1267aa,#99fbff)!important; color:#032a30!important; }
.level-tier-60 { background:linear-gradient(110deg,#351274,#b760ff,#7137df,#e6b7ff)!important; box-shadow:0 0 8px #e2b5ff,0 0 23px #8f48ff,2px 3px 0 #101722!important; }
.level-tier-65 { background:linear-gradient(110deg,#56117e,#ed5cff,#8531c9,#ffb1f5)!important; color:#fff!important; }
.level-tier-70 { background:linear-gradient(110deg,#760f32,#ff557a,#c11e4c,#ffb2c4)!important; }
.level-tier-75 { background:linear-gradient(110deg,#8a2310,#ff863e,#d63c19,#ffd09b)!important; color:#fff!important; }
.level-tier-80 { background:linear-gradient(110deg,#073b86,#3ee7ff,#783dff,#ff65d4,#ffe06a)!important; }
.level-tier-85 { background:linear-gradient(110deg,#0a5962,#4effd7,#4b4cff,#f45cff,#fff58b)!important; color:#fff!important; }
.level-tier-90 { background:linear-gradient(110deg,#611000,#ff4f29,#ffbf32,#fff0a6,#b61f10)!important; }
.level-tier-95 { background:linear-gradient(110deg,#1d123f,#6a40ff,#ff4ba8,#ffcf3e,#f8ffff)!important; color:#fff!important; box-shadow:0 0 9px #fff,0 0 28px #ff4ba8,2px 3px 0 #101722!important; }
.level-tier-50,.level-tier-55,.level-tier-60,.level-tier-65,.level-tier-70,.level-tier-75,.level-tier-80,.level-tier-85,.level-tier-90,.level-tier-95,.level-tier-100 { background-size:260% 260%!important; }
.level-tier-50::after,.level-tier-55::after,.level-tier-60::after,.level-tier-65::after,.level-tier-70::after,.level-tier-75::after,.level-tier-80::after,.level-tier-85::after,.level-tier-90::after,.level-tier-95::after,.level-tier-100::after { opacity:.95!important; background:linear-gradient(90deg,transparent 35%,#fff 48%,#fff 52%,transparent 65%)!important; animation:levelFlash 1.8s cubic-bezier(.2,.7,.3,1) infinite!important; }
@keyframes levelSweep { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes levelEnergy { 0%,100%{filter:brightness(.95) saturate(1)} 50%{filter:brightness(1.3) saturate(1.35)} }
@keyframes levelFlash { 0%{transform:translateX(-82%) rotate(18deg)} 55%,100%{transform:translateX(82%) rotate(18deg)} }
@media (prefers-reduced-motion:reduce) {
  .level-tier-50,.level-tier-55,.level-tier-60,.level-tier-65,.level-tier-70,.level-tier-75,.level-tier-80,.level-tier-85,.level-tier-90,.level-tier-95,.level-tier-100 { animation:none!important; }
}
/* 내전 사이트에서 쓰는 크기 조정 */
.list-level-icon { vertical-align: middle; text-decoration: none; }
.list-level-icon.is-small { min-width: 34px; min-height: 19px; padding: 2px 5px; font-size: 8.5px; }
.author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

/* 내 방: 링크 · 비밀번호 / 방 닫기 */
.room-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* 갤러리 작성자 아바타 · 비회원 */
.author-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--panel-2); }
.author-avatar.is-empty {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.guest-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); color: var(--text-3); }
.guest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guest-note { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 13px; color: var(--text-2); }
.link-btn.link-danger { color: var(--red-text); }
.account-chip { padding-left: 6px; }
@media (max-width: 720px) { .guest-fields { grid-template-columns: 1fr; } }

/* 글 화면 머리 — 왼쪽 큰 정사각형 아바타, 오른쪽 제목 · 레벨 · 닉네임 */
.post-header { display: flex; align-items: center; gap: 16px; }
.post-avatar { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--panel-2); }
.post-avatar.is-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: var(--text-2); }
.post-header-info { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.post-header .post-title { margin: 0; }
.post-author-name { display: flex; align-items: center; gap: 7px; font-size: 15px; }
@media (max-width: 720px) {
  .post-avatar { width: 64px; height: 64px; }
  .post-header .post-title { font-size: 19px; }
}

/* 추천 · 비추천 · 신고 */
.vote-bar { display: flex; justify-content: center; gap: 10px; margin: 26px 0 6px; }
.vote-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 112px; height: 44px; padding: 0 16px; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.vote-btn b { font-variant-numeric: tabular-nums; }
.vote-btn.is-up:hover { border-color: var(--accent); background: var(--accent-soft); }
.vote-btn.is-down:hover { border-color: var(--red); background: rgba(232, 64, 87, .12); }
.vote-ico { font-size: 16px; }
.comment-votes { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.mini-vote {
  height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
  font-family: inherit; font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.mini-vote:hover { border-color: var(--line-2); color: var(--text); }
.mini-report { font-size: 12px; color: var(--text-3); margin-left: 2px; }

/* 갤러리 카테고리 · 글쓰기 */
.cat-tag {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 2px 8px; margin-right: 6px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 12px; font-weight: 700; vertical-align: middle;
}
.gallery-bar .roster-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.write-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.write-cat { flex: 0 0 180px; }
.html-editor {
  min-height: 260px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: 15px; line-height: 1.7; outline: none; overflow-wrap: anywhere;
}
.html-editor:focus { border-color: var(--accent); }
.html-editor img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 720px) { .write-cat { flex: 1 1 100%; } }

/* ---------------- 언어 선택 · 언어별 글꼴 ---------------- */
.lang-switch { flex-shrink: 0; }
.dd-lang .dd-btn { height: 32px; padding: 0 8px 0 10px; gap: 6px; font-size: 12.5px; font-weight: 600; }
.dd-lang .lang-globe { color: var(--text-3); flex-shrink: 0; }
.dd-lang .dd-menu { left: auto; right: 0; min-width: 170px; max-height: 70vh; overflow-y: auto; }

.lang-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lang-links a { color: var(--text-3); text-decoration: none; }
.lang-links a:hover { color: var(--text-2); text-decoration: underline; }

/* Pretendard 에 없는 글자(일본어 · 중국어 · 태국어)는 그 나라 기본 글꼴로 */
html:lang(ja) { --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; }
html:lang(zh-CN) { --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html:lang(zh-TW) { --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
html:lang(th) { --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif; }
.roster th { white-space: nowrap; }   /* 언어마다 머리글 길이가 달라 세로로 쪼개지지 않게 */

/* 한국어보다 글이 긴 언어: 상단 메뉴가 잘리지 않게 좁은 화면에서는 메뉴를 둘째 줄로 내립니다 */
@media (min-width: 721px) and (max-width: 1240px) {
  html:not(:lang(ko)) .brand-text { display: none; }
  html:not(:lang(ko)) .topbar { flex-wrap: wrap; height: auto; gap: 6px 14px; padding: 8px 20px 0; }
  html:not(:lang(ko)) .topbar-right { order: 1; margin-left: auto; }
  html:not(:lang(ko)) .tabs { order: 2; width: 100%; padding-bottom: 6px; }
  html:not(:lang(ko)) .tab { padding: 6px 12px; }
}

/* Keep level effects inside the badge; never cover the adjacent nickname. */
:is(.level-badge,.profile-level-badge,.list-level-icon)[class*="level-tier-"] {
  overflow:hidden;
  contain:paint;
  clip-path:inset(0);
  box-shadow:inset 0 0 0 1px #ffffff30 !important;
  filter:none !important;
  transform:none !important;
}

/* Balance author avatars and nicknames with crystal level icons. */
.author { gap:8px; flex-wrap:wrap; color:var(--text); font-size:16px; line-height:1.4; }
.author > span:not(.author-avatar):not(.guest-tag),.author > b:not(.list-level-icon) {
  min-width:0; font-weight:700; overflow-wrap:anywhere;
}
.author-avatar { width:32px; height:32px; }
.author-avatar.is-empty { font-size:15px; }
.post-avatar { width:96px; height:96px; }
.post-author-name { gap:8px; flex-wrap:wrap; font-size:18px; line-height:1.4; color:var(--text); }
.post-author-name > b:not(.list-level-icon) { min-width:0; font-weight:700; overflow-wrap:anywhere; }
.comment-head { flex-wrap:wrap; row-gap:6px; }
@media(max-width:720px) { .post-avatar { width:80px; height:80px; } }
/* End balanced author identity. */

/* ---------------- 참가자(팀장) 화면: PC 2단 배치 ---------------- */
.c-side { margin-top: 12px; }
.c-chat .chat-log { max-height: 260px; }
@media (min-width: 1000px) {
  .client-wrap:has(> .c-live) { max-width: 1240px; }
  .c-live { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
  .c-side { margin-top: 0; position: sticky; top: 76px; }
  .c-chat .chat-log { max-height: none; height: calc(100vh - 250px); min-height: 280px; }
}

/* ---------------- 결과 카드 이미지 ---------------- */
.card-preview img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.card-preview-actions { display: flex; gap: 8px; margin-top: 12px; }
.card-preview-actions .btn { flex: 1 1 0; }
.modal:has(.card-preview) { max-width: min(760px, calc(100vw - 32px)); }

/* ---------------- 맵 · 진영 정하기 (맵 밴픽) ---------------- */
.veto-card { margin-top: 16px; }
.veto-card > .note, .veto-first, .veto-formats, .veto-start { margin-top: 12px; }
.veto-first { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.veto-turn {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px;
  border-left: 4px solid var(--tc); border-radius: var(--radius-sm);
  background: var(--bg-2); font-size: 13px; color: var(--text-2);
}
.veto-turn b { font-size: 16px; color: var(--text); }
.veto-turn.is-mine { background: var(--accent-soft); }
.veto-sides { display: flex; gap: 8px; margin-bottom: 12px; }
.veto-sides .btn { flex: 1 1 0; }
.veto-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-top: 10px; }
.veto-map {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 58px; padding: 8px 12px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--text);
}
.veto-map b { font-size: 14px; }
.veto-map span { font-size: 11.5px; color: var(--text-3); min-height: 15px; }
.veto-map:disabled { cursor: default; }
.veto-map.is-pickable:hover { border-color: var(--accent); background: var(--panel-2); }
.veto-map.is-ban { opacity: .45; border-left-color: var(--tc); }
.veto-map.is-ban b { text-decoration: line-through; }
.veto-map.is-pick { border-color: var(--tc); border-left-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, var(--bg-2)); }
.veto-map.is-decider, .veto-map.is-random { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.veto-map.is-off { opacity: .4; }
.veto-map.is-off b { text-decoration: line-through; }
.veto-result { margin-top: 14px; display: grid; gap: 6px; }
.veto-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-2); border-radius: var(--radius-sm); font-size: 13.5px;
}
.veto-row b { font-size: 16px; }
.veto-no { font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.veto-by { color: var(--text-3); font-size: 12.5px; }
.veto-side { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); margin-left: auto; flex-wrap: wrap; }
.veto-side i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.veto-side em { font-style: normal; color: var(--text-3); }

/* 맵 사진이 있는 타일 (발로란트) */
.veto-map.has-img {
  min-height: 84px; justify-content: flex-end; border-left-width: 1px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .15) 70%), var(--img) center / cover no-repeat;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.veto-map.has-img span { color: #e6e6ee; }
.veto-map.has-img.is-pickable:hover { background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%), var(--img) center / cover no-repeat; }
.veto-map.has-img.is-ban, .veto-map.has-img.is-off { filter: grayscale(1); opacity: .5; }
.veto-map.has-img.is-pick { box-shadow: inset 0 0 0 2px var(--tc); background: linear-gradient(to top, color-mix(in srgb, var(--tc) 55%, #000), rgba(0, 0, 0, .1) 75%), var(--img) center / cover no-repeat; }
.veto-map.has-img.is-decider, .veto-map.has-img.is-random { box-shadow: inset 0 0 0 2px var(--accent); background: linear-gradient(to top, rgba(40, 70, 150, .9), rgba(0, 0, 0, .1) 75%), var(--img) center / cover no-repeat; }
@media (min-width: 721px) { .veto-maps:has(.has-img) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* 맵 고르기 (시작 전): 고른 맵만 밝게 */
.veto-pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.veto-pick-head .note { margin: 0; }
.veto-maps.is-choosing .veto-map { opacity: .6; }
.veto-maps.is-choosing .veto-map:hover { opacity: .9; }
.veto-maps.is-choosing .veto-map.is-on { opacity: 1; border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.veto-maps.is-choosing .veto-map.is-on span { color: #cfe0ff; font-weight: 700; }

/* ---------------- 대진 (토너먼트 · 리그전) ---------------- */
.bracket { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-top: 12px; }
.bracket-round { flex: 1 1 200px; min-width: 0; display: grid; gap: 6px; }
.bracket-title { font-size: 12px; font-weight: 700; color: var(--text-3); }
.bracket-match {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; text-align: left;
}
button.bracket-match:hover { border-color: var(--accent); }
.bracket-match.is-cur { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.bracket-match em { font-style: normal; font-size: 11px; color: var(--text-3); }
.bm-team { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; padding-left: 8px; border-left: 3px solid var(--tc, var(--line-2)); }
.bm-team.is-tbd { color: var(--text-3); font-weight: 500; }
.bm-team.is-win::after { content: " ✓"; color: var(--teal); }
.bm-team.is-lose { opacity: .45; text-decoration: line-through; }
.bracket-champ { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--tc); border-radius: var(--radius-sm); background: var(--bg-2); font-size: 16px; font-weight: 800; }
.bracket-table { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.bracket-table span { padding-left: 8px; border-left: 3px solid var(--tc); }
.bracket-table b { color: var(--text); }
.match-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.match-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.match-title { display: flex; align-items: baseline; gap: 10px; font-size: 18px; }
.match-title em { font-style: normal; font-size: 12px; color: var(--text-3); }
.match-win { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.match-win .field-label { margin-right: 4px; }
.match-panel > .note, .match-panel > .veto-first, .match-panel > .veto-formats, .match-panel > .veto-start { margin-top: 12px; }

/* 진행 화면 위쪽: 방 참가 안내 */
.room-bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--panel); border-left: 3px solid var(--line-2); border-radius: var(--radius);
}
.room-bar.is-open { border-left-color: var(--teal); }
.room-bar-text { flex: 1 1 280px; min-width: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.room-bar-text b { font-size: 14px; color: var(--text); }

/* 대진 직접 짜기: 경기 추가 줄 */
.match-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; background: var(--bg-2); border-radius: var(--radius-sm); }
.match-add select { flex: 0 0 auto; width: auto; min-width: 110px; }
.match-add input { flex: 1 1 180px; min-width: 0; }
.match-add em { font-style: normal; font-size: 12px; color: var(--text-3); }

/* ---------------- 경기 결과 적기 (스코어 · K/D/A) ---------------- */
.match-result { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.match-result summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--text-2); }
.match-result summary:hover { color: var(--text); }
input.stat-in { flex: 0 0 58px; width: 58px; min-width: 0; height: 34px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stat-in::-webkit-outer-spin-button, .stat-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 15px; }
.score-row input.stat-in { flex: 0 0 72px; width: 72px; height: 42px; font-size: 20px; font-weight: 800; }
.score-row em { font-style: normal; font-size: 20px; color: var(--text-3); }
.stat-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.stat-team { padding: 10px 12px; background: var(--bg-2); border-top: 3px solid var(--tc); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.stat-head, .stat-row { display: flex; align-items: center; gap: 6px; }
.stat-head b { flex: 1 1 0; min-width: 0; }
.stat-rank { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-right: 8px; }
.stat-cols { display: inline-flex; gap: 6px; }
.stat-cols i { width: 58px; text-align: center; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.stat-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.bm-score { flex-shrink: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.match-score { padding: 1px 8px; border-radius: 999px; background: var(--bg); font-weight: 800; font-variant-numeric: tabular-nums; }
.note.kda { font-variant-numeric: tabular-nums; margin-left: auto; }
@media (max-width: 720px) { .stat-row input.stat-in, .stat-rank input.stat-in { flex-basis: 46px; width: 46px; } .stat-cols i { width: 46px; } }

/* ---------------- 클랜 랭킹: 이름 누르기 · 선수 상세 ---------------- */
button.rank-link { padding: 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; flex: 0 1 auto; }
button.rank-link:hover { color: var(--accent-2); text-decoration: underline; }
.rank-name > button.rank-link { display: inline; }
.player-detail { display: grid; gap: 8px; }
.pd-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--bg-2); border-radius: var(--radius-sm); }
.pd-label { flex: 0 0 96px; font-size: 12px; font-weight: 700; color: var(--text-3); }
.pd-row b { font-size: 15px; }

/* ---------------- 조준점 코드 공유 ---------------- */
.xh-how { margin: 10px 0 14px; }
.xh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.xh-grid > .note, .xh-grid > .xh-empty { grid-column: 1 / -1; }
.xh-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
/* 게임 화면처럼 보이도록 어두운 바탕 + 옅은 격자 */
.xh-preview {
  display: grid; place-items: center; height: 132px;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, #4a5560, #2b3138);
}
.xh-preview canvas { width: 132px; height: 132px; image-rendering: pixelated; }
.xh-preview.is-none { color: var(--text-3); font-size: 12px; text-align: center; padding: 0 12px; }
.xh-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0; flex: 1; }
.xh-cats { margin-bottom: 10px; }
.xh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.xh-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.xh-cat { flex: none; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--bg-2); color: var(--text-2); }
.xh-cat.is-pro { background: var(--accent-soft); color: var(--accent-2); }
.xh-cat.is-fun { background: rgba(245, 165, 36, .16); color: var(--amber); }
.xh-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); }
.xh-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-meta span:last-child { flex: none; }
.xh-note { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.xh-code { display: block; padding: 6px 8px; background: var(--bg-2); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.xh-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.xh-actions .btn-primary { flex: 1 1 auto; }
.xh-like { gap: 5px; }
.xh-like span { color: var(--text-3); }
.xh-like.is-on { border-color: rgba(232, 64, 87, .45); }
.xh-like.is-on span { color: var(--red-text); }
.xh-foot { display: flex; justify-content: center; margin-top: 16px; }
.xh-add-preview .xh-preview { height: 110px; border-radius: var(--radius-sm); }
.xh-add-preview .xh-preview canvas { width: 110px; height: 110px; }
textarea.xh-input { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* 팀 색 글자 (어두운 팀 색도 읽히게 밝기를 끌어올림) */
.tc-text { color: var(--tc); color: oklch(from var(--tc) max(l, .87) c h); }

/* 키보드로 이동할 때 지금 위치가 보이게 (WCAG 2.4.7) */
:where(a, button, [role="tab"], summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------------- 스킨 구경 ---------------- */
.skin-bar { margin-bottom: 12px; }
input.skin-search { max-width: 320px; }
.skin-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.skin-picker.is-lol { max-height: 232px; overflow-y: auto; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.skin-pick { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.skin-pick img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex: none; }
.skin-picker.is-valorant .skin-pick { padding: 6px 12px; }
.skin-picker.is-valorant .skin-pick img { width: 54px; height: 20px; object-fit: contain; border-radius: 0; }
.skin-pick:hover { border-color: var(--line-2); color: var(--text); }
.skin-pick.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 700; }
.skin-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.skin-head h2 { font-size: 18px; font-weight: 800; }
.skin-count { font-size: 13px; color: var(--text-3); }
.skin-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.skin-grid.is-valorant { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.skin-grid > .note, .skin-grid > .empty { grid-column: 1 / -1; }
.skin-card { display: flex; flex-direction: column; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.skin-card:hover { border-color: var(--accent); }
.skin-img { display: block; background: var(--bg-2); }
.skin-grid.is-lol .skin-img { aspect-ratio: 308 / 560; }
.skin-grid.is-lol .skin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skin-grid.is-valorant .skin-img { display: grid; place-items: center; height: 110px; padding: 14px; background: linear-gradient(135deg, #3a424c, #23272e); }
.skin-grid.is-valorant .skin-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.skin-name { padding: 9px 11px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.modal.is-wide { max-width: min(980px, calc(100vw - 32px)); }
.skin-full { display: grid; place-items: center; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); }
.skin-full.is-valorant { min-height: 200px; padding: 24px; background: linear-gradient(135deg, #3a424c, #23272e); }
.skin-full-img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }
.skin-looks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.skin-look { width: 40px; height: 40px; padding: 3px; display: grid; place-items: center; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; }
.skin-look img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.skin-look.is-active { border-color: var(--accent); }
/* CS2 · 포트나이트 스킨 카드 */
.skin-grid.is-cs2, .skin-grid.is-fortnite { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.skin-grid.is-cs2 .skin-img { display: grid; place-items: center; height: 120px; padding: 10px; background: linear-gradient(135deg, #3a424c, #23272e); border-bottom: 3px solid var(--rc, var(--line)); }
.skin-grid.is-cs2 .skin-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.skin-grid.is-fortnite .skin-img { aspect-ratio: 1; background: linear-gradient(160deg, #3d5a8a, #1f2a44); }
.skin-grid.is-fortnite .skin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skin-sub { padding: 0 11px 9px; margin-top: -5px; font-size: 12px; color: var(--text-3); }
.skin-card[style] .skin-sub, .skin-full-sub[style] { color: var(--rc); color: oklch(from var(--rc) max(l, .87) c h); }
.skin-full.is-cs2, .skin-full.is-fortnite { min-height: 200px; padding: 20px; background: linear-gradient(135deg, #3a424c, #23272e); }
.skin-full-sub { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-2); }