/* =========================================================
   WONA MAIN
========================================================= */


/* =========================================================
   COMMON SECTION
========================================================= */

#wona-main {
    overflow: hidden;
}

.section {
    position: relative;
}

.section-inner {
    position: relative;
}

.eyebrow {
    display: block;

    margin-bottom: 28px;

    color: #777;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
}

.section-heading h2 {
    margin: 0;

    color: #111;

    font-size: clamp(42px, 4vw, 68px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.section-heading p {
    margin: 32px 0 0;

    color: #777;

    font-size: 15px;
    line-height: 1.85;
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding-bottom: 75px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
       height: auto;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 60px 0 160px;

    background: #fff;
}

.hero .section-inner {
    position: relative;

    width: min(
        calc(100% - (var(--side-padding) * 2)),
        var(--content-width)
    );

    height: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;
    align-items: center;

    padding-top: 180px;
    box-sizing: border-box;
}

/* HERO CONTENT */

.hero-content {
    position: relative;
    z-index: 2;
	color: #fff;
}

.hero-content .eyebrow {
    margin-bottom: 35px;
	
    color: rgba(255,255,255,.55);
}

.hero-title {
    margin: 0;

    font-size: clamp(70px, 8vw, 150px);
    font-weight: 750;
    letter-spacing: -.075em;
    line-height: .86;
}

.hero-title em {
    font-style: normal;
}

.hero-subtitle {
    margin: 35px 0 0;

    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.04em;
}

.hero-description {
    margin: 25px 0 0;

    color: #777;

    font-size: 15px;
    line-height: 1.85;
}

.hero-content .btn {
    margin-top: 40px;
}


/* HERO VISUAL */

.hero-visual {
    position: relative;

    /*min-height: 620px;*/

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

.hero-object {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

hero-object img,
.hero-object video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;

    object-fit: contain;
}



/* OBJECT META */

.hero-object-meta {
    position: absolute;
    right: 0;
    bottom: 55px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-object-meta span {
    padding: 8px 11px;

    border: 1px solid #ddd;
    border-radius: 100px;

    color: #fff;

    font-size: 8px;
    font-weight: 650;
    letter-spacing: .08em;
}


/* HERO BOTTOM */

.hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100px;

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

    padding: 0 var(--side-padding);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
}

.hero-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;

    padding: 0 32px;

    border-left: 1px solid #ddd;
}

.hero-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero-stat strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.05em;
}

.hero-stat span {
    color: #777;

    font-size: 9px;
    line-height: 1.45;
}

.hero-scroll {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #999;

    font-size: 9px;
    font-weight: 650;
    letter-spacing: .12em;
}

.hero-scroll i {
    position: relative;

    display: block;

    width: 45px;
    height: 1px;

    background: #bbb;
}

.hero-scroll i::after {
    position: absolute;
    right: 0;
    top: -2px;

    width: 5px;
    height: 5px;

    border-top: 1px solid #999;
    border-right: 1px solid #999;

    transform: rotate(45deg);

    content: "";
}


@keyframes wonaFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(1deg);
    }

}


/* =========================================================
   PRICE
========================================================= */

.price {
    padding: 120px 0 160px;
}

.price .section-heading {
    max-width: 900px;
}

.price-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    margin-top: 80px;
}

.price-card {
    position: relative;

    min-height: 550px;
    padding: 38px;

    box-sizing: border-box;

    background: #f6f6f6;

    overflow: hidden;

    transition:
        transform .5s var(--ease),
        background .5s var(--ease);
}

.price-card:hover {
    transform: translateY(-8px);
    background: #f0f0f0;
}

.price-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-number {
    color: #999;

    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
}

.price-type {
    color: #666;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

.price-card-price {
    display: flex;
    align-items: baseline;
    gap: 12px;

    margin-top: 90px;
}

.price-card-price strong {
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 700;
    letter-spacing: -.06em;
}

.price-card-price span {
    color: #888;

    font-size: 9px;
    font-weight: 650;
    letter-spacing: .1em;
}

.price-card h3 {
    margin: 25px 0 0;

    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.045em;
}

.price-card p {
    margin: 15px 0 0;

    color: #777;

    font-size: 13px;
    line-height: 1.75;
}

.price-card .text-link {
   position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	top: auto;
	transform: none;
}

.price-card-image {
    position: absolute;
    right: -40px;
    bottom: -100px;

    width: 70%;
    opacity: .12;

    pointer-events: none;
}

.price-card-image img {
    width: 100%;
}


/* =========================================================
   HANBOM × LUA
========================================================= */

.collaboration {
    padding: 150px 0;

    background: #111;
    color: #fff;
}

.collaboration .section-inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;

    gap: 30px;
}

.collaboration .eyebrow {
    color: #777;
}

.collaboration-content h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 1.02;
}

.collaboration-content > p {
    margin: 40px 0 0;

    color: #999;

    font-size: 14px;
    line-height: 1.9;
}

.collaboration-content .btn {
    margin-top: 45px;
}


/* COLLABORATION VISUAL */

