/* freeboard/static/css/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #e9ecef; /*#f8f9fa; /* #f4f4f4; */
    margin: 0;
    padding: 0;
    line-height: 1.3; /* 행간 약간 줄임 */
}

.container {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    background: #2a2a40;
    color: #e0e0e0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
    text-align: center;
    padding-top: 5px; /* 상단 패딩 줄임 */
    padding-bottom: 15px; /* 하단 패딩 유지 */
    padding-left: 15px; /* 좌측 패딩 유지 */
    padding-right: 15px; /* 우측 패딩 유지 */
    background-color: #007bff;
    color: white;
    border-radius: 10px 10px 0 0;
    font-size: 18px;
    line-height: 1.2; /* 헤더 텍스트의 행간 줄임 */
}

.header-title-small {
    color: white;
    text-decoration: none;
    transition: transform 0.3s, color 0.3s, background-color 0.3s;
    display: inline-block;
    padding: 5px 10px;
    font-size: 1em; /* 50% 크기 */
    border-radius: 5px;
}

.header-title-small:hover {
    transform: scale(1.1);
    color: #fff;
    background-color: #0056b3;
}

.button {
    padding: 10px 20px; /* 원래 크기 유지 (다른 버튼 유지) */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1em; /* 기본 텍스트 크기 유지 */
    text-decoration: none; /* 밑줄 제거 */
}

.button:hover {
    background-color: #0056b3;
}

.new-post-btn {
    padding: 5px 20px; /* 원래 크기 유지 */
    margin-bottom: 0; /* 버튼 아래 여백 제거 */
    text-decoration: none; /* 언더라인 제거 */
}

.page-btn {
    padding: 5px 10px; /* 페이징 네비게이션 버튼 크기 유지 */
    font-size: 0.8em; /* 텍스트 크기 유지 */
}

.page-btn:hover {
    background-color: #0056b3; /* 호버 효과 유지 */
}

.nav-btn-small {
    padding: 5px 10px; /* 50% 크기 유지 */
    margin: 0 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.8em; /* 50% 크기 유지 */
    transition: background-color 0.3s;
}

.nav-btn-small:hover {
    background-color: #0056b3;
}

.btn {
    padding: 10px 20px; /* Bootstrap 기본 크기 유지 */
    font-size: 1em; /* 텍스트 크기 유지 */
}

.btn-sm {
    padding: 0.25rem 0.5rem; /* Bootstrap 작은 버튼 크기 유지 */
    font-size: 0.875rem; /* 텍스트 크기 유지 */
    margin-right: 5px;
}

.pagination {
    margin-top: 20px;
    text-align: center;
    display: flex;              /* Flexbox로 요소를 가로로 배열 */
    justify-content: center;    /* 가로 가운데 정렬 */
    align-items: center;        /* 세로 가운데 정렬 (필요 시) */
    gap: 10px;                  /* 버튼 간 간격 */
    margin: 20px 0;             /* 상하 여백 */
}

.pagination .button {
    margin: 0 5px;
}

.pagination .button.active {
    background-color: #0056b3;
    font-weight: bold;
}

.page-number {
    padding: 0; /* 패딩 제거 */
    background-color: transparent; /* 배경색 제거 */
    color: #007bff; /* 링크 색상 유지 */
    border: none; /* 테두리 제거 */
    border-radius: 0; /* 모서리 제거 */
    cursor: pointer; /* 포인터 커서 유지 */
    text-decoration: none; /* 언더라인 제거 */
    font-size: 1em; /* 숫자 크기 50%로 줄임 */
    margin: 0 2px; /* 숫자 간 간격 최소 유지 */
}

.page-number:hover {
    text-decoration: underline; /* 호버 시 언더라인 추가 (선택적) */
    color: #0056b3; /* 호버 시 색상 조정 */
}

.page-number.active {
    font-weight: bold; /* 활성화된 페이지 강조 */
    color: #0056b3; /* 활성화된 페이지 색상 */
}

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

