:root {
    --pink: #fdadd4;
    --pink-strong: #f495c4;
    --blue: #b5e3fa;
    --ink: #333333;
    --white: #ffffff;
    --glass-white: rgba(255, 255, 255, 0.88);
    --soft-shadow: 0 24px 80px rgba(20, 8, 26, 0.28);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

button {
    font: inherit;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--ink);
    background: #f8eef5;
    font-family:
        "Malgun Gothic",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        sans-serif;
}

body.is-scroll-locked {
    overflow: hidden;
}


/* =========================================================
   실제 메인 페이지 / 첫 번째 Hero 화면
   ========================================================= */

.site-content {
    min-height: 500vh;
    min-height: 500svh;

    background: #ffffff;

    transition:
        filter 900ms ease,
        transform 1200ms ease,
        opacity 900ms ease;
}

body:not(.is-age-approved) .site-content {
    filter: blur(24px) saturate(0.72);
    transform: scale(1.045);
    opacity: 0.82;
}

.hero-section,
.game-introduction-section,
.character-introduction-section,
.gallery-section,
.final-section {
    min-height: 100vh;
    min-height: 100svh;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.hero-section {
    position: relative;

    overflow: hidden;

    color: var(--ink);
    background: #ffffff;
}

/*
 * =========================================================
 * 메인 화면 왼쪽 위 언어 선택
 * =========================================================
 */

.hero-language-switch {
    position: absolute;
    top: 30px;
    left: 34px;
    z-index: 120;

    justify-self: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 420ms ease,
        visibility 420ms ease;
}

.hero-language-switch.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*
 * =========================================================
 * 캐릭터 + 로고 공용 무대
 * =========================================================
 */

.hero-stage {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.hero-character-group {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 10;

    width: 58vw;
    min-height: 100%;

    overflow: visible;
    pointer-events: none;
}

/*
 * 캐릭터 공통 배치값입니다.
 *
 * 각 이미지의 좌우 투명 여백이 비슷하다고 가정하고,
 * 이미지 상자의 가로 중앙을 실제 캐릭터의 중앙처럼 사용합니다.
 * 사용자님이 세부 조정할 때는 각 캐릭터의
 * --character-x / --character-y / --character-height만 바꾸면 됩니다.
 */
.hero-character {
    position: absolute;
    left: var(--character-x);
    bottom: var(--character-y, 0svh);
    z-index: var(--character-z, 10);

    display: block;

    width: auto;
    height: min(
        var(--character-height),
        var(--character-width-limit, 78vw)
    );
    max-width: none;

    opacity: 0;

    transform: translateX(-50%);
    transform-origin: 50% 100%;

    user-select: none;
    pointer-events: none;

    transition:
        opacity 300ms ease-out;

    will-change: opacity;
}

.hero-character.is-visible {
    opacity: 1;
}

/* 최종 화면상 순서: 05 - 02 - 01 - 03 - 04 */

.hero-character--hanachan {
    --character-x: 28svh;
    --character-y: 2svh;
    --character-height: 62svh;
    --character-width-limit: 54vw;
    --character-z: 20;
}

.hero-character--mamaruko-duo {
    --character-x: 50svh;
    --character-y: -2svh;
    --character-height: 74svh;
    --character-width-limit: 72vw;
    --character-z: 30;
}

.hero-character--noir {
    --character-x: 72svh;
    --character-y: 0svh;
    --character-height: 82svh;
    --character-width-limit: 66vw;
    --character-z: 20;
}

.hero-character--xon {
    --character-x: 14svh;
    --character-y: 1svh;
    --character-height: 83svh;
    --character-width-limit: 66vw;
    --character-z: 10;
}

.hero-character--gaenori {
    --character-x: 86svh;
    --character-y: -2svh;
    --character-height: 75svh;
    --character-width-limit: 66vw;
    --character-z: 10;
}

/*
 * =========================================================
 * 오른쪽 로고
 * =========================================================
 */

.hero-logo-area {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 50;

    display: grid;
    width: 45vw;
    min-height: 72svh;
    place-items: center;

    transform: translateY(-50%);

    pointer-events: none;
}

.hero-logo {
    display: block;

    width: min(38vw, 64svh);
    height: auto;
    max-height: 58svh;

    opacity: 0;

    transform: scale(0.97);
    transform-origin: center;

    user-select: none;
    pointer-events: none;

    transition:
        opacity 900ms ease,
        transform 900ms cubic-bezier(0.2, 0.75, 0.25, 1);

    will-change:
        opacity,
        transform;
}

.hero-logo.is-visible {
    opacity: 1;
    transform: scale(1);
}

/*
 * =========================================================
 * 화면 하단 그라데이션
 * =========================================================
 */

.hero-bottom-glow {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;

    height: 12svh;

    opacity: 0;

    background:
        linear-gradient(
            to top,
            rgba(253, 173, 212, 0.18) 0%,
            rgba(181, 227, 250, 0.08) 44%,
            transparent 100%
        );

    pointer-events: none;

    transition:
        opacity 480ms ease;
}

.hero-bottom-glow.is-visible {
    opacity: 1;
}

/*
 * =========================================================
 * 다음 화면 안내 삼각형
 * =========================================================
 */

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 3.4svh;
    z-index: 100;

    display: grid;
    width: 7svh;
    height: 5.5svh;
    place-items: center;

    padding: 0;
    border: 0;

    opacity: 0;
    visibility: hidden;

    background: transparent;

    transform: translateX(-50%);

    cursor: pointer;
    pointer-events: none;

    transition:
        opacity 420ms ease,
        visibility 420ms ease;
}

.hero-scroll-cue.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hero-scroll-cue__triangle {
    display: block;

    width: 3.8svh;
    height: 2.4svh;

    background: var(--pink);

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 100%
        );

    filter:
        drop-shadow(
            0
            0.55svh
            0.42svh
            rgba(181, 227, 250, 0.82)
        );

    animation:
        heroScrollCueFloat
        1800ms
        ease-in-out
        infinite;

    will-change: transform;
}

.hero-scroll-cue:hover
.hero-scroll-cue__triangle,
.hero-scroll-cue:focus-visible
.hero-scroll-cue__triangle {
    filter:
        drop-shadow(
            0
            0.62svh
            0.5svh
            rgba(181, 227, 250, 0.95)
        );
}

.hero-scroll-cue:focus-visible {
    outline: 2px solid rgba(253, 173, 212, 0.68);
    outline-offset: 4px;
    border-radius: 999px;
}

@keyframes heroScrollCueFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.7svh);
    }
}

/* =========================================================
   두 번째 화면: 게임 소개 무한 캐러셀
   ========================================================= */

.game-introduction-section {
    position: relative;

    overflow: hidden;

    color: #2d2930;
    background: #ffffff;
}

/*
 * 슬라이드와 독립된 고정 배경입니다.
 * 인디케이터로 화면을 바꾸어도 이 레이어는 움직이지 않습니다.
 */
