@charset "UTF-8";
/*───────────────────────────────────────
    📌 Pretendard

    Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
    https://github.com/orioncactus/pretendard

    This Font Software is licensed under the SIL Open Font License, Version 1.1.
    This license is copied below, and is also available with a FAQ at:
    http://scripts.sil.org/OFL
───────────────────────────────────────*/
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("../fonts/Pretendard/Pretendard-Bold.woff2") format("woff2"), url("../fonts/Pretendard/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("../fonts/Pretendard/Pretendard-SemiBold.woff2") format("woff2"), url("../fonts/Pretendard/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("../fonts/Pretendard/Pretendard-Medium.woff2") format("woff2"), url("../fonts/Pretendard/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("../fonts/Pretendard/Pretendard-Regular.woff2") format("woff2"), url("../fonts/Pretendard/Pretendard-Regular.woff") format("woff");
}
/*───────────────────────────────────────
    📌 sso-icon
───────────────────────────────────────*/
@font-face {
  font-family: "sso-icon";
  src: url("../fonts/sso-icon/sso-icon.eot?80588715");
  src: url("../fonts/sso-icon/sso-icon.eot?80588715#iefix") format("embedded-opentype"), url("../fonts/sso-icon/sso-icon.woff2?80588715") format("woff2"), url("../fonts/sso-icon/sso-icon.woff?80588715") format("woff"), url("../fonts/sso-icon/sso-icon.ttf?80588715") format("truetype"), url("../fonts/sso-icon/sso-icon.svg?80588715#sso-icon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*───────────────────────────────────────
    📌 reset
───────────────────────────────────────*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input,
button,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

html,
body {
  width: 100%;
}

body {
  -webkit-text-size-adjust: none;
}

img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul,
dl,
li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

legend,
caption {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

textarea {
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
          appearance: none;
  resize: none;
  -webkit-apprearance: none;
  -moz-appearance: none;
}

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

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

[role=button],
input[type=submit],
input[type=reset],
input[type=button],
button {
  box-sizing: content-box;
}

input[type=submit],
input[type=reset],
input[type=button],
button {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  line-height: normal;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

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

[role=button] {
  display: inline-block;
  color: inherit;
  cursor: default;
  text-align: center;
  text-decoration: none;
  white-space: pre;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

/*───────────────────────────────────────
    📌 root
───────────────────────────────────────*/
:root {
  --sso-font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --sso-inner: 1350px;
  --sso-lnb-width: 260px;
  --sso-content-width: 1095px;
  --sso-footer-height: 50px;
  --sso-primary-100: #f6f8fb;
  --sso-primary-200: #edf2f9;
  --sso-primary-300: #3353a3;
  --sso-primary-400: #274795;
  --sso-secondary-100: #f6faff;
  --sso-secondary-200: #f1f9ff;
  --sso-secondary-300: #0774c9;
  --sso-secondary-400: #005a9f;
  --sso-lnb: #fff;
  --sso-lnb-active: #f1f3f9;
  --sso-lnb-text: #353d4b;
  --sso-lnb-icon: #353d4b;
  --sso-grayscale-100: #f6f8fb;
  --sso-grayscale-200: #f1f3f9;
  --sso-grayscale-300: #d4d9e1;
  --sso-grayscale-400: #919bad;
  --sso-grayscale-500: #89909d;
  --sso-grayscale-600: #353d4b;
  --sso-red-100: #feecf0;
  --sso-red-200: #d50136;
  --sso-red-300: #bd002f;
  --sso-yellow-100: #ffeac1;
  --sso-yellow-200: #ffb724;
  --sso-grayscale-0: #fff;
  --sso-grayscale-max: #000;
  --sso-grayscale-max-50: rgba(0, 0, 0, 0.5);
  --sso-error: #e24343;
  --sso-error-100: #f7d0d0;
  --sso-error-200: #f11818;
  --sso-error-300: #f11f18;
  --sso-warning: #ffa978;
  --sso-success: #36af55;
  --sso-success-100: #43e27d26;
  --sso-success-200: #cdec9e;
  --sso-success-300: #18f139;
  --sso-complete-100: #edf2f9;
  --sso-complete-200: #3353a3;
  --sso-border-100: #e5e9f2;
  --sso-shadow-primary: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  --sso-shadow-primary-100: 0 5px 20px 0 #353d4b1a;
  --sso-shadow-primary-200: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
  --sso-timetable-selected: #ffdbdb;
  --sso-focus: #ffa94d;
  --sso-font-size-12: 12px;
  --sso-font-size-14: 14px;
  --sso-font-size-16: 16px;
  --sso-font-size-18: 18px;
  --sso-font-size-20: 20px;
  --sso-font-size-22: 22px;
  --sso-font-size-24: 24px;
  --sso-font-size-25: 25px;
  --sso-font-size-28: 28px;
  --sso-font-size-30: 30px;
  --sso-font-size-32: 32px;
  --sso-font-size-40: 40px;
  --sso-font-size-42: 42px;
  --sso-font-size-50: 50px;
  --sso-font-weight-regular: 400;
  --sso-font-weight-medium: 500;
  --sso-font-weight-semiBold: 600;
  --sso-font-weight-bold: 700;
  --sso-border-radius-ms: 2px;
  --sso-border-radius-xs: 4px;
  --sso-border-radius-sm: 5px;
  --sso-border-radius-md: 6px;
  --sso-border-radius-lg: 10px;
  --sso-border-radius-xl: 20px;
  --sso-border-radius-max: 999px;
  --sso-border-radius-half: 50%;
  --sso-icon-size-xs: 14px;
  --sso-icon-size-xs: 16px;
  --sso-icon-size-sm: 20px;
  --sso-icon-size-md: 24px;
  --sso-icon-size-lg: 40px;
  --sso-z-index-one: 1;
  --sso-z-index-max: 2;
}

/*───────────────────────────────────────
    📌 theme
───────────────────────────────────────*/
.sso.bbc-theme-1 {
  --sso-primary-100: #f6f8fb;
  --sso-primary-200: #edf2f9;
  --sso-primary-300: #3353a3;
  --sso-primary-400: #274795;
  --sso-secondary-100: #f6faff;
  --sso-secondary-200: #f1f9ff;
  --sso-secondary-300: #0774c9;
  --sso-secondary-400: #005a9f;
  --sso-lnb: #4b5a75;
  --sso-lnb-active: #364763;
  --sso-lnb-text: #fff;
  --sso-lnb-icon: #fff;
}
.sso.bbc-theme-2 {
  --sso-primary-100: #f6f8fb;
  --sso-primary-200: #edf2f9;
  --sso-primary-300: #3353a3;
  --sso-primary-400: #274795;
  --sso-secondary-100: #f6faff;
  --sso-secondary-200: #f1f9ff;
  --sso-secondary-300: #0774c9;
  --sso-secondary-400: #005a9f;
  --sso-lnb: #4b5a75;
  --sso-lnb-active: #364763;
  --sso-lnb-text: #fff;
  --sso-lnb-icon: #fff;
}
.sso.bbc-theme-3 {
  --sso-primary-100: #f6f8fb;
  --sso-primary-200: #edf2f9;
  --sso-primary-300: #3353a3;
  --sso-primary-400: #274795;
  --sso-secondary-100: #f6faff;
  --sso-secondary-200: #f1f9ff;
  --sso-secondary-300: #0774c9;
  --sso-secondary-400: #005a9f;
  --sso-lnb: #4b5a75;
  --sso-lnb-active: #364763;
  --sso-lnb-text: #fff;
  --sso-lnb-icon: #fff;
}

/*───────────────────────────────────────
    📌 common
───────────────────────────────────────*/
html,
body {
  -webkit-overflow-scrolling: touch;
}

.no-scroll,
.no-scroll body {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}

body {
  color: var(--sso-grayscale-600);
  font-family: var(--sso-font-family);
  font-weight: var(--sso-font-weight-regular);
  background-color: var(--sso-grayscale-0);
  line-height: 1;
}

:focus-visible {
  outline-width: 2px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: var(--sso-focus);
}

.sso {
  color: var(--sso-grayscale-600);
  font-family: var(--sso-font-family);
  font-weight: var(--sso-font-weight-regular);
  line-height: 1;
}
.sso select,
.sso input,
.sso textarea,
.sso button {
  font-family: var(--sso-font-family);
}
.sso .visually-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 1px;
  border: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.sso .rel {
  position: relative;
}
.sso .top-5 {
  top: 5px;
}
.sso .top-10 {
  top: 10px;
}
.sso .block {
  display: block;
}
.sso .display-table {
  display: table !important;
}
.sso .display-none {
  display: none !important;
}
.sso .grid {
  display: grid !important;
}
.sso .grid-row-1f {
  grid-template-rows: 1fr;
}
.sso .grid-row-47 {
  grid-template-rows: repeat(2, 47px);
}
.sso .grid-row-75-auto {
  grid-template-rows: 75px auto;
}
.sso .grid-row-75 {
  grid-template-rows: repeat(3, 75px);
}
.sso .grid-row-75-3-auto {
  grid-template-rows: 70px 70px 70px auto;
}
.sso .grid-row-gap-20 {
  gap: 20px;
}
.sso .grid-col-25 {
  grid-template-columns: repeat(4, calc(25% - 15px));
}
.sso .grid-col-160-auto {
  grid-template-columns: 160px auto;
}
.sso .grid-col-r3-percent-33 {
  grid-template-columns: repeat(3, calc(33.3333333333% - 7px));
}
.sso .grid-col-328 {
  grid-template-columns: repeat(3, 328px);
}
.sso .grid-col-174-auto {
  grid-template-columns: 174px auto;
}
.sso .grid-col-392 {
  grid-template-columns: repeat(2, 392px);
}
.sso .grid-col-percent-25-auto {
  grid-template-columns: 25% auto;
}
.sso .grid-col-2-1f {
  grid-template-columns: repeat(2, 1fr);
}
.sso .grid-col-62-38 {
  grid-template-columns: calc(62% - 20px) calc(38% - 20px);
}
.sso .grid-col-gap-10 {
  gap: 10px;
}
.sso .grid-col-gap-20 {
  gap: 20px;
}
.sso .grid-col-gap-30 {
  gap: 30px;
}
.sso .grid-col-gap-40 {
  gap: 40px;
}
.sso .flex {
  display: flex !important;
}
.sso .flex-1 {
  flex: 1;
}
.sso .flex-wrap {
  flex-wrap: wrap;
}
.sso .flex-align-start {
  align-items: flex-start;
}
.sso .flex-align-center {
  align-items: center;
}
.sso .flex-align-end {
  align-items: flex-end;
}
.sso .flex-left {
  justify-content: left;
}
.sso .flex-left-center {
  align-items: center;
}
.sso .flex-left-center {
  align-items: center;
}
.sso .flex-dr-col {
  flex-direction: column;
}
.sso .flex-right {
  justify-content: right;
}
.sso .flex-right-center {
  align-items: center;
}
.sso .flex-center {
  justify-content: center;
  align-items: center;
}
.sso .flex-between {
  justify-content: space-between;
}
.sso .flex-between-center {
  align-items: center;
}
.sso .flex-gap-4 {
  gap: 4px;
}
.sso .flex-gap-10 {
  gap: 10px;
}
.sso .flex-gap-14 {
  gap: 14px;
}
.sso .flex-gap-20 {
  gap: 20px;
}
.sso .flex-gap-30 {
  gap: 30px;
}
.sso .flex-gap-50 {
  gap: 50px;
}
.sso .flex-col-gap-10 {
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.sso .flex-col-gap-20 {
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.sso .flex-row-gap-5 {
  row-gap: 5px;
}
.sso .w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.sso .w-full {
  width: 100% !important;
}
.sso .w-0 {
  width: 0;
}
.sso .w-full-subtract-125 {
  width: calc(100% - 125px);
}
.sso .w-full-subtract-174 {
  width: calc(100% - 174px);
}
.sso .w-full-subtract-284 {
  width: calc(100% - 284px);
}
.sso .w-full-subtract-308 {
  width: calc(100% - 284px);
}
.sso .w-percent-25 {
  width: 25%;
}
.sso .w-percent-50 {
  width: 50%;
}
.sso .w-percent-75 {
  width: 75%;
}
.sso .w-percent-33 {
  width: 33.3333333333%;
}
.sso .w-44 {
  width: 44px;
}
.sso .w-100 {
  width: 100px;
}
.sso .w-114 {
  width: 114px;
}
.sso .w-120 {
  width: 120px;
}
.sso .w-125 {
  width: 125px;
}
.sso .w-143 {
  width: 143px;
}
.sso .w-174 {
  width: 174px;
}
.sso .w-179 {
  width: 179px;
}
.sso .w-180 {
  width: 180px;
}
.sso .w-230 {
  width: 230px;
}
.sso .w-266 {
  width: 266px;
}
.sso .w-270 {
  width: 270px;
}
.sso .w-280 {
  width: 280px;
}
.sso .w-300 {
  width: 300px;
}
.sso .w-340 {
  width: 340px;
}
.sso .w-360 {
  width: 360px;
}
.sso .w-520 {
  width: 520px;
}
.sso .w-787 {
  width: 787px;
}
.sso .min-h-190 {
  min-height: 190px !important;
}
.sso .min-h-200 {
  min-height: 200px !important;
}
.sso .min-h-300 {
  min-height: 300px !important;
}
.sso .min-h-460 {
  min-height: 460px;
}
.sso .min-h-676 {
  min-height: 676px !important;
}
.sso .min-h-748 {
  min-height: 748px !important;
}
.sso .max-h-600 {
  max-height: 600px !important;
}
.sso .max-h-800 {
  max-height: 800px !important;
}
.sso .max-h-955 {
  max-height: 955px !important;
}
.sso .h-full {
  height: 100%;
}
.sso .h-22 {
  height: 22px;
}
.sso .h-50 {
  height: 50px;
}
.sso .h-84 {
  height: 84px;
}
.sso .h-130 {
  height: 130px;
}
.sso .h-200 {
  height: 200px;
}
.sso .h-350 {
  height: 350px;
}
.sso .h-380 {
  height: 380px;
}
.sso .h-400 {
  height: 400px;
}
.sso .h-430 {
  height: 430px;
}
.sso .h-500 {
  height: 500px;
}
.sso .h-505 {
  height: 505px;
}
.sso .h-569 {
  height: 569px;
}
.sso .h-776 {
  height: 776px;
}
.sso .border-box {
  box-sizing: border-box;
}
.sso .mt-0 {
  margin-top: 0 !important;
}
.sso .mt-10 {
  margin-top: 10px;
}
.sso .mt-20 {
  margin-top: 20px;
}
.sso .mt-24 {
  margin-top: 24px;
}
.sso .mt-25 {
  margin-top: 25px;
}
.sso .mt-30 {
  margin-top: 30px;
}
.sso .mt-40 {
  margin-top: 40px;
}
.sso .mt-50 {
  margin-top: 50px;
}
.sso .mt-100 {
  margin-top: 100px;
}
.sso .mt-120 {
  margin-top: 120px;
}
.sso .mb-0 {
  margin-bottom: 0 !important;
}
.sso .mb-4 {
  margin-bottom: 4px;
}
.sso .mb-10 {
  margin-bottom: 10px;
}
.sso .mb-14 {
  margin-bottom: 14px !important;
}
.sso .mb-15 {
  margin-bottom: 15px;
}
.sso .mb-16 {
  margin-bottom: 16px;
}
.sso .mb-20 {
  margin-bottom: 20px !important;
}
.sso .mb-24 {
  margin-bottom: 24px;
}
.sso .mb-25 {
  margin-bottom: 25px;
}
.sso .mb-30 {
  margin-bottom: 30px;
}
.sso .mb-40 {
  margin-bottom: 40px;
}
.sso .mb-50 {
  margin-bottom: 50px;
}
.sso .mb-60 {
  margin-bottom: 60px;
}
.sso .mb-100 {
  margin-bottom: 100px;
}
.sso .ml-auto {
  margin-left: auto;
}
.sso .ml-30 {
  margin-left: 30px;
}
.sso .mr-10 {
  margin-right: 10px;
}
.sso .mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.sso .my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.sso .p-0 {
  padding: 0px !important;
}
.sso .p-4 {
  padding: 4px;
}
.sso .p-10 {
  padding: 10px !important;
}
.sso .p-12 {
  padding: 10px;
}
.sso .p-14 {
  padding: 14px !important;
}
.sso .p-20 {
  padding: 20px;
}
.sso .p-30 {
  padding: 30px;
}
.sso .p-40 {
  padding: 40px !important;
}
.sso .pl-30 {
  padding-left: 30px;
}
.sso .pl-50 {
  padding-left: 50px;
}
.sso .pt-0 {
  padding-top: 0px !important;
}
.sso .pt-20 {
  padding-top: 20px;
}
.sso .pt-30 {
  padding-top: 30px;
}
.sso .pt-40 {
  padding-top: 40px;
}
.sso .pt-80 {
  padding-top: 80px;
}
.sso .pt-100 {
  padding-top: 100px;
}
.sso .pb-20 {
  padding-bottom: 20px;
}
.sso .pb-14 {
  padding-bottom: 14px;
}
.sso .pb-30 {
  padding-bottom: 30px;
}
.sso .pb-40 {
  padding-bottom: 40px;
}
.sso .pb-80 {
  padding-bottom: 80px;
}
.sso .pb-100 {
  padding-bottom: 100px;
}
.sso .px-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.sso .px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.sso .px-14 {
  padding-left: 14px;
  padding-right: 14px;
}
.sso .px-25 {
  padding-left: 25px;
  padding-right: 25px;
}
.sso .px-32 {
  padding-left: 32px;
  padding-right: 32px;
}
.sso .px-52 {
  padding-left: 52px;
  padding-right: 52px;
}
.sso .py-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.sso .py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.sso .txt-center {
  text-align: center !important;
}
.sso .txt-left {
  text-align: left !important;
}
.sso .txt-vertical-mid {
  vertical-align: middle;
}
.sso .fs-12 {
  font-size: var(--sso-font-size-12);
}
.sso .fs-14 {
  font-size: var(--sso-font-size-14) !important;
}
.sso .fs-24 {
  font-size: var(--sso-font-size-24);
}
.sso .fs-16 {
  font-size: var(--sso-font-size-16) !important;
}
.sso .fs-18 {
  font-size: var(--sso-font-size-18) !important;
}
.sso .fs-20 {
  font-size: var(--sso-font-size-20);
}
.sso .fs-22 {
  font-size: var(--sso-font-size-22);
}
.sso .fs-24 {
  font-size: var(--sso-font-size-24);
}
.sso .fs-28 {
  font-size: var(--sso-font-size-28);
}
.sso .fs-30 {
  font-size: var(--sso-font-size-30);
}
.sso .fs-32 {
  font-size: var(--sso-font-size-32);
}
.sso .fw-400 {
  font-weight: var(--sso-font-weight-regular) !important;
}
.sso .fw-500 {
  font-weight: var(--sso-font-weight-medium);
}
.sso .fw-600 {
  font-weight: var(--sso-font-weight-semiBold);
}
.sso .fw-700 {
  font-weight: var(--sso-font-weight-bold);
}
.sso .color-primary-200 {
  color: var(--sso-primary-200);
}
.sso .color-primary-300 {
  color: var(--sso-primary-300) !important;
}
.sso .color-secondary-300 {
  color: var(--sso-secondary-300);
}
.sso .color-grayscale-400 {
  color: var(--sso-grayscale-400);
}
.sso .color-grayscale-500 {
  color: var(--sso-grayscale-500);
}
.sso .color-grayscale-600 {
  color: var(--sso-grayscale-600);
}
.sso .color-error {
  color: var(--sso-error);
}
.sso .color-success {
  color: var(--sso-success);
}
.sso .color-warning {
  color: var(--sso-warning);
}
.sso .bg-white {
  background-color: var(--sso-grayscale-0);
}
.sso .bg-primary-100 {
  background-color: var(--sso-primary-100);
}
.sso .bg-secondary-100 {
  background-color: var(--sso-secondary-100);
}
.sso .bg-secondary-400 {
  background-color: var(--sso-secondary-400);
}
.sso .bg-grayscale-100 {
  background-color: var(--sso-grayscale-100);
}
.sso .bg-grayscale-200 {
  background-color: var(--sso-grayscale-200);
}
.sso .bg-grayscale-300 {
  background-color: var(--sso-grayscale-300);
}
.sso .bg-grayscale-400 {
  background-color: var(--sso-grayscale-400);
}
.sso .bg-grayscale-500 {
  background-color: var(--sso-grayscale-500);
}
.sso .bg-grayscale-600 {
  background-color: var(--sso-grayscale-600);
}
.sso .bg-error {
  background-color: var(--sso-error);
}
.sso .bg-success-100 {
  background-color: var(--sso-success-100);
}
.sso .br {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--sso-grayscale-300);
  content: "";
}
.sso .border-table {
  border: 1px solid var(--sso-grayscale-300);
}
.sso .border-all {
  border: 1px solid;
}
.sso .border-0 {
  border: 0;
}
.sso .border-right-1 {
  border-right: 1px solid;
}
.sso .border-bottom-0 {
  border-bottom: 0 !important;
}
.sso .border-bottom-1 {
  border-bottom: 1px solid;
}
.sso .border-color-grayscale-300 {
  border-color: var(--sso-grayscale-300);
}
.sso .border-color-primary-200 {
  border-color: var(--sso-primary-200);
}
.sso .radius-ms {
  border-radius: var(--sso-border-radius-ms);
}
.sso .radius-xs {
  border-radius: var(--sso-border-radius-xs);
}
.sso .radius-sm {
  border-radius: var(--sso-border-radius-sm);
}
.sso .radius-md {
  border-radius: var(--sso-border-radius-lg);
}
.sso .radius-lg {
  border-radius: var(--sso-border-radius-xl);
}
.sso .radius-max {
  border-radius: var(--sso-border-radius-max);
}
.sso .lh-150 {
  line-height: 150%;
}
.sso .word-break-all {
  word-break: break-all;
}
.sso .txt-center {
  text-align: center;
}
.sso .txt-right {
  text-align: right;
}
.sso .object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.sso .content-container {
  width: 100%;
  padding: 0 230px 120px;
}
@media screen and (max-width: 1920px) {
  .sso .content-container {
    max-width: 1280px;
    padding: 0 40px 120px;
  }
}
.sso .container {
  position: relative;
}
.sso .container-fluid {
  width: 100%;
  margin: 0 auto;
  padding: 0 14px;
  box-sizing: border-box;
}
.sso .overflow-hidden {
  overflow: hidden;
}
.sso .overflow-auto {
  overflow: auto;
}
.sso .allocation {
  display: flex;
  gap: 20px;
}
.sso .allocation-panel {
  display: grid;
  grid-template-columns: calc(50% - 50px) 100px calc(50% - 50px);
  align-items: flex-start;
}
.sso .allocation-panel-left {
  min-height: 760px;
  display: flex;
  flex-direction: column;
}
.sso .allocation-panel-left-table {
  flex: 1;
}
.sso .allocation-panel-left-table .no-result {
  flex: 1;
  border: 1px solid var(--sso-grayscale-300);
  border-radius: 0;
  margin-top: -1px;
}
.sso .allocation-panel-right {
  min-height: 760px;
  display: flex;
  flex-direction: column;
}
.sso .allocation-panel-right-table {
  flex: 1;
}
.sso .allocation-panel-right-table .no-result {
  flex: 1;
  border: 1px solid var(--sso-grayscale-300);
  border-radius: 0;
  margin-top: -1px;
}
.sso .allocation-panel-right-table table tbody td input {
  font-size: var(--sso-font-size-16);
  color: var(--sso-grayscale-600);
  background: none;
}
.sso .allocation-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.sso .allocation .main-layout-content:first-child {
  min-width: calc(70% - 20px);
  max-width: 980px;
  min-height: 900px;
}
.sso .allocation .main-layout-content:last-child {
  min-width: 30%;
  max-width: 320px;
  min-height: 900px;
}
.sso .pointer {
  cursor: pointer;
}
.sso .pointer-none {
  cursor: initial !important;
}
.sso .btn-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sso .btn-container::before {
  display: block;
  content: "";
}
.sso .btn-container .util-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.sso .ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sso .text-area .title {
  font-weight: var(--sso-font-weight-semiBold);
  line-height: 150%;
}
.sso .text-area .desc {
  font-size: var(--sso-font-size-14);
  line-height: 150%;
}
.sso .text-area.is-sm .title {
  font-size: var(--sso-font-size-16);
}
.sso .text-area.is-sm .desc {
  margin-top: 5px;
}
.sso .text-area.is-md .title {
  font-size: var(--sso-font-size-18);
}
.sso .text-area.is-md .desc {
  margin-top: 10px;
}

/*───────────────────────────────────────
    📌 icon
───────────────────────────────────────*/
.sso .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sso .icon:before {
  display: inline-block;
  font-family: "sso-icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: never;
  text-decoration: inherit;
  text-align: center;
}
.sso .icon.is-2xs:before {
  font-size: var(--sso-icon-size-2xs);
}
.sso .icon.is-xs:before {
  font-size: var(--sso-icon-size-xs);
}
.sso .icon.is-sm:before {
  font-size: var(--sso-icon-size-sm);
}
.sso .icon.is-md:before {
  font-size: var(--sso-icon-size-md);
}
.sso .icon.is-lg:before {
  font-size: var(--sso-icon-size-lg);
}
.sso .icon.icon-more-horiz::before {
  content: "\E800";
}
.sso .icon.icon-close-stroke::before {
  content: "\E825";
}
.sso .icon.icon-building-stroke::before {
  content: "\E811";
}
.sso .icon.icon-schedule-stroke::before {
  content: "\E817";
}
.sso .icon.icon-school-stroke::before {
  content: "\E818";
}
.sso .icon.icon-group-stroke::before {
  content: "\E81A";
}
.sso .icon.icon-remove-stroke::before {
  content: "\E823";
}
.sso .icon.icon-person-stroke::before {
  content: "\E828";
}
.sso .icon.icon-notifications-circle-stroke::before {
  content: "\E827";
}
.sso .icon.icon-data-sync-stroke::before {
  content: "\E826";
}
.sso .icon.icon-help-stroke::before {
  content: "\E80E";
}
.sso .icon.icon-calendar-stroke::before {
  content: "\E812";
}
.sso .icon.icon-arrow-drop-down::before {
  content: "\E801";
}
.sso .icon.icon-check-stroke::before {
  content: "\E802";
}
.sso .icon.icon-warning::before {
  content: "\E803";
}
.sso .icon.icon-error-circle::before {
  content: "\E804";
}
.sso .icon.icon-double-arrow-left-stroke::before {
  content: "\E805";
}
.sso .icon.icon-double-arrow-right-stroke::before {
  content: "\E806";
}
.sso .icon.icon-chevron-right-stroke::before {
  content: "\E807";
}
.sso .icon.icon-chevron-left-stroke::before {
  content: "\E808";
}
.sso .icon.icon-radio-off::before {
  content: "\E809";
}
.sso .icon.icon-radio-on::before {
  content: "\E80A";
}
.sso .icon.icon-account-circle-stroke::before {
  content: "\E829";
}
.sso .icon.icon-briefcase-stroke::before {
  content: "\E810";
}
.sso .icon.icon-library-stroke::before {
  content: "\E815";
}
.sso .icon.icon-settings-stroke::before {
  content: "\E819";
}
.sso .icon.icon-search-stroke::before {
  content: "\E80F";
}
.sso .icon.icon-arrow-right-stroke::before {
  content: "\E80B";
}
.sso .icon.icon-add-stroke::before {
  content: "\E80D";
}
.sso .icon.icon-arrow-bottom-stroke::before {
  content: "\E80C";
}
.sso .icon.icon-delete-stroke::before {
  content: "\E82F";
}
.sso .icon.icon-book-stroke::before {
  content: "\E824";
}
.sso .icon.icon-desktop::before {
  content: "\E813";
}
.sso .icon.icon-file-copy-stroke::before {
  content: "\E814";
}
.sso .icon.icon-notifications-stroke::before {
  content: "\E816";
}
.sso .icon.icon-api::before {
  content: "\E81B";
}
.sso .icon.icon-visibility-off-stroke::before {
  content: "\E81C";
}
.sso .icon.icon-visibility-stroke::before {
  content: "\E81D";
}
.sso .icon.icon-key-stroke::before {
  content: "\E81E";
}
.sso .icon.icon-locked-window-stroke::before {
  content: "\E81F";
}
.sso .icon.icon-newspaper-stroke::before {
  content: "\E820";
}
.sso .icon.icon-refresh-stroke::before {
  content: "\E821";
}
.sso .icon.icon-construct-stroke::before {
  content: "\E822";
}
.sso .icon.icon-check-circle-stroke::before {
  content: "\E82A";
}
.sso .icon.icon-cancle-stroke::before {
  content: "\E82B";
}
.sso .icon.icon-logout-stroke::before {
  content: "\E82D";
}
.sso .icon.icon-warning-stroke::before {
  content: "\E82E";
}
.sso .icon.icon-bookmark-stroke::before {
  content: "\E82C";
}
.sso .icon.icon-policy-stroke::before {
  content: "\E830";
}
.sso .icon.icon-download-stroke::before {
  content: "\E831";
}
.sso .icon.icon-code-slash-stroke::before {
  content: "\E832";
}
.sso .icon.icon-reorder-four-stroke::before {
  content: "\E833";
}
.sso .icon.icon-attachment-stroke::before {
  content: "\E834";
}
.sso .icon.icon-file-csv {
  background-image: url("../images/common/icon_file_csv.svg");
}
.sso .icon.icon-file-doc {
  background-image: url("../images/common/icon_file_doc.svg");
}
.sso .icon.icon-file-docx {
  background-image: url("../images/common/icon_file_docx.svg");
}
.sso .icon.icon-file-gif {
  background-image: url("../images/common/icon_file_gif.svg");
}
.sso .icon.icon-file-hwpx {
  background-image: url("../images/common/icon_file_hwpx.svg");
}
.sso .icon.icon-file-jpeg {
  background-image: url("../images/common/icon_file_jpge.svg");
}
.sso .icon.icon-file-mp3 {
  background-image: url("../images/common/icon_file_mp3.svg");
}
.sso .icon.icon-file-mp4 {
  background-image: url("../images/common/icon_file_mp4.svg");
}
.sso .icon.icon-file-pdf {
  background-image: url("../images/common/icon_file_pdf.svg");
}
.sso .icon.icon-file-png {
  background-image: url("../images/common/icon_file_png.svg");
}
.sso .icon.icon-file-svg {
  background-image: url("../images/common/icon_file_svg.svg");
}
.sso .icon.icon-file-txt {
  background-image: url("../images/common/icon_file_txt.svg");
}
.sso .icon.icon-file-xls {
  background-image: url("../images/common/icon_file_xls.svg");
}
.sso .icon.icon-file-xlsx {
  background-image: url("../images/common/icon_file_xlsx.svg");
}
.sso .icon.icon-file-zip {
  background-image: url("../images/common/icon_file_zip.svg");
}
.sso .icon.icon-file-jpg {
  background-image: url("../images/common/icon_file_jpg.svg");
}
.sso .icon.icon-file-pptx {
  background-image: url("../images/common/icon_file_pptx.svg");
}
.sso .icon.icon-file-hwp {
  background-image: url("../images/common/icon_file_hwp.svg");
}
.sso .icon.icon-file-ppt {
  background-image: url("../images/common/icon_file_ppt.svg");
}
.sso .icon.icon-file-size-md {
  width: 30px;
  height: 30px;
}

/*───────────────────────────────────────
    📌 button
───────────────────────────────────────*/
.sso .btn-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.sso .btn-set.is-left {
  justify-content: flex-start;
}
.sso .btn-set.is-right {
  justify-content: flex-end;
}
.sso .btn-set.is-between {
  justify-content: space-between;
}
.sso .btn-set.is-column {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.sso .btn-set.is-column.is-left {
  align-items: flex-start;
}
.sso .btn-set.is-column.is-right {
  align-items: flex-end;
}
.sso .btn-set.is-column.is-between {
  align-items: space-between;
}
.sso .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-xs);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  gap: 8px;
}
.sso .btn:disabled {
  color: var(--sso-grayscale-400);
  background-color: var(--sso-grayscale-100);
}
.sso .btn .btn-label {
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
}
.sso .btn.is-xs {
  height: 40px;
  padding: 0 20px;
}
.sso .btn.is-xs .btn-label {
  font-size: var(--sso-font-size-14);
}
.sso .btn.is-sm {
  height: 44px;
  padding: 0 24px;
}
.sso .btn.is-sm .btn-label {
  font-size: var(--sso-font-size-16);
}
.sso .btn.is-md {
  height: 48px;
  padding: 0 28px;
}
.sso .btn.is-md .btn-label {
  font-size: var(--sso-font-size-16);
}
.sso .btn.is-lg {
  height: 52px;
  padding: 0 40px;
}
.sso .btn.is-lg .btn-label {
  font-size: var(--sso-font-size-18);
}
.sso .btn.is-primary {
  background-color: var(--sso-primary-300);
  color: var(--sso-grayscale-0);
}
.sso .btn.is-primary:not(:disabled):hover {
  background-color: var(--sso-primary-400);
}
.sso .btn.is-primary:disabled {
  color: var(--sso-grayscale-0);
  background-color: var(--sso-grayscale-300);
}
.sso .btn.is-danger {
  background-color: var(--sso-red-200);
  color: var(--sso-grayscale-0);
}
.sso .btn.is-danger:not(:disabled):hover {
  background-color: var(--sso-red-300);
}
.sso .btn.is-danger:disabled {
  color: var(--sso-grayscale-0);
  background-color: var(--sso-grayscale-300);
}
.sso .btn.is-outline.is-primary {
  color: var(--sso-primary-300);
  background-color: var(--sso-grayscale-0);
  border: 1px solid var(--sso-primary-300);
}
.sso .btn.is-outline.is-primary:not(:disabled):hover {
  background-color: var(--sso-primary-100);
}
.sso .btn.is-outline.is-primary:disabled {
  border: 1px solid var(--sso-grayscale-300);
}
.sso .btn.is-outline.is-danger {
  color: var(--sso-red-200);
  background-color: var(--sso-grayscale-0);
  border: 1px solid var(--sso-red-200);
}
.sso .btn.is-outline.is-danger:not(:disabled):hover {
  background-color: var(--sso-red-100);
}
.sso .btn.is-outline.is-danger:disabled {
  border: 1px solid var(--sso-grayscale-300);
}
.sso .text-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sso .text-btn:hover .btn-label {
  text-decoration: underline;
}
.sso .text-btn.is-md .btn-label {
  font-size: var(--sso-font-size-14);
  font-weight: var(--sso-font-weight-regular);
  line-height: 150%;
}
.sso .text-btn.is-primary {
  color: var(--sso-grayscale-600);
}
.sso .text-btn.is-primary .icon {
  color: var(--sso-primary-300);
}

/*───────────────────────────────────────
    📌 tab
───────────────────────────────────────*/
.sso .tab {
  display: flex;
  border-bottom: 1px solid var(--sso-grayscale-300);
}
.sso .tab li a {
  padding: 16px 25px;
  display: inline-block;
  height: 50px;
  box-sizing: border-box;
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-medium);
}
.sso .tab li a.active {
  position: relative;
  color: var(--sso-primary-300);
}
.sso .tab li a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--sso-primary-300);
}
.sso .card-tab .tab-header {
  display: flex;
  gap: 10px;
}
.sso .card-tab .tab-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 36px;
  padding: 0 14px;
  background-color: var(--sso-grayscale-200);
  font-size: var(--sso-font-size-14);
  font-weight: var(--sso-font-weight-regular);
  border-radius: var(--sso-border-radius-sm);
  color: var(--sso-grayscale-600);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sso .card-tab .tab-header button:hover, .sso .card-tab .tab-header button.is-current {
  background-color: var(--sso-primary-300);
  color: var(--sso-grayscale-0);
}
.sso .card-tab .tab-header button i {
  margin-left: 6px;
}
.sso .card-tab .tab-content {
  margin-top: 24px;
}

/*───────────────────────────────────────
    📌 input
───────────────────────────────────────*/
.sso .input {
  box-sizing: border-box;
  background-color: var(--sso-grayscale-0);
}
.sso .input:has(input:disabled) {
  background-color: var(--sso-grayscale-100);
}
.sso .input input {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: var(--sso-font-size-16);
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-xs);
  border: 1px solid var(--sso-grayscale-300);
}
.sso .input input:disabled {
  background-color: var(--sso-grayscale-100);
}
.sso .input input::placeholder, .sso .input input::-webkit-input-placeholder, .sso .input input:-ms-input-placeholder {
  color: var(--sso-grayscale-400);
}
.sso .input.is-sm {
  height: 44px;
}
.sso .input.is-sm input {
  font-size: var(--sso-font-size-14);
  padding: 0 15px;
}
.sso .input.is-md {
  height: 48px;
}
.sso .input.is-md input {
  font-size: var(--sso-font-size-16);
  padding: 0 15px;
}
.sso .input.is-lg {
  height: 52px;
}
.sso .input.is-lg input {
  font-size: var(--sso-font-size-18);
  padding: 0 15px;
}
.sso .input.is-adorned-end {
  position: relative;
}
.sso .input.is-adorned-end input {
  padding-right: 54px;
}
.sso .input.is-adorned-end button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}
.sso .input.is-error input {
  border-color: var(--sso-error) !important;
}
.sso .input:has(.input-file) {
  flex: 1;
}
.sso .input-file {
  display: none !important;
}
.sso .input-file + p {
  height: 48px;
  color: var(--sso-grayscale-400);
  padding: 0 14px 0 14px;
  border-radius: var(--sso-border-radius-xs);
  border: 1px solid var(--sso-grayscale-300);
  box-sizing: border-box;
  display: flex;
  justify-content: left;
  align-items: center;
}

/*───────────────────────────────────────
    📌 choice
───────────────────────────────────────*/
.sso .choice-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.sso .choice input[type=radio] ~ label .custom-mark, .sso .choice input[type=checkbox] ~ label .custom-mark {
  display: inline-block;
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--sso-grayscale-300);
  background-color: var(--sso-grayscale-0);
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
}
.sso .choice input[type=checkbox] ~ label .custom-mark {
  border-radius: var(--sso-border-radius-sm);
}
.sso .choice input[type=checkbox] ~ label .custom-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0);
  transition: transform 0.2s;
}
.sso .choice input[type=checkbox] ~ label .custom-mark:after {
  display: inline-block;
  font-family: "sso-icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: never;
  text-decoration: inherit;
  text-align: center;
  font-size: var(--sso-icon-size-sm);
  content: "\E802";
}
.sso .choice input[type=checkbox]:checked ~ label .custom-mark {
  color: var(--sso-grayscale-0);
  background-color: var(--sso-primary-300);
  border-color: var(--sso-primary-300);
}
.sso .choice input[type=checkbox]:checked ~ label .custom-mark::after {
  transform: translate(-50%, -50%) scale(1);
}
.sso .choice input[type=checkbox]:disabled ~ label .custom-mark {
  color: var(--sso-grayscale-300);
  background-color: var(--sso-grayscale-200);
  border-color: var(--sso-grayscale-200);
  cursor: default;
}
.sso .choice input[type=radio] ~ label .custom-mark {
  border-radius: var(--sso-border-radius-max);
}
.sso .choice input[type=radio] ~ label .custom-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: var(--sso-border-radius-max);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s;
}
.sso .choice input[type=radio]:checked ~ label .custom-mark {
  border-color: var(--sso-primary-300);
}
.sso .choice input[type=radio]:checked ~ label .custom-mark::after {
  background-color: var(--sso-primary-300);
  transform: translate(-50%, -50%) scale(1);
}
.sso .choice input[type=radio]:disabled ~ label .custom-mark {
  color: var(--sso-grayscale-300);
  background-color: var(--sso-grayscale-200);
  border-color: var(--sso-grayscale-200);
  cursor: default;
}
.sso .choice input[type=radio]:disabled ~ label .custom-mark::after {
  background-color: var(--sso-grayscale-300);
}
.sso .choice {
  display: inline-flex;
  align-items: center;
}
.sso .choice:has(input:focus-visible) {
  outline-width: 2px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: var(--sso-focus);
}
.sso .choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sso .choice input:disabled ~ label .label-text {
  cursor: default;
}
.sso .choice label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: var(--sso-grayscale-300);
  background-color: var(--sso-grayscale-0);
  cursor: pointer;
}
.sso .choice label .label-text {
  font-size: var(--sso-font-size-16);
  line-height: 1;
  color: var(--sso-grayscale-600);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.sso .choice.is-readonly input,
.sso .choice.is-readonly label {
  pointer-events: none;
  cursor: default;
}
.sso .choice.is-error .custom-mark {
  border-color: var(--sso-error);
}
.sso .choice.is-error input:checked:not(:disabled) ~ label {
  border-color: var(--sso-error);
}
.sso .choice.is-error input:checked:not(:disabled) ~ label .custom-mark {
  border-color: var(--sso-error);
  color: var(--sso-grayscale-0);
}
.sso .choice.is-error input[type=checkbox]:checked:not(:disabled) ~ label {
  border-color: var(--sso-error);
}
.sso .choice.is-error input[type=checkbox]:checked:not(:disabled) ~ label .custom-mark {
  background-color: var(--sso-error);
}
.sso .choice.is-error input[type=radio]:checked:not(:disabled) ~ label .custom-mark:after {
  background-color: var(--sso-error);
}
.sso .choice.is-error.is-badge input:checked:not(:disabled) ~ label {
  border-color: var(--sso-error);
  background-color: var(--sso-error);
}

/*───────────────────────────────────────
    📌 switch
───────────────────────────────────────*/
.sso .switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.sso .switch:has(input:focus-visible) {
  outline-width: 2px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: var(--sso-focus);
  border-radius: var(--sso-border-radius-max);
}
.sso .switch input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sso .switch input[type=checkbox]:checked + .switch-label {
  background-color: var(--sso-primary-300);
}
.sso .switch input[type=checkbox]:checked + .switch-label::before {
  transform: translateX(24px);
}
.sso .switch input[type=checkbox]:disabled + .switch-label, .sso .switch input[type=checkbox]:checked:disabled + .switch-label {
  background-color: var(--sso-grayscale-300);
}
.sso .switch-label {
  width: 48px;
  height: 24px;
  background-color: var(--sso-grayscale-500);
  border-radius: var(--sso-border-radius-max);
  position: relative;
  transition: background-color 0.3s;
}
.sso .switch-label::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--sso-grayscale-0);
  border-radius: 50%;
  transition: transform 0.3s;
}

