/* ==========================================================================
   Agent D — 우측 사이드바 (.rightcol.game_meta_data)
   값 출처(실제 스팀 CSS에서 grep으로 검증):
   - store.css:        div.rightcol { width:308px; margin-inline-start:14px; float:inline-end }
                       .widestore .rightcol { width: 33% }
   - game.css:2509     .rightcol.game_meta_data { margin-top:16px; overflow:hidden }
   - game.css:2514     .block { linear-gradient(90deg, rgba(0,0,0,.5) 5%, rgba(0,0,0,.65) 95%);
                       backdrop-filter: blur(7px); padding:16px }
   - store_game_shared.css: .game_area_details_specs_ctn / .block_title / linkbar /
                       game_language_options / .all_languages / .game_details 규칙 전부
   - game.css:2063+    #game_area_metascore (.score 50×50, .high #66CC33 / .medium #FFCC33 /
                       .low #FF0000, .logo 35×35, .wordmark 180px, .metacritic 26px)
   - game.css:2206+    .communitylink_achievement_images (grid 5열, gap 4px)
   - shared_global.css:28  --gpColor-GreenHi: #59BF40 (호환 배지 체크 색)
   ========================================================================== */

/* ---- 컬럼 배치 ---- */
.rightcol.game_meta_data {
  float: right;
  width: var(--middle-rightcol-width); /* 33% (widestore) */
  margin-left: 14px;
  margin-top: 16px;
  overflow: hidden;
}

/* ---- 공통 블록 ---- */
.rightcol.game_meta_data .block {
  background: var(--gradient-sidebar-block);
  backdrop-filter: blur(7px);
  padding: 16px;
  margin-bottom: 14px; /* BUILD_SPEC/실측(widestore); 구형 game.css 값은 8px */
}

.rightcol.game_meta_data .block_title {
  font-size: 12px;
  color: var(--color-text-muted); /* #8f98a0 — store_game_shared.css .block .block_title */
  margin-bottom: 2px;
}

/* 모바일 전용 아코디언 헤더 — 데스크톱에선 숨김 (game.css:6620) */
.rightcol.game_meta_data .responsive_block_header {
  display: none;
}

/* ---- ① 기능 목록 ---- */
.game_area_details_specs_ctn {
  margin-bottom: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.game_area_details_specs_ctn .icon {
  padding: 0 6px;
  display: flex;
  color: var(--color-text-muted);
}

.game_area_details_specs_ctn .icon svg,
.game_area_details_specs_ctn .icon img {
  width: 26px;
  height: 16px;
}

.game_area_details_specs_ctn .label {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  height: 100%;
  background: rgba(103, 193, 245, 0.1);
  width: 100%;
  border-radius: 1px;
  color: var(--color-text-secondary);
}

a.game_area_details_specs_ctn .label {
  color: var(--color-accent-alt); /* #66c0f4 */
}

a.game_area_details_specs_ctn:hover .label {
  text-decoration: none;
  color: #fff;
  background: var(--gradient-tag-hover); /* 135deg #67c1f5 → #417a9b */
}

/* ---- ② 언어 표 ---- */
#languageTable table.game_language_options {
  border-collapse: collapse;
  width: 100%; /* .widestore table.game_language_options */
}

.game_language_options tr {
  border-bottom: 1px solid #626366;
}

.game_language_options th {
  font-size: 12px;
  color: #b0aeac;
  font-weight: normal;
}

.game_language_options td {
  color: var(--color-text-muted);
  padding: 3px 0;
  text-align: center;
  font-size: 12px;
}

.game_language_options td span {
  font-weight: bold;
  color: var(--color-link); /* ✔ 표시 #67c1f5 */
}

.game_language_options td.checkcol,
.game_language_options th.checkcol {
  width: 62px;
}

.game_language_options td:first-child {
  text-align: left;
}

