/* CMS 프론트엔드 공용 스타일 (관리자에서 등록한 메인 슬라이드/월별 진료일정 등 커스텀 섹션 전용)
   이 파일은 pg/cms.lib.php와 함께 다른 홈페이지에도 그대로 복사해서 재사용합니다. */

/* 메인 슬라이드 */
#cmsMainSlide .cms-slide-item { position:relative; }
#cmsMainSlide .cms-slide-item img { width:100%; display:block; }
#cmsMainSlide .cms-slide-overlay { position:absolute; inset:0; display:flex; align-items:center; padding:6% 0; pointer-events:none; }
#cmsMainSlide .cms-slide-inner { width:100%; max-width:1300px; margin:0 auto; padding:0 20px; box-sizing:border-box; display:flex; }
#cmsMainSlide .cms-slide-overlay.align-left .cms-slide-inner { justify-content:flex-start; }
#cmsMainSlide .cms-slide-overlay.align-center .cms-slide-inner { justify-content:center; }
#cmsMainSlide .cms-slide-overlay.align-right .cms-slide-inner { justify-content:flex-end; }
#cmsMainSlide .cms-slide-box { pointer-events:auto; max-width:560px; padding:0; }
#cmsMainSlide .cms-slide-overlay.align-center .cms-slide-box { text-align:center; }
#cmsMainSlide .cms-slide-overlay.align-right .cms-slide-box { text-align:right; }
#cmsMainSlide .cms-slide-box h3 { margin:0 0 10px; font-size:var(--ms-title-pc, 26px); font-weight:800; line-height:1.35; }
#cmsMainSlide .cms-slide-box p { margin:0; font-size:var(--ms-sub-pc, 15px); line-height:1.6; opacity:.95; }
@media (max-width: 768px) {
    #cmsMainSlide .cms-slide-overlay { padding:8% 4%; }
    #cmsMainSlide .cms-slide-inner { padding:0 4%; }
    #cmsMainSlide .cms-slide-box { max-width:100%; }
    #cmsMainSlide .cms-slide-box h3 { font-size:var(--ms-title-mobile, 19px); }
    #cmsMainSlide .cms-slide-box p { font-size:var(--ms-sub-mobile, 13px); }
}

/* 월별 진료일정 */
#cmsMonthCalendar .cms-cal-title { text-align:center; font-size:22px; font-weight:bold; color:#181f62; margin-bottom:18px; }
#cmsMonthCalendar table { width:100%; border-collapse:collapse; table-layout:fixed; background:#fff; }
#cmsMonthCalendar th { border:1px solid #eee; padding:12px 2px; background:#f7f7f9; font-size:16px; color:#555; }
#cmsMonthCalendar td { border:1px solid #eee; vertical-align:top; padding:8px 5px; height:112px; }
#cmsMonthCalendar td.empty { background:#fafafa; }
#cmsMonthCalendar td.today { background:#f2f4ff; }
#cmsMonthCalendar .cal-day { font-weight:bold; font-size:17px; color:#333; margin-bottom:6px; text-align:center; }
#cmsMonthCalendar .cal-period { margin-bottom:6px; }
#cmsMonthCalendar .cal-period-label { font-size:12px; color:#999; text-align:center; margin-bottom:2px; }
#cmsMonthCalendar .cal-period-doc { font-size:13.5px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#bbb; }
#cmsMonthCalendar .cal-period-doc .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; background:#ccc; }
#cmsMonthCalendar .cal-period-doc.on { color:#181f62; font-weight:bold; }
#cmsMonthCalendar .cal-period-doc.on .dot { background:#181f62; }
#cmsMonthCalendar .cms-cal-legend { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin-top:18px; font-size:14px; color:#666; }
#cmsMonthCalendar .cms-cal-legend .dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:middle; }
#cmsMonthCalendar .cms-cal-legend .dot.on { background:#181f62; }
#cmsMonthCalendar .cms-cal-legend .dot.off { background:#ccc; }
@media (max-width: 600px) {
    #cmsMonthCalendar th { font-size:13px; padding:8px 2px; }
    #cmsMonthCalendar td { height:auto; padding:5px 2px; }
    #cmsMonthCalendar .cal-day { font-size:14px; }
    #cmsMonthCalendar .cal-period-label { font-size:10.5px; }
    #cmsMonthCalendar .cal-period-doc { font-size:11px; }
    #cmsMonthCalendar .cms-cal-legend { font-size:12px; gap:12px; }
}