/* ===== Schedule Calendar (Responsive) =====
   모든 크기를 CSS 변수로 관리 → 화면 폭에 따라 변수만 바꿔주면 전체가 같이 줄어듦 */
.sc-wrap{
  --sc-cell: 60px;          /* 날짜 원 지름 = 기간 띠 높이 */
  --sc-row: 70px;           /* 한 주(줄) 높이 */
  --sc-num-size: 26px;      /* 날짜 글자 크기 */
  --sc-week-size: 24px;     /* 요일 글자 크기 */
  --sc-title-size: 36px;    /* 헤더 글자 크기 */
  --sc-header-h: 82px;
  --sc-pad: 64px;           /* 좌우 여백 */
  --sc-legend-size: 16px;

  width:100%;
  max-width:756px;
  margin:0 auto;
  box-sizing:border-box;
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.sc-wrap *,.sc-wrap *::before,.sc-wrap *::after{box-sizing:border-box}

/* 헤더 */
.sc-header{
  position:relative;background:#0b2b4a;color:#fff;text-align:center;
  height:var(--sc-header-h);line-height:var(--sc-header-h);
  font-size:var(--sc-title-size);font-weight:800;
}
/* ===== 여러 달 레이아웃 ===== */
.sc-root{font-family:'Pretendard','Noto Sans KR',sans-serif}
.sc-slide .sc-wrap{max-width:none}
.sc-bar.cut-l{border-top-left-radius:0;border-bottom-left-radius:0}
.sc-bar.cut-r{border-top-right-radius:0;border-bottom-right-radius:0}
.sc-empty{text-align:center;color:#999;padding:40px 0}


/* 본문 */
.sc-body{padding:20px var(--sc-pad)}
.sc-days,.sc-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sc-days div{
  text-align:center;color:#111;font-size:var(--sc-week-size);
  height:var(--sc-row);line-height:var(--sc-row);
}
.sc-days .sun{color:#f0645a}.sc-days .sat{color:#1a5ea0}

.sc-week{position:relative;height:var(--sc-row)}
/* left/width는 JS에서 %로 들어오므로 폭이 변해도 자동으로 맞음 */
.sc-bar{
  position:absolute;
  top:calc((var(--sc-row) - var(--sc-cell)) / 2);
  height:var(--sc-cell);
  border-radius:calc(var(--sc-cell) / 2);
  z-index:0;
}
.sc-cell{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0}
.sc-num{
  width:var(--sc-cell);height:var(--sc-cell);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--sc-num-size);font-weight:600;color:#555;
}
.sc-cell.sun .sc-num{color:#f0645a}
.sc-cell.sat .sc-num{color:#1a5ea0}
.sc-cell.other .sc-num{color:#d0d0d0}
.sc-cell.other.sat .sc-num{color:#cdd6e2}
.sc-cell .sc-num.on{font-weight:700}

/* 범례 */
.sc-legend{
  --sc-legend-size:16px;
  margin-top:24px;background:#fff;border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:20px 28px;
  display:flex;flex-wrap:wrap;gap:12px 28px;
}
.sc-legend-item{display:flex;align-items:center;gap:10px;font-size:var(--sc-legend-size);color:#333}
.sc-legend-dot{width:1em;height:1em;border-radius:50%;flex:none}
.sc-legend-date{color:#999;font-size:.875em}

/* ===== 반응형 =====
   화면 폭이 아니라 '달력 자신의 폭' 기준(container query)
   → 사이드바, 모달 등 좁은 곳에 넣어도 알맞게 줄어듦 */
.sc-host{container-type:inline-size}

/* 태블릿 (달력 폭 ≤ 640px) */
@container (max-width:640px){
  .sc-wrap{
    --sc-cell:50px;--sc-row:58px;--sc-num-size:22px;--sc-week-size:20px;
    --sc-title-size:30px;--sc-header-h:70px;--sc-pad:32px;
  }
}
/* 큰 모바일 (≤ 480px) */
@container (max-width:480px){
  .sc-wrap{
    --sc-cell:40px;--sc-row:48px;--sc-num-size:17px;--sc-week-size:16px;
    --sc-title-size:24px;--sc-header-h:58px;--sc-pad:16px;--sc-legend-size:14px;
    border-radius:10px;
  }
  .sc-body{padding-top:12px;padding-bottom:12px}
  .sc-legend{gap:10px 18px}
}
/* 작은 모바일 (≤ 360px): 범례를 한 줄에 하나씩 */
@container (max-width:360px){
  .sc-wrap{
    --sc-cell:34px;--sc-row:42px;--sc-num-size:15px;--sc-week-size:14px;
    --sc-title-size:20px;--sc-header-h:50px;--sc-pad:10px;--sc-legend-size:13px;
  }
  .sc-legend{flex-direction:column;gap:8px}
}

/* container query 미지원 구형 브라우저용 대체(뷰포트 기준) */
@supports not (container-type:inline-size){
  @media (max-width:640px){.sc-wrap{--sc-cell:50px;--sc-row:58px;--sc-num-size:22px;--sc-week-size:20px;--sc-title-size:30px;--sc-header-h:70px;--sc-pad:32px}}
  @media (max-width:480px){.sc-wrap{--sc-cell:40px;--sc-row:48px;--sc-num-size:17px;--sc-week-size:16px;--sc-title-size:24px;--sc-header-h:58px;--sc-pad:16px;--sc-legend-size:14px}}
  @media (max-width:360px){.sc-wrap{--sc-cell:34px;--sc-row:42px;--sc-num-size:15px;--sc-week-size:14px;--sc-title-size:20px;--sc-header-h:50px;--sc-pad:10px;--sc-legend-size:13px}.sc-legend{flex-direction:column;gap:8px}}
}

/* 범례(달력 밖) 모바일 */
@media (max-width:480px){
  .sc-legend{--sc-legend-size:14px;padding:16px;gap:10px 18px;margin-top:16px}
  
}

/* ===== 슬라이더 (Swiper 방식) ===== */
.sc-slider{position:relative}
.sc-viewport{
  overflow:hidden;
  touch-action:pan-y;          /* 세로 스크롤은 브라우저, 가로 드래그는 슬라이더 */
  user-select:none;-webkit-user-select:none;
  padding:6px 0 12px;           /* 카드 그림자 잘림 방지 */
}
.sc-slider.is-draggable .sc-viewport{cursor:grab}
.sc-slider.is-dragging .sc-viewport{cursor:grabbing}
.sc-track{display:flex;align-items:flex-start;will-change:transform;
  transition:transform .4s cubic-bezier(.25,.8,.25,1)}
.sc-slide{flex:none;min-width:0}

/* 좌우 화살표 */
.sc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#0b2b4a;font-size:26px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;transition:opacity .2s;
}
.sc-arrow-prev{left:-14px}.sc-arrow-next{right:-14px}
.sc-arrow:disabled{opacity:0;pointer-events:none}

/* 페이지 점 */
.sc-dots{display:flex;justify-content:center;gap:8px;margin-top:8px}
.sc-dot{width:9px;height:9px;border-radius:5px;border:0;padding:0;cursor:pointer;
  background:#c9d1db;transition:all .25s}
.sc-dot.active{width:24px;background:#0b2b4a}

/* 슬라이드가 필요 없을 때(전부 다 보일 때) 컨트롤 숨김 */
.sc-slider.is-static .sc-arrow{display:none}
.sc-slider.is-static + .sc-dots{display:none}

@media (max-width:480px){
  .sc-arrow{width:36px;height:36px;font-size:22px}
  .sc-arrow-prev{left:-6px}.sc-arrow-next{right:-6px}
}
@media (hover:none){ .sc-arrow{display:none} }   /* 터치 기기는 스와이프 + 점으로 */

/* ===== 슬라이드 가능 안내 ===== */

/* 1) 상단 개수 표시: '⇄ 1–3 / 4개월' */
.sc-counter{
  display:flex;justify-content:flex-end;align-items:center;gap:6px;
  margin:0 4px 6px;font-size:14px;color:#6b7684;font-weight:600;
}
.sc-counter-icon{font-size:16px;color:#0b2b4a;animation:sc-sway 2.4s ease-in-out infinite}

/* 2) 가장자리 그라데이션: 넘길 내용이 남은 쪽만 흐리게
      페이지 배경색과 맞춰야 자연스러움 → --sc-fade-color 로 변경 */
.sc-slider{--sc-fade-color:243,244,246}
.sc-slider.use-fade::before,.sc-slider.use-fade::after{
  content:'';position:absolute;top:6px;bottom:12px;width:40px;z-index:3;
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.sc-slider.use-fade::before{left:0;background:linear-gradient(to right,rgba(var(--sc-fade-color),.95),rgba(var(--sc-fade-color),0))}
.sc-slider.use-fade::after{right:0;background:linear-gradient(to left,rgba(var(--sc-fade-color),.95),rgba(var(--sc-fade-color),0))}
.sc-slider.use-fade.has-prev::before,.sc-slider.use-fade.has-next::after{opacity:1}
.sc-slider.is-static::before,.sc-slider.is-static::after{display:none}

/* 3) 조작 전까지 '다음' 화살표 두근 강조 (3회) */
.sc-slider.has-next:not(.touched) .sc-arrow-next:not(:disabled){animation:sc-pulse 1.6s ease-in-out 3}

/* 4) 안내 배지 (손가락이 좌우로 움직임) */
.sc-hint{
  position:absolute;left:50%;top:50%;z-index:6;
  transform:translate(-50%,-50%) scale(.9);
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;
  background:rgba(11,43,74,.88);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
}
.sc-hint.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sc-hint.gone,.sc-hint.hidden-static{opacity:0!important}
.sc-hint-hand{display:inline-block;font-size:22px;animation:sc-swipe 1.4s ease-in-out infinite}

@keyframes sc-swipe{0%,100%{transform:translateX(8px) rotate(-12deg)}50%{transform:translateX(-10px) rotate(-12deg)}}
@keyframes sc-sway{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes sc-pulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(11,43,74,.12)}}

@media (max-width:480px){
  .sc-hint{font-size:13px;padding:10px 16px}
  .sc-counter{font-size:13px}
}
/* OS에서 '동작 줄이기'를 켠 사용자는 애니메이션 끄기 */
@media (prefers-reduced-motion:reduce){
  .sc-hint-hand,.sc-counter-icon,.sc-arrow-next{animation:none!important}
  .sc-track{transition:none!important}
}

/* 전달·다음달 날짜 숨김(showOtherMonthDays:false) 시 빈 칸 */
.sc-cell.empty{pointer-events:none}