.collaboration-visual {
    position: relative;

    min-height: 600px;

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

.brand-unit {
    position: relative;
    z-index: 2;

    width: 210px;
    height: 210px;

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

    padding: 30px;
    box-sizing: border-box;

    border: 1px solid #333;
    border-radius: 50%;

    background: #111;
}

.brand-unit .brand-name {
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -.04em;
}

.brand-unit small {
    margin-top: 12px;

    color: #777;

    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .12em;
}

.brand-hanbom {
    transform: translate(35px, -75px);
}

.brand-lua {
    transform: translate(-35px, 75px);
}

.brand-cross {
    position: absolute;
    z-index: 3;

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

    width: 65px;
    height: 65px;

    border: 1px solid #444;
    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 22px;
    font-weight: 300;
}

.brand-result {
    position: absolute;
    z-index: 1;

    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.brand-result strong {
    color: #fff;

    font-size: clamp(80px, 9vw, 150px);
    font-weight: 750;
    letter-spacing: -.08em;
    line-height: .8;
}

.brand-result strong span {
    color: #f5c400;
}

.brand-result small {
    margin-top: 20px;

    color: #666;

    font-size: 9px;
    font-weight: 650;
    letter-spacing: .15em;
}


/* =========================================================
   WORK
========================================================= */

.work {
    padding: 200px 0 220px;
}

.work-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.work-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
}

.work-card-image {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f4f4f4;
}

.work-card-image > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s var(--ease);
}

.work-card:hover .work-card-image > img {
    transform: scale(1.035);
}


/* KOKMINTON CHARACTER */

.work-character {
    position: absolute;
    right: -5%;
    bottom: -5%;

    width: 48%;

    pointer-events: none;

    animation: kokmintonFloat 5s ease-in-out infinite;
}

.work-character img {
    width: 100%;
    height: auto;
}

@keyframes kokmintonFloat {

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

    50% {
        transform: translateY(-12px);
    }

}


.work-card-info {
    position: relative;

    padding: 30px 0 0;
}

.work-index {
    display: block;

    margin-bottom: 22px;

    color: #999;

    font-size: 9px;
    font-weight: 650;
    letter-spacing: .08em;
}

.work-card-info h3 {
    margin: 0;

    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: 1;
}

.work-name {
    display: block;

    margin-top: 10px;

    color: #888;

    font-size: 10px;
    letter-spacing: .04em;
}

.work-card-info p {
    margin: 22px 0 0;

    color: #666;

    font-size: 13px;
    line-height: 1.75;
}

.work-link {
    display: inline-block;

    margin-top: 28px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}


/* =========================================================
   SERVICES
========================================================= */

.services {
    padding: 150px 0;
    background: #f6f6f6;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #ccc;
}

.service-item {
    min-height: 200px;

    padding: 32px 30px;

    border-right: 1px solid #ccc;

    box-sizing: border-box;

    transition:
        background .4s var(--ease);
}

.service-item:first-child {
    border-left: 1px solid #ccc;
}

.service-item:hover {
    background: #fff;
}

.service-number {
    display: block;

    color: #999;

    font-size: 9px;
    font-weight: 650;
}

.service-icon {
    width: 50px;
    height: 50px;

    margin-top: 75px;

    border: 1px solid #bbb;
    border-radius: 50%;
}

