@charset "utf-8";

/* ============================================================================
   프로그램 캘린더 (월 달력 + 우측 이용안내)
   대상 : /ReserveCenter/ProgramCalendar.aspx  (자체 렌더링, fullCalendar 미사용)
   경로 : /site/resource/bcic/common/css/program-calendar.css
   ----------------------------------------------------------------------------
   ※ rental-calendar.css(대관시설 예약현황 캘린더) 와 톤/구조를 맞췄습니다.
   ※ 색상 / 폰트 / 간격은 style.css 의 :root 토큰을 그대로 사용합니다.
      (--main-color01, --main-color02, --gray-color01/02, --blue-color01,
       --font-color01/02, --font-type01/02 등)
   ※ program-calendar.js 가 만드는 자체 DOM(.pc-cal-*, .pc-badge 등)을 대상으로 하며,
      fullCalendar 를 사용하지 않으므로 .fc-* 셀렉터는 없습니다.
   ※ 마스터에서 css-vars-ponyfill 을 쓰므로 미디어쿼리 안에서는 변수를
      재정의하지 않고 실제 값을 직접 지정합니다. (IE 대응)
   ========================================================================== */

/* ── 페이지 레이아웃 : 좌(캘린더) / 우(이용안내) ─────────────────────────── */

.program-calendar-page {
    /* 별도 값 추가가 필요하면 여기에 두되, 색상/폰트는 사이트 공통 토큰을 우선 사용 */
}

/* 사이트 공통 .sr-only 가 이미 있다면 중복 정의이나 충돌은 없습니다(동일 규칙). */
.program-calendar-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 요구사항(9차) : 시설구분 조회조건을 부트스트랩 .form-row/.form-group/.form-control
   어법으로 바꾸고 유형 조회조건을 추가했다. .pc-filter-bar/.pc-filter-select 는 더 이상
   마크업에서 쓰이지 않지만(예전 커스텀 select 스타일), 다른 화면이 참조 중일 수 있어
   그대로 남겨둔다(죽은 코드지만 해가 되지 않음). .pc-filter-label 은 계속 사용한다. */
.pc-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pc-filter-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-type02);
    font-size: 15px;
    font-weight: 700;
    color: var(--font-color01);
}

.pc-filter-select {
    min-width: 200px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #DDD;
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-type01);
    font-size: 15px;
    color: var(--font-color01);
}

.program-calendar-page .form-row {
    margin-bottom: 14px;
}

.program-calendar-page .form-row .form-group {
    margin-bottom: 8px;
}

.program-calendar-page .form-row .form-control {
    min-width: 200px;
}

@media (max-width: 575px) {
    .program-calendar-page .form-row .form-group.col-12 {
        width: 100%;
    }

    .program-calendar-page .form-row .form-control {
        min-width: 0;
        width: 100%;
    }
}

.pc-layout {
    display: grid;
    /* 요구사항 12-2 : 우측 컬럼에 280px 하한을 걸어두면, 사이드바가 있는 새 사이트처럼
       위젯 자체 폭이 좁게 주어지는 화면에서 그 이상 줄일 폭이 없어 그리드가 그대로
       넘쳐버리고(overflow), 이후로는 창을 아무리 더 줄여도 .pc-guide-col 폭이 280px에
       고정된 채 전혀 반응하지 않는 것처럼 보인다. 하한을 없애서 창 폭을 줄이는 만큼
       실제로 계속 줄어들게 하고, 좁아졌을 때의 내용 처리는 .pc-guide-compact 스타일
       (JS 가 실제 렌더링 폭을 측정해 토글) 이 담당하도록 한다. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ── 캘린더 카드 (rental-calendar-wrap 과 동일한 카드 어법) ────────────────── */

.pc-calendar-col {
    border: 1px solid #DDD;
    border-radius: 8px;
    background: #fff;
    padding: 20px 20px 24px;
}

.pc-cal-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-type01);
    font-size: 13px;
    color: var(--font-color02);
    margin-bottom: 10px;
}

.pc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--main-color01);
}

/* 요구사항 2 : 유형(전시/공연/강좌/기타)별 색상. 사이트 공통 토큰을 우선 쓰되,
   구분이 명확하도록 보조 색상 2개(--sub-color 계열이 없는 경우를 대비해 직접 지정)를
   더했다. 배지/범례/안내 섹션 헤더가 모두 같은 색상 규칙을 공유한다. */
.pc-legend-dot.pc-type-st1,
.pc-guide-section-dot.pc-type-st1 { background: var(--main-color01); }

