/* 0) 배경 이미지 경로(원하는 파일로 교체) */
:root{
  --light-accent: #b0b0b0;
  --default-avatar: url("/branding/basic.png?v=1");
  /* 라이트/다크 각각 이미지 */
  --bg-light: url("https://i.imgur.com/d9NMv8v.png");
  --bg-dark:  url("https://i.imgur.com/BptOq1d.jpeg"); 
}

/* 1) 기본(라이트) */
body{
  background: var(--bg-light) no-repeat center center fixed !important;
  background-size: cover !important;
}

/* 2) OS 설정 기반: 다크 모드 */
@media (prefers-color-scheme: dark){
  body{
    background: var(--bg-dark) no-repeat center center fixed !important;
    background-size: cover !important;
  }
}

/* 3) (예비) Mastodon/테마가 자체 다크 클래스를 쓰는 경우도 강제 반영 */
/* 아래 중 실제로 적용되는 것만 쓰여도 OK — 다 넣어도 무방 */
html[data-theme="dark"] body,
body[data-theme="dark"],
body.theme-dark,
:root.theme-dark body,
body[class*="dark"]{
  background-image: var(--bg-dark) !important;
}
html[data-theme="light"] body,
body[data-theme="light"],
body.theme-light,
:root.theme-light body,
body[class*="light"]{
  background-image: var(--bg-light) !important;
}

/* === 1) 기존 로고 완전히 숨김 (visibility가 stacking에서 더 안전) === */
.sidebar__header .brand__logo img,
.sidebar__header .brand__logo svg,
.drawer__header .brand__logo img,
.drawer__header .brand__logo svg,
.brand__logo img, .brand__logo svg,
a.column-link--logo img, a.column-link--logo svg {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === 2) 컨테이너에 공간/좌표계 확보 + 잘리지 않게 === */
.sidebar__header .brand__logo,
.drawer__header .brand__logo,
.brand__logo,
a.column-link--logo {
  position: relative !important;
  width:  180px !important;   /* 필요 시 140~220px 조절 */
  height: 56px  !important;   /* 필요 시 48~80px 조절 */
  min-height: 56px !important;
  overflow: visible !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* === 3) 새 로고 오버레이 (항상 위에 오도록 z-index) === */
.sidebar__header .brand__logo::before,
.drawer__header .brand__logo::before,
.brand__logo::before,
a.column-link--logo::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: block;
  background-image: var(--logo-url-light);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  .sidebar__header .brand__logo::before,
  .drawer__header .brand__logo::before,
  .brand__logo::before,
  a.column-link--logo::before {
    background-image: var(--logo-url-dark);
  }
}

/* === 4) 혹시 자식 요소가 위로 올라와 가리면 내려주기 === */
.sidebar__header .brand__logo > * ,
.drawer__header .brand__logo > * ,
.brand__logo > * ,
a.column-link--logo > * {
  position: relative;
  z-index: 0;
}

/* 1) placeholder(미설정 아바타)로 추정되는 img를 숨김
   - 테마/버전에 따라 파일명이 다를 수 있어 여러 패턴을 포괄 */
img[src*="missing"],
img[src*="/avatars/original/missing"],
img[src*="default_avatar"],
img[src*="noavatar"],
img[src*="placeholder"]
{
  opacity: 0 !important;              /* 실제 이미지는 숨기고… */
}

/* 2) 아바타 컨테이너 위에 우리가 넣은 이미지를 덮어 그림 */
.account__avatar,
.status__avatar,
.notification__avatar,
.account-card__avatar,
.detailed-status__display-picture,
.reply-indicator__avatar {
  position: relative !important;
  overflow: hidden;                    /* 둥근 테두리 밖으로 새는 것 방지 */
  background: none !important;
}

