/* 게임 안 '레인지' 탭 — 족보 모달(#handGuideModal) 의 족보 | 레인지 (SPEC §9 W5-3, 승인 시안 S8).
   기존 족보 모달(.hand-guide-*, style.css·skin.css)과 .ranking-subtabs 를 그대로 쓰고, 새 클래스만 둔다:
   .hg-* · .rec-helper-banner · .hr-cell.is-current · .hr-current-tip
   격자·범례·안내문·잠금 카드(.hr-*) 모양은 hand-range.css(W4)가 맡는다.
   시안의 .hg-room(상단 방 이름 알약)은 옮기지 않는다 — 테이블 고정 슬롯 레이아웃 때문이며 #practiceBadge 문구로 대신한다.
   문구가 바뀐 요소(.rec-helper-banner · .hg-status · .hg-note)는 줄바꿈을 허용한다(§4.7). */

/* 족보 모달(#app 안, z 1300)은 #topbar(z 1500)·#practiceBadge(body 직속, z 90)·메뉴 터치 영역(z 1600)보다 아래에 그려진다.
   레인지 탭으로 모달이 높아지면 작은 화면(360×640)에서 모달 머리(닫기 ×)가 배지·메뉴 아이콘에 가리므로,
   레인지 탭이 있는 동안(허용 방, #handGuideTabs 보임)에만 모달을 상단 바 위로 올리고 겹치는 배지·메뉴 터치 영역을 숨긴다.
   '족보만' 모달(공식 대회·허용 안 한 방)은 예전 z 1300 그대로 — 미스터리 바운티 연출(z 1318·1320)이 계속 위에 그려진다. */
