#sortable {
  position: relative;
  user-select: none;
	height: calc(100vh - 200px);
	padding: 20px;
	display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	background-color: #F1F1F1;
}

#sortable div {
  position: relative;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.placeholder {
	width: 140px;
	margin: 3px;
}

.dragging {
  opacity: 0.7;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  cursor: grabbing;
  position: absolute;
  pointer-events: none;
	z-index: 10;
}

.sortit, .sortsub {
	position: relative;
	cursor: grab;
	transition: box-shadow 0.2s, opacity 0.2s;
}

.rightbtn {
	position: absolute;
	top: 5px; right: 5px;
	color: #B0D0D0;
	z-index: 100;
	cursor: pointer;
	pointer-events: auto;
}

.sorttit {
	min-width: 140px;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	color: rgba(0,117,131,1.00);
	margin: 3px 0; padding: 4px;
	border: 2px solid rgba(229,241,255,1.00);
	border-radius: 6px;
	background: linear-gradient(180deg, #EFFFFD, #EFFFFD, #EFFFFD );
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

.sortsub {
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: darkblue;
	line-height: 20px;
	margin: 2px 0; padding: 2px 10px;
	border: 1px solid rgba(169,208,255,1.00);
	border-radius: 4px;
	background-color: rgba(202,241,255,1.00);
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.setbg {
	background: #E4ECFA;
	padding: 14px;
}

.setbregi button {
	width: 54px; height: 54px;
	margin: 0 6px;
	border: 1px solid rgba(255,255,255,0.70);
	border-radius: 6px;
	background: linear-gradient(180deg, #417FFF, #2F32FF);
	box-shadow: 0 3px 5px -2px rgba(0,0,0,0.3);
	cursor: pointer;
}

.setbregi button:hover {
	background: linear-gradient(180deg, #6798FF, #494CFF);
}

.setbregi button i {
	font-size: 30px;
	color: white;
}

/*------------ 드롭 영역 ---------------*/
/* 왼쪽 숨김 영역 */
#dropArea {
  position: fixed;
  top: 0;
  left: -31%; /* 기본은 숨김 */
  width: 30%;
  height: 100vh;
  background: rgba(0,0,0,0.48);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  transition: left 0.3s ease;
  z-index: 999;
}

/* 드래그 중일 때 보이기 */
#dropArea.active {
  left: 0;
}

/* 드롭 가능 강조 */
#dropArea.over {
  background: rgba(0,180,180,1);
}

.drop-text i {
	font-size: 60px;
}

/*------------ 레이어 팝업 -------------*/
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      /* 페이드 인 아웃 */
      opacity: 0;
      transition: opacity .18s ease;
    }
    .modal-backdrop.show { display:flex; opacity:1; }

    /* 팝업 박스 */
    .modal-box {
      width: 360px;
      max-width: calc(100% - 40px);
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      padding: 20px;
      transform: translateY(8px) scale(.98);
      transition: transform .18s cubic-bezier(.2,.9,.2,1);
      will-change: transform;
    }
    .modal-backdrop.show .modal-box {
      transform: translateY(0) scale(1);
    }

    .modal-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      color: #222;
    }
    .modal-desc {
      font-size: 14px;
      color: #444;
      margin-bottom: 18px;
    }

    .modal-actions {
      display:flex;
      gap: 10px;
      justify-content:flex-end;
    }

    .btn {
      padding: 8px 14px;
      border-radius: 8px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }
    .btn.cancel {
      background: transparent;
      color: #444;
      border: 1px solid #ddd;
    }
    .btn.confirm {
      background: #e53935; /* 삭제 = 빨강 */
      color: #fff;
      border: 1px solid rgba(0,0,0,0.06);
    }

    /* 작은 화면에서 버튼 세로 배치 */
    @media (max-width:420px) {
      .modal-actions { flex-direction: column-reverse; }
      .btn { width:100%; }
    }