/* 기본색상설정*/
:root {
--color-grey-950: #201818 !important;
--color-grey-800: #503a3a !important;
--color-grey-700: #5f4444 !important;
--color-grey-600: #745353 !important;
--color-grey-500: #8e6767 !important;
--color-grey-400: rgb(170, 136, 136) !important;
--color-grey-300: #c8b1b1 !important;
--color-grey-200: #e1d6d6 !important;
--color-grey-100: #f3eded !important;
--color-grey-50: #f9f6f6 !important;
--color-indigo-700: #cc3838 !important;
--color-indigo-600: #e64747 !important;
--color-indigo-400: #f98080 !important;
--color-indigo-300: #fda5a5 !important;
--color-indigo-200: #fec8c8 !important;
--color-indigo-100: #ffe0e0 !important;
--color-indigo-50: #fff0f0 !important;
--color-bg-brand-softer: color-mix(in srgb, var(--color-indigo-400), var(--backcolor) 50%) !important;
--color-bg-brand-soft: color-mix(in srgb, var(--color-indigo-400), var(--backcolor) 20%) !important;
--color-text-status-links : var(--color-indigo-400)!important;
--color-bg-secondary-base: #500000 !important;
--avatar-border-radius: 400px !important; /* 아바타둥굴게*/
}

/* 어두움테마 */
html[data-color-scheme="dark"] {
    --backcolor: black;
    --front:white;
    --bg-image: url('https://sfall.xyz/system/media_attachments/files/116/430/293/422/212/053/small/c442b823adae73e9.png');
    --logo1: url('https://sfall.xyz/system/media_attachments/files/116/430/260/120/535/519/small/27d321c494c6c324.png');
    --logo3: url('https://sfall.xyz/system/media_attachments/files/116/430/260/119/021/487/original/016a2deb452470f5.png');
}

/* 밝음테마 */
html[data-color-scheme="light"]{
    --backcolor: white;
    --front:black;
    --bg-image: url('https://sfall.xyz/system/media_attachments/files/116/430/293/410/338/427/original/f6c83c3f3fc73772.png');
    --logo1: url('https://sfall.xyz/system/media_attachments/files/116/349/730/813/453/848/original/d95d1011a71d1eed.png');
    --logo3: url('https://sfall.xyz/system/media_attachments/files/116/430/260/134/636/667/original/0c54ca0e96a96ed6.png');
}

/* 배경테마설정 */
html, body {
  background-image: var(--bg-image) !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center bottom !important;
} /* 테마이미지설정 */

.notification-group--unread::before, .notification-ungrouped--unread::before{
    background: linear-gradient( to right, rgb(from var(--color-indigo-600) r g b / 0.4) 0%, transparent 15% ) !important;
} /* 체크안한멘션 강조 */

.status__wrapper-direct, .notification-ungrouped--direct, .notification-group--direct, .notification-group--annual-report, 
.detailed-status__wrapper-direct .detailed-status, .detailed-status__wrapper-direct .detailed-status__action-bar {
    background: color-mix(in srgb, var(--color-indigo-300), var(--backcolor) 75%) !important;
} 
.notification-ungrouped .status__wrapper-direct {
    background: transparent !important;
} /* 디엠색상 */

.compose-form__highlightable {
    background:  var(--backcolor) !important;
} /* 텍스트입력칸색상 */



.admin-wrapper .sidebar {
    background: var(--backcolor) !important;
} /* 환경설정 왼쪽바 */

.admin-wrapper .content {
    background-color: color-mix(in srgb, var(--backcolor), transparent 15%) !important;
} /* 환경설정 오른쪽바 */

.columns-area__panels__main {
  background-color: color-mix(in srgb, var(--backcolor), transparent 15%) !important;
} /* 메인타래색상 */


/* 로고변경 */
.column-link--logo svg {
    display: none !important;
}
.column-link--logo {
    background-image: var(--logo1) !important;
    background-size: contain !important; 
    background-repeat: no-repeat !important;
    height: 80px !important;
    margin-left: 10px !important;
    display: block !important;
}
.column-link--logo:hover {
    opacity: 0.8 !important;
    filter: drop-shadow(0 0 5px rgba(211, 47, 47, 0.5)) !important; /* 빨간색 은은한 광택 */
}   /* 오른쪽상단메인로고 */

