/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #f5f5f5;
    box-shadow: 0 4px 15px rgba(30, 164, 89, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    color: #f5f5f5;
    box-shadow: 0 6px 25px rgba(30, 164, 89, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border-light);
}

.btn-secondary:hover {
    background: var(--glass-bg-light);
    border-color: rgba(30, 164, 89, 0.3);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--danger);
    color: #fcfcfc;
}

.btn-danger:hover {
    background: var(--danger-dark);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.8rem;
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group label .required {
    color: var(--danger);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px var(--spacing-md);
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(30, 164, 89, 0.15), var(--neon-glow-sm);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-hint {
    margin-top: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-dark);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* ===== AUTH PAGES ===== */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    min-height: 60vh;
}

.auth-box {
    background: var(--glass-bg);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-glass);
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.auth-header {
    background: linear-gradient(135deg, rgba(30, 164, 89, 0.1) 0%, rgba(30, 164, 89, 0.05) 100%);
    padding: var(--spacing-xl);
    text-align: center;
    border-bottom: 1px solid rgba(30, 164, 89, 0.2);
}

.auth-header h1 {
    font-size: 1.5rem;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-xs);
}

.auth-header p {
    font-size: 0.9rem;
    color: var(--text-dark);
}

.auth-body {
    padding: var(--spacing-xl);
}

.auth-footer {
    padding: var(--spacing-md) var(--spacing-xl);
    text-align: center;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-dark);
    font-size: 0.9rem;
    color: var(--text-dark);
}

.auth-footer a {
    color: var(--accent-primary);
    font-weight: 600;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-gray);
    cursor: pointer;
    margin-bottom: 0 !important;
}

.checkbox-label input[type="checkbox"] {
    width: auto !important;
    margin: 0;
    flex-shrink: 0;
}

/* ===== PAGE HEADER ===== */
.page-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-dark);
    padding: var(--spacing-md) 0;
    text-align: center;
}

.page-header h1 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb a:hover {
    color: var(--accent-primary);
}

/* ===== PAGE CONTENT ===== */
.page-content {
    padding: var(--spacing-lg) 0;
    background: var(--bg-primary);
}

/* 게시글 보기 페이지 - 사이드바와 상단 정렬 */
.page-content.view-page {
    padding-top: var(--spacing-md);
}

/* ===== BOARD CONTAINER ===== */
.board-container {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
}

.board-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--border-dark);
}

