/* =========================================================
   JANUS : ZERO HOUR
   MASTODON MONOCHROME THEME
   Black / White / Modern / Classified Document
   ========================================================= */


/* ---------------------------------------------------------
   01. COLOR SYSTEM
   Mastodon 4.6+ Design Tokens
   --------------------------------------------------------- */

:root {
  /* Background */
  --color-bg-primary: #0b0b0b;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #181818;

  --color-bg-inverted: #f2f2f0;
  --color-bg-overlay-base: rgba(0, 0, 0, 0.82);
  --color-bg-overlay-highlight: rgba(255, 255, 255, 0.06);
  --color-bg-overlay: rgba(0, 0, 0, 0.88);

  /* Main / Brand */
  --color-bg-brand-base: #eeeeec;
  --color-bg-brand-base-hover: #ffffff;
  --color-bg-brand-soft: #1b1b1b;
  --color-bg-brand-softest: #151515;

  /* Text */
  --color-text-primary: #eeeeec;
  --color-text-secondary: #aaaaa7;
  --color-text-tertiary: #777774;

  --color-text-inverted: #101010;

  --color-text-brand: #ffffff;
  --color-text-brand-soft: #d7d7d4;
  --color-text-on-brand-base: #0b0b0b;
  --color-text-brand-on-inverted: #111111;

  --color-text-status-links: #f5f5f3;
  --color-text-disabled: #666663;
  --color-text-on-disabled: #a0a09c;

  /* Borders */
  --color-border-primary: #292929;
  --color-border-brand: #eeeeec;
  --color-border-brand-soft: #555552;

  /* Semantic colors — monochrome */
  --color-text-error: #ededeb;
  --color-bg-error-base: #e3e3e0;
  --color-bg-error-base-hover: #ffffff;
  --color-bg-error-soft: #202020;
  --color-bg-error-softest: #181818;
  --color-border-error: #bcbcb9;
  --color-border-error-soft: #555552;

  --color-text-warning: #d2d2cf;
  --color-bg-warning-base: #d2d2cf;
  --color-bg-warning-soft: #202020;
  --color-bg-warning-softest: #181818;
  --color-border-warning-soft: #555552;

  --color-text-success: #ededeb;
  --color-bg-success-base: #ededeb;
  --color-bg-success-soft: #202020;
  --color-bg-success-softest: #181818;
  --color-border-success-soft: #777774;

  /* Rich text */
  --rich-text-container-color: #151515;
  --rich-text-text-color: #ddddda;
  --rich-text-decorations-color: #8c8c88;

  /* Shadow */
  --dropdown-shadow:
    0 12px 35px rgba(0, 0, 0, 0.55);
}


/* ---------------------------------------------------------
   02. GLOBAL
   --------------------------------------------------------- */

html,
body {
  background: #080808 !important;
  color: #eeeeec !important;
}

body {
  font-family:
    Pretendard,
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif !important;

  letter-spacing: -0.015em;
}


/* 선택 영역 */
::selection {
  background: #eeeeec;
  color: #090909;
}


/* 링크 */

a {
  color: #eeeeec;
}

a:hover {
  color: #ffffff;
}


/* ---------------------------------------------------------
   03. MAIN APP BACKGROUND
   --------------------------------------------------------- */

.ui,
.application,
.layout-single-column {
  background:
    linear-gradient(
      rgba(255,255,255,0.014) 1px,
      transparent 1px
    ),
    #080808 !important;

  background-size: 100% 32px !important;
}


/* ---------------------------------------------------------
   04. COLUMNS
   --------------------------------------------------------- */

.column,
.drawer__inner,
.drawer__inner__mastodon,
.column-inline-form {
  background: #0e0e0e !important;
}


/* 컬럼 경계 */

.column {
  border-left: 1px solid #242424;
  border-right: 1px solid #242424;
}


/* 다중 컬럼 간격 */

.columns-area__panels__main,
.columns-area__panels__pane {
  background: transparent;
}