.game-introduction-background {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.game-introduction-background__image {
    position: absolute;
    inset: -4%;

    display: block;

    width: 108%;
    height: 108%;

    object-fit: cover;
    object-position: center;

    filter:
        blur(15px)
        saturate(0.72)
        brightness(1.04);

    transform: scale(1.035);
}

.game-intro-carousel {
    position: relative;
    z-index: 20;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    outline: none;
}

.game-intro-carousel:focus-visible {
    outline:
        2px solid
        rgba(253, 173, 212, 0.72);

    outline-offset: -8px;
}

.game-intro-track {
    display: flex;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    transform: translate3d(0, 0, 0);

    transition:
        transform
        var(--game-intro-transition-ms, 700ms)
        cubic-bezier(0.22, 0.72, 0.22, 1);

    will-change: transform;
}

.game-intro-track.is-jumping {
    transition: none;
}

.game-intro-slide {
    position: relative;

    display: grid;
    flex: 0 0 100%;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    grid-template-areas:
        "copy visual";

    gap: clamp(28px, 4vw, 82px);
    align-items: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    padding:
        10svh
        5vw
        11svh;
}

.game-intro-slide--visual-left {
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    grid-template-areas:
        "visual copy";
}

.game-intro-slide__copy {
    grid-area: copy;

    min-width: 0;

    width: min(100%, 720px);
    padding:
        clamp(24px, 3.3svh, 44px)
        clamp(24px, 3vw, 54px);

    border:
        1px solid
        rgba(255, 255, 255, 0.94);
    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.76);

    box-shadow:
        0 22px 68px
        rgba(62, 34, 55, 0.13),
        inset 0 1px 0
        rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.game-intro-slide__number {
    margin: 0 0 1.4svh;

    color: rgba(244, 149, 196, 0.72);

    font-size: clamp(13px, 1.15vw, 18px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.24em;
}

.game-intro-slide__title {
    margin: 0;

    color: #302b31;

    text-shadow:
        0 2px 0
        rgba(255, 255, 255, 0.88),

        0 8px 22px
        rgba(253, 173, 212, 0.18),

        0 0 18px
        rgba(181, 227, 250, 0.16);


    font-family:
        "Malgun Gothic",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        sans-serif;

    font-size:
        clamp(29px, 3vw, 55px);
    font-weight: 900;
    line-height: 1.28;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

html[lang="ja"]
.game-intro-slide__title {
    font-size:
        clamp(22px, 2.35vw, 44px);

    line-height: 1.38;
    letter-spacing: -0.035em;

    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
    white-space: pre-line;
}

.game-intro-slide__lines {
    display: grid;
    gap: 1.2svh;

    margin-top: clamp(22px, 3svh, 38px);
}

.game-intro-slide__lines {
    display: grid;

    /*
     * 각 설명문 사이의 간격
     */
    gap: 1.15svh;

    /*
     * 제목과 첫 번째 설명문 사이의 거리
     */
    margin-top:
        clamp(20px, 2.6svh, 34px);
}

.game-intro-slide__line {
    margin: 0;

    color:
        rgba(46, 42, 48, 0.88);

    font-size:
        clamp(15px, 1.18vw, 20px);

    font-weight: 600;
    line-height: 1.75;
    letter-spacing: -0.025em;

    /*
     * JavaScript 문자열 안의 \n을
     * 실제 줄바꿈으로 표시합니다.
     */
    white-space: pre-line;

    word-break: keep-all;
    overflow-wrap: break-word;

    /*
     * 본문에도 아주 약한 흰색 하이라이트
     */
    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.76),

        0 5px 16px
        rgba(253, 173, 212, 0.08);
}

html[lang="ja"]
.game-intro-slide__line {
    font-size:
        clamp(14px, 1.05vw, 18px);

    line-height: 1.72;
    letter-spacing: -0.035em;

    word-break: normal;
    line-break: strict;
    overflow-wrap: anywhere;
}

.game-intro-slide__visual {
    position: relative;
    grid-area: visual;

    display: grid;
    place-items: center;

    min-width: 0;
    min-height: 58svh;

    overflow: visible;
}

.game-intro-visual__image {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 69svh;

    object-fit: contain;

        border-radius: 26px;

    /*
     * 이미지의 좌우·상하 가장자리를 투명하게 흐려서
     * 배경과 자연스럽게 섞이도록 합니다.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000000 7%,
            #000000 93%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000000 5%,
            #000000 95%,
            transparent 100%
        );

    -webkit-mask-composite:
        source-in;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000000 4%,
            #000000 96%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000000 5%,
            #000000 95%,
            transparent 100%
        );

    mask-composite:
        intersect;

    /*
     * mask와 함께 자연스럽게 보이도록
     * 일반 box-shadow 대신 알파 경계를 따라가는
     * drop-shadow를 사용합니다.
     */
    filter:
        drop-shadow(
            0 26px 34px
            rgba(31, 21, 30, 0.16)
        )
        drop-shadow(
            0 4px 10px
            rgba(31, 21, 30, 0.08)
        );

    user-select: none;
    pointer-events: none;
}

.game-intro-visual__image--landscape {
    width: min(48vw, 92svh);
}

.game-intro-visual__image--square {
    width: min(39vw, 66svh);
}

.game-intro-visual__image--portrait {
    height: min(69svh, 58vw);
}

/*
 * 첫 번째 슬라이드는 실제 카드 이미지가 준비되기 전까지
 * CSS 카드 실루엣만 사용합니다.
 */
.game-intro-slide__visual--cards {
    min-height: 60svh;
}

.game-intro-card-placeholder {
    position: relative;

    width: min(38vw, 64svh);
    height: min(58svh, 35vw);

    opacity: 0.72;
}

.game-intro-card-placeholder__card {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: min(18vw, 29svh);
    aspect-ratio: 0.69;

    border:
        2px solid
        rgba(255, 255, 255, 0.86);
    border-radius: min(1.4vw, 2.2svh);

    background:
        linear-gradient(
            150deg,
            rgba(253, 173, 212, 0.84),
            rgba(255, 255, 255, 0.55) 50%,
            rgba(181, 227, 250, 0.82)
        );

    box-shadow:
        0 22px 54px
        rgba(55, 31, 49, 0.18),
        inset 0 0 0 8px
        rgba(255, 255, 255, 0.2);

    transform-origin: 50% 88%;
}

.game-intro-card-placeholder__card--1 {
    transform:
        translate(-74%, -49%)
        rotate(-14deg);
}

.game-intro-card-placeholder__card--2 {
    z-index: 2;

    transform:
        translate(-50%, -54%)
        rotate(0deg);
}

.game-intro-card-placeholder__card--3 {
    transform:
        translate(-26%, -49%)
        rotate(14deg);
}

/* 오른쪽 아래 페이지네이션 도트 */
.game-intro-indicators {
    position: absolute;
    right: 4.4vw;
    bottom: 4.5svh;
    z-index: 110;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8svh;
}

.game-intro-indicator {
    display: block;

    width: 1svh;
    height: 1svh;

    padding: 0;
    border: 0;
    border-radius: 999px;

    background: var(--blue);
    box-shadow:
        0 4px 10px
        rgba(55, 36, 51, 0.14);

    opacity: 0.58;

    cursor: pointer;

    transition:
        width 260ms ease,
        opacity 260ms ease,
        background 260ms ease,
        transform 260ms ease;
}

.game-intro-indicator:hover,
.game-intro-indicator:focus-visible {
    opacity: 0.92;
    transform: translateY(-1px);
}

.game-intro-indicator:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.game-intro-indicator.is-active {
    width: 2.8svh;

    background: var(--pink);
    opacity: 1;
}

/* =========================================================
   두 번째 화면의 위 / 아래 이동 삼각형
   ========================================================= */

.section-scroll-cue {
    position: absolute;
    left: 50%;
    z-index: 130;

    display: grid;
    width: 7svh;
    height: 5.5svh;
    place-items: center;

    padding: 0;
    border: 0;

    background: transparent;

    transform: translateX(-50%);

    cursor: pointer;
}

.section-scroll-cue--up {
    top: 2.4svh;
}

.section-scroll-cue--down {
    bottom: 2.4svh;
}

.section-scroll-cue__triangle {
    display: block;

    width: 3.8svh;
    height: 2.4svh;

    background: var(--pink);

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 100%
        );

    filter:
        drop-shadow(
            0
            0.55svh
            0.42svh
            rgba(181, 227, 250, 0.82)
        );

    will-change: transform;
}

.section-scroll-cue--up
.section-scroll-cue__triangle {
    /*
     * 위쪽 화살표만 하늘색으로 표시합니다.
     * --blue는 :root의 #B5E3FA입니다.
     */
    background: var(--blue);

    transform: rotate(180deg);

    animation:
        gameIntroScrollCueUpFloat
        1800ms
        ease-in-out
        infinite;
}

.section-scroll-cue--down
.section-scroll-cue__triangle {
    animation:
        gameIntroScrollCueDownFloat
        1800ms
        ease-in-out
        infinite;
}

.section-scroll-cue:hover
.section-scroll-cue__triangle,
.section-scroll-cue:focus-visible
.section-scroll-cue__triangle {
    filter:
        drop-shadow(
            0
            0.62svh
            0.5svh
            rgba(181, 227, 250, 0.95)
        );
}

.section-scroll-cue:focus-visible {
    outline:
        2px solid
        rgba(253, 173, 212, 0.68);
    outline-offset: 4px;
    border-radius: 999px;
}

@keyframes gameIntroScrollCueUpFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(180deg);
    }

    50% {
        transform:
            translateY(-0.7svh)
            rotate(180deg);
    }
}

@keyframes gameIntroScrollCueDownFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.7svh);
    }
}

/* =========================================================
   세 번째 화면: 캐릭터 소개
   ========================================================= */

.character-introduction-section {
    --character-accent: #fdadd4;

    position: relative;

    overflow: hidden;

    color: #29252b;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 46%,
            color-mix(
                in srgb,
                var(--character-accent) 8%,
                #ffffff
            ) 100%
        );

    transition:
        background 320ms ease;
}

.character-showcase {
    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    outline: none;
}

/*
 * 캐릭터별 SCG 위치와 크기를 세밀하게 조정하는 값입니다.
 *
 * --character-scg-height : SCG 표시 높이
 * --character-scg-x      : 좌우 이동
 * --character-scg-y      : 위아래 이동
 */
