@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Thin.woff2") format("woff2"), url("../fonts/Pretendard-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraLight.woff2") format("woff2"), url("../fonts/Pretendard-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Light.woff2") format("woff2"), url("../fonts/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2"), url("../fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2"), url("../fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2"), url("../fonts/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2"), url("../fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2"), url("../fonts/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Black.woff2") format("woff2"), url("../fonts/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
html,
body {
  width: 100%;
  height: 100%;
  font-family: "Pretendard", sans-serif, "Arial";
  font-size: 100%;
  background-color: #fff;
  color: #333;
}

body {
  line-height: 1;
  letter-spacing: -0.01em;
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
  vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
div {
  word-break: keep-all;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::after, blockquote::before,
q::after,
q::before {
  content: "";
  content: none;
}

textarea {
  border-radius: 0;
  outline: none;
}

em,
i {
  font-style: normal;
}

strong {
  font-weight: normal;
}

form {
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #353535;
  text-decoration: none;
  outline: none;
  vertical-align: baseline;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

img {
  width: 100%;
  height: auto;
  border: none;
}

.blind,
legend {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}

select {
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

button {
  font-family: "Pretendard", sans-serif, "Arial";
  font-size: 1rem;
  cursor: pointer;
}

button,
input[type=button],
input[type=submit],
input[type=reset] {
  border: none;
  background: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 에디터 제외 스타일 */
.note-editor .note-video-btn {
  background: #fa6362;
}

input[type=radio],
input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

textarea::placeholder,
textarea::-webkit-textarea-placeholder,
input::placeholder,
input::-webkit-input-placeholder {
  color: #bdbdbd;
}

/* input type number 화살표 제거 - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* input type number 화살표 제거 - Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* IE X 버튼 없애기 */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

/* 크롬 X 버튼 없애기 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

/* X박스 표시 수정 */
br,
textarea,
input {
  font-family: "Arial";
  font-size: 1rem;
}

/* Add replacementz focus styling here (i.e. border)*/
/* focus X focus-visible로 변경 */
button:focus,
a[href]:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 0;
}

button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px dotted red;
}

/* Webkit / Chrome Specific CSS to remove tap highlight color - 클릭시 또는 터치시 버튼 영역 하이라이트 효과 */
a,
button,
input {
  -webkit-tap-highlight-color: transparent;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* 안티앨리어싱을 적용하면 텍스트가 더 부드럽게 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 레티나 디스플레이에서 폰트 표시를 개선 */
  text-rendering: optimizeLegibility;
}

/* 텍스트 드래그 색상 효과 */
::-moz-selection {
  /*
  background: yellow;
  color: pink;
  */
}

::selection {
  /*
  background: yellow;
  color: pink;
  */
}

/* scrollbar */
/* 스크롤바 전체 영역 */
::-webkit-scrollbar {
  width: 6px; /* 세로축 스크롤바 폭 너비 */
  height: 6px; /* 가로축 스크롤바 폭 너비 */
}

/* 스크롤바 막대 */
::-webkit-scrollbar-thumb {
  background: rgb(156, 156, 156); /* 스크롤바 막대 색상 */
  /*border: 1px solid pink; 스크롤바 막대 테두리 설정  */
  border-radius: 6px;
}

/* 스크롤이 움직이는 뒷 배경 */
::-webkit-scrollbar-track {
  background: rgb(221, 221, 221); /* 스크롤바 뒷 배경 색상 */
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Chrome 배경색 및 이미지 출력 */
@media print {
  * {
    -webkit-print-color-adjust: exact;
  }
} 
:root {
  /* Brand */
  --color-primary: #00459F;
  --color-primary-800: #1B4377;
  --color-primary-500: #2563EB;
  --color-primary-400: #BFD2F5;
  --color-primary-300: #E2E8F0;
  --color-primary-100: #EEF4FF;
  --color-primary-50: #F8FBFF;
  --color-secondary: #2BA88E;
  --color-secondary2: #6c87fd;
  --color-point: #DD5E00;
  /* Blue */
  --color-blue-600: #435877;
  --color-blue-200: #EAEEF3;
  --color-blue-20: #F1F5F9;
  --color-blue-15: #E8EEF5;
  --color-blue-10: #E9F3FF;
  --color-blue-5: #EBF2F9;
  /* Accent */
  --color-red-100: #F00000;
  --color-red-50: #f85050;
  --color-green-100: #009900;
  --color-green-50: #60c760;
  --color-blue-100: #0084FF;
  --color-blue-50: #3699f7;
  /* Gray scale */
  --color-black: var(--color-333);
  --color-white: #fff;
  --color-333: #333333;
  --color-444: #444444;
  --color-555: #555555;
  --color-666: #666666;
  --color-73: #737373;
  --color-777: #777777;
  --color-8c: #8C8C8C;
  --color-999: #999999;
  --color-d9: #d9d9d9;
  --color-b5: #B5B5B5;
  --color-ccc: #CCCCCC;
  --color-ddd: #DDDDDD;
  --color-f5: #f5f5f5;
  --color-f2: #f2f2f2;
  --color-d8: #d8d8d8;
  --color-db: #DBDBDB;
  --coor-d8: #D8D8D8;
  --color-eee: #EEEEEE;
  --color-f0: #F0F0F0;
  --color-f8: #F8F8F8;
  --color-fa: #FAFAFA;
  --color-fe: #FEFEFE;
  --color-bbb: #bbbbbb;
  /* Cool Gray Scale */
  --color-cool-gray-40: #6B7280;
  --color-cool-gray-20: #A8ABB2;
  --color-cool-gray-15: #DCDFE6;
  --color-cool-gray-10: #F4F6F9;
  /* Typography */
  --font-pretendard: 'Pretendard';
  /* Text */
  --h2: 24px;
  --h3: 21px;
  --h4: 16px;
  --h5: 14px;
  --h6: 13px;
  /* Radius */
  --rounded-lg: 14px;
  --rounded-sm: 7px;
  --rounded-xs: 3px;
  /* Transition */
  --transition-xs: 0.2s;
  --transition-smooth: 0.3s var(--ease-out-quint);
  /* Easing */
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  /* Spacing */
  --gap-8: 8px;
  /* Icon */
  --icon-md: 18px;
  /* Read Only */
  --readOnly-border: var(--color-ccc);
  --readOnly-bg: var(--color-f0);
  --readOnly-txt: var(--color-73);
  /* Disabled */
  --disabled-border: var(--color-db);
  --disabled-bg: var(--color-f2);
  --disabled-txt: var(--color-bbb);
  /* placeholder */
  --placeholder: var(--color-cool-gray-20);
  /* table */
  --table-hover: var(--color-primary-300);
  /* Gnb */
  --on-dark-mute: #94A3B8;
  /* Input Height */
  --input-sz-lg: 40px;
  --input-sz-lg-2: 36px;
  --input-sz-md: 32px;
  --input-sz-md-2: 30px;
  --input-sz-sm: 22px;
  /* Search (상세 검색·목록 검색) */
  --input-sz-search: 30px;
  /* Brand */
  --lab-color-primary: #16A7E0;
  --lab-color-secondary: #99CC5B;
  --lab-color-point: #F6973A;
  --lab-gray-80: #4B4B4B;
  --lab-gray-70: #3A3A3A;
  --lab-gray-10: #878B92;
  --lab-gray-5: #B0B3BA;
  /* Text */
  --lab-h2: 22px;
  --lab-h3: 18px;
  --lab-h4: 17px;
  --lab-h5: 16px;
  --lab-h6: 15px;
  --lab-h7: 14px;
  --lab-h8: 13px;
  /* Radius */
  --lab-rounded-lg: 30px;
  --lab-rounded-md: 12px;
  --lab-rounded-sm: 8px;
  --lab-rounded-xs: 4px;
  /* Spacing */
  --padding-20: 20px;
  --gap-120: 120px;
  --gap-50: 50px;
  --gap-40: 40px;
  --gap-30: 30px;
  --gap-20: 20px;
  --gap-16: 16px;
  --gap-10: 10px;
  --gap-8: 8px;
  /* Input Height */
  --lab-input-h-lg: 50px;
  --lab-input-h-md: 48px;
  --lab-input-h-sm: 36px;
  --lab-input-h-xs: 28px;
  /* Layout */
  --section-gap: var(--gap-120);
  --group-gap-20: var(--gap-20);
  --group-gap-30: var(--gap-30);
  --group-gap-40: var(--gap-40);
  --group-gap-50: var(--gap-50);
  --box-gap-20: var(--gap-20);
  --box-gap-16: var(--gap-16);
  --card-columns: 4;
  --card-gap-20: var(--gap-20);
  --card-gap-30: var(--gap-30);
  --card-padding-20: var(--gap-20);
  --card-padding-16: var(--gap-16);
  /* Page Title Gap */
  --p-small-gap: 8px;
  --p-title-gap: 4px;
  --p-tit-gap: 32px;
}

@media screen and (max-width: 1440px) {
  :root {
    /* Text */
    --h2: 23px;
    --h3: 19px;
    /* Input Height */
    --input-sz-lg: 38px;
    --input-sz-lg-2: 34px;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    /* Text */
    --h2: 24px;
    --h3: 20px;
    --h4: 17px;
    --h5: 15px;
    /* Layout */
    --card-columns: 2;
    /* Radius */
    --rounded-lg: 14px;
    --rounded-sm: 6px;
    /* Input Height */
    --input-sz-lg: 48px;
    --input-sz-lg-2: 44px;
    --input-sz-md: 44px;
    --input-sz-md-2: 44px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    /* Text */
    --h2: 22px;
    --h3: 18px;
    --h4: 16px;
    --h5: 15px;
    --h6: 14px;
    /* Input Height */
    --input-sz-lg: 46px;
    --input-sz-lg-2: 44px;
    --input-sz-md: 38px;
    --input-sz-md-2: 38px;
  }
}
@media screen and (max-width: 360px) {
  :root {
    /* Text */
    --h2: 20px;
    /* Radius */
    --rounded-lg: 8px;
    --rounded-sm: 3px;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    /* Text (pc) */
  }
}
/* 공통 코드 작성 */
body {
  max-height: 100svh;
  overflow-y: hidden;
}

/* useful */
.sound-only { /* 스크린리더 전용 */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.x-scroll {
  width: 100%;
  padding-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.x-scroll .form-table.x-lg {
  min-width: 1600px;
}
.x-scroll .form-table.x-md {
  min-width: 1280px;
}
.x-scroll .form-table.x-sm {
  min-width: 1024px;
}

.row {
  display: flex;
}
.row.align-center {
  align-items: center;
}
.row.justify-sb {
  justify-content: space-between;
}

/* Text */
.h2 {
  font-size: var(--h2);
  line-height: 1.4;
  word-break: keep-all;
}

.h3 {
  font-size: var(--h3);
  line-height: 1.4;
  word-break: keep-all;
}

.h4 {
  font-size: var(--h4);
  line-height: 1.38;
  word-break: keep-all;
}
.h4 > * {
  font-size: var(--h4);
  line-height: 1.5;
}

.h5 {
  font-size: var(--h5);
  line-height: 1.4;
  word-break: keep-all;
}
.h5 > * {
  font-size: var(--h5);
  line-height: 1.5;
}

.h6 {
  font-size: var(--h6);
  line-height: 1.45;
  word-break: keep-all;
}
.h6 > * {
  font-size: var(--h6);
  line-height: 1.5;
}

.section-title-block {
  position: relative;
  padding-left: 26px;
}
.section-title-block::before, .section-title-block::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  display: block;
  border-radius: 0 3px 0 3px;
}
.section-title-block::before {
  background-color: var(--color-primary-500);
  opacity: 0.3;
}
.section-title-block::after {
  background-color: var(--color-secondary2);
  opacity: 0.7;
}
.section-title-block:has(> .title.h4)::before {
  width: 20px;
  height: 20px;
}
.section-title-block:has(> .title.h4)::after {
  width: 14px;
  height: 14px;
}

.ud-info-txt {
  display: inline-flex;
  align-items: center;
}
.ud-info-txt.type1, .ud-info-txt.type2, .ud-info-txt.type3 {
  gap: 4px;
}
.ud-info-txt.icon-type1 {
  gap: 8px;
}
.ud-info-txt > [class^=ri-] {
  font-size: var(--icon-md);
}
.ud-info-txt.type1 {
  color: var(--color-red-100);
}
.ud-info-txt.type2 {
  color: var(--color-point);
}
.ud-info-txt.type3 {
  color: var(--color-777);
}
.ud-info-txt.icon-type1 {
  color: var(--color-blue-100);
}
.ud-info-txt.icon-type1 > [class^=ri-] {
  color: var(--color-333);
}

.ud-text-box {
  position: relative;
  padding: 10px 18px;
}
.ud-text-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.ud-text-box.type1 {
  padding-left: 20px;
  background-color: var(--color-f5);
  border-radius: 0 8px 8px 0;
}
.ud-text-box.type1::before {
  width: 8px;
  height: 100%;
  background-color: var(--color-secondary);
}
.ud-text-box.type1 > .tit {
  font-size: var(--h5);
  line-height: 1.38;
  font-weight: 500;
}
.ud-text-box.type2 {
  padding: 20px 16px;
  background-color: var(--color-white);
  box-shadow: 0 4px 15px rgba(80, 100, 80, 0.15);
  border-radius: var(--rounded-sm);
  border: 2px solid #a8c1f7;
}
.ud-text-box.type2::before {
  display: none;
}
.ud-text-box.type2 .tit {
  font-size: var(--h4);
  line-height: 1.38;
  font-weight: 500;
}
.ud-text-box:has(+ .form-table), .ud-text-box:has(+ .board-body-block) {
  margin: 24px 0 16px;
}

.round-num {
  padding: 2px 8px;
  border-radius: 50%;
  border: 1px solid var(--color-ddd);
}

.test {
  padding: 31px;
  border: 2px solid #B8DBA1;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ud-require-txt {
  color: var(--color-red-100);
  white-space: nowrap;
}

.color-black-100 {
  font-size: inherit;
  color: var(--color-black);
}

.color-red-100 {
  font-size: inherit;
  color: var(--color-red-100);
}

.color-red-50 {
  font-size: inherit;
  color: var(--color-red-50);
}

.color-green-100 {
  font-size: inherit;
  color: var(--color-green-100);
}

.color-green-50 {
  font-size: inherit;
  color: var(--color-green-50);
}

.color-blue-100 {
  color: var(--color-blue-100);
}

.color-blue-50 {
  color: var(--color-blue-50);
}

/* Ellipsis */
.ellipsis-1 {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* Inner */
.inner-type1 > .ud-btn-block {
  margin: 8px 0;
}
.inner-type1 ~ .inner-type1 {
  margin-top: 20px;
}

/*  bord */
/* Icon */
[class^=ri-], [class*=" ri-"] {
  font-size: var(--icon-md);
}

.ud-icon.icon-excel {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon-excel {
  background: url("../images/icon-excel.svg") no-repeat center/contain;
}

/* Button */
.ud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 16px;
  border: 1px solid transparent;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-xs);
  /* Size */
}
.ud-btn-lg {
  min-width: 120px;
  height: var(--input-sz-lg);
  border-radius: var(--rounded-sm);
  font-size: var(--h4);
  font-weight: 600;
}
.ud-btn-lg-2 {
  min-width: 90px;
  height: var(--input-sz-lg-2);
  border-radius: var(--rounded-xs);
  font-size: var(--h4);
  font-weight: 600;
}
.ud-btn-md {
  min-width: 90px;
  height: var(--input-sz-md);
  border-radius: var(--rounded-xs);
  font-size: var(--h5);
  font-weight: 600;
}
.ud-btn-md-2 {
  min-width: 90px;
  height: var(--input-sz-md-2);
  border-radius: var(--rounded-xs);
  font-size: var(--h5);
  font-weight: 600;
}
.ud-btn-sm {
  min-width: unset;
  height: var(--input-sz-sm);
  border-radius: var(--rounded-xs);
  font-size: var(--h6);
  font-weight: 500;
}
.ud-btn {
  /* Type */
}
.ud-btn.ud-fill-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.ud-btn.ud-fill-primary:hover {
  background-color: #00357C;
  box-shadow: 0 2px 8px rgba(0, 69, 159, 0.15);
}
.ud-btn.ud-fill-primary.type2 {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-400);
  color: var(--color-primary);
}
.ud-btn.ud-fill-primary.type2:hover {
  color: var(--color-primary-500);
}
.ud-btn.ud-fill-gray {
  background-color: var(--color-blue-200);
  color: var(--color-black);
}
.ud-btn.ud-fill-gray:hover {
  filter: brightness(0.93);
  box-shadow: 0 2px 8px rgba(0, 69, 159, 0.15);
}
.ud-btn.ud-fill-gray.type2 {
  background-color: var(--color-fa) !important;
  border: 1px solid var(--color-d8) !important;
  color: var(--color-444) !important;
}
.ud-btn.ud-fill-gray.type2 > i {
  color: var(--color-444) !important;
}
.ud-btn.ud-fill-gray.type2:hover {
  background-color: var(--color-fa) !important;
  color: #1f1f1f !important;
  filter: unset !important;
  box-shadow: unset !important;
}
.ud-btn.ud-fill-gray.type2:hover > i {
  color: #1f1f1f !important;
}
.ud-btn.ud-line-primary {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.ud-btn.ud-line-primary > i {
  color: var(--color-primary);
}
.ud-btn.ud-line-primary:hover {
  background: #e7f0ff;
  border-color: #0e6ce7;
  color: #003B88;
}
.ud-btn.ud-line-primary.type2 {
  border: 1px solid var(--color-primary-400);
}
.ud-btn.ud-line-primary.type2:hover {
  background: #e7f0ff;
  border-color: #93b9ff;
  color: #003B88;
}
.ud-btn.ud-line-primary.type3 {
  border: 1px solid var(--color-primary-800);
  color: var(--color-primary-800);
}
.ud-btn.ud-line-primary.type3:hover {
  background: #b6caec;
  border-color: #285da1;
  color: #003B88;
}
.ud-btn.ud-line-gray {
  border: 1px solid var(--color-d9);
  color: var(--color-black);
}
.ud-btn.ud-line-gray > i {
  color: var(--color-black);
}
.ud-btn.ud-line-gray:hover {
  background: #f8f8f8;
  border-color: var(--color-black);
}
.ud-btn.ud-line-grayblue {
  border: 1px solid var(--color-d9);
  color: var(--color-blue-600);
}
.ud-btn.ud-line-grayblue > i {
  color: var(--color-blue-600);
}
.ud-btn.ud-line-grayblue:hover {
  background: #b6caec;
  border-color: #3f5d89;
}
.ud-btn.ud-line-orange {
  border: 1px solid var(--color-point);
  color: var(--color-point);
}
.ud-btn.ud-line-orange:hover {
  border-color: #fd9648;
  background-color: #ffead9;
}
.ud-btn.ud-row-action.type1 {
  background-color: #EEF5FF;
  border-color: var(--color-primary-400);
  color: var(--color-primary);
}
.ud-btn.ud-row-action.type1:hover {
  color: var(--color-primary-500);
}
.ud-btn.ud-row-action.type2 {
  background-color: var(--color-fa);
  border: 1px solid var(--color-d8);
  color: var(--color-444);
}
.ud-btn.ud-row-action.type2:hover {
  color: #1f1f1f;
}
.ud-btn.ud-icon {
  width: unset;
}
.ud-btn.ud-icon.del-btn > i {
  transform: translateY(1px);
}
.ud-btn.ud-icon [class^=ri-] {
  line-height: 1;
  font-weight: 500;
}
.ud-btn.ud-icon {
  /*  Size*/
}
.ud-btn.ud-icon.ud-btn-lg, .ud-btn.ud-icon.ud-btn-md {
  gap: 5px;
}
.ud-btn.ud-icon.ud-btn-lg [class^=ri-] {
  font-size: 24px;
}
.ud-btn.ud-icon.ud-btn-md [class^=ri-] {
  font-size: 20px;
}
.ud-btn.ud-icon.ud-btn-sm {
  gap: 3px;
}
.ud-btn.ud-icon.ud-btn-sm [class^=ri-] {
  font-size: 18px;
}
.ud-btn.ud-icon {
  /* Icon Only */
}
.ud-btn.ud-icon.only {
  min-width: unset;
  padding: 0;
  aspect-ratio: 1/1;
}
.ud-btn.ud-goust-primary {
  color: var(--color-primary);
}
.ud-btn.ud-goust-primary > i {
  color: var(--color-primary);
}
.ud-btn.ud-goust-gray {
  color: var(--color-black);
}
.ud-btn.ud-goust-gray > i {
  color: var(--color-black);
}
.ud-btn.ud-goust-grayblue {
  color: var(--color-blue-600);
}
.ud-btn.ud-goust-grayblue > i {
  color: var(--color-blue-600);
}
.ud-btn.ud-goust-orange {
  color: var(--color-point);
}
.ud-btn-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ud-btn-toggle > .input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.ud-btn-toggle > .track {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #B5B5B5;
  box-shadow: inset 0px 4px 4px rgba(123, 123, 123, 0.25);
  transition: background 0.25s ease;
  flex: none;
}
.ud-btn-toggle .thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(49.65% 49.65% at 55% 52.5%, #F9F9F9 0%, #F6F6F7 57.21%, #EFEFF1 82.69%, #FBFBFB 94.71%);
  transition: transform 0.25s ease;
}
.ud-btn-toggle > .input:checked + .track {
  background: var(--color-primary-500);
  box-shadow: inset 0px 4px 4px rgba(13, 36, 128, 0.25);
}
.ud-btn-toggle > .input:checked + .track .thumb {
  transform: translateX(16px);
}
.ud-btn-toggle > .input:focus-visible + .ud-btn-toggle > .track {
  box-shadow: 0 0 0 3px var(--primary-50), 0 0 0 4px var(--primary);
}
.ud-btn-toggle {
  /* 비활성 */
}
.ud-btn-toggle > .input:disabled + .track {
  background-color: var(--disabled-bg);
  cursor: not-allowed;
}
.ud-btn-toggle > .input:disabled + .track .thumb {
  opacity: 0.7;
}
.ud-btn-toggle:has(.input:disabled) {
  cursor: not-allowed;
}
.ud-btn {
  /* State */
}
.ud-btn:disabled {
  background-color: var(--disabled-bg) !important;
  border: 1px solid var(--disabled-border) !important;
  color: var(--disabled-txt) !important;
  cursor: not-allowed;
}
.ud-btn:disabled [class^=ri-] {
  color: var(--disabled-txt) !important;
}
.ud-btn {
  /* Layout */
}
.ud-btn-block.left {
  text-align: left;
}
.ud-btn-block.right {
  text-align: right;
}
.ud-btn-block.center {
  text-align: center;
}

.ud-table-action {
  gap: 8px;
}
.ud-table-action.left {
  text-align: left;
}
.ud-table-action.right {
  text-align: right;
}
.ud-table-action.center {
  text-align: center;
}

.ud-btn-block.left {
  text-align: left;
}
.ud-btn-block.right {
  text-align: right;
}
.ud-btn-block.center {
  text-align: center;
}

/* radio Box */
.radio-item {
  display: inline-block;
  vertical-align: top;
  padding: 6px 16px;
}
.radio-item input[type=radio] {
  display: none;
}
.radio-item input[type=radio] + label {
  display: inline-block;
  position: relative;
  padding-left: 26px;
  font-size: var(--h5);
  font-weight: 400;
  color: var(--color-444);
  line-height: 1.35;
  cursor: pointer;
}
.radio-item input[type=radio] + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background-color: var(--color-white);
  border: 1px solid var(--color-ccc);
  border-radius: 50%;
  z-index: 1;
}
.radio-item input[type=radio] + label:after {
  display: inline-block;
  position: absolute;
  left: 3px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 2;
}
.radio-item input[type=radio]:checked + label:before {
  border-color: var(--color-primary-500);
}
.radio-item input[type=radio]:checked + label:after {
  content: "";
  background-color: var(--color-primary-500);
}
.radio-item input[type=radio]:disabled + label {
  color: var(--disabled-txt);
  cursor: not-allowed;
}
.radio-item input[type=radio]:disabled + label:before {
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
}
.radio-item input[type=radio]:checked:disabled + label {
  color: var(--disabled-txt);
  cursor: not-allowed;
}
.radio-item input[type=radio]:checked:disabled + label:before {
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
}
.radio-item input[type=radio]:checked:disabled + label:after {
  background: var(--color-bbb);
}
.radio-item input[type=radio]:focus-visible + label::before {
  outline: 2px solid var(--color-black);
}

.radio-block {
  margin: 0 -12px;
}

/* Check Box */
.check-item {
  display: inline-block;
  vertical-align: top;
  padding: 4px 16px;
}
.check-item input[type=checkbox] {
  display: none;
}
.check-item input[type=checkbox] + label {
  display: inline-block;
  position: relative;
  padding-left: 26px;
  font-size: var(--h5);
  font-weight: 400;
  color: var(--color-444);
  line-height: 1.35;
  cursor: pointer;
}
.check-item input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-ccc);
  border-radius: 2px;
  box-sizing: border-box;
  z-index: 1;
}
.check-item input[type=checkbox] + label:after {
  display: inline-block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: url("../images/icon_check.png") no-repeat center center/contain;
  z-index: 2;
}
.check-item input[type=checkbox]:checked + label:before {
  border-color: var(--color-primary-500);
}
.check-item input[type=checkbox]:checked + label:after {
  content: "";
}
.check-item input[type=checkbox]:disabled + label {
  color: var(--disabled-txt);
  cursor: not-allowed;
}
.check-item input[type=checkbox]:disabled + label:before {
  background: var(--color-f2);
  border: 1px solid var(--color-ccc);
}
.check-item input[type=checkbox]:checked:disabled + label {
  color: var(--disabled-txt);
  cursor: not-allowed;
}
.check-item input[type=checkbox]:checked:disabled + label:before {
  background: var(--color-f2);
  border: 1px solid var(--color-ccc);
}
.check-item input[type=checkbox]:checked:disabled + label::after {
  background: url("../images/icon_check_disabled.png") no-repeat center center/contain;
}

.check-block {
  margin: 0 -12px;
}

/* Toggle Box */
.toggle-block {
  margin: 0 -12px;
}

.toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
}
.toggle-item .tit {
  font-weight: 500;
}

/* Input */
.ud-input {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 200px;
  max-width: 100%;
  height: var(--input-sz-md-2);
  padding: 5px 10px;
  border: 1px solid var(--color-ccc);
  font-size: var(--h5);
  font-weight: 400;
  color: var(--black-color);
}
.ud-input::-moz-placeholder {
  color: var(--placeholder);
}
.ud-input::placeholder {
  color: var(--placeholder);
}
.ud-input {
  /* Size */
}
.ud-input-item {
  display: inline-block;
}
.ud-input-item:has(.ud-input-lg) {
  min-width: 120px;
}
.ud-input-item:has(.ud-input-lg-2) {
  min-width: 120px;
}
.ud-input-item:has(.ud-input-md) {
  min-width: 90px;
}
.ud-input-item:has(.ud-input-md-2) {
  min-width: 90px;
}
.ud-input-item:has(.ud-input-sm) {
  min-width: unset;
}
.ud-input-lg {
  width: 100%;
  height: var(--input-sz-lg);
  border-radius: var(--rounded-sm);
  font-size: var(--h4);
  font-weight: 400;
}
.ud-input-lg-2 {
  width: 100%;
  height: var(--input-sz-lg-2);
  border-radius: var(--rounded-sm);
  font-size: var(--h5);
  font-weight: 400;
}
.ud-input-md {
  width: 100%;
  height: var(--input-sz-md);
  border-radius: var(--rounded-xs);
  font-size: var(--h5);
  font-weight: 400;
}
.ud-input-md-2 {
  width: 100%;
  height: var(--input-sz-md-2);
  border-radius: var(--rounded-xs);
  font-size: var(--h5);
  font-weight: 400;
}
.ud-input-sm {
  width: 100%;
  height: var(--input-sz-sm);
  border-radius: var(--rounded-xs);
  font-size: var(--h6);
  font-weight: 400;
}
.ud-input {
  /* State */
}
.ud-input:-moz-read-only {
  background-color: var(--readOnly-bg);
  border-color: var(--readOnly-border);
  cursor: default;
}
.ud-input:read-only {
  background-color: var(--readOnly-bg);
  border-color: var(--readOnly-border);
  cursor: default;
}
.ud-input:read-only::-moz-placeholder {
  color: var(--readOnly-txt);
}
.ud-input:-moz-read-only::placeholder {
  color: var(--readOnly-txt);
}
.ud-input:read-only::placeholder {
  color: var(--readOnly-txt);
}
.ud-input:disabled {
  background-color: var(--disabled-bg);
  border-color: var(--disabled-border);
  cursor: not-allowed;
}
.ud-input:disabled::-moz-placeholder {
  color: var(--disabled-txt);
}
.ud-input:disabled::placeholder {
  color: var(--disabled-txt);
}
.ud-input-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ud-input-item {
  /* 검증 */
}
.ud-input-item.alert-red .ud-input {
  border: 1px solid var(--color-red-100);
}
.ud-input-item.alert-green .ud-input {
  border: 1px solid var(--color-green-100);
}
.ud-input-item .input-alert {
  margin-top: 8px;
}
.ud-input-item .input-alert.type1 {
  color: var(--color-red-100);
}
.ud-input-item .input-alert.type2 {
  color: var(--color-green-100);
}
.ud-input-item .input-alert.type3 {
  color: var(--color-cool-gray-40);
}
.ud-input-item .input-alert > .tit {
  font-size: var(--h6);
  font-weight: 400;
  text-align: left;
}
.ud-input-item {
  /* Icon */
}
.ud-input-item.input-icon {
  position: relative;
}
.ud-input-item.input-icon .ud-input {
  padding-left: 44px;
  padding-right: 50px;
}
.ud-input-item.input-icon [class^=ri-] {
  position: absolute;
  top: 0;
  left: 16px;
  aspect-ratio: 1/1;
  font-size: 18px;
  color: #BEC0C5;
}
.ud-input-item {
  /* Password */
}
.ud-input-item:has(.pw-toggle-btn) {
  position: relative;
  z-index: 1;
}
.ud-input-item .pw-toggle-btn {
  z-index: 10;
}
.ud-input-item .pw-toggle-btn [class^=ri-] {
  position: static;
  aspect-ratio: unset;
}

/* 검증 */
.input-alert {
  margin-top: 8px;
}
.input-alert.type1 {
  color: var(--color-red-100);
}
.input-alert.type1 .tit {
  color: var(--color-red-100);
}
.input-alert.type2 {
  color: var(--color-green-100);
}
.input-alert.type2 .tit {
  color: var(--color-green-100);
}
.input-alert.type3 {
  color: var(--color-cool-gray-40);
}
.input-alert.type3 .tit {
  color: var(--color-gray-100);
}
.input-alert > .tit {
  font-size: var(--h6);
  font-weight: 400;
  text-align: left;
}

/* Date Input */
.input-date-block {
  display: flex;
  align-items: center;
  gap: 16px;
}
.input-date-block input[type=date] {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #fff url("../images/ic_calendar-line.png") no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}
.input-date-block input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 40px;
  height: 100%;
  cursor: pointer;
}

/* Input Combo */
.input-combo {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.input-combo:has(.check-item), .input-combo:has(.radio-item) {
  align-items: center;
  gap: 0;
}
.input-combo-wrap > div ~ div {
  margin-top: 12px;
}
.input-combo-wrap > .ud-text-box {
  display: inline-block;
}
.input-combo .ud-input-item {
  flex: 1;
  max-width: 450px;
}
.input-combo .ud-input-item .ud-input {
  min-width: unset;
}
.input-combo .ud-btn {
  min-width: 92px;
}
.lab-input-tit + .radio-block,
.lab-input-tit + .check-block {
  margin-top: 4px;
}

.radio-block .input-combo,
.check-block .input-combo {
  display: inline-flex;
  margin-top: -1px;
}

/* Textarea */
.ud-textarea {
  width: 100%;
  min-height: 210px;
  padding: 8px 12px;
  border: 1px solid var(--color-ccc);
  font-family: "Pretendard";
  font-size: var(--h5);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-black);
  resize: none;
}
.ud-textarea::-moz-placeholder {
  color: var(--placeholder);
}
.ud-textarea::placeholder {
  color: var(--placeholder);
}
.ud-textarea:-moz-read-only {
  background-color: var(--readOnly-bg);
  border-color: var(--readOnly-border);
  color: var(--readOnly-txt);
  cursor: default;
}
.ud-textarea:read-only {
  background-color: var(--readOnly-bg);
  border-color: var(--readOnly-border);
  color: var(--readOnly-txt);
  cursor: default;
}
.ud-textarea:read-only::-moz-placeholder {
  color: var(--readOnly-txt);
}
.ud-textarea:-moz-read-only::placeholder {
  color: var(--readOnly-txt);
}
.ud-textarea:read-only::placeholder {
  color: var(--readOnly-txt);
}
.ud-textarea:disabled {
  background-color: var(--disabled-bg);
  border-color: var(--disabled-border);
  color: var(--disabled-txt);
  cursor: not-allowed;
}
.ud-textarea:disabled::-moz-placeholder {
  color: var(--disabled-txt);
}
.ud-textarea:disabled::placeholder {
  color: var(--disabled-txt);
}
.ud-textarea-item label {
  display: inline-block;
  font-size: var(--h5);
  font-weight: 500;
  padding-bottom: 8px;
}

/* Select Box */
.ud-select {
  min-width: 120px;
  max-width: 100%;
  padding: 5px 30px 5px 12px;
  border: 1px solid var(--color-ccc);
  background: var(--color-white) url("../images/icon_sel_arrow.svg") no-repeat center right 6px/18px auto;
  font-weight: 400;
  color: var(--color-black);
  cursor: pointer;
  /* Size */
}
.ud-select-lg {
  height: var(--input-sz-lg);
  border-radius: var(--rounded-sm);
  font-size: var(--h4);
}
.ud-select-lg-2 {
  height: var(--input-sz-lg-2);
  border-radius: var(--rounded-sm);
  font-size: var(--h4);
}
.ud-select-md {
  height: var(--input-sz-md);
  border-radius: var(--rounded-xs);
  font-size: var(--h5);
}
.ud-select-md-2 {
  height: var(--input-sz-md-2);
  border-radius: var(--rounded-xs);
  font-size: var(--h5);
}
.ud-select-sm {
  height: var(--input-sz-sm);
  border-radius: var(--rounded-xs);
  font-size: var(--h6);
}
.ud-select {
  /* State */
}
.ud-select[readonly] {
  background: var(--readOnly-bg) url("../images/icon_sel_arrow_readonly.svg") no-repeat center right 6px/18px auto;
  border-color: var(--readOnly-border);
  color: var(--readOnly-txt);
  cursor: default;
}
.ud-select:disabled {
  background: var(--disabled-bg) url("../images/icon_sel_arrow_disabled.svg") no-repeat center right 6px/18px auto;
  border-color: var(--disabled-border);
  color: var(--disabled-txt);
  cursor: not-allowed;
}
.ud-select-block {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Component */
/* 컨트롤 버튼 공통 스타일 */
.segmented-control {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-d9);
}
.segmented-control .item {
  cursor: pointer;
  position: relative;
  flex-grow: 1;
}
.segmented-control .item ~ .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--color-d9);
}
.segmented-control .item:hover {
  background-color: var(--color-fa);
}
.segmented-control .item input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.segmented-control .item:has(input:checked) {
  background-color: var(--color-primary);
  font-weight: 600;
  color: var(--color-white);
}
.segmented-control .item:has(input:checked)::before {
  background-color: transparent;
}
.segmented-control .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* accordion */
.trg-btn-accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.trg-btn-accordion[aria-expanded=true] > i.ri-arrow-down-s-line {
  transform: rotate(180deg);
}
.trg-btn-accordion > i {
  transition: transform 0.35s ease;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.accordion-panel.is-open {
  grid-template-rows: 1fr;
  margin-top: 6px;
}
.accordion-panel-inner {
  overflow: hidden;
}

.accordion-item .trg-btn-accordion {
  width: 100%;
  padding: 8px 4px 8px 12px;
  border: 1px solid var(--color-ddd);
  border-radius: var(--rounded-sm);
}
.accordion-item .accordion-tit {
  text-align: left;
  flex: 1;
  padding-right: 16px;
}
.accordion-item .accordion-panel-body {
  padding: 20px 12px;
  border: 1px solid var(--color-ddd);
  background-color: var(--color-primary-100);
  border-radius: var(--rounded-sm);
}

/* Date Shortcut */
.date-shortcut {
  border-radius: var(--rounded-sm);
  overflow: hidden;
}
.date-shortcut.h-md {
  height: var(--input-sz-lg-2);
}
.date-shortcut.h-md-2 {
  height: var(--input-sz-md-2);
}
.date-shortcut.h-sm {
  height: var(--input-sz-md-2);
}
.date-shortcut .btn {
  width: 70px;
  font-size: var(--h4);
}

.tab-block,
.date-shortcut,
.scroll-fade {
  position: relative;
}
.tab-block::after,
.date-shortcut::after,
.scroll-fade::after {
  content: "";
  position: sticky;
  bottom: 0;
  right: -2px;
  flex-shrink: 0;
  display: none;
  width: 32px;
  min-height: 100%;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0.8) 60%, rgba(231, 231, 231, 0) 100%);
  pointer-events: none;
}

