:root {
	/* Color */
	--brand-primary: #086bf1;
	--brand-hover: #00306b;
	--basic-black: #000;
	--basic-darkgray: #434343;
	--basic-middlegray: #7b7b7b;
	--basic-lightgray: #c4c4c4;
	--basic-pale: #f5f5f5;
	--basic-white: #fff;
	--basic-border: #ddd;
	--basic-border2: #d8e2ef;
	--basic-bg: #f9fafd;
	--basic-bg2: #f3f8ff;

	--primary-primary100: #f5faff;
	--primary-primary200: #d3e8ff;
	--primary-primary300: #92c5fd;
	--primary-primary400: #60abfc;
	--primary-primary500: #479efb;
	--primary-primary700: #126dd9;
	--primary-primary800: #1657a7;
	--primary-primary900: #0c3f81;

	--state-info: #4c88fb;
	--state-success: #0ec174;
	--state-warning: #020201;
	--state-error: #F93337;

	--badge-re-bg: #ffe9e9;
	--badge-re-color: #ed1418;
	--badge-or-bg: #FEF6EE;
	--badge-or-color: #ff5310;
	--badge-ye-bg: #FEFBE8;
	--badge-ye-color: #CA8504;
	--badge-gr-bg: #EDFCF2;
	--badge-gr-color: #0b9b5d;
	--badge-bl-bg: #EFF8FF;
	--badge-bl-color: #175CD3;
	--badge-nv-bg: #EEF4FF;
	--badge-nv-color: #3538CD;
	--badge-pp-bg: #F9F5FF;
	--badge-pp-color: #6941C6;
	--badge-pk-bg: #FDF2FA;
	--badge-pk-color: #C11574;
	--badge-bk-bg: #f1f1f1;
	--badge-bk-color: #414651;	

	--pastel-re: #F6B0B0;
	--pastel-or: #F6C1A2;
	--pastel-ye: #FAE8A4;
	--pastel-gr: #D4E6A5;
	--pastel-bl: #BFE3E0;
	--pastel-ny: #A7C7E7;
	--pastel-pp: #D2B8E2;
	--pastel-pk: #F5A6A6;
	--pastel-bk: #B0B0B0;


	/* Font */
	--font-en: "Roboto", sans-serif;
	--font-kr: "Noto Sans KR", sans-serif;
	--font-sc: "Noto Sans SC", sans-serif;
	--font-tc: "Noto Sans TC", sans-serif;
	--font-poppins: "Poppins", sans-serif;


	/* Typography */
	--56_display_r: 400 3.5rem/1.286 'Pretendard', sans-serif;
	--56_display_m: 500 3.5rem/1.286 'Pretendard', sans-serif;
	--56_display_sb: 600 3.5rem/1.286 'Pretendard', sans-serif;
	--56_display_b: 700 3.5rem/1.286 'Pretendard', sans-serif;

	--40_display_r: 400 2.5rem/1.3 'Pretendard', sans-serif;
	--40_display_m: 500 2.5rem/1.3 'Pretendard', sans-serif;
	--40_display_sb: 600 2.5rem/1.3 'Pretendard', sans-serif;
	--40_display_b: 700 2.5rem/1.3 'Pretendard', sans-serif;

	--36_title_r: 400 2.25rem/1.334 'Pretendard', sans-serif;
	--36_title_m: 500 2.25rem/1.334 'Pretendard', sans-serif;
	--36_title_sb: 600 2.25rem/1.334 'Pretendard', sans-serif;
	--36_title_b: 700 2.25rem/1.334 'Pretendard', sans-serif;

	--32_title_r: 400 2rem/1.334 'Pretendard', sans-serif;
	--32_title_m: 500 2rem/1.334 'Pretendard', sans-serif;
	--32_title_sb: 600 2rem/1.334 'Pretendard', sans-serif;
	--32_title_b: 700 2rem/1.334 'Pretendard', sans-serif;

	--30_title_r: 400 1.875rem/1.334 'Pretendard', sans-serif;
	--30_title_m: 500 1.875rem/1.334 'Pretendard', sans-serif;
	--30_title_sb: 600 1.875rem/1.334 'Pretendard', sans-serif;
	--30_title_b: 700 1.875rem/1.334 'Pretendard', sans-serif;

	--28_title_r: 400 1.75rem/1.358 'Pretendard', sans-serif;
	--28_title_m: 500 1.75rem/1.358 'Pretendard', sans-serif;
	--28_title_sb: 600 1.75rem/1.358 'Pretendard', sans-serif;
	--28_title_b: 700 1.75rem/1.358 'Pretendard', sans-serif;

	--24_title_r: 400 1.5rem/1.334 'Pretendard', sans-serif;
	--24_title_m: 500 1.5rem/1.334 'Pretendard', sans-serif;
	--24_title_sb: 600 1.5rem/1.334 'Pretendard', sans-serif;
	--24_title_b: 700 1.5rem/1.334 'Pretendard', sans-serif;
	
	--22_heading_r: 400 1.375rem/1.364 'Pretendard', sans-serif;
	--22_heading_m: 500 1.375rem/1.364 'Pretendard', sans-serif;
	--22_heading_sb: 600 1.375rem/1.364 'Pretendard', sans-serif;
	--22_heading_b: 700 1.375rem/1.364 'Pretendard', sans-serif;

	--20_heading_r: 400 1.25rem/1.4 'Pretendard', sans-serif;
	--20_heading_m: 500 1.25rem/1.4 'Pretendard', sans-serif;
	--20_heading_sb: 600 1.25rem/1.4 'Pretendard', sans-serif;
	--20_heading_b: 700 1.25rem/1.4 'Pretendard', sans-serif;

	--18_headline_r: 400 1.125rem/1.445 'Pretendard', sans-serif;
	--18_headline_m: 500 1.125rem/1.445 'Pretendard', sans-serif;
	--18_headline_sb: 600 1.125rem/1.445 'Pretendard', sans-serif;
	--18_headline_b: 700 1.125rem/1.445 'Pretendard', sans-serif;

	--17_headline_r: 400 1.063rem/1.412 'Pretendard', sans-serif;
	--17_headline_m: 500 1.063rem/1.412 'Pretendard', sans-serif;
	--17_headline_sb: 600 1.063rem/1.412 'Pretendard', sans-serif;
	--17_headline_b: 700 1.063rem/1.412 'Pretendard', sans-serif;

	--16_body_normal_r: 400 1rem/1.4 'Pretendard', sans-serif;
	--16_body_normal_m: 500 1rem/1.4 'Pretendard', sans-serif;
	--16_body_normal_sb: 600 1rem/1.4 'Pretendard', sans-serif;
	--16_body_normal_b: 700 1rem/1.4 'Pretendard', sans-serif;

	--16_body_read_r: 400 1rem/1.6 'Pretendard', sans-serif;
	--16_body_read_m: 500 1rem/1.6 'Pretendard', sans-serif;
	--16_body_read_sb: 600 1rem/1.6 'Pretendard', sans-serif;
	--16_body_read_b: 700 1rem/1.6 'Pretendard', sans-serif;

	--15_body_normal_r: 400 0.938rem/1.467 'Pretendard', sans-serif;
	--15_body_normal_m: 500 0.938rem/1.467 'Pretendard', sans-serif;
	--15_body_normal_sb: 600 0.938rem/1.467 'Pretendard', sans-serif;
	--15_body_normal_b: 700 0.938rem/1.467 'Pretendard', sans-serif;

	--15_body_read_r: 400 0.938rem/1.6 'Pretendard', sans-serif;
	--15_body_read_m: 500 0.938rem/1.6 'Pretendard', sans-serif;
	--15_body_read_sb: 600 0.938rem/1.6 'Pretendard', sans-serif;
	--15_body_read_b: 700 0.938rem/1.6 'Pretendard', sans-serif;

	--14_label_normal_r: 400 0.875rem/1.429 'Pretendard', sans-serif;
	--14_label_normal_m: 500 0.875rem/1.429 'Pretendard', sans-serif;
	--14_label_normal_sb: 600 0.875rem/1.429 'Pretendard', sans-serif;
	--14_label_normal_b: 700 0.875rem/1.429 'Pretendard', sans-serif;

	--14_label_read_r: 400 0.875rem/1.571 'Pretendard', sans-serif;
	--14_label_read_m: 500 0.875rem/1.571 'Pretendard', sans-serif;
	--14_label_read_sb: 600 0.875rem/1.571 'Pretendard', sans-serif;
	--14_label_read_b: 700 0.875rem/1.571 'Pretendard', sans-serif;

	--13_label_r: 400 0.813rem/1.385 'Pretendard', sans-serif;
	--13_label_m: 500 0.813rem/1.385 'Pretendard', sans-serif;
	--13_label_sb: 600 0.813rem/1.385 'Pretendard', sans-serif;
	--13_label_b: 700 0.813rem/1.385 'Pretendard', sans-serif;

	--12_caption_r: 400 0.75rem/1.334 'Pretendard', sans-serif;
	--12_caption_m: 500 0.75rem/1.334 'Pretendard', sans-serif;
	--12_caption_sb: 600 0.75rem/1.334 'Pretendard', sans-serif;
	--12_caption_b: 700 0.75rem/1.334 'Pretendard', sans-serif;

	--11_caption_r: 400 0.688rem/1.273 'Pretendard', sans-serif;
	--11_caption_m: 500 0.688rem/1.273 'Pretendard', sans-serif;
	--11_caption_sb: 600 0.688rem/1.273 'Pretendard', sans-serif;
	--11_caption_b: 700 0.688rem/1.273 'Pretendard', sans-serif;

	--10_caption_r: 400 0.625rem/1.273 'Pretendard', sans-serif;
	--10_caption_m: 500 0.625rem/1.273 'Pretendard', sans-serif;
	--10_caption_sb: 600 0.625rem/1.273 'Pretendard', sans-serif;
	--10_caption_b: 700 0.625rem/1.273 'Pretendard', sans-serif;

	/* Transition */
	--transition: all 0.4s ease;

	/* Shadow */
	--box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.08)
}
  
/* common */
* { margin: 0; padding: 0; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; background: var(--basic-bg); min-width: 1280px;}
html::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth; }
html, body {font: 400 16px/1.3 var(--font-en), var(--font-kr), var(--font-sc), var(--font-tc), sans-serif; color: var(--basic-black); width: 100%; position: relative;}
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
img {max-width: 100%;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}
::-webkit-scrollbar {width: 4px; height: 4px;}
::-webkit-scrollbar-track {background: var(--basic-border);}
::-webkit-scrollbar-thumb {background: var(--brand-hover); cursor: pointer;}

.tablet {display: none !important;}
.mobile { display: none !important;}

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.25); z-index: 99;  transition: all 0.4s ease; opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before { opacity: 1;  pointer-events: auto;}


/* fonts */
/* * { font-family: "poppins", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif !important;} */
*:not(.note-editable):not(.note-editable *):not([class^="ph-"]):not([class*=" ph-"]):not(.ph) { font-family: "poppins", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif !important;}
.NotoKR {font-family: var(--font-poppins), var(--font-kr) !important}
.NotoSC {font-family: var(--font-poppins), var(--font-sc) !important}
.NotoTC {font-family: var(--font-poppins), var(--font-tc) !important}
.Poppins {font-family: var(--font-poppins), var(--font-kr) !important}


/* form */
.form {position: relative; width: 100%;}
.form_tit {font:var(--20_heading_sb); color: var(--basic-darkgray);}
.form_box {width: 100%; display: flex; flex-direction: column; gap: 1.25rem;}
.form_box.gap_lg {gap: 1.5rem;}
.form_box.gap_lg2 {gap: 2.5rem;}
.form_box.gap_sm {gap: 1rem;}
.form_box.flex_wrap {flex-wrap: wrap; flex-direction: row; gap: 1.5rem 1.25rem;}
.form_box .form_item {width: calc((100% - 1.5rem)/2);}
.form_box .form_item.full {width: 100%;}
.form_box .form_item.wid33 {width: calc((100% - 1.5rem*2)/3);}
.form_box .form_item.wid25 {width: calc((100% - 1.5rem*3)/4);}
.form_box .form_item.wid20 {width: calc((100% - 1.5rem*4)/5);}


/* inputs */
.input_box {width: 100%; position: relative; display: flex; flex-direction: column; gap: 0.625rem;}
.input_box.gap_sm {gap: 0.375rem;}
.input_box.auto {width: auto;}
.input_box.flex { flex-direction: row; align-items: center; gap: 0.75rem;}
.input_box .label_text {font: var(--16_body_normal_m);letter-spacing: 0.01em;color: var(--basic-darkgray); margin-bottom: 0;}
.input_box .label_text.required {position: relative; padding-left: 0.625rem;}
.input_box .label_text.required::before { content: ""; position: absolute;  left: 0;  top: 0; width: 0.375rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--brand-primary);}
.input_box .label_text.input_txt {color: var(--basic-darkgray);}
.input_box .input_text {border: 1px solid var(--basic-border); border-radius: 0.625rem;
padding: 0 1rem; background: var(--basic-white); width: 100%; height: 2.75rem; font: var(--16_body_normal_r); letter-spacing: 0.01em; color: var(--basic-darkgray); transition: var(--transition); text-overflow: ellipsis;}
.input_box .input_text:focus {border-color: var(--basic-black);}
.input_box .input_text:read-only { border-color: var(--basic-lightgray);  color: var(--basic-darkgray); background: var(--basic-pale);}
.input_box .input_text::placeholder {color: var(--basic-lightgray); transition: var(--transition);}
.input_box.flex .input_text {flex: 1;}
.input_box textarea.input_text {height: 12.5rem; padding: 0.75rem 1rem; resize: none;}
.input_box .input_text.icon_ver {background: no-repeat right 1rem center/1rem auto var(--basic-white); padding-right: 2.5rem; cursor: pointer;}
.input_box .input_text.icon_ver.icon_edit {background-image: url(../img/ic_edit.png) ;}
.input_box .input_text.icon_ver.icon_date {background-image: url(../img/ic_datepicker.png);}
.input_box .input_text.align_left {text-align: left;}
.input_box .input_text.align_center {text-align: center;}
.input_box .input_text.align_right {text-align: right;}
.input_box .input_text.point {background: var(--primary-primary100); color: var(--basic-darkgray);}

.input_box .input_status {font:var(--14_label_normal_m); letter-spacing: 0.01em; color: var(--basic-middlegray); text-align: left; word-break: keep-all;}
.input_box .input_status.success {color: var(--state-success);}
.input_box .input_status.warning {color: var(--state-warning);}
.input_box .input_status.error {color: var(--state-error);}
.input_box .input_status.point {color: var(--brand-primary);}
.input_box .input_btn{font: var(--16_body_read_m);letter-spacing: 0.01em;color: var(--basic-white); background: var(--basic-black); border-radius: 0.625rem; padding: 0 1rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;} 

.input_flex {display: flex; flex-direction: row; align-items: center; gap: 0.625rem;}
.input_flex.wrap {flex-wrap: wrap;}
.input_flex .input_text {flex: 1;}
.input_flex .full {flex: 1;}
.input_flex .nofull {flex: unset; width: auto;}
.input_flex .input_text.wid80 {flex: unset; width: 5.125rem;}
.input_flex .input_box .input_text {flex:unset}

.input_sch_box {position: relative;}
.input_sch_box .input_text { background: var(--basic-bg); padding: 0 1.25rem; height: 3rem;  padding-right: 3rem; border-radius: 6.25rem; border-color: transparent;}
.input_sch_box .input_text:focus {background: var(--basic-white);}
.input_sch_box .input_text.ver2 {background: var(--basic-white);border: 1px solid var(--basic-border);}
.input_sch_box .sch_btn { background: url(../img/ic_serach.png) no-repeat center / contain; width: 1.25rem;  aspect-ratio: 1 / 1;  position: absolute;  right: 1.25rem;  top: 50%;  transform: translateY(-50%);}

.input_file_wrap {display: flex; flex-direction: column; gap: 0.5rem;}
.input_file_box .input_file {display: none;}
.input_file_box .label_file {flex: 1; border: 1px solid var(--basic-border); border-radius: 0.625rem; padding: 0 1rem; background: var(--basic-white); width: 100%; height: 2.75rem; font: var(--16_body_normal_r); letter-spacing: 0.01em; color: var(--basic-lightgray); transition: var(--transition); text-overflow: ellipsis; display: flex; align-items: center; cursor: pointer;}
.input_file_box .label_file.attached { color: var(--basic-darkgray);}

.input_file_box .label_file.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 0.625rem; border-radius: 0.375rem;}
.input_file_box .label_file.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 0.625rem;  border-radius: 0.375rem;}
.input_file_box .file_data { font: var(--14_label_normal_r);  letter-spacing: 0.01em;    color: var(--basic-darkgray); display: flex; align-items: center; gap: 0.375rem;}
.input_file_box .file_data .icon{ width: 1rem;}
.input_file_box .file_data .txt{white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; display: inline-block;}
.input_file_box .file_data .delete_btn{font-size: 1rem; display: flex; align-items: center; justify-content: center; color: var(--brand-hover);}
.input_file_box .file_preview {display: flex;}
.input_file_box .file_preview.mw100 {max-width: 10rem; }
.input_file_box .file_preview .img{width: 100%; object-fit: contain;}
.input_file_box .file_preview .img.auto {width: auto;}
.input_file_box .file_preview .img.mx60 { max-height: 3.75rem; max-width: 15rem;}

