@charset "utf-8";
@import "variable.css";
* {
  box-sizing: border-box;
  font-family:
    "Pretendard GOV Variable",
    "Pretendard GOV",
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    "Helvetica Neue",
    "Segoe UI",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01rem;
}
body,
html {
  height: 100%;
  color: var(--color-default);
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
u,
ul,
video {
  margin: 0;
  padding: 0;
  border: 0;
  word-break: keep-all;
  word-wrap: break-word;
}

li,
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
  font-weight: 700;
}
a,
button,
input,
textarea {
  outline: 0;
}
svg {
  vertical-align: top;
}

strong {
  font-weight: 700;
}

/*=============================================
= btn-group =
=============================================*/
.btn-common {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  padding: 0.75rem;
  background: none;
  font-size: var(--fs-16);
  gap: 0.25rem;
  cursor: pointer;
}
.btn-common span {
  display: block;
  align-items: center;
  font-weight: bold;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--white);
}
.btn-primary.disabled {
  background-color: var(--gray-a);
  color: var(--gray-c);
}

.btn-ghost {
  border: 0.0625rem solid var(--brand);
  color: var(--brand);
}
.btn-ghost:hover {
  border: 0.0625rem solid var(--btn_hover);
  color: var(--btn_hover);
}
.btn-ghost:hover > svg > path {
  stroke: var(--btn_hover);
}
.btn-cancel {
  margin: 0 auto;
  border: 0;
  background-color: #7d7d7d;
  color: var(--white);
}
.btn-outline {
  border: 0.0625rem solid var(--gray-d);
  color: var(--gray-9);
}
.btn-outline:hover {
  border: 0.0625rem solid var(--gray-2);
  color: var(--gray-2);
}
.btn-outline:hover > svg > path {
  stroke: var(--gray-2);
}
.btn-outline:hover > .btn__text {
  color: var(--gray-2);
}

.btn-outline.icon-search span.btn-icon-front {
  mask: url("../images/icon-search.svg") no-repeat;
  background-color: var(--gray-6);
  width: 20px;
  height: 20px;
}
.btn-outline.icon-add span.btn-icon-front {
  mask: url("../images/icon-add.svg") no-repeat;
  background-color: var(--gray-6);
  width: 20px;
  height: 20px;
}
.btn-outline.icon-check span.btn-icon-front {
  mask: url("../images/icon-check.svg") no-repeat;
  background-color: var(--gray-6);
  width: 20px;
  height: 20px;
}

.btn-outline:hover.icon-search span.btn-icon-front,
.btn-outline:hover.icon-add span.btn-icon-front {
  background-color: var(--gray-3);
}

.btn-text {
  color: var(--gray-9);
}
.btn-text > svg > path {
  stroke: var(--brand);
}
.btn-text:hover {
  color: var(--btn_hover);
}
.btn-text:hover > svg > path {
  stroke: var(--btn_hover);
}
.btn-text__gray {
  color: var(--gray_04);
}
.btn-text__gray > svg > path {
  stroke: var(--gray_04);
}
.btn-text__gray:hover {
  color: var(--gray_02);
}
.btn-text__gray:hover > svg > path {
  stroke: var(--gray_02);
}
.btn-cancel > svg,
.btn-ghost > svg,
.btn-text__gray > svg,
.btn-outline > svg,
.btn-primary > svg,
.btn-text > svg {
  display: block;
  margin-right: 0.5rem;
}

/*===== End of btn-group ======*/

/*=============================================
= table =
=============================================*/

/* table { border-collapse: collapse; border-spacing: 0; width: 100%; } 
.default-table tr:hover td { background: var(--table__tr--hover); } 
.default-table td,
.default-table th { border-top: 0.0625rem solid var(--gray-d); border-bottom: 0.0625rem solid var(--gray-d); border-left: 0.0625rem solid var(--gray-d); border-right: 0.0625rem solid var(--gray-d); text-align: center; padding: 0.75rem 0.625rem; letter-spacing: 0; } 
.default-table th { color: var(--grkay-3); background: var(--gray-ef); border-top: 0.0625rem solid var(--gray-d); } 
.default-table td { color: var(--gray-6); letter-spacing: 0; } 
.default-table td:last-child,
.default-table th:last-child { border-right: none; } 
.default-table td:first-child,
.default-table th:first-child { border-left: none; } 

.none-table { border: 0 solid transparent; } 
.none-table tr > td,
.none-table tr > th { border: 0 solid transparent; padding: 0.25rem 0; margin: 0; font-size: 0.625rem; text-align: center; } 
.none-table tr > th { color: #aaa; } */

/*===== End of table ======*/

/*=============================================
= form =
=============================================*/

.formTable td {
  padding: 0.625rem;
}
.formTable td:first-child {
  text-align: right;
}
input,
select,
textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 0;
}

