/* =============================================================
   성경닷컴 — 종이 결 테마 (SungKyoung Redesign)

   시안: files/Website redesign consultation/SungKyoung Redesign.dc.html

   site.css 뒤에 로드되어 토큰과 부트스트랩 변수를 함께 덮어쓴다.
   각 화면의 인라인 스타일을 전부 고치는 대신 --bs-* 를 갈아끼워
   카드·버튼·배지·입력창이 한꺼번에 따라오게 하는 방식이다.

   원칙 세 가지 (시안에서 그대로 가져온 것):
     1. 그림자 대신 1px 실선  — 종이에 인쇄한 느낌
     2. 모서리는 2~3px        — 거의 각진 형태
     3. 성경 본문은 명조(Gowun Batang), UI는 고딕(Gothic A1)
   ============================================================= */

:root {
    /* ── 종이·잉크 ─────────────────────────────────────────── */
    --paper: #FAF7F1; /* 페이지 바탕 */
    --surface: #FFFDF8; /* 카드 */
    --surface-alt: #FCFAF4; /* 카드 안 보조 영역 */
    --surface-tint: #FDFBF6; /* 배너 */
    --ink: #23201B; /* 본문 글자 */
    --ink-soft: #3D372D;
    --ink-muted: #6E6558;
    --ink-faint: #8C8371;
    --ink-fainter: #A3998A;
    --ink-ghost: #C4BAA6;
    /* ── 금박 (주 강조) ────────────────────────────────────── */
    --gold: #7A5C1E;
    --gold-dark: #56410F;
    --gold-tint: #FDF8EA;
    --gold-border: #E2D1A8;
    /* ── 짙은 초록 (신약·보조 강조) ────────────────────────── */
    --pine: #3A564A;
    /* ── 괘선 (진한 순서) ──────────────────────────────────── */
    --rule-strong: #D8CDB8;
    --rule: #E1D8C7;
    --rule-soft: #E7DFD1;
    --rule-faint: #EFE8DA;
    --rule-ghost: #F3EDE1;
    /* ── 글꼴 ──────────────────────────────────────────────── */
    --font-sans: 'Gothic A1', 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;
    --font-serif: 'Gowun Batang', 'Noto Serif KR', Georgia, serif;
    /* ── 기존 site.css 토큰을 새 팔레트로 재정의 ───────────── */
    --primary: var(--gold);
    --primary-dark: var(--gold-dark);
    --primary-light: var(--gold-border);
    --secondary: var(--pine);
    --secondary-dark: #2E463C;
    --accent: var(--gold);
    --dark: var(--ink-soft);
    --gray: var(--ink-faint);
    --light-gray: var(--surface-alt);
    --lighter-gray: var(--surface-tint);
    --white: var(--surface);
    --danger: #A6432F;
    --warning: #B07A1E;
    --success: #4A7C59;
    /* 그림자는 쓰지 않는다 — 변수는 남겨두되 값을 비운다 */
    --shadow-sm: none;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    /* ── 부트스트랩 5.3 전역 ───────────────────────────────── */
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-sans);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-tertiary-color: var(--ink-faint);
    --bs-border-color: var(--rule);
    --bs-border-color-translucent: var(--rule-soft);
    --bs-border-radius: 3px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 3px;
    --bs-border-radius-xl: 3px;
    --bs-border-radius-2xl: 3px;
    --bs-border-radius-pill: 2px;
    --bs-link-color: var(--gold);
    --bs-link-hover-color: var(--gold-dark);
    --bs-link-color-rgb: 122, 92, 30;
    --bs-primary: var(--gold);
    --bs-primary-rgb: 122, 92, 30;
    --bs-secondary: var(--ink-faint);
    --bs-secondary-rgb: 140, 131, 113;
    --bs-success: #4A7C59;
    --bs-success-rgb: 74, 124, 89;
    --bs-info: var(--pine);
    --bs-info-rgb: 58, 86, 74;
    --bs-warning: #B07A1E;
    --bs-warning-rgb: 176, 122, 30;
    --bs-danger: #A6432F;
    --bs-danger-rgb: 166, 67, 47;
    --bs-light: var(--surface-alt);
    --bs-light-rgb: 252, 250, 244;
    --bs-dark: var(--ink);
    --bs-dark-rgb: 35, 32, 27;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #EFE0BB;
}

