/* ==========================================================================
   푸터 — 스팀 #footer 재현 (Agent F)
   검증한 원본 값:
   - #footer 배경 #171a21 (= var(--color-footer))
   - div#footer 좌우 padding 16px          (shared_global.css L1322)
   - body.v6 #footer_spacer height 290px   (store.css L91 — 본 스펙은 190px 지정)
   - 링크/본문 회색 #8f98a0, 흐린 회색 #556772 (store.css/game.css)
   ========================================================================== */

#footer_spacer {
  height: 190px; /* BUILD_SPEC 지정값 (스팀 원본은 290px) */
}

#footer {
  background: var(--color-footer); /* #171a21 */
  padding-left: 16px;
  padding-right: 16px;
  color: var(--color-text-muted); /* #8f98a0 */
  font-size: 12px;
}

.footer_content {
  max-width: var(--store-page-width);
  margin: 0 auto;
  padding: 16px;
}

/* Row 1 — 텍스트 로고 + 저작권 */
.footer_row_top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.footer_logo {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 34px;
}

.footer_text {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-muted);
}

.footer_note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-tag-label); /* #556772 */
}

/* 구분선 */
#footer .rule {
  height: 1px;
  background: #363c44; /* 스팀 푸터 구분선 색 (research-structure.md §10) */
  margin: 16px 0;
}

/* Row 2 — 파이프로 구분된 링크 줄 (render.js가 채움) */
#footer_links {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-muted);
}

#footer_links a {
  color: var(--color-text-muted);
}

#footer_links a:hover {
  color: #fff;
}

/* Row 3 — 작은 고지 문구 */
.footer_smallprint {
  margin-top: 16px;
  font-size: 11px;
  line-height: 15px;
  color: var(--color-tag-label);
}

/* ------------------------------------------------------------------ */
@media (max-width: 910px) {
  #footer {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media (max-width: 600px) {
  #footer_spacer {
    height: 80px;
  }

  .footer_row_top {
    flex-direction: column;
    gap: 10px;
  }

  .footer_logo {
    line-height: 24px;
    font-size: 18px;
  }

  .footer_content {
    padding: 16px 8px;
  }
}