@charset "UTF-8";
.swiper-slide {
  display: flex;
  background: #f6f7fb;
}
.swiper-slide img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: cover;
}
@media (min-width: 1280px) {
  .swiper-slide img {
    width: auto;
    height: 100%;
  }
}

.slide-caption {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  color: #fff;
  width: 100%;
  max-width: 1040px;
}

.swiper-controls {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  z-index: 1;
  display: none;
}
@media (min-width: 1280px) {
  .swiper-controls {
    display: block;
  }
}
.swiper-controls .swiper-button-prev,
.swiper-controls .swiper-button-next {
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: #fff;
  --swiper-theme-color: #fff;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}
.swiper-controls .swiper-button-prev:hover,
.swiper-controls .swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.1);
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  --swiper-pagination-bottom: 0;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.65);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #00b894;
}

.step-ui {
  padding-bottom:10px;
  overflow:hidden;
  overflow-x:auto;
}
.step-ui::-webkit-scrollbar {
    height: 8px;
}
.step-ui::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}
.step-ui::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
.step-ui .step-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
@media screen and (max-width:674px){
  .step-ui .step-container{gap:0;}
}
.step-ui .step-container .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex: 1 1 0;
  min-width:70px;
}
.step-ui .step-container .step .circle {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e5e5e5;
  border-radius: 50%;
  font-size: 16px;
}
.step-ui .step-container .step p {
  font-size: 16px;
  text-align: center;
  word-break:keep-all;
}
.step-ui .step-container .step.active .circle {
  background: #000;
  color: #fff;
}
.step-ui .step-container .line {
  flex: 1 0 0;
  width: 100%;
  height: 2px;
  background: #d4d4d4;
  min-width:20px;
}

.content-row {
  --gutter-x: 1rem;
  display: flex;
  padding-bottom:10px;
  overflow:hidden;
  overflow-x:auto;
}
.content-row::-webkit-scrollbar {
    height: 8px;
}
.content-row::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}
.content-row::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
.content-row .content-title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
}
.content-row > .form-group {
  margin-bottom: 16px;
}
.content-row > .form-group.col-6{
  width:100%;
  max-width:600px;
}

.register-button {
  padding: 11px 24px;
  background: #262626;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.register-button:hover {
  background: #404040;
}

.vehicle-select {
  width: 457px;
  height: 42px;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  font-size: 16px;
  color: #000000;
}

.select-service {
  display: flex;
  gap: 16px;
  width: 100%;
}
.select-service .service-option {
  display: flex;
  align-items: center;
  width: 100%;
}
.select-service .service-option input[type=radio] {
  display: none;
}
.select-service .service-option .service-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
  gap: 12px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.select-service .service-option .service-button [class*=ic_] {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 3px;
  background: #d9d9d9;
  border-radius: 50%;
}
.select-service .service-option .service-button [class*=ic_]:after {
  display: flex;
  width: 24px;
  height: 24px;
}
.select-service .service-option .service-button span {
  font-size: 16px;
  text-align: center;
  color: #000000;
  word-break:keep-all;
}
.select-service .service-option .service-button:hover {
  border-color: #00b894;
}
.select-service .service-option .service-button:hover [class*=ic_] {
  background-color: rgba(0, 184, 148, 0.15);
}
.select-service .service-option .service-button:hover span {
  color: #00b894;
}
.select-service .service-option input[type=radio]:checked + .service-button {
  background: #00b894;
  color: #ffffff;
  box-shadow: 0px 1px 8px rgba(0, 184, 148, 0.25);
  border-color: #00b894;
}
.select-service .service-option input[type=radio]:checked + .service-button [class*=ic_] {
  background-color: rgb(255, 255, 255);
}
.select-service .service-option input[type=radio]:checked + .service-button span {
  color: #ffffff;
}
.select-service .service-option input[type=radio]:checked + .service-button .icon {
  background: #ffffff;
}
.select-service .service-option input[type=radio]:checked + .service-button:hover {
  border-color: #00b894;
}
.select-service .service-option input[type=radio]:checked + .service-button:hover [class*=ic_] {
  background-color: rgb(255, 255, 255);
}
.select-service .service-option input[type=radio]:checked + .service-button:hover span {
  color: #ffffff;
}

