/* 안내 페이지 전용 (시작 가이드 · 게임 소개 · 사이트 소개 · 약관 및 정책 · 404) */

/* ---------- 시작 가이드: 이용 순서 ---------- */
.step { display: flex; gap: var(--sp-4); }
.step__no { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--primary); border-radius: 12px; }
.step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step__title { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.step__text { font-size: 14px; line-height: 1.75; color: var(--text-sub); }
.info-text { font-size: 14px; line-height: 1.8; color: var(--text-sub); }
.num { text-align: right; white-space: nowrap; }
.quick-links .btn { justify-content: flex-start; }

/* ---------- 게임 소개 ---------- */
.game-card { overflow: hidden; display: flex; flex-direction: column; }
.game-card__img { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 7; }
.game-card__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.compare-table th:first-child { width: 200px; }
@media (max-width: 640px) {
  .compare-table th:first-child { width: auto; }
  .compare-table { min-width: 520px; }
}
.tip-box { display: flex; flex-direction: column; gap: var(--sp-2); }
.tip-box__title { font-size: 16px; font-weight: 700; color: var(--text-strong); }

/* ---------- 사이트 소개 ---------- */
.about-stat .stat__value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline__item { display: flex; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.timeline__dot { width: 14px; height: 14px; border-radius: 50%; background: #A78BFA; box-shadow: 0 0 0 4px rgba(139,92,246,.2); }
.timeline__line { flex: 1; width: 2px; margin-top: var(--sp-1); background: rgba(255,255,255,.1); }
.timeline__item:last-child .timeline__line { display: none; }
.timeline__year { font-family: var(--font-display); font-weight: 700; color: var(--accent); }
.timeline__title { font-size: 16px; font-weight: 700; color: var(--text-strong); margin-top: 2px; }
.timeline__desc { font-size: 14px; color: var(--muted); margin-top: 2px; }
.info-note { font-size: 14px; line-height: 1.8; color: var(--text-sub); }
.info-note b { color: var(--text); }
.site-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-5); color: var(--text); }
.site-card:hover { color: var(--text); }
.site-card__url { font-size: 12px; color: var(--accent); overflow-wrap: anywhere; }

/* ---------- 약관 및 정책 ---------- */
.policy-body { padding: var(--sp-2) var(--sp-8) var(--sp-5); }
.policy-sec { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.policy-sec:last-child { border-bottom: 0; }
.policy-sec h3 { font-size: 16px; }
.policy-sec p { font-size: 14px; line-height: 1.8; color: var(--text-sub); }
@media (max-width: 480px) {
  .policy-body { padding: var(--sp-1) var(--sp-5) var(--sp-4); }
}

/* ---------- 404 ---------- */
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding-block: clamp(40px, 8vw, 90px); text-align: center; }
.notfound__code { font-family: var(--font-display); font-size: clamp(80px, 16vw, 120px); font-weight: 700; line-height: 1; color: var(--accent); text-shadow: 0 0 40px rgba(139,92,246,.5); }
.notfound__title { font-size: clamp(24px, 3vw, 30px); font-weight: 800; }
.notfound__desc { font-size: 16px; line-height: 1.7; color: var(--muted); }
.notfound .search-bar { width: min(460px, 100%); }
.notfound__links { justify-content: center; }