@import url("fontawesome-all.min.css");


/* Flash of Uncompiled Content 방지 */
[v-cloak] {
    display: none;
}
/* 공통 */
.hand-cursor {
    cursor: pointer;
}

 /* 개별  */
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #feffff;
}
/* body>div {
    position: relative;
} */

/* navbar 설정시작 */
nav h2 {
    margin-left: 1rem;
}

/* Modern Navbar 스타일 */
.navbar-modern {
    /* backdrop-blur와 bg-white/90이 Tailwind에서 처리됨 */
}

/* 활성 페이지 표시 */
.nav-link.active {
    background: linear-gradient(to right, #10b981, #3b82f6) !important;
    color: white !important;
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(to right, #10b981, #3b82f6);
    border-radius: 2px;
}

.nav-link-mobile.active {
    background: linear-gradient(to right, #d1fae5, #dbeafe) !important;
    color: #059669 !important;
    border-left: 3px solid #10b981;
}

/* 사용자 아바타 애니메이션 */
.navbar-modern .w-8, .navbar-modern .w-10 {
    transition: transform 0.3s ease;
}

.navbar-modern .w-8:hover, .navbar-modern .w-10:hover {
    transform: scale(1.1);
}

/* 레거시 navbar 스타일 (하위 호환성) */
nav a.navbar-brand {
    color: #334155;
}

.nav-link {
    position: relative;
}

/* 구형 그래디언트 스타일 (사용 안함) */
.navbar-gradient {
    background: linear-gradient(to right, rgb(29, 78, 216), rgb(37, 99, 235), rgb(29, 78, 216));
}

/* navbar 설정 끝 */

/* Sidebar 컨테이너 스타일 */
.sidebar-container {
    z-index: 40;
}

/* 모바일/태블릿 통합 네비게이션을 사용하므로 기존 개별 토글 버튼을 숨김 */
@media (max-width: 1023px) {
    #menuToggle {
        display: none !important;
    }
}
/* 사이드바(status.html) 스타일 */
.sidebar {
    min-height: calc(100vh - 100px); /* 전체 높이를 차지하도록 설정 */
    flex: none;     /* flex 속성을 none으로 설정하여 다른 그리드 영향을 받지 않도록 함 */
    background-color: #1e4258;

}

@media (max-width: 767.98px) {
    .sidebar {
        display: none; /* 모바일 화면에서는 사이드바를 숨김 */
    }
}

/* 모바일/태블릿에서 레거시 사이드바 잔상 숨김 (통합 드로어 사용) */
@media (max-width: 1023px) {
    #sidemenuApp,
    #clientSidebarApp,
    #sidebarContainer,
    #sidebarOverlay,
    #sidebar-overlay-manager,
    #sidebarOverlayManager {
        display: none !important;
    }
}

/* 데스크톱에서 사이드바 초기 애니메이션/잔상 제거 */
@media (min-width: 1024px) {
    #sidemenuApp,
    #clientSidebarApp,
#sidebarContainer {
    transform: translateX(0) !important;
    transition: none !important;
}
#sidebarOverlay,
#sidebar-overlay-manager,
#sidebarOverlayManager {
    display: none !important;
}

/* 모바일 드로어 초기 숨김 (Vue 마운트 전 잔상 방지) */
#navbarMenuDrawer.drawer-active {
    display: block;
}
}

.side-link {
    color: #feffff;
    text-decoration: none;
}
.side-link:hover {
    color: #2D5F5D;
}
.side-item {
    padding-bottom: 50px;
}
.col.bg-light.sidebar {
    position: relative; /* 이를 설정해야 자식 요소의 absolute가 제대로 작동함 */
}

#side_footer {
    position: absolute;
    bottom: 0; /* 하단에 고정 */
    width: 100%; /* 너비를 부모 요소와 동일하게 조정 */
    padding-bottom: 20px; /* nav_side 하단부 여백 */
}

/* 예상세액계산기 계산결과표 내용 정렬 */
/* thead tr th:nth-child(3) {
    text-align: right;
}
thead tr th:nth-child(4) {
    text-align: right;
}
thead tr th:nth-child(5) {
    text-align: right;
}

tbody>tr>td:nth-child(2) {
    text-align: left;
}
tbody>tr>td:nth-child(3) {
    text-align: right;
}  */

/* 계산기 모음 화면 시작 */
div h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}

div ul {
    list-style: none;
    
}
div ul>li {
    padding: 5px;
}
div ul>li #calc_index {
    text-decoration-line: none;
    display: block;
    width: 200px;
}
/* 계산기 모음 화면 끝 */

