/*
  Pretendard Font Weight Reference
  Thin: 100, ExtraLight: 200, Light: 300, Regular: 400,
  Medium: 500, SemiBold: 600, Bold: 700, ExtraBold: 800
*/

/* 1. Font Import */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Playwrite+US+Trad:wght@100..400&family=Prata&family=Rubik+Mono+One&display=swap');

/* Event 페이지의 Schedule 부분 "위에서 아래로 스르륵" 나타나는 애니메이션 정의 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        /* Y축으로 -15px (살짝 위)에서 시작 */
        transform: translateY(-15px); 
    }
    to {
        opacity: 1;
        /* Y축으로 0 (제자리)으로 이동 */
        transform: translateY(0);
    }
}

/* Soul Care Counselor 페이지 '아래에서 위로' 효과 정의*/
@keyframes slideInFromBottomSticky {
    from {
        transform: translateY(500px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}



/* 2. CSS Variables (Custom Properties) */
:root {
    /* Colors */
    --color-main: #2BAE66;
    --color-main-light: #EAF7F0;
    --color-text-primary: #121212;
    --color-text-inverse: #FFFFFF;
    --color-background-primary: #FDFDFD;
    --color-background-inverse: #121212;

    --color-soulcare-color-1: #B5404B;
    --color-soulcare-color-2: #A95C32;
    --color-soulcare-color-3: #EAAA00;
    --color-soulcare-color-4: #4A3F35;
    --color-soulcare-color-5: #3A5A40;
    --color-soulcare-color-6: #2A5A5C;
    --color-soulcare-color-7: #1A3A5A;
    --color-soulcare-color-8: #5A3A5A;
    --color-soulcare-color-9: #4E535A;

    /* Typography */
    --font-primary: "Pretendard Variable", Pretendard, serif;
}

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

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

html {
    font-size: 62.5%;
}

html,
body {
    height: 100%;
}

body {
    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 scrollbar hiding */
::-webkit-scrollbar {
  display: none;
}

ul, li {
  list-style: none;
}

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



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

.site-header__logo {
    padding: 0.8rem 0; /* 링크 클릭 영역 확보 */
}

.site-header__logo a {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-main);
}

/* ===============================================
   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;
    flex-direction: row; 
    gap: 3.2rem;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

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

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

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

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

.submenu-link {
    font-size: 1.4rem;
    font-weight: 500; /* Figma = SemiBold 600 --> CSS = Medium 500 */
    color: var(--color-text-primary);
    padding: 0.8rem 0;
    display: block;
    white-space: nowrap; /* 서브메뉴 줄바꿈 방지 */
}

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

    /* --- 버튼 기본 스타일 --- */
    display: none; /* 데스크탑에서 숨김 */
    position: fixed; /* 화면 기준 고정 (헤더와 별개로) */
    top: 3.2rem; /* 데스크탑 header의 상단 패딩과 동일 */
    right: 3.2rem; /* 데스크탑 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(--bar-color);
    transition: all var(--transition-duration) ease-in-out;
}

/* --- 햄버거 선 위치 --- */
.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);
}

/* ===================================
   Scroll to Top 버튼
   =================================== */
#scrollToTopBtn {
    position: fixed;
    bottom: 6.4rem;
    right: 6.4rem;
    z-index: 99;
    background-color: var(--color-main, #1A3A5A);
    color: white;
    border: none;
    border-radius: 50%;
    width: 4.8rem;
    height: 4.8rem;
    cursor: pointer;
    box-shadow: 0 0.4rem 1.0rem rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;

    /* 1. 기본 상태: 화면 밖 (아래) + 투명 */
    opacity: 0;
    transform: translateY(10.0rem); /* 10.0rem 아래에 숨겨 둠 */
    
    /* 2. 부드러운 전환 효과 */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.3s ease-out;
}

#scrollToTopBtn.visible {
    /* 3. 'visible' 클래스가 붙으면: 원래 위치 + 불투명 */
    opacity: 1;
    transform: translateY(0); /* 원래 자리로 튀어 오름 */
}

#scrollToTopBtn:hover {
    transform: translateY(-0.5rem); /* 호버 시 살짝 위로 이동 */
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.3);
}

/* ===============================================
   Translation Button
   =============================================== */
.btn_translate {
    width: 65ch;
    display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
    gap: 1.0rem;
    padding: 0;
    margin: 0;
}

.btn_translate .btn_lang {
    /* Layout & Box Model (컨텐츠 중앙 정렬) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    margin: 0;

    /* Typography */
    font-size: 1.2rem;
    font-weight: 700;

    /* Visual */
    border: 0.1rem solid var(--color-main);
    border-radius: 20.0rem;
    cursor: pointer;

    /* --- 기본 상태 (비활성) --- */
    color: var(--color-main);
    background-color: var(--color-background-primary);
}

.btn_translate .btn_lang.active {
    color: var(--color-text-inverse);
    background-color: var(--color-main);
}



/* ===============================================
   Page Title
   =============================================== */
.page-title {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 9.6rem 1.6rem 3.2rem 1.6rem;
    border-bottom: 2px solid var(--color-main);   
}

.page-title__heading {
    margin: 0;
    padding: 0;
    font-size: 4.0rem;
    font-weight: 500;
    color: var(--color-main);
}



/* ===============================================
   Program; Schedule Page
   =============================================== */
/* .schedule__image-wrapper {
    padding: 144px 360px 288px 360px;
    display: flex;
    justify-content: center;
}

.schedule__image-wrapper p {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
} */



/* ===============================================
   Footer
   =============================================== */
