@import url("./normalize.css");
@import url("./theme.css");
@import url("./base.css");




/*공통 영역*/

/* 아이콘 사용할 때, 간격 */
/* font awsome */
.far {
    padding: var(--spacing-xs);
}

  /* 공통 클래스 모듈 */
.search--button {
    cursor: pointer;
    height: 44px;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 0.125rem var(--spacing-xs);
    white-space: nowrap;
    font-size: var(--text-sm);
}
  
 .button--none {
    border: 0;
    padding: 0;
    background: transparent;
}
  
.search--button--fill {
    background: var(--secondary-color);
    color: var(--search-icon-color);
    border: 0;
}
  
.button--outline {
    background: transparent;
    color: var(--secondary-color);
    border: 1px solid currentColor;
}



/* 공통 헤더 컨테이너 스타일  */


.headerContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background : var(--primary-color);
    color : white;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 공통 헤더 스타일 */
.appHeader{
  padding: 0 var(--spacing-lg);
  position: relative;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-base);
}

.header-top-message-container{
    display : flex;
    justify-content: center;
    align-items: center;
    width : 100%;
    background-color : var(--secondary-color);
    padding-top : var(--spacing-xs);
    padding-bottom : var(--spacing-xs);
}

.header-top-message{
    font-size : var(--text-sm);
    font-style: italic;
}

.header-main-logo{
    /*font-size : var(--text-2xl);*/
    width : 37px;
/*    height : 45px;*/
}

/* 공통 로고 */
.logo{
    width: 100%;
}


/* 공통 멤버 링크 모음 */
.header-right-icon-list-box{
 /*   order: -1;
    width: 100%;*/
    display: flex;
    justify-content: flex-end; /* 플렉스 항목들을 축의 끝 부분에 정렬합니다. */
}
  /*
.header-right-icon-list-box li{
    display: flex;
    align-items: center;
}
*/

/* 공통 검색 폼 */
.searchForm{
/*  width: 100%;*/
 /* margin-top: var(--spacing-base);*/
}

/* 공통 검색 폼 */
input[type="search"] {
  appearance: none;
}


.searchForm__group {
  display: flex;
  flex-flow: row nowrap;
}

.searchForm__group .formInput {
  margin-right: -5px;  /*겹치게 하기 위해서 마이너스로 조정*/
}



.searchForm__group .formInput__input {
  float: right;
  height: 44px;
  border: 0px solid var(--silver);
  background: var(--secondary-color);
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
  padding: 0.125rem var(--spacing-lg);
  width : 100%;
  min-width : 100px;
  color : white;
  outline : none; /*포커스 됐을 때, 테두리 제거*/
}

/* 공통 검색 아이콘  */


.search-icon{
  font-size : var(--text-xl);
  /*color : white;*/
}



/* 공통 유저 프로필 아이콘 */
.login-profile-image{
    width: 45px;
    height: 45px;
    border-radius: 50%;
}



/* 공통 알림 아이콘 */
.top-notify-area:hover{
    cursor : pointer;
}


.notify-icon:focus {
    outline-offset : 2px;
}

/* 공통 헤더 상단 아이콘 박스*/
.header-right-icon-container{
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content: center;
}

.header-right-icon-container a{
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content: center;
    gap : var(--spacing-sm);
    cursor : pointer;
}

.header-right-icon-box{
    width: 44px;
    height : 44px;
    border-radius : 50%;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content: center;
    transition: background-color .15s ease-out, filter 0.15s ease-out;
}

.header-right-icon-container svg,
.header-right-icon-container svg{
    width: 22px;
    height : 22px;
}


.header-right-icon-container img{
    width: 100%;
    height : 100%;
}

.header-right-icon{
    border-radius : 50%;
}

/*SVG 아이콘의 경우 흰색으로 칠하기*/
.header-right-icon path{
    fill : white;
}

#header_right_notify_icon{
    background-color : var(--blue-button-color) ;
}

#header_right_notify_icon:hover{
    background-color : var(--blue-button-hover-color) ;
}


#header_right_post_icon{
    background-color : var(--green-button-color) ;
}

#header_right_post_icon:hover{
    background-color : var(--green-button-hover-color) ;
}


