/* 기본 설정 */
:root {
  --lkw-accent: #4f63d9;
  --lkw-accent-soft: #7382e8;
  --lkw-text: #272936;
  --lkw-border: rgba(80, 90, 120, 0.13);
  --lkw-menu-width: 270px;
  --lkw-compose-width: 285px;
  --lkw-timeline-width: 720px;
  --lkw-column-bg: rgba(255, 255, 255, 0.54);
  --lkw-status-bg: rgba(255, 255, 255, 0.38);
  --lkw-status-hover-bg: rgba(255, 255, 255, 0.48);
  --lkw-drawer-bg: rgba(0, 0, 0, 0.35);
}

/* 전체 배경 */
html {
  min-height: 100% !important;
  background: #e7e7e9 !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--lkw-text) !important;
}

/* 화면 높이와 게시글 길이에 영향받지 않는 고정 배경 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(245, 245, 247, 0.42),
      rgba(245, 245, 247, 0.42)
    ),
    url("https://cdn.masto.host/lkwmuseumcom/media_attachments/files/116/945/035/916/414/373/original/69abd63335f05e66.jpg")
    center center / cover no-repeat;
}

/* 일반 UI와 관리자 UI의 기본 배경 제거 */
#mastodon,
.app-holder,
.app-body,
.ui,
.admin-wrapper {
  min-height: 100vh !important;
  background: transparent !important;
  color: var(--lkw-text) !important;
}