.character-showcase[data-character-index="0"] {
    --character-scg-height: 84svh;
    --character-scg-x: 0%;
    --character-scg-y: 2svh;
}

.character-showcase[data-character-index="1"] {
    --character-scg-height: 84svh;
    --character-scg-x: 0%;
    --character-scg-y: 2svh;
}

.character-showcase[data-character-index="2"] {
    --character-scg-height: 80svh;
    --character-scg-x: 0%;
    --character-scg-y: 1svh;
}

.character-showcase[data-character-index="3"] {
    --character-scg-height: 82svh;
    --character-scg-x: 0%;
    --character-scg-y: 1svh;
}

.character-showcase[data-character-index="4"] {
    --character-scg-height: 80svh;
    --character-scg-x: 0%;
    --character-scg-y: 1svh;
}

.character-showcase[data-character-index="5"] {
    --character-scg-height: 83svh;
    --character-scg-x: 0%;
    --character-scg-y: 1svh;
}

/* 왼쪽의 캐릭터별 단색 셀 이미지 */
.character-showcase__cell-panel {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;

    width: 35vw;
    min-width: 430px;

    overflow: hidden;

    background: #ffffff;
    pointer-events: none;
}

.character-showcase__cell-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 1;

    transform: scale(1.018);

    transition:
        opacity 180ms ease,
        transform 360ms ease;

    user-select: none;
    pointer-events: none;
}

.character-showcase__cell-fade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 74%,
            rgba(255, 255, 255, 0.38) 88%,
            #ffffff 100%
        );
}

/* 오른쪽의 SCG와 설명 영역 */
.character-showcase__content {
    position: absolute;
    inset:
        7.5svh
        4.5vw
        9.5svh
        31vw;
    z-index: 10;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.82fr)
        minmax(430px, 1.18fr);

    gap: clamp(22px, 3vw, 58px);
    align-items: center;
}

.character-showcase__portrait-panel {
    position: relative;

    align-self: stretch;

    min-width: 0;
    min-height: 0;

    overflow: visible;

    opacity: 1;

    transition:
        opacity 180ms ease,
        transform 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.character-showcase__portrait-glow {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(31vw, 55svh);
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--character-accent) 28%,
                transparent
            ) 0%,
            color-mix(
                in srgb,
                var(--character-accent) 10%,
                transparent
            ) 44%,
            transparent 72%
        );

    filter: blur(10px);

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.character-showcase__portrait {
    position: absolute;
    right: 50%;
    bottom: 0;

    display: block;

    width: auto;
    height: var(--character-scg-height);
    max-width: 128%;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(
            0 2.4svh 2.2svh
            rgba(22, 17, 23, 0.18)
        );

    transform:
        translateX(
            calc(
                50% +
                var(--character-scg-x)
            )
        )
        translateY(
            var(--character-scg-y)
        );

    transform-origin: 50% 100%;

    user-select: none;
    pointer-events: none;
}

.character-showcase__info {
    position: relative;

    align-self: center;

    min-width: 0;
    max-height: 78svh;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        clamp(28px, 4svh, 48px)
        clamp(28px, 3.2vw, 56px);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--character-accent) 34%,
            #ffffff
        );
    border-left:
        clamp(5px, 0.42vw, 8px)
        solid
        var(--character-accent);
    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 26px 78px
        rgba(31, 23, 32, 0.14),
        inset 0 1px 0
        rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    opacity: 1;

    transition:
        opacity 180ms ease,
        transform 360ms cubic-bezier(0.2, 0.75, 0.25, 1);

    scrollbar-width: thin;
    scrollbar-color:
        var(--character-accent)
        rgba(0, 0, 0, 0.06);
}

.character-showcase__info::-webkit-scrollbar {
    width: 8px;
}

.character-showcase__info::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.045);
    border-radius: 999px;
}

.character-showcase__info::-webkit-scrollbar-thumb {
    background: var(--character-accent);
    border-radius: 999px;
}

.character-showcase__number {
    margin: 0 0 1.3svh;

    color: var(--character-accent);

    font-size:
        clamp(13px, 1.05vw, 17px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.28em;
}

.character-showcase__primary-name {
    margin: 0;

    color: #2d2930;

    font-size:
        clamp(34px, 3.45vw, 66px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.055em;
    word-break: keep-all;

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.92),
        0 10px 30px
        color-mix(
            in srgb,
            var(--character-accent) 16%,
            transparent
        );
}

.character-showcase__secondary-name {
    margin: 1svh 0 0;

    color:
        color-mix(
            in srgb,
            var(--character-accent) 74%,
            #333333
        );

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        "Batang",
        serif;

    font-size:
        clamp(18px, 1.55vw, 28px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.08em;
}

.character-showcase__trait {
    margin-top:
        clamp(22px, 3svh, 34px);

    padding:
        clamp(15px, 2svh, 21px)
        clamp(18px, 1.6vw, 26px);

    border-radius: 18px;

    background:
        color-mix(
            in srgb,
            var(--character-accent) 10%,
            rgba(255, 255, 255, 0.92)
        );
}

.character-showcase__label {
    margin: 0 0 0.8svh;

    color:
        color-mix(
            in srgb,
            var(--character-accent) 78%,
            #333333
        );

    font-size:
        clamp(12px, 0.95vw, 16px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
}

.character-showcase__trait-text,
.character-showcase__body-text {
    margin: 0;

    color: rgba(45, 41, 48, 0.9);

    font-size:
        clamp(15px, 1.18vw, 20px);
    font-weight: 600;
    line-height: 1.72;
    letter-spacing: -0.025em;

    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.character-showcase__text-block {
    margin-top:
        clamp(21px, 2.7svh, 32px);

    padding-left:
        clamp(15px, 1.35vw, 22px);

    border-left:
        3px solid
        color-mix(
            in srgb,
            var(--character-accent) 62%,
            #ffffff
        );
}

/* 캐릭터를 바꾸는 짧은 페이드 */
.character-showcase.is-changing
.character-showcase__cell-image,
.character-showcase.is-changing
.character-showcase__portrait-panel,
.character-showcase.is-changing
.character-showcase__info {
    opacity: 0;
}

.character-showcase.is-changing
.character-showcase__cell-image {
    transform: scale(1.04);
}

.character-showcase.is-changing
.character-showcase__portrait-panel {
    transform: translateX(1.2vw);
}

.character-showcase.is-changing
.character-showcase__info {
    transform: translateX(1vw);
}

/* 오른쪽 아래 캐릭터 선택 탭 */
.character-selectors {
    position: absolute;
    right: 4.4vw;
    bottom: 4.3svh;
    z-index: 140;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55vw;
}

.character-selector {
    display: inline-flex;
    align-items: center;

    min-width: 42px;
    height: 42px;

    gap: 8px;

    padding: 0 13px;
    border:
        1px solid
        rgba(255, 255, 255, 0.92);
    border-radius: 999px;

    color: #68616b;
    background:
        rgba(255, 255, 255, 0.76);

    box-shadow:
        0 8px 24px rgba(31, 23, 32, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;

    transition:
        color 220ms ease,
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

.character-selector:hover,
.character-selector:focus-visible {
    transform: translateY(-2px);
}

.character-selector:focus-visible {
    outline:
        2px solid
        var(--selector-color);
    outline-offset: 3px;
}

.character-selector__dot {
    flex: 0 0 auto;

    width: 11px;
    height: 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    background: var(--selector-color);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--selector-color) 18%,
            transparent
        );
}

.character-selector__number {
    color: #8a838d;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.character-selector__name {
    display: none;

    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.character-selector.is-active {
    color: #2f2931;

    border-color:
        color-mix(
            in srgb,
            var(--selector-color) 56%,
            #ffffff
        );

    background:
        color-mix(
            in srgb,
            var(--selector-color) 12%,
            rgba(255, 255, 255, 0.94)
        );

    box-shadow:
        0 10px 30px
        color-mix(
            in srgb,
            var(--selector-color) 18%,
            rgba(31, 23, 32, 0.1)
        );
}

.character-selector.is-active
.character-selector__name {
    display: inline;
}

/* =========================================================
   네 번째 화면: WPF 스타일 스크린샷 갤러리
   ========================================================= */

.gallery-section {
    position: relative;

    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;

    overflow: hidden;

    padding:
        8.5svh
        4.5vw
        7.5svh;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(181, 227, 250, 0.2),
            transparent 35%
        ),
        radial-gradient(
            circle at 84% 82%,
            rgba(253, 173, 212, 0.14),
            transparent 38%
        ),
        linear-gradient(
            to bottom,
            rgba(181, 227, 250, 0.08) 0%,
            rgba(253, 173, 212, 0.045) 14%,
            #ffffff 36%,
            #ffffff 100%
        );
}

.screenshot-gallery {
    width: min(88vw, 1500px);
    height: min(78svh, 880px);

    outline: none;
}

.screenshot-gallery:focus-visible {
    outline:
        2px solid
        rgba(253, 173, 212, 0.78);
    outline-offset: 7px;
    border-radius: 32px;
}

/*
 * XAML의 바깥 Border를 재현합니다.
 * Header와 Footer는 고정된 채,
 * 가운데 스크린샷만 교체됩니다.
 */
.screenshot-window {
    display: grid;
    grid-template-rows:
        72px
        minmax(0, 1fr)
        85px;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border:
        3px solid
        rgba(255, 255, 255, 0.98);
    border-radius: 28px;

    background:
        rgba(181, 227, 250, 0.33);

    box-shadow:
        0 34px 76px
        rgba(0, 0, 0, 0.24),
        0 10px 28px
        rgba(0, 0, 0, 0.16),
        inset 0 1px 0
        rgba(255, 255, 255, 0.56);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.screenshot-window__header {
    display: flex;
    align-items: center;

    min-width: 0;
    padding: 0 32px;

    border-radius: 25px 25px 0 0;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.95),
        0 7px 24px
        rgba(43, 35, 45, 0.07);
}

.screenshot-window__title {
    margin: 0;

    color: #333333;

    font-size:
        clamp(22px, 1.65vw, 28px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.86),
        0 5px 18px
        rgba(181, 227, 250, 0.28);
}

.screenshot-window__body {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;

    padding:
        clamp(18px, 2.2svh, 30px)
        clamp(20px, 2.5vw, 42px);
}

/*
 * 실제 스크린샷 바깥의 흰색 액자입니다.
 * 스크린샷은 잘라내지 않고 전체를 표시합니다.
 */
.screenshot-frame {
    display: grid;

    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    place-items: center;

    margin: 0;
    padding:
        clamp(7px, 0.65vw, 11px);

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.98);
    border-radius:
        clamp(15px, 1.25vw, 21px);

    background: #ffffff;

    box-shadow:
        0 28px 54px
        rgba(23, 18, 25, 0.24),
        0 7px 18px
        rgba(23, 18, 25, 0.14),
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.98);

    cursor: pointer;
    outline: none;
}

.screenshot-frame:focus-visible {
    outline:
        3px solid
        rgba(253, 173, 212, 0.82);

    outline-offset: 7px;
}

.screenshot-frame:hover {
    box-shadow:
        0 31px 60px
        rgba(23, 18, 25, 0.27),
        0 8px 20px
        rgba(23, 18, 25, 0.16),
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.98);
}

.screenshot-gallery__image {
    display: block;

    width: 100%;
    height: 100%;

    border-radius:
        clamp(9px, 0.8vw, 14px);

    object-fit: contain;
    object-position: center;

    opacity: 1;
    transform: scale(1);

    transition:
        opacity
        var(--screenshot-gallery-fade-ms, 380ms)
        ease,
        transform
        var(--screenshot-gallery-fade-ms, 380ms)
        ease;

    user-select: none;
    pointer-events: none;

    will-change:
        opacity,
        transform;
}

.screenshot-gallery.is-changing
.screenshot-gallery__image {
    opacity: 0;
    transform: scale(0.992);
}

.screenshot-gallery__image.is-missing {
    opacity: 0.16;
}

.screenshot-window__footer {
    display: grid;
    place-items: center;

    padding: 0 28px;

    border-radius: 0 0 25px 25px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.34)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.48);
}