.site-footer {
    background-color: var(--color-main-light);
    color: var(--color-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
  
.site-footer__main {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: flex-start;
    justify-content: center;
    padding: 9.6rem 3.2rem;
    column-gap: 7.2rem;
    row-gap: 6.4rem;
    width: 100%;
    height: fit-content;
}

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

/* --- Footer 공용 제목 --- */
.footer__title {
    width: fit-content;
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.footer__title-logo {
    letter-spacing: 0.1em;
}

/* --- 소개글 (About 전용) --- */
.footer-about .footer__intro {
    width: 25.4rem;
    height: fit-content;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 185%;
    letter-spacing: 0.04em;
}

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

.footer__link-list a,
.footer__contact-list a,
.footer__contact-list li {
    font-size: 1.4rem;
    font-weight: 500;
}

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

.site-footer__bottom p {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
}



/* ===============================================
   모바일 반응형
   >>> 1152px == 72em  ( (1152 / 16 = 72) )
   1024px == 64em  ( (1024 / 16 = 64) )
   >>> 768px == 48em  ( (768 / 16 = 48) )
   >>> 672px == 42em  ( (672 / 16 = 42) )
   >>> 390px == 25em  ( (390 / 16 = 24.375) )
   320px == 16em  ( (320 / 16 = 16) )
   =============================================== */

@media (max-width: 72em) {

    /* --- 1. Site Layout (Header) --- */

    .site-header {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }


    /* --- 2. Navigation Toggle (햄버거 버튼) --- */

    .nav-toggle {
        display: block;
        right: 3.2rem;
    }


    /* --- 3. 내비게이션 메뉴 패널 (모바일) --- */

    /* 3-1. 메뉴 패널 기본 스타일 (숨김 상태) */
    .nav-menu {
        /* 위치 및 크기 */
        position: fixed;
        top: 0;
        right: 0;
        width: 30.0rem;
        height: 100vh;
        padding: 12.0rem 4.0rem; /* 상단(헤더 영역) 띄우고 내부 패딩 */
        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%);
        transition: transform 0.3s ease-in-out;
    }

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


    /* --- 4. 메뉴 리스트 (패널 내부) --- */

    /* 4-1. 메인 메뉴 리스트 (세로 배치) */
    .nav-menu .nav-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 3.2rem;
    }

    /* 4-2. 메인 메뉴 링크 */
    .nav-menu .nav-list .nav-link {
        padding: 0;
        margin: 0;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--color-main);
    }


    /* --- 5. 서브 메뉴 (드롭다운) --- */

    /* 5-1. 서브메뉴 리스트 */
    .nav-menu .nav-list .nav-item .submenu {
        display: flex; /* 모바일에서도 항상 보이게 */
        flex-direction: column; /* row-gap 적용을 위해 세로 배치 */
        position: static; /* absolute 해제 */
        width: auto;
        background-color: transparent; /* 배경 없음 */
        padding-top: 1.6rem; /* 상위 메뉴와의 간격 */
        row-gap: 1.6rem; /* 하위 메뉴 간격 */
    }

    /* 5-2. 서브메뉴 링크 */
    .nav-menu .nav-list .nav-item .submenu .submenu-link {
        padding: 0;
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--color-text-primary);
    }
}



@media (max-width: 48em) {

    /* --- 1. Site Layout (Header & Page-Title & Footer) --- */

    .site-header {
        padding: 2.0rem;
    }

    .page-title {
        padding-top: 6.4rem;
    }

    /* --- Footer --- */
    .site-footer__main {
        display: none;
    }


    /* --- 2. Navigation Toggle (햄버거 버튼) --- */

    .nav-toggle {
        /* --- 변수 정의 --- */
        --bar-height: 0.2rem; /* 선 굵기 : 3 -> 2 */
        --bar-middle-y: 0.8rem; /* 중간 선의 Y 위치 (애니메이션 기준점) : 10 -> 8 */

        /* --- 버튼 기본 스타일 --- */
        top: 2.8rem; /* 데스크탑 header의 상단 패딩 2.0rem + 0.8rem = 2.8rem */
        right: 2.0rem; /* 데스크탑 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);
    }


    /* --- 3. 내비게이션 메뉴 패널 (모바일) --- */

    .nav-menu {
        width: 100%; /* 모바일 메뉴 패널 너비 */
        padding: 6.0rem 4.0rem; /* 상단(헤더 영역) 띄우고 내부 패딩 */
    }

}



@media (max-width: 42em) {

    /* --- 1. Site Layout (Footer) --- */

    /* --- Footer --- */
    .site-footer__bottom {
        padding: 1.0rem;
    }

    .site-footer__bottom p {
        font-size: 1.0rem;
    }


    /* --- 2. Navigation Toggle (햄버거 버튼) --- */

    .nav-toggle {
        top: 2.4rem; /* 데스크탑 header의 상단 패딩 1.6rem + 0.8rem = 2.4rem */
        right: 1.6rem; /* 데스크탑 header의 우측 패딩과 동일 */
    }
}



@media (max-width: 25em) {

    /* --- 1. Site Layout (Header & Page-Title & Footer) --- */

    /* --- Header --- */
    .site-header {
        padding: 1.6rem;
    }

    .site-header__logo a {
        font-size: 1.4rem;
    }

    /* --- Page-Title --- */
    .page-title {
        padding: 1.6rem;
    }

    .page-title__heading {
        font-size: 2.4rem;
    }

    /* --- Footer --- */
    .site-footer__bottom p {
        font-size: 0.8rem;
    }
}