/* =========================================================
   JANGGEUM GLOBAL MEGA IP PROJECT
   LIGHT / FULLPAGE / EDITORIAL VERSION
========================================================= */


/* =========================================================
   01. ROOT
========================================================= */
:root {

    --bg-main: #f6f2e9;
    --bg-light: #fbfaf6;
    --bg-soft: #eee8dd;

    --text: #191813;
    --text-soft: #676258;
    --text-light: #918a7d;

    --gold: #95703a;
    --gold-light: #c8aa72;
    --gold-soft: #e9dcc4;

    --line: rgba(30, 28, 22, 0.12);

    --navy: #07111d;
    --navy-light: #0c1b2c;

    --blue: #78ade8;
    --blue-light: #a4ccf8;

    --white: #fff;

    --inner: 1380px;

    --ease:
        cubic-bezier(0.22, 0.61, 0.36, 1);

    --ease-out:
        cubic-bezier(0.16, 1, 0.3, 1);

    --ease-in-out:
        cubic-bezier(0.76, 0, 0.24, 1);

}


/* =========================================================
   02. RESET
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

html {
    background: var(--bg-main);
}

body {
    min-width: 320px;

    overflow: hidden;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background: var(--bg-main);

    word-break: keep-all;

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

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

img {
    display: block;

    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;

    cursor: pointer;
}

em {
    font-style: normal;
}

i {
    font-style: normal;
}


/* =========================================================
   03. FULLPAGE
========================================================= */
.fullpage {
    position: relative;

    width: 100%;
    height: 100vh;

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

    scroll-snap-type: y mandatory;

    overscroll-behavior-y: contain;

    scrollbar-width: none;
}

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

.fullpage-section {
    position: relative;

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

    overflow: hidden;

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

    transform-origin: center bottom;
}


/* JS용 상태 */
.fullpage-section {
    will-change:
        transform,
        opacity,
        filter;
}


/*
   JS에서 이전 페이지에 붙일 클래스
   "뒤로 접히며 넘어가는" 기본 베이스
*/
.fullpage-section.is-prev {
    transform:
        perspective(1800px)
        translateY(-3vh)
        rotateX(4deg)
        scale(0.94);

    opacity: 0.55;

    filter: blur(2px);
}


/*
   아직 아래에 있는 다음 화면
*/
.fullpage-section.is-next {
    transform:
        translateY(5vh)
        scale(0.985);
}


/*
   현재 활성화
*/
.fullpage-section.is-active {
    transform:
        perspective(1800px)
        translate3d(0, 0, 0)
        rotateX(0)
        scale(1);

    opacity: 1;

    filter: blur(0);
}


/* =========================================================
   04. COMMON
========================================================= */
.screen-inner {
    position: relative;
    z-index: 3;

    width: min(calc(100% - 100px), var(--inner));
    height: 100%;

    margin: 0 auto;

    padding:
        clamp(110px, 12vh, 150px)
        0
        clamp(60px, 8vh, 95px);
}

.screen-eyebrow {
    margin-bottom: 22px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.22em;

    color: var(--gold);
}

.screen-title {
    margin-bottom: 28px;

    font-family:
        "Noto Serif KR",
        "Nanum Myeongjo",
        serif;

    font-size: clamp(44px, 5vw, 76px);
    line-height: 1.25;

    font-weight: 400;

    letter-spacing: -0.06em;
}

.screen-title em {
    color: var(--gold);
}

.screen-description {
    max-width: 640px;

    margin-bottom: 0;

    font-size: 15px;
    line-height: 1.95;

    color: var(--text-soft);
}


/* =========================================================
   05. SECTION INDEX
========================================================= */
.section-index {
    position: absolute;

    right: 32px;
    bottom: 34px;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 9px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 10px;

    color: rgba(25, 24, 20, 0.42);
}

.section-index i {
    display: block;

    width: 42px;
    height: 1px;

    background: currentColor;

    opacity: 0.35;
}

.section-index em {
    font-style: normal;

    opacity: 0.42;
}

.section-index--light,
.section-index--dark {
    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   06. HEADER
========================================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100%;

    color: var(--text);

    transition:
        color 0.5s var(--ease),
        background 0.5s var(--ease),
        border-color 0.5s var(--ease),
        backdrop-filter 0.5s var(--ease);
}

.header__inner {
    display: flex;
    align-items: center;

    width: min(calc(100% - 100px), var(--inner));
    height: 84px;

    margin: 0 auto;
}

.header__logo {
    display: flex;
    flex-direction: column;

    margin-right: auto;
}

.header__logo-main {
    font-family:
        "Times New Roman",
        serif;

    font-size: 18px;
    line-height: 1;

    letter-spacing: 0.08em;
}

.header__logo-sub {
    margin-top: 5px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.18em;

    opacity: 0.5;
}

.header__nav {
    display: flex;
    gap: 34px;

    margin-right: 44px;
}

.header__nav a {
    position: relative;

    padding: 32px 0;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.11em;

    opacity: 0.55;

    transition:
        opacity 0.35s var(--ease);
}

.header__nav a:hover,
.header__nav a.is-active {
    opacity: 1;
}

.header__nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 24px;

    width: 0;
    height: 1px;

    background: currentColor;

    transition:
        width 0.45s var(--ease-out);
}

.header__nav a.is-active::after,
.header__nav a:hover::after {
    width: 100%;
}

.header__contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding:
        8px
        8px
        8px
        18px;

    border: 1px solid rgba(25, 24, 20, 0.18);
    border-radius: 999px;

    font-size: 10px;
    font-weight: 600;

    transition:
        background 0.4s var(--ease),
        color 0.4s var(--ease);
}

.header__contact i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #fff;

    background: var(--text);
}

.header__contact:hover {
    color: #fff;

    background: var(--text);
}


/* WOW나 Dark Section에서 JS가 붙여줄 클래스 */
.header.is-dark {
    color: #fff;
}

.header.is-dark .header__contact {
    border-color: rgba(255, 255, 255, 0.25);
}

.header.is-dark .header__contact i {
    color: var(--text);

    background: #fff;
}


/* =========================================================
   07. PAGE NAVIGATION
========================================================= */
.page-navigation {
    position: fixed;

    left: 27px;
    top: 50%;
    z-index: 100;

    display: flex;
    flex-direction: column;
    gap: 3px;

    transform: translateY(-50%);
}

.page-navigation__item {
    display: flex;
    align-items: center;

    height: 23px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 8px;

    color: var(--text);

    opacity: 0.25;

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

.page-navigation__item::before {
    content: "";

    width: 10px;
    height: 1px;

    margin-right: 7px;

    background: currentColor;

    transition:
        width 0.4s var(--ease-out);
}

.page-navigation__item:hover,
.page-navigation__item.is-active {
    opacity: 1;
}

.page-navigation__item.is-active::before {
    width: 28px;
}

.page-navigation.is-dark .page-navigation__item {
    color: #fff;
}


/* =========================================================
   08. HERO
========================================================= */
.hero--new {
    color: var(--text);

    background:
        radial-gradient(
            circle at 77% 29%,
            rgba(208, 174, 111, 0.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 16% 87%,
            rgba(128, 159, 151, 0.13),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #f5efe4 0%,
            #fbfaf6 46%,
            #eee6d8 100%
        );
}

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

    overflow: hidden;

    pointer-events: none;
}

.hero-bg::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(25, 22, 17, 0.025) 0,
            rgba(25, 22, 17, 0.025) 1px,
            transparent 1px,
            transparent 5px
        );
}

