/* ════════════════════════════════════════════════════════════
   CARNOVELLA · Mastodon Custom CSS  —  v6
   다크 · Pretendard · 골드 / 왼쪽 메뉴·오른쪽 작성

   ⚠️ 기존 CSS 전부 지우고 통째로 붙여넣기 → 저장 → Ctrl+F5
   ════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --car-bg:#0f1010; --car-bg2:#141510;
  --car-panel:rgba(25,26,19,.85); --car-solid:#15160f; --car-input:rgba(0,0,0,.4);
  --car-white:#ece4cf; --car-gray:#c4bca3; --car-muted:#8f896f;
  --car-line:rgba(214,178,94,.17); --car-line2:rgba(214,178,94,.42);
  --car-amber:#d8b24e; --car-danger:#c75c4c;
  --car-ui:'Pretendard','Pretendard Variable','IBM Plex Sans KR',system-ui,-apple-system,sans-serif;
  --car-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ★ 마스토돈 내부 테마 변수 덮어쓰기 (모달·드롭다운 흰색 방지) */
  accent-color:#d8b24e; --highlight-text-color:#d8b24e;
  --modal-background-color:#15160f;
  --modal-background-variant-color:rgba(25,26,19,.94);
  --modal-border-color:rgba(214,178,94,.22);
  --dropdown-background-color:#15160f;
  --dropdown-border-color:rgba(214,178,94,.22);
  --background-color:#0f1010;
  --background-color-tint:rgba(20,21,16,.9);
  --background-border-color:rgba(214,178,94,.17);
  --surface-background-color:#141510;
  --surface-variant-background-color:rgba(25,26,19,.85);
  --on-surface-color:#ece4cf;
}

/* ─── 1. 바탕 (html까지: 로그인 아래 흰 공백 해결) ───────── */
html { background-color:var(--car-bg2) !important; }
body {
  background:
    repeating-linear-gradient(0deg, rgba(214,178,94,.022) 0 1px, transparent 1px 3px),
    radial-gradient(120% 85% at 50% -8%, rgba(214,178,94,.06), transparent 55%),
    linear-gradient(180deg, var(--car-bg), var(--car-bg2)) !important;
  background-attachment:fixed !important; min-height:100vh;
  color:var(--car-white) !important; font-family:var(--car-ui) !important;
  -webkit-font-smoothing:antialiased;
}
.ui,.columns-area,.columns-area__panels,.columns-area__panels__main,
.column,.getting-started,.getting-started__wrapper,
.public-layout,.about,.landing,.container,.container-alt,#mastodon { background:transparent !important; }

/* ─── 2. 표면: 흰색 영역 전부 어둡게 ──────────────────────── */
.column > .scrollable,.column-header,.column-header__wrapper,
.column-header__collapsible,.column-header__buttons,.column-back-button,
.ui__header,.tabs-bar,.tabs-bar__wrapper,
.drawer__inner,.compose-form,.compose-form__highlightable,
.compose-form__buttons-wrapper,.compose-panel,.reply-indicator,
.status,.detailed-status,.account,.notification,.dropdown-menu,
.account__header,.account__header__bar,.account__header__image,
.account__header__fields,.account__header__fields dl,.account__section-headline,
.column-inline-form,.column-search-header,.search,.scrollable,
.empty-column-indicator,.privacy-dropdown__dropdown,.language-dropdown__dropdown,
.emoji-mart-bar,.emoji-mart-search,.announcements,.account-card,.trends__item,.filter-form {
  background-color:var(--car-panel) !important;
  border-color:var(--car-line) !important; color:var(--car-white);
}

/* ─── 2b. 모달(팝업) 전부 어둡게 + 오버레이 ───────────────── */
.modal-root__modal,.dialog-modal,.dialog-modal__content,
.confirmation-modal,.confirmation-modal__container,.confirmation-modal__action-bar,
.boost-modal,.report-modal,.report-dialog-modal,.actions-modal,.compose-modal,
.interaction-modal,.safety-action-modal,.error-modal,.embed-modal,
.mute-modal,.block-modal,.onboarding-modal,.modal-root__container > div {
  background-color:var(--car-solid) !important;
  border-color:var(--car-line) !important; color:var(--car-white) !important;
}
.modal-root__overlay { background:rgba(10,11,11,.8) !important; }

