/**
 * ============================================================
 * 어복 게시판 글작성 v2 - PC/모바일 반응형 스타일
 * ------------------------------------------------------------
 * 파일경로 : /css/board_write_v2.css
 * 작성일   : 2026-04-22
 *
 * 사용처 :
 *   /contents/board/picfish/write_v2.php (화보조행기)
 *   /contents/board/memfish/write_v2.php (회원조행기)
 *
 * 운영 영향 :
 *   기존 /css/main.css, /lib/ckeditor5/style.css 에 영향 없음
 *   .mbu-* 접두 클래스만 사용 (Media Batch Uploader)
 * ============================================================
 */

/* ==================================================
   [공통] 약관 동의 박스 - PC/모바일 모두 노란색 강조
   ------------------------------------------------------
   picfish/memfish/free/gear/promotion 등에서 카드 내부
   약관 동의 영역을 노란 박스로 시각적 강조.
   모든 해상도에서 적용되도록 미디어쿼리 밖에 정의.
   ================================================== */
.mbu-agreement {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 10px !important;
    margin: 0 !important;
}
.mbu-agreement .form-check-input {
    width: 1.4rem !important;
    height: 1.4rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer;
}
.mbu-agreement .form-check-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #78350f !important;
    flex: 1;
}
.mbu-agreement-link {
    color: #b45309 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer;
}
.mbu-agreement-link:hover {
    color: #92400e !important;
}

/* PC 에서는 약관 박스 좌우 여백 약간 (카드 안에서 자연스럽게 보이도록) */
@media (min-width: 769px) {
    .mbu-agreement {
        padding: 14px 16px !important;
    }
    .mbu-agreement .form-check-label {
        font-size: 14px !important;
    }
}


/* ==================================================
   공통 - 다중 업로드 버튼 바 (PC 상단)
   ================================================== */
.mbu-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.mbu-toolbar .mbu-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.mbu-toolbar .mbu-btn-main:hover { background: #1d4ed8; }
.mbu-toolbar .mbu-btn-main i { font-size: 18px; }

.mbu-toolbar .mbu-hint {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

/* ==================================================
   PC + 모바일 공통 - 우측 하단 고정 FAB
   ------------------------------------------------------
   [v4 개선 2026-04-22]
   PC 에서도 FAB 표시 : 에디터가 길어져 상단 "사진/영상 추가"
   버튼이 스크롤 아웃되어도 언제든 접근 가능하도록 고정 배치.
   상단 버튼바는 그대로 유지하여 이중 접근성 확보.
   ================================================== */
/* ==================================================
   [FAB 위치 v6 - 세로 중앙 배치]
   ------------------------------------------------------
   기존 하단 배치(bottom: 100px)는 글저장 버튼 + 카카오톡 채널 버튼과
   겹치는 문제 발생.
   → 화면 세로 중앙 우측으로 이동하여 에디터 영역 우측 중간에 위치.
     글저장 버튼과 명확히 분리되고 스크롤 중에도 항상 같은 자리.

   ※ transform 에 translateY(-50%) 가 포함되므로
     hover/active 의 scale 도 translateY(-50%) 기반으로 결합 필요
   ================================================== */
.mbu-fab {
    display: flex;
    position: fixed;
    right: 30px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    border: 0;
    cursor: pointer;
    z-index: 1050;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.55),
                0 0 0 8px rgba(37, 99, 235, 0.15);
    animation: mbu-fab-ring 2s ease-in-out infinite;
}
.mbu-fab:hover,
.mbu-fab:focus {
    transform: translateY(-50%) scale(1.08);
}
.mbu-fab:active {
    transform: translateY(-50%) scale(0.95);
}
.mbu-fab i { line-height: 1; }

@keyframes mbu-fab-ring {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.55),
                    0 0 0 6px rgba(37, 99, 235, 0.18);
    }
    50% {
        box-shadow: 0 8px 28px rgba(37, 99, 235, 0.7),
                    0 0 0 18px rgba(37, 99, 235, 0.05);
    }
}

