/* ── language-switcher.css ── */
/* 언어 선택 UI 스타일 */

/* ⚠️ 자리(위치·층)는 여기서 정하지 않는다 — base.html 의 .fixed-dock 이 정한다.
   예전엔 여기·tutorial.css·payment.css 가 각자 좌표를 박아 세 개가 계단처럼 어긋났다. */
.language-switcher {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.language-switcher:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* 언어 버튼 — 테마 버튼(.theme-opt)과 **같은 분절 모양**이어야 한다 (핸드북 0절).
   국기 이미지·밑줄 표시는 걷었다: 컬러 이미지 대신 활자, 선택 표시는 채움 하나로 통일. */
.lang-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
    transition: all 0.3s ease;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a3a3a;
    font-family: inherit;
    pointer-events: none;   /* 클릭은 컨테이너가 받는다(토글) */
}
.lang-btn:hover { background: rgba(0, 0, 0, 0.06); }
.lang-btn.active {
    background: var(--control-on-bg, #667eea);
    color: var(--control-on-fg, #ffffff);
}

/* 툴팁 */
.lang-btn[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10001;
}

/* 모바일 반응형 — 크기만 줄인다. 자리는 .fixed-dock 소관. */
@media (max-width: 768px) {
    .language-switcher {
        padding: 4px 8px;
        gap: 4px;
    }
}

/* 애니메이션 */
@keyframes languageSwitch {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        transform: scale(1);
    }
}

.lang-btn.switching {
    animation: languageSwitch 0.4s ease;
}

/* 다크 테마(테마 시스템)에서의 스위처 색 — 예전 prefers-color-scheme 블록을 이관 */
html[data-theme="classic"][data-sys="dark"] .language-switcher {
    background: rgba(44, 62, 80, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="classic"][data-sys="dark"] .lang-btn.active {
    background: rgba(103, 126, 234, 0.25);
}

/* ── 분절 토글(테마·언어·글자 크기) ───────────────────────
   ⭐ 같은 역할의 컨트롤은 **규칙을 한 벌만** 둔다(§6). 테마·언어를 두 벌로 갈라 뒀다가
      언어만 글자 11.5px·여백 8px 로 홀쭉해진 적이 있다(2026-08-26). 그래서 뒤에 붙는
      컨트롤(읽기 화면의 글자 크기)은 새 규칙을 만들지 않고 `.seg-switcher`/`.seg-opt`
      로 이 규칙에 얹힌다 — 아래 선택자에 이름만 나란히 적는다.
   ⚠️ theme.js 가 `.theme-switcher` 를 **querySelector 로 하나만** 잡으므로, 다른 컨트롤이
      그 클래스를 같이 쓰면 안 된다. 그래서 공용 이름을 따로 뒀다.
   ── 테마 선택 ────────────────────────────────────────────
   ⚠️ 자리(위치·층)는 base.html 의 .fixed-dock 이 정한다 — 여기서 좌표를 박지 않는다.
      예전엔 bottom 113/70/15 처럼 셋이 각자 좌표를 들고 있어, 하나만 크기가 바뀌어도
      줄이 어긋났다(실제로 계단처럼 세 줄이 됐다).
   ⚠️ 스위처 자체는 **모든 테마에서 보여야** 하므로 테마 파일이 아니라 여기 둔다. */
.theme-switcher,
.seg-switcher {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.theme-switcher .theme-opt,
.seg-switcher .seg-opt {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  /* 고르지 않은 쪽도 읽혀야 한다 — #555 는 흐려서 "기본"이 잘 안 보였다(2026-08-21 검수).
     흰 알약 배경 대비 약 10.4:1. */
  color: #3a3a3a;
  font-family: inherit;
}
.theme-switcher .theme-opt:hover,
.seg-switcher .seg-opt:hover { background: rgba(0, 0, 0, 0.06); }
/* ⚠️ 선택색은 테마 토큰이 정한다 — 공용 파일에 성경책 가죽색을 박았다가
      기본 테마의 선택 알약까지 가죽색이 됐었다(2026-08-26 통일성 원칙으로 정정). */
.theme-switcher .theme-opt.on,
.seg-switcher .seg-opt.on { background: var(--control-on-bg, #667eea); color: var(--control-on-fg, #ffffff); }
.theme-switcher .theme-opt:focus-visible,
.seg-switcher .seg-opt:focus-visible { outline: 2px solid #b08a3c; outline-offset: 2px; }

@media (max-width: 768px) {
  .theme-switcher,
  .seg-switcher { padding: 2px; }
}


/* ── 도크 막대(읽기 화면 글자 크기) ───────────────────────
   분절 토글과 **같은 줄 높이·글꼴·색 토큰**을 쓴다(핸드북 0절: 새 모양을 발명하지 않는다).
   트랙 채움·썸 색은 --control-on-bg(테마가 정한다: 성경책=가죽, 기본=보라). 값 표시는 토글 글자와 같은 크기. */
.dock-range {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 160px;
}
.dock-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 100px;
  height: 44px;              /* 손가락 크기 — 토글 알맹이와 같다 */
  margin: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
/* 트랙·채움·값 색은 토큰이다(테마가 정한다 — 성경책: --dock-range-track/-fill/-ink, book.css).
   대체값은 옛 하드코딩 값 그대로라 기본 테마는 달라지지 않는다.
   ⚠️ 웹킷 트랙에는 채움 의사요소가 없다 — read.js 가 넣는 --pct 만큼 채움색 그라데이션을 자른다. */
.dock-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(var(--dock-range-fill, var(--control-on-bg, #667eea)), var(--dock-range-fill, var(--control-on-bg, #667eea)))
      no-repeat 0 0 / var(--pct, 0%) 100%,
    var(--dock-range-track, rgba(0, 0, 0, 0.14));
}
.dock-range input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--dock-range-track, rgba(0, 0, 0, 0.14));
}
.dock-range input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--dock-range-fill, var(--control-on-bg, #667eea));
}
.dock-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;          /* 트랙 4px 가운데에 */
  border-radius: 50%;
  border: 2px solid var(--control-on-fg, #ffffff);
  background: var(--control-on-bg, #667eea);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.dock-range input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--control-on-fg, #ffffff);
  background: var(--control-on-bg, #667eea);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.dock-range input[type="range"]:focus-visible { outline: 2px solid #b08a3c; outline-offset: 2px; border-radius: 999px; }
.dock-range-value {
  min-width: 2.6em;
  font-size: 12px;                 /* .dock-row-label 과 같은 크기 */
  line-height: 1.2;
  color: var(--dock-range-ink, #3a3a3a);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── payment.css ── */
/* 커피 버튼 스타일 (좌측 하단 고정) */
.coffee-button {
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 999;

    background: linear-gradient(135deg, #d4a574 0%, #9c6644 100%);
    color: white;
    border: none;
    outline: none;
    border-radius: 25px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;

    box-shadow: 0 4px 15px rgba(156, 102, 68, 0.4);
    transition: all 0.3s ease;

    display: flex;
    align-items: center;
    gap: 6px;

    /* 버튼임을 더 명확히 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.coffee-button::before {
    content: "☕ ";
}

.coffee-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 102, 68, 0.5);
}

.coffee-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(156, 102, 68, 0.4);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .coffee-button {
        bottom: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 13px;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .coffee-button {
        bottom: 8px;
        left: 8px;
        padding: 5px 10px;
        font-size: 12px;
        gap: 4px;
    }
}

/* 결제 모달 스타일 */
.payment-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.payment-modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.payment-modal-content {
    background: white;
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    max-height: 90vh;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    overflow-y: auto;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.payment-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.payment-modal-close:hover {
    color: #333;
}

.payment-modal-content h2 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.payment-modal-content p {
    text-align: center;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.payment-amount {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    text-align: center;
}

.payment-amount strong {
    font-size: 24px;
    color: #d4a574;
    font-weight: 700;
}

#payment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#payment-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#payment-form label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

#payment-form input {
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.2s ease;
}

#payment-form input:focus {
    outline: none;
    border-color: #d4a574;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

/* 카카오페이 버튼 컨테이너 */
.kakaopay-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* 카카오페이 버튼 스타일 */
.kakaopay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kakaopay-btn.qr-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.kakaopay-btn.link-btn {
    background: #FEE500;
    color: #3C1E1E;
}

.kakaopay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.kakaopay-btn:active {
    transform: translateY(0);
}

.kakaopay-btn .btn-icon {
    font-size: 20px;
}

.kakaopay-btn .btn-text {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-only-badge {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
}

/* QR 코드 컨테이너 */
.qr-code-container {
    margin-top: 15px;
    text-align: center;
    padding: 15px;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
}

.qr-code-image {
    max-width: 250px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-code-description {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* 데스크탑 대응 - QR 코드 영역 더 컴팩트하게 */
@media (min-width: 769px) {
    .qr-code-container {
        margin-top: 10px;
        padding: 8px;
    }

    .qr-code-image {
        max-width: 320px;
    }

    .qr-code-description {
        margin-top: 5px;
        margin-bottom: 0;
        font-size: 13px;
    }
}

.payment-notice {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
}

.payment-notice small {
    color: #999;
    font-size: 13px;
}

/* 모바일 대응 - 모달 */
@media (max-width: 768px) {
    .payment-modal-content {
        padding: 30px 25px;
        max-width: 95%;
    }

    .payment-modal-content h2 {
        font-size: 24px;
    }

    .payment-amount strong {
        font-size: 20px;
    }

    .payment-btn {
        font-size: 16px;
        padding: 13px;
    }

    /* 모바일에서 제목 - 괄호 부분만 줄바꿈 허용 */
    .donation-header-compact h1 {
        font-size: 14px;
        word-break: keep-all;
        line-height: 1.3;
    }

    .donation-header-compact .subtitle {
        font-size: 13px;
        white-space: nowrap;
    }

    /* 금액 표시 줄바꿈 방지 */
    .amount-display {
        font-size: 26px;
        white-space: nowrap;
    }

    /* QR 코드 설명 줄바꿈 방지 */
    .qr-code-description {
        font-size: 12px;
        white-space: nowrap;
    }

    /* 버튼 텍스트 줄바꿈 방지 */
    .kakaopay-btn .btn-text {
        font-size: 14px;
        white-space: nowrap;
    }

    .mobile-only-badge {
        font-size: 11px;
        white-space: nowrap;
    }

    /* 감사 메시지 폰트 크기 조정 */
    .payment-modal-content p {
        font-size: 12px;
    }
}

/* 더 작은 모바일 화면 대응 */
@media (max-width: 480px) {
    .donation-header-compact h1 {
        font-size: 13px;
        word-break: keep-all;
        line-height: 1.3;
    }

    .donation-header-compact .subtitle {
        font-size: 12px;
    }

    .amount-display {
        font-size: 24px;
    }

    .kakaopay-btn .btn-text {
        font-size: 13px;
    }

    .mobile-only-badge {
        font-size: 10px;
    }
}

/* 로딩 스피너 */
.payment-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 버튼 비활성화 상태 */
.payment-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.payment-btn:disabled:hover {
    box-shadow: none;
}

/* Donation 페이지/모달 전용 스타일 */
.donation-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(103, 126, 234, 0.2);
}

.donation-header h1 {
    font-size: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.donation-header .subtitle {
    font-size: 18px;
    color: #6b7280;
    margin-top: 5px;
}

/* 컴팩트 헤더 스타일 (모달용) */
.donation-header-compact {
    text-align: center;
    margin-bottom: 5px;
    padding-bottom: 10px;
}

.donation-header-compact h1 {
    font-size: 24px;
    color: #333;
    margin: 0 0 8px 0;
}

.donation-header-compact .subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* 컴팩트 섹션 스타일 */
.donation-section-compact {
    margin-bottom: 20px;
}

/* 상세 정보 접기/펴기 스타일 */
.donation-details {
    margin: 20px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    background: #f9fafb;
}

.donation-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #667eea;
    font-size: 15px;
    user-select: none;
}

.donation-details summary::before {
    content: "💰 ";
}

.donation-details summary:hover {
    color: #764ba2;
}

.donation-details p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}

.hero-image {
    text-align: center;
    font-size: 80px;
    margin: 20px 0;
}

.donation-section {
    margin-bottom: 40px;
}

.donation-section h2 {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.donation-section p {
    line-height: 1.8;
    color: #374151;
    margin: 15px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.feature-card {
    background: #f9fafb;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: #667eea;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(103, 126, 234, 0.2);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.feature-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

.usage-list {
    background: #f0f4ff;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    margin: 20px 0;
}

.usage-list h3 {
    font-size: 18px;
    color: #667eea;
    margin-bottom: 15px;
}

.usage-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usage-list li {
    padding: 8px 0;
    color: #374151;
    display: flex;
    align-items: center;
}

.usage-list li:before {
    content: "✓";
    color: #667eea;
    font-weight: bold;
    margin-right: 10px;
    font-size: 18px;
}

.donation-amount-section {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin: 15px 0;
}

.amount-label {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 10px;
}

.amount-display {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0;
}

.amount-description {
    font-size: 14px;
    color: #6b7280;
    margin-top: 10px;
}

.payment-methods {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.payment-method-badge {
    background: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.testimonial {
    background: #fffbeb;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
    margin: 30px 0;
}

.testimonial-text {
    font-style: italic;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 15px;
}

.testimonial-author {
    text-align: right;
    color: #6b7280;
    font-size: 14px;
}

.faq-section {
    margin-top: 40px;
}

.faq-item {
    background: white;
    padding: 20px;
    margin: 15px 0;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.faq-question {
    font-size: 16px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 10px;
}

.faq-answer {
    color: #6b7280;
    line-height: 1.6;
}

/* 모바일 대응 - Donation 스타일 */
@media (max-width: 768px) {
    .donation-header h1 {
        font-size: 28px;
    }

    .amount-display {
        font-size: 36px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .payment-modal-content {
        padding: 25px;
    }
}


/* ── 후원 모달 안쪽 글 — 템플릿 인라인 style 에서 옮겨 온 것 (2026-08-27) ──────
   ⚠️ 인라인 style 은 테마가 덮을 수 없다(선택자가 없어 !important 를 걸 자리도 없다).
      값은 옮기기 전과 **똑같다** — 기본 테마의 모습은 바뀌지 않는다.
      성경책 테마는 themes/book.css 의 모달 절이 이 클래스 이름으로 덮는다. */
.donation-details-body { margin-top: 15px; }
.donation-subtitle { font-size: 16px; color: #667eea; margin: 15px 0 10px 0; }
.donation-usage-list { list-style: none; padding: 0; margin: 0 0 20px 0; font-size: 14px; color: #374151; }
.donation-usage-list li { padding: 5px 0; }
.donation-faq { font-size: 14px; color: #374151; }
.donation-link { color: #667eea; }
.donation-thanks { text-align: center; margin-top: 25px; color: #6b7280; font-size: 13px; }

/* ── footer.css ── */
/* 사업자 정보 표시 (캘린더 내부 컴팩트) */
.business-info-compact {
    margin-top: 30px;
    padding: 20px;
    background-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 12px 12px;
    font-size: 11px;
    color: #6c757d;
    line-height: 1.8;
}

.business-info-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.business-info-line span {
    white-space: nowrap;
}

.business-info-line.policy-links {
    margin-top: 8px;
}

.business-info-line.policy-links a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.business-info-line.policy-links a:hover {
    color: #764ba2;
    text-decoration: underline;
}

.business-info-copyright {
    margin-top: 12px;
    text-align: center;
    font-size: 10px;
    color: #adb5bd;
}

/* 광고 안내 문구 (비로그인 사용자에게만 노출) */
.ad-notice {
    margin: 16px 0 6px;
    text-align: center;
    font-size: 12px;
    color: #6c757d;
}

/* 다크 테마(테마 시스템)에서의 푸터 색 — 예전 prefers-color-scheme 블록을 이관 */
html[data-theme="classic"][data-sys="dark"] .ad-notice { color: #adb5bd; }
html[data-theme="classic"][data-sys="dark"] .business-info-compact {
    background-color: transparent;
    border-top-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="classic"][data-sys="dark"] .business-info-line { color: #6c757d; }
html[data-theme="classic"][data-sys="dark"] .business-info-copyright { color: #adb5bd; }

/* 모바일 반응형 */
@media (max-width: 768px) {
    .business-info-compact {
        padding: 15px 10px;
        font-size: 9px;
        margin-top: 20px;
    }

    .business-info-line {
        justify-content: center;
        gap: 6px;
        text-align: center;
        line-height: 1.6;
    }

    .business-info-line span {
        display: inline;
    }

    .business-info-copyright {
        font-size: 8px;
        margin-top: 8px;
    }
}

/* 프린트 시 숨김 */
@media print {
    .business-info-compact {
        display: none;
    }
}

/* ── tutorial.css ── */
/* 튜토리얼 도움말 고정 버튼 */
.tutorial-help-button {
    position: fixed !important;
    bottom: 70px !important; /* 번역 버튼 위에 배치 (간격 더 줄임) */
    right: 15px !important;
    z-index: 10001 !important;
    width: 35px !important;
    height: 35px !important;
    background: rgba(103, 126, 234, 0.25) !important;
    color: rgba(103, 126, 234, 0.9) !important;
    border: none !important;
    outline: none !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(103, 126, 234, 0.2) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tutorial-help-button:hover {
    background: rgba(103, 126, 234, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(103, 126, 234, 0.3);
}

.tutorial-help-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(103, 126, 234, 0.2);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .tutorial-help-button {
        bottom: 55px !important; /* 모바일 번역 버튼 위 */
        right: 10px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .tutorial-help-button {
        bottom: 50px !important; /* 작은 모바일 번역 버튼 위 */
        right: 8px !important;
        width: 25px !important;
        height: 25px !important;
        font-size: 12px !important;
    }
}

/* 튜토리얼 오버레이 */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
}

/* 어두운 배경 */
.tutorial-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: all;
}

/* 스포트라이트 (강조할 요소 위치) */
.tutorial-spotlight {
    position: fixed;
    border-radius: 12px;
    border: 3px solid rgba(103, 126, 234, 0.9);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7),
                0 0 20px rgba(103, 126, 234, 0.6),
                inset 0 0 0 9999px rgba(255, 255, 255, 0);
    pointer-events: none;
    z-index: 10001;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 툴팁 */
.tutorial-tooltip {
    position: fixed;
    max-width: 350px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    pointer-events: all;
    z-index: 10002;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    opacity: 0;
}

.tutorial-content {
    padding: 24px;
}

.tutorial-text {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.tutorial-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.tutorial-progress {
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}

.tutorial-nav-buttons {
    display: flex;
    border: none;
    gap: 8px;
    width: 100%;
}

.tutorial-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    outline: none;
}

.tutorial-skip {
    background: #f3f4f6;
    color: #6b7280;
    width: 100%;
}

.tutorial-skip:hover {
    background: #e5e7eb;
}

.tutorial-skip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tutorial-prev {
    background: #f3f4f6;
    color: #6b7280;
}

.tutorial-prev:hover:not(:disabled) {
    background: #e5e7eb;
}

.tutorial-prev:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.tutorial-next {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.tutorial-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(103, 126, 234, 0.3);
}

.tutorial-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.tutorial-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.tutorial-checkbox:hover {
    color: #374151;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .tutorial-tooltip {
        max-width: 280px;
    }

    .tutorial-content {
        padding: 16px;
    }

    .tutorial-text {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .tutorial-nav-buttons {
        width: 100%;
    }

    .tutorial-btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tutorial-text {
        font-size: 12px;
        line-height: 1.4;
    }

    .tutorial-content {
        padding: 16px;
    }
}

/* ── calendar.css ── */
/* 달력 페이지 스타일 */

body {
    font-family: 'Segoe UI', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    margin: 0;
    padding: 0 0 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 35px 35px 100px 35px;
    border-radius: 20px;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.1),
        0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 1200px;
    margin: 10px auto;
    width: calc(100% - 20px);
    min-width: 320px;
    box-sizing: border-box;
}

/* 버전 정보 스타일 */
.version-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    position: relative;
    min-height: 48px;
}

.version-info .auth-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.version-info .version-badge {
    margin-left: auto;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 8px 16px;
    min-height: 48px;
    box-sizing: border-box;
    font-size: 14px;
    color: white;
    box-shadow:
        0 6px 20px rgba(103, 126, 234, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    text-decoration: none;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin: 0;
    vertical-align: middle;
}

.version-badge:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(103, 126, 234, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* 로그인/로그아웃 버튼 (버전 정보와 비슷한 스타일) */
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 8px 16px;
    min-height: 48px;
    box-sizing: border-box;
    font-size: 14px;
    color: white;
    cursor: pointer;
    box-shadow:
        0 6px 20px rgba(103, 126, 234, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin: 0;
    vertical-align: middle;
    text-decoration: none;
    transition: all 0.2s ease;
}

.auth-badge:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(103, 126, 234, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}


/* 관리자 버튼 */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 8px 16px;
    min-height: 48px;
    box-sizing: border-box;
    font-size: 14px;
    color: white;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 6px 20px rgba(249, 115, 22, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.admin-badge:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(249, 115, 22, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.admin-icon {
    font-size: 16px;
    line-height: 1;
}

.admin-text {
    font-size: 14px;
    font-weight: 700;
    color: white;
    line-height: 1;
    letter-spacing: 0.3px;
}

.auth-icon {
    font-size: 14px;
    line-height: 1;
}

.auth-text {
    font-size: 14px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.auth-action {
    font-size: 14px;
    color: white;
    font-weight: 600;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    padding: 4px 10px;
    border-radius: 15px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.logout-badge .auth-text {
    color: white;
}

.logout-badge:hover .auth-text {
    color: white;
}

.logout-badge:hover .auth-action {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

/* 버전 링크 스타일 */
.version-link {
    cursor: pointer;
    align-self: center;
    justify-content: center;
}

.version-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(103, 126, 234, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.version-number {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.update-date {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

/* 헤더 네비게이션 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 0;
    border-bottom: 2px solid rgba(103, 126, 234, 0.1);
}

.nav-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-weight: 700;
    font-size: 15px;
    box-shadow:
        0 6px 20px rgba(103, 126, 234, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(103, 126, 234, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.nav-btn:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 4px 15px rgba(103, 126, 234, 0.4),
        0 1px 5px rgba(0, 0, 0, 0.15);
}

.month-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.month-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin: 0;
}

.today-link {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow:
        0 6px 20px rgba(245, 158, 11, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.today-link:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(245, 158, 11, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.today-link:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 4px 15px rgba(245, 158, 11, 0.4),
        0 1px 5px rgba(0, 0, 0, 0.15);
}

/* 달력 테이블 */
.calendar-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-bottom: 10px;
    background: transparent;
    table-layout: fixed;
}

.calendar-table th,
.calendar-table td {
    width: 14.28%;
    height: 100px;
    border: none;
    text-align: left;
    vertical-align: top;
    position: relative;
    padding: 8px;
    border-radius: 12px;
    word-wrap: break-word;
    overflow: hidden;
}

.calendar-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    height: 40px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    box-shadow: 0 4px 15px rgba(103, 126, 234, 0.3);
    border-radius: 12px;
    display: table-cell;
    line-height: 40px;
}

.calendar-table td {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.1);
    border: 2px solid transparent;
}

.calendar-table td:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 12px 30px rgba(103, 126, 234, 0.15),
        0 4px 15px rgba(0,0,0,0.1);
    border-color: rgba(103, 126, 234, 0.3);
}

/* 날짜 헤더 (날짜와 장수 배지를 포함하는 컨테이너) */
.day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

/* 날짜 숫자 */
.day-number {
    font-weight: 700;
    font-size: 18px;
    color: #667eea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(103, 126, 234, 0.1);
    flex-shrink: 0;
}

/* 읽은 장수 배지 */
.day-chapters-badge {
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    margin-top: 2px;
}

/* 읽기 기록이 있는 날 */
.day-with-reading {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 2px solid #f59e0b !important;
    position: relative;
}

.day-with-reading .day-number {
    background: #f59e0b;
    color: white;
    font-weight: bold;
}

.day-with-reading:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 15px 35px rgba(245, 158, 11, 0.3),
        0 5px 15px rgba(0,0,0,0.1);
}

/* 읽기 기록 텍스트 */
.reading-summary {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    max-width: 100%;
}

.reading-range {
    font-size: 11px;
    color: #374151;
    line-height: 1.2;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(107, 114, 128, 0.1);
    padding: 1px 4px;
    border-radius: 4px;
    max-width: 100%;
}

/* 읽기 기록 아이템 */
.reading-item {
    margin-top: 4px;
}

.verse-range {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(103, 126, 234, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    max-width: 100%;
}

.verse-abbr {
    display: none;
}

.verse-full {
    display: inline;
}

/* 통계 프로그레스 바 */
.stats-container {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.stat-box {
    flex: 1;
    min-width: 250px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(103, 126, 234, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
}

.goal-setting-btn {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.6) 0%, rgba(217, 119, 6, 0.6) 100%);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    white-space: nowrap;
}

.goal-setting-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.75) 0%, rgba(217, 119, 6, 0.75) 100%);
}

.goal-btn-text {
    font-size: 13px;
    font-weight: 600;
}

.stat-icon {
    font-size: 18px;
}

.stat-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.stat-title::before {
    content: "📊 ";
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(229, 231, 235, 0.8);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.progress-goal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.5) 0%, rgba(245, 158, 11, 0.5) 100%);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
    position: relative;
    z-index: 2;
    border-radius: 6px;
}

.progress-fill.yearly {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.progress-text {
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.stat-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.chapters-count {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    max-width: 100%;
}

.multiple-readings {
    font-size: 10px;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
    background: rgba(107, 114, 128, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    position: relative;
    z-index: 2;
}

/* 오늘 날짜 */
.today {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 2px solid #667eea !important;
    position: relative;
}

/* TODAY 표기 제거 - 배경색으로 충분히 구분 가능 */

.today .day-number {
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
}

.today .reading-summary {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.today .reading-range {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
}

.today:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 15px 35px rgba(103, 126, 234, 0.3),
        0 5px 15px rgba(0,0,0,0.1);
}

/* 오늘 날짜이면서 읽기 기록이 있는 경우 */
.today.day-with-reading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 2px solid #f59e0b !important;
}

.today.day-with-reading .day-number {
    background: #f59e0b;
    color: white;
    font-weight: bold;
}

.today.day-with-reading .verse-range {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 600;
}

.today.day-with-reading .day-chapters-badge {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 8, 8, 0.9);
    font-weight: 700;
}

.today.day-with-reading .chapters-count {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* 로컬 저장 기록 표시 */
.reading-info {
    font-size: 11px;
    color: #744210;
    margin-top: 4px;
    padding: 2px 4px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 4px;
    text-align: center;
    word-break: break-all;
}

.reading-summary {
    font-weight: 500;
    line-height: 1.2;
}

/* 빈 날짜 셀 */
.empty-day {
    background-color: #f8f9fa;
    cursor: default;
}

.empty-day:hover {
    background-color: #f8f9fa !important;
    transform: none;
}

/* 액션 버튼들 */
.actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.action-btn {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    transition: all 0.3s;
    font-weight: 500;
}

.action-btn:hover {
    background-color: #27ae60;
    transform: translateY(-1px);
}

/* 범례 컨테이너 */
.legend-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 10px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    gap: 20px;
}

/* 범례 */
.legend {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: 14px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

.legend-reading {
    background-color: #f59e0b;
}

.legend-today {
    background-color: #667eea;
}

/* 모바일 반응형 */
@media (max-width: 1000px) {
    body {
        padding: 0;
        overflow-x: hidden;
    }

    .container {
        padding: 20px;
        min-width: unset;
        width: calc(100% - 16px);
        max-width: 100%;
        margin: 8px auto;
    }

    .sections-container {
        padding: 12px 15px;
        gap: 15px;
    }
}

/* 힌트와 이번달로 버튼 스타일 */
.add-reading-hint {
    background: linear-gradient(135deg, rgba(103, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(103, 126, 234, 0.2);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
}

.hint-icon {
    font-size: 13px;
}

.action-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(103, 126, 234, 0.3);
    font-size: 14px;
    white-space: nowrap;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(103, 126, 234, 0.4);
}

.action-icon {
    font-size: 16px;
}

@media (max-width: 768px) {
    body {
        padding: 0;
        overflow-x: hidden;
    }

    .container {
        padding: 10px;
        min-width: unset;
        width: calc(100% - 8px);
        max-width: 100%;
        margin: 4px auto;
        border-radius: 12px;
    }

    .sections-container {
        flex-direction: row;
        padding: 6px 8px;
        gap: 6px;
    }

    .sections-container .login-section,
    .sections-container .info-section {
        margin: 0;
        flex: 1;
        padding: 6px 4px;
        gap: 4px;
    }

    .login-btn,
    .release-notes-btn {
        flex-direction: row;
        padding: 6px 8px;
        gap: 4px;
        font-size: 11px;
        white-space: nowrap;
    }

    .login-btn span:first-child,
    .release-notes-btn span:first-child {
        font-size: 11px;
    }

    .login-section p,
    .info-section p {
        font-size: 9px;
        line-height: 1.2;
    }

    /* 모바일 버전 정보 */
    .version-info {
        margin-bottom: 15px;
        margin-top: -5px;
    }

    .legend-container {
        display: flex !important;
        align-items: center !important;
    }

    .version-badge,
    .auth-badge,
    .admin-badge {
        gap: 4px;
        padding: 6px 8px;
        font-size: 11px;
        border-radius: 10px;
        min-height: 40px;
        height: 40px;
    }

    .version-link {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }


    .version-number {
        padding: 2px 8px;
        font-size: 11px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
        font-weight: 600;
        line-height: 1.4;
    }

    .update-date {
        font-size: 11px;
        color: #ffffff;
        font-weight: 500;
        line-height: 1;
    }

    .auth-action {
        font-size: 11px;
        color: white;
        font-weight: 600;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        padding: 2px 8px;
        border-radius: 8px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
        line-height: 1.4;
    }

    .auth-text {
        font-size: 11px;
        line-height: 1;
    }

    .time-storage-sections {
        gap: 10px;
        margin-bottom: 12px;
    }

    .storage-info,
    .server-time-info {
        padding: 8px 12px;
        font-size: 12px;
    }

    .hint-actions-container {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 10px;
    }

    .hint-section {
        min-width: 0;
        flex: 1;
    }

    .add-reading-hint {
        padding: 3px 5px;
        font-size: 13px;
    }

    .hint-icon {
        font-size: 14px;
    }

    .action-btn {
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .action-icon {
        font-size: 14px;
    }

    .header {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 12px;
        padding: 8px 0;
    }

    .month-title {
        font-size: 17px;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 12px;
        gap: 4px;
    }

    .today-link {
        padding: 6px 10px;
        font-size: 12px;
    }

    .calendar-table {
        min-width: unset;
        width: 100%;
        table-layout: fixed;
        border-spacing: 3px;
    }

    .calendar-table th,
    .calendar-table td {
        height: 60px;
        font-size: 11px;
        padding: 4px 2px;
        min-width: unset;
        width: 14.28%;
        border-radius: 8px;
    }

    .calendar-table th {
        height: 25px;
        font-size: 12px;
        padding: 0;
        vertical-align: middle;
        line-height: 25px;
        display: table-cell;
    }

    .day-number {
        font-size: 13px;
        width: 20px;
        height: 20px;
    }

    .day-chapters-badge {
        font-size: 9px;
        padding: 1px 3px;
        border-radius: 6px;
        margin-top: 1px;
    }

    .reading-summary {
        font-size: 8px;
        white-space: normal;
        word-break: break-all;
        max-width: 100%;
        line-height: 1.1;
        padding: 0px;
        margin-bottom: 1px;
        background: none;
        color: #059669;
        font-weight: 600;
    }

    .reading-range {
        font-size: 7px;
        white-space: normal;
        word-break: break-all;
        max-width: 100%;
        line-height: 1.1;
        padding: 0px;
        margin-bottom: 1px;
        background: none;
        color: #374151;
        font-weight: 500;
    }

    .chapters-count {
        font-size: 6px;
        padding: 1px 2px;
        max-width: 100%;
    }

    .multiple-readings {
        font-size: 6px;
        max-width: 100%;
    }

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

    .actions {
        flex-direction: column;
        align-items: center;
    }

    .legend-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 10px;
        margin-top: 0;
    }

    .calendar-table {
        margin-bottom: 8px;
    }

    .legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px;
        flex: 1;
    }

    .legend-item {
        gap: 6px;
    }

    .version-info {
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .version-badge {
        flex-direction: column;
        text-align: center;
    }

    /* 모바일에서 통계 섹션 표시 */
    .stats-container {
        display: flex;
        flex-direction: column;
        margin-top: 12px;
        gap: 10px;
    }

    .stat-box {
        min-width: auto;
        padding: 12px;
    }

    .stat-title {
        font-size: 13px;
    }

    .stat-details {
        font-size: 11px;
        flex-wrap: wrap;
    }

    .goal-setting-btn {
        padding: 6px 12px;
        font-size: 12px;
        gap: 4px;
    }

    .goal-btn-text {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
    }

    .container {
        padding: 8px;
        min-width: unset;
        width: calc(100% - 4px);
        margin: 2px auto;
        border-radius: 8px;
    }

    .sections-container {
        flex-direction: row;
        padding: 5px 6px;
        gap: 5px;
    }

    .sections-container .login-section,
    .sections-container .info-section {
        flex: 1;
        padding: 5px 3px;
        gap: 3px;
    }

    .login-btn,
    .release-notes-btn {
        flex-direction: row;
        padding: 5px 6px;
        gap: 3px;
        font-size: 10px;
        white-space: nowrap;
    }

    .login-btn span:first-child,
    .release-notes-btn span:first-child {
        font-size: 10px;
    }

    .login-section p,
    .info-section p {
        font-size: 8px;
        line-height: 1.2;
    }

    /* 480px 범례 및 버전 정보 */
    .legend-container {
        padding: 6px 8px;
        gap: 8px;
        margin-top: 0;
    }

    .calendar-table {
        margin-bottom: 6px;
    }

    .legend {
        font-size: 10px;
        gap: 5px;
    }

    .legend-item {
        gap: 5px;
    }

    .legend-container {
        display: flex !important;
        align-items: center !important;
    }

    .version-badge,
    .auth-badge,
    .admin-badge {
        gap: 3px;
        padding: 5px 6px;
        font-size: 10px;
        border-radius: 8px;
        min-height: 36px;
        height: 36px;
    }

    .version-link {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }


    .version-number {
        padding: 2px 6px;
        font-size: 10px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
        font-weight: 600;
        line-height: 1.4;
    }

    .update-date {
        font-size: 10px;
        color: #ffffff;
        font-weight: 500;
        line-height: 1;
    }

    .auth-action {
        font-size: 10px;
        color: white;
        font-weight: 600;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        padding: 2px 6px;
        border-radius: 6px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
        line-height: 1.4;
    }

    .auth-text {
        font-size: 10px;
        line-height: 1;
    }

    .calendar-table {
        min-width: unset;
        width: 100%;
        border-spacing: 2px;
    }

    .calendar-table th,
    .calendar-table td {
        height: 50px;
        padding: 3px 1px;
        font-size: 10px;
        border-radius: 6px;
    }

    .calendar-table th {
        height: 20px;
        font-size: 11px;
        padding: 0;
        vertical-align: middle;
        line-height: 20px;
        display: table-cell;
    }

    .day-number {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .day-chapters-badge {
        font-size: 8px;
        padding: 1px 2px;
        border-radius: 4px;
        margin-top: 0px;
    }

    .reading-summary {
        font-size: 7px;
        line-height: 1.0;
        padding: 0px;
        margin-bottom: 0px;
        background: none;
        color: #059669;
        font-weight: 600;
        white-space: normal;
        word-break: break-all;
    }

    .reading-range {
        font-size: 6px;
        padding: 0px;
        margin-bottom: 0px;
        line-height: 1.0;
        background: none;
        color: #374151;
        font-weight: 500;
        white-space: normal;
        word-break: break-all;
    }

    .verse-range {
        font-size: 8px;
        padding: 1px 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .verse-full {
        display: none !important;
    }

    .verse-abbr {
        display: inline !important;
    }

    .chapters-count {
        font-size: 7px;
        padding: 1px 3px;
    }

    .multiple-readings {
        font-size: 5px;
    }

    .hint-actions-container {
        gap: 6px;
        margin-bottom: 8px;
    }

    .add-reading-hint {
        padding: 2px 4px;
        font-size: 11px;
    }

    .hint-icon {
        font-size: 12px;
    }

    .action-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    .action-icon {
        font-size: 12px;
    }

    .nav-btn {
        padding: 5px 8px;
        font-size: 11px;
        gap: 3px;
    }

    .today-link {
        padding: 5px 8px;
        font-size: 11px;
    }

    .month-title {
        font-size: 15px;
    }

    .header {
        gap: 6px;
        margin-bottom: 10px;
    }

    .time-storage-sections {
        gap: 8px;
        margin-bottom: 10px;
    }

    .storage-info,
    .server-time-info {
        padding: 7px 10px;
        font-size: 11px;
    }

    .server-time-info .time-label {
        display: none;
    }

    /* 섹션 설명 텍스트 간결화 */
    .section-description {
        display: none;
    }

    .section-description-mobile {
        display: block;
    }

    /* 버튼 텍스트 간결화 */
    .btn-text-full {
        display: none;
    }

    .btn-text-mobile {
        display: inline;
    }

    /* 섹션 패딩 축소 */
    .login-section,
    .info-section {
        padding: 15px;
    }

    .login-section h3,
    .info-section h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .login-section p,
    .info-section p {
        font-size: 13px;
        margin-bottom: 12px;
    }

    /* 480px 통계 섹션 */
    .stats-container {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        gap: 8px;
    }

    .stat-box {
        min-width: auto;
        padding: 10px;
    }

    .stat-title {
        font-size: 12px;
    }

    .stat-details {
        font-size: 10px;
    }

    .goal-setting-btn {
        padding: 5px 10px;
        font-size: 11px;
        gap: 3px;
    }

    .goal-btn-text {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    body {
        padding: 0;
    }

    .container {
        padding: 5px;
        width: calc(100% - 2px);
        margin: 1px auto;
    }

    .sections-container {
        flex-direction: row;
        padding: 4px 5px;
        gap: 4px;
    }

    .sections-container .login-section,
    .sections-container .info-section {
        flex: 1;
        padding: 4px 3px;
        gap: 2px;
    }

    .login-btn,
    .release-notes-btn {
        flex-direction: row;
        padding: 4px 5px;
        gap: 2px;
        font-size: 9px;
        white-space: nowrap;
    }

    .login-btn span:first-child,
    .release-notes-btn span:first-child {
        font-size: 9px;
    }

    .login-section p,
    .info-section p {
        font-size: 7px;
        line-height: 1.1;
    }

    /* 360px 범례 및 버전 정보 */
    .legend-container {
        padding: 5px 6px;
        gap: 6px;
        margin-top: 0;
    }

    .calendar-table {
        margin-bottom: 5px;
    }

    .legend {
        font-size: 9px;
        gap: 4px;
    }

    .legend-item {
        gap: 4px;
    }

    .legend-container {
        display: flex !important;
        align-items: center !important;
    }

    .version-badge,
    .auth-badge,
    .admin-badge {
        gap: 2px;
        padding: 4px 5px;
        font-size: 9px;
        border-radius: 6px;
        min-height: 32px;
        height: 32px;
    }

    .version-link {
        flex-direction: column;
        justify-content: center;
        gap: 1px;
    }


    .version-number {
        padding: 1px 5px;
        font-size: 9px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
        font-weight: 600;
        line-height: 1.4;
    }

    .update-date {
        font-size: 9px;
        color: #ffffff;
        font-weight: 500;
        line-height: 1;
    }

    .auth-action {
        font-size: 9px;
        color: white;
        font-weight: 600;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        padding: 1px 5px;
        border-radius: 5px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
        line-height: 1.4;
    }

    .auth-text {
        font-size: 9px;
        line-height: 1;
    }

    .calendar-table {
        border-spacing: 1px;
    }

    .calendar-table th,
    .calendar-table td {
        height: 45px;
        padding: 2px 1px;
        font-size: 9px;
        border-radius: 4px;
    }

    .calendar-table th {
        height: 18px;
        font-size: 10px;
        padding: 0;
        vertical-align: middle;
        line-height: 18px;
        display: table-cell;
    }

    .day-number {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .day-chapters-badge {
        font-size: 7px;
        padding: 1px 2px;
        border-radius: 3px;
        margin-top: 0px;
    }

    .reading-summary {
        font-size: 6px;
        padding: 0px;
        line-height: 0.9;
        background: none;
        color: #059669;
        font-weight: 600;
        white-space: normal;
        word-break: break-all;
    }

    .reading-range {
        font-size: 5px;
        padding: 0px;
        line-height: 0.9;
        background: none;
        color: #374151;
        font-weight: 500;
        white-space: normal;
        word-break: break-all;
    }

    .multiple-readings {
        font-size: 4px;
    }

    .chapters-count {
        font-size: 4px;
    }

    .hint-actions-container {
        gap: 5px;
        margin-bottom: 6px;
    }

    .add-reading-hint {
        padding: 2px 3px;
        font-size: 10px;
    }

    .hint-icon {
        font-size: 11px;
    }

    .action-btn {
        padding: 5px 10px;
        font-size: 10px;
    }

    .action-icon {
        font-size: 11px;
    }

    .month-title {
        font-size: 14px;
    }

    .nav-btn {
        padding: 4px 7px;
        font-size: 10px;
        gap: 2px;
    }

    .today-link {
        padding: 4px 7px;
        font-size: 10px;
    }

    .header {
        gap: 4px;
        margin-bottom: 8px;
    }

    /* 360px 통계 섹션 */
    .stats-container {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
        gap: 6px;
    }

    .stat-box {
        min-width: auto;
        padding: 8px;
    }

    .stat-title {
        font-size: 11px;
    }

    .stat-details {
        font-size: 9px;
    }

    .goal-setting-btn {
        padding: 4px 8px;
        font-size: 10px;
        gap: 2px;
    }

    .goal-btn-text {
        font-size: 9px;
    }

    .progress-bar {
        height: 10px;
    }
}

/* ===== INDEX.HTML에서 이동된 추가 스타일들 ===== */

/* 서버 시간 정보 스타일 */
.server-time-info {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 0;
    text-align: center;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

/* 작은 화면에서 서버시간 라벨 숨기기 */

/* 데스크탑에서는 모바일 텍스트 숨김 */
@media (min-width: 481px) {
    .section-description-mobile {
        display: none;
    }

    .section-description {
        display: block;
    }

    .btn-text-mobile {
        display: none;
    }

    .btn-text-full {
        display: inline;
    }
}

/* 로컬 저장 모드 추가 스타일 */
.storage-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 0;
    text-align: center;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-section {
    background: rgba(103, 126, 234, 0.05);
    border: 1px solid rgba(103, 126, 234, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.login-section h3 {
    margin: 0 0 8px 0;
    color: #667eea;
    font-size: 16px;
}

.login-section p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.login-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(103, 126, 234, 0.3);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(103, 126, 234, 0.4);
}

.login-btn span:first-child {
    font-size: 16px;
    flex-shrink: 0;
}

/* 정보 섹션 스타일 */
.info-section {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.1);
    padding: 12px 16px;
    border-radius: 12px;
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.info-section h3 {
    margin: 0 0 8px 0;
    color: #10b981;
    font-size: 16px;
    font-weight: 600;
}

.info-section p {
    margin: 0;
    color: #6b7280;
    line-height: 1.4;
    font-size: 12px;
}

/* 좌우 분할 컨테이너 */
.sections-container,
.time-storage-sections {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}
.time-storage-sections {
    margin-top: 0;
    margin-bottom: 15px;
}

/* 하단 섹션 스타일 */
.sections-container {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 힌트와 이번달로 버튼 컨테이너 */
.hint-actions-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 20px;
}
.hint-section {
    flex: 1;
}
.today-btn-section {
    flex-shrink: 0;
}

.sections-container .login-section,
.sections-container .info-section,
.time-storage-sections .time-section,
.time-storage-sections .storage-section {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
}

/* 데스크톱에서 균등한 높이 유지 */
.sections-container .login-section,
.sections-container .info-section {
    display: flex;
    flex-direction: column;
}

.sections-container .login-section p,
.sections-container .info-section p {
    flex-grow: 1;
}

.last-position-local {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.reset-local-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 12px;
    transition: all 0.3s ease;
}

.reset-local-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 월간 통계 스타일 */
.monthly-stats {
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.stats-icon {
    margin-right: 5px;
    font-size: 16px;
}

.stats-days {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 4px;
}

/* 릴리즈 노트 버튼 스타일 */
.release-notes-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin-top: 0;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.release-notes-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.release-notes-btn span:first-child {
    font-size: 16px;
    flex-shrink: 0;
}
/* ── 펼침면 지면 래퍼 ────────────────────────────────────────
   성경책 테마 · 넓은 화면에서만 "지면" 노릇을 한다(themes/book.css).
   그 밖에서는 **없는 것처럼** 눕혀 둔다.
   ⚠️ display:none 이 아니라 contents 다 — 자식은 그대로 보이고 래퍼만 사라진다.
      block 으로 두면 바깥여백이 겹치는 방식(margin collapse)이 달라져
      기본 테마의 간격이 미묘하게 바뀐다. */
.page { display: contents; }
/* 월 색인은 성경책 전용 — 활성 테마가 명시적으로 열기 전에는 흔적도 없다. */
.month-index { display: none; }

/* ============================================================
   모바일 월 이동 도크 — 테마와 무관한 기본 동작 (2026-08-25 사용자 결정)

   "달 이동 버튼 하단 배치는 편의성 문제라 테마를 가리지 않는다."
   데스크톱에서는 머리말의 ◀ ▶ 그대로, 좁은 화면(≤768px)에서만
   머리말 버튼을 감추고 **항상 화면 아래에 떠 있는** 알약 줄로 옮긴다
   (2026-08-31 사용자 결정 — 후원·설정과 같은 상시 고정. 2026-08-25 의
   '문서 흐름' 결정을 뒤집는다. 그때의 이유였던 backdrop-filter 함정은
   아래에서 근본을 걷었다).
   성경책 테마는 book.css 가 자기 결(종이·가죽)로 이 줄을 덮어쓴다.
   ============================================================ */
.mobile-month-nav { display: none; }

@media (max-width: 768px) {
  /* 머리말에서는 달 이동을 걷어내고 제목만 가운데로 */
  .header > .nav-btn { display: none; }
  .header .month-title-container { margin-inline: auto; }
  .header .month-title-container .today-link { display: none; }

  /* ⚠️ .container 의 backdrop-filter 는 fixed 자식(월 이동 줄)의 containing block 을
     컨테이너로 바꿔 줄이 화면 바닥이 아니라 컨테이너 바닥에 붙는다(CDP 실측: bottom 654≠780).
     book.css 가 같은 이유로 걷었다 — 배경이 거의 불투명(0.95)이라 잃는 흐림은 없다. */
  .container { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ⭐ 후원·설정(.fixed-dock)처럼 **항상 화면 아래에 떠 있는다**(2026-08-31 사용자 결정).
     도크 줄(bottom 10px, 알맹이 44px) 바로 위에 얹고, 성경책 테마(book.css 16절)와
     같은 좌표를 쓴다 — 테마를 바꿔도 줄이 제자리에 있다. */
  .mobile-month-nav {
    position: fixed;
    z-index: 9985; /* 도크(9990) 아래, 본문 위 */
    left: 50%;
    transform: translateX(-50%);
    /* ⭐ 2026-09-06 사용자 결정: 월 이동 줄이 **맨 바닥**, 후원·설정 버튼이 그 **위**에 선다
       (base.html 의 .fixed-dock/.coffee-button 이 폰에서 bottom 80px 로 올라간다). */
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(calc(100vw - 28px), 440px);
    display: grid;
    /* 이전달 · 이번달로 · 성경 읽기 · 다음달 — 가운데 둘은 글자만큼, 양 끝은 남는 폭을 나눈다 */
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(103, 126, 234, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(50, 50, 93, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  /* 떠 있는 줄이 마지막 내용을 가리지 않게 — 도크 74px 위에 월 이동 줄 높이만큼 더 */
  body { padding-bottom: 146px; }
  /* 설정 카드를 펼치면(⚙ 체크) 카드가 이 줄 자리까지 내려온다 — 줄을 위 칸으로 올린다.
     성경책 테마(book.css)와 같은 판단·같은 좌표다. */
  /* 설정 카드를 펼쳐도 줄은 바닥에 그대로다 — 카드는 손잡이(bottom 80px) 위로 자란다(2026-09-06). */
  .mobile-month-nav .nav-btn,
  .mobile-month-nav .today-link {
    min-height: 42px; /* 손가락 기준 — 도크 알맹이 44px 원칙과 같은 이유 */
    margin: 0;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    font-size: clamp(11px, 3vw, 13px);
    border-radius: 999px;
  }
}


/* 낮은 화면(가로로 눕힌 폰) — 도크가 손잡이 하나로 접히므로 월 이동 줄을 바닥 가까이 */
@media (max-width: 768px) and (max-height: 500px) {
  .mobile-month-nav { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: 80px; }
}

/* ── modal.css ── */
/* ===== 모달 관련 스타일들 ===== */

/* 목표 설정 모달 스타일 */
.goal-modal-content {
    max-width: 500px;
    width: 90%;
}

.goal-presets {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.preset-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    color: #d97706;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
}

.preset-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    transform: translateY(-2px);
}

.form-help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(103, 126, 234, 0.1);
    backdrop-filter: blur(15px);
}

/* ===== 상세보기 모달 스타일 ===== */
.detail-records {
    padding: 20px 0;
}

.record-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(103, 126, 234, 0.1);
    transition: all 0.2s ease;
    align-items: center;
}

.record-item:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(103, 126, 234, 0.2);
    transform: translateX(3px);
}

.delete-record-btn {
    margin-left: auto;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.delete-record-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: scale(1.05);
}

.record-index {
    font-size: 14px;
    font-weight: 700;
    color: #667eea;
    background: rgba(103, 126, 234, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
    height: fit-content;
}

.record-details {
    flex: 1;
}

.record-verse {
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 6px;
}

.record-chapters {
    font-size: 13px;
    color: #718096;
    background: rgba(236, 72, 153, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

.no-records-msg {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* 팝오버 스타일 */
.modal.popover-style {
    position: absolute;
    background: transparent;
    backdrop-filter: none;
    width: auto;
    height: auto;
    overflow: visible;
}

.modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    margin: 5% auto;
    padding: 0;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    height: auto;
    max-height: 70vh;
    box-shadow:
        0 20px 40px rgba(103, 126, 234, 0.15),
        0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}

/* 팝오버 스타일의 모달 콘텐츠 */
.modal.popover-style .modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    margin: 0;
    width: 480px;
    max-width: 90vw;
    min-height: auto !important;
    max-height: 70vh !important;
    border-radius: 12px;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.9);
    animation: popoverSlideIn 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s ease;
}

/* 팝오버에서도 footer 스타일 적용 */
.modal.popover-style .modal-footer {
    border-radius: 0 0 12px 12px;
    padding: 16px 20px;
}

.modal.popover-style .modal-body {
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
}

/* 말풍선 화살표 */
.modal.popover-style .modal-content::before {
    content: '';
    position: absolute;
    top: -8px;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
    transition: left 0.3s ease;
}

/* 화살표가 아래쪽에 위치할 때 (모달이 셀 위에 있을 때) */
.modal.popover-style .modal-content.arrow-bottom::before {
    top: auto;
    bottom: -8px;
    border-bottom: none;
    border-top: 8px solid rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popoverSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* 모달 컨트롤 영역 */
.modal-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.modal-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* 크기 조절 핸들 */
.resize-handle {
    position: absolute;
    background: rgba(103, 126, 234, 0.4);
    border: 1px solid rgba(103, 126, 234, 0.6);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.resize-handle-se {
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    border-radius: 0 0 24px 0;
    background-image:
        linear-gradient(135deg, transparent 30%, rgba(103, 126, 234, 0.7) 30%, rgba(103, 126, 234, 0.7) 35%, transparent 35%),
        linear-gradient(135deg, transparent 60%, rgba(103, 126, 234, 0.7) 60%, rgba(103, 126, 234, 0.7) 65%, transparent 65%);
}

.resize-handle:hover,
.resize-handle:active {
    background-color: rgba(103, 126, 234, 0.6);
    border-color: rgba(103, 126, 234, 0.8);
    transform: scale(1.1);
}

/* 모달이 리사이징 중일 때 */
.modal-content.resizing {
    transition: none !important;
}

/* 모달이 드래그 중일 때 */
.modal-content.dragging {
    transition: none !important;
    opacity: 0.6;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    padding: 10px 24px 12px;
    border-top: 1px solid rgba(103, 126, 234, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0 0 16px 16px;
    flex-shrink: 0;
}

/* 데스크톱에서 폼을 가로 레이아웃으로 */
@media (min-width: 768px) {
    .modal-body {
        padding: 16px 24px;
        max-height: 50vh;
        min-height: auto;
    }

    .form-container {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
        align-items: start;
        flex: 1;
    }

    /* 데스크톱에서 폼 그룹 여백 더 줄이기 */
    .form-group {
        margin-bottom: 12px;
    }

    .form-group label {
        margin-bottom: 6px;
    }

    /* 데스크톱에서 버튼 영역 여백 제거 */
    .modal-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group.input-mode-group {
        grid-column: 1 / -1;
        margin-bottom: 16px;
    }

    /* 데스크톱에서 일반 모달(팝오버가 아닌)일 때만 flexbox 적용 */
    .modal:not(.popover-style) .modal-content {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: 85vh;
    }

    /* 데스크톱에서 modal-body 스크롤 설정 */
    .modal:not(.popover-style) .modal-body {
        max-height: calc(85vh - 120px); /* 헤더와 footer 높이 제외 */
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    /* 모달 푸터 스타일 개선 */
    .modal-footer {
        padding: 20px 32px 24px;
        border-top: 1px solid rgba(103, 126, 234, 0.15);
    }
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="date"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(103, 126, 234, 0.2);
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.1);
    background: white;
}

.help-text {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.example {
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(103, 126, 234, 0.05);
    border-radius: 6px;
    border-left: 3px solid #667eea;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.submit-btn, .add-btn{
    flex: 2;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.submit-btn::before {
    content: "📅 ";
}

.add-btn::before {
    content: "➕ ";
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-btn {
    flex: 1;
    padding: 14px 20px;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 2px solid rgba(107, 114, 128, 0.2);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn:hover {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
    border-color: rgba(107, 114, 128, 0.3);
    transform: translateY(-1px);
}

/* 장수 입력 그룹 스타일 */
.chapter-count-input-group {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
}

.chapter-count-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chapter-count-row input[type="number"] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.chapter-count-row input[type="number"]:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    background: white;
}

.help-icon {
    font-size: 16px;
    color: #f59e0b;
    cursor: help;
    flex-shrink: 0;
}

.toggle-btn.chapter-mode {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.toggle-btn.chapter-mode.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.toggle-btn.chapter-mode:hover:not(.active) {
    background: rgba(245, 158, 11, 0.2);
    transform: scale(1.05);
}

/* 입력 방식 범례 스타일 */
.input-mode-legend {
    margin-bottom: 20px;
}

.mode-legend {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: rgba(103, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(103, 126, 234, 0.1);
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.legend-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.legend-icon.text-mode {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.legend-icon.dropdown-mode {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

/* 입력 헤더 및 토글 버튼 스타일 */
.input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mode-toggle {
    display: flex;
    gap: 4px;
}

.toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.toggle-btn.text-mode {
    border-color: #10b981;
}

.toggle-btn.dropdown-mode {
    border-color: #3b82f6;
}

.toggle-btn.active.text-mode {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.toggle-btn.active.dropdown-mode {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.toggle-btn:hover:not(.active) {
    background: rgba(107, 114, 128, 0.2);
    transform: scale(1.05);
}

.input-content {
    transition: all 0.3s ease;
}

/* 드롭다운 스타일 */
.dropdown-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dropdown-row select {
    padding: 12px 16px;
    border: 2px solid rgba(103, 126, 234, 0.2);
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    min-width: 120px;
    cursor: pointer;
}

.dropdown-row select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.1);
    background: white;
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .modal-content {
        width: 90%;
        max-width: 320px;
        min-width: 280px;
        margin: 5% auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        max-height: 70vh;
        min-height: auto;
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 모바일에서 크기 조절 버튼 숨기기 */
    #toggleSizeBtn {
        display: none !important;
    }

    /* 모바일에서 크기 조절 핸들 숨기기 */
    .resize-handle {
        display: none !important;
    }

    /* 모바일에서 팝오버 스타일도 적절한 크기로 조정 */
    .modal.popover-style .modal-content {
        position: fixed !important;
        margin: 0 !important;
        width: 90% !important;
        max-width: 320px !important;
        min-width: 280px !important;
        max-height: 70vh !important;
        min-height: auto !important;
    }

    .modal-body {
        padding: 16px 18px 8px;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
        max-height: calc(70vh - 100px); /* 헤더와 footer 높이 제외 */
    }

    .modal-footer {
        padding: 8px 18px 12px !important;
        flex-shrink: 0;
    }

    .mode-legend {
        gap: 12px !important;
        padding: 8px 10px !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    .legend-item {
        font-size: 12px !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .legend-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }

    .toggle-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .dropdown-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
    }

    .dropdown-row select {
        min-width: 80px !important;
        font-size: 13px !important;
    }

    .form-group {
        margin-bottom: 10px !important;
    }

    .form-group label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    .form-group input[type="text"],
    .form-group input[type="date"] {
        font-size: 13px !important;
        padding: 9px 10px !important;
        line-height: 1.4 !important;
    }

    .form-control {
        font-size: 13px !important;
        padding: 9px 10px !important;
    }

    .help-text {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-top: 2px !important;
        padding: 0 !important;
    }

    .example {
        font-size: 10px !important;
        padding: 3px 4px !important;
        margin-top: 1px !important;
        line-height: 1.2 !important;
    }

    /* 이모지가 포함된 텍스트 줄 간격 조정 */
    .help-text,
    .example,
    .modal-header h3 {
        letter-spacing: -0.3px !important;
    }

    /* 모바일에서 placeholder 텍스트 조정 */
    #modal_start_verse::placeholder,
    #modal_end_verse::placeholder {
        font-size: 12px !important;
        color: #999 !important;
        opacity: 0.8 !important;
    }

    /* 긴 텍스트가 포함된 help-text 개선 */
    .help-text {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    .modal-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 10px !important;
    }

    .submit-btn, .cancel-btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .modal-header {
        padding: 10px 16px !important;
    }

    .modal-header h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
    }

    .modal-control-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 13px !important;
    }

    /* 입력 헤더 개선 */
    .input-header {
        margin-bottom: 6px !important;
    }

    .input-header label {
        font-size: 12px !important;
        font-weight: 600 !important;
        word-break: keep-all !important;
    }

    .server-time-info {
        font-size: 11px;
        padding: 6px 12px;
    }

    .storage-info {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* 매우 작은 화면을 위한 설정 */
@media (max-width: 360px) {
    .modal-content {
        width: 95% !important;
        max-width: 300px !important;
        min-width: 260px !important;
    }

    .mode-legend {
        gap: 8px !important;
        padding: 6px 8px !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    .legend-item {
        font-size: 11px !important;
        padding: 0 !important;
    }

    .legend-icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    .toggle-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .dropdown-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .dropdown-row select {
        width: 100% !important;
        min-width: auto !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .form-group {
        margin-bottom: 8px !important;
    }

    .form-group label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
        line-height: 1.2 !important;
    }

    .form-group input {
        font-size: 12px !important;
        padding: 8px 10px !important;
        line-height: 1.3 !important;
    }

    .help-text {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin-top: 1px !important;
        padding: 0 !important;
    }

    .example {
        font-size: 9px !important;
        padding: 2px 3px !important;
        margin-top: 1px !important;
        line-height: 1.1 !important;
    }

    .modal-actions {
        flex-direction: row !important;
        gap: 8px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .modal-body {
        padding: 12px 14px 8px !important;
        max-height: calc(70vh - 110px) !important;
    }

    .modal-footer {
        padding: 6px 14px 10px !important;
        flex-shrink: 0;
    }

    .modal-header {
        padding: 8px 14px !important;
    }

    .modal-header h3 {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .submit-btn, .cancel-btn {
        flex: 1 !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.2px !important;
    }

    /* 매우 작은 화면에서 placeholder 더 간단히 */
    #modal_start_verse::placeholder,
    #modal_end_verse::placeholder {
        font-size: 11px !important;
        opacity: 0.7 !important;
    }

    /* 텍스트 가독성 최적화 */
    .help-text {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
}

/* ===== 로그아웃 확인 모달 스타일 ===== */
.logout-modal-content {
    max-width: 420px;
    width: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    animation: logoutModalFadeIn 0.3s ease-out;
}

@keyframes logoutModalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.logout-modal-title {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logout-message {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    margin: 0 0 12px 0;
}

.logout-info {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.logout-confirm-btn {
    flex: 2;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.logout-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .logout-modal-content {
        width: 90%;
        max-width: 320px;
    }

    .logout-modal-title {
        font-size: 16px;
    }

    .logout-message {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .logout-info {
        font-size: 12px;
    }

    .logout-confirm-btn {
        font-size: 13px;
        padding: 10px 18px;
    }
}

@media (max-width: 360px) {
    .logout-modal-content {
        width: 95%;
        max-width: 300px;
    }

    .logout-modal-title {
        font-size: 14px;
    }

    .logout-message {
        font-size: 13px;
    }

    .logout-info {
        font-size: 11px;
    }

    .logout-confirm-btn {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* ===== 년월 선택 모달 스타일 ===== */
.month-year-picker-modal {
    max-width: 500px;
    width: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    animation: monthYearModalFadeIn 0.3s ease-out;
}

.month-year-picker-modal .modal-body {
    overflow: hidden;
    max-height: none;
}

@keyframes monthYearModalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.picker-view {
    padding: 20px 0;
}

.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.view-header .nav-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(103, 126, 234, 0.3);
    min-width: 50px;
}

.view-header .nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(103, 126, 234, 0.4);
}

.view-header .nav-btn:active {
    transform: translateY(0);
}

.view-title {
    flex: 1;
    background: rgba(103, 126, 234, 0.1);
    border: 2px solid rgba(103, 126, 234, 0.2);
    color: #667eea;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-align: center;
}

.view-title:hover {
    background: rgba(103, 126, 234, 0.2);
    border-color: rgba(103, 126, 234, 0.4);
    transform: scale(1.02);
}

.month-grid,
.year-grid,
.decade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;

    /* 스크롤바 스타일링 */
    scrollbar-width: thin;
    scrollbar-color: #667eea #f3f4f6;
}

.month-grid::-webkit-scrollbar,
.year-grid::-webkit-scrollbar,
.decade-grid::-webkit-scrollbar {
    width: 8px;
}

.month-grid::-webkit-scrollbar-track,
.year-grid::-webkit-scrollbar-track,
.decade-grid::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.month-grid::-webkit-scrollbar-thumb,
.year-grid::-webkit-scrollbar-thumb,
.decade-grid::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 4px;
}

.month-grid::-webkit-scrollbar-thumb:hover,
.year-grid::-webkit-scrollbar-thumb:hover,
.decade-grid::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

.month-btn,
.year-btn,
.decade-btn {
    background: rgba(103, 126, 234, 0.1);
    border: none;
    color: #667eea;
    padding: 16px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.month-btn:hover,
.year-btn:hover,
.decade-btn:hover {
    background: rgba(103, 126, 234, 0.2);
    border-color: rgba(103, 126, 234, 0.4);
    transform: translateY(-2px);
}

.month-btn.current,
.year-btn.current,
.decade-btn.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(103, 126, 234, 0.3);
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .month-year-picker-modal {
        width: 90%;
        max-width: 360px;
    }

    .picker-view {
        padding: 12px 0;
    }

    .view-header {
        margin-bottom: 12px;
        gap: 8px;
    }

    .month-grid,
    .year-grid,
    .decade-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        max-height: 350px;
    }

    .month-btn,
    .year-btn,
    .decade-btn {
        padding: 10px 6px;
        font-size: 12px;
    }

    .view-title {
        font-size: 16px;
        padding: 6px 12px;
    }

    .view-header .nav-btn {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 36px;
    }
}

@media (max-width: 360px) {
    .month-year-picker-modal {
        width: 95%;
        max-width: 320px;
    }

    .picker-view {
        padding: 10px 0;
    }

    .view-header {
        margin-bottom: 10px;
        gap: 6px;
    }

    .month-grid,
    .year-grid,
    .decade-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        max-height: 300px;
    }

    .month-btn,
    .year-btn,
    .decade-btn {
        padding: 8px 4px;
        font-size: 11px;
    }

    .view-title {
        font-size: 14px;
        padding: 5px 10px;
    }

    .view-header .nav-btn {
        padding: 5px 8px;
        font-size: 12px;
        min-width: 32px;
    }
}

/* ── celebration.css ── */
/* 축하 애니메이션 스타일 */

.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.celebration-content {
    position: relative;
    text-align: center;
    animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.celebration-emoji {
    font-size: 120px;
    margin-bottom: 20px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

.celebration-title {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700 0%, #ff6b6b 50%, #4ecdc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.celebration-message {
    font-size: 28px;
    color: white;
    margin-bottom: 30px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.celebration-stats {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px 40px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.celebration-stat-item {
    color: white;
    font-size: 20px;
    margin: 10px 0;
    font-weight: 500;
}

.celebration-close-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.celebration-close-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}

/* 색종이 애니메이션 */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #f0f;
    animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.confetti:nth-child(1) { left: 10%; animation-duration: 3s; background: #ff6b6b; }
.confetti:nth-child(2) { left: 20%; animation-duration: 3.5s; background: #ffd700; animation-delay: 0.2s; }
.confetti:nth-child(3) { left: 30%; animation-duration: 2.8s; background: #4ecdc4; animation-delay: 0.4s; }
.confetti:nth-child(4) { left: 40%; animation-duration: 3.2s; background: #95e1d3; animation-delay: 0.1s; }
.confetti:nth-child(5) { left: 50%; animation-duration: 3s; background: #ff6b6b; animation-delay: 0.3s; }
.confetti:nth-child(6) { left: 60%; animation-duration: 3.3s; background: #ffd700; animation-delay: 0.5s; }
.confetti:nth-child(7) { left: 70%; animation-duration: 2.9s; background: #4ecdc4; animation-delay: 0.2s; }
.confetti:nth-child(8) { left: 80%; animation-duration: 3.1s; background: #95e1d3; animation-delay: 0.4s; }
.confetti:nth-child(9) { left: 90%; animation-duration: 3.4s; background: #ff6b6b; }
.confetti:nth-child(10) { left: 15%; animation-duration: 2.7s; background: #ffd700; animation-delay: 0.6s; }
.confetti:nth-child(11) { left: 25%; animation-duration: 3.2s; background: #4ecdc4; animation-delay: 0.1s; }
.confetti:nth-child(12) { left: 35%; animation-duration: 2.9s; background: #95e1d3; animation-delay: 0.3s; }
.confetti:nth-child(13) { left: 45%; animation-duration: 3.1s; background: #ff6b6b; animation-delay: 0.5s; }
.confetti:nth-child(14) { left: 55%; animation-duration: 3.3s; background: #ffd700; animation-delay: 0.2s; }
.confetti:nth-child(15) { left: 65%; animation-duration: 2.8s; background: #4ecdc4; animation-delay: 0.4s; }
.confetti:nth-child(16) { left: 75%; animation-duration: 3s; background: #95e1d3; }
.confetti:nth-child(17) { left: 85%; animation-duration: 3.2s; background: #ff6b6b; animation-delay: 0.3s; }
.confetti:nth-child(18) { left: 95%; animation-duration: 2.9s; background: #ffd700; animation-delay: 0.1s; }
.confetti:nth-child(19) { left: 5%; animation-duration: 3.4s; background: #4ecdc4; animation-delay: 0.5s; }
.confetti:nth-child(20) { left: 12%; animation-duration: 3.1s; background: #95e1d3; animation-delay: 0.2s; }

/* 풍선 애니메이션 */
.balloon {
    position: absolute;
    bottom: -100px;
    font-size: 60px;
    animation: balloon-float 6s ease-in-out infinite;
}

@keyframes balloon-float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-80vh) rotate(10deg);
    }
    100% {
        transform: translateY(-100vh) rotate(-10deg);
        opacity: 0;
    }
}

.balloon:nth-child(21) { left: 10%; animation-delay: 0s; }
.balloon:nth-child(22) { left: 30%; animation-delay: 1s; }
.balloon:nth-child(23) { left: 50%; animation-delay: 2s; }
.balloon:nth-child(24) { left: 70%; animation-delay: 1.5s; }
.balloon:nth-child(25) { left: 90%; animation-delay: 0.5s; }

/* 반짝이 효과 */
.sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    animation: sparkle-twinkle 1.5s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.sparkle:nth-child(26) { top: 10%; left: 20%; animation-delay: 0s; }
.sparkle:nth-child(27) { top: 20%; left: 80%; animation-delay: 0.3s; }
.sparkle:nth-child(28) { top: 30%; left: 40%; animation-delay: 0.6s; }
.sparkle:nth-child(29) { top: 40%; left: 60%; animation-delay: 0.9s; }
.sparkle:nth-child(30) { top: 50%; left: 30%; animation-delay: 1.2s; }
.sparkle:nth-child(31) { top: 60%; left: 70%; animation-delay: 0.2s; }
.sparkle:nth-child(32) { top: 70%; left: 50%; animation-delay: 0.5s; }
.sparkle:nth-child(33) { top: 80%; left: 15%; animation-delay: 0.8s; }
.sparkle:nth-child(34) { top: 90%; left: 85%; animation-delay: 1.1s; }
.sparkle:nth-child(35) { top: 15%; left: 50%; animation-delay: 0.4s; }

/* 모바일 최적화 */
@media (max-width: 768px) {
    .celebration-title {
        font-size: 36px;
    }

    .celebration-message {
        font-size: 20px;
    }

    .celebration-emoji {
        font-size: 80px;
    }

    .celebration-stat-item {
        font-size: 16px;
    }

    .celebration-close-btn {
        padding: 12px 30px;
        font-size: 16px;
    }
}

/* ── themes/book.css ── */
/* ============================================================
   테마: 성경책 (id=book) — 달력을 펼친 성경책 안에 그린다.

   ⭐ **이 파일의 모든 규칙은 `html[data-theme="book"]` 아래에 있어야 한다.**
      스코프를 벗어나면 다른 테마를 오염시킨다. 테마는 서로를 몰라야 한다.
   ⭐ 수치는 화면 크기 대비 비율(clamp/vw/%)로 잡는다 — 특정 기기 px 고정 금지.
   ⚠️ 이 파일은 calendar.css 를 **덮어쓰는 층**이다. 원본은 건드리지 않는다.
      테마를 '기본'으로 바꾸면 이 파일의 규칙이 통째로 꺼진다.
   ============================================================ */

html[data-theme="book"] {
  --paper:      #f3e9d6;
  --paper-back: #e9dcc2;
  --ink:        #2e2620;
  /* ⚠️ --ink-soft 는 원래 #8a7659 였다 — 종이(#f3e9d6) 대비 3.5:1 로 본문에 못 쓴다(WCAG AA 4.5:1).
     요일·보조 글자가 전부 이 값이라 "예쁜데 안 읽힌다"의 주범이었다(2026-08-21 검수).
     #6b573c = 5.7:1. 분위기(세피아)는 그대로 두고 명도만 내렸다. */
  --ink-soft:   #6b573c;
  /* 표 머리(요일)처럼 작고 굵은 글자용 — 7.0:1 */
  --ink-head:   #5c4a2e;
  --leather:    #4a2f1e;
  --leather2:   #33200f;
  --gilt:       #b08a3c;
  --ribbon:     #8e2b2b;
  --rule:       rgba(120, 90, 45, 0.16);
  --rule-strong:rgba(120, 90, 45, 0.34);
  --mark:       rgba(176, 138, 60, 0.5);

  /* ── 활자 ────────────────────────────────────────────────
     ⚠️ 예전엔 시스템 글꼴에만 기댔다(`"Nanum Myeongjo", "Batang", …`).
        **리눅스에는 그 셋이 다 없어서** 밋밋한 기본 serif 로 떨어졌다.
        이제 themes.py 가 웹폰트를 실어 준다(EB Garamond · 나눔명조 · 송명조).
     ⭐ 라틴·숫자를 **앞에** 둔다 — 한글은 EB Garamond 에 없으므로 자동으로
        나눔명조가 받는다. 달력은 숫자가 주인공이라 이 순서가 중요하다.
     ⚠️ 이름을 바꾸면 themes.py 의 폰트 주소도 같이 고칠 것. 한쪽만 바꾸면
        조용히 시스템 글꼴로 떨어진다(오류도 경고도 안 난다). */
  --serif:         "EB Garamond", "Nanum Myeongjo", "Batang", "AppleMyungjo", serif;
  /* 제목용 — 송명조는 붓에서 온 획이라 본문보다 훨씬 고서에 가깝다. 굵기가 400 한 벌뿐이라
     bold 를 주면 브라우저가 가짜 굵기를 만든다(획이 뭉갠다) → 쓰는 곳마다 400 으로 못 박는다. */
  --serif-display: "EB Garamond", "Song Myung", "Nanum Myeongjo", "Batang", serif;
}

/* ── 책상 ─────────────────────────────────────────────── */
html[data-theme="book"] body {
  background:
    radial-gradient(120% 90% at 50% 0%, #4a3a2c 0%, transparent 60%),
    linear-gradient(160deg, #2e2118 0%, #1c1410 100%) !important;
  color: var(--ink);
  font-family: var(--serif);
}

/* ── 책 (가죽 표지 + 속지) ────────────────────────────── */
html[data-theme="book"] .container {
  position: relative;
  max-width: min(96vw, 1180px);
  margin: clamp(12px, 3vh, 40px) auto;
  padding: clamp(16px, 2.6vw, 34px);
  background: linear-gradient(152deg, var(--leather) 0%, var(--leather2) 100%);
  border-radius: clamp(6px, 0.9vw, 14px);
  box-shadow:
    0 clamp(10px, 2vh, 26px) clamp(20px, 4vh, 60px) rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* calendar.css 의 backdrop-filter 는 fixed 자식의 containing block 을 이 책으로 바꾼다.
     모바일 월 도크가 화면 바닥이 아니라 책 내용 아래(y=882)에 생긴 원인이라 걷는다.
     가죽 바탕은 불투명하므로 시각적으로 잃는 흐림은 없다. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 속지 — 책등 그늘과 종이 결 */
html[data-theme="book"] .container::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 2.6vw, 34px);
  border-radius: clamp(3px, 0.4vw, 6px);
  background:
    linear-gradient(90deg, rgba(70, 45, 20, 0.18) 0%, rgba(70, 45, 20, 0.05) 4%, transparent 9%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px),
    var(--paper);
  box-shadow: inset 0 0 clamp(20px, 3vw, 50px) rgba(120, 96, 60, 0.18);
  pointer-events: none;
}
html[data-theme="book"] .container > * { position: relative; z-index: 1; }

/* 가름끈 — 책 위에서 내려온다 */
html[data-theme="book"] .container::after {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(10px, 2vh, 22px));
  right: clamp(28px, 6vw, 80px);
  width: clamp(10px, 1.6vw, 18px);
  height: clamp(70px, 12vh, 130px);
  background: linear-gradient(180deg, var(--ribbon) 0%, #6d1f1f 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 0;
  pointer-events: none;
}

/* ── 머리말 ───────────────────────────────────────────── */
html[data-theme="book"] .header {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: clamp(10px, 2.2vh, 26px) clamp(8px, 2vw, 28px) clamp(6px, 1.2vh, 14px);
}
html[data-theme="book"] .month-title {
  font-family: var(--serif);
  /* ⚠️ 원본이 그라데이션을 글자에 넣고 -webkit-text-fill-color:transparent 로 비운다.
     그래서 color 만 바꾸면 **아무 일도 안 일어난다.** 셋을 다 되돌려야 한다. */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  font-size: clamp(20px, 3.4vw, 32px) !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="book"] .month-title-container { min-width: max-content; }
/* 금박 밑줄 */
html[data-theme="book"] .month-title-container::after {
  content: "";
  display: block;
  height: 2px;
  margin: clamp(4px, 0.8vh, 10px) auto 0;
  width: clamp(60px, 22%, 180px);
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
}
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link {
  background: none !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-theme="book"] .nav-btn:hover,
html[data-theme="book"] .today-link:hover { background: rgba(184, 145, 47, 0.12) !important; }

/* ── 달력 — 괘선만 남긴다 ─────────────────────────────── */
html[data-theme="book"] .calendar-table {
  background: none !important;
  border-collapse: collapse !important;
  box-shadow: none !important;
}
html[data-theme="book"] .calendar-table th {
  background: none !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  font-weight: 600;
  border: none !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  padding-bottom: clamp(4px, 0.8vh, 10px) !important;
}
html[data-theme="book"] .calendar-table td {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  vertical-align: top;
}
html[data-theme="book"] .calendar-table td.empty-day { border-bottom-color: transparent !important; }

/* ⭐ 펼침면(PC)에서 칸이 허전하던 것 — 괘선 위에 글자를 앉힌다.
   책을 펼치면 달력이 지면의 절반만 쓰므로 칸이 63x100 짜리 **세로로 긴 빈 상자**가 되고,
   calendar.css 의 height:100px 은 154px 폭 칸을 전제로 만든 값이라 숫자가 상자 맨 위에
   붙고 아래로 70px 이 죽는다. 실측: 칸 63x100 · 숫자 19px · 아래 여백 ~64px(2026-08-27).
   ⚠️ 칸을 줄이는 쪽은 못 쓴다 — 지면 높이(940px)는 왼쪽 면이 정하므로, 줄이면 빈자리가
      칸 안에서 **지면 아래로 옮겨갈 뿐**이다(74px 로 줄여 재봤더니 표만 657→441 로 줄고
      container 940 · scrollH 1068 은 그대로였다).
   그래서 높이는 그대로 두고 **글자를 괘선 한가운데에 앉힌다** —
   빈 상자가 아니라 줄 쳐진 장부로 읽힌다. 폭이 좁은 화면은 손대지 않는다.
   ⚠️ 글자 크기는 여기서 건드리지 않는다. `.day-number` 의 font-size 는 이 파일 700줄쯤에서
      !important 로 이미 정해져 있어서(clamp(14px,3.1vw,19px)) 여기 한 줄을 더 두면
      **먹지도 않으면서 규칙만 네 벌**이 된다(핸드북 0절 — 규칙 수를 줄여서 통일을 지킨다).
      실제로 21px 로 키워 봤지만 계산값은 19px 그대로였다(2026-08-27 실측). */
@media (min-width: 900px) {
  html[data-theme="book"] .page-right .calendar-table td { vertical-align: middle; }
}

/* 날짜 숫자 — calendar.css 가 안쪽 요소에 색을 걸어 두므로 여기까지 내려가야 이긴다 */
html[data-theme="book"] .day-number {
  color: var(--ink) !important;
  background: none !important;
  font-family: var(--serif);
  font-weight: 600;
}
/* 오늘 — 손으로 두른 동그라미.
   ⚠️ 칸 가운데에 그리면 안 된다. 날짜 숫자는 칸 **왼쪽 위**에 있어서 동그라미만 따로 논다
      (2026-08-20 실제로 그랬다). 숫자 자체에 두른다 — 숫자가 어디로 가든 따라간다. */
html[data-theme="book"] .today .day-number {
  color: var(--ribbon) !important;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border: 1.6px solid rgba(142, 43, 43, 0.5);
  border-radius: 50%;
  transform: rotate(-4deg);
  background: none !important;
}
/* 읽은 날 — 형광펜 자국(칸 전체를 칠하지 않는다) */
html[data-theme="book"] .calendar-table td.day-with-reading { background: none !important; }
html[data-theme="book"] .day-with-reading .day-number {
  background: linear-gradient(180deg, transparent 55%, var(--mark) 55%) !important;
  padding: 0 0.18em;
  color: var(--ink) !important;
}
html[data-theme="book"] .day-chapters-badge {
  background: rgba(200, 137, 47, 0.2) !important;
  color: var(--ink-soft) !important;
  border: none !important;
  font-family: var(--serif);
}
html[data-theme="book"] .reading-item,
html[data-theme="book"] .verse-abbr,
html[data-theme="book"] .verse-full,
html[data-theme="book"] .verse-range {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
}

/* ── 범례·통계·버튼 — 종이 톤으로 ─────────────────────── */
html[data-theme="book"] .legend,
html[data-theme="book"] .legend-item,
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .stats-section,
html[data-theme="book"] .stat-card,
html[data-theme="book"] .goal-section {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid rgba(120, 96, 60, 0.22) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}
html[data-theme="book"] .legend-item span,
html[data-theme="book"] .stats-section *,
html[data-theme="book"] .monthly-stats-section * { color: var(--ink) !important; }

html[data-theme="book"] [class*="goal"],
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .submit-btn {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  font-family: var(--serif);
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── 광고 — 책 사이에 끼운 쪽지 ───────────────────────
   규격을 바꾸려면 --ad-w/--ad-h 두 줄만 고친다(애드핏 광고 단위 크기와 맞출 것). */
html[data-theme="book"] .ad-banner {
  /* 애드핏 승인 규격 = 320×50 (2026-08-20 확인).
     규격을 바꾸면 여기 두 줄과 index.html 의 data-ad-width/height 를 함께 고친다. */
  --ad-w: 320px;
  --ad-h: 50px;
  width: min(100%, var(--ad-w));
  min-height: var(--ad-h);
  margin: clamp(10px, 2vh, 22px) auto !important;
  padding: 6px;
  background: #fffdf6;
  border: 1px solid rgba(120, 96, 60, 0.3);
  border-radius: 2px;
  transform: rotate(-0.5deg);
  box-shadow: 0 2px 6px rgba(60, 44, 26, 0.18), 0 0 0 6px rgba(246, 239, 226, 0.6);
}
html[data-theme="book"] .ad-notice {
  font-family: var(--serif);
  color: var(--ink-soft) !important;
  font-size: clamp(10px, 1.5vw, 12px);
  text-align: center;
}

/* ── 좁은 화면: 펼침이 아니라 한 장 ───────────────────── */
@media (max-width: 700px) {
  html[data-theme="book"] .container::after { right: clamp(14px, 5vw, 28px); }
}

/* 남은 원본 강조색 — 그라데이션을 쓰는 것들을 종이 톤으로 눕힌다.
   ⚠️ 클래스가 제각각이라 배경 이미지를 쓰는 것을 넓게 잡는다. 스코프 안이라 다른 테마엔 영향 없다. */
html[data-theme="book"] .container [style*="linear-gradient"],
html[data-theme="book"] .stat-progress,
html[data-theme="book"] .progress-bar {
  background-image: none !important;
}
html[data-theme="book"] .legend-item .legend-color { border: 1px solid rgba(120,96,60,.35); }

/* ── 난외주(欄外註) — 그 달 읽은 곳 ───────────────────
   성경에서 각주·관주가 놓이는 자리. 날짜 칸에 구절까지 넣으면 표가 되므로 여기로 옮겼다. */
html[data-theme="book"] .margin-note {
  margin: clamp(8px, 1.6vh, 16px) clamp(4px, 1vw, 14px) 0;
  padding-top: clamp(6px, 1.2vh, 12px);
  border-top: 1px solid var(--rule-strong);
  font-family: var(--serif);
  color: var(--ink-soft);
  font-size: clamp(11px, 1.7vw, 13px);
  line-height: 1.9;
}
html[data-theme="book"] .margin-note-title {
  font-size: clamp(10px, 1.5vw, 12px);
  letter-spacing: 0.1em;
  color: var(--gilt);
  font-weight: 700;
  margin-bottom: 2px;
}
html[data-theme="book"] .mn-entry { margin-right: 0.9em; white-space: nowrap; }
html[data-theme="book"] .mn-entry b { color: var(--ink); font-weight: 600; margin-right: 0.15em; }
html[data-theme="book"] .margin-note-empty { color: var(--ink-soft); }

/* 난외주로 옮겼으니 날짜 칸의 구절 글자는 숨긴다 — 장수 뱃지는 남긴다 */
html[data-theme="book"] .day-content .reading-item { display: none; }

/* ⭐ 펼침면(PC)에서는 **축약형만** 칸에 되살린다 (2026-08-27 사용자 결정).
   구절을 통째로 감춘 탓에 칸에 숫자밖에 없어 "기본 테마가 훨씬 읽기 편하다"는 검수를 받았다.
   난외주(전체 표기)는 그대로 두고, 칸에는 "오늘 뭘 읽었나"만 짧게 얹는다.
   ⚠️ 약어는 새로 만들지 않는다 — `bible_parser.abbreviate()` 가 만들어 템플릿이 이미
      `.verse-abbr` 로 그려 두었다(난외주가 쓰는 것과 **같은 문자열**이다). 여기서는
      calendar.css 가 넓은 화면에서 켜 두는 `.verse-full` 을 끄고 축약형으로 바꾸기만 한다.
   ⚠️ 칸 폭은 63px 그대로다. 넘치는 것은 `.verse-range` 가 이미 가진
      `overflow:hidden + text-overflow:ellipsis` 가 받는다 — 글자가 칸 밖으로 나가지 않는다.
   ⚠️ 폰·기본 테마는 손대지 않는다(`.page-right` 는 펼침면에만 있다). */
@media (min-width: 900px) {
  /* ⚠️ **한 건만** 보인다. 칸 안에서 글자가 놓일 자리는 32px 뿐이라(행 100px − 안쪽여백 16px
        − 머리(날짜+뱃지) 52px), 한 줄 21px 은 들어가지만 두 줄 46px 은 넘친다 —
        실측으로 행이 100→118→143→168px 로 자라 **달마다 책 높이가 달라졌다**(고친 지 얼마 안 된
        결함이 되살아난다). 그래서 칸은 첫 건만 맡고, 나머지는 난외주와 날짜 모달이 맡는다. */
  html[data-theme="book"] .page-right .day-content .reading-item { display: none; }
  html[data-theme="book"] .page-right .day-content .reading-item:first-child { display: block; }
  /* 가려진 것이 있으면 그렇다고 말해 준다 — 마크업을 안 늘리고 형제 유무로만 판단한다 */
  html[data-theme="book"] .page-right .day-content .reading-item:first-child:not(:last-child) .verse-range::after {
    content: " 외";
  }
  html[data-theme="book"] .page-right .verse-full { display: none; }
  html[data-theme="book"] .page-right .verse-abbr { display: inline; }
  /* ⚠️ 글자가 놓일 폭은 34px 밖에 없었다(칸 63 − td 여백 16 − .verse-range 여백 12).
        긴 이름("고전 15장")이 9px 넘쳤다. 글꼴을 줄이는 것보다 **여백을 줄이는 쪽이
        같은 값을 더 싸게 번다** — 좌우 여백 6→2px 로 8px 을 되찾는다. */
  html[data-theme="book"] .page-right .verse-range {
    font-size: clamp(9px, 0.78vw, 10px);
    padding: 1px 2px;
  }
}

/* 기본 테마에서는 난외주를 보이지 않는다 (원래 화면 그대로) */
html:not([data-theme="book"]) .margin-note { display: none; }

/* ============================================================
   다른 화면들 — 로그인·가입·릴리즈 노트도 같은 결로.
   ⚠️ 이 화면들은 .container 안에 카드가 하나 더 있는 구조다.
      책(가죽) 안에 카드가 또 뜨면 이중 액자가 되므로 카드 테두리를 눕힌다.
   ============================================================ */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ink);
  font-family: var(--serif);
}
html[data-theme="book"] .form-label,
html[data-theme="book"] .form-help { color: var(--ink-soft) !important; font-family: var(--serif); }
html[data-theme="book"] .form-input {
  background: rgba(255, 253, 246, 0.85) !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}
html[data-theme="book"] .form-input:focus {
  border-color: var(--gilt) !important;
  outline: 2px solid rgba(184, 145, 47, 0.35);
  outline-offset: 1px;
}
html[data-theme="book"] .back-btn {
  background: none !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}

/* 제목류 — 그라데이션 글자를 쓰는 것이 여럿이라 함께 되돌린다 */
html[data-theme="book"] h1,
html[data-theme="book"] h2,
html[data-theme="book"] h3 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  font-family: var(--serif);
}

/* 링크 */
html[data-theme="book"] a { color: #7a5c2e; }
html[data-theme="book"] a:hover { color: var(--ribbon); }

/* ── 튜토리얼 ────────────────────────────────────────
   ⭐ 위치는 손댈 것이 없다. 튜토리얼이 선택자(.month-title, .calendar-table …)로 요소를 잡고
      좌표를 그 요소에서 계산하므로, 테마가 배치를 바꿔도 **저절로 따라간다.**
      여기서 바꾸는 건 색뿐이다 — 원본이 보라(103,126,234)를 쓴다. */
html[data-theme="book"] .tutorial-modal,
html[data-theme="book"] .tutorial-tooltip,
html[data-theme="book"] .tutorial-popup {
  background: #fffdf6 !important;
  border: 1px solid rgba(120, 96, 60, 0.3) !important;
  box-shadow: 0 6px 20px rgba(60, 44, 26, 0.25) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
}
html[data-theme="book"] .tutorial-modal *,
html[data-theme="book"] .tutorial-tooltip * { font-family: var(--serif); }
html[data-theme="book"] #tutorialSpotlight {
  box-shadow: 0 0 0 3px rgba(184, 145, 47, 0.75), 0 0 0 9999px rgba(28, 20, 16, 0.55) !important;
  border-radius: 6px !important;
}
/* 다음/이전 버튼 */
html[data-theme="book"] .tutorial-btn,
html[data-theme="book"] [class*="tutorial"] button {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}
html[data-theme="book"] [class*="tutorial"] p,
html[data-theme="book"] [class*="tutorial"] span,
html[data-theme="book"] [class*="tutorial"] div { color: var(--ink) !important; }
html[data-theme="book"] [class*="tutorial"] .step,
html[data-theme="book"] [class*="tutorial"] [class*="count"] { color: var(--ink-soft) !important; }

/* ============================================================
   글자 크기·색 마무리 (2026-08-20 사용자 지적)
   ⚠️ 명조 계열은 같은 px 라도 고딕보다 넓게 잡힌다 — 원본 크기를 그대로 두면
      버튼 글자가 줄바뀜한다(실제로 "이전달"이 두 줄로 깨졌다).
   ============================================================ */
html[data-theme="book"] .nav-btn {
  font-size: clamp(11px, 1.9vw, 13px) !important;
  padding: clamp(5px, 1vw, 8px) clamp(8px, 1.6vw, 14px) !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  gap: 4px;
}
html[data-theme="book"] .nav-btn span { white-space: nowrap; }
html[data-theme="book"] .today-link {
  font-size: clamp(10px, 1.7vw, 12px) !important;
  padding: clamp(4px, 0.8vw, 7px) clamp(7px, 1.4vw, 12px) !important;
  white-space: nowrap !important;
}
html[data-theme="book"] .month-title {
  font-size: clamp(17px, 3vw, 28px) !important;
}
html[data-theme="book"] .calendar-table th { font-size: clamp(10px, 1.6vw, 13px) !important; }
html[data-theme="book"] .day-number { font-size: clamp(11px, 1.8vw, 14px) !important; }
html[data-theme="book"] .day-chapters-badge { font-size: clamp(8px, 1.3vw, 10px) !important; }

/* 범례 색칠 — 원본의 주황·파랑이 그대로 남아 있었다 */
html[data-theme="book"] .legend-item .legend-color,
html[data-theme="book"] .legend-color,
html[data-theme="book"] .legend-item > span:first-child {
  background: var(--mark) !important;
  border: 1px solid rgba(120, 96, 60, 0.4) !important;
  box-shadow: none !important;
}
html[data-theme="book"] .legend-item:last-child .legend-color,
html[data-theme="book"] .legend-item:last-child > span:first-child {
  background: rgba(142, 43, 43, 0.35) !important;
}

/* 배지·작은 버튼 글자도 명조로, 크기는 한 단계 내린다 */
html[data-theme="book"] .version-badge,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .goal-btn {
  font-size: clamp(10px, 1.6vw, 12px) !important;
  white-space: nowrap;
}
html[data-theme="book"] .legend,
html[data-theme="book"] .legend-item { font-size: clamp(11px, 1.7vw, 13px) !important; }

/* 통계 숫자·라벨 */
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .stats-section { font-size: clamp(11px, 1.7vw, 13px) !important; }

/* 진행 막대 — 원본 파랑/초록을 금박으로
   ⚠️ **채움만** 칠한다. `.progress-bar` 는 트랙(빈 홈)이고 `.progress-fill` 이 채움이다.
      둘 다 금박으로 칠했더니 "18장 · 6 읽은 날"인데도 막대가 **꽉 찬 것처럼** 읽혔다
      (2026-08-21 검수). 트랙은 종이에 눌린 빈 홈으로 남겨 둔다. */
html[data-theme="book"] [class*="progress"] > div {
  background: linear-gradient(90deg, var(--gilt), #d8b96a) !important;
}
html[data-theme="book"] .progress-bar,
html[data-theme="book"] .stat-progress {
  background: rgba(120, 96, 60, 0.16) !important;
  background-image: none !important;
}

/* ============================================================
   가독성 수리 (2026-08-21 사용자 검수)
   ⭐ 이 절의 원칙: **분위기는 지키되 읽히는 것이 먼저다.**
      색을 바꿀 땐 종이색(#f3e9d6) 대비 4.5:1 을 넘기는지 확인하고 값을 적는다.
   ============================================================ */

/* ── 1. 로그인·가입 화면 — 책이 아예 안 그려지고 있었다 ─────────
   ⚠️ 원인: 이 두 화면에는 `.container` 가 **없다**. base.html 이 <main> 안에
      `.login-container` 카드 하나만 넣는다. 그런데 이 파일은 책(가죽+속지)을
      `.container::before/::after` 로만 그리고, 카드는 `background: transparent` 로
      눕혀 놓았다 — 그래서 **어두운 책상 위에 잉크색 글자**만 남아 대비가 1:1 이었다.
   → 카드 자체를 속지로 만들고, 가죽 표지는 box-shadow 링으로 두른다
      (요소를 못 늘리므로 링이 가장 싸다). */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container {
  --cover: clamp(10px, 2.6vw, 22px);   /* 가죽 표지 두께 */
  background:
    linear-gradient(90deg, rgba(70, 45, 20, 0.16) 0%, rgba(70, 45, 20, 0.05) 5%, transparent 12%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px),
    var(--paper) !important;
  border: 1px solid rgba(184, 145, 47, 0.45) !important;
  border-radius: clamp(3px, 0.5vw, 6px) !important;
  /* 링이 화면 밖으로 잘리지 않도록 표지 두께보다 큰 여백을 둔다 */
  margin: clamp(14px, 3.4vw, 30px) !important;
  padding: clamp(20px, 4vw, 40px) !important;
  color: var(--ink) !important;
  backdrop-filter: none !important;
  box-shadow:
    0 0 0 var(--cover) var(--leather),
    0 0 0 calc(var(--cover) + 1px) rgba(0, 0, 0, 0.45),
    inset 0 0 clamp(20px, 3vw, 50px) rgba(120, 96, 60, 0.18),
    0 clamp(8px, 2vh, 22px) clamp(18px, 4vh, 50px) rgba(0, 0, 0, 0.55) !important;
}

/* 제목 — 원본이 보라 그라데이션을 글자에 부어 넣는다. 셋을 다 되돌려야 색이 먹는다. */
html[data-theme="book"] .login-title,
html[data-theme="book"] .register-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  font-size: clamp(21px, 4.4vw, 30px) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="book"] .login-subtitle,
html[data-theme="book"] .register-subtitle {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  font-size: clamp(13px, 2.4vw, 16px) !important;
}
/* 머리말 밑 금박 괘선 — 속표지처럼 */
html[data-theme="book"] .login-header,
html[data-theme="book"] .register-header {
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: clamp(8px, 1.6vh, 16px);
}

html[data-theme="book"] .form-input::placeholder { color: rgba(107, 87, 60, 0.75) !important; }
html[data-theme="book"] .form-label { color: var(--ink-head) !important; }
html[data-theme="book"] .form-help  { color: var(--ink-soft) !important; }

/* 안내줄 — "계정이 없으신가요?" 가 안 보이던 자리 */
html[data-theme="book"] .register-link,
html[data-theme="book"] .login-link {
  border-top: 1px solid var(--rule-strong) !important;
  color: var(--ink) !important;
}
html[data-theme="book"] .register-link p,
html[data-theme="book"] .login-link p {
  color: var(--ink) !important;
  font-family: var(--serif);
}
html[data-theme="book"] .register-link a,
html[data-theme="book"] .login-link a {
  color: #7a4a1e !important;          /* 종이 대비 6.2:1 */
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-theme="book"] .register-link a:hover,
html[data-theme="book"] .login-link a:hover { color: var(--ribbon) !important; }

/* 🔑 로그인 버튼 — 혼자 보라 그라데이션으로 남아 있었다.
   가죽색 바탕 + 크림 글자(10.4:1). 표지와 같은 재질이라 화면 안에서 겉돌지 않는다. */
html[data-theme="book"] .btn-primary,
html[data-theme="book"] .btn.btn-primary,
html[data-theme="book"] button.btn-primary {
  background: linear-gradient(180deg, #6b4a2a 0%, var(--leather) 100%) !important;
  color: #f6ecd8 !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--serif);
}
html[data-theme="book"] .btn-secondary {
  background: rgba(255, 253, 246, 0.55) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(120, 96, 60, 0.45) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--serif);
}

/* ── 2. 범례 줄 — 크림 속지 위의 흰 종이(#f8f9fa)를 걷어낸다 ──── */
html[data-theme="book"] .legend-container {
  background: none !important;
  background-color: transparent !important;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0 !important;
  padding: clamp(8px, 1.6vh, 14px) clamp(4px, 1vw, 12px) !important;
  gap: clamp(8px, 2vw, 20px) !important;
}
/* 범례 항목도 판을 깔지 않는다 — 속지 위에 바로 얹힌다 */
html[data-theme="book"] .legend,
html[data-theme="book"] .legend-item {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

/* ── 3. 남은 파랑/보라 ────────────────────────────────────── */
/* 푸터 링크(이용약관·개인정보처리방침·환불정책·고객센터) — rgb(102,126,234) 였다.
   ⚠️ 선택자가 `.business-info-line.policy-links a`(0,2,1) 라 이 파일의 `a` 규칙(0,1,2)으로는 못 이긴다. */
html[data-theme="book"] .business-info-compact {
  color: var(--ink-soft) !important;
  border-top-color: var(--rule-strong) !important;
  font-family: var(--serif);
}
html[data-theme="book"] .business-info-line,
html[data-theme="book"] .business-info-line span { color: var(--ink-soft) !important; }
html[data-theme="book"] .business-info-line.policy-links a { color: #7a4a1e !important; }
html[data-theme="book"] .business-info-line.policy-links a:hover { color: var(--ribbon) !important; }
html[data-theme="book"] .business-info-copyright { color: var(--ink-soft) !important; }

/* 도움말 ? 버튼 — tutorial.css 가 !important 로 보라를 박아 둬서 스코프로 눌러 이긴다.
   ⚠️ 옆의 .theme-switcher 는 건드리지 않는다(모든 테마에서 보여야 한다). */
html[data-theme="book"] .tutorial-help-button {
  background: rgba(243, 233, 214, 0.96) !important;
  color: var(--leather) !important;
  border: 1px solid rgba(120, 96, 60, 0.45) !important;
  box-shadow: 0 2px 8px rgba(28, 20, 16, 0.35) !important;
}
html[data-theme="book"] .tutorial-help-button:hover {
  background: #fffdf6 !important;
  box-shadow: 0 5px 16px rgba(28, 20, 16, 0.4) !important;
}

/* 한/영 버튼 — 밑줄·활성 배경이 보라였다 */
html[data-theme="book"] .language-switcher {
  background: rgba(243, 233, 214, 0.96) !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  box-shadow: 0 2px 10px rgba(28, 20, 16, 0.35) !important;
}
/* 선택 표시는 테마 줄과 같은 가죽 채움 — 카드 안 세 줄이 한 언어를 쓴다(핸드북 0절) */
html[data-theme="book"] { --control-on-bg: var(--leather); --control-on-fg: #f3e9d6; }
/* 도크 막대(읽기 화면 '글자 크기') — 트랙은 괘선색, 채움은 금박, 값은 잉크(2026-09-06 검수 #9) */
html[data-theme="book"] { --dock-range-track: rgba(120, 90, 45, 0.22); --dock-range-fill: var(--gilt); --dock-range-ink: var(--ink); }
html[data-theme="book"] .lang-btn { font-family: var(--serif) !important; }

/* 튜토리얼 강조 테두리 — 보라 3px 가 남아 있었다(스포트라이트 그림자만 금박이었다) */
html[data-theme="book"] .tutorial-spotlight,
html[data-theme="book"] #tutorialSpotlight {
  border-color: rgba(184, 145, 47, 0.95) !important;
}
html[data-theme="book"] .tutorial-text { color: var(--ink) !important; }

/* ── 4. 작은 알약 버튼 — 글자가 잘리고, 흰 글자가 크림 위에 있었다 ──
   ⚠️ 원인 둘. (a) calendar.css 가 좁은 화면에서 `height: 32/36/40px` 을 **고정**하는데
      명조는 같은 px 라도 넓어서 두 줄이 되고 위아래가 깎였다.
      (b) 안쪽 span(.version-number/.update-date/.auth-text)이 `color: white` 라
      크림 바탕 위에서 사라졌다 — 바깥 색만 바꿔서는 안 보인다. */
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge {
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(5px, 1.1vw, 9px) clamp(9px, 1.8vw, 15px) !important;
  line-height: 1.4 !important;
  font-size: clamp(11px, 1.8vw, 13px) !important;
  gap: clamp(3px, 0.8vw, 8px) !important;
  border-radius: 999px !important;
  align-items: center !important;
}
html[data-theme="book"] .version-number,
html[data-theme="book"] .update-date,
html[data-theme="book"] .auth-text,
html[data-theme="book"] .auth-icon,
html[data-theme="book"] .admin-text,
html[data-theme="book"] .admin-icon {
  color: var(--ink) !important;
  background: none !important;
  text-shadow: none !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  font-family: var(--serif);
}
/* 판번호는 금박 칩으로 남겨 둔다 — 날짜와 구분이 필요하다 */
html[data-theme="book"] .version-number {
  background: rgba(176, 138, 60, 0.22) !important;
  padding: 1px clamp(5px, 1.1vw, 8px) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
/* 로그아웃 칩 — 원본은 빨강 그라데이션. 가름끈 색으로 눕힌다 */
html[data-theme="book"] .auth-action {
  background: rgba(142, 43, 43, 0.16) !important;
  color: var(--ribbon) !important;
  text-shadow: none !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
  padding: 1px clamp(5px, 1.1vw, 8px) !important;
  border-radius: 999px !important;
  font-family: var(--serif);
}

/* ── 5. 요일 글자 — 3.5:1 이라 옅었다 → 7.0:1 ─────────────── */
html[data-theme="book"] .calendar-table th {
  color: var(--ink-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  font-size: clamp(12px, 2.2vw, 15px) !important;
}

/* ── 6. 가독성 전반 ───────────────────────────────────────
   기본 테마의 날짜는 18px 인데 여기는 11~14px 이었다. 명조는 같은 px 에서
   고딕보다 작아 보이므로 오히려 **기본보다 크게** 잡아야 비슷하게 읽힌다. */
html[data-theme="book"] .day-number {
  font-size: clamp(14px, 3.1vw, 19px) !important;
  width: auto !important;
  height: auto !important;
  min-width: 1.5em;
  line-height: 1.5 !important;
  color: #241d17 !important;   /* 종이 대비 13:1 */
  font-weight: 700 !important;
}
/* 오늘 동그라미는 위에서 width/height 를 auto 로 눕혔으니 여기서 되살린다 */
html[data-theme="book"] .today .day-number {
  width: 1.85em !important;
  height: 1.85em !important;
  min-width: 0 !important;
  border-width: 2px !important;
  border-color: rgba(142, 43, 43, 0.75) !important;
  line-height: 1 !important;
}
/* 읽은 날 형광펜 — 숫자가 커진 만큼 자국도 같이 키운다 */
html[data-theme="book"] .day-with-reading .day-number { padding: 0 0.22em !important; }

/* 통계 상자 — 원본 회색(#374151 / #6b7280)이 남아 있었다 */
html[data-theme="book"] .stats-container,
html[data-theme="book"] .stat-box { color: var(--ink) !important; font-family: var(--serif); }
html[data-theme="book"] .stat-box {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid rgba(120, 96, 60, 0.22) !important;
  box-shadow: none !important;
}
html[data-theme="book"] .stat-title { color: var(--ink) !important; font-weight: 700 !important; }
html[data-theme="book"] .stat-details,
html[data-theme="book"] .stat-details * { color: var(--ink-soft) !important; }
html[data-theme="book"] .stats-container * { font-family: var(--serif); }

/* 머리말이 가름끈보다 앞에 와야 한다 — 안 그러면 '다음달' 버튼을 끈이 덮는다.
   ⚠️ z-index 만으로는 안 됐다. 이동 버튼이 `background: none` 이라 **투명해서**
      뒤의 가름끈이 글자 뒤로 비쳤다(대비 붕괴). 옅은 종이 바탕을 깔아 끈을 가린다. */
html[data-theme="book"] .header { position: relative; z-index: 2; }
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link {
  background: rgba(255, 253, 246, 0.62) !important;
  color: var(--ink-head) !important;
}
html[data-theme="book"] .nav-btn:hover,
html[data-theme="book"] .today-link:hover { background: rgba(232, 214, 176, 0.9) !important; }

/* ============================================================
   펼침면 — 넓은 화면에서 좌우 두 지면으로 가른다 (2026-08-21)
   ⭐ 시안 4차 「PC·태블릿 — 펼침」 그대로:
      **왼쪽 지면이 그달 읽은 기록, 오른쪽이 달력.**
   ⚠️ 900px 은 base.html 의 .book-spine 이 나타나는 폭과 **같아야 한다.**
      한쪽만 바꾸면 선은 있는데 지면이 안 갈리거나 그 반대가 되어,
      접힘선이 달력 한가운데를 세로로 관통한다(고치기 전이 그랬다).
   ⚠️ column-gap 과 .book-spine 의 width 도 같은 값이라야 선이 두 지면 사이에 앉는다.
   ============================================================ */
@media (min-width: 900px) {
  /* ⚠️ `:has(> .page)` 가 **꼭 있어야 한다.** `.container` 는 달력 화면만의 것이 아니다 —
        릴리즈 노트 화면도 같은 클래스를 쓰는데 거기엔 지면(.page)이 없다. 조건 없이 걸었더니
        뒤로가기 상자·제목·판번호가 두 열로 흩어지고 제목이 "업데이/트 내역"으로 접혔다
        (2026-08-21 캡처). 지면이 있는 컨테이너에서만 펼친다. */
  html[data-theme="book"] .container:has(> .page) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(30px, 4.4vw, 64px);   /* = .book-spine 의 width */
    /* ⚠️ start 로 두면 지면 높이가 제 내용만큼이라 왼쪽이 짧게 끝난다 —
          판권지(사업자 정보)의 margin-top:auto 가 먹지 않아 통계에 붙어 버렸다.
          두 지면 키를 맞춰야 펼친 책처럼 보이고 아래쪽 것이 바닥에 앉는다. */
    align-items: stretch;
  }
  html[data-theme="book"] .page {
    display: flex;
    flex-direction: column;
    min-width: 0;            /* 표가 제 열을 밀어내지 못하게 */
  }
  /* DOM 은 달력(오른쪽)이 먼저다 — order 로 지면 순서를 바로잡는다 */
  html[data-theme="book"] .page-left  { grid-column: 1; order: 1; }
  html[data-theme="book"] .page-right { grid-column: 2; order: 2; }

  /* 두 지면 밖 — 펼침면 위·아래로 전체 폭을 쓴다 */
  html[data-theme="book"] .container > #successMessage {
    grid-column: 1 / -1; order: 0;
  }
  /* ⚠️ 사업자 정보는 이제 .page-left 안에 있다 — 그리드 아이템이 아니다.
        전체 폭에 걸쳐 두었더니 책등이 글자 한가운데를 관통했다(2026-08-21).
        왼쪽 지면 맨 아래에 작게 붙인다 — 책의 판권지 자리다. */
  html[data-theme="book"] .page-left > .business-info-compact {
    margin-top: auto;              /* 지면이 짧아도 바닥에 붙는다 */
    padding-top: clamp(12px, 2vh, 22px);
    border-top: 1px solid var(--rule);
  }

  /* 왼쪽 지면은 오른쪽(달력)보다 글이 성기다 — 위쪽에 붙여 두면 허전하지 않다 */
  html[data-theme="book"] .page-left > .margin-note { margin-top: 0; }
}

/* 성구 — 지면마다 한 줄. 시안의 VERSES 자리다. */
html[data-theme="book"] .page-verse {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  font-size: clamp(11px, 1.5vw, 13.5px);
  line-height: 1.7;
  /* ⚠️ 한국어는 기본이 **글자 단위** 줄바꿈이라 성경 책 이름이 잘렸다
        ("…묵상하여 · 여/호수아 1:8"). keep-all 이라야 낱말째로 넘어간다.
        단 keep-all 만 두면 긴 낱말이 상자를 삐져나가므로 break-word 를 같이 준다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: clamp(10px, 2vh, 20px) 0;
  padding: 0 clamp(8px, 2vw, 20px);
}
/* 기본 테마에는 없던 것이다 — 흔적도 남기지 않는다 */
html:not([data-theme="book"]) .page-verse { display: none !important; }

/* ⚠️ 속지(.container::before)보다 위로 올리는 규칙은 `.container > *` 로 걸려 있다.
      지면 래퍼가 생기면서 그 안쪽 요소들은 **더 이상 .container 의 직계가 아니다** —
      래퍼가 display:contents 인 좁은 화면·기본 테마에서는 래퍼 자신도 박스를 안 만들어
      z-index 가 무효가 된다. 그래서 안쪽 요소에 같은 규칙을 한 번 더 건다.
      (안 걸면 난외주·통계·광고가 속지 밑으로 숨는다) */
html[data-theme="book"] .page > * { position: relative; z-index: 1; }

/* ── 왼쪽 지면 안쪽 — 열이 절반이 되면 가로로 늘어선 것들이 깨진다 ──────
   ⚠️ 한 줄이던 것들이 열 폭 안에서 글자 단위로 접혔다:
      "이번 달 통/계", "성경 읽은/날", "오/늘"(2026-08-21 펼침면 첫 캡처).
      폭을 못 늘리므로 **세로로 세워** 각자 제 줄을 갖게 한다. */
@media (min-width: 900px) {
  html[data-theme="book"] .page-left .stats-container {
    display: flex !important;
    flex-direction: column;
    gap: clamp(10px, 1.6vh, 18px);
  }
  html[data-theme="book"] .page-left .legend-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
  }
  html[data-theme="book"] .page-left .legend { flex-wrap: wrap; }
  /* 낱말이 글자 단위로 쪼개지지 않게 — 못 들어가면 통째로 다음 줄에 간다 */
  html[data-theme="book"] .page-left .legend-item span,
  html[data-theme="book"] .page-left .stat-title,
  html[data-theme="book"] .page-left .stat-details span { white-space: nowrap; }
}

/* 오른쪽 지면 머리말 — 열이 절반이라 제목이 버튼에 닿는다.
   ⚠️ 제목 크기가 3.4vw 라 **화면 폭**을 따라 커지는데, 펼침면에서 제목이 앉는 곳은
      화면이 아니라 **절반 열**이다. 그래서 열 기준으로 다시 잡는다. */
@media (min-width: 900px) {
  /* ⚠️ flex-wrap 으로 두었더니 제목이 한 글자 길어지는 달(9월)에 **"다음달 ▶"이
        아래 줄로 떨어졌다.** 3열 격자로 못 박아 무슨 달이든 한 줄을 지킨다.
        (가운데 1fr 이 남는 폭을 다 먹으므로 양쪽 버튼은 항상 끝에 붙는다) */
  html[data-theme="book"] .page-right .header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(4px, 0.8vw, 12px);
    flex-wrap: nowrap;
  }
  /* 제목+"이번달로" 묶음이 max-content 라 안 줄어든다 — 펼침면에서는 풀어 준다 */
  html[data-theme="book"] .page-right .month-title-container {
    min-width: 0;
    justify-self: center;
  }
  html[data-theme="book"] .page-right .month-title {
    font-size: clamp(16px, 1.8vw, 23px) !important;
  }
}

/* ============================================================
   책장 넘김 (2026-08-21) — 지면을 **띠로 복제해** 원기둥에 감는다.
   ⭐ 띠 안에 든 것은 진짜 DOM 복제다. 베낀 그림이 아니라 **화면 그 자체**라
      글자 크기·자리·밑줄이 어긋날 수가 없다.
   ⚠️ 각도·위치 계산은 book-turn.js 의 bend() 가 한다. 여기는 **무대와 재질**만 정한다.
   ============================================================ */
.bc-turn-stage {
  perspective: 2600px;
  perspective-origin: center center;
  transform-style: preserve-3d;
}
.bc-strip {
  /* ⚠️ 지면(.page-*)은 배경이 없다 — 종이 바탕은 속지(.container::before)가 그린다.
        띠에 종이색을 깔지 않으면 돌아가는 내내 **아래(새 달)가 그대로 비친다.** */
  background: var(--paper);
  backface-visibility: visible;   /* 뒤집힌 띠는 종이 뒷면처럼 비쳐 보인다 */
  /* ⚠️ 띠마다 그림자를 주면 **이음새가 세로 줄로** 드러난다. 입체감은 명암(filter:
        brightness — book-turn.js 가 굽은 각도로 계산한다)만으로 낸다. */
}
/* 넘기는 동안에는 아래 지면을 만지지 못하게 — 띠가 덮고 있어 잘못 눌린다 */
.container.bc-turning .page-left,
.container.bc-turning .page-right,
.container.bc-turning .calendar-frame { pointer-events: none; }

/* 종이 뒷면 — **아무것도 안 그린다.** 종이색과 음영만으로 충분하다(사용자 결정).
   거울상 글자를 비치게 해 봤지만 어수선하기만 했다.
   ⚠️ 뒷면 막(.bc-back-face)은 book-turn.js 가 띠 안에 **종이 영역 크기로** 넣고 켠다 —
      예전의 .bc-strip::after 는 띠 전체를 덮어, 무대가 탭까지 넓어진 뒤로는 가죽 위에도
      막이 생겨 뺐다(2026-09-03). */

/* ============================================================
   페이지 필 (2026-09-06) — 읽기 화면의 책장 넘김. 네이버 시리즈 뷰어 벤치마크.
   ⭐ 층은 book-turn.js 의 peelMake 가 만든다(무대·앞면·뒷면·그림자·반대 장 덮개).
      기하(접힘선·clip-path·반사 변환·명암 그라데이션)는 전부 JS 가 인라인으로 넣는다.
      여기는 **재질**만 — 종이색·뒷면색·글자 선택 금지.
   ⚠️ 지면(.read-sheet)은 배경이 없다(종이 바탕은 속지 ::before). 앞면·뒷면 층에 종이색을
      깔지 않으면 접히는 동안 아래 새 면이 그대로 비친다.
   ============================================================ */
html[data-theme="book"] .bc-peel-stage { contain: layout style; }
html[data-theme="book"] .bc-peel-front,
html[data-theme="book"] .bc-peel-cover { background: var(--paper); overflow: hidden; }
html[data-theme="book"] .bc-peel-front { will-change: clip-path; }
html[data-theme="book"] .bc-peel-back {
  background: var(--paper);
  overflow: hidden;
  will-change: transform, clip-path;
}
/* 폰(한 장): 뒷면은 종이 뒷면색. 앞면 글자는 얇은 종이처럼 아주 옅게만 비친다(JS 가 0.08) */
html[data-theme="book"] .bc-peel-back--paper { background: var(--paper-back); }
html[data-theme="book"] .bc-peel-shadow { overflow: hidden; }
/* 명암 — 접힘선이 가운데(50%)인 큰 정사각형을 JS 가 접힘선 방향으로 돌려 놓는다.
   폭(--peel-w1/--peel-w2)은 JS 가 지면 폭 비율로 넣는다.
   ⚠️ 인라인 그라데이션은 위 `[style*="linear-gradient"]` 규칙이 지우므로 반드시 여기 둔다. */
html[data-theme="book"] .bc-peel-shadow-g {            /* 들린 종이가 새 면에 드리우는 그림자(접힘선 바깥) */
  background-image: linear-gradient(90deg,
    transparent calc(50% - 1px), rgba(40, 25, 10, 0.34) 50%,
    rgba(40, 25, 10, 0.20) calc(50% + var(--peel-w1, 24px)),
    transparent calc(50% + var(--peel-w2, 80px)));
}
html[data-theme="book"] .bc-peel-front-g {             /* 앞면 접힘선 안쪽 — 종이가 굽는 자리 */
  background-image: linear-gradient(90deg,
    transparent calc(50% - var(--peel-w1, 30px)), rgba(40, 25, 10, 0.18) 50%,
    transparent calc(50% + 1px));
}
html[data-theme="book"] .bc-peel-back-g {              /* 뒷면 원통 명암 — 접힘선 가까이 밝고 멀수록 살짝 어둡다 */
  background-image: linear-gradient(90deg,
    transparent calc(50% - 1px), rgba(255, 255, 255, 0.30) 50%,
    rgba(40, 25, 10, 0.16) calc(50% + var(--peel-w1, 30px)),
    rgba(40, 25, 10, 0.06) calc(50% + var(--peel-w2, 140px)),
    rgba(40, 25, 10, 0.06) 100%);
}
html[data-theme="book"] .bc-peel-stage .read-sheet { box-shadow: none; }
html[data-theme="book"] .bc-peel-stage .read-flow { transition: none !important; }
/* 끌어 넘기는 동안 글자가 선택되지 않게. 아래 지면은 덮여 있으니 누르지도 못하게 */
html[data-theme="book"] .read-book.bc-peeling { user-select: none; -webkit-user-select: none; }
html[data-theme="book"] .read-book.bc-peeling .read-spread { pointer-events: none; }
/* 복제본 안의 머리글·아래 줄은 .container > * 규칙(z-index 층)을 안 받는다 — 종이 위에 평평하게 */
html[data-theme="book"] .bc-peel-stage .read-header,
html[data-theme="book"] .bc-peel-stage .read-foot { z-index: auto; }
/* ⚠️ 필은 첫 픽셀부터 아래 새 면을 드러낸다. .read-flow 의 transform 전환(280ms)이 살아 있으면
      새 면이 미끄러져 들어오는 도중이 접힌 자리로 비친다(첫 캡처에서 단이 조각나 보였다). */
html[data-theme="book"] .read-book.bc-peeling .read-flow { transition: none !important; }

/* ============================================================
   고전 판면 (2026-08-21) — "모든 걸 고전 느낌으로" (사용자 요청)

   ⭐ 이 절의 원칙은 위 「가독성 수리」와 같다. **분위기보다 읽히는 것이 먼저다.**
      색을 새로 쓰면 종이색(#f3e9d6) 대비를 계산해 값 옆에 적는다.
   ⭐ 여기서 하는 일은 넷이다.
      1) 활자 — 웹폰트로 실제 명조·가라몽을 신는다(위 --serif 참고)
      2) 판면 — 광곽(匡郭)·계선(界線)·어미(魚尾) 같은 고서 요소를 넣는다
      3) 금속 — 둥근 알약을 네모난 활판 상자로 바꾼다
      4) 그림 — 컬러 이모지를 걷어내고 활자 장식으로 대신한다
   ============================================================ */

html[data-theme="book"] {
  /* 장식용 마름모 — 고서의 어절 구분표(❖)에서 가져왔다. 글자색이 아니라 장식색이다. */
  --ornament: rgba(176, 138, 60, 0.85);
  /* 계선은 괘선보다 옅게 — 같은 굵기로 두면 달력이 장부(스프레드시트)처럼 보인다 */
  --rule-v: rgba(120, 90, 45, 0.10);
}

/* ── 1. 활자 다듬기 ───────────────────────────────────────
   ⚠️ 한국어는 기본이 **글자 단위** 줄바꿈이다. 낱말째 넘기려면 keep-all 이 필요하고,
      그것만 두면 긴 낱말이 상자를 삐져나가므로 break-word 를 짝으로 준다. */
html[data-theme="book"] body {
  font-family: var(--serif);
  /* 가라몽은 합자(fi·fl)와 커닝이 살아 있을 때 제 모양이 난다 */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목은 송명조로 — 붓에서 온 획이라 본문 명조보다 훨씬 고서에 가깝다.
   ⚠️ 송명조는 400 한 벌뿐이다. 굵기를 올리면 브라우저가 획을 부풀려 뭉갠다 → 400 고정. */
html[data-theme="book"] .month-title,
html[data-theme="book"] .login-title,
html[data-theme="book"] .register-title,
html[data-theme="book"] .header h1,
html[data-theme="book"] h1 {
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
}

/* 숫자 ────────────────────────────────────────────────────
   ⚠️ EB Garamond 의 기본 숫자는 **옛숫자(oldstyle)** 라 3·4·5·7·9 가 밑으로 내려간다.
      본문 속에서는 그게 고전적이지만, 달력처럼 **격자에 줄 맞춰 서는 숫자**에 쓰면
      같은 칸의 숫자끼리 높이가 달라 보인다. 그래서 자리를 갈라 쓴다:
        · 격자·수치(달력 날짜·통계·판번호) → lining  (줄 맞춤이 먼저)
        · 산문(난외주 날짜·판권지·성구)     → oldstyle (고서의 맛) */
html[data-theme="book"] .day-number,
html[data-theme="book"] .day-chapters-badge,
html[data-theme="book"] .stats-container,
html[data-theme="book"] .stat-details,
html[data-theme="book"] .version-number,
html[data-theme="book"] .update-date,
html[data-theme="book"] .calendar-table {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
html[data-theme="book"] .margin-note,
html[data-theme="book"] .page-verse,
html[data-theme="book"] .business-info-compact,
html[data-theme="book"] .release-date,
html[data-theme="book"] .release-section li {
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "onum" 1, "pnum" 1;
}

/* ── 2. 종이 — 세월 얼룩(foxing) ──────────────────────────
   ⚠️ 위쪽 `.container::before` 규칙을 **통째로 다시 적는다.** background 는 층 목록이라
      한 층만 덧붙일 수 없다. 기존 층(책등 그늘·종이 결·종이색)은 그대로 두고 얼룩을 얹었다.
   ⚠️ 알파는 0.05 를 넘기지 않는다 — 넘기면 그 자리의 글자 대비가 떨어진다. */
html[data-theme="book"] .container::before {
  background:
    radial-gradient(ellipse 6% 4% at 12% 22%, rgba(150, 110, 55, 0.05), transparent 70%),
    radial-gradient(ellipse 4% 3% at 84% 12%, rgba(150, 110, 55, 0.045), transparent 70%),
    radial-gradient(ellipse 8% 3% at 70% 78%, rgba(150, 110, 55, 0.04), transparent 70%),
    radial-gradient(ellipse 5% 4% at 28% 88%, rgba(150, 110, 55, 0.05), transparent 70%),
    linear-gradient(90deg, rgba(70, 45, 20, 0.18) 0%, rgba(70, 45, 20, 0.05) 4%, transparent 9%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px),
    var(--paper);
}

/* 표지 — 고서는 모서리가 거의 각지다. 둥근 정도를 확 줄이고 가장자리에 금박 테를 두른다 */
html[data-theme="book"] .container {
  border-radius: 3px;
  box-shadow:
    0 clamp(10px, 2vh, 26px) clamp(20px, 4vh, 60px) rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 clamp(5px, 0.7vw, 9px) rgba(0, 0, 0, 0.14),
    inset 0 0 0 calc(clamp(5px, 0.7vw, 9px) + 1px) rgba(184, 145, 47, 0.30);
}
html[data-theme="book"] .container::before { border-radius: 1px; }

/* ── 3. 광곽(匡郭) — 판면을 두 줄로 두른다 ────────────────
   고서의 사주쌍변(四周雙邊). `outline` 은 바깥으로 그려지고 offset 을 줄 수 있어
   테두리 한 벌만으로 **두 줄**이 된다(가짜 요소를 하나 더 만들 필요가 없다).
   ⚠️ 표(.calendar-table)가 아니라 틀(.calendar-frame)에 건다 — book-turn.js 가
      넘길 때 표를 통째로 갈아 끼우므로 표에 걸면 테가 같이 사라진다. */
html[data-theme="book"] .calendar-frame {
  border: 1px solid rgba(120, 90, 45, 0.42);
  outline: 1px solid rgba(120, 90, 45, 0.22);
  outline-offset: 4px;
  padding: clamp(6px, 1.2vw, 14px) clamp(4px, 0.9vw, 12px);
  /* 테가 화면·이웃 요소에 닿지 않게 outline 두께+offset 만큼 자리를 비운다 */
  margin: clamp(8px, 1.6vh, 16px) 6px clamp(12px, 2.2vh, 22px);
  background: rgba(255, 253, 246, 0.28);
}

/* ── 4. 계선(界線) — 칸 사이 세로줄 ───────────────────────
   고서에서 글줄을 가르던 선. 가로 괘선보다 **옅게** 둔다(같으면 장부처럼 보인다). */
html[data-theme="book"] .calendar-table th,
html[data-theme="book"] .calendar-table td {
  border-right: 1px solid var(--rule-v) !important;
}
html[data-theme="book"] .calendar-table th:last-child,
html[data-theme="book"] .calendar-table td:last-child {
  border-right-color: transparent !important;
}
/* 요일줄 아래는 쌍선 — 머리와 본문을 가르는 자리다 */
html[data-theme="book"] .calendar-table thead th {
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 3px double var(--rule-strong) !important;
  padding-top: clamp(4px, 0.8vh, 9px) !important;
}

/* ── 5. 어미(魚尾) — 책등 한가운데 물고기 꼬리 ────────────
   고서의 판심(가운데 접힌 자리)에 찍히던 표. 위·아래 두 개가 마주 본다.
   ⚠️ `.book-spine` 자체는 base.html 이 그린다 — 여기서는 **덧그리기만** 한다.
   ⚠️ 어미는 **두 구획선 사이에 놓일 때라야** 어미로 읽힌다. 삼각형만 두었더니
      책등에 붙은 회색 조각으로 보였다(2026-08-21 첫 캡처).
   ⚠️ clip-path 로 꼬리를 깎으면 **box-shadow 로 그린 구획선까지 같이 잘린다**
      (clip-path 는 그림자를 포함해 상자 전체를 자른다). 그래서 꼬리는 도형이 아니라
      **글자(▼▲)** 로 찍고, 구획선은 위아래 테두리로 둔다 — 잘릴 것이 없다. */
html[data-theme="book"] .book-spine::before,
html[data-theme="book"] .book-spine::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(14px, 1.9vw, 21px);
  text-align: center;
  font-size: clamp(7px, 0.9vw, 10px);
  line-height: 1;
  padding: 3px 0;
  color: rgba(70, 45, 20, 0.38);
  border-top: 1px solid rgba(70, 45, 20, 0.30);
  border-bottom: 1px solid rgba(70, 45, 20, 0.30);
}
html[data-theme="book"] .book-spine::before { content: "▼"; top: 10%; }
html[data-theme="book"] .book-spine::after  { content: "▲"; bottom: 10%; }

/* ── 6. 활판 상자 — 둥근 알약을 네모로 ────────────────────
   ⚠️ 위 「가독성 수리」에서 `border-radius: 999px !important` 로 못 박아 둔 것들이라
      여기서 다시 !important 로 눌러야 이긴다(같은 파일 안이라 순서로도 이기지만,
      원본 calendar.css 의 !important 도 함께 눌러야 해서 그대로 둔다).
   활판 느낌 = 얇은 테두리 + 안쪽 실선 한 겹(눌린 자국). 그림자는 쓰지 않는다. */
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge,
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .coffee-button,
html[data-theme="book"] .submit-btn,
html[data-theme="book"] .btn,
html[data-theme="book"] .form-input,
html[data-theme="book"] .back-btn {
  border-radius: 2px !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.03em;
  word-break: keep-all;
}
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge,
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .coffee-button {
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, 0.55) !important;
}
/* 금박 칩(판번호)·로그아웃 칩은 안쪽 조각이라 네모로만 맞춘다 */
html[data-theme="book"] .version-number,
html[data-theme="book"] .auth-action { border-radius: 2px !important; }

/* 이동 화살표 — 글자보다 한 단 작게, 잉크빛을 옅게 */
html[data-theme="book"] .nav-icon {
  font-size: 0.8em;
  color: var(--gilt);
  vertical-align: 0.05em;
}

/* 범례 색칠 — 도장처럼 각지게 */
html[data-theme="book"] .legend-item .legend-color,
html[data-theme="book"] .legend-color {
  border-radius: 0 !important;
  width: 0.85em; height: 0.85em;
}

/* ── 7. 진행 막대 — 종이에 눌린 홈과 금박 채움 ────────────
   ⚠️ 트랙과 채움을 **갈라** 칠한다. 둘 다 칠하면 늘 100% 처럼 보인다(이미 겪었다).
      여기서는 모양만 네모로 바꾸고 색 규칙은 위 절을 그대로 따른다. */
html[data-theme="book"] .progress-bar,
html[data-theme="book"] .stat-progress {
  border-radius: 0 !important;
  height: 7px !important;
  border: 1px solid rgba(120, 90, 45, 0.30) !important;
  box-shadow: inset 0 1px 2px rgba(90, 70, 40, 0.16) !important;
}
html[data-theme="book"] [class*="progress"] > div { border-radius: 0 !important; }

/* ── 8. 장식 괘선 — 마름모를 문 가는 줄 ───────────────────
   가운데 ❖ 하나에 양쪽으로 가늘어지는 금박 선. 고서의 어절 구분표에서 가져왔다. */
html[data-theme="book"] .page-verse::before,
html[data-theme="book"] .page-verse::after {
  content: "❖";
  display: block;
  text-align: center;
  color: var(--ornament);
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0;
  margin: 0.5em auto;
  width: 60%;
  /* 마름모 좌우로 뻗는 실선 — 글자 가운데 높이에 걸린다 */
  background:
    linear-gradient(90deg, transparent, var(--gilt) 45%, transparent 46%,
                    transparent 54%, var(--gilt) 55%, transparent) center/100% 1px no-repeat;
}
/* 성구 자체는 인용이므로 조금 더 눕히고 자간을 준다 */
html[data-theme="book"] .page-verse {
  font-family: var(--serif) !important;
  letter-spacing: 0.02em;
}

/* 난외주 머리 — 고서의 어깨표처럼 마름모를 앞에 세운다 */
html[data-theme="book"] .margin-note-title::before {
  content: "❖ ";
  color: var(--ornament);
  font-weight: 400;
}
html[data-theme="book"] .margin-note-title {
  font-family: var(--serif) !important;
  letter-spacing: 0.14em;
}
/* 난외주 본문 — 관주는 원래 잔글씨다. 자간을 조금 벌려 읽기를 지킨다 */
html[data-theme="book"] .margin-note { letter-spacing: 0.01em; }

/* 범례줄 위 괘선을 쌍선으로 — 판면과 주석을 가르는 자리 */
html[data-theme="book"] .legend-container {
  border-top: 3px double var(--rule-strong) !important;
}

/* ── 9. 컬러 이모지를 걷어낸다 ────────────────────────────
   ⭐ 이모지는 글자색(color)으로 안 바뀐다 — **색 그림**이라 테마를 덮어도 혼자 남는다.
      본문 뜻을 지고 있지 않은 장식 이모지만 지운다(기능 아이콘은 아래에서 활자로 바꾼다).
   ⚠️ 붙박이 텍스트로 박힌 것은 CSS 로 못 잡는다 → 템플릿에서 `.ui-emoji` 로 감쌌다
      (index/login/register/release_notes). 기본 테마에서는 그냥 span 이라 아무 변화가 없다. */
html[data-theme="book"] .ui-emoji,
html[data-theme="book"] .auth-icon,
html[data-theme="book"] .admin-icon,
html[data-theme="book"] .btn-primary > span:first-child,
html[data-theme="book"] .btn-secondary > span:first-child { display: none !important; }

/* CSS 로 박힌 것들 — 마름모나 빈 값으로 갈아 끼운다 */
html[data-theme="book"] .stat-title::before {
  content: "❖ " !important;
  color: var(--ornament);
}
html[data-theme="book"] .coffee-button::before { content: "" !important; }
html[data-theme="book"] .header h1::before { content: "" !important; }

/* 도움말 ? — 컬러 이모지(❓)를 활자 물음표로 바꾼다.
   ⚠️ 글자를 지우는 게 아니라 크기를 0 으로 만들고 가짜 요소로 다시 그린다
      (버튼 안의 텍스트 노드는 CSS 로 지울 수 없다). title 속성은 그대로라 읽어 주기에는 영향 없다. */
html[data-theme="book"] .tutorial-help-button {
  font-size: 0 !important;
  font-family: var(--serif-display) !important;
}
html[data-theme="book"] .tutorial-help-button::before {
  content: "?";
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1;
  color: var(--leather);
}

/* 설정 카드 — 흰 유리 대신 책 위에 놓인 종이 쪽지로 */
html[data-theme="book"] .dock-items {
  background: rgba(246, 236, 216, 0.97) !important;
  border: 1px solid rgba(164, 126, 63, 0.34);
  box-shadow: 0 8px 24px rgba(22, 13, 9, 0.30) !important;
}
html[data-theme="book"] .dock-row-label {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
}

/* 커피 후원 — 책 사이에 끼운 쪽지처럼 */
html[data-theme="book"] .coffee-button {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  text-shadow: none !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.02em;
}

/* ── 10. 로그인·가입 — 속표지처럼 ────────────────────────── */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container { border-radius: 2px !important; }
/* 표제 아래위로 장식 괘선 — 옛 속표지의 두 줄 */
html[data-theme="book"] .login-header,
html[data-theme="book"] .register-header {
  border-bottom: 3px double var(--rule-strong) !important;
}
html[data-theme="book"] .login-title::after,
html[data-theme="book"] .register-title::after {
  content: "❖";
  display: block;
  color: var(--ornament);
  font-size: 0.42em;
  line-height: 1;
  margin-top: 0.5em;
  -webkit-text-fill-color: var(--ornament);
}
html[data-theme="book"] .form-input {
  border-radius: 2px !important;
  letter-spacing: 0.02em;
}
/* 라벨 — 고서의 항목표처럼 자간을 벌린다 */
html[data-theme="book"] .form-label {
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ── 11. 릴리즈 노트 — 판목(版木) 기록처럼 ────────────────
   ⚠️ 이 화면의 스타일은 release_notes.html 안 <style> 에 있다. 그 규칙이 이 파일보다
      **먼저** 실리므로(base.html 은 페이지 CSS 뒤에 테마 CSS 를 싣는다) 여기서 덮인다. */
html[data-theme="book"] .release-item {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid rgba(120, 96, 60, 0.28) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
/* 판번호 — 보라 그라데이션이 그대로 남아 있었다. 가죽 표지와 같은 재질로 눕힌다(크림 글자 10.4:1) */
html[data-theme="book"] .release-version {
  background: linear-gradient(180deg, #6b4a2a 0%, var(--leather) 100%) !important;
  color: #f6ecd8 !important;
  border-radius: 2px !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.04em;
}
html[data-theme="book"] .release-date { color: var(--ink-soft) !important; }
html[data-theme="book"] .release-commit {
  background: rgba(176, 138, 60, 0.16) !important;
  color: var(--ink-head) !important;
  border: 1px solid rgba(120, 96, 60, 0.30) !important;
  border-radius: 2px !important;
}
html[data-theme="book"] .release-title {
  color: var(--ink) !important;
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4em;
}
html[data-theme="book"] .release-section h4 {
  color: var(--ink-head) !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.08em;
}
html[data-theme="book"] .release-section h4::before {
  content: "❖";
  color: var(--ornament);
  font-weight: 400;
}
html[data-theme="book"] .release-section li { color: var(--ink) !important; }
html[data-theme="book"] .release-section ul { list-style: none; padding-left: 1.1em; }
/* 글머리 — 검은 동그라미 대신 고서의 가운뎃점 */
html[data-theme="book"] .release-section li::before {
  content: "·";
  color: var(--ornament);
  font-weight: 700;
  display: inline-block;
  width: 1.1em;
  margin-left: -1.1em;
}
html[data-theme="book"] .release-footer {
  border-top: 3px double var(--rule-strong) !important;
  color: var(--ink-soft) !important;
}
html[data-theme="book"] .release-footer p { color: var(--ink-soft) !important; }
html[data-theme="book"] .release-footer a { color: #7a4a1e !important; }
/* 이 화면의 머리말은 달력의 .header 와 클래스가 같다 — 가운데로 모으고 쌍선을 두른다 */
html[data-theme="book"] .release-notes ~ * { font-family: var(--serif); }

/* ── 12. 통계 상자·목표 버튼 ─────────────────────────────── */
html[data-theme="book"] .stat-box,
html[data-theme="book"] .stats-section,
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .goal-section { border-radius: 2px !important; }
html[data-theme="book"] .stat-title {
  font-family: var(--serif) !important;
  letter-spacing: 0.06em;
}
html[data-theme="book"] .goal-setting-btn {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  text-shadow: none !important;
  white-space: nowrap;
}

/* ── 13. 펼침면 머리말 — 제목이 '이전달' 버튼을 파고들던 것 ────
   ⚠️ 실측(2026-08-21): 폭 920 에서 **17px**, 1000 에서 **6px** 겹쳤다. 1280 은 21px 남았다.
      → 900~1050 구간에서만 나던 것이라 캡처를 1280 만 보면 못 잡는다.
   원인: `.month-title` 이 `white-space: nowrap` 이라 **줄어들 수가 없는데**,
      `.month-title-container` 가 제목과 '이번달로'를 **가로로** 안고 있어 묶음 폭이
      절반 열보다 넓어졌다. 가운데 정렬이라 넘친 만큼 좌우로 똑같이 삐져나가고,
      왼쪽으로 삐져나간 부분이 '이전달' 버튼 위에 얹혔다.
   → 펼침면에서는 둘을 **세로로** 세운다. 묶음 폭이 둘 중 넓은 쪽으로 줄어 열 안에 들어오고,
      제목 아래 부제가 붙은 책의 머리말 모양이 되어 오히려 고전에 가깝다. */
@media (min-width: 900px) {
  html[data-theme="book"] .page-right .month-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.4vh, 6px);
  }
}

/* ── 14. 릴리즈 노트 — 판목 기록을 이어진 종이 위에 ──────────
   ⚠️ `.container:not(:has(> .page))` = 지면이 없는 컨테이너 = 릴리즈 노트 화면.
      달력(펼침면)에는 걸리지 않는다. */
html[data-theme="book"] .container:not(:has(> .page)) .header {
  display: block !important;
  text-align: center;
  border-bottom: 3px double var(--rule-strong) !important;
}
html[data-theme="book"] .container:not(:has(> .page)) .header p {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  margin-top: 0.5em;
}
/* 판마다 크림 판을 깔면 종이가 조각조각 끊긴다. 책은 한 장으로 이어진다 —
   판을 걷고 쌍선으로만 가른다. */
html[data-theme="book"] .release-item {
  background: none !important;
  border: none !important;
  border-bottom: 3px double var(--rule-strong) !important;
  padding: clamp(14px, 2.4vw, 26px) clamp(4px, 1vw, 14px) !important;
  margin-bottom: 0 !important;
}
html[data-theme="book"] .release-notes .release-item:last-child {
  border-bottom: none !important;
}
/* 뒤로 가기 — 커다란 흰 상자였다. 활판 상자로 눕히고 왼쪽에 붙인다 */
html[data-theme="book"] .back-btn {
  display: inline-block;
  background: rgba(255, 253, 246, 0.62) !important;
  color: var(--ink-head) !important;
  border: 1px solid rgba(120, 96, 60, 0.40) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, 0.55) !important;
  padding: clamp(5px, 1vw, 9px) clamp(9px, 1.8vw, 16px) !important;
  letter-spacing: 0.04em;
}

/* 속표지 마름모는 표제 크기의 절반쯤이 보기 좋다 — 0.42em 은 티가 안 났다 */
html[data-theme="book"] .login-title::after,
html[data-theme="book"] .register-title::after { font-size: 0.5em; }

/* ── 15. 난외주 머리 글자 대비 ────────────────────────────
   ⚠️ `.margin-note-title` 은 예전부터 통째로 금박(--gilt #b08a3c)이었다.
      종이(#f3e9d6) 대비 **2.66:1** — 장식이면 몰라도 이건 "이 달 읽은 곳"이라는
      **읽어야 하는 글**이다(2026-08-21 계산으로 잡았다. 눈으로는 안 보였다).
   → 글자는 --ink-head(7.0:1)로 내리고, 금박은 앞의 마름모에만 남긴다.
      분위기는 마름모가 지고, 읽기는 글자가 진다. */
html[data-theme="book"] .margin-note-title { color: var(--ink-head) !important; }
html[data-theme="book"] .margin-note-title::before { color: var(--ornament); }

/* ============================================================
   15. 각 죽이기 — "그은 선"을 "스민 결"로 (2026-08-22, 사용자 지시)
   지시: "다 너무 딱딱하고 각졌다. 테두리에 명확한 선이 딱 나 있는 게 거슬린다."
   ⭐ 선을 없애는 게 아니라 **끝이 흐려지게** 만든다. 고서의 판면 느낌은 남기고
      직각·실선만 걷어낸다(§22 — 지금 잘 되는 것을 죽이지 않는다).
   ⚠️ 여기가 파일 끝인 이유: 앞 절들이 !important 로 못 박아 둔 값을 순서로 이긴다.
   ============================================================ */

/* ── 15-1. 광곽 — 사주쌍변(두 줄 직각 테)을 걷는다 ──────────
   outline 은 radius 를 따라가긴 하나 두 줄이면 무조건 '틀'로 읽힌다.
   테 대신 **판면만 아주 옅게 떠 있게** 한다. */
html[data-theme="book"] .calendar-frame {
  border-color: transparent !important;
  outline: none !important;
  border-radius: clamp(12px, 1.8vw, 24px) !important;
  background: rgba(255, 253, 246, 0.34) !important;
  box-shadow: inset 0 0 clamp(16px, 2.4vw, 34px) rgba(120, 96, 60, 0.10) !important;
}

/* ── 15-2. 계선(세로줄) — 통째로 뺀다 ─────────────────────
   ⭐ 화면이 '표'로 읽히던 가장 큰 원인. 가로 괘선만 남으면 장부가 아니라 글줄이 된다. */
html[data-theme="book"] .calendar-table th,
html[data-theme="book"] .calendar-table td {
  border-right-color: transparent !important;
}

/* ── 15-3. 괘선(가로줄) — 양 끝이 흐려지는 선으로 ──────────
   실선을 배경 그라데이션으로 바꾼다. 끝이 사라지므로 '그은 자국'이 아니라 '결'로 보인다. */
html[data-theme="book"] .calendar-table td,
html[data-theme="book"] .calendar-table thead th {
  border-bottom-color: transparent !important;
  border-top: none !important;
}
/* ⚠️ 페이드는 **줄(tr)** 에 건다. 칸(td)에 걸면 7칸이 각각 흐려져
      셀마다 짧은 호가 반복되는 물결이 된다(2026-08-22 첫 시도에서 실제로 그랬다).
   ⚠️⚠️ 그런데 `border-collapse: collapse` 에서는 **접힌 테두리가 차지하는 자리가
      줄 배경 칠에서 빠진다** — 그래서 tr 로 옮겨도 칸 경계마다 1px 씩 끊겨 여전히
      물결로 보였다. 칸 사이를 안 벌리는 separate 로 바꿔야 한 줄로 이어진다.
      (칸 테두리는 이 절에서 전부 투명으로 눕혔으므로 collapse 가 할 일이 없다.) */
html[data-theme="book"] .calendar-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
/* ⚠️ separate 로 바꾸면 collapse 가 눌러 두던 **칸별 카드**(원본 calendar.css 의
      배경·모서리·그림자)가 되살아난다 — 달력이 타일 무더기가 된다. 다시 눕힌다. */
html[data-theme="book"] .calendar-table td,
html[data-theme="book"] .calendar-table th {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="book"] .calendar-table tbody tr {
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.15) 8%,
      rgba(120, 90, 45, 0.15) 92%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;
  background-size: 100% 1px !important;
}
/* 요일줄 아래 쌍선(3px double) → 흐려지는 한 줄 */
html[data-theme="book"] .calendar-table thead tr {
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.30) 6%,
      rgba(120, 90, 45, 0.30) 94%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;
  background-size: 100% 1px !important;
}

/* ── 15-4. 구획선들 — 범례줄·난외주 위의 실선도 같은 결로 ── */
html[data-theme="book"] .legend-container,
html[data-theme="book"] .margin-note {
  border-top-color: transparent !important;
  border-top-style: solid !important;
  border-top-width: 1px !important;
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.26) 15%,
      rgba(120, 90, 45, 0.26) 85%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 0 !important;
  background-size: 100% 1px !important;
}

/* ── 15-5. 상자류 — 테두리를 지우고 종이 결로만 구분 ──────── */
html[data-theme="book"] .stat-box,
html[data-theme="book"] .stats-section,
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .goal-section {
  border-color: transparent !important;
  border-radius: clamp(10px, 1.5vw, 20px) !important;
  box-shadow: 0 1px clamp(6px, 1vw, 14px) rgba(90, 68, 40, 0.10) !important;
}

/* ── 15-6. 활판 상자 → 모서리를 눕힌다 ─────────────────────
   ⚠️ 어제 넣은 `border-radius: 2px`(6절 '활판 상자')를 **사용자 지시로 되돌린다.**
      알약(999px)은 그대로 두고, 네모였던 것만 둥글린다. */
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .coffee-button,
html[data-theme="book"] .submit-btn,
html[data-theme="book"] .btn,
html[data-theme="book"] .form-input,
html[data-theme="book"] .back-btn {
  border-radius: clamp(10px, 1.4vw, 16px) !important;
}
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge { border-radius: 999px !important; }
html[data-theme="book"] .version-number,
html[data-theme="book"] .auth-action { border-radius: 999px !important; }

/* 테두리를 옅게 — 선이 '보이는' 대신 '있는 줄만 아는' 세기로 */
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge,
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .coffee-button,
html[data-theme="book"] .submit-btn {
  border-color: rgba(150, 118, 62, 0.28) !important;
  /* 안쪽 흰 실선(눌린 자국)이 한 겹 더 각을 만들고 있었다 → 부드러운 그림자로 */
  box-shadow: 0 1px clamp(4px, 0.8vw, 9px) rgba(90, 68, 40, 0.14) !important;
}

/* 버튼 **안쪽** 조각에 남은 직각 테 — 바깥을 둥글려도 이건 따로 남는다 */
html[data-theme="book"] .goal-btn-text,
html[data-theme="book"] .goal-setting-btn span,
html[data-theme="book"] .coffee-button span {
  border: none !important;
  box-shadow: none !important;
}

/* ── 15-7. 책 자체의 모서리 ───────────────────────────── */
html[data-theme="book"] .container { border-radius: clamp(14px, 2.2vw, 30px) !important; }
html[data-theme="book"] .container::before { border-radius: clamp(10px, 1.6vw, 22px) !important; }

/* ── 15-8. 어미(魚尾) 구획선도 옅게 ───────────────────── */
html[data-theme="book"] .book-spine::before,
html[data-theme="book"] .book-spine::after {
  border-top-color: rgba(70, 45, 20, 0.16) !important;
  border-bottom-color: rgba(70, 45, 20, 0.16) !important;
}

/* ── 15-9. 다른 화면들(로그인·가입·릴리즈 노트)도 같은 결로 ──
   같은 지시가 이 화면들에도 걸린다 — 달력만 눕히면 페이지를 옮길 때 다시 각져 보인다. */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container,
html[data-theme="book"] .release-item {
  border-radius: clamp(12px, 1.8vw, 22px) !important;
}
html[data-theme="book"] .release-item {
  border-color: transparent !important;
  box-shadow: 0 1px clamp(6px, 1vw, 14px) rgba(90, 68, 40, 0.10) !important;
}
html[data-theme="book"] .release-version,
html[data-theme="book"] .release-commit {
  border-radius: 999px !important;
}
html[data-theme="book"] .release-commit { border-color: rgba(150, 118, 62, 0.28) !important; }

/* ============================================================
   16. 월 색인 — 실제 색인 성경처럼 책배를 반달로 파낸다 (2026-08-24)

   ⭐ 바깥으로 붙은 탭이 아니다. 가죽색 홈을 종이 안쪽으로 걸쳐 놓고,
      왼쪽 가장자리에 종이 단면의 밝은 림을 남겨 **오목한 구멍**으로 읽히게 한다.
   ⭐ 각 홈은 실제 월 링크다. 현재 달은 조금 더 깊고 금박이 밝다.
   ============================================================ */
html[data-theme="book"] .month-index {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(118px, 14vh, 156px);
  right: 0;
  bottom: clamp(72px, 9vh, 108px);
  width: var(--index-width, clamp(42px, 4vw, 50px));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  pointer-events: none;
}
html[data-theme="book"] .month-index-link {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  width: clamp(38px, 3.5vw, 46px);
  min-height: clamp(23px, 2.7vh, 29px);
  padding: 2px 5px 2px 8px;
  border: 1px solid rgba(238, 220, 180, 0.34);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(90deg, rgba(43, 27, 17, 0.98), rgba(77, 48, 29, 0.96) 74%, rgba(37, 23, 15, 0.98));
  box-shadow:
    inset 5px 0 7px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 248, 224, 0.20),
    -1px 0 0 rgba(226, 205, 164, 0.82),
    -3px 0 5px rgba(59, 39, 23, 0.22);
  color: #d7c18d;
  font-family: var(--serif-display);
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 1px #1e140d;
  transform: translateX(0);
  transition: width 160ms ease, transform 160ms ease, color 160ms ease;
}
html[data-theme="book"] .month-index-link::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 248, 224, 0.46), rgba(151, 119, 72, 0.08));
  opacity: 0.78;
}
html[data-theme="book"] .month-index-link small {
  font-size: 0.72em;
  color: inherit;
}
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible {
  width: clamp(43px, 4vw, 52px);
  transform: translateX(0);
  color: #f1daa0;
  opacity: 1;
}
html[data-theme="book"] .month-index-link:focus-visible {
  outline: 2px solid #d2ae58;
  outline-offset: 2px;
}
html[data-theme="book"] .month-index-link.is-current {
  width: clamp(46px, 4.3vw, 56px);
  transform: translateX(0);
  color: #f4dc97;
  background: linear-gradient(90deg, #352116, #6a4328 72%, #2d1c13);
  box-shadow:
    inset 7px 0 9px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 246, 208, 0.28),
    -1px 0 0 rgba(238, 216, 168, 0.92),
    -4px 0 7px rgba(46, 28, 17, 0.30);
  pointer-events: none;
}

/* ============================================================
   17. 좁은 화면의 월 이동 — 머리말에서 화면 아래 손가락 자리로
   ============================================================ */
@media (max-width: 899px) {
  html[data-theme="book"] .page-right > .header {
    justify-content: center !important;
    padding-left: calc(clamp(14px, 5vw, 28px) + clamp(10px, 1.6vw, 18px) + 8px - clamp(16px, 2.6vw, 34px)) !important;
  }
  html[data-theme="book"] .page-right > .header > .nav-btn,
  html[data-theme="book"] .page-right > .header .today-link {
    display: none !important;
  }
  html[data-theme="book"] .page-right > .header .month-title-container {
    margin-inline: auto;
  }

  html[data-theme="book"] .month-index {
    top: clamp(108px, 14vh, 138px);
    /* display:contents 인 한 장 화면에서는 containing block 이 책 전체다.
       책 안쪽여백만큼 되짚어야 속지의 실제 책배에 홈이 열린다. */
    right: clamp(14px, 5vw, 20px);
    bottom: auto;
    height: min(58vh, 430px);
    width: 42px;
  }
  html[data-theme="book"] .month-index-link {
    width: 39px;
    min-height: 24px;
    font-size: 10px;
    transform: translateX(0);
  }
  html[data-theme="book"] .month-index-link.is-current { width: 47px; transform: translateX(0); }

  /* ⚠️ .container > * 가 지면(.page)에 z-index:1 스태킹 컨텍스트를 만들어
     그 안의 fixed 월 이동 줄(z 9985)이 **뒤 형제(page-left 통계 카드) 아래** 깔린다
     (CDP 실측: elementFromPoint = stat-box). 줄이 든 지면만 한 층 올린다 —
     문서 흐름상 지면끼리 실제로 겹치는 건 fixed 인 이 줄뿐이라 다른 영향이 없다. */
  html[data-theme="book"] .page-right { z-index: 2; }

  html[data-theme="book"] .mobile-month-nav {
    position: fixed !important;
    z-index: 9985 !important;
    left: 50%;
    right: auto;
    /* ⭐ 2026-09-06 사용자 결정: 월 이동 줄이 맨 바닥, 후원·설정은 그 위(base.html bottom 80px). */
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(calc(100vw - 28px), 440px);
    display: grid;
    grid-template-columns: 1fr auto auto 1fr; /* 이전달 · 이번달로 · 성경 읽기 · 다음달 (calendar.css 와 같다) */
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(164, 126, 63, 0.34);
    border-radius: 999px;
    background:
      repeating-linear-gradient(0deg, rgba(70, 45, 20, 0.018) 0 1px, transparent 1px 3px),
      rgba(246, 236, 216, 0.96);
    box-shadow: 0 8px 24px rgba(22, 13, 9, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  html[data-theme="book"] .mobile-month-nav .nav-btn,
  html[data-theme="book"] .mobile-month-nav .today-link {
    min-height: 42px;
    margin: 0 !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    font-size: clamp(11px, 3vw, 13px) !important;
    border-radius: 999px !important;
    background: rgba(255, 252, 242, 0.58) !important;
  }
  html[data-theme="book"] .mobile-month-nav .today-link {
    color: #6b4b20 !important;
    border-color: rgba(176, 138, 60, 0.48) !important;
    font-weight: 700;
  }
  html[data-theme="book"] body { padding-bottom: 146px !important; }

  /* 설정 도크를 펼쳐도 월 막대는 바닥에 그대로 — 카드는 손잡이 위로 자란다(2026-09-06). */
}

/* ============================================================
   20. 모달 — 성경책 위에 놓인 기록용 속지 (2026-08-24 / 범위 확대 2026-08-27)

   ⭐ **모달 하나마다 규칙을 한 벌씩 쓰지 않는다.** 예전엔 이 절이 `#inputModal` 만
      맡았고("목표·로그아웃·년월 선택 모달은 공용 모습을 유지한다"), 그 결과 나머지
      모달 다섯이 보라 헤더·흰 유리 카드로 남아 사용자가 "모달에 테마 적용 안 된 게
      남아있다"고 지적했다(2026-08-27). 개별 모달을 하나씩 칠하면 다음 모달에서 또 어긋난다.
      그래서 **껍데기(막·카드·머리·바닥·버튼·입력칸)는 아래 한 목록이 통째로** 맡는다.
      새 모달이 생기면 고칠 곳은 이 목록 하나뿐이다.

   ⚠️ 목록에 든 것: 날짜 기록(#inputModal) · 목표(#goalModal) · 로그아웃(#logoutModal) ·
      년월 선택(#monthYearPickerModal) · 후원 결제(#payment-modal) · 축하(#celebrationOverlay).
   ⚠️ 목록 밖: 튜토리얼은 위 절(396줄쯤)이 이미 맡는다. 미리보기(.preview-modal)와
      플래시 토스트는 **JS가 style 을 직접 박아** CSS로 덮을 수 없다 — 그쪽을 고쳐야 한다.
      confirm()/alert() 24곳은 OS 대화상자라 원리상 테마를 못 입힌다.
   ⚠️ 속지 무늬·팝오버 화살표·기록 목록·모드 토글처럼 **날짜 기록 모달에만 있는 것**은
      아래에서 계속 `#inputModal` 로 좁혀 둔다. 넓히면 남의 모달에 없는 것을 칠하게 된다.
   ============================================================ */
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) {
  background: rgba(35, 24, 16, 0.46) !important;
  backdrop-filter: blur(4px) sepia(0.22) !important;
  -webkit-backdrop-filter: blur(4px) sepia(0.22) !important;
}
/* popover의 부모에 filter가 있으면 모바일의 position:fixed 내용물이 작은 popover 상자를
   기준으로 배치되어 화면 밖으로 밀린다. 팝오버는 종이 본체만 꾸미고 부모는 투명하게 둔다. */
html[data-theme="book"] #inputModal.popover-style {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) :is(.modal-content, .payment-modal-content, .celebration-content),
html[data-theme="book"] #inputModal.popover-style .modal-content {
  background:
    repeating-linear-gradient(0deg, rgba(89, 63, 35, 0.022) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, rgba(126, 91, 47, 0.08), transparent 9%, transparent 91%, rgba(126, 91, 47, 0.06)),
    #f4ead5 !important;
  color: var(--ink) !important;
  border: 1px solid rgba(151, 115, 57, 0.48) !important;
  border-radius: 5px 12px 12px 5px !important;
  box-shadow:
    0 18px 36px rgba(24, 14, 8, 0.34),
    0 5px 12px rgba(24, 14, 8, 0.22),
    inset 4px 0 8px rgba(113, 80, 42, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--serif) !important;
}

/* 공용 modal.css가 취소·삭제·상세 추가 버튼에 Arial을 직접 지정한다.
   모달 안의 모든 조작 활자도 기록지 본문과 같은 명조로 통일한다. */
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) button {
  font-family: var(--serif) !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-header {
  background:
    linear-gradient(90deg, rgba(142, 105, 51, 0.10), transparent 18%),
    rgba(242, 230, 207, 0.92) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(151, 115, 57, 0.42) !important;
  border-radius: 4px 11px 0 0 !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.48) !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-header h3 {
  color: var(--ink) !important;
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0.01em;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-control-btn {
  color: #654a2d !important;
  background: rgba(255, 252, 242, 0.48) !important;
  border: 1px solid rgba(151, 115, 57, 0.32) !important;
  box-shadow: none !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-control-btn:hover,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-control-btn:focus-visible {
  color: #402b19 !important;
  background: rgba(221, 198, 150, 0.34) !important;
  transform: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-body {
  color: var(--ink) !important;
  background: transparent !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-footer {
  background: rgba(239, 225, 199, 0.82) !important;
  border-top: 1px solid rgba(151, 115, 57, 0.30) !important;
  border-radius: 0 0 11px 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .form-group label,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .input-header label,
html[data-theme="book"] #inputModal .legend-item,
html[data-theme="book"] #inputModal .record-verse {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
html[data-theme="book"] #inputModal .help-text,
html[data-theme="book"] #inputModal .example,
html[data-theme="book"] #inputModal .no-records-msg,
html[data-theme="book"] #inputModal .record-chapters {
  color: var(--ink-soft) !important;
}

html[data-theme="book"] #inputModal .chapter-count-input-group,
html[data-theme="book"] #inputModal .mode-legend,
html[data-theme="book"] #inputModal .record-item {
  background: rgba(255, 252, 242, 0.34) !important;
  border: 1px solid rgba(151, 115, 57, 0.28) !important;
  border-radius: 7px !important;
  box-shadow: inset 3px 0 rgba(176, 138, 60, 0.12) !important;
}
html[data-theme="book"] #inputModal .record-item:hover {
  background: rgba(255, 252, 242, 0.54) !important;
  border-color: rgba(151, 115, 57, 0.42) !important;
  transform: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input[type="text"],
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input[type="number"],
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input[type="date"],
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) select {
  color: var(--ink) !important;
  background: rgba(255, 253, 246, 0.56) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(118, 86, 45, 0.52) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.48) !important;
  font-family: var(--serif) !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input:focus,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) select:focus {
  outline: 2px solid rgba(176, 138, 60, 0.34) !important;
  outline-offset: 1px !important;
  border-bottom-color: #8b672f !important;
  background: rgba(255, 253, 246, 0.82) !important;
  box-shadow: none !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input::placeholder {
  color: rgba(78, 61, 43, 0.56) !important;
}

html[data-theme="book"] #inputModal .help-icon {
  color: #8a672e !important;
}
html[data-theme="book"] #inputModal .example {
  background: rgba(176, 138, 60, 0.07) !important;
  border-left-color: rgba(139, 103, 47, 0.66) !important;
  border-radius: 2px !important;
}

html[data-theme="book"] #inputModal .toggle-btn {
  color: #664a2b !important;
  background: rgba(255, 252, 242, 0.52) !important;
  border: 1px solid rgba(151, 115, 57, 0.38) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  transform: none !important;
}
html[data-theme="book"] #inputModal .toggle-btn.text-mode::before {
  content: "✎";
  font-size: 15px;
}
html[data-theme="book"] #inputModal .toggle-btn.dropdown-mode::before {
  content: "▤";
  font-size: 14px;
}
html[data-theme="book"] #inputModal .toggle-btn.chapter-mode::before {
  content: "¶";
  font-size: 15px;
}
html[data-theme="book"] #inputModal .toggle-btn.active {
  color: #3e2918 !important;
  background: linear-gradient(180deg, #ead8ae, #d7bc7e) !important;
  border-color: rgba(139, 103, 47, 0.78) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62), 0 1px 3px rgba(80, 53, 25, 0.18) !important;
  transform: none !important;
}
html[data-theme="book"] #inputModal .toggle-btn:hover:not(.active),
html[data-theme="book"] #inputModal .toggle-btn:focus-visible:not(.active) {
  background: rgba(226, 207, 168, 0.56) !important;
  transform: none !important;
}

html[data-theme="book"] #inputModal .record-index {
  color: #674819 !important;
  background: rgba(176, 138, 60, 0.15) !important;
  border: 1px solid rgba(151, 115, 57, 0.24) !important;
  border-radius: 3px !important;
}
html[data-theme="book"] #inputModal .record-chapters {
  background: rgba(142, 43, 43, 0.08) !important;
  border-radius: 2px !important;
}
/* 삭제 버튼의 🗑️ 는 JS 가 textContent 로 박아 CSS 로 지울 수 없다 —
   도움말 ? 와 **같은 방식**을 쓴다(글자 크기 0 + 가짜 요소로 활자 다시 그리기).
   title 속성은 그대로라 화면 낭독기에는 영향이 없다. */
html[data-theme="book"] #inputModal .delete-record-btn {
  font-size: 0 !important;
}
html[data-theme="book"] #inputModal .delete-record-btn::before {
  content: "✕";
  font-size: 13px;
  font-family: var(--serif);
  line-height: 1;
}
html[data-theme="book"] #inputModal .delete-record-btn {
  color: #fff7e7 !important;
  background: #7d312c !important;
  border: 1px solid rgba(77, 25, 21, 0.48) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .submit-btn,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .add-btn {
  color: #3f2c19 !important;
  background: linear-gradient(180deg, #ead8ae, #d7bc7e) !important;
  border: 1px solid rgba(139, 103, 47, 0.56) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.64), 0 2px 5px rgba(79, 53, 27, 0.16) !important;
}
html[data-theme="book"] #inputModal .submit-btn::before {
  content: "✦ ";
}
html[data-theme="book"] #inputModal .add-btn::before {
  content: "+ ";
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .cancel-btn {
  color: #65503a !important;
  background: rgba(255, 252, 242, 0.42) !important;
  border: 1px solid rgba(118, 86, 45, 0.34) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .submit-btn:hover,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .add-btn:hover,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .cancel-btn:hover {
  transform: none !important;
  filter: brightness(0.98);
}

html[data-theme="book"] #inputModal .resize-handle {
  border-color: rgba(139, 103, 47, 0.52) !important;
  background-color: rgba(176, 138, 60, 0.24) !important;
}
html[data-theme="book"] #inputModal .resize-handle-se {
  background-image:
    linear-gradient(135deg, transparent 54%, rgba(116, 83, 39, 0.68) 54%, rgba(116, 83, 39, 0.68) 59%, transparent 59%),
    linear-gradient(135deg, transparent 70%, rgba(116, 83, 39, 0.68) 70%, rgba(116, 83, 39, 0.68) 75%, transparent 75%) !important;
}

html[data-theme="book"] #inputModal.popover-style .modal-content::before {
  border-bottom-color: #efe2c9 !important;
  filter: drop-shadow(0 -1px 1px rgba(72, 47, 23, 0.20)) !important;
}
/* ── 20-1. 껍데기로 안 덮이는 조각들 — **역할별로 한 벌씩** ────────────
   위 목록이 막·카드·머리·바닥·입력칸·주버튼/취소버튼을 이미 맡는다. 여기 남은 것은
   모달마다 **이름이 다른** 같은 역할들이다. 이름이 다를 뿐 역할이 같으므로,
   모달별로 쓰지 않고 **역할별로 묶어** 한 벌씩만 쓴다.
   ⚠️ 색은 전부 이 파일 맨 위 토큰에서 온다 — 여기에 새 색을 지어내지 않는다. */

/* (1) 주 버튼 — 초록(기록)·빨강(로그아웃)·보라(QR·축하·년월 이동)로 흩어져 있던 것 */
html[data-theme="book"] :is(
  .logout-confirm-btn,
  .celebration-close-btn,
  .kakaopay-btn,
  .view-header .nav-btn
) {
  background: linear-gradient(180deg, #5c3b23, var(--leather)) !important;
  background-image: linear-gradient(180deg, #5c3b23, var(--leather)) !important;
  color: #f6ecd8 !important;
  border: 1px solid rgba(151, 115, 57, 0.55) !important;
  box-shadow: 0 2px 6px rgba(24, 14, 8, 0.28) !important;
  font-family: var(--serif) !important;
}
/* ⚠️ 카카오페이 송금은 브랜드색(#FEE500)이 곧 식별표다. 가죽으로 덮으면 못 알아본다 —
      이것만 예외로 두되 글자·테두리는 책의 잉크로 맞춘다. */
html[data-theme="book"] .kakaopay-btn.link-btn {
  background: #f7e6a6 !important;
  background-image: none !important;
  color: var(--ink) !important;
}

/* (2) 보조 버튼 — 주황(목표 미리설정)·보라(월·년·연대 고르기) */
html[data-theme="book"] :is(
  .preset-btn,
  .month-btn, .year-btn, .decade-btn,
  .view-title
) {
  background: rgba(255, 252, 242, 0.62) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid rgba(151, 115, 57, 0.40) !important;
  box-shadow: none !important;
  font-family: var(--serif) !important;
}
/* 지금 고른 것 — 선택색은 토큰이 정한다(공용 CSS에 테마색을 박지 않는다는 원칙) */
html[data-theme="book"] :is(.month-btn, .year-btn, .decade-btn).current,
html[data-theme="book"] :is(.month-btn, .year-btn, .decade-btn).selected,
html[data-theme="book"] :is(.month-btn, .year-btn, .decade-btn).active {
  background: var(--leather) !important;
  background-image: none !important;
  color: #f6ecd8 !important;
  border-color: var(--gilt) !important;
}

/* (3) 닫기 버튼 */
html[data-theme="book"] .payment-modal-close {
  color: var(--ink-soft) !important;
  font-family: var(--serif) !important;
}

/* (4) ⚠️ **`color` 로는 절대 안 바뀌는 것** — 글자에 그라데이션을 깔고
       `-webkit-text-fill-color: transparent` 로 비워 둔 제목들. 세 속성을 다 되돌려야 한다.
       (`.month-title` 에서 이미 한 번 겪은 유형이다 — 이 파일 109줄 참고) */
html[data-theme="book"] :is(
  .amount-display,
  .donation-header h1,
  .donation-header-compact h1,
  .celebration-title
) {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
}

/* (5) 옅은 판때기들 — 회색·연보라 상자를 종이 톤으로 */
html[data-theme="book"] :is(
  .payment-amount,
  .donation-details,
  .donation-amount-section,
  .usage-list,
  .faq-item,
  .celebration-stats
) {
  background: rgba(255, 252, 242, 0.55) !important;
  background-image: none !important;
  border: 1px solid rgba(151, 115, 57, 0.30) !important;
  color: var(--ink) !important;
}
html[data-theme="book"] .usage-list { border-left: 4px solid var(--gilt) !important; }
html[data-theme="book"] .donation-header,
html[data-theme="book"] .donation-header-compact {
  border-bottom-color: rgba(151, 115, 57, 0.40) !important;
}

/* (6) 축하 오버레이 — 카드는 위 목록이 종이로 만들었다. 그 위 글자가 아직 흰색이라
       종이 위에서 안 보인다(공용 celebration.css 가 `color: white` 로 박아 둔다). */
html[data-theme="book"] :is(
  .celebration-message,
  .celebration-stat-item
) {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
/* 색종이 — 형광 자홍·청록을 금박·세피아로 눕힌다(한 벌로, nth-child 20벌을 덮는다) */
html[data-theme="book"] .confetti {
  background: var(--gilt) !important;
}
html[data-theme="book"] .confetti:nth-child(3n) { background: var(--leather) !important; }
html[data-theme="book"] .confetti:nth-child(3n + 1) { background: var(--ribbon) !important; }

/* (8) 본문 글자·링크 — 공용 CSS 가 회청색(#374151)과 보라(#667eea)를 **태그에 직접**
       걸어 둔 자리들. 클래스가 없어 위 규칙들이 못 닿는다. 역할별로 한 벌로 묶는다.
   ⚠️ 넓게 잡으면 안 된다(`div`·`span` 까지 잡으면 가죽 버튼 안 글자까지 먹으로 뒤집힌다).
      실제로 어긋난 자리만 이름으로 짚는다 — 실측으로 고른 목록이다(2026-08-27). */
html[data-theme="book"] :is(
  .logout-message,
  .usage-list, .usage-list li,
  .faq-item, .faq-item p, .faq-item strong,
  .donation-details summary,
  .donation-subtitle, .donation-usage-list, .donation-usage-list li,
  .donation-faq, .donation-faq p, .donation-faq strong,
  .donation-thanks,
  .donation-note, .payment-notice
) {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) a {
  color: #7a5c2e !important;
}

/* (7) 결제 입력칸 — 위 목록의 input 규칙이 `#payment-modal` 안쪽까지 닿지만,
       payment.css 가 `#payment-form input` 으로 더 좁게 박아 둔 테두리만 남는다 */
html[data-theme="book"] #payment-form input {
  border: 1px solid rgba(151, 115, 57, 0.45) !important;
}

html[data-theme="book"] #inputModal.popover-style .modal-content.arrow-bottom::before {
  border-bottom-color: transparent !important;
  border-top-color: #efe2c9 !important;
  filter: drop-shadow(0 1px 1px rgba(72, 47, 23, 0.20)) !important;
}

/* 낮은 가로 화면에서는 좌우 모서리 도크 사이가 비어 있다.
   월 막대를 그 자리에 내려 달력의 날짜 행을 덮지 않게 한다.
   설정을 펼치면 위의 더 구체적인 :has 규칙이 계속 122px로 피한다. */
@media (max-width: 899px) and (max-height: 500px) {
  html[data-theme="book"] .mobile-month-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  html[data-theme="book"] body {
    padding-bottom: 80px !important;
  }
}

/* ============================================================
   18. 색인·모바일 월 이동 교정 — 버튼을 얹지 않고 책배를 판다

   month-index 전체가 가죽 단면이고, ::before가 그 위의 종이 책배다.
   반복 마스크의 투명 반달 12개를 통해 아래 가죽이 보이므로 홈들이
   서로 떨어진 버튼이 아니라 한 장의 종이에서 실제로 파인 것으로 읽힌다.
   ============================================================ */
html[data-theme="book"] .month-index {
  display: grid !important;
  /* 칸 수는 변수로 받는다. 달력은 12(기본값), 성경 본문 읽기 화면은 22묶음이다.
     ⚠️ 값을 안 주면 12 — 달력 동작은 그대로다. */
  grid-template-rows: repeat(var(--index-count, 12), minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: linear-gradient(90deg, #29180f 0%, #50301d 58%, #21130c 100%);
  border-right: 1px solid rgba(25, 13, 8, 0.86);
  box-shadow:
    inset 8px 0 12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 235, 190, 0.10);
}
html[data-theme="book"] .month-index::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(80, 58, 30, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(225, 211, 181, 0.72), transparent 18%),
    var(--paper);
  /* 파인 홈의 크기도 변수로 받는다. 달력은 12칸에 두 글자('1월')라 31×14 로 충분하지만,
     성경 본문 읽기 화면은 23칸에 세 글자('창출레')라 더 넓고 낮아야 글자가 홈 안에 든다.
     ⚠️ 값을 안 주면 31px 14px — 달력 동작은 그대로다. */
  -webkit-mask-image:
    radial-gradient(ellipse var(--index-notch-w, 31px) var(--index-notch-h, 14px) at 100% 50%, transparent 0 92%, #000 100%);
  mask-image:
    radial-gradient(ellipse var(--index-notch-w, 31px) var(--index-notch-h, 14px) at 100% 50%, transparent 0 92%, #000 100%);
  -webkit-mask-size: 100% calc(100% / var(--index-count, 12));
  mask-size: 100% calc(100% / var(--index-count, 12));
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  filter: drop-shadow(-2px 0 1px rgba(92, 65, 34, 0.38));
}
html[data-theme="book"] .month-index-link,
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible,
html[data-theme="book"] .month-index-link.is-current {
  z-index: 1;
  width: 100% !important;
  min-height: 0;
  padding: 0 3px 0 14px;
  justify-content: flex-end;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
  color: #d7c18d;
  opacity: 0.88;
}
html[data-theme="book"] .month-index-link::before {
  display: none;
}
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible {
  color: #fff0bc;
  opacity: 1;
}
html[data-theme="book"] .month-index-link:focus-visible {
  outline: 1px solid rgba(222, 183, 91, 0.9);
  outline-offset: -2px;
}
html[data-theme="book"] .month-index-link.is-current {
  color: #ffe5a0;
  opacity: 1;
  text-shadow: 0 1px 1px #160b07, 0 0 5px rgba(219, 171, 67, 0.72);
}
html[data-theme="book"] .month-index-link.is-current::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9ae50, transparent);
}

@media (max-width: 899px) {
  html[data-theme="book"] .page-right {
    display: block !important;
    position: relative;
  }

  html[data-theme="book"] .month-index {
    height: auto;
    bottom: 72px;
  }

  /* 월 이동 줄은 16절의 **하단 고정(플로팅 알약)** 그대로 둔다 —
     예전엔 여기서 정적 배치로 되돌렸는데, 후원·설정처럼 항상 아래 떠 있는 것이
     사용자 결정이다(2026-08-31). body 바닥 여백도 16절 것이 유효해야 한다. */
}

/* 표제 아래 쌍선·실선 → 끝이 흐려지는 한 줄 */
html[data-theme="book"] .login-header,
html[data-theme="book"] .register-header,
html[data-theme="book"] .release-title {
  border-bottom-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.26) 12%,
      rgba(120, 90, 45, 0.26) 88%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;
  background-size: 100% 1px !important;
}

@media (max-width: 899px) and (max-height: 500px) {
  /* 낮은 가로 화면의 우측 아래 설정 손잡이가 4·5월 색인을 덮는다.
     색인이 시작되기 전인 우측 위로 올려 월 라벨과 누르기 영역을 모두 지킨다. */
  html[data-theme="book"] body:has(.month-index) .fixed-dock {
    top: 10px !important;
    bottom: auto !important;
  }
  /* ⚠️ 손잡이만 위로 올리면 안 된다. 설정 카드(.dock-items)는 손잡이 **바닥**에 붙어
        위로 자라도록(bottom:0) 되어 있어서, 손잡이가 맨 위로 가면 카드가 화면 밖으로
        솟는다 — 780x390 에서 카드가 y=-100 부터 시작해 도움말·테마 두 줄이 통째로
        안 보였다(2026-08-27 실측). 손잡이가 위에 있으면 카드도 **아래로** 자라야 한다. */
  html[data-theme="book"] body:has(.month-index) .fixed-dock .dock-items {
    top: 0 !important;
    bottom: auto !important;
  }
  html[data-theme="book"] .month-index {
    height: min(70vh, 320px);
  }
}


/* ============================================================
   19. 실물 thumb-indexed Bible 기준 교정 (2026-08-24)

   실제 색인은 검은 버튼을 책 위에 붙이지 않는다.
   종이 책배에서 안쪽으로 파인 밝은 통로의 끝에 검은 반원 라벨이 있다.
   이 화면에서는 달력 폭을 지키기 위해 12개 홈을 한 열로 곧게 배열한다.
   ============================================================ */
html[data-theme="book"] .page-right .calendar-frame {
  margin-right: clamp(38px, 3.4vw, 44px);
}

html[data-theme="book"] .month-index {
  width: clamp(38px, 3.4vw, 44px);
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="book"] .month-index::before {
  display: none;
}

html[data-theme="book"] .month-index-link,
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible,
html[data-theme="book"] .month-index-link.is-current {
  position: relative;
  width: 100% !important;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  outline: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
  opacity: 1;
}

/* 종이를 도려낸 통로 — 바깥 책배에서 반원 라벨까지 이어지는 밝은 절삭면 */
html[data-theme="book"] .month-index-link::before {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -1px;
  width: 31px;
  height: clamp(19px, 2.4vh, 24px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(180deg,
      rgba(174, 151, 111, 0.72) 0%,
      #fff9e9 18%,
      #eadcc1 68%,
      rgba(145, 119, 78, 0.52) 100%);
  box-shadow:
    inset 1px 2px 3px rgba(82, 57, 27, 0.26),
    inset 0 -2px 2px rgba(255, 255, 255, 0.62),
    -1px 0 1px rgba(100, 72, 38, 0.20);
}

/* 통로 안쪽 끝의 검은 반원 라벨 */
html[data-theme="book"] .month-index-link::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  bottom: auto;
  width: 27px;
  height: clamp(17px, 2.1vh, 21px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(90deg, #24130c 0%, #4a2b1a 72%, #28160e 100%);
  box-shadow:
    inset 3px 0 4px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 232, 180, 0.12);
}

html[data-theme="book"] .month-index-label {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 2px;
  width: 24px;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  color: #d9bd78;
  font-family: var(--serif-display);
  font-size: clamp(8px, 0.82vw, 10px);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px 1px #110906;
  pointer-events: none;
}
html[data-theme="book"] .month-index-label b {
  font: inherit;
  font-weight: 500;
}
html[data-theme="book"] .month-index-label small {
  font-size: 0.68em;
  color: inherit;
}
html[data-theme="book"] .month-index-link:hover::after,
html[data-theme="book"] .month-index-link:focus-visible::after {
  background: linear-gradient(90deg, #321b10, #684226 72%, #2a170e);
}
html[data-theme="book"] .month-index-link.is-current::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  width: 27px;
  height: clamp(17px, 2.1vh, 21px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, #3a2113, #79502b 72%, #321b10);
  box-shadow:
    inset 3px 0 4px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(221, 174, 77, 0.58),
    0 0 4px rgba(205, 156, 60, 0.30);
}
html[data-theme="book"] .month-index-link.is-current .month-index-label {
  color: #ffe291;
}

/* 실제 책에서는 현재 위치보다 앞선 색인이 넘긴 종이 묶음과 함께 오른쪽 책배에서 사라진다.
   이 UI에서는 과거 월로 돌아가는 기능을 남겨야 하므로, 클릭 영역은 유지하고 잔상처럼 비친다.

   ⚠️ 예전엔 링크 **전체**에 opacity 를 걸었다. opacity 는 자식이 되돌릴 수 없어서
      라벨(글자)과 홈(그림)이 **같이** 종이 쪽으로 흐려졌고, 그러면 둘의 대비가 무너진다 —
      실측 1.77:1 로 누를 수 있는 것이 안 읽혔다(2026-08-27, WCAG AA 는 4.5:1).
      opacity 를 올려서 푸는 방법은 0.85 는 되어야 4.5 를 넘어(4.88:1) **잔상 연출이 사라진다.**
   ⭐ 그래서 흐리는 대상을 **그림(홈·로젠지)으로만** 좁힌다. 잔상은 그대로 두고 글자만 건져낸다.
      흐려진 로젠지는 밝은 베이지(rgb 167~181)가 되므로 라벨은 금박이 아니라 **먹**이어야 읽힌다. */
html[data-theme="book"] .month-index-link.is-past::before,
html[data-theme="book"] .month-index-link.is-past::after {
  opacity: 0.38;
}
html[data-theme="book"] .month-index-link.is-past:hover::before,
html[data-theme="book"] .month-index-link.is-past:hover::after,
html[data-theme="book"] .month-index-link.is-past:focus-visible::before,
html[data-theme="book"] .month-index-link.is-past:focus-visible::after {
  opacity: 0.72;
}
/* ⚠️ 그림자는 금박 글자를 검은 로젠지에서 띄우려던 것이다. 밝아진 로젠지 위에서는
      글자를 흐리게만 만든다. 이번달 탭(밝은 금박 on 가죽)과는 **색으로** 구분된다. */
html[data-theme="book"] .month-index-link.is-past .month-index-label {
  color: var(--ink);
  text-shadow: none;
}

@media (max-width: 899px) {
  html[data-theme="book"] .page-right .calendar-frame {
    margin-right: 40px;
  }
  html[data-theme="book"] .month-index {
    right: 0;
    width: 40px;
    bottom: 72px;
    height: auto;
  }
}

/* ── themes/dark.css ── */
/* ============================================================
   자동 테마의 어두운 판 — 기본(classic) 화면을 어둡게.
   ⭐ 스코프는 한 벌뿐이다:
      html[data-theme="classic"][data-sys="dark"]     — '자동' + 기기(브라우저)가 어두움
      (data-sys 는 base.html 부트 스크립트가 그리기 전에 찍는다)
   별도 '다크'·'자동' 선택지는 2026-09-02 에 뺐다 — 옛 쿠키 dark/auto 는 themes.py 가
   classic 으로 흡수한다.
   ⚠️ 새 배치는 만들지 않는다 — 색·명암만 바꾼다. 배치가 갈라지면 테마마다
      버그가 두 벌이 된다(플레이북 룰 6).
   ============================================================ */

html[data-theme="classic"][data-sys="dark"] {
  color-scheme: dark;
}

html[data-theme="classic"][data-sys="dark"] body {
  background: linear-gradient(135deg, #191d2e 0%, #241f36 100%);
  color: #dfe4f5;
}

html[data-theme="classic"][data-sys="dark"] .container {
  background: rgba(24, 27, 41, 0.96);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── 머리말·월 제목 ── */
html[data-theme="classic"][data-sys="dark"] .header {
  border-bottom-color: rgba(139, 156, 255, 0.14);
}
html[data-theme="classic"][data-sys="dark"] .month-title,
html[data-theme="classic"][data-sys="dark"] .header h1 {
  color: #eceffc;
}

/* ── 달력 ── */
html[data-theme="classic"][data-sys="dark"] .calendar-table th {
  background: linear-gradient(135deg, #3d4a86 0%, #4c3d78 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}
html[data-theme="classic"][data-sys="dark"] .calendar-table td {
  background: linear-gradient(135deg, #232840 0%, #262b45 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
}
html[data-theme="classic"][data-sys="dark"] .calendar-table td:hover {
  border-color: rgba(139, 156, 255, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
html[data-theme="classic"][data-sys="dark"] .day-number {
  color: #9daeff;
}

/* ── 범례·버전 배지 ── */
html[data-theme="classic"][data-sys="dark"] .legend-container {
  background-color: #1e2338;
}

/* ── 통계 카드 ── */
html[data-theme="classic"][data-sys="dark"] .stat-box {
  background: linear-gradient(135deg, rgba(32, 36, 56, 0.95) 0%, rgba(28, 32, 50, 0.95) 100%);
  border-color: rgba(139, 156, 255, 0.14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── 항상 떠 있는 월 이동 줄 ── */
@media (max-width: 768px) {
  html[data-theme="classic"][data-sys="dark"] .mobile-month-nav {
    border-color: rgba(139, 156, 255, 0.3);
    background: rgba(26, 29, 46, 0.94);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

/* ── 모달·입력 ── */
html[data-theme="classic"][data-sys="dark"] .modal-content,
html[data-theme="classic"][data-sys="dark"] .goal-modal-content {
  background: #20243a;
  color: #dfe4f5;
}
html[data-theme="classic"][data-sys="dark"] input,
html[data-theme="classic"][data-sys="dark"] select,
html[data-theme="classic"][data-sys="dark"] textarea {
  background: #171a2b;
  color: #e5e9f8;
  border-color: rgba(139, 156, 255, 0.25);
}

/* ── 바닥 사업자 정보 ── */
html[data-theme="classic"][data-sys="dark"] .business-info-compact {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #8a93b4;
}

/* ── 설정 도크 카드 ── */
html[data-theme="classic"][data-sys="dark"] .dock-items {
  background: #20243a;
  color: #dfe4f5;
}

/* ── 어두운 바탕 위 글자 — 1차 캡처에서 안 읽히던 것들 ── */
html[data-theme="classic"][data-sys="dark"] .legend,
html[data-theme="classic"][data-sys="dark"] .legend-item,
html[data-theme="classic"][data-sys="dark"] .stat-header,
html[data-theme="classic"][data-sys="dark"] .stat-box {
  color: #d6dbf0;
}
html[data-theme="classic"][data-sys="dark"] .business-info-line a,
html[data-theme="classic"][data-sys="dark"] .policy-links a {
  color: #9daeff;
}
html[data-theme="classic"][data-sys="dark"] .stats-days,
html[data-theme="classic"][data-sys="dark"] .stat-header h3 {
  color: #d6dbf0;
}
html[data-theme="classic"][data-sys="dark"] #monthly-stats-text,
html[data-theme="classic"][data-sys="dark"] #yearly-stats-text {
  color: #d6dbf0;
}
/* 통계 카드 제목 — calendar.css 가 #374151 로 박아 두어 어두운 카드에서 대비 1.5 였다
   (2026-09-02 tools/darkscan.mjs 실측, PC·모바일 공통). */
html[data-theme="classic"][data-sys="dark"] .stat-title {
  color: #eceffc;
}