:root {
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-pill: 999px;
  --ui-shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.18);
  --ui-shadow-line: 0 0 0 1px color-mix(in srgb, var(--app-point-soft, #d1a054) 16%, transparent);
  --ui-border-elevated: 1px solid color-mix(in srgb, #ffffff 22%, var(--app-point, var(--nav, #0f3e66)) 26%);
  --ui-shadow-elevated:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 8px 22px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --ui-shadow-elevated-hover:
    0 22px 54px rgba(0, 0, 0, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  --ui-surface-bg: color-mix(in srgb, var(--surface-bg, #ffffff) 94%, var(--app-point-highlight, rgba(15, 62, 102, 0.08)) 6%);
  --ui-surface-border: color-mix(in srgb, var(--line, #e5e7eb) 74%, var(--app-point-soft, #d1a054) 26%);
  --ui-muted-border: color-mix(in srgb, var(--line, #e5e7eb) 88%, transparent);
  --text-secondary: color-mix(in srgb, var(--ink, #0f172a) 58%, transparent);
  --toolbar-item-color: color-mix(in srgb, var(--ink, #0f172a) 60%, transparent);
  --toolbar-item-color-strong: color-mix(in srgb, var(--ink, #0f172a) 82%, transparent);
  --toolbar-track-color: color-mix(in srgb, var(--ink, #0f172a) 12%, transparent);
  --toolbar-slider-fill-color: color-mix(in srgb, var(--app-point, var(--nav, #0f3e66)) 76%, var(--ink, #0f172a) 24%);
  --toolbar-slider-thumb-color: var(--app-point, var(--nav, #0f3e66));
  --toolbar-opacity: 0.62;
  --ui-hover-bg: color-mix(in srgb, var(--ui-surface-bg) 80%, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 20%);
  --ui-active-bg: color-mix(in srgb, var(--ui-surface-bg) 66%, var(--app-point-highlight, rgba(15, 62, 102, 0.18)) 34%);
  --ui-card-bg-dark: color-mix(in srgb, var(--app-dark-surface, #202d3d) 94%, var(--app-dark-bg, #111827) 6%);
  --ui-card-border-dark: color-mix(in srgb, var(--app-dark-border, #334960) 84%, var(--app-point-soft, #d1a054) 16%);
}

@supports not (background: color-mix(in srgb, #000 0%, #fff 100%)) {
  :root {
    --ui-surface-bg: var(--surface-bg, #ffffff);
    --ui-surface-border: var(--line, #e5e7eb);
    --ui-muted-border: var(--line, #e5e7eb);
    --ui-hover-bg: var(--surface-bg, #ffffff);
    --ui-active-bg: var(--surface-bg, #ffffff);
    --ui-shadow-line: 0 0 0 1px rgba(15, 62, 102, 0.12);
    --ui-card-bg-dark: var(--app-dark-surface, #202d3d);
    --ui-card-border-dark: var(--app-dark-border, #334960);
  }

  body.app-dark-mode {
    --ui-surface-bg: var(--app-dark-surface, #202d3d);
    --ui-surface-border: var(--app-dark-border, #334960);
    --ui-muted-border: var(--app-dark-border, #334960);
    --ui-hover-bg: var(--app-dark-surface, #202d3d);
    --ui-active-bg: var(--app-dark-surface, #202d3d);
  }

  body.page-bible .context-note-popover.popup-panel-standard {
    background: var(--ui-surface-bg) !important;
    border-color: var(--ui-surface-border) !important;
    box-shadow:
      0 24px 46px rgba(15, 23, 42, 0.18),
      0 10px 22px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.42) !important;
  }

  body.page-bible:is(.reader-dark-mode, .app-dark-mode) .context-note-popover.popup-panel-standard {
    background: var(--ui-surface-bg) !important;
    border-color: var(--ui-surface-border) !important;
    box-shadow:
      0 28px 58px rgba(0, 0, 0, 0.4),
      0 12px 26px rgba(0, 0, 0, 0.26),
      0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  }
}

body.page-confession {
  --confession-shell-width: min(100%, 360px);
  --confession-reading-frame-width: min(100%, 288px);
  --reader-head-gap: 12px;
  --reader-head-margin-bottom: 18px;
  --reader-icon-button-size: 40px;
  --reader-action-gap: 10px;
  --reader-panel-padding: 18px;
  --reader-panel-padding-compact: 12px;
}

body.page-bible {
  --reader-icon-button-size: 40px;
  --reader-action-gap: 10px;
  --reader-panel-padding: 18px;
  --reader-panel-padding-compact: 12px;
}

@media (min-width: 481px) and (max-width: 560px) {
  body.page-confession {
    --confession-shell-width: min(100%, 456px);
    --confession-reading-frame-width: min(100%, 384px);
  }
}

@media (min-width: 561px) {
  body.page-confession {
    --confession-shell-width: min(100%, 760px);
    --confession-reading-frame-width: min(100%, 640px);
  }
}

body.page-confession .confession-tab-shell {
  display: grid;
  gap: 14px;
}

body.page-confession .confession-toolbar,
body.page-confession .confession-reader-tools,
body.page-confession .confession-reader {
  width: var(--confession-shell-width) !important;
  max-width: var(--confession-shell-width) !important;
  margin-inline: auto !important;
}

body.page-confession .confession-toolbar {
  min-height: 48px;
}

body.page-confession .confession-reader-tools {
  min-height: 44px;
}

body.page-confession .confession-reader {
  margin-bottom: 18px;
}

body.page-confession .confession-version-wrap,
body.page-confession .confession-content,
body.page-confession .confession-block,
body.page-confession .confession-ordered,
body.page-confession .confession-paragraphs {
  width: 100%;
  max-width: 100%;
}

body.page-confession .confession-version-wrap,
body.page-confession .confession-content {
  display: flex;
  justify-content: center;
}

body.page-confession .confession-version-chips,
body.page-confession .confession-block {
  width: var(--confession-reading-frame-width) !important;
  max-width: var(--confession-reading-frame-width) !important;
  margin-inline: auto;
}

@media (min-width: 821px) {
  .topbar .nav-main {
    gap: 18px;
  }

  .topbar .nav-main a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 9px 0 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--reader-text, var(--ink, #0f172a));
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 1;
    transition:
      color 0.18s ease,
      border-color 0.18s ease;
  }

  .topbar .nav-main a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 999px;
    background: var(--app-point-soft, #d1a054);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
  }

  .topbar .nav-main a:hover,
  .topbar .nav-main a:focus-visible {
    background: transparent;
    color: var(--app-point, var(--nav));
    box-shadow: none;
  }

  .topbar .nav-main a:hover::after,
  .topbar .nav-main a:focus-visible::after,
  .topbar .nav-main a.active::after {
    transform: scaleX(1);
  }

  .topbar .nav-main a.active {
    color: var(--app-point, var(--nav));
    background: transparent;
    box-shadow: none;
  }

  body.page-bible.reader-dark-mode .topbar .nav-main a:hover,
  body.page-bible.reader-dark-mode .topbar .nav-main a:focus-visible,
  body.app-dark-mode .topbar .nav-main a:hover,
  body.app-dark-mode .topbar .nav-main a:focus-visible,
  body.page-bible.reader-dark-mode .topbar .nav-main a.active,
  body.app-dark-mode .topbar .nav-main a.active {
    color: var(--app-point-soft, #d1a054);
  }
}

body.app-dark-mode {
  --text-secondary: color-mix(in srgb, var(--reader-text, #e2e8f0) 62%, transparent);
  --toolbar-item-color: color-mix(in srgb, var(--reader-text, #e2e8f0) 72%, transparent);
  --toolbar-item-color-strong: color-mix(in srgb, var(--reader-text, #e2e8f0) 94%, transparent);
  --toolbar-track-color: color-mix(in srgb, var(--reader-text, #e2e8f0) 22%, transparent);
  --toolbar-slider-fill-color: color-mix(in srgb, var(--app-point-soft, #d1a054) 80%, var(--reader-text, #e2e8f0) 20%);
  --toolbar-slider-thumb-color: var(--app-point-soft, var(--app-point, #d1a054));
  --toolbar-opacity: 0.66;
  --ui-surface-bg: color-mix(in srgb, var(--app-dark-surface, #202d3d) 90%, var(--app-dark-bg, #111827) 10%);
  --ui-surface-border: color-mix(in srgb, var(--app-dark-border, #334960) 80%, var(--app-point-soft, #d1a054) 20%);
  --ui-muted-border: color-mix(in srgb, var(--app-dark-border, #334960) 86%, transparent);
  --ui-hover-bg: color-mix(in srgb, var(--app-dark-surface, #202d3d) 76%, var(--app-point-highlight, rgba(209, 160, 84, 0.14)) 24%);
  --ui-active-bg: color-mix(in srgb, var(--app-dark-surface, #202d3d) 68%, var(--app-point-highlight, rgba(209, 160, 84, 0.2)) 32%);
}

body.reader-dark-mode {
  --toolbar-item-color: color-mix(in srgb, var(--reader-text, #e2e8f0) 72%, transparent);
  --toolbar-item-color-strong: color-mix(in srgb, var(--reader-text, #e2e8f0) 94%, transparent);
  --toolbar-track-color: color-mix(in srgb, var(--reader-text, #e2e8f0) 22%, transparent);
  --toolbar-slider-fill-color: color-mix(in srgb, var(--app-point-soft, #d1a054) 80%, var(--reader-text, #e2e8f0) 20%);
  --toolbar-slider-thumb-color: var(--app-point-soft, var(--app-point, #d1a054));
  --toolbar-opacity: 0.66;
}

body.page-bible .topbar[data-auth-state="guest"],
body.page-bulletin .topbar[data-auth-state="guest"],
body.page-dream .topbar[data-auth-state="guest"],
body.page-hymn .topbar[data-auth-state="guest"],
body.page-confession .topbar[data-auth-state="guest"],
body.admin-page .topbar[data-auth-state="guest"] {
  border-bottom-color: var(--ui-muted-border);
}

body.page-bible .topbar[data-auth-state="guest"] .wrap,
body.page-bulletin .topbar[data-auth-state="guest"] .wrap,
body.page-dream .topbar[data-auth-state="guest"] .wrap,
body.page-hymn .topbar[data-auth-state="guest"] .wrap,
body.page-confession .topbar[data-auth-state="guest"] .wrap,
body.admin-page .topbar[data-auth-state="guest"] .wrap {
  gap: 12px;
}

.topbar[data-auth-state="guest"] .nav-shell {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.topbar[data-auth-state="guest"] .nav-main,
.topbar[data-auth-state="guest"] #globalThemeToggle {
  display: none !important;
}

.topbar[data-auth-state="guest"] .auth-slot {
  margin-left: 0;
}

.btn-primary,
.btn-secondary,
.chip,
.auth-btn,
.font-trigger-btn,
.popup-font-toggle,
.btn-popup-close {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s ease;
}

.btn-primary,
.btn-secondary,
.chip,
.auth-btn {
  border-radius: var(--ui-radius-pill);
}

.btn-primary,
.auth-btn.auth-login,
.auth-btn.auth-logout,
.auth-btn.auth-admin {
  background: var(--app-point, var(--nav));
  border-color: var(--app-point, var(--nav));
  color: #ffffff;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--app-point, var(--nav)) 16%, transparent);
}

.topbar .auth-btn.auth-login,
.topbar .auth-btn.auth-logout,
.topbar .auth-btn.auth-admin,
.topbar #globalThemeToggle {
  box-shadow: none !important;
  filter: none !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.auth-btn.auth-login:hover,
.auth-btn.auth-login:focus-visible,
.auth-btn.auth-logout:hover,
.auth-btn.auth-logout:focus-visible,
.auth-btn.auth-admin:hover,
.auth-btn.auth-admin:focus-visible {
  background: color-mix(in srgb, var(--app-point, var(--nav)) 86%, #000000 14%);
  border-color: color-mix(in srgb, var(--app-point, var(--nav)) 86%, #000000 14%);
  color: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-point-soft, #d1a054) 16%, transparent);
}

.btn-primary:active,
.auth-btn.auth-login:active,
.auth-btn.auth-logout:active,
.auth-btn.auth-admin:active {
  transform: translateY(1px);
}

.confession-version-chip,
.history-preset-chip,
.history-direct-btn,
.history-cal-label-btn,
.history-cal-nav-btn,
.memo-index-preset-chip,
.memo-index-direct-btn,
.related-filter,
.hymn-result,
body.page-bulletin .week-buttons .btn {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s ease;
  background: var(--ui-surface-bg);
  border-color: var(--ui-surface-border);
  color: var(--reader-text, var(--ink, #0f172a));
}

.confession-version-chip:hover,
.confession-version-chip:focus-visible,
.history-preset-chip:hover,
.history-preset-chip:focus-visible,
.history-direct-btn:hover,
.history-direct-btn:focus-visible,
.history-cal-label-btn:hover,
.history-cal-label-btn:focus-visible,
.history-cal-nav-btn:hover,
.history-cal-nav-btn:focus-visible,
.memo-index-preset-chip:hover,
.memo-index-preset-chip:focus-visible,
.memo-index-direct-btn:hover,
.memo-index-direct-btn:focus-visible,
.related-filter:hover,
.related-filter:focus-visible,
.hymn-result:hover,
.hymn-result:focus-visible,
body.page-bulletin .week-buttons .btn:hover,
body.page-bulletin .week-buttons .btn:focus-visible {
  background: var(--ui-hover-bg);
  border-color: var(--app-point-soft, #d1a054);
  color: var(--app-point, var(--nav));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 72%, transparent);
}

.confession-version-chip.active,
.confession-version-chip[aria-selected="true"],
.history-preset-chip.is-active,
.history-preset-chip[aria-pressed="true"],
.history-direct-btn.is-active,
.history-direct-btn[aria-pressed="true"],
.memo-index-preset-chip.is-active,
.memo-index-preset-chip[aria-pressed="true"],
.memo-index-direct-btn.is-active,
.memo-index-direct-btn[aria-pressed="true"],
.related-filter.active,
.related-filter[aria-pressed="true"],
.hymn-result.is-active,
.hymn-result[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ui-surface-bg) 74%, var(--app-point-highlight, rgba(15, 62, 102, 0.18)) 26%);
  border-color: var(--app-point-soft, #d1a054);
  color: var(--app-point, var(--nav));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-point-soft, #d1a054) 36%, transparent);
}

.btn-secondary,
.chip,
.auth-btn:not(.auth-login):not(.auth-logout):not(.auth-admin),
.font-trigger-btn,
.popup-font-toggle,
.btn-popup-close {
  background: var(--ui-surface-bg);
  border-color: var(--ui-surface-border);
  color: var(--reader-text, var(--ink, #0f172a));
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.chip:hover,
.chip:focus-visible,
.auth-btn:not(.auth-login):not(.auth-logout):not(.auth-admin):hover,
.auth-btn:not(.auth-login):not(.auth-logout):not(.auth-admin):focus-visible,
.font-trigger-btn:hover,
.font-trigger-btn:focus-visible,
.popup-font-toggle:hover,
.popup-font-toggle:focus-visible,
.btn-popup-close:hover,
.btn-popup-close:focus-visible {
  background: var(--ui-hover-bg);
  border-color: var(--app-point-soft, #d1a054);
  color: var(--app-point, var(--nav));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 72%, transparent);
}

.btn-secondary:active,
.chip:active,
.auth-btn:not(.auth-login):not(.auth-logout):not(.auth-admin):active,
.font-trigger-btn:active,
.popup-font-toggle:active,
.btn-popup-close:active {
  transform: translateY(1px);
  background: var(--ui-active-bg);
}

.btn-popup-close {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 14px;
  border-width: 1px;
}

.tab-container {
  gap: 16px;
}

.tab-toolbar,
.admin-tab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

.tab-list,
.tab-toolbar .tab-list,
.admin-tab-toolbar .admin-tab-list {
  display: flex;
  align-items: flex-end;
  gap: 21px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-width: none;
}

.tab-list::-webkit-scrollbar,
.admin-tab-toolbar .admin-tab-list::-webkit-scrollbar {
  display: none;
}

.tab-toolbar .tab,
.admin-tab-toolbar .admin-tab {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--reader-text, var(--ink, #0f172a));
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

.tab-toolbar .tab:hover,
.tab-toolbar .tab:focus-visible,
.admin-tab-toolbar .admin-tab:hover,
.admin-tab-toolbar .admin-tab:focus-visible {
  background: transparent;
  color: var(--app-point, var(--nav));
  border-bottom-color: color-mix(in srgb, var(--app-point-soft, #d1a054) 48%, transparent);
  box-shadow: none;
}

.tab-toolbar .tab.active,
.tab-toolbar .tab[aria-selected="true"],
.admin-tab-toolbar .admin-tab.active,
.admin-tab-toolbar .admin-tab[aria-selected="true"] {
  color: var(--app-point, var(--nav));
  border-bottom-color: var(--app-point-soft, #d1a054);
  background: transparent;
  box-shadow: none;
}

.tab-panel {
  min-width: 0;
}

.tab-reader-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.tab-reader-tools .font-control-wrapper {
  position: relative;
}

body.admin-page .admin-tab-shell,
body.page-confession .confession-tab-shell {
  width: 100%;
}

body.page-bible .tab-container,
body.page-confession .tab-container {
  gap: 12px;
}

body.admin-page main.section {
  margin-top: 16px;
}

body.admin-page .admin-card {
  margin-top: 0;
}

body.admin-page .admin-toolbar {
  margin-bottom: 14px;
}

body.page-confession {
  --confession-panel-width: min(100%, 360px);
  --confession-reading-frame-width: min(100%, 288px);
}

body.page-confession .confession-reader {
  align-self: center;
  flex: 0 0 auto;
  width: min(100%, 360px) !important;
  max-width: min(100%, 360px) !important;
  margin: 0 auto 18px;
  --confession-reading-width: min(100%, 288px);
}

body.page-confession .confession-version-wrap,
body.page-confession .confession-content,
body.page-confession .confession-block,
body.page-confession .confession-ordered,
body.page-confession .confession-paragraphs {
  width: 100%;
  max-width: 100%;
}

body.page-confession .confession-content {
  display: flex !important;
  justify-content: center !important;
}

body.page-confession .confession-block {
  width: min(100%, 288px) !important;
  max-width: min(100%, 288px) !important;
  margin: 0 auto;
}

body.page-confession .confession-line,
body.page-confession .confession-title {
  width: 100%;
}

.section.date-filter {
  margin-top: 0;
  margin-bottom: 24px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.section.date-filter .filter-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

body.page-bulletin .section.date-filter .filter-row {
  width: min(100%, 760px);
  margin-left: auto;
}

body.page-dream #tab-dream-setlist .section.date-filter .filter-row {
  width: 100%;
  margin-left: auto;
}

.filter-row label {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
  min-width: 132px;
  min-height: 50px;
  padding: 0 42px 0 16px;
  border: 1px solid var(--ui-surface-border);
  border-radius: 16px;
  background: var(--ui-surface-bg);
  box-shadow: var(--ui-shadow-line);
  cursor: pointer;
}

.filter-row label:first-child {
  min-width: 156px;
}

.filter-row label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.72;
  pointer-events: none;
}

.filter-row label:focus-within {
  border-color: var(--app-point-soft, #d1a054);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 72%, transparent);
}

.filter-row span {
  color: var(--reader-text, var(--ink, #0f172a));
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.filter-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 72px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--reader-text, var(--ink, #0f172a));
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

body.page-dream #tab-dream-setlist .filter-row label,
body.page-bulletin .filter-row label {
  display: block;
  overflow: hidden;
}

body.page-dream #tab-dream-setlist .filter-row label > span,
body.page-bulletin .filter-row label > span {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

body.page-dream #tab-dream-setlist .filter-row select,
body.page-bulletin .filter-row select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 42px 0 54px;
  border-radius: inherit;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

body.page-dream #tab-dream-setlist .filter-row label:first-child select,
body.page-bulletin .filter-row label:first-child select {
  padding-left: 58px;
}

.month-grid {
  display: grid;
  gap: 22px;
}

body.page-bulletin .month-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

body.page-dream #tab-dream-setlist .month-grid {
  grid-template-columns: minmax(0, 1fr);
}

.month-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px 28px;
  border: 1px solid var(--ui-surface-border);
  border-radius: 24px;
  background: var(--ui-surface-bg);
  box-shadow: var(--ui-shadow-line);
}

body.page-bulletin .month-card {
  width: min(100%, 760px);
}

.month-card:hover {
  transform: none;
  box-shadow:
    var(--ui-shadow-line),
    0 18px 38px color-mix(in srgb, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 34%, transparent);
}

.month-title,
.dream-date {
  margin: 0;
  color: var(--reader-text, var(--ink, #0f172a));
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dream-head {
  align-items: flex-start;
}

.dream-note,
.month-card .dream-note {
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--reader-text, var(--muted, #6b7280)) 72%, transparent);
  font-size: 15px;
  font-weight: 700;
}

.songlist {
  gap: 8px;
  margin: 0;
  color: var(--reader-text, var(--ink, #0f172a));
  font-size: 18px;
  line-height: 1.6;
}

.songlist li {
  list-style: none;
}

.action-bar,
.week-buttons {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

body.page-bulletin .week-buttons {
  grid-template-columns: repeat(4, minmax(0, 116px));
  align-items: start;
  justify-content: start;
}

body.page-dream .action-bar {
  grid-auto-flow: column;
  grid-auto-columns: minmax(56px, max-content);
  justify-content: start;
}

body.page-bulletin .week-buttons .btn,
body.page-dream .action-bar .chip {
  min-height: 48px;
  border-radius: 14px;
}

body.page-bulletin .special {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.page-bulletin .special-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ui-surface-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-surface-bg) 78%, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 22%);
  color: var(--reader-text, var(--ink, #0f172a));
  font-weight: 700;
  text-decoration: none;
}

body.page-bulletin .special-link:hover,
body.page-bulletin .special-link:focus-visible {
  border-color: var(--app-point-soft, #d1a054);
  color: var(--app-point, var(--nav));
}

body.app-dark-mode .month-card {
  background: var(--ui-card-bg-dark);
  border-color: var(--ui-card-border-dark);
}

body.page-bulletin.app-dark-mode .month-card,
body.page-dream.app-dark-mode #tab-dream-setlist .month-card {
  background: var(--ui-card-bg-dark);
  border-color: var(--ui-card-border-dark);
}

body.app-dark-mode .filter-row label,
body.app-dark-mode .btn-secondary,
body.app-dark-mode .chip,
body.app-dark-mode .btn-popup-close,
body.app-dark-mode .font-trigger-btn,
body.app-dark-mode .popup-font-toggle {
  background: var(--ui-card-bg-dark);
  border-color: var(--ui-card-border-dark);
}

body.app-dark-mode .month-title,
body.app-dark-mode .dream-date,
body.app-dark-mode .songlist,
body.app-dark-mode .filter-row span,
body.app-dark-mode .filter-row select {
  color: var(--reader-text, #e2e8f0);
}

body.app-dark-mode .dream-note,
body.app-dark-mode .month-card .dream-note {
  color: color-mix(in srgb, var(--reader-text, #e2e8f0) 70%, transparent);
}

body.page-bulletin.app-dark-mode .section.date-filter .filter-row label,
body.page-dream.app-dark-mode #tab-dream-setlist .section.date-filter .filter-row label {
  background: color-mix(in srgb, var(--app-dark-surface, #202d3d) 88%, var(--app-dark-bg, #111827) 12%);
  border-color: var(--ui-card-border-dark);
}

body.page-bulletin.app-dark-mode .week-buttons .btn,
body.page-dream.app-dark-mode #tab-dream-setlist .action-bar .chip {
  background: color-mix(in srgb, var(--app-dark-surface, #202d3d) 84%, var(--app-dark-bg, #111827) 16%);
  border-color: var(--ui-card-border-dark);
  color: var(--reader-text, #e2e8f0);
}

body.page-bulletin.app-dark-mode .special-link {
  background: color-mix(in srgb, var(--app-dark-surface, #202d3d) 78%, var(--app-point-highlight, rgba(209, 160, 84, 0.14)) 22%);
  border-color: var(--ui-card-border-dark);
  color: var(--reader-text, #e2e8f0);
}

body.page-bulletin.app-dark-mode .week-buttons .btn:hover,
body.page-bulletin.app-dark-mode .week-buttons .btn:focus-visible,
body.page-dream.app-dark-mode #tab-dream-setlist .action-bar .chip:hover,
body.page-dream.app-dark-mode #tab-dream-setlist .action-bar .chip:focus-visible,
body.page-bulletin.app-dark-mode .special-link:hover,
body.page-bulletin.app-dark-mode .special-link:focus-visible {
  border-color: var(--app-point-soft, #d1a054);
}

@media (min-width: 561px) {
  body.page-dream #tab-dream-setlist .month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-confession .confession-reader {
    width: min(100%, 760px) !important;
    max-width: min(100%, 760px) !important;
    --confession-reading-width: min(100%, 640px);
  }

  body.page-confession .confession-block {
    width: min(100%, 640px) !important;
    max-width: min(100%, 640px) !important;
  }
}

@media (min-width: 481px) and (max-width: 560px) {
  body.page-confession .confession-reader {
    width: min(100%, 456px) !important;
    max-width: min(100%, 456px) !important;
    --confession-reading-width: min(100%, 384px);
  }

  body.page-confession .confession-block {
    width: min(100%, 384px) !important;
    max-width: min(100%, 384px) !important;
  }
}

@media (max-width: 560px) {
  .tab-toolbar,
  .admin-tab-toolbar {
    gap: 14px;
  }

  .tab-list,
  .tab-toolbar .tab-list,
  .admin-tab-toolbar .admin-tab-list {
    width: 100%;
  }

  .tab-reader-tools {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  body.page-bible .tab-reader-tools,
  body.page-confession .tab-reader-tools {
    justify-content: flex-end;
  }

  body.page-bible .font-expanded-panel,
  body.page-confession .font-expanded-panel {
    gap: 8px !important;
  }

  body.page-bible .font-panel-group-size,
  body.page-confession .font-panel-group-size {
    min-width: 0 !important;
  }

  .section.date-filter .filter-row {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .filter-row label {
    min-height: 48px;
    padding: 0 14px;
  }

  .month-card {
    padding: 22px 20px;
    border-radius: 22px;
  }

  .month-title,
  .dream-date {
    font-size: 18px;
  }

  .songlist {
    font-size: 16px;
  }

  body.page-bulletin .week-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.page-bible,
  body.page-confession {
    --reader-font-panel-select-width: 72px;
    --reader-font-panel-slider-width: 54px;
    --reader-popup-font-slider-width: 56px;
  }

  .tab-toolbar .tab,
  .admin-tab-toolbar .admin-tab {
    padding: 0 0 10px;
    font-size: 14px;
  }

  .tab-list,
  .tab-toolbar .tab-list,
  .admin-tab-toolbar .admin-tab-list {
    gap: 15px;
  }

  .section.date-filter .filter-row {
    gap: 10px;
    justify-content: flex-end;
  }

  body.page-bible .font-expanded-panel,
  body.page-confession .font-expanded-panel {
    gap: 4px !important;
  }

  body.page-bible .font-expanded-panel .reader-font-select,
  body.page-confession .font-expanded-panel .reader-font-select {
    font-size: 11px !important;
    padding-right: 14px !important;
  }

  body.page-bible .font-expanded-panel input[type="range"],
  body.page-confession .font-expanded-panel input[type="range"] {
    min-width: 54px !important;
  }

  body.page-bible .font-panel-group,
  body.page-confession .font-panel-group {
    gap: 4px !important;
  }

  body.page-bible .font-panel-group-size,
  body.page-confession .font-panel-group-size {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }

  body.page-bible .font-expanded-panel .font-size-icon,
  body.page-confession .font-expanded-panel .font-size-icon {
    width: 13px !important;
    height: 13px !important;
  }

  body.page-bible .font-expanded-panel #fontSizeValue,
  body.page-confession .font-expanded-panel #confessionFontSizeValue {
    min-width: 20px;
    font-size: 10px !important;
  }

  .filter-row label {
    width: auto;
  }

  .month-card {
    gap: 16px;
    padding: 20px 18px;
  }

  body.page-bulletin .week-buttons,
  body.page-dream .action-bar {
    gap: 10px;
  }
}

/* Final UI overrides */
body.page-confession {
  --confession-shell-width: min(100%, 360px);
  --confession-reading-frame-width: min(100%, 288px);
}

@media (min-width: 481px) and (max-width: 560px) {
  body.page-confession {
    --confession-shell-width: min(100%, 456px);
    --confession-reading-frame-width: min(100%, 384px);
  }
}

@media (min-width: 561px) {
  body.page-confession {
    --confession-shell-width: min(100%, 760px);
    --confession-reading-frame-width: min(100%, 640px);
  }
}

body.page-confession .confession-tab-shell {
  display: grid;
  gap: 14px;
}

body.page-confession .confession-toolbar,
body.page-confession .confession-reader-tools,
body.page-confession .confession-reader {
  width: var(--confession-shell-width) !important;
  max-width: var(--confession-shell-width) !important;
  margin-inline: auto !important;
}

body.page-confession .reader-title-bar {
  display: block;
}

body.page-confession .reader-title-bar > .h1 {
  margin: 0;
  text-align: center;
}

body.page-bible .bible-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--reader-action-gap);
  flex: 0 0 auto;
}

body.page-bible .bible-header-actions .icon-button {
  flex: 0 0 auto;
}

body.page-bible .bible-header-actions .reader-my-memos-btn,
body.page-bible .bible-header-actions .chapter-memo-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  gap: 8px !important;
}

body.page-bible .icon-button,
body.page-confession .icon-button {
  width: var(--reader-icon-button-size) !important;
  height: var(--reader-icon-button-size) !important;
  min-width: var(--reader-icon-button-size) !important;
  min-height: var(--reader-icon-button-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ui-surface-border) 82%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--ui-surface-bg) 88%, transparent) !important;
  color: color-mix(in srgb, var(--reader-text, var(--ink, #0f172a)) 78%, transparent) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.14s ease !important;
}

body.page-bible .icon-button svg,
body.page-confession .icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-bible .icon-button:hover,
body.page-bible .icon-button:focus-visible,
body.page-confession .icon-button:hover,
body.page-confession .icon-button:focus-visible {
  border-color: var(--app-point, var(--nav)) !important;
  color: var(--app-point, var(--nav)) !important;
  background: color-mix(in srgb, var(--ui-hover-bg) 92%, transparent) !important;
}

body.page-bible .icon-button.active,
body.page-bible .icon-button[aria-expanded="true"],
body.page-confession .icon-button.active,
body.page-confession .icon-button[aria-expanded="true"] {
  border-color: var(--app-point, var(--nav)) !important;
  color: var(--app-point, var(--nav)) !important;
  background: color-mix(in srgb, var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 78%, var(--ui-surface-bg) 22%) !important;
}

/* Canonical bible/confession reader font popover and header alignment */
body.page-bible,
body.page-confession {
  --reader-font-trigger-size: 42px;
  --reader-font-trigger-radius: 14px;
  --reader-font-panel-width: min(280px, calc(100vw - 24px));
  /* 설명 주석 팝업 내 폰트 설정 패널 폭 (기준 대비 +25%) */
  --reader-note-font-panel-width: min(220px, calc(100vw - 48px));
  --reader-note-font-panel-padding: 12px;
  --reader-font-panel-padding: 14px;
  --reader-font-panel-border: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.92) 34%,
    var(--ui-surface-border) 66%
  );
  --reader-font-panel-bg: color-mix(
    in srgb,
    var(--ui-surface-bg) 86%,
    rgba(8, 12, 20, 0.14) 14%
  );
  --reader-font-panel-shadow:
    0 12px 24px rgba(15, 23, 42, 0.14),
    0 4px 10px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  --reader-font-panel-shadow-hover:
    0 14px 28px rgba(15, 23, 42, 0.16),
    0 6px 14px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(15, 23, 42, 0.08);
}

body.page-bible:is(.reader-dark-mode, .app-dark-mode),
body.page-confession:is(.reader-dark-mode, .app-dark-mode) {
  --reader-font-panel-border: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.28) 34%,
    var(--ui-surface-border) 66%
  );
  --reader-font-panel-bg: color-mix(
    in srgb,
    var(--ui-surface-bg) 78%,
    rgba(5, 10, 18, 0.22) 22%
  );
  --reader-font-panel-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  --reader-font-panel-shadow-hover:
    0 16px 32px rgba(0, 0, 0, 0.32),
    0 6px 14px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.page-bible #bibleReader .reader-controls .field-chapter-row {
  align-items: center !important;
}

body.page-bible .reader-font-popover-control,
body.page-confession .reader-font-popover-control {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

body.page-bible .font-trigger-btn,
body.page-confession .font-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--reader-font-trigger-size) !important;
  min-width: var(--reader-font-trigger-size) !important;
  height: var(--reader-font-trigger-size) !important;
  min-height: var(--reader-font-trigger-size) !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ui-surface-border) 82%, transparent) !important;
  border-radius: var(--reader-font-trigger-radius) !important;
  background: color-mix(in srgb, var(--ui-surface-bg) 88%, transparent) !important;
  color: var(--reader-text, var(--ink, #0f172a)) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

body.page-bible .font-trigger-btn:hover,
body.page-bible .font-trigger-btn:focus-visible,
body.page-bible .font-trigger-btn[aria-expanded="true"],
body.page-bible .font-trigger-btn.is-active,
body.page-confession .font-trigger-btn:hover,
body.page-confession .font-trigger-btn:focus-visible,
body.page-confession .font-trigger-btn[aria-expanded="true"],
body.page-confession .font-trigger-btn.is-active {
  border-color: var(--app-point-soft, #d1a054) !important;
  background: color-mix(
    in srgb,
    var(--ui-surface-bg) 72%,
    var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 28%
  ) !important;
  color: var(--app-point, var(--nav)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-point-soft, #d1a054) 18%, transparent),
    0 14px 28px rgba(15, 23, 42, 0.14) !important;
}

body.page-bible .font-trigger-btn svg,
body.page-confession .font-trigger-btn svg,
body.page-bible .popup-font-toggle svg {
  width: 22px !important;
  height: 22px !important;
}

body.page-bible .font-trigger-icon text,
body.page-confession .font-trigger-icon text {
  fill: currentColor !important;
  stroke: none !important;
}

body.page-bible .font-expanded-panel,
body.page-confession .font-expanded-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: var(--reader-font-panel-width) !important;
  min-width: 240px !important;
  max-width: var(--reader-font-panel-width) !important;
  padding: var(--reader-font-panel-padding) !important;
  border: 1px solid var(--reader-font-panel-border) !important;
  border-radius: 18px !important;
  background: var(--reader-font-panel-bg) !important;
  box-shadow: var(--reader-font-panel-shadow) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, -4px, 0) !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease,
    box-shadow 0.18s ease !important;
  z-index: 30 !important;
}

body.page-bible .font-expanded-panel[hidden],
body.page-confession .font-expanded-panel[hidden] {
  display: grid !important;
}

body.page-bible .font-expanded-panel.active,
body.page-confession .font-expanded-panel.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

body.page-bible .font-expanded-panel:hover,
body.page-bible .font-expanded-panel:focus-within,
body.page-confession .font-expanded-panel:hover,
body.page-confession .font-expanded-panel:focus-within {
  box-shadow: var(--reader-font-panel-shadow-hover) !important;
}

body.page-bible .font-expanded-panel .font-control-divider,
body.page-confession .font-expanded-panel .font-control-divider {
  display: none !important;
}

body.page-bible .font-expanded-panel .font-panel-group,
body.page-confession .font-expanded-panel .font-panel-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

body.page-bible .font-expanded-panel .font-panel-group-size,
body.page-confession .font-expanded-panel .font-panel-group-size {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
}

body.page-bible .font-expanded-panel .reader-font-select,
body.page-confession .font-expanded-panel .reader-font-select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  padding: 0 40px 0 12px !important;
  border: 1px solid color-mix(in srgb, var(--ui-surface-border) 88%, transparent) !important;
  border-radius: 12px !important;
  background-color: color-mix(in srgb, var(--ui-surface-bg) 92%, transparent) !important;
  color: var(--reader-text, var(--ink, #0f172a)) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.page-bible .font-expanded-panel .reader-font-select:focus,
body.page-confession .font-expanded-panel .reader-font-select:focus {
  border-color: var(--app-point-soft, #d1a054) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-point-soft, #d1a054) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-bible .font-expanded-panel .font-size-icon,
body.page-confession .font-expanded-panel .font-size-icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--toolbar-item-color-strong) !important;
}

body.page-bible .font-expanded-panel .font-size-icon path,
body.page-confession .font-expanded-panel .font-size-icon path,
body.page-bible .context-note-popover .popup-font-panel .font-size-icon path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.page-bible .font-expanded-panel .font-size-icon-sm path,
body.page-confession .font-expanded-panel .font-size-icon-sm path,
body.page-bible .context-note-popover .popup-font-panel .font-size-icon-sm path {
  stroke-width: 1.6 !important;
}

body.page-bible .font-expanded-panel .font-size-icon-lg path,
body.page-confession .font-expanded-panel .font-size-icon-lg path,
body.page-bible .context-note-popover .popup-font-panel .font-size-icon-lg path {
  stroke-width: 1.9 !important;
}

body.page-bible .font-expanded-panel input[type="range"],
body.page-confession .font-expanded-panel input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  accent-color: var(--toolbar-slider-thumb-color) !important;
}

body.page-bible .font-expanded-panel #fontSizeValue,
body.page-confession .font-expanded-panel #confessionFontSizeValue,
body.page-bible .font-expanded-panel .popup-font-size-value {
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  color: var(--toolbar-item-color-strong) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.page-confession .confession-reader-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--reader-head-gap) !important;
  min-height: var(--reader-font-trigger-size) !important;
  flex-wrap: nowrap !important;
}

body.page-confession .confession-version-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--reader-font-trigger-size) !important;
  margin: 0 !important;
}

body.page-confession .confession-version-chips {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: var(--reader-font-trigger-size) !important;
}

body.page-confession .confession-version-chips .chip,
body.page-confession .confession-version-chips .confession-version-chip,
body.page-confession .confession-version-chips button,
body.page-confession .confession-version-chips [role="tab"],
body.page-confession #confessionTopicTabs .confession-topic-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
}

body.page-confession .confession-font-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  min-height: var(--reader-font-trigger-size) !important;
  margin-left: auto !important;
}

body.page-bible .reader-meta {
  display: grid !important;
  gap: 4px !important;
  margin: 6px 0 10px !important;
}

body.page-bible .reader-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--reader-action-gap) !important;
  flex-wrap: nowrap !important;
}

body.page-bible .reader-meta-title-group {
  /*display: inline-flex !important;*/
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  align-self: center !important;
  text-align: left !important;
  margin: 0 !important;
}

body.page-bible .reader-meta-title-group > * {
  margin: 0 !important;
}

body.page-bible #fixedChapterTitle {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.page-bible .chapter-version-label {
  margin: 0 !important;  
  min-height: 16px !important;    /* min-height: 38px !important; */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  /* flex 폭이 좁을 때 글자 단위 줄바꿈 방지 → 한 줄 유지 */
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: var(--reader-meta-version-font-size, 0.8125rem) !important;
}

body.page-bible .bible-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  align-self: center !important;
}

body.page-bible .chapter-fixed-title .chapter-fixed-label {
  white-space: nowrap !important;
  line-height: 1 !important;
}

body.page-bible .reader-meta-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: color-mix(in srgb, var(--ui-surface-border) 78%, transparent) !important;
}

body.page-bible .font-expanded-panel,
body.page-confession .font-expanded-panel {
  background: color-mix(
    in srgb,
    var(--ui-surface-bg) 44%,
    rgba(8, 12, 20, 0.56) 56%
  ) !important;
  border-color: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.82) 62%,
    var(--ui-surface-border) 38%
  ) !important;
  box-shadow:
    0 44px 96px rgba(15, 23, 42, 0.38),
    0 18px 38px rgba(15, 23, 42, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(32px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(185%) !important;
}

body.page-bible .context-note-popover.popup-panel-standard {
  background: var(--popup-surface, var(--reader-card-bg, var(--surface-bg))) !important;
  background: color-mix(
    in srgb,
    var(--popup-surface, var(--reader-card-bg, var(--surface-bg))) 94%,
    var(--ui-surface-bg) 6%
  ) !important;
  z-index: 9999 !important;
  border-color: var(--popup-surface-border, var(--reader-card-border, var(--line))) !important;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
}

body.page-bible #tab-related .related-content-header:empty {
  display: none !important;
}

body.page-bible.popover-open #tab-related .related-content-header {
  z-index: 1 !important;
}

body.page-bible :is(.note-popover, .context-note-popover, .context-popover) {
  font-family: var(--bible-popover-font-family, var(--reader-content-font)) !important;
  z-index: 240 !important;
}

body.page-bible:is(.reader-dark-mode, .app-dark-mode) .context-note-popover.popup-panel-standard {
  background: var(--ui-surface-bg) !important;
  background: color-mix(
    in srgb,
    var(--ui-surface-bg) 54%,
    rgba(8, 12, 20, 0.58) 46%
  ) !important;
  border-color: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.36) 54%,
    var(--ui-surface-border) 46%
  ) !important;
  box-shadow:
    0 34px 72px rgba(0, 0, 0, 0.42),
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
}

body.page-bible .memo-modal-head,
body.page-bible .context-note-popover .context-note-popover-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  position: relative !important;
}

body.page-bible .memo-modal-head {
  min-height: auto !important;
  padding-right: 0 !important;
}

body.page-bible .memo-modal-head-actions,
body.page-bible .context-note-popover .popup-header-actions {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  align-self: start !important;
}

body.page-bible .memo-modal-head-actions .btn-popup-close,
body.page-bible .context-note-popover .popup-header-actions .btn-popup-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

body.page-bible .context-note-popover .popup-font-wrapper {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-top: 0 !important;
}

body.page-bible .context-note-popover .popup-font-toggle {
  align-self: center !important;
  transform: none !important;
}

body.page-bible .context-note-popover .btn-popup-close {
  align-self: center !important;
  transform: none !important;
}

body.page-bible .context-note-popover .popup-font-panel {
  background: var(--reader-font-panel-bg) !important;
  border: 1px solid var(--reader-font-panel-border) !important;
  width: var(--reader-font-panel-width) !important;
  min-width: 240px !important;
  max-width: var(--reader-font-panel-width) !important;
  padding: var(--reader-font-panel-padding) !important;
  gap: 12px !important;
  border-radius: 18px !important;
  box-shadow: var(--reader-font-panel-shadow) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

body.page-bible .context-note-popover .popup-font-panel .font-panel-group {
  gap: 8px !important;
}

body.page-bible .context-note-popover .popup-font-panel .font-panel-group-size {
  gap: 8px !important;
}

body.page-bible .context-note-popover .popup-font-panel .reader-font-select {
  height: 42px !important;
  padding: 0 40px 0 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.page-bible .context-note-popover .popup-font-panel .font-size-icon {
  width: 16px !important;
  height: 16px !important;
}

body.page-bible .context-note-popover .popup-font-panel .popup-font-size-value {
  min-width: 38px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.page-bible :is(
  .memo-modal .btn-popup-close,
  .context-note-popover .popup-font-toggle,
  .context-note-popover .btn-popup-close
) {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--ui-surface-border) 82%, transparent) !important;
  background: color-mix(in srgb, var(--ui-surface-bg) 88%, transparent) !important;
  color: var(--reader-text, var(--ink, #0f172a)) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
  line-height: 1 !important;
  font-size: 28px !important;
}

body.page-bible :is(
  .memo-modal .btn-popup-close:hover,
  .memo-modal .btn-popup-close:focus-visible,
  .context-note-popover .popup-font-toggle:hover,
  .context-note-popover .popup-font-toggle:focus-visible,
  .context-note-popover .popup-font-toggle[aria-expanded="true"],
  .context-note-popover .popup-font-toggle.popup-font-toggle-active,
  .context-note-popover .btn-popup-close:hover,
  .context-note-popover .btn-popup-close:focus-visible
) {
  border-color: var(--app-point-soft, #d1a054) !important;
  background: color-mix(
    in srgb,
    var(--ui-surface-bg) 72%,
    var(--app-point-highlight, rgba(15, 62, 102, 0.12)) 28%
  ) !important;
  color: var(--app-point, var(--nav)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-point-soft, #d1a054) 18%, transparent),
    0 14px 28px rgba(15, 23, 42, 0.14) !important;
}

body.page-bible .context-note-popover .popup-font-toggle svg text {
  fill: currentColor !important;
  stroke: none !important;
}

@media (max-width: 480px) {
  body.page-bible,
  body.page-confession {
    --reader-font-panel-width: min(260px, calc(100vw - 24px));
    --reader-note-font-panel-width: min(210px, calc(100vw - 32px));
    --reader-font-panel-padding: 12px;
    --reader-note-font-panel-padding: 12px;
  }

  body.page-bible .reader-meta {
    margin-bottom: 8px !important;
  }

  body.page-bible .reader-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  body.page-bible .reader-meta-title-group {
    flex: 1 1 auto !important;
  }

  body.page-bible .bible-header-actions {
    flex: 0 0 auto !important;
  }

  body.page-confession .confession-reader-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  body.page-confession .confession-version-wrap {
    flex: 1 1 auto !important;
  }

  body.page-confession .confession-font-control {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 481px) and (max-width: 639px) {
  body.page-bible .memo-index-filter-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 0 !important;
  }

  body.page-bible .memo-index-preset-chip,
  body.page-bible .memo-index-direct-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  body.page-bible .reader-controls .select-controls {
    grid-template-columns: minmax(76px, 0.72fr) minmax(0, 1.34fr) minmax(0, 1.18fr) !important;
    gap: 6px !important;
  }

  body.page-bible .field-chapter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 4px !important;
  }

  body.page-bible #bibleVersion {
    font-size: 11.5px !important;
    padding: 0 6px !important;
  }

  body.page-bible #bibleBook,
  body.page-bible #bibleChapter {
    font-size: 12px !important;
    padding: 0 7px !important;
  }

  body.page-bible .font-trigger-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 360px) {
  body.page-bible .reader-controls .select-controls {
    grid-template-columns: minmax(68px, 0.66fr) minmax(0, 1.38fr) minmax(0, 1.2fr) !important;
    gap: 5px !important;
  }

  body.page-bible #bibleVersion {
    font-size: 11px !important;
    padding: 0 5px !important;
  }

  body.page-bible #bibleBook,
  body.page-bible #bibleChapter {
    font-size: 11.5px !important;
    padding: 0 6px !important;
  }

  body.page-bible .font-trigger-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

body.page-bible,
body.page-confession {
  --unified-font-panel-width: min(448px, calc(100vw - 88px));
  --unified-font-panel-select-column: minmax(128px, 0.92fr);
  --unified-font-panel-size-column: minmax(0, 1.78fr);
  --unified-font-panel-gap: 12px;
  --unified-font-panel-inline-gap: 8px;
  --unified-font-panel-value-width: 38px;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel),
body.page-bible .context-note-popover .popup-font-panel,
body.page-confession .confession-reader-head .font-expanded-panel {
  background: var(--reader-font-panel-bg) !important;
  border: 1px solid var(--reader-font-panel-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--reader-font-panel-shadow) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  width: var(--unified-font-panel-width) !important;
  min-width: 240px !important;
  max-width: var(--unified-font-panel-width) !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: var(--unified-font-panel-select-column) 1px var(--unified-font-panel-size-column) !important;
  align-items: center !important;
  column-gap: var(--unified-font-panel-gap) !important;
  row-gap: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel),
body.page-confession .confession-reader-head .font-expanded-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  transform: translate3d(0, -4px, 0) !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel.active, #tab-related .related-top-actions .font-expanded-panel.active),
body.page-confession .confession-reader-head .font-expanded-panel.active {
  transform: translate3d(0, 0, 0) !important;
}

body.page-bible .context-note-popover .popup-font-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, -4px, 0) !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease,
    box-shadow 0.18s ease !important;
  width: min(336px, 100%) !important;
  min-width: min(280px, 100%) !important;
  max-width: min(336px, 100%) !important;
  z-index: 48 !important;
}

body.page-bible .context-note-popover .popup-font-panel.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

body.page-bible .context-note-popover .popup-font-panel:hover,
body.page-bible .context-note-popover .popup-font-panel:focus-within {
  box-shadow: var(--reader-font-panel-shadow-hover) !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .font-control-divider,
body.page-bible .context-note-popover .popup-font-panel .font-control-divider,
body.page-confession .confession-reader-head .font-expanded-panel .font-control-divider {
  display: block !important;
  width: 1px !important;
  height: 22px !important;
  background: color-mix(in srgb, var(--reader-text, var(--ink)) 14%, transparent) !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .font-panel-group,
body.page-bible .context-note-popover .popup-font-panel .font-panel-group,
body.page-confession .confession-reader-head .font-expanded-panel .font-panel-group {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  align-items: center !important;
  gap: var(--unified-font-panel-inline-gap) !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .font-panel-group-select,
body.page-bible .context-note-popover .popup-font-panel .font-panel-group-select,
body.page-confession .confession-reader-head .font-expanded-panel .font-panel-group-select {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .font-panel-group-size,
body.page-bible .context-note-popover .popup-font-panel .font-panel-group-size,
body.page-confession .confession-reader-head .font-expanded-panel .font-panel-group-size {
  grid-template-columns: 16px minmax(0, 1fr) 16px var(--unified-font-panel-value-width) !important;
  column-gap: var(--unified-font-panel-inline-gap) !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .reader-font-select,
body.page-bible .context-note-popover .popup-font-panel .reader-font-select,
body.page-confession .confession-reader-head .font-expanded-panel .reader-font-select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  padding: 0 38px 0 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .font-size-icon,
body.page-bible .context-note-popover .popup-font-panel .font-size-icon,
body.page-confession .confession-reader-head .font-expanded-panel .font-size-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) input[type="range"],
body.page-bible .context-note-popover .popup-font-panel input[type="range"],
body.page-confession .confession-reader-head .font-expanded-panel input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) :is(#fontSizeValue, #relatedFontSizeValue),
body.page-bible .context-note-popover .popup-font-panel .popup-font-size-value,
body.page-confession .confession-reader-head .font-expanded-panel #confessionFontSizeValue {
  min-width: var(--unified-font-panel-value-width) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

@media (max-width: 560px) {
  body.page-bible,
  body.page-confession {
    --unified-font-panel-width: calc(100vw - 72px);
    --unified-font-panel-select-column: minmax(112px, 0.84fr);
    --unified-font-panel-size-column: minmax(0, 1.96fr);
    --unified-font-panel-gap: 10px;
    --unified-font-panel-inline-gap: 6px;
    --unified-font-panel-value-width: 34px;
  }
}

@media (max-width: 420px) {
  body.page-bible,
  body.page-confession {
    --unified-font-panel-width: calc(100vw - 56px);
    --unified-font-panel-select-column: minmax(118px, 1.08fr);
    --unified-font-panel-size-column: minmax(0, 1.72fr);
    --unified-font-panel-value-width: 30px;
  }

  body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel),
  body.page-bible .context-note-popover .popup-font-panel,
  body.page-confession .confession-reader-head .font-expanded-panel {
    padding: 11px 12px !important;
  }

  body.page-bible .context-note-popover .popup-font-panel {
    --unified-font-panel-select-column: minmax(118px, 1.08fr);
    --unified-font-panel-size-column: minmax(0, 1.72fr);
    width: min(320px, 100%) !important;
    min-width: min(256px, 100%) !important;
    max-width: min(320px, 100%) !important;
  }

  body.page-bible .context-note-popover .popup-font-panel .reader-font-select {
    padding: 0 32px 0 10px !important;
  }

  body.page-bible :is(.bible-header-actions .font-expanded-panel, #tab-related .related-top-actions .font-expanded-panel) .reader-font-select,
  body.page-confession .confession-reader-head .font-expanded-panel .reader-font-select {
    padding: 0 32px 0 10px !important;
  }
}