/*
  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&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* 2. CSS Variables (Custom Properties) */
:root {
    /* Colors */
    --color-main: #2BAE66;
    --color-main-50: #2BAE6680;
    --color-main-80: #2BAE66CC;
    --color-main-light: #EAF7F0;

    --color-text-primary: #121212;
    --color-text-inverse: #FFFFFF;

    --color-background-primary: #FFFFFF;
    --color-background-inverse: #121212;

    --color-soulcare-color-1: #EAAA00;
    --color-soulcare-color-1-50: #EAAA0080;
    --color-soulcare-color-1-80: #EAAA00CC;

    --color-soulcare-color-2: #A15B32;
    --color-soulcare-color-2-50: #A15B3280;
    --color-soulcare-color-2-80: #A15B32CC;

    --color-soulcare-color-3: #B5404B;
    --color-soulcare-color-3-50: #B5404B80;
    --color-soulcare-color-3-80: #B5404BCC;

    --color-soulcare-color-4: #9B2B65;
    --color-soulcare-color-4-50: #9B2B6580;
    --color-soulcare-color-4-80: #9B2B65CC;

    --color-soulcare-color-5: #702F4E;
    --color-soulcare-color-5-50: #702F4E80;
    --color-soulcare-color-5-80: #702F4ECC;

    --color-soulcare-color-6: #5D3A6E;
    --color-soulcare-color-6-50: #5D3A6E80;
    --color-soulcare-color-6-80: #5D3A6ECC;

    --color-soulcare-color-7: #1A3A5A;
    --color-soulcare-color-7-50: #1A3A5A80;
    --color-soulcare-color-7-80: #1A3A5ACC;

    --color-soulcare-color-8: #2A5A5C;
    --color-soulcare-color-8-50: #2A5A5C80;
    --color-soulcare-color-8-80: #2A5A5CCC;

    --color-soulcare-color-9: #3A5A40;
    --color-soulcare-color-9-50: #3A5A4080;
    --color-soulcare-color-9-80: #3A5A40CC;

    --color-soulcare-color-10: #4A3F35;
    --color-soulcare-color-10-50: #4A3F3580;
    --color-soulcare-color-10-80: #4A3F35CC;

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

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

        --color-background-primary: #121212;
        --color-background-inverse: #FFFFFF;
    }
}

/* 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 hidden (cross-browser) */
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
    -webkit-overflow-scrolling: touch;
}

/* Webkit browsers (Safari, Chrome, Edge Chromium) */
::-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;
    align-items: flex-start;
    justify-content: space-between;
}

/* ===============================================
   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-main);
    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-main);
    padding: 0.8rem 0;
    display: block;
    white-space: nowrap; /* 서브메뉴 줄바꿈 방지 */
}

/* ===============================================
   햄버거 메뉴 버튼
   =============================================== */
.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: 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(--color-background-inverse);
    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: 4.0rem;
    height: 4.0rem;
    padding: 0;
    margin: 0;

    /* Typography */
    font-size: 1.4rem;
    font-weight: 600;

    /* 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);
}



/* ===============================================
   1. Scroll Interaction : animate-from-top & animate-from-bottom
   =============================================== */
