/* r1.0.0 (2026-10-20)
   - 공통 스타일 첫 버전 스냅샷 (크롬 탭·상황판·관리자·약관)
*/
/* 내일은 주식왕 - 공통 스타일 (모바일 우선) */
:root {
  --bg: #070B1C;
  --surface: #121A3D;
  --surface-2: #1A2452;
  --line: #283470;
  --text: #F2F5FF;
  --sub: #A3B0DA;
  --muted: #6D7AA8;
  --gold: #FFD84D;
  --gold-dark: #FFB020;
  --up: #FF4D6D;
  --down: #3DA5FF;
  --danger: #FF4D6D;
  --ok: #3DF2A5;
  --violet: #9B6BFF;
  --tabpanel: #1C2759;
  --radius: 16px;
  --topbar-h: 56px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(80,60,200,.35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(20,90,140,.35), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- 상단 바 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(11, 23, 48, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; min-width: 0; }
.brand img { flex: none; border-radius: 10px; }
.brand b { color: var(--gold); font-weight: 900; }
.brand-name { white-space: nowrap; letter-spacing: -.3px; }
.brand-sub {
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(90deg, #ff4d6d, #9b6bff); color: #fff; font-size: 12px; font-weight: 900;
  box-shadow: 0 0 14px rgba(255,77,109,.35);
}
@media (max-width: 420px) {   /* 좁은 휴대폰: 문구를 이름 아래 줄로 */
  .brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; font-size: 17px; }
  .brand img { grid-row: 1 / 3; width: 36px; height: 36px; }
  .brand-sub { justify-self: start; padding: 1px 7px; font-size: 10.5px; box-shadow: none; }
}
.btn-mypage {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
}
.btn-mypage.on { border-color: var(--gold); color: var(--gold); }

/* ---------- 본문 ---------- */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
}
.view { display: none; animation: fade .2s ease; }
.view.active { display: block; }
.view.narrow { max-width: 480px; margin: 0 auto; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-title { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; margin: 8px 0 20px; }
.back { font-size: 30px; line-height: 1; padding: 0 8px 4px 0; color: var(--sub); }
.hint { color: var(--sub); margin: 0 0 16px; font-size: 14px; }

/* ---------- 카드 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-head h2 { font-size: 16px; font-weight: 800; margin: 0; }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- 메인 히어로 ---------- */
.hero {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 4px 28px;
}
.eyebrow { color: var(--gold); font-size: 13px; font-weight: 600; margin: 0; }
.hero h1 { font-size: 34px; line-height: 1.2; font-weight: 800; margin: 4px 0 8px; letter-spacing: -.5px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.lead { color: var(--sub); margin: 0 0 20px; }
.hero-cta { display: flex; gap: 8px; }
.hero-cta .btn { flex: 1; }
.hero-hello { font-size: 16px; margin: 0; }
.hero-hello b { color: var(--gold); }
.hero-img { width: 100%; max-width: 360px; height: auto; margin: 8px auto 0; }

.index-list, .rank-list, .steps { list-style: none; margin: 0; padding: 0; }
.index-list li {
  display: grid; grid-template-columns: 1fr auto; row-gap: 2px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.index-list li:first-child { border-top: 0; padding-top: 0; }
.index-list li > span:first-child { color: var(--sub); font-size: 13px; grid-column: 1 / -1; }
.index-list b { font-size: 18px; font-weight: 800; }
.index-list .up, .index-list .down { align-self: center; font-size: 14px; font-weight: 600; }

.rank-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.rank {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); font-size: 13px; font-weight: 800;
}
.rank.r1 { background: var(--gold); color: #3A2A00; }
.rank.r2 { background: #C9D3E6; color: #1B2440; }
.rank.r3 { background: #D99A6C; color: #3A1F0B; }
.rank-list .name { flex: 1; font-weight: 600; }
.rank-list .up { font-weight: 800; }

.steps li { display: flex; gap: 12px; padding: 8px 0; }
.steps b {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255, 200, 61, .15); color: var(--gold);
}
.steps strong { display: block; font-size: 15px; }
.steps p { margin: 2px 0 0; color: var(--sub); font-size: 13px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 18px;
  border-radius: 12px; border: 0;
  font-weight: 700; font-size: 16px;
  white-space: nowrap;
  transition: filter .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--gold); color: #2A1E00; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sub {
  flex: none; height: 48px; padding: 0 14px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); font-size: 14px;
}
.btn-block { width: 100%; }

/* ---------- 폼 ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--sub); }
.field > span em { font-style: normal; color: var(--muted); font-weight: 400; }
.field input, .code-wrap input {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 16px; /* iOS 확대 방지 */
  outline: none;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--gold); }
.field input:disabled { color: var(--sub); }
.field input.invalid { border-color: var(--danger); }
.row { display: flex; gap: 8px; }
.row > input, .row > .code-wrap { flex: 1; min-width: 0; }
.pw-wrap, .code-wrap { position: relative; }
.pw-wrap input { padding-right: 56px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 36px; padding: 0 10px; border: 0; background: none;
  color: var(--muted); font-size: 13px;
}
.ta-timer {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--up); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.field-msg { font-size: 13px; min-height: 0; }
.field-msg.ok, .form-msg.ok { color: var(--ok); }
.field-msg.err, .form-msg { color: var(--danger); }
.form-msg { margin: 0; font-size: 14px; min-height: 0; }
.form-msg:empty, .field-msg:empty { display: none; }
.tel-auth { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.tel-auth.verified .ta-tel { border-color: var(--ok); }

.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--sub); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); }