.service-item h3 {
    margin: 30px 0 0;

    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.service-item p {
    margin: 12px 0 0;

    color: #777;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   PROCESS
========================================================= */

.process {
    padding: 260px 0 280px;
}

.process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #111;
}

.process-item {
    min-height: 330px;

    padding: 32px 30px;

    border-right: 1px solid #ddd;

    box-sizing: border-box;
}

.process-item:first-child {
    border-left: 1px solid #ddd;
}

.process-number {
    display: block;

    color: #999;

    font-size: 9px;
    font-weight: 650;
}

.process-item h3 {
    margin: 95px 0 0;

    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.process-item p {
    margin: 15px 0 0;

    color: #777;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   CONTACT CTA
========================================================= */

.contact-cta {
    padding: 280px 0;

    border-top: 1px solid #eee;
}

.cta-content {
    text-align: center;
}

.cta-content .eyebrow {
    color: #999;
}

.cta-content h2 {
    margin: 0;

    font-size: clamp(50px, 6vw, 92px);
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: 1.02;
}

.cta-content p {
    margin: 35px 0 0;

    color: #777;

    font-size: 14px;
    line-height: 1.8;
}

.cta-content .btn {
    margin-top: 45px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .hero {
        padding-top: 100px;
        padding-bottom: 140px;
    }

    .hero .section-inner {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    .hero-title {
        font-size: clamp(65px, 8vw, 105px);
    }


    .price-list {
        gap: 15px;
    }

    .price-card {
        padding: 28px;
    }

    .price-card .text-link {
        left: 0px;
    }

    .collaboration .section-inner {
        gap: 60px;
    }

    .work-list {
        gap: 18px;
    }

}


@media (max-width: 800px) {

    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 35px;

        padding-bottom: 55px;
    }

    .section-heading h2 {
        font-size: clamp(38px, 10vw, 58px);
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

  .hero {
    position: relative;
    background: #000;
    
    /* 화면에 따라 늘어나되 무한정 커지지 않게 */
    /*height: clamp(680px, calc(100svh - 108px), 820px);*/

    overflow: hidden;
}
    .hero .section-inner {
        display: flex;
        flex-direction: column;

        gap: 30px;
    }

    .hero-title {
        font-size: clamp(65px, 17vw, 105px);
    }

    .hero-subtitle {
        margin-top: 30px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-visual {
        width: 100%;

        margin-top: 20px;
    }

    .hero-object {
        width: 90%;
    }

    .hero-object-meta {
        right: 0;
        bottom: 10px;
    }

    .hero-bottom {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        margin-top: 50px;
        padding: 0;

        align-items: flex-start;
        flex-direction: column;
        gap: 40px;
    }

    .hero-stats {
        width: 100%;
        justify-content: space-between;
    }

    .hero-stat {
        padding: 0 15px;
    }

    .hero-stat strong {
        font-size: 23px;
    }

    .hero-scroll {
        display: none;
    }


    /* -----------------------------------------------------
       PRICE
    ----------------------------------------------------- */

    .price {
        padding: 180px 0 190px;
    }

    .price-list {
        grid-template-columns: 1fr;

        margin-top: 75px;
        gap: 15px;
    }

    .price-card {
        min-height: 560px;
    }


    /* -----------------------------------------------------
       COLLABORATION
    ----------------------------------------------------- */

    .collaboration {
        padding: 190px 0;
    }

    .collaboration .section-inner {
        grid-template-columns: 1fr;

        gap: 90px;
    }

    .collaboration-content h2 {
        font-size: clamp(45px, 11vw, 68px);
    }

    .collaboration-visual {
        min-height: 480px;
    }

    .brand-unit {
        width: 165px;
        height: 165px;
    }

    .brand-unit .brand-name {
        font-size: 22px;
    }

    .brand-hanbom {
        transform: translate(25px, -60px);
    }

    .brand-lua {
        transform: translate(-25px, 60px);
    }

    .brand-result strong {
        font-size: 90px;
    }


    /* -----------------------------------------------------
       WORK
    ----------------------------------------------------- */

    .work {
        padding: 190px 0 210px;
    }

    .work-list {
        grid-template-columns: 1fr;

        gap: 110px;
    }

    .work-card-image {
        aspect-ratio: 1.15 / 1;
    }

    .work-card-info {
        padding-top: 28px;
    }


    /* -----------------------------------------------------
       SERVICES
    ----------------------------------------------------- */

    .services {
        padding: 190px 0;
    }

    .service-list {
        grid-template-columns: 1fr 1fr;
    }

    .service-item {
        min-height: 310px;
    }

    .service-item:nth-child(3),
    .service-item:nth-child(4) {
        border-top: 1px solid #ccc;
    }

    .service-item:nth-child(2n) {
        border-right: 1px solid #ccc;
    }


    /* -----------------------------------------------------
       PROCESS
    ----------------------------------------------------- */

    .process {
        padding: 200px 0 210px;
    }

    .process-list {
        grid-template-columns: 1fr 1fr;
    }

    .process-item {
        min-height: 290px;
    }

    .process-item:nth-child(3),
    .process-item:nth-child(4) {
        border-top: 1px solid #ddd;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .contact-cta {
        padding: 200px 0;
    }

    .cta-content h2 {
        font-size: clamp(45px, 11vw, 70px);
    }

}


@media (max-width: 480px) {

    .hero {
        padding-top: 75px;
    }

    .hero-title {
        font-size: 19vw;
    }

    .hero-visual {
        min-height: 340px;
    }

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

    .hero-stat {
        padding: 0 10px;
        gap: 6px;
    }

    .hero-stat strong {
        font-size: 19px;
    }

    .hero-stat span {
        font-size: 8px;
    }


    .price {
        padding: 150px 0 160px;
    }

    .price-card {
        min-height: 520px;
        padding: 25px;
    }

    .price-card .text-link {
        left: 25px;
        bottom: 30px;
    }


    .collaboration {
        padding: 160px 0;
    }

    .collaboration-visual {
        min-height: 400px;
    }

    .brand-unit {
        width: 135px;
        height: 135px;
        padding: 20px;
    }

    .brand-unit .brand-name {
        font-size: 18px;
    }

    .brand-result strong {
        font-size: 65px;
    }

    .brand-result small {
        font-size: 7px;
    }


    .work {
        padding: 160px 0 180px;
    }

    .work-list {
        gap: 90px;
    }

    .work-card-info h3 {
        font-size: 32px;
    }


    .services {
        padding: 160px 0;
    }

    .service-list {
        grid-template-columns: 1fr;
    }

    .service-item {
        min-height: 280px;

        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 0;
    }

    .service-item + .service-item {
        border-top: 1px solid #ccc;
    }


    .process {
        padding: 170px 0 180px;
    }

    .process-list {
        grid-template-columns: 1fr;
    }

    .process-item {
        min-height: 250px;

        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-top: 0;
    }

    .process-item + .process-item {
        border-top: 1px solid #ddd;
    }

    .process-item h3 {
        margin-top: 65px;
    }


    .contact-cta {
        padding: 170px 0;
    }

}

.hero {
    position: relative;
    overflow: hidden;
    background: #000;
	
}

.hero-object {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-object video {
    display: block;
    width: 100%;
    height: 100%;
     object-fit: cover;
    object-position: center;
   /* transform: scale(1.02);*/
}

.hero .section-inner {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    color: #fff;
}

.hero-content .desc {
    color: rgba(255,255,255,.65);
}

/* 버튼 */
.hero-content .btn {
    background: #fff;
    color: #000;
}

/* 하단 숫자 */
.hero-stat {
    color: #fff;
}

.hero-stat span {
    color: rgba(255,255,255,.5);
}

/* 오른쪽 카테고리 버튼 */
.hero-object-meta button {
    color: rgba(255,255,255,.75);
    border-color: rgba(255,255,255,.25);
}

/* SCROLL */
.hero-bottom {
    color: rgba(255,255,255,.5);
}

.hero-bottom::after {
    background: rgba(255,255,255,.4);
}


/* =========================================================
   WONA MOTION
========================================================= */

:root {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------
   기본 Reveal
--------------------------------- */

.reveal {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    transition:
        opacity .9s var(--motion-ease),
        transform .9s var(--motion-ease);
    will-change: opacity, transform;
}

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


/* 방향 */

.reveal-left {
    transform: translate3d(-50px, 0, 0);
}

.reveal-right {
    transform: translate3d(50px, 0, 0);
}

.reveal-scale {
    transform: scale(.94);
}

.reveal.is-visible.reveal-scale {
    transform: scale(1);
}


/* ---------------------------------
   Stagger
--------------------------------- */

.reveal-delay-1 {
    transition-delay: .08s;
}

.reveal-delay-2 {
    transition-delay: .16s;
}

.reveal-delay-3 {
    transition-delay: .24s;
}

.reveal-delay-4 {
    transition-delay: .32s;
}

.reveal-delay-5 {
    transition-delay: .40s;
}


/* ---------------------------------
   HERO
--------------------------------- */

.hero-content {
    will-change: transform, opacity;
}

.hero-visual {
    overflow: hidden;
}

.hero-object {
    will-change: transform;
    transform: scale(1.02);
    transition: transform 1.2s var(--motion-ease);
}


/* ---------------------------------
   이미지
--------------------------------- */

.motion-image {
    overflow: hidden;
}

.motion-image img {
    transform: scale(1.04);
    transition:
        transform 1.2s var(--motion-ease),
        opacity 1s var(--motion-ease);
}

.motion-image.is-visible img {
    transform: scale(1);
}


/* ---------------------------------
   WORK 이미지
--------------------------------- */

.work-card-image {
    overflow: hidden;
}

.work-card-image img {
    transition:
        transform .8s var(--motion-ease);
}

.work-card:hover .work-card-image img {
    transform: scale(1.045);
}


/* ---------------------------------
   카드
--------------------------------- */

.price-card,
.work-card {
    transition:
        transform .6s var(--motion-ease),
        box-shadow .6s var(--motion-ease);
}

.price-card:hover {
    transform: translateY(-6px);
}


/* ---------------------------------
   링크 화살표
--------------------------------- */

a,
button {
    -webkit-tap-highlight-color: transparent;
}

.motion-link .arrow,
.text-link .arrow,
.project-link .arrow {
    display: inline-block;
    transition:
        transform .45s var(--motion-ease);
}

.motion-link:hover .arrow,
.text-link:hover .arrow,
.project-link:hover .arrow {
    transform: translateX(6px);
}


/* ---------------------------------
   숫자
--------------------------------- */

.counter {
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------
   Process
--------------------------------- */

.process-item {
    position: relative;
}

.process-item::after {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .8s var(--motion-ease);
}

.process-item.is-visible::after {
    transform: scaleX(1);
}


/* ---------------------------------
   Service
--------------------------------- */

.service-item .service-icon {
    transition:
        transform .6s var(--motion-ease);
}

.service-item:hover .service-icon {
    transform: translateY(-5px);
}


/* ---------------------------------
   모바일
--------------------------------- */

@media (max-width: 767px) {

    .reveal {
        transform: translate3d(0, 30px, 0);
    }

    .reveal-left,
    .reveal-right {
        transform: translate3d(0, 30px, 0);
    }

    .reveal-scale {
        transform: scale(.97);
    }

    .price-card:hover {
        transform: none;
    }

    .work-card:hover .work-card-image img {
        transform: none;
    }

    .service-item:hover .service-icon {
        transform: none;
    }

}


/* ---------------------------------
   접근성
--------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

}


/* =========================================================
   HERO MOTION
========================================================= */

.hero {
    overflow: hidden;
}


/* ---------------------------------
   초기 상태
--------------------------------- */

.hero-reveal {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
}


/* ---------------------------------
   등장 애니메이션
--------------------------------- */

.hero.is-ready .hero-reveal {
    animation:
        heroFadeUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
}


/* 순차 등장 */

.hero.is-ready .hero-eyebrow {
    animation-delay: .15s;
}

.hero.is-ready .hero-title {
    animation-delay: .28s;
}

.hero.is-ready .hero-subtitle {
    animation-delay: .43s;
}

.hero.is-ready .hero-description {
    animation-delay: .53s;
}

.hero.is-ready .hero-button {
    animation-delay: .65s;
}

.hero.is-ready .hero-stats {
    animation-delay: .82s;
}


/* ---------------------------------
   Keyframe
--------------------------------- */

@keyframes heroFadeUp {

    0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0);
    }

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

}


/* ---------------------------------
   HERO VISUAL
--------------------------------- */

.hero-visual {
    overflow: hidden;
}


/*
 * 처음에는 영상이 조금 크게 들어와 있다가
 * 자연스럽게 원래 크기로 settle
 */

.hero-object {
    opacity: 0;
    transform:
        translate3d(0, 20px, 0)
        scale(1.08);

    transition:
        opacity 1.2s cubic-bezier(.22, 1, .36, 1),
        transform 1.8s cubic-bezier(.22, 1, .36, 1);

    will-change: transform, opacity;
}


.hero.is-ready .hero-object {
    opacity: 1;
    transform:
        translate3d(0, 0, 0)
        scale(1);
}


/* ---------------------------------
   HERO BUTTON
--------------------------------- */

.hero-button {
    position: relative;
    overflow: hidden;
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        background-color .3s ease;
}


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


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


.hero-button:hover .arrow {
    transform: translateX(6px);
}


/* ---------------------------------
   HERO SCROLL PARALLAX
--------------------------------- */

.hero-content,
.hero-visual {
    will-change: transform;
}


/* ---------------------------------
   모바일
--------------------------------- */

@media (max-width: 767px) {

    .hero-reveal {
        transform: translate3d(0, 25px, 0);
    }

    .hero.is-ready .hero-object {
        transform: scale(1);
    }

    .hero-button:hover {
        transform: none;
    }

}


/* ---------------------------------
   모션 최소화 설정
--------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .hero-reveal,
    .hero-object {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

}


/* =========================================
   HERO TITLE SPECIAL EFFECT
   기존 hero-reveal 모션과 분리
========================================= */

.hero-title {
    position: relative;
    overflow: visible;
}

/* 타이틀 위를 지나가는 빛 */
.hero-title::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -30%;
    width: 18%;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 197, 0, 0.00) 10%,
        rgba(255, 197, 0, 0.35) 50%,
        rgba(255, 197, 0, 0.00) 90%,
        transparent 100%
    );

    transform: skewX(-18deg);
    filter: blur(8px);

    opacity: 0;
    animation: hero-title-sweep 1s ease-out .2s forwards;
}


@keyframes hero-title-sweep {

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

    10% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

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


.hero-title em {
    font-style: normal;
    color: #111;
    transition: color .2s ease;
}

.hero-title.is-active em {
    color: #ffc400;
}


.hero-title {
    margin: 0;
    font-size: clamp(70px, 8vw, 150px);
    font-weight: 750;
    letter-spacing: -.075em;
    line-height: .86;
}

.hero-title .hero-reveal {
    display: block;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(52px, 14vw, 90px);
    }

	



}

.hero-visual,
.hero-visual video,
.hero-visual img,
.hero-object {
    transform: none !important;
}

.hero-stats {
    margin-top: 80px;
}



@media (max-width: 768px) {

    .hero-content {
        width: 100%;
        max-width: none;
    }

    .hero-title {
        width: 100%;
        max-width: none;
    }

    .hero-reveal {
        white-space: nowrap;
    }

	.hero-bottom{
		margin-top:0px;
	}

}


/* =========================================
   HANBOM × LUA : MERGE MOTION
========================================= */

.brand-hanbom,
.brand-lua,
.brand-result {
    transition:
        transform 1.2s cubic-bezier(.22, .61, .36, 1),
        opacity .8s ease;
}


/* 시작 상태 */
.collaboration-visual .brand-hanbom {
    transform: translate(35px, -75px);
}

.collaboration-visual .brand-lua {
    transform: translate(-30px, 60px);
}

.collaboration-visual .brand-result {
    opacity: 0;
    transform: translateY(30px) scale(.92);
}


/* 합쳐지는 상태 */
.collaboration-visual.is-merged .brand-hanbom {
    transform: translate(0, 0);
}

.collaboration-visual.is-merged .brand-lua {
    transform: translate(0, 0);
}

.collaboration-visual.is-merged .brand-result {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.collaboration-visual .brand-hanbom {
    transform: translate(45px, -90px) scale(.92);
    opacity: .75;
}

.collaboration-visual .brand-lua {
    transform: translate(-45px, 70px) scale(.92);
    opacity: .75;
}

.collaboration-visual .brand-result {
    opacity: 0;
    transform: translateY(20px) scale(.85);
}


/* merge */
.collaboration-visual.is-merged .brand-hanbom {
    transform: translate(0, 0) scale(1);
    opacity: 1;
}

.collaboration-visual.is-merged .brand-lua {
    transform: translate(0, 0) scale(1);
    opacity: 1;
}

.collaboration-visual.is-merged .brand-result {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* HANBOM */
.brand-hanbom {
    animation: brandHanbom 1.2s cubic-bezier(.22, 1, .36, 1) both;
}

/* LUA */
.brand-lua {
    animation: brandLua 1.2s cubic-bezier(.22, 1, .36, 1) .12s both;
}

@keyframes brandHanbom {
    0% {
        opacity: 0;
        transform: translate(35px, -25px) scale(.82);
    }

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

@keyframes brandLua {
    0% {
        opacity: 0;
        transform: translate(-35px, 25px) scale(.82);
    }

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


/* =========================================================
   WONA MAIN — SECTION TITLE MOTION
========================================================= */

/* 기본은 정상 노출
   JS가 실행될 때만 motion-ready가 붙어서 애니메이션 적용 */
.process .section-heading h2,
.contact-cta .cta-content h2 {
	opacity: 1;
}


/* ---------------------------------------------------------
   PROCESS
--------------------------------------------------------- */

.process .section-heading h2 {
	clip-path: inset(0 100% 0 0);
	transition:
		clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
}

.process .section-heading h2.is-visible {
	clip-path: inset(0 0 0 0);
}


/* PROCESS 보조 요소 */

.process .section-heading .eyebrow {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity .6s ease,
		transform .6s ease;
	transition-delay: .05s;
}

.process .section-heading .text-link {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity .6s ease,
		transform .6s ease;
	transition-delay: .45s;
}

.process .section-heading.is-visible .eyebrow,
.process .section-heading.is-visible .text-link {
	opacity: 1;
	transform: translateY(0);
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.contact-cta .cta-content h2 {
	clip-path: inset(0 100% 0 0);
	transition:
		clip-path 1.25s cubic-bezier(.77, 0, .18, 1);
}

.contact-cta .cta-content h2.is-visible {
	clip-path: inset(0 0 0 0);
}


/* CTA eyebrow */

.contact-cta .cta-content .eyebrow {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity .6s ease,
		transform .6s ease;
}

.contact-cta .cta-content.is-visible .eyebrow {
	opacity: 1;
	transform: translateY(0);
}


/* CTA description */

.contact-cta .cta-content p {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity .7s ease,
		transform .7s cubic-bezier(.22, 1, .36, 1);
	transition-delay: .65s;
}

.contact-cta .cta-content.is-visible p {
	opacity: 1;
	transform: translateY(0);
}


/* CTA button */

.contact-cta .cta-content .btn {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity .7s ease,
		transform .7s cubic-bezier(.22, 1, .36, 1);
	transition-delay: .8s;
}

.contact-cta .cta-content.is-visible .btn {
	opacity: 1;
	transform: translateY(0);
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.process .section-heading h2,
	.process .section-heading .eyebrow,
	.process .section-heading .text-link,
	.contact-cta .cta-content h2,
	.contact-cta .cta-content .eyebrow,
	.contact-cta .cta-content p,
	.contact-cta .cta-content .btn {
		transition: none !important;
		transform: none !important;
		clip-path: none !important;
		opacity: 1 !important;
	}

}






/* =========================================================
   WONA MAIN — REFINEMENT
========================================================= */

#wona-main {
	position: relative;
	overflow: hidden;
}


/* =========================================================
   SECTION COMMON
========================================================= */

#wona-main .section-inner {
	position: relative;
}

#wona-main .section-heading {
	position: relative;
}


/* =========================================================
   SECTION LABEL
========================================================= */

#wona-main .eyebrow {
	letter-spacing: .12em;
	font-size: 10px;
	font-weight: 500;
	color: #777;
}


/* =========================================================
   HEADING
========================================================= */

#wona-main .section-heading h2 {
	letter-spacing: -.045em;
}


/* =========================================================
   PRICE
========================================================= */

#wona-main .price-card {
	position: relative;
	overflow: hidden;
	transition:
		transform .5s cubic-bezier(.22,1,.36,1),
		box-shadow .5s cubic-bezier(.22,1,.36,1);
}

#wona-main .price-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

#wona-main .price-card-image {
	overflow: hidden;
}

#wona-main .price-card-image img {
	transition:
		transform .8s cubic-bezier(.22,1,.36,1);
}

