/* 1. Font Import */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/* 2. CSS Variables (Custom Properties) */
:root {
    /* Colors */
    --color-main: #2BAE66;
    --color-main-soft: #EAF7F0;
    --color-hero: #FFE15C;
    --color-hero-soft: #FFFBE7;

    /* Text Colors */
    --color-text-primary: #262626;
    --color-text-inverse: #FFFFFF;
    --color-text-fixed-black: #262626;
    --color-text-fixed-white: #FFFFFF;

    /* Background Colors */
    --color-background-primary: #FDFDFD;
    --color-background-inverse: #262626;
    --color-background-surface: #FFFFFF;
    --color-background-translucent: rgba(255, 255, 255, 0.2);
    --color-background-light-grey: #EEEEEE;
    --color-background-modal: rgba(0, 0, 0, 0.5);
    --color-background-footer: #262626;

    /* Button Colors */
    --color-button-primary: #262626;
    --color-button-inverse: #FFFFFF;
    --color-button-fixed-black: #262626;
    --color-button-fixed-white: #FFFFFF;
    --color-button-download: #EEEEEE;

    /* Border Colors */
    --color-border-default: rgba(225, 225, 225);
    --color-border-line-default: rgba(224, 224, 224);
    --color-border-modal-grey: rgba(224, 224, 224, 0.5);

    /* Box Shadow */
    --color-box-shadow-soul-care-apply-primary: rgba(0, 0, 0, 0.25);
    --color-box-shadow-soul-care-apply-inverse: rgba(255, 255, 255, 0.25);


    /* Typography */
    --font-primary: "Lato", sans-serif;
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #FFFFFF;
        --color-text-inverse: #262626;

        --color-background-primary: #262626;
        --color-background-inverse: #FDFDFD;

        --color-background-footer: var(--color-main);

        --color-button-primary: #FFFFFF;
        --color-button-inverse: #262626;

        --color-box-shadow-soul-care-apply-primary: rgba(255, 255, 255, 0.25);
        --color-box-shadow-soul-care-apply-inverse: rgba(0, 0, 0, 0.25);
    }

    .footer__wave .wave_top {
        content: url("../image/wave/footer_wave_top_ver_dark.svg");
    }

    .site-footer__logo img {
        content: url("../image/logo/yhcc_website_logo_2025_green.svg")
    }
}

/* 3. Global Resets & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    height: 100%;
}

body {
    height: 100%;
    font-size: 1.6rem;

    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    line-height: normal;

    /* Full-height layout */
    display: flex;
    flex-direction: column;

    /* Scrollbar Hiding (Cross-browser) */
    -ms-overflow-style: none;
    /* IE, Edge */
    scrollbar-width: none;
    /* Firefox */
    -webkit-overflow-scrolling: touch;
}

/* Webkit scrollbar hiding */
::-webkit-scrollbar {
    display: none;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    /* 링크가 기본 파란색이 아닌 부모 요소의 글자색을 따름 */
}



/* ===============================================
   Header & Logo
   =============================================== */
.site-header {
    padding: 3.2rem 12.8rem 0 12.8rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ===============================================
   Main Navigation
   =============================================== */
.nav-menu {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 4.0rem;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-size: 1.4rem;
    font-weight: var(--font-weight-semibold);
    /* Figma = Bold --> CSS = SemiBold */
    color: var(--color-main);
    padding: 0.8rem 0;
    /* 링크 클릭 영역 확보 */
    margin: 0;
    display: block;
    /* padding을 적용하기 위해 block으로 변경 */

    cursor: pointer;
    /* btn_translate 때문에 */
}

.nav-link:hover {
    color: var(--color-hero);
}

/* ===============================================
   Submenu (Dropdown)
   =============================================== */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;

    /* 드롭다운 메뉴 스타일링 */
    min-width: fit-content;
    /* 최소 너비 확보 */
}

.submenu-conference {
    width: 100%;
}

.nav-item:hover>.submenu {
    display: block;
}

.submenu-link {
    font-size: 1.4rem;
    font-weight: var(--font-weight-semibold);
    /* Figma = Bold --> CSS = SemiBold */
    color: var(--color-main);
    padding: 0.8rem 0.8rem;
    /* 링크 클릭 영역 확보 */
    margin: 0;
    display: block;
    /* padding을 적용하기 위해 block으로 변경 */
    white-space: nowrap;
    /* 서브메뉴 줄바꿈 방지 */

    margin-left: -0.8rem;
    margin-top: 0.4rem;

    cursor: pointer;
    /* btn_lang 때문에 */
}

