@charset "UTF-8";
/* reset */
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: var(--font-family-base);
  color: var(--font-color-base);
  font-weight: 400;
  line-height: var(--line-height-base);
  word-break: keep-all;
  word-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
a,
button,
select,
ul,
li,
span,
em,
label,
:before,
:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  font-family: inherit;
  line-height: var(--line-height-base);
  letter-spacing: inherit;
}

input,
textarea,
a,
button,
select,
span,
label,
:before,
:after {
  font-size: inherit;
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 600;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1rem;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
fieldset {
  border: 0;
}

fieldset {
  min-width: 100%;
}

img {
  max-width: 100%;
  vertical-align: top;
}

ul,
ol {
  list-style: none;
}

em,
address,
i {
  font-style: normal;
}

a,
button {
  transition: background-color var(--transition-base);
}

a,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
}

a:visited.visited,
a:visited .visited {
  color: #5917b8;
}

button,
input[type=submit],
input[type=button] {
  overflow: visible;
  margin: 0;
  background-color: transparent;
  border: none;
  -webkit-appearance: button;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  resize: none;
}

label {
  cursor: pointer;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=text],
input[type=tel],
input[type=password],
input[type=file],
input[type=number],
input[type=email],
input[type=date],
input[type=search],
textarea {
  -webkit-box-shadow: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: none;
  outline: none;
}

input[type=number] {
  -moz-appearance: textfield;
  margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=text]::-ms-clear {
  display: none;
}

caption {
  position: static !important;
  margin: 0 !important;
}

table {
  table-layout: fixed;
  max-width: none;
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}

.img img {
  min-width: 100%;
  max-width: 100%;
}

:root {
  /* PRIMITIVE */
  --color-light-primary-5: #E5EAFF;
  --color-light-primary-10: #CCD5FF;
  --color-light-primary-20: #99ACFF;
  --color-light-primary-30: #6682FF;
  --color-light-primary-40: #3359FF;
  --color-light-primary-50: #1641FF;
  --color-light-primary-60: #0026CC;
  --color-light-primary-70: #001C99;
  --color-light-primary-80: #001366;
  --color-light-primary-90: #000933;
  --color-light-primary-95: #00051A;
  --color-light-secondary-5: #eef2f7;
  --color-light-secondary-10: #d6e0eb;
  --color-light-secondary-20: #bacbde;
  --color-light-secondary-30: #90b0d5;
  --color-light-secondary-40: #6b96c7;
  --color-light-secondary-50: #346fb2;
  --color-light-secondary-60: #1c589c;
  --color-light-secondary-70: #063a74;
  --color-light-secondary-80: #052b57;
  --color-light-secondary-90: #031f3f;
  --color-light-secondary-95: #02162c;
  --color-light-gray-0: #ffffff;
  --color-light-gray-5: #f4f5f6;
  --color-light-gray-10: #e6e8ea;
  --color-light-gray-20: #cdd1d5;
  --color-light-gray-30: #b1b8be;
  --color-light-gray-40: #8a949e;
  --color-light-gray-50: #6d7882;
  --color-light-gray-60: #58616a;
  --color-light-gray-70: #464c53;
  --color-light-gray-80: #33363d;
  --color-light-gray-90: #1e2124;
  --color-light-gray-95: #131416;
  --color-light-gray-100: #000000;
  --color-light-alpha-black100: #000000;
  --color-light-alpha-black75: #000000bf;
  --color-light-alpha-black50: #00000080;
  --color-light-alpha-black25: #00000040;
  --color-light-alpha-black10: #0000001a;
  --color-light-alpha-black0: #00000000;
  --color-light-alpha-white100: #ffffff;
  --color-light-alpha-white75: #ffffffbf;
  --color-light-alpha-white50: #ffffff80;
  --color-light-alpha-white25: #ffffff40;
  --color-light-alpha-white10: #ffffff1a;
  --color-light-alpha-white0: #ffffff00;
  --color-light-danger-5: #fdefec;
  --color-light-danger-10: #fcdfd9;
  --color-light-danger-20: #f7afa1;
  --color-light-danger-30: #f48771;
  --color-light-danger-40: #f05f42;
  --color-light-danger-50: #de3412;
  --color-light-danger-60: #bd2c0f;
  --color-light-danger-70: #8a240f;
  --color-light-danger-80: #5c180a;
  --color-light-danger-90: #390d05;
  --color-light-danger-95: #260903;
  --color-light-information-5: #e7f4fe;
  --color-light-information-10: #d3ebfd;
  --color-light-information-20: #9ed2fa;
  --color-light-information-30: #5fb5f7;
  --color-light-information-40: #2098f3;
  --color-light-information-50: #0b78cb;
  --color-light-information-60: #096ab3;
  --color-light-information-70: #085691;
  --color-light-information-80: #053961;
  --color-light-information-90: #03253f;
  --color-light-information-95: #021a2c;
  --color-light-warning-5: #fff3db;
  --color-light-warning-10: #ffe0a3;
  --color-light-warning-20: #ffc95c;
  --color-light-warning-30: #ffb114;
  --color-light-warning-40: #c78500;
  --color-light-warning-50: #9e6a00;
  --color-light-warning-60: #8a5c00;
  --color-light-warning-70: #614100;
  --color-light-warning-80: #422c00;
  --color-light-warning-90: #2e1f00;
  --color-light-warning-95: #241800;
  --color-light-success-5: #eaf6ec;
  --color-light-success-10: #d8eedd;
  --color-light-success-20: #a9dab4;
  --color-light-success-30: #7ec88e;
  --color-light-success-40: #3fa654;
  --color-light-success-50: #228738;
  --color-light-success-60: #267337;
  --color-light-success-70: #285d33;
  --color-light-success-80: #1f4727;
  --color-light-success-90: #122b18;
  --color-light-success-95: #0e2012;
  --color-light-point-5: #fbeff0;
  --color-light-point-10: #f5d6d9;
  --color-light-point-20: #ebadb2;
  --color-light-point-30: #e0858c;
  --color-light-point-40: #d65c66;
  --color-light-point-50: #d63d4a;
  --color-light-point-60: #ab2b36;
  --color-light-point-70: #7a1f26;
  --color-light-point-80: #521419;
  --color-light-point-90: #310c0f;
  --color-light-point-95: #21080a;
  --color-light-graphic-10: #e5ecf9;
  --color-light-graphic-30: #98acc5;
  --color-light-graphic-50: #61758f;
  --color-light-graphic-70: #39506c;
  --color-light-graphic-90: #223a58;
  --color-main-light: rgba(22, 65, 255, 0.1);
  --color-pale-gray: #a7a7a7;
  --color-red-text: #FF0000;
  /* 스크롤바 색상 */
  --color-scrollbar-thumb: var(--color-light-gray-20);
  --color-scrollbar-thumb-dark: var(--color-light-gray-30);
  --color-scrollbar-track: var(--color-light-gray-0);
  /* table 색상 */
  --color-table-bg: var(--color-light-gray-0);
  --color-table-border: var(--color-light-gray-10);
  --color-table-header-bg: var(--color-light-gray-0);
  --font-family-base: Pretendard;
  --font-color-base: #000;
  --line-height-base: 1.4;
  --transition-base: 0.25s ease-in-out;
  /* 폰트 크기 */
  --font-size-26: 1.625rem;
  --font-size-24: 1.5rem;
  --font-size-22: 1.375rem;
  --font-size-20: 1.25rem;
  --font-size-18: 1.125rem;
  --font-size-16: 1rem;
  --font-size-14: 0.875rem;
  --font-size-13: 0.8125rem;
  --font-size-12: 0.75rem;
  --font-size-11: 0.6875rem;
  --font-size-10: 0.625rem;
  --font-size-9: 0.5625rem;
  /* 폭 */
  --content-width: 1168px;
  --one-third-content-width: calc(var(--content-width) / 3);
  --two-thirds-content-width: calc(var(--one-third-content-width) * 2);
  --first-el-width: calc(var(--one-third-content-width) - 10px);
  --narrow-el-width: calc(var(--one-third-content-width) - 20px);
}