.column-header__title .logo.logo--icon {
    color: transparent !important;
    padding-left: 56px !important; 
    width: 0 !important; 
}
.column-header__title .logo {
    background-image: var(--logo3) !important;
    background-size: contain !important; 
    background-repeat: no-repeat !important;
}   /* 모바일상단로고 */

.logo-container .logo {
    width: 0 !important;
    padding-left: 300px !important;
    height: 0 !important;
    padding-top: 100px !important;
    background-image: var(--logo1) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}/* 로그인로고 */

.admin-wrapper .sidebar .logo{
    background-image: var(--logo3) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    width: 0 !important; 
    padding-left: 200px !important; 
}   /* 설정로고 */

.account__avatar {
    background: transparent !important;
}  /* 인장투명화 */

img[src*="missing.png"]:not(.parallax) {
    content: url('https://sfall.xyz/system/media_attachments/files/116/521/145/375/409/167/original/215dfc74a62ae729.png') !important;
    object-fit: cover !important;
}   /* 기본인장 */

.announcements__mastodon {
    display: none;
}  /* 공지로고삭제 */



/* 하단유튜브재생 */
/* 1. 기본 상태 (숨김) */
.custom-fixed-youtube-box {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    transition: all 0.4s ease-out !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

/* 2. 사이드바에 호버했을 때 나타남 */
.navigation-panel:hover .custom-fixed-youtube-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}



/* 3. [핵심] 로고나 메뉴 영역에 호버했을 때는 다시 숨김 처리 */
/* 사이드바 안에 있지만 로고나 메뉴를 만지고 있을 땐 유튜브 박스를 가립니다. */
.navigation-panel__logo:hover ~ .custom-fixed-youtube-box,
.navigation-panel__logo:hover ~ * .custom-fixed-youtube-box,
.navigation-panel__menu:hover ~ .custom-fixed-youtube-box,
.navigation-panel__menu:hover ~ * .custom-fixed-youtube-box,
.navigation-panel__menu:hover .custom-fixed-youtube-box {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    pointer-events: none !important;
}

/* 4. 유튜브 박스 자체에 마우스가 올라가 있을 때는 무조건 유지 */
.custom-fixed-youtube-box:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}



/* 테마설정끝 */
/* 테마설정끝 */

/* 커스텀이모지 사이즈 조정 */
img.custom-emoji { 
    width: auto !important;
    height: auto !important;
    zoom: 0.4 !important;
    
    transition: all 0.2s ease-out; /* 부드러운 확대 애니메이션 */
    position: relative; /* z-index 작동을 위해 필요 */
    z-index: 1;         /* 평소에는 평범하게 */
    display: inline-block;
}

img.custom-emoji:hover {
    transform: scale(1.1); /* 1.5배 확대 (0.5만큼 튀어나옴) */
}

.box1 img.custom-emoji,
.box2 img.custom-emoji,
.box3 img.custom-emoji {
    height: 24px!important;
    zoom: 1 !important;
    width: auto; /* 비율 유지를 위해 권장 */
    object-fit: contain; /* 이미지가 왜곡되지 않도록 설정 */
}

/* 답멘타래 보이는 길이 길게 */
.edit-indicator__content, .reply-indicator__content{
    max-height: fit-content !important;
}

.status__content, .edit-indicator__content, .reply-indicator__content{
    overflow: scroll;
    scrollbar-width: none;
    display: block;
}

.item-list.scrollable.scrollable--flex {
    overflow: scroll;
}

.reply-indicator__content{
    background: color-mix(in srgb, var(--backcolor), transparent 30%); 
    backdrop-filter: blur(40px);
    container-type: inline-size;
}


/* 비공개(private)와 미등재(unlisted) 옵션을 한꺼번에 숨김 */
li.visibility-dropdown__option[data-index="private"],
li.visibility-dropdown__option[data-index="unlisted"] {
    display: none !important;
}

/* '인용할 수 있는 사람' 설정 영역 전체 숨기기 */
div.visibility-dropdown:has(label[id*="quote-label"]) {
    display: none !important;
}

/* '팔로우 중인 해시태그' 메뉴 숨기기 */
a.column-link[href="/followed_tags"] {
    display: none !important;
}

