@charset "UTF-8";
/* @import url(./font.css); */
@import url(./reset.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --color-blue: #237cff;
  /* --color-yellow: #fee104; */
  --color-yellow: #F6E96B;
  --color-light-yellow: #f5f0c4;
  --color-red: #d95555;
  --color-navy: #323649;
  --color-gray: #707070;
  --color-gray2: #323649;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-orange: #ff8000;
  --color-orange2: #cb6600;
  --color-green: #009900;
  --color-green2: #005900;
  --color-primary: #fee104;
  --color-light-gray: #eeeeee;
  --color-purple: #4b106a;
  --color-purple2: #a534e0;
  --color-light-purple: #e1d5e5;
  --box-shadow1: 0 2px 2px rgba(0, 0, 0, 0.16);
  --box-shadow2: 0 3px 6px rgba(0, 0, 0, 0.16);
}

html,
body {
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  /* font-family: "NotoSansKR", sans-serif; */
  font-family: "Noto Sans KR", serif;
  min-height: 100dvh;
  overflow: hidden;
}

/* 인풋 */
input {
  color: #000;
}

input::placeholder {
  color: #707070;
}

input:disabled {
  background-color: #fff;
}

textarea {
  resize: none;
}

textarea::placeholder {
  color: #707070;
}

/* .input__lable {
  color: #000;
}

.input__disabled {
  border: unset;
} */

.input__text {
  background-color: transparent;
  border: none;
  display: block;
  font-size: 14px;
  height: 40px;
  outline: 0 none;
  padding: 0;
  width: 100%;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 11px 10px;
}

/* .textarea__text {
  background-color: transparent;
  border: none;
  display: block;
  font-size: 14px;
  outline: 0 none;
  padding: 0;
  width: 100%;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 11px 10px;
} */

.icon__comm {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  display: inline-block;
  font-size: 1px;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
  vertical-align: top;
}

/* 버튼 */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.16);
  text-align: center;
}

.type__bg1 {
  color: #000;
  background-color: var(--color-yellow);
}

.type__bg2 {
  color: #fff;
  background-color: var(--color-navy);
}

.type__bg3 {
  color: #fff;
  background-color: #707070;
}

.type__bg10 {
  color: #fff;
  background-color: var(--color-purple2);
}

.type__round {
  border-radius: 50px;
}

.button__group {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* common-skeleton */
.wrapper {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  position: relative;
}

.header {
  width: 100%;
  height: 62px;
  margin-bottom: 0;
  padding: 0 20px;
  display: block;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-bottom: 1px solid #eeeeee;
}

.button__previous {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 20px 20px 0;
}

.button__previous .icon__previous {
  width: 9px;
  height: 18px;
  background-image: url(/public/image/icon_previous.svg);
}

.header__title {
  font-size: 16px;
}

.main__contents {
  position: relative;
  height: calc(100dvh - 62px);
  overflow-y: auto;
}

.main__contents__inner {
  height: 100%;
  padding: 0 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.main__contents__empty {
  height: 100%;
  width: 100%;
  padding: 100px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.list__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Depth1 이용약관, 메뉴얼 Depth1 */
.category__wrapper .category__item {
  border-bottom: 1px solid #eeeeee;
}

.category__wrapper .category__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}

.category__wrapper .category__icon__arrow {
  width: 9px;
  height: 15px;
  background-image: url(/public/image/icon_arrow_navy.svg);
}

/* #### 탭 #### */
.tab__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
}

.tab__item {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  color: #707070;
  border-bottom: 1px solid #eeeeee;
}

.tab__item.active {
  color: #000;
}

.tab__item.active::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #72198f;
}

.tab__item > a {
  width: 100%;
  display: inline-block;
}

/* utils>pagination */
#pagination {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
  margin-top: auto;
}

#pagination li {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

#pagination li:hover {
  background-color: #ddd;
  color: #000;
}

#pagination li.active {
  background-color: var(--color-purple2);
  color: #fff;
  border-color: var(--color-purple2);
  cursor: default;
}

/* #pagination li.disabled {
  background-color: #f1f1f1;
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
} */

/* 모달 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000072;
  z-index: 1000;
  display: none;
}

.modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  max-height: 90vh;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--box-shadow2);
}

.modal .button__modal-close {
  width: 160px;
}

/* Nice Select Custom */
.nice-select.common--select {
  height: 35px;
  line-height: 35px;
  float: none;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #fff;
  padding-left: 10px;
}