.screenshot-gallery__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85svh;
}

.screenshot-gallery__indicator {
    display: block;

    width: 1.05svh;
    height: 1.05svh;

    min-width: 9px;
    min-height: 9px;

    padding: 0;
    border: 0;
    border-radius: 999px;

    background: var(--blue);

    box-shadow:
        0 4px 11px
        rgba(44, 37, 46, 0.18),
        0 0 0 2px
        rgba(255, 255, 255, 0.45);

    opacity: 0.68;

    cursor: pointer;

    transition:
        width 260ms ease,
        opacity 260ms ease,
        background 260ms ease,
        transform 260ms ease,
        box-shadow 260ms ease;
}

.screenshot-gallery__indicator:hover,
.screenshot-gallery__indicator:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

.screenshot-gallery__indicator:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, 0.96);
    outline-offset: 3px;
}

.screenshot-gallery__indicator.is-active {
    width: 3.05svh;
    min-width: 28px;

    background: var(--pink);
    opacity: 1;

    box-shadow:
        0 5px 14px
        rgba(244, 149, 196, 0.28),
        0 0 0 2px
        rgba(255, 255, 255, 0.68);
}

@media (max-width: 900px) {
    .gallery-section {
        padding:
            8svh
            3vw
            7svh;
    }

    .screenshot-gallery {
        width: 92vw;
        height: min(74svh, 760px);
    }

    .screenshot-window {
        grid-template-rows:
            62px
            minmax(0, 1fr)
            72px;

        border-radius: 24px;
    }

    .screenshot-window__header {
        padding: 0 24px;
        border-radius: 21px 21px 0 0;
    }

    .screenshot-window__footer {
        border-radius: 0 0 21px 21px;
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .screenshot-gallery {
        width: 92vw;
        height: min(66svh, 650px);
    }

    .screenshot-window {
        grid-template-rows:
            56px
            minmax(0, 1fr)
            64px;

        border-width: 2px;
        border-radius: 21px;
    }

    .screenshot-window__body {
        padding:
            16px
            3vw;
    }

    .screenshot-frame {
        width: 100%;
        height: auto;
        max-height: 100%;
    }

    .screenshot-gallery__indicator {
        min-width: 8px;
        min-height: 8px;
    }

    .screenshot-gallery__indicator.is-active {
        min-width: 24px;
    }
}

@media (max-width: 1120px) {
    .character-showcase__content {
        inset:
            7.5svh
            3.5vw
            10svh
            28vw;

        grid-template-columns:
            minmax(230px, 0.72fr)
            minmax(390px, 1.28fr);

        gap: 2vw;
    }

    .character-showcase__cell-panel {
        width: 33vw;
        min-width: 360px;
    }

    .character-showcase__info {
        padding:
            3.4svh
            3vw;
    }

    .character-selectors {
        right: 3.4vw;
        gap: 5px;
    }

    .character-selector {
        padding: 0 10px;
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .character-showcase__cell-panel {
        inset: 0 0 auto 0;

        width: 100%;
        min-width: 0;
        height: 34svh;
    }

    .character-showcase__cell-fade {
        background:
            linear-gradient(
                to bottom,
                transparent 0%,
                transparent 58%,
                rgba(255, 255, 255, 0.56) 80%,
                #ffffff 100%
            );
    }

    .character-showcase__content {
        inset:
            8svh
            4vw
            11svh;

        grid-template-columns:
            minmax(118px, 0.72fr)
            minmax(0, 1.28fr);

        gap: 2vw;
        align-items: end;
    }

    .character-showcase__portrait-panel {
        height: 72svh;
    }

    .character-showcase__portrait {
        height:
            min(
                var(--character-scg-height),
                61svh
            );
        max-width: 150%;
    }

    .character-showcase__info {
        max-height: 72svh;

        padding:
            2.2svh
            4vw;

        border-left-width: 4px;
        border-radius: 20px;
    }

    .character-showcase__primary-name {
        font-size:
            clamp(25px, 7vw, 38px);
    }

    .character-showcase__secondary-name {
        margin-top: 0.5svh;

        font-size:
            clamp(15px, 4vw, 21px);
    }

    .character-showcase__trait {
        margin-top: 1.8svh;
        padding: 1.4svh 3vw;
    }

    .character-showcase__trait-text,
    .character-showcase__body-text {
        font-size:
            clamp(12px, 3.35vw, 15px);
        line-height: 1.58;
    }

    .character-showcase__text-block {
        margin-top: 1.7svh;
        padding-left: 3vw;
    }

    .character-selectors {
        right: 4vw;
        bottom: 4.7svh;
        left: 4vw;

        justify-content: flex-end;
        gap: 4px;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .character-selectors::-webkit-scrollbar {
        display: none;
    }

    .character-selector {
        flex: 0 0 auto;

        min-width: 36px;
        height: 36px;

        padding: 0 9px;
    }

    .character-selector__dot {
        width: 9px;
        height: 9px;
    }

    .character-selector__number {
        font-size: 10px;
    }

    .character-selector__name {
        font-size: 11px;
    }
}


/* =========================================================
   다섯 번째 화면: 마지막 메시지 + 푸터
   ========================================================= */

.final-section {
    position: relative;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    color: #39343c;

    background:
        radial-gradient(
            circle at 24% 22%,
            rgba(181, 227, 250, 0.23),
            transparent 32%
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(253, 173, 212, 0.2),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffafd 48%,
            #f7fcff 100%
        );
}

.final-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.52) 46%,
            transparent 100%
        );

    pointer-events: none;
}