select {
  min-height: 44px;
  border-radius: 4px;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  background: url(../images/icon-select-arrow.svg) no-repeat calc(100% - 10px) center;
  background-color: var(--gray-ef);
  border: 0.0625rem solid var(--gray-d);
  padding: 8px 40px 8px 12px;
}
select::-ms-expand {
  display: none;
}
select:hover {
  border: 0.0625rem solid var(--gray-3);
}

select.select-sm {
  height: 30px;
  font-size: 0.75rem;
  font-weight: bold;
}

.input-default {
  background: var(--white);
  border: 1px solid var(--gray-d);
  font-size: var(--fs-16);
  padding: 12px;
  min-height: 44px;
  border-radius: 4px;
}
.input-default::placeholder {
  color: var(--gray-9);
  font-weight: 500;
}

input[type="checkbox"] {
  display: none;
}

.checkBoxLabel {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.0625rem solid var(--gray-d);
  display: inline-block;
  background: #fff;
  cursor: pointer;
  vertical-align: bottom;
  border-radius: 0.25rem;
}

input[type="checkbox"]:checked + label {
  background-color: var(--input-checked-bg);
  background-image: url("../images/icon-check.svg");
  background-repeat: no-repeat;
  border: 0.125rem solid var(--input-checked-border);
}

.toggle {
  min-height: 2rem;
  background: var(--gray-e);
  border-radius: 100vw;
  width: 3.75rem;
  display: block;
  position: relative;
}
.toggle-ball {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 100vw;
  background: var(--white);
  display: block;
  position: absolute;
  top: 50%;
  left: 0.25rem;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}
input[type="checkbox"]:checked + label.toggle {
  background-color: var(--color-primary);
  background-image: none;
  border: 0.125rem solid var(--input-checked-border);
}
input[type="checkbox"]:checked + label.toggle .toggle-ball {
  left: 28px;
}

input[type="radio"] {
  display: none;
}
.radioCheck {
  background: var(--radio-bg);
  border: 1px solid var(--radio-border);
  padding: 0.75rem;
  border-radius: 4px;
  color: var(--color-desc);
  text-align: center;
}
input[type="radio"]:checked + .radioCheck {
  background: var(--input-checked-bg);
  border-color: var(--input-checked-border);
  color: var(--color-primary);
}
.tag {
  padding: 6px 12px;
  background: var(--radio-bg);
  border: 1px solid var(--radio-border);
  border-radius: 100vw;
  color: var(--color-desc);
}
input[type="radio"]:checked + .tag {
  background: var(--input-checked-bg);
  border-color: var(--input-checked-border);
  color: var(--color-primary);
}

input[type="date"] {
  position: relative;
  font-size: 14px;
}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: 0 0;
  z-index: 1;
}
input[type="date"]::before {
  content: "";
  color: transparent;
  background: url(../images/icon-calendar.svg) no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
}

textarea {
  border: 0.0625rem solid #d8d8d8;
  padding: 0.625rem;
  margin: 0;
  line-height: 160%;
  font-size: 1rem;
  resize: vertical;
}
.borderTopVisible {
  border-top: 0.0625rem solid #d2d2d2;
}
.borderTopInvisible {
  border-top: 0 solid transparent;
}
.textareaResize {
  resize: none;
}
.textareaResizeVertical {
  resize: vertical;
}

/*===== End of form ======*/

/**
 *
 * shortcut
 *
 */

.primary {
  color: var(--color-primary);
}
.success {
  color: var(--color-success);
}
.danger {
  color: var(--color-danger);
}
.gray {
  color: var(--gray-9);
}

.mAuto {
  margin: 0 auto;
}
.fontDotum {
  font-family: "돋움";
  font-size: 0.75rem;
}
.scrollBarsEdit {
  scrollbar-3dlight-color: #efefef;
  scrollbar-arrow-color: #ddd;
  scrollbar-base-color: #efefef;
  scrollbar-face-color: #ddd;
  scrollbar-track-color: #efefef;
  scrollbar-shadow-color: #ddd;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.clearFix::after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  clear: both;
}
.dp-b {
  display: block !important;
}
.dp-i {
  display: inline;
}
.dp-n {
  display: none;
}
.dp-ib {
  display: inline-block;
}

/* display : flex */
.dp-f {
  display: flex;
}
.dp-f-col {
  flex-direction: column;
}
.df-aic {
  align-items: center;
}
.df-aifs {
  align-items: flex-start !important;
}
.df-jcc {
  justify-content: center;
}
.df-jcsb {
  justify-content: space-between;
}
.df-jcse {
  justify-content: space-evenly;
}