#header_right_singUp_icon{
    background-color : var(--orange-button-color) ;
}


#header_right_singUp_icon:hover{
    background-color : var(--orange-button-hover-color) ;
}


/* 카카오, 프로필 이미지에 마우스 올렸을 때, 흐리게 */
#header_kakao_icon:hover, #header_icon_profile_img:hover{
    filter: brightness(70%);
}



.header-right-item-text{
    font-size : var(--text-sm);
}

/* 공통 드랍다운 아이콘 설정 */
.header-dropDown-icon svg{
    fill : white;
    margin-left : var(--spacing-xs);
    width : 12px;
    height : 12px;
    transition: transform .33s ease-out;
}

/* 마우스 올렸을 때, active class가 추가되어 180도 회전 */
.menu__item.has-submenu.active > .menu__link.main-menu .header-dropDown-icon svg
 ,.header-right-icon-container.has-dropdown.open .header-dropDown-icon svg{
    transform : rotate(180deg);
}



/*데스크탑*/  
@media (min-width: 768px) {


    /* 데스크탑 헤더 */
    .appHeader{
        width: 100%;
        height : 140px;
        max-width : var(--header-width);
    }



    /*데스크탑 헤더 왼쪽*/
    .header-top{
        width: 100%;
        display: grid;
        grid-template-areas:
            "logo search icons"
            ".    links  icons";
/*        grid-template-columns: auto 1fr auto;*/
        grid-template-columns: auto minmax(0, 1fr) auto; /* 수정된 부분 */
        grid-template-rows: minmax(auto,1fr);
        align-items: start;
        padding: 20px 28px 16px;
        gap: 8px 16px;
        /*align-items: center;  /*세로 방향 중앙 정렬*/
        /*justify-content: space-between;*/
    }


    /*데스크탑 로고 컨테이너 */
    .logo-container{
        grid-area : logo;
        display : flex;
        align-items : center;  /*세로 방향 중앙 정렬*/
        align-self: center;
        gap : var(--spacing-lg);
    }

    /* 데스크탑 로고 링크 컨테이너 */
    .logo-link-container{
        display : flex;
    }

    /*데스크탑 헤더 명칭 이름 */
    .header-name{
        font-size : var(--text-2xl);
        font-weight : 600;
        margin-left : var(--spacing-xs);
    }


    /*데스크탑 검색, 로그인 메뉴 묶음*/
    .header-top-right{
        grid-area: icons;
        max-width: calc(100vw - 550px);
        /* width: 100%; */
        height: 100%;
    }

    /* 데스크탑 입점신청 로그인 */
    .header-right-icon-list-box{
      display: grid;
      grid-auto-columns: minmax(0,13ch);
      grid-auto-flow: column;
      justify-items: center;
     /* gap: 0 min(16px,1vw);*/
      gap: 0 min(16px,1dvw);
      height : 100%;
      /*margin-left : var(--spacing-base);*/
    }



    /*모바일에서만 보여주려고 할 때*/
    .mobile--show{
        display: none;
    }


    .logo__link{
        display: block;
        /*width: 12.75rem;*/
        font-size : 4rem;
    }

    /* 데스크탑 검색 폼 */
    .searchForm__group {
        display: flex;
       /* justify-content: end;*/
        align-items: stretch;
        align-self: center;
        position: relative;
        width: 100%;
    }
    /**/
    .searchForm{
        grid-area: search;
        display: flex;
        flex-wrap : nowrap;
     /*   justify-content: end;*/
        align-items: stretch;
        align-self: center;
        position: relative;
        width: 100%;
        max-width: 640px;
        height: 44px;
        outline: 0;
        font-size: 14px;
        /*line-height: 16px;*/
        border-radius: 24px;
    }


    /* 데스크탑 검색 폼 */

    .searchForm__group .formInput {
       /* max-width: 14vw;*/
       flex: 1 1 auto;
       min-width: 0;
       padding: 0 0 0 22px;
       border: 0;
       border-radius: 22px 0 0 22px;
       margin: 0;
       outline: 0;
       width: 100%;
       visibility: visible;
       opacity: 1;
       transition: all .5s cubic-bezier(0,.105,.035,1.57);
    }

    /* 데스크탑 검색 아이콘 */
    .search-icon{
      color : var(--search-icon-color);
    }

    /* 데스크탑 알림 박스 */
    .top-notify-area {
        /*margin-left : var(--spacing-xs);*/
    }

    /* 데스크탑 알람 아이콘 */
    .notify-icon{
        font-size : var(--icon-base);
        color: white;
        padding : var(--spacing-xs);
    }


    /* 데스크탑 메인 메뉴 제어 버튼 */
    .buttonWrapper{
        display: none;
    }

    /* 데스크탑 메뉴 컨테이너 */
    .appNavigation {
        display: inline-block;
        grid-area : links;
        justify-self: center;     /* 그리드 영역 내에서 수평 중앙 정렬 */
/*        justify-content: center;*/
    }

    /* 데스크탑 메인 메뉴 */
    .menu {
      /*background: var(--primary-color);*/
      /*padding: var(--spacing-base) var(--spacing-lg);*/
    }


    .menu__list {
      width:100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      padding-left: var(--spacing-md);
      padding-right: var(--spacing-md);
    }


    /* 데스크탑 메뉴링크 */
    .menu__link {
      font-size: var(--text-md);
      font-weight: 600;
      color: var(--white);
     /* padding-top : var(--spacing-base);
      padding-bottom : var(--spacing-base);*/
    /* text-shadow: 1px 1px 0 var(--black), -1px -1px 0 var(--black);*/
    }


    /* 마지막 요소를 제외한 mobile--show가 없는 menu__item에 margin-right 적용 */
    .menu__list .menu__item:not(.mobile--show):not(:last-child) {
       /* margin-right: var(--spacing-xl); *//* 원하는 마진 값을 적용하세요 */
    }

    /* 데스크탑 메뉴 아이템 */
    .menu__list .menu__item{
        padding : var(--spacing-sm) var(--spacing-lg);
    }

    .menu__list .menu__item:hover{
        background-color : var(--secondary-color);
        border-radius: 50px;
    }

    /* 데스크탑 서브 메뉴 최초엔 숨긴다 */
    .menu__item .submenu, .header-right-icon-container.has-dropdown .submenu {
      display: none;
    }


    /* 데스크탑 서브메뉴 */
    .menu__item.has-submenu.active .submenu
    ,.header-right-icon-container.has-dropdown .submenu.active{
        /*max-width : var(--container-width);*/
        background-color : white;
        color : var(--primary-color);
        font-weight : 500;
        display : flex;
        flex-direction: column;
        opacity: 1;      /*완전 불투명*/
        position: absolute;
        top: 140px;
        /*left : 10px;*/
        width: 180px;
        max-height: calc(100vh - 185px);
        overflow-y: auto;
        row-gap: 4px;
       /* background-color: var(--dropdownBgColor);*/
        border-radius: 6px;
        padding: 8px 6px;
        border: #f6f6f6;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15), 0px 3px 10px 0px rgba(0, 0, 0, .1);
        animation: scaleAnimation 0.25s ease-in-out forwards;
        z-index : 999;
    }

    .menu__item.has-submenu .submenu li{
         list-style: none; /* 기본 리스트 스타일 제거 */
    }


    .has-submenu .active{
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
       /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    /*    z-index : 999;
        top : 64px;  */  /*메뉴바 바로 아래에 위치하도록 조정*/
    }


   /* .menu__item:hover 안에 있는 .submenu를 보이게 함 */

    .menu__item:hover .submenu {
        display: none; /* 수평 배열을 위해 Flexbox 사용 */
        flex-direction: row; /* 아이템들을 가로로 배열 */
        list-style: none; /* 기본 리스트 스타일 제거 */
        padding: 0; /* 여백 제거 */
    }

    .menu__item.active a {
      /* color: var(--text-hover-pink-color);*/ /* 원하는 색상으로 변경하세요 */
    }

    .menu__link.main-menu-active {
    /*   color: var(--text-hover-pink-color); *//* 원하는 색상으로 변경하세요 */
       font-weight : 700;
    }

    .submenu__link.active {
     /*  color: var(--text-hover-pink-color);*/ /* 원하는 색상으로 변경하세요 */
       font-weight : 700;
     /*  border-bottom: 4.5px solid var(--text-hover-pink-color);*/
    }


    /* menu__link li 요소에 마우스가 올라갔을 때 스타일 변경 */
    .menu__link:hover {
      color: var(--text-hover-pink-color); /* 원하는 색상으로 변경하세요 */
    }

    /* 데스크탑 서브메뉴 */
    .submenu__link {
        display: flex;
        font-weight: 400;
        padding: var(--spacing-sm) var(--spacing-sm);
        text-decoration: none;
        white-space: nowrap;
        text-align: center;
    }

    /* 데스크탑 서브메뉴 마우스 오버시 */
    .submenu__link:hover {
        border-radius: 50px;
        background-color : var(--subMenu-hover-color);
    }

    /* 데스크탑 레이아웃 */
    .appHeader, .menu__list{
     /* max-width: var(--container-width);
      margin-left: auto;
      margin-right: auto;*/
   /*   padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);*/
    }

    /*데스크탑 찾기 버튼*/
    .search--button {
        margin-right : var(--spacing-2xs);
    }



    /*데스크탑 알림 숫자*/
    /*display는 header.js에서 설정해줌*/
    .notify-number{
        position: relative;
        bottom : 16px;
        /*width : 40px;*/
        text-align: center;
        color : white;
        font-size : var(--text-sm);
        border-radius: 50%; /* 동그랗게 만들기 위한 반경 값 지정 */
        background-color: var(--notify-red-color); /* 배경색상 지정 */
        padding: 4px 4px;   /**/
        margin-left : -14px;  /*알림 뱃지와 겹치게 하기 위해서*/
    }

    /* 데스크탑 서브 내비게이션바 */
    .header-sub-nav{
        width : 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        background-color: white;
        color : var(--primary-color);
        border-bottom: 1px solid #e0e0e0;
       /* z-index: -1;*/
    }

    /* 데스크탑 서브 내비세이션 UL 태그 */
    .header-sub-nav-items{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 28px;
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 40px;
        overflow-x: hidden;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-padding: 14px;
        font-size : var(--text-base);
    }

    .header-sub-nav-headline{
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0 0 0 0;
        color: var(--subnavHeadlineColor);
        font-weight: 400;
        scroll-snap-align: start;

    }


    .header-sub-nav-headlineText{
        display: inline;

    }

    .header-sub-nav-item{
        scroll-snap-align: start;
    }

    .header-sub-nav-link{
        display: inline-block;
        text-decoration: none;
        width: max-content;
        color: var(--subnavTextColor);
        padding : 0 var(--spacing-base);
        font-weight: 600;
        transition: all .2s;
    }

}




