/* ==========================================================================
   Agent C — 대기열 액션 바 + 구매 박스 + 좌측 설명 컬럼
   값 출처: 스팀 실제 CSS(game.css / store.css / shared_global.css)에서 검증.
   전역 box-sizing: border-box 이므로 스팀(content-box) 치수는 보정함.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 대기열/찜 액션 바
   (game.css: .queue_and_playtime, .game_background_lighten, .widestore .queue_ctn,
    .queue_ctn .queue_actions_ctn — padding 16px / gap 6px / space-between)
   -------------------------------------------------------------------------- */
.queue_and_playtime {
  position: relative;
}

.game_background_lighten {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  width: 100%;
  /* game.css 검증값 */
  background: radial-gradient(1000px 153px at 50% top, hsl(212 35% 24% / 1), rgba(0, 0, 0, 0));
}

.game_background_lighten .game_background_lighten_border {
  height: 1px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
}

.queue_ctn {
  position: relative;
  max-width: var(--store-page-width); /* widestore: 1200px */
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 auto 16px;
}

.queue_ctn .queue_actions_ctn {
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 6px;
}

.queue_ctn .queue_actions_ctn .expand_to_fill {
  flex-grow: 1;
}

/* 버튼 안 아이콘 정렬 (game.css .queue_btn_active img 마진 패턴 참조) */
.queue_actions_ctn .queue_btn_icon {
  vertical-align: middle;
  margin-inline-start: -2px;
  margin-inline-end: 3px;
  margin-top: -2px;
}

/* game.css: #shareBtn img { width/height 16px; padding-bottom 3px } */
#shareBtn svg {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   2. 좌측 컬럼 뼈대
   (store.css: div.leftcol { width 65%; float left }
    game.css: .game_description_column { font-size 14px; color #acb2b8; margin-top 16px })
   -------------------------------------------------------------------------- */
div.leftcol {
  width: 65%;
  float: left;
}

.game_description_column {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 16px;
}

/* 좌측 컬럼 섹션 h2 — 14px 볼드 흰색 + 1px 그라디언트 밑줄
   (game.css: .game_description_column h2 — line-height 26px, bold, 14px, #fff,
    maincol_gradient_rule.png 밑줄을 그라디언트로 재현) */
.game_description_column h2 {
  line-height: 26px;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding-bottom: 2px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(103, 193, 245, 0.6), rgba(103, 193, 245, 0)) left bottom / 100% 1px no-repeat;
}

/* --------------------------------------------------------------------------
   3. 구매 박스
   (game.css 검증값: 그라디언트 -60deg rgba(226,244,255,.3)→rgba(84,107,115,.3),
    radius 4px, padding 16px/26px, font 13px #c6d4df, wrapper margin-bottom 28px)
   -------------------------------------------------------------------------- */
.game_area_purchase_game_wrapper {
  margin-bottom: 28px;
  position: relative;
}

.game_area_purchase_game {
  position: relative;
  background: var(--gradient-purchase-box);
  border-radius: var(--radius-box);
  font-size: 13px;
  color: var(--color-text);
  padding: 16px;
  padding-bottom: 26px;
}

/* game.css: .game_area_purchase_game b { color: #8bc53f } */
.game_area_purchase_game b {
  font-weight: normal;
  color: #8bc53f;
}

/* 제목 — 21px/23px 흰색, 밑줄 그라디언트 제거 (game.css h2.title.title 검증) */
.game_description_column .game_area_purchase_game h2.title {
  font-size: 21px;
  line-height: 23px;
  font-weight: normal;
  color: #fff;
  margin: 0;
  padding: 0;
  background: none;
}

/* 플랫폼 아이콘 (game.css: float inline-end, flex, gap 6px / store.css: 20×20, #fff) */
.game_area_purchase_game .game_area_purchase_platform {
  float: right;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.game_area_purchase_platform .platform_img {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #fff;
}

.game_area_purchase_platform .platform_img svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 안내 문구 (render가 채움 — null이면 render가 숨김) */
#purchase_notice {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text);
}

#purchase_notice:empty {
  display: none;
}

/* 가격 + 장바구니 로젠지 — 박스 하단에 17px 걸쳐 내려옴
   (game.css: .game_purchase_action { absolute; right/left 16px; bottom -17px }) */