.input_box .input_color {position: relative; appearance: none; border: none; padding: 0;margin: 0; width: 1.5rem; aspect-ratio: 1/1; height: auto; cursor: pointer; border-radius: 0.25rem;}
.input_box .input_color::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);width: calc(100% - 2px);height: calc(100% - 2px);     border: 1px solid var(--basic-border); border-radius: 0.25rem;}
.input_box .input_color::-webkit-color-swatch-wrapper {padding: 0;} 
.input_box .input_color::-webkit-color-swatch {border: none;}
.input_box .input_color::-moz-color-swatch {border: none;}

.input_sch_box .input_text.size_md ~ .sch_btn { width: 0.875rem;  right: 0.625rem; }
.input_sch_box .input_text.size_sm ~ .sch_btn { width: 0.875rem;  right: 0.625rem; }
.input_box .label_text.size_title {font: var(--18_headline_sb);}
.input_box .label_text.size_md {font: var(--14_label_normal_r);}
.input_box .label_text.size_sm {font: var(--13_label_r);}

.input_box .input_text.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 0.625rem; border-radius: 0.375rem;}
.input_box .input_text.size_md.icon_ver {padding: 0 2rem 0 0.625rem; background-position: right 0.625rem center;  background-size: 0.875rem;}
.input_box .input_text.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 0.625rem;  border-radius: 0.375rem;}
.input_box .input_text.size_sm.icon_ver {padding: 0 2rem 0 0.625rem;  background-position: right 0.625rem center; background-size: 0.875rem;}

.input_box textarea.input_text.h_auto {height: unset;}
.input_box textarea.input_text.size_md {padding: 0.625rem;}
.input_box textarea.input_text.size_sm {padding: 0.625rem;}

.input_box .input_btn.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 0.625rem; border-radius: 0.375rem;}
.input_box .input_btn.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 0.625rem;  border-radius: 0.375rem;}


/* datepicker */
#datepicker:focus>.ui-datepicker { display: block; }
.ui-datepicker { font-family: inherit; display: none; margin-top: 0.75rem; margin-left: 0px; margin-right: 0px;  width: auto;  box-shadow: 0 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.1); border: 1px solid var(--basic-pale); border-radius: 1rem; padding: 1.25rem 0.5rem;  background: var(--basic-white);}
.ui-widget.ui-widget-content {border: 1px solid var(--basic-pale);}
.ui-datepicker .ui-datepicker-header { position: relative; padding: 0 0.625rem; display: flex;  align-items: center; border-radius: 0; background: #fff; margin-bottom: 1.25rem;  border: 0;}
.ui-datepicker .ui-datepicker-title { flex: 1;  margin: 0;  padding: 0;  text-align: left; order: 1;  font: var(--16_body_normal_sb); letter-spacing: 0.01em;  color: var(--basic-black);}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: relative; width: 1rem  !important; height: auto !important; left: auto; right:auto; top: auto; aspect-ratio: 1 / 1; display: flex; cursor: pointer;}
.ui-datepicker .ui-datepicker-prev {order: 2; margin-right: 0.5rem;}
.ui-datepicker .ui-datepicker-next {order: 3;}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span { background: no-repeat center / contain; width: 100%; height: 100%;}
.ui-datepicker .ui-datepicker-prev span{ background-image: url(../img/datepicker_prev.png);}
.ui-datepicker .ui-datepicker-next span{ background-image: url(../img/datepicker_next.png);}
.ui-datepicker-calendar { width: 100%; }  
.ui-datepicker table {margin: 0;}
.ui-datepicker-calendar>thead>tr>th { width: 1.875rem; height: 1.875rem;  padding: 0;  }
.ui-datepicker-calendar>thead>tr>th span {font: var(--16_body_normal_m); letter-spacing: 0.01em; color: var(--basic-black);}
.ui-datepicker-calendar>thead>tr>th span[title="일요일"] {color: var(--state-error);}
.ui-datepicker-calendar>thead>tr>th span[title="토요일"] {color: var(--state-info);}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: none; background-color: transparent;text-align: center; width: 1.875rem; height: 1.875rem; padding: 0; font: var(--16_body_normal_m);    display: flex;  align-items: center; justify-content: center;letter-spacing: 0.01em;color: var(--basic-darkgray);}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,
.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,
.ui-button:hover,.ui-button:focus { border: none; background-color: transparent;text-align: center; width: 1.875rem; height: 1.875rem; padding: 0; font: var(--16_body_normal_m);   display: flex;  align-items: center; justify-content: center;letter-spacing: 0.01em;color: var(--basic-darkgray);}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {border: none; background: transparent; position: relative; color: #fff}
.ui-state-active::before, .ui-widget-content .ui-state-active::before, .ui-widget-header .ui-state-active::before, a.ui-button:active::before, .ui-button:active::before, .ui-button.ui-state-active:hover::before { content: ""; border-radius: 0.5rem; background: var(--basic-black);  width: 1.875rem; aspect-ratio: 1 / 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;}
.ui-state-disabled { cursor: auto; color: #cccccc;}    
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {cursor: auto;  background-color: #fff; }  
.ui-state-disabled, .ui-widget-content .ui-state-disabled , .ui-widget-header .ui-state-disabled { opacity: 1;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled span, .ui-widget-header .ui-state-disabled span { color: var(--basic-lightgray);}


/* select */
.select_box {position: relative;}
.select_box.full {width: 100%; flex: 1;}
.select_box .select { appearance: none; width: 100%; height: 2.75rem; font: var(--16_body_normal_r);  letter-spacing: 0.01em;  color: var(--basic-darkgray);  background: url(../img/select_arrow.png) no-repeat right 1rem center / 1rem var(--basic-white); border: 1px solid var(--basic-border); border-radius: 0.625rem; padding: 0 2.5rem 0 1rem; transition: var(--transition); cursor: pointer;text-overflow: ellipsis;}
.select_box .select:disabled { border-color: var(--basic-lightgray);  color: var(--basic-darkgray); background-color: var(--basic-pale);}

.select_box .select.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 2rem 0 0.625rem; background-position: right 0.625rem center;  background-size: 0.875rem; border-radius: 0.375rem;}
.select_box .select.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 2rem 0 0.625rem;  background-position: right 0.625rem center; background-size: 0.75rem; border-radius: 0.375rem;}
.select_box .select.point {background-color: var(--primary-primary100); color: var(--basic-darkgray); }
.select_box .select.typeB { height: unset;padding: 0.5rem; background: #fff;}
.select_box .select.typeB option {padding: 0.25rem 0.5rem; transition: var(--transition);}
.select_box .select.typeB option.tit { color: var(--brand-hover); font-weight: 800;  border-bottom: 1px solid var(--basic-border); margin-bottom: 0.5rem;}
.select_box .select.typeB option:hover {background: var(--primary-primary200); color: var(--brand-hover); }
.select_box .select.typeB option:checked {background: var(--brand-primary); color: var(--basic-white);}


/* checkbox */
.check_wrap {position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1.25rem;}
.check_box {display: flex; align-items: center; gap: 0.5rem;}
.check_box.align_start {align-items: flex-start;}
.check_box .input_check{position: relative; appearance: none; border: 1px solid var(--basic-border); border-radius: 0.25rem; width: 1.25rem; height: 1.25rem; background: var(--basic-white); transition: var(--transition); cursor: pointer;}
.check_box .input_check::before{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(../img/ic_check_off.png) no-repeat center/contain; width: 0.75rem; aspect-ratio: 1/1; transition: var(--transition); }
.check_box .input_check:checked{background:  var(--brand-primary); border-color:  var(--brand-primary);}
.check_box .input_check:checked::before{background-image: url(../img/ic_check_on.png);}
.check_box .label_check{font: var(--16_body_normal_r);letter-spacing: 0.01em;color: var(--basic-darkgray); cursor: pointer; margin-bottom: 0;}
.check_box .input_check:disabled {pointer-events: none;}
.check_box .input_check:disabled + .label_check{color: var(--basic-lightgray);pointer-events: none;}
.check_box .label_check img {display: inline-block; vertical-align: middle;}
.check_box .label_check .point {color: var(--brand-primary);}
.check_box .label_check .underline {text-decoration: underline;text-decoration-skip-ink: none;font-weight: 600; text-underline-offset: 3px;}
.check_box .label_check .imgbadge {height: 1.25rem;}
.check_box .label_check.flexible { display: flex; align-items: center; gap: 0.5rem;}

.check_box.size_md {gap: 0.375rem;}
.check_box.size_md .input_check  { width: 1.125rem; height: 1.125rem;}
.check_box.size_md .input_check::before {  width: 0.625rem;}
.check_box.size_md .label_check {font: var(--14_label_normal_r);}
.check_box.size_md .label_check.flexible { gap: 0.375rem;}
.check_box.size_sm {gap: 0.25rem;}
.check_box.size_sm .input_check  { width: 1rem; height: 1rem;}
.check_box.size_sm .input_check::before {  width: 0.625rem;}
.check_box.size_sm .label_check {font: var(--13_label_r);}
.check_box.size_sm .label_check.flexible { gap: 0.25rem;}


/* radio Button */
.radio_wrap {position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1.25rem;}
.radio_wrap.gap2 {gap: 0.375rem 0.625rem;}
.radio_box {display: flex; align-items: center; gap: 0.5rem;}
.radio_box.align_start {align-items: flex-start;}
.radio_box .input_radio{position: relative; appearance: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--basic-border);transition: var(--transition); cursor: pointer; border-radius: 50%; margin: 0; padding: 0; background: var(--basic-white);} 
.radio_box .input_radio::before{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; width: 70%; aspect-ratio: 1/1; background: var(--basic-border); transition: var(--transition); opacity: 0;}
.radio_box .input_radio:checked{border-color:  var(--brand-primary);}
.radio_box .input_radio:checked::before{background: var(--brand-primary); opacity: 1;}
.radio_box .label_radio{font: var(--16_body_normal_r);letter-spacing: 0.01em;color: var(--basic-darkgray); cursor: pointer;}
.radio_box .label_radio img {display: inline-block; vertical-align: middle;}
.radio_box .label_radio .point {color: var(--brand-primary); font-weight: 500;}
.radio_box .label_radio .imgbadge {height: 1.25rem;}
.radio_box .input_radio:disabled {pointer-events: none;}
.radio_box .input_radio:disabled + .label_radio{color: var(--basic-lightgray);pointer-events: none;}

.radio_box.size_md {gap: 0.375rem;}
.radio_box.size_md .input_radio { width: 1rem; height: 1rem;}
.radio_box.size_md .label_radio {font: var(--14_label_normal_r);}
.radio_box.size_sm {gap: 0.25rem;}
.radio_box.size_sm .input_radio { width: 0.875rem; height: 0.875rem;}
.radio_box.size_sm .label_radio {font: var(--13_label_r);}


/* good check */
.goodcheck_box {width: 100%; }
.goodcheck_box .check_box .label_check,
.goodcheck_box .radio_box .label_radio {display: flex; align-items: center; gap: 0.25rem;}
.goodcheck_box .badge.type_re {background: var(--badge-re-color); color: var(--basic-white);}
.goodcheck_box .badge.type_or {background: var(--badge-or-color); color: var(--basic-white);} 
.goodcheck_box .badge.type_ye {background: var(--badge-ye-color); color: var(--basic-white);}
.goodcheck_box .badge.type_gr {background: var(--badge-gr-color); color: var(--basic-white);}
.goodcheck_box .badge.type_bl {background: var(--badge-bl-color); color: var(--basic-white);}
.goodcheck_box .badge.type_nv {background: var(--badge-nv-color); color: var(--basic-white);}
.goodcheck_box .badge.type_pp {background: var(--badge-pp-color); color: var(--basic-white);}
.goodcheck_box .badge.type_pk {background: var(--badge-pk-color); color: var(--basic-white);}
.goodcheck_box .badge.type_bk {background: var(--badge-bk-color); color: var(--basic-white);}


/* rate */
.rateStar_box { display: flex; gap: 0.125rem; font-size: 1.125rem; color: var(--brand-hover);}


/* switch Button */
.switch_box {position: relative; display: flex; align-items: center; gap:0.5rem;}
.switch_box .input_switch{position: relative; appearance: none; width: 2.75rem; height: 1.5rem; background: var(--basic-border); border-radius: 6.25rem; cursor: pointer; transition: var(--transition);}
.switch_box .input_switch::before{ content: ""; position: absolute; left: 0.125rem;  top: 50%; transform: translateY(-50%); width: 1.25rem; aspect-ratio: 1 / 1; border-radius: 6.25rem; background: var(--basic-white); transition: var(--transition);}
.switch_box .input_switch:checked{background: var(--brand-primary);}
.switch_box .input_switch:checked::before{left: calc(100% - 1.25rem - 0.125rem);}
.switch_box .label_switch{font: var(--16_body_normal_r);letter-spacing: 0.01em;color: var(--basic-darkgray); cursor: pointer; margin-bottom: 0;}
.switch_box.reverse { flex-direction: row-reverse;}


/* tab */
.tab_wrap {position: relative; display: flex; flex-direction: column; gap: 2.5rem;}
.tab_navbox {position: relative; display: flex;background: var(--basic-white);}
.tab_navbox::before {position: relative; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.188rem; background:  var(--basic-pale); transition: var(--transition);} 
.tab_navbox .tab_nav {position: relative; flex: 1; font: var(--16_body_normal_r); letter-spacing: 0.01em;  text-align: center;  color: var(--basic-middlegray);  cursor: pointer; transition: var(--transition);}
.tab_navbox .tab_nav.on { color: var(--basic-black); font-weight: 600;}
.tab_navbox .tab_nav::after { content: ""; position: absolute; left: 50%; bottom: 0;  transform: translateX(-50%);  width: 100%; height: 0.188rem;  background: var(--brand-primary); opacity: 0; transition: var(--transition);}
.tab_navbox .tab_nav.on::after {opacity: 1;}
.tab_navbox .tab_nav .link {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;  padding-bottom: 0.625rem;}
.tab_navbox .tab_nav .link:hover {text-decoration: none;}
.tab_contbox { position: relative;}
.tab_contbox .tab_cont { display: none; animation: 1.2s ease 0s fadeIn;}
.tab_contbox .tab_cont.on {display: block;}
@keyframes fadeIn {	0% {opacity:0} 100% {opacity:1;} }

.tab_navbox.round_ver { gap: 0.625rem; background: none;}
.tab_navbox.round_ver .tab_nav {flex: unset; background: #e7f2ff; font: var(--15_body_normal_m); letter-spacing: 0.01em; color: var(--brand-hover); height: 2.25rem; border-radius: 6.25rem; }
.tab_navbox.round_ver::before,
.tab_navbox.round_ver .tab_nav::after {display: none}
.tab_navbox.round_ver .tab_nav.on { box-shadow: 0 0 1.25rem 0 rgb(8 107 241 / 30%);  background: var(--brand-primary); color: var(--basic-white);}
.tab_navbox.round_ver .tab_nav .link {padding: 0 1.5rem;}

.tab_navbox.tabs_ver {position: relative; border: 1px solid var(--brand-hover); border-radius: 0.625rem; overflow: hidden;}
.tab_navbox.tabs_ver::before {display: none}
.tab_navbox.tabs_ver .tab_nav{position: relative; color: var(--brand-hover);}
.tab_navbox.tabs_ver .tab_nav::after {display: none}
.tab_navbox.tabs_ver .tab_nav::before {content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: var(--brand-hover); opacity: 1; pointer-events: none;}
.tab_navbox.tabs_ver .tab_nav:last-child::before {display: none;}
.tab_navbox.tabs_ver .tab_nav.on{background : var(--brand-hover); color: var(--basic-white);}
.tab_navbox.tabs_ver .tab_nav .link { padding: 0.5rem 1rem; white-space: nowrap;}

.tab_wrap.size_md .tab_navbox .tab_nav { font: var(--14_label_normal_r); height: 2.125rem;}
.tab_wrap.size_md .tab_navbox.tabs_ver { border-radius: 0.375rem;}

.tab_swiper {width: 100%;}
.tab_swiper .swiper-slide {width: auto; white-space: nowrap;}
/* .tab_swiper .swiper-slide:last-child {margin-right: 0;} */


/* pagination */
.pagination {display: flex; align-items: center; justify-content: center; gap: 1rem;}
.pagination.mt {margin-top: 2.5rem;}
.pagination .page {border: 1px solid var(--basic-border);border-radius: 0.5rem; width: 2.5rem; aspect-ratio: 1/1;display: flex; align-items: center; justify-content: center;  background-color: var(--basic-white); overflow: hidden; }
.pagination .page_btn{position: relative;}
.pagination .page_btn.prev{margin-left: -0.5rem;}
.pagination .page_btn.next{margin-right: -0.5rem;}
.pagination .page_btn::after {content: ""; background: no-repeat center/contain; width: 1.25rem; aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.pagination .page_btn.start::after{background-image: url(../img/page_start.png);}
.pagination .page_btn.prev::after{background-image: url(../img/page_prev.png);}
.pagination .page_btn.next::after{background-image: url(../img/page_next.png);}
.pagination .page_btn.end::after{background-image: url(../img/page_end.png);}
.pagination .page_link{font: var(--14_label_normal_r);letter-spacing: 0.01em;text-align: center;color: var(--basic-darkgray);}
.pagination .page_link.active{color: var(--basic-white); font-weight: 600;background: var(--brand-primary);}
.pagination .page a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative;}


/* button */
.button_wrap {position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1.25rem;}
.button {display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.625rem; height: 3.125rem; width: 12.5rem; padding: 0 5rem; font: var(--18_headline_m);letter-spacing: 0.01em;color: var(--basic-white); transition: var(--transition);}
.button.typeA {border: 1px solid var(--brand-primary); background: var(--brand-primary); color: var(--basic-white);}
.button.typeA:hover { box-shadow: 0 0 12px rgba(8, 107, 241, 0.5)}
.button.typeB {border: 1px solid var(--brand-primary); background: var(--basic-white); color: var(--brand-primary);}
.button.typeB:hover { box-shadow: 0 0 12px rgba(8, 107, 241, 0.5)}
.button.typeC {border: 1px solid var(--basic-black); background: var(--basic-black); color: var(--basic-white);}
.button.typeC:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);}
.button.typeD {border: 1px solid var(--basic-middlegray); background: var(--basic-white); color: var(--basic-darkgray);}
.button.typeD:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);}
.button.typeE {border: 1px solid var(--brand-hover); background: var(--brand-hover); color: var(--basic-white);}
.button.typeE:hover { box-shadow: 0 0 12px rgba(0, 48, 107,0.5)}
.button.typeF {border: 1px solid var(--brand-hover); background: var(--basic-white); color: var(--brand-hover);}
.button.typeF:hover { box-shadow: 0 0 12px rgba(0, 48, 107,0.5)}
.button.typeG {border: 1px solid var(--basic-white); color: var(--basic-white);}
.button.typeG:hover { box-shadow: 0 0 12px rgba(255, 255, 255, 0.5)}
.button.type_success {background: var(--state-success); color: var(--basic-white); border-color: var(--state-success);}
.button.type_info {background: var(--state-info); color: var(--basic-white); border-color: var(--state-info);}
.button.type_warning {background: var(--state-warning); color: var(--basic-white);border-color: var(--state-warning);}
.button.type_error {background: var(--state-error); color: var(--basic-white); border-color: var(--state-error);}
.button:disabled {border: 1px solid var(--basic-pale); background: var(--basic-pale); color: var(--basic-lightgray);}
.button.round {border-radius: 6.25rem;}
.button.auto {width: auto;}
.button.full {width: 100%;}
.button.size_md { font: var(--16_body_normal_m); height: 2.5rem;  border-radius: 0.5rem; padding: 0 1.25rem; gap: 0.375rem; }
.button.size_sm { font: var(--14_label_normal_m); height: 2.25rem;  border-radius: 0.375rem; padding: 0 1rem; gap: 0.375rem }
.button .icon {width: 1.25rem; font-size: 1.375rem;}
.button.size_md .icon {width: 1.125rem; font-size: 1.25rem;}
.button.size_sm .icon {width: 1rem; font-size: 1.125rem;}