#wona-main .price-card:hover .price-card-image img {
	transform: scale(1.04);
}


/* =========================================================
   WORK
========================================================= */

#wona-main .work-card-image {
	overflow: hidden;
}

#wona-main .work-card-image > img {
	transition:
		transform .8s cubic-bezier(.22,1,.36,1);
}

#wona-main .work-card:hover .work-card-image > img {
	transform: scale(1.035);
}


/* =========================================================
   SERVICES
========================================================= */

#wona-main .service-item {
	position: relative;
	transition:
		background-color .4s ease,
		padding .4s cubic-bezier(.22,1,.36,1);
}

#wona-main .service-item:hover {
	background: #fff;
}


/* =========================================================
   PROCESS
========================================================= */

#wona-main .process-item {
	transition:
		transform .45s cubic-bezier(.22,1,.36,1);
}

#wona-main .process-item:hover {
	transform: translateY(-4px);
}


/* =========================================================
   CTA
========================================================= */

#wona-main .contact-cta {
	position: relative;
	overflow: hidden;
}

#wona-main .cta-content {
	position: relative;
	z-index: 1;
}

#wona-main .contact-cta h2 {
	letter-spacing: -.05em;
}

/* =========================================================
   WONA — VISUAL REFINEMENT
   기존 마크업 그대로 사용
========================================================= */

