.header-bar {
    height: 40px;
}

/*drop-down*/
.drop-down-sort {
    background-color: var(--basic-white);
    height: 44px;
    width: auto; /* Auto-adjust width based on content */
    min-width: 100px; /* Ensure it doesn't get too small */
    font-size: 16px;
    font-weight: 400;
    border-radius: 22px;
    color: var(--brand-purple);
    border: 1px solid #e7e7e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 16px;
    white-space: nowrap; /* Prevent text wrapping */
}

.drop-down-sort-modal {
    top: 12px !important;
    border: 1px solid #e7e7e9 !important;
}

.drop-down-sort-item {
    color: var(--brand-purple);
    font-size: 16px;
    font-weight: 400;
}

.dropdown-toggle::after {
    content: none !important; /* 화살표 제거 */
}

.drop-down-search {
    background-color: var(--basic-white);
    height: 44px;
    width: auto; /* Auto-adjust width based on content */
    min-width: 100px; /* Ensure it doesn't get too small */
    font-size: 16px;
    font-weight: 400;
    color: var(--brand-purple);
    display: flex;
    border: 0px;
    border-left: solid 1px var(--gray-light) !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 16px;
    white-space: nowrap; /* Prevent text wrapping */
}

.drop-down-search-modal {
    top: 0px !important;
    left: -59px !important;
    border: 1px solid var(--gray-light) !important;
    border-radius: 0px !important;
    transform: translate3d(15px, 42px, 0px) !important;
    width: 100px !important;
}

/*collapse*/
.collapse-filter {
    background-color: var(--basic-white);
    color: var(--basic-black);
    height: 44px;
    width: 88px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 22px;
    border: 1px solid #e7e7e9;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    display: flex;
}

.collapse-filter img {
    padding-bottom: 3px;
}

.collapse-filter-body {
    border: 0px !important;
}

