/* 한게임포커 원본 폰트 (한글 서브셋 woff2) */
@font-face {
  font-family: 'HangamePoker';
  src: url('assets/fonts/HangamePoker-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'HangamePoker';
  src: url('assets/fonts/HangamePoker-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'HangamePoker', 'Segoe UI', 'Malgun Gothic', sans-serif;
  background: #14110e;
  color: #eee;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
#view-table.active {
  background: url('assets/img/bg-table.jpg') center/cover no-repeat #14110e;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh; /* 모바일 주소창 변화 대응 */
}
.view { display: none; min-height: 100%; }
.view.active { display: block; }
.hidden { display: none !important; }

.panel {
  background: #14502a;
  border-radius: 12px;
  padding: 16px;
  margin: 12px auto;
  max-width: 720px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
button {
  padding: 10px 16px; border: 0; border-radius: 8px;
  background: #2e6b43; color: #fff; font-size: 15px; cursor: pointer;
  min-height: 44px;                 /* 터치 타깃 최소 크기 */
  touch-action: manipulation;       /* 더블탭 줌 방지 */
  user-select: none; -webkit-user-select: none;
}
button.primary { background: #e8a020; color: #222; font-weight: 700; }
button:disabled { opacity: .4; cursor: default; }
input, select {
  padding: 10px; border: 0; border-radius: 8px;
  font-size: 16px;                  /* iOS 포커스 자동 줌 방지: 16px 이상 */
  background: #0e2f1a; color: #eee;
  min-height: 44px;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row input { flex: 1; min-width: 120px; }
.hint { font-size: 12px; color: #9c9; margin-top: 8px; }
.error { color: #ff8080; font-size: 13px; margin-top: 8px; }
.money { color: #ffd968; font-weight: 700; }

/* 로그인 */
#view-login.active {
  background: url('assets/img/lobby-bg.jpg') center/cover no-repeat #14110e;
  min-height: 100vh; min-height: 100dvh;
}
.login-panel {
  max-width: 340px; margin-top: 15vh; text-align: center;
  background: rgba(0,0,0,.6); border: 1px solid #4a4433;
}
.login-panel h1 { margin-bottom: 16px; color: #ffd968; }
.login-panel input { width: 100%; margin-bottom: 10px; }
.login-panel button { width: 100%; }

/* 게임 탑바 — 아이콘 배지 버튼(아이콘 + 한 줄 라벨, 고정 폭, 줄바꿈 금지) */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: rgba(0,0,0,.45); gap: 8px; min-height: 56px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 4px; flex: none; }
#table-title {
  flex: 1 1 auto; min-width: 0; text-align: center; font-size: 14px; color: #e8e4d8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar button.tb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 46px; min-width: 46px; height: 44px; min-height: 44px; padding: 2px 0; flex: none;
  background: rgba(58,58,44,.9); border: 1px solid #55503a; border-radius: 8px; color: #d8d3b0;
  font-size: 10px; line-height: 1.1; white-space: nowrap;
}
.topbar button.tb i { font-style: normal; font-size: 16px; line-height: 1; }
.topbar button.tb span { font-size: 10px; letter-spacing: -.2px; }
.topbar button.tb:hover { border-color: #b98f2e; color: #ffe9a8; }
#btn-leave.tb { background: #2e6b43; color: #fff; border-color: #3f8a58; }
#btn-leave.tb.reserved { background: #6b4d16; color: #ffd968; border-color: #c9a03a; }
#btn-sitout.tb.on { background: #5a5230; color: #ffd968; border-color: #c9a03a; }
.tb-gold {
  display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 10px; margin-left: 2px;
  background: rgba(0,0,0,.5); border: 1px solid #6b5a24; border-radius: 8px;
  font-size: 13px; white-space: nowrap; flex: none;
}
.tb-gold::before { content: ''; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #ffe9a8, #c9962a 70%, #7a5a10); }

/* 테이블 */
.table {
  position: relative;
  max-width: 720px; min-height: 240px;
  flex: 1 1 auto;                   /* 남는 세로 공간을 테이블이 차지 */
  margin: 10px auto;
  width: 100%;
}
/* ── 상단 덱 정보 ── */
.deck-info {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); border: 1px solid #4a4a33; border-top: 0;
  border-radius: 0 0 10px 10px; padding: 4px 14px; font-size: 12px; color: #cfc9a8;
}
.deck-info b { color: #ffd968; }
.deck-cards { display: inline-flex; margin-right: 6px; }
.mini-back {
  display: inline-block; width: 16px; height: 22px; border-radius: 2px;
  background: url('assets/img/cardback-khaki.png') center/cover; margin-right: -10px;
}
.mini-back:last-child { margin-right: 0; } /* 마지막 카드가 텍스트를 침범하지 않도록 */

/* ── 중앙 정보 패널 ── */
.center-panel {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%);
  width: min(264px, 38vw); text-align: center; /* 좌우 좌석(200px)과 겹치지 않는 폭 */
}
.phase-label {
  font-size: 15px; font-weight: 700; color: #ffd968; background: rgba(0,0,0,.45);
  border-radius: 12px; padding: 4px 16px; display: inline-block; margin-bottom: 6px;
  letter-spacing: 2px;
}

/* 팟 칩 스택 */
.pot-chips {
  display: flex; justify-content: center; align-items: flex-end; gap: 6px;
  min-height: 44px; margin-bottom: 4px;
}
.pot-chips .stack { position: relative; width: 30px; }
.pot-chips .stack img {
  position: absolute; left: 0; width: 30px; height: 28px; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}

/* 교환 수 인디케이터 (아침/점심/저녁) */
.dh {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: rgba(0,0,0,.4); border-radius: 4px; padding: 3px 4px; min-width: 16px;
}
.dh span {
  font-size: 11px; line-height: 14px; color: #cfc9a8; text-align: center; font-weight: 700;
}
.dh span.pass { color: #7d7a63; }
.dh span.pending { color: #4a4a3a; }
.my-cards-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.round-tabs { display: flex; justify-content: center; gap: 2px; margin-bottom: 6px; }
.round-tabs span {
  flex: 1; max-width: 76px; padding: 4px 0; font-size: 13px; color: #7d7a63;
  background: rgba(0,0,0,.4); border: 1px solid #3c3a2a;
}
.round-tabs span:first-child { border-radius: 12px 0 0 12px; }
.round-tabs span:last-child { border-radius: 0 12px 12px 0; }
.round-tabs span.on { color: #ffd968; background: rgba(70,64,32,.75); border-color: #8a7c3a; }
.seed-label { font-size: 11px; color: #8f8b70; margin-bottom: 6px; }
.info-bar {
  display: flex; align-items: center; margin: 4px 0; padding: 5px 10px;
  background: rgba(0,0,0,.72); border: 1px solid #55503a; border-radius: 4px;
}
.info-bar label { font-size: 13px; color: #b8b393; }
.info-bar b { flex: 1; text-align: right; font-size: 17px; color: #ffd968; }
.info-bar i { font-style: normal; font-size: 11px; color: #8f8b70; margin-left: 4px; }

/* ── 상대 좌석 ── */
.seat { position: absolute; width: 200px; }
.seat.slot-lt { left: 1%; top: 6%; }
.seat.slot-rt { right: 1%; top: 6%; }
.seat.slot-lb { left: 1%; bottom: 10%; }
.seat.slot-rb { right: 1%; bottom: 10%; }
.seat .action-label { min-height: 18px; margin-bottom: 2px; }
.seat-panel {
  display: flex; gap: 4px; align-items: center;
  background: rgba(0,0,0,.35); border: 2px solid transparent; border-radius: 8px; padding: 5px;
}
.seat-panel.turn { border-color: #ffd94d; box-shadow: 0 0 12px rgba(255,217,77,.35); }
.seat-panel.folded { opacity: .45; }
.seat .avatar { width: 38px; text-align: center; flex: none; }
.seat .avatar img { width: 36px; height: 45px; object-fit: cover; border-radius: 4px; border: 1px solid #55503a; }
.seat .cards { display: flex; gap: 2px; }
.seat .cards .card { width: 29px; height: 40px; }
.seat .name { font-size: 12px; color: #cfc9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .chips { font-size: 12px; color: #ffd968; text-align: center; margin-top: 2px; }
.badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: #333; margin-left: 4px; vertical-align: middle;
}
.badge.boss { background: #b98f2e; color: #1c1808; font-weight: 700; }
.badge.win { background: #38c172; }

/* ── 액션 라벨 (좌석/내 영역 공용) ── */
.action-label { font-size: 13px; font-weight: 700; text-align: center; min-height: 18px; }
.action-label .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.action-label .amt { color: #ffd968; margin-right: 3px; }

/* ── 단계 전환 배너 ── */
.phase-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
  padding: 10px 34px; border-radius: 8px; pointer-events: none; z-index: 15;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.82) 20%, rgba(0,0,0,.82) 80%, transparent);
  color: #ffd968; font-size: 22px; font-weight: 700; letter-spacing: 4px; white-space: nowrap;
}
.phase-banner.anim { animation: bannerInOut 1.3s ease forwards; }
@keyframes bannerInOut {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  28%  { transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

/* ── 칩 이동 연출 ── */
.fly-chip {
  position: fixed; width: 22px; height: 21px; z-index: 25; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition: transform .42s cubic-bezier(.5,0,.6,1), opacity .42s;
}

/* 카드 (이미지 기반) */
.card {
  width: 34px; height: 47px; border-radius: 3px;
  background-color: #fff; background-size: 100% 100%; background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .25s;
  animation: dealIn .3s ease-out;
}
.card.back { background-image: url('assets/img/cardback-khaki.png'); }
.card.selected { transform: translateY(-12px); outline: 3px solid #ff8c2e; }
.card.pickable { cursor: pointer; }
@media (hover: hover) {
  .card.pickable:hover:not(.selected) { transform: translateY(-6px); }
}
@keyframes dealIn {
  from { transform: translateY(-30px) rotateY(90deg); opacity: 0; }
  to   { transform: translateY(0) rotateY(0); opacity: 1; }
}
/* 카드 교환: 덱 방향으로 나갔다가 새 카드가 돌아옴 */
.card.swap-out {
  transform: translateY(-46px) scale(.9);
  opacity: 0;
  transition: transform .26s ease-in, opacity .26s ease-in;
}
.card.swap-in { animation: swapIn .3s ease-out both; }
@keyframes swapIn {
  from { transform: translateY(-46px) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 쇼다운: 뒷면 → 앞면 뒤집기 */
.card.reveal { animation: flipReveal .5s ease both; }
@keyframes flipReveal {
  0%   { transform: rotateY(90deg); opacity: .4; }
  100% { transform: rotateY(0);     opacity: 1; }
}
/* 쇼다운 족보 라벨 등장 */
.rank-pop { animation: rankPop .4s ease both; animation-delay: .5s; }
@keyframes rankPop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 승자 강조 */
.seat-panel { position: relative; transition: filter .6s ease; }
.seat-panel.winner {
  border-color: #ffd94d;
  animation: winnerGlow 1.2s ease-in-out infinite alternate;
}
@keyframes winnerGlow {
  from { box-shadow: 0 0 8px rgba(255,217,77,.35); }
  to   { box-shadow: 0 0 22px rgba(255,217,77,.75); }
}

/* 승자 WIN 오버레이 (카드 위) */
/* WIN 표시: 카드를 가리지 않도록 반투명·작게 (사용자 지시 2026-09-17) */
.win-overlay {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; letter-spacing: 4px; color: #ffd968;
  text-shadow: 0 0 10px rgba(255,217,77,.7), 0 1px 3px rgba(0,0,0,.8);
  opacity: .35;
  animation: winPopSoft .5s ease-out .9s both;
}
.my-cards { position: relative; }
.my-cards .win-overlay { font-size: 28px; }
@keyframes winPop {
  from { opacity: 0; transform: scale(2.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes winPopSoft {
  from { opacity: 0; transform: scale(2.2); }
  to   { opacity: .35; transform: scale(1); }
}

/* 승자 스폿라이트: 승자 외 전원 어둡게 */
#view-table.spotlight .seat-panel:not(.winner) { filter: brightness(.4) saturate(.7); }
#view-table.spotlight .my-area.dim { filter: brightness(.5) saturate(.7); }
.my-area { transition: filter .6s ease; }

/* 중앙 결과 배너 (내 손익) */
.result-banner {
  margin: 4px auto 8px; padding: 8px 18px; border-radius: 8px;
  font-size: 24px; font-weight: 900; color: #ffe9a8; letter-spacing: 1px;
  background: linear-gradient(90deg, transparent, rgba(42,58,20,.92) 15%, rgba(42,58,20,.92) 85%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  animation: winPop .45s ease-out .9s both;
}
.result-banner.neg { color: #ff9a8a; }
.rank-banner {
  display: block; height: 46px; margin: 0 auto 2px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
  animation: winPop .5s ease-out .7s both;
}

/* 좌석 손익 색상 */
.seat .chips.pos { color: #7ee2a0; }
.seat .chips.neg { color: #ff9a8a; }

.my-area {
  max-width: 720px; margin: 0 auto 10px; text-align: center;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* 아이폰 홈바 영역 */
  background: rgba(0,0,0,.45); border: 1px solid #3c3a2a; border-radius: 12px;
  width: calc(100% - 16px);
}
.my-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.my-avatar { flex: none; width: 64px; }
.my-avatar img { width: 52px; height: 66px; object-fit: cover; border-radius: 4px; border: 1px solid #55503a; }
.my-avatar .name { font-size: 12px; color: #cfc9a8; }
.my-center { flex: 1; max-width: 320px; }
.my-cards { display: flex; justify-content: center; gap: 6px; min-height: 84px; }
.my-cards .card { width: 58px; height: 80px; cursor: pointer; }
.hand-rank { font-size: 13px; color: #ffd968; margin-top: 4px; min-height: 17px; }
.chips { font-size: 12px; color: #ffd968; }

/* 나가기 예약 상태 표시 */
#btn-leave.reserved { background: #6b4d16; color: #ffd968; border-color: #c9a03a; }

/* 오른쪽 액션 패널: 배팅판(8버튼)과 교환판(바꾸기/패스)이 같은 자리를 공유.
   높이를 고정(184px)해 배팅↔교환 전환·대기 어느 상태에서도 내 카드가 움직이지 않는다 */
.action-panel { flex: none; width: 150px; height: 184px; }
.action-panel > * { height: 100%; }

/* 교환(아침/점심/저녁) 버튼: 배팅판 자리를 그대로 차지하는 바꾸기/패스 2버튼 */
.draw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.draw-grid button {
  background: linear-gradient(#3a3a2c, #23231a); border: 1px solid #8a7c3a;
  color: #ffe9a8; font-size: 17px; font-weight: 600;
}
.draw-grid #btn-draw { background: linear-gradient(#5a5230, #3a3520); }
/* 바꾸기/패스 버튼 (체크박스 표기는 보류) */
.draw-grid button { position: relative; }
.draw-grid button i { position: absolute; right: 6px; bottom: 4px; font-style: normal; font-size: 10px; color: #8f8b70; }

/* 교환 예약 체크박스 (한게임: 다른 사람 턴에 미리 바꾸기/패스를 체크하면 내 턴에 자동 실행) */
.draw-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 2px; white-space: nowrap; }
.draw-grid .chk {
  width: 16px; height: 16px; border: 1px solid #8a7c3a; border-radius: 3px; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #6fe36f;
}
.draw-grid .chk.on { border-color: #6fe36f; background: rgba(40,80,40,.6); }
.draw-grid .chk.on::after { content: '✔'; }
.draw-grid button.reserved { border-color: #6fe36f; box-shadow: 0 0 8px rgba(111,227,111,.35); }

/* 교환 턴 내 카드 위 번호 라벨 (숫자키 1~4로 선택) */
.my-cards { position: relative; }
.my-cards .card { position: relative; }
.my-cards .card.numbered::before {
  content: attr(data-num); position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  min-width: 18px; padding: 0 4px; font-size: 11px; line-height: 16px; text-align: center;
  color: #d8d3b0; background: rgba(0,0,0,.55); border: 1px solid #55503a; border-radius: 3px;
}
.my-cards .card.numbered.selected::before { color: #ffd968; border-color: #ff8c2e; background: rgba(90,60,20,.85); }

/* 판이 없을 때 좌석 카드 자리에 "대기중" 표시 */
.cards.waiting::after, .my-cards.waiting::after {
  content: '대기중'; color: #6f6b52; font-size: 14px; letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px;
}

/* 교환 인디케이터: 아침/점심/저녁 아이콘 + 교환 장수, 진행 중 라운드 강조 */
.dh span { display: flex; align-items: center; justify-content: center; gap: 2px; }
.dh span i { font-style: normal; font-size: 9px; color: #9a8a4a; }
.dh span.now { color: #ffd968; }
.dh span.now i { color: #ffd968; }

/* 첫 판 시작 버튼 (배팅판 자리) */
.start-panel { display: flex; align-items: center; justify-content: center; }
.start-panel #btn-start {
  width: 100%; height: 100%; font-size: 18px; font-weight: 700; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(#6b5a1e, #3f3410); border: 2px solid #ffd968; color: #ffe9a8;
  animation: startPulse 1s ease-in-out infinite alternate;
}
.start-panel #btn-start small, .start-wait small { font-size: 12px; color: #ffd968; }
.start-wait { text-align: center; font-size: 13px; color: #b8b393; line-height: 1.6; }
@keyframes startPulse { from { box-shadow: 0 0 4px rgba(255,217,104,.3); } to { box-shadow: 0 0 16px rgba(255,217,104,.8); } }

/* 액션 버튼 그리드 (2열 4행) */
.action-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 4px; width: 100%;
}
.action-grid button {
  background: linear-gradient(#3a3a2c, #23231a); border: 1px solid #55503a;
  color: #d8d3b0; font-size: 14px; padding: 8px 4px; min-height: 40px;
}
.action-grid button:disabled { opacity: .28; }
.action-grid button:not(:disabled) { color: #ffe9a8; border-color: #8a7c3a; }
.action-grid button { position: relative; }
.action-grid button i {
  position: absolute; right: 5px; bottom: 3px; font-style: normal;
  font-size: 10px; color: #8f8b70;
}
.action-grid.my-turn { outline: 2px solid rgba(255,217,77,.55); outline-offset: 2px; border-radius: 6px; }

.actions { margin-top: 8px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.timer-bar {
  position: absolute; bottom: 8%; left: 25%; width: 50%; height: 6px;
  background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden;
}
#timer-fill { height: 100%; width: 0; background: #ff5252; transition: width .1s linear; }
/* 남의 턴: 해당 좌석 카드 아래 짧은 타임바 (내 턴에만 중앙 큰 바) */
.seat .seat-timer {
  display: none; height: 4px; margin: 3px auto 1px; width: 72%; border-radius: 2px;
  background: rgba(0,0,0,.45); overflow: hidden;
}
.seat .seat-timer.on { display: block; }
.seat .seat-timer-fill { height: 100%; width: 0; background: #ff5252; transition: width .1s linear; }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.result-panel { min-width: 300px; max-width: 420px; text-align: center; }
.result-panel h2 { color: #ffd968; margin-bottom: 10px; }
.result-line {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08); text-align: left;
}
.result-line.win { background: rgba(255,217,77,.08); border-radius: 6px; }
.result-line .rname { width: 88px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-line .rcards { display: flex; gap: 2px; }
.result-line .rcards .card { width: 26px; height: 36px; animation: none; }
.result-line .rrank { color: #cfc9a8; font-size: 12px; }
.result-line .rnet { margin-left: auto; font-weight: 700; }
.result-line .rnet.pos { color: #43c26a; }
.result-line .rnet.neg { color: #d64545; }
.result-total { margin-top: 10px; font-size: 13px; color: #cfc9a8; }
.result-total b { color: #ffd968; }

/* ── 하단: 내 영역 + 오른쪽 도크(게임로그/족보/내기록) ── */
.bottom-row {
  display: flex; gap: 10px; align-items: stretch; justify-content: center;
  max-width: 1000px; margin: 0 auto 10px; padding: 0 8px; width: 100%;
}
.bottom-row .my-area { flex: 1 1 auto; margin: 0; width: auto; min-width: 0; }
.dock {
  flex: none; width: 250px; display: flex; flex-direction: column;
  background: rgba(0,0,0,.5); border: 1px solid #3c3a2a; border-radius: 12px; overflow: hidden;
}
.dock-tabs { display: flex; border-bottom: 1px solid #3c3a2a; }
.dock-tabs button {
  flex: 1; min-height: 30px; padding: 4px 0; border-radius: 0; font-size: 12px;
  background: rgba(0,0,0,.35); color: #8f8b70; border-right: 1px solid #3c3a2a;
}
.dock-tabs button:last-child { border-right: 0; }
.dock-tabs button.on { background: rgba(70,64,32,.75); color: #ffd968; }
.dock-body { flex: 1; overflow-y: auto; padding: 8px 10px; font-size: 12px; text-align: left; min-height: 120px; max-height: 200px; }
.dock-log { color: #cfc9a8; line-height: 1.55; }
.dock-log .l-win { color: #ffe9a8; }
.dock-log .l-pos { color: #ffd968; }
.dock-log .l-neg { color: #e8d9a0; }
.dock-log .l-fee { color: #9ab8ff; }
.dock-log .l-sys { color: #8f8b70; }
.dock-log .l-div { color: #55503a; letter-spacing: -1px; overflow: hidden; white-space: nowrap; }
.dock-body .guide-row { padding: 4px 2px; }
.dock-body .guide-row b { width: 52px; font-size: 12px; }
.dock-body .gcards .card { width: 22px; height: 30px; }
.dock-body .hint { margin-top: 6px; }

/* 액션 패널 위 콜 금액 라벨 ("콜 4002골드") */
.action-col { flex: none; display: flex; flex-direction: column; align-items: stretch; }
.act-call { height: 18px; line-height: 18px; font-size: 12px; color: #ffe9a8; text-align: left; padding-left: 4px; }
/* 중앙 안내 (교환 턴: 바꿀 카드를 선택해주세요) */
.center-hint {
  margin-top: 4px; padding: 4px 8px; font-size: 12px; color: #ffe9a8;
  background: rgba(0,0,0,.55); border-radius: 4px;
}
/* 좌석 판 수 ("014판") */
.seat .games, .my-avatar .games { font-size: 10px; color: #8f8b70; text-align: center; }
/* 상대 카드 위 교환 장수 (이번 라운드) */
.seat .cards { position: relative; }
.seat .cards .draw-n {
  position: absolute; left: 4px; top: 2px; z-index: 3; pointer-events: none;
  font-size: 22px; font-weight: 900; color: #9dff3a; font-style: italic;
  text-shadow: 0 0 4px #000, 0 2px 3px #000;
}
/* 관전 중 좌석 */
.seat-panel.sitout { opacity: .6; }

/* ── 족보/내기록 패널 ── */
button.mini { min-height: 32px; padding: 4px 10px; font-size: 12px; background: #3a3a2c; border: 1px solid #55503a; }
.side-panel { max-width: 420px; max-height: 80vh; overflow-y: auto; text-align: center; }
.side-panel h2 { color: #ffd968; margin-bottom: 10px; }
.guide-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08); text-align: left;
}
.guide-row b { width: 64px; color: #ffe9a8; font-size: 14px; flex: none; }
.guide-row small { color: #9a957a; font-size: 11px; }
.gcards { display: flex; gap: 3px; }
.gcards .card { width: 30px; height: 41px; animation: none; }
.history-list { text-align: left; font-size: 13px; }
.history-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.history-row .res { width: 30px; font-weight: 700; flex: none; }
.history-row .res.w { color: #43c26a; }
.history-row .res.l { color: #d64545; }
.history-row .hcards { display: flex; gap: 2px; }
.history-row .hcards .card { width: 24px; height: 33px; animation: none; }
.history-row .amt { margin-left: auto; color: #ffd968; }
.history-row .dt { color: #8f8b70; font-size: 11px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #c0392b; color: #fff; padding: 10px 18px; border-radius: 8px;
  z-index: 30; font-size: 14px;
}

@media (max-width: 760px) {
  .bottom-row { flex-direction: column; }
  .dock { width: 100%; }
  .dock-body { max-height: 140px; min-height: 90px; }
}
@media (max-width: 560px) {
  /* 좁은 화면 탑바: 배지 축소, 족보/기록은 도크 탭으로 대체 */
  .topbar { padding: 4px 6px; gap: 4px; min-height: 48px; }
  .topbar button.tb { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .topbar button.tb i { font-size: 14px; }
  .topbar button.tb span { font-size: 9px; }
  #btn-guide, #btn-history { display: none; }
  #table-title { font-size: 12px; }
  .tb-gold { height: 40px; padding: 0 7px; font-size: 12px; }
  .topbar-left, .topbar-right { gap: 3px; }
  .bottom-row { padding: 0 8px; gap: 8px; }
  .seat { width: 148px; }
  .seat .avatar { width: 34px; }
  .seat .avatar img { width: 30px; height: 38px; }
  .seat .cards .card { width: 22px; height: 30px; }
  .seat .dh { display: none !important; } /* 좁은 화면: 좌석 폭(148px) 초과로 가로 스크롤 유발 → 숨김 */
  .seat .name { font-size: 11px; }
  .seat.slot-lb { bottom: 6%; }
  .seat.slot-rb { bottom: 6%; }
  .center-panel { width: 60vw; top: 50%; }
  .info-bar b { font-size: 14px; }
  .my-row { flex-wrap: wrap; }
  .my-avatar { display: none; }              /* 좁은 화면: 아바타 숨김 */
  .my-cards .card { width: 56px; height: 78px; }
  /* 좁은 화면: 배팅판(4열2행)과 교환판(바꾸기/패스)의 높이를 통일해 카드가 움직이지 않게 */
  .action-col { width: 100%; }
  .action-panel { width: 100%; height: 96px; }
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  .draw-grid { grid-template-columns: 1fr 1fr; }
  .actions { gap: 6px; }
  .actions button { flex: 1 1 28%; padding: 10px 4px; font-size: 14px; }
  .panel { margin: 8px; padding: 12px; }
}

/* 모바일 가로모드: 세로 공간 절약 */
@media (max-height: 500px) and (orientation: landscape) {
  .table { min-height: 170px; margin: 4px auto; }
  .my-area { padding: 6px 10px; margin-bottom: 4px; }
  .my-cards { min-height: 56px; }
  .my-cards .card { width: 40px; height: 56px; font-size: 15px; }
  .actions { margin-top: 4px; }
  .actions button, button { min-height: 38px; padding: 6px 10px; }
  .topbar { padding: 4px 10px; }
}

/* ── 상대 좌석 팝업 (유저 정보 + 추방투표) ── */
.seat { cursor: pointer; }
.badge.kick { background: #6b2020; border-color: #b04040; color: #ffb0a0; }
.seat-pop {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  min-width: 220px; padding: 14px 16px; z-index: 40;
  background: rgba(18, 15, 10, .97); border: 1px solid #8a7c3a; border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.seat-pop b { color: #ffd968; font-size: 16px; }
.seat-pop small { color: #b8b393; font-size: 12px; }
.seat-pop small.why { color: #cf9a6a; }
.seat-pop .kick-btn { background: #5a2020; border: 1px solid #b04040; color: #ffc0b0; padding: 8px; }
.seat-pop .kick-btn:disabled { opacity: .4; }
.seat-pop .close-btn { font-size: 12px; padding: 5px; }

/* ── 시간알리미 (한게임 4_1) ── */
.alarm-pop {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  min-width: 260px; padding: 16px 18px; z-index: 40;
  background: rgba(18, 15, 10, .97); border: 1px solid #8a7c3a; border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.alarm-pop h3 { color: #ffd968; font-size: 15px; margin: 0; text-align: center; }
.alarm-pop .stat-row { display: flex; justify-content: space-between; font-size: 13px; color: #d8d3ba; }
.alarm-pop .stat-row b { color: #ffe9a8; }
.alarm-pop .auto-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #b8b393; flex-wrap: wrap; }
.alarm-pop input[type=number] { width: 64px; background: #1e1a14; color: #e8e3cf; border: 1px solid #3c3a2a; border-radius: 6px; padding: 5px; }
.alarm-pop .mode { display: flex; gap: 10px; font-size: 12px; color: #b8b393; }
.alarm-pop .armed { font-size: 12px; color: #7ee2a0; text-align: center; }

/* ═══════════ 대기실 (사용자 제공 디자인 2026-09-17: 다크 골드, 사이드바+목록+상세 / 모바일 탭+카드+하단내비) ═══════════ */
:root { --lb-gold: #d4b46a; --lb-gold2: #f0d28a; --lb-bg: #0c0c0e; --lb-panel: rgba(22,22,26,.92); --lb-line: rgba(212,180,106,.22); --lb-text: #e8e4d8; --lb-muted: #8f8a7e; }
#view-lobby.active {
  background: radial-gradient(1200px 600px at 50% -10%, rgba(212,180,106,.12), transparent 60%),
              url('assets/img/lobby-bg.jpg') center/cover no-repeat #0c0c0e;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; color: var(--lb-text);
}
#view-lobby.active::before { content: ''; position: fixed; inset: 0; background: rgba(8,8,10,.72); pointer-events: none; }
#view-lobby > * { position: relative; }
.lb-top {
  display: flex; align-items: center; gap: 18px; padding: 12px 22px;
  background: linear-gradient(rgba(12,12,14,.95), rgba(12,12,14,.8)); border-bottom: 1px solid var(--lb-line);
}
.lb-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.lb-spade { font-size: 30px; color: var(--lb-gold); text-shadow: 0 0 12px rgba(212,180,106,.5); }
.lb-brand-text { font-size: 20px; letter-spacing: 2px; color: #f3ecd8; line-height: 1.05; }
.lb-brand-text b { color: var(--lb-gold2); }
.lb-brand-text small { display: block; font-size: 9px; letter-spacing: 3px; color: var(--lb-muted); }
.lb-tagline { font-size: 13px; color: var(--lb-muted); }
.lb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lb-user { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.45); border: 1px solid var(--lb-line); border-radius: 12px; padding: 5px 12px 5px 6px; }
.lb-user img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; border: 1px solid var(--lb-gold); }
.lb-user-text { display: flex; flex-direction: column; line-height: 1.2; }
.lb-user-text b { font-size: 14px; color: #fff; }
.lb-user-text small { font-size: 11px; color: var(--lb-gold); }
.lb-gold { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.5); border: 1px solid var(--lb-line); border-radius: 12px; padding: 5px 8px 5px 12px; }
.lb-coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a8, #c9962a 70%, #7a5a10); box-shadow: 0 0 6px rgba(255,217,104,.5); }
.lb-gold b { font-size: 16px; color: #fff; letter-spacing: .5px; }
.lb-plus { min-height: 26px; width: 26px; padding: 0; border-radius: 6px; background: rgba(212,180,106,.15); border: 1px solid var(--lb-line); color: var(--lb-gold2); font-size: 16px; line-height: 1; }
.lb-icons { display: flex; gap: 4px; }
.lb-icons button { min-height: 34px; width: 34px; padding: 0; background: transparent; border: 0; color: #cfc9b8; font-size: 16px; }
.lb-icons button:hover { color: var(--lb-gold2); }
.lb-menu { display: none; min-height: 36px; width: 36px; padding: 0; background: transparent; border: 1px solid var(--lb-line); color: #eee; font-size: 18px; }

.lb-tabs { display: none; }
.lb-body { flex: 1; display: flex; gap: 18px; width: 100%; max-width: 1320px; margin: 18px auto 0; padding: 0 22px; align-items: stretch; }
.lb-side { flex: none; width: 190px; display: flex; flex-direction: column; gap: 6px; }
.lb-side > button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #d8d3c4; font-size: 15px; }
.lb-side > button i { font-style: normal; width: 22px; text-align: center; color: var(--lb-gold); }
.lb-side > button span { display: flex; flex-direction: column; line-height: 1.15; }
.lb-side > button small { font-size: 9px; letter-spacing: 2px; color: var(--lb-muted); }
.lb-side > button.on { background: linear-gradient(90deg, rgba(212,180,106,.18), rgba(212,180,106,.04)); border-color: var(--lb-line); color: #fff; }
.lb-side > button:hover { border-color: var(--lb-line); }
.lb-side-foot { margin-top: auto; padding: 16px 14px; border: 1px solid var(--lb-line); border-radius: 12px; background: rgba(0,0,0,.35); font-size: 12px; color: #cfc9b8; line-height: 1.6; }
.lb-side-foot hr { border: 0; border-top: 1px solid var(--lb-line); margin: 10px 0; }
.lb-side-foot small { font-size: 9px; letter-spacing: 2px; color: var(--lb-muted); }

.lb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lb-head h1 { font-size: 28px; color: #fff; letter-spacing: 1px; margin-bottom: 4px; }
.lb-head p { font-size: 13px; color: var(--lb-muted); }
.lb-tools { display: flex; gap: 8px; }
.lb-search { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.5); border: 1px solid var(--lb-line); border-radius: 10px; padding: 0 12px; min-width: 240px; }
.lb-search span { color: var(--lb-muted); font-size: 13px; }
.lb-search input { flex: 1; background: transparent; border: 0; min-height: 40px; padding: 0; font-size: 14px; }
.lb-tools select, .lb-create select { background: rgba(0,0,0,.5); border: 1px solid var(--lb-line); border-radius: 10px; min-height: 40px; color: #eee; font-size: 14px; padding: 0 10px; }
.lb-create { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 12px; padding: 10px 12px; }
.lb-create input { flex: 1; min-width: 140px; background: rgba(0,0,0,.5); border: 1px solid var(--lb-line); border-radius: 10px; min-height: 40px; font-size: 14px; }
.lb-create button { min-height: 40px; background: rgba(212,180,106,.12); border: 1px solid var(--lb-line); color: #eee; font-size: 14px; }
.lb-create button.primary { background: linear-gradient(#e6c982, #c9a44f); color: #1c1808; border-color: #e6c982; }
.lb-create .sep { width: 1px; align-self: stretch; background: var(--lb-line); margin: 0 2px; }
.lb-create label.opt { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #d8d3c4; }
.lb-create label.opt input { min-height: 0; width: 16px; height: 16px; accent-color: #d4b46a; flex: none; min-width: 0; }
.big-quick { font-weight: 700; padding: 8px 16px; }

.lb-table { background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 14px; overflow: hidden; }
.lb-thead, .room-list li { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(110px, 1fr) minmax(64px, .6fr) minmax(64px, .6fr) auto; align-items: center; gap: 10px; padding: 0 18px; }
.lb-thead span, .rl-money, .rl-count, .rl-state { white-space: nowrap; }
.lb-thead { height: 44px; font-size: 13px; color: var(--lb-muted); border-bottom: 1px solid var(--lb-line); }
.room-list { list-style: none; }
.room-list li { min-height: 58px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .15s; }
.room-list li:hover, .room-list li.sel { background: rgba(212,180,106,.07); }
.room-list li:last-child { border-bottom: 0; }
.rl-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; color: #fff; }
.rl-name i { font-style: normal; width: 22px; text-align: center; font-size: 16px; }
.rl-name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-name .rl-opt { font-size: 10px; color: var(--lb-gold2); border: 1px solid var(--lb-line); border-radius: 4px; padding: 1px 5px; flex: none; }
.rl-money { font-size: 14px; color: #e8e4d8; }
.rl-count { font-size: 14px; color: #cfc9b8; }
.rl-count::before { content: '👤'; font-size: 12px; margin-right: 6px; opacity: .8; }
.rl-state { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.rl-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3ad27a; box-shadow: 0 0 6px #3ad27a; }
.rl-state.wait { color: #3ad27a; }
.rl-state.play { color: #ff5a5a; } .rl-state.play::before { background: #ff5a5a; box-shadow: 0 0 6px #ff5a5a; }
.rl-state.full { color: #8f8a7e; } .rl-state.full::before { background: #8f8a7e; box-shadow: none; }
.rl-btn { min-height: 38px; padding: 6px 12px; font-size: 14px; border-radius: 8px; background: linear-gradient(#e6c982, #c9a44f); color: #1c1808; font-weight: 700; border: 1px solid #e6c982; white-space: nowrap; }
.rl-btn.watch { background: rgba(255,255,255,.06); color: #cfc9b8; border-color: rgba(255,255,255,.12); font-weight: 400; }
.rl-btn:disabled { opacity: .35; }
.rl-empty { padding: 28px; text-align: center; color: var(--lb-muted); font-size: 13px; display: block; }
.rl-chev { display: none; }

.lb-detail { flex: none; width: 300px; background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; }
.lb-detail-empty { color: var(--lb-muted); font-size: 13px; text-align: center; padding: 40px 10px; }
.lb-detail-body { display: flex; flex-direction: column; gap: 12px; }
.lb-detail-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(212,180,106,.18), rgba(0,0,0,.4)); border: 1px solid var(--lb-line); }
.lb-detail-hero i { font-style: normal; font-size: 30px; color: var(--lb-gold2); }
.lb-detail-hero b { display: block; font-size: 17px; color: #fff; }
.lb-detail-hero small { font-size: 12px; color: #cfc9b8; }
.lb-detail-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.lb-detail-rows > div span { color: var(--lb-muted); }
.lb-detail-rows > div b { color: #fff; font-weight: 500; text-align: right; }
.lb-detail-rows > div.col { flex-direction: column; align-items: flex-start; }
.lb-detail-rows > div.col b { text-align: left; line-height: 1.5; color: #d8d3c4; }
#rd-join { background: linear-gradient(#e6c982, #c9a44f); color: #1c1808; font-weight: 700; border: 1px solid #e6c982; min-height: 46px; font-size: 16px; }
#rd-watch { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cfc9b8; }
.lb-foot { text-align: center; padding: 26px 10px 16px; color: var(--lb-muted); letter-spacing: 3px; font-size: 12px; }
.lb-foot b { display: block; color: #cfc9b8; font-weight: 500; }
.lb-foot small { font-size: 10px; }
.lb-bottom { display: none; }
.lb-sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 19; }
.soon-text { font-size: 14px; color: #d8d3c4; text-align: center; line-height: 1.6; }
.my-pop-head { display: flex; align-items: center; gap: 10px; }
.my-pop-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--lb-gold); }
.my-pop-head b { display: block; color: #fff; font-size: 15px; }
.my-pop-head small { color: var(--lb-gold2); font-size: 13px; }

/* ── 중간 폭: 상세 패널은 하단 시트로 (표 열 확보) ── */
@media (max-width: 1150px) {
  .lb-detail { position: fixed; left: 0; right: 0; bottom: 0; width: auto; border-radius: 18px 18px 0 0; z-index: 20; max-height: 80vh; overflow-y: auto; transform: translateY(110%); transition: transform .25s ease; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .lb-detail.open { transform: translateY(0); }
  .lb-detail-empty { display: none; }
}
/* ── 모바일 (디자인 우측 폰 시안) ── */
@media (max-width: 900px) {
  .lb-tagline, .lb-side, .lb-icons, .lb-user-text small, .lb-foot { display: none; }
  .lb-menu { display: inline-flex; align-items: center; justify-content: center; }
  .lb-top { padding: 10px 14px; gap: 10px; }
  .lb-brand-text { font-size: 16px; }
  .lb-brand-text small { display: none; }
  .lb-user { padding: 3px 8px 3px 4px; }
  .lb-user img { width: 28px; height: 28px; }
  .lb-user-text b { font-size: 13px; }
  .lb-gold { padding: 4px 6px 4px 10px; } .lb-gold b { font-size: 14px; }
  .lb-tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
  .lb-tabs button { flex: 1; min-height: 40px; padding: 6px 4px; background: rgba(0,0,0,.45); border: 1px solid var(--lb-line); color: #cfc9b8; font-size: 14px; border-radius: 10px; }
  .lb-tabs button.on { background: linear-gradient(#e6c982, #c9a44f); color: #1c1808; font-weight: 700; }
  .lb-body { flex-direction: column; margin: 10px auto 0; padding: 0 14px 84px; gap: 10px; }
  .lb-head h1 { font-size: 22px; }
  .lb-search { min-width: 0; flex: 1; }
  .lb-tools { width: 100%; }
  .lb-tools select { flex: none; }
  .lb-create { padding: 8px 10px; }
  .lb-create .sep, .lb-create label.opt { display: none; }
  .lb-create input { min-width: 120px; }
  .lb-thead { display: none; }
  .lb-table { border-radius: 12px; }
  .room-list li { grid-template-columns: 1fr auto auto; grid-template-areas: 'name count chev' 'money state chev'; padding: 10px 12px; row-gap: 2px; min-height: 64px; }
  .rl-name { grid-area: name; font-size: 15px; }
  .rl-money { grid-area: money; font-size: 12px; color: #cfc9b8; padding-left: 32px; }
  .rl-count { grid-area: count; font-size: 13px; }
  .rl-state { grid-area: state; font-size: 12px; justify-self: end; }
  .rl-btn { display: none; }
  .rl-chev { display: block; grid-area: chev; color: var(--lb-muted); font-size: 18px; padding-left: 6px; }
  .lb-bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; background: rgba(12,12,14,.96); border-top: 1px solid var(--lb-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .lb-bottom button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 0; color: #9f9a8e; font-size: 11px; min-height: 48px; padding: 4px; }
  .lb-bottom button i { font-style: normal; font-size: 18px; }
  .lb-bottom button.on { color: var(--lb-gold2); }
}
@media (max-width: 480px) {
  /* 폰: 디자인 시안처럼 로고 + 골드 + 메뉴만 (가로 스크롤 방지) */
  .lb-top { gap: 6px; padding: 8px 10px; }
  .lb-right { gap: 6px; min-width: 0; }
  .lb-user { display: none; }
  .lb-spade { font-size: 24px; }
  .lb-brand-text { font-size: 14px; letter-spacing: 1px; }
  .lb-gold { padding: 3px 5px 3px 8px; gap: 5px; }
  .lb-gold b { font-size: 13px; }
  .lb-coin { width: 14px; height: 14px; }
  .lb-plus { width: 22px; min-height: 22px; font-size: 14px; }
  .lb-menu { width: 32px; min-height: 32px; }
  .lb-head { flex-direction: column; align-items: stretch; }
}