/*───────────────────────────────────────
    📌 select
───────────────────────────────────────*/
.sso .select {
  border: 1px solid var(--sso-grayscale-300);
  border-radius: var(--sso-border-radius-xs);
  background: url("../images/form/select_caret.svg") var(--sso-grayscale-0) no-repeat center right 10px;
  font-size: var(--sso-font-size-16);
  cursor: pointer;
  text-overflow: ellipsis;
}
.sso .select:disabled {
  color: var(--sso-grayscale-400);
  background-color: var(--sso-grayscale-100);
}
.sso .select.value-selected {
  color: var(--sso-grayscale-max);
}
.sso .select.disabled-selected {
  color: var(--sso-grayscale-400);
}
.sso .select.is-sm {
  height: 44px;
  padding: 0px 40px 0px 15px;
}
.sso .select.is-md {
  min-width: 130px;
  height: 48px;
  padding: 0px 40px 0px 15px;
}
.sso .select.is-lg {
  height: 52px;
  padding: 0px 40px 0px 15px;
}

/*───────────────────────────────────────
    📌 table
───────────────────────────────────────*/
.sso .table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid var(--sso-grayscale-300);
  background-color: var(--sso-grayscale-0);
}
.sso .table tbody tr:hover {
  background-color: var(--sso-primary-100);
}
.sso .table tr td {
  word-break: break-all;
}
.sso .table-border-right th:not(:last-child),
.sso .table-border-right td:not(:last-child) {
  border-right: 1px solid var(--sso-grayscale-300);
}
.sso .table-td-disabled {
  background-color: var(--sso-grayscale-200);
}
.sso .table-td-disabled input:disabled {
  background-color: var(--sso-grayscale-200);
  color: var(--sso-grayscale-600);
}
.sso .table-col .thead {
  background-color: var(--sso-grayscale-200);
}
.sso .table-col .thead th {
  font-weight: var(--sso-font-weight-medium);
  padding: 14px 10px;
}
.sso .table-col .thead th.th-left {
  text-align: left;
}
.sso .table-col .thead th.th-center {
  text-align: center;
}
.sso .table-col .tbody.tbody-hover tr:hover {
  background-color: var(--sso-primary-100);
}
.sso .table-col .tbody tr {
  border: 1px solid var(--sso-grayscale-300);
}
.sso .table-col .tbody tr:hover .delete-item .icon-minus {
  color: var(--sso-error);
}
.sso .table-col .tbody tr td {
  vertical-align: middle;
}
.sso .table-col .tbody tr td.delete-item {
  cursor: pointer;
}
.sso .table-col .tbody tr td .ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 80%;
  display: block;
}
.sso .table-col .tbody tr td .class-cell {
  min-height: 90px;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.sso .table-col .tbody tr td .selected-cell {
  background-color: var(--sso-timetable-selected);
  border: 1px solid black !important;
}
.sso .table-col .tbody tr td .dot {
  position: relative;
  padding-left: 20px;
}
.sso .table-col .tbody tr td .dot::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--sso-grayscale-max);
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 0;
}
.sso .table-col .tbody tr td.td-pd-m {
  padding: 10px 10px;
}
.sso .table-col .tbody tr td.td-pd-l {
  padding: 14px 10px;
}
.sso .table-col .tbody tr td .td-link {
  display: block;
  height: 100%;
}
.sso .table-col .tbody tr td .td-link-l {
  padding: 14px 10px;
}
.sso .table-col .tbody tr td .td-link:hover {
  color: var(--sso-primary-300);
  text-decoration: underline;
}
.sso .table-col .tbody-pointer {
  cursor: pointer;
}
.sso .table-col .tbody-badge-list span {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}
.sso .table-col .tbody-badge-list span::after {
  content: "";
  display: block;
  width: 3px;
  height: 32px;
  position: absolute;
  top: -2px;
  right: 12px;
  transform: rotate(45deg);
}
.sso .table-col .tbody-badge-list span.active {
  border: 3px solid var(--sso-success);
}
.sso .table-col .tbody-badge-list span.inactive {
  border: 3px solid var(--sso-error);
}
.sso .table-col .tbody-badge-list span.inactive::after {
  background-color: var(--sso-error);
}
.sso .table-col .tbody-badge-list span img {
  width: 24px;
  height: 24px;
}
.sso .table-col-checkbox {
  position: relative;
  padding: 0 !important;
}
.sso .table-col-checkbox .input-checkbox {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sso .table-col-checkbox .input-checkbox-label {
  position: absolute;
  top: 0;
  left: 0;
}
.sso .table-col-choice-label label {
  box-sizing: border-box;
  padding: 14px;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}
.sso .table-col-row .tbody th[scope=row] {
  padding: 10px;
  font-weight: var(--sso-font-weight-medium);
  text-align: left;
  vertical-align: middle;
  background-color: var(--sso-grayscale-200);
}
.sso .table-col-row .tbody .time-info {
  line-height: 150%;
}
.sso .table-col-row .tbody .time-info input {
  background-color: transparent;
  width: 100%;
  font-size: var(--sso-font-size-14);
}
.sso .table-col-row .tbody .time-info input:focus {
  outline: none;
}
.sso .table-col-row .tbody .time-badge {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--sso-grayscale-300);
  border-radius: 50%;
}
.sso .table-col-row .tbody .time-badge img {
  width: 100%;
  height: 100%;
}
.sso .table-col-row .holiday,
.sso .table-col-row .sunday {
  color: var(--sso-error);
}
.sso .table-col-row .saturday {
  color: var(--sso-primary-300);
}
.sso .table-col.timetable tbody tr:hover {
  background-color: transparent;
}
.sso .table-col.timetable tbody tr td:hover {
  background-color: var(--sso-timetable-selected);
}
.sso .table-col.timetable tbody tr td.deleted {
  background-color: var(--sso-grayscale-300);
}
.sso .table-col.timetable tbody tr td.deleted .time-info {
  cursor: not-allowed;
}
.sso .table-col.timetable tbody tr td.holiday {
  background-color: var(--sso-grayscale-200);
  text-align: center;
  color: var(--sso-grayscale-600);
}
.sso .table-col.timetable tbody tr td.holiday:hover {
  pointer-events: none;
}
.sso .table-col.timetable-list tbody .selected-cell {
  background-color: var(--sso-timetable-selected);
}
.sso .table-col.timetable-list tbody tr:hover {
  background-color: var(--sso-timetable-selected);
}
.sso .table-row .tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--sso-grayscale-300);
}
.sso .table-row .tbody tr th {
  background-color: var(--sso-grayscale-200);
  font-weight: var(--sso-font-weight-medium);
  padding: 14px 10px;
}
.sso .table-row .tbody tr th.th-left {
  text-align: left;
}
.sso .table-row .tbody tr th.th-center {
  text-align: center;
}
.sso .table-row .tbody tr td {
  vertical-align: middle;
}
.sso .table-row .tbody tr td.td-pd-m {
  padding: 10px 10px;
}
.sso .table-row .tbody tr td.td-pd-l {
  padding: 14px 10px;
}
.sso .table-scroll-area {
  height: 300px;
  overflow-y: auto;
  background-color: var(--sso-grayscale-100);
}
.sso .scroll-h-table {
  position: relative;
  max-height: 400px;
  overflow-y: auto;
}
.sso .scroll-h-table .table {
  position: relative;
  border: 1px solid var(--sso-grayscale-300);
  border-top: 0;
}
.sso .scroll-h-table .table .thead {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  z-index: 1;
}
.sso .scroll-h-table .table .thead::before {
  top: 0;
}
.sso .scroll-h-table .table .thead::after {
  bottom: -1px;
}
.sso .scroll-h-table .table .thead::before, .sso .scroll-h-table .table .thead::after {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--sso-grayscale-300);
  content: "";
}
.sso .scroll-h-table .table .thead tr:first-child {
  border-top: 0;
}
.sso .total-count {
  font-size: var(--sso-font-size-18);
}
.sso .total-count span:first-child {
  display: inline-block;
  margin-right: 8px;
}
.sso .total-count .total {
  color: var(--sso-primary-300);
}

