@charset "utf-8";

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* =========================================
   전역 CSS 변수
   ========================================= */

:root {
    font-size: 100%; /* 1rem = 16px standard */

    /* Font Family Tokens */
    --default-font-family: 'Pretendard', sans-serif;

    /* Color Tokens */

    /* Color Tokens - primitive */
    --blue500: #2482E0;
    --blue400: #41A6D1;
    --blue300: #BBDDFF;
    --blue200: #CCEEFF;
    --white: #fff;
    --black: #222;
    --gray100: #f2f2f2;
    --gray300: #d6d6d6;
    --gray500: #a1a1a1;

    /* Color Tokens - sementic */
    --color-txt-highlight1: var(--blue500);
    --color-txt-highlight2: var(--blue400);
    --color-txt-default: var(--black);
    --color-txt-light: var(--gray300);
    --color-txt-light2: var(--gray500);
    --color-txt-white: var(--white);

    --color-bg-default: var(--white);
    --color-bg-light: var(--gray100);
    --color-bg-highlight: var(--blue500);

    --color-border-white: var(--white);

    /* Font Size Tokens */
    /* Font Size Tokens - primitive */
    /* (Based on Tailwind CSS) */
    --fs-2xs: 0.625rem;  /* 10px */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-base: 1rem;     /* 16px */
    --fs-lg: 1.125rem;   /* 18px */
    --fs-xl: 1.25rem;    /* 20px */
    --fs-2xl: 1.5rem;    /* 24px */
    --fs-3xl: 1.875rem;  /* 30px */
    --fs-4xl: 2.25rem;   /* 36px */
    --fs-5xl: 3rem;      /* 48px */
    --fs-6xl: 3.75rem;   /* 60px */
    --fs-7xl: 4.5rem;    /* 72px */
    --fs-8xl: 6rem;      /* 96px */
    --fs-9xl: 8rem;      /* 128px */

    /* Font Size Tokens - sementic */
    --fs-header-menu: var(--fs-lg);
    --fs-main-title1: var(--fs-5xl);
    --fs-main-title2: var(--fs-4xl);
    --fs-main-title3: var(--fs-2xl);
    --fs-body: var(--fs-xl);
    --fs-body-sm: var(--fs-lg);
    --fs-label: var(--fs-xl);
    --fs-hero-title: var(--fs-6xl);
    --fs-hero-copy: var(--fs-xl);

    /* padding */
    /* padding 전체에 적용시, y - x 순 */
    /* 공통 좌우 여백 space-padding-x */
    --common-space-padding-x-default: 50px;
    --common-space-padding-x-tablet: 24px;
    --common-space-padding-x-mobile: 16px;

    /* 공통 위아래 여백 space-padding-y */
    --common-space-padding-y-default: 140px;
    --common-space-padding-y-tablet: 120px;
    --common-space-padding-y-mobile: 100px;

    /* gap */
    /* box : : grid, flex같이 박스 형태 만들 때 에 공통으로 사용할 gap */
    --box-gap-base-default: 30px;
    --box-gap-base-tablet: 20px; /* tablet 작업시 수정 예정 */
    --box-gap-base-mobile: 16px; /* mobile 작업시 수정 예정 */
    --box-gap-lg-default: 50px;
    --box-gap-lg-tablet: 40px; /* tablet 작업시 수정 예정 */
    --box-gap-lg-mobile: 30px; /* mobile 작업시 수정 예정 */
    --box-gap-sm-default: 16px;
    --box-gap-sm-tablet: 12px; /* tablet 작업시 수정 예정 */
    --box-gap-sm-mobile: 8px; /* mobile 작업시 수정 예정 */

    /* width, height */
    --max-width-inner : 1600px;

    /* line-height */
    --body-line-height-default: 1.6;
}

/* =========================================
   전역 CSS 변수 - Tablet 800px ~ 1200px
   ========================================= */