.pc-legend-dot.pc-type-st2,
.pc-guide-section-dot.pc-type-st2 { background: #116EB4; }

.pc-legend-dot.pc-type-st3,
.pc-guide-section-dot.pc-type-st3 { background: #C9820A; }

.pc-legend-dot.pc-type-st9,
.pc-guide-section-dot.pc-type-st9 { background: var(--font-color02, #8A8F98); }

/* ── 툴바 : 사이트 달력 헤더와 동일한 어법(fc-toolbar h2 상당) ─────────────── */

.pc-cal-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 14px;
}

.pc-cal-title {
    font-family: var(--font-type02);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 32px;
    color: var(--font-color01);
    margin: 0;
    min-width: 140px;
    text-align: center;
}

.pc-cal-nav {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--font-color01);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pc-cal-nav:hover {
        color: var(--main-color01);
    }

    .pc-cal-nav:focus {
        outline: 1px auto -webkit-focus-ring-color;
    }

    .pc-cal-nav:disabled {
        opacity: .25;
        cursor: default;
    }

        .pc-cal-nav:disabled:hover {
            color: var(--font-color01);
        }

/* ── 표 골격 : 사이트 .table 관례(상단 2px)를 따름 ─────────────────────────── */

.pc-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    border-top: 2px solid var(--main-color02);
    border-bottom: 1px solid #E5E5E5;
}

.pc-cal-weekday {
    padding: 12px 0 11px;
    font-family: var(--font-type01);
    font-size: 15px;
    font-weight: 700;
    color: var(--font-color01);
}

    .pc-cal-weekday:first-child {
        color: #B70F0F;
    }

    .pc-cal-weekday:last-child {
        color: #116EB4;
    }

/* ── 날짜 셀 ─────────────────────────────────────────────────────────────── */

.pc-cal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(96px, auto);
}

.pc-cal-day {
    box-sizing: border-box;
    position: relative;
    min-width: 0;   /* 요구사항 4 : grid/flex item 기본값(min-width:auto)이 긴 뱃지 텍스트 때문에
                       셀/열 폭을 밀어내는 것을 방지 (grid, flex 모두 동일 이슈) */
    min-height: 96px;
    padding: 10px 10px 8px;
    border: 1px solid #E5E5E5;
    border-top: none;
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .15s;
}

    .pc-cal-day:nth-child(7n) {
        border-right: none;
    }

    .pc-cal-day:hover {
        background: #F7F9FC;
    }

    /* 이전/다음달 여백 셀은 표기하지 않기로 해서(요구사항) 날짜 숫자/뱃지가 없는
       빈 칸이다 - 들락날락 캘린더처럼 선택도 되지 않아야 하므로 pointer-events 자체를
       꺼서 클릭/hover/포커스가 아예 셀에 도달하지 않도록 한다(JS 가드와 이중 방어). */
    .pc-cal-day.is-outside {
        background: #FAFBFC;
        cursor: default;
        pointer-events: none;
    }

        .pc-cal-day.is-outside:hover {
            background: #FAFBFC;
        }

    .pc-cal-day.is-today {
        background: var(--blue-color01);
    }

        .pc-cal-day.is-today .pc-cal-daynum {
            font-weight: 700;
            color: var(--main-color01);
        }

    .pc-cal-day.is-sun .pc-cal-daynum {
        color: #B70F0F;
    }

    .pc-cal-day.is-sat .pc-cal-daynum {
        color: #116EB4;
    }

    /* 날짜 선택(요구사항 1, 2, 3) : 캘린더 셀 클릭 또는 우측 안내 항목 클릭으로 선택됨 */
    .pc-cal-day.is-selected {
        box-shadow: inset 0 0 0 2px var(--main-color01);
        background: #fff;
    }

.pc-cal-daynum {
    display: block;
    font-family: var(--font-type01);
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    color: #333;
    text-align: right;
}

/* ── 프로그램 뱃지 (rental-calendar 의 .fac-cal-badge 어법을 따름) ─────────── */

.pc-cal-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;   /* 요구사항 4 참고 */
    overflow: hidden;
}

