/* =========================================================
   이감 소개 (brand-info)
   원본: yigamhi /brand/css/brand.css
   - 그누보드 전용 셀렉터(#header/#wrapper/#container/#gnb)는 제거하고
     .brandInfoPage 스코프로 대체했습니다.
   - 그 아래 섹션 스타일은 원본과 동일합니다.
   ========================================================= */

/* yigamhi /brand/css/font.css 와 동일한 폰트 패밀리.
   Pretendard 는 warp 의 public/fonts 에 같은 ttf 가 이미 있어 그대로 연결하고,
   PuradakGentleGothic 만 새로 넣었다. */
@font-face {
    font-family: 'PretendardRegular';
    src: url(/fonts/Pretendard-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'PretendardSemiBold';
    src: url(/fonts/Pretendard-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'PretendardBold';
    src: url(/fonts/Pretendard-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'PuradakGentleGothic';
    src: url(/fonts/PuradakGentleGothic.ttf);
    font-weight: normal;
    font-display: swap;
}

.brandInfoPage,
.brandInfoPage *,
.brandInfoPage *::before,
.brandInfoPage *::after {
    box-sizing: border-box;
}

:root {
    --bg: #F7F5FC;
    --primary: #5100CA;
    --primary-soft: #b7afc4;
    --point: #ED4300;
    --heading: #1D0048;
    --text: #444;
    --card-bg: #FFF;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: hidden;
}

/* layouts.app 의 .container(max-width:1000px) 밖으로 빠져나와
   페이지 가로 최대치를 채운다 (구형 브라우저용 폴백) */
.brandInfoPage {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--bg);
    font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    color: var(--primary);
    /* Bootstrap 의 body{line-height:20px} 상속을 끊어 원본과 동일하게 맞춘다 */
    line-height: normal;
}

/* :has() 지원 브라우저에서는 컨테이너 폭 제한 자체를 풀어
   스크롤바 폭(100vw - 문서폭)만큼 어긋나는 문제를 없앤다 */
@supports selector(:has(*)) {
    body:has(.brandInfoPage) .container {
        max-width: none;
        width: 100%;
    }

    .brandInfoPage {
        margin-left: 0;
        margin-right: 0;
    }
}

.brandInfoPage p {
    line-height: 130%;
    margin: 0;
}

/* 부트스트랩/공통 CSS 의 기본 요소 스타일 상쇄 */
.brandInfoPage h1,
.brandInfoPage h2,
.brandInfoPage h3,
.brandInfoPage h4 {
    margin: 0;
    font-weight: inherit;
}

.brandInfoPage ul,
.brandInfoPage ol,
.brandInfoPage li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brandInfoPage a {
    text-decoration: none;
}

.brandInfoPage img {
    max-width: none;
}

.brandInfoPage button {
    font-family: inherit;
}

/* ===================== Main [START] ===================== */

.dummySection {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(91, 24, 214, 0.35);
    letter-spacing: 0.08em;
    background:
        radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.08), transparent 22%),
        radial-gradient(circle at 80% 70%, rgba(91, 24, 214, 0.06), transparent 24%),
        var(--bg);
}

.heroStatsSection {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 2vw, 28px);
    overflow: hidden;
    isolation: isolate;
}

.heroStatsSection::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(123, 67, 239, 0.04), transparent 18%),
        radial-gradient(circle at 82% 22%, rgba(81, 0, 202, 0.035), transparent 18%),
        radial-gradient(circle at 50% 82%, rgba(237, 67, 0, 0.025), transparent 16%);
}

.heroStatsSection img {
    position: absolute;
    z-index: -1;
    top: -5%;
    left: 50%;
    transform: translateX(-50%) scale(1.045);
    width: 100%;
    max-width: clamp(384px, 75vw, 1248px);
    padding: 0 24px;
    opacity: 0;
    transition:
        opacity 1.8s cubic-bezier(.22, 1, .36, 1),
        transform 7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.heroStatsSection.is-active img {
    opacity: 0.96;
    transform: translateX(-50%) scale(1);
}

.heroInner {
    position: relative;
    z-index: 1;
    width: min(100%, 1120px);
    display: grid;
    grid-template-rows: auto auto auto auto auto 1fr;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 16px;
}

.heroBadge,
.heroDesc {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.6s cubic-bezier(.22, 1, .36, 1),
        transform 0.75s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.heroBadge {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 1000px;
    background: #E7DCFA;
    color: var(--primary);
    text-align: center;
    font-family: PretendardRegular;
    font-size: 14px;
    letter-spacing: -0.56px;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.6s cubic-bezier(.22, 1, .36, 1),
        transform 0.75s cubic-bezier(.22, 1, .36, 1);
}

.heroBadge::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -120%;
    width: 60%;
    height: 300%;
    background: linear-gradient(110deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.85) 50%,
            rgba(255, 255, 255, 0) 60%,
            transparent 100%);
    transform: rotate(18deg);
    opacity: 0;
    pointer-events: none;
}

.heroBadge.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.heroBadge.is-show::after {
    animation: heroBadgeShimmer 1.2s ease forwards;
}

@keyframes heroBadgeShimmer {

    0% {
        left: -120%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 140%;
        opacity: 0;
    }

}

.heroTitle {
    margin: 0;
    color: #5100CA;
    text-align: center;
    font-family: "PuradakGentleGothic";
    font-size: clamp(34.4px, 5vw, 62px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2.48px;
}

.heroTitle strong {
    display: block;
    font: inherit;
    color: var(--primary);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.65s cubic-bezier(.22, 1, .36, 1),
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.heroLine {
    width: 1px;
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    background-color: var(--primary);
    transition:
        max-height 0.65s cubic-bezier(.22, 1, .36, 1),
        margin 0.65s cubic-bezier(.22, 1, .36, 1),
        opacity 0.3s ease;
    will-change: max-height, margin, opacity;
}

.heroLine.is-grow {
    height: 50px;
    max-height: 50px;
    margin: 8px 0;
    opacity: 1;
}

.heroDesc {
    max-width: 576px;
    color: var(--primary);
    text-align: center;
    font-family: PretendardRegular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.64px;
}

.statsGrid {
    display: grid;
    width: 100%;
    max-width: 552px;
    margin-top: clamp(44px, 5vw, 112px);
    align-self: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.statCard {
    position: relative;
    min-height: clamp(52px, 7.6vh, 108px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.992);
    transition:
        opacity 0.55s cubic-bezier(.22, 1, .36, 1),
        transform 0.7s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
    will-change: opacity, transform;
}

.statCard:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(81, 0, 202, 0.12);
    box-shadow:
        0 18px 40px rgba(81, 0, 202, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.56);
}

.statLabel {
    position: relative;
    z-index: 1;
    color: #1D0048;
    text-align: center;
    font-family: PretendardRegular;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
}

.statValueRow {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.statValue {
    color: #1D0048;
    text-align: right;
    font-family: "PuradakGentleGothic";
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1.6px;
}

.statUnit {
    color: #1D0048;
    text-align: center;
    font-family: PretendardRegular;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
}

/* ---------- premium motion sequence ---------- */

.heroStatsSection.is-active .heroBadge {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.1s;
}

.heroStatsSection.is-active .heroTitle:nth-of-type(1) strong:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.3s;
}

.heroStatsSection.is-active .heroTitle:nth-of-type(1) strong:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.55s;
}

.heroStatsSection.is-active .heroTitle:nth-of-type(2) strong:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.8s;
}

.heroStatsSection.is-active .heroDesc {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 1.35s;
}

.heroStatsSection.is-active .statCard:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 1.6s;
}

.heroStatsSection.is-active .statCard:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 1.7s;
}