.submenu-link:hover {
    color: var(--color-hero);
}

/* ===============================================
   번역 버튼
   =============================================== */
.btn_translate {
    width: 2.0rem;
    height: 2.0rem;
    display: block;
}

.nav-link:hover .btn_translate {
    content: url("../image/icon/mit/global/globe_FFE15C.svg");
}

/* ===============================================
   햄버거 메뉴 버튼
   =============================================== */
.nav-toggle {
    /* --- 변수 정의 --- */
    --bar-height: 0.3rem;
    /* 선 굵기 */
    --bar-middle-y: 1.0rem;
    /* 중간 선의 Y 위치 (애니메이션 기준점) */
    --transition-duration: 0.3s;

    /* --- 버튼 기본 스타일 --- */
    display: none;
    /* 데스크탑에서 숨김 */
    position: fixed;
    /* 화면 기준 고정 (헤더와 별개로) */
    top: 3.2rem;
    /* 데스크탑 header의 상단 패딩과 동일 */
    right: 6.4rem;
    /* 데스크탑 header의 우측 패딩과 동일 */
    width: 3.0rem;
    height: 2.2rem;
    /* (중간 선 Y * 2) + 선 굵기 = 1.0*2 + 3 = 2.3rem 근사치 */
    border: none;
    background: none;
    cursor: pointer;
    z-index: 1001;
    /* 메뉴 패널(1000)보다 위에 오도록 */
}

.nav-toggle span {
    display: block;
    position: absolute;
    width: 100%;
    height: var(--bar-height);
    background-color: var(--color-main);
    transition: all var(--transition-duration) ease-in-out;
    border-radius: 20.0rem
}

/* --- 햄버거 선 위치 --- */
.nav-toggle span:nth-child(1) {
    top: 0;
}

.nav-toggle span:nth-child(2) {
    top: var(--bar-middle-y);
    /* 1.0rem */
}

.nav-toggle span:nth-child(3) {
    /* 1.0rem * 2 = 2.0rem */
    top: calc(var(--bar-middle-y) * 2);
}

/* --- 햄버거 버튼 'active' 상태 (X자 모양) --- */
.nav-toggle.active span:nth-child(1) {
    /* 1.0rem 만큼 아래로 이동 후 회전 */
    transform: translateY(var(--bar-middle-y)) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    /* 중간 선 숨기기 */
}

.nav-toggle.active span:nth-child(3) {
    /* -1.0rem 만큼 위로 이동 후 회전 */
    transform: translateY(calc(var(--bar-middle-y) * -1)) rotate(-45deg);
}



/* ===============================================
   page-title
   =============================================== */
.page-title {
    padding: 6.4rem 12.8rem 0 12.8rem;
    display: flex;
    flex-direction: row;
}

.page-title__heading p {
    padding: 0;
    margin: 0;
    font-size: 8.8rem;
    font-weight: var(--font-weight-light);
    color: var(--color-main);
    text-transform: uppercase;
}

.page-title__divider {
    flex: 1;
    padding-left: 1.2rem;
    padding-bottom: 2.0rem;
}

.page-title__divider-line {
    width: 100%;
    height: 100%;
    border-bottom: 0.1rem solid var(--color-main);
}



/* ===============================================
   Footer
   =============================================== */
.site-footer {
    width: 100%;
    height: fit-content;
    background-color: var(--color-background-footer);
    color: var(--color-text-fixed-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer__wave {
    width: 100%;
    height: 17.6rem;
    overflow: hidden;
}

.footer__wave--top {
    background-color: var(--color-background-primary);
}


.site-footer__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12.8rem 25.6rem;
    column-gap: 6.4rem;
    row-gap: 12.8rem;
    width: 100%;
    height: fit-content;
}

/* --- 기둥별 개별 너비 --- */
.site-footer__column {
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
}

.site-footer__logo {
    width: fit-content;
    height: auto;
}

/* --- Footer 공용 제목 --- */
.footer__title {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12rem;
}

/* --- 링크 목록 (BEM 클래스 직접 타겟팅) --- */
.footer__link-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.footer__link-list a {
    font-size: 1.4rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.06rem;
}

/* -- Social 링크 목록 -- */
.footer__social-links {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
}

.footer__social-link-icon {
    width: 2.4rem;
    height: 2.4rem;
}

/* -- Contact 링크 목록 -- */
.footer__contact-link {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.8rem;
}

.footer__contact-link-icon {
    width: 1.6rem;
    height: 1.6rem;
}

/* --- Footer Bottom (저작권) --- */
.site-footer__bottom {
    padding: 0 1.6rem 1.0rem 1.6rem;
    width: 100%;
    text-align: center;
}

.site-footer__bottom p {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--font-weight-regular);
}