.service-content {
  width: auto;
}
.service-content .modal-help {
  position: absolute;
  top: 0;
  right: 0;
}

.service-list {
  display: flex;
  gap: 0;
}
.service-list > .service-item {
  flex: 0 0 auto;
  width: 100%;
}
.car_wash-swiper{
  position:relative;
  padding-bottom:20px;
}
.car_wash-swiper .swiper-pagination{
  bottom:-20px;
}
.service-list.car-wash {
  width: 100%;
}
.service-list.car-wash .service-item {
  width: calc(33.333% - 16px);
}
.service-list .service-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height:230px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
@media (min-width: 1280px) {
  .service-list .service-option {
    height: 227px;
  }
}
.service-list .service-option.active {
  background: rgba(0, 184, 148, 0.05);
  border-color: #00b894;
  color: #ffffff !important;
}
.service-list .service-option.active h3 {
  color: #00b894;
}
.service-list .service-option input[type=checkbox] {
  display: none; /* 기본 체크박스 숨김 */
}
.service-list .service-option input[type=checkbox]:checked + .service-content:after {
  background-color: #00b894;
  border-color: #00b894;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}
.service-list .service-option > .service-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-left: 32px;
}
.service-list .service-option > .service-content:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  background-color: #fff;
}
.service-list .service-option > .service-content h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: #000000;
}
.service-list .service-option .service-details li {
  margin: 2px 0;
  font-size: 16px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 2줄까지만 보이도록 설정 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal; /* 줄바꿈 허용 */
}
.service-list .service-option .service-details li:first-child {
  margin-top: 0;
}
.service-list .service-option .service-price {
  margin-top: auto;
}
.service-list .service-option .service-price .time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 18px;
  color: #525252;
}
.service-list .service-option .service-price .time > [class*=ic_] {
  width: 20px;
  height: 20px;
}
.service-list .service-option .service-price .price {
  font-size: 20px;
  font-weight: 700;
  color: #525252;
}

.selected-service {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 24px;
  border-radius: 8px;
}
.selected-service > div {
  width: 100%;
}

.selected-chips {
  display:block;padding-bottom:10px;overflow:hidden;overflow-x:auto;white-space:nowrap;
}
.selected-chips .chip {
  position:relative;
  display: inline-block;
  padding: 6px 25px 6px 16px;
  background: #f3f4f6;
  border-radius: 16px;
  font-size: 16px;
  color: #000;
  position: relative;
}
.selected-chips .chip .close-btn {
  position:absolute;
  right:5px;
  top:50%;
  margin-top:-8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.selected-chips .chip .close-btn:hover {
  background: #d1d5db;
}
.selected-chips .chip .close-btn::before {
  content: "×";
  display: block;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
}
@media screen and (max-width:674px){
  .selected-service{padding:12px;}
  .selected-service > .service-total{display:block;height:auto;padding:6px;text-align:center;}
  .selected-chips{margin-bottom:10px;}
  .selected-chips::-webkit-scrollbar {
      height: 8px;
  }
  .selected-chips::-webkit-scrollbar-thumb {
      background-color: #ddd;
      border-radius: 4px;
  }
  .selected-chips::-webkit-scrollbar-track {
      background-color: #f1f1f1;
  }
}

.selected-service-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  height: 84px;
  background: #f1f1f1;
  border-radius: 8px;
}
.selected-service-total .total-price,
.selected-service-total .total-time {
  font-size: 14px;
  line-height: 1.25;
  color: #525252;
}
.selected-service-total .total-price > span,
.selected-service-total .total-time > span {
  display: block;
}
.selected-service-total .total-price-value,
.selected-service-total .total-time-value {
  font-size: 24px;
  font-weight: 500;
}
.selected-service-total .price,
.selected-service-total .hh,
.selected-service-total .mm {
  color: #000000;
}

