/* =========================================================
 * Calendar Modal Shell
 * 기준: 워크스페이스 모달 구조
 * 사용:
 * - .hs-modal
 * - .hs-modal__overlay
 * - .hs-detail-overlay
 * - .hs-modal__content
 * - #hs-modal-title
 * - #hs-modal-body
 * - #hs-detail-body
 * - #hs-modal-close
 * - #hs-detail-close
 * =======================================================*/

/* 전체 모달 레이어 */
.hs-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: block;
  overscroll-behavior: contain;
}

/* 배경 */
.hs-modal__overlay,
.hs-detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}

/* 모달 박스 */
.hs-modal__content {
  position: relative;
  z-index: 1;

  width: min(520px, calc(100% - 32px));
  max-height: min(78vh, 680px);
  margin: 72px auto 0;

  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: #fff;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* 모달 제목 */
.hs-modal__content > h3,
#hs-modal-title {
  min-height: 56px;
  margin: 0;
  padding: 16px 52px 15px 18px;

  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  color: #111827;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;

  display: flex;
  align-items: center;
}

/* 모달 본문 */
#hs-modal-body,
#hs-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(min(78vh, 680px) - 58px);

  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 기본 ul 여백 제거: 현재 JS가 <ul>로 감싸고 있음 */
#hs-modal-body ul,
#hs-detail-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 빈 상태 */
#hs-modal-body > p,
#hs-detail-body > p {
  margin: 0;
  padding: 18px;

  border: 1px dashed #d1d5db;
  border-radius: 14px;
  background: #f8fafc;

  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* 닫기 버튼 */
#hs-modal-close,
#hs-detail-close {
  all: unset !important;
  box-sizing: border-box !important;

  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;

  width: 30px !important;
  height: 30px !important;

  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

/* 닫기 X 아이콘 */
#hs-modal-close::before,
#hs-detail-close::before {
  content: "×";
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

#hs-modal-close:hover,
#hs-detail-close:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
  transform: rotate(90deg);
}

/* 상세 모달은 살짝 넓게 */
#hs-schedule-detail-modal .hs-modal__content {
  width: min(620px, calc(100% - 32px));
}

/* 목록 모달 카드 사이 간격 */
#hs-modal-body .hs-schedule-card + .hs-schedule-card {
  margin-top: 10px;
}

/* 상세 모달 내부 기본 문단 정리 */
#hs-detail-body p {
  margin: 0;
  padding: 8px 0;

  color: #374151;
  font-size: 14px;
  line-height: 1.6;

  border-bottom: 1px dashed #e5e7eb;
}

#hs-detail-body p:last-child {
  border-bottom: 0;
}

#hs-detail-body strong {
  display: inline-block;
  min-width: 72px;
  color: #111827;
  font-weight: 900;
}

#hs-detail-body hr {
  border: 0;
  border-top: 1px solid #eef2f7;
  margin: 14px 0 !important;
}

/* 상세 보기 링크 */
#hs-detail-body a {
  color: #2563eb;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 선택된 프로그램 카드가 상세 모달 안에서 자연스럽게 보이도록 */
#hs-detail-body .hs-selected-card {
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* 모바일 */
@media (max-width: 640px) {
  .hs-modal__content {
    width: calc(100% - 20px);
    max-height: calc(100vh - 40px);
    margin-top: 20px;
    border-radius: 16px;
  }

  #hs-schedule-detail-modal .hs-modal__content {
    width: calc(100% - 20px);
  }

  .hs-modal__content > h3,
  #hs-modal-title {
    min-height: 52px;
    padding: 14px 48px 13px 16px;
    font-size: 15px;
  }

  #hs-modal-body,
  #hs-detail-body {
    max-height: calc(100vh - 96px);
    padding: 12px;
  }

  #hs-modal-close,
  #hs-detail-close {
    top: 11px !important;
    right: 12px !important;
  }

  #hs-detail-body strong {
    min-width: 64px;
  }
}

/* =========================================================
 * Calendar Event Modal Cards
 * 역할:
 * - 워크스페이스 달력 / 도큐먼트 달력 공통 일정 카드
 * - 상태별 카드 배경, 왼쪽 바, 상태칩 색상 통일
 * =======================================================*/