.hero-bg__glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.hero-bg__glow--01 {
    right: 2%;
    top: -22%;

    width: min(58vw, 850px);
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(211, 173, 104, 0.30),
            rgba(211, 173, 104, 0.08) 38%,
            transparent 68%
        );

    animation:
        heroGlow01
        11s
        ease-in-out
        infinite alternate;
}

.hero-bg__glow--02 {
    left: -12%;
    bottom: -34%;

    width: 700px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(108, 150, 142, 0.17),
            transparent 68%
        );

    animation:
        heroGlow02
        15s
        ease-in-out
        infinite alternate;
}

@keyframes heroGlow01 {

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

    to {
        transform:
            translate3d(-65px, 50px, 0)
            scale(1.12);
    }

}

@keyframes heroGlow02 {

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

    to {
        transform:
            translate3d(100px, -45px, 0);
    }

}

.hero-bg__orb {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(102, 83, 48, 0.10);
}

.hero-bg__orb--01 {
    right: 6%;
    top: 8%;

    width: min(47vw, 700px);
    aspect-ratio: 1;
}

.hero-bg__orb--01::after {
    content: "";

    position: absolute;
    inset: 9%;

    border:
        1px solid rgba(102, 83, 48, 0.07);

    border-radius: inherit;
}

.hero-bg__orb--02 {
    right: -5%;
    top: 38%;

    width: 310px;
    height: 310px;
}

.hero-bg__line {
    position: absolute;

    border:
        1px solid rgba(35, 31, 23, 0.07);

    border-radius: 50%;
}

.hero-bg__line--01 {
    left: -400px;
    top: 20%;

    width: 650px;
    height: 650px;
}

.hero-bg__line--02 {
    left: 25%;
    bottom: -730px;

    width: 1100px;
    height: 1100px;
}

.hero-bg__ghost {
    position: absolute;

    left: 50%;
    bottom: -4vw;

    transform:
        translateX(-50%);

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(150px, 21vw, 390px);
    line-height: 0.8;

    letter-spacing: -0.08em;

    color: rgba(36, 31, 22, 0.032);

    white-space: nowrap;
}

.hero-new__inner {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    width: min(calc(100% - 100px), var(--inner));
    height: 100%;

    margin: 0 auto;

    padding:
        clamp(105px, 11vh, 130px)
        0
        clamp(42px, 5vh, 65px);
}

.hero-new__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-new__category {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: #75603d;
}

.hero-new__category span {
    width: 30px;
    height: 1px;

    background: var(--gold);
}

.hero-new__year {
    margin: 0;

    text-align: right;

    font-size: 8px;

    letter-spacing: 0.17em;

    color: rgba(25, 24, 20, 0.4);
}

.hero-new__year strong {
    display: block;

    margin-top: 5px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 21px;
    font-weight: 400;

    color: var(--text);

    letter-spacing: 0;
}

.hero-new__main {
    position: relative;

    display: flex;
    align-items: center;

    flex: 1;
}

.hero-new__title-wrap {
    position: relative;
    z-index: 4;

    width: 70%;
}

.hero-new__intro {
    margin: 0 0 16px 7px;

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

    color: rgba(25, 24, 20, 0.62);
}

.hero-new__title {
    margin: 0;

    font-family:
        "Noto Serif KR",
        "Nanum Myeongjo",
        serif;

    letter-spacing: -0.075em;
}

.hero-new__title-small {
    display: block;

    margin-bottom: -1.8vw;

    font-size: clamp(43px, 5vw, 76px);
    line-height: 1.15;

    font-weight: 400;
}

.hero-new__title strong {
    position: relative;

    display: inline-block;

    font-size: clamp(125px, 15vw, 225px);

    font-weight: 500;

    background:
        linear-gradient(
            130deg,
            #171610 10%,
            #745d32 55%,
            #171610 92%
        );

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

    color: transparent;
}

.hero-new__title strong::after {
    content: "";

    position: absolute;

    left: calc(100% + 35px);
    top: 52%;

    width: 125px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(142, 107, 55, 0.65),
            transparent
        );
}


/* =========================================================
   09. HERO SYMBOL
========================================================= */
.hero-symbol {
    position: absolute;

    right: 3%;
    top: 50%;

    width: min(29vw, 420px);
    aspect-ratio: 1;

    transform:
        translateY(-50%);
}

.hero-symbol__core {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 54%;
    height: 54%;

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

    border:
        1px solid rgba(110, 83, 44, 0.15);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.60),
            rgba(222, 207, 179, 0.20)
        );

    box-shadow:
        inset 20px 20px 50px rgba(255, 255, 255, 0.45),
        inset -20px -20px 45px rgba(108, 77, 31, 0.05),
        0 35px 90px rgba(85, 62, 26, 0.08);

    backdrop-filter: blur(14px);
}

.hero-symbol__core span {
    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(43px, 5vw, 72px);

    color: rgba(92, 68, 31, 0.62);
}

.hero-symbol__orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid rgba(117, 89, 45, 0.16);

    border-radius: 50%;
}

.hero-symbol__orbit--01 {
    width: 100%;
    height: 40%;

    animation:
        orbit01
        18s
        linear
        infinite;
}

.hero-symbol__orbit--02 {
    width: 64%;
    height: 100%;

    animation:
        orbit02
        23s
        linear
        infinite reverse;
}

@keyframes orbit01 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(-25deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(335deg);
    }

}

@keyframes orbit02 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(28deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(388deg);
    }

}

.hero-symbol__dot {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ab8244;

    box-shadow:
        0 0 0 7px rgba(171, 130, 68, 0.08);
}

.hero-symbol__dot--01 {
    left: 6%;
    top: 48%;
}

.hero-symbol__dot--02 {
    right: 14%;
    top: 18%;

    width: 4px;
    height: 4px;
}

.hero-symbol__dot--03 {
    right: 7%;
    bottom: 22%;

    width: 5px;
    height: 5px;
}


/* =========================================================
   10. HERO BOTTOM
========================================================= */
.hero-new__bottom {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: 1.2fr 0.95fr;

    gap: 90px;

    align-items: flex-end;
}

.hero-new__message {
    max-width: 660px;
}

.hero-new__headline {
    margin-bottom: 15px;

    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(25px, 2.5vw, 38px);
    line-height: 1.4;

    letter-spacing: -0.05em;
}

.hero-new__headline em {
    color: var(--gold);
}

.hero-new__description {
    max-width: 575px;

    margin-bottom: 22px;

    font-size: 13px;
    line-height: 1.85;

    color: rgba(25, 24, 20, 0.57);
}

.hero-new__actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.hero-new__button {
    display: inline-flex;
    align-items: center;
    gap: 24px;

    padding:
        6px
        6px
        6px
        20px;

    border-radius: 999px;

    color: #fff;

    background: var(--text);

    transition:
        transform 0.4s var(--ease-out),
        background 0.4s var(--ease);
}

.hero-new__button:hover {
    transform:
        translateY(-3px);

    background: var(--gold);
}

.hero-new__button span {
    font-size: 11px;
    font-weight: 600;
}

.hero-new__button i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    color: var(--text);

    background: #fff;
}

.hero-new__text-link {
    position: relative;

    padding-bottom: 6px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.04em;
}

.hero-new__text-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        rgba(25, 24, 20, 0.27);

    transform-origin: right;

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

.hero-new__text-link:hover::after {
    transform:
        scaleX(0);
}