/* 관리자·환경설정 화면을 배경 위에 정상 표시 */
.admin-wrapper,
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .sidebar,
.admin-wrapper .content-wrapper,
.admin-wrapper .content {
  position: relative;
  z-index: 1;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 레이아웃 배경 */
.columns-area,
.columns-area__panels,
.columns-area__panels__main,
.columns-area__panels__pane,
.layout-single-column,
.tabs-bar__wrapper {
  background: transparent !important;
}

/* 패널 정렬 */
.columns-area__panels {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 18px !important;
}

/* 왼쪽 메뉴 */
.columns-area__panels__pane--navigational,
.columns-area__panels__pane:has(.navigation-panel) {
  order: 1 !important;
  width: var(--lkw-menu-width) !important;
  flex: 0 0 var(--lkw-menu-width) !important;
}

/* 중앙 타임라인 */
.columns-area__panels__main,
.columns-area__panels__pane:not(
  .columns-area__panels__pane--navigational
):not(
  .columns-area__panels__pane--compositional
):not(
  :has(.navigation-panel)
):not(
  :has(.drawer)
) {
  order: 2 !important;
  width: var(--lkw-timeline-width) !important;
  max-width: var(--lkw-timeline-width) !important;
  flex: 0 0 var(--lkw-timeline-width) !important;
}

/* 오른쪽 작성창 */
.columns-area__panels__pane--compositional,
.columns-area__panels__pane:has(.drawer) {
  order: 3 !important;
  width: var(--lkw-compose-width) !important;
  flex: 0 0 var(--lkw-compose-width) !important;
}

/* 내비게이션 */
.navigation-panel {
  padding-top: 22px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 상단 로고 */
.navigation-panel::before {
  content: "";
  display: block;
  width: 170px;
  height: 125px;
  margin: 4px auto 26px;
  background:
    url("https://cdn.masto.host/lkwmuseumcom/media_attachments/files/116/945/040/177/845/758/original/5a1b92174a419933.png")
    center center / contain no-repeat;
}

/* 기본 로고 숨김 */
.navigation-panel__logo,
.navigation-panel .logo,
.navigation-panel img[alt="Mastodon"],
.navigation-panel svg[aria-label="Mastodon"],
.navigation-panel a[href="https://joinmastodon.org"],
.navigation-panel a[href="/about"] img {
  display: none !important;
}

/* 메뉴 글자 */
.navigation-panel,
.navigation-panel a,
.navigation-panel .column-link,
.navigation-panel .column-link__text,
.navigation-panel .column-link__icon,
.navigation-panel svg,
.navigation-panel .icon,
.navigation-panel button,
.navigation-panel button span,
.navigation-panel button svg {
  color: var(--lkw-text) !important;
  fill: var(--lkw-text) !important;
}

/* 메뉴 버튼 */
.navigation-panel a,
.navigation-panel .column-link,
.navigation-panel button {
  background: transparent !important;
  border-radius: 10px !important;
}

/* 메뉴 마우스 효과 */
.navigation-panel a:hover,
.navigation-panel .column-link:hover,
.navigation-panel button:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* 작성창 배경 */
.drawer {
  position: relative !important;
  width: var(--lkw-compose-width) !important;
  height: 100vh !important;
  background: var(--lkw-drawer-bg) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* 작성창 내부 */
.drawer__inner,
.drawer__pager,
.drawer__inner__mastodon {
  background: transparent !important;
}

/* 작성창 입력 영역 */
.search,
.search__input,
.compose-form,
.compose-form__autosuggest-wrapper,
.compose-form__highlightable,
.compose-form__textarea,
.drawer textarea {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

/* 입력 안내 글자 */
.search__input::placeholder,
.compose-form__textarea::placeholder,
.drawer textarea::placeholder {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* 작성창 하단 링크 */
.link-footer,
.link-footer a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* 작성창 이름 */
.drawer .display-name,
.drawer .display-name__html,
.drawer .status__display-name {
  color: #ffffff !important;
}

/* 타임라인 배경 */
.column {
  width: 100% !important;
  max-width: none !important;
  background: var(--lkw-column-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(80, 90, 120, 0.10) !important;
  box-shadow: none !important;
}

/* 타임라인 내부 */
.column > .scrollable,
.column .scrollable,
.follow-recommendations,
.empty-column-indicator,
.column-inline-form {
  background: transparent !important;
}

/* 타임라인 헤더 */
.column-header {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(80, 90, 120, 0.08) !important;
}

/* 빈 화면 배경 */
.getting-started,
.getting-started__wrapper,
.getting-started__footer,
.setup-widget,
.setup-widget__footer,
.account__section-headline,
.explore__search-header,
.box-widget,
.panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 구분선 */
.account__section-headline,
.setup-widget .account__section-headline {
  border-bottom: 1px solid var(--lkw-border) !important;
}

/* 빈 화면 글자 */
.empty-column-indicator {
  color: rgba(39, 41, 54, 0.85) !important;
}

/* 게시물 배경 */
.status,
.notification-group,
.detailed-status {
  background: var(--lkw-status-bg) !important;
  border-color: rgba(80, 90, 120, 0.08) !important;
}

/* 게시물 내부 */
.status__wrapper,
.notification {
  background: transparent !important;
  border-color: rgba(80, 90, 120, 0.08) !important;
}

/* 부스트 및 알림 */
.status__prepend,
.notification__message {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--lkw-text) !important;
}

/* 게시물 마우스 효과 */
.status:hover,
.notification:hover,
.notification-group:hover {
  background: var(--lkw-status-hover-bg) !important;
}

/* 게시물 글자 */
.status__content,
.status__content p,
.status__display-name,
.display-name,
.display-name__html {
  color: var(--lkw-text) !important;
}

/* 강조 글자 */
a,
.status__display-name,
.display-name__account,
.icon-button:hover,
.column-link:hover {
  color: var(--lkw-accent) !important;
}

/* 보라색 버튼 */
.button,
.compose-form__publish-button-wrapper .button,
button[type="submit"] {
  background: var(--lkw-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* 버튼 글자 */
.button span,
.compose-form__publish-button-wrapper .button span,
button[type="submit"] span {
  color: #ffffff !important;
}

/* 버튼 마우스 효과 */
.button:hover,
.compose-form__publish-button-wrapper .button:hover,
button[type="submit"]:hover {
  background: var(--lkw-accent-soft) !important;
  color: #ffffff !important;
}

/* 입력창 모서리 */
input,
textarea,
select,
.search__input {
  border-radius: 10px !important;
}

/* 관리자·환경설정 페이지 패널 */
.admin-wrapper .sidebar,
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .content,
.admin-wrapper .content-wrapper {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 관리자 메뉴 */
.admin-wrapper .sidebar,
.admin-wrapper .sidebar a,
.admin-wrapper .sidebar .icon,
.admin-wrapper .sidebar svg,
.admin-wrapper .sidebar span,
.admin-wrapper .simple-navigation a,
.admin-wrapper .simple-navigation span,
.admin-wrapper .simple-navigation svg {
  color: var(--lkw-text) !important;
  fill: var(--lkw-text) !important;
}

/* 관리자 상단 탭 */
.admin-wrapper .content__heading__tabs a,
.admin-wrapper .content__heading__tabs a span,
.admin-wrapper .content__heading__tabs a svg {
  color: var(--lkw-text) !important;
  fill: var(--lkw-text) !important;
}

/* 선택된 관리자 메뉴 */
.admin-wrapper .content__heading__tabs a.selected,
.admin-wrapper .content__heading__tabs a.selected span,
.admin-wrapper .content__heading__tabs a.selected svg,
.admin-wrapper .content__heading__tabs a.active,
.admin-wrapper .content__heading__tabs a.active span,
.admin-wrapper .content__heading__tabs a.active svg,
.admin-wrapper a.selected,
.admin-wrapper a.selected span,
.admin-wrapper a.selected svg,
.admin-wrapper a.active,
.admin-wrapper a.active span,
.admin-wrapper a.active svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 관리자 버튼 */
.admin-wrapper .button,
.admin-wrapper .button span,
.admin-wrapper button[type="submit"],
.admin-wrapper button[type="submit"] span,
.admin-wrapper input[type="submit"] {
  color: #ffffff !important;
}

/* 모바일 화면 */
@media screen and (max-width: 900px) {
  .columns-area__panels {
    display: block !important;
  }

  .columns-area__panels__pane--compositional,
  .columns-area__panels__pane--navigational,
  .columns-area__panels__pane:has(.drawer),
  .columns-area__panels__pane:has(.navigation-panel),
  .columns-area__panels__pane:has(.column) {
    order: initial !important;
    width: auto !important;
    flex: initial !important;
  }

  .drawer,
  .column,
  .navigation-panel {
    width: auto !important;
    height: auto !important;
  }

  .drawer,
  .column,
  .column-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .drawer {
    background: rgba(20, 20, 30, 0.58) !important;
  }

  .navigation-panel::before {
    width: 130px;
    height: 90px;
  }
}

/* 움직임 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}