/* ===============================================
   모바일 반응형
   Desktop : 1728px / (1512px) / 1440px / (1280px)
   Mobile : 1024px / 768px / 390px / 375px

   푸터  --> 1512px = 95em(94.5)
   반응형 --> 1280px = 80em
   메뉴판 --> 1024px = 64em
   반응형 --> 0768px = 48em
   반응형 --> 0612px = 39em(38.25) - 390px 대신
            0390px = 25em(24.375)
            0375px = 24em(23.43)
            0320px = 16em
   =============================================== */
@media (max-width: 1512px) {
    /* ===============================================
    Footer
    =============================================== */
    .site-footer__main {
        padding-left: 12.8rem;
        padding-right: 12.8rem;
    }
}



@media (max-width: 1280px) {
    /* ===============================================
    Header & Logo
    =============================================== */
    .site-header {
        padding-left: 6.4rem;
        padding-right: 6.4rem;
    }

    /* ===============================================
    page-title
    =============================================== */
    .page-title {
        padding-left: 6.4rem;
        padding-right: 6.4rem;
    }

    .page-title__heading p {
        font-size: 6.4rem;
        font-weight: var(--font-weight-regular);
    }

    .page-title__divider {
        padding-bottom: 1.5rem;
    }

    /* ===============================================
    Footer
    =============================================== */
    .site-footer__main {
        padding-left: 6.4rem;
        padding-right: 6.4rem;
    }
}



@media (max-width: 1024px) {
    /* ===============================================
    햄버거 메뉴 버튼
    =============================================== */
    .nav-toggle {
        display: block;
    }

    /* ===============================================
    Main Navigation
    =============================================== */
    /* --- 내비게이션 메뉴 패널 (모바일) --- */
    /* 1. 메뉴 패널 기본 스타일 (숨김 상태) */
    .nav-menu {
        /* 위치 및 크기 */
        position: fixed;
        top: 0;
        right: 0;
        width: fit-content;
        height: 100vh;
        padding: 9.6rem 6.4rem 9.6rem 3.2rem; /* 상단(헤더 영역) 띄우고 내부 패딩 */
        z-index: 1000;

        /* 디자인 */
        background-color: var(--color-background-primary);
        border-left: 0.1rem solid #EEEEEE;
        box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.05);

        /* 스크롤 */
        overflow-y: auto; /* 내용이 넘칠 때만 세로 스크롤 */
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */

        /* 애니메이션 (기본 상태: 숨김) */
        transform: translateX(100%);
    }

    /* 2. 메뉴 패널 활성화 상태 (보임) */
    .nav-menu.active {
        transform: translateX(0); /* 원래 위치로 */
    }


    /* --- 메뉴 리스트 (패널 내부) --- */
    /* 1. 메인 메뉴 리스트 (세로 배치) */
    .nav-menu .nav-list {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8rem;
    }
    .nav-menu .nav-list .nav-item {
        width: 100%;
    }

    /* 2. 메인 메뉴 링크 */
    .nav-menu .nav-list .nav-link {
        padding: 0.8rem;
        font-size: 2.4rem;
        font-weight: var(--font-weight-medium);
        text-transform: uppercase;
        color: var(--color-main);
    }

    /* 3. 메인 메뉴 링크 - 드롭다운 표시 */
    .nav-link-dropdown {
        display: flex;
        align-items: center;
        width: 100%;
    }
    .nav-link-dropdown::after {
        content: '▾';
        font-size: 1.6rem;
        margin-left: auto;
        transition: transform 0.3s ease;
    }
    .nav-item.active .nav-link-dropdown::after {
        transform: rotate(180deg);
    }


    /* ===============================================
    Submenu (Dropdown)
    =============================================== */
    /* --- 서브 메뉴 (드롭다운) --- */
    /* 1. 서브메뉴 리스트 */
    .nav-menu .nav-list .nav-item .submenu {
        /* display: flex; */
        /* 모바일에서도 항상 보이게 */

        display: none;
        flex-direction: column; /* row-gap 적용을 위해 세로 배치 */
        position: static; /* absolute 해제 */
        width: auto;
        background-color: transparent; /* 배경 없음 */
        padding-top: 0; /* 상위 메뉴와의 간격 */
        row-gap: 0.2rem; /* 하위 메뉴 간격 */
    }
    .nav-menu .nav-item.active .submenu {
        display: flex;
    }

    /* 2. 서브메뉴 링크 */
    .nav-menu .nav-list .nav-item .submenu .submenu-link {
        font-size: 1.6rem;
        font-weight: var(--font-weight-medium);
        color: var(--color-main);
        background-color: var(--color-main-soft);

        /* border-radius: 1.5rem; */
    }


    /* ===============================================
    번역 버튼
    =============================================== */
    .nav-link:hover .btn_translate {
        content: none;
    }


    /* ===============================================
    Footer
    =============================================== */
    .footer__wave {
        height: auto;
    }

    .wave_top {
        width: 100%;
        height: auto;
        display: block;
    }

    .site-footer__main {
        display: none;
    }
}



