/* ===== CHRONOS EPOCH 완성본 v3 ===== */
/* ▼ 타임라인 투명도만 조절: 0(배경 다 보임) ~ 1(불투명) ▼ */
:root {
  --tl-dark: 0.86;
  --tl-light: 0.80;
}

/* ===== 로고 (가운데, 테마별) ===== */
a#skip-link-target-nav .logo,
a#skip-link-target-nav svg,
a#skip-link-target-nav img { display: none !important; }
a#skip-link-target-nav {
  display: block !important;
  height: 160px;
  padding: 120px 120px;
  background-image: url(/chronos/logo-dark.png) !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
[data-color-scheme="light"] a#skip-link-target-nav { background-image: url(/chronos/logo-light.png) !important; }
@media (prefers-color-scheme: light) {
  html:not([data-color-scheme]) a#skip-link-target-nav,
  [data-color-scheme="auto"] a#skip-link-target-nav { background-image: url(/chronos/logo-light.png) !important; }
}

/* ===== 배경 이미지 (화면 전체, 고정, 테마별) ===== */
body.app-body {
  background-image: url(/chronos/bg-dark.webp);
  background-size: cover; background-position: center;
  background-attachment: fixed; background-repeat: no-repeat;
}
[data-color-scheme="light"] body.app-body { background-image: url(/chronos/bg-light.webp); }
@media (prefers-color-scheme: light) {
  html:not([data-color-scheme]) body.app-body,
  [data-color-scheme="auto"] body.app-body { background-image: url(/chronos/bg-light.webp); }
}

/* ===== 모든 바깥 칸·바탕 투명 (배경 비침) ===== */
.columns-area__panels,
.columns-area__panels__pane,
.columns-area__panels__pane__inner,
.columns-area, .columns-area__panels__main, .column,
.navigation-panel,
.compose-panel, .compose-panel .compose-form,
.column-link,
.drawer, .drawer__pager, .drawer__inner, .drawer__inner__mastodon,
.getting-started { background: transparent !important; }

/* ===== 메뉴 글씨 (다크: 밝게 / 라이트: 남색) ===== */
.navigation-panel .column-link,
.navigation-panel .column-link__icon,
.navigation-panel .icon {
  color: #e8f0ff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
[data-color-scheme="light"] .navigation-panel .column-link,
[data-color-scheme="light"] .navigation-panel .column-link__icon,
[data-color-scheme="light"] .navigation-panel .icon {
  color: #14203a !important;
  text-shadow: 0 1px 3px rgba(239, 243, 249, 0.6);
}
@media (prefers-color-scheme: light) {
  html:not([data-color-scheme]) .navigation-panel .column-link,
  html:not([data-color-scheme]) .navigation-panel .column-link__icon,
  html:not([data-color-scheme]) .navigation-panel .icon,
  [data-color-scheme="auto"] .navigation-panel .column-link,
  [data-color-scheme="auto"] .navigation-panel .column-link__icon,
  [data-color-scheme="auto"] .navigation-panel .icon {
    color: #14203a !important;
    text-shadow: 0 1px 3px rgba(239, 243, 249, 0.6);
  }
}

/* ===== 내용 칸에만 색 (안쪽은 전부 이 색을 따라감) =====
   .scrollable = 타임라인·타래·알림·프로필 등 모든 내용이 담기는 스크롤 칸
   .column-header__wrapper = 각 칸 상단 제목줄
   .notification__filter-bar = 알림의 '모두/멘션' 탭 */
.scrollable,
.column-header__wrapper,
.notification__filter-bar,
.notification__filter-bar button {
  background-color: rgba(18, 23, 39, var(--tl-dark)) !important;
}
[data-color-scheme="light"] .scrollable,
[data-color-scheme="light"] .column-header__wrapper,
[data-color-scheme="light"] .notification__filter-bar,
[data-color-scheme="light"] .notification__filter-bar button {
  background-color: rgba(239, 243, 249, var(--tl-light)) !important;
}
@media (prefers-color-scheme: light) {
  html:not([data-color-scheme]) .scrollable,
  html:not([data-color-scheme]) .column-header__wrapper,
  html:not([data-color-scheme]) .notification__filter-bar,
  html:not([data-color-scheme]) .notification__filter-bar button,
  [data-color-scheme="auto"] .scrollable,
  [data-color-scheme="auto"] .column-header__wrapper,
  [data-color-scheme="auto"] .notification__filter-bar,
  [data-color-scheme="auto"] .notification__filter-bar button {
    background-color: rgba(239, 243, 249, var(--tl-light)) !important;
  }
}

/* ===== 넓은 화면: 간격·메뉴 글씨 ===== */
@media screen and (min-width: 1175px) {
  .columns-area__panels { gap: 10px; }
  .columns-area__panels__pane--navigational { max-width: 320px; }
  .navigation-panel .column-link {
    font-size: 22px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .navigation-panel .column-link .icon {
    width: 26px;
    height: 26px;
  }
}

/* 프로필의 가입일 숨기기 */
._comp_account_header__numberFields > li:has(button) {
  display: none !important;
}

/* ===== 프로필 필드: 한 줄에 하나씩, 라벨 + 내용 ===== */
[class*="_comp_account_header__fieldList"] {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
[class*="_comp_account_header__fieldList"] > * {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* 라벨: 왼쪽에 같은 폭으로 줄 맞춤 */
[class*="_comp_account_header__fieldList"] dt {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  flex: 0 0 7em !important;
  width: 7em !important;
  height: auto !important;
  opacity: 1 !important;
  clip: auto !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
/* 내용: 남는 폭을 쓰고, 넘치면 … */
[class*="_comp_account_header__fieldList"] dd {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}