.hidden {
  display: none;
}

.location-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 12px;
  width: 100%;
  height: 45px;
}
.location-search .location-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.location-search .location-info .label {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  white-space: nowrap;
  padding-left: 30px;
}
.location-search .location-info .label:after {
  content: "";
  display: block;
  width: 18px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icons/ic_map_pin.svg") no-repeat center center;
  background-size: contain;
}
.location-search .location-info > .input-group {
  flex: 1;
  gap: 12px;
}
.location-search .location-input {
  border-width: 0 0 1px 0;
  border-color: #e5e7eb;
  border-radius: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}
.location-search .location-input::placeholder {
  color: #9ca3af;
}
@media screen and (max-width:480px){
  .location-search .btn-secondary{padding:10px;}
}
.sort {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: #ffffff;
  border-radius: 8px;
}
.sort .sort-label {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}
.sort .sort-select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.sort .sort-select button {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 16px;
  color: #000000;
  background-color: #f3f4f6;
  border-radius: 999px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}
.sort .sort-select button::placeholder {
  color: #9ca3af;
}
.sort .sort-select button.selected {
  background: #00b894;
  color: #ffffff;
}

.store-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 450px;
  padding-right: 8px;
  overflow: hidden;
  overflow-y: auto;
  max-width: 1166px;
  min-height: 450px;
}
.store-list::-webkit-scrollbar {
  width: 8px;
  background-color: #f3f4f6;
}
.store-list::-webkit-scrollbar-thumb {
  background-color: #9ca3af; /* 스크롤바 색상 */
  border-radius: 4px; /* 스크롤바 모서리 둥글게 */
}
.store-list::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* 스크롤바 호버 색상 */
}

