/* ==========================================================================
   공용 베이스 — 리셋, 타이포, 레이아웃 컨테이너, 공용 버튼/태그/평가색
   (섹션별 스타일은 header/hero/purchase/sidebar/reviews/footer.css에)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 12px;
  min-width: 320px;
}

img {
  border: 0;
}

ul {
  list-style: none;
}

a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--color-accent-alt);
}

h1,
h2,
h3 {
  font-weight: normal;
}

h2 {
  font-weight: 300;
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}

input,
button {
  font-family: inherit;
}

/* 중앙 정렬 콘텐츠 컬럼 (스팀 .page_content) */
.page_content {
  max-width: var(--store-page-width);
  width: 100%;
  margin: 0 auto;
}

.clear {
  clear: both;
}

/* --------------------------------------------------------------------------
   버튼 — 스팀 buttons.css 재현 (구조: 바깥 1px 패딩 + 안쪽 span이 실제 면)
   -------------------------------------------------------------------------- */
.btn_green_steamui,
.btnv6_blue_hoverfade {
  border-radius: var(--radius-btn);
  border: none;
  padding: 1px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none !important;
  background: transparent;
}

.btn_green_steamui {
  color: var(--color-buy-btn-text) !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.btn_green_steamui > span {
  border-radius: var(--radius-btn);
  display: block;
  background: var(--gradient-buy-btn);
}

.btn_green_steamui:hover {
  color: #fff !important;
}

.btn_green_steamui:hover > span {
  background: var(--gradient-buy-btn-hover);
}

.btnv6_blue_hoverfade {
  color: var(--color-link) !important;
  background: var(--bg-accent-translucent);
}

.btnv6_blue_hoverfade > span {
  border-radius: var(--radius-btn);
  display: block;
}

.btnv6_blue_hoverfade:hover {
  color: #fff !important;
  background: var(--gradient-blue-btn-hover);
}

.btn_large > span {
  padding: 0 15px;
  font-size: 16px;
  line-height: 40px;
}

.btn_medium_tall > span {
  padding: 0 15px;
  font-size: 15px;
  line-height: 36px;
}

.btn_medium > span {
  padding: 0 15px;
  font-size: 15px;
  line-height: 30px;
}

.btn_small > span {
  padding: 0 15px;
  font-size: 12px;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   태그 필 (스팀 .app_tag)
   -------------------------------------------------------------------------- */
.app_tag {
  display: inline-block;
  line-height: 19px;
  padding: 0 7px;
  color: var(--color-link);
  background-color: var(--bg-accent-translucent);
  margin-right: 2px;
  margin-bottom: 3px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.app_tag:hover {
  color: #fff;
  background: var(--gradient-tag-hover);
}

.app_tag.add_button {
  padding: 0 8px;
}

/* --------------------------------------------------------------------------
   평가 요약 색상 (스팀 .game_review_summary)
   -------------------------------------------------------------------------- */
.game_review_summary {
  color: var(--color-review-negative);
}

.game_review_summary.positive {
  color: var(--color-review-positive);
}

.game_review_summary.mixed {
  color: var(--color-review-mixed);
}

.game_review_summary.no_reviews,
.game_review_summary.not_enough_reviews {
  color: var(--color-review-none);
}

/* --------------------------------------------------------------------------
   반응형 공통 — 910px 이하: 콘텐츠 컬럼 유동폭 + 좌우 여백
   -------------------------------------------------------------------------- */
@media (max-width: 910px) {
  .page_content {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media (max-width: 600px) {
  .page_content {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}