/*───────────────────────────────────────
    📌 pagination
───────────────────────────────────────*/
.sso .pagination {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sso .pagination .btn {
  width: 32px;
  height: 32px;
  color: var(--sso-grayscale-400);
  background-color: var(--sso-grayscale-0);
  border: 1px solid var(--sso-grayscale-300);
  border-radius: var(--sso-border-radius-max);
}
.sso .pagination .btn:hover {
  color: var(--sso-primary-300);
}
.sso .pagination .num {
  display: inline-block;
  position: relative;
  min-width: 32px;
  height: 32px;
  font-size: var(--sso-font-size-16);
  background-color: var(--sso-grayscale-0);
  border-radius: var(--sso-border-radius-max);
  box-sizing: border-box;
  text-align: center;
  line-height: 32px;
}
.sso .pagination .num.active {
  padding: 0 10px;
  color: var(--sso-grayscale-0);
  background-color: var(--sso-primary-300);
}
.sso .pagination .num.active:hover {
  background-color: var(--sso-primary-400);
}
.sso .pagination .num:not(.active):hover {
  background-color: var(--sso-primary-200);
}
.sso .pagination .num:focus-visible {
  z-index: 1;
}
.sso .pagination .num-area {
  margin: 0 15px;
}

/*───────────────────────────────────────
    📌 file-upload
───────────────────────────────────────*/
.sso .file-upload {
  display: flex;
  gap: 10px;
  width: 100%;
}
.sso .file-upload .input {
  flex: 1 1 auto;
}
.sso .file-upload .input input[type=file] {
  width: 1px;
  height: 1px;
}
.sso .file-upload .input input {
  cursor: pointer;
}
.sso .file-upload .btn {
  flex: 0 0 auto;
}

/*───────────────────────────────────────
    📌 search
───────────────────────────────────────*/
.sso .search {
  display: flex;
}
.sso .search:has(input:focus-visible) {
  outline-width: 2px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: var(--sso-focus);
  border-radius: var(--sso-border-radius-xs);
}
.sso .search .input input {
  border-radius: var(--sso-border-radius-xs) 0 0 var(--sso-border-radius-xs);
  border-right: 0;
  outline: 0;
}
.sso .search .btn {
  padding: 0 18px;
  min-width: 44px;
  border-radius: 0 var(--sso-border-radius-xs) var(--sso-border-radius-xs) 0;
}

/*───────────────────────────────────────
    📌 card
───────────────────────────────────────*/
.sso .card {
  padding: 20px;
  border: 1px solid var(--sso-grayscale-300);
  background-color: var(--sso-grayscale-0);
  border-radius: var(--sso-border-radius-sm);
}

/*───────────────────────────────────────
    📌 label
───────────────────────────────────────*/
.sso .label {
  display: block;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin-bottom: 5px;
  font-size: var(--sso-font-size-14);
  line-height: 150%;
}
.sso .label .required-dot {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--sso-error);
}
.sso .label-btn {
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-xs);
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sso .label-btn.is-sm {
  height: 44px;
  font-size: var(--sso-font-size-16);
  padding: 0 24px;
}
.sso .label-btn.is-md {
  height: 48px;
  font-size: var(--sso-font-size-16);
  padding: 0 28px;
}
.sso .label-btn.is-lg {
  height: 52px;
  font-size: var(--sso-font-size-18);
  padding: 0 40px;
}
.sso .label-btn.is-primary {
  color: var(--sso-grayscale-0);
  background-color: var(--sso-primary-300);
}
.sso .label-btn.is-primary:not(:disabled):hover {
  background-color: var(--sso-primary-400);
}
.sso .label-btn.is-outline.is-primary {
  color: var(--sso-primary-300);
  background-color: var(--sso-grayscale-0);
  border: 1px solid var(--sso-primary-300);
}
.sso .label-btn.is-outline.is-primary:not(:disabled):hover {
  background-color: var(--sso-primary-100);
}