.flex-1 {
  flex: 1 !important;
}
.flex-2 {
  flex: 2 !important;
}
.flex-3 {
  flex: 3 !important;
}
.flex-4 {
  flex: 4 !important;
}
.flex-5 {
  flex: 5 !important;
}

.gap04 {
  gap: 0.25rem !important;
}
.gap06 {
  gap: 0.375rem !important;
}
.gap08 {
  gap: 0.5rem !important;
}
.gap12 {
  gap: 0.75rem !important;
}
.gap16 {
  gap: 1rem !important;
}
.gap20 {
  gap: 1.25rem !important;
}

/* display : flex end*/

.fs10 {
  font-size: 0.625rem !important;
}
.fs12 {
  font-size: 0.75rem !important;
}
.fs11 {
  font-size: 0.6875rem !important;
}
.fs14 {
  font-size: 0.875rem !important;
}
.fs32 {
  font-size: 2rem !important;
}
.of-h {
  overflow: hidden;
}
.of-a {
  overflow: auto;
}
.of-v {
  overflow: visible;
}
.of-s {
  overflow: scroll;
}
.pos-s {
  position: static;
}
.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}
.pos-f {
  position: fixed;
}
.fw-b {
  font-weight: 700;
}
.fw-n {
  font-weight: 400;
}
.txt-l {
  text-align: left !important;
}
.txt-c {
  text-align: center;
}
.txt-r {
  text-align: right;
}
.txt-j {
  text-align: justify;
}
.txt-bold {
  font-weight: 700;
}
.mt0 {
  margin-top: 0 !important;
}
.mt04 {
  margin-top: 0.25rem !important;
}
.mt08 {
  margin-top: 0.5rem !important;
}
.mt12 {
  margin-top: 0.75rem !important;
}
.mt20 {
  margin-top: 1.25rem !important;
}
.mt24 {
  margin-top: 1.5rem !important;
}
.mt32 {
  margin-top: 2rem !important;
}
.mt40 {
  margin-top: 2.5rem !important;
}
.mt44 {
  margin-top: 2.75rem !important;
}
.mt60 {
  margin-top: 3.75rem !important;
}
.mt70 {
  margin-top: 4.375rem !important;
}
.mt80 {
  margin-top: 5rem !important;
}
.mt120 {
  margin-top: 7.5rem !important;
}
.mb60 {
  margin-bottom: 3.75rem !important;
}
.mb08 {
  margin-bottom: 0.5rem !important;
}
.mb80 {
  margin-bottom: 5rem !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mr20 {
  margin-right: 1.25rem !important;
}
.mb20 {
  margin-bottom: 1.25rem !important;
}
.mb40 {
  margin-bottom: 2.5rem !important;
}
.mb60 {
  margin-bottom: 3.75rem !important;
}
.mlAuto {
  margin-left: auto !important;
}
.mtAuto {
  margin-top: auto !important;
}
.p12 {
  padding: 0.75rem !important;
}
.p20 {
  padding: 1.25rem !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pl0 {
  padding-left: 0 !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pb40 {
  padding-bottom: 2.5rem !important;
}
.pb60 {
  padding-bottom: 3.75rem !important;
}
.pb80 {
  padding-bottom: 5rem !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pr08 {
  padding-right: 0.5rem !important;
}
.pr20 {
  padding-right: 1.25rem;
}
.p12 {
  padding: 0.75rem;
}
.pl08 {
  padding-left: 0.5rem !important;
}

.wp30 {
  width: 30%;
}
.wp40 {
  width: 40%;
}
.wp45 {
  width: 45%;
}
.wp535 {
  width: 53.5%;
}
.wp100 {
  width: 100%;
}
.w100 {
  width: 6.25rem;
}
.w360 {
  width: 22.5rem;
}
.w480 {
  width: 30rem;
}
.mw60 {
  max-width: 3.75rem !important;
}
.mw80 {
  max-width: 5rem !important;
}
.mw100 {
  max-width: 6.25rem !important;
}

.nw60 {
  min-width: 3.75rem !important;
}
.nw80 {
  min-width: 5rem !important;
}
.nw100 {
  min-width: 6.25rem !important;
}
.nw120 {
  min-width: 7.5rem !important;
}
.nw160 {
  min-width: 10rem !important;
}
.nw200 {
  min-width: 12.5rem !important;
}

.hp100 {
  height: 100% !important;
}
.h130 {
  height: 8.125rem !important;
}

/* Password eye toggle (directive: v-password-eye / auto-attach) */
.password-eye-btn {
  width: 2rem;
  height: 2rem;

  cursor: pointer;

  justify-content: center;
  position: absolute;
  right: 8px;
  transform: translateY(20%);
  background-image: url('/images/common/eye-closed.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* background-size: 20px 20px; */
  background-color: transparent;
}

.password-eye-btn.is-open {
  background-image: url('/images/common/eye-open.svg');
}