styles.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
  font-family: 'SUIT-Variable';
  src: url('@/assets/fonts/SUIT-Variable.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'SUIT-Variable', sans-serif;
  color: #18181b;
}

.shadow-custom {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.view-container {
  @apply pt-[88px] pb-6 px-6;
}
.max-w-1200 {
  @apply view-container w-full max-w-[1200px] min-w-[1024px] mx-auto;
}
.max-w-600 {
  @apply view-container w-full max-w-[600px] mx-auto;
}
.max-w-400 {
  @apply view-container w-full max-w-[400px] mx-auto !pt-16;
}
.list-view {
  @apply max-w-1200 h-screen flex flex-col gap-6 overflow-hidden;
}

.button-large {
  @apply flex w-full py-3 font-bold border rounded items-center justify-center min-w-[138px];
}
.button-large-default {
  @apply button-large bg-white text-disabled border-border-1 hover:bg-background-2;
}
.button-large-red {
  @apply button-large bg-red-1 text-white border-red-1 hover:bg-[#D61E1E];
}
.button-large-primary {
  @apply button-large bg-primary1 text-white border-primary1 hover:bg-[#6D6EF0];
}

.button-medium {
  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;
}
.button-medium-primary {
  @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];
}
.button-medium-secondary {
  @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-background-2;
}
.button-medium-default {
  @apply button-medium bg-white border border-border-1 text-disabled hover:bg-background-2;
}
.button-medium-red {
  @apply button-medium bg-white border border-red-1 text-red-1 hover:bg-background-2;
}

.button-small {
  @apply flex items-center gap-1 text-xs font-bold;
}
.button-small-primary {
  @apply text-primary1;
}
.button-small-default {
  @apply text-disabled;
}
.button-small-red {
  @apply text-red-1;
}

.list-bar {
  @apply w-full h-8 px-4 bg-background-2 flex items-center gap-4 shrink-0;
}
.list-card {
  @apply flex px-4 py-3 gap-4 border-b border-border-1 cursor-pointer hover:bg-background-2;
}

.filter-container {
  @apply flex flex-col gap-1 shrink-0;
}
.filter-title {
  @apply text-[10px] font-bold text-body;
}
.filter-dropdown {
  @apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
}
.filter-dropdown-option-list {
  @apply w-full max-h-[120px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
}
.filter-dropdown-option {
  @apply text-xs p-2 rounded text-center cursor-pointer;
}

.input-box {
  @apply block w-full px-4 py-4 border border-border-1 rounded focus:outline-none;
}

.task-detail {
  @apply text-xs text-body font-bold mb-2;
}

.request-task-dropdown {
  @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
}
.request-task-dropdown-option-list {
  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black;
}
.request-task-dropdown-option {
  @apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
}

.form-view-container {
  @apply max-w-600 flex flex-col gap-y-6;
}

.task-management-view {
  @apply max-w-1200 min-h-screen flex flex-col gap-6;
}
.task-management-title {
  @apply flex w-full h-8 pl-6 gap-6 items-center text-xs bg-background-2 text-body font-bold border-b border-b-border-1;
}
.category-management-line {
  @apply flex items-center px-4 w-full h-11 border-b border-b-border-1;
}
.task-detail-dropdown {
  @apply flex w-full h-10 items-center text-sm rounded pl-4 pr-3 bg-white border border-border-1 cursor-pointer;
}
.task-detail-dropdown-option-list {
  @apply absolute w-full h-40 overflow-y-auto top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
}
.task-detail-dropdown-option {
  @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;
}
.task-detail-manager-dropdown {
  @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
}

.modal-enter-active,
.modal-leave-active {
  transition:
    transform 0.25s ease-in-out,
    opacity 0.25s ease-in-out;
}

.modal-enter-from,
.modal-leave-to {
  transform: translate(-50%, -40%);
  opacity: 0;
}

.modal-enter-to,
.modal-leave-from {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.sidebar-enter-active,
.sidebar-leave-active {
  transition: transform 0.25s ease-in-out;
}

.sidebar-enter-from,
.sidebar-leave-to {
  transform: translateX(-100%);
}

.sidebar-enter-to,
.sidebar-leave-from {
  transform: translateX(0);
}