@charset "utf-8";
/* ==========================================================================
   program.css — 수강신청(달력형) 전용 스타일
   그룹: 1.달력 툴바 2.달력 격자 3.일정 막대 4.상세 패널 5.검색·전체 목록
   ========================================================================== */

/* 1. 달력 툴바 ------------------------------------------------------------ */
.cal-wrap { display: grid; gap: 24px; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cal-bar h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.cal-bar .nav { display: flex; gap: 8px; }
.cal-bar button { min-width: 44px; min-height: 44px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font-weight: 600; }
.cal-bar button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; font-size: 13px; color: var(--c-text-sub); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; background: var(--t); vertical-align: -1px; }

/* 2. 달력 격자 ------------------------------------------------------------ */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
.cal caption { position: absolute; left: -9999px; }
.cal th { padding: 10px 0; background: var(--c-bg-alt); border: 1px solid var(--c-line); font-size: 13px; }
.cal th:first-child { color: var(--c-danger); }
.cal td { height: 76px; padding: 4px; vertical-align: top; border: 1px solid var(--c-line); font-size: 12px; }
.cal td .d { display: block; font-weight: 600; margin-bottom: 2px; }
.cal td.is-out .d { color: #b6bcc7; }
.cal td.is-today .d { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); color: #fff; }
@media (min-width: 768px) { .cal td { height: 112px; padding: 6px; font-size: 13px; } }

/* 3. 일정 막대: 색 + 글자 병기, 마감은 회색 ------------------------------- */
.ev { display: block; width: 100%; margin-top: 2px; position: relative; padding: 3px 6px 3px 16px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--t) 14%, #fff); color: var(--c-text); text-align: left; font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--t); }
.ev:hover, .ev[aria-pressed="true"] { background: color-mix(in srgb, var(--t) 28%, #fff); }
.ev.is-closed { --t: var(--c-closed); color: #5b6472; text-decoration: line-through; }
@media (max-width: 767px) { .ev { padding: 0; height: 8px; font-size: 0; background: var(--t); } .ev::before { display: none; } .ev.is-closed { background: var(--c-closed); } }

/* 4. 상세 패널 ------------------------------------------------------------ */
.detail { padding: 28px; border-radius: var(--radius); background: var(--ink); color: #fff; align-self: start; }
.detail h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 12px 0 20px; }
.detail dl { display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; font-size: 15px; }
.detail dt { color: var(--on-ink-sub); }
.detail .btn { width: 100%; margin-top: 20px; }
.detail .empty { color: var(--on-ink-sub); }
@media (min-width: 1200px) { .cal-wrap { grid-template-columns: 1fr 380px; } .detail { position: sticky; top: 120px; } }

.detail .badge { background: var(--sky); color: var(--ink); } .detail .badge--closed { background: rgba(255,255,255,.18); color: #fff; }
.detail .btn[aria-disabled="true"] { background: rgba(255,255,255,.16); color: var(--on-ink-sub); }

/* 5. 검색·전체 목록 ------------------------------------------------------- */
.pg-list .tbl td { font-size: 14px; }
.pg-list .tbl td:nth-child(4), .pg-list .tbl td:nth-child(5), .pg-list .tbl td:nth-child(6) { white-space: nowrap; color: var(--c-text-sub); }
.pg-go { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pg-go:hover, .pg-go:focus-visible { border-color: var(--c-accent); color: var(--c-accent); }
.pg-pager { margin-bottom: 40px; }	/* 페이지 번호(.pager, page.css) — 한 페이지뿐이면 비워 둠 */
.pg-pager:empty { margin-bottom: 16px; }