.heroStatsSection.is-active .statCard:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 1.8s;
}

.heroStatsSection.is-active .statCard:nth-child(4) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 1.9s;
}

/* ===================== Main [END] ===================== */

/* ===================== 우리의 믿음 섹션 [START] ===================== */
.beliefSection {
    padding: clamp(18px, 7vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 240px;
    align-self: stretch;
    background: #FFF;
    position: relative;
    /* min-height: 100vh;
    min-height: 100svh; */
    overflow: hidden;
    isolation: isolate;
}

.beliefInner {
    position: relative;
    z-index: 1;
    width: min(100%, 1120px);
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 16px;
}

/* 초기 상태 */
.beliefTopText,
.beliefBadge,
.beliefTitle,
.beliefScript,
.beliefSubText,
.beliefQuote,
.beliefDesc {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity, filter;
}

/* 공통 등장 */
.beliefTopText,
.beliefBadge,
.beliefScript,
.beliefSubText,
.beliefQuote,
.beliefDesc {
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),
        transform 1.25s cubic-bezier(.22, 1, .36, 1);
}

.beliefTopText {
    padding-bottom: 80px;
    color: #888;
    text-align: center;
    font-family: PretendardRegular;
    font-size: clamp(18px, 3vw, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.96px;
}

.beliefTopText strong {
    color: #444;
    font-family: PretendardBold;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.96px;
}

.beliefBadge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    /* background: rgba(81, 0, 202, 0.06);
    border: 1px solid rgba(81, 0, 202, 0.08);
    box-shadow:
        0 10px 28px rgba(81, 0, 202, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92); */
    border-radius: 1000px;
    background: #EDE3FF;
    color: var(--primary);
    backdrop-filter: blur(12px);
    font-family: PretendardRegular;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.02em;
    overflow: hidden;
}

.beliefBadge::after {
    content: "";
    position: absolute;
    top: -140%;
    left: -130%;
    width: 58%;
    height: 320%;
    background: linear-gradient(110deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 42%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0) 58%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(18deg);
    opacity: 0;
    pointer-events: none;
}

