@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800;900&display=swap');

/* 그누보드 스크린리더 전용 클래스 (코어 default.css 미로딩 대비) */
.sound_only, .msg_sound_only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  border: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:root {
  --spk-bg: #e8edf4;
  --spk-card: #ffffff;
  --spk-card-2: #f5f8fc;
  --spk-surface: #eaf1fa;
  --spk-surface-2: #dceaff;
  --spk-line: #c9d5e3;
  --spk-text: #0e1726;
  --spk-muted: #4a5d74;
  --spk-primary: #1a6dff;
  --spk-primary-deep: #0c2d5e;
  --spk-accent: #ffcc33;
  --spk-red: #ff4757;
  --spk-green: #0abf53;
  --spk-shadow: 0 8px 28px rgba(10, 30, 60, 0.10);
  --spk-shadow-soft: 0 4px 14px rgba(10, 30, 60, 0.07);
  --spk-radius: 14px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--spk-bg);
  color: var(--spk-text);
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.spk-card, .spk-section, .spk-slot-card, .spk-quick-card,
.spk-post-card, .spk-feature-card, .spk-category-card,
.spk-pick-card, .spk-mini-panel, .spk-popular-item,
.spk-feed-row, .spk-list-row, .spk-action-button, .spk-promo-link {
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s, color .18s;
}

/* ── Login msg bar ── */
#hd_login_msg {
  display:none;
  padding: 6px 14px;
  background: #0a1628;
  color: #b0c4de;
  font-size: 11px;
  text-align: center;
}
#hd_login_msg a { margin-left: 8px; color: #fff; }

/* ── Ticker ── */
.spk-ticker-wrap {
  overflow: hidden;
  background: linear-gradient(90deg, #080f1e, #132844);
  color: #c8d8ec;
  height: 36px;
}
.spk-ticker {
  display: flex;
  width: max-content;
  height: 36px;
  align-items: center;
  animation: spkTicker 38s linear infinite;
}
.spk-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  font-size: 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.spk-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #555;
  box-shadow: none;
}
.spk-live-dot-active {
  background: var(--spk-red);
  box-shadow: 0 0 0 3px rgba(255,71,87,0.2);
  animation: livePulse 1.2s ease infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,71,87,0.2); }
  50% { box-shadow: 0 0 0 5px rgba(255,71,87,0.05); }
}
.spk-ticker-league { color: var(--spk-accent); font-weight: 800; font-size: 11px; }
.spk-ticker-team { color: #ddd; font-size: 12px; }
.spk-ticker-score { color: #aaa; font-weight: 800; }
.spk-ticker-score .spk-score-win { color: var(--spk-red); }

/* ── Header ── */
.spk-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(200,213,227,0.7);
}
.spk-header-inner, .spk-shell, .spk-footer-inner, .spk-footer-bottom {
  width: min(1280px, calc(100% - 24px));
  margin: 0 auto;
}
.spk-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  gap: 14px;
}
.spk-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.spk-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.spk-logo span {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--spk-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── GNB ── */
.spk-gnb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.spk-gnb-item { position: relative; }
.spk-gnb-item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 15px;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.spk-gnb-item > a .spk-gnb-ico { font-size: 20px; color: #5b7aa8; transition: color .15s; }
.spk-gnb-item > a .spk-gnb-txt { white-space: nowrap; }
.spk-gnb-item:hover > a {
  background: #e6f0ff;
  color: var(--spk-primary);
}
.spk-gnb-item:hover > a .spk-gnb-ico { color: var(--spk-primary); }
.spk-gnb-item.is-active > a {
  color: var(--spk-primary);
  border-bottom-color: var(--spk-primary);
}
.spk-gnb-item.is-active > a .spk-gnb-ico { color: var(--spk-primary); }

/* ── 고객센터 메뉴 — 골드 동적 아이콘 ── */
.spk-gnb-item.is-cs-menu > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spk-cs-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #c9930a;
  background: linear-gradient(135deg, #fff5d4 0%, #ffd97d 50%, #f0ad1d 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(192, 130, 0, .3),
    0 2px 8px rgba(240, 173, 29, .35),
    inset 0 1px 2px rgba(255, 255, 255, .8);
  animation: spkCsBounce 2.4s ease-in-out infinite, spkCsGlow 2.4s ease-in-out infinite;
}
.spk-cs-icon svg {
  width: 13px;
  height: 13px;
  color: #7a5400;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
  animation: spkCsRing 2.4s ease-in-out infinite;
  transform-origin: 50% 30%;
}
.spk-cs-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #f0ad1d;
  opacity: 0;
  animation: spkCsPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes spkCsBounce {
  0%, 60%, 100% { transform: translateY(0); }
  10%           { transform: translateY(-2px); }
  20%           { transform: translateY(0); }
  30%           { transform: translateY(-1px); }
  40%           { transform: translateY(0); }
}
@keyframes spkCsRing {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%           { transform: rotate(-12deg); }
  20%           { transform: rotate(10deg); }
  30%           { transform: rotate(-8deg); }
  40%           { transform: rotate(6deg); }
  50%           { transform: rotate(0deg); }
}
@keyframes spkCsGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(192, 130, 0, .3),
      0 2px 8px rgba(240, 173, 29, .35),
      inset 0 1px 2px rgba(255, 255, 255, .8);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(192, 130, 0, .45),
      0 2px 14px rgba(240, 173, 29, .65),
      inset 0 1px 2px rgba(255, 255, 255, .9);
  }
}
@keyframes spkCsPulse {
  0%   { transform: scale(1);   opacity: .7; }
  60%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.spk-gnb-item.is-cs-menu:hover .spk-cs-icon {
  animation-duration: 1s; /* hover 시 더 빠르게 */
}

/* 다크 셸 (현물/선물/초단타) 에서도 골드 컬러 유지 — 살짝 더 빛나게 */
body.spk-dark-shell .spk-cs-icon {
  box-shadow:
    0 0 0 1px rgba(240, 173, 29, .4),
    0 2px 12px rgba(240, 173, 29, .55),
    inset 0 1px 2px rgba(255, 255, 255, .8);
}
.spk-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  padding: 8px 6px 6px;
  background: #fff;
  border: 1px solid var(--spk-line);
  border-radius: 10px;
  box-shadow: var(--spk-shadow);
}
.spk-dropdown a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12px;
}
.spk-dropdown a:hover { background: #f0f5ff; color: var(--spk-primary); }
.spk-gnb-item:hover .spk-dropdown { display: block; }

/* ── Header Buttons ── */
.spk-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.spk-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.spk-action-button.is-secondary {
  background: #e4ecf4;
  color: #34495e;
}
.spk-action-button.is-primary {
  background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep));
  color: #fff;
  box-shadow: 0 6px 16px rgba(26,109,255,0.25);
}
.spk-action-button:hover { transform: translateY(-1px); }