@media (max-width: 768px) {
    /* ===============================================
    Header & Logo
    =============================================== */
    .site-header__logo {
        height: 4.0rem;
        width: auto;
        overflow: hidden;
        flex-shrink: 0;
    }

    .site-header__logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* ===============================================
    page-title
    =============================================== */
    .page-title {
        padding-top: 6.4rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .page-title__heading p {
        text-align: center;
    }

    .page-title__divider {
        width: 100%;
        height: fit-content;
        padding-left: 0;
        padding-bottom: 0;
    }

    .page-title__divider-line {
        width: 100%;
        height: 3.2rem;
    }
}



@media (max-width: 612px) {
    /* ===============================================
    Header & Logo
    =============================================== */
    .site-header {
        padding-top: 1.6rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }


    /* ===============================================
    햄버거 메뉴 버튼
    =============================================== */
    .nav-toggle {
        /* --- 변수 정의 --- */
        --bar-height: 0.3rem; /* 선 굵기 : 3 -> 3 유지 */
        --bar-middle-y: 0.8rem; /* 중간 선의 Y 위치 (애니메이션 기준점) : 10 -> 8 */

        /* --- 버튼 기본 스타일 --- */
        top: 1.6rem;
        right: 1.6rem; /* 데스크탑 header의 우측 패딩과 동일 */
        width: 2.4rem;
        height: 1.8rem; /* (중간 선 Y * 2) + 선 굵기 = 8*2 + 2 = 18px */
    }

    /* 선 위치를 새 높이(1.8rem)에 맞게 재조정 */
    .nav-toggle span:nth-child(1) {
        top: 0;
    }
    .nav-toggle span:nth-child(2) {
        top: var(--bar-middle-y);  /* (1.0rem -> 0.8rem) */
    }
    .nav-toggle span:nth-child(3) {
        top: calc(var(--bar-middle-y) * 2); /* (2.0rem -> 1.6rem) */
    }

    /* X자 애니메이션 값 수정 (이동 거리 1.0rem -> 0.8rem) */
    .nav-toggle.active span:nth-child(1) {
        /* 8px 만큼 아래로 이동 후 회전 */
        transform: translateY(var(--bar-middle-y)) rotate(45deg);
    }
    .nav-toggle.active span:nth-child(3) {
        /* -8px 만큼 위로 이동 후 회전 */
        transform: translateY(calc(var(--bar-middle-y) * -1)) rotate(-45deg);
    }


    /* ===============================================
    Main Navigation
    =============================================== */
    /* --- 내비게이션 메뉴 패널 (모바일) --- */
    /* 1. 메뉴 패널 기본 스타일 (숨김 상태) */
    .nav-menu {
        /* 위치 및 크기 */
        width: 75vw;
        padding: 6.4rem 1.6rem 6.4rem 1.6rem; /* 상단(헤더 영역) 띄우고 내부 패딩 */
    }


    /* --- 메뉴 리스트 (패널 내부) --- */
    /* 2. 메인 메뉴 링크 */
    .nav-menu .nav-list .nav-link {
        font-size: 2.0rem;
    }


    /* ===============================================
    page-title
    =============================================== */
    .page-title {
        padding-top: 3.2rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .page-title__heading p {
        font-size: 3.2rem;
        font-weight: var(--font-weight-medium);
    }


    /* ===============================================
    Footer
    =============================================== */
    /* --- Footer Bottom (저작권) --- */
    .site-footer__bottom p {
        font-size: 0.8rem;
    }
}