@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700&display=swap");

/* ========================================
   공통 및 메인 스타일
======================================== */

:root {
    --header-height: 94px;
    --header-top-space: 12px;
    --side-padding: clamp(24px, 3.35vw, 58px);

    --nav-column-width: 128px;
    --nav-column-gap: 8px;
    --nav-shift-x: -66px;

    --mega-grid-left: 0px;

    --copy-line-x: calc(100vw - 420px);
    --copy-top: 108px;
    --copy-gap: clamp(15px, 1.25vw, 22px);
    --copy02-offset: 198px;
    --copy-line-fluid-height: 600px;

    --main-copy-01-scale: 1;
    --main-copy-02-scale: 1;
    --section02-visual-scale: 1;
    --section02-story-scale: 1;
    --section02-story-shift-y: clamp(64px, 7.4vh, 94px);
    --section02-decor-scale: 1;
    --section03-content-scale: 1;
    --floating-scale: 1;

    --black: #111111;
    --gold: #a27e5b;
    --copy-line-color: #6d6a61;

    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --line-ease: cubic-bezier(0.45, 0, 0.35, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-width: 320px;
    height: 100%;
    min-height: 100%;
}

html {
    overflow: hidden;
}

body {
    color: var(--black);
    background: #ffffff;

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

    word-break: keep-all;
    overflow: hidden;
}

body.is-loading {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    margin: 0;
    padding: 0;

    color: inherit;
    border: 0;
    background: none;

    font: inherit;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
}

/* ========================================
   풀페이지

   전체 컨테이너를 translate3d로 이동합니다.
======================================== */

.fullpage {
    --fullpage-offset: 0px;
    --fullpage-speed: 1600ms;

    position: relative;

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

    transform:
            translate3d(
                    0,
                    var(--fullpage-offset),
                    0
            );

    transition:
            transform
            var(--fullpage-speed)
            ease;

    will-change: transform;
    backface-visibility: hidden;
}

.fullpage.is-instant {
    transition: none;
}

.fullpage.is-moving {
    pointer-events: none;
}

.section {
    position: relative;

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

    overflow: hidden;
    isolation: isolate;
}

/* ========================================
   메인 1단
======================================== */

.main-section {
    background: #e7d9cf;
}

.main-section__background {
    position: absolute;
    z-index: -1;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.main-section__background-image {
    width: 100%;
    height: 100%;

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

    image-rendering: auto;

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

/* ========================================
   메인 카피
======================================== */

.main-copy {
    position: absolute;
    z-index: 2;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.main-copy__image--01 {
    position: absolute;

    top: var(--copy-top);

    right: calc(
            100vw -
            var(--copy-line-x) +
            var(--copy-gap)
    );

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;

    opacity: 0;
    filter: blur(4px);

    transform:
            translate3d(0, 25px, 0)
            scale(var(--main-copy-01-scale));

    transform-origin: right top;

    will-change:
            opacity,
            filter,
            transform;
}

.main-copy__line {
    position: absolute;

    top: var(--copy-top);
    left: var(--copy-line-x);

    width: 1px;

    height: min(
            var(--copy-line-fluid-height),
            calc(
                    100svh -
                    var(--copy-top) -
                    20px
            )
    );

    display: block;

    background: var(--copy-line-color);

    opacity: 0;

    transform: scaleY(0);
    transform-origin: top center;

    will-change:
            opacity,
            filter,
            transform;
}

.main-copy__image--02 {
    position: absolute;

    top: calc(
            var(--copy-top) +
            var(--copy02-offset)
    );

    left: calc(
            var(--copy-line-x) +
            var(--copy-gap)
    );

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;

    opacity: 0;
    filter: blur(4px);

    transform:
            translate3d(0, 26px, 0)
            scale(var(--main-copy-02-scale));

    transform-origin: left top;

    will-change:
            opacity,
            filter,
            transform;
}

/* ========================================
   메인 애니메이션
======================================== */

body.is-ready
.main-copy__image--01 {
    opacity: 1;
    filter: blur(0);

    transform:
            translate3d(0, 0, 0)
            scale(var(--main-copy-01-scale));

    transition:
            opacity 1.75s 0.25s ease,
            filter 1.9s 0.25s ease,
            transform 2s 0.25s var(--motion-ease);
}

body.is-ready
.main-copy__line {
    opacity: 1;
    transform: scaleY(1);

    transition:
            opacity 0.35s 0.8s ease,
            transform 2.8s 0.8s var(--line-ease);
}

body.is-ready
.main-copy__image--02 {
    opacity: 1;
    filter: blur(0);

    transform:
            translate3d(0, 0, 0)
            scale(var(--main-copy-02-scale));

    transition:
            opacity 2s 2.05s ease,
            filter 2.1s 2.05s ease,
            transform 2.2s 2.05s var(--motion-ease);
}

body.is-intro-complete
.main-copy__image--01,
body.is-intro-complete
.main-copy__image--02 {
    transition:
            opacity 0.3s ease,
            filter 0.3s ease,
            transform 0.38s var(--motion-ease);
}

/* ========================================
   좌측 하단 플로팅
======================================== */

.main-floating {
    position: fixed;
    z-index: 80;
    left: var(--side-padding);
    bottom: clamp(18px, 2.8vw, 46px);

    display: inline-grid;
    place-items: center;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform:
            translate3d(0, 16px, 0)
            scale(0.985);

    transition:
            visibility 0s linear 3.95s,
            opacity 1.05s 3.95s ease,
            transform 1.15s 3.95s
            cubic-bezier(0.1, 0.51, 0.55, 1);

    will-change:
            opacity,
            transform;
}

body.is-ready
.main-floating {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform:
            translate3d(0, 0, 0)
            scale(1);
}

.main-floating__visual {
    display: grid;
    place-items: center;

    transform:
            scale(var(--floating-scale));

    transform-origin: left bottom;

    transition:
            transform
            0.38s
            var(--motion-ease);
}

.main-floating__image {
    grid-column: 1;
    grid-row: 1;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;
}

.main-floating__bg {
    position: relative;
    z-index: 1;
}

.main-floating__line {
    position: relative;
    z-index: 2;

    transform-origin: center center;

    will-change: transform;
}

body.is-ready
.main-floating__line {
    animation:
            main-floating-line-rotate
            14s
            linear
            3.95s
            infinite;
}

@keyframes main-floating-line-rotate {
    from {
        transform: rotate(0deg);
    }

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

/* ========================================
   메인 2단
======================================== */

.section02 {
    --section02-bg-width: 0px;
    --section02-highend-left: 0px;

    background: #ffffff;
}

/* ========================================
   메인 2단 배경
======================================== */

.section02__visual {
    position: absolute;
    z-index: 1;

    left: 0;
    bottom: 0;

    width: max-content;
    height: max-content;

    transform:
            scale(var(--section02-visual-scale));

    transform-origin: left bottom;

    transition:
            transform
            0.4s
            var(--motion-ease);
}

.section02__frame {
    position: relative;

    width: max-content;
    height: max-content;

    overflow: hidden;
}

.section02__bg-image {
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;
    object-position: left bottom;

    image-rendering: auto;

    transform:
            translate3d(0, 0, 0)
            scale(1.1);

    transform-origin: left bottom;

    transition:
            transform
            2.5s
            0.2s
            ease;

    will-change: transform;
    backface-visibility: hidden;
}

.section02__visual.active
.section02__bg-image {
    transform:
            translate3d(0, 0, 0)
            scale(1);
}

/* ========================================
   메인 2단 HIGH-END
======================================== */

.section02__highend {
    position: absolute;
    z-index: 3;

    top:
            calc(
                    var(--header-height) -
                    2px
            );

    left:
            calc(
                    var(--section02-highend-left) +
                    18px
            );

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;

    transform: none !important;

    image-rendering: auto;
    backface-visibility: hidden;

    pointer-events: none;
}

/* ========================================
   메인 2단 카피 영역
======================================== */

.section02__story {
    position: absolute;
    z-index: 4;

    top:
            var(--header-height);

    right: 0;
    bottom: 0;

    left:
            var(--section02-bg-width);

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform:
            translate3d(
                    0,
                    var(--section02-story-shift-y),
                    0
            );

    transition:
            transform
            0.4s
            var(--motion-ease);

    pointer-events: none;
}

.section02__copy {
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;

    flex: 0 0 auto;

    image-rendering: auto;
    backface-visibility: hidden;

    will-change:
            opacity,
            filter,
            transform;
}

/* ========================================
   메인 2단 카피 01
======================================== */

.section02__copy--01 {
    opacity: 0;

    transform:
            translate3d(0, 48px, 0);

    transition:
            opacity
            1.2s
            0s
            ease,

            transform
            1.2s
            0s
            ease;
}

.section02__story.active
.section02__copy--01 {
    opacity: 1;
    filter: blur(0);

    transform:
            translate3d(0, 0, 0);

    transition:
            opacity
            1.2s
            0.2s
            ease,

            transform
            1.2s
            0.2s
            ease;
}

/* ========================================
   메인 2단 세로선
======================================== */

.section02__line {
    position: relative;

    width: 1px;
    height: 140px;

    margin:
            clamp(
                    20px,
                    1.8vw,
                    32px
            )
            0;

    display: block;
    flex: 0 0 140px;

    background: transparent;
}

.section02__line::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 1px;
    height: 100%;

    background: #000000;

    transform: scaleY(0);
    transform-origin: top center;

    transition:
            transform
            1.8s
            0s
            ease;

    will-change: transform;
}

.section02__story.active
.section02__line::after {
    transform: scaleY(1);

    transition:
            transform
            1.8s
            0.2s
            ease;
}

/* ========================================
   메인 2단 카피 02
======================================== */

.section02__copy--02 {
    opacity: 0;

    transform:
            translate3d(0, 48px, 0);

    transition:
            opacity
            1.2s
            0s
            ease,

            transform
            1.2s
            0s
            ease;
}

.section02__story.active
.section02__copy--02 {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);

    transition:
            opacity
            1.2s
            1.5s
            ease,

            transform
            1.2s
            1.5s
            ease;
}



/* ========================================
   메인 3단
======================================== */

.section03 {
    background: #111111;
}

.section03__background {
    position: absolute;
    z-index: -1;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.section03__background-image {
    width: 100%;
    height: 100%;

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

    image-rendering: auto;

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

.section03__vertical-heading {
    position: absolute;
    z-index: 2;

    top: 112px;
    left: 272px;

    display: flex;
    align-items: flex-start;

    gap: 28px;

    opacity: 0;
    filter: blur(2px);

    transform:
            translate3d(-48px, 0, 0);

    transition:
            opacity
            1.75s
            0s
            ease,

            filter
            1.85s
            0s
            ease,

            transform
            1.9s
            0s
            var(--motion-ease);

    pointer-events: none;

    will-change:
            opacity,
            filter,
            transform;
}

.section03__vertical-slot {
    position: relative;

    flex: 0 0 auto;
}

.section03__vertical-slot--eyebrow {
    width: 38px;
    height: 300px;
}

.section03__vertical-slot--title {
    width: 60px;
    height: 300px;
}

.section03__eyebrow,
.section03__title {
    position: absolute;

    top: 0;
    left: 0;

    color: #ffffff;

    white-space: nowrap;

    transform: rotate(90deg);

    transform-origin: left top;
}

.section03__eyebrow {
    font-family:
            "Noto Sans KR",
            sans-serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

.section03__title {
    color: #d9d8d7;

    font-family:
            "Roboto",
            sans-serif;

    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.section03__cards {
    position: absolute;
    z-index: 2;

    top: 175px;
    right: clamp(110px, 7vw, 150px);

    width: max-content;

    display: flex;
    align-items: flex-start;

    gap: 100px;
}

.section03__card {
    width: max-content;

    opacity: 0;

    transform:
            translate3d(0, 52px, 0);

    transition:
            opacity
            1.75s
            0s
            ease,

            transform
            2s
            0s
            var(--motion-ease);

    will-change:
            opacity,
            transform;
}

.section03__card-image {
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;

    image-rendering: auto;
    backface-visibility: hidden;
}

.section03__card-content {
    margin-top: 18px;
}

.section03__card-title {
    color: #ffffff;

    font-family:
            "Noto Sans KR",
            sans-serif;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.section03__card-meta {
    margin-top: 2px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;
}

.section03__card-description {
    color: #a27e5b;

    font-family:
            "Noto Sans KR",
            sans-serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.04em;

    white-space: nowrap;
}

.section03__card-description span {
    display: block;
}

.section03__arrow-link {
    --arrow-move-x: 0px;
    --arrow-move-y: 0px;
    --arrow-scale: 1;

    position: relative;

    width: 95px;
    height: 67px;

    display: flex;
    justify-content: flex-end;
    flex: 0 0 95px;

    border-radius: 50%;

    outline: none;
}

.section03__arrow-link::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: -52px;

    border-radius: 50%;
}

.section03__arrow-circle {
    position: relative;
    z-index: 1;

    width: 67px;
    height: 67px;

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

    border-radius: 50%;
    background: #a27e5b;

    transform:
            translate3d(
                    var(--arrow-move-x),
                    var(--arrow-move-y),
                    0
            )
            scale(var(--arrow-scale));

    transition:
            transform
            0.78s
            var(--motion-ease),

            background-color
            0.4s
            ease;

    will-change: transform;
}

.section03__arrow-icon {
    width: 58px;
    height: 18px;

    overflow: visible;

    fill: none;
    stroke: #ffffff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    shape-rendering: geometricPrecision;

    transform:
            translate3d(-17px, 0, 0);

    transition:
            transform
            0.82s
            var(--motion-ease);

    pointer-events: none;

    will-change: transform;
}

.section03__arrow-link:hover,
.section03__arrow-link:focus-visible,
.section03__arrow-link.is-magnetic-active {
    --arrow-scale: 1.055;
}

.section03__arrow-link:hover
.section03__arrow-icon,
.section03__arrow-link:focus-visible
.section03__arrow-icon,
.section03__arrow-link.is-magnetic-active
.section03__arrow-icon {
    transform:
            translate3d(-26px, 0, 0);
}

.section03__arrow-link:focus-visible::after {
    content: "";

    position: absolute;
    z-index: 2;
    inset: -5px;

    border:
            1px solid
            rgba(255, 255, 255, 0.8);

    border-radius: 50%;
}

.section03.is-active
.section03__vertical-heading {
    opacity: 1;
    filter: blur(0);

    transform:
            translate3d(0, 0, 0);

    transition-delay:
            1.35s,
            1.35s,
            1.35s;
}

.section03.is-active
.section03__card {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);
}

.section03.is-active
.section03__card:nth-child(1) {
    transition-delay:
            0.42s,
            0.42s;
}

.section03.is-active
.section03__card:nth-child(2) {
    transition-delay:
            0.62s,
            0.62s;
}

.section03.is-active
.section03__card:nth-child(3) {
    transition-delay:
            0.82s,
            0.82s;
}

/* ========================================
   메인 4단
======================================== */

.section04 {
    --section04-line-width: clamp(320px, 31.25vw, 600px);
    --section04-logo-max-width: clamp(210px, 15.625vw, 300px);

    background: #111111;
}

.section04__background {
    position: absolute;
    z-index: -1;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.section04__background-image {
    width: 100%;
    height: 100%;

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

    image-rendering: auto;

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

.section04__content {
    position: absolute;
    z-index: 2;
    inset: 0;

    padding:
            var(--header-height)
            clamp(42px, 5vw, 96px)
            0;

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

    pointer-events: none;
}

.section04__infra-title {
    width: max-content;
    max-width: 100%;

    display: grid;
    grid-template-columns:
    max-content
    var(--section04-line-width)
    max-content;
    align-items: center;

    column-gap: clamp(20px, 1.75vw, 34px);
}

.section04__copy {
    color: #ffffff;

    font-family:
            "Noto Sans KR",
            sans-serif;

    font-size: clamp(21px, 1.25vw, 24px);
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: -0.035em;

    white-space: nowrap;

    opacity: 0;
    filter: blur(3px);

    transform:
            translate3d(-36px, 0, 0);

    transition:
            opacity
            2.7s
            0s
            ease,

            filter
            2.55s
            0s
            ease,

            transform
            2.85s
            0s
            var(--motion-ease);

    will-change:
            opacity,
            filter,
            transform;
}

.section04__copy span {
    display: block;
}

.section04__line {
    position: relative;

    width: var(--section04-line-width);
    height: 1px;

    display: block;

    overflow: hidden;
}

.section04__line::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 100%;
    height: 1px;

    background: #94999e;

    transform:
            translateX(-50%)
            scaleX(0);

    transform-origin: center center;

    transition:
            transform
            2.45s
            0s
            var(--line-ease);

    will-change: transform;
}

.section04__logo {
    width: auto !important;
    height: auto !important;

    max-width: var(--section04-logo-max-width) !important;
    max-height: min(22vh, 230px) !important;

    object-fit: contain;

    opacity: 0;
    filter: blur(3px);

    transform:
            translate3d(36px, 0, 0);

    transition:
            opacity
            2.7s
            0s
            ease,

            filter
            2.55s
            0s
            ease,

            transform
            2.85s
            0s
            var(--motion-ease);

    image-rendering: auto;
    backface-visibility: hidden;

    will-change:
            opacity,
            filter,
            transform;
}

.section04.is-active
.section04__copy,
.section04.is-active
.section04__logo {
    opacity: 1;
    filter: blur(0);

    transform:
            translate3d(0, 0, 0);

    transition-delay:
            1.45s,
            1.45s,
            1.45s;
}

.section04.is-active
.section04__line::after {
    transform:
            translateX(-50%)
            scaleX(1);

    transition-delay: 1.45s;
}

/* ========================================
   PC 풀 반응형 보정
======================================== */

@media (min-width: 1401px) {
    .section02__story {
        transform:
                translate3d(
                        0,
                        var(--section02-story-shift-y),
                        0
                )
                scale(var(--section02-story-scale));

        transform-origin: center center;
    }

    .section03__vertical-heading {
        top: clamp(92px, 10.4vh, 112px);
        left: clamp(204px, 14.17vw, 272px);

        transform:
                translate3d(-48px, 0, 0)
                scale(var(--section03-content-scale));

        transform-origin: left top;
    }

    .section03.is-active
    .section03__vertical-heading {
        transform:
                translate3d(0, 0, 0)
                scale(var(--section03-content-scale));
    }

    .section03__cards {
        top: clamp(132px, 16.2vh, 175px);
        right: clamp(50px, 7vw, 150px);

        transform:
                scale(var(--section03-content-scale));

        transform-origin: right top;
    }

    .section04__content {
        padding-right: clamp(32px, 4.2vw, 82px);
        padding-left: clamp(32px, 4.2vw, 82px);
    }

    .section04__infra-title {
        column-gap: clamp(24px, 2.45vw, 47px);
    }
}

/* ========================================
   작은 데스크톱
======================================== */

@media (max-width: 1600px) {
    :root {
        --side-padding: 32px;
        --nav-column-width: 116px;
        --nav-column-gap: 6px;
        --nav-shift-x: -34px;
        --copy-top: 106px;
    }

    .section04 {
        --section04-line-width: clamp(300px, 29vw, 470px);
        --section04-logo-max-width: clamp(190px, 14vw, 250px);
    }

    .section04__copy {
        font-size: clamp(20px, 1.35vw, 23px);
    }
}


/* ========================================
   축소 화면 · 태블릿 가로
======================================== */

@media (max-width: 1400px) {
    :root {
        --header-height: 88px;
        --header-top-space: 10px;
        --side-padding:
                clamp(24px, 5vw, 64px);

        --copy-line-x: 61vw;

        --copy-top:
                clamp(118px, 14vh, 154px);

        --copy-gap:
                clamp(14px, 1.5vw, 21px);
    }

    html {
        height: auto;

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

        scroll-behavior: smooth;
    }

    body {
        height: auto;
        min-height: 100%;

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

    body.is-loading,
    body.is-site-menu-open,
    body.is-site-menu-closing {
        overflow: hidden;
    }

    .fullpage {
        min-height: auto;

        transform: none !important;
        transition: none !important;

        will-change: auto;
    }

    .fullpage.is-moving {
        pointer-events: auto;
    }

    .section {
        height: auto;

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

    .main-section {
        height: 100vh;
        height: 100svh;

        min-height: 620px;
    }

    .main-section__background-image {
        object-position: 54% center;
    }

    .main-copy__line {
        height: min(
                var(--copy-line-fluid-height),
                calc(
                        100svh -
                        var(--copy-top) -
                        26px
                )
        );
    }

    .section02 {
        min-height: 100vh;
        min-height: 100svh;

        padding-top:
                var(--header-height);

        display: grid;

        grid-template-columns:
      minmax(0, 56%)
      minmax(360px, 44%);
    }

    .section02__visual {
        position: relative;
        inset: auto;

        width: 100%;

        height:
                calc(
                        100svh -
                        var(--header-height)
                );

        min-height: 560px;

        transform: none;
    }

    .section02__frame {
        width: 100%;
        height: 100%;
    }

    .section02__bg-image {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

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

        transform:
                translate3d(0, 0, 0)
                scale(1.08);
    }

    .section02__visual.active
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1);
    }

    .section02__highend {
        top:
                clamp(6px, 1.4vh, 18px);

        left:
                calc(100% - 10px);

        width: auto !important;
        height: auto !important;

        max-width:
                min(34vw, 430px) !important;

        max-height:
                min(33vh, 300px) !important;

        object-fit: contain;

        transform:
                translateX(-50%)
                scale(
                        var(--section02-decor-scale)
                ) !important;
    }

    .section02__story {
        position: relative;
        inset: auto;

        width: 100%;
        min-width: 0;

        min-height:
                calc(
                        100svh -
                        var(--header-height)
                );

        padding:
                clamp(72px, 10vh, 118px)
                clamp(34px, 4.5vw, 76px)
                clamp(54px, 8vh, 96px);

        transform:
                translate3d(
                        0,
                        clamp(32px, 4vh, 54px),
                        0
                )
                scale(1);
    }

    .section02__copy {
        width: auto !important;
        height: auto !important;

        max-width:
                min(100%, 430px) !important;

        max-height: none !important;

        object-fit: contain;
    }

    .section02__line {
        height:
                clamp(96px, 13vh, 132px);

        flex-basis:
                clamp(96px, 13vh, 132px);
    }

    .section03 {
        min-height: max(100svh, 760px);
    }

    .section03__vertical-heading {
        top: calc(var(--header-height) + 28px);
        left: clamp(38px, 5vw, 72px);

        gap: clamp(18px, 2vw, 28px);
    }

    .section03__cards {
        top: calc(var(--header-height) + 72px);
        right: clamp(24px, 4vw, 56px);
        left: clamp(170px, 17vw, 230px);

        width: auto;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: clamp(24px, 3vw, 48px);
    }

    .section03__card {
        width: 100%;
        min-width: 0;
    }

    .section03__card-image {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain;
    }

    .section03__card-content {
        margin-top: clamp(12px, 1.4vw, 18px);
    }

    .section03__card-title {
        font-size: clamp(18px, 1.55vw, 22px);
    }

    .section03__card-meta {
        gap: clamp(10px, 1.5vw, 22px);
    }

    .section03__card-description {
        min-width: 0;

        font-size: clamp(14px, 1.2vw, 17px);
        white-space: normal;
    }

    .section03__arrow-link {
        width: 82px;
        flex-basis: 82px;
    }
}


@media (max-width: 1400px) {
    .section04__content {
        padding-right:
                clamp(26px, 4vw, 58px);

        padding-left:
                clamp(26px, 4vw, 58px);
    }

    .section04__infra-title {
        width: 100%;

        grid-template-columns:
      max-content
      minmax(180px, 1fr)
      max-content;

        column-gap:
                clamp(24px, 3vw, 42px);
    }

    .section04__line {
        width: 100%;
    }

    .section04__logo {
        max-width:
                min(24vw, 300px) !important;

        object-fit: contain;
    }
}

/* ========================================
   작은 노트북 · 태블릿
======================================== */

@media (max-width: 1100px) {
    :root {
        --header-height: 80px;
        --header-top-space: 8px;

        --side-padding:
                clamp(20px, 4vw, 42px);

        --copy-line-x: 58vw;

        --copy-top:
                clamp(108px, 13vh, 136px);
    }

    .main-section {
        min-height: 580px;
    }

    .section02 {
        grid-template-columns:
      minmax(0, 54%)
      minmax(330px, 46%);
    }

    .section02__story {
        padding-right:
                clamp(28px, 4vw, 48px);

        padding-left:
                clamp(28px, 4vw, 48px);
    }

    .section02__copy {
        max-width:
                min(100%, 360px) !important;
    }
}

/* ========================================
   태블릿 세로 이하
======================================== */

@media (max-width: 1000px) {
    :root {
        --copy-line-x: 56vw;

        --copy-top:
                clamp(104px, 12vh, 126px);

        --copy-gap: 14px;
    }

    .section02 {
        min-height: auto;

        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .section02__visual {
        width: 100%;

        height: 62vh;
        height: 62svh;

        min-height: 440px;
        max-height: 720px;
    }

    .section02__bg-image {
        object-position: center 70%;
    }

    .section02__highend {
        top: auto;
        bottom: 14px;
        left: 52%;

        max-width:
                min(58vw, 430px) !important;

        max-height:
                min(28vh, 250px) !important;

        transform:
                translate(-50%, 50%)
                scale(
                        var(--section02-decor-scale)
                ) !important;
    }

    .section02__story {
        min-height: 64vh;
        min-height: 64svh;

        padding:
                clamp(112px, 15vh, 150px)
                clamp(24px, 6vw, 64px)
                clamp(72px, 10vh, 110px);

        transform:
                translate3d(0, 24px, 0);
    }

    .section02__copy {
        max-width:
                min(82vw, 400px) !important;
    }

    .section03 {
        min-height: auto;
        padding-top: var(--header-height);
    }

    .section03__vertical-heading {
        top: calc(var(--header-height) + 24px);
        left: clamp(24px, 7vw, 56px);
    }

    .section03__cards {
        position: relative;

        top: auto;
        right: auto;
        left: auto;

        width: min(100%, 500px);

        margin: 370px auto 0;
        padding: 0 clamp(24px, 6vw, 54px) 82px;

        grid-template-columns: 1fr;
        gap: clamp(48px, 8vw, 72px);
    }

    .section03__card-title {
        font-size: 22px;
    }

    .section03__card-description {
        font-size: 17px;
    }
}


@media (max-width: 1000px) {
    .section04__content {
        padding:
                calc(var(--header-height) + 36px)
                clamp(24px, 7vw, 54px)
                42px;
    }

    .section04__infra-title {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 30px;
    }

    .section04__copy {
        font-size:
                clamp(18px, 4.4vw, 24px);

        text-align: center;
    }

    .section04__line {
        width:
                min(600px, 76vw);
    }

    .section04__logo {
        max-width:
                min(68vw, 300px) !important;
    }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {
    :root {
        --header-height: 72px;
        --header-top-space: 7px;
        --side-padding: 18px;

        --copy-line-x: 50vw;

        --copy-top:
                clamp(108px, 15vh, 142px);

        --copy-gap: 11px;
    }

    .main-section {
        min-height: 560px;
    }

    .main-section__background-image {
        object-position: 62% center;
    }

    .main-copy__line {
        height: min(
                var(--copy-line-fluid-height),
                calc(
                        100svh -
                        var(--copy-top) -
                        18px
                )
        );
    }

    .main-floating {
        left: 14px;
        bottom: 12px;
    }

    .section02__visual {
        height: 56vh;
        height: 56svh;

        min-height: 390px;
    }

    .section02__highend {
        max-width:
                min(68vw, 360px) !important;

        max-height: 220px !important;
    }

    .section02__story {
        min-height: 60vh;
        min-height: 60svh;

        padding:
                clamp(96px, 14vh, 126px)
                22px
                clamp(62px, 9vh, 88px);

        transform:
                translate3d(0, 18px, 0);
    }

    .section02__copy {
        max-width:
                min(80vw, 340px) !important;
    }

    .section02__line {
        height: 96px;
        flex-basis: 96px;

        margin: 20px 0;
    }
}

@media (max-width: 480px) {
    :root {
        --side-padding: 15px;
        --copy-line-x: 50vw;

        --copy-top:
                clamp(100px, 14vh, 126px);

        --copy-gap: 9px;
    }

    .main-section {
        min-height: 540px;
    }

    .section02__visual {
        height: 52vh;
        height: 52svh;

        min-height: 350px;
    }

    .section02__highend {
        max-width:
                min(72vw, 320px) !important;

        max-height: 190px !important;
    }

    .section02__story {
        padding-right: 18px;
        padding-left: 18px;
    }

    .section02__copy {
        max-width:
                min(84vw, 310px) !important;
    }
}

/* ========================================
   낮은 PC 화면
======================================== */

@media
(max-height: 760px)
and
(min-width: 1401px) {
    :root {
        --copy-top: 102px;
    }

    .main-copy__line {
        height: min(
                var(--copy-line-fluid-height),
                calc(
                        100svh -
                        var(--copy-top) -
                        15px
                )
        );
    }

    .main-copy__image--02 {
        top:
                calc(
                        var(--copy-top) +
                        178px
                );
    }

    .section02__story {
        --section02-story-shift-y: 44px;
    }

    .section03__vertical-heading {
        top: 82px;
    }

    .section03__cards {
        top: 112px;
    }

    .section04__content {
        padding-top: calc(var(--header-height) + 12px);
    }
}


/* ========================================
   모션 최소화
======================================== */

@media
(prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:
                0.01ms !important;

        animation-iteration-count:
                1 !important;

        transition-duration:
                0.01ms !important;

        transition-delay:
                0s !important;

        scroll-behavior:
                auto !important;
    }

    .main-copy__image {
        opacity: 1;
        filter: none;
    }

    .main-copy__image--01 {
        transform:
                translate3d(0, 0, 0)
                scale(
                        var(--main-copy-01-scale)
                );
    }

    .main-copy__image--02 {
        transform:
                translate3d(0, 0, 0)
                scale(
                        var(--main-copy-02-scale)
                );
    }

    .main-copy__line {
        opacity: 1;
        transform: scaleY(1);
    }

    .main-floating {
        visibility: visible;
        opacity: 1;

        pointer-events: auto;

        transform:
                translate3d(0, 0, 0)
                scale(1);
    }

    .main-floating__line {
        animation: none !important;
    }

    .section02__bg-image {
        transition: none !important;

        transform:
                translate3d(0, 0, 0)
                scale(1);
    }

    .section02__copy--01,
    .section02__copy--02 {
        opacity: 1;
        filter: none;

        transition: none !important;

        transform:
                translate3d(0, 0, 0);
    }

    .section02__line::after {
        height: 100%;

        transition: none !important;

        transform: scaleY(1);
    }

    .section03__vertical-heading,
    .section03__card {
        opacity: 1;
        filter: none;

        transition: none !important;

        transform:
                translate3d(0, 0, 0);
    }

    .section03__card-image {
        transition: none !important;

        transform:
                translate3d(0, 0, 0)
                scale(1) !important;
    }

    .section03__arrow-circle {
        transform: none !important;
    }

    .section03__arrow-icon {
        transform:
                translate3d(-13px, 0, 0) !important;
    }

    .section04__copy,
    .section04__logo {
        opacity: 1;
        filter: none;

        transition: none !important;

        transform:
                translate3d(0, 0, 0);
    }

    .section04__line::after {
        transition: none !important;

        transform:
                translateX(-50%)
                scaleX(1);
    }

}
/* ========================================
   최종 4단 구성
   메인04 비주얼과 푸터를 하나의 풀페이지 화면으로 묶습니다.
======================================== */

.section04 {
    --section04-motion-delay: 1.12s;
    --section04-side-delay: calc(var(--section04-motion-delay) + 0.2s);

    display: flex;
    flex-direction: column;

    background: #050505;
}

.section04__visual {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 0;
    flex: 1 1 auto;

    overflow: hidden;
    isolation: isolate;
}

.section04__visual .section04__background {
    position: absolute;
    z-index: 0;
    inset: 0;

    width: 100%;
    height: 100%;
}

.section04__visual .section04__background-image {
    width: 100%;
    height: 100%;

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

.section04__visual .section04__content {
    position: absolute;
    z-index: 2;
    inset: 0;

    padding:
            var(--header-height)
            clamp(42px, 5vw, 96px)
            0;

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

.section04__copy,
.section04__logo {
    opacity: 0;
    filter: none;

    transition:
            opacity
            1.2s
            var(--section04-side-delay)
            ease,

            transform
            1.2s
            var(--section04-side-delay)
            cubic-bezier(0.22, 1, 0.36, 1);
}

.section04__copy {
    transform: translate3d(-32px, 0, 0);
}

.section04__logo {
    transform: translate3d(32px, 0, 0);
}

.section04__line::after {
    transition:
            transform
            1.8s
            var(--section04-motion-delay)
            cubic-bezier(0.45, 0, 0.35, 1);
}

.section04.is-active .section04__copy,
.section04.is-active .section04__logo {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition-delay:
            var(--section04-side-delay),
            var(--section04-side-delay);
}

.section04.is-active .section04__line::after {
    transform:
            translateX(-50%)
            scaleX(1);

    transition-delay:
            var(--section04-motion-delay);
}

/* ========================================
   메인04 + 푸터 반응형
======================================== */

@media (max-width: 1600px) {
    .section04__visual .section04__content {
        padding-right: clamp(32px, 4vw, 70px);
        padding-left: clamp(32px, 4vw, 70px);
    }
}

@media (max-width: 1400px) {
    .section04 {
        min-height: 100svh;
        overflow: visible;
    }

    .section04__visual {
        height: clamp(520px, 68svh, 760px);
        min-height: clamp(520px, 68svh, 760px);
        flex: 0 0 auto;
    }

    .section04__visual .section04__content {
        padding:
                var(--header-height)
                clamp(26px, 4vw, 58px)
                0;
    }
}

@media (max-width: 900px) {
    .section04__visual {
        height: 620px;
        min-height: 620px;
    }

    .section04__infra-title {
        width: min(620px, 100%);

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 21px;
    }

    .section04__copy {
        text-align: center;
        white-space: normal;
    }

    .section04__line {
        width: min(600px, 82vw);
    }

    .section04__logo {
        max-width: min(300px, 52vw) !important;
    }
}

@media (max-width: 600px) {
    .section04__visual {
        height: 560px;
        min-height: 560px;
    }

    .section04__infra-title {
        gap: 18px;
    }

    .section04__copy {
        font-size: 19px;
        line-height: 1.38;
    }

    .section04__line {
        width: min(600px, 78vw);
    }

    .section04__logo {
        max-width: min(270px, 58vw) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section04__copy,
    .section04__logo,
    .section04__line::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인04 / 푸터 분리 최종 보정
   메인04는 한 화면을 단독으로 사용하고,
   다음 풀페이지 섹션에서 푸터가 표시됩니다.
======================================== */

.section04 {
    --section04-motion-delay: 1.05s;
    --section04-side-delay: calc(var(--section04-motion-delay) + 0.14s);

    display: block;

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

    background: #050505;
    overflow: hidden;
}

.section04__visual {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 100%;
    flex: none;

    overflow: hidden;
}

.section04__visual .section04__background,
.section04__visual .section04__background-image {
    width: 100%;
    height: 100%;
}

.section04__visual .section04__background-image {
    object-fit: cover;
    object-position: center center;
}

.section04__copy,
.section04__logo {
    opacity: 0;
    filter: none;

    transition:
            opacity
            2.85s
            var(--section04-side-delay)
            cubic-bezier(0.22, 1, 0.36, 1),

            transform
            2.9s
            var(--section04-side-delay)
            cubic-bezier(0.22, 1, 0.36, 1);
}

.section04__copy {
    transform: translate3d(-34px, 0, 0);
}

.section04__logo {
    transform: translate3d(34px, 0, 0);
}

.section04__line::after {
    transition:
            transform
            2.45s
            var(--section04-motion-delay)
            cubic-bezier(0.45, 0, 0.35, 1);
}

.section04.is-active .section04__copy,
.section04.is-active .section04__logo {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.section04.is-active .section04__line::after {
    transform:
            translateX(-50%)
            scaleX(1);
}

@media (max-width: 1400px) {
    .section04,
    .section04__visual {
        height: 100svh;
        min-height: 620px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section04__copy,
    .section04__logo,
    .section04__line::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   요청 반영 최종 보정
   - 메인02 카피02 한 단계 더 앞당김
   - 메인03 세로 타이틀을 카드 이미지 상단선과 정렬
======================================== */

.section02__story.active
.section02__copy--02 {
    transition:
            opacity 1.2s 1.15s ease,
            transform 1.2s 1.15s ease;
}

@media (min-width: 1401px) {
    .section03__vertical-heading,
    .section03__cards {
        top: clamp(132px, 16.2vh, 175px);
    }
}

@media (min-width: 901px) and (max-width: 1400px) {
    .section03__vertical-heading,
    .section03__cards {
        top: calc(var(--header-height) + 72px);
    }
}

@media (max-height: 760px) and (min-width: 1401px) {
    .section03__vertical-heading,
    .section03__cards {
        top: 112px;
    }
}

/* ========================================
   메인 4단 complex_tit 모션
======================================== */

/* complex_tit: 선은 왼쪽에서 오른쪽으로 그어지고 양옆 요소는 0.2초 뒤 등장합니다. */
.section04__copy {
    line-height: 1.12;

    opacity: 0;
    filter: none;
    transform: translate3d(-3rem, 0, 0);

    transition:
            opacity 1.2s 0.2s ease,
            transform 1.2s 0.2s ease;

    will-change: opacity, transform;
}

.section04__logo {
    opacity: 0;
    filter: none;
    transform: translate3d(3rem, 0, 0);

    transition:
            opacity 1.2s 0.2s ease,
            transform 1.2s 0.2s ease;

    will-change: opacity, transform;
}

.section04__line {
    overflow: hidden;
}

.section04__line::after {
    left: 0;
    right: auto;

    width: 0;

    transform: none;
    transform-origin: left center;

    transition:
            width 2.1s 0s ease;

    will-change: width;
}

.section04.is-active .section04__copy,
.section04.is-active .section04__logo {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    transition:
            opacity 1.2s 0.2s ease,
            transform 1.2s 0.2s ease;
}

.section04.is-active .section04__line::after {
    width: 100%;
    transform: none;

    transition:
            width 2.1s 0s ease;
}

@media (max-width: 900px) {
    .section04__copy {
        transform: translate3d(0, -3rem, 0);
    }

    .section04__logo {
        transform: translate3d(0, 3rem, 0);
    }

    .section04.is-active .section04__copy,
    .section04.is-active .section04__logo {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section04__copy,
    .section04__logo,
    .section04__line::after,
    .section04.is-active .section04__copy,
    .section04.is-active .section04__logo,
    .section04.is-active .section04__line::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인 4단 재진입 애니메이션 초기화
   푸터에서 위로 돌아올 때 첫 프레임을 확실히 초기 상태로 고정합니다.
======================================== */

.section04.is-motion-reset
.section04__copy {
    opacity: 0 !important;
    transform: translate3d(-3rem, 0, 0) !important;
    transition: none !important;
}

.section04.is-motion-reset
.section04__logo {
    opacity: 0 !important;
    transform: translate3d(3rem, 0, 0) !important;
    transition: none !important;
}

.section04.is-motion-reset
.section04__line::after {
    width: 0 !important;
    transform: none !important;
    transition: none !important;
}

@media (max-width: 900px) {
    .section04.is-motion-reset
    .section04__copy {
        transform: translate3d(0, -3rem, 0) !important;
    }

    .section04.is-motion-reset
    .section04__logo {
        transform: translate3d(0, 3rem, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section02__bg-image,
    .section02__highend,
    .section02__copy--01,
    .section02__line::after,
    .section02__copy--02,
    .section02.is-visual-active .section02__bg-image,
    .section02.is-content-active .section02__highend,
    .section02.is-content-active .section02__copy--01,
    .section02.is-content-active .section02__line::after,
    .section02.is-content-active .section02__copy--02 {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인 3단 텍스트 렌더링 선명도 보정
======================================== */

.section03__eyebrow,
.section03__title,
.section03__card-title,
.section03__card-description {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.section03.is-active
.section03__vertical-heading {
    filter: none;
    transform: none;
    will-change: auto;
}

.section03.is-active
.section03__card {
    transform: none;
    will-change: auto;
}

/* ========================================
   메인 2단 카피02 텍스트 전환
   - 기존 이미지 대신 실제 텍스트 사용
   - 세로선과 동일한 0.2초 지연으로 함께 페이드업
======================================== */

.section02__copy--02 {
    width: min(100%, 620px) !important;
    height: auto !important;

    max-width: 620px !important;
    max-height: none !important;

    position: relative;
    top: -18px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #231f20;
    text-align: center;

    opacity: 0;

    transform:
            translate3d(0, 48px, 0);

    transition:
            opacity 1.2s 0s ease,
            transform 1.2s 0s ease;
}

.section02__copy02-title {
    margin: 0;

    color: #231f20;

    font-family:
            "Noto Sans KR",
            "Noto Sans",
            Arial,
            sans-serif;

    font-size: 35px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.045em;

    white-space: nowrap;
}

.section02__copy02-light {
    font-weight: 300;
}

.section02__copy02-regular {
    font-weight: 700;
}

.section02__copy02-description {
    width: 100%;
    margin-top: 30px;

    color: #58595b;
    text-align: left;

    font-family:
            "Noto Sans KR",
            "Noto Sans",
            Arial,
            sans-serif;

    font-size: 21px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.035em;
}

.section02__copy02-description span {
    display: block;
}

.section02__story.active
.section02__copy--02 {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);

    transition:
            opacity 1.2s 0.2s ease,
            transform 1.2s 0.2s ease;
}

@media (min-width: 1401px) {
    .section02__highend {
        width: 687px !important;
        height: 239px !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: none;
        filter: none;
        transform: none !important;

        image-rendering: auto;
        backface-visibility: visible;
        will-change: auto;
    }
}

@media (max-width: 1400px) {
    .section02__copy--02 {
        top: -14px;

        width: min(100%, 560px) !important;
        max-width: 560px !important;
    }

    .section02__copy02-title {
        font-size: clamp(29px, 2.5vw, 35px);
    }

    .section02__copy02-description {
        margin-top: clamp(24px, 2.6vw, 30px);
        font-size: clamp(18px, 1.65vw, 21px);
    }
}

@media (max-width: 767px) {
    .section02__copy--02 {
        top: -10px;

        width: 100% !important;
        max-width: 100% !important;
    }

    .section02__copy02-title {
        font-size: clamp(24px, 7vw, 31px);
        white-space: normal;
    }

    .section02__copy02-description {
        margin-top: 24px;
        font-size: clamp(16px, 4.2vw, 19px);
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section02__copy--02,
    .section02__story.active
    .section02__copy--02 {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인 2단 카피 최종 보정
   - 카피01: 위치 이동 없는 제자리 페이드
   - 카피02: 핵심 단어 500 / 나머지 Light 300
   - 설명 문구: 제목 첫 글자와 같은 왼쪽 기준선
======================================== */

.section02__copy--01 {
    opacity: 0;
    filter: none;
    transform: none;

    transition:
            opacity
            1.2s
            0s
            ease;

    will-change: opacity;
}

.section02__story.active
.section02__copy--01 {
    opacity: 1;
    filter: none;
    transform: none;

    transition:
            opacity
            1.2s
            0.2s
            ease;
}

.section02__copy--02 {
    width: max-content !important;
    max-width: min(620px, 100%) !important;

    align-items: flex-start;
    text-align: left;
}

.section02__copy02-title {
    width: auto;
    font-weight: 300;
    text-align: left;
}

.section02__copy02-light {
    font-weight: 300;
}

.section02__copy02-regular {
    font-weight: 700;
}

.section02__copy02-description {
    width: auto;
    align-self: flex-start;
    text-align: left;
}

/* ========================================
   메인 3단 카드 등장 모션 최종 보정
   - 기존보다 길고 차분하게 순차 등장
======================================== */

.section03__card {
    opacity: 0;

    transform:
            translate3d(0, 42px, 0);

    transition:
            opacity
            2.1s
            0s
            ease,

            transform
            2.35s
            0s
            var(--motion-ease);

    will-change:
            opacity,
            transform;
}

.section03.is-active
.section03__card {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);
}

.section03.is-active
.section03__card:nth-child(1) {
    transition-delay:
            0.55s,
            0.55s;
}

.section03.is-active
.section03__card:nth-child(2) {
    transition-delay:
            0.82s,
            0.82s;
}

.section03.is-active
.section03__card:nth-child(3) {
    transition-delay:
            1.09s,
            1.09s;
}

@media (max-width: 1400px) {
    .section02__copy--02 {
        width: min(100%, 560px) !important;
        max-width: 560px !important;
    }
}

@media (max-width: 767px) {
    .section02__copy--02 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   요청 반영 최종 타이밍 보정
   - HIGH-END: 카피01과 동일한 제자리 페이드
   - 메인3 세로 제목: 이전 지연값으로 복원
======================================== */

.section02__highend {
    opacity: 0;
    filter: none;

    transition:
            opacity
            1.2s
            0.2s
            ease;

    will-change: opacity;
}

.section02.is-active
.section02__highend {
    opacity: 1;
}

.section03.is-active
.section03__vertical-heading {
    transition-delay:
            1.35s,
            1.35s,
            1.35s;
}

@media (prefers-reduced-motion: reduce) {
    .section02__highend,
    .section02.is-active
    .section02__highend {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인 2단 우측 콘텐츠 위치 최종 보정
   - PC 반응형 구간에서도 카피 묶음을 기존보다 아래로 배치
======================================== */

@media (min-width: 768px) and (max-width: 1400px) {
    .section02__story {
        transform:
                translate3d(
                        0,
                        clamp(50px, 6vh, 72px),
                        0
                )
                scale(1);
    }
}


/* ========================================
   요청 반영 최종 보정
   - 메인02 HIGH-END와 카피02 시작을 소폭 지연
======================================== */

.section02__highend {
    transition-delay: 0.45s;
}

.section02__story.active
.section02__copy--02 {
    transition:
            opacity 1.2s 0.45s ease,
            transform 1.2s 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .section02__highend,
    .section02__story.active
    .section02__copy--02 {
        transition-delay: 0s !important;
    }
}

/* ========================================
   PC 메인 3단 화살표 위치 최종 보정
   - 원과 화살표를 카드 이미지 우측 끝선 안쪽으로 이동
   - 화살표 가로선을 설명 문장 첫 줄 중심선에 정렬
======================================== */

@media (min-width: 1401px) {
    .section03__card:nth-child(1) {
        width: 336px;
    }

    .section03__card:nth-child(2) {
        width: 337px;
    }

    .section03__card:nth-child(3) {
        width: 338px;
    }

    .section03__card-content,
    .section03__card-meta {
        width: 100%;
    }

    .section03__card-meta {
        align-items: flex-start;
        gap: 6px;
    }

    .section03__card-description {
        min-width: 0;
    }

    .section03__arrow-link {
        width: 67px;
        height: 67px;
        flex: 0 0 67px;

        margin-top: -22px;
        margin-right: 8px;
        margin-left: auto;
    }
}

/* ========================================
   반응형 이미지 picture 요소
======================================== */

.main-section__background-picture,
.section03__background-picture,
.section04__background-picture {
    display: block;

    width: 100%;
    height: 100%;
}

.section02__background-picture {
    display: block;

    width: max-content;
    height: max-content;
}

.section02__copy-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: none;
}

@media (max-width: 1400px) {
    .section02__background-picture {
        width: 100%;
        height: 100%;
    }
}

/* ========================================
   모바일 메인 전용 이미지·타이포 보정
======================================== */

@media (max-width: 767px) {
    .main-section__background-image,
    .section02__bg-image,
    .section03__background-image,
    .section04__background-image {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: cover;
    }

    .main-section__background-image {
        object-position: center center;
    }

    .section02__bg-image {
        object-position: center center;
    }

    .section03__background-image,
    .section04__background-image {
        object-position: center center;
    }

    .section02__highend {
        bottom: 10px;
        left: 50%;

        width: auto !important;
        height: auto !important;

        max-width: min(82vw, 340px) !important;
        max-height: none !important;

        object-fit: contain;

        transform:
                translate(-50%, 50%) !important;
    }

    .section02__story {
        min-height: 58svh;

        padding:
                clamp(86px, 12vh, 108px)
                22px
                clamp(54px, 8vh, 76px);

        transform: none;
    }

    .section02__copy--01 {
        width: min(78vw, 300px) !important;
        max-width: 300px !important;
    }

    .section02__copy-image {
        width: 100%;
        height: auto;
    }

    .section02__line {
        height: 76px;
        flex-basis: 76px;

        margin: 16px 0;
    }

    .section02__copy--02 {
        top: -6px;

        width: min(100%, 330px) !important;
        max-width: 330px !important;
    }

    .section02__copy02-title {
        font-size: clamp(22px, 6.1vw, 27px);
        line-height: 1.24;
        letter-spacing: -0.055em;
    }

    .section02__copy02-description {
        margin-top: 20px;

        font-size: clamp(14px, 3.85vw, 16px);
        line-height: 1.55;
        letter-spacing: -0.04em;
    }

    .section03__vertical-heading {
        top: calc(var(--header-height) + 20px);
        left: 22px;

        gap: 16px;
    }

    .section03__vertical-slot--eyebrow {
        width: 30px;
        height: 230px;
    }

    .section03__vertical-slot--title {
        width: 46px;
        height: 250px;
    }

    .section03__eyebrow {
        font-size: 14px;
    }

    .section03__title {
        font-size: 44px;
    }

    .section03__cards {
        width: min(100%, 430px);

        margin-top: 310px;
        padding:
                0
                22px
                68px;

        gap: 48px;
    }

    .section03__card-content {
        margin-top: 14px;
    }

    .section03__card-title {
        font-size: 19px;
    }

    .section03__card-meta {
        gap: 10px;
    }

    .section03__card-description {
        font-size: 14px;
        line-height: 1.45;
    }

    .section03__arrow-link {
        width: 72px;
        height: 58px;
        flex-basis: 72px;
    }

    .section03__arrow-circle {
        width: 58px;
        height: 58px;
    }

    .section03__arrow-icon {
        width: 50px;
        height: 16px;

        transform: translate3d(-14px, 0, 0);
    }

    .section04__content {
        padding:
                calc(var(--header-height) + 28px)
                22px
                34px;
    }

    .section04__infra-title {
        gap: 18px;
    }

    .section04__copy {
        font-size: clamp(16px, 4.6vw, 19px);
        line-height: 1.42;
    }

    .section04__line {
        width: min(76vw, 430px);
    }

    .section04__logo {
        max-width: min(58vw, 250px) !important;
    }
}

@media (max-width: 480px) {
    .section02__visual {
        height: 54svh;
        min-height: 360px;
    }

    .section02__story {
        padding-right: 18px;
        padding-left: 18px;
    }

    .section02__copy--01 {
        width: min(80vw, 280px) !important;
    }

    .section02__copy--02 {
        max-width: 310px !important;
    }

    .section03__cards {
        margin-top: 292px;
        padding-right: 18px;
        padding-left: 18px;
    }
}

/* ========================================
   모바일 전용 최종 보정
   - 767px 이하에서만 적용
   - PC / 태블릿 스타일에는 영향 없음
======================================== */

@media (max-width: 767px) {
    :root {
        /* 메인01 카피 전체를 기존보다 우측·하단으로 이동 */
        --copy-line-x: 56vw;
        --copy-top: clamp(120px, 16.5vh, 148px);
        --copy-gap: 12px;

        /* 이미지로 제작된 세로 카피의 글자 크기를 소폭 확대 */
        --main-copy-01-scale: 1.08;
        --main-copy-02-scale: 1.08;
    }

    /* 모바일에서는 메인 플로팅을 노출하지 않음 */
    .main-floating,
    body.is-ready .main-floating,
    body:not(.is-footer-section) .main-floating {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
    }

    /* 메인01 세로선은 기존보다 부드럽게 보이도록 투명도 적용 */
    .main-copy__line {
        background: var(--copy-line-color);
    }

    body.is-ready .main-copy__line {
        opacity: 0.62;
    }

    /* 메인01과 메인02 사이에 별도 여백이 생기지 않도록 유지 */
    .section02 {
        margin-top: 0;
        padding-top: 0 !important;
    }

    /* 메인02 비주얼 우측에만 얇은 흰 여백 확보 */
    .section02__visual {
        width: calc(100% - 16px);
        margin-top: 0;
        margin-right: 16px;
        margin-left: 0;
        overflow: visible;
    }

    .section02__frame,
    .section02__background-picture {
        width: 100%;
        height: 100%;
    }

    .section02__bg-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center center;
    }

    /* HIGH-END 이미지를 현재보다 아래로 배치 */
    .section02__highend {
        top: auto;
        right: auto;
        bottom: -8px;
        left: 50%;

        max-width: min(82vw, 340px) !important;

        transform: translate(-50%, 62%) !important;
    }

    /* 메인02 카피01·세로선·카피02가 같은 화면 중심축을 사용 */
    .section02__story {
        width: 100%;
        padding-right: 28px;
        padding-left: 28px;
        align-items: center;
    }

    .section02__copy--01,
    .section02__line,
    .section02__copy--02 {
        align-self: center;
        margin-right: auto;
        margin-left: auto;
    }

    .section02__copy--01 {
        width: min(calc(100vw - 64px), 300px) !important;
        max-width: 300px !important;
    }

    .section02__copy--02 {
        width: min(calc(100vw - 64px), 330px) !important;
        max-width: 330px !important;
        align-items: flex-start;
    }

    .section02__copy02-title,
    .section02__copy02-description {
        width: 100%;
        text-align: left;
    }

    /* 모바일 메인03 배경은 상단을 기준으로 표시해 위쪽 잘림 방지 */
    .section03__background,
    .section03__background-picture,
    .section03__background-image {
        width: 100%;
        height: 100%;
    }

    .section03__background-image {
        object-fit: cover;
        object-position: center top !important;
    }

    /* 리쉐스302 세대안내 / UNIT PLAN 문구를 우측으로 이동하고 축소 */
    .section03__vertical-heading {
        top: calc(var(--header-height) + 18px);
        right: 24px;
        left: auto !important;

        gap: 10px;
    }

    .section03__vertical-slot--eyebrow {
        width: 24px;
        height: 205px;
    }

    .section03__vertical-slot--title {
        width: 36px;
        height: 220px;
    }

    .section03__eyebrow {
        font-size: 12px;
    }

    .section03__title {
        font-size: 34px;
    }

    /* 모바일 전용 카드 이미지 경로는 index.php의 m_main03_img01~03 사용 */
    .section03__card-picture {
        display: block;
        width: 100%;
    }

    .section03__card-picture .section03__card-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .section03__cards {
        width: min(100%, 430px);
        padding-right: 32px;
        padding-left: 32px;
    }

    /* 화살표 선의 중심을 설명 문장 첫 줄 중심에 맞춤 */
    .section03__card-meta {
        align-items: flex-start;
    }

    .section03__arrow-link {
        width: 58px;
        height: 48px;
        flex: 0 0 58px;
        margin-top: -14px;
        margin-left: auto;
    }

    .section03__arrow-circle {
        width: 48px;
        height: 48px;
    }

    .section03__arrow-icon {
        width: 42px;
        height: 14px;
        transform: translate3d(-10px, 0, 0);
    }
}

@media (max-width: 480px) {
    :root {
        --copy-line-x: 57vw;
        --copy-top: clamp(114px, 15.5vh, 134px);
        --copy-gap: 10px;
        --main-copy-01-scale: 1.05;
        --main-copy-02-scale: 1.05;
    }

    .section02__visual {
        width: calc(100% - 14px);
        margin-right: 14px;
    }

    .section02__story {
        padding-right: 24px;
        padding-left: 24px;
    }

    .section02__copy--02 {
        width: min(calc(100vw - 48px), 320px) !important;
        max-width: 320px !important;
    }

    .section03__vertical-heading {
        right: 20px;
    }

    .section03__cards {
        padding-right: 28px;
        padding-left: 28px;
    }
}

/* ========================================
   모바일 메인 최종 위치 보정 + PC 서브페이지 플로팅 숨김
   - 모바일 요청은 767px 이하에만 적용
======================================== */

@media (max-width: 767px) {
    :root {
        /* 메인01 카피를 더 크게, 더 우측·하단으로 배치 */
        --copy-line-x: 60vw;
        --copy-top: clamp(138px, 19vh, 168px);
        --copy-gap: 13px;
        --main-copy-01-scale: 1.16;
        --main-copy-02-scale: 1.16;

        /* 기존 모바일 우측 여백(14~16px)의 약 7배 */
        --section02-mobile-right-gap: clamp(98px, 28.7vw, 112px);
    }

    /* 메인01 세로선을 현재보다 조금 더 길게 */
    .main-copy__line {
        height: calc(100svh - var(--copy-top) + 24px);
    }

    /* 메인02 이미지 우측 여백 확대 */
    .section02__visual {
        width: calc(100% - var(--section02-mobile-right-gap));
        margin-right: var(--section02-mobile-right-gap);
        margin-left: 0;
    }

    /* 선택의 기준 카피 묶음을 화면 중앙에 배치 */
    .section02__story {
        width: 100%;
        padding-right: 24px;
        padding-left: 24px;
        align-items: center;
    }

    .section02__copy--02 {
        width: max-content !important;
        max-width: calc(100vw - 48px) !important;
        align-self: center;
        margin-right: auto;
        margin-left: auto;
    }

    .section02__copy02-title,
    .section02__copy02-description {
        width: max-content !important;
        max-width: 100%;
        align-self: center;
        text-align: left;
    }

    /* UNIT PLAN / 리쉐스302 세대안내를 더 위·우측으로 이동 */
    .section03__vertical-heading {
        top: calc(var(--header-height) + 4px);
        right: 8px;
        left: auto !important;
    }

    /* UNIT PLAN 하단 카드도 위로 올리고 좌우 여백 확대 */
    .section03__cards {
        margin-top: 252px;
        padding-right: 42px;
        padding-left: 42px;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-line-x: 60vw;
        --copy-top: clamp(132px, 18vh, 156px);
        --copy-gap: 11px;
        --main-copy-01-scale: 1.14;
        --main-copy-02-scale: 1.14;
    }

    .section02__story {
        padding-right: 20px;
        padding-left: 20px;
    }

    .section02__copy--02 {
        max-width: calc(100vw - 40px) !important;
    }

    .section03__vertical-heading {
        top: calc(var(--header-height) + 2px);
        right: 6px;
    }

    .section03__cards {
        margin-top: 240px;
        padding-right: 36px;
        padding-left: 36px;
    }
}

@media (min-width: 768px) {
    /* 메인을 제외한 PC 서브페이지에서는 플로팅을 표시하지 않음 */
    body.is-sub-page .main-floating {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ========================================
   모바일 메인 최종 보정 2026-07-21
   - 요청 사항은 767px 이하에서만 적용
======================================== */

@media (max-width: 767px) {
    :root {
        /* 메인01 카피·세로선을 화면 우측 가까이 배치 */
        --copy-line-x: 78vw;
        --copy-gap: 11px;

        /* 세로 이미지 카피 크기 확대 */
        --main-copy-01-scale: 1.32;
        --main-copy-02-scale: 1.32;

        /* 메인02 이미지 우측 여백은 이전 값보다 소폭 축소 */
        --section02-mobile-right-gap: clamp(72px, 20.5vw, 84px);
    }

    /* 메인01 세로선도 카피와 함께 우측축을 사용 */
    .main-copy__line {
        left: var(--copy-line-x);
    }

    /* 메인02 이미지 우측 여백 조정 */
    .section02__visual {
        width: calc(100% - var(--section02-mobile-right-gap));
        margin-right: var(--section02-mobile-right-gap);
        margin-left: 0;
    }

    /* 메인02 세로선 위·아래 바깥 여백 확대 */
    .section02__line {
        margin-top: 28px;
        margin-bottom: 30px;
    }

    /* 메인03 UNIT PLAN / 리쉐스302 세대안내는 진입 즉시 시작 */
    .section03.is-active .section03__vertical-heading {
        transition-delay: 0s, 0s, 0s;
    }

    /* 메인04는 모바일 이미지의 원본 비율로 높이를 결정 */
    .section04 {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .section04__visual {
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .section04__visual .section04__background {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
    }

    .section04__background-picture {
        display: block;
        width: 100%;
        height: auto;
    }

    .section04__visual .section04__background-image {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain;
        object-position: center top;
    }

    .section04__visual .section04__content {
        position: absolute;
        inset: 0;
    }

    /* 메인04 가로선을 세로선으로 변경 */
    .section04__infra-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .section04__line {
        width: 1px !important;
        height: clamp(58px, 16vw, 76px);
        flex: 0 0 auto;
        overflow: hidden;
    }

    .section04__line::after {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;

        width: 1px !important;
        height: 0;

        transform: none;
        transform-origin: top center;

        transition: height 2.1s 0s ease;
        will-change: height;
    }

    .section04.is-active .section04__line::after {
        width: 1px !important;
        height: 100%;
        transform: none;

        transition: height 2.1s 0s ease;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-line-x: 79vw;
        --copy-gap: 10px;
        --main-copy-01-scale: 1.28;
        --main-copy-02-scale: 1.28;
        --section02-mobile-right-gap: clamp(66px, 19vw, 76px);
    }

    .section02__line {
        margin-top: 26px;
        margin-bottom: 28px;
    }
}


/* ========================================
   모바일 메인 최종 위치·잘림 방지 보정
   - 767px 이하에서만 적용
   - PC 메인에는 영향 없음
======================================== */

@media (max-width: 767px) {
    :root {
        /* 메인01 카피를 더 크게 표시하고 현재보다 위로 이동 */
        --copy-top: clamp(100px, 13.2svh, 124px);
        --main-copy-01-scale: 1.42;
        --main-copy-02-scale: 1.42;
    }

    /* 메인02 HIGH-END 이미지를 우측으로 이동 */
    .section02__highend {
        left: 58%;
    }

    /* 메인03 세로 타이틀을 더 위·우측으로 이동하고 두 문구 간격 확대 */
    .section03__vertical-heading {
        top: calc(var(--header-height) - 10px);
        right: 0;
        left: auto !important;
        gap: 20px;
    }

    /* 리쉐스302 세대안내는 더 얇게 표시 */
    .section03__eyebrow {
        font-weight: 300;
        letter-spacing: -0.045em;
    }

    /*
       메인04 콘텐츠를 세로 중앙 고정에서 상단 안전영역 기준으로 변경합니다.
       모바일 배경 이미지의 실제 높이가 달라도 하단이 잘리지 않습니다.
    */
    .section04__visual .section04__content {
        padding:
                clamp(64px, 10svh, 88px)
                22px
                max(20px, env(safe-area-inset-bottom));

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

    .section04__infra-title {
        width: 100%;
        max-width: 100%;
        gap: clamp(14px, 3.8vw, 20px);
        transform: none;
    }

    .section04__copy {
        max-width: calc(100vw - 44px);
        font-size: clamp(17px, 4.8vw, 20px);
        line-height: 1.34;
    }

    .section04__line {
        height: clamp(52px, 14vw, 68px);
    }

    .section04__logo {
        max-width: min(54vw, 230px) !important;
        max-height: none !important;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-top: clamp(96px, 12.5svh, 116px);
        --main-copy-01-scale: 1.38;
        --main-copy-02-scale: 1.38;
    }

    .section02__highend {
        left: 59%;
    }

    .section03__vertical-heading {
        top: calc(var(--header-height) - 12px);
        right: -1px;
        gap: 18px;
    }

    .section04__visual .section04__content {
        padding-top: clamp(58px, 9svh, 74px);
        padding-right: 18px;
        padding-left: 18px;
    }

    .section04__copy {
        max-width: calc(100vw - 36px);
    }
}

/* 높이가 낮은 모바일에서도 메인04 하단 요소가 잘리지 않도록 축소 보정 */
@media (max-width: 767px) and (max-height: 680px) {
    .section04__visual .section04__content {
        padding-top: 52px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .section04__infra-title {
        gap: 12px;
    }

    .section04__copy {
        font-size: clamp(16px, 4.5vw, 18px);
    }

    .section04__line {
        height: 46px;
    }

    .section04__logo {
        max-width: min(48vw, 198px) !important;
    }
}

/* ========================================
   모바일 메인01 카피 확대 + 메인04 잘림 방지 최종 보정
   - 767px 이하에만 적용
   - m_main04.jpg(1920×653)의 가로형 비율 때문에 섹션 높이가
     약 130px로 축소되던 height:auto 규칙을 해제합니다.
======================================== */

@media (max-width: 767px) {
    :root {
        /* 메인01 세로 카피를 확실히 키우고 기존보다 위로 이동 */
        --copy-top: clamp(72px, 9.6svh, 88px);
        --main-copy-01-scale: 1.6;
        --main-copy-02-scale: 1.6;
    }

    /* 메인04를 다시 한 화면 높이로 고정해 오버레이가 잘리지 않게 함 */
    .section04,
    .section04__visual {
        width: 100%;
        height: 100vh;
        height: 100svh;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
    }

    .section04__visual .section04__background {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .section04__background-picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .section04__visual .section04__background-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover;
        object-position: center center;
    }

    /* 카피·세로선·로고 전체를 상단 안전영역 안에 배치 */
    .section04__visual .section04__content {
        position: absolute;
        inset: 0;
        height: 100%;
        padding:
                max(calc(var(--header-height) + 10px), calc(env(safe-area-inset-top) + 62px))
                20px
                max(22px, env(safe-area-inset-bottom));
        display: flex;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
    }

    .section04__infra-title {
        width: 100%;
        max-width: 100%;
        max-height: calc(
                100svh -
                max(calc(var(--header-height) + 10px), calc(env(safe-area-inset-top) + 62px)) -
                max(22px, env(safe-area-inset-bottom))
        );
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(10px, 2.3svh, 16px);
        transform: none;
    }

    .section04__copy {
        max-width: calc(100vw - 40px);
        font-size: clamp(17px, 4.7vw, 20px);
        line-height: 1.3;
        text-align: center;
        white-space: normal;
    }

    .section04__line {
        width: 1px !important;
        height: clamp(44px, 8svh, 62px);
        flex: 0 0 auto;
    }

    .section04__logo {
        width: auto !important;
        height: auto !important;
        max-width: min(52vw, 205px) !important;
        max-height: 42px !important;
        object-fit: contain;
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-top: clamp(68px, 9svh, 82px);
        --main-copy-01-scale: 1.56;
        --main-copy-02-scale: 1.56;
    }

    .section04__visual .section04__content {
        padding-top:
                max(calc(var(--header-height) + 6px), calc(env(safe-area-inset-top) + 58px));
        padding-right: 18px;
        padding-left: 18px;
    }

    .section04__copy {
        max-width: calc(100vw - 36px);
    }

    .section04__logo {
        max-width: min(50vw, 190px) !important;
    }
}

/* 667px 이하의 낮은 화면에서도 마지막 로고까지 안전영역 안에 유지 */
@media (max-width: 767px) and (max-height: 667px) {
    .section04__visual .section04__content {
        padding-top:
                max(calc(var(--header-height) + 2px), calc(env(safe-area-inset-top) + 54px));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .section04__infra-title {
        gap: 9px;
    }

    .section04__copy {
        font-size: clamp(16px, 4.35vw, 18px);
        line-height: 1.24;
    }

    .section04__line {
        height: clamp(38px, 6.8svh, 46px);
    }

    .section04__logo {
        max-width: min(46vw, 176px) !important;
        max-height: 34px !important;
    }
}

/* ========================================
   메인 3·4단 최종 보정
   - 메인03 원·화살표 축소 및 이동 효과 제거
   - 호버 시 테두리 없이 검은색 배경 적용
   - 메인04와 푸터를 각각 동일한 한 화면 높이로 정렬
   - 메인04 문구와 로고가 화면 안에서 잘리지 않도록 안전영역 확보
======================================== */

/* ========================================
   메인 3단 카드 설명 문구 선명도
======================================== */

.section03.is-active
.section03__card {
    filter: none !important;
    transform: none !important;

    will-change: auto !important;
    backface-visibility: visible !important;
}

.section03__card-content,
.section03__card-meta,
.section03__card-description,
.section03__card-description span {
    filter: none !important;
    transform: none !important;

    backface-visibility: visible !important;
}

.section03__card-description {
    opacity: 1;

    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;

    text-rendering: optimizeLegibility;
    text-shadow: none;
}

/* ========================================
   메인 3단 원·화살표 크기 및 호버
======================================== */

.section03__arrow-link {
    --arrow-move-x: 0px !important;
    --arrow-move-y: 0px !important;
    --arrow-scale: 1 !important;

    width: 58px !important;
    height: 58px !important;

    flex: 0 0 58px !important;

    transform: none !important;
}

.section03__arrow-link::before {
    inset: -8px;
}

.section03__arrow-circle {
    width: 58px !important;
    height: 58px !important;

    border: 0 !important;
    background-color: #a27e5b;

    transform: none !important;

    transition:
            background-color
            0.42s
            ease !important;

    will-change: auto !important;
}

.section03__arrow-icon {
    width: 48px !important;
    height: 15px !important;

    transform:
            translate3d(-12px, 0, 0) !important;

    transition: none !important;

    will-change: auto !important;
}

.section03__arrow-link:hover
.section03__arrow-circle,
.section03__arrow-link:focus-visible
.section03__arrow-circle,
.section03__arrow-link.is-magnetic-active
.section03__arrow-circle {
    border: 0 !important;
    background-color: #050505;

    transform: none !important;
}

.section03__arrow-link:hover
.section03__arrow-icon,
.section03__arrow-link:focus-visible
.section03__arrow-icon,
.section03__arrow-link.is-magnetic-active
.section03__arrow-icon {
    transform:
            translate3d(-12px, 0, 0) !important;
}

@media (min-width: 1401px) {
    .section03__arrow-link {
        margin-top: -18px;
    }
}

@media (max-width: 767px) {
    .section03__arrow-link {
        width: 52px !important;
        height: 44px !important;

        flex-basis: 52px !important;

        margin-top: -10px;
    }

    .section03__arrow-circle {
        width: 44px !important;
        height: 44px !important;
    }

    .section03__arrow-icon {
        width: 38px !important;
        height: 12px !important;

        transform:
                translate3d(-9px, 0, 0) !important;
    }

    .section03__arrow-link:hover
    .section03__arrow-icon,
    .section03__arrow-link:focus-visible
    .section03__arrow-icon,
    .section03__arrow-link.is-magnetic-active
    .section03__arrow-icon {
        transform:
                translate3d(-9px, 0, 0) !important;
    }
}

/* ========================================
   메인 4단과 푸터 높이 균형
   PC 풀페이지에서는 메인04와 푸터를 각각 정확히 1화면으로 맞춥니다.
   메인04 높이가 이미지 비율로 짧아져 푸터 상단이 잘리던 문제를 막습니다.
======================================== */

.section.section04,
.section04 {
    display: block !important;

    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;

    min-height: 620px !important;

    overflow: hidden !important;
}

.section04__visual {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    flex: none !important;

    overflow: hidden !important;
    isolation: isolate;
}

.section04__visual
.section04__background {
    position: absolute !important;
    z-index: 0 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    overflow: hidden !important;
}

.section04__background-picture {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

.section04__visual
.section04__background-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

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

    transform: none !important;
    backface-visibility: visible !important;
}

.section04__visual
.section04__content {
    position: absolute !important;
    z-index: 2 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    padding:
            max(var(--header-height), env(safe-area-inset-top))
            clamp(32px, 5vw, 96px)
            max(28px, env(safe-area-inset-bottom)) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}

.section04__infra-title {
    max-width: 100%;
    max-height: none !important;
}

.section04__copy,
.section04__logo {
    flex-shrink: 0;
}

/*
 * PC 풀페이지에서 푸터 section 자체도 1화면 높이로 맞추고,
 * 실제 690px 푸터 콘텐츠는 화면 중앙에 온전히 배치합니다.
 */
@media (min-width: 1401px) {
    .footer-section {
        width: 100% !important;

        height: 100vh !important;
        height: 100svh !important;

        min-height: 620px !important;
        flex: 0 0 100svh !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    .footer-section
    .site-footer {
        width: 100% !important;

        height: min(690px, 100svh) !important;
        min-height: 0 !important;
        flex: 0 0 min(690px, 100svh) !important;

        overflow: visible !important;
    }

    .footer-section
    .site-footer__inner {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* ========================================
   태블릿·모바일 메인04 잘림 방지
======================================== */

@media (max-width: 1000px) {
    .section04__visual
    .section04__content {
        padding:
                max(calc(var(--header-height) + 16px), calc(env(safe-area-inset-top) + 68px))
                clamp(22px, 6vw, 54px)
                max(26px, env(safe-area-inset-bottom)) !important;
    }

    .section04__infra-title {
        width: 100%;
        max-width: 100%;

        gap: clamp(16px, 3.4vw, 28px);
    }

    .section04__copy {
        max-width: calc(100vw - 44px);

        text-align: center;
        white-space: normal;
    }

    .section04__logo {
        max-height: none !important;
    }
}

@media (max-width: 767px) {
    .section.section04,
    .section04,
    .section04__visual {
        height: 100vh !important;
        height: 100svh !important;

        min-height: 560px !important;
    }

    .section04__visual
    .section04__content {
        padding:
                max(calc(var(--header-height) + 8px), calc(env(safe-area-inset-top) + 58px))
                20px
                max(22px, env(safe-area-inset-bottom)) !important;

        align-items: flex-start !important;
    }

    .section04__infra-title {
        width: 100%;
        max-width: 100%;
        max-height: none !important;

        margin: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        gap: clamp(10px, 2.4svh, 18px);
    }

    .section04__copy {
        width: auto;
        max-width: calc(100vw - 40px);

        font-size: clamp(17px, 4.7vw, 20px);
        line-height: 1.3;

        text-align: center;
        white-space: normal;
    }

    .section04__line {
        width: 1px !important;
        height: clamp(44px, 8svh, 64px);

        flex: 0 0 auto;
    }

    .section04__logo {
        width: auto !important;
        height: auto !important;

        max-width: min(52vw, 205px) !important;
        max-height: 44px !important;

        object-fit: contain;

        flex: 0 0 auto;
    }
}

@media (max-width: 767px)
and
(max-height: 680px) {
    .section04__visual
    .section04__content {
        padding-top:
                max(calc(var(--header-height) + 2px), calc(env(safe-area-inset-top) + 52px));

        padding-bottom:
                max(14px, env(safe-area-inset-bottom)) !important;
    }

    .section04__infra-title {
        gap: 9px;
    }

    .section04__copy {
        font-size: clamp(16px, 4.35vw, 18px);
        line-height: 1.24;
    }

    .section04__line {
        height: clamp(36px, 6.5svh, 46px);
    }

    .section04__logo {
        max-width: min(46vw, 176px) !important;
        max-height: 34px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section03__arrow-circle,
    .section03__arrow-icon {
        transition: none !important;
    }

    .section03__arrow-circle {
        transform: none !important;
    }

    .section03__arrow-icon {
        transform:
                translate3d(-12px, 0, 0) !important;
    }
}

@media (max-width: 767px)
and
(prefers-reduced-motion: reduce) {
    .section03__arrow-icon {
        transform:
                translate3d(-9px, 0, 0) !important;
    }
}

/* ========================================
   메인 3단 화살표·카드 이미지 최종 보정
   - 카드 이미지 hover 줌아웃 효과 완전 제거
   - 화살표 hover 효과 없음
   - SVG 실제 path의 왼쪽 시작점만 연장하여 자연스럽게 처리
======================================== */

/* ========================================
   화살표: 모든 hover 효과 제거
======================================== */

.section03__arrow-link,
.section03__arrow-link:hover,
.section03__arrow-link:focus-visible,
.section03__arrow-link.is-magnetic-active {
    --arrow-move-x: 0px !important;
    --arrow-move-y: 0px !important;
    --arrow-scale: 1 !important;

    transform: none !important;
}

.section03__arrow-circle,
.section03__arrow-link:hover
.section03__arrow-circle,
.section03__arrow-link:focus-visible
.section03__arrow-circle,
.section03__arrow-link.is-magnetic-active
.section03__arrow-circle {
    border: 0 !important;
    background-color: #a27e5b !important;

    transform: none !important;
    transition: none !important;

    will-change: auto !important;
}

/*
 * 별도의 가상 선을 덧붙이지 않습니다.
 * index.php의 SVG path 시작점만 왼쪽으로 연장했기 때문에
 * 선 두께와 연결부가 하나의 path로 자연스럽게 이어집니다.
 */
.section03__arrow-circle::before {
    display: none !important;
    content: none !important;
}

.section03__arrow-icon,
.section03__arrow-link:hover
.section03__arrow-icon,
.section03__arrow-link:focus-visible
.section03__arrow-icon,
.section03__arrow-link.is-magnetic-active
.section03__arrow-icon {
    position: relative;
    z-index: 3;

    width: 42px !important;
    height: 12px !important;

    transform:
            translate3d(-10px, 0, 0) !important;

    transform-origin: center center !important;

    transition: none !important;

    will-change: auto !important;
}

.section03__arrow-link:focus-visible::after {
    display: none !important;
    content: none !important;
}

/* ========================================
   카드 이미지 hover 줌아웃 효과 제거
======================================== */

.section03__card-picture {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    contain: none;
    isolation: auto;

    transform: none;

    backface-visibility: visible;
}

.section03__card-image,
.section03__card-picture:hover
.section03__card-image,
.section03__card:focus-within
.section03__card-image {
    transform: none !important;
    transition: none !important;

    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;

    perspective: none !important;

    will-change: auto !important;
}

@media (max-width: 767px) {
    .section03__arrow-icon,
    .section03__arrow-link:hover
    .section03__arrow-icon,
    .section03__arrow-link:focus-visible
    .section03__arrow-icon,
    .section03__arrow-link.is-magnetic-active
    .section03__arrow-icon {
        width: 33px !important;
        height: 9px !important;

        transform:
                translate3d(-7px, 0, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section03__arrow-circle,
    .section03__arrow-icon,
    .section03__card-image {
        transition: none !important;
    }

    .section03__arrow-circle,
    .section03__card-image {
        transform: none !important;
    }

    .section03__arrow-icon {
        transform:
                translate3d(-10px, 0, 0) !important;
    }
}

@media (max-width: 767px)
and
(prefers-reduced-motion: reduce) {
    .section03__arrow-icon {
        transform:
                translate3d(-7px, 0, 0) !important;
    }
}

/* ========================================
   드파인 아르티아 톤 메인 모션 최종 보정
   - 메인01 종료 후, 회전 중인 플로팅이 페이드 인
   - 메인02 재진입마다 줌아웃부터 순차 재생
   - 카피01 → 세로선 → 카피02 → HIGH-END 순서
   - blur 없이 opacity/transform만 사용해 렉과 글자 번짐 최소화
======================================== */

/* ========================================
   메인01 플로팅
   회전은 미리 시작하고, 인트로 종료 후 플로팅 전체만 페이드합니다.
======================================== */

.main-floating,
body.is-ready .main-floating {
    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
            translate3d(0, 14px, 0)
            scale(0.985) !important;

    transition:
            visibility 0s linear 0.92s,
            opacity 0.92s ease,
            transform 1.02s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.is-intro-complete .main-floating {
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform:
            translate3d(0, 0, 0)
            scale(1) !important;

    transition-delay:
            0s,
            0s,
            0s !important;
}

body.is-ready .main-floating__line {
    animation:
            main-floating-line-rotate
            14s
            linear
            0.35s
            infinite !important;
}

/* ========================================
   메인02 공통 초기 상태
======================================== */

.section02__bg-image,
.section02__copy--01,
.section02__line::after,
.section02__copy--02,
.section02__highend {
    filter: none !important;
}

.section02__bg-image {
    transform:
            translate3d(0, 0, 0)
            scale(1.1) !important;

    transform-origin: left bottom !important;

    transition:
            transform
            2.35s
            0.08s
            cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: transform;
}

.section02.is-motion-active
.section02__bg-image {
    transform:
            translate3d(0, 0, 0)
            scale(1) !important;
}

/* 카피01: 줌아웃 후반부터 제자리에서 차분히 페이드 */
.section02__copy--01,
.section02.is-active
.section02__copy--01 {
    opacity: 0 !important;
    transform: none !important;

    transition:
            opacity
            0.92s
            1.55s
            ease !important;

    will-change: opacity;
}

.section02.is-motion-active
.section02__copy--01 {
    opacity: 1 !important;
}

/* 세로선: 카피01이 거의 보인 뒤 위에서 아래로 진행 */
.section02__line::after,
.section02.is-active
.section02__line::after {
    height: 100% !important;

    transform:
            scaleY(0) !important;

    transform-origin:
            top center !important;

    transition:
            transform
            1.05s
            2.28s
            cubic-bezier(0.45, 0, 0.35, 1) !important;

    will-change: transform;
}

.section02.is-motion-active
.section02__line::after {
    transform:
            scaleY(1) !important;
}

/* 카피02: 세로선이 그어지는 중간부터 부드럽게 페이드업 */
.section02__copy--02,
.section02.is-active
.section02__copy--02 {
    opacity: 0 !important;
    filter: none !important;

    transform:
            translate3d(0, 20px, 0) !important;

    transition:
            opacity
            0.9s
            2.64s
            ease,

            transform
            0.98s
            2.64s
            cubic-bezier(0.22, 1, 0.36, 1) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
    font-synthesis: none;

    backface-visibility: visible !important;
    will-change:
            opacity,
            transform;
}

.section02.is-motion-active
.section02__copy--02 {
    opacity: 1 !important;
    transform: none !important;
}

/* HIGH-END: 마지막에 오른쪽에서 왼쪽으로 짧게 이동하며 페이드 */
.section02__highend,
.section02.is-active
.section02__highend {
    opacity: 0 !important;

    transition:
            opacity
            0.92s
            3.34s
            ease,

            transform
            1.02s
            3.34s
            cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change:
            opacity,
            transform;
}

.section02.is-motion-active
.section02__highend {
    opacity: 1 !important;
}

/* 메인02 텍스트를 감싼 부모의 scale 제거: 실제 폰트 픽셀을 그대로 렌더링 */
@media (min-width: 1401px) {
    .section02__story {
        transform:
                translate3d(
                        0,
                        var(--section02-story-shift-y),
                        0
                ) !important;
    }

    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translate3d(32px, 0, 0) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translate3d(0, 0, 0) !important;
    }
}

@media (min-width: 1001px) and (max-width: 1400px) {
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1.08) !important;
    }

    .section02.is-motion-active
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1) !important;
    }

    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translateX(calc(-50% + 28px))
                scale(var(--section02-decor-scale)) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translateX(-50%)
                scale(var(--section02-decor-scale)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1.08) !important;
    }

    .section02.is-motion-active
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1) !important;
    }

    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translate(calc(-50% + 28px), 50%)
                scale(var(--section02-decor-scale)) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translate(-50%, 50%)
                scale(var(--section02-decor-scale)) !important;
    }
}

/* 재진입 직전 초기 프레임: 전환 없이 시작 상태로 복원 */
.section02.is-motion-reset
.section02__bg-image,
.section02.is-motion-reset
.section02__copy--01,
.section02.is-motion-reset
.section02__line::after,
.section02.is-motion-reset
.section02__copy--02,
.section02.is-motion-reset
.section02__highend {
    transition: none !important;
}

/* ========================================
   메인03 세로 제목
   시작과 완료 상태에서 동일한 반응형 scale을 사용해 확대되는 느낌 제거
======================================== */

.section03__vertical-heading,
.section03.is-active
.section03__vertical-heading {
    filter: none !important;
}

@media (min-width: 1401px) {
    .section03__vertical-heading {
        transform:
                translate3d(-48px, 0, 0)
                scale(var(--section03-content-scale)) !important;

        transform-origin:
                left top !important;
    }

    .section03.is-active
    .section03__vertical-heading {
        transform:
                translate3d(0, 0, 0)
                scale(var(--section03-content-scale)) !important;

        transform-origin:
                left top !important;
    }
}

/* ========================================
   모바일 보정
======================================== */

@media (max-width: 767px) {
    :root {
        /* 기존보다 아래로 이동. 실제 크기는 main.js에서 약 20% 확대 계산 */
        --copy-top:
                clamp(112px, 15svh, 138px) !important;
    }

    /* 메인02 카피 묶음 전체를 조금 아래로 */
    .section02__story {
        transform:
                translate3d(0, 28px, 0) !important;
    }

    /* HIGH-END를 현재보다 우측으로 */
    .section02__highend {
        left: 63% !important;
    }

    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translate(calc(-50% + 24px), 62%) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translate(-50%, 62%) !important;
    }

    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1.08) !important;
    }

    .section02.is-motion-active
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1) !important;
    }

    /*
     * 메인04 높이는 모바일 이미지의 고유 비율로 결정합니다.
     * 배경 이미지를 일반 흐름에 두고 콘텐츠만 위에 겹칩니다.
     */
    .section.section04,
    .section04 {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }

    .section04__visual {
        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    .section04__visual
    .section04__background {
        position: relative !important;

        inset: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .section04__background-picture {
        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .section04__visual
    .section04__background-image {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center top !important;
    }

    .section04__visual
    .section04__content {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-top:
                clamp(108px, 14.5svh, 130px) !important;
    }

    .section02__highend {
        left: 64% !important;
    }
}

/* ========================================
   모션 최소화 환경
======================================== */

@media (prefers-reduced-motion: reduce) {
    body.is-ready
    .main-floating {
        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        transform: none !important;
    }

    .section02__bg-image,
    .section02__copy--01,
    .section02__line::after,
    .section02__copy--02,
    .section02__highend,
    .section03__vertical-heading {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인02 슬라이딩·메인03 화질·모바일04 최종 보정
   - 드파인 아르티아처럼 짧은 이동과 여유 있는 감속
   - 각 요소가 겹쳐 이어지며 자연스럽게 등장
   - 메인03 텍스트를 흐리게 만들던 부모 scale 제거
   - 모바일 메인04 최소 436px 높이와 내부 안전영역 확보
======================================== */

/* ========================================
   메인01 플로팅
   main.js의 인트로 완료 시점을 4.2초에서 3.65초로 앞당겼습니다.
======================================== */

.main-floating,
body.is-ready .main-floating {
    transition:
            visibility 0s linear 0.82s,
            opacity 0.82s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ========================================
   메인02 자연스럽게 겹쳐 이어지는 모션
   줌아웃 0.05s
   카피01 0.95s
   세로선 1.35s
   카피02 1.62s
   HIGH-END 1.95s
======================================== */

.section02__bg-image {
    transition:
            transform
            2.35s
            0.05s
            cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 카피01: 줌아웃이 끝나기 전에 아래에서 부드럽게 슬라이딩 */
.section02__copy--01,
.section02.is-active
.section02__copy--01 {
    opacity: 0 !important;

    transform:
            translate3d(0, 24px, 0) !important;

    transition:
            opacity
            1.18s
            0.95s
            cubic-bezier(0.22, 0.61, 0.36, 1),

            transform
            1.42s
            0.9s
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change:
            opacity,
            transform;
}

.section02.is-motion-active
.section02__copy--01 {
    opacity: 1 !important;

    transform:
            translate3d(0, 0, 0) !important;
}

/* 세로선: 카피01과 자연스럽게 겹쳐 시작 */
.section02__line::after,
.section02.is-active
.section02__line::after {
    transform:
            scaleY(0) !important;

    transition:
            transform
            1.3s
            1.35s
            cubic-bezier(0.45, 0, 0.28, 1) !important;
}

.section02.is-motion-active
.section02__line::after {
    transform:
            scaleY(1) !important;
}

/* 카피02: 세로선 전개 중간부터 이어지는 슬라이딩 페이드 */
.section02__copy--02,
.section02.is-active
.section02__copy--02 {
    opacity: 0 !important;

    transform:
            translate3d(0, 28px, 0) !important;

    transition:
            opacity
            1.2s
            1.62s
            cubic-bezier(0.22, 0.61, 0.36, 1),

            transform
            1.48s
            1.57s
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change:
            opacity,
            transform;
}

.section02.is-motion-active
.section02__copy--02 {
    opacity: 1 !important;

    transform:
            translate3d(0, 0, 0) !important;
}

/* HIGH-END: 카피02와 겹쳐 이어지며 오른쪽에서 부드럽게 진입 */
.section02__highend,
.section02.is-active
.section02__highend {
    opacity: 0 !important;

    transition:
            opacity
            1.24s
            1.95s
            cubic-bezier(0.22, 0.61, 0.36, 1),

            transform
            1.58s
            1.88s
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change:
            opacity,
            transform;
}

.section02.is-motion-active
.section02__highend {
    opacity: 1 !important;
}

@media (min-width: 1401px) {
    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translate3d(46px, 0, 0) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translate3d(0, 0, 0) !important;
    }
}

@media (min-width: 1001px) and (max-width: 1400px) {
    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translateX(calc(-50% + 42px))
                scale(var(--section02-decor-scale)) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translateX(-50%)
                scale(var(--section02-decor-scale)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translate(calc(-50% + 36px), 50%)
                scale(var(--section02-decor-scale)) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translate(-50%, 50%)
                scale(var(--section02-decor-scale)) !important;
    }
}

/* 애니메이션 완료 뒤 GPU 레이어를 계속 유지하지 않도록 정리 */
.section02.is-motion-active
.section02__copy--01,
.section02.is-motion-active
.section02__copy--02 {
    backface-visibility: visible !important;
}

/* ========================================
   메인03 PC 텍스트·이미지 렌더링 선명도
   원인: .section03__vertical-heading과 .section03__cards 부모에
   소수점 scale이 적용되어 내부 글자까지 비트맵처럼 축소되고 있었습니다.
======================================== */

@media (min-width: 1401px) {
    .section03__vertical-heading,
    .section03.is-active
    .section03__vertical-heading {
        transform-origin:
                left top !important;
    }

    .section03__vertical-heading {
        transform:
                translate3d(-48px, 0, 0) !important;
    }

    .section03.is-active
    .section03__vertical-heading {
        transform:
                translate3d(0, 0, 0) !important;

        will-change: auto !important;
    }

    .section03__cards {
        right:
                clamp(36px, 4vw, 76px) !important;

        gap:
                clamp(44px, 4.5vw, 86px) !important;

        transform: none !important;
        transform-origin: initial !important;

        will-change: auto !important;
    }

    .section03__card {
        width:
                clamp(260px, 20vw, 360px) !important;
    }

    .section03__card-picture {
        width: 100% !important;
    }

    .section03__card-image {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;
    }

    .section03__card-title {
        font-size:
                clamp(19px, 1.25vw, 22px) !important;
    }

    .section03__card-description {
        font-size:
                clamp(15px, 1.03vw, 18px) !important;
    }
}

.section03__vertical-heading,
.section03__cards,
.section03__card-content,
.section03__card-meta,
.section03__eyebrow,
.section03__title,
.section03__card-title,
.section03__card-description,
.section03__card-description span {
    filter: none !important;

    backface-visibility: visible !important;
}

.section03__eyebrow,
.section03__title,
.section03__card-title,
.section03__card-description {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
    font-synthesis: none;

    text-shadow: none !important;
}

.section03.is-active
.section03__card {
    transform:
            translate3d(0, 0, 0) !important;

    will-change: auto !important;
}

/* ========================================
   모바일 메인02 HIGH-END 슬라이딩
======================================== */

@media (max-width: 767px) {
    .section02__highend,
    .section02.is-active
    .section02__highend {
        transform:
                translate(calc(-50% + 30px), 62%) !important;
    }

    .section02.is-motion-active
    .section02__highend {
        transform:
                translate(-50%, 62%) !important;
    }
}

/* ========================================
   모바일 메인04
   배경 이미지 원본 높이 436px을 최소 기준으로 사용하고,
   화면이 높은 경우에만 적당히 확장해 모든 콘텐츠를 내부에 유지합니다.
======================================== */

@media (max-width: 767px) {
    .section.section04,
    .section04,
    .section04__visual {
        width: 100% !important;

        height:
                clamp(
                        436px,
                        64svh,
                        560px
                ) !important;

        min-height: 436px !important;

        overflow: hidden !important;
    }

    .section04__visual
    .section04__background,
    .section04__background-picture {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    .section04__visual
    .section04__background-image {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    .section04__visual
    .section04__content {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        padding:
                max(
                        calc(var(--header-height) + 14px),
                        calc(env(safe-area-inset-top) + 74px)
                )
                20px
                max(
                        22px,
                        env(safe-area-inset-bottom)
                ) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    .section04__infra-title {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap:
                clamp(
                        9px,
                        1.8svh,
                        14px
                ) !important;
    }

    .section04__copy {
        max-width:
                calc(100vw - 40px) !important;

        font-size:
                clamp(
                        16px,
                        4.45vw,
                        19px
                ) !important;

        line-height: 1.28 !important;
    }

    .section04__line {
        width: 1px !important;

        height:
                clamp(
                        38px,
                        6.2svh,
                        52px
                ) !important;
    }

    .section04__logo {
        width: auto !important;
        height: auto !important;

        max-width:
                min(
                        48vw,
                        190px
                ) !important;

        max-height: 40px !important;
    }
}

@media (max-width: 767px) and (max-height: 520px) {
    .section.section04,
    .section04,
    .section04__visual {
        height: 436px !important;
    }

    .section04__visual
    .section04__content {
        padding-top:
                max(
                        calc(var(--header-height) + 4px),
                        calc(env(safe-area-inset-top) + 58px)
                ) !important;

        padding-bottom:
                max(
                        16px,
                        env(safe-area-inset-bottom)
                ) !important;
    }

    .section04__infra-title {
        gap: 8px !important;
    }

    .section04__copy {
        font-size:
                clamp(
                        15px,
                        4.15vw,
                        17px
                ) !important;

        line-height: 1.22 !important;
    }

    .section04__line {
        height: 34px !important;
    }

    .section04__logo {
        max-width:
                min(
                        44vw,
                        170px
                ) !important;

        max-height: 32px !important;
    }
}

/* ========================================
   모션 최소화 환경
======================================== */

@media (prefers-reduced-motion: reduce) {
    .section02__copy--01,
    .section02__line::after,
    .section02__copy--02,
    .section02__highend {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* === REVISION5 NON-SECTION02 PRESERVED START === */

/* ========================================
   메인01 플로팅
   visibility를 먼저 열고 opacity를 변화시켜 갑자기 나타나는 현상을 방지
======================================== */

.main-floating,
body.is-ready .main-floating {
    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
            translate3d(0, 18px, 0)
            scale(0.975) !important;

    transition:
            visibility 0s linear 1.4s,
            opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 1.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.is-intro-complete:not(.is-footer-section)
.main-floating {
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform:
            translate3d(0, 0, 0)
            scale(1) !important;

    transition:
            visibility 0s linear 0s,
            opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 1.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.is-footer-section
.main-floating {
    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
            translate3d(0, 14px, 0)
            scale(0.985) !important;

    transition:
            visibility 0s linear 0.65s,
            opacity 0.65s ease,
            transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ========================================
   메인03 드파인 아르티아형 모션 보완
   배경 줌아웃 → 세로 타이틀 → 카드 이미지 → 카드 문구가
   서로 짧게 겹치며 하나의 흐름으로 이어집니다.
======================================== */

.section03__background-picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section03__background-image {
    transform:
            translate3d(0, 0, 0)
            scale(1.1) !important;

    transform-origin: center center !important;

    transition:
            transform
            2.55s
            0.02s
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change: transform;
}

.section03.is-active
.section03__background-image {
    transform:
            translate3d(0, 0, 0)
            scale(1) !important;
}

.section03__vertical-heading,
.section03.is-active
.section03__vertical-heading {
    opacity: 0 !important;

    transform:
            translate3d(-54px, 0, 0) !important;

    transition:
            opacity
            1.28s
            0.58s
            cubic-bezier(0.22, 0.61, 0.36, 1),

            transform
            1.52s
            0.5s
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change:
            opacity,
            transform;
}

.section03.is-active
.section03__vertical-heading {
    opacity: 1 !important;

    transform:
            translate3d(0, 0, 0) !important;
}

.section03__card,
.section03.is-active
.section03__card {
    opacity: 0 !important;

    transform:
            translate3d(0, 34px, 0) !important;

    transition:
            opacity
            1.32s
            var(--section03-card-delay, 0.7s)
            cubic-bezier(0.22, 0.61, 0.36, 1),

            transform
            1.55s
            var(--section03-card-delay, 0.7s)
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change:
            opacity,
            transform;
}

.section03__card:nth-child(1) {
    --section03-card-delay: 0.72s;
    --section03-image-delay: 0.54s;
    --section03-copy-delay: 1.06s;
}

.section03__card:nth-child(2) {
    --section03-card-delay: 0.92s;
    --section03-image-delay: 0.74s;
    --section03-copy-delay: 1.26s;
}

.section03__card:nth-child(3) {
    --section03-card-delay: 1.12s;
    --section03-image-delay: 0.94s;
    --section03-copy-delay: 1.46s;
}

.section03.is-active
.section03__card {
    opacity: 1 !important;

    transform:
            translate3d(0, 0, 0) !important;
}

.section03__card-picture {
    display: block;
    overflow: hidden;
}

.section03__card-image {
    transform:
            translate3d(0, 0, 0)
            scale(1.095) !important;

    transform-origin: center center !important;

    transition:
            transform
            2.05s
            var(--section03-image-delay, 0.5s)
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change: transform;
}

.section03.is-active
.section03__card-image {
    transform:
            translate3d(0, 0, 0)
            scale(1) !important;
}

.section03__card-content {
    opacity: 0;

    transform:
            translate3d(0, 22px, 0);

    transition:
            opacity
            1.15s
            var(--section03-copy-delay, 1.02s)
            cubic-bezier(0.22, 0.61, 0.36, 1),

            transform
            1.35s
            var(--section03-copy-delay, 1.02s)
            cubic-bezier(0.16, 1, 0.3, 1);

    will-change:
            opacity,
            transform;
}

.section03.is-active
.section03__card-content {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);
}

/* ========================================
   모바일 메인04 높이
   다른 메인 섹션과 동일하게 한 화면 높이를 사용합니다.
======================================== */

@media (max-width: 767px) {
    .section.section04,
    .section04,
    .section04__visual {
        width: 100% !important;

        height: 100vh !important;
        height: 100svh !important;

        min-height: 100vh !important;
        min-height: 100svh !important;
    }

    .section03__vertical-heading,
    .section03.is-active
    .section03__vertical-heading {
        transform:
                translate3d(0, 38px, 0) !important;
    }

    .section03.is-active
    .section03__vertical-heading {
        transform:
                translate3d(0, 0, 0) !important;
    }

    .section03__card,
    .section03.is-active
    .section03__card {
        transform:
                translate3d(0, 42px, 0) !important;
    }

    .section03.is-active
    .section03__card {
        transform:
                translate3d(0, 0, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section03__background-image,
    .section03__vertical-heading,
    .section03__card,
    .section03__card-image,
    .section03__card-content {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   메인03 카드 이미지 내부 줌아웃
   카드 틀은 고정하고 이미지 자체만 차분하게 축소합니다.
======================================== */

.section03__card-picture {
    overflow: hidden !important;

    isolation: isolate;
    contain: paint;

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

.section03__card-image,
.section03.is-active
.section03__card-image {
    transform:
            translate3d(0, 0, 0)
            scale(1.12) !important;

    transform-origin: center center !important;

    transition:
            transform
            2.35s
            var(--section03-image-delay, 0.5s)
            cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change: transform;
}

.section03.is-active
.section03__card-image {
    transform:
            translate3d(0, 0, 0)
            scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .section03__card-image,
    .section03.is-active
    .section03__card-image {
        transform: none !important;
        transition: none !important;
    }
}

/* === REVISION5 NON-SECTION02 PRESERVED END === */

/* === REVISION10 SECTION02 REBUILD START === */
/* ========================================
   메인02 애니메이션 전면 재구성
   - 드파인 아르티아의 2.5s 이미지 줌아웃 / 1.8s 라인 / 1.2s 텍스트 흐름 반영
   - 세로선이 먼저 시작되고, 선이 그어지는 동안 카피01·02가 서로 다른 방향으로 등장
   - HIGH-END는 카피01과 항상 안전 간격을 유지한 채 가능한 가장 오른쪽에 배치
======================================== */

.section02 {
    --section02-bg-height: 0px;
    --section02-highend-left-px: 0px;
    --section02-highend-safe-y: 0px;

    background: #ffffff;
}

/* 부모 scale 애니메이션을 제거해 좌측 이미지 우측 경계의 떨림을 방지합니다. */
.section02__visual,
.section02__story {
    transition: none !important;
    backface-visibility: hidden;
}

@media (min-width: 1401px) {
    .section02__visual {
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;

        width: var(--section02-bg-width) !important;
        height: var(--section02-bg-height) !important;

        transform: none !important;
        transform-origin: left bottom !important;
        overflow: visible !important;
    }

    .section02__frame {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .section02__story {
        position: absolute !important;
        top: var(--header-height) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: var(--section02-bg-width) !important;

        transform:
                translate3d(
                        0,
                        var(--section02-story-shift-y),
                        0
                ) !important;
    }

    .section02__highend {
        top: calc(var(--header-height) - 38px) !important;
        left: var(--section02-highend-left-px) !important;

        width: min(35.78125vw, 687px) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }
}

@media (min-width: 1001px) and (max-width: 1400px) {
    .section02__highend {
        top: -16px !important;
        left: var(--section02-highend-left-px) !important;
        transform-origin: center center !important;
    }
}

/* 좌측 이미지: 드파인 아르티아와 동일한 2.5초 줌아웃 흐름 */
.section02__bg-image,
.section02.is-active .section02__bg-image {
    transform:
            translate3d(0, 0, 0)
            scale(1.1) !important;

    transform-origin: left bottom !important;

    transition:
            transform
            2.5s
            0s
            ease !important;

    will-change: transform;
}

.section02.is-motion-active .section02__bg-image {
    transform:
            translate3d(0, 0, 0)
            scale(1) !important;
}

/* 세로선: 가장 먼저 시작 */
.section02__line::after,
.section02.is-active .section02__line::after {
    transform: scaleY(0) !important;
    transform-origin: top center !important;

    transition:
            transform
            1.8s
            0.18s
            ease !important;

    will-change: transform;
}

.section02.is-motion-active .section02__line::after {
    transform: scaleY(1) !important;
}

/* 카피01: 위쪽에서 아래로 내려오는 페이드다운 */
.section02__copy--01,
.section02.is-active .section02__copy--01 {
    opacity: 0 !important;
    filter: none !important;

    transform:
            translate3d(0, -34px, 0) !important;

    transition:
            opacity
            1.2s
            0.34s
            ease,

            transform
            1.2s
            0.34s
            ease !important;

    will-change: opacity, transform;
}

.section02.is-motion-active .section02__copy--01 {
    opacity: 1 !important;

    transform:
            translate3d(0, 0, 0) !important;
}

/* 카피02: 아래쪽에서 위로 올라오는 페이드업 */
.section02__copy--02,
.section02.is-active .section02__copy--02 {
    opacity: 0 !important;
    filter: none !important;

    transform:
            translate3d(0, 34px, 0) !important;

    transition:
            opacity
            1.2s
            0.52s
            ease,

            transform
            1.2s
            0.52s
            ease !important;

    will-change: opacity, transform;
}

.section02.is-motion-active .section02__copy--02 {
    opacity: 1 !important;

    transform:
            translate3d(0, 0, 0) !important;
}

/* HIGH-END: 안전 간격이 확보된 고정 좌표에서 짧고 차분하게 진입 */
.section02__highend,
.section02.is-active .section02__highend {
    opacity: 0 !important;

    transform:
            translate3d(38px, var(--section02-highend-safe-y), 0) !important;

    transition:
            opacity
            1.2s
            0.42s
            ease,

            transform
            1.2s
            0.42s
            ease !important;

    will-change: opacity, transform;
}

.section02.is-motion-active .section02__highend,
.section02.is-layout-measuring .section02__highend {
    opacity: 1 !important;

    transform:
            translate3d(0, var(--section02-highend-safe-y), 0) !important;
}

/* 태블릿·모바일 세로 배치는 기존 구성에 맞춰 위아래 간격만 자동 보정합니다. */
@media (max-width: 1000px) {
    .section02__highend,
    .section02.is-active .section02__highend {
        transform:
                translate(
                        -50%,
                        calc(50% + var(--section02-highend-safe-y))
                )
                translate3d(30px, 0, 0) !important;
    }

    .section02.is-motion-active .section02__highend,
    .section02.is-layout-measuring .section02__highend {
        transform:
                translate(
                        -50%,
                        calc(50% + var(--section02-highend-safe-y))
                ) !important;
    }
}

@media (max-width: 767px) {
    /* 모바일에서는 HIGH-END를 세로선 시작 직후 먼저 보여줍니다. */
    .section02__highend,
    .section02.is-active .section02__highend {
        transition:
                opacity
                1.15s
                0.12s
                ease,

                transform
                1.25s
                0.12s
                var(--motion-ease) !important;
    }
}

@media (max-width: 767px) {
    /* 모바일 메인01 카피01·세로선·카피02 묶음을 기존보다 위로 이동 */
    :root {
        --copy-top:
                clamp(88px, 11.5svh, 108px) !important;
    }

    .section02__highend,
    .section02.is-active .section02__highend {
        transform:
                translate(
                        -50%,
                        calc(62% + var(--section02-highend-safe-y))
                )
                translate3d(26px, 0, 0) !important;
    }

    .section02.is-motion-active .section02__highend,
    .section02.is-layout-measuring .section02__highend {
        transform:
                translate(
                        -50%,
                        calc(62% + var(--section02-highend-safe-y))
                ) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-top:
                clamp(84px, 11svh, 100px) !important;
    }
}

/* 재진입 초기 프레임과 좌표 측정 프레임에서는 역방향 전환을 차단합니다. */
.section02.is-motion-reset .section02__bg-image,
.section02.is-motion-reset .section02__line::after,
.section02.is-motion-reset .section02__copy--01,
.section02.is-motion-reset .section02__copy--02,
.section02.is-motion-reset .section02__highend,
.section02.is-layout-measuring .section02__highend,
.section02.is-layout-measuring .section02__copy--01 {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .section02__bg-image,
    .section02__line::after,
    .section02__copy--01,
    .section02__copy--02,
    .section02__highend {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}
/* === REVISION10 SECTION02 REBUILD END === */

/* 모바일 메인04는 기존 상하 등장 모션을 유지합니다. */




/* === REVISION13 POSITION / SHORT MOBILE / TEXT SELECT START === */
/* 메인02 카피02는 실제 텍스트이므로 마우스·터치 드래그 선택을 허용합니다. */
.section02__copy--02,
.section02__copy02-title,
.section02__copy02-title span,
.section02__copy02-description,
.section02__copy02-description span {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

.section02__copy--02 {
    cursor: text;
}

/* 세로 높이가 짧은 모바일에서만 메인01 카피와 세로선 묶음을 더 위로 올립니다. */
@media (max-width: 767px) and (max-height: 740px) {
    :root {
        --copy-top: clamp(56px, 8.6svh, 66px) !important;
    }
}

@media (max-width: 767px) and (max-height: 650px) {
    :root {
        --copy-top: clamp(48px, 7.8svh, 58px) !important;
    }
}

@media (max-width: 767px) and (max-height: 580px) {
    :root {
        --copy-top: clamp(42px, 7.2svh, 50px) !important;
    }
}
/* === REVISION13 POSITION / SHORT MOBILE / TEXT SELECT END === */

/* === MOBILE SECTION02 SEPARATE TRIGGERS START === */
@media (max-width: 767px) {
    /* 카피01은 기존처럼 처음부터 보이도록 유지합니다. */
    .section02 .section02__copy--01,
    .section02.is-active .section02__copy--01,
    .section02.is-motion-reset .section02__copy--01 {
        visibility: visible !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* 카피02는 실제로 화면에 들어올 때 아래에서 위로 페이드업합니다. */
    .section02 .section02__copy--02,
    .section02.is-active .section02__copy--02 {
        visibility: visible !important;
        opacity: 0 !important;
        filter: none !important;

        transform:
                translate3d(0, 30px, 0) !important;

        transition:
                opacity
                1.2s
                0.08s
                cubic-bezier(0.22, 0.61, 0.36, 1),

                transform
                1.38s
                0.04s
                var(--motion-ease) !important;

        will-change:
                opacity,
                transform;
    }

    .section02.is-motion-active
    .section02__copy--02 {
        opacity: 1 !important;

        transform:
                translate3d(0, 0, 0) !important;
    }

    /* 세로선은 카피02가 화면에 들어올 때 함께 시작합니다. */
    .section02 .section02__line::after,
    .section02.is-active .section02__line::after,
    .section02.is-motion-reset .section02__line::after {
        transform: scaleY(0) !important;
        transform-origin: top center !important;

        transition:
                transform
                1.8s
                0.18s
                ease !important;
    }

    .section02.is-motion-active
    .section02__line::after {
        transform: scaleY(1) !important;
    }

    /*
     * HIGH-END는 요소 자체가 화면에 가까워진 시점까지 숨겨 두었다가,
     * 오른쪽에서 왼쪽으로 이동하며 페이드인합니다.
     */
    .section02 .section02__highend,
    .section02.is-active .section02__highend,
    .section02.is-motion-active .section02__highend,
    .section02.is-motion-reset .section02__highend,
    .section02.is-layout-measuring .section02__highend {
        visibility: hidden !important;
        opacity: 0 !important;

        transform:
                translate(
                        -50%,
                        calc(62% + var(--section02-highend-safe-y))
                )
                translate3d(52px, 0, 0) !important;

        transition: none !important;
    }

    .section02__visual.active
    .section02__highend {
        visibility: visible !important;
        opacity: 1 !important;

        transform:
                translate(
                        -50%,
                        calc(62% + var(--section02-highend-safe-y))
                ) !important;

        transition:
                visibility 0s linear 0s,
                opacity 1.08s 0.04s ease,
                transform 1.46s 0s var(--motion-ease) !important;
    }

    /* 좌측 이미지는 HIGH-END와 같은 프레임에 줌아웃을 시작합니다. */
    .section02 .section02__bg-image,
    .section02.is-active .section02__bg-image,
    .section02.is-motion-active .section02__bg-image,
    .section02.is-motion-reset .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1.08) !important;

        transition: none !important;
    }

    .section02__visual.active
    .section02__bg-image {
        transform:
                translate3d(0, 0, 0)
                scale(1) !important;

        transition:
                transform
                2.5s
                0s
                ease !important;
    }
}
/* === MOBILE SECTION02 SEPARATE TRIGGERS END === */

/* === MOBILE SECTION03 / SECTION04 PREVIOUS MOTION RESTORE START === */
@media (max-width: 767px) {
    /* 메인03 세로 타이틀은 짧은 이동 거리로 천천히 페이드업합니다. */
    .section03__vertical-heading,
    .section03.is-active .section03__vertical-heading {
        opacity: 0 !important;
        filter: none !important;
        transform: translate3d(0, 38px, 0) !important;
        transition:
                opacity 1.9s 0.18s ease,
                transform 2.15s 0.12s var(--motion-ease) !important;
    }

    .section03.is-active .section03__vertical-heading {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }

    /* 메인03 카드는 문구와 이미지를 한 묶음으로 길고 차분하게 순차 등장시킵니다. */
    .section03__card,
    .section03.is-active .section03__card {
        opacity: 0 !important;
        transform: translate3d(0, 42px, 0) !important;
        transition:
                opacity 2.1s 0s ease,
                transform 2.35s 0s var(--motion-ease) !important;
    }

    .section03.is-active .section03__card {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .section03.is-active .section03__card:nth-child(1) {
        transition-delay: 0.55s, 0.55s !important;
    }

    .section03.is-active .section03__card:nth-child(2) {
        transition-delay: 0.82s, 0.82s !important;
    }

    .section03.is-active .section03__card:nth-child(3) {
        transition-delay: 1.09s, 1.09s !important;
    }

    .section03__card-content,
    .section03.is-active .section03__card-content {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* 메인04는 기존 모바일 상하 등장 방향을 복원합니다. */
    .section04__copy {
        transform: translate3d(0, -3rem, 0) !important;
    }

    .section04__logo {
        transform: translate3d(0, 3rem, 0) !important;
    }

    .section04.is-active .section04__copy,
    .section04.is-active .section04__logo {
        transform: translate3d(0, 0, 0) !important;
    }

    .section04.is-motion-reset .section04__copy {
        transform: translate3d(0, -3rem, 0) !important;
    }

    .section04.is-motion-reset .section04__logo {
        transform: translate3d(0, 3rem, 0) !important;
    }
}
/* === MOBILE SECTION03 / SECTION04 PREVIOUS MOTION RESTORE END === */

/* ========================================
   요청 반영 최종 보정
   - 모바일 메인01 카피01·세로선·카피02 전체 위치 하향
======================================== */

/* 모바일 메인01 카피 묶음을 기존 최종값보다 적당히 아래로 이동합니다. */
@media (max-width: 767px) {
    :root {
        --copy-top:
                clamp(
                        108px,
                        14.5svh,
                        128px
                ) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --copy-top:
                clamp(
                        102px,
                        13.8svh,
                        118px
                ) !important;
    }
}

@media (max-width: 767px) and (max-height: 740px) {
    :root {
        --copy-top:
                clamp(
                        72px,
                        10.4svh,
                        82px
                ) !important;
    }
}

@media (max-width: 767px) and (max-height: 650px) {
    :root {
        --copy-top:
                clamp(
                        64px,
                        9.8svh,
                        74px
                ) !important;
    }
}

@media (max-width: 767px) and (max-height: 580px) {
    :root {
        --copy-top:
                clamp(
                        58px,
                        9.2svh,
                        66px
                ) !important;
    }
}

/* ========================================
   PC 메인01 세로선 · 메인02 125% 화면 보정
   - 세로선은 드파인 아르티아 톤으로 조금 더 빠르고 부드럽게 진행
   - 125% 축소 화면 구간에서 HIGH-END 전체가 화면 안에 보이도록 축소
======================================== */

@media (min-width: 1401px) {
    body.is-ready
    .main-copy__line {
        animation:
                none !important;

        transition:
                opacity
                0.32s
                0.8s
                ease,

                transform
                2.45s
                0.8s
                cubic-bezier(
                        0.45,
                        0,
                        0.35,
                        1
                ) !important;
    }
}

/*
 * 1920px 화면을 브라우저 125%로 볼 때 약 1536px CSS viewport가 됩니다.
 * 이 구간에서는 HIGH-END의 너비와 높이를 동시에 제한해
 * 상하 또는 우측이 잘리지 않도록 비율을 유지합니다.
 */
@media (min-width: 1401px) and (max-width: 1600px) {
    .section02__highend {
        top:
                calc(
                        var(--header-height) -
                        24px
                ) !important;

        width: auto !important;
        height: auto !important;

        max-width:
                min(
                        32vw,
                        500px
                ) !important;

        max-height:
                calc(
                        100svh -
                        var(--header-height) -
                        28px
                ) !important;

        object-fit:
                contain !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-ready
    .main-copy__line {
        animation:
                none !important;

        transform:
                scaleY(1) !important;

        transition:
                none !important;
    }
}




/* 팝업 */
/* =========================================================
   MAIN POPUP
========================================================= */

.richesse-popup {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 999999999;

    width: 100%;
    height: 100%;

    display: none;

    /*
     * 처음에는 화면 위쪽에 위치
     */
    transform: translate3d(0, -100%, 0);

    /*
     * 기존보다 더 느리고 차분하게
     */
    transition:
            transform 2s cubic-bezier(0.22, 0.8, 0.25, 1) 0.6s;

    will-change: transform;
}


/*
 * 팝업 표시
 */
.richesse-popup.is-show {
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   WRAP
========================================================= */

.richesse-popup__wrap {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

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


/* =========================================================
   OVERLAY
========================================================= */

.richesse-popup__overlay {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    /*
     * 중요
     * 이미지맵 클릭을 방해하지 않도록 함
     */
    pointer-events: none;
}


/* =========================================================
   CONTENT
========================================================= */

.richesse-popup__content {
    position: relative;

    z-index: 10;

    width: auto;
    max-width: none;

    margin: 0 auto;

    text-align: center;

    /*
     * 실제 클릭 영역 확보
     */
    pointer-events: auto;
}


/* =========================================================
   CLOSE
========================================================= */

.richesse-popup__close {
    display: block;

    margin: 0 auto 20px;

    padding: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: #fff;

    font-family: inherit;

    font-size: 16px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   VIEWPORT
========================================================= */

.richesse-popup__viewport {
    position: relative;

    width: auto;

    overflow: visible;

    pointer-events: auto;
}


/* =========================================================
   TRACK
========================================================= */

.richesse-popup__track {
    display: flex;

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

    width: auto;

    margin: 0;

    padding: 0;

    gap: 10px;

    list-style: none;

    pointer-events: auto;
}


/* =========================================================
   SLIDE
========================================================= */

.richesse-popup__slide {
    position: relative;

    /*
     * 중요
     * flex가 이미지를 강제로 줄이지 않도록 함
     */
    flex: 0 0 auto;

    width: auto;

    margin: 0;
    padding: 0;

    pointer-events: auto;
}


/*
 * 기존 width:100% 제거
 *
 * 원본 이미지 크기 그대로 표시
 */
.richesse-popup__slide img {
    display: block;

    width: auto;
    height: auto;

    max-width: none;

    margin: 0;

    pointer-events: auto;
}


/* =========================================================
   IMAGE MAP
========================================================= */

.richesse-popup__slide map,
.richesse-popup__slide area {
    pointer-events: auto;
}


/* =========================================================
   TODAY
========================================================= */

.richesse-popup__today {
    display: flex;

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

    width: 100%;

    margin-top: 12px;

    color: #fff;

    cursor: pointer;

    pointer-events: auto;
}


.richesse-popup__today input {
    width: 14px;
    height: 14px;

    margin: 0;

    accent-color: #fff;

    cursor: pointer;
}


.richesse-popup__today span {
    margin-left: 7px;

    color: #fff;

    font-family: inherit;

    font-size: 14px;
    font-weight: 400;

    line-height: 1;
}


/* =========================================================
   MOBILE CONTROL
========================================================= */

.richesse-popup__control {
    display: none;
}


/* =========================================================
   POPUP OPEN
========================================================= */

html.richesse-popup-open,
body.richesse-popup-open {
    overflow: hidden !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media all and (max-width: 767px) {

    .richesse-popup__wrap {
        overflow: hidden;
    }

    .richesse-popup__content {
        width: 80%;
        max-width: 340px;
        margin: 0 auto;
    }

    .richesse-popup__close {
        margin-bottom: 12px;
        font-size: 14px;
    }

    .richesse-popup__viewport {
        width: 100%;
        overflow: hidden;
    }

    .richesse-popup__track {
        justify-content: flex-start;
        gap: 0;

        transition:
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .richesse-popup__slide {
        flex: 0 0 100%;
        width: 100%;
    }

    /*
     * 모바일에서는 레퍼런스처럼
     * 팝업 컨테이너 폭에 맞춰 축소
     */
    .richesse-popup__slide img {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;

        margin: 0 auto;
    }


    /* =============================
       MOBILE CONTROL
    ============================= */

    .richesse-popup__control {
        display: flex;

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

        float: right;

        position: relative;

        width: 90px;
        height: 32px;

        margin-top: 12px;

        padding: 0 2px;

        border-radius: 50px;

        background: #fff;

        box-sizing: border-box;
    }

    .richesse-popup__prev,
    .richesse-popup__next {
        position: relative;

        flex: 0 0 25px;

        width: 25px;
        height: 32px;

        margin: 0;
        padding: 0;

        border: 0;
        outline: none;

        background: transparent;

        cursor: pointer;
    }

    .richesse-popup__prev span {
        position: absolute;

        top: 50%;
        left: 9px;

        width: 6px;
        height: 6px;

        border-left: 1px solid #000;
        border-bottom: 1px solid #000;

        transform:
                translateY(-50%)
                rotate(45deg);
    }

    .richesse-popup__next span {
        position: absolute;

        top: 50%;
        right: 9px;

        width: 6px;
        height: 6px;

        border-right: 1px solid #000;
        border-bottom: 1px solid #000;

        transform:
                translateY(-50%)
                rotate(-45deg);
    }

    .richesse-popup__pagination {
        display: flex;

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

        flex: 1;

        height: 32px;

        color: #000;

        font-family: inherit;

        font-size: 13px;
        font-weight: 500;

        line-height: 32px;

        white-space: nowrap;
    }

    .richesse-popup__divider {
        margin: 0 7px;
    }

    .richesse-popup__today {
        clear: both;

        justify-content: flex-start;

        padding-top: 12px;

        /*
         * 레퍼런스처럼 화살표 영역과
         * 세로 위치 맞춤
         */
        transform: translateY(-25px);
    }

    .richesse-popup__today span {
        font-size: 13px;
    }

}

/* =========================================================
   POPUP IMAGE LINK
   원본 이미지맵 좌표 : 0,537,399,599
========================================================= */

.richesse-popup__slide--link {
    position: relative;
}


/*
 * 원본 이미지 높이 599px 기준
 *
 * 537 / 599 = 89.6494%
 * 62 / 599  = 10.3506%
 *
 * 이미지가 PC/모바일에서 어떤 크기로 축소되어도
 * 같은 비율의 영역을 정확하게 클릭 가능
 */
.richesse-popup__image-link {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 20;

    width: 100%;
    height: 10.3506%;

    display: block;

    cursor: pointer;

    pointer-events: auto;
}