.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 */
    z-index: 1000;
}

.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 */
}


.magazine-search {
    background-color: var(--basic-white);
    height: 44px;
    width: auto; /* Auto-adjust width based on content */
    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-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: 0 !important;
    padding: 16px !important;
}

.collapse-filter-body {
    /*position: absolute;*/ /* 게시글이 가려져 삭제 */
    border: 0 !important;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 999;
}

.collapse-filter-body .filter-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

.collapse-filter-body .filter-content > * {
    padding-left: 10px;
    padding-right: 10px;
}

.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;
    cursor: pointer;
}

.portfolio-img-wrapper {
    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; /* 글자 및 패딩에 맞춰 자동으로 크기 조정 */
}


.button-header-button-box {
    background-color: var(--brand-purple);
    color: var(--basic-white);
    border: none;
    padding: 8px 12px; /* 패딩 값을 유지 */
    font-size: 14px;
    font-weight: 500;
    border-radius: 0px;
    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;
    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; /* 항목을 한 줄로 유지 */
}

/* filter scroll 숨기기 */
.scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.scroll-portfolio {
    overflow-x: scroll; /* 가로 스크롤은 활성화 */
    overflow-y: hidden; /* 세로 스크롤 숨김 */
    white-space: nowrap; /* 아이템을 가로로 배치 */
    -ms-overflow-style: none; /* IE와 Edge에서 스크롤바 숨기기 */
    scrollbar-width: none; /* Firefox에서 스크롤바 숨기기 */
}

.scroll-portfolio::-webkit-scrollbar {
    display: none; /* Chrome, Safari에서 스크롤바 숨기기 */
}

.scroll-portfolio.active {
    cursor: grabbing;
}

.scroll-portfolio-item{

}

/*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; !important;
    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;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

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

.img-wrapper-author-bg {
    width: 100%;
    height: 100%;
    max-height: 560px;
    border-radius: 4px;
    position: relative; /* absolute positioning을 위한 기준 */
}

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

.img-wrapper-author-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: fixed; /* 뷰포트에 고정 */
    top: 50%; /* 화면의 가운데 위치 */
    left: 50%;
    transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
    width: 100%; /* 화면 너비의 90%로 설정 (반응형) */
    max-width: 600px; /* 최대 너비 제한 */
    height: 100%; /* 콘텐츠에 따라 높이 조정 */
    max-height: 100vh; /* 화면 높이의 80%로 제한 */
    background-color: white;
    z-index: 2000;
    overflow-y: auto; /* 내용이 많을 경우 스크롤 */
    transition: all 0.3s ease;
}
.modal-review.show {
    display: block;
}

.modal-left-bar {
    display: none;
    position: absolute; /* 부모 요소 내에서 절대 위치 */
    top: 0;
    left: 0; /* 햄버거 아이콘 옆에 붙도록 설정 */
    width: 100%; /* 원하는 너비로 설정 */
    height: auto;
    background-color: white;
    margin-top: 64px;
}

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

.floating-modal .modal-content {
    border-radius: 0.625rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.header-sticky-modal {
    padding-right: 0 !important;
}

.header-sticky-modal .modal-dialog {
    max-width: 100%;
    margin: 0;
}

.header-sticky-modal .modal-dialog .modal-content {
    border: none;
}

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

.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;
}

#contents-div > div:first-child {
    margin-bottom: 8px; !important;
}

#contents-div > div:not(:first-child):not(:last-child) {
    margin-top: 8px;
    margin-bottom: 8px;
}

#contents-div > div:last-child {
    margin-top: 16px; !important;
}

.content-control > img:hover {
    background-color: #f3f3f3;
}

img.like-button {
    content: url("../assets/images/icon/icon_likes_inactive.svg");
}

img.like-button.active {
    content: url("../../main/assets/images/icon/icon_likes_active.svg");
}


img.delete-button {
    content: url("../../main/assets/images/icon/icon_close.svg");
}

.image-radius-16 {
    border-radius: 16px;
}

.image-radius-20 {
    border-radius: 20px;
}

.scroll-container > div:hover {
    background-color: #f3f3f3;
}

/* 숨김 처리된 Checkbox */
.d-none {
    display: none;
}

/*Left Bar*/
/* Toggle Header 스타일 */
.toggle-header {
    cursor: pointer;
    font-weight: 600;
    color: black;
    transition: color 0.3s ease;
}

/* 기본적으로 숨김 처리된 Toggle Body */
.toggle-body {
    display: none;
}

/* Checkbox가 선택되면 Toggle Body를 표시 */
#toggleCheckbox:checked ~ .toggle-body {
    display: block;
}

.left-bar-card{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}


/* 동영상 컨테이너 */
.login-modal-video {
    width: 100%; /* 가로를 부모 컨테이너에 맞춤 */
    max-width: 600px; /* 최대 너비 설정 */
    aspect-ratio: 16 / 9; /* 동영상 비율 유지 */
    overflow: hidden;
    position: relative;
    margin: 16px 0;
}

/* 동영상 스타일 */
.login-modal-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 동영상을 영역에 맞게 채움 */
}

.portfolio-image {
    width: 300px; /* 이미지 고정 너비 */
    height: 200px; /* 이미지 고정 높이 */
    object-fit: cover; /* 이미지가 찌그러지지 않고 중앙에서 자르기 */
    object-position: center; /* 중앙 기준으로 자름 */
    display: block; /* 레이아웃 안정화 */
}

body.modal-open.sticky-modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* fade 효과를 커스터마이징하여 부드러운 전환 적용 */
.fade-animate {
    opacity: 0;
    transform: translateY(20px); /* 시작 위치를 약간 아래로 */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade-animate.show {
    opacity: 1;
    transform: translateY(0);
}