.store-item {
  position:relative;
  width: 100% ! important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 0 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  flex: 0 0 auto;
  margin-bottom: 16px;
}
.store-item.active{border:solid 1px #00b894;}

.store-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 13px;
  left: 18px;
  width: 20px;
  height: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  background-color: #fff;
}
.store-item.active:after {
  background-color: #00b894;
  border-color: #00b894;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}
.store-item:last-child {
  margin-bottom: 0;
}
.store-item .store {
  position: relative;
  padding-left:30px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.store-item .store .store-info,
.store-item .store .store-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  line-height: 16px;
  color: #525252;
}
@media (min-width: 768px) {
  .store-item .store .store-info,
  .store-item .store .store-status {
    flex-direction: row;
    gap: 32px;
    align-items: center;
  }
}
.store-item .store .store-name {
  font-size: 16px;
  line-height: 1.125;
  text-decoration: underline;
  color: #000000;
}
.store-item .store .rating {
  display: flex;
  align-items: center;
}
.store-item .store .rating-value {
  padding-right: 24px;
  color: #ff6f00;
  text-decoration: underline;
}
.store-item .store .rating-stars {
  display: flex;
  gap: 4px;
}
.store-item .store .rating-stars svg {
  width: 16px;
  height: 16px;
  fill: #e5e7eb;
}
.store-item .store .rating-stars svg.filled {
  fill: #fbbf24;
}
.store-item .store .modal-help {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.store-item .time-selection {
  width: 100%;
  display: flex;
  gap: 8px;
}
.store-item .time-selection .time-button {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  width: 90px;
  height: 44px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  text-align: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
}
.store-item .time-selection .time-button.available {
  background: #ffffff;
  color: #000000;
}
.store-item .time-selection .time-button.available:hover {
  background: #f3f4f6;
}
.store-item .time-selection .time-button.available:active {
  background: #e5e7eb;
}
.store-item .time-selection .time-button.available:hover {
  background: rgba(0, 184, 148, 0.15);
  border-color: rgba(0, 184, 148, 0.15);
  box-shadow: 0px 1px 8px rgba(0, 184, 148, 0.25);
}
.store-item .time-selection .time-button.available:active {
  color: #fff;
  background: #00b894;
}
.store-item .time-selection .time-button.active {
  background-color: #00b894;
  color: #ffffff;
  border-color: #00b894;
}
.store-item .time-selection .time-button.active:hover {
  background: rgba(0, 184, 148, 0.8);
}
.store-item .time-selection .time-button.unavailable {
  background: #f5f5f5;
  color: #a3a3a3;
  cursor: not-allowed;
}
.store-item .time-selection .time-button.unavailable:hover {
  box-shadow: none;
}

.store-list-swiper{
  padding-bottom:50px;
  position:relative;
  overflow:hidden;
}
.store-list-swiper .swiper-pagination{
  bottom:-10px;
}
@media screen and (max-width:674px){
  .store-list {
    flex-direction: row;
    overflow:visible;
    overflow-y:visible;
    min-height:150px;
  }
  .store-list .swiper-slide{margin:0 ! important;}
  .store-item{margin:0 ! important;}
  .store-item .store{display:block;}
  .time-selection.scrollable-content{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .time-selection.scrollable-content::-webkit-scrollbar {
      height: 8px;
  }
  .time-selection.scrollable-content::-webkit-scrollbar-thumb {
      background-color: #ddd;
      border-radius: 4px;
  }
  .time-selection.scrollable-content::-webkit-scrollbar-track {
      background-color: #f1f1f1;
  }
  .sort .sort-select button,
  .store-item .time-selection .time-button{padding:8px;width:auto;}
}

/* 결제수단 */
.payment-method-box {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  width: 100%;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
.payment-method-box h2 {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}
.payment-method-box .payment-options {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.payment-method-box .payment-options .payment-option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.payment-method-box .payment-options .payment-option > .radio {
  width: 100%;
}
.payment-method-box .payment-options .payment-option input[type=radio] {
  display: none;
}
.payment-method-box .payment-options .payment-option label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-method-box .payment-options .payment-option:hover {
  border-color: #00b894;
}
.payment-method-box .payment-options .payment-option:hover label {
  color: #00b894;
}
.payment-method-box .payment-options .payment-option:hover .ic_card::after {
  background-image: url("../img/icons/ic_card_blue.svg");
}
.payment-method-box .payment-options .payment-option:hover .ic_manual_payment::after {
  background-image: url("../img/icons/ic_manual_payment_blue.svg");
}
.payment-method-box .payment-options .payment-option.active {
  border-color: #00b894;
  background: #00b894;
  color: #ffffff;
  box-shadow: 0px 1px 8px rgba(0, 184, 148, 0.25);
}
.payment-method-box .payment-options .payment-option.active label {
  color: #ffffff;
}
.payment-method-box .payment-options .payment-option.active label .ic_card::after {
  background-image: url("../img/icons/ic_card_wh.svg");
}
.payment-method-box .payment-options .payment-option.active label .ic_manual_payment::after {
  background-image: url("../img/icons/ic_manual_payment_wh.svg");
}

@media screen and (max-width:674px){
  .payment-method-box{padding:12px;}
  .payment-method-box .payment-options{display:block;word-break:keep-all;}
  .payment-method-box .payment-options .payment-option + .payment-option{margin-top:10px;}
  .form-actions.mobile{display:block;}
  .form-actions.mobile > * + *{margin-top:10px;}
}
/* 결제하기 - 예약 정보 */
.reservation-info {
  padding: 24px;
  background-color: rgba(255, 111, 0, 0.05);
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

/* 결제하기 - 예약 내용 상세 */
.reservation-details {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.reservation-details > div {
  background: #f1f1f1;
  border-radius: 8px;
  padding: 16px;
}

.reservation-summary {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  width: 100%;
}
.reservation-summary .summary-header .summary-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 14px;
}
.reservation-summary .summary-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 16px;
  width: 100%;
  height: 24px;
}
.reservation-summary .summary-details .detail-item {
  padding-right: 32px;
  position: relative;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
}
.reservation-summary .summary-details .detail-item:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #000000;
  border-radius: 50%;
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
}
.reservation-summary .summary-details .detail-item:last-child {
  padding-right: 0;
}
.reservation-summary .summary-details .detail-item:last-child:after {
  display: none;
}

.reservation-service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  gap: 10px;
  width: 100%;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}
.reservation-service .service-header .service-title {
  font-size: 16px;
  line-height: 14px; /* 88% */
  color: #000000;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.reservation-service .service-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  gap: 12px;
  width: 100%;
  /* height: 104px; */
  border-radius: 0;
}
.reservation-service .service-details .service-description > li {
  font-size: 18px;
  line-height: 26px;
  padding-left: 12px;
  position: relative;
}
.reservation-service .service-details .service-description > li:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #000000;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width:674px){
  .reservation-info{padding:12px;}
  .reservation-info .content-row.gap-16{display:block;}
  .reservation-info .form-group.flex-row{display:block;}
  .reservation-info .form-group.flex-row .row .col-6{width:100%;}
  .reservation-info .form-group.flex-row .row .col-6 + .col-6{margin-top:10px;}
  .reservation-details{padding:12px;}
  .reservation-summary .summary-details{display:block;flex-direction:column;height:auto;}
  .reservation-summary .summary-details .detail-item + .detail-item{margin-top:15px;}
  .reservation-summary .summary-details .detail-item:after{display:none;}
  .reservation-service .service-details{height:auto;}
  .reservation-service .service-details .service-description > li + li{margin-top:15px;}
  .reservation-details > .service-total{display:block;height:auto;padding:6px;text-align:center;}
  .service-total .total-price, .service-total .total-time{display:inline-block;margin:6px;}
  .service-total .total-time{display:inline-block;margin:6px;}
}
.service-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  height: 84px;
  background: #f1f1f1;
  border-radius: 8px;
}
.service-total .total-price,
.service-total .total-time {
  font-size: 14px;
  line-height: 1.25;
  color: #525252;
}
.service-total .total-price > span,
.service-total .total-time > span {
  display: block;
}
.service-total .total-price-value,
.service-total .total-time-value {
  font-size: 24px;
  font-weight: 500;
}
.service-total .total-time {
  position: relative;
  padding-left: 32px;
}
.service-total .total-time:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: 4px;
  background: url("../img/icons/ic_clock.svg") no-repeat center center;
}
.service-total .price,
.service-total .hh,
.service-total .mm {
  color: #000000;
}

