/* region [Header] */
#header-category button {color: inherit; /* 기본 텍스트 색상으로 설정 */text-decoration: none; /* 밑줄 제거 */}
a:hover {color: inherit; /* 호버 시 색상 변경 방지 */ text-decoration: none; /* 호버 시 밑줄 제거 */}
#signature {font-size: 28px;margin-bottom: 0;}
#search input, #log-in span {display: inline;}
#log-in i, #search-btn, #dashboard i{display: none;}
#header-category {white-space: nowrap; /* 줄바꿈 방지 */overflow-x: auto; /* 좌우 스크롤 가능하게 설정 */}
#logo {flex: 0 0 auto; /* 로고는 왼쪽에 고정 */}
#search-container {display: flex; /* 검색창과 버튼을 가로로 배치 */align-items: center; /* 세로 중앙 정렬 */}
#search-container div input::placeholder {color: var(--neutral-600)}
#log-in {margin-left: 10px; /* 검색창과 로그인 버튼 사이의 간격 추가 */}
.header-signature{transform: scale(0.8);}
@media (max-width: 1199px) {
    /* 1200px 이하에서는 아이콘만 보이도록 */
    #search, #log-in p, #dashboard p {display: none; /* 검색 인풋 숨기기 */}
    #search-btn {display: inline;}
    #log-in i, #search-btn i, #dashboard i {display: inline;font-size: 24px; /* 아이콘 크기 조정 */}
    #signature {font-size: 20px;margin-bottom: 0;}
    .container {justify-content: space-between; /* 기본적으로 양쪽 끝으로 배치 */}
    #search-container {margin-left: auto; /* 검색 및 로그인 버튼을 오른쪽으로 붙이기 */}
}
/* endregion [Header] */

/* region [side] */
 #sidebar {position: fixed;top: 0;left: 0;width: 400px;min-height: 100%;background-color: white;transform: translateX(-100%);  /* 처음엔 화면 밖에 위치 */transition: transform 0.5s ease; /* 0.5초 동안 트랜지션 */z-index: 1000; /* 사이드바의 z-index는 오버레이보다 높게 설정 */}
#sidebar.show {transform: translateX(0); /* 화면 안으로 부드럽게 나타남 */}
#sidebar i {font-size: 24px;}
/* 오버레이 배경 */
#sidebar-dim {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);opacity: 0;  /* 처음엔 보이지 않도록 설정 */visibility: hidden; /* 초기 상태에서는 보이지 않도록 설정 */transition: opacity 0.5s ease; /* opacity에 트랜지션 */z-index: 999; /* 사이드바보다 높은 z-index 설정 */}
#sidebar-dim.show {opacity: 1; /* 트랜지션을 통해 0.5초 동안 서서히 나타남 */visibility: visible; /* 보이게 설정 */}
#sidebar .sidebar-category {width: 100%;height: 48px;padding: 9px 24px;}
#sidebar-menu-container {opacity: 1; /* 기본 상태는 보이도록 */transition: opacity 0.5s ease; /* 불투명도 트랜지션 */ padding: 0 0 0 24px;}
#sidebar-menu-container.hidden {opacity: 0; /* 숨길 때 불투명도 0 */height: 0;overflow: hidden; /* 넘치는 내용 숨김 */transition: opacity 0.5s ease;}
#sidebar-menu-container>li {position:relative; list-style: none; width: 50%; min-height: 48px; padding-right: 24px;}
#sidebar-menu-container>li i {color:var(--neutral-600); transition: transform 0.1s ease;}
#sidebar-menu-container>li a {width: 100%; display: flex; justify-content: space-between; align-items: center;}
#sidebar-menu-container>li a .rotate {transition: transform 0.1s ease; transform: rotate(180deg); /* 180도 회전 */ transform-origin: center;}
#sidebar-menu-container>li:nth-child(odd)>.sidebar-submenu.active {z-index:5; opacity: 1; overflow: visible; display: block;height: auto; /* active 클래스가 있을 때 보임 */padding: 8px 0 8px 24px;left: -24px;}
#sidebar-menu-container>li:nth-child(even)>.sidebar-submenu.active {z-index:5; opacity: 1; overflow: visible; display: block;height: auto; /* active 클래스가 있을 때 보임 */padding: 8px 0 8px 24px;left: -212px;}
.sidebar-submenu {z-index: -1; opacity: 0; overflow: hidden; width:400px; height: 0;display: block;position: relative; padding: 0 0 0 24px; background-color: var(--neutral-100); transition: padding 0.1s ease;}
.sidebar-submenu-list { display: flex;flex-wrap: wrap;padding: 0;}
.sidebar-submenu-list>li {list-style: none; width: 50%;}
.sidebar-submenu-list>li a {height: 40px;display: flex; align-items: center; justify-content: start;}
.sidebar-submenu-list>li a span {width: 100%;font-size: 14px;font-weight: 400;line-height: 170%;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}
@media (max-width: 768px) {
    #sidebar {width: 100%;}
    #sidebar-menu-container>li:nth-child(odd)>.sidebar-submenu.active {z-index:5; opacity: 1; overflow: visible; display: block;height: auto; /* active 클래스가 있을 때 보임 */padding: 8px 0 8px 24px;left: -24px;}
    #sidebar-menu-container>li:nth-child(even)>.sidebar-submenu.active {z-index:5; opacity: 1; overflow: visible; display: block;height: auto; /* active 클래스가 있을 때 보임 */padding: 8px 0 8px 24px;left: calc(-12px - 50vw);}
    .sidebar-submenu {z-index: -1; opacity: 0; overflow: hidden; width:100vw; height: 0;display: block;position: relative; padding: 0 0 0 24px; background-color: var(--neutral-100); transition: padding 0.1s ease;}
}
#trends-collections-container {list-style: none; padding: 0 24px; display: flex; width: 100%; flex-direction: column; gap: 16px;}
#trends-collections-container li {width: 100%; height: 240px; display: flex; justify-content: center; align-items: center; background-color: var(--neutral-100); border-radius: 8px;}
/* endregion [side] */

