/* ==========================================================================
   Pit Market — 보드게임 디자인 시스템
   목표: "웹앱"이 아니라 "책상 위에 펼쳐진 보드게임"처럼 보일 것.
   종이·펠트·나무 질감, 인쇄된 카드, 손으로 찍은 도장 같은 배지를 쓴다.
   ========================================================================== */

:root {
  /* 종이 */
  --paper: #f3ebdd;
  --paper-2: #e8dcc8;
  --paper-edge: #d3c3a6;
  --ink: #2a2320;
  --ink-soft: #6b5d51;
  --ink-faint: #9a8b7c;

  /* 펠트 테이블 (강사 대시보드) */
  --felt: #1d4f43;
  --felt-dark: #14372f;
  --felt-line: #2f6b5c;

  /* 나무 프레임 */
  --wood: #7a5334;
  --wood-dark: #5a3b24;

  /* 역할 */
  --buyer: #1f6f9c;
  --buyer-soft: #d7e9f4;
  --seller: #c2542a;
  --seller-soft: #f7e0d3;

  /* 강조 */
  --gold: #c8952c;
  --good: #2f7d5c;
  --bad: #b3402f;

  --r-card: 14px;
  --r-chip: 999px;
  --shadow-card: 0 2px 0 var(--paper-edge), 0 8px 20px rgba(40, 30, 20, .18);
  --shadow-lift: 0 3px 0 var(--paper-edge), 0 14px 30px rgba(40, 30, 20, .26);
}

/* 종이 결 — 이미지 없이 CSS만으로 인쇄물 질감을 만든다 */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  border-radius: inherit;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  /* Pretendard 는 /fonts/pretendard.css 가 실어 준다.
     뒤의 목록은 폰트가 도착하기 전 몇백 ms 동안만 쓰인다.
     'Noto Sans KR' 이 없으면 안드로이드가 한글 없는 Roboto 로 떨어져 글자가 튄다. */
  font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
               system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* 한글은 기본적으로 «글자 단위» 로 줄이 바뀐다 — 「최민준」 이 「최 / 민준」,
     「3라운드 순위」 가 「3라운 / 드 순위」 로 쪼개진다. 낱말 단위로만 끊고,
     정말 자리가 없을 때만(긴 영문·숫자) 어쩔 수 없이 끊는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: 'tnum';
}

.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tiny { font-size: 12px; }
.small { font-size: 13.5px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }

/* ---------- 버튼: 두꺼운 테두리 + 아래 그림자 = 보드게임 토큰 느낌 ---------- */
button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .06s ease, box-shadow .06s ease, background .15s ease;
}
button:hover:not(:disabled) { background: #f0e6d4; }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: 0 3px 0 rgba(42,35,32,.3); }

button.primary { background: var(--gold); color: #2a2320; }
button.buy { background: var(--buyer); color: #fff; }
button.sell { background: var(--seller); color: #fff; }
button.go { background: var(--good); color: #fff; }
button.no { background: var(--bad); color: #fff; }
button.flat { box-shadow: none; border-width: 1.5px; background: transparent; font-weight: 700; }
button.big { padding: 18px; font-size: 18px; border-radius: 14px; }

input, select {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: #fffaf1;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
input:focus, select:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
/* 패널 머리에 얹는 작은 선택기 — 기본 select 는 width:100% 라 제목을 밀어낸다 */
select.mini {
  width: auto;
  font-size: 13px;
  padding: 5px 26px 5px 10px;
  border-width: 1.5px;
  border-radius: 8px;
}
label.field { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 5px; letter-spacing: .3px; }

/* ---------- 카드 ---------- */
.sheet {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.sheet.tight { padding: 12px; }

/* 도장 배지 */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 2px solid currentColor;
  border-radius: var(--r-chip);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
}
.stamp.buyer { color: var(--buyer); background: var(--buyer-soft); }
.stamp.seller { color: var(--seller); background: var(--seller-soft); }
.stamp.live { color: var(--good); background: #ddefe5; }
.stamp.wait { color: var(--ink-soft); background: var(--paper-2); }
.stamp.alert { color: var(--bad); background: #f7ded9; }

/* ==========================================================================
   참가자 (모바일 우선)
   ========================================================================== */

.play {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 14px calc(28px + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 폰이 기본. 태블릿/노트북에서는 화면을 넓게 쓰고 거래 화면을 2단으로 편다 */
.cols { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 768px) {
  .play { max-width: 720px; padding: 20px 24px 40px; }
  .mycard .num { font-size: 72px; }
  .mycode .n { font-size: 44px; }
}

@media (min-width: 1024px) {
  .play { max-width: 960px; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; }
  .cols > .col { gap: 16px; }
}

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}

/* 시세 티커 — 실물 피트마켓에서 고함으로 퍼지는 가격 정보를 대신한다 */
.ticker {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #1e1a17;
  color: #ffd98a;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.ticker .lane { display: inline-block; animation: slide 26s linear infinite; }
.ticker .px { margin-right: 18px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 내 카드 — 이 게임의 주인공 */
.mycard {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
/* 역할 카드 배경 — 나노바나나 생성 일러스트. 중앙이 비어 있어 숫자가 그대로 얹힌다 */
.mycard.buyer {
  background: linear-gradient(170deg, rgba(215,233,244,.35), rgba(255,255,255,.15)),
    url('/assets/card_buyer.jpg') center 38% / cover no-repeat, var(--buyer-soft);
}
.mycard.seller {
  background: linear-gradient(170deg, rgba(247,224,211,.35), rgba(255,255,255,.15)),
    url('/assets/card_seller.jpg') center 38% / cover no-repeat, var(--seller-soft);
}
.mycard .num, .mycard .role, .mycard .rule { text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 0 14px rgba(255,255,255,.6); }
.mycard .role { font-size: 13px; font-weight: 900; letter-spacing: 2px; }
.mycard .num {
  font-size: 62px; font-weight: 900; line-height: 1; letter-spacing: -2px; margin: 6px 0 2px;
}
.mycard .unit { font-size: 22px; font-weight: 800; }
.mycard .rule {
  margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--paper-edge);
  font-size: 14px; font-weight: 800;
}

/* 내 거래코드 — 상대에게 보여주는 번호 */
.mycode {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: #1e1a17; color: var(--paper);
  border: 2px solid var(--ink); border-radius: 14px;
}
.mycode .n { font-size: 38px; font-weight: 900; letter-spacing: 8px; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px;
  padding: 10px; text-align: center;
}
.stat .k { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.stat .v { font-size: 24px; font-weight: 900; }

/* 거래 제안 팝업 */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(30, 24, 18, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal[hidden] { display: none; }
.modal .box {
  width: 100%; max-width: 420px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  padding: 22px; text-align: center;
  animation: pop .18s ease-out;
  /* 진행자 로그인 박스는 로고까지 얹혀 1366×768 노트북에서 버튼이 화면 밖으로 나간다 */
  max-height: 92vh; overflow-y: auto;
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.bigprice { font-size: 52px; font-weight: 900; letter-spacing: -2px; line-height: 1.05; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: 90vw; z-index: 200;
  background: #1e1a17; color: var(--paper);
  border-radius: 12px; padding: 12px 18px;
  font-size: 14px; font-weight: 800;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.toast.show { opacity: 1; }
.toast.bad { background: var(--bad); }

/* 결과 시트 */
.result { border: 3px solid var(--ink); border-radius: 18px; padding: 22px; text-align: center; }
.result.win { background: linear-gradient(170deg, #ddefe5, #fff); }
.result.zero { background: linear-gradient(170deg, var(--paper-2), #fff); }

.histrow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px dashed var(--paper-edge); font-size: 13px; font-weight: 700;
}
.histrow:last-child { border-bottom: none; }

/* ==========================================================================
   진행자 대시보드 (펠트 테이블)
   ========================================================================== */

body.host-body { background: var(--felt); }

.board {
  min-height: 100vh;
  padding: 14px;
  display: grid;
  /* 두 열. 참가자·누적 순위는 가운데 첫 탭으로 들어갔다 —
     세 열이면 가운데가 좁아 프로젝터에 띄웠을 때 글씨가 작아진다 */
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  gap: 14px;
  /* 실제 보드게임판 일러스트(초록 펠트 + 나무 프레임)를 테이블 표면으로 깐다 */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
    url('/assets/board_felt.jpg') center / cover no-repeat fixed,
    var(--felt);
}

.board > header {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--wood), var(--wood-dark));
  border: 3px solid #3d2716; border-radius: 14px;
  padding: 12px 18px; color: #f6e7d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .35);
}
.board h1 { font-size: 19px; margin: 0; letter-spacing: -.3px; }

.roomcode {
  font-size: 40px; font-weight: 900; letter-spacing: 10px; color: #ffdf9e;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.clock { font-size: 34px; font-weight: 900; }

.side { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: calc(100vh - 120px); }
.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.panel {
  position: relative;
  background: var(--paper);
  border: 3px solid #17332c;
  border-radius: var(--r-card);
  padding: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.panel h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 900;
  letter-spacing: 1.2px; color: var(--ink-soft); text-transform: uppercase;
}

.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kpi { background: var(--paper); border: 3px solid #17332c; border-radius: 12px; padding: 10px 12px; }
.kpi .k { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.kpi .v { font-size: 26px; font-weight: 900; line-height: 1.15; }

#chart {
  width: 100%; flex: 1; min-height: 320px;
  background: var(--paper); border: 3px solid #17332c; border-radius: var(--r-card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.tabs { display: flex; gap: 8px; }
.tabs button { flex: 1; padding: 10px; font-size: 14px; }
.tabs button[aria-selected='true'] { background: var(--gold); }

.plist { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; }
.prow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px; font-size: 13px; font-weight: 700;
  background: var(--paper-2); border: 1.5px solid var(--paper-edge);
}
.prow.done { opacity: .55; }
.prow.off { opacity: .38; font-style: italic; }
.pin { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pin.buyer { background: var(--buyer); }
.pin.seller { background: var(--seller); }
/* 역할 배정 전에는 role 이 없다. 색을 안 주면 9px 짜리 투명한 구멍이 남는다 */
.pin.none { background: var(--ink-faint); }

/* 팀 표식 — 진행자 로스터·참가자 목록·결과 화면이 함께 쓴다 */
.tchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 900; white-space: nowrap;
}

/* 눌린 상태 표시 — 이벤트 버튼(.evbtn)이 쓰던 방식을 모드·비율 선택도 함께 쓴다 */
button.flat[aria-pressed='true'] { background: var(--gold); border-width: 2px; }

/* 팀 선택 — minmax 하나로 2팀(큼직한 버튼 2개)과 30팀(4열 스크롤)을 모두 감당한다.
   30팀일 때 84×56px 은 iOS 권장 터치 타깃(44pt)을 넘는다. */
.teamgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; max-height: 46vh; overflow-y: auto;
}
.teambtn {
  padding: 12px 6px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.teambtn[aria-pressed='true'] { background: var(--gold); box-shadow: 0 0 0 3px var(--ink) inset; }
.teambtn .n { font-size: 20px; font-weight: 900; line-height: 1; }
.teambtn .c { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.teambtn.thin .c { color: var(--good); }

.ratiogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ratiogrid button { padding: 8px 4px; font-size: 12px; }

.evgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evbtn {
  padding: 8px; font-size: 13px;
  display: flex; align-items: center; gap: 7px; justify-content: flex-start;
}
.evbtn[aria-pressed='true'] { background: var(--gold); }
.evicon {
  width: 26px; height: 26px; object-fit: cover;
  border: 1.5px solid var(--ink); border-radius: 7px; background: #fffaf1;
  flex: 0 0 auto;
}

.callout {
  background: #fff6df; border: 2px dashed var(--gold); border-radius: 12px;
  padding: 10px 12px; font-size: 13px; font-weight: 800; color: #6b4e12;
}

/* 디브리핑 카드 */
.dbcard {
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-card);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-card);
}
.dbcard h4 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.4px; }
.dbcard .lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.dbcard ol { margin: 0 0 14px; padding-left: 20px; }
.dbcard li { font-size: 16px; font-weight: 800; margin-bottom: 8px; line-height: 1.45; }
.dbcard .msg {
  background: #1e1a17; color: var(--paper); border-radius: 10px;
  padding: 12px 14px; font-size: 14.5px; font-weight: 700; line-height: 1.5;
}
.factchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.factchip {
  background: var(--paper-2); border: 1.5px solid var(--paper-edge); border-radius: var(--r-chip);
  padding: 4px 10px; font-size: 12px; font-weight: 800;
}
/* 여러 라운드가 한 카드로 묶일 때의 「2라운드」 머리표.
   flex-basis:100% 로 줄을 끊지 않으면 라운드 구분이 칩 사이에 섞여 흘러가
   어디까지가 2라운드 숫자인지 읽을 수 없다 */
.factchips .factsplit {
  flex-basis: 100%; margin: 8px 0 2px; font-size: 12px; font-weight: 900;
  color: var(--ink-soft); letter-spacing: .02em;
}
.factchips .factsplit:first-child { margin-top: 0; }

/* 열 이름 밑의 한 줄 설명 — 「편차」 같은 용어를 강사가 그대로 읽어 줄 수 있게 */
.colhint { display: block; font-size: 10px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }

/* 표 밑 해설 */
.readbox { margin-top: 14px; padding: 12px 14px; background: var(--paper-2);
  border: 1.5px solid var(--paper-edge); border-radius: var(--r-chip); }
.readtitle { font-size: 13px; font-weight: 900; margin-bottom: 8px; }
.readbox ul { margin: 0; padding-left: 18px; }
.readbox li { font-size: 12.5px; line-height: 1.75; margin-bottom: 6px; }
.readbox li:last-child { margin-bottom: 0; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 8px 6px; text-align: right; border-bottom: 1.5px solid var(--paper-edge); }
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid th { font-size: 11px; color: var(--ink-soft); font-weight: 900; }
table.grid tr.hi td { background: #fff6df; }

.hide { display: none !important; }

@media (max-width: 1180px) {
  .board { grid-template-columns: 1fr; }
  .side { max-height: none; }
  #chart { min-height: 300px; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   진행자 가운데 열 — 강의장 프로젝터 가독성
   왼쪽 컨트롤은 진행자 혼자 보므로 그대로 두고, 학습자에게 «보여 주는»
   가운데 열만 키운다. 대신 여백을 줄여 한 화면에 담기는 양을 지킨다.
   ══════════════════════════════════════════════════════════════ */
body.host-body main.stage { font-size: 17px; }
body.host-body main.stage .tiny  { font-size: 14.5px; }
body.host-body main.stage .small { font-size: 17px; }
body.host-body main.stage .panel { padding: 12px; }
body.host-body main.stage .panel h3 { font-size: 16px; letter-spacing: .5px; margin-bottom: 8px; }
body.host-body main.stage .tabs button { font-size: 17px; padding: 11px 6px; }
body.host-body main.stage .kpi { padding: 8px 10px; }
body.host-body main.stage .kpi .k { font-size: 14px; }
body.host-body main.stage .kpi .v { font-size: 33px; }
body.host-body main.stage .prow { font-size: 17px; padding: 8px 10px; gap: 9px; }
body.host-body main.stage .tchip { font-size: 15px; padding: 3px 10px; }
body.host-body main.stage .factchip { font-size: 15px; padding: 5px 12px; }
body.host-body main.stage .histrow { font-size: 17px; padding: 8px 10px; }
body.host-body main.stage .readtitle { font-size: 17px; }
body.host-body main.stage .readbox li { font-size: 16px; line-height: 1.6; margin-bottom: 5px; }
body.host-body main.stage .dbcard h4 { font-size: 25px; }
body.host-body main.stage .dbcard .lead { font-size: 17px; margin-bottom: 9px; }
body.host-body main.stage .dbcard li { font-size: 19px; margin-bottom: 6px; }
body.host-body main.stage .plist { gap: 4px; }

/* 표 — 열이 적으면 auto 레이아웃이 첫 칸에 남는 폭을 몰아줘 팀 이름 옆이 휑해진다.
   fixed 로 고르게 나누고 여백을 줄인다 */
body.host-body main.stage table.grid,
body.host-body main.stage table.rtable { font-size: 16px; table-layout: fixed; width: 100%; }
body.host-body main.stage table.grid th,
body.host-body main.stage table.rtable th { font-size: 14px; padding: 6px 8px; }
body.host-body main.stage table.grid td,
body.host-body main.stage table.rtable td { padding: 6px 8px; }
body.host-body main.stage table.rtable td.who,
body.host-body main.stage table.rtable th.who { width: 148px; }

/* 참가자 · 누적 순위 탭 — 두 패널을 나란히 */
.peoplegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1180px) { .peoplegrid { grid-template-columns: 1fr; } }

/* ── 체결 기록 크게 보기 ── */
.modal .box.logbox {
  max-width: min(1240px, 96vw); width: 96vw;
  max-height: 92vh; padding: 16px 18px; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.logbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logbar .grow { flex: 1; }
.logteams { display: flex; flex-wrap: wrap; gap: 8px; }
.logteams .lt {
  border: 2px solid var(--paper-edge); border-radius: 10px;
  padding: 6px 12px; background: var(--paper-2); font-weight: 800;
  display: flex; align-items: baseline; gap: 8px; font-size: 15px;
}
.logteams .lt .sum { font-size: 19px; font-weight: 900; }
.logscroll { overflow: auto; flex: 1; min-height: 0; }
.logtable { width: 100%; border-collapse: collapse; font-size: 21px; font-weight: 800; }
.logtable thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ink); color: var(--paper);
  font-size: 16px; font-weight: 900; letter-spacing: .5px;
  padding: 10px 12px; text-align: left; white-space: nowrap;
}
.logtable thead th.r, .logtable td.r { text-align: right; }
.logtable td { padding: 9px 12px; border-bottom: 1.5px dashed var(--paper-edge); white-space: nowrap; }
.logtable tbody tr:nth-child(even) { background: var(--paper-2); }
.logtable .tchip { font-size: 15px; }

/* «2팀 홍길동» — 배지와 이름이 한 덩어리로 붙어 다닌다 */
.whowrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.whowrap .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 실시간 시장 그래프 툴팁 ── */
.chartwrap { position: relative; flex: 1; display: flex; min-height: 320px; }
.chartwrap #chart { flex: 1; }
.charttip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: var(--paper);
  border-radius: 10px; padding: 9px 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  font-size: 15px; font-weight: 800; line-height: 1.45; white-space: nowrap;
}
.charttip[hidden] { display: none; }
.charttip .tp { font-size: 19px; font-weight: 900; margin-bottom: 4px; }
.charttip .tr { display: flex; align-items: center; gap: 7px; }
.charttip .lb {
  font-size: 12px; font-weight: 900; border-radius: 5px; padding: 1px 6px; color: #fff;
}
.charttip .lb.sell { background: var(--seller); }
.charttip .lb.buy  { background: var(--buyer); }
.charttip .muted { color: #b9ada0; }
/* 라운드별 팀 성적 — 열이 적어 auto 레이아웃이면 첫 칸에 여백이 몰린다 */
table.rtable { width: 100%; border-collapse: collapse; }
table.rtable thead tr { border-bottom: 2px solid var(--paper-edge); }
table.rtable tbody tr { border-bottom: 1px dashed var(--paper-edge); }
table.rtable th { text-align: right; }
table.rtable th.who, table.rtable td.who { text-align: left; }
table.rtable td { text-align: right; }

/* 금액은 자릿수가 늘어난다 (4R 은 300,000원). 고정 폭을 주면 두 줄로 접혀
   줄 높이가 들쭉날쭉해진다 — 최소 폭만 주고 절대 접지 않는다 */
.histrow .price { min-width: 104px; white-space: nowrap; flex: 0 0 auto; }
.teamsub { min-width: 212px; white-space: nowrap; flex: 0 0 auto; }
/* 순위표 오른쪽 정산 칸 — 「57,000원 체결」의 '체결' 이 세로로 쪼개졌다.
   글자를 3단계 키운 뒤 고정 폭 88/96px 로는 6자리 금액이 들어가지 않는다 */
.prow .settle { min-width: 126px; white-space: nowrap; text-align: right; flex: 0 0 auto; }
.prow .cumstat { min-width: 148px; white-space: nowrap; text-align: right; flex: 0 0 auto; }

/* 라운드 비교 탭 — 빔프로젝터로 학습자와 «함께 읽는» 표라서 다른 탭보다 더 크게 잡는다.
   진행자 기본(표 16 / 열이름 14 / 해설 16)에서 세 단계씩 올린다. */
body.host-body main.stage #tabRounds h3 { font-size: 26px; }
body.host-body main.stage #tabRounds table.grid { font-size: 22px; }
body.host-body main.stage #tabRounds table.grid th { font-size: 19px; padding: 9px 10px; }
body.host-body main.stage #tabRounds table.grid td { padding: 11px 10px; }
body.host-body main.stage #tabRounds .colhint { font-size: 14px; margin-top: 3px; }
body.host-body main.stage #tabRounds .readtitle { font-size: 23px; margin-bottom: 11px; }
body.host-body main.stage #tabRounds .readbox li { font-size: 21px; line-height: 1.62; margin-bottom: 9px; }
body.host-body main.stage #tabRounds .readbox { padding: 16px 20px; }

/* 팀별 개인 순위 — 가로 3팀씩. 7~12팀이면 세로로 쌓였을 때 스크롤이 너무 길다.
   (학습자 팀 선택 격자 .teamgrid 와 다른 것이다 — 이름을 겹치지 않게 둔다) */
.teamcols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.teamcols > details { align-self: start; }
.teamcols .prow .settle,
.teamcols .prow .cumstat { min-width: 0; }
@media (max-width: 1500px) { .teamcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .teamcols { grid-template-columns: 1fr; } }

/* 「라운드별 팀 성적」 표만 유독 작아 다른 블록과 따로 놀았다 — 눈높이를 맞춘다. */
body.host-body main.stage #tabResults table.rtable { font-size: 20px; }
body.host-body main.stage #tabResults table.rtable th { font-size: 16px; padding: 8px; }
body.host-body main.stage #tabResults table.rtable td { padding: 9px 8px; }
body.host-body main.stage #tabResults table.rtable .tiny { font-size: 13px; }

/* 학습자 폰의 결과 정렬 — 손가락으로 누르는 것이라 44px 터치 타깃을 지킨다 */
.sortsel {
  font: inherit; font-size: 13px; font-weight: 800;
  padding: 7px 10px; min-height: 36px;
  border: 2px solid var(--paper-edge); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}

/* 라운드별 개인 순위 — 마친 라운드 수만큼 열을 만든다(1~4열).
   라운드가 늘수록 열이 좁아지므로 좁은 화면에서는 2열·1열로 접는다. */
.roundcols {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.roundcols > .panel { align-self: start; min-width: 0; }
.roundcols .prow { gap: 6px; }
.roundcols .prow .settle { min-width: 0; }
/* 열이 3~4개면 한 칸이 좁아 이름이 「참가자…」 로 잘린다.
   체결가는 「체결 기록」 에서 볼 수 있지만 이름은 여기서만 읽으므로 이름을 살린다. */
.roundcols.n3 .prow .settle,
.roundcols.n4 .prow .settle { display: none; }
.roundcols .prow .whowrap { min-width: 0; }
@media (max-width: 1500px) { .roundcols { grid-template-columns: repeat(min(var(--n, 1), 2), minmax(0, 1fr)); } }
@media (max-width: 1000px) { .roundcols { grid-template-columns: 1fr; } }

/* 팀 순위 막대 — 마우스를 올리면 1인당 평균과 합계를 함께 보여 준다.
   이 블록은 1.5초마다 다시 그려지므로 JS 리스너 대신 CSS 로만 만든다. */
.teamrow { border-radius: 8px; transition: background 120ms ease; }
.teamrow:hover { background: var(--paper-2); }

.tbar {
  position: relative;
  height: 14px;
  background: var(--paper-2);
  border-radius: 7px;
  overflow: visible;          /* 말풍선이 막대 밖으로 나와야 한다 */
  cursor: default;
  outline: none;
}
.tbar .fill {
  display: block; height: 100%; border-radius: 7px;
  transition: width 260ms ease, filter 120ms ease;
}
.tbar:hover .fill,
.tbar:focus-visible .fill { filter: brightness(1.18) saturate(1.15); }
.tbar:focus-visible { box-shadow: 0 0 0 3px var(--gold); }

.tbar::after {
  content: attr(data-tip);
  white-space: pre-line;      /* 
 을 줄바꿈으로 읽는다 */
  position: absolute;
  /* 막대가 끝나는 지점(--w) 바로 옆, 막대와 같은 높이에 세운다 */
  top: 50%;
  left: calc(var(--w, 0%) + 12px);
  transform: translateY(-50%);
  z-index: 40;
  padding: 9px 13px;
  background: var(--ink); color: var(--paper);
  border-radius: 10px;
  font-size: 13px; font-weight: 800; line-height: 1.55;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden;
  transition: opacity 120ms ease;
  pointer-events: none;
}
/* 막대가 길면 오른쪽으로 넘치므로 끝점 안쪽으로 접어 넣는다 */
.tbar.tipin::after {
  left: auto;
  right: calc(100% - var(--w, 100%) + 12px);
  text-align: right;
}
.tbar:hover::after,
.tbar:focus-visible::after { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .tbar .fill, .teamrow, .tbar::after { transition: none; }
}

/* 등수 칸 — 「1위」 와 「10위」, 「공동 12위」 는 폭이 달라
   고정하지 않으면 두 자리부터 이름이 오른쪽으로 밀린다. */
.prow > b:first-child,
.teamrow > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 개인 누적 순위 표 — 「1위 · 12팀 · 최민준」 과 「+123,000」 은 줄이 바뀌면 안 된다.
   라운드가 4개고 팀이 12개면 고정폭으로는 어떤 값을 줘도 누군가는 눌린다.
   그래서 칸을 «내용 크기» 로 잡고, 넘치면 표만 가로로 밀어 본다
   (감싼 상자에 overflow:auto 가 이미 걸려 있다 — 페이지는 안 밀린다). */
body.host-body main.stage table.rtable.people { table-layout: auto; }
body.host-body main.stage table.rtable.people th,
body.host-body main.stage table.rtable.people td { white-space: nowrap; }
body.host-body main.stage table.rtable.people td.who,
body.host-body main.stage table.rtable.people th.who { width: auto; min-width: 220px; }

/* 폰의 결과 제목 옆 정렬 칸 — 칸이 제목을 밀어 「🏆 개인 누 / 적 순위」 가 된다.
   제목이 먼저 자리를 갖고, 정렬 칸은 남는 만큼만 쓴다. */
.sheet .row > b:first-child { flex: 1 1 auto; min-width: 0; }
.sortsel { flex: 0 0 auto; max-width: 46%; }

/* 손익 칸 — 70px 고정이면 「+123,000」 이 안 들어가 두 줄이 된다.
   4라운드(스마트워치)는 30만원대까지 가므로 자릿수가 계속 는다. */
.prow .pf, .row > .pf {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: right;
  white-space: nowrap;
}