/* '오늘의 유행 보이기' 라벨 텍스트 변경 */
label[for="user_settings_attributes_web.trends"] {
    font-size: 0 !important; /* 기존 글자 크기를 0으로 만들어 숨김 */
}

label[for="user_settings_attributes_web.trends"]::before {
    content: "브금 자동재생 (스진 시 체크!)"; /* 대신 보여줄 텍스트 */
    font-size: 14px !important; /* 마스토돈 기본 폰트 크기에 맞춤 (보통 14px~15px) */
    visibility: visible;
    display: inline-block;
}

/* 1. 기존 골뱅이(@) 아이콘의 내부 모양(path)을 숨깁니다 */
.icon-at path {
  display: none !important;
}

/* 2. 아이콘 영역에 새 메일 아이콘을 입힙니다 */
.icon-at {
  background-color: currentColor; /* 아이콘이 글자색(테마색)을 따라가게 합니다 */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>');
  
  /* 아이콘 정렬 및 크기 고정 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  
  display: inline-block;
  width: 24px;
  height: 24px;
}

/* 1. 기존 지구본 아이콘의 내부 모양(path)을 숨깁니다 */
.icon-globe path {
  display: none !important;
}

/* 2. 아이콘 영역에 지정하신 PNG 이미지를 입힙니다 */
.icon-globe {
  /* 이미지 주소 삽입 */
  background-image: url('https://sfall.xyz/system/media_attachments/files/116/442/580/279/458/282/original/9de67610faa726ae.png') !important;
  
  /* 배경 이미지 관련 설정 */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* 이미지가 아이콘 크기(24px) 안에 쏙 들어가게 합니다 */
  
  /* 마스토돈 테마색 영향을 받지 않도록 배경색을 투명하게 고정 */
  background-color: transparent !important;
  
  /* 크기 및 배치 고정 (HTML 속성과 일치시킴) */
  display: inline-block !important;
  width: 24px ;
  height: 24px ;
}






/* 이하 텍스트 css설정 */
/* 이하 텍스트 css설정 */

:not([class*="box"]) > .text {
    color: color-mix(in srgb, var(--front), transparent 50%);
}
:not([class*="box"]) > .text2 {
    color: color-mix(in srgb, var(--front), transparent 50%);
}

.protected, .text {
    user-select: all; /* 클릭 한 번에 전체 선택됨 */
    -webkit-user-select: all;
    -moz-user-select: all;
    cursor: copy; /* 커서를 복사 모양으로 변경 */
}

.line {
    border-top: 1px solid  color-mix(in srgb, var(--color-grey-300), transparent 50%);
    display: block;
    margin-block: 10px;
} /* 가로줄 */

.sp1 {
    color: color-mix(in srgb, var(--front), transparent 50%);
    font-size: 70%;
} /* 소곤소곤 */

.sp2 {
    color:color-mix(in srgb, var(--front), transparent 50%);
    font-style: italic;
    margin-right: 2px;
} /* 기울기 */

.sp3 {
    font-weight: 700;
} /* 강조 */

.sp4 {
    color: var(--color-indigo-600);
    font-weight: 700;
} /* 강한강조 */

.sp5 {
    text-decoration: underline;
} /* 밑줄  */

.sp6 {
    text-shadow: 2px 0px 8px var(--color-grey-400), -2px 0px 6px var(--color-grey-400);
    color: transparent;
} /* 블러  */


.sp9 {
    font-weight: 800;
    font-size: 110%;
    font-style: italic;
    text-shadow: 6px 0 0 rgba(255,0,0,0.5), -6px 0 0 rgba(0,255,255,0.5);
}


.sp10 {
user-select: all; /* 클릭 한 번에 전체 선택됨 */
    -webkit-user-select: all;
    -moz-user-select: all;
    cursor: copy; /* 커서를 복사 모양으로 변경 */
}



.box1 {
    display: inline-flex;
    padding-inline: 6px;
    background: var(--color-indigo-600);
    color: white;
} /* [선택지] */

.box2 {
    background: var(--backcolor);
    border-radius: 2px;
    border: 1px solid var(--color-indigo-600);
    color:  color-mix(in srgb, var(--color-grey-400), var(--front) 70%);
    display: inline-flex;
    font-size: 75%;
    padding-right: 6px;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
    outline: 0px solid transparent;
} /* 선택지 상세내용 */

.box2:hover {
    transform: scale(1.02); /* 기존 크기 확대 유지 */
    box-shadow: 0 2px 5px color-mix(in srgb, var(--front), transparent 85%);
}

.box3, .box7 {
    border-radius: 2px;
    font-size: 75%;
    margin-bottom: 4px;
    flex-wrap: wrap;
    outline: 0px solid transparent;
    display: inline-flex;
    padding-inline: 6px;
} /* 선택지만 */

.box3 {
    background: var(--color-indigo-600);
    color: white;
    border: 1px solid var(--color-indigo-600);
} /* 선택지만 */

.box7 {
    background: color-mix(in srgb, var(--front), transparent 50%);
    color: var(--backcolor);
} /* 선택지만 */

.box3:hover {
    transform: scale(1.02); /* 기존 크기 확대 유지 */
    box-shadow: 0 2px 5px color-mix(in srgb, var(--front), transparent 85%);
}

.box8 {
    padding: 4px 8px;
    background-color: #0f8896;
    color: #fff !important;
    border-radius: 2px;
    text-decoration: none !important;
    font-weight: 600;
}

.box8:hover {
    background-color: #24afbf;
}

.box4 {
    background: var(--backcolor);
    border-left: 5px solid var(--color-indigo-400);
    color:  color-mix(in srgb, var(--color-grey-400), var(--front) 30%);
    display: block;
    font-size: 90%;
    line-height: 1.4;
    padding: 18px;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--front), transparent 90%);
} /* 인용텍스트박스 */

