@import "tailwindcss";


@theme {
  --color-background: #ffffff;
  --color-foreground: #171717;
  --color-primary-normal: #F94B37;
  --color-primary-strong: #D73B29;
  --color-primary-pale: #FFF3F2;
  --color-border-pale: #d5d5d5;
}

@layer base{
  html,body{
    @apply m-0 p-0; /* remove default browser margin/padding to avoid gaps */
    @apply h-full w-full;
    @apply min-w-[500px] min-h-[820px];
    @apply bg-[#F5F5F5];
    @apply overflow-hidden;
  }
  body{
    @apply bg-background text-foreground;
  }
}

@layer components{
  .btn-primary{
    @apply bg-primary-normal text-white px-4 py-2 rounded-md;
  }
}

@layer utilities{
  .btn-primary{
    @apply bg-primary-normal text-white px-4 py-2 rounded-md;
  }
  .transition-width {
    @apply transition-all duration-300;
  }
  .sidebar-menu-hover:hover{
    @apply bg-primary-pale rounded-lg text-primary-normal;
  }
  .right-border{
    @apply relative after:content-[''] after:absolute after:right-0 after:top-[10px] after:bottom-[10px] after:w-px after:bg-gray-300;
  }

  @keyframes marquee {
    0%   { transform: translateX(50%); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee var(--marquee-duration, 15s) linear infinite;
  }

}

/* Thin horizontal scrollbar utility */
.scrollbar-thin-x {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #c1c1c1 transparent;
}
.scrollbar-thin-x::-webkit-scrollbar {
  height: 4px; /* Horizontal scrollbar thickness */
}
.scrollbar-thin-x::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin-x::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 9999px;
}

/* Render horizontal scrollbar outside the element box (visually below) */
.scrollbar-outside-x {
  padding-bottom: 8px;   /* space for scrollbar */
  margin-bottom: -8px;   /* pull content height back */
}

.milkdown .ProseMirror {
  position: relative; /* 부모 요소에 상대 위치를 설정 */
  padding: 0px 0px 0px 80px !important;
}

.milkdown .ProseMirror::before {
  content: '';
  position: absolute;
  left: 70px; /* 왼쪽에서 80px 위치 */
  top: 0;
  bottom: 0;
  width: 1px; /* 선의 두께 */
  background-color: #d5d5d5; /* 선의 색상 */
}

.milkviewer .milkdown .ProseMirror {
  position: relative; /* 부모 요소에 상대 위치를 설정 */
  padding: 0px 0px 0px 10px !important;
}

.milkviewer .milkdown .ProseMirror::before {
  content: '';
  position: absolute;
  left: 0px; /* 왼쪽에서 80px 위치 */
  top: 0;
  bottom: 0;
  width: 0px; /* 선의 두께 */
  background-color: #000000; /* 선의 색상 */
}


.milkdown-slash-menu{
  z-index: 100 !important;
  position: fixed !important;
}


.content-col{
  margin-right: 4px;
  padding: 1px;
  height:22px;
  text-align: center;
  line-height: 20px;
  border-right: 1px solid #a6a9ae;
}

.content-col:last-child{
  border-right: none;
}

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

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

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

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

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

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

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

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

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

.milkdown {
  --crepe-font-title: 'SUIT' ;
  --crepe-font-default: 'SUIT' ;
  --crepe-font-code: 'SUIT' ;
}