/* 공통: 초기 상태 (투명 + 이동됨) */
.animate-from-top,
.animate-from-bottom,
.animate-from-bottom-2 {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 위 → 아래 */
.animate-from-top {
    transform: translateY(-3.0rem);
    transition-delay: 0s; /* 바로 시작 */
}

/* 아래 → 위 */
.animate-from-bottom {
    transform: translateY(3.0rem);
    transition-delay: 0.5s; /* top이 끝난 뒤 0.5초 후 시작 */
}

/* 아래 → 위 */
.animate-from-bottom-2 {
    transform: translateY(3.0rem);
    transition-delay: 0.5s; /* bottom이 끝난 뒤 0.5초 후 시작 */
}

/* 보임 상태 */
.animate-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===============================================
   2. Scroll Interaction : scroll-animate
   =============================================== */
/* 공통 초기 상태 */
.scroll-animate {
    opacity: 0;
    transform: translateY(-3.0rem); /* 위에서 아래로 */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 보임 상태 */
.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 순차 딜레이용 */
.scroll-animate.delay-1 { transition-delay: 0.2s; }
.scroll-animate.delay-2 { transition-delay: 0.4s; }
.scroll-animate.delay-3 { transition-delay: 0.6s; }
.scroll-animate.delay-4 { transition-delay: 0.8s; }
.scroll-animate.delay-5 { transition-delay: 1s; }
.scroll-animate.delay-6 { transition-delay: 1.2s; }




/* ===============================================
   Page Title
   =============================================== */
.page-title {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6.4rem 19.2rem 0 19.2rem; 
}

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

/* ===============================================
   Soul Care Page
   =============================================== */
/* soulcare-hero-section */
.soulcare-application-container {
    padding: 16.0rem 19.2rem;
    display: flex;
    flex-direction: column;
    gap: 12.8rem;

    /* to bottom: 위에서 아래로 (기본값이긴 하지만 명시)
        #FFFFFF 0%: 0% 위치(시작)는 흰색
        #FFFFFF 50%: 50% 위치(중간)까지 흰색 유지
        #2BAE66 96%: 96% 위치까지 초록색(#2BAE66)으로 변경
        #FFFFFF 100%: 100% 위치(끝)에서 다시 흰색으로 변경
    */
    background: linear-gradient(
        to bottom,
        var(--color-background-primary) 0%,
        var(--color-main-80) 72%,
        var(--color-background-primary) 100%
    );
}

.soulcare__intro {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.soulcare__tagline {
    padding: 0;
    margin: 0;
    font-size: 5.6rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 160%;
}

.soulcare__invitation {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 200%;
}

.soulcare-width {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soulcare__application {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 6.4rem;
}

.soulcare__button-sub-title {
    padding: 0;
    margin: 0;
    font-size: 2.0rem;
    font-weight: 200; /* Light 300 말고, ExtraLight 200 */
    color: #FFFFFF;
    letter-spacing: 0.2rem; /* 0.08rem 말고, 0.2rem */
    line-height: 160%;
}

.soulcare__button_decoration_wrapper {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 6.4rem;
}

.soulcare__button-group {
    width: fit-content;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    gap: 3.2rem;
}

.soulcare__button {
    width: 8.8rem;
    height: 8.8rem;
    padding: 0;
    margin: 0;
    font-size: 2.0rem;
    font-weight: 400;
    color: var(--color-main);
    background-color: #FFFFFF;
    border: 0.1rem solid transparent;
    border-radius: 20.0rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
/* 
.soulcare__button:hover {
    width: 17.6rem;
    font-size: 4.0rem;
    font-weight: 500;
} */



/* soulcare-details-section */
.soulcare-details-section {
    padding: 6.4rem 1.6rem 12.8rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6.4rem;
}

.soulcare__details {
    width: 65ch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6.4rem;
}

.soulcare__sub-title {
    padding: 0;
    margin: 0;
    font-size: 4.8rem;
    font-weight: 300;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
    color: var(--color-main);
}

.soulcare__content {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.soulcare__content-text-gap {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.soulcare__quote {
    padding: 3.2rem 0;
}

.soulcare__content p {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 200%;
}

.soulcare__quote p {
    padding: 0;
    margin: 0;
    font-size: 3.2rem;
    font-weight: 300;
    line-height: 160%;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
    text-align: center;
    color: var(--color-main);
}



/* soulcare-team-section */
.soulcare-team-section {
    width: 100%;
    height: fit-content;
    padding: 6.4rem 1.6rem 19.6rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3.2rem;
}

.soulcare-team-section__title {
    padding: 0;
    margin: 0;
    font-size: 4.8rem;
    font-weight: 300;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
    color: var(--color-main);
}

.counselor-name__container {
    width: 65ch;
    height: fit-content;
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 2.4rem;

    /* 추가 */
    flex-wrap: wrap;

    border-top: 0.1rem solid var(--color-main);
    border-bottom: 0.1rem solid var(--color-main);
}

/* .counselor-name__grid {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 3.2rem;
} */

.profile-card {
    width: 10rem;
    height: 10rem;
    padding: 0.8rem;
    border-radius: 50%;
    border: 0.1rem solid transparent;
    cursor: pointer;

    /* 스크롤 애니메이션용 */
    --translateY: 1.5rem;
    opacity: 0;
    transform: translateY(var(--translateY));
    transition: 
        opacity 0.6s ease, 
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 스크롤 애니메이션 완료 */
.profile-card.animate-visible {
    --translateY: 0;
    opacity: 1;
}

/* hover/active */
.profile-card:hover,
.profile-card.active {
    transition: transform 0.2s ease-out;
}

.profile-card--color-1 {
    background: var(--color-soulcare-color-1-50);
}
.profile-card--color-1:hover,
.profile-card--color-1.active {
    background: var(--color-soulcare-color-1-80);
}

.profile-card--color-2 {
    background: var(--color-soulcare-color-2-50);
}
.profile-card--color-2:hover,
.profile-card--color-2.active {
    background: var(--color-soulcare-color-2-80);
}

.profile-card--color-3 {
    background: var(--color-soulcare-color-3-50);
}
.profile-card--color-3:hover,
.profile-card--color-3.active {
    background: var(--color-soulcare-color-3-80);
}

.profile-card--color-4 {
    background: var(--color-soulcare-color-4-50);
}
.profile-card--color-4:hover,
.profile-card--color-4.active {
    background: var(--color-soulcare-color-4-80);
}

.profile-card--color-5 {
    background: var(--color-soulcare-color-5-50);
}
.profile-card--color-5:hover,
.profile-card--color-5.active {
    background: var(--color-soulcare-color-5-80);
}

.profile-card--color-6 {
    background: var(--color-soulcare-color-6-50);
}
.profile-card--color-6:hover,
.profile-card--color-6.active {
    background: var(--color-soulcare-color-6-80);
}

.profile-card--color-7 {
    background: var(--color-soulcare-color-7-50);
}
.profile-card--color-7:hover,
.profile-card--color-7.active {
    background: var(--color-soulcare-color-7-80);
}

.profile-card--color-8 {
    background: var(--color-soulcare-color-8-50);
}
.profile-card--color-8:hover,
.profile-card--color-8.active {
    background: var(--color-soulcare-color-8-80);
}

.profile-card--color-9 {
    background: var(--color-soulcare-color-9-50);
}
.profile-card--color-9:hover,
.profile-card--color-9.active {
    background: var(--color-soulcare-color-9-80);
}

.profile-card--color-10 {
    background: var(--color-soulcare-color-10-50);
}
.profile-card--color-10:hover,
.profile-card--color-10.active {
    background: var(--color-soulcare-color-10-80);
}

.profile-card__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.4rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
}

.profile-card__number {
    padding: 0;
    margin: 0;
    font-size: 1.0rem;
    font-weight: 700;
    color: #FFFFFF;
}

.profile-card__name {
    padding: 0;
    margin: 0;
    font-size: 2.2rem;
    font-weight: 500;
    color: #FFFFFF;
}

/* counselor-profile-details__container */
.counselor-profile-details__container {
    width: 65ch;
    height: fit-content;
    padding-top: 6.4rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.counselor-profile-details-header {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
}

.counselor-profile-details-header__wrapper {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.counselor-profile-details-header__wrapper-1 {
    color: var(--color-soulcare-color-1-80);
}

.counselor-profile-details-header__wrapper-2 {
    color: var(--color-soulcare-color-2-80);
}

.counselor-profile-details-header__wrapper-3 {
    color: var(--color-soulcare-color-3-80);
}

.counselor-profile-details-header__wrapper-4 {
    color: var(--color-soulcare-color-4-80);
}

.counselor-profile-details-header__wrapper-5 {
    color: var(--color-soulcare-color-5-80);
}

.counselor-profile-details-header__wrapper-6 {
    color: var(--color-soulcare-color-6-80);
}

.counselor-profile-details-header__wrapper-7 {
    color: var(--color-soulcare-color-7-80);
}

.counselor-profile-details-header__wrapper-8 {
    color: var(--color-soulcare-color-8-80);
}

.counselor-profile-details-header__wrapper-9 {
    color: var(--color-soulcare-color-9-80);
}

.counselor-profile-details-header__wrapper-10 {
    color: var(--color-soulcare-color-10-80);
}

.counselor-profile-details-header__index {
    padding: 0;
    margin: 0;
    font-size: 8.8rem;
    font-weight: 300;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
    line-height: 100%;
}

.counselor-profile-details-header__info {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.counselor-profile-details-header__name {
    padding: 0;
    margin: 0;
    font-size: 5.6rem;
    font-weight: 600;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
}

.counselor-profile-details-header__role {
    padding: 0;
    margin: 0;
    font-size: 2.0rem;
    font-weight: 500;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
}

/* btn_translation_soulcare_team */
.btn_translation_soulcare_team {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    gap: 1.0rem;
}

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

    /* Typography */
    font-size: 1.4rem;
    font-weight: 600;

    /* Visual */
    border-radius: 20.0rem;
    cursor: pointer;

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

.btn_profile_lang.active {
    border: 0;
    color: var(--color-text-inverse);
}

.btn_lang-1 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-1-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-1-80);
}
.btn_lang-1.active {
    background-color: var(--color-soulcare-color-1-80);
}

.btn_lang-2 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-2-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-2-80);
}
.btn_lang-2.active {
    background-color: var(--color-soulcare-color-2-80);
}

.btn_lang-3 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-3-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-3-80);
}
.btn_lang-3.active {
    background-color: var(--color-soulcare-color-3-80);
}

.btn_lang-4 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-4-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-4-80);
}
.btn_lang-4.active {
    background-color: var(--color-soulcare-color-4-80);
}

.btn_lang-5 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-5-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-5-80);
}
.btn_lang-5.active {
    background-color: var(--color-soulcare-color-5-80);
}

