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

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

/* ── [밝음] 유사 트위터 스킨(밝음)에서 쓸 값 ── */
body.theme-mastodon-bird-ui-light {
  --my-color: #1d9bf0;          /* ① 사이트 컬러 (버튼·링크·강조색) */
  --my-on-color: #ffffff;       /*    사이트 컬러 위 글자색 (컬러가 밝으면 #000000) */
  --my-bg:     url("/bg_grayoutmain_white.jpg");        /* ⑤ 사이트 뒷배경 */
}

body.theme-mastodon-bird-ui-light {
  background: var(--my-bg) center / cover fixed no-repeat !important;
}

/* 좌우 회색 막 제거 */
body.theme-mastodon-bird-ui-light .ui,
body.theme-mastodon-bird-ui-light .columns-area,
body.theme-mastodon-bird-ui-light .columns-area__panels,
body.theme-mastodon-bird-ui-light .columns-area__panels__pane,
body.theme-mastodon-bird-ui-light .columns-area__panels__pane__inner,
body.theme-mastodon-bird-ui-light .navigation-panel {
  background: transparent !important;
}

/* 가운데 타임라인만 흰색 80% */
body.theme-mastodon-bird-ui-light .columns-area__panels__main,
body.theme-mastodon-bird-ui-light .columns-area__panels__main .column {
  background: rgba(255, 255, 255, 0.8) !important;
}

/* ── [어두움] 유사 트위터 스킨(어두움)에서 쓸 값 ── */
body.theme-mastodon-bird-ui-dark {
  --my-color: #1d9bf0;
  --my-on-color: #ffffff;
  --my-bg:     url("/bg_grayoutmain_black.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);
}

/* ================================================================
   한참 에디션 — 왼쪽 메뉴 이름·아이콘 바꾸기 (유사 트위터 스킨 밝음/어두움 공통)
   붙이는 곳: 관리자 → 설정 → 서버 설정 → 외관 → "사용자 정의 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; }


body.theme-mastodon-bird-ui-light #mastodon,
body.theme-mastodon-bird-ui-light .app-holder,
body.theme-mastodon-bird-ui-light .ui,
body.theme-mastodon-bird-ui-light .columns-area,
body.theme-mastodon-bird-ui-light .columns-area--mobile,
body.theme-mastodon-bird-ui-light .columns-area__panels,
body.theme-mastodon-bird-ui-light .columns-area__panels__pane,
body.theme-mastodon-bird-ui-light .columns-area__panels__pane__inner,
body.theme-mastodon-bird-ui-light .navigation-panel,
body.theme-mastodon-bird-ui-light .compose-panel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.link-footer {
  display: none !important;
}

.admin-wrapper .sidebar .logo,
.admin-wrapper .sidebar a.logo {
  display: block !important;
  width: 120px !important;
  height: 50px !important;
  background: url("https://grayout.xyz/settings_logo.png") no-repeat left center / contain !important;
}

.admin-wrapper .sidebar img.logo,
.admin-wrapper .sidebar .logo img {
  content: url("https://grayout.xyz/settings_logo.png") !important;
  width: 140px !important;
  height: auto !important;
}


/* 설정 화면 배경 이미지 제거 */
body.admin,
body.admin .admin-wrapper,
body.admin .admin-wrapper .content-wrapper,
body.admin .admin-wrapper .content {
  background: #ffffff !important;
  background-image: none !important;
}

#user_settings_theme option:not([value="mastodon-bird-ui-light"]) {
  display: none;
}