/* 종합소득세 계산기 시작 */

#indivisual_tax_result {
    margin-top: 20px;
}

/* 종합소득세 계산기 끝 */

/* 3.3역산기&종합소득세계산기 시작 */
#beforeTaxValue, #individual_value {
    padding-right: 10px;
    margin-right: 10px;
    text-align: right;
}
#before_tax_result {
    margin-top: 20px;
}
/* 3.3역산기&종합소득세계산기 끝 */


/* 수임처전용화면 시작*/

#main_content {
    margin-left: 200px;
    /* width: 88%; */
    height: 100vh;
}
#main_content>header {
    width: 100%;
    height: 120px;
    box-shadow: 0px 0px 5px -2px;
}
#main_content>section {
    height: 83vh;
    background: rgba(245, 245, 245, 0.5);
}



/* 사이드메뉴  */
#sidemenu {
    color: white;
    background: rgb(62, 63, 72);
    float: left;
    width: 200px;
    /* width: 12%; */
    height: 100vh;
    padding-left:20px;
}
aside #side_header {
    height: 15%;

}
aside #side_content {
    height: 70%;
    overflow-y: scroll;
}
aside #side_footer {
    height: 15%;
}

/* 월별/분기별 손익 테이블 설정 */

section .toggle-container {
    position: relative;
}

table.month {
    display: none;
}

table.quater {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
}

.toggle-container.active .month {
display: table;
}

.toggle-container.active .quater {
display: none;
}
/* 수임처 전용화면 끝 */

/* insight_list 화면 */

/* thead tr:nth-child(1) {
    width: 5%;
}

thead tr:nth-child(2) {
    width: 10%;
}
thead tr:nth-child(3) {
    width: 30%;
}
thead tr:nth-child(3) {
    width: 10%;
} */

/* result 테이블 효과 넣기 */

.result-table thead>tr>th {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

.result-table tbody>tr {
    border: 1px solid black;
    padding: 8px;
    text-align: right;
}

/* business-table 효과넣기 */

#business-table tbody>tr>td>a {
    white-space: nowrap;      /* 텍스트가 한 줄로 표시됨 */
    overflow: hidden;         /* 요소를 넘어가는 내용을 숨김 */
    text-overflow: ellipsis;  /* 텍스트가 넘어갈 경우 "..."로 생략됨 */
}

/* 툴팁 내용 줄바꿈 시작 */
.tooltip-inner{white-space: pre-wrap;}
/* 툴팁 내용 줄바꿈 끝 */

/* 우선순위 스타일 시트에서 background-image를 제거하는 스타일 규칙 추가 
아코디언 배경 이미지 제거로 확장 축소 아이콘 안보이게*/
/* .accordion-button::after {
    background-image: none !important;
} */

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

/* 사업소득 모달창  */
div#bizIncomeModal input {
    width: 120px;
    height: 32px;
    font-size: 16px;
    border: 0;
    border-radius: 5px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(233, 233, 233);
  }

/* vuetify 관련 */
.text-right input {
    text-align: right;
    padding-right: 0.5em;
  }

  /* 사업소득 인풋창 위치교환 */
  /* 애니메이션 효과 */
.move-down, .move-up {
    transition: transform 300ms;
  }
  
  .move-down {
    transform: translateY(215%);
  }
  
  .move-up {
    transform: translateY(-215%);
  }

/* 근로소득 인풋창 위치교환 */
/* 애니메이션 효과 */
.salary-move-down, .salary-move-up {
        transition: transform 450ms;
}

.salary-move-down { 
transform: translateY(343%);
}

.salary-move-up {
    transform: translateY(-343%);
}


/* 부호 변경 플러스<->마이너스 */
.bi {
    transition: color 0.3s ease; /* 색상 전환 애니메이션 */
}
  
.bi-dash-square {
    color: red /* 기본 상태의 색상 */
}
  
.bi-plus-square-fill {
    color: blue; /* 변경된 상태의 색상 */
}

  /* 로딩 배경과 아이콘 스타일 */
.loading-overlay {
    position: fixed; /* 고정 위치 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Flexbox를 사용하여 아이콘을 중앙에 배치 */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2); /* 반투명 배경 */
    z-index: 10; /* 다른 요소들 위에 표시 */
}

/* 페이지네이션 레이어 설정 (페이지넘버가 네이바내려왔을때 안가려지는 문제 해결) */
.pagination {
    position: relative;
    z-index: 0;
}

/* 모달 배경 제거 (Tailwind 모달 사용) */
.modal-backdrop {
    display: none;
}