/* region [social review] */
.social-review-list-group {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px;}
.social-review-list {display: flex; flex-direction: column; border: 1px solid var(--neutral-300); border-radius: 8px; padding: 16px;}
.social-review-user-container {display: flex; align-items: center; gap: 16px; margin-bottom: 16px;}
.social-review-user-container .social-review-user-profile {display: flex;width: 60px;height: 60px;justify-content: center;align-items: center;background-color: var(--neutral-300);border-radius: 100%;color: var(--neutral-900, #0C1827); /* h2 */font-family: "Noto Sans";font-size: 36px;font-style: normal;font-weight: 500;line-height: 130%; /* 46.8px */letter-spacing: -0.9px;}
.social-review-user-container .social-review-user-info .social-review-rating-container {display: flex; align-items: center; gap: 4px;}
.social-review-content {max-height: 72px; overflow: hidden; margin-bottom: 32px;}
.social-review-purchased-item-container {display: flex; flex-direction: column; gap: 8px;}
.social-review-purchased-item-container h5 {color: var(--blue-900);}
.social-review-purchased-item-image {display: flex; align-items: center; gap: 8px; margin-bottom: 24px;}
.social-review-purchased-item-image img {width: 80px; height: 80px; background-color: var(--neutral-300); border-radius: 8px;}

.social-review-keyword {display: flex; align-items: center; gap: 16px;}
.social-review-keyword span {display: flex; flex-wrap: nowrap; background-color: var(--neutral-100); border-radius: 24px; padding: 8px 12px;}

/* custom datasets functions */
.toggle-show, .toggle-hidden {transition: opacity 0.3s ease, visibility 0.3s ease;will-change: opacity, visibility;}
.toggle-show {opacity:1;visibility:visible;pointer-events:auto;display:flex;}
.toggle-hidden {opacity:0;visibility:hidden;pointer-events:none;display:none;}

/* endregion [social review] */

:root {
    --white: #FFFFFF;
    --primary-50: #FFEBEE;--primary-100: #FFCCD2;--primary-200: #FA9998;--primary-300: #F36F70;--primary-400: #FF4A4A;--primary-500: #FF342C;--primary-600: #F6282D;--primary-700: #E41A27;--primary-800: #D70B1F;--primary-900: #C80012;
    --neutral-50: #F7F7F9;--neutral-100: #EFEFF3;--neutral-200: #E4E6E9;--neutral-300: #CFD2D7;--neutral-400: #BAC1CA;--neutral-500: #A2ACB8;--neutral-600: #86909C;--neutral-700: #5E6777;--neutral-800: #333F50;--neutral-900: #0C1827;
    --red-50: #FFEBEE;--red-100: #FFCDD2;--red-200: #EF9A9A;--red-300: #E57373;--red-400: #EF5350;--red-500: #F44336;--red-600: #E53935;--red-700: #D32F2F;--red-800: #C62828;--red-900: #B71C1C;
    --green-50: #E8F5E9;--green-100: #C8E6C9;--green-200: #A5D6A7;--green-300: #81C784;--green-400: #66BB6A;--green-500: #4CAF50;--green-600: #43A047;--green-700: #388E3C;--green-800: #2E7D32;--green-900: #1B5E20;
    --blue-50: #E3F2FD;--blue-100: #BBDEFB;--blue-200: #90CAF9;--blue-300: #64B5F6;--blue-400: #42A5F5;--blue-500: #2196F3;--blue-600: #1E88E5;--blue-700: #1976D2;--blue-800: #1565C0;--blue-900: #0D47A1;
    --yellow-500: #F9C23C;
    --color-positive: var(--blue-500);
    --color-negative: var(--red-500);
    --vibe-positive: #6587FF;
    --vibe-negative: #FF6161;
}

.number-positive { color: var(--color-positive) !important; }
.number-negative { color: var(--color-negative) !important; }
/* 검색 자동완성 */
.autocomplete-container{position:relative;}
.autocomplete-suggestions {position: absolute;border: 1px solid #ddd;border-top: none;z-index: 1000;top: 100%;
    left: 0;right: 0;background-color: white;box-shadow: 0px 4px 5px rgba(0,0,0,0.2);max-height: 300px;
    overflow-y: auto;overflow-x: hidden;}
.autocomplete-suggestions .dropdown-item {padding: 8px 16px;cursor: pointer;text-align: left;}
.autocomplete-suggestions .dropdown-item:hover {background-color: #f8f8f8;}
.suggestion-item {padding: 10px;border-bottom: 1px solid #eee;display: flex;flex-direction: column;}
.suggestion-name {font-weight: bold;color: #333;}
.suggestion-type {font-size: 0.9em;color: #666;}

/* region [typography] */
body {font-family: 'Pretendard', sans-serif; color:var(--neutral-900)}
p {font-size: 16px;font-weight: 400;line-height: 27px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}
h1 {font-size: 44px;font-weight: 500;line-height: 57px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900); margin-bottom: 0;}
h2 {font-size: 36px;font-weight: 500;line-height: 47px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900); margin-bottom: 0;}
h3 {font-size: 28px;font-weight: 500;line-height: 36px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900); margin-bottom: 0;}
h4 {font-size: 24px;font-weight: 500;line-height: 31px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900); margin-bottom: 0;}
h5 {font-size: 20px;font-weight: 700;line-height: 26px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900); margin-bottom: 0;}
h6 {font-size: 16px;font-weight: 700;line-height: 21px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900); margin-bottom: 0;}
.text-body-large {font-size: 20px;font-weight: 500;line-height: 34px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}
.text-body-medium {font-size: 18px;font-weight: 500;line-height: 31px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}
.text-body-normal {font-size: 16px;font-weight: 400;line-height: 27px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}
.text-body-small {font-size: 14px;font-weight: 400;line-height: 24px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}
.text-label {font-size: 14px;font-weight: 700;line-height: 24px;font-family: 'Pretendard', sans-serif;color:var(--neutral-900)}