.pc-badge {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;   /* 요구사항 4 참고 */
    max-width: 100%;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 5px;
    font-family: var(--font-type01);
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -.4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

    /* 신청가능 : 사이트 primary (rental 의 is-open 과 동일한 톤) */
    .pc-badge.is-program {
        color: #fff;
        background: var(--main-color01);
        cursor: pointer;
        transition: background .2s, opacity .2s;
    }

        .pc-badge.is-program:hover,
        .pc-badge.is-program:focus {
            background: var(--main-color01-hover);
        }

        .pc-badge.is-program:focus {
            outline: 1px auto -webkit-focus-ring-color;
        }

    /* 요구사항 2 : 유형별 뱃지 색상. is-full(마감) 은 유형과 무관하게 회색으로 덮는다. */
    .pc-badge.pc-type-st1 { background: var(--main-color01); }
    .pc-badge.pc-type-st2 { background: #116EB4; }
    .pc-badge.pc-type-st3 { background: #C9820A; }
    .pc-badge.pc-type-st9 { background: var(--font-color02, #8A8F98); }

        .pc-badge.pc-type-st1:hover,
        .pc-badge.pc-type-st1:focus { background: var(--main-color01-hover); }

        .pc-badge.pc-type-st2:hover,
        .pc-badge.pc-type-st2:focus { background: #0D5A93; }

        .pc-badge.pc-type-st3:hover,
        .pc-badge.pc-type-st3:focus { background: #A66C08; }

        .pc-badge.pc-type-st9:hover,
        .pc-badge.pc-type-st9:focus { opacity: .85; }

    /* 마감 등 신청 불가 (rental 의 is-disabled 와 동일한 톤) */
    .pc-badge.is-full {
        color: var(--font-color02);
        background: var(--gray-color01);
        cursor: default;
        pointer-events: none;
    }

/* ── 상태 메시지(로딩/오류/빈 목록) ─────────────────────────────────────── */

.pc-cal-loading,
.pc-cal-error,
.pc-guide-loading,
.pc-guide-error,
.pc-guide-empty {
    padding: 24px 8px;
    text-align: center;
    font-family: var(--font-type01);
    font-size: 15px;
    color: var(--font-color02);
}

.program-calendar-page.is-loading {
    opacity: .65;
    transition: opacity .2s ease-out;
}

/* ── 우측 이용안내 카드 ─────────────────────────────────────────────────── */

/* 요구사항 7 : 안내 영역 배경을 사이트 공통 gray 톤으로 (참고 이미지의 회색 영역) */
.pc-guide-col {
    box-sizing: border-box;
    border: 1px solid #DDD;
    border-radius: 8px;
    background: var(--gray-color01, #F5F6F8);
    padding: 13px;
    /* 요구사항 5 : 기본값은 캘린더 카드 자연 높이와 비슷하게, 실제 동일 높이는
       program-calendar.js 의 _syncColumnHeights() 가 인라인 height 로 맞춰준다.
       JS 가 아직 실행되지 않은 순간(초기 로딩)을 위한 안전장치로만 min-height 사용. */
    min-height: 420px;
    overflow-y: auto;
}

.pc-guide-title {
    font-family: var(--font-type02);
    font-size: 20px;
    font-weight: 700;
    color: var(--font-color01);
    margin: 0 0 4px;
}

.pc-guide-subtitle {
    font-family: var(--font-type02);
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color01);
    margin: 0 0 12px;
}

/* 요구사항 8 : 타이틀 검색 */
.pc-guide-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

    .pc-guide-search-wrap .bi-search {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: var(--font-color02);
        pointer-events: none;
    }

.pc-guide-search {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid #DDD;
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-type01);
    font-size: 14px;
    color: var(--font-color01);
}

    .pc-guide-search:focus {
        outline: none;
        border-color: var(--main-color01);
    }

/* 요구사항 3 : 유형(전시/공연/강좌/기타)별 섹션 */
.pc-guide-section {
    margin-bottom: 18px;
}

    .pc-guide-section:last-child {
        margin-bottom: 0;
    }

.pc-guide-section-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-type02);
    font-size: 14px;
    font-weight: 700;
    color: var(--font-color01);
    margin: 0 0 10px;
}

.pc-guide-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--main-color01);
}

.pc-guide-section-count {
    font-family: var(--font-type01);
    font-weight: 400;
    color: var(--font-color02);
}

.pc-guide-item {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #E9EAEC;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .pc-guide-item:last-child {
        margin-bottom: 0;
    }

    .pc-guide-item:hover {
        border-color: var(--main-color01);
    }

    /* 요구사항 3 : 캘린더에서 선택된 날짜에 해당하는 항목(또는 직접 클릭한 항목) 강조 */
    .pc-guide-item.is-active {
        border-color: var(--main-color01);
        box-shadow: 0 0 0 1px var(--main-color01);
    }

.pc-guide-item-tit {
    font-family: var(--font-type02);
    font-size: 15px;
    font-weight: 700;
    color: var(--font-color01);
    margin: 0 0 6px;
}

.pc-guide-age {
    font-family: var(--font-type01);
    font-weight: 400;
    font-size: 13px;
    color: var(--font-color02);
}

.pc-guide-item-desc {
    font-family: var(--font-type01);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -.4px;
    color: var(--font-color02);
    margin: 0 0 6px;
}

.pc-guide-item-sched {
    font-family: var(--font-type01);
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color01);
    margin: 0 0 10px;
}

/* 요구사항(11차) : 접수기간/교육기간/장소/참가비/선발방법을 "라벨 + 줄바꿈 + 값"
   형태로 배치한다. 한 줄짜리 문자열(구 .pc-guide-item-sched)보다 좁은 폭에서
   값이 어색하게 줄바꿈되지 않고 안정적으로 읽힌다. */
.pc-guide-sched-list {
    margin: 0 0 10px;
}

.pc-guide-sched-item {
    margin-bottom: 6px;
}

    .pc-guide-sched-item:last-child {
        margin-bottom: 0;
    }

.pc-guide-sched-label {
    font-family: var(--font-type01);
    font-size: 12px;
    font-weight: 600;
    color: var(--font-color02);
    margin: 0 0 2px;
}

.pc-guide-sched-value {
    font-family: var(--font-type01);
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color01);
    margin: 0;
    word-break: break-word;
}

