@charset 'utf-8';
/**
 * 1. 테두리를 기준으로 크기 설정 
 * 2.  iOS와 IE에서 텍스트 크기 자동 조절 안되도록 
 */
@import 'icons.css';
* {
  margin: 0;
  padding: 0;
  /*1*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*2*/
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  width: 100%;
  overflow: hidden;
  /*모바일브라우저의 높이값 계산*/
  height: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;
}
li,
dd {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
em,
var,
dfn,
cite {
  font-style: normal;
}
img {
  border: 0px;
}
fieldset {
  border: none;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
/* Forms**/
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  border: none;
  background: none;
  cursor: pointer;
  *overflow: visible;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
legend,
caption {
  height: 1px;
  margin-top: -1px;
  opacity: 0;
  overflow: hidden;
}
label,
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a,
span,
li,
img,
div {
  -webkit-touch-callout: none !important;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
b,
strong {
  font-weight: bold;
}
b,
strong,
span {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}
::-webkit-scrollbar {
  -webkit-overflow-scrolling: touch;
  -webkit-appearance: none;
  width: 4px;
}
::-webkit-scrollbar-thumb {
  -webkit-overflow-scrolling: touch;
  background: #a9a9a9;
}
/* 흰색 */
/* 파란색 (#1A85FF) */
/* 회색 (#757575) */
:root {
  /*color*/
  --c-main: #1a85ff;
  --c-mono-0: #ffffff;
  --c-mono-1: #fafbfb;
  --c-mono-2: #f6f6f7;
  --c-mono-3: #ecedef;
  --c-mono-4: #e1e2e5;
  --c-mono-5: #c5c7cd;
  --c-mono-6: #b7bac1;
  --c-mono-7: #abaeb7;
  --c-mono-8: #9da1ab;
  --c-mono-9: #8f939f;
  --c-mono-10: #818694;
  --c-mono-11: #737988;
  --c-mono-12: #656b7c;
  --c-mono-13: #5a6072;
  --c-mono-14: #4c5366;
  --c-mono-15: #40475c;
  --c-mono-16: #30384e;
  --c-mono-17: #222a42;
  --c-mono-18: #161f38;
  --c-mono-19: #161f38;
  --c-mono-20: #000000;
  --c-gray-1: #f7f7f7;
  --c-gray-2: #dddddd;
  --c-gray-3: #bbbbbb;
  --c-gray-4: #757575;
  --c-gray-5: #333333;
  --c-gray-6: #242424;
  --c-black: #000;
  --c-bg: #fafcfc;
  --c-bg-2: #f5fbff;
  --c-navy: #142456;
  --c-blue: #1a85ff;
  --c-blue-l: #f0f7ff;
  --c-indigo: #6610f2;
  --c-purple: #6f42c1;
  --c-pink: #d63384;
  --c-red: #ff3b30;
  --c-orange: #fd7e14;
  --c-yellow: #ffc107;
  --c-green: #30db5b;
  --c-teal: #20c997;
  --c-cyan: #0dcaf0;
  --error-color: #ff3b30;
  /* Text */
  --c-text: #000000;
  --c-text-d: #000000;
  --c-text-sub: #757575;
  --f-weight-light: 300;
  --f-weight-reguler: 400;
  --f-weight-medium: 500;
  --f-weight-semibold: 600;
  --f-weight-bold: 700;
  /*btn*/
  --c-border: #dddddd;
  --btn-height: 48px;
  --btn-primary: #1a85ff;
  --btn-primary-hover: #298dff;
  --btn-secondary: #000000;
  --btn-secondary-hover: #f0f7ff;
  /*Pagging Margin*/
  --padding: 16px;
  /*  Effect  */
  --radius: 8px;
  --shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
}
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans Light'), local('NotoSans-Light'), url('../fonts/NotoSansKR-Light.eot');
  src: url('../fonts/NotoSansKR-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/NotoSansKR-Light.woff2') format('woff2'), url('../fonts/NotoSansKR-Light.woff') format('woff'), url('../fonts/NotoSansKR-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('../fonts/NotoSansKR-Regular.eot');
  src: url('../fonts/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/NotoSansKR-Regular.woff2') format('woff2'), url('../fonts/NotoSansKR-Regular.woff') format('woff'), url('../fonts/NotoSansKR-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans Medium'), local('NotoSans-Medium'), url('../fonts/NotoSansKR-Medium.eot');
  src: url('../fonts/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/NotoSansKR-Medium.woff2') format('woff2'), url('../fonts/NotoSansKR-Medium.woff') format('woff'), url('../fonts/NotoSansKR-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url('../fonts/NotoSansKR-SemiBold.eot');
  src: url('../fonts/NotoSansKR-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/NotoSansKR-SemiBold.woff2') format('woff2'), url('../fonts/NotoSansKR-SemiBold.woff') format('woff'), url('../fonts/NotoSansKR-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../fonts/NotoSansKR-Bold.eot');
  src: url('../fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/NotoSansKR-Bold.woff2') format('woff2'), url('../fonts/NotoSansKR-Bold.woff') format('woff'), url('../fonts/NotoSansKR-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
* {
  font-family: 'NotoSans', 'Apple SD Gothic Neo', arial, '나눔고딕', 'Nanum Gothic', '돋움', 'Dotum', Tahoma, 'Geneva', sans-serif;
}
/* Layout */
#wrap {
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}
#wrap .leftcolumn,
#wrap .rightcolumn {
  flex: 1 1 50%;
  height: 100%;
}
#wrap .leftcolumn {
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#wrap .leftcolumn h1.logo {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  background: url(../images/logo.svg) no-repeat 0 0;
  background-size: auto 48px;
}
#wrap .leftcolumn h1.logo span {
  visibility: hidden;
}
#wrap .leftcolumn .copyright {
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: #bbb;
  margin-top: auto;
  text-align: center;
}
#wrap .rightcolumn {
  background: #edf5fc url('../images/login_bg.png') no-repeat 100% 50%;
  background-size: contain;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#wrap .rightcolumn span {
  font-size: 48px;
  line-height: 1.2;
  font-weight: bold;
  color: var(--c-main);
  visibility: hidden;
}
.login-box-wrap {
  margin: auto;
}
.login-box-wrap h2 {
  font-size: 24px;
  font-weight: var(--f-weight-bold);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 32px;
}
.login-box-wrap .btn-box {
  margin-top: 8px;
}
.login-box {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-box .form-group {
  min-width: 300px;
  max-width: 300px;
}
.login-box .btn.btn-primary {
  height: 48px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.login-box .msg-error {
  text-align: center;
}
.login-foot {
  display: flex;
  align-items: center;
}
.login-foot .remember-id {
  margin-right: auto;
  display: flex;
  align-items: center;
}
.login-foot .remember-id label {
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: var(--c-text-sub);
  padding-left: 8px;
}
.login-foot .inquiry {
  margin-left: auto;
  position: relative;
}
.login-foot .inquiry .text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: var(--c-text-sub);
}
.tooltip {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  top: 26px;
  right: -10px;
}
.tooltip::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -12px;
  right: 8px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.55) transparent;
}
/*****************
FORM 
******************/
.form-inputed-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 794px;
}
.form-inputed {
  width: calc(33.333% - 11px);
}
.form-inputed label {
  display: block;
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: var(--c-text-sub);
  margin-bottom: 8px;
}
.form-inputed label em {
  color: var(--c-red);
}
.form-inputed .inputed-group {
  background-color: var(--c-blue-l);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  width: 100%;
  height: 48px;
  position: relative;
}
.form-inputed .inputed-group input {
  width: 100%;
  border: 0;
}
.form-inputed .inputed-group .btn {
  position: absolute;
  right: 9px;
  top: 9px;
}
.form-inputed .inputed-group .select-box .selected {
  background-color: transparent;
  border: 0 !important;
}
.input-name {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.input-name:focus {
  border: 1px solid var(--c-main) !important;
}
.btn-rename {
  width: 30px;
  height: 30px;
  background: url(../images/icon_ui.svg) no-repeat -90px -30px;
  background-size: 300px auto;
  text-indent: -999px;
}
.btn-rename span {
  visibility: hidden;
}
.msg-error {
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: var(--c-red);
  display: block;
  margin-top: 4px;
}
.msg-ok {
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: var(--c-green);
  display: block;
  margin-top: 4px;
}
.form-group-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 16px;
}
.form-group {
  width: 100%;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  margin-bottom: 8px;
}
.form-group label em {
  color: var(--c-red);
}
.form-group .input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-group .input-group .select-box,
.form-group .input-group .form-input {
  flex: 1;
}
.form-group .input-group .btn {
  height: 40px;
  width: fit-content;
}
.form-group .input-group.has-btn {
  position: relative;
}
.form-group .input-group.has-btn .btn {
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  height: 32px;
  display: inline-block;
  background-color: var(--c-gray-2);
  color: var(--c-gray-4);
}
.form-group .input-group.has-btn .btn:hover {
  color: var(--c-text-d);
  background-color: var(--c-gray-3);
}
.form-group .input-group.has-btn .btn.disabled,
.form-group .input-group.has-btn .btn:disabled {
  background-color: var(--c-gray-2);
  color: #fff;
}
input {
  outline: 0;
  border: 0;
  height: 48px;
  padding: 8px;
  font-size: 14px;
  font-weight: var(--f-weight-reguler);
  background-color: transparent;
  color: var(--c-text-d);
  font-weight: var(--f-weight-regular);
}
input:-moz-placeholder {
  color: #BBBBBB;
  font-size: 14px;
  font-weight: 400;
}
input::-moz-placeholder {
  color: #BBBBBB;
  font-size: 14px;
  font-weight: 400;
}
input:-ms-input-placeholder {
  color: #BBBBBB;
  font-size: 14px;
  font-weight: 400;
}
input::-webkit-input-placeholder {
  color: #BBBBBB;
  font-size: 14px;
  font-weight: 400;
}
.form-input {
  outline: 0;
  border: 1px solid var(--c-text-sub);
  background-color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  height: 48px;
  font-size: 14px;
  font-weight: var(--f-weight-reguler);
  color: var(--c-text-d);
}
.form-input:-moz-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
.form-input::-moz-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
.form-input:-ms-input-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
.form-input::-webkit-input-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
.form-input:focus {
  border: 1px solid var(--c-main);
}
.form-input.error {
  border-color: var(--c-red);
}
.form-input.disabled {
  border-color: var(--c-border) !important;
  color: var(--c-text-sub) !important;
}
.form-input:read-only {
  border-color: var(--c-border) !important;
  color: var(--c-text-sub) !important;
  cursor: not-allowed;
}
.select-box {
  position: relative;
  width: 100%;
  text-align: left;
  height: 48px;
}
.select-box .selected {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  padding: 0 30px 0 12px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  height: 48px;
  border: 1px solid var(--c-text-sub);
  cursor: pointer;
  color: var(--c-text-d);
  font-size: 14px;
  font-weight: var(--f-weight-reguler);
  display: flex;
  align-items: center;
  position: relative;
}
.select-box .selected:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  background: url('../images/icon_ui.svg') no-repeat -275px -5px;
  background-size: 300px auto;
  transform: rotate(90deg);
}
.select-box .selected.active:after {
  transform: rotate(-90deg);
}
.select-box .options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 170px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--c-text-sub);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  list-style: none;
  padding: 0;
  margin: -1px 0 0;
  z-index: 999;
}
.select-box .options li {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: var(--f-weight-reguler);
  cursor: pointer;
}
.select-box .options li:hover {
  background: var(--c-blue-l);
}
.select-box.no-line .selected {
  border: 0;
}
.select-box.is-sm {
  min-width: auto !important;
}
.select-box.is-sm .selected {
  padding: 0 8px;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  border-radius: 8px !important;
}
.select-box.is-sm .selected:after {
  display: none;
}
.select-box.is-sm .options {
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  border-radius: 8px !important;
}
.select-box.is-sm .options li {
  padding: 8px !important;
}
.select-box.disabled {
  cursor: not-allowed;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.select-box.disabled .selected {
  cursor: not-allowed;
}
.select-box.disabled .options {
  display: none !important;
}
.textarea-box {
  border: 1px solid var(--c-text-sub);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  height: 88px;
}
.textarea-box .btn {
  margin-left: auto;
  width: 74px;
  max-width: 74px;
  height: 40px;
}
.textarea-box textarea {
  border: 0;
  height: 100%;
}
textarea {
  outline: 0;
  border: 1px solid var(--c-text-sub);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  resize: none;
  font-size: 14px;
  font-weight: var(--f-weight-reguler);
  color: var(--c-text-d);
}
textarea:-moz-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
textarea::-moz-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
textarea:-ms-input-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
textarea::-webkit-input-placeholder {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}
textarea.textarea-history {
  width: 100%;
  height: 164px;
  padding: 8px 16px;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn-group .btn {
  flex: 1;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  outline: 0;
  white-space: nowrap;
}
.btn [class^='fa-'] {
  margin-left: -4px;
}
.btn:hover [class^='fa-']::before {
  filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
  -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
}
.btn.btn-primary {
  width: 100%;
  color: #fff;
  height: 40px;
  font-size: 14px;
  font-weight: var(--f-weight-bold);
  padding: 0 24px;
  background-color: var(--btn-primary);
  text-align: center;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
.btn.btn-primary [class^='fa-']::before {
  filter: invert(1);
  -webkit-filter: invert(1);
}
.btn.btn-primary.btn-outline {
  border: 1px solid var(--btn-primary);
  color: var(--btn-primary);
  background-color: #fff;
  font-size: 14px;
  font-weight: var(--f-weight-semibold);
}
.btn.btn-primary:hover {
  background-color: #66adff;
}
.btn.btn-secondary {
  width: 100%;
  color: #fff;
  height: 40px;
  font-size: 14px;
  font-weight: var(--f-weight-bold);
  padding: 0 24px;
  background-color: var(--btn-secondary);
  text-align: center;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
.btn.btn-secondary:hover {
  background-color: var(--c-gray-4);
}
.btn.btn-secondary.btn-outline {
  border: 1px solid var(--c-gray-4);
  color: var(--c-text-d);
  background-color: #fff;
  font-size: 14px;
  font-weight: var(--f-weight-semibold);
}
.btn.btn-secondary.btn-outline:hover {
  background-color: var(--c-gray-1);
}
.btn.btn-danger {
  width: 100%;
  color: #fff;
  height: 40px;
  font-size: 14px;
  font-weight: var(--f-weight-bold);
  padding: 0 24px;
  background-color: var(--c-red);
  text-align: center;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
.btn.btn-danger [class^='fa-']::before {
  filter: invert(1);
  -webkit-filter: invert(1);
}
.btn.btn-danger.btn-outline {
  border: 1px solid var(--c-red);
  color: var(--btn-primary);
  background-color: #fff;
  font-size: 14px;
  font-weight: var(--f-weight-semibold);
}
.btn.btn-danger:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.btn.btn-cancle {
  width: 100%;
  color: var(--c-gray-4);
  height: 40px;
  font-size: 14px;
  font-weight: var(--f-weight-bold);
  padding: 0 24px;
  background-color: var(--c-gray-2);
  text-align: center;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
.btn.btn-cancle:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.btn.btn-cancle.btn-outline {
  border: 1px solid var(--btn-secondary);
  color: var(--btn-secondary);
  background-color: #fff;
  font-size: 14px;
  font-weight: var(--f-weight-semibold);
}
.btn.btn-cancle.btn-outline:hover {
  background-color: var(--c-main);
  color: #fff;
  border-color: var(--c-main);
}
.btn.btn-cancle.btn-outline:hover [class^='fa-']::before {
  filter: invert(1);
  -webkit-filter: invert(1);
}
.btn.btn-open {
  text-align: left;
  display: block;
  text-decoration: underline;
  width: fit-content;
  display: flex;
  align-items: center;
  font-weight: var(--f-weight-bold);
  font-size: 14px;
  font-weight: var(--f-weight-semibold);
}
.btn.btn-open::after {
  background-image: url(../images/icon_ui.svg);
  background-repeat: no-repeat;
  background-position-y: -5px;
  background-position-x: -155px;
  background-size: 300px auto;
  margin: 0 -5px;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
}
.btn.btn-open:hover {
  color: var(--c-main);
}
.btn.btn-open:hover::after {
  filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
  -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
}
.btn.disabled,
.btn:disabled {
  cursor: not-allowed;
  background-color: #eddd !important;
  border-color: #eddd !important;
  border: 1px solid #ddd !important;
  color: #fff !important;
}
.btn-undo {
  width: 24px;
  height: 24px;
  background-color: var(--c-blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-undo span.fa-undo {
  filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
  -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
  margin-left: 0 !important;
}
.toggle-container {
  display: flex;
  align-items: center;
  /* 체크박스 숨기기 */
  /* 토글 버튼 스타일 */
  /* 체크 상태일 때 (ON) */
}
.toggle-container > span {
  font-size: 12px;
  font-weight: var(--f-weight-medium);
  color: var(--c-gray-4);
  display: inline-block;
  margin-right: 8px;
}
.toggle-container .toggle-checkbox {
  display: none;
}
.toggle-container .toggle-label {
  display: inline-block;
  width: 42px;
  height: 24px;
  background: var(--c-gray-2);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
.toggle-container .toggle-label::after {
  content: '';
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}
.toggle-container .toggle-checkbox:checked + .toggle-label {
  background: var(--c-main);
}
.toggle-container .toggle-checkbox:checked + .toggle-label::after {
  left: 20px;
}
input[type='checkbox'] {
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid var(--c-text-sub);
}
input[type='checkbox']:checked {
  background: #e57a00 url('../images/icon_ui.svg') no-repeat -245px -35px;
  background-size: 300px auto;
  border: none;
  filter: invert(1);
  -webkit-filter: invert(1);
}
input[type='checkbox']:disabled {
  cursor: not-allowed;
  background: var(--c-gray-2);
  border: none;
}
.radio-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.radio-btn-group input[type='radio'] {
  display: none;
}
.radio-btn-group .radio-label {
  flex: 1;
  text-align: center;
  display: inline-block;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
  font-weight: 400;
  transition: background-color 0.3s;
  border: 1px solid var(--c-text-sub);
}
.radio-btn-group input[type='radio']:checked + .radio-label {
  background-color: var(--c-blue-l);
  border-color: var(--c-main);
  color: var(--c-main);
  font-weight: bold;
}
/**
.radio-group {
  display: flex;
  flex-wrap: wrap;

  [type='radio']:checked,
  [type='radio']:not(:checked) {
    position: absolute;
    left: -9999px;
  }

  [type='radio']:checked + label,
  [type='radio']:not(:checked) + label {
    flex: 1;
    border: 1px solid #333333;
    .text-body1();
    .radius(6px);
    font-weight: 500;
    margin: 0 1.5px;
    text-align: center;
    .box-sizing();
  }

  [type='radio']:checked + label {
    color: var(--c-blue);
    border: 2px solid var(--c-blue);
  }
  &.disabled {
    label {
      background-color: #f3f4f5;
      color: var(--c-text-sub);
      border: 1px solid #dddee4 !important;
    }
  }
}

.radio-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 4px;
}

.radio-block {
  padding-top: 4px;
  &.radio-block {
    .radio[type='radio']:checked + label,
    .radio[type='radio']:not(:checked) + label {
      width: 100%;
      margin-bottom: 14px;
    }
  }
}

.radio[type='radio']:checked,
.radio[type='radio']:not(:checked) {
  position: absolute;
  left: -9999px;
}

.radio[type='radio']:checked + label,
.radio[type='radio']:not(:checked) + label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  color: var(--c-text-d);
  padding-left: 28px;
  font-weight: 500;
  margin-right: 20px;
  height: 18px;
  display: flex;
  align-items: center;
}

.radio[type='radio']:checked + label:before,
.radio[type='radio']:not(:checked) + label:before {
  content: '';
  border: 1px solid #c8cacc;
  .radius(100%);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.radio[type='radio']:checked + label::before {
  border-color: #e50025;
}

.radio[type='radio']:checked + label:after,
.radio[type='radio']:not(:checked) + label:after {
  content: '';
  .radius(100%);
  position: absolute;
  left: 5px;
  top: 5px;
  display: inline-block;
  width: 9px;
  height: 9px;
  background-color: #e50025;
  text-align: center;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.radio[type='radio']:not(:checked) + label:after {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.radio[type='radio']:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.radio[type='radio']:disabled {
  cursor: not-allowed;
}

.radio[type='radio']:disabled + label:before {
  border: 1px solid #999 !important;
}
**/