/* ========== 공통(테마 무관) ========== */
/* 사이드바 아이콘은 텍스트색을 따라가게 */
.column-link__icon,
.column-link__icon svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* 검색/세팅 입력창의 공통 레이아웃(색 제외) */
.layout-single-column .search__input,
.layout-single-column input.setting-text {
  border-radius: 32px;
  font-size: var(--font-size);
  height: 42px;
  padding: 0 20px;
}

/* ========== LIGHT (흰 배경 · 검/회색 텍스트) ========== */
/* 사이드바 */
.theme-light .drawer,
.theme-light .drawer__inner {
  background: #fff !important;
}

.theme-light .column-link {
  color: #111 !important;
  background: transparent !important;
}

.theme-light .column-link:hover {
  background: #f2f2f2 !important;
}

.theme-light .column-link--active,
.theme-light .column-link.is-active {
  color: #111 !important;
  background: #eaeaea !important;
  border-left-color: #eaeaea !important;
}

/* 사이드바 타이틀/푸터 */
.theme-light .drawer h1,
.theme-light .drawer h2,
.theme-light .drawer .getting-started__footer {
  color: #111 !important;
}

/* 타임라인의 멘션/계정 아이디 */
.theme-light .layout-single-column .status-link.mention:not(.hashtag),
.theme-light .layout-single-column .display-name__account,
.theme-light .layout-single-column .status__info .display-name .display-name__account {
  color: #111 !important;
}

/* 작성 시간 */
.theme-light .status__relative-time {
  color: #666 !important;
}

/* 검색/세팅 입력창 색상 */
.theme-light .layout-single-column .search__input,
.theme-light .layout-single-column input.setting-text {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  color: #111 !important;
  box-shadow: none !important;
}

.theme-light .layout-single-column .search__input::placeholder,
.theme-light .layout-single-column input.setting-text::placeholder {
  color: #888 !important;
}

/* ========== DARK (어두운 배경 · 밝은 텍스트) ========== */
/* 사이드바 */
.theme-dark .drawer,
.theme-dark .drawer__inner {
  background: #0f0f10 !important;
}

.theme-dark .column-link {
  color: #f2f2f2 !important;
  background: transparent !important;
}

.theme-dark .column-link:hover {
  background: #1b1b1b !important;
}

.theme-dark .column-link--active,
.theme-dark .column-link.is-active {
  color: #fff !important;
  background: #1e1e1e !important;
  border-left-color: #1e1e1e !important;
}

/* 사이드바 타이틀/푸터 */
.theme-dark .drawer h1,
.theme-dark .drawer h2,
.theme-dark .drawer .getting-started__footer {
  color: #f2f2f2 !important;
}

/* 타임라인의 멘션/계정 아이디 */
.theme-dark .layout-single-column .status-link.mention:not(.hashtag),
.theme-dark .layout-single-column .display-name__account,
.theme-dark .layout-single-column .status__info .display-name .display-name__account {
  color: #f5f5f5 !important;
}

/* 작성 시간 */
.theme-dark .status__relative-time {
  color: #aaa !important;
}

/* 검색/세팅 입력창 색상 */
.theme-dark .layout-single-column .search__input,
.theme-dark .layout-single-column input.setting-text {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #f5f5f5 !important;
  box-shadow: none !important;
}

.theme-dark .layout-single-column .search__input::placeholder,
.theme-dark .layout-single-column input.setting-text::placeholder {
  color: #aaa !important;
}

/* 라이트 테마 스코프 폭넓게 커버 */
:root.theme-light,
body.theme-light,
html.theme-light,
.light-theme,
[data-theme="light"] {
  --color-mention: #111 !important;
  --color-dim: #666 !important;
}

/* 검색/세팅 입력창 — 레이아웃 상관없이 라이트에 흑백 적용 */
:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) :where(.search__input, input.setting-text) {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  color: #111 !important;
  box-shadow: none !important;
}

:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) :where(.search__input::placeholder, input.setting-text::placeholder) {
  color: #888 !important;
}

/* 멘션/아이디/시간 — 라이트 흑백 고정 */
:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) .layout-single-column :where(.status-link.mention:not(.hashtag),
  .display-name__account,
  .status__info .display-name .display-name__account) {
  color: #111 !important;
}

:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) .status__relative-time {
  color: #666 !important;
}

/* ===== Light theme: 분홍 팔레트 → 네이비/그레이 & 멘션/해시 흑백 ===== */
:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) {
  /* 포인트/브랜드 네이비 통일 */
  --color-accent: #5c7887;
  --color-accent-dark: #46616e;
  --color-accent-dark-50: #46616e80;
  --color-brand-mastodon: #5c7887;
  --color-brand-mastodon-links: #5c7887;
  --color-link: var(--color-accent);

  /* 텍스트 흑백 계열 */
  --color-mention: #111111;
  /* @멘션 흑색 */
  --color-hashtag: #111111;
  /* #해시태그도 흑색로 고정 */
  --color-dim: #666666;
  /* 보조 텍스트 */
  --color-light-text: #333333;

  /* 배경/테두리에서 분홍기 제거 */
  --color-mud: #f6f6f6;
  --color-border: #e0e0e0;
  --color-bg-compose-form: #ffffff;
  --color-bg-compose-form-focus: #ffffff;

  /* 분홍 그라디언트·하이라이트 무력화 */
  --compose-form-linear-gradient: none;
  --active-header-radial-gradient: none;

  /* 기타 회색 톤으로 정리(보라빛 줄이기) */
  --color-light-purple: #8a8fa0;
  /* 은은한 회보라로 디새칭 */
  --color-black-coral: #8a8fa0;
  --color-topaz: #8899a6;
  /* 유지 가능 */
}

