/* --- style.css - 포트폴리오 사이트 통합 스타일시트 (파일 관리자 포함) --- */

/* 기본 스타일 리셋 및 설정 */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f5f0e5; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }

#admin-content .container { max-width: none !important; }

a { color: #007bff; text-decoration: none; transition: color 0.3s; cursor: pointer; }

a:hover { color: #0056b3; text-decoration: underline; }

button, .button { background-color: #007bff; color: white; border: none; border-radius: 4px; padding: 10px 15px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }

button:hover, .button:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

button:disabled { background-color: #cccccc; cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.7; }

.status-message { padding: 12px; margin: 15px 0; border-radius: 4px; font-size: 0.9em; display: none; }

.success-message { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.info-message { background-color: #e7f5ff; color: #0c5460; border: 1px solid #bee5eb; }

#loading-message { text-align: center; padding: 20px; color: #666; font-size: 1.1em; }

.login-container { max-width: 400px; margin: 50px auto; padding: 30px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; }

.login-container h1 { margin-bottom: 25px; color: #333; font-size: 1.8em; }

.login-container label { display: block; text-align: left; margin-bottom: 8px; font-weight: bold; color: #555; }

.login-container input[type="text"], .login-container input[type="password"] { width: 100%; padding: 12px 15px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 1em; transition: border-color 0.3s, box-shadow 0.3s; }

.login-container input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }

.login-container .action-buttons { margin-top: 15px; display: flex; gap: 10px; justify-content: center; }

.login-container button[type="submit"] { flex-grow: 1; }

.login-container .admin-link { margin-top: 20px; font-size: 0.9em; }

/* === 헤더 공통 스타일 (.main-header) === */
.main-header {
    background-size: cover; 
    background-position: center; 
    color: white; 
    position: relative;
    margin-bottom: 30px; 
    padding: 20px 30px; 
    text-align: left;
}

/* 메인 페이지 헤더 (#main-content .main-header) */
#main-content .main-header {
    background-image: url('https://ysparks.org/portfolio/bg.png');
    min-height: 90px; /* 메인 페이지만 최소 높이 적용 */
    padding: 40px 30px; /* 메인 페이지 패딩 */
}

#main-content .main-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; }

/* --- 수정 확인된 부분 --- */
/* h1, p.subtitle에만 position: relative 적용 */
#main-content .main-header h1, #main-content .main-header p.subtitle { position: relative; z-index: 2; }

#main-content .main-header h1 { font-size: 3.5em; text-shadow: 2px 2px 6px rgba(250, 246, 3, 0.973); margin-bottom: 10px; margin-top: 0;}

#main-content .main-header p.subtitle { font-size: 2.0em; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); color: #f0f0f0; margin-top: 0; margin-bottom: 20px;}

/* --- user-info에 대한 스타일 (position: absolute 적용) --- */
#main-content .user-info {
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 3; /* h1, subtitle(z-index: 2) 보다 위에 오도록 z-index 조정 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
} /* 메인 페이지 사용자 정보 위치 */

#main-content #user-welcome-message { font-size: 1.5em; text-shadow: 1px 1px 4px rgba(246, 250, 8, 0.637); color: #ffffff;}

#main-content #user-logout-button { padding: 8px 15px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid white; color: white; font-size: 1em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); }

#main-content #user-logout-button:hover { background-color: rgba(255, 255, 255, 0.4); }

#main-content .user-info nav ul li a { /* 메인 페이지 관리자 링크 */ display: inline-block; padding: 10px 18px; background-color: rgba(70, 130, 180, 0.7); color: white; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 5px; text-decoration: none; font-size: 1.1em; font-weight: bold; text-align: center; transition: background-color 0.3s, border-color 0.3s; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); }

#main-content .user-info nav ul li a:hover { background-color: rgba(70, 130, 180, 0.9); border-color: white; text-decoration: none; }

/* 관리자 페이지 헤더 (.admin-header 클래스 사용) */
.admin-header {
    background-image: none;
    background-color: #2c3e50; /* 어두운 남색 배경 복구 */
    min-height: auto;
}

.admin-header .header-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; position: relative; z-index: 3; }

.admin-header .header-title-area { text-align: center; position: relative; z-index: 2;} /* 제목도 z-index 추가 */

.admin-header .header-title-area h1, .admin-header .header-title-area p { color: #ffffff; text-shadow: none; }

.admin-header .header-title-area h1 { font-size: 2.2em; margin-bottom: 5px; margin-top: 0; /* 상단 마진 제거 */ }

.admin-header .header-title-area p { font-size: 1em; color: #bdc3c7; margin-top: 0; }

/* 관리자 헤더 - "메인 페이지로 이동" 링크 스타일 복구 */
.admin-header .main-page-link a {
    font-size: 1.1em; /* 크기 조정 */
    font-weight: bold;
    color: #ecf0f1 !important;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 기본 그림자 */
    padding: 8px 12px; /* 버튼 같은 느낌을 위해 패딩 추가 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 연한 테두리 */
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1); /* 약간의 배경 */
}

.admin-header .main-page-link a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    text-decoration: none;
}

.admin-header .main-page-link a i { margin-right: 7px; }

/* 파일 관리자 링크 스타일 */
.admin-header .main-page-link .file-manager-link {
    margin-left: 15px;
    padding: 8px 15px;
    background: #27ae60;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    transition: background-color 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.admin-header .main-page-link .file-manager-link:hover {
    background: #229954;
    text-decoration: none;
    color: white !important;
}

/* 관리자 헤더 - 사용자 정보 영역 */
.admin-header .user-info { display: flex; align-items: center; gap: 15px; }

#admin-welcome-message { font-size: 1.1em; color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

#logout-button { /* 관리자 로그아웃 버튼 */
    padding: 7px 14px; 
    background-color: rgba(236, 240, 241, 0.2); 
    border: 1px solid #bdc3c7; 
    color: #ecf0f1; 
    font-size: 0.9em;
}

#logout-button:hover { background-color: rgba(236, 240, 241, 0.4); }

/* === 메인 페이지 콘텐츠 영역 스타일 (index.html) === */
#main-content main { padding: 0 30px; margin-bottom: 40px; }

.portfolio-header-grid { display: grid; grid-template-columns: 20% 60% 20%; gap: 20px; margin-bottom: 30px; align-items: center; }

.portfolio-header-title { grid-column: 2; text-align: center; }

.portfolio-header-title h2 { font-size: 3em; margin: 0; color: #333; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); font-weight: bold; background: linear-gradient(45deg, #4285f4, #34a853, #fbbc05, #ea4335); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 10px 0; letter-spacing: 1px; display: inline-block; border-left: none; }

.portfolio-header-link-left, .portfolio-header-link-right { background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.portfolio-header-link-left { grid-column: 1; } 
.portfolio-header-link-right { grid-column: 3; }

.portfolio-header-link-left h3, .portfolio-header-link-right h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.1em; }

.portfolio-header-link-left:hover, .portfolio-header-link-right:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }

/* 포트폴리오 아이템 그리드 (메인 페이지) */
.portfolio-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }

/* 개별 포트폴리오 아이템 카드 (메인 페이지) */
.portfolio-item { border: 1px solid #ddd; border-radius: 8px; background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; overflow: hidden; }

.portfolio-item:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }

.portfolio-item img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid #eee; }

.portfolio-item-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; min-width: 0; /* ★ 내용 넘침 방지 */ }

.portfolio-item-content h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.3em; color: #333; word-break: break-all; }

.portfolio-item-content p { font-size: 0.95em; color: #555; margin-bottom: 15px; flex-grow: 1; min-width: 0; /* ★ 내용 넘침 방지 */ white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; /* 줄바꿈 보장 */ line-height: 1.5; text-align: left; }

/* 포트폴리오 아이템 버튼 그룹 (메인 페이지) */
.portfolio-item-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 0 15px 15px 15px; /* 버튼 그룹 패딩 추가 */ }

.portfolio-item-buttons a, .portfolio-item-buttons button { display: block; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, opacity 0.3s; text-align: center; text-decoration: none; font-size: 0.9em; font-weight: 500; color: white; }

.portfolio-item-buttons a i, .portfolio-item-buttons button i { margin-right: 7px; }

.portfolio-item-buttons a:hover, .portfolio-item-buttons button:hover { opacity: 0.9; text-decoration: none; color: white; }

.execute-workflow-btn { background-color: #28a745; } 
.execute-workflow-btn:hover { background-color: #218838; }

.view-workflow-image-btn { background-color: #fd7e14; } 
.view-workflow-image-btn:hover { background-color: #e66800; }

.download-json-btn { background-color: #6f42c1; } 
.download-json-btn:hover { background-color: #5a32a3; }

.download-json-btn.disabled { background-color: #adb5bd; opacity: 0.7; cursor: not-allowed; }

/* === 관리자 페이지 스타일 === */
#admin-content { background-color: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); margin-top: 20px; }

.admin-section { margin-bottom: 40px; padding: 25px; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.admin-section h2 { margin-top: 0; border-bottom: 2px solid #4285f4; padding-bottom: 10px; margin-bottom: 25px; color: #333; font-size: 1.6em; }

.form-group { margin-bottom: 20px; }

.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #495057; }

.form-group input[type="text"], .form-group input[type="url"], .form-group input[type="password"], .form-group textarea, .form-group input[type="file"] { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; }

.form-group input[type="file"] { padding: 8px 12px; }

.form-group textarea { min-height: 100px; resize: vertical; }

.form-group input:focus, .form-group textarea:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

.file-info { font-size: 0.9em; color: #6c757d; margin-top: 8px; }

#current-json-link, #current-workflow-image-link { /* 현재 파일 링크 공통 */ display: inline-block; margin-left: 10px; color: #007bff; text-decoration: none; font-size: 0.9em; }

#current-json-link:hover, #current-workflow-image-link:hover { text-decoration: underline; }

/* 관리자 - 이미지 미리보기 공통 스타일 */
.image-preview { max-width: 250px; max-height: 180px; margin-top: 10px; display: none; border: 1px solid #ddd; border-radius: 4px; object-fit: contain; background-color: #f8f9fa; }

#current-image-preview, #current-workflow-image-preview { display: block; margin-bottom: 15px; }

/* 관리자 - 아이템 관리 테이블 스타일 */
.portfolio-items-table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; }

.portfolio-items-table th, .portfolio-items-table td { padding: 12px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid #dee2e6; word-wrap: break-word; min-width: 0; /* 테이블 셀 내용 넘침 방지 */ }

.portfolio-items-table th { background-color: #e9ecef; font-weight: 600; font-size: 0.95em; }

.portfolio-items-table tr:hover { background-color: #f8f9fa; }

.portfolio-items-table img { max-width: 100px; max-height: 75px; border-radius: 4px; display: block; margin: 0 auto; cursor: pointer; }

/* 정렬 가능한 헤더 스타일 추가 */
.portfolio-items-table th.sortable-header {
    cursor: pointer;
    position: relative; /* 아이콘 위치 조정을 위해 */
}

.portfolio-items-table th.sortable-header:hover {
    background-color: #dde2e6; /* 호버 시 약간 어둡게 */
}

.portfolio-items-table th.sortable-header .sort-icon {
    margin-left: 5px;
    font-size: 0.8em;
    color: #6c757d; /* 아이콘 색상 */
    display: inline-block;
    width: 1em; /* 아이콘 공간 확보 */
    text-align: center;
}

/* 테이블 컬럼 너비 설정 */
.portfolio-items-table th:nth-child(1), .portfolio-items-table td:nth-child(1) { width: 100px; text-align: center; } /* 대표 이미지 */
.portfolio-items-table th:nth-child(2), .portfolio-items-table td:nth-child(2) { width: 15%; } /* 제목 */
.portfolio-items-table th:nth-child(3), .portfolio-items-table td:nth-child(3) { width: 20%; } /* 설명 */
.portfolio-items-table th:nth-child(4), .portfolio-items-table td:nth-child(4) { width: 10%; text-align: center;} /* 워크플로우 URL */
.portfolio-items-table th:nth-child(5), .portfolio-items-table td:nth-child(5) { width: 100px; text-align: center; } /* Workflow 이미지 */
.portfolio-items-table th:nth-child(6), .portfolio-items-table td:nth-child(6) { width: 80px; text-align: center; } /* JSON 파일 */
.portfolio-items-table th:nth-child(7), .portfolio-items-table td:nth-child(7) { width: 12%; text-align: center; } /* 생성일자 */
.portfolio-items-table th:nth-child(8), .portfolio-items-table td:nth-child(8) { width: 70px; text-align: center; } /* 편집 */
.portfolio-items-table th:nth-child(9), .portfolio-items-table td:nth-child(9) { width: 70px; text-align: center; } /* 삭제 */

/* 관리자 - 편집/삭제 버튼 */
.edit-btn, .delete-btn { color: white !important; border: none !important; padding: 6px 10px !important; border-radius: 4px !important; cursor: pointer !important; display: inline-block !important; font-weight: bold !important; font-size: 0.85em; transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; }

.edit-btn { background-color: #007bff !important; margin-right: 5px !important; } 
.edit-btn:hover { background-color: #0056b3; transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.delete-btn { background-color: #dc3545 !important; } 
.delete-btn:hover { background-color: #c82333; transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* === 모달 스타일 === */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }

.modal-content { background-color: #fefefe; margin: 5% auto; padding: 25px; border: 1px solid #dee2e6; width: 85%; max-width: 700px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }

.close-modal { color: #aaa; float: right; font-size: 32px; font-weight: bold; cursor: pointer; line-height: 1; }

.close-modal:hover, .close-modal:focus { color: black; text-decoration: none; }

.modal h2 { margin-top: 0; margin-bottom: 25px; color: #343a40; }

/* === 파일 관리자 전용 스타일 === */
.controls-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: flex-end;
}

.refresh-btn, .stats-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.refresh-btn:hover {
    background: #229954;
}

.stats-btn {
    background: #3498db;
}

.stats-btn:hover {
    background: #2980b9;
}

.stats-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.stat-card h4 {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 0.9em;
}

.stat-number {
    font-size: 1.5em;
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
}

.folder-stats {
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
}

.folder-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}



.folder-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee; /* 탭 영역 구분을 위한 하단 선 추가 */
}

/* 폴더 탭 기본 스타일 (선택되지 않았을 때) */
.folder-tab {
    background-color: #f0f2f5; /* 흰색 대신 식별 가능한 연한 회색으로 변경 */
    color: #555;               /* 텍스트 색상 */
    border: 1px solid #d9dce1;  /* 연한 테두리 추가로 가시성 확보 */
    padding: 10px 18px;         /* 패딩 미세 조정 */
    margin: 5px 0;              /* 상하 마진 추가 */
    border-radius: 20px;        /* 좀 더 둥근 모서리 */
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease-in-out; /* 부드러운 전환 효과 */
}

/* 폴더 탭에 마우스를 올렸을 때 (활성이 아닐 때) */
.folder-tab:hover:not(.active) {
    background-color: #e4e6eb; /* 조금 더 진한 회색 */
    border-color: #ccc;
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* 현재 선택된(활성) 탭 스타일 */
.folder-tab.active {
    background-color: #0d6efd;  /* 활성 탭 파란색 (기존과 유사) */
    color: white;
    border-color: #0d6efd;      /* 테두리 색상 통일 */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

/* 파일 개수 표시용 span 스타일 */
.folder-tab .file-count {
    background-color: rgba(0, 0, 0, 0.08); /* 기본 탭에서는 어두운 배경 */
    color: #333;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
}

/* 활성 탭의 파일 개수 스타일 */
.folder-tab.active .file-count {
    background-color: rgba(255, 255, 255, 0.25); /* 활성 탭에서는 밝은 배경 */
    color: white;
}


.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.file-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.file-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.file-preview {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.file-preview img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.file-icon {
    color: #6c757d;
    flex-direction: column;
    text-align: center;
}

.hwp-icon {
    color: #e74c3c;
}

.loading-preview, .preview-error {
    color: #6c757d;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-error {
    color: #dc3545;
}

.file-info {
    text-align: center;
}

.file-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
    word-break: break-all;
    color: #2c3e50;
    line-height: 1.3;
}

.file-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.file-meta div {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.file-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.no-files, .no-folders {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 1.1em;
}

.no-files i {
    margin-bottom: 20px;
    color: #ddd;
}

.loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1em;
}

.error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #dc3545;
}

.error-message i {
    font-size: 3em;
    margin-bottom: 20px;
}

.retry-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.retry-btn:hover {
    background: #c82333;
}

/* === AI 채팅 아이콘 스타일 === */
#chat-icon { position: fixed; bottom: 30px; right: 30px; background-color: #007bff; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.3s ease; z-index: 1000; }

#chat-icon:hover { background-color: #0056b3; transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }

#chat-icon i { font-size: 24px; }

/* === 공개 보고서 페이지 버튼 스타일 === */
.portfolio-item-buttons .button {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: white !important; /* 링크 색상 강제 */
    padding: 10px 15px;
    margin-bottom: 8px; /* 버튼 간 간격 */
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s, transform 0.2s;
}

.portfolio-item-buttons .button:last-child {
    margin-bottom: 0;
}

.portfolio-item-buttons .button i {
    margin-right: 8px;
}

.portfolio-item-buttons .preview-btn {
    background-color: #007bff; /* 파란색 계열 */
}

.portfolio-item-buttons .preview-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.portfolio-item-buttons .download-btn {
    background-color: #28a745; /* 초록색 계열 */
}

.portfolio-item-buttons .download-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

/* === 공개 보고서 페이지 (www.ysparks.org) 레이아웃 스타일 === */
section#portfolio-gallery > div#portfolio-items-container.portfolio-items-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
    padding: 1rem;
}

/* 카드 아이템 스타일 */
.portfolio-item {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.portfolio-item .portfolio-item-image-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-item-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.4;
}

.portfolio-item-content p {
    flex-grow: 1;
    margin-bottom: 1.5rem;
    color: #495057;
}

.portfolio-item-buttons {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-top: auto;
}

.download-btn.full-width-btn {
    background-color: #28a745;
    color: white;
    width: 100%;
    display: block;
    text-align: center;
}

.download-btn.full-width-btn:hover {
    background-color: #218838;
}

/* === 푸터 스타일 === */
footer { margin-top: 40px; text-align: center; padding: 25px 0; color: #6c757d; border-top: 1px solid #e9ecef; font-size: 0.9em; }

/* === 반응형 스타일 === */
@media (max-width: 992px) {
    .portfolio-header-grid { grid-template-columns: 25% 50% 25%; }
    .portfolio-items-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

@media (max-width: 768px) {
    .portfolio-header-grid { grid-template-columns: 1fr; gap: 15px; }
    .admin-header .header-top-row { flex-direction: column; align-items: center; gap: 10px; }
    
    /* 메인 페이지 헤더 반응형 */
    #main-content .user-info {
        position: static;
        margin-top: 15px;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    
    #main-content .main-header { padding: 20px; text-align: center; min-height: auto; }
    #main-content .main-header h1 { font-size: 2.5em; }
    #main-content .main-header p.subtitle { font-size: 1.5em; }
    
    #chat-icon { width: 50px; height: 50px; font-size: 20px; bottom: 20px; right: 20px; }
    .admin-section { padding: 15px; }
    .portfolio-items-table { font-size: 0.9em; }
    .portfolio-items-table th, .portfolio-items-table td { padding: 8px 5px; }
    #portfolio-items-container { overflow-x: auto; }
    .portfolio-items-table { min-width: 800px; }
    
    /* 파일 관리자 반응형 */
    .file-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .file-actions {
        flex-direction: column;
    }
    
    .folder-tabs {
        justify-content: center;
    }
    
    .controls-bar {
        justify-content: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* workflow.html 파일 관리자 네비게이션 반응형 */
    .header-navigation {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .file-manager-nav-link {
        font-size: 1em;
        padding: 8px 15px;
    }
}

@media (max-width: 600px) {
    .portfolio-items-grid { grid-template-columns: 1fr; }
    .login-container { padding: 20px; margin: 30px auto; }
    .login-container .action-buttons { flex-direction: column; }
    .login-container .action-buttons button { width: 100%; }
    #main-content .main-header h1 { font-size: 2em; }
    #main-content .main-header p.subtitle { font-size: 1.2em; }
    .portfolio-header-title h2 { font-size: 2.2em; }
    .modal-content { width: 90%; margin: 10% auto; padding: 15px; }
}

/* 넓은 화면 복구 스타일 (769px 이상) */
@media (min-width: 769px) {
    #main-content .user-info {
        position: absolute;
        top: 10px;
        right: 30px;
        flex-direction: column;
        align-items: flex-end;
        width: auto;
    }
}

/* === workflow.html과 파일 관리자 전체 너비 설정 === */
#main-content .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 30px !important;
}

/* 파일 관리자 전체 너비 설정 */
body:has(.file-grid) .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 30px !important;
}

/* 관리자 페이지만 제한된 너비 유지 */
# admin-content:not(:has(.file-grid)) .container {
#    max-width: 1200px !important;
#    margin: 0 auto !important;
# }

/* === workflow.html용 파일 관리자 네비게이션 링크 스타일 === */
.header-navigation {
    margin-bottom: 10px;
}

.file-manager-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: rgba(70, 130, 180, 0.8);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.file-manager-nav-link:hover {
    background-color: rgba(70, 130, 180, 1);
    border-color: white;
    text-decoration: none;
    color: white !important;
    transform: translateY(-2px);
}

.file-manager-nav-link i {
    font-size: 1em;
}

/* === PDF 뷰어 및 파일 관리자 추가 스타일 === */
.file-actions .btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
}

.file-actions .btn-secondary:hover {
    background: #5a6268;
    border-color: #545b62;
}

/* 파일 미리보기 개선 */
.file-preview.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.file-preview.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 파일 관리자 에러 메시지 스타일 개선 */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.error-message i {
    color: #dc3545;
    margin-bottom: 15px;
}

/* 반응형: 파일 관리자 추가 개선 */
@media (max-width: 480px) {
    .file-card {
        padding: 15px;
    }
    
    .file-preview {
        height: 150px;
    }
    
    .file-name {
        font-size: 1em;
    }
    
    .controls-bar {
        flex-direction: column;
        align-items: center;
    }
    
    .refresh-btn, .stats-btn {
        width: 100%;
        max-width: 200px;
    }
}

/* PDF 모달 스타일 */
#pdf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.pdf-modal-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-modal-content {
    width: 90%;
    height: 90%;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.pdf-modal-header {
    padding: 15px 20px;
    background: #2c3e50;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.pdf-modal-header h3 {
    margin: 0;
    font-size: 1.1em;
}

.pdf-close-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.pdf-close-btn:hover {
    background: #c0392b;
}

.pdf-iframe {
    flex: 1;
    border: none;
    border-radius: 0 0 8px 8px;
}