/* ==================================================
   PARKJUN BEAUTYLAB SEONGSU PERFUME
   Marble White + Deep Purple + Metallic Silver
   ================================================== */

:root {
  --pj-purple: #2f2141;
  --pj-purple-deep: #21172f;
  --pj-purple-soft: #5e4a73;
  --pj-purple-pale: #eee9f2;

  --pj-silver: #aeb2b8;
  --pj-silver-light: #d9dce0;
  --pj-silver-dark: #747980;

  --pj-marble: #f7f7f6;
  --pj-marble-soft: #efefee;
  --pj-white: #ffffff;

  --pj-text: #28252c;
  --pj-text-soft: #77727c;
  --pj-border: rgba(90, 84, 98, 0.16);

  --pj-shadow:
    0 10px 30px rgba(42, 31, 54, 0.08),
    0 2px 8px rgba(42, 31, 54, 0.05);
}

/* 전체 페이지 */
html,
body,
#sb-main-container,
#main,
#content-view {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.96),
      rgba(241,241,240,0.94)
    ) !important;
  color: var(--pj-text) !important;
  font-family:
    "Pretendard",
    "Noto Sans KR",
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}

/* 메인 콘텐츠 카드 */
#sb_content,
#sb-timeline,
#sb_booking_content,
.section,
.tab-pd,
.content {
  border-radius: 18px !important;
}

/* 제목 */
h1,
h2,
h3,
.section-title,
.title-main,
.title-small {
  color: var(--pj-purple-deep) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* 일반 텍스트 */
p,
span,
label,
.form-label {
  letter-spacing: -0.01em;
}

/* 상단 메뉴 및 헤더 */
#header,
.header,
.top-bar,
.navbar,
#sb_menu {
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid var(--pj-border) !important;
  box-shadow: 0 5px 20px rgba(35,25,47,0.05) !important;
  backdrop-filter: blur(12px);
}

/* 메인 버튼 */
.btn,
.btn-primary,
.btn-success,
button,
input[type="submit"],
#sb_book_btn {
  border: 0 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      135deg,
      var(--pj-purple),
      var(--pj-purple-soft)
    ) !important;
  color: var(--pj-white) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 6px 16px rgba(47,33,65,0.18),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

.btn:hover,
.btn-primary:hover,
.btn-success:hover,
button:hover,
input[type="submit"]:hover,
#sb_book_btn:hover {
  background:
    linear-gradient(
      135deg,
      var(--pj-purple-deep),
      var(--pj-purple)
    ) !important;
  transform: translateY(-1px);
  box-shadow:
    0 9px 22px rgba(47,33,65,0.24),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

/* 시간표 전체 배경 */
#sb-timeline,
#sb_time_slots,
.timeline-wrapper,
.timeline,
.time-slots-container {
  background: transparent !important;
}

/* 예약 가능한 시간 버튼 */
.sb-cell.free,
.time-slot,
.provider-time-slot,
.timeline-item,
.slot,
.slot--available,
[data-status="available"] {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f2f2f1
    ) !important;
  color: var(--pj-purple-deep) !important;
  border: 1px solid var(--pj-silver-light) !important;
  border-radius: 9px !important;
  min-height: 43px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow:
    0 3px 9px rgba(48,38,60,0.05),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease !important;
}