.final-message {
    position: relative;
    z-index: 10;

    align-self: center;
    justify-self: center;

    width: min(88vw, 1100px);
    padding:
        11svh
        5vw
        5svh;

    text-align: center;
}

.final-message__line {
    margin: 0;

    font-family:
        "Batang",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:
        clamp(30px, 4.4vw, 76px);

    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -0.045em;

    word-break: keep-all;

    text-shadow:
        0 2px 0
        rgba(255, 255, 255, 0.96),
        0 15px 38px
        rgba(48, 35, 48, 0.1);
}

.final-message__line--first {
    color:
        rgba(55, 50, 58, 0.82);
}

.final-message__line--second {
    margin-top:
        clamp(10px, 1.7svh, 24px);

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #a870a9 0%,
            #f495c4 48%,
            #88c9e9 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    text-shadow: none;
}

/*
 * 마지막 화면 아래쪽 푸터
 */
.site-footer {
    position: relative;
    z-index: 20;

    display: flex;
    width: 100%;
    min-height: 118px;

    padding:
        26px
        clamp(24px, 5vw, 92px);

    align-items: center;
    justify-content: space-between;
    gap: 28px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.94);

    background:
        rgba(255, 255, 255, 0.68);

    box-shadow:
        0 -16px 46px
        rgba(55, 38, 52, 0.06),
        inset 0 1px 0
        rgba(255, 255, 255, 0.94);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-footer__brand {
    flex: 0 0 auto;

    margin: 0;

    color:
        rgba(51, 51, 51, 0.72);

    font-size:
        clamp(13px, 1vw, 17px);

    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.2em;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;
    gap:
        12px
        28px;
}

.site-footer__link {
    display: inline-flex;

    align-items: baseline;
    gap: 9px;

    color:
        rgba(50, 45, 53, 0.78);

    font-size:
        clamp(12px, 0.92vw, 15px);

    line-height: 1.4;
    text-decoration: none;

    transition:
        color 220ms ease,
        transform 220ms ease;
}

.site-footer__link-label {
    color: var(--pink-strong);
    font-weight: 900;
}

.site-footer__link-value {
    font-weight: 600;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: #333333;

    transform:
        translateY(-2px);
}

.site-footer__link:focus-visible {
    outline:
        2px solid
        rgba(181, 227, 250, 0.9);

    outline-offset: 5px;
    border-radius: 4px;
}

@media (max-width: 850px) {
    .site-footer {
        flex-direction: column;

        align-items: flex-start;
        justify-content: center;
    }

    .site-footer__links {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .final-message {
        padding-right: 7vw;
        padding-left: 7vw;
    }

    .final-message__line {
        font-size:
            clamp(27px, 8vw, 48px);
    }

    .site-footer__links {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   실제 리소스 로딩 화면
   ========================================================= */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 950;

    display: grid;
    place-items: center;

    width: 100%;
    min-height: 100vh;

    color: #777777;
    background: #ffffff;
}

.loading-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 20px;
}

.loading-screen__spinner {
    width: 46px;
    height: 46px;

    border: 3px solid #eeeeee;
    border-top-color: #999999;
    border-radius: 50%;

    animation: loading-screen-spin 1s linear infinite;
}

.loading-screen__text {
    margin: 0;

    color: #999999;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.22em;
}

@keyframes loading-screen-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   백색 타이틀 인트로
   ========================================================= */

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 940;

    display: grid;
    place-items: center;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    color: #222222;
    background: #ffffff;
}

/* =========================================================
   인트로 내부 레이어 구조
   ========================================================= */

/*
 * 텍스트에만 물결 왜곡을 적용할 수 있도록
 * 다리 장면과 분리한 레이어입니다.
 */
.intro-text-layer {
    position: relative;
    z-index: 10;

    width: 100%;

    pointer-events: none;
}

/*
 * 다리, 반사, 리플이 들어가는 화면 전체 레이어입니다.
 *
 * --step-leg-height:
 * 다리 이미지의 표시 높이입니다.
 * 현재 브라우저 높이의 1.7배로 설정합니다.
 *
 * --step-ground-offset:
 * 화면 아래쪽부터 착지면까지의 거리입니다.
 * 반사 이미지가 보일 공간을 확보합니다.
 */
.step-scene {
    --step-leg-height: 170vh;
    --step-ground-offset: 24vh;

    position: absolute;
    inset: 0;
    z-index: 20;

    overflow: hidden;
    pointer-events: none;

    /*
     * 시작 위치가 준비되기 전에는
     * 실제 다리와 반사를 모두 숨깁니다.
     */
    visibility: hidden;
}


/*
 * 위치 이동만 담당합니다.
 *
 * x = 0, y = 0일 때
 * 화면 정중앙의 착지선에 발이 놓입니다.
 */
.step-runner {
    position: absolute;
    left: 50%;
    bottom: var(--step-ground-offset);
    z-index: 20;

    width: 0;
    height: 0;

    transform: translate3d(0, 0, 0);

    will-change: transform;
}

/*
 * 회전과 압축만 담당하는 자세 레이어입니다.
 *
 * 크기가 0인 stepRunner의 원점이
 * 신발의 접지점 역할을 합니다.
 */
.step-pose {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 0;

    transform-origin: 0 0;

    will-change: transform;
}

.step-pose--real {
    z-index: 4;
}

.step-pose--reflection {
    z-index: 1;
}

/*
 * =========================================================
 * 다리 워프 구조
 * =========================================================
 *
 * 원본 이미지: 411 x 1128
 * 상단 비틀림 영역: 969px
 * 하단 고정 발 영역: 159px
 *
 * 비율:
 * 969 / 1128  = 85.904255%
 * 159 / 1128  = 14.095745%
 *
 * 분할 경계에 틈이 생기지 않도록
 * 2px 정도 겹치게 처리합니다.
 */

.step-warp-root {
    --step-band-overlap-px: 2px;
    --step-top-band-percent: 85.904255%;
    --step-bottom-band-percent: 14.095745%;

    position: absolute;
    left: 0;
    bottom: 0;

    height: var(--step-leg-height);
    aspect-ratio: 411 / 1128;
    width: auto;

    overflow: visible;
    pointer-events: none;
    user-select: none;

    transform: translateX(-60%);
    transform-origin: 50% 100%;

    will-change:
        transform,
        filter,
        opacity;
}

.step-warp-root--real {
    z-index: 4;
}

.step-warp-root--reflection {
    z-index: 1;

    opacity: 0.2;

    filter:
        blur(5px)
        saturate(0.85);

    transform:
        translateX(-60%)
        scaleY(-1);

    transform-origin: 50% 100%;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 52%,
            rgba(0, 0, 0, 0.78) 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 52%,
            rgba(0, 0, 0, 0.78) 100%
        );
}

/*
 * 위쪽/아래쪽 분리 밴드입니다.
 * 각 밴드는 같은 원본 이미지를 공유하고,
 * overflow:hidden으로 필요한 부분만 보여줍니다.
 */
.step-warp-band {
    position: absolute;
    left: 0;
    width: 100%;

    overflow: hidden;
    pointer-events: none;
}

.step-warp-band--top {
    top: 0;

    height: calc(
        var(--step-top-band-percent) +
        var(--step-band-overlap-px)
    );

    transform-origin: 50% 100%;
    will-change: transform;
}

.step-warp-band--bottom {
    bottom: 0;

    height: calc(
        var(--step-bottom-band-percent) +
        var(--step-band-overlap-px)
    );
}

/*
 * 각 밴드 안에는 동일한 원본 전체 이미지를 배치하고,
 * 밴드의 overflow:hidden으로 필요한 부분만 보여줍니다.
 */
.step-warp-source {
    position: absolute;
    left: 0;

    display: block;

    width: auto;
    height: var(--step-leg-height);
    max-width: none;

    user-select: none;
    pointer-events: none;
}

/*
 * 상단 다리 밴드는 원본 이미지의 위쪽부터 보여줍니다.
 */
.step-warp-band--top
.step-warp-source {
    top: 0;
    bottom: auto;
}

/*
 * 하단 발 밴드는 원본 이미지의 아래쪽부터 보여줍니다.
 */
.step-warp-band--bottom
.step-warp-source {
    top: auto;
    bottom: 0;
}