.beliefTitle {
    color: #5100CA;
    text-align: center;
    font-family: "PuradakGentleGothic";
    font-size: clamp(36px, 5vw, 62px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2.48px;
    filter: blur(12px);
    transform: translate3d(0, 24px, 0) scale(0.985);
    transition:
        opacity 1.35s cubic-bezier(.22, 1, .36, 1),
        transform 1.7s cubic-bezier(.22, 1, .36, 1),
        filter 1.7s cubic-bezier(.22, 1, .36, 1);
}

.beliefScript {
    width: min(100%, 416px);
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
    transition:
        opacity 1.1s cubic-bezier(.22, 1, .36, 1),
        transform 1.4s cubic-bezier(.22, 1, .36, 1);
}

.beliefScript svg {
    display: block;
    width: 100%;
}

.beliefLine {
    width: 1px;
    height: 0;
    margin: 4px 0 0;
    opacity: 0;
    background: var(--text);
    transition:
        height 1.1s cubic-bezier(.22, 1, .36, 1),
        opacity 0.55s ease,
        margin 1.1s cubic-bezier(.22, 1, .36, 1);
    will-change: height, opacity;
}

.beliefSubText {
    color: var(--text);
    text-align: center;
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
}

.beliefQuote {
    font-size: clamp(24px, 4vw, 40px);
    color: var(--heading);
    text-align: center;
    font-family: "PuradakGentleGothic";
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.92px;
}

.beliefDesc {
    color: var(--text);
    text-align: center;
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.beliefDesc b {
    font-family: PretendardBold;
}

/* 활성화 상태 */
.beliefSection.is-active .beliefTopText {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.15s;
}

.beliefSection.is-active .beliefBadge {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.55s;
}

.beliefSection.is-active .beliefBadge::after {
    animation: beliefBadgeShimmer 1.2s ease 0.9s forwards;
}

.beliefSection.is-active .beliefTitle {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.95s;
}

.beliefSection.is-active .beliefScript {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 1.45s;
}

.beliefSection.is-active .beliefSubText {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 2.5s;
}

.beliefSection.is-active .beliefQuote {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 2.9s;
}

.beliefSection.is-active .beliefDesc {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 3.35s;
}

.beliefLine.is-grow {
    height: 50px;
    opacity: 1;
    margin: 8px 0;
}

/* 애니메이션 */
@keyframes beliefBadgeShimmer {
    0% {
        left: -130%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 145%;
        opacity: 0;
    }
}

/* 반응형 */
@media (max-width: 1024px) {
    .beliefSection {
        gap: 144px;
    }

    .beliefTopText {
        padding-bottom: 52px;
    }
}

@media (max-width: 767px) {
    .beliefSection {
        padding: 72px 20px;
        gap: 104px;
    }

    .beliefInner {
        gap: 14px;
    }

    .beliefTopText {
        padding-bottom: 40px;
        font-size: 16px;
        letter-spacing: -0.64px;
    }

    .beliefQuote {
        letter-spacing: -0.96px;
    }

    .beliefDesc {
        font-size: 15px;
    }
}

/* ===================== 우리의 믿음 섹션 [END] ===================== */


/* ===================== 네가지 기준 섹션 [START] ===================== */
.fourStandardsSection {
    width: 100%;
    background: var(--bg);
    box-sizing: border-box;
    padding: clamp(18px, 7vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 240px;
    align-self: stretch;
    position: relative;
    /* min-height: 100vh; */
    overflow: hidden;
    isolation: isolate;
}

.fourStandardsSection__inner {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

.fourStandardsSection__headingWrap {
    margin-bottom: 40px;
    text-align: center;
}

.fourStandardsSection__heading,
.fourStandardsSection__subHeading,
.fourStandardsSection__fourStandardsCriteriaNumber,
.fourStandardsSection__fourStandardsCriteriaTitle,
.fourStandardsSection__fourStandardsCriteriaDescription {
    margin: 0;
}

.fourStandardsSection__heading {
    font-size: clamp(18px, 3vw, 24px);
    font-family: PretendardRegular;
    color: var(--text);
    word-break: keep-all;
}

.fourStandardsSection__heading b {
    font-family: PretendardBold;
    color: var(--point);
}

.fourStandardsSection__fourStandardsCriteriaList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.fourStandardsSection__fourStandardsCriteriaCard {
    display: flex;
    min-height: 276px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 4px 4px 0 #E6E1F4;
}

.fourStandardsSection__fourStandardsCriteriaNumber {
    color: var(--point);
    font-family: PuradakGentleGothic;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
}

.fourStandardsSection__fourStandardsCriteriaTitle {
    color: var(--heading);
    font-family: PuradakGentleGothic;
    font-size: clamp(24px, 4vw, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1.6px;
}

.fourStandardsSection__fourStandardsCriteriaDescription {
    color: var(--text);
    font-family: PretendardRegular;
    font-size: 16px;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* ===================== 네가지 기준 섹션 [END] ===================== */

/* ===================== 우리의 약속 섹션 [START] ===================== */
.ourPromiseSection {
    display: flex;
    padding: clamp(18px, 7vw, 120px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFF;
}

.ourPromiseInner {
    position: relative;
    z-index: 1;
    width: min(100%, 1320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    gap: 16px;
}

/* .ourPromiseQuote {
    font-size: clamp(24px, 4vw, 40px);
    color: var(--heading);
    text-align: center;
    font-family: "PuradakGentleGothic";
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.92px;
} */

.ourPromiseQuote {
    font-size: 40px;
    color: #b7afc4;
    text-align: center;
    font-family: "PuradakGentleGothic";
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.92px;
}

.ourPromiseQuote span {
    display: inline-block;
    color: #b7afc4;
    font-family: "PuradakGentleGothic";
    opacity: 0.55;
    transform: translateY(0.08em);
    transition:
        color 0.7s ease,
        opacity 0.7s ease,
        transform 0.7s ease;
    will-change: color, opacity, transform;
}

.ourPromiseQuote span.active {
    color: #1d0048;
    font-family: "PuradakGentleGothic";
    opacity: 1;
    transform: translateY(0);
}

.ourPromiseDesc {
    color: var(--text);
    text-align: center;
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.ourPromiseBadge {
    position: relative;
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 1000px;
    background: #EDE3FF;
    color: var(--primary);
    text-align: center;
    font-family: PretendardRegular;
    font-size: 14px;
    letter-spacing: -0.56px;
    overflow: hidden;
}

.ourPromiseBadge::after {
    content: "";
    position: absolute;
    top: -130%;
    left: -130%;
    width: 58%;
    height: 320%;
    background: linear-gradient(110deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 42%,
            rgba(255, 255, 255, 0.92) 50%,
            rgba(255, 255, 255, 0) 58%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(18deg);
    opacity: 0;
    pointer-events: none;
}

.ourPromiseSection.is-active .ourPromiseBadge::after {
    animation: ourPromiseBadgeShimmer 1.2s ease 0.9s forwards;
}

@keyframes ourPromiseBadgeShimmer {
    0% {
        left: -130%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 145%;
        opacity: 0;
    }
}

/* ===================== 우리의 약속 섹션 [END] ===================== */

/* ===================== 성과 지표 섹션 [START] ===================== */
.performanceMetricsSection {
    z-index: 9;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(18px, 7vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 240px;
    align-self: stretch;
    position: relative;
    /* min-height: 100vh; */
    overflow: hidden;
    isolation: isolate;
    background: #1D0048;
}

.performanceMetricsSection__inner {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.performanceMetricsSection__headlineArea {
    padding-top: 6px;
}

.performanceMetricsSection__headline,
.performanceMetricsSection__headlineDescription,
.performanceMetricsSection__metricDescription,
.performanceMetricsSection__footnote p {
    margin: 0;
}

.performanceMetricsSection__headline {
    color: #FFF;
    font-family: PuradakGentleGothic;
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    word-break: keep-all;
}

.performanceMetricsSection__headlineDescription {
    margin-top: 16px;
    color: #C9C9C9;
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.performanceMetricsSection__metricsArea {
    width: 100%;
}

.performanceMetricsSection__metricsList {
    border-top: 1px solid rgba(255, 255, 255, 0.42);
}

.performanceMetricsSection__metricItem {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid #B7AFC4;
    ;
}

.performanceMetricsSection__metricLabel {
    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: #614C7F;
    display: inline-flex;
    color: #FFF;
    font-family: PretendardSemiBold;
    font-size: 14px;
    letter-spacing: -0.56px;
    box-sizing: border-box;
}

.performanceMetricsSection__metricValue {
    display: block;
    color: #FFF;
    font-family: PuradakGentleGothic;
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -2.4px;
    word-break: keep-all;
}

.performanceMetricsSection__metricDescription {
    color: #B7AFC4;
    font-family: PretendardRegular;
    font-size: 16px;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.performanceMetricsSection__footnote {
    margin-top: 18px;
}

.performanceMetricsSection__footnote p {
    color: #B7AFC4;
    font-family: PretendardRegular;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.56px;
    word-break: keep-all;
}

/* ===================== 성과 지표 섹션 [END] ===================== */

/* ===================== 시험장에서 기사감을 느끼는 이유 섹션 [START] ===================== */
.examConfidenceReasonSection {
    width: 100%;
    padding: clamp(18px, 7vw, 120px);
    background: #f3f2f7;
    box-sizing: border-box;
    overflow: hidden;
}

.examConfidenceReasonSection__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.examConfidenceReasonSection__headingArea {
    max-width: 760px;
}

.examConfidenceReasonSection__mainTitle,
.examConfidenceReasonSection__description,
.examConfidenceReasonSection__highlightQuote,
.examConfidenceReasonSection__sixStepVisualCaption,
.examConfidenceReasonSection__sixStepProcessTitle,
.examConfidenceReasonSection__sixStepProcessDescription {
    margin: 0;
}

.examConfidenceReasonSection__mainTitle {
    color: var(--heading);
    font-family: PuradakGentleGothic;
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2.48px;
    word-break: keep-all;
}

.examConfidenceReasonSection__descriptionGroup {
    margin-top: 26px;
}

.examConfidenceReasonSection__description {
    color: var(--heading);
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.examConfidenceReasonSection__highlightQuote {
    color: var(--primary);
    font-family: PretendardBold;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.examConfidenceReasonSection__contentArea {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.examConfidenceReasonSection__sixStepVisualCard {
    position: relative;
}

.examConfidenceReasonSection__sixStepVisualCard img {
    /* max-width: 580px; */
    max-width: 100%;
    width: 100%;
    /* height: 100%; */
}

.examConfidenceReasonSection__sixStepVisualNumber {
    position: relative;
    z-index: 1;
    font-size: clamp(280px, 33vw, 520px);
    line-height: 0.82;
    font-weight: 800;
    letter-spacing: -0.08em;
    color: #ffd7c4;
    text-shadow:
        0 18px 40px rgba(255, 141, 24, 0.16),
        0 0 40px rgba(255, 174, 0, 0.18);
    transform: translate(-6px, -8px);
    user-select: none;
}

.examConfidenceReasonSection__sixStepVisualCaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 30px;
    z-index: 1;
    font-size: clamp(18px, 1.45vw, 30px);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #ffffff;
    word-break: keep-all;
}

.examConfidenceReasonSection__sixStepProcessTimeline {
    position: relative;
    padding-left: 62px;
}

.examConfidenceReasonSection__sixStepProcessTimeline::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 30px;
    left: 24px;
    width: 2px;
    background: #E1DCEA;
}

.examConfidenceReasonSection__sixStepProcessItem {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.examConfidenceReasonSection__sixStepProcessItem+.examConfidenceReasonSection__sixStepProcessItem {
    margin-top: 32px;
}

.examConfidenceReasonSection__sixStepProcessMarker {
    position: absolute;
    left: -62px;
    top: 0;
    width: 52px;
    height: 52px;
    border-radius: 15984px;
    background: #E1DCEA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--heading);
    font-family: PuradakGentleGothic;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.56px;
    box-sizing: border-box;
    z-index: 1;
}

.examConfidenceReasonSection__sixStepProcessTextArea {
    margin-left: 8px;
    min-height: 77px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.examConfidenceReasonSection__sixStepProcessTitle {
    color: var(--heading);
    font-family: PuradakGentleGothic;
    font-size: clamp(24px, 4vw, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.6px;
    word-break: keep-all;
}

.ourPromiseQuote {
    font-size: clamp(24px, 4vw, 40px);
}

.examConfidenceReasonSection__sixStepProcessDescription {
    color: var(--heading);
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* ===================== 시험장에서 기사감을 느끼는 이유 섹션 [END] ===================== */

/* ===================== 올해도 이감이 맞았습니다 섹션 [START] ===================== */
.examResultsYearSection {
    width: 100%;
    padding: clamp(64px, 8vw, 120px) 24px clamp(72px, 9vw, 128px);
    background: #FFF;
    box-sizing: border-box;
}

.examResultsYearSection * {
    box-sizing: border-box;
}

.examResultsYearSection__inner {
    width: 100%;
    max-width: 1224px;
    margin: 0 auto;
}

.examResultsYearSection__headingWrap {
    margin-bottom: 60px;
}

.examResultsYearSection__title {
    margin: 0;
    color: var(--heading);
    font-family: "PuradakGentleGothic";
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2.48px;
    word-break: keep-all;
}

.examResultsYearSection__desc {
    margin: 16px 0 0 0;
    color: var(--heading);
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.examResultsYearSection__yearTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-bottom: 24px;
}

.examResultsYearSection__yearTab {
    border: 0;
    background: transparent;
    color: var(--heading);
    font-size: 16px;
    font-family: PretendardBold;
    line-height: 1;
    letter-spacing: -0.03em;
    padding: 14px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.examResultsYearSection__yearTab:hover {
    background: #F7F5FC;
    box-shadow: 0 4px 4px 0 #E6E1F4;
    box-sizing: border-box;
}

.examResultsYearSection__yearTab.is-active {
    display: flex;
    padding: 10px 20px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background: #1D0048;
    border-radius: 1000px;
    color: #fff;
}

.examResultsYearSection__contentGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
}

.examResultsYearSection__card {
    display: flex;
    height: 100%;
    min-height: 400px;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(18px, 3vw, 24px);
    flex: 1 0 0;
}

.examResultsYearSection__card--reading {
    border-radius: 20px;
    border: 3px solid #FFDEB6;
    background: linear-gradient(180deg, #FFF6EF 0%, #FFF 100%);
}

.examResultsYearSection__card--literature {
    border-radius: 20px;
    border: 3px solid #BFDBFF;
    background: linear-gradient(180deg, #EEF5FF 0%, #FFF 100%);
}

.examResultsYearSection__cardTitle {
    color: var(--heading);
    font-family: PretendardBold;
    font-size: clamp(24px, 4vw, 32px);
    line-height: 130%;
    letter-spacing: -1.28px;
}

.examResultsYearSection__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vw, 24px);
}

.examResultsYearSection__listItem {
    color: var(--heading);
    font-family: PretendardRegular;
    font-size: clamp(16px, 3vw, 20px);
    line-height: 130%;
    letter-spacing: -0.8px;
    word-break: keep-all;
}

.examResultsYearSection__footnote {
    margin-top: 24px;
    color: var(--heading);
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

/* ===================== 올해도 이감이 맞았습니다 섹션 [END] ===================== */

/* ===================== 56만 명이 먼저 걸어간 길 섹션 [START] ===================== */
.examReviewStorySection {
    width: 100%;
    padding: clamp(64px, 8vw, 120px) 24px;
    background: #f6f4fb;
    box-sizing: border-box;
    overflow: hidden;
}

.examReviewStorySection * {
    box-sizing: border-box;
}

.examReviewStorySection__inner {
    width: 100%;
    max-width: 1224px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.examReviewStorySection__intro {
    position: relative;
    min-height: 100%;
    padding-top: 8px;
}

.examReviewStorySection__title {
    color: var(--heading);
    font-family: "PuradakGentleGothic";
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2.48px;
    word-break: keep-all;
}

.examReviewStorySection__desc {
    margin: 16px 0 0 0;
    color: var(--heading);
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.examReviewStorySection__text {
    position: relative;
    z-index: 1;
}

.examReviewStorySection__dots {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(64px, 16vw, 320px);
    padding-left: 2px;
}

.examReviewStorySection__dot {
    display: block;
    /* width: clamp(32px, 3vw, 46px); */
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity, filter;
}

.examReviewStorySection__dot svg {
    display: block;
    width: 100%;
    height: auto;
}

/* 홀수 발자국 */
.examReviewStorySection__dot:nth-child(odd) {
    --rotate-start: -2deg;
    --rotate-hit: -6deg;
    --rotate-mid: -4deg;
    --rotate-end: -3deg;
}

/* 짝수 발자국 */
.examReviewStorySection__dot:nth-child(even) {
    --rotate-start: 2deg;
    --rotate-hit: 6deg;
    --rotate-mid: 4deg;
    --rotate-end: 3deg;
}

/* 각 발자국 위치 */
.examReviewStorySection__dot:nth-child(1) {
    --foot-y: 0px;
    animation: examFootstep01 5.4s cubic-bezier(.33, 1, .68, 1) infinite;
}

.examReviewStorySection__dot:nth-child(2) {
    --foot-y: -28px;
    animation: examFootstep02 5.4s cubic-bezier(.33, 1, .68, 1) infinite;
}

.examReviewStorySection__dot:nth-child(3) {
    --foot-y: 2.4px;
    animation: examFootstep03 5.4s cubic-bezier(.33, 1, .68, 1) infinite;
}

.examReviewStorySection__dot:nth-child(4) {
    --foot-y: -28px;
    animation: examFootstep04 5.4s cubic-bezier(.33, 1, .68, 1) infinite;
}

.examReviewStorySection__dot:nth-child(5) {
    --foot-y: -0.8px;
    animation: examFootstep05 5.4s cubic-bezier(.33, 1, .68, 1) infinite;
}

.examReviewStorySection__dot:nth-child(6) {
    --foot-y: -28px;
    animation: examFootstep06 5.4s cubic-bezier(.33, 1, .68, 1) infinite;
}

/* 공통 느낌:
   - 각자 정해진 구간에 등장
   - 등장 후 계속 유지
   - 92%~100% 구간에서 전부 같이 사라짐
*/

@keyframes examFootstep01 {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) + 7.2px)) scale(0.94) rotate(var(--rotate-start));
        filter: blur(1px);
    }

    8% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) - 0.8px)) scale(1.04) rotate(var(--rotate-hit));
        filter: blur(0);
    }

    12% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) + 0.48px)) scale(0.99) rotate(var(--rotate-mid));
        filter: blur(0);
    }

    16%,
    91% {
        opacity: 1;
        transform: translateY(var(--foot-y)) scale(1) rotate(var(--rotate-end));
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) - 1.92px)) scale(0.96) rotate(var(--rotate-end));
        filter: blur(0);
    }
}

@keyframes examFootstep02 {

    0%,
    10% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) + 7.2px)) scale(0.94) rotate(var(--rotate-start));
        filter: blur(1px);
    }

    18% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) - 0.8px)) scale(1.04) rotate(var(--rotate-hit));
        filter: blur(0);
    }

    22% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) + 0.48px)) scale(0.99) rotate(var(--rotate-mid));
        filter: blur(0);
    }

    26%,
    91% {
        opacity: 1;
        transform: translateY(var(--foot-y)) scale(1) rotate(var(--rotate-end));
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) - 1.92px)) scale(0.96) rotate(var(--rotate-end));
        filter: blur(0);
    }
}