/* FAB 라벨 - 세로 중앙으로 같이 이동 */
.mbu-fab-label {
    display: flex;
    align-items: center;
    position: fixed;
    right: 114px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    padding: 8px 14px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    z-index: 1050;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    animation: mbu-fab-bounce 2.5s ease-in-out infinite;
}
/* 라벨 우측 화살표 (FAB 가리킴) */
.mbu-fab-label::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid #111827;
}
/* 세로 중앙 고정 + 좌우 바운스 애니메이션 결합 */
@keyframes mbu-fab-bounce {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(-6px); }
}
@keyframes mbu-fab-pulse {
    0%, 100% { opacity: 0.95; }
    50%      { opacity: 0.6; }
}

/* ==================================================
   반응형 분기 - 768px 이하에서 상단 바 숨김, FAB 만 표시
   ================================================== */
/* ==================================================
   [모바일 전면 재디자인 v7 - 2026-04-22]
   ------------------------------------------------------
   설계 원칙 :
     1) 대표이미지는 가로형 카드(높이 200px)로 축소
     2) 카드 여백 최소화, 깔끔한 그림자
     3) 입력필드 iOS zoom 방지(16px) + 최소 48px 높이
     4) 에디터 55vh 로 확대
     5) 카드 footer 를 화면 하단 고정 액션바로 전환
     6) FAB 는 우측 중앙 유지 (에디터 옆)
   ================================================== */
