/* =========================================================
   오작교 테마음악방 - 음악 전용 게시판 색 입히기 (노을빛 가을)
   기능(playlist.js)은 그대로, 색과 모양만 바꿉니다.
   이 파일을 빼면 원래 모양으로 돌아갑니다.
   ========================================================= */
:root {
  --mb-plum: var(--oj-accent, #6B4A6E);
  --mb-plum-d: #4E3350;
  --mb-plum-50: #F4ECF3;
  --mb-plum-100: #EADCE8;
  --mb-beige: #F7F1E8;
  --mb-line: #EFE4D6;
  --mb-text: #3D3229;
  --mb-muted: #8A7759;
  --mb-peach: #E2B5A4;
}

/* ---------- 게시판 상단 안내글 ---------- */
div[style*="fff8e1"] {
  background: #FBF3E6 !important;
  border: 1px solid #EAD9BF !important;
  border-radius: 14px !important;
  color: #5A4A36 !important;
  padding: 16px 20px !important;
}

/* ---------- 게시판 카드 ---------- */
.bugs_board {
  background: #fff !important;
  border: 1px solid var(--mb-line);
  border-radius: 18px !important;
  padding: 22px 24px !important;
  box-shadow: 0 6px 20px rgba(61, 50, 41, .06);
  margin-bottom: 110px !important;
}
.bugs_board h2 {
  font-family: 'Noto Serif KR', serif;
  font-size: 24px !important;
  color: var(--mb-plum-d) !important;
}

/* ---------- 위쪽 도구 버튼 ---------- */
.bugs_board .btn_white,
.bugs_board .btn_dark,
.bugs_board .btn_semi,
.bugs_board .btn_yellow,
.bugs_board .btn_ye,
.bugs_board button.btn_white,
.bugs_board button.btn_dark,
.bugs_board button.btn_semi {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 13px !important;
  border: 1px solid #E6D8CC !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--mb-plum-d) !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1 !important;
  cursor: pointer;
  text-decoration: none !important;
  box-sizing: border-box;
}
.bugs_board .btn_dark { background: var(--mb-plum-50) !important; border-color: var(--mb-plum-100) !important; }
.bugs_board .btn_semi { background: #FBF0E9 !important; border-color: #EDD5C6 !important; }
.bugs_board .btn_white:hover,
.bugs_board .btn_dark:hover,
.bugs_board .btn_semi:hover,
.bugs_board .btn_yellow:hover,
.bugs_board .btn_ye:hover {
  background: var(--mb-plum) !important;
  border-color: var(--mb-plum) !important;
  color: #fff !important;
}
.bugs_board #btnDeleteSelected { background: #fff !important; border-color: #E8C3C3 !important; color: #B3413A !important; }
.bugs_board #btnDeleteSelected:hover { background: #B3413A !important; border-color: #B3413A !important; color: #fff !important; }
.bugs_board .btn_ye { color: var(--mb-plum) !important; }

/* 검색창 */
.bugs_board input[type="text"],
.bugs_board input[type="search"] {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #E2D5C4;
  border-radius: 999px;
  background: #FFFDF8;
  font-family: inherit;
  font-size: 14px;
  color: var(--mb-text);
  outline: none;
}
.bugs_board input[type="text"]:focus,
.bugs_board input[type="search"]:focus { border-color: var(--mb-plum); box-shadow: 0 0 0 3px rgba(107, 74, 110, .12); }

/* ---------- 곡 목록 표 ---------- */
.bugs_list { border: 0 !important; box-shadow: none !important; border-radius: 12px; overflow: hidden; }
.bugs_list th {
  background: var(--mb-beige) !important;
  color: var(--mb-plum-d) !important;
  font-weight: 600;
  font-size: 13.5px;
  border-bottom: 1px solid var(--mb-line) !important;
}
.bugs_list td {
  color: var(--mb-text) !important;
  font-size: 14.5px;
  border-bottom: 1px solid #F3ECE2 !important;
  transition: background .15s;
}
.bugs_list .track_row:hover td { background: #FCF8F2 !important; }
.bugs_list a.track_title,
.bugs_list td a { color: var(--mb-text) !important; }
.bugs_list a.track_title:hover { color: var(--mb-plum) !important; }
.bugs_list input[type="checkbox"] { accent-color: var(--mb-plum); width: 16px; height: 16px; }
.bugs_list .thumb_img,
.bugs_list .thumb_empty { border-radius: 8px !important; box-shadow: 0 2px 6px rgba(61, 50, 41, .12); }
.bugs_list .thumb_empty { background: linear-gradient(135deg, #F4E3C9, #E2B5A4 60%, #B98FA0) !important; }

/* 지금 재생 중인 곡 */
.track_row.playing td,
.bugs_list .track_row.playing td { background: var(--mb-plum-50) !important; color: var(--mb-plum-d) !important; }
.track_row.playing td a,
.bugs_list .track_row.playing a.track_title { color: var(--mb-plum) !important; }

/* 가사&정보 버튼 */
.bugs_list .btn_lyrics {
  background: #fff !important;
  border: 1px solid var(--mb-plum-100) !important;
  color: var(--mb-plum) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
}
.bugs_list .btn_lyrics:hover { background: var(--mb-plum-50) !important; }

/* 줄마다 있는 재생 버튼 */
.bugs_list .btn_row_play {
  background: var(--mb-plum) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 8px rgba(107, 74, 110, .28);
  transition: transform .15s, background .15s;
}
.bugs_list .btn_row_play:hover { background: #8A6690 !important; transform: scale(1.08); }

/* 가사 펼침 줄 */
.lyrics_row td { background: #FFFBF3 !important; border-left: 3px solid var(--mb-peach) !important; }

/* ---------- 페이지 번호 ---------- */
.mp_pages a { color: #6E5D45 !important; border-radius: 999px; }
.mp_pages a:not(.btn_white):hover { background: var(--mb-plum-50); color: var(--mb-plum) !important; }
.mp_pages span[style*="ff3b6b"] { background: var(--mb-plum) !important; }
.mp_pages .btn_white {
  display: inline-flex !important; align-items: center; height: 32px; padding: 0 14px !important;
  border: 1px solid #E6D8CC !important; border-radius: 999px !important; background: #fff !important; color: var(--mb-plum-d) !important;
}

/* ---------- 가사 팝업 ---------- */
#lyricsModal > div { border-radius: 18px !important; }
#lyricsTitle { color: var(--mb-plum-d) !important; font-family: 'Noto Serif KR', serif; border-bottom-color: var(--mb-line) !important; }
#closeLyrics { background: var(--mb-plum) !important; }

/* ---------- 아래쪽 연주기 막대 ---------- */
.bugs_player,
#bugsPlayer {
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(90deg, #3E2B40 0%, #4E3350 55%, #5E4060 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -6px 20px rgba(40, 25, 42, .25) !important;
  padding: 10px 22px !important;
}
#bugsPlayer #pImgWrap { background: rgba(255, 255, 255, .12) !important; border-radius: 8px !important; }
#bugsPlayer #pTitle { color: #fff !important; font-weight: 600; }
#bugsPlayer button {
  border: 1px solid rgba(255, 255, 255, .45) !important;
  color: #fff !important;
  background: transparent !important;
}
#bugsPlayer button:hover { background: rgba(255, 255, 255, .15) !important; }
#bugsPlayer #pPlay {
  background: #fff !important;
  color: var(--mb-plum-d) !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
#bugsPlayer #pCur, #bugsPlayer #pDur { color: rgba(255, 255, 255, .8); font-size: 12px; }
#bugsPlayer input[type="range"] { accent-color: var(--mb-peach); }

@media (max-width: 760px) {
  .bugs_board { padding: 14px 12px !important; border-radius: 14px !important; }
  .bugs_board h2 { font-size: 20px !important; }
  .bugs_player, #bugsPlayer { padding: 8px 12px !important; }
}

/* ===== v2: 글자 조금 더 크게, 재생 중인 곡 더 또렷하게 ===== */
.bugs_board .btn_white,
.bugs_board .btn_dark,
.bugs_board .btn_semi,
.bugs_board .btn_yellow,
.bugs_board .btn_ye,
.bugs_board button.btn_white,
.bugs_board button.btn_dark,
.bugs_board button.btn_semi { height: 38px; padding: 0 15px !important; font-size: 14.5px !important; }
.bugs_list th { font-size: 15px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
.bugs_list td { font-size: 16px !important; padding-top: 13px !important; padding-bottom: 13px !important; }
.bugs_list a.track_title { font-size: 16.5px !important; }
.bugs_list .btn_lyrics { font-size: 13.5px !important; padding: 6px 14px !important; }
.bugs_list .btn_row_play { width: 38px !important; height: 38px !important; font-size: 14px; }
.mp_pages { font-size: 15.5px; }
.mp_pages .btn_white { height: 36px; font-size: 14.5px !important; }
.bugs_board input[type="text"],
.bugs_board input[type="search"] { height: 40px; font-size: 15px; }
#bugsPlayer #pTitle { font-size: 15.5px; }

.track_row.playing td,
.bugs_list .track_row.playing td {
  background: #E6D2E3 !important;
  color: var(--mb-plum-d) !important;
  font-weight: 600;
}
.bugs_list .track_row.playing td:first-child { box-shadow: inset 4px 0 0 var(--mb-plum); }
.track_row.playing td a,
.bugs_list .track_row.playing a.track_title { color: var(--mb-plum-d) !important; font-weight: 700 !important; }
.bugs_list .track_row.playing .btn_row_play { background: var(--mb-plum-d) !important; box-shadow: 0 0 0 4px rgba(107, 74, 110, .22); }

/* 연주기 막대에 푸터가 가리지 않도록: 페이지 아래에 연주기 높이만큼 여백 */
#oj-body { padding-bottom: 84px; }
.oj-footer { position: relative; z-index: 1; }
.oj-totop { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 760px) {
  #oj-body { padding-bottom: 76px; }
  .oj-totop { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
}