/* =========================================
   1. 전체 배경 및 투명화 설정
   ========================================= */
body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; background-size: cover !important;
    background-attachment: fixed !important; background-position: center !important;
    opacity: 1 !important;
}

/* 다크 모드/라이트 모드 배경 이미지 */
body.theme-default::before, body.theme-dark::before {
    background-image: url('https://u4ria.site/system/media_attachments/files/116/373/724/756/484/114/original/0931242c55f96e32.jpeg') !important;
}
body.theme-mastodon-light::before {
    background-image: url('https://u4ria.site/system/media_attachments/files/116/371/855/320/784/876/original/62acea20100e470f.jpeg') !important;
}

/* 기본 배경 투명화 */
body, .ui, .wrapper, .columns-area, .column, .drawer, .scrollable {
    background: transparent !important;
    background-color: transparent !important;
}

/* =========================================
   유포리아: 파란색 -> 녹색 전체 강제 덮어쓰기
   ========================================= */

/* 1. 마스토돈 시스템 전체 테마 변수(마스터 스위치) 강제 변경 */
:root, body, .theme-mastodon-light {
    --ui-highlight-color: #5A845E !important;
    --color-brand-blue: #5A845E !important;
    --color-brand-blue-light: #5A845E !important;
    --color-brand-blue-dark: #5A845E !important;
}

/* 2. 글쓰기 창: 공개 범위, 언어 선택 (버튼 및 테두리) */
.compose-form .text-icon-button,
.compose-form .privacy-dropdown__value,
.compose-form .language-dropdown__value {
    color: #5A845E !important;
    border-color: #5A845E !important;
}

/* 3. 글쓰기 창: 하단 아이콘 모음 (사진, 통계, 이모지 등) */
.compose-form .icon-button,
.compose-form__action-bar .icon-button {
    color: #5A845E !important;
}

/* 4. 아이콘 내부 그래픽(SVG, Path) 색상까지 100% 강제 칠하기 */
.compose-form .icon-button svg,
.compose-form .text-icon-button svg,
.compose-form .icon-button path,
.compose-form .text-icon-button path,
.compose-form .privacy-dropdown__value *,
.compose-form .language-dropdown__value * {
    fill: #5A845E !important;
    color: #5A845E !important;
}

/* 5. 혹시 모를 글쓰기 창 내부의 모든 파란색 텍스트 방어 */
.compose-form span {
    color: inherit;
}

/* =========================================
   최종병기: 위치 불문 파란색 상단 버튼 무조건 타격
   ========================================= */
.privacy-dropdown__value,
.privacy-dropdown__value.active,
.language-dropdown__value,
.language-dropdown__value.active,
.privacy-dropdown button,
.language-dropdown button {
    color: #5A845E !important;
    border-color: #5A845E !important;
    background-color: transparent !important;
}

.privacy-dropdown__value *,
.privacy-dropdown__value.active *,
.language-dropdown__value *,
.language-dropdown__value.active *,
.privacy-dropdown button *,
.language-dropdown button * {
    color: #5A845E !important;
    fill: #5A845E !important;
}

/* =========================================
   글쓰기란 상단 공개범위/언어 pill 버튼 배경색 강제 변경
   ========================================= */
.compose-form .button:not(.icon-button),
.compose-form .button.button--block:not(.icon-button),
.compose-form .button.button-secondary:not(.icon-button),
.compose-form [class*="dropdown"] button:not(.icon-button),
.compose-form [class*="dropdown"] .button:not(.icon-button),
.compose-form__topbar button:not(.icon-button),
.compose-form__topbar .button:not(.icon-button),
.compose-form__header button:not(.icon-button),
.compose-form__header .button:not(.icon-button) {
    background-color: #5A845E !important;
    border-color: #5A845E !important;
    color: #ffffff !important;
}

.compose-form button[class*="active"]:not(.icon-button),
.compose-form button[class*="selected"]:not(.icon-button),
.compose-form .dropdown-button:not(.icon-button),
.compose-form .dropdown-button.active:not(.icon-button) {
    background-color: #5A845E !important;
    border-color: #5A845E !important;
    color: #ffffff !important;
}

.compose-form .button:not(.icon-button) svg,
.compose-form .button:not(.icon-button) path,
.compose-form__topbar button:not(.icon-button) svg,
.compose-form__topbar button:not(.icon-button) path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* =========================================
   글쓰기란 하단 아이콘 버튼 배경색 원복 (투명하게)
   ========================================= */
.compose-form .icon-button,
.compose-form__action-bar .icon-button,
.compose-form .icon-button:hover,
.compose-form .icon-button:focus,
.compose-form .icon-button:active,
.compose-form .icon-button.active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #5A845E !important;
}

/* =========================================
   개인멘션 피드 배경색 녹색 계열로 변경
   ========================================= */
.status__wrapper--filtered,
.status-direct,
.status__wrapper.status__wrapper--direct,
div[data-component="Status"].direct,
.notification--direct,
.status--in-thread {
    background-color: rgba(90, 132, 94, 0.15) !important;
}