/* ── Shell (2-column default, 3-column when right sidebar exists) ── */
.spk-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0 36px;
}
.spk-shell:has(.spk-sidebar-right) {
  width: min(1520px, calc(100% - 24px));
  grid-template-columns: 220px minmax(0, 1fr) 220px;
}
.spk-sidebar, .spk-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spk-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 고객센터 링크 그리드 */
.spk-cs-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.spk-cs-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 8px;
  background: #f0f5fc;
  color: #0c2d5e;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.spk-cs-link i { font-size: 16px; color: var(--spk-primary); }
.spk-cs-link:hover { background: #dceaff; }

/* ── Cards ── */
.spk-card, .spk-section, .spk-hero, .spk-promo-banner, .spk-quick-card {
  background: var(--spk-card);
  border: 1px solid rgba(200,213,227,0.6);
  border-radius: var(--spk-radius);
  box-shadow: var(--spk-shadow-soft);
}
.spk-card-head, .spk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e8eef5;
  font-size: 13px;
  font-weight: 800;
  color: var(--spk-primary-deep);
  background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep));
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 109, 255, 0.25);
    border-radius: 8px 8px 0 0;
    text-shadow: 2px 2px 2px black;
}
.spk-card-head a, .spk-more-link {
  font-size: 11px;
  color: var(--spk-red);
}
.spk-card-body { padding: 10px 14px; }
.spk-empty {
  color: var(--spk-muted);
  font-size: 12px;
  line-height: 1.6;
}
.spk-empty.large { padding: 20px 14px; text-align: center; }

/* ── Login Form (sidebar) ── */
.spk-login-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.spk-login-form input[type="text"],
.spk-login-form input[type="password"] {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #c9d5e3;
  border-radius: 8px;
  background: #f5f8fc;
  color: var(--spk-text);
  font-size: 12px;
}
.spk-login-form input:focus {
  outline: none;
  border-color: var(--spk-primary);
  box-shadow: 0 0 0 3px rgba(26,109,255,0.12);
}
.spk-login-form button {
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.spk-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--spk-muted);
  font-size: 11px;
}
.spk-login-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.spk-join-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eaf1fa;
  color: var(--spk-primary-deep);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* ── Member Box ── */
.spk-member-box { display: flex; flex-direction: column; gap: 10px; }
.spk-member-top { display: flex; align-items: center; gap: 10px; }
.spk-member-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #d0dbe8; }
.spk-member-avatar a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #e4ecf4; }
.spk-member-meta strong { display: block; font-size: 13px; }
.spk-member-meta span { display: block; margin-top: 2px; color: var(--spk-muted); font-size: 11px; }