.hero-new__data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    padding-top: 18px;

    border-top:
        1px solid rgba(25, 24, 20, 0.13);
}

.hero-data {
    padding: 0 19px;

    border-left:
        1px solid rgba(25, 24, 20, 0.09);
}

.hero-data:first-child {
    padding-left: 0;

    border-left: 0;
}

.hero-data__label {
    display: block;

    margin-bottom: 10px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: rgba(25, 24, 20, 0.35);
}

.hero-data strong {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hero-data b {
    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(27px, 3vw, 38px);
    line-height: 1;

    font-weight: 400;
}

.hero-data small {
    font-size: 7px;

    letter-spacing: 0.12em;

    color: var(--gold);
}

.hero-new__scroll {
    position: absolute;

    right: -35px;
    top: 50%;

    display: flex;
    align-items: center;
    gap: 13px;

    transform:
        translateY(-50%)
        rotate(90deg);

    font-size: 7px;

    letter-spacing: 0.2em;

    opacity: 0.45;
}

.hero-new__scroll i {
    position: relative;

    width: 46px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(25, 24, 20, 0.20);
}

.hero-new__scroll i::after {
    content: "";

    position: absolute;

    left: -50%;

    width: 50%;
    height: 100%;

    background: var(--gold);

    animation:
        scrollMove
        2s
        ease-in-out
        infinite;
}

@keyframes scrollMove {

    to {
        transform:
            translateX(300%);
    }

}


/* =========================================================
   11. VISION
========================================================= */
.vision-section {
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(191, 159, 100, 0.13),
            transparent 28%
        ),
        #f8f6f1;
}

.section-orbit {
    position: absolute;

    pointer-events: none;
}

.section-orbit--vision {
    right: -240px;
    top: -240px;

    width: 700px;
    height: 700px;

    border:
        1px solid rgba(118, 93, 53, 0.09);

    border-radius: 50%;
}

.section-orbit--vision span:first-child {
    position: absolute;
    inset: 13%;

    border:
        1px solid rgba(118, 93, 53, 0.07);

    border-radius: 50%;
}

.section-orbit--vision span:last-child {
    position: absolute;
    inset: 27%;

    border:
        1px solid rgba(118, 93, 53, 0.05);

    border-radius: 50%;
}

.vision-section__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 9vw;
}

.vision-section__heading {
    max-width: 680px;
}

.vision-keywords {
    border-top:
        1px solid var(--line);
}

.vision-keyword {
    position: relative;

    display: grid;
    grid-template-columns: 55px 1fr 30px;

    align-items: center;

    padding:
        clamp(20px, 3.3vh, 34px)
        0;

    border-bottom:
        1px solid var(--line);

    transition:
        padding-left 0.5s var(--ease-out);
}

.vision-keyword:hover {
    padding-left: 15px;
}

.vision-keyword__number {
    font-family:
        "Times New Roman",
        serif;

    font-size: 15px;

    color: var(--gold);
}

.vision-keyword p {
    margin: 0 0 4px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--text-light);
}

.vision-keyword h3 {
    margin: 0;

    font-family:
        "Times New Roman",
        "Noto Serif KR",
        serif;

    font-size: clamp(23px, 2.4vw, 35px);
    line-height: 1.2;

    font-weight: 400;
}

.vision-keyword i {
    opacity: 0.35;

    transition:
        transform 0.4s var(--ease-out),
        opacity 0.4s var(--ease);
}

.vision-keyword:hover i {
    transform:
        translate(4px, -4px);

    opacity: 1;
}


/* =========================================================
   12. ORIGINALITY
========================================================= */
.project-section {
    background:
        linear-gradient(
            125deg,
            #f0ebe1,
            #fbfaf6 55%,
            #eee7da
        );
}

.project-section__word {
    position: absolute;

    left: -3vw;
    bottom: -3vw;

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(140px, 18vw, 310px);
    line-height: 0.85;

    letter-spacing: -0.06em;

    color: rgba(37, 33, 26, 0.035);

    white-space: nowrap;
}

.project-section__inner {
    display: grid;
    grid-template-columns: 130px 1fr 0.8fr;

    align-items: center;

    gap: 65px;
}

.project-section__side {
    align-self: center;
}

.project-section__number {
    display: block;

    margin-bottom: 14px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 70px;
    line-height: 1;

    color: rgba(145, 108, 54, 0.35);
}

.project-section__side p {
    margin: 0;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--gold);
}

.project-section__content {
    max-width: 700px;
}

.project-section__title {
    margin-bottom: 27px;

    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(40px, 5vw, 70px);
    line-height: 1.3;

    font-weight: 400;

    letter-spacing: -0.06em;
}

.project-section__title em {
    color: var(--gold);
}

.project-section__description {
    max-width: 600px;

    margin-bottom: 34px;

    font-size: 14px;
    line-height: 1.95;

    color: var(--text-soft);
}

.project-section__keywords {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.project-section__keywords span {
    padding:
        9px
        15px;

    border:
        1px solid rgba(30, 28, 22, 0.13);

    border-radius: 999px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.project-emblem {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-emblem__circle {
    position: relative;

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

    width: min(26vw, 330px);
    aspect-ratio: 1;

    border:
        1px solid rgba(126, 95, 49, 0.16);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255, 255, 255, 0.8),
            rgba(213, 197, 166, 0.22)
        );

    box-shadow:
        0 35px 90px rgba(74, 53, 20, 0.07);
}

.project-emblem__circle::before {
    content: "";

    position: absolute;
    inset: 10%;

    border:
        1px solid rgba(126, 95, 49, 0.10);

    border-radius: 50%;
}

.project-emblem__circle span {
    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(65px, 7vw, 100px);

    color: rgba(98, 70, 29, 0.56);
}

.project-emblem p {
    margin:
        25px
        0
        0;

    font-size: 7px;

    letter-spacing: 0.2em;

    color: var(--text-light);
}


/* =========================================================
   13. GLOBAL IP
========================================================= */
.global-ip {
    color: #fff;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(159, 121, 60, 0.17),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #222018,
            #11110e
        );
}

.global-ip__background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.global-ip__background > strong {
    position: absolute;

    right: -2vw;
    top: 50%;

    transform:
        translateY(-50%);

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(300px, 46vw, 700px);
    line-height: 0.7;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.025);
}

.global-ip__circle {
    position: absolute;

    border:
        1px solid rgba(219, 184, 121, 0.09);

    border-radius: 50%;
}

.global-ip__circle--01 {
    right: 6%;
    top: 13%;

    width: 520px;
    height: 520px;
}

.global-ip__circle--02 {
    right: 13%;
    top: 27%;

    width: 310px;
    height: 310px;
}

.global-ip__inner {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;

    grid-template-rows:
        1fr
        auto;

    align-items: center;

    gap: 30px 100px;
}

.global-ip .screen-eyebrow {
    color: var(--gold-light);
}

.global-ip .screen-title em {
    color: var(--gold-light);
}

.global-ip__number {
    display: flex;
    align-items: flex-end;

    gap: 30px;
}

.global-ip__number > strong {
    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(180px, 20vw, 310px);
    line-height: 0.70;

    font-weight: 400;

    color: var(--gold-light);
}

.global-ip__number span {
    display: block;

    margin-bottom: 12px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;
}

.global-ip__number p {
    margin: 0;

    font-size: 13px;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.52);
}