/* ---------------------------------------------------------
   05. COLUMN HEADER
   --------------------------------------------------------- */

.column-header {
  background: rgba(10, 10, 10, 0.94) !important;
  border-bottom: 1px solid #333333 !important;
  box-shadow: none !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.column-header__button {
  background: transparent !important;
  color: #aaa !important;
}


.column-header__button:hover {
  color: #fff !important;
  background: #181818 !important;
}


.column-header__back-button {
  color: #eeeeec !important;
}


.column-header__collapsible {
  background: #101010 !important;
  border-bottom: 1px solid #292929 !important;
}


/* 헤더 타이틀 */

.column-header > button,
.column-header__wrapper {
  color: #eeeeec !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* ---------------------------------------------------------
   06. STATUS / TOOT
   --------------------------------------------------------- */

.status,
.notification,
.status__wrapper {
  background: #0e0e0e !important;
  border-bottom: 1px solid #242424 !important;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}


.status:hover {
  background: #121212 !important;
}


/* 선택 / 강조된 글 */

.status--highlighted {
  background: #161616 !important;
}


/* 본문 */

.status__content {
  color: #e8e8e5 !important;
  line-height: 1.72 !important;
}


.status__content p {
  margin-bottom: 0.8em;
}


/* 작성자 이름 */

.display-name__html {
  color: #f4f4f2 !important;
  font-weight: 700 !important;
}


/* 아이디 */

.display-name__account {
  color: #777774 !important;
  font-weight: 400 !important;
}


/* 시간 / 메타 정보 */

.status__relative-time,
.status__display-name,
.status__visibility-icon {
  color: #72726f !important;
}


/* 링크 */

.status__content a {
  color: #f1f1ef !important;
  text-decoration-color: #777774;
  text-underline-offset: 3px;
}


.status__content a:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
}


/* ---------------------------------------------------------
   07. AVATAR
   기관 사원증처럼 약간 각진 인상
   --------------------------------------------------------- */

.account__avatar,
.account__avatar img,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay {
  border-radius: 4px !important;
}


.account__avatar {
  outline: 1px solid #333333;
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   08. STATUS ACTION BUTTONS
   --------------------------------------------------------- */

.icon-button {
  color: #777774 !important;
}


.icon-button:hover,
.icon-button:focus {
  color: #eeeeec !important;
}


.icon-button.active {
  color: #ffffff !important;
}


/* 부스트 / 즐겨찾기 등의 컬러를 강제 무채색화 */

.icon-button.active svg,
.status__action-bar .icon-button.active {
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   09. COMPOSE AREA
   --------------------------------------------------------- */

.compose-form {
  background: #0d0d0d !important;
}


.compose-form .compose-form__autosuggest-wrapper {
  background: transparent !important;
}


.compose-form .spoiler-input__input,
.compose-form textarea,
.compose-form__highlightable {
  background: #141414 !important;
  color: #eeeeec !important;

  border: 1px solid #303030 !important;
  border-radius: 3px !important;

  box-shadow: none !important;
}


.compose-form textarea::placeholder {
  color: #666663 !important;
}


.compose-form textarea:focus,
.compose-form .spoiler-input__input:focus {
  border-color: #eeeeec !important;
}


/* 글쓰기 도구 */

.compose-form__buttons-wrapper {
  background: #101010 !important;
  border-top: 1px solid #242424;
}


/* ---------------------------------------------------------
   10. PRIMARY BUTTON
   흰 바탕 + 검정 글씨
   --------------------------------------------------------- */

.button,
button.button {
  background: #eeeeec !important;
  color: #0a0a0a !important;

  border: 1px solid #eeeeec !important;
  border-radius: 3px !important;

  font-weight: 700 !important;
  box-shadow: none !important;

  transition:
    background 0.15s ease,
    color 0.15s ease;
}


.button:hover,
button.button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}


/* 비활성 */

.button:disabled {
  background: #292929 !important;
  border-color: #292929 !important;
  color: #777774 !important;
}


/* ---------------------------------------------------------
   11. SECONDARY / TEXT BUTTON
   --------------------------------------------------------- */

.button.button-secondary {
  background: transparent !important;
  color: #dededb !important;
  border: 1px solid #555552 !important;
}


.button.button-secondary:hover {
  background: #eeeeec !important;
  color: #0a0a0a !important;
}


/* ---------------------------------------------------------
   12. NAVIGATION
   --------------------------------------------------------- */

.navigation-panel {
  background: transparent !important;
}


.navigation-panel__logo {
  filter: grayscale(1);
}


.column-link {
  color: #999996 !important;
  background: transparent !important;

  border-radius: 3px !important;

  transition:
    color 0.15s ease,
    background 0.15s ease;
}


.column-link:hover {
  background: #151515 !important;
  color: #ffffff !important;
}


.column-link.active {
  color: #ffffff !important;
  background: #181818 !important;

  box-shadow:
    inset 2px 0 0 #eeeeec;
}


/* ---------------------------------------------------------
   13. SEARCH
   --------------------------------------------------------- */

.search__input {
  background: #121212 !important;
  color: #eeeeec !important;

  border: 1px solid #303030 !important;
  border-radius: 3px !important;

  box-shadow: none !important;
}


.search__input:focus {
  border-color: #eeeeec !important;
}


.search__input::placeholder {
  color: #666663 !important;
}


/* ---------------------------------------------------------
   14. PROFILE
   --------------------------------------------------------- */

.account__header {
  background: #0e0e0e !important;
}


.account__header__bar {
  background: #0d0d0d !important;
  border-bottom: 1px solid #292929;
}


.account__header__tabs__name h1 {
  color: #eeeeec !important;
}


.account__header__tabs__name h1 small {
  color: #777774 !important;
}


/* 소개 */

.account__header__content {
  color: #cfcfcc !important;
}


/* 프로필 필드 */

.account__header__fields {
  border-top: 1px solid #292929 !important;
}


.account__header__fields dt,
.account__header__fields dd {
  border-bottom-color: #292929 !important;
}


.account__header__fields dt {
  color: #777774 !important;
}


.account__header__fields dd {
  color: #eeeeec !important;
}


/* 헤더 이미지는 흑백화 */

.account__header__image img {
  filter:
    grayscale(100%)
    contrast(108%)
    brightness(78%);
}


/* 프로필 사진은 살짝만 탈색 */

.account__header__bar .account__avatar img {
  filter:
    grayscale(60%)
    contrast(105%);
}


/* ---------------------------------------------------------
   15. ACCOUNT LIST
   --------------------------------------------------------- */

.account {
  background: #0e0e0e !important;
  border-bottom: 1px solid #242424 !important;
}


.account:hover {
  background: #131313 !important;
}


/* ---------------------------------------------------------
   16. NOTIFICATIONS
   --------------------------------------------------------- */

.notification {
  background: #0e0e0e !important;
}


.notification__message {
  color: #999996 !important;
}


.notification__message .fa {
  color: #d8d8d5 !important;
}


/* ---------------------------------------------------------
   17. DROPDOWNS
   --------------------------------------------------------- */

.dropdown-menu,
.dropdown-menu__container,
.dropdown-menu__item {
  background: #111111 !important;
  color: #ddddda !important;
}


.dropdown-menu {
  border: 1px solid #333333 !important;
  border-radius: 4px !important;

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.65) !important;
}


.dropdown-menu__item a {
  color: #ccccca !important;
}


.dropdown-menu__item a:hover,
.dropdown-menu__item button:hover {
  background: #eeeeec !important;
  color: #090909 !important;
}


/* ---------------------------------------------------------
   18. MODALS
   --------------------------------------------------------- */

.modal-root__overlay {
  background: rgba(0, 0, 0, 0.82) !important;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


.modal-root__modal,
.modal-root__container {
  background: #101010 !important;
}


.report-dialog-modal,
.boost-modal,
.confirmation-modal,
.mute-modal {
  background: #101010 !important;

  border: 1px solid #383838 !important;
  border-radius: 5px !important;

  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7) !important;
}


/* ---------------------------------------------------------
   19. MEDIA
   --------------------------------------------------------- */

.media-gallery,
.video-player,
.audio-player {
  border-radius: 3px !important;
  overflow: hidden;

  border: 1px solid #292929;
}


/* 이미지 전체에 흑백을 적용하고 싶지 않다면
   아래 부분은 삭제해주세요. */

/*
.media-gallery__item-thumbnail img {
  filter: grayscale(100%);
}
*/


/* ---------------------------------------------------------
   20. CONTENT WARNING
   --------------------------------------------------------- */

.content-warning {
  background: #141414 !important;
  border: 1px solid #333333 !important;

  border-radius: 3px !important;
}


/* ---------------------------------------------------------
   21. POLL
   --------------------------------------------------------- */

.poll__chart {
  background: #262626 !important;
}


.poll__chart.leading {
  background: #e8e8e5 !important;
}


/* ---------------------------------------------------------
   22. HASHTAGS / BADGES
   --------------------------------------------------------- */

.hashtag,
.status__content__text a.hashtag {
  color: #d4d4d1 !important;
}


.account-role {
  background: #eeeeec !important;
  color: #0a0a0a !important;

  border-radius: 2px !important;

  font-weight: 700;
}


/* ---------------------------------------------------------
   23. TABS
   --------------------------------------------------------- */

.account__section-headline,
.notification__filter-bar {
  background: #0d0d0d !important;
  border-bottom: 1px solid #292929 !important;
}


.account__section-headline a,
.notification__filter-bar button {
  color: #777774 !important;
}


.account__section-headline a.active,
.notification__filter-bar button.active {
  color: #ffffff !important;

  box-shadow:
    inset 0 -2px 0 #eeeeec !important;
}


/* ---------------------------------------------------------
   24. LOAD MORE
   --------------------------------------------------------- */

.load-more {
  background: #101010 !important;
  color: #8d8d89 !important;

  border-bottom: 1px solid #292929;
}


.load-more:hover {
  color: #ffffff !important;
  background: #161616 !important;
}


/* ---------------------------------------------------------
   25. SCROLLBAR
   --------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: #444440 #0a0a0a;
}


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


::-webkit-scrollbar-track {
  background: #090909;
}


::-webkit-scrollbar-thumb {
  background: #41413e;
  border: 2px solid #090909;
}


::-webkit-scrollbar-thumb:hover {
  background: #676763;
}


/* ---------------------------------------------------------
   26. FOCUS / ACCESSIBILITY
   --------------------------------------------------------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid #eeeeec !important;
  outline-offset: 2px !important;
}


/* ---------------------------------------------------------
   27. DESKTOP – DOCUMENT PANEL EFFECT
   --------------------------------------------------------- */

@media screen and (min-width: 1175px) {

  .columns-area__panels__main {
    border-left: 1px solid #1e1e1e;
    border-right: 1px solid #1e1e1e;
  }

}


/* ---------------------------------------------------------
   28. MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 630px) {

  .column {
    border-left: 0;
    border-right: 0;
  }

  .status {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .column-header {
    border-bottom: 1px solid #292929 !important;
  }

}


/* ---------------------------------------------------------
   29. JANUS DETAIL
   미묘한 기밀문서 / 전산망 분위기
   --------------------------------------------------------- */

/* 긴 구분선을 보다 선명하게 */

.status,
.account,
.notification {
  position: relative;
}


/* 게시물 hover 시 좌측 흰 선 */

.status::before {
  content: "";
  position: absolute;

  left: 0;
  top: 12px;
  bottom: 12px;

  width: 1px;

  background: transparent;

  transition: background 0.15s ease;
}


.status:hover::before {
  background: #bdbdba;
}


/* ---------------------------------------------------------
   30. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}