/* ── Google Fonts: DM Sans ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* ── CSS 변수 ── */
:root {
  --sky-point: #3b7ea1;
  --sky-point-dark: #5a9fc2;
  --sky-point-hover: #2d6887;
  --sky-point-dark-hover: #4a8fb3;
  --bg-light: #f5f5f4;
  --bg-dark: #0d0f14;
  --text-main: #1a1a1a;       /* 툿 본문 — 진한 색 */
  --text-reply: #6b7280;      /* 댓글 본문 — 연한 색 */
}

/* ══════════════════════════════
   전역 폰트
══════════════════════════════ */
body,
.ui__header,
.column-header,
.drawer__inner,
.status__content,
.column__wrapper,
.column-link,
.compose-form,
.search__input {
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: -0.1px;
}

/* ══════════════════════════════
   라이트 모드 — 전체 배경 통일
══════════════════════════════ */
body {
  background: var(--bg-light) !important;
}

.navigation-panel,
.column,
.column-header,
.drawer__inner,
.compose-form,
.ui__header,
.search,
.account-card,
.getting-started {
  background: var(--bg-light) !important;
  box-shadow: none !important;
}

.column {
  border-right: 0.5px solid rgba(0, 0, 0, 0.07) !important;
}

.navigation-panel {
  border-right: 0.5px solid rgba(0, 0, 0, 0.07) !important;
}

/* ── 로고 숨기기 ── */
.navigation-panel__logo,
.ui__header__logo,
.hero__logo,
.navigation-panel__logo img,
.ui__header__logo img {
  display: none !important;
}

.navigation-panel {
  padding-top: 8px !important;
}

/* ══════════════════════════════
   툿 본문 색 — 진하게
══════════════════════════════ */
.status__content p,
.status__content {
  color: var(--text-main) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* ══════════════════════════════
   댓글(답글) 본문 색 — 연하게
   .status--in-thread : 스레드 내 답글
   .detailed-status ~ .status : 상세 툿 아래 달린 댓글
══════════════════════════════ */
.status--in-thread .status__content p,
.status--in-thread .status__content,
.detailed-status ~ .status .status__content p,
.detailed-status ~ .status .status__content,
.status[data-featured="false"] ~ .status .status__content p {
  color: var(--text-reply) !important;
}

/* 댓글 작성자 이름도 살짝 연하게 */
.status--in-thread .display-name__html,
.detailed-status ~ .status .display-name__html {
  color: var(--text-reply) !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════
   다크 모드 — 전체 배경 통일
══════════════════════════════ */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg-dark) !important;
  }

  .navigation-panel,
  .column,
  .column-header,
  .drawer__inner,
  .compose-form,
  .ui__header,
  .search,
  .account-card,
  .getting-started,
  .status {
    background: var(--bg-dark) !important;
    box-shadow: none !important;
  }

  .column {
    border-right: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  }

  .navigation-panel {
    border-right: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  }

  .status {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  }

  a,
  .status__content a,
  .mention,
  .account__display-name strong,
  .trends__item__name a,
  .column-link.active,
  .column-link.active .column-link__icon {
    color: var(--sky-point-dark) !important;
  }

  .button,
  .compose-form__submit .button {
    background: var(--sky-point-dark) !important;
  }
  .button:hover {
    background: var(--sky-point-dark-hover) !important;
  }

  .column-header__btn:hover,
  .icon-button:hover,
  .icon-button.active {
    color: var(--sky-point-dark) !important;
  }

  .compose-form .autosuggest-textarea__textarea,
  .compose-form__textarea,
  .search__input {
    border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }
}

/* ══════════════════════════════
   포인트 컬러 — 라이트
══════════════════════════════ */
a,
.status__content a,
.mention,
.account__display-name strong,
.trends__item__name a,
.column-link.active,
.column-link.active .column-link__icon {
  color: var(--sky-point) !important;
}

.button,
.compose-form__submit .button {
  background: var(--sky-point) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
.button:hover {
  background: var(--sky-point-hover) !important;
}

.column-header__btn:hover,
.icon-button:hover,
.icon-button.active {
  color: var(--sky-point) !important;
}

/* ══════════════════════════════
   사이드바 네비게이션
══════════════════════════════ */
.column-link {
  font-size: 14px !important;
  padding: 10px 14px !important;
}

.column-link__icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 10px !important;
}

/* ══════════════════════════════
   게시물 (툿)
══════════════════════════════ */
.status {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  padding: 14px 16px !important;
  background: transparent !important;
}

.display-name__html {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.status__relative-time,
.status__display-name .display-name__account {
  font-size: 11px !important;
  opacity: 0.55 !important;
}

.status__avatar .account__avatar {
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
}

.status__action-bar .icon-button {
  font-size: 16px !important;
}

.status__action-bar {
  gap: 8px !important;
  margin-top: 8px !important;
}

/* ══════════════════════════════
   컬럼 헤더
══════════════════════════════ */
.column-header {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.07) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}

.column-header__title {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════
   검색창 · 글쓰기 영역
══════════════════════════════ */
.search__input {
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form__textarea {
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

/* ══════════════════════════════
   모달 · 드롭다운
══════════════════════════════ */
.modal-root__modal,
.dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ══════════════════════════════
   전역 그림자 제거
══════════════════════════════ */
.column,
.drawer__inner,
.navigation-panel,
.column-header,
.button {
  box-shadow: none !important;
}

/* ── 하단 푸터 텍스트 숨기기 ── */
.link-footer {
  display: none !important;
}

/* ── 로그인 버튼 표시 강조 ── */
.button.button--block,
.sign-in-banner .button {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}