/*───────────────────────────────────────
    📌 chip
───────────────────────────────────────*/
.sso .chip.is-active {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: var(--sso-font-weight-medium);
  background-color: var(--sso-success-100);
  border-radius: var(--sso-border-radius-max);
  position: relative;
}
.sso .chip.is-active::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background-color: var(--sso-success);
  border-radius: var(--sso-border-radius-max);
  transform: translateY(-50%);
}
.sso .chip.is-active.is-md {
  padding: 5px 10px 5px 24px;
  font-size: var(--sso-font-size-12);
}
.sso .chip.is-active.is-md::before {
  left: 7px;
  width: 10px;
  height: 10px;
}
.sso .chip.is-active.is-lg {
  padding: 5px 10px 5px 34px;
  font-size: var(--sso-font-size-18);
}
.sso .chip.is-active.is-lg::before {
  left: 10px;
  width: 14px;
  height: 14px;
}
.sso .chip.is-inactive {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--sso-font-size-18);
  font-weight: var(--sso-font-weight-medium);
  background-color: var(--sso-red-100);
  border-radius: var(--sso-border-radius-max);
  position: relative;
}
.sso .chip.is-inactive::before {
  content: "";
  position: absolute;
  top: 50%;
  background-color: var(--sso-error);
  border-radius: var(--sso-border-radius-max);
  transform: translateY(-50%);
}
.sso .chip.is-inactive.is-md {
  padding: 5px 10px 5px 24px;
  font-size: var(--sso-font-size-12);
}
.sso .chip.is-inactive.is-md::before {
  left: 7px;
  width: 10px;
  height: 10px;
}
.sso .chip.is-inactive.is-lg {
  padding: 5px 10px 5px 34px;
  font-size: var(--sso-font-size-18);
}
.sso .chip.is-inactive.is-lg::before {
  left: 10px;
  width: 14px;
  height: 14px;
}
.sso .chip.is-success {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 10px 5px 10px;
  font-weight: var(--sso-font-weight-medium);
  background-color: var(--sso-success-200);
  border-radius: var(--sso-border-radius-max);
  color: var(--sso-grayscale-600);
}
.sso .chip.is-success.is-md {
  padding: 5px 10px 5px 10px;
  font-size: var(--sso-font-size-12);
}
.sso .chip.is-success.is-lg {
  padding: 5px 18px 5px 18px;
  font-size: var(--sso-font-size-18);
}
.sso .chip.is-warning {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: var(--sso-font-weight-medium);
  background-color: var(--sso-yellow-100);
  border-radius: var(--sso-border-radius-max);
  position: relative;
}
.sso .chip.is-warning.is-md {
  padding: 5px 10px 5px 10px;
  font-size: var(--sso-font-size-12);
}
.sso .chip.is-warning.is-lg {
  padding: 5px 18px 5px 18px;
  font-size: var(--sso-font-size-18);
}
.sso .chip.is-danger {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 10px 5px 10px;
  font-size: var(--sso-font-size-18);
  font-weight: var(--sso-font-weight-medium);
  background-color: var(--sso-error-100);
  border-radius: var(--sso-border-radius-max);
  color: var(--sso-error-200);
}
.sso .chip.is-danger.is-md {
  padding: 5px 10px 5px 10px;
  font-size: var(--sso-font-size-12);
}
.sso .chip.is-danger.is-lg {
  padding: 5px 18px 5px 18px;
  font-size: var(--sso-font-size-18);
}
.sso .chip.is-complete {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 10px 5px 10px;
  font-size: var(--sso-font-size-18);
  font-weight: var(--sso-font-weight-medium);
  background-color: var(--sso-complete-100);
  border-radius: var(--sso-border-radius-max);
  color: var(--sso-complete-200);
}
.sso .chip.is-complete.is-md {
  padding: 5px 10px 5px 10px;
  font-size: var(--sso-font-size-12);
}
.sso .chip.is-complete.is-lg {
  padding: 5px 18px 5px 18px;
  font-size: var(--sso-font-size-18);
}
.sso .badge-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sso-grayscale-700);
  font-weight: var(--sso-font-weight-regular);
}
.sso .badge-legend.is-on .bar {
  display: inline-block;
  width: 24px;
  height: 7px;
  background-color: var(--sso-success-300);
  border-radius: var(--sso-border-radius-max);
}
.sso .badge-legend.is-off .bar {
  display: inline-block;
  width: 24px;
  height: 7px;
  background-color: var(--sso-error-300);
  border-radius: var(--sso-border-radius-max);
}

