@charset "utf-8";

/* 헤더 */
header{transition:background-color 0.3s ease, box-shadow 0.3s ease; background-color:transparent;}

header.scrolled{background-color:#fff !important; box-shadow:0 4px 20px rgba(0, 0, 0, 0.05);}
.hamburgerCon{display:grid; grid-template-columns: repeat(11, 1fr); gap:32px 20px}
.hamburgerConList{aspect-ratio: 1 / 1; border:1px solid #ECEEF0}
.hamburgerMenu{border-top:1px solid #ECEEF0}

/*********************
** 메인
********************/
.mainBanner{background:linear-gradient(to bottom, #F3FCF1, #fff);}

.mainCio{max-width:600px;}

.searchBar input{border:2px solid #0EB04A;}

.searchIcon{right:28px; top:50%; transform:translate(0, -50%);}

.mainGrid{display:grid; grid-template-columns:repeat(5, 1fr); gap:24px 12px;}

.mainGrid a:hover .itemBox{box-shadow:0 0 16px #91EA40;}

.itemBox{box-shadow:0 0 8px #E0FBDD; transition:0.3s;}

.packageGrid{display:grid; grid-template-columns:repeat(3, 1fr);}

.packageTab{box-shadow:0 0 8px rgba(172, 201, 201, 0.25); border:2px solid transparent; cursor:pointer; transition:0.3s;}

.packageTab.active{border:2px solid #25943A;}

.packageTab.active .packageTabTit{color:#25943A;}

.packageTabIcon{top:32px; right:32px;}

.reviewBox{border:1px solid #ECEEF0;}

.reviewSwiper{overflow:visible !important;}

.reviewSwiper .swiper-wrapper{display:flex !important; flex-wrap:nowrap !important;}

.reviewSwiper .swiper-slide{width:100% !important; flex-shrink:1 !important; height:auto !important;}

.newsSwiper{overflow:visible !important;}

.newsSwiper .swiper-wrapper.newsGrid{display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:16px !important;}

.newsSwiper .swiper-slide{width:auto !important; height:auto !important;}

.mainMenuGrid{display:grid; grid-template-columns:repeat(6, 1fr);}

.newsBox{background:#F8FAFC;}

/*******************
** 검색 메인
*****************/
.searchMainImg{aspect-ratio:1 / 1;}

.searchMainImg_2{aspect-ratio:1 / 1; background:#F8FAFC;}

.searchMainGrid{display:grid; grid-template-columns:repeat(7, 1fr);}

/*******************
** 검색 카테고리
*****************/
.categorySwiper .swiper-slide{width:auto;}

.searchItemBox{border:2px solid transparent; box-shadow:0 0 8px #ECEEF0;}

.searchCategoryBox a.active .searchItemBox{border:2px solid #25943A; background-color:#F1FCF3;}

.searchCategoryBox a.active p{color:#25943A;}

.searchCategoryGrid{display:grid; grid-template-columns:repeat(7, 1fr);}

.searchCategoryGrid a{aspect-ratio:1 / 1; border:2px solid transparent; transition:0.3s;}

.searchCategoryGrid a.active{border:2px solid #25943A; background:#F1FCF3;}




/** 모달 **/
.modal-overlay{position:fixed; top:0; left:0; background-color:rgba(0, 0, 0, 0.6); z-index:9999; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;}

.modal-overlay.show{opacity:1; visibility:visible;}

.modal-content{max-width:768px; position:relative; transform:translateY(20px); transition:transform 0.3s ease;}

.modal-overlay.show .modal-content{transform:translateY(0);}

.modalCon{max-height:600px; overflow-y:auto;}

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

.bubble::before{content:""; position:absolute; top:24px; left:-8px; width:16px; height:16px; background-color:#F1FCF3; transform:rotate(45deg); border-radius:2px; z-index:-1;}

.checkbox{display:none;}

.custom-checkbox{background-image:url('/img/chkBoxOff.svg'); background-repeat:no-repeat; background-position:center; background-size:contain; flex-shrink:0;}

.checkbox:checked+.custom-checkbox{background-image:url('/img/chkBoxOn.svg');}

.modalFoot{box-shadow:0 -40px 40px rgba(255, 255, 255);}



/********************
** 사장님의 수다
********************/
.communityOpenModal{border:1px solid #E4E6E9;}

.communityBox{border-bottom:1px solid #E4E6E9;}

.communityRank{border:1px solid #E4E6E9; position:sticky; top:120px; align-self:flex-start;}

.replyBox{border-bottom:1px solid #E4E6E9;}

.replyBox:last-child{border-bottom:none;}


/*******************
** 사장님 뉴스
*****************/
.newsTabBox{padding:32px 32px 24px 32px; border:1px solid #E4E6E9; transition:padding 0.4s ease, border-color 0.4s ease;}

.newsTabBox.is-closed{padding:0; border-color:transparent;}

.newsTabBox p.tit,
.newsTabBox .scrollWrap{max-height:800px; opacity:1; overflow:hidden; transition:max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;}

.newsTabBox.is-closed p.tit,
.newsTabBox.is-closed .scrollWrap{max-height:0; opacity:0; margin-bottom:0 !important;}

.newsGrid_01,
.newsGrid_02{display:grid; grid-template-columns:repeat(11, 1fr);}

.newsTab{background:#F8FAFC; border:1px solid #E4E6E9;}

.newsTab.active{background:#DFF9E3; border:1px solid #34B34D; color:#34B34D;}

.page.active{background-color:#E4E6E9; color:#555A65;}

/*******************
** 사장님 뉴스 뷰
*****************/
.newsViewInner{max-width:840px;}

.newsWriteGrid{display:grid; grid-template-columns:repeat(4, 1fr);}

.newsChk{display:none;}

.newsWriteBtn{background:#fff; border:1px solid #E4E6E9; color:#A9AEB7; cursor:pointer;}

.newsWriteBtn .chkImg{display:none;}

.newsChk:checked+.newsWriteBtn{background:#DFF9E3; border:1px solid #34B34D; color:#34B34D;}

.newsChk:checked+.newsWriteBtn .chkImg{display:block;}


/*******************
** 사장님 강의
*****************/
.videoInner{width:80dvw; margin-left:auto; margin-right:auto;}

.studyGrid{display:grid; grid-template-columns:repeat(9, 110px);}

.studyTab{background:#F8FAFC; border:1px solid #E4E6E9; color:#A9AEB7;}

.studyTab.active{background:#DFF9E3; border:1px solid #34B34D; color:#34B34D;}

.videoGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 24px;}

.lookLabel{background:rgba(0, 0, 0, 0.5); top:12px; right:12px;}

.videoPlay{aspect-ratio:16 / 9;}

.moreVideo{position:sticky; top:120px; align-self:flex-start;}

.videoReviewBox{border-bottom:1px solid #E4E6E9;}

.videoReviewBox:last-child{border-bottom:none;}


/*******************
** 에러
*****************/
.errImg{margin-top:-80px;}


/*******************
** 비즈포인트
*****************/
.slot-wrap{display:inline-block; overflow:hidden; height:1em; vertical-align:top;}

.slot-inner{display:flex; flex-direction:column; transition:transform 4s cubic-bezier(0.2, 0.4, 0.8, 1);}

.num-item{display:block; height:1em; line-height:1em; text-align:center;}

.slot-text{display:inline-block; height:1em; line-height:1em; vertical-align:top;}

.pointTop{border:1px solid #ECEEF0;}

.pointGird{display:grid; grid-template-columns:repeat(5, 1fr);}

.pointInfoGrid{display:grid; grid-template-columns:repeat(4, 1fr);}


/*******************
** 관리자 유저리스트
*****************/
.ceoTable{overflow-x:auto;}

.ceoTable table{min-width:1200px;}

.ceoTable table th,
.ceoTable table td{border-right:1px solid #E4E6E9; word-break:break-all;}

.ceoTable table th:last-child,
.ceoTable table td:last-child{border-right:none;}

/*******************
** 관리자 포인트 출금내역
*****************/
.ceoPointTable{overflow-x:auto;}

.ceoPointTable table{min-width:900px;}

.ceoPointTable table th,
.ceoPointTable table td{border-right:1px solid #E4E6E9; word-break:break-all;}

.ceoPointTable table th:last-child,
.ceoPointTable table td:last-child{border-right:none;}

.pointDetailList_l{border-bottom:1px solid #E4E6E9; border-right:1px solid #E4E6E9;}

.pointDetailList_r{border-bottom:1px solid #E4E6E9;}

.detailTableBox{border-top:2px solid #333;}

.commuteTable th,
.commuteTable td{border-right:1px solid #E4E6E9;}

.commuteTable th:last-child,
.commuteTable td:last-child{border-right:none;}

.commuteTable tbody tr{cursor:pointer; transition:background-color 0.2s ease;}
.commuteTable tbody tr:hover{background-color:#f7f9fc;}

/*******************
** 디지털 명함
*****************/
.bizCard{box-shadow:0 0 8px #E4E6E9;}
.bizCradTit{letter-spacing:0.5em;}
.bizCardGrid{display:grid; grid-template-columns:repeat(4 , 1fr);}
.bizCardGrid a, .bizCardGrid > div{box-shadow:0 0 8px #E4E6E9;}


/*******************
** 랜딩페이지 공통사항
*****************/
.landingBox{background:linear-gradient(to bottom, #F1FCF3, #fff);}
.serviceBox{border:1px solid #E4E6E9; box-shadow:0 4px 20px rgba(0,0,0,0.05);}


/*******************
** 출퇴근
*****************/
/** 출근 메인 **/
.commuteBg{background:linear-gradient(to bottom, #F8FAFC, #F1FCF3);}
.minH100{min-height:100dvh;}
.commuteModalOverlay{position:fixed; top:0; left:0; width:100vw; height:100dvh; background:rgba(0, 0, 0, 0.5); z-index:9999; display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
.pickerWrapper{overflow:hidden;}
.pickerSelectionGuide{top:60px; left:0; pointer-events:none;}
.pickerSelectionGuide .line{border-top:1px solid #4AC962; border-bottom:1px solid #4AC962; box-sizing:border-box;}
.pickerColumn{overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.pickerColumn::-webkit-scrollbar{display:none;}
.pickerSpacer{flex-shrink:0;}
.pickerItem{scroll-snap-align:center; color:#D1D5DB; cursor:pointer; transition:color 0.15s ease, transform 0.15s ease, font-weight 0.15s ease; user-select:none;}
.pickerItem.active{color:#25943A !important; font-weight:700 !important;}
.timeHighlight{color:#25943A !important; transition:color 0.3s ease;}

.customRadio{width:24px; height:24px; border-radius:50%; border:1.5px solid #E5E7EB; box-sizing:border-box; display:inline-block; position:relative; transition:all 0.2s ease;}
.reasonRadio:checked + .customRadio{border-color:#25943A; background-color:#25943A;}
.reasonRadio:checked + .customRadio::after{content:''; position:absolute; top:5px; left:8px; width:5px; height:9px; border:solid #ffffff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.goToWorkModalBox{overflow-x:auto;}


/** 퇴근 메인 **/
.commuteEndBg{background:linear-gradient(to bottom, #F8FAFC, #E8F1F7);}

/** 출퇴근 푸터 **/
.commuteFooter{bottom:0; left:0; z-index:99; border-top:1px solid #ECEEF0; display:grid; grid-template-columns:repeat(4 , 1fr);}
.commuteFootAlt{top:-60px; filter:drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));}
.commuteFootAlt::after{content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:20px; background-color:#fff; z-index:-1;}

/*******************
** 출근부 달력 (commuteList)
*****************/
.commuteCalendarCard{box-shadow:0 0 8px rgba(0, 0, 0, 0.05); border-radius:24px 24px 0 0;}
.calendarGrid{display:grid; grid-template-columns:repeat(7, 1fr);}
.calDayCell.is-sun .calDateNum,
.calDayCell.is-sat .calDateNum{color:#FF5757;}
.calDayCell.is-other-month{opacity:0.25;}
.commuteBadge:hover{opacity:0.85;}
/* 1. 정상 출근 (초록색) */
.commuteBadge.bg-checkin{background-color:#25943A; color:#ffffff;}
/* 2. 퇴근 (어두운 남색) */
.commuteBadge.bg-checkout{background-color:#5F73A3; color:#ffffff;}
/* 3. 지각 / 변동 시간 (주황색) */
.commuteBadge.bg-late{background-color:#F99E07; color:#ffffff;}
/* 4. 반차/휴가 (밝은 하늘색) */
.commuteBadge.bg-leave{background-color:#2BAAFF; color:#ffffff;}
/* 5. 수정 필요 (코랄 레드) */
.commuteBadge.bg-modify{background-color:#FF5757; color:#ffffff;}
.leaveCalendarGrid{display:grid; grid-template-columns:repeat(7, 1fr);}
.leaveDayCell{position:relative; height:32px; display:flex; align-items:center; justify-content:center;}
.leaveDayNum{position:relative; z-index:2; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#1E232A; border-radius:9999px; cursor:pointer; user-select:none; transition:background 0.15s ease, color 0.15s ease;}
.leaveDayCell.is-other-month .leaveDayNum{color:#A4ACB9;}
/* 단일 날짜 선택 (둥근 녹색 원) */
.leaveDayCell.is-selected-single .leaveDayNum{background:#25943A; color:#FFFFFF !important;}
/* 범위 선택 - 시작일 */
.leaveDayCell.is-range-start{background:#25943A; border-top-left-radius:20px; border-bottom-left-radius:20px;}
.leaveDayCell.is-range-start .leaveDayNum{color:#FFFFFF !important;}
/* 범위 선택 - 중간일 */
.leaveDayCell.is-range-mid{background:#25943A;}
.leaveDayCell.is-range-mid .leaveDayNum{color:#FFFFFF !important;}
/* 범위 선택 - 종료일 */
.leaveDayCell.is-range-end{background:#25943A; border-top-right-radius:20px; border-bottom-right-radius:20px;}
.leaveDayCell.is-range-end .leaveDayNum{color:#FFFFFF !important;}

/*******************
** 명세서 디테일
*****************/
.salaryDetailBox{border-radius:24px 24px 0 0;}


/*******************
** 출퇴근 관리지
*****************/
.ceoInner{width:80dvw; margin-left:auto; margin-right:auto;}
.ceoCommuteTop{border:1px solid #ECEEF0;}
.commuteTabList, .commutePayTabList{display:grid; grid-template-columns:repeat(4, 130px);}
.commuteBtn, .commutePayBtn{background:#F8FAFC; border:1px solid #E4E6E9; color:#A9AEB7; cursor:pointer;}
.commuteBtn.active, .commutePayBtn.active{background:#DFF9E3; border:1px solid #34B34D; color:#34B34D;}
.commuteBtn img, .commutePayBtn img{display:none;}
.commuteBtn.active img, .commutePayBtn.active img{display:block;}

.weekWorkList{display:grid; grid-template-columns:repeat(7, 1fr); border-top:1px solid #E4E6E9;}
.weekWorkList:last-child{border-bottom:1px solid #E4E6E9;}
.weekWorkList div{border-left:1px solid #E4E6E9;}
.weekWorkList div:last-child{border-right:1px solid #E4E6E9;}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:0; cursor:pointer; position:absolute; right:0; top:0; width:100%; height:100%;}


.workerViewBox{border-top:2px solid #A9AEB7;}
.workerViewBoxList{border-bottom:1px solid #E4E6E9;}
.workerViewBoxList:last-child{border-bottom:none;}
.inputText{border:1px solid #E4E6E9;}

.ceoTableBox{overflow-x:auto;}
.ceoTable{min-width:950px;}

.ceoSalary{border-top:2px solid #A9AEB7;}
.ceoSalaryList{border-bottom:1px solid #E4E6E9;}
.ceoSalary2{border-top:1px solid #E4E6E9;}