#wona-main {
	position: relative;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

#wona-main .section-heading h2 {
	letter-spacing: -0.055em;
	line-height: 1.12;
	font-weight: 600;
}

#wona-main .section-heading p {
	color: #777;
	line-height: 1.7;
}

#wona-main .eyebrow {
	font-size: 9px;
	letter-spacing: .16em;
	font-weight: 500;
	color: #888;
}


/* =========================================================
   PRICE
========================================================= */

#wona-main .price {
	background: #fafafa;
}

#wona-main .price-list {
	gap: 1px;
	background: #ddd;
	border: 1px solid #ddd;
}

#wona-main .price-card {
	background: #fafafa;
	border: 0;
	transition:
		background-color .5s cubic-bezier(.22,1,.36,1),
		transform .6s cubic-bezier(.22,1,.36,1),
		box-shadow .6s cubic-bezier(.22,1,.36,1);
}

#wona-main .price-card:hover {
	background: #fff;
	transform: translateY(-8px);
	box-shadow: 0 24px 60px rgba(0,0,0,.08);
	z-index: 2;
}

#wona-main .price-card-top {
	border-bottom: 1px solid #e5e5e5;
}

#wona-main .price-number {
	color: #aaa;
	font-variant-numeric: tabular-nums;
}

#wona-main .price-type {
	letter-spacing: .1em;
	color: #888;
}