/* 3. 이모지 정렬 박스  */
.box5 {
    display: flex;
    flex-wrap: nowrap; /* 절대 줄바꿈 하지 않음 */
    overflow: hidden;  /* 영역 밖으로 나가는 것 방지 */
    justify-content: center;
}

.box5 > img.custom-emoji {
    flex: 0 1 auto;   /* 공간이 부족할 때만 유연하게 축소 */
    min-width: 0;     /* flex 아이템의 최소 너비 제한 해제 */
    width: auto;      /* 혹은 고정 px 대신 비율 사용 */
}

.box6 {
    display: inline-block;
    padding-inline-start: 6px;
    user-select: all; /* 클릭 한 번에 전체 선택됨 */
    -webkit-user-select: all;
    -moz-user-select: all;
    cursor: copy; /* 커서를 복사 모양으로 변경 */
    color: var(--front);
    font-weight: 700;
    
} /* [판정스탯] */

.box6 .bracket {
    display: inline;      /* none 대신 inline 유지 */
    opacity: 0;          /* 평소엔 투명하게 */
    width: 0;            /* 공간 차지 최소화 */
    overflow: hidden;
    transition: opacity 0.2s; /* 부드럽게 나타나게 하려면 추가 */
}

/* 호버 시 */
.box6:hover .bracket {
    opacity: 1;          /* 투명도만 복구 */
    width: auto;
}

.box6 .bracket {
    display: none;
}

/* 호버 시에만 괄호 보이기 */
.box6:hover .bracket {
    display: inline;
    white-space: nowrap;
}

.box2:has(> .box6) {
  border: 1px solid color-mix(in srgb, var(--front), transparent 80%);
  background: none;
}

.box9{
    max-width: 100%;
}


.ex1{
    position: static;
    display: inline-flex;
    cursor: pointer;
    background: var(--backcolor);
    border: 1px solid var(--front);
    margin-right: -1px;
    margin-top: -1px;
    width: 28px;
    height: 28px;
    font-size: 80%;
    white-space: normal;
}  /* 아이템작은박스 */

.ex2{
    font-weight: 600;
    font-size: 8pt;
    color: var(--front);
    transform: translate(-28px, 12px);
    z-index: 9;
    filter: drop-shadow(1px -1px 1px var(--backcolor)) drop-shadow(0px 0px 1px var(--backcolor)) drop-shadow(0px 0px 1px var(--backcolor));
}/* 아이템숫자 */