@keyframes examFootstep03 {

    0%,
    20% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) + 7.2px)) scale(0.94) rotate(var(--rotate-start));
        filter: blur(1px);
    }

    28% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) - 0.8px)) scale(1.04) rotate(var(--rotate-hit));
        filter: blur(0);
    }

    32% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) + 0.48px)) scale(0.99) rotate(var(--rotate-mid));
        filter: blur(0);
    }

    36%,
    91% {
        opacity: 1;
        transform: translateY(var(--foot-y)) scale(1) rotate(var(--rotate-end));
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) - 1.92px)) scale(0.96) rotate(var(--rotate-end));
        filter: blur(0);
    }
}

@keyframes examFootstep04 {

    0%,
    30% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) + 7.2px)) scale(0.94) rotate(var(--rotate-start));
        filter: blur(1px);
    }

    38% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) - 0.8px)) scale(1.04) rotate(var(--rotate-hit));
        filter: blur(0);
    }

    42% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) + 0.48px)) scale(0.99) rotate(var(--rotate-mid));
        filter: blur(0);
    }

    46%,
    91% {
        opacity: 1;
        transform: translateY(var(--foot-y)) scale(1) rotate(var(--rotate-end));
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) - 1.92px)) scale(0.96) rotate(var(--rotate-end));
        filter: blur(0);
    }
}

