:root{
    --highlight-color:#16a34a;
    --hover-bg:#f3f4f6;
    --alpha-bg:#f9fafb;
    --text-color:#111827;
    --muted-text:#6b7280;
    --line-color:#e5e7eb;
    --btn-green:#16a34a;
    --btn-green-hover:#15803d;
    --btn-dark:#111827;
    --btn-dark-hover:#374151;
  }

  .bh-wrap{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:16px;
    color:var(--text-color);
    font-family:'Noto Sans KR',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background-color:#ffffff;
  }

  /* 플레이어 섹션: 처음엔 숨김 */
  .player-section{
    margin:20px 0 10px;
    display:none; /* ✅ 재생 전에는 전체 플레이어 숨김 */
  }

  .now-title-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
    gap:8px;
  }

  .now-title{
    font-size:17px;
    font-weight:700;
    color:var(--text-color);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:10px;
    cursor:default;  /* ✅ 기본은 화살표 */
  }
  .now-title.active{
    color:var(--highlight-color);
  }

  .link-icon{
    width:22px;
    height:22px;
    display:inline-flex;
    flex:0 0 auto;
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
  }

  .link-icon img{
    width:100%;
    height:100%;
    display:block;
  }

  /* 커버 + 제목/아티스트 + 메시지/태그 레이아웃 */
  .info-main-row {
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin:12px 0 16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line-color); /* 🔹 아래 긴 바만 남김 */
    background:transparent;                    /* 🔹 배경 박스 제거 */
    border-radius:0;
    border:none;
  }

  .info-cover {
    flex:0 0 auto;
    padding-right:16px;
    margin-right:8px;
    border-right:1px solid var(--line-color); /* 🔹 커버 오른쪽 세로 구분바 | */
  }

  .info-cover img {
    width:110px;
    height:110px;
    border-radius:8px;
    object-fit:cover;
    display:block;
    box-shadow:none; /* 🔹 그림자 제거 */
  }

  .info-box {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  /* 제목 + 아티스트 한 줄 */
  .info-title-line {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:4px;
    row-gap:2px;
    font-size:16px;
    font-weight:700;
    color:var(--text-color);
  }
  
  
    .info-now-label{
    font-size:13px;
    font-weight:700;
    color:var(--muted-text);
    display:inline-flex;
    align-items:center;
    gap:4px;
  }

  .info-now-helper{
    font-size:11px;
    font-weight:400;
    color:var(--muted-text);
  }

  
  

  .info-title-text {
    /* 필요하면 폰트 크기만 조절해서 쓰면 됨 */
  }

  .info-dash {
    opacity:.7; /* " - " 살짝 연하게 */
  }

  .info-artist-inline {
    font-size:14px;
    color:var(--muted-text);
  }

  .info-msg {
    font-size:14px;
    line-height:1.5;
    color:var(--text-color);
    margin:2px 0;
  }

  .info-meta {
    font-size:12px;
    color:var(--muted-text);
  }

  /* 🔹 감정노트 버튼 구역 */
.info-note-link{
  margin-top:6px;
}

/* 🔹 텍스트 링크 스타일 */
.note-link-textlink{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;   /* 밑줄 제거 */
  color:#059669;          /* 기본 녹색 */
  background:none;        /* 배경 없음 */
  border:none;            /* 혹시 들어갈지 모를 테두리 제거 */
}

/* 아이콘, 텍스트는 부모 색상 따라감 */
.note-link-textlink .note-link-icon,
.note-link-textlink .note-link-text{
  color:inherit;
}

/* 🔹 마우스 오버 시: 글자/아이콘만 검정색으로 */
.note-link-textlink:hover{
  color:#000000;
}

  /* 예전 구조에서 커버 아래 아티스트 클래스는 숨김 처리 */
  .info-artist {
    display:none;
  }

  @media (max-width: 640px) {
    .info-main-row {
      gap:12px;
      margin:10px 0 14px;
      padding-bottom:10px;
    }
    .info-cover{
      padding-right:12px;
      margin-right:4px;
    }
    .info-cover img {
      width:90px;
      height:90px;
    }
    .info-box {
      text-align:left;  /* 🔹 모바일에서도 좌측 정렬 유지 */
    }
    .info-msg,
    .info-meta{
      text-align:left;
    }
  }

  /* audio 태그는 숨김 (실제 재생만 담당) */
  #bhAudio{
    width:0;
    height:0;
    opacity:0;
    position:absolute;
    pointer-events:none;
  }

  /* 오디오 비주얼 (진행바 + 커스텀 버튼) */
  .audio-visual{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .audio-control-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:2px;
  }

  .audio-progress{
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    color:var(--muted-text);
    min-width:0;
  }

  .audio-progress .time{
    min-width:38px;
    text-align:center;
  }

  .audio-progress .progress-bar{
    flex:1;
    height:6px;
    border-radius:999px;
    background:#e5e7eb;
    overflow:hidden;
    cursor:pointer;
  }

  .audio-progress .progress-inner{
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(to right, #22c55e, #0ea5e9);
    transition:width .15s linear;
  }

  .audio-buttons{
    display:flex;
    gap:6px;
    align-items:center;
    flex-shrink:0;
  }

  .btn-ctrl{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:76px;
    padding:6px 10px;
    font-size:12px;
    border-radius:8px;
    border:1px solid var(--line-color);
    background:#ffffff;
    color:var(--text-color);
    cursor:pointer;
    white-space:nowrap;
  }

  .btn-ctrl:hover{
    background:#f3f4f6;
    color:var(--text-color);
    border-color:var(--line-color);
  }

  .btn-ctrl:disabled{
    opacity:0.5;
    cursor:default;
  }

  /* 리스트 영역 */
.list-wrap{
  margin-top:18px;
  padding:0 8px;  /* 🔹 테이블 전체에 좌우 여백 추가 */
}
.result-count{
  font-size:13px;
  color:var(--muted-text);
  margin:0 0 6px 0;
  padding:0 8px;      /* 🔹 좌우 여백 추가 (테이블과 동일) */
  text-align:right;
}

  .table-header{
    display:grid;
    grid-template-columns:80px 1fr 90px;
    padding:8px 10px;
    border-bottom:1px solid var(--line-color);
    font-size:13px;
    background-color:#f9fafb;
    color:var(--muted-text);
    user-select:none;
    align-items:center;
    gap:12px;
  }

  .header-chk{
    width:16px;
    height:16px;
    cursor:pointer;
  }

  .play-header{
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .grid{
    display:grid;
    grid-template-columns:1fr;
  }

  .item{
    display:grid;
    grid-template-columns:80px 1fr 90px;
    align-items:center;
    gap:12px;
    padding:8px 10px;
    border-bottom:1px solid var(--line-color);
    transition:background-color .15s ease;
    background-color:#ffffff;
  }

  .item.hidden-item{
    display:none;
  }

  .item:hover{
    background-color:var(--hover-bg);
  }

  .item.playing{
    background-color:#ecfdf3;
  }

  .item.playing .title{
    color:var(--highlight-color);
    font-weight:700;
  }

  .thumb-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
  }

  .chk{
    width:16px;
    height:16px;
    cursor:pointer;
  }

  .thumb{
    width:40px;
    height:40px;
    background:#e5e7eb;
    border-radius:6px;
    flex:0 0 auto;
    overflow:hidden;
  }

  .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    justify-content:center;
    min-width:0;
  }

  .title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
    font-size:14px;
    color:var(--text-color);
    max-width:100%;
  }

  .title.active{
    color:var(--highlight-color);
    font-weight:700;
  }

  .meta-title{
    font-size:13px;
    color:var(--muted-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    max-width:100%;
  }

  .meta-title-desktop{
    display:block;
  }

  .meta-title-mobile-intent{
    display:none;
  }

  .play-btn{
    background:transparent;
    border:none;
    padding:0;
    margin:0 auto;
    width:28px;
    height:28px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:0;
    box-shadow:none;
    color:inherit;
  }

  .play-btn img{
    width:100%;
    height:100%;
    display:block;
  }

  .play-btn:hover{
    background:transparent;
    box-shadow:none;
    color:inherit;
    filter:none;
    opacity:1;
  }

  .play-btn:focus{
    outline:2px solid rgba(15,23,42,.25);
    outline-offset:2px;
  }

  .sort-title{
    color:var(--muted-text);
    cursor:pointer;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:4px;
  }

  .sort-title:hover{
    color:var(--text-color);
  }

  .sort-title .indicator{
    font-size:12px;
    opacity:.75;
  }

.list-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
  margin-bottom:8px;
  padding:0 8px;      /* 🔹 좌우 여백 추가 (테이블/카운트와 동일) */
  flex-wrap:wrap;
  gap:8px;
}
  .list-controls-left{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

 .cbtn{
  border-radius:6px;
  padding:6px 10px;   /* 🔹 높이/폭 모두 살짝 줄임 */
  font-size:12px;     /* 🔹 글자도 한 단계 축소 */
  cursor:pointer;
}

/* 모바일에서 더 살짝 줄이고 싶으면 선택적으로 추가 */
@media (max-width:768px){
  .cbtn{
    padding:5px 9px;
    font-size:11px;
  }
}

  /* 🔹 모바일에서 버튼 줄을 양옆으로 조금 더 안쪽으로 + 버튼 세로 크기 키우기 */
  .list-controls{
    padding:0 12px;         /* 기본 8px → 모바일에서만 12px로 살짝 더 안쪽 */
  }

  .cbtn{
    padding:8px 14px;       /* 세로 6 → 8로, 가로도 조금 여유 있게 */
    font-size:12px;         /* 글자 크기는 PC와 동일 유지 */
  }

  .cbtn-green{
    background:var(--btn-green);
    color:#ffffff;
    border:1px solid var(--btn-green);
  }

  .cbtn-green:hover{
    background:var(--btn-green-hover);
  }

  .cbtn-dark{
    background:var(--btn-dark);
    color:#ffffff;
    border:1px solid var(--btn-dark);
  }

  .cbtn-dark:hover{
    background:var(--btn-dark-hover);
  }

  @media (max-width:768px){
  .bh-wrap{
    padding:12px;
  }
  .now-title{
    font-size:15px;
  }
  .title{
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .item{
    grid-template-columns:75px 1fr 60px;
    padding:6px 8px;
    align-items:center;
    gap:12px;
  }

  /* 헤더 타이틀(제목)만 조금 더 왼쪽으로 붙이고 싶을 때 */
  .table-header{
    grid-template-columns:75px 1fr 60px; /* 모바일에서 체크박스 영역 살짝 줄임 */
    padding:6px 8px;
    align-items:center;
    gap:12px;
  }
  .table-header .sort-title{
    margin-left:-4px;
  }

  .thumb-wrap{
    gap:8px;
  }
  .thumb{
    width:48px;
    height:48px;
  }

  /* 모바일: 메타는 감정의도만 표시 */
  .meta-title-desktop{
    display:none;
  }
  .meta-title-mobile-intent{
    display:block;
  }

  /* 모바일: 진행바 위, 버튼 아래 배치 */
  .audio-control-row{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .audio-progress{
    order:1;
  }
  .audio-buttons{
    order:2;
    justify-content:flex-start;
  }

  /* 🔹 여기서부터가 모바일 전용 버튼/여백 조정 */
  .list-controls{
    padding:0 12px;         /* 기본 8px → 모바일에서만 12px로 살짝 더 안쪽 */
  }

  .cbtn{
    padding:8px 14px;       /* 세로/가로 모두 조금 넉넉하게 */
    font-size:12px;         /* PC와 같은 크기, 단 높이만 키움 */
  }
}


/* =====================================================
 * ✅ 감정노트(list-view.php) 버튼/페이지네이션 스타일을
 * box-music-feelings에서도 동일하게 사용
 * ===================================================== */
.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:hover{
  background:#ededed;
  border-color:#bdbdbd;
  color:#111;
  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;
}

/* ✅ 페이지네이션(기본 스타일) - emotion-note(list-view.php)와 동일 톤 */
.bhem-music-feelings-pagination{
  margin:0 0 10px;          /* 버튼 줄 아래로 내려오도록 */
  text-align:center;
  padding:0 8px;
  box-sizing:border-box;
}
.bhem-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  margin:0 4px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  color:#111;
  font-weight:600;
  font-size:13px;
  line-height:1;
  text-decoration:none !important;
  -webkit-tap-highlight-color: transparent;
  outline:none !important;
  box-shadow:none !important;
  box-sizing:border-box;
}
.bhem-pagination .page-numbers:hover{
  background:#f0f0f0;
  text-decoration:none !important;
}
.bhem-pagination .page-numbers.current{
  background:#f0f0f0;
  border-color:#bbb;
  font-weight:700;
}

/* === Now Playing Card (Box) === */
.nowplay-card{
  background:#eef8f4;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  padding:14px 14px 12px;
}

.nowplay-card .info-main-row{
  margin:0 0 10px;
  padding-bottom:0;
  border-bottom:none;
}

.bhem-queue-info{
  margin:4px 0 6px;
}

.bhem-player-divider{
  border-top:1px solid var(--line-color);
  margin:10px 0 12px;
}

.bhem-queue-count{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
}

.bhem-queue-summary{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
}

.bhem-queue-current,
.bhem-queue-next,
.bhem-queue-line{
  font-size:13px;
  line-height:1.45;
}

.bhem-queue-current-title,
.bhem-queue-next-title{
  font-weight:600;
}

.bhem-queue-sep{
  margin:0 6px;
  color:var(--line-color);
}

.bhem-muted{
  color:#9ca3af; /* 연한 회색 */
}


/* PC: "현재 곡 / 다음 곡"을 한 줄로 안정적으로 표시 */
.bhem-queue-desktop .bhem-queue-line{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
}
.bhem-queue-desktop .bhem-queue-sep{
  flex:0 0 14px; /* 라벨 사이 여백 */
}
.bhem-queue-desktop .bhem-queue-current-title,
.bhem-queue-desktop .bhem-queue-next-title{
  display:inline-block;
  min-width:0;
  max-width:46%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bhem-queue-mobile{ display:none; }
.bhem-queue-desktop{ display:block; }

@media (max-width:768px){
  .bhem-queue-mobile{ display:block; }
  .bhem-queue-desktop{ display:none; }

  .bhem-queue-count{ font-size:13px; }
  .bhem-queue-current,
  .bhem-queue-next{ font-size:13px; }
}

/* === Button focus/active hotfix (keep text color stable) ===
   대상(요청한 버튼만):
   - 리스트 하단: .bhem-btn, .bhem-btn-main  (선택 재생 / 전체 재생)
   - 플레이어 컨트롤: .btn-ctrl            (일시정지 / 음소거 / 이전곡 / 다음곡)
   목적:
   - 클릭 후 포커스(:focus) 때문에 글자색이 흰색으로 바뀌는 현상 방지
   - 클릭(:active) 중에도 hover 스타일 유지
*/

/* 리스트 하단 버튼 */
.bhem-btn:focus,
.bhem-btn:focus-visible{
  color:#111 !important;
  background:#f7f7f7 !important;
  border-color:#ccc !important;
}
.bhem-btn:active{
  background:#ededed !important;   /* hover와 동일 */
  border-color:#bdbdbd !important; /* hover와 동일 */
  color:#111 !important;
}

/* 전체 재생(초록) */
.bhem-btn-main:focus,
.bhem-btn-main:focus-visible{
  background:#009966 !important;
  border-color:#008055 !important;
  color:#fff !important;
}
.bhem-btn-main:active{
  background:#008055 !important;   /* hover와 동일 */
  border-color:#006644 !important; /* hover와 동일 */
  color:#fff !important;
}

/* 플레이어 컨트롤 버튼 */
.btn-ctrl:focus,
.btn-ctrl:focus-visible{
  color:var(--text-color) !important;
  background:#ffffff !important;
  border-color:var(--line-color) !important;
}
.btn-ctrl:active{
  background:#f3f4f6 !important;   /* hover와 동일 */
  border-color:var(--line-color) !important;
  color:var(--text-color) !important;
}


/* ============================================================
   🔔 페이지 이동 시 재생 종료 안내 모달 (box-music-feelings 전용)
   - 다른 페이지/테마 스타일에는 영향 최소화
   ============================================================ */
.bhem-leave-overlay{
  position:fixed !important;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:2147483647;
}
.bhem-leave-overlay.active{ display:flex; }
.bhem-leave-dialog{
  width:calc(100% - 48px);
  max-width:360px;
  background:#fff;
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.bhem-leave-msg{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.55;
  color:#111827;
  word-break:keep-all;
}
.bhem-leave-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.bhem-leave-btn{
  appearance:none;
  border:1px solid #d1d5db;
  background:#fff;
  color:#111827;
  border-radius:10px;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
}

.bhem-leave-btn.cancel,
.bhem-leave-btn.cancel:hover,
.bhem-leave-btn.cancel:focus,
.bhem-leave-btn.cancel:active{
  color:#111827 !important;
}
.bhem-leave-btn.cancel:focus{
  outline:none;
  box-shadow:none;
}
.bhem-leave-btn.cancel:hover{ background:#f3f4f6; color:#111827 !important; }
.bhem-leave-btn.confirm{
  background:var(--highlight-color);
  border-color:var(--highlight-color);
  color:#fff;
}
.bhem-leave-btn.confirm:hover{ filter:brightness(.95); }


/* ============================================================
   🔔 페이지 이동 시 재생 종료 안내 모달 (JS 생성형)
   - box-music-feelings 페이지에서만 사용
   - 모바일 전체화면 메뉴 오버레이보다 위에 표시되도록 z-index 최상단
   - hover 시 텍스트가 흰색으로 '변경'되는 현상 방지(취소 버튼)
   ============================================================ */
.bhem-play-alert-overlay{
  position:fixed !important;
  inset:0;
  display:none; /* JS가 필요 시 flex로 켬 */
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:2147483647;
}
.bhem-play-alert-modal{
  width:calc(100% - 48px);
  max-width:360px;
  background:#fff;
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.bhem-play-alert-title{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.55;
  color:#111827;
  word-break:keep-all;
}
.bhem-play-alert-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.bhem-play-alert-btn{
  appearance:none;
  border:1px solid #d1d5db;
  background:#fff;
  color:#111827;
  border-radius:10px;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
}

/* 취소: hover/focus/active 모두 텍스트는 진한색 유지 */
.bhem-play-alert-btn.bhem-play-alert-cancel,
.bhem-play-alert-btn.bhem-play-alert-cancel:hover,
.bhem-play-alert-btn.bhem-play-alert-cancel:focus,
.bhem-play-alert-btn.bhem-play-alert-cancel:active{
  color:#111827 !important;
}
.bhem-play-alert-btn.bhem-play-alert-cancel:hover{ background:#f3f4f6; }
.bhem-play-alert-btn.bhem-play-alert-cancel:focus{ outline:none; box-shadow:none; }

/* 이동하기: 강조색 유지(텍스트 색상은 hover 시에도 바뀌지 않음) */
.bhem-play-alert-btn.bhem-play-alert-confirm{
  background:var(--highlight-color);
  border-color:var(--highlight-color);
  color:#fff;
}
.bhem-play-alert-btn.bhem-play-alert-confirm:hover{
  filter:brightness(.95);
  color:#fff; /* hover로 흰색 '변경'되지 않도록 고정 */
}