:root,
body {
  --non-routine-bg: #000000;
  --non-routine-fg: #ffffff;
  --non-routine-border: #ffffff;
  --non-routine-border-dim: #444444;
  --non-routine-dim: #999999;
  --non-routine-danger: #e06c5c;

  /* 마스토돈 내부 변수 */
  --background-color: #000000;
  --background-color-tint: #000000;
  --background-filter: none;
  --surface-background-color: #000000;
  --surface-variant-background-color: #0a0a0a;
  --surface-variant-active-background-color: #141414;
  --on-surface-color: #ffffff;
  --modal-background-color: #000000;
  --modal-background-variant-color: #0a0a0a;
  --modal-border-color: #ffffff;
  --dropdown-background-color: #000000;
  --dropdown-border-color: #ffffff;
  --dropdown-shadow: none;
  --overlay-background-color: rgba(0, 0, 0, 0.85);
  --rich-text-container-color: #0a0a0a;
  --rich-text-text-color: #ffffff;
  --rich-text-decorations-color: #444444;
  --input-background-color: #000000;
  --input-border-color: #ffffff;
  --input-placeholder-color: #666666;
  --error-background-color: #2a0e0e;
  --error-text-color: #ff9a8a;
  --on-error-color: #ffffff;
  --success-background-color: #0e2a12;
  --goldenrod: #ffffff;
  --highlight-text-color: #ffffff;
  --avatar-border-radius: 2px;

  --color-text-primary: #ffffff;
  --color-text-secondary: #999999;
  --color-text-tertiary: #666666;
  --color-text-inverted: #000000;
  --color-text-brand: #ffffff;
  --color-text-brand-soft: #999999;
  --color-text-on-brand-base: #000000;
  --color-text-brand-on-inverted: #ffffff;
  --color-text-error: #ff9a8a;
  --color-text-on-error-base: #ffffff;
  --color-text-warning: #e0c15c;
  --color-text-on-warning-base: #000000;
  --color-text-success: #8ee0a0;
  --color-text-on-success-base: #000000;
  --color-text-disabled: #555555;
  --color-text-on-disabled: #999999;
  --color-text-bookmark-highlight: #ffffff;
  --color-text-favourite-highlight: #ffffff;
  --color-text-on-media: #ffffff;
  --color-text-status-links: #ffffff;


  --color-bg-primary: #000000;
  --color-bg-secondary: #0a0a0a;
  --color-bg-tertiary: #141414;
  --color-bg-inverted: #ffffff;
  --color-bg-overlay-base: rgba(0, 0, 0, 0.85);
  --color-bg-overlay-highlight: rgba(255, 255, 255, 0.08);
  --color-bg-overlay: rgba(0, 0, 0, 0.85);
  --color-bg-media: rgba(0, 0, 0, 0.5);
  --color-bg-media-base: #000000;
  --color-bg-disabled: #1a1a1a;

  --color-bg-brand-base: #ffffff;
  --color-bg-brand-base-hover: #d9d9d9;
  --color-bg-brand-soft: #141414;
  --color-bg-brand-softest: #0a0a0a;

  --color-bg-error-base: #e06c5c;
  --color-bg-error-base-hover: #c9584a;
  --color-bg-error-soft: #2a0e0e;
  --color-bg-error-softest: #1a0808;
  --color-bg-warning-base: #e0c15c;
  --color-bg-warning-soft: #2a260e;
  --color-bg-warning-softest: #1a1808;
  --color-bg-success-base: #4caf6b;
  --color-bg-success-soft: #0e2a12;
  --color-bg-success-softest: #081a0c;

  --color-border-primary: #444444;
  --color-border-brand: #ffffff;
  --color-border-brand-soft: #444444;
  --color-border-error: #e06c5c;
  --color-border-success-soft: #1e4a2a;
  --color-border-warning-soft: #4a3f1e;
  --color-border-error-soft: #4a1e1e;
  --color-border-media: #222222;
}

html, body {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
}