.global-ip__bottom {
    grid-column: 1 / -1;

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

    padding-top: 30px;

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

.global-ip__bottom > p {
    max-width: 490px;

    margin: 0;

    font-size: 13px;
    line-height: 1.85;

    color: rgba(255, 255, 255, 0.5);
}

.global-ip__markets {
    display: flex;
    gap: 25px;
}

.global-ip__markets span {
    font-size: 8px;

    letter-spacing: 0.13em;

    color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   14. BUSINESS
========================================================= */
.business-section {
    background:
        radial-gradient(
            circle at 13% 23%,
            rgba(126, 158, 150, 0.10),
            transparent 25%
        ),
        #faf8f3;
}

.business-section__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.business-section__heading {
    max-width: 850px;

    margin-bottom:
        clamp(40px, 6vh, 75px);
}

.business-flow {
    display: grid;
    grid-template-columns:
        1fr
        50px
        1fr
        50px
        1fr
        50px
        1fr;

    align-items: center;
}

.business-flow__item {
    position: relative;

    padding-top: 20px;

    border-top:
        1px solid var(--line);
}

.business-flow__item span {
    display: block;

    margin-bottom:
        clamp(40px, 6vh, 70px);

    font-family:
        "Times New Roman",
        serif;

    font-size: 15px;

    color: var(--gold);
}

.business-flow__item strong {
    display: block;

    margin-bottom: 12px;

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1;

    font-weight: 400;
}

.business-flow__item p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;

    color: var(--text-soft);
}

.business-flow__arrow {
    text-align: center;

    color: var(--gold);

    opacity: 0.42;
}


/* =========================================================
   15. WOW ZONE
========================================================= */
.wow-zone {
    color: #fff;

    background:
        radial-gradient(
            circle at 45% 35%,
            rgba(50, 112, 184, 0.22),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #06101b,
            #0c1c2c 50%,
            #07111c
        );
}

.wow-zone__background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    overflow: hidden;
}

.wow-zone__grid {
    position: absolute;
    inset: 0;

    opacity: 0.11;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );

    background-size:
        80px
        80px;
}

.wow-zone__glow {
    position: absolute;

    border-radius: 50%;
}

.wow-zone__glow--01 {
    left: 24%;
    top: 4%;

    width: 700px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(61, 137, 221, 0.17),
            transparent 68%
        );
}

.wow-zone__glow--02 {
    right: -15%;
    bottom: -30%;

    width: 650px;
    height: 650px;

    background:
        radial-gradient(
            circle,
            rgba(101, 168, 240, 0.09),
            transparent 70%
        );
}

.wow-zone__ghost {
    position: absolute;

    right: -3vw;
    bottom: -7vw;

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(260px, 35vw, 550px);

    color: rgba(255, 255, 255, 0.018);
}

.wow-zone__inner {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.wow-zone__heading {
    margin-bottom:
        clamp(30px, 4vh, 55px);
}

.wow-zone__eyebrow {
    margin-bottom: 15px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.25em;

    color: var(--blue);
}

.wow-zone__heading h2 {
    margin: 0;

    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(43px, 5vw, 72px);
    line-height: 1.3;

    font-weight: 400;

    letter-spacing: -0.06em;
}

.wow-zone__heading em {
    color: var(--blue-light);
}

.wow-zone__content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    align-items: center;

    gap: 9vw;
}


/* WOW ORBIT */
.wow-orbit {
    position: relative;

    width: min(30vw, 390px);
    aspect-ratio: 1;

    margin: 0 auto;
}

.wow-orbit__core {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 43%;
    height: 43%;

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

    border:
        1px solid rgba(130, 188, 250, 0.30);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(107, 174, 247, 0.22),
            rgba(15, 47, 79, 0.13)
        );

    backdrop-filter: blur(15px);

    box-shadow:
        0 0 70px rgba(58, 132, 217, 0.12);
}

.wow-orbit__core span {
    font-family:
        "Times New Roman",
        serif;

    font-size: 55px;

    color: #d4eaff;
}

.wow-orbit__core small {
    font-size: 6px;

    letter-spacing: 0.18em;

    color: rgba(255, 255, 255, 0.45);
}

.wow-orbit__ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid rgba(121, 181, 243, 0.20);

    border-radius: 50%;
}

.wow-orbit__ring--01 {
    width: 100%;
    height: 45%;

    animation:
        wowRing01
        16s
        linear
        infinite;
}

.wow-orbit__ring--02 {
    width: 56%;
    height: 100%;

    animation:
        wowRing02
        21s
        linear
        infinite reverse;
}

.wow-orbit__ring--03 {
    width: 80%;
    height: 80%;

    animation:
        wowRing03
        27s
        linear
        infinite;
}

@keyframes wowRing01 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(-20deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(340deg);
    }

}

@keyframes wowRing02 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(33deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(393deg);
    }

}

@keyframes wowRing03 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

.wow-orbit__label {
    position: absolute;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: rgba(169, 210, 255, 0.6);
}

.wow-orbit__label--01 {
    left: -1%;
    top: 44%;
}

.wow-orbit__label--02 {
    right: -10%;
    top: 22%;
}

.wow-orbit__label--03 {
    right: 4%;
    bottom: 10%;
}


/* WOW STORY */
.wow-story {
    border-top:
        1px solid rgba(255, 255, 255, 0.11);
}

.wow-story__item {
    display: grid;
    grid-template-columns: 55px 1fr;

    padding:
        clamp(14px, 2.2vh, 25px)
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);

    opacity: 0.33;

    transition:
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease-out),
        padding-left 0.5s var(--ease-out);
}

.wow-story__item.is-active {
    padding-left: 15px;

    opacity: 1;

    transform:
        translateX(5px);
}

.wow-story__item > span {
    font-family:
        "Times New Roman",
        serif;

    color: var(--blue);
}

.wow-story__item p {
    margin:
        0
        0
        4px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--blue);
}

.wow-story__item h3 {
    margin: 0;

    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(19px, 2vw, 29px);
    line-height: 1.35;

    font-weight: 400;
}

.wow-zone__summary {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-top:
        clamp(25px, 4vh, 45px);

    padding-top: 20px;

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

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--blue);
}

.wow-zone__summary i {
    opacity: 0.2;
}


/* =========================================================
   16. ECOSYSTEM
========================================================= */
.ecosystem-section {
    background:
        radial-gradient(
            circle at 35% 40%,
            rgba(193, 161, 103, 0.12),
            transparent 30%
        ),
        #f5f1e8;
}

.ecosystem-section__orbit {
    position: absolute;

    left: -210px;
    top: -210px;

    width: 520px;
    height: 520px;

    border:
        1px solid rgba(128, 99, 52, 0.08);

    border-radius: 50%;
}

.ecosystem-section__orbit span {
    position: absolute;
    inset: 18%;

    border:
        1px solid rgba(128, 99, 52, 0.06);

    border-radius: 50%;
}

.ecosystem-section__inner {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.ecosystem-section__heading {
    margin-bottom:
        clamp(30px, 5vh, 60px);
}

.ecosystem {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;

    gap: 8vw;

    align-items: center;
}

.ecosystem__core {
    position: relative;

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

    width: min(27vw, 360px);
    aspect-ratio: 1;

    padding: 60px;

    border-radius:
        47% 53% 52% 48% /
        52% 44% 56% 48%;

    color: #fff;

    background:
        radial-gradient(
            circle at 35% 25%,
            #3c3930,
            #171611 68%
        );

    box-shadow:
        0 40px 90px rgba(40, 32, 19, 0.13);
}

.ecosystem__core span {
    margin-bottom: 14px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: var(--gold-light);
}

.ecosystem__core strong {
    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(47px, 5vw, 68px);
    line-height: 0.82;

    font-weight: 400;

    letter-spacing: -0.04em;
}

.ecosystem__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    column-gap: 50px;
}