@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("../../font/Pretendard/Pretendard-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("../../font/Pretendard/Pretendard-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("../../font/Pretendard/Pretendard-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("../../font/Pretendard/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("../../font/Pretendard/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("../../font/Pretendard/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("../../font/Pretendard/Pretendard-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("../../font/Pretendard/Pretendard-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("../../font/Pretendard/Pretendard-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  src: url("../../font/MaterialSymbolsRounded.woff2") format("woff2");
}
.round-icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  user-select: none;
  -webkit-user-select: none;
}

.round-icon.pointer {
  cursor: pointer;
}

.round-icon.size-30 {
  font-size: 30px;
}

.round-icon.size-26 {
  font-size: var(--font-size-26);
}

.round-icon.size-24 {
  font-size: var(--font-size-24);
}

.round-icon.size-22 {
  font-size: var(--font-size-22);
}

.round-icon.size-20 {
  font-size: var(--font-size-20);
}

.round-icon.size-18 {
  font-size: var(--font-size-18);
}

.round-icon.size-16 {
  font-size: var(--font-size-16);
}

.round-icon.fill {
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* 텍스트 말줄임 */
/* 스크롤바 */
/* flex 정렬 */
/* absolute 중앙정렬 */
* {
  transition: background-color 0.05s ease-in-out;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.width-max {
  width: 100% !important;
}

.width-auto {
  width: auto !important;
}

.width-fit {
  width: fit-content !important;
}

.text-center {
  text-align: center !important;
}

.pale {
  color: #9AA0AE;
}

.wb-all {
  word-break: break-all;
}

.nudge-up {
  position: relative;
  top: -1px;
}

.nudge-up-3 {
  position: relative;
  top: -3px;
}

.nudge-down {
  position: relative;
  top: 1px;
}

.icon-nudge-down .sprite-icon {
  position: relative;
  top: 1px;
}

.text-red {
  color: #FF1736 !important;
}

.text-red-2 {
  color: #F43F5E !important;
}

.text-yellow {
  color: #FACC15 !important;
}

.text-blue {
  color: #4DA3FF !important;
}

.text-blue-2 {
  color: #118DFF !important;
}

.text-white {
  color: #FFF !important;
}

.primary-50 {
  color: var(--color-light-primary-50);
}

.text-success {
  color: #118DFF !important;
}

.text-black {
  color: var(--color-light-gray-100) !important;
}

.pointer {
  cursor: pointer;
}

.text-dark-gray {
  color: #494E55 !important;
}

.text-gray-2 {
  color: #5B6673 !important;
}

.text-light-gray {
  color: #9AA0AE !important;
}

.text-cool-gray {
  color: #667085 !important;
}

.text-orange {
  color: #FF8A00 !important;
}

.border-red {
  border: 1px solid #FF1736 !important;
}

.conditional-block {
  display: block;
  min-width: 0;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: fit-content;
}

.text-muted {
  color: #A8ADB4 !important;
  font-weight: 400 !important;
}

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.btn-box {
  display: flex;
  gap: 7px;
  align-items: center;
}

.left-0 {
  right: auto !important;
  left: 0 !important;
}

.right-0 {
  left: auto !important;
  right: 0 !important;
}

/* font color */
.gray-0 {
  color: var(--color-light-gray-0) !important;
}

.gray-10 {
  color: var(--color-light-gray-10) !important;
}

.gray-20 {
  color: var(--color-light-gray-20) !important;
}

.gray-30 {
  color: var(--color-light-gray-30) !important;
}

.gray-40 {
  color: var(--color-light-gray-40) !important;
}

.gray-50 {
  color: var(--color-light-gray-50) !important;
}

.gray-60 {
  color: var(--color-light-gray-60) !important;
}

.gray-70 {
  color: var(--color-light-gray-70) !important;
}

.gray-80 {
  color: var(--color-light-gray-80) !important;
}

.gray-90 {
  color: var(--color-light-gray-90) !important;
}

.gray-100 {
  color: var(--color-light-gray-100) !important;
}

.gray-110 {
  color: var(--color-light-gray-110) !important;
}

.gray-120 {
  color: var(--color-light-gray-120) !important;
}

.gray-130 {
  color: var(--color-light-gray-130) !important;
}

.gray-140 {
  color: var(--color-light-gray-140) !important;
}

.gray-150 {
  color: var(--color-light-gray-150) !important;
}

.gray-160 {
  color: var(--color-light-gray-160) !important;
}

.gray-170 {
  color: var(--color-light-gray-170) !important;
}

.gray-180 {
  color: var(--color-light-gray-180) !important;
}

.gray-190 {
  color: var(--color-light-gray-190) !important;
}

.gray-200 {
  color: var(--color-light-gray-200) !important;
}

.gray-210 {
  color: var(--color-light-gray-210) !important;
}

.gray-220 {
  color: var(--color-light-gray-220) !important;
}

.gray-230 {
  color: var(--color-light-gray-230) !important;
}

.gray-240 {
  color: var(--color-light-gray-240) !important;
}

.gray-250 {
  color: var(--color-light-gray-250) !important;
}

.gray-260 {
  color: var(--color-light-gray-260) !important;
}

.gray-270 {
  color: var(--color-light-gray-270) !important;
}

.gray-280 {
  color: var(--color-light-gray-280) !important;
}

.gray-290 {
  color: var(--color-light-gray-290) !important;
}

.gray-300 {
  color: var(--color-light-gray-300) !important;
}

.gray-310 {
  color: var(--color-light-gray-310) !important;
}

.gray-320 {
  color: var(--color-light-gray-320) !important;
}

.gray-330 {
  color: var(--color-light-gray-330) !important;
}

.gray-340 {
  color: var(--color-light-gray-340) !important;
}

.gray-350 {
  color: var(--color-light-gray-350) !important;
}

.gray-360 {
  color: var(--color-light-gray-360) !important;
}

.gray-370 {
  color: var(--color-light-gray-370) !important;
}

.gray-380 {
  color: var(--color-light-gray-380) !important;
}

.gray-390 {
  color: var(--color-light-gray-390) !important;
}

.gray-400 {
  color: var(--color-light-gray-400) !important;
}

.gray-410 {
  color: var(--color-light-gray-410) !important;
}

.gray-420 {
  color: var(--color-light-gray-420) !important;
}

.gray-430 {
  color: var(--color-light-gray-430) !important;
}

.gray-440 {
  color: var(--color-light-gray-440) !important;
}

.gray-450 {
  color: var(--color-light-gray-450) !important;
}

.gray-460 {
  color: var(--color-light-gray-460) !important;
}

.gray-470 {
  color: var(--color-light-gray-470) !important;
}

.gray-480 {
  color: var(--color-light-gray-480) !important;
}

.gray-490 {
  color: var(--color-light-gray-490) !important;
}

.gray-500 {
  color: var(--color-light-gray-500) !important;
}

.gray-510 {
  color: var(--color-light-gray-510) !important;
}

.gray-520 {
  color: var(--color-light-gray-520) !important;
}

.gray-530 {
  color: var(--color-light-gray-530) !important;
}

.gray-540 {
  color: var(--color-light-gray-540) !important;
}

.gray-550 {
  color: var(--color-light-gray-550) !important;
}

.gray-560 {
  color: var(--color-light-gray-560) !important;
}

.gray-570 {
  color: var(--color-light-gray-570) !important;
}

.gray-580 {
  color: var(--color-light-gray-580) !important;
}

.gray-590 {
  color: var(--color-light-gray-590) !important;
}

.gray-600 {
  color: var(--color-light-gray-600) !important;
}

.gray-610 {
  color: var(--color-light-gray-610) !important;
}

.gray-620 {
  color: var(--color-light-gray-620) !important;
}

.gray-630 {
  color: var(--color-light-gray-630) !important;
}

.gray-640 {
  color: var(--color-light-gray-640) !important;
}

.gray-650 {
  color: var(--color-light-gray-650) !important;
}

.gray-660 {
  color: var(--color-light-gray-660) !important;
}

.gray-670 {
  color: var(--color-light-gray-670) !important;
}

.gray-680 {
  color: var(--color-light-gray-680) !important;
}

.gray-690 {
  color: var(--color-light-gray-690) !important;
}

.gray-700 {
  color: var(--color-light-gray-700) !important;
}

.gray-710 {
  color: var(--color-light-gray-710) !important;
}

.gray-720 {
  color: var(--color-light-gray-720) !important;
}

.gray-730 {
  color: var(--color-light-gray-730) !important;
}

.gray-740 {
  color: var(--color-light-gray-740) !important;
}

.gray-750 {
  color: var(--color-light-gray-750) !important;
}

.gray-760 {
  color: var(--color-light-gray-760) !important;
}

.gray-770 {
  color: var(--color-light-gray-770) !important;
}

.gray-780 {
  color: var(--color-light-gray-780) !important;
}

.gray-790 {
  color: var(--color-light-gray-790) !important;
}

.gray-800 {
  color: var(--color-light-gray-800) !important;
}

.gray-810 {
  color: var(--color-light-gray-810) !important;
}

.gray-820 {
  color: var(--color-light-gray-820) !important;
}

.gray-830 {
  color: var(--color-light-gray-830) !important;
}

.gray-840 {
  color: var(--color-light-gray-840) !important;
}

.gray-850 {
  color: var(--color-light-gray-850) !important;
}

.gray-860 {
  color: var(--color-light-gray-860) !important;
}

.gray-870 {
  color: var(--color-light-gray-870) !important;
}

.gray-880 {
  color: var(--color-light-gray-880) !important;
}

.gray-890 {
  color: var(--color-light-gray-890) !important;
}

.gray-900 {
  color: var(--color-light-gray-900) !important;
}

.gray-910 {
  color: var(--color-light-gray-910) !important;
}

.gray-920 {
  color: var(--color-light-gray-920) !important;
}

.gray-930 {
  color: var(--color-light-gray-930) !important;
}

.gray-940 {
  color: var(--color-light-gray-940) !important;
}

.gray-950 {
  color: var(--color-light-gray-950) !important;
}

.gray-960 {
  color: var(--color-light-gray-960) !important;
}

.gray-970 {
  color: var(--color-light-gray-970) !important;
}

.gray-980 {
  color: var(--color-light-gray-980) !important;
}

.gray-990 {
  color: var(--color-light-gray-990) !important;
}

.gray-1000 {
  color: var(--color-light-gray-1000) !important;
}

/* font size */
.fs-10 {
  font-size: 10px !important;
  line-height: 10px !important;
}
.fs-10 > * {
  line-height: 10px !important;
}

.fs-11 {
  font-size: 11px !important;
  line-height: 11px !important;
}
.fs-11 > * {
  line-height: 11px !important;
}

.fs-12 {
  font-size: 12px !important;
  line-height: 12px !important;
}
.fs-12 > * {
  line-height: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
  line-height: 13px !important;
}
.fs-13 > * {
  line-height: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
  line-height: 14px !important;
}
.fs-14 > * {
  line-height: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
  line-height: 15px !important;
}
.fs-15 > * {
  line-height: 15px !important;
}

.fs-16 {
  font-size: 16px !important;
  line-height: 16px !important;
}
.fs-16 > * {
  line-height: 16px !important;
}

.fs-17 {
  font-size: 17px !important;
  line-height: 17px !important;
}
.fs-17 > * {
  line-height: 17px !important;
}

.fs-18 {
  font-size: 18px !important;
  line-height: 18px !important;
}
.fs-18 > * {
  line-height: 18px !important;
}

.fs-19 {
  font-size: 19px !important;
  line-height: 19px !important;
}
.fs-19 > * {
  line-height: 19px !important;
}

.fs-20 {
  font-size: 20px !important;
  line-height: 20px !important;
}
.fs-20 > * {
  line-height: 20px !important;
}

.fs-0 {
  font-size: 0px !important;
}

/* font weight */
.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

/* width, height */
.min-w50 {
  min-width: 50px !important;
}

.max-w50 {
  max-width: 50px !important;
}

.min-h50 {
  min-height: 50px !important;
}

.max-h50 {
  max-height: 50px !important;
}

.min-w100 {
  min-width: 100px !important;
}

.max-w100 {
  max-width: 100px !important;
}

.min-h100 {
  min-height: 100px !important;
}

.max-h100 {
  max-height: 100px !important;
}

.min-w150 {
  min-width: 150px !important;
}

.max-w150 {
  max-width: 150px !important;
}

.min-h150 {
  min-height: 150px !important;
}

.max-h150 {
  max-height: 150px !important;
}

.min-w200 {
  min-width: 200px !important;
}

.max-w200 {
  max-width: 200px !important;
}

.min-h200 {
  min-height: 200px !important;
}

.max-h200 {
  max-height: 200px !important;
}

.min-w250 {
  min-width: 250px !important;
}

.max-w250 {
  max-width: 250px !important;
}

.min-h250 {
  min-height: 250px !important;
}

.max-h250 {
  max-height: 250px !important;
}

.min-w300 {
  min-width: 300px !important;
}

.max-w300 {
  max-width: 300px !important;
}

.min-h300 {
  min-height: 300px !important;
}

.max-h300 {
  max-height: 300px !important;
}

.min-w350 {
  min-width: 350px !important;
}

.max-w350 {
  max-width: 350px !important;
}

.min-h350 {
  min-height: 350px !important;
}

.max-h350 {
  max-height: 350px !important;
}

.min-w400 {
  min-width: 400px !important;
}

.max-w400 {
  max-width: 400px !important;
}

.min-h400 {
  min-height: 400px !important;
}

.max-h400 {
  max-height: 400px !important;
}

.min-w450 {
  min-width: 450px !important;
}

.max-w450 {
  max-width: 450px !important;
}

.min-h450 {
  min-height: 450px !important;
}

.max-h450 {
  max-height: 450px !important;
}

.min-w500 {
  min-width: 500px !important;
}

.max-w500 {
  max-width: 500px !important;
}

.min-h500 {
  min-height: 500px !important;
}

.max-h500 {
  max-height: 500px !important;
}

.min-w550 {
  min-width: 550px !important;
}

.max-w550 {
  max-width: 550px !important;
}

.min-h550 {
  min-height: 550px !important;
}

.max-h550 {
  max-height: 550px !important;
}

.min-w600 {
  min-width: 600px !important;
}

.max-w600 {
  max-width: 600px !important;
}

.min-h600 {
  min-height: 600px !important;
}

.max-h600 {
  max-height: 600px !important;
}

.min-w650 {
  min-width: 650px !important;
}

.max-w650 {
  max-width: 650px !important;
}

.min-h650 {
  min-height: 650px !important;
}

.max-h650 {
  max-height: 650px !important;
}

.min-w700 {
  min-width: 700px !important;
}

.max-w700 {
  max-width: 700px !important;
}

.min-h700 {
  min-height: 700px !important;
}

.max-h700 {
  max-height: 700px !important;
}

.min-w750 {
  min-width: 750px !important;
}

.max-w750 {
  max-width: 750px !important;
}

.min-h750 {
  min-height: 750px !important;
}

.max-h750 {
  max-height: 750px !important;
}

.min-w800 {
  min-width: 800px !important;
}

.max-w800 {
  max-width: 800px !important;
}

.min-h800 {
  min-height: 800px !important;
}

.max-h800 {
  max-height: 800px !important;
}

.min-w850 {
  min-width: 850px !important;
}

.max-w850 {
  max-width: 850px !important;
}

.min-h850 {
  min-height: 850px !important;
}

.max-h850 {
  max-height: 850px !important;
}

.min-w900 {
  min-width: 900px !important;
}

.max-w900 {
  max-width: 900px !important;
}

.min-h900 {
  min-height: 900px !important;
}

.max-h900 {
  max-height: 900px !important;
}

.min-w950 {
  min-width: 950px !important;
}

.max-w950 {
  max-width: 950px !important;
}

.min-h950 {
  min-height: 950px !important;
}

.max-h950 {
  max-height: 950px !important;
}

.min-w1000 {
  min-width: 1000px !important;
}

.max-w1000 {
  max-width: 1000px !important;
}

.min-h1000 {
  min-height: 1000px !important;
}

.max-h1000 {
  max-height: 1000px !important;
}

/* width, height vh*/
.max-h5vh {
  max-height: 5vh !important;
}

.max-w5pct {
  max-width: 5vh !important;
}

.max-h10vh {
  max-height: 10vh !important;
}

.max-w10pct {
  max-width: 10vh !important;
}

.max-h15vh {
  max-height: 15vh !important;
}

.max-w15pct {
  max-width: 15vh !important;
}

.max-h20vh {
  max-height: 20vh !important;
}

.max-w20pct {
  max-width: 20vh !important;
}

.max-h25vh {
  max-height: 25vh !important;
}

.max-w25pct {
  max-width: 25vh !important;
}

.max-h30vh {
  max-height: 30vh !important;
}

.max-w30pct {
  max-width: 30vh !important;
}

.max-h35vh {
  max-height: 35vh !important;
}

.max-w35pct {
  max-width: 35vh !important;
}

.max-h40vh {
  max-height: 40vh !important;
}

.max-w40pct {
  max-width: 40vh !important;
}

.max-h45vh {
  max-height: 45vh !important;
}

.max-w45pct {
  max-width: 45vh !important;
}

.max-h50vh {
  max-height: 50vh !important;
}

.max-w50pct {
  max-width: 50vh !important;
}

.max-h55vh {
  max-height: 55vh !important;
}

.max-w55pct {
  max-width: 55vh !important;
}

.max-h60vh {
  max-height: 60vh !important;
}

.max-w60pct {
  max-width: 60vh !important;
}

.max-h65vh {
  max-height: 65vh !important;
}

.max-w65pct {
  max-width: 65vh !important;
}

.max-h70vh {
  max-height: 70vh !important;
}

.max-w70pct {
  max-width: 70vh !important;
}

.max-h75vh {
  max-height: 75vh !important;
}

.max-w75pct {
  max-width: 75vh !important;
}

.max-h80vh {
  max-height: 80vh !important;
}

.max-w80pct {
  max-width: 80vh !important;
}

.max-h85vh {
  max-height: 85vh !important;
}

.max-w85pct {
  max-width: 85vh !important;
}

.max-h90vh {
  max-height: 90vh !important;
}

.max-w90pct {
  max-width: 90vh !important;
}

.max-h95vh {
  max-height: 95vh !important;
}

.max-w95pct {
  max-width: 95vh !important;
}

.max-h100vh {
  max-height: 100vh !important;
}

.max-w100pct {
  max-width: 100vh !important;
}

.min-h-auto {
  min-height: auto !important;
}

.max-w120 {
  max-width: 120px !important;
}

.max-w170 {
  max-width: 170px !important;
}

.max-w370 {
  max-width: 379px !important;
}

.max-w410 {
  max-width: 410px !important;
}

.max-w420 {
  max-width: 420px !important;
}

.max-w570 {
  max-width: 570px !important;
}

.max-w680 {
  max-width: 680px !important;
}

.min-w0 {
  min-width: 0;
}

.min-w26 {
  min-width: 26px !important;
}

.min-w35 {
  min-widtH: 35px !important;
}

.min-w230 {
  min-width: 230px !important;
}

.min-w510 {
  min-width: 510px !important;
}

.min-w670 {
  min-width: 670px !important;
}

.min-w1800 {
  min-width: 1800px !important;
}

.max-h79 {
  max-height: 79px !important;
}

.max-h238 {
  max-height: 238px !important;
}

.max-h230 {
  max-height: 230px !important;
}

.max-h301 {
  max-height: 301px !important;
}

.max-h340 {
  max-height: 340px !important;
}

.max-h480 {
  max-height: 480px !important;
}

.max-h100pct {
  max-height: 100% !important;
}

.min-h238 {
  min-height: 238px !important;
}

.min-h295 {
  min-height: 295px !important;
}

.h-300 {
  height: 300px !important;
}

.h-350 {
  height: 350px !important;
}

.h-100pct {
  height: 100% !important;
}

/* gap, margin, padding */
.gap-0 {
  gap: 0px !important;
}

.col-gap-0 {
  column-gap: 0px !important;
}

.row-gap-0 {
  row-gap: 0px !important;
}

.m-0 {
  margin: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.p-0 {
  padding: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.gap-2 {
  gap: 2px !important;
}

.col-gap-2 {
  column-gap: 2px !important;
}

.row-gap-2 {
  row-gap: 2px !important;
}

.m-2 {
  margin: 2px !important;
}

.mt-2 {
  margin-top: 2px !important;
}

.mb-2 {
  margin-bottom: 2px !important;
}

.ml-2 {
  margin-left: 2px !important;
}

.mr-2 {
  margin-right: 2px !important;
}

.mx-2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.my-2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.p-2 {
  padding: 2px !important;
}

.pt-2 {
  padding-top: 2px !important;
}

.pb-2 {
  padding-bottom: 2px !important;
}

.pl-2 {
  padding-left: 2px !important;
}

.pr-2 {
  padding-right: 2px !important;
}

.gap-4 {
  gap: 4px !important;
}

.col-gap-4 {
  column-gap: 4px !important;
}

.row-gap-4 {
  row-gap: 4px !important;
}

.m-4 {
  margin: 4px !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.ml-4 {
  margin-left: 4px !important;
}

.mr-4 {
  margin-right: 4px !important;
}

.mx-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.p-4 {
  padding: 4px !important;
}

.pt-4 {
  padding-top: 4px !important;
}

.pb-4 {
  padding-bottom: 4px !important;
}

.pl-4 {
  padding-left: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

.gap-6 {
  gap: 6px !important;
}

.col-gap-6 {
  column-gap: 6px !important;
}

.row-gap-6 {
  row-gap: 6px !important;
}

.m-6 {
  margin: 6px !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.ml-6 {
  margin-left: 6px !important;
}

.mr-6 {
  margin-right: 6px !important;
}

.mx-6 {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.my-6 {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.p-6 {
  padding: 6px !important;
}

.pt-6 {
  padding-top: 6px !important;
}

.pb-6 {
  padding-bottom: 6px !important;
}

.pl-6 {
  padding-left: 6px !important;
}

.pr-6 {
  padding-right: 6px !important;
}

.gap-8 {
  gap: 8px !important;
}

.col-gap-8 {
  column-gap: 8px !important;
}

.row-gap-8 {
  row-gap: 8px !important;
}

.m-8 {
  margin: 8px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.p-8 {
  padding: 8px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.gap-10 {
  gap: 10px !important;
}

.col-gap-10 {
  column-gap: 10px !important;
}

.row-gap-10 {
  row-gap: 10px !important;
}

.m-10 {
  margin: 10px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mx-10 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.my-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.p-10 {
  padding: 10px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.gap-12 {
  gap: 12px !important;
}

.col-gap-12 {
  column-gap: 12px !important;
}

.row-gap-12 {
  row-gap: 12px !important;
}

.m-12 {
  margin: 12px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mx-12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.p-12 {
  padding: 12px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.gap-14 {
  gap: 14px !important;
}

.col-gap-14 {
  column-gap: 14px !important;
}

.row-gap-14 {
  row-gap: 14px !important;
}

.m-14 {
  margin: 14px !important;
}

.mt-14 {
  margin-top: 14px !important;
}

.mb-14 {
  margin-bottom: 14px !important;
}

.ml-14 {
  margin-left: 14px !important;
}

.mr-14 {
  margin-right: 14px !important;
}

.mx-14 {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.my-14 {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.p-14 {
  padding: 14px !important;
}

.pt-14 {
  padding-top: 14px !important;
}

.pb-14 {
  padding-bottom: 14px !important;
}

.pl-14 {
  padding-left: 14px !important;
}

.pr-14 {
  padding-right: 14px !important;
}

.gap-16 {
  gap: 16px !important;
}

.col-gap-16 {
  column-gap: 16px !important;
}

.row-gap-16 {
  row-gap: 16px !important;
}

.m-16 {
  margin: 16px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.p-16 {
  padding: 16px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.gap-18 {
  gap: 18px !important;
}

.col-gap-18 {
  column-gap: 18px !important;
}

.row-gap-18 {
  row-gap: 18px !important;
}

.m-18 {
  margin: 18px !important;
}

.mt-18 {
  margin-top: 18px !important;
}

.mb-18 {
  margin-bottom: 18px !important;
}

.ml-18 {
  margin-left: 18px !important;
}

.mr-18 {
  margin-right: 18px !important;
}

.mx-18 {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.my-18 {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.p-18 {
  padding: 18px !important;
}

.pt-18 {
  padding-top: 18px !important;
}

.pb-18 {
  padding-bottom: 18px !important;
}

.pl-18 {
  padding-left: 18px !important;
}

.pr-18 {
  padding-right: 18px !important;
}

.gap-20 {
  gap: 20px !important;
}

.col-gap-20 {
  column-gap: 20px !important;
}

.row-gap-20 {
  row-gap: 20px !important;
}

.m-20 {
  margin: 20px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mx-20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.my-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.p-20 {
  padding: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.gap-22 {
  gap: 22px !important;
}

.col-gap-22 {
  column-gap: 22px !important;
}

.row-gap-22 {
  row-gap: 22px !important;
}

.m-22 {
  margin: 22px !important;
}

.mt-22 {
  margin-top: 22px !important;
}

.mb-22 {
  margin-bottom: 22px !important;
}

.ml-22 {
  margin-left: 22px !important;
}

.mr-22 {
  margin-right: 22px !important;
}

.mx-22 {
  margin-left: 22px !important;
  margin-right: 22px !important;
}

.my-22 {
  margin-top: 22px !important;
  margin-bottom: 22px !important;
}

.p-22 {
  padding: 22px !important;
}

.pt-22 {
  padding-top: 22px !important;
}

.pb-22 {
  padding-bottom: 22px !important;
}

.pl-22 {
  padding-left: 22px !important;
}

.pr-22 {
  padding-right: 22px !important;
}

.gap-24 {
  gap: 24px !important;
}

.col-gap-24 {
  column-gap: 24px !important;
}

.row-gap-24 {
  row-gap: 24px !important;
}

.m-24 {
  margin: 24px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.ml-24 {
  margin-left: 24px !important;
}

.mr-24 {
  margin-right: 24px !important;
}

.mx-24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.p-24 {
  padding: 24px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.pl-24 {
  padding-left: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.gap-26 {
  gap: 26px !important;
}

.col-gap-26 {
  column-gap: 26px !important;
}

.row-gap-26 {
  row-gap: 26px !important;
}

.m-26 {
  margin: 26px !important;
}

.mt-26 {
  margin-top: 26px !important;
}

.mb-26 {
  margin-bottom: 26px !important;
}

.ml-26 {
  margin-left: 26px !important;
}

.mr-26 {
  margin-right: 26px !important;
}

.mx-26 {
  margin-left: 26px !important;
  margin-right: 26px !important;
}

.my-26 {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
}

.p-26 {
  padding: 26px !important;
}

.pt-26 {
  padding-top: 26px !important;
}

.pb-26 {
  padding-bottom: 26px !important;
}

.pl-26 {
  padding-left: 26px !important;
}

.pr-26 {
  padding-right: 26px !important;
}

.gap-28 {
  gap: 28px !important;
}

.col-gap-28 {
  column-gap: 28px !important;
}

.row-gap-28 {
  row-gap: 28px !important;
}

.m-28 {
  margin: 28px !important;
}

.mt-28 {
  margin-top: 28px !important;
}

.mb-28 {
  margin-bottom: 28px !important;
}

.ml-28 {
  margin-left: 28px !important;
}

.mr-28 {
  margin-right: 28px !important;
}

.mx-28 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.my-28 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.p-28 {
  padding: 28px !important;
}

.pt-28 {
  padding-top: 28px !important;
}

.pb-28 {
  padding-bottom: 28px !important;
}

.pl-28 {
  padding-left: 28px !important;
}

.pr-28 {
  padding-right: 28px !important;
}

.gap-30 {
  gap: 30px !important;
}

.col-gap-30 {
  column-gap: 30px !important;
}

.row-gap-30 {
  row-gap: 30px !important;
}

.m-30 {
  margin: 30px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mx-30 {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.my-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.p-30 {
  padding: 30px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pl-30 {
  padding-left: 30px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.gap-32 {
  gap: 32px !important;
}

.col-gap-32 {
  column-gap: 32px !important;
}

.row-gap-32 {
  row-gap: 32px !important;
}

.m-32 {
  margin: 32px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.ml-32 {
  margin-left: 32px !important;
}

.mr-32 {
  margin-right: 32px !important;
}

.mx-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.p-32 {
  padding: 32px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pl-32 {
  padding-left: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.gap-34 {
  gap: 34px !important;
}

.col-gap-34 {
  column-gap: 34px !important;
}

.row-gap-34 {
  row-gap: 34px !important;
}

.m-34 {
  margin: 34px !important;
}

.mt-34 {
  margin-top: 34px !important;
}

.mb-34 {
  margin-bottom: 34px !important;
}

.ml-34 {
  margin-left: 34px !important;
}

.mr-34 {
  margin-right: 34px !important;
}

.mx-34 {
  margin-left: 34px !important;
  margin-right: 34px !important;
}

.my-34 {
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

.p-34 {
  padding: 34px !important;
}

.pt-34 {
  padding-top: 34px !important;
}

.pb-34 {
  padding-bottom: 34px !important;
}

.pl-34 {
  padding-left: 34px !important;
}

.pr-34 {
  padding-right: 34px !important;
}

.gap-36 {
  gap: 36px !important;
}

.col-gap-36 {
  column-gap: 36px !important;
}

.row-gap-36 {
  row-gap: 36px !important;
}

.m-36 {
  margin: 36px !important;
}

.mt-36 {
  margin-top: 36px !important;
}

.mb-36 {
  margin-bottom: 36px !important;
}

.ml-36 {
  margin-left: 36px !important;
}

.mr-36 {
  margin-right: 36px !important;
}

.mx-36 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}

.my-36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.p-36 {
  padding: 36px !important;
}

.pt-36 {
  padding-top: 36px !important;
}

.pb-36 {
  padding-bottom: 36px !important;
}

.pl-36 {
  padding-left: 36px !important;
}

.pr-36 {
  padding-right: 36px !important;
}

.gap-38 {
  gap: 38px !important;
}

.col-gap-38 {
  column-gap: 38px !important;
}

.row-gap-38 {
  row-gap: 38px !important;
}

.m-38 {
  margin: 38px !important;
}

.mt-38 {
  margin-top: 38px !important;
}

.mb-38 {
  margin-bottom: 38px !important;
}

.ml-38 {
  margin-left: 38px !important;
}

.mr-38 {
  margin-right: 38px !important;
}

.mx-38 {
  margin-left: 38px !important;
  margin-right: 38px !important;
}

.my-38 {
  margin-top: 38px !important;
  margin-bottom: 38px !important;
}

.p-38 {
  padding: 38px !important;
}

.pt-38 {
  padding-top: 38px !important;
}

.pb-38 {
  padding-bottom: 38px !important;
}

.pl-38 {
  padding-left: 38px !important;
}

.pr-38 {
  padding-right: 38px !important;
}

.gap-40 {
  gap: 40px !important;
}

.col-gap-40 {
  column-gap: 40px !important;
}

.row-gap-40 {
  row-gap: 40px !important;
}

.m-40 {
  margin: 40px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mx-40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.my-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.p-40 {
  padding: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.row-gap-70 {
  row-gap: 70px !important;
}

.gap-7 {
  gap: 7px !important;
}

.p-5 {
  padding: 5px !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.px-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* margin auto */
.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mlr-auto {
  margin: 0 auto !important;
}

/* flex */
.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.flex-1 {
  flex: 1 !important;
}

.grow-1 {
  flex-grow: 1 !important;
}

.grow-0 {
  flex-grow: 0 !important;
}

.basis-0 {
  flex-basis: 0 !important;
}

.flex-col {
  display: flex !important;
  flex-direction: column !important;
}

.flex-row {
  display: flex !important;
  flex-direction: row !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-center {
  align-items: center !important;
}

.align-end {
  align-items: flex-end !important;
}

.no-wrap {
  flex-wrap: nowrap !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.shrink-0 {
  flex-shrink: 0 !important;
}

.shrink-1 {
  flex-shrink: 1 !important;
}

.nudge-down-1 {
  position: relative;
  top: 1px;
}

.nudge-up-1 {
  position: relative;
  top: -1px;
}

.nudge-down-2 {
  position: relative;
  top: 2px;
}

.nudge-up-2 {
  position: relative;
  top: -2px;
}

.nudge-down-3 {
  position: relative;
  top: 3px;
}

.nudge-up-3 {
  position: relative;
  top: -3px;
}

.nudge-down-4 {
  position: relative;
  top: 4px;
}

.nudge-up-4 {
  position: relative;
  top: -4px;
}

.nudge-down-5 {
  position: relative;
  top: 5px;
}

.nudge-up-5 {
  position: relative;
  top: -5px;
}

.nudge-down-6 {
  position: relative;
  top: 6px;
}

.nudge-up-6 {
  position: relative;
  top: -6px;
}

.nudge-down-7 {
  position: relative;
  top: 7px;
}

.nudge-up-7 {
  position: relative;
  top: -7px;
}

/* icon */
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}
.icon-wrapper.hover {
  cursor: pointer;
}
.icon-wrapper.hover:hover {
  background-color: var(--color-light-gray-5);
}
.icon-wrapper:has(.disabled) {
  cursor: not-allowed;
}

/* 아이콘 */
.icon.disabled, .round-icon.disabled {
  color: #A0A0A0;
  cursor: not-allowed;
  pointer-events: none;
}
.icon.size-14, .round-icon.size-14 {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
}
.icon.size-16, .round-icon.size-16 {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
}
.icon.size-18, .round-icon.size-18 {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}
.icon.size-20, .round-icon.size-20 {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}
.icon.size-24, .round-icon.size-24 {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
}

/* 원형 아이콘 */
.icon.rectangle {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px;
  background-color: var(--color-light-gray-60);
  border-radius: 30px;
}
.icon.rectangle.main {
  background-color: var(--color-light-primary-50);
}
.icon.rectangle.light-gray {
  background-color: #D9D9D9;
}
.icon.rectangle.warning {
  background-color: #F78831;
}
.icon.rectangle.danger {
  background-color: #DA3D49;
}
.icon.rectangle.success {
  background-color: #10975E;
}

/* 콘솔 박스 */
.console-box {
  background-color: #F7F8FA;
  border: 1px solid #E6E8ED;
  border-radius: 10px;
  padding: 10px 15px !important;
}
.console-box .text-box {
  white-space: pre-wrap;
  margin: 0;
  overflow-y: auto;
}
.console-box .text-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.console-box .text-box::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.console-box .text-box::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.console-box .text-box::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.console-box .text-box::-webkit-scrollbar-button:start:decrement, .console-box .text-box::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .console-box .text-box {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.console-box .text-box span.hl {
  background-color: rgba(22, 65, 255, 0.1);
  width: fit-content;
}

/* content-list */
ul.content-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
ul.content-list li {
  display: flex;
}
ul.content-list li::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #000;
  margin-right: 6px;
  flex-shrink: 0;
  position: relative;
  top: 7px;
}

/* 버튼 기본 스타일 */
button, .button {
  padding: 10px 16px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  position: relative;
  font-weight: 600;
  flex-shrink: 0;
  font-size: 13px;
  color: #3D4350;
  gap: 4px;
}
button *, .button * {
  line-height: 36px;
}
button.small, .button.small {
  padding: 4px 5px;
  height: 26px;
  font-size: var(--font-size-13);
  border-radius: 6px;
}
button.small *, .button.small * {
  line-height: 26px;
}
button.radius-round, .button.radius-round {
  border-radius: 50px;
  padding: 10px 12px;
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  font-size: 14px;
  gap: 7px;
}
button.radius-round *, .button.radius-round * {
  line-height: 40px;
}
button.radius-round.active, .button.radius-round.active {
  border-color: #118DFF !important;
  color: #118DFF !important;
}
button.disabled, .button.disabled {
  cursor: not-allowed !important;
  pointer-events: none;
}
button:disabled, .button:disabled {
  background-color: transparent !important;
  border-color: var(--color-light-gray-10) !important;
  cursor: not-allowed !important;
}
button:disabled::before, .button:disabled::before {
  display: none;
}
button:disabled span, .button:disabled span {
  color: #C4C7D0 !important;
}
button:disabled .sprite-icon, .button:disabled .sprite-icon {
  color: #C4C7D0 !important;
}
button.underline, .button.underline {
  padding: 0;
  color: #5B6673;
  border-bottom: 1px solid #5B6673;
  font-weight: 400;
  height: 20px;
  font-size: 12px;
  border-radius: 0;
}
button span, .button span {
  position: relative;
  z-index: 1;
}
button::before, .button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
button:hover::before, .button:hover::before {
  background: rgba(0, 0, 0, 0.03);
}
button.no-hover::before, .button.no-hover::before {
  background: rgba(0, 0, 0, 0);
}
button.hover-color:hover, .button.hover-color:hover {
  color: #118DFF;
}
button.hover-color:hover::before, .button.hover-color:hover::before {
  background: transparent;
}
button, .button {
  /* 버튼 색상 variants */
}
button.blue, .button.blue {
  background-color: #118DFF;
  color: #fff;
}
button.blue.outline, .button.blue.outline {
  border: 1px solid #118DFF;
  background-color: #fff;
  color: #118DFF;
}
button.red, .button.red {
  background-color: #F43F5E;
  color: #fff;
}
button.red.outline, .button.red.outline {
  border: 1px solid #F43F5E;
  background-color: #fff;
  color: #F43F5E;
}
button.black.outline, .button.black.outline {
  border: 1px solid #494E55;
  background-color: #fff;
  color: #494E55;
}
button.gray, .button.gray {
  background: #5B6673;
  color: #fff;
}
button.gray.outline, .button.gray.outline {
  border: 1px solid #E6E8ED;
  background-color: #fff;
  color: #3D4350;
}
button.dark-gray, .button.dark-gray {
  background-color: #5F6B7A;
  color: #fff;
}
button.main, .button.main {
  background-color: var(--color-light-primary-50);
  border-color: var(--color-light-primary-50);
}
button, .button {
  /* 아이콘 버튼 */
}
button.btn-icon, .button.btn-icon {
  padding: 0;
  width: fit-content;
  height: fit-content;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  position: relative;
  font-weight: 500;
}

/* 패스워드 토글 버튼 */
.button-box.password-toggle {
  position: absolute;
  top: 57%;
  right: 0px;
  transform: translate(-80%, -50%);
}

/* split 버튼 */
.split-btn-wrapper {
  height: 35px;
  font-size: 0;
  border-radius: 10px;
  width: fit-content;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.split-btn-wrapper button {
  padding: 3px 10px;
  border-radius: 0;
}
.split-btn-wrapper button:not(:last-child) {
  border-right: 1px solid #E6E8ED;
}
.split-btn-wrapper.blue {
  border: 1px solid #118DFF;
}
.split-btn-wrapper.blue button {
  color: #118DFF;
}
.split-btn-wrapper.red {
  border: 1px solid #F43F5E;
}
.split-btn-wrapper.red button {
  color: #F43F5E;
}
.split-btn-wrapper {
  /* 라운드 toggle 형태 */
}
.split-btn-wrapper.round-toggle {
  border: 1px solid #E6E8ED;
  border-radius: 50px;
  overflow: visible;
  height: 22px;
  min-width: 75px;
}
.split-btn-wrapper.round-toggle button {
  height: 22px;
  font-size: var(--font-size-12);
  border-right: 0;
}
.split-btn-wrapper.round-toggle button.active {
  border: 1px solid transparent;
  border-radius: 50px;
}
.split-btn-wrapper.round-toggle button:not(.active) {
  color: #667085;
}
.split-btn-wrapper.round-toggle button:not(.active):first-child {
  padding-right: 5px;
}
.split-btn-wrapper.round-toggle button:not(.active):last-child {
  padding-left: 5px;
}
.split-btn-wrapper.round-toggle button::before {
  display: none;
}
.split-btn-wrapper.round-toggle button span {
  font-weight: 600;
}
.split-btn-wrapper.round-toggle.primary button.active {
  border-color: #1641FF;
  color: #1641FF;
  box-shadow: 1px 0.5px 1.5px 0 rgba(0, 0, 0, 0.2);
}

/* 버튼 container 공통 스타일 */
.button-row-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.button-row-container.with-border-b {
  border-bottom: 1px solid #E2E6EB;
  min-height: 56px;
  align-items: center;
}

/* 오름차순, 내림차순 버튼 */
.sort-btn-box {
  display: inline-flex;
  align-items: center;
}
.sort-btn-box .btn-icon .sort-icon {
  width: 20px;
  height: 20px;
  background: url("/img/icon/sort_icon.svg") no-repeat center/100% auto;
}
.sort-btn-box .btn-icon.sort-acs-btn .sort-icon {
  background: url("/img/icon/sort_asc_icon.svg") no-repeat center/100% auto;
}
.sort-btn-box .btn-icon.sort-desc-btn .sort-icon {
  background: url("/img/icon/sort_desc_icon.svg") no-repeat center/100% auto;
}

/* 테이블 row toggle 버튼 */
.row-toggle-button {
  height: 22px;
  line-height: 22px;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid #E2E6EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background-color: #fff;
}
th .row-toggle-button .count-text {
  color: transparent;
}
.row-toggle-button.active {
  border-color: #118DFF;
  color: #118DFF;
}
.row-toggle-button.active .sprite-icon {
  transform: rotate(-180deg);
}
.row-toggle-button .count-text {
  font-size: 12px;
  line-height: 12px;
  min-width: 7px;
}
.row-toggle-button .sprite-icon {
  transform: rotate(0deg);
  transition: transform var(--transition-base);
}

.button-wrapper {
  display: flex;
  gap: 7px;
  align-items: center;
}
.button-wrapper.confirm-btn-wrapper button {
  padding: 5px 10px;
  height: 30px;
  line-height: 30px;
}
.button-wrapper {
  /* 테이블 내 fix-tip-btn */
  /* 기존 코드 위해 남겨놓음.. 현재는 chip으로 통합 */
}
.button-wrapper .fix-tip-btn {
  font-size: 13px;
  padding: 0 6px !important;
  height: 26px !important;
  line-height: 26px !important;
  gap: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.button-wrapper .fix-tip-btn .circle {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.button-wrapper .fix-tip-btn.red {
  background-color: #FFEDEE;
  color: #FF1736;
}
.button-wrapper .fix-tip-btn.red .circle {
  background-color: #FF1736;
}
.button-wrapper .fix-tip-btn.blue {
  background-color: #E6F0FE;
  color: #1641FF;
}
.button-wrapper .fix-tip-btn.blue .circle {
  background-color: #1641FF;
}
.button-wrapper .fix-tip-btn.gray {
  background-color: #EEF2F6;
  color: #5B6673;
}
.button-wrapper .fix-tip-btn.gray .circle {
  background-color: #5B6673;
}

.filter-toggle-btn {
  border: 1px solid #E6E8ED;
  background-color: #fff;
  color: #3D4350;
}
.filter-toggle-btn.filtered {
  border-color: #118DFF;
  color: #118DFF;
}
.filter-toggle-btn.filtered .filter-cnt {
  display: inline-block;
}
.filter-toggle-btn.filtered .close-icon {
  display: inline-block;
  line-height: 14px;
}
.filter-toggle-btn .filter-cnt {
  display: none;
}
.filter-toggle-btn .close-icon {
  display: none;
}

/* 칩 */
.chip {
  display: inline-flex;
  height: 26px;
  line-height: 26px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  flex: 0 0 auto;
  border-radius: 24px;
  overflow: hidden;
  min-width: 32px;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--font-size-13);
}
.chip.height-10 {
  height: 10px;
  line-height: 10px;
  font-size: var(--font-size-10);
}
.chip.height-11 {
  height: 11px;
  line-height: 11px;
  font-size: var(--font-size-10);
}
.chip.height-12 {
  height: 12px;
  line-height: 12px;
  font-size: var(--font-size-10);
}
.chip.height-13 {
  height: 13px;
  line-height: 13px;
  font-size: var(--font-size-10);
}
.chip.height-14 {
  height: 14px;
  line-height: 14px;
  font-size: var(--font-size-10);
}
.chip.height-15 {
  height: 15px;
  line-height: 15px;
  font-size: var(--font-size-10);
}
.chip.height-16 {
  height: 16px;
  line-height: 16px;
  font-size: var(--font-size-10);
}
.chip.height-17 {
  height: 17px;
  line-height: 17px;
  font-size: var(--font-size-10);
}
.chip.height-18 {
  height: 18px;
  line-height: 18px;
  font-size: var(--font-size-10);
}
.chip.height-19 {
  height: 19px;
  line-height: 19px;
  font-size: var(--font-size-10);
}
.chip.height-20 {
  height: 20px;
  line-height: 20px;
}
.chip.height-21 {
  height: 21px;
  line-height: 21px;
}
.chip.height-22 {
  height: 22px;
  line-height: 22px;
}
.chip.height-23 {
  height: 23px;
  line-height: 23px;
}
.chip.height-24 {
  height: 24px;
  line-height: 24px;
}
.chip.only-text {
  background-color: transparent !important;
  border: 0;
  padding: 2px 4px;
  min-width: 20px;
}
.chip.only-text.black {
  color: var(--color-light-gray-100);
}
.chip.only-text.purple {
  color: #8B33FF;
}
.chip.only-text.dark-gray {
  color: #494E55;
}
.chip.only-text.warning {
  color: #F78831;
}
.chip.small {
  min-width: 26px;
  height: 20px !important;
  line-height: 20px !important;
  padding: 4px 6px !important;
  border-radius: 20px;
  background-color: #494E55;
  font-size: var(--font-size-12);
  color: var(--color-light-gray-0);
  font-weight: 600;
}
.chip.main {
  background-color: #E6F2FF;
  color: var(--color-light-primary-50);
}
.chip.main-2 {
  background-color: #E6F0FE;
  color: var(--color-light-primary-50);
}
.chip.main-light {
  background-color: var(--color-main-light);
  color: var(--color-light-gray-100);
}
.chip.success {
  background-color: #D7E0FF;
  color: #1641FF;
}
.chip.blocked {
  background-color: #D9D9D9;
  color: #000000;
}
.chip.gray {
  background-color: #D9D9D9;
  color: #494E55;
}
.chip.gray-2 {
  background-color: #EEF2F6;
  color: #5B6673;
}
.chip.dark-gray {
  background-color: #494E55;
  color: var(--color-light-gray-0);
}
.chip.medium-gray {
  background-color: #B1B6C3;
  color: var(--color-light-gray-0);
}
.chip.light-gray {
  background-color: #F2F3F8;
  color: #B1B6C3;
}
.chip.light-gray.outline {
  border: 1px solid var(--color-light-gray-60);
  color: var(--color-light-gray-60);
}
.chip.danger {
  background-color: #FFE2DE;
  color: #FF1B1B;
}
.chip.warning {
  background-color: #FEEACE;
  color: #FF6200;
}
.chip.approval {
  background-color: #CCF2FF;
  color: #008CBA;
}
.chip.disable {
  background-color: #E6E8ED;
  color: #667085;
}
.chip.red {
  background-color: #FF2B1C;
  color: var(--color-light-gray-0);
}
.chip.red-2 {
  background-color: #FFEDEE;
  color: #FF1736;
}
.chip.orange {
  background-color: #FFF3E0;
  color: #F97316;
}
.chip.orange-2 {
  background-color: #FFF5E8;
  color: #FF8A00;
}
.chip.purple {
  background-color: #FCE7F3;
  color: #DB2777;
}
.chip.violet {
  background-color: #EEE1FF;
  color: #8B33FF;
}
.chip.green {
  background-color: #CCF8DE;
  color: #10975E;
}
.chip.light-green {
  background-color: #EAFBF3;
  color: #00A76F;
}
.chip.blue {
  background-color: #1641FF;
  color: var(--color-light-gray-0);
}
.chip.blue.outline {
  border: 1px solid #1641FF;
  color: #1641FF;
  background-color: #fff;
}
.chip.blue-2 {
  background-color: #EEF6FF;
  color: #118DFF;
}
.chip.light-blue {
  background-color: #EEF2FF;
  color: #6366F1;
}
.chip.black {
  background-color: var(--color-light-gray-100);
  color: var(--color-light-gray-0);
}
.chip.black-light {
  background-color: #2C3E50;
  color: var(--color-light-gray-0);
}
.chip.white {
  background-color: var(--color-light-gray-0);
  color: var(--color-light-gray-60);
}
.chip.gray {
  background-color: #E6E8ED;
  color: #3D4350;
}
.chip.square {
  border-radius: 4px;
}
.chip.black-outline {
  color: var(--color-light-gray-100);
  border: 1px solid var(--color-light-gray-100);
}
.chip.blue-outline {
  color: #1641FF;
  border: 1px solid #1641FF;
}
.chip.match {
  color: #00C853;
  border: 1px solid #00C853;
}

.chip.black-outline, .chip.blue-outline, .chip.match {
  padding: 2px 4px;
  height: 18px;
  min-width: 36px;
  font-weight: 400;
  font-size: var(--font-size-10);
  background-color: var(--color-light-gray-0);
}

/* state circle */
.state-circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.state-circle.gray {
  background-color: #E2E6EB;
}
.state-circle.blue {
  background-color: #118DFF;
}

/* 공간 부족 시 chip +$ 처리 */
.indicator-chip-wrapper {
  display: flex;
  gap: 7px;
  min-width: 0;
  align-items: center;
}
.indicator-chip-wrapper .chips {
  display: inline-flex;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  min-width: 0;
}
.indicator-chip-wrapper .chips .chip {
  white-space: nowrap;
  display: flex;
  min-width: 0;
}
.indicator-chip-wrapper .chips .chip.is-overflowing {
  flex: 1 1 auto;
  min-width: 0;
}
.indicator-chip-wrapper .chips .chip.is-overflowing .chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indicator-chip-wrapper .overflow-indicator {
  display: inline-block;
  color: #000;
  font-weight: 400;
  font-size: var(--font-size-14);
  flex-shrink: 0;
  visibility: hidden;
}
.indicator-chip-wrapper .overflow-indicator.is-visible {
  visibility: visible;
}

.chip.with-circle {
  font-size: 13px;
  padding: 0 6px;
  height: 26px;
  line-height: 26px;
  gap: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.chip.with-circle .circle {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.chip.with-circle.red {
  background-color: #FFEDEE;
  color: #FF1736;
}
.chip.with-circle.red .circle {
  background-color: #FF1736;
}
.chip.with-circle.blue {
  background-color: #E6F0FE;
  color: #1641FF;
}
.chip.with-circle.blue .circle {
  background-color: #1641FF;
}
.chip.with-circle.blue-3 {
  background-color: #EEF6FF;
  color: #118DFF;
}
.chip.with-circle.blue-3 .circle {
  background-color: #118DFF;
}
.chip.with-circle.green {
  background-color: #EAFBF3;
  color: #00A76F;
}
.chip.with-circle.green .circle {
  background-color: #00A76F;
}
.chip.with-circle.gray {
  background-color: #EEF2F6;
  color: #5B6673;
}
.chip.with-circle.gray .circle {
  background-color: #5B6673;
}
.chip.with-circle.purple {
  background-color: #F5F0FF;
  color: #7C3AED;
}
.chip.with-circle.purple .circle {
  background-color: #7C3AED;
}
.chip.with-circle.purple-2 {
  background-color: #EEF2FF;
  color: #4F46E5;
}
.chip.with-circle.purple-2 .circle {
  background-color: #4F46E5;
}
.chip.with-circle.light-green {
  background-color: #EAFBF3;
  color: #00A76F;
}
.chip.with-circle.light-green .circle {
  background-color: #00A76F;
}
.chip.with-circle.orange {
  background-color: #FFF5E8;
  color: #FF8A00;
}
.chip.with-circle.orange .circle {
  background-color: #FF8A00;
}

.chip.border-chip.gray {
  background-color: #EEF2F6;
  border: 1px solid #CCD4DE;
  color: #3D4350;
}
.chip.border-chip.white {
  background-color: #fff;
  border: 1px solid #5B6673;
  color: #5B6673;
}
.chip.border-chip.green {
  background-color: #EAFBF3;
  border: 1px solid #B7E9D2;
  color: #00A76F;
}
.chip.border-chip.blue {
  background-color: #EEF6FF;
  border: 1px solid #B8D9FF;
  color: #118DFF;
}

.date-picker-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 315px;
}
.date-picker-wrapper .flatpickr-wrapper {
  width: 100%;
}
.date-picker-wrapper > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8px;
  position: absolute;
  top: 47%;
  right: 10px;
  transform: translate(0, -50%);
  pointer-events: none;
}
.date-picker-wrapper input.f_timepicker {
  width: 100%;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #e6e8ea;
  border-radius: 8px;
  font-size: 14px;
  color: #000;
  outline: none;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s;
}
.date-picker-wrapper input.f_timepicker:focus {
  border-color: #118DFF;
}
.date-picker-wrapper .flatpickr-calendar {
  box-sizing: border-box;
  border: 1px solid #E2E8F0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  border-radius: 20px;
  padding: 16px;
  background: #FFFFFF;
  width: 315px;
  top: 100% !important;
  margin-top: 5px;
  padding-bottom: 0;
}
.date-picker-wrapper .flatpickr-calendar:before, .date-picker-wrapper .flatpickr-calendar:after {
  display: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-months {
  margin-bottom: 8px;
  position: relative;
  display: flex;
  justify-content: center;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  top: 2px;
  padding: 8px;
  border-radius: 50%;
  width: 34px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: #F8FAFC;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  fill: #118DFF;
  width: 13px;
  height: 13px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .custom-select-box-wrapper {
  width: 109px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-months .custom-select-box-wrapper button.select-label {
  font-size: 15px;
  font-weight: 700;
  background-position: right 21px center;
  border: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-month {
  flex: 0 0 auto;
  min-width: 20px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-current-month {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  width: 100%;
  padding-top: 0;
  height: 37px;
  line-height: 36px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: transparent !important;
  font-weight: 700;
  color: #1E293B;
  padding: 0 4px 0 0;
  pointer-events: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  border: none !important;
  background: transparent !important;
  width: 50px;
  display: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-current-month .numInputWrapper span {
  display: none !important;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.numInput {
  border: none !important;
  background: transparent !important;
  font-weight: 700;
  color: #1E293B;
  padding: 0;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-weekdays {
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-weekdays span.flatpickr-weekday {
  color: #94A3B8;
  font-weight: 600;
  font-size: 13px;
  width: 14.28%;
  max-width: 14.28%;
  text-align: center;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days {
  width: 100% !important;
  margin-bottom: 4px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day {
  box-sizing: border-box !important;
  border-radius: 50% !important;
  color: #1E293B;
  font-weight: 500;
  font-size: 14px;
  border: 2px solid transparent !important;
  margin-top: 4px;
  width: 14.28% !important;
  max-width: 14.28% !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day:hover {
  background: #F8FAFC;
  border-color: #F8FAFC;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.today {
  color: #118DFF;
  font-weight: 700;
  border: 2px solid #118DFF !important;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.today:hover {
  background: #F4F8FE;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.selected, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.selected:hover, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.selected:focus, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.startRange, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.startRange:hover, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.startRange:focus, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.endRange, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.endRange:hover, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.endRange:focus {
  background: #118DFF;
  border-color: #118DFF;
  color: #FFFFFF;
  font-weight: 600;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.inRange {
  background: #F4F8FE;
  border-color: transparent;
  color: #118DFF;
  border-radius: 0;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay, .date-picker-wrapper .flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay {
  color: rgb(193.9859550562, 202.5393258427, 214.5140449438);
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time {
  box-sizing: border-box;
  border-top: 1px solid #F1F5F9;
  background: #FFFFFF;
  height: 60px !important;
  max-height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-top: 10px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time > br,
.date-picker-wrapper .flatpickr-calendar .flatpickr-time > hr {
  display: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper {
  box-sizing: border-box;
  height: 38px;
  width: 42px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  position: relative;
  flex: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper input.numInput {
  font-weight: 600;
  font-size: 15px;
  color: #1E293B;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper span {
  box-sizing: border-box;
  width: 18px;
  height: 14px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 4px;
  right: -24px;
  display: block;
  opacity: 1;
  position: absolute;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp {
  top: 2px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after {
  content: "";
  position: absolute;
  top: 58%;
  left: 50%;
  border: none !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
  width: 4px;
  height: 4px;
  border-top: 1.5px solid #118DFF !important;
  border-left: 1.5px solid #118DFF !important;
  transform: translate(-50%, -50%) rotate(45deg);
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
  bottom: 2px;
  top: auto;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  border: none !important;
  border-top-color: transparent !important;
  background: transparent !important;
  width: 4px;
  height: 4px;
  border-bottom: 1.5px solid #118DFF !important;
  border-right: 1.5px solid #118DFF !important;
  transform: translate(-50%, -50%) rotate(45deg);
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  color: #1E293B;
  font-weight: 600;
  display: inline-block;
  margin-left: 29px;
  margin-right: 5px;
  flex: none;
  margin-top: 15px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
  box-sizing: border-box;
  width: 120px;
  height: 32px;
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 14px;
  cursor: pointer;
  background-color: #F4F8FE;
  border: 1px solid #E2E6EB;
  font-size: 0;
  flex: none;
  display: flex;
  overflow: hidden;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm::before {
  content: "오전";
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  position: relative;
  z-index: 2;
  border-radius: 9px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm::after {
  content: "오후";
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  position: relative;
  z-index: 2;
  border-radius: 9px;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:not(.is-pm)::before {
  background-color: #FFFFFF;
  color: #118DFF;
  border-right: 1px solid #E9ECEF;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:not(.is-pm)::after {
  background-color: transparent;
  color: #000000;
  border-left: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm.is-pm::before {
  background-color: transparent;
  color: #000000;
  border-right: none;
}
.date-picker-wrapper .flatpickr-calendar .flatpickr-time .flatpickr-am-pm.is-pm::after {
  background-color: #FFFFFF;
  color: #118DFF;
  border-left: 1px solid #E9ECEF;
}

/* 섹션 */
.dropdown-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  background-color: var(--color-light-gray-0);
  border: 1px solid var(--color-light-gray-10);
  border-radius: 8px;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}
.dropdown-box .date {
  display: inline-block;
  margin-top: 10px;
}
.dropdown-box.show .dropdown-btn .round-icon {
  transform: rotate(180deg);
}
.dropdown-box.show .inner-contents {
  height: auto;
}
.dropdown-box.show .date {
  margin-top: 0;
}
.dropdown-box .box-title {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-box .box-title .title-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dropdown-box .box-title .title-head {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #494E55;
}
.dropdown-box .box-title .title-text {
  font-weight: 600;
  font-size: var(--font-size-14);
  color: var(--color-light-gray-100);
  line-height: 14px;
}
.dropdown-box .box-title .title-description {
  display: flex;
  align-items: center;
  font-size: var(--font-size-13);
  font-weight: 400;
  color: #494E55;
  margin: 0;
}
.dropdown-box .box-title .icon-wrapper {
  display: inline-flex;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 8px;
}
.dropdown-box .box-title .icon-wrapper:hover {
  background-color: var(--color-light-gray-5);
}
.dropdown-box .inner-contents,
.dropdown-box .dropdown-contents {
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: height 0.15s ease;
  /* 여백 용도로 사용 (기본 20px)*/
}
.dropdown-box .inner-contents:not(:empty)::before,
.dropdown-box .dropdown-contents:not(:empty)::before {
  position: relative;
  width: 100%;
  min-height: 20px;
  content: " ";
  display: block;
}
.dropdown-box.notice-box {
  background-color: #EAF5FF;
  border: none;
  font-size: var(--font-size-14);
  padding: 15px 17px;
  margin-bottom: 30px;
}
.dropdown-box.notice-box .inner-contents,
.dropdown-box.notice-box .dropdown-content {
  width: 100%;
}
.dropdown-box.notice-box .inner-contents .dropdown-header,
.dropdown-box.notice-box .dropdown-content .dropdown-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.dropdown-box.notice-box .inner-contents:not(:empty)::before,
.dropdown-box.notice-box .dropdown-content:not(:empty)::before {
  min-height: 12px;
}

/* filter-container 안 dropdown-box */
.filter-container .dropdown-box {
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
}
.filter-container .dropdown-box.show {
  border-bottom: 0;
}
.filter-container .dropdown-box.show .inner-contents {
  height: auto;
  border: 1px solid var(--color-light-gray-10);
}
.filter-container .dropdown-box .inner-contents {
  border-radius: 8px;
  transition: height 0.15s ease;
}
.filter-container .dropdown-box .inner-contents > * {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 12px;
  padding: 14px 20px;
}
.filter-container .dropdown-box .inner-contents {
  /* 기존 설정값 초기화 */
}
.filter-container .dropdown-box .inner-contents:not(:empty)::before {
  display: none;
}
.filter-container .dropdown-box .dropdown-panel {
  border: 0;
}

/* setting-container 안 dropdown-box */
.setting-container .dropdown-box {
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
}
.setting-container .dropdown-btn {
  cursor: pointer;
  color: #737A7C;
}

/* border, padding 등 style 없는 dropdown-box */
.dropdown-box-basic .dropdown-contents {
  height: 0;
  overflow: hidden;
}
.dropdown-box-basic .dropdown-btn {
  cursor: pointer;
}
.dropdown-box-basic.show .dropdown-btn .round-icon {
  transform: rotate(180deg);
}

/*  인풋 */
/* 체크박스 */
input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-light-gray-20);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
input[type=checkbox]:checked {
  background: #118DFF;
  border-color: #118DFF;
}
input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}
input[type=checkbox]:disabled {
  cursor: not-allowed;
  background: var(--color-light-gray-5);
  opacity: 0.7;
}
input[type=checkbox]:checked:disabled {
  background: #8FC7FF;
  border: 2px solid #8FC7FF;
}

/* 토글 형태의 체크박스 ui */
label.toggle-chip input {
  display: none;
}
label.toggle-chip input:checked + .toggle-box .sprite-icon, label.toggle-chip input:checked + .toggle-box .round-icon {
  display: inline-block;
}
label.toggle-chip .toggle-box {
  padding: 7px 12px;
  border-radius: 50px;
  max-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: #F7F8FA;
  color: #667085;
  font-size: var(--font-size-14);
  font-weight: 500;
  user-select: none;
  border: 1px solid #E6E8ED;
  font-display: block;
}
label.toggle-chip .toggle-box .sprite-icon, label.toggle-chip .toggle-box .round-icon {
  display: none;
}
label.toggle-chip {
  /* 선택 시 */
}
label.toggle-chip.blue input:checked + .toggle-box {
  color: #118DFF;
  background-color: #EEF6FF;
  border: 1px solid #B8D9FF;
}
label.toggle-chip.red input:checked + .toggle-box {
  color: #FF1736;
  background-color: #FFEDEE;
  border: 1px solid #FFD0D7;
}
label.toggle-chip.green input:checked + .toggle-box {
  color: #00A76F;
  background-color: #EAFBF3;
  border: 1px solid #B7E9D2;
}
label.toggle-chip.orange input:checked + .toggle-box {
  color: #FF8A00;
  background-color: #FFF5E8;
  border: 1px solid #FFD8A8;
}
label.toggle-chip.gray input:checked + .toggle-box {
  color: #3D4350;
  background-color: #EEF2F6;
  border: 1px solid #CCD4DE;
}
label.toggle-chip.purple input:checked + .toggle-box {
  color: #7C3AED;
  background-color: #F5F0FF;
  border: 1px solid #E4D7FF;
}
label.toggle-chip.purple-2 input:checked + .toggle-box {
  color: #4F46E5;
  background-color: #EEF2FF;
  border: 1px solid #D7DEFF;
}

/* 라디오박스 */
input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-light-gray-20);
  border-radius: 50%;
  background: var(--color-light-gray-0);
  vertical-align: -2px;
  cursor: pointer;
  gap: 4px;
}
input[type=radio]:checked {
  border-color: #118DFF;
  border-width: 4px;
}
input[type=radio]:hover {
  border-color: #118DFF;
}
input[type=radio]:disabled {
  cursor: not-allowed;
  border-color: var(--color-light-gray-20);
  background: var(--color-light-gray-5);
  opacity: 0.7;
}

/* 필드 컨테이너 -필드(인풋,셀렉트박스,라디오,체크박스) 상단에 제목 있을 시 */
.field-container {
  padding: 0;
  margin: 0;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}
.field-container .field-title {
  padding: 0;
  width: fit-content;
  color: var(--color-light-gray-100);
  font-size: var(--font-size-14);
  font-weight: 600;
  white-space: nowrap;
}
.field-container .field-title .text-muted {
  color: #494E55;
}
.field-container .field-title .count-text {
  font-size: 14px;
  font-weight: 400;
}
.field-container .field-title .count-text .text-red {
  font-weight: 600;
}
.field-container .field-group {
  align-items: center;
  column-gap: 7px;
  row-gap: 20px;
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  min-width: 0;
}
.field-container .field-group:has(date-picker-wrapper) {
  flex-wrap: nowrap;
}
.field-container.horizontal {
  flex-direction: row;
  flex: initial;
}
.field-container.horizontal .field-title {
  min-width: 124px;
  line-height: 36px;
}
.field-container.horizontal .field-group {
  width: auto;
  flex-grow: 1;
}
.field-container.horizontal .field-group .input-wrapper {
  flex-grow: 1;
}
.field-container.horizontal .field-group .input-wrapper .input-text {
  width: 100%;
}

/* 체크박스/ 라디오박스 래퍼 */
.selection-wrapper {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 12px;
}
.selection-wrapper.vertical {
  flex-direction: column;
  align-items: initial;
}
.selection-wrapper .input-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
  color: var(--color-light-gray-100);
  font-size: var(--font-size-14);
  font-weight: 400;
  white-space: nowrap;
}

/* 인풋 */
.input-wrapper {
  display: inline-block;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  position: relative;
  min-height: 0;
}
.input-wrapper .input-box {
  position: relative;
}
.input-wrapper input.input-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
}
.input-wrapper .input-text::placeholder {
  color: #9AA0AE;
  font-size: 14px;
}
.input-wrapper textarea {
  padding: 7px 12px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--color-light-gray-10);
  font-size: var(--font-size-14);
  min-height: 36px;
}
.input-wrapper textarea:focus {
  outline: none;
}
.input-wrapper input[type=date] {
  position: relative;
}
.input-wrapper input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 8px;
}
.input-wrapper .input-text {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 110px;
  flex: 1;
  border-radius: 8px;
  border: 1px solid var(--color-light-gray-10);
  outline: none;
  max-width: 100%;
  min-width: 0;
  font-size: var(--font-size-14);
  width: inherit;
  font-weight: 400;
}
.input-wrapper .input-text:focus {
  border: 1px solid #118DFF;
}
.input-wrapper .input-text:disabled, .input-wrapper .input-text:read-only:not(div) {
  background-color: #F7F8FA;
  border-color: #E6E8ED;
  cursor: not-allowed;
}
.input-wrapper .input-text[readonly], .input-wrapper .input-text[disabled] {
  color: #9AA0AE;
}
.input-wrapper .input-text[readonly]::placeholder, .input-wrapper .input-text[disabled]::placeholder {
  color: #000;
}
.input-wrapper.width-fit {
  width: fit-content;
}
.input-wrapper {
  /* 인풋안에 아이콘 있을 시  */
}
.input-wrapper.with-icon {
  position: relative;
  display: inline-block;
}
.input-wrapper.with-icon .input-text {
  width: 100%;
  padding-right: 2.5rem;
  box-sizing: border-box;
}
.input-wrapper.with-icon .icon {
  position: absolute;
  border-radius: 6px;
  height: 20px;
  width: 20px;
  font-size: var(--font-size-20);
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-light-gray-50);
  cursor: pointer;
}
.input-wrapper.with-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.input-wrapper.with-text:not(input) {
  color: #494E55;
  font-size: var(--font-size-14);
}
.input-wrapper {
  /* 확장형 input-wrapper */
}
.input-wrapper.expandable-input {
  width: 32px !important;
  height: 36px;
  position: relative;
}
.input-wrapper.expandable-input .input-text {
  padding-right: 0 !important;
  color: transparent;
}
.input-wrapper.expandable-input .icon {
  position: absolute;
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.input-wrapper.expandable-input .input-text::placeholder {
  opacity: 0;
}
.input-wrapper.expandable-input:focus-within {
  width: 100% !important;
  text-align: center;
}
.input-wrapper.expandable-input:focus-within .icon {
  left: auto;
  right: 0.75rem;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.input-wrapper.expandable-input:focus-within .input-text {
  color: inherit;
}
.input-wrapper.expandable-input:focus-within .input-text::placeholder {
  opacity: 1;
}
.input-wrapper {
  /* 자동완성 */
}
.input-wrapper.auto-complete.active .auto-complete-wrapper {
  display: block;
}
.input-wrapper.auto-complete .auto-complete-wrapper {
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  max-height: 300px;
  background-color: #fff;
  border-radius: 10px;
  padding: 5px;
  font-size: 14px;
  color: #9AA0AE;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  overflow: auto;
}
.input-wrapper.auto-complete .auto-complete-wrapper::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.input-wrapper.auto-complete .auto-complete-wrapper::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.input-wrapper.auto-complete .auto-complete-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.input-wrapper.auto-complete .auto-complete-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.input-wrapper.auto-complete .auto-complete-wrapper::-webkit-scrollbar-button:start:decrement, .input-wrapper.auto-complete .auto-complete-wrapper::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .input-wrapper.auto-complete .auto-complete-wrapper {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.input-wrapper.auto-complete .auto-complete-wrapper {
  display: none;
  border: 1px solid #E2E6EB;
}
.input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item {
  min-height: 34px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px;
  cursor: pointer;
  word-break: break-all;
}
.input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item:not(:last-child) {
  margin-bottom: 4px;
}
.input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item.active, .input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item:hover {
  background-color: #F7F8FA;
  color: #000;
}
.input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item.no-result {
  cursor: default;
  color: #5B6673;
}
.input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item.no-result.active, .input-wrapper.auto-complete .auto-complete-wrapper .auto-complete-item.no-result:hover {
  background-color: transparent;
  color: inherit;
}

/* 셀렉트박스 */
.select-box-wrapper {
  display: inline-block;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}
.select-box-wrapper select:has(option[value=""]:checked) {
  color: var(--color-light-gray-100);
}
.select-box-wrapper select.f_login_type_change:has(option[value=""]:checked) {
  color: #494E55;
}
.select-box-wrapper .select-box {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--color-light-gray-0) url("/img/icon/keyboard-arrow-down.svg") no-repeat right 12px center;
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 110px;
  padding: 0 12px;
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-light-gray-10);
  outline: none;
  font-size: var(--font-size-14);
  font-weight: 400;
  white-space: nowrap;
}
.select-box-wrapper .select-box:focus {
  border-color: var(--color-light-primary-50);
}
.select-box-wrapper .select-box:disabled {
  background-color: var(--color-light-gray-5);
  border-color: var(--color-light-gray-10);
  cursor: not-allowed;
}
.select-box-wrapper .select-box option {
  color: var(--color-light-gray-70);
  font-weight: 400;
}
.select-box-wrapper.with-icon {
  position: relative;
}
.select-box-wrapper.with-icon .select-box {
  padding: 0 30px;
}
.select-box-wrapper.with-icon .icon, .select-box-wrapper.with-icon svg {
  position: absolute;
  left: 10px;
  top: 50%;
  height: 16px;
  width: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--font-size-16);
}

.custom-select-box-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  min-width: 0;
}
.custom-select-box-wrapper.active .select-label {
  border-color: #118DFF;
}
.custom-select-box-wrapper.active .select-option-wrapper {
  display: block;
}
.custom-select-box-wrapper.is-top .select-option-wrapper {
  top: auto;
  bottom: 45px;
}
.custom-select-box-wrapper button.select-label {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--color-light-gray-0) url("/img/icon/keyboard-arrow-down.svg") no-repeat right 12px center;
  height: 36px;
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-light-gray-10);
  outline: none;
  font-size: var(--font-size-14);
  font-weight: 400;
  position: relative;
  color: #000;
  min-width: 0;
  width: 100%;
}
.custom-select-box-wrapper button.select-label:focus {
  border-color: #118DFF;
}
.custom-select-box-wrapper button.select-label .item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 20px;
  user-select: none;
}
.custom-select-box-wrapper .select-option-wrapper {
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  max-height: 300px;
  background-color: #fff;
  border-radius: 10px;
  padding: 5px;
  font-size: 14px;
  color: #9AA0AE;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  z-index: 500;
  overflow: auto;
}
.custom-select-box-wrapper .select-option-wrapper::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.custom-select-box-wrapper .select-option-wrapper::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.custom-select-box-wrapper .select-option-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.custom-select-box-wrapper .select-option-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.custom-select-box-wrapper .select-option-wrapper::-webkit-scrollbar-button:start:decrement, .custom-select-box-wrapper .select-option-wrapper::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .custom-select-box-wrapper .select-option-wrapper {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.custom-select-box-wrapper .select-option-wrapper {
  display: none;
  border: 1px solid #E2E6EB;
}
.custom-select-box-wrapper .select-option-wrapper .select-option-item {
  min-height: 34px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px;
  cursor: pointer;
}
.custom-select-box-wrapper .select-option-wrapper .select-option-item .item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  user-select: none;
}
.custom-select-box-wrapper .select-option-wrapper .select-option-item:not(:last-child) {
  margin-bottom: 4px;
}
.custom-select-box-wrapper .select-option-wrapper .select-option-item:hover {
  background-color: #F7F8FA;
  color: #000;
}
.custom-select-box-wrapper .select-option-wrapper .select-option-item.active {
  color: #118DFF;
  font-weight: 600;
}
.custom-select-box-wrapper .select-option-wrapper .select-option-item-group .item-group-title {
  min-height: 34px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px;
  color: #5B6673;
  font-size: 12px;
  font-weight: 600;
}

/* 파일 업로드 */
.file-upload-container {
  display: flex;
  gap: 10px !important;
}
.file-upload-container .upload-btn {
  padding: 10px;
}
.file-upload-container:has(.file-list) {
  align-items: flex-start !important;
  width: 100%;
}
.file-upload-container:has(.file-list):has(.upload-btn) .content-scroll {
  padding: 8px 0 8px;
}
.file-upload-container.uploaded .input-wrapper .input-text[readonly] {
  color: #000;
}
.file-upload-container.uploaded .clear-btn {
  display: flex;
}
.file-upload-container input[type=file],
.file-upload-container .clear-btn {
  justify-content: center;
  align-items: center;
  display: none;
}
.file-upload-container .file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.file-upload-container .file-list * {
  line-height: 14px;
}
.file-upload-container .file-list .file-item {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 20px;
}
.file-upload-container .file-list .file-item.empty {
  color: #9AA0AE;
}
.file-upload-container .file-list .file-item > * {
  line-height: 20px;
}
.file-upload-container .file-list .file-item .file-name {
  display: inline-block;
  font-size: 14px;
}
.file-upload-container .file-list .file-item .pale {
  flex-shrink: 0;
}
.file-upload-container .file-list .file-item .btn-icon {
  position: relative;
  top: 1px;
}

/* input 태그(타입 공통) 선택 값 불러오는 박스 */
.value-box {
  font-size: var(--font-size-14);
  background-color: #F5F5F5;
  color: #494E55;
  border: 1px solid #E4E4E7;
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  width: 100%;
}
.value-box.check-value-box {
  width: fit-content;
}
.value-box.check-value-box .round-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
}
.value-box .value-text {
  line-height: 1;
}

/* block-container */
.block-container {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #E4E4E7;
  background-color: #F5F5F5;
  gap: 10px;
}
.block-container .block-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 5px;
  background-color: #fff;
  border: 1px solid #DDD;
  border-radius: 6px;
  min-width: 80px;
  padding: 9px 12px;
  color: #A8AAAD;
  font-size: var(--font-size-12);
}
.block-container .block-item span:first-child {
  color: #737A7C;
  font-weight: 500;
}
.block-container .block-item.active {
  border-color: #1641FF;
  color: #000;
}
.block-container .block-item.active span:first-child {
  color: #000;
}

/* clock-btn-container */
.clock-btn-container {
  width: var(--first-el-width);
  display: flex;
  justify-content: space-between;
  row-gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid #D9D9D9;
  background-color: #fff;
  border-radius: 8px;
}
.clock-btn-container .clock-btn {
  border: none;
  width: 50px;
}
.clock-btn-container .clock-btn span {
  color: #494E55;
  font-weight: 500;
}
.clock-btn-container .clock-btn.active {
  background-color: #1641FF;
  color: #fff;
}
.clock-btn-container .clock-btn.active span {
  color: #fff;
}

/* label 내 input-wrapper */
label .input-wrapper.total-num {
  max-width: 105px;
}

/* picker-panel (사용자 선택 가능/불가 제어 가능 요소) */
.picker-panel {
  padding: 14px 20px;
  border: 1px solid #E4E4E7;
  background-color: var(--color-light-gray-0);
  width: 100%;
  border-radius: 8px;
  min-height: 295px;
}
.picker-panel.is-disabled {
  pointer-events: none;
  background-color: #F5F5F5;
}
.picker-panel.is-muted {
  background-color: #F5F5F5;
}
.picker-panel ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.picker-panel .picker-item {
  font-size: var(--font-size-14);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 100%;
}
.picker-panel .picker-item.target::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url("/img/icon/check_icon.svg");
  background-size: cover;
  background-color: #1641FF;
  border-radius: 50%;
}
.picker-panel .picker-item.selected {
  color: var(--color-light-primary-50);
}
.picker-panel .picker-item.selected * {
  color: var(--color-light-primary-50) !important;
}

/* check-item-wrapper */
.check-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-item-wrapper .check-item {
  color: #9AA0AE;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-14);
}
.check-item-wrapper .check-item.checked {
  color: #118DFF;
}
.check-item-wrapper .check-item .round-icon {
  font-weight: 600;
}

/* 상단 검색 영역 text input에 초기화 버튼  */
.header .input-wrapper .clear-btn {
  display: none;
}
.header .input-wrapper .clear-btn .sprite-icon {
  color: #667085;
}
.header .input-wrapper .input-text:not(:placeholder-shown) + .clear-btn {
  display: block;
}

.tag-row-container .input-wrapper:has(.f_input_reset) .input-text,
.header .toggle-container .input-wrapper:has(.f_input_reset) .input-text {
  padding-right: 30px;
}
.tag-row-container .input-wrapper .clear-btn,
.header .toggle-container .input-wrapper .clear-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

/* ================================
SVG Sprite Icon System
================================ */
.sprite-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
  /* ----------------
  Size
  ---------------- */
}
.sprite-icon.size-6 {
  width: 6px !important;
  height: 6px !important;
}
.sprite-icon.size-8 {
  width: 8px !important;
  height: 8px !important;
}
.sprite-icon.size-12 {
  width: 12px !important;
  height: 12px !important;
}
.sprite-icon.size-14 {
  width: 14px !important;
  height: 14px !important;
}
.sprite-icon.size-16 {
  width: 16px !important;
  height: 16px !important;
}
.sprite-icon.size-17 {
  width: 17px !important;
  height: 17px !important;
}
.sprite-icon.size-18 {
  width: 18px !important;
  height: 18px !important;
}
.sprite-icon.size-20 {
  width: 20px !important;
  height: 20px !important;
}
.sprite-icon.size-23 {
  width: 23px !important;
  height: 23px !important;
}
.sprite-icon.size-24 {
  width: 24px !important;
  height: 24px !important;
}
.sprite-icon.size-26 {
  width: 26px !important;
  height: 26px !important;
}
.sprite-icon.size-32 {
  width: 32px !important;
  height: 32px !important;
}
.sprite-icon.size-40 {
  width: 40px !important;
  height: 40px !important;
}
.sprite-icon.size-48 {
  width: 48px !important;
  height: 48px !important;
}

use[href$="#icon-reset"] {
  color: #494E55;
}

/** nav **/
.nav svg:has(use[href$="#icon-supervisor-account"]) {
  width: 23px !important;
  height: 23px !important;
}

.nav svg:has(use[href$="#icon-tag"]) {
  width: 24px !important;
  height: 24px !important;
}

.nav svg:has(use[href$="#icon-handyman"]) {
  width: 20px !important;
  height: 20px !important;
}

.nav svg:has(use[href$="#icon-dns"]) {
  width: 22px !important;
  height: 22px !important;
}

.nav svg:has(use[href$="#icon-browse-gallery"]) {
  width: 20px !important;
  height: 20px !important;
}

.nav svg:has(use[href$="#icon-handshake"]) {
  width: 20px !important;
  height: 20px !important;
}

/* modal-open 시 컨텐츠 스크롤 제거 */
body.modal-open {
  overflow: hidden; /* 스크롤 제거 */
  height: 100%; /* 모바일에서 스크롤 방지 */
}

.modal-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  overflow-x: auto;
}
.modal-bg::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
.modal-bg::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.modal-bg::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.modal-bg::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.modal-bg::-webkit-scrollbar-button:start:decrement, .modal-bg::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .modal-bg {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.modal-bg.show {
  display: block;
}
.modal-bg .modal-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: absolute;
  width: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-bg .modal-wrapper .modal-inner {
  width: 100%;
  position: static;
  transform: translate(0, 0);
  max-width: 100%;
}
.modal-bg .modal-wrapper .modal-inner:first-child {
  z-index: 1;
}
.modal-bg .modal-inner {
  width: 55%;
  max-width: 500px;
  min-width: 300px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px 30px;
}
@media screen and (max-width: 300px) {
  .modal-bg .modal-inner {
    transform: translate(0, -50%);
    left: 0px;
  }
}
@media screen and (max-width: 400px) {
  .modal-bg .modal-inner.min-w400 {
    transform: translate(0, -50%);
    left: 0px;
  }
}
.modal-bg .modal-inner:has(.content-scroll) {
  padding: 25px 20px 25px 30px;
}
.modal-bg .modal-inner button {
  padding: 10px 12px;
}
.modal-bg .modal-inner button.btn-icon {
  padding: 0;
}
.modal-bg .modal-inner .modal-header {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.modal-bg .modal-inner .modal-header .header-text {
  font-size: 18px;
  font-weight: 600;
}
.modal-bg .modal-inner .modal-contents {
  margin-bottom: 40px;
}
.modal-bg .modal-inner .modal-contents .content-scroll {
  padding-right: 8px;
}
.modal-bg .modal-inner .modal-contents .content-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.modal-bg .modal-inner .modal-contents .content-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.modal-bg .modal-inner .modal-contents .content-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.modal-bg .modal-inner .modal-contents .content-scroll::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.modal-bg .modal-inner .modal-contents .content-scroll::-webkit-scrollbar-button:start:decrement, .modal-bg .modal-inner .modal-contents .content-scroll::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .modal-bg .modal-inner .modal-contents .content-scroll {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.modal-bg .modal-inner .modal-contents .contents-text {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.modal-bg .modal-inner .modal-contents .contents-text .count {
  color: #118DFF;
}
.modal-bg .modal-inner .modal-contents .contents-img .business-card-img {
  max-width: 508px;
  aspect-ratio: 1.75/1;
  padding: 20px;
  border-radius: 12px;
  background-color: #FFF;
  border: 1px solid #E2E6EB;
}
.modal-bg .modal-inner .modal-contents .contents-img .business-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-bg .modal-inner .modal-contents table {
  border-radius: 0;
}
.modal-bg .modal-inner .modal-contents .field-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-bg .modal-inner .modal-contents .field-container.horizontal {
  flex-direction: row;
  gap: 0;
  min-height: 56px;
  border-bottom: 1px solid #E2E6EB;
  padding: 10px 0;
}
.modal-bg .modal-inner .modal-contents .field-container.horizontal.no-border {
  border-bottom: 0;
}
.modal-bg .modal-inner .modal-contents .field-container.horizontal .field-title {
  width: min(10vw, 170px);
  flex-shrink: 0;
}
.modal-bg .modal-inner .modal-contents .field-container.table-field-container:last-child {
  margin-top: 40px;
}
.modal-bg .modal-inner .modal-contents .field-container.table-field-container .field-title {
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 7px;
}
.modal-bg .modal-inner .modal-contents .field-container .field-title .chip {
  height: 20px;
  font-size: 14px;
}
.modal-bg .modal-inner .modal-contents .field-container .text-wrapper {
  font-size: 14px;
  word-break: break-all;
  padding: 10px 0;
}
.modal-bg .modal-inner .modal-contents .field-container .content-list {
  padding: 10px 0;
  gap: 10px;
}
.modal-bg .modal-inner .modal-contents .field-container .content-list .text-wrapper {
  padding: 0;
}
.modal-bg .modal-inner .modal-contents .field-container .input-wrapper {
  width: 100%;
}
.modal-bg .modal-inner .modal-contents .field-container .input-wrapper textarea {
  width: 100%;
}
.modal-bg .modal-inner .modal-contents .field-container .field-group {
  flex-shrink: 1;
  justify-content: flex-end;
}
.modal-bg .modal-inner .modal-contents .field-container .field-group .input-wrapper {
  width: auto;
}
.modal-bg .modal-inner .modal-contents .field-container .field-group.file-upload-container {
  padding: 0;
}
.modal-bg .modal-inner .modal-contents .field-container .text-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.modal-bg .modal-inner .modal-contents .field-container .text-box {
  font-size: 14px;
  display: flex;
  gap: 7px;
  min-height: 20px;
  word-break: break-all;
}
.modal-bg .modal-inner .modal-contents .field-container .text-box .sprite-icon {
  color: #9AA0AE;
}
.modal-bg .modal-inner .modal-contents .field-title {
  font-size: 14px;
  width: 100%;
  align-self: flex-start;
  min-height: 36px;
  line-height: 36px;
}
.modal-bg .modal-inner .modal-contents .field-title .title-text {
  white-space: wrap;
  word-break: break-all;
}
.modal-bg .modal-inner .modal-contents .field-title .title-text.title-dot::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #F43F5E;
  margin-left: 3px;
}
.modal-bg .modal-inner .modal-contents .field-title .description {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #667085;
}
.modal-bg .modal-inner .modal-contents .history-container {
  max-height: 440px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #E2E6EB;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .chip {
  height: 26px;
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .main-text-box {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .main-text-box * {
  min-width: 0;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .main-text-box .main-text {
  align-self: center;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .sub-text-box {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #5B6673;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .sub-text-box * {
  min-width: 0;
}
.modal-bg .modal-inner .modal-contents .history-container .history-box .sub-text-box .date-text {
  flex-shrink: 0;
}
.modal-bg .modal-inner .modal-bottom {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-bg .modal-inner .modal-bottom button, .modal-bg .modal-inner .modal-bottom .button {
  min-width: 56px;
  padding: 10px 12px;
  height: 40px;
  font-size: 14px;
}

/* 확장형 모달 */
.expandable-modal-container {
  overflow-x: auto;
}
.expandable-modal-container::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
.expandable-modal-container::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.expandable-modal-container::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.expandable-modal-container::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.expandable-modal-container::-webkit-scrollbar-button:start:decrement, .expandable-modal-container::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .expandable-modal-container {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.expandable-modal-container.expanded .expand-btn {
  display: none;
}
.expandable-modal-container.expanded .expand-modal-inner {
  visibility: visible !important;
  width: 40% !important;
}
.expandable-modal-container.expanded .expand-modal-inner > * {
  opacity: 1 !important;
}
.expandable-modal-container .modal-inner-wrap {
  display: flex;
  gap: 70px;
  width: 80%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 850px;
  padding: 0 30px;
}
@media screen and (max-width: 850px) {
  .expandable-modal-container .modal-inner-wrap {
    transform: translate(0, -50%);
    left: 0px;
  }
}
.expandable-modal-container .modal-inner-wrap .modal-inner {
  position: relative;
  top: auto;
  left: auto;
  transform: translate(0, 0);
}
.expandable-modal-container .modal-inner-wrap .modal-inner.expand-modal-inner {
  min-width: auto;
  width: 0;
  transition: width 0.2s ease-in-out;
  visibility: hidden;
}
.expandable-modal-container .modal-inner-wrap .modal-inner.expand-modal-inner > * {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  transition-delay: 0.2s;
}
.expandable-modal-container .modal-inner-wrap .modal-inner .expand-btn, .expandable-modal-container .modal-inner-wrap .modal-inner .fold-btn {
  position: absolute;
  width: 30px;
  height: 60px;
  top: 25px;
  background-color: #fff;
}
.expandable-modal-container .modal-inner-wrap .modal-inner .expand-btn.expand-btn, .expandable-modal-container .modal-inner-wrap .modal-inner .fold-btn.expand-btn {
  left: 0;
  transform: translate(-97%, 0);
  border-radius: 15px 0 0 15px;
}
.expandable-modal-container .modal-inner-wrap .modal-inner .expand-btn.fold-btn, .expandable-modal-container .modal-inner-wrap .modal-inner .fold-btn.fold-btn {
  right: 0;
  transform: translate(97%, 0);
  border-radius: 0 15px 15px 0;
}

.pagination-container {
  padding-top: 20px;
}
.pagination-container .pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.pagination-container .pagination .page-item.active button {
  color: #118DFF;
  font-weight: 600;
}
.pagination-container .pagination .page-item button {
  font-size: 14px;
  padding: 0px;
  min-width: 20px;
  height: 17px;
  color: #9AA0AE;
  font-weight: 400;
}
.pagination-container .pagination .page-item button.icon {
  color: #000000;
}

/* 라인탭 container - list 테이블 페이지에서 사용 */
.line-tab-container {
  min-height: 0;
  flex-grow: 1;
  padding: 20px 18px 0 30px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.line-tab-container .button-row-container button {
  height: 36px;
  padding: 10px;
}
.line-tab-container .button-row-container button.btn-icon {
  padding: 8px;
}
.line-tab-container .tag-row-container {
  padding: 0;
}
.line-tab-container .tab-panel {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  min-height: 0;
  flex-grow: 1;
}
.line-tab-container .tab-panel .title-container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}
.line-tab-container .tab-panel .title-container .title-box {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.line-tab-container .tab-panel .title-container .title-box .title-text {
  font-size: 16px;
  font-weight: 600;
}
.line-tab-container .tab-panel .title-container .title-box .chip {
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
  min-width: 30px;
}
.line-tab-container .tab-panel .top-box-container .input-wrapper {
  display: flex;
  width: 50%;
  gap: 10px;
}
.line-tab-container .tab-panel .bottom-box-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.line-tab-container .tab-panel > .content-scroll {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  min-height: 0;
  flex-grow: 1;
}
.line-tab-container .tab-panel > .content-scroll .sticky-table-container {
  overflow: scroll;
}

/* line-tab-container 외에도 line-tab 버튼은 사용 가능하도록 밖에 작성 */
.tab-btn-row {
  display: flex;
}
.tab-btn-row .line-tab {
  padding: 0 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E6E8ED;
  color: #9AA0AE;
  display: flex;
  gap: 7px;
  border-radius: 0;
  height: 40px;
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.tab-btn-row .line-tab::after {
  content: "";
  display: none;
  width: 100%;
  height: 3px;
  background-color: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
}
.tab-btn-row .line-tab.active {
  border-color: transparent;
  color: #000;
}
.tab-btn-row .line-tab.active::after {
  display: block;
}
.tab-btn-row .line-tab:hover::before {
  display: none;
}

/* tab-panel on/off 처리 */
.tab-panel:not(.active) {
  display: none !important;
}

/* 고정헤드가 있는 테이블 컨테이너 (스크롤 시 고정) */
.sticky-table-container {
  overflow-y: auto;
}
.sticky-table-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.sticky-table-container::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.sticky-table-container::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.sticky-table-container::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.sticky-table-container::-webkit-scrollbar-button:start:decrement, .sticky-table-container::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .sticky-table-container {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.sticky-table-container {
  flex-grow: 1;
}
.sticky-table-container.horizontal {
  overflow-x: auto;
  width: 100%;
}
.sticky-table-container.horizontal table {
  width: 100%;
}
.sticky-table-container .table {
  overflow-y: auto;
  width: 100%;
  border: none;
}
.sticky-table-container .table th {
  position: sticky;
  top: 0px;
  z-index: 20;
  background: var(--color-table-header-bg);
}
.sticky-table-container .table.type-2 th {
  background: var(--color-light-gray-5);
}

/* 테이블 영역 스크롤 */
.scroll-table-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-table-container::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.scroll-table-container::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.scroll-table-container::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.scroll-table-container::-webkit-scrollbar-button:start:decrement, .scroll-table-container::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .scroll-table-container {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.scroll-table-container.horizontal {
  overflow-x: auto;
  max-width: 100%;
}
.scroll-table-container.horizontal .table {
  min-width: 100%;
  width: max-content;
  margin-bottom: 10px;
}

/* 테이블 */
.table {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
  /* 사이즈 고정 컬럼 */
}
.table .col-chip {
  width: 300px !important;
}
.table.shadow {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1215686275);
}
.table .delete-icon,
.table .add-icon {
  cursor: pointer;
}
.table button:has(.delete-icon):hover::before,
.table button:has(.add-icon):hover::before {
  background: rgba(0, 0, 0, 0) !important;
}
.table thead {
  background-color: var(--color-table-header-bg);
}
.table thead * {
  align-items: center;
}
.table th {
  vertical-align: middle;
  position: relative;
  width: fit-content;
  height: 40px;
  font-weight: 600;
  color: var(--color-light-gray-100);
  font-size: var(--font-size-14);
  letter-spacing: -0.35px;
  line-height: 19.6px;
  padding: 6px 10px;
  border-top: 1px solid var(--color-table-border);
  border-bottom: 1px solid var(--color-table-border);
}
.table th > * {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.table th.align-left {
  text-align: left;
}
.table th.align-left > * {
  justify-content: flex-start;
}
.table th.align-right {
  text-align: right;
}
.table th.align-right * {
  justify-content: flex-end;
}
.table th.align-center {
  text-align: center;
}
.table th .date-text {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 400;
  font-size: var(--font-size-13);
  color: #494E55;
}
.table tbody .empty-row * {
  color: var(--color-light-gray-40);
}
.table tbody .count-row {
  background-color: var(--color-light-gray-5);
  font-weight: 500;
}
.table tbody tr {
  display: table-row;
}
.table tbody tr.dataline:hover {
  background-color: #F8FAFD;
}
.table tbody tr.dataline:hover:has(button:hover) {
  background-color: transparent !important;
}
.table tbody tr {
  /* rowspan 테이블 hover 색상 처리 */
}
.table tbody tr.dataline.hover {
  background-color: #F8FAFD;
}
.table tbody td {
  padding: 7px 10px;
  height: 50px;
  border-bottom: 1px solid var(--color-table-border);
  color: var(--color-light-gray-90);
  font-size: var(--font-size-14);
}
.table tbody td.fix-tip-btn {
  display: table-cell;
}
.table tbody td .div-wrapper,
.table tbody td .input-wrapper,
.table tbody td .button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.table tbody td .div-wrapper.vertical,
.table tbody td .input-wrapper.vertical,
.table tbody td .button-wrapper.vertical {
  flex-direction: column;
}
.table tbody td .text-wrapper {
  width: 100%;
  word-break: break-all;
}
.table tbody td .text-wrapper.no-ellipsis {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
.table tbody td .text-wrapper.width-fit {
  width: fit-content;
}
.table tbody td .button-wrapper {
  display: flex;
  gap: 7px;
}
.table tbody td .text-muted {
  color: #9AA0AE;
}
.table tbody td .flag-wrap {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.table tbody td .chip {
  height: 26px;
  line-height: 26px;
  padding: 2px 6px;
}
.table tbody td .chip .chip-text {
  line-height: 26px;
}
.table tbody td .compare-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.table tbody td .compare-wrapper.vertical {
  flex-direction: column;
}
.table tbody td .compare-wrapper .round-icon {
  font-weight: 500;
}
.table tbody td .compare-wrapper .text-wrapper {
  width: fit-content;
  color: #000;
  width: 40px;
  text-align: left;
}
.table tbody td .compare-wrapper.match {
  color: #1641FF;
}
.table tbody td .compare-wrapper.diff {
  color: #FF1B1B;
}
.table tbody td:has(.view-container) {
  vertical-align: top;
}
.table tbody td:has(.view-container) .view-container {
  min-height: 500px;
  align-items: flex-start;
}
.table tbody td.align-left {
  text-align: left;
}
.table tbody td.align-left .div-wrapper,
.table tbody td.align-left .button-wrapper {
  justify-content: start;
}
.table tbody td.align-left .div-wrapper *,
.table tbody td.align-left .button-wrapper * {
  text-align: left;
}
.table tbody td.align-right {
  text-align: right;
}
.table tbody td.align-right .div-wrapper {
  justify-content: end;
}
.table tbody td.align-right .div-wrapper * {
  text-align: right;
}
.table tbody td.align-center {
  text-align: center;
}
.table tbody td.align-center .div-wrapper {
  justify-content: center;
}
.table tbody td.align-center .div-wrapper * {
  text-align: center;
}
.table tbody td {
  /* 썸네일 */
}
.table tbody td .div-wrapper:has(.thumbnail) {
  gap: 5px;
}
.table tbody td .thumbnail {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.table tbody td .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.table tbody td:has(.delete-icon) .icon-wrapper {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}
.table tbody td:has(.delete-icon) .icon-wrapper:hover {
  background-color: var(--color-light-gray-5);
}
.table tbody.row-group.is-expanded .sub-row {
  visibility: visible;
}
.table tbody.row-group .sub-row {
  visibility: collapse;
}
.table .empty-row {
  display: table-row;
}
.table .disabled {
  color: #cccccc !important;
}
.table .disabled .text-wrapper {
  color: #cccccc;
}

/* 테이블 type-2 */
.table.type-2 {
  border-radius: 10px 10px 0 0;
}
.table.type-2 thead {
  background-color: var(--color-light-gray-5);
}
.table.type-2 th {
  color: var(--color-light-gray-100);
  border-width: 2px;
}
.table.type-2 tbody:last-child tr:last-child td {
  border-width: 2px;
}

/* 라벨-값 형태의 테이블 */
.table.vertical {
  border-radius: 0;
  border-collapse: collapse;
  border-top: 1px solid var(--color-table-border);
  border-bottom: 1px solid var(--color-table-border);
}
.table.vertical tbody.conditional-block {
  display: table-row-group;
}
.table.vertical tbody:nth-of-type(1) tr:nth-of-type(1) {
  border-top: none;
}
.table.vertical tbody tr {
  border-top: 1px solid var(--color-table-border);
}
.table.vertical th, .table.vertical td {
  text-align: left;
  padding: 10px 17px;
  border: none;
  color: var(--color-light-gray-90);
  font-size: var(--font-size-14);
  height: 60px;
}
.table.vertical th {
  color: #000;
  font-weight: 600;
  font-size: 14px;
  vertical-align: top;
  line-height: 39px;
}
.table.vertical td > * {
  display: flex;
  align-items: center;
  gap: 7px;
}
.table.vertical td > *.flex-col {
  align-items: flex-start;
}
.table.vertical td span {
  min-width: 0;
}
.table.vertical td .div-wrapper {
  justify-content: flex-start;
  padding: 3px 0;
}
.table.vertical td .div-wrapper.vertical {
  padding: 10px 0;
}
.table.vertical td .div-wrapper.vertical:has(.input-wrapper) {
  padding: 0;
}
.table.vertical td .div-wrapper:has(.chip):not(:has(.text-wrapper)) {
  flex-wrap: wrap;
}
.table.vertical td > .text-wrapper, .table.vertical td ul {
  padding: 10px 0;
}
.table.vertical td .file-upload-container:not(:has(.upload-btn)) {
  padding: 10px 0;
}

.table tr.group-start td,
.table tr.group-middle td {
  border-bottom: 0;
}

.table td[rowspan] {
  position: relative;
}

.table tr.group-end td {
  border-bottom: 1px solid var(--color-table-border);
}

.table td[rowspan]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-table-border);
}

/* 계층 구조 ul table */
ul.tree-table {
  width: 100%;
  white-space: nowrap;
  font-size: 0;
  border-bottom: 1px solid var(--color-table-border);
}
ul.tree-table .col {
  vertical-align: top;
  line-height: 1.4;
  font-size: var(--font-size-14);
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
}
ul.tree-table .col .node {
  display: flex;
  gap: 8px;
}
ul.tree-table .col.empty {
  width: 100%;
  border-bottom: none;
  text-align: center;
}
ul.tree-table {
  /* 각 col 크기는 페이지별로 셋팅해줘야 함 */
}
ul.tree-table .col-1 {
  width: 70%;
}
ul.tree-table .col-2 {
  width: 30%;
}
ul.tree-table li.row-header {
  position: relative;
  font-weight: 600;
  color: var(--color-light-gray-90);
  letter-spacing: -0.35px;
  border-bottom: 2px solid var(--color-table-border);
  width: 100%;
  background-color: var(--color-light-gray-5);
  border-radius: 8px 8px 0 0;
}
ul.tree-table li.row-header .col {
  color: var(--color-light-gray-70);
  line-height: 1.4;
}
ul.tree-table li.row-contents .col {
  border-bottom: 1px solid var(--color-table-border);
}
ul.tree-table li:has(> ul) > span.col-1::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-image: url(/img/icon/chevron-forward.svg);
  background-size: cover;
  background-position: center;
  position: relative;
  top: 2px;
}
ul.tree-table li:has(> ul) .depth-1 > li .col-1 {
  padding-left: 30px;
}
ul.tree-table li:has(> ul) .depth-2 > li .col-1 {
  padding-left: 50px;
}
ul.tree-table li:has(> ul) .depth-3 > li .col-1 {
  padding-left: 70px;
}
ul.tree-table li:has(> ul) .depth-4 > li .col-1 {
  padding-left: 90px;
}
ul.tree-table li:has(> ul) .depth-5 > li .col-1 {
  padding-left: 110px;
}
ul.tree-table li:has(> ul) .depth-6 > li .col-1 {
  padding-left: 130px;
}
ul.tree-table li:has(> ul) .depth-7 > li .col-1 {
  padding-left: 150px;
}
ul.tree-table li:has(> ul) .depth-8 > li .col-1 {
  padding-left: 170px;
}
ul.tree-table li:has(> ul) .depth-9 > li .col-1 {
  padding-left: 190px;
}
ul.tree-table li:has(> ul) .depth-10 > li .col-1 {
  padding-left: 210px;
}

/* 열고 닫기 가능한 grid table */
/* 첫번째 col에 div-wrapper 반드시 존재해야 함 (before요소 아이콘 부모)*/
.grid-tree-table-container {
  border-radius: 8px 8px 0 0;
  font-size: 14px;
}
.grid-tree-table-container .grid-scroll {
  overflow: auto;
}
.grid-tree-table-container .grid-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.grid-tree-table-container .grid-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.grid-tree-table-container .grid-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.grid-tree-table-container .grid-scroll::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.grid-tree-table-container .grid-scroll::-webkit-scrollbar-button:start:decrement, .grid-tree-table-container .grid-scroll::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .grid-tree-table-container .grid-scroll {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.grid-tree-table-container .grid-tree-table {
  position: relative;
}
.grid-tree-table-container .grid-tree-table .row {
  display: grid;
  grid-template-columns: 21%;
  /* 컬럼별 고정크기 있어야 하는경우 하단 코드 초기화후 사용 */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--color-table-border);
  min-height: 40px;
  padding: 0 16px;
  align-items: center;
  cursor: pointer;
}
.grid-tree-table-container .grid-tree-table .row .col {
  text-align: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.grid-tree-table-container .grid-tree-table .row .col.align-left {
  justify-content: flex-start;
  text-align: left;
}
.grid-tree-table-container .grid-tree-table .row-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--color-light-gray-0);
  color: var(--color-gray-100);
  font-weight: 600;
  border-bottom: 1px solid var(--color-table-border);
  border-radius: 8px 8px 0 0;
}
.grid-tree-table-container .grid-tree-table .row-contents li.node .depth {
  display: none;
}
.grid-tree-table-container .grid-tree-table .row-contents li.node.expanded > .row {
  background-color: #E8ECFF;
  /* fixed table로 인해 col 색도 변경 */
}
.grid-tree-table-container .grid-tree-table .row-contents li.node.expanded > .row > .col {
  background-color: #E8ECFF;
}
.grid-tree-table-container .grid-tree-table .row-contents li.node.expanded > .depth {
  display: block;
}
.grid-tree-table-container .grid-tree-table .row-contents .div-wrapper {
  display: flex;
  width: 100%;
  position: relative;
  gap: 7px;
}
.grid-tree-table-container .grid-tree-table .row-contents .text-wrapper {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-tree-table-container .grid-tree-table .row-contents .text-wrapper.no-ellipsis {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
.grid-tree-table-container .grid-tree-table .row-contents .text-wrapper.width-fit {
  width: fit-content;
}
.grid-tree-table-container .grid-tree-table .row-contents {
  /* 총합 row */
}
.grid-tree-table-container .grid-tree-table .row-contents.count-row .row {
  background-color: var(--color-light-gray-5);
  border-bottom: 2px solid #D9D9D9;
  font-weight: 600;
}
.grid-tree-table-container .grid-tree-table .row-contents.count-row .row .col {
  background-color: var(--color-light-gray-5);
}
.grid-tree-table-container .grid-tree-table .row-header .fix-left {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: var(--color-light-gray-5);
  border-right: 2px solid var(--color-table-border);
  width: 111px;
}
.grid-tree-table-container .grid-tree-table .row-contents .fix-left {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: #fff;
  border-right: 2px solid var(--color-table-border);
  width: 111px;
}
.grid-tree-table-container .grid-tree-table {
  /*********************************
             가상 아이콘 제어
  **********************************/
}
.grid-tree-table-container .grid-tree-table li.node {
  /* 확장 가능한 트리가 있는 li인 경우 */
}
.grid-tree-table-container .grid-tree-table li.node:has(.depth) > .row .col:first-child .div-wrapper::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: #494E55;
  background-image: url("/img/icon/add_icon.svg");
  background-size: cover;
  cursor: pointer;
  margin-right: 8px;
  position: absolute;
  top: 50%;
  left: -7px;
  transform: translate(-100%, -50%);
}
.grid-tree-table-container .grid-tree-table li.node:has(.depth) > .row > .col:first-child .div-wrapper::after {
  display: none !important;
}
.grid-tree-table-container .grid-tree-table li.node:has(.depth) .row .col:first-child {
  padding-left: 20px;
}
.grid-tree-table-container .grid-tree-table li.node.expanded:has(.depth) > .row .col:first-child .div-wrapper::before {
  border: 1px solid #D9D9D9;
  background-color: #ffffff;
  background-image: url("/img/icon/remove_icon.svg");
  background-size: cover;
}
.grid-tree-table-container .grid-tree-table ul.depth li.node > .row > .col:first-child .div-wrapper::after {
  content: "";
  display: block;
  margin-right: 8px;
  width: 8px;
  height: 16px;
  border-radius: 0 0 0 8px;
  border-left: 1px solid #E4E4E7;
  border-bottom: 1px solid #E4E4E7;
  position: absolute;
  top: -5px;
  left: -7px;
  transform: translate(-100%, 0);
}
.grid-tree-table-container .grid-tree-table .depth-1 .row .col:first-child {
  padding-left: 45px !important;
}
.grid-tree-table-container .grid-tree-table .depth-2 .row .col:first-child {
  padding-left: 65px !important;
}
.grid-tree-table-container .grid-tree-table .depth-3 .row .col:first-child {
  padding-left: 85px !important;
}
.grid-tree-table-container .grid-tree-table .depth-4 .row .col:first-child {
  padding-left: 105px !important;
}
.grid-tree-table-container .grid-tree-table .depth-5 .row .col:first-child {
  padding-left: 125px !important;
}
.grid-tree-table-container .grid-tree-table .depth-6 .row .col:first-child {
  padding-left: 145px !important;
}
.grid-tree-table-container .grid-tree-table .depth-7 .row .col:first-child {
  padding-left: 165px !important;
}
.grid-tree-table-container .grid-tree-table .depth-8 .row .col:first-child {
  padding-left: 185px !important;
}
.grid-tree-table-container .grid-tree-table .depth-9 .row .col:first-child {
  padding-left: 205px !important;
}
.grid-tree-table-container .grid-tree-table .depth-10 .row .col:first-child {
  padding-left: 225px !important;
}

/* table sort-order */
table .sort-order {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-light-gray-100);
  color: var(--color-light-gray-0);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-weight: 500;
  font-size: var(--font-size-10);
}

/* 테이블 마지막 행
  * 남은 높이 전체 차지하는 행이 필요한 경우
*/
/* vertical 형태 테이블 */
.table-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}
.table-box .last-row {
  display: flex;
  flex-grow: 1;
  border-top: 1px solid #E6E8EA;
  min-height: 0;
}
.table-box .last-row .col {
  padding: 10px 17px;
}
.table-box .last-row .th-col {
  color: #000;
  font-weight: 600;
  font-size: 14px;
  line-height: 40px;
  flex-shrink: 0;
}
.table-box .last-row .td-col {
  flex-grow: 1;
  min-width: 0;
}
.table-box .last-row .td-col:has(.content-scroll) {
  padding-right: 0;
}
.table-box .last-row .td-col .content-scroll {
  padding-right: 17px;
}
.table-box .last-row .td-col .content-scroll .text-wrapper {
  font-size: 14px;
}
.table-box .last-row .td-col .content-scroll > .text-wrapper {
  padding: 10px 0;
}
.table-box .last-row .td-col .view-container {
  height: 100%;
}
.table-box .last-row .td-col .view-container .view-box {
  height: 100%;
}
.table-box .last-row .td-col .view-container .view-box .content-scroll {
  padding-right: 17px;
}

/* 특정 버튼 선택 시 checkbox 컬럼 hidden/show 처리 */
/* 동작 필요한 button과 table 상위 요소에 .selection-mode-container 필요 */
.selection-mode-container.is-selection-active .show-on-active {
  display: block !important;
}
.selection-mode-container.is-selection-active .show-on-active:is(button) {
  display: flex !important;
}
.selection-mode-container.is-selection-active .show-on-inactive {
  display: none !important;
}
.selection-mode-container.is-selection-inactive .show-on-active {
  display: none !important;
}
.selection-mode-container.is-selection-inactive .show-on-inactive {
  display: block !important;
}
.selection-mode-container.is-selection-inactive .show-on-inactive:is(button) {
  display: flex !important;
}
.selection-mode-container.is-selection-inactive .table col:nth-of-type(1) {
  width: 0 !important;
  min-width: 0 !important;
}
.selection-mode-container.is-selection-inactive .table tr th:nth-of-type(1) {
  visibility: collapse;
}
.selection-mode-container.is-selection-inactive .table tr.dataline td:nth-of-type(1) {
  visibility: collapse;
}

/* 태그 */
.tag-row-container {
  padding: 20px 30px 0px;
  display: none;
}
.tag-row-container.show {
  display: block;
}
.tag-row-container .tag-header {
  font-size: 16px;
  color: #000;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 10px;
}
.tag-row-container .tag-row-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E8ED;
}
.tag-row-container .tag-row-inner .tag-container {
  display: none;
  min-width: 0;
  user-select: none;
}
.tag-row-container .tag-row-inner .tag-container .tag-inner.toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  background-color: var(--color-light-gray-0);
}
.tag-row-container .tag-row-inner .tag-container .tag-inner.toggle-btn:hover {
  background-color: #F7F8FA;
}
.tag-row-container .tag-row-inner .tag-container .separator {
  display: none;
}
.tag-row-container .tag-row-inner .tag-container .tag-group .chip {
  display: none;
}
.tag-row-container .tag-row-inner .tag-container.show {
  display: inline-flex;
}
.tag-row-container .tag-row-inner .tag-container.show .tag-inner.toggle-btn {
  border: 1px solid #11BDFF;
}
.tag-row-container .tag-row-inner .tag-container.show .tag-group .chip {
  display: none;
}
.tag-row-container .tag-row-inner .tag-container.show .tag-group .chip.show {
  display: inline-flex;
}
.tag-row-container .tag-row-inner .tag-container.show .separator {
  display: inline-block;
}
.tag-row-container .tag-row-inner .tag-container.show .tag-title {
  color: #118DFF;
}
.tag-row-container .tag-row-inner .tag-container.show .tag-title .icon, .tag-row-container .tag-row-inner .tag-container.show .tag-title svg {
  color: #118DFF;
}
.tag-row-container .tag-row-inner .tag-container .tag-title {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--color-light-gray-100);
  font-size: var(--font-size-14);
  font-weight: 600;
}
.tag-row-container .tag-row-inner .tag-container .tag-title .tag-title-text {
  white-space: nowrap;
}
.tag-row-container .tag-row-inner .tag-container .tag-title .icon, .tag-row-container .tag-row-inner .tag-container .tag-title svg {
  width: 14px;
  height: 14px;
  color: var(--color-light-gray-100);
  font-size: var(--font-size-14);
  margin-right: 2px;
}
.tag-row-container .tag-row-inner .tag-container .tag-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.tag-row-container .tag-row-inner .tag-container .tag-group .text-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-row-container .tag-row-inner .tag-container .tag-group *:not(.chip) {
  color: var(--color-light-gray-70);
  font-size: var(--font-size-14);
  font-weight: 600;
}
.tag-row-container .tag-row-inner .tag-container .tag-group .chip {
  height: 24px;
}
.tag-row-container .tag-row-inner .tag-container > .btn-icon {
  color: #118DFF;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content {
  min-width: 520px;
  right: auto;
  left: 0;
  bottom: -10px;
  transform: translate(0, 100%);
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content {
  min-width: 300px !important;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header {
  padding: 0 25px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E2E6EB;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header:has(.input-wrapper) {
  padding: 10px 17px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header .count {
  margin-left: 4px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header .input-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header .input-wrapper {
  position: relative;
  width: 100%;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header .input-wrapper .input-text {
  padding: 0 35px 0 12px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .toggle-content-header .input-wrapper button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(0, -50%);
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .content-box-wrapper {
  padding: 15px 25px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .content-box-wrapper:has(.content-scroll) {
  padding-right: 0;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .content-box-wrapper .selection-wrapper {
  flex-direction: column;
  row-gap: 18px;
  align-items: flex-start;
  width: 100%;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .content-box-wrapper .selection-wrapper .input-label {
  min-height: 26px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.selection-content .content-box-wrapper .selection-wrapper .content-scroll {
  display: flex;
  flex-direction: column;
  row-gap: 18px;
  padding-right: 25px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content {
  min-width: 300px !important;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content .content-box-wrapper {
  padding: 20px 0 !important;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content .content-box-wrapper .custom-select-box-wrapper button.select-label {
  display: none;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content .content-box-wrapper .custom-select-box-wrapper .select-option-wrapper {
  display: block;
  box-shadow: none;
  border-radius: 0;
  position: static;
  padding: 0;
  color: #000;
  border: none;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content .content-box-wrapper .custom-select-box-wrapper .select-option-wrapper .select-option-item {
  padding: 0 17px;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content .content-box-wrapper .custom-select-box-wrapper .select-option-wrapper .select-option-item.active::before {
  opacity: 1;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content.select-content .content-box-wrapper .custom-select-box-wrapper .select-option-wrapper .select-option-item::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../../img/icon/sprite-icons/icon-check.svg") no-repeat center/100% auto;
  opacity: 0;
}
.tag-row-container .tag-row-inner .tag-container .toggle-content:has(.period-box) {
  min-width: 600px;
}
.tag-row-container .tag-row-inner .tag-reset-btn {
  padding: 9px 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E6E8ED;
  color: #667085;
  background-color: #fff;
  border-radius: 10px;
}

.toast-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 360px;
  height: 48px;
  padding: 0 16px;
  background-color: #000;
  font-size: 14px;
  color: #fff;
  border-radius: 12px;
  font-weight: 500;
  transition: all var(--transition-base);
  z-index: 9999;
}
.toast-container.active {
  transform: translate(-50%, 10%);
}
.toast-container .toast-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toast-container .toast-inner .div-wrapper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.toggle-container {
  position: relative;
  display: flex;
  align-items: center;
}
.toggle-container.lang-toggle:has(.toggle-content:not(.hidden)) .toggle-btn {
  color: #118DFF;
}
.toggle-container.lang-toggle .toggle-btn:hover {
  color: #118DFF;
}
.toggle-container .toggle-btn.active {
  color: #118DFF;
}
.toggle-container .toggle-content {
  position: absolute;
  width: fit-content;
  height: fit-content;
  bottom: -7px;
  right: 0;
  transform: translate(0, 100%);
  padding: 20px 15px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 500;
  background-color: #fff;
  border: 1px solid #E2E6EB;
}
.toggle-container .toggle-content:has(.setting-list) {
  padding: 6px;
}
.toggle-container .toggle-content.p-center {
  right: auto;
  left: 50%;
  transform: translate(-48%, 100%);
}
.toggle-container .toggle-content .setting-list .list-item {
  border-radius: 10px;
}
.toggle-container .toggle-content .setting-list .list-item.active a {
  color: #118DFF !important;
  font-weight: 600;
}
.toggle-container .toggle-content .setting-list .list-item:hover {
  background-color: #F7F8FA;
}
.toggle-container .toggle-content .setting-list .list-item:hover > a, .toggle-container .toggle-content .setting-list .list-item:hover > span {
  color: #000;
  font-weight: 500;
}
.toggle-container .toggle-content .setting-list .list-item > a, .toggle-container .toggle-content .setting-list .list-item > span {
  display: inline-block;
  width: 100%;
  height: 40px;
  padding: 8px 40px 8px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #9AA0AE;
  font-size: var(--font-size-14);
  text-wrap: nowrap;
  font-weight: 400;
  cursor: pointer;
}
.toggle-container {
  /* 검색 영역 filter-toggle */
}
.toggle-container.filter-toggle .toggle-content {
  padding: 0;
  bottom: -17px;
  left: -362px;
  border: 1px solid var(--color-light-gray-10);
  min-width: 670px;
  max-width: 100%;
  z-index: 9999;
}
.toggle-container.filter-toggle .toggle-content:has(.period-box) {
  min-width: 750px;
}
.toggle-container.filter-toggle .toggle-content .toggle-header {
  padding: 15px 20px;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #E6E8ED;
  display: flex;
  align-items: center;
}
.toggle-container.filter-toggle .toggle-content .content-box-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toggle-container.filter-toggle .toggle-content .content-box-wrapper .border-box {
  border: 1px solid #E6E8ED;
  padding: 12px 15px;
  border-radius: 10px;
  width: 100%;
}
.toggle-container.filter-toggle .toggle-content .content-box-wrapper .field-group.period-group {
  flex-wrap: nowrap;
}
.toggle-container.filter-toggle .toggle-content .content-box-wrapper .field-group .period-box {
  width: 100px;
  flex-shrink: 0;
}
.toggle-container.filter-toggle .toggle-content .content-box-wrapper .field-group .selection-wrapper {
  min-height: 36px;
}
.toggle-container.filter-toggle .toggle-content .toggle-footer {
  padding: 15px 20px;
  height: 70px;
  line-height: 70px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  border-top: 1px solid #E6E8ED;
}
.toggle-container.filter-toggle .toggle-content .toggle-footer button {
  height: 40px;
  font-size: 14px;
  padding: 10px 12px;
}

/* toggle-switch */
.toggle-switch {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.toggle-switch .toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch .toggle-input:checked + .toggle-slider .toggle-handle {
  transform: translateX(100%);
}
.toggle-switch .toggle-input:not(:checked) + .toggle-slider {
  background-color: #D9D9D9;
}
.toggle-switch .toggle-input:disabled + .toggle-slider {
  background-color: #F5F5F5 !important;
  cursor: not-allowed;
}
.toggle-switch .toggle-input:checked:disabled + .toggle-slider {
  background-color: #8FC7FF !important;
}
.toggle-switch .toggle-slider {
  display: flex;
  width: 30px;
  align-items: center;
  gap: 10px;
  padding: 2px;
  position: relative;
  background-color: #118DFF;
  border-radius: 20px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.toggle-switch .toggle-slider .toggle-handle {
  position: relative;
  width: 13px;
  height: 13px;
  background-color: var(--color-light-gray-0);
  border-radius: 7.5px;
  transition: transform 0.3s ease;
}

/* 토글 타입 2  */
.toggle-switch.type-2 {
  width: 50px;
  height: 24px;
}
.toggle-switch.type-2 .toggle-input:not(:checked) + .toggle-slider .toggle-handle {
  transform: translateX(-30%);
}
.toggle-switch.type-2 .toggle-slider {
  height: 12px;
  width: 36px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  overflow: visible;
  background-color: #118DFF;
}
.toggle-switch.type-2 .toggle-slider .toggle-handle {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  box-shadow: 0 1px 5px var(--color-light-gray-30);
}

/* master-toggle-switch */
.master-toggle-switch {
  display: inline-block;
}
.master-toggle-switch .toggle-slider {
  width: 120px;
  height: 32px;
  background-color: #F4F8FE;
  border: 1px solid #E2E6EB;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.master-toggle-switch .toggle-slider .toggle-handle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  color: #000;
  position: relative;
}
.master-toggle-switch .toggle-slider .toggle-handle .toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.master-toggle-switch .toggle-slider .toggle-handle .toggle-input:checked + span {
  font-weight: 600;
}
.master-toggle-switch .toggle-handle.off:has(.toggle-input:checked) {
  border-left: 1px solid #E9ECEF;
  background-color: #fff;
  color: #118DFF;
}

.master-toggle-switch:has(.toggle-input.off:checked) .toggle-handle.on {
  background-color: transparent;
  color: #000;
  border-right: none;
}

.master-toggle-switch .toggle-handle.on:has(.toggle-input:checked) {
  border-right: 1px solid #E9ECEF;
  background-color: #fff;
  color: #118DFF;
}

.master-toggle-switch:has(.toggle-input.on:checked) .toggle-handle.off {
  background-color: transparent;
  color: #000;
  border-left: none;
}

/* searchable-select-toggle */
.searchable-select-container {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.searchable-select-container.has-custom-add .toggle-container.searchable-select-box .toggle-content .toggle-header {
  padding: 10px 17px;
}
.searchable-select-container.has-custom-add .toggle-container.searchable-select-box .toggle-content .toggle-bottom {
  padding: 10px 17px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #E2E6EB;
}
.searchable-select-container .toggle-container.searchable-select-box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-btn {
  padding: 10px;
  gap: 5px;
  font-weight: 600;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-btn span {
  font-size: 13px;
  line-height: 13px;
  font-weight: 600;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content {
  bottom: -5px;
  right: auto;
  left: 0;
  width: 300px;
  overflow: hidden;
  padding: 0;
  min-width: auto;
  max-width: 300px;
  padding-bottom: 10px;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .content-scroll {
  padding-right: 0;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: fit-content;
  padding: 15px 20px 10px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #E6E8ED;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header:not(:has(.select-control-box)) {
  padding: 10px 17px;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header .input-wrapper {
  position: relative;
  width: 100%;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header .input-wrapper .input-text {
  padding: 0 35px 0 12px;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header .input-wrapper button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(0, -50%);
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header .select-control-box {
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .toggle-header .select-control-box .pale {
  color: #5B6673;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .selection-wrapper.vertical {
  width: 100%;
  row-gap: 0;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .selection-wrapper.vertical .input-label {
  width: 100%;
  min-height: 37px;
  padding: 10px 17px;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .selection-wrapper.vertical .input-label:hover {
  background-color: #F7F8FA;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .selection-wrapper.vertical .input-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchable-select-container .toggle-container.searchable-select-box .toggle-content .selection-wrapper.vertical .input-label .delete-btn {
  margin-left: auto;
}
.searchable-select-container .selected-item {
  padding: 8px 10px;
  height: 36px;
  line-height: 36px;
  display: flex;
  gap: 5px;
  align-items: center;
  background-color: #EEF6FF;
  border: 1px solid #CFE5FF;
  color: #118DFF;
  border-radius: 8px;
  max-width: 100%;
}
.searchable-select-container .selected-item.empty {
  background-color: transparent;
  border-color: transparent;
  color: #9AA0AE;
  padding: 0;
}
.searchable-select-container .selected-item.empty span {
  font-weight: 400;
}
.searchable-select-container .selected-item span {
  font-size: 13px;
  line-height: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* tip */
.tip-container {
  position: relative;
  z-index: 3;
  display: flex;
}
.tip-container .tip-btn .sprite-icon {
  color: #9AA0AE;
}
.tip-container .tip-box {
  position: absolute;
  bottom: -9px;
  left: -23px;
  transform: translate(0, 100%);
  display: none;
}
.tip-container .tip-box.active {
  display: block;
}
.tip-container .tip-box.border-success::before {
  border-color: transparent transparent #118DFF transparent;
  top: -15px;
  left: 24px;
  border-width: 8px;
}
.tip-container .tip-box.border-success::after {
  border-color: transparent transparent #FFFFFF transparent;
  top: -13px;
  left: 24px;
  border-width: 8px;
}
.tip-container .tip-box.border-success .tip-box-inner {
  border-color: #118DFF;
}
.tip-container .tip-box::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 24px;
  border-width: 9px;
  border-style: solid;
  border-color: transparent transparent #D9D9D9 transparent;
}
.tip-container .tip-box::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 25px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #F5F5F5 transparent;
}
.tip-container .tip-box .tip-box-inner {
  border-radius: 12px;
  box-shadow: 1px 2px 4px 0 #D9D9D9;
  border: 0.5px solid #D9D9D9;
  background-color: var(--color-light-gray-0);
  overflow: hidden;
}
.tip-container .tip-box .tip-box-inner .tip-header {
  background-color: #F5F5F5;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  display: flex;
  gap: 6px;
  font-size: var(--font-size-14);
  line-height: 14px;
  font-weight: 600;
}
.tip-container .tip-box .tip-box-inner .tip-header .tip-icon {
  background-image: url("/img/icon/tip_icon.svg");
  background-size: cover;
  width: 13px;
  height: 13px;
}
.tip-container .tip-box .tip-box-inner .tip-header .close-btn {
  margin-left: auto;
  color: var(--color-light-gray-100);
}
.tip-container .tip-box .tip-box-inner .tip-header .close-btn span {
  color: inherit;
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.tip-container .tip-box .tip-box-inner .tip-content {
  font-size: var(--font-size-14);
  font-weight: 400;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tip-container .tip-box .tip-box-inner .tip-content p {
  min-height: 22px;
  line-height: 22px;
}

.fix-tip-box {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 300px;
  border: 1px solid #1641FF;
  background-color: #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 3;
  overflow: hidden;
  text-wrap: wrap;
  padding: 0;
}
.fix-tip-box .tip-content {
  padding: 0;
}
.fix-tip-box .tip-content .chip {
  font-size: 13px;
  height: 26px;
  min-width: 40px;
  font-weight: 600;
}
.fix-tip-box .tip-content .list-item {
  padding: 12px 16px;
  min-height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E2E6EB;
  font-size: 14px;
}
.fix-tip-box .tip-content .list-item:last-child {
  border-bottom: none;
}
.fix-tip-box .tip-content .list-item .label-text {
  min-width: 80px;
  font-size: 12px;
  font-weight: 600;
  color: #7B7E84;
}

/* ellipsis 적용 요소 툴팁 */
#text-tooltip {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  position: fixed;
  padding: 5px 10px;
  border-radius: 6px;
  transition: none;
  font-size: 13px;
  pointer-events: none;
  display: none;
  z-index: 9999;
  max-width: 360px;
}

.page-contents-box:has(.split-container) {
  padding: 0 30px !important;
  gap: 0 !important;
}
.page-contents-box .setting-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  --sticky-1st-h: 40px;
  --sticky-2nd-h: 60px;
  --sticky-1st-top: 0px;
  --sticky-2nd-top: var(--sticky-1st-h);
  --sticky-3rd-top: calc(var(--sticky-2nd-top) + var(--sticky-2nd-h));
  --total-sticky-h: var(--sticky-3rd-top);
}
.page-contents-box .setting-form .split-container {
  display: flex;
  height: 100%;
}
.page-contents-box .setting-form .split-container .left-box {
  border-right: 1px solid #E6E8ED;
  padding-bottom: 20px;
}
.page-contents-box .setting-form .split-container .left-box .content-scroll {
  padding-right: 30px;
}
.page-contents-box .setting-form .split-container .right-box {
  padding-bottom: 20px;
}
.page-contents-box .setting-form .split-container .right-box .content-scroll {
  padding-left: 30px;
}
.page-contents-box .setting-form .split-container .setting-container {
  flex-grow: 1;
  flex-shrink: 1;
  gap: 0;
}
.page-contents-box .setting-form .split-container .setting-container .setting-header {
  min-height: 56px;
}
.page-contents-box .setting-form .split-container .setting-container .table-box {
  max-width: none;
}
.page-contents-box .setting-form .setting-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: fit-content;
  min-height: 0;
  flex-shrink: 0;
  max-width: 100%;
}
.page-contents-box .setting-form .setting-container .setting-header .setting-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  flex: 0 0 auto;
}
.page-contents-box .setting-form .setting-container .setting-header .setting-title.flex-start {
  justify-content: flex-start;
  gap: 8px;
}
.page-contents-box .setting-form .setting-container .setting-header .setting-title-text {
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-light-gray-100);
}
.page-contents-box .setting-form .setting-container .setting-header button {
  padding: 10px;
}
.page-contents-box .setting-form .table-box {
  width: 100%;
  max-width: 775px;
  border: 1px solid #E6E8ED;
  border-radius: 10px;
}
.page-contents-box .setting-form .table-box.width-max {
  max-width: 100%;
}
.page-contents-box .setting-form table {
  border-top: none !important;
  border-bottom: none !important;
}
.page-contents-box .setting-form table th, .page-contents-box .setting-form table td {
  font-size: 14px;
  height: 60px;
}
.page-contents-box .setting-form table th {
  color: var(--color-light-gray-100);
  font-weight: 600;
}
.page-contents-box .setting-form table .button-wrapper {
  flex-shrink: 0;
  display: flex;
  gap: 5px;
}
.page-contents-box .setting-form table .button-wrapper button {
  padding: 10px;
  font-size: var(--font-size-13);
}
.page-contents-box .setting-form table .button-wrapper button span {
  font-weight: 500;
}
.page-contents-box .setting-form table .incorrect-text {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-contents-box .setting-form .sticky-table-container table.border-table th {
  padding: 10px 17px;
}
.page-contents-box .setting-form .sticky-table-container table.border-table th:first-child {
  border-top-left-radius: 12px;
  border-left: 1px solid var(--color-table-border);
  box-shadow: -4px -4px 0 0 #fff;
}
.page-contents-box .setting-form .sticky-table-container table.border-table th:last-child {
  border-top-right-radius: 12px;
  border-right: 1px solid var(--color-table-border);
  box-shadow: 4px -4px 0 0 #fff;
}
.page-contents-box .setting-form .sticky-table-container table.border-table tbody td {
  height: 60px;
  padding: 10px 17px;
}
.page-contents-box .setting-form .sticky-table-container table.border-table tbody td:first-child {
  border-left: 1px solid var(--color-table-border);
}
.page-contents-box .setting-form .sticky-table-container table.border-table tbody td:last-child {
  border-right: 1px solid var(--color-table-border);
}
.page-contents-box .setting-form .sticky-table-container table.border-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.page-contents-box .setting-form .sticky-table-container table.border-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.page-contents-box .setting-form .button-row-container {
  justify-content: flex-end;
  margin-top: 30px;
}
.page-contents-box .setting-form .button-row-container button {
  height: 40px;
  line-height: 40px;
  padding: 10px 12px;
}
.page-contents-box .setting-form .button-row-container button * {
  line-height: 40px;
}
.page-contents-box .setting-form .content-scroll.sticky-container {
  position: relative;
  padding-right: 5px;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container {
  padding: 30px 0 0;
  min-height: auto;
  row-gap: 0;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-container {
  position: sticky;
  height: var(--sticky-1st-h);
  top: var(--sticky-1st-top);
  left: 0;
  background-color: #fff;
  z-index: 100;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel {
  min-height: calc(100dvh - var(--content-header-height) - var(--total-sticky-h) - 27px);
  row-gap: 0;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .tab-title, .page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .panel-title {
  position: sticky;
  height: var(--sticky-2nd-h);
  top: var(--sticky-2nd-top);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  background-color: #fff;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .tab-title .tab-title-text, .page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .panel-title .tab-title-text {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .tab-title .chip, .page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .panel-title .chip {
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
  min-width: 30px;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .tab-title button, .page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .panel-title button {
  padding: 10px;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .tab-title .filter-toggle .toggle-content, .page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .tab-panel .panel-title .filter-toggle .toggle-content {
  bottom: -5px;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .sticky-table-container {
  overflow: visible;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .sticky-table-container th {
  top: var(--sticky-3rd-top);
  height: var(--sticky-2nd-h);
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .sticky-table-container .table:not(.border-table) th {
  --sticky-2nd-h: 40px;
}
.page-contents-box .setting-form .content-scroll.sticky-container .line-tab-container .tab-panel-wrapper .sticky-table-container .table:not(.border-table) td {
  height: 50px;
}

/* 설정 컨테이너 */
.setting-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: fit-content;
  min-height: 0;
  flex-shrink: 0;
  max-width: 100%;
}

/* 설정 제목 */
.setting-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: var(--first-el-width);
  max-width: var(--first-el-width);
  min-height: 36px;
  justify-content: center;
}
.setting-header.setting-header.width-max {
  width: 100%;
  max-width: 100%;
}
.setting-header .setting-title-text {
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-light-gray-100);
}
.setting-header .setting-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  flex: 0 0 auto;
}
.setting-header .setting-title.flex-start {
  justify-content: flex-start;
  gap: 8px;
}
.setting-header .setting-description {
  display: flex;
  font-size: var(--font-size-13);
  color: var(--color-light-gray-60);
  text-wrap: nowrap;
}
.setting-header .setting-description * {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.setting-header .setting-description .icon, .setting-header .setting-description .round-icon {
  font-size: var(--font-size-14);
  margin-right: 2px;
  color: #494E55;
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* 스크롤 영역 */
.content-scroll {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: auto;
}
.content-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.content-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.content-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
.content-scroll::-webkit-scrollbar-track {
  background-color: transparent;
  background-clip: padding-box;
}
.content-scroll::-webkit-scrollbar-button:start:decrement, .content-scroll::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0;
  height: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .content-scroll {
    scrollbar-width: auto;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
  }
}
.content-scroll.footer-bottom {
  height: 100%;
}
.content-scroll.footer-bottom .menu-content {
  height: 100%;
}
.content-scroll.footer-bottom .menu-footer {
  margin-top: auto;
}

:root {
  --popup-max-width: 800px;
  --popup-min-width: 320px;
  --table-min-width: 500px;
}

body:has(.popup-container) {
  padding: 0 !important;
}

/* 팝업 */
.popup-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: var(--popup-min-width);
  gap: 40px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 0;
}
.popup-container .popup-header {
  width: 100%;
  padding: 40px 40px 20px;
  border-bottom: 1px solid #E6E8ED;
}
.popup-container .popup-header > .popup-title {
  margin-bottom: 6px;
  line-height: 30px;
}
.popup-container .popup-header .popup-description {
  color: var(--color-light-gray-100);
  font-size: var(--font-size-14);
}
.popup-container .popup-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 40px 0;
  min-height: 0;
  flex-grow: 1;
}
.popup-container .popup-content button {
  height: 36px;
  padding: 10px 12px;
}
.popup-container .popup-content table button {
  height: 26px;
  padding: 0 6px;
}
.popup-container .popup-content table .button-wrapper.confirm-btn-wrapper button {
  padding: 5px 10px;
  height: 30px;
  line-height: 30px;
}
.popup-container .popup-content-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.popup-container .popup-content-header .chip {
  height: 19px;
  line-height: 19px;
}
.popup-container .popup-content-header :has(.description) {
  flex-direction: column;
}
.popup-container .popup-content-header.flex-column {
  flex-direction: column;
  align-items: start;
  gap: 5px;
}
.popup-container .content-title {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--font-size-18);
}
.popup-container .popup-content-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  min-height: 0;
}
.popup-container .popup-content-main .button-row-container {
  justify-content: flex-end;
}
.popup-container .popup-content-main {
  /* 테이블 스크롤 */
}
.popup-container .popup-content-main .table-box {
  width: 100%;
}
.popup-container .popup-content-main .table-box .content-scroll {
  width: 100%;
}
.popup-container .popup-content-main .table-box .content-scroll table {
  min-width: var(--table-min-width);
}
.popup-container .popup-content-main .setting-container .setting-header .muted-text {
  font-size: var(--font-size-14);
  color: #667085;
  font-weight: 400;
}
.popup-container .popup-content-main .setting-container .setting-header .description {
  font-size: var(--font-size-14);
}
.popup-container .popup-content-main .setting-container .setting-header .count-text {
  font-size: 14px;
  font-weight: 400;
}
.popup-container .popup-content-main .setting-container .setting-header .count-text .text-red {
  font-weight: 600;
}
.popup-container .popup-content-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup-container .popup-content-section .section-title {
  display: inline-flex;
  gap: 10px;
  width: fit-content;
  color: var(--color-light-gray-90);
  font-size: var(--font-size-14);
  font-weight: 600;
  white-space: nowrap;
}
.popup-container .popup-content-section .section-title .chip {
  height: 19px;
  line-height: 19px;
}
.popup-container .popup-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 20px 40px;
  border-top: 1px solid #E6E8ED;
}
.popup-container .popup-footer button {
  height: 40px;
  font-size: var(--font-size-14);
  padding: 10px 12px;
  min-width: 56px;
}
.popup-container .setting-container {
  width: 100%;
}
.popup-container .setting-container .setting-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.popup-container .setting-container .setting-group .select-box-wrapper {
  width: 100%;
}
.popup-container .setting-container .field-container {
  width: 100%;
}
.popup-container .setting-container .field-container .field-title {
  align-items: center;
  flex-wrap: wrap;
}
.popup-container .setting-container .field-container .field-title .title-box {
  display: flex;
  gap: 12px;
}
.popup-container .setting-container .field-container .field-title .chip {
  height: 20px;
  min-height: 20px;
}
.popup-container .setting-container .field-container .field-group {
  justify-content: flex-end;
}
.popup-container .width-half {
  width: calc(50% - 10px);
  max-width: calc(50% - 10px);
  min-width: calc(50% - 10px);
}
.popup-container .setting-header {
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  min-height: auto;
}

/* 사용자 등록 팝업 요소 사이즈 */
.user-register-popup .setting-container {
  margin-bottom: 32px;
}
.user-register-popup .setting-container:has(table) {
  margin-bottom: 40px;
}
.user-register-popup .setting-container .select-box-wrapper .select-box {
  max-width: 296px;
}
.user-register-popup .setting-container .setting-group {
  max-width: 794px;
}
.user-register-popup .setting-container .row-container {
  gap: 12px;
}

.reorder-box-wrap:has(.dragging-origin) .reorder-box button:hover::before {
  display: none;
}
.reorder-box-wrap .reorder-box {
  transition: transform 5s ease;
  will-change: transform;
}

.ghost-item {
  position: fixed !important;
  z-index: 10000 !important;
  pointer-events: none;
  background-color: #ffffff;
  border-radius: 8px;
  user-select: none;
  transition: transform 0.1s ease;
}
.ghost-item .input-text {
  border: 1px solid var(--color-light-gray-10) !important;
}
.ghost-item button:not(.drag-btn) .btn-icon {
  padding: 10px 12px;
}
.ghost-item button:not(.drag-btn) .btn-icon.drag-btn {
  color: #118DFF;
}

/* 2. 리스트에 남아있는 원래 요소 (자리 표시자) */
.reorder-box.dragging-origin {
  opacity: 0;
  visibility: hidden;
}

:root {
  --content-max-width: 100%;
  --content-min-width: 1150px;
  --content-max-height: 100dvh;
  /* right-content size */
  --content-header-height: 60px;
  --content-footer-height: 70px;
}

html {
  overflow-x: auto;
}

.layout {
  width: 100%;
  min-width: var(--content-min-width);
  height: var(--content-max-height);
  overflow: hidden;
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: var(--content-header-height) 1fr;
  grid-template-areas: "header header" "nav content";
}

/* header */
.header {
  grid-area: header;
  border-bottom: 1px solid #E6E8ED;
  display: flex;
  align-items: center;
  /* logo */
}
.header .logo {
  flex-shrink: 0;
  width: 250px;
  padding: 10px 20px;
  background-color: var(--color-light-gray-0);
}
.header .right-wrap {
  width: 100%;
  max-width: var(--content-max-width);
  height: 100%;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.header .right-wrap .left-box {
  flex-grow: 1;
  display: flex;
  gap: 20px;
  align-items: center;
}
.header .right-wrap .left-box .page-title {
  color: #09090B;
  font-size: 20px;
  font-weight: 700 !important;
  text-wrap: nowrap;
}
.header .right-wrap .left-box .search-form {
  flex-grow: 1;
}
.header .right-wrap .left-box .search-form > .input-wrapper {
  width: 100%;
  max-width: 400px;
  height: 40px;
  background-color: #F7F8FA;
  border-radius: 50px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.header .right-wrap .left-box .search-form > .input-wrapper .btn-icon .search-icon {
  color: #667085;
}
.header .right-wrap .left-box .search-form > .input-wrapper .btn-icon .toggle-icon {
  color: #3D4350;
}
.header .right-wrap .left-box .search-form > .input-wrapper .btn-icon::before {
  padding: 10px;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -49%);
}
.header .right-wrap .left-box .search-form > .input-wrapper > .input-text {
  flex-grow: 1;
  background-color: transparent;
  border-color: transparent;
}
.header .right-wrap .left-box .search-form > .input-wrapper > .input-text::placeholder {
  color: #9AA0AE;
  font-size: 14px;
  font-weight: 500;
}
.header .right-wrap .left-box .search-form > .input-wrapper .toggle-container .toggle-header {
  display: flex;
  align-items: center;
}
.header .right-wrap {
  /* user-info */
}
.header .right-wrap .right-box .user-info {
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
}
.header .right-wrap .right-box .user-info button::before {
  /* 버튼 호버 효과 해제 */
  display: none;
}
.header .right-wrap .right-box .user-info > .text-wrapper {
  text-align: right;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.header .right-wrap .right-box .user-info > .text-wrapper .user-id {
  color: #3D4350;
  font-weight: 600;
}
.header .right-wrap .right-box .user-info > .text-wrapper .ip-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #667085;
  gap: 4px;
}
.header .right-wrap .right-box .user-info .toggle-container .profile-image-wrap {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  font-weight: 500;
  color: #3D4350;
  padding: 8px 10px;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-header .profile-image-wrap {
  width: 20px;
  height: 20px;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-content {
  width: 300px;
  padding: 6px;
  border-radius: 10px;
  bottom: -5px;
  z-index: 200;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-content .setting-list .list-item {
  border-radius: 10px;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-content .setting-list .list-item a,
.header .right-wrap .right-box .user-info .toggle-container .toggle-content .setting-list .list-item button {
  display: inline-block;
  width: 100%;
  height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #9AA0AE;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-content .setting-list .list-item a span {
  padding: 0;
}
.header .right-wrap .right-box .user-info .toggle-container .toggle-content .setting-list .list-item.logout-item a,
.header .right-wrap .right-box .user-info .toggle-container .toggle-content .setting-list .list-item.logout-item button {
  color: var(--color-light-gray-100);
  font-weight: 500;
  justify-content: flex-start;
}

/* nav */
.nav-wrapper {
  grid-area: nav;
  min-height: 0;
}
.nav-wrapper .nav {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* menu */
}
.nav-wrapper .nav .menu-depth1-wrap {
  width: 100%;
  flex-grow: 1;
  padding: 20px 20px 20px 0;
  background-color: #F8FAFD;
  border-right: 1px solid #E6E8ED;
  font-size: var(--font-size-14);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth1 > .menu-name {
  height: 40px;
  line-height: 40px;
  color: #667085;
  margin-botton: 4px;
  padding-left: 20px;
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2 {
  padding-left: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  border-radius: 0 50px 50px 0;
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2 > .menu-name {
  height: 40px;
  line-height: 40px;
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2 {
  /* active */
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2.active {
  color: #1641FF;
  background-color: #E9EDFF;
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2.active .sprite-icon {
  color: #1641FF;
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2 {
  /* hover */
}
.nav-wrapper .nav .menu-depth1-wrap .menu-depth2-wrap .menu-depth2:hover {
  background-color: #EEF2F7;
}

/* right-content */
.right-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.right-content .contents-wrapper {
  grid-area: content;
  width: 100%;
  min-height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* 실제 페이지 콘텐츠 영역 */
}
.right-content .contents-wrapper .page-contents-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  padding: 20px 30px;
  gap: 10px;
}
.right-content {
  /* 콘텐츠 하단 페이지 영역 */
}
.right-content .contents-footer {
  width: 100%;
  height: var(--content-footer-height);
  padding: 15px 30px;
  border-top: 1px solid #E6E8ED;
}
.right-content .contents-footer .footer-inner {
  width: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right-content .contents-footer .footer-inner .custom-select-box-wrapper {
  width: fit-content;
  min-width: 100px;
  color: red;
}
.right-content .contents-footer .footer-inner {
  /* pagination */
}
.right-content .contents-footer .footer-inner .pagination-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0;
}
.right-content .contents-footer .footer-inner .pagination-container .btn-box {
  display: flex;
  align-items: center;
}
.right-content .contents-footer .footer-inner .pagination-container .btn-box .round-icon {
  color: #667085;
}
.right-content .contents-footer .footer-inner .pagination-container .input-wrapper {
  display: flex;
  gap: 10px;
  color: #667085;
  font-weight: 500;
  font-size: 14px;
}
.right-content .contents-footer .footer-inner .pagination-container .input-wrapper .input-text {
  max-width: 65px;
  height: 36px;
  font-weight: 500;
}

/*# sourceMappingURL=main.css.map */