/* 포인트 사용 */
.point-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.point-box .point-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.point-box .point-header h2 {
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}
.point-box .point-header .current-point {
  font-size: 18px;
  line-height: 22px;
  text-align: right;
  color: #000000;
}
.point-box .point-header .current-point .point {
  color: #00b894;
  font-weight: 700;
  display: inline-block;
  margin-right: 4px;
}
.point-box .point-input-group {
  display: flex;
  /* flex-direction: row; */
  align-items: center;
  gap: 10px;
}
.point-box .point-input-group input::placeholder {
  color: #b6b6b6;
}
.point-box .point-input-group .apply-button {
  padding: 10.5px 24px;
  background: #262626;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
.point-box .point-input-group .apply-button:hover {
  background: #1f1f1f;
}
.point-box .point-input-group .apply-button:active {
  background: #333333;
}
@media screen and (max-width:674px){
  .point-box{padding:12px;}
  .service-total .total-time-value{margin-top:5px;font-size:18px;}
  .service-total .total-time:after{bottom:13px;}
  .service-total .total-time.mobile{display:none;}
}
/* 전체 동의 */
.agreement-box {
  width: 100%;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 24px;
}
.agreement-box .agreement-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.agreement-box .agreement-item .btn-open-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 31px;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
}
.agreement-box .agreement-item .btn-open-modal:after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../img/icons/ic_more.svg) no-repeat center;
}

