@charset "UTF-8";

/* =========================================================
   RESET
========================================================= */

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

html,
body {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "pretendard", sans-serif;
    font-weight: 500;
    font-style: normal;

    color: #111;
    background: #fff;

    word-break: keep-all;

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

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

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

button,
input,
textarea,
select {
    margin: 0;
    padding: 0;

    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

img,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}


/* =========================================================
   ROOT
========================================================= */

:root {
    --font-primary: "pretendard", sans-serif;

    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --color-black: #111;
    --color-white: #fff;

    --page-padding-x: clamp(20px, 6.3vw, 120px);
}


/* =========================================================
   LAYOUT
========================================================= */

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

body {
    overflow-x: hidden;
}

#wrap {
    position: relative;
    width: 100%;
}


/* =========================================================
   FONT WEIGHT
========================================================= */

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}


/* =========================================================
   HEADER
========================================================= */

.hero__header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

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

    width: 100%;

    padding: 34px 45px 0;

    background: transparent;

    transition:
            padding 0.35s ease,
            background-color 0.35s ease,
            backdrop-filter 0.35s ease,
            box-shadow 0.35s ease;
}


/* =========================================================
   LOGO
========================================================= */

.hero__logo {
    position: relative;
    z-index: 2;

    margin: 0;
    padding: 0;
}

.hero__logo a {
    display: block;
}

.hero__logo img {
    display: block;

    width: 160px;
    height: auto;

    transform: scale(1);
    transform-origin: left top;

    transition: transform 0.35s ease;
}


/* =========================================================
   CENTER GNB
========================================================= */

.hero__gnb {
    position: absolute;

    top: 34px;
    left: 50%;

    display: flex;
    align-items: center;

    gap: 80px;

    height: 50px;

    transform: translateX(-50%);

    white-space: nowrap;

    transition: top 0.35s ease;
}

.hero__gnb a {
    position: relative;

    display: flex;
    align-items: center;

    height: 50px;
    padding: 0;

    color: #fff;

    font-family: "pretendard", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: -0.04em;
    text-decoration: none;

    transition: color 0.25s ease;
}


/* =========================================================
   GNB HOVER / ACTIVE
========================================================= */

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

    position: absolute;
    left: 0;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: #d5ad39;

    transition: width 0.25s ease;
}

.hero__gnb a:hover,
.hero__gnb a.is-active {
    color: #d5ad39;
}

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


/* =========================================================
   STORE
========================================================= */

.hero__store {
    position: relative;
    z-index: 2;

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

    gap: 7px;

    height: 50px;

    padding: 0 20px;

    border: 0;
    border-radius: 999px;

    color: #fff;
    background: rgba(255, 255, 255, 0.38);

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    font-family: "pretendard", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
            background-color 0.35s ease,
            color 0.35s ease;
}

.hero__store-icon {
    display: block;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   STORE HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .hero__store:hover {
        background: rgba(255, 255, 255, 0.55);
    }

}


/* =========================================================
   SCROLL HEADER
========================================================= */

.hero__header.is-scroll {
    padding: 14px 45px;

    align-items: center;

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

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);

    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04);
}


/* SCROLL LOGO */

.hero__header.is-scroll .hero__logo img {
    transform: scale(0.7);
    transform-origin: left center;
}


/* SCROLL GNB */

.hero__header.is-scroll .hero__gnb {
    top: 50%;

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

.hero__header.is-scroll .hero__gnb a {
    color: #222;
}

.hero__header.is-scroll .hero__gnb a:hover,
.hero__header.is-scroll .hero__gnb a.is-active {
    color: #d5ad39;
}


/* SCROLL STORE */

.hero__header.is-scroll .hero__store {
    background: #d5ad39;
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {

    .hero__header.is-scroll .hero__store:hover {
        background: #c99f2d;
    }

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.hero__menu-btn {
    display: none;

    position: relative;
    z-index: 1002;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

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

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    cursor: pointer;

    transition:
            background-color 0.3s ease,
            transform 0.3s ease;
}


/* =========================================================
   HAMBURGER LINE
========================================================= */

.hero__menu-btn span {
    position: absolute;
    left: 50%;

    display: block;

    width: 14px;
    height: 1.5px;

    background: #fff;

    transform: translateX(-50%);

    transition:
            top 0.3s ease,
            transform 0.3s ease,
            opacity 0.2s ease,
            background-color 0.3s ease;
}

.hero__menu-btn span:nth-child(1) {
    top: 9px;
}

.hero__menu-btn span:nth-child(2) {
    top: 14px;
}

.hero__menu-btn span:nth-child(3) {
    top: 19px;
}


/* =========================================================
   SCROLL MENU BUTTON
========================================================= */

.hero__header.is-scroll .hero__menu-btn {
    background: #d5ad39;
}

.hero__header.is-scroll .hero__menu-btn span {
    background: #fff;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;

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

    visibility: hidden;
    opacity: 0;

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

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    transition:
            opacity 0.35s ease,
            visibility 0.35s ease;
}

.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 34px;

    width: 100%;

    padding: 80px 30px 40px;
}

.mobile-menu__nav a {
    position: relative;

    display: block;

    padding: 5px 0;

    color: #222;

    font-family: "pretendard", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: -0.05em;
    text-decoration: none;
}

.mobile-menu__nav a.is-active {
    color: #d5ad39;
}

.mobile-menu__nav a.is-active::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #d5ad39;
}


/* =========================================================
   MENU BUTTON OPEN
   햄버거 → X
========================================================= */

.hero__menu-btn.is-open {
    background: #fff;
}

.hero__menu-btn.is-open span {
    background: #222;
}

.hero__menu-btn.is-open span:nth-child(1) {
    top: 14px;

    transform:
            translateX(-50%)
            rotate(45deg);
}

.hero__menu-btn.is-open span:nth-child(2) {
    opacity: 0;
}

.hero__menu-btn.is-open span:nth-child(3) {
    top: 14px;

    transform:
            translateX(-50%)
            rotate(-45deg);
}

body.menu-open {
    overflow: hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .hero__header {
        padding: 28px 36px 0;
    }

    .hero__logo img {
        width: 96px;
    }

    .hero__gnb {
        top: 28px;
        height: 46px;
        gap: 40px;
    }

    .hero__gnb a {
        height: 46px;
        font-size: 14px;
    }

    .hero__store {
        height: 46px;
        padding: 0 18px;
        font-size: 14px;
    }

    .hero__header.is-scroll {
        padding: 12px 36px;
    }

    .hero__header.is-scroll .hero__gnb {
        top: 50%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hero__header {
        padding: 20px 15px 0;
    }

    .hero__logo img {
        width: 82px;
    }

    .hero__gnb {
        top: 20px;
        height: 46px;
        gap: 35px;
    }

    .hero__store {
        width: 40px;
        height: 40px;

        padding: 0;

        border-radius: 50%;
    }

    .hero__store > span {
        display: none;
    }

    .hero__store-icon {
        width: 18px;
        height: 18px;

        flex: none;
    }

    .hero__header.is-scroll {
        padding: 10px 15px;
    }

    .hero__header.is-scroll .hero__logo img {
        transform: scale(0.7);
    }

}


/* =========================================================
   SMALL MOBILE
   480px 이하
========================================================= */

@media (max-width: 480px) {

    /* 로고 */
    .hero__logo img {
        width: 95px;
    }

    /* PC GNB 숨김 */
    .hero__gnb {
        display: none;
    }

    /* 공식 스토어 */
    .hero__store {
        width: 40px;
        height: 40px;

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

    .hero__store-icon {
        width: 18px;
        height: 18px;
    }

    /* 햄버거 */
    .hero__menu-btn {
        display: block;

        width: 40px;
        height: 40px;

        flex: 0 0 40px;
    }

    /* 햄버거 선 */
    .hero__menu-btn span {
        width: 18px;
        height: 1.5px;
    }

    .hero__menu-btn span:nth-child(1) {
        top: 12px;
    }

    .hero__menu-btn span:nth-child(2) {
        top: 19px;
    }

    .hero__menu-btn span:nth-child(3) {
        top: 26px;
    }

    /* X 중앙 */
    .hero__menu-btn.is-open span:nth-child(1),
    .hero__menu-btn.is-open span:nth-child(3) {
        top: 19px;
    }

}


/* =========================================================
   481px 이상
========================================================= */

@media (min-width: 481px) {

    .mobile-menu {
        display: none;
    }

}

/* =========================================================
   SECTION 01 : HERO
========================================================= */

.hero {
    position: relative;

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

    overflow: hidden;

    color: #fff;
    background: #000;
}


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

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    pointer-events: none;
}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100vw !important;
    height: 56.25vw !important;

    min-width: 177.7778vh !important;
    min-height: 100vh !important;

    max-width: none !important;

    border: 0;

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

    pointer-events: none;
}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

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

    pointer-events: none;

    background: rgba(0, 0, 0, 0.16);
}


