/* =========================
   Mastodon Custom CSS (All-in-one + Settings patch)
   목표:
   1) 다크/라이트에 따라 로고 + 배경 이미지 변경
   2) 로고 겹침 방지(기존 로고 숨기고 ::before로 1개만 표시)
   3) 메인: 중앙 타임라인(툿 컬럼)만 완전 불투명(라이트=흰, 다크=검) → 배경 안 보이게
   4) 메인: 좌측 네비/우측 패널은 반투명 막(라이트=밝은 막, 다크=검은 막) → 배경 보이게
   5) 다크: 글자색 완전 흰색 / 라이트: 글자색 완전 검정색
   6) 설정/관리 화면(admin/settings)에서도 동일 컨셉 적용
========================= */

/* ===== 0) 서버에 올린 파일 경로만 맞추면 됨 ===== */
:root{
  /* 로고/배경 파일 경로 */
  --logo-light: url("/custom/assets/logo_light.png");
  --logo-dark:  url("/custom/assets/logo_dark.png");
  --bg-light:   url("/custom/assets/bg_lihgt.png");
  --bg-dark:    url("/custom/assets/bg_dark.png");

  /* 메인 중앙 타임라인(완전 불투명) */
  --panel-light: #ffffff;
  --panel-dark:  #000000;

  /* 좌/우 패널(반투명 막) */
  --side-overlay-light: rgba(255,255,255,0.85);
  --side-overlay-dark:  rgba(0,0,0,0.85);

  /* 전역 글자색 */
  --text-light: #000000;
  --text-dark:  #ffffff;
}

/* ===== 1) 모드별 변수 확정 ===== */
/* 라이트 */
body.theme-mastodon-light,
body.theme-mastodon-bird-ui-light{
  --logo-now:         var(--logo-light);
  --bg-now:           var(--bg-light);
  --panel-now:        var(--panel-light);
  --side-overlay-now: var(--side-overlay-light);
  --text-now:         var(--text-light);
}

/* 다크 */
body.theme-default,
body.theme-mastodon-bird-ui-dark{
  --logo-now:         var(--logo-dark);
  --bg-now:           var(--bg-dark);
  --panel-now:        var(--panel-dark);
  --side-overlay-now: var(--side-overlay-dark);
  --text-now:         var(--text-dark);
}

/* ===== 2) 배경 이미지: 페이지 전체(바닥)에 깔기 ===== */
html, body{
  background-image: var(--bg-now) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* 앱 최상위 래퍼는 투명 유지(배경이 보이게) */
#mastodon,
#root,
.app-holder{
  background: transparent !important;
}

/* ===== 3) 메인: 큰 래퍼는 투명 (전체가 덮이는 것 방지) ===== */
:where(.ui, .columns-area, .columns-area__panels){
  background: transparent !important;
}

/* ===== 4) 메인: 중앙 타임라인(툿 컬럼)만 완전 불투명 패널로 덮기 ===== */
:where(.columns-area__panels .column){
  background: var(--panel-now) !important;
}
:where(.columns-area__panels .column .scrollable){
  background: var(--panel-now) !important;
}

/* ===== 5) 메인: 좌측 네비 / 우측 패널: 반투명 막 (배경 보이게) ===== */
:where(.navigation-panel, .drawer, .getting-started){
  background: var(--side-overlay-now) !important;
  backdrop-filter: blur(2px);
}

/* ===== 6) 전역 글자색: 다크=흰색 / 라이트=검정색 ===== */
body,
body *{
  color: var(--text-now) !important;
}

/* 폼 요소 가독성 */
input, textarea, select, button{
  color: var(--text-now) !important;
  border-color: var(--text-now) !important;
  background: transparent !important;
}

/* 링크도 통일 */
a, a:visited, a:hover, a:active{
  color: var(--text-now) !important;
}

/* ===== 7) 메인 로고: 커스텀 로고 표시 + 원본 로고로 클릭 유지 ===== */
:where(.ui__header__logo, .navigation-panel__logo, .column-header__logo){
  position: relative !important;
  min-height: 40px !important;
  /* ↓ 여기 추가 */
  padding-top: 100px !important;   /* ← 위 여백 */
  padding-bottom: 12px !important;/* ← 아래 여백(선택) */

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 커스텀 로고는 "아래 레이어"에 깔기 (클릭은 위 원본이 받음) */
:where(.ui__header__logo, .navigation-panel__logo, .column-header__logo)::before{
  content: "";
  position: absolute;
  inset: 0;                       /* 컨테이너 전체를 덮고 */
  margin: auto;
  width: 200px;                   /* 원하는 크기 */
  height: 200px;                  /* 원하는 크기 */
  background-image: var(--logo-now) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;

  z-index: 0 !important;
  pointer-events: none !important; /* 커스텀 로고는 클릭 통과 */
}

/* 원본 로고(img/svg)는 "투명하지만 클릭 가능한 상태"로 위에 올림 */
:where(
  .ui__header__logo img, .navigation-panel__logo img, .column-header__logo img,
  .ui__header__logo svg, .navigation-panel__logo svg, .column-header__logo svg
){
  position: relative !important;
  z-index: 1 !important;

  opacity: 0.001 !important;      /* 완전 0이면 일부 브라우저/테마에서 클릭이 씹히는 경우가 있어 0.001 추천 */
  pointer-events: auto !important; /* ★핵심: 원본이 클릭을 받게 */
}

/* =========================================================
   8) 설정/관리 화면(admin/settings) 추가 커버
========================================================= */

/* 8-1) 설정 화면 래퍼들: 배경은 투명 (이미지 보이게) */
:where(
  .admin-wrapper,
  .admin-wrapper .content,
  .admin-wrapper .content__wrapper,
  .admin-wrapper .main,
  .page, .page__container
){
  background: transparent !important;
}

/* 8-2) 설정 화면: 메인 본문 박스는 "완전 불투명" 패널로 */
:where(
  .admin-wrapper .content,
  .admin-wrapper .main,
  .admin-wrapper .content__wrapper,
  .admin-wrapper .content__wrapper > div,
  .admin-wrapper .content__wrapper section,
  .admin-wrapper .content__wrapper form,
  .admin-wrapper .content__wrapper .card,
  .admin-wrapper .content__wrapper .panel
){
  background: var(--panel-now) !important;
}

/* 8-3) 설정 화면: 사이드바는 "반투명 막" */
:where(
  .admin-wrapper .sidebar,
  .admin-wrapper .sidebar *
){
  background: var(--side-overlay-now) !important;
  backdrop-filter: blur(2px);
}

/* 8-4) 설정 화면: 글자색 강제 (메인과 동일) */
:where(
  .admin-wrapper,
  .admin-wrapper *
){
  color: var(--text-now) !important;
}

/* 8-5) 설정 화면 로고도 교체(후보들) */
:where(
  .admin-wrapper .brand,
  .admin-wrapper .logo,
  .admin-wrapper header .logo,
  .admin-wrapper header .brand
){
  position: relative !important;
  min-height: 40px !important;
}
:where(
  .admin-wrapper .brand,
  .admin-wrapper .logo,
  .admin-wrapper header .logo,
  .admin-wrapper header .brand
)::before{
  content: "";
  display: inline-block;
  width: 160px;
  height: 40px;
  background-image: var(--logo-now) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
  vertical-align: middle;
}
:where(
  .admin-wrapper .brand img,
  .admin-wrapper .logo img,
  .admin-wrapper .brand svg,
  .admin-wrapper .logo svg
){
  display: none !important;
}