/* ── 회원 로그인 박스 3행 그리드: [계급장 계급명][닉네임 XP][포인트 테더] ── */
.spk-member-meta-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 2px;
    column-gap: 8px;
    align-items: center;
    font-size: 11px;
    line-height: 1.2;
}
.spk-member-meta-grid .spk-mm-rank {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.spk-mm-rank-name { font-size: 12px; font-weight: 800; letter-spacing: -.1px; }
.spk-mm-nick    { color: var(--spk-text); font-size: 13px; font-weight: 800; }
.spk-mm-xp      { color: #1a6dff; font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.spk-mm-xp small { color: #5a6b7a; font-weight: 700; font-size: 10px; margin-left: 2px; }
.spk-mm-point   { color: var(--spk-primary); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.spk-mm-point small { color: var(--spk-muted); font-weight: 700; font-size: 10px; margin-left: 2px; }
.spk-mm-tether  { color: #b8860b; font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.spk-mm-tether small { color: #a57f10; font-weight: 700; font-size: 10px; margin-left: 2px; }
.spk-member-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.spk-member-links a { padding: 7px 6px; border-radius: 7px; background: #eaf1fa; color: var(--spk-primary-deep); font-size: 11px; font-weight: 700; text-align: center; }
.spk-member-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.spk-member-actions .spk-action-button { text-align: center; font-size: 11px; padding: 6px 8px; }

/* ── List / Feed Rows ── */
.spk-list-row, .spk-feed-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 0; border-bottom: 1px solid #eef2f7;
}
.spk-list-row:last-child, .spk-feed-row:last-child { border-bottom: 0; }
.spk-list-text, .spk-feed-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.spk-list-meta, .spk-feed-row span { color: var(--spk-muted); font-size: 11px; flex-shrink: 0; }

/* ── Today's 강력픽 (sports_tips 스타일 매칭) ── */
.spk-picks-showcase {
  border-radius: var(--spk-radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--spk-shadow);
}
.spk-picks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(135deg, #ff2d55, #ff6b00, #ffcc33);
  animation: spkPickGlow 2.4s ease infinite;
}
@keyframes spkPickGlow {
  0%,100% { box-shadow: inset 0 -2px 0 rgba(255,45,85,.4); }
  50%     { box-shadow: inset 0 -2px 0 rgba(255,107,0,.7); }
}
.spk-picks-head strong {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.spk-picks-head a {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  padding: 4px 12px;
  background: rgba(0,0,0,.2);
  border-radius: 14px;
  letter-spacing: .3px;
  transition: background .15s;
}
.spk-picks-head a:hover { background: rgba(0,0,0,.4); }

.spk-picks-grid {
  display: grid;
  gap: 0;
  background: #0b1530;
}
.spk-picks-showcase[data-layout="grid-1"] .spk-picks-grid { grid-template-columns: 1fr; }
.spk-picks-showcase[data-layout="grid-2"] .spk-picks-grid { grid-template-columns: 1fr 1fr; }
.spk-picks-showcase[data-layout="grid-3"] .spk-picks-grid { grid-template-columns: 1fr 1fr 1fr; }

/* 4개 이상 — 이벤트 배너형 슬라이드 (페이지 단위 교체) */
.spk-picks-slider {
  position: relative;
  overflow: hidden;
  background: #0b1530;
}
.spk-picks-track {
  display: flex;
  width: 100%;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.spk-picks-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.spk-picks-page[data-cols="1"] { grid-template-columns: 1fr; }
.spk-picks-page[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.spk-picks-page[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
.spk-pickhot-empty { background: #0b1530; }

/* 도트 인디케이터 */
.spk-picks-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 3;
}
.spk-picks-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .2s;
}
.spk-picks-dot.is-active {
  background: #ffcc33;
  width: 20px;
  border-radius: 4px;
}
.spk-picks-dot:hover { background: rgba(255,204,51,.6); }

/* 카드 — 블루-블랙 베이스 + 오렌지 액센트 */
.spk-pickhot {
  position: relative;
background: radial-gradient(1200px 300px at 10% 0%, rgba(168, 85, 247, .18), transparent 60%), radial-gradient(1000px 280px at 100% 100%, rgba(0, 245, 255, .14), transparent 60%), linear-gradient(180deg, #0a1120 0%, #060913 100%);  border: 1px solid rgba(70, 110, 200, .22);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.spk-pickhot:hover {
  border-color: rgba(255,107,0,.6);
  box-shadow: inset 0 0 30px rgba(255,107,0,.12);
  transform: translateY(-2px);
}
.spk-pickhot::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ff2d55, #ff6b00, #ffcc33);
}

/* 상단: 번호 + 리그 */
.spk-pick-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spk-pick-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #ff2d55, #ff6b00);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(255,45,85,.4);
}
.spk-pick-league {
  font-size: 11px;
  font-weight: 700;
  color: #ff8866;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 팀 매치 */
.spk-pick-match {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.spk-pick-team {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  line-height: 1.2;
  flex: 1;
}
.spk-pick-vs {
  font-size: 11px;
  font-weight: 900;
  color: #ff6b00;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,107,0,.15);
  border: 1px solid rgba(255,107,0,.3);
}

/* 예측 */
.spk-pick-prediction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,204,51,.08);
  border: 1px solid rgba(255,204,51,.2);
  border-radius: 8px;
  font-size: 13px;
}
.spk-pick-pred-label {
  font-size: 11px;
  color: #ffcc33;
  font-weight: 700;
  letter-spacing: .3px;
}
.spk-pick-prediction strong {
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}

@media (max-width: 900px) {
  .spk-picks-showcase[data-layout="grid-3"] .spk-picks-grid { grid-template-columns: 1fr 1fr; }
  .spk-picks-page { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .spk-picks-showcase[data-layout="grid-2"] .spk-picks-grid,
  .spk-picks-showcase[data-layout="grid-3"] .spk-picks-grid { grid-template-columns: 1fr; }
  .spk-picks-page { grid-template-columns: 1fr; }
}

/* ── 모의거래소 오픈 배너 (구 HOT SLOT 자리) ── */
.spk-trade-open {
    margin: 6px 0;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(1200px 300px at 85% 50%, rgba(240,185,11,.22), transparent 60%),
        linear-gradient(135deg, #0b0e11 0%, #1a1f2a 60%, #0f1520 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(240,185,11,.18);
    position: relative;
}
.spk-trade-open::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(240,185,11,.03) 0 2px, transparent 2px 12px);
    pointer-events: none;
}
.spk-trade-open-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    padding: 26px 32px;
    position: relative;
    z-index: 1;
}
.spk-trade-open-txt { min-width: 0; }

.spk-trade-open-badge {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}
.spk-to-new  { background: #f6465d; color: #fff; padding: 4px 9px; border-radius: 4px; box-shadow: 0 2px 8px rgba(246,70,93,.4); }
.spk-to-open { background: #f0b90b; color: #000; padding: 4px 9px; border-radius: 4px; animation: spkToBlink 1.8s ease-in-out infinite; }
@keyframes spkToBlink { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

.spk-trade-open-title {
    margin: 0 0 10px;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.spk-to-t1 { display: block; font-size: 26px; font-weight: 900; color: #fff; }
.spk-to-t2 { display: block; font-size: 22px; font-weight: 900; background: linear-gradient(90deg, #f0b90b, #fcd535); -webkit-background-clip: text; background-clip: text; color: transparent; }

.spk-trade-open-lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #b7bdc6;
}
.spk-trade-open-lead b { color: #f0b90b; font-weight: 700; }

.spk-trade-open-feats {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 14px;
    font-size: 12px;
    color: #d0d6dd;
    line-height: 1.65;
}

.spk-trade-open-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.spk-to-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.spk-to-btn-primary {
    background: linear-gradient(135deg, #f0b90b, #fcd535);
    color: #000;
    box-shadow: 0 6px 18px rgba(240,185,11,.35);
}
.spk-to-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(240,185,11,.5); }
.spk-to-btn-ghost {
    background: rgba(255,255,255,.06);
    color: #eaecef;
    border: 1px solid rgba(255,255,255,.18);
}
.spk-to-btn-ghost:hover { background: rgba(255,255,255,.12); color: #f0b90b; border-color: rgba(240,185,11,.4); }

.spk-trade-open-img {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    height: 360px;
    background: #0b0e11;
}
.spk-trade-open-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.spk-tv-chart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.spk-tv-chart-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.spk-tv-block {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: not-allowed;
    background: transparent;
}
.spk-to-ticker {
    position: absolute;
    top: 10px; left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(240,185,11,.4);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #f0b90b;
    letter-spacing: .05em;
    backdrop-filter: blur(4px);
}
.spk-to-dot {
    width: 7px; height: 7px;
    background: #0ecb81;
    border-radius: 50%;
    animation: spkToLive 1.2s ease-in-out infinite;
}
@keyframes spkToLive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.8); } }

@media (max-width: 800px) {
    .spk-trade-open-inner { grid-template-columns: 1fr; padding: 20px 18px; gap: 16px; }
    .spk-to-t1 { font-size: 22px; }
    .spk-to-t2 { font-size: 18px; }
    .spk-trade-open-feats { grid-template-columns: 1fr; }
    .spk-trade-open-img { height: 260px; }
}

/* ── 슬롯 스트립 (Hot/JackPot 자동 스크롤) ── */
.spk-slot-strip {
  background: var(--spk-card);
  border: 1px solid rgba(200,213,227,0.6);
  border-radius: var(--spk-radius);
  padding: 0 0 14px;
  margin-bottom: 0px;
  overflow: hidden;
  box-shadow: var(--spk-shadow-soft);
  position: relative;
}
.spk-strip-hot, .spk-strip-jack { background: var(--spk-card); }

.spk-strip-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep));
  border-bottom: 1px solid var(--spk-line);
  box-shadow: 0 6px 16px rgba(26, 109, 255, 0.25);
}
.spk-strip-head img {
  height: 28px;
  width: auto;
  display: block;
}
.spk-strip-title-txt {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 2px 2px 2px black;
}
.spk-strip-hot-txt, .spk-strip-jack-txt {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
}

.spk-strip-track {
  overflow: hidden;
  position: relative;
  padding: 0 16px;
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.spk-strip-inner {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: spkStripScroll 40s linear infinite;
}
.spk-strip-inner-reverse { animation: spkStripScrollReverse 45s linear infinite; }
.spk-strip-track:hover .spk-strip-inner { animation-play-state: paused; }

@keyframes spkStripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes spkStripScrollReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.spk-strip-item {
  flex: 0 0 auto;
  width: 120px;
  display: flex; flex-direction: column;
  background: var(--spk-card-2);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--spk-line);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.spk-strip-item:hover {
  transform: translateY(-3px);
  border-color: var(--spk-primary);
  box-shadow: 0 8px 20px rgba(26,109,255,0.18);
}
.spk-strip-item img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  background: var(--spk-card-2);
}
.spk-strip-label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--spk-primary-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  background: var(--spk-surface);
}

/* ── 좌/우 고정 사이드 배너 (전역) ── */
.spk-side-banner {
  position: fixed;
  top: 100px;
  width: 150px;
  z-index: 10;
  pointer-events: none;
  display: block;  /* 기본 숨김, 충분히 넓을 때만 표시 */
}
.spk-side-banner-slider {
  position: relative;
  width: 100%;
}
.spk-side-banner-slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .6s ease-in-out;
  border-radius: var(--spk-radius);
  box-shadow: var(--spk-shadow);
  pointer-events: auto;
}
.spk-side-banner-slider img.is-active { opacity: 1; position: relative; }
.spk-side-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--spk-radius);
  box-shadow: var(--spk-shadow);
  pointer-events: auto;
}
/* shell 1280px + 양쪽 (150 배너 + 20 패딩) × 2 = 1620px 이상에서만 노출 */
/* 셸이 1520px로 확장됐으므로 배너 기준도 760px(셸 절반) 바깥쪽으로 */
@media (min-width: 1860px) {
  .spk-side-banner { display: block; }
  .spk-side-left  { left:  calc(50vw - 760px - 170px); }
  .spk-side-right { right: calc(50vw - 760px - 170px); }
}

/* ── uChat (실시간 채팅) — 텔레그램 스타일 한 줄 포맷 ── */
.spk-chat-card .spk-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.uc-online { font-size: 10px; color: rgba(255,255,255,0.75); font-weight: 600; }
.uc-online::before { content: '●'; color: #0abf53; margin-right: 3px; font-size: 9px; }
.spk-chat-body { padding: 0 !important; display: flex; flex-direction: column; height: 400px; }

/* 공지 배너 */
.uc-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, #fff8dc, #fff4b0);
  color: #5a4100;
  font-size: 11.5px;
  font-weight: 600;
  border-bottom: 1px solid #e8d885;
}
.uc-notice i { color: #b88700; flex-shrink: 0; }
.uc-notice-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-notice-close {
  flex-shrink: 0;
  background: none; border: 0; padding: 2px 4px;
  color: #7a5a00; font-size: 16px; line-height: 1; cursor: pointer;
}
.uc-notice-close:hover { color: #1a6dff; }

/* 메시지 영역 */
.uc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--spk-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}
.uc-messages::-webkit-scrollbar { width: 6px; }
.uc-messages::-webkit-scrollbar-thumb { background: #cbd6e3; border-radius: 3px; }
.uc-loading { color: var(--spk-muted); font-size: 12px; padding: 20px 0; text-align: center; }

/* 두 줄 메시지 — [아이콘] 닉 \n 내용 */
.uc-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 6px;
  margin-bottom: 2px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  word-break: break-word;
  color: var(--spk-text);
}
.uc-line:hover { background: rgba(26,109,255,0.05); }
.uc-line.is-own { background: rgba(26,109,255,0.08); }
.uc-line.is-own:hover { background: rgba(26,109,255,0.14); }
.uc-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
.uc-lvicon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.uc-nick {
  font-weight: 800;
  font-size: 12px;
  color: var(--spk-primary-deep);
}
.uc-line.is-own .uc-nick { color: var(--spk-primary); }
.uc-lvicon.lv-admin + .uc-nick { color: #c0392b; }
.uc-lvicon.lv-vip + .uc-nick   { color: #8e44ad; }
.uc-lvicon.lv-gold + .uc-nick  { color: #b88700; }
.uc-text {
  padding-left: 22px;
  color: var(--spk-text);
  white-space: pre-wrap;
}

/* 내 정체성 바 (닉 + 관리자 호출) */
.uc-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--spk-line);
  background: var(--spk-card-2);
  font-size: 11px;
}
.uc-identity-nick {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
  color: var(--spk-primary-deep);
}
.uc-adcall-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--spk-line);
  border-radius: 999px;
  background: #fff;
  color: #ff4757;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.uc-adcall-btn:hover { background: #ff4757; color: #fff; border-color: #ff4757; }
.uc-adcall-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 입력 (첨부 + 메시지 + 이모지 + 전송) */
.uc-input {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid var(--spk-line);
  background: var(--spk-card);
  position: relative;
}
.uc-input input[type="text"] {
  flex: 1; min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--spk-line);
  border-radius: 20px;
  font-size: 12px;
  outline: none;
  background: var(--spk-card-2);
  font-family: inherit;
}
.uc-nick-input { flex: 0 0 70px !important; max-width: 70px; text-align: center; }
.uc-input input:focus { border-color: var(--spk-primary); }
.uc-input button {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--spk-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
}
.uc-input button:hover { background: var(--spk-surface); color: var(--spk-primary); }
.uc-input button.uc-send-btn { background: var(--spk-primary); color: #fff; }
.uc-input button.uc-send-btn:hover { background: #0050cc; transform: translateY(-1px); }
.uc-input button:disabled { opacity: .5; cursor: not-allowed; }

/* 이모지 패널 — 이모지 버튼 바로 위 */
.uc-emoji-panel {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 6px;
  width: 240px;
  padding: 8px;
  background: var(--spk-card);
  border: 1px solid var(--spk-line);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  z-index: 50;
}
.uc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.uc-emoji-item {
  width: 100%; height: 28px;
  border: 0; background: transparent;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s;
}
.uc-emoji-item:hover { background: var(--spk-surface); }

.uc-guest {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--spk-muted);
  border-top: 1px solid var(--spk-line);
  background: var(--spk-card);
}
.uc-guest a { color: var(--spk-primary); font-weight: 700; }

/* ── 상담 배너 ── */
.spk-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}
.spk-contact-stack img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* 바이낸스 팝 배너 — 이벤트 박스 위 */
.spk-binence-pop {
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(240, 185, 11, .18), 0 2px 6px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  margin-bottom: 4px;
}
.spk-binence-pop:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(240, 185, 11, .28), 0 4px 10px rgba(0,0,0,.12);
}
.spk-binence-pop img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Main Popup ── */
.spk-popup {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(2, 6, 18, .65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: spkPopupIn .2s ease;
}
@keyframes spkPopupIn { from { opacity: 0; } to { opacity: 1; } }
.spk-popup-box {
  background: var(--spk-card);
  border-radius: var(--spk-radius);
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
  max-width: 500px;
  width: 100%;
  overflow: hidden;
  animation: spkPopupBoxIn .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes spkPopupBoxIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.spk-popup-body { line-height: 0; }
.spk-popup-img { width: 100%; height: auto; display: block; }
.spk-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f7fafe;
  border-top: 1px solid var(--spk-line);
}
.spk-popup-today {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--spk-muted);
  cursor: pointer;
  font-weight: 600;
}
.spk-popup-today input { cursor: pointer; }
.spk-popup-close {
  padding: 7px 20px;
  border: none;
  border-radius: 7px;
  background: var(--spk-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.spk-popup-close:hover { background: #0050cc; box-shadow: 0 4px 10px rgba(26,109,255,.35); }

/* ── Event Banner ── */
.spk-event-banner {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 110px; padding: 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(12,45,94,0.2), rgba(12,45,94,0.92)), linear-gradient(135deg, #1a6dff, #0c2d5e);
  color: #fff;
}
.spk-event-banner strong { font-size: 15px; margin-bottom: 4px; }
.spk-event-banner span { font-size: 11px; color: rgba(255,255,255,0.7); }

/* ── Event Slider (auto-rotating banners) ── */
.spk-event-slider {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #0c2d5e;
}
.spk-event-track {
  display: flex;
  width: 100%;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.spk-event-slide {
  flex: 0 0 100%;
  display: block;
  line-height: 0;
}
.spk-event-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.spk-event-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 2;
}
.spk-event-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .2s;
}
.spk-event-dot.is-active {
  background: #fff;
  width: 18px;
  border-radius: 4px;
}

/* ── Rank ── */
.spk-rank-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef2f7; }
.spk-rank-row:last-child { border-bottom: 0; }
.spk-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font-size: 11px; font-weight: 800; background: #e4ecf4; color: #4a5d74; }
.spk-rank-badge.rank-1 { background: linear-gradient(135deg, #ffc312, #ee8f00); color: #fff; }
.spk-rank-badge.rank-2 { background: linear-gradient(135deg, #bcc8d9, #6b7d93); color: #fff; }
.spk-rank-badge.rank-3 { background: linear-gradient(135deg, #d48a42, #a05c1c); color: #fff; }
.spk-rank-badge.is-medal { background: none !important; border-radius: 0; width: auto; height: auto; font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.spk-rank-name { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; min-width: 0; }
.spk-rank-points { color: var(--spk-primary); font-size: 11px; font-weight: 800; }

/* 계급장 뱃지 공통 정렬 (닉네임 baseline에 자연스럽게 붙도록) */
.spk-rank-insig { display: inline; vertical-align: middle; margin-right: 4px; line-height: 0; }
.spk-rank-insig .spk-rank-svg { vertical-align: -0.22em; display: inline-block; }
.spk-rank-insig .spk-rank-label { font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle; margin-left: 4px; display: inline-block; line-height: 1; }
.spk-rank-insig .spk-rank-admin-ic { vertical-align: -0.18em; display: inline-block; line-height: 1; }
.spk-rank-insig.is-admin { color: #d32e50; }

/* ── Hero ── */
.spk-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 18px;
  padding: 24px;
  background: linear-gradient(135deg, #fff, #e8f0fb);
  position: relative;
  overflow: hidden;
}
.spk-hero::after {
  content: "";
  position: absolute;
  right: -80px; bottom: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,109,255,0.12), transparent);
  pointer-events: none;
}
.spk-eyebrow {
  margin: 0 0 8px;
  color: var(--spk-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.spk-hero h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--spk-primary-deep);
}
.spk-hero-text {
  margin: 10px 0 0;
  color: var(--spk-muted);
  font-size: 13px;
  line-height: 1.65;
}
.spk-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.spk-hero-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spk-hero-stat {
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0c2d5e, #1b4a8a);
  color: #fff;
}
.spk-hero-stat strong { display: block; margin-bottom: 3px; font-size: 13px; }
.spk-hero-stat span { display: block; color: rgba(255,255,255,0.7); font-size: 11px; line-height: 1.5; }

/* ── Promo Banner ── */
.spk-promo-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px;
  background: linear-gradient(135deg, #0c2d5e, #1b4a8a);
  color: #fff; position: relative; overflow: hidden;
}
.spk-promo-banner::after {
  content: ""; position: absolute; top: -30px; right: 60px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}
.spk-promo-copy { max-width: 680px; }
.spk-promo-label {
  display: inline-flex; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.15); color: var(--spk-accent);
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
}
.spk-promo-copy strong { display: block; margin-top: 8px; font-size: 17px; line-height: 1.35; }
.spk-promo-copy p { margin: 6px 0 0; color: rgba(255,255,255,0.7); font-size: 12px; line-height: 1.6; }
.spk-promo-link {
  flex-shrink: 0; padding: 10px 14px; border-radius: 10px;
  background: #fff; color: var(--spk-primary-deep);
  font-size: 12px; font-weight: 800;
}
.spk-promo-link:hover { transform: translateY(-1px); box-shadow: var(--spk-shadow); }

/* ── Slot Showcase ── */
.spk-slot-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.spk-slot-card {
  position: relative; min-height: 200px; overflow: hidden;
  border-radius: 14px; box-shadow: var(--spk-shadow);
}
.spk-slot-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10,20,40,0.2); }
.spk-slot-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.7)); }
.spk-slot-card.is-olympus { background: linear-gradient(135deg, #2358b8, #091a38 70%); }
.spk-slot-card.is-starlight { background: linear-gradient(135deg, #4f52d8, #0e1040 70%); }
.spk-slot-card.is-bonanza { background: linear-gradient(135deg, #e8623a, #5e1520 72%); }
.spk-slot-visual { position: absolute; inset: auto auto 28px 20px; width: 90px; height: 90px; border-radius: 20px; opacity: 0.15; background: linear-gradient(135deg, #fff, transparent); transform: rotate(-12deg); }
.spk-slot-rtp, .spk-slot-badge { position: absolute; top: 12px; z-index: 2; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.spk-slot-rtp { left: 12px; background: rgba(255,255,255,0.18); color: #fff; }
.spk-slot-badge { right: 12px; background: var(--spk-accent); color: #3d2600; }
.spk-slot-overlay { position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 3px; color: #fff; }
.spk-slot-overlay strong { font-size: 18px; line-height: 1.2; }
.spk-slot-overlay span { color: rgba(255,255,255,0.7); font-size: 11px; }
.spk-slot-overlay em { margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--spk-accent); }

/* ── Home Grid (no longer 2-col, main content flows directly) ── */

/* ── Section Tabs ── */
.spk-section-tabs { display: flex; gap: 4px; }
.spk-section-tabs span { padding: 5px 10px; border-radius: 999px; background: #e4ecf4; color: var(--spk-red);text-shadow: 1px 1px 1px whitesmoke; font-size: 11px; font-weight: 700; cursor: pointer; }
.spk-section-tabs .is-active { background: var(--spk-primary); color: #fff; }

/* ── Popular List ── */
.spk-popular-list { display: flex; flex-direction: column; padding: 8px 14px 14px; }
.spk-popular-item {
  display: grid; grid-template-columns: 28px auto minmax(0,1fr);
  align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef2f7;
}
.spk-popular-item:last-child { border-bottom: 0; }
.spk-popular-item:hover { transform: translateX(3px); }
.spk-popular-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #dce6f2, #c3d4e8);
  color: var(--spk-primary-deep); font-size: 12px; font-weight: 900;
}
.spk-popular-tag {
  display: inline-flex; align-items: center; justify-content: center; align-self: start;
  padding: 4px 8px; border-radius: 999px; background: #dceaff;
  color: var(--spk-primary); font-size: 10px; font-weight: 800;
}
.spk-popular-copy { min-width: 0; }
.spk-popular-copy strong { display: block; font-size: 13px; line-height: 1.45; color: var(--spk-text); }
.spk-popular-copy span { display: block; margin-top: 3px; color: var(--spk-muted); font-size: 11px; }

/* ── Category Cards ── */
.spk-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.spk-category-card {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 130px; padding: 14px; border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f3f7fc);
  border: 1px solid #d4dfec;
}
.spk-category-card:hover, .spk-pick-card:hover, .spk-post-card:hover,
.spk-feature-card:hover, .spk-mini-panel:hover, .spk-quick-card:hover {
  transform: translateY(-2px); border-color: #b0c8e4; box-shadow: var(--spk-shadow);
}
.spk-category-badge {
  display: inline-flex; align-self: flex-start; padding: 4px 8px;
  border-radius: 999px; background: #0c2d5e; color: #c8ddff;
  font-size: 10px; font-weight: 800;
}
.spk-category-card strong { font-size: 14px; line-height: 1.4; color: var(--spk-text); }
.spk-category-card p { margin: 0; color: var(--spk-muted); font-size: 12px; line-height: 1.6; }

/* ── Pick Cards ── */
.spk-picks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.spk-pick-card { padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #fff, #f0f5fb); border: 1px solid #d4dfec; }
.spk-pick-top { display: flex; align-items: center; gap: 10px; }
.spk-pick-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #dceaff, #b8d4ff);
  color: var(--spk-primary-deep); font-size: 14px; font-weight: 900;
}
.spk-pick-meta { flex: 1; min-width: 0; }
.spk-pick-meta strong { display: block; font-size: 13px; }
.spk-pick-meta span { display: block; margin-top: 2px; color: var(--spk-muted); font-size: 11px; }
.spk-pick-rate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 26px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 900;
}
.spk-pick-rate.is-high { background: #d4f5e2; color: #08783a; }
.spk-pick-rate.is-mid { background: #ffedc4; color: #9a6400; }
.spk-pick-match { margin-top: 10px; color: var(--spk-primary-deep); font-size: 15px; font-weight: 800; }
.spk-pick-prediction { margin-top: 6px; color: var(--spk-muted); font-size: 12px; line-height: 1.5; }

/* ── Quick Cards ── */
.spk-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.spk-quick-card {
  display: flex; flex-direction: column; gap: 5px;
  min-height: 100px; padding: 14px;
  background: linear-gradient(180deg, #fff, #f3f7fc);
  box-shadow: var(--spk-shadow-soft);
}
.spk-quick-card strong { font-size: 14px; color: var(--spk-text); }
.spk-quick-card span { color: var(--spk-muted); font-size: 11px; line-height: 1.5; }

/* ── Post / Feature Grid ── */
.spk-post-grid, .spk-feature-grid { display: grid; gap: 10px; padding: 14px; }
.spk-post-grid { grid-template-columns: repeat(3, 1fr); }
.spk-feature-grid { grid-template-columns: repeat(3, 1fr); }
.spk-post-card, .spk-feature-card {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 130px; padding: 14px; border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f3f7fc);
  border: 1px solid #d4dfec;
}
.spk-post-card strong, .spk-feature-card strong { font-size: 14px; line-height: 1.4; color: var(--spk-text); }
.spk-post-card span, .spk-feature-card p { margin: 0; color: var(--spk-muted); font-size: 12px; line-height: 1.6; }
.spk-post-tag {
  align-self: flex-start; padding: 4px 8px; border-radius: 999px;
  background: #dceaff; color: var(--spk-primary); font-size: 10px; font-weight: 800;
}
.spk-post-card.is-placeholder { background: linear-gradient(180deg, #f5f8fb, #edf1f6); }

/* ── Feed List ── */
.spk-feed-list { display: flex; flex-direction: column; padding: 0 14px 14px; }
.spk-feed-row { padding: 10px 0; }
.spk-feed-row:hover, .spk-list-row:hover { color: var(--spk-primary); }

/* ── Section Split ── */
.spk-section-split { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,0.8fr); gap: 12px; }
.spk-mini-panels { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.spk-mini-panel {
  padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #f5f8fc, #edf2f8);
  border: 1px solid #d4dfec;
}
.spk-mini-panel strong { display: block; margin-bottom: 4px; font-size: 13px; color: var(--spk-text); }
.spk-mini-panel p { margin: 0; color: var(--spk-muted); font-size: 12px; line-height: 1.6; }

/* ── Footer ── */
.spk-footer { background: #0a1628; color: #b0c4de; }
.spk-footer-inner { display: grid; grid-template-columns: 1.1fr 0.8fr 0.8fr; gap: 16px; padding: 24px 0 18px; }
.spk-footer h3, .spk-footer h4 { margin: 0 0 10px; color: #fff; font-size: 14px; }
.spk-footer p, .spk-footer a { display: block; margin: 0 0 5px; color: #7b93aa; font-size: 12px; line-height: 1.5; }
.spk-footer-bottom { padding: 10px 0 16px; border-top: 1px solid rgba(255,255,255,0.06); color: #5a7490; font-size: 11px; }

/* ── Board pages ── */
#bo_w, #bo_v, #bo_list, #fregister, #fregisterform,
#fmemberlogin, #qa_write, #faq_wrap, #ctt, #con {
  background: #fff;
  border: 1px solid rgba(200,213,227,0.6);
  border-radius: var(--spk-radius);
  box-shadow: var(--spk-shadow-soft);
}

@keyframes spkTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .spk-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .spk-sidebar-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .spk-hero, .spk-slot-showcase,
  .spk-category-grid, .spk-picks-grid, .spk-post-grid,
  .spk-feature-grid, .spk-section-split, .spk-footer-inner {
    grid-template-columns: 1fr;
  }
  .spk-header-inner { flex-direction: column; align-items: stretch; padding: 10px 0; }
  .spk-gnb, .spk-header-actions { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .spk-header-inner, .spk-shell, .spk-footer-inner, .spk-footer-bottom {
    width: min(100% - 16px, 1280px);
  }
  .spk-shell { grid-template-columns: 1fr; padding-top: 10px; }
  .spk-sidebar-right { grid-template-columns: 1fr; }
  .spk-ticker-item { padding: 0 12px; font-size: 11px; }
  .spk-hero, .spk-category-grid, .spk-picks-grid,
  .spk-quick-grid, .spk-post-grid, .spk-feature-grid { padding: 12px; }
  .spk-card-head, .spk-section-head, .spk-promo-banner { flex-direction: column; align-items: flex-start; }
  .spk-popular-item { grid-template-columns: 28px 1fr; }
  .spk-popular-tag, .spk-popular-copy { grid-column: 2; }
  .spk-hero-actions, .spk-member-links, .spk-member-actions { flex-direction: column; grid-template-columns: 1fr; }
  .spk-slot-showcase { grid-template-columns: 1fr; }
}

/* ── 슬롯 후기 갤러리 — 히어로 배너 + 그리드 오버라이드 ── */
.slot-gal-hero {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #0c2d5e, #1a6dff);
    color: #fff;
    padding: 26px 28px;
    margin: 0 0 14px;
    box-shadow: 0 8px 28px rgba(10, 30, 60, 0.18);
}
.slot-gal-hero::after {
    content: '';
    position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.slot-gal-hero-inner { position: relative; z-index: 2; max-width: 760px; }
.slot-gal-hero .eyebrow {
    display: inline-block;
    font-size: 10px; font-weight: 900;
    letter-spacing: 0.2em;
    color: #ffcc33;
    margin-bottom: 8px;
}
.slot-gal-hero h2 {
    margin: 0;
    font-size: 24px; font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
}
.slot-gal-hero p {
    margin: 10px 0 0;
    font-size: 13px; line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

/* 코어 갤러리 스킨 미니 오버라이드 — 테마 톤과 통일 */
#bo_gall {
    background: var(--spk-card);
    padding: 12px 14px 20px;
    border-radius: var(--spk-radius);
    border: 1px solid rgba(200, 213, 227, 0.6);
    box-shadow: var(--spk-shadow-soft);
}
#bo_gall #bo_btn_top { margin-bottom: 10px; }
#bo_gall #gall_ul { margin: 6px -8px 0 !important; }
#bo_gall .gall_li { padding: 0 8px 16px; }
#bo_gall .gall_box {
    margin: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(200, 213, 227, 0.6);
    background: #fff;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
#bo_gall .gall_box:hover {
    transform: translateY(-3px);
    border-color: var(--spk-primary);
    box-shadow: 0 10px 24px rgba(26, 109, 255, 0.16);
}
#bo_gall .gall_con img { display: block; width: 100%; height: auto; }
#bo_gall .gall_text_href {
    padding: 8px 10px;
    font-size: 12px; font-weight: 700;
    color: var(--spk-text);
    line-height: 1.35;
    display: block;
    text-align: center;
    min-height: 38px;
}
#bo_gall .gall_info,
#bo_gall .gall_href { padding: 4px 10px 10px; font-size: 11px; color: var(--spk-muted); }

/* ═══════════════════════════════════════════════════════════════════
   모바일 전용 UI — 햄버거/드로어 / 바텀탭 / 채팅FAB / 사이드바 숨김
   ═══════════════════════════════════════════════════════════════════ */

/* 기본(데스크탑): 모바일 전용 요소 전부 숨김 */
.spk-mobile-burger,
.spk-mobile-drawer,
.spk-mobile-botnav,
.spk-mobile-chat-fab,
.spk-m-chat-close,
.spk-m-chat-overlay { display: none; }

@media (max-width: 768px) {
    body.spk-m-locked { overflow: hidden; }

    /* 헤더 — 햄버거 노출, GNB 숨김, 액션 압축 */
    .spk-mobile-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--spk-text);
        font-size: 18px;
        cursor: pointer;
    }
    .spk-mobile-burger:active { background: var(--spk-surface); }
    .spk-header-inner {
        flex-direction: row !important;
        align-items: center !important;
        padding: 6px 0 !important;
        min-height: 52px;
        gap: 8px;
    }
    .spk-logo img { height: 30px; }
    .spk-gnb { display: none !important; }
    .spk-header-actions { margin-left: auto; }
    .spk-action-button { padding: 5px 10px; font-size: 11px; }

    /* 티커 축소 */
    .spk-ticker-wrap { height: 30px; }
    .spk-ticker { height: 30px; }
    .spk-ticker-item { padding: 0 10px; font-size: 10.5px; }

    /* 사이드 배너·사이드바 전부 숨김 */
    .spk-side-banner { display: none !important; }
    .spk-shell .spk-sidebar,
    .spk-shell .spk-sidebar-right { display: none !important; }
    .spk-shell,
    .spk-shell:has(.spk-sidebar-right) {
        display: block !important;
        grid-template-columns: none !important;
        padding: 8px 0 80px !important; /* 바텀탭 높이만큼 여유 */
        width: min(100% - 12px, 1280px) !important;
    }
    .spk-main {
        gap: 6px !important;
    }

    /* 드로어 */
    .spk-mobile-drawer {
        display: block;
        position: fixed; inset: 0;
        z-index: 9998;
        pointer-events: none;
        visibility: hidden;
    }
    .spk-mobile-drawer.is-open { pointer-events: auto; visibility: visible; }
    .spk-mobile-drawer-backdrop {
        position: absolute; inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0;
        transition: opacity .2s;
        z-index: 1;
    }
    .spk-mobile-drawer.is-open .spk-mobile-drawer-backdrop { opacity: 1; }
    .spk-mobile-drawer-box {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: min(300px, 85vw);
        background: #fff;
        box-shadow: 2px 0 20px rgba(0,0,0,0.25);
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        z-index: 2;
    }
    .spk-mobile-drawer.is-open .spk-mobile-drawer-box { transform: translateX(0); }
    .spk-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: linear-gradient(135deg, #0c2d5e, #1a6dff);
        color: #fff;
    }
    .spk-mobile-drawer-head strong { font-size: 15px; font-weight: 800; }
    .spk-mobile-drawer-head button {
        width: 32px; height: 32px;
        border: 0;
        background: rgba(255,255,255,0.15);
        color: #fff;
        border-radius: 7px;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }
    .spk-mobile-drawer-user {
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f8fc;
        border-bottom: 1px solid var(--spk-line);
    }
    .spk-mobile-drawer-user strong { font-size: 14px; color: var(--spk-primary-deep); }
    .spk-mobile-drawer-user span { font-size: 12px; color: var(--spk-primary); font-weight: 800; }
    .spk-mobile-drawer-auth {
        display: flex;
        gap: 6px;
        padding: 12px;
    }
    .spk-mobile-auth-btn {
        flex: 1;
        padding: 10px;
        text-align: center;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }
    .spk-mobile-auth-btn.is-primary { background: var(--spk-primary); color: #fff; }
    .spk-mobile-auth-btn.is-secondary { background: var(--spk-surface); color: var(--spk-text); }
    .spk-mobile-drawer-nav { flex: 1; padding: 4px 0; }
    .spk-m-menu-group { border-bottom: 1px solid var(--spk-line); }
    .spk-m-menu-parent {
        display: block;
        padding: 14px 18px;
        font-size: 14px;
        font-weight: 800;
        color: var(--spk-text);
        text-decoration: none;
    }
    .spk-m-menu-parent:active { background: #f0f5ff; }
    .spk-m-menu-subs {
        background: #f7fafe;
        padding: 4px 0 8px;
    }
    .spk-m-menu-subs a {
        display: block;
        padding: 10px 18px 10px 32px;
        font-size: 12.5px;
        color: var(--spk-muted);
        text-decoration: none;
    }
    .spk-m-menu-subs a:active { background: #e6f0ff; color: var(--spk-primary); }
    .spk-mobile-drawer-foot {
        border-top: 1px solid var(--spk-line);
        padding: 8px 0;
    }
    .spk-mobile-drawer-foot a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        font-size: 13px;
        color: var(--spk-text);
        text-decoration: none;
    }
    .spk-mobile-drawer-foot a:active { background: #f0f5ff; }
    .spk-mobile-drawer-foot i { color: var(--spk-primary); width: 16px; }

    /* 바텀 탭바 */
    .spk-mobile-botnav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 62px;
        background: #fff;
        border-top: 1px solid var(--spk-line);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        z-index: 900;
    }
    .spk-bn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--spk-muted);
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
        padding-top: 6px;
    }
    .spk-bn-item i { font-size: 18px; }
    .spk-bn-item:active,
    .spk-bn-item.is-active { color: var(--spk-primary); }

    /* 푸터는 하단탭 위로 */
    .spk-footer { padding-bottom: 70px; }

    /* 채팅 FAB */
    .spk-mobile-chat-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 14px;
        bottom: 78px; /* 바텀탭 위 */
        width: 52px; height: 52px;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep));
        color: #fff;
        font-size: 20px;
        box-shadow: 0 8px 20px rgba(26,109,255,0.45);
        cursor: pointer;
        z-index: 901;
    }
    .spk-mobile-chat-fab:active { transform: scale(0.95); }

    /* 채팅 모달 (사이드바의 chat 카드를 풀스크린 오버레이로) */
    body.spk-m-chat-open .spk-m-chat-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9990;
    }
    /* 좌측 사이드바만 노출 */
    body.spk-m-chat-open .spk-sidebar:not(.spk-sidebar-right) {
        display: block !important;
        position: fixed;
        left: 12px; right: 12px; top: auto;
        bottom: 12px;
        width: auto;
        height: 75vh;
        max-height: 75vh;
        z-index: 9991;
        background: transparent;
    }
    body.spk-m-chat-open .spk-sidebar:not(.spk-sidebar-right) > .spk-card:not(.spk-chat-card) {
        display: none !important;
    }
    body.spk-m-chat-open .spk-sidebar-right,
    body.spk-m-chat-open .spk-contact-stack { display: none !important; }
    body.spk-m-chat-open .spk-chat-card {
        position: absolute;
        inset: 0;
        margin: 0;
        display: flex !important;
        flex-direction: column;
        height: 100% !important;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }
    body.spk-m-chat-open .spk-chat-body {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    body.spk-m-chat-open .uc-messages { flex: 1 1 auto; min-height: 0; }
    body.spk-m-chat-open .uc-input,
    body.spk-m-chat-open .uc-identity,
    body.spk-m-chat-open .uc-guest { flex-shrink: 0; }
    body.spk-m-chat-open .spk-m-chat-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px; right: 8px;
        width: 28px; height: 28px;
        background: rgba(255,255,255,0.2);
        border: 0;
        border-radius: 50%;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        z-index: 10;
    }

    /* 팝업은 기본적으로 작동 — 모바일에서 폭 여유 */
    .spk-popup-box { width: 95vw !important; max-width: 95vw !important; }
}