.ecosystem__list article {
    display: grid;
    grid-template-columns: 35px 1fr auto;

    align-items: center;

    padding:
        clamp(14px, 2vh, 22px)
        0;

    border-bottom:
        1px solid var(--line);
}

.ecosystem__list article:nth-child(-n + 2) {
    border-top:
        1px solid var(--line);
}

.ecosystem__list span {
    font-family:
        "Times New Roman",
        serif;

    font-size: 12px;

    color: var(--gold);
}

.ecosystem__list strong {
    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(16px, 1.6vw, 22px);

    font-weight: 400;
}

.ecosystem__list p {
    margin: 0;

    font-size: 10px;

    color: var(--text-soft);
}


/* =========================================================
   17. PARTNERSHIP
========================================================= */
.partnership-section {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(198, 164, 101, 0.12),
            transparent 25%
        ),
        #fbfaf6;
}

.partnership-section__text-bg {
    position: absolute;

    right: -4vw;
    bottom: -5vw;

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(160px, 23vw, 380px);

    color: rgba(30, 28, 22, 0.025);

    letter-spacing: -0.07em;
}

.partnership-section__inner {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;

    align-items: center;

    gap: 8vw;
}

.partnership-section__heading {
    max-width: 690px;
}

.partnership-roles {
    border-top:
        1px solid var(--line);
}

.partnership-role {
    display: grid;
    grid-template-columns:
        45px
        1fr
        120px
        25px;

    align-items: center;

    padding:
        clamp(16px, 2.4vh, 25px)
        0;

    border-bottom:
        1px solid var(--line);

    transition:
        padding-left 0.45s var(--ease-out),
        color 0.45s var(--ease);
}

.partnership-role:hover {
    padding-left: 13px;

    color: var(--gold);
}

.partnership-role > span {
    font-family:
        "Times New Roman",
        serif;

    font-size: 12px;

    color: var(--gold);
}

.partnership-role strong {
    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(17px, 1.7vw, 23px);

    font-weight: 400;
}

.partnership-role p {
    margin: 0;

    font-size: 10px;

    color: var(--text-soft);
}

.partnership-role i {
    opacity: 0.3;

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

.partnership-role:hover i {
    transform:
        translate(4px, -4px);
}


/* =========================================================
   18. FINAL MESSAGE
========================================================= */
.final-message {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #2a271f,
            #11110e
        );
}

.final-message__background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.final-message__background > strong {
    position: absolute;

    left: 50%;
    bottom: -5vw;

    transform:
        translateX(-50%);

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(170px, 24vw, 400px);

    font-weight: 400;

    letter-spacing: -0.07em;

    color: rgba(255, 255, 255, 0.025);
}

.final-message__sun {
    position: absolute;

    right: 12%;
    top: 20%;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(200, 166, 103, 0.18),
            rgba(200, 166, 103, 0.04) 50%,
            transparent 72%
        );
}

.final-message__line {
    position: absolute;

    border:
        1px solid rgba(216, 180, 111, 0.08);

    border-radius: 50%;
}

.final-message__line--01 {
    right: -230px;
    top: -220px;

    width: 700px;
    height: 700px;
}

.final-message__line--02 {
    right: -60px;
    top: -40px;

    width: 380px;
    height: 380px;
}

.final-message__inner {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.final-message .screen-eyebrow {
    color: var(--gold-light);
}

.final-message__text > p {
    margin-bottom: 16px;

    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(28px, 3.2vw, 45px);
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.45);

    letter-spacing: -0.04em;
}

.final-message__text h2 {
    margin: 0;

    font-family:
        "Noto Serif KR",
        serif;

    font-size: clamp(52px, 6vw, 90px);
    line-height: 1.27;

    font-weight: 400;

    letter-spacing: -0.065em;
}

.final-message__text h2 em {
    color: var(--gold-light);
}

.final-message__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-top:
        clamp(45px, 7vh, 80px);

    padding-top: 25px;

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

.final-message__bottom > p {
    max-width: 570px;

    margin: 0;

    font-size: 12px;
    line-height: 1.9;

    color: rgba(255, 255, 255, 0.45);
}

.final-message__link {
    display: flex;
    align-items: center;

    gap: 20px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.17em;
}

.final-message__link i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    transition:
        transform 0.4s var(--ease-out),
        background 0.4s var(--ease),
        color 0.4s var(--ease);
}

.final-message__link:hover i {
    transform:
        translate(4px, 4px);

    color: #111;

    background: #fff;
}


/* =========================================================
   19. CONTACT
========================================================= */
.contact-section {
    background:
        radial-gradient(
            circle at 82% 13%,
            rgba(191, 159, 99, 0.12),
            transparent 25%
        ),
        #f7f4ed;
}

.contact-section__inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    align-items: center;

    gap: 8vw;

    padding-bottom: 105px;
}

.contact-section__heading {
    max-width: 590px;
}

.contact-section__info {
    display: grid;

    margin-top: 40px;

    border-top:
        1px solid var(--line);
}

.contact-section__info > div {
    display: grid;
    grid-template-columns: 110px 1fr;

    padding: 12px 0;

    border-bottom:
        1px solid var(--line);
}

.contact-section__info span {
    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--gold);
}

.contact-section__info p {
    margin: 0;

    font-size: 11px;

    color: var(--text-soft);
}


/* FORM */
.contact-form {
    padding:
        38px
        42px;

    border-radius: 28px;

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

    box-shadow:
        0 35px 90px rgba(56, 43, 21, 0.07);

    backdrop-filter: blur(16px);
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}

.form-field {
    margin-bottom: 24px;
}

.form-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--gold);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    padding:
        11px
        0;

    border: 0;
    border-bottom:
        1px solid rgba(30, 28, 22, 0.17);

    border-radius: 0;

    outline: 0;

    color: var(--text);

    background: transparent;

    transition:
        border-color 0.35s var(--ease);
}

.form-field input,
.form-field select {
    height: 43px;
}

.form-field textarea {
    resize: none;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--gold);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(30, 28, 22, 0.35);
}

.contact-form__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-top: 4px;
}

.contact-form__bottom > p {
    margin: 0;

    font-size: 7px;
    line-height: 1.7;

    letter-spacing: 0.13em;

    color: var(--text-light);
}

.contact-form__submit {
    display: flex;
    align-items: center;

    gap: 20px;

    padding:
        6px
        6px
        6px
        20px;

    border-radius: 999px;

    color: #fff;

    background: var(--text);
}

.contact-form__submit span {
    font-size: 10px;
}

.contact-form__submit i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: var(--text);

    background: #fff;
}

.contact-footer {
    position: absolute;

    left: 50%;
    bottom: 25px;
    z-index: 5;

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

    width: min(calc(100% - 100px), var(--inner));

    transform:
        translateX(-50%);

    padding-top: 15px;

    border-top:
        1px solid var(--line);
}

.contact-footer > div {
    display: flex;
    align-items: baseline;

    gap: 18px;
}

.contact-footer strong {
    font-family:
        "Times New Roman",
        serif;

    font-size: 15px;

    letter-spacing: 0.07em;
}

.contact-footer span,
.contact-footer p {
    margin: 0;

    font-size: 6px;

    letter-spacing: 0.12em;

    color: var(--text-light);
}