.icon_button { display: inline-flex; align-items: center;  justify-content: center; vertical-align: bottom;}
.icon_button .icon {width: 1.25rem; font-size: 1.375rem; color: var(--brand-hover);}
.icon_button.size_md .icon {width: 1.125rem; font-size: 1.25rem;}
.icon_button.size_sm .icon {width: 1rem; font-size: 1.125rem;}


/* tags */
.tagsbox {display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1rem;}
.tag{font: var(--14_label_normal_r); display: flex; align-items: center; justify-content: center;letter-spacing: 0.01em; border: 1px solid transparent; border-radius: 0.25rem; padding: 0.375rem 0.625rem;}
.tag.typeA {background: var(--brand-primary); color: var(--basic-white);border-color: var(--brand-primary);} 
.tag.typeB {background: var(--basic-white); color: var(--brand-primary); border-color: var(--brand-primary);}
.tag.typeC {background: var(--state-success); color: var(--basic-white); border-color: var(--state-success);}
.tag.typeD {background: var(--state-info); color: var(--basic-white); border-color: var(--state-info);}
.tag.typeE {background: var(--state-warning); color: var(--basic-white);border-color: var(--state-warning);}
.tag.typeF {background: var(--state-error); color: var(--basic-white); border-color: var(--state-error);}
.tag.typeG {background: var(--basic-lightgray);color: var(--basic-white) ;border-color: var(--basic-lightgray);}
.tag.typeH {background: var(--basic-black);color: var(--basic-white); border-color: var(--basic-black);}


/* badge */
.badgebox {display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1rem;}
.badge {display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font: var(--12_caption_m); letter-spacing: 0.03em; border: 1px solid var(--basic-border); border-radius: 0.313rem; padding: 0.188rem 0.375rem; text-transform: uppercase;}
.badge .icon {width: 0.75rem; display: inline-block; vertical-align: middle;}
.badge .icon[class^="ph"] { width: auto; font-size: 0.75rem;}
.badge .picpon {font-size: 0.75rem; display: inline-block; vertical-align: middle;}

.badge.pointer {cursor: pointer;}
.badge.size_sm { font:var(--10_caption_m); border-radius: 0.25rem; padding: 0.125rem 0.313rem; gap: 0.125rem;}
.badge.size_bg { font:var(--14_label_read_m); border-radius: 0.375rem; padding: 0.188rem 0.375rem; gap: 0.5rem;}
.badge.size_button { font:var(--14_label_read_m); height: 2.25rem; border-radius: 0.375rem; padding: 0 0.75rem; gap: 0.5rem;}
.badge.size_sm .icon {width: 0.625rem;}
.badge.size_sm .picpon {font-size: 0.75rem;}
.badge.size_bg .icon {width: 0.875rem;}
.badge.size_bg .picpon {font-size: 1rem;}
.badge.size_button .icon {width: 0.875rem;}
.badge.size_button .picpon {font-size: 0.875rem;}
.badge.full {width: 100%;}

.badge.typeA {background: var(--state-info);color: var(--basic-white);border-color: var(--state-info);} 
.badge.typeB {background: var(--basic-white); color: var(--state-error);border-color: var(--state-error);}
.badge.typeC {background: var(--state-error);color: var(--basic-white); border-color: var(--state-error);}
.badge.typeD {background: var(--brand-primary);color: var(--basic-white);border-color: var(--brand-primary);}
.badge.typeE {background: var(--basic-black);color: var(--basic-white);border-color: var(--basic-black);}
.badge.typeF {background: #ab3bcd; color: var(--basic-white);border-color: #ab3bcd;}
.badge.typeG {background: var(--brand-hover);color: var(--basic-white);border-color: var(--brand-hover);}
.badge.typeH {background: var(--basic-white); color: var(--brand-hover);border-color: var(--brand-hover);}

.badge.type_re {background: var(--badge-re-bg); color: var(--badge-re-color); border-color: var(--badge-re-bg);} 
.badge.type_or {background: var(--badge-or-bg); color: var(--badge-or-color); border-color: var(--badge-or-bg);} 
.badge.type_ye {background: var(--badge-ye-bg); color: var(--badge-ye-color); border-color: var(--badge-ye-bg);} 
.badge.type_gr {background: var(--badge-gr-bg); color: var(--badge-gr-color); border-color: var(--badge-gr-bg);} 
.badge.type_bl {background: var(--badge-bl-bg); color: var(--badge-bl-color); border-color: var(--badge-bl-bg);}
.badge.type_nv {background: var(--badge-nv-bg); color: var(--badge-nv-color); border-color: var(--badge-nv-bg);}
.badge.type_pp {background: var(--badge-pp-bg); color: var(--badge-pp-color); border-color: var(--badge-pp-bg);}
.badge.type_pk {background: var(--badge-pk-bg); color: var(--badge-pk-color); border-color: var(--badge-pk-bg);}
.badge.type_bk {background: var(--badge-bk-bg); color: var(--badge-bk-color); border-color: var(--badge-bk-bg);}

.imgbadge {display: inline-block; vertical-align: middle; height: 18px; }

.iconbadge {background: no-repeat center/contain; width: 1.5rem; aspect-ratio: 1/1; border-radius: 6.25rem; display: inline-block; vertical-align: middle;}
.iconbadge.success {background-image: url(../img/ic_success.png); background-color: var(--state-success);}
.iconbadge.warning {background-image: url(../img/ic_warning.png); background-color: var(--state-warning);}
.iconbadge.error {background-image: url(../img/ic_error.png); background-color: var(--state-error);}
.iconbadge.reset {background-image: url(../img/ic_reset.png); background-color: var(--state-info);}
.iconbadge.size_md {width: 1.25rem;}
.iconbadge.size_sm {width: 1.125rem;}

.numberbadge {font:var(--14_label_normal_r); letter-spacing: 0.01em; color: var(--brand-primary); background: var(--primary-primary200); border-radius: 6.25rem;
padding: 0.125rem 0.5rem;}
.topbadge { display: inline-flex;  align-items: center;  justify-content: center;   border: 1px solid var(--basic-border);  padding: 0.5rem 0.625rem;  border-radius: 0.375rem; color: var(--basic-darkgray); background: var(--basic-white); font: var(--14_label_normal_r);}
.topbadge b {font-weight: 600;}

.part_icon { max-height: 1.125rem; max-width: 3.125rem; object-fit: contain;}


/* table */
.tbl_top {width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; font:var(--14_label_normal_r); color: var(--basic-darkgray); white-space: nowrap;}
.tbl_top.column {flex-direction: column; align-items: unset; gap: 0.25rem;}
.tbl_top.bottom_ver {margin-bottom: 0; margin-top: 1.5rem;}
.tbl_top .leftbox {display: flex; align-items: center; gap: 0.5rem; max-width: 100%;}
.tbl_top .rightbox {display: flex; align-items: center; gap: 0.5rem; max-width: 100%;}
.tbl_top .title {color: var(--basic-black);  font:var(--16_body_normal_sb)}
.tbl_top .title_size_bg {font:var(--20_heading_sb); margin-right: 0.5rem;}
.tbl_top .total {color: var(--basic-black);}
.tbl_top .total .color{color: var(--brand-primary); font-weight: 600;}
.tbl_top .note_txt {width: 100%; font:var(--14_label_normal_r); color: var(--state-error); display: flex; align-items: center; gap: 0.25rem;}
.tbl_top .note_txt .icon{font-size: 1.125rem; color: var(--state-error);}
.tbl_top .note_txt .txt {flex: 1;}
.tbl_top  .typebox {  height:2.25rem; display: flex; align-items: center;  gap: 0.75rem;  background: var(--basic-white); padding: 0.5rem 1rem; border: 1px solid var(--basic-border2);  border-radius: 0.5rem; font: var(--14_label_normal_r); color: var(--basic-darkgray);}
.tbl_top .typebox .item {display: flex;align-items: center;gap: 0.25rem;}
.tbl_top .typebox .item .color{width: 1rem; aspect-ratio: 1/1; border-radius: 0.25rem; opacity: 0.5;}
.tbl_top .typebox .item .txt{line-height: 1; white-space: nowrap;}
.tbl_top .mx50 {max-width: 3.125rem;}

.tbl_bottom {display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2.5rem;}
.tbl_bottom.mt1 {margin-top: 1rem;}
.tbl_bottom .button.mn100 {min-width: 6.25rem;}

.tbl_area { position: relative; display: flex; align-items: flex-start;  box-shadow: var(--box-shadow); border: 1px solid var(--basic-border2);}
.tbl_area .tbl_box + .tbl_box {border-left: 1px solid var(--basic-border2)}
.tbl_area .tbl_box.wid50 {width: 50%;}
.tbl_area .tbl_box.wid33 {width: 33.333%;}
.tbl_area .tbl_box.wid25 {width: 25%;}
.tbl_area .tbl_box.wid20 {width: 20%;}

.tbl_area.gap {gap: 1rem; box-shadow: none; border: none;}
.tbl_area .tbl_cont.wid60 {width: 60%;}
.tbl_area .tbl_cont.wid50 {width: 50%;}
.tbl_area .tbl_cont.wid40 {width: 40%;}
.tbl_area .tbl_cont.wid33 {width: 33.333%;}
.tbl_area .tbl_cont.wid25 {width: 25%;}
.tbl_area .tbl_cont.wid20 {width: 20%;}

.tbl_wrap { position: relative; display: flex; flex-direction: column; gap: 2.5rem;}
.tbl_box { position: relative; width: 100%; overflow: auto;  box-shadow: var(--box-shadow);  border: 1px solid var(--basic-border2); border-radius: 0.625rem;}
.tbl_box.ver2 {border: none; box-shadow: none; border-radius: 0;}
.tbl_box.ver3 {border: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--basic-black);border-bottom: 1px solid var(--basic-border2);}
.tbl_box.ver3 .tbl thead tr th, 
.tbl_box.ver3 .tbl tbody tr th, 
.tbl_box.ver3 .tbl tbody tr td {padding: 1rem;}

.tbl { width: 100%; border-collapse: collapse; font: var(--14_label_normal_r); word-break: keep-all; }
.tbl thead { background: var(--basic-bg2); border-bottom: 1px solid var(--basic-border2);}
.tbl thead tr th {padding: 1.125rem 1rem; font-weight: 600; letter-spacing: 0.01em;color: var(--basic-darkgray); text-align: center;border-right: 1px solid var(--basic-border2); }
.tbl thead tr th:last-child {border-right: 0;}
.tbl thead tr th:last-child.border {border-right: 1px solid var(--basic-border2); }
.tbl thead tr:not(:first-child) th {border-top: 1px solid var(--basic-border2);}
.tbl thead tr th.point {color: var(--brand-primary);}
.tbl thead tr th .point {color: var(--brand-primary);}
.tbl thead tr th .sort_btn { font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: space-evenly; vertical-align: middle; color: var(--brand-hover);}
.tbl thead tr th .sort_btn.asc::before{content: "\e444";}
.tbl thead tr th .sort_btn.desc::before{content: "\e446";}
.tbl tbody tr { border-bottom: 1px solid var(--basic-border2);}
.tbl tbody tr:last-child {border-bottom: 0;}
.tbl tbody tr.selected th,
.tbl tbody tr.selected td {background: var(--primary-primary200); color: var(--brand-hover);}

.tbl tbody tr th, .tbl tbody tr td{position: relative; letter-spacing: 0.01em; color: var(--basic-darkgray); padding: 0.75rem 1rem; height: 4rem; background: var(--basic-white);border-right: 1px solid var(--basic-border2);}
.tbl tbody tr th:last-child, 
.tbl tbody tr td:last-child {border-right:0}
.tbl tbody tr th:last-child.border, 
.tbl tbody tr td:last-child.border  {border-right: 1px solid var(--basic-border2); }
.tbl tbody tr th {text-align: left; background: var(--basic-bg2); font-weight: 600;}
.tbl tbody tr.thead th {text-align: center;}
.tbl tbody tr th.point {color: var(--brand-primary);}
.tbl tbody tr th .point {color: var(--brand-primary);}
.tbl tbody tr th .point_error {color: var(--state-error);}
.tbl tbody tr th .required {position: relative; padding-right: 0.5rem;}
.tbl tbody tr th .required::before { content: ""; position: absolute;  right: 0;  top: 0; width: 0.25rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--brand-primary);}
.tbl tbody tr th .desc {font-size:0.85em; word-break: keep-all;}
.tbl tbody tr th.align_left {text-align: left;}
.tbl tbody tr th.align_center {text-align: center;}
.tbl tbody tr th.align_right {text-align: right;}
.tbl tbody tr th.align_top {vertical-align: top;}
.tbl tbody tr td {text-align: center;}
.tbl tbody tr td.align_left {text-align: left;}
.tbl tbody tr td.align_center {text-align: center;}
.tbl tbody tr td.align_right {text-align: right;}
.tbl tbody tr td.align_top {vertical-align: top;}
.tbl tbody tr td .point {color: var(--brand-primary);}
.tbl tbody tr td .point_error {color: var(--state-error);}
.tbl tbody tr td .copy_btn {  width: 1.875rem;  aspect-ratio: 1 / 1;  background: var(--brand-hover); display: flex; align-items: center;justify-content: center;  border-radius: 50%;  font-size: 1rem; color: var(--basic-white);}
.tbl tbody tr td .vacation_btn { font:inherit; color: inherit;}
.tbl tbody tr td.break_word {word-break: break-word;}