/*
 * =========================================================
 * 하단 발 밴드 세분화
 * =========================================================
 *
 * 3분면(뒤꿈치) / 4분면(발끝)을 따로 다루기 위해
 * 하단 발 영역을 좌우 절반으로 분리합니다.
 *
 * 다만 실제 소스 이미지는 둘 다 동일한 원본 전체 이미지를 사용하고,
 * clip-path로 필요한 반쪽만 보여줍니다.
 */

/*
 * 하단 발 밴드 안의 공통 세그먼트
 */
.step-foot-segment {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.step-foot-segment--heel {
    clip-path:
        inset(
            0
            calc(50% - 3px)
            0
            0
        );

    z-index: 1;
}

.step-foot-segment--toe {
    clip-path:
        inset(
            0
            0
            0
            calc(50% - 3px)
        );

    z-index: 2;
}

/*
 * =========================================================
 * 상단 다리 밴드 좌우 분리
 * =========================================================
 */

.step-upper-segment {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

/* 1분면 */
.step-upper-segment--left {
    clip-path:
        inset(
            0
            calc(50% - 3px)
            0
            0
        );

    z-index: 1;
}

/* 2분면 */
.step-upper-segment--right {
    clip-path:
        inset(
            0
            0
            0
            calc(50% - 3px)
        );

    z-index: 2;
}

/*
 * 1분면과 3분면에 같은 transform을 적용하려면
 * transform-origin도 같아야 합니다.
 */
#realLegUpperLeftImage,
#reflectionLegUpperLeftImage,
#realLegHeelImage,
#reflectionLegHeelImage {
    transform-origin: 50% 50%;
    will-change: transform;
}

/*
 * 상자가 아닌 내부 이미지에 변형을 적용합니다.
 *
 * 원본 이미지의 가로 중앙이 3·4분면의 경계이므로
 * 50%를 고정점으로 사용합니다.
 */
#realLegHeelImage,
#reflectionLegHeelImage {
    transform-origin: 50% 50%;
    will-change: transform;
}

/*
 * 하단 세그먼트 안의 원본 이미지는
 * 발 밴드의 아래쪽부터 정확히 보이게 유지합니다.
 */
.step-foot-segment .step-warp-source {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
}

/*
 * =========================================================
 * 반사 발 수면 왜곡용 SVG 필터
 * =========================================================
 */

.step-water-filter-defs {
    position: fixed;

    width: 0;
    height: 0;

    overflow: hidden;

    pointer-events: none;
}

/*
 * 착지 리플이 재생되는 동안에만
 * 반사 다리에 SVG 변위 필터를 적용합니다.
 *
 * 실제 다리에는 적용되지 않습니다.
 */
#legReflectionPose.is-water-distorting {
    filter:
        url(#stepWaterRippleFilter);
}

/*
 * =========================================================
 * 착지 타원 리플
 * =========================================================
 *
 * stepRunner와 같은 착지점을 사용합니다.
 * 따라서 화면 중앙의 발 접지점에서 퍼집니다.
 */
.step-ripple-layer {
    position: absolute;
    left: 50%;
    bottom: var(--step-ground-offset);
    z-index: 10;

    width: 0;
    height: 0;

    pointer-events: none;
}

/*
 * 리플의 기본 크기입니다.
 *
 * 실제 확장 크기는 animation의 scale로 결정됩니다.
 * vw 기반이므로 화면 크기가 달라도 비슷한 비율을 유지합니다.
 */
.step-ripple {
    position: absolute;
    top: 0;
    left: 0;

    width: min(18vw, 350px);
    height: min(3.2vw, 62px);

    border: 2px solid;
    border-radius: 50%;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.12);

    transform-origin: center;

    pointer-events: none;

    will-change:
        transform,
        opacity,
        filter;
}

/*
 * 첫 번째 회색 리플
 */
.step-ripple--gray {
    border-color:
        rgba(100, 110, 120, 0.52);

    box-shadow:
        0 0 8px rgba(100, 110, 120, 0.16),
        inset 0 0 8px rgba(100, 110, 120, 0.1);
}

/*
 * 두 번째 옅은 하늘색 리플
 */
.step-ripple--blue {
    border-color:
        rgba(181, 227, 250, 0.82);

    box-shadow:
        0 0 10px rgba(181, 227, 250, 0.38),
        inset 0 0 8px rgba(181, 227, 250, 0.2);
}

/*
 * JavaScript에서 is-active가 붙으면
 * 두 리플을 순차적으로 재생합니다.
 */
.step-ripple-layer.is-active
.step-ripple--gray {
    animation:
        stepRippleGrayExpand
        900ms
        cubic-bezier(0.1, 0.62, 0.25, 1)
        forwards;
}

.step-ripple-layer.is-active
.step-ripple--blue {
    animation:
        stepRippleBlueExpand
        980ms
        110ms
        cubic-bezier(0.1, 0.62, 0.25, 1)
        forwards;
}

/*
 * 회색 리플은 먼저 빠르게 나타납니다.
 */
@keyframes stepRippleGrayExpand {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.12);

        filter: blur(0);
    }

    12% {
        opacity: 0.68;
    }

    55% {
        opacity: 0.38;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(5.15);

        filter: blur(1.4px);
    }
}

/*
 * 하늘색 리플은 회색 리플을 조금 늦게 따라갑니다.
 */
@keyframes stepRippleBlueExpand {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.1);

        filter: blur(0);
    }

    14% {
        opacity: 0.72;
    }

    58% {
        opacity: 0.34;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(6.45);

        filter: blur(1.8px);
    }
}

.intro-copy {
    position: relative;

    width: 100%;
    height: 190px;

    font-family:
        "Batang",
        "Yu Mincho",
        serif;

    text-align: center;
}

.intro-copy__first,
.intro-copy__second {
    position: absolute;
    left: 50%;

    width: min(1000px, calc(100vw - 48px));
    margin: 0;

    opacity: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 400;

    will-change:
        opacity,
        transform;
}

/* 첫 번째 문장의 최초 위치 */
.intro-copy__first {
    top: 50%;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 400;
    letter-spacing: 0.1em;

    transform:
        translate(-50%, -50%)
        translateY(26px);

    transition:
        opacity 2200ms ease,
        transform 2200ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* “어쩌면” 등장 */
.intro-screen.is-first-visible
.intro-copy__first {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        translateY(0);
}

/* “어쩌면”이 위로 이동 */
.intro-screen.is-first-raised
.intro-copy__first {
    transform:
        translate(-50%, -50%)
        translateY(-46px);

    transition:
        transform 1100ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* 두 번째 문장의 최초 위치 */
.intro-copy__second {
    top: 50%;

    font-size: clamp(22px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.045em;

    transform:
        translate(-50%, -50%)
        translateY(54px);

    transition:
        opacity 1100ms ease,
        transform 1100ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* 두 번째 문장 등장 */
.intro-screen.is-second-visible
.intro-copy__second {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        translateY(38px);
}

/*
 * 인트로의 두 문장을 담고 있는 공용 레이어입니다.
 *
 * 자식 문장 각각을 사라지게 하지 않고,
 * 부모 레이어 전체를 한 번에 페이드아웃합니다.
 */
.intro-text-layer {
    opacity: 1;
    filter: blur(0);

    transition:
        opacity 650ms ease-out,
        filter 650ms ease-out;

    will-change:
        opacity,
        filter;
}

/*
 * 발이 착지면에서 떨어지는 순간
 * “어쩌면”과 “당신의…”를 동시에 사라지게 합니다.
 */
.intro-screen.is-step-leaving
.intro-text-layer {
    opacity: 0;
    filter: blur(3px);
}

/* =========================================================
   우측 상단 BGM ON / OFF
   ========================================================= */

.bgm-toggle {
    position: fixed;
    top: 30px;
    right: 34px;
    z-index: 990;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 4px;

    border: 0;

    color: #aaaaaa;
    background: transparent;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        color 200ms ease,
        opacity 200ms ease;
}

.bgm-toggle:hover,
.bgm-toggle:focus-visible {
    color: #555555;
}

.bgm-toggle:disabled {
    cursor: default;
    opacity: 0.55;
}

.bgm-toggle__label {
    margin-right: 5px;

    color: #888888;
    font-weight: 700;
}

.bgm-toggle__state {
    color: #bbbbbb;

    transition:
        color 200ms ease,
        font-weight 200ms ease;
}

.bgm-toggle__state.is-active {
    color: #555555;
    font-weight: 800;
}

.bgm-toggle__slash {
    color: #cccccc;
}

/* =========================================================
   연령 확인 오버레이
   ========================================================= */

.age-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 650ms ease,
        visibility 650ms ease;
}

.age-gate.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.age-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 10, 22, 0.48);
    backdrop-filter: blur(18px) saturate(0.72);
    -webkit-backdrop-filter: blur(18px) saturate(0.72);
}

.age-gate__dialog {
    position: relative;
    width: min(940px, calc(100vw - 36px));
    min-height: min(690px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    display: grid;
    grid-template-rows: 86px minmax(0, 1fr) 106px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.96);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(253, 173, 212, 0.68),
            rgba(255, 255, 255, 0.28) 48%,
            rgba(181, 227, 250, 0.38)
        );
    box-shadow:
        var(--soft-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: dialog-enter 760ms cubic-bezier(0.18, 0.85, 0.24, 1) both;
}

.age-gate__dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.56), transparent 30%),
        radial-gradient(circle at 84% 82%, rgba(255,255,255,0.38), transparent 32%);
}