body,
input, textarea, select, button, label,
h1, h2, h3, h4, h5, h6,
.status__content,
.display-name,
.account__display-name,
.reply-indicator__content {
  font-family: "Courier New", ui-monospace, SFMono-Regular, monospace !important;
}


a,
.status__content a,
.getting-started__trends a,
.link-button,
.button.button-tertiary {
  color: var(--non-routine-fg) !important;
  text-decoration: underline;
}
a:hover, .link-button:hover {
  background: var(--non-routine-fg) !important;
  color: var(--non-routine-bg) !important;
  text-decoration: none;
}


.button, .card, .box-widget, .simple_form input, .simple_form textarea,
.simple_form select, .dropdown-menu, .modal-root__modal, .status,
.account__avatar, .avatar img, .compose-form__autosuggest-wrapper,
.search__input, .column-header, .notification, .account__header__bar {
  border-radius: 0 !important;
  box-shadow: none !important;
}


.container,
.form-container,
.simple_form,
.auth-header,
.public-layout,
.public-layout .header,
.public-layout .container,
.card__bar,
.landing,
.landing-page,
.form-footer,
.no-list {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border-radius: 0 !important;
}

.logo,
.logo--icon,
.logo--wordmark,
.brand svg,
.brand img,
.logo-resources {
  display: none !important;
}
.logo-container,
.logo-container a,
.brand,
.brand > a {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
}
.logo-container::after,
.logo-container a::after,
.brand::after,
.brand > a::after {
  content: "NON-ROUTINE";
  display: inline-block;
  font-family: "Courier New", ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--non-routine-fg);
  white-space: nowrap;
}


.form-container h1,
.form-container h2,
.simple_form h1,
.simple_form h2,
.title,
.h1,
.form-container .title {
  color: var(--non-routine-fg) !important;
  letter-spacing: 2px;
  font-weight: 400 !important;
}