/* =========================================================
   20. JS ANIMATION PREP
========================================================= */

/*
    아래 클래스는 JS에서 사용.

    기본적으로 현재 섹션에 .is-active가 붙으면
    해당 내부 콘텐츠들이 등장한다.
*/


/* 공통 숨김 */
.screen-eyebrow,
.screen-title,
.screen-description,
.vision-keyword,
.project-section__side,
.project-section__content,
.project-emblem,
.global-ip__heading,
.global-ip__number,
.global-ip__bottom,
.business-section__heading,
.business-flow__item,
.business-flow__arrow,
.wow-zone__heading,
.wow-orbit,
.wow-story__item,
.wow-zone__summary,
.ecosystem-section__heading,
.ecosystem__core,
.ecosystem__list article,
.partnership-section__heading,
.partnership-role,
.final-message__inner > *,
.contact-section__heading,
.contact-form {

    transition:
        opacity 0.85s var(--ease-out),
        transform 0.85s var(--ease-out);

}


/* VISION */
.vision-section:not(.is-active)
.screen-eyebrow,
.vision-section:not(.is-active)
.screen-title,
.vision-section:not(.is-active)
.screen-description {
    opacity: 0;

    transform:
        translateY(35px);
}

.vision-section:not(.is-active)
.vision-keyword {
    opacity: 0;

    transform:
        translateX(50px);
}

.vision-section.is-active
.vision-keyword:nth-child(1) {
    transition-delay: 0.22s;
}

.vision-section.is-active
.vision-keyword:nth-child(2) {
    transition-delay: 0.32s;
}

.vision-section.is-active
.vision-keyword:nth-child(3) {
    transition-delay: 0.42s;
}


/* ORIGINALITY */
.project-section:not(.is-active)
.project-section__side {
    opacity: 0;

    transform:
        translateX(-40px);
}

.project-section:not(.is-active)
.project-section__content {
    opacity: 0;

    transform:
        translateY(40px);
}

.project-section:not(.is-active)
.project-emblem {
    opacity: 0;

    transform:
        scale(0.84)
        rotate(-8deg);
}

.project-section.is-active
.project-emblem {
    transition-delay: 0.25s;
}


/* GLOBAL */
.global-ip:not(.is-active)
.global-ip__heading {
    opacity: 0;

    transform:
        translateY(35px);
}

.global-ip:not(.is-active)
.global-ip__number {
    opacity: 0;

    transform:
        scale(0.72)
        translateY(30px);
}

.global-ip:not(.is-active)
.global-ip__bottom {
    opacity: 0;

    transform:
        translateY(30px);
}

.global-ip.is-active
.global-ip__number {
    transition-delay: 0.18s;
}

.global-ip.is-active
.global-ip__bottom {
    transition-delay: 0.33s;
}


/* BUSINESS */
.business-section:not(.is-active)
.business-section__heading {
    opacity: 0;

    transform:
        translateY(35px);
}

.business-section:not(.is-active)
.business-flow__item,
.business-section:not(.is-active)
.business-flow__arrow {
    opacity: 0;

    transform:
        translateX(-35px);
}

.business-section.is-active
.business-flow__item:nth-child(1) {
    transition-delay: 0.18s;
}

.business-section.is-active
.business-flow__arrow:nth-child(2) {
    transition-delay: 0.26s;
}

.business-section.is-active
.business-flow__item:nth-child(3) {
    transition-delay: 0.34s;
}

.business-section.is-active
.business-flow__arrow:nth-child(4) {
    transition-delay: 0.42s;
}

.business-section.is-active
.business-flow__item:nth-child(5) {
    transition-delay: 0.50s;
}

.business-section.is-active
.business-flow__arrow:nth-child(6) {
    transition-delay: 0.58s;
}

.business-section.is-active
.business-flow__item:nth-child(7) {
    transition-delay: 0.66s;
}


/* WOW */
.wow-zone:not(.is-active)
.wow-zone__heading {
    opacity: 0;

    transform:
        translateY(35px);
}

.wow-zone:not(.is-active)
.wow-orbit {
    opacity: 0;

    transform:
        scale(0.75)
        rotate(-12deg);
}

.wow-zone:not(.is-active)
.wow-story__item {
    opacity: 0;

    transform:
        translateX(45px);
}

.wow-zone:not(.is-active)
.wow-zone__summary {
    opacity: 0;

    transform:
        translateY(20px);
}

.wow-zone.is-active
.wow-orbit {
    transition-delay: 0.15s;
}

.wow-zone.is-active
.wow-story__item:nth-child(1) {
    transition-delay: 0.22s;
}

.wow-zone.is-active
.wow-story__item:nth-child(2) {
    transition-delay: 0.32s;
}

.wow-zone.is-active
.wow-story__item:nth-child(3) {
    transition-delay: 0.42s;
}

.wow-zone.is-active
.wow-story__item:nth-child(4) {
    transition-delay: 0.52s;
}

.wow-zone.is-active
.wow-zone__summary {
    transition-delay: 0.65s;
}


/* ECOSYSTEM */
.ecosystem-section:not(.is-active)
.ecosystem-section__heading {
    opacity: 0;

    transform:
        translateY(35px);
}

.ecosystem-section:not(.is-active)
.ecosystem__core {
    opacity: 0;

    transform:
        scale(0.76)
        rotate(-7deg);
}

.ecosystem-section:not(.is-active)
.ecosystem__list article {
    opacity: 0;

    transform:
        translateX(35px);
}

.ecosystem-section.is-active
.ecosystem__core {
    transition-delay: 0.13s;
}

.ecosystem-section.is-active
.ecosystem__list article:nth-child(1) {
    transition-delay: 0.20s;
}

.ecosystem-section.is-active
.ecosystem__list article:nth-child(2) {
    transition-delay: 0.27s;
}

.ecosystem-section.is-active
.ecosystem__list article:nth-child(3) {
    transition-delay: 0.34s;
}

.ecosystem-section.is-active
.ecosystem__list article:nth-child(4) {
    transition-delay: 0.41s;
}

.ecosystem-section.is-active
.ecosystem__list article:nth-child(5) {
    transition-delay: 0.48s;
}

.ecosystem-section.is-active
.ecosystem__list article:nth-child(6) {
    transition-delay: 0.55s;
}


/* PARTNERSHIP */
.partnership-section:not(.is-active)
.partnership-section__heading {
    opacity: 0;

    transform:
        translateY(35px);
}

.partnership-section:not(.is-active)
.partnership-role {
    opacity: 0;

    transform:
        translateX(45px);
}

.partnership-section.is-active
.partnership-role:nth-child(1) {
    transition-delay: 0.20s;
}

.partnership-section.is-active
.partnership-role:nth-child(2) {
    transition-delay: 0.27s;
}

.partnership-section.is-active
.partnership-role:nth-child(3) {
    transition-delay: 0.34s;
}

.partnership-section.is-active
.partnership-role:nth-child(4) {
    transition-delay: 0.41s;
}

.partnership-section.is-active
.partnership-role:nth-child(5) {
    transition-delay: 0.48s;
}

.partnership-section.is-active
.partnership-role:nth-child(6) {
    transition-delay: 0.55s;
}


/* FINAL */
.final-message:not(.is-active)
.final-message__inner > * {
    opacity: 0;

    transform:
        translateY(45px);
}

.final-message.is-active
.final-message__text {
    transition-delay: 0.13s;
}