.btn_lang-6 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-6-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-6-80);
}
.btn_lang-6.active {
    background-color: var(--color-soulcare-color-6-80);
}

.btn_lang-7 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-7-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-7-80);
}
.btn_lang-7.active {
    background-color: var(--color-soulcare-color-7-80);
}

.btn_lang-8 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-8-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-8-80);
}
.btn_lang-8.active {
    background-color: var(--color-soulcare-color-8-80);
}

.btn_lang-9 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-9-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-9-80);
}
.btn_lang-9.active {
    background-color: var(--color-soulcare-color-9-80);
}

.btn_lang-10 {
    /* Visual */
    border: 0.1rem solid var(--color-soulcare-color-10-80);
    /* --- 기본 상태 (비활성) --- */
    color: var(--color-soulcare-color-10-80);
}
.btn_lang-10.active {
    background-color: var(--color-soulcare-color-10-80);
}



.hidden {
    display: none !important;
}

.counselor-profile-details-hero {
    width: 38.4rem;
}

.counselor-profile-details-hero-wrapper {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.counselor-info-block__wrapper {
    width: 100%;
    height: fit-content;
    padding: 2.4rem 3.2rem;
    border-radius: 2.5rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;

    /* x축 | y축 | 흐림정도 | 색상(투명도 10%) */
    box-shadow: 0 0.6rem 0.6rem rgba(0, 0, 0, 0.25);
}

.counselor-info-block__wrapper-first {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.counselor-info-block__wrapper-1 {
    background-color: var(--color-soulcare-color-1-80);
}

.counselor-info-block__wrapper-2 {
    background-color: var(--color-soulcare-color-2-80);
}

.counselor-info-block__wrapper-3 {
    background-color: var(--color-soulcare-color-3-80);
}

.counselor-info-block__wrapper-4 {
    background-color: var(--color-soulcare-color-4-80);
}

.counselor-info-block__wrapper-5 {
    background-color: var(--color-soulcare-color-5-80);
}

.counselor-info-block__wrapper-6 {
    background-color: var(--color-soulcare-color-6-80);
}

.counselor-info-block__wrapper-7 {
    background-color: var(--color-soulcare-color-7-80);
}

.counselor-info-block__wrapper-8 {
    background-color: var(--color-soulcare-color-8-80);
}

.counselor-info-block__wrapper-9 {
    background-color: var(--color-soulcare-color-9-80);
}

.counselor-info-block__wrapper-10 {
    background-color: var(--color-soulcare-color-10-80);
}

.counselor-name-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.counselor-name-block__name {
    padding: 0;
    margin: 0;
    font-size: 3.2rem;
    font-weight: 500;

}

.counselor-name-block__team {
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 500;
}

.counselor-photo-block {
    width: 8.0rem;
    height: 8.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
}

.counselor-photo-block__avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.counselor-info-block__heading {
    border-bottom: 0.1rem solid #FFFFFF;
    padding-bottom: 0.1rem;
    width: fit-content;
    height: fit-content;
}

.counselor-info-block__heading p {
    padding: 0;
    margin: 0;
    font-size: 2.0rem;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
}

.counselor-info-block__content {
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 200%;
}



/* ===============================================
   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;
}



/* ===============================================
   모바일 반응형
   -->> 72em  ( (1152px / 16 = 72) )
        64em  ( (1024px / 16 = 64) )
   -->> (메뉴판) 54em ( (864px / 16 = 54) )
   -->> 48em  ( (768px / 16 = 48) )
        42em  ( (672px / 16 = 42) )
   -->> (38em (600px/16=37.5)이 390px 디자인임)
        25em ( (390px / 16 = 24.375) )
        24em  ( (375px / 16 = 23.43) )
        16em  ( (320px / 16 = 16) )
   =============================================== */

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

    /* Page Title */
    .page-title {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }

    /* soulcare-hero-section */
    .soulcare-application-container {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }
}

/* ===============================================
    864px (메뉴판 보이는 시점)
    =============================================== */
@media (max-width: 54em) {
    /* Navigation Toggle (햄버거 버튼) */
    .nav-toggle {
        display: block;
        right: 3.2rem;
    }


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

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

        /* 디자인 */
        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 {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;

        /* width: 100%; */
    }

    /* 2. 메인 메뉴 호버 시 */
    /* .nav-menu .nav-item {
        width: 100%;
        border-radius: 2.5rem;
    }
    .nav-menu .nav-item:hover {
        background-color: var(--color-main-light);
    } */

    /* 3. 메인 메뉴 링크 */
    .nav-menu .nav-list .nav-link {
        padding: 1.6rem 0 1.6rem 1.6rem;
        margin: 0;
        font-size: 3.2rem;
        font-weight: 200;
        color: var(--color-main);
        text-transform: uppercase;
    }


    /* --- 서브 메뉴 (드롭다운) --- */
    /* 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: 0; /* 상위 메뉴와의 간격 */
        row-gap: 0; /* 하위 메뉴 간격 */
    }

    /* 2. 서브메뉴 링크 */
    .nav-menu .nav-list .nav-item .submenu .submenu-link {
        padding: 1.6rem 0 1.6rem 1.6rem;
        margin: 0;
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--color-main);
    }
}

