/* TOTAL_SCHEDULE - 달력 위젯 스킨 */
.TOTAL_SCHEDULE { width: 100%; float: left }

/* ★ 100% 높이 모드 (그리드 형제와 동일 높이) */
.TOTAL_SCHEDULE.ts_full_height { height: 100% }
.ts_full_height .ts_calendar_wrap { height: 100% }
.ts_full_height .ts_calendar_right { flex: 1 0 0; min-height: 0 }
.ts_full_height .ts_right_schedules { max-height: var(--ts-cal-list-height, none); flex: 1; min-height: 0 }

/* ★ 달력 래퍼: 박스 디자인 (메인 블록 상세 설정 CSS 변수) */
.ts_calendar_wrap {
  width: 100%; float: left; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  background: var(--ts-box-bg, #fff);
  border-radius: var(--ts-box-radius, 0);
  box-shadow: var(--ts-box-shadow, none);
  padding: var(--ts-box-padding, 0)
}

/* === 달력 영역 === */
.ts_calendar_left { width: 100%; min-width: 0; flex-shrink: 0 }

/* 헤더+달력 그리드: 년월 왼쪽 / 달력 오른쪽 */
.ts_calendar_all { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto 1fr; margin-bottom: 15px; grid-gap: 0 10px }

/* 헤더: 왼쪽 칼럼, 전체 행 span */
.ts_calendar_header { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; padding-top: 15px }
.ts_calendar_month { display: flex; flex-direction: column; align-items: center }
.ts_year { font-size: var(--ts-date-size, 20px); font-weight: 800; color: var(--ts-date-color, #333); text-align: center; line-height: 1.2 }
.ts_month { font-size: 40px; color: #333; font-weight: 800; line-height: 1.1 }

/* 네비게이션 버튼 */
.ts_nav_btns { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 10px }
.ts_nav_btn { width: 25px; aspect-ratio: 1/1; background: #eee; border: none; border-radius: 10px; cursor: pointer; font-size: 10px; transition: all 0.2s; display: grid; place-items: center }
.ts_nav_btn:hover { background: #ddd }

/* 요일 헤더 (오른쪽 칼럼만) */
.ts_weekdays { grid-column: 2; display: grid; grid-template-columns: repeat(7, 1fr); padding: 0; margin: 0 0 5px; list-style: none; text-align: center }
.ts_weekdays li { font-weight: 800; color: var(--primary, #2196f3); font-size: 13px; padding: 8px 0; text-transform: uppercase }

/* 날짜 그리드 (오른쪽 칼럼만) — ★ --ts-cal-day: 달력 날짜 크기 */
.ts_days { grid-column: 2; display: grid; grid-template-columns: repeat(7, 1fr); padding: 0; margin: 0; list-style: none; text-align: center }
.ts_days li { padding: 14px 10px; color: var(--ts-title-color, #333); font-size: var(--ts-cal-day, 16px); font-weight: 500; position: relative; cursor: default; line-height: 1 }

/* 클릭 가능한 날짜 */
.ts_day_li { cursor: pointer; transition: color 0.15s }
.ts_day_li:hover { color: var(--primary, #2196f3) }

/* 오늘 — ★ --ts-cal-circle: 동그라미 크기 */
.ts_day_li.ts_today { color: #fff; z-index: 1 }
.ts_day_li.ts_today::before { content: ''; width: var(--ts-cal-circle, 42px); height: var(--ts-cal-circle, 42px); background: #333; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1 }

/* 선택된 날짜 */
.ts_day_li.ts_active { color: #fff; z-index: 1 }
.ts_day_li.ts_active::before { content: ''; width: var(--ts-cal-circle, 42px); height: var(--ts-cal-circle, 42px); background: var(--primary, #2196f3); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1 }

/* 일정 있는 날짜 (점) */
.ts_day_li.ts_dayon::after { content: ''; width: 5px; height: 5px; background: var(--primary, #2196f3); border-radius: 50%; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 2 }

/* 선택/오늘 + 일정 있는 날짜: 점 흰색 */
.ts_day_li.ts_active.ts_dayon::after,
.ts_day_li.ts_today.ts_dayon::after { background: #fff }

/* 다른 달 날짜 */
.ts_other_month { color: #ccc !important; pointer-events: none }

/* === 일정 상세 영역 (기본: 달력 아래) === */
.ts_calendar_right { width: 100%; flex-shrink: 0; padding: var(--ts-txt-padding, 15px 0 0); border-top: 1px solid #eee; margin-top: 15px; position: relative; display: flex; align-items: flex-start; gap: clamp(10px, calc(0.78vw + 7.5px), 20px) }

/* 왼쪽: 선택된 날짜 (★ 고정 너비 — 클릭 시 흔들림 방지) */
.ts_right_date { flex-shrink: 0; padding-top: 2px; min-width: 85px }
.ts_date_label { font-size: var(--ts-cal-det-date, var(--ts-date-size, 15px)); color: var(--ts-date-color, #333); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums }

/* 오른쪽: 타임라인 일정 (★ --ts-cal-list-height: 본문 높이 고정 + 스크롤) */
.ts_right_schedules { flex: 1; min-width: 0; max-height: var(--ts-cal-list-height, 220px); overflow-y: auto; overflow-x: hidden }

/* 일정 아이템: 데코 + 콘텐츠 */
.ts_sch_item { display: flex; align-items: stretch; gap: 10px }

/* 타임라인 데코: 라운드(○) + 라인(│) */
.ts_sch_deco { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 12px }
.ts_sch_dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary, #2196f3); flex-shrink: 0; box-sizing: border-box }
.ts_sch_line { width: 1px; flex: 1; background: var(--primary, #2196f3); margin-top: 4px; min-height: 8px }

/* 마지막 아이템: 라인 숨김 */
.ts_sch_item:last-child .ts_sch_line { display: none }

/* 콘텐츠: 시간 + 제목 + 간략내용 — ★ 각각 개별 CSS 변수 */
.ts_sch_content { flex: 1; min-width: 0; padding-bottom: 15px }
.ts_sch_time { font-size: var(--ts-cal-time, 12px); color: var(--primary, #2196f3); font-weight: 600; margin-bottom: 2px; line-height: 1.2 }
.ts_sch_title { font-size: var(--ts-cal-title, var(--ts-title-size, 14px)); color: var(--ts-title-color, #333); font-weight: 600; line-height: 1.4; word-break: keep-all }
.ts_sch_detail { font-size: var(--ts-cal-content, var(--ts-content-size, 13px)); color: var(--ts-content-color, #888); line-height: 1.5; margin-top: 2px; word-break: keep-all }

/* 마지막 아이템 하단 패딩 제거 */
.ts_sch_item:last-child .ts_sch_content { padding-bottom: 0 }

/* 일정 없음 */
.ts_no_schedule { color: #aaa; font-size: 13px; padding: 5px 0 }

/* === 좌우 배치 모드 (schedule_config.calendar_layout: 'horizontal') === */
.ts_calendar_wrap.ts_horizontal { flex-direction: row }
.ts_horizontal .ts_calendar_left { flex: 1 }
.ts_horizontal .ts_calendar_right { width: clamp(200px, 30%, 300px); border-top: none; margin-top: 0; padding: var(--ts-txt-padding, 0); padding-left: clamp(15px, calc(1.56vw + 10px), 30px); flex-direction: column }
.ts_horizontal .ts_right_date { flex-shrink: 0 }
.ts_horizontal .ts_right_schedules { max-height: var(--ts-cal-list-height, 300px) }

/* === 반응형 === */
@media only all and (max-width: 767px) {
  .ts_days li { padding: 12px 6px; font-size: 15px }
  .ts_day_li.ts_today::before,
  .ts_day_li.ts_active::before { width: 38px; height: 38px }
  .ts_calendar_all { grid-template-columns: 65px 1fr; grid-gap: 0 5px }
  .ts_year { font-size: 16px }
  .ts_month { font-size: 32px }
  .ts_right_schedules { max-height: var(--ts-cal-list-height, 180px) }
  /* ★ 일정 상세: 날짜+일정목록 세로배열 */
  .ts_calendar_right { flex-direction: column }
  .ts_right_date { min-width: auto }
  /* 좌우 모드도 모바일에서는 상하로 */
  .ts_calendar_wrap.ts_horizontal { flex-direction: column }
  .ts_horizontal .ts_calendar_right { width: 100%; padding-left: 0; border-top: 1px solid #eee; margin-top: 15px; padding: var(--ts-txt-padding, 15px 0 0); flex-direction: column }
  /* 100% 높이 모드 모바일 해제 */
  .TOTAL_SCHEDULE.ts_full_height { height: auto }
  .ts_full_height .ts_calendar_right { flex: 0 0 auto }
  .ts_full_height .ts_right_schedules { max-height: var(--ts-cal-list-height, 180px) }
}