/* hands — 사이트에서만 덧입히는 모양 (2026-11)
   HANDS 원래 모양(r/hands/*.css)은 고치지 않고, 여기서 사이트에 맞게 덮어요.
   - 2 DECK+ · 4 DECK+(플레이리스트 따로 창)는 데스크톱 전용이라 숨겨요
   - 덱 칸(PC 트랙 페이지 아래, html[data-edm-mode="dock"]): 효과·목록을 빼고 위 막대·파형·덱·믹서만
   - 휴대폰(html.edm-phone): 덱 1 · 믹서 · 덱 2를 위아래로 쌓고 화면을 아래로 내려 봐요. 곡은 '곡 넣기' 판에서 넣어요 */
html, body { margin: 0; height: 100%; background: #08080a; }
#hands-root { position: fixed; inset: 0; }
.hands .hd-lay button:nth-child(n+3) { display: none; }

/* 시작 안내 · 오류 */
.edm-hd-note { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; color: #a8a8b2; font: 14px/1.5 -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif; padding: 24px; }
.edm-hd-note b { font-size: 34px; letter-spacing: 3px; color: #f1f1f3; }
.edm-hd-note button { justify-self: center; height: 38px; padding: 0 18px; border-radius: 999px; border: 0; background: #1fa3ff; color: #fff; font-weight: 800; cursor: pointer; }

/* 알림 */
.edm-hd-toast { position: fixed; left: 50%; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 12px; background: #f1f1f3; color: #111; font: 600 14px/1.4 -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.edm-hd-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.edm-hd-toast a { color: #d92f55; font-weight: 800; white-space: nowrap; }

/* ---------- 덱 칸 (PC 트랙 페이지 아래) ---------- */
html[data-edm-mode="dock"] .hands { grid-template-rows: 40px auto auto; }
html[data-edm-mode="dock"] .hands .hd-fx,
html[data-edm-mode="dock"] .hands .hd-browser { display: none; }

/* ---------- 휴대폰 ---------- */
.edm-hd-fab { display: none; }
html.edm-phone, html.edm-phone body { height: auto; min-height: 100%; overflow-x: hidden; }
html.edm-phone #hands-root { position: relative; inset: auto; min-height: 100vh; }
/* HANDS는 창 높이에 맞춰 줄 높이를 나눠요(격자). 휴대폰에서는 그 격자를 풀고 위에서 아래로 쌓아요 (!important로 풀어야 해요).
   안 풀면 덱 줄이 화면 높이에 눌려서 믹서가 덱 위에 겹쳐요. 믹서 손잡이 칸은 크기를 스스로 안 정해서(container-type: size) 높이를 줘요 */
html.edm-phone .hands { display: block !important; position: relative !important; inset: auto !important; height: auto !important; min-height: 100vh; overflow: visible !important; padding-bottom: 84px;
  container-type: inline-size !important; } /* HANDS는 화면 전체 크기 기준(container-type: size)이라 내용만큼 길어지지 않아요 → 폭 기준만 남겨요 */
html.edm-phone .hands .hd-top { height: 44px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 8px; padding: 0 8px; }
html.edm-phone .hands .hd-top::-webkit-scrollbar { display: none; }
html.edm-phone .hands .hd-decks { display: flex !important; flex-direction: column; gap: 8px; height: auto !important; min-height: 0 !important; }
html.edm-phone .hands .hd-decks > * { flex: none !important; min-height: auto !important; }
html.edm-phone .hands .hd-col { display: flex !important; flex-direction: column; gap: 8px; height: auto !important; }
html.edm-phone .hands .hd-deck { min-height: 300px; }
html.edm-phone .hands .hd-mixer { min-height: 330px !important; height: auto !important; }
html.edm-phone .hands .hd-fx,
html.edm-phone .hands .hd-browser { display: none; }
html.edm-phone .edm-hd-fab {
  display: block; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
  height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #1fa3ff; color: #fff;
  font: 800 15px/1 -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif; box-shadow: 0 8px 24px rgba(31, 163, 255, .45); cursor: pointer;
}

/* 곡 넣기 판 (휴대폰) */
.edm-hd-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); display: none; }
.edm-hd-sheet.open { display: block; }
.edm-hd-sheet-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  background: #131316; border-radius: 16px 16px 0 0; color: #f1f1f3; font: 14px/1.35 -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif; padding-bottom: env(safe-area-inset-bottom); }
.edm-hd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.edm-hd-sheet-head b { font-size: 16px; }
.edm-hd-sheet-head button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #232328; color: #f1f1f3; font-size: 16px; cursor: pointer; }
.edm-hd-tabs { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; scrollbar-width: none; }
.edm-hd-tabs::-webkit-scrollbar { display: none; }
.edm-hd-tabs button { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #34343c; background: #1a1a1e; color: #a8a8b2; font-weight: 700; cursor: pointer; }
.edm-hd-tabs button.on { background: #f1f1f3; color: #111; border-color: #f1f1f3; }
.edm-hd-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; }
.edm-hd-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid #26262c; }
.edm-hd-row:first-child { border-top: 0; }
.edm-hd-row img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: #232328; }
.edm-hd-ti { min-width: 0; display: grid; gap: 2px; }
.edm-hd-ti b, .edm-hd-ti span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.edm-hd-ti span { color: #8d8d96; font-size: 12.5px; }
.edm-hd-row button { width: 44px; height: 40px; border-radius: 8px; border: 0; font-weight: 900; font-size: 16px; color: #0b0b0d; cursor: pointer; }
.edm-hd-row button[data-load="0"] { background: #1fa3ff; }
.edm-hd-row button[data-load="1"] { background: #ff4f6e; }
.edm-hd-empty { margin: 0; padding: 40px 16px; text-align: center; color: #8d8d96; }