/* ================================
   BACK TO THE 2010! Mastodon Theme
   칠판 + 파스텔 분필 + 초등학교 감성
================================ */

/* 기본 색상 */
:root {
  --bt2010-board: #5f7f7b;
  --bt2010-board-dark: #456461;
  --bt2010-cream: #fffdf4;
  --bt2010-pink: #f7a8bd;
  --bt2010-blue: #9ed4ee;
  --bt2010-yellow: #ffe672;
  --bt2010-line: #d8eee9;
  --bt2010-text: #263735;
}

/* 전체 배경 */
body,
.layout-single-column,
.ui {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(180deg, #eef8f5 0%, #d8eee9 100%) !important;
  color: var(--bt2010-text) !important;
}

/* 메인 컬럼 */
.column,
.drawer,
.tabs-bar,
.compose-panel,
.navigation-panel {
  background: var(--bt2010-cream) !important;
  border: 3px solid var(--bt2010-board-dark) !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 0 rgba(69, 100, 97, .28) !important;
  overflow: hidden;
}

/* 컬럼 헤더 */
.column-header,
.column-header__button,
.column-header__back-button {
  background: var(--bt2010-board) !important;
  color: #fffdf4 !important;
  border-bottom: 3px dashed var(--bt2010-line) !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
}

/* 게시글 카드 */
.status,
.notification,
.conversation {
  background: #fffdf4 !important;
  border-bottom: 2px dashed #cde5df !important;
  padding: 18px !important;
}

.status:hover,
.notification:hover {
  background: #fff8dc !important;
}

/* 이름/본문 */
.display-name strong,
.status__display-name strong {
  color: #345653 !important;
  font-weight: 900 !important;
}

.status__content,
.reply-indicator__content {
  color: #30413f !important;
  line-height: 1.75 !important;
}

/* 링크 */
a,
.status__content a {
  color: #4d9ec6 !important;
  font-weight: 700;
}

a:hover {
  color: #f196ad !important;
}

/* 버튼 */
.button,
.button.button-primary,
.compose-form__publish-button-wrapper .button {
  background: var(--bt2010-yellow) !important;
  color: #394744 !important;
  border: 3px solid #456461 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 #456461 !important;
  font-weight: 900 !important;
}

.button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #456461 !important;
  background: #ffd9e4 !important;
}

/* 입력창 */
.compose-form .autosuggest-textarea__textarea,
.compose-form__spoiler-field,
.search__input {
  background: #ffffff !important;
  color: #263735 !important;
  border: 3px solid #8eb8b4 !important;
  border-radius: 18px !important;
}

/* 프로필 헤더/카드 */
.account__header {
  background: var(--bt2010-board) !important;
  border-radius: 20px 20px 0 0 !important;
}

.account__header__bar {
  background: #fffdf4 !important;
  border-top: 3px dashed #d8eee9 !important;
}

/* 아이콘 버튼 */
.icon-button {
  color: #5f7f7b !important;
}

.icon-button:hover,
.icon-button.active {
  color: #f7a8bd !important;
  background: rgba(247, 168, 189, .18) !important;
  border-radius: 999px !important;
}

/* 메뉴 */
.dropdown-menu,
.privacy-dropdown__dropdown,
.language-dropdown__dropdown {
  background: #fffdf4 !important;
  border: 3px solid #456461 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 0 rgba(69,100,97,.25) !important;
}

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

/* 스크롤바 */
::-webkit-scrollbar {
  width: 12px;
}

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

::-webkit-scrollbar-thumb {
  background: #5f7f7b;
  border-radius: 999px;
  border: 3px solid #d8eee9;
}

/* 로그인/랜딩 쪽 */
.public-layout,
.public-layout .container {
  background: #eef8f5 !important;
}

.hero-widget,
.landing-page__call-to-action,
.public-account-header {
  background: var(--bt2010-board) !important;
  color: #fffdf4 !important;
  border: 4px solid #456461 !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 0 rgba(69,100,97,.28) !important;
}

/* 귀여운 분필 느낌 강조 */
.column-header::after {
  content: " ✦";
  color: var(--bt2010-yellow);
}

.drawer__inner::before {
  content: "BACK TO THE 2010!";
  display: block;
  padding: 14px 18px;
  background: var(--bt2010-board);
  color: #fffdf4;
  font-weight: 900;
  text-align: center;
  letter-spacing: .08em;
  border-bottom: 3px dashed var(--bt2010-line);
}

/* 모바일 대응 */
@media screen and (max-width: 700px) {
  .column,
  .drawer,
  .navigation-panel {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .status {
    padding: 14px !important;
  }
}