.status__prepend,
.notification__message {
    background-color: rgba(90, 132, 94, 0.1) !important;
}

/* =========================================
   피드 내 파란색 버튼/링크 녹색으로 변경
   ========================================= */
.button.button-secondary,
.account__header__tabs__buttons .button,
.skeleton-avatar ~ .button,
a.button,
.back-link a,
.column-back-button {
    color: #5A845E !important;
    border: none !important;
}

.account__header__extra__links a,
.status__content a,
.link-footer a {
    color: #5A845E !important;
}

.account__moved-note__message,
.account__badge,
.roles__role {
    background-color: rgba(90, 132, 94, 0.2) !important;
    color: #5A845E !important;
    border-color: #5A845E !important;
}

.account__section-headline a.active,
.account__section-headline button.active {
    border-bottom-color: #5A845E !important;
    color: #5A845E !important;
}

/* =========================================
   왼쪽 메뉴란 배경 반투명 처리
   ========================================= */
.navigation-panel,
.navigation-panel__menu,
nav.navigation-panel {
    background-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: none !important;
}

/* =========================================
   다크모드 전용
   ========================================= */
.theme-default {
    --ui-highlight-color: #E7E7E7 !important;
    --color-brand-blue: #E7E7E7 !important;
    --color-brand-blue-light: #E7E7E7 !important;
    --color-brand-blue-dark: #E7E7E7 !important;
}

.theme-default .navigation-panel,
.theme-default .navigation-panel__menu,
.theme-default nav.navigation-panel {
    background-color: rgba(7, 7, 10, 0.75) !important;
    backdrop-filter: none !important;
}

.theme-default .column-link--transparent.active,
.theme-default .column-link--transparent:hover,
.theme-default .column-link .column-link__icon,
.theme-default .navigation-bar__profile-account,
.theme-default .nav-link.active,
.theme-default a.column-link {
    color: #E7E7E7 !important;
}
.theme-default .column-link svg,
.theme-default .column-link path {
    fill: #E7E7E7 !important;
}

.theme-default .status__action-bar .icon-button.active,
.theme-default .status__action-bar a,
.theme-default .status__relative-time,
.theme-default .status__display-name strong,
.theme-default .detailed-status__action-bar .icon-button.active {
    color: #E7E7E7 !important;
}
.theme-default .status__action-bar .icon-button.active svg,
.theme-default .status__action-bar .icon-button.active path {
    fill: #E7E7E7 !important;
}

.theme-default .compose-form .button:not(.icon-button),
.theme-default .compose-form [class*="dropdown"] button:not(.icon-button),
.theme-default .compose-form__topbar button:not(.icon-button),
.theme-default .compose-form__header button:not(.icon-button),
.theme-default .compose-form .dropdown-button:not(.icon-button) {
    background-color: #E7E7E7 !important;
    border-color: #E7E7E7 !important;
    color: #000000 !important;
}
.theme-default .compose-form .button:not(.icon-button) svg,
.theme-default .compose-form .button:not(.icon-button) path,
.theme-default .compose-form__topbar button:not(.icon-button) svg,
.theme-default .compose-form__topbar button:not(.icon-button) path {
    fill: #000000 !important;
    color: #000000 !important;
}

.theme-default .compose-form .icon-button {
    color: #E7E7E7 !important;
}
.theme-default .compose-form .icon-button svg,
.theme-default .compose-form .icon-button path {
    fill: #E7E7E7 !important;
}

.theme-default .button.button-secondary,
.theme-default .account__header__tabs__buttons .button,
.theme-default a.button,
.theme-default .back-link a,
.theme-default .column-back-button {
    color: #E7E7E7 !important;
    border: none !important;
}

.theme-default .account__header__extra__links a,
.theme-default .status__content a,
.theme-default .link-footer a {
    color: #E7E7E7 !important;
}

.theme-default .account__badge,
.theme-default .roles__role {
    background-color: rgba(7, 7, 10, 0.5) !important;
    color: #E7E7E7 !important;
    border-color: #E7E7E7 !important;
}

.theme-default .account__section-headline a.active,
.theme-default .account__section-headline button.active {
    border-bottom-color: #E7E7E7 !important;
    color: #E7E7E7 !important;
}

/* 왼쪽 메뉴 - 기본 검정, 호버시 녹색 (라이트모드) */
a.column-link {
    color: #000000 !important;
}
a.column-link svg,
a.column-link path {
    fill: #000000 !important;
}
a.column-link:hover,
a.column-link.active {
    color: #5A845E !important;
}
a.column-link:hover svg,
a.column-link:hover path,
a.column-link.active svg,
a.column-link.active path {
    fill: #5A845E !important;
}

/* 왼쪽 메뉴 - 기본 흰색, 호버시 녹색 (다크모드) */
.theme-default a.column-link {
    color: #ffffff !important;
}
.theme-default a.column-link svg,
.theme-default a.column-link path {
    fill: #ffffff !important;
}
.theme-default a.column-link:hover,
.theme-default a.column-link.active {
    color: #E7E7E7 !important;
}
.theme-default a.column-link:hover svg,
.theme-default a.column-link:hover path,
.theme-default a.column-link.active svg,
.theme-default a.column-link.active path {
    fill: #E7E7E7 !important;
}