@media screen and (max-width: 1200px) {
    :root {
    /* Font Size Tokens - sementic */
    --fs-header-menu: var(--fs-lg);
    --fs-main-title1: var(--fs-3xl);
    --fs-main-title2: var(--fs-2xl);
    --fs-main-title3: var(--fs-xl);
    --fs-body: var(--fs-lg);
    --fs-body-sm: var(--fs-base);
    --fs-label: var(--fs-lg);
    --fs-hero-title: var(--fs-5xl);
    --fs-hero-copy: var(--fs-lg);

    /* padding */
    /* padding 전체에 적용시, y - x 순 */
    /* 공통 좌우 여백 space-padding-x */
    --common-space-padding-x-default: var(--common-space-padding-x-tablet);

    /* 공통 위아래 여백 space-padding-y */
    --common-space-padding-y-default: var(--common-space-padding-y-tablet);

    /* gap */
    /* box : : grid, flex같이 박스 형태 만들 때 에 공통으로 사용할 gap */
    --box-gap-base-default: var(--box-gap-base-tablet);
    --box-gap-lg-default: var(--box-gap-lg-tablet);
    --box-gap-sm-default: var(--box-gap-sm-tablet);
    }
 }
/* =========================================
   전역 CSS 변수 - Mobile ~ 799px
   ========================================= */
@media screen and (max-width: 799px) {
    :root {
    /* Font Size Tokens - sementic */
    --fs-header-menu: var(--fs-lg);
    --fs-main-title1: var(--fs-3xl);
    --fs-main-title2: var(--fs-xl);
    --fs-main-title3: var(--fs-lg);
    --fs-body: var(--fs-base);
    --fs-body-sm: var(--fs-sm);
    --fs-label: var(--fs-base);
    --fs-hero-title: var(--fs-3xl);
    --fs-hero-copy: var(--fs-lg);

    /* padding */
    /* padding 전체에 적용시, y - x 순 */
    /* 공통 좌우 여백 space-padding-x */
    --common-space-padding-x-default: var(--common-space-padding-x-mobile);

    /* 공통 위아래 여백 space-padding-y */
    --common-space-padding-y-default: var(--common-space-padding-y-mobile);

    /* gap */
    /* box : : grid, flex같이 박스 형태 만들 때 에 공통으로 사용할 gap */
    --box-gap-base-default: var(--box-gap-base-mobile);
    --box-gap-lg-default: var(--box-gap-lg-mobile);
    --box-gap-sm-default: var(--box-gap-sm-mobile);
    }
 }






/* =========================================
   Base
   ========================================= */
html,
body,
p {
    color: var(--color-txt-default);
    font-family: var(--default-font-family);
    font-size: var(--fs-body);
    line-height: var(--body-line-height-default);
}

h2 {
    font-size: var(--fs-main-title1);
    font-weight: 700;
}

h3 {
    font-size: var(--fs-main-title2);
    font-weight: 700;
}




/* =========================================
   Common Components
   ========================================= */
/* title-area, title-box, .label */
.title-area {
    display: flex;
}
.title-area .title-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.title-area .title-box p.label, .label {
    color: var(--color-txt-highlight1);
    font-size: var(--fs-label);
    letter-spacing: -1px;
}