.board-info {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.board-info strong {
    color: var(--text-primary);
}

.board-table {
    width: 100%;
    border-collapse: collapse;
}

.board-table th {
    background: linear-gradient(135deg, rgba(30, 164, 89, 0.08) 0%, rgba(30, 164, 89, 0.04) 100%);
    padding: 14px var(--spacing-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary) !important;
    text-align: center;
    border-bottom: 2px solid var(--border-dark);
    border-right: 1px solid var(--border-dark);
}

.board-table th:last-child {
    border-right: none;
}

.board-table th.col-title {
    text-align: left;
}

.board-table td {
    padding: 14px var(--spacing-md);
    font-size: 0.95rem;
    color: var(--text-secondary);
    background: #ffffff;
    border-bottom: 1px solid var(--border-dark);
    border-right: 1px solid var(--border-dark);
    text-align: center;
}

.board-table td:last-child {
    border-right: none;
}

.board-table tr:hover td {
    background: var(--bg-hover);
}

.board-table .empty-cell {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

.board-table .col-date {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.board-table .col-num {
    text-align: center;
    color: #1ea459;
    font-size: 0.85rem;
    font-weight: 500;
}

.board-table .col-views {
    text-align: center;
    color: var(--accent-blue);
    font-weight: 500;
    white-space: nowrap;
    min-width: 70px;
    width: 70px;
    padding-left: 6px;
    padding-right: 6px;
}
.board-table th.col-views {
    white-space: nowrap;
}

.board-table .col-author {
    vertical-align: middle;
    text-align: center;
    color: var(--accent-primary);
    font-weight: 500;
    white-space: nowrap;
    min-width: 150px;
}

.board-table .title-cell {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-table .title-cell .title-text {
    display: inline;
    color: var(--text-primary);
    font-weight: 500;
}

/* 행 어디에 올려도 제목색 변경 (라이트/다크 공통) — 구 .title-text:hover 는 글자에 정확히
   올려야만 발동해 "제목만 hover 안 먹는 느낌"이었음. 다크는 아래 [data-theme] 규칙이 더 밝은 틸로 덮음. */
.board-table tr:hover .title-cell .title-text {
    color: var(--accent-primary);
}

.board-table .title-cell .mobile-author,
.board-table .title-cell .mobile-date {
    display: none;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
}

.pagination button,
.pagination a {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-gray);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.pagination button:hover,
.pagination a:hover {
    background: var(--glass-bg-light);
    color: var(--accent-primary);
    border-color: rgba(30, 164, 89, 0.3);
}

.pagination button.active,
.pagination a.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #f5f5f5;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 15px rgba(30, 164, 89, 0.3);
}

.board-search {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--bg-primary);
}

.board-search select,
.board-search input {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-size: 0.9rem;
}

.board-search input {
    width: 240px;
}

/* ===== WRITE FORM ===== */
.write-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.form-header {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-bottom: 2px solid var(--accent-primary);
}

.form-header h2 {
    font-size: 1rem;
    color: var(--accent-primary);
}

.form-body {
    padding: var(--spacing-xl);
}

.form-body textarea {
    min-height: 250px;
    resize: vertical;
}

/* ===== VIEW POST ===== */
.view-container {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.view-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-dark);
}

.view-header h1 {
    font-size: 1.4rem;
    color: var(--text-primary);
    line-height: 1.5;
    font-weight: 600;
}

.view-meta {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-dark);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* 현금 전환 이벤트 승인 패널 (관리자) */
.cash-approval-panel {
    margin: 12px 18px 0;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.cash-approval-panel.pending {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.32);
}
.cash-approval-panel.approved {
    background: rgba(30, 164, 89, 0.08);
    border: 1px solid rgba(30, 164, 89, 0.32);
}
.cash-approval-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cash-approval-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 0.82rem;
    font-weight: 700;
}
.cash-approval-badge.approved { background: rgba(30, 164, 89, 0.20); color: #1ea459; border: 1px solid rgba(30, 164, 89, 0.45); }
.cash-approval-badge.pending  { background: rgba(245, 158, 11, 0.20); color: #a16207; border: 1px solid rgba(245, 158, 11, 0.45); }
.cash-approval-meta { color: var(--text-secondary); font-size: 0.86rem; }
.btn-cash-approve {
    padding: 8px 18px;
    background: linear-gradient(90deg, #1ea459, #6db142);
    color: #f5f5f5;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: 0 0 10px rgba(30, 164, 89, 0.3);
}
.btn-cash-approve:hover { transform: translateY(-1px); box-shadow: 0 0 14px rgba(30, 164, 89, 0.5); }

.view-content {
    padding: var(--spacing-lg);
    min-height: 200px;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* 본문 안에 float:left/right 이미지가 있어도 하단 형제 요소(reaction-buttons 등)의
   위치가 흐트러지지 않도록 본문을 float 컨테이너로 격리 */
.view-content::after {
    content: '';
    display: block;
    clear: both;
}

/* 본문/에디터의 단락(<p>) 단위로 float 이미지를 가두어, 다음 단락이
   이미지 옆으로 붙지 않고 자연스럽게 아래 줄로 내려가도록 처리.
   (실장님 요구: 이미지 25% 4장 가로 나열, 50% 2장 가로 나열 → 다음 줄로 내림)
   .note-editable 셀렉터는 Summernote 에디터 내부 영역으로, 작성 시점에도 동일한 미리보기 제공. */
.view-content p::after,
.view-content div::after,
.note-editable p::after,
.note-editable div::after {
    content: '';
    display: table;
    clear: both;
}

/* <br clear="all"> 대체: CSS로 br에 clear 적용 (브라우저 호환 fallback) */
.view-content br.clear,
.note-editable br.clear {
    display: block;
    clear: both;
    content: '';
}

.view-actions {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-dark);
}

/* ===== COMMENTS ===== */
.comments-section {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    margin-top: var(--spacing-lg);
}

.comments-header {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-dark);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-primary);
}
.comments-header .comments-header-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.comments-header .comments-count-text {
    white-space: nowrap;
}
.btn-jump-comment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(30, 164, 89, 0.1);
    border: 1px solid rgba(30, 164, 89, 0.4);
    border-radius: 4px;
    color: var(--accent-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-jump-comment:hover {
    background: rgba(30, 164, 89, 0.22);
    border-color: var(--accent-primary);
    color: #1ea459;
}
.btn-jump-comment:active {
    transform: scale(0.9);
}
.btn-jump-comment svg {
    width: 11px;
    height: 11px;
    display: block;
}

.comment-list {
    list-style: none;
}

.comment-item {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-dark);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
}

.comment-author {
    font-weight: 600;
    color: var(--accent-primary);
}

.comment-date {
    color: var(--text-dark);
}

/* 댓글/대댓글 럭키포인트 지급 배지 — 라이트/다크 모두 시인성 확보 */
.lucky-point-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: #15803d;
    background: rgba(30, 164, 89, 0.12);
    border: 1px solid rgba(30, 164, 89, 0.30);
    border-radius: 999px;
    white-space: nowrap;
}
[data-theme="dark"] .lucky-point-badge {
    color: #5ee9a8;
    background: rgba(20, 184, 166, 0.16);
    border-color: rgba(20, 184, 166, 0.40);
}