.game_language_options .ellipsis {
  max-width: 94px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all_languages {
  text-decoration: none;
  color: var(--color-link);
  font-size: 12px;
  cursor: pointer;
  margin-top: 5px;
  display: inline-block;
}

.all_languages:hover {
  text-decoration: none;
  color: #fff;
}

/* ---- ③ 휴대 기기 호환 배지 ---- */
#deck_verified_row .deck_verified_ctn {
  display: flex;
  align-items: center;
  gap: 8px;
}

#deck_verified_row .deck_verified_icon {
  display: flex;
  flex-shrink: 0;
}

#deck_verified_row .deck_verified_label {
  flex-grow: 1;
  font-size: 12px;
  color: var(--color-text);
}

#deck_verified_row .deck_verified_status {
  color: #fff;
  font-weight: bold;
}

#deck_verified_row .deck_verified_info {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* ---- ④ 도전 과제 ---- */
.communitylink_achievement_images {
  max-width: 100%;
  padding: 4px 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(5, 1fr);
  justify-content: start;
}

.communitylink_achievement_images img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

div.communitylink_achievement,
a.communitylink_achievement {
  width: 100%;
  aspect-ratio: 1 / 1;
}

img.communitylink_achievement {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 2px;
}

a.communitylink_achievement.communitylink_achivement_plusmore {
  background-color: var(--bg-accent-translucent);
  border-radius: 1px;
  font-size: 13px;
  color: var(--color-link);
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  line-height: 14px;
}

a.communitylink_achievement.communitylink_achivement_plusmore:hover {
  color: #fff;
  text-decoration: none;
  background: linear-gradient(-60deg, #67c1f5 0%, #417a9b 100%); /* game.css plusmore:hover */
}

/* ---- ⑤ 메타크리틱 ---- */
#game_area_metascore .score {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 25px;
  text-align: center;
  float: left;
}

#game_area_metascore .score.high {
  background-color: #66cc33;
}

#game_area_metascore .score.medium {
  background-color: #ffcc33;
}

#game_area_metascore .score.low {
  background-color: #ff0000;
}

#game_area_metascore .logo {
  height: 35px;
  width: 35px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
}

#game_area_metascore .wordmark {
  float: left;
  width: 180px;
}

#game_area_metascore .metacritic {
  font-weight: bold;
  color: #fff;
  margin-left: 2px;
  font-size: 26px;
  line-height: 26px;
  margin-top: 4px;
}

#game_area_metalink {
  padding: 0;
  position: relative;
  left: 2px;
  clear: left;
  font-size: 12px;
}

#game_area_metalink svg {
  vertical-align: middle;
  color: var(--color-text-muted);
}

/* ---- ⑥ 상세 정보 블록 ---- */
.game_details {
  color: var(--color-text-muted);
  line-height: 20px;
}

.game_details b {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--summary-title-text-color);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 11px;
}

.details_block a {
  font-weight: 300;
  color: var(--color-link);
}

.details_block a:hover {
  color: #fff;
}

#game_details_links {
  padding-top: 14px; /* 실제 DOM의 인라인 style="padding-top: 14px" 재현 */
}

/* ---- 링크바 ---- */
.block a.linkbar {
  min-height: 17px;
  padding: 4px 0 4px 8px;
  line-height: 17px;
  background: rgba(103, 193, 245, 0.1);
  color: var(--color-link);
  border-radius: 1px;
  display: block;
  margin-bottom: 2px;
}

.block a.linkbar:hover {
  text-decoration: none;
  color: #fff;
  background: var(--gradient-tag-hover);
}

.linkbar svg {
  max-width: 12px;
  max-height: 12px;
  padding-right: 4px;
  vertical-align: middle;
  fill: #fff;
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 910px) {
  .rightcol.game_meta_data {
    float: none;
    width: 100%;
    margin: 16px 0;
  }
}

@media (max-width: 600px) {
  .rightcol.game_meta_data .block {
    padding: 12px; /* game.css responsive: .game_meta_data .block { padding: 12px } */
  }

  #LanguagesHeader .responsive_hidden {
    display: none;
  }
}