/* ===================================================
 * @module game-review-home-widget | @source css/game-review.css (카드 그리드 관련 규칙만 추출)
 * @pair inc/game-review-home-widget.php
 * @flow 홈 화면, 뉴스룸+RON BOX1 로우 아래 — 게임 리뷰 카드를 축소해 한 줄로 노출.
 *
 * 원본과의 차이점(의도적):
 *   - `.gr-hdr-outer`(검색/필터 RPG 헤더) 관련 CSS는 전혀 가져오지 않음 — 카드
 *     그리드(.gr-card 계열)만 추출.
 *   - `--gr-card-*`(카드 배경/제목/점수뱃지) 변수는 사이트 다크모드 프리셋 시스템에
 *     이미 전역 등록돼 있어 홈에서도 자동으로 값이 잡힘 — 라이트 폴백만 명시.
 *   - `--gr-pill-steam/-origin/-uplay/-gog-*`, `--gr-pill-genre-bg`, `--gr-pill-year-bg`는
 *     원본에도 :root/프리셋 어디에도 라이트 기본값이 없는 기존 버그(라이트 모드에서
 *     배경이 사실상 비어 보임) — 이 파일에서는 var()에 직접 라이트 폴백을 채워 넣어
 *     버그를 물려받지 않게 했다. 다크모드 배지 배경(genre/year/platform/steam/origin/
 *     uplay/gog)은 전역 프리셋이 아니라 game-review.css에 하드코딩돼 있어 아래에
 *     동일하게 복사했다.
 * =================================================== */

.game-review-home-widget-wrap {
    margin: 40px auto 8px;
}

/* ── 구분선: 뉴스룸(.nhw-section-divider)과 같은 케이스 A 패턴이되, 타이틀이
   좌측이 아닌 우측 끝에 오도록 라인을 먼저, 타이틀 칩을 나중에 배치 ── */
.grhw-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}
.grhw-section-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-main, #e2e2e8);
}
/* body.dark-theme a / a:visited(css/dark-mode-core.css)가 요소+클래스 조합이라 단일
   클래스 선택자보다 명세도가 높아 흰 글씨를 덮어씀 — 조상 클래스(.grhw-section-divider)로
   감싸 명세도를 올려 방지 (css/tdf-home-widget.css의 .tdf-home-more-tab과 동일 패턴) */
