/* =========================================
   마스토돈 트위터 스타일 (밝은 테마) 커스텀 CSS
   ========================================= */

/* 1. 전체 색상 변수 덮어쓰기 (트위터 라이트 테마 컬러) */
:root {
  --ui-base-color: #ffffff;
  --ui-base-lighter-color: #f7f9f9;
  --primary-text-color: #0f1419;
  --secondary-text-color: #536471;
  --highlight-text-color: #1d9bf0;
  --action-button-color: #536471;
  --ui-highlight-color: #1d9bf0;
}

/* 2. 전체 폰트 및 기본 배경 적용 */
body {
  background-color: var(--ui-base-color) !important;
  color: var(--primary-text-color) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 3. 컬럼 및 테두리 (트위터의 얇은 회색 선) */
.column, .drawer {
  background: var(--ui-base-color) !important;
  border-right: 1px solid #eff3f4 !important;
}

/* 상단 헤더 (스크롤 시 약간 투명하게 블러 처리되는 트위터 스타일) */
.column-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #eff3f4 !important;
  color: var(--primary-text-color) !important;
}

/* 4. 개별 게시글 (툿) 스타일 */
.status {
  border-bottom: 1px solid #eff3f4 !important;
  background: var(--ui-base-color) !important;
  transition: background 0.2s ease !important;
}

.status:hover {
  background: var(--ui-base-lighter-color) !important;
}

.status__display-name strong {
  color: var(--primary-text-color) !important;
}

/* 5. 버튼 스타일 (트위터의 둥근 알약 모양 버튼) */
.button, 
.compose-form .compose-form__buttons-wrapper .button {
  border-radius: 9999px !important;
  background-color: #1d9bf0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.button:hover {
  background-color: #1a8cd8 !important;
}

/* 6. 검색창 스타일 (둥글고 연한 회색 배경) */
.search__input {
  border-radius: 9999px !important;
  background-color: #eff3f4 !important;
  color: var(--primary-text-color) !important;
  border: 1px solid transparent !important;
  padding: 10px 15px !important;
}

.search__input:focus {
  background-color: #ffffff !important;
  border: 1px solid #1d9bf0 !important;
}

/* 7. 입력창 (글쓰기 영역) */
.compose-form .autosuggest-textarea__textarea {
  background: var(--ui-base-color) !important;
  color: var(--primary-text-color) !important;
}

/* =========================================
   8. 좌우 레이아웃 반전 (왼쪽 메뉴, 오른쪽 글쓰기)
   ========================================= */

/* --- 기본 웹 인터페이스 (단일 컬럼 모드) --- */
.columns-area__panels {
  display: flex !important;
}

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

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

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

/* --- 고급 웹 인터페이스 (다중 컬럼 모드) --- */
.columns-area {
  display: flex !important;
}

.column[aria-label="시작하기"], 
.column[aria-label="Getting started"] {
  order: -2 !important;
}

.column[aria-label="홈"], 
.column[aria-label="Home"] {
  order: -1 !important;
}

.drawer {
  order: 1 !important;
}

/* =========================================
   9. 좋아요(별) 아이콘을 하트로 변경
   ========================================= */

/* 기본 상태 (빈 하트) */
.fa-star::before,
.icon-star::before {
  content: "\f08a" !important; 
}

/* 좋아요를 눌렀을 때 (꽉 찬 하트 + 트위터 핑크 컬러) */
.icon-button.active .fa-star::before,
.icon-button.active .icon-star::before {
  content: "\f004" !important; 
  color: #f91880 !important; 
}

/* 좋아요 버튼 호버 시 핑크색 은은한 효과 */
.icon-button:hover .fa-star::before,
.icon-button:hover .icon-star::before {
  color: #f91880 !important;
  opacity: 0.8 !important;
}

/* =========================================
   10. 커스텀 로고/배너 이미지 적용 (CSP 우회 / 내부 링크 방식)
   ========================================= */

/* 1. 기존 마스토돈 로고(SVG)는 레이아웃에 영향을 주지 않게 투명하게 처리 */
.column-link--logo svg {
  opacity: 0 !important; 
}

/* 2. 링크 영역에 직접 올린 마스토돈 내부 이미지 주소를 배경으로 깔기 */
.column-link--logo {
  display: block !important; 
  width: 273px !important;  
  height: 76px !important; 
  
  /* [중요] 여기에 방금 마스토돈에서 '이미지 주소 복사'한 길고 복잡한 링크를 넣어주세요! */
  background-image: url('https://cdn.masto.host/uiolife/media_attachments/files/116/770/371/047/412/189/original/1dd1c4e0616878f8.png') !important;
  
  background-size: contain !important; 
  background-repeat: no-repeat !important;
  background-position: left center !important; 
}