/* 기록 허브 (records.js) — rec-* 클래스. 승인 시안 kit.css · S1 · S4 · S6 · S9 규칙을 옮겼다.
   시안 전용 규칙(.mock-*, #mockLayer, .s2-lock)과 시안 데이터는 옮기지 않는다 (SPEC §4.7).
   토큰은 :root 라 테이블 화면(게임 안 레인지 탭)에서도 쓴다. --cocoa-* 는 cocoa-theme.css. */
:root {
  --rec-jam: #e4572e;
  --rec-raise: #f2b53a;
  --rec-limp: #7cb860;
  --rec-fold: #3a2f27;
  --rec-fold-text: #a8957a;
  --rec-fold-fill: #5a4a3c;     /* 비교 격자 '내가 폴드' 채움 (S3) */
  --rec-chart-line: #ffe680;    /* 비교 격자 차트 진입 범위 테두리 (S3) */
  --rec-unseen: #221b14;        /* 비교 격자 받은 적 없음 */
  --rec-sel: #fff3e0;
  --rec-cheese: linear-gradient(180deg, #f5bb45, #d99427);   /* = .ranking-subtab.active */
  --rec-cta: linear-gradient(180deg, #ffd76a, #f5b52e);      /* = .next-game-cta */
  --rec-ink: #241703;
  --rec-pos: #6fcf8e;
  --rec-neg: #ff8a70;
  --rec-font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --rec-display: "Jua", sans-serif;
}

/* ── 허브 틀 ─────────────────────────────────────────────────────────────── */
.rec-root { min-width: 0; font-family: var(--rec-font); }
.rec-sr-status {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lobby-feature-view-header h2 .rec-title-icon { margin-right: 2px; }
.rec-subtabs.ranking-subtabs { margin-bottom: 8px; }
.rec-subtabs .ranking-subtab { font-family: inherit; white-space: nowrap; min-width: 0; }
.rec-subtabs .ranking-subtab:focus-visible { outline: 2px solid #ffe16f; outline-offset: 2px; }
.rec-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rec-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; min-width: 0; }
.rec-filter-row > .rec-chip-row { flex: 1 1 auto; }
/* 기간 칩 + (종류 ▾ · 정렬 ▾): 좁은 화면에서는 오른쪽 묶음이 다음 줄로 내려간다 (가로 넘침 0) */
.rec-filters { flex-wrap: wrap; row-gap: 6px; }
.rec-filters > .rec-period { flex: 0 0 auto; }
.rec-filter-end { display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; }

/* ── 칩 (기간·스택·자리) ─────────────────────────────────────────────────── */
.rec-chip-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rec-chip-row.is-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex-wrap: nowrap; }
.rec-chip-row.is-scroll::-webkit-scrollbar { display: none; }
.rec-chip-row.is-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  padding-inline: 2px;
}
.rec-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 30px;
  min-width: 30px;
  padding: 0 11px;
  border-radius: 15px;
  border: 1px solid var(--cocoa-border);
  background: var(--cocoa-panel);
  color: var(--cocoa-muted);
  font-family: var(--rec-font);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rec-chip.is-on {
  border-color: #f0c95c;
  background: var(--rec-cheese);
  color: var(--rec-ink);
  box-shadow: 0 0 0 1px rgba(255, 224, 133, 0.25) inset;
}
.rec-chip.is-locked, .rec-chip:disabled { opacity: .45; cursor: default; }
.rec-chip.is-dim { opacity: .5; }
.rec-chip.is-drop { padding-right: 9px; }
.rec-chip:focus-visible, .rec-seg-btn:focus-visible, .rec-cta:focus-visible, .rec-btn-ghost:focus-visible,
.rec-toggle:focus-visible, .rec-cancel-toggle:focus-visible { outline: 2px solid #ffe16f; outline-offset: 2px; }
.rec-caret { font-style: normal; font-size: 9px; opacity: .8; margin-left: 1px; }
/* 같은 폭 칩 한 줄 (자리 칩 7개) */
.rec-chip-row.is-fill > .rec-chip { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 11px; letter-spacing: -0.01em; }
/* 320px 대: 칩 하나가 약 36px 라 'UTG+1'(11px/800)이 테두리를 넘는다 — 글자를 화면 폭에 맞춰 줄인다 */
@media (max-width: 340px) {
  .rec-chip-row.is-fill > .rec-chip { font-size: clamp(9.5px, 2.9vw, 11px); letter-spacing: -0.04em; padding: 0 1px; }
}

/* ── 세그먼트 ────────────────────────────────────────────────────────────── */
.rec-seg {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 2px;
  gap: 2px;
  border-radius: 11px;
  border: 1px solid var(--cocoa-border);
  background: var(--cocoa-panel);
  box-sizing: border-box;
}
.rec-seg-btn {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cocoa-muted);
  font-family: var(--rec-font);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.1;
  padding: 0 4px;
  cursor: pointer;
  word-break: keep-all;
}
.rec-seg-btn.is-on {
  background: var(--rec-cheese);
  color: var(--rec-ink);
  box-shadow: 0 0 0 1px #f0c95c inset;
}
.rec-seg-btn:disabled { opacity: .45; cursor: default; }

/* ── 카드·글자 ───────────────────────────────────────────────────────────── */
.rec-card {
  border-radius: 14px;
  border: 1px solid rgba(156, 117, 63, .55);
  background: var(--cocoa-raised);
  padding: 12px;
  color: var(--cocoa-text);
  box-sizing: border-box;
}
.rec-card.is-panel { background: var(--cocoa-panel); border-color: var(--cocoa-border); }
.rec-card-title { margin: 0 0 8px; color: var(--cocoa-title); font-size: 13px; font-weight: 800; line-height: 1.3; }
.rec-state { text-align: center; padding: 22px 14px; }
.rec-state p { margin: 0; font-size: 13px; font-weight: 700; color: var(--cocoa-muted); line-height: 1.5; word-break: keep-all; }
.rec-state.is-error .rec-btn-ghost { margin-top: 10px; }
.rec-cream {
  position: relative;
  border-radius: 18px;
  border: 3px solid #f2b53a;
  background:
    radial-gradient(circle at 92% 14%, #f4e2b8 0 7px, transparent 8px),
    radial-gradient(circle at 96% 58%, #f4e2b8 0 5px, transparent 6px),
    linear-gradient(180deg, #fff8e6 0%, #ffefc9 100%);
  box-shadow: 0 5px 0 rgba(168, 106, 18, .35), 0 8px 18px rgba(0, 0, 0, .35);
  color: #6b4212;
  padding: 14px 16px;
  box-sizing: border-box;
}
.rec-cream .rec-label { color: #a0783c; }
.rec-big { font-family: var(--rec-display); font-weight: 400; line-height: 1.1; color: var(--cocoa-title); }
.rec-label { font-size: 12px; font-weight: 700; color: var(--cocoa-muted); line-height: 1.35; }
.rec-note { margin: 10px 2px 0; font-size: 10.5px; line-height: 1.55; color: var(--cocoa-muted); font-weight: 500; word-break: keep-all; }
.rec-note.is-warn { color: #ffd38a; margin-top: 4px; }
.rec-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--rec-cta);
  color: var(--rec-ink);
  font-family: var(--rec-font);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 2px 0 #9a6a26;
  cursor: pointer;
}
.rec-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cocoa-border); border-radius: 999px; padding: 7px 12px;
  background: transparent; color: var(--cocoa-title);
  font-family: var(--rec-font); font-size: 12px; font-weight: 800; line-height: 1.15; white-space: nowrap;
  cursor: pointer;
}
.rec-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid #ffe680; color: #ffe680; background: rgba(255, 230, 128, .1);
  font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.rec-pill.is-muted { border-color: rgba(212, 196, 170, .45); color: var(--cocoa-muted); background: transparent; }
.rec-stat-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px;
  background: var(--cocoa-raised); border: 1px solid rgba(156, 117, 63, .55);
  font-size: 12px; font-weight: 700; color: var(--cocoa-text);
}
.rec-pos { color: var(--rec-pos) !important; }
.rec-neg { color: var(--rec-neg) !important; }

/* ── 로비 '숙성실' 탭 새 기능 점 (S1) ─────────────────────────────────────── */
#lobby > .tabs .tab-history .rec-tab-label { position: relative; display: inline-block; }
.rec-new-dot {
  position: absolute;
  top: -1px;
  right: -10px;
  width: 7px;
  height: 7px;
  box-sizing: content-box;
  border-radius: 50%;
  background: #ff7a45;
  border: 1.5px solid #29221e;
  pointer-events: none;
}
.rec-new-dot[hidden] { display: none !important; }

/* ── 요약 (S4) ───────────────────────────────────────────────────────────── */
.rec-sum .rec-filter-row { margin-bottom: 10px; }
.rec-hero-card {
  padding: 13px 15px 10px;
  background:
    radial-gradient(circle at 84% 17%, #f4e2b8 0 8px, transparent 9px),
    radial-gradient(circle at 92.5% 30%, #f4e2b8 0 5px, transparent 6px),
    radial-gradient(circle at 75% 9%, #f4e2b8 0 3.5px, transparent 4.5px),
    linear-gradient(180deg, #fff8e6 0%, #ffefc9 100%);
}
.rec-hero-card .rec-label { font-size: 12px; font-weight: 700; color: #a0783c; word-break: keep-all; }
.rec-hero-value { margin-top: 3px; font-size: 34px; line-height: 1.08; color: #6b4212; letter-spacing: .3px; overflow-wrap: anywhere; }
.rec-hero-value .rec-unit { font-size: 30px; }
.rec-hero-value.is-social { font-size: 21px; line-height: 1.25; word-break: keep-all; overflow-wrap: normal; }
.rec-hero-sub { margin: 3px 0 0; font-size: 12px; font-weight: 700; color: #a0783c; line-height: 1.35; word-break: keep-all; }
.rec-hero-sub b { font-weight: 900; color: #8a5a00; }
.rec-hero-card.is-social { padding-bottom: 13px; }
.rec-hero-card .rec-summary-mode { margin:0 0 12px;background:#f1dfb6;border-color:#d7b472;min-height:40px;height:40px; }
.rec-hero-card .rec-summary-mode .rec-seg-btn { color:#8c6932; }
.rec-hero-card .rec-summary-mode .rec-seg-btn.is-on { color:#241703; }
.rec-summary-empty-mode { margin-bottom:12px; }
.rec-ev-values { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px; }
.rec-ev-values > div { display:grid;gap:5px;min-width:0; }
.rec-ev-values small { color:#8c6932;font-size:11px; }
.rec-ev-values strong { color:#6b4212;font-size:clamp(21px,5.5vw,28px);line-height:1.2;overflow-wrap:anywhere; }
.rec-ev-values strong span { font-size:12px; }
.rec-ev-values > div:last-child strong { color:#31776c; }
.rec-ev-chart { margin-top:14px;touch-action:pan-y; }
.rec-ev-chart svg { width:100%;height:auto;display:block;overflow:visible; }
.rec-ev-legend { display:flex;flex-wrap:wrap;gap:12px;color:#8c6932;font-size:10.5px;margin-top:8px; }
.rec-ev-legend span { display:flex;align-items:center;gap:5px; }
.rec-ev-legend span:before { content:'';width:16px;height:3px;border-radius:5px;background:#ca8a16; }
.rec-ev-legend span:last-child:before { background:#31776c; }
.rec-ev-coverage,.rec-ev-point,.rec-ev-definition { font-size:10.5px;color:#967244;line-height:1.6;overflow-wrap:anywhere; }
.rec-ev-point { min-height:34px;margin:8px 0 0; }
.rec-ev-definition { margin-top:10px; }
.rec-ev-definition summary { cursor:pointer;padding:5px 0; }
.rec-ev-definition p { margin:8px 0; }
.rec-ev-definition ul { padding-left:18px; }
.rec-graph { position: relative; margin-top: 10px; min-height: 92px; }
.rec-graph svg { display: block; width: 100%; height: 92px; overflow: visible; }
.rec-graph-x { position: relative; height: 14px; margin-top: 3px; font-size: 10px; font-weight: 700; color: #a0783c; font-variant-numeric: tabular-nums; }
.rec-graph-x span { position: absolute; top: 0; white-space: nowrap; line-height: 14px; }

/* KPI 3×2 — .pp-performance-grid 구조, 코코아 톤. style.css 의 ≤480px 1열 규칙을 허브에서는 3열로 유지 */
.rec-kpi.pp-performance-grid { display: grid; margin-top: 14px; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-kpi.pp-performance-grid > div {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  padding: 9px 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(156, 117, 63, .55);
  background: var(--cocoa-raised);
}
.rec-kpi.pp-performance-grid > div > span { color: var(--cocoa-muted); font-size: 11px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-kpi.pp-performance-grid > div > strong {
  font-family: var(--rec-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--cocoa-title);
  letter-spacing: .2px;
  white-space: nowrap;
  overflow-wrap: normal;
}
.rec-kpi strong .rec-unit { font-size: 17px; }
.rec-kpi strong .rec-kpi-gate { display: block; font-family: var(--rec-font); font-size: 11px; font-weight: 800; line-height: 1.3; color: var(--cocoa-muted); white-space: normal; word-break: keep-all; padding-top: 3px; }
.rec-kpi.pp-performance-grid > div > em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #c2b195;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* §10: 보조 줄은 한 줄 말줄임 */
  min-height: 14px;
}

/* 360px 근처: 셀 안쪽 폭이 약 85px 이라 보조 줄(예: '티켓 환산 2,000 포함')이 한 줄에 들어가게 조금 줄인다 */
@media (max-width: 380px) {
  .rec-kpi.pp-performance-grid > div { padding-left: 8px; padding-right: 8px; }
  .rec-kpi.pp-performance-grid > div > em { font-size: 10px; letter-spacing: -0.02em; }
}

/* 내 플레이 성향 — 기존 .pp-section / .pp-hud-* 코코아 톤 */
.rec-hud.pp-section {
  margin-top: 12px;
  padding: 12px 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(156, 117, 63, .55);
  background: var(--cocoa-raised);
}
.rec-hud .pp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rec-hud .pp-section-head strong { color: var(--cocoa-title); font-size: 14px; font-weight: 800; }
.rec-hud .pp-section-head span { color: var(--cocoa-muted); font-size: 11px; font-weight: 800; }
.rec-hud .pp-hud-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rec-hud.is-compact .pp-hud-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 핸드 탭 4게이지 1행 (요약 탭과 같은 77/70px 폭, 2×2 는 카드가 100px 커져 첫 핸드 행이 밀린다) */
.rec-hud .pp-hud-gauge { min-width: 0; }
.rec-hud .pp-gauge-ring {
  width: 70px;
  height: 70px;
  max-width: 100%;
  background:
    radial-gradient(circle at center, #2f2620 0 52%, transparent 53%),
    conic-gradient(var(--pp-tone) calc(var(--profile-pct) * 1%), rgba(105, 86, 62, .75) 0);
}
.rec-hud .pp-hud-gauge.is-empty .pp-gauge-ring {
  background:
    radial-gradient(circle at center, #2f2620 0 52%, transparent 53%),
    conic-gradient(rgba(105, 86, 62, .45) 100%, rgba(105, 86, 62, .45) 0);
}
.rec-hud .pp-gauge-ring span { font-size: 19px; }
.rec-hud .pp-gauge-ring span.is-pending { max-width: 46px; font-size: 10.5px; font-weight: 800; line-height: 1.15; color: #a8957a; letter-spacing: -0.02em; word-break: keep-all; text-align: center; } /* 번역 문구(Coming soon 등)는 안쪽 원 안에서 줄바꿈 */
/* 8칸 라벨: 390/360 의 4열 폭(77/70px)에 맞게 줄바꿈 허용 — 약어(small)는 둘째 줄로 내려갈 수 있다 (§4.8) */
.rec-hud .pp-hud-gauge strong { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 3px; white-space: normal; line-height: 1.15; color: var(--cocoa-text); font-weight: 800; word-break: keep-all; }
.rec-hud .pp-hud-gauge strong small { font-size: 9px; font-weight: 800; color: #bfae92; letter-spacing: .02em; }
.rec-hud .pp-hud-gauge em { color: var(--cocoa-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-hud .pp-hud-gauge em.is-gate { font-size: 9.5px; font-style: normal; }
.rec-hud .pp-hud-gauge.is-empty strong { color: var(--cocoa-muted); }
.rec-hud .rec-idx-note { margin-top: 8px; }
.rec-card-state { margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--cocoa-muted); word-break: keep-all; }

/* 자리별 표 (요약 탭, §9) */
.rec-pos-card { margin-top: 12px; padding: 12px 10px 11px; }
.rec-pos-card .rec-card-title { margin-left: 2px; }
.rec-pos-scroll { overflow-x: auto; scrollbar-width: none; }
.rec-pos-scroll::-webkit-scrollbar { display: none; }
.rec-pos-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-weight: 700; color: var(--cocoa-text); font-variant-numeric: tabular-nums; }
.rec-pos-table th, .rec-pos-table td { padding: 5px 4px; text-align: right; white-space: nowrap; line-height: 1.25; }
.rec-pos-table thead th { font-size: 10.5px; font-weight: 800; color: var(--cocoa-muted); border-bottom: 1px solid rgba(156, 117, 63, .35); word-break: keep-all; }
.rec-pos-table thead th small { font-size: 9px; margin-left: 1px; letter-spacing: .02em; }
.rec-pos-table th:first-child, .rec-pos-table td:first-child { text-align: left; padding-left: 2px; }
.rec-pos-table td:last-child, .rec-pos-table th:last-child { padding-right: 2px; }
.rec-pos-table tbody tr + tr td, .rec-pos-table tbody tr + tr th { border-top: 1px solid rgba(156, 117, 63, .16); }
.rec-pos-name { color: var(--cocoa-title); font-weight: 800; }
.rec-pos-row.is-few td { color: var(--cocoa-muted); }
.rec-pos-row.is-few small { font-size: 10px; font-weight: 700; color: #b9a582; }
.rec-pos-na { color: rgba(212, 196, 170, .4); }

/* '차트와 비교' 카드 — 실데이터 (잠금 중엔 뷰어와 같은 .hr-lock 카드를 안에 둔다) */
.rec-compare-card { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 12px 12px 13px; }
.rec-compare-card.is-locked { display: block; }
.rec-compare-card.is-locked .hr-lock { margin-top: 2px; }
.rec-compare-body { flex: 1 1 150px; min-width: 0; }
.rec-compare-body .rec-card-title { margin-bottom: 4px; font-size: 14px; }
.rec-compare-line { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.4; color: var(--cocoa-text); word-break: keep-all; }
.rec-compare-desc { margin: 3px 0 0; font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--cocoa-muted); word-break: keep-all; }
.rec-compare-since { color: #c9ae76; font-weight: 700; }
.rec-compare-desc .rec-dot { margin: 0 4px; opacity: .6; }
.rec-compare-card .rec-cta { flex: 0 0 auto; padding: 9px 12px; font-size: 12px; white-space: nowrap; text-align: center; max-width: 100%; }
.rec-compare-card .rec-idx-note { margin-top: 6px; }

/* '차트와 비교' 잠금 카드 */
.rec-lock-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 12px 12px 13px;
  border-radius: 14px;
  border: 1px dashed var(--cocoa-border);
  background: var(--cocoa-panel);
  box-sizing: border-box;
}
.rec-lock-body { flex: 1 1 150px; min-width: 0; opacity: .85; }
.rec-lock-title { display: flex; align-items: center; gap: 5px; color: var(--cocoa-title); font-size: 14px; font-weight: 800; line-height: 1.25; }
.rec-lock-title svg { flex: 0 0 auto; width: 15px; height: 15px; }
.rec-lock-desc { margin: 4px 0 0; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--cocoa-text); word-break: keep-all; }
/* 버튼은 한 줄(시안 S4). 설명 칸이 150px 보다 좁아지면(긴 번역·320px) 버튼이 설명 아래 오른쪽으로 내려간다. */
.rec-lock-card .rec-cta { flex: 0 0 auto; padding: 9px 12px; font-size: 12px; white-space: nowrap; text-align: center; max-width: 100%; }
.rec-sum .rec-note { margin-top: 12px; }

/* ── 토너 (S6) ───────────────────────────────────────────────────────────── */
.rec-tour-hint { margin: 0 2px 8px; font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--cocoa-muted); word-break: keep-all; }
.rec-tour-strip { margin: 2px 0 10px; padding: 10px 12px; }
.rec-tour-strip .rec-strip-left { color: var(--cocoa-text); font-size: 12px; font-weight: 700; min-width: 0; word-break: keep-all; }
.rec-tour-strip .rec-strip-right { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; color: var(--cocoa-muted); font-size: 11.5px; font-weight: 700; margin-left: auto; }
.rec-tour-strip .rec-strip-right b { color: var(--cocoa-text); font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rec-tour-strip .rec-strip-right b.is-pos { color: #86efac; }
.rec-tour-strip .rec-strip-right b.is-neg { color: #fca5a5; }

#lobbyFeatureBody .rec-tour-list .hist-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  row-gap: 5px;
  column-gap: 10px;
  margin-bottom: 8px;
  padding: 11px 12px 10px;
  border-radius: 12px;
  background: var(--cocoa-panel);
  border: 1px solid rgba(156, 117, 63, .42);
  cursor: pointer;
}
#lobbyFeatureBody .rec-tour-list .hist-row:focus-visible { outline: 2px solid #ffe16f; outline-offset: 2px; }
#lobbyFeatureBody .rec-tour-list .hist-row.is-open {
  background: var(--cocoa-raised);
  border-color: var(--cocoa-border);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  cursor: default;
}
#lobbyFeatureBody .rec-tour-list .hist-row .hist-name { grid-column: 1; grid-row: 1; font-size: 13.5px; min-width: 0; }
#lobbyFeatureBody .rec-tour-list .hist-row .hist-pl { grid-column: 2; grid-row: 1; align-self: center; font-size: 14.5px; }
#lobbyFeatureBody .rec-tour-list .hist-row .hist-meta { grid-column: 1; grid-row: 2; gap: 6px; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
#lobbyFeatureBody .rec-tour-list .hist-row .rec-row-caret { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
#lobbyFeatureBody .rec-tour-list .hist-row .rec-row-sub { grid-column: 1 / -1; grid-row: 3; }
#lobbyFeatureBody .rec-tour-list .hist-row .rec-row-detail { grid-column: 1 / -1; grid-row: 4; cursor: default; }

.rec-tour-list .hist-badge { white-space: nowrap; line-height: 1.25; }
.rec-tour-list .hist-badge.itm { background: rgba(252, 196, 25, .14); color: #ffe680; border: 1px solid rgba(252, 196, 25, .45); }
.rec-tour-list .hist-badge.is-sub,
.rec-cancel .hist-badge.is-sub {
  padding: 2px 7px; border-radius: 10px; font-size: 10px;
  background: rgba(201, 174, 118, .16); color: #e6d5ab; border: 1px solid rgba(201, 174, 118, .32);
}
.rec-tour-list .hist-ts, .rec-cancel .hist-ts { color: #c9ae76; white-space: nowrap; font-size: 11px; }
.rec-row-caret {
  font-style: normal; line-height: 0; color: var(--cocoa-muted);
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(212, 196, 170, .1);
}
.rec-row-caret svg { width: 12px; height: 12px; display: block; }
.hist-row.is-open .rec-row-caret { color: var(--cocoa-title); background: rgba(242, 197, 116, .16); }
.hist-row.is-open .rec-row-caret svg { transform: rotate(180deg); }
.rec-row-sub {
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(156, 117, 63, .22);
  font-size: 11px; font-weight: 600; line-height: 1.6; color: var(--cocoa-muted);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}
.rec-row-sub .rec-dot { margin: 0 4px; opacity: .6; }
.rec-row-sub .hist-bounty { display: inline; margin: 0; font-size: 11px; font-weight: 800; color: #fcc419; }
.rec-row-sub .ticket-badge.rec-ticket-badge {
  display: inline-flex; vertical-align: 1px;
  min-height: 17px; padding: 1px 7px; margin: 0 1px;
  font-size: 10px; font-weight: 900; line-height: 1;
  white-space: nowrap;
}
.rec-row-sub .rec-conv { color: #c9ae76; font-weight: 600; margin-left: 2px; }
.rec-row-detail { padding-top: 4px; }
#lobbyFeatureBody .rec-row-detail .pp-performance-grid { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-row-detail .pp-performance-grid > div { display: grid; min-width: 0; padding: 8px 9px 9px; gap: 3px; align-content: start; border-radius: 8px; background: rgba(41, 34, 30, .78); border: 1px solid rgba(156, 117, 63, .25); }
.rec-row-detail .pp-performance-grid span { font-size: 10.5px; font-weight: 800; color: var(--cocoa-muted); white-space: nowrap; }
.rec-row-detail .pp-performance-grid strong { font-size: 15.5px; color: var(--cocoa-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-row-detail .pp-performance-grid strong .rec-unit { font-size: 13px; }
.rec-row-detail .pp-performance-grid small { font-size: 10px; font-weight: 700; color: #b9a582; line-height: 1.25; word-break: keep-all; }
.rec-lock-line { margin: 9px 1px 0; font-size: 11px; font-weight: 600; line-height: 1.4; color: #d4c4aa; word-break: keep-all; }
.rec-detail-actions { display: flex; gap: 8px; margin-top: 9px; }
/* 긴 번역은 두 줄을 허용하되 고르게 나눈다. '›' 가 홀로 떨어지지 않게 번역문은 '›' 앞에 줄바꿈 없는 공백을 쓴다(i18n-extra). */
.rec-detail-actions .rec-cta { flex: 1 1 auto; min-height: 34px; font-size: 13px; white-space: normal; text-wrap: balance; }
#lobbyFeatureBody .rec-detail-actions .hist-results-btn,
#lobbyFeatureBody .rec-cancel .hist-results-btn {
  flex: 0 0 auto; min-height: 34px; padding: 0 14px; margin: 0;
  border-radius: 999px; border: 1px solid var(--cocoa-border);
  background: var(--cocoa-panel); color: var(--cocoa-title);
  font-family: var(--rec-font); font-size: 12.5px; font-weight: 800; line-height: 1;
  cursor: pointer;
}
.rec-more { width: 100%; min-height: 38px; margin-top: 2px; border-radius: 12px; font-size: 12.5px; color: var(--cocoa-title); background: var(--cocoa-panel); }
.rec-more:disabled { opacity: .6; }

/* 취소·환불 내역 (기존 '기록' 모달의 역할) */
.rec-cancel { margin-top: 14px; border-top: 1px solid rgba(156, 117, 63, .3); padding-top: 10px; }
.rec-cancel-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 8px 4px; border: 0; background: transparent; color: var(--cocoa-title);
  font-family: var(--rec-font); font-size: 13px; font-weight: 800; cursor: pointer;
}
.rec-cancel-toggle[aria-expanded="true"] .rec-row-caret svg { transform: rotate(180deg); }
.rec-cancel-body { padding: 2px 0 4px; }
.rec-cancel-body[hidden] { display: none; }
.rec-cancel-state { margin: 6px 4px; font-size: 12px; font-weight: 600; color: var(--cocoa-muted); line-height: 1.5; }
.rec-cancel-state .rec-btn-ghost { margin-left: 6px; }
.rec-cancel-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; padding: 9px 12px; border-radius: 12px;
  background: var(--cocoa-panel); border: 1px solid rgba(156, 117, 63, .32);
}
.rec-cancel-main { min-width: 0; flex: 1 1 auto; }
.rec-cancel-name { font-size: 13px; font-weight: 700; color: #fff3bf; overflow-wrap: anywhere; }
.rec-cancel-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* ── 핸드 탭 ─────────────────────────────────────────────────────────────── */
.rec-hands .rec-hands-filter { margin-bottom: 10px; }
.rec-hands-hud:empty { display: none; }
.rec-hands .rec-hud.pp-section { margin: 0 0 12px; }
.rec-hands .rec-hud .pp-gauge-ring { width: 62px; height: 62px; }
.rec-hand-list { min-width: 0; }
.rec-hand-list .hpc-hand-row { margin-bottom: 8px; }
/* 대회별 묶음 머리 줄 (대회 필터 없을 때) — 대회명은 한 줄 말줄임, 날짜는 늘 보이게 */
.rec-hand-group { display: flex; align-items: baseline; min-width: 0; margin: 12px 2px 6px; font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--cocoa-title); }
.rec-hand-group:first-child { margin-top: 2px; }
.rec-hand-group-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-hand-group-date { flex: 0 0 auto; margin-left: .3em; white-space: nowrap; color: var(--cocoa-muted); font-weight: 700; }
.rec-tid-chip { max-width: 100%; }
.rec-tid-chip > span { overflow: hidden; text-overflow: ellipsis; }
.rec-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.rec-toggle-text { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--cocoa-text); line-height: 1.4; word-break: keep-all; }
.rec-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #54472e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  cursor: pointer;
}
.rec-toggle::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f8edcf;
  transition: transform .15s ease;
}
.rec-toggle[aria-checked="true"] { background: #d99427; }
.rec-toggle[aria-checked="true"]::after { transform: translateX(18px); }

/* ── 빈 상태 (S9) ────────────────────────────────────────────────────────── */
.rec-empty .rec-filter-row { margin-bottom: 10px; }
.rec-empty-card.rec-cream {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 93% 15%, #f4e2b8 0 7px, transparent 8px),
    radial-gradient(circle at 97% 47%, #f4e2b8 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 89% 86%, #f4e2b8 0 4px, transparent 5px),
    linear-gradient(180deg, #fff8e6 0%, #ffefc9 100%);
}
.rec-empty-mascot {
  flex: 0 0 72px;
  display: block;
  width: 72px;
  height: 72px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, #ffe680, #f2b53a 75%);
  box-shadow: 0 2px 0 #9a6a26, 0 0 0 3px rgba(245, 201, 107, .25);
}
.rec-empty-mascot > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 15px; } /* 시안 S9: 이미지 모서리도 둥글게(18px − 패딩 3px) */
.rec-empty-copy { flex: 1 1 auto; min-width: 0; }
.rec-empty-title {
  margin: 0;
  font-family: var(--rec-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .2px;
  color: #7a4c10;
  word-break: keep-all;
}
.rec-empty-desc { margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: #a0783c; word-break: keep-all; }
.rec-empty-card .rec-cta { margin-top: 10px; padding: 9px 14px; font-size: 13px; }
.rec-unlock-card { margin-top: 14px; padding: 12px 12px 13px; }
.rec-unlock-card .rec-card-title { margin-bottom: 10px; }
.rec-unlock-row + .rec-unlock-row, .rec-unlock-hud, .rec-unlock-pl, .rec-unlock-hud + .rec-unlock-row { margin-top: 11px; }
.rec-unlock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.rec-unlock-label { font-size: 12.5px; font-weight: 800; color: var(--cocoa-text); line-height: 1.3; }
.rec-unlock-need { font-size: 11px; font-weight: 700; color: var(--cocoa-muted); line-height: 1.3; margin-left: auto; }
.rec-unlock-base { font-size: 10.5px; font-weight: 600; color: var(--cocoa-muted); line-height: 1.3; opacity: .85; } /* 진행 막대의 분모 설명(결정한 핸드 / 받은 핸드) — 두 줄의 '핸드' 수가 다른 이유 */
.rec-unlock-line { display: flex; align-items: center; gap: 10px; }
.rec-unlock-bar {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: #2f2620;
  box-shadow: inset 0 0 0 1px rgba(156, 117, 63, .28);
  overflow: hidden;
}
.rec-unlock-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #f2b53a; }
.rec-unlock-count { flex: 0 0 auto; min-width: 46px; text-align: right; font-size: 11px; font-weight: 800; color: var(--cocoa-title); font-variant-numeric: tabular-nums; line-height: 1; }
.rec-unlock-count small { font-size: 11px; font-weight: 700; color: #a8957a; }
.rec-unlock-row.is-later { opacity: .5; }
.rec-unlock-row.is-later .rec-unlock-count { color: var(--cocoa-muted); }
.rec-range-teaser {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--cocoa-border);
  background: var(--cocoa-panel);
  box-sizing: border-box;
  color: var(--cocoa-text);
}
.rec-range-row { display: flex; align-items: center; gap: 10px; }
.rec-range-thumb { flex: 0 0 auto; min-width: 124px; display: flex; justify-content: center; }
.rec-range-copy { flex: 1 1 auto; min-width: 0; }
.rec-range-kicker { font-size: 11px; font-weight: 800; color: var(--cocoa-title); line-height: 1.3; word-break: keep-all; }
.rec-range-title { margin: 3px 0 0; font-size: 14px; font-weight: 800; color: var(--cocoa-text); line-height: 1.3; }
.rec-range-desc { margin: 3px 0 0; font-size: 11px; font-weight: 600; color: var(--cocoa-muted); line-height: 1.45; word-break: keep-all; }
.rec-range-desc > span { display: block; }
.rec-range-copy .rec-btn-ghost { margin-top: 9px; padding: 8px 12px; font-size: 12px; }
.rec-range-teaser .hr-disclaimer { margin-top: 10px; }
.rec-switch-hint { margin: 12px 2px 0; font-size: 11.5px; font-weight: 600; color: var(--cocoa-muted); line-height: 1.45; word-break: keep-all; }

/* ── 내정보: 허브 링크·서비스 정보 (app.js renderMyInfoPanel) ─────────────── */
.rec-myinfo-link { margin-top: 12px; }
.rec-legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rec-legal-links a { color: #f2c574; font-size: 13px; font-weight: 700; text-decoration: none; padding: 4px 0; }
.rec-legal-links a:focus-visible { outline: 2px solid #ffe16f; outline-offset: 2px; border-radius: 4px; }
.rec-legal-agreed { margin: 6px 0 0; font-size: 11px; font-weight: 600; color: #b9a582; }

/* ── 2단계 (SPEC2 §4.8): 레인지 뷰 세그 · 핸드 탭 세그/필터/배지(S7) · 손익표(S5) ───────────────── */
.rec-seg.rec-range-view, .rec-seg.rec-hands-view { min-height: 30px; height: 30px; margin: 0 0 8px; }
.rec-seg.rec-range-view .rec-seg-btn, .rec-seg.rec-hands-view .rec-seg-btn { font-size: 12px; }
.rec-range-stage { min-width: 0; }
.rec-seg.is-sm { height: 30px; flex: 1 1 auto; }
.rec-seg.is-sm .rec-seg-btn { font-size: 11.5px; padding: 0 3px; letter-spacing: -0.01em; }
.rec-hands-filters { margin: 0 0 8px; }
.rec-hands-filters .rec-chip { color: var(--cocoa-text); }
.rec-hands-filters .rec-chip.is-on { color: var(--rec-ink); }
.rec-hc-row { margin-bottom: 8px; }
.rec-hc-chip > span { overflow: hidden; text-overflow: ellipsis; }
.rec-hand-info { margin: 0 2px 10px; font-size: 11px; line-height: 1.5; font-weight: 600; color: var(--cocoa-muted); word-break: keep-all; }
.rec-hand-info b { font-weight: 800; }
.rec-hand-info .is-narrow { color: #ffe680; }
.rec-hand-info .is-wide { color: #ff9a7a; }
.rec-pill.is-narrow { border-color: #ffe680; color: #ffe680; background: rgba(255, 230, 128, .1); }
.rec-pill.is-wide { border-color: var(--rec-jam); color: #ff9a7a; background: rgba(228, 87, 46, .12); }
.rec-more small { margin-left: 3px; color: var(--cocoa-muted); font-size: 11.5px; font-weight: 700; }
.rec-link-row {
  width: 100%; text-align: left; font-family: var(--rec-font);
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 8px 10px 8px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .05);
  color: #c9ae76; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; cursor: pointer;
}
.rec-link-row:focus-visible { outline: 2px solid #ffe16f; outline-offset: 2px; }

/* S7 핸드 행 추가분 — 허브 목록 스코프 (운영 레이아웃·대회 묶음 머리줄 유지, 배지 줄만 grid 영역 추가) */
#lobbyFeatureBody .rec-hand-list .hpc-hand-row { grid-template-areas: "main foot" "chart foot" "board foot"; }
#lobbyFeatureBody .rec-hand-list .hpc-hand-main { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
#lobbyFeatureBody .rec-hand-list .hpc-pos-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; box-sizing: border-box;
  border-radius: 6px; border: 1px solid rgba(242, 197, 116, .55); background: rgba(242, 197, 116, .1);
  color: var(--cocoa-title); font-size: 10px; font-weight: 800; line-height: 1;
}
#lobbyFeatureBody .rec-hand-list .hpc-hand-eff { font-size: 11px; font-weight: 700; color: var(--cocoa-muted); white-space: nowrap; }
#lobbyFeatureBody .rec-hand-list .hpc-chart-row { grid-area: chart; margin-top: 7px; min-width: 0; display: flex; align-items: center; gap: 6px; }
#lobbyFeatureBody .rec-hand-list .hpc-chart-badge {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0;
  padding: 4px 9px; border-radius: 999px; border: 1px solid #ffe680; background: rgba(255, 230, 128, .1);
  color: #ffe680; font-family: var(--rec-font); font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap;
  box-sizing: border-box; cursor: pointer; overflow: hidden;
}
#lobbyFeatureBody .rec-hand-list .hpc-chart-badge > span { white-space: nowrap; }
#lobbyFeatureBody .rec-hand-list .hpc-chart-badge.is-wide { border-color: var(--rec-jam); background: rgba(228, 87, 46, .12); color: #ff9a7a; }
#lobbyFeatureBody .rec-hand-list .hpc-chart-badge:focus-visible { outline: 2px solid #ffe16f; outline-offset: 2px; }
#lobbyFeatureBody .rec-hand-list .hpc-chart-go { font-style: normal; font-size: 13px; font-weight: 900; line-height: 1; margin-left: 2px; position: relative; top: -1px; opacity: .9; }
#lobbyFeatureBody .rec-hand-list .hpc-chart-same {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(111, 207, 142, .16); color: var(--rec-pos);
}
#lobbyFeatureBody .rec-hand-list .hpc-chart-same svg { width: 10px; height: 10px; display: block; }
#lobbyFeatureBody .rec-hand-list .hpc-hand-act { font-size: 10.5px; font-weight: 700; color: var(--cocoa-muted); line-height: 1.2; white-space: nowrap; }
#lobbyFeatureBody .rec-hand-list .hpc-hand-class { font-size: 15px; font-weight: 900; color: #fff3bf; letter-spacing: .01em; }
#lobbyFeatureBody .rec-hand-list .hpc-net-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#lobbyFeatureBody .rec-hand-list .hpc-net-block .hpc-hand-net { line-height: 1.1; font-variant-numeric: tabular-nums; }
#lobbyFeatureBody .rec-hand-list .hpc-net-sub { font-size: 10px; font-weight: 600; color: var(--cocoa-muted); line-height: 1.2; white-space: nowrap; }
#lobbyFeatureBody .rec-hand-list .hpc-hand-foot { gap: 5px; }

/* 손익표 (S5) */
.rec-matrix-filter { gap: 6px; margin-bottom: 9px; flex-wrap: wrap; row-gap: 6px; }
.rec-matrix-filter > .rec-chip-row { flex: 0 0 auto; }
.rec-matrix-filter > .rec-seg { flex: 1 1 150px; }
.rec-matrix-scope { margin: 0 2px 9px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--cocoa-muted); word-break: keep-all; }
.rec-matrix-scope b { color: var(--cocoa-text); font-weight: 800; }
.rec-matrix-scope-line { display: block; }
.rec-insight-row {
  display: flex; gap: 6px; margin: 0 -14px 12px 0; padding-right: 14px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.rec-insight-row::-webkit-scrollbar { display: none; }
.rec-insight-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 9px; box-sizing: border-box;
  border-radius: 15px; border: 1px solid rgba(156, 117, 63, .7); background: var(--cocoa-panel);
  color: var(--cocoa-muted); font-family: var(--rec-font); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.rec-insight-hand { color: var(--cocoa-text); font-weight: 900; }
.rec-insight-val { font-weight: 900; font-variant-numeric: tabular-nums; }
.rec-insight-none { margin: 0 2px 10px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--cocoa-muted); word-break: keep-all; }
.rec-matrix-caption { margin-bottom: 7px; align-items: flex-end; }
.rec-matrix-stage { min-width: 0; }
.rec-matrix-note { margin-top: 8px; }
.rec-matrix-gate { margin-top: 2px; }
.rec-matrix-gate .rec-card-state { margin-top: 8px; }
.rec-matrix-detail { margin-top: 12px; }
.rec-matrix-detail-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 10px; }
.rec-matrix-detail-hand { font-size: 24px; line-height: 1; color: var(--cocoa-title); }
.rec-matrix-detail-head .rec-label { white-space: nowrap; }
/* ≤480px 1열 규칙(style.css .pp-performance-grid)을 접두로 이긴다 → 2×2 */
#lobbyFeatureBody .rec-matrix-detail .pp-performance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#lobbyFeatureBody .rec-matrix-detail .pp-performance-grid > div { display: grid; min-width: 0; padding: 9px 10px; gap: 4px; align-content: start; border-radius: 10px; background: rgba(41, 34, 30, .78); border: 1px solid rgba(156, 117, 63, .25); }
#lobbyFeatureBody .rec-matrix-detail .pp-performance-grid span { font-size: 11px; font-weight: 800; color: var(--cocoa-muted); white-space: nowrap; }
#lobbyFeatureBody .rec-matrix-detail .pp-performance-grid strong { font-size: 16px; line-height: 1.15; color: var(--cocoa-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-matrix-detail-btn { width: 100%; height: 38px; margin-top: 10px; font-size: 12.5px; box-sizing: border-box; }
/* Context imported from a completed hand, above the existing range tabs. */
.rec-hand-study { margin-bottom:12px;padding:13px 14px;border:1px solid #aa8956;border-radius:12px;background:#f8efdc;color:#573f23; }
.rec-hand-study strong { font-size:13px; }
.rec-hand-study p { margin:6px 0 0;font-size:11px;line-height:1.65; }
/* Review selection extends the existing hand rows only while enabled. */
.rec-review-hand { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0; align-items: stretch; min-width: 0; margin-bottom: 8px; background: var(--cocoa-panel); border: 1px solid rgba(156, 117, 63, .3); border-radius: 12px; }
.rec-hand-list .rec-review-hand > .hpc-hand-row { min-width: 0; margin-bottom: 0; padding: 10px 8px 10px 0; border-bottom: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rec-review-hand.is-selected { background: rgba(242, 197, 116, .08); border-color: var(--cocoa-title); }
.rec-review-select { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 44px; cursor: pointer; }
.rec-review-select input { width: 18px; height: 18px; margin: 0; accent-color: var(--rec-raise); cursor: pointer; }
.rec-review-select input:focus-visible { outline: 2px solid #ffe16f; outline-offset: 3px; }
.rec-review-select:has(input:disabled) { opacity: .45; cursor: default; }
.rec-review-hand .hpc-hand-main > *, .rec-review-hand .hpc-hand-foot > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.rec-review-hand .hpc-hand-foot { min-width: 0; }
.rec-review-hand .hpc-replay-btn { min-height: 44px; width: 100%; white-space: normal; line-height: 1.35; }
[data-rec-hand-review][aria-expanded="true"] { color: var(--rec-ink); background: var(--rec-cheese); border-color: #f0c95c; }