.grhw-section-divider .grhw-section-title,
.grhw-section-divider .grhw-section-title:visited {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffffff;
    background: var(--point-color, #C21807);
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
    margin-right: 3px;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.grhw-section-divider .grhw-section-title:hover {
    filter: brightness(0.88);
    transform: translateY(-1px);
    color: #ffffff;
}

.grhw-section-caption-bar {
    width: 1px;
    height: 12px;
    flex: 0 0 auto;
    background: var(--border-main, #d8d8de);
}
.grhw-section-caption {
    color: #b8971a;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.grhw-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.grhw-grid .gr-card {
    display: block;
    border-radius: 8px;
    border: 1.5px solid var(--gr-card-border, #e0e4f0);
    background: var(--gr-card-bg, #ffffff);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.2s ease, transform 0.18s ease;
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
}
.grhw-grid .gr-card:hover {
    border-color: var(--gr-card-hover-border, #3B4FCC);
    box-shadow: 0 4px 16px rgba(59, 79, 204, 0.13);
    transform: translateY(-2px);
}

/* js/game-review-home-widget.js가 10초 간격으로 랜덤 카드에 부여하는 발광 효과 —
   호버와 동일한 포인트 컬러를 써서 "잠깐 호버된 것 같은" 자연스러운 강조로 읽히게 함 */
.grhw-grid .gr-card-glow {
    animation: gr-card-glow-pulse 2s ease-in-out;
}
@keyframes gr-card-glow-pulse {
    0% {
        border-color: var(--gr-card-border, #e0e4f0);
        box-shadow: 0 0 0 0 rgba(59, 79, 204, 0);
    }
    30% {
        border-color: var(--gr-card-hover-border, #3B4FCC);
        box-shadow: 0 0 14px 2px rgba(59, 79, 204, 0.45);
    }
    100% {
        border-color: var(--gr-card-border, #e0e4f0);
        box-shadow: 0 0 0 0 rgba(59, 79, 204, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .grhw-grid .gr-card-glow {
        animation: none;
    }
}

.grhw-grid .gr-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.grhw-grid .gr-card-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--gr-card-bg, #ffffff);
}

.grhw-grid .gr-card-top {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.grhw-grid .gr-score-badge {
    background: var(--gr-card-score-bg, #3B4FCC);
    border-radius: 5px;
    padding: 3px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.grhw-grid .gr-score-num {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--gr-card-score-num, #ffffff);
}
.grhw-grid .gr-score-denom {
    font-size: 7px;
    color: var(--gr-card-score-label, rgba(255, 255, 255, 0.65));
}

.grhw-grid .gr-title-wrap {
    flex: 1;
    min-width: 0;
    height: calc(10px * 1.35 * 2);
    overflow: hidden;
}
.grhw-grid .gr-card-title {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--gr-card-title, #1a1a2e);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grhw-grid .gr-card-pills {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.grhw-grid .gr-pill {
    font-size: 7.5px;
    font-weight: 600;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
/* 뉴스룸 배지와 동일한 디테일 — 카드 호버 시 배지가 살짝 떠오름 */
.grhw-grid .gr-card:hover .gr-pill {
    transform: translateY(-1px);
}

.grhw-grid .gr-pill-platform  { background: #f1f5f9; color: var(--gr-pill-platform-color, #475569); border: 0.5px solid var(--gr-pill-platform-border, #cbd5e1); }
.grhw-grid .gr-pill-genre     { background: var(--gr-pill-genre-bg, #fdf2f8); color: var(--gr-pill-genre-color, #be185d); border: 0.5px solid var(--gr-pill-genre-border, rgba(190, 24, 93, 0.3)); }
.grhw-grid .gr-pill-year      { background: var(--gr-pill-year-bg, #f0fdf4); color: var(--gr-pill-year-color, #15803d); border: 0.5px solid var(--gr-pill-year-border, rgba(21, 128, 61, 0.3)); }
.grhw-grid .gr-pill-steam     { background: var(--gr-pill-steam-bg, rgba(30, 64, 175, 0.08));  color: var(--gr-pill-steam-color, #1e40af);  border: 0.5px solid var(--gr-pill-steam-border, rgba(30, 64, 175, 0.3)); }
.grhw-grid .gr-pill-origin    { background: var(--gr-pill-origin-bg, rgba(194, 65, 12, 0.08));  color: var(--gr-pill-origin-color, #c2410c);  border: 0.5px solid var(--gr-pill-origin-border, rgba(194, 65, 12, 0.3)); }
.grhw-grid .gr-pill-uplay     { background: var(--gr-pill-uplay-bg, rgba(109, 40, 217, 0.08));  color: var(--gr-pill-uplay-color, #6d28d9);  border: 0.5px solid var(--gr-pill-uplay-border, rgba(109, 40, 217, 0.3)); }
.grhw-grid .gr-pill-gog       { background: var(--gr-pill-gog-bg, rgba(126, 34, 206, 0.08));  color: var(--gr-pill-gog-color, #7e22ce);  border: 0.5px solid var(--gr-pill-gog-border, rgba(126, 34, 206, 0.3)); }

/* 다크 테마 배지 — game-review.css와 동일 (전역 프리셋이 아니라 하드코딩된 규칙이라 그대로 복사) */
body.dark-theme .grhw-grid .gr-pill-genre    { background: rgba(190, 24, 93, 0.2); }
body.dark-theme .grhw-grid .gr-pill-year     { background: rgba(21, 128, 61, 0.2); }
body.dark-theme .grhw-grid .gr-pill-platform { background: rgba(71, 85, 105, 0.2); }
body.dark-theme .grhw-grid .gr-pill-steam    { background: rgba(30, 64, 175, 0.25); color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); }
body.dark-theme .grhw-grid .gr-pill-origin   { background: rgba(194, 65, 12, 0.25); color: #fdba74; border-color: rgba(253, 186, 116, 0.35); }
body.dark-theme .grhw-grid .gr-pill-uplay    { background: rgba(109, 40, 217, 0.25); color: #c4b5fd; border-color: rgba(196, 181, 253, 0.35); }
body.dark-theme .grhw-grid .gr-pill-gog      { background: rgba(126, 34, 206, 0.25); color: #d8b4fe; border-color: rgba(216, 180, 254, 0.35); }

@media (max-width: 900px) {
    .grhw-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    .grhw-grid { grid-template-columns: repeat(3, 1fr); }
    .grhw-grid .gr-card-title { font-size: 9px; }
}