.title-area .title-box p.label {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-area .title-box p.label::after {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    background-color: var(--color-txt-highlight1);
}
.title-area .title-box h2.title {}

.title-area p.des {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.title-area p.des span {
    line-height: var(--body-line-height-default);
}

/* .title-area.row */
.title-area.row {
    gap: 20px;
}
.title-area.row .title-box {
    flex: 1;
}
.title-area.row .title-box p.label {}
.title-area.row .title-box h2.title {}

.title-area.row p.des {
    flex: 1;
}

/* .title-area.column */
.title-area.column {
    flex-direction: column;
    gap: 20px;
}
.title-area.column .title-box {}
.title-area.column .title-box p.label {}
.title-area.column .title-box h2.title {}

.title-area.column p.des {}

@media screen and (max-width: 799px) {
    .title-area, .title-area.row, .title-area.column {
        flex-direction: column;
        gap: 14px;
    }

    .title-area .title-box {
        gap: 6px;
    }
}

/* span.blue */
span.blue {
    color: var(--color-txt-highlight1);
}

.slogan {
    font-size: var(--fs-main-title1);
    font-weight: 800;
}

/* .placeholder 공통 */
.placeholder {
   overflow: hidden;
   border-radius: 1.3vw;
}

.placeholder img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* .btn */
.btn {
   color: var(--color-txt-white);
   padding: 16px 24px;
   border: 1px solid var(--color-border-white);
   border-radius: 100px;
   overflow: hidden;
   transition: all 0.3s ease;
}

.btn:hover {
    background-color: rgba(255,255,255,0.2);
}

/* header */
header {
    display: flex;
    position: absolute;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 30px var(--common-space-padding-x-default);
    z-index: 10000;
    isolation: isolate;
}
header h1 {
    width: 220px;
}
header h1 a {
    display: block;
    width: 100%;
    height: 100%;
}
header h1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
header ul {
    display: flex;
    gap: 30px;
}
header ul li {}
header ul li a {
    position: relative;
    font-size: var(--fs-header-menu);
    color: var(--color-txt-light);
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* 
   1. 헤더 메뉴 호버 애니메이션 (Underline)
   - a 태그 하단에 가상 요소(::after) 생성
   - 기본 width를 0%로 설정하고 호버 시 100%로 확장
*/
header ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-txt-white);
    transition: width 0.3s ease;
}

header ul li:hover a {
    color: var(--color-txt-white);
}

header ul li:hover a::after {
    width: 100%;
}

header ul li.menu-cta {
    display: none;
}

/* 공통 햄버거 버튼 (Desktop 기본 숨김) */
header .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    z-index: 10030;
}

header .menu-toggle .bar {
    width: 24px;
    height: 2px;
    background-color: var(--color-border-white);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

header.menu-open .menu-toggle .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

header.menu-open .menu-toggle .bar:nth-child(2) {
    opacity: 0;
}

header.menu-open .menu-toggle .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 모바일/태블릿 메뉴 딤드 */
.menu-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10010;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* 메뉴 오픈 시 스태킹 규칙: ul/menu-toggle만 딤드 위 */
header.menu-open {
    z-index: 10040;
}
header.menu-open h1 {
    opacity: 0.5;
}
header.menu-open h1 a {
    pointer-events: none;
}

header.menu-open #header-nav-menu {
    z-index: 10060;
}
header.menu-open button.menu-toggle {
    z-index: 10070;
}

/* Tablet 이하: 햄버거 + 사이드 메뉴 */
@media screen and (max-width: 1200px) {
    header {
        padding: 20px var(--common-space-padding-x-default);
    }

    header h1 {
        width: 190px;
    }

    header .menu-toggle {
        display: inline-flex;
        position: absolute;
        top: 50%;
        right: var(--common-space-padding-x-default);
        transform: translateY(-50%);
        z-index: 13010;
    }

    header > a.btn {
        display: none;
    }

    header ul {
        position: fixed;
        top: 0;
        right: 0;
        width: min(82vw, 340px);
        height: 100vh;
        height: 100dvh;
        padding: 110px 24px 32px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background-color: var(--color-bg-highlight);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 10020;
    }

    header.menu-open ul {
        transform: translateX(0);
    }

    header ul li {
        width: 100%;
    }

    header ul li a {
        width: 100%;
        color: var(--color-txt-white);
        font-size: var(--fs-body-sm);
        padding: 10px 2px;
    }

    header ul li a::after {
        bottom: 2px;
        background-color: var(--color-txt-highlight1);
    }

    header ul li:hover a {
        color: var(--color-txt-highlight1);
    }

    header ul li.menu-cta {
        display: block;
        margin-top: 18px;
    }

    header ul li.menu-cta a.btn {
        width: 100%;
        display: flex;
        justify-content: center;
        color: var(--color-txt-highlight1);
        border-color: var(--color-txt-highlight1);
        font-size: var(--fs-body-sm);
    }

    header ul li.menu-cta a.btn:hover {
        background-color: rgba(36, 130, 224, 0.1);
    }
}