/* 시안의 앵커 색 — 부트스트랩 기본 파랑을 완전히 몰아낸다 */
a {
    color: var(--gold);
}

    a:hover {
        color: var(--gold-dark);
    }

/* ── 표면: 그림자 제거, 실선 한 줄 ──────────────────────────── */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--rule);
    --bs-card-cap-bg: var(--surface-alt);
    --bs-card-inner-border-radius: 2px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

/* .shadow* 유틸리티는 뷰 곳곳에 박혀 있어 지우는 대신 무력화한다 */
.shadow, .shadow-sm, .shadow-lg, .card.shadow, .card.shadow-sm, .card.shadow-lg {
    box-shadow: none !important;
}

/* 카드에만 괘선을 되돌린다. .border-0 은 QT 작성 폼의 테두리 없는 입력창처럼
   의도적으로 쓰인 곳이 있어 전역으로 되살리면 안 된다. */
.card.border-0 {
    border: 1px solid var(--rule) !important;
}

/* 헤더가 카드 안에서 배경색을 갖는 경우(bg-primary 등)는 예외 */
.card-header {
    border-bottom: 1px solid var(--rule-faint);
    font-family: var(--font-sans);
}

    .card-header.bg-light {
        background: var(--surface-alt) !important;
        color: var(--ink);
    }

/* ── 제목: 명조 ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-1, .display-4, .display-5, .navbar-brand {
    font-family: var(--font-serif);
    letter-spacing: -0.01em;
}

/* ── 성경 본문: 명조, 넉넉한 행간 ───────────────────────────── */
.verse-text,
.bible-verse-text,
.reading-body .verse-text,
.bible-content .verse-text {
    font-family: var(--font-serif);
    font-size: 1.075rem;
    line-height: 1.85;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: pretty;
}

/* 절 번호는 시안대로 작은 고딕 — 원형 배지를 쓰지 않는다 */
.verse-number {
    background: transparent !important;
    color: var(--ink-fainter) !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: .78rem;
    border-radius: 0;
    min-width: 22px;
    height: auto;
    justify-content: flex-end;
    padding-top: .35rem;
}

.verse-item {
    border-left: 3px solid transparent;
    border-radius: 0;
}

    .verse-item:hover {
        background: var(--surface-alt);
        border-left-color: var(--rule-strong);
    }

.verse-highlighted {
    background: var(--gold-tint) !important;
    border-left-color: var(--gold) !important;
}

/* ── 상단 바 ────────────────────────────────────────────────── */
.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--rule-soft);
    box-shadow: none !important;
}

.navbar-brand {
    color: var(--ink) !important;
    font-weight: 700;
}

.navbar .nav-link {
    color: var(--ink-soft) !important;
    font-family: var(--font-sans);
    font-weight: 500;
}

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: var(--gold) !important;
    }

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    box-shadow: none;
}

.dropdown-item {
    color: var(--ink-soft);
    font-family: var(--font-sans);
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: var(--gold-tint);
        color: var(--gold-dark);
    }

/* ── 버튼: 납작하게 ─────────────────────────────────────────── */
.btn {
    border-radius: 2px;
    font-family: var(--font-sans);
    font-weight: 600;
    box-shadow: none !important;
}

.btn-primary {
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-bg: var(--gold-dark);
    --bs-btn-hover-border-color: var(--gold-dark);
    --bs-btn-active-bg: var(--gold-dark);
    --bs-btn-color: #FDFBF6;
    --bs-btn-hover-color: #FDFBF6;
}

.btn-outline-primary {
    --bs-btn-color: var(--gold);
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-hover-bg: var(--gold-tint);
    --bs-btn-hover-color: var(--gold-dark);
    --bs-btn-hover-border-color: var(--gold-border);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-soft);
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-hover-bg: var(--surface-alt);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--rule-strong);
}

.btn-dark {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-color: var(--paper);
}

/* 시안에는 알약형 버튼이 없다 */
.rounded-pill {
    border-radius: 2px !important;
}

/* ── 입력창 ─────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--font-sans);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--gold-border);
        box-shadow: 0 0 0 2px rgba(122, 92, 30, .12);
        background: var(--surface);
    }

    .form-control::placeholder {
        color: var(--ink-fainter);
    }

/* ── 배지 ───────────────────────────────────────────────────── */
.badge {
    border-radius: 2px;
    font-family: var(--font-sans);
    font-weight: 600;
}

