/* ================================================================
   한참 에디션 — 유사 트위터 스킨(밝음 / 어두움) 꾸미기
   붙이는 곳: 관리자 → 설정 → 서버 설정 → 외관 → "사용자 정의 CSS"

   ▶ 고칠 곳은 맨 위 [밝음] [어두움] 두 칸뿐이에요. 따옴표 안의 주소와 색만 바꾸세요.
   ▶ 그림 주소는 반드시 "이 마스토돈 서버에 올린 그림" 주소여야 해요.
     (다른 사이트 그림은 마스토돈 보안 설정 때문에 안 보여요)
   ▶ 바꾸고 싶지 않은 항목은 아래쪽 ②~⑤ 중 그 번호 블록을 통째로 지우면 원래대로예요.
   ================================================================ */

/* ── [밝음] 유사 트위터 스킨(밝음)에서 쓸 값 ── */
body.theme-mastodon-bird-ui-light {
  --my-color: #1d9bf0;          /* ① 사이트 컬러 (버튼·링크·강조색) */
  --my-on-color: #ffffff;       /*    사이트 컬러 위 글자색 (컬러가 밝으면 #000000) */
  --my-avatar: url("https://내서버주소/system/media_attachments/files/.../기본프로필_밝음.png");  /* ② 기본 프로필사진 */
  --my-header: url("https://hearthfire.top/system/site_uploads/files/000/000/001/@1x/fd7edacddadcc01a.png");    /* ③ 기본 헤더사진 */
  --my-logo:   url("https://내서버주소/system/media_attachments/files/.../로고_밝음.png");        /* ④ 사이트 로고 */
  --my-bg:     url("https://내서버주소/system/media_attachments/files/.../배경_밝음.jpg");        /* ⑤ 사이트 뒷배경 */
}

/* ── [어두움] 유사 트위터 스킨(어두움)에서 쓸 값 ── */
body.theme-mastodon-bird-ui-dark {
  --my-color: #1d9bf0;
  --my-on-color: #ffffff;
  --my-avatar: url("https://내서버주소/system/media_attachments/files/.../기본프로필_어두움.png");
  --my-header: url("https://내서버주소/system/media_attachments/files/.../기본헤더_어두움.png");
  --my-logo:   url("https://내서버주소/system/media_attachments/files/.../로고_어두움.png");
  --my-bg:     url("https://내서버주소/system/media_attachments/files/.../배경_어두움.jpg");
}


/* ================================================================
   여기부터는 고치지 않아도 돼요
   ================================================================ */

/* ① 사이트 컬러 */
body.theme-mastodon-bird-ui-light,
body.theme-mastodon-bird-ui-dark {
  --color-brand-longwhile: var(--my-color);
  --color-link: var(--my-color);
  --color-accent: var(--my-color);
  --color-accent-dark: var(--my-color);
  --color-accent-dark-50: var(--my-color);
  --color-column-link-hover: var(--my-color);
  --color-post-button: var(--my-color);
  --color-sent-message-background: var(--my-color);
  --color-on-brand: var(--my-on-color);
  --color-post-button-text: var(--my-on-color);
}

/* ② 기본 프로필사진 — 프로필사진을 올리지 않은 계정만 (직접 올린 사진은 그대로) */
body.theme-mastodon-bird-ui-light img[src*="i_missing.png"],
body.theme-mastodon-bird-ui-dark img[src*="i_missing.png"] {
  object-position: -99999px -99999px;   /* 원래 기본 그림을 숨기고 */
  background: var(--my-avatar) center / cover no-repeat;  /* 새 그림을 보여줌 */
}

/* ③ 기본 헤더사진 — 헤더를 올리지 않은 계정만 */
body.theme-mastodon-bird-ui-light img[src*="h_missing.png"],
body.theme-mastodon-bird-ui-dark img[src*="h_missing.png"] {
  object-position: -99999px -99999px;
  background: var(--my-header) center / cover no-repeat;
}

/* ④ 사이트 로고 (왼쪽 메뉴 위 로고, 글 상세 화면의 작은 로고) */
body.theme-mastodon-bird-ui-light img.logo--wordmark,
body.theme-mastodon-bird-ui-dark img.logo--wordmark,
body.theme-mastodon-bird-ui-light img.logo--icon,
body.theme-mastodon-bird-ui-dark img.logo--icon {
  object-position: -99999px -99999px;
  background: var(--my-logo) center / contain no-repeat;
}