/*───────────────────────────────────────
    📌 list
───────────────────────────────────────*/
.sso .list-dot {
  line-height: 160%;
}
.sso .list-dot li {
  position: relative;
  padding-left: 20px;
}
.sso .list-dot li::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--sso-grayscale-max);
  border-radius: var(--sso-border-radius-half);
}
.sso .list-card {
  display: flex;
  gap: 10px;
}
.sso .list-card.list-card-3 .list-card-item {
  width: 360px;
}
.sso .list-card.list-card-4 .list-card-item {
  width: 360px;
}
.sso .list-card-item {
  height: 100px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-xs);
  border: 1px solid var(--sso-grayscale-300);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--sso-grayscale-0);
}
.sso .list-card-item p:first-child {
  color: var(--sso-grayscale-500);
  font-size: var(--sso-font-size-16);
  text-align: left;
}
.sso .list-card-item p:last-child {
  font-size: var(--sso-font-size-24);
  font-weight: var(--sso-font-weight-bold);
  text-align: right;
}
.sso .list-card-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--sso-font-size-24);
  font-weight: var(--sso-font-weight-bold);
}
.sso .list-card-item a:hover {
  color: var(--sso-primary-300);
}
.sso .list-grid-card {
  display: grid;
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-md);
  align-items: center;
  margin-bottom: 24px;
}
.sso .list-grid-card:last-child {
  margin-bottom: 0;
}
.sso .list-grid-card.col-5 {
  grid-template-columns: 110px auto auto;
  gap: 50px;
  padding: 20px 50px;
  border: 1px solid var(--sso-border-100);
}
.sso .list-grid-card.col-4 {
  grid-template-columns: repeat(4, auto);
  gap: 24px;
}
.sso .list-grid-card .item:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sso .list-grid-card .item:nth-child(3) {
  display: flex;
  align-items: center;
}
.sso .list-grid-card .item:nth-child(3) .input-group {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  margin-right: 10px;
  flex: 1;
}
.sso .list-grid-card .item:nth-child(3) .input-group .input {
  flex: 1;
}
.sso .list-sp-service {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.sso .list-sp-service .title {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-medium);
  text-align: center;
}
.sso .list-sp-service .item {
  border: 1px solid var(--sso-grayscale-300);
  min-height: 200px;
  border-radius: var(--sso-border-radius-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 20px;
  box-sizing: border-box;
}
.sso .list-sp-service .item .btn {
  width: -moz-max-content;
  width: max-content;
}
.sso .list-block-1-item {
  border: 1px solid var(--sso-grayscale-300);
  padding: 20px;
  box-sizing: border-box;
  min-height: 130px;
}
.sso .list-block-1-item strong {
  font-size: var(--sso-font-size-20);
  font-weight: var(--sso-font-weight-medium);
  display: block;
  margin-bottom: 20px;
}
.sso .list-block-1-item ol li {
  font-size: var(--sso-font-size-14);
  line-height: 150%;
}
.sso .list-block-4 {
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 15px));
  gap: 20px;
}
.sso .list-block-4-item {
  border: 1px solid var(--sso-grayscale-300);
  padding: 20px;
  box-sizing: border-box;
  min-height: 130px;
}
.sso .list-block-4-item:hover {
  border: 1px solid var(--sso-primary-300);
}
.sso .list-block-4-item strong {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-medium);
  display: block;
  margin-bottom: 20px;
}
.sso .list-block-4-item ol li {
  font-size: var(--sso-font-size-14);
  line-height: 150%;
}
.sso .list-board {
  border: 1px solid var(--sso-grayscale-300);
  padding: 20px;
}
.sso .list-board-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.sso .list-board-title h4 {
  font-size: var(--sso-font-size-18);
  font-weight: var(--sso-font-weight-bold);
}
.sso .list-board-title a {
  display: block;
  width: 20px;
  height: 20px;
}
.sso .list-board-content li {
  padding: 10px 0;
  border-bottom: 1px solid var(--sso-grayscale-300);
}
.sso .list-board-content li:not(:last-child) {
  margin-bottom: 10px;
}
.sso .list-board-content li:hover a {
  color: var(--sso-primary-300);
}
.sso .list-board-content li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sso .list-board-content li a p:first-child {
  width: calc(100% - 200px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.sso .list-board-content li a p:last-child {
  width: 200px;
  text-align: right;
}
.sso .list-cards {
  display: grid;
  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
  grid-template-rows: auto auto;
  gap: 16px;
}
.sso .list-cards .card:first-child {
  grid-column: 1/-1;
}

/*───────────────────────────────────────
    📌 accordion
───────────────────────────────────────*/
.sso .accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sso .accordion-item .accordion-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-align: justify;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}
.sso .accordion-item .accordion-btn .title {
  display: grid;
  gap: 10px;
  grid-template-columns: 24px 1fr;
  width: 100%;
  word-break: break-all;
}
.sso .accordion-item .icon-chevron-right-stroke {
  rotate: 90deg;
  transition: rotate 0.3s ease-in-out;
}
.sso .accordion-item.is-active .icon-chevron-right-stroke {
  rotate: -90deg;
}
.sso .accordion-item-collapse {
  display: none;
}
.sso .accordion-item-collapse .accordion-content {
  width: 100%;
  box-sizing: border-box;
}
.sso .accordion.accordion-menu .accordion-item {
  border: 1px solid var(--sso-border-100);
}
.sso .accordion.accordion-menu .accordion-item .accordion-btn {
  padding: 16px 20px;
  background-color: var(--sso-grayscale-200);
}
.sso .accordion.accordion-menu .accordion-item .accordion-btn .title {
  font-size: var(--sso-font-size-20);
  font-weight: var(--sso-font-weight-regular);
  line-height: 150%;
}
.sso .accordion.accordion-menu .accordion-item .accordion-btn .title::before {
  display: inline-block;
  content: "Q.";
  width: 24px;
  height: 100%;
  text-align: center;
}
.sso .accordion.accordion-menu .accordion-item .accordion-content {
  display: grid;
  gap: 10px;
  grid-template-columns: 24px 1fr;
  width: 100%;
  padding: 16px 20px;
  font-size: var(--sso-font-size-16);
  line-height: 150%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}
.sso .accordion.accordion-menu .accordion-item .accordion-content::before {
  display: inline-block;
  content: "A.";
  width: 24px;
  height: 100%;
  text-align: center;
  font-size: var(--sso-font-size-20);
}
.sso .accordion.accordion-td .accordion-item .accordion-btn {
  padding: 16px 14px 16px 0;
  background-color: var(--sso-grayscale-0);
}
.sso .accordion.accordion-td .accordion-item .accordion-btn span {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-semiBold);
  line-height: 150%;
}
.sso .accordion.accordion-td .accordion-item .accordion-content {
  padding: 14px;
  font-size: var(--sso-font-size-16);
  background-color: var(--sso-grayscale-100);
  line-height: 150%;
  box-sizing: border-box;
  text-align: justify;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

/*───────────────────────────────────────
    📌 textarea
───────────────────────────────────────*/
.sso .textarea {
  border: 1px solid var(--sso-grayscale-300);
  border-radius: var(--sso-border-radius-xs);
  box-sizing: border-box;
  padding: 10px;
  font-size: var(--sso-font-size-16);
  word-break: break-all;
}
.sso .limit-textarea {
  border: 1px solid var(--sso-grayscale-300);
  border-radius: var(--sso-border-radius-xs);
  box-sizing: border-box;
  padding: 15px;
}
.sso .limit-textarea:focus-within {
  outline-width: 2px;
  outline-style: dashed;
  outline-offset: 4px;
  outline-color: var(--sso-focus);
}
.sso .limit-textarea .textarea {
  border: 0;
  padding: 0;
  margin-bottom: 10px;
}
.sso .limit-textarea .textarea:focus {
  outline: none;
}
.sso .limit-textarea .limit {
  display: inline-block;
  width: 100%;
  text-align: right;
  font-size: var(--sso-font-size-16);
  color: var(--sso-grayscale-400);
}

/*───────────────────────────────────────
    📌 breadcrumb
───────────────────────────────────────*/
.sso .breadcrumb-depths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sso .breadcrumb-depths li:not(:last-child)::after {
  font-family: "sso-icon";
  content: "\E807";
  font-size: var(--sso-icon-size-sm);
  margin: 0 4px;
  color: var(--sso-grayscale-300);
}
.sso .breadcrumb-depths .depth {
  color: var(--sso-grayscale-500);
  display: flex;
  align-items: center;
  font-size: var(--sso-font-size-16);
}
.sso .breadcrumb-depths .depth a span {
  font-size: var(--sso-font-size-16);
}
.sso .breadcrumb-depths .depth:hover a {
  color: var(--sso-primary-300);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sso .breadcrumb-depths .depth .dot {
  color: var(--sso-grayscale-500);
  vertical-align: super;
}
.sso .breadcrumb-depths .depth.active {
  color: var(--sso-primary-300);
  font-weight: var(--sso-font-weight-medium);
  font-size: var(--sso-font-size-16);
}

/*───────────────────────────────────────
    📌 post
───────────────────────────────────────*/
.sso .post-header .post-title {
  padding: 25px;
  font-size: var(--sso-font-size-18);
  font-weight: var(--sso-font-weight-regular);
  background-color: var(--sso-grayscale-100);
  text-align: center;
  line-height: 150%;
}

/*───────────────────────────────────────
    📌 no-result
───────────────────────────────────────*/
.sso .no-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 30px;
  min-height: 400px;
  height: 100%;
  background-color: var(--sso-primary-100);
  border-radius: var(--sso-border-radius-lg);
  box-sizing: border-box;
}
.sso .no-result .icon-help-stroke::before {
  font-size: var(--sso-font-size-50);
}
.sso .no-result a {
  align-self: center;
}

/*───────────────────────────────────────
    📌 course
───────────────────────────────────────*/
.sso .course-list li:not(:last-child) {
  margin-bottom: 20px;
}
.sso .course-list li:hover .course-list-item:not(.active) {
  border: 1px solid var(--sso-primary-300);
}
.sso .course-list-item {
  width: 100%;
  min-height: 80px;
  padding: 15px 15px 15px 75px;
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-lg);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--sso-grayscale-300);
}
.sso .course-list-item.active {
  background-color: var(--sso-primary-300);
  border: 0;
}
.sso .course-list-item.active::before {
  color: var(--sso-grayscale-0);
}
.sso .course-list-item.active strong,
.sso .course-list-item.active span {
  color: var(--sso-grayscale-0);
}
.sso .course-list-item::before {
  display: inline-block;
  font-family: "sso-icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: never;
  text-decoration: inherit;
  text-align: center;
  content: "\E82C";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--sso-font-size-40);
  color: var(--sso-primary-300);
}
.sso .course-list-item strong {
  font-size: var(--sso-font-size-14);
  font-weight: var(--sso-font-weight-medium);
  display: block;
  line-height: 150%;
}
.sso .course-list-item span {
  font-size: var(--sso-font-size-12);
  display: block;
  line-height: 150%;
  color: var(--sso-grayscale-400);
}