.badge.bg-light {
    background: var(--surface-alt) !important;
    color: var(--ink-faint) !important;
    border: 1px solid var(--rule);
}

/* ── 알림 상자 ──────────────────────────────────────────────── */
.alert {
    border-radius: 3px;
    border: 1px solid var(--rule);
    background: var(--surface-alt);
    color: var(--ink-muted);
}

.alert-info, .alert-secondary {
    background: var(--surface-alt);
    border-color: var(--rule);
    color: var(--ink-muted);
}

.alert-warning {
    background: var(--gold-tint);
    border-color: var(--gold-border);
    color: var(--ink-soft);
}

.alert-success {
    background: #F1F5F0;
    border-color: #D5E2D6;
    color: #38553F;
}

/* ── 바닥글 ─────────────────────────────────────────────────── */
footer, .footer {
    background: var(--ink) !important;
    color: #CFC7B7 !important;
    border-top: none;
}

    footer a, .footer a {
        color: #CFC7B7 !important;
    }

        footer a:hover, .footer a:hover {
            color: #EFE9DC !important;
        }

/* ── 성경 목록 사이드바 ─────────────────────────────────────── */
.book-grid-item {
    background: var(--surface);
    border: none;
    border-radius: 0;
    color: var(--ink-soft);
    font-family: var(--font-sans);
}

    .book-grid-item:hover {
        background: var(--gold-tint);
        color: var(--gold-dark);
    }

    .book-grid-item .badge {
        background: transparent !important;
        color: var(--ink-fainter) !important;
        border: none;
        font-weight: 400;
        font-size: .68rem;
        padding: 0;
    }

.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule-faint);
    border: 1px solid var(--rule-faint);
    padding: 0 !important;
}

.book-grid-item {
    padding: 8px 6px;
    text-align: center;
    display: block;
}

.section-header {
    background: transparent !important;
    color: var(--gold) !important;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    padding-left: 0 !important;
}

    .section-header .bi-star {
        color: var(--pine) !important;
    }

/* ── 히어로 배너: 수채화 위 옅은 종이 톤 ────────────────────── */
.hero-placeholder {
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: none;
}

.hero-text h1, .hero-text h2 {
    font-family: var(--font-serif);
}

/* ── 찬송가 카드 (theme 이전 색을 종이 톤으로) ──────────────── */
.hymn-number, .hymn-number-lg {
    background: var(--gold) !important;
    border-radius: 2px;
    font-family: var(--font-sans);
}

.hymn-title {
    color: var(--ink);
}

    .hymn-title:hover {
        color: var(--gold);
    }

.related-hymn-chip {
    background: var(--gold-tint);
    color: var(--gold-dark);
    border: 1px solid var(--gold-border);
    border-radius: 2px;
}

    .related-hymn-chip:hover {
        background: #F7EFDA;
        color: var(--gold-dark);
    }

/* ── 카드 호버: 들어올리지 않고 테두리만 진해진다 ───────────── */
.category-card:hover,
.visitation-card:hover,
.hymn-card:hover,
.verse-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--rule-strong) !important;
    background: var(--surface-alt);
}

/* ── 키보드 안내 ────────────────────────────────────────────── */
kbd {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink-muted);
}

/* =============================================================
   개별 뷰의 <style> 블록 덮어쓰기

   뷰의 스타일은 <body> 안, 즉 이 파일보다 뒤에 실린다. 같은 특이도면
   뒤가 이기므로 여기서는 !important 로 되잡는다. 뷰마다 찾아 고치는
   대신 반복되는 패턴(그라데이션 헤더·원형 절 번호·알약 버튼)만 잡는다.
   ============================================================= */

/* ── 읽기 카드: 파란 그라데이션 헤더 → 종이 표면 + 왼쪽 색 괘선 ── */
.reading-card {
    border-radius: 3px !important;
    border: 1px solid var(--rule) !important;
}

.reading-header {
    background: var(--surface-alt) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--rule-faint) !important;
}

    .reading-header h6, .reading-header h2, .reading-header strong {
        color: var(--ink) !important;
        font-family: var(--font-serif);
    }