.nice-select.common--select .list {
  width: 100%;
  overflow-y: auto;
  margin-top: 1px;
  transform: scale(1) translateY(0);
  scrollbar-width: unset;
}

.nice-select.common--select .list::-webkit-scrollbar {
  width: 0;
}

.nice-select.common--select.active,
.nice-select.common--select.open,
.nice-select.common--select.focus {
  border-color: #d3d3d3;
}

.nice-select.common--select .option {
  border-bottom: 1px solid #ddd;
  color: #565656;
  min-height: 35px;
  line-height: 35px;
  padding-left: 10px;
}

.nice-select.common--select .option:last-child {
  border-bottom: none;
}

.nice-select.common--select .option.selected {
  font-weight: normal !important;
  display: none;
}

.nice-select.common--select::after {
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #191919;
  border-right: 2px solid #191919;
}

.select-time .list {
  max-height: 280px;
}

.park_badge {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  text-align: center;
  font-weight: 500;
  background-color: var(--color-gray2);
  color: var(--color-white);
}

.park_badge.gray {
  background-color: var(--color-gray);
}

.park_badge.red {
  background-color: var(--color-red);
}

.park_badge.yellow {
  background-color: var(--color-primary);
  color: var(--color-black);
}

/* 주차시간 모달 */
.modal-select-time .modal__inner {
  padding: 40px 20px 20px;
  text-align: center;
  height: 260px;
  overflow-y: unset;
}

.modal-select-time .modal__inner .select-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
}

.modal-select-time .modal__inner .select-tie .select-yellow {
  width: 100%;
}

.modal-select-time .modal__inner .select-time + span.active {
  font-size: 12px;
}

.modal-select-time .modal__inner .modal__btn {
  margin-top: 40px;
}

/* 주차 사용 예정 기간 모달 */
.modal-schedule-time .modal__inner {
  padding: 40px 20px 20px;
  text-align: center;
  height: 230px;
  overflow-y: unset;
}

.modal-schedule-time .modal__header {
  margin-bottom: 20px;
}
.modal-schedule-time h3 {
  margin-bottom: 20px;
}

.modal-schedule-time .common--select.select-yellow {
  width: 155px;
}

.modal-schedule-time .modal__inner .modal__btn {
  margin-top: 40px;
}

/* select??? */
.select-yellow,
.common--select.select-yellow {
  border: 1px solid var(--color-light-gray) !important;
  height: 35px !important;
  line-height: 35px !important;
}

.select-yellow span.current {
  font-size: 14px;
  font-weight: bold;
  /*color: var(--color-gray);*/
}

.modal__header h3 {
  font-size: 15px;
  text-align: center;
}

.modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
}

.modal__close button {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/public/image/icon/icon_modal_close.svg) no-repeat center
    center / 10px;
}

.modal__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.modal__btn > * {
  flex: 1;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--box-shadow1);
}

.modal__btn .btn_cancel {
  background-color: var(--color-gray);
  color: var(--color-white);
}

.modal__btn .btn_confirm {
  background-color: var(--color-primary);
}

/* #### 내 주차장 공유 #### */
.modal__inner span.active {
  color: var(--color-red);
}


.modal__primary .modal__inner {
  padding: 20px;
  text-align: center;
}

.select-yellow::after,
.common--select.select-yellow::after {
  width: 9px;
  height: 6px;
  border: none !important;
  transform: translateY(-50%) rotate(0deg) !important;
  margin-top: 0 !important;
  background: url(/public/image/icon/icon_select_arrow.svg) no-repeat center
    center / contain;
}

.select-yellow.open:after,
.common--select.select-yellow.open:after {
  transform: translateY(-50%) rotate(-180deg) !important;
  transform-origin: center !important;
}

/* 주차 시작 시간 모달 */
.modal-select-time .modal__header {
  margin-bottom: 20px;
}

.modal-select-time .nice-select.select-time__list.open .list {
  overflow-y: auto;
  height: 232px;
  scrollbar-width: none;
}

.modal-select-time
  .nice-select.select-time__list.open
  .list::-webkit-scrollbar {
  width: 0;
}