/* ─── 2c. 설정 페이지 표(내보내기 등) 어둡게 ──────────────── */
table,.table,.table td,.table th,.table tbody tr,.table thead th,
.batch-table__row,.batch-table__toolbar,.dashboard__counters__item,.log-entry {
  background-color:var(--car-panel) !important;
  color:var(--car-white) !important; border-color:var(--car-line) !important;
}

/* 입력 필드 */
input:not([type=checkbox]):not([type=radio]):not([type=color]),
textarea,select,.search__input,
.compose-form .autosuggest-textarea__textarea,.compose-form .spoiler-input__input {
  background:var(--car-input) !important; color:var(--car-white) !important; border-color:var(--car-line) !important;
}
::placeholder { color:var(--car-muted) !important; }

/* ─── 3. 폰트 ──────────────────────────────────────────── */
body,.ui,.column,.status__content,.compose-form,.account,button,input,
textarea,select,.column-link,.column-header__title,.button,.tabs-bar__link,
.account__header__tabs__name,.display-name,.simple_form {
  font-family:var(--car-ui) !important; letter-spacing:0 !important; text-transform:none !important;
}
.column-header__title { font-weight:700; font-size:19px; }
.column-link { font-weight:600; font-size:16px; }
.button { font-weight:600; }
.status__content { font-weight:400; font-size:15.5px; line-height:1.65; }

/* ─── 4. 글자 색 (게시글·이름·라벨 크림색) ──────────────── */
body,.ui,.column,.status,.account,.detailed-status,.compose-form,.drawer,
.dropdown-menu,.notification,.simple_form,.form-container { color:var(--car-white); }
.status__content,.status__content p,.status__content *,
.display-name__html,.display-name strong,.display-name bdi,
.account__display-name,.account__display-name strong,
.status__display-name strong,.detailed-status__display-name strong,
.account__header__tabs__name h1,.account__header__tabs__name strong,
.account__header__account-note,.notification__message,.reply-indicator__content,
h1,h2,h3,h4,.simple_form label,.simple_form .label-input label,.simple_form .hint,
.lead,.form-container p,table td,table th { color:var(--car-white) !important; }
.display-name__account,.status__relative-time,time,
.account__header__tabs__name h1 small { color:var(--car-muted) !important; }
a,.status__content a,.mention,.hashtag { color:var(--car-amber) !important; }

/* ─── 5. 보라색 → 골드 / 아이콘 가시성 ──────────────────── */
.icon-button { color:var(--car-muted) !important; }
.icon-button:hover,.icon-button.active { color:var(--car-amber) !important; }
.search__icon .icon,.search .icon-button,.drawer__search .icon,
.status__action-bar .icon-button,.detailed-status__action-bar .icon-button,
.column-back-button,.column-header__back-button,
.column-back-button .icon,.column-header__back-button .icon,
.column-link__icon,.column-header__icon { color:var(--car-muted) !important; }
.status__action-bar .icon-button:hover,.column-back-button:hover { color:var(--car-amber) !important; }
.privacy-dropdown.active .privacy-dropdown__value,.privacy-dropdown__value,
.compose-form .dropdown-button,.text-button,.link-button,
.account__section-headline a.active,.account__section-headline button.active,
.notification__filter-bar button.active,.account-role,.verified__mark,
.reply-indicator__cancel { color:var(--car-amber) !important; }
.account__section-headline a.active::after,
.account__section-headline button.active::after { border-color:var(--car-amber) !important; }
.loading-bar { background-color:var(--car-amber) !important; }
*:focus-visible { outline-color:var(--car-amber) !important; }
.radio-button.checked .radio-button__input,
.check-box.checked .check-box__input { border-color:var(--car-amber) !important; background:var(--car-amber) !important; }

/* ─── 6. 레이아웃: 메뉴 왼쪽 / 작성·검색 오른쪽 ──────────── */
.columns-area__panels__pane--navigational { order:-1 !important; }
.columns-area__panels__main { order:0 !important; }
.columns-area__panels__pane--compositional { order:1 !important; }