/* =================== file-attachments =================== */
.file-attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.file-attachments:not(:first-child):has(*) {
  margin-top: 15px;
}
.file-attachments .file-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--bbc-font-size-16);
  line-height: var(--bbc-line-height);
}
.file-attachments .file-item > .icon {
  flex: 0 0 auto;
}
.file-attachments .file-item .file-info {
  display: flex;
  align-items: center;
}
.file-attachments .file-item .file-info-name {
  display: -webkit-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  word-break: break-all !important;
}
.file-attachments .file-item .file-info-ext {
  display: inline-block;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.file-attachments .file-item .file-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 10px;
}
.file-attachments .file-item .file-meta-size {
  color: var(--bbc-color-grayscale-400);
}
.file-attachments .file-item .file-meta .icon-close-stroke::before {
  color: var(--bbc-color-grayscale-350);
}

/*───────────────────────────────────────
    📌 comment - 댓글 및 댓글 작성 form
───────────────────────────────────────*/
.sso .comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sso .comment-form .title {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-semiBold);
  display: inline-block;
}
.sso .comment-area {
  border-top: 1px solid var(--sso-primary-300);
}
.sso .comment-area .count {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-regular);
  color: var(--sso-grayscale-600);
  padding: 20px 10px;
  border-bottom: 1px solid var(--sso-grayscale-300);
}
.sso .comment-area .comment-list .comment-item {
  padding: 20px 30px;
  border-bottom: 1px solid var(--sso-grayscale-300);
}
.sso .comment-area .comment-list .comment-item .head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.sso .comment-area .comment-list .comment-item .head .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.sso .comment-area .comment-list .comment-item .head .info .name {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-regular);
  color: var(--sso-grayscale-600);
}
.sso .comment-area .comment-list .comment-item .head .info .time {
  font-size: var(--sso-font-size-14);
  font-weight: var(--sso-font-weight-regular);
  color: var(--sso-grayscale-500);
}
.sso .comment-area .comment-list .comment-item .head .utility {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sso .comment-area .comment-list .comment-item .head .utility button {
  font-size: var(--sso-font-size-14);
  font-weight: var(--sso-font-weight-regular);
  color: var(--sso-grayscale-600);
}
.sso .comment-area .comment-list .comment-item .head .utility button:hover {
  color: var(--sso-primary-300);
}
.sso .comment-area .comment-list .comment-item .head .utility button:first-child {
  position: relative;
}
.sso .comment-area .comment-list .comment-item .head .utility button:first-child::after {
  display: block;
  position: absolute;
  top: 50%;
  right: -7px;
  width: 1px;
  height: 12px;
  background-color: var(--sso-grayscale-600);
  transform: translateY(-50%);
  content: "";
}
.sso .comment-area .comment-list .comment-item .content {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-regular);
  line-height: 150%;
  word-break: break-all;
}

