/*
 * Mastodon 커스텀 테마 (4.6 RC 호환)
 * 골드 & 딥 브라운 나이트 테마로 색상 조정
 */


/* =====================================================
   1. 골드 액센트 테마
   4.6은 --color-bg-brand-base 등 새 토큰 시스템 사용
   ===================================================== */

/* 다크 모드 */
[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  /* 버튼 배경 (게시 버튼 등) */
  --color-bg-brand-base:          #9C7A3C;
  --color-bg-brand-base-hover:    #B5924F;
  --color-bg-brand-soft:          #3A2E19;
  --color-bg-brand-softest:       #1E170C;

  /* 텍스트 링크, 탭 활성, 아이디 색상 */
  --color-text-brand:             #E3CB98;
  --color-text-brand-soft:        #C7A868;
  --color-text-brand-on-inverted: #3A2E19;

  /* 포커스 아웃라인, 탭 하단 선 */
  --color-border-brand:           #E3CB98;
  --color-border-brand-soft:      #9C7A3C;

  /* 그래프 */
  --color-graph-primary-stroke:   #E3CB98;
  --color-graph-primary-fill:     #1E170C;

  /* 레거시 변수 (Bird UI 잔재) */
  --color-accent: #E3CB98;
  --color-accent-dark: #C7A868;
  --color-accent-dark-50: #C7A86880;
  --color-brand-mastodon-links: #E3CB98;
}

/* 라이트 모드 */
[data-color-scheme='light'] {
  --color-bg-brand-base:          #9C7A3C;
  --color-bg-brand-base-hover:    #86662E;
  --color-bg-brand-soft:          #F1E6CC;
  --color-bg-brand-softest:       #FAF4E6;

  --color-text-brand:             #86662E;
  --color-text-brand-soft:        #A3813F;
  --color-text-brand-on-inverted: #FAF4E6;

  --color-border-brand:           #9C7A3C;
  --color-border-brand-soft:      #C7A868;

  --color-graph-primary-stroke:   #9C7A3C;
  --color-graph-primary-fill:     #FAF4E6;

  --color-accent: #9C7A3C;
  --color-accent-dark: #7A5F2E;
  --color-brand-mastodon-links: #9C7A3C;
}


/* =====================================================
   2. 아바타 전체 원형
   ===================================================== */

html {
  --avatar-border-radius: 50% !important;
}

.account__avatar,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay {
  border-radius: 50% !important;
}

/* 아바타 안의 img도 원형 */
.account__avatar img {
  border-radius: 50% !important;
}


/* =====================================================
   3. 로고 변경
   ===================================================== */

.column-link--logo .logo--wordmark,
.column-link--logo .logo--icon {
  display: none !important;
}