#wona-main .price-card-price strong {
	letter-spacing: -.055em;
	font-weight: 500;
}

#wona-main .price-card-price span {
	color: #999;
	letter-spacing: .08em;
}

#wona-main .price-card h3 {
	letter-spacing: -.035em;
}

#wona-main .price-card p {
	color: #777;
	line-height: 1.65;
}

#wona-main .price-card-image {
	overflow: hidden;
}

#wona-main .price-card-image img {
	transform: scale(1.001);
	transition:
		transform 1s cubic-bezier(.16,1,.3,1),
		filter 1s ease;
}

#wona-main .price-card:hover .price-card-image img {
	transform: scale(1.045);
}


/* =========================================================
   COLLABORATION
========================================================= */

#wona-main .collaboration {
	position: relative;
	overflow: hidden;
}

#wona-main .collaboration-content h2 {
	letter-spacing: -.065em;
	line-height: 1.04;
}

#wona-main .collaboration-content p {
	color: rgba(255,255,255,.55);
	line-height: 1.75;
}

#wona-main .collaboration-visual {
	position: relative;
}

#wona-main .brand-unit {
	border-color: rgba(255,255,255,.18);
	transition:
		border-color .5s ease,
		transform .6s cubic-bezier(.22,1,.36,1);
}

#wona-main .brand-unit:hover {
	border-color: rgba(255,255,255,.5);
	transform: translateY(-5px);
}