/*───────────────────────────────────────
    📌 datepicker
───────────────────────────────────────*/
.sso .datepicker-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sso .datepicker-group .input.is-md {
  width: 160px;
}

.ui-datepicker {
  padding: 0.2em 0.75em 0;
}
.ui-datepicker th {
  padding: 0.6em 0.3em;
  font-weight: var(--sso-font-weight-medium);
  line-height: 1.5em;
}
.ui-datepicker td {
  line-height: 1.5em;
}
.ui-datepicker td span,
.ui-datepicker td a {
  padding: 0.5em 0.2em;
  border-radius: var(--sso-border-radius-max);
  line-height: 150%;
  text-align: center;
}
.ui-datepicker .ui-datepicker-header {
  padding: 0.63em 0;
}
.ui-datepicker .ui-datepicker-title {
  line-height: 1.5em;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  top: 50%;
  transform: translateY(-50%);
}
.ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before {
  display: inline-block;
  font-family: "sso-icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: never;
  text-decoration: inherit;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: var(--sso-icon-size-sm);
  transform: translate(-50%, -50%);
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  width: auto;
  height: auto;
  background: none;
}
.ui-datepicker .ui-datepicker-prev:before {
  content: "\E808";
}
.ui-datepicker .ui-datepicker-next:before {
  content: "\E807";
}
.ui-datepicker .ui-datepicker-buttonpane {
  padding: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  font-weight: var(--sso-font-weight-medium);
  border-radius: var(--sso-border-radius-xs);
  line-height: 150%;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  color: var(--sso-primary-300);
  opacity: 1;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
  background: var(--sso-primary-100);
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
  width: auto;
}
.ui-widget {
  font-family: var(--sso-font-family);
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: var(--sso-font-family);
}
.ui-widget-header {
  color: var(--sso-grayscale-600);
  font-weight: var(--sso-font-weight-semiBold);
  background: var(--sso-grayscale-0);
  border: none;
}
.ui-widget-content {
  color: var(--sso-grayscale-600);
  background-color: var(--sso-grayscale-0);
}
.ui-widget.ui-widget-content {
  border: none;
  box-shadow: var(--sso-shadow-primary);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  color: var(--sso-grayscale-600);
  background: transparent;
  border: none;
}

.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-widget-header .ui-state-default:hover {
  background: var(--sso-primary-200);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  color: var(--sso-grayscale-0);
  font-weight: var(--sso-font-weight-regular);
  background: var(--sso-primary-300);
}

.ui-state-active:hover,
.ui-widget-content .ui-state-active:hover,
.ui-widget-header .ui-state-active:hover {
  background: var(--sso-primary-400);
}

/*───────────────────────────────────────
    📌 main
───────────────────────────────────────*/
.sso .main-layout {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  background-color: var(--sso-grayscale-100);
}
.sso .main-layout:not(.no-lnb) {
  padding-left: var(--sso-lnb-width);
}
.sso .main-layout-inner {
  width: 100%;
  max-width: 100%;
  min-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px 240px;
  box-sizing: border-box;
}
@media screen and (max-width: 1920px) {
  .sso .main-layout-inner {
    max-width: 1280px;
    padding: 40px 40px;
  }
}
.sso .main-layout .content-box-title {
  margin-bottom: 60px;
  text-align: center;
}
.sso .main-layout .content-box-title strong {
  font-size: var(--sso-font-size-20);
  font-weight: var(--sso-font-weight-bold);
}
.sso .main-layout .content-box-title h1 {
  margin-top: 10px;
  font-size: var(--sso-font-size-42);
  font-weight: var(--sso-font-weight-bold);
}
.sso .main-layout-title {
  font-size: var(--sso-font-size-30);
  margin-bottom: 20px;
}
.sso .main-layout-content {
  background-color: var(--sso-grayscale-0);
  padding: 30px;
  border-radius: var(--sso-border-radius-lg);
  box-sizing: border-box;
  min-height: 750px;
}
.sso .main-layout-content-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sso .main-layout-content-title .title {
  font-size: var(--sso-font-size-22);
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
}
.sso .main-layout-content-title .title.is-md {
  font-size: var(--sso-font-size-18);
}
.sso .main-layout-content-title .title.is-sm {
  font-size: var(--sso-font-size-16);
}
.sso .main-layout-content-title .desc {
  margin-top: 10px;
  font-size: var(--sso-font-size-14);
  line-height: 150%;
}
.sso .main-footer {
  padding: 20px 22px;
  background-color: var(--sso-grayscale-100);
  color: var(--sso-grayscale-400);
  margin-top: auto;
  text-align: center;
  border-top: 1px solid var(--sso-grayscale-300);
}

/*───────────────────────────────────────
    📌 footer
───────────────────────────────────────*/
.sso .footer {
  padding: 20px 22px;
}

/*───────────────────────────────────────
    📌 lnb
───────────────────────────────────────*/
.sso .lnb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--sso-z-index-one);
  width: var(--sso-lnb-width);
  height: 100%;
  min-height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sso-border-100);
  background-color: var(--sso-lnb);
  box-shadow: var(--sso-shadow-primary);
}
.sso .lnb-head {
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
  padding: 24px;
  min-width: 100%;
  border-bottom: 1px solid var(--sso-border-100);
  background-color: var(--sso-grayscale-0);
}
.sso .lnb-head-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sso .lnb-head-logo a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.sso .lnb-head-logo a img {
  display: block;
  width: 100px;
  height: 100%;
}
.sso .lnb-head-profile {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sso .lnb-head-profile > p:first-child {
  font-size: var(--sso-font-size-14);
  color: var(--sso-grayscale-400);
  font-weight: var(--sso-font-weight-regular);
}
.sso .lnb-head-profile .user-name {
  font-size: var(--sso-font-size-14);
  font-weight: var(--sso-font-weight-medium);
}
.sso .lnb-head-profile .text-btn {
  justify-content: right;
}
.sso .lnb-body {
  overflow-y: auto;
}
.sso .lnb-menu {
  padding-bottom: 30px;
}
.sso .lnb-menu .lnb-menu-item.has-submenu > a:after {
  display: inline-block;
  font-family: "sso-icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: never;
  text-decoration: inherit;
  text-align: center;
  position: absolute;
  top: 19px;
  right: 20px;
  font-size: var(--sso-icon-size-sm);
  transition: rotate 0.2s ease;
  rotate: 90deg;
  content: "\E807";
}
.sso .lnb-menu .lnb-menu-item.has-submenu.is-active > a {
  background-color: transparent;
}
.sso .lnb-menu .lnb-menu-item.has-submenu.is-active > a:after {
  rotate: -90deg;
}
.sso .lnb-menu .lnb-menu-item.is-active > a {
  background-color: var(--sso-lnb-active);
}
.sso .lnb-menu .lnb-menu-item > a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  width: 100%;
  padding: 19px 60px 19px 20px;
  color: var(--sso-lnb-text);
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-medium);
  box-sizing: border-box;
  transition: color 0.2s ease, background-color 0.2s ease;
  outline-offset: -2px;
}
.sso .lnb-menu .lnb-menu-item > a.is-disabled {
  color: var(--sso-grayscale-400);
  pointer-events: none;
}
.sso .lnb-menu .lnb-menu-item > a.is-disabled .icon {
  color: var(--sso-grayscale-400);
}
.sso .lnb-menu .lnb-menu-item > a:hover > span {
  text-decoration: underline;
}
.sso .lnb-menu .lnb-menu-item .lnb-submenu {
  display: none;
}
.sso .lnb-menu .lnb-menu-item .lnb-submenu-item.is-active a {
  background-color: var(--sso-lnb-active);
}
.sso .lnb-menu .lnb-menu-item .lnb-submenu-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 40px;
  color: var(--sso-grayscale-0);
  font-size: var(--sso-font-size-14);
  background-color: var(--sso-lnb);
  transition: color 0.2s ease;
  outline-offset: -2px;
}
.sso .lnb-menu .lnb-menu-item .lnb-submenu-item a span {
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
}
.sso .lnb-menu .lnb-menu-item .lnb-submenu-item a:hover span {
  text-decoration: underline;
}

/*───────────────────────────────────────
    📌 box
───────────────────────────────────────*/
.sso .box-value {
  height: 80px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: var(--sso-border-radius-xs);
  border: 1px solid var(--sso-grayscale-300);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--sso-grayscale-0);
}
.sso .box-value p:first-child {
  color: var(--sso-grayscale-500);
  font-size: var(--sso-font-size-16);
  text-align: left;
}
.sso .box-value p:last-child {
  font-size: var(--sso-font-size-24);
  font-weight: var(--sso-font-weight-bold);
  text-align: right;
}