[data-color-scheme='dark'] .column-link--logo::before,
html:not([data-color-scheme]) .column-link--logo::before {
  content: '';
  display: block;
  width: 160px;
  height: 36px;
  background-image: url('https://cdn.masto.host/communityoccom/media_attachments/files/116/939/680/409/150/578/original/16f75987856f3ff3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

[data-color-scheme='light'] .column-link--logo::before {
  content: '';
  display: block;
  width: 160px;
  height: 36px;
  background-image: url('https://cdn.masto.host/communityoccom/media_attachments/files/116/939/680/409/203/994/original/1348bda02871716a.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}


/* =====================================================
   4. 배경 이미지
   ===================================================== */

body {
  background: transparent !important;
}

[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  background: #17120c !important;
}

[data-color-scheme='light'] {
  background: #FAF4E6 !important;
}

[data-color-scheme='dark'] .ui::before,
html:not([data-color-scheme]) .ui::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('https://cdn.masto.host/communityoccom/media_attachments/files/116/939/704/821/567/698/original/45077b1f8bb22d2a.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

[data-color-scheme='light'] .ui::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('https://cdn.masto.host/communityoccom/media_attachments/files/116/939/704/821/567/698/original/45077b1f8bb22d2a.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* .ui > * 에 position:relative + z-index 주면
   하단 고정 바(position:fixed)의 stacking context가 깨져서
   fixed가 동작 안 함 → 이 블록 제거 */

[data-color-scheme='dark'] .ui::after,
html:not([data-color-scheme]) .ui::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 15%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg-primary, #17120c) 60%, transparent) 0%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

[data-color-scheme='light'] .ui::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 15%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg-primary, #FAF4E6) 60%, transparent) 0%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}


/* =====================================================
   5. 홈 타임라인 배경 투명
   ===================================================== */

.columns-area--mobile .scrollable,
.column > .scrollable,
.columns-area__panels__main {
  background: transparent !important;
}

.status {
  background: transparent !important;
}

.tabs-bar__wrapper {
  background: color-mix(in srgb, var(--color-bg-primary) 70%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


/* =====================================================
   6. 왼쪽 ↔ 오른쪽 사이드바 교체
   ===================================================== */

.columns-area__panels {
  flex-direction: row !important;
}

.columns-area__panels__pane--navigational {
  order: -1 !important;
}

.columns-area__panels__pane--compositional {
  order: 1 !important;
}

.columns-area__panels__main {
  order: 0 !important;
}

@media screen and (max-width: 759px) {
  .columns-area__panels__pane--navigational {
    order: unset !important;
    inset-inline-end: 0 !important;
    inset-inline-start: unset !important;
  }
  .columns-area__panels__pane--compositional {
    order: unset !important;
  }
}


/* =====================================================
   7. 프로필 페이지 - 트위터 스타일
   ===================================================== */

/* --- 배너(헤더 이미지) 높이 키우기 --- */
/* img.parallax: 배너 이미지 */
.parallax {
  height: 200px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 배너를 감싸는 div (classes.header) */
img.parallax + div,
.parallax ~ div {
  /* barWrapper */
}

/* --- 프로필 아바타: 크게 + 배너 위에 걸치기 --- */
/*
  구조:
    div.header > img.parallax
    div.barWrapper > div.avatarWrapper > a > span.account__avatar
  
  avatarWrapper가 margin-top: -64px 으로 배너 위에 걸쳐있음.
  아바타 size={80}은 인라인 스타일 → !important로 override
*/

/* 프로필 페이지 아바타만 크게 (타임라인 아바타와 구분) */
/* 배너 img 바로 다음 div (barWrapper) 안의 첫 번째 div (avatarWrapper) 안의 아바타 */
img.parallax ~ div .account__avatar,
.parallax + div .account__avatar {
  width: 100px !important;
  height: 100px !important;
  /* 배너 밖으로 더 많이 걸치도록 */
  margin-top: -20px !important;
  /* 테두리로 배너와 분리 */
  border: 4px solid var(--color-bg-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* 아바타 a 태그 overflow 해제 */
img.parallax ~ div a:has(.account__avatar),
.parallax + div a:has(.account__avatar) {
  display: block;
  overflow: visible !important;
}

/* avatarWrapper overflow 해제 (기본값이 hidden이라 잘릴 수 있음) */
img.parallax ~ div > div:first-child {
  overflow: visible !important;
}


/* --- 팔로워/팔로잉 트위터 스타일 ---
   NumberFields: <ul class="[hash]list [hash]numberFields">
                   <li class="[hash]item">팔로워 <a>10</a></li>
   CSS module 해시 클래스는 직접 못 잡음
   → 구조 셀렉터로: parallax 이후 div 안의 ul > li 타겟
*/

/* ul (NumberFields list) */
img.parallax ~ div ul,
.parallax ~ div ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  margin: 8px 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* li (NumberFieldsItem) */
img.parallax ~ div ul li,
.parallax ~ div ul li {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
}

/* 숫자 (strong / a) → 굵게, 기본 색 */
img.parallax ~ div ul li strong,
img.parallax ~ div ul li a,
.parallax ~ div ul li strong,
.parallax ~ div ul li a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  order: -1 !important; /* 숫자를 라벨 앞에 */
}


/* --- 탭(활동/미디어/추천) 하단 선 색상 --- */
.account__section-headline a.active::before,
.account__section-headline button.active::before {
  background: var(--color-accent, #E3CB98) !important;
}

[data-color-scheme='light'] .account__section-headline a.active::before,
[data-color-scheme='light'] .account__section-headline button.active::before {
  background: var(--color-accent, #9C7A3C) !important;
}


/* =====================================================
   8. 모바일 하단 네비게이션 바
   기본: 760px 이상에서 숨겨짐 → 원하는 breakpoint로 조정
   ===================================================== */

/* 890px 이하에서 하단 바 항상 표시 */
@media screen and (width <= 890px) {
  .ui__navigation-bar {
    display: flex !important;
  }

  /* 하단 바 높이만큼 컨텐츠 아래 패딩 확보 */
  .ui {
    padding-bottom: calc(
      var(--mobile-bottom-nav-height, 55px) - var(--last-content-item-border-width, 2px)
    ) !important;
  }
}

/* 890px 초과에서는 숨김 (데스크탑) */
@media screen and (width > 890px) {
  .ui__navigation-bar {
    display: none !important;
  }
}

/* 하단 바 배경 - 반투명 블러 */
.ui__navigation-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: color-mix(in srgb, var(--color-bg-primary) 80%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 활성 탭 아이콘 색상 골드 */
.ui__navigation-bar__item.active {
  color: var(--color-text-brand) !important;
}


/* =====================================================
   9. 홈 타임라인 DM 숨기기
   ===================================================== */

[aria-label="홈"] .status__wrapper-direct {
  display: none !important;
}


/* =====================================================
   10. 모바일 글씨 크기
   ===================================================== */

@media (max-width: 890px) {
  .layout-single-column .status__content {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}


/* =====================================================
   11. '홈' 헤더 바 & 검색창 배경 제거
   표준 마스토돈 클래스명 기준 추정 셀렉터입니다.
   실제로 안 먹으면 브라우저 개발자도구(F12)로 해당 요소
   클릭 → 클래스명 확인 후 아래 셀렉터를 교체해주세요.
   ===================================================== */

/* 상단 '홈' 컬럼 헤더 바 */
.column-header,
.column-header__wrapper,
.column-header__buttons {
  background: transparent !important;
  box-shadow: none !important;
}

/* 오른쪽 위 검색창 */
.search,
.search__input,
.search-popout,
.search__popout {
  background: transparent !important;
  box-shadow: none !important;
}

/* 검색창 테두리만 살짝 남기고 싶다면 아래 주석 해제 */
/*
.search__input {
  border: 1px solid var(--color-border-brand-soft) !important;
}
*/