/* ============================================ */
/* 모바일 최적화 CSS (≤420px)                  */
/* ============================================ */

/* 기본 폰트 크기 축소 (14px → 12px) */
@media (max-width: 420px) {
    html body {
        font-size: 12px !important;  /* 특이성 강화 */
    }
    
    /* 헤더 최적화 */
    .page-header {
        padding: 0.75rem 1rem !important;
    }
    
    /* 페이지 제목 - 최강 특이성 */
    html body .page-title,
    body .page-title,
    .page-title {
        font-size: 14px !important;  /* 옵션1: 균형형 (14px) - 로고와 거의 동등 */
        font-weight: 600 !important;
    }
    
    /* 버튼 크기 (균형 조정) */
    .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 11px !important;  /* 10px → 11px (카드 제목과 동일) */
        min-height: 38px !important;
    }
    
    .btn-sm {
        padding: 0.375rem 0.625rem !important;
        font-size: 10px !important;  /* 9px → 10px */
        min-height: 34px !important;
    }
    
    .btn i {
        font-size: 11px !important;  /* 10px → 11px */
    }
    
    /* 입력 필드 (균형 조정) */
    .form-control {
        padding: 0.5rem 0.75rem !important;
        font-size: 11px !important;  /* 10px → 11px */
        height: 38px !important;
    }
    
    .form-control-sm {
        padding: 0.375rem 0.625rem !important;
        font-size: 10px !important;  /* 9px → 10px */
        height: 34px !important;
    }
    
    input, select, textarea {
        font-size: 11px !important;  /* 10px → 11px */
    }
    
    /* 빠른 생성 바 */
    .work-quick-add {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    .work-quick-add input {
        font-size: 11px !important;  /* 10px → 11px */
        padding: 0.5rem 0.75rem !important;
    }
    
    .work-quick-add select {
        font-size: 10px !important;  /* 9px → 10px */
        padding: 0.375rem 0.5rem !important;
    }
    
    /* 카테고리 탭 */
    .work-category-tabs {
        padding: 0.625rem 0.75rem !important;
        gap: 0.375rem !important;
    }
    
    .category-tab {
        padding: 0.375rem 0.75rem !important;
        font-size: 10px !important;  /* 9px → 10px */
        border-radius: 6px !important;
    }
    
    /* 상태 탭 */
    .work-tabs {
        padding: 0.625rem 0.75rem !important;
        gap: 0.375rem !important;
    }
    
    .work-tab {
        padding: 0.375rem 0.75rem !important;
        font-size: 11px !important;  /* 10px → 11px (균형 조정) */
        font-weight: 500 !important;
    }
    
    /* 검색 컨트롤 */
    .work-controls {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    .work-search {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .work-search input {
        font-size: 11px !important;  /* 10px → 11px */
        padding: 0.5rem 0.75rem 0.5rem 2.25rem !important;
        height: 38px !important;
    }
    
    .work-search i {
        left: 0.75rem !important;
        font-size: 11px !important;  /* 10px → 11px */
    }
    
    .work-filters {
        flex: 1 1 100% !important;
        gap: 0.375rem !important;
    }
    
    .work-filters select {
        flex: 1 !important;
        font-size: 10px !important;  /* 9px → 10px */
        padding: 0.375rem 0.5rem !important;
    }
    
    /* 소임 카드 */
    .work-list {
        padding: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .work-card,
    .work-card-v2,
    .todo-card {
        padding: 0.625rem !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .work-card-header {
        margin-bottom: 0 !important;  /* 0.5rem → 0 (제목과 배지 같은 줄) */
    }
    
    /* 제목과 배지를 같은 줄에 배치 */
    .work-card-title-row {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .work-card-badges {
        display: flex !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }
    
    /* 카테고리와 메타 정보를 같은 줄에 배치 */
    .work-card-meta-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    .work-meta-item {
        font-size: 9.5px !important;
        color: var(--text-secondary) !important;
    }
    
    .work-meta-item i {
        font-size: 8.5px !important;
        margin-right: 0.25rem !important;
    }
    
    /* 링크 배지 여백 축소 */
    .work-links {
        margin-top: 0.375rem !important;  /* 0.5rem → 0.375rem */
    }
    
    body .work-card-title,
    body .work-title {
        font-size: 11px !important;  /* 특이성 강화: 11px */
        font-weight: 500 !important;
        margin: 0 !important;
        flex: 1 !important;
        line-height: 1.4 !important;
    }
    
    body .work-card-category,
    body .work-category {
        padding: 0.125rem 0.5rem !important;
        font-size: 8px !important;  /* 특이성 강화: 8px */
        flex-shrink: 0 !important;
    }
    
    body .work-card-meta,
    body .work-meta {
        font-size: 9.5px !important;  /* 특이성 강화: 9.5px */
        gap: 0.5rem !important;
    }
    
    body .work-card-meta i,
    body .work-meta i {
        font-size: 8.5px !important;  /* 특이성 강화: 8.5px */
    }
    
    /* 상태 및 우선순위 배지 (강제 적용) */
    body .status-badge {
        font-size: 8px !important;  /* 특이성 강화: 8px */
        padding: 0.125rem 0.5rem !important;
    }
    
    body .priority-badge {
        font-size: 8px !important;  /* 특이성 강화: 8px */
        padding: 0.125rem 0.5rem !important;
    }
    
    /* 뷰 토글 버튼 */
    .view-toggle {
        padding: 0.1875rem !important;
        gap: 0.25rem !important;
    }
    
    .toggle-btn {
        padding: 0.375rem 0.625rem !important;
        font-size: 11px !important;  /* 0.875rem → 11px */
        min-width: 38px !important;
        min-height: 38px !important;
    }
    
    .toggle-btn i {
        font-size: 11px !important;  /* 0.875rem → 11px */
    }
    
    .toggle-btn span {
        font-size: 10px !important;  /* 0.8125rem → 10px */
    }
    
    /* 게시판 칩 */
    .board-chips {
        padding: 0.75rem !important;
        gap: 0.375rem !important;
    }
    
    .board-chip {
        padding: 0.375rem 0.75rem !important;
        font-size: 10px !important;  /* 9px → 10px */
    }
    
    /* 게시글 카드 (특이성 강화 + px 단위) */
    body .post-card {
        padding: 0.75rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    body .post-card-title {
        font-size: 11px !important;  /* 특이성 강화: 11px */
        font-weight: 500 !important;
    }
    
    body .post-card-badge {
        font-size: 8px !important;  /* 특이성 강화: 8px */
        padding: 0.125rem 0.5rem !important;
    }
    
    body .post-card-meta {
        font-size: 9.5px !important;  /* 특이성 강화: 9.5px */
    }
    
    body .post-card-meta i {
        font-size: 8.5px !important;  /* 특이성 강화: 8.5px */
    }
    
    /* 툴바 */
    .toolbar {
        padding: 0.625rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    .toolbar input {
        font-size: 11px !important;  /* 0.875rem → 11px */
        padding: 0.375rem 0.625rem !important;
        height: 34px !important;
    }
    
    .toolbar select {
        font-size: 10px !important;  /* 0.8125rem → 10px */
        padding: 0.375rem 0.5rem !important;
        height: 34px !important;
    }
    
    /* 칩 */
    .chips {
        gap: 0.375rem !important;
    }
    
    .chip {
        padding: 0.25rem 0.5rem !important;  /* 0.625rem → 0.5rem (공간 절약) */
        font-size: 10px !important;  /* 0.8125rem → 10px */
        min-height: 32px !important;
        border-radius: 6px !important;  /* 20px → 6px */
    }
    
    /* 아이콘 전용 버튼 */
    .btn-icon-only {
        padding: 0.5rem !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    
    .btn-icon-only i {
        font-size: 11px !important;  /* 0.875rem → 11px */
    }
    
    /* 검색 아이콘 */
    .fa-search {
        font-size: 11px !important;  /* 0.875rem → 11px */
    }
    
    /* 로딩 상태 */
    .loading-state p {
        font-size: 11px !important;  /* 0.875rem → 11px */
    }
    
    /* 하단 네비게이션 */
    body .bottom-nav {
        height: 56px !important;
        padding: 0.25rem !important;
    }
    
    body .bottom-nav .nav-item {
        font-size: 11px !important;  /* 10px → 11px (모든 하단 네비 텍스트 통일) */
        padding: 0.375rem 0.5rem !important;
    }
    
    body .bottom-nav .nav-item span {
        font-size: 11px !important;  /* 10px → 11px (텍스트 명확히 통일) */
    }
    
    body .bottom-nav .nav-item i {
        font-size: 18px !important;  /* 아이콘 18px */
        margin-bottom: 0.125rem !important;
    }
    
    /* 상단 헤더 */
    .top-header {
        height: 52px !important;
        padding: 0 0.75rem !important;
    }
    
    .header-logo {
        font-size: 1.125rem !important;
    }
    
    .logo-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* 페이지 컨텐츠 여백 */
    .page-content {
        padding: 0 !important;
    }
    
    /* 폼 그리드 */
    .form-grid {
        gap: 0.625rem !important;
    }
    
    .form-group {
        margin-bottom: 0.75rem !important;
    }
    
    .form-group label {
        font-size: 0.8125rem !important;
        margin-bottom: 0.375rem !important;
        font-weight: 500 !important;
    }
    
    /* 뱃지 */
    .badge {
        padding: 0.125rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
    
    /* 모달 */
    .modal-header {
        padding: 0.75rem 1rem !important;
    }
    
    .modal-title {
        font-size: 1.0625rem !important;
    }
    
    .modal-body {
        padding: 0.75rem !important;
    }
    
    .modal-footer {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    /* ============================================ */
    /* 회원관리 페이지 모바일 최적화                */
    /* ============================================ */
    
    /* 회원 카드 */
    .member-card {
        padding: 0.75rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    .member-name {
        font-size: 11px !important;  /* 카드 제목 크기 */
        font-weight: 500 !important;
        margin: 0 !important;
    }
    
    .member-phone {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
        color: var(--text-secondary) !important;
        margin: 0.25rem 0 0 0 !important;
    }
    
    .member-detail-row {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
    }
    
    .member-detail-row .label {
        font-size: 9.5px !important;
    }
    
    .member-detail-row .value {
        font-size: 9.5px !important;
    }
    
    /* 배지 */
    .badge {
        font-size: 8px !important;  /* 배지 크기 */
        padding: 0.25rem 0.5rem !important;
        border-radius: 6px !important;
    }
    
    /* 회원 검색 */
    .member-search input {
        font-size: 11px !important;
        padding: 0.5rem 0.75rem 0.5rem 2.25rem !important;
        height: 38px !important;
    }
    
    /* 회원 필터 */
    .member-filters select {
        font-size: 10px !important;
        padding: 0.375rem 0.5rem !important;
        height: 34px !important;
    }
    
    /* ============================================ */
    /* 캘린더 페이지 모바일 최적화                  */
    /* ============================================ */
    
    /* 캘린더 헤더 */
    .calendar-header {
        padding: 0.75rem !important;
    }
    
    .calendar-title {
        font-size: 14px !important;  /* 페이지 제목 크기 */
        font-weight: 600 !important;
    }
    
    /* 캘린더 셀 */
    .calendar-day {
        font-size: 10px !important;
        padding: 0.375rem !important;
        min-height: 44px !important;
    }
    
    .calendar-day-number {
        font-size: 11px !important;
    }
    
    .calendar-event {
        font-size: 8px !important;  /* 배지 크기 */
        padding: 0.125rem 0.25rem !important;
    }
    
    /* 일정 목록 */
    .event-list-item {
        padding: 0.75rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    .event-title {
        font-size: 11px !important;  /* 카드 제목 크기 */
        font-weight: 500 !important;
    }
    
    .event-time {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
    }
    
    .event-badge {
        font-size: 8px !important;  /* 배지 크기 */
        padding: 0.25rem 0.5rem !important;
        border-radius: 6px !important;
    }
    
    /* ============================================ */
    /* 상담·예약 페이지 모바일 최적화              */
    /* ============================================ */
    
    /* 요청 카드 */
    .request-card {
        padding: 0.75rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    .request-name {
        font-size: 11px !important;  /* 카드 제목 크기 */
        font-weight: 500 !important;
        margin: 0 !important;
    }
    
    .request-phone {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
        color: var(--text-secondary) !important;
        margin: 0.25rem 0 0 0 !important;
    }
    
    .request-type {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
        margin: 0.5rem 0 0.25rem 0 !important;
    }
    
    .request-message {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
        margin: 0.25rem 0 !important;
    }
    
    .request-preferred {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
        margin: 0.25rem 0 !important;
    }
    
    .request-time {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
    }
    
    .request-assigned {
        font-size: 9.5px !important;  /* 메타 정보 크기 */
    }
    
    /* 상태 배지 */
    .status-badge {
        font-size: 8px !important;  /* 배지 크기 */
        padding: 0.25rem 0.5rem !important;
        border-radius: 6px !important;
    }
    
    /* 요청 탭 */
    .request-tab {
        font-size: 10px !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    /* 요청 필터 */
    .request-filters {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    .request-filters select {
        font-size: 10px !important;
        padding: 0.375rem 0.5rem !important;
        height: 34px !important;
    }
    
    /* 요청 검색 */
    .request-search input {
        font-size: 11px !important;
        padding: 0.5rem 0.75rem !important;
        height: 38px !important;
    }
    }
}

/* 타블렛 (421px ~ 768px) */
@media (min-width: 421px) and (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    .page-title {
        font-size: 20px;  /* 1.375rem → 20px (태블릿 중간 크기) */
        font-weight: 600;
    }
    
    .btn {
        font-size: 0.9375rem;
    }
    
    .form-control {
        font-size: 0.9375rem;
    }
}

/* 데스크톱 (≥769px) */
@media (min-width: 769px) {
    body {
        font-size: 16px;
    }
    
    .page-title {
        font-size: 24px;  /* 1.5rem → 24px (명시적) */
        font-weight: 700; /* 데스크톱은 굵게 */
    }
    
    /* PC에서 반응형 Grid - 카드 최소 폭 400px */
    .work-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    
    /* 카드 그리드 - 반응형 (1줄 3개) */
    .work-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
        gap: 16px !important;
    }
}