.ta-wrap{
  max-width:1200px;
  /* theme.css의 .page-wrap이 좌우 패딩을 6vw(뷰포트 기준)로 주는데, PC
     넓은 화면에서 그게 너무 커서 안쪽 실제 내용 폭을 많이 깎아먹는다 --
     고정값으로 덮어써서 매물 4개가 한 줄에 들어갈 폭을 확보. */
  padding-left:24px;
  padding-right:24px;
}
/* "DRAFT PROTOCOL" 태그 + "팀 경매" 제목을 아예 없앴다(쓸데없이 공간만
   차지한다는 요청) -- theme.css .page-wrap의 기본 top padding(20px)도
   더 줄여서 실제 UI가 화면 위쪽으로 바싹 붙게. */
.ta-no-title{
  padding-top:8px;
}
/* 매물 설정(호스트 설정 화면)만 넓게 쓰고, 나머지 화면들(선택/대기실/
   경매/결과)은 예전처럼 적당히 좁게 가운데 정렬 유지 -- "방 만들기"
   진입 화면 자체는 굳이 안 넓혀도 된다는 요청. */
#choicePanel{
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
#lobbyPanel,
#resultsPanel{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
/* 경매 화면은 좌우에 팀 현황/매물 현황 사이드바가 붙어서 다른 화면들보다
   넓게 써야 함 -- ta-wrap 전체 폭(1200px)을 그대로 씀. */
#auctionPanel{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.field-label{
  /* 원래 11px + --cyan-dim(어두운 시안색)이라 배경과 대비가 약해서 잘 안
     보인다는 피드백 -- 입찰 화면 라벨(.bid-split-current .field-label 등)에
     이미 적용했던 "밝은 색 + 볼드" 처방을 여기(방 만들기 화면 등 나머지
     전부가 쓰는 기본 규칙)에도 그대로 적용. */
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--cyan);
  margin-bottom:6px;
  margin-top:20px;
}
.field-label:first-of-type{
  margin-top:0;
}
.text-input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:2px;
  color:#fff;
  font-size:15px;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.text-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(63,242,255,0.35);
}

.ta-panel{
  margin-top:22px;
  padding:22px 24px;
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
}

/* 선택 화면/호스트 설정 화면은 폼 위주라 가운데 정렬 -- 대기실/경매/결과
   화면은 각자 이미 필요한 정렬을 갖고 있어서(팀 목록 좌우 배치 등) 여기
   포함 안 시킴. */
#choicePanel,
#hostConfigPanel{
  text-align:center;
}

/* ---------- 선택 화면 ---------- */
.ta-divider{
  margin:22px 0;
  text-align:center;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan-dim);
}
.join-form{
  display:flex;
  gap:10px;
}
.join-form .text-input{
  flex:1;
  text-transform:uppercase;
}

/* ---------- −1/값/+1 스테퍼 (팀 수/최소 경매 금액/시작 코인/타이머/코인 지급 공용) ---------- */
.stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.stepper-btn{
  width:34px;
  height:34px;
  line-height:32px;
  text-align:center;
  font-size:17px;
  font-weight:700;
  color:var(--cyan);
  background:rgba(63,242,255,0.1);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:4px;
  cursor:pointer;
  padding:0;
  user-select:none;
}
.stepper-btn:hover:not(:disabled){
  background:var(--cyan);
  color:#04141a;
}
.stepper-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.stepper-value{
  min-width:64px;
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#fff;
}