.links { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0; font-size: 14px; color: var(--sub); }
.links i { width: 1px; height: 12px; background: var(--line); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 24px 0 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.social { display: flex; flex-direction: column; gap: 8px; }
.sbtn {
  position: relative;
  height: 48px; border-radius: 12px; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px;
}
.sbtn img { width: 20px; height: 20px; position: absolute; left: 16px; }
.sbtn.kakao { background: #FEE500; color: #191919; }
.sbtn.naver { background: #03C75A; color: #fff; }
.sbtn.google { background: #fff; color: #1F1F1F; }

/* ---------- 가입 단계 ---------- */
.stepper { display: flex; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: s; }
.stepper li {
  flex: 1; text-align: center; font-size: 12px; color: var(--muted);
  padding-top: 10px; border-top: 3px solid var(--line);
}
.stepper li.on { color: var(--gold); border-color: var(--gold); font-weight: 700; }
.step.done { text-align: center; padding: 24px 0; }
.step.done img { margin: 0 auto 16px; }
.step.done h2 { font-size: 22px; margin: 0 0 8px; }
.step.done p { color: var(--sub); margin: 0 0 24px; }

/* ---------- 탭 ---------- */
.tabs { display: flex; background: var(--surface); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.tabs a { flex: 1; text-align: center; padding: 10px 0; border-radius: 9px; font-weight: 600; color: var(--sub); }
.tabs a.on { background: var(--surface-2); color: var(--text); }
.tab-panel { display: none; }
.tab-panel.on { display: block; }
.result {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-align: center;
}
.result .big { font-size: 22px; font-weight: 800; color: var(--gold); margin: 6px 0; letter-spacing: 1px; }
.result p { margin: 4px 0; color: var(--sub); font-size: 14px; }
.result .btn { margin-top: 16px; }

/* ---------- 마이페이지 ---------- */
.profile { display: flex; align-items: center; gap: 14px; margin: 8px 0 20px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--up));
  color: #2A1E00; font-size: 22px; font-weight: 800;
}
.profile strong { font-size: 20px; font-weight: 800; }
.profile p { margin: 2px 0 0; color: var(--sub); font-size: 13px; }
.info { display: grid; grid-template-columns: 88px 1fr; row-gap: 10px; margin: 0; font-size: 14px; }
.info dt { color: var(--sub); }
.info dd { margin: 0; word-break: break-all; }
.chip {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 8px; margin-right: 4px;
}
.chip.kakao { background: #FEE500; color: #191919; }
.chip.naver { background: #03C75A; color: #fff; }
.chip.google { background: #fff; color: #1F1F1F; }
.menu {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 20px;
}
.menu a, .menu button {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px; padding: 0 18px;
  background: none; border: 0; border-top: 1px solid var(--line);
  text-align: left; font-size: 15px; font-weight: 600;
}
.menu > :first-child { border-top: 0; }
.menu a::after { content: "›"; color: var(--muted); font-size: 22px; }
.menu a span { margin-left: auto; margin-right: 10px; color: var(--muted); font-size: 13px; font-weight: 400; }
.menu button { color: var(--sub); }
.withdraw-link { display: block; text-align: center; color: var(--muted); font-size: 13px; text-decoration: underline; }

.notice {
  background: rgba(255, 77, 94, .08); border: 1px solid rgba(255, 77, 94, .35);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; font-size: 14px;
}
.notice ul { margin: 8px 0 0; padding-left: 18px; color: var(--sub); }
.notice li { margin: 4px 0; }
.notice b { color: var(--text); }

/* ---------- 하단 탭바 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(11, 23, 48, .96);
  border-top: 1px solid var(--line);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; color: var(--muted);
}
.tabbar svg { width: 24px; height: 24px; fill: currentColor; }
.tabbar a.on { color: var(--gold); }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px;
  background: #F1F4FB; color: #0B1730; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 데이트레이딩 게임 ---------- */
.card.game-chart, .game-side .card {
  background: linear-gradient(180deg, rgba(26,36,82,.92), rgba(16,24,58,.94));
  border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--sub); }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--sub); }

/* ? 툴팁: 마우스를 올리거나 누르면 보인다 */
.q {
  position: relative; width: 18px; height: 18px; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--sub); font-size: 12px; font-weight: 900; line-height: 16px; cursor: help;
}
.q::after {
  content: attr(data-tip); position: absolute; z-index: 30; left: -12px; top: calc(100% + 8px);
  width: 250px; padding: 10px 12px; border-radius: 10px;
  background: #fff; color: #10183a; font-size: 13px; font-weight: 600; line-height: 1.45; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: normal; word-break: keep-all;
  max-width: calc(100vw - 48px); pointer-events: none;
  display: none;   /* 숨긴 상태에서도 폭을 차지하면 모바일 가로 스크롤이 생긴다 */
}
.q:hover::after, .q:focus::after, .q.open::after { display: block; }
.q.q-left::after { left: auto; right: -12px; }   /* 오른쪽 끝에 있는 ? 는 왼쪽으로 펼친다 */

/* 디버그 바 (관리자) */
.dbg-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 14px;
  border-radius: 12px; color: #ffcf8a; font-size: 14px;
  background: repeating-linear-gradient(45deg, #3a1d00, #3a1d00 12px, #2c1600 12px, #2c1600 24px);
}
.dbg-bar input, .dbg-bar select { background: #1b0f00; border: 1px solid #a8641a; color: #ffd9a3; border-radius: 8px; padding: 5px 8px; color-scheme: dark; }
.dbg-bar button { background: #ff9a1f; color: #2a1500; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 900; }
.dbg-bar button.ghost { background: transparent; border: 1px solid #a8641a; color: #ffcf8a; }
.dbg-bar button.on { background: #ffd34d; }
.dbg-note { margin-left: auto; font-weight: 700; opacity: .85; }

/* 지수 탭 */
/* 지수 탭: 크롬 브라우저 탭 모양. 선택 탭은 아래 차트 카드와 같은 색·테두리로 이어지고(카드 윗선을 1px 덮음),
   아래 바깥 모서리는 테두리 선과 함께 바깥으로 휘어진다 */
.mkt-tabs {
  --tab-bg: #1a2452;            /* 차트 카드 위쪽 색과 같게 */
  position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 0;
  margin: 0 0 -1px; padding: 0;
}
.mkt-tabs button {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; margin: 0 1px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0;
  background: transparent; color: var(--sub); font-weight: 800;
}
.mkt-tabs button:not(.on):not(.off):not(.dbg-toggle):hover { background: rgba(255,255,255,.05); color: var(--text); }
.mkt-tabs button:not(.on) + button:not(.on):not(.dbg-toggle)::before {   /* 선택 안 된 탭 사이 구분선 */
  content: ''; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 1px; background: var(--line);
}
.mkt-tabs button.on {
  z-index: 3; height: 46px;
  background: var(--tab-bg); border-color: var(--line); border-top: 3px solid #ffd84d; color: var(--gold);
  box-shadow: 0 -4px 14px rgba(255,216,77,.35);
}
.mkt-tabs button.on::before, .mkt-tabs button.on::after {   /* 아래 바깥 모서리 휨: 테두리 선 + 탭 색, 이 칸 안에서만 그린다 */
  content: ''; position: absolute; bottom: 0; width: 13px; height: 13px; pointer-events: none;
}
.mkt-tabs button.on::before {
  left: -13px;
  background: radial-gradient(circle at 0 0, transparent 12px, var(--line) 12px, var(--line) 13px, var(--tab-bg) 13.5px);
}
.mkt-tabs button.on::after {
  right: -13px;
  background: radial-gradient(circle at 100% 0, transparent 12px, var(--line) 12px, var(--line) 13px, var(--tab-bg) 13.5px);
}
.mkt-tabs button.on:first-child::before { display: none; }   /* 첫 탭은 카드 왼쪽 선과 바로 이어진다 */
.mkt-tabs button.off { opacity: .35; cursor: default; }
.mkt-tabs .dbg-toggle {
  margin: 0 0 6px auto; height: 34px; border: 1px solid #a8641a; border-radius: 10px;
  color: #ffcf8a; background: #2c1600;
}
.mkt-tabs .dbg-toggle.on { background: #ff9a1f; color: #2a1500; border-color: #ff9a1f; }
.mkt-tabs .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.mkt-tabs button.on .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.mkt-tabs .full { display: none; }

/* 차트 카드 */
.card.game-chart {
  padding: 0; overflow: hidden; margin-bottom: 14px;
  border-top-left-radius: 0;                                   /* 지수 탭이 붙는 자리 */
  background: linear-gradient(180deg, #1a2452, #10183a 30%);   /* 위쪽은 불투명: 선택 탭(#1a2452)과 같은 색 */
}
.gc-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 16px 10px; }
.gc-name { font-size: 15px; font-weight: 800; color: var(--sub); }
.gc-live {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 2px;
  font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 6px; background: var(--muted); color: #fff;
}
.gc-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.gc-live.on { background: var(--up); }
.gc-live.on i { animation: blink 1s infinite; }
.gc-live.debug { background: #ff9a1f; color: #2a1500; }
@keyframes blink { 50% { opacity: .2; } }
.gc-price { font-size: 32px; font-weight: 900; letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gc-chg { font-size: 15px; font-weight: 900; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); }
.gc-chg.up { background: rgba(255,77,109,.16); color: var(--up); }
.gc-chg.down { background: rgba(61,165,255,.16); color: var(--down); }
.gc-clock { margin-left: auto; color: var(--sub); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-body { position: relative; background: #0A1024; aspect-ratio: 1280 / 672; }
.gc-body img, .gc-body canvas { display: block; width: 100%; height: 100%; }
.gc-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gc-empty {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  color: var(--sub); background: #0A1024;
}
.gc-fx {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  padding: 14px 24px; border-radius: 16px; white-space: nowrap;
  background: linear-gradient(135deg, #ffe07a, #ffb020); color: #3a2400; font-weight: 900; font-size: 18px;
  box-shadow: 0 0 40px rgba(255,200,60,.6); animation: pop 2.4s ease forwards;
}
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}
/* 1분 상황 채팅 (차트 아래) */
.gc-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; min-height: 0; }
.gc-chat-now {
  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px 10px;
  padding: 12px 14px; border-radius: 14px; background: #fff; color: #10183a; border: 2px solid #0a1030;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.gc-chat-now .lab { font-size: 11px; font-weight: 900; color: #0a1030; background: var(--gold); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.gc-chat-now time { font-weight: 900; color: #5a6690; font-variant-numeric: tabular-nums; }
.gc-chat-now p { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.45; word-break: keep-all; }
@media (max-width: 767px) {
  .gc-chat-now { grid-template-columns: auto 1fr auto; }
  .gc-chat-now p { grid-column: 1 / -1; grid-row: 2; font-size: 18px; }
  .gc-chat-now .q { grid-column: 3; grid-row: 1; justify-self: end; }
}
.gc-chat-now.ev { background: linear-gradient(90deg, #fff6cf, #ffffff); border-color: var(--gold); }
.gc-chat-now .q { background: #eef1fa; border-color: #c9d0e6; color: #5a6690; }
.gc-chat-now.flash { animation: chatflash 1s ease; }
@keyframes chatflash { 0% { box-shadow: 0 0 0 0 rgba(255,216,77,.9); transform: scale(1.01); } 100% { box-shadow: 0 0 0 14px rgba(255,216,77,0); transform: none; } }
.gc-chat-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; max-height: 96px; }
.gc-chat-hist li { display: flex; gap: 8px; font-size: 13px; color: var(--sub); line-height: 1.45; }
.gc-chat-hist li time { flex: none; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.gc-chat-hist li.ev { color: var(--gold); }

/* 오른쪽 */
.game-side { display: flex; flex-direction: column; gap: 14px; }
.game-side .card { margin: 0; padding: 16px 18px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-big { font-size: 30px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; margin: 2px 0 10px; }
.sc-big small { font-size: 16px; }
.sc-big.up, .up-t { color: var(--up); }
.sc-big.down, .down-t { color: var(--down); }
.sc-big.bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.06); } }
.sc-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; margin: -4px 0 10px; font-size: 13.5px; color: var(--sub); font-weight: 700; }
.sc-total span { display: inline-flex; align-items: center; gap: 4px; }
.sc-total .sc-qty { font-style: normal; font-weight: 900; font-size: 12.5px; padding: 1px 8px; border-radius: 999px; background: #0a1030; color: var(--muted); cursor: default; }
.sc-total .sc-qty.has { color: var(--gold); background: rgba(255,216,77,.12); }
.sc-total b { color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
/* 누적 수익률(원금 기준) · 포인트 충전 */
.cum { font-size: 13px; font-weight: 800; color: var(--sub); padding: 3px 10px; border-radius: 999px; background: #0a1030; }
.cum b { font-size: 15px; font-weight: 900; color: var(--text); margin-left: 2px; }
.cum.up b { color: var(--up); } .cum.down b { color: var(--down); }
.sc-total b.zero { color: var(--muted); }
/* 보유 표 (손익 카드) */
.hold-table { width: 100%; margin: 0 0 10px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hold-table th { padding: 4px 8px; text-align: right; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.hold-table th:first-child { text-align: left; color: var(--sub); }
.hold-table td { padding: 6px 8px; text-align: right; font-weight: 800; color: var(--muted); background: #0a1030; }
.hold-table td:first-child { text-align: left; border-radius: 8px 0 0 8px; }
.hold-table td:last-child { border-radius: 0 8px 8px 0; }
.hold-table tr + tr td { border-top: 4px solid transparent; background-clip: padding-box; }
.hold-table tr.has td { color: var(--text); }
.hold-table tr.up.has td:first-child { color: var(--up); }
.hold-table td.up-t { color: var(--up) !important; }
.hold-table td.down-t { color: var(--down) !important; }
.hold-table tr.down.has td:first-child { color: var(--down); }
.refill-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -2px 0 10px; padding: 12px 14px;
  border-radius: 14px; background: linear-gradient(90deg, rgba(255,77,109,.18), rgba(255,154,31,.18));
  border: 1px solid rgba(255,154,31,.5);
}
.refill-box p { flex: 1 1 200px; margin: 0; font-size: 13.5px; font-weight: 800; }
.refill-box .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.refill-pop h2 { text-align: center; }
.rf-offer { margin: 6px 0 14px; padding: 14px; border-radius: 14px; text-align: center; font-size: 16px; background: rgba(255,216,77,.12); }
.rf-offer b { color: var(--gold); font-size: 20px; }
.rf-bank { margin: 0 0 12px; display: grid; gap: 6px; }
.rf-bank div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--bg); }
.rf-bank dt { color: var(--sub); } .rf-bank dd { margin: 0; font-weight: 900; user-select: all; }
.rf-notes { margin: 10px 0; padding-left: 18px; font-size: 13px; color: var(--sub); line-height: 1.6; }
.rf-notes b { color: var(--text); }
.refill-pop > .btn { margin-top: 8px; }
/* 관리자 충전 승인 */
.admin-points { max-width: 820px; margin: 0 auto; }
.ap-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ap-tabs button { flex: 1; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--sub); font-weight: 800; }
.ap-tabs button.on { color: var(--gold); border-color: var(--gold); }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ap-row.requested { border-color: rgba(255,154,31,.6); }
.ap-row p { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
.ap-st { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--sub); }
.ap-row.approved .ap-st { color: var(--ok); } .ap-row.rejected .ap-st { color: var(--up); }
.ap-btns { display: flex; gap: 6px; }
.ap-btns .btn { height: 38px; padding: 0 14px; font-size: 13.5px; }

/* 딸깍이 오늘 수익률 (손익 카드 아래) */
.sc-bot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 12px; background: rgba(155,107,255,.14);
  font-size: 13.5px; font-weight: 800; color: #c7b0ff;
}
.sc-bot span { display: inline-flex; align-items: center; gap: 6px; }
.sc-bot b { font-size: 16px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.sc-bot b.up { color: var(--up); } .sc-bot b.down { color: var(--down); }
.sc-bot b small { font-size: 11px; color: var(--sub); font-weight: 700; margin-left: 4px; }

.oc-price { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.oc-price b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sample-chip {
  display: inline-block; vertical-align: 4px; margin-right: 8px; padding: 2px 8px; border-radius: 6px;
  background: #ff9a1f; color: #2a1500; font-size: 12px; font-weight: 900; letter-spacing: 0;
}
.oc-price b small { font-size: 13px; color: var(--sub); font-weight: 700; margin-left: 4px; }
.oc-qty { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; margin-top: 6px; }
.oc-qty button { height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 24px; font-weight: 900; }
.oc-qty input {
  min-width: 0; height: 50px; border-radius: 12px; border: 2px solid var(--gold); background: #0a1030;
  color: var(--text); font-size: 22px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums;
}
.oc-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.oc-quick button { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--sub); font-size: 13px; font-weight: 800; }
.oc-quick button:hover { color: var(--gold); border-color: var(--gold); }
.oc-amt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 8px; }
.oc-amt input {
  min-width: 0; height: 40px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: #0a1030; color: var(--text); font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums;
}
.oc-amt input:focus { outline: none; border-color: var(--gold); }
.oc-amt input::placeholder { color: var(--muted); font-weight: 600; font-size: 13px; }
.oc-amt em { position: absolute; right: 12px; font-style: normal; color: var(--sub); font-weight: 800; pointer-events: none; }
.oc-hint { font-size: 12.5px; color: var(--sub); margin: 2px 0 10px; line-height: 1.55; }
.oc-hint b { color: var(--text); }
.oc-hint .warn { color: #ffb36b; font-weight: 800; }
/* 매수 / 인버스 매수 탭: 웹브라우저 탭 모양 (선택 탭과 패널이 한 몸, 아래 바깥 모서리는 안쪽으로 휜다) */
.otabs { display: flex; align-items: flex-end; gap: 2px; padding: 0; margin-top: 2px; overflow: hidden; padding-right: 12px; }
.otab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; flex: 1; max-width: 190px; height: 38px; padding: 0 16px;
  border: 0; border-radius: 10px 10px 0 0; background: transparent;
  color: var(--muted); font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.otab:hover:not(.on) { background: rgba(255,255,255,.05); color: var(--sub); }
.otab:not(.on) + .otab:not(.on) {   /* 선택 안 된 탭 사이 구분선 */
  background-image: linear-gradient(var(--line), var(--line));
  background-size: 1px 18px; background-position: left center; background-repeat: no-repeat;
}
.otab.on { background: var(--tabpanel); z-index: 1; }
.otab.on.up { color: #ff7a92; }
.otab.on.down { color: #6cbcff; }
/* 선택 탭 아래 바깥 모서리가 패널 쪽으로 휘어 이어지는 모양 */
.otab.on::before, .otab.on::after {
  content: ''; position: absolute; bottom: 0; width: 10px; height: 10px; pointer-events: none;
}
.otab.on::before { left: -10px; border-bottom-right-radius: 10px; box-shadow: 4px 4px 0 4px var(--tabpanel); }
.otab.on::after { right: -10px; border-bottom-left-radius: 10px; box-shadow: -4px 4px 0 4px var(--tabpanel); }
.otabs .otab.on:first-child::before { display: none; }   /* 패널 왼쪽 끝에 붙은 첫 탭은 왼쪽 휨 없음 */
.otab .hold-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.opanel { padding: 14px 14px 12px; border-radius: 12px; background: var(--tabpanel); margin-bottom: 10px; }
.opanel.first { border-top-left-radius: 0; }
.opanel .gbtn.buy { width: 100%; }
.opanel.down .gbtn.buy { background: linear-gradient(180deg, #5bb6ff, #1f7fe0); }
.seed-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); }
.seed-pick select {
  height: 28px; padding: 0 26px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: #0a1030;
  color: var(--text); font-size: 13px; font-weight: 800; color-scheme: dark; appearance: auto;
}
.seed-pick select:disabled { opacity: .75; cursor: not-allowed; }
.oc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gbtn {
  height: 58px; border: 0; border-radius: 16px; color: #fff; font-size: 18px; font-weight: 900;
  box-shadow: 0 6px 0 rgba(0,0,0,.35); transition: transform .06s, box-shadow .06s, filter .15s;
}
.gbtn small { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; margin-top: 1px; }
.gbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.gbtn:hover:not(:disabled) { filter: brightness(1.08); }
.gbtn:disabled { opacity: .4; cursor: default; }
.gbtn.buy { background: linear-gradient(180deg, #ff6b85, #e8304f); }
.gbtn.inv { background: linear-gradient(180deg, #5bb6ff, #1f7fe0); }
.gbtn.sell { display: block; width: 100%; grid-column: 1 / -1; height: 52px; background: linear-gradient(180deg, #ffe07a, #f5b318); color: #3a2400; }
.oc-hold { margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: #0a1030; border: 1px dashed var(--line); font-size: 13.5px; color: var(--sub); }
.oc-hold b { color: var(--text); }
.oc-pending {
  display: block; margin-top: 6px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid rgba(255,216,77,.7); background: rgba(255,216,77,.12);
  color: var(--gold); font-weight: 900; animation: pendblink 1.1s ease-in-out infinite;
}
@keyframes pendblink { 50% { opacity: .35; border-color: rgba(255,216,77,.15); } }
@media (prefers-reduced-motion: reduce) { .oc-pending { animation: none; } }
.oc-login { margin-top: 12px; }
.order-card.guest .gbtn { opacity: .45; }

.rk-title { font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.rk-tabs { display: flex; gap: 6px; margin: 10px 0 6px; }
.rk-tabs button { flex: 1; height: 34px; border: 0; border-radius: 10px; background: #0a1030; color: var(--sub); font-weight: 800; font-size: 14px; }
.rk-tabs button.on { background: var(--surface-2); color: var(--gold); }
.rk-list { list-style: none; margin: 0; padding: 0; }
.rk-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; font-weight: 700; }
.rk-list .medal { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: #232d5e; color: var(--sub); }
.rk-list .m1 { background: radial-gradient(circle at 30% 30%, #fff3b0, #ffc400 60%, #c98a00); color: #4a3000; box-shadow: 0 0 12px rgba(255,200,0,.6); }
.rk-list .m2 { background: radial-gradient(circle at 30% 30%, #fff, #c9d3e6 60%, #8d99b5); color: #1b2440; }
.rk-list .m3 { background: radial-gradient(circle at 30% 30%, #ffd8b8, #d99a6c 60%, #8f5a33); color: #3a1f0b; }
.rk-list .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-list .v { font-weight: 900; font-variant-numeric: tabular-nums; }
.rk-list li.me { margin-top: 4px; padding: 6px 8px; border-radius: 10px; background: rgba(255,216,77,.10); color: var(--gold); }
.rk-list li.empty { justify-content: center; color: var(--muted); padding: 22px 0; }

/* 상단 바 게임 규칙 버튼 (로그인 버튼과 같은 크기·모양) */
.btn-rules {
  margin-left: auto; margin-right: 8px;
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); color: var(--gold);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.btn-rules:hover { border-color: var(--gold); }
@media (max-width: 380px) { .btn-rules span { display: none; } }
body.staged .btn-rules { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 15px; margin-right: 10px; }
body.live .btn-rules { display: none; }

/* 차트 범례 + 딸깍이 마커 레이어 켜기/끄기 */
.gc-legend {
  position: absolute; top: 8px; left: 10px; z-index: 3; display: flex; gap: 6px;
  font-size: 12px; font-weight: 800;
}
.gc-legend > * { padding: 4px 10px; border-radius: 8px; background: rgba(10,16,36,.85); border: 1px solid var(--line); }
.gc-legend .lg-me { color: #ff7a92; }
.gc-legend .lg-bot { color: #b99bff; cursor: pointer; }
.gc-legend .lg-bot b { margin-left: 2px; }
.gc-legend .lg-bot:not(.on) { color: var(--muted); }
.gc-marks.bot-layer.off { display: none; }

/* 게임 규칙 페이지 */
.rules-page { max-width: 820px; margin: 0 auto; }
.rules-lead { color: var(--sub); margin: -8px 0 18px; font-size: 15px; }
.rules-lead b { color: var(--text); }
.rules-card {
  margin-bottom: 14px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(26,36,82,.92), rgba(16,24,58,.94)); border: 1px solid var(--line);
}
.rules-card.hl { border-color: rgba(255,216,77,.55); box-shadow: 0 0 0 3px rgba(255,216,77,.08); }
.rules-card h2 { margin: 0 0 10px; font-size: 18px; font-weight: 900; }
.rules-points { margin: 0; padding-left: 20px; line-height: 1.7; color: var(--sub); }
.rules-points b { color: var(--text); }
.rules-points ul { margin: 2px 0; padding-left: 18px; }
.rules-points .eg { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--gold); }
.rules-time { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rules-time li { position: relative; padding: 12px 10px; border-radius: 12px; background: #0a1030; text-align: center; }
.rules-time b { display: block; font-size: 20px; font-weight: 900; color: var(--gold); }
.rules-time span { font-size: 13px; color: var(--sub); }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.rg { padding: 12px 14px; border-radius: 12px; background: #0a1030; border-top: 3px solid var(--line); }
.rg b { display: block; margin-bottom: 4px; }
.rg p { margin: 0; font-size: 13.5px; color: var(--sub); line-height: 1.55; }
.rg em { font-style: normal; font-weight: 900; }
.rg.up { border-top-color: var(--up); } .rg.up em { color: var(--up); }
.rg.down { border-top-color: var(--down); } .rg.down em { color: var(--down); }
.rg.sell { border-top-color: var(--gold); }
.rules-table { width: 100%; margin: 12px 0 4px; border-collapse: collapse; font-size: 14px; }
.rules-table th, .rules-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rules-table th { color: var(--sub); font-weight: 700; }
.rules-table td.warn { color: #ffb36b; font-weight: 900; }
.rules-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.rules-foot { margin: 18px 4px; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
  .rules-time { grid-template-columns: repeat(2, 1fr); }
  .rules-grid { grid-template-columns: 1fr; }
}

/* 주문 최종 확인 */
.ocf h2 { text-align: center; margin-bottom: 4px; }
.ocf-kind { margin: 0 0 12px; text-align: center; font-size: 20px; font-weight: 900; }
.ocf-kind.up { color: var(--up); } .ocf-kind.down { color: var(--down); } .ocf-kind.sell { color: var(--gold); }
.ocf-rows { margin: 0; display: grid; gap: 6px; }
.ocf-rows div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg); }
.ocf-rows dt { color: var(--sub); } .ocf-rows dd { margin: 0; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.ocf-rows .big dd { font-size: 18px; color: var(--gold); }
.ocf-warn { margin: 10px 0 0; padding-left: 18px; color: #ffb36b; font-size: 13px; font-weight: 800; line-height: 1.6; }
.ocf-warn:empty { display: none; }
.ocf-when { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--sub); }
.ocf-when b { color: var(--text); }
.ocf-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 14px; }
.ocf-btns .btn { height: 50px; font-size: 16px; }
.ocf-btns .btn.up { background: linear-gradient(180deg, #ff6b85, #e8304f); color: #fff; }
.ocf-btns .btn.down { background: linear-gradient(180deg, #5bb6ff, #1f7fe0); color: #fff; }

/* 알림 팝업 */
.game-pop { text-align: center; }
.gp-icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }

/* ---------- 태블릿 / PC ---------- */
@media (min-width: 768px) {
  .brand { font-size: 22px; }
  .brand-sub { font-size: 14px; }
  .tabbar { display: none; }
  main { padding: 32px 24px 48px; }
  .toast { bottom: 32px; }
  .hero { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px 8px 48px; }
  .hero h1 { font-size: 48px; }
  .hero-cta { width: 360px; }
  .hero-img { max-width: 400px; margin: 0; }
  [data-view="home"] { display: none; }
  [data-view="home"].active { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  [data-view="home"] .hero { grid-column: 1 / -1; }
  [data-view="home"] .card:last-child { grid-column: 1 / -1; }
  [data-view="home"] .card { margin: 0; }
  .view.narrow {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: 32px;
  }
  .view.narrow .card, .view.narrow .menu, .view.narrow .result { background: var(--bg); }
}

/* ---------- 소셜 ---------- */
.sbtn em {
  position: absolute; right: 14px;
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 8px;
  background: rgba(0, 0, 0, .18);
}
.sbtn.soon { opacity: .4; cursor: not-allowed; }
.sbtn:disabled { opacity: .6; }
.social-who {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
}
.social-who img { width: 22px; height: 22px; }
.social-who b { word-break: break-all; }
@media (min-width: 768px) { .view.narrow .social-who { background: var(--bg); } }

/* ---------- 닫기 ✕ ---------- */
.page-title .close {
  margin-left: auto;
  width: 40px; height: 40px; margin-right: -8px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--sub); font-size: 20px; font-weight: 400;
}
.page-title .close:hover { background: var(--surface-2); color: var(--text); }

/* ---------- 상단 회원 메뉴 ---------- */
.usermenu { position: relative; }
.btn-mypage .caret { display: none; margin-left: -2px; }
.usermenu.logged .caret { display: block; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  padding: 6px; display: flex; flex-direction: column;
}
.dropdown a, .dropdown button {
  height: 44px; padding: 0 14px; border-radius: 8px;
  display: flex; align-items: center;
  background: none; border: 0; text-align: left; font-size: 15px; font-weight: 600;
}
.dropdown a:hover, .dropdown button:hover { background: var(--surface-2); }
.dropdown button { color: var(--sub); }

/* ---------- 기존 계정 연결 확인 ---------- */
.link-box {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 18px;
}
.link-box > strong { font-size: 16px; }
.link-acc { display: flex; align-items: center; gap: 12px; }
.link-acc p { margin: 2px 0 0; color: var(--sub); font-size: 13px; }
.link-desc { margin: 0; color: var(--sub); font-size: 14px; }
.avatar.sm { width: 44px; height: 44px; font-size: 18px; flex: none; }
.foot-link { text-align: center; color: var(--sub); font-size: 14px; margin: 24px 0 0; }
.foot-link a { color: var(--gold); font-weight: 700; margin-left: 4px; }
[data-view="login"] .links { margin-bottom: 8px; }
@media (min-width: 768px) { .view.narrow .link-box { background: var(--bg); } }
.info dd.money { color: var(--gold); font-weight: 800; }

/* ---------- 휴대폰 인증 팝업 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 16px;
  background: rgba(3, 8, 20, .72);
}
.modal-box {
  width: 100%; max-width: 420px; max-height: 100%; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 24px;
}
.modal-box h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.modal-box > .btn { margin-top: 12px; }
body.gate-open { overflow: hidden; }

/* ---------- 가상 키보드 ---------- */
/* 키보드가 떠 있으면 탭바를 숨기고, 아래 여백을 줘서 마지막 입력칸도 위로 올릴 수 있게 한다 */
body.kb-open .tabbar { display: none; }
body.kb-open main { padding-bottom: calc(var(--kb, 0px) + 45vh); }
body.kb-open .toast { top: calc(var(--topbar-h) + 12px); bottom: auto; transform: translate(-50%, -20px); }
body.kb-open .toast.show { transform: translate(-50%, 0); }

/* ---------- PC 고정 화면 (1920x1080) ----------
   PC(768px 이상)에서 data-stage 화면이 열리면 body.staged.
   #stage 를 1920x1080 으로 고정하고 --stage-scale 로 창이 작으면 축소한다(최대 1배, JS fitStage).
   ?live 로 열면 body.live: 방송용, 조작 요소를 숨긴다. */
body.staged { background: #050C1C; }
body.staged #stageBox { position: relative; height: calc(1080px * var(--stage-scale, 1)); overflow: hidden; }
body.staged #stage {
  position: absolute; left: 50%; top: 0;
  width: 1920px; height: 1080px;
  transform: translateX(-50%) scale(var(--stage-scale, 1)); transform-origin: top center;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  font-size: 16px;
}
body.staged .topbar { position: relative; flex: none; height: 64px; padding: 0 48px; }
body.staged .brand { font-size: 30px; gap: 12px; }
body.staged .brand img { width: 48px; height: 48px; border-radius: 12px; }
body.staged .brand-sub { font-size: 17px; padding: 4px 14px; }
body.staged .topbar { height: 72px; }
body.staged .btn-mypage { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 15px; }
body.staged main { flex: 1; min-height: 0; max-width: none; width: 100%; padding: 40px 48px; }

/* 홈: 위 히어로(전체 폭), 아래 지수·TOP 5·진행 방법 3칸 */
body.staged [data-view="home"].active {
  display: grid; align-content: start;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
body.staged [data-view="home"] .hero { grid-column: 1 / -1; padding: 24px 8px 32px; }
body.staged [data-view="home"] .card,
body.staged [data-view="home"] .card:last-child { grid-column: auto; margin: 0; padding: 24px; border-radius: 16px; }

body.staged .eyebrow { font-size: 15px; }
body.staged .hero h1 { font-size: 56px; margin: 6px 0 12px; letter-spacing: -1px; }
body.staged .lead { font-size: 18px; margin-bottom: 28px; }
body.staged .hero-cta { width: 400px; gap: 12px; }
body.staged .hero-cta .btn { height: 52px; font-size: 17px; }
body.staged .hero-hello { font-size: 18px; }
body.staged .hero-img { max-width: 420px; }

body.staged .card-head { margin-bottom: 14px; }
body.staged .card-head h2 { font-size: 18px; }
body.staged .index-list li > span:first-child { font-size: 14px; }
body.staged .index-list b { font-size: 22px; }
body.staged .index-list .up, body.staged .index-list .down { font-size: 15px; }
body.staged .rank-list li { gap: 14px; padding: 9px 0; font-size: 16px; }
body.staged .rank { width: 30px; height: 30px; font-size: 14px; }
body.staged .steps li { gap: 14px; padding: 9px 0; }
body.staged .steps b { width: 32px; height: 32px; font-size: 15px; }
body.staged .steps strong { font-size: 16px; }
body.staged .steps p { font-size: 14px; }

/* 방송용(?live): 로그인·가입 같은 조작 요소는 숨긴다 */
body.live .usermenu, body.live .hero-cta, body.live .hero-hello, body.live .tabbar { display: none !important; }
body.live .lead { margin-bottom: 0; }

/* 게임: 왼쪽 차트 1280px, 오른쪽 손익·주문·랭킹 */
body.staged main:has([data-view="game"].active) { padding: 16px 32px 20px; }
body.staged [data-view="game"].active {
  display: grid; height: 100%;
  grid-template-columns: 1280px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 22px; row-gap: 12px;
}
body.staged [data-view="game"].active.dbg-on { grid-template-rows: auto auto 1fr; }
body.staged [data-view="game"] .dbg-bar { grid-column: 1 / -1; margin: 0; }
body.staged [data-view="game"] .mkt-tabs { grid-column: 1 / -1; margin: 0 0 -13px; padding: 0; }   /* 줄 간격(12px)을 메워 차트 카드에 붙인다 */
body.staged .mkt-tabs button { height: 48px; padding: 0 24px; font-size: 17px; }
body.staged .mkt-tabs button.on { height: 54px; }
body.staged .mkt-tabs .full { display: inline; }
body.staged .mkt-tabs .short { display: none; }
body.staged .game-chart { display: flex; flex-direction: column; margin: 0; min-height: 0; }
body.staged .gc-head { padding: 14px 22px 10px; gap: 18px; }
body.staged .gc-name { font-size: 18px; }
body.staged .gc-price { font-size: 44px; }
body.staged .gc-chg { font-size: 18px; padding: 6px 12px; }
body.staged .gc-clock { font-size: 15px; }
body.staged .gc-body { flex: none; width: 1280px; height: 672px; aspect-ratio: auto; }
body.staged .gc-chat { flex: 1; min-height: 0; padding: 14px 22px 16px; }
body.staged .gc-chat-now { padding: 14px 18px; }
body.staged .gc-chat-now .lab { font-size: 13px; }
body.staged .gc-chat-now time { font-size: 18px; }
body.staged .gc-chat-now p { font-size: 24px; line-height: 1.35; }
body.staged .gc-chat-hist { flex: 1; max-height: none; }
body.staged .gc-chat-hist li { font-size: 15px; }
body.staged .game-side { min-width: 0; min-height: 0; gap: 12px; overflow: hidden; }
body.staged .game-side .card { padding: 14px 20px; }
body.staged .sc-big { font-size: 34px; }
body.staged .rank-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.staged .rk-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
body.staged .rk-list li { padding: 3px 0; }
body.staged .sc-big { margin-bottom: 8px; }

/* 방송용(?live)은 화면 하나에 꽉 차게, 홍보 영역 없음 */
body.live { height: 100vh; overflow: hidden; }
body.live #stageBox { height: 100vh; }
body.live #stage { top: 50%; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); transform-origin: center; }

/* ---------- 게임 소개·홍보 (게임 화면 아래) ---------- */
#promo { display: none; max-width: 1200px; margin: 0 auto; padding: 24px 16px calc(var(--tabbar-h) + var(--safe-b) + 32px); }
body:has([data-view="game"].active) #promo { display: block; }
body.live #promo { display: none !important; }
#promo section { margin-bottom: 18px; }
#promo h2, #promo h3 { margin: 0; letter-spacing: -.5px; }
#promo em { font-style: normal; color: var(--gold); }
.pr-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center;
  padding: 28px 22px; border-radius: 24px;
  background:
    radial-gradient(600px 300px at 85% 30%, rgba(255,200,60,.25), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(155,107,255,.25), transparent 70%),
    linear-gradient(135deg, #1b1f5c, #0d1338);
  border: 1px solid rgba(255,216,77,.35);
}
.pr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pr-badges span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 800; color: var(--sub); }
.pr-hero h2 { font-size: 34px; line-height: 1.2; font-weight: 900; }
.pr-hero h2 em { display: inline-block; background: linear-gradient(90deg, #ffd84d, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-lead { margin: 12px 0 18px; color: var(--sub); font-size: 15.5px; line-height: 1.7; }
.pr-lead b { color: var(--text); }
.pr-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-cta .btn { flex: 1 1 180px; height: 52px; font-size: 16px; }
.pr-go { box-shadow: 0 0 24px rgba(255,200,60,.45); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 6px rgba(255,200,60,.2); } }
.pr-hero-art { position: relative; justify-self: center; width: 220px; height: 220px; }
.pr-hero-art img { width: 100%; height: 100%; border-radius: 40px; box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.pr-float {
  position: absolute; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(10,16,36,.9); border: 1px solid var(--line); font-size: 12.5px; font-weight: 900;
}
.pr-float.f1 { top: 6%; left: -30%; color: #ff7a92; }
.pr-float.f2 { top: 46%; right: -38%; color: #b99bff; }
.pr-float.f3 { bottom: 4%; left: -22%; color: var(--gold); }
.pr-bull { width: 1.15em; height: 1.15em; vertical-align: -.18em; margin-right: .25em; border-radius: .25em; }
/* 오늘의 TOP 10 (히어로 오른쪽) */
.pr-board {
  position: relative; padding: 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,16,48,.92), rgba(6,10,30,.95));
  border: 2px solid rgba(255,216,77,.7);
  box-shadow: 0 0 0 4px rgba(255,216,77,.08), 0 0 40px rgba(255,200,60,.25), 0 20px 50px rgba(0,0,0,.45);
}
.pb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-head b { font-size: 18px; font-weight: 900; }
.pb-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--up); color: #fff; font-size: 11.5px; font-weight: 900; }
.pb-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1s infinite; }
.pb-live.done { background: var(--surface-2); color: var(--sub); }
.pb-live.done i { display: none; }
.pb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin-bottom: 10px; }
.pd { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.pd .crown { font-size: 26px; line-height: 1; }
.pd .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: 14px; }
.pd .vl { font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; }
.pd .step { width: 100%; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #2a1e00; }
.pd.p1 .step { height: 74px; background: linear-gradient(180deg, #ffe680, #f5b318); box-shadow: 0 0 22px rgba(255,200,60,.55); }
.pd.p2 .step { height: 54px; background: linear-gradient(180deg, #f1f4fb, #aab6cf); }
.pd.p3 .step { height: 42px; background: linear-gradient(180deg, #f3c9a4, #c98552); }
.pd.p1 .nm { font-size: 16px; color: var(--gold); }
.pd.empty .nm { color: var(--muted); }
.pb-list { list-style: none; margin: 0; padding: 0; }
.pb-list li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid rgba(255,255,255,.06); font-weight: 800; font-size: 14.5px; }
.pb-list .no { width: 22px; text-align: center; color: var(--muted); font-weight: 900; }
.pb-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-list .vl, .pb-me .vl { font-weight: 900; font-variant-numeric: tabular-nums; }
.pb-empty { padding: 18px 8px; text-align: center; color: var(--sub); font-weight: 800; line-height: 1.6; }
.pb-empty b { color: var(--gold); font-size: 17px; }
.pb-me { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255,216,77,.14); color: var(--gold); font-weight: 900; }
.pb-me .nm { flex: 1; }
.pb-foot { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.pr-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-trust > div { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pr-trust b { font-size: 15px; }
.pr-trust p { margin: 6px 0 0; font-size: 13px; color: var(--sub); line-height: 1.55; }
.pr-block { padding: 22px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(26,36,82,.85), rgba(16,24,58,.9)); border: 1px solid var(--line); }
.pr-block h3 { font-size: 24px; font-weight: 900; }
.pr-block h3 span { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 2px; color: var(--muted); font-weight: 900; }
.pr-sub { margin: 8px 0 16px; color: var(--sub); font-size: 14.5px; line-height: 1.6; }
.pr-sub b { color: var(--text); }
.pr-day { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pr-day li { display: grid; grid-template-columns: 40px 90px 1fr; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: 14px; background: #0a1030; }
.pr-day i { grid-row: span 2; font-style: normal; font-size: 26px; text-align: center; }
.pr-day b { font-size: 18px; font-weight: 900; color: var(--gold); }
.pr-day span { font-weight: 800; }
.pr-day em { grid-column: 2 / -1; color: var(--sub) !important; font-size: 12.5px; }
.pr-ai { display: grid; gap: 16px; align-items: center; }
.pr-ai ul { margin: 12px 0 0; padding-left: 20px; line-height: 1.75; color: var(--sub); }
.pr-ai ul b { color: var(--text); }
.pr-ai-vs { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pv { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 900; }
.pv img, .pv > span { width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center; font-size: 52px; }
.pv.bot > span { background: linear-gradient(135deg, #6a4bd6, #2d1f6e); box-shadow: 0 0 24px rgba(155,107,255,.5); }
.pv.x { font-size: 30px; color: var(--gold); text-shadow: 0 0 16px rgba(255,216,77,.7); }
.pr-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px; border-radius: 18px; background: #0a1030; border: 1px solid var(--line); text-align: center; }
.tier i { font-style: normal; font-size: 38px; }
.tier b { font-size: 20px; font-weight: 900; }
.tier span { font-size: 13px; color: var(--sub); }
.tier.t1 { border-color: rgba(255,216,77,.7); box-shadow: 0 0 30px rgba(255,200,60,.25); background: linear-gradient(180deg, rgba(255,216,77,.15), #0a1030); }
.pr-note { margin: 12px 0 6px; font-weight: 800; color: var(--gold); text-align: center; }
.pr-cond { margin: 8px 0 0; padding-left: 20px; color: var(--sub); font-size: 13.5px; line-height: 1.75; }
.pr-cond b { color: var(--text); }
.pr-faq details { margin-top: 10px; border-radius: 14px; background: #0a1030; border: 1px solid var(--line); }
.pr-faq summary { padding: 14px 16px; cursor: pointer; font-weight: 800; list-style: none; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::before { content: 'Q. '; color: var(--gold); }
.pr-faq details[open] summary { color: var(--gold); }
.pr-faq details p { margin: 0; padding: 0 16px 14px; color: var(--sub); font-size: 14px; line-height: 1.65; }
.pr-final {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px; border-radius: 22px;
  background: linear-gradient(90deg, #3a1d68, #1b1f5c); border: 1px solid rgba(155,107,255,.45);
}
.pr-final img { width: 64px; height: 64px; border-radius: 16px; }
.pr-final div { flex: 1 1 200px; }
.pr-final b { font-size: 19px; }
.pr-final p { margin: 4px 0 0; color: var(--sub); }
.pr-final .btn { flex: 0 0 auto; height: 50px; padding: 0 26px; }
.pr-legal { margin: 18px 4px 0; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
@media (min-width: 768px) {
  #promo { padding: 48px 24px 64px; }
  #promo section { margin-bottom: 24px; }
  .pr-hero { grid-template-columns: 1.25fr 1fr; gap: 32px; padding: 48px 48px; }
  .pr-board { padding: 20px 22px; }
  .pb-head b { font-size: 21px; }
  .pr-hero h2 { font-size: 52px; }
  .pr-lead { font-size: 18px; }
  .pr-hero-art { width: 300px; height: 300px; }
  .pr-trust { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .pr-block { padding: 36px 40px; }
  .pr-block h3 { font-size: 32px; }
  .pr-day { grid-template-columns: repeat(5, 1fr); }
  .pr-day li { grid-template-columns: 1fr; text-align: center; padding: 18px 10px; }
  .pr-day i { grid-row: auto; }
  .pr-day em { grid-column: auto; }
  .pr-ai { grid-template-columns: 1.6fr 1fr; }
  .pv img, .pv > span { width: 120px; height: 120px; font-size: 70px; }
  .tier { padding: 26px 10px; }
  .tier i { font-size: 52px; }
}
@media (max-width: 420px) {
  .pr-float.f1 { left: -12%; } .pr-float.f2 { right: -16%; } .pr-float.f3 { left: -8%; }
}
/* 시장 이름 꼬리표 (딸깍이 수익률·랭킹 제목) */
em.mk { font-style: normal; font-size: .82em; font-weight: 900; padding: 1px 7px; border-radius: 6px; background: rgba(255,216,77,.14); color: var(--gold); vertical-align: 1px; }

/* ---------- 마이페이지 (넓은 화면) ---------- */
body:has([data-view="mypage"].active) main { max-width: 1180px; }
.mypage .mp-top {
  display: grid; gap: 14px; margin-bottom: 16px; padding: 18px; border-radius: 20px;
  background: linear-gradient(135deg, #1b1f5c, #0d1338); border: 1px solid rgba(255,216,77,.35);
}
.mypage .mp-profile { margin: 0; }
.mp-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-points > div { padding: 12px 14px; border-radius: 14px; background: rgba(10,16,48,.7); }
.mp-points span { display: block; font-size: 12.5px; font-weight: 800; color: var(--sub); }
.mp-points b { display: block; margin: 2px 0; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mp-points b.up { color: var(--up); } .mp-points b.down { color: var(--down); }
.mp-points small { font-size: 11.5px; color: var(--muted); }
.mp-points .mp-refill { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: rgba(255,216,77,.08); }
.mp-refill .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.mp-refill .btn:disabled { opacity: .45; cursor: not-allowed; }
.mp-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.mp-tabs button {
  flex: none; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--sub); font-weight: 800; white-space: nowrap;
}
.mp-tabs button.on { background: var(--surface-2); border-color: var(--gold); color: var(--gold); }
.mp-panel { display: none; }
.mp-panel.on { display: block; animation: fade .2s ease; }
.mp-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.mp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mp-table th { position: sticky; top: 0; padding: 10px 12px; text-align: right; font-size: 12px; font-weight: 800; color: var(--muted); background: #0f1740; white-space: nowrap; }
.mp-table td { padding: 10px 12px; text-align: right; border-top: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
.mp-table th:first-child, .mp-table td:first-child { text-align: left; }
.mp-table td.l { text-align: left; }
.mp-table td.up-t { color: var(--up); font-weight: 900; } .mp-table td.down-t { color: var(--down); font-weight: 900; }
.mp-table td.muted { color: var(--muted); }
.mp-table tr.empty td { padding: 26px; text-align: center; color: var(--muted); }
.mp-table .tag-s { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--sub); }
.mp-table .tag-s.filled { color: var(--ok); } .mp-table .tag-s.pending { color: var(--gold); } .mp-table .tag-s.void { color: var(--up); }
.mp-table .tag-s.approved { color: var(--ok); } .mp-table .tag-s.requested { color: var(--gold); } .mp-table .tag-s.rejected, .mp-table .tag-s.canceled { color: var(--muted); }
.mp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.seg-mini { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.seg-mini button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--sub); font-weight: 800; font-size: 13px; }
.seg-mini button.on { background: var(--surface-2); color: var(--gold); }
.mp-sub { margin: 10px 2px; font-size: 13px; color: var(--sub); }
.mp-h { margin: 16px 2px 8px; font-size: 15px; font-weight: 900; }
.mp-info-grid { display: grid; gap: 14px; }
.mp-info-grid .card { margin: 0; }
@media (min-width: 768px) {
  .mypage .mp-top { grid-template-columns: 260px 1fr; align-items: center; padding: 22px 26px; }
  .mp-points { grid-template-columns: repeat(3, 1fr) 1.3fr; }
  .mp-points .mp-refill { grid-column: auto; flex-direction: column; align-items: stretch; justify-content: center; }
  .mp-points b { font-size: 22px; }
  .mp-info-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
}


/* ---------- 햄버거 메뉴 (항목은 js/menu.js 의 MENU) ---------- */
.btn-burger {
  margin-left: 8px; flex: none;
  width: 36px; height: 36px; border-radius: 18px; padding: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}
.btn-burger span { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .2s, opacity .2s; }
.btn-burger:hover, .btn-burger[aria-expanded="true"] { border-color: var(--gold); }
.btn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.btn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.staged .btn-burger { width: 40px; height: 40px; border-radius: 20px; margin-left: 10px; }
body.live .btn-burger { display: none; }

.nav-drawer {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(3, 8, 20, .6);
  animation: navFade .18s ease-out;
}
.nav-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px rgba(0, 0, 0, .4);
  padding: 0 12px 24px;
  animation: navSlide .22s ease-out;
}
.nav-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 4px 0 8px; margin: 0 -12px 4px; padding-left: 20px; padding-right: 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.nav-head img { border-radius: 8px; }
.nav-head b { flex: 1; font-size: 18px; font-weight: 800; }
.nav-head b em { font-style: normal; color: var(--gold); }
.nav-close {
  width: 36px; height: 36px; border-radius: 18px; border: 0; background: none;
  color: var(--sub); font-size: 18px; cursor: pointer;
}
.nav-close:hover { background: var(--surface-2); color: var(--text); }
.nav-group { padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
.nav-group:last-child { border-bottom: 0; }
.nav-title { margin: 0 0 4px; padding: 0 12px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.nav-item {
  width: 100%; height: 46px; padding: 0 12px; border: 0; border-radius: 10px;
  display: flex; align-items: center; gap: 12px;
  background: none; color: var(--text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.nav-item i { width: 22px; font-style: normal; text-align: center; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.on { background: rgba(255, 216, 77, .10); color: var(--gold); }
/* 로그인·관리자 여부에 따라 보이기 (body.logged 는 champ.js, body.is-admin 은 game.js 가 붙인다) */
body:not(.logged) .nav-drawer .show-member,
body.logged .nav-drawer .show-guest,
body:not(.is-admin) .nav-drawer .show-admin { display: none; }
body:not(.is-staff) .nav-drawer .show-staff { display: none; }
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes navSlide { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- 포인트 리셋 / 포인트 추가 (2026-10-20) ---------- */
.refill-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.refill-btns .btn[hidden] { display: none; }
.rf-offer small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--sub); }
.rf-qty { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.rf-qty > span { font-size: 13px; font-weight: 800; color: var(--sub); margin-right: 4px; }
.rf-qty button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; }
.rf-qty input { width: 70px; height: 38px; text-align: center; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 16px; font-weight: 800; }
.rf-qty small { color: var(--muted); font-size: 12px; }
.rf-notes ul, .rules-points ul { margin: 4px 0 2px; padding-left: 18px; }
.rc-pop h2 { text-align: center; }
.mp-refill-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* 랭킹 카드 → 인증서 */
.rk-cert { margin-left: auto; margin-right: 8px; padding: 3px 10px; border-radius: 12px; white-space: nowrap;
  background: rgba(255,216,77,.10); color: var(--gold); font-size: 12px; font-weight: 800; }
.rk-cert:hover { background: rgba(255,216,77,.18); }

/* 마이페이지 인증서 탭 */
.mp-h small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.mc-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,216,77,.12), rgba(10,16,48,.7)); border: 1px solid rgba(255,216,77,.3); }
.mc-card.pnl { background: linear-gradient(160deg, rgba(91,182,255,.14), rgba(10,16,48,.7)); border-color: rgba(91,182,255,.35); }
.mc-t { font-size: 13px; font-weight: 800; color: var(--sub); }
.mc-rank { font-size: 32px; font-weight: 900; color: var(--gold); line-height: 1.1; }
.mc-m { font-size: 12.5px; color: var(--sub); }
.mc-v { font-size: 16px; font-weight: 900; }
.mc-card .btn { margin-top: 6px; height: 40px; font-size: 14px; }
.mc-empty { grid-column: 1 / -1; margin: 0; padding: 22px; text-align: center; color: var(--sub); border-radius: 14px; background: rgba(10,16,48,.5); line-height: 1.7; }
.mp-table td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* 인증서 보기 화면 */
.cert-page { max-width: 1000px; margin: 0 auto; }
.cert-wrap img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.cert-verify { margin: 12px 0; text-align: center; font-weight: 800; color: var(--sub); }
.cert-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cert-btns .btn { min-width: 180px; }

/* 홍보: 랭킹 인증서 */
.pr-cert { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.pr-cert-text ul { margin: 12px 0 18px; padding-left: 18px; line-height: 1.8; color: var(--sub); }
.pr-cert-text ul b { color: var(--text); }
.pr-cert-sample { display: flex; justify-content: center; }
.cs-card { position: relative; width: min(100%, 380px); aspect-ratio: 1200 / 848; padding: 18px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: linear-gradient(135deg, #0b1730, #16305f); border: 3px solid #ffd84d; box-shadow: 0 0 0 6px rgba(255,216,77,.15), 0 18px 40px rgba(0,0,0,.4);
  transform: rotate(-2deg); }
.cs-top { font-size: 11px; font-weight: 800; color: #ffd84d; letter-spacing: .04em; }
.cs-title { font-size: 20px; font-weight: 900; color: #fff; }
.cs-rank { font-size: 54px; font-weight: 900; color: #ffd84d; line-height: 1; }
.cs-rank small { font-size: 22px; }
.cs-who { font-size: 16px; font-weight: 800; color: #fff; }
.cs-meta { font-size: 12px; color: #b9c6e4; }
.cs-no { font-size: 10px; color: #8fa0c6; font-family: ui-monospace, Menlo, Consolas, monospace; }
@media (max-width: 760px) { .pr-cert { grid-template-columns: 1fr; } }
.sc-add { margin-left: auto; margin-right: 8px; height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid rgba(255,216,77,.45);
  background: rgba(255,216,77,.08); color: var(--gold); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sc-add:hover { background: rgba(255,216,77,.18); }
.sc-add[hidden] { display: none; }

/* ---------- 크롬 탭 (공용): 선택 탭이 아래 패널과 이어진다 ---------- */
.ctabs {
  --tab-bg: #141d47;
  position: relative; z-index: 2; display: flex; align-items: flex-end; margin: 0 0 -1px; padding: 0; overflow-x: auto; scrollbar-width: none;
}
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button {
  position: relative; flex: none; display: flex; align-items: baseline; gap: 4px;
  height: 36px; padding: 0 14px; margin: 0 1px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--sub); font-size: 14px; font-weight: 800; line-height: 34px; cursor: pointer;
}
.ctabs button small { font-size: 10.5px; font-weight: 700; opacity: .8; }
.ctabs button:not(.on):hover { background: rgba(255,255,255,.05); color: var(--text); }
.ctabs button:not(.on) + button:not(.on)::before {
  content: ''; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 1px; background: var(--line);
}
.ctabs button.on {
  z-index: 3; height: 40px; line-height: 38px;
  background: var(--tab-bg); border-color: var(--line); border-top: 3px solid #ffd84d; color: var(--gold);
  box-shadow: 0 -4px 14px rgba(255,216,77,.35);
}
.ctabs button.on::before, .ctabs button.on::after { content: ''; position: absolute; bottom: 0; width: 11px; height: 11px; pointer-events: none; }
.ctabs button.on::before { left: -11px; background: radial-gradient(circle at 0 0, transparent 10px, var(--line) 10px, var(--line) 11px, var(--tab-bg) 11.5px); }
.ctabs button.on::after { right: -11px; background: radial-gradient(circle at 100% 0, transparent 10px, var(--line) 10px, var(--line) 11px, var(--tab-bg) 11.5px); }
.ctabs button.on:first-child { margin-left: 0; }
.ctabs button.on:first-child::before { display: none; }
.ctab-panel { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 0 12px 12px 12px; background: #141d47; }

.pills { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: #0a1030; }
.pills button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--sub); font-size: 13px; font-weight: 800; cursor: pointer; }
.pills button.on { background: var(--surface-2); color: var(--gold); }

/* 랭킹전 보드 */
.rank-board { margin-top: 10px; }
.rb-info { margin: 8px 2px 4px; font-size: 12px; color: var(--muted); }
.rank-board .rk-list li { padding: 4px 2px; }
.rk-list .crown { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--gold); }
.rk-list li.empty { flex-direction: column; text-align: center; line-height: 1.6; }
.rk-list li.empty small { color: var(--muted); font-weight: 600; }
.rank-card .sc-row .rk-cert + .rk-cert { margin-left: 0; }
body.staged .game-side { overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }   /* 랭킹전 카드까지 스크롤 */
body.staged .rank-card { flex: none; display: block; }
body.staged .rank-card .rk-list { overflow: visible; }

/* 랭킹전 페이지 */
.ranking-page { max-width: 760px; margin: 0 auto; }
.rank-board.big .rk-list li { font-size: 16px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.04); }
.rp-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }

/* 홍보: 딸깍이 섹션 랭킹전 TOP 10 */
.pr-ai-board { grid-column: 1 / -1; }
.pab-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pab-head b { font-size: 18px; margin-right: auto; }
.pab-head a { font-size: 13.5px; font-weight: 800; color: var(--gold); }
.pr-ai-board .rk-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.pr-ai-board .rk-list li.empty, .pr-ai-board .rk-list li.me { grid-column: 1 / -1; }
@media (max-width: 760px) { .pr-ai-board .rk-list { grid-template-columns: 1fr; } }

/* 명예의 전당 */
.hall-page { max-width: 980px; margin: 0 auto; }
.hall-hero { padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,216,77,.16), rgba(20,29,71,.9)); border: 1px solid rgba(255,216,77,.35); }
.hall-hero p { margin: 0 0 8px; font-size: 16px; }
.hall-hero ul { margin: 0; padding-left: 18px; line-height: 1.8; color: var(--sub); }
.hall-hero b { color: var(--text); }
.hall-h { margin: 22px 0 10px; font-size: 18px; }
.hall-kings { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.hall-kings li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(10,16,48,.7); }
.hall-kings li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-kings li em { font-style: normal; font-weight: 900; color: var(--gold); }
.hall-kings li.empty { grid-column: 1 / -1; justify-content: center; color: var(--sub); }
.hall-kings .medal { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: #232d5e; color: var(--sub); }
.hall-kings .m1 { background: radial-gradient(circle at 30% 30%, #fff3b0, #ffc400 60%, #c98a00); color: #4a3000; }
.hall-kings .m2 { background: radial-gradient(circle at 30% 30%, #fff, #c9d3e6 60%, #8d99b5); color: #1b2440; }
.hall-kings .m3 { background: radial-gradient(circle at 30% 30%, #ffd8b8, #d99a6c 60%, #8f5a33); color: #3a1f0b; }
.hall-list { display: grid; gap: 12px; }
.hall-empty { margin: 0; padding: 26px; text-align: center; color: var(--sub); }
.hall-card { padding: 14px; border-radius: 14px; background: rgba(10,16,48,.6); border: 1px solid var(--line); }
.hall-card.current { border-style: dashed; }
.hc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hc-head b { font-size: 16px; margin-right: auto; }
.hc-live { font-size: 12px; font-weight: 800; color: #7fd1ff; }
.hc-done { font-size: 12px; font-weight: 800; color: var(--gold); }
.hc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hc-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: rgba(255,216,77,.07); }
.hc-cell.pnl { background: rgba(91,182,255,.08); }
.hc-k { font-size: 12px; color: var(--sub); font-weight: 700; }
.hc-n { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-v { font-size: 13.5px; font-weight: 900; }
@media (max-width: 760px) { .hc-grid { grid-template-columns: 1fr 1fr; } }

/* 신청 창: 문자 안내 */
.rf-sms { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: rgba(91,182,255,.10); border: 1px solid rgba(91,182,255,.35); }
.rf-sms > b { display: block; margin-bottom: 4px; }
.rf-sms p { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.6; }
.rf-sms em { font-style: normal; font-weight: 900; color: var(--gold); }

/* 인증서 선택 */
.mc-panel { display: grid; gap: 12px; margin-bottom: 18px; }
.mc-panel .mc-grid { margin: 0; grid-template-columns: 1fr 1fr; }
button.mc-card { text-align: left; color: var(--text); cursor: pointer; font: inherit; }
button.mc-card.on { box-shadow: 0 0 0 2px var(--gold); }
button.mc-card.none { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { .mc-panel .mc-grid { grid-template-columns: 1fr; } }
/* 명예의 전당: 수익률 / 수익금 탭 */
.hc-grid.two { grid-template-columns: 1fr 1fr; }
.pb-list li.open { opacity: .45; font-weight: 700; }
.pb-list li.pb-empty { display: block; padding: 10px 8px 4px; font-size: 13px; border-top: 0; }
.pb-list li.pb-empty b { font-size: 14px; }

/* ---------- 크롬 탭 줄(strip): 패널 없이 아래 가로선과 이어지는 전환 탭 (수익률/수익금, 시장, 리셋/추가) ---------- */
.ctabs.strip { margin: 0; border-bottom: 1px solid var(--line); overflow: visible; }
.ctabs.strip button { height: 34px; line-height: 32px; font-size: 13.5px; padding: 0 14px; }
.ctabs.strip button.on { height: 38px; line-height: 34px; margin-bottom: -1px; }
.ctabs.strip button.on:first-child::before { display: block; }
.ctabs.strip button:first-child { margin-left: 12px; }
.rb-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 12px; border-bottom: 1px solid var(--line); }
.rb-ctl .ctabs.strip { border-bottom: 0; }
.rank-board .ctab-panel .ctabs.strip { --tab-bg: #141d47; }
.mc-panel .ctabs.strip { --tab-bg: #141d47; }
.pb-tabs.ctabs.strip { --tab-bg: #0a1030; margin: 12px 0 8px; }
.pb-tabs.ctabs.strip button { flex: 1; justify-content: center; font-size: 14.5px; }
.rf-tabs.ctabs.strip { --tab-bg: var(--surface); margin: 4px 0 14px; }
.rf-tabs.ctabs.strip button { flex: 1; justify-content: center; font-size: 14.5px; }
.hall-types.ctabs.strip { --tab-bg: var(--bg); margin: 20px 0 0; }
.hall-types.ctabs.strip button { flex: 1; justify-content: center; height: 46px; line-height: 44px; font-size: 16px; }
.hall-types.ctabs.strip button.on { height: 50px; line-height: 46px; }
.ctabs.strip button.on:first-child { margin-left: 12px; }
/* 리셋·추가 설명 툴팁 (긴 글, 줄바꿈 유지) */
.q.q-wide::after { width: 340px; white-space: pre-line; font-size: 12.5px; }
.q[hidden] { display: none; }
.sc-add-wrap { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; }
.sc-add-wrap[hidden] { display: none; }
.sc-add-wrap .sc-add { margin: 0; }
.refill-btns { align-items: center; }
.q-pair { display: inline-flex; align-items: center; gap: 6px; }
.rf-diff { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--sub); }
.q.q-center::after { left: auto; right: -70px; width: 300px; }   /* 신청 창 가운데쯤에서 펼친다 */
.cert-note { margin: 0 auto 14px; max-width: 720px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; }
.hc-grid.one { grid-template-columns: 1fr; }

/* ---------- 게임 화면: 차트 아래 1분 상황 | 내일은 주식왕 랭킹전 ---------- */
.gc-bottom { display: grid; grid-template-columns: 1fr; }
.gc-rank { padding: 10px 16px 14px; }
.gr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gr-head b { font-size: 15px; white-space: nowrap; }
.gr-head a { font-size: 12.5px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.gr-head a:first-of-type { margin-left: auto; }
.rank-board.compact { margin-top: 0; }
.rank-board.compact .ctabs button { height: 28px; line-height: 26px; padding: 0 10px; font-size: 12.5px; }
.rank-board.compact .ctabs button.on { height: 31px; line-height: 27px; }
.rank-board.compact .ctabs button:not(.tt) + button.tt { margin-left: auto; }
.rank-board.compact .ctabs button:not(.tt) + button.tt::before { display: none; }
.rank-board.compact .ctab-panel { padding: 6px 10px; border-radius: 0 0 10px 10px; }
.rank-board.compact .rk-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.rank-board.compact .rk-list li { padding: 2px 0; font-size: 13.5px; gap: 8px; }
.rank-board.compact .rk-list .medal { width: 20px; height: 20px; font-size: 11px; }
.rank-board.compact .rk-list li.me { margin-top: 0; padding: 2px 6px; }
.rank-board.compact .rk-list li.empty { grid-column: 1 / -1; padding: 8px 0; font-size: 12.5px; }
body.staged .gc-bottom { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 500px; }
body.staged .gc-bottom .gc-chat { overflow: hidden; padding-right: 8px; }
body.staged .gc-rank { padding: 12px 22px 12px 8px; border-left: 1px solid var(--line); overflow: hidden; }
body.staged .gc-chat-now p { font-size: 21px; }

/* ---------- 차트 아래 오른쪽: 지금 시장 상황판 (pointcast 상태 줄과 같은 값) ---------- */
.gc-sit { padding: 10px 16px 14px; }
.gs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gs-head b { font-size: 15px; white-space: nowrap; }
.gs-at { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gs-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gs-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); min-width: 0; }
.gs-item .k { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.gs-item b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item em { font-style: normal; font-size: 12.5px; font-weight: 900; }
.gs-item small { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item em:empty, .gs-item small:empty { display: none; }
.gs-item.up b, .gs-item.up em { color: var(--up); }
.gs-item.down b, .gs-item.down em { color: var(--down); }
.gs-item.flat b { color: var(--sub); }
.gs-line { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.45; }
body.staged .gc-sit { padding: 12px 22px 12px 8px; border-left: 1px solid var(--line); overflow: hidden; }
/* 랭킹전 섹션 (홍보 영역) */
.pr-rank .pab-head { margin-bottom: 4px; }
.pr-rank .pab-head h3 { margin: 0 auto 0 0; }
.pr-rank .rk-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.pr-rank .rk-list li.empty, .pr-rank .rk-list li.me { grid-column: 1 / -1; }
@media (max-width: 760px) { .pr-rank .rk-list { grid-template-columns: 1fr; } .gs-items { grid-template-columns: 1fr 1fr; } }
.gs-item .vv { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gs-item { padding: 5px 8px; }
body.staged .gs-head { margin-bottom: 6px; }
body.staged .gs-line { margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-head b .gs-delay { font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* 딸깍이 줄: 통합(수익률·순수익금)을 위에, 코스피·코스닥 세부를 아래 줄에 작게 */
.sc-bot { flex-wrap: wrap; row-gap: 4px; }
.sc-bot b { white-space: nowrap; }
.sc-bot-detail { flex-basis: 100%; display: flex; gap: 14px; justify-content: flex-end; font-size: 12px; font-weight: 800; color: var(--sub); }
.sc-bot-detail span { white-space: nowrap; }
.sc-bot b em.net { font-style: normal; font-size: 12px; font-weight: 800; color: var(--sub); margin-left: 6px; }
/* 보유 표: 두 시장 4줄 */
.hold-table td small { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.hold-table td { padding: 4px 8px; }
/* 상황판 칸 폭: 상태점검(점수 표시)이 잘리지 않게 넓히고 나머지는 조금 줄인다 */
.gs-items { grid-template-columns: minmax(0, .85fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.55fr); }
@media (max-width: 760px) { .gs-items { grid-template-columns: 1fr 1fr; } }
.gs-item .vv { flex-wrap: wrap; column-gap: 5px; row-gap: 0; }
.gs-item b { font-size: 14px; overflow: visible; text-overflow: clip; }
.otab.on { box-shadow: inset 0 3px 0 #ffd84d, 0 -4px 14px rgba(255,216,77,.30); }   /* 선택 탭 윗선: 노란색 (다른 크롬 탭과 같게) */

/* 관리자 페이지: 포인트 구매 요청 (저녁 일괄 처리) */
.ap-h { margin: 6px 0 6px; font-size: 18px; }
.ap-h small { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-left: 6px; }
.ap-summary { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,216,77,.08); border: 1px solid rgba(255,216,77,.3); font-size: 14px; }
.ap-summary b { color: var(--gold); }
.ap-summary span { color: var(--sub); font-size: 13px; }
.ap-bulk { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px;
  padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ap-bulk label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; cursor: pointer; }
.ap-bulk #apSel { color: var(--sub); font-weight: 800; }
.ap-bulk .btn { margin-left: auto; height: 40px; padding: 0 16px; font-size: 14px; }
.ap-row { align-items: center; }
.ap-ck { width: 20px; height: 20px; flex: none; accent-color: #ffd84d; cursor: pointer; }
.ap-info { flex: 1; min-width: 240px; }
/* 관리자 목록: 처리 칸 */
.ap-act { display: flex; align-items: center; gap: 10px; }
.ap-act-k { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.ap-done { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ap-done b { font-size: 13px; }
.ap-done small { font-size: 12px; color: var(--sub); }
.ap-row.approved .ap-done b { color: var(--ok); } .ap-row.rejected .ap-done b, .ap-row.canceled .ap-done b { color: var(--sub); }

/* 가입: 이용약관 동의 */
.agree { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: #ffd84d; }
.agree span { font-size: 14px; line-height: 1.5; }
.agree a { color: var(--gold); text-decoration: underline; }
.agree small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
.foot-link.small { font-size: 12.5px; color: var(--muted); }

/* 이용약관 화면·팝업 */
.terms-page { max-width: 820px; margin: 0 auto; }
.terms-body { line-height: 1.75; color: var(--text); }
.terms-doc h2 { margin: 22px 0 6px; font-size: 16px; color: var(--gold); }
.terms-doc ol { margin: 0; padding-left: 20px; }
.terms-doc li { margin: 2px 0; }
.terms-doc p { margin: 4px 0; }
.terms-meta { font-size: 12.5px; color: var(--muted); }
.terms-pop { max-width: 640px; }
.terms-pop .terms-body { max-height: 56vh; overflow-y: auto; margin: 8px 0 14px; padding: 4px 6px 4px 0; font-size: 14px; }