@charset "UTF-8";

/* ============================================================
   game-rules/index/desktop.css — 게임룰 인덱스 데스크톱 전용
   ../desktop.css (변수+리셋) 로드 후 이 파일을 로드할 것
   ============================================================ */

body { padding-bottom: 70px; }

.sa-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 60px; background: linear-gradient(135deg, #1e2530 0%, #2a4a72 100%);
  display: flex; align-items: center; padding: 0; z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.sa-header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  width: 100%; display: flex; align-items: center; gap: 20px;
}
@keyframes logo-text-shine {
  0%   { background-position: 200% center, 0% center; }
  50%  { background-position: -200% center, 0% center; }
  100% { background-position: -200% center, 0% center; }
}
.sa-logo {
  display: inline-flex; align-items: center;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%),
    linear-gradient(90deg,
      #38bdf8 0%, #38bdf8 11%,
      rgba(255,255,255,0.8) 11%, rgba(255,255,255,0.8) 38%,
      #4ade80 38%, #4ade80 49%,
      rgba(255,255,255,0.8) 49%
    );
  background-size: 200% auto, 100% auto;
  background-position: 200% center, 0% center;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px; font-weight: 800;
  text-decoration: none; letter-spacing: -0.3px;
  font-family: var(--font-base); flex-shrink: 0;
  animation: logo-text-shine 2.4s ease-in-out infinite;
}
.sa-nav {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.sa-nav a {
  color: rgba(255,255,255,0.75); font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.sa-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sa-nav a.is-active { background: rgba(255,255,255,0.18); color: #fff; }

.sa-main { padding-top: 60px; background: var(--color-bg); min-height: 100vh; }
.sa-wrap { max-width: 1200px; margin: 0 auto; padding: var(--space-xl); }

.gr-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--color-text-muted);
  margin-bottom: var(--space-md); flex-wrap: wrap;
}
.gr-breadcrumb a { color: var(--color-text-muted); text-decoration: none; transition: color 0.15s; }
.gr-breadcrumb a:hover { color: var(--color-primary); }
.gr-breadcrumb-sep { opacity: 0.5; }
.gr-breadcrumb-cur { color: var(--color-text-sub); }

.gr-page-title { margin-bottom: var(--space-lg); }
.gr-page-title h1 {
  font-size: var(--text-2xl); font-weight: 700; color: var(--color-text);
  letter-spacing: -0.5px; margin: 0 0 6px;
}
.gr-page-title p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.region-section { margin-bottom: 36px; }
.region-title {
  font-size: var(--text-md); font-weight: 700; color: var(--color-primary);
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.game-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.game-card:hover {
  border-color: #93b4e0;
  box-shadow: 0 4px 14px rgba(30,68,160,0.08);
}

.game-card-country {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.3px;
}
.game-card-name {
  font-size: var(--text-base); font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.top-btn { position: fixed; right: 32px; bottom: 32px; width: 44px; height: 44px; border-radius: 50%; background: #1e44a0; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 400; box-shadow: 0 2px 8px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.top-btn:hover { transform: translateY(-2px); }
.top-btn--visible { opacity: 1; pointer-events: auto; }