/*!* =========================================================*/
   /*HEADER*/
/*========================================================= *!*/

/*.hero__header {*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*z-index: 100;*/

    /*display: flex;*/
    /*align-items: flex-start;*/
    /*justify-content: space-between;*/

    /*width: 100%;*/

    /*padding: 34px 45px 0;*/
/*}*/


/*!* =========================================================*/
   /*LOGO*/
/*========================================================= *!*/

/*.hero__logo {*/
    /*margin: 0;*/
    /*padding: 0;*/
/*}*/

/*.hero__logo img {*/
    /*display: block;*/

    /*width: 160px;*/
    /*height: auto;*/
/*}*/


/*!* =========================================================*/
   /*OFFICIAL STORE BUTTON*/
/*========================================================= *!*/

/*.hero__store {*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*gap: 7px;*/

    /*height: 50px;*/

    /*padding: 0 20px;*/

    /*border: 0;*/
    /*border-radius: 999px;*/

    /*color: #fff;*/
    /*background: rgba(255, 255, 255, 0.38);*/

    /*-webkit-backdrop-filter: blur(5px);*/
    /*backdrop-filter: blur(5px);*/

    /*font-family: "pretendard", sans-serif;*/
    /*font-size: 18px;*/
    /*font-weight: 600;*/
    /*line-height: 1;*/

    /*text-decoration: none;*/

    /*transition: background-color 0.25s ease;*/
/*}*/

/*.hero__store-icon {*/
    /*display: block;*/

    /*width: 18px;*/
    /*height: 18px;*/

    /*flex: 0 0 18px;*/

    /*fill: none;*/
    /*stroke: currentColor;*/
    /*stroke-width: 1.8;*/
    /*stroke-linecap: round;*/
    /*stroke-linejoin: round;*/
/*}*/

/*@media (hover: hover) and (pointer: fine) {*/

    /*.hero__store:hover {*/
        /*background: rgba(255, 255, 255, 0.55);*/
    /*}*/

/*}*/


/* =========================================================
   MAIN CONTENT
========================================================= */

.hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

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

    width: min(90%, 720px);

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


/* =========================================================
   MAIN TITLE IMAGE
========================================================= */

.hero__title {
    display: block;

    width: min(100%, 570px);
    height: auto;
}


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

.hero__watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    height: 51px;

    margin-top: 28px;
    padding: 0 12px 0 17px;

    border: 0;
    border-radius: 999px;

    color: #fff;
    background: rgba(255, 255, 255, 0.38);

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    font-family: "pretendard", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition: background-color 0.25s ease;
}

.hero__watch-icon {
    position: relative;

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

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border-radius: 50%;

    background: #fff;
}

.hero__watch-icon::after {
    content: "";

    width: 0;
    height: 0;

    margin-left: 2px;

    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #777;
}

@media (hover: hover) and (pointer: fine) {

    .hero__watch:hover {
        background: rgba(255, 255, 255, 0.55);
    }

}


/* =========================================================
   SCROLL DOWN
========================================================= */

.hero__scroll {
    position: absolute;
    bottom: 34px;
    left: 50%;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #fff;

    transform: translateX(-50%);

    pointer-events: none;
}


/* Double Arrow */

.hero__scroll-arrow {
    position: relative;

    display: block;

    width: 14px;
    height: 16px;

    flex: 0 0 11px;
}

.hero__scroll-arrow::before,
.hero__scroll-arrow::after {
    content: "";

    position: absolute;
    left: 2px;

    width: 9px;
    height: 9px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    transform: rotate(45deg);
}

.hero__scroll-arrow::before {
    top: 0;
}

.hero__scroll-arrow::after {
    top: 5px;
}


/* Scroll Text */

.hero__scroll-text {
    font-family: "pretendard", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: -0.02em;
}


/* =========================================================
   TABLET
   1024px 이하 : 일반 스크롤 / 영상 16:9 전체 노출
========================================================= */