.hs-cal-event-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hs-cal-event-card {
  --cal-phase-bg: #eff6ff;
  --cal-phase-border: #bfdbfe;
  --cal-phase-strong: #2563eb;
  --cal-phase-chip-bg: #ffffff;

  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);

  border: 1px solid var(--cal-phase-border);
  border-radius: 14px;
  background: var(--cal-phase-bg);

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* 카드가 클릭 가능한 경우만 */
.hs-cal-event-card[role="button"],
button.hs-cal-event-card,
a.hs-cal-event-card {
  cursor: pointer;
}

.hs-cal-event-card[role="button"]:hover,
button.hs-cal-event-card:hover,
a.hs-cal-event-card:hover {
  border-color: var(--cal-phase-border);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.hs-cal-event-card__bar {
  background: var(--cal-phase-strong);
}

.hs-cal-event-card__body {
  min-width: 0;
  padding: 12px 14px 14px;
}

.hs-cal-event-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hs-cal-event-card__program {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hs-cal-event-card__thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  border-radius: 10px;
  object-fit: cover;
  background: #f3f4f6;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hs-cal-event-card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;

  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
}

.hs-cal-event-card__title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hs-cal-event-card__title {
  color: #111827;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hs-cal-event-card__link {
  width: fit-content;

  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;

  text-decoration: underline;
  text-underline-offset: 2px;
}

.hs-cal-status-chip {
  flex: 0 0 auto;

  min-height: 28px;
  padding: 0 10px;

  border-radius: 999px;
  background: var(--cal-phase-chip-bg);
  color: var(--cal-phase-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.hs-cal-event-card__targets {
  margin-top: 14px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hs-cal-event-target {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--cal-phase-strong) 24%, transparent);
}

.hs-cal-event-target:first-child {
  padding-top: 0;
  border-top: 0;
}

.hs-cal-event-target__title {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}

.hs-cal-event-target__meta {
  margin-top: 5px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.hs-cal-event-card__note {
  margin-top: 12px;
  padding: 10px 12px;

  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed color-mix(in srgb, var(--cal-phase-strong) 30%, transparent);

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hs-cal-event-card__note-label {
  color: var(--cal-phase-strong);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.hs-cal-event-card__note-text {
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
 * Phase colors
 * =======================*/

/* 예약접수 */
.hs-cal-event-card.is-received,
.hs-cal-event-card.is-reserve {
  --cal-phase-bg: #eff6ff;
  --cal-phase-border: #bfdbfe;
  --cal-phase-strong: #2563eb;
  --cal-phase-chip-bg: #ffffff;
}

/* 견적발송 */
.hs-cal-event-card.is-estimate,
.hs-cal-event-card.is-quote {
  --cal-phase-bg: #fffbeb;
  --cal-phase-border: #fde68a;
  --cal-phase-strong: #b45309;
  --cal-phase-chip-bg: #ffffff;
}

/* 예약확인 */
.hs-cal-event-card.is-confirmed,
.hs-cal-event-card.is-confirm {
  --cal-phase-bg: #f0fdf4;
  --cal-phase-border: #86efac;
  --cal-phase-strong: #166534;
  --cal-phase-chip-bg: #ffffff;
}

/* 수업완료 */
.hs-cal-event-card.is-completed,
.hs-cal-event-card.is-finish {
  --cal-phase-bg: #faf5ff;
  --cal-phase-border: #d8b4fe;
  --cal-phase-strong: #7e22ce;
  --cal-phase-chip-bg: #ffffff;
}

/* 취소 */
.hs-cal-event-card.is-cancelled,
.hs-cal-event-card.is-cancel {
  --cal-phase-bg: #fef2f2;
  --cal-phase-border: #fecaca;
  --cal-phase-strong: #b91c1c;
  --cal-phase-chip-bg: #ffffff;
  opacity: 0.82;
}

.hs-cal-event-card.is-cancelled .hs-cal-event-card__title,
.hs-cal-event-card.is-cancel .hs-cal-event-card__title,
.hs-cal-event-card.is-cancelled .hs-cal-event-target__title,
.hs-cal-event-card.is-cancel .hs-cal-event-target__title {
  text-decoration: line-through;
}

/* 모바일 */
@media (max-width: 640px) {
  .hs-cal-event-card__body {
    padding: 11px 12px 13px;
  }

  .hs-cal-event-card__head {
    gap: 8px;
  }

  .hs-cal-event-card__thumb {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .hs-cal-event-card__title {
    font-size: 15px;
  }

  .hs-cal-status-chip {
    min-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }
}