.tbl tbody tr.note td {background: #e8f3ff; color: var(--brand-hover);}
.tbl tbody tr.line td {background: var(--basic-bg);}
.tbl tbody tr.line td::after {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 1px; background: var(--state-error);}
.tbl tbody tr td.point {background: #fbfbfb; color: var(--brand-hover);}
.tbl tbody tr .tbl_content {text-align: left;}
.tbl tbody tr .tbl_inline {display: flex; align-items: center; gap: 0.5rem;}
.tbl tbody tr .tbl_inline.wrap {flex-wrap: wrap;}
.tbl tbody tr .tbl_inline.gap2 {gap: 1rem;}
.tbl tbody tr .tbl_inline.gap3 {gap: 2rem;}
.tbl tbody tr .tbl_inline.align_top{align-items: flex-start;}
.tbl tbody tr .tbl_inline.align_middle{align-items: center;}
.tbl tbody tr .tbl_inline.align_bottom{align-items: flex-end;}
.tbl tbody tr .tbl_inline.align_left{justify-content: flex-start;}
.tbl tbody tr .tbl_inline.align_center{justify-content: center;}
.tbl tbody tr .tbl_inline.align_right{justify-content: flex-end;}
.tbl tbody tr .tbl_inline.between{justify-content: space-between;}
.tbl tbody tr .tbl_inline.column_ver {flex-direction: column; gap: 0.25rem; }
.tbl tbody tr .tbl_inline.column_ver.gap2 {flex-direction: column; gap: 0.625rem; }
.tbl tbody tr .tbl_inline.column_ver.gap3 {flex-direction: column; gap: 1.25rem; }
.tbl tbody tr .tbl_inline.column_ver.align_left {align-items: flex-start;}
.tbl tbody tr .tbl_inline.column_ver.align_center {align-items: center;}
.tbl tbody tr .tbl_inline.column_ver.align_right {align-items: flex-end;}
.tbl tbody tr .tbl_inline .input_box {flex:1}
.tbl tbody tr .tbl_inline .flex_auto {flex:unset; width: auto;}
.tbl tbody tr .tbl_inline .w100 {width: 100%;}
.tbl tbody tr .tbl_inline .w50 {width: calc((100% - 0.5rem)/2);}
.tbl tbody tr .tbl_inline .w33 {width: calc((100% - 0.5rem*2)/3);}
.tbl tbody tr .tbl_inline .w25 {width: calc((100% - 0.5rem*3)/4);}
.tbl tbody tr .tbl_inline .w20 {width: calc((100% - 0.5rem*4)/5);}
.tbl tbody tr .tbl_btnbox {display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.tbl tbody tr .tbl_btnbox.center {justify-content: center;}
.tbl tbody tr .tbl_btnbox .button {padding: 0 0.75rem;}
.tbl tbody tr .tbl_icon { width: 0.875rem; display: inline-flex;  vertical-align: middle;}
.tbl thead tr .tbl_picon,
.tbl tbody tr .tbl_picon {font-size: 1.125rem; display: inline-flex;  vertical-align: middle;}
.tbl tbody tr .tbl_img {display: flex; align-items: center; justify-content: center;}
.tbl tbody tr .tbl_img.mx60 {max-width: 3.75rem;  margin: 0 auto;}
.tbl tbody tr .tbl_img .img {width: 100%; height: 100%; object-fit: cover;}
.tbl tbody tr .tbl_nopost { padding: 2rem; color: var(--basic-middlegray); font: var(--16_body_read_r); display: flex; flex-direction: column; align-items: center; gap: 0.625rem;}
.tbl tbody tr .tbl_nopost .icon {font-size: 2rem; display: flex;}
.tbl tbody tr .bold {font-weight: 600;}
.tbl tbody tr .red {color: var(--state-error);}
.tbl tbody tr .blue {color: var(--state-info);}
.tbl tbody tr .color_wrap {display: flex; align-items: center; gap: 1.25rem;}
.tbl tbody tr .color_wrap .colorchips {display: flex; gap: 0.25rem;}
.tbl tbody tr .color_wrap .colorchips .color{width: 1.5rem; aspect-ratio: 1 / 1; cursor: pointer; border-radius: 0.25rem;}
.tbl tbody tr .color_wrap .colorchips .color1{ background: var(--pastel-ny);}
.tbl tbody tr .color_wrap .colorchips .color2{ background: var(--pastel-bl);}
.tbl tbody tr .color_wrap .colorchips .color3{ background: var(--pastel-gr);}
.tbl tbody tr .color_wrap .colorchips .color4{ background: var(--pastel-bk);}
.tbl tbody tr .color_wrap .colorchips .color5{ background: var(--pastel-or);}
.tbl tbody tr .color_wrap .colorchips .color6{ background: var(--pastel-ye);}
.tbl tbody tr .color_wrap .colorchips .color7{ background: var(--pastel-pk);}
.tbl tbody tr .color_wrap .colorchips .color8{ background: var(--pastel-pp);}
.tbl tbody tr:nth-last-child(-n+1) .opt_popup {top: auto;bottom: 1rem}

.tbl.space_auto thead tr th {padding: 0.75rem 1rem;}
.tbl.space_auto tbody tr th, 
.tbl.space_auto tbody tr td {height: unset;}
.tbl.space_md thead tr th,
.tbl.space_md tbody tr th, 
.tbl.space_md tbody tr td {padding: 0.5rem 1rem;}
.tbl.space_sm thead tr th,
.tbl.space_sm tbody tr th, 
.tbl.space_sm tbody tr td {padding: 0.375rem 1rem;}

.tbl.ver2 thead { border-top: 2px solid var(--brand-hover); background: none}
.tbl.ver2 thead tr th {border-right: 0; text-align: left; background: var(--basic-white);}
.tbl.ver2 thead tr th:nth-child(1) {border-left: 0; }
.tbl.ver2 tbody tr th, .tbl.ver2 tbody tr td { height: auto; border-right: 0; text-align: left; padding: 1rem;}
.tbl.ver2 tbody tr th:nth-child(1), .tbl.ver2 tbody tr td:nth-child(1) {border-left: 0;}
.tbl.ver2 tbody tr td:nth-child(1) {border-left: 0;}

.tbl [data-th="checkbox"] {text-align: center;}
.tbl [data-th="checkbox"] .check_box { display: inline-flex;text-align: center; vertical-align: middle;}
.tbl .check_box.inline { display: inline-flex; vertical-align: middle;} 
.tbl .check_box.auto {margin: 0 auto;}


/* modal */
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0, 0, 0, 0.5); transition: all 0.4s ease; pointer-events: none; opacity: 0;}
.modal.show { pointer-events: auto; opacity: 1;}
.modal .modal_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 1.5rem; background: var(--basic-white); box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1); padding: 3rem 2rem 2rem; min-width: 500px;  max-width: 90%; max-height: 90%; display: flex; flex-direction: column;  align-items: center; transition: var(--transition); margin-top: 2.5rem; opacity: 0; overflow: hidden;}
.modal.show .modal_box { margin-top: 0; opacity: 1;}
.modal .modal_box .modal_img {width: 3.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.125rem;}
.modal .modal_box .modal_tit { font: var(--22_heading_sb); letter-spacing: -0.02em;   text-align: center; color: var(--basic-black);}
.modal .modal_box .modal_desc { font: var(--16_body_normal_r); letter-spacing: 0.01em;  text-align: center;  color: var(--basic-darkgray);}
.modal .modal_box .modal_tit + .modal_desc {margin-top: 0.625rem;}
.modal .modal_box .modal_btnbox { width: 100%; display: flex; justify-content: center;  gap: 0.625rem;  margin-top: 2.25rem;}
.modal .modal_box .modal_btnbox .modal_btn { font: var(--16_body_normal_m);  letter-spacing: 0.01em; min-width: 6rem;  max-width: calc((100% - 0.5rem) / 2);  padding: 0 1.5rem; border-radius: 0.625rem; height: 2.75rem; display: flex; align-items: center; gap: 0.25rem;}
.modal .modal_box .modal_btnbox .modal_btn [class^="ph"] {font-size: 1.125rem;}
.modal .modal_box.ver2 { min-width: 25rem;align-items: unset;padding: 0;background: none; border-radius: 1.25rem;}
.modal .modal_box .modal_head { display: flex; align-items: center; justify-content: space-between;  gap: 1.25rem; background: var(--brand-hover); padding: 1rem;}
.modal .modal_box .modal_head .tit{font: var(--18_headline_m); color: var(--basic-white);}
.modal .modal_box .modal_head .modal_close{background: url(../img/modal_close.png) no-repeat center/contain; width: 1.25rem; aspect-ratio: 1/1; transition: var(--transition); filter: invert(10);} 
.modal .modal_box .modal_body {display: flex; flex-direction: column; align-items: center;padding: 1.875rem; background: var(--basic-white); overflow: auto;}

.modal .modal_searchbox { width: 100%; background: var(--basic-bg2); padding: 1rem; border: 1px solid var(--basic-border2); border-radius: 0.625rem;}
.modal .modal_searchbox .input_flex {justify-content: center;}
.modal .modal_searchbox .input_flex .calender_btn {max-width: 10rem;}
  

/* popup */
.popup { position: absolute;  top: calc(100% + 0.25rem);  right: 0;  min-width: 120px; max-width: 90vw; max-height: 90vh;   background: var(--basic-white);  box-shadow: 0 1px 5px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);   border: 1px solid var(--basic-border2); border-radius: 0.625rem;  overflow: hidden;  z-index: 50; transition: var(--transition); opacity: 0;  pointer-events: none; display: flex; flex-direction: column; gap: 1rem;}
.popup.show {opacity: 1; pointer-events: unset;}
.popup .pop_head { background: var(--brand-hover); padding: 0.5rem 1rem;}
.popup .pop_head .pop_tit{ color: var(--basic-white); font: var(--14_label_normal_m);}
.popup .pop_head .pop_close {background: url(../img/pop_close.png) no-repeat center / contain; width: 2.4rem; aspect-ratio: 1 / 1; display: flex;  position: absolute;  right: 1.6rem; top: 1.4rem; display: none;}
.popup .pop_body { flex: 1; padding: 0.5rem 0; overflow: auto; font-size: 0.833333rem; color: var(--basic-darkgray);}
.popup .pop_body::-webkit-scrollbar {display: none;}
.opt_box { display: inline-block; position: relative;}
.opt_box .opt_btn {width: 2rem; aspect-ratio: 1 / 1;  font-size: 1.25rem;  display: inline-flex;  align-items: center;  justify-content: center;  border: 1px solid var(--basic-border2); border-radius: 0.375rem; color: var(--brand-hover); background: var(--basic-white);} 
.opt_popup { gap: 0.25rem;  min-width: 8rem; border-radius: 0.5rem; top: 1rem;  right: 3rem;  padding: 0.25rem 0;  box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.08);  border: none;}
.opt_popup .opt_list { width: 100%; display: flex; flex-direction: column; gap: 0.25rem;}
.opt_popup .opt_list > .item { width: 100%;}
.opt_popup .opt_list .opt_popbtn { width: 100%;  display: flex;    align-items: center;  gap: 0.375rem;  padding: 0.25rem 0.5rem;  transition: var(--transition);  text-align: left;  font-size: var(--13_label_r); color: var(--basic-darkgray);}
.opt_popup .opt_list .opt_popbtn .icon { width: 1.25rem; font-size: 1.125rem; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.opt_popup .opt_list .opt_popbtn .txt { flex: 1;}


/* calender */
.calender { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;}
.calender.hide {display: none;}
.calender .cal_head { display: flex; align-items: center;  justify-content: space-between; padding: 1rem 0;}
.calender .cal_head .leftbox,
.calender .cal_head .rightbox {flex: 1; display: flex; align-items: center;}
.calender .cal_head .leftbox {justify-content: flex-start;  gap: 0.75rem;}
.calender .cal_head .leftbox .paging_box { position: relative;  display: flex;    align-items: center; border-radius: 0.5rem;  overflow: hidden;  border: 1px solid var(--brand-hover);}
.calender .cal_head .leftbox .paging_box::before { content: ""; position: absolute;   left: 50%;  top: 0;  width: 1px;  height: 100%;  transform: translateX(-50%);  background: var(--basic-white); z-index: 10; opacity: 0.5;}
.calender .cal_head .leftbox .paging_box .paging_btn {  width: 2.25rem;  aspect-ratio: 1 / 1;  font-size: 1.125rem;  display: flex; align-items: center;  justify-content: center;  color: var(--basic-white); background: var(--brand-hover); transition: var(--transition);}
.calender .cal_head .leftbox .paging_box .paging_btn:hover {background: var(--primary-primary800);}
.calender .cal_head .centerbox {display: flex; align-items: center; gap: 1.5rem;}
.calender .cal_head .centerbox .cal_date { font: var(--24_title_sb);  color: var(--brand-hover);   display: flex; align-items: center; gap: 0.75rem;}
.calender .cal_head .centerbox .paging_btn {  width: 2rem;  aspect-ratio: 1 / 1;  font-size: 1rem;  display: flex; align-items: center;  justify-content: center;  color: var(--basic-white); background: var(--brand-hover); border-radius: 50%; transition: var(--transition);}
.calender .cal_head .centerbox .paging_btn:hover {background: var(--primary-primary800);}
.calender .cal_head .rightbox { justify-content: flex-end; gap: 0.75rem;}
.calender .cal_head .rightbox .button {height: 2.25rem;}
.calender .cal_body { flex: 1; font: var(--13_label_r); color: var(--basic-darkgray); display: flex; flex-direction: column; background: var(--basic-white);}
.calender .cal_body .week_day {display: flex; border-top: 1px solid var(--basic-border); border-bottom: 1px solid var(--basic-border); overflow: hidden; background: var(--basic-bg2);}
.calender .cal_body .week_day .day {width: calc(100% / 7); display: flex;  align-items: center;  justify-content: center; border-right: 1px solid var(--basic-border);  padding: 0.5rem; color: var(--basic-darkgray); font-weight: 500;}
.calender .cal_body .week_day .day:nth-child(1) {border-left: 1px solid var(--basic-border);}
.calender .cal_body .week_day .day.red{color: var(--state-error);}
.calender .cal_body .week_day .day.blue{color: var(--state-info);}
.calender .cal_body .week_date {flex: 1; display: flex; border-bottom: 1px solid var(--basic-border); overflow: hidden;}
.calender .cal_body .week_date .date {position: relative; width: calc(100% / 7); height: 100%; overflow: auto; min-height: 7.5rem;  border-right: 1px solid var(--basic-border);padding: 0.5rem;display: flex; flex-direction: column; gap: 0.25rem;}
.calender .cal_body .week_date .date::-webkit-scrollbar {width: 2px; height: 2px;}
.calender .cal_body .week_date .date:nth-child(1) {border-left: 1px solid var(--basic-border);}
.calender .cal_body .week_date .date .top { display: flex; align-items: center;  justify-content: space-between; font-weight: 500;}
.calender .cal_body .week_date .date .top .num { width: 1.875rem;  aspect-ratio: 1 / 1;  display: flex; align-items: center;  justify-content: center;  border-radius: 50%;}
.calender .cal_body .week_date .date.red .top .num {color: var(--state-error);}
.calender .cal_body .week_date .date.blue .top .num {color: var(--state-info);}
.calender .cal_body .week_date .date .top .count { color: var(--brand-hover);   font-weight: 600;}
.calender .cal_body .week_date .date .events {display: flex; flex-direction: column; gap: 0.25rem;}
.calender .cal_body .week_date .date .events .event { font-size:0.9225em;  display: flex;  align-items: center;  justify-content: space-between;  gap: 0.125rem;    padding: 0.188rem 0.25rem;   white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; cursor: pointer;}
.calender .cal_body .week_date .date .events .event .tit {flex: 1; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; font-weight: 500;}
.calender .cal_body .week_date .date .events .event .time {font-size: 0.8em;}
.calender .cal_body .week_date .date .reservations { position: absolute;  left: 50%;   top: 50%;  transform: translate(-50%, -50%); display: flex;  flex-direction: column;  gap: 0.25rem; text-align: center; font-size: 1.3em; font-weight: 500; color: var(--brand-primary); transition: var(--transition);}
.calender .cal_body .week_date .date .reservations:hover {opacity: 0.6;}
.calender .cal_body .week_date .date.disabled {pointer-events: none;}
.calender .cal_body .week_date .date.disabled .top{opacity: 0.3;}
.calender .cal_body .week_date .date.disabled .count{opacity: 0;}
.calender .cal_body .week_date .date.disabled .events{opacity: 0.3;}
.calender .cal_body .week_date .date.disabled .reservations {opacity: 0;}
.calender .cal_body .week_date .date.today .top .num {background: var(--brand-primary);  color: var(--basic-white);}
.calender .cal_body .week_date .date.selected { position: relative; background: var(--primary-primary100);}
.calender .cal_body .week_date .date.selected::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% - 4px);  height: calc(100% - 4px);  border: 2px solid var(--brand-primary); transform: translate(-50%, -50%); pointer-events: none;}