#wona-main .brand-name {
	letter-spacing: .03em;
}

#wona-main .brand-unit small {
	color: rgba(255,255,255,.38);
	line-height: 1.4;
}

#wona-main .brand-cross {
	color: rgba(255,255,255,.4);
}

#wona-main .brand-result strong {
	letter-spacing: -.075em;
}

#wona-main .brand-result small {
	color: rgba(255,255,255,.35);
	letter-spacing: .1em;
}


/* =========================================================
   WORK
========================================================= */

#wona-main .work {
	background: #fff;
}

#wona-main .work-list {
	border-top: 1px solid #ddd;
}

#wona-main .work-card {
	border-bottom: 1px solid #ddd;
	transition:
		padding .6s cubic-bezier(.22,1,.36,1),
		background-color .5s ease;
}

#wona-main .work-card:hover {
	background: #fafafa;
}

#wona-main .work-card-image {
	overflow: hidden;
}

#wona-main .work-card-image > img {
	transition:
		transform 1s cubic-bezier(.16,1,.3,1),
		filter .7s ease;
}

#wona-main .work-card:hover .work-card-image > img {
	transform: scale(1.035);
}

#wona-main .work-card-info {
	position: relative;
}

#wona-main .work-index {
	color: #aaa;
	font-size: 9px;
	letter-spacing: .08em;
}

#wona-main .work-card-info h3 {
	letter-spacing: -.045em;
}

#wona-main .work-name {
	color: #888;
	letter-spacing: .02em;
}

#wona-main .work-card-info p {
	color: #777;
	line-height: 1.6;
}

#wona-main .work-link {
	letter-spacing: .08em;
	font-size: 9px;
	transition: color .3s ease;
}

#wona-main .work-card:hover .work-link {
	color: #111;
}


/* =========================================================
   SERVICES
========================================================= */

#wona-main .services {
	background: #f6f6f6;
}

#wona-main .service-list {
	border-top: 1px solid #d9d9d9;
}

#wona-main .service-item {
	border-bottom: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	background: transparent;
	transition:
		background-color .45s ease,
		transform .5s cubic-bezier(.22,1,.36,1);
}

#wona-main .service-item:last-child {
	border-right: 0;
}

#wona-main .service-item:hover {
	background: #fff;
	transform: translateY(-3px);
}

#wona-main .service-number {
	color: #999;
	font-size: 9px;
	letter-spacing: .08em;
}

