:root {
    --reader-font-size: 18px;
    --reader-line-height: 1.85;
    --reader-max-width: 760px;
}

/* Reader core */
.reader-content {
    font-family: 'Georgia', 'Noto Serif KR', serif;
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    color: #2b2341;
    margin: 0 auto;
    padding: 2.2rem;
    box-shadow: 0 6px 22px rgba(18,12,60,0.06);
}

/* Narrow / Wide modes */
.reader-width-narrow {
    max-width: 560px;
}

.reader-width-normal {
    max-width: 760px;
}

.reader-width-wide {
    width: 100%;
}

/* Night mode */
.reader-dark {
    background: #0f1724;
    color: #e6eef8;
}

.reader-dark a {
    color: #dbeafe;
}

.reader-dark .reader-content {
    background: transparent;
}

/* Action button active state */
.btn.active-like {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn.active-bookmark {
    color: #5b4100;
    background: #f5b93b;
    border-color: #f5b93b;
}

/* Small UI polish */
.list-group-item {
    padding: 1rem 1rem;
}

/* 폭 조절 모드 */
/* --- 기본(normal) --- */
.reader-layout.normal .reader-main {
    flex: 0 0 auto;
    width: 66.6667%; /* col-8 */
}

.reader-layout.normal .reader-aside {
    flex: 0 0 auto;
    width: 33.3333%; /* col-4 */
    display: block;
}

/* --- 좁게(narrow) --- */
.reader-layout.narrow .reader-main {
    flex: 0 0 auto;
    width: 50%; /* col-6 정도 */
    max-width: 600px; /* 글읽기 가독성 고려 */
}

.reader-layout.narrow .reader-aside {
    flex: 0 0 auto;
    width: 50%; /* 남은 공간 */
    display: block;
}

/* --- 넓게(wide) --- */
.reader-layout.wide .reader-main {
    flex: 0 0 auto;
    width: 100%; /* col-12 */
}

.reader-layout.wide .reader-aside {
    display: none;
}

/* Responsiveness */
@media (max-width: 767.98px) {
    .reader-content {
        padding: 1.2rem;
        font-size: calc(var(--reader-font-size) - 2px);
    }
}