.game_area_purchase_game .game_purchase_action {
  position: absolute;
  right: 16px;
  bottom: -17px;
  left: 16px;
  white-space: nowrap;
  text-align: right;
}

/* 검은 배경 스트립 (game.css: #000, padding-block 2px, padding-inline 0 2px, radius 2px) */
.game_purchase_action_bg {
  display: inline-block;
  vertical-align: bottom;
  background-color: #000;
  padding: 2px 2px 2px 0;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  font-size: 0;
}

.game_purchase_action_bg > * {
  font-size: 12px;
  display: inline-block;
  margin-inline-start: 2px;
  vertical-align: middle;
}

/* 가격 (game.css: bg #000, 13px, padding 8/12/0, height 24px content-box → 32px border-box) */
.game_purchase_action .game_purchase_price {
  display: inline-block;
  background-color: #000;
  font-size: 13px;
  padding: 8px 12px 0;
  height: 32px;
  color: var(--color-text);
}

/* 할인 블록 (store.css/game.css 검증: pct #BEEE11/#4c6b22 25px, prices bg #344654,
   원가 #738895 11px 사선 취소선, 최종가 #BEEE11) */
#purchase_price_ctn .discount_block {
  display: inline-flex;
  height: 32px;
  vertical-align: middle;
}

#purchase_price_ctn .discount_pct {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  padding: 0 6px;
  color: var(--color-discount-text);
  background: var(--color-discount-bg);
}

#purchase_price_ctn .discount_prices {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  background: #344654;
  padding: 0 6px 0 8px;
  height: 32px;
  vertical-align: top;
}

#purchase_price_ctn .discount_original_price {
  position: relative;
  width: fit-content;
  color: var(--color-price-original);
  font-size: 11px;
  line-height: 12px;
  white-space: nowrap;
}

#purchase_price_ctn .discount_original_price::before {
  content: "";
  left: 0;
  right: 0;
  position: absolute;
  top: 43%;
  border-bottom: 1.5px solid var(--color-price-original);
  transform: skewY(-8deg);
  box-shadow: 0 0 2px #000;
}

#purchase_price_ctn .discount_final_price {
  color: var(--color-discount-text);
  line-height: 16px;
  font-size: 14px;
}

.btn_addtocart {
  position: relative;
}

/* 오버행 버튼 아래 여백 (game.css: .purchase_area_spacer { height: 2px }) */
.purchase_area_spacer {
  height: 2px;
}

/* --------------------------------------------------------------------------
   4. 언론 인용(평가) 섹션
   (game.css: #game_area_reviews 12px margin-top 30px; blockquote 흰색 14px)
   -------------------------------------------------------------------------- */
#game_area_reviews {
  font-size: 12px;
  margin-top: 30px;
}

#game_area_reviews blockquote,
#game_area_reviews i {
  display: block;
  color: #fff;
  font-size: 14px;
  text-transform: none;
}

#game_area_reviews blockquote i {
  display: inline;
  font-style: normal;
}

#game_area_reviews p {
  margin-bottom: 12px;
}

#game_area_reviews em,
#game_area_reviews cite {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   5. 게임 정보 본문
   (game.css: .game_area_description { 14px/1.5em; margin-top 30px; overflow hidden })
   -------------------------------------------------------------------------- */
.game_area_description {
  line-height: 1.5em;
  font-size: 14px;
  margin-top: 30px;
  overflow: hidden;
  max-width: 100%;
}

.game_area_description p {
  margin-bottom: 8px;
}

.game_area_description strong {
  font-weight: bold;
  color: var(--color-text);
}

.game_area_description .bb_img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
}

ul.bb_ul {
  list-style: disc outside;
  padding-left: 15px;
  margin-bottom: 8px;
}

.bb_ul > li {
  list-style-position: outside;
  list-style-type: disc;
  margin-bottom: 4px;
}