.calender .cal_body .week_date .date .events .working {gap: 0.625rem; color: var(--basic-middlegray); cursor: default;}
.calender .cal_body .week_date .date .events .working .icon { font-size: 1.5em;}
.calender .cal_body .week_date .date .events .working .tit {font-weight: 400;}
.calender .cal_body .week_date .date .events .working .tit .bold{font-weight: 600;}
.calender .cal_body .week_date .date.work {background: #FEFBE8;}
.calender .cal_body .week_date .date.work .events .working { color: #CA8504;}
.calender .cal_body .week_date .date.leave { background: #ffe9e9;}
.calender .cal_body .week_date .date.leave .events .working { color: #ed1418;}
.calender .cal_body .week_date .date.annual { background: #EDFCF2;}
.calender .cal_body .week_date .date.annual .events .working { color: #0b9b5d;}

.calender .cal_body .week_date .date.busdate.disabled .add_btn{display: none;}
.calender .cal_body .week_date .date.busdate .add_btn { position: absolute; top: 0.5rem;  right: 0.5rem;  width: 1.875rem; aspect-ratio: 1 / 1;  border-radius: 50%;  font-size: 0.8rem; display: flex;  align-items: center;  justify-content: center;  background: var(--basic-black);  color: var(--basic-white);  transition: var(--transition); opacity: 0;}
.calender .cal_body .week_date .date.busdate:hover .add_btn{opacity: 1; pointer-events: unset;}
.calender .cal_body .event.bustour {display: flex; align-items: center; gap: 0.625rem; padding: 0; cursor: pointer;}
.calender .cal_body .event.bustour .busicon{font-size: 1.5em;}
.calender .cal_body .event.bustour .busicon.type1{color: var(--basic-middlegray);}
.calender .cal_body .event.bustour .busicon.type2{color: var(--brand-primary);}
.calender .cal_body .event.bustour .tit { padding: 0.188rem 0.5rem; border-radius: 0.25rem;}
.calender .cal_body .event.bustour[data-type="스키투어"] .tit {  background: var(--badge-nv-bg); color: var(--badge-nv-color);}
.calender .cal_body .event.bustour[data-type="공항픽업/샌딩"] .tit { background: var(--badge-bl-bg); color: var(--badge-bl-color);}
.calender .cal_body .event.bustour[data-type="일반투어"] .tit { background: var(--badge-gr-bg); color: var(--badge-gr-color); }
.calender .cal_body .event.bustour[data-type="기사+차량렌트"] .tit { background: var(--badge-bk-bg); color: var(--badge-bk-color); }
.calender .cal_body .event.bustour[data-type="KPOP콘서트"] .tit { background:var(--badge-or-bg); color: var(--badge-or-color); }
.calender .cal_body .event.bustour[data-type="셔틀버스"] .tit { background: var(--badge-ye-bg); color: var(--badge-ye-color); }
.calender .cal_body .event.bustour[data-type="중요행사"] .tit { background: var(--badge-pk-bg); color: var(--badge-pk-color);}
.calender .cal_body .event.bustour[data-type="셔틀"] .tit { background: var(--badge-pp-bg); color: var(--badge-pp-color); }
.calender .cal_body.cal_schedule .tbl_box  {box-shadow: none; border-radius: 0; border-width: 1px 0 0 0;}
.calender .cal_body.cal_schedule .tbl tbody tr.day_last { border-color: rgb(0 48 107 / 50%);}
.calender .cal_body.cal_schedule .tbl tbody tr.day_last:last-child {border-bottom: 0;}
.calender .cal_body.cal_schedule .tbl tbody tr td { height: 2.813rem; padding: 0.5rem 0.75rem;}

.calender .cal_body .week_date .date .events.price_event { font: var(--12_caption_m);  letter-spacing: 0.03em; color: var(--basic-darkgray);}

.calender .cal_body .week_date .date .events .holiday { font: var(--12_caption_m);  letter-spacing: 0.03em; color: var(--basic-darkgray)}
.calender .cal_body .week_date .date .events .holiday.red{color: var(--state-error);}
.calender .cal_body .week_date .date .events .holiday.blue{color: var(--state-info);}

.calender.size_big { height: auto; background: var(--basic-white); border: 1px solid var(--basic-border); border-radius: 1rem; overflow: hidden;  box-shadow: var(--box-shadow);}
.calender.size_big .cal_head{ padding: 2rem;}
.calender.size_big .cal_head .leftbox .paging_box .paging_btn { width: 2.25rem;  font-size: 1.25rem;}
.calender.size_big .cal_head .leftbox .label_info {display: flex; align-items: center; gap: 0.5rem;}
.calender.size_big .cal_head .leftbox .label_info .badge { padding: 0.25rem 0.5rem;}
.calender.size_big .cal_head .leftbox .label_info .txt{font: var(--14_label_read_r); color: var(--basic-darkgray);}
.calender.size_big .cal_head .centerbox .cal_date { font: var(--30_title_sb);}
.calender.size_big .cal_body { font: var(--15_body_normal_r);}
.calender.size_big .cal_body .week_day .day:first-child {border-left: 0;}
.calender.size_big .cal_body .week_day .day:last-child {border-right: 0;}
.calender.size_big .cal_body .week_date .date { min-height: 10rem;}
.calender.size_big .cal_body .week_date .date:first-child {border-left: 0;}
.calender.size_big .cal_body .week_date .date:last-child {border-right: 0;}

.calender.size_sm .cal_head { padding: 0;}
.calender.size_sm .cal_head .centerbox { gap: 1.125rem;}
.calender.size_sm .cal_head .centerbox .paging_btn {  width: 1.75rem; font-size: 0.875rem;}
.calender.size_sm .cal_head .centerbox .cal_date { font: var(--20_heading_sb); gap: 0.5rem;}

.calender_top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-bottom: 1.25rem;}
.calender_top .leftbox {flex: 1; display: flex; flex-direction: row; align-items: center; gap: 0.875rem;}
.calender_top .leftbox .btnbox {border-radius: 0.5rem;}
.calender_top .leftbox .btnbox .btn{font: var(--14_label_normal_r); }
.calender_top .leftbox .infobox { display: flex;  align-items: center;  gap: 0.75rem;   background: var(--basic-white);  padding: 0.5rem 1rem;  border: 1px solid var(--basic-border2);  border-radius: 0.5rem;  font: var(--14_label_normal_r); color: var(--basic-darkgray);}
.calender_top .leftbox .infobox .item{display: flex;align-items: center;gap: 0.25rem;}
.calender_top .leftbox .infobox .item .icon{font-size: 1rem; display: flex; align-items: center; justify-content: center;}
.calender_top .leftbox .infobox .item .icon.type1{color: var(--basic-middlegray);}
.calender_top .leftbox .infobox .item .icon.type2{color: var(--brand-primary);}
.calender_top .leftbox .infobox .item .txt{line-height: 1;white-space: nowrap;}
.calender_top .leftbox .infobox .bar{color: var(--basic-lightgray);}
.calender_top .leftbox .typebox { display: flex; align-items: center;  gap: 0.75rem;  background: var(--basic-white); padding: 0.5rem 1rem; border: 1px solid var(--basic-border2);  border-radius: 0.5rem; font: var(--14_label_normal_r); color: var(--basic-darkgray);}
.calender_top .leftbox .typebox .item {display: flex;align-items: center;gap: 0.25rem;}
.calender_top .leftbox .typebox .item .color{width: 1rem; aspect-ratio: 1/1; border-radius: 0.25rem;}
.calender_top .leftbox .typebox .item[data-type="스키투어"] .color { background: var(--pastel-ny); }
.calender_top .leftbox .typebox .item[data-type="공항픽업/샌딩"] .color { background: var(--pastel-bl); }
.calender_top .leftbox .typebox .item[data-type="일반투어"] .color { background: var(--pastel-gr); }
.calender_top .leftbox .typebox .item[data-type="기사+차량렌트"] .color { background: var(--pastel-bk); }
.calender_top .leftbox .typebox .item[data-type="KPOP콘서트"] .color { background: var(--pastel-or); }
.calender_top .leftbox .typebox .item[data-type="셔틀버스"] .color { background: var(--pastel-ye); }
.calender_top .leftbox .typebox .item[data-type="중요행사"] .color { background: var(--pastel-pk); }
.calender_top .leftbox .typebox .item[data-type="셔틀"] .color { background: var(--pastel-pp); }
.calender_top .leftbox .typebox .item .txt{line-height: 1; white-space: nowrap;}
.calender_top .rightbox{display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.875rem;}
.calender_top .rightbox .totalbox{display: flex; align-items: center; gap: 0.5rem;}
.calender_top .rightbox .totalbox .item { background: var(--basic-white);  padding: 0.5rem 1rem; border: 1px solid var(--basic-border2); border-radius: 0.5rem;  font: var(--14_label_normal_r); color: var(--basic-darkgray);}
.calender_top .rightbox .totalbox .item .bold{font-weight: 600; color: var(--brand-primary);}


/* calender popup */
.calender_popup { position: fixed; top: unset;  right: unset; min-width: unset;  margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.875rem; padding: 1.25rem; transition: opacity 0.4s ease;}
.calender_popup .cal_head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.375rem;}
.calender_popup .cal_head .leftbox {display: flex; align-items: center;justify-content: flex-start;}
.calender_popup .cal_head .leftbox .cal_date { font:var(--16_body_normal_sb); letter-spacing: 0.01em;color: var(--basic-black);}
.calender_popup .cal_head .rightbox {display: flex; align-items: center;justify-content: flex-end;}
.calender_popup .cal_head .rightbox .paging_box {display: flex; align-items: center; gap: 0.5rem;}
.calender_popup .cal_head .rightbox .paging_box .paging_btn { width: 1rem;  aspect-ratio: 1 / 1;  font-size: 1rem;  display: flex; align-items: center; justify-content: center;  color: var(--basic-middlegray); transition: var(--transition);}
.calender_popup .cal_head .rightbox .paging_box .paging_btn:hover {color: var(--basic-black);}
.calender_popup .cal_body { font: var(--16_body_normal_m);  line-height: 1.5;  letter-spacing: 0.01em; color: var(--basic-darkgray); display: flex; flex-direction: column; gap: 0.125rem;}
/* 260917 날짜를 감싸는 컨테이너 (common.js 가 여기에 주 단위로 그린다) */
.calender_popup .cal_body .cal_dates { display: flex; flex-direction: column; gap: 0.125rem;}
.calender_popup .cal_body .week_day,
.calender_popup .cal_body .week_date { display: flex; gap: 0.313rem;}
.calender_popup .cal_body .week_day .day { width: 1.875rem; aspect-ratio: 1 / 1;  display: flex; align-items: center;  justify-content: center; color: var(--basic-black);}
.calender_popup .cal_body .week_day .day.red{color: var(--state-error);}
.calender_popup .cal_body .week_day .day.blue{color: var(--state-info);}
.calender_popup .cal_body .week_date .date { width: 1.875rem;  aspect-ratio: 1 / 1;   overflow: hidden; display: flex; align-items: center;  justify-content: center;  border-radius: 0.5rem; cursor: pointer;}
.calender_popup .cal_body .week_date .date.red{color: var(--state-error);}
.calender_popup .cal_body .week_date .date.blue{color: var(--state-info);}
.calender_popup .cal_body .week_date .date.disabled{opacity: 0.2; pointer-events: none; }
.calender_popup .cal_body .week_date .date.today{color: var(--brand-hover); font-weight: 600; background: var(--basic-bg2);}
.calender_popup .cal_body .week_date .date.selected { background: var(--brand-primary);  color: var(--basic-white);}


/* layout */
.layout {height: 100vh; display: flex; align-items: flex-start;}
.inner {position: relative; margin-left: auto; margin-right: auto; padding: 0 2rem;}


/* sidenav */
.sidenav { position: relative;  width: 3.25rem;  height: 100%;  background: var(--basic-black); overflow: hidden; display: flex; flex-direction: column; gap: 1rem;  z-index: 100;  transition: var(--transition);}
.sidenav .side_top, .sidenav .side_cont {width: 12.5rem;}
.sidenav .side_top {  padding: 1rem 0;  border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
.sidenav .side_top .side_item .side_btn { width: 100%; display: flex;  align-items: center;  justify-content: flex-start;  gap: 0.375rem;  font: var(--14_label_normal_r);   font-weight: 500;  color: var(--basic-white); padding: 0 0.625rem}
.sidenav .side_top .side_item .side_btn .icon { width: 2rem; aspect-ratio: 1 / 1;    display: flex; align-items: center; justify-content: center; padding: 1px;}
.sidenav .side_top .side_item .side_btn .txt { transition: var(--transition); opacity: 0; flex: 1; text-align: left;}
.sidenav .side_cont { flex: 1; display: flex; flex-direction: column; gap: 1rem;  overflow: auto; padding-bottom: 1rem;}
.sidenav .side_cont::-webkit-scrollbar {display: none;}
.sidenav .side_cont .side_menu { padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
.sidenav .side_cont .menu_list{display: flex; flex-direction: column;}
.sidenav .side_cont .menu_list .side_item{position: relative;}
.sidenav .side_cont .menu_list .side_item::after{content: '';  width: 0.25rem;  height: 100%;position: absolute; top: 0; left: 0; border-radius: 0.25rem; background: var(--brand-primary); opacity: 0;}
.sidenav .side_cont .menu_list .side_item.active::after {opacity: 1;}
.sidenav .side_cont .menu_list .side_item .side_link { width: 100%;  display: flex;   align-items: center;  justify-content: flex-start;  gap: 0.375rem;  font: var(--14_label_normal_r);  font-weight: 500; color: var(--basic-white); padding: 0.375rem 0.625rem; flex: 1; text-align: left;}
.sidenav .side_cont .menu_list .side_item.active .side_link { background: rgba(255, 255, 255, 0.25);}
.sidenav .side_cont .menu_list .side_item .side_link .icon {  width: 2rem;  aspect-ratio: 1 / 1; display: flex;  align-items: center; justify-content: center;  padding: 0.25rem;}
.sidenav .side_cont .menu_list .side_item .side_link .txt { transition: var(--transition); opacity: 0;}
.sidenav .side_cont .side_submenubox{display: flex; flex-direction: column; gap: 1rem; }
.sidenav .side_cont .side_submenu{opacity: 0; transition: var(--transition);}
.sidenav .side_cont .side_submenu .side_subtit { padding: 0.625rem 0.625rem 0.375rem;  width: 100%;  color: var(--basic-white); font: var(--14_label_normal_r); text-transform: capitalize; display: flex; align-items: center; justify-content: space-between;}
.sidenav .side_cont .side_submenu .side_subtit .button {height: auto;  width: auto; padding: 0.188rem 0.5rem; font: var(--12_caption_r); border-radius: 0.25rem;}
.sidenav .side_cont .side_submenu .menu_list .side_item .side_link { padding: 0.25rem 0.625rem; font: var(--12_caption_r); gap: 0.25rem; font-weight: 400; line-height: 1.4;}
.sidenav .side_cont .side_submenu .menu_list .side_item .side_link .icon {width: 1.5rem; font-size: 1rem;}
.sidenav .side_cont .side_submenu .side_acc {position: relative;}
.sidenav .side_cont .side_submenu .side_acc > li {position: relative;}
.sidenav .side_cont .side_submenu .side_acc > li .acc_tit { padding: 0.25rem 1rem 0.25rem 0.625rem;   display: flex;  align-items: center;  font: var(--12_caption_r);  gap: 0.25rem;   font-weight: 400; line-height: 1.4; color: var(--basic-white); cursor: pointer;}
.sidenav .side_cont .side_submenu .side_acc > li .acc_tit .icon{  width: 1.5rem;  aspect-ratio: 1 / 1; display: flex;  align-items: center; justify-content: center;  padding: 0.25rem; font-size: 0.5rem;  transform: rotate(90deg);}
.sidenav .side_cont .side_submenu .side_acc > li .acc_tit .txt{flex: 1;}
.sidenav .side_cont .side_submenu .side_acc > li .acc_tit .arrow{    font: var(--14_label_normal_r); color: var(--basic-white); transition: var(--transition);}
.sidenav .side_cont .side_submenu .side_acc > li.show .acc_tit .arrow{transform: rotate(180deg);}
.sidenav .side_cont .side_submenu .side_acc .acc_cont{display: none;padding-left: calc(1.5rem + 0.25rem);}
.sidenav .side_cont .side_submenu .side_acc .acc_cont .side_item .side_link{color: var(--basic-lightgray);}
.sidenav .side_cont .side_submenu .chang_btn {padding: 0;font: var(--13_label_r); height: 2rem; margin: 0 0.625rem;  width: calc(100% - 0.625rem * 2);  border: none;   border-radius: 0.25rem; margin-top: 0.5rem; background: var(--basic-darkgray);}

.sideopen .sidenav {width: 12.5rem;}
.sideopen .sidenav .side_top .side_item .side_btn .txt {opacity: 1;}
.sideopen .sidenav .side_cont .side_submenu {opacity: 1;}
.sideopen .sidenav .side_cont .menu_list .side_item .side_link .txt {opacity: 1;}
.sideopen .sidenav .side_cont .menu_list .side_item .side_link .txt .num {color: #ff1d30;}
.sideopen .sidenav .side_submenu{opacity: 1;}


/* header */
.header { position: sticky; top: 0; background: var(--basic-bg); border-bottom: 1px solid transparent; display: flex; flex-direction: column; z-index: 98; transition: var(--transition);}
.header.down {border-color: var(--basic-border);}
.header .h_top { width: 100%; height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 2rem;}
.header .h_top .leftbox{position: relative;  flex: 1;}
.header .h_top .leftbox .h_title {gap: 1.875rem; align-items: center; justify-content: unset;}
.header .h_top .leftbox .h_title .page_title .tit {white-space: nowrap;  width: 100%;  overflow: hidden;  text-overflow: ellipsis;}
.header .h_top .leftbox .h_title .page_title .icon {min-height: 2.25rem;}
.header .h_top .leftbox .h_title .content_search {margin-left: 0;}
.header .h_top .leftbox .h_title .content_list .tbl_top {margin-bottom: 0; gap: 0.5rem; flex-wrap: nowrap;}
.header .h_top .h_logo{display: flex; align-items: center; width: 11.25rem;}
.header .h_top .rightbox{display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.header .h_top .h_schbox{ width: 100%; max-width: 24rem; margin-right: 0; }
.header .h_top .h_schbox .form{position: relative;}
.header .h_top .h_schbox .input_sch_box .input_text {height: 2.75rem; background: var(--basic-white); border-color: var(--basic-border); font: var(--14_label_normal_r);}
.header .h_top .h_schbox .input_sch_box .input_text:focus {border-color: var(--basic-black);}
.header .h_top .h_schbox .input_sch_box .sch_btn { width: 1rem;}
.header .h_top .h_sidebox { display: flex; align-items: center; gap: 0.875rem;}
.header .h_top .h_sidebox .fixnav { display: flex; align-items: center; gap: 0.875rem;}
.header .h_top .h_sidebox .item{position: relative;}
.header .h_top .h_sidebox .item [class^="ph"] { font-size: 1.5rem;}
.header .h_top .h_sidebox .item.ecount_item {order: 1;}
.header .h_top .h_sidebox .item.work_item {order: 2;}
.header .h_top .h_sidebox .item.share_item {order: 4;}
.header .h_top .h_sidebox .item.app_item {order: 5}
.header .h_top .h_sidebox .item.darkmode_item {order: 3;}
.header .h_top .h_sidebox .item > .btn { position: relative; color: var(--basic-darkgray);  width: 1.5rem; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.header .h_top .h_sidebox .calendar_item,
.header .h_top .h_sidebox .fixnav_btn,
.header .h_top .h_mobsidebox {display: none;}

.header .h_top .h_sidebox .ecount_item .ecount_link { width: 1.5rem; display: flex;  align-items: center;}

.header .h_top .h_sidebox .darkmode_item .darkmode_btn{display: flex;align-items: center; gap: 0.5rem; cursor: pointer; width: auto; height: auto; aspect-ratio: unset;}
.header .h_top .h_sidebox .darkmode_item .darkmode_btn .icon { display: flex;  align-items: center;  justify-content: center;}
.header .h_top .h_sidebox .darkmode_item .darkmode_btn.light .icon .dark{display: none;}
.header .h_top .h_sidebox .darkmode_item .darkmode_btn.dark .icon .light{display: none;}
.header .h_top .h_sidebox .darkmode_item .darkmode_btn .arrow{background: url(../img/select_arrow.png) no-repeat center / contain;  width: 0.875rem; aspect-ratio: 1 / 1; }
.header .h_top .h_sidebox .darkmode_item .mob_darkmode_btn {display: none;}
#darkmode_popup .item_box { display: flex; flex-direction: column; gap: 0.25rem;}
#darkmode_popup .item_box .item{width: 100%; position: relative;}
#darkmode_popup .item_box .item .sel_btn { width: 100%; display: flex; align-items: center;  gap: 0.5rem;  padding: 0.25rem 0.75rem; font: var(--13_label_m); color: var(--basic-darkgray); transition: var(--transition);}
#darkmode_popup .item_box .item .sel_btn [class^="ph"] {  display: inline-block;   font-size: 1.25rem; color: var(--basic-darkgray); transition: var(--transition);}

.header .h_top .h_sidebox .alarm_item .alarm_btn .num { position: absolute;  top: -0.25rem;  right: -0.125rem;  padding: 0.125rem 0.188rem;  background: var(--primary-primary200); border-radius: 6.25rem;  width: unset;  height: unset;  font: var(--10_caption_r);  line-height: 1;  color: var(--brand-primary);}
#alarm_popup { width: 20rem; max-height: 32rem;}
#alarm_popup .item_box { display: flex;  flex-direction: column; gap: 0.5rem;  padding: 0 0 1rem;}
#alarm_popup .item_box .item{position: relative; width: 100%;}
#alarm_popup .item_box .link { display: flex;  align-items: center;  gap: 0.25rem;   width: 100%;  padding: 0 1rem; transition: var(--transition);}
#alarm_popup .item_box .link > .tit { font-weight: 600;}
#alarm_popup .item_box .link > .desc{flex: 1;}

#share_popup { position: fixed;  left: 50%; top: 50%; right: auto;  transform: translate(-50%, -50%);  min-width: unset;  border-radius: 2rem;}
#share_popup .item_box { display: flex; flex-wrap: wrap; gap: 0.5rem 0; padding: 2rem;}
#share_popup .item_box .item { width: 25%;}
#share_popup .item_box .link{padding: 2rem 0; display: flex;  flex-direction: column;  align-items: center; gap: 0.5rem;  border-radius: 1rem; transition: var(--transition); }
#share_popup .item_box .link:hover {background: #edf2f9;}
#share_popup .item_box .link > .icon{ width: 2.5rem;}
#share_popup .item_box .link > .txt{ font: var(--14_label_normal_m);  color: var(--basic-middlegray);}

#app_popup{width: 15rem; height: 45rem;}
#app_popup .item_wrap { padding: 0.875rem 0; display: flex; flex-direction: column;   gap: 0.875rem;}
#app_popup .item_box { display: flex; flex-direction: column; gap: 0.25rem; }
#app_popup .item_box .item_tit {  color: var(--basic-darkgray);  width: 100%;   font: var(--14_label_normal_sb); padding: 0 1rem;}
#app_popup .item_box .item_list .link { padding: 0.25rem 1rem;  font: var(--13_label_r); color: var(--basic-darkgray);  display: flex; align-items: center;  justify-content: space-between; transition: var(--transition);}
#app_popup .item_box .item_list .link:hover {background: #edf2f9;}
#app_popup .item_box .item_list .link > .txt{flex: 1;}
#app_popup .item_box .item_list .link > [class^="ph"] { font-size: 1.25rem;}
#app_popup .item_line {width: 100%; min-height: 1px; height: 1px; background: var(--basic-border);}

.header .h_top .mob_menu_btn {display: none;}
.header .h_top .h_sidebox .profile_item .profile_thum { position: relative; width: 2rem; display: flex;  align-items: center;  justify-content: center; border-radius: 50%; background: var(--primary-primary200); color: var(--brand-primary); overflow: hidden; cursor: pointer;}
.header .h_top .h_sidebox .profile_item .profile_thum::before { font-size: 1.2rem;}
.header .h_top .h_sidebox .profile_item .profile_thum .thum{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}
#profile_popup{width: 21.25rem;}
#profile_popup .pop_body { padding: 0.875rem; display: flex; flex-direction: column;  gap: 1rem; font: var(--14_label_normal_r);}
#profile_popup .topbox{ display: flex; flex-direction: column; gap: 0.5rem;}
#profile_popup .topbox .user_top{display: flex;align-items: center; gap: 1rem; }
#profile_popup .topbox .user_top .user_img{position: relative; width: 5rem; height: 6.875rem; background: var(--basic-bg); border-radius: 0.5rem; display: flex;  align-items: center;  justify-content: center;  font: var(--12_caption_r);overflow: hidden;}
#profile_popup .topbox .user_top .user_img::before {content: "사진을 등록해주세요";position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; word-break: keep-all; text-align: center;}
#profile_popup .topbox .user_top .user_img .img{width: 100%; height: 100%; object-fit: cover; z-index: 10;}
#profile_popup .topbox .user_top .user_name { flex: 1; display: flex;  flex-direction: column;  gap: 0.375rem;  font: var(--12_caption_r);  line-height: 1.5;  color: var(--basic-darkgray);}
#profile_popup .topbox .user_top .user_name .name{ text-transform: capitalize; font: var(--15_body_normal_r); }
#profile_popup .topbox .user_btn { display: flex; flex-wrap: wrap;  gap: 0.5rem;  width: 100%;}
#profile_popup .topbox .user_btn .button{width: calc((100% - 0.5rem)/2); height: 2rem;  font: var(--13_label_r); display: flex; align-items: center; gap: 0.375rem;  font-weight: 500; padding: 0; border-radius: 0.25rem;}
#profile_popup .topbox .user_btn .button .icon { font-size: 1.25rem;}
#profile_popup .notebox{ display: flex; flex-direction: column; gap: 0.5rem;  width: 100%; padding: 1rem; background-color: var(--basic-pale); border-radius: 0.5rem;}
#profile_popup .notebox > li{display: flex; align-items: center; gap: 0.5rem; font: var(--13_label_r); color: var(--basic-middlegray);}
#profile_popup .notebox > li .tit{font-weight: 600;color: var(--basic-darkgray); }
#profile_popup .btnbox{ width: 100%}
#profile_popup .btnbox .button{ border-radius: 0.25rem; }

.header .h_bottom {position: relative; width: 100%;}
.header .h_bottom .gnb { padding: 0 2rem; display: flex; align-items: flex-start; gap: 1.25rem; background: #f1f5f9; transition: var(--transition);}
.header .h_bottom .gnb .gnb_item { position: relative;}
.header .h_bottom .gnb .gnb_item .gnb_title { position: relative; color: var(--basic-darkgray); padding: 0.75rem 0.5rem;  font: var(--14_label_normal_m);  display: flex;  align-items: center;  gap: 0.5rem;  cursor: pointer; white-space: nowrap; transition: var(--transition);}
.header .h_bottom .gnb .gnb_item:hover .gnb_title {color: var(--brand-primary);}
.header .h_bottom .gnb .gnb_item .gnb_title .arrow { background: url(../img/select_arrow.png) no-repeat center / contain; width: 0.875rem; aspect-ratio: 1 / 1; margin-bottom: 0.125rem; opacity: 0.8; transition: var(--transition);}
.header .h_bottom .gnb .gnb_item .gnb_title.active .arrow {transform: rotate(180deg);}
.header .h_bottom .gnb .gnb_item.active .gnb_title::after { content: "";  width: 100%;   height: 0.188rem;  position: absolute;  bottom: -2px;  left: 0;  border-radius: 6.25rem;  background-color: var(--brand-primary);}
.header .h_bottom .gnb .gnb_item .gnb_sublist { position: absolute;  left: 50%;   top: calc(100% + 0.75rem);  transform: translateX(-50%);  width: 10rem;  font-size: 0.8333333rem;   border-radius: 0.375rem; background: var(--basic-white); box-shadow: var(--box-shadow);  padding: 0.5rem 0; transition: var(--transition); opacity: 0; pointer-events: none;}
.header .h_bottom .gnb .gnb_item:first-child .gnb_sublist {left: 0; transform: none}
/* .header .h_bottom .gnb .gnb_item:last-child .gnb_sublist {left: auto; right: 0; transform: none} */
.header .h_bottom .gnb .gnb_item .gnb_sublist.show {opacity: 1; pointer-events: unset;}
.header .h_bottom .gnb .gnb_item .gnb_sublist .gnb_subitem { position: relative;}
.header .h_bottom .gnb .gnb_item .gnb_sublist .gnb_subitem .gnb_link{ display: block; width: 100%;  padding: 0.25rem 0.75rem; white-space: nowrap; color: var(--basic-darkgray);  transition: var(--transition);}
.header .h_bottom .gnb .gnb_item .gnb_sublist .gnb_subitem .gnb_link:hover {  color: #232e3c; background: #f9fafd;}


/* navbox */
.header .navbox .topbox {display: none;}


/* footer */
.footer { position: relative; bottom: auto; padding: 6rem 0 2rem;  font: var(--12_caption_r); color: var(--basic-middlegray); }
.footer .mob_navigaion {display: none;}
.footer .f_inner{  display: flex; align-items: center; justify-content: space-between; }


/* container */
.container {position: relative; width: calc(100% - 3.25rem); height: 100%; display: flex; flex-direction: column; overflow: auto;  transition: var(--transition);}
.container::-webkit-scrollbar {display: none;}
.sideopen .container {width: calc(100% - 12.5rem);}
.container > .contents {flex: 1;  padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem;}


/* contents */
.content_title {position: relative; width: 100%;}
.container > .contents .content_title {display: none;}
.container > .contents .content_title.flexible {display: flex;}
.container > .contents .content_title.flexible .page_title {display: none;}
.content_title.flexible {display: flex; align-items: flex-start; justify-content: space-between;}
.content_title .page_title {  font: var(--24_title_sb);  letter-spacing: -0.02em;  color: var(--basic-black); display: flex; align-items: center; gap: 0.5rem;}
.content_title .page_title .icon { background: var(--primary-primary200); color: var(--brand-primary);  width: 2.25rem;  aspect-ratio: 1 / 1;  font-size: 1.375rem; border-radius: 50%;  display: inline-flex; align-items: center;  justify-content: center;}
.content_title .page_title .arrow {font-size: 1rem; color: var(--basic-darkgray); display: inline-block; vertical-align: middle;}
.content_title.flexible .content_search {width: 100%; max-width: 540px; margin-left: auto;}
.content_title.flexible .content_tbl .tbl_box {box-shadow: none; border: none; border-radius: 0;}
.content_title.flexible .content_tbl .tbl tbody tr {border: none;}
.content_title.flexible .content_tbl .tbl tbody tr td {padding: 0; height: unset; background: none;  border: none;}
.content_title.flexible .rightbox {display: flex; align-items: center; gap: 0.5rem;}

.content_search {position: relative;}
.content_search .tbl { min-width: unset !important;}
.content_search .tbl tbody tr th, 
.content_search .tbl tbody tr td {height: 3.375rem;}
.content_search .tbl .search_input{max-width: 25rem;}
.content_search .tbl .search_select2{min-width: 10rem; max-width: 10rem;}
.content_search .tbl .search_select3{ max-width: 8rem;}
.content_search .tbl .tbl_inline {flex-wrap: wrap;}
.content_search .tbl .tbl_inline.gap2 {gap: 0.5rem 1rem;}
.content_search .tbl .tbl_inline .input_box.w_auto {flex: unset; width: auto;}
.content_search .tbl .radio_wrap {gap: 0.375rem 0.625rem;}
.content_search .tbl .calender_btn {max-width: 10rem;}
.content_search .tbl .tab_navbox.tabs_ver { border-radius: 0.375rem;}
.content_search .tbl .tab_navbox.tabs_ver .tab_nav { font: var(--14_label_normal_r);}
.content_search .tbl .tab_navbox.tabs_ver .tab_nav .link {padding: 0.438rem 1rem;}
.content_search .tbl_morebtn { position: absolute;  right: 0.25rem;  bottom: 0;   width: 1.875rem;  aspect-ratio: 1 / 1;  background: var(--brand-primary);  font-size: 1.125rem;  color: var(--basic-white); transition: var(--transition);}
.content_search .tbl_morebtn.on {transform: rotate(-180deg);}
.content_search .tbl .hide_tr {display: none;}
.content_search .tbl .hide_tr.show {display: table-row;}

.content_schresult { position: relative;  background: var(--basic-white);  box-shadow: var(--box-shadow); border: 1px solid var(--basic-border2); border-radius: 0.625rem;  padding: 1.125rem 1rem; font: var(--14_label_normal_r); color: var(--basic-darkgray);}
.content_schresult .cont_area {display: flex; flex-wrap: wrap; gap: 0.5rem;}
.content_schresult .cont_area .bar { font: var(--14_label_normal_r);  color: var(--basic-lightgray);}
.content_schresult .cont_area .text {display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem;}
.content_schresult .cont_area .text [class^="ph"] {font-size: 1.125rem;}
.content_schresult .cont_area .bold {font-weight: 600;}
.content_schresult .radio_area { gap: 0.25rem 1rem;}
.content_schresult .radio_area .radio_wrap { gap: 0.5rem 0.5rem;}
.content_schresult .radio_area .radio_box { gap: 0.375rem;}
.content_schresult .check_area { gap: 0.25rem 1rem;}
.content_schresult .check_area .check_wrap { gap: 0.5rem 0.5rem;}
.content_schresult .check_area .check_box { gap: 0.375rem;}
.content_schresult .flex_area {align-items: center; justify-content: space-between;}
.content_schresult .flex_area .leftbox{display: flex; align-items: center; gap: 0.25rem 0.5rem;}
.content_schresult .flex_area .rightbox{display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem 0.5rem;}
.content_schresult .flex_area .rightbox .blue {color: var(--state-info);}
.content_schresult .flex_area .rightbox .red {color: var(--state-error);}
.content_schresult .flex_area .centerbox {flex: 1; display: flex; align-items: center; justify-content:center; gap: 0.25rem 0.5rem;}

.content_tbl .tbl { min-width: 93.75rem;}
.content_tbl .tbl.min_auto {min-width: 0;}
.content_tbl .tbl thead tr th,
.content_tbl .tbl tbody tr th,
.content_tbl .tbl tbody tr td{padding: 0.5rem; height: 3.375rem;}
.content_tbl .tbl tbody tr td.td_title {text-align: left;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; max-width: 100px; padding: 0.25rem 1rem;}
.content_tbl .tbl tbody tr td.td_title .tbl_inline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
.content_tbl .tbl tbody tr td.td_title .tbl_inline.column_ver {align-items: flex-start;}
.content_tbl .tbl tbody tr td.td_title .tbl_inline .link { white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;}
.content_tbl .tbl tbody tr td.td_title .tbl_inline .link .re_icon { font-size: 1rem;  color: var(--brand-primary);  margin-right: 0.125rem; margin-left: 0.875rem;}
.content_tbl .tbl tbody tr td.td_title .tbl_inline .link .tbl_icon { margin-right: 0.125rem;}
.content_tbl .tbl tbody tr td.td_title .tbl_inline .title { white-space: normal;  flex: 1;}
.content_tbl .tbl tbody tr td.td_price {text-align: right; padding: 0.25rem 1rem;}
.content_tbl .tbl tbody tr td.td_dept .icon{width: auto; height: 1.5rem; display: inline-block; vertical-align: middle;}
.content_tbl .tbl tbody tr td.td_prd {text-align: left; padding: 0.5rem 1rem;}
.content_tbl .tbl tbody tr td.td_prd .tbl_btnbox {flex-direction: column; align-items: flex-start; gap: 0.25rem;}
.content_tbl .tbl tbody tr td.td_prd .tbl_btnbox .tit {width: 100%;}
.content_tbl .tbl thead tr th .tbl_picon,
.content_tbl .tbl tbody tr td .tbl_picon {width: 1.85rem; aspect-ratio: 1/1; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-primary); color: var(--basic-white); border-radius: 50%; }
.content_tbl .tbl thead tr th .tbl_picon.reverse,
.content_tbl .tbl tbody tr td .tbl_picon.reverse {transform: rotateY(180deg);}
.content_tbl .tbl thead tr th .tbl_picon2,
.content_tbl .tbl tbody tr td .tbl_picon2 {width: auto; aspect-ratio: unset; background: none; color: var(--brand-hover); border-radius: unset; font-size: 1.125rem; display: inline-flex;  vertical-align: middle;}
.content_tbl .tbl tbody tr td .tbl_link {color: var(--brand-hover); transition: var(--transition); cursor: pointer;}
.content_tbl .tbl tbody tr td .tbl_link:hover {color: var(--brand-primary);}
.content_tbl .tbl tbody tr td .tbl_tabs .tab_navbox .tab_nav{font: var(--14_label_normal_r); line-height: 1; height: auto;}
.content_tbl .tbl tbody tr td .tbl_tabs .tab_navbox .tab_nav .link { padding: 0.375rem 1rem;}
.content_tbl .tbl thead tr th .check_box,
.content_tbl .tbl tbody tr th .check_box,
.content_tbl .tbl tbody tr td .check_box { display: inline-flex; vertical-align: middle;} 
.content_tbl .tbl tbody tr td .badge.size_sm {height: 1.125rem; padding: 0 0.313rem; line-height: 1; display: inline-flex;  vertical-align: middle;}
.content_tbl .tbl tbody tr td .file_inline {display: inline-flex; align-items: center; gap: 0.125rem;  font-weight: 500; font-size: 0;}
.content_tbl .tbl tbody tr td .file_inline + .file_inline {margin-left: 0.25rem;}
.content_tbl .tbl tbody tr td .file_inline .file_link {width: 1.25rem; display: flex; align-items: center; justify-content: center;}
.content_tbl .tbl tbody tr td .tab_swiper { padding: 0.875rem 0.5rem; width: calc(100% + 0.5rem * 2); margin: -0.75rem -0.5rem;}
.content_tbl .tbl tbody tr th .padding_y,
.content_tbl .tbl tbody tr td .padding_y {padding-top: 0.75rem; padding-bottom: 0.75rem;}


/* board */
.board { position: relative;  background: var(--basic-white);  border-radius: 1.25rem;  box-shadow: var(--box-shadow); border: 1px solid var(--basic-border);  padding: 2.5rem 2rem; overflow: hidden;}
.board .bo_tit{ font:var(--24_title_sb); color: var(--basic-black); word-break: keep-all; margin-bottom: 0.75rem;}
.board .bo_tit .badge {vertical-align: middle; margin-left: 0.5rem;}
.board .bo_content {position: relative; border-top: 1px solid var(--basic-black);}
.board .bo_content .item{ border-bottom: 1px solid var(--basic-border2); display: flex; flex-direction: row; gap: 0; background: var(--basic-bg2); }
.board .bo_content .item::before {content: ""; position: absolute; left: 0; top: 0; width: 9.38rem; height: 100%; pointer-events: none;}
.board .bo_content .item .tit,
.board .bo_content .item .desc{position: relative; padding: 1rem; font: var(--14_label_normal_r); letter-spacing: 0.01em; color: var(--basic-darkgray); }
.board .bo_content .item .desc.align_center {display: flex;  align-items: center;  gap: 0.5rem;}
.board .bo_content .item .tit{width: 9.38rem;background: var(--basic-bg2);  font-weight: 600;}
.board .bo_content .item.align_center .tit {align-self: center;}
.board .bo_content .item .desc{flex: 1; overflow: hidden; background: var(--basic-white);}
.board .bo_btnbox { display: flex; align-items: center; justify-content: space-between; margin: 1.5rem 0 0;}
.board .bo_btnbox .leftbox,
.board .bo_btnbox .rightbox {display: flex; align-items: center; gap: 0.75rem;}
.board .bo_btnbox .rightbox {justify-content: flex-end;}
.board .bo_btnbox .centerbox {flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.75rem;}


/* list */
.content_list {position: relative;}
.content_list_wrap {display: flex; gap: 1.5rem;}
.content_list_wrap .content_list_box {display: flex; flex-direction: column; gap: 2rem;}
.content_list_wrap .content_list_box.full{flex: 1;}
.content_list_wrap .content_list_box.wid100{width: 100%;}
.content_list_wrap .content_list_box.wid60{width: calc((100% - 1.5rem)*0.6);}
.content_list_wrap .content_list_box.wid50{width: calc((100% - 1.5rem*1)/2);}
.content_list_wrap .content_list_box.wid40{width: calc((100% - 1.5rem)*0.4);}
.content_list_wrap .content_list_box.wid33{width: calc((100% - 1.5rem*2)/3);}
.content_list_wrap .content_list_box.wid25{width: calc((100% - 1.5rem*3)/4);}
.content_list_wrap .content_list_box.wid20{width: calc((100% - 1.5rem*4)/5);}
.content_list_wrap .content_tbl .tbl {min-width: unset;}


/* chart */
.content_chart { position: relative;  width: 100%; box-shadow: var(--box-shadow);   background: var(--basic-white);  border: 1px solid var(--basic-border2);  border-radius: 0.625rem; padding: 1.25rem;}
.content_chart .chart {width: 100%; height: 25rem;}

.chart_tooltip {display: flex; flex-direction: column; gap: 0.5rem;}
.chart_tooltip .title{font:var(--14_label_normal_sb); color: var(--basic-darkgray);}
.chart_tooltip .descbox{display: flex; flex-direction: column; gap: 0.25rem;}
.chart_tooltip .descbox .desc{font:var(--12_caption_r); display: flex; align-items: center; gap: 0.25rem;}
.chart_tooltip .descbox .desc .color{font-size: 1.5em;}
.chart_tooltip .descbox .desc .txt{color: var(--basic-darkgray);}


/* view */
.content_view {position: relative;}
.content_view .bo_view .bo_info{display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;}  
.content_view .bo_view .bo_info .txt { font: var(--14_label_normal_r);  color: var(--basic-darkgray);} 
.content_view .bo_view .bo_info .bar{width: 1px; height: 0.75rem ; background: var(--basic-lightgray);} 
.content_view .bo_view .bo_content .item .desc .state {display: inline-flex; align-items: center; gap: 0.375rem; vertical-align: middle; margin-left: 0.25rem; font: var(--12_caption_b);}
.content_view .bo_view .bo_content .item .desc .dept_icon{max-height: 1.375rem; display: inline-block; vertical-align: middle;}
.content_view .bo_view .bo_content .item .desc.textarea {min-height: 15rem;}
.content_view .bo_view .bo_content .item .desc.filebox {display: flex; flex-direction: column; align-items: unset; gap: 0.5rem;}
.content_view .bo_view .bo_content .item .desc.filebox .fileitem{ display: flex; align-items: center; gap: 0.375rem;}
.content_view .bo_view .bo_content .item .desc.filebox .fileitem .icon {width: 1rem;}
.content_view .bo_view .bo_content .item .desc.filebox .fileitem .txt {  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}
.content_view .bo_view .bo_content .item .desc.filebox .fileitem .txt:hover {text-decoration: underline; color: var(--brand-hover);}
.content_view .bo_view .bo_comment { margin-top: 5rem;}
.content_view .bo_view .bo_comment .bo_cmttop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;}
.content_view .bo_view .bo_comment .bo_cmttop .cmt_tit { font: var(--16_body_normal_sb);   color: var(--basic-black);}
.content_view .bo_view .bo_comment .bo_cmttop .cmt_tit .num{color: var(--brand-primary);}
.content_view .bo_view .bo_comment .cmt { display: flex; align-items: flex-start;  gap: 1rem; padding: 1.25rem 1rem;}
.content_view .bo_view .bo_comment .cmt > .thumbox { width: 3rem;  aspect-ratio: 1 / 1; display: flex; align-items: center;  justify-content: center; border-radius: 50%; overflow: hidden;}
.content_view .bo_view .bo_comment .cmt > .thumbox > img{width: 100%; height: 100%; object-fit: cover;} 
.content_view .bo_view .bo_comment .cmt > .txtbox { flex: 1;  position: relative; padding-right: 6rem;  font: var(--14_label_normal_r);  color: var(--basic-darkgray);}
.content_view .bo_view .bo_comment .cmt > .txtbox .info {  display: flex;  align-items: center;  gap: 0.675rem;  margin-bottom: 0.5rem; } 
.content_view .bo_view .bo_comment .cmt > .txtbox .info .bar{width: 1px; height: 0.675rem ; background: var(--basic-lightgray);} 
.content_view .bo_view .bo_comment .cmt > .txtbox .sidebtns { position: absolute;  right: 0;  top: 0; display: flex; align-items: center; gap: 0.5rem; }
.content_view .bo_view .bo_comment .cmt > .txtbox .sidebtns .btn { font: var(--13_label_m); }
.content_view .bo_view .bo_comment .bo_cmtlist { border-top: 1px solid var(--basic-black); display: flex; flex-direction: column; margin-bottom: 1.5rem;}
.content_view .bo_view .bo_comment .bo_cmtlist .cmtitem { width: 100%; display: flex; flex-direction: column; gap: 1rem; border-bottom: 1px solid var(--basic-border);}
.content_view .bo_view .bo_comment .bo_cmtbox {position: relative; width: 100%;}
.content_view .bo_view .bo_comment .cmt_textbox {gap: 0.875rem;}
.content_view .bo_view .bo_comment .cmt_textbox .cmt_textarea { height: 10rem; font: var(--14_label_normal_r); border-radius: 0.5rem;}
.content_view .bo_view .bo_comment .cmt_textbox .cmt_bottom { display: flex;  justify-content: flex-end;}
.content_view .bo_view .bo_docview { position: relative; width: 100%; max-width: 700px;  margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2.5rem;  word-break: keep-all;}
.content_view .bo_view .bo_docview .doc_head { display: flex;  flex-direction: column;   align-items: center; gap: 1rem;  background: var(--basic-bg);  padding: 1.875rem 1rem;   border-top: 1px solid var(--basic-border); border-bottom: 1px solid var(--basic-border);}
.content_view .bo_view .bo_docview .doc_head .leftbox { display: flex; align-items: center; gap: 0.75rem;}
.content_view .bo_view .bo_docview .doc_head .rightbox { font: var(--14_label_normal_m);  color: var(--basic-middlegray);}
.content_view .bo_view .bo_docview .doc_body { display: flex; flex-direction: column;  gap: 1.5rem;}
.content_view .bo_view .bo_docview .doc_body .doc_top {display: flex; align-items: center; gap: 1rem;}
.content_view .bo_view .bo_docview .doc_body .doc_top .leftbox { width: 45%;}
.content_view .bo_view .bo_docview .doc_body .doc_top .leftbox .doc_tit {  font: var(--24_title_sb); text-align: center; color: var(--basic-black);}
.content_view .bo_view .bo_docview .doc_body .doc_top .rightbox { width: 55%;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom { display: flex;  flex-direction: column; align-items: center;  text-align: center;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .bottom_desc { font: var(--15_body_normal_r); color: var(--basic-darkgray); margin-bottom: 3rem;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .bottom_date { font: var(--16_body_normal_sb); color: var(--basic-black);}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .person_info { display: flex;  align-items: center;  justify-content: flex-end;  width: 100%;  gap: 1.25rem;   font: var(--15_body_read_r);  color: var(--basic-darkgray);  margin: 2rem 0 3rem;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .person_info .txt {  position: relative;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .person_info .txt.tit { font-weight: 700;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .person_info .sign_txt {opacity: 0.5;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .person_info .sign_img {  position: absolute;  left: 50%; top: 50%;  transform: translate(-50%, -50%); max-width: unset; max-height: 6rem;}
.content_view .bo_view .bo_docview .doc_body .doc_bottom .com_name {  font: var(--32_title_b); color: var(--brand-hover);}
.content_view .bo_view .bo_docview .doc_tbl { border: 1px solid var(--basic-lightgray);  font: var(--15_body_normal_r);  color: var(--basic-darkgray);}
.content_view .bo_view .bo_docview .doc_tbl tbody tr th { background: var(--basic-pale);  border: 1px solid var(--basic-lightgray); font-weight: 700;  height: auto;  border-right: var(--basic-black);}
.content_view .bo_view .bo_docview .doc_tbl tbody tr td { border: 1px solid var(--basic-lightgray); height: unset;  padding: 1rem;}
.content_view .bo_view .bo_docview .doc_tbl tbody tr td .stamp_box .stamp {  width: 3.125rem;}
.content_view .bo_view .bo_docview .doc_tbl tbody tr td .tbl_content { min-height: 10rem;}


/* write */
.content_write {position: relative;}
.content_write .sub_title { font:var(--24_title_sb); color: var(--basic-black); word-break: keep-all; margin-bottom: 1.25rem;}
.content_write .bo_write .form_box { position: relative; border-top: 1px solid var(--basic-black); border-bottom: 1px solid var(--basic-black); padding: 1.25rem 0;}
.content_write .bo_write .select_box {max-width: 20rem;}
.content_write .bo_write .select_box.mn192 {min-width: 12rem;}
.content_write .bo_write .select_box.mx_auto {max-width: unset;}
.content_write .bo_write .select_box.mx160 {max-width: 10rem;}
.content_write .bo_write .select_box.mx600 {max-width: 37.5rem;}
.content_write .bo_write .input_box.mx600 {max-width: 37.5rem;}
.content_write .bo_write .input_box .label_text[for="price"]{ margin-left: 1rem;}
.content_write .bo_write .input_box .input_text[name="price"]{ max-width: 15rem;}
.content_write .bo_write .input_box .input_text.calender_btn {max-width: 15rem;}
.content_write .bo_write .input_box textarea.input_text {height: 10rem;}
.content_write .bo_write .input_box textarea.input_text.h_auto {height: unset;}
.content_write .bo_write .note-editable {height: 25rem;  overflow-y: auto;}
.content_write .bo_write .input_box .input_status {margin-top: 0.5rem; word-break: keep-all;}
.content_write .bo_write .file_list { width: 100%;  display: flex; flex-wrap: wrap; gap: 1rem;}
.content_write .bo_write .file_list .input_file_box {width: calc((100% - 1rem*2)/3);}
.content_write .bo_write .bo_content .item.item_agentId,
.content_write .bo_write .bo_content .item.item_agentId2,
.content_write .bo_write .bo_content .item.item_date{display: none;}
.content_write .bo_write .bo_content .item.item_agentId.show,
.content_write .bo_write .bo_content .item.item_agentId2.show,
.content_write .bo_write .bo_content .item.item_date.show{display: flex;}


/* component (임시작업) */
.sample_box { position: relative; padding: 5rem; display: flex; gap: 5rem 2.5rem; flex-wrap: wrap;}
.sample_box .sample_item {width: 100%; display: flex; flex-direction: column; gap: 0.75rem;}
.sample_box .sample_item.wid50 {width: calc((100% - 2.5rem*1)/2);}
.sample_box .sample_item.wid33 {width: calc((100% - 2.5rem*2)/3);}
.sample_box .sample_item.wid25 {width: calc((100% - 2.5rem*3)/4);}
.sample_box .sample_item.wid20 {width: calc((100% - 2.5rem*4)/5);}
.sample_box .sample_item > .title { font: var(--24_title_b); color: var(--basic-black);  text-transform: capitalize;}
.sample_box .sample_item > .contbox { width: 100%; display: flex; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap;}
.sample_box .sample_item > .contbox .contitem {width: calc((100% - 2.5rem*4)/5);}
.sample_box .sample_item > .contbox .contitem.wid100 {width: 100%;}
.sample_box .sample_item > .contbox .contitem.wid50 {width: calc((100% - 2.5rem*1)/2);}
.sample_box .sample_item > .contbox .contitem.wid33 {width: calc((100% - 2.5rem*2)/3);}
.sample_box .sample_item > .contbox .contitem.wid25 {width: calc((100% - 2.5rem*3)/4);}



/* 다크모드 */
body.darkmode {

	--brand-primary: #1e7eff;
	--brand-hover: #025bc7;
	--basic-black: #fff;
	--basic-darkgray: #c4c4c4;
	--basic-middlegray: #7b7b7b;
	--basic-lightgray: #434343;
	--basic-pale: #1c1c1e;
	--basic-white: #000;
	--basic-border: #444;
	--basic-border2: #444;
	--basic-bg: #121212;
	--basic-bg2: #1b1b1f;

	--primary-primary100: #0c3f81;
	--primary-primary200: #1657a7;
	--primary-primary300: #126dd9;
	--primary-primary400: #479efb;
	--primary-primary500: #60abfc;
	--primary-primary700: #92c5fd;
	--primary-primary800: #d3e8ff;
	--primary-primary900: #f5faff;

	--badge-re-bg: #2C0B0E;
	--badge-re-color: #FF453A;
	--badge-or-bg: #2D1A00;
	--badge-or-color: #FF9F0A;
	--badge-ye-bg: #2D2500;
	--badge-ye-color: #FFD60A;
	--badge-gr-bg: #002D15;
	--badge-gr-color: #30D158;
	--badge-bl-bg: #001A33;
	--badge-bl-color: #0A84FF;
	--badge-nv-bg: #1C1C3C;
	--badge-nv-color: #5E5CE6;
	--badge-pp-bg: #2C1C3C;
	--badge-pp-color: #BF5AF2;
	--badge-pk-bg: #3C1C2C;
	--badge-pk-color: #FF2D55;
	--badge-bk-bg: #2C2C2E;
	--badge-bk-color: #8E8E93;

	--pastel-re: #993D3D;
	--pastel-or: #996644;
	--pastel-ye: #998844;
	--pastel-gr: #557755;
	--pastel-bl: #446688;
	--pastel-ny: #4A6FA5;
	--pastel-pp: #775A99;
	--pastel-pk: #995566;
	--pastel-bk: #555555;

	--box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.5);

	background: var(--basic-black);

} 
 
* {transition: var(--transition);}


/* inputs */
body.darkmode .input_box .input_text { background-color: var(--basic-bg);}
body.darkmode .input_box .input_text.icon_ver { background-color: var(--basic-bg);}
body.darkmode .input_box .input_text.icon_ver.icon_date { background-image: url(../img/ic_datepicker_w.png);}
body.darkmode .input_sch_box .sch_btn {background-image: url(../img/ic_search_w.png);}

body.darkmode .input_box .input_btn { border-color: var(--basic-border2);  background: var(--basic-border2); color: var(--basic-black);}

body.darkmode .input_file_box .label_file { background-color: var(--basic-bg);}

body.darkmode .note-frame { color: var(--basic-black);  background-color: var(--basic-bg);}
body.darkmode .note-frame .note-toolbar { background-color: var(--basic-bg2);  border-color: var(--basic-border); color: var(--basic-black);}
body.darkmode .note-frame .note-btn { background-color: var(--basic-white);  border: 1px solid var(--basic-border); color: var(--basic-black);}


/* select */
body.darkmode .select_box .select {background-image: url(../img/select_arrow_w.png); background-color: var(--basic-bg);}
body.darkmode .select_box .select.typeB {background-image: none;}


/* checkbox */
body.darkmode .check_box .input_check { background-color: var(--basic-bg);}
body.darkmode .check_box .input_check:checked {background: var(--brand-primary);}


/* radio Button */
body.darkmode .radio_box .input_radio { background-color: var(--basic-bg);}


/* tab */
body.darkmode .tab_navbox.round_ver .tab_nav { background: var(--primary-primary100);  color: var(--primary-primary700);}
body.darkmode .tab_navbox.round_ver .tab_nav.on {background: var(--brand-primary); color: var(--basic-black);}
body.darkmode .tab_navbox.tabs_ver .tab_nav.on {color: var(--basic-black);}


/* pagination */
body.darkmode .pagination .page_link.active {color: var(--basic-black);}


/* button */
body.darkmode .button.typeA {color: var(--basic-black);}
body.darkmode .button.typeC { border-color: var(--basic-border2);  background: var(--basic-border2); color: var(--basic-black);}
body.darkmode .button.typeE {color: var(--basic-black);}
body.darkmode .button.typeF { background: var(--basic-bg)}


/* badge */
body.darkmode .badge.typeB {background: var(--basic-black);}
body.darkmode .badge.typeC {color: var(--basic-black);}
body.darkmode .badge.typeD {color: var(--basic-black);}
body.darkmode .badge.typeE { border-color: var(--basic-border2); background: var(--basic-border2); color: var(--basic-black);}
body.darkmode .badge.typeG {color: var(--basic-black);}
body.darkmode .badge.typeH {background: var(--basic-bg)}


/* table */
body.darkmode .tbl tbody tr.note td { background: #03111e}
body.darkmode .tbl tbody tr td.point { background: #03111e}
body.darkmode .tbl tbody tr td .copy_btn {color: var(--basic-black);}
body.darkmode .tbl tbody tr.selected th, 
body.darkmode .tbl tbody tr.selected td {color: var(--basic-black);}


/* modal */
body.darkmode .modal {background: rgba(0, 0, 0, 0.7);}
body.darkmode .modal .modal_box { background: var(--basic-pale);}
body.darkmode .modal .modal_box .modal_head { background: var(--primary-primary100);}
body.darkmode .modal .modal_box .modal_head .tit {color: var(--basic-black);}
body.darkmode .modal .modal_box .modal_body { background: var(--basic-pale);}


/* popup */
body.darkmode .popup .pop_head { background: var(--primary-primary100);}
body.darkmode .popup { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5), 0 3px 6px 0 rgba(0, 0, 0, 0.4);}
body.darkmode .popup .pop_head .pop_tit {color: var(--basic-black);}

body.darkmode .opt_box .opt_btn { background-color: var(--basic-bg);}


/* calender */
body.darkmode .calender .cal_body .week_date .date.selected { background: var(--badge-bl-bg);}
body.darkmode .calender .cal_head .leftbox .paging_box .paging_btn{color: var(--basic-black);}

body.darkmode .calender .cal_body .week_date .date.work { background: #3a3118; }
body.darkmode .calender .cal_body .week_date .date.work .events .working { color: #f0c85c; }

body.darkmode .calender .cal_body .week_date .date.leave { background: #4a1f1f; }
body.darkmode .calender .cal_body .week_date .date.leave .events .working { color: #ff6b6b; }

body.darkmode .calender .cal_body .week_date .date.annual { background: #1d3b2a; }
body.darkmode .calender .cal_body .week_date .date.annual .events .working { color: #5fd19b; }

body.darkmode .calender .cal_body .week_date .date.busdate .add_btn { background: var(--brand-hover);}


/* sidenav */
body.darkmode .sidenav { background: var(--basic-white);}
body.darkmode .sidenav .side_top .side_item .side_btn,
body.darkmode .sidenav .side_cont .menu_list .side_item .side_link { color: var(--basic-black);}
body.darkmode .sidenav .side_cont .side_submenu .side_subtit,
body.darkmode .sidenav .side_cont .side_submenu .side_acc > li .acc_tit,
body.darkmode .sidenav .side_cont .side_submenu .side_acc > li .acc_tit .arrow { color: var(--basic-black);}
body.darkmode .sidenav .side_cont .side_submenu .side_acc .acc_cont .side_item .side_link {color: var(--basic-darkgray);}
body.darkmode .sidenav .side_cont .side_submenu .chang_btn {background: var(--basic-lightgray);}


/* header */
body.darkmode .header .h_top .h_sidebox .darkmode_item .darkmode_btn .arrow {background-image: url(../img/select_arrow_w.png);}
body.darkmode .header .h_top .h_sidebox .alarm_item .alarm_btn .num {background: var(--primary-primary700);}
body.darkmode .header .h_bottom .gnb { background: #1e1e1e;}
body.darkmode .header .h_bottom .gnb .gnb_item .gnb_title .arrow {background-image: url(../img/select_arrow_w.png);}
body.darkmode .header .h_bottom .gnb .gnb_item .gnb_sublist { background: var(--basic-pale);}
body.darkmode .header .h_bottom .gnb { background: var(--basic-white);}
body.darkmode .header .navbox .topbox .menu_close { filter: invert(10);}


/* footer */
body.darkmode .footer {background: var(--basic-bg);}


/* container */
body.darkmode .container > .contents {background: var(--basic-bg);}


/* contents */
body.darkmode .content_title .page_title .icon { background: var(--primary-primary700);}

body.darkmode .content_search .tbl_morebtn { color: var(--basic-black);}

body.darkmode .content_tbl .tbl thead tr th .tbl_picon, 
body.darkmode .content_tbl .tbl tbody tr td .tbl_picon { color: var(--basic-black);}


/* list */
body.darkmode .chart_tooltip .title{color: var(--basic-lightgray);}
body.darkmode .chart_tooltip .descbox .desc .txt{color: var(--basic-lightgray);}


/* view */


/* write */




/* 250908 추가작업 */
.mob_filter_wrap { display: flex; flex-direction: column; gap: 1.5rem;}
.mob_filter_wrap .mob_filter_topbox {display: flex; align-items: center; justify-content: space-between; flex: 1; display: none;}
.mob_filter_wrap .mob_filter_topbox .leftbox { display: flex;  align-items: center;  gap: 0.5rem; font: var(--14_label_normal_r);}
.mob_filter_wrap .mob_filter_topbox .leftbox .select_box.w50 { width: 50%;}
.mob_filter_wrap .mob_filter_topbox .leftbox .total .color { color: var(--brand-primary); font-weight: 600;}
.mob_filter_wrap .mob_filter_topbox .rightbox{display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; }
.mob_filter_wrap .mob_filter_topbox .rightbox .mob_icon_button { display: flex; align-items: center;   justify-content: center; width: 2.4rem; aspect-ratio: 1 / 1; padding: 0;  font-size: 2.4rem;}
.mob_filter_wrap .content_search .tbl .mob_search_box td .schclose_btn { display: none;}

.mobtbl4 .tbl tbody tr td.mob_view {display: none;}
.mobtbl4 .tbl tbody tr td.mob_infobox {display: none;}



/* 251220 추가작업 */
.header .h_top .h_sidebox .item.ecount_item {display: none;}
.header .h_top .h_sidebox .item.connect_item {order: 1;}
.header .h_top .h_sidebox .connect_item .connect_btn { width: unset; aspect-ratio: unset; gap: 0.125rem;  font: var(--12_caption_m); white-space: nowrap;}
.header .h_top .h_sidebox .connect_item .connect_btn .mob_txt {display: none;}
.header .h_top .h_sidebox .connect_item .connect_btn .ph-bold {font-size: 0.875rem;  margin-right: 0.25rem; color: var(--brand-primary);}
.header .h_top .h_sidebox .connect_item .connect_btn .color { color: var(--brand-primary);}
#connect_popup { width: 12.5rem; max-height: 45rem; right: unset; left: 0;}
#connect_popup .item_wrap { padding: 0.875rem 1rem; display: flex; flex-direction: column;  gap: 1rem;}
#connect_popup .item_box { display: flex; flex-direction: column; gap: 1rem; }
#connect_popup .item_box .item_tit {  color: var(--basic-darkgray);  width: 100%;   font: var(--14_label_normal_sb); }
#connect_popup .item_box .item_list { display: flex;  flex-direction: column;  gap: 0.5rem;}
#connect_popup .item_box .item_list .item { display: flex;  align-items: center;  gap: 0.5rem; font: var(--12_caption_r);}
#connect_popup .item_box .item_list .item .thum { position: relative;  width: 1.5rem;   aspect-ratio: 1 / 1;  overflow: hidden;  border-radius: 50%;  display: flex;   align-items: center;  justify-content: center;  background: var(--primary-primary200);  color: var(--brand-primary);}
#connect_popup .item_box .item_list .item .thum .img { position: absolute;   left: 50%; top: 50%;  transform: translate(-50%, -50%); width: 100%;  height: 100%; object-fit: cover;}
#connect_popup .item_box .item_list .item .name {flex: 1;}
#connect_popup .item_box .item_list .item .state { width: 0.5rem;  aspect-ratio: 1 / 1; background: var(--basic-lightgray); border-radius: 50%;}
#connect_popup .item_box .item_list .item.on .name { font-weight: 600;}
#connect_popup .item_box .item_list .item.on .state { background: var(--brand-primary); box-shadow: 0px 0px 5px 1px rgba(8, 107, 241, 0.4);}

.darkmode #connect_popup .item_box .item_list .item .thum {background: var(--primary-primary800);}



/* 251224 수정작업 */
#connect_popup {width: 11rem;}
.note-editor .note-toolbar {text-align: left; padding: 3px 0 8px 8px !important;}



/* 251229 추가작업 */
.header .h_top .h_sidebox .naverplace_item {order:2}
.header .h_top .h_sidebox .smartstore_item {order:2}
.header .h_top .h_sidebox .naverplace_item .naverplace_link,
.header .h_top .h_sidebox .smartstore_item .smartstore_link { width: 1.25rem;  display: flex; align-items: center;  border-radius: 0.25rem; overflow: hidden;}



/* 260629 추가작업 */
@keyframes bell-swing {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}
.header .h_top .h_sidebox .item .alarm_btn.on .ph-bell{ color: var(--brand-primary);transform-origin: top center;  animation: bell-swing 1.2s ease-in-out infinite;}



/* 260721 수정작업 */
@media screen and (min-width: 1081px) {    

	.layout { padding-left: 3.25rem;}
	.sidenav { position: fixed;  left: 0; top: 0;}	
	.sidenav .side_cont .menu_list .side_item .side_link .txt .num {color: #ff1d30;}
	.container { width: 100%;}

	.sideopen .sidenav {width: 3.25rem;}
	.sideopen .sidenav .side_top .side_item .side_btn .txt {opacity: 0;}
	.sideopen .sidenav .side_cont .side_submenu {opacity: 0;}
	.sideopen .sidenav .side_cont .menu_list .side_item .side_link .txt {opacity: 0;}
	.sideopen .sidenav .side_submenu{opacity: 0;}
	.sideopen .container { width: 100%;}

	.sidenav:hover {width: 12.5rem;}
	.sidenav:hover .side_top .side_item .side_btn .txt {opacity: 1;}
	.sidenav:hover .side_cont .side_submenu {opacity: 1;}
	.sidenav:hover .side_cont .menu_list .side_item .side_link .txt {opacity: 1;}
	.sidenav:hover .side_submenu{opacity: 1;}

	.header .h_bottom .gnb .gnb_item .gnb_title.active .arrow {transform: rotate(0deg);}
	.header .h_bottom .gnb .gnb_item .gnb_sublist.show { opacity: 0; pointer-events: none;}
	.header .h_bottom .gnb .gnb_item::before { content: ""; position: absolute;left: 50%; top: calc(100% - 1rem); width: 100%; height: 3rem; transform: translateX(-50%); }
	.header .h_bottom .gnb .gnb_item:hover .gnb_title .arrow {transform: rotate(180deg);}
	.header .h_bottom .gnb .gnb_item:hover .gnb_sublist{ opacity: 1; pointer-events: unset;}

}

.header .h_bottom .gnb .gnb_item .gnb_sublist .gnb_subitem .gnb_link {  padding: 0.313rem 0.75rem;}
.header .h_bottom .gnb .gnb_item .gnb_sublist .gnb_subitem .gnb_link:hover {  color: var(--basic-bg2); background: var(--brand-primary); font-weight: 500;}


/* 260907 추가작업 */
.calender_popup {  padding: 0; gap: 0;}
.calender_popup .cal_head { gap: 1rem;  padding: 0.75rem 1.25rem;  background: var(--basic-bg2);}
.calender_popup .cal_head .leftbox .cal_date { gap: 0.75rem;}
.calender_popup .cal_head .leftbox .cal_date { display: flex; align-items: center;   gap: 0.375rem;}
.calender_popup .cal_head .rightbox .paging_box .paging_btn { color: var(--brand-hover);}
.calender_popup .cal_body { padding: 0.75rem;}
.calender_popup .cal_body .week_day .day { flex: 1;}
.calender_popup .cal_body .week_date .date { flex: 1;}
.calender_popup .cal_foot { font: var(--16_body_normal_m);  letter-spacing: 0.01em;   color: var(--basic-darkgray);  display: flex;  align-items: center;  justify-content: center;  gap: 0.75rem; padding: 0.75rem 0.75rem 1rem; border-top: 1px solid var(--basic-border2);}