.age-gate__header {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.91);
}

.age-gate__header-spacer {
    width: 1px;
}

.age-gate__title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(22px, 2.4vw, 29px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.language-switch {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-switch__button {
    position: relative;
    padding: 8px 2px;
    border: 0;
    color: rgba(51, 51, 51, 0.48);
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        color 220ms ease,
        transform 220ms ease;
}

.language-switch__button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: var(--pink-strong);
    transform: scaleX(0);
    transition: transform 220ms ease;
}

.language-switch__button:hover,
.language-switch__button:focus-visible,
.language-switch__button.is-active {
    color: var(--ink);
    transform: translateY(-1px);
}

.language-switch__button.is-active::after {
    transform: scaleX(1);
}

.language-switch__divider {
    width: 1px;
    height: 16px;
    background: rgba(51, 51, 51, 0.18);
}

.age-gate__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto minmax(250px, 1fr) auto;
    gap: 16px;
    min-height: 0;
    padding: 28px 52px 16px;
}

.warning-card,
.question-card {
    position: relative;
    z-index: 5;
    width: min(720px, 100%);
    justify-self: center;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 34px rgba(68, 32, 58, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.warning-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 17px 24px;
}

.warning-card__badge {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #f48cbc, #ffb5d8);
    box-shadow: 0 8px 20px rgba(235, 103, 166, 0.3);
    font-size: 18px;
    font-weight: 900;
}

.warning-card__message {
    margin: 0;
    color: var(--ink);
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 600;
    line-height: 1.65;
    text-align: center;
}

.character-stage {
    position: relative;
    display: grid;
    min-height: 250px;
    place-items: center;
    overflow: visible;
}

.character-stage__halo {
    position: absolute;
    width: min(390px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(255, 255, 255, 0.26) 45%,
            transparent 72%
        );
    filter: blur(2px);
}

.character-stage__image {
    position: relative;
    z-index: 3;
    display: block;
    width: min(330px, 42vw);
    height: min(410px, 46vh);
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 20px rgba(68, 32, 58, 0.22));
}

.character-stage__placeholder {
    position: absolute;
    z-index: 2;
    display: grid;
    width: min(260px, 54vw);
    height: min(320px, 38vh);
    place-items: center;
    align-content: center;
    gap: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.9);
    border-radius: 45% 45% 22% 22%;
    color: rgba(79, 52, 70, 0.58);
    background: rgba(255, 255, 255, 0.22);
    text-align: center;
}

.character-stage__placeholder span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.character-stage__placeholder small {
    font-size: 12px;
    line-height: 1.6;
}

.question-card {
    padding: 17px 28px;
}

.question-card__text {
    margin: 0;
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 800;
    line-height: 1.55;
    text-align: center;
}

.age-gate__footer {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 32px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.22);
}