/* ===============================================
    832px - 52em보다 클 때만 호버 효과 적용
    =============================================== */
@media (min-width: 52em) { 
    .soulcare__button:hover {
        width: 17.6rem;
        font-size: 4.0rem;
        font-weight: 500;
    }
}

/* ===============================================
    768px
    =============================================== */
@media (max-width: 48em) {
    /* Navigation Toggle (햄버거 버튼) */
    .nav-toggle {
        top: 2.0rem;
        right: 2.0rem; /* 데스크탑 header의 우측 패딩과 동일 */
    }


    /* Header & Logo */
    .site-header {
        padding-top: 2.0rem;
        padding-left: 2.0rem;
        padding-right: 2.0rem;
    }

    /* Page Title */
    .page-title {
        padding-left: 2.0rem;
        padding-right: 2.0rem;
        justify-content: center;
    }

    /* soulcare-hero-section */
    .soulcare-application-container {
        padding: 12.8rem 2.0rem;
        gap: 6.4rem;
    }

    .soulcare__tagline {
        font-size: 4.8rem;
    }

    .soulcare-width {
        justify-content: flex-start;
    }

    .soulcare__application {
        gap: 3.2rem;
    }

    .flower-icon {
        display: none;
    }



    /* --- Footer --- */
    .site-footer {
        background-color: #121212;
        color: #FFFFFF;
    }
    
    .site-footer__main {
        display: none;
    }
}