.collapse-header {
    background-color: var(--basic-white);
    color: var(--basic-black);
    width: 64px;
    font-size: 16px;
    font-weight: 600;
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.collapse-header-body {
    border: 0px !important;
    padding: 16px !important;
}

.collapse-filter-body {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000; /* 레이아웃 위에 뜨도록 */
}

.card-body{
    padding: 16px !important;
}

/*line*/
.divide-line {
    width: 100%;
    height: 12px;
    background-color: var(--gray-light);
    border-top: 1px solid var(--gray-medium-high);
}

.divide-line-1 {
    width: 100%;
    height: 1px;
    border-top: 1px solid var(--gray-medium-high);
}

.under-line-1 {
    text-decoration: underline;
}

.portfolio-img-warrper {
    width: 100%;
    height: 220px;
    border-radius: 8px;
}

/*button*/
.filter-btn {
    background-color: var(--basic-white);
    height: 44px;
    width: 88px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 22px;
    border: 1px solid #e7e7e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 16px;
}

.black-button-auto-width {
    background-color: var(--brand-purple);
    color: var(--basic-white);
    border: none;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.white-button-auto-width {
    background-color: var(--basic-white);
    color: var(--basic-black);
    border: solid 1px var(--gray-medium-high);
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.black-stroke-button-auto-width {
    background-color: var(--basic-white);
    color: var(--basic-black);
    border: solid 1px var(--basic-black);
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.button-hashtag-gray {
    background-color: var(--gray-light);
    color: var(--basic-black);
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.button-hashtag-white {
    background-color: var(--basic-white);
    color: var(--basic-black);
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.gray-hashtag-auto-width {
    background-color: var(--gray-light);
    color: var(--brand-purple-low);
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 300;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.button-hashtag-close-gray-auto-width {
    background-color: var(--gray-light);
    color: var(--basic-black);
    border: solid 1px var(--gray-medium-high);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.button-filter-button-auto-width {
    background-color: var(--brand-purple);
    color: var(--basic-white);
    width: 100%;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 30px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
    display: flex; /* Flexbox 사용 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}

.button-filter-button-restrict-width {
    background-color: var(--brand-purple);
    color: var(--basic-white);
    border: none;
    padding: 12px 20px; /* 패딩 값을 유지 */
    font-size: 16px;
    font-weight: 500;
    border-radius: 30px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
    display: inline-flex; /* Flexbox 사용, inline-flex로 버튼 크기 조정 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    width: auto; /* 글자 및 패딩에 맞춰 자동으로 크기 조정 */
}

.button-header-button-restrict-width {
    background-color: var(--brand-purple);
    color: var(--basic-white);
    border: none;
    padding: 8px 12px; /* 패딩 값을 유지 */
    font-size: 14px;
    font-weight: 500;
    border-radius: 30px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
    display: inline-flex; /* Flexbox 사용, inline-flex로 버튼 크기 조정 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    width: auto; /* 글자 및 패딩에 맞춰 자동으로 크기 조정 */
}

.kakao-button-auto-width {
    width: 100%;
    background-color: #FEE500;
    color: #171819;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 32px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.button-hashtag-gray-auto-width-small {
    background-color: var(--gray-light);
    color: var(--brand-purple-low);
    border: none;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap; /* 글자가 여러 줄로 줄바꿈되지 않도록 */
}

.button-content-upload{
    background-color: var(--gray-light);
    border-radius: 12px;
    border: 2px dotted var(--gray-medium-high);
    padding: 40px;
}

/*Scroll*/
.overflow-hidden {
    overflow-x: hidden; /* 스크롤 바를 숨김 */
    cursor: grab; /* 기본 커서를 grab 모양으로 변경 */
}

.overflow-hidden:active {
    cursor: grabbing; /* 클릭 중일 때 커서를 grabbing 모양으로 변경 */
}

.button-hashtag-gray, .button-hashtag-white {
    flex: 0 0 auto; /* 항목이 줄바꿈되지 않도록 설정 */
    display: inline-block; /* 항목을 한 줄로 유지 */
}

.scroll-portfolio-item {
    flex: 0 0 auto; /* 항목이 줄바꿈되지 않도록 설정 */
    display: inline-block; /* 항목을 한 줄로 유지 */
    margin-right: 16px; /* 오른쪽 여백 추가 */
}

/*input*/
.input-review:focus {
    outline: none !important;
    box-shadow: none !important;
}

.input-search {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0px !important;
    color: var(--basic-black) !important;
}

.input-search::placeholder {
    color: var(--gray-light) !important;
}

.input-search:focus {
    outline: none !important;
    box-shadow: none !important;
}

.input-filter {
    padding: 24px 16px 24px 16px !important;
    font-size: 18px !important;
    border: 1px solid var(--gray-light) !important;
    border-radius: 12px;
    color: var(--basic-black) !important;
}

.input-filter::placeholder {
    color: var(--gray-light) !important;
}

.input-filter:focus {
    outline: none !important;
    box-shadow: none !important;
}

.input-group.filter .input-group-text {
    background-color: var(--basic-black) !important;
    color: var(--basic-white);
    padding-right: 16px !important;
    padding-left: 16px !important;
}

.input-review {
    padding: 24px 16px 24px 16px !important;
    font-size: 18px !important;
    border: 1px solid var(--gray-light) !important;
    border-radius: 12px;
    color: var(--basic-black) !important;
}

.input-review::placeholder {
    color: var(--gray-light) !important;
}

.input-review:focus {
    outline: none !important;
    box-shadow: none !important;
}

.input-group.review .input-group-text {
    background-color: var(--basic-black) !important;
    color: var(--basic-white);
    padding-right: 16px !important;
    padding-left: 16px !important;
}

/* image */
.img-wrraper-creator-profile {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    border: 4px solid var(--basic-white);
    position: absolute;
    bottom: -40px; /* 프로필 이미지 절반이 겹치도록 */
    left: 50%; /* 수평 중앙 정렬 */
    transform: translateX(-50%); /* 정확히 중앙에 위치시키기 위해 수평 이동 */
}

.img-wrraper-creator-bg {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    position: relative; /* absolute positioning을 위한 기준 */
}

.img-wrraper-creator-profile-edit {
    top: 36px;
    right: 0;
    width: 20px;
    height: 20px;
}

.img-wrraper-creator-bottom-right {
    bottom: 16px; /* 부모 요소의 우측 하단에 배치 */
    right: 24px;
}


/* Tabs*/
.nav-tabs {
    width: 300px;
    background-color: var(--gray-light);
    border-bottom: none !important; /* 하단 border 제거 */
    border-radius: 32px !important;
    padding: 4px !important;
}

.nav-tabs .nav-link {
    color: var(--brand-purple-medium);
    border: none !important; /* 탭의 border 제거 */
    width: 100%; /* 탭 너비를 100%로 설정 */
    font-size: 16px;
    font-weight: 400;
}

.nav-tabs .nav-link.active {
    background-color: var(--basic-white);
    color: #FFFFFF;
    border: none; /* 활성화된 탭 border 제거 */
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--basic-black) !important;
}

/*modal*//* 하얀색 박스의 초기 상태: 숨김 */
.modal-review {
    display: none;
    position: absolute; /* 부모 요소 내에서 절대 위치 */
    top: 0;
    right: 0px; /* 햄버거 아이콘 옆에 붙도록 설정 */
    width: 80%; /* 원하는 너비로 설정 */
    height: 100vh;
    background-color: white;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.modal-review.show {
    display: block;
}

.modal-left-bar {
    display: none;
    position: absolute; /* 부모 요소 내에서 절대 위치 */
    top: 0;
    left: 0px; /* 햄버거 아이콘 옆에 붙도록 설정 */
    width: 100%; /* 원하는 너비로 설정 */
    height: auto;
    background-color: white;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-top: 64px;
}

.modal-left-bar.show {
    display: block;
}

.modal-profile {
    display: none;
    position: absolute; /* 부모 요소 내에서 절대 위치 */
    top: 0;
    right: 0px; /* 햄버거 아이콘 옆에 붙도록 설정 */
    width: 100%; /* 원하는 너비로 설정 */
    height: auto;
    background-color: white;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-top: 64px;
}

.modal-profile.show {
    display: block;
}

.fixed-input {
    position: absolute; /* modal-review 내에서 절대 위치 */
    bottom: 0; /* 모달의 바닥에 붙도록 설정 */
    left: 0;
    width: 100%; /* 너비를 모달의 전체 너비로 설정 */
    padding: 0px 0px 12px 0px; /* 적절한 패딩 추가 */
    background-color: white; /* 배경색 */
    z-index: 1000; /* 다른 요소 위로 오도록 설정 */
}

.modal-header{
    border-bottom: 1px solid #ffffff !important;
}