.soft-button {
    position: relative;
    min-width: 156px;
    height: 52px;
    padding: 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    color: var(--ink);
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 10px 25px rgba(55, 24, 46, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition:
        transform 180ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.soft-button--primary {
    background: rgba(253, 173, 212, 0.94);
}

.soft-button--secondary {
    background: rgba(255, 255, 255, 0.76);
}

.soft-button:hover,
.soft-button:focus-visible {
    transform: translateY(-3px);
    background: rgba(181, 227, 250, 0.96);
    box-shadow:
        0 14px 30px rgba(55, 24, 46, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.soft-button:active {
    transform: translateY(1px);
}

/* 확인창을 다시 확인하기 위한 데모 전용 버튼 */
.preview-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 20;
    padding: 11px 16px;
    border: 1px solid rgba(51, 51, 51, 0.18);
    border-radius: 999px;
    color: #333333;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 30px rgba(32, 16, 25, 0.12);
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.preview-button:hover {
    background: #ffffff;
}

@keyframes dialog-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@media (max-width: 980px) {
    .hero-character-group {
        width: 64vw;
    }

    .hero-logo-area {
        width: 43vw;
    }

    .hero-logo {
        width: min(40vw, 54svh);
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .hero-language-switch {
        top: 18px;
        left: 18px;
    }

    .hero-character-group {
        top: 27svh;

        width: 100vw;
        height: 73svh;
        min-height: 0;
    }

    /*
     * 모바일 최종 화면상 순서:
     * 05 - 02 - 01 - 03 - 04
     */

    .hero-character--xon {
        --character-x: 13vw;
        --character-y: 1svh;
        --character-height: 59svh;
        --character-width-limit: 67vw;
        --character-z: 10;
    }

    .hero-character--hanachan {
        --character-x: 30vw;
        --character-y: 2svh;
        --character-height: 44svh;
        --character-width-limit: 55vw;
        --character-z: 20;
    }

    .hero-character--mamaruko-duo {
        --character-x: 50vw;
        --character-y: -2svh;
        --character-height: 53svh;
        --character-width-limit: 72vw;
        --character-z: 30;
    }

    .hero-character--noir {
        --character-x: 70vw;
        --character-y: 0svh;
        --character-height: 58svh;
        --character-width-limit: 67vw;
        --character-z: 20;
    }

    .hero-character--gaenori {
        --character-x: 87vw;
        --character-y: -2svh;
        --character-height: 53svh;
        --character-width-limit: 67vw;
        --character-z: 10;
    }

    /*
     * 아래쪽의 기존 로고·화살표 관련 설정은
     * 그대로 유지합니다.
     */
}

@media (max-width: 980px) {
    .game-intro-slide {
        gap: 3vw;
        padding-right: 4vw;
        padding-left: 4vw;
    }

    .game-intro-slide__copy {
        padding:
            3svh
            3vw;
    }

    .game-intro-slide__title {
        font-size:
            clamp(27px, 3.5vw, 44px);
    }

    .game-intro-slide__line {
        font-size:
            clamp(15px, 1.6vw, 19px);
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .game-intro-slide,
    .game-intro-slide--visual-left {
        grid-template-columns: 1fr;
        grid-template-rows:
            auto
            minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "visual";

        gap: 2svh;
        align-content: center;

        padding:
            8svh
            4vw
            10svh;
    }

    .game-intro-slide__copy {
        width: 100%;
        padding:
            2.2svh
            4vw;

        border-radius: 22px;
    }

    .game-intro-slide__number {
        margin-bottom: 1svh;
        font-size: 12px;
    }

    .game-intro-slide__title {
        font-size:
            clamp(23px, 6vw, 34px);
        line-height: 1.24;
    }

    .game-intro-slide__lines {
        gap: 0.7svh;
        margin-top: 1.7svh;
    }

    .game-intro-slide__line {
        font-size:
            clamp(13px, 3.45vw, 16px);
        line-height: 1.6;
    }

    .game-intro-slide__visual,
    .game-intro-slide__visual--cards {
        min-height: 0;
        max-height: 39svh;
    }

    .game-intro-visual__image,
    .game-intro-visual__image--landscape,
    .game-intro-visual__image--square,
    .game-intro-visual__image--portrait {
        width: auto;
        max-width: 90vw;
        height: auto;
        max-height: 38svh;

        border-radius: 20px;
    }

    .game-intro-card-placeholder {
        width: 78vw;
        height: 36svh;
    }

    .game-intro-card-placeholder__card {
        width: min(31vw, 20svh);
    }

    .game-intro-indicators {
        right: 4vw;
        bottom: 5.2svh;
        gap: 0.75svh;
    }

    .game-intro-indicator {
        width: 0.95svh;
        height: 0.95svh;
    }

    .game-intro-indicator.is-active {
        width: 2.5svh;
    }

    .section-scroll-cue--up {
        top: 1.5svh;
    }

    .section-scroll-cue--down {
        bottom: 1.5svh;
    }

    .game-introduction-background__image {
        filter:
            blur(11px)
            saturate(0.7)
            brightness(1.05);
    }
}

@media (max-width: 760px) {
    .age-gate {
        padding: 12px;
    }

    .age-gate__dialog {
        width: 100%;
        min-height: calc(100vh - 24px);
        max-height: calc(100vh - 24px);
        grid-template-rows: 78px minmax(0, 1fr) 96px;
        border-radius: 24px;
    }

    .age-gate__header {
        padding: 0 18px;
        grid-template-columns: 1fr auto;
    }

    .age-gate__header-spacer {
        display: none;
    }

    .age-gate__title {
        justify-self: start;
        font-size: 22px;
    }

    .language-switch {
        gap: 8px;
    }

    .language-switch__button {
        font-size: 13px;
    }

    .age-gate__content {
        grid-template-rows: auto minmax(190px, 1fr) auto;
        gap: 12px;
        padding: 18px 18px 12px;
    }

    .warning-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px;
    }

    .warning-card__badge {
        width: 46px;
        height: 46px;
        justify-self: center;
        font-size: 16px;
    }

    .warning-card__message {
        font-size: 16px;
    }

    .character-stage__image {
        width: min(280px, 68vw);
        height: min(340px, 38vh);
    }

    .character-stage__placeholder {
        height: min(270px, 34vh);
    }

    .question-card {
        padding: 14px 18px;
    }

    .question-card__text {
        font-size: 19px;
    }

    .age-gate__footer {
        gap: 12px;
        padding: 14px 18px 18px;
    }

    .soft-button {
        min-width: 0;
        width: 50%;
        height: 50px;
    }

    .bgm-toggle {
        top: 18px;
        right: 18px;

        font-size: 12px;
    }
}

@media (max-height: 720px) and (min-width: 761px) {
    .age-gate__dialog {
        min-height: calc(100vh - 28px);
        max-height: calc(100vh - 28px);
        grid-template-rows: 74px minmax(0, 1fr) 90px;
    }

    .age-gate__content {
        grid-template-rows: auto minmax(180px, 1fr) auto;
        padding-top: 18px;
        padding-bottom: 10px;
    }

    .character-stage__image {
        height: min(330px, 38vh);
    }

    .character-stage__placeholder {
        height: min(250px, 32vh);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   EFTSR 공용 카드 컴포넌트
   원본 WPF 논리 크기: 994 × 1522
   ========================================================= */

.eftsr-card {
    position: relative;

    display: block;

    width: var(--eftsr-card-width, 280px);
    aspect-ratio: 994 / 1522;

    overflow: hidden;

    /*
     * 자식 글자 크기를 카드 너비 기준으로 계산하기 위해 사용합니다.
     */
    container-type: inline-size;

    user-select: none;
    pointer-events: none;

    filter:
        drop-shadow(
            0 2.2cqw 2.8cqw
            rgba(24, 18, 28, 0.22)
        );
}

/*
 * 카드 내부에 사용되는 공통 이미지
 */
.eftsr-card__image {
    position: absolute;

    display: block;

    max-width: none;

    user-select: none;
    pointer-events: none;
}

/*
 * 카드 일러스트
 *
 * WPF:
 * Left 55 / Top 140
 * Width 890 / Height 830
 */
.eftsr-card__illustration {
    left: 5.5332%;
    top: 9.1984%;
    z-index: 1;

    width: 89.5372%;
    height: 54.5335%;

    object-fit: cover;
}

/*
 * 설명 영역의 회색 그라데이션
 *
 * WPF:
 * Left 64 / Top 992
 * Width 867 / Height 455
 */
.eftsr-card__description-background {
    position: absolute;
    left: 6.4386%;
    top: 65.1774%;
    z-index: 2;

    width: 87.2233%;
    height: 29.8949%;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f8f8f8 25%,
            #eaeaea 100%
        );
}

/*
 * 카드 프레임
 */
.eftsr-card__frame {
    inset: 0;
    z-index: 3;

    width: 100%;
    height: 100%;

    object-fit: fill;
}

/*
 * 좌측 상단 카드 타입 아이콘
 *
 * WPF:
 * Left 68 / Top 82
 * Width 95 / Height 110
 */
.eftsr-card__symbol {
    left: 6.841%;
    top: 5.3876%;
    z-index: 4;

    width: 9.5573%;
    height: 7.2273%;

    object-fit: contain;
}

/*
 * 우측 상단 타이밍 아이콘
 *
 * WPF:
 * Left 816 / Top 95
 * Width 124 / Height 125
 */
.eftsr-card__timing {
    left: 82.0926%;
    top: 6.2418%;
    z-index: 4;

    width: 12.4748%;
    height: 8.2129%;

    object-fit: contain;
}

/*
 * 카드명
 *
 * WPF:
 * Left 217 / Top 70
 * Width 560 / Height 65
 */
.eftsr-card__name {
    position: absolute;
    left: 21.831%;
    top: 4.5992%;
    z-index: 5;

    display: flex;
    width: 56.338%;
    height: 4.2707%;

    margin: 0;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #555555;

    font-size: 4.4266cqw;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    text-shadow:
        0 0 1.01cqw
        #e1e2fd;
}

/*
 * 사용 조건
 *
 * WPF:
 * Left 102 / Top 1020
 * Width 790 / Height 85
 */
.eftsr-card__condition {
    position: absolute;
    left: 10.2616%;
    top: 67.0171%;
    z-index: 5;

    width: 79.4769%;
    height: 5.5848%;

    margin: 0;

    overflow: hidden;

    color: rgba(51, 51, 51, 0.67);

    font-size: 3.2193cqw;
    font-weight: 600;
    line-height: 1.35;

    white-space: normal;
    overflow-wrap: break-word;

    text-shadow:
        0 0 1.01cqw
        #9bbbf4;
}

/*
 * 제출 불가능한 카드의 조건 문구
 */
.eftsr-card--unavailable
.eftsr-card__condition {
    color: #8a1f2f;

    text-shadow:
        0 0 1.01cqw
        #ff4a6a;
}

/*
 * 카드 효과 설명
 *
 * 트리거가 존재하는 기본 위치:
 * Left 102 / Top 1125
 * Width 790 / Height 270
 */
.eftsr-card__effect {
    position: absolute;
    left: 10.2616%;
    top: 73.9159%;
    z-index: 5;

    width: 79.4769%;
    height: 17.7398%;

    margin: 0;
    padding-right: 0.8cqw;

    overflow: hidden;

    color: rgba(51, 51, 51, 0.67);

    font-size: 3.2193cqw;
    font-weight: 600;
    line-height: 4.4266cqw;

    white-space: pre-line;
    overflow-wrap: break-word;
}

/*
 * 트리거가 없는 카드:
 * 조건 영역을 숨기고 효과 설명 영역을 위로 확장합니다.
 */
.eftsr-card--no-condition
.eftsr-card__condition {
    display: none;
}

.eftsr-card--no-condition
.eftsr-card__effect {
    top: 67.0171%;
    height: 24.6386%;
}

/* =========================================================
   첫 번째 소개 화면의 카드 3장 배치
   ========================================================= */

.game-intro-card-stage {
    position: relative;

    width: min(47vw, 760px);
    height: min(73svh, 760px);

    overflow: visible;

    pointer-events: none;
}

/*
 * 소개 화면에 들어가는 카드 공통 크기
 */
.game-intro-card-stage
.eftsr-card {
    position: absolute;
    left: var(--showcase-x);
    top: var(--showcase-y);
    z-index: var(--showcase-z);

    width:
        min(
            var(--showcase-width),
            29svh
        );

    transform:
        translate(-50%, -50%)
        rotate(var(--showcase-rotation))
        scale(var(--showcase-scale, 1));

    transform-origin: 50% 70%;

    transition:
        transform 500ms ease,
        filter 500ms ease;

    will-change: transform;
}

/*
 * 왼쪽 카드
 */
.game-intro-card-stage
.eftsr-card:nth-child(1) {
    --showcase-x: 29%;
    --showcase-y: 54%;
    --showcase-width: 18vw;
    --showcase-rotation: -9deg;
    --showcase-scale: 0.91;
    --showcase-z: 1;
}

/*
 * 중앙 카드
 */
.game-intro-card-stage
.eftsr-card:nth-child(2) {
    --showcase-x: 50%;
    --showcase-y: 47%;
    --showcase-width: 19.5vw;
    --showcase-rotation: 0deg;
    --showcase-scale: 1;
    --showcase-z: 3;
}

/*
 * 오른쪽 카드
 */
.game-intro-card-stage
.eftsr-card:nth-child(3) {
    --showcase-x: 71%;
    --showcase-y: 54%;
    --showcase-width: 18vw;
    --showcase-rotation: 9deg;
    --showcase-scale: 0.91;
    --showcase-z: 2;
}

.character-showcase__portrait.is-missing {
    opacity: 0;
}