/* 덮어씌울 기본 아바타(원형 유지) */
.account__avatar::before,
.status__avatar::before,
.notification__avatar::before,
.account-card__avatar::before,
.detailed-status__display-picture::before,
.reply-indicator__avatar::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--default-avatar);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;              /* 꽉 채우기 */
  border-radius: 50%;                  /* 원형 */
  pointer-events: none;
}

/* 테마에 따라 img에 border-radius가 없는 경우도 있어서 강제 */
.account__avatar img,
.status__avatar img,
.notification__avatar img,
.account-card__avatar img,
.detailed-status__display-picture img,
.reply-indicator__avatar img {
  border-radius: 50% !important;
  object-fit: cover !important;
}

@media (prefers-color-scheme: light) {
  :root{
    --accent-color: var(--light-accent) !important;
    --brand-color:  var(--light-accent) !important;
  }
}
html[data-theme="light"], body.theme-light, :root.theme-light {
  --accent-color: var(--light-accent) !important;
  --brand-color:  var(--light-accent) !important;
}

/* 실제 UI에 반영(라이트일 때만) */
@media (prefers-color-scheme: light) {
  a, a:visited, a:hover,
  .status__content a, .notification__message a,
  .icon-button, .icon-button__icon,
  .status__action-bar-button, .status__action-bar-button .icon-button__icon,
  .icon-button__counter,
  .display-name__account, .status__relative-time {
    color: var(--light-accent) !important;
    text-decoration-color: var(--light-accent) !important;
  }

  /* 기본 버튼 스타일(배경 투명 + 포인트색 테두리/텍스트) */
  button, .button, input[type="submit"], input[type="button"],
  .compose-form__publish-button {
    background: transparent !important;
    color: var(--light-accent) !important;
    box-shadow: none !important;
  }
  button:hover, .button:hover,
  input[type="submit"]:hover, input[type="button"]:hover,
  .compose-form__publish-button:hover {
    background: color-mix(in oklab, var(--light-accent) 15%, transparent) !important;
  }

  /* SVG가 글자색을 따르도록 */
  .icon-button svg, .status__action-bar-button svg { 
    fill: currentColor !important; stroke: currentColor !important;
  }
}

/* 테마 클래스로 라이트를 강제하는 경우에도 동일 반영 */
html[data-theme="light"] a, body.theme-light a { color: var(--light-accent) !important; }

/* === 버튼 테두리/인셋 라인 완전 제거 === */
button, .button,
input[type="submit"], input[type="button"],
.compose-form__publish-button,
.status__action-bar-button,
.compose-form__buttons-wrapper .button,
.compose-form__buttons-wrapper .icon-button {
  border: none !important;
  box-shadow: none !important;   /* inset 1px 테두리 트릭도 제거 */
}

/* 호버/포커스/활성 상태에서도 다시 생기지 않게 */
button:hover, .button:hover,
input[type="submit"]:hover, input[type="button"]:hover,
button:active, .button:active,
input[type="submit"]:active, input[type="button"]:active,
button:focus, .button:focus,
input[type="submit"]:focus, input[type="button"]:focus,
.compose-form__publish-button:hover,
.compose-form__publish-button:active,
.compose-form__publish-button:focus,
.status__action-bar-button:hover,
.status__action-bar-button:active,
.status__action-bar-button:focus {
  border: none !important;
  box-shadow: none !important;
}

/* 일부 테마가 ::before/::after로 얇은 라인을 그리는 경우 차단 */
button::before, .button::before, .compose-form__publish-button::before,
.status__action-bar-button::before,
button::after,  .button::after,  .compose-form__publish-button::after,
.status__action-bar-button::after {
  border: none !important;
  box-shadow: none !important;
}

/* (선택) 키보드 포커스 표시를 테두리 대신 부드러운 배경으로 */
button:focus-visible, .button:focus-visible,
input[type="submit"]:focus-visible, input[type="button"]:focus-visible,
.compose-form__publish-button:focus-visible {
  outline: none !important;
  background: color-mix(in oklab, var(--light-accent, #2BB3FF) 18%, transparent) !important;
}