/* 모바일(좁은 화면) 전용 스타일. 메인 캘린더(index.html)와 로그인 화면에서만 불러온다.
   등록/수정 화면들은 PC 레이아웃 그대로 쓰므로 여기서 다루지 않는다. */

/* 날짜별 예약 목록 패널과 건수 표시는 모바일에서만 쓴다. */
.erp-calendar-count { display: none; }
@media (min-width: 769px) {
    .erp-calendar-day-detail { display: none !important; }
}

@media (max-width: 768px) {
    /* — 상단바: 로고/미발송/사용자 정보만 남기고 메뉴·바로가기는 숨긴다 — */
    .erp-topbar { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
    .erp-menu, .erp-shortcut-menu { display: none; }
    .erp-topbar-right { margin-left: auto; gap: 10px; }
    .erp-unsent-badge { order: 3; flex-basis: 100%; font-size: 0.78rem; }

    /* — 본문: 사이드바(메뉴/환율)와 탭 줄을 숨기고 달력을 화면 폭에 꽉 채운다 — */
    .erp-sidebar, .erp-tabstrip { display: none; }
    .erp-body { display: block; }
    .erp-main { padding: 8px; }
    .erp-panel-calendar { padding: 10px 8px; }

    .erp-calendar-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .erp-calendar-header .erp-panel-title { white-space: normal; font-size: 1.1rem; }
    .erp-calendar-summary { display: block; font-size: 0.8rem; font-weight: 400; color: var(--color-text-muted); }
    .erp-calendar-nav { flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
    .erp-calendar-nav select { flex: 1 1 64px; padding: 6px 4px; }
    .erp-calendar-nav .erp-btn { padding: 6px 10px; font-size: 0.82rem; }

    /* — 달력: 칸에는 날짜와 건수만 보이고, 누르면 아래 목록에 그날 예약이 나온다 — */
    .erp-calendar-scroll { max-height: none; overflow: visible; }
    .erp-calendar th { padding: 6px 0; font-size: 0.72rem; position: static; }
    .erp-calendar td { height: 58px; padding: 3px 2px; cursor: pointer; }
    .erp-calendar-day-num { justify-content: center; font-size: 0.82rem; margin-bottom: 2px; }
    /* 칸이 좁아 휴일명은 숨기고 빨간 날짜로만 표시한다 (휴일명은 아래 날짜 목록 제목에 나온다). */
    .erp-calendar-holiday-name { display: none; }
    .erp-calendar-events { display: none; }

    .erp-calendar-count {
        display: block;
        margin: 0 auto;
        padding: 1px 0;
        max-width: 40px;
        border-radius: 10px;
        background: var(--color-accent);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
    }
    .erp-calendar-count.erp-calendar-count-cancelled { background: #FFD9FA; color: var(--color-text-muted); }

    .erp-calendar td.erp-calendar-today .erp-calendar-day-num {
        display: inline-block;
        min-width: 22px;
        border-radius: 11px;
        background: var(--color-text);
        color: #fff;
    }
    .erp-calendar td.erp-calendar-selected { background: var(--color-accent-100); box-shadow: inset 0 0 0 2px var(--color-accent); }

    .erp-calendar-day-detail { margin-top: 10px; border-top: 2px solid var(--color-accent); padding-top: 8px; }
    .erp-calendar-day-detail-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
    .erp-calendar-day-detail-list { list-style: none; margin: 0; padding: 0; }
    .erp-calendar-day-detail-list li {
        padding: 10px 10px;
        margin-bottom: 4px;
        background: var(--color-accent-100);
        border-left: 3px solid var(--color-accent);
        color: var(--color-accent-800);
        font-size: 0.9rem;
        cursor: pointer;
    }
    .erp-calendar-day-detail-list li.erp-calendar-event-cancelled {
        text-decoration: line-through; color: var(--color-text-muted); background: #FFD9FA;
    }
    .erp-calendar-day-detail-list li.erp-calendar-day-detail-empty {
        background: none; border-left: none; color: var(--color-text-muted); cursor: default;
    }

    /* — 예약 상세 팝업은 전체 화면으로 — */
    .booking-edit-modal { width: 100vw; height: 100vh; border-radius: 0; }

    /* — 로그인 화면: 고정 폭(500px) 폼을 화면 폭에 맞춘다 — */
    .login-form { width: 100%; max-width: 500px; padding: 24px 20px; }
}