/* 아이템 */
.ex5, .ex3, .ex9 {
    position: static;
    display: inline-table;
    white-space: nowrap;
    color: white; /* 그라데이션 위 가독성 */
    font-size: 80%;
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 4px;
    margin-right: 4px;
    box-sizing: border-box;
    padding-inline-end: 6px;

    /* 인디고 변수를 활용한 그라데이션 배경 설정 */
    background: linear-gradient(-45deg, 
        #0f8896, 
        #24afbf, 
        #0f8896, 
        #24afbf
    );
    background-size: 400% 400%;
    
    /* 애니메이션 실행 */
    animation: gradientMove 7s ease infinite;
    
    /* 강조를 위한 그림자 (인디고 톤) */
    box-shadow: 0 2px 5px color-mix(in srgb, var(--front), transparent 85%);
    border: none; 
    transition: all 0.2s ease;
}

/* 마우스를 올렸을 때 반응 (ex5로 수정 및 레이아웃 유지형 강조) */
.ex5:hover, .ex3:hover, .ex9:hover {
    /* scale/filter 대신 outline과 glow 사용으로 자식 깨짐 방지 */
    outline: 2px solid #24afbf;
    box-shadow: 0 0 12px color-mix(in srgb, var(--front), transparent 70%);
    /* 살짝 더 밝은 느낌을 위해 배경 위치나 색감을 조정할 수 있습니다 */
}

/* 그라데이션 애니메이션 */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ex3{
   background:white;
   color:black;
}

.ex9{
   background:black;
   color:white;
}

*:has(> .ex6):hover > .ex6 {
    display: block;
}

*:has(> .ex4):hover > .ex4 {
    display: block;
}

.ex6, .ex4 {
    display: none;
    position: absolute;
    left: 0;
    width: 100%; 
    min-width: 100%;
    max-width: 100%;
    color: var(--front);
    box-sizing: border-box;
    background-color: var(--backcolor);
    border: 1px solid var(--color-grey-400);
    border-radius: 0 4px 4px 4px; /* 윗줄 코드 축약 */
    padding: 8px;
    z-index: 9999;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--front), transparent 85%);
    white-space: normal;
}

/* ex1일 때만 특정 위치 조정이 필요하다면 */
.ex1 .ex6, .box7 .ex6, .ex1 .ex4 {
    transform: translateY(28px);
}

.detailed-status .status__content  {
    overflow: visible !important;
}

.ex7 {
    color:color-mix(in srgb, var(--front), transparent 60%);
    font-size: 85%;
    float: right;
} /* 오른쪽정렬 */

.ex8 {
    background: color-mix(in srgb, var(--color-grey-300), transparent 75%);
    border-radius: 2px;
    color: var(--front);
    display: INLINE-BLOCK;
    WIDTH: 100%;
    font-size: 90%;
    line-height: 1.4;
    margin-top: 4px;
    padding-block: 4px;
    padding-inline: 8px;
    box-sizing: border-box;
} /* 아이템설명 */

.ex8 .box3 {
    padding-inline: 2px !important;
    margin-bottom: 0px !important;
    position: relative;
    top: -1px
}

.table5 .box3 {
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0px!important;
}


.ex5 > img.custom-emoji {
    height: 20px !important;
    zoom: 1 !important;
    aspect-ratio: 1 / 1;
    object-position: center;
    margin-right: 4px;
}

.detailed-status .status__content .ex5 > img.custom-emoji {
    height: 24px !important;
    margin-right: 4px;
}


.ex1 > img.custom-emoji {
    object-position: right;
    aspect-ratio: 1 / 1;
}

.ex7 > img.custom-emoji {
    zoom: 0.25 !important;
}

.ex8 .line {
    margin-block: 5px !important;
}

.ex8 .ex7 {
    float: none !important;
}


/* 1. 테이블 전체 컨테이너 */
.table1 {
    display: table;
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(10px, 3cqw, 16px);
    table-layout: fixed; /* 셀 너비를 고정하여 균형 잡기 */
}
.status .table1 {
    width: 99%;
}

/* 2. 테이블 가로 행 */
.table2 {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: -1px;
    table-layout: fixed;
}

/* 3. 테이블 제목 셀 */
.table3 {
    display: table-cell;
    border: 1px solid var(--front);
    padding: 4px;
    vertical-align: middle;
    background: var(--front);
    color: var(--backcolor) !important;
    text-align: center;
    font-weight: 700;
}

/* 3. 테이블 부제목 셀 */
.table4 {
    display: table-cell;
    border: 1px solid var(--front);
    padding: 2px;
    vertical-align: middle;
    background: color-mix(in srgb, var(--color-grey-300), transparent 50%);
    color: var(--front) !important;
    text-align: center;
    font-weight: 600;
    width: 100px;
}

