/* 사이드 메뉴 */
#side-menu{width:96px;background:white;padding:24px;transition:width 0.5s;position: sticky;top: 0;height: 100vh;}
#btn-side-menu-toggle{width:48px;text-align:center;line-height:48px;font-size:24px;}
#side-menu ul.nav{gap:4px;}
#side-menu .nav-link{height:48px;display:block;line-height:48px;color:var(--neutral-900);font-size:24px;text-align:left;padding:0 0 0 12px;}
#side-menu .nav-link.active{background:#FF3317;color:white;}
#side-menu .nav-link label{display:none;font-size:16px;}


/* 사이드 메뉴 오픈 */
#side-menu.open{width:250px;}
#side-menu.open .nav-link{}
#side-menu.open .nav-link label{display:inline;transition:width 0.5s;}

/* chart-card */
.chart-card {border: 1px solid #CFD2D7;padding: 24px 36px;background: white;border-radius:8px;flex:1}
.chart-card .card-title {font-size: 24px;font-weight: 700;color: #0C1827;line-height: 130%;letter-spacing: -0.6px;}
.chart-card .chart-value {font-size: 28px;font-weight: 500;color: #0C1827;}
.chart-card .card-body {padding-top:16px;display:flex;flex-direction:column;gap:16px;min-height:300px;}
.chart-card .small-title{font-size:16px;padding-left:8px;color: var(--neutral-600);font-weight: 400;line-height: 170%;letter-spacing: -0.4px;}
.chart-card.red-title .card-title span{color:#FF342C}
.chart-card.red-title .card-title .small-title{color:#F4B2B0;}

/* 코멘트 박스 */
.comment-box{border-radius: 8px;border: 1px solid #888;background: #FAFAFA;padding: 20px;line-height: 20px;}
.comment-box .comment-title{color: #323842;font-size: 16px;font-weight: 700;}
.comment-box .comment-text{color: #323842;font-size: 14px;font-weight: 400;text-align:left;margin-top:16px;}

/* Trend Vibe의 Feature keyword 에 사용 */
.feature-fill{padding:2px 6px;font-size:12px;}
.feature-fill.btn-outline-primary{background:#E6F7FF;color:#1890FF}
.feature-fill.btn-outline-warning{background:#FFF7E6;color:#FA8C16;}
.feature-fill.btn-outline-danger{background:#FFF1F0;color:#F5222D}

/* Table(더 정확한 테이블 클래스 필요) */
.table th{background:#FAFAFA;font-weight: 500;line-height:20px;}
.table td{color:#8C8C8C;font-weight: 500;line-height:20px;border-bottom: 1px solid #F5F5F5;}

/* bar selector */
.chart-chips{display:flex;gap:8px;text-align: center;}
.chip{width:140px;border-radius: 8px;border: 1px solid var(--neutral-300);background: var(--white);color: var(--neutral-900);font-size: 14px;font-weight: 700;line-height: 170%;letter-spacing: -0.35px;}
.chip.active{background: #FF6161;color:white;border:#FF6161}


.bar-selector-wrapper{flex-direction:column;display:flex;}
.bar-selector-wrapper .bar-selector{margin-top:12px;font-size:12px;padding:6px 8px;border-radius: 4px;text-align:left;display:flex;justify-content:space-between;border:none;background: linear-gradient(90deg, #FFCD71 -2.57%, rgba(255, 205, 113, 0.00) 112.5%) no-repeat;}
.bar-selector-wrapper .bar-selector.municipalities{background: linear-gradient(90deg, #1890FF -2.57%, rgba(24, 144, 255, 0.00) 112.5%);}

.btn-outline-negative, .btn-outline-positive{padding:0px 32px;font-size:14px;font-weight:700;line-height:24px;border-radius:8px;border: 1px solid var(--neutral-300);background: var(--white);}
.btn-outline-negative{color:#FF6161}
.btn-outline-positive{color:#6FA1FF}
.btn-outline-positive:hover{background-color: #6FA1FF;color:white;}
.btn-outline-negative:hover{background-color: #FF6161;color:white;}


/* 헤더 */
#gnb {background-color: rgba(17, 17, 17, 0.80);position: fixed;top: 0;left: 0;z-index: 10;height: 75px;}
#gnb nav>a{font-weight: 700;}
#gnb .d-inline-flex{font-size:12px;}
#lnb {background: #EDEDED;line-height:50px}
#lnb a{color:#FF342C}
#lnb a.active{font-weight:800;border-bottom:2px solid #FF342C;}

/*gnb fix화에 따른 그만큼의  main 여백처리*/
.gnb-fix{margin-top: 105px!important;}

/*헤더 팝업*/
#profile-popup .profile-menu a:hover {background: #F4F4F4;border-radius: 6px;transition: background 0.2s ease;}


/* 마커 디자인 */
.hide-markers .place-marker{display:none!important;}
.place-marker {display: flex;align-items: center;background: white;border: 2px solid var(--marker-color);
    border-radius: 20px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);padding: 4px;max-width: 240px;position: relative;}
.place-marker::after {content: '';position: absolute;bottom: -16px;left: calc(50% - 8px);width: 0;height: 0;
    border: 8px solid transparent;border-top-color: var(--marker-color);}
.place-marker-point {background-color: var(--marker-color);color: white;font-size: 14px;width: 28px;height: 28px;
    border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;flex-shrink: 0;}
.place-marker-point i {font-weight:400;font-size:20px;}
.place-marker-info {display: none;flex-direction: column;overflow: hidden;margin-left: 8px;}
.place-marker-title {font-size: 13px;font-weight: 600;color: #222;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.place-marker-category {font-size: 11px;color: #666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.place-marker.highlighted .place-marker-info,
.place-marker:hover .place-marker-info{display:flex;--marker-color:#0259dc!important;}

/* 마커 컬러 필터 */
.vibe-mode .marker-vibe-1{--marker-color:#FF6161!important;}
.vibe-mode .marker-vibe-2{--marker-color:#FFBFBE!important;}
.vibe-mode .marker-vibe-3{--marker-color:#F6EB61!important;}
.vibe-mode .marker-vibe-4{--marker-color:#9ED683!important;}
.vibe-mode .marker-vibe-5{--marker-color:#4CB96F!important;}
.vibe-mode .place-marker:hover{--marker-color:#0259dc!important;}

/* 대시보드 상단 통계 */
#dashboard-stats{background:#fff;padding:30px;}
#dashboard-stats .dashboard-card { width:272px;height:96px;padding:1rem;}
#dashboard-stats .dashboard-card-header {display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid #ececec; padding-bottom:10px;}
#dashboard-stats .dashboard-card-header .icon {line-height:22px;display:block;width:22px;text-align:center;}
#dashboard-stats .dashboard-card-header .title { font-weight: 700; font-size: 1rem; }
#dashboard-stats .dashboard-card-body {padding-top:6px; display: flex; justify-content: space-between; align-items: end; }
#dashboard-stats .dashboard-card-body .value { font-size: 1.875rem; font-weight: 700; color: #191919; line-height:30px;}
#dashboard-stats .dashboard-card-body .change { font-size: 14px;line-height:30px; font-weight: 700; }

.tooltip.wide-tooltip .tooltip-inner {max-width: 300px;white-space: normal;text-align: left;padding: 10px 15px;}


/* 스몰비지니스 임시헤더 */
#gnb-smallbiz {background-color: black;line-height:60px}
#gnb-smallbiz nav>a{font-weight: 700;}
#gnb-smallbiz .d-inline-flex{font-size:12px;}

/* 대시보드 상단 v2 통계 */
#dashboard-stats-v2{display:flex;}
#dashboard-stats-v2>div{flex:1;border:1px solid #ddd;border-radius:8px;overflow: hidden;}
#dashboard-stats-v2 .dashboard-card-header{line-height:35px;background:#FFFFFF;border-bottom: 1px solid #ddd;text-align:center;}
#dashboard-stats-v2 .dashboard-card-body{height:58px;background:white;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600}

.score-card {display: flex;flex-direction: column;align-items: center;gap: 0.5rem;}
.score-card-title {font-size: 18px;font-weight: 500;}
.score-card-icon {font-size: 2rem;}
.score-card-value {font-size:24px;}

/* business share chart */
.legend-container { display:flex; flex-wrap:wrap; flex-direction: column;align-items:flex-start; gap:8px;position:absolute; left:0; top:40px; }
.legend-item { display:flex; align-items:center; gap:4px; transition:opacity 0.2s; }
.legend-icon { width:15px; height:15px; display:flex; align-items:center; justify-content:center; }
.legend-label { font-size:14px; color:#323842; line-height:15px; white-space:nowrap; }
.legend-item.off { opacity: 0.4; }

/* 공용 카드 레이아웃 */
.card-layout { background-color: #ffffff; border: 1px solid #dee2e6 !important; border-radius: 0.5rem !important;height: 100%; }
.card-layout-title { font-size: 1.125rem; font-weight: 600 !important; color: #212529 !important; padding: 20px 30px; margin: 0; }
.card-layout-body { padding: 20px 30px!important; display: flex; flex-direction: column; }
.card-layout-body table th{background:#ffebed!important;}
#metric-card-layout .card-layout {height: 170px;}

/*헤더 모바일*/
#business-mobile-menu-toggle,
#business-mobile-backdrop,
#business-mobile-menu {display: none;}

@media (max-width: 768px) {
    body.business-mobile-menu-open {overflow: hidden;}
    #gnb.nav-business {height: 55px !important;min-height: 55px;padding: 0 16px !important;background: #333333 !important;position: fixed;z-index: 1050;}
    #gnb .navbar-brand svg {width: 123px;height: auto;}
    #gnb .gnb-desktop-menu,
    #gnb .gnb-auth-nav {display: none !important;}
    .gnb-fix{margin-top:45px!important;}
    #business-mobile-menu-toggle {display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border: 0;padding: 0;background: transparent;color: #ffffff;font-size: 24px;line-height: 1;}
    #business-mobile-backdrop {position: fixed;inset: 0;display: none;background: rgba(0, 0, 0, 0.25);z-index: 1990;}
    body.business-mobile-menu-open #business-mobile-backdrop {display: block;}
    #business-mobile-menu {position: fixed;top: 0;right: 0;display: block;width: 100%;max-width: 320px;height: 100vh;padding: 0 13px;background: #333333;z-index: 2000;transform: translateX(100%);visibility: hidden;opacity: 0;transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;box-sizing: border-box;}
    body.business-mobile-menu-open #business-mobile-menu {transform: translateX(0);visibility: visible;opacity: 1;}
    .business-mobile-header {display: flex;align-items: center;justify-content: space-between;height: 55px;}
    .business-mobile-logo {display: inline-flex;align-items: center;text-decoration: none;}
    .business-mobile-logo svg {width: 123px;height: auto;}
    #business-mobile-menu-close {display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border: 0;padding: 0;background: transparent;color: #ffffff;font-size: 24px;line-height: 1;}
    .business-mobile-auth {padding: 25px 0 15px;}
    .business-mobile-login {display: flex;align-items: center;justify-content: center;width: 100%;height: 36px;border-radius: 999px;background: #f23520;color: #ffffff;font-size: 14px;font-weight: 500;text-decoration: none;}
    .business-mobile-welcome {display: block;color: #ffffff;font-size: 16px;font-weight: 400;line-height: 1.4;text-decoration: none;}
    .business-mobile-nav {display: flex;flex-direction: column;}
    .business-mobile-link {position: relative;display: flex;align-items: center;height: 50px;padding: 0 35px 0 14px;border-bottom: 1px solid rgba(255, 255, 255, 0.28);color: rgba(255, 255, 255, 0.56);font-size: 16px;font-weight: 400;text-decoration: none;}
    .business-mobile-link:hover, .business-mobile-link:focus {color: #ffffff;}
    .business-mobile-link.active {color: #ffffff;font-weight: 500;}
    .business-mobile-link.active::after {content: "";position: absolute;right: 22px;top: 50%;width: 5px;height: 5px;border-radius: 50%;background: #f23520;transform: translateY(-50%);}
    .business-mobile-footer {padding-top: 22px;text-align: center;}
    .business-mobile-logout {display: inline-flex;align-items: center;justify-content: center;color: #ff5a5f;font-size: 14px;font-weight: 500;text-decoration: none;}
}

@media (min-width: 769px) {
    #business-mobile-menu-toggle, #business-mobile-backdrop, #business-mobile-menu {display: none !important;}
}