/* 라이트에서 혹시 남아있는 그라디언트 배경 제거(컴포저/헤더) */
:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) :where(.compose-form, .compose-form__panel, .compose-form__modifiers, .compose-form__buttons) {
  background-image: none !important;
}

/* 라이트 검색/세팅 입력창 흑백 고정(변수 무시) */
:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) :where(.search__input, input.setting-text) {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #111111 !important;
  box-shadow: none !important;
}

:where(html.theme-light, body.theme-light, :root.theme-light, .light-theme, [data-theme="light"]) :where(.search__input::placeholder, input.setting-text::placeholder) {
  color: #888888 !important;
}

:root {
  /* Brand colors */
  --color-brand-mastodon: #fafafa;
  --color-brand-mastodon-links: #f3f3f3;
  --color-brand-mastodon-bg: #1b1b1b;
  --color-brand-mastodon-dim: #5c7887;
  --color-brand-mastodon-mud: rgba(66, 66, 66, 0.5);
  --color-brand-mastodon-dark: #363636;
  --color-brand-mastodon-threaded-line: #1b1b1b;
  --color-brand-mastodon-text-light: #a1a1a1;

  /* Colors */
  /* Note: Remember to search for the DIM hex
     and replace it inside the SVG icons if you decide to change it */
  --color-bg: var(--color-brand-mastodon-bg);
  --color-bg-75: #262626bf;
  --color-bg-90: #232323e6;
  --color-fg: #fafafa;
  --color-border: #454545;
  --color-dim: var(--color-brand-mastodon-dim);
  --color-accent: var(--color-brand-mastodon-links);
  --color-accent-dark: var(--color-brand-mastodon);
  --color-accent-dark-50: #595aff80;
  --color-green: #00ba7c;
  --color-red: #f91880;
  --color-red-75: #f91880bf;
  --color-yellow: #ffac33;
  --color-light-shade: #fafafa05;
  --color-focusable-toot: #fafafa09;
  --color-light-text: #f7f9f9;
  --color-mud: var(--color-brand-mastodon-mud);
  --color-arsenic: #4d4d4d;
  --color-black-coral: #595959;
  --color-profile-button-hover: #f0f0f01a;
  --color-column-link-hover: #f6f6f61a;
  --color-modal-overlay: #80808066;
  --color-dark: var(--color-brand-mastodon-dark);
  --color-thread-line: var(--color-brand-mastodon-threaded-line);
  --color-topaz: #f0f0f0;
  --color-light-purple: #cdcdcd;
  --color-lighter-purple: #d7d7d7;
  --color-dark-electric-blue: #7b7b7b;
  --color-button-text: #5c7887;
  --color-ghost-button-text: var(--color-button-text);
  --color-verified: #79bd9a;
  --color-destructive: #df405a;
  --color-light-fuchsia-pink: #ff8cfd;
  --color-hashtag: var(--color-accent);
  --color-mention: var(--color-accent);
  --color-link: var(--color-accent);
  --color-bg-compose-form: rgba(64, 64, 64, 0.4);
  --color-bg-compose-form-focus: rgba(67, 67, 67, 0.8);
  --color-panel: rgba(16, 16, 16, 0.7);

  /* In the original UI this color is lighten($ui-base-color, 12%) */
  --color-outer-space: #5d5d5d;
}

body.theme-default.layout-single-column,
body.theme-default.layout-multiple-columns {
  --color-brand-mastodon: #0d0d0d;
  --color-brand-mastodon-links: #121212;
  --color-brand-mastodon-bg: #2b2b2b;
  --color-brand-mastodon-dim: #929292;

  --color-bg: #fafafa;
  --color-fg: #000;
  --color-border: #ebebeb;
  --color-dim: #5c7887;
  --color-green: #17bf63;
  --color-red: #e0245e;
  --color-red-75: #e0245ebf;
  --color-light-shade: #00000005;
  --color-focusable-toot: rgba(0, 0, 0, 0.035);
  --color-light-text: #232323;
  --color-mud: #ebebeb;
  --color-black-coral: #a6a6a6;
  --color-profile-button-hover: #2323231a;
  --color-column-link-hover: #2323231a;
  --color-modal-overlay: #7c7c7c66;
  --color-dark: #fbfbfb;
  --color-thread-line: #ebebeb;
  --color-topaz: #a5a5a5;
  --color-light-purple: #a4a4a4;
  --color-dark-electric-blue: #a5a5a5;
  --color-bg-75: #fafafabf;
  --color-bg-90: #fafafae6;
  --color-accent-dark: #2b2b2b;
  --color-accent: var(--color-accent-dark);
  --color-ghost-button-text: var(--color-accent-dark);
  --color-bg-compose-form: rgba(172, 172, 172, 0.2);
  --color-bg-compose-form-focus: rgba(166, 166, 166, 0.3);
  --color-hashtag: var(--color-accent-dark);
  --color-mention: var(--color-accent-dark);
  --color-panel: rgba(255, 255, 255, 0.7);
  --color-button-text: #fff;
}

.dismissable-banner__message h1,
.warning-banner__message h1,
.dismissable-banner__action .icon-button,
.warning-banner__action .icon-button {
  color: var(--color-accent-dark);
}