/* 💡 구글 CDN을 통해 Noto Sans KR 웹폰트 로드 (가장 널리 쓰이는 레귤러 및 볼드 두께) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
.progress-tracker .active .circle:before{background:#4b6f2c}
.progress-tracker .separator.completed {
    background: #4b6f2c;
}
.simple_form .input.boolean label a{color:#4b6f2c}
img.logo--wordmark {
    content: url('https://i.imgur.com/KpFudKX.png');
}
body.lighter{background: url(https://i.imgur.com/sVOJUdL.jpeg) !important; }
.simple_form .block-button, .simple_form .button, .simple_form button {background:#4b6f2c;}
.progress-tracker .completed .circle {
    background: #4b6f2c;
    border-color: #4b6f2c;
}
.progress-tracker .active .circle{border-color:#4b6f2c}
/* 💡 마스토돈 전체 텍스트 레이어에 Noto Sans 강제 주입 */
html, 
body, 
input, 
textarea, 
select, 
button,
.app-body,
.status__content,
.display-name__account,
.account__header__bio .account__header__content {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
/* 💡 세로/가로 스크롤바 절대 생성 방지 최종 빌드 */
.large-header {
  position: fixed;
  
  /* 너비와 높이를 % 대신 사방 고정(0)으로 선언하여 뷰포트에 강제 고정 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  width: 100% !important;
  height: 100% !important;
  
  /* 💡 [핵심] 캔버스가 부모를 탈출해서 스크롤을 만드는 것을 절대 차단 */
  overflow: hidden !important; 
  
  z-index: -1;
  background: transparent !important;
  pointer-events: none; 
}

#demo-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;
}
:root {
    --bg-image: url(https://i.imgur.com/SId7cu8.jpeg);
    --logo: url(https://i.imgur.com/KpFudKX.png) !important;
    --m-logo: url(https://i.imgur.com/TXyQTqh.png) !important;
    --color-brand-mastodon-links: #a5a5a5;
    --color-light-purple: #cccccc;
    --color-accent: #cccccc;
    --color-accent-dark: #cccccc;
--color-button-text: #0e2558;
}

.layout-single-column .icon-button:hover {
    color: #f7f9f9
}
.layout-single-column .app-holder, .layout-single-column .app-holder>div {
    max-height: 100%;
}
body.theme-default.layout-single-column {
    --logo: url(https://i.imgur.com/KpFudKX.png) !important;
    --m-logo: url(https://i.imgur.com/TXyQTqh.png) !important;
    --bg-image: url(https://i.imgur.com/sVOJUdL.jpeg) !important;
}
/* 1. 기본 모드 (혹은 라이트 모드) 아이콘 색상 설정 */
.icon-button {
  color: #5a6515 !important;
}

/* 2. 💡 body에 theme-theme-ui-dark 클래스가 붙었을 때 (다크 모드 핵심) */
body.theme-theme-ui-dark {
  .icon-button {
    color: #cccccc !important; /* 다크 모드 전용 흰색 계열로 변경 */
  }
}
.warning-banner{display:none;}
body.theme-default.layout-single-column {
    --color-outer-space: #5a6515;
    --active-header-radial-gradient: radial-gradient(ellipse, rgb(239, 154, 154 / 25%) 0, rgb(255, 0, 81 / 0%) 60%);
    --color-column: hsla(0, 0%, 100%, 0.75);
    --color-brand-mastodon: #5a6515;
    --color-brand-mastodon-links: #81a24d;
    --color-accent-dark-50: #be2a4d80;
    --color-accent: #df98a2;
    --color-accent-dark: #4b6f2c;
    --color-border: #b2cd9a;
    --color-dim: #71b839c9;
    --color-mud: rgb(81 112 45 / 77%);
    --color-topaz : #1e1e1e;
    --color-light-purple: #558345;
    --color-bg-compose-form-focus: rgb(60 80 20 / 70%);
    --color-bg-compose-form: rgb(81 112 45 / 77%);
    --color-bg: #fff;
    --color-fg: #000;
    --color-green: #17bf63;
    --color-red: #126f1e;
    --color-red-75: #31863dbf;
    --color-light-shade: #00000005;
    --color-focusable-toot: rgba(0, 0, 0, .085);
    --color-light-text: #1e1e1e;
    --color-black-coral: #9188a6;
    --color-profile-button-hover: #1e1b231a;
    --color-column-link-hover: #1e1b231a;
    --color-modal-overlay: #65966466
    --color-dark: #f7f9f9;
    --color-thread-line: #e1e8ed;
    --color-dark-electric-blue: #9088a6;
    --color-bg-75: rgb(81 112 45 / 77%);
    --color-accent: var(--color-accent-dark);
    --color-ghost-button-text: var(--color-accent-dark);
    --color-hashtag: var(--color-accent-dark);
    --color-mention: var(--color-accent-dark);
--color-button-text: white;
}

.layout-single-column .column-link.column-link--logo, .layout-single-column .ui__header__logo {
    background-clip: content-box;
    background-image: var(--logo);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: auto 180px;
    height: 165px;
    padding: 0;
    width: 240px;
}

.dismissable-banner__action .icon-button, .warning-banner__action .icon-button {
    color: #4b8932;
}

.autosuggest-textarea label span {color:white important!;}
.layout-single-column .column-header{color:white important!;}
icon-button.active:hover{color:white;}
/* 검색창 입력란 스타일 커스텀 */
.search__input {
  color: #ffffff !important;

  &::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* "검색하거나 URL 붙여넣기" 문구도 흰색 계열로 변경 */
  }
}
.column-header {
  button {
    color: #ffffff;          /* 글씨 색상을 완전히 흰색으로 지정 */
    opacity: 1;              /* 마스토돈 기본 반투명 효과가 있다면 해제 */
    
    i.column-header__icon {
      color: #ffffff;        /* 글씨 옆의 집 모양 아이콘도 함께 흰색으로 변경 */
    }
  }
}

/* 글 작성 입력창 글씨 및 배경 색상 변경 */
.autosuggest-textarea__textarea {
  color: #ffffff !important;   
  &:focus {
    color: #ffffff !important;          /* 클릭(포커스)했을 때도 흰색 유지 */
  }

  &::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* "지금 무슨 생각을 하고 있나요?" 힌트 문구도 반투명한 흰색으로 변경 */
  }
}
/* 하단 link-footer 내부의 모든 글씨 및 링크 흰색 고정 */
.link-footer {
  color: #ffffff !important;

  p, strong, span, a {
    color: #ffffff !important;
  }

  /* 링크에 마우스를 올렸을 때(Hover)도 흰색을 유지하거나 약간의 투명도만 주려면 */
  a:hover {
    color: #ffffff !important;
    text-decoration: underline; /* 밑줄 효과만 부여 */
  }
}

.account-role {
    align-items: center;
    border: 1px solid #5a6515;
    border-radius: 6px;
    color: #5a6515;
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    letter-spacing: .5px;
    line-height: 16px;
    padding: 4px;
    padding-inline-end: 8px;
}

/* 돌아가기 버튼의 아이콘 및 글씨 흰색 고정 */
.column-back-button {
  color: #ffffff !important;

  span, i.column-back-button__icon {
    color: #ffffff !important;
  }

  /* 버튼에 마우스를 올렸을 때(Hover) 스타일 유지 또는 지정 */
  &:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important; /* 마우스 올렸을 때 살짝 투명한 배경 효과 */
  }
}

.actions-modal ul li:not(:empty) a.active, .actions-modal ul li:not(:empty) a.active button, .actions-modal ul li:not(:empty) a:active, .actions-modal ul li:not(:empty) a:active button, .actions-modal ul li:not(:empty) a:focus, .actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover button {
    background: #5a6515;
    color: #000;
}

.actions-modal ul li:not(:empty) a.active{background:#5a6515;}

.layout-single-column .account__header__tabs__buttons .button{color:#5a6515;}

.layout-single-column .compose-form .icon-button{color: rgba(255, 255, 255, 0.6) !important; }



/* ==========================================================
   💡 마스토돈 전역 배치용 순수 CSS 반딧불 애니메이션
   ========================================================== */

.fireflies-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: -1;
  overflow: hidden !important;
  pointer-events: none;
  background: transparent !important;
}

.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}

.firefly::before,
.firefly::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  opacity: 0.4;
  animation: drift ease alternate infinite;
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

/* --------------------------------------------------
   개별 반딧불 인스턴스 1~15번 타이밍 및 궤적 매핑
   -------------------------------------------------- */

.firefly:nth-child(1) { animation-name: move1; }
.firefly:nth-child(1)::before { animation-duration: 16s; }
.firefly:nth-child(1)::after { animation-duration: 16s, 6420ms; animation-delay: 0ms, 2341ms; }

.firefly:nth-child(2) { animation-name: move2; }
.firefly:nth-child(2)::before { animation-duration: 11s; }
.firefly:nth-child(2)::after { animation-duration: 11s, 8150ms; animation-delay: 0ms, 4820ms; }

.firefly:nth-child(3) { animation-name: move3; }
.firefly:nth-child(3)::before { animation-duration: 14s; }
.firefly:nth-child(3)::after { animation-duration: 14s, 5230ms; animation-delay: 0ms, 1250ms; }

.firefly:nth-child(4) { animation-name: move4; }
.firefly:nth-child(4)::before { animation-duration: 17s; }
.firefly:nth-child(4)::after { animation-duration: 17s, 7340ms; animation-delay: 0ms, 3910ms; }

.firefly:nth-child(5) { animation-name: move5; }
.firefly:nth-child(5)::before { animation-duration: 9s; }
.firefly:nth-child(5)::after { animation-duration: 9s, 9120ms; animation-delay: 0ms, 540ms; }

.firefly:nth-child(6) { animation-name: move6; }
.firefly:nth-child(6)::before { animation-duration: 13s; }
.firefly:nth-child(6)::after { animation-duration: 13s, 6800ms; animation-delay: 0ms, 6100ms; }

.firefly:nth-child(7) { animation-name: move7; }
.firefly:nth-child(7)::before { animation-duration: 15s; }
.firefly:nth-child(7)::after { animation-duration: 15s, 5900ms; animation-delay: 0ms, 2750ms; }

.firefly:nth-child(8) { animation-name: move8; }
.firefly:nth-child(8)::before { animation-duration: 12s; }
.firefly:nth-child(8)::after { animation-duration: 12s, 8400ms; animation-delay: 0ms, 4300ms; }

.firefly:nth-child(9) { animation-name: move9; }
.firefly:nth-child(9)::before { animation-duration: 18s; }
.firefly:nth-child(9)::after { animation-duration: 18s, 7100ms; animation-delay: 0ms, 1900ms; }

.firefly:nth-child(10) { animation-name: move10; }
.firefly:nth-child(10)::before { animation-duration: 10s; }
.firefly:nth-child(10)::after { animation-duration: 10s, 6250ms; animation-delay: 0ms, 5100ms; }

.firefly:nth-child(11) { animation-name: move11; }
.firefly:nth-child(11)::before { animation-duration: 16s; }
.firefly:nth-child(11)::after { animation-duration: 16s, 5500ms; animation-delay: 0ms, 3200ms; }

.firefly:nth-child(12) { animation-name: move12; }
.firefly:nth-child(12)::before { animation-duration: 14s; }
.firefly:nth-child(12)::after { animation-duration: 14s, 7800ms; animation-delay: 0ms, 850ms; }

.firefly:nth-child(13) { animation-name: move13; }
.firefly:nth-child(13)::before { animation-duration: 11s; }
.firefly:nth-child(13)::after { animation-duration: 11s, 9400ms; animation-delay: 0ms, 6700ms; }

.firefly:nth-child(14) { animation-name: move14; }
.firefly:nth-child(14)::before { animation-duration: 15s; }
.firefly:nth-child(14)::after { animation-duration: 15s, 6600ms; animation-delay: 0ms, 2150ms; }

.firefly:nth-child(15) { animation-name: move15; }
.firefly:nth-child(15)::before { animation-duration: 13s; }
.firefly:nth-child(15)::after { animation-duration: 13s, 8900ms; animation-delay: 0ms, 4600ms; }

/* --------------------------------------------------
   애니메이션 모션 키프레임 핵심 궤적 정의
   -------------------------------------------------- */

@keyframes drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flash {
  0%, 30%, 100% { opacity: 0; box-shadow: 0 0 0vw 0vw yellow; }
  5% { opacity: 1; box-shadow: 0 0 2vw 0.4vw yellow; }
}

@keyframes move1 {
  0% { transform: translateX(12vw) translateY(-32vh) scale(0.45); }
  33% { transform: translateX(-24vw) translateY(15vh) scale(0.85); }
  66% { transform: translateX(5vw) translateY(-10vh) scale(0.35); }
  100% { transform: translateX(-18vw) translateY(28vh) scale(0.6); }
}

@keyframes move2 {
  0% { transform: translateX(-40vw) translateY(20vh) scale(0.3); }
  25% { transform: translateX(15vw) translateY(-45vh) scale(0.7); }
  50% { transform: translateX(-5vw) translateY(5vh) scale(0.5); }
  75% { transform: translateX(30vw) translateY(-15vh) scale(0.9); }
  100% { transform: translateX(-12vw) translateY(35vh) scale(0.4); }
}

@keyframes move3 {
  0% { transform: translateX(25vw) translateY(45vh) scale(0.65); }
  50% { transform: translateX(-30vw) translateY(-20vh) scale(0.35); }
  100% { transform: translateX(8vw) translateY(12vh) scale(0.75); }
}

@keyframes move4 {
  0% { transform: translateX(-15vw) translateY(-15vh) scale(0.8); }
  33% { transform: translateX(42vw) translateY(33vh) scale(0.5); }
  66% { transform: translateX(-8vw) translateY(-40vh) scale(0.95); }
  100% { transform: translateX(22vw) translateY(18vh) scale(0.4); }
}

@keyframes move5 {
  0% { transform: translateX(35vw) translateY(-5vh) scale(0.35); }
  50% { transform: translateX(-15vw) translateY(40vh) scale(0.75); }
  100% { transform: translateX(4vw) translateY(-25vh) scale(0.55); }
}

@keyframes move6 {
  0% { transform: translateX(-22vw) translateY(28vh) scale(0.6); }
  33% { transform: translateX(18vw) translateY(-35vh) scale(0.4); }
  66% { transform: translateX(-45vw) translateY(5vh) scale(0.85); }
  100% { transform: translateX(30vw) translateY(22vh) scale(0.5); }
}

@keyframes move7 {
  0% { transform: translateX(5vw) translateY(-48vh) scale(0.7); }
  50% { transform: translateX(-38vw) translateY(12vh) scale(0.45); }
  100% { transform: translateX(25vw) translateY(-15vh) scale(0.9); }
}

@keyframes move8 {
  0% { transform: translateX(-30vw) translateY(-10vh) scale(0.5); }
  25% { transform: translateX(22vw) translateY(38vh) scale(0.8); }
  50% { transform: translateX(-12vw) translateY(-25vh) scale(0.35); }
  75% { transform: translateX(40vw) translateY(15vh) scale(0.65); }
  100% { transform: translateX(-5vw) translateY(-5vh) scale(0.7); }
}

@keyframes move9 {
  0% { transform: translateX(45vw) translateY(30vh) scale(0.4); }
  50% { transform: translateX(-20vw) translateY(-42vh) scale(0.85); }
  100% { transform: translateX(15vw) translateY(10vh) scale(0.5); }
}

@keyframes move10 {
  0% { transform: translateX(-8vw) translateY(-30vh) scale(0.75); }
  33% { transform: translateX(35vw) translateY(25vh) scale(0.35); }
  66% { transform: translateX(-28vw) translateY(-12vh) scale(0.65); }
  100% { transform: translateX(12vw) translateY(42vh) scale(0.55); }
}

@keyframes move11 {
  0% { transform: translateX(18vw) translateY(15vh) scale(0.5); }
  50% { transform: translateX(-42vw) translateY(-38vh) scale(0.9); }
  100% { transform: translateX(5vw) translateY(22vh) scale(0.35); }
}

@keyframes move12 {
  0% { transform: translateX(-35vw) translateY(40vh) scale(0.8); }
  25% { transform: translateX(8vw) translateY(-20vh) scale(0.45); }
  50% { transform: translateX(-18vw) translateY(-45vh) scale(0.6); }
  75% { transform: translateX(28vw) translateY(5vh) scale(0.35); }
  100% { transform: translateX(-2vw) translateY(18vh) scale(0.7); }
}

@keyframes move13 {
  0% { transform: translateX(40vw) translateY(-12vh) scale(0.4); }
  50% { transform: translateX(-5vw) translateY(32vh) scale(0.85); }
  100% { transform: translateX(-32vw) translateY(-28vh) scale(0.55); }
}

@keyframes move14 {
  0% { transform: translateX(-12vw) translateY(-45vh) scale(0.65); }
  33% { transform: translateX(25vw) translateY(18vh) scale(0.35); }
  66% { transform: translateX(-38vw) translateY(35vh) scale(0.75); }
  100% { transform: translateX(15vw) translateY(-10vh) scale(0.5); }
}

@keyframes move15 {
  0% { transform: translateX(32vw) translateY(22vh) scale(0.45); }
  50% { transform: translateX(-15vw) translateY(-15vh) scale(0.8); }
  100% { transform: translateX(8vw) translateY(-42vh) scale(0.35); }
}