#wona-main .service-item h3 {
	letter-spacing: .02em;
	font-weight: 500;
}

#wona-main .service-item p {
	color: #777;
	line-height: 1.6;
}


/* =========================================================
   PROCESS
========================================================= */

#wona-main .process {
	background: #fff;
}

#wona-main .process-list {
	border-top: 1px solid #222;
	border-bottom: 1px solid #ddd;
}

#wona-main .process-item {
	position: relative;
	border-right: 1px solid #ddd;
	transition:
		background-color .45s ease,
		padding .5s cubic-bezier(.22,1,.36,1);
}

#wona-main .process-item:last-child {
	border-right: 0;
}

#wona-main .process-item:hover {
	background: #fafafa;
}

#wona-main .process-number {
	color: #aaa;
	font-size: 9px;
}

#wona-main .process-item h3 {
	letter-spacing: .03em;
	font-weight: 500;
}

#wona-main .process-item p {
	color: #777;
	line-height: 1.6;
}


/* =========================================================
   CTA
========================================================= */

#wona-main .contact-cta {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-top: 1px solid #eee;
}

#wona-main .cta-content {
	position: relative;
}

#wona-main .cta-content h2 {
	letter-spacing: -.065em;
	line-height: 1.04;
	font-weight: 600;
}

#wona-main .cta-content p {
	color: #888;
	line-height: 1.7;
}


/* =========================================================
   BUTTON
========================================================= */

#wona-main .btn {
	transition:
		background-color .35s ease,
		color .35s ease,
		transform .45s cubic-bezier(.22,1,.36,1);
}

#wona-main .btn:hover {
	transform: translateY(-3px);
}

#wona-main .btn-primary:hover {
	background: #ffca05;
	color: #111;
}

#wona-main .btn-outline-white:hover {
	background: #fff;
	color: #111;
}


/* =========================================================
   TEXT LINK
========================================================= */

#wona-main .text-link {
	position: relative;
}

#wona-main .text-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition:
		transform .45s cubic-bezier(.22,1,.36,1);
}

#wona-main .text-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}


/* =========================================================
   HERO DETAILS
========================================================= */

#wona-main .hero-title {
	letter-spacing: -.065em;
}

#wona-main .hero-title em {
	font-style: normal;
	color: #ffca05;
}

#wona-main .hero-description {
	color: rgba(255,255,255,.58);
	line-height: 1.7;
}

#wona-main .hero-stat strong {
	letter-spacing: -.05em;
}

#wona-main .hero-stat span {
	color: rgba(255,255,255,.45);
	line-height: 1.45;
}


.work-card-info{
	padding:20px;
}


/* =========================================================
   SUBTLE INTERACTION
========================================================= */

@media (min-width: 769px) {

	#wona-main .price-card,
	#wona-main .work-card,
	#wona-main .service-item,
	#wona-main .process-item {
		cursor: default;
	}

	#wona-main .work-card {
		cursor: pointer;
	}

}


/* =========================================================
   PRICE CARD — DETAIL LINK
========================================================= */

.price-card .text-link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	width: auto;
	max-width: none;

	height: 24px;
	padding: 0;

	gap: 8px;

	white-space: nowrap;
	overflow: visible;

	font-size: 12px;
	line-height: 1;
	color: #111;

	text-decoration: none;

	position: relative;
	z-index: 5;
}

.price-card .text-link span {
	display: inline-block;
	white-space: nowrap;
}

.price-card .text-link i {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 12px;
	height: 12px;

	font-size: 12px;
	line-height: 1;
	font-style: normal;

	flex: 0 0 auto;
}

.price-card .text-link::before,
.price-card .text-link::after {
	display: none;
}


/* =========================================================
   PRICE CARD DETAIL LINK
========================================================= */

#wona-main .price-card .text-link {
	position: absolute;
	left: 28px;
	bottom: 28px;

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

	width: auto;
	height: auto;

	padding: 0;
	margin: 0;

	gap: 10px;

	white-space: nowrap;
	overflow: visible;

	font-size: 12px;
	line-height: 1;
	color: #111;

	text-decoration: none;

	z-index: 10;
}

#wona-main .price-card .text-link span {
	display: inline-block;
	white-space: nowrap;
}

#wona-main .price-card .text-link i {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 12px;
	height: 12px;

	margin: 0;

	font-size: 14px;
	line-height: 1;
	font-style: normal;

	flex: 0 0 auto;
}

#wona-main .price-card .text-link::before,
#wona-main .price-card .text-link::after {
	display: none;
}




/* ==================================================
   HERO BACKGROUND VIDEO
================================================== */

.hero {
    position: relative;
    overflow: hidden;
    background: #000;
}

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

    width: 100%;
    height: 100%;

    display: block;

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

    z-index: 0;
}

.hero .section-inner {
    position: relative;
    z-index: 2;
}


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

    background: #000;
    opacity: 0;

    pointer-events: none;
}


.collaboration {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.03) 28%,
            transparent 58%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255,255,255,.05) 0%,
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #151515 45%,
            #0b0b0b 100%
        );
}

.collaboration::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 24px
        );

    opacity: 1;
    pointer-events: none;
}

.collaboration .section-inner {
    position: relative;
    z-index: 1;
}