/* ⑤ 사이트 뒷배경 (가운데 글 목록 바깥쪽 여백에 보임) */
body.theme-mastodon-bird-ui-light.layout-single-column,
body.theme-mastodon-bird-ui-dark.layout-single-column,
body.theme-mastodon-bird-ui-light.layout-multiple-columns,
body.theme-mastodon-bird-ui-dark.layout-multiple-columns {
  background-image: var(--my-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


/* ================================================================
   한참 에디션 — 왼쪽 메뉴 이름·아이콘 바꾸기 (유사 트위터 스킨 밝음/어두움 공통)
   붙이는 곳: 관리자 → 설정 → 서버 설정 → 외관 → "사용자 정의 CSS"
              (스킨 꾸미기 CSS 아래에 이어서 붙이면 돼요)

   [설정] 칸에서 메뉴마다 세 줄을 고쳐요.
     --n-OOO   : 메뉴 이름 (따옴표 안)
     --i-OOO   : 평소 아이콘 그림 주소 (선만 있는 모양)
     --a-OOO   : 눌린(지금 보고 있는) 메뉴의 아이콘 주소 (속이 찬 모양) — 없으면 이 줄을 지우세요.
                 지우면 평소 아이콘이 그대로 쓰이고, 글자만 굵어져요.

   · 아이콘은 배경이 투명한 PNG/SVG. 모양(윤곽)만 쓰이고 색은 스킨의 메뉴 글자색을 그대로 따라가요.
   · 그림은 이 마스토돈 서버에 올린 그림 주소여야 해요.
   · 주의: 아이콘 주소를 안 넣은 채로 두면 그 아이콘이 사라져요.
     아이콘을 안 바꿀 메뉴는 --i-OOO, --a-OOO 두 줄을 지우고, 아래쪽 그 메뉴의 "아이콘" 줄도 지우세요.
     이름을 안 바꿀 메뉴는 아래쪽 그 메뉴의 "이름" 두 줄을 지우세요.
   ================================================================ */

/* ── [설정] ── */
body {
  /* 홈 */
  --n-home: "홈";
  --i-home: url("https://내서버주소/system/media_attachments/files/.../home.png");
  --a-home: url("https://내서버주소/system/media_attachments/files/.../home_눌림.png");

  /* 퍼블릭 툿 */
  --n-public: "퍼블릭 툿";
  --i-public: url("https://내서버주소/system/media_attachments/files/.../public.png");
  --a-public: url("https://내서버주소/system/media_attachments/files/.../public_눌림.png");

  /* 알림 */
  --n-notifications: "알림";
  --i-notifications: url("https://내서버주소/system/media_attachments/files/.../notifications.png");
  --a-notifications: url("https://내서버주소/system/media_attachments/files/.../notifications_눌림.png");

  /* 답장할 멘션 */
  --n-pending: "답장할 멘션";
  --i-pending: url("https://내서버주소/system/media_attachments/files/.../pending.png");
  --a-pending: url("https://내서버주소/system/media_attachments/files/.../pending_눌림.png");

  /* 채팅 */
  --n-chat: "채팅";
  --i-chat: url("https://내서버주소/system/media_attachments/files/.../chat.png");
  --a-chat: url("https://내서버주소/system/media_attachments/files/.../chat_눌림.png");

  /* 전체 채팅 */
  --n-chatall: "전체 채팅";
  --i-chatall: url("https://내서버주소/system/media_attachments/files/.../chatall.png");
  --a-chatall: url("https://내서버주소/system/media_attachments/files/.../chatall_눌림.png");

  /* 예약 게시물 */
  --n-scheduled: "예약 게시물";
  --i-scheduled: url("https://내서버주소/system/media_attachments/files/.../scheduled.png");
  --a-scheduled: url("https://내서버주소/system/media_attachments/files/.../scheduled_눌림.png");

  /* 북마크 */
  --n-bookmarks: "북마크";
  --i-bookmarks: url("https://내서버주소/system/media_attachments/files/.../bookmarks.png");
  --a-bookmarks: url("https://내서버주소/system/media_attachments/files/.../bookmarks_눌림.png");

  /* 리스트 */
  --n-lists: "리스트";
  --i-lists: url("https://내서버주소/system/media_attachments/files/.../lists.png");
  --a-lists: url("https://내서버주소/system/media_attachments/files/.../lists_눌림.png");

  /* 환경설정 */
  --n-settings: "환경설정";
  --i-settings: url("https://내서버주소/system/media_attachments/files/.../settings.png");
  --a-settings: url("https://내서버주소/system/media_attachments/files/.../settings_눌림.png");

  /* 계정 전환 */
  --n-switch: "계정 바꾸기";
  --i-switch: url("https://내서버주소/system/media_attachments/files/.../switch.png");
  --a-switch: url("https://내서버주소/system/media_attachments/files/.../switch_눌림.png");
}


/* ================================================================
   여기부터는 적용 규칙 (메뉴별)
   ================================================================ */

/* ── 홈 ── */
/* 이름 */
.navigation-panel .column-link[href="/home"] > span { font-size: 0; }
.navigation-panel .column-link[href="/home"] > span::after { content: var(--n-home); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/home"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-home) center / contain no-repeat !important; mask: var(--i-home) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/home"] svg.icon { -webkit-mask-image: var(--a-home, var(--i-home)) !important; mask-image: var(--a-home, var(--i-home)) !important; }
.ui__navigation-bar__item[href="/home"] svg { fill: transparent !important; background-color: currentColor; -webkit-mask: var(--i-home) center / contain no-repeat; mask: var(--i-home) center / contain no-repeat; }
.ui__navigation-bar__item.active[href="/home"] svg { -webkit-mask-image: var(--a-home, var(--i-home)); mask-image: var(--a-home, var(--i-home)); }

/* ── 퍼블릭 툿 ── */
/* 이름 */
.navigation-panel .column-link[href="/public"] > span { font-size: 0; }
.navigation-panel .column-link[href="/public"] > span::after { content: var(--n-public); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/public"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-public) center / contain no-repeat !important; mask: var(--i-public) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/public"] svg.icon { -webkit-mask-image: var(--a-public, var(--i-public)) !important; mask-image: var(--a-public, var(--i-public)) !important; }
.ui__navigation-bar__item[href="/public"] svg { fill: transparent !important; background-color: currentColor; -webkit-mask: var(--i-public) center / contain no-repeat; mask: var(--i-public) center / contain no-repeat; }
.ui__navigation-bar__item.active[href="/public"] svg { -webkit-mask-image: var(--a-public, var(--i-public)); mask-image: var(--a-public, var(--i-public)); }

/* ── 알림 ── */
/* 이름 */
.navigation-panel .column-link[href="/notifications"] > span { font-size: 0; }
.navigation-panel .column-link[href="/notifications"] > span::after { content: var(--n-notifications); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/notifications"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-notifications) center / contain no-repeat !important; mask: var(--i-notifications) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/notifications"] svg.icon { -webkit-mask-image: var(--a-notifications, var(--i-notifications)) !important; mask-image: var(--a-notifications, var(--i-notifications)) !important; }
.ui__navigation-bar__item[href="/notifications"] svg { fill: transparent !important; background-color: currentColor; -webkit-mask: var(--i-notifications) center / contain no-repeat; mask: var(--i-notifications) center / contain no-repeat; }
.ui__navigation-bar__item.active[href="/notifications"] svg { -webkit-mask-image: var(--a-notifications, var(--i-notifications)); mask-image: var(--a-notifications, var(--i-notifications)); }

/* ── 답장할 멘션 ── */
/* 이름 */
.navigation-panel .column-link[href="/pending-mentions"] > span { font-size: 0; }
.navigation-panel .column-link[href="/pending-mentions"] > span::after { content: var(--n-pending); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/pending-mentions"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-pending) center / contain no-repeat !important; mask: var(--i-pending) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/pending-mentions"] svg.icon { -webkit-mask-image: var(--a-pending, var(--i-pending)) !important; mask-image: var(--a-pending, var(--i-pending)) !important; }

/* ── 채팅 ── */
/* 이름 */
.navigation-panel .column-link[href="/messages"] > span,
.navigation-panel .column-link[href="/conversations"] > span { font-size: 0; }
.navigation-panel .column-link[href="/messages"] > span::after,
.navigation-panel .column-link[href="/conversations"] > span::after { content: var(--n-chat); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/messages"] svg.icon,
.navigation-panel .column-link[href="/conversations"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-chat) center / contain no-repeat !important; mask: var(--i-chat) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/messages"] svg.icon,
.navigation-panel .column-link.active[href="/conversations"] svg.icon { -webkit-mask-image: var(--a-chat, var(--i-chat)) !important; mask-image: var(--a-chat, var(--i-chat)) !important; }
.ui__navigation-bar__item[href="/messages"] svg { fill: transparent !important; background-color: currentColor; -webkit-mask: var(--i-chat) center / contain no-repeat; mask: var(--i-chat) center / contain no-repeat; }
.ui__navigation-bar__item.active[href="/messages"] svg { -webkit-mask-image: var(--a-chat, var(--i-chat)); mask-image: var(--a-chat, var(--i-chat)); }

/* ── 전체 채팅 ── */
/* 이름 */
.navigation-panel .column-link[href="/messages/all"] > span { font-size: 0; }
.navigation-panel .column-link[href="/messages/all"] > span::after { content: var(--n-chatall); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/messages/all"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-chatall) center / contain no-repeat !important; mask: var(--i-chatall) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/messages/all"] svg.icon { -webkit-mask-image: var(--a-chatall, var(--i-chatall)) !important; mask-image: var(--a-chatall, var(--i-chatall)) !important; }

/* ── 예약 게시물 ── */
/* 이름 */
.navigation-panel .column-link[href="/scheduled_statuses"] > span { font-size: 0; }
.navigation-panel .column-link[href="/scheduled_statuses"] > span::after { content: var(--n-scheduled); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/scheduled_statuses"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-scheduled) center / contain no-repeat !important; mask: var(--i-scheduled) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/scheduled_statuses"] svg.icon { -webkit-mask-image: var(--a-scheduled, var(--i-scheduled)) !important; mask-image: var(--a-scheduled, var(--i-scheduled)) !important; }

/* ── 북마크 ── */
/* 이름 */
.navigation-panel .column-link[href="/bookmarks"] > span { font-size: 0; }
.navigation-panel .column-link[href="/bookmarks"] > span::after { content: var(--n-bookmarks); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/bookmarks"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-bookmarks) center / contain no-repeat !important; mask: var(--i-bookmarks) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/bookmarks"] svg.icon { -webkit-mask-image: var(--a-bookmarks, var(--i-bookmarks)) !important; mask-image: var(--a-bookmarks, var(--i-bookmarks)) !important; }

/* ── 리스트 ── */
/* 이름 */
.navigation-panel .column-link[href="/lists"] > span { font-size: 0; }
.navigation-panel .column-link[href="/lists"] > span::after { content: var(--n-lists); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href="/lists"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-lists) center / contain no-repeat !important; mask: var(--i-lists) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href="/lists"] svg.icon { -webkit-mask-image: var(--a-lists, var(--i-lists)) !important; mask-image: var(--a-lists, var(--i-lists)) !important; }

/* ── 환경설정 ── */
/* 이름 */
.navigation-panel .column-link[href$="/settings/profile"] > span { font-size: 0; }
.navigation-panel .column-link[href$="/settings/profile"] > span::after { content: var(--n-settings); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .column-link[href$="/settings/profile"] svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-settings) center / contain no-repeat !important; mask: var(--i-settings) center / contain no-repeat !important; }
.navigation-panel .column-link.active[href$="/settings/profile"] svg.icon { -webkit-mask-image: var(--a-settings, var(--i-settings)) !important; mask-image: var(--a-settings, var(--i-settings)) !important; }

/* ── 계정 전환 ── */
/* 이름 */
.navigation-panel .navigation-panel__account-switch-link > span { font-size: 0; }
.navigation-panel .navigation-panel__account-switch-link > span::after { content: var(--n-switch); font-size: var(--font-size-heading, 18px); }
/* 아이콘 */
.navigation-panel .navigation-panel__account-switch-link svg.icon { fill: transparent !important; stroke: none !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--i-switch) center / contain no-repeat !important; mask: var(--i-switch) center / contain no-repeat !important; }