/* Date filter */
.date-filter-block {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.date-filter-block:has(.ud-text-box) {
  flex-direction: column;
  align-items: flex-start;
}
.date-filter-block .date-filter-block {
  margin-bottom: 12px;
}
.date-filter-block .input-date-block {
  flex-shrink: 0;
}
.date-filter-block .date-filter-tool {
  display: flex;
  align-items: center;
}
.date-filter-block .date-filter-tool-txt {
  color: var(--color-secondary);
}

/* File Upload */
.file-upload-wrap {
  display: block;
}
.file-upload-wrap > div ~ div {
  margin-top: 16px;
}
.file-upload-wrap .ud-text-box {
  display: inline-block;
}
.file-upload-block {
  position: relative;
}
.file-upload-block .upload-area {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.file-upload-block .upload-group {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 450px;
  min-width: 0;
}
.file-upload-block .upload-group .upload-file-btn {
  min-width: 100px;
  border-radius: 3px 0 0 3px;
}
.file-upload-block .upload-group .upload-file-name {
  width: calc(100% - 100px);
  border-radius: 0 3px 3px 0;
}
.file-upload-block .result-area .thum-aspect:has(img) {
  margin-top: 20px;
}
.file-upload-block .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.file-upload-block .file-input:focus + .ud-btn {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.file-upload-block .upload-file-name {
  flex: 1;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
  background-color: var(--color-white);
}
.file-upload-block .upload-file-name .tit {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--placeholder);
}
.file-upload-block .upload-file-name.is-selected .tit {
  color: var(--color-333);
}
.file-upload-block .del-btn {
  background-color: var(--color-fa);
  border: 1px solid var(--color-d8);
  color: var(--color-444);
}
.file-upload-block .del-btn > i {
  color: var(--color-444);
}
.file-upload-block .del-btn:hover {
  color: #1f1f1f;
}
.file-upload-block .del-btn:hover > i {
  color: #1f1f1f;
}

/* Tab Menu */
.tab-block {
  flex-wrap: wrap;
  min-height: 38px;
  margin-bottom: 24px;
  border: 0;
}
.tab-block.depth-2 {
  min-height: 30px;
  margin-bottom: 20px;
}
.tab-block.depth-2 .item.is-active {
  background: var(--color-444);
  color: var(--color-white);
}
.tab-block.depth-2 .btn {
  min-width: 80px;
  max-width: 150px;
  min-height: var(--input-sz-md-2);
  padding: 4px 12px;
  overflow: hidden;
}
.tab-block .btn {
  flex-shrink: 0;
  min-width: 140px;
  max-width: 170px;
  min-height: var(--input-sz-lg);
  height: 100%;
  padding: 4px 8px;
  box-shadow: 1px 0 0 0 var(--color-ddd), 0 1px 0 0 var(--color-ddd), 1px 1px 0 0 var(--color-ddd), 1px 0 0 0 var(--color-ddd) inset, 0 1px 0 0 var(--color-ddd) inset;
  font-size: var(--h5);
  line-height: 1.15;
}
.tab-block .item.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}
.tab-block .badge-type1 {
  margin-left: 8px;
}

.tab-content {
  padding: 0px 14px;
}
.tab-content.depth-2 {
  padding: 0 14px 20px;
}
.tab-content > .tab-block.depth-2 {
  margin-top: 20px;
}
.tab-content .section-title-wrap {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}
.tab-content .section-title-wrap .section-title-block {
  margin-bottom: 0;
}
.tab-content .section-title-block {
  margin-bottom: 20px;
}
.tab-content-tit-block {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* Popup */
.pop-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.pop-wrap.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
}
.pop-wrap.is-open .pop-block {
  transform: translateY(0);
}
.pop-wrap .pop-block {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 0 0;
  background: var(--color-white);
  border-radius: var(--rounded-sm);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.2);
  transform: translateY(8px);
  transition: transform 0.2s ease;
  overscroll-behavior: contain;
  /* Size */
}
.pop-wrap .pop-block.size-xs {
  width: 270px;
}
.pop-wrap .pop-block.size-xs .pop-body {
  min-height: 60px;
  padding-top: 16px;
  text-align: center;
}
.pop-wrap .pop-block.size-xs .pop-body .h5 {
  font-weight: 500;
}
.pop-wrap .pop-block.size-sm {
  width: 280px;
}
.pop-wrap .pop-block.size-sm .pop-body {
  min-height: 80px;
  padding-top: 16px;
  text-align: center;
}
.pop-wrap .pop-block.size-sm .pop-body .h5 {
  font-weight: 500;
}
.pop-wrap .pop-block.size-md {
  width: 540px;
  max-height: 80svh;
}
.pop-wrap .pop-block.size-md .pop-top {
  max-height: calc(80svh - 48px - 20px);
  overflow-y: auto;
}
.pop-wrap .pop-block.size-md .pop-bottom {
  background-color: var(--color-white);
}
.pop-wrap .pop-block.size-md .pop-bottom .ud-btn {
  min-height: 42px;
}
.pop-wrap .pop-block.size-md .pop-body {
  min-height: 250px;
  padding-top: 18px;
}
.pop-wrap .pop-block.size-lg {
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  max-height: unset;
  height: 100%;
  padding-top: 0;
  /* close 버튼은 레이아웃 트랙에 참여하지 않음 */
}
.pop-wrap .pop-block.size-lg .pop-close-btn {
  position: absolute;
  z-index: 3;
}
.pop-wrap .pop-block.size-lg .pop-top {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-top: 20px;
}
.pop-wrap .pop-block.size-lg .pop-bottom {
  flex-shrink: 0;
}
.pop-wrap .pop-block {
  /* table 관련 */
}
.pop-wrap .pop-block .form-table th {
  padding: 18px 10px;
}
.pop-wrap .pop-block .form-table th, .pop-wrap .pop-block .form-table .th {
  text-align: center;
}
.pop-wrap .pop-close-btn {
  position: absolute;
  top: 4px;
  right: 10px;
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}
.pop-wrap .pop-close-btn i {
  font-size: 20px;
}
.pop-wrap .pop-top {
  padding: 0 20px 24px;
}
.pop-wrap .pop-bottom {
  display: flex;
  align-items: center;
}
.pop-wrap .pop-bottom button {
  flex: 1;
  flex-shrink: 0;
  width: 50%;
  border-radius: unset;
}
.pop-wrap .pop-head .title {
  font-size: var(--h4);
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  word-break: keep-all;
  color: #222;
}
.pop-wrap .pop-body {
  font-size: 16px;
  line-height: 1.5;
  word-break: keep-all;
}
.pop-wrap .pop-body.v-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pop-wrap .pop-btn {
  position: relative;
}
.pop-wrap .pop-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
}
.pop-wrap .pop-btn button {
  border: 0;
}
.pop-wrap .pop-btn.type1::after {
  background-color: var(--color-primary-800);
}
.pop-wrap .pop-btn.type2::after {
  background-color: #E2E2E2;
}
.pop-wrap .pop-btn.type2 button {
  background-color: #F3F4F6;
}
.pop-wrap .pop-btn.type2 button:first-child {
  border-right: 1px solid #E2E2E2;
}
.pop-wrap .pop-btn.type2 button:not([data-pop-close]) {
  color: var(--color-red-100);
}
.pop-wrap.alert-wrap .alert-block {
  padding-top: 20px;
}
.pop-wrap.alert-wrap .alert-block.size-xs .alert-body {
  min-height: unset;
}