/* 예약 가능 시간 마우스 오버 */
.sb-cell.free:hover,
.time-slot:hover,
.provider-time-slot:hover,
.timeline-item:hover,
.slot--available:hover,
[data-status="available"]:hover {
  background:
    linear-gradient(
      145deg,
      #f4f0f7,
      #e8e1ee
    ) !important;
  color: var(--pj-purple-deep) !important;
  border-color: var(--pj-purple-soft) !important;
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(47,33,65,0.12),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

/* 선택된 시간 */
.sb-cell.selected,
.time-slot.selected,
.provider-time-slot.selected,
.timeline-item.selected,
.slot.selected,
.active.slot,
[data-selected="true"] {
  background:
    linear-gradient(
      135deg,
      var(--pj-purple-deep),
      var(--pj-purple-soft)
    ) !important;
  color: #ffffff !important;
  border-color: var(--pj-purple-deep) !important;
  box-shadow:
    0 8px 20px rgba(47,33,65,0.26),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* 예약 불가능 시간 */
.sb-cell.busy,
.time-slot.disabled,
.provider-time-slot.disabled,
.slot--unavailable,
[data-status="unavailable"] {
  background: #ecebea !important;
  color: #b2adb4 !important;
  border: 1px solid #e2e0e2 !important;
  opacity: 0.52 !important;
  box-shadow: none !important;
}

/* 시간 라벨 */
.timeline-hour,
.time-label,
.hour,
.sb-time {
  color: var(--pj-purple-deep) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* 세로 점선 및 구분선 */
.timeline-line,
.timeline-axis,
.timeline .line,
hr {
  border-color: rgba(99,90,107,0.18) !important;
}

/* 날짜 선택 영역 */
.datepicker,
.datepicker-inline,
.ui-datepicker,
.calendar,
.calendar-wrapper {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--pj-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--pj-shadow) !important;
}

/* 날짜 셀 */
.ui-datepicker td a,
.calendar-day,
.day-cell {
  border-radius: 8px !important;
  color: var(--pj-text) !important;
  transition: all 0.16s ease !important;
}

.ui-datepicker td a:hover,
.calendar-day:hover,
.day-cell:hover {
  background: var(--pj-purple-pale) !important;
  color: var(--pj-purple-deep) !important;
}

/* 선택된 날짜 */
.ui-datepicker .ui-state-active,
.calendar-day.selected,
.day-cell.selected {
  background: var(--pj-purple) !important;
  color: #ffffff !important;
}

/* 입력창 */
input,
textarea,
select,
.form-control {
  background: rgba(255,255,255,0.96) !important;
  color: var(--pj-text) !important;
  border: 1px solid var(--pj-silver-light) !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  box-shadow:
    inset 0 1px 2px rgba(35,25,47,0.03) !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--pj-purple-soft) !important;
  box-shadow:
    0 0 0 3px rgba(94,74,115,0.12) !important;
  outline: none !important;
}

/* 서비스 카드 */
.service-item,
.provider-item,
.item,
.service-card,
.provider-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(241,241,240,0.95)
    ) !important;
  border: 1px solid var(--pj-border) !important;
  border-radius: 15px !important;
  box-shadow: var(--pj-shadow) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
}

.service-item:hover,
.provider-item:hover,
.item:hover,
.service-card:hover,
.provider-card:hover {
  transform: translateY(-2px);
  border-color: rgba(94,74,115,0.34) !important;
  box-shadow:
    0 14px 30px rgba(42,31,54,0.12) !important;
}

/* 가격 */
.price,
.service-price,
.item-price {
  color: var(--pj-purple) !important;
  font-weight: 700 !important;
}

/* 단계 표시 */
.steps,
.step,
.booking-steps,
.progress {
  color: var(--pj-text-soft) !important;
}

.step.active,
.booking-step.active,
.progress-bar {
  background: var(--pj-purple) !important;
  color: #ffffff !important;
}

/* 링크 */
a {
  color: var(--pj-purple-soft) !important;
}

a:hover {
  color: var(--pj-purple-deep) !important;
}

/* 스크롤바 */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #efefee;
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      var(--pj-silver),
      var(--pj-silver-dark)
    );
  border-radius: 20px;
  border: 2px solid #efefee;
}

/* 모바일 */
@media (max-width: 767px) {
  .sb-cell.free,
  .time-slot,
  .provider-time-slot,
  .timeline-item,
  .slot {
    min-height: 42px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  #sb_content,
  #sb-timeline,
  #sb_booking_content {
    border-radius: 12px !important;
  }

  .service-item,
  .provider-item,
  .item,
  .service-card,
  .provider-card {
    border-radius: 12px !important;
  }
}
/* 배너 위에 자동으로 표시되는 회사명 숨기기 */
.company-name,
.company-title,
#company-name,
#company-title,
#sb_company_name,
#sb_company_title,
.hero-title,
.banner-title,
.title-main {
  display: none !important;
}