/* ---------- 설정 저장/불러오기 ---------- */
.saved-config-row,
.save-config-row{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.saved-config-row .text-input,
.save-config-row .text-input{
  width:auto;
  min-width:180px;
}
select.text-input{
  cursor:pointer;
}
select.text-input option{
  background:#0a1018;
  color:#fff;
}

/* ---------- 제외 라인 선택 ---------- */
.role-select-row{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.role-select-row .btn.active{
  background:var(--cyan);
  color:#04141a;
  border-color:var(--cyan);
}

/* ---------- 매물 이름 입력 (라인별 그룹) ---------- */
.lot-role-groups{
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
}
.lot-role-group-title{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--cyan);
  /* 라인명 길이가 제각각이라("탑"/"서포터"는 서로 폭이 다름) 이 라벨을
     .lot-role-group(flex)의 유동 폭 아이템으로 두면, 짧은 라인 다음에
     오는 매물 그리드가 그때그때 다른 x좌표에서 시작해서 행끼리 열이
     안 맞아 보이는 버그가 있었음. flex:none + 고정 폭으로 항상 같은
     자리를 차지하게 해서 모든 행의 그리드 시작 x좌표를 통일함. */
  flex:none;
  width:56px;
  text-align:left;
}
.lot-role-group-rows{
  /* .lot-role-group(flex)의 형제인 라인명 라벨(flex:none, 고정 폭) 옆에서
     남는 폭을 전부 차지해야 하는데, flex-grow를 안 주면 flex-basis:auto
     기본값 때문에 이 그리드 자신의 "내용물 기준" 폭(=매물 버튼들의
     자연스러운 글자 폭 합)만큼만 좁게 잡히고 나머지는 그냥 빈 공간으로
     남는다 -- **실제로 있었던 버그**: 매물 이름을 직접 타이핑하는
     input(칸 너비를 넓게 잡아먹는 기본 폭이 있음)을 "매물 선택" 버튼(짧은
     글자)으로 바꾸자마자 이 그리드가 오른쪽에 큰 공백을 남기고 쪼그라들어
     보였음 -- input의 넓은 기본 폭에 우연히 얹혀서 가려져 있던 문제였을
     뿐. flex:1 + min-width:0으로 남는 폭을 확실히 다 차지하게 고정. */
  flex:1;
  min-width:0;
  display:grid;
  /* auto-fill이 아니라 고정 4열 -- 컨테이너가 넓어지면 auto-fill은 칸
     너비가 200px보다 넓어질수록 5칸, 6칸까지도 욱여넣는데, 한 줄에
     항상 딱 4개만 나오게 하려면 열 개수 자체를 고정해야 함. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.lot-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.tier-btn{
  flex:none;
  min-width:52px;
  padding:8px 10px;
  font-size:11px;
  /* 티어 미설정 상태는 .btn-outline(theme.css)의 기본 시안색을 그대로
     물려받는데, 이게 하필 tier-color-1과 완전히 같은 색(#3ff2ff)이라
     "아직 안 정함"과 "1티어로 정함"이 구분이 안 됐음(실제로 보고된 버그).
     여기서 중립적인 회색으로 깔아두면, 아래 .tier-color-1~8이 소스 순서상
     나중에 오면서 border-color/color를 다시 덮어써서 실제 티어가 정해지면
     자동으로 그 색이 이긴다. */
  border-color:#4a5a68;
  color:#8fa3b0;
}
.tier-btn:hover{
  background:#4a5a68;
  color:#e6f7ff;
}
/* 티어별 색상 -- 최대 8팀(=최대 8티어)까지 색이 겹치지 않게 8개 고정
   -- .btn-outline(theme.css)의 기본 시안색 위에 이 클래스가 나중에
   로드되는 style.css에서 덮어써서 티어별로 테두리/글자색이 달라짐.
   버튼(호스트 설정 화면의 매물별 티어 버튼)과 티어 설정 모달의 숫자
   버튼 양쪽 다 이 클래스를 씀. */
.tier-color-1{ border-color:#3ff2ff; color:#3ff2ff; }
.tier-color-2{ border-color:#4dffa0; color:#4dffa0; }
.tier-color-3{ border-color:#ffd23f; color:#ffd23f; }
.tier-color-4{ border-color:#c04dff; color:#c04dff; }
.tier-color-5{ border-color:#ff5f7e; color:#ff5f7e; }
.tier-color-6{ border-color:#ff9a3f; color:#ff9a3f; }
.tier-color-7{ border-color:#3f8fff; color:#3f8fff; }
.tier-color-8{ border-color:#a6e22e; color:#a6e22e; }
.tier-color-1:hover, .tier-color-2:hover, .tier-color-3:hover, .tier-color-4:hover,
.tier-color-5:hover, .tier-color-6:hover, .tier-color-7:hover, .tier-color-8:hover{
  color:#04141a;
}
.tier-color-1:hover{ background:#3ff2ff; }
.tier-color-2:hover{ background:#4dffa0; }
.tier-color-3:hover{ background:#ffd23f; }
.tier-color-4:hover{ background:#c04dff; }
.tier-color-5:hover{ background:#ff5f7e; }
.tier-color-6:hover{ background:#ff9a3f; }
.tier-color-7:hover{ background:#3f8fff; }
.tier-color-8:hover{ background:#a6e22e; }

/* 같은 라인에 이미 배정된 티어(모달 안 숫자 버튼) -- .tier-color-N 색상을
   눌러서 회색으로 덮어써야 하므로 클래스 2개짜리 선택자로 우선순위를 올림. */
.tier-modal-buttons button.tier-taken{
  border-color:#3a4750;
  color:#5c6b76;
  cursor:not-allowed;
  opacity:.5;
}
.tier-modal-buttons button.tier-taken:hover{
  background:none;
  color:#5c6b76;
}

/* ---------- 티어 설정 모달 ---------- */
.ta-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,4,10,0.75);
  backdrop-filter:blur(2px);
}
.ta-modal{
  position:relative;
  width:100%;
  max-width:320px;
  padding:22px;
  background:linear-gradient(180deg, rgba(63,242,255,0.1), rgba(4,5,10,0.97));
  border:1px solid rgba(63,242,255,0.25);
  border-radius:8px;
  box-shadow:0 0 40px rgba(0,0,0,0.6);
}
.ta-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.1em;
  color:#fff;
}
.ta-modal-close{
  width:26px;
  height:26px;
  background:none;
  border:none;
  color:#8fb6c9;
  font-size:16px;
  cursor:pointer;
  line-height:1;
}
.ta-modal-close:hover{
  color:var(--cyan);
}
.tier-modal-buttons{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(52px, 1fr));
  gap:8px;
}

/* ---------- 대진표 모달 (결과 화면 "대진 공개"/"대진표 보기") ---------- */
.bracket-modal{
  max-width:520px;
}
/* 칩 5개가 한 줄에 들어가려면 기본 .ta-modal(320px)로는 좁다. */
.sample-picker-modal{
  max-width:480px;
}
.bracket-match-list{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:60vh;
  overflow-y:auto;
  padding-right:4px;
}
.bracket-match-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
}
.bracket-match-team{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.bracket-match-row .bracket-match-team:last-of-type{
  flex-direction:row-reverse;
  text-align:right;
}
.bracket-team-badge{
  flex:none;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(63,242,255,0.12);
  border:1px solid rgba(63,242,255,0.4);
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--cyan);
}
.bracket-team-badge-icon{
  width:20px;
  height:20px;
  object-fit:contain;
}
.bracket-team-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  color:#fff;
}
.bracket-vs{
  flex:none;
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--magenta);
}
.bracket-bye-tag{
  flex:none;
  font-size:12px;
  color:#8fb6c9;
}
/* ---------- 대기실 ---------- */
.room-code-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}
.room-code-display{
  font-family:'Orbitron',sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--cyan);
  text-shadow:0 0 14px rgba(63,242,255,0.6);
}
.team-list{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.team-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  flex-wrap:wrap;
}
.team-row-num{
  flex:none;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  color:var(--cyan-dim);
  width:22px;
}
.team-row-name{
  flex:1;
  min-width:80px;
  font-weight:600;
  color:#fff;
}
.team-row-coins{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  color:var(--warn);
}
.team-row-grant{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
.team-row-empty{
  color:#4a6a78;
  font-style:italic;
}
.team-row-dummy-tag{
  padding:3px 10px;
  border-radius:12px;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--cyan-dim);
  border:1px solid rgba(63,242,255,0.3);
  background:rgba(63,242,255,0.06);
}

.test-mode-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:#8fb6c9;
  cursor:pointer;
}
.test-mode-row input{
  accent-color:var(--cyan);
  width:15px;
  height:15px;
}

/* ---------- 경매 화면 ---------- */
/* 상단 상태 헤더 -- 참고 사이트의 큰 "Ready" 타이틀 자리에 카운트다운을
   크게, 그 아래 작게 몇 번째 매물인지. */
.lot-status-header{
  text-align:center;
  margin-bottom:16px;
}
.auction-timer-big{
  font-family:'Orbitron',sans-serif;
  font-size:44px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 20px rgba(63,242,255,0.6);
  line-height:1.15;
}
.auction-timer-big.urgent{
  color:var(--danger);
  text-shadow:0 0 24px rgba(255,95,126,0.85);
}
.lot-progress-sub{
  margin-top:4px;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.2em;
  color:var(--warn);
}

/* 매물 카드 -- 다른 팀 경매 사이트의 "대기 중" 카드처럼 하나의 큼직한
   박스. 안쪽은 라인 아이콘+라인명(왼쪽) / 매물이름(가운데, 크게) /
   티어(오른쪽) 한 줄. */
.lot-card{
  padding:24px 28px;
  background:linear-gradient(180deg, rgba(63,242,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.3);
  border-radius:10px;
}

/* ---------- 낙찰/유찰 발표 화면 (#auctionCenterMain과 배타적으로 하나만
   보임) ---------- */
.lot-announcement{
  min-height:220px;
  padding:40px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
}
.lot-announcement.sold{
  background:linear-gradient(180deg, rgba(255,210,63,0.12), rgba(255,255,255,0.02));
  border-color:rgba(255,210,63,0.4);
}
/* .lot-announcement는 flex + align-items:center라 자식(.lot-name-row)이
   기본으로는 내용 폭만큼만 차지한다 -- 매물 카드에서 쓰던 grid의
   1fr...1fr 좌우 대칭 트릭이 제대로 동작하려면 전체 폭을 다 차지해야
   하므로 명시적으로 넓힌다. */
.lot-announcement .lot-name-row{
  width:100%;
}
.lot-announcement-result{
  font-family:'Orbitron',sans-serif;
  font-size:26px;
  font-weight:900;
  margin-top:6px;
  color:#8fb6c9;
}
.lot-announcement.sold .lot-announcement-result{
  color:var(--warn);
  text-shadow:0 0 16px rgba(255,210,63,0.6);
}
/* flex + space-between이면 가운데 칸(매물이름)이 "남은 공간"의 가운데로
   정렬되는데, 왼쪽(아이콘+라인명)과 오른쪽(티어 배지)의 실제 폭이 서로
   다르면 그 남은 공간 자체가 좌우 대칭이 아니라서 글씨가 살짝 한쪽으로
   치우쳐 보였다 -- grid로 바꿔서 양 끝 칸을 똑같은 1fr로 강제하면 가운데
   칸은 항상 카드 전체의 진짜 중앙이 된다. */
.lot-name-row{
  display:grid;
  grid-template-columns:1fr minmax(0, auto) 1fr;
  /* center가 아니라 start -- 랭크 미니 배지(.lot-rank-mini)가 티어
     배지 아래 추가되면서 오른쪽 칸(.lot-tier-col)만 유독 키가 커졌다.
     center로 정렬하면 "티어 배지 박스 전체"의 중심이 행의 중심에
     맞춰지는데, 그 박스 안에서 실제 T2 배지 자체는 위쪽 절반에 있어서
     결과적으로 T2가 라인/이름보다 위로 붙어 보이는 문제가 있었음(실제로
     있었던 버그, "라인이랑 티어가 위로 붙어있다"는 피드백). start로
     바꾸면 라인 아이콘/이름/T2 배지가 전부 같은 윗선에서 시작해서
     자연스럽게 나란히 보이고, 그 아래로 늘어지는 랭크 미니 배지/전적
     줄은 각자 알아서 아래로 자란다. */
  align-items:start;
  gap:16px;
}
.lot-name-row-empty{
  display:block;
  text-align:center;
  color:#8fb6c9;
  font-size:15px;
  padding:24px 0;
}
.lot-role-group{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
}
.lot-role-icon{
  width:40px;
  height:40px;
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(63,242,255,0.5));
}
.lot-role-text{
  font-size:16px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--cyan-dim);
}
.lot-name-text{
  justify-self:center;
  min-width:0;
  max-width:100%;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size:32px;
  font-weight:700;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 티어 배지(T2 등)와 그 아래 롤 랭크 미니 배지를 한 칸에 세로로 묶는
   래퍼 -- 그리드 세 번째 칸 자체는 이 래퍼가 차지하고(justify-self:end),
   티어 배지는 더 이상 직접 그리드 아이템이 아니라 이 래퍼의 자식일 뿐. */
.lot-tier-col{
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.lot-tier-badge{
  min-width:44px;
  padding:8px 12px;
  border-radius:6px;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size:15px;
  font-weight:700;
  border:1px solid currentColor;
}
.lot-tier-badge-empty{
  visibility:hidden;
}
/* 롤 랭크 미니 배지(아이콘 + LP) -- "T2 옆에 롤 티어" 요청으로 티어
   배지 바로 아래 붙임. 정확한 티어/구간은 title 툴팁으로만(스크립트에서
   설정) -- 여기선 아이콘이 이미 티어를 보여주므로 점수만 짧게. */
.lot-rank-mini{
  display:flex;
  align-items:center;
  gap:4px;
}
.lot-rank-mini-icon{
  width:24px;
  height:24px;
  object-fit:contain;
}
.lot-rank-mini-lp{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.lot-rank-mini-lp.rank-color-iron{ color:#8a8f94; }
.lot-rank-mini-lp.rank-color-bronze{ color:#b56a3a; }
.lot-rank-mini-lp.rank-color-silver{ color:#adc0cc; }
.lot-rank-mini-lp.rank-color-gold{ color:#e6c15c; }
.lot-rank-mini-lp.rank-color-platinum{ color:#3fd6b8; }
.lot-rank-mini-lp.rank-color-emerald{ color:#3fd67a; }
.lot-rank-mini-lp.rank-color-diamond{ color:#7c9bff; }
.lot-rank-mini-lp.rank-color-master{ color:#c26bf0; }
.lot-rank-mini-lp.rank-color-grandmaster{ color:#ff5f5f; }
.lot-rank-mini-lp.rank-color-challenger{ color:#7ff0ff; }
@media (max-width:640px){
  .lot-name-row{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .lot-name-text{
    font-size:24px;
  }
  /* 한 줄로 쌓일 땐 티어 칸도 오른쪽 고정 대신 다른 줄들처럼 가운데로 --
     그리드 축을 하나로 좁힌 뒤에도 justify-self:end가 그대로 남아있으면
     이 칸만 혼자 오른쪽에 붙어있는 것처럼 보임(실제로 있던, 이번에
     .lot-tier-col을 만들면서 같이 고친 사소한 정렬 어긋남). */
  .lot-tier-col{
    justify-self:center;
    align-items:center;
  }
}
/* 현재 최고가(왼쪽) / 입찰 금액 정하는 UI(오른쪽) -- 세로로 쌓지 않고
   나란히 둬서 한 화면에서 바로 비교되게. */
.bid-split-row{
  margin-top:16px;
  display:flex;
  align-items:stretch;
  gap:16px;
}
/* 팀장으로 참여하지 않은 뷰어(구경만 하는 호스트 등)는 입찰 UI가 아예
   없으니, 오른쪽 칸을 빈 테두리 박스로 남겨두지 않고 통째로 숨기고
   왼쪽 "현재 최고가"만 전체 폭으로 넓힌다. */
.bid-split-row.single .bid-split-controls{
  display:none;
}
.bid-split-row.single .bid-split-current{
  flex:1 1 100%;
}
.bid-split-col{
  flex:1;
  min-width:0;
  padding:18px;
  border-radius:8px;
}
.bid-split-current{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,210,63,0.08);
  border:1px solid rgba(255,210,63,0.3);
}
.bid-split-current .field-label{
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--warn);
  margin:0 0 8px;
}
.current-bid-display{
  font-family:'Orbitron',sans-serif;
  font-size:38px;
  font-weight:700;
  color:var(--warn);
  text-align:center;
}
.bid-split-controls{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(63,242,255,0.18);
}
.bid-split-controls .field-label:first-of-type{
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--cyan);
  margin-top:0;
}
.bid-split-controls #bidPanel{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
/* ---------- 경매 화면 3단 레이아웃 (왼쪽: 팀 현황 / 가운데: 진행 / 오른쪽: 매물 현황) ----------
   이 화면만 .ta-panel의 카드 느낌(테두리/배경/패딩)을 벗기고 뷰포트
   전체 폭으로 펼쳐서, 좌우 사이드바가 화면 가장자리에 붙게 한다(참고
   사이트 스타일). 가운데 진행 영역만 적당한 폭으로 가운데 정렬. */
#auctionPanel{
  max-width:none;
  width:auto;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  background:none;
  border:none;
  border-radius:0;
}
.auction-layout{
  display:flex;
  align-items:flex-start;
  gap:0;
}
.auction-sidebar{
  flex:1 1 300px;
  max-width:360px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 22px;
  max-height:none;
  overflow-y:auto;
  background:rgba(255,255,255,0.015);
}
#auctionTeamsSidebar{
  border-right:1px solid rgba(63,242,255,0.15);
}
#auctionLotsSidebar{
  border-left:1px solid rgba(63,242,255,0.15);
}
.auction-center{
  flex:1 1 auto;
  max-width:860px;
  min-width:0;
  margin:0 auto;
  padding:28px 24px;
}

/* 왼쪽: 팀별 카드 -- 코인 + 라인별로 누구를 뽑았는지. */
.auction-team-card{
  padding:16px 18px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
}
.auction-team-card.mine{
  border-color:rgba(77,255,160,0.5);
  background:rgba(77,255,160,0.05);
}
.auction-team-card.leading{
  border-color:rgba(255,210,63,0.5);
}
.auction-team-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.auction-team-name{
  font-weight:700;
  color:#fff;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.auction-team-coins{
  flex:none;
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--warn);
}
.auction-team-role-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:14px;
  padding:5px 0;
}
.auction-team-role-label{
  flex:none;
  color:var(--cyan-dim);
}
.auction-team-role-value{
  flex:1;
  min-width:0;
  text-align:right;
  color:#c7dae6;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.auction-team-role-value.empty{
  color:#4a6a78;
}

/* 오른쪽: 아직 안 뽑힌 매물 / 유찰 매물, 라인별로. */
.lot-pool-section-title{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  letter-spacing:.1em;
  color:var(--cyan);
  margin-top:6px;
  margin-bottom:2px;
}
.lot-pool-role-group{
  margin-top:8px;
}
.lot-pool-role-label{
  font-size:13px;
  color:var(--cyan-dim);
  margin-bottom:5px;
}
.lot-pool-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.lot-pool-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:5px;
  font-size:14px;
  color:#c7dae6;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
}
.lot-pool-chip.current{
  border-color:var(--cyan);
  box-shadow:0 0 8px rgba(63,242,255,0.4);
}
.lot-pool-chip-tier{
  font-size:12px;
  font-weight:700;
}
.lot-pool-empty{
  font-size:13px;
  color:#4a6a78;
  font-style:italic;
}

@media (max-width:900px){
  .auction-layout{
    flex-direction:column;
  }
  .auction-sidebar{
    flex:none;
    width:100%;
    max-width:none;
    max-height:none;
    border-right:none;
    border-left:none;
    border-bottom:1px solid rgba(63,242,255,0.15);
  }
  .auction-center{
    max-width:none;
  }
  /* 세로로 쌓일 땐 순서를 DOM 순서(팀 현황 -> 진행 중인 매물 -> 안 뽑힌
     매물)가 아니라 "지금 진행 중인 매물"이 먼저 보이게 재배치 -- 스크롤을
     한참 안 해도 타이머/매물 카드/입찰 버튼이 바로 보이게. */
  #auctionTeamsSidebar{ order:2; }
  .auction-center{ order:1; }
  #auctionLotsSidebar{ order:3; }
}
@media (max-width:640px){
  .bid-split-row{
    flex-direction:column;
  }
  /* 화면이 좁으면 볼륨 슬라이더까지 다 넣기 빡빡해서 토글 버튼 위주로
     줄임(슬라이더는 숨기지 않고 살짝 더 좁힘). */
  .sound-controls-fixed{
    top:10px;
    right:10px;
    padding:5px 8px;
  }
  .sound-controls{
    gap:4px;
  }
  .sound-volume-slider{
    width:36px;
  }
}

#bidPanel{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(63,242,255,0.15);
}
/* 호스트가 테스트용으로 참가자로도 참여했을 때 쓰는 입찰 패널 -- 원래
   입찰 패널(시안 테두리)과 헷갈리지 않게 마젠타 계열로 구분. */
.host-captain-panel{
  margin-top:20px;
  padding:16px;
  border:1px solid rgba(192,77,255,0.35);
  border-radius:6px;
  background:rgba(192,77,255,0.05);
}
.host-captain-panel .field-label{
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--magenta);
}
.bid-amount-display{
  font-family:'Orbitron',sans-serif;
  font-size:32px;
  font-weight:700;
  color:#fff;
  text-align:center;
  margin-bottom:14px;
}
.bid-amount-display .slash{
  color:var(--cyan-dim);
  font-weight:400;
  margin:0 4px;
}
.bid-disabled-note{
  text-align:center;
  font-size:12px;
  color:var(--danger);
  margin-top:-6px;
  margin-bottom:14px;
}

/* ---------- 입찰 쿨타임 연출 (안내 문구 대신, 버튼 자체가 어두운 상태
   에서 시계 방향으로 밝아지며 다시 눌리는 걸 보여줌) ---------- */
@property --cooldown-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
#submitBidBtn, #hostCaptainSubmitBidBtn{
  position:relative;
  overflow:hidden;
}
#submitBidBtn::after, #hostCaptainSubmitBidBtn::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  /* 12시 방향(0deg)에서 --cooldown-angle까지는 원래 버튼 색이 그대로
     보이게(투명), 거기서부터 360deg까지는 어둡게 덮는다 -- 애니메이션이
     0deg에서 360deg로 진행되면서 "밝은 부분"이 시계 방향으로 자라나는
     것처럼 보인다. */
  background:conic-gradient(transparent 0deg var(--cooldown-angle), rgba(4,10,16,0.72) var(--cooldown-angle) 360deg);
  opacity:0;
}
#submitBidBtn.cooldown-active::after, #hostCaptainSubmitBidBtn.cooldown-active::after{
  opacity:1;
  animation:bidCooldownWipe var(--cooldown-duration, 500ms) linear forwards;
}
@keyframes bidCooldownWipe{
  from{ --cooldown-angle:0deg; }
  to{ --cooldown-angle:360deg; opacity:0; }
}

/* ---------- 결과 화면 ---------- */
.results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.result-team-card{
  padding:18px;
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
}
.result-team-title{
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-bottom:4px;
}
.result-team-coins{
  font-size:12px;
  color:var(--warn);
  margin-bottom:12px;
}
.result-lot-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#c7dae6;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.result-lot-row:last-child{
  border-bottom:none;
}
.result-lot-price{
  color:var(--cyan);
}
.result-lot-role{
  color:var(--cyan-dim);
  font-size:11px;
  margin-right:4px;
}

/* ---------- 사운드 볼륨/음소거 컨트롤 (마피아/뱅과 동일 클래스명) ----------
   예전엔 오른쪽 사이드바 맨 위에 얹혀있었는데, 모바일에서 세로로 쌓이면
   한참 내려야 나와서 "맨 위쪽으로" 요청 -- 뷰포트 기준 고정 위치로 빼서
   화면 크기/스크롤 위치와 무관하게 항상 우상단에 떠 있게 함. */
.sound-controls-fixed{
  position:fixed;
  top:14px;
  right:14px;
  z-index:50;
  padding:6px 10px;
  background:rgba(4,8,14,0.85);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:20px;
  backdrop-filter:blur(4px);
}
.sound-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.sound-toggle-btn{
  border:1px solid rgba(63,242,255,0.3);
  background:rgba(255,255,255,0.02);
  border-radius:6px;
  width:26px;
  height:26px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:all .15s ease;
}
.sound-toggle-btn:hover{
  border-color:var(--cyan);
}
.sound-toggle-btn.muted{
  opacity:.5;
}
.sound-volume-slider{
  width:52px;
  accent-color:var(--cyan);
  cursor:pointer;
}

@media (max-width:480px){
  .ta-panel{padding:16px 16px;}
  .join-form{flex-direction:column;}
  .lot-role-group-rows{grid-template-columns:1fr;}
  .lot-name-text{font-size:20px;}
  .lot-record-sub{font-size:16px;}
  .auction-timer-big{font-size:34px;}
}

/* ---------- 매물 샘플: 관리 페이지(samples-admin.html) ---------- */
.samples-admin-title{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  letter-spacing:.08em;
  color:var(--cyan);
  margin:0 0 20px;
}
.sample-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sample-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr auto;
  gap:8px;
  align-items:center;
}
.sample-row-header{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cyan-dim);
  padding:0 12px;
}
.sample-num-input{
  text-align:center;
}
.sample-delete-btn{
  flex:none;
  padding:8px 10px;
  font-size:11px;
}
/* 매물 한 행 = 이름/전적 줄(.sample-row, 기존 그리드) + 그 아래 라이엇
   연동 줄(.sample-riot-row) 묶음. 행끼리 구분선으로 나눠서 어디까지가
   한 매물인지 한눈에 보이게. */
.sample-row-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(63,242,255,0.12);
}
.sample-row-wrap:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.sample-riot-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:2px;
}
.sample-riot-name-input{
  flex:1;
  min-width:0;
  padding:6px 10px;
  font-size:12px;
}
.sample-riot-hash{
  flex:none;
  color:rgba(255,255,255,0.4);
  font-size:12px;
}
.sample-riot-tag-input{
  flex:none;
  width:70px;
  padding:6px 10px;
  font-size:12px;
}
.sample-riot-row .btn{
  flex:none;
  padding:6px 10px;
  font-size:11px;
}
.sample-rank-display{
  flex:none;
  min-width:130px;
  font-size:12px;
  font-weight:600;
  color:var(--cyan-dim);
  white-space:nowrap;
}
.sample-rank-display.sample-rank-empty{
  color:rgba(255,255,255,0.35);
  font-weight:400;
}
.sample-rank-display.sample-rank-error{
  color:var(--danger);
}

/* ---------- 매물 샘플: 호스트 설정 화면의 "매물 선택" 버튼 + 선택 모달 ----------
   직접 타이핑하는 입력칸이 없어져서(요청사항) 이 버튼 하나가 그 자리를
   그대로 대신한다 -- .text-input과 같은 크기/여백으로 만들되 버튼이라
   가운데 텍스트가 아니라 왼쪽 정렬 + 긴 이름은 말줄임. */
.lot-select-btn{
  flex:1;
  min-width:0;
  text-align:left;
  padding:8px 10px;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-color:#4a5a68;
  color:#8fa3b0;
}
.lot-select-btn:hover{
  border-color:var(--cyan);
  color:#e6f7ff;
}
/* 실제로 매물을 고른 상태 -- 미선택(회색 placeholder)과 구분되게. */
.lot-select-btn.lot-select-btn-filled{
  border-color:rgba(63,242,255,0.6);
  background:rgba(63,242,255,0.1);
  color:#fff;
}
/* 초성별로 줄을 나눠서 보여준다("ㄱ 한 줄, ㄴ 한 줄...", 요청사항) --
   전체 목록이 세로로 스크롤되고, 초성 하나당 한 그룹(라벨+칩들)이며 그
   그룹 안에서 이름 칩들은 자연스럽게 줄바꿈된다. */
.sample-picker-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:min(60vh, 420px);
  overflow-y:auto;
}
.sample-picker-empty{
  text-align:center;
  color:rgba(255,255,255,0.5);
  font-size:13px;
  padding:20px 0;
}
.sample-picker-group{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.sample-picker-group-label{
  flex:none;
  width:22px;
  padding-top:8px;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--cyan-dim);
}
.sample-picker-group-chips{
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sample-picker-item{
  padding:8px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(63,242,255,0.18);
  border-radius:20px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:all .15s ease;
}
.sample-picker-item:hover{
  border-color:var(--cyan);
  background:rgba(63,242,255,0.08);
}

/* ---------- 매물 샘플: 경매 화면의 전적/우승횟수 표시 ----------
   기존 라인 아이콘/매물이름/티어 한 줄(buildLotNameRow) 바로 아래에,
   매물이름과 같은 가운데 정렬로 작게 붙인다 -- 샘플에서 고르지 않은
   매물(record 없음)엔 아예 렌더링하지 않아서 레이아웃엔 영향 없음. */
.lot-record-sub{
  grid-column:1 / -1;
  text-align:center;
  font-size:19px;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,0.85);
  margin-top:8px;
}
.lot-record-sub .lot-record-champ{
  color:var(--warn);
}