/* ─── 7. 불필요 요소 숨김 ──────────────────────────────── */
/* 한국어(언어/번역) */
.compose-form .language-dropdown,.translate-button,
.status__content__translate-button { display:none !important; }
/* 하단 footer 링크 (여러 위치 대응) */
.link-footer,.getting-started__footer,
.navigation-panel .link-footer,.compose-panel .link-footer,
.columns-area__panels__pane .link-footer,
.navigation-panel__legal,.compose-panel__inner > .link-footer { display:none !important; }

/* ─── 8. 디자인 보강 ──────────────────────────────────── */
.account__avatar,img.account__avatar,.account__header__avatar .account__avatar {
  border-radius:0 !important; border:1px solid var(--car-line2) !important;
}
.account__header__image {
  background-image:
    repeating-linear-gradient(0deg, rgba(214,178,94,.03) 0 1px, transparent 1px 4px),
    radial-gradient(120% 140% at 50% 0%, rgba(214,178,94,.10), transparent 60%) !important;
  border-bottom:1px solid var(--car-line2) !important;
}
.account__header__image img { opacity:0 !important; }
.column-link { color:var(--car-gray) !important; }
.column-link:hover { color:var(--car-white) !important; background:rgba(255,255,255,.03); }
.column-link.active {
  color:var(--car-white) !important; box-shadow:inset 3px 0 0 var(--car-amber);
  background:rgba(214,178,94,.07) !important;
}
.column-link.active .column-link__icon,.column-link.active .icon { color:var(--car-amber) !important; }
.navigation-panel hr { border-color:var(--car-line) !important; }
.account-role { border:1px solid var(--car-line2) !important; background:rgba(214,178,94,.08) !important; border-radius:0 !important; }
.button,.compose-form__highlightable,.search__input,.dropdown-menu,
.card,.media-gallery,.media-gallery__item { border-radius:0 !important; }

/* ─── 9. 버튼 (보라 → 크림) ────────────────────────────── */
.button,button.button,.simple_form .button,.button.button--block,[type=submit] {
  background:var(--car-white) !important; color:#14150f !important;
  border:1px solid var(--car-white) !important; transition:.15s;
}
.button:hover,.simple_form .button:hover,[type=submit]:hover {
  background:transparent !important; color:var(--car-white) !important;
}
.button.button-secondary,.button-tertiary {
  background:transparent !important; color:var(--car-white) !important; border-color:var(--car-line2) !important;
}

/* ─── 10. 로그인/공개 페이지 + 로고 ────────────────────── */
.logo-container .logo,.public-layout .logo,.brand .logo,h1 .logo,.logo--icon,
.navigation-panel__logo .logo,.navigation-panel__logo svg,
.column-link--logo svg,.column-link--logo .logo,
.ui__header__logo .logo,.ui__header__logo svg { display:none !important; }
.logo-container { position:relative; text-align:center; }
.logo-container::after {
  content:"CARNOVELLA"; display:block; font-family:var(--car-mono);
  font-weight:600; font-size:22px; letter-spacing:.26em; color:var(--car-white); padding:10px 0;
}
.navigation-panel__logo,.ui__header__logo { position:relative; }
.navigation-panel__logo::after,.ui__header__logo::after {
  content:"CARNOVELLA"; display:block; font-family:var(--car-mono);
  font-weight:600; font-size:20px; letter-spacing:.24em; color:var(--car-white);
  text-align:center; padding:14px 10px;
}
.hero-widget__img,.hero-widget__img img,.about__header__hero,
.about__header__hero img,.server-banner__hero { display:none !important; }