.reading-listen-btn {
    background: transparent !important;
    color: var(--ink-muted) !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 2px !important;
}

    .reading-listen-btn:hover {
        background: var(--gold-tint) !important;
        color: var(--gold-dark) !important;
    }

.reading-body {
    background: var(--surface) !important;
    border-radius: 0 0 3px 3px !important;
}

/* 맥체인 네 본문은 왼쪽 괘선 색으로만 구분한다 (시안에 색 헤더가 없다) */
#reading1-content .reading-body {
    border-left: 3px solid var(--gold) !important;
}

#reading2-content .reading-body {
    border-left: 3px solid var(--pine) !important;
}

#reading3-content .reading-body {
    border-left: 3px solid #6B7F99 !important;
}

#reading4-content .reading-body {
    border-left: 3px solid #A6763B !important;
}

#reading1-content .reading-header, #reading2-content .reading-header,
#reading3-content .reading-header, #reading4-content .reading-header {
    background: var(--surface-alt) !important;
    color: var(--ink) !important;
}

#reading1-content .verse-number, #reading2-content .verse-number,
#reading3-content .verse-number, #reading4-content .verse-number {
    background: transparent !important;
    color: var(--ink-fainter) !important;
}

/* ── 원형 절 번호 흔적 제거 ─────────────────────────────────── */
.verse-number {
    border-radius: 0 !important;
}

/* ── 알약 버튼 (홈 CTA, 완료 버튼) ──────────────────────────── */
.pulse-btn {
    border-radius: 2px !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    font-size: 1.15rem !important;
}

#markCompleteBtn {
    background: var(--gold) !important;
    border-radius: 2px !important;
    font-size: 1.05rem !important;
}

/* ── 찬송가 번호 타일 ───────────────────────────────────────── */
.hymn-number, .hymn-number-lg {
    background: var(--gold) !important;
    border-radius: 2px !important;
}

/* ── 카드 안 강조 영역 ──────────────────────────────────────── */
.card-header.bg-primary, .card-header.bg-secondary,
.card-header.bg-success, .card-header.bg-info, .card-header.bg-warning {
    background: var(--surface-alt) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--rule-faint) !important;
}

    .card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3,
    .card-header.bg-primary h5, .card-header.bg-primary h6,
    .card-header.bg-secondary h6, .card-header.bg-success h5, .card-header.bg-success h6,
    .card-header.bg-info h2, .card-header.bg-warning h2, .card-header.bg-warning h5 {
        color: var(--ink) !important;
    }

.card-header.text-white, .card-header.text-dark {
    color: var(--ink) !important;
}

/* 카드 헤더의 밝은색 버튼도 종이 톤으로 */
.card-header .btn-light {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink-muted) !important;
}

/* ── 사이드바 성경 목록 컨테이너 ────────────────────────────── */
.bible-books-list .book-section + .book-section {
    margin-top: 1.25rem;
}

/* =============================================================
   오른쪽 성경 내비게이터 (_BibleNavigator)
   ============================================================= */

.nav-panel-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-faint);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.nav-panel-count {
    margin-left: auto;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 11.5px;
    color: var(--ink-fainter);
}

/* ── 장·절 번호 격자 ────────────────────────────────────────── */
.num-grid {
    display: grid;
    gap: 1px;
    background: var(--rule-faint);
    border: 1px solid var(--rule-faint);
    /* 장이 150개(시편)면 길어지므로 스크롤로 가둔다 */
    max-height: 210px;
    overflow-y: auto;
}

.num-grid-chapter {
    grid-template-columns: repeat(8, 1fr);
}

.num-grid-verse {
    grid-template-columns: repeat(8, 1fr);
}

.num-cell {
    background: var(--surface);
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
    padding: 7px 2px;
    text-decoration: none;
    display: block;
}

    .num-cell:hover {
        background: var(--gold-tint);
        color: var(--gold-dark);
        text-decoration: none;
    }

    .num-cell.is-current {
        background: var(--gold);
        color: #FDFBF6;
        font-weight: 700;
    }

        .num-cell.is-current:hover {
            background: var(--gold-dark);
            color: #FDFBF6;
        }

/* ── 성경 목록 ──────────────────────────────────────────────── */
.books-grid .book-grid-item {
    display: block;
    text-decoration: none;
}