/* game.css 검증: h2.bb_tag { margin-top 18px; margin-bottom 0; 15px; #2f89bc } */
.game_description_column .game_area_description h2.bb_tag {
  margin-top: 18px;
  margin-bottom: 0;
  background: none;
  padding-bottom: 0;
  font-size: 15px;
  line-height: 26px;
  color: #2f89bc;
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   6. 자동 접힘 (스팀 shared_global.css의 shared_autocollapse_* 재현)
   fade: height 79px, rgba(16,25,35,0)→rgba(16,25,35,1) 80%
   readmore: line-height 26px, #67c1f5, rgb(37 63 96 / 50%) 가로 그라디언트 바
   -------------------------------------------------------------------------- */
.game_page_autocollapse {
  position: relative;
}

.game_page_autocollapse.collapsed {
  overflow: hidden;
}

.shared_autocollapse_fade {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 79px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(16, 25, 35, 0) 0%, rgba(16, 25, 35, 1) 80%);
}

.game_page_autocollapse.collapsed .shared_autocollapse_fade,
.shared_autocollapse_ctn.collapsed .shared_autocollapse_fade {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.shared_autocollapse_readmore {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(37, 63, 96, 0.5) 33%, rgba(37, 63, 96, 0.5) 66%, rgba(0, 0, 0, 0) 100%);
  line-height: 26px;
  cursor: pointer;
  color: var(--color-link);
  font-size: 12px;
}

.shared_autocollapse_readmore:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(37, 63, 96, 0.7) 33%, rgba(37, 63, 96, 0.7) 66%, rgba(0, 0, 0, 0) 100%);
}

.shared_autocollapse_readmore svg {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------------------
   7. 시스템 요구 사항 — OS 탭 + 2열 사양
   (game.css: .sys_req { margin-top: 30px }, sys_req h2 { margin-bottom: 0 };
    탭 스타일 규칙은 저장된 참조 CSS에 없어 스펙 서술대로 재구성 —
    비활성 #8f98a0, 활성 = 밝은 배경 + 흰 글자, 시그니처 파랑 반투명 사용)
   -------------------------------------------------------------------------- */
.sys_req {
  margin-top: 30px;
}

.game_description_column .game_page_autocollapse.sys_req h2 {
  margin-bottom: 0;
}

.sysreq_tabs {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.sysreq_tab {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 3px 3px 0 0;
  margin-right: 2px;
}

.sysreq_tab:hover {
  color: #fff;
}

.sysreq_tab.active {
  color: #fff;
  background: var(--bg-accent-translucent);
  cursor: default;
}

.sysreq_contents {
  padding-top: 10px;
  font-size: 12px;
}

.game_area_sys_req {
  display: none;
}

.game_area_sys_req.active {
  display: block;
}

.game_area_sys_req::after {
  content: "";
  display: block;
  clear: both;
}

.game_area_sys_req_leftCol {
  float: left;
  width: 48%;
}

.game_area_sys_req_rightCol {
  float: right;
  width: 48%;
}

.game_area_sys_req_full {
  width: 100%;
}

.game_area_sys_req strong {
  color: var(--color-text);
}

.game_area_sys_req ul.bb_ul {
  margin-top: 4px;
}

.game_area_sys_req_note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. 법적 고지 (game.css 검증: #566168, 11px, margin 20px 0 10px)
   -------------------------------------------------------------------------- */
#game_area_legal {
  color: #566168;
  font-size: 11px;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   9. 반응형
   -------------------------------------------------------------------------- */
@media (max-width: 910px) {
  .queue_ctn .queue_actions_ctn {
    padding: 16px 2vw;
    flex-wrap: wrap;
  }

  div.leftcol {
    width: 100%;
    float: none;
    padding: 0 2vw;
  }

  /* game.css 반응형 검증: 액션 버튼 span padding 0 10px / 13px */
  .game_purchase_action_bg .btn_medium > span {
    padding: 0 10px;
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  /* 좁은 화면: 로젠지 오버행 해제 — 박스 안 정적 배치 */
  .game_area_purchase_game {
    padding-bottom: 16px;
  }

  .game_area_purchase_game .game_purchase_action {
    position: static;
    margin-top: 12px;
    text-align: right;
  }

  .game_area_sys_req_leftCol,
  .game_area_sys_req_rightCol {
    float: none;
    width: 100%;
  }

  .game_area_sys_req_rightCol {
    margin-top: 10px;
  }
}