/**
 * pages/box-emotion-note/assets/emotion-note.css
 *
 * 마음일기장/공유마음노트 전용 스타일 모음 (공용 1개)
 *
 * 목적:
 * - 페이지별 PHP 파일 안에 섞여 있던 <style> 블록을 분리해 유지보수 용이하게 함
 * - 기능/디자인은 그대로 유지 (정리만)
 *
 * 로드 조건:
 * - [box_emotion_note_my], [box_emotion_note_shared] 쇼트코드가 포함된 프론트 페이지에서만 로드
 */

/* 공통 버튼 */
.bhem-btn{
    display:inline-block;
    padding:7px 14px;
    border-radius:6px;
    border:1px solid #ccc;
    background:#f7f7f7;
    color:#222;
    text-decoration:none;
    font-size:13px;
    line-height:1.2;
}
.bhem-btn:focus{outline:none}
/* 기본 강조 버튼 – 공유하기 등: 연한 회색 + 검정 텍스트 */
.bhem-btn-primary{
    background:#e0e0e0;
    border-color:#c0c0c0;
    color:#111;
}

/* 공유/회수 버튼 hover 색상: 파란색 대신 브랜드 초록(#009966) 강제 */
.bhem-btn-primary:hover,
.bhem-btn-outline:hover{
    color:#009966;
    border-color:#009966;
    text-decoration:none;
}


/* 오늘의 감정 기록 전용 – 초록 버튼 */
.bhem-btn-main{
    background:#009966;
    border-color:#008055;
    color:#fff;
    text-decoration:none;
}
.bhem-btn-main:hover{
    background:#008055;      /* 살짝 더 진한 초록 */
    border-color:#006644;
    color:#fff;              /* 글자색 변경 없이 유지 */
    text-decoration:none;    /* 밑줄 없이 유지 */
    filter:none;
}