/* ===============================================
    600px
    =============================================== */
@media (max-width: 38em) {
    /* Navigation Toggle (햄버거 버튼) */
    .nav-toggle {
        /* --- 변수 정의 --- */
        --bar-height: 0.2rem; /* 선 굵기 : 3 -> 2 */
        --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);
    }

    /* 1. 내비게이션 메뉴 패널 (모바일) */
    .nav-menu {
        padding: 6.4rem 3.2rem; /* 상단(헤더 영역) 띄우고 내부 패딩 */
    }

    /* 2. 메인 메뉴 링크 */
    .nav-menu .nav-list .nav-link {
        font-size: 2.0rem;
        font-weight: 300;
    }

    /* 3. 서브 메뉴 (드롭다운) */
    /* 서브메뉴 링크 */
    .nav-menu .nav-list .nav-item .submenu .submenu-link {
        font-weight: 300;
    }



    /* Header & Logo */
    .site-header {
        padding-top: 1.6rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .site-header__logo {
        width: fit-content;
        height: 5.0rem;
    }

    .site-header__logo img {
        width: auto;
        height: 100%;
    }

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

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

    /* soulcare-hero-section */
    .soulcare-application-container {
        padding: 8.6rem 1.6rem;
        gap: 9.6rem;
    }

    .soulcare__tagline {
        font-size: 3.2rem;
    }

    .soulcare-width {
        justify-content: center;
        padding: 2.4rem;
        border-top: 0.1rem solid #FFFFFF;
        border-bottom: 0.1rem solid #FFFFFF;
        border-radius: 2.5rem;
    }

    .soulcare__application {
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2.4rem;
    }

    .soulcare__button-sub-title {
        font-size: 1.3rem;
    }

    .soulcare__button-group {
        flex-direction: column;
        gap: 1.6rem;
    }

    .soulcare__button {
        width: 25.6rem;
        height: fit-content;
        padding: 0.8rem;
        font-size: 2.4rem;
        font-weight: 500;
    }

    /* soulcare-details-section */
    .soulcare-details-section {
        padding: 3.2rem 1.6rem;
        gap: 3.2rem;
    }

    .btn_translate {
        width: 100%;
        gap: 0.8rem;
    }

    .btn_translate .btn_lang {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.2rem;
    }

    .soulcare__details {
        width: 100%;
        gap: 3.2rem;
    }

    .soulcare__sub-title {
        font-size: 4.0rem;
    }

    .soulcare__content p {
        font-weight: 300;
    }

    .soulcare__quote {
        padding: 1.6rem 0;
    }

    .soulcare__quote p {
        font-size: 2.8rem;
    }

    /* soulcare-team-section */
    .soulcare-team-section {
        padding: 8.0rem 1.6rem 1.6rem 1.6rem;
    }

    .soulcare-team-section__title {
        font-size: 4.0rem;
    }

    .counselor-name__container {
        width: 100%;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        gap: 1.6rem;
    }

    /* counselor-profile-details__container */
    .counselor-profile-details__container {
        width: 100%;
        padding-top: 0;
        justify-content: flex-start;
        flex-direction: column;
        gap: 4.8rem;
    }

    .counselor-profile-details__container-6,
    .counselor-profile-details__container-7,
    .counselor-profile-details__container-8,
    .counselor-profile-details__container-9 {
        padding-top: 1.6rem;
    }

    .counselor-profile-details-header {
        width: 100%;
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: 1.6rem;
    }

    .counselor-profile-details-header__wrapper {
        width: 100%;
        flex-direction: row;
        gap: 1.6rem;
        justify-content: center;
    }

    .counselor-profile-details-header__index {
        font-size: 4.0rem;
        font-weight: 200;
    }

    .counselor-profile-details-header__name {
        font-size: 4.0rem;
        font-weight: 200;
        line-height: 100%;
    }

    .counselor-profile-details-header__name br {
        display: none;
    }

    .counselor-profile-details-header__role {
        display: none;
    }

    /* btn_translation_soulcare_team */
    .btn_translation_soulcare_team {
        gap: 0.8rem;
    }

    .btn_profile_lang {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.2rem;
    }

    /* counselor-profile-details-hero */
    .counselor-profile-details-hero {
        width: 100%;
    }

    .counselor-name-block__name-1,
    .counselor-name-block__name-5,
    .counselor-name-block__name-8 {
        font-size: 2.8rem;
    }
    
    .counselor-name-block__name-9 {
        font-size: 2.4rem;
    }



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

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