/* 3. 테이블 내용 셀  */
.table5 {
    display: table-cell;
    border: 1px solid var(--front);
    vertical-align: middle;
    text-align: center;
    color: var(--front) !important;
    padding: 2px;
    
    font-weight: 600;
}

/* 3. 테이블 내용 본문셀  */
.table10 {
    display: table-cell;
    border: 1px solid var(--front);
    color: var(--front) !important;
    padding: 10px;
}

/* 3. 테이블 부제목 셀 */
.table11 {
    display: table-cell;
    border: 1px solid var(--front);
    padding: 2px;
    vertical-align: middle;
    background: color-mix(in srgb, var(--color-grey-300), transparent 50%);
    color: var(--front) !important;
    text-align: center;
    font-weight: 600;
}

/* 1. 공통 스타일 (6, 7, 8, 9번 모두 적용) */
.table6, .table7, .table8, .table9 {
    display: table-cell;
    border: 1px solid var(--front);
    vertical-align: middle;
    text-align: center;
    position: relative;
    font-weight: 600;
}

/* 2. 각 번호별 배경색 설정 */
.table6 { background: #90EE90; color: var(--front) !important;}    /* 6번: 회색 (일반/중립) */
.table7 { background: #00CD00; color: var(--front) !important;}  /* 7번: 주황 (주의/경고) */
.table8 { background: green; color: var(--backcolor) !important;}     /* 8번: 빨강 (실패) */
.table9 { background: #DC143C; color: var(--backcolor) !important;}   /* 9번: 초록 (성공) */

/* 3. 호버 시 공통 동작 (텍스트 숨기기) */
.table6:hover, .table7:hover, .table8:hover, .table9:hover {
    font-size: 0 !important;
    color: transparent !important;
    background: transparent;
}

/* 4. 이모지 기본 상태 (숨김) */
.table6 > img.custom-emoji, 
.table7 > img.custom-emoji,
.table8 > img.custom-emoji, 
.table9 > img.custom-emoji {
    display: none;
    width: 100% !important;
    max-width: 200px;
    zoom: 2 !important;
    height: auto;
    vertical-align: middle;
}

/* 5. 호버 시 이모지 노출 */
.table6:hover > img.custom-emoji, 
.table7:hover > img.custom-emoji,
.table8:hover > img.custom-emoji, 
.table9:hover > img.custom-emoji {
    display: inline-block;
}








/* [가면 저널] 설정 영역 */
:is(.status__avatar, .detailed-status__display-avatar) {
  /* 1. f62c9e4dea5a22de.png 형식*/
  &:has(img[src*="e5faa97328db2bd1.pg"]) { --mask: url("https://sfall.xyz/system/media_attachments/files/116/430/266/224/574/261/original/e52e9d03ef648194.png"); --mask-display: inline-flex; }
  &:has(img[src*="284dda3228c6b1b2.pg"]) { --mask: url("https://sfall.xyz/system/media_attachments/files/116/430/266/219/940/573/original/2e514747300654be.png"); --mask-display: inline-flex; }
  &:has(img[src*="700b492ee354c718.pg"]) { --mask: url("https://sfall.xyz/system/media_attachments/files/116/430/266/224/381/248/original/d0a905ceb8ceaf2d.png"); --mask-display: inline-flex; }
  &:has(img[src*="fd94d3dc0002b2e0.pg"]) { --mask: url("https://sfall.xyz/system/media_attachments/files/116/430/266/220/852/626/original/572a2852f7975214.png"); --mask-display: inline-flex; }

  /* 2. 공통 디자인 (수정 불필요) */
  /* 가면 설정(--mask-display)이 있는 유저만 레이아웃을 바꿉니다. */
  display: var(--mask-display, block) !important; 
  align-items: center;
  gap: 4px;
  width: auto !important;
  overflow: visible !important;

  &::before {
    /* 가면 설정이 있는 유저에게만 이미지를 띄우고, 없으면 아예 생성하지 않습니다. */
    content: "";
    display: var(--mask-display, none) !important; 
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-image: var(--mask);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
}

/* 타래가 잘리지 않도록 안전장치 */
.status, .detailed-status {
  overflow: visible !important;
}