/* ==========================================================
   myboard.css - 핫딜모아용 myboard 게시판 추가 스타일
   - 기본 모양은 사이트 공통 board.css(bd- 클래스: 목록, 가격, 보기, 글쓰기, 페이지)를 그대로 쓴다.
     head_myboard.ejs 가 style.css 다음에 이 파일을 불러오고, 여기에는 board.css 에 없는 것만 있다.
     (공지, 댓글 수, 댓글, 이모지, 삭제 버튼, 위지윅 편집기, 할인율 미리보기, 안내 화면)
   - 색은 board.css 의 :root 변수(--bd-*)를 따르고, 변수가 없을 때를 대비해 같은 값을 기본값으로 적었다.
   - 주의: .bd-wrap 에 position+z-index / transform 을 주지 않는다 (위지윅 팝업이 가려질 수 있음)
   ========================================================== */

/* ---------- 상단 ---------- */
/* 게시판 이름이 링크(<a>)라서 사이트의 a 스타일(글자 크기/굵기)이 제목을 덮지 않게 h1 값을 그대로 따른다 */
.bd-head .bd-page-title a,
.bd-head .bd-page-title a:hover,
.bd-head .bd-page-title a:focus {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* 글쓰기 화면 우측의 게시판 이름 */
.bd-head__board { font-size: .9rem; font-weight: 600; color: var(--bd-gray, #868e96); }
.bd-head__board:hover { color: var(--bd-text, #212529); text-decoration: none; }

/* ---------- 공지 ---------- */
.bd-badge {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 3px;
    letter-spacing: 0;
    color: #fff;
    background: var(--bd-text, #212529);
    border-radius: 4px;
}
.bd-badge--lg { font-size: .85rem; vertical-align: 6px; }

/* 목록 상단 공지: 썸네일 없이 한 줄로 촘촘하게 */
.bd-list--notice { border-bottom: 1px solid var(--bd-line, #e9ecef); }
.bd-item--notice { background: var(--bd-bg-soft, #f8f9fa); border-bottom-color: #fff; }
.bd-item--notice:last-child { border-bottom: 0; }
.bd-item--notice .bd-item__link { padding: 14px 12px; gap: 12px; }
.bd-item--notice .bd-item__link:hover { background: var(--bd-bg-thumb, #f1f3f5); }
.bd-item--notice .bd-item__title { font-size: 1.05rem; font-weight: 600; }
.bd-item__side { flex: 0 0 auto; font-size: .85rem; color: var(--bd-gray, #868e96); }

/* 제목 옆 댓글 수 */
.bd-item__cmt {
    margin-left: 6px;
    font-size: .9em;
    font-weight: 700;
    color: var(--bd-danger, #e03131);
}

/* 이미지 실패/없음 (board.css 의 .bd-thumb 배경색을 그대로 씀) */
.bd-thumb { display: block; }
.bd-thumb--empty { background: var(--bd-bg-thumb, #f1f3f5); }

/* ---------- 보기 ---------- */
.bd-meta__link { color: inherit; }
.bd-meta__link:hover { color: var(--bd-accent, #1c7ed6); text-decoration: none; }

.bd-inline { display: inline; margin: 0; }
.bd-footer__right { flex-wrap: wrap; justify-content: flex-end; }

/* 삭제된 글 / 안내 화면 */
.bd-notice { padding: 80px 12px; text-align: center; }
.bd-notice__text { margin: 0 0 24px; font-size: 1.15rem; color: var(--bd-text-sub, #495057); }

/* ---------- 댓글 ---------- */
.bd-comments { margin-top: 56px; }
.bd-comments__title {
    margin: 0;
    padding-bottom: 14px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bd-text, #212529);
    border-bottom: 2px solid var(--bd-text, #212529);
}
.bd-comments__count { color: var(--bd-danger, #e03131); }
.bd-comments__empty { padding: 36px 0; text-align: center; color: var(--bd-gray-light, #adb5bd); }

.bd-clist { list-style: none; margin: 0; padding: 0; }
.bd-citem { padding: 18px 2px; border-bottom: 1px solid var(--bd-line, #e9ecef); }
.bd-citem__head { margin-top: 0; font-size: .85rem; }
.bd-citem__del { margin-left: auto; }
.bd-citem__body {
    margin-top: 6px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bd-text-body, #343a40);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 작성자·날짜 줄과 같은 글자 스타일의 텍스트 버튼 (댓글 삭제) */
.bd-textbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--bd-gray, #868e96);
    cursor: pointer;
}
.bd-textbtn:hover { color: var(--bd-danger, #e03131); text-decoration: underline; text-underline-offset: 3px; }

/* 댓글 입력 */
.bd-cform { margin-top: 24px; }
.bd-cform .bd-cform__text {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
}
.bd-emojis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bd-emoji {
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    background: #fff;
    border: 1px solid var(--bd-line, #e9ecef);
    border-radius: var(--bd-radius-sm, 6px);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.bd-emoji:hover { background: var(--bd-bg-soft, #f8f9fa); border-color: var(--bd-gray-lighter, #ced4da); }
.bd-cform__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.bd-cform__count { font-size: .85rem; color: var(--bd-gray, #868e96); }

.bd-loginhint {
    margin-top: 24px;
    padding: 20px;
    text-align: center;
    font-size: .95rem;
    color: var(--bd-gray, #868e96);
    background: var(--bd-bg-soft, #f8f9fa);
    border-radius: var(--bd-radius, 8px);
}
.bd-loginhint a { font-weight: 700; color: var(--bd-text, #212529); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 글쓰기 ---------- */
.bd-deal-rate { min-height: 1.4em; margin: -6px 0 14px; font-size: .9rem; font-weight: 700; color: var(--bd-danger, #e03131); }
.bd-editor-msg { min-height: 20px; margin-top: 6px; font-size: .9rem; color: var(--bd-danger, #e03131); }

.bd-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-weight: 600;
    color: var(--bd-text-sub, #495057);
    cursor: pointer;
}
/* MDB 가 체크박스를 숨기는 경우가 있어 기본 모양으로 되돌림 */
.bd-check input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bd-text, #212529);
}

/* 편집기를 불러오기 전/실패했을 때 보이는 기본 textarea */
.bd-wrap #bdContent {
    display: block;
    width: 100%;
    min-height: 300px;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--bd-text, #212529);
    background: #fff;
    border: 1px solid var(--bd-gray-lighter, #ced4da);
    border-radius: var(--bd-radius-sm, 6px);
}

/* ---------- Summernote (밝은 테마) ---------- */
.bd-wrap .note-editor.note-frame {
    border: 1px solid var(--bd-gray-lighter, #ced4da);
    border-radius: var(--bd-radius-sm, 6px);
    box-shadow: none;
    overflow: visible;
}
.bd-wrap .note-editor .note-toolbar {
    background: var(--bd-bg-soft, #f8f9fa);
    border-bottom: 1px solid var(--bd-line, #e9ecef);
    border-radius: var(--bd-radius-sm, 6px) var(--bd-radius-sm, 6px) 0 0;
}
.bd-wrap .note-editor .note-statusbar { background: var(--bd-bg-soft, #f8f9fa); border-top: 1px solid var(--bd-line, #e9ecef); }
.bd-wrap .note-editor .note-statusbar .note-resizebar { border-top: 0; }
.bd-wrap .note-placeholder { color: var(--bd-gray-light, #adb5bd); }

/* 편집 영역은 보기 화면 본문(.bd-content)과 같은 글자 모양 */
.bd-wrap .note-editable {
    min-height: 260px;
    font-size: 1.0625rem;
    line-height: 1.85;
    letter-spacing: -0.01em;
    color: var(--bd-text-body, #343a40);
    background: #fff;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.bd-wrap .note-editable p { margin: 0 0 1rem; }
.bd-wrap .note-editable img { max-width: 100%; height: auto; }

/* 툴바 버튼: MDB 버튼 스타일(!important)을 덮어써 Bootstrap 기본 모양으로 */
.bd-wrap .note-toolbar .note-btn,
.bd-wrap .note-toolbar .btn,
.bd-wrap .note-toolbar .btn.btn-light {
    color: var(--bd-text-sub, #495057) !important;
    background-color: #fff !important;
    border: 1px solid var(--bd-gray-lighter, #ced4da) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
}
.bd-wrap .note-toolbar .note-btn:hover,
.bd-wrap .note-toolbar .note-btn:focus,
.bd-wrap .note-toolbar .note-btn.active,
.bd-wrap .note-toolbar .note-btn.show {
    color: var(--bd-text, #212529) !important;
    background-color: var(--bd-line, #e9ecef) !important;
}
.bd-wrap .note-toolbar .note-recent-color { background-color: transparent !important; }

.bd-wrap .note-dropdown-menu {
    background: #fff;
    border: 1px solid var(--bd-line, #e9ecef);
    border-radius: var(--bd-radius-sm, 6px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.bd-wrap .note-dropdown-menu .note-dropdown-item,
.bd-wrap .note-dropdown-menu a { color: var(--bd-text, #212529) !important; background-color: transparent !important; }
.bd-wrap .note-dropdown-menu .note-dropdown-item:hover,
.bd-wrap .note-dropdown-menu a:hover { background-color: var(--bd-bg-soft, #f8f9fa) !important; }

/* 그림/링크 삽입 창 (모달은 body 바로 아래에 붙기도 해서 .bd-wrap 없이 지정) */
.note-modal .modal-content,
.note-modal-content {
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 10px !important;
}
.note-modal .modal-header,
.note-modal .modal-footer,
.note-modal-header,
.note-modal-footer { background: transparent !important; border-color: #e9ecef !important; }
.note-modal .modal-title,
.note-modal-title,
.note-modal .close,
.note-modal label,
.note-modal .note-form-label { color: #212529 !important; text-shadow: none !important; }
.note-modal input[type="text"],
.note-modal input[type="url"],
.note-modal .note-input,
.note-modal input.form-control {
    height: auto !important;
    padding: 9px 12px !important;
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.note-modal .note-input:focus,
.note-modal input.form-control:focus { border-color: #212529 !important; }
.note-modal .btn-primary,
.note-modal .note-btn-primary {
    color: #fff !important;
    background-color: #212529 !important;
    border-color: #212529 !important;
    box-shadow: none !important;
}
.note-modal .btn-primary[disabled],
.note-modal .note-btn-primary[disabled] { opacity: .45 !important; }

/* ==========================================================
   모바일
   ========================================================== */
@media (max-width: 576px) {
    .bd-item--notice .bd-item__link { padding: 12px 10px; }
    .bd-item--notice .bd-item__title { font-size: 1rem; }

    .bd-footer { flex-wrap: wrap; gap: 8px; }
    .bd-footer__right .btn { padding-left: 12px; padding-right: 12px; }

    .bd-comments { margin-top: 44px; }
    .bd-emoji { width: 40px; height: 40px; }
    .bd-notice { padding: 56px 8px; }
}