#report {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: #f8f8f8;
}

#report #reportPage {
    margin-bottom: clamp(70px, 7.2vw + 65px, 120px);
}

#report .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    background-color: #FFFDFD;
    z-index: 1;
}

#report #reportPage .user-name {
    font-size: clamp(14.4px, 4.8vw, 24px);
    color: var(--black100);
    font-weight: 500;
    margin-top: clamp(24px, 6.4vw, 32px);
    margin-left: clamp(16px, 4.266vw, 21.33px);
    margin-right: clamp(16px, 4.266vw, 21.33px);
    margin-bottom: clamp(16px, 4.266vw, 21.33px);
}

#report #reportPage .toggle-report-wrapper {
    display: flex;
    flex-direction: row;
    margin-left: clamp(16px, 4.266vw, 21.33px);
    margin-right: clamp(16px, 4.266vw, 21.33px);
    margin-bottom: clamp(30px, 8vw, 40px);

    gap: 10px;
}

#report #reportPage .toggle-report-wrapper .toggle-report {
    display: flex;
    align-items: center;
    font-size: clamp(12px, 4vw, 20px);
    padding: clamp(3.22px, 1.04vw + 1.36px, 5.3px) clamp(9.6px, 3.2vw + 4.88px, 16px);
    border-radius: 30px;
    background-color: var(--white300);
    border: 1px solid var(--gray75);
    color: var(--gray300);
    cursor: pointer;
}

#report #reportPage .toggle-report-wrapper .toggle-report.active {
    color: var(--white300);
    background-color: var(--red500);
    border: 1px solid (var(--red500));
}

#report #reportPage #mealReport, #weightReport {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: clamp(16px, 4.266vw, 21.33px);
    padding-right: clamp(16px, 4.266vw, 21.33px);
}

#report #reportPage .date {
    font-size: clamp(10.4px, 3.464vw + 0.01px, 17.33px);
    font-weight: 400;
    color: var(--gray500);
    background-color: #F5F5F5;
    padding: clamp(4px, 1.064vw + 0.01px, 5.33px) clamp(10px, 2.664vw + 0.01px, 13.33px);
    border-radius: 30px;
    margin-bottom: clamp(10px, 2.664vw + 0.01px, 13.33px);

}

#report #reportPage .amount-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: clamp(10.4px, 3.464vw + 0.01px, 17.33px);
    gap: 6px;
}

#report #reportPage .amount-wrapper .amount {
    font-size: clamp(24px, 8vw, 40px);
    font-weight: 600;
    color: var(--black100);
    letter-spacing: 0.5px;
}

#report #reportPage .amount-wrapper .unit {
    font-size: clamp(16.8px, 5.6vw, 28px);
    font-weight: 300;
    color: var(--black100);
    margin-bottom: 2px;
}

#report #reportPage .feedback-comment {
    font-size: clamp(15.4px, 4.4vw, 20px);
    font-weight: 400;
    color: var(--black100);
    margin-bottom: clamp(4.8px, 1.6vw, 8px);

}

#report #reportPage .recommend-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}


#report #reportPage .recommend-wrapper .recommend-weight {
    font-size: clamp(12px, 4vw, 20px);
    font-weight: 400;
    color: var(--red500);
    margin-right: 4px;
}

#report #reportPage .recommend-wrapper .recommend-food {
    font-size: clamp(12px, 4vw, 20px);
    font-weight: 400;
    color: var(--red500);
    margin-right: 4px;
}

#report #reportPage .recommend-wrapper .icon {
    display: flex;
    align-items: center;
    margin-top: 1px;
}

#report #reportPage .recommend-wrapper .icon img {
    width: clamp(9.6px, 3.2vw, 16px);
}

#report .period-button-wrapper {
    display: flex;
    padding: clamp(11.4px, 4.114vw, 21px) 0px;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(4.8px, 1.6vw, 8px);
}

#report .period-button-wrapper .period-button {
    font-size: clamp(10.4px, 3.466vw, 17.33px);
    font-weight: 400;
    padding: clamp(2.4px, 0.8vw, 4px) clamp(9.6px, 3.2vw, 16px);
    border-radius: clamp(12.8px, 4.266vw, 21.33px);
    border: clamp(0.8px, 0.266vw, 1.33px) solid #F0F0F0;
    color: #B9B9B9;
    cursor: pointer;
}

#report .period-button-wrapper .period-button.active{
    color: var(--white300);
    background-color: var(--red500);
    font-weight: 600;
}



#report .y-label {
    font-size: clamp(8.8px, 2.933vw, 14.67px); 
    font-weight: 300;
    color: #9E9E9E;
}

#report .legend-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7.2px, 2.4vw, 12px);
    margin-bottom: clamp(9.4px, 3.236vw, 16.33px);
}

#report .legend-wrapper .legend-box{
    width: clamp(19.2px, 6.4vw, 32px);
    height: clamp(2.4px, 0.8vw, 4px);
    background-color: #FFEDED;
}

#report .legend-wrapper .legend-label{
    font-size: clamp(10.4px, 3.466vw, 17.33px);
    color: var(--black100);
}


#report .chart-container {    
    width: 100%;    
    overflow: hidden;
}

#weightReport .recommend-wrapper{
    margin-bottom: 40px;
}

#calorieChart{
  user-select: none;          /* 대부분 브라우저 지원 */
  -webkit-user-select: none;  /* 사파리, 크롬 등 WebKit */
  -moz-user-select: none;     /* 파이어폭스 */
  -ms-user-select: none;      /* IE/Edge */  
}

#weightChart {
  user-select: none;          
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;      
}

#tooltip {
    position: absolute;
    color: white;
    padding: 5px 12px;
    border-radius: 25px;
    font-size: 14px;
    pointer-events: none;
    z-index: 100;
}

#tooltip .tooltip-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#tooltip .tooltip-date {
    color: #838383;
    white-space: nowrap;
    font-size: clamp(8px, 2.666vw, 13.33px);
    font-weight: 400;
}

#tooltip .vertical-bar {
    width: 1px;
    background: #838383;
}