/* ===
Google Play 게임 카드 (play_games.html / play_grossing.html 파셜)
기존 .game-item 카드 골격을 그대로 쓰되, 카드 전체가 스토어로 가는 링크
=== */

a.play-item {display: block; color: inherit; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;}
a.play-item:hover {transform: translateY(-3px); box-shadow: 0 6px 16px rgba(255,255,255,0.08);}

/* 스토어 아이콘은 정사각형 → 카드 이미지 영역을 1:1 로 */
.play-item .img-bx {position: relative;}
.play-item .img-bx img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;}

/* 썸네일 좌상단 순위 배지 (TOP3 는 금/은/동) */
.play-item .rank-badge {
    position: absolute; left: 8px; top: 8px; z-index: 2;
    min-width: 26px; height: 26px; line-height: 26px; padding: 0 5px; box-sizing: border-box;
    border-radius: 8px; text-align: center;
    background-color: rgba(0,0,0,0.62); color: #fff;
    font-weight: 700; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.25);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.play-item .rank-badge.b1 {background: linear-gradient(135deg, #ffe27a, #e8b210); color: #1a1a1a; border-color: transparent;}
.play-item .rank-badge.b2 {background: linear-gradient(135deg, #e8eaee, #9aa4b2); color: #1a1a1a; border-color: transparent;}
.play-item .rank-badge.b3 {background: linear-gradient(135deg, #ecb98a, #b96f34); color: #1a1a1a; border-color: transparent;}

/* ===
섹션 헤더: 제목 + 부제 + 전체보기 링크
=== */
.sec-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 18px;}
.sec-head .tit-box h2 {margin: 0;}
.sec-head .sub-desc {color: var(--font-color-sub); font-size: var(--font-size-sm); margin: 5px 0 0;}
.sec-head .view-all {
    flex: none; color: var(--font-color-desc); font-size: var(--font-size-sm);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 6px 14px;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s; white-space: nowrap;
}
.sec-head .view-all::after {content: ' →';}
.sec-head .view-all:hover {
    color: var(--font-color-basic); border-color: var(--color-highlight-normal);
    background-color: rgba(255,0,102,0.08);
}
@media screen and (max-width:768px) {
    .sec-head {margin: 0 0 14px;}
    .sec-head .view-all {padding: 5px 11px;}
}

.play-item .sub-bx {justify-content: space-between;}
.play-item .play-rating {font-weight: 600; color: var(--font-color-basic); font-size: var(--font-size-md2);}
.play-item .play-rating::before {content: '★'; color: #ffd34d; margin: 0 4px 0 0;}
.play-item .play-store-mark {
    font-size: var(--font-size-sm2); color: var(--font-color-sub);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 4px 10px;
    background: url('../images/btn-store/goolge-store.svg') no-repeat 8px 50%/11px auto;
    padding-left: 24px; white-space: nowrap;
}
a.play-item:hover .play-store-mark {color: var(--font-color-basic); border-color: rgba(255,255,255,0.4);}

@media screen and (max-width:768px) {
    .play-item .sub-bx {flex-direction: row; align-items: center; width: 100%; box-sizing: border-box;}
}