.bhem-btn-danger{background:#b00020;border-color:#8b0019;color:#fff}

.bhem-btn-like{background:#f3f8ff;border-color:#dbe9ff}
.bhem-btn-like:hover{background:#e8f0ff}
.bhem-btn-ghost{background:#fff}
.bhem-btn:hover{text-decoration:none;filter:saturate(1.1)}
.bhem-muted{color:#777}

/* 공통 작은 버튼 – 네모 + 살짝 둥근 형태 */
.bhem-btn-sm{
    padding:4px 12px;   /* 살짝만 키워서 너무 작지 않게 */
    font-size:12px;     /* 11px → 12px */
    border-radius:6px;  /* 타원형(999px) 말고 살짝 둥근 사각형 */
}



/* 외곽선 버튼 (서브 액션용) */
.bhem-btn-outline{
    background:#fff;
    border:1px solid #ccc;
    color:#333;
}
.bhem-btn-outline[disabled]{
    opacity:0.4;
    cursor:default;
}

/* 공유하기/회수 버튼 hover – 파란색 대신 브랜드 초록(#009966) 사용 */
.bhem-btn-primary:hover,
.bhem-btn-outline:hover{
    background:#009966;
    border-color:#009966;
    color:#fff;
    text-decoration:none;
    filter:none;
}






/* 목록 헤더에서 사용하는 정렬용 링크 */
.bhem-sort-link{
    color:#333;
    text-decoration:none;
    cursor:pointer;
    font-weight:600;
}
.bhem-sort-link:hover{
    text-decoration:underline;
}









/* 게시판 테이블 공통 – 바깥 세로 테두리는 제거, 가로줄만 유지 */
.bhem-table{
    width:100%;
    border-collapse:collapse;

    /* ▶ 바깥 테두리: 위/아래만 표시 */
    border-top:1px solid #e8e8e8;
    border-bottom:1px solid #e8e8e8;
    border-left:none;   /* 왼쪽 세로선 제거 */
    border-right:none;  /* 오른쪽 세로선 제거 */

    /* 혹시 테마에서 이상한 여백 줄 경우 대비 */
    margin:0;
}


/* 셀 테두리: 전체 테두리 대신 아래쪽 선만 */
.bhem-table th,
.bhem-table td{
    border:none;                          /* 기존 격자 테두리 제거 */
    border-bottom:1px solid #e8e8e8;      /* 행 사이 구분선만 */
    padding:8px 10px;
    font-size:13px;
}

.bhem-table th{
    background:#f7f7f7;
    text-align:center;
}




/* 제목 셀 전체를 한 줄 + 말줄임 처리 */
.bhem-title{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* a 태그도 같은 속성 적용
   - 기본 상태: 밑줄 없음, 말줄임 처리
   - 테마에서 밑줄/색을 덮어써도 여기서 최종으로 덮어쓰기 */
.bhem-title a{
    display:inline-block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    color:#111 !important;          /* ✅ 기본 색상 고정 */
    text-decoration:none !important; /* ✅ PC/모바일 공통: 밑줄 강제 제거 */
}


/* 목록 헤더(번호/날짜/점수/제목/상태)에 쓰는 정렬 링크 */
.bhem-sort-link,
.bhem-sort-link:link,
.bhem-sort-link:visited,
.bhem-sort-link:hover,
.bhem-sort-link:active{
    color:inherit;                     /* 기본 색상 그대로 */
    text-decoration:none !important;   /* 모든 상태에서 밑줄 제거 */
    border-bottom:none !important;     /* 혹시 테마가 border-bottom으로 밑줄 줄 경우 대비 */
    cursor:pointer;
}

/* 마우스 오버 시에만 색상만 #009966 로 변경 (효과는 색만) */
.bhem-sort-link:hover{
    color:#009966;
}


/* ▽ 나의 감정노트 상단 검색창 (우측 정렬 한 줄) */
.bhem-note-search-wrap{
    display:flex;
    justify-content:flex-end;
    align-items:stretch;   /* ← 버튼/입력창 모두 같은 높이로 늘리는 핵심 */
    gap:6px;
    margin-bottom:8px;
}


/* ▽ 달력 모달(오버레이) */
.bhem-calendar-modal{
    display:none;                       /* 기본은 숨김 */
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,0.35);
    align-items:center;
    justify-content:center;
}

/* 모달 열릴 때 */
.bhem-calendar-modal.is-open{
    display:flex;
}

.bhem-calendar-inner{
    background:#fff;
    border-radius:8px;
    padding:16px 20px;
    max-width:420px;
    width:90%;
    max-height:80vh;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    font-size:13px;
    box-sizing:border-box;
}



/* 헤더: 중앙 정렬 */
.bhem-calendar-header{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:8px;
}

/* << <  2025년 12월  > >> 한 줄 */
.bhem-calendar-nav{
    display:flex;
    align-items:center;
    gap:4px;
}

/* 네비 버튼: 항상 검정 글자 */
.bhem-calendar-nav button{
    border:1px solid #ccc;
    background:#f8f8f8;
    padding:2px 6px;
    font-size:12px;
    border-radius:4px;
    cursor:pointer;
    color:#111;            /* 기본 글자색 */
}

.bhem-calendar-nav button:hover{
    background:#eee;
    color:#111;            /* hover 때도 검정 유지 */
}

/* 월 표시 텍스트 */
.bhem-calendar-month-label{
    font-weight:600;
    margin:0 6px;
}


/* 요일 라인 */
.bhem-calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    margin-bottom:4px;
    font-size:11px;
    text-align:center;
    color:#777;
}

.bhem-calendar-weekdays span{
    padding:2px 0;
}

/* 날짜 그리드 */
.bhem-calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
    font-size:12px;
}

.bhem-calendar-cell{
    min-height:40px;
    border-radius:6px;
    border:1px solid #eee;
    padding:4px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:space-between;
}

.bhem-calendar-empty{
    border:none;
    background:transparent;
}

.bhem-calendar-day{
    align-self:flex-start;
    font-weight:600;
    font-size:12px;
}

/* 기본(X) 상태 */
.bhem-calendar-no-note .bhem-calendar-icon{
    font-size:13px;
    color:#bbb;
}

/* 작성 있음(체크) 상태 */
.bhem-calendar-has-note{
    background:#f0faf4;
    border-color:#c2e5d0;
}

.bhem-calendar-has-note .bhem-calendar-day{
    color:#007755;
}

/* ✅ 미래 날짜: 아이콘 없이 연한 회색으로만 표시 */
.bhem-calendar-future{
    background:#fafafa;
    border-color:#eee;
}

.bhem-calendar-future .bhem-calendar-day{
    color:#cccccc;
}


.bhem-calendar-has-note .bhem-calendar-icon-link{
    display:inline-block;
    font-size:13px;
    text-decoration:none;
    color:#007755;
    font-weight:700;
}

.bhem-calendar-has-note .bhem-calendar-icon-link:hover{
    text-decoration:underline;
}


/* 비회원용 달력 안내 문구 */
.bhem-calendar-only-member{
    padding:16px 8px;
    text-align:center;
    font-size:13px;
    color:#555;
}


/* 범례 */
.bhem-calendar-legend{
    margin-top:8px;
    display:flex;
    gap:8px;
    font-size:11px;
}

.bhem-calendar-legend-item{
    display:flex;
    align-items:center;
    gap:4px;
}

.bhem-calendar-legend-swatch{
    width:14px;
    height:14px;
    border-radius:4px;
    border:1px solid #ddd;
}

.bhem-calendar-legend-swatch.has{
    background:#f0faf4;
    border-color:#c2e5d0;
}

.bhem-calendar-legend-swatch.none{
    background:#f8f8f8;
}

.bhem-calendar-close{
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    font-size:12px;
    border-radius:6px;
    border:1px solid #ccc;
    background:#f8f8f8;
    cursor:pointer;
    color:#111;            /* 기본 텍스트 색: 검정 */
}

.bhem-calendar-close:hover{
    background:#eee;
    color:#111;            /* hover 시에도 검정 유지 */
}




/* ▽ 입력창 + X 버튼을 감싸는 래퍼 (폭 300px) */
.bhem-note-search-input-wrap{
    position:relative;
    width:300px;
    max-width:100%;
}

/* ▽ 검색어 입력창: X 버튼 공간을 위해 오른쪽 패딩을 조금 넓힘 */
.bhem-note-search-input{
    width:100%;
    height:36px !important;          /* 버튼과 강제 동일 높이 */
    box-sizing:border-box;
    padding:0 28px 0 10px !important;/* 오른쪽 여유: X 버튼 자리 */
    font-size:13px;
    border:1px solid #ccc;
    border-radius:4px;
}

/* ▽ X 삭제 버튼 */
.bhem-search-clear-btn{
    position:absolute;
    top:50%;
    right:6px;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    padding:0;
    border:none;
    border-radius:50%;
    background:transparent;
    color:#888;
    font-size:14px;
    line-height:1;
    cursor:pointer;
}

.bhem-search-clear-btn:hover{
    background:#f0f0f0;
    color:#555;
}

/* ▽ 검색 버튼 – 작은 버튼 공통(bhem-btn-sm) 모양 + 검색 전용 색
   ※ 검색 버튼에서만 패딩을 조정하고 싶으므로
      .bhem-btn-sm 전체가 아니라 "검색 버튼 + 작은 버튼" 조합에만 적용 */
.bhem-btn-search.bhem-btn-sm{
    padding:0 14px;                   /* 위아래는 0, 좌우만 여유 → 높이는 height로 통일 */
    font-size:12px;
    border-radius:6px;
}

/* 검색 버튼 자체 스타일 */
.bhem-btn-search{
    height:36px !important;           /* 입력창과 강제 동일 */
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid #ccc;
    color:#111;

    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

/* 검색 버튼 hover – 연한 회색, 텍스트는 그대로 검정 */
.bhem-btn-search:hover{
    background:#f0f0f0;
    border-color:#ccc;
    color:#111;
    text-decoration:none;
}




    /* ▽ 검색으로 걸러진 행: 전체 행을 음영(#009966) + 글자색(화이트) 처리 */
    .bhem-search-hit{
        background:#009966 !important;
        color:#fff !important;
    }
    .bhem-search-hit a{
        color:#fff !important;
        text-decoration:none;
    }



/* ✅ PC(가로 769px 이상)에서만 hover 시 색상 변경
   - 색상만 #009966 로 변경, 밑줄은 계속 없음 */
@media (min-width: 769px){
    .bhem-title a:hover{
        color:#009966 !important;     /* ✅ PC hover: 초록색으로 */
        text-decoration:none !important;
    }
}






/* ▽ 나의 감정노트 상단 검색창 (우측 정렬) */
.bhem-note-search-wrap{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
}
.bhem-note-search-input{
    width:250px;
    max-width:100%;
    padding:4px 8px;
    font-size:13px;
    border:1px solid #ccc;
    border-radius:4px;
}

/* ▽ 검색어 하이라이트: "글로벌"처럼 매칭된 글자만 강조 */
.bhem-search-mark{
    background:#009966;
    color:#fff;
    padding:0 1px;
}

/* ▽ 페이지 번호 공통 스타일 (워드프레스 page-numbers 활용) */
.bhem-pagination .page-numbers{
    display:inline-block;
    margin:0 2px;
    font-size:13px;
    color:#111;
    text-decoration:none;
}
.bhem-pagination .page-numbers:hover{
    text-decoration:none;
}
.bhem-pagination .page-numbers.current{
    font-weight:700;
}









/* 이하 다른 스타일 그대로 유지 */
.bhem-controls{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:12px}
.bhem-controls .bhem-btn-dark:hover{background:#000}
.bhem-controls .bhem-btn-danger:hover{background:#d63638}

/* 상세 박스 */
.bhem-detail{max-width:960px;margin:0 auto;padding:16px}
.bhem-detail h1{margin:0 0 10px 0;font-size:22px}
.bhem-meta-row{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0;color:#444;font-size:13px}
.bhem-stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0}
        /* 상세/리스트 컨테이너 – 외곽 테두리 제거 */
.bhem-block{
    border:none;           /* 전체 박스 테두리 제거 */
    border-radius:0;       /* 라운드도 제거 (원하면 남겨도 됨) */
    padding:12px;
    background:#fff;       /* 배경은 유지해서 텍스트 가독성 확보 */
}
        .bhem-body{margin-top:10px;line-height:1.7;font-size:14px}
        .bhem-vote-row{display:flex;gap:8px;justify-content:center;margin:16px 0 10px 0}
        .bhem-nav-col{display:flex;flex-direction:column;gap:6px;margin-top:16px}
        .bhem-nav-link{display:flex;gap:8px;align-items:center;text-decoration:none}
        .bhem-nav-link span{color:#2271b1}
        .bhem-nav-link:hover span{text-decoration:underline}
        .bhem-icon{font-style:normal}

        /* 댓글 영역 */
        .bhem-comments{margin-top:18px}
        .bhem-comments h3{font-size:15px;margin:0 0 8px 0}
        .bhem-login-hint{font-size:12px;color:#777}
        .bhem-c-actions{display:flex;gap:8px;align-items:center;font-size:12px;margin-top:4px}
        .bhem-c-actions form{display:inline}
        .bhem-c-editform textarea{width:100%}

        /* 댓글 리스트/스레드 들여쓰기 */
        .commentlist .children{margin-left:18px;border-left:2px solid #f0f0f0;padding-left:10px}


/* =========================
   감정노트 리스트 – 모바일 기본(카드형)
   ========================= */

/* 기본: 모바일 기준(카드형) */

/* 테이블 기본 */
.bhem-table{
    width:100%;
    border-collapse:collapse;
}

/* 모바일에서는 헤더 숨김 */
.bhem-table thead{
    display:none;
}

/* 모바일 기본: PC용 행 숨김, 모바일 행만 사용 */
.bhem-row-desktop{
    display:none;
}
.bhem-row-mobile{
    display:table-row;
}

/* 테이블 셀은 카드 컨테이너 안에서 여백을 관리하므로 최소화 */
.bhem-table th,
.bhem-table td{
    border:none;
    padding:0;
}

/* 카드 한 개 = 감정노트 한 건
   - 좌우 여백 동일
   - 글과 글 사이에만 구분선(아래 선) 보이게 */
.bhem-mobile-card{
    padding:10px 16px;
    border-bottom:1px solid #eee;
}

/* 모바일 제목 */
.bhem-mobile-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.bhem-mobile-title a{
    color:#111;
    text-decoration:none;
}
.bhem-mobile-title a:hover{
    text-decoration:underline;
}

/* 모바일 본문 요약 */
.bhem-mobile-message{
    font-size:13px;
    color:#666;
    margin-bottom:6px;
}

/* 선택한 마음 : 지침, 멍함 · 마음 점수 : 35점 */
.bhem-mobile-emotion{
    font-size:12px;
    color:#999;
    margin-bottom:8px;
}

/* 하단 메타 – 날짜 / 상태 / 댓글 수 + 버튼 정렬 */
.bhem-mobile-meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:#999;
}
.bhem-mobile-meta-left{
    display:flex;
    align-items:center;
    gap:8px;
}
.bhem-mobile-date{
    font-size:12px;
}
.bhem-mobile-status{
    font-size:11px;
}
.bhem-mobile-comments{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.bhem-mobile-comment-icon{
    font-size:11px;
}

/* =========================
   PC(가로 769px 이상) – 한국형 게시판 스타일
   ========================= */
@media (min-width: 769px){

    /* 테이블 머리줄 보이기 */
    .bhem-table thead{
        display:table-header-group;
    }

    /* 테이블 셀 – 가로줄만 있는 한국형 게시판 */
    .bhem-table{
        width:100%;
        border-collapse:collapse;

        /* 🔹 헤더에서 지정한 width 값을 기준으로 고정 레이아웃 */
        table-layout:fixed;
    }

     .bhem-table th,
    .bhem-table td{
        border:none;
        border-bottom:1px solid #e8e8e8;
        padding:8px 10px;
        font-size:13px;
        /* 데이터 기본 정렬은 왼쪽 (제목이 왼쪽 정렬이기 때문) */
        text-align:left;
    }

    .bhem-table th{
        background:#fafafa;
        font-weight:600;
        text-align:center;   /* 헤더는 항상 가운데 */
        white-space:nowrap;
    }

    /* 체크박스 칼럼: 폭 및 정렬 고정 (헤더/데이터 모두) */
    .bhem-table th:first-child,
    .bhem-table td:first-child{
        width:42px;
        text-align:center;
    }
    
    /* 감정 칼럼: 고정 폭 + 한 줄 + 말줄임 (좀 더 넓게) */
    .bhem-col-emotion{
        width:200px;          /* ▶ 감정 폭 넓힌 부분 */
        max-width:200px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* 번호/날짜/감정/점수/상태/설정 – 가운데 정렬 + 줄바꿈 방지 */
    .bhem-table td.bhem-center{
        text-align:center;    /* ▶ 데이터 가운데 정렬 */
        white-space:nowrap;
    }

    
    
    
    
     /* PC에서 체크박스 칼럼 폭/정렬 고정해서 헤더와 내용 칸 맞추기 */
    .bhem-table th:first-child,
    .bhem-table td:first-child{
        width:42px;          /* 헤더에서 준 width와 동일 */
        text-align:center;   /* 체크박스를 가운데 정렬 */
    }
   
   
   
   

    /* PC용 행만 보이게 */
    .bhem-row-desktop{
        display:table-row;
    }
    .bhem-row-mobile{
        display:none;
    }

    /* 모바일 카드 컨테이너는 PC에서 숨김 */
    .bhem-mobile-card{
        display:none;
    }

    /* 제목 셀: 한 줄 + 말줄임 처리 */
    .bhem-title{
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .bhem-title a{
        display:inline-block;
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        color:#111;
        text-decoration:none;
    }
    .bhem-title a:hover{
        color:#009966;
        text-decoration:none;
    }    
}

/* ===== write-form 화면 전용 스타일 (기존 inline style 이관) ===== */
/* 상단 요약 문장 */
    .bhem-emo-summary{
        margin:10px 0 6px;
        font-size:14px;
        color:#111827;
    }
    .bhem-emo-summary span{
        font-weight:600;
    }

    .bhem-emo-toolbar{
        display:flex;
        align-items:center;
        gap:8px;
        margin:4px 0 10px;
        font-size:13px;
    }

    /* 텍스트형 버튼 */
    .bhem-emo-edit-btn{
        padding:0;
        border:none;
        background:none;
        cursor:pointer;
        color:#111827;
        font-size:13px;
    }
    .bhem-emo-edit-btn:hover{
        text-decoration:underline;
    }

    .bhem-emo-status{
        font-size:12px;
        color:#b91c1c; /* 부족할 때 경고 느낌 */
    }

    .bhem-emo-label{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        margin:10px 0 4px;
        font-size:13px;
    }
    .bhem-emo-counter{
        font-size:12px;
        color:#6b7280;
    }

    /* 선택된 칩 영역은 화면에서는 숨김 (기존 것 감추기) */
    .bhem-emo-selected{
        display:none;
    }

    /* 인라인 태그 + X 아이콘 (오늘의 감정은 ... 여기에 표시) */
    .bhem-emo-tag-inline{
        border:none;
        background:none;
        cursor:pointer;
        color:#111827;
        font-size:13px;
        padding:0 2px;
    }
    .bhem-emo-tag-inline .bhem-emo-tag-x{
        margin-left:2px;
        font-weight:600;
    }
    .bhem-emo-tag-inline:hover .bhem-emo-tag-x{
        color:#b91c1c;
    }

    /* 감정 선택 박스 전체 */
    .bhem-emo-picker{
        margin:8px 0 12px;
        padding:10px 12px;
        border-radius:12px;
        border:1px solid #e5e7eb;
        background:#ffffff;
    }

    /* 부모 탭 영역 - 박스형 */
    .bhem-emo-parent-row{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
        margin:8px 0 6px;
        padding:6px;
        border-radius:10px;
        background:#f9fafb;
    }
    .bhem-emo-parent-tab{
        border-radius:999px;
        border:1px solid transparent;
        padding:6px 12px;
        cursor:pointer;
        font-size:13px;
        color:#111827;
        background:#f9fafb;
    }
    .bhem-emo-parent-tab.active{
        background:#10b981;       /* 진한 녹색 */
        border-color:#10b981;
        color:#ffffff;
        font-weight:600;
    }

    .bhem-emo-children-wrap{
        margin-top:8px;
    }
    .bhem-emo-children-group{
        display:none;
        flex-wrap:wrap;
        gap:6px;
    }

    /* 자식 태그 버튼: 기본 흰색, hover 연녹, 클릭 시 진녹 */
    .bhem-emo-child-btn{
        border:1px solid #e5e7eb;
        background:#ffffff;
        border-radius:999px;
        padding:5px 10px;
        font-size:13px;
        cursor:pointer;
        color:#111827;
        transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .bhem-emo-child-btn:hover{
        background:#ecfdf5;       /* 연한 녹색 */
        border-color:#6ee7b7;
    }
    .bhem-emo-child-btn.active{
        background:#10b981;       /* 클릭 시 진한 녹색 */
        border-color:#10b981;
        color:#ffffff;
    }

    @media (max-width:768px){
        .bhem-emo-parent-row{
            overflow-x:auto;
        }
        .bhem-emo-parent-tab{
            white-space:nowrap;
        }
    }

    /* 공개 여부 토글 버튼 */
    .bhem-public-toggle{
        display:inline-flex;
        gap:6px;
        margin-top:4px;
    }
    .bhem-public-btn{
        padding:6px 12px;
        border-radius:999px;
        border:1px solid #374151;
        background:#374151;
        color:#ffffff;
        font-size:13px;
        cursor:pointer;
    }
    .bhem-public-btn.active{
        background:#10b981;
        border-color:#10b981;
        color:#ffffff;
    }



/* ==========================================================
   감정노트 UI 톤 통일 (list-view.php 기준)
   - write-form / edit-view / content-view 도 같은 게시판 느낌 유지
   - 입력폼/본문은 "전체 폭"으로 출력 (inline max-width 무력화)
   ========================================================== */

.bhem-block,
.bhem-detail{
  font-size:13px;
  line-height:1.7;
  color:#111;
}

/* 상세(글쓰기/수정/본문) 영역도 리스트와 같은 "전체 폭" 느낌 */
.bhem-detail{
  max-width:none !important;
  margin:0 !important;
  padding:12px !important;
}

@media (min-width: 768px){
  .bhem-detail{ padding:16px !important; }
}

/* 제목/본문 타이포 */
.bhem-detail .bhem-body{
  font-size:13px;
  line-height:1.8;
  color:#111;
  word-break:break-word;
}

.bhem-detail .bhem-body p{ margin:0 0 10px; }
.bhem-detail .bhem-body p:last-child{ margin-bottom:0; }

/* 폼 입력(제목/내용) 전체폭 */
.bhem-detail input[type="text"],
.bhem-detail textarea,
.bhem-block form input[type="text"],
.bhem-block form textarea{
  width:100% !important;
  max-width:none !important; /* inline max-width(640px/480px) 무력화 */
  box-sizing:border-box;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  font-size:13px;
  line-height:1.7;
}

.bhem-detail textarea{
  min-height:220px;
  resize:vertical;
}

/* 라벨/설명문도 리스트 톤으로 */
.bhem-detail label,
.bhem-detail p{
  font-size:13px;
  color:#111;
}

/* range(점수 슬라이더)도 폭 맞추기 */
.bhem-detail input[type="range"],
.bhem-block form input[type="range"]{
  width:100% !important;
}

/* 모바일에서 여백 과다 방지 */
@media (max-width: 480px){
  .bhem-detail{ padding:12px !important; }
  .bhem-detail input[type="text"],
  .bhem-detail textarea{ padding:11px 12px; border-radius:12px; }
}