@charset "utf-8";

/* ---------- default ----------- */
/* variable */
:root {
  --color--primary: #ffd900;
  --color--black: #333333;
  --color--gray: #dddddd;
  --color--L-gray: #fafafa;

  --font--pretendard: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "맑은 고딕", "dotum", "돋움", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
  --font--esamanru: "esamanru", "Malgun Gothic", "맑은 고딕", "dotum", "돋움",
    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sat: env(safe-area-inset-top);
}

/* font */
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
cite,
code,
del,
em,
img,
ins,
q,
small,
strong,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary,
time,
mark,
audio,
video,
button,
textarea,
input,
select {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "맑은 고딕", "dotum", "돋움", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 400;
  color: var(--color--black);
  letter-spacing: -0.025em;
}
body {
  overflow-x: hidden;
  min-height: 100dvh;
  background-color: #fff;
}
body.fixed {
  overflow: hidden;
}
input[type="password"] {
  font-family: var(--font--pretendard);
}
input[type="password"]::placeholder {
  font-family: var(--font--pretendard);
}

/* etc */
.screen-out {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 1px;
  clip-path: polygon(0 0, 0 0, 0 0);
}
.button__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
}
.button__wrap.flex-column {
  flex-direction: column;
  row-gap: 4px;
}
.button__wrap .btn {
  max-width: 600px;
}
.p_br {
  display: block;
}
.m_br {
  display: inline;
  padding: 0 0.11em;
}
.req-star {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: #ff0000;
}
.hl-primary {
  display: inline-block;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
.hl-primary > span {
  position: relative;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  z-index: 1;
}
.hl-primary::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  display: block;
  width: calc(100% + 2px);
  height: 50%;
  background-color: rgba(255, 217, 0, 0.3);
  z-index: 0;
}
.hl-gray {
  display: inline-block;
  position: relative;
}
.hl-gray > span {
  position: relative;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  z-index: 1;
}
.hl-gray::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 8px;
  display: block;
  width: calc(100% + 8px);
  height: 18px;
  background-color: rgba(153, 153, 153, 0.3);
  z-index: 0;
}

/* ----- element ----- */
/* btn */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-rect {
  width: 100%;
  height: 44px;
  background-color: #252526;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color--primary);
}
.btn-border {
  border: 1px solid var(--color--gray);
  height: 44px;
  width: 100%;
  border-radius: 4px;
}
.btn-rect.btn-s {
  max-width: 64px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #fff;
}
.btn-xs {
  max-width: 71px;
  height: 36px;
  font-size: 14px;
  font-weight: 400;
}
.btn-rect:disabled {
  cursor: default;
}
.btn-rect:disabled,
.btn-rect.type-cancel {
  background-color: var(--color--gray);
  color: #505050;
}
.btn-rect.type-gray {
  background-color: #666666;
}
.btn-rect.btn-s:disabled,
.btn-rect.type-gray-2 {
  background-color: #eeeeee;
  color: #767676;
}

/* input */
.input__label {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 4px;
}
.input__label > .sub {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: #767676;
}
.common-input__wrap .common-input__box + .common-input__box {
  margin-top: 24px;
}
.common-input__box {
  position: relative;
}
.input__inner + .input__inner {
  margin-top: 4px;
}
.input__inner.check-btn {
  display: flex;
  column-gap: 4px;
}
.input__inner.check-btn .common-input {
  width: calc(100% - 68px);
}
.input__inner.check-btn .file__box {
  width: 100%;
  max-width: 64px;
}
.input__inner.check-btn .file__box.w-100,
.input__inner.check-btn .file__box.w-100 .btn-rect {
  max-width: initial;
}
.common-input__box.address > * + * {
  margin-top: 4px;
}
.common-input__box.address .input__label {
  margin-bottom: 0;
}

.common-input {
  width: 100%;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--color--gray);
  border-radius: 0;
  font-size: 14px;
  color: var(--color--black);
}
.common-input.type-s {
  max-width: 168px;
}
.common-input::placeholder {
  color: #999999;
}
.input__inner.error .common-input {
  border-color: #e15241;
}

.common-textarea {
  width: 100%;
  height: 124px;
  padding: 8px;
  border: 1px solid var(--color--gray);
  border-radius: 0;
  font-size: 14px;
  line-height: 20px;
  resize: none;
}
.common-textare::placeholder {
  color: #999999;
}