.comment-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-line; /* 댓글 줄바꿈(\n) 보존 — 매크로 답변 등 여러 줄 안내가 한 줄로 뭉개지지 않게 (2026-06-28) */
}
/* 운영진 삭제(soft) 댓글 — 관리자에게만 보이며 취소선 히스토리로 표시 (2026-06-30). 일반회원은 prune되어 아예 안 보임. */
.comment-content.comment-deleted { text-decoration: line-through; opacity: 0.55; }
.comment-content.comment-deleted .deleted-mark { text-decoration: none; color: #ef4444; font-weight: 700; font-size: 0.8rem; margin-right: 4px; }

.comment-form {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-primary);
}

.comment-form textarea {
    width: 100%;
    height: 100px;
    padding: var(--spacing-md);
    background: var(--bg-input);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font-size: 0.9rem;
    resize: none;
    margin-bottom: var(--spacing-md);
}

/* 답글(대댓글) 입력 폼 — 겉 컨테이너(A) 자체를 레이아웃에서 제거.
   display:contents 로 .reply-form 박스는 렌더링하지 않고, 안의 입력칸(B)·버튼(C)만 흐름에 남긴다.
   숨김/표시는 hidden 속성으로 토글(showReplyForm/hideReplyForm). */
.reply-form {
    display: contents;
}

.reply-form[hidden] {
    display: none;
}

.reply-form textarea {
    width: 100%;
    min-height: 56px;
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font-size: 0.9rem;
    resize: vertical;
    box-sizing: border-box;
}

.reply-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.comment-form-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.comment-form-row input {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-input);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font-size: 0.9rem;
    width: 150px;
}

/* ===== REPORT DETAIL ===== */
.report-detail-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.report-detail-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-dark);
}

.report-detail-header h1 {
    font-size: 1.3rem;
    margin: var(--spacing-sm) 0;
}

.report-meta {
    display: flex;
    gap: var(--spacing-lg);
    font-size: 0.85rem;
    color: var(--text-dark);
}

.report-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.report-badge.danger {
    background: var(--danger);
    color: #fcfcfc;
}

.report-detail-body {
    padding: var(--spacing-xl) var(--spacing-lg);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.info-item {
    background: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
}

.info-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item span {
    font-size: 1rem;
    color: var(--text-light);
}

.info-item .damage-amount {
    color: var(--danger);
    font-weight: 700;
}

.description-section {
    margin-bottom: var(--spacing-xl);
}

.description-section h3 {
    font-size: 1rem;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-dark);
}

.description-section p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-gray);
}

.images-section h3 {
    font-size: 1rem;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-dark);
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gallery-item img:hover {
    border-color: var(--accent-primary);
    transform: scale(1.02);
}

.report-detail-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-dark);
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--glass-bg-dark);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(30, 164, 89, 0.1) 0%, rgba(30, 164, 89, 0.05) 100%);
    border-bottom: 1px solid rgba(30, 164, 89, 0.2);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition-fast);
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-light);
}