.create-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.create-form .category-input {
    width: 7em;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.create-form .form-input {
    width: 100%;
    max-width: 600px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.create-form .content-input {
    height: 200px;
    resize: vertical;
}

.create-form button,
.create-form a.btn {
    padding: 10px 20px;
    margin-right: 10px;
}

.form-buttons {
    display: flex;
    gap: 10px;
}

.category-link {
    color: #007bff;
    text-decoration: none;
}

.category-link:hover {
    text-decoration: underline;
}

.content-text {
    word-wrap: break-word; /* 텍스트 자동 줄바꿈 */
}

.comment-title {
    margin-bottom: 5px; /* 댓글 작성 제목과 입력 필드 간격 줄임 */
}

.comment-input {
    margin-bottom: 5px; /* 입력 필드와 버튼 간격 더 줄임 */
}

/* 테이블 내 링크의 밑줄 제거 */
.table a {
    text-decoration: none; /* 밑줄 제거 */
    color: #007bff; /* 링크 색상 유지 (필요 시 조정) */
}

.table a:hover {
    text-decoration: underline; /* 호버 시 밑줄 추가 (선택적) */
    color: #0056b3; /* 호버 시 색상 조정 (선택적) */
}

.table tbody {
    border-top: none; /* 상단 경계선 제거 */
    border-bottom: 1px solid #ddd; /* 하단 경계선 유지 */
}

.table tbody td {
    border-top: none; /* 셀 상단 경계선 제거 */
    border-bottom: none; /* 셀 하단 경계선 제거 */
}

/* detail.html용 스타일 */
.post-header, .post-content, .post-actions, .comments-section {
    margin-bottom: 20px;
}

.post-meta p {
    margin: 5px 0;
}

.post-image img {
    max-width: 100%;
    height: auto;
}

.post-actions, .comment-actions {
    margin-top: 10px;
}

.button-group {
    display: inline-block;
    margin-right: 10px;
}

.comment {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

.comment-meta {
    margin-bottom: 10px;
}

.comment-content {
    margin-bottom: 10px;
}

.comment-form {
    margin-top: 10px;
}

/* YouTube 임베드 스타일 */
.youtube-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 20px;
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 기 타 */
.label-container {
    margin: 5px 0 !important;
}


/* 반응형 디자인 */
@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 15px;
    }
    .header {
        font-size: 16px;
        padding-top: 5px; /* 모바일에서도 상단 패딩 유지 */
        padding-bottom: 15px; /* 모바일에서도 하단 패딩 유지 */
        padding-left: 10px; /* 모바일에서 좌측 패딩 조정 */
        padding-right: 10px; /* 모바일에서 우측 패딩 조정 */
    }
    .header-title-small {
        font-size: 0.8em;
    }
    .button {
        width: 100%;
        padding: 12px; /* 모바일에서도 버튼 크기 유지 */
        font-size: 1em; /* 텍스트 크기 유지 */
    }

    .btn {
        display: inline-block; /* 버튼 표시 유지 */
        padding: 0.25rem 0.5rem; /* Bootstrap 기본 작은 버튼 크기 유지 */
        font-size: 0.875rem; /* 텍스트 크기 유지 */
        float: none; /* 플로트 제거 */
        width: auto; /* 자동 너비로 조정 */
        margin: 0 5px; /* 버튼 간 간격 추가 */
    }

    .btn-sm {
        display: inline-block; /* 작은 버튼도 표시 유지 */
        padding: 0.25rem 0.5rem; /* 크기 유지 */
        font-size: 0.875rem; /* 텍스트 크기 유지 */
        float: none; /* 플로트 제거 */
        width: auto; /* 자동 너비로 조정 */
    }

    .mt-2 {
        margin-top: 0.25rem; /* 여백 줄이기 */
        display: block; /* 부모 요소 표시 유지 */
    }

    .card {
        display: block; /* 카드 표시 유지 */
    }

    .card-body {
        display: block; /* 카드 본문 표시 유지 */
    }

    form[style*="display:inline"] {
        display: inline-block; /* 폼 표시 유지 */
    }

    .new-post-btn {
        padding: 3px 10px; /* 모바일에서 패딩 축소 */
        font-size: 0.8em; /* 텍스트 크기 축소 */
        max-width: 55px; /* 버튼 최대 너비 제한 */
        text-decoration: none; /* 언더라인 제거 */
    }

    td[style*="display: flex"] {
        justify-content: flex-end; /* 모바일에서도 오른쪽 정렬 유지 */
    }

    .page-number {
        font-size: 1em; /* 모바일에서도 숫자 크기 50% 유지 */
        margin: 0 2px; /* 숫자 간 간격 유지 */
    }

    .page-number.active {
        font-weight: bold;
    }

    .page-btn {
        padding: 5px 10px; /* 모바일에서도 페이징 네비게이션 버튼 크기 유지 */
        font-size: 0.8em; /* 텍스트 크기 유지 */
    }

    .nav-btn-small {
        margin: 5px 0;
        width: 100%;
    }

    .create-form .form-input,
    .create-form .category-input {
        max-width: 100%;
    }

    .form-buttons {
        flex-direction: column;
        gap: 5px;
    }

    /* 테이블 내 링크의 밑줄 제거 (모바일에서도 유지) */
    .table a {
        text-decoration: none;
        color: #007bff;
    }

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

    /* YouTube 임베드 반응형 */
    .youtube-embed {
        padding-bottom: 75%; /* 4:3 비율로 조정 가능 */
    }
}


/* 다크 테마 적용 */

body {
    background-color: #1e1e2f; /* 어두운 남보라색 계열 */
    color: #e0e0e0; /* 밝은 회색 글자 */
}

table, input, textarea, select, button {
    background-color: #2a2a40;
    color: #e0e0e0;
    border-color: #444;
}

a {
    color: #8ab4f8;
}

a:hover {
    color: #a4cafe;
}

form input, form textarea, form select {
    background-color: #333;
    border: 1px solid #555;
    color: #f0f0f0;
}

form button {
    background-color: #444;
    color: #fff;
    border: 1px solid #666;
}

form button:hover {
    background-color: #555;
}


/* === 추가 테마 정의 === */

/* === 테마 기본 구조 === */
body.theme-dark {
    background-color: #1e1e2f;
    color: #e0e0e0;
}
body.theme-light {
    background-color: #f8f9fa;
    color: #212529;
}
body.theme-sepia {
    background-color: #f4ecd8;
    color: #5b4636;
}

/* 공통 요소들 스타일 */
body.theme-dark table,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark button {
    background-color: #2a2a40;
    color: #e0e0e0;
    border-color: #444;
}

body.theme-light table,
body.theme-light input,
body.theme-light textarea,
body.theme-light select,
body.theme-light button {
    background-color: #ffffff;
    color: #212529;
    border-color: #ccc;
}

body.theme-sepia table,
body.theme-sepia input,
body.theme-sepia textarea,
body.theme-sepia select,
body.theme-sepia button {
    background-color: #fef6e4;
    color: #5b4636;
    border-color: #d6c6b8;
}

body.theme-dark a {
    color: #8ab4f8;
}
body.theme-light a {
    color: #007bff;
}
body.theme-sepia a {
    color: #a0522d;
}


/* === 게시글 테이블 다크 적용 (Bootstrap override) === */
.table { --bs-table-bg:#2a2a40; --bs-table-color:#e0e0e0; --bs-table-border-color:#444; color:#e0e0e0; }
.table > :not(caption) > * > * { background-color:#2a2a40; color:#e0e0e0; border-color:#444; }
.table thead th { background-color:#23233a; color:#ffffff; border-color:#555; }
.table a { color:#8ab4f8; }
.table a:hover { color:#a4cafe; }


/* === 검색/카테고리 입력 다크 적용 === */
.form-control, .form-select, input[type="text"], input[type="search"], select, textarea {
    background-color:#2a2a40; color:#e0e0e0; border-color:#444;
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    background-color:#2a2a40; color:#e0e0e0; border-color:#6b6bff;
    box-shadow:0 0 0 .2rem rgba(80,120,255,.25);
}
.form-control::placeholder, input::placeholder { color:#9aa0aa; }


/* === 카테고리 드롭다운 화살표 밝게 === */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}


/* === 헤더 파란 띠 톤 다운 === */
.header { background-color:#34406b; }
.header-title-small:hover { background-color:#3f4d80; }


/* === 헤더 메뉴 우측 상단 세로 나열 === */
.header { position: relative; min-height: 100px; }
.header nav {
    position: absolute;
    top: 12px;
    right: 18px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
}
.header nav .nav-btn-small {
    margin: 0;
    min-width: 100px;
    text-align: center;
}


/* === 헤더 메뉴: 버튼 제거, 깔끔한 텍스트 줄 === */
.header nav .nav-btn-small {
    background: none !important;
    border-radius: 0;
    padding: 2px 0;
    min-width: 0;
    font-size: 0.9em;
    color: #dfe3ea;
    text-align: right;
    transition: color 0.2s;
}
.header nav .nav-btn-small:hover {
    background: none !important;
    color: #ffffff;
    text-decoration: underline;
}


/* === 헤더 메뉴: 좌측정렬 + 폰트 축소 === */
.header { min-height: 88px; }
.header nav { align-items: flex-start; }
.header nav .nav-btn-small { text-align: left; font-size: 0.78em; }

/* === 콘텐츠 영역 상하 여백 === */
.container { margin: 24px auto 40px; }


/* === 헤더 슬림(세로 공간 확보) === */
.header { min-height: 76px; padding-top: 8px; padding-bottom: 8px; }
.header h1 { margin: 6px 0; font-size: 1.9em; }
.header nav { top: 8px; }

/* === 테이블 행 컴팩트 === */
.table > :not(caption) > * > * { padding-top: 6px; padding-bottom: 6px; }

/* === 컨테이너 상하 여백 축소 === */
.container { margin: 16px auto 28px; }


/* === 헤더 메뉴 수직 중앙 정렬 + 줄간격 축소 === */
.header nav { top: 50%; bottom: auto; transform: translateY(-50%); gap: 2px; }
.header nav .nav-btn-small { padding: 1px 0; line-height: 1.2; }


/* === 심플한 폰트 + 테이블 본문 글자 축소/얇게 === */
body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.table td { font-size: 0.88em; font-weight: 400; }
.table th { font-size: 0.92em; font-weight: 600; }


/* === 테이블 글자 크기 원복 + 두께만 더 얇게 === */
.table td { font-size: 1em; font-weight: 300; }
.table th { font-size: 1em; font-weight: 500; }


/* === 테이블 본문 두께 200 === */
.table td { font-weight: 200; }


/* ============================================================
   리디자인 2026-06-09 — 저눈부심 다크 테마 (deep-slate + 인디고 액센트)
   목적: 어둡되 탁하지 않게. 표면 단계 분리 + 또렷한 액센트.
   이 블록이 파일 맨 끝이라 위의 옛 다크 규칙들을 덮어쓴다.
   ============================================================ */
:root {
    --bg:          #0f1118;   /* 페이지 배경 (L0) */
    --surface:     #1a1d29;   /* 카드/컨테이너 (L1) */
    --surface-2:   #232735;   /* 입력·헤더셀 등 (L2) */
    --border:      #2e3344;
    --text:        #e8ebf2;
    --text-muted:  #9aa3b8;
    --accent:      #6366f1;    /* 인디고 */
    --accent-hi:   #818cf8;
    --link:        #8ab0ff;
    --link-hi:     #adc8ff;
    --danger:      #f0616d;
}

/* ---- 바탕 & 본문 카드 ---- */
body, body.theme-dark {
    background-color: var(--bg);
    color: var(--text);
}
.container {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 10px 34px rgba(0,0,0,.38);
}

/* ---- 헤더: 인디고 그라데이션 + 하단 액센트 라인 ---- */
.header {
    background: linear-gradient(135deg, #222848 0%, #2b2150 100%);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.header h1 a, .header-title-small { color: #fff; }
/* 헤더 우측 메뉴는 텍스트 링크 유지(액센트 채움 X) */
.header nav .nav-btn-small,
.header nav .nav-btn-small:hover {
    background: none !important;
    box-shadow: none;
    color: #d7dcf0;
}
.header nav .nav-btn-small:hover { color: #fff; text-decoration: underline; }

/* ---- 링크 ---- */
a, body.theme-dark a, .table a, .category-link { color: var(--link); }
a:hover, body.theme-dark a:hover, .table a:hover, .category-link:hover { color: var(--link-hi); }

/* ---- 기본/페이지 버튼: 죽은 회색 → 생기있는 인디고 ---- */
.button, .btn-primary, .new-post-btn, form button {
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(99,102,241,.30);
    transition: background-color .2s, box-shadow .2s, transform .05s;
}
.button:hover, .btn-primary:hover, .new-post-btn:hover, form button:hover {
    background-color: var(--accent-hi);
    border-color: var(--accent-hi);
    color: #fff;
    box-shadow: 0 4px 16px rgba(99,102,241,.42);
}
.button:active, .btn-primary:active, form button:active { transform: translateY(1px); }
.pagination .button.active { background-color: var(--accent-hi); border-color: var(--accent-hi); }

/* 페이지 번호(텍스트형)는 액센트 채우지 않음 */
.page-number { background: transparent; border: none; color: var(--link); box-shadow: none; }
.page-number:hover { color: var(--link-hi); }
.page-number.active { color: var(--accent-hi); font-weight: 700; }

/* ---- 아웃라인 버튼(수정/목록/삭제) ---- */
.btn-outline-primary { color: var(--link); border-color: var(--accent); background: transparent; box-shadow: none; }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); background: transparent; box-shadow: none; }
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---- Bootstrap 카드(게시글/댓글 상세) 다크화 ---- */
.card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.card-title { color: #fff; }
.text-muted { color: var(--text-muted) !important; }

/* ---- 테이블: 헤더 진하게, 행 호버로 생기 ---- */
.table > :not(caption) > * > * { background-color: var(--surface); color: var(--text); border-color: var(--border); }
.table thead th { background-color: var(--surface-2); color: #fff; border-color: var(--border); }
.table tbody tr:hover > * { background-color: #262b3b; }
.table a { color: var(--link); }
.table a:hover { color: var(--link-hi); }

/* ---- 입력/폼 ---- */
.form-control, .form-select, input, select, textarea,
form input, form textarea, form select {
    background-color: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(99,102,241,.28);
}
.form-control::placeholder, input::placeholder, ::placeholder { color: var(--text-muted); }

/* 드롭다운 화살표 액센트 톤 */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adc8ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- 댓글/알림 박스 ---- */
.comment {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.alert {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
}

/* 2026-06-09 detail 제목/내용 폰트 얇게 */
.card-title { font-weight: 100; font-size: 1.25rem; }
.content-text { font-weight: 100; }
.card-text { font-weight: 100; }
.comment-info span { font-weight: 100; }
.text-muted { font-weight: 100; }
.btn-outline-primary, .btn-outline-danger { font-weight: 100; }
.comment-title { font-weight: 100; }
textarea { font-weight: 100; }
input[type="file"] { font-weight: 100; }
input[type="file"]::file-selector-button { font-weight: 100; }
input[type="file"]::-webkit-file-upload-button { font-weight: 100; }
.table thead th { font-weight: 200; }
.form-select { font-weight: 100; }
.btn-primary { font-weight: 100; }
.form-control { font-weight: 100; }
.page-number { font-weight: 100; }
.page-btn { font-weight: 100; }
.table td { font-weight: 100; }
.table thead th { font-weight: 100; }

/* 2026-06-09 전체 폰트 통일 (새글작성 버튼 = body 스택) */
*, ::before, ::after, input, button, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.header h1, .header-title-small { font-weight: 100; }
.header nav .nav-btn-small { font-weight: 100; }

/* 2026-06-09 파일선택 버튼 다크화 */
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button {
  background-color: #323847; color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 12px; margin-right: 10px; cursor: pointer;
  transition: background-color .2s, color .2s;
}
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--accent); color: #fff; border-color: var(--accent);
}

/* 2026-06-09 댓글작성/파일선택 글자축소 + 호버 톤다운 */
.comment-title { font-size: 1rem; }
input[type="file"] { font-size: 0.82em; }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { font-size: 0.82em; padding: 3px 10px; }
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background-color: #3a3f52; color: var(--text); border-color: var(--border); }

/* 2026-06-09 파일선택 글자 키움 + 호버 더 어둡게 */
input[type="file"] { font-size: 0.92em; }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { font-size: 0.92em; }
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background-color: #2c313e; color: #cfd5e1; border-color: var(--border); }
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background-color: #20242e; color: #cfd5e1; border-color: var(--border); }

/* 2026-06-09 Bootstrap 호버 specificity 이김 → !important */
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background-color: #20242e !important; color: #cfd5e1 !important; border-color: var(--border) !important; }

/* 2026-06-09 호버 유지 + 더 어둡게 */
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background-color: #1b1e27 !important; color: #cfd5e1 !important; border-color: var(--border) !important; }

/* 2026-06-09 [FINAL] 파일선택 버튼 호버 확정 수정
   근본원인: 페이지에 data-bs-theme="dark"가 없어 Bootstrap의
   .form-control:hover...::file-selector-button{background:var(--bs-secondary-bg)}
   가 라이트 기본값 #e9ecef(밝음)로 칠함. 우리 !important가 background-color는
   이겼으나 Bootstrap이 ::file-selector-button에 -webkit-appearance:button을 줘서
   WebKit/Blink가 호버 시 네이티브 버튼 크롬(밝은 그라데이션)을 그려 밝게 보였음.
   해결: appearance:none으로 네이티브 크롬 제거 + 고-specificity !important 다크 호버. */
.form-control::file-selector-button,
.form-control::-webkit-file-upload-button,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #323847 !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  transition: background-color .15s, color .15s !important;
}
.form-control:hover::file-selector-button,
.form-control:hover::-webkit-file-upload-button,
.form-control::file-selector-button:hover,
.form-control::-webkit-file-upload-button:hover,
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button,
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #1b1e27 !important;
  background-image: none !important;
  color: #cfd5e1 !important;
  border-color: var(--border) !important;
}

/* 2026-06-09 파일선택 호버 그레이로 */
.form-control:hover::file-selector-button, .form-control:hover::-webkit-file-upload-button, input[type="file"]:hover::file-selector-button, input[type="file"]:hover::-webkit-file-upload-button, input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background-color: #4a4f5c !important; color: #e8ebf2 !important; -webkit-appearance: none !important; appearance: none !important; background-image: none !important; border-color: var(--border) !important; }

/* 2026-06-09 댓글입력 축소 + 파일선택 텍스트/버튼 동일크기(rem) */
textarea.content-input { font-size: 0.9rem; }
input[type="file"] { font-size: 0.85rem; }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { font-size: 0.85rem; }
input[type="file"] { font-weight: 100 !important; }
input[type="file"] { color: #868d9c !important; }
.text-muted { color: #71788a !important; }
.comment-info span { color: #71788a; }
.text-muted { color: #8a92a2 !important; }
.comment-info span { color: #8a92a2; }
.text-muted { font-size: 0.85rem !important; font-weight: 100 !important; }
.text-muted .category-link { font-weight: 100; }

/* === 2026-06-16 온습도 위젯 우측 상단(메뉴 왼쪽)으로 이동 === */
.header #sensor-widget {
    position: absolute;
    top: 50%;
    right: 28%;
    left: auto;
    transform: translateY(-50%);
    text-align: right;
    font-size: 0.9em;
    line-height: 1.25;
    color: #dfe3ea;
    margin: 0;
}
@media (max-width: 768px) {
    #sensor-widget { position: static; transform: none; right: auto; text-align: center; }
}