/*  Alert */
.alert-wrap .alert-head {
  gap: 8px;
  text-align: center;
}
.alert-wrap .alert-head i {
  font-size: 24px;
  font-weight: 600;
}
.alert-wrap .alert-head .title {
  padding-top: 8px;
}
.alert-wrap .alert-bottom {
  border-top: 1px solid #f9f9f9;
}

/* Dim */
.dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(17, 24, 39, 0.45);
}

.scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Form Table */
.form-table {
  border-top: 3px solid var(--color-primary);
}
.form-table th,
.form-table .th {
  height: 44px;
  background: var(--color-blue-15);
  color: var(--color-black);
  font-size: var(--h5);
  line-height: 1.4;
  vertical-align: middle;
  word-break: keep-all;
}
.form-table td,
.form-table .td {
  height: 44px;
  font-size: var(--h5);
  line-height: 1.4;
  color: var(--color-black);
}
.form-table td > .ud-text-box + .input-combo, .form-table td > .ud-text-box + .ud-input-item, .form-table td > .ud-text-box + .input, .form-table td > .ud-text-box + .ud-input-block, .form-table td > .ud-text-box + .check-block, .form-table td > .ud-text-box + .date-filter-block, .form-table td > .ud-text-box + .ud-textarea {
  margin-top: 12px;
}
.form-table .input-combo .ud-input-item {
  flex: 1;
  width: unset;
  max-width: 450px;
}
.form-table .ud-input-item {
  width: min(450px, 100%);
  min-width: unset;
}
.form-table .ud-select {
  width: min(218px, 100%);
}
.form-table .file-upload-wrap, .form-table .input-combo-wrap {
  display: block;
  width: 100%;
}
.form-table .align-center {
  text-align: center;
}