/* 좌상단 마스토돈 로고 교체 */
.navigation-panel__logo img,
.column-header__logo,
a.column-link img[src*="logo"] {
    content: url('https://u4ria.site/system/media_attachments/files/116/372/427/507/025/295/original/b926a5345124d1c4.png') !important;
    width: auto !important;
    height: 40px !important;
}


/* =========================================
   다크모드 메뉴 및 피드 (#1F2227 톤 맞춤)
   ========================================= */

/* 1. 왼쪽 메뉴란: #1F2227 적용 */
.theme-default .navigation-panel,
.theme-default .navigation-panel__menu,
.theme-default nav.navigation-panel {
    background-color: rgba(31, 34, 39, 0.7) !important; /* #1F2227의 RGBA 값 */
    backdrop-filter: blur(15px) !important;
}

/* 2. 중앙 피드란 전체: #1F2227 적용 */
.theme-default .column, 
.theme-default .scrollable,
.theme-default .status,
.theme-default .detailed-status,
.theme-default .column-header,
.theme-default .detailed-status__action-bar,
.theme-default .status__wrapper,
.theme-default .notification {
    background-color: rgba(31, 34, 39, 0.7) !important; 
    background: rgba(31, 34, 39, 0.7) !important;
}

/* 3. 상단 헤더: 조금 더 선명하게 톤 고정 */
.theme-default .column-header {
    background-color: rgba(31, 34, 39, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. 게시글 간 구분선이 너무 튀지 않게 조정 */
.theme-default .status__wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}



/* =========================================
   글쓰기란 배경색 변경 (다크모드 전용)
   ========================================= */
.theme-default .columns-area__panels__pane--compositional,
.theme-default .columns-area__panels__pane__inner,
.theme-default .compose-panel {
    background: transparent !important;
    background-color: transparent !important;
}

.theme-default .compose-form {
    background-color: #1D2025 !important;
    background: #1D2025 !important;
    flex: 0 0 auto !important;
}

.theme-default .compose-form__top-bar,
.theme-default .navigation-bar,
.theme-default .navigation-bar__profile {
    background: transparent !important;
    background-color: transparent !important;
}

.theme-default .navigation-bar,
.theme-default a.account__display-name,
.theme-default .navigation-bar__profile-account {
    background: transparent !important;
    background-color: transparent !important;
}



/* =========================================
   라이트 모드: 피드 및 메뉴 배경 (부드러운 미색)
   ========================================= */

/* 1. 왼쪽 메뉴 및 중앙 피드 배경색 수정 */
body.theme-mastodon-light .navigation-panel,
body.theme-mastodon-light .navigation-panel__menu,
body.theme-mastodon-light nav.navigation-panel,
body.theme-mastodon-light .column,
body.theme-mastodon-light .scrollable,
body.theme-mastodon-light .status,
body.theme-mastodon-light .detailed-status,
body.theme-mastodon-light .column-header,
body.theme-mastodon-light .detailed-status__action-bar,
body.theme-mastodon-light .status__wrapper,
body.theme-mastodon-light .notification {
    /* 살짝 탁한 미색(#F5F5F5)에 반투명 적용 */
    background-color: rgba(245, 245, 245, 0.85) !important;
    background: rgba(245, 245, 245, 0.85) !important;
}

/* 2. 라이트 모드 상단 헤더 경계선 처리 */
body.theme-mastodon-light .column-header {
    background-color: rgba(240, 240, 240, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}


/* =========================================
   유포리아 로고 강제 교체 (무적 모드)
   ========================================= */

/* 1. 왼쪽 상단 메인 로고 교체 */
.navigation-panel__logo img, 
.column-header__logo img,
.sidebar-wrapper__logo img,
.navigation-panel__logo a svg {
    display: none !important; /* 기존 SVG나 이미지를 숨김 */
}

.navigation-panel__logo a,
.column-header__logo,
.sidebar-wrapper__logo {
    display: block !important;
    background-image: url('https://u4ria.site/system/media_attachments/files/116/372/427/507/025/295/original/b926a5345124d1c4.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-width: 140px !important; /* 로고 너비에 맞춰 조절하세요 */
    min-height: 40px !important;  /* 로고 높이에 맞춰 조절하세요 */
    text-indent: -9999px; /* 기존 텍스트 숨김 */
}

/* 2. 관리자/설정 페이지 상단 로고까지 타격 */
.admin-wrapper .sidebar-wrapper__logo img {
    opacity: 0 !important;
}

.admin-wrapper .sidebar-wrapper__logo a {
    background-image: url('https://u4ria.site/system/media_attachments/files/116/372/427/507/025/295/original/b926a5345124d1c4.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 3. 모바일/반응형 로고 방어 */
.column-header__logo svg {
    display: none !important;
}