/* ==========================================================================
   공통 - 초대화면 로고 교체
   ========================================================================== */

.logo.logo--wordmark {
    display: none !important;
}

.hero-widget__logo a,
a:has(.logo--wordmark) {
    display: block !important;
    background-image: url('/custom/logo_dark.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 250px !important;
    height: 80px !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   공통 - 메인 로고 교체
   ========================================================================== */

.navigation-panel__logo .column-link--logo img {
    display: none !important;
}

.navigation-panel__logo .column-link--logo {
    display: block !important;
    width: 260px !important;
    height: 120px !important;
    background-image: url('/custom/logo_dark.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    padding: 0 !important;
}

/* ==========================================================================
   공통 - 왼쪽 메뉴 및 오른쪽 큰 틀 투명화
   ========================================================================== */

.navigation-panel,
body .compose-form {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   공통 - 홈 바 상단 여백 투명화
   ========================================================================== */

.tabs-bar__wrapper {
    padding-top: 8px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* ==========================================================================
   공통 - 게시 버튼 색상
   ========================================================================== */

.compose-form__submit button,
.compose-form__submit .button {
    background-color: #A6493F !important;
    border-color: #A6493F !important;
    color: #F0F0F0 !important;
}

/* ==========================================================================
   공통 - 포인트 색상 (#A6493F)
   ========================================================================== */

/* 탭 아래 선 (모두/멘션/DM) */
.notification__filter-bar button.active::before,
.notification__filter-bar a.active::before,
.account__section-headline button.active::before,
.account__section-headline a.active::before {
    background: #A6493F !important;
}

/* 알림 왼쪽 세로줄 */
.notification.unread::before,
.status__wrapper.unread::before {
    -webkit-border-start: 4px solid #A6493F !important;
    border-inline-start: 4px solid #A6493F !important;
}

/* DM 박스 왼쪽 세로줄 */
.conversation.unread::before {
    -webkit-border-start: 4px solid #A6493F !important;
    border-inline-start: 4px solid #A6493F !important;
}

/* 날짜 앞 동그라미 */
.conversation__unread {
    background-color: #A6493F !important;
}

/* ==========================================================================
   다크 테마 (theme-default)
   ========================================================================== */

/* 배경화면 */
body.theme-default {
    background-image: url('/custom/wallpaper-dark.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* 가운데 타임라인 반투명 배경 */
body.theme-default .columns-area__panels__main {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* 타임라인 폰트 색상 */
body.theme-default .column .status__content p,
body.theme-default .column .status__display-name strong,
body.theme-default .column .display-name__html,
body.theme-default .column .status__action-bar button,
body.theme-default .column a.status__display-name {
    color: #B3B3B3 !important;
}

/* 텍스트박스 영역 */
body.theme-default .compose-form__highlightable {
    --input-background-color: #242D30 !important;
    background: #242D30 !important;
    background-color: #242D30 !important;
    gap: 0 !important;
}

body.theme-default .compose-form__scrollable,
body.theme-default .autosuggest-textarea,
body.theme-default .autosuggest-textarea__textarea {
    background-color: #242D30 !important;
    color: #B8B8B8 !important;
}

body.theme-default .autosuggest-textarea__textarea::placeholder {
    color: #B8B8B8 !important;
}

body.theme-default .compose-form__footer {
    background-color: #242D30 !important;
}

body.theme-default .compose-form__footer button,
body.theme-default .compose-form__footer .icon,
body.theme-default .compose-form__footer svg {
    color: #B8B8B8 !important;
    fill: #B8B8B8 !important;
    stroke: #B8B8B8 !important;
}

/* 홈 바 & 검색 바 */
body.theme-default .tabs-bar,
body.theme-default .column-header__wrapper,
body.theme-default .column-header {
    background-color: #11171A !important;
    background: #11171A !important;
}

body.theme-default .search__input {
    background-color: #11171A !important;
    color: #B8B8B8 !important;
}

body.theme-default .search,
body.theme-default .search__popout {
    background-color: #11171A !important;
}

/* 왼쪽 메뉴 색상 */
body.theme-default .column-link,
body.theme-default .column-link .column-link__icon,
body.theme-default .column-link span {
    color: #F0F0F0 !important;
}

body.theme-default .column-link.active,
body.theme-default .column-link.active .column-link__icon,
body.theme-default .column-link.active span {
    color: #FF5454 !important;
}

/* ==========================================================================
   라이트 테마 (theme-mastodon-light)
   ========================================================================== */

/* 배경화면 */
body.theme-mastodon-light {
    background-image: url('/custom/wallpaper-light.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* 가운데 타임라인 반투명 배경 */
body.theme-mastodon-light .columns-area__panels__main {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* 텍스트박스 영역 */
body.theme-mastodon-light .compose-form__highlightable {
    --input-background-color: #F0F0F0 !important;
    background: #F0F0F0 !important;
    background-color: #F0F0F0 !important;
    gap: 0 !important;
}

body.theme-mastodon-light .compose-form__scrollable,
body.theme-mastodon-light .autosuggest-textarea,
body.theme-mastodon-light .autosuggest-textarea__textarea {
    background-color: #F0F0F0 !important;
    color: #212121 !important;
}

body.theme-mastodon-light .autosuggest-textarea__textarea::placeholder {
    color: #212121 !important;
}

body.theme-mastodon-light .compose-form__footer {
    background-color: #F0F0F0 !important;
}

body.theme-mastodon-light .compose-form__footer button,
body.theme-mastodon-light .compose-form__footer .icon,
body.theme-mastodon-light .compose-form__footer svg {
    color: #212121 !important;
    fill: #212121 !important;
    stroke: #212121 !important;
}

body.theme-mastodon-light .compose-form__submit button,
body.theme-mastodon-light .compose-form__submit .button {
    color: #F0F0F0 !important;
}

/* 홈 바 & 검색 바 */
body.theme-mastodon-light .tabs-bar,
body.theme-mastodon-light .column-header__wrapper,
body.theme-mastodon-light .column-header {
    background-color: #F0F0F0 !important;
    background: #F0F0F0 !important;
}

body.theme-mastodon-light .search__input {
    background-color: #F0F0F0 !important;
    color: #212121 !important;
}

body.theme-mastodon-light .search,
body.theme-mastodon-light .search__popout {
    background-color: #F0F0F0 !important;
}

/* 왼쪽 메뉴 색상 */
body.theme-mastodon-light .column-link,
body.theme-mastodon-light .column-link .column-link__icon,
body.theme-mastodon-light .column-link span {
    color: #212121 !important;
}

body.theme-mastodon-light .column-link.active,
body.theme-mastodon-light .column-link.active .column-link__icon,
body.theme-mastodon-light .column-link.active span {
    color: #A6493F !important;
}

/* 라이트 테마 - 프로필 상단 영역 반투명 */
body.theme-mastodon-light .account__header__bar {
    background: rgba(255, 255, 255, 0.5) !important;
}


/* 라이트 테마 - 프로필 헤더 바 배경 투명 */
body.theme-mastodon-light .account__header__bar {
    background: transparent !important;
}

/* 라이트 테마 - 프로필 전체 감싸는 영역 배경 투명 */
body.theme-mastodon-light .account__header__wrapper,
body.theme-mastodon-light .account__header {
    background: transparent !important;
}