.book-grid-item .book-name {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

.book-grid-item .book-chapters {
    display: block;
    font-size: 11px;
    color: var(--ink-fainter);
    font-weight: 400;
}

.book-grid-item.is-current {
    background: var(--gold) !important;
}

    .book-grid-item.is-current .book-name,
    .book-grid-item.is-current .book-chapters {
        color: #FDFBF6 !important;
    }

.section-header-nt {
    color: var(--pine) !important;
}

/* ── 인기 구절 ──────────────────────────────────────────────── */
.popular-list a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule-ghost);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
}

    .popular-list a:last-child {
        border-bottom: none;
    }

    .popular-list a:hover {
        color: var(--gold);
    }

/* 사이드바 스크롤바 (장 격자용) */
.num-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

    .num-grid::-webkit-scrollbar {
        width: 5px;
    }

    .num-grid::-webkit-scrollbar-thumb {
        background: var(--rule-strong);
    }

/* =============================================================
   남은 옛 팔레트 정리 (실제 렌더링을 훑어 찾은 것들)
   ============================================================= */

/* 본문 위에 깔린 반투명 흰 판 — 종이색이 비쳐야 한다 */
.main-wrapper {
    background: transparent;
}

/* 아이콘 강조색: 보라·자홍·주황 → 금박과 침엽수 두 가지로 */
.navbar .bi-stars,
.offcanvas .bi-stars {
    color: var(--pine) !important;
}

.navbar .bi-shield-lock-fill,
.offcanvas .bi-shield-lock-fill {
    color: #8C3D2A !important;
}

.navbar .bi-music-note-list,
.offcanvas .bi-music-note-list {
    color: var(--gold) !important;
}

.navbar .bi-book-half,
.offcanvas .bi-book-half {
    color: var(--pine) !important;
}

/* 아웃라인 버튼의 눌린 상태가 부트스트랩 기본 회색으로 남아 있었다 */
.btn-outline-secondary {
    --bs-btn-active-bg: var(--surface-alt);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-border-color: var(--rule-strong);
}

.btn-outline-primary {
    --bs-btn-active-bg: var(--gold-tint);
    --bs-btn-active-color: var(--gold-dark);
    --bs-btn-active-border-color: var(--gold-border);
}

/* 모바일 하단 바 */
.mobile-nav-item.active {
    color: var(--gold) !important;
    background: var(--gold-tint) !important;
}

.mobile-nav-bar, .mobile-bottom-nav {
    background: var(--surface) !important;
    border-top: 1px solid var(--rule-soft) !important;
}

/* 각 뷰가 저마다 정의한 kbd 를 통일 */
kbd {
    background: var(--surface-alt) !important;
    border: 1px solid var(--rule) !important;
    color: var(--ink-muted) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

/* 부트스트랩 기본 닫기 아이콘이 검정이라 종이 위에서 튄다 */
.btn-close {
    filter: sepia(.35) saturate(.4) brightness(.55);
}

/* text-white 를 종이 배경 헤더에 쓴 곳들 */
.card-header.text-white .text-white-50 {
    color: var(--ink-faint) !important;
}

/* 초록/빨강 계열 아웃라인 버튼도 팔레트 안으로 */
.btn-outline-success {
    --bs-btn-color: #4A7C59;
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-hover-bg: #F1F5F0;
    --bs-btn-hover-color: #38553F;
    --bs-btn-hover-border-color: #D5E2D6;
    --bs-btn-active-bg: #F1F5F0;
    --bs-btn-active-color: #38553F;
}

.btn-outline-danger {
    --bs-btn-color: #A6432F;
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-hover-bg: #F7EDEA;
    --bs-btn-hover-color: #6E2E1F;
    --bs-btn-hover-border-color: #D9C0B6;
}

.btn-success {
    --bs-btn-bg: #4A7C59;
    --bs-btn-border-color: #4A7C59;
    --bs-btn-hover-bg: #3C6649;
    --bs-btn-hover-border-color: #3C6649;
    --bs-btn-color: #FDFBF6;
}

.btn-warning {
    --bs-btn-bg: var(--gold-tint);
    --bs-btn-border-color: var(--gold-border);
    --bs-btn-color: var(--gold-dark);
    --bs-btn-hover-bg: #F7EFDA;
    --bs-btn-hover-border-color: var(--gold-border);
    --bs-btn-hover-color: var(--gold-dark);
}