@media (max-width: 768px) {
    /* === 상단 "사진/영상 추가" 바는 모바일에선 숨김 === */
    .mbu-toolbar {
        display: none !important;
    }

    /* === 페이지 하단 영역 수직 정렬 v9 === */
    /* 목표 순서 (위 → 아래) :
         카드 content → 카카오톡(fixed) → 하단 고정바(fixed) → Copyright(최하단 fixed)
       배치 원리 :
         - Copyright footer 를 position:fixed bottom:0 으로 화면 최하단 고정
         - 하단 고정바는 footer 높이만큼 위로 올림
         - 카카오톡은 하단 고정바 위로
         - body padding-bottom 은 footer + 고정바 합산
    */

    /* Copyright footer - 화면 최하단 고정 */
    footer,
    .main-content ~ footer,
    body > footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff !important;
        font-size: 11px !important;
        color: #9ca3af !important;
        text-align: center !important;
        border-top: 1px solid #f3f4f6 !important;
        z-index: 1040 !important;           /* 하단 고정바(1050)보다 아래 */
        line-height: 1.4 !important;
    }
    /* footer 내부 자식 요소들도 정돈 */
    footer > *,
    body > footer > * {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        padding-bottom: 120px !important;   /* footer(~40) + 고정바(~72) + 여유 */
        background: #ffffff !important;     /* 배경 흰색 통일 */
    }
    .main-content,
    .app-content {
        background: #ffffff !important;
        padding-bottom: 12px !important;
    }
    /* 카드 영역도 배경 통일 */
    .custom-card {
        background: #ffffff !important;
    }
    .custom-card .card-body {
        background: #ffffff !important;
    }
    .main-content .container-lg,
    .main-content .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 12px !important;       /* [수정] 헤더 아래 여백 확보하여 브레드크럼 가려지지 않게 */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ==================================================
       [모바일 전용] 9개 게시판 최상단 타이틀 영역 전체 숨김
       ------------------------------------------------------
       사용자 요청에 따라 모바일에서 헤더 타이틀 공간 완전 제거
       (PC 에서는 그대로 유지됨)
       ================================================== */

    /* 7개 게시판 공통 : 브레드크럼 영역 전체 숨김
       picfish / memfish / free / gear / promotion / usedmarket / sagi */
    .main-content .page-header-breadcrumb {
        display: none !important;
    }

    /* notice 게시판 : "게시글 작성" h2 타이틀 숨김 */
    .write-content .write-header-title {
        display: none !important;
    }

    /* qna 게시판 : 아이콘 + "지식인 질문하기" 타이틀 + 공지 카드 전체 숨김 */
    .qna-write-content .qna-header-container {
        display: none !important;
    }

    /* ==================================================
       [v11 강화] 9개 게시판 모바일 최상단 간격 완전 통일
       ------------------------------------------------------
       근본 문제 :
         - Bootstrap .row 의 음수 margin + .col 의 margin-top(gy-*) 이
           display:none col 과 충돌 → 가로라인 효과 발생
         - .col 의 padding-left/right (gutter-x) + container 패딩 중복
         - 파일 내부 style 태그와 specificity 충돌 (notice/qna)

       해결 :
         [A] html body 전치하여 specificity 극대화
         [B] .row.gy-* 를 block flex column + gap 으로 완전 재설정
             (Bootstrap gutter 시스템 무효화)
         [C] display:none col 의 gap 영향 완전 제거
         [D] .col 의 padding 0 강제 (container 패딩만 사용)
       ================================================== */

    /* [A ★수정] main-content 상단 여백 — JS 미실행 시 CSS 안전 폴백 (64px = 4rem 헤더)
       [2026-06-15] 16px→64px: JS(Math.max(headerH,64))와 동일한 값으로 통일
       → JS 실행 시 element.style !important 가 덮어씀 */
    html body .main-content,
    html body .main-content.app-content,
    html body .main-content.write-content,
    html body .main-content.qna-write-content {
        padding-top: 64px !important;
        margin-top: 0 !important;
    }

    /* [B ★수정] container-lg 상단 여백 0 (main-content 에서 이미 padding 줬으므로 중복 방지)
       (py-5, my-3, 무여백 모두 덮어씀) */
    html body .main-content > .container-lg,
    html body .main-content > .container,
    html body .main-content.write-content > .container-lg,
    html body .main-content.qna-write-content > .container-lg {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* [C ★핵심] .row.gy-* 를 완전 재설정 - Bootstrap gutter 시스템 무효화
       → display:none col 로 인한 가로라인 문제 원천 차단
       → 첫 col margin-top 누적 방지
       → col 의 padding-x 중복 방지 */
    html body .main-content .row.gy-3,
    html body .main-content .row.gy-4,
    html body .main-content .row.gy-5 {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }
    html body .main-content .row.gy-3 > *,
    html body .main-content .row.gy-4 > *,
    html body .main-content .row.gy-5 > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* [D] display:none 처리된 col 은 flex gap 에서도 제외 */
    html body .main-content .row > *[style*="display:none"],
    html body .main-content .row > *[style*="display: none"] {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* [E] notice 의 justify-content-center row 대응 (.col-xl-10 중앙정렬 구조) */
    html body .main-content.write-content .row.justify-content-center {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        --bs-gutter-x: 0 !important;
    }
    html body .main-content.write-content .row.justify-content-center > .col-xl-10,
    html body .main-content.write-content .row.justify-content-center > * {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    /* [F] 카드 영역 통일 */
    html body .main-content .custom-card,
    html body .main-content .write-card {
        margin: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #f3f4f6 !important;
    }

    /* [G] 카드 body / write-card 내부 패딩 통일 (p-4, 인라인 35px 모두 덮어씀)
       [2026-06-15] 상단 0 → 헤더 바로 아래 붙도록, 좌우하단 14px 유지 */
    html body .main-content .custom-card .card-body,
    html body .main-content .custom-card .card-body.p-4,
    html body .main-content .write-content .write-card {
        padding: 0 14px 14px 14px !important;
    }
    /* 약관 영역 card-body.pt-0 : 상단 0, 나머지 14px */
    html body .main-content .custom-card .card-body.pt-0 {
        padding: 0 14px 14px 14px !important;
    }

    /* [H] 타이틀 영역 완전 숨김 (추가 안전장치 - height 0까지 강제) */
    html body .main-content .page-header-breadcrumb,
    html body .main-content.write-content .write-header-title,
    html body .main-content.qna-write-content .qna-header-container {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* [I ★추가] notice 특수 구조 강제 통일
       write-content 의 배경/padding 이 과한 공백 만들지 않도록 강제 override */
    html body .main-content.write-content {
        padding: 16px 0 0 0 !important;          /* 상단 16px 만 */
        background: #ffffff !important;           /* 회색 배경 제거 - 흰색 통일 */
    }
    html body .main-content.write-content > .container-lg {
        padding: 0 8px !important;                /* py-5 (48px 상하) 완전 제거 */
    }
    html body .main-content.write-content > .container-lg > form {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* [J ★추가] qna 도 동일하게 배경 통일 */
    html body .main-content.qna-write-content {
        background: #ffffff !important;
    }

    /* === 카드 === */
    .custom-card {
        border-radius: 12px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #f3f4f6 !important;
    }
    .custom-card .card-body {
        padding: 14px !important;
    }
    .main-content .row.gy-3 {
        --bs-gutter-y: 14px !important;
    }

    /* === 폼 라벨 === */
    .main-content .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
        color: #374151 !important;
        font-weight: 600 !important;
    }
    .main-content .form-label .must {
        color: #ef4444 !important;
        margin-left: 2px !important;
    }

    /* === 대표이미지 영역 (가로형 카드) === */
    /* background-size: contain 으로 이미지 전체가 잘리지 않고 비율 유지하며 표시 */
    .main-content .avatar.avatar-thumb {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important;
        border-radius: 12px !important;
        position: relative !important;
        display: block !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: #f9fafb !important;
        border: 2px dashed #d1d5db !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
    /* 이미지가 들어간 상태에서는 점선 테두리 제거 */
    .main-content .avatar.avatar-thumb[style*="background-image"] {
        border: 1px solid #e5e7eb !important;
    }
    /* 이미지 없을 때 힌트 텍스트 */
    .main-content .avatar.avatar-thumb:not([style*="background-image"])::before {
        content: '📷  대표 이미지를 추가해 주세요';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #9ca3af;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
    }
    /* 대표이미지 카메라 아이콘 (우측 상단 원형 버튼) */
    .main-content .avatar.avatar-thumb .avatar-badge {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #2563eb !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
        padding: 0 !important;
    }
    .main-content .avatar.avatar-thumb .avatar-badge i {
        font-size: 20px !important;
    }

    /* === 제목 / 일반 입력 필드 === */
    .main-content .form-control {
        min-height: 48px !important;
        font-size: 16px !important;     /* iOS zoom 방지 */
        border-radius: 10px !important;
        padding: 12px 14px !important;
        border: 1px solid #e5e7eb !important;
    }
    .main-content .form-control:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    }

    /* === 에디터 - 크기 확대 === */
    /* [2026-06-16] max-height 제거 — 각 게시판 write.php 에서 독립 제어
       font-size: 16px 으로 변경 — iOS 15px 미만 자동 줌인 방지 */
    .editor-wrap textarea.ckeditor,
    .editor-wrap .ck-editor__editable {
        max-height: none !important;
        min-height: 280px !important;
        font-size: 16px !important;
    }
    .ck.ck-toolbar {
        border-radius: 10px 10px 0 0 !important;
    }
    .ck.ck-editor__main > .ck-editor__editable {
        border-radius: 0 0 10px 10px !important;
    }

    /* ==================================================
       [v8 전면 재디자인 - 하단 영역]
       ------------------------------------------------------
       구조 변경 :
         1) 약관 동의 → 카드 body 내부 (노란색 박스 강조)
         2) card-footer → 모바일에서 완전 숨김 (PC 전용)
         3) .mbu-mobile-action-bar → 별도 요소, 하단 고정바 (버튼 2개만)
       ================================================== */

    /* [이동] .mbu-agreement 스타일은 아래 전역 섹션으로 이동됨 (PC/모바일 공통) */

    /* card-footer 는 모바일에서 완전 숨김 (PC 전용 글저장 버튼 포함) */
    .card-footer {
        display: none !important;
    }

    /* 하단 고정 액션바 - footer 바로 위 (버튼 2개만) */
    /* bottom 값에 footer 자체의 safe-area 까지 포함해서 올림 → 카카오톡 버튼 덮지 않도록 */
    .mbu-mobile-action-bar {
        display: flex !important;
        position: fixed;
        bottom: calc(44px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        z-index: 1050;
        padding: 10px 12px 10px;
        gap: 8px;
    }

    /* 하단 고정바 버튼 공통 */
    .mbu-mobile-action-bar .mbu-mobile-btn {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px !important;
        min-height: 52px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        border: 0 !important;
        text-decoration: none !important;
        transition: background .15s ease, transform .1s ease !important;
        white-space: nowrap !important;
    }
    .mbu-mobile-action-bar .mbu-mobile-btn i {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /* 사진/영상 버튼 - 중립 회색 */
    .mbu-mobile-action-bar .mbu-mobile-btn-media {
        background: #f3f4f6 !important;
        color: #374151 !important;
    }
    .mbu-mobile-action-bar .mbu-mobile-btn-media:hover,
    .mbu-mobile-action-bar .mbu-mobile-btn-media:active {
        background: #e5e7eb !important;
    }

    /* 글저장 버튼 - 주요 액션 파란색 */
    .mbu-mobile-action-bar .mbu-mobile-btn-save {
        background: #2563eb !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    }
    .mbu-mobile-action-bar .mbu-mobile-btn-save:hover,
    .mbu-mobile-action-bar .mbu-mobile-btn-save:active {
        background: #1d4ed8 !important;
    }

    /* FAB 완전 숨김 */
    .mbu-fab,
    .mbu-fab-label {
        display: none !important;
    }

    /* ==================================================
       [사이드메뉴 오픈 시 하단 고정 요소 자동 숨김]
       ------------------------------------------------------
       Forest 테마는 <html data-toggled="close"> 속성으로
       사이드메뉴 상태를 관리 (닫힘: "close", 열림: 그 외 값).
       사이드메뉴가 열리면 하단 고정바/카카오톡/footer 가
       사이드메뉴 위에 겹쳐 보이므로 자동 숨김 처리.
       ================================================== */
    html:not([data-toggled="close"]) .mbu-mobile-action-bar,
    html:not([data-toggled="close"]) .kakao-custom-btn,
    html:not([data-toggled="close"]) footer,
    html:not([data-toggled="close"]) body > footer,
    html:not([data-toggled="close"]) .main-content ~ footer {
        display: none !important;
        pointer-events: none !important;
    }

    /* ==================================================
       [카카오톡 채널 버튼 위치] v10 - safe-area 대응
       ------------------------------------------------------
       수직 배치 :
         카드 content
             ↓
         카카오톡 (bottom ~135px + safe-area)
             ↓
         하단 고정바 (bottom 44px + safe-area, 높이 ~72px)
             ↓
         Copyright footer (bottom 0, 자체 padding 에 safe-area 포함)

       iPhone 홈 인디케이터 영역(safe-area-inset-bottom ~34px)이
       모든 fixed 요소에 일관되게 반영되어야 서로 겹치지 않음.
       ================================================== */
    .kakao-custom-btn {
        bottom: calc(135px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* 576px 이하 (footer.php 의 카카오톡 모바일 미디어쿼리 대응) */
@media (max-width: 576px) {
    .kakao-custom-btn {
        bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* 매우 작은 화면 (< 380px) 추가 조정 */
@media (max-width: 380px) {
    #footer-check-wrapper .form-check-label {
        font-size: 11px !important;
    }
    .mbu-mobile-btn {
        padding: 10px 6px !important;
        font-size: 13px !important;
    }
    .mbu-mobile-btn i {
        font-size: 16px !important;
    }
    .main-content .avatar.avatar-thumb {
        height: 180px !important;
    }
}

/* ==================================================
   매우 작은 화면 (< 360px) 추가 조정
   모바일에서는 FAB 가 숨겨지므로 FAB 관련 규칙 불필요
   ================================================== */
@media (max-width: 360px) {
    .main-content .avatar.avatar-thumb {
        height: 160px !important;
    }
    #footer-check-wrapper .form-check-label {
        font-size: 10.5px !important;
    }
}

/* ==================================================
   PC에서 툴바는 기존 그대로 유지 (사용자 요구)
   모바일에서만 에디터 높이/터치 타겟 조정
   ================================================== */


/* ==================================================
   [에디터 내 이미지/영상 크기 정책 - 전면 최적화 v3]
   ------------------------------------------------------
   문제 :
     1) 기존 style.css 가 figure.image width:80% + img width:100% !important
        → 작은 이미지도 80% 까지 확대되어 세로 스크롤 압박 극심
     2) 영상도 유사한 문제로 세로형 영상이 화면 가득 차버림

   개선 정책 (write_v2 전용, .ck-editor__editable 내부만 적용) :
     [PC]
       - 너비: 원본 크기 존중(fit-content), 단 500px 초과 시 500px 로 축소
       - 높이: 60vh 초과 시 축소 (세로형 이미지/영상 대응)
     [모바일]
       - 너비: 컨테이너 100%
       - 높이: 50vh 제한
     [공통]
       - object-fit 이나 이미지 비율 왜곡 없음 (width:auto/height:auto 조합)
       - 저장 후 상세(view.php) 는 기존 .ck-content 정책 유지 → 영향 없음

   우선순위 :
     이 CSS 는 /lib/ckeditor5/style.css 보다 나중에 로드되어야 override 가능
     (write_v2.php 에서 style.css 뒤에 로드하도록 배치됨)
   ================================================== */

/* ----- [이미지] PC 기본 ----- */
.ck-editor__editable figure.image {
    width: fit-content !important;
    max-width: 500px !important;
    margin: 1em auto !important;
    display: block !important;
}
.ck-editor__editable figure.image > img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 60vh !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ----- [영상] PC 기본 ----- */
.ck-editor__editable figure.media {
    width: fit-content !important;
    max-width: 500px !important;
    margin: 1em auto !important;
    display: block !important;
}
.ck-editor__editable figure.media video,
.ck-editor__editable figure.media iframe {
    width: auto !important;
    max-width: 100% !important;
    max-height: 60vh !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ----- [모바일] 768px 이하 ----- */
@media (max-width: 768px) {
    .ck-editor__editable figure.image,
    .ck-editor__editable figure.media {
        max-width: 100% !important;
    }
    .ck-editor__editable figure.image > img,
    .ck-editor__editable figure.media video,
    .ck-editor__editable figure.media iframe {
        max-height: 50vh !important;
    }
}

/* ==================================================
   [CKEditor 툴바 중복 버튼 숨김] v4 강화
   ------------------------------------------------------
   상단 "사진/영상 추가" 버튼과 기능이 중복되는 CKEditor 툴바 내
   이미지/영상 버튼을 CSS 와 JS 이중으로 숨김.
   ================================================== */

/* CKEditor 5 파일 다이얼로그 버튼 (insertImage) */
.editor-wrap .ck-toolbar .ck-file-dialog-button,
.ck-editor__top .ck-toolbar .ck-file-dialog-button {
    display: none !important;
}

/* 원본 main.js 가 삽입하는 커스텀 영상 업로드 버튼 */
.editor-wrap .videoUploadBtn,
.ck-editor__top .videoUploadBtn,
.ck-toolbar .videoUploadBtn,
a.videoUploadBtn {
    display: none !important;
}

/* 한국어 레이블 기반 (CKEditor 5 ko 번역팩) */
.ck-toolbar [aria-label*="이미지"],
.ck-toolbar [aria-label*="사진"],
.ck-toolbar [aria-label*="동영상"],
.ck-toolbar [aria-label*="영상"],
.ck-toolbar [aria-label*="미디어"],
.ck-toolbar [data-cke-tooltip-text*="이미지"],
.ck-toolbar [data-cke-tooltip-text*="사진"],
.ck-toolbar [data-cke-tooltip-text*="동영상"],
.ck-toolbar [data-cke-tooltip-text*="영상"],
.ck-toolbar [data-cke-tooltip-text*="미디어"] {
    display: none !important;
}

/* 영어 레이블 기반 fallback */
.ck-toolbar [aria-label*="Image"],
.ck-toolbar [aria-label*="image"],
.ck-toolbar [aria-label*="Media"],
.ck-toolbar [aria-label*="media"],
.ck-toolbar [aria-label*="Video"],
.ck-toolbar [aria-label*="video"],
.ck-toolbar [data-cke-tooltip-text*="Image"],
.ck-toolbar [data-cke-tooltip-text*="image"],
.ck-toolbar [data-cke-tooltip-text*="Media"],
.ck-toolbar [data-cke-tooltip-text*="media"] {
    display: none !important;
}


/* ==================================================
   [드래그 앤 드롭 오버레이]
   ------------------------------------------------------
   사용자가 파일을 브라우저 페이지로 드래그하는 동안
   반투명 오버레이 + 안내 메시지 표시 (UX 피드백)
   ================================================== */
body.mbu-dragover::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(37, 99, 235, 0.12);
    border: 4px dashed #2563eb;
    pointer-events: none;
    z-index: 2147483645;
    animation: mbu-drag-pulse 1.2s ease-in-out infinite;
}
body.mbu-dragover::after {
    content: '📥  여기에 파일을 놓으면 바로 업로드됩니다';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 28px;
    background: rgba(37, 99, 235, 0.95);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    pointer-events: none;
    z-index: 2147483646;
    white-space: nowrap;
}
@keyframes mbu-drag-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1.0; }
}
@media (max-width: 480px) {
    body.mbu-dragover::after {
        font-size: 14px;
        padding: 14px 18px;
        white-space: normal;
        max-width: 80vw;
        text-align: center;
    }
}