/* 입력 필드 전체 */
.simple_form input[type=text],
.simple_form input[type=email],
.simple_form input[type=password],
.simple_form input[type=number],
.simple_form input[type=url],
.simple_form textarea,
.simple_form select,
.input-copy input,
.search input,
input.string,
input.email,
input.password {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border: 1px solid var(--non-routine-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Courier New", ui-monospace, monospace !important;
  padding: 9px 10px !important;
}
.simple_form input:focus,
.simple_form textarea:focus,
.simple_form select:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--non-routine-fg) !important;
  border-color: var(--non-routine-fg) !important;
}
.simple_form input::placeholder,
.simple_form textarea::placeholder { color: #666666 !important; }

/* 라벨 / 힌트 / 필수 표시 */
.simple_form label,
.simple_form .label_input__wrapper label,
.simple_form .hint,
.simple_form .recommended,
.simple_form p.hint,
.simple_form span.hint,
.label_input > label {
  color: var(--non-routine-dim) !important;
  font-family: "Courier New", ui-monospace, monospace !important;
}
.simple_form abbr[title] {
  color: var(--non-routine-fg) !important;
  text-decoration: none !important;
}

/* 버튼 (흰 배경 / 검은 글씨, 이 사이트의 기본 버튼과 동일) */
.simple_form .button,
.simple_form button,
.button,
button.button,
.block-button,
.btn {
  background: var(--non-routine-fg) !important;
  color: var(--non-routine-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: "Courier New", ui-monospace, monospace !important;
  letter-spacing: 1px;
  text-transform: none !important;
  text-decoration: none !important;
}
.simple_form .button:hover,
.button:hover,
button.button:hover { opacity: 0.82; }

/* 보조 버튼(테두리형) */
.button.button-secondary,
.button.button-tertiary,
.simple_form .button.negative {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border: 1px solid var(--non-routine-border) !important;
}
.button.button-secondary:hover,
.button.button-tertiary:hover {
  background: var(--non-routine-fg) !important;
  color: var(--non-routine-bg) !important;
}

/* 체크박스 / 라디오 */
.simple_form input[type=checkbox],
.simple_form input[type=radio] {
  accent-color: #ffffff;
}
.simple_form .checkbox label,
.simple_form .radio label { color: var(--non-routine-fg) !important; }

/* 에러 / 경고 */
.flash-message,
.flash-message.alert,
.simple_form .error,
.simple_form .warning,
.form-container .flash-message {
  background: #1a0d0d !important;
  color: #ff9a8a !important;
  border: 1px solid var(--non-routine-danger) !important;
  border-radius: 0 !important;
}
.flash-message.notice,
.flash-message.success {
  background: #0d1a0f !important;
  color: #8ad38f !important;
  border: 1px solid #3c6b40 !important;
}
.simple_form .error .error,
span.error { color: var(--non-routine-danger) !important; }

/* 하단 링크 묶음 (비밀번호 찾기 / 로그인 / 가입) */
.form-footer,
.form-footer a,
.no-list li a,
.simple_form .actions + p,
.form-container .lighter {
  color: var(--non-routine-dim) !important;
}

/* ---- OAuth 인가 화면 (/oauth/authorize) ----
   non-routine-app 로그인 버튼을 누른 사용자가 실제로 마주치는 화면입니다.
   "NON-ROUTINE이 계정에 접근하려 합니다 / 허가 / 거부"가 뜨는 곳. */
.form-container .oauth-prompt,
.oauth-prompt,
#new_oauth_authorization,
.oauth-prompt h2,
.oauth-prompt h3,
.oauth-prompt p,
.oauth-prompt strong {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border-radius: 0 !important;
}
.oauth-prompt img,
.oauth-prompt .app-icon {
  filter: grayscale(100%) contrast(1.05);
  border-radius: 0 !important;
}
/* 요청 권한 목록 */
.oauth-prompt__permissions,
.permissions-list,
.permissions-list__item,
.scope-list,
.scope-list li {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border-color: var(--non-routine-border-dim) !important;
  border-radius: 0 !important;
}
.permissions-list__item {
  border-bottom: 1px solid var(--non-routine-border-dim) !important;
  padding: 10px 0 !important;
}
.permissions-list__item__icon,
.permissions-list__item .fa {
  color: var(--non-routine-fg) !important;
  background: transparent !important;
}
.permissions-list__item__text__title { color: var(--non-routine-fg) !important; }
.permissions-list__item__text__type { color: var(--non-routine-dim) !important; }
/* 허가 / 거부 버튼을 나란히 */
.oauth-prompt .actions,
#new_oauth_authorization .actions {
  display: flex !important;
  gap: 8px !important;
}

/* 가입 절차 표시(1 - 2 - 3) */
.progress-indicator,
.progress-indicator__step,
.progress-indicator__wrapper {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-dim) !important;
}
.progress-indicator__step.active,
.progress-indicator__step.active .progress-indicator__label {
  color: var(--non-routine-fg) !important;
}
.progress-indicator__dot {
  background: var(--non-routine-border-dim) !important;
  border-radius: 0 !important;
}
.progress-indicator__step.active .progress-indicator__dot {
  background: var(--non-routine-fg) !important;
}

/* 서버 규칙 동의 화면 */
.rules-list,
.rules-list li,
.rules-list__text {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border-color: var(--non-routine-border-dim) !important;
  border-radius: 0 !important;
}
.rules-list li::before {
  background: var(--non-routine-fg) !important;
  color: var(--non-routine-bg) !important;
  border-radius: 0 !important;
}


/* ==================================================================
   (B) 랜딩 / 공개 프로필
   ================================================================== */