.final-message.is-active
.final-message__bottom {
    transition-delay: 0.28s;
}


/* CONTACT */
.contact-section:not(.is-active)
.contact-section__heading {
    opacity: 0;

    transform:
        translateX(-35px);
}

.contact-section:not(.is-active)
.contact-form {
    opacity: 0;

    transform:
        translateY(35px)
        scale(0.98);
}

.contact-section.is-active
.contact-form {
    transition-delay: 0.20s;
}


/* =========================================================
   21. SECTION TRANSITION SPECIAL EFFECT
========================================================= */

/*
   JS에서 전환 직전 .is-leaving-fold를 붙이면
   위쪽이 뒤로 접혀 들어가는 효과.
*/
.fullpage-section.is-leaving-fold {
    z-index: 1;

    transform:
        perspective(1600px)
        translateY(-5vh)
        rotateX(7deg)
        scale(0.91);

    opacity: 0.45;

    filter:
        blur(2px)
        brightness(0.88);

    transition:
        transform 0.9s var(--ease-in-out),
        opacity 0.8s var(--ease),
        filter 0.8s var(--ease);
}


/*
   다음 화면은 살짝 위로 솟아오름
*/
.fullpage-section.is-entering-up {
    z-index: 3;

    animation:
        sectionEnterUp
        0.95s
        var(--ease-out)
        both;
}

@keyframes sectionEnterUp {

    from {
        opacity: 0.55;

        transform:
            translateY(10vh)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/*
   GLOBAL → BUSINESS 같은 화면은
   살짝 줌아웃 전환도 가능
*/
.fullpage-section.is-leaving-zoom {
    transform:
        scale(1.08);

    opacity: 0;

    filter:
        blur(4px);

    transition:
        transform 0.85s var(--ease-in-out),
        opacity 0.75s var(--ease),
        filter 0.75s var(--ease);
}


/*
   WOW 진입 때는 다음 화면이 어둠에서 열리는 느낌
*/
.wow-zone.is-entering-dark {
    animation:
        darkReveal
        1s
        var(--ease-out)
        both;
}

@keyframes darkReveal {

    from {
        opacity: 0;

        clip-path:
            inset(
                10% 4% 10% 4%
                round 40px
            );

        transform:
            scale(0.96);
    }

    to {
        opacity: 1;

        clip-path:
            inset(
                0 0 0 0
                round 0
            );

        transform:
            scale(1);
    }

}


/* =========================================================
   22. RESPONSIVE 1279
========================================================= */
@media screen and (max-width: 1279px) {

    :root {
        --inner: 1120px;
    }

    .screen-inner,
    .hero-new__inner,
    .header__inner,
    .contact-footer {
        width:
            calc(100% - 80px);
    }

    .page-navigation {
        left: 16px;
    }

    .hero-new__bottom {
        gap: 50px;
    }

    .project-section__inner {
        grid-template-columns:
            90px
            1fr
            0.65fr;

        gap: 45px;
    }

    .business-flow {
        grid-template-columns:
            1fr
            35px
            1fr
            35px
            1fr
            35px
            1fr;
    }

    .wow-zone__content {
        gap: 6vw;
    }

}


/* =========================================================
   23. RESPONSIVE 1023
========================================================= */
@media screen and (max-width: 1023px) {

    body {
        overflow: auto;
    }

    .fullpage {
        height: 100dvh;
    }

    .fullpage-section {
        height: 100dvh;
        min-height: 100dvh;
    }

    .header__nav {
        display: none;
    }

    .page-navigation {
        display: none;
    }

    .screen-inner,
    .hero-new__inner,
    .header__inner,
    .contact-footer {
        width:
            calc(100% - 56px);
    }

    .hero-new__title-wrap {
        width: 75%;
    }

    .hero-symbol {
        right: -4%;

        width: 38vw;
    }

    .hero-new__bottom {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .hero-new__data {
        max-width: 600px;
    }

    .vision-section__inner {
        grid-template-columns:
            1fr
            0.8fr;

        gap: 50px;
    }

    .project-section__inner {
        grid-template-columns:
            70px
            1fr;

        gap: 30px;
    }

    .project-emblem {
        position: absolute;

        right: 4%;
        bottom: 7%;

        opacity: 0.35;
    }

    .project-emblem__circle {
        width: 230px;
    }

    .global-ip__inner {
        gap: 30px 45px;
    }

    .wow-zone__content {
        grid-template-columns:
            0.75fr
            1.25fr;

        gap: 45px;
    }

    .ecosystem {
        gap: 50px;
    }

    .partnership-section__inner {
        gap: 50px;
    }

}


/* =========================================================
   24. MOBILE 767
========================================================= */
@media screen and (max-width: 767px) {

    /*
       모바일은 강한 JS 휠 제어 X.
       CSS snap만 유지.
    */

    .screen-inner,
    .hero-new__inner,
    .header__inner,
    .contact-footer {
        width:
            calc(100% - 40px);
    }

    .screen-inner {
        padding:
            95px
            0
            45px;
    }

    .screen-title {
        font-size: 34px;
    }

    .screen-description {
        font-size: 12px;
    }


    /* HEADER */
    .header__inner {
        height: 66px;
    }

    .header__logo-main {
        font-size: 14px;
    }

    .header__logo-sub {
        display: none;
    }

    .header__contact {
        padding:
            5px
            5px
            5px
            12px;
    }

    .header__contact i {
        width: 27px;
        height: 27px;
    }


    /* HERO */
    .hero-new__inner {
        padding:
            92px
            0
            35px;
    }

    .hero-new__year {
        display: none;
    }

    .hero-new__category {
        font-size: 7px;
    }

    .hero-new__main {
        flex: 0 0 auto;

        min-height: 280px;
    }

    .hero-new__title-wrap {
        width: 100%;
    }

    .hero-new__intro {
        font-size: 11px;
    }

    .hero-new__title-small {
        font-size: 34px;
    }

    .hero-new__title strong {
        font-size:
            clamp(
                100px,
                30vw,
                145px
            );
    }

    .hero-new__title strong::after {
        display: none;
    }

    .hero-symbol {
        right: -31%;
        top: 48%;
        z-index: -1;

        width: 77vw;

        opacity: 0.5;
    }

    .hero-new__bottom {
        gap: 25px;

        margin-top: auto;
    }

    .hero-new__headline {
        font-size: 23px;
    }

    .hero-new__description {
        font-size: 11px;
    }

    .hero-new__actions {
        gap: 15px;
    }

    .hero-new__button {
        padding-left: 15px;
    }

    .hero-new__button i {
        width: 35px;
        height: 35px;
    }

    .hero-new__text-link {
        font-size: 8px;
    }

    .hero-data {
        padding: 0 9px;
    }

    .hero-data b {
        font-size: 25px;
    }

    .hero-data small {
        display: none;
    }

    .hero-new__scroll {
        display: none;
    }


    /* VISION */
    .vision-section__inner {
        display: flex;
        flex-direction: column;

        justify-content: center;

        gap: 35px;
    }

    .vision-keywords {
        width: 100%;
    }

    .vision-keyword {
        padding:
            15px
            0;
    }

    .vision-keyword h3 {
        font-size: 22px;
    }


    /* PROJECT */
    .project-section__inner {
        display: flex;
        flex-direction: column;

        justify-content: center;

        gap: 25px;
    }

    .project-section__side {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .project-section__number {
        margin: 0;

        font-size: 43px;
    }

    .project-section__title {
        font-size: 34px;
    }

    .project-section__description {
        font-size: 12px;
    }

    .project-emblem {
        display: none;
    }


    /* GLOBAL */
    .global-ip__inner {
        display: flex;
        flex-direction: column;

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

        gap: 30px;
    }

    .global-ip__number > strong {
        font-size: 150px;
    }

    .global-ip__bottom {
        display: block;

        width: 100%;
    }

    .global-ip__markets {
        flex-wrap: wrap;

        gap: 10px;

        margin-top: 20px;
    }


    /* BUSINESS */
    .business-flow {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }

    .business-flow__item {
        display: grid;
        grid-template-columns:
            45px
            1fr
            1fr;

        align-items: center;

        padding: 13px 0;
    }

    .business-flow__item span {
        margin: 0;
    }

    .business-flow__item strong {
        margin: 0;

        font-size: 19px;
    }

    .business-flow__item p {
        text-align: right;

        font-size: 10px;
    }

    .business-flow__arrow {
        display: none;
    }


    /* WOW */
    .wow-zone__content {
        display: block;
    }

    .wow-orbit {
        position: absolute;

        right: -100px;
        top: 50%;

        width: 310px;

        transform:
            translateY(-50%);

        opacity: 0.35;
    }

    .wow-story {
        position: relative;
        z-index: 3;

        width: 72%;
    }

    .wow-story__item {
        padding:
            14px
            0;
    }

    .wow-zone__summary {
        gap: 7px;

        font-size: 6px;
    }


    /* ECOSYSTEM */
    .ecosystem {
        display: block;
    }

    .ecosystem__core {
        width: 170px;

        margin-bottom: 30px;

        padding: 30px;
    }

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

    .ecosystem__list article:nth-child(2) {
        border-top: 0;
    }

    .ecosystem__list article {
        padding:
            10px
            0;
    }


    /* PARTNERSHIP */
    .partnership-section__inner {
        display: flex;
        flex-direction: column;

        justify-content: center;

        gap: 35px;
    }

    .partnership-role {
        grid-template-columns:
            30px
            1fr
            90px
            18px;

        padding:
            12px
            0;
    }


    /* FINAL */
    .final-message__text > p {
        font-size: 23px;
    }

    .final-message__text h2 {
        font-size: 43px;
    }

    .final-message__bottom {
        display: block;
    }

    .final-message__link {
        margin-top: 25px;
    }


    /* CONTACT */
    .contact-section__inner {
        display: flex;
        flex-direction: column;

        justify-content: center;

        gap: 30px;

        padding-bottom: 80px;
    }

    .contact-section__info {
        display: none;
    }

    .contact-form {
        width: 100%;

        padding:
            24px
            20px;

        border-radius: 20px;
    }

    .contact-form__row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .form-field {
        margin-bottom: 14px;
    }

    .contact-footer {
        bottom: 15px;
    }

    .contact-footer span,
    .contact-footer p {
        display: none;
    }

    .section-index {
        right: 17px;
        bottom: 16px;
    }

}


/* =========================================================
   25. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   CINEMATIC PAGE TRANSITION
========================================================= */

.page-transition {
    position: fixed;
    inset: 0;

    z-index: 999;

    pointer-events: none;

    overflow: hidden;
}


/* =========================================================
   CURTAIN
========================================================= */

.page-transition__curtain {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            #eee6d7,
            #faf7ef
        );

    transform:
        translateY(100%);

    will-change: transform;
}


/*
   아래에서 위로 화면을 덮는다
*/
.page-transition.is-curtain
.page-transition__curtain {
    animation:
        curtainTransition
        1.15s
        cubic-bezier(0.76, 0, 0.24, 1)
        forwards;
}


@keyframes curtainTransition {

    0% {
        transform:
            translateY(100%);
    }

    45% {
        transform:
            translateY(0);
    }

    55% {
        transform:
            translateY(0);
    }

    100% {
        transform:
            translateY(-100%);
    }

}


/* =========================================================
   CIRCLE REVEAL
========================================================= */

.page-transition__circle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle at 35% 30%,
            #16304c,
            #07111d 70%
        );
}


.page-transition.is-circle
.page-transition__circle {
    animation:
        circleTransition
        1.25s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}


@keyframes circleTransition {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0);

        opacity: 1;
    }

    45% {
        transform:
            translate(-50%, -50%)
            scale(180);

        opacity: 1;
    }

    58% {
        transform:
            translate(-50%, -50%)
            scale(180);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(220);

        opacity: 0;
    }

}


