// ... existing code ...
        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }
        
        @media (max-width: 992px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .board-header, .board-item {
                grid-template-columns: 80px 120px 80px 1fr 100px;
                font-size: 14px;
            }
        }
        
        @media (max-width: 576px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
            
            .board-header, .board-item {
                grid-template-columns: 70px 100px 70px 1fr 80px;
                font-size: 12px;
                padding: 10px;
            }
            
            .section-title {
                margin: 15px 0 10px; /* 모바일에서는 더 작은 간격으로 설정 */
            }
        }
        
        /* 추가된 모바일 최적화 스타일 */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
                padding: 10px;
                gap: 10px;
            }

            .grid-item {
                padding: 12px;
            }

            .title {
                font-size: 1em;
            }

            .content {
                font-size: 0.9em;
            }

            .price {
                font-size: 1em;
            }

            .region {
                font-size: 0.8em;
            }

            .info-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }

            .info-table th,
            .info-table td {
                padding: 8px;
                font-size: 0.9em;
            }

            .icon-badge {
                padding: 4px 8px;
                font-size: 0.9em;
            }
            
            /* 세로로 표시되는 텍스트 방지 */
            th, td {
                white-space: normal !important;
                word-break: keep-all;
            }
            
            /* 그리드 아이템 내부 컨텐츠 정리 */
            .grid-item {
                display: flex;
                flex-direction: column;
            }
            
            /* 테이블 헤더 스타일 */
            .info-table th {
                width: auto;
                min-width: 60px;
                text-align: center;
            }
            
            /* 콘텐츠 영역 스타일 */
            .content-area {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            /* 텍스트 넘침 방지를 위한 스타일 */
            .grid-item, .info-table td {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            
            /* 업소명 열 너비 제한 및 말줄임표 */
            .info-table td:nth-child(2) {
                max-width: 120px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            /* 모집내용 열 너비 제한 및 말줄임표 */
            .info-table td:nth-child(4) {
                max-width: 150px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            /* 그리드 아이템 내 제목 텍스트 제한 */
            .grid-item .title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            
            /* 테이블 레이아웃 조정 */
            .info-table {
                table-layout: fixed;
                width: 100%;
            }
            
            /* 지역 열 너비 */
            .info-table th:first-child,
            .info-table td:first-child {
                width: 15%;
            }
            
            /* 직종 열 너비 */
            .info-table th:nth-child(3),
            .info-table td:nth-child(3) {
                width: 20%;
            }
            
            /* 금액 열 너비 */
            .info-table th:last-child,
            .info-table td:last-child {
                width: 25%;
            }
            
            /* 테이블 고정 레이아웃 강제 적용 */
            table, .info-table {
                table-layout: fixed !important;
                width: 100% !important;
            }
            
            /* 모든 테이블 셀에 오버플로우 처리 적용 */
            th, td {
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                max-width: 100px !important;
                padding: 5px !important;
            }
            
            /* 업소명 열에 더 제한적인 너비 적용 */
            td:nth-child(2) {
                max-width: 80px !important;
            }
            
            /* 모집내용 열에 제한적인 너비 적용 */
            td:nth-child(4) {
                max-width: 80px !important;
            }
            
            /* 그리드 아이템 내용 제한 */
            .grid-item .title,
            .grid-item .content {
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                max-width: 100% !important;
            }
            
            /* 특정 문제 영역 직접 타겟팅 */
            #job-table td, 
            .recruitment-table td,
            .info-table td {
                max-width: 70px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
        }

        @media (max-width: 480px) {
            .main-title {
                font-size: 1.8em;
            }

            .grid-container {
                grid-template-columns: 1fr;
            }
        }

        /* 로딩 애니메이션 */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s;
        }

        .loader.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
// ... existing code ...