/*기본*/
html, body{font-family:'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; font-size: 16px;}
a{text-decoration: none; color: #0b0b0b}
ul, dl{}
.table-responsive table th{word-break: keep-all;white-space: nowrap;}
input[readonly],
select[readonly],
textarea[readonly] {
	background-color: #eee;
	color: #6c757d;
	cursor: not-allowed;
}
main{width: calc(100% - 200px)!important; margin-left: 200px;}
main.active{margin-left: 70px; width: calc(100% - 70px)!important;}

main.login-fullpage{width: 100%!important; margin-left: 0;}

@media screen and (max-width: 1200px){
	main,
	main.active	{width: 100%!important; margin-left: 0;	}
}








/*.offcanvas.offcanvas-end{width: 700px}*/
.circle{border-radius: 50%;}
.badge{font-weight: 400; letter-spacing: 0; line-height: normal}
.width-100{width:100%}

/*버튼커스터마이징
.btn{white-space: pre}*/

/*레이아웃 기본*/
.wrapper{}
.offcanvas-header{align-items: flex-start;}
.offcanvas-header .offcanvas-title{letter-spacing: -1px;font-weight: 600; }
.offcanvas-body label{margin-bottom: 0}
/*.offcanvas-footer button{padding: 10px 0}*/
.member-photo {width: 150px;height: 150px;border-radius: 50%; background: #ccc; display: inline-block; background-position: center center; background-size: cover}
.modal-title{font-weight: 600; letter-spacing: -1px}

#attendanceModal .modal-footer{padding: 10px 0}
.hide5weekAgo-warp label{font-size: 14px}


.master-hidden{display: none}

/*헤더*/
header{height: 60px; display: flex}
header.eum .logo img{height: 40px}
header.wani .logo img{height: 30px}
header .header-start{display: flex}
header .header-start .logo img{}
header .header-end{}
header .profile-name {line-height: 18px;}
header .profile-name .profile-mail{font-size: 12px; color:#999}
/* inline-flex + width:auto — 관리자 헤더의 .logo 는 col-6 col-xl-1 이 폭을 쥐고 있어 block flex 면 조직 버튼이 아래로 밀리고 로고가 눌린다 */
header .logo{height: 40px; display: inline-flex; align-items: center; width: auto; flex: 0 0 auto;}

header h2{font-weight: 700; font-size: 40px; letter-spacing: -1px; display: flex; align-items: center; justify-content: center;}
header h2 b{position: relative;font-size: 38px;}
header h2 b img{position: absolute;left: -50px;top: -13px; width: 40px}
@media screen and (max-width: 1200px){
	/*header .logo img{height: px}*/
	header.eum .logo img{height: 30px}
	.offcanvas-header .offcanvas-title{letter-spacing: -1px;font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 60%}
}


.att-dropdown-wrap{display: contents}
.att-dropdown-wrap .dropdown-toggle{border-top-right-radius: 0; border-bottom-right-radius: 0}


/*일반*/


.color-background{position: relative; overflow: hidden}
.color-background::before{content:'';position: absolute; top: -500px; left: -500px; display: inline-block; width: 1000px; height: 1000px; background: radial-gradient(  circle, rgb(0 60 255 / 0.1) 0%, rgb(0 60 255 / 0.05) 40%, transparent 70%); z-index: 0; border-radius: 50%}
.color-background::after{content:'';position: absolute; bottom: -500px; right: -500px;  display: inline-block; width: 1000px; height: 1000px;     background: radial-gradient(circle, rgb(135 2 244 / 0.1) 0%, rgb(191 0 255 / 0.05) 40%, transparent 70%);  z-index: 0; border-radius: 50%}

.color-background-sm{position: relative; overflow: hidden; z-index: 0}
.color-background-sm::before{content:'';position: absolute; top: -300px; right: -300px; display: inline-block; width: 600px; height: 600px; background: radial-gradient(circle, rgb(17 255 0 / 0.1) 0%, rgb(49 255 0 / 5%) 40%, transparent 70%); z-index: -1; border-radius: 50%}
.color-background-sm::after{content:'';position: absolute; bottom: -300px; left: -300px;  display: inline-block; width: 600px; height: 600px;     background: radial-gradient(circle, rgb(255 175 0 / 0.1) 0%, rgb(255 238 0 / 5%) 40%, transparent 70%);  z-index: -1; border-radius: 50%}

.color-background-shadow{position: relative; overflow: hidden; z-index: 0}
.color-background-shadow::before{content:'';position: absolute; top: -200px; right: -200px; display: inline-block; width: 600px; height: 600px; background: radial-gradient(circle, rgb(67 67 67 / 0.1) 0%, rgb(165 165 165 / 0.05) 40%, transparent 70%); z-index: -1; border-radius: 50%}
.color-background-shadow::after{content:'';position: absolute; bottom: -200px; left: -200px;  display: inline-block; width: 600px; height: 600px;     background: radial-gradient(circle, rgb(57 57 57 / 0.1) 0%, rgb(255 238 0 / 5%) 40%, transparent 70%);  z-index: -1; border-radius: 50%}


.online-org-list table th{background: none}
.online-org-list table td .btn-user-setting{width: 100%}

.btn-profile{position: absolute; right: 10px;}
.btn-home{font-size: 50px;border: 0;background: 0;padding: 0;margin: 0;height: initial; line-height: initial; position: absolute; left: 10px; top: 0;}

.org-list-wrap{display: inline-block;width: 100%;text-align: right;position: absolute;bottom: 0;padding: 15px;border-top: 1px solid #ccc;background: #efefef;}
.org-list-wrap .org-list{}
.org-list-wrap .org-list ul li{cursor: pointer; display: flex;justify-content: flex-start; align-items: center; position: relative}
.org-list-wrap .org-list ul li .btn-org-select{position: absolute; right: 0}
.org-list-wrap .org-list ul li.active{color:#0000FF}
.org-list-wrap .org-list ul li.active::before{content: '선택그룹'; display: inline-block; background: #0000FF; color: #fff; font-size: 12px;padding: 1px 3px;border-radius: 3px;}

.total-list-wrap{display: flex; justify-content: space-between; }
.total-list {display: flex; justify-content: center; align-items: center;}
.total-list dt, .total-list dd{display: inline-block; margin: 0}
.total-list dt{padding:2px 5px 1px; font-size: 12px; background: #666; color:#fff; margin: 0 5px 0 10px; border-radius: 3px; font-weight: 500}

.total-att-list {display: flex; justify-content: center; align-items: center; overflow-x: auto;}
.total-att-list dt, .total-att-list dd{display: inline-block; margin: 0}
.total-att-list dt{padding:2px 5px 1px; font-size: 12px; background: #666; color:#fff; margin: 0 5px 0 10px; border-radius: 3px; font-weight: 500; white-space: nowrap;}


.total-memo-list{display: flex; justify-content: center; align-items: center;}
.total-memo-list dt{display: inline-block; margin: 0;padding:2px 5px 1px; font-size: 12px; background: #666; color:#fff; margin: 0 5px 0 10px; border-radius: 3px; font-weight: 500; background: #CB3227}
.total-memo-list dd{display: inline-block; margin: 0}


@media screen and (max-width: 1200px){

    .total-list-wrap{flex-direction: column; overflow: hidden;}
    .total-list{display: block; white-space: nowrap;}
    .total-att-list{display: block; white-space: nowrap;}

}


/*#attendanceOffcanvas .offcanvas-body{padding: 0}*/
/*#attendanceOffcanvas table{min-width: 650px}*/
/*#attendanceOffcanvas table thead{vertical-align: middle; position: sticky; top: 0; z-index: 10;}*/
/*#attendanceOffcanvas table tr th:first-child, #attendanceOffcanvas table tr td:first-child { position: sticky; left: 0; }*/
/*#attendanceOffcanvas table tr td select{font-size: 16px}*/

/*푸터*/
footer{position:relative;}
footer .btn-new{position: fixed;bottom: 30px;right: 30px;display: inline-block;width: 60px;height: 60px;border-radius: 40px;border: 0;color: #fff;background: var(--bs-primary);box-shadow: 0 0 5px 0 #aaa;}
footer .btn-new i{font-size:26px}
footer .btn-area{position: fixed;bottom: 120px;right: 30px;display: inline-block;width: 80px;height: 80px;border-radius: 40px;border: 0;color: #fff;background: var(--bs-primary);box-shadow: 0 0 5px 0 #aaa;}
footer .btn-area i{font-size:30px}

/*모달(출석체크)*/
.att-btn-list{display: flex; flex-direction: column; margin-bottom:20px}
.att-btn-list .btn-org{}
.att-btn-list .btn-org .btn{line-height: 20px;min-height: 60px;display: flex;align-items: center;font-size: 18px;justify-content: center; border: 1px solid var(--bs-primary); color:var(--bs-primary)}
.att-btn-list .btn-check:checked+.btn{background: var(--bs-primary); border: 1px solid var(--bs-primary); color:#fff;}


/*관리*/
#memberOffcanvas{}
#memberOffcanvas label{font-size: 14px; color:#999; }
#addMemoOffcanvas label{font-size: 14px; color:#999}


/*메모*/
.memo-wrap{height: 260px;}
.memo-list{height: calc(100% - 260px); overflow-y: auto;}
.memo-list ul{padding: 0; list-style: none}
.memo-list ul li{position: relative}
.memo-list ul li .btn-memo-del{position: absolute; right: 10px; top: 47px; cursor: pointer}
.memo-list ul li span{display: inline-block}
.memo-list ul li .memo-date{width: 50%; font-size: 14px; color:#999}
.memo-list ul li .memo-id{width: 50%;font-size: 14px; color:#999;  text-align: right;}
.memo-list ul li .memo-content{width: 100%; margin: 5px 0 20px; background: #efefef; padding: 10px 20px 10px 10px}

.memo-list-section .memo-content{white-space: break-spaces; word-break: break-all;}
.area-list{height: 300px;overflow-y: scroll; padding: 10px; background: #efefef;}
.area-list .btn-delete-area{display: flex;align-items: center;justify-content: center;}


/*온라인센터*/
table tr th, table tr td{text-align: center; font-weight: 500}
#attendanceTypeModal .add-category-wrap.off{display: none}
#attendanceTypeModal table tr td{padding: 0 3px; height: 50px;}
#attendanceTypeModal table tr td input{width: 100%;}
#attendanceTypeModal table tr td .btn-color{border: 0;width: 25px;height: 25px;}


.open-org-main{display: flex; width: 100%;align-items: center;justify-content: space-between;}

footer .btn-add-org {position: fixed;bottom: 30px;right: 30px;display: inline-block;width: 80px;height: 80px;border-radius: 40px;border: 0;color: #fff;background: var(--bs-primary);box-shadow: 0 0 5px 0 #aaa;}
footer .btn-add-org i{font-size:30px}


/*통계*/
.table-summery-member table tr td, .table-summery-member table tr th{vertical-align: middle; width: 70px;     white-space: nowrap;}
.table-summery-member table tr td:nth-child(1){width: 80px}
.table-summery-member table tr td:nth-child(2){width: 120px}
.table-summery-member table thead{vertical-align: middle; position: sticky; top: 0; z-index: 10;}


.table-summery-week table tr td, .table-summery-week table tr th{vertical-align: middle; width: 100px; white-space: nowrap;}
.table-summery-week table tr td:nth-child(1){width: 200px}
.table-summery-week table thead{vertical-align: middle; position: sticky; top: 0; z-index: 10;}


/*메뉴*/

.sidebar{position: fixed; height: 100%; border-top:0!important; border-bottom:0!important; width: 200px; background: #fff!important; z-index: 2}
.sidebar #sidebarMenu{background: #fff!important;}
.sidebar h6.sidebar-heading{font-size: 12px; color:#999!important;}
.sidebar ul.nav li a{color:#000; padding-top: 5px; padding-bottom: 5px;}
.sidebar ul.nav li a:hover{color: var(--bs-primary); background: #E7F7FFFF;}
.sidebar ul.nav li a.active{color:#fff; background: var(--bs-primary); }
.sidebar ul.nav li a i{color:#999}
.sidebar.active{width: 70px}
.sidebar.active .profile-area{display: flex; justify-content: center; align-items: center; flex-direction: column;}
.sidebar.active .profile-area .profile-name{display: none;}
.sidebar.active .profile-area i{display: none}

.sidebar.active #sidebarMenu{width: 70px;}
.sidebar.active h6.sidebar-heading{display: none!important;}
.sidebar.active ul.nav li a{width: 70px; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 12px; display: flex; flex-direction: column; padding: 10px 0 8px}
.sidebar.active ul.nav li a i{font-size: 24px}
.sidebar .simplebar-content-wrapper{overflow-x: hidden!important}
.sidebar .simplebar-track.simplebar-horizontal{display: none!important}
.sidebar .sidebar-toggle{border: 1px solid #ddd; position: absolute; top: 22px; right: -10px; width: 20px; height: 20px; line-height: 30px; border-radius: 50%; text-align: center; z-index: 99; background: #fff; font-size: 10px; padding: 0}
.container-fluid{z-index: 1; position: relative;}


#loginProfile .dropdown-menu li a i{color:#999;}

.breadcrumb{position: relative; z-index: 1}
.breadcrumb .breadcrumb-item{font-size: 12px!important; padding-left: 5px}
.breadcrumb .breadcrumb-item:first-child::before{display: none!important;}
.breadcrumb .breadcrumb-item::before{content: '\F285'; font-family:'bootstrap-icons'; font-size: 12px; padding-right: 5px;}
.breadcrumb-item.active{color:var(--bs-primary);}

.profile-area{}
.profile-area .profile-img{}
.profile-area .profile-name{line-height: 16px}


.btn-group .dropdown-toggle-split{flex: 0 0 auto;}


.card .card-body.card-height{overflow: auto; height: calc(100vh - 232px); background: #fff; z-index: 0;}
.card .card-body.card-height-notree{overflow: auto; height: calc(100vh - 232px); background: #fff; z-index: 0;}
.card .card-body.card-tree-height{overflow: auto; height: calc(100vh - 387px);}
.noframe .card .card-body.card-height{overflow: auto; height: calc(100vh - 170px);}

/* 좌측 트리 패널(wani-category-tree 컴포넌트)의 높이.
   컴포넌트가 스크롤·하단 관리 메뉴를 스스로 갖고 있으므로 카드 대신 컴포넌트 루트에 높이를 준다.
   오른쪽 목록 카드(.card-height)와 같은 값이라 두 패널의 아래끝이 맞는다.
   992px 미만에서는 컴포넌트가 모바일 드릴다운 트리로 바뀌므로 높이 제한을 풀어 둔다. */
#left-pane > .wani-category-tree{height: 100%;}

.page-title{font-weight: 700;letter-spacing: -1px; position: relative; z-index: 1}

@media screen and (max-width: 1200px){
	.sidebar{height: 0!important;position: initial}
	.sidebar .offcanvas-xl .offcanvas-header{background: none!important;}
	.sidebar #sidebarMenu{width: 240px}
	.sidebar .sidebar-toggle{display: none}


	.card .card-body.card-tree-height{height: auto!important;}
	.card .card-body.card-height{height: calc(100vh - 220px);}
	.card .card-body.card-height-no{height: calc(100vh - 220px);}
	#left-pane > .wani-category-tree{height: calc(100vh - 220px);}
	.noframe .card .card-body.card-height{overflow: auto; height: calc(100vh - 270px);}
}

/* 992px 미만에서는 컴포넌트가 모바일 드릴다운 트리로 바뀌어 내용만큼만 차지한다.
   (위 1200px 블록보다 뒤에 있어야 높이 제한이 풀린다) */
@media screen and (max-width: 992px){
	#left-pane > .wani-category-tree{height: auto;}
}

@media screen and (max-width: 768px){
	.card .card-body.card-height-notree{height: calc(100vh - 164px);}
	.card .card-header{padding: 10px}
}


/*select2*/
.select2-container--default .select2-selection--multiple{border: 1px solid #ced4da;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{padding-left: 6px!important;}
.select2-container--default .select2-search--inline .select2-search__field{min-height: 25px;margin-left: 10px !important;margin-top: 6px !important; position: relative;}


/*fancytree-container*/
ul.fancytree-container{border: 0!important;}
.category-menu button{overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;}

@media screen and (max-width: 992px) {
	.wani-tree-nav{overflow: scroll;display: flex;flex-direction: row; position: relative}
	.category-menu{overflow: scroll;display: flex;flex-direction: row; position: relative;  padding-bottom: 5px}
	.category-menu button{overflow: initial;}
}

.category-menu-dropdown .dropdown-menu {
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	z-index: 1080;
}
@media screen and (max-width: 992px) {
	#left-pane .card-footer{position: absolute; top: -1px; right: 0;opacity: 0.9;}
	#left-pane .card-footer .category-menu-dropdown{}
	#left-pane .card-footer .category-menu-dropdown button{width: 35px!important; height: 35px; font-size: 20px; justify-content: center !important;}
	#left-pane .card-footer .category-menu-dropdown .dropdown-menu{width: 200px!important;}
	#left-pane .card-footer .category-menu-dropdown .dropdown-menu li button{font-size: 16px; width: 100% !important; justify-content: space-between !important;}
}


/*sortable*/
.sortable-tbody .ui-sortable-placeholder {background-color: #f8f9fa;border: 2px dashed #dee2e6;visibility: visible !important;height: 60px;}

.sortable-tbody .ui-sortable-helper {background-color: #fff;border: 1px solid #dee2e6;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}

.handle:hover {color: var(--bs-primary, #0d6efd) !important;width: 100%!important;}

.sortable-row.ui-sortable-helper{width: 100%}
.sortable-row.ui-sortable-helper td {background-color: #fff;}

/* Split.js 관련 스타일 */
.split-container {display: flex; gap: 0;}

.card{position: relative; z-index: 1}

.split-pane {display: flex;flex-direction: column;}
.split-pane .card {flex: 1;min-height: 0;border-radius: 8px; z-index: 1; border: 1px solid var(--wani-border-color); box-shadow: 0 2px 4px rgba(0, 0, 0, .1);}

/* 좌측 pane의 카테고리 관리 드롭다운이 pane/우측 목록 위로 떠야 하므로
   .split-pane의 overflow:hidden을 좌측에서만 해제하고 우측보다 위에 둔다.
   (예전에는 member.css에만 있어서 회원관리를 거친 뒤에만 다른 화면에서 동작했다) */
#left-pane, #left-pane > .card {overflow: visible; position: relative; z-index: 9;}
#right-pane {position: relative; z-index: 1;}

/* 메모·타임라인·차량운행은 좌측이 목록, 우측이 통계/패널이다.
   좌측 카드헤더의 검색 드롭다운이 pane 밖으로 떠야 하므로 같은 처리를 해 준다.
   (내용 잘림은 .card-body.card-height 의 overflow:auto 가 담당한다) */
#memoGridPane, #memoGridPane > .card,
#timelineGridPane, #timelineGridPane > .card,
#carSchedulerPane, #carSchedulerPane > .card {overflow: visible; position: relative; z-index: 9;}
#memoStaticsPane, #timelineStaticsPane, #carDriverPane {position: relative; z-index: 1;}

@media (max-width: 991.98px) {
	.split-container {flex-direction: column;}
	/* 메모·타임라인·차량운행처럼 #left-pane/#right-pane 이 아닌 id 를 쓰는 화면도 함께 되돌린다. */
	.split-container > .split-pane {width: 100% !important;}
	#left-pane, #right-pane {width: 100% !important;}
	#left-pane .card-body.card-height {height: auto;}
	#left-pane .card-body.card-height.homepage {height: calc(100vh - 220px)!important;}
	#right-pane .card-body.card-height {height: calc(100vh - 240px);}
	.gutter {display: none !important;}
}

/* Split.js gutter(구분선) 스타일 */
.gutter {transition: background-color 0.2s ease;}
.gutter:hover {background-color: #e9ecef;}
.gutter.gutter-horizontal {cursor: col-resize;}
.gutter.gutter-horizontal:hover {background-color: #007bff;}

/* Fancytree 커스텀 스타일 */
.ui-fancytree {border: none;font-family:'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;}
.fancytree-container {border: none;}
.fancytree-node {border: none;padding: 2px 0;}

/* root 레벨의 미분류 그룹은 조직과 동일한 스타일 적용 */
.fancytree-node[data-type="unassigned"] {border-bottom: 1px solid #e9ecef;margin-bottom: 8px;padding-bottom: 4px;}
/* Fancytree 아이콘 및 들여쓰기 */
.fancytree-icon {width: 16px;height: 16px;margin-right: 8px;}
.fancytree-indent {width: 24px;}
.fancytree-expander {width: 16px;height: 16px;}

span.fancytree-icon{margin-left: 0; margin-right: 0;background-image:none!important; }
span.fancytree-icon::after{content: '\F3D1'; font-family:'bootstrap-icons'; font-size: 15px; color: #e09529;}

#attendanceModal .form-select {border: 1px solid #ced4da;border-radius: 7px; padding: 5px 10px 4px;}


.form-select {border: 1px solid #ced4da;border-radius: 4px;position: relative; z-index: 1;}


.pq-loading{display: none!important;}

/* 스크롤바 스타일 */
.tree-container::-webkit-scrollbar {width: 6px;}
.tree-container::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 6px;}
.tree-container::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 6px;}
.tree-container::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}

/* 반응형 스타일 */
@media (max-width: 768px) {
	/*.tree-container {height: 300px;}*/
}

/* Toast 컨테이너 z-index */
#toastContainer {z-index: 9999;}
.toast-body i {font-size: 1.1em;vertical-align: middle;}

/* 로딩 스피너 */
.loading-spinner {display: inline-block;width: 20px;height: 20px;border: 3px solid #f3f3f3;border-top: 3px solid #007bff;border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.master-login{position: absolute;top: 70px;right: 10px;}
/* 조직 선택 드롭다운은 wani-search-dropdown 컴포넌트가 그린다.
   검색줄을 고정하려면 메뉴 자체가 스크롤되면 안 되므로 높이 제한은 컴포넌트의 maxHeight 로 준다. */


.msg-comment{word-break: keep-all;}
.footer-buttons{position: fixed;right: 20px;bottom: 40px;z-index: 9;font-size: 12px; font-weight: 500; display: flex;flex-direction: column;align-items: center;}
.footer-buttons .remote-channel{cursor: pointer; width: 50px; height: 60px; background: #198754;  border-radius: 10px 10px 0 0}
.footer-buttons .remote-channel a {color:#fff; margin-top: 3px}
.footer-buttons .remote-channel a i{font-size:20px; }

.footer-buttons .guide-channel{cursor: pointer; width: 50px; height: 55px; background: #007bff; }
.footer-buttons .guide-channel a {color:#fff;margin-top: 3px}
.footer-buttons .guide-channel a i{font-size:20px; }

.footer-buttons .kakao-channel{cursor: pointer; width: 50px; height: 60px; background: #ffc107; border-radius: 0 0 10px 10px}
.footer-buttons .kakao-channel a {color:#fff;margin-top: 3px}
.footer-buttons .kakao-channel a i{font-size:20px; }

/* 접기/펼치기 */
.footer-buttons .footer-buttons-body{display: flex; flex-direction: column; align-items: center; overflow: hidden; max-height: 400px; opacity: 1; transition: max-height .3s ease, opacity .25s ease, margin-bottom .3s ease;}
.footer-buttons.footer-buttons-collapsed .footer-buttons-body{max-height: 0; opacity: 0; margin-bottom: 0;}
.footer-buttons .footer-buttons-toggle{display: flex; flex-direction: column; justify-content: center; align-items: center;  padding: 0; line-height: 1; color: #6c757d; background: #fff; border: 1px solid #dee2e6; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; margin-top: 10px}
.footer-buttons .footer-buttons-toggle:hover{color: #212529; background: #f8f9fa;}
.footer-buttons .footer-buttons-toggle i{display: block; font-size: 10px; transition: transform .3s ease;}
.footer-buttons.footer-buttons-collapsed .footer-buttons-toggle i{transform: rotate(180deg);}


/*로그인화면*/
/*.login-theme{height: calc(100vh - 120px);}*/
.login-wrapper{position:relative;}
.login-wrapper .login-box{ }

@media screen and (max-width: 992px){
	.login-wrapper{overflow: initial}
	.login-wrapper .login-box{border-radius: 30px; position:absolute; top: -10%;background: #fff; padding: 30px; z-index: 3; box-shadow: 0 0 10px 0 rgba(123, 123, 123, 0.25);}
}

#homepageThemeSlider .slick-list,
#homepageThemeSlider .slick-track,
#homepageThemeSlider .slick-slide,
#homepageThemeSlider .slick-slide > div,
#homepageThemeSlider [data-simplebar],
#planTableWrap [data-simplebar] {
	height: 100%;
}

#homepageThemeSlider .slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	transform: translateY(-50%);
}

#homepageThemeSlider .slick-prev { left: 12px; }
#homepageThemeSlider .slick-next { right: 12px; }
/* 점 모양은 wani-component.css 의 .wani-slider-dots(공용). 여기서는 위치만 정한다. */
#homepageThemeSlider .slick-dots.wani-slider-dots { position: absolute; left: 0; bottom: 12px; margin: 0; }

#planTable {
	min-width: 720px;
}

#planTable .plan-compare-table {
	margin-bottom: 0;
	background: var(--bs-body-bg);
	font-size: .95rem;
	text-align: center;
}

#planTable .plan-compare-table th,
#planTable .plan-compare-table td {
	padding: .55rem;
	vertical-align: middle;
	white-space: nowrap;
}

#planTable .plan-compare-table thead th {
	background: var(--bs-tertiary-bg);
}

#planTable .plan-compare-table .feature-label {
	font-weight: 600;
	text-align: left;
}

#planTable .plan-name {
	display: block;
	padding: .35rem .5rem;
	border: 1px solid var(--bs-secondary-color);
	border-radius: .4rem;
	color: var(--bs-secondary-color);
}

#planTable .plan-name.is-selected {
	border-color: var(--bs-primary);
	box-shadow: inset 0 0 0 2px var(--bs-primary);
	background: rgba(var(--bs-primary-rgb), .08);
	color: var(--bs-primary);
}

.login-section .login-backdrop {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(0, 0, 0, .5);
	background-image: linear-gradient(190deg, #062e8599, #003A7F99, #1b5fc099);
	/*background-image: linear-gradient(135deg, #062e85 55%, #003A7F 55%, #1b5fc0 55%);*/
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* 왔니 로그인: 흰색 백드롭(이음은 위의 파란 그라데이션 그대로) */
.login-section .login-backdrop.login-backdrop-light {
	border: 0;
	background: rgba(255, 255, 255, .2);
	background-image: none;
	backdrop-filter: blur(2px);
}

.login-hero{
	z-index: 2;
}
.login-hero h1{}
.login-hero h1{}


section{padding: 60px 0; }
section .login-section{width: 100%}
section .login-section-content{display:flex;align-items: center;height: 100%;}
/*이음*/
.login-section h1{font-size: 180px; letter-spacing: -2px;z-index: 5;opacity: 0.7;line-height: 1;}
.login-section .login-hero-lead{margin: 0; font-size: 40px; font-weight: 600; line-height: 1.2; color: #fff;}
/*왔니*/
.login-section.fp-section h1{font-size: 60px; opacity: 1; color: #000}
.section2-img img{width:100%; height: calc(100vh - 500px); object-fit: contain}
.login-section.fp-section .login-hero-lead{margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; color: #333;}

@media screen and (max-width: 992px) {
	/*이음*/
	.login-section h1{font-size: 80px; letter-spacing: -2px; line-height: 1}
	/*왔니*/
	.login-section.fp-section h1{font-size:40px;}
	.section2-img img{height: 20vh;}
	.login-section .login-hero-lead{font-size: 20px}
}

/*이음 좌측 슬라이드(앱 소개)*/
.login-eum-slider{position: relative; z-index: 5; width: 100%; max-width: 560px; padding: 0 16px;}
.login-eum-slider .login-hero-slide{outline: 0;}
.login-eum-app{max-width: 460px; margin: 0 auto; word-break: keep-all;}
.login-eum-app-icon img{display: block; margin: 0 auto; width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.35);}
.login-eum-app-eyebrow{display: inline-block; margin: 14px 0 8px; padding: 3px 14px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 14px; font-weight: 700;}
.login-eum-app-title{margin: 0 0 14px; font-size: 40px; letter-spacing: -1px;}
.login-eum-app-desc{margin: 0 0 22px; font-size: 18px; line-height: 1.6; font-weight: 500;}
.login-eum-app-stores{display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.login-eum-app-notice{margin: 18px 0 0; font-size: 13px; line-height: 1.6; opacity: .9;}
.login-eum-app-notice a{color: #fff; font-weight: 700; text-decoration: underline;}
@media (max-width: 991.98px) {
	.login-eum-app-icon img{width: 56px; height: 56px; border-radius: 13px;}
	.login-eum-app-eyebrow{margin: 6px 0 4px; font-size: 12px;}
	.login-eum-app-title{margin-bottom: 6px; font-size: 24px;}
	.login-eum-app-desc{margin-bottom: 10px; font-size: 13px; line-height: 1.45;}
	.login-eum-app-desc br{display: none;}
	.login-eum-app-notice{margin-top: 8px; font-size: 11px; line-height: 1.4;}
}

section.feature-section{height: auto}
section.feature-section .feature-section-content{display:flex;align-items: center;height: 100%;position: relative;}
section.feature-section .feature-section-content .feature-img-slider{width: 631px; height: 409px; position: relative;}
section.feature-section .feature-section-content .feature-img-slider article .img-fluid{width: 631px; height: 409px;}
section.feature-section .feature-section-content article{height: auto; padding: 10px 0; position: relative;}
section.feature-section .feature-section-content article h2{ margin-bottom: 15px}
section.feature-section .feature-section-content p{}
section.feature-section .feature-section-content .img-mobile{position: absolute; top: 0; right: 0}
section.feature-section .feature-section-content ul li{}


.feature-img-slider .slick-arrow{position: absolute; top: 45%; z-index: 9;width: 30px;height: 30px;border-radius: 50%;border: 1px solid #999;}
.feature-img-slider .slick-prev{left: -13px}
.feature-img-slider .slick-next{right: -13px}
.feature-img-slider .slick-dots.wani-slider-dots{position: absolute; bottom: -110px; margin: 0;}
.feature-title{height: 200px}
.feature-pc{width: 900px; height: auto; z-index: 8; position: absolute; left: -131px; top: -14px;}
.feature-mobile{width: 340px; height: auto; z-index: 11; position: absolute; left: 43%; top: 28%; display: none}

@media screen and (max-width: 992px) {
	section.feature-section .feature-section-content p{font-size: 16px!important;}
	section.feature-section .feature-section-content .feature-img-slider{width: 100%; height: 38vh}
	section.feature-section .feature-section-content .feature-img-slider article .img-fluid{width: 100%; height: auto;}
	section.feature-section .feature-section-content ul li{font-size: 16px}
	.feature-title{height: 22vh}
	.feature-pc{width: 143%; left: -21.1%; top: 20%;}
	.feature-mobile{}
	.feature-img-slider .slick-dots.wani-slider-dots{bottom: -70px;}

}


/*.login-section .login-hero h1{font-size: 44px; color: #f59e0b;}*/
/*.login-hero .login-hero-lead{margin: 22px 0 20px; font-size: 18px; color: #fff}*/

/* 좌측 히어로 — 배경 이미지가 밝아(평균 242/255) 어두운 글씨를 쓰고, 패턴 위에서도 읽히도록 흰 그림자만 얇게 깐다. */
.login-hero{max-width: 560px;}

.login-hero .login-hero-points{margin: 0; font-size: 16px;}
.login-hero .login-hero-points li{display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 5px 0; text-align: left; text-shadow: 0 1px 8px rgba(255, 255, 255, .85);}
.login-hero .login-hero-points i{flex: 0 0 auto; margin-top: 3px; color: var(--bs-primary);}

/* 모바일 히어로 — 좌측 비주얼이 lg 미만에서 감춰지므로 이 블록이 유일한 가치 전달 지점이다. */
.login-hero-mobile{max-width: 420px; margin-bottom: 28px; z-index: 2;}
.login-hero-mobile h2{font-size: 28px; line-height: 1.3; letter-spacing: -1px;}
.login-hero-mobile .login-hero-mobile-lead{margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--bs-secondary-color);}
.login-hero-mobile .login-hero-mobile-more{display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; text-decoration: none;}

/* AI 홈페이지 생성 3단계 */
.ai-homepage-steps{margin: 0 0 18px; counter-reset: ai-step;}
.ai-homepage-steps li{display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; font-size: 16px; line-height: 1.6;}
.ai-homepage-steps .ai-homepage-step-no{flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: 15px; font-weight: 700; line-height: 30px; text-align: center;}
.ai-homepage-note{margin: 0 0 22px; font-size: 15px; color: var(--bs-secondary-color);}

/* 수신전화 소개 — 좌측 설명 목록 */
.call-feature-points{margin: 0 0 24px; font-size: 16px;}
.call-feature-points li{display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; line-height: 1.6;}
.call-feature-points i{flex: 0 0 auto; margin-top: 3px; font-size: 20px; color: var(--bs-primary);}
.pc-app-note{align-items: flex-start; gap: 12px; margin-top: 18px; padding: 12px 14px; max-width: 520px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: var(--bs-tertiary-bg);}
.pc-app-note img{flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;}
.pc-app-note-title{font-size: 15px; font-weight: 700;}
.pc-app-note-title .badge{margin-left: 6px; font-size: 11px; font-weight: 600; vertical-align: 1px;}
.pc-app-note-desc{margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--bs-secondary-color); word-break: keep-all;}
.call-feature-note{margin: 14px 0 0; font-size: 14px; color: var(--bs-secondary-color);}

/* 수신전화 오버레이 목업 — 실제 앱 오버레이(카드 폭 300dp) 구조를 옮겨 온 장식 요소다. */
.call-overlay-demo{display: flex; justify-content: center;}
.call-overlay-phone{width: 100%; max-width: 340px; padding: 26px 20px 30px; border-radius: 34px; background: linear-gradient(170deg, #1b2330 0%, #2b3648 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);}
.call-overlay-incoming{margin-bottom: 18px; text-align: center; color: #fff;}
.call-overlay-incoming-label{font-size: 13px; letter-spacing: 2px; opacity: .6;}
.call-overlay-incoming-number{margin-top: 6px; font-size: 22px; font-weight: 600; letter-spacing: -.5px;}
.call-overlay-card{padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18);}
.call-overlay-head{display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, .08);}
.call-overlay-avatar{flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: 20px; font-weight: 700; line-height: 46px; text-align: center;}
.call-overlay-head-text{min-width: 0;}
.call-overlay-name{font-size: 19px; font-weight: 700; letter-spacing: -.5px;}
.call-overlay-path{overflow: hidden; font-size: 13px; color: var(--bs-secondary-color); text-overflow: ellipsis; white-space: nowrap;}
.call-overlay-memo-label{margin: 14px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--bs-secondary-color);}
.call-overlay-memo{margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bs-tertiary-bg); font-size: 13px; line-height: 1.5;}
.call-overlay-memo-date{display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--bs-primary);}
.call-overlay-input{display: flex; align-items: center; gap: 8px; margin-top: 14px;}
.call-overlay-input span{flex: 1 1 auto; padding: 9px 12px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; font-size: 13px; color: var(--bs-secondary-color);}
.call-overlay-input em{flex: 0 0 auto; padding: 9px 14px; border-radius: 10px; background: var(--bs-primary); color: #fff; font-size: 13px; font-style: normal; font-weight: 600;}

@media screen and (max-width: 992px) {
	.call-overlay-phone{max-width: 300px;}
}

/* 회원수첩 소개 카드 */
.notebook-grid .notebook-card{border: 1px solid rgba(0, 0, 0, .05); transition: transform .2s ease, box-shadow .2s ease;}
.notebook-grid .notebook-card:hover{transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .08);}
.notebook-grid .notebook-card i{display: block; margin-bottom: 12px; font-size: 30px; color: var(--bs-primary);}
.notebook-grid .notebook-card-title{margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.5px;}
.notebook-grid .notebook-card-desc{margin: 0; font-size: 14px; line-height: 1.6; color: var(--bs-secondary-color);}

@media (prefers-reduced-motion: reduce) {
	.notebook-grid .notebook-card{transition: none;}
	.notebook-grid .notebook-card:hover{transform: none;}
}

/* 이음(e-um.org) 로그인은 fullPage 없이 로그인 구역 하나만 그린다.
   fullPage 가 잡아 주던 화면 높이를 대신 직접 주고, 공통 section 여백(60px)을 없애 화면을 정확히 채운다. */
main.login-fullpage.login-no-fullpage .login-section{height: 100vh; padding: 0;}

/* 왔니 로그인은 fullPage 초기화(기능 슬라이더 이미지 로드 뒤)까지 시간이 걸린다. 그동안 모든 구역이 펼쳐진 채
   보이면 1번 구역이 납작해지고 아래 구역의 큰 글자가 드러나므로, 1번 구역만 한 화면으로 보이게 가려 둔다.
   클래스는 login.js 의 releaseLoginFullpagePending() 이 fullPage 초기화 직전에 뗀다. */
main.login-fullpage.login-fullpage-pending{height: 100vh; overflow: hidden;}
main.login-fullpage.login-fullpage-pending .login-section.section-1{height: 100vh;}
main.login-fullpage.login-fullpage-pending .login-section:not(.section-1){visibility: hidden;}

/* fullPage(scrollOverflow)가 섹션 내용을 높이 auto 인 .fp-scroller 로 감싸 1번 섹션의 .row.h-100 이 높이를 잃는다.
   1번 섹션은 한 화면에 들어가는 구성이라 스크롤러를 섹션 높이로 채운다(다른 섹션은 내용이 길 수 있어 건드리지 않는다). */
main.login-fullpage .login-section.section-1 .fp-scroller{height: 100%;}

/* 화면 하단 가운데 '다음 섹션으로' 버튼 — 홈페이지 테마 5의 .theme5-scroll-down 과 같은 모양이다(login.js 가 만든다). */
.login-scroll-down{position: fixed; left: 50%; bottom: calc(var(--login-footer-height, 0px) + 24px); z-index: 8; margin-left: -22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff; line-height: 1; cursor: pointer; opacity: .85; transition: opacity .25s ease, visibility .25s ease, background-color .25s ease; animation: login-scroll-down-bob 1.8s ease-in-out infinite;}
.login-scroll-down i{font-size: 30px; display: block;}
.login-scroll-down:hover,
.login-scroll-down:focus-visible{opacity: 1; background: rgba(0, 0, 0, .45); outline: none;}
.login-scroll-down.is-hidden{opacity: 0; visibility: hidden; pointer-events: none;}
@keyframes login-scroll-down-bob{0%, 100%{transform: translateY(0);} 50%{transform: translateY(9px);}}
@media (prefers-reduced-motion: reduce){.login-scroll-down{animation: none;}}


@media screen and (max-width: 992px) {
	/*.login-theme{height: calc(100vh - 120px);}*/
	/* 히어로가 함께 들어오므로 높이를 고정하지 않는다(작은 화면에서 로그인 버튼이 잘린다). */
	/*.login-wrapper{min-height: calc(100vh - 120px); padding-top: 32px; padding-bottom: 32px;}*/
}
/*회원가입*/
.join-shell .btn{min-width:280px}


/*캘린더*/
.fc-theme-standard th{background: #efefef}
.fc-scrollgrid-sync-inner{padding: 5px 0;}
.fc .fc-daygrid-day-top{justify-content: center}
.fc .fc-daygrid-day-number{font-size: 14px;}


/* 모바일에서 일반 버튼의 텍스트만 제거 (드롭다운 제외) */
@media (max-width: 768px) {
	.card-header .btn:not(.dropdown-toggle) {
		font-size: 0 !important;
		display: block;
	}
	.card-header .btn:not(.dropdown-toggle) i {
		font-size: 1rem;
	}
}


.slick-dots li{margin: 0!important;}
/*.slick-dots li.slick-active button:before{content:'●'!important; font-size: 10px!important;}*/
/*.slick-dots li button:before{content:'○'!important; font-size: 10px!important;}*/


/* 휴가 신청 내역 — 내가 결재할 수 있는 행은 눌러서 결재 모달을 연다.
   ('처리' 열을 없앤 대신 행 클릭이 진입점이라 커서로 알려 준다) */


/* main pajax 화면 전환 중 로딩 표시 (assets/js/main.js 의 renderLoading) */
.main-page-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 240px;
	opacity: 0;
	animation: main-page-loading-in 0.15s ease 0.2s forwards;
}

@keyframes main-page-loading-in {
	to {
		opacity: 1;
	}
}

/* flex 자식에서 text-truncate/줄어들기가 동작하려면 min-width:0 이 필요하다(부트스트랩에 유틸이 없다) */
.min-width-0 { min-width: 0; }

/* 조직이 'AI 사용'을 끄면 <html class="wani-ai-disabled"> 가 되고 AI 버튼([data-wani-ai])이 전부 숨는다.
   화면 스크립트가 d-none/d-lg-flex 를 토글해도 이 규칙이 이긴다(!important). ai-feature-plan.md 2-2 */
.wani-ai-disabled [data-wani-ai] { display: none !important; }
/* 포인트 단가는 AI 설정 탭에서만 보여 준다 — 옛 마크업이 남아 있어도 숨긴다 */
[data-wani-ai-price] { display: none !important; }

/* /login 헤더 — 로고 왼쪽, 섹션 이동 메뉴 오른쪽(header_indexframe.php 가 login_nav_items 를 받을 때만 그린다). */
.login-nav-header .logo{display: flex}
.login-nav-header .logo a{display: inline-flex; align-items: center; height: 34px}
.login-nav .nav-link{padding: .375rem .75rem; color: #333; font-weight: 600; letter-spacing: -.3px; transition: color .2s ease;}
.login-nav .nav-link:hover,
.login-nav .nav-link:focus-visible{color: var(--bs-primary);}
.login-nav .nav-link.active{color: var(--bs-primary);}
.login-nav .dropdown-item.active{background: var(--bs-primary-bg-subtle); color: var(--bs-primary);}
@media (min-width: 1200px){.login-nav .nav-link{padding: .375rem 1rem;}}
/* 메뉴는 헤더 가운데 — 로고·로그인 아이콘 폭과 무관하게 화면 중앙에 두려고 헤더(absolute) 기준으로 띄운다. */
@media (min-width: 992px){.login-nav-header .login-nav .nav{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-wrap: nowrap; white-space: nowrap;}}
.login-nav .login-nav-login{width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 1rem; line-height: 1;}

/* 로그인 좌측 히어로 슬라이드(login.js initializeLoginHeroSlider) — slick-theme 를 싣지 않으므로 점(dots)은 여기서 그린다.
   초기화 전에는 첫 장만 보이게 해 문구가 세로로 쌓였다가 접히는 깜빡임을 막는다. */
.login-hero{width: 100%; min-width: 0; margin: 0 auto;}
.login-hero .login-hero-title,
.login-section .login-hero .login-hero-lead{word-break: keep-all; overflow-wrap: anywhere;}
.login-hero-slider:not(.slick-initialized) .login-hero-slide + .login-hero-slide{display: none;}
.login-hero-slider .login-hero-slide{padding: 0 8px;}
.login-hero .login-hero-eyebrow{display: inline-block; margin-bottom: 14px; padding: 4px 14px; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 14px; font-weight: 700; letter-spacing: -.2px;}
.login-hero .login-hero-title{margin: 0 0 18px; font-size: 56px; line-height: 1.15; letter-spacing: -2px; color: #000;}
.login-section .login-hero .login-hero-lead{margin: 0; font-size: 22px; font-weight: 500; line-height: 1.4; color: #333; word-break: keep-all;}
.login-hero-slider .slick-dots.wani-slider-dots{margin-top: 28px;}
@media screen and (max-width: 992px){
	.login-hero .login-hero-eyebrow{margin-bottom: 8px; font-size: 12px;}
	.login-hero .login-hero-title{margin-bottom: 10px; font-size: 32px; letter-spacing: -1px;}
	.login-section .login-hero .login-hero-lead{font-size: 18px;}
	.login-section .login-hero .login-hero-lead br{display: none;}
	.login-hero-slider .slick-dots.wani-slider-dots{margin-top: 14px;}
}

/* /login 보안 구역(section-7) — 카드가 많아 한 줄 설명의 작은 카드로 둔다. 목록은 login.php 의 $login_security_groups. */
.security-section .security-tabs, .pricing-section .security-tabs{gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;}
.security-section .security-tabs::-webkit-scrollbar, .pricing-section .security-tabs::-webkit-scrollbar{display: none;}
.security-section .security-tabs .nav-link, .pricing-section .security-tabs .nav-link{display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--bs-light); color: #333; font-size: 15px; font-weight: 700; white-space: nowrap;}
.security-section .security-tabs .nav-link.active, .pricing-section .security-tabs .nav-link.active{background: var(--bs-dark); color: #fff;}
.security-section .security-tab-count, .pricing-section .security-tab-count{min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: 12px; line-height: 1.6; text-align: center;}
.security-section .security-tabs .nav-link.active .security-tab-count, .pricing-section .security-tabs .nav-link.active .security-tab-count{background: rgba(255, 255, 255, .2); color: #fff;}
/* 그룹 슬라이드(wani-slider) — 카드 그림자·hover 이동이 잘리지 않게 좌우 여백을 두고, 초기화 전엔 첫 장만 보인다. */
.security-section .security-slider:not(.slick-initialized) .security-slide + .security-slide{display: none;}
.security-section .security-slider .slick-list{margin: -6px;}
.security-section .security-slider .security-slide{padding: 6px;}
.security-section .security-slider .slick-dots.wani-slider-dots{margin-top: 14px;}
.security-section .security-card{display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; background: var(--bs-light); transition: transform .2s ease, box-shadow .2s ease;}
.security-section .security-card:hover{transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .07);}
.security-section .security-card i{flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 18px;}
.security-section .security-card-title{margin-bottom: 2px; font-size: 14px; font-weight: 700; letter-spacing: -.4px;}
.security-section .security-card-desc{margin: 0; font-size: 12px; line-height: 1.5; color: var(--bs-secondary-color); word-break: keep-all;}
@media (prefers-reduced-motion: reduce){
	.security-section .security-card{transition: none;}
	.security-section .security-card:hover{transform: none;}
}

/* /login 홍보 구역 제목 위 기능 이름 뱃지(예: 누구니) — 히어로의 .login-hero-eyebrow 와 같은 모양 */
.login-section .login-section-eyebrow{display: inline-block; margin-bottom: 16px; padding: 4px 14px; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 15px; font-weight: 700; letter-spacing: -.2px;}
@media screen and (max-width: 992px){.login-section .login-section-eyebrow{margin-bottom: 10px; font-size: 13px;}}

/* /login 요금 구역(section-8) — 탭 모양은 보안 구역의 .security-tabs 를 같이 쓴다. 데이터는 subscription_plan_compare.json */
.pricing-section .plan-table-wrap{height: auto !important;}
/* 슬라이드(wani-slider) — 카드 그림자가 잘리지 않게 좌우 여백, 초기화 전엔 첫 장만. 높이는 가장 긴 장으로 고정된다 */
.pricing-section .pricing-slider:not(.slick-initialized) .pricing-slide + .pricing-slide{display: none;}
.pricing-section .pricing-slider .slick-list{margin: -6px;}
.pricing-section .pricing-slider .pricing-slide{padding: 6px;}
.pricing-section .pricing-slider .slick-dots.wani-slider-dots{margin-top: 10px;}
.pricing-section .pricing-event{display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(var(--bs-danger-rgb), .08); color: var(--bs-danger); font-size: 15px;}
.pricing-section .pricing-block-title{margin-bottom: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.3px;}
.pricing-section .pricing-note{margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--bs-secondary-color); word-break: keep-all;}
.pricing-section .pricing-card{padding: 14px 16px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; background: #fff;}
.pricing-section .pricing-card-label{font-size: 13px; font-weight: 600; color: var(--bs-secondary-color);}
.pricing-section .pricing-card-value{margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: #111;}
.pricing-section .pricing-card-desc{margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--bs-secondary-color); word-break: keep-all;}
.pricing-section .pricing-card-icon{flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 18px;}
/* 요금 구역은 바탕이 밝은 회색 카드라 탭 버튼을 흰색으로 띄운다 */
.pricing-section .security-tabs .nav-link:not(.active){background: #fff;}
/* 요금 구역: 탭 줄이 flex 에 눌려 잘리지 않게 고정하고, 6개 요금제가 가로 스크롤 없이 들어가게 표를 촘촘히 한다 */
.pricing-section .pricing-tabs{flex: 0 0 auto;}
.pricing-section #planTable{min-width: 0;}
.pricing-section #planTable .plan-compare-table{font-size: 13px;}
.pricing-section #planTable .plan-compare-table th,
.pricing-section #planTable .plan-compare-table td{padding: .45rem .35rem; white-space: normal; word-break: keep-all;}
.pricing-section #planTable .plan-compare-table .feature-label{white-space: normal; word-break: keep-all; min-width: 96px;}
.pricing-section #planTable .plan-name{padding: .25rem .35rem; font-size: 13px;}

/* /login 모바일(992px 미만) — 구역마다 한 화면(fullPage 한 장)에 들어가게 줄인다. 넘치는 보조 요소는 뷰에서 d-none d-lg-* 로 감춘다 */
.login-feature-chips span{display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bs-light); font-size: 14px; font-weight: 600;}
.login-feature-chips span i{color: var(--bs-primary);}
.pricing-section .pricing-plan-list{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.pricing-section .pricing-plan-item{padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; background: #fff;}
.pricing-section .pricing-plan-name{font-size: 12px; font-weight: 600; color: var(--bs-secondary-color);}
.pricing-section .pricing-plan-fee{font-size: 17px; font-weight: 800; letter-spacing: -.5px;}
.pricing-section .pricing-plan-spec{font-size: 12px; color: var(--bs-secondary-color); word-break: keep-all;}
@media screen and (max-width: 992px){
	.login-section.fp-section h1{font-size: 32px; letter-spacing: -1px; line-height: 1.2;}
	.login-section.fp-section .fs-5{font-size: 16px !important;}
	.login-section.fp-section .btn-xl{font-size: 16px !important; padding: 10px 20px;}
	.login-section .login-section-eyebrow{margin-bottom: 8px;}
	.call-feature-note{margin-top: 8px;}
	.pricing-section .pricing-event{font-size: 13px; padding: 6px 12px;}
	.pricing-section .pricing-note:not(.pricing-note-keep){display: none;}
	.pricing-section .pricing-note-keep{margin-top: 8px; font-size: 12px; line-height: 1.5;}
	.pricing-section .pricing-block-title{font-size: 14px; margin-bottom: 6px;}
	.pricing-section .pricing-card{padding: 10px 12px;}
	.pricing-section .pricing-card-value{font-size: 16px;}
	.pricing-section .pricing-slider .slick-dots.wani-slider-dots,
	.security-section .security-slider .slick-dots.wani-slider-dots{margin-top: 6px;}
	.security-section .security-card{padding: 10px; gap: 8px; align-items: center;}
	.security-section .security-card i{width: 28px; height: 28px; font-size: 15px;}
	.security-section .security-card-title{margin: 0; font-size: 13px; line-height: 1.3; word-break: keep-all;}
	.security-section .security-tabs .nav-link, .pricing-section .security-tabs .nav-link{padding: 6px 12px; font-size: 13px;}
}
@media screen and (max-width: 992px){
	.pricing-section .pricing-card-label{font-size: 12px; word-break: keep-all;}
	.pricing-section .pricing-card-value del{display: block; font-size: 12px !important;}
}

/* 휴가 신청 내역 — 내가 결재할 수 있는 행은 눌러서 결재 모달을 연다.
   ('처리' 열을 없앤 대신 행 클릭이 진입점이라 커서로 알려 준다) */
#vacationEntryGrid .wgrid-row.vacation-actionable {
	cursor: pointer;
}

#vacationEntryGrid .wgrid-row.vacation-actionable:hover {
	background-color: var(--bs-primary-bg-subtle);
}