/* ── 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); /* 설정 카드 버튼 — 캘린더 이동 버튼과 같은 반투명 종이·옅은 금갈색 테두리 */ --dock-option-bg: rgba(255, 253, 246, 0.62); --dock-option-border: rgba(150, 118, 62, 0.28); --dock-option-hover: rgba(232, 214, 176, 0.90); /* 실제 색인 성경의 구약(남색)·신약(적색) 탭. 중간색은 크림 글자와 4.5:1 이상이다. */ --book-index-old: #24364f; --book-index-old-edge: #17263b; --book-index-new: #7a2e36; --book-index-new-edge: #4f1f25; /* ── 활자 ──────────────────────────────────────────────── ⚠️ 예전엔 시스템 글꼴에만 기댔다(`"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); } /* ── 책 (가죽 표지 + 속지) ────────────────────────────── */ /* ⭐ 책이 화면에 안 차던 진짜 원인 — `.container` 의 max-width 가 아니라 **main 이 안 늘어난 것**. calendar.css 의 `body { display: flex; justify-content: center }` 때문에 `main#main-content` 가 flex 아이템이 되어 **내용 폭까지만** 자란다. max-width 는 상한일 뿐 넓히는 힘이 없어서, 2560x1440 화면에서 책이 1088px(화면의 43%)에 멈춰 있었다 (2026-09-08 사용자: "웨일로 켰을 때 캘린더랑 성경 모드 둘 다 화면에 꽉 안 찼다"). ⚠️ min-width: 0 이 없으면 flex 아이템이 내용보다 안 줄어들어 좁은 화면에서 넘친다. */ html[data-theme="book"] #main-content { flex: 1 1 auto; min-width: 0; } html[data-theme="book"] .container { position: relative; max-width: min(96vw, 1180px); margin: clamp(12px, 3vh, 40px) auto; /* ⭐ 가죽 여백은 **한 곳에서** 정한다 — 표지의 padding 과 종이(::before) 의 inset 이 같은 값이어야 내용이 종이 안에 앉는다. 예전에 좁은 폰에서 padding 만 조이고 inset 을 그대로 둬서 내용이 종이보다 좌우 7px 씩 넓어졌다(2026-09-09 사용자 지적, Flip6=360px). ⚠️ 이름은 반드시 --leather 와 **달라야** 한다. 예전에 여기서 `--leather` 를 길이로 덮었는데 그 이름은 위에서 **가죽 색**(#4a2f1e)으로 쓰이고 있어, 바로 아래 background 의 `var(--leather)` 가 색 자리에 길이를 받아 **background 롱핸드 전체가 무효**가 됐다. 표지 그라데이션이 한 번도 안 칠해졌고(계산값 background-image: none), 상속을 받는 자손들(릴리즈 노트 판번호 배지 등)의 배경까지 같이 죽었다(2026-09-10 실측). */ --cover-pad: clamp(16px, 2.6vw, 34px); /* ⭐ 종이 안쪽 여백 — 내용이 종이 가장자리에 붙지 않게 한다(2026-09-29 사용자: 성경책 테마에서는 항상 종이면 외곽 경계 안쪽에 여백이 조금 있었으면). 표지 여백(--cover-pad)과 따로 둬야 종이(::before) 위치는 그대로 두고 내용만 안으로 들인다. 실측(수정 전): 소개·약관·성경 목록은 폰·태블릿에서 좌우 1px, 릴리즈 노트는 모든 폭에서 사방 1px, 달력 범례 상자는 좌우 1px 이었다. ⚠️ 이 여백은 .container 의 padding 에 더하지 않는다. book-turn.js·read.js 가 종이 = content box (padding 을 뺀 상자)로 읽으므로, padding 을 늘리면 넘어가는 종이가 실제 종이보다 좁게 그려진다. 넘김이 없는 화면은 아래 `:not(.calendar-book):not(.read-book)` 에서, 달력은 지면 래퍼에서 준다. 성경 읽기는 본문 자체 여백이 이미 22px 이상이라(실측) 따로 주지 않는다. ⚠️ 책배 색인·가름끈처럼 종이 끝에 붙어야 하는 세간은 absolute 라 이 여백을 안 탄다. */ --paper-pad: clamp(10px, 1.8vw, 22px); padding: var(--cover-pad); 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: var(--cover-pad); 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:not(.calendar-book):not(.read-book) { padding: calc(var(--cover-pad) + var(--paper-pad)); } /* 달력은 지면 래퍼에 준다. 폰은 래퍼가 상자이고, 펼침면(≥900px)은 래퍼가 display: contents 라 두 지면(.page)이 받는다. 넘김 무대(body 직속 복제본)는 .calendar-book 밖이라 .bc-peel-stage--cal 로 따로 고른다 — 빠지면 끄는 동안만 여백이 0 이 되어 말씀 줄바꿈과 달력 칸이 바뀐다(2026-10-08 사용자 녹화). */ @media (max-width: 899px), (max-width: 999px) and (max-height: 500px) { html[data-theme="book"] .calendar-book-pages { padding-inline: var(--paper-pad); } } @media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) { html[data-theme="book"] :is(.calendar-book, .bc-peel-stage--cal) .page { padding-inline: var(--paper-pad); padding-bottom: var(--paper-pad); } } /* 가름끈 — 가죽 윗변에서 내려온다. ⭐ 끈은 가죽 경계 안쪽에만 있어야 한다(2026-09-29 사용자). 예전엔 top 을 음수로 줘 가죽 위로 최대 22px 튀어나왔다. 시작점만 가죽 윗변(0)으로 내리고 **끝점은 예전 자리 그대로** 둔다 — read.js 가 끈 끝(top+height)을 읽어 폰 색인을 그 아래로 내리므로, 끝이 움직이면 색인도 같이 밀린다. */ html[data-theme="book"] .container::after { content: ""; position: absolute; top: 0; right: clamp(28px, 6vw, 80px); width: clamp(10px, 1.6vw, 18px); height: calc(clamp(70px, 12vh, 130px) - clamp(10px, 2vh, 22px)); 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); } /* 읽기 화면의 월 제목은 **장 선택 버튼**이다. 위의 달력 제목 초기화(background:none!important)가 read.css의 은은한 버튼 바탕까지 지우지 않게 읽기 버튼에만 도로 넣는다. */ html[data-theme="book"] .read-ref.month-title { background: var(--read-ref-bg) !important; border-color: var(--read-ref-border) !important; } html[data-theme="book"] .read-ref.month-title:hover, html[data-theme="book"] .read-ref.month-title:focus-visible { background: var(--read-ref-hover) !important; } 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: 1000px), (min-width: 900px) and (min-height: 501px) { 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; } /* 읽은 날 — 채운 동그라미. ⭐ 2026-09-08 사용자 지시: 형광펜 자국(`linear-gradient(180deg, transparent 55%, --mark 55%)`)이 아래 45% 만 칠해서 **원의 아래쪽 반원만 채운 것처럼** 보였다 — "그냥 깔끔하게 원 모양으로 다 채워". ⚠️ 모양·크기는 '오늘'(1.9em 원)과 **같은 값**을 쓴다. 같은 자리의 같은 역할인데 규칙이 두 벌이면 결국 어긋난다(핸드북 0절 — 규칙 수를 줄여서 통일을 지킨다). ⚠️ 오늘이면서 읽은 날이면 이 규칙이 배경만 덮고 '오늘'의 붉은 테두리는 그대로 남는다. */ html[data-theme="book"] .calendar-table td.day-with-reading { background: none !important; } html[data-theme="book"] .day-with-reading .day-number { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--mark) !important; padding: 0; 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; /* ⚠️ 애드핏이 넣는 iframe 은 **320×50 고정**이라 쪽지의 안쪽 폭이 320 이어야 한다. border-box 로 두면 안쪽이 320−테두리−여백 = 306 이 되어 광고가 쪽지 밖으로 삐져나온다 (2026-09-08 사용자: "비로그인 시 하단 광고가 칸 내에 잘 들어가도록"). */ box-sizing: content-box; width: var(--ad-w); min-height: var(--ad-h); /* 종이 안쪽이 320 보다 좁은 폰에서도 광고를 **자르지 않는다** — 가운데를 기준으로 놓아 모자란 폭은 책 여백 쪽으로 고르게 넘긴다(자르면 광고가 잘려 보이고 정책에도 어긋난다). */ position: relative; left: 50%; transform: translateX(-50%) rotate(-0.5deg); margin: clamp(10px, 2vh, 22px) 0 !important; padding: 6px; background: #fffdf6; border: 1px solid rgba(120, 96, 60, 0.3); border-radius: 2px; box-shadow: 0 2px 6px rgba(60, 44, 26, 0.18), 0 0 0 6px rgba(246, 239, 226, 0.6); } /* ⭐ 좁은 폰(≤400px): 320px 고정 배너가 **판면 안에** 들어가도록 판면과 쪽지를 함께 조인다. 애드핏 배너는 320px 고정이라 판면이 그보다 좁으면 종이 여백을 먹는다. 광고를 줄이거나 자르는 것은 정책에 어긋나므로, 좁힐 수 있는 것은 판면 여백과 쪽지 장식뿐이다 (2026-09-08 사용자: "폰에서 광고가 양쪽 종이 여백 침범하는 것도 거슬린다"). 실측(판면 폭 / 쪽지 폭, 쪽지는 바깥 링까지 포함): 고치기 전 360px 311.6 / 338.5 → 좌우 13.5px 씩 침범 375px 324.0 / 338.5 → 좌우 7.3px 씩 침범 390px 338.4 / 338.5 → 좌우 0.1px 씩 침범 고친 뒤 360px 325.6 / 322.4 → 좌우 1.6px 씩 여유 375px 338.0 / 322.4 → 좌우 7.8px 씩 여유 390px 356.4 / 322.4 → 좌우 17.0px 씩 여유 ⚠️ **바깥 링(box-shadow 의 spread)은 `getBoundingClientRect` 에 안 잡힌다.** 그런데 경계가 또렷해 눈에는 그대로 보이므로, 링을 안 세고 재면 "판면에 들어감"으로 잘못 판정된다 (실제로 그렇게 재서 한 번 통과시켰다가 캡처를 보고 알았다). 좁은 폰에서는 링을 걷고 은은한 그림자만 남긴다. ⚠️ 판면 여백은 **광고가 있는 화면에만** 조인다. 로그인 사용자에게는 광고가 없으므로 조일 이유가 없다 — 여백은 이 테마의 대전제(실물 성경책)에 속한다. ⚠️ 세로 여백은 clamp 그대로 두고 **가로만** 조인다. ⚠️ 320px 화면(아이폰 SE 1 세대)은 판면을 0 으로 만들어도 320 이 안 들어간다 — 침범이 26.6px 에서 17.6px 로 줄 뿐이다. 그 폭까지 없애려면 250x250 규격뿐인데 높이가 250 이라 더 나쁘다. */ @media (max-width: 400px) { html[data-theme="book"] .container:has(.ad-banner) { /* 광고 쪽지가 차지하는 폭(320 + 테두리 2 + 그림자 3×2 = 328)이 종이에 들어갈 만큼만 조인다. 넉넉하면 min() 이 원래 여백을 그대로 쓰므로 375px 이상에서는 아무것도 안 바뀐다. 하한 6px 은 표지 안쪽 금박 테(clamp(5px, 0.7vw, 9px)) 보다 크게 둔 값이다 — 더 조이면 종이가 금박을 덮어 표지 장식이 사라진다. */ --leather-x: max(6px, min(var(--cover-pad), (96vw - 330px) / 2)); padding-inline: var(--leather-x); } /* 광고 쪽지만은 종이 여백까지 써야 320 규격이 들어간다. 자리가 남으면 가운데에 두고, 모자라면 종이 여백(--paper-pad)까지만 양옆으로 내민다. 다른 내용은 그대로 안쪽에 앉는다. (322px = 쪽지 안쪽 320 + 테두리 1×2) */ html[data-theme="book"] .calendar-book-pages .ad-banner { margin-inline: max(calc(-1 * var(--paper-pad)), calc((100% - var(--ad-w) - 2px) / 2)) !important; } /* ⭐ 종이도 같은 값으로 넓힌다. 이 두 줄이 없으면 여백만 좁아지고 종이는 그대로라 내용이 종이 밖으로 나간다 — 실제로 그 상태로 배포돼 있었다(2026-09-09). */ html[data-theme="book"] .container:has(.ad-banner)::before { left: var(--leather-x); right: var(--leather-x); } html[data-theme="book"] .ad-banner { padding: 0; /* 그림자를 좌우 3px 로 줄여 쪽지가 차지하는 폭을 낮춘다(그만큼 종이 여백이 남는다) */ box-shadow: 0 1px 3px rgba(60, 44, 26, 0.18); } } 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: 1000px), (min-width: 900px) and (min-height: 501px) { /* ⚠️ **한 건만** 보인다. 칸 안에서 글자가 놓일 자리는 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 이
안에 `.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; /* 링이 화면 밖으로 잘리지 않도록 표지 두께보다 큰 여백을 둔다. 가로는 auto — 네 방향을 같은 값으로 주면 max-width 카드의 남는 폭이 오른쪽에만 쌓여 가운데가 깨진다(/admin/password-resets 등, 2026-09-17). */ margin: clamp(14px, 3.4vw, 30px) auto !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; } /* 설정 손잡이(⚙) — 흰 원 대신 종이 쪽지색·가죽 글자. 값은 base.html 의 --dock-toggle-* 토큰이 읽는다. ⚠️ 옆의 .theme-switcher 는 건드리지 않는다(모든 테마에서 보여야 한다). */ html[data-theme="book"] { --dock-toggle-bg: rgba(243, 233, 214, 0.96); --dock-toggle-fg: var(--leather); --dock-toggle-border: rgba(120, 96, 60, 0.45); /* 설정 카드 안 그룹 구분선·제목(2026-09-30) — 기존 밑줄·보조글자 토큰을 그대로 쓴다 */ --dock-divider: var(--rule-strong); --dock-group-title-fg: var(--ink-soft); } /* 한/영 버튼 — 밑줄·활성 배경이 보라였다 */ 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; } /* 읽은 날 동그라미 — 위에서 1.9em 정사각형으로 잡았으므로 좌우 여백을 주면 타원이 된다. (형광펜이던 시절의 `padding: 0 0.22em` 을 걷는다, 2026-09-08) */ html[data-theme="book"] .day-with-reading .day-number { padding: 0 !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.62) !important; /* ⭐ 2026-09-08 사용자 요청: 흰 쪽지와 바탕 종이 사이의 **경계선을 흐린다.** 테두리를 옅히고, 같은 흰색을 밖으로 번지게 해 선이 종이로 녹아들게 한다. */ border: 1px solid rgba(120, 96, 60, 0.10) !important; box-shadow: 0 0 12px 8px rgba(255, 253, 246, 0.42) !important; } /* ⭐ 목표 칸의 **번짐**이 종이 밖으로 나가던 것 — 칸 자체는 판면 안인데(폭 325.6 / 판면 327.6) 흰 번짐이 15px 이라 좌우로 14px 씩 종이를 넘었다 (2026-09-08 사용자: "종이 사이즈랑 딱 맞는데 그 밖에 블러가 종이 밖으로 튀어나간다"). ⚠️ 번짐은 경계선을 녹이려고 사용자가 요청해 넣은 것이라(위 주석) 그대로 두고 **칸을 좁힌다.** ⚠️ 펼침면(≥900px)은 판면이 넓어 여유가 있으므로 건드리지 않는다. */ @media (max-width: 899px), (max-width: 999px) and (max-height: 500px) { html[data-theme="book"] { --book-stat-inset: 15px; } html[data-theme="book"] .stat-box { margin-left: var(--book-stat-inset) !important; margin-right: var(--book-stat-inset) !important; } /* 버전 버튼(범례 줄 오른쪽 끝)의 오른쪽 끝을 위 달력·아래 통계 칸의 오른쪽 끝에 맞춘다 (2026-09-30 사용자: "버전 버튼 우측끝이 위아래 요소의 우측끝과 맞았으면"). 통계 칸을 좁힌 값과 같은 변수를 써서, 한쪽만 바뀌어 다시 어긋나는 일을 막는다. */ html[data-theme="book"] .legend-container { padding-right: var(--book-stat-inset) !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: 1000px), (min-width: 900px) and (min-height: 501px) { /* ⚠️ `.calendar-book` 이 **꼭 있어야 한다.** `.container` 는 달력 화면만의 것이 아니다 — 릴리즈 노트 화면도 같은 클래스를 쓰는데 거기엔 지면(.page)이 없다. 조건 없이 걸었더니 뒤로가기 상자·제목·판번호가 두 열로 흩어지고 제목이 "업데이/트 내역"으로 접혔다 (2026-08-21 캡처). 지면이 있는 컨테이너에서만 펼친다. */ html[data-theme="book"] .container.calendar-book { 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; } /* 왼쪽 지면은 오른쪽(달력)보다 글이 성기다 — 위쪽에 붙여 두면 허전하지 않다 */ 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: 1000px), (min-width: 900px) and (min-height: 501px) { 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: 1000px), (min-width: 900px) and (min-height: 501px) { /* ⚠️ 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). 앞면·뒷면 층에 종이색을 깔지 않으면 접히는 동안 아래 새 면이 그대로 비친다. ============================================================ */ /* ⚠️ paint 를 가두면 무대 밖으로 나가는 종이가 잘린다. 무대는 이미 제 overflow:hidden 으로 화면 가장자리에서 자르므로 paint 가두기는 중복이고, 실물처럼 표지 밖으로 들리는 종이를 지운다 (2026-09-10). 레이아웃·스타일 가두기는 성능을 위해 남긴다. */ html[data-theme="book"] .bc-peel-stage { contain: layout style; } /* 넘기는 동안 표지가 자식을 자르지 않게 한다 — 무대는 body 에 붙이지만 촤르륵 밑장(.bc-riffle-base)은 아직 표지 안에 있다. */ html[data-theme="book"] .container.bc-peeling, html[data-theme="book"] .container.bc-turning { overflow: visible; } /* ⚠️ 폰 월 이동 줄은 fixed 인데도 **지면(.page-right, z-index:2)의 쌓임 맥락 안**에 갇혀 있다 (아래 1916 줄 참고). 무대가 표지 밖(body)으로 나간 뒤로는 그 갇힘 때문에 줄이 무대 아래로 내려가, 넘기기 시작하는 순간 줄이 통째로 사라졌다 — 화면 구성이 확 바뀌어 보인다 (2026-09-17 사용자: "글자 여백이 달라져서 어색하다", 첫 프레임 캡처로 확인). 넘기는 동안만 맥락을 풀어 줄을 화면 층(9985)으로 돌려놓는다. 지면끼리 실제로 겹치는 것은 이 줄뿐이라 다른 영향이 없다(1916 줄의 근거와 같다). */ html[data-theme="book"] .container.bc-peeling > .calendar-book-pages > .page-right, html[data-theme="book"] .container.bc-turning > .calendar-book-pages > .page-right { z-index: auto; } /* ⭐ 복제본은 **지금 화면에 이미 떠 있는 것의 사진**이다. 복제하면 CSS 애니메이션은 처음부터 다시 돈다 — 달력 칸에 걸린 `.fade-in`(opacity 0 → 1, 칸마다 0.05s 지연, calendar.js)이 되살아나, 넘기기 시작하는 순간 날짜가 사라졌다가 물결처럼 떠올랐다 (2026-09-17 사용자: "책장에 원래 있던 내용들이 모양이 달라진다", 실측 opacity 1 → 0.65). 무대 층(.bc-peel-*)은 JS 가 프레임마다 직접 그리므로 CSS 애니메이션을 쓰지 않는다. */ html[data-theme="book"] .bc-peel-stage *, html[data-theme="book"] .bc-riffle-base *, html[data-theme="book"] .bc-riffle-pile * { animation: none !important; } /* ⚠️ animation 만 끄면 `.fade-in { opacity: 0 }` 이 남아 내용이 아예 안 보인다. */ html[data-theme="book"] .bc-peel-stage .fade-in, html[data-theme="book"] .bc-riffle-base .fade-in, html[data-theme="book"] .bc-riffle-pile .fade-in { opacity: 1 !important; transform: none !important; } /* 복제본 안의 .read-flow 는 will-change:transform(read.css)을 물려받아 잎마다 합성 층을 하나씩 더 만든다 — 폰에서 층 수·GPU 메모리만 늘린다(깜빡임 후보, 2026-09-07). 복제본은 움직이지 않으니 층을 만들지 않는다. */ html[data-theme="book"] .bc-peel-stage .read-flow { will-change: auto; } html[data-theme="book"] .bc-peel-front, html[data-theme="book"] .bc-peel-cover { background: var(--paper); overflow: hidden; } /* ⭐ 덮개는 **제 쌓임 맥락**을 가져야 한다. 안 그러면 복제한 옛 달의 z-index 조각(달력 칸·머리글·통계 z=1~2)이 무대 안에서 위 층과 순서를 다투어, 덮개 위로 넘어오는 새 달 앞면(z 없음)보다 **위에** 그려진다 — 폰 다음달(역재생, 덮개가 있는 유일한 폰 경로)에서 새 종이가 반투명해 보이고 두 달 글자가 포개졌다(2026-10-07 사용자). */ html[data-theme="book"] .bc-peel-cover { isolation: isolate; } 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); } /* 뒷면 인쇄는 JS(peelDraw)가 .bc-peel-back-content 의 진하기를 낮춰 흐린다 — 종이색 겹을 덮으면 알약 버튼 같은 불투명한 조각이 그대로 남아 종이 위에 떠 보였다(2026-09-08). */ html[data-theme="book"] .bc-peel-shadow { overflow: hidden; } /* 명암 — 잎 크기의 층 3장. JS 가 접힘선의 방향(--peel-angle)과 그라데이션 선 위의 위치(--peel-pos)만 넣는다. 폭(--peel-w1/--peel-w2)은 무대를 만들 때 지면 폭 비율로 한 번 넣는다. ⚠️ 예전엔 대각선 2.2배 정사각형(폰 ~1700px²)을 프레임마다 돌려 놓았다 — 큰 합성 층 3개가 GPU 메모리를 먹고 cssText 를 통째로 다시 써 레이아웃까지 일으켰다(폰 웨일 '파바바박' 후보, 2026-09-07). 지금은 배경만 바뀐다. ⚠️ 인라인 그라데이션은 위 `[style*="linear-gradient"]` 규칙이 지우므로 반드시 여기 둔다. */ html[data-theme="book"] .bc-peel-shadow-g, html[data-theme="book"] .bc-peel-front-g, html[data-theme="book"] .bc-peel-back-g { will-change: opacity; } /* 제 층 — 배경이 바뀌어도 글자 층은 다시 안 그린다 */ html[data-theme="book"] .bc-peel-shadow-g { /* 들린 종이가 새 면에 드리우는 그림자(접힘선 바깥) */ background-image: linear-gradient(var(--peel-angle, 90deg), transparent calc(var(--peel-pos, 0px) - 1px), rgba(40, 25, 10, 0.34) var(--peel-pos, 0px), rgba(40, 25, 10, 0.20) calc(var(--peel-pos, 0px) + var(--peel-w1, 24px)), transparent calc(var(--peel-pos, 0px) + var(--peel-w2, 80px))); } html[data-theme="book"] .bc-peel-front-g { /* 앞면 접힘선 안쪽 — 종이가 굽는 자리 */ background-image: linear-gradient(var(--peel-angle, 90deg), transparent calc(var(--peel-pos, 0px) - var(--peel-w1, 30px)), rgba(40, 25, 10, 0.18) var(--peel-pos, 0px), transparent calc(var(--peel-pos, 0px) + 1px)); } html[data-theme="book"] .bc-peel-back-g { /* 뒷면 원통 명암 — 접힘선 가까이 밝고 멀수록 살짝 어둡다 */ background-image: linear-gradient(var(--peel-angle, 90deg), transparent calc(var(--peel-pos, 0px) - 1px), rgba(255, 255, 255, 0.30) var(--peel-pos, 0px), rgba(40, 25, 10, 0.16) calc(var(--peel-pos, 0px) + var(--peel-w1, 30px)), rgba(40, 25, 10, 0.06) calc(var(--peel-pos, 0px) + var(--peel-w2, 140px)), rgba(40, 25, 10, 0.06) 100%); } /* 잎·뒷면·덮개·그림자의 모서리 = 종이의 모서리(15-7 의 --paper-r). 읽기 화면은 잎이 종이 전체(폰) 또는 절반(펼침면)이라 바깥 모서리가 종이 모서리와 겹친다 — 사각 층이면 넘김이 시작되는 순간 종이 밖 가죽 위에 종이색 귀가 튀어나온다. 폰 본문은 왼쪽 책등이라 오른쪽만 둥글고, 폰 달력(`page-left`)은 오른쪽 책등이라 아래 899px 규칙에서 왼쪽만 둥글다. 펼침면: 오른쪽 장은 오른쪽만, 왼쪽 장(거울 무대)은 왼쪽만. */ /* ⭐ **달력·읽기 화면 모두**에 건다(2026-09-08 사용자: "모션에서만 종이 네 모서리가 각지게 나온다"). 쉬고 있는 종이는 모서리가 둥근데(15-7 --paper-r) 넘어가는 종이만 각지면 다른 물건으로 보인다. 책등 쪽은 각지고 바깥 쪽만 둥글다 — 폰은 화면별 면 방향, 펼침면은 잎이 어느 쪽 장이냐에 따른다. */ html[data-theme="book"] .bc-peel-front, html[data-theme="book"] .bc-peel-back, html[data-theme="book"] .bc-peel-shadow, html[data-theme="book"] .bc-peel-cover, html[data-theme="book"] .bc-riffle-base, html[data-theme="book"] .bc-riffle-pile { border-radius: 0 var(--paper-r) var(--paper-r) 0; } @media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) { /* 펼침면: 잎(오른쪽 장)은 오른쪽만, 덮개(왼쪽 장)는 왼쪽만 둥글다. 거울 무대는 서로 바뀐다. */ html[data-theme="book"] .bc-peel-cover, html[data-theme="book"] .bc-peel-stage--mirror .bc-peel-front, html[data-theme="book"] .bc-peel-stage--mirror .bc-peel-back, html[data-theme="book"] .bc-peel-stage--mirror .bc-peel-shadow { border-radius: var(--paper-r) 0 0 var(--paper-r); } html[data-theme="book"] .bc-peel-stage--mirror .bc-peel-cover { border-radius: 0 var(--paper-r) var(--paper-r) 0; } } /* ⭐ 달력 종이 위의 **가로 제스처는 우리 것**이라고 선언한다. 안 하면 브라우저가 가로 스와이프를 스크롤·뒤로가기로 가져가며 pointercancel 을 보내 넘김이 도중에 되돌아간다 (읽기 화면은 .read-spread 에 같은 선언이 있어 잘 됐다 — 달력에만 빠져 있었다, 2026-09-08). 세로는 그대로 스크롤한다. ⚠️ **책 전체(.container)에 건다.** 폰에서는 지면(.page-*)이 `display: contents` 라 상자가 없어 거기 건 touch-action 은 아무 효과가 없다 — 달력 격자 아래(통계·범례·광고 자리)에서만 브라우저가 가로 스와이프를 가져가 pointercancel 이 났다(2026-09-08 사용자가 자리를 짚어 주었다: "달력 일자가 적혀있는 높이에서는 잘 되는데 아랫쪽에서만 인식을 못하네"). 실측으로 확인: y=300 은 pointerdown→move…, y=700 은 pointerdown→move→**pointercancel**. 달력 화면에는 가로로 스크롤하는 것이 없으므로 책 전체에 걸어도 잃는 것이 없다. */ html[data-theme="book"] .container.calendar-book { touch-action: pan-y; } /* ⚠️ 폰의 지면 묶음(.calendar-book-pages)은 **세로 스크롤 상자**다. touch-action 은 손이 닿은 요소에서 가장 가까운 스크롤 상자까지의 조상만 합쳐 정하므로, 위 선언이 이 상자 안에서 시작한 손짓에는 닿지 않는다. 격자 아래 빈 자리에서 끌면 넘김이 시작되기도 전(40ms)에 웨일이 pointercancel 을 보냈다 (2026-10-07 플립 기록기: 71.5초·73.1초 두 번). 상자 자신에도 같은 선언을 건다. */ html[data-theme="book"] .container.calendar-book .calendar-book-pages { touch-action: pan-y; } /* ⚠️ 무대(넘어가는 종이)의 복제본에서 **화면에 떠 있는 것**은 지운다. 복제본은 종이의 일부로 함께 접히는데, 달 이동 줄은 화면에 고정된 조작 줄이라 종이에 한 벌 더 인쇄된 것처럼 보였다(2026-09-08 사용자 녹화로 드러남). 줄이 PC 에서도 보이게 되면서 지면(.page-right) 복제에 딸려 들어온 것이다. */ html[data-theme="book"] .bc-peel-stage .mobile-month-nav, html[data-theme="book"] .bc-riffle-base .mobile-month-nav, html[data-theme="book"] .bc-riffle-pile .mobile-month-nav { display: none !important; } /* ⭐ 폰(한 장 화면)의 월 색인은 **종이 책배에 파인 홈**이다(핸드북 §0-1 실물 기준) — 그 종이가 넘어가면 색인도 함께 넘어간다. 그래서 무대 복제본의 색인은 **지우지 않는다.** 대신 넘어가는 잎이 색인을 싣고 있는 동안에는 아래의 **진짜 색인을 감춘다** — 안 그러면 같은 탭이 두 벌 보이고, 지우기만 하면 넘기는 내내 색인이 사라진다(2026-09-08 사용자: "왼쪽으로 넘길 때 색인이 사라지네"). ⚠️ 경로를 **실제 DOM 그대로** 적을 것. `.container > .page` 로 적혀 있던 동안 이 규칙은 한 번도 맞지 않았다 — 사이에 `.calendar-book-pages` 래퍼가 있다. 넘기는 내내 색인이 두 벌 보였고, 겹쳐 있던 두 벌 중 한 벌이 종이와 함께 돌아 나가 **색인이 딴 자리로 튀는 것처럼** 보였다 (2026-09-23 사용자, 핸드북 §22). 무대는 body 에 붙으므로(peelMake) 복제본은 안 걸린다. */ html[data-theme="book"] .container.bc-turn-carries-index > .calendar-book-pages > .page .month-index { visibility: hidden; } /* ⭐ 넘김 중에도 **책의 세간은 제자리에 남는다**(2026-09-22 사용자 녹화: "애니메이션 중간에 이상한 장면"). 무대는 종이에 인쇄된 것만 복제하는데(read.js paperParts), 그 종이가 책등 그늘·책배 색인·가름끈이 있던 자리를 덮어 넘김이 시작되는 프레임에서 셋이 한꺼번에 사라졌다가 끝나면 돌아왔다 — 시작과 끝에서 두 번 튄다. 1280x800 실측: 책등 띠 가운데가 접힘 그늘 rgb(207,194,173) → 종이색 rgb(243,233,214) 로 평평해졌다. 실물에서 접힘 그늘·책배 홈·가름끈은 **책의 것**이고 넘어가는 장이 그 밑을 지난다 — 무대(9980) 위로 올린다. ⚠️ 9984(광고 도크)보다 낮게 둔다 — book-turn.js STAGE_Z 주석의 층 순서를 깨지 않는다. ⚠️ 폰 달력 월 색인은 여기 없다 — 그쪽은 잎이 색인을 싣고 아래 진짜 색인을 감추는 방식이다(바로 위 규칙). */ /* 책등 그늘은 여기서 올리지 않는다 — 잎 복제본에 실어 넘긴다(book-turn.js spineOnLeaf, 2026-10-07: 폰에서 잎 위로 그늘선이 올라왔다). */ html[data-theme="book"] :is(.container.bc-peeling, .container.bc-turning)::after { z-index: 9981; } html[data-theme="book"] :is(.container.read-book.bc-peeling, .container.read-book.bc-turning) > .book-index { z-index: 9981 !important; } /* ⭐ 펼침면 월 색인은 책의 것이다 — 읽기 화면 색인과 같이 무대 위에 제자리로 남긴다(핸드북 §22). 폰처럼 잎에 싣지 못하는 이유: 색인은 position:absolute 에 top/bottom/right 로 잡혀 있고 정지 상태의 기준 상자는 .container.calendar-book 인데(펼침면에서 .calendar-book-pages 는 display:contents 라 상자를 안 만든다), 무대 안에서는 복제된 .page-right 가 기준이 되어 값이 다시 풀린다 — 1280x800 실측 1152,143 44x432 → 1119,176 44x365 로 33px 어긋난 자리에 섰다(2026-09-23 사용자: "튄다"). 조상에 쌓임 문맥이 없어 올릴 수 있다(폰은 .calendar-book-pages 가 z-index:1 스크롤 상자라 못 올린다). */ @media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) { html[data-theme="book"] :is(.container.bc-peeling, .container.bc-turning) .month-index { z-index: 9981 !important; } /* 진짜 색인이 제자리에 남으니 무대 복제본의 색인은 지운다 — 두면 어긋난 자리에 한 벌 더 보인다. */ html[data-theme="book"] .bc-peel-stage .month-index, html[data-theme="book"] .bc-riffle-base .month-index, html[data-theme="book"] .bc-riffle-pile .month-index { visibility: hidden; } } 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; } /* 가림판(.bc-peel-shield)이 옛 면의 글자를 대신 보여 주는 동안 진짜 지면의 글자는 숨긴다 — 장 경계·색인 넘김에서 새 장으로 바뀐 글자가 무대보다 먼저 비치지 않게(2026-10-13 플립6). 종이·책등·색인은 그대로 보인다. 자리는 그대로 남아야 하므로(복제·측정) display 가 아니라 visibility 다. */ .read-book.bc-shielded .read-header, .read-book.bc-shielded .read-spread { visibility: hidden; } /* ============================================================ 고전 판면 (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. (걷어냄) 어미(魚尾) — 2026-09-08 ──────────────────── 책등 한가운데의 ▼▲ 는 고서(선장본)의 판심에 찍던 표다. **성경책에는 없다.** 이 앱의 대전제는 "실물 성경책"이므로(핸드북 맨 앞) 고서 장식은 여기 있을 자리가 아니다. 읽기 화면에서는 이미 걷었고("책등이 씹힌 것 같다", 2026-09-07), 달력에만 남아 있던 것을 사용자가 "저 위아래 화살표는 뭐냐"고 물어 같은 이유로 걷는다. 책등은 접힘 그늘 하나면 된다. */ /* ── 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 { 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; } /* 설정 카드 — 흰 유리 대신 책 위에 놓인 종이 쪽지로 */ 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 안