@charset "utf-8";


/* Default */
* {margin: 0; padding: 0;}
body {font-family: 'NotoSansKR', sans-serif; letter-spacing: -0.01em;}
header, footer, main, section, article, aside, nav, figure, figcaption {display: block;}
address {font-style: normal;}
fieldset, hr {display: block; margin: 0; padding: 0; border: 0 none;}
img {max-width: 100%; font-size: 0; border: 0; vertical-align: middle;}

table {width: 100%; border-spacing: 0; table-layout: fixed; word-break: break-all; border-collapse: collapse;}

input, select {max-width: 100%; vertical-align: middle;}
input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit;}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; right: 0; width: 40px; height: 100%; opacity: 0;}

select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}

a {text-decoration: none;}
input[type='submit'] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
button {text-decoration: none; background: none; border: 0; outline: 0; white-space: nowrap; cursor: pointer; letter-spacing: -0.04em;}

.hidden {display: none !important;}
.blind {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}


/* html, body */
html.smooth {scroll-behavior: smooth;}
body.mask {overflow: hidden;}
body.mask:after {display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 30%); z-index: 50;}


/* select, input */
.input,
.select,
.textarea {position: relative; padding: 8px 14px; width: 340px; max-width: 100%; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 4px; letter-spacing: -0.02em; box-sizing: border-box; outline: none !important;}
.input.full,
.select.full,
.textarea.full {width: 100% !important;}
.input::placeholder,
.textarea::placeholder {color: #a5a5ba;}
.input:focus,
.select:focus,
.textarea:focus {border-color: #4f31d4;}
.select option[value=""][disabled] {display: none;}
.textarea {height: 83px; resize: none;}
.input:disabled,
.input.disabled {background-color: #f4f4fa !important;}
.input.error {border-color: #ee4f4f;}

.err-msg {display: block; position: absolute; top: 100%; left: 0; width: 100%; font-size: 10px; color: #ee4f4f; font-weight: 400; text-align: left;}


/* checkbox - custom */
.check-wrap {display: flex; gap: 20px;}

.check-box {position: relative; min-width: 22px; min-height: 22px;}
.check-box input {display: none; width: 22px !important; min-height: 22px !important;}
.check-box input + label {display: inline-block; padding: 0 0 0 22px !important; min-height: 22px; line-height: 22px; font-size: 14px; background-size: 22px 22px !important; cursor: pointer;}
.check-text input + label {padding-left: 32px !important;}

.check-box input[type="checkbox"] + label {background: url(../img/check_none.png) 0 50% no-repeat;}
.check-box input[type="checkbox"]:checked + label {background: url(../img/check_on.png) 0 50% no-repeat;}

.check-box input[type="radio"] + label {background: url(../img/radio_none.png) 0 50% no-repeat;}
.check-box input[type="radio"]:checked + label {background: url(../img/radio_on.png) 0 50% no-repeat;}


/* select - custom */
.select-wrap {display: flex; gap: 20px;}

.custom-select {position: relative; width: 240px; max-width: 100%;}
.custom-select.full {width: 100% !important;}
.custom-select select {display: none;}
.custom-select .select-selected,
.custom-select .select-option button {padding: 8px 14px; width: 100%; line-height: 22px; font-size: 14px; color: #343445; cursor: pointer; user-select: none; text-align: left; box-sizing: border-box;}

.custom-select .select-selected {position: relative; padding-right: 30px; color: #969bb5; background-color: #fff; border: 1px solid #d9dceb; border-radius: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.custom-select.selected .select-selected {color: #3a3c46;}

.custom-select .select-selected:after {position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 40px; background: #fff url(../img/select_default.png) center center no-repeat;}

.custom-select .select-selected.active {color: #4f31d4; border-color: #4f31d4; z-index: 50;}
.custom-select .select-selected.active:after {background-image: url(../img/select_onclick.png);}

.custom-select .select-option {position: absolute; top: 100%; left: 0; right: 0; padding: 8px 6px; max-height: 200px; background-color: #fff; border: 0; border-radius: 6px; box-shadow: 0px 4px 6px 0px rgba(00, 0, 0, 0.1); z-index: 30; box-sizing: border-box; overflow-y: auto;}
.custom-select .select-hide {display: none;}
.custom-select .select-option button {margin: 2px 0; padding: 4px 8px;}
.custom-select .select-option button:hover {color: #4f31d4; background-color: #ebebff; border-radius: 6px;}

.custom-select.disabled .select-selected {color: #343445; background-color: #f4f4fa; border-color: #d9dceb;}
.custom-select.disabled .select-selected:after {display: none;}
.custom-select.disabled .select-option {display: none;}


/* form */
.form {position: relative; width: 100%;}
.form .input,
.form .select,
.form .textarea {padding: 13px 14px;}
.form .textarea {padding: 14px; height: 220px;}

.form .custom-select .select-selected {padding: 13px 40px 13px 14px;}
.form .custom-select .select-selected:after {height: 50px;}
.form .custom-select .select-option {padding: 5px 6px;}
.form .custom-select .select-option button {padding: 4px 8px; font-size: 12px;}

.form .row {display: flex; gap: 20px; align-items: center; position: relative; margin-top: 10px; width: 100%;}
.form .row:first-child {margin-top: 0 !important;}

.form .row-btn {width: calc(100% - 90px);}
.form .row-btn .button {width: 80px;}
.form .row-check {gap: 10px 20px;}
.form .row-check .input {width: calc(100% - 140px);}

.form .input.icon-clock {padding-right: 40px; background: #fff url(../img/icon_clock.png) 98.5% center no-repeat;}
.form .input.icon-clock:focus {background-image: url(../img/icon_clock_on.png);}

.form .input.icon-date {padding-right: 40px; background: #fff url(../img/icon_date.png) 98.5% center no-repeat;}

.form .check-wrap {align-items: center; min-height: 50px;}

.form .button {padding: 15px 10px;}


/* icon */
.icon {display: inline-block; position: relative; vertical-align: top;}
.icon:before {display: block; content: ''; width: 20px; height: 20px; background-position: center center; background-repeat: no-repeat;}

.icon-lock:before {background-image: url(../img/icon_lock.png);}


/* button */
.button-wrap {display: flex; gap: 20px;}
/* 필터 앞 작은 라벨 - 그 칸이 '무엇' 기준인지 밝힌다(예: 날짜가 근무일인지 변경일인지). */
.filter-label {flex: none; font-size: 13px; color: #4e4e69; font-weight: 500; white-space: nowrap;}

.button {display: block; position: relative; padding: 10px; width: 120px; line-height: 20px; font-size: 14px; color: #4f31d4; font-weight: 400; background-color: #ebebff; border: 0; border-radius: 6px; text-align: center; box-sizing: border-box; letter-spacing: -0.04em; overflow: hidden;}
.button.full {width: 100% !important;}
.button.color {color: #fff; background-color: #4f31d4;}
.button.gray {color: #fff; background-color: #a5a5ba;}
.button.color-border {padding: 9px; color: #4f31d4; background-color: #fff; border: 1px solid #4f31d4;}


/* button icon */
.btn-icon {display: flex; gap: 4px; align-items: center; position: relative; font-size: 12px; color: #4e4e69; font-weight: 500;}
.btn-icon:before {display: block; content: ''; width: 34px; height: 34px; background-position: center center; background-repeat: no-repeat;}

.btn-public:before {background-image: url(../img/icon_public.png);}
.btn-private:before {background-image: url(../img/icon_private.png);}
.btn-delete:before {background-image: url(../img/icon_delete.png);}
.btn-edit:before {background-image: url(../img/icon_edit.png);}
.btn-admin:before {background-image: url(../img/icon_admin.png);}
.btn-close:before {background-image: url(../img/icon_close.png);}
.btn-more:before {background-image: url(../img/icon_more.png);}


/* main */
.main-flex {padding-left: 240px;}


/* sidebar */
.sidebar {position: fixed; top: 0; left: 0; padding: 90px 0 253px; width: 240px; height: 100%; background-color: #1d1d26; box-sizing: border-box; z-index: 100;}

.sidebar .nav::-webkit-scrollbar {width: 14px; height: 12px;}
.sidebar .nav::-webkit-scrollbar-thumb {background-color: #c0c2d0; border: 4px solid transparent; border-radius: 7px; background-clip: padding-box ;}
.sidebar .nav::-webkit-scrollbar-track {background-color: #1d1d26;}

.sidebar ul {list-style: none;}
.sidebar a {color: inherit;}

.sidebar .logo {display: flex; align-items: center; position: absolute; top: 10px; left: 0; padding: 0 20px; width: 100%; height: 50px; box-sizing: border-box;}
/* 자식 선택자다 — 말풍선(.alarm-pop)이 .logo 안에 있어서, 후손 선택자로 두면
   말풍선 안 '바로 가기' 링크에도 로고 이미지와 패딩이 얹힌다(2026-09-10 실측). */
.sidebar .logo > a {padding: 6px;}
/* 145x30 — 디자인에서 받은 LNB_logo.png 의 원본 크기 그대로다(2026-09-10).
   내가 SVG 에서 뽑아 쓰던 값(116x23 → 148x29)을 버리고 받은 파일을 그대로 쓴다.
   사이드바 안쪽 폭 200px 에서 종(32px)과 간격을 빼면 156px 까지 들어가므로 여유가 있다. */
.sidebar .logo > a:before {display: block; content: ''; width: 145px; height: 30px; background: url(../img/logo_uniport.png?v=3) center center no-repeat; background-size: 145px 30px;}


/* 섹션 헤더 — 아코디언 클릭 영역, 화살표 포함 */
.sidebar .section {display: flex; align-items: center; justify-content: space-between; margin: 10px 10px 4px; padding: 9px 12px; font-size: 12px; color: #b8b8d4; font-weight: 700; letter-spacing: 0.4px; background: #252538; border-radius: 6px; cursor: pointer; user-select: none;}
/* 화살표 — 닫힌 상태(>) */
.sidebar .section::after {content: ''; display: block; flex-shrink: 0; width: 6px; height: 6px; border-right: 1.5px solid #b8b8d4; border-bottom: 1.5px solid #b8b8d4; transform: rotate(-45deg); transition: transform 0.25s ease; margin-right: 2px;}
/* 화살표 — 열린 상태(▼) */
.sidebar .section.open::after {transform: rotate(45deg) translateY(-2px);}
/* 사이드바 메뉴 — 기본 접힘 */
.sidebar .sidebar-menu {max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
/* 사이드바 메뉴 — 펼쳐진 상태 */
.sidebar .sidebar-menu.open {max-height: 600px;}

.sidebar .nav {padding: 0 10px; max-height: 100%; box-sizing: border-box; overflow-y: auto;}
.sidebar .nav li:first-child {margin-top: 0;}
.sidebar .nav li {margin-top: 6px;}
.sidebar .nav li a {display: flex; align-items: center; position: relative; padding: 8px 10px 8px 48px; height: 44px; font-size: 14px; color: #a5a5ba; font-weight: 500; border-radius: 6px; box-sizing: border-box;}

.sidebar .nav li a:before {display: block; content: ''; position: absolute; top: 8px; left: 10px; width: 28px; height: 28px; background-position: center center; background-repeat: no-repeat;}
.sidebar .nav li a.icon-dashboard:before {background-image: url(../img/nav_home.png);}
.sidebar .nav li a.icon-notice:before {background-image: url(../img/nav_notice.png);}
.sidebar .nav li a.icon-calendar:before {background-image: url(../img/nav_calendar.png);}
.sidebar .nav li a.icon-vacation-history:before {background-image: url(../img/nav_vacation_history.png);}
.sidebar .nav li a.icon-schedule:before {background-image: url(../img/nav_schedule.png);}
.sidebar .nav li a.icon-conference:before {background-image: url(../img/nav_conference.png);}
.sidebar .nav li a.icon-qna:before {background-image: url(../img/nav_qna.png);}
.sidebar .nav li a.icon-buy:before {background-image: url(../img/nav_buy.png);}

.sidebar .nav li a.icon-paycheck:before {background-image: url(../img/nav_paycheck.png);}
.sidebar .nav li a.icon-paycheck-history:before {background-image: url(../img/nav_paycheck_history.png);}
.sidebar .nav li a.icon-vacation-approve:before {background-image: url(../img/nav_vacation_approve.png);}
.sidebar .nav li a.icon-vacation-status:before {background-image: url(../img/nav_vacation_status.png);}
.sidebar .nav li a.icon-vacation:before {background-image: url(../img/nav_vacation.png);}
.sidebar .nav li a.icon-work:before {background-image: url(../img/nav_work.png);}
.sidebar .nav li a.icon-member:before {background-image: url(../img/nav_member.png);}
.sidebar .nav li a.icon-team:before {background-image: url(../img/nav_team.png);}
.sidebar .nav li a.icon-work-time:before {background-image: url(../img/nav_work_time.png);}
/* 알림·급여명세서 — 아이콘이 없어 자리가 비어 있었다(2026-09-09 추가) */
.sidebar .nav li a.icon-alarm:before {background-image: url(../img/nav_alarm.png);}
.sidebar .nav li a.icon-payroll:before {background-image: url(../img/nav_payroll.png);}

.sidebar .nav li a:hover {background-color: #343445;}
.sidebar .nav li.active a {color: #fff; background-color: #4f31d4;;}
.sidebar .nav li.active a.icon-dashboard:before {background-image: url(../img/nav_home_onclick.png);}
.sidebar .nav li.active a.icon-notice:before {background-image: url(../img/nav_notice_onclick.png);}
.sidebar .nav li.active a.icon-calendar:before {background-image: url(../img/nav_calendar_onclick.png);}
.sidebar .nav li.active a.icon-vacation-history:before {background-image: url(../img/nav_vacation_history_onclick.png);}
.sidebar .nav li.active a.icon-schedule:before {background-image: url(../img/nav_schedule_onclick.png);}
.sidebar .nav li.active a.icon-conference:before {background-image: url(../img/nav_conference_onclick.png);}
.sidebar .nav li.active a.icon-qna:before {background-image: url(../img/nav_qna_onclick.png);}
.sidebar .nav li.active a.icon-alarm:before {background-image: url(../img/nav_alarm_onclick.png);}
.sidebar .nav li.active a.icon-payroll:before {background-image: url(../img/nav_payroll_onclick.png);}
.sidebar .nav li.active a.icon-buy:before {background-image: url(../img/nav_buy_onclick.png);}
.sidebar .nav li.active a.icon-paycheck:before {background-image: url(../img/nav_paycheck_onclick.png);}
.sidebar .nav li.active a.icon-paycheck-history:before {background-image: url(../img/nav_paycheck_history_onclick.png);}
.sidebar .nav li.active a.icon-vacation-approve:before {background-image: url(../img/nav_vacation_approve_onclick.png);}
.sidebar .nav li.active a.icon-vacation-status:before {background-image: url(../img/nav_vacation_status_onclick.png);}
.sidebar .nav li.active a.icon-vacation:before {background-image: url(../img/nav_vacation_onclick.png);}
.sidebar .nav li.active a.icon-work:before {background-image: url(../img/nav_work_onclick.png);}
.sidebar .nav li.active a.icon-member:before {background-image: url(../img/nav_member_onclick.png);}
.sidebar .nav li.active a.icon-team:before {background-image: url(../img/nav_team_onclick.png);}
.sidebar .nav li.active a.icon-work-time:before {background-image: url(../img/nav_work_time_onclick.png);}

/* ── 추가 메뉴 아이콘 (SVG data URI) ── */
.sidebar .nav li a.icon-nfc:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M19%2011%20C22%2013%2022%2015%2019%2017%22%2F%3E%3Cpath%20d%3D%22M21.5%208%20C26.5%2011.5%2026.5%2016.5%2021.5%2020%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2214%22%20x2%3D%2212%22%20y2%3D%2214%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2211%22%20x2%3D%2212%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2217%22%20x2%3D%229%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-nfc:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M19%2011%20C22%2013%2022%2015%2019%2017%22%2F%3E%3Cpath%20d%3D%22M21.5%208%20C26.5%2011.5%2026.5%2016.5%2021.5%2020%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2214%22%20x2%3D%2212%22%20y2%3D%2214%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2211%22%20x2%3D%2212%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2217%22%20x2%3D%229%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li a.icon-permission:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203%20L22%207%20V14%20C22%2019%2018%2022.5%2014%2024.5%20C10%2022.5%206%2019%206%2014%20V7%20Z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2216%22%20x2%3D%2214%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2211.5%22%20y1%3D%2220%22%20x2%3D%2216.5%22%20y2%3D%2220%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-permission:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203%20L22%207%20V14%20C22%2019%2018%2022.5%2014%2024.5%20C10%2022.5%206%2019%206%2014%20V7%20Z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2216%22%20x2%3D%2214%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2211.5%22%20y1%3D%2220%22%20x2%3D%2216.5%22%20y2%3D%2220%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li a.icon-work-schedule:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2211%22%20x2%3D%2224%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%225%22%20x2%3D%2210%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%2218%22%20y1%3D%225%22%20x2%3D%2218%22%20y2%3D%2211%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2218.5%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2218.5%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-work-schedule:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2211%22%20x2%3D%2224%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%225%22%20x2%3D%2210%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%2218%22%20y1%3D%225%22%20x2%3D%2218%22%20y2%3D%2211%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2218.5%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2218.5%22%20width%3D%223%22%20height%3D%222.5%22%20rx%3D%220.5%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li a.icon-project:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%226%22%20height%3D%2218%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%225%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%225%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-project:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%226%22%20height%3D%2218%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%225%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%225%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li a.icon-card:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2222%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%2225%22%20y2%3D%2212%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2215.5%22%20width%3D%225%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2217%22%20x2%3D%2221%22%20y2%3D%2217%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2219.5%22%20x2%3D%2218%22%20y2%3D%2219.5%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-card:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2222%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%2225%22%20y2%3D%2212%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2215.5%22%20width%3D%225%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2217%22%20x2%3D%2221%22%20y2%3D%2217%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2219.5%22%20x2%3D%2218%22%20y2%3D%2219.5%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li a.icon-chart-month:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2223%22%20x2%3D%2224%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%224%22%20x2%3D%224%22%20y2%3D%2223%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2215%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%2213%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%225%22%20width%3D%224%22%20height%3D%2218%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-chart-month:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2223%22%20x2%3D%2224%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%224%22%20x2%3D%224%22%20y2%3D%2223%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2215%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%2213%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%225%22%20width%3D%224%22%20height%3D%2218%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li a.icon-chart-daily:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2223%22%20x2%3D%2224%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%224%22%20x2%3D%224%22%20y2%3D%2223%22%2F%3E%3Cpolyline%20points%3D%224%2C19%208%2C13%2013%2C16%2018%2C9%2024%2C12%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2213%22%20r%3D%221.8%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2216%22%20r%3D%221.8%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%229%22%20r%3D%221.8%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");}
.sidebar .nav li.active a.icon-chart-daily:before {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2223%22%20x2%3D%2224%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%224%22%20x2%3D%224%22%20y2%3D%2223%22%2F%3E%3Cpolyline%20points%3D%224%2C19%208%2C13%2013%2C16%2018%2C9%2024%2C12%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2213%22%20r%3D%221.8%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2216%22%20r%3D%221.8%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%229%22%20r%3D%221.8%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");}

.sidebar .nav li.unread a:after {display: block; content: ''; margin: -10px 0 0 2px; width: 6px; height: 6px; background-color: #ee4f4f; border-radius: 50%;}

.sidebar .nav li .badge {position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 0 7px; min-width: 20px; line-height: 20px; font-size: 12px; color: #fff; font-weight: 500; background-color: #4e4e69; border-radius: 10px; text-align: center; box-sizing: border-box;}
.sidebar .nav li.active .badge {color: #4f31d4; background-color: #fff;}



.sidebar .clean {position: absolute; bottom: 106px; left: 0; padding: 40px 20px; width: 100%;  height: 147px; box-sizing: border-box;}
.sidebar .clean .subject {display: flex; gap: 6px; position: relative; font-size: 12px; color: #a5a5ba; font-weight: 500;}
.sidebar .clean .subject:after {display: block; content: ''; width: 18px; height: 18px; background: url(../img/icon_clean.png) center center no-repeat;}
.sidebar .clean .week {display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 14px; height: 40px; background-color: #343445; border: 1px solid #4e4e69; border-radius: 6px; box-sizing: border-box;}
.sidebar .clean .week span {font-size: 10px; color: #a5a5ba; font-weight: 400;}
.sidebar .clean .week .name {color: #fff; font-weight: 500;}

.sidebar .user {position: absolute; bottom: 0; left: 0; padding: 40px 20px 20px; width: 100%; border-top: 1px solid #343445; box-sizing: border-box;}
.sidebar .user-profile {display: flex; gap: 10px; align-items: center; position: relative; padding-right: 39px; height: 46px;}
.sidebar .user .img {width: 34px; height: 34px; border-radius: 50%; overflow: hidden;}
.sidebar .user .img img {vertical-align: top;width: 100%;height: 100%;}
.sidebar .user .info {display: flex; flex-wrap: wrap; width: calc(100% - 44px);}
.sidebar .user .info .name {padding-bottom: 1px; line-height: 14px; font-size: 12px; color: #fff; border-bottom: 1px solid #fff;}
.sidebar .user .info .mail {display: block; margin-top: 3px; width: 100%; line-height: 14px; font-size: 10px; color: #a5a5ba; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.sidebar .user .btn-logout {display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%);  width: 34px; height: 34px;}
.sidebar .user .btn-logout:before {display: block; content: ''; width: 100%; height: 100%; background: url(../img/btn_logout.png) center center no-repeat;}


/* container */
.container {position: relative; padding: 120px 40px 80px; min-height: 100vh; min-height: 100dvh; background-color: #fff; box-sizing: border-box;}
.container.pd-r440 {padding-right: 440px;}


/* top */
.top {display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; padding: 20px 40px 20px 280px; width: 100%; height: 80px; background-color: #fff; border-bottom: 1px solid #e3e3e9; box-sizing: border-box; z-index: 50;}
.top ul {list-style: none;}
.top a {color: inherit;}
.top .left,
.top .right {display: flex; gap: 20px; align-items: center;}
.top h2.title {font-size: 20px; color: #343445; font-weight: 500;}


/* cont */
.cont {position: relative;}
.cont.w1400 {width: 1400px;}

.cont h3.title {margin: 40px 0 20px; font-size: 18px; color: #343445; font-weight: 500;}
.cont h3.title:first-child {margin-top: 0;}


/* search */
.search {position: relative;}
.search .input {padding-right: 40px;}
.search .btn-search {position: absolute; top: 0; right: 0; z-index: 5;}
.search .btn-search:before {display: block; content: ''; width: 40px; height: 40px; background: url(../img/btn_search.png) center center no-repeat;}


/* state */
.state-wrap {display: flex; gap: 10px; position: relative;}
.state .item {display: block; padding: 2px 5px; width: 60px; height: 26px; line-height: 20px; font-size: 12px; color: #4e4e69; font-weight: 500; background-color: #f4f4fa; border: 1px solid #a5a5ba; border-radius: 13px; text-align: center; box-sizing: border-box;}
.state .item.end {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.state .text {font-size: 14px;}


/* file */
.file-box .info .name {font-size: 14px; color: #4e4e69; font-weight: 500;}
.file-box .info .size {font-size: 14px; color: #a5a5ba; font-weight: 400;}

.file {position: relative; width: 100%;}
.file .file-box {position: relative; padding: 8px 58px 8px 14px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file .file-box .info {display: flex; gap: 10px;}
.file .file-box .info .name {display: block; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 80px); overflow: hidden;}
.file .file-box .info .size {display: block; min-width: 50px; max-width: 75px;}
.file .file-box .btn-file-down {position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background-image: url(../img/file_download.png);}


.file-add {display: flex; gap: 20px; position: relative; margin-top: 10px; width: 100%;}
.file-add .btn-file {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; padding: 20px 10px; width: 80px; height: 80px; font-size: 10px; color: #a5a5ba; background-color: #f4f4fa; border: 1px dashed #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file-add .btn-file:before {display: block; content: ''; width: 18px; height: 18px; background: url(../img/file_add.png) center center no-repeat;}
.file-add .btn-file:hover {color: #4f31d4; border-color: #9797ff;}
.file-add .btn-file:hover::before {background-image: url(../img/file_add_hover.png);}
.file-add .btn-file span {width: 100%;}

.file-add .file-box {display: flex; align-items: center; position: relative; padding: 10px 58px 10px 14px; width: 257px; height: 80px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file-add .file-box .info {position: relative; padding-left: 44px; width: 100%; box-sizing: border-box;}
.file-add .file-box .info:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 34px; height: 34px; background: url(../img/file_document.png) center center no-repeat;}
.file-add .file-box .info .name {display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.file-add .file-box .info .size {font-size: 12px;}

.file-add .file-box .btn-file-delete {position: absolute; top: 50%; right: 14px; transform: translateY(-50%);}
.file-add .file-box .btn-file-delete:before {background-image: url(../img/file_delete.png);}


/* etc */
.mark:after {display: inline-block; content: '*'; font-size: inherit; color: #ff4e4e; font-weight: 500; vertical-align: top;}

.selected-wrap {display: flex; gap: 10px 30px;}
.selected-wrap .item {display: flex; gap: 0 4px;}
.selected-wrap .btn-select-delete:before {margin-top: 1px; width: 20px; height: 20px; background-image: url(../img/icon_delete_x.png);}

.clean-out {position: relative; font-size: 16px; color: #343445; font-weight: 500;}
.clean-out .item {display: flex; gap: 0 10px; margin-top: 20px;}
.clean-out .item:first-child {margin-top: 0;}
.clean-out .btn-out-delete:before {margin-top: 1px; width: 20px; height: 20px; background-image: url(../img/icon_delete_x.png);}

.status-label {display: inline-block; padding: 5px 18px; line-height: 14px; font-size: 12px; font-weight: 500; background-color: #fff; border: 1px solid #000; border-radius: 30px; box-sizing: border-box;}
.status-label.color {color: #4f31d4; background-color: #dedeff; border-color: #9797ff;}
.status-label.green {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.status-label.gray {color: #4e4e69; background-color: #f4f4fa; border-color: #a5a5ba;}


/* profile */
.profile-img {display: inline-block; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; vertical-align: top; overflow: hidden;}
/* object-fit 이 없으면 원본 비율과 상관없이 늘려 채운다(기본값 fill). 올라오는 사진은
   1203x902 처럼 가로가 긴 것도 있어 원 안에서 얼굴이 눌려 보였다. cover 는 비율을 지키고
   넘치는 쪽을 잘라낸다 — 24px 에서는 티가 안 나지만 56~80px 에서 확연히 다르다. */
.profile-img img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}

.profile-text {font-size: 14px; color: #4e4e69;}

.profile {display: flex; gap: 0 20px; align-items: center; align-content: center; flex-wrap: wrap; position: relative; padding-left: 100px; height: 80px;}
.profile .profile-img {position: absolute; top: 0; left: 0; width: 80px; height: 80px;}
.profile .button-wrap {gap: 10px; margin-bottom: 10px; width: 100%;}
.profile .button {padding: 5px; width: 60px;}


/* people */
.people ul {display: flex; align-items: center; list-style: none;}
.people ul li {margin-left: -6px;}
.people ul li:first-child {margin-left: 0;}
ul .more {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 10px; color: #fff; font-weight: 500; background-color: #9797ff;}
/* 얼굴만 겹쳐 놓는 기본 .people 과 달리 이름을 같이 적는다. 겹침(-6px)을 풀고 간격을 준다 */
.people-named ul {flex-wrap: wrap; gap: 6px 14px;}
.people-named ul li {display: inline-flex; align-items: center; gap: 6px; margin-left: 0;}
.people-named .people-name {font-size: 13px; color: #4e4e69; white-space: nowrap;}


/* head */
.head {display: flex; justify-content: space-between; position: relative; margin-bottom: 20px;}
.head .left,
.head .right {display: flex; gap: 20px; align-items: center;}

.work {display: flex; align-items: center;}
.work span {display: flex; align-items: center; font-size: 14px; color: #a5a5ba;}
.work span:after {display: block; content: ''; margin: 0 20px; width: 1px; height: 16px; background-color: #e3e3e9;}
.work span:last-child::after {display: none;}
.work span em {margin: 0 14px 0 4px; color: #4e4e69; font-style: normal;}
.work .icon:before {width: 34px; height: 34px;}
.work .icon_shift:before {background-image: url(../img/icon_shift.png);}
.work .icon_hours:before {background-image: url(../img/icon_hours.png);}

.head .total {font-size: 16px; color: #343445; font-weight: 400;}
.head .total em {color: #4f31d4; font-style: normal;}


/* table */
.table {position: relative;}
.table table {max-width: initial; text-align: left;}
.table caption {display: none;}

.table .tb-text {display: inline-block; padding: 10px 0; vertical-align: top;}
.table .tb-sub-text {font-size: 12px; color: #a5a5ba; font-weight: 400;}

.table .tr {display: flex; gap: 20px;}
.table .col {flex: 1;}


/* table list */
.table-list {border: 1px solid #e3e3e9; border-radius: 6px;}
.table-list a {position: relative; color: inherit;}

.table-list tr:hover {background-color: #f4f4fa;}
.table-list th {font-weight: 500; background-color: #f4f4fa;}
.table-list th,
.table-list td {padding: 8px 20px; height: 60px; line-height: 22px; font-size: 14px; border-bottom: 1px solid #e3e3e9; box-sizing: border-box;}
.table-list th {color: #4e4e69; font-weight: 500;}
/* 헤더를 한 줄로 묶는다. 두 줄이 되면 머리 높이가 늘어 표가 들쭉날쭉해 보인다.
   칼럼 폭을 그 글자에 맞춰 준 표에서만 쓴다 - 안 그러면 글자가 칸을 밀어낸다. */
.table-list th.th-nowrap {white-space: nowrap;}
.table-list tr:first-child th:first-child {border-radius: 0 0 0 6px;}
.table-list td {color: #343445; font-weight: 400;}
.table-list tr:last-child td {border-bottom: 0;}

.table-list thead tr:first-child th:first-child {border-radius: 6px 0 0 0;}
.table-list thead tr:first-child th:last-child {border-radius: 0 6px 0 0;}
.table-list tbody tr:last-child td:first-child {border-radius: 0 0 0 6px;}
.table-list tbody tr:last-child td:last-child {border-radius: 0 0 6px 0;}

.table-list .subject a {display: inline-block; position: relative; max-width: calc(100% - 40px); vertical-align: top; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.table-list .state,
.table-list .control {text-align: center;}
.table-list .blank {height: 117px; font-size: 20px; color: #a5a5ba; font-weight: 500; background-color: #fff !important; text-align: center;}
.table-list .link a {margin-top: 1px;}
.table-list .link a:after {display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #343445;}
.table-list .link .profile-img + a {margin-left: 5px;}

.table-list .button-wrap,
.table-list .state-wrap {justify-content: center;}
.table-list .button-wrap.align-left {justify-content: left;}

.table-list .button-wrap.gap10 {gap: 10px;}
.table-list .button-wrap .button {padding: 5px; width: 60px;}

.table-list .depth2 .link a,
.table-list .depth3 .link a {color: #4f31d4;}

.table-list .depth2 td:first-child {position: relative; padding-left: 40px;}
.table-list .depth3 td:first-child {position: relative; padding-left: 60px;}
.table-list .depth2 td:first-child::before,
.table-list .depth3 td:first-child::before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 60px; background: url(../img/depth_arrow.png) right center no-repeat;}
.table-list .depth3 td:first-child::before {width: 50px;}

.table-list .depth2 .link a:after,
.table-list .depth3 .link a:after {background-color: #4f31d4;}

.table-list tr.read .subject {font-weight: 400;}
.table-list tr.unread .subject a {padding-right: 18px; font-weight: 500;}
.table-list tr.unread .subject a:after {display: block; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 1px; width: 8px; height: 8px; background-color: #9797ff; border-radius: 50%;}


/* table clean */
.table-clean th:last-child {text-align: center;}
.table-clean td:last-child {padding-left: 70px;}
.table-clean .select-wrap {gap: 0 40px;}
.table-clean .select-wrap .custom-select {width: 180px;}
.table-clean tr:hover {background-color: #fff;}


/* table regist */
.table-regist .tr {margin-top: 20px;}
.table-regist .tr:first-child {margin-top: 0 !important;}
.table-regist .th {display: flex; gap: 10px; align-items: baseline; width: 100%; height: 40px; line-height: 22px; font-size: 16px; color: #343445; font-weight: 500;}
.table-regist .td {line-height: 22px; font-size: 14px; color: #343445; font-weight: 400;}


/* table detail */
.table-detail a {color: inherit;}
.table-detail .subject {line-height: 1.2; font-size: 22px; color: #343445; font-weight: 500;}
.table-detail .subject strong {font-weight: inherit;}
.table-detail .subject .icon-lock {margin-top: 3px;}

.table-detail .gray {color: #a5a5ba;}

.table-detail .thead {margin-top: 13px; border-top: 1px solid #343445;}
.table-detail .tbody {padding: 30px 0; border-top: 1px solid #e3e3e9; border-bottom: 1px solid #e3e3e9;}

.table-detail .col {display: flex; width: 100%;}
.table-detail .col > div {width: calc(100% - 140px);}
.table-detail .col > div:first-child {width: 140px;}

.table-detail .col + .col {flex: none; width: 42.03%;}

.table-detail .tr {position: relative;}
.table-detail .th,
.table-detail .td {display: flex; align-items: center; padding: 9px 0; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; box-sizing: border-box;}
.table-detail .td {color: #4e4e69;}
.table-detail .align-top {align-items: baseline;}

.table-detail .writer {font-weight: 500;}

.table-detail .thead .th {align-items: center; height: 50px; color: #4e4e69;}
.table-detail .thead .button-wrap {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}

.table-detail .tbody .tr {padding-right: 20px;}
.table-detail .tbody .th,
.table-detail .tbody .td {font-size: 16px;}
.table-detail .tbody .th {font-weight: 500;}

.table-detail .text-box {padding: 14px; width: 100%; min-height: 140px; font-size: 14px; color: #343445; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.table-detail .text-box .image {display: block; margin-bottom: 10px; width: 600px; max-width: 100%; box-sizing: border-box;}
.table-detail .btn-admin {font-size: 14px;}


/* pagination */
.pagination {display: flex; gap: 10px; justify-content: center; position: relative; margin-top: 40px;}
.pagination button,
.pagination a {display: block; width: 40px; height: 40px; box-sizing: border-box;}

.pagination button:before {display: block; content: ''; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat;}

.pagination .btn-prev:before {background-image: url(../img/btn_prev.png);}
.pagination .btn-next:before {background-image: url(../img/btn_next.png);}
.pagination .btn-prev:disabled::before {background-image: url(../img/btn_prev_disabled.png);}
.pagination .btn-next:disabled::before {background-image: url(../img/btn_next_disabled.png);}

.pagination ul {display: flex; gap: 10px; list-style: none;}
.pagination li a {padding: 10px 5px; line-height: 20px; font-size: 14px; color: #4e4e69; border-radius: 6px; text-align: center;}
.pagination li a:hover {background-color: #f4f4fa;}
.pagination li.active a {color: #fff; background-color: #4f31d4;}


/* reply */
.reply {margin-top: 20px;}
.reply .total {font-size: 16px; color: #343445; font-weight: 400;}
.reply .total em {color: #4f31d4; font-style: normal;}
.reply-box {position: relative; margin-top: 8px; padding: 0 20px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.reply-box ul {list-style: none;}
.reply-box li {display: flex; gap: 10px; position: relative; padding: 25px 0; border-bottom: 1px solid #e3e3e9;}
.reply-box li .img {position: relative; width: 34px; height: 34px; border: 1px solid #e3e3e9; border-radius: 50%; box-sizing: border-box; overflow: hidden;}
.reply-box li .img img {vertical-align: top;width: 100%;height: 100%;}
.reply-box li .info {display: flex; gap: 5px 10px; flex-wrap: wrap; width: calc(100% - 74px); font-size: 14px; color: #343445;}
.reply-box li .info .name {font-weight: 500;}
.reply-box li .info .time {padding-top: 2px; font-size: 12px; color: #a5a5ba;}
.reply-box li .info .text {width: 100%;}
.reply-box li .btn-reply-delete {position: absolute; top: 25px; right: 0;}
.reply-box li .btn-reply-delete:before {width: 20px; height: 20px; background-image: url(../img/icon_delete_x.png);}

.reply-box .write {display: flex; align-items: center; padding: 30px 0;}
.reply-box .write .img {width: 34px; height: 34px; border: 1px solid #e3e3e9; border-radius: 50%; box-sizing: border-box; overflow: hidden;}
.reply-box .write .img img {vertical-align: top;width: 100%;height: 100%;}
.reply-box .write .input {margin: 0 20px 0 10px; width: calc(100% - 146px);}
.reply-box .write .button {width: 80px;}

.reply .pagination {margin-top: 20px;}


/* board */
.board {display: flex; position: relative; padding: 40px 40px 40px 0; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 10px; box-sizing: border-box;}
.board .left {width: 305px;}
.board .info {margin-bottom: 25px;}
.board .profile-img {display: block; margin: 0 auto 10px; width: 60px; height: 60px;}
.board .name {font-size: 0; text-align: center;}
.board .name span {display: inline-block; vertical-align: top;}
.board .name-ko {font-size: 18px; color: #343445; font-weight: 500;}
.board .name-en {margin: 3px 0 0 6px; font-size: 14px; color: #a5a5ba; font-weight: 400;}
.board .custom-select {margin: 0 auto; width: 160px;}
.board .custom-select .select-selected {border-radius: 8px;}

.board .box-wrap {flex: 1; display: flex; gap: 20px;}
.board .box {flex: 1; display: flex; justify-content: space-between; position: relative; padding: 20px 40px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 16px; box-sizing: border-box;}
.board .box .label {font-size: 18px; color: #343445; font-weight: 500;}
.board .box .label strong {display: block; margin-top: 8px; line-height: 1; font-size: 30px; color: #4e4e69; font-weight: 500;}
/* 잔여 음수 표기 — 대시보드 .dash-stat.is-minus 와 같은 규칙을 연차 내역 요약 카드에도 적용 */
.board .box .label strong.is-minus, .board .box .number.is-minus {color: #ee4f4f;}
.board .box .label .color {color: #4f31d4;}
.board .box ul {list-style: none;}
.board .box li {display: flex; gap: 13px; align-items: center; justify-content: space-between; font-size: 16px; color: #4e4e69; font-weight: 400;}
.board .box li .justify {display: flex; justify-content: space-between; width: 65px;}
/* 라벨을 두 단어로 쪼개지 않고 한 줄로 두는 요약 카드 (근무 기록) — 숫자 열 정렬만 유지 */
.board .box-wrap.label-single li .justify {display: block; width: auto; min-width: 65px; white-space: nowrap;}
/* 표 안 안내 문장 행 (미래 일자·근무조 미설정) */
.table-list td.row-note {color: #8a93a5;}


/* bottom */
.bottom {display: flex; justify-content: space-between; margin-top: 40px; width: 100%; box-sizing: border-box;}
.bottom ul {list-style: none;}
.bottom a {color: inherit;}


/* popup */
.popup {display: none; position: fixed; top: 0; left: 0; z-index: 200;}
.popup.active {display: block;}
.popup:before {display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 30%);}
.popup a {color: inherit;}

.popup-panel {position: fixed; right: 0; top: 0; padding: 80px 0 120px; width: 500px; height: 100%; background-color: #fff; box-sizing: border-box;}

.popup-top {display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; padding: 20px 63px 20px 20px; width: 100%; height: 80px; background-color: #fff; border-bottom: 1px solid #a5a5ba; box-sizing: border-box;}
.popup-top h2.title {font-size: 20px; color: #343445; font-weight: 500;}
.popup-top .btn-close {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}

.popup-tab {position: relative;}
.popup-tab ul {display: flex; list-style: none;}
.popup-tab li {flex: 1;}
.popup-tab li a {display: flex; align-items: center; justify-content: center; position: relative; padding: 10px; height: 60px; font-size: 16px; color: #a5a5ba; font-weight: 400; border-bottom: 1px solid #e3e3e9; box-sizing: border-box;}
.popup-tab li.active a {color: #4f31d4; font-weight: 500;}
.popup-tab li.active a:after {display: block; content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #4f31d4;}

.popup-cont {position: relative; padding: 40px 20px; height: 100%; box-sizing: border-box; overflow-y: auto;}
.popup-tab + .popup-cont {height: calc(100% - 60px);}

.popup-bottom {position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 20px; background-color: #fff; box-sizing: border-box;}
.popup-bottom .button-wrap {justify-content: flex-end;}
.popup-bottom .button-wrap .button.color-border {position: absolute; top: 40px; left: 20px;}


/* popup - table edit */
.table-edit .col {display: flex;}
.table-edit .col > div {width: calc(100% - 140px);}
.table-edit .col > div:first-child {width: 140px;}
.table-edit .col > div.full {width: 100%;}

.table-edit .tr {position: relative; margin-top: 20px;}
.table-edit .tr:first-child {margin-top: 0;}
.table-edit .th,
.table-edit .td {display: flex; align-items: center; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; box-sizing: border-box;}
.table-edit .th {height: 50px;}
.table-edit .td {color: #4e4e69;}
.table-edit .align-top {align-items: baseline;}

.table-edit .tbody .th,
.table-edit .tbody .td {font-size: 16px;}
.table-edit .tbody .th {font-weight: 500;}

.table-edit .tbody .form .custom-select .select-option button {font-size: 14px;}

.table-edit .file-add {flex-wrap: wrap;}
.table-edit .file-button {display: flex; gap: 20px; align-items: center;}
.table-edit .file-button .text {flex: 1; font-size: 14px;}

.table-edit .selected-wrap {display: block; margin-top: 15px;}
.table-edit .selected-wrap .item {margin-top: 20px; color: #343445; font-weight: 500;}
.table-edit .selected-wrap .item:first-child {margin-top: 0;}


/* popup - schedule */
.sch-box {position: relative; margin-top: 20px; padding: 20px; line-height: 24px; font-size: 14px; color: #4e4e69; font-weight: 400; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.sch-box:first-child {margin-top: 0;}
.sch-box ul {list-style: none;}
.sch-box .profile-img {width: 18px; height: 18px; border: 0;}
.sch-box .date {font-size: 12px; color: #a5a5ba; font-weight: 400;}

.sch-box-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}

.sch-label {display: inline-block; padding: 2px 18px; height: 26px; line-height: 20px; font-size: 12px; font-weight: 500; background-color: #fff; border: 1px solid #000; border-radius: 18px; box-sizing: border-box;}


.sch-label-color {color: #4f31d4; background-color: #dedeff; border-color: #9797ff;}
.sch-label-orange {color: #f3870c; background-color: #fff0df; border-color: #f8d6b0;}
.sch-label-green {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.sch-label-blue {color: #2c86cd; background-color: #dbeefd; border-color: #90c2e9;}
.sch-label-purple {color: #a04ac2; background-color: #f6dfff; border-color: #ddb1ee;}
.sch-label-gray {color: #4e4e69; background-color: #f4f4fa; border-color: #a5a5ba;}
.sch-label-red {color: #FFF0DFFF;background-color: #ee4f4f; border-color: #e8b8b8}


.sch-label.sch-waiting {color: #4e4e69; background-color: #e3e3e9; border-color: #a5a5ba;}

.sch-people-list {display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.sch-people-list li {display: flex; gap: 3px; align-items: center;}

.sch-late-list li {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.sch-late-list li:first-child {margin-top: 0;}
.sch-late-list .left {display: flex; align-items: center;}
/* 이름 바로 뒤에 붙어 '강민영오전 09:00' 으로 읽히던 것 — 서랍 목록과 같은 간격을 준다 */
.sch-late-list .time {margin: 0 3px 0 10px; font-weight: 500;}
.sch-late-list .memo, .drawer-late-list .memo {font-weight: 600; color: #343445;}
.sch-late-list .late-hour {color: #343445;}


/* drawer */
.drawer {position: fixed; top: 0; right: 0; padding: 80px 0 60px; width: 400px; height: 100%; border-left: 1px solid #e3e3e9; box-sizing: border-box; z-index: 20;}
.drawer ul {list-style: none;}
.drawer a {color: inherit;}
.drawer h4.title {font-size: 16px; color: #343445; font-weight: 500;}
.drawer .subject {display: inline-block; line-height: 22px; font-size: 14px; color: #4e4e69; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.drawer .date {line-height: 22px; color: #a5a5ba; font-weight: 400;}

.drawer-cont {position: relative; padding-top: 160px; height: 100%; box-sizing: border-box;}
.drawer-box {position: relative; padding: 70px 20px 20px; border-top: 1px solid #e3e3e9; box-sizing: border-box;}
.drawer-box:first-child {border-top: 0;}
.drawer-box-head {display: flex; gap: 10px; align-items: center; position: absolute; top: 0; left: 0; padding: 0 20px; width: 100%; height: 60px; background-color: #fff; box-sizing: border-box;}
.drawer-box-head.justify {justify-content: space-between;}

.drawer-notice {position: absolute; top: 0; left: 0; width: 100%; height: 160px; box-sizing: border-box;}
.drawer-notice-list li {display: flex; gap: 20px; justify-content: space-between; margin-top: 20px;}
.drawer-notice-list li:first-child {margin-top: 0;}
.drawer-notice-list .subject {position: relative; max-width: calc(100% - 90px); font-weight: 500;}
.drawer-notice-list .date {width: 70px; font-size: 14px;}

.drawer-notice-list li.unread .subject {padding-right: 18px;}
.drawer-notice-list li.unread .subject:after {display: block; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 1px; width: 8px; height: 8px; background-color: #9797ff; border-radius: 50%;}


.drawer-alarm {padding-bottom: 40px; max-height: 51.29%; height: 402px;}
.drawer-alarm .badge {padding: 0 7px; min-width: 20px; line-height: 20px; font-size: 12px; color: #fff; font-weight: 500; background-color: #ee4f4f; border-radius: 10px; text-align: center; box-sizing: border-box;}
.drawer-alarm-list {height: 100%; overflow-y: auto;}
.drawer-alarm-list::-webkit-scrollbar {width: 18px; height: 12px;}
.drawer-alarm-list::-webkit-scrollbar-thumb {background-color: #c0c2d0; border: 6px solid transparent; border-radius: 10px; background-clip: padding-box ;}
.drawer-alarm-list::-webkit-scrollbar-track {background-color: transparent;}
.drawer-alarm-list li {margin-top: 20px; padding: 11px 20px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.drawer-alarm-list li:first-child {margin-top: 0;}
.drawer-alarm-list .flex {display: flex; justify-content: space-between; margin-bottom: 10px;}
.drawer-alarm-list .label {width: 60%; font-size: 14px; color: #4f31d4; font-weight: 500;}
.drawer-alarm-list .subject {max-width: 100%;}
.drawer-alarm-list .profile-img {margin: 2px 3px 0 0; width: 18px; height: 18px; border: 0;}
.drawer-alarm-list .date {font-size: 12px;}

.drawer-event {max-height: 48.71%; height: 379px;}
.drawer-event .date {position: relative; padding: 0; font-size: 16px; border: 0; border-bottom: 1px solid #a5a5ba; border-radius: 0;}
.drawer-event .date input[type="date"] {padding: 0; width: 70px;}
.drawer-event .date input[type="date"]::-webkit-calendar-picker-indicator {width: 100%; opacity: 0;}
.drawer-event .profile-img {width: 34px; height: 34px;}

.drawer-out-list {max-height: 100%; overflow-y: auto;}
.drawer-out-list .label {display: flex; gap: 10px; align-items: center; justify-content: space-between; position: relative; margin-bottom: 5px; font-size: 12px; color: #4e4e69; font-weight: 500;}
.drawer-out-list .label:after {flex: 1 ;display: block; content: ''; width: 100%; height: 1px; background-color: #e3e3e9;}
.drawer-out-list .people + .label {margin-top: 20px;}

.drawer-late-list {max-height: 100%; font-size: 14px; color: #4e4e69; font-weight: 400; overflow-y: auto;}
.drawer-late-list li {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.drawer-late-list li:first-child {margin-top: 0;}
.drawer-late-list .left {display: flex; align-items: center;}
.drawer-late-list .time {margin: 0 3px 0 10px; font-weight: 500;}
.drawer-late-list .late-hour {color: #343445;}

.drawer-bottom {position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background-color: #fff; box-sizing: border-box;}
.drawer-bottom .button-wrap {justify-content: flex-end;}


/* page */
/* 배경 이미지를 뺐다(2026-09-10 사용자 결정) — bg_u.png 는 유니포트 'U' 모양이라
   TagOnWorks 로 바뀐 뒤로는 남을 이유가 없다. 바탕색만 둔다. */
.page {display: flex; justify-content: center; padding: 320px 20px 0; min-height: 100vh; background: #f4f4fa; box-sizing: border-box;}
.page.pd-t200 {padding-top: 200px;}
.page ul {list-style: none;}
.page a {color: inherit;}

.page-center {width: 440px;}

.page-logo {margin-bottom: 60px; text-align: center;}
/* 인사 문구를 뺐으므로 로고 아래 여백도 없앤다 — .page-logo 의 margin-bottom(60px)이
   폼과의 간격을 담당한다. 남겨 두면 80px 이 되어 로고가 붕 뜬다. */
.page-logo .logo {position: relative;}
/* 로그인은 세로형 로고다(심볼 위 · 글자 아래). 화면 한가운데 단독으로 놓이는 자리라
   가로형보다 세로형이 어울린다는 판단(2026-09-10 사용자 결정). */
/* 세로형 로고(SVG). 글자색 #343445 라 밝은 로그인 화면용이다.
   비율(657:723)이 박스와 꼭 같지 않아 contain 으로 둔다 — 고정 크기로 늘리면 살짝 찌그러진다 */
.page-logo .logo:before {display: block; content: ''; margin: 0 auto; width: 130px; height: 120px; background: url(../img/logo_tagonworks_v.svg?v=3) center center no-repeat; background-size: contain;}
.page-logo .welcome-text {font-size: 20px; color: #4e4e69; font-weight: 400;}

.page-head {text-align: center;}
.page-head .title {margin-bottom: 20px; line-height: 1; font-size: 22px; color: #1d1d26; font-weight: 500;}
.page-head p {font-size: 16px; color: #a5a5ba; font-weight: 400;}

.page-form {margin: 0 auto; width: 340px;}
.page-form .input-box {position: relative;}
.page-form .input-box + .input-box {margin-top: 20px;}
.page-form .input {padding: 13px 14px; width: 100%;}
.page-form .button {margin-top: 40px; padding: 15px 10px; width: 100%;}
/* 아이디 저장 / 자동 로그인 — 체크박스가 붙으면 로그인 버튼 위 여백을 줄인다 */
.page-form .login-options + .button {margin-top: 20px;}

.login-options {display: flex; align-items: center; gap: 18px; margin-top: 16px;}
.login-check {display: flex; align-items: center; gap: 7px; font-size: 13px; color: #4e4e69; cursor: pointer; user-select: none;}
.login-check input {width: 15px; height: 15px; margin: 0; accent-color: #5b5bd6; cursor: pointer;}
.login-check:hover {color: #1a1a2e;}

/* 연차 승인 목록 — 반차 구분을 앞세우고 지급 항목명은 보조로 */
.leave-half-type {display: block; font-weight: 500; color: #343445;}
.leave-grant-name {display: block; margin-top: 2px; font-size: 12px; color: #8a8aa3;}

.page-find {text-align: center;}
.page-find a {font-size: 14px; color: #4e4e69; font-weight: 400;}

.page-find + .page-download {margin-top: 24px;}
.page-download {text-align: center;}
.page-download .download-label {display: block; font-size: 12px; color: #999; margin-bottom: 10px;}
.page-download .download-links {display: flex; justify-content: center; gap: 10px;}
.download-btn {display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.12);}
.download-btn--mac {background: #333336; color: #fff !important;}
.download-btn--win {background: #0078d4; color: #fff !important;}
.download-btn svg {fill: #fff !important;}
.download-btn:hover {transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.18); opacity: 0.95;}

.page-login + .page-find {margin-top: 10px;}
.page-head + .page-find {margin-top: 40px;}

.page-sns-login {margin: 20px auto 0; width: 340px;}
.page-sns-login .button {display: flex; gap: 4px; align-items: center; justify-content: center; width: 100%; height: 50px; color: #4e4e69; background-color: #f4f4fa;}
.page-sns-login .button:before {display: block; content: ''; width: 18px; height: 18px; background-position: center center; background-repeat: no-repeat;}
.page-sns-login .btn-microsoft:before {background-image: url(../img/sns_microsoft.png);}

.page-text {font-size: 16px; color: #4e4e69; font-weight: 400; text-align: center;}
.page-text .text {display: block;}
.page-text strong.text {line-height: 1.2; font-size: 30px; color: #343445; font-weight: 500;}
.page-text strong.text + .text {margin-top: 20px;}
.page-text .text.color {color: #4f31d4;}
.page-text .mg-t40 {margin-top: 40px;}

.page-bottom {position: fixed; bottom: 40px; left: 0; width: 100%;}

.page-error {padding-top: 340px; text-align: center;}
.page-error .mob-img {display: none;}

.page-bottom-logo {position: fixed; bottom: 40px; left: 0; width: 100%;}
.page-bottom-logo:before {display: block; content: ''; margin: 0 auto; width: 116px; height: 23px; background: url(../img/bottom_logo_uniport.png?v=2) center center no-repeat; background-size: 116px 23px;}

/* 404, 505 */
@media (max-width: 1024px) {
    .page-error {padding-top: 0; align-items: center; justify-content: center; background-image: none;}
    .page-error-img {display: block; margin-bottom: 40px; text-align: center;}
    .page-error .pc-img {display: none;}
    .page-error .mob-img {display: inline-block;}
    .page-error .page-text strong.text {font-size: 20px;}

    .page-bottom-logo:before {width: 82px; height: 16px; background: url(../img/mob_bottom_logo_uniport.png?v=2) center center no-repeat; background-size: 82px 16px;}
}


/* loading */
.loading {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgb(0 0 0 / 30%); z-index: 500;}
.spinner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px;
&:before {
     content: '';
     display: block;
     padding-top: 100%;
 }
}
.circular {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; animation: rotate 3s linear infinite; transform-origin: center center;}
.path {stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 2.3s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round;}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #4f31d4;
    }
}

/* companyForm 카카오 주소 검색시 사용 */
.popup-box{display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px 20px; max-width: calc(100% - 80px); max-height: calc(100% - 80px); background-color: #fff; border: 2px solid #969bb5; border-radius: 7px; box-shadow: 0 2px 29.62px 0.2px rgba(90, 102, 139, 0.2); box-sizing: border-box; z-index: 999}
#addressClose{cursor:pointer;position:absolute;right:0;top:-1px;z-index:1}

/** 관리자만 볼수 있는 글 **/
.only_admin td { color: #c9c9c9;}

/** 휴일 표기 **/
.holiday_tr td{color: #ee4f4f;}
/* ===== 대시보드 (와이어프레임 rev.6) =====================================
   격자는 12칼럼. 위젯 카드는 기존 관습(.drawer-box)과 같은 톤 —
   흰 배경 + #e3e3e9 실선, 그림자 없음. */
.dash {display: flex; flex-direction: column; gap: 14px;}
.dash-row {display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;}
/* 기본은 한 줄 전체. 이게 없으면 폭이 1/12 로 잡혀 제목이 한 글자씩 끊긴다 */
.dash-row > * {grid-column: span 12;}
.dash-row-2 > * {grid-column: span 6;}
.dash-row-6-3-3 > section:nth-of-type(1) {grid-column: span 6;}
.dash-row-6-3-3 > section:nth-of-type(2) {grid-column: span 3;}
.dash-row-6-3-3 > section:nth-of-type(3) {grid-column: span 3;}
.dash-row-3 > * {grid-column: span 4;}
.dash-row-4 > * {grid-column: span 3;}
/* 5등분은 12칸으로 나눠떨어지지 않는다. 이 줄만 5칸 격자로 바꿔 한 칸씩 준다 */
.dash-row-5 {grid-template-columns: repeat(5, 1fr);}
.dash-row-5 > * {grid-column: span 1;}
.dash-row-8-4 > section:nth-of-type(1) {grid-column: span 8;}
.dash-row-8-4 > section:nth-of-type(2) {grid-column: span 4;}
/* `span 12` 가 아니라 `1 / -1` 로 접는다 — 칸 수가 12가 아닌 줄(.dash-row-5)에서
   span 12 는 없는 칸을 만들어 가로로 넘친다. 1 / -1 은 칸 수와 무관하게 한 줄 전체다 */
@media (max-width: 1100px) {.dash-row > * {grid-column: 1 / -1 !important;}}

.dash-hello {padding: 4px 2px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.dash-hello-main {min-width: 0;}
.dash-hello-name {font-size: 20px; font-weight: 500; color: #343445;}
.dash-hello-date {margin-top: 6px; font-size: 14px; color: #a5a5ba;}
/* 소속 조직 — 인사말 우측 끝. 이름 줄과 눈높이를 맞춘다 */
.dash-hello-org {flex: none; max-width: 40%; padding-top: 3px; font-size: 14px; font-weight: 500; color: #6b6b80;
                 text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media (max-width: 700px) {
  /* 좁으면 이름 아래로 내린다 — 우측에 붙이면 이름이 먼저 잘린다 */
  .dash-hello {flex-direction: column; gap: 4px;}
  .dash-hello-org {max-width: 100%; text-align: left; padding-top: 0;}
}

.dash-box {background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e3e9; display: flex; flex-direction: column; min-width: 0;}
.dash-head {display: flex; align-items: center; gap: 10px; height: 56px; flex-shrink: 0; padding: 0 20px;}
.dash-title {font-size: 16px; font-weight: 500; color: #343445; white-space: nowrap;}
.dash-meta {font-size: 12px; font-weight: 400; color: #a5a5ba; margin-left: 4px;}
.dash-act {margin-left: auto; font-size: 13px; color: #a5a5ba; text-decoration: underline; background: none; border: 0; cursor: pointer; white-space: nowrap;}
.dash-act:hover {color: #4f31d4;}
.dash-body {padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0;}

/* 요약 타일 */
.dash-tile .dash-body {gap: 6px;}
/* 요약 타일은 한 줄에 다섯이라 폭이 좁다. 제목을 nowrap 으로 두면 '초과 근무 인정 요청 대기'
   같은 긴 제목이 칸을 밀어내 화면 전체에 가로 스크롤이 생긴다(1200px 실측). 줄을 바꾸게 하고
   '목록으로' 링크만 줄지 않게 고정한다. .dash-head 높이 56px 안에 두 줄까지 들어간다. */
.dash-tile .dash-title {white-space: normal; line-height: 1.25; flex: 1 1 auto; min-width: 0;}
.dash-tile .dash-act {flex: none;}
/* 숫자만 쓰는 요약 — 사유 라벨 + 인원. 좁은 칸이라 줄바꿈을 허용한다 */
.dash-count {display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px;}
.dash-count li {display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; white-space: nowrap;}
.dash-count-k {color: #a5a5ba;}
.dash-count-v {color: #343445; font-weight: 600; font-variant-numeric: tabular-nums;}
.dash-stat {font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; color: #343445; font-variant-numeric: tabular-nums;}
.dash-stat small {font-size: 14px; font-weight: 500; color: #4e4e69; margin-left: 3px;}
.dash-stat.is-minus {color: #ee4f4f;}
.dash-sub {font-size: 12px; color: #a5a5ba; font-variant-numeric: tabular-nums;}

/* 상태 칩 — 근태 7종(정상·지각·결근·휴일·근무조·연차·반차) */
.dash-chip {align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 12px; font-size: 12px; font-weight: 500; color: #4e4e69; background: #f4f4fa; box-shadow: inset 0 0 0 1px #e3e3e9; white-space: nowrap;}
.dash-chip.is-ok {color: #2a9a6d; background: #e2fbf1; box-shadow: inset 0 0 0 1px #a3dfc7;}
.dash-chip.is-warn {color: #f3870c; background: #fff0df; box-shadow: inset 0 0 0 1px #f8d6b0;}

/* 목록 행 */
.dash-list li {display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f4f4fa;}
.dash-list li:first-child {border-top: 0;}
.dash-time {font-size: 12px; color: #a5a5ba; white-space: nowrap; font-variant-numeric: tabular-nums;}
.dash-name {font-size: 14px; color: #4e4e69; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.dash-tag {margin-left: auto; font-size: 11px; color: #4f31d4; background: #ebebff; border-radius: 10px; padding: 2px 8px; white-space: nowrap;}
.dash-notice .dash-name {flex: 1;}
.dash-notice .dash-name.is-unread {font-weight: 500; color: #343445;}
.dash-date {font-size: 12px; color: #a5a5ba; white-space: nowrap;}
.dash-empty {padding: 22px 0; text-align: center; font-size: 13px; color: #a5a5ba;}

/* 표 — 헤더 밴드 #f4f4fa */
.dash-scroll {overflow: auto; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e3e9;}
/* 전역 table 은 table-layout:fixed 라 첫 행의 폭 선언만 보고 칸을 나눈다.
   그대로 두면 nowrap 글자가 좁은 칸 밖으로 삐져나와 겹쳐 보인다 — 내용에 맞춰 나누게 auto 로 되돌린다. */
.dash-table {width: 100%; border-collapse: collapse; table-layout: auto; word-break: keep-all;}
.dash-table th {position: sticky; top: 0; z-index: 1; background: #f4f4fa; height: 40px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 500; color: #4e4e69; white-space: nowrap;}
.dash-table td {height: 42px; padding: 0 12px; border-top: 1px solid #f4f4fa; font-size: 13px; color: #a5a5ba; white-space: nowrap; font-variant-numeric: tabular-nums;}
.dash-table td:first-child {color: #4e4e69;}
/* 마지막 칸이 남는 폭을 흡수하게 해서 헤더 밴드가 오른쪽 끝까지 채워지도록 한다.
   그렇게 하지 않으면 내용이 짧을 때 헤더가 중간에서 끊겨 보인다. */
/* 마지막 칸이 남는 폭을 다 먹고 앞 칸들은 내용 폭에 맞춘다.
   앞 칸에 width:1% 를 주면 폭이 모자랄 때 nowrap 글자가 옆 칸으로 삐져나와 겹쳐 보인다. */
.dash-table th.dash-wrap, .dash-table td.dash-wrap {width: 100%;}
/* 인원수처럼 자리를 맞춰 읽는 칸 — 오른쪽 정렬하고 폭을 내용에 맞춘다 */
.dash-table th.dash-num, .dash-table td.dash-num {text-align: right; width: 1%;}
.dash-table td.dash-num b {color: #343445; font-weight: 600;}
/* 근무조 이름 + 근무 시간을 한 칸에 두 줄로. 칸이 좁아 시간을 따로 빼면 표가 넘친다 */
.dash-table td.dash-wg {white-space: normal; line-height: 1.35; padding-top: 8px; padding-bottom: 8px;}
.dash-wg-name {display: block; color: #4e4e69;}
.dash-wg-time {display: block; font-size: 12px; color: #a5a5ba;}

/* 근무 기록은 옆 위젯 높이를 따라가고, 넘치면 표만 안에서 스크롤한다.
   옆 위젯이 비어 있을 때(부재자 0명) 표가 납작해지지 않도록 줄 자체에 바닥 높이를 둔다. */
.dash-row-fit {grid-auto-rows: minmax(320px, auto);}
.dash-fit {height: 0; min-height: 100%;}
.dash-body-fill {flex: 1; min-height: 0; overflow: hidden;}
.dash-body-fill .dash-scroll {flex: 1; min-height: 0;}

/* 부재자 — 한 줄 3명 */
.dash-group {padding: 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e3e9;}
.dash-people {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin-top: 10px;}
.dash-people li {display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4e4e69; min-width: 0;}
.dash-avatar {width: 24px; height: 24px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #f4f4fa;}
.dash-avatar img {width: 100%; height: 100%; object-fit: cover;}
.dash-people li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dash-pop-body {max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;}

/* 막대 그래프 — 차트 라이브러리가 없어 CSS 로 그린다. 이번 달만 강조 */
.dash-chart {display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 18px;}
.dash-col {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0;}
.dash-val {font-size: 11px; color: #a5a5ba; margin-bottom: 4px; font-variant-numeric: tabular-nums;}
.dash-val.is-now {color: #343445; font-weight: 500;}
.dash-bar {width: 100%; max-width: 34px; min-height: 2px; border-radius: 4px 4px 0 0; background: #e3e3e9;}
.dash-bar.is-now {background: #9797ff;}
.dash-mon {margin-top: 8px; font-size: 11px; color: #a5a5ba; white-space: nowrap;}
.dash-mon.is-now {color: #343445; font-weight: 500;}
/* 누적 막대 — 연차/반차 */
.dash-bar-stack {display: flex; flex-direction: column; background: transparent; overflow: hidden;}
.dash-seg {display: block; width: 100%;}
.dash-seg.is-full {background: #e3e3e9;}
.dash-seg.is-half {background: #f4f4fa;}
.dash-bar-stack.is-now .dash-seg.is-full {background: #9797ff;}
.dash-bar-stack.is-now .dash-seg.is-half {background: #dedeff;}
.dash-legend {display: flex; gap: 16px; margin-top: 12px;}
.dash-legend span {display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a5a5ba;}
.dash-legend i {width: 11px; height: 11px; border-radius: 2px; display: block;}
.dash-legend .lg-full {background: #9797ff;}
.dash-legend .lg-half {background: #dedeff;}
/* 일자별처럼 막대가 많을 때 */
/* 막대 트랙 높이를 고정한다 — 그래야 세로축 눈금이 막대와 같은 축을 가리킨다.
   전에는 .dash-col 높이 안에서 막대가 라벨과 공간을 나눠 가져(flex-shrink)
   막대의 100% 가 눈금으로 환산되지 않았다. */
.dash-chart-dense {gap: 3px; height: auto; padding-top: 0;}
.dash-chart-dense .dash-col {height: auto;}
.dash-chart-dense .dash-track {width: 100%; height: var(--dash-track); display: flex; align-items: flex-end;}
.dash-chart-dense .dash-bar {max-width: none; border-radius: 2px 2px 0 0;}
.dash-chart-dense .dash-mon {font-size: 10px;}
/* 31칸이 한 줄에 들어가야 해서 실인원 숫자를 더 줄인다. 빈 칸(미집계)도 자리는 잡아
   막대 높이가 들쭉날쭉해 보이지 않게 한다 */
.dash-chart-dense .dash-val {font-size: 9px; margin-bottom: 2px; min-height: 11px;}
/* 수정 이력의 내용처럼 긴 문장은 줄바꿈을 허용한다 */
.dash-table td.dash-wrap {white-space: pre-line; word-break: break-word; min-width: 180px; line-height: 1.5; padding-top: 10px; padding-bottom: 10px;}
.dash-table td.dash-wrap {height: auto;}
/* 3분할 수치판 — 지급 / 사용 / 남은 */
.dash-triad {display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e3e9; overflow: hidden;}
.dash-triad > div {padding: 12px 14px; box-shadow: inset 1px 0 0 #e3e3e9;}
.dash-triad > div:first-child {box-shadow: none;}
.dash-triad .k {display: block; font-size: 11px; color: #a5a5ba;}
.dash-triad .v {display: block; margin-top: 4px; font-size: 20px; font-weight: 700; color: #343445; font-variant-numeric: tabular-nums;}
.dash-triad .v small {font-size: 12px; font-weight: 500; color: #4e4e69; margin-left: 2px;}
/* 구간별 인원 막대 */
.dash-mini {flex: 1; height: 6px; border-radius: 3px; background: #f4f4fa; overflow: hidden; min-width: 40px;}
.dash-mini i {display: block; height: 100%; background: #9797ff;}
.dash-name.is-over {color: #ee4f4f;}

/* 행 단위 이동·접기 — 섹션 안에서만 순서가 바뀐다(관리자 행이 개인 행과 섞이지 않게) */
.dash-sec {display: flex; flex-direction: column; gap: 14px;}
/* 주제 제목. flex order 는 행에만 붙으므로(서버가 style="order:N") 제목이 뒤로 밀리지 않게
   order:-1 로 못박는다 — 저장된 순서가 0 이하인 행이 있어도 제목이 맨 위에 남는다. */
.dash-sec-title {order: -1; margin: 4px 0 -2px; font-size: 13px; font-weight: 600; color: #8b8ba7; letter-spacing: 0.02em;}
.dash-sec + .dash-sec {margin-top: 12px;}
.dash-row {position: relative;}
.dash-rowctl {position: absolute; top: -4px; right: 0; display: flex; gap: 4px; z-index: 5;
    opacity: 0; transition: opacity .15s;}
.dash-row:hover .dash-rowctl, .dash-rowctl:focus-within {opacity: 1;}
.dash-rowctl button {width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 13px;
    border: 1px solid #e6e6ef; border-radius: 6px; background: #fff; color: #a5a5ba; cursor: pointer;}
.dash-rowctl button:hover {color: #343445; border-color: #c9c9d6;}
.dash-rowmove {cursor: grab;}
.dash-row.is-dragging {opacity: .4;}
.dash-row.is-over {outline: 2px dashed var(--main, #4a6cf7); outline-offset: 5px; border-radius: 8px;}
.dash-row.is-folded {display: none;}

/* 접어둔 행 — 위쪽에 작게 남겨두고 누르면 되돌아온다 */
.dash-tray {display: none; align-items: center; flex-wrap: wrap; gap: 8px;}
.dash-tray.on {display: flex;}
.dash-tray-label {font-size: 12px; color: #a5a5ba;}
.dash-tray button {padding: 4px 10px; font-size: 12px; color: #5f5f7a; cursor: pointer;
    border: 1px solid #e6e6ef; border-radius: 14px; background: #fff;}
.dash-tray button:hover {color: #343445; border-color: #c9c9d6;}
.dash-tray button::after {content: "＋"; margin-left: 6px; color: #a5a5ba;}

/* 그래프 반기 전환 — 1~6월 / 7~12월 */
.dash-chart.is-hidden {display: none;}
.dash-pager {display: flex; align-items: center; gap: 6px;}
.dash-pager button {width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 14px;
    border: 1px solid #e6e6ef; border-radius: 6px; background: #fff; color: #5f5f7a; cursor: pointer;}
.dash-pager button:hover:not(:disabled) {color: #343445; border-color: #c9c9d6;}
.dash-pager button:disabled {opacity: .35; cursor: default;}
.dash-page-label {min-width: 46px; text-align: center; font-size: 12px; color: #a5a5ba;}

/* 평균 소진율 도넛 — 위쪽에 두고 요약 타일은 그 아래로 */
.dash-donut {position: relative; width: 138px; margin: 2px auto 14px;}
.dash-donut svg {display: block; width: 100%; height: auto;}
.dash-donut-bg {stroke: #eeeef6;}
.dash-donut-fg {stroke: #4f31d4; stroke-linecap: round;}
.dash-donut-mid {position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;}
.dash-donut-mid strong {font-size: 26px; font-weight: 500; line-height: 1; color: #343445; font-variant-numeric: tabular-nums;}
.dash-donut-mid small {margin-left: 1px; font-size: 13px; color: #a5a5ba;}
.dash-donut-mid span {font-size: 11px; color: #a5a5ba;}
/* 도넛이 자리를 차지하니 요약 타일은 한 단 낮춘다 */
.dash-triad-sm > div {padding: 9px 12px;}
.dash-triad-sm .v {margin-top: 2px; font-size: 17px;}

/* 아직 지나지 않았거나 기록이 없는 날 — 자리만 잡고 눈금만 남긴다 */
/* 이달의 출근 현황률 — 가로(일자)·세로(출근율) 기준을 드러낸다.
   막대 트랙과 세로축·격자선이 같은 높이(--dash-track)와 같은 시작점(--dash-valh)을 쓴다. */
.dash-plot {--dash-track: 100px; --dash-valh: 13px; display: flex; gap: 8px;}
/* 눈금 글자는 격자선에 '중심' 이 맞아야 한다 — 라벨 높이(10px)의 절반만큼 위로
   올리고 그만큼 키를 늘려, 세 라벨의 중심이 각각 100/90/80 선에 앉게 한다 */
.dash-yaxis {flex: none; margin-top: calc(var(--dash-valh) - 5px); height: calc(var(--dash-track) + 10px);
             display: flex; flex-direction: column; justify-content: space-between;
             font-size: 10px; line-height: 10px; color: #a5a5ba; text-align: right;
             font-variant-numeric: tabular-nums;}
.dash-plotarea {flex: 1; min-width: 0; position: relative;}
.dash-grid {position: absolute; left: 0; right: 0; top: var(--dash-valh); height: var(--dash-track);
            display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;}
.dash-grid i {height: 1px; background: #e3e3e9;}
/* 80% 기준선(맨 아래)은 축이라 조금 진하게 */
.dash-grid i:last-child {background: #d6d6e2;}

.dash-col.is-empty .dash-bar {background: transparent;}
.dash-col.is-empty .dash-mon {color: #d6d6e2;}

/* 막대 툴팁 — 브라우저 기본 title 은 1초쯤 기다려야 뜨고 칸이 얇아 놓치기 쉬웠다.
   막대 위 아무 데나 올리면 바로 뜨게 직접 그린다. */
.dash-col[data-tip] {position: relative;}
.dash-col[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    margin-bottom: 4px; padding: 6px 9px; border-radius: 6px;
    background: #343445; color: #fff; font-size: 11px; line-height: 1.4;
    white-space: nowrap; pointer-events: none; z-index: 20;
}
/* 양 끝 칸은 말풍선이 상자 밖으로 잘리니 안쪽으로 붙인다 */
.dash-col[data-tip]:first-child:hover::after {left: 0; transform: none;}
.dash-col[data-tip]:last-child:hover::after {left: auto; right: 0; transform: none;}
/* 말풍선이 그래프 위쪽으로 나가므로 잘리지 않게 한다 */
.dash-chart {overflow: visible;}

/* ── 공용 페이지네이션 (WEB-INF/tags/paging.tag) ───────────────────────
   원래 editLog.jsp 인라인 <style> 에만 있었다. 그래서 같은 마크업을 쓰는
   연차 승인 이력은 페이지 번호가 스타일 없는 맨 링크로 떴다. 공용으로 옮긴다. */
/* 페이지당 건수 선택을 걷어내(2026-09-11, 20건 고정) 남은 것은 페이지 번호뿐이다 -
   space-between 이면 혼자 왼쪽에 붙으므로 가운데로 놓는다. */
.paging-wrap {display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px;}
/* 번호 묶음은 건수 선택이 있어도 화면 가운데에 오게 한다 */
.paging {display: flex; justify-content: center; gap: 4px; flex: 1;}
.btn-page {padding: 4px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; color: #333; text-decoration: none;}
.btn-page:hover {background: #f3f4f6;}
.btn-page.active {background: var(--primary-color, #333); color: #fff; border-color: var(--primary-color, #333);}
.page-gap {padding: 4px 2px; font-size: 12px; color: #aaa;}
/* 건수 선택만 있고 번호가 없을 때(1페이지) 좌측에 붙어 보이지 않게 */