/*───────────────────────────────────────
    📌 modal
───────────────────────────────────────*/
.modal-container {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10vh 15px;
  background: var(--sso-grayscale-max-50);
  align-items: center;
  overflow-y: auto;
  z-index: 1;
  display: none;
}
.modal-container.is-open {
  display: flex;
  z-index: 9;
}

.modal {
  display: flex;
  position: relative;
  flex-direction: column;
  row-gap: 30px;
  margin: auto;
  padding: 40px;
  border-radius: var(--sso-border-radius-md);
  box-shadow: var(--sso-shadow-primary-200);
  background: var(--sso-grayscale-0);
  box-sizing: border-box;
}
.modal.is-sm {
  width: 480px;
}
.modal.is-md {
  width: 520px;
}
.modal.is-lg {
  width: 1000px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
}
.modal-head .title {
  font-size: var(--sso-font-size-24);
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
}
.modal-head .desc {
  margin-top: 10px;
  font-size: var(--sso-font-size-16);
  line-height: 150%;
}
.modal-body .modal-msg {
  text-align: center;
}
.modal-body .modal-msg .img {
  width: 100px;
  margin: 0 auto 20px;
}
.modal-body .modal-msg .title {
  font-size: var(--sso-font-size-24);
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
  margin-bottom: 10px;
}
.modal-body .modal-msg .desc {
  font-size: var(--sso-font-size-16);
  font-weight: var(--sso-font-weight-medium);
  line-height: 150%;
}

/*───────────────────────────────────────
    📌 login
───────────────────────────────────────*/
.sso .login {
  width: 100%;
}
.sso .login-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: var(--sso-grayscale-100);
}
.sso .login-container .content-wrap-inner {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sso .login-container .content-full-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 1080px;
  padding: 40px;
  background-color: var(--sso-grayscale-100);
  box-sizing: border-box;
}
.sso .login-container .content-box {
  width: 680px;
}
.sso .login-container .content-box-title {
  margin-bottom: 60px;
}
.sso .login-container .content-box-title strong {
  display: block;
  font-size: var(--sso-font-size-20);
  font-weight: var(--sso-font-weight-bold);
  margin-bottom: 10px;
  text-align: center;
}
.sso .login-container .content-box-title h1 {
  font-size: var(--sso-font-size-42);
  font-weight: var(--sso-font-weight-bold);
  text-align: center;
}
.sso .login-container .content-box .content-box-login {
  background-color: var(--sso-grayscale-0);
  padding: 60px;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: var(--sso-shadow-primary-100);
}
.sso .login-container .content-box .content-box-login .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.sso .login-container .content-box .content-box-login h2 {
  font-size: var(--sso-font-size-30);
  font-weight: var(--sso-font-weight-medium);
}
.sso .login-container .content-box .content-box-login .auto-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sso-grayscale-300);
}
.sso .login-container .content-box .content-box-login .auto-login label {
  font-size: var(--sso-font-size-16);
  cursor: pointer;
}
.sso .login-container .content-box .content-box-login .auto-login label:hover {
  color: var(--sso-primary-300);
}
.sso .login-container .content-box .content-box-login .auto-login a {
  text-decoration: underline;
  font-size: var(--sso-font-size-16);
}
.sso .login-container .content-box .content-box-login .auto-login a:hover {
  color: var(--sso-primary-300);
}
.sso .login-container .content-box .content-box-login .captcha-title {
  font-size: var(--sso-font-size-14);
  margin-bottom: 20px;
}
.sso .login-container .content-box .content-box-login .captcha-area {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 244px auto;
  gap: 10px;
}
.sso .login-container .content-box .content-box-login .captcha-area-img img {
  width: 244px;
  height: 100%;
  aspect-ratio: 244/70;
  margin: auto;
  display: block;
}
.sso .login-container .content-box .content-box-login .captcha-area .input-group {
  width: 100%;
}
.sso .login-container .content-box .content-box-login .captcha-area-refresh {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.sso .login-container .content-box .content-box-login .captcha-area-refresh .time {
  font-size: var(--sso-font-size-14);
}
.sso .login-container .content-box .content-box-login .captcha-area-refresh .refresh-btn {
  width: 40px;
  height: 40px;
  color: var(--sso-primary-300);
  transition: rotate 0.2s ease-in-out;
}
.sso .login-container .content-box .content-box-login .captcha-area-refresh .refresh-btn::before {
  font-size: var(--sso-font-size-30);
}
.sso .login-container .content-box .content-box-login .captcha-area-refresh .refresh-btn:hover {
  rotate: 90deg;
}
.sso .login-container .content-box .content-box-login .captcha-area-input {
  display: grid;
  grid-template-columns: auto 50px;
}
.sso .login-container .content-box .content-box-login .btn-area .divider {
  display: block;
  margin: 20px 0;
  width: 100%;
  height: 1px;
  background-color: var(--sso-grayscale-300);
}
.sso .login-container .content-box .content-box-login .btn-area .link-list {
  display: flex;
  gap: 10px;
}
.sso .login-container .content-box .content-box-login .btn-area .link-list li {
  flex: 1;
}
.sso .login-container .content-box .content-box-login .btn-area .link-list li a {
  width: 100%;
}
.sso .login-container .content-box .content-box-login .desc-text-list li {
  font-size: var(--sso-font-size-14);
  line-height: 1.4;
}
.sso .login-container .content-box .content-box-login .desc-text-list li strong {
  color: var(--sso-primary-300);
  font-weight: var(--sso-font-weight-regular);
  display: block;
  margin-bottom: 10px;
}
.sso .login-container .content-box .content-box-login .desc-img-list {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.sso .login-container .content-box .content-box-login .desc-img-list > figure {
  width: 33.3333333333%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.sso .login-container .content-box .content-box-login .desc-img-list > figure figcaption {
  font-size: var(--sso-font-size-14);
}
.sso .login-container .content-box .content-box-login .desc-img-list > figure img {
  display: block;
}
.sso .login-footer {
  background-color: var(--sso-grayscale-0);
  border-top: 1px solid var(--sso-grayscale-300);
  bottom: 0;
  padding: 28px 0;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 130px;
}
.sso .login-footer-inner {
  margin: 0 auto;
  max-width: 1480px;
  height: 100%;
  box-sizing: border-box;
}
.sso .login-footer-inner .info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sso .login-footer-inner .info-list li {
  font-size: var(--sso-font-size-14);
  color: var(--sso-grayscale-400);
}
.sso .login-footer-inner .info-contact span:not(:last-child) {
  position: relative;
  padding-right: 20px;
}
.sso .login-footer-inner .info-contact span:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--sso-grayscale-400);
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
@media (max-width: 768px) {
  .sso .login .login-container .content-box-login {
    padding: 30px;
  }
  .sso .login .login-container .content-box {
    width: 100%;
  }
  .sso .login .login-container .content-full-wrap {
    padding: 20px;
  }
  .sso .login .login-container .content-box-login .captcha-area {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .sso .login .login-container .content-box-title {
    margin-bottom: 40px;
  }
  .sso .login .login-container .content-box-title strong {
    font-size: var(--sso-font-size-16);
  }
  .sso .login .login-container .content-box-title h1 {
    font-size: var(--sso-font-size-30);
  }
  .sso .login .login-container .content-box-login .title {
    margin-bottom: 20px;
  }
  .sso .login .login-container .content-box-login .title h2 {
    font-size: var(--sso-font-size-20);
  }
  .sso .login .login-container .content-box-login .btn-area .link-list {
    flex-direction: column;
  }
}
@media (max-width: 460px) {
  .sso .login .login-container .content-full-wrap {
    padding: 40px 16px;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
  }
  .sso .login .login-container .content-box-title {
    margin-bottom: 40px;
  }
  .sso .login .login-container .content-box-title strong {
    font-size: var(--sso-font-size-14);
  }
  .sso .login .login-container .content-box-title h1 {
    font-size: var(--sso-font-size-24);
  }
  .sso .login .login-container .content-box-login {
    padding: 20px;
  }
  .sso .login .login-container .content-box-login .auto-login label,
  .sso .login .login-container .content-box-login .auto-login a {
    font-size: var(--sso-font-size-14);
  }
}

/* =================== multi-factor =================== */
.sso .multi-factor {
  width: 100%;
}
.sso .multi-factor-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: var(--sso-grayscale-100);
}
.sso .multi-factor-container .content-wrap-inner {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sso .multi-factor-container .content-full-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 1080px;
  padding: 40px;
  background-color: var(--sso-grayscale-100);
  box-sizing: border-box;
}
.sso .multi-factor-container .content-box {
  width: 680px;
  background-color: var(--sso-grayscale-0);
  padding: 60px;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: var(--sso-shadow-primary-100);
}
.sso .multi-factor-container .content-box .title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 40px;
}
.sso .multi-factor-container .content-box .title h1 {
  font-size: var(--sso-font-size-30);
  font-weight: var(--sso-font-weight-medium);
}
.sso .multi-factor-container .content-box .desc-text-list {
  margin-bottom: 30px;
}
.sso .multi-factor-container .content-box .desc-text-list:nth-child(4) li {
  margin-bottom: 30px;
}
.sso .multi-factor-container .content-box .desc-text-list li {
  font-size: var(--sso-font-size-14);
  line-height: 1.4;
}
.sso .multi-factor-container .content-box .desc-text-list li strong {
  color: var(--sso-primary-300);
  font-weight: var(--sso-font-weight-regular);
  display: block;
  margin-bottom: 10px;
}
.sso .multi-factor-container .content-box .desc-img-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  margin-bottom: 30px;
}
.sso .multi-factor-container .content-box .desc-img-list .desc-img-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sso .multi-factor-container .content-box .desc-img-list .desc-img-item figcaption {
  font-size: var(--sso-font-size-14);
  text-align: center;
}
.sso .multi-factor-container .content-box .desc-img-list .desc-img-item img {
  display: block;
}
.sso .multi-factor-container .content-box .desc-img-list .arrow-img-item {
  flex: 0 0 auto;
  width: 100px;
}
.sso .multi-factor-container .content-box .qr-container {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 70px;
  justify-content: center;
}
.sso .multi-factor-container .content-box .form-section-captcha .input input {
  font-size: var(--sso-font-size-14);
  padding: 0 12px;
}
@media (max-width: 768px) {
  .sso .multi-factor .multi-factor-container .content-full-wrap {
    padding: 20px;
  }
  .sso .multi-factor .multi-factor-container .content-full-wrap .content-wrap-inner .content-box {
    padding: 30px;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .sso .multi-factor .multi-factor-container .content-box .desc-text-list:nth-child(4) li,
  .sso .multi-factor .multi-factor-container .content-box .desc-img-list,
  .sso .multi-factor .multi-factor-container .content-box .desc-text-list {
    margin-bottom: 24px;
  }
  .sso .multi-factor .multi-factor-container .content-box .title h1 {
    font-size: var(--sso-font-size-20);
  }
  .sso .multi-factor .multi-factor-container .content-box .qr-container {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 30px;
  }
  .sso .multi-factor .multi-factor-container .content-box .qr-container .form-section-captcha {
    width: 100%;
  }
  .sso .multi-factor .multi-factor-container .content-box .desc-img-list .arrow-img-item {
    width: 65px;
  }
  .sso .multi-factor .multi-factor-container .content-box .qr-container img {
    width: 100px;
  }
}
@media (max-width: 460px) {
  .sso .multi-factor .multi-factor-container .content-full-wrap {
    padding: 16px;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
  }
  .sso .multi-factor .multi-factor-container .content-full-wrap .content-box {
    padding: 40px 20px;
  }
  .sso .multi-factor .multi-factor-container .content-box .title {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .sso .multi-factor .multi-factor-container .content-box .title .text-btn {
    grid-row: 1;
  }
  .sso .multi-factor .multi-factor-container .content-box .qr-container {
    margin-bottom: 24px;
  }
}