@media screen and (max-width: 799px) {
    header h1 {
        width: 170px;
    }
}

/* footer */
footer {
    background-color: var(--color-bg-highlight);
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
    padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
}
footer .placeholder {
    width: 180px;
    border-radius: 0;
}
footer .placeholder img.logo {
    width: 100%;
}
footer ul.info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
footer ul.info li {
    display: flex;
    gap: 10px;
    color: var(--color-txt-white);
}
footer ul.info li img {
    aspect-ratio: 1/1;
    width: 24px;
}
@media screen and (max-width: 799px) {
    footer {
        flex-direction: column;
        align-items: baseline;
        gap: 30px;
    }

    footer ul.info li {
        flex-direction: column;
    }
}

/* main 공통 */
main {
    height: 100vh;
    position: relative;
    padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
    display: flex;
    align-items: center;
}

@media screen and (max-width: 799px) {
    main {
        justify-content: center;
    }
    main .hero-copy, main h2, main p {
        text-align: center;
    }
}

/* main.hero1 */
main.hero1 {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url(../assets/images/홈/hero_bg.webp) no-repeat center / cover;
}
main.hero1 .hero-copy {
    color: var(--color-txt-white);
}
main.hero1 .hero-copy h2.title {
    font-size: var(--fs-hero-title);
    margin-bottom: 40px;
}
main.hero1 .hero-copy p.des {
    font-size: var(--fs-hero-copy);
    color: var(--color-txt-light);
}

/* main.hero2 */
main.hero2 {
    justify-content: center;
}
main.hero2 p.des {
    color: var(--color-txt-white);
    font-size: var(--fs-hero-copy);
    color: var(--color-txt-light);
}

/* .video-container */
.video-container {
   aspect-ratio: 16/9;
   width: 100%;
}

.video-container iframe {
   width: 100%;
   height: 100%;
}

/* inner */
.inner {
    max-width: var(--max-width-inner);
    margin: 0 auto;
}

/* section, article */
section, article {
    display: flex;
    flex-direction: column;
    gap: var(--common-space-padding-x-default);

}
section {
    padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
}

/* =========================================
   애니메이션 및 호버 인터랙션 (Animations & Interactions)
   ========================================= */

/* 1. 스크롤 감지 등장 애니메이션 (Scroll Reveal) */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* 여러 묶음이 동시에 나타날 경우를 위해 GPU 렌더링 최적화 */
    will-change: opacity, transform;
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. 이미지 마우스 오버 시 내림차순 확대 효과 (Hover Image Scale) */
/* (overflow: hidden이 기본적으로 적용된 .placeholder 사용) */
.placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 애니메이션 속성 추가 */
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

/* 데스크탑(마우스 호버 가능한 환경)에서만 동작하게 제한 */
@media (hover: hover) and (pointer: fine) {
    /* 기본 placeholder hover 외에도 .box나 직접 감싼 부모 영역에 마우스를 올렸을 때 동작하도록 처리 */
    .placeholder:hover img,
    .box:hover .placeholder img,
    a:hover .placeholder img,
    .btn-wrap:hover .placeholder img {
        transform: scale(1.05); /* 살짝 커짐 */
    }

    /* 특정 요소에서 확대 효과를 제외하고 싶을 때 사용하는 유틸리티 클래스 */
    .no-hover:hover img,
    .no-hover:hover .placeholder img,
    .placeholder.no-hover:hover img {
        transform: none !important;
    }
}