table.form-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--h5);
  table-layout: fixed;
}
table.form-table th,
table.form-table td {
  border-bottom: 1px solid var(--color-ddd);
  border-right: 0;
  text-align: left;
  vertical-align: middle;
}
table.form-table th {
  padding: 6px 16px;
}
table.form-table td {
  padding: 6px 10px;
}
table.form-table th:last-child,
table.form-table td:last-child {
  border-right: 0;
}
table.form-table .editor-block .editor-placeholder {
  min-height: 300px;
  border: 1px solid var(--color-cool-gray-15);
}

.form-table-div {
  font-size: var(--h5);
}
.form-table-div .row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
}
.form-table-div .th,
.form-table-div .td {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-ddd);
  border-right: 1px solid var(--color-ddd);
}
.form-table-div .th:last-child,
.form-table-div .td:last-child {
  border-right: 0;
}
.form-table-div .td-full {
  grid-column: 2/-1;
}
.form-table-div .input-combo {
  width: 100%;
}

.table-search-block .input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-search-btn {
  width: 25%;
  min-width: 250px;
}

.tool-top-block {
  display: flex;
  padding: 0 20px;
  margin-bottom: 16px;
}
.tool-top-info {
  display: flex;
  align-items: center;
}
.tool-top-info .filter-group {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tool-top-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}
.tool-top-action .sub-action, .tool-top-action .cta-action {
  display: flex;
  align-items: center;
}
.tool-top-action .sub-action {
  gap: 16px;
}
.tool-top-action .cta-action {
  gap: 8px;
}