/* endregion [typography] */
/* Calendar */
.custom-date {appearance: none; /* 브라우저 기본 스타일 제거 */-webkit-appearance: none;-moz-appearance: none;border: 1px solid var(--neutral-300);border-radius: 8px;padding: 4px 16px;font-size: 14px;color: var(--neutral-900);width: 200px; /* 원하는 너비 */}
.custom-date::-webkit-calendar-picker-indicator {cursor: pointer;color: transparent;background: url("/assets/icons/ic_calendar.png") no-repeat center center; /* 아이콘 */background-size: 16px 16px;}
.custom-date:focus {border-color: #007bff;outline: none;box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* 포커스 시 효과 */}

/* Remix Icon */
.remix-icon {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 8px; font-size: 24px; line-height: 24px}

/* dialog default setting */
#dialog .modal-header{display:none!important;}
#dialog .modal-dialog{max-width:440px;width:440px;}
#dialog .modal-content{height:260px;border-radius:18px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 18px 45px rgba(0,0,0,0.18);overflow:hidden;display:flex;flex-direction:column;}
#dialog .modal-body{padding:0 40px;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;}


#dialog .modal-footer{border-top:none!important;padding:0 40px 28px;display:flex;justify-content:center;align-items:center;gap:16px;}

#dialog .rt-notice-title{font-weight:800;font-size:22px;margin-bottom:14px;color:#111;}
#dialog .rt-notice-text{font-size:16px;line-height:1.9;color:#1f2937;}

#dialog #dialogOk,
#dialog #dialogCancel{height:46px;min-width:140px;border-radius:10px;font-weight:800;border:none;box-shadow:none;}
#dialog #dialogOk{background:#FF6161;color:#fff;}
#dialog #dialogCancel{background:#FFD9D9;color:#FF6161;}
#dialog #dialogOk:hover,
#dialog #dialogCancel:hover{color:#FF6161;background:#fff;border:1px solid #FF6161;}

.container {max-width: 1500px!important; padding: 0 30px;}

@media screen and (max-width: 1440px) {
    .container {max-width: 1280px!important;}
}
/* dialog mobile setting */
@media (max-width: 560px) {
    #dialog .modal-dialog, #dialog[data-rt="analyzing-notice"] .modal-dialog, #dialog[data-rt="confirm-delete"] .modal-dialog {width: calc(100vw - 48px) !important;max-width: 340px !important;margin: 0 auto !important;}
    #dialog .modal-content, #dialog[data-rt="analyzing-notice"] .modal-content, #dialog[data-rt="confirm-delete"] .modal-content {width: 100% !important;height: auto !important;min-height: 236px !important;border-radius: 16px !important;overflow: hidden !important;}
    #dialog .modal-body, #dialog[data-rt="analyzing-notice"] .modal-body, #dialog[data-rt="confirm-delete"] .modal-body {padding: 26px 20px 12px !important;text-align: center !important;display: flex !important;align-items: center !important;justify-content: center !important;flex: 1 1 auto !important;}
    #dialog .modal-footer, #dialog[data-rt="analyzing-notice"] .modal-footer, #dialog[data-rt="confirm-delete"] .modal-footer {padding: 8px 20px 26px !important;border-top: none !important;display: flex !important;justify-content: center !important;align-items: center !important;gap: 12px !important;flex-wrap: nowrap !important;}
    #dialog .rt-notice-title, #dialog[data-rt="analyzing-notice"] .rt-notice-title, #dialog[data-rt="confirm-delete"] .rt-notice-title {font-size: 20px !important;line-height: 28px !important;margin-bottom: 14px !important;font-weight: 800 !important;color: #111 !important;}
    #dialog .rt-notice-text, #dialog[data-rt="analyzing-notice"] .rt-notice-text, #dialog[data-rt="confirm-delete"] .rt-notice-text {font-size: 14px !important;line-height: 28px !important;color: #1f2937 !important;word-break: keep-all !important;}
    #dialog #dialogOk, #dialog #dialogCancel, #dialog[data-rt="analyzing-notice"] #dialogCancel, #dialog[data-rt="confirm-delete"] #dialogOk, #dialog[data-rt="confirm-delete"] #dialogCancel {width: 140px !important;min-width: 140px !important;height: 46px !important;border-radius: 10px !important;font-size: 14px !important;font-weight: 800 !important;}
    #dialog .modal-dialog.modal-dialog-centered {min-height: calc(100% - 32px) !important;}
}