@media (max-width: 1024px) {

    .hero {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    /* Charlla 영상도 Hero 크기에 맞춤 */
    .hero__media {
        width: 100%;
        height: 100%;
    }

    .hero__video {
        top: 0;
        left: 0;

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

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

        aspect-ratio: 16 / 9;

        transform: none;
    }

    /*.hero__header {*/
        /*padding: 28px 36px 0;*/
    /*}*/

    /*.hero__logo img {*/
        /*width: 96px;*/
    /*}*/

    /*.hero__store {*/
        /*height: 46px;*/
        /*padding: 0 18px;*/
        /*font-size: 14px;*/
    /*}*/

    .hero__content {
        width: min(86%, 650px);
    }

    .hero__title {
        width: min(100%, 500px);
    }

    .hero__watch {
        height: 47px;
        margin-top: 25px;
        font-size: 14px;
    }

    .hero__watch-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .hero__scroll {
        bottom: 28px;
    }

    .hero__scroll-text {
        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
   767px 이하
========================================================= */

@media (max-width: 767px) {

    /*.hero {*/
        /*position: relative;*/


        /*aspect-ratio: auto;*/


        /*height: clamp(430px, 75svh, 650px);*/
        /*min-height: 0;*/

        /*overflow: hidden;*/
    /*}*/


    /* =====================================================
       CHARLLA VIDEO AREA
    ===================================================== */

    .hero {
        position: relative;
        aspect-ratio: auto;
        height: clamp(350px, 60svh, 520px);
        min-height: 0;
        overflow: hidden;
    }

    .hero__media {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

    .hero__video {
        position: absolute;

        top: 50%;
        left: 50%;

        /* 1024 CSS의 !important 값을 다시 덮음 */
        width: auto !important;
        height: 100% !important;

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

        aspect-ratio: 16 / 9;

        max-width: none !important;

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



    /*.hero__header {*/
        /*padding: 20px 15px 0;*/
    /*}*/

    /*.hero__logo img {*/
        /*width: 82px;*/
    /*}*/

    /*.hero__store {*/
        /*width: 40px;*/
        /*height: 40px;*/
        /*padding: 0;*/

        /*border-radius: 50%;*/
    /*}*/

    /*!* 공식 스토어 텍스트 숨김 *!*/
    /*.hero__store > span {*/
        /*display: none;*/
    /*}*/

    /*.hero__store-icon {*/
        /*width: 18px;*/
        /*height: 18px;*/
        /*flex: none;*/
    /*}*/

    .hero__content {
        top: auto;
        bottom: 45px;

        width: calc(100% - 48px);

        transform: translateX(-50%);
    }

    .hero__title {
        display: none;
    }

    .hero__watch {
        height: 40px;
        margin-top: 22px;
        padding: 0 5px 0 12px;
        font-size: 13px;
    }

    .hero__watch-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .hero__scroll {
        bottom: 16px;
        gap: 6px;
    }

    .hero__scroll-text {
        font-size: 11px;
    }

}

/* =========================================================
   작은 MOBILE
   480px 이하
========================================================= */

@media (max-width: 480px) {

    .hero__watch {
        height: 30px;
        /*padding: 0 5px 0 12px;*/
        font-size: 12px;
    }

    .hero__watch-icon {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}

/* =========================================================
   HERO OPENING VISUAL
========================================================= */

.hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    /* 영상이 안 보일 때 검정 */
    background: #000;

    /* 첫 렌더 상태 */
    opacity: 0;
    transform: scale(1.14);
    transform-origin: center center;

    will-change: transform, opacity;
}

/* =========================================================
   SECTION 02 : BRAND MESSAGE
========================================================= */

.brand-message {
    position: relative;
    overflow: hidden;

    height: 100vh;
    min-height: 700px;

    background:
            #fdfcf9
            url("../img/m02_bg.jpg")
            center center / cover no-repeat;
}


/* INNER */

.brand-message__inner {
    position: absolute;
    inset: 0;

    width: 100%;
}


/* =========================================================
   LEFT COPY
========================================================= */

.brand-message__left {
    position: absolute;
    top: 14%;
    left: 6.3%;
    z-index: 3;
}

.brand-message__headline {
    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.055em;
}

.brand-message__headline p {
    margin: 0;
}

.brand-message .gold {
    color: #d5ad39;
}

.brand-message__desc {
    margin-top: 30px;

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.04em;
}


/* =========================================================
   PRODUCT
========================================================= */

.brand-message__product {
    position: absolute;
    top: 13%;
    left: 50%;
    z-index: 2;

    width: clamp(278px, 19.14vw, 365px);

    transform: translateX(-50%);
}

.brand-message__product img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   RIGHT COPY
========================================================= */

.brand-message__right {
    position: absolute;
    right: 6.3%;
    bottom: 15%;
    z-index: 3;

    display: block;

    color: #111;
    text-align: right;

    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.055em;

}

.brand-message__right p {
    margin: 0;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .brand-message {
        height: auto;
        min-height: 600px;
    }

    .brand-message__inner {
        min-height: 600px;

        padding:
                70px
                var(--page-padding-x);
    }

    .brand-message__left {
        top: 70px;
        left: var(--page-padding-x);
    }

    .brand-message__headline,
    .brand-message__right {
        font-size: clamp(28px, 4vw, 40px);
    }

    .brand-message__desc {
        margin-top: 22px;
        font-size: 16px;
    }

    .brand-message__product {
        top: 13%;

        width: 200px;
    }

    .brand-message__right {
        right: var(--page-padding-x);
        bottom: 70px;
    }

}


/* =========================================================
   MOBILE
   767px 이하
========================================================= */

@media (max-width: 767px) {

    /* SECTION */

    .brand-message {
        height: auto;
        min-height: 0;
        overflow: hidden;

        background-size: auto 100%;
        background-position: center top;
        background-repeat: no-repeat;
    }


    /* INNER */

    .brand-message__inner {
        position: relative;
        inset: auto;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-height: 0;

        padding: 65px 30px 0;
    }


    /* =====================================================
       LEFT COPY
    ===================================================== */

    .brand-message__left {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        z-index: 3;
    }

    .brand-message__headline {
        font-size: 34px;
        line-height: 1.25;
        letter-spacing: -0.055em;
    }

    .brand-message__desc {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.55;
        letter-spacing: -0.04em;
    }


    /* =====================================================
       PRODUCT
    ===================================================== */

    .brand-message__product {
        position: relative;
        top: auto;
        left: auto;

        align-self: center;

        width: 200px;
        height: 450px;
        margin-top:0px;

        transform: none;
    }

    .brand-message__product img {
        position: absolute;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: auto;

        -webkit-mask-image: linear-gradient(
                to bottom,
                #000 0%,
                #000 55%,
                transparent 70%
        );

        mask-image: linear-gradient(
                to bottom,
                #000 0%,
                #000 55%,
                transparent 70%
        );
    }


    /* =====================================================
       RIGHT COPY
    ===================================================== */

    .brand-message__right {
        position: relative;
        right: auto;
        bottom: auto;

        width: 100%;

        margin-top: 25px;
        margin-bottom: 65px;

        font-size: 32px;
        line-height: 1.35;
        letter-spacing: -0.055em;

        text-align: right;
    }

}


/* =========================================================
   SMALL MOBILE
   480px 이하
========================================================= */

@media (max-width: 480px) {

    /* INNER */

    .brand-message__inner {
        padding: 50px 20px 0;
    }


    /* =====================================================
       LEFT COPY
    ===================================================== */

    .brand-message__headline {
        font-size: 28px;
        line-height: 1.27;
    }

    .brand-message__desc {
        margin-top: 17px;

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


    /* =====================================================
       PRODUCT
    ===================================================== */

    .brand-message__product {
        width: 150px;
        height: 330px;

        margin-top: 15px;

    }


    /* =====================================================
       RIGHT COPY
    ===================================================== */

    .brand-message__right {
        margin-top: 22px;
        margin-bottom: 50px;

        font-size: 27px;
        line-height: 1.35;
    }

}

/* =========================================================
   SECTION 03 : POONGSEONG VITAL
========================================================= */

.formula {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 980;
    overflow: hidden;

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

    color: #fff;
    background: #9b4b00;
}


/* =========================================================
   BACKGROUND
   원본 1920 × 980 전체 노출
========================================================= */

.formula__bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background:
            url("../img/m03_bg.jpg")
            center center / contain no-repeat;

    transform-origin: center center;
    will-change: transform;
}


/* =========================================================
   WATER HIGHLIGHT
========================================================= */

.formula__water {
    position: absolute;
    top: 0;
    right: 7%;
    z-index: 1;

    width: 7%;
    height: 100%;

    pointer-events: none;
    opacity: 0;

    background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.20) 48%,
            rgba(255, 255, 255, 0.05) 70%,
            transparent 100%
    );

    filter: blur(8px);
    transform: translateY(-35%);
}


/* =========================================================
   CONTENT
   섹션 정중앙 유지
========================================================= */

.formula__content {
    position: relative;
    z-index: 2;

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

    width: min(90%, 1000px);

    padding: clamp(50px, 5vw, 95px) 0;

    text-align: center;
}


/* =========================================================
   MAIN COPY
   SECTION 02 headline과 동일
========================================================= */

.formula__headline {
    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.055em;
}

.formula__headline p {
    margin: 0;
}


/* =========================================================
   DESCRIPTION
   SECTION 02 description과 동일
========================================================= */

.formula__desc {
    margin-top: clamp(20px, 1.8vw, 34px);

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.04em;
}


/* =========================================================
   PUNGSEONG VITAL TITLE IMAGE
========================================================= */

.formula__title {
    display: block;

    width: clamp(240px, 22vw, 420px);
    height: auto;

    margin-top: clamp(35px, 3.4vw, 65px);
}


/* =========================================================
   TABLET
   1024px 이하
========================================================= */

@media (max-width: 1024px) {

    .formula {
        /*
         * 1920 × 980 비율 그대로 유지
         * 별도의 height / min-height 사용하지 않음
         */
        aspect-ratio: 1920 / 980;
    }

    .formula__content {
        width: 88%;
        padding: 45px 0;
    }

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

    .formula__desc {
        margin-top: 22px;
        font-size: 16px;
    }

    .formula__title {
        width: 260px;
        margin-top: 38px;
    }

}


/* =========================================================
   MOBILE
   767px 이하
========================================================= */

@media (max-width: 767px) {

    /*
     * 모바일부터는 1920:980 비율을 강제하면
     * 섹션 높이가 지나치게 낮아짐.
     *
     * 따라서 콘텐츠 높이를 기준으로 섹션 생성.
     */

    .formula {
        aspect-ratio: auto;

        min-height: 0;

        padding: 70px 0;
    }


    /* 배경 전체 영역 */

    .formula__bg {
        background-size: cover;
        background-position: center center;
    }


    /* CONTENT */

    .formula__content {
        width: 100%;

        padding: 0 30px;
    }


    /* HEADLINE */

    .formula__headline {
        font-size: 34px;
        line-height: 1.3;
    }


    /* DESCRIPTION */

    .formula__desc {
        margin-top: 22px;

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

    .formula__desc br {
        display: none;
    }


    /* TITLE */

    .formula__title {
        width: 200px;

        margin-top: 42px;
    }


    /* WATER */

    .formula__water {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
   480px 이하
========================================================= */

@media (max-width: 480px) {

    .formula {
        padding: 55px 0;
    }


    .formula__content {
        padding: 0 20px;
    }


    .formula__headline {
        font-size: 28px;
        line-height: 1.3;
    }


    .formula__desc {
        margin-top: 18px;

        font-size: 14px;
    }


    .formula__title {
        width: 140px;

        margin-top: 35px;
    }

}

/* =========================================================
   SECTION 04 : DAILY POINT
========================================================= */

.daily-point {
    position: relative;
    display: flex;

    width: 100%;

    overflow: hidden;

    background: #fdfcf9;
}


/* =========================================================
   LEFT
========================================================= */

.daily-point__intro {
    position: relative;
    z-index: 2;

    flex: 0 0 50%;
    width: 50%;
    min-width: 0;

    background-color: #fdfcf9;
    background-image: url("../img/m02_bg.jpg");
    background-position: left top;
    background-repeat: repeat-y;

    /* SECTION 02와 정확히 같은 실제 패턴 크기 */
    background-size: 1920px auto;
}

/* LEFT CONTENT */

.daily-point__intro-inner {
    position: absolute;

    top: 14%;
    left: 12.6%;
    right: 8%;
}


/* HEADLINE */

.daily-point__headline {
    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.055em;
}

.daily-point__headline p {
    margin: 0;
}

.daily-point .gold {
    color: #d5ad39;
}


/* DESCRIPTION */

.daily-point__desc {
    margin-top: 38px;

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.04em;
}

.daily-point__desc p {
    margin: 0;
}


/* =========================================================
   NAVIGATION
========================================================= */

.daily-point__nav {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 10;

    display: flex;
    flex-direction: column;

    width: clamp(52px, 3.96vw, 76px);
}


/* BUTTON */

.daily-point__prev,
.daily-point__next {
    position: relative;

    width: clamp(52px, 3.96vw, 76px);
    height: clamp(52px, 3.96vw, 76px);

    margin: 0;
    padding: 0;

    border: 0;

    background: #050505;

    cursor: pointer;
}

.daily-point__prev {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}


/* ARROW */

.daily-point__prev span,
.daily-point__next span {
    position: absolute;

    top: 50%;
    left: 50%;

    /* 화살표 자체도 같이 축소 */
    width: clamp(10px, 0.78vw, 15px);
    height: clamp(10px, 0.78vw, 15px);

    border-top: clamp(1px, 0.078vw, 1.5px) solid #fff;
    border-right: clamp(1px, 0.078vw, 1.5px) solid #fff;
}


/* PREV = UP */

.daily-point__prev span {
    transform:
            translate(-50%, -30%)
            rotate(-45deg);
}


/* NEXT = DOWN */

.daily-point__next span {
    transform:
            translate(-50%, -70%)
            rotate(135deg);
}


/* =========================================================
   RIGHT SLIDER
========================================================= */

.daily-point__slider {
    position: relative;

    flex: 0 0 50%;
    width: 50%;
    min-width: 0;

    /* m04 이미지 원본 비율 960 × 980 */
    height: auto;
    aspect-ratio: 960 / 980;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* =========================================================
   SWIPER WRAPPER
========================================================= */

.daily-point__slider .swiper-wrapper {
    position: relative;

    display: flex;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    box-sizing: content-box;
}


/* =========================================================
   SLIDE
   width는 Swiper가 직접 계산
========================================================= */

.daily-point__slider .swiper-slide {
    position: relative;

    flex-shrink: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   IMAGE
========================================================= */

.daily-point__image {
    position: absolute;
    inset: 0;

    display: block;

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

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

    transform: scale(1.035);
    transform-origin: center center;

    transition:
            transform 1.4s cubic-bezier(.22, .61, .36, 1);
}


/* ACTIVE IMAGE */

.daily-point__slide.swiper-slide-active
.daily-point__image {
    transform: scale(1);
}

/* =========================================================
   BOTTOM SHADE
========================================================= */

.daily-point__shade {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;

    height: 42%;

    pointer-events: none;

    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.05) 35%,
            rgba(0, 0, 0, 0.28) 100%
    );
}


/* =========================================================
   SLIDE COPY
========================================================= */

.daily-point__copy {
    position: absolute;

    left: 15%;
    right: 10%;
    bottom: 13%;

    z-index: 2;

    color: #fff;
}


/* =========================================================
   SLIDE COPY : FIRST LINE
========================================================= */

.daily-point__copy strong {
    display: block;

    font-size: clamp(28px, 2.2vw, 44px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.05em;

    opacity: 0;

    transform: translateY(25px);

    transition:
            opacity 0.55s ease 0.15s,
            transform 0.55s ease 0.15s;
}


/* =========================================================
   SLIDE COPY : SECOND LINE
========================================================= */

.daily-point__copy p {
    margin: 20px 0 0;

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.04em;

    opacity: 0;

    transform: translateY(22px);

    transition:
            opacity 0.55s ease 0.42s,
            transform 0.55s ease 0.42s;
}


/* =========================================================
   ACTIVE COPY
   1줄 → 2줄 순차 등장
========================================================= */

.daily-point__slide.swiper-slide-active
.daily-point__copy strong {
    opacity: 1;

    transform: translateY(0);
}


.daily-point__slide.swiper-slide-active
.daily-point__copy p {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   TABLET
   1024px 이하
========================================================= */

@media (max-width: 1024px) {

    .daily-point__intro {
        /*
         * 02의 패턴 크기에 맞추기 위해
         * 1024 이하에서 배경을 확대
         */
        background-size: auto 70vh;
        background-position: center center;
    }

    /* LEFT */

    .daily-point__intro-inner {
        top: 70px;
        left: var(--page-padding-x);
        right: 35px;
    }


    .daily-point__headline {
        font-size: clamp(28px, 4vw, 40px);
    }


    .daily-point__desc {
        margin-top: 25px;

        font-size: 16px;
    }


    /* SLIDER */


    /* COPY */

    .daily-point__copy {
        left: 10%;
        right: 8%;
        bottom: 10%;
    }


    .daily-point__copy strong {
        font-size: clamp(24px, 3vw, 32px);
    }


    .daily-point__copy p {
        margin-top: 14px;

        font-size: 16px;
    }


    /* NAV */

    .daily-point__nav {
        width: 64px;
    }


    .daily-point__prev,
    .daily-point__next {
        width: 64px;
        height: 64px;
    }

}


/* =========================================================
   MOBILE
   767px 이하
========================================================= */

@media (max-width: 767px) {

    .daily-point {
        display: block;

        min-height: 0;
    }

    /* =====================================================
       INTRO
    ===================================================== */
    .daily-point__intro {
        width: 100%;
        min-width: 0;

        padding: 65px 30px;

        background-size: auto 100vh;
        background-position: center top;
    }


    .daily-point__intro-inner {
        position: relative;

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

    .daily-point__headline {
        font-size: 34px;
        line-height: 1.25;
    }

    .daily-point__desc {
        margin-top: 22px;

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

    /* =====================================================
       SLIDER
    ===================================================== */
    .daily-point__slider {
        width: 100%;
        min-width: 0;

        height: auto;

        aspect-ratio: 960 / 980;
    }

    .daily-point__slider .swiper-wrapper {
        height: 100%;
    }

    .daily-point__slide {
        height: 100%;
    }

    .daily-point__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    /* =====================================================
       SLIDE COPY
       이미지 위 유지
    ===================================================== */
    .daily-point__copy {
        left: 30px;
        right: 30px;
        bottom: 70px;
    }

    .daily-point__copy strong {
        font-size: 26px;
        line-height: 1.3;

        transform: translateY(20px);
    }

    .daily-point__copy p {
        margin-top: 12px;

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

        transform: translateY(18px);
    }

    .daily-point__slide.swiper-slide-active
    .daily-point__copy strong,
    .daily-point__slide.swiper-slide-active
    .daily-point__copy p {
        transform: translateY(0);
    }

    /* =====================================================
       MOBILE NAVIGATION
    ===================================================== */
    .daily-point__nav {
        top: 100%;
        right: 0px;
        bottom: auto;

        flex-direction: row;

        width: auto;

        /* 버튼 높이만큼 위로 올려 이미지 안쪽에 배치 */
        transform: translateY(-52px);
    }

    .daily-point__prev,
    .daily-point__next {
        width: 52px;
        height: 52px;
    }

    .daily-point__prev {
        border-right: 1px solid rgba(255, 255, 255, 0.7);
        border-bottom: 0;
    }

    /* LEFT ARROW */
    .daily-point__prev span {
        transform: translate(-35%, -50%) rotate(-135deg);
    }

    /* RIGHT ARROW */
    .daily-point__next span {
        transform: translate(-65%, -50%) rotate(45deg);
    }

}

/* =========================================================
   SMALL MOBILE
   480px 이하
========================================================= */

@media (max-width: 480px) {

    .daily-point__intro {
        padding: 50px 20px;
    }


    .daily-point__headline {
        font-size: 28px;
        line-height: 1.27;
    }


    .daily-point__desc {
        margin-top: 18px;

        font-size: 14px;
    }


    /* SLIDER */

    .daily-point__slider {
        aspect-ratio: 960 / 980;
    }


    /* COPY */

    .daily-point__copy {
        left: 20px;
        right: 20px;
        bottom: 60px;
    }


    .daily-point__copy strong {
        font-size: 23px;
    }


    .daily-point__copy p {
        margin-top: 10px;

        font-size: 14px;
    }


    /* NAV */

    .daily-point__nav {
        right: 0;
        top:101%;
    }


    .daily-point__prev,
    .daily-point__next {
        width: 48px;
        height: 48px;
    }

}

    /* =========================================================
       MOBILE : 481px ~ 767px
       2개 슬라이드 모두 COPY 노출
    ========================================================= */

    @media (min-width: 481px) and (max-width: 767px) {

        /* 첫 번째 보이는 슬라이드 */
        .daily-point__slide.swiper-slide-active
        .daily-point__copy strong,

            /* 오른쪽 두 번째 보이는 슬라이드 */
        .daily-point__slide.swiper-slide-next
        .daily-point__copy strong {
            opacity: 1;
            transform: translateY(0);
        }


        /* 첫 번째 보이는 슬라이드 */
        .daily-point__slide.swiper-slide-active
        .daily-point__copy p,

            /* 오른쪽 두 번째 보이는 슬라이드 */
        .daily-point__slide.swiper-slide-next
        .daily-point__copy p {
            opacity: 1;
            transform: translateY(0);
        }

    }

    /* =========================================================
       SECTION 05 : DAILY ROUTINE
    ========================================================= */

    .daily-routine {
        position: relative;

        width: 100%;

        overflow: hidden;

        color: #fff;

        background-color: #202122;
        background-image: url("../img/m05_bg.jpg");
        background-position: center top;

        /* 화면 너비에 비례해서 같이 축소 */
        background-size: 100% auto;

        background-repeat: repeat-y;
    }


    /* =========================================================
       INNER
    ========================================================= */

    .daily-routine__inner {
        position: relative;

        width: 100%;

        padding-top: clamp(70px, 6.5vw, 125px);
    }


    /* =========================================================
       HEAD
    ========================================================= */

    .daily-routine__head {
        position: relative;
        z-index: 2;

        width: 90%;
        margin: 0 auto;

        text-align: center;
    }


    /* HEADLINE */

    .daily-routine__headline {
        font-size: clamp(38px, 3.33vw, 70px);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.055em;
    }

    .daily-routine__headline p {
        margin: 0;
    }


    /* DESCRIPTION */

    .daily-routine__desc {
        margin-top: clamp(25px, 2.2vw, 42px);

        font-size: clamp(17px, 1.45vw, 30px);
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -0.04em;
    }

    .daily-routine__desc p {
        margin: 0;
    }


    /* =========================================================
       CARDS
    ========================================================= */

    .daily-routine__cards {
        display: grid;

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

        gap: clamp(6px, 0.55vw, 12px);

        width: 100%;

        margin-top: clamp(60px, 5.2vw, 100px);
    }


    /* =========================================================
       CARD
    ========================================================= */

    .daily-routine__card {
        position: relative;

        width: 100%;

        overflow: hidden;

        /*
           시안 비율
           필요하면 실제 m05 이미지 원본 비율로 변경
        */
        aspect-ratio: 1.47 / 1;
    }


    /* IMAGE */

    .daily-routine__image {
        display: block;

        width: 100%;
        height: 100%;

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

        transform: scale(1);

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


    /* HOVER */

    @media (hover: hover) {

        .daily-routine__card:hover
        .daily-routine__image {
            transform: scale(1.035);
        }

    }


    /* =========================================================
       SHADE
    ========================================================= */

    .daily-routine__shade {
        position: absolute;

        inset: 0;
        z-index: 1;

        pointer-events: none;

        background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 45%,
                rgba(0, 0, 0, 0.08) 65%,
                rgba(0, 0, 0, 0.48) 100%
        );
    }


    /* =========================================================
       CARD COPY
    ========================================================= */

    .daily-routine__copy {
        position: absolute;

        left: 6.5%;
        right: 6.5%;
        bottom: 10%;

        z-index: 2;

        color: #fff;
    }


    .daily-routine__copy strong {
        display: block;

        font-size: clamp(20px, 1.55vw, 30px);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.04em;
    }


    .daily-routine__copy p {
        margin: 5px 0 0;

        font-size: clamp(20px, 1.55vw, 30px);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: -0.045em;
    }


    /* =========================================================
       TABLET
       768px ~ 1024px
    ========================================================= */

    @media (max-width: 1024px) {

        .daily-routine{
            background-size: auto 70vh;
        }

        .daily-routine__inner {
            padding-top: 70px;
        }


        .daily-routine__headline {
            font-size: clamp(28px, 4vw, 40px);
        }


        .daily-routine__desc {
            margin-top: 25px;

            font-size: 16px;
        }


        .daily-routine__cards {
            margin-top: 60px;

            gap: 5px;
        }


        .daily-routine__copy strong,
        .daily-routine__copy p {
            font-size: clamp(16px, 2vw, 21px);
        }

    }


    /* =========================================================
       MOBILE
       767px 이하
    ========================================================= */

    @media (max-width: 767px) {

        .daily-routine__inner {
            padding-top: 65px;
        }


        /* HEAD */

        .daily-routine__head {
            width: 100%;

            padding: 0 30px;
        }


        .daily-routine__headline {
            font-size: 34px;
            line-height: 1.25;
        }


        .daily-routine__desc {
            margin-top: 22px;

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


        /* CARDS */

        .daily-routine__cards {
            display: block;

            width: 100%;

            margin-top: 55px;
        }


        .daily-routine__card {
            width: 100%;

            /*
               모바일에서도 지나치게 길어지지 않게
               가로형 이미지 유지
            */
            aspect-ratio: 1.45 / 1;

            margin-bottom: 5px;
        }
        .daily-routine__card:last-child {
            margin-bottom: 0;
        }



        /* COPY */

        .daily-routine__copy {
            left: 30px;
            right: 30px;
            bottom: 30px;
        }


        .daily-routine__copy strong {
            font-size: 22px;
        }


        .daily-routine__copy p {
            margin-top: 4px;

            font-size: 20px;
        }

    }


    /* =========================================================
       SMALL MOBILE
       480px 이하
    ========================================================= */

    @media (max-width: 480px) {

        .daily-routine__inner {
            padding-top: 50px;
        }


        .daily-routine__head {
            padding: 0 20px;
        }


        .daily-routine__headline {
            font-size: 28px;
            line-height: 1.27;
        }


        .daily-routine__desc {
            margin-top: 18px;

            font-size: 14px;
        }


        .daily-routine__cards {
            margin-top: 45px;
        }


        .daily-routine__card {
            aspect-ratio: 1.35 / 1;
        }


        .daily-routine__copy {
            left: 20px;
            right: 20px;
            bottom: 22px;
        }


        .daily-routine__copy strong {
            font-size: 19px;
        }


        .daily-routine__copy p {
            font-size: 17px;
        }

    }

/* =========================================================
   FOOTER
========================================================= */

.footer {
    position: relative;

    width: 100%;

    background: #191919;
    color: rgba(255, 255, 255, 0.62);
}


/* =========================================================
   INNER
========================================================= */

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

    width: 100%;
    min-height: 265px;

    padding: 45px 30px;

    text-align: center;
}


/* =========================================================
   LOGO
========================================================= */

.footer__logo {
    display: block;

    width: clamp(110px, 7.3vw, 138px);
    height: auto;
}


/* =========================================================
   COMPANY INFO
========================================================= */

.footer__info {
    margin-top: 30px;

    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.025em;
}

.footer__info p {
    margin: 0;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .footer__inner {
        min-height: 220px;

        padding:
                40px
                20px;
    }

    .footer__logo {
        width: 110px;
    }

    .footer__info {
        margin-top: 25px;

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

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .footer__inner {
        min-height: 200px;

        padding:
                35px
                20px;
    }

    .footer__logo {
        width: 100px;
    }

    .footer__info {
        margin-top: 22px;

        font-size: 11px;
        line-height: 1.65;
    }

}

/* =========================================================
   SUB PAGE : 공통
========================================================= */


/* =========================================================
   sub : INTRO
========================================================= */

.sub_intro {
    position: relative;

    width: 100%;
    overflow: hidden;

    color: #fff;

    background-color: #202122;
    background-image: url("../img/m05_bg.jpg");
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y;
}


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

    width: 90%;

    min-height: 465px;

    margin: 0 auto;
    padding: 270px 0 140px;

    text-align: center;
}


/* HEADLINE
   daily-routine__headline 동일
*/

.sub_intro__headline {
    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.055em;
}

.sub_intro__headline p {
    margin: 0;
}


/* DESCRIPTION
   daily-routine__desc 동일
*/

.sub_intro__desc {
    margin-top: clamp(25px, 2.2vw, 42px);

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.04em;
}

.sub_intro__desc p {
    margin: 0;
}


/* =========================================================
   SUB VISUAL
========================================================= */

.sub-visual {
    position: relative;

    width: 100%;
    overflow: hidden;

    background: #000;
}


.sub-visual__image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}

@media (max-width: 1024px) {

    /* INTRO */
    .sub_intro {
        background-size: auto 70vh;
    }

    .sub_intro__inner {
        min-height: 390px;
        padding: 200px 0 70px;
    }

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

    .sub_intro__desc {
        margin-top: 25px;
        font-size: 16px;
    }

}


@media (max-width: 767px) {

    /* =====================================================
       INTRO
    ===================================================== */
    .sub_intro {
        background-size: auto 70vh;
        background-position: center top;
    }

    .sub_intro__inner {
        width: 100%;
        min-height: 0;

        padding: 160px 30px 65px;
    }

    .sub_intro__headline {
        font-size: 34px;
        line-height: 1.25;
    }

    .sub_intro__desc {
        margin-top: 22px;

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

    /* =====================================================
       VISUAL
    ===================================================== */
    .sub-visual__image {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {

    /* INTRO */
    .sub_intro__inner {
        padding: 130px 20px 50px;
    }

    .sub_intro__headline {
        font-size: 28px;
        line-height: 1.27;
    }

    .sub_intro__desc {
        margin-top: 18px;

        font-size: 14px;
    }

}

    /* =========================================================
       STORY  : MESSAGE
    ========================================================= */

.story-message {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #fff;
    color: #111;
}


.story-message__inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6%;

    width: 100%;

    padding:
            clamp(80px, 7vw, 135px)
            6.3%
            clamp(170px, 15vw, 290px);
}



/* =========================================================
   LEFT HEADLINE
   BRAND MESSAGE 기준
========================================================= */

.story-message__headline {
    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.055em;
}

.story-message__headline p {
    margin: 0;
}


.story-message .gold {
    color: #d5ad39;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.story-message__content {
    padding-left: 0;
}


.story-message__paragraph {
    margin-bottom: clamp(20px, 1.5vw, 30px);

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.04em;
}


.story-message__paragraph:last-child {
    margin-bottom: 0;
}


.story-message__paragraph p {
    margin: 0;
}


/* =========================================================
   LARGE BACKGROUND TYPO
========================================================= */

.story-message__word {
    position: absolute;
    left: 0;
    bottom: -0.08em;
    z-index: 1;

    width: 100%;

    color: #faf8f1;

    font-family: var(--font-primary);
    font-size: 13.2vw;
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: 0.15em;

    text-align: center;
    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    /* MESSAGE */

    .story-message__inner {
        padding:
                80px
                var(--page-padding-x)
                180px;
    }

    .story-message__headline {
        font-size: clamp(28px, 4vw, 40px);
    }

    .story-message__paragraph {
        font-size: 16px;
    }


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       MESSAGE
    ===================================================== */

    .story-message__inner {
        display: block;

        padding:
                65px
                30px
                130px;
    }


    .story-message__headline {
        font-size: 34px;
        line-height: 1.35;
        text-align: center;
    }


    .story-message__content {
        margin-top: 45px;
        padding-left: 0;
        text-align: center;
    }


    .story-message__paragraph {
        margin-bottom: 22px;

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


    /* BACK TYPO */

    .story-message__word {
        bottom: 10px;

        line-height: 0.8;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    /* MESSAGE */

    .story-message__inner {
        padding:
                50px
                20px
                70px;
    }


    .story-message__headline {
        font-size: 28px;
        line-height: 1.35;
    }


    .story-message__content {
        margin-top: 35px;
    }


    .story-message__paragraph {
        margin-bottom: 20px;

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


    .story-message__word {
        bottom: 8px;


    }

}

/* =========================================================
 RESEARCH : CONTENT
========================================================= */

.research-content {
    position: relative;

    width: 100%;
    overflow: hidden;

    background: #fff;
    color: #111;
}


.research-content__inner {
    width: 100%;

    padding:
            clamp(90px, 7.5vw, 145px)
            6.3%
            clamp(90px, 8vw, 155px);
}


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

.research-content__text {
    text-align: center;
}


/* HEADLINE
   메인 BRAND MESSAGE 폰트 체계
========================================================= */

.research-content__headline {
    margin: 0;

    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.055em;
}


.research-content__headline span {
    color: #d5ad39;
}


/* DESCRIPTION
   메인 BRAND MESSAGE 본문 폰트 체계
========================================================= */

.research-content__desc {
    margin-top: clamp(25px, 2.2vw, 42px);

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.04em;
}


.research-content__desc p {
    margin: 0 0 clamp(20px, 1.5vw, 30px);
}


.research-content__desc p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   NOTE
========================================================= */

.research-content__note {
    margin: clamp(12px, 1vw, 18px) 0 0;

    font-size: clamp(10px, 0.7vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.03em;

    color: #555;
}


/* =========================================================
   VISUAL
========================================================= */

.research-content__visual {
    width: 82%;
    max-width: 1500px;

    margin:
            clamp(65px, 5.5vw, 105px)
            auto
            0;
}


.research-content__visual img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .research-content__inner {
        padding:
                80px
                var(--page-padding-x)
                90px;
    }


    .research-content__headline {
        font-size: clamp(28px, 4vw, 40px);
    }


    .research-content__desc {
        margin-top: 25px;

        font-size: 16px;
        line-height: 1.55;
    }


    .research-content__note {
        font-size: 10px;
    }


    .research-content__visual {
        width: 90%;
        margin-top: 60px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .research-content__inner {
        padding:
                65px
                30px
                65px;
    }


    .research-content__headline {
        font-size: 34px;
        line-height: 1.35;
    }


    .research-content__desc {
        margin-top: 28px;

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


    .research-content__desc p {
        margin-bottom: 22px;
    }


    .research-content__note {
        margin-top: 14px;

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


    .research-content__visual {
        width: 100%;
        margin-top: 45px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .research-content__inner {
        padding:
                50px
                20px
                50px;
    }


    .research-content__headline {
        font-size: 28px;
        line-height: 1.35;
    }


    .research-content__desc {
        margin-top: 25px;

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


    .research-content__desc p {
        margin-bottom: 20px;
    }


    .research-content__note {
        font-size: 8px;
    }


    .research-content__visual {
        margin-top: 38px;
    }

}


/* =========================================================
   PRODUCT : POINT
========================================================= */

.product-point {
    width: 100%;
    padding: clamp(90px, 8vw, 155px) 6.3%;

    background: #fff;
    color: #111;
}


.product-point__item {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    column-gap: 6%;

    width: 100%;

    padding: clamp(25px, 2.2vw, 42px) 0;

    border-bottom: 1px solid #d5d5d5;
}


.product-point__item:first-child {
    padding-top: 0;
}


.product-point__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


/* IMAGE */

.product-point__visual {
    width: 100%;
    overflow: hidden;
}


.product-point__visual img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 0.8s ease;
}


/* CONTENT */

.product-point__content {
    width: 100%;
}


.product-point__headline {
    margin: 0;

    font-size: clamp(30px, 2.5vw, 50px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.055em;
}


.product-point__headline span {
    color: #d5ad39;
}


.product-point__desc {
    margin: clamp(20px, 1.6vw, 30px) 0 0;

    font-size: clamp(17px, 1.25vw, 25px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.04em;
}


.product-point__note {
    margin: 12px 0 0;

    font-size: clamp(9px, 0.65vw, 13px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.03em;

    color: #555;
}



/* =========================================================
   PRODUCT : MOMENT
   INDEX .daily-routine 레이아웃 기준
========================================================= */

.product-moment {
    position: relative;

    width: 100%;
    overflow: hidden;

    padding-top: clamp(75px, 6vw, 115px);

    color: #fff;

    background-color: #202122;
    background-image: url("../img/m05_bg.jpg");
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y;
}


/* =========================================================
   MOMENT : HEAD
========================================================= */

.product-moment__head {
    width: 90%;
    margin: 0 auto;

    padding-bottom: clamp(55px, 4vw, 75px);

    text-align: center;
}


.product-moment__head h2 {
    margin: 0;

    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.055em;
}


.product-moment__head p {
    margin: clamp(22px, 1.8vw, 34px) 0 0;

    font-size: clamp(17px, 1.45vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.04em;
}


/* =========================================================
   MOMENT : GRID
   PC = 4칸
   좌우 여백 없음 / 이미지 사이만 간격
========================================================= */

.product-moment__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;

    gap: clamp(6px, 0.55vw, 12px);

    margin-bottom: clamp(20px, 4vw, 30px);
}


/* =========================================================
   MOMENT : ITEM
========================================================= */

.product-moment__item {
    position: relative;

    width: 100%;
    aspect-ratio: 1.47 / 1;

    overflow: hidden;

    cursor: default;
}


.product-moment__item img {
    display: block;

    width: 100%;
    height: 100%;

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

    transform: scale(1);

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


/* =========================================================
   MOMENT : OVERLAY
========================================================= */

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

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

    padding: 30px;

    background: rgba(0, 0, 0, 0);

    opacity: 0;

    transition:
            opacity 0.45s ease,
            background-color 0.45s ease;

    pointer-events: none;
}


.product-moment__overlay p {
    margin: 0;

    color: #fff;

    font-size: clamp(17px, 1.35vw, 27px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.04em;

    text-align: center;

    transform: translateY(20px);

    transition: transform 0.45s ease;
}


/* =========================================================
   MOMENT : DESKTOP HOVER
========================================================= */

@media (hover: hover) {

    .product-moment__item:hover img {
        transform: scale(1.07);
    }


    .product-moment__item:hover .product-moment__overlay {
        opacity: 1;

        background: rgba(0, 0, 0, 0.35);
    }


    .product-moment__item:hover .product-moment__overlay p {
        transform: translateY(0);
    }

}



/* =========================================================
   PRODUCT : INFORMATION
========================================================= */

.product-info {
    width: 100%;

    background: #fff;
    color: #111;
}


.product-info__inner {
    width: 72%;
    max-width: 1400px;

    margin: 0 auto;

    padding:
            clamp(90px, 7vw, 135px)
            0
            clamp(100px, 8vw, 155px);
}


.product-info__headline {
    margin: 0 0 clamp(55px, 4vw, 75px);

    font-size: clamp(38px, 3.33vw, 70px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.055em;

    text-align: center;
}


/* TABLE */

.product-info__table {
    width: 100%;

    border-top: 1px solid #777;
}


.product-info__row {
    display: flex;
    align-items: center;

    width: 100%;

    padding: clamp(15px, 1.2vw, 22px) 15px;

    border-bottom: 1px solid #aaa;

    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.035em;
}


.product-info__label {
    flex: 0 0 150px;

    font-weight: 600;
}


.product-info__value {
    flex: 1;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    /* =====================================================
       POINT
    ===================================================== */

    .product-point {
        padding: 80px var(--page-padding-x);
    }


    .product-point__item {
        column-gap: 5%;

        padding: 28px 0;
    }


    .product-point__headline {
        font-size: clamp(28px, 4vw, 40px);
    }


    .product-point__desc {
        font-size: 16px;
    }


    .product-point__note {
        font-size: 9px;
    }


    /* =====================================================
       MOMENT
    ===================================================== */

    .product-moment {
        background-size: auto 70vh;
    }


    .product-moment__head h2 {
        font-size: clamp(28px, 4vw, 40px);
    }


    .product-moment__head p {
        font-size: 16px;
    }


    .product-moment__grid {
        gap: 5px;
    }


    .product-moment__overlay {
        padding: 20px;
    }


    .product-moment__overlay p {
        font-size: 17px;
    }


    /* =====================================================
       INFO
    ===================================================== */

    .product-info__inner {
        width: 82%;
    }


    .product-info__headline {
        font-size: clamp(28px, 4vw, 40px);
    }


    .product-info__row {
        font-size: 15px;
    }

}



/* =========================================================
   MOBILE
   INDEX .daily-routine과 동일하게 1열
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       POINT
    ===================================================== */

    .product-point {
        padding: 50px 30px 65px;
    }


    .product-point__item {
        display: block;

        padding: 35px 0;
    }


    .product-point__item:first-child {
        padding-top: 0;
    }


    .product-point__visual {
        width: 100%;
    }


    .product-point__content {
        margin-top: 28px;

        text-align: center;
    }


    .product-point__headline {
        font-size: 30px;
        line-height: 1.25;
    }


    .product-point__desc {
        margin-top: 18px;

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


    .product-point__note {
        margin-top: 10px;

        font-size: 9px;
    }


    /* =====================================================
       MOMENT
    ===================================================== */

    .product-moment {
        padding-top: 65px;

        background-size: auto 70vh;
        background-position: center top;
    }


    .product-moment__head {
        width: 100%;

        padding:
                0
                30px
                45px;
    }


    .product-moment__head h2 {
        font-size: 34px;
        line-height: 1.25;
    }


    .product-moment__head p {
        margin-top: 22px;

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


    /*
       인덱스 daily-routine 모바일과 동일하게
       GRID 해제 → 한 줄에 이미지 하나
    */

    .product-moment__grid {
        display: block;

        width: 100%;

        /*
           마지막 이미지와 다음 흰색 섹션 사이
           검은 배경 여백
        */
        padding-bottom: 30px;
    }


    .product-moment__item {
        width: 100%;

        aspect-ratio: 1.45 / 1;

        margin-bottom: 5px;
    }


    .product-moment__item:last-child {
        margin-bottom: 0;
    }


    .product-moment__item img {
        width: 100%;
        height: 100%;

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


    .product-moment__overlay {
        padding: 20px;
    }


    .product-moment__overlay p {
        font-size: 20px;
        line-height: 1.4;
    }


    /*
       모바일에서는 기본 이미지 상태.
       터치하고 있는 동안만
       어두워짐 + 확대 + 텍스트 표시
    */

    .product-moment__item:active img {
        transform: scale(1.07);
    }


    .product-moment__item:active .product-moment__overlay {
        opacity: 1;

        background: rgba(0, 0, 0, 0.35);
    }


    .product-moment__item:active .product-moment__overlay p {
        transform: translateY(0);
    }


    /* =====================================================
       INFO
    ===================================================== */

    .product-info__inner {
        width: auto;

        margin: 0 30px;

        padding: 65px 0;
    }


    .product-info__headline {
        margin-bottom: 40px;

        font-size: 34px;
    }


    .product-info__row {
        display: block;

        padding: 14px 5px;

        font-size: 14px;
    }


    .product-info__label {
        display: block;

        margin-bottom: 5px;
    }


    .product-info__value {
        display: block;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    /* =====================================================
       POINT
    ===================================================== */

    .product-point {
        padding: 45px 20px 50px;
    }


    .product-point__item {
        padding: 30px 0;
    }


    .product-point__content {
        margin-top: 24px;
    }


    .product-point__headline {
        font-size: 28px;
    }


    .product-point__desc {
        font-size: 14px;
    }


    .product-point__note {
        font-size: 8px;
    }


    /* =====================================================
       MOMENT
    ===================================================== */

    .product-moment {
        padding-top: 50px;
    }


    .product-moment__head {
        padding:
                0
                20px
                35px;
    }


    .product-moment__head h2 {
        font-size: 28px;
        line-height: 1.27;
    }


    .product-moment__head p {
        margin-top: 18px;

        font-size: 14px;
    }


    .product-moment__grid {
        padding-bottom: 25px;
    }


    .product-moment__item {
        aspect-ratio: 1.45 / 1;

        margin-bottom: 5px;
    }


    .product-moment__item:last-child {
        margin-bottom: 0;
    }


    .product-moment__overlay {
        padding: 20px;
    }


    .product-moment__overlay p {
        font-size: 18px;
        line-height: 1.4;
    }


    /* =====================================================
       INFO
    ===================================================== */

    .product-info__inner {
        margin: 0 20px;

        padding: 50px 0;
    }


    .product-info__headline {
        margin-bottom: 30px;

        font-size: 28px;
    }


    .product-info__row {
        font-size: 13px;
    }

}