/*
 * 폰에서 곁다리 정보(다음 곡·TV 연결)를 오른쪽 서랍으로 여닫는 모습.
 *
 * project_remote.css가 300줄 한계에 닿아 project_layout.js에 딸린 것만 여기
 * 모았다. 왼쪽 순서 서랍(project_remote.css의 .rail 규칙)과 뼈대는 같고
 * 방향만 반대다 — 오른쪽 가장자리에서 밀어 연다.
 */
@media (max-width:659.98px){
  .ccm-remote .side{
    display:block; position:absolute; top:0; bottom:0; right:0; z-index:6;
    width:min(84vw,320px); transform:translateX(100%);
    transition:transform .28s cubic-bezier(.22,.9,.32,1);
    box-shadow:-10px 0 30px -10px rgba(0,0,0,.55);
    border-left:1px solid var(--line); background:var(--surface-2); overflow:auto; padding:14px 0;
  }
  .ccm-remote .side.open{transform:translateX(0)}
  .ccm-remote .side.dragging{transition:none}
  .ccm-remote .side-scrim{
    position:absolute; inset:0; z-index:5; background:rgba(4,6,14,.5);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .ccm-remote .side-scrim.on{opacity:1; pointer-events:auto}
  /* 여는 길은 오른쪽 가장자리 밀기 하나다. 왼쪽 순서 서랍도 따로 여는
     버튼이 없다 — 같은 결로 맞춘다. 상태 점은 서랍 안 머리글에서 본다. */
  .ccm-remote .side .screens[hidden]{display:block}
}
@media (min-width:660px){ .ccm-remote .side-scrim{display:none} }