/* mosaic-reset: uiverse 컴포넌트 공통 전제 (box-sizing + 기본 sans-serif) */
*, *::before, *::after { box-sizing: border-box; }
:where(body) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* 단독 동작용 무대 (uiverse: terrible-gecko-91) */
html, body { margin: 0; height: 100%; }
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #15161c; }

.card {
  width: 200px;
  /* background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(135deg, rgba(36, 40, 50, 1) 0%, rgba(36, 40, 50, 1) 40%, rgba(37, 28, 40, 1) 100%); */

  background-color: rgba(36, 40, 50, 1);
  background-image: linear-gradient(
    139deg,
    rgba(36, 40, 50, 1) 0%,
    rgba(36, 40, 50, 1) 0%,
    rgba(37, 28, 40, 1) 100%
  );

  border-radius: 10px;
  padding: 15px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card .separator {
  border-top: 1.5px solid #42434a;
}

.card .list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px 10px;
}

.card .list .element {
  display: flex;
  align-items: center;
  color: #7e8590;
  gap: 10px;
  transition: all 0.3s ease-out;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
}

.card .list .element svg {
  width: 19px;
  height: 19px;
  transition: all 0.3s ease-out;
}

.card .list .element .label {
  font-weight: 600;
}

.card .list .element:hover {
  background-color: #5353ff;
  color: #ffffff;
  transform: translate(1px, -1px);
}
.card .list .delete:hover {
  background-color: #8e2a2a;
}

.card .list .element:active {
  transform: scale(0.99);
}

.card .list:not(:last-child) .element:hover svg {
  stroke: #ffffff;
}

.card .list:last-child svg {
  stroke: #bd89ff;
}
.card .list:last-child .element {
  color: #bd89ff;
}

.card .list:last-child .element:hover {
  background-color: rgba(56, 45, 71, 0.836);
}