@keyframes examFootstep05 {

    0%,
    40% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) + 7.2px)) scale(0.94) rotate(var(--rotate-start));
        filter: blur(1px);
    }

    48% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) - 0.8px)) scale(1.04) rotate(var(--rotate-hit));
        filter: blur(0);
    }

    52% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) + 0.48px)) scale(0.99) rotate(var(--rotate-mid));
        filter: blur(0);
    }

    56%,
    91% {
        opacity: 1;
        transform: translateY(var(--foot-y)) scale(1) rotate(var(--rotate-end));
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) - 1.92px)) scale(0.96) rotate(var(--rotate-end));
        filter: blur(0);
    }
}

@keyframes examFootstep06 {

    0%,
    50% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) + 7.2px)) scale(0.94) rotate(var(--rotate-start));
        filter: blur(1px);
    }

    58% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) - 0.8px)) scale(1.04) rotate(var(--rotate-hit));
        filter: blur(0);
    }

    62% {
        opacity: 1;
        transform: translateY(calc(var(--foot-y) + 0.48px)) scale(0.99) rotate(var(--rotate-mid));
        filter: blur(0);
    }

    66%,
    91% {
        opacity: 1;
        transform: translateY(var(--foot-y)) scale(1) rotate(var(--rotate-end));
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--foot-y) - 1.92px)) scale(0.96) rotate(var(--rotate-end));
        filter: blur(0);
    }
}

.examReviewStorySection__content {
    width: 100%;
}

.examReviewStorySection__cardList {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.examReviewStorySection__card {
    display: inline-flex;
    flex-direction: column;
    align-items: start;
    gap: 8px;
    width: 100%;
    padding: clamp(24px, 2.4vw, 32px);
    border-radius: 24px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 4px 4px 0 #E6E1F4;
    border: 1px solid rgba(114, 77, 173, 0.06);
}

.examReviewStorySection__badge {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 1000px;
    background: #EDE3FF;
    color: #5100CA;
    text-align: center;
    font-family: PretendardRegular;
    font-size: 14px;
    letter-spacing: -0.56px;
}

.examReviewStorySection__meta {
    color: #1D0048;
    font-family: PretendardRegular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.56px;
}

.examReviewStorySection__quote {
    color: #1D0048;
    font-family: "PuradakGentleGothic";
    font-size: clamp(18px, 3vw, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.96px;
    word-break: keep-all;
}

.examReviewStorySection__moreWrap {
    display: flex;
    justify-content: flex-end;
    max-width: 1224px;
    width: 100%;
    margin: 64px auto 0 auto;
}

a:link {
    text-decoration: none;
    transition: all .3s ease;
    color: var(--heading);
    text-align: right;
    font-family: PretendardRegular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.64px;
}

.examReviewStorySection__moreLink {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.4;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* underline */
.examReviewStorySection__moreLink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0%;
    height: 2px;

    background: linear-gradient(90deg,
            #5100CA,
            #7B43EF);

    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

/* arrow */
.examReviewStorySection__arrow {
    display: inline-block;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* hover */
.examReviewStorySection__moreLink:hover {
    color: #5100CA;
}

.examReviewStorySection__moreLink:hover::after {
    width: 100%;
}

.examReviewStorySection__moreLink:hover .examReviewStorySection__arrow {
    transform: translateX(6px);
}

/* ===================== 56만 명이 먼저 걸어간 길 길 섹션 [END] ===================== */

/* ===================== 결국 이감 섹션 [START] ===================== */
.examFinalCtaSection {
    align-content: center;
    width: 100%;
    background: #23004a;
    padding: clamp(80px, 10vw, 128px) 24px;
    box-sizing: border-box;
    position: sticky;
    transition: transform 1.45s cubic-bezier(.22, 1, .36, 1);
}

.examFinalCtaSection__inner {
    max-width: 1152px;
    margin: 0 auto;
    text-align: center;
}

.examFinalCtaSection__title {
    color: #FFF;
    text-align: center;
    font-family: "PuradakGentleGothic";
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2.48px;
}

.examFinalCtaSection__desc {
    margin-top: 16px;
    color: #C9C9C9;
    text-align: center;
    font-family: PretendardRegular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.64px;
}

.examFinalCtaSection__btnWrap {
    margin-top: clamp(32px, 4vw, 48px);
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.examFinalCtaSection__btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 256px;
    max-width: 240px;
    width: 100%;
    height: 52px;
    padding: 16px 24px;
    gap: 8px;

    border: none;
    border-radius: 12px;

    text-decoration: none;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.64px;
    font-family: PretendardBold;

    backface-visibility: hidden;
    transform: translateZ(0);

    transition:
        transform .42s cubic-bezier(.22, 1, .36, 1),
        box-shadow .42s cubic-bezier(.22, 1, .36, 1),
        background .42s ease,
        color .32s ease,
        filter .42s ease;
}

/* 공통 광택 */
.examFinalCtaSection__btn::before {
    content: "";
    position: absolute;
    top: -160%;
    left: -140%;
    width: 72%;
    height: 420%;
    transform: rotate(24deg);

    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.08) 18%,
            rgba(255, 255, 255, 0.72) 48%,
            rgba(255, 255, 255, 0.12) 72%,
            rgba(255, 255, 255, 0) 100%);

    opacity: 0;
    pointer-events: none;
    transition:
        left .9s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
    z-index: 2;
}

/* 공통 glow */
.examFinalCtaSection__btn::after {
    content: "";
    position: absolute;
    inset: -2.4px;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);

    transition:
        opacity .42s ease,
        transform .42s cubic-bezier(.22, 1, .36, 1),
        filter .42s ease;
}

/* primary */
.examFinalCtaSection__btn--primary {
    background: #5100CA;
    color: #FFF !important;
}

.examFinalCtaSection__btn--primary::after {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(159, 112, 255, 0.62) 0%,
            rgba(123, 67, 239, 0.32) 35%,
            rgba(81, 0, 202, 0.16) 55%,
            rgba(81, 0, 202, 0) 76%);
    filter: blur(10px);
}

/* secondary */
.examFinalCtaSection__btn--secondary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 245, 255, 0.98) 100%);
    color: var(--primary) !important;
}

.examFinalCtaSection__btn--secondary::after {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(150, 110, 255, 0.28) 0%,
            rgba(123, 67, 239, 0.14) 44%,
            rgba(123, 67, 239, 0) 74%);
    filter: blur(12px);
}

/* hover */
.examFinalCtaSection__btn:hover {
    transform: translateY(-4.48px) scale(1.025);
    filter: saturate(1.06);
}

.examFinalCtaSection__btn:hover::before {
    left: 155%;
    opacity: 1;
}

.examFinalCtaSection__btn:hover::after {
    opacity: 1;
    transform: scale(1.04);
}

