@charset "utf-8"; 
/* Info
 ========================================================================== */
/**
 * 1. Writer: Lee A Jin. (Weaverloft Corp.)
 * 2. Production Date: 2025-09
 * 3. Client: (주)원터치
 * 4. Description: 공통 Style
 */

/*========== Import ==========*/
@import url("component.css");
@import url("header.css");
@import url("layout.css");
@import url("popup.css");
@import url("table.css");

/*========== Custom Design - Button ==========*/
.btn-wrap { display: flex; gap: 8px; align-items: center; justify-content: center; line-height: 1; } 
.btn-wrap.left { justify-content: flex-start; } 
.btn-wrap.right { justify-content: flex-end; } 
.btn-wrap a { width: auto; } 
.basic-btn { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; min-width: 102px; padding: 12px; border-radius: 4px; border: 1px solid var(--secondary_blue_1); background-color: var(--secondary_blue_1); color: #fff; font-size: 16px; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: background-color 300ms, border-color 300ms;} 
.basic-btn.line { border: 1px solid var(--gray_aa); background-color: transparent; color: var(--text_66); } 
.basic-btn.line:not(.blue):hover {background-color: #f5f5f5;}
.basic-btn.small {min-width: 100px; padding: 8px 10px; border-color: var(--text_66); color: var(--text_66);}
.basic-btn.blue {min-width: 100px; padding: 10px 12px;border-color: var(--secondary_blue_1);background-color: var(--secondary_blue_1); font-size: 14px;font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn.blue:hover {background-color: var(--btn_blue_bg);}
.basic-btn.blue.line {border-color: var(--secondary_blue_2); background-color: #ECF4FF; color: var(--secondary_blue_2);}
.basic-btn.blue.line:hover {background-color: #fff;}
.basic-btn.blue.line.adjust-btn {background-color: #fff;}
.basic-btn.blue.line.adjust-btn:hover { background-color: #ECF4FF; }
.basic-btn.red {min-width: 100px; padding: 10px 12px; border-color: #C0392B; background-color: #C0392B; color: #fff; font-size: 14px; font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn.red:hover {background-color: #A93226; border-color: #A93226;}
.basic-btn.red.line {border-color: #C0392B; background-color: #FDF2F2; color: #C0392B;}
.basic-btn.red.line:hover {background-color: #fff;}
.basic-btn.excel {min-width: 120px; padding: 10px 12px;border-color: var(--btn_green_txt); background-color: #fff; color: var(--btn_green_txt);font-size: 14px;font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn.excel:hover {background-color: #ecf1ec;}
.basic-btn.blue.small {min-width: 68px;padding: 7px 15px 6px;color: #fff;}
.basic-btn.xsmall { min-width: 60px; padding: 10px 12px;border-radius: 5px;font-size: 14px;font-weight: 500;font-variation-settings: 'wght' 500;}
.basic-btn.xsmall.gray { border: 1px solid #AAAAAA;background-color: #fff;color: #666; }
.basic-btn.xsmall.gray:hover { background-color: #f5f5f5; }
.basic-btn.gray.line {min-width: 100px; padding: 10px 12px;border: 1px solid var(--gray_aa); background-color: #fff; color: var(--text_66); font-size: 14px;font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn:disabled, .basic-btn.disabled, .basic-btn:disabled:hover, .basic-btn.disabled:hover {background-color: var(--gray_dd) !important; border-color: var(--gray_aa) !important; color: var(--gray_95) !important; cursor: default; pointer-events: none !important;}
.basic-btn.reg {min-width: 120px; padding: 10px 12px;font-size: 14px;font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn.gray.xxsmall {min-width: 48px; padding: 6px 12px;border: 1px solid #F5F5F5; background-color: #F5F5F5; color: var(--text_66); font-size: 14px;font-weight: 600; font-variation-settings: 'wght' 600;}
.basic-btn.gray.xxsmall:hover {background-color: var(--gray_dd);}
.basic-btn.xxsmall {background-color: #fff; border-color: var(--text_33); color: var(--text_33);min-width: 60px; border-radius: 3px;padding: 8px 12px;font-size: 13px;}
.basic-btn.xxsmall:hover, .basic-btn.xxsmall.line:not(.blue):hover { background-color: #e5e5e5;}
.basic-btn.print {background-color: #fff; border-color: var(--text_33); color: var(--text_33);}
.basic-btn.print span {padding-left: 24px;background-image: url('../images/common/icon-print.svg'); background-repeat: no-repeat; background-position: left center; background-size: 18px auto;}
.basic-btn.print.xsmall { min-width: auto; width: 38px; padding: 0; border-radius: 3px; }
.basic-btn.print.xsmall span {padding: 8px 12px;background-image: url('../images/common/icon-print.svg'); background-repeat: no-repeat; background-position: center center; background-size: 19px auto; text-indent: -9999px;}
.basic-btn.print:hover {background-color: #eeeeee;}
.basic-btn.print.xsmall:hover, .tabulator-row:hover .basic-btn.print.xsmall {background-color: #707070; border-color: #707070;}
.basic-btn.print.xsmall:hover span, .tabulator-row:hover .basic-btn.print.xsmall span {background-image: url('../images/common/icon-print-white.svg');}
.basic-btn.pdf {padding: 10px 22px;background-color: #fff; border-color: #B30B00; color: #B30B00;}
.basic-btn.pdf:hover {background-color: #fff6f6;}
.basic-btn.pw-reset-btn {min-width: 110px;}

.btn-tag { display: flex; width: auto; align-items: center; width: max-content; padding: 0 2px 0 15px; border-radius: 5px; background-color:#fff; border: 1px solid var(--gray_bb); font-size: 14px; cursor: pointer; line-height: 1; transition: border-color 300ms; } 
.btn-tag.home {padding: 0 15px 0 11px; border-color: var(--text_66);}
.btn-tag:hover { border-color: var(--text_66); } 
.btn-tag .tag-tit { display: inline-block; width: auto; padding: 7px 0; font-size: inherit; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_22); line-height: 1.1; } 
.btn-tag.home .tag-tit {padding-left: 20px;background-image: url('../images/common/icon-home.svg'); background-repeat: no-repeat; background-position: left top 45%; background-size: 15px auto; }
.btn-tag .tag-del { display: inline-block; width: 28px; height: 28px; background-image: url('../images/header/header-close.svg'); background-repeat: no-repeat; background-position: center; background-size: 14px auto; transition: all 0.2s; cursor: pointer; } 
.btn-tag:hover .tag-del { background-image: url('../images/header/header-close-hover.svg'); } 
.btn-tag.disabled .tag-tit, .btn-tag:disabled .tag-tit {opacity: 0.15; pointer-events: none; cursor: default;}
.btn-tag.disabled:hover, .btn-tag:disabled:hover {border-color: var(--gray_bb);}

.icon-txt-btn { font-size: 14px; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text_66); transition: opacity 300ms;}
.icon-txt-btn.plus i { width: 12px; height: 12px; margin-right: 4px; background-image: url('../images/common/icon-plus.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.basic-btn.plus i { width: 12px; height: 12px; margin-right: 4px; background-image: url('../images/common/icon-plus-white.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.icon-txt-btn:hover {opacity: 0.6;}

.favorites-btn {width: 22px; height: 22px; margin-left: 8px; background-image: url('../images/common/icon-star.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: all 300ms;}
.favorites-btn.on {background-image: url('../images/common/icon-star-on.svg');}

.file-download-btn {display: flex; align-items: center; justify-content: center; width: max-content; padding: 6px;padding-right: 16px; border-radius: 4px; border: 1px solid var(--gray_dd); font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_11);transition: all 300ms;}
.file-download-btn span { overflow: hidden;max-width: 200px;word-break: keep-all; text-overflow: ellipsis;white-space: nowrap;}
.file-download-btn i {display: inline-block; width: 24px; height: 24px; background-image: url('../images/common/icon-file.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.file-download-btn:hover {background-color: #f5f5f5; border-color: var(--gray_bb);}
.file-download-btn:hover {font-weight: 500; font-variation-settings: 'wght' 500;}

@media screen and (max-width: 520px) {
    .basic-btn:not(.blue.small, .xsmall, .xxsmall) {min-width: 90px;}
    .btn-wrap.flex-end .basic-btn {min-width: auto !important; width: 100%;}
}
@media screen and (max-width: 380px) {
    .btn-wrap {flex-wrap: wrap;}
}

/*========== Custom Design - Input ==========*/
.input-box-area {display: flex;gap: 8px;}
.input-box-wrap { display: flex; flex-flow: column;width: 100%; } 
.input-box-wrap.nowrap { flex-flow: row nowrap; align-items: center; } 
.input-box-wrap.error input {border-color: var(--accnet_base_red);}
.input-box-wrap.error input ~ .border-focus:before, .input-box-wrap.error input ~ .border-focus:after {display: none;}
.input-box-wrap.error input ~ .border-focus i:before, .input-box-wrap.error input ~ .border-focus i:after {display: none;}
.input-box-wrap.tel-input.error .input-box input {border-color: var(--accnet_base_red);}
.input-box-wrap.tel-input.error .border-focus:before,.input-box-wrap.tel-input.error .border-focus:after,.input-box-wrap.tel-input.error .border-focus i:before,.input-box-wrap.tel-input.error .border-focus i:after {display: none;}
.input-box-wrap.email-input.error .input-box input {border-color: var(--accnet_base_red);}
.input-box-wrap.email-input.error .border-focus:before,.input-box-wrap.email-input.error .border-focus:after,.input-box-wrap.email-input.error .border-focus i:before,.input-box-wrap.email-input.error .border-focus i:after {display: none;}
.input-box { display: flex; position: relative; width: 100%; } 
.input-label {display: flex; align-items: center; height: 36px; font-size: 14px;font-weight: 600; font-variation-settings: 'wght' 600; color: var(--text_66);}
.input-box-area.btn-input .btn-wrap {align-self: flex-start;}

/* Input */
.input-box .border-focus {display: none;}
.input-box input { width: 100%; height: 36px; padding: 4px 16px; border: 1px solid var(--gray_dd); border-radius: 4px; font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_11); transition: border-color 300ms; } 
.input-box input::placeholder { color: #959595; } 
.input-box input:focus { border-color: transparent; } 
.input-box input:disabled, .input-box.disabled input { background-color: #F8F8F8; color: var(--gray_95); cursor: default; pointer-events: none; } 
.input-box input:disabled::placeholder, .input-box.disabled input::placeholder { color: var(--gray_95); } 
.input-box.number input { text-align: right; } 
.input-box-wrap.error input:focus {border-color: var(--accnet_base_red);}
.input-box input:focus, .input-box input:hover {border-color: var(--text_33);}

/* input Email */
.email-input-wrap.flex { display: flex; align-items: center; justify-content: space-between; gap: 6px; } 
.email-input-wrap.flex > div { width: calc(100% / 3); } 
.email-input-wrap.flex > div.basic-select-box select { padding: 4px 34px 4px 12px; } 

/* Input - password */
.input-box.password input {padding-right: 34px;}
.input-box.password .eye-btn { z-index: 10; position: absolute; top: 50%; right: 5px; transform: translate(0, -50%); width: 28px; height: 90%; background-image: url('../images/common/icon-eyes-off.svg'); background-size: 18px auto; background-repeat: no-repeat; background-position: center center; } 
.input-box.password .eye-btn.open {background-image: url('../images/common/icon-eyes.svg');}

@media screen and (max-width: 768px) {
    .input-box input {padding: 4px 10px;}
}

/* input Radio */
.basic-radio-box { display: inline-block; } 
.basic-radio-box input[type="radio"] { display: none; } 
.basic-radio-box input[type="radio"] + label { display: inline-block; margin: 0 auto; vertical-align: middle; position: relative; cursor: pointer; box-sizing: border-box;font-weight: 400;font-variation-settings: 'wght' 400; } 
.basic-radio-box input[type="radio"] + label span { padding: 0 0 0 32px; } 
.basic-radio-box input[type="radio"] + label::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 0;  width: 24px; height: 24px; border: 1px solid var(--gray_dd); background-color: #fff; border-radius: 50%; transform: translate(0, -50%); box-sizing: border-box; } 
.basic-radio-box input[type="radio"]:checked + label::before {background-image: url('../images/common/icon-radio-on.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; border: none; background-color: transparent; } 
.basic-radio-box.disabled input[type="radio"] + label { cursor: default; } 
.basic-radio-box.disabled input[type="radio"] + label::before {background-image: url('../images/common/icon-radio-off.svg');  border: none; background-color: var(--gray_ee); } 
.basic-radio-box input[type="radio"]:disabled + label { cursor: default; } 
.basic-radio-box input[type="radio"]:disabled + label::before {background-image: url('../images/common/icon-radio-off.svg');  border: none; background-color: var(--gray_ee); } 

/* input Checkbox */
input[type="checkbox"] + label { cursor: pointer; } 
.basic-check-box input[type="checkbox"] { display: none; } 
.basic-check-box input[type="checkbox"] + label { position: relative; display: inline-block; width: auto; height: auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; line-height: 1; } 
.basic-check-box input[type="checkbox"] + label:hover { opacity: 0.8; } 
.basic-check-box input[type="checkbox"] + label::before { overflow: hidden; content: ""; display: inline-block; width: 24px; height: 24px; margin: 0 10px 0 0; border: 1px solid var(--gray_dd); background-color: #fff; border-radius: 2px; box-sizing: border-box; vertical-align: middle; transform: translateY(-1px); cursor: pointer; } 
.basic-check-box input[type="checkbox"]:checked + label::before { border: 1px solid var(--secondary_blue_1); background-color: var(--secondary_blue_1); background-image: url("../images/common/icon-chk-on.svg"); background-repeat: no-repeat; background-position: center center; background-size: cover; cursor: pointer; } 
.basic-check-box.disabled input[type="checkbox"] + label { cursor: default; } 
.basic-check-box.disabled input[type="checkbox"] + label::before { background-color: var(--gray_ee); cursor: default; } 
.basic-check-box input[type="checkbox"]:disabled + label { cursor: default; } 
.basic-check-box input[type="checkbox"]:disabled + label::before { background-color: var(--gray_ee); cursor: default; } 
.basic-check-box.disabled input[type="checkbox"] + label:hover { opacity: 1; } 

@media screen and (max-width: 620px){
    .basic-check-box input[type="checkbox"] + label:hover { opacity: 1; } 
    .basic-check-box input[type="checkbox"] + label::before { width: 19px; height: 19px; } 
    /* all-checkbox */
    .all-check-box.basic-check-box input[type="checkbox"] + label::before { width: 21px; height: 21px; } 
}

/* input file */
.input-box-area.file-btn {flex-wrap: wrap;}
.input-box-area.file-btn.multiple .input-box-wrap .flex-wrap { flex-wrap: wrap; }
.input-box-area.file-btn .input-box-wrap { width: max-content;}
.input-box.file {position: relative;width: 200px;}
.input-box.file input {padding: 4px 32px 4px 16px;text-overflow: ellipsis; cursor: default;}
.input-box.file .file-del-btn {display: none;position: absolute;top: 50%;right: 8px;width: 18px;height: 18px;transform: translate(0, -50%);z-index: 10;background-image: url('../images/common/icon-lable-close.svg');background-repeat: no-repeat;background-position: center center;background-size: 12px auto;text-indent: -9999px;}
.input-box.file:hover .border-focus:before, .input-box.file:hover .border-focus:after { width: 100%; transition: 0.3s; } 
.input-box.file:hover .border-focus i:before, .input-box.file:hover .border-focus i:after { height: 100%; transition: 0.4s; } 

/*========== Custom Design - Input Button ==========*/
.chk-btn-wrap { justify-content: space-between; } 
.chk-btn-wrap .basic-check-box input[type="checkbox"] + label { min-width: 70px; padding: 11px; border-radius: 4px; border: 1px solid var(--gray_dd); background-color: #fff; font-size: 13px; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--gray_95); text-align: center; transition: background-color 300ms, border-color 300ms; line-height: 1;} 
.chk-btn-wrap .basic-check-box input[type="checkbox"]:checked + label { border-color: var(--secondary_blue_1); background-color: #ECF4FF; color: var(--secondary_blue_1);} 
.chk-btn-wrap .basic-check-box input[type="checkbox"] + label::before { display: none; } 
.chk-btn-wrap .basic-check-box input[type="checkbox"]:checked + label::before { display: none; } 
.chk-btn-wrap .basic-radio-box { margin: 0; } 
.chk-btn-wrap .basic-radio-box input[type="radio"] + label { min-width: 70px; padding: 11px; border-radius: 4px; border: 1px solid  var(--gray_dd); background-color: #fff; font-size: 13px; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--gray_95); text-align: center; transition: background-color 300ms, border-color 300ms; line-height: 1; } 
.chk-btn-wrap .basic-radio-box input[type="radio"]:checked + label { border-color: var(--secondary_blue_1); background-color: #ECF4FF; color: var(--secondary_blue_1);} 
.chk-btn-wrap .basic-radio-box input[type="radio"] + label::before { display: none; } 
.chk-btn-wrap .basic-radio-box input[type="radio"]:checked + label::before { display: none; } 
.chk-btn-wrap .basic-radio-box input[type="radio"] + label span { padding: 0; } 
.chk-btn-wrap .basic-radio-box input[type="radio"] + label:hover { border-color: var(--secondary_blue_1); color: var(--secondary_blue_1); } 
.input-box.submit input { min-width: 160px; padding: 20px; height: 60px; border-radius: 4px; background-color: var(--secondary_blue_2); border-color: var(--secondary_blue_2); font-size: 18px; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1; transition: background-color 300ms; color: #fff; cursor: pointer; } 
.input-box.submit:hover input {background-color: var(--secondary_blue_1);border-color: var(--secondary_blue_1);}
.input-box.submit input:focus {outline: 2px dashed #111;}
@media screen and (max-width: 620px){
    .chk-btn-wrap {flex-wrap: wrap; justify-content: flex-start;}
}

/*========== Custom Design - Button On & Off ==========*/
.btn-on-off-wrap { position: relative; } 
.btn-on-off-wrap input[type="checkbox"] + label { position: static; top: auto; left: auto; transform: translate(0,0); cursor: pointer; } 
.btn-on-off-wrap input[type="checkbox"] + label::before, .btn-on-off-wrap input[type="checkbox"]:checked + label::before { width: auto; height: auto; background-color: transparent; background: none; border: none; border-radius: 0; transition: 0ms; outline: none; outline-color: transparent; } 
.btn-on-off-wrap input[type="checkbox"] + label { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 16px; border-radius: 14px; background-color:#999; } 
.btn-on-off-wrap input[type="checkbox"] + label span { position: absolute; left: 10px; transform: translateX(-8px); top: 2px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background-color: #fff; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label span {  transform: translateX(6px);} 
.btn-on-off-wrap input[type="checkbox"]:checked + label { background-color: var(--secondary_blue_1); } 
.btn-on-off-wrap input[type="checkbox"]:disabled + label, .btn-on-off-wrap input[type="checkbox"][readonly] + label, .btn-on-off-wrap input[type="checkbox"].disabled + label {opacity: 0.4; pointer-events: none; cursor: default; } 
.btn-on-off-wrap input[type="checkbox"]:disabled:checked + label, .btn-on-off-wrap input[type="checkbox"][readonly]:checked + label, .btn-on-off-wrap input[type="checkbox"].disabled:checked + label { opacity: 0.4; pointer-events: none; cursor: default;} 

/*========== Custom Design - Textarea ==========*/
.textarea-box-wrap { position: relative; border-radius: 4px; } 
.textarea-box { min-height: 100%; border: 1px solid var(--gray_dd); background-color: #fff; border-radius: 4px; padding: 10px; min-height: 80px; transition: padding 300ms, border-color 300ms; } 
.textarea-box textarea { display: block; width: 100%; min-height: 100%; border-radius: inherit; padding: 1px; font-size: 14px;font-weight: 400; font-variation-settings: 'wght' 400;color: var(--text_11);} 
/* Textarea - Keyup */
.textarea-box-wrap:has(.keyup) { position: relative; padding-bottom: 40px; border: 1px solid var(--gray_dd); background-color: #fff; transition: border-color 300ms;}
.textarea-box-wrap:has(.keyup textarea:focus) { border-color: transparent;}
.textarea-box-wrap:has(.keyup textarea:hover) { border-color: transparent;}
.textarea-box-wrap .textarea-box.keyup { display: flex; border: none; } 
.textarea-box.keyup textarea {height: initial; min-height: auto;}
.textarea-box-wrap .write-typing { display: flex; align-items: center; position: absolute; top: auto; right: 0.875em; bottom: 0.875em; transform: translate(0,0); font-size: 12px; font-weight: 500; font-variation-settings: 'wght' 500; color:var(--text_66); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); } 
.textarea-box-wrap .write-typing .btn-wrap {margin-left: 8px;}
/* Select - Animation */
.textarea-box textarea .border-focus {display: none;}
.textarea-box-wrap:not(.keyup) .textarea-box:has(textarea:focus), .textarea-box-wrap:not(.keyup) .textarea-box:has(textarea:hover) {border-color: var(--text_33);}
.textarea-box-wrap:has(.textarea-box.keyup textarea:focus), .textarea-box-wrap:has(.textarea-box.keyup textarea:hover) {border-color: var(--text_33);}
/* Textarea - Disabled & Readonly */
.textarea-box-wrap:has(textarea:disabled, .disabled), .textarea-box-wrap.disabled {color:var(--gray_95); background-color: #F8F8F8;}
.textarea-box.disabled textarea, .textarea-box textarea:disabled, .textarea-box textarea[readonly] { color:var(--gray_95); background-color: #F8F8F8; } 
.textarea-box-wrap:has(.disabled) .write-typing .typing-num, .textarea-box-wrap:has(textarea:disabled) .write-typing .typing-num ,.textarea-box-wrap:has(textarea[readonly]) .write-typing .typing-num { color: var(--gray_95); background-color: #F8F8F8; } 
.textarea-box-wrap:has(textarea:disabled, .disabled) .basic-btn, .textarea-box-wrap.disabled .basic-btn, .textarea-box-wrap:has(textarea:disabled, .disabled) .basic-btn:hover, .textarea-box-wrap.disabled .basic-btn:hover {opacity: 0.6; pointer-events: none; background-color: var(--secondary_blue_1);}
.textarea-area.error .textarea-box { border-color: var(--accnet_base_red);}
.textarea-area.error .textarea-box-wrap, .textarea-area.error .textarea-box-wrap:has(.keyup textarea:hover) , .textarea-area.error .textarea-box-wrap:has(.keyup textarea:focus) { border-color: var(--accnet_base_red);}

@media screen and (max-width: 1024px) {
    .textarea-box { min-height: 80px;} 
}

/*========== Custom Design - Select ==========*/
.basic-select-area {position: relative; height: 36px;}
.basic-select-area:has(.basic-select-box.small, .basic-select-box.xsmall, .basic-select-box.noline) { height: 28px;}
.basic-select-area {position: relative; height: 36px;}
.basic-select-box { position: relative; width: 100%; } 
.basic-select-box .border-focus {display: none;}
.basic-select-box select { position: relative; z-index: 1; background-color: transparent; width: 100%; min-width: 70px; height: 36px; padding: 4px 34px 4px 16px; border: 1px solid var(--gray_dd); border-radius: 4px; font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--gray_95);  transition: border-color 300ms;} 
.basic-select-box select:focus, .basic-select-box select:hover {border-color: var(--text_33); color: var(--text_11);}
.basic-select-box::after { content: ''; position: absolute; top: 0; right: 5px; width: 24px; height: 100%; background-image: url('../images/common/icon-select-arrow-big.svg'); background-repeat: no-repeat; background-size: 100% auto; background-position: center center;}
.basic-select-box:has(select:focus)::after { transform: rotate(-180deg);}
.basic-select-box.small select { height: 28px; padding: 4px 26px 4px 12px; } 
.basic-select-box.small::after {width: 14px;background-image: url('../images/common/icon-select-arrow.svg');background-repeat: no-repeat;} 
.basic-select-box.xsmall select { height: 28px;padding: 4px 26px 4px 12px; }
.basic-select-box.xsmall::after { right: 10px;width: 16px;}
.basic-select-box.noline select {min-width: auto; border: none;padding: 4px 22px 4px 12px;}
.basic-select-box.noline::after {right: 3px;}
.basic-select-box select:disabled, .basic-select-box.disabled select {background-color: #F8F8F8 !important; color: var(--gray_95) !important; cursor: default !important; pointer-events: none !important;}


/*========== Custom Design - Custom Select ==========*/
.custom-select-box { position: relative; width: auto; min-width: auto; height: 36px; }
.custom-select-box .init { height: 100% }
.custom-select-box .init a { display: flex; align-items: center; position: relative; z-index: 2; height: 100%; padding: 4px 34px 4px 16px; background-color: #fff; border-radius: 4px; border: 1px solid var(--gray_dd); font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_11); transition: border-color 300ms, color 300ms;}
.custom-select-box .init .icon {position: absolute; position: absolute; top: 0; right: 5px; width: 24px; height: 100%; background-image: url('../images/common/icon-select-arrow-big.svg'); background-repeat: no-repeat; background-size: 100% auto; background-position: center center;}
.custom-select-box.open .init > a {z-index: 20;border-color: var(--text_33); color: var(--text_11);}
.custom-select-box .init:hover a {border-color: var(--text_33); color: var(--text_11);}
.custom-select-box.open .init .icon { transform: rotate(-180deg); }
.custom-select-box ul { opacity: 0; overflow: hidden; position: relative; z-index: 1; top: 0; height: 0; width: 100%;min-width: 70px; background-color: #fff; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }
.custom-select-box ul li { width: 100%; height: auto; padding: 0; transition: background-color 300ms; }
.custom-select-box ul li a { position: relative; z-index: 22; padding: 10px; border-radius: 4px;font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_11); transition:all 300ms; }
.custom-select-box ul li:hover a { background-color: var(--primary_blue_light); }
.custom-select-box.open ul { opacity: 1; z-index: 22;overflow-y: auto;max-height: 212px;padding: 6px; border: 1px solid var(--gray_dd); border-top: none;}
.custom-select-box .total-num { display: inline-block; margin-top: 2px; margin-left: 3px; font-size: 0.875rem; font-weight: 800; font-variation-settings: 'wght' 800; color: var(--main-color); }
.date .custom-box-wrap {min-width: 132px;}
.custom-box-wrap.combine .flex-wrap.gap-10 {width: 100%;}
.custom-box-wrap.combine .custom-select-box {width: 50%;}
/* 위로 열리는 스타일 */
.custom-box-wrap.up .custom-select-box ul {position: absolute; top: auto; bottom: 100%; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05); }

.custom-select-box.small {height: 28px;}
.custom-select-box.small .init a { padding: 4px 24px 4px 16px;}
.table-area .custom-select-box.small .init a {justify-content: center; padding: 4px 20px 4px 16px;}
.custom-select-box.small .init .icon {width: 14px;background-image: url('../images/common/icon-select-arrow.svg');background-repeat: no-repeat;}
.custom-select-box.small ul li a { padding: 4px 10px;}

.custom-select-box.xsmall {height: 28px;}
.custom-select-box.xsmall .init a {padding: 4px 26px 4px 12px;}
.custom-select-box.xsmall .init .icon {right: 4px;width: 16px;}
.custom-select-box.xsmall ul li a { padding: 4px 10px;}

.custom-select-box.xsmall.noline .init a {min-width: auto;border: none;padding: 4px 22px 4px 12px; background-color: transparent;}
.custom-select-box.xsmall.noline .init .icon {right: 3px;}
.custom-select-box.xsmall.noline ul {min-width: max-content;}

.custom-select-box.disabled .init a {background-color: #F8F8F8 !important; color: var(--gray_95) !important; cursor: default !important; pointer-events: none !important;}
.custom-box-wrap.error .custom-select-box .init a {border-color: var(--accnet_base_red);}

@media screen and (max-width: 768px) {
    .custom-select-box .init a {padding: 4px 34px 4px 10px;}
}

/*========== Custom Design - Input Search ==========*/
.common-sch-box { position: relative; } 
.common-sch-box .input-box input { width: 100%; height: 34px; padding: 4px 30px 4px 46px; border: 1px solid rgba(255, 255, 255, 0.42); background-color: transparent; border-radius: 4px; font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: #fff;} 
.common-sch-box .input-box input::placeholder {font-weight: 500; font-variation-settings: 'wght' 500; color: #959595; } 
.common-sch-box .search-btn { display: block; position: absolute; top: 4px; left: 13px; width: 26px; height: 26px; z-index: 10; background-image: url('../images/header/header-search.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -9999px; } 
.common-sch-box .search-del-btn { display: none; position: absolute; top: 50%; right: 8px; width: 18px; height: 18px; transform: translate(0, -50%); z-index: 10; background-image: url('../images/header/header-search-close.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -9999px; } 
.common-sch-box.ing .search-del-btn { display: block; } 
.common-sch-box.input .input-box input { height: 36px; padding: 4px 32px 4px 16px; border: 1px solid var(--gray_dd); background-color: #fff; border-radius: 4px; font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_11); transition: border-color 300ms;}
.common-sch-box.input .input-box input::placeholder {font-weight: 500; font-variation-settings: 'wght' 500;color: var(--gray_95);}
.common-sch-box.input .input-box input ~ .border-focus:before, .common-sch-box.input .input-box input ~ .border-focus:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: var(--text_33); transition: 0.3s; } 
.common-sch-box.input .search-del-btn {background-image: url('../images/header/header-close-hover.svg');}
.common-sch-box .input-box input:hover, .common-sch-box .input-box input:focus {border-color: var(--text_33);}
.head-area .common-sch-box .input-box input:hover, .head-area .common-sch-box .input-box input:focus {border-color: #fff;}
.common-sch-box .border-focus {display: none;}

@media screen and (max-width: 768px) {
    .common-sch-box .input-box input {padding: 4px 26px 4px 32px;}
    .common-sch-box .search-btn {top: 6px;left: 6px;width: 22px;height: 22px;}
    .common-sch-box .search-del-btn {right: 6px;width: 16px;height: 16px;}
}

/*========== Custom Design - Datepicker ==========*/
.datepicker-box-wrap {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 8px; } 
.input-box.datepicker-box {width: 100%; min-width: 132px; max-width: 178px;}
.input-box.datepicker-box input {padding-right: 34px;background-repeat: no-repeat;background-position: calc(100% - 12px) center;background-size: 14px auto;background-image: url("../images/common/icon-datepicker.svg");cursor: pointer; } 
/* Datepicker - Animation */
.input-box.datepicker-box input ~ .border-focus:before, .input-box.datepicker-box input ~ .border-focus:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: var(--text_33); transition: 0.3s; } 
.input-box.datepicker-box input ~ .border-focus:after { top: auto; bottom: 0; left: auto; right: 0; } 
.input-box.datepicker-box input ~ .border-focus i:before, .input-box.datepicker-box input ~ .border-focus i:after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background-color: var(--text_33); transition: 0.4s; } 
.input-box.datepicker-box input ~ .border-focus i:after { left: auto; right: 0; top: auto; bottom: 0; } 
.input-box.datepicker-box input:focus ~ .border-focus:before, .input-box.datepicker-box input:focus ~ .border-focus:after { width: 100%; transition: 0.3s; } 
.input-box.datepicker-box input:focus ~ .border-focus i:before, .input-box.datepicker-box input:focus ~ .border-focus i:after { height: 100%; transition: 0.4s; } 
.input-box.datepicker-box input:hover ~ .border-focus:before, .input-box.datepicker-box input:hover ~ .border-focus:after { width: 100%; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } 
.input-box.datepicker-box input:hover ~ .border-focus i:before, .input-box.datepicker-box input:hover ~ .border-focus i:after { height: 100%; transition: 0.4s; } 
.input-box.datepicker-box input::placeholder {color: var(--gray_95);}

.datepicker-area.error input {border-color: var(--accnet_base_red);}
.datepicker-area.error input ~ .border-focus:before, .datepicker-area.error input ~ .border-focus:after {display: none;}
.datepicker-area.error input ~ .border-focus i:before, .datepicker-area.error input ~ .border-focus i:after {display: none;}
@media screen and (max-width: 450px) {
    .datepicker-box-wrap {flex-direction: column;}
    .input-box.datepicker-box {max-width: none;}
    .datepicker-box-wrap .mid-line {line-height: 1;}
}

/* ui-datepicker */
.ui-datepicker * {font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;}
.ui-datepicker { display: none; width: 290px !important; background-color: #fff; border-radius: 6px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); } 
.ui-widget.ui-widget-content { z-index: 20001 !important; border: none; } 
.ui-timepicker-standard { z-index: 20001 !important; } 
.ui-widget-header { border: 0px solid #dddddd; background: #fff; } 
.ui-datepicker .ui-datepicker-header { position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 4px; padding: 6px; margin: 0 0 20px; } 
.ui-helper-clearfix:before, .ui-helper-clearfix:after { display: none; } 
.ui-datepicker .ui-datepicker-title { order: 1; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(100% - 64px); margin: 0 0em; line-height: 1; text-align: center; font-size: 17px; padding: 0px; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-txt-color);} 
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year, .ui-datepicker-title .ui-datepicker-month { width:auto; margin: -1px 0 0; padding: 0 1px 0 4px; border: none; background: none; font-size: 17px; font-weight: 700 !important; font-variation-settings: 'wght' 700 !important; text-align: center; color: var(--main-txt-color); } 
.ui-datepicker select.ui-datepicker-month:focus, .ui-datepicker select.ui-datepicker-year:focus { border: none; } 
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; border-radius: 4px; } 
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar-thumb { background-color: var(--main-point-color); border-radius: 4px; } 
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: 4px; } 
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; float: unset; width: 32px; height: 32px; padding: 4px; border-radius: 50%; transition: border-color 400ms; cursor: pointer; } 
.ui-datepicker .ui-datepicker-prev {left: 6px;}
.ui-datepicker .ui-datepicker-next {right: 6px;}
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover {border: 1px solid #343438;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { position: static; display: block; width: 100%; height: 100%; margin: 0; background-position: center center; background-size: 20px auto; background-repeat: no-repeat; background-image: url("../images/common/icon-arrow-next.svg"); text-indent: -9999px; } 
.ui-datepicker .ui-datepicker-prev span {background-image: url('../images/common/icon-arrow-left.svg'); } 
.ui-datepicker .ui-datepicker-next span {background-image: url("../images/common/icon-arrow-right.svg"); } 
.ui-datepicker-calendar>thead>tr>th:first-child, .ui-datepicker-calendar>thead>tr>th:last-child, .ui-datepicker-calendar>thead>tr>th {font-size: 1rem !important; font-weight: 600 !important; font-variation-settings: 'wght' 600 !important;color: var(--main-txt-color) !important;}
.ui-datepicker-calendar>thead>tr>th> span {font-weight: 600 !important; font-variation-settings: 'wght' 600 !important;}
.ui-datepicker-calendar>tbody>tr>td {padding: 0;font-size: 15px !important;text-align: center;}
.ui-datepicker-calendar>tbody>tr:first-child>td {padding-top: 5px;}
.ui-state-default, .ui-widget-content .ui-state-default {border: none; background-color: transparent;}
.ui-datepicker-calendar>tbody>tr>td>a, .ui-datepicker-calendar>tbody>tr>td:first-child a, .ui-datepicker-calendar>tbody>tr>td:last-child a {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 15px !important; font-weight: 500 !important; font-variation-settings: 'wght' 500 !important;color: var(--text-dark-color) !important;}
.ui-datepicker-calendar>tbody>tr>td>a:hover {background-color: #f0f8ff;}
.ui-state-default.ui-state-active, .ui-datepicker-calendar>tbody>tr>td:first-child a.ui-state-active, .ui-datepicker-calendar>tbody>tr>td:last-child a.ui-state-active {background-color: var(--primary_blue_1) !important; color: #fff !important; }
.ui-state-disabled, .ui-state-disabled .ui-state-default {color: #bbb !important;text-align: center;}
.month-picker-grid {display: flex; flex-wrap: wrap;gap: 10px;}
.month-picker-grid > .month-item {width: calc(100% / 3 - 10px); padding: 8px 12px;border: 1px solid var(--label-gray); border-radius: var(--check-radius); background-color: #fff; color: #666; text-align: center;cursor: pointer; transition: border 400ms, background-color 400ms, color 400ms;font-weight: 500; font-variation-settings: 'wght' 500;}
.month-picker-grid > .month-item:hover {border-color: var(--main-point-color); background-color: #F5F5F7; color: #111; }
.ui-state-highlight {background-color: #f0f8ff !important;border: 1px dashed #1C52D8 !important;}
@media screen and (max-width: 1100px){
    .ui-datepicker {width: 264px !important;padding: 12px;border-radius: 16px;}
    .ui-datepicker .ui-datepicker-title, .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year, .ui-datepicker-title .ui-datepicker-month {font-size: 16px;}
    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {width: 32px; height: 32px;}
    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {background-size: 22px auto;}
    .ui-datepicker .ui-datepicker-next span { background-position: 0%;}
    .ui-datepicker .ui-datepicker-prev span { background-position: 110%;}
    .ui-datepicker .ui-datepicker-header {height: 44px;margin: 0 0 20px;}
    .ui-datepicker-calendar>tbody>tr>td {width: 34px;font-size: 14px !important;}
    .ui-datepicker-calendar>tbody>tr>td>a, .ui-datepicker-calendar>tbody>tr>td:first-child a, .ui-datepicker-calendar>tbody>tr>td:last-child a {width: 32px; height: 32px;}
}

/* timepicker */
.timepicker-area {display: flex; align-items: center; gap: 12px;}
.timepicker-area .custom-box-wrap {display: flex; align-items: center; gap: 5px;}
.timepicker-area .custom-select-box {min-width: 90px;}
.timepicker-area .custom-box-wrap .mid-line {font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text_11);}
.timepicker-area .custom-select-box.open ul {max-height: 170px;}

@media screen and (max-width: 1580px) {
    .timepicker-area .custom-select-box {min-width: 60px;}
}
@media screen and (max-width: 768px) {
    .timepicker-area .custom-select-box {min-width: 60px;}
}

/*========== Profile ==========*/
.profile-wrap { min-width: fit-content; } 
.profile-wrap-inner { display: flex; align-items: center; gap: 10px; } 
.profile-img { display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; width: 40px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--gray_cc); } 
.profile-info { display: flex; justify-content: center; flex-direction: column; } 
.profile-tit strong { font-size: 15px; font-weight: 600; font-variation-settings: 'wght' 600; color: #fff; } 
.profile-tit strong + span { position: relative; padding-left: 6px; margin-left: 6px; font-size: 13px; font-weight: 400; font-variation-settings: 'wght' 400; color: rgba(255, 255, 255, 0.8); } 
.profile-tit strong + span::after { content: ''; position: absolute; top: 50%; left: 0; transform:translate(0, -50%); width: 1px; height: 10px; background-color: rgba(255, 255, 255, 0.5); } 
.profile-txt { font-size: 13px; font-weight: 400; font-variation-settings: 'wght' 400; color: rgba(255, 255, 255, 0.5); } 

@media screen and (max-width: 768px) {
    .profile-wrap { min-width: max-content; } 
    .profile-img {width: 28px;}
    .profile-tit strong {font-size: 13px;}
    .profile-tit strong + span {font-size: 12px;}
    .profile-txt {font-size: 12px;}
}

/*========== Profile Mypage ==========*/
.profile-img-area { position: relative; width: 100px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } 
.profile-img-area::before { content: ''; z-index: 30; position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; border: 4px solid #fff; border-radius: 50%; background-image: url('../images/common/icon-edit.svg'); background-position: center center; background-repeat: no-repeat; background-size: 13px auto; background-color: var(--gray_70); } 
.profile-img-area .profile-img { width: 100%; } 
.profile .profile-id { font-size: 24px; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--text_33); } 
.item-icon-list.user-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } 
.item-icon-list.user-btn li a { font-size: 16px; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text_66); } 

/*========== Badge ==========*/
.badge-wrap { display: flex; align-items: center; gap: 4px; } 
.badge { display: flex; justify-content: center; align-items: center; width: max-content; height: 20px;margin: 0 auto; padding: 0 5px; border-radius: 3px; font-size: 12px; font-weight: 500; font-variation-settings: 'wght' 500; color: #fff; line-height: 1; box-sizing: content-box; } 
.badge.ing { background-color: var(--badge_green_bg); border: 1px solid var(--badge_green_line); } 
.badge.stay { background-color: var(--badge_blue_bg); border: 1px solid var(--badge_blue_line); } 
.badge.done { background-color: var(--badge_gray_bg); border: 1px solid var(--badge_gray_line); } 
.badge.cancel { background-color: var(--badge_org_bg); border: 1px solid var(--badge_org_line); } 
.badge.fix {background-color: var(--badge_red_bg); border-color: var(--badge_red_line); } 
.status-default { display: flex; justify-content: center; align-items: center; width: max-content; height: 20px;margin: 0 auto; padding: 0 5px; border-radius: 3px; font-size: 12px; font-weight: 800; font-variation-settings: 'wght' 800; color: #fff; line-height: 1; box-sizing: content-box; background-color: var(--badge_gray_bg); border: 1px solid var(--badge_gray_line); } 
.badge.delay {background-color: var(--badge_red_bg); border: 1px solid var(--badge_red_line);}
.badge.nodelay {background-color: var(--badge_blue_bg); border: 1px solid var(--badge_blue_line);}
.form-input .badge {margin: 0;}
.count-num {font-weight: 600; font-variation-settings: 'wght' 600;}
.count-num.blue {color: var(--secondary_blue_2);}
.count-num.red {color: var(--badge_red_line);}
 
/*========== Label ==========*/
.label-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 1200px; } 
.label-wrap .label { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 54px; height: 36px; padding: 10px 16px; border-radius:5px; background-color: #FFF; border: 1px solid var(--gray_dd); font-size: 14px; color: var(--text_11); font-weight: 400; font-variation-settings: 'wght' 400; cursor: pointer; line-height: 1; transition: background-color 300ms; } 
.label-wrap .label:hover { background-color: #ECF4FF; } 
.label-wrap.tag .label { display: none; } 
.label-wrap.tag .label.on { display: flex; } 
.label-wrap.tag .label span { padding: 5px 0 6px; line-height: 1; } 
.label-wrap.tag .hashtag { display: inline-block; width: 12px; height: 12px; background-image: url('../images/common/icon-lable-close.svg'); background-repeat: no-repeat; background-position: center; background-size: 10px auto; transition: all 0.2s; cursor: pointer; } 

/*========== Chart ==========*/
.chart-area-wrap {position: relative; width: 100%; background: #fff;}
.chart-area {position: relative;}
.chart-area-inner {position: relative; width: 100%;}
.chart-area.empty-data::before {content: '데이터가 없습니다'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6c757d; font-size: 16px; z-index: 10;}
.chart-area.empty-data canvas {opacity: 0.3;}
/* 범례 */
.chart-legend {margin-top: 20px; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;}
.legend-item {display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f8f9fa; border-radius: 6px; font-size: 14px;}
.legend-color {width: 12px; height: 12px; border-radius: 3px;}
.legend-text {color: #495057; font-weight: 500;}
.legend-value {color: #007bff; font-weight: 600; margin-left: auto;}
/* 툴팁 */
.chart-tooltip { display: inline-block;position: relative;z-index: 2;font-size: 13px;color: #fff;}
.current-month-tooltip {position: relative; background-color: var(--primary_blue_1);color: #fff;border-radius: 2px;font-size: 13px;font-weight: 400;z-index: 10;pointer-events: none;white-space: nowrap;}
.current-month-tooltip::after {content: '';position: absolute;width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid var(--primary_blue_1);bottom: -6px;left: 50%;transform: translateX(-50%);}
.tt-body .tooltip-arrow {position: absolute;width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid var(--primary_blue_1);bottom: -6px;left: 50%;transform: translateX(-50%);opacity: 0;visibility: hidden;transition: opacity 0.1s ease, visibility 0.1s ease;}
.tt-row {display: flex;background-color: var(--primary_blue_1);padding: 2px 6px;border-radius: 2px;}
.chart-tooltip.show .tt-body .tooltip-arrow {opacity: 1;visibility: visible;}
.current-month-tooltip .tt-title {display: none;}
.current-month-tooltip .tt-body {display: flex;align-items: center;}
.current-month-tooltip .tt-color {display: none;}
/* 막대 차트 */
.chart-x-labels {display: flex; justify-content: space-around;}
.custom-x-label { flex: 1; font-size: 13px; font-weight: 400;font-variation-settings: 'wght' 400; color: var(--text_11); line-height: 1;text-align: center;}
.custom-x-label.current-month .label-txt {padding: 3px 5px; border-radius: 2px; background-color: #203183; color: #fff;}
/* 원형 차트 */
.chart-center-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 5;}
.center-content {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.main-value {font-size: 60px; font-weight: 700; color: var(--secondary_purple_1); line-height: 1;font-family: 'Helvetica';}
.main-value .unit {font-size: 28px; font-weight: 600;font-variation-settings: 'wght' 600; color: var(--text_11);font-family: 'Pretendard Variable';}
.sub-label {font-size: 13px; font-weight: 400;font-variation-settings: 'wght' 400; color: var(--text_22);}

/*========== Progress Bar ==========*/
.progress-area { display: flex; align-items: center; gap: 7px; } 
.progress-container { overflow: hidden; position: relative; width: 98px; height: 13px; background-color: var(--gray_ee); border-radius: 2px;} 
.progress-bar{ position: relative; width: 0; height: 100%;  border-radius: 2px; background-color: var(--primary_blue_1); transition: width 0.5s ease-in-out; font-size: inherit;  --progress-width: 0%;} 
.progress-bar.animate { width: var(--progress-width); transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } 
.progress-bar.no-transition { transition: none; } 
.progress-percent {font-size: 12px; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--point_black); } 
.progress-area.txt-ani .progress-percent {opacity: 0; visibility: hidden;position: absolute;top: 50%;left: 1em;transform: translate(0, -50%); transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; font-size: 10px; color: #fff; } 
.progress-area.txt-ani .progress-percent.visible { opacity: 1; visibility: visible; } 
.progress-percent-wrap { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); } 

/*========== List Style ==========*/
.list-style > li {position: relative;padding: 0 0 0 0.750em;font-size: 14px;font-weight: 400;font-variation-settings: 'wght' 400;color: var(--text_11);text-align: left;line-height: 1.5; word-break: keep-all;letter-spacing: 0;}
.list-style > li + li {margin: 10px 0 0;}
.list-style > li.circle::before {content: '';position: absolute;top: 9px;left: 0;width: 4px;height: 4px;background-color:#D3D3D3;border-radius: 50%;}
.list-style > div {position: relative;font-size: 15px;font-weight: 400;font-variation-settings: 'wght' 400;color: var(--text_11);text-align: center;line-height: 1.5; word-break: keep-all;letter-spacing: 0;}
.list-style > div.circle {margin-left: 10px; padding: 0 0 0 0.750em;text-align: left;}
.list-style > div + div {margin: 14px 0 0;}
.list-style > div.circle::before {content: '';position: absolute;top: 9px;left: 0;width: 4px;height: 4px;background-color:#9AC7DB;border-radius: 50%;}