:root {
    --rating-paper: #fffdf5;
    --rating-border: #d5e4db;
    --rating-small: clamp(11px, 0.85cqw, 14px);
    --rating-body: clamp(14px, 1.4vw, 20px);
    --rating-title: clamp(26px, 3.6vw, 52px);
    --rating-heading: clamp(16px, 1.8vw, 24px);
    --rating-release-ink: rgba(42, 87, 86, 0.55);
    --rating-release-size: clamp(9px, 0.7cqw, 13px);
}

#splash-rating-mark {
    position: absolute;
    z-index: 4;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: clamp(44px, 4cqw, 64px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#splash-rating-mark img {
    display: block;
    width: 100%;
    height: auto;
}

.rating-info-link {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--figma-deep-mint);
    font-size: var(--rating-small);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* 등급번호는 모든 화면에서 약관 아래 줄 가운데 — 약관 줄 뒤에 붙이면 한 줄이 너무 길다(2026-11-03 시안 승인).
   색은 진한 초록 유지, 글자 크기만 약관(figma-ui-v2.css --splash-legal-fs)을 따른다. */
#splash-screen #splash-legal { flex-wrap: wrap; }
#splash-legal .rating-info-link {
    flex-basis: 100%;
    margin-left: 0;
    font-size: inherit;
}

#splash-screen .splash-release {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(max(1.5%, env(safe-area-inset-bottom)) + clamp(10px, 0.8cqw, 15px) * 1.4 + 3px);
    left: 0;
    color: var(--rating-release-ink);
    font-size: var(--rating-release-size);
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}

#game-rating-notice {
    box-sizing: border-box;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    border: 0;
    background: var(--rating-paper);
    color: var(--figma-deep-mint);
    /* --rating-text-zoom: 삼성 인터넷 글자 확대 배율(game-rating.js 가 잰다). 나눠서 기본 크기로 되돌린다. */
    font-size: calc(var(--rating-body) / var(--rating-text-zoom, 1));
    line-height: 1.5;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#game-rating-notice[open] {
    display: flex;
    flex-direction: column;
}

.rating-notice-mark {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: clamp(44px, 5vw, 72px);
    height: auto;
}

.rating-notice-content {
    width: min(100%, 640px);
    margin: auto;
    padding: 56px 0 0;
    text-align: center;
}

.rating-game-name {
    margin: 0 0 8px;
    font-size: calc(var(--rating-heading) / var(--rating-text-zoom, 1));
}

#game-rating-title {
    margin: 0;
    outline: none;
    font-size: calc(var(--rating-title) / var(--rating-text-zoom, 1));
    font-weight: 800;
}

#game-rating-description { margin: 8px 0 24px; }

.rating-details {
    margin: 0;
    padding: 12px 0;
    border-block: 1px solid var(--rating-border);
    text-align: left;
    font-size: calc(var(--rating-body) / var(--rating-text-zoom, 1));
}

.rating-details > div {
    display: grid;
    /* em 은 배율로 나눈 값을 따라 칸이 좁아진다(200% 실측: 항목명 줄바꿈) — 글자 크기 변수로 잰다. */
    grid-template-columns: calc(var(--rating-body) * 7) minmax(0, 1fr);
    gap: 12px;
    padding: 3px 0;
}

.rating-details dt { font-weight: 700; }
.rating-details dd { margin: 0; overflow-wrap: anywhere; }
#game-rating-countdown { margin: 20px 0 0; }

#game-rating-close {
    min-width: 120px;
    min-height: 44px;
    margin: 20px 0 0;
    padding: 8px 24px;
    border: 0;
    border-radius: 12px;
    background: var(--figma-deep-mint);
    color: var(--rating-paper);
    font-size: calc(var(--rating-body) / var(--rating-text-zoom, 1));
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 600px) and (orientation: portrait) {
    .rating-details > div { grid-template-columns: calc(var(--rating-body) * 6) minmax(0, 1fr); gap: 8px; }
}

@media (orientation: landscape) and (max-height: 500px) {
    /* 폰·폴드 접힘 가로(보이는 높이 296~311px)에서 안내 전체가 스크롤 없이 들어오게 위아래를 줄인다. */
    #game-rating-notice { padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom)); }
    #game-rating-title { line-height: 1.2; }
    .rating-notice-content { padding-top: 0; }
    .rating-game-name { margin-bottom: 0; }
    #game-rating-description { margin: 2px 0 8px; }
    .rating-details { padding-block: 6px; line-height: 1.3; }
    .rating-details > div { padding-block: 1px; }
    #game-rating-countdown,
    #game-rating-close { margin-top: 8px; }
}

/* 아주 낮은 가로 화면은 저작권·버전을 한 줄에 놓아 시작 버튼의 자리를 확보한다. */
@media (orientation: landscape) and (max-height: 350px) {
    #splash-screen .splash-copyright { right: auto; left: 12px; }
    #splash-screen .splash-release { right: 12px; bottom: max(1.5%, env(safe-area-inset-bottom)); left: auto; }
    /* 약관 묶음 ↔ 저작권 줄 간격 8px — 다른 화면(figma-ui-v2.css #splash-legal)과 같은 값 */
    #splash-screen #splash-legal { bottom: calc(max(1.5%, env(safe-area-inset-bottom)) + clamp(10px, 0.8cqw, 15px) * 1.4 + 8px); }
    #splash-screen:has(#start-btn:not(.hidden)):has(#sns-login-container:not(.hidden)) { --splash-start-top: 63%; }
}