/* Without Tailwind CSS. Only Gem and Sprockets. */
/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* custom.css */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

img,
picture {
  max-width: 100%;
  display: block;
}

.bg-linear-to-b {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #090a0ad0);
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #1A1A1A;
  padding: 8px 0;
  z-index: 1000;
}

.footer div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.footer img {
  width: 24px;
  height: 24px;
}

.footer .active {
  color: #8B5CF6;
  /* purple 색상 */
}

.footer .active img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(50%) saturate(1000%) hue-rotate(220deg) brightness(100%) contrast(100%);
}

/* 스크롤바 스타일링 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1A1A1A;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #9990FF;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8057FF;
}

/* 스크롤바가 있는 요소에 대한 레이아웃 시프트 방지 */
.scroll-container {
  scrollbar-gutter: stable;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide scrollbar for all elements except admin routes */
html:not([data-path^="/admin"]),
html:not([data-path^="/admin"]) * {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

html:not([data-path^="/admin"])::-webkit-scrollbar,
html:not([data-path^="/admin"]) *::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}