@charset "UTF-8";

.academy-guide{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 460px;
    gap:24px;
    margin:42px 0 72px;
    padding:24px;
    background:#f4f8fd;
    border:1px solid var(--color-border);
    border-radius:28px;
}

.academy-guide__visual,
.academy-guide__content{
    
    position:sticky;
    top:110px;
    height:calc(100vh - 150px);
}

.academy-guide__visual .image-guide{
    margin:0;
    height:100%;
    display:flex;
    flex-direction:column;
}

.academy-guide__visual .image-guide{
    padding:16px;
}

.academy-guide__visual .image-guide-header{
    margin-bottom:16px;
}

.academy-guide__visual .image-guide-kicker{
    margin-bottom:6px;
    font-size:.7rem;
}

.academy-guide__visual .image-guide-header h3{
    margin-bottom:6px;
    font-size:1.2rem;
    line-height:1.25;
}

.academy-guide__visual .image-guide-header p{
    font-size:.9rem;
    line-height:1.5;
}

.academy-guide__visual .image-guide-frame{
    flex:1;
}

.academy-guide__visual .image-guide-frame img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.academy-guide__content{
    position:sticky;
    overflow:hidden;
    perspective:1400px;
}

.academy-guide__step{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:
        opacity .55s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.academy-guide__step.is-active{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0) scale(1);
    z-index:3;
}

.academy-guide__step.is-entering-down{
    transform:translateX(0) scale(1);
}

.academy-guide__step.is-entering-up{
    transform:translateX(0) scale(1);
}

.academy-guide__step.is-exiting{
    opacity:0;
    z-index:1;
}

.academy-guide__step.is-exiting-down{
    transform:translateX(-180px) scale(.94) rotateY(-6deg);
}

.academy-guide__step.is-exiting-up{
    transform:translateX(180px) scale(.94) rotateY(6deg);
}

.academy-guide__card{
    height:100%;
    padding:32px;
    background:var(--color-surface);
    border:1px solid rgba(15,126,234,.28);
    border-radius:24px;
    box-shadow:var(--shadow-md);
    overflow:auto;
}

.academy-guide__card span{
    display:inline-block;
    margin-bottom:14px;
    color:var(--color-primary);
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.academy-guide__card h3{
    margin-bottom:18px;
    color:var(--color-dark);
    font-size:1.75rem;
}

.academy-guide__card p{
    max-width:760px;
    color:var(--color-text);
    line-height:1.7;
}

.academy-guide__block{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--color-border);
}

.academy-guide__block h4{
    margin-bottom:12px;
    color:var(--color-dark);
}

.academy-guide__block ul{
    padding-left:20px;
}

.academy-guide__block li{
    margin-bottom:8px;
    color:var(--color-text);
    line-height:1.6;
}

.academy-guide .hotspot{
    display:none !important;
}

.academy-guide .hotspot-info,
.academy-guide .hotspot-legend,
.academy-guide .guide-navigation{
    display:none !important;
}

.academy-guide-set{
    display:none;
}

.academy-guide-set.active{
    display:block;
}

.academy-guide-set .academy-guide{
    margin-top:28px;
}

.academy-guide__field-list{
    display:grid;
    gap:10px;
    margin-top:16px;
}

.academy-guide__field{
    padding:12px 14px;
    background:#f8fbff;
    border:1px solid var(--color-border);
    border-radius:14px;
}

.academy-guide__field strong{
    display:block;
    margin-bottom:4px;
    color:var(--color-dark);
    font-size:.88rem;
}

.academy-guide__field p{
    margin:0;
    font-size:.88rem;
    line-height:1.5;
}

.academy-guide__note{
    margin-top:16px;
    padding:14px;
    border-radius:14px;
    background:var(--color-soft-blue);
    border:1px solid rgba(15,126,234,.18);
}

.academy-guide__note strong{
    display:block;
    margin-bottom:5px;
    color:var(--color-primary);
    font-size:.86rem;
}

.academy-guide__note p{
    margin:0;
    font-size:.88rem;
    line-height:1.5;
}

.academy-guide__card--compact{
    padding:28px;
}

.academy-guide__card--compact h3{
    margin-bottom:14px;
    font-size:1.45rem;
}

.academy-guide__card--compact p{
    font-size:.95rem;
    line-height:1.65;
}

@media (max-height:850px){
    .academy-guide__card{
        padding:24px;
    }
    .academy-guide__card h3{
        font-size:1.35rem;
        margin-bottom:12px;
    }
    .academy-guide__card p{
        font-size:.9rem;
        line-height:1.55;
    }
    .academy-guide__field{
        padding:10px 12px;
    }
}

.academy-guide__dynamic-image {
    display: block;
    width: 100%;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity .24s ease,
        transform .32s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.academy-guide__dynamic-image.is-changing {
    opacity: .25;
    transform: scale(.992) translateY(4px);
}

@media (max-width:576px){
    .academy-guide{
        --academy-guide-mobile-top:226px;
        --academy-guide-mobile-visual-height:clamp(180px, 28vh, 240px);
        grid-template-columns:minmax(0, 1fr);
        grid-template-rows:minmax(0, 1fr);
        gap:0;
        padding:12px;
    }

    .academy-guide__visual,
    .academy-guide__content{
        grid-area:1 / 1;
        width:100%;
        min-width:0;
        align-self:start;
    }

    .academy-guide__visual{
        top:var(--academy-guide-mobile-top);
        height:var(--academy-guide-mobile-visual-height);
        z-index:1;
    }

    .academy-guide__content{
        top:calc(
            var(--academy-guide-mobile-top)
            + var(--academy-guide-mobile-visual-height)
            + 12px
        );
        height:calc(
            100vh
            - var(--academy-guide-mobile-top)
            - var(--academy-guide-mobile-visual-height)
            - 28px
        );
        margin-top:calc(
            var(--academy-guide-mobile-visual-height)
            + 12px
        );
        z-index:2;
    }

    .academy-guide__visual .image-guide{
        padding:10px;
    }

    .academy-guide__visual .image-guide-header{
        margin-bottom:8px;
    }

    .academy-guide__visual .image-guide-kicker{
        margin-bottom:4px;
        font-size:.62rem;
    }

    .academy-guide__visual .image-guide-header h3{
        margin-bottom:4px;
        font-size:1rem;
    }

    .academy-guide__visual .image-guide-header p{
        font-size:.78rem;
        line-height:1.4;
    }

    .academy-guide__card,
    .academy-guide__card--compact{
        padding:18px;
    }

    .academy-guide__card h3{
        margin-bottom:12px;
        font-size:1.3rem;
    }
}