@charset "utf-8";

:root {
    /* 배경 */
    --color-bg: #FCFBF9;

    /* 포인트 - static1 진한 기본 · static2 브라운 포인트 */
    --color-static1: #252525;
    --color-static2: #423A36;

    /* 글자 - font1 제목·본문 · font2 보조 · font3 비활성·구분 · font4 흰색 */
    --color-font1: #252525;
    --color-font2: #595959;
    --color-font3: #737373;
    --color-font4: #FFFFFF;

    /* 테두리 */
    --color-border: #DFDEDA;

    --color-white: #FFFFFF;
    --color-black: #000000;

    /* 알파용 RGB 토큰 - rgb(var(--rgb-white) / 0.4) */
    --rgb-bg: 252 251 249;
    --rgb-white: 255 255 255;
    --rgb-static1: 37 37 37;
    --rgb-black: 0 0 0;

    /* 폰트 패밀리 - 타이틀 Forevs (Adobe Fonts) · 기본 영문 Noto Sans + 한글 Noto Sans KR */
    --font-family: 'Noto Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-serif: 'forevs', 'Times New Roman', serif;

    /* 폰트 크기 - 1920 시안값이 최대, 14 이하는 고정 */
    --fs-60: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem);
    --fs-52: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
    --fs-48: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
    --fs-44: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    --fs-40: clamp(1.625rem, 1.2rem + 1.3vw, 2.5rem);
    --fs-36: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
    --fs-32: clamp(1.375rem, 1.12rem + 0.9vw, 2rem);
    --fs-28: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
    --fs-24: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    --fs-20: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
    --fs-18: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
    --fs-16: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
    --fs-15: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --fs-14: 0.875rem;
    --fs-13: 0.8125rem;
    --fs-12: 0.75rem;
    --fs-10: 0.625rem;

    /* 간격 */
    --space-200: clamp(6.25rem, 3.75rem + 7.5vw, 12.5rem);
    --space-160: clamp(5rem, 3rem + 6vw, 10rem);
    --space-120: clamp(4rem, 2.5rem + 4.5vw, 7.5rem);
    --space-100: clamp(3.5rem, 2.2rem + 3.8vw, 6.25rem);
    --space-80: clamp(3rem, 2rem + 3vw, 5rem);
    --space-60: clamp(2.25rem, 1.6rem + 2vw, 3.75rem);
    --space-50: clamp(2rem, 1.5rem + 1.8vw, 3.125rem);
    --space-40: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    --space-30: clamp(1.4375rem, 1.2rem + 0.8vw, 1.875rem);
    --space-24: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --space-20: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --space-16: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
    --space-12: 0.75rem;
    --space-8: 0.5rem;

    /* 컴포넌트 크기 */
    --size-56: clamp(3rem, 2.7rem + 1vw, 3.5rem);
    --size-48: clamp(2.5rem, 2.2rem + 1vw, 3rem);
    --size-44: 2.75rem;

    /* 기타 */
    --header-height: 74px;
    --box-shadow: 0 6px 16px rgb(var(--rgb-black) / 0.06);
    --radius: 0;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 유틸 */
.filter-white {filter: brightness(0) invert(1);}
.font2-txt {color: var(--color-font2) !important;}
.font3-txt {color: var(--color-font3) !important;}
.weight400 {font-weight: 400 !important;}
.weight500 {font-weight: 500 !important;}
.weight600 {font-weight: 600 !important;}

/* 타이포그래피 - TODO: 디자인 컨펌 후 시안 실측값 확인 */
.hero-tit {font-family: var(--font-serif); font-size: var(--fs-48); font-weight: 300; line-height: 1.2;}
.section-tit {font-family: var(--font-serif); font-size: var(--fs-36); font-weight: 300; line-height: 1.25;}
.body-txt {font-size: var(--fs-16); font-weight: 400; line-height: 1.6;}
.product-name {font-size: var(--fs-15); font-weight: 400; line-height: 1.5;}
.ui-txt {font-size: var(--fs-14); font-weight: 400; line-height: 1.4;}
.caption {font-size: var(--fs-14); font-weight: 400; line-height: 1;}

/* 버튼 */
.btn-list {display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.ico-btn {position: relative; width: var(--size-44); height: var(--size-44); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s;}
.ico-btn img {width: 28px; height: 28px;}

/* 드롭다운 - [data-dropdown] > button[data-dropdown-btn] + ul[data-dropdown-menu] (js/layout.js) */
.custom-dropdown {position: relative;}
.custom-dropdown-btn {display: flex; align-items: center; column-gap: 6px; min-height: var(--size-44); color: var(--color-font1);}
.custom-dropdown-btn img {flex: none; width: 20px; height: 20px; transition: transform 0.2s;}
.custom-dropdown-btn[aria-expanded="true"] img {transform: rotate(180deg);}
.custom-dropdown-menu {position: absolute; top: 100%; left: 0; z-index: 10; min-width: 100%; padding: 6px 0; border: 1px solid var(--color-border); background-color: var(--color-white); box-shadow: var(--box-shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;}
.custom-dropdown.open .custom-dropdown-menu {opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s, transform 0.2s, visibility 0s;}
.custom-dropdown-option {display: block; width: 100%; padding: 6px 14px; color: var(--color-font3); text-align: left; white-space: nowrap; transition: color 0.2s;}
.custom-dropdown-option[aria-current="true"] {color: var(--color-font1);}

/* 스크롤 등장 (AOS) - fade-up / fade / img-reveal · delay 100~600 */
[data-aos] {--aos-delay: 0s; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);}
[data-aos].aos-animate {transition-delay: var(--aos-delay);}
[data-aos-delay="100"] {--aos-delay: 0.1s;}
[data-aos-delay="200"] {--aos-delay: 0.2s;}
[data-aos-delay="300"] {--aos-delay: 0.3s;}
[data-aos].aos-init:not(.aos-animate) {opacity: 0;}
[data-aos="fade-up"].aos-init:not(.aos-animate) {transform: translateY(32px);}
[data-aos="img-reveal"] img {transition: transform 1.8s var(--ease-out);}
[data-aos="img-reveal"].aos-animate img {transition-delay: var(--aos-delay);}
[data-aos="img-reveal"].aos-init:not(.aos-animate) img {transform: scale(1.08);}

/* 호버 */
@media (hover: hover) {
    .ico-btn:hover {opacity: 0.6;}
    .custom-dropdown-option:hover {color: var(--color-font1);}
}

@media screen and (max-width: 1024px) {
    :root {--header-height: 64px;}
}
@media screen and (max-width: 768px) {
    :root {--header-height: 56px;}
    .ico-btn img {width: 24px; height: 24px;}
}