#handGuideModal:not(.hidden):has(#handGuideTabs:not([hidden])) { z-index: 1550; }
body:has(#handGuideModal:not(.hidden) #handGuideTabs:not([hidden])) #practiceBadge,
body:has(#handGuideModal:not(.hidden) #handGuideTabs:not([hidden])) #tableMenuHitTarget { visibility: hidden !important; pointer-events: none !important; }

/* #practiceBadge(body 직속, z 90)는 #app 쌓임 맥락 안의 토스트보다 위에 그려진다.
   허용 방 1회 안내(helper.toast.once)처럼 두 줄 토스트의 오른쪽 끝을 배지가 가리지 않게, 토스트가 떠 있는 동안 배지를 숨긴다. */
body.holdem-table-active:has(#toastContainer .toast:not(.is-leaving)) #practiceBadge { visibility: hidden !important; }

/* 제목은 한 줄 (🧀 아이콘 유지) */
#handGuideModal .hand-guide-head > span { white-space: nowrap; min-width: 0; }

/* 족보 | 레인지 탭 — 기존 .ranking-subtab 모양. 버튼은 글꼴을 상속하지 않으므로 지정한다. */
.hg-tabs { margin-bottom: 8px; }
.hg-tabs[hidden] { display: none; }
.hg-tabs .ranking-subtab { font-family: inherit; white-space: nowrap; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.hg-tabs .ranking-subtab:focus-visible { outline: 2px solid #ffe680; outline-offset: 2px; }

.hg-range { position: relative; min-width: 0; }
.hg-range[hidden] { display: none; }
.hg-range.is-busy .hg-grid-wrap,
.hg-range.is-busy .hg-now-slot { opacity: .5; transition: opacity .15s ease; }

/* 방장이 켠 방 — 자두색 한 줄 안내 (줄바꿈 허용) */
.rec-helper-banner {
  display: block;
  margin: 0 0 8px;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid #ad87bd;
  background: #4a3650;
  color: #f3e6f7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 상황 줄 (줄바꿈 허용) */
.hg-status {
  margin: 0 1px 6px;
  color: var(--cocoa-title, #f2c574);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hg-legend-row { display: flex; align-items: center; justify-content: flex-start; min-height: 16px; margin: 0 1px 6px; min-width: 0; }
.hg-legend-row .hr-legend { font-size: 10.5px; flex-wrap: wrap; row-gap: 2px; white-space: normal; }

/* 격자 + 지금 내 핸드 표시. 작은 화면에서 .hg-now 를 밀어내지 않게 격자 크기를 화면 높이로 묶는다. */
.hg-grid-wrap { position: relative; min-width: 0; }
.hg-grid-wrap .hr-grid.is-fit {
  max-width: min(362px, 100%, calc(90vh - 290px));
  max-width: min(362px, 100%, calc(90dvh - 290px)); /* 상황 줄이 2줄이어도 360×640 에서 .hg-now 가 첫 화면 안 */
  margin-left: auto;
  margin-right: auto;
}
.hr-cell.is-current {
  z-index: 2;
  overflow: visible;
  box-shadow: 0 0 0 2px #ffe680, 0 0 8px 1px rgba(255, 230, 128, .7);
}
.hr-cell.is-current.is-selected { box-shadow: inset 0 0 0 2px var(--rec-sel, #fff3e0), 0 0 0 2px #ffe680, 0 0 8px 1px rgba(255, 230, 128, .7); }
.hr-current-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 3px 5px;
  border-radius: 6px;
  background: #ffe680;
  color: var(--rec-ink, #241703);
  font-family: var(--rec-font, inherit);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.hr-current-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tip-arrow, 10px);
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: #ffe680;
}
.hr-current-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #ffe680; }

/* 지금 내 핸드 (또는 고른 칸) 한 장 */
.hg-now {
  margin-top: 8px;
  padding: 9px 11px 8px;
  border-radius: 12px;
  border: 1px solid rgba(213, 164, 70, .5);
  background: rgba(255, 247, 224, .055);
  min-width: 0;
}
.hg-now.is-empty { padding: 9px 11px; }
.hg-now-empty { margin: 0; color: var(--cocoa-muted, #d4c4aa); font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.hg-now-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 7px; min-width: 0; }
.hand-guide-cards.hg-now-cards { display: inline-flex; gap: 3px; flex: 0 0 auto; justify-content: flex-start; }
.hg-now-hand { font-family: var(--rec-display, "Jua", sans-serif); font-weight: 400; font-size: 21px; line-height: 1; color: #fff3e0; letter-spacing: 0; }
.hg-now-acts { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hg-now-act {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--rec-jam, #e4572e);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.hg-now-act b { font-weight: 900; }
.hg-now-act.is-raise { background: var(--rec-raise, #f2b53a); color: var(--rec-ink, #241703); }
.hg-now-act.is-limp { background: var(--rec-limp, #7cb860); color: var(--rec-ink, #241703); }
.hg-now-act.is-call { background: var(--rec-jam, #e4572e); }
.hg-now-act.is-fold { background: var(--rec-fold, #3a2f27); color: var(--rec-fold-text, #a8957a); box-shadow: inset 0 0 0 1px #5a4a3c; }
.hg-now-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; color: #bca984; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.hg-now-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hg-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #ffe680;
  background: rgba(255, 230, 128, .1);
  color: #ffe680;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.hg-badge.is-muted { border-color: rgba(212, 196, 170, .45); background: transparent; color: var(--cocoa-muted, #d4c4aa); }

/* 근사 안내 (여러 개면 ' · ' 로 잇는다 — 조각마다 한 요소라 i18n 이 조각별로 바꾼다) */
.hg-approx { margin: 6px 1px 0; color: var(--cocoa-muted, #d4c4aa); font-size: 10.5px; font-weight: 600; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.hg-approx > span + span::before { content: " · "; }

/* 콤보 수 · 하단 노트 */
.hg-count { margin: 6px 1px 0; color: var(--cocoa-muted, #d4c4aa); font-size: 11px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
#handGuideModal .hand-guide-note.hg-note { padding-top: 10px; font-size: 10.5px; line-height: 1.45; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }

/* 차트 없음 · 로딩 · 오류 · 잠금 */
.hg-empty {
  margin: 4px 0 8px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(213, 164, 70, .45);
  background: rgba(255, 247, 224, .04);
  color: var(--cocoa-text, #f3e6c2);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  word-break: keep-all;
}
.hg-empty p { margin: 0; }
.hg-state { padding: 22px 8px; text-align: center; color: var(--cocoa-muted, #d4c4aa); font-size: 12.5px; font-weight: 700; }
.hg-state p { margin: 0 0 10px; }
.hg-state p:last-child { margin-bottom: 0; }
.hg-lock-wrap { padding: 4px 0 2px; }
.hg-range .hr-disclaimer { margin-top: 8px; }

@media (max-width: 360px) {
  .hg-now { padding: 8px 9px 7px; }
  .hg-now-hand { font-size: 19px; }
  .hg-now-act { height: 21px; padding: 0 7px; font-size: 11.5px; }
}