/* 배경 이미지 */
body {
  background-image: url("/custom/background.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* 메인 타임라인 영역에 아주 옅은 흰색 막 */
.layout-single-column .column {
  background: rgba(255, 255, 255, 0.15);
}

:root {
  --commu-blue: #7fc8f0;
  --commu-blue-dark: #55afe2;
  --commu-blue-light: #dff3ff;

  --commu-pink: #f5a9bc;
  --commu-pink-light: #ffe4ec;
}

/* ========================================
   明日も、ここで。 CUSTOM THEME
   ======================================== */

/* 1. 게시글 배경 — 완전한 흰색 */
.status,
.status__wrapper,
.notification-ungrouped {
  background: #ffffff !important;
}

/* 게시글 사이 구분선 */
.status {
  border-bottom: 1px solid #dcecf7 !important;
}


/* ========================================
   2. THEME COLORS
   메인 하늘색 + 포인트 분홍색
   ======================================== */

:root {
  --commu-blue: #7fc8f0;
  --commu-blue-dark: #55afe2;
  --commu-blue-light: #dff3ff;

  --commu-pink: #f5a9bc;
  --commu-pink-light: #ffe4ec;
}


/* ========================================
   3. 링크
   ======================================== */

a {
  color: var(--commu-blue-dark);
}

.status__content a,
.status__content a:visited {
  color: var(--commu-blue-dark) !important;
}

a:hover {
  color: var(--commu-pink) !important;
}


/* ========================================
   4. 기본 파란 버튼
   ======================================== */

.button,
.button.logo-button {
  background-color: var(--commu-blue-dark) !important;
  border-color: var(--commu-blue-dark) !important;
}

.button:hover,
.button.logo-button:hover {
  background-color: var(--commu-blue) !important;
}


/* ========================================
   5. 텍스트 선택 영역
   ======================================== */

::selection {
  background: var(--commu-pink-light);
  color: #34495e;
}


/* ========================================
   6. 입력창 포커스
   ======================================== */

input:focus,
textarea:focus {
  border-color: var(--commu-blue) !important;
  outline-color: var(--commu-blue) !important;
}


/* ========================================
   7. 게시글 액션 아이콘
   답글 / 부스트 / 즐겨찾기 등
   ======================================== */

.icon-button:hover,
.icon-button:focus {
  color: var(--commu-blue-dark) !important;
}


/* 즐겨찾기 활성화 → 분홍 */
.icon-button.star-icon.active,
.icon-button.active {
  color: var(--commu-pink) !important;
}


/* ========================================
   8. 스크롤바
   ======================================== */

* {
  scrollbar-color: var(--commu-blue) #f5f9fc;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f9fc;
}

::-webkit-scrollbar-thumb {
  background: var(--commu-blue);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--commu-pink);
}

/* ========================================
   홈 / 퍼블릭 타임라인 전체 흰색 배경
   ======================================== */

/* 메인 타임라인 칼럼 */
.layout-single-column .column,
.column > .scrollable,
.column > .scrollable.fullscreen {
  background: #ffffff !important;
}

/* 타임라인 내부 */
.item-list,
.status__wrapper,
.status,
.notification-ungrouped {
  background: #ffffff !important;
}

/* 홈/퍼블릭 상단 탭 */
.column-header,
.column-header__wrapper,
.column-header__button,
.column-header__collapsible {
  background-color: #ffffff !important;
}

/* 빈 타임라인 화면 */
.empty-column-indicator {
  background: #ffffff !important;
}

/* 타임라인 로딩 영역 */
.regeneration-indicator {
  background: #ffffff !important;
}

/* 게시글 구분선 */
.status,
.notification-ungrouped {
  border-bottom-color: #e7eef3 !important;
}