.agreement-box .agreement-item:last-child {
  margin-bottom: 0;
}
.agreement-box .agreement-item input[type=checkbox] {
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  margin-right: 12px;
  background: #ffffff;
  border: 0.5px solid #000000;
  border-radius: 1px;
  cursor: pointer;
}
.agreement-box .agreement-item label {
  color: #525252;
  cursor: pointer;
}
.agreement-box .agreement-item label.all-agree-label {
  color: #000000;
}
.agreement-box .all-agree {
  margin-bottom: 16px;
}
.agreement-box .all-agree label {
  font-weight: 400;
  font-size: 16px;
  color: #000000;
}
.agreement-box .agreement-details {
  margin-left: 24px;
}
.agreement-box .agreement-details .agreement-item label {
  color: #525252;
}

@media screen and (max-width:674px){
  .agreement-box{padding:12px;}
}
/* 안내사항 공통 - 카카오톡 알림, 메일 알림 */
.caution-list > li {
  position: relative;
  padding-left: 24px;
}
.caution-list > li:after {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("../img/icons/ic_caution.svg") no-repeat center center;
  background-size: contain;
}

.caution-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px; 
}
.caution-wrap .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 16px;
  top: 26px;
}
.caution-wrap .icon svg {
  width: 24px;
  height: 24px;
}
.caution-wrap .text-content {
  margin-left: 46px;
}
.caution-wrap .text-content .title {
  font-size: 16px;
  line-height: 16px;
  color: #000000;
  margin: 0;
}
.caution-wrap .text-content .description {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: #525252;
  margin: 8px 0 0 0;
}

.service-details {
  /* max-height: 100px;        */
  overflow: hidden;
  position: relative;
}

.service-details.truncated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  /* background: linear-gradient(to bottom, transparent, white); */
}




.skeleton {
  background: #f2f2f2;
  border-radius: 4px;
  animation: pulse 1.6s infinite ease-in-out;
}

.skeleton-title {
  width: 50%;
  height: 24px;
  margin-bottom: 12px;
}

.skeleton-details {
  width: 100%;
  height: 48px;
  margin-bottom: 12px;
}

.skeleton-time,
.skeleton-price {
  width: 40%;
  height: 18px;
  margin-bottom: 8px;
}

.skeleton-button {
  width: 80px;
  height: 24px;
  margin-top: 10px;
  border-radius: 16px;
}

@keyframes pulse {
  0% {
    background-color: #eeeeee;
  }
  50% {
    background-color: #dddddd;
  }
  100% {
    background-color: #eeeeee;
  }
}




#service-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  padding: 10px 10px 10px 0;
}


.service-item {
  flex: 0 0 auto;
  width: 80vw; 
  max-width: 370px;
  min-width: 220px;
  height: auto; 
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}


@media (min-width: 768px) {
  .service-item {
    width: 240px; 
  }
}

@media (min-width: 1024px) {
  .service-item {
    width: 280px; 
  }
}


.service-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.service-details {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

#service-list::-webkit-scrollbar {
    height: 10px;
}

#service-list::-webkit-scrollbar-thumb {
    background-color: #00b894;
    border-radius: 5px;
}

#service-list::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

#service-list.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}



.date.holiday {
  color: #d63031;
  font-weight: bold;
}

.holiday-name {
  font-size: 11px;
  color: #d63031;
}

.calendar-dates {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}


.calendar-dates .date.selected {
  background-color: #00b894;
  color: #fff;
}

.calendar-dates .date.holiday {
  color: #d63031;
}

