body.app-body {
  background: url('https://perfata.cc/system/media_attachments/files/116/740/679/352/713/251/original/43e30c4d158c030e.jpg') center center / cover fixed !important;
}
/* 1. 스크롤을 끝까지 내렸을 때 나오는 맨 밑바닥 안내 문구 영역의 투명화 해제 */
.timeline-hint, 
.status__wrapper + .timeline-hint,
.load-more {
    background-color: rgba(255, 255, 255, 0.8) !important; /* 가운데 칼럼과 같은 색상 */
    margin-top: 0 !important;
}

.loading-indicator__container,
.scrollable .loading-indicator {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.columns-area,
.columns-area--mobile {
    background-color: rgba(255, 255, 255, 0.8) !important; /* 가운데 칼럼들과 같은 흰색 반투명 */
    min-height: 100vh !important; /* 스크롤을 내려도 절대 찢어지지 않게 최소 높이 고정 */
}



/* 1. 드롭다운 선택된 아이템(하늘색 영역) 색상 바꾸기 */
.privacy-dropdown__option.active {
    background-color: #ff6b6b !important; /* 👈 여기에 원하는 색상 코드를 넣으세요 */
    color: #ffffff !important; /* 글자 색상 (하얀색 유지) */
}

/* 2. 드롭다운 아이템에 마우스를 올렸을 때(Hover) 색상도 세트로 맞추기 */
.privacy-dropdown__option:hover,
.privacy-dropdown__option:focus {
    background-color: #ff8787 !important; /* 👈 위 색상보다 아주 살짝 밝은 톤 추천 */
}

/* 3. '게시' 버튼 하늘색 바꾸기 */
.button.button--compact {
    background-color: #ff6b6b !important; /* 👈 드롭다운과 같은 색상 코드를 넣으세요 */
    border-color: #ff6b6b !important;
}

/* 4. '게시' 버튼 마우스 올렸을 때 색상 */
.button.button--compact:hover,
.button.button--compact:focus {
    background-color: #ff8787 !important;
    border-color: #ff8787 !important;
}


/* 1. 프라이버시 드롭다운 버튼 (자물쇠 모양) 활성화 상태 강제 진압 */
.compose-form__modifiers .dropdown-button.active,
.compose-form__buttons-container .dropdown-button.active,
button.dropdown-button.active {
    background-color: #ff8787 !important;
    border-color: #ff8787 !important;
}

/* 드롭다운 버튼 내부의 SVG 자물쇠 아이콘 색상 (보통 fill이나 color로 작동) */
.compose-form__modifiers .dropdown-button.active svg,
button.dropdown-button.active svg,
button.dropdown-button.active svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}


/* 2. '열람 주의(CW)' 아이콘 버튼 강제 진압 */
/* 마스토돈 기본 테마에서 inverted 버튼은 글자/아이콘 색상이 바뀌는 방식입니다 */
.compose-form__buttons-container .icon-button.inverted,
.compose-form__modifiers .icon-button.inverted,
button.icon-button.inverted {
    color: #ff8787 !important;
    background-color: transparent !important; /* 배경은 투명하게 */
}

/* 열람 주의 버튼에 마우스 올렸을 때 */
button.icon-button.inverted:hover,
button.icon-button.inverted:focus {
    color: #ff6b6b !important;
}

/* 1. 평상시 버튼 배경은 투명하게 비우고 테두리나 배경 생기는 것 방지 */
.compose-form__modifiers .dropdown-button,
.compose-form__buttons-container .dropdown-button,
button.dropdown-button {
    background-color: transparent !important; /* 배경 투명화 */
    border: none !important;                  /* 테두리 제거 */
}

/* 2. 대신 안에 있는 지구본/자물쇠 아이콘 선 색상을 분홍색으로 저격 */
button.dropdown-button svg,
button.dropdown-button svg path {
    fill: #ff8787 !important; /* 👈 평소 아이콘 색상 */
    color: #ff8787 !important;
}

/* 3. 마우스를 올렸을 때(Hover)나 클릭해서 열렸을 때(Active)만 배경이 사각형으로 채워지게 하기 */
button.dropdown-button:hover,
button.dropdown-button.active {
    background-color: #ff8787 !important; /* 열리거나 올렸을 때는 배경 채우기 */
}

/* 4. 열리거나 마우스 올렸을 때는 아이콘 색상을 다시 하얗게 반전 */
button.dropdown-button:hover svg,
button.dropdown-button:hover svg path,
button.dropdown-button.active svg,
button.dropdown-button.active svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}