/* checkbox/radio */
.radio__box {
  display: flex;
  align-items: center;
  column-gap: 40px;
}
.radio__label,
.checkbox__label {
  display: flex;
  align-items: center;
  column-gap: 8px;
  cursor: pointer;
}
.radio__label .radio__text,
.checkbox__label .checkbox__text {
  font-size: 16px;
  line-height: 24px;
}
.common-checkbox {
  width: 11px;
  height: 11px;
  border: 1px solid #999999;
  cursor: pointer;
}
.common-checkbox:checked {
  border-color: var(--color--primary);
  background: url(/_img/common/icon_check.svg) no-repeat center center/7px
    var(--color--primary);
}
.common-radio {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid #999999;
  border-radius: 50%;
  cursor: pointer;
}
.common-radio:checked {
  border-color: var(--color--primary);
  background-color: var(--color--primary);
  box-shadow: inset 0px 0px 0px 1.5px #fff;
}

/* select */
.common-select {
  width: 100%;
  height: 44px;
  line-height: 42px;
  font-size: 14px;
  border-radius: 0px;
  border: 1px solid var(--color--gray);
  background-color: #fff;
  float: none;
  padding-left: 8px;
  padding-right: 30px;
}
.common-select .current {
  color: #999999;
}
.common-select.active {
  border-color: #999999;
}
.common-select.category .option:first-child {
  display: none;
}
.common-select .list {
  width: calc(100% + 2px);
  max-height: 130px;
  overflow-y: auto;
  border-radius: 0px;
  border: 1px solid var(--color--gray);
  box-shadow: none;
  margin-top: 3px;
  left: -1px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
.common-select .list::-webkit-scrollbar {
  width: 10px;
}
.common-select .list::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 10px;
  background-clip: padding-box;
  border: 3px solid transparent;
}
.common-select .list::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

.common-select .option {
  height: 36px;
  min-height: 36px;
  line-height: 36px;
  font-size: 14px;
  padding: 0 8px;
}
.common-select::after {
  width: 16px;
  height: 16px;
  right: 8px;
  margin-top: -8px;
  border: none;
  background: url(/_img/common/icon_select.svg) no-repeat center center/contain;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}
.common-select.open::after {
  transform: rotateX(180deg);
}

.common-select.disabled {
  border-color: var(--color--gray);
  background-color: var(--color--L-gray);
}
.common-select.sort {
  max-width: 96px;
  height: 32px;
  line-height: 30px;
  padding: 0 8px;
  border-color: var(--color--gray);
}
.common-select.sort .current {
  font-size: 12px;
}
.common-select.sort::after {
  right: 8px;
}
.common-select.sort .option {
  height: 36px;
  min-height: 36px;
  line-height: 36px;
  padding: 0 8px;
  font-size: 12px;
}
.common-select.sort .list {
  border-color: var(--color--gray);
}
.common-select.sort.status {
  max-width: 100px;
}

.select-box {
  display: block;
  width: 100%;
  height: 48px;
  position: relative;
  margin-bottom: 20px;
}
.select-box__label {
  width: 100%;
  height: 48px;
  line-height: 46px;
  border: 1px solid var(--color--gray);
  padding-left: 8px;
  padding-right: 30px;
  color: #999999;
  font-size: 12px;
  cursor: pointer;
}
.select-box .review-star {
  align-items: center;
  height: 100%;
}
.select-box__label::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: none;
  background: url(/_img/common/icon_select.svg) no-repeat center center/contain;
  margin-top: -8px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: rotateX(0deg);
  transition: all 0.15s ease-in-out;
}
.select-box__label.on::after {
  transform: rotateX(180deg);
}
.select-box .select-box__ul {
  position: absolute;
  top: 48px;
  background: #fff;
  width: 100%;
  height: 0;
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--color--gray);
  margin-top: 2px;
  opacity: 0;
  z-index: 5;
  transform-origin: 50% 0;
  transform: scale(0.75) translateY(-21px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
.select-box .select-box__ul.active {
  height: auto;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.select-box .select-box__ul li {
  height: 48px;
  line-height: 48px;
  color: #707070;
  font-size: 12px;
  transition: all 0.2s;
  cursor: pointer;
}
.select__input {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 1px;
  clip-path: polygon(0 0, 0 0, 0 0);
}
.select__label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.select-box__ul li .review-star {
  height: 100%;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 0;
}
.select-box__ul::-webkit-scrollbar {
  width: 10px;
}
.select-box__ul::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 10px;
  background-clip: padding-box;
  border: 3px solid transparent;
}
.select-box__ul::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

/* datepicker */
.ui-datepicker {
  width: 14em;
}
.input__inner.date {
  position: relative;
}
.input__inner.date::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  display: block;
  width: 16px;
  height: 16px;
  background: url(/_img/common/icon_calendar.svg) no-repeat center
    center/contain;
  transform: translateY(-50%);
}
.input__inner.date .input-date {
  padding-right: 24px;
}
.input__inner.date .input-date:read-only {
  background-color: #fff;
}
.input__inner.date .input-date.bg-readonly:disabled {
  background-color: var(--color--L-gray);
}

/* pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 4px;
  margin-top: 40px;
}
.pagination .page__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 4px;
}
.pagination .page__link > a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 2px;
  font-size: 11px;
  color: #767676;
}
.pagination .page__link.on > a {
  font-weight: 600;
  background-color: #252526;
  color: #fff;
}
.page__button {
  display: block;
  width: 16px;
  height: 16px;
}
.page__button.btn-prev {
  background: url(/_img/common/page_prev.svg) no-repeat center center/contain;
}
.page__button.btn-next {
  background: url(/_img/common/page_next.svg) no-repeat center center/contain;
}
.page__button.btn-prev.off {
  background: url(/_img/common/page_prev_off.svg) no-repeat center
    center/contain;
}
.page__button.btn-next.off {
  background: url(/_img/common/page_next_off.svg) no-repeat center
    center/contain;
}

/* modal */
.modal-layer {
  display: none;
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-layer.on {
  display: block;
}
.modal-layer__window {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 40px);
  max-width: 500px;
  min-height: 148px;
  padding-bottom: 16px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.modal-layer__window2 {
  max-width: 900px !important;
  max-height: 80%;
}
.modal__header {
  position: relative;
  height: 32px;
  border-bottom: 1px solid #f4f4f4;
}
.modal__header .btn-modal-close {
  position: absolute;
  right: 16px;
  top: 8px;
  display: block;
  width: 16px;
  height: 16px;
  background: url(/_img/common/icon_close.svg) no-repeat center center / contain;
}
.modal__content {
  padding: 24px 16px 0;
}
.modal-alert__text {
  font-family: var(--font--esamanru);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  text-align: center;
  color: #333333;
}
.modal__content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: contain;
}
.modal-layer__window .button__wrap {
  margin-top: 24px;
  padding: 0 16px;
}
.modal-layer__window .button__wrap .btn-rect {
  height: 32px;
  font-size: 14px;
  line-height: 20px;
}

/* common style */
.user-info__text {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  display: flex;
  column-gap: 2px;
  align-items: center;
  font-size: 13px;
  line-height: 20px;
  margin-top: 2px;
  padding: 0 2px;
}
.user-info__text::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.user-info__text.pass {
  color: #4aa63c;
}
.user-info__text.pass::before {
  background: url(/_img/common/check_pass.svg) no-repeat center center/8px
    #4aa63c;
}
.user-info__text.error {
  color: #e15241;
}
.user-info__text.error::before {
  background: url(/_img/common/check_error.svg) no-repeat center center/8px
    #e15241;
}
.user-info__text.static {
  position: static;
  margin-top: 0;
  margin-bottom: 4px;
}

/* file */
.file-list__box {
  display: flex;
  flex-wrap: wrap;
}
.file__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.file__list:has(.file__item) {
  margin-top: 4px;
}
.file__item {
  max-width: calc(33% - 2.6px);
  display: flex;
  column-gap: 4px;
  padding: 4px 8px;
  background-color: var(--color--L-gray);
}
.file__item > span {
  overflow: hidden;
  max-width: calc(100% - 20px);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: #505050;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file__item > a {
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: #505050;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file__box .common-file {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 1px;
}
.file__box .btn-file {
  cursor: pointer;
}
.input__inner.check-btn .file-name {
  overflow: hidden;
  width: calc(100% - 83px);
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color--gray);
  border-radius: 4px;
  font-size: 16px;
  line-height: 42px;
  color: var(--color--black);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-info__text {
  margin-top: 4px;
}
.file-info__text > p {
  font-size: 12px;
  line-height: 18px;
  color: #999999;
}

/* tab */
.tab__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 154px;
  height: 32px;
  border: 1px solid var(--color--gray);
  background-color: var(--color--L-gray);
  font-size: 12px;
  line-height: 18px;
  color: #767676;
  text-align: center;
}
.tab__item.on {
  border-color: #252526;
  background-color: #252526;
  color: #fff;
}
.checkbox-tab .tab__item {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.tab-check__box {
  flex: 1;
  height: 32px;
}
.tab-check__box input {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 1px;
  clip-path: polygon(0 0, 0 0, 0 0);
}
.tab-check__box input:checked + .tab__item {
  border-color: #252526;
  background-color: #252526;
  color: #fff;
}