/* 요구사항 5 : 접수상태(ING)에 따른 신청 버튼 활성화/비활성화 */
/* 요구사항(6차-1, 6차-2) : 모달에 있던 현황판(모집정원~잔여)을 안내 카드로 옮겼다.
   .rsv-status 자체 스타일은 reserve-status.css(사이트 공용, ProgramCalendar.aspx 에서
   참조)를 그대로 쓰고, 여기서는 카드 안에서의 여백만 보정한다. */
.pc-guide-status {
    margin-top: 10px;
}

.pc-guide-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    margin-top: 4px;
    border: 0;
    border-radius: 5px;
    background: var(--main-color01);
    color: #fff;
    font-family: var(--font-type02);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

    .pc-guide-apply-btn:hover:not(:disabled) {
        background: var(--main-color01-hover);
    }

    .pc-guide-apply-btn:disabled {
        background: var(--gray-color01, #E9EAEC);
        color: var(--font-color02);
        cursor: default;
    }

/* ── 세로 배치(layout:'stacked') 대체 레이아웃 ─────────────────────────────
   요구사항(10차) : 좌측 서브메뉴가 있어 컨텐츠 폭이 좁은 사이트(예: 1150px)에 이
   캘린더를 얹을 때를 위한 대체 레이아웃. 화면 폭(디바이스)이 아니라
   ProgramCalendar.init({ layout: 'stacked' }) 옵션으로 켜고 끄므로(program-calendar.js
   가 #programCalendarPage 에 .pc-layout-stacked 클래스를 붙여준다), CSS 파일은 하나만
   쓰고 폭이 넓은 기존 사이트(1400px)에도 필요해지면 옵션만 켜면 그대로 적용된다.
   옵션을 지정하지 않으면(기본값) 지금까지의 좌우 2단 레이아웃 그대로다. ────────── */

.program-calendar-page.pc-layout-stacked .pc-layout {
    display: block;
}

.program-calendar-page.pc-layout-stacked .pc-calendar-col {
    margin-bottom: 24px;
}

.program-calendar-page.pc-layout-stacked .pc-guide-col {
    height: auto !important;   /* 세로 배치이므로 좌우 높이 동기화(JS _syncColumnHeights) 를 쓰지 않는다 */
    min-height: 0;
}

/* 이용안내 카드 그리드 - 유형별 섹션 안에서 한 줄에 기본 3개.
   문제가 있어 2열로 줄여야 하면, 아래 3곳의 repeat(3, ...) 를 repeat(2, ...) 로
   바꾸고 그 아래 900px 미디어쿼리는 지우면 된다(700px 미디어쿼리만 남기면 2열→1열). */
.program-calendar-page.pc-layout-stacked .pc-guide-section-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.program-calendar-page.pc-layout-stacked .pc-guide-item {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    /* 카드마다 내용 길이가 달라도 신청 버튼/현황판이 카드 하단에 맞춰지도록 */
    .program-calendar-page.pc-layout-stacked .pc-guide-apply-btn {
        margin-top: auto;
    }

@media (max-width: 900px) {
    .program-calendar-page.pc-layout-stacked .pc-guide-section-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .program-calendar-page.pc-layout-stacked .pc-guide-section-list {
        grid-template-columns: 1fr;
    }
}

/* ── 이용안내 컬럼 "컴팩트" 모드 (요구사항 11차) ───────────────────────────
   program-calendar.js 의 _syncGuideCompact() 가 .pc-guide-col 의 실제 렌더링된
   폭을 재서(뷰포트가 아니라) 300px 미만이면 이 클래스를 붙인다. split 레이아웃에서
   브라우저 창은 넓은데 좌측 서브메뉴 때문에 이 위젯 자체가 좁게 눌리는 경우
   (@media 의 뷰포트 기준 판단으로는 잡아내지 못하는 상황)를 위한 것이다.
   ※ .rsv-status(구분/모집정원/대기정원/신청/잔여 표)는 reserve-status.css(사이트 공용
   파일)가 정의하므로, 그 내부 구조를 직접 다시 짜는 대신 - 컴팩트일 때는 가로 스크롤을
   허용해서 글자가 어색하게 줄바꿈되는 대신 표 자체가 살짝 옆으로 스크롤되게 한다.
   실제 reserve-status.css 의 구조를 보내주시면 폰트 축소 등으로 더 다듬을 수 있습니다. */
.pc-guide-col.pc-guide-compact .pc-guide-status {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    /* 요구사항 13-2 : 여기 있던 .rsv-status { min-width: 300px } 를 지웠다. 이 최소 폭이
       .pc-guide-col 실제 폭과 무관하게 표를 항상 300px 이상으로 강제하고 있어서,
       (280px 그리드 하한을 없앤 뒤에도) 컬럼이 좁아지는 만큼 표가 줄어들지 않고
       계속 300px로 버티는 것처럼 보였다. 이제는 내용(줄바꿈 없는 라벨) 이 실제로
       넘칠 때만 아래 overflow-x: auto 로 스크롤되고, 넘치지 않으면 표도 컬럼 폭을
       따라 그대로 줄어든다. */

    /* reserve-status.css 의 .status-head/.status-body > span 은 white-space 지정이
       없어서, 컬럼이 좁아지면 (overflow-x:auto 로 스크롤되는 대신) 라벨 텍스트가 그냥
       두 줄로 줄바꿈되어 버린다. 컴팩트 모드에서는 줄바꿈 대신 스크롤되도록 강제한다. */
    .pc-guide-col.pc-guide-compact .rsv-status .status-head > span,
    .pc-guide-col.pc-guide-compact .rsv-status .status-body > span {
        white-space: nowrap;
    }

.pc-guide-col.pc-guide-compact .pc-guide-item {
    padding: 12px;
}

.pc-guide-col.pc-guide-compact .pc-guide-item-tit {
    font-size: 14px;
}

.pc-guide-col.pc-guide-compact .pc-guide-item-desc,
.pc-guide-col.pc-guide-compact .pc-guide-item-sched {
    font-size: 13px;
}

/* ── 반응형 (rental-calendar.css 와 동일한 브레이크포인트 991px) ──────────── */

@media (max-width: 991px) {
    .pc-layout {
        grid-template-columns: 1fr;
    }

    .pc-guide-col {
        height: auto !important;   /* 모바일에서는 세로 스택이므로 JS 의 높이 동일화를 무시 */
        min-height: 0;
    }

    .pc-calendar-col {
        padding: 15px 14px 18px;
    }

    .pc-cal-title {
        font-size: 19px;
        min-width: 0;
    }

    .pc-cal-weekday {
        padding: 10px 0 9px;
        font-size: 14px;
    }

    .pc-cal-days {
        grid-auto-rows: minmax(82px, auto);
    }

    .pc-cal-day {
        min-height: 82px;
        padding: 6px 6px 6px;
    }

    .pc-cal-daynum {
        font-size: 14px;
        line-height: 18px;
    }

    .pc-badge {
        height: 22px;
        padding: 0 6px;
        border-radius: 4px;
        font-size: 11px;
        line-height: 22px;
    }

    .pc-filter-select {
        flex: 1;
        min-width: 0;
    }

    .pc-guide-col {
        padding: 15px 14px;
    }

    .pc-guide-item-tit {
        font-size: 14px;
    }

    .pc-guide-item-desc,
    .pc-guide-item-sched {
        font-size: 13px;
    }

    .pc-guide-search {
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    .pc-filter-bar {
        flex-wrap: wrap;
    }
}

@media print {
    .pc-cal-nav {
        display: none;
    }
}