.calendar-dates .date.selected.holiday {
  background-color: #d63031;
  color: #fff;
}

.calendar-dates .holiday-name {
  font-size: 12px;
  padding-left: 4px;
  font-weight: normal;
}




/* 
.g-4, .gy-4 {
    --bs-gutter-y: 1.6rem;
}
.g-4, .gx-4 {
    --bs-gutter-x: 1.6rem;
}
.row {
    --bs-gutter-x: 1.875rem;
    --bs-gutter-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
} */


.g-4, .gy-4 {
    --bs-gutter-y: 1.6rem;
}
.g-4, .gx-4 {
    --bs-gutter-x: 1.6rem;
}
.row {
    --bs-gutter-x: 1.875rem;
    --bs-gutter-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

#provider-list .card-title {
    font-size: 1.25rem;
    font-weight: bold;
}
.mb-2 {
    margin-bottom: 0.5rem !important;
}

#sidebar-content .card {
    --bs-card-border-radius: 0rem;
}


.me-2 {
    margin-right: 0.5rem !important;
}
input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.end-0 {
    right: 0 !important;
}
.top-0 {
    top: 0 !important;
}
.position-absolute {
    position: absolute !important;
}


#sidebar-content {
    overflow-y: auto;
    height: 100%;
    scroll-behavior: smooth; 
}

#sidebar-content::-webkit-scrollbar {
    width: 8px;
}

#sidebar-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#sidebar-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.text-white {
    color: #ffffff !important; 
}

.highlight-input {
    border: 2px solid red !important; 
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); 
    transition: border 0.3s ease, box-shadow 0.3s ease; 
}


.time-option.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}


#provider-list .provider-item {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 10px;
    font-size: 0.9rem;
}

#provider-list .provider-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#provider-list .provider-item.selected {
    border: 2px solid #00b894;
    
}


#provider-list .extra-info.d-none {
    display: none;
}

#provider-list .card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

#provider-list .text-muted {
    font-size: 0.95rem;
}

#provider-list .extra-info.d-none {
    display: none;
}

#provider-list .btn.toggle-info {
    font-size: 0.8rem;
    padding: 0;
    color: #00b894;
    text-decoration: underline;
    cursor: pointer;
}

#provider-list .btn.toggle-info:hover {
    text-decoration: none;
}



.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #00b894 !important;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #00b894 !important;
}


.time-button {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  /* width: 110px; */
  /* height: 48px; */
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}

.time-button.available:hover {
  border-color: #00b894;
  color: #00b894;
}

.time-button.active {
  background-color: #00b894;
  color: #ffffff;
  border-color: #00b894;
}

.time-button.unavailable {
  background-color: #f2f2f2;
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
}

.provider-radio {
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  accent-color: #00b894;
}


.skeleton {
  background-color: #e0e0e0;
  background-image: linear-gradient(90deg, #e0e0e0 0px, #f0f0f0 40px, #e0e0e0 80px);
  background-size: 600px;
  background-repeat: no-repeat;
  display: inline-block;
  border-radius: 4px;
  animation: skeleton-loading 1.2s infinite linear;
}

@keyframes skeleton-loading {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}



/* #provider-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
	padding: 10px 10px 10px 0;
} */
#provider-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; 
  overflow-y: hidden;
  padding: 10px 10px 10px 0;
  -webkit-overflow-scrolling: touch; 
  scrollbar-color: #00b894 #f1f1f1;
  scrollbar-width: auto; 
}

#provider-list::-webkit-scrollbar {
  height: 16px;
}

#provider-list::-webkit-scrollbar-thumb {
  background-color: #00b894;
  border-radius: 10px;
  border: 10px solid #f1f1f1; 
}

#provider-list::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

#provider-list::-webkit-scrollbar-thumb:hover {
    background-color: #00b894;
}

#provider-list::after {
    content: '';
    min-width: 1px;
}