.examFinalCtaSection__btn--primary:hover {
    box-shadow:
        0 18px 36px rgba(81, 0, 202, 0.34),
        0 10px 22px rgba(123, 67, 239, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.examFinalCtaSection__btn--secondary:hover {
    box-shadow:
        0 16px 32px rgba(20, 10, 40, 0.16),
        0 8px 18px rgba(123, 67, 239, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(123, 67, 239, 0.16);
}

/* active */
.examFinalCtaSection__btn:active {
    transform: translateY(1.28px) scale(0.975);
    transition-duration: .14s;
}

.examFinalCtaSection__btn--primary:active {
    box-shadow:
        0 6px 12px rgba(81, 0, 202, 0.22),
        inset 0 4px 10px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.examFinalCtaSection__btn--secondary:active {
    box-shadow:
        0 6px 12px rgba(20, 10, 40, 0.12),
        inset 0 4px 10px rgba(123, 67, 239, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/* focus */
.examFinalCtaSection__btn:focus-visible {
    outline: none;
    transform: translateY(-1.92px);
    box-shadow:
        0 0 0 3.52px rgba(255, 255, 255, 0.18),
        0 0 0 6.72px rgba(123, 67, 239, 0.42);
}

/* 버튼 묶음이 있다면 추천 */
.examFinalCtaSection__btnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) {

    .examFinalCtaSection__btn,
    .examFinalCtaSection__btn::before,
    .examFinalCtaSection__btn::after {
        transition: none;
        animation: none;
    }
}

/* ===================== 결국 이감 섹션 [END] ===================== */

/* ===================== story flow stack [START] ===================== */
.brandStoryFlow {
    position: relative;
}

.storyPanel {
    position: sticky;
    top: 0;
    min-height: 100vh;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 1.45s cubic-bezier(.22, 1, .36, 1);
}

/* 첫 섹션은 처음부터 그대로 */
.storyPanel.is-first {
    transform: translate3d(0, 0, 0);
}

/* 스크롤 시 위로 올라오게 */
.storyPanel.is-reveal {
    transform: translate3d(0, 0, 0);
}

/* 겹쳐 쌓이도록 */
.storyPanel:nth-child(1) {
    z-index: 1;
    min-height: calc(100vh - 64px);
}

.storyPanel:nth-child(2) {
    z-index: 2;
}

.storyPanel:nth-child(3) {
    z-index: 3;
}

.storyPanel:nth-child(4) {
    z-index: 4;
}

@media (max-width: 767px) {
    .storyPanel {
        top: 56px;
        min-height: calc(100vh - 56px);
        min-height: calc(100svh - 56px);
    }

    .storyPanel+.storyPanel {
        min-height: calc(100vh + 48px);
        top: 0;
    }
}

/* ===================== story flow stack [END] ===================== */

/* ===================== dynamic interactive sections [START] ===================== */

/* 공통 모션 */
.performanceMetricsSection,
.examConfidenceReasonSection,
.examResultsYearSection,
.examReviewStorySection,
.examFinalCtaSection {
    overflow: hidden;
    position: relative;
}

.fourStandardsSection__headingWrap,
.fourStandardsSection__fourStandardsCriteriaCard,
.ourPromiseBadge,
.ourPromiseQuote,
.ourPromiseDesc,
.performanceMetricsSection__headlineArea,
.performanceMetricsSection__metricItem,
.performanceMetricsSection__footnote,
.examConfidenceReasonSection__headingArea,
.examConfidenceReasonSection__sixStepVisualCard,
.examConfidenceReasonSection__sixStepProcessItem,
.examResultsYearSection__headingWrap,
.examResultsYearSection__yearTabs,
.examResultsYearSection__card,
.examReviewStorySection__intro,
.examReviewStorySection__card,
.examReviewStorySection__moreWrap,
.examFinalCtaSection__inner {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.section-interactive.is-active .fourStandardsSection__headingWrap,
.section-interactive.is-active .ourPromiseBadge,
.section-interactive.is-active .performanceMetricsSection__headlineArea,
.section-interactive.is-active .examConfidenceReasonSection__headingArea,
.section-interactive.is-active .examResultsYearSection__headingWrap,
.section-interactive.is-active .examReviewStorySection__intro,
.section-interactive.is-active .examFinalCtaSection__inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---------- 네 가지 기준 ---------- */
.fourStandardsSection::before {
    /* content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(81, 0, 202, 0.06), transparent 22%),
        radial-gradient(circle at 80% 75%, rgba(237, 67, 0, 0.05), transparent 18%);
    pointer-events: none;
    z-index: 0; */
}

.fourStandardsSection__inner {
    position: relative;
    z-index: 1;
}

.fourStandardsSection__fourStandardsCriteriaCard {
    opacity: 0;
    transform: translate3d(0, 48px, 0) rotateX(10deg) scale(0.98);
    transform-origin: center bottom;
    transition:
        opacity 0.95s cubic-bezier(.22, 1, .36, 1),
        transform 1.15s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    border: 1px solid rgba(81, 0, 202, 0.04);
}

.section-interactive.is-active .fourStandardsSection__fourStandardsCriteriaCard:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    transition-delay: 0.12s;
}

.section-interactive.is-active .fourStandardsSection__fourStandardsCriteriaCard:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    transition-delay: 0.24s;
}

.section-interactive.is-active .fourStandardsSection__fourStandardsCriteriaCard:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    transition-delay: 0.36s;
}

.section-interactive.is-active .fourStandardsSection__fourStandardsCriteriaCard:nth-child(4) {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    transition-delay: 0.48s;
}

.fourStandardsSection__fourStandardsCriteriaCard:hover {
    transform: translate3d(0, -8px, 0) scale(1.015);
    box-shadow:
        0 20px 40px rgba(81, 0, 202, 0.08),
        0 4px 8px rgba(81, 0, 202, 0.05);
}

/* ---------- 우리의 약속 ---------- */
.ourPromiseSection {
    z-index: 4;
    /* min-height: 100vh; */
    /* transform: translate3d(0, 18vh, 0); */
    opacity: 1;
    transition:
        transform 1.3s cubic-bezier(.22, 1, .36, 1),
        opacity 1s ease;
    will-change: transform, opacity;
}

.ourPromiseSection.is-reveal {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.ourPromiseInner {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

.ourPromiseQuoteGroup {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ourPromiseBadge,
.ourPromiseQuote,
.ourPromiseDesc {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.95s cubic-bezier(.22, 1, .36, 1),
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.ourPromiseQuote {
    margin: 0;
}

.ourPromiseSection.is-active .ourPromiseBadge {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.12s;
}

.ourPromiseSection.is-active .ourPromiseQuote:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.26s;
}

.ourPromiseSection.is-active .ourPromiseQuote:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.42s;
}

.ourPromiseSection.is-active .ourPromiseQuote:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.58s;
}

.ourPromiseSection.is-active .ourPromiseDesc {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.78s;
}

/* ---------- 성과 지표 ---------- */
.ourPromiseSection::before {
    /* content: "";
    position: absolute;
    inset: 1%;
    background:
        radial-gradient(circle at 20% 20%, rgba(136, 87, 255, 0.18), transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(255, 157, 77, 0.14), transparent 16%);
    filter: blur(12px);
    opacity: 0.5;
    pointer-events: none; */
}

.performanceMetricsSection__metricItem {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    position: relative;
}

.ourPromiseSection::after {
    /* content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.95);
    transition: width 1.1s cubic-bezier(.22, 1, .36, 1); */
}

.section-interactive.is-active .performanceMetricsSection__metricItem:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.12s;
}

.section-interactive.is-active .performanceMetricsSection__metricItem:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.26s;
}

.section-interactive.is-active .performanceMetricsSection__metricItem:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.4s;
}

.section-interactive.is-active .performanceMetricsSection__metricItem:nth-child(4) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.54s;
}

.section-interactive.is-active .performanceMetricsSection__metricItem::after {
    width: 100%;
}

.section-interactive.is-active .performanceMetricsSection__footnote {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.75s;
}

/* ---------- 기사감 섹션 ---------- */
.examConfidenceReasonSection__sixStepVisualCard {
    opacity: 0;
    transform: translate3d(-40px, 0, 0) scale(0.96);
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity;
}

.section-interactive.is-active .examConfidenceReasonSection__sixStepVisualCard {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.15s;
}