.tool-bottom-block {
  padding-top: 32px;
}

/* Tree */
.diagnosis-control-block {
  flex: 1;
}
.diagnosis-control-block.tree-info .tree-body {
  height: auto;
  padding-top: 24px;
  padding-bottom: 24px;
}
.diagnosis-control-block.tree-info table.form-table th {
  padding: 18px 10px;
}

.diagnosis-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  background-color: var(--color-cool-gray-15);
}
.diagnosis-control-head-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.diagnosis-control-head-box {
  display: flex;
  gap: 8px;
}
.diagnosis-control-head-box .del-btn {
  background-color: var(--color-white);
}
.diagnosis-control-head .tit {
  flex: 1;
  width: calc(100% - 389px - 16px);
  min-width: 200px;
  padding-right: 10px;
  font-size: var(--h4);
  line-height: 1.3;
  font-weight: 600;
}

.diagnosis-control-body {
  flex: 0;
  height: calc(var(--content-100vh) - 56px - 64px);
  padding: 8px 14px 16px;
  overflow-y: auto;
  border: 1px solid var(--color-ddd);
  border-top: 0;
}

/* thumnail */
.thum-aspect img {
  display: inline-block;
  max-width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.cate-picker-extra {
  margin-top: 8px;
}
.cate-picker-extra > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.cate-picker-extra .cata-el {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--rounded-sm);
  border: 1px solid var(--color-d9);
}
.cate-picker-extra .cate-del {
  padding-left: 8px;
  font-size: 12px;
}

