/* support.html 전용 스타일 */

.page-title-container {
    display: grid;
    align-items: center;
    justify-content: center;
    height: 320px;
    background-image: 
    linear-gradient(rgba(30, 80, 180, 0.45), rgba(18, 55, 70, 0.35)),
    url('https://images.unsplash.com/photo-1462206092226-f46025ffe607?q=80&w=1748&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    padding-bottom: 24px;
}
.title-content .subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
}
.page-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 10px 0 8px 0;
}
.page-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.08rem;
  margin-bottom: 0;
}

.support-container {
    display: grid;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(30,80,180,0.08);
    padding: 40px 24px;
    margin-top: 32px;
    margin-bottom: 32px;
    animation: fadeUp 1s cubic-bezier(.4,0,.2,1) forwards;
    opacity: 0;
    transform: translateY(40px);
}
.support-section-title {
  color: #1976b6;
  font-size: 1.18rem;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  text-align: left;
}
.download-resource-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.download-resource-card {
  border-bottom: 1px solid #e3eaf3;
  padding-bottom: 18px;
  margin-bottom: 8px;
}
.download-resource-card:last-child {
  border-bottom: none;
}
.resource-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.resource-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.download-link {
  color: #1976b6;
  font-weight: 600;
  text-decoration: underline;
  font-size: 1.01rem;
  transition: color 0.2s;
}
.download-link span {
  color: #888;
  font-size: 0.97em;
  margin-left: 2px;
}
.download-link:hover {
  color: #2056a8;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .support-container {
    padding: 12px 2px;
  }
  .download-resource-list {
    gap: 18px;
  }
  .resource-title {
    font-size: 1.01rem;
  }
  .download-link {
    font-size: 0.97rem;
  }
}

/* 컨텐츠를 세로 중앙에 배치하기 위한 스타일 */
main#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 320px - 60px); /* 페이지 타이틀 높이와 푸터 높이를 제외한 최소 높이 */
}

footer#footer {
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* 편집 가능한 요소 스타일 */
.editable {
    position: relative;
}

/* 관리자 전용 편집 UI 스타일 */
.admin-editable {
    transition: background-color 0.2s;
}

.admin-editable:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.admin-editable[contenteditable="true"] {
    outline: 2px solid #1976d2;
    padding: 5px;
    border-radius: 4px;
    background-color: rgba(25, 118, 210, 0.05);
}

/* 편집 컨트롤 스타일 */
.edit-controls {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    gap: 8px;
    background: white;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.edit-controls button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.edit-controls button i {
    font-size: 14px;
}

.edit-controls .save-btn {
    background-color: #1976d2;
    color: white;
}

.edit-controls .save-btn:hover {
    background-color: #1565c0;
}

.edit-controls .cancel-btn {
    background-color: #f5f5f5;
    color: #333;
}

.edit-controls .cancel-btn:hover {
    background-color: #e0e0e0;
}

/* 다운로드 링크 편집 스타일 */
.admin-editable .download-link {
    position: relative;
}

.admin-editable .download-link:hover::after {
    content: '파일 변경';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* 알림 스타일 */
.notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 25px;
    border-radius: 8px;
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: fadeInOut 3s ease-in-out;
}

.notification.success {
    background-color: #4CAF50;
}

.notification.error {
    background-color: #f44336;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* 업로드 버튼 스타일 */
.file-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 6px;
    background-color: #f8f9fa;
}

.file-controls:hover {
    background-color: #e9ecef;
}

.file-controls .download-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.file-controls .download-link i {
    color: #666;
}

.file-actions {
    display: flex;
    gap: 12px;
}

.file-actions a,
.file-actions button {
    padding: 6px 12px;
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.file-actions a:hover,
.file-actions button:hover {
    background-color: #e9ecef;
    color: #333;
}

.file-actions .view-btn:hover {
    color: #0d6efd;
}

.file-actions .download-btn:hover {
    color: #198754;
}

.file-actions .delete-btn:hover {
    color: #dc3545;
}

.upload-btn {
    padding: 6px 12px;
    border: 1px solid #0d6efd;
    background: none;
    color: #0d6efd;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin-left: 12px;
}

.upload-btn:hover {
    background-color: #0d6efd;
    color: white;
}

.file-actions .admin-only {
    display: none;
}

.admin-mode .file-actions .admin-only,
.admin-mode .upload-btn {
    display: inline-block;
}

/* 관리자 전용 요소 표시 */
.admin-only {
    display: none !important;
}

.admin-mode .admin-only {
    display: inline-flex !important;
}

/* 업로드 정보 스타일 */
.upload-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: #e3f2fd;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #1976d2;
}

.upload-info i {
    font-size: 1.1rem;
}

.upload-info span {
    line-height: 1.4;
}