/* ─── 12. 프로필 편집 페이지 + 토글 (v7 추가) ───────────── */
/* 편집 모드 헤더 업로드 영역의 흰색 제거 */
.account__header__image,.account__header__image .parallax,
[class*="header__image"],.image-loader,.image-loader__preview-canvas,
.image-loader__preview-canvas + *,.setting-toggle {
  background-color:var(--car-bg2) !important;
}
/* 흰 하이라이트(인증 링크 안내 등) */
mark,.hint mark,.fields-group mark,.recommended {
  background:rgba(214,178,94,.12) !important; color:var(--car-white) !important;
}
.hint a,.fields-group a { color:var(--car-amber) !important; background:transparent !important; }
/* 토글 스위치 (흰색 → 어둡게 / 켜짐 골드) */
.react-toggle-track { background:rgba(0,0,0,.45) !important; border:1px solid var(--car-line) !important; }
.react-toggle--checked .react-toggle-track { background:var(--car-amber) !important; }
.react-toggle-thumb { border-color:var(--car-line2) !important; background:var(--car-white) !important; }
/* 편집 폼 카드 표면 */
.fields-group,.fields-row,.input.with_block_label,
.app-form__section,.app-form fieldset { background-color:transparent !important; color:var(--car-white) !important; }

/* ─── 13. 양옆 컬럼 테마 배경 (QUANTUM DIVE 느낌 · 골드/다크) ─ */
/* 왼쪽 메뉴 컬럼: 미세 격자(회로 느낌) + 좌하단 골드 글로우 */
.columns-area__panels__pane--navigational .columns-area__panels__pane__inner,
.navigation-panel {
  background:
    radial-gradient(90% 55% at 0% 100%, rgba(214,178,94,.13), transparent 62%),
    repeating-linear-gradient(0deg,  rgba(214,178,94,.03) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(214,178,94,.03) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, #16170f, #0b0c07) !important;
  border-right: 1px solid var(--car-line);
}
/* 오른쪽 작성 컬럼: 우하단 골드 글로우 + 가로 스캔라인 */
.columns-area__panels__pane--compositional .columns-area__panels__pane__inner {
  background:
    radial-gradient(75% 45% at 100% 100%, rgba(214,178,94,.11), transparent 60%),
    repeating-linear-gradient(0deg, rgba(214,178,94,.025) 0 1px, transparent 1px 24px),
    linear-gradient(200deg, #141510, #0b0c07) !important;
  border-left: 1px solid var(--car-line);
}
/* 로고 영역에 살짝 여백·하단 골드 라인 (엠블럼 자리) */
.navigation-panel__logo::after {
  border-bottom: 1px solid var(--car-line2);
  padding-bottom: 18px; margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════
   v9 추가: footer 제거 / 양옆 이미지-레디 캔버스 / 메뉴 정리
   ════════════════════════════════════════════════════════════ */

/* ─── 14. footer 완전 제거 (F12로 확인된 클래스) ─────────── */
footer[role="contentinfo"],
[class*="link_footer__wrapper"],
[class*="link-footer"],
.link-footer { display:none !important; }

/* ─── 15. 양옆 컬럼 = 동일한 "이미지 적용 가능" 넓은 캔버스 ── */
/*  ▣ 지금은 단색 다크. 이미지를 깔려면:
    아래 각 블록에서 '단색' 줄을 지우고 '이미지' 줄의 주석을 푼 뒤
    url('...') 안에 Catbox/Imgur 직접 링크를 넣으세요.            */

/* (왼쪽 메뉴 컬럼) */
.columns-area__panels__pane--navigational .columns-area__panels__pane__inner,
.columns-area__panels__pane--navigational .navigation-panel {
  background:#0d0e08 !important;                                   /* 단색 */
  /* background:#0d0e08 url('여기에_왼쪽_이미지_URL') center/cover no-repeat !important;  *//* 이미지 */
  border-right:1px solid var(--car-line);
}
/* (오른쪽 작성 컬럼) */
.columns-area__panels__pane--compositional .columns-area__panels__pane__inner {
  background:#0d0e08 !important;                                   /* 단색 */
  /* background:#0d0e08 url('여기에_오른쪽_이미지_URL') center/cover no-repeat !important;  *//* 이미지 */
  border-left:1px solid var(--car-line);
}

/* 메뉴/작성·검색이 이미지 위에서도 잘 보이게 */
.column-link { text-shadow:0 1px 3px rgba(0,0,0,.55); }
.compose-form,.search__input { background-color:rgba(13,14,8,.72) !important; }

/* ─── 16. 메뉴 정리: 아래 둘만 숨김 (나머지 10개 유지) ──── */
/*  부분일치(href*=)로 잡아 경로가 /explore, /web/explore 어느 쪽이든 숨김 */
.column-link[href*="explore"],          /* 유행 중 */
.column-link[href*="followed_tags"]     /* 팔로우 중인 해시태그 */
{ display:none !important; }

/* ════════════════════════════════════════════════════════════
   v11 추가: 남은 보라색 정리 (작성칩·카운터·더보기·답글맥락)
   ════════════════════════════════════════════════════════════ */

/* 작성창 '공개, 인용 허용' 칩 보라 → 골드 */
.privacy-dropdown__value,.privacy-dropdown__value .icon,
.privacy-dropdown.active .privacy-dropdown__value,
.compose-form .dropdown-button,.compose-form .dropdown-button .icon {
  color:var(--car-amber) !important; border-color:var(--car-line2) !important;
}

/* 게시 옆 글자수(500) 카운터 */
.character-counter,[class*="character-counter"],[class*="character_counter"] {
  color:var(--car-muted) !important;
}

/* 더 보기 등 모든 좌측 메뉴 링크/버튼 보라 → 회색 (활성은 크림) */
.column-link,[class*="column-link"],
.navigation-panel a,.navigation-panel button { color:var(--car-gray) !important; }
.column-link.active,[class*="column-link"].active { color:var(--car-white) !important; }

/* 답글 맥락 'X 님에게' / 인용 표시 보라 → 골드 */
.status__prepend,.status__prepend a,.status__prepend span,
.status__prepend__icon,.reply-indicator__display-name a,
[class*="status__prepend"] a { color:var(--car-amber) !important; }

/* '한국어'(언어) 칩 숨김 — CSS모듈 대응 부분일치 */
.compose-form [class*="language"],
[class*="language_dropdown"],[class*="language-dropdown"] { display:none !important; }

/* ════════════════════════════════════════════════════════════
   v12 추가: 작성 하이라이트·돋보기·알림탭·숫자·팔로우아이콘 보라 제거
   ════════════════════════════════════════════════════════════ */

/* 작성창 보라 하이라이트 테두리/글로우 → 골드 라인 */
.compose-form__highlightable {
  border:1px solid var(--car-line) !important; box-shadow:none !important;
}
.compose-form__highlightable:focus-within,
.compose-form .autosuggest-textarea__textarea:focus {
  border-color:var(--car-line2) !important; box-shadow:none !important; outline:none !important;
}

/* 검색 돋보기 아이콘 */
.search__icon,.search__icon .icon,.search .icon,
[class*="search"] .icon-search,[class*="search"] svg.icon { color:var(--car-muted) !important; }

/* 알림 탭(모두/멘션) 보라 → 골드 */
.notification__filter-bar button,.notification__filter-bar a,
[class*="filter-bar"] button,[class*="filter-bar"] a { color:var(--car-muted) !important; }
.notification__filter-bar button.active,.notification__filter-bar a.active,
[class*="filter-bar"] .active { color:var(--car-amber) !important; }
.notification__filter-bar button.active::after,
[class*="filter-bar"] .active::after,
.notification__filter-bar button.active::before {
  border-color:var(--car-amber) !important; background-color:var(--car-amber) !important;
}

/* 게시물 액션 숫자(보라/안 보임) → 보이는 회색 */
.icon-button__counter,.status__action-bar__counter,
.status__action-bar__counter__label,.icon-button .icon-button__counter,
[class*="counter__label"] { color:var(--car-muted) !important; }

/* 팔로우/가입 등 알림 아이콘 보라 → 골드 */
.notification-group__icon,.notification-group__icon .icon,
.notification__icon,.notification__icon .icon,
.notification-group .icon,.notification__favourite-icon-wrapper,
[class*="notification"] [class*="__icon"] .icon,
[class*="notification-group__icon"] { color:var(--car-amber) !important; }

/* 알림 좌측 미읽음 강조 바 보라 → 골드 */
.notification-group--unread,.notification--unread,
.notification-ungrouped--unread,[class*="unread"] {
  border-inline-start-color:var(--car-amber) !important;
}
[class*="notification"][class*="unread"]::before { background-color:var(--car-amber) !important; }