/*모바일 기기*/
@media (max-width: 767px){

    /* 모바일에서는 감추기 */
    .only-desktop{
        display : none;
    }

    /*모바일에서만 보여주려고 할 때*/
    .mobile--show{
        display: block;
    }

    .header-right-icon-list-box{
     /* display : none;*/
    }


    /*모바일 일 때, 로고 사이즈*/
    .logo__link{
        font-size: 2.5rem; /* 모바일 아이콘 크기 */
    }

    /* 모바일 헤더 */
    .appHeader{
      padding: var(--spacing-base) var(--spacing-xl);
      width: 100%;
      height : 80px;
      display: flex;
      align-items: center;
      background-color: var(--primary-color);
      color: #fff;
    }

    /* 모바일 헤더 상단 메시지 */
    .header-top-message{
        font-size : var(--text-xs);
        font-style: italic;
    }

    .header-top{
      display : flex;
      flex : 1 1 auto;
      gap : var(--spacing-base);
      align-items : center;
    }

    /* 모바일 헤더 명칭 이름 */
    .header-name{
        font-size : var(--text-xl);
        font-weight : 600;
    }

    .logo-container{
        display : flex;
        align-items : center;  /*세로 방향 중앙 정렬*/
        gap : var(--spacing-md);
    }


    .logo-link-container{
        width : 35px;
    }

    /* Mobile 검색 폼 */
    .searchForm__group {
        display: flex;
        justify-content: end;
        align-items: stretch;
        align-self: center;
        position: relative;
        width: 100%;
    }
    /**/
    .searchForm{
      /*  grid-area: search;*/
        display: flex;
        justify-content: end;
        align-items: stretch;
        align-self: center;
        position: relative;
        width: 100%;
        height: 44px;
        outline: 0;
        font-size: 14px;
        line-height: 16px;
        border-radius: 24px;
    }


    /* Mobile 폼 */
    .searchForm__group .formInput {
       /* max-width: 14vw;*/
       flex: 1 1 auto;
       min-width: 0;
       padding: 0 0 0 22px;
       border: 0;
       border-radius: 22px 0 0 22px;
       margin: 0;
       outline: 0;
       width: 100%;
       visibility: visible;
       opacity: 1;
       transition: all .5s cubic-bezier(0,.105,.035,1.57);
    }

    /* 모바일 검색 폼 */
    .searchForm__group .formInput__input {
        padding: 0.125rem var(--spacing-base);
    }


    /* 모바일 검색 버튼 */
    .search--button--fill{
        background: var(--secondary-color);
        color: var(--search-icon-color);
        border: 0;
    }

    /* 모바일 검색 placeholder 숨기기 */
    #search::placeholder {
        visibility: hidden;
    }

    /* 모바일 메인 메뉴 제어 버튼 */
    .buttonWrapper{
 /*       width: 100%;*/
        height: 100%;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
    }

    .buttonWrapper:hover{
        cursor : pointer;
    }

    .button--burger{
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      /*      border-radius: 4px;*/
      transition: all 200ms ease-in-out;   /*애니메이션 효과*/
    }

    .button--burger:focus{
      outline-offset: 2px;
    }

    .buttonWrapper:hover{
        cursor : pointer;
    }

    .button--burger:hover{
     /*   color : var(--text-hover-pink-color);*/
    }

    /* 모바일 메인 알림 버튼 시작 */
    .top-notify-area{

    }

    /* 모바일 알림 아이콘 */
    .notify-icon{
        color : white;
        font-size : var(--icon-sm);
        padding : var(--spacing-xs);
    }

    /*모바일 알림 숫자*/
    /*display는 header.js에서 설정해줌*/
    .notify-number{
        position: relative;
        bottom : 14px;
        /*width : 40px;*/
        text-align: center;
        font-size : var(--text-xs);
        color : white;
        border-radius: 50%; /* 동그랗게 만들기 위한 반경 값 지정 */
        background-color: var(--notify-red-color); /* 배경색상 지정 */
        padding: 3px 5px;   /**/
        margin-left : -12px;  /*알림 뱃지와 겹치게 하기 위해서*/
    }

    /* Mobile notify area */
    #header_right_notify_icon {
        background-color: transparent;
    }
    /* 모바일 메인 알림 버튼 끝 */


    /* 모바일 위의  메뉴에 아래와 같은 것을 적용해도 되지만.... 메뉴에서는 보이지는 않지만 제목 때문에 ....*/
    .menu__list{
      background: var(--accent-opacity-color);
      position: fixed;
      z-index: 999;                 /* 떠 있는 개체이기 때문에*/
      top: 0;
      right: -100vw;
      width: 70vw;            /*화면에 꽉차게 보여줌*/
      max-width : 280px;
      height: 100%;           /* 100vh로 하면 잘린다. */
      backdrop-filter: blur(4px);   /*뒤에 블러 처리*/
     /* padding-left : var(--spacing-lg);
      padding-right : var(--spacing-lg);*/
      /*transform: translateX(-150%);*/ /*비활성화된 상태이기 때문에 안보여야함 -150이면 화면 밖으로*/
      transition: all 350ms ease-in-out;
      overflow : auto; /* 스크롤 이벤트를 위하여 추가 */
    }

      .menu__list .login{
        background: var(--secondary-color);
        color : white;
      }


    .menu__item {
    /*  border-bottom: 1px solid var(--silver);*/
    }
  
    .menu.is--active .menu__list {   /*.menu와 .menu__list가 부모자식인 관계일 때*/
      right: 0;
    }


    /* 모바일 서브메뉴 */
    .header-dropDown-icon svg{
        fill : var(--primary-color);
    }

    .menu__item.has-submenu.open .header-dropDown-icon svg{
        transform : rotate(180deg);
    }

     .submenu {
       display: none;
       /*padding-top: var(--spacing-base);*/

       padding-bottom: var(--spacing-base);
       font-size : var(--text-lg);
       font-weight : 300;
     }

     .submenu li {
        color : var(--secondary-color);
     }


     .has-submenu.open .submenu {
       display: block;
     }

     .submenu li {
        padding-left: var(--spacing-xl);
        padding-top : var(--spacing-xs);
        padding-bottom : var(--spacing-xs);
     }


    .menu__link{
      display: flex;
      align-items: center;
      padding-top : var(--spacing-md);
      padding-bottom : var(--spacing-md);
      font-size: var(--text-lg);
      color : var(--primary-color);
      font-weight : 600;
      border-bottom : 1px solid var(--main-item-border-color);
    }


    /**/
    .menu__link.profile-container{
        border-bottom : none;
        padding-left : var(--spacing-base);
    }


    /* 모바일 메인 메뉴에만 좌우 margin */
    .menu__link.main-menu{
      margin-left : var(--spacing-md);
      margin-right : var(--spacing-md);
    }


    .mobile-menu-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width : 24px;
        height : 24px;
        border-radius : 50%;
        margin-right: var(--spacing-sm);
    }


    .mobile-menu-icon svg{
        width : 12px;
        height : 12px;
        border-radius : 50%;
    }

    /* 모바일 글쓰기 버튼 바탕 색상 */
    #mobile_menu_post_icon{
        background-color : var(--green-button-color);
    }


    /* 모바일 로그인 창만 별도로 설정 */
    .mobile-login-container .menu__link{
       padding-top : var(--spacing-lg);
       padding-bottom : var(--spacing-lg);
       padding-left : var(--spacing-base);
       color : white;
       display : flex;
       align-items : center;
       gap : var(--spacing-sm);
    }

     /*모바일 메뉴창 강조 */
    .menu__item.active a {
        color: var(--text-hover-pink-color); /* 원하는 색상으로 변경하세요 */
    }

     /* 로그인 클래스는 제외 */
     .menu__link.main-menu-active:not(.login){
         color: var(--text-hover-pink-color); /* 원하는 색상으로 변경하세요 */
         font-weight : 700;
     }


    .menu__link:hover:not(.login) {
        background-color : var(--menu-hover-color);
       /*  border-radius : 36px;*/
    }

    /*모바일 서브메뉴 */
    .submenu__link{
        display : block;
        width : 100%;
    }

    .submenu__link.active {
        color: var(--primary-color); /* 원하는 색상으로 변경하세요 */
        font-weight : 700;
    }

    /* 모바일 서브메뉴 마우스 올렸을 때 */
    .submenu li:hover{
       font-weight: 700;
       background-color : var(--menu-hover-color);
    }

    .profile-container{
        display : flex;
        align-items : center;
        gap : var(--spacing-base);

    }

    .login-email{
        font-size : var(--text-sm);
        font-weight : 400;

    }

    /*모바일 마이페이지, 로그아웃, 모아보기*/
    .profile-menu{
        display : flex;
        align-items : center;
        width : 100%;
        background : var(--dim-grey);
    }

    .profile-menu a{
        font-size : var(--text-sm);
        font-weight : 500;
        text-align: center;
    }

    .profile-menu .menu__link{
        padding-left : var(--spacing-xs);
        padding-right : var(--spacing-xs);
        background : var(--dim-grey);
        width: 33.5%; /*총 3개의 매뉴 이므로 */
    }

    /*
     이 선택자는 .menu 요소가 .is--active 클래스를 가지고 있는 경우, 그 바로 뒤에 있는 형제 요소 중 .backdrop 클래스를 선택합니다.
    */
    .menu.is--active + .backdrop {  /* .menu와 .backdrop 형제 관계 일 때*/
      opacity: 1; /* 사이드바가 열릴 때 흐릿한 배경의 투명도를 1로 설정 */
    }


    /**/
    .backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5); /* 흐릿한 배경을 위한 색상과 투명도 조절 */
      z-index: 800; /* 999로 하면 사이드바가 닫혔을 때에도 메인화면 위에 존재하게 되기 때문에 999보다 낮은 값으로 */
      opacity: 0; /* 초기에 투명도를 0으로 설정 */
      transition: opacity 0.3s;
    }


}