/* support/style.css */

/* --- 공통 레이아웃 보정 --- */
.support-layout {
    max-width: 900px; /* 게시판은 너무 넓으면 읽기 힘드므로 폭 제한 */
    margin: 0 auto;
    width: 100%;
}

/* --- 사이드바 버튼 --- */
.btn-back-main {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; margin-top: 30px;
    background: #27272a; color: #fff;
    text-decoration: none; border-radius: 8px; font-weight: 700; font-size: 14px;
    border: 1px solid #3f3f46; transition: all 0.2s;
}
.btn-back-main:hover { background: #3f3f46; border-color: #71717a; }

.guidelines {
    margin-top: 30px; padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px; border: 1px solid #333;
}
.guidelines h4 { margin: 0 0 10px 0; color: var(--accent); font-size: 14px; }
.guidelines ul { margin: 0; padding-left: 20px; color: #a1a1aa; font-size: 12px; line-height: 1.6; }

/* --- 1. 글쓰기 섹션 --- */
.write-section { margin-bottom: 40px; }
.write-section h3 { font-size: 18px; margin-bottom: 15px; color: #fff; border-left: 4px solid var(--accent); padding-left: 10px; }

.write-card {
    background: #1e1e24; border: 1px solid #333; border-radius: 12px; padding: 20px;
}

.form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.custom-select {
    width: 130px; padding: 12px; background: #121214; border: 1px solid #444; color: #fff; border-radius: 6px; font-weight: bold;
}
.custom-input {
    flex: 1; padding: 12px; background: #121214; border: 1px solid #444; color: #fff; border-radius: 6px;
}
.custom-textarea {
    width: 100%; height: 120px; padding: 12px; background: #121214; border: 1px solid #444; color: #fff; border-radius: 6px; resize: vertical; font-family: inherit; margin-bottom: 15px;
}
.custom-input:focus, .custom-textarea:focus, .custom-select:focus { outline: none; border-color: var(--accent); }

.form-footer { display: flex; justify-content: space-between; align-items: center; }
.info-text { font-size: 12px; color: #666; }
.btn-submit {
    background: var(--accent); color: #000; font-weight: 800; padding: 10px 25px; border: none; border-radius: 6px; cursor: pointer; transition: transform 0.2s;
}
.btn-submit:hover { transform: translateY(-2px); background: #e6c200; }

/* --- 2. 게시글 리스트 섹션 --- */
.board-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.tab-btn {
    background: transparent; border: none; color: #71717a; font-weight: 600; padding: 8px 12px; cursor: pointer; border-radius: 6px; font-size: 14px;
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.tab-btn.active { color: var(--accent); background: rgba(255, 215, 0, 0.1); }
.tab-btn .count { font-size: 11px; background: #333; padding: 2px 6px; border-radius: 10px; margin-left: 4px; color: #ccc; }

.board-list { display: flex; flex-direction: column; gap: 15px; }

/* 게시글 카드 디자인 */
.issue-card {
    background: #252529; border: 1px solid #3f3f46; border-radius: 10px; padding: 20px; transition: border-color 0.2s;
}
.issue-card:hover { border-color: #555; }

/* 완료된 카드는 약간 어둡게 처리 */
.issue-card.done { border-color: #276f44; background: #1a201c; }
.issue-card.done .issue-title { text-decoration: line-through; color: #71717a; }

.issue-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.issue-title { margin: 0; font-size: 16px; color: #fff; flex: 1; }

/* 상태 배지 */
.badge { font-size: 11px; padding: 4px 8px; border-radius: 4px; font-weight: 800; color: #000; }
.badge-waiting { background: #71717a; color: #fff; } /* 회색 */
.badge-working { background: #60a5fa; color: #000; } /* 파랑 */
.badge-done { background: #4ade80; color: #000; }    /* 초록 */

/* 카테고리 태그 */
.badge-category { font-size: 11px; color: #aaa; padding: 2px 6px; border: 1px solid #444; border-radius: 4px; }
.badge-category.bug { color: #f87171; border-color: rgba(248,113,113,0.3); }
.badge-category.feature { color: #facc15; border-color: rgba(250,204,21,0.3); }

.issue-meta { font-size: 12px; color: #52525b; margin-bottom: 12px; }
.issue-body { font-size: 14px; color: #e4e4e7; line-height: 1.5; white-space: pre-wrap; }

/* 관리자 답변 스타일 */
.admin-reply {
    margin-top: 15px; background: rgba(255, 215, 0, 0.05);
    border-left: 3px solid var(--accent); padding: 12px; border-radius: 0 6px 6px 0;
}
.admin-profile { font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.admin-reply p { margin: 0; font-size: 13px; color: #d4d4d8; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .support-layout { padding: 15px; }
    .form-row { flex-direction: column; }
    .custom-select, .custom-input { width: 100%; }
    .issue-header { align-items: flex-start; }
    .issue-title { font-size: 15px; margin-top: 5px; width: 100%; }
}

/* support/style.css 맨 아래에 추가 */

/* 관리자 전용 미니 버튼들 */
.btn-mini {
    background: #333;
    border: 1px solid #555;
    color: #ccc;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.btn-mini:hover { background: #555; color: #fff; }

.btn-mini-del {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.btn-mini-del:hover { background: rgba(239, 68, 68, 0.4); color: #fff; }

/* style.css 기존 내용 아래에 추가 */

/* --- 추가 기능 스타일 --- */

/* 1. 완료된 항목 접기/펼치기 버튼 */
.btn-toggle-view {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: #27272a;
    border: 1px dashed #444;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.2s;
}
.btn-toggle-view:hover {
    background: #333;
    color: #fff;
    border-color: #666;
}

/* 2. 추가 댓글(대화) 리스트 */
.comments-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #333;
}
.comment-item {
    background: #18181b;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #333;
}
.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11px;
    color: #71717a;
}
.comment-author {
    font-weight: bold;
    color: #d4d4d8;
}
.comment-author.is-admin {
    color: #ffd700; /* 관리자는 금색 */
}
.comment-body {
    font-size: 13px;
    color: #e4e4e7;
    white-space: pre-wrap;
}

/* 3. 댓글 입력창 (작성자용) */
.comment-input-area {
    margin-top: 10px;
    display: flex;
    gap: 5px;
}
.input-mini-comment {
    flex: 1;
    background: #121214;
    border: 1px solid #444;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 13px;
}

/* 4. 답변 수정 모드 */
.edit-textarea {
    width: 100%;
    height: 80px;
    background: #000;
    border: 1px solid #ffd700;
    color: #fff;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
}

/* 채팅 스타일 레이아웃 */
.chat-body { display: flex; flex-direction: column; gap: 12px; padding: 15px; }

.bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; position: relative; font-size: 14px; }
.bubble.user { align-self: flex-end; background: #3b82f6; color: white; border-bottom-right-radius: 2px; }
.bubble.admin { align-self: flex-start; background: #27272a; color: #e4e4e7; border-bottom-left-radius: 2px; border: 1px solid #3f3f46; }

/* 시스템 메시지 (2026 스타일) */
.system-msg { align-self: center; font-size: 11px; color: #71717a; background: rgba(255,255,255,0.05); padding: 4px 12px; border-radius: 20px; margin: 10px 0; }

/* 이미지 프리뷰 그리드 */
.preview-grid { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.preview-item { position: relative; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; border: 1px solid #444; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.btn-remove-img { position: absolute; top: 0; right: 0; background: rgba(0,0,0,0.7); color: white; border: none; cursor: pointer; }

/* 네온 배지 */
.neon-badge { padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; text-shadow: 0 0 5px rgba(255,255,255,0.2); }
.neon-badge.waiting { background: #52525b; color: #fff; }
.neon-badge.working { background: #fbbf24; color: #000; box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
.neon-badge.done { background: #10b981; color: #fff; box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }

/* --- Premium Chat Style (2026 Ver.) --- */

/* 1. 컨테이너 & 헤더 */
.chat-container {
    background: #18181b; /* 더 짙은 배경 */
    border: 1px solid #3f3f46;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #27272a;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.chat-title { margin: 0; font-size: 16px; font-weight: 700; color: #f4f4f5; }

/* 2. 말풍선 레이아웃 (Bubble Row) */
.bubble-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-end; /* 시간표시를 말풍선 하단에 맞춤 */
}
.bubble-row.user { justify-content: flex-end; }
.bubble-row.admin { justify-content: flex-start; }

/* 3. 말풍선 디자인 (Bubble) */
.bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 유저 말풍선 (Blue Gradient) */
.bubble.user {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border-bottom-right-radius: 2px; /* 꼬리 느낌 */
}

/* 관리자/상대방 말풍선 (Dark Gray) */
.bubble.admin {
    background: #27272a;
    color: #e4e4e7;
    border: 1px solid #3f3f46;
    border-bottom-left-radius: 2px; /* 꼬리 느낌 */
}

/* 공식 답변 강조 스타일 */
.bubble.official {
    border: 1px solid #ffd700;
    background: rgba(255, 215, 0, 0.05);
}
.admin-badge {
    font-size: 11px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 5px;
    display: block;
}

/* 시간 표시 */
.bubble-time {
    font-size: 11px;
    color: #71717a;
    margin-bottom: 2px;
    min-width: 60px;
}
.bubble-row.user .bubble-time { text-align: right; }

/* 4. 시스템 메시지/구분선 */
.system-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.system-divider span {
    background: #27272a;
    color: #a1a1aa;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #3f3f46;
}

/* 5. 완료된 항목 요약 카드 (Collapsed) */
.collapsed-card {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.7;
}
.collapsed-card:hover {
    background: #27272a;
    opacity: 1;
    border-color: #3f3f46;
}
.collapsed-left { display: flex; align-items: center; gap: 10px; }
.collapsed-title { color: #a1a1aa; font-size: 14px; text-decoration: line-through; }
.collapsed-date { font-size: 12px; color: #52525b; margin-right: 10px; }

/* 6. 이미지 그리드 */
.chat-images-grid {
    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.img-box {
    width: 60px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
}
.img-box img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.2s; }
.img-box img:hover { transform: scale(1.1); }

/* --- Toast Notification (실시간 알림) --- */
.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast-message {
    background: rgba(39, 39, 42, 0.95);
    border: 1px solid #ffd700;
    color: #fff;
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    
    /* 애니메이션: 스르륵 올라오기 */
    transform: translateY(100px);
    opacity: 0;
    animation: slideUp 0.3s forwards ease-out;
}

.toast-message:hover {
    background: #3f3f46;
}

.toast-icon { font-size: 18px; }

@keyframes slideUp {
    to { transform: translateY(0); opacity: 1; }
}

/* --- Admin Control Panel --- */
.admin-controls-wrapper {
    background: rgba(255, 215, 0, 0.05); /* 금색 배경 은은하게 */
    border: 1px dashed #ffd700;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.status-btn-group {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.admin-label { font-size: 12px; color: #ffd700; font-weight: bold; margin-right: 5px; }

.status-btn-group button {
    background: #27272a;
    border: 1px solid #444;
    color: #888;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}
.status-btn-group button.active {
    background: #ffd700;
    color: #000;
    font-weight: bold;
    border-color: #ffd700;
}

.admin-reply-box {
    display: flex;
    gap: 8px;
}
.admin-reply-box textarea {
    flex: 1;
    background: #18181b;
    border: 1px solid #444;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    height: 40px; /* 초기 높이 작게 */
    resize: vertical;
}
.btn-admin-action {
    background: #ffd700;
    color: #000;
    border: none;
    font-weight: bold;
    padding: 0 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* 댓글 입력창 스타일 */
.comment-input-area {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #27272a;
    display: flex;
    gap: 8px;
}
.comment-input-area input {
    flex: 1;
    background: #18181b;
    border: 1px solid #3f3f46;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
}
.comment-input-area button {
    background: #3f3f46;
    color: #fff;
    border: none;
    padding: 0 15px;
    border-radius: 6px;
    cursor: pointer;
}
.comment-input-area button:hover { background: #52525b; }

/* support/style.css 맨 아래 추가 */

/* [접기/펼치기] 버튼 스타일 */
.btn-toggle-fold {
    background: #27272a;       /* 어두운 배경 */
    border: 1px solid #52525b; /* 은은한 테두리 */
    color: #a1a1aa;            /* 텍스트 색상 */
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;          /* 왼쪽 요소와 간격 */
}

/* 마우스 올렸을 때 (Hover) */
.btn-toggle-fold:hover {
    background: #fff;          /* 흰색 배경으로 반전 */
    color: #000;               /* 검은 글씨 */
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* 살짝 빛나는 효과 */
}

/* --- [타임라인 스타일 (Final)] --- */

/* 1. 기본 레이아웃 (무조건 왼쪽 정렬) */
.bubble-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 왼쪽 정렬 */
    margin-bottom: 12px;
    width: 100%;
}
.bubble-row.user, .bubble-row.admin { justify-content: flex-start; } /* 기존 정렬 무시 */

/* 2. 말풍선 디자인 (회색 박스 통일) */
.bubble {
    background: #27272a !important;      /* 회색 배경 */
    border: 1px solid #3f3f46 !important;
    color: #e4e4e7 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    
    width: fit-content !important;       /* 글자만큼만 크기 차지 */
    max-width: 90% !important;
    
    position: relative;
    box-shadow: none !important;         /* 그림자 제거 */
}

/* 3. 관리자만 살짝 강조 (선택) */
.bubble.admin {
    background: rgba(234, 179, 8, 0.05) !important; /* 아주 연한 노랑 */
    border-color: #eab308 !important;
}

/* 4. 헤더 (작성자 + 날짜) */
.bubble-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #a1a1aa;
}
.bubble-author { font-weight: bold; color: #e4e4e7; }
.bubble.admin .bubble-author { color: #ffd700; } /* 관리자는 금색 이름 */
.bubble-date { font-size: 11px; color: #666; }

/* 5. 본문 내용 */
.bubble-content {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap; /* 줄바꿈은 유지하되, 위에서 공백을 없앴으므로 밀림 없음 */
}

/* 기존 파란색 그라데이션 제거를 위한 강제 초기화 */
.bubble.user { background: #27272a !important; color: #e4e4e7 !important; }

/* ============================================
   [NEW] 반려 상태 스타일
   ============================================ */

/* 반려 배지 */
.neon-badge.rejected {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* 관리자 패널 반려 버튼 */
.status-btn-group button:last-child {
    background: #dc2626 !important;
    border-color: #991b1b !important;
}

.status-btn-group button:last-child:hover {
    background: #b91c1c !important;
}

.status-btn-group button:last-child.active {
    background: #991b1b !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* 접힌 카드 반려 상태 */
.collapsed-card:has(.neon-badge.rejected) {
    border-left: 3px solid #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

/* 수정 모드 스타일 */
.edit-mode-container {
    padding: 10px;
}

.edit-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: #1a1a1e;
    border: 1px solid #3f3f46;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    resize: vertical;
}

.edit-textarea:focus {
    outline: none;
    border-color: #ffd700;
}

.edit-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-end;
}

.btn-save-edit {
    padding: 8px 20px;
    background: #ffd700;
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.btn-save-edit:hover {
    background: #e6c200;
}

.btn-cancel-edit {
    padding: 8px 20px;
    background: #3f3f46;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-cancel-edit:hover {
    background: #52525b;
}

/* ============================================
   이미지 뷰어 모달 스타일
   support/style.css 맨 끝에 추가
   ============================================ */

/* 이미지 썸네일 hover 효과 */
.chat-images-grid .img-box img {
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.chat-images-grid .img-box img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* 이미지 뷰어 모달 */
.image-viewer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.image-viewer-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 배경 오버레이 */
.viewer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

/* 뷰어 컨테이너 */
.viewer-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 95vw;
    max-height: 95vh;
    z-index: 1;
}

/* 이미지 영역 */
.viewer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 85vh;
}

.viewer-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* 닫기 버튼 */
.viewer-close {
    position: fixed;
    top: 20px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* 네비게이션 버튼 (이전/다음) */
.viewer-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.viewer-nav:hover {
    background: rgba(255, 215, 0, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.viewer-prev {
    left: 30px;
}

.viewer-next {
    right: 30px;
}

/* 이미지 카운터 */
.viewer-counter {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .viewer-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .viewer-nav {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .viewer-prev {
        left: 10px;
    }
    
    .viewer-next {
        right: 10px;
    }
    
    .viewer-counter {
        bottom: 20px;
        padding: 8px 20px;
        font-size: 12px;
    }
}

/* ============================================
   이미지 뷰어 모달 스타일
   support/style.css 맨 끝에 추가
   ============================================ */

/* 이미지 썸네일 - 강제 적용 */
.chat-images-grid .img-box {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.chat-images-grid .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.chat-images-grid .img-box img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* 이미지 뷰어 모달 */
.image-viewer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.image-viewer-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 배경 오버레이 */
.viewer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

/* 뷰어 컨테이너 */
.viewer-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 95vw;
    max-height: 95vh;
    z-index: 1;
}

/* 이미지 영역 */
.viewer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 85vh;
}

.viewer-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* 닫기 버튼 */
.viewer-close {
    position: fixed;
    top: 20px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* 네비게이션 버튼 (이전/다음) */
.viewer-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.viewer-nav:hover {
    background: rgba(255, 215, 0, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.viewer-prev {
    left: 30px;
}

.viewer-next {
    right: 30px;
}

/* 이미지 카운터 */
.viewer-counter {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .viewer-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .viewer-nav {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .viewer-prev {
        left: 10px;
    }
    
    .viewer-next {
        right: 10px;
    }
    
    .viewer-counter {
        bottom: 20px;
        padding: 8px 20px;
        font-size: 12px;
    }
}