/* 뱃지 */
.badge-type1 {
  padding: 4px 8px 3px;
  font-size: var(--h6);
  font-weight: 500;
  border-radius: 24px;
  background-color: var(--color-f0);
  letter-spacing: -0.5px;
}
.badge-red {
  color: var(--color-red-100);
}
.badge-green {
  color: var(--color-green-100);
}
.badge-block {
  color: var(--color-black);
}

/* Responsive */
@media (prefers-reduced-motion: reduce) {
  .accordion-panel,
  .tree-arrow {
    transition: none;
  }
}
@media screen and (max-width: 1600px) {
  .tree-head {
    flex-direction: column;
  }
  .tree-head-group {
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-left: unset;
  }
  .tree-head-box:first-child {
    order: 3;
  }
  .tree-head-box:last-child {
    display: contents;
  }
  .tree-head-box:last-child .ud-btn {
    order: 3;
  }
  .tree-head .ud-btn[data-pop-id] {
    order: 1;
    width: 100%;
  }
  .tree-head .tit {
    width: 100%;
    text-align: left;
  }
}
@media screen and (max-width: 1440px) {
  .ud-text-box {
    padding: 10px 16px;
  }
}
@media screen and (max-width: 1280px) {
  .tab-block:not(.type2) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .tab-block:not(.type2) .btn {
    max-width: unset;
  }
}
@media screen and (max-width: 1024px) {
  /* Text */
  .h2 {
    font-size: 24px;
  }
  .h3 {
    font-size: 20px;
  }
  .h4 {
    font-size: 17px;
  }
  .h4 > * {
    font-size: 17px;
  }
  .h5 {
    font-size: 15px;
  }
  .h5 > * {
    font-size: 15px;
  }
  .ud-text-box {
    padding: 10px 14px;
  }
  .ud-text-box .tit {
    font-size: 15px;
  }
  .ud-text-box .tit > * {
    font-size: 15px;
  }
  .ud-text-box.type2 {
    padding: 12px 14px;
  }
  .ud-info-txt .tit {
    font-size: 15px;
  }
  .ud-info-txt .tit > * {
    font-size: 15px;
  }
  .ud-info-txt [class^=ri-] {
    font-size: 19px;
  }
  /* Icon */
  [class^=ri-], [class*=" ri-"] {
    font-size: 19px;
  }
  .ud-icon.icon-excel {
    width: 19px;
    height: 19px;
  }
  /* Button */
  .ud-btn {
    /* Size */
  }
  .ud-btn-lg {
    min-width: 100px;
  }
  .ud-btn-lg-2 {
    min-width: 85px;
  }
  .ud-btn-md {
    min-width: 85px;
  }
  .ud-btn-md-2 {
    min-width: 85px;
  }
  .ud-btn {
    /* Type */
  }
  .ud-btn.ud-line.ud-btn-lg > [class^=ri-] {
    font-size: 23px;
  }
  .ud-btn.ud-line.ud-btn-lg-2 > [class^=ri-] {
    font-size: 23px;
  }
  .ud-btn.ud-line.ud-btn-md > [class^=ri-] {
    font-size: 21px;
  }
  .ud-btn.ud-line.ud-btn-md-2 > [class^=ri-] {
    font-size: 21px;
  }
  /* Radio Box, Check Box */
  .radio-item,
  .check-item {
    padding: 8px 10px;
  }
  .radio-item input[type=radio] + label,
  .check-item input[type=checkbox] + label {
    padding-left: 26px;
  }
  .radio-item input[type=radio] + label::before,
  .check-item input[type=checkbox] + label::before {
    width: 20px;
    height: 20px;
  }
  .radio-block,
  .check-block {
    margin: 0 -10px;
  }
  /* Radio Box */
  .radio-item input[type=radio] + label::after {
    top: 5px;
    left: 4px;
    width: 12px;
    height: 12px;
  }
  /* Check Box */
  .check-item input[type=checkbox] + label::after {
    width: 13px;
    height: 13px;
  }
  /* Input */
  .ud-input-item {
    min-width: 450px;
    max-width: 100%;
  }
  /* Date Shortcut */
  .date-shortcut {
    width: 100%;
    padding-bottom: 8px;
    border: 0;
    overflow-x: auto;
  }
  .date-shortcut .item {
    flex-shrink: 0;
    padding: 14px 10px;
    border-radius: 24px;
    border: 1px solid var(--color-ddd);
    overflow: hidden;
  }
  .date-shortcut .item ~ .item {
    margin-left: 4px;
  }
  .date-shortcut .item ~ .item::before {
    display: none;
  }
  .date-shortcut .btn {
    width: auto !important;
  }
  /* Date filter */
  .date-filter-block {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  /* Popup */
  .pop-wrap .pop-block {
    padding-top: 30px;
  }
  .pop-wrap .pop-block.size-md .pop-body, .pop-wrap .pop-block.size-sm .pop-body {
    padding-top: 12px;
  }
  .pop-wrap .pop-block.size-sm {
    width: 350px;
  }
  .pop-wrap .pop-block.size-sm .pop-body {
    min-height: 100px;
  }
  .pop-wrap .pop-close-btn {
    top: 0;
    width: 32px;
    height: 32px;
  }
  /* Form Table */
  .form-table th,
  .form-table td,
  .form-table .th,
  .form-table .td {
    min-height: 55px;
    height: auto;
  }
  table.form-table:not(.type2) {
    display: block;
  }
  table.form-table:not(.type2) colgroup {
    display: none;
  }
  table.form-table:not(.type2) tbody {
    display: block;
  }
  table.form-table:not(.type2) tr {
    display: grid;
    grid-template-columns: 140px 1fr;
  }
  table.form-table:not(.type2) th {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-right: 1px solid var(--color-ddd);
    border-bottom: 1px solid var(--color-ddd);
    word-break: keep-all;
  }
  table.form-table:not(.type2) td {
    display: grid;
    align-items: center;
    padding: 8px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--color-ddd);
  }
  .form-table-div:not(.type2) .row {
    grid-template-columns: 140px 1fr;
  }
  .form-table-div:not(.type2) .th {
    display: flex;
    align-items: center;
    padding: 8px 18px;
    border-right: 1px solid var(--color-ddd);
  }
  .form-table-div:not(.type2) .td {
    padding: 8px 18px;
    border-right: 0;
  }
  .form-table-div:not(.type2) .td-full {
    grid-column: 2/-1;
  }
  .tool-top-block {
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }
  .tool-top-info {
    width: 100%;
  }
  .tool-top-info .filter-group {
    width: 100%;
    padding-bottom: 6px;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-f5);
  }
  .tool-top-action {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tool-top-action .sub-action:not(:has(.ud-btn.ud-icon.only)),
  .tool-top-action .cta-action {
    display: contents;
  }
  .tool-top-action .sub-action:not(:has(.ud-btn.ud-icon.only)) .ud-btn,
  .tool-top-action .cta-action .ud-btn {
    flex: 0 1 calc(50% - 4px);
  }
  .tool-top-action .sub-action:not(:has(.ud-btn.ud-icon.only)) .ud-btn.ud-icon.only,
  .tool-top-action .cta-action .ud-btn.ud-icon.only {
    flex: unset;
  }
  .tool-top-action .sub-action:has(.ud-btn.ud-icon.only) {
    order: 1;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 8px;
  }
  .tool-top-action .sub-action .ud-require-txt {
    width: 100%;
  }
  /* Tree */
  .diagnosis-control-list {
    min-width: 390px;
  }
  .tree-body .trg-btn-accordion,
  .tree-body .tree-leaf {
    gap: 5px;
    padding: 8px;
  }
  .control-list-head {
    min-height: 90px;
    padding: 8px 14px;
  }
  .control-list-head-group {
    gap: 8px;
  }
  .control-list-head-box {
    gap: 4px;
  }
  .control-list-head-box .ud-btn {
    padding: 0 8px;
  }
  .control-list-head .tit {
    font-size: 18px;
  }
  .tree-body {
    height: auto;
    padding: 10px 10px 16px;
  }
  .tree-body .accordion-panel-body {
    padding-left: 23px;
  }
}
@media screen and (max-width: 768px) {
  /* Text */
  .h2 {
    font-size: 22px;
  }
  .h3 {
    font-size: 18px;
  }
  .h4 {
    font-size: 16px;
  }
  .h5 {
    font-size: 15px;
  }
  .h6 {
    font-size: 14px;
  }
  .ud-text-box {
    padding: 10px 12px;
  }
  .ud-text-box.type2 {
    padding: 10px 12px;
  }
  .ud-info-txt [class^=ri-] {
    font-size: 18px;
  }
  /* Icon */
  [class^=ri-], [class*=" ri-"] {
    font-size: 18px;
  }
  .ud-icon.icon-excel {
    width: 18px;
    height: 18px;
  }
  /* Button */
  .ud-btn {
    padding: 0 12px;
    /* Size */
  }
  .ud-btn-lg {
    min-width: 90px;
  }
  .ud-btn-lg-2 {
    min-width: 80px;
  }
  .ud-btn-md {
    min-width: 80px;
  }
  .ud-btn-md-2 {
    min-width: 80px;
  }
  .ud-btn {
    /* Type */
  }
  .ud-btn.ud-line.ud-btn-lg > [class^=ri-] {
    font-size: 22px;
  }
  .ud-btn.ud-line.ud-btn-lg-2 > [class^=ri-] {
    font-size: 22px;
  }
  .ud-btn.ud-line.ud-btn-md > [class^=ri-] {
    font-size: 20px;
  }
  .ud-btn.ud-line.ud-btn-md-2 > [class^=ri-] {
    font-size: 20px;
  }
  /* Check Box */
  .check-item input[type=checkbox] + label::before {
    top: -1px;
  }
  .check-item input[type=checkbox] + label::after {
    top: 2px;
  }
  /* Input */
  .ud-input {
    padding: 8px 10px;
  }
  /* Input Combo */
  .input-combo .ud-btn {
    min-width: 80px;
  }
  /* Select Box */
  .ud-select {
    padding: 8px 34px 6px 10px;
  }
  /* Date Input */
  .input-date-block {
    gap: 8px;
  }
  /* Date filter */
  .date-filter-block .input-date-block {
    flex-shrink: unset;
    width: 100%;
  }
  .date-filter-block .input-date-block .ud-input {
    min-width: 0;
    width: min(50% - 8px, 100%);
  }
  .date-shortcut::after,
  .scroll-fade::after {
    display: block;
  }
  /* Popup */
  .pop-wrap .pop-block {
    padding-top: 30px;
  }
  .pop-wrap .pop-block.size-md .pop-body, .pop-wrap .pop-block.size-sm .pop-body {
    padding-top: 8px;
  }
  .pop-wrap .pop-block .form-table th {
    padding: 8px;
  }
  .pop-wrap .pop-top {
    padding: 0 16px 20px;
  }
  .tool-top-action {
    gap: 4px;
  }
  /* File Upload */
  .file-upload-wrap div ~ div {
    margin-top: 12px;
  }
  .file-upload-block .upload-group .upload-file-btn {
    min-width: 74px;
    padding: 0 8px;
  }
  /* Popup */
  .pop-wrap .pop-block.size-md {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 90svh;
  }
  .pop-wrap .pop-block.size-md .pop-top {
    flex: 1;
    max-height: unset;
  }
  .pop-wrap .pop-block.size-md .pop-bottom {
    flex-shrink: 0;
  }
  .pop-wrap .pop-block.size-lg {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    max-height: unset;
    padding-top: 0;
  }
  .pop-wrap .pop-block.size-lg .pop-close-btn {
    position: absolute;
    z-index: 3;
  }
  .pop-wrap .pop-block.size-lg .pop-top {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-top: 20px;
  }
  .pop-wrap .pop-block.size-lg .pop-bottom {
    flex-shrink: 0;
  }
  .form-table .input-date-block {
    width: min(478px, 100%);
  }
  .form-table .input-date-block .ud-input {
    flex: 1;
    min-width: unset;
  }
  .form-table th,
  .form-table .th,
  .form-table td,
  .form-table .td {
    min-height: 46px;
  }
  table.form-table:not(.type2) tr {
    grid-template-columns: 100%;
  }
  table.form-table:not(.type2) th, table.form-table:not(.type2) td {
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    padding: 8px;
    box-sizing: border-box;
  }
  table.form-table:not(.type2) th {
    border-right: 0;
    border-bottom: 0;
  }
  table.form-table:not(.type2) td:not(.editor-block) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid var(--color-ddd);
  }
  table.form-table:not(.type2) .td-full {
    grid-column: auto;
  }
  table.form-table:not(.type2) .input-combo {
    width: 100%;
  }
  table.form-table:not(.type2) .table-search-block .input-group {
    gap: 4px;
  }
  .form-table-div:not(.type2) .row {
    grid-template-columns: 1fr;
  }
  .form-table-div:not(.type2) .th {
    min-height: 38px;
    padding: 4px 8px;
    border-right: 0;
    border-bottom: 0;
  }
  .form-table-div:not(.type2) .td {
    min-height: 38px;
    padding: 4px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--color-ddd);
  }
  .form-table-div:not(.type2) .td-full {
    grid-column: auto;
  }
  table.form-table + .ud-btn-block .table-search-btn {
    min-width: 200px;
  }
  /* Tree */
  .tree-body .trg-btn-accordion,
  .tree-body .tree-leaf {
    gap: 3px;
  }
  .diagnosis-control-list {
    width: 100%;
    min-width: unset;
  }
  .control-list-head {
    gap: 10px;
    min-height: auto;
    padding: 8px 14px;
  }
  .control-list-head .tit {
    width: 100%;
  }
  .tree-body {
    height: auto;
    padding: 8px;
  }
  .tree-body .accordion-panel-body {
    padding-left: 20px;
  }
  .accordion-panel.is-open {
    margin-top: 4px;
  }
}
@media screen and (max-width: 360px) {
  /* Text */
  .h2 {
    font-size: 20px;
  }
  .ud-text-box {
    padding: 6px 10px;
  }
  .ud-text-box.type2 {
    padding: 6px 10px;
  }
  .ud-text-box::before {
    width: 3px;
  }
  .ud-text-box .tit {
    line-height: 1.2;
  }
  /* Button */
  .ud-btn {
    padding: 0 10px;
    /* Size */
  }
  .ud-btn-lg {
    min-width: 80px;
  }
  .ud-btn-lg-2 {
    min-width: 70px;
  }
  .ud-btn-md {
    min-width: 70px;
  }
  .ud-btn-md-2 {
    min-width: 70px;
  }
  .ud-btn {
    /* Type */
  }
  /* Radio Box, Check Box */
  .radio-item,
  .check-item {
    padding: 6px 8px;
  }
  .radio-block,
  .check-block {
    margin: 0 -8px;
  }
  .ud-input-block {
    flex-direction: column;
  }
  .ud-input-item,
  .ud-input-item .ud-input,
  .ud-input-item:has(.ud-input-md),
  .ud-select {
    min-width: 100%;
  }
  .input-combo {
    flex-wrap: wrap;
  }
  .input-combo .ud-btn {
    min-width: 100%;
    height: 44px;
  }
  /* 컨트롤 버튼 공통 스타일 */
  .segmented-control .item:has(input:checked) {
    font-weight: 400;
  }
  /* Date filter */
  .date-filter-block .input-date-block {
    flex-wrap: wrap;
    gap: 4px;
  }
  .date-filter-block .input-date-block .ud-input {
    width: 100%;
  }
  .date-filter-block .input-date-block .ud-input:first-child {
    width: calc(100% - 10px - 12px);
  }
  .tab-block::after {
    display: block;
  }
  /* File Upload */
  .file-upload-wrap div ~ div {
    margin-top: 16px;
  }
  .file-upload-block .upload-area {
    flex-direction: column;
    gap: 6px;
  }
  .file-upload-block .upload-area .upload-group {
    max-width: unset;
    width: 100%;
  }
  .file-upload-block .upload-area > .del-btn {
    width: 100%;
    height: 44px;
  }
  .file-upload-block .upload-area > .del-btn i {
    font-size: 18px;
  }
  .input-combo-wrap > div ~ div {
    margin-top: 16px;
  }
  /* Popup */
  .pop-wrap .pop-top {
    padding: 0 12px 20px;
  }
  /* Form Table */
  .form-table .input-combo {
    flex-wrap: wrap;
  }
  .form-table .input-combo .ud-input-item {
    flex: unset;
    width: 100%;
  }
  .form-table .input-combo .ud-btn {
    width: 100%;
  }
  .form-table .input-date-block {
    flex-wrap: wrap;
  }
  table.form-table + .ud-btn-block .table-search-btn {
    width: 100%;
    min-width: unset;
  }
  .tool-top-action .sub-action .ud-btn,
  .tool-top-action .cta-action .ud-btn {
    min-width: auto;
  }
  .date-filter-block {
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }
  .date-filter-block .input-date-block .ud-input {
    width: 100%;
  }
  .date-filter-block .input-date-block .ud-input:first-child {
    width: calc(100% - 10px - 12px);
  }
  .date-filter-block .date-filter-tool {
    align-items: flex-start;
    flex-direction: column;
  }
  /* Tab Menu */
  .tab-block {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .tab-block .btn {
    width: auto;
    min-width: unset;
    min-height: 38px;
    padding: 8px 16px;
    white-space: nowrap;
  }
  /* Tree */
  .control-list-head {
    gap: 8px;
    padding: 10px 10px;
  }
  .tree-body {
    padding: 8px 4px 16px;
  }
}