/* =========================================================
   HORIZONTAL SLICES
========================================================= */

.page-transition__slices {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
}


.page-transition__slices span {
    display: block;

    width: 100%;
    height: 20%;

    transform:
        translateX(-105%);

    background:
        #181713;
}


.page-transition.is-slices
.page-transition__slices span {
    animation:
        sliceInOut
        1.15s
        cubic-bezier(0.76, 0, 0.24, 1)
        forwards;
}


.page-transition.is-slices
.page-transition__slices span:nth-child(1) {
    animation-delay: 0s;
}

.page-transition.is-slices
.page-transition__slices span:nth-child(2) {
    animation-delay: 0.05s;
}

.page-transition.is-slices
.page-transition__slices span:nth-child(3) {
    animation-delay: 0.10s;
}

.page-transition.is-slices
.page-transition__slices span:nth-child(4) {
    animation-delay: 0.15s;
}

.page-transition.is-slices
.page-transition__slices span:nth-child(5) {
    animation-delay: 0.20s;
}


@keyframes sliceInOut {

    0% {
        transform:
            translateX(-105%);
    }

    42% {
        transform:
            translateX(0);
    }

    58% {
        transform:
            translateX(0);
    }

    100% {
        transform:
            translateX(105%);
    }

}


/* =========================================================
   DEPTH FOLD
========================================================= */

.fullpage-section.is-folding-out {
    z-index: 2;

    transform-origin:
        50% 100%;

    animation:
        foldingOut
        1.05s
        cubic-bezier(0.76, 0, 0.24, 1)
        forwards;
}


@keyframes foldingOut {

    0% {
        transform:
            perspective(1800px)
            rotateX(0deg)
            translateY(0)
            scale(1);

        filter:
            brightness(1)
            blur(0);

        opacity: 1;
    }

    60% {
        transform:
            perspective(1800px)
            rotateX(13deg)
            translateY(-4vh)
            scale(0.92);

        filter:
            brightness(0.75)
            blur(1px);

        opacity: 0.8;
    }

    100% {
        transform:
            perspective(1800px)
            rotateX(18deg)
            translateY(-11vh)
            scale(0.84);

        filter:
            brightness(0.5)
            blur(4px);

        opacity: 0;
    }

}


.fullpage-section.is-depth-in {
    animation:
        depthIn
        1.05s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}


@keyframes depthIn {

    0% {
        transform:
            translateY(15vh)
            scale(1.08);

        filter:
            blur(6px);

        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

        opacity: 1;
    }

}


/* =========================================================
   SECTION TEXT SWEEP
========================================================= */

.fullpage-section.is-active
.screen-title,
.fullpage-section.is-active
.project-section__title,
.fullpage-section.is-active
.wow-zone__heading h2,
.fullpage-section.is-active
.final-message__text h2 {

    animation:
        titleReveal
        0.95s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;

}


@keyframes titleReveal {

    from {
        opacity: 0;

        transform:
            translateY(45px)
            skewY(2deg);

        filter:
            blur(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            skewY(0);

        filter:
            blur(0);
    }

}