.reading-page{max-width:1080px;margin:24px auto 60px;padding:0 18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;color:#2d3d51}.reading-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:14px}.reading-kicker{font-size:11px;letter-spacing:.16em;color:#4d8b6b;font-weight:800}.reading-topbar h2{margin:4px 0;font-size:27px;color:#344654}.reading-topbar p{margin:0;color:#7b8791;font-size:13px}.reading-user-actions{display:flex;align-items:center;gap:8px}.reading-login-user{font-size:12px;font-weight:700;color:#66758a}.reading-action-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none!important;font-size:21px;font-weight:800}.reading-home{background:#eaf2fb;color:#2367c4;border:1px solid #d5e4f5}.reading-exit{background:#f7efef;color:#a25e64;border:1px solid #ead9db}.reading-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.reading-stat-card{background:linear-gradient(135deg,#f6fbf8,#f9fbfd);border:1px solid #dfe8e3;border-radius:14px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center}.reading-stat-card b{font-size:12px;color:#667469}.reading-stat-card span{font-size:15px;font-weight:800;color:#355445}.reading-stat-card.points span{color:#a05f65}.reading-progress-card{background:#fff;border:1px solid #e0e7e3;border-radius:16px;padding:17px}.reading-progress-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:#485b50}.reading-progress-bar{height:8px;background:#edf2ef;border-radius:999px;overflow:hidden;margin-bottom:14px}.reading-progress-bar i{display:block;height:100%;width:0;background:#4d9a74;transition:width .3s}.chapter-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.chapter-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border:1px solid #e1e7e4;border-radius:10px;text-decoration:none!important;color:#64756a;background:#fafcfa}.chapter-cell span{height:16px;color:#4d9a74;font-weight:900}.chapter-cell b{font-size:12px}.chapter-cell.is-done{background:#edf8f2;border-color:#cbe5d5;color:#347052}.reading-guide{margin-top:10px;color:#859089;font-size:11px;text-align:center}.reading-chapter-shell{position:relative;background:linear-gradient(135deg,#f8fbf9,#fbfaf7);border:1px solid #dfe7e3;border-radius:18px;padding:16px}.reading-chapter-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;color:#7b8781;font-size:11px}.reading-viewport{height:360px;overflow-y:auto;scrollbar-width:none;border-radius:14px;background:#fff;border:1px solid #e2e8e4;padding:22px 24px;box-sizing:border-box;outline:none}.reading-viewport::-webkit-scrollbar{display:none}.reading-track{padding-bottom:80px}.reading-verse{margin:0 0 18px;font-size:18px;line-height:1.85;color:#2f3e48;word-break:keep-all}.reading-verse b{display:inline-block;min-width:26px;color:#4b8a69;font-size:12px;vertical-align:top;padding-top:5px}.reading-end-spacer{height:160px}.reading-idle-overlay{position:absolute;inset:55px 16px 16px;display:flex;align-items:center;justify-content:center;background:rgba(250,251,249,.92);border-radius:14px;z-index:5;text-align:center}.reading-idle-overlay strong{font-size:18px;color:#44564c}.reading-idle-overlay p{font-size:12px;color:#7c8981}.reading-primary-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:#3f8f69;color:#fff!important;text-decoration:none!important;padding:10px 17px;font-size:13px;font-weight:800;cursor:pointer}.reading-complete-box,.reading-next-box{text-align:center;margin-top:13px;padding:15px;border-radius:13px;background:#edf8f2;border:1px solid #cfe7d9;color:#37684f}.reading-complete-box p{font-size:12px}.is-hidden{display:none!important}@media(max-width:760px){.reading-page{padding:0 12px;margin-top:15px}.reading-topbar{align-items:flex-start}.reading-topbar p{display:none}.reading-topbar h2{font-size:23px}.reading-login-user{font-size:11px;max-width:105px;overflow:hidden;text-overflow:ellipsis}.reading-action-icon{width:31px;height:31px;font-size:19px}.reading-stats{grid-template-columns:1fr}.chapter-grid{grid-template-columns:repeat(5,1fr)}.reading-viewport{height:320px;padding:18px 16px}.reading-verse{font-size:17px;line-height:1.9}}
/* v2 reading controls */
.reading-controls{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.reading-control-btn{border:1px solid #d9e4de;background:#fff;color:#5d7065;border-radius:9px;padding:7px 11px;font-size:11px;font-weight:800;cursor:pointer}
.reading-control-btn:hover{background:#f4f8f5;border-color:#c7dacf}
.reading-speed-label{min-width:62px;text-align:center;color:#4d7c62;font-size:11px;font-weight:900}
.reading-pause-btn{background:#f8f5ed;color:#816c49;border-color:#e7ddc8}
.reading-resume-btn{background:#edf8f2;color:#3d7859;border-color:#cfe5d8}
.reading-longpause-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(24,31,28,.58);backdrop-filter:blur(2px)}
.reading-longpause-dialog{width:min(420px,calc(100% - 36px));background:#fff;border-radius:18px;padding:26px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.reading-longpause-dialog strong{display:block;margin-bottom:8px;font-size:21px;color:#35483d}
.reading-longpause-dialog p{margin:0 0 16px;color:#748078;font-size:13px;line-height:1.6}


/* v10: 일시정지/재생 아이콘 통일 */
.reading-pause-btn,
.reading-resume-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.reading-control-icon{
    width:14px;
    height:14px;
    flex:0 0 14px;
    display:block;
    fill:#2367c4;
}
.reading-pause-btn .reading-control-icon,
.reading-resume-btn .reading-control-icon{
    fill:#2367c4;
}

/* v11: pause/play buttons same church blue */
.reading-pause-btn,
.reading-resume-btn{
    color:#2367c4 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.reading-pause-btn .reading-control-icon,
.reading-resume-btn .reading-control-icon{
    fill:#2367c4 !important;
}


/* v12: 읽기 완료 메시지 + 다음 동작 */
.reading-reward-message{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:0 0 14px;
    padding:17px 18px;
    border:1px solid #cfe3d7;
    border-radius:15px;
    background:linear-gradient(135deg,#edf8f2 0%,#f8fbf9 100%);
    box-shadow:0 7px 20px rgba(62,111,82,.08);
}
.reading-reward-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#4d9a74;
    color:#fff;
    font-size:18px;
    font-weight:900;
}
.reading-reward-copy strong{
    display:block;
    margin:0 0 4px;
    color:#315e49;
    font-size:16px;
}
.reading-reward-copy p{
    margin:0 0 8px;
    color:#566e61;
    font-size:13px;
    line-height:1.55;
}
.reading-reward-copy blockquote{
    margin:0;
    padding:9px 11px;
    border-left:3px solid #7caf91;
    border-radius:0 8px 8px 0;
    background:rgba(255,255,255,.72);
    color:#4c6155;
    font-size:12px;
    line-height:1.55;
}
.reading-reward-copy blockquote span{
    margin-left:5px;
    color:#7c8b83;
    font-size:11px;
}
.reading-next-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
}
.reading-secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #cfdbe8;
    border-radius:10px;
    background:#f4f8fc;
    color:#2367c4!important;
    text-decoration:none!important;
    padding:10px 17px;
    font-size:13px;
    font-weight:800;
}
.reading-secondary-btn:hover{
    background:#eaf2fb;
    border-color:#b9cfe7;
}
@media(max-width:600px){
    .reading-reward-message{padding:14px;gap:10px}
    .reading-next-actions>a{flex:1;min-width:120px}
}


/* v20: 개인 누적 성경읽기표 */
.reading-personal-link-row{display:flex;justify-content:flex-end;margin:0 0 10px}
.reading-personal-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border:1px solid #cfe0d6;border-radius:999px;background:#f1f8f4;color:#397459!important;text-decoration:none!important;font-size:12px;font-weight:800}
.reading-personal-link:hover{background:#e8f4ed}

.my-reading-page{max-width:1360px}
.my-reading-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.my-reading-summary>div{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid #dfe8e3;border-radius:14px;background:linear-gradient(135deg,#f6fbf8,#fbfcfd)}
.my-reading-summary b{font-size:12px;color:#68766d}
.my-reading-summary strong{font-size:16px;color:#35654d}

.my-reading-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}
.my-reading-sidebar{border:1px solid #dfe7e3;border-radius:16px;background:#fff;overflow:hidden}
.my-reading-testament-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;background:#f1f4f2}
.my-reading-testament-tab{border:0;border-radius:9px;background:transparent;padding:9px 8px;color:#728078;font-size:13px;font-weight:900;cursor:pointer}
.my-reading-testament-tab.is-active{background:#fff;color:#397459;box-shadow:0 2px 8px rgba(50,80,62,.08)}
.my-reading-book-panel{display:none;max-height:620px;overflow-y:auto;padding:7px}
.my-reading-book-panel.is-active{display:block}
.my-reading-book-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:9px;background:transparent;padding:9px 10px;text-align:left;color:#58685f;font-size:12px;cursor:pointer}
.my-reading-book-btn:hover{background:#f4f8f5}
.my-reading-book-btn.is-active{background:#eaf5ef;color:#2f6d4d;font-weight:900}
.my-reading-book-btn em{font-style:normal;color:#8a9990;font-size:10px}

.my-reading-chapter-area{min-width:0;border:1px solid #dfe7e3;border-radius:16px;background:#fff;padding:18px}
.my-reading-chapter-panel{display:none}
.my-reading-chapter-panel.is-active{display:block}
.my-reading-chapter-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px}
.my-reading-chapter-head span{display:block;color:#6d8a79;font-size:10px;font-weight:800}
.my-reading-chapter-head h3{margin:2px 0 0;color:#344f40;font-size:21px}
.my-reading-chapter-head p{margin:0;color:#87938c;font-size:11px}
.my-reading-chapter-grid{display:grid;grid-template-columns:repeat(8,minmax(58px,1fr));gap:8px}
.my-reading-chapter{min-height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #e1e8e4;border-radius:11px;background:#fafcfb;color:#66766d!important;text-decoration:none!important}
.my-reading-chapter:hover{border-color:#bdd8c8;background:#f2f9f5}
.my-reading-chapter b{font-size:11px}
.my-reading-count-box{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #cdd9d2;border-radius:5px;background:#fff;color:#99a49e;font-size:10px;font-weight:900;line-height:1}
.my-reading-chapter.has-read{background:#edf8f2;border-color:#cae4d5;color:#347052!important}
.my-reading-chapter.has-read .my-reading-count-box{background:#4d9a74;border-color:#4d9a74;color:#fff}
.my-reading-chapter.is-disabled{opacity:.45;cursor:not-allowed}
.my-reading-chapter.is-disabled:hover{background:#fafcfb;border-color:#e1e8e4}

@media(max-width:779px){
    .my-reading-chapter-grid{grid-template-columns:repeat(6,minmax(54px,1fr))}
}
@media(max-width:700px){
    .my-reading-summary{grid-template-columns:1fr}
    .my-reading-layout{grid-template-columns:1fr}
    .my-reading-book-panel{max-height:230px}
    .my-reading-chapter-area{padding:13px}
    .my-reading-chapter-head{align-items:flex-start;flex-direction:column;gap:4px}
    .my-reading-chapter-grid{grid-template-columns:repeat(4,minmax(52px,1fr));gap:7px}
    .my-reading-chapter{min-height:60px}
    .reading-personal-link-row{justify-content:center}
}


/* v21: 개역개정 + English (WEB) 병행 성경읽기 */
.reading-version-progress-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.reading-version-card .reading-progress-head > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.reading-version-name{
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    color:#6d8293;
}
.reading-current-version{
    display:inline-flex;
    margin-top:5px;
    padding:3px 8px;
    border-radius:999px;
    background:#eef5fb;
    color:#3970a6;
    font-size:10px;
    font-weight:800;
}
.reading-version-switch{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    margin:0 0 12px;
}
.reading-version-switch a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 13px;
    border:1px solid #dbe4eb;
    border-radius:10px;
    background:#fff;
    color:#687989!important;
    text-decoration:none!important;
    font-size:11px;
    font-weight:800;
}
.reading-version-switch a.is-active{
    border-color:#9fc6af;
    background:#edf8f2;
    color:#347052!important;
}
.my-reading-version-row{
    display:flex;
    justify-content:flex-end;
    margin:-2px 0 10px;
}
.my-reading-version-switch{
    margin:0;
}
@media(max-width:760px){
    .reading-version-progress-grid{grid-template-columns:1fr}
    .reading-version-switch{justify-content:stretch}
    .reading-version-switch a{flex:1}
    .my-reading-version-row{justify-content:stretch}
}

/* =========================================================
   BiblePang Blue UI v2
   Common subpage palette mapping
   ========================================================= */

.reading-page{
    color:var(--bps-text,#314967)!important;
}

/* Header */
.reading-kicker{color:var(--bps-blue,#155EEF)!important}
.reading-topbar h2{color:var(--bps-title,#0B2348)!important}
.reading-topbar p,
.reading-login-user{color:var(--bps-muted,#71839B)!important}

.reading-home{
    background:var(--bps-blue-soft,#EAF2FF)!important;
    color:var(--bps-blue,#155EEF)!important;
    border-color:var(--bps-blue-line,#B5CBED)!important;
}

/* Summary / cards */
.reading-stat-card,
.reading-progress-card,
.my-reading-summary>div,
.my-reading-sidebar,
.my-reading-chapter-area,
.reading-chapter-shell{
    background:var(--bps-surface,#fff)!important;
    border-color:var(--bps-line,#C8D6E8)!important;
    box-shadow:0 6px 18px rgba(28,65,117,.045)!important;
}

.reading-stat-card{
    background:linear-gradient(135deg,#F5F9FF,#FBFDFF)!important;
}
.reading-stat-card b{color:#607793!important}
.reading-stat-card span{color:#234F8D!important}
.reading-stat-card.points span{color:#155EEF!important}

.reading-progress-head{color:#405B79!important}
.reading-progress-bar{background:#E9F0F8!important}
.reading-progress-bar i{background:#155EEF!important}

/* Personal reading table */
.my-reading-summary b{color:#607590!important}
.my-reading-summary strong{color:#155EEF!important}

.my-reading-testament-tabs{
    background:#EDF3FA!important;
    border-bottom:1px solid var(--bps-line,#C8D6E8)!important;
}

.my-reading-testament-tab{
    color:#667B95!important;
}

.my-reading-testament-tab.is-active{
    background:#fff!important;
    color:#155EEF!important;
    border:1px solid #B6CAEA!important;
    box-shadow:0 3px 10px rgba(21,94,239,.08)!important;
}

.my-reading-book-btn{
    color:#4B6482!important;
    border:1px solid transparent!important;
}

.my-reading-book-btn:hover{
    background:#F2F7FE!important;
    border-color:#D5E1F1!important;
}

.my-reading-book-btn.is-active{
    background:#EAF2FF!important;
    color:#155EEF!important;
    border-color:#B7CCED!important;
}

.my-reading-book-btn em{color:#8596AA!important}

.my-reading-chapter-head span{color:#4C78B4!important}
.my-reading-chapter-head h3{color:#17365F!important}
.my-reading-chapter-head p{color:#7D8DA0!important}

.my-reading-chapter{
    background:#FBFDFF!important;
    color:#526B88!important;
    border-color:#C9D7E8!important;
}

.my-reading-chapter:hover{
    background:#F2F7FF!important;
    border-color:#91AFE0!important;
    color:#155EEF!important;
    box-shadow:0 5px 13px rgba(21,94,239,.07)!important;
}

.my-reading-count-box{
    background:#fff!important;
    color:#8596AA!important;
    border-color:#B9C9DD!important;
}

.my-reading-chapter.has-read{
    background:#EAF2FF!important;
    border-color:#9DB9E8!important;
    color:#155EEF!important;
}

.my-reading-chapter.has-read .my-reading-count-box{
    background:#155EEF!important;
    border-color:#155EEF!important;
    color:#fff!important;
}

/* Version switch */
.reading-version-switch a{
    border-color:#C4D3E5!important;
    color:#61748C!important;
}

.reading-version-switch a:hover{
    background:#F2F7FE!important;
    border-color:#AFC5E4!important;
}

.reading-version-switch a.is-active{
    background:#EAF2FF!important;
    border-color:#96B4E6!important;
    color:#155EEF!important;
}

.reading-current-version{
    background:#EAF2FF!important;
    color:#155EEF!important;
    border:1px solid #B8CCEB!important;
}

/* Chapter reading controls */
.reading-chapter-meta{color:#74869B!important}
.reading-control-btn{
    background:#fff!important;
    color:#506B89!important;
    border-color:#BFCFE1!important;
}
.reading-control-btn:hover{
    background:#F2F7FE!important;
    border-color:#97B3DB!important;
    color:#155EEF!important;
}
.reading-speed-label{color:#155EEF!important}

.reading-pause-btn,
.reading-resume-btn{
    color:#155EEF!important;
    border-color:#AEC4E5!important;
}
.reading-pause-btn .reading-control-icon,
.reading-resume-btn .reading-control-icon{
    fill:#155EEF!important;
}

.reading-viewport{
    background:#fff!important;
    border-color:#C7D5E6!important;
}
.reading-verse{color:#263E5A!important}
.reading-verse b{color:#155EEF!important}

/* Overlay / completion */
.reading-idle-overlay{
    background:rgba(247,250,254,.95)!important;
}
.reading-idle-overlay strong{color:#17365F!important}
.reading-idle-overlay p{color:#71839B!important}

.reading-primary-btn{
    background:#155EEF!important;
    border:1px solid #155EEF!important;
    color:#fff!important;
}
.reading-primary-btn:hover{background:#0B4BD4!important}

.reading-secondary-btn{
    background:#F2F7FE!important;
    border-color:#B8CAE2!important;
    color:#155EEF!important;
}
.reading-secondary-btn:hover{
    background:#E7F0FD!important;
    border-color:#91AFE0!important;
}

.reading-complete-box,
.reading-next-box{
    background:#EEF5FF!important;
    border-color:#B4CAEA!important;
    color:#345F98!important;
}

.reading-reward-message{
    background:linear-gradient(135deg,#EEF5FF 0%,#F8FBFF 100%)!important;
    border-color:#B8CDEA!important;
    box-shadow:0 7px 20px rgba(21,94,239,.07)!important;
}
.reading-reward-icon{background:#155EEF!important}
.reading-reward-copy strong{color:#174B92!important}
.reading-reward-copy p{color:#536E8D!important}
.reading-reward-copy blockquote{
    background:rgba(255,255,255,.78)!important;
    border-left-color:#6D9AE0!important;
    color:#4B6583!important;
}
.reading-reward-copy blockquote span{color:#8192A7!important}

/* Stronger outline for major objects */
.my-reading-sidebar,
.my-reading-chapter-area,
.reading-chapter-shell,
.reading-progress-card{
    border-width:1px!important;
}

/* Dark */
html.bp-dark .reading-page{color:#D7E1EF!important}
html.bp-dark .reading-topbar h2,
html.bp-dark .my-reading-chapter-head h3{color:#F1F5FC!important}
html.bp-dark .reading-topbar p,
html.bp-dark .reading-login-user,
html.bp-dark .my-reading-chapter-head p{color:#97A6B9!important}

html.bp-dark .reading-stat-card,
html.bp-dark .reading-progress-card,
html.bp-dark .my-reading-summary>div,
html.bp-dark .my-reading-sidebar,
html.bp-dark .my-reading-chapter-area,
html.bp-dark .reading-chapter-shell{
    background:#151F2E!important;
    border-color:#314156!important;
}

html.bp-dark .my-reading-testament-tabs{background:#111A29!important;border-color:#314156!important}
html.bp-dark .my-reading-testament-tab{color:#A9B7C8!important}
html.bp-dark .my-reading-testament-tab.is-active{
    background:#1B2A3E!important;
    color:#9FC0FF!important;
    border-color:#405F8A!important;
}

html.bp-dark .my-reading-book-btn{color:#B6C3D2!important}
html.bp-dark .my-reading-book-btn:hover{
    background:#172438!important;
    border-color:#34465F!important;
}
html.bp-dark .my-reading-book-btn.is-active{
    background:#182B47!important;
    color:#9FC0FF!important;
    border-color:#3D6090!important;
}

html.bp-dark .my-reading-chapter{
    background:#101927!important;
    border-color:#314257!important;
    color:#BCC8D8!important;
}
html.bp-dark .my-reading-chapter:hover{
    background:#17263A!important;
    border-color:#4D72A3!important;
    color:#9FC0FF!important;
}
html.bp-dark .my-reading-chapter.has-read{
    background:#162A46!important;
    border-color:#3E6599!important;
    color:#9FC0FF!important;
}
html.bp-dark .my-reading-count-box{
    background:#101927!important;
    border-color:#41536B!important;
    color:#8495AA!important;
}
html.bp-dark .my-reading-chapter.has-read .my-reading-count-box{
    background:#2A67C7!important;
    border-color:#2A67C7!important;
    color:#fff!important;
}

html.bp-dark .reading-version-switch a,
html.bp-dark .reading-control-btn{
    background:#151F2E!important;
    border-color:#40516A!important;
    color:#B8C6D8!important;
}
html.bp-dark .reading-version-switch a.is-active,
html.bp-dark .reading-current-version{
    background:#182B47!important;
    border-color:#426592!important;
    color:#9FC0FF!important;
}

html.bp-dark .reading-viewport{
    background:#101927!important;
    border-color:#34465C!important;
}
html.bp-dark .reading-verse{color:#D8E1EC!important}
html.bp-dark .reading-verse b{color:#8FB8FF!important}

html.bp-dark .reading-reward-message,
html.bp-dark .reading-complete-box,
html.bp-dark .reading-next-box{
    background:#14263B!important;
    border-color:#39597F!important;
    color:#CBD8E8!important;
}
html.bp-dark .reading-idle-overlay{
    background:rgba(13,22,36,.95)!important;
}
html.bp-dark .reading-longpause-dialog{
    background:#151F2E!important;
    border:1px solid #34465C!important;
    color:#DCE5F2!important;
}

/* BiblePang reading book chapter progress */
.my-reading-book-btn .my-reading-book-progress{
    margin-left:auto;
    flex:0 0 auto;
    min-width:44px;
    text-align:right;
    color:#6E84A0!important;
    font-size:11px!important;
    font-weight:800;
    letter-spacing:0;
}

.my-reading-book-btn.is-active .my-reading-book-progress{
    color:#155EEF!important;
}

.my-reading-book-btn:hover .my-reading-book-progress{
    color:#155EEF!important;
}

html.bp-dark .my-reading-book-btn .my-reading-book-progress{
    color:#8193AA!important;
}

html.bp-dark .my-reading-book-btn.is-active .my-reading-book-progress,
html.bp-dark .my-reading-book-btn:hover .my-reading-book-progress{
    color:#9FC0FF!important;
}



/* =========================================================
   BiblePang Reading Dashboard Header
   Detective V5 visual language / Reading emerald theme
   ========================================================= */

.reading-page.my-reading-page{
    --reading-light:#c8f4df;
    --reading-mid:#58c696;
    --reading-dark:#15845c;
    --reading-deep:#0b5e43;
    --reading-ink:#123d31;
}

/* old standalone topbar/summary are replaced by one integrated dashboard */
.reading-dashboard-head{
    display:grid;
    grid-template-columns:minmax(285px,1.35fr) minmax(580px,2.65fr) 92px;
    gap:12px;
    align-items:stretch;
    width:100%;
    box-sizing:border-box;
    padding:11px 13px;
    margin:0 0 14px;
    border:1px solid #cce6da;
    border-radius:19px;
    background:
        radial-gradient(circle at 3% 16%,rgba(134,231,188,.25),transparent 25%),
        radial-gradient(circle at 97% 90%,rgba(91,203,158,.13),transparent 21%),
        linear-gradient(110deg,#f8fffb 0%,#eefbf5 58%,#f8fffc 100%);
    box-shadow:
        0 5px 18px rgba(34,104,75,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.reading-dashboard-brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}
.reading-game-logo{
    width:78px;
    height:78px;
    flex:0 0 78px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 3px 13px rgba(24,117,80,.14);
}
.reading-dashboard-copy{
    min-width:0;
}
.reading-dashboard-copy .reading-kicker{
    display:block;
    margin:0;
    color:#12966a;
    font-size:9.5px;
    letter-spacing:.13em;
    font-weight:950;
    white-space:nowrap;
}
.reading-dashboard-copy h2{
    margin:2px 0 2px;
    color:#102f29;
    font-size:24px;
    line-height:1.16;
    font-weight:950;
    letter-spacing:-.035em;
}
.reading-dashboard-copy p{
    margin:0;
    color:#5d786e;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

/* Four dashboard stat cards */
.reading-dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    min-width:0;
}
.reading-dashboard-stat{
    display:grid;
    grid-template-columns:41px minmax(0,1fr);
    gap:7px;
    align-items:center;
    min-width:0;
    padding:8px 9px;
    border:1px solid #d8e8e1;
    border-radius:13px;
    background:rgba(255,255,255,.90);
    box-shadow:0 3px 11px rgba(39,96,73,.065);
}
.reading-dashboard-icon{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.reading-dashboard-icon svg{
    width:35px;
    height:35px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.reading-dashboard-statcopy{
    min-width:0;
}
.reading-dashboard-statcopy>span{
    display:block;
    margin-bottom:2px;
    overflow:hidden;
    color:#425f55;
    font-size:9.5px;
    font-weight:850;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.reading-dashboard-statcopy strong{
    display:block;
    color:#123c31;
    font-size:20px;
    line-height:1.05;
    font-weight:950;
    letter-spacing:-.035em;
    white-space:nowrap;
}
.reading-dashboard-statcopy strong small{
    margin-left:2px;
    color:#56786c;
    font-size:9px;
    font-weight:850;
}
.reading-dashboard-stat.stat-books .reading-dashboard-icon{color:#19a96f}
.reading-dashboard-stat.stat-chapters .reading-dashboard-icon{color:#31b7ad}
.reading-dashboard-stat.stat-cycles .reading-dashboard-icon{color:#ef8d33}
.reading-dashboard-stat.stat-points .reading-dashboard-icon{color:#e8a41a}

/* user + home */
.reading-dashboard-user{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:80px;
}
.reading-dashboard-user .reading-login-user{
    max-width:105px;
    overflow:hidden;
    color:#163d32;
    font-size:11px;
    font-weight:950;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.reading-welcome{
    color:#718b81;
    font-size:9px;
    font-weight:700;
}
.reading-dashboard-user .reading-home{
    width:41px;
    height:41px;
    margin-top:4px;
    padding:0;
    border:1px solid #b9ddce;
    border-radius:11px;
    background:rgba(255,255,255,.88);
    color:#0c9a68;
    box-shadow:0 3px 10px rgba(29,111,79,.08);
}
.reading-dashboard-user .reading-home svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* version switch visually connected to the reading theme */
.my-reading-version-row{
    margin:0 0 12px;
}
.reading-version-switch{
    border-color:#cce4d9!important;
    background:#f0faf5!important;
}
.reading-version-switch a{
    color:#607c70!important;
}
.reading-version-switch a.is-active{
    color:#16754f!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(43,116,84,.08)!important;
}

/* dark mode */
html.bp-dark .reading-dashboard-head{
    background:
        radial-gradient(circle at 4% 12%,rgba(54,170,122,.12),transparent 26%),
        linear-gradient(115deg,#14261f,#111d19 58%,#142820)!important;
    border-color:#31574a!important;
    box-shadow:none!important;
}
html.bp-dark .reading-dashboard-copy h2,
html.bp-dark .reading-dashboard-user .reading-login-user{
    color:#edf8f3!important;
}
html.bp-dark .reading-dashboard-copy p,
html.bp-dark .reading-welcome{
    color:#9eb9ad!important;
}
html.bp-dark .reading-dashboard-stat{
    background:#172820!important;
    border-color:#31574a!important;
    box-shadow:none!important;
}
html.bp-dark .reading-dashboard-statcopy>span{
    color:#a9c0b6!important;
}
html.bp-dark .reading-dashboard-statcopy strong{
    color:#effaf5!important;
}
html.bp-dark .reading-dashboard-statcopy strong small{
    color:#9fb9ae!important;
}
html.bp-dark .reading-dashboard-user .reading-home{
    background:#172a22!important;
    border-color:#3f6958!important;
    color:#81dbb4!important;
}

/* responsive */
@media(max-width:1100px){
    .reading-dashboard-head{
        grid-template-columns:1fr;
    }
    .reading-dashboard-user{
        position:absolute;
        right:34px;
        top:31px;
        flex-direction:row;
    }
    .reading-welcome{display:none}
}
@media(max-width:760px){
    .reading-dashboard-head{
        padding:10px;
    }
    .reading-game-logo{
        width:64px;
        height:64px;
        flex-basis:64px;
    }
    .reading-dashboard-copy h2{
        font-size:21px;
    }
    .reading-dashboard-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .reading-dashboard-user{
        position:static;
        justify-content:flex-end;
    }
}
@media(max-width:480px){
    .reading-dashboard-stats{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BiblePang Reading Theme V2
   7-color random theme + A sidebar + B chapter button field
   ========================================================= */

.reading-page.my-reading-page{
    --reading-theme-light:#cef3dc;
    --reading-theme-mid:#62c88b;
    --reading-theme-dark:#258256;
    --reading-theme-deep:#15593a;
    --reading-theme-ink:#193b31;
}

/* ---------- Header follows the current random theme ---------- */
.reading-dashboard-head{
    border-color:color-mix(in srgb,var(--reading-theme-mid) 34%,#d4e1ec)!important;
    background:
        radial-gradient(circle at 2% 14%,
            color-mix(in srgb,var(--reading-theme-light) 42%,transparent),
            transparent 27%),
        radial-gradient(circle at 97% 90%,
            color-mix(in srgb,var(--reading-theme-mid) 14%,transparent),
            transparent 22%),
        linear-gradient(112deg,
            color-mix(in srgb,var(--reading-theme-light) 24%,white) 0%,
            #fbfdff 48%,
            color-mix(in srgb,var(--reading-theme-light) 16%,white) 100%)!important;
}
.reading-dashboard-copy .reading-kicker{
    color:var(--reading-theme-dark)!important;
}
.reading-dashboard-stat{
    border-color:color-mix(in srgb,var(--reading-theme-mid) 23%,#d8e4ee)!important;
}
.reading-dashboard-statcopy strong{
    color:color-mix(in srgb,var(--reading-theme-deep) 82%,#15304f)!important;
}
.reading-dashboard-user .reading-home{
    color:var(--reading-theme-dark)!important;
    border-color:color-mix(in srgb,var(--reading-theme-mid) 36%,#c9d8e8)!important;
}
.reading-version-switch{
    background:color-mix(in srgb,var(--reading-theme-light) 18%,#f5f8fb)!important;
    border-color:color-mix(in srgb,var(--reading-theme-mid) 30%,#d4dfeb)!important;
}
.reading-version-switch a.is-active{
    color:var(--reading-theme-dark)!important;
    border-color:color-mix(in srgb,var(--reading-theme-mid) 45%,#c6d7e8)!important;
}

/* =========================================================
   A — 구약/신약 + 책 목록
   현재 인덱스 테마에 맞춰 패널 전체가 변화
   ========================================================= */
.my-reading-sidebar{
    border-color:color-mix(in srgb,var(--reading-theme-mid) 30%,#d4dfeb)!important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb,var(--reading-theme-light) 25%,white) 0%,
            color-mix(in srgb,var(--reading-theme-light) 11%,#fbfdff) 48%,
            color-mix(in srgb,var(--reading-theme-mid) 7%,white) 100%
        )!important;
    box-shadow:
        0 7px 20px color-mix(in srgb,var(--reading-theme-dark) 8%,transparent)!important;
}

.my-reading-testament-tabs{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-light) 35%,white),
            color-mix(in srgb,var(--reading-theme-mid) 13%,white)
        )!important;
    border-bottom:
        1px solid color-mix(in srgb,var(--reading-theme-mid) 30%,#d0dce8)!important;
}

.my-reading-testament-tab{
    color:color-mix(in srgb,var(--reading-theme-deep) 68%,#687b91)!important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.my-reading-testament-tab:hover{
    background:rgba(255,255,255,.52)!important;
}
.my-reading-testament-tab.is-active{
    color:var(--reading-theme-deep)!important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            color-mix(in srgb,var(--reading-theme-light) 16%,white)
        )!important;
    border:
        1px solid color-mix(in srgb,var(--reading-theme-mid) 45%,#c7d7e8)!important;
    box-shadow:
        0 4px 11px color-mix(in srgb,var(--reading-theme-dark) 11%,transparent),
        inset 0 1px 0 rgba(255,255,255,.92)!important;
}

.my-reading-book-panel{
    scrollbar-color:
        color-mix(in srgb,var(--reading-theme-mid) 58%,#92a4b5)
        color-mix(in srgb,var(--reading-theme-light) 14%,#f5f7fa);
}
.my-reading-book-btn{
    color:color-mix(in srgb,var(--reading-theme-deep) 60%,#536980)!important;
    border:1px solid transparent!important;
    transition:all .16s ease;
}
.my-reading-book-btn:hover{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-light) 34%,white),
            color-mix(in srgb,var(--reading-theme-mid) 10%,white)
        )!important;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 28%,#d4dfeb)!important;
    transform:translateX(2px);
}
.my-reading-book-btn.is-active{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-light) 55%,white),
            color-mix(in srgb,var(--reading-theme-mid) 19%,white)
        )!important;
    color:var(--reading-theme-deep)!important;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 50%,#c7d7e8)!important;
    box-shadow:
        0 4px 10px color-mix(in srgb,var(--reading-theme-dark) 9%,transparent)!important;
}
.my-reading-book-btn em{
    color:color-mix(in srgb,var(--reading-theme-dark) 62%,#8292a4)!important;
}

/* =========================================================
   B — 책별 장 버튼
   각각 따로 노는 카드가 아니라 전체가 한 세트처럼 보이게 함
   + 퍼즐 셀처럼 빛나는 단추 느낌
   + 그리드 전체에 하나의 연속 그라데이션
   ========================================================= */
.my-reading-chapter-area{
    position:relative;
    overflow:hidden;
    border-color:color-mix(in srgb,var(--reading-theme-mid) 26%,#d3dfeb)!important;
    background:
        radial-gradient(circle at 7% 5%,
            color-mix(in srgb,var(--reading-theme-light) 28%,transparent),
            transparent 31%),
        radial-gradient(circle at 92% 92%,
            color-mix(in srgb,var(--reading-theme-mid) 12%,transparent),
            transparent 34%),
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--reading-theme-light) 17%,white) 0%,
            #fbfdff 52%,
            color-mix(in srgb,var(--reading-theme-light) 10%,white) 100%
        )!important;
    box-shadow:
        0 7px 22px color-mix(in srgb,var(--reading-theme-dark) 7%,transparent)!important;
}
.my-reading-chapter-area::before{
    content:"";
    position:absolute;
    inset:67px 14px 14px;
    border-radius:14px;
    pointer-events:none;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-light) 45%,transparent) 0%,
            color-mix(in srgb,var(--reading-theme-mid) 12%,transparent) 48%,
            color-mix(in srgb,var(--reading-theme-dark) 8%,transparent) 100%
        );
    opacity:.58;
}
.my-reading-chapter-panel{
    position:relative;
    z-index:1;
}

.my-reading-chapter-head span{
    color:var(--reading-theme-dark)!important;
}
.my-reading-chapter-head h3{
    color:color-mix(in srgb,var(--reading-theme-deep) 82%,#15304f)!important;
}

/* unified field around chapter buttons */
.my-reading-chapter-grid{
    position:relative;
    isolation:isolate;
    padding:7px;
    border:
        1px solid color-mix(in srgb,var(--reading-theme-mid) 22%,#d4dfeb);
    border-radius:15px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-light) 34%,white) 0%,
            color-mix(in srgb,var(--reading-theme-light) 16%,white) 42%,
            color-mix(in srgb,var(--reading-theme-mid) 10%,white) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 4px 14px color-mix(in srgb,var(--reading-theme-dark) 6%,transparent);
}

/* shiny chapter buttons */
.my-reading-chapter{
    position:relative;
    overflow:hidden;
    min-height:65px!important;
    border:
        1px solid color-mix(in srgb,var(--reading-theme-mid) 32%,#c9d7e7)!important;
    border-radius:12px!important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92) 0%,
            color-mix(in srgb,var(--reading-theme-light) 34%,white) 52%,
            color-mix(in srgb,var(--reading-theme-mid) 12%,white) 100%
        )!important;
    color:color-mix(in srgb,var(--reading-theme-deep) 66%,#4f6680)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -7px 14px color-mix(in srgb,var(--reading-theme-mid) 5%,transparent),
        0 4px 9px color-mix(in srgb,var(--reading-theme-dark) 7%,transparent)!important;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease;
}
.my-reading-chapter::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:5px;
    height:34%;
    border-radius:999px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,0)
        );
    pointer-events:none;
}
.my-reading-chapter::after{
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    top:6px;
    right:8px;
    border-radius:50%;
    background:
        radial-gradient(circle,
            rgba(255,255,255,.88) 0 14%,
            rgba(255,255,255,.36) 15% 34%,
            transparent 35%);
    opacity:.56;
    pointer-events:none;
}
.my-reading-chapter:hover{
    transform:translateY(-2px);
    filter:saturate(1.06) brightness(1.015);
    border-color:var(--reading-theme-mid)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 7px 16px color-mix(in srgb,var(--reading-theme-dark) 13%,transparent)!important;
}
.my-reading-chapter b{
    position:relative;
    z-index:2;
    color:inherit!important;
    font-weight:900;
}
.my-reading-count-box{
    position:relative;
    z-index:2;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 38%,#becddd)!important;
    background:rgba(255,255,255,.72)!important;
    color:color-mix(in srgb,var(--reading-theme-dark) 60%,#7f91a4)!important;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.65);
}
.my-reading-chapter.has-read{
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--reading-theme-light) 66%,white),
            color-mix(in srgb,var(--reading-theme-mid) 30%,white)
        )!important;
    color:var(--reading-theme-deep)!important;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 64%,#b3c8dc)!important;
}
.my-reading-chapter.has-read .my-reading-count-box{
    background:var(--reading-theme-dark)!important;
    border-color:var(--reading-theme-dark)!important;
    color:#fff!important;
    box-shadow:
        0 2px 6px color-mix(in srgb,var(--reading-theme-dark) 22%,transparent)!important;
}
.my-reading-chapter.is-disabled{
    opacity:.46!important;
    filter:grayscale(.28);
}

/* ---------- Dark mode ---------- */
html.bp-dark .my-reading-sidebar,
html.bp-dark .my-reading-chapter-area{
    background:
        linear-gradient(
            145deg,
            #14251f,
            color-mix(in srgb,var(--reading-theme-dark) 7%,#101b18)
        )!important;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 24%,#345246)!important;
}
html.bp-dark .my-reading-testament-tabs{
    background:
        linear-gradient(
            135deg,
            #13231d,
            color-mix(in srgb,var(--reading-theme-dark) 7%,#111c18)
        )!important;
}
html.bp-dark .my-reading-testament-tab{
    color:#a8bbb3!important;
}
html.bp-dark .my-reading-testament-tab.is-active{
    background:
        linear-gradient(
            145deg,
            #1a2f27,
            color-mix(in srgb,var(--reading-theme-dark) 16%,#172820)
        )!important;
    color:#eff9f5!important;
}
html.bp-dark .my-reading-book-btn{
    color:#b4c5be!important;
}
html.bp-dark .my-reading-book-btn.is-active{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-mid) 15%,#15261f),
            color-mix(in srgb,var(--reading-theme-dark) 11%,#13211c)
        )!important;
    color:#eef9f4!important;
}
html.bp-dark .my-reading-chapter-grid{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--reading-theme-dark) 11%,#111d19),
            #111a18
        )!important;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 22%,#345247)!important;
}
html.bp-dark .my-reading-chapter{
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--reading-theme-mid) 11%,#172720),
            color-mix(in srgb,var(--reading-theme-dark) 10%,#111c18)
        )!important;
    color:#e6f2ed!important;
    border-color:
        color-mix(in srgb,var(--reading-theme-mid) 24%,#3a574c)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 3px 8px rgba(0,0,0,.14)!important;
}
html.bp-dark .my-reading-count-box{
    background:#101b18!important;
    color:#9db1a8!important;
    border-color:#405b50!important;
}
html.bp-dark .my-reading-chapter.has-read{
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--reading-theme-mid) 22%,#173127),
            color-mix(in srgb,var(--reading-theme-dark) 19%,#13231d)
        )!important;
    color:#f0faf6!important;
}

@media(max-width:700px){
    .my-reading-chapter-grid{
        padding:5px;
    }
}


/* =========================================================
   Reading Theme V3 FIX
   color-mix() 미사용 / 외부 로고 파일 미사용
   모든 테마 표현은 PHP가 넣어준 6개 색상 변수만 사용
   ========================================================= */

.reading-page.my-reading-page{
    --reading-light:#ebfaf1;
    --reading-soft:#cff1dc;
    --reading-mid:#6ac78f;
    --reading-dark:#2e8b5e;
    --reading-deep:#185d3c;
    --reading-ink:#17382a;
}

/* Dashboard */
.reading-dashboard-head{
    border-color:var(--reading-soft)!important;
    background:
        radial-gradient(circle at 4% 12%,var(--reading-soft) 0,transparent 25%),
        linear-gradient(115deg,var(--reading-light) 0%,#ffffff 48%,var(--reading-light) 100%)!important;
}
.reading-game-logo{
    width:78px!important;
    height:78px!important;
    flex:0 0 78px!important;
    display:block!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 4px 14px rgba(31,67,54,.13)!important;
    background:var(--reading-soft)!important;
}
.reading-game-logo svg{
    display:block;
    width:100%;
    height:100%;
}
.reading-dashboard-copy .reading-kicker{color:var(--reading-dark)!important}
.reading-dashboard-copy h2{color:var(--reading-ink)!important}
.reading-dashboard-stat{
    border-color:var(--reading-soft)!important;
    background:rgba(255,255,255,.93)!important;
}
.reading-dashboard-statcopy strong{color:var(--reading-deep)!important}
.reading-dashboard-user .reading-home{
    color:var(--reading-dark)!important;
    border-color:var(--reading-soft)!important;
}
.reading-version-switch{
    background:var(--reading-light)!important;
    border-color:var(--reading-soft)!important;
}
.reading-version-switch a.is-active{
    color:var(--reading-deep)!important;
    border-color:var(--reading-mid)!important;
}

/* A: Testament tabs + books */
.my-reading-sidebar{
    border-color:var(--reading-soft)!important;
    background:linear-gradient(180deg,var(--reading-light),#fff 47%,var(--reading-light))!important;
    box-shadow:0 7px 20px rgba(35,65,54,.07)!important;
}
.my-reading-testament-tabs{
    background:linear-gradient(135deg,var(--reading-soft),var(--reading-light))!important;
    border-bottom-color:var(--reading-mid)!important;
}
.my-reading-testament-tab{
    color:var(--reading-deep)!important;
}
.my-reading-testament-tab.is-active{
    color:var(--reading-deep)!important;
    background:linear-gradient(145deg,#fff,var(--reading-light))!important;
    border-color:var(--reading-mid)!important;
    box-shadow:0 4px 10px rgba(25,65,50,.08)!important;
}
.my-reading-book-btn{
    color:var(--reading-ink)!important;
}
.my-reading-book-btn:hover{
    background:linear-gradient(135deg,var(--reading-light),#fff)!important;
    border-color:var(--reading-soft)!important;
}
.my-reading-book-btn.is-active{
    background:linear-gradient(135deg,var(--reading-soft),var(--reading-light))!important;
    color:var(--reading-deep)!important;
    border-color:var(--reading-mid)!important;
    box-shadow:0 4px 10px rgba(25,65,50,.08)!important;
}
.my-reading-book-btn em{color:var(--reading-dark)!important}

/* B: one unified themed board */
.my-reading-chapter-area{
    border-color:var(--reading-soft)!important;
    background:
        radial-gradient(circle at 7% 4%,var(--reading-soft) 0,transparent 29%),
        linear-gradient(145deg,var(--reading-light) 0%,#fff 51%,var(--reading-light) 100%)!important;
}
.my-reading-chapter-area::before{
    background:linear-gradient(135deg,var(--reading-soft),transparent 48%,var(--reading-light))!important;
    opacity:.45!important;
}
.my-reading-chapter-head span{color:var(--reading-dark)!important}
.my-reading-chapter-head h3{color:var(--reading-deep)!important}
.my-reading-chapter-grid{
    border-color:var(--reading-soft)!important;
    background:linear-gradient(135deg,var(--reading-soft) 0%,var(--reading-light) 46%,#fff 100%)!important;
    box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(32,66,53,.06)!important;
}
.my-reading-chapter{
    border-color:var(--reading-mid)!important;
    background:linear-gradient(145deg,#fff 0%,var(--reading-light) 55%,var(--reading-soft) 100%)!important;
    color:var(--reading-ink)!important;
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -7px 14px rgba(255,255,255,.16),
        0 4px 9px rgba(31,65,52,.07)!important;
}
.my-reading-chapter:hover{
    transform:translateY(-2px)!important;
    border-color:var(--reading-dark)!important;
    box-shadow:inset 0 1px 0 #fff,0 8px 17px rgba(31,65,52,.14)!important;
}
.my-reading-chapter::before{
    background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))!important;
}
.my-reading-count-box{
    border-color:var(--reading-mid)!important;
    background:rgba(255,255,255,.78)!important;
    color:var(--reading-dark)!important;
}
.my-reading-chapter.has-read{
    background:linear-gradient(145deg,var(--reading-soft),var(--reading-mid))!important;
    border-color:var(--reading-dark)!important;
    color:var(--reading-deep)!important;
}
.my-reading-chapter.has-read .my-reading-count-box{
    background:var(--reading-dark)!important;
    border-color:var(--reading-dark)!important;
    color:#fff!important;
}

/* Dark mode */
html.bp-dark .reading-dashboard-head,
html.bp-dark .my-reading-sidebar,
html.bp-dark .my-reading-chapter-area{
    background:linear-gradient(145deg,#15231f,#111b18)!important;
    border-color:#3f6255!important;
}
html.bp-dark .reading-dashboard-stat{
    background:#172720!important;
    border-color:#3f6255!important;
}
html.bp-dark .my-reading-testament-tabs,
html.bp-dark .my-reading-chapter-grid{
    background:linear-gradient(135deg,#172720,#101916)!important;
    border-color:#3f6255!important;
}
html.bp-dark .my-reading-testament-tab.is-active,
html.bp-dark .my-reading-book-btn.is-active,
html.bp-dark .my-reading-chapter{
    background:linear-gradient(145deg,#1b3028,#14221d)!important;
    border-color:#4b7564!important;
    color:#eef8f4!important;
}


/* =========================================================
   Reading Theme V4 — A/B 영역 테마 강제 적용
   신구약/책 목록 + 장 버튼 전체 그라데이션/광택
   ========================================================= */

/* ---------- A : 왼쪽 신구약/책 선택 영역 ---------- */
.my-reading-sidebar{
    background:
        radial-gradient(circle at 18% 5%,
            var(--reading-soft) 0%,
            transparent 30%),
        linear-gradient(
            180deg,
            var(--reading-light) 0%,
            #ffffff 38%,
            var(--reading-soft) 100%
        )!important;
    border:1px solid var(--reading-mid)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 8px 20px rgba(27,59,48,.08)!important;
}

.my-reading-testament-tabs{
    padding:7px!important;
    gap:7px!important;
    background:
        linear-gradient(
            135deg,
            var(--reading-soft) 0%,
            var(--reading-light) 55%,
            #ffffff 100%
        )!important;
    border-bottom:1px solid var(--reading-mid)!important;
}

.my-reading-testament-tab{
    border:1px solid transparent!important;
    border-radius:10px!important;
    color:var(--reading-deep)!important;
    background:transparent!important;
    font-weight:900!important;
}
.my-reading-testament-tab:hover{
    background:rgba(255,255,255,.66)!important;
    border-color:var(--reading-mid)!important;
}
.my-reading-testament-tab.is-active{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            var(--reading-light) 55%,
            var(--reading-soft) 100%
        )!important;
    color:var(--reading-deep)!important;
    border-color:var(--reading-dark)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 4px 11px rgba(25,61,47,.11)!important;
}

.my-reading-book-panel{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.36),
            var(--reading-light) 100%
        )!important;
}

.my-reading-book-btn{
    margin:3px 5px!important;
    border-radius:9px!important;
    color:var(--reading-ink)!important;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.62),
            rgba(255,255,255,.22)
        )!important;
}
.my-reading-book-btn:hover{
    color:var(--reading-deep)!important;
    background:
        linear-gradient(
            135deg,
            var(--reading-soft) 0%,
            var(--reading-light) 100%
        )!important;
    border-color:var(--reading-mid)!important;
    box-shadow:0 3px 8px rgba(25,61,47,.09)!important;
}
.my-reading-book-btn.is-active{
    color:var(--reading-deep)!important;
    background:
        linear-gradient(
            135deg,
            var(--reading-soft) 0%,
            var(--reading-light) 48%,
            #ffffff 100%
        )!important;
    border:1px solid var(--reading-dark)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 4px 10px rgba(24,61,46,.12)!important;
}

/* ---------- B : 오른쪽 장 전체 패널 ---------- */
.my-reading-chapter-area{
    background:
        radial-gradient(circle at 4% 3%,
            var(--reading-soft) 0%,
            transparent 26%),
        radial-gradient(circle at 94% 96%,
            var(--reading-light) 0%,
            transparent 30%),
        linear-gradient(
            145deg,
            var(--reading-light) 0%,
            #ffffff 48%,
            var(--reading-soft) 100%
        )!important;
    border:1px solid var(--reading-mid)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 8px 22px rgba(29,62,49,.08)!important;
}

/* 작은 장 버튼들이 놓이는 "하나의 보드" */
.my-reading-chapter-grid{
    position:relative!important;
    isolation:isolate!important;
    padding:8px!important;
    gap:8px!important;
    overflow:hidden!important;
    border:1px solid var(--reading-mid)!important;
    border-radius:15px!important;
    background:
        linear-gradient(
            135deg,
            var(--reading-soft) 0%,
            var(--reading-light) 42%,
            #ffffff 100%
        )!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 5px 15px rgba(28,59,47,.07)!important;
}

/* 그리드 전체 위로 하나의 빛이 흐르는 느낌 */
.my-reading-chapter-grid::before{
    content:"";
    position:absolute;
    inset:-35% -10%;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(
            115deg,
            transparent 18%,
            rgba(255,255,255,.72) 35%,
            transparent 51%
        );
    transform:rotate(-4deg);
    opacity:.62;
}

/* ---------- 장 버튼 : 테마보다 진한 색 + 입체/광택 ---------- */
.my-reading-chapter{
    position:relative!important;
    overflow:hidden!important;
    min-height:65px!important;
    border:1px solid var(--reading-deep)!important;
    border-radius:12px!important;
    color:#ffffff!important;
    background:
        linear-gradient(
            145deg,
            var(--reading-mid) 0%,
            var(--reading-dark) 58%,
            var(--reading-deep) 100%
        )!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -7px 13px rgba(0,0,0,.08),
        0 4px 9px rgba(18,44,34,.13)!important;
    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease,
        background .16s ease!important;
}

/* 버튼 전체를 하나의 유리 단추처럼 보이게 하는 상단 광택 */
.my-reading-chapter::before{
    content:"";
    position:absolute;
    left:6%;
    right:6%;
    top:4px;
    height:36%;
    border-radius:999px;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.64),
            rgba(255,255,255,.10) 58%,
            rgba(255,255,255,0)
        )!important;
    opacity:.72!important;
}

/* 작은 반짝임 */
.my-reading-chapter::after{
    content:"";
    position:absolute;
    right:9px;
    top:7px;
    width:15px;
    height:15px;
    pointer-events:none;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.98) 0 10%,
            rgba(255,255,255,.50) 11% 27%,
            transparent 28%
        )!important;
    opacity:.78!important;
}

.my-reading-chapter b{
    position:relative!important;
    z-index:2!important;
    color:#ffffff!important;
    text-shadow:0 1px 2px rgba(0,0,0,.20)!important;
}

.my-reading-count-box{
    position:relative!important;
    z-index:2!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(255,255,255,.94)!important;
    color:var(--reading-deep)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 2px 5px rgba(0,0,0,.08)!important;
}

/* 마우스 올리면 같은 테마 안에서 더 밝고 선명하게 변화 */
.my-reading-chapter:hover{
    transform:translateY(-3px) scale(1.015)!important;
    filter:brightness(1.10) saturate(1.12)!important;
    background:
        linear-gradient(
            145deg,
            var(--reading-light) 0%,
            var(--reading-mid) 42%,
            var(--reading-dark) 100%
        )!important;
    border-color:var(--reading-dark)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 18px rgba(19,48,36,.20)!important;
}
.my-reading-chapter:hover b{
    color:var(--reading-deep)!important;
    text-shadow:none!important;
}
.my-reading-chapter:hover .my-reading-count-box{
    background:#ffffff!important;
    color:var(--reading-deep)!important;
}

/* 읽은 장 : 더 진하게 표시 */
.my-reading-chapter.has-read{
    background:
        linear-gradient(
            145deg,
            var(--reading-dark) 0%,
            var(--reading-deep) 100%
        )!important;
    border-color:var(--reading-deep)!important;
}
.my-reading-chapter.has-read b{
    color:#ffffff!important;
}
.my-reading-chapter.has-read .my-reading-count-box{
    background:#ffffff!important;
    color:var(--reading-deep)!important;
    border-color:#ffffff!important;
}

/* 비활성은 테마를 유지하면서 약화 */
.my-reading-chapter.is-disabled{
    opacity:.45!important;
    filter:saturate(.55)!important;
}

/* ---------- Dark mode ---------- */
html.bp-dark .my-reading-sidebar,
html.bp-dark .my-reading-chapter-area{
    background:
        linear-gradient(
            145deg,
            #17241f 0%,
            #111a17 55%,
            #17241f 100%
        )!important;
    border-color:var(--reading-dark)!important;
}

html.bp-dark .my-reading-testament-tabs,
html.bp-dark .my-reading-chapter-grid{
    background:
        linear-gradient(
            135deg,
            #1a2a23,
            #111a17
        )!important;
    border-color:var(--reading-dark)!important;
}

html.bp-dark .my-reading-chapter{
    background:
        linear-gradient(
            145deg,
            var(--reading-dark) 0%,
            var(--reading-deep) 100%
        )!important;
    color:#fff!important;
    border-color:var(--reading-mid)!important;
}

html.bp-dark .my-reading-book-btn{
    color:#dceae4!important;
}
html.bp-dark .my-reading-book-btn.is-active{
    background:
        linear-gradient(
            135deg,
            #1e342a,
            var(--reading-deep)
        )!important;
    color:#ffffff!important;
    border-color:var(--reading-mid)!important;
}


/* =========================================================
   Reading Theme V5 FINAL FIX
   Root cause fix:
   - index.php now actually defines the selected theme.
   - class-level fallbacks guarantee variables even without inline styles.
   - no black theme exists.
   ========================================================= */

.reading-theme-red{
    --reading-light:#ffe7eb;--reading-soft:#ffcbd3;--reading-mid:#ee7181;
    --reading-dark:#bf3f58;--reading-deep:#78283b;--reading-ink:#4a2230;
}
.reading-theme-orange{
    --reading-light:#fff0df;--reading-soft:#ffd9af;--reading-mid:#f59a47;
    --reading-dark:#c96122;--reading-deep:#7b3913;--reading-ink:#4c2a16;
}
.reading-theme-yellow{
    --reading-light:#fff8d8;--reading-soft:#ffe99b;--reading-mid:#eac246;
    --reading-dark:#a97d17;--reading-deep:#674a0d;--reading-ink:#473913;
}
.reading-theme-green{
    --reading-light:#eafaf0;--reading-soft:#c9efd7;--reading-mid:#61c287;
    --reading-dark:#2b895a;--reading-deep:#175b3b;--reading-ink:#173a2b;
}
.reading-theme-blue{
    --reading-light:#edf7ff;--reading-soft:#cde8ff;--reading-mid:#68afe8;
    --reading-dark:#337ab8;--reading-deep:#1b4f81;--reading-ink:#183652;
}
.reading-theme-indigo{
    --reading-light:#f1f2ff;--reading-soft:#d9ddff;--reading-mid:#8994dc;
    --reading-dark:#5662ae;--reading-deep:#343d79;--reading-ink:#292f55;
}
.reading-theme-purple{
    --reading-light:#faf1ff;--reading-soft:#ead5ff;--reading-mid:#b07bdb;
    --reading-dark:#7948aa;--reading-deep:#4e2d77;--reading-ink:#38224a;
}

/* Header title/stat container — clearly themed instead of white */
.reading-page.my-reading-page .reading-dashboard-head{
    background:
        radial-gradient(circle at 4% 10%,var(--reading-soft) 0%,transparent 27%),
        radial-gradient(circle at 95% 90%,var(--reading-light) 0%,transparent 24%),
        linear-gradient(110deg,var(--reading-light) 0%,#ffffff 48%,var(--reading-light) 100%)!important;
    border-color:var(--reading-mid)!important;
}
.reading-page.my-reading-page .reading-dashboard-stat{
    background:
        linear-gradient(145deg,#fff 0%,var(--reading-light) 100%)!important;
    border-color:var(--reading-soft)!important;
}
.reading-page.my-reading-page .reading-dashboard-statcopy strong{
    color:var(--reading-deep)!important;
}
.reading-page.my-reading-page .reading-dashboard-copy h2{
    color:var(--reading-ink)!important;
}

/* Inline SVG logo must always use selected theme, never black */
.reading-page.my-reading-page .reading-game-logo{
    background:var(--reading-soft)!important;
    border:1px solid var(--reading-mid)!important;
}
.reading-page.my-reading-page .reading-game-logo svg{
    background:transparent!important;
}

/* A — sidebar receives obvious themed gradient */
.reading-page.my-reading-page .my-reading-sidebar{
    background:
        radial-gradient(circle at 20% 2%,var(--reading-soft) 0%,transparent 35%),
        linear-gradient(180deg,var(--reading-light) 0%,#fff 52%,var(--reading-soft) 100%)!important;
    border-color:var(--reading-mid)!important;
}
.reading-page.my-reading-page .my-reading-testament-tabs{
    background:linear-gradient(135deg,var(--reading-soft),var(--reading-light))!important;
    border-bottom-color:var(--reading-mid)!important;
}
.reading-page.my-reading-page .my-reading-testament-tab.is-active{
    background:linear-gradient(145deg,#fff,var(--reading-light),var(--reading-soft))!important;
    border:1px solid var(--reading-dark)!important;
    color:var(--reading-deep)!important;
}
.reading-page.my-reading-page .my-reading-book-panel{
    background:linear-gradient(180deg,rgba(255,255,255,.35),var(--reading-light))!important;
}
.reading-page.my-reading-page .my-reading-book-btn.is-active{
    background:linear-gradient(135deg,var(--reading-soft),var(--reading-light))!important;
    border:1px solid var(--reading-dark)!important;
    color:var(--reading-deep)!important;
}

/* B — whole right panel / board receives theme */
.reading-page.my-reading-page .my-reading-chapter-area{
    background:
        radial-gradient(circle at 6% 4%,var(--reading-soft) 0%,transparent 28%),
        radial-gradient(circle at 93% 96%,var(--reading-light) 0%,transparent 30%),
        linear-gradient(145deg,var(--reading-light) 0%,#fff 50%,var(--reading-soft) 100%)!important;
    border-color:var(--reading-mid)!important;
}
.reading-page.my-reading-page .my-reading-chapter-grid{
    background:
        linear-gradient(135deg,var(--reading-soft) 0%,var(--reading-light) 45%,#fff 100%)!important;
    border:1px solid var(--reading-mid)!important;
}

/*
 * Chapter buttons:
 * one coherent darker-themed field, visible text, glossy top highlight.
 */
.reading-page.my-reading-page .my-reading-chapter{
    color:#fff!important;
    background:
        linear-gradient(145deg,var(--reading-mid) 0%,var(--reading-dark) 58%,var(--reading-deep) 100%)!important;
    border:1px solid var(--reading-deep)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -8px 14px rgba(0,0,0,.10),
        0 4px 10px rgba(20,45,35,.16)!important;
}
.reading-page.my-reading-page .my-reading-chapter b{
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,0,0,.32)!important;
}
.reading-page.my-reading-page .my-reading-chapter::before{
    background:
        linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.08),transparent)!important;
}
.reading-page.my-reading-page .my-reading-chapter::after{
    opacity:.72!important;
}
.reading-page.my-reading-page .my-reading-count-box{
    background:rgba(255,255,255,.92)!important;
    border-color:#fff!important;
    color:var(--reading-deep)!important;
}

/* Hover visibly changes button, while staying within same theme */
.reading-page.my-reading-page .my-reading-chapter:hover{
    color:var(--reading-deep)!important;
    background:
        linear-gradient(145deg,#fff 0%,var(--reading-light) 30%,var(--reading-mid) 100%)!important;
    border-color:var(--reading-dark)!important;
    filter:none!important;
    transform:translateY(-3px) scale(1.018)!important;
    box-shadow:
        inset 0 1px 0 #fff,
        0 9px 19px rgba(20,45,35,.20)!important;
}
.reading-page.my-reading-page .my-reading-chapter:hover b{
    color:var(--reading-deep)!important;
    text-shadow:none!important;
}
.reading-page.my-reading-page .my-reading-chapter:hover .my-reading-count-box{
    background:#fff!important;
    color:var(--reading-deep)!important;
}

/* Read chapters even deeper */
.reading-page.my-reading-page .my-reading-chapter.has-read{
    background:
        linear-gradient(145deg,var(--reading-dark),var(--reading-deep))!important;
}
.reading-page.my-reading-page .my-reading-chapter.has-read b{
    color:#fff!important;
}

/* disabled chapter: visible but muted, not washed-out white */
.reading-page.my-reading-page .my-reading-chapter.is-disabled{
    background:
        linear-gradient(145deg,var(--reading-soft),var(--reading-mid))!important;
    color:var(--reading-deep)!important;
    opacity:.55!important;
}
.reading-page.my-reading-page .my-reading-chapter.is-disabled b{
    color:var(--reading-deep)!important;
    text-shadow:none!important;
}

/* dark mode remains theme-aware */
html.bp-dark .reading-page.my-reading-page .reading-dashboard-head,
html.bp-dark .reading-page.my-reading-page .my-reading-sidebar,
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-area{
    background:linear-gradient(145deg,#15231f,#111a17)!important;
    border-color:var(--reading-dark)!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-grid{
    background:linear-gradient(135deg,#192821,#111a17)!important;
    border-color:var(--reading-dark)!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter{
    background:linear-gradient(145deg,var(--reading-dark),var(--reading-deep))!important;
    border-color:var(--reading-mid)!important;
}


/* =========================================================
   Reading Chapter Theme V1
   - 매 로딩마다 7색 테마
   - 성경 본문(reading-viewport) 자체는 기존 색상 유지
   - 본문을 감싸는 바깥 shell만 테마 적용
   - 모든 조작 버튼은 테마와 무관한 은은한 파란색
   ========================================================= */

/* Chapter page theme fallbacks */
.reading-chapter-page{
    --reading-light:#edf7ff;
    --reading-soft:#cde8ff;
    --reading-mid:#68afe8;
    --reading-dark:#337ab8;
    --reading-deep:#1b4f81;
    --reading-ink:#183652;
}

/* 상단 제목/현재 버전은 테마 포인트만 은은하게 */
.reading-chapter-page .reading-kicker{
    color:var(--reading-dark)!important;
}
.reading-chapter-page .reading-current-version{
    color:var(--reading-deep)!important;
    border-color:var(--reading-mid)!important;
    background:var(--reading-light)!important;
}

/* 홈 아이콘 — 인덱스와 같은 SVG 스타일 */
.reading-chapter-page .reading-home{
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border-radius:11px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#eef6ff!important;
    color:#2878d4!important;
    border:1px solid #b9d3ee!important;
    box-shadow:0 3px 10px rgba(45,103,168,.08)!important;
}
.reading-chapter-page .reading-home svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* 버전 버튼은 테마와 무관한 은은한 파란색 */
.reading-chapter-page .reading-version-switch{
    background:#f5f9ff!important;
    border-color:#c8daee!important;
}
.reading-chapter-page .reading-version-switch a{
    color:#506d8f!important;
    background:transparent!important;
    border-color:transparent!important;
}
.reading-chapter-page .reading-version-switch a:hover{
    background:#eef6ff!important;
    color:#256fc7!important;
}
.reading-chapter-page .reading-version-switch a.is-active{
    color:#155da8!important;
    background:linear-gradient(145deg,#ffffff,#eaf4ff)!important;
    border-color:#9fc4e8!important;
    box-shadow:0 3px 9px rgba(44,105,173,.08)!important;
}

/*
 * 핵심: 성경본문 박스(.reading-viewport)는 그대로 둔다.
 * 그 박스를 감싸는 .reading-chapter-shell에만 현재 테마의 그라데이션을 적용.
 */
.reading-chapter-page .reading-chapter-shell{
    position:relative;
    border:1px solid var(--reading-mid)!important;
    border-radius:18px!important;
    background:
        radial-gradient(circle at 5% 3%,var(--reading-soft) 0%,transparent 28%),
        radial-gradient(circle at 94% 96%,var(--reading-light) 0%,transparent 30%),
        linear-gradient(145deg,var(--reading-light) 0%,#ffffff 52%,var(--reading-soft) 100%)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 9px 24px rgba(35,62,82,.08)!important;
    padding:16px!important;
}

/* 내부 말씀 뷰포트는 기존 흰색/본문 디자인 강제 유지 */
.reading-chapter-page .reading-viewport{
    background:#fff!important;
    border-color:#d9e4ef!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.reading-chapter-page .reading-track,
.reading-chapter-page .reading-verse{
    background:transparent!important;
}

/* 메타 라인은 테마색으로 살짝 연결 */
.reading-chapter-page .reading-chapter-meta{
    color:var(--reading-deep)!important;
}
.reading-chapter-page .reading-chapter-meta b{
    color:var(--reading-dark)!important;
}

/* 모든 읽기 조절 버튼 — 테마와 무관한 은은한 파랑 */
.reading-chapter-page .reading-control-btn,
.reading-chapter-page .reading-primary-btn,
.reading-chapter-page .reading-secondary-btn{
    border:1px solid #a9c9ea!important;
    color:#245f9f!important;
    background:
        linear-gradient(145deg,#ffffff 0%,#edf6ff 58%,#e1effd 100%)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 3px 9px rgba(47,105,164,.08)!important;
    text-decoration:none!important;
}
.reading-chapter-page .reading-control-btn:hover,
.reading-chapter-page .reading-primary-btn:hover,
.reading-chapter-page .reading-secondary-btn:hover{
    color:#104f91!important;
    border-color:#75a9db!important;
    background:
        linear-gradient(145deg,#fafdff 0%,#dceeff 100%)!important;
    transform:translateY(-1px);
}
.reading-chapter-page .reading-pause-btn{
    color:#3d6593!important;
}
.reading-chapter-page .reading-speed-label{
    color:#446b96!important;
    background:#f6faff!important;
    border-color:#c9dbee!important;
}

/* 보상/완료/재개 레이어의 액션 버튼도 동일한 파랑 계열 */
.reading-chapter-page #resumeReading,
.reading-chapter-page #resumeAfterLongPause,
.reading-chapter-page #confirmChapter{
    color:#fff!important;
    border-color:#3d86ce!important;
    background:linear-gradient(180deg,#6db3ee,#3c87cf)!important;
}
.reading-chapter-page #resumeReading:hover,
.reading-chapter-page #resumeAfterLongPause:hover,
.reading-chapter-page #confirmChapter:hover{
    background:linear-gradient(180deg,#5aa6e6,#3279be)!important;
}

/* Dark mode */
html.bp-dark .reading-chapter-page .reading-chapter-shell{
    background:
        radial-gradient(circle at 5% 3%,rgba(255,255,255,.035),transparent 28%),
        linear-gradient(145deg,#17231f,#111a17)!important;
    border-color:var(--reading-dark)!important;
}
html.bp-dark .reading-chapter-page .reading-viewport{
    background:#111a25!important;
    border-color:#35495e!important;
}
html.bp-dark .reading-chapter-page .reading-control-btn,
html.bp-dark .reading-chapter-page .reading-primary-btn,
html.bp-dark .reading-chapter-page .reading-secondary-btn{
    background:linear-gradient(145deg,#172a3f,#132438)!important;
    border-color:#42698f!important;
    color:#b9d8f5!important;
}
html.bp-dark .reading-chapter-page .reading-speed-label{
    background:#142437!important;
    border-color:#3d5f80!important;
    color:#a9c8e5!important;
}


/* =========================================================
   2026-08-13 FIX: A영역 책 목록 스크롤바를 현재 랜덤 테마 단색으로 통일
   ========================================================= */
.reading-page.my-reading-page .my-reading-book-panel{
    scrollbar-width:thin!important;
    scrollbar-color:var(--reading-mid) transparent!important;
}
.reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar{
    width:10px!important;
    height:10px!important;
}
.reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-track{
    background:transparent!important;
}
.reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-thumb{
    background:var(--reading-mid)!important;
    border:2px solid transparent!important;
    background-clip:padding-box!important;
    border-radius:999px!important;
}
.reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-thumb:hover{
    background:var(--reading-dark)!important;
    background-clip:padding-box!important;
}
.reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-corner{
    background:transparent!important;
}


/* =========================================================
   2026-08-13 FINAL DARK MODE PATCH — READING
   최신 업로드 style.css 기준
   기존 7색 테마 / 스크롤바 / chapter 스타일을 보존하고
   html.bp-dark 에서 남아 있는 밝은 오브젝트만 최종 보정
   ========================================================= */

/* ---------- 공통 페이지 / 상단 ---------- */
html.bp-dark .reading-page{
    color:#dbe7f2!important;
}
html.bp-dark .reading-dashboard-head,
html.bp-dark .reading-topbar{
    background:
        radial-gradient(circle at 4% 10%,rgba(89,126,168,.08),transparent 28%),
        linear-gradient(145deg,#172334,#111b29)!important;
    border-color:#36516d!important;
    box-shadow:none!important;
}
html.bp-dark .reading-game-logo{
    background:#1a2b3d!important;
    border-color:#41617f!important;
    box-shadow:none!important;
}
html.bp-dark .reading-dashboard-copy h2,
html.bp-dark .reading-topbar h2,
html.bp-dark .reading-dashboard-user .reading-login-user,
html.bp-dark .reading-login-user{
    color:#eef6ff!important;
}
html.bp-dark .reading-dashboard-copy .reading-kicker,
html.bp-dark .reading-kicker,
html.bp-dark .reading-dashboard-copy p,
html.bp-dark .reading-topbar p,
html.bp-dark .reading-welcome{
    color:#9eb5ca!important;
}
html.bp-dark .reading-dashboard-stat{
    background:linear-gradient(145deg,#172638,#132233)!important;
    border-color:#36516d!important;
    box-shadow:none!important;
}
html.bp-dark .reading-dashboard-statcopy>span{
    color:#a9bdd0!important;
}
html.bp-dark .reading-dashboard-statcopy strong{
    color:#eef6ff!important;
}
html.bp-dark .reading-dashboard-statcopy strong small{
    color:#95aec5!important;
}
html.bp-dark .reading-dashboard-user .reading-home,
html.bp-dark .reading-home{
    background:#17283b!important;
    border-color:#405f7e!important;
    color:#acd3f7!important;
    box-shadow:none!important;
}

/* ---------- 버전 선택 ---------- */
html.bp-dark .reading-version-switch,
html.bp-dark .my-reading-version-row{
    background:#111d2c!important;
    border-color:#314a63!important;
}
html.bp-dark .reading-version-switch a{
    background:#151f2e!important;
    border-color:#40516a!important;
    color:#b8c6d8!important;
}
html.bp-dark .reading-version-switch a:hover{
    background:#1a2b40!important;
    border-color:#4d6b8d!important;
    color:#d8e9fb!important;
}
html.bp-dark .reading-version-switch a.is-active,
html.bp-dark .reading-current-version{
    background:#182b47!important;
    border-color:#426592!important;
    color:#9fc0ff!important;
}

/* ---------- 개인 성경읽기 A 영역 ---------- */
html.bp-dark .reading-page.my-reading-page .my-reading-sidebar{
    background:
        radial-gradient(circle at 18% 4%,rgba(66,104,143,.08),transparent 32%),
        linear-gradient(180deg,#151f2e,#111a29 55%,#142233)!important;
    border-color:#36506d!important;
    box-shadow:none!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-testament-tabs{
    background:linear-gradient(135deg,#172638,#121e2d)!important;
    border-bottom-color:#36506d!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-testament-tab{
    color:#aabacd!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-testament-tab:hover{
    background:#17283b!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-testament-tab.is-active{
    background:linear-gradient(145deg,#1d3045,#17273a)!important;
    border-color:#4a6b8f!important;
    color:#b8d8ff!important;
    box-shadow:none!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-panel{
    background:linear-gradient(180deg,#111c2a,#142234)!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-btn{
    background:transparent!important;
    color:#c0ccda!important;
    border-color:transparent!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-btn:hover{
    background:#17283b!important;
    border-color:#35516d!important;
    color:#e3edf7!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-btn.is-active{
    background:linear-gradient(135deg,#1a3048,#16273a)!important;
    border-color:#4b7198!important;
    color:#b8d8ff!important;
    box-shadow:none!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-btn em,
html.bp-dark .reading-page.my-reading-page .my-reading-book-progress{
    color:#8fa6bc!important;
}

/* A 영역 스크롤바: 다크에서도 현재 테마색 유지 */
html.bp-dark .reading-page.my-reading-page .my-reading-book-panel{
    scrollbar-color:var(--reading-mid) transparent!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-track{
    background:transparent!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-thumb{
    background:var(--reading-mid)!important;
    border-color:transparent!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-book-panel::-webkit-scrollbar-thumb:hover{
    background:var(--reading-dark)!important;
}

/* ---------- 개인 성경읽기 B 영역 ---------- */
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-area{
    background:
        radial-gradient(circle at 6% 4%,rgba(65,100,140,.08),transparent 28%),
        linear-gradient(145deg,#151f2e,#111b29 54%,#142235)!important;
    border-color:#36506d!important;
    box-shadow:none!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-area::before{
    background:linear-gradient(135deg,rgba(85,120,160,.07),transparent)!important;
    opacity:.5!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-head span,
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-head p{
    color:#9fb3c7!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-head h3{
    color:#eef6ff!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter-grid{
    background:linear-gradient(135deg,#172638,#111c2a)!important;
    border-color:#36506d!important;
    box-shadow:none!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter{
    background:linear-gradient(145deg,#1c3148,#152639)!important;
    border-color:#42617f!important;
    color:#e8f1fa!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 3px 8px rgba(0,0,0,.16)!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter b{
    color:#eef6ff!important;
    text-shadow:none!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter:hover{
    background:linear-gradient(145deg,#244463,#1b3550)!important;
    border-color:#638db7!important;
    color:#fff!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter:hover b{
    color:#fff!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-count-box{
    background:#101b29!important;
    color:#9fb4c7!important;
    border-color:#405b75!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter.has-read{
    background:linear-gradient(145deg,var(--reading-dark),var(--reading-deep))!important;
    border-color:var(--reading-mid)!important;
    color:#fff!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter.has-read b{
    color:#fff!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter.has-read .my-reading-count-box{
    background:#f3f7fb!important;
    color:var(--reading-deep)!important;
    border-color:#fff!important;
}
html.bp-dark .reading-page.my-reading-page .my-reading-chapter.is-disabled{
    opacity:.42!important;
}

/* ---------- 일반 읽기 진행 카드 ---------- */
html.bp-dark .reading-stat-card,
html.bp-dark .reading-progress-card,
html.bp-dark .my-reading-summary>div{
    background:#151f2e!important;
    border-color:#314156!important;
    box-shadow:none!important;
}
html.bp-dark .reading-stat-card b,
html.bp-dark .my-reading-summary b{
    color:#a9b9ca!important;
}
html.bp-dark .reading-stat-card span,
html.bp-dark .my-reading-summary strong,
html.bp-dark .reading-progress-head{
    color:#e6eff8!important;
}
html.bp-dark .reading-progress-bar{
    background:#0e1825!important;
}
html.bp-dark .reading-progress-bar i{
    background:#4b87c7!important;
}

/* ---------- chapter.php 본문 화면 ---------- */
html.bp-dark .reading-chapter-page .reading-chapter-shell{
    background:
        radial-gradient(circle at 5% 3%,rgba(75,111,150,.06),transparent 28%),
        linear-gradient(145deg,#151f2e,#111b29)!important;
    border-color:#36506d!important;
    box-shadow:none!important;
}
html.bp-dark .reading-chapter-page .reading-chapter-meta,
html.bp-dark .reading-chapter-page .reading-chapter-meta b{
    color:#a7bdd2!important;
}
html.bp-dark .reading-chapter-page .reading-viewport{
    background:#0f1926!important;
    border-color:#35495e!important;
    box-shadow:none!important;
}
html.bp-dark .reading-chapter-page .reading-track{
    background:transparent!important;
}
html.bp-dark .reading-chapter-page .reading-verse{
    background:transparent!important;
    color:#e4edf6!important;
}
html.bp-dark .reading-chapter-page .reading-verse b{
    color:#8fb8ff!important;
}

/* chapter 제어 버튼 */
html.bp-dark .reading-chapter-page .reading-control-btn,
html.bp-dark .reading-chapter-page .reading-primary-btn,
html.bp-dark .reading-chapter-page .reading-secondary-btn{
    background:linear-gradient(145deg,#172a3f,#132438)!important;
    border-color:#42698f!important;
    color:#b9d8f5!important;
    box-shadow:none!important;
}
html.bp-dark .reading-chapter-page .reading-control-btn:hover,
html.bp-dark .reading-chapter-page .reading-primary-btn:hover,
html.bp-dark .reading-chapter-page .reading-secondary-btn:hover{
    background:#1b3550!important;
    border-color:#5b85ad!important;
    color:#dceeff!important;
}
html.bp-dark .reading-chapter-page .reading-pause-btn,
html.bp-dark .reading-chapter-page .reading-resume-btn{
    color:#b9d8f5!important;
}
html.bp-dark .reading-chapter-page .reading-control-icon{
    fill:#9bc7ef!important;
}
html.bp-dark .reading-chapter-page .reading-speed-label{
    background:#142437!important;
    border-color:#3d5f80!important;
    color:#a9c8e5!important;
}

/* ---------- 완료/보상/오버레이 ---------- */
html.bp-dark .reading-reward-message,
html.bp-dark .reading-complete-box,
html.bp-dark .reading-next-box{
    background:linear-gradient(145deg,#14263b,#111f30)!important;
    border-color:#39597f!important;
    color:#cbd8e8!important;
    box-shadow:none!important;
}
html.bp-dark .reading-reward-copy strong{
    color:#e5f0fb!important;
}
html.bp-dark .reading-reward-copy p{
    color:#aabed1!important;
}
html.bp-dark .reading-reward-copy blockquote{
    background:#101b29!important;
    border-left-color:#527aa5!important;
    color:#c4d2e0!important;
}
html.bp-dark .reading-reward-copy blockquote span{
    color:#8fa4b9!important;
}
html.bp-dark .reading-idle-overlay{
    background:rgba(13,22,36,.96)!important;
}
html.bp-dark .reading-idle-overlay strong{
    color:#eef6ff!important;
}
html.bp-dark .reading-idle-overlay p{
    color:#9eb1c4!important;
}
html.bp-dark .reading-longpause-dialog{
    background:#151f2e!important;
    border:1px solid #34465c!important;
    color:#dce5f2!important;
}
html.bp-dark .reading-longpause-dialog strong{
    color:#eef6ff!important;
}
html.bp-dark .reading-longpause-dialog p{
    color:#9fb0c2!important;
}

/* ---------- 링크 / 광고 / 보조 요소 ---------- */
html.bp-dark .reading-personal-link{
    background:#17283b!important;
    border-color:#405f7e!important;
    color:#b8d7f4!important;
}
html.bp-dark .reading-personal-link:hover{
    background:#1d344d!important;
}
html.bp-dark .reading-content-ad,
html.bp-dark .bp-content-ad{
    background:#121d2b!important;
    border-color:#31465f!important;
    color:#a7b8ca!important;
}

/* ---------- 다크모드에서 input 계열이 흰색으로 남는 것 방지 ---------- */
html.bp-dark .reading-page input,
html.bp-dark .reading-page textarea,
html.bp-dark .reading-page select{
    background:#0f1a28!important;
    border-color:#3a5875!important;
    color:#eef6ff!important;
}
html.bp-dark .reading-page input::placeholder,
html.bp-dark .reading-page textarea::placeholder{
    color:#7f95aa!important;
}


/* =========================================================
   READING THEME LOGO V4
   7색 랜덤 테마와 같은 이름의 PNG 로고를 실제 IMG로 표시
   ========================================================= */
.reading-page .reading-game-logo{
    display:block!important;
    overflow:hidden!important;
    padding:0!important;
    background:transparent!important;
    border:1px solid var(--reading-mid)!important;
    border-radius:18px!important;
}
.reading-page .reading-game-logo img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    opacity:1!important;
    visibility:visible!important;
    border:0!important;
    border-radius:inherit!important;
}
.reading-page .reading-game-logo svg{
    display:none!important;
}
html.bp-dark .reading-page .reading-game-logo{
    background:#132235!important;
    border-color:var(--reading-mid)!important;
    box-shadow:0 4px 13px rgba(0,0,0,.22)!important;
}


/* =========================================================
   READING THEME LOGO V5 — FINAL DARK HEADER OVERRIDE
   반드시 파일 맨 마지막에 위치:
   7색 라이트 테마 규칙보다 나중에 적용되어 상단 타이틀/통계바의
   다크모드가 다시 풀리지 않게 합니다.
   ========================================================= */

/* 상단 전체 타이틀/통계 컨테이너 */
html.bp-dark .reading-page.my-reading-page .reading-dashboard-head,
html.bp-dark .reading-page .reading-dashboard-head{
    background:
        radial-gradient(circle at 4% 12%, color-mix(in srgb,var(--reading-mid) 10%,transparent), transparent 28%),
        linear-gradient(115deg,#111d2b 0%,#0e1926 56%,#112031 100%)!important;
    border:1px solid var(--reading-dark)!important;
    box-shadow:0 7px 20px rgba(0,0,0,.18)!important;
}

/* 로고 테두리도 테마 색상을 따름 */
html.bp-dark .reading-page .reading-game-logo{
    background:#132234!important;
    border:1px solid var(--reading-mid)!important;
    box-shadow:0 3px 10px rgba(0,0,0,.20)!important;
}

/* 타이틀 문구 */
html.bp-dark .reading-page .reading-dashboard-copy .reading-kicker{
    color:var(--reading-mid)!important;
}
html.bp-dark .reading-page .reading-dashboard-copy h2{
    color:#f3f8fd!important;
}
html.bp-dark .reading-page .reading-dashboard-copy h2 small{
    color:#b9c9d8!important;
}
html.bp-dark .reading-page .reading-dashboard-copy p{
    color:#a5b8ca!important;
}

/* 네 개 통계카드 */
html.bp-dark .reading-page.my-reading-page .reading-dashboard-stat,
html.bp-dark .reading-page .reading-dashboard-stat{
    background:linear-gradient(145deg,#17283b 0%,#132235 100%)!important;
    border:1px solid color-mix(in srgb,var(--reading-mid) 52%,#31465c)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 2px 7px rgba(0,0,0,.08)!important;
}
html.bp-dark .reading-page .reading-dashboard-statcopy>span{
    color:#aac0d2!important;
}
html.bp-dark .reading-page .reading-dashboard-statcopy strong{
    color:#f2f7fc!important;
}
html.bp-dark .reading-page .reading-dashboard-statcopy strong small{
    color:#9cb2c6!important;
}

/* 통계 아이콘은 현재 랜덤 테마색 유지 */
html.bp-dark .reading-page .reading-dashboard-stat .reading-dashboard-icon{
    color:var(--reading-mid)!important;
}

/* 사용자 영역 */
html.bp-dark .reading-page .reading-dashboard-user .reading-login-user{
    color:#eef6fd!important;
}
html.bp-dark .reading-page .reading-dashboard-user .reading-welcome{
    color:#9fb4c6!important;
}

/*
 * 홈 아이콘:
 * - 기존보다 '약간' 더 선명하게
 * - 1px은 유지해서 두꺼워지지 않음
 * - 테두리/아이콘 모두 현재 테마색
 */
.reading-page .reading-dashboard-user .reading-home,
.reading-page .reading-home{
    border:1px solid var(--reading-dark)!important;
    color:var(--reading-dark)!important;
    box-shadow:
        0 0 0 1px color-mix(in srgb,var(--reading-mid) 18%,transparent),
        0 3px 9px rgba(30,65,100,.08)!important;
}
html.bp-dark .reading-page .reading-dashboard-user .reading-home,
html.bp-dark .reading-page .reading-home{
    background:#172a3e!important;
    border:1px solid var(--reading-mid)!important;
    color:var(--reading-mid)!important;
    box-shadow:
        0 0 0 1px color-mix(in srgb,var(--reading-mid) 24%,transparent),
        0 3px 9px rgba(0,0,0,.14)!important;
}
html.bp-dark .reading-page .reading-dashboard-user .reading-home:hover,
html.bp-dark .reading-page .reading-home:hover{
    background:#1b324a!important;
    border-color:var(--reading-soft)!important;
    color:var(--reading-soft)!important;
}

/* 버전 선택 외부 띠는 계속 투명 */
html.bp-dark .reading-page .my-reading-version-row,
html.bp-dark .reading-page .my-reading-version-row .reading-version-switch,
html.bp-dark .reading-page .reading-version-switch.my-reading-version-switch{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}

/* actual buttons remain dark */
html.bp-dark .reading-page .reading-version-switch a{
    background:#17283b!important;
    border-color:#3d5c79!important;
    color:#c4d6e6!important;
}
html.bp-dark .reading-page .reading-version-switch a.is-active{
    background:#1c3b59!important;
    border-color:var(--reading-mid)!important;
    color:#fff!important;
}


/* =========================================================
   Reading UX relaxed v1 — elapsed toggle + completion actions
   ========================================================= */
.reading-chapter-meta{align-items:center}
.reading-elapsed-control{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.reading-time-toggle{border:1px solid color-mix(in srgb,var(--reading-mid,#68afe8) 35%,#d9e4de);background:#fff;color:var(--reading-deep,#1b4f81);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:850;cursor:pointer;white-space:nowrap}
.reading-time-toggle:hover{background:var(--reading-light,#edf7ff)}
.reading-elapsed-time{color:#718197;font-size:11px;white-space:nowrap}
.reading-elapsed-time b{color:var(--reading-deep,#1b4f81);font-size:12px}
.reading-complete-actions{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:11px}
.reading-complete-actions .reading-primary-btn,
.reading-complete-actions .reading-secondary-btn{min-width:112px}
.reading-complete-actions .reading-primary-btn:disabled{opacity:.68;cursor:default}

html.bp-dark .reading-time-toggle,
body.bp-dark .reading-time-toggle,
html[data-theme="dark"] .reading-time-toggle{background:#172538!important;border-color:#38506c!important;color:#cfe2f7!important}
html.bp-dark .reading-time-toggle:hover,
body.bp-dark .reading-time-toggle:hover,
html[data-theme="dark"] .reading-time-toggle:hover{background:#1d3047!important}
html.bp-dark .reading-elapsed-time,
body.bp-dark .reading-elapsed-time,
html[data-theme="dark"] .reading-elapsed-time{color:#91a7bd!important}
html.bp-dark .reading-elapsed-time b,
body.bp-dark .reading-elapsed-time b,
html[data-theme="dark"] .reading-elapsed-time b{color:#dcecff!important}

@media(max-width:600px){
  .reading-chapter-meta{align-items:flex-start}
  .reading-elapsed-control{flex-direction:column;align-items:flex-end;gap:5px}
  .reading-complete-actions{display:grid;grid-template-columns:1fr;gap:7px}
  .reading-complete-actions .reading-primary-btn,.reading-complete-actions .reading-secondary-btn{width:100%}
}


/* =========================================================
   Temporary guest reading history — 24h
   ========================================================= */
.reading-guest-retention-note{
    width:100%;
    margin:12px 0 2px;
    padding:11px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid color-mix(in srgb,var(--reading-mid) 38%,#dbe7f1);
    border-radius:13px;
    background:color-mix(in srgb,var(--reading-light) 72%,#fff);
    color:var(--reading-ink);
    font-size:12px;
    line-height:1.55;
}
.reading-guest-retention-note strong{
    flex:0 0 auto;
    color:var(--reading-deep);
    font-size:12px;
    font-weight:900;
}
.reading-guest-retention-note span{
    color:color-mix(in srgb,var(--reading-ink) 78%,#6d7c8d);
}
.reading-guest-no-point{
    font-size:13px!important;
    line-height:1.15!important;
    white-space:nowrap;
}

html.bp-dark .reading-guest-retention-note,
body.bp-dark .reading-guest-retention-note,
html[data-theme="dark"] .reading-guest-retention-note{
    background:#142131!important;
    border-color:#36506a!important;
    color:#c7d5e3!important;
}
html.bp-dark .reading-guest-retention-note strong,
body.bp-dark .reading-guest-retention-note strong,
html[data-theme="dark"] .reading-guest-retention-note strong{
    color:#e7f0f9!important;
}
html.bp-dark .reading-guest-retention-note span,
body.bp-dark .reading-guest-retention-note span,
html[data-theme="dark"] .reading-guest-retention-note span{
    color:#aebfd0!important;
}

@media(max-width:760px){
    .reading-guest-retention-note{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }
}