.modal-body {
    padding: var(--spacing-lg);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Large Tablet / Small Desktop */
@media (max-width: 1400px) {
    .main-layout {
        grid-template-columns: 220px 1fr 280px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .main-layout {
        grid-template-columns: 1fr;
    }

    .left-sidebar {
        display: none;
    }

    .right-sidebar {
        display: none;
    }

    .scam-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet - 햄버거 메뉴 전환 */
@media (max-width: 1024px) {
    /* 헤더 우측 영역: 검색창만 숨기고 로또 버튼은 햄버거 왼쪽에 노출 (텍스트 포함) */
    .header > .container > .header-right {
        display: flex !important;
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        gap: 0;
    }

    .search-box {
        display: none !important;
    }

    /* 랜덤로또 버튼: 햄버거 메뉴 바로 왼쪽, 아이콘 + 텍스트 모두 노출 */
    .lotto-header-btn {
        display: flex !important;
        align-items: center;
        gap: 4px;
        padding: 4px !important;
    }
    .lotto-header-text {
        display: inline !important;
        font-size: 13px !important;
        margin-left: 2px !important;
        letter-spacing: 0.2px !important;
    }
    .lotto-icon {
        width: 26px !important;
        height: 26px !important;
    }

    /* 매우 좁은 화면(폴드 등): 텍스트 더 줄여서 햄버거와 겹침 방지 */
    @media (max-width: 380px) {
        .lotto-header-text {
            font-size: 11px !important;
        }
        .lotto-icon {
            width: 22px !important;
            height: 22px !important;
        }
    }

    /* 햄버거 메뉴 표시 */
    .mobile-menu-btn {
        display: flex;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .header .container {
        position: relative;
    }

    .header .logo {
        margin: 0;
        padding: 0 0 0 10px;
        text-align: left;
    }

    /* 모바일 사이드 메뉴 표시 — flex column + 세로 스크롤 */
    .mobile-nav {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    /* flex 항목들이 자기 콘텐츠 높이만큼 차지하도록 — 그래야 #mobile-nav-user 가 잘리지 않고 같이 밀려서 스크롤됨 */
    .mobile-nav > * {
        flex-shrink: 0;
    }

    /* 데스크탑 네비게이션 숨김 */
    .desktop-nav {
        display: none;
    }

    /* 모바일 메뉴 사용자 정보 개선 (1024px부터 적용) */
    .mobile-nav-user {
        flex-direction: column;
        gap: 6px;
        padding: 6px 12px;
    }

    .mobile-user-info {
        width: 100%;
        flex-wrap: nowrap;
    }

    .mobile-user-quick-links {
        width: 100%;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .mobile-user-quick-links a {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        padding: 8px 6px;
        font-size: 11px;
    }
}

/* Mobile Large */
@media (max-width: 768px) {
    /* 모바일 전체 패딩 최소화 */
    .container {
        padding: 0 3px 0 0;
    }

    /* 헤더 모바일 */
    .header {
        padding: 12px 0;
    }

    .header .container {
        padding: 0 3px 0 0;
        justify-content: flex-start;
    }

    .header .logo {
        flex: none;
        text-align: left;
    }

    .header .logo-title {
        font-size: 18px;
    }

    .header .logo-sub {
        display: none;
    }

    .header .logo-img {
        height: 60px;
        max-width: 260px;
    }

    /* 페이지 헤더/컨텐츠 모바일 */
    .page-header {
        padding: 8px 0;
    }

    .breadcrumb {
        display: none;
    }

    /* 메인 레이아웃 1컬럼 */
    .main-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* 사이드바 숨김 */
    .left-sidebar {
        display: none;
    }

    .right-sidebar {
        display: none;
    }

    /* 통계 2x2 그리드 */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-box {
        padding: var(--spacing-md);
    }

    .stat-value {
        font-size: 1.5rem;
    }

    /* 공지 배너 */
    .notice-banner {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* 스캠 그리드 */
    .scam-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* 게시판 박스 */
    .board-box {
        margin-bottom: var(--spacing-md);
    }

    /* 배너 크기 조정 */
    .header-banner-item img,
    .footer-banner-item img {
        height: 80px;
    }

    /* 푸터 간소화 */
    .footer .container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-links {
        justify-content: center;
    }

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

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

    .image-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .board-toolbar {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
    }

    .board-search {
        flex-direction: column;
        padding: var(--spacing-sm) 0;
    }

    .board-search input {
        width: 100%;
    }

    /* 모바일 게시판 테이블 */
    .board-table .col-num,
    .board-table .col-author,
    .board-table .col-date,
    .board-table .col-views,
    .board-table thead {
        display: none;
    }

    .board-table {
        border: none;
    }

    .board-table tr {
        display: block;
        padding: var(--spacing-sm) var(--spacing-md);
        border-bottom: 1px solid var(--border-dark);
    }

    .board-table td {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
    }

    .board-table .title-cell {
        max-width: 100%;
        white-space: normal;
    }

    .board-table .title-cell .title-text {
        display: block;
        font-size: 0.95rem;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .board-table .title-cell .notice-badge {
        margin-bottom: 4px;
    }

    /* 모바일 카드 형태에서 title-cell이 row 영역이 되므로 작성일을 우측 하단에 절대 배치 */
    .board-table tr {
        position: relative;
    }

    .board-table .title-cell {
        padding-right: 78px; /* 우측 mobile-date 공간 확보 */
    }

    .board-table .title-cell .mobile-author {
        display: inline-block;
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 4px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .board-table .title-cell .mobile-date {
        display: inline-block;
        position: absolute;
        right: var(--spacing-md);
        bottom: var(--spacing-sm);
        font-size: 0.72rem;
        color: var(--text-muted);
        white-space: nowrap;
        line-height: 1.2;
    }

    /* 스포츠분석 게시판 - 모바일에서 제목 줄바꿈 허용 */
    .board-table.board-sports .title-cell .title-text {
        white-space: normal !important;
        word-break: keep-all;
        line-height: 1.4;
        overflow: visible;
        text-overflow: unset;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .view-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* 모바일 게시글 보기 가독성 개선 */
    .view-container {
        padding: 0;
    }

    .view-header {
        padding: var(--spacing-md);
    }

    .view-header h1 {
        font-size: 1.2rem;
        line-height: 1.6;
    }

    .view-meta {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }

    .view-content {
        padding: var(--spacing-md);
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .view-actions {
        padding: var(--spacing-md);
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .view-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .view-actions-right {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .view-actions-right .btn {
        width: 100%;
    }

    /* 모바일 댓글 영역 768px - 데스크탑 레이아웃 유지, 크기만 축소 */
    .comments-section {
        margin-top: var(--spacing-md);
    }

    .comments-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .comment-item {
        padding: 12px 10px;
    }

    .comment-row {
        gap: 10px;
    }

    .comment-avatar,
    .comment-avatar-img {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .comment-avatar.small,
    .comment-avatar-img.small {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .comment-author {
        font-size: 13px;
    }

    .comment-date {
        font-size: 11px;
    }

    .comment-content {
        font-size: 13px;
    }

    .btn-comment-action {
        font-size: 11px;
        padding: 2px 6px;
    }

    .reply-list {
        margin-left: 30px;
    }

    /* 댓글 입력 폼 */
    .comment-form {
        padding: var(--spacing-md);
    }

    .comment-form-row-input {
        gap: 10px;
    }

    .comment-form-row-input .comment-avatar,
    .comment-form-row-input .comment-avatar-img {
        width: 36px;
        height: 36px;
    }

    .comment-input-wrapper textarea {
        min-height: 80px;
        font-size: 16px;
        padding: 12px;
    }

    .comment-input-wrapper .btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .reply-form {
        padding: 0;
        margin-left: 20px;
    }

    .reply-form textarea {
        min-height: 60px;
        font-size: 14px;
    }

    .comment-form-row {
        flex-direction: column;
    }

    .comment-form-row input {
        width: 100%;
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    .stat-box {
        justify-content: center;
    }

    .banner-slide img {
        height: 150px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .footer-content {
        flex-direction: column;
    }

    .header .logo {
        padding: 0 0 0 8px;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--accent-primary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-muted { color: var(--text-dark); }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.d-none { display: none; }
.d-flex { display: flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

.flex-1 { flex: 1; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.15);
}

/* ===== SELECTION ===== */
::selection {
    background: var(--accent-primary);
    color: #000;
}

/* ===== 클릭 시 포커스 외곽선 깜빡임 제거 =====
   링크·버튼·글자(링크 텍스트)를 마우스/터치로 클릭할 때 나타나던
   기본 포커스 외곽선(아웃라인)을 제거. 단, 키보드 Tab 탐색 시에는
   접근성을 위해 외곽선을 유지(:focus-visible). */
:focus:not(:focus-visible) {
    outline: none;
}
/* 터치 시 회색 박스가 번쩍이는 모바일 탭 하이라이트도 함께 제거 */
* {
    -webkit-tap-highlight-color: transparent;
}
/* 본문 글자를 클릭할 때(또는 브라우저 '캐럿 브라우징'이 켜진 경우) 글자 사이에
   깜빡이는 세로 막대(I빔 텍스트 caret)가 보이던 것을 제거. 본문은 caret 투명,
   실제 입력 필드(input/textarea/contenteditable)는 caret 정상 유지. */
html { caret-color: transparent; }
input, textarea, select, [contenteditable], [contenteditable="true"] { caret-color: auto; }