#scroll-hint {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}


#provider-list.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

#user-location {
  display: block;
  margin-bottom: 8px;
}


#phone-verification-form .form-group {
  display: block !important;
}

/* .highlight-verification-input {
  border: 0px solid #dc3545 !important;
  background-color: #ffe6e6 !important;
  animation: pulseBorder 1.5s ease-in-out infinite;
}

.highlight-provider-card {
  border: 0px dashed #dc3545 !important;
  position: relative;
  animation: pulseBorder 1.5s ease-in-out infinite;
} */


/* #clear-provider-search {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  right: 140px !important;
} */

#clear-provider-search {
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: 1rem;
  padding: 0;
}
#clear-provider-search:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 184, 148, 0.5);
}

#clear-provider-search:hover {
  background: #333;
}
.text-info {
  color: #00b894 !important;
}

#nice_layer {
    overflow: hidden !important;
}


label.error,
div.text-danger {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
}
label.error {
  color: #dc3545;
}


#verification-code-error {
  display: block;
  width: 100%;
  margin-top: 0px;
}


#customer-phone-error {
  display: block;
  width: 100%;
  margin-top: 0px;
}

/* .input-group .form-control {
  flex: 1 1 auto;
}

.input-group .btn {
  white-space: nowrap;
}

.text-danger {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
} */


button.btn:disabled {
  color: #fff !important;  
  background-color: #6c757d !important;  
  opacity: 0.65;  
}


.current-point-wrap {
  font-size: 15px;
  line-height: 1.5;
}
.current-point-wrap .label,
.current-point-wrap .value,
.current-point-wrap .note {
  display: inline;
}
@media (max-width: 576px) {
  .current-point-wrap .label,
  .current-point-wrap .value,
  .current-point-wrap .note {
    display: block;
  }
  .current-point-wrap {
    font-size: 13px;
  }
}


.calendar-weekdays .weekday.saturday,
.calendar-dates .date.saturday {
  color: #007bff !important; 
}

.calendar-weekdays .weekday.sunday,
.calendar-dates .date.sunday {
  color: #dc3545 !important; 
}

.calendar-weekdays {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.weekday {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap; 
}

.weekday .holiday-name {
  font-size: 10px;
  color: #d63031;
  margin-top: 2px;
}



.custom-overlay-box {
  background: #000;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 10px 14px;
  font-size: 14px;
  color: #fff;
  width: 220px;
  border: 1px solid #333;
  position: relative;
}

.overlay-content {
  color: #fff;
}

.overlay-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 4px;
  color: #fff;
}

.overlay-address {
  font-size: 13px;
  word-break: break-word;
  white-space: normal;
  color: #ccc;
}

.overlay-arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #000;
}

.overlay-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}


.time-slot-gap {
    gap: .5rem !important;
}

/* .custom-mobile-width {
  background-color: #f8f9fa;
  border-radius: 8px;        
  padding: 6px;              
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-right: 10px;      
} */
@media (max-width: 767.98px) {
  .custom-mobile-width {
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

#scroll-hint {
  display: none;
}

@media (max-width: 768px) {
  #scroll-hint {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
}

.custom-provider-col {
  display: flex;
  flex-direction: column;
}

.provider-item {
  flex: 1; 
  background-color: #fefefe; 
  border-radius: 8px;
  padding: 12px;
  min-height: 100%; 
  display: flex;
  flex-direction: column;
}

#provider-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

#provider-pagination .page-btn {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid #000;
  border-radius: 999px;
  background-color: #fff;
  color: #000;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

#provider-pagination .page-btn.selected {
  background-color: #00b894;
  border-color: #00b894;
  color: #fff;
}


.dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dot-btn.selected {
  background-color: #00b894;
}



@media (max-width: 767px) {
  .small-title {
    font-size: 18px !important;
    line-height: 1.4;
    font-weight: normal;
  }
}