/* ===== MIDI 합창 게시판 스킨 ===== */

/* 공통 버튼 */
.btn_b { display:inline-block; padding:6px 14px; border:1px solid #cfd4da; border-radius:4px; background:#fff; color:#333; font-size:13px; line-height:1.4; text-decoration:none; cursor:pointer; }
.btn_b:hover { background:#f3f5f7; }
.btn_point { background:#3b5bdb; border-color:#3b5bdb; color:#fff; }
.btn_point:hover { background:#2f49b5; }
.sound_only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }


/* 파트 버튼 */
.midi-btn { display:inline-block; padding:4px 10px; border:1px solid #3b5bdb; border-radius:14px; color:#3b5bdb; font-size:13px; text-decoration:none; background:#fff; white-space:nowrap; }
.midi-btn:hover { background:#edf0ff; }
.midi-btn.on { background:#3b5bdb; color:#fff; }
.midi-none { color:#bbb; }

/* 목록 */
.midi_list .bo_list_top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.midi_list .bo_list_total { font-size:13px; color:#666; }
.bo_list_btns, .bo_v_btns { margin:0; padding:0; list-style:none; display:flex; gap:6px; }
.tbl_wrap { overflow-x:auto; }
.midi_tbl { width:100%; border-collapse:collapse; border-top:2px solid #333; }
.midi_tbl th { padding:10px 6px; background:#f7f8fa; border-bottom:1px solid #d9dde2; font-size:13px; text-align:center; white-space:nowrap; }
.midi_tbl td { padding:9px 6px; border-bottom:1px solid #eceff2; text-align:center; font-size:14px; }
.midi_tbl td.td_subject { text-align:left; min-width:180px; }
.midi_tbl td.td_subject a { color:#222; text-decoration:none; }
.midi_tbl td.td_subject a:hover { text-decoration:underline; }
.midi_tbl .td_chk { width:36px; }
.midi_tbl .td_part { width:84px; }
.midi_tbl .bo_notice { background:#fffbea; }
.notice_icon { color:#d9480f; }
.cnt_cmt { margin-left:4px; font-size:12px; color:#3b5bdb; }
.empty_table { padding:40px 0 !important; color:#888; }
.bo_list_admin { margin:10px 0; }
.bo_sch { margin:16px 0; text-align:center; }
.bo_sch select, .bo_sch input[type=text] { height:32px; padding:0 8px; border:1px solid #cfd4da; border-radius:4px; }

/* 보기 */
.midi_view #bo_v_title { margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid #333; font-size:20px; }
.midi_parts { margin:0 0 20px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.midi_parts .midi-btn { padding:7px 16px; font-size:14px; }
.midi_parts .midi-none { padding:7px 16px; border:1px dashed #ddd; border-radius:14px; font-size:14px; }
.midi_img { margin:0 0 24px; text-align:center; }
.midi_img img { max-width:100%; height:auto; }
.img_err { color:#999; font-size:13px; }
.bo_v_btns { justify-content:flex-end; margin-top:20px; }

/* 쓰기 */
.midi_write .form_01 ul { margin:0; padding:0; list-style:none; border-top:2px solid #333; }
.midi_write .form_01 li { display:flex; align-items:center; gap:10px; padding:10px 6px; border-bottom:1px solid #eceff2; }
.midi_write .form_01 li > label:first-child { flex:0 0 110px; font-weight:bold; font-size:14px; }
.midi_write .frm_input { flex:1; min-width:0; height:34px; padding:0 8px; border:1px solid #cfd4da; border-radius:4px; box-sizing:border-box; }
.midi_write .file_del { font-size:12px; color:#666; }
.btn_confirm { margin-top:20px; text-align:center; }
.btn_confirm .btn_b { margin:0 4px; padding:9px 22px; }

/* 모바일 */
@media (max-width:640px) {
    .midi_tbl .td_part { width:auto; }
    .midi-btn { padding:3px 6px; font-size:11px; }
    .midi_write .form_01 li { flex-direction:column; align-items:stretch; }
}


/* ===== [수정] 모바일: 우측 남는 문제 해결, 합창 열 숨김 ===== */
.midi_list { max-width:100%; box-sizing:border-box; }
.midi_list .tbl_wrap { overflow-x:hidden; }
@media (max-width:640px) {
    .midi_tbl { table-layout:fixed; width:100%; }
    .midi_tbl .col_chorus { display:none; }
    .midi_tbl .td_chk { width:26px; padding-left:2px; padding-right:2px; }
    .midi_tbl .td_part { width:13%; padding:8px 1px; }
    .midi_tbl th { padding:8px 1px; font-size:12px; }
    .midi_tbl td.td_subject { min-width:0; width:auto; padding-left:6px; font-size:13px; word-break:break-all; }
    .midi_tbl .midi-btn { padding:2px 0; width:100%; box-sizing:border-box; text-align:center; font-size:11px; border-radius:10px; }
    .midi_list .bo_list_top { flex-wrap:wrap; gap:6px; }
    .bo_sch input[type=text] { width:40%; }
}


/* ===== 미디어 플레이어 ===== */
#midi_bar { display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:12px 16px; background:linear-gradient(135deg,#f3f6ff 0%,#ffffff 65%); border:1px solid #dfe5f7; border-radius:14px; box-shadow:0 4px 14px rgba(59,91,219,.10), 0 1px 2px rgba(0,0,0,.04); box-sizing:border-box; max-width:100%; }

/* 재생/정지 버튼 */
#midi_toggle { flex:0 0 auto; position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:linear-gradient(145deg,#5c7cfa,#3b5bdb); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 10px rgba(59,91,219,.35); transition:transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color:transparent; }
#midi_toggle:hover:not(:disabled) { transform:scale(1.06); box-shadow:0 6px 14px rgba(59,91,219,.42); }
#midi_toggle:active:not(:disabled) { transform:scale(.96); }
#midi_toggle:disabled { background:#cfd5e3; box-shadow:none; cursor:default; }
#midi_toggle svg { display:block; }
#midi_bar.playing #midi_toggle::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(92,124,250,.45); animation:midi_pulse 1.8s ease-out infinite; }

/* 본문 영역 */
.midi_main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.midi_title_row { display:flex; align-items:center; gap:8px; min-width:0; }
#midi_now { min-width:0; font-size:14px; font-weight:600; color:#273056; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#midi_now.loading { color:#8a94b3; font-weight:500; animation:midi_blink 1.2s ease-in-out infinite; }

/* 이퀄라이저 (재생 중에만 움직임) */
.midi_eq { flex:0 0 auto; display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.midi_eq i { display:block; width:3px; height:4px; border-radius:2px; background:#b4bdda; }
#midi_bar.playing .midi_eq i { background:#4c6ef5; animation:midi_eq .9s ease-in-out infinite; }
#midi_bar.playing .midi_eq i:nth-child(2) { animation-delay:.15s; }
#midi_bar.playing .midi_eq i:nth-child(3) { animation-delay:.3s; }
#midi_bar.playing .midi_eq i:nth-child(4) { animation-delay:.45s; }

/* 시간 + 재생 위치 바 */
.midi_time_row { display:flex; align-items:center; gap:10px; }
#midi_cur, #midi_rem { flex:0 0 auto; min-width:34px; font-size:11.5px; color:#7b86a8; font-variant-numeric:tabular-nums; }
#midi_rem { text-align:right; }
#midi_seek { -webkit-appearance:none; appearance:none; flex:1 1 auto; width:100%; min-width:0; height:18px; margin:0; background:transparent; cursor:pointer; --p:0%; }
#midi_seek:disabled { opacity:.45; cursor:default; }
#midi_seek:focus { outline:none; }
#midi_seek::-webkit-slider-runnable-track { height:5px; border-radius:3px; background:linear-gradient(to right,#4c6ef5 var(--p),#e1e6f2 var(--p)); }
#midi_seek::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-4.5px; border-radius:50%; background:#fff; border:2px solid #4c6ef5; box-shadow:0 1px 4px rgba(59,91,219,.35); transition:transform .12s ease; }
#midi_seek:hover:not(:disabled)::-webkit-slider-thumb { transform:scale(1.2); }
#midi_seek::-moz-range-track { height:5px; border-radius:3px; background:#e1e6f2; }
#midi_seek::-moz-range-progress { height:5px; border-radius:3px; background:#4c6ef5; }
#midi_seek::-moz-range-thumb { width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid #4c6ef5; box-shadow:0 1px 4px rgba(59,91,219,.35); }

/* 목록용: 조금 작게 */
#bo_list #midi_bar { gap:10px; margin-bottom:10px; padding:9px 12px; border-radius:12px; }
#bo_list #midi_toggle { width:36px; height:36px; }
#bo_list #midi_toggle svg { width:15px; height:15px; }
#bo_list #midi_now { font-size:13px; }

/* 보기용: 파트 버튼 위에 붙도록 */
.midi_view #midi_bar { margin:0 0 14px; }

@media (max-width:640px) {
    #midi_bar { gap:10px; padding:10px 12px; border-radius:12px; }
    #midi_toggle { width:38px; height:38px; }
    #midi_now { font-size:13px; }
    .midi_time_row { gap:8px; }
}

@keyframes midi_eq { 0%,100% { height:4px; } 50% { height:14px; } }
@keyframes midi_pulse { 0% { transform:scale(.92); opacity:.9; } 100% { transform:scale(1.35); opacity:0; } }
@keyframes midi_blink { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) {
    #midi_bar.playing .midi_eq i, #midi_bar.playing #midi_toggle::after, #midi_now.loading { animation:none; }
}

/* 목차(thead): PC는 전체 파트명, 좁은 화면은 짧은 이름 */
.midi_tbl .nm_short { display:none; }
@media (max-width:640px) {
    .midi_tbl .nm_full { display:none; }
    .midi_tbl .nm_short { display:inline; }
}