/* ───────── 글로벌 & safe-area 포함 ───────── */
*{box-sizing:border-box;font-family:system-ui,sans-serif}
html, body {
  margin:0; display:flex; flex-direction:column; height:100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ───────── 헤더 ───────── */
header{
  padding:.75rem 1rem; background:#222; color:#fff;
  display:flex; gap:1rem; align-items:center;
}
header h1{
  margin:0; font-size:clamp(1rem,3vw,1.2rem); white-space:nowrap;
}
header input{
  flex:1 1 auto; min-width:100px;
  padding:.4rem .6rem; border:1px solid #555; border-radius:4px;
}

/* ───────── 리스트 ───────── */
main{flex:1 1 auto; overflow:hidden;}
.list-box{
  height:calc(60vh - env(safe-area-inset-bottom));
  overflow-x:auto;    /* ← 가로 스크롤 허용 */
  overflow-y:auto;
  width:100vw;
  max-width:100vw;
}
table{
  width:100%;
  min-width:1200px;
  border-collapse:collapse;
  table-layout:fixed;
}
th, td{
  padding:.5rem .6rem;
  border-bottom:1px solid #ddd;
  font-size:.7rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
tbody tr:hover{background:#f5f7fa; cursor:pointer;}
td:first-child img{
  width:20px; height:20px; object-fit:cover; border-radius:3px;
}

/* 고정 헤더 + 열폭 드래그 */
thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f0f0f0;
}
.resizable-table th{position:relative;}
.resize-handle{
  position:absolute; top:0; right:-3px; width:6px; height:100%;
  cursor:col-resize;
}
.resize-handle:hover{background:rgba(0,0,0,.1);}

/* ───────── 플레이바 ───────── */
.player-bar{
  display:flex; align-items:center; gap:1.2rem;
  padding:
    .5rem clamp(.5rem,2vw,1rem)
    calc(.5rem + env(safe-area-inset-bottom)) clamp(.5rem,2vw,1rem);
}
.player-bar img{
  width:clamp(120px,25vw,200px);
  height:clamp(120px,25vw,200px);
  object-fit:cover; border-radius:6px; background:transparent;
}
.meta{
  display:flex; flex-direction:column; gap:.3rem; min-width:0;
  flex:1 1 auto;
}
#trackTitle{
  font-size:clamp(1rem,2.3vw,22px); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#trackAlbum{
  font-size:clamp(.8rem,1.8vw,16px); color:#555;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#trackArtist{
  font-size:clamp(.7rem,1.5vw,12px); color:#555;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 버튼 배치 & 반응형 크기 */
.controls{
  display:flex; gap:.5rem; align-items:center; margin-left:auto;
}
.controls button{
  padding:clamp(1.3rem,1.8vw,1.5rem) clamp(1.6rem,2.6vw,2.9rem);
  border:none; border-radius:4px;
  background:#fafafa; font-size:clamp(2rem,4vw,2.6rem);
  cursor:pointer;
}
.controls button:hover{background:#eee;}

/* ───────── 오디오 컨트롤 ───────── */
footer{
  border-top:1px solid #ddd; background:#fafafa;
}
audio{
  width:100%;
  margin-bottom: env(safe-area-inset-bottom);
}

/* ───────── 모바일 숨김 ───────── */
@media (max-width:600px){
  th:nth-child(5),td:nth-child(5),
  th:nth-child(6),td:nth-child(6),
  th:nth-child(7),td:nth-child(7),
  th:nth-child(13),td:nth-child(13),
  th:nth-child(14),td:nth-child(14){display:none;}
}

.playing td {
  color: #1565c0 !important;
  font-weight: bold !important;
}

/* 검색 입력란 폭 조정 및 수평 배치 */
.search-playlist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
#search {
  width: 220px;
  min-width: 0;
  padding: 6px 10px;
  font-size: 1rem;
}
.playlist-box {
  position: relative;
  display: flex;
  align-items: center;
}
#playlistBtn {
  padding: 6px 16px;
  font-size: 1rem;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.playlist-dropdown {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 120px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 10;
  list-style: none;
  padding: 0;
  margin: 0;
}
.playlist-dropdown li {
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  color: #111;
}
.playlist-dropdown li:hover {
  background: #f0f0f0;
}
.playlist-dropdown.show {
  display: block;
}
.playlist-labels {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  font-size: 0.98em;
  color: #bbb;
  white-space: nowrap;
}