.hero-widget,
.hero-widget__text,
.hero-widget__img,
.box-widget,
.contact-widget,
.landing-page__call-to-action,
.endorsements-widget,
.account__section-headline,
.directory__card,
.directory__card__bar,
.public-account-header,
.public-account-bio,
.account__header__bio {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border: 1px solid var(--non-routine-border-dim) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.public-account-header__image img,
.hero-widget__img img,
.account__header__image img {
  filter: grayscale(100%) contrast(1.05);
}
.landing-page__call-to-action .row__information-board {
  background: var(--non-routine-bg) !important;
}


/* ==================================================================
   (C) 로그인 후 웹 UI
   ================================================================== */
.app-holder,
.columns-area,
.columns-area__panels,
.columns-area__panels__main,
.columns-area__panels__pane__inner,
.ui,
.tabs-bar,
.drawer,
.drawer__inner,
.column,
.scrollable,
.navigation-panel,
.getting-started,
.search__input {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
}

/* 칼럼 헤더 (홈, 알림 등 상단바) */
.column-header,
.column-header__wrapper,
.column-header__button,
.column-back-button,
.tabs-bar__link {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border-bottom: 1px solid var(--non-routine-border) !important;
  border-radius: 0 !important;
}
.tabs-bar__link.active,
.column-link--transparent.active {
  border-bottom: 2px solid var(--non-routine-fg) !important;
  color: var(--non-routine-fg) !important;
}

.column, .drawer {
  border-left: 1px solid var(--non-routine-border-dim) !important;
  border-right: 1px solid var(--non-routine-border-dim) !important;
}

/* 글(툿) 카드 */
.status,
.status__wrapper,
.detailed-status,
.notification,
.conversation {
  background: var(--non-routine-bg) !important;
  border-bottom: 1px solid var(--non-routine-border-dim) !important;
  border-radius: 0 !important;
}
.status__content,
.status__content p { color: var(--non-routine-fg) !important; }
.status__relative-time,
.display-name__account,
.notification__message { color: var(--non-routine-dim) !important; }

/* 아바타: 원형 대신 사각형 + 흑백 */
.account__avatar,
.status__avatar img,
.account__avatar img,
.avatar img {
  border-radius: 2px !important;
  filter: grayscale(100%) contrast(1.05);
}
/* 본문에 붙은 이미지도 흑백으로, 마우스를 올리면 원래 색 */
.media-gallery__item img,
.media-gallery__item-thumbnail img { filter: grayscale(100%); }
.media-gallery__item:hover img { filter: none; }

/* 작성(compose) 패널 */
.compose-form,
.compose-panel,
.compose-form__autosuggest-wrapper,
.autosuggest-textarea__textarea,
.compose-form__upload-wrapper,
.spoiler-input__input {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border: 1px solid var(--non-routine-border) !important;
  border-radius: 0 !important;
}
.compose-form__buttons-wrapper,
.compose-form__footer {
  border-top: 1px solid var(--non-routine-border-dim) !important;
  background: var(--non-routine-bg) !important;
}

/* 아이콘 버튼: 컬러 강조 제거 */
.icon-button,
.icon-button.active,
.status__action-bar .icon-button,
.detailed-status__action-bar .icon-button {
  color: var(--non-routine-fg) !important;
}
.icon-button.active { opacity: 0.6; }
.icon-button:hover { background: transparent !important; opacity: 1; }

/* 드롭다운 / 모달 */
.dropdown-menu,
.dropdown-menu__item a,
.modal-root__modal,
.actions-modal,
.boost-modal,
.confirmation-modal,
.report-modal {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
  border: 1px solid var(--non-routine-border) !important;
  border-radius: 0 !important;
}
.dropdown-menu__item a:hover {
  background: var(--non-routine-fg) !important;
  color: var(--non-routine-bg) !important;
}

/* 알림 뱃지 */
.column-link__badge,
.notification-bar,
.icon-with-badge__badge {
  background: var(--non-routine-fg) !important;
  color: var(--non-routine-bg) !important;
  border-radius: 0 !important;
}


/* ==================================================================
   (D) 에러 페이지 / 스크롤바
   ================================================================== */
.error-layout,
.error-layout__body,
.error-layout__link {
  background: var(--non-routine-bg) !important;
  color: var(--non-routine-fg) !important;
}
.error-layout__image { filter: grayscale(100%) brightness(1.4); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--non-routine-bg); }
::-webkit-scrollbar-thumb { background: var(--non-routine-border-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--non-routine-dim); }
* { scrollbar-color: var(--non-routine-border-dim) var(--non-routine-bg); }

::selection { background: var(--non-routine-fg); color: var(--non-routine-bg); }