.examConfidenceReasonSection__sixStepProcessItem {
    opacity: 0.35;
    transform: translate3d(32px, 0, 0);
    transition:
        opacity 0.6s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.section-interactive.is-active .examConfidenceReasonSection__sixStepProcessItem {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.examConfidenceReasonSection__sixStepProcessItem.is-step-active .examConfidenceReasonSection__sixStepProcessMarker {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 8px rgba(81, 0, 202, 0.08);
}

.examConfidenceReasonSection__sixStepProcessItem.is-step-active .examConfidenceReasonSection__sixStepProcessTitle {
    color: var(--primary);
}

/* ---------- 연도별 적중 결과 ---------- */
.examResultsYearSection__yearTabs {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.section-interactive.is-active .examResultsYearSection__yearTabs {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.12s;
}

.examResultsYearSection__card {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.985);
    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease;
}

.section-interactive.is-active .examResultsYearSection__card:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.2s;
}

.section-interactive.is-active .examResultsYearSection__card:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.34s;
}

.examResultsYearSection__card:hover {
    transform: translate3d(0, -6.4px, 0);
    box-shadow: 0 20px 40px rgba(29, 0, 72, 0.08);
}

.examResultsYearSection__listItem {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.55s ease,
        transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

.examResultsYearSection__card.is-list-on .examResultsYearSection__listItem {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.examResultsYearSection__card.is-list-on .examResultsYearSection__listItem:nth-child(1) {
    transition-delay: 0.05s;
}

.examResultsYearSection__card.is-list-on .examResultsYearSection__listItem:nth-child(2) {
    transition-delay: 0.12s;
}

.examResultsYearSection__card.is-list-on .examResultsYearSection__listItem:nth-child(3) {
    transition-delay: 0.19s;
}

.examResultsYearSection__card.is-list-on .examResultsYearSection__listItem:nth-child(4) {
    transition-delay: 0.26s;
}

/* ---------- 후기 섹션 ---------- */
.examReviewStorySection__card {
    opacity: 0;
    /* transform: translate3d(0, 32px, 0) rotate(-1deg);
    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease; */
}

.section-interactive.is-active .examReviewStorySection__card:nth-child(1) {
    opacity: 1;
    /* transform: translate3d(0, 0, 0) rotate(-1deg); */
    transition-delay: 0.16s;
}

.section-interactive.is-active .examReviewStorySection__card:nth-child(2) {
    opacity: 1;
    /* transform: translate3d(0, 0, 0) rotate(0.6deg); */
    transition-delay: 0.3s;
}

.section-interactive.is-active .examReviewStorySection__card:nth-child(3) {
    opacity: 1;
    /* transform: translate3d(0, 0, 0) rotate(-0.4deg); */
    transition-delay: 0.44s;
}

.examReviewStorySection__card:hover {
    /* transform: translate3d(0, -1px, 0) rotate(0deg); */
    box-shadow: 0 20px 40px rgba(55, 22, 108, 0.1);
}

.section-interactive.is-active .examReviewStorySection__moreWrap {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.62s;
}

/* ---------- 마지막 CTA ---------- */
.examFinalCtaSection {
    overflow: hidden;
}

.examFinalCtaSection__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.examFinalCtaSection__glow {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(48px);
    opacity: 0.5;
    animation: ctaGlowFloat 8s ease-in-out infinite;
}

.examFinalCtaSection__glow--1 {
    width: 288px;
    height: 288px;
    left: 8%;
    top: 18%;
    background: rgba(123, 67, 239, 0.28);
}

.examFinalCtaSection__glow--2 {
    width: 384px;
    height: 384px;
    right: 10%;
    top: 10%;
    background: rgba(84, 158, 255, 0.18);
    animation-delay: 1.4s;
}

.examFinalCtaSection__glow--3 {
    width: 256px;
    height: 256px;
    left: 45%;
    bottom: 8%;
    background: rgba(255, 122, 53, 0.16);
    animation-delay: 2.3s;
}

.examFinalCtaSection__noise,
.examFinalCtaSection__grid {
    position: absolute;
    inset: 0;
    display: block;
}

.examFinalCtaSection__grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0.35;
}

.examFinalCtaSection__noise {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.07), transparent 12%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05), transparent 12%),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.05), transparent 10%);
    animation: ctaNoiseMove 12s linear infinite;
    opacity: 0.65;
}

@keyframes ctaGlowFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -16px, 0) scale(1.06);
    }
}

@keyframes ctaNoiseMove {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -16px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {

    .fourStandardsSection__headingWrap,
    .fourStandardsSection__fourStandardsCriteriaCard,
    .ourPromiseBadge,
    .ourPromiseQuote,
    .ourPromiseDesc,
    .performanceMetricsSection__headlineArea,
    .performanceMetricsSection__metricItem,
    .performanceMetricsSection__footnote,
    .examConfidenceReasonSection__headingArea,
    .examConfidenceReasonSection__sixStepVisualCard,
    .examConfidenceReasonSection__sixStepProcessItem,
    .examResultsYearSection__headingWrap,
    .examResultsYearSection__yearTabs,
    .examResultsYearSection__card,
    .examReviewStorySection__intro,
    .examReviewStorySection__card,
    .examReviewStorySection__moreWrap,
    .examFinalCtaSection__inner,
    .ourPromiseInner {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ===================== dynamic interactive sections [END] ===================== */

/* 큰 데스크탑 */
@media (min-width: 1441px) {}

/* 일반 노트북 */
@media (max-width: 1280px) {}

/* 높이가 낮은 노트북 */
@media (max-height: 860px) {

    /* ===================== Main [START] ===================== */
    .heroInner {
        gap: 16px;
    }

    .heroTitle,
    .beliefTitle,
    .performanceMetricsSection__headline,
    .examConfidenceReasonSection__mainTitle,
    .examResultsYearSection__title,
    .examReviewStorySection__title,
    .examFinalCtaSection__title {
        font-size: clamp(32px, 48px, 62px);
    }

    .statsGrid {
        margin-top: clamp(40px, 3vw, 120px);
    }

    .heroDesc {
        font-size: clamp(12px, 0.95vw, 16px);
        line-height: 1.48;
        max-width: 640px;
    }

    .statUnit {
        font-size: clamp(12px, 0.92vw, 16px);
    }

    /* ===================== Main [END] ===================== */


    /* ===================== 성과 지표 섹션 [START] ===================== */

    .performanceMetricsSection__metricValue {
        font-size: clamp(24px, 46.4px, 60px);
    }

    /* ===================== 성과 지표 섹션 [END] ===================== */


    .examResultsYearSection__headingWrap {
        margin-bottom: clamp(24px, 46.4px, 60px);
    }

}

/* 태블릿 */
@media (max-width: 1024px) {
    /* ===================== Main [START] ===================== */
    .heroStatsSection {
        height: calc(100vh - 48px);
    }

    .heroInner {
        grid-template-rows: auto auto auto auto 1fr;
        gap: 16px;
    }

    .heroTitle,
    .beliefTitle,
    .performanceMetricsSection__headline,
    .examConfidenceReasonSection__mainTitle,
    .examResultsYearSection__title,
    .examReviewStorySection__title,
    .examFinalCtaSection__title {
        font-size: clamp(36px, 6vw, 62px);
    }

    /* ===================== Main [END] ===================== */


    /* ===================== 네가지 기준 섹션 [START] ===================== */

    .fourStandardsSection__fourStandardsCriteriaList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ===================== 네가지 기준 섹션 [END] ===================== */


    /* ===================== 성과 지표 섹션 [START] ===================== */

    .performanceMetricsSection__metricValue {
        font-size: clamp(28px, 5vw, 60px);
    }

    .performanceMetricsSection__inner {
        grid-template-columns: 1fr;
    }

    /* ===================== 성과 지표 섹션 [END] ===================== */

    /* ===================== 56만 명이 먼저 걸어간 길 길 섹션 [START] ===================== */
    .examReviewStorySection__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .examReviewStorySection__dots {
        bottom: 0;
        right: 24px;
        display: flex;
        align-items: end;
        gap: 16px;
    }

    .examResultsYearSection__headingWrap {
        margin-bottom: clamp(28px, 7vw, 60px);
    }

    /* ===================== 56만 명이 먼저 걸어간 길 길 섹션 [END] ===================== */

    .examResultsYearSection__yearTabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .examResultsYearSection__yearTabs::-webkit-scrollbar {
        display: none;
    }
}

/* 모바일 */
@media (max-width: 767px) {
    /* ===================== Main [START] ===================== */

    .heroTitle,
    .beliefTitle,
    .performanceMetricsSection__headline,
    .examConfidenceReasonSection__mainTitle,
    .examResultsYearSection__title,
    .examReviewStorySection__title,
    .examFinalCtaSection__title {
        font-size: clamp(28px, 6vw, 6vw);
    }

    .heroDesc {
        line-height: 1.55;
        max-width: 100%;
    }

    .statUnit {
        font-size: 12px;
        margin-bottom: 4px;
    }

    /* ===================== Main [END] ===================== */

    /* ===================== 우리의 믿음 섹션 [START] ===================== */
    .beliefSection {
        padding: 44px 24px;
    }

    .beliefInner {
        max-width: 100%;
    }

    .beliefScript {
        font-size: 21.6px;
        line-height: 1.25;
    }

    .beliefLine {
        height: 48px;
        margin-bottom: 18px;
    }

    .beliefSubText {
        font-size: 15.68px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .beliefDesc {
        font-size: 15.04px;
        line-height: 1.75;
        max-width: 100%;
    }

    .beliefTopText {
        padding-bottom: 20px;
    }

    /* ===================== 우리의 믿음 섹션 [END] ===================== */

    /* ===================== 네가지 기준 섹션 [START] ===================== */

    .fourStandardsSection__headingWrap {
        margin-bottom: 36px;
    }

    .fourStandardsSection__subHeading {
        font-size: 20px;
        line-height: 1.5;
    }

    .fourStandardsSection__fourStandardsCriteriaList {
        gap: 8px;
    }

    .fourStandardsSection__fourStandardsCriteriaCard {
        min-height: auto;
        padding: 22px 18px 24px;
        border-radius: 18px;
    }

    .fourStandardsSection__fourStandardsCriteriaDescription {
        font-size: 14px;
        line-height: 1.6;
    }

    .fourStandardsSection__fourStandardsCriteriaNumber {
        font-size: 12px;
    }

    /* ===================== 네가지 기준 섹션 [END] ===================== */


    /* ===================== 성과 지표 섹션 [START] ===================== */

    .performanceMetricsSection__metricValue {
        font-size: clamp(24px, 5vw, 5vw);
    }

    /* ===================== 성과 지표 섹션 [END] ===================== */

    /* ===================== 시험장에서 기사감을 느끼는 이유 섹션 [START] ===================== */
    .examConfidenceReasonSection__contentArea {
        grid-template-columns: 1fr;
    }

    /* ===================== 시험장에서 기사감을 느끼는 이유 섹션 [END] ===================== */

    /* ===================== 올해도 이감이 맞았습니다 섹션 [START] ===================== */
    .examResultsYearSection__contentGrid {
        grid-template-columns: 1fr;
    }

    /* ===================== 올해도 이감이 맞았습니다 섹션 [END] ===================== */

    .examResultsYearSection__headingWrap {
        margin-bottom: clamp(24px, 5vw, 10vw);
    }

    .performanceMetricsSection__metricValue {
        font-size: clamp(24px, 5vw, 60px);
    }
}


@media (max-width: 520px) {
    .heroStatsSection {
        height: 100vh;
    }

    .beliefSection,
    .fourStandardsSection,
    .ourPromiseSection {
        padding: clamp(64px, 8vw, 120px) 24px;
    }

    .beliefScript {
        font-size: 18.4px;
    }

    .beliefDesc {
        font-size: 14.08px;
    }

    .statsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .beliefTopText {
        padding-bottom: 16px;
    }

    .examReviewStorySection__dots {
        display: none;
    }

    .performanceMetricsSection {
        padding: clamp(64px, 8vw, 120px) 24px;
    }

    .examResultsYearSection__card {
        padding: 24px;
        min-height: 288px;
    }

    .performanceMetricsSection,
    .examConfidenceReasonSection,
    .examResultsYearSection,
    .examReviewStorySection,
    .examFinalCtaSection {
        padding: clamp(64px, 8vw, 120px) 24px;
    }

    .examReviewStorySection__inner {
        gap: 0;
    }

    .examReviewStorySection__cardList {
        gap: 16px;
    }
}

/* ===================== Brand Film [START] ===================== */

.brandFilmSection {
    position: relative;
    /* 브랜드 소개 페이지 가로 최대치를 꽉 채우고,
       그 아래에서는 브라우저 너비에 맞춰 자동으로 줄어든다 */
    width: 100%;
    /* style.css 의 전역 `section { padding: 0 16px }` 때문에 좌우에
       배경색(검정)이 띠처럼 드러나므로 해제한다 */
    padding: 0;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
    isolation: isolate;
}

.brandFilmSection__frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 */
    overflow: hidden;
}

.brandFilmSection__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.brandFilmSection__sound {
    position: absolute;
    right: clamp(12px, 1.6vw, 24px);
    bottom: clamp(12px, 1.6vw, 24px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8.8px 15.2px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-family: inherit;
    font-size: clamp(11.52px, 1vw, 13.6px);
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity .6s cubic-bezier(.22, 1, .36, 1),
        transform .6s cubic-bezier(.22, 1, .36, 1),
        background-color .25s ease,
        border-color .25s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.brandFilmSection.is-ready .brandFilmSection__sound {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.brandFilmSection__sound:hover,
.brandFilmSection__sound:focus-visible {
    background: rgba(81, 0, 202, 0.75);
    border-color: rgba(255, 255, 255, 0.8);
}

.brandFilmSection__soundIcon {
    position: relative;
    display: inline-block;
    width: 14.4px;
    height: 14.4px;
    flex: 0 0 auto;
    background: currentColor;
    clip-path: polygon(0 32%, 32% 32%, 62% 4%, 62% 96%, 32% 68%, 0 68%);
}

/* 음소거 상태에서는 아이콘에 사선을 얹는다 */
.brandFilmSection__soundIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 60%;
    width: 9.92px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: left center;
    transition: opacity .2s ease;
}

.brandFilmSection__sound.is-on .brandFilmSection__soundIcon::after {
    opacity: 0;
}

/* 브랜드 필름이 앞에 오면 히어로 섹션이 화면을 꽉 채울 필요가 없으므로
   상하 여백을 콘텐츠 기준으로 줄인다 (기본: min-height 100vh, 1024px 이하: height 100vh) */
.brandFilmSection + .heroStatsSection {
    min-height: 0;
    height: auto;
    padding: clamp(48px, 7vw, 176px) clamp(18px, 2vw, 28px);
}

@media (max-width: 767px) {
    .brandFilmSection__sound {
        padding: 7.2px 12px;
    }

    .brandFilmSection__soundText {
        display: none;
    }

    .brandFilmSection + .heroStatsSection {
        padding: clamp(40px, 9vw, 80px) 18px;
    }
}

/* ===================== Brand Film [END] ===================== */