/* ═══ Glitter Books — 4가지 시그니처 테마 ═══ */ /* 1. 에디토리얼 팝 — 웜톤 + 코랄, 실용서/노하우 (기본값 = base.css) */ #book[data-theme="editorial"] { --font-disp:'Aggro','Pretendard',sans-serif; --font-body:'Pretendard','Noto Sans KR',sans-serif; } /* 2. 클래식 세리프 — 정통 책 조판, 블랙 리드 무채색 (삼성·NHN 절제 원칙 반영) */ #book[data-theme="classic"] { --bg:#ffffff; --bg2:#f6f5f1; --bg3:#eae8e2; --text:#202124; --muted:#414449; --muted2:#97968f; --border:#dcd7cc; --accent:#000000; --accent-dk:#000000; --accent-l:#EAE4D5; --accent-m:#B6B09F; --font-body:'Noto Serif KR',Georgia,serif; --font-disp:'Bookk Myungjo','Noto Serif KR',serif; --lh:1.95; } #book[data-theme="classic"] .cv-topbar, #book[data-theme="classic"] .bc-band { background:var(--text); } #book[data-theme="classic"] .cv-title { font-weight:900; letter-spacing:-0.01em; } #book[data-theme="classic"] .cv-block { background:var(--text); } #book[data-theme="classic"] .sn { background:var(--text); } #book[data-theme="classic"] h2.sh { border-left:none; padding-left:0; border-bottom:1px solid var(--border); padding-bottom:6px; font-weight:900; } #book[data-theme="classic"] .quote { background:transparent; border-left:2px solid var(--text); font-style:italic; } #book[data-theme="classic"] .copy::before { background:var(--text); } /* 3. 모던 미니멀 — 토스 무드: 차분한 신뢰 블루, 정보전달 (Toss 팔레트 번역) */ #book[data-theme="minimal"] { --bg:#ffffff; --bg2:#FAFCFE; --bg3:#F1F5F9; --text:#141a24; --muted:#1f2c3f; --muted2:#5d6a7c; --border:#F1F5F9; --accent:#526D82; --accent-dk:#27374D; --accent-l:#DDE6ED; --accent-m:#9DB2BF; --font-body:'Arita Dotum','Pretendard',sans-serif; --font-disp:'SUIT','Pretendard',sans-serif; --r:10px; --lh:1.85; } #book[data-theme="minimal"] .cv-topbar { height:4px; } #book[data-theme="minimal"] .cv-title { font-weight:800; letter-spacing:-0.04em; } #book[data-theme="minimal"] .cv-meta, #book[data-theme="minimal"] .cv-bot { border-color:var(--bg3); } #book[data-theme="minimal"] .ph { border-bottom-width:1px; border-color:var(--bg3); } #book[data-theme="minimal"] .sn { border-radius:50%; } #book[data-theme="minimal"] .copy { background:#0f1222; } /* 4. 감성 에세이 — 바탕체 + 크림/세이지, 에세이/라이프스타일 */ #book[data-theme="essay"] { --bg:#faf7f0; --bg2:#f1ede2; --bg3:#e5dfd0; --text:#3a4038; --muted:#5f6a5c; --muted2:#a8b0a2; --border:#d8d3c2; --accent:#89986D; --accent-dk:#5F6B48; --accent-l:#F6F0D7; --accent-m:#C5D89D; --warn:#b0834a; --warn-l:#f7f0e3; --warn-text:#6b4f26; --font-body:'Gowun Batang',serif; --font-disp:'OwnglyphPDH','Gowun Batang',serif; --lh:2.1; --para-gap:14px; } #book[data-theme="essay"] .cv-topbar { height:3px; } #book[data-theme="essay"] .cv-hero { align-items:center; text-align:center; } #book[data-theme="essay"] .cv-title { font-size:42px; font-weight:700; line-height:1.35; } #book[data-theme="essay"] .cv-label { margin-bottom:6mm; } #book[data-theme="essay"] .cv-block { background:var(--accent-dk); } #book[data-theme="essay"] h2.sh { border-left:none; padding-left:0; text-align:center; font-weight:700; margin-top:24px; } #book[data-theme="essay"] h2.sh::after { content:''; display:block; width:28px; height:1px; background:var(--accent); margin:10px auto 0; } #book[data-theme="essay"] .ph { border-bottom-width:1px; } #book[data-theme="essay"] .quote { background:transparent; border-left:none; text-align:center; padding:16px 24px; } #book[data-theme="essay"] .quote p { font-weight:400; font-style:italic; } #book[data-theme="essay"] .sn { border-radius:50%; background:var(--accent); } /* 5. 다크 테크 — 단색 다크 + 틸 1도, 개발서적 조판 (그라데이션·글로우·배지 없음) */ #book[data-theme="tech"] { --bg:#ffffff; --bg2:#F0F5F5; --bg3:#E2ECEC; --text:#101820; --muted:#44505A; --muted2:#94A1A8; --border:#DCE8E8; --accent:#0D7377; --accent-dk:#0A5B5E; --accent-l:#E6F4F4; --accent-m:#7FC9C9; --warn:#BE123C; --warn-l:#FDF0F3; --warn-text:#881337; --font-body:'Noto Sans KR','Pretendard',sans-serif; --font-disp:'Paperlogy','Pretendard',sans-serif; --r:3px; --lh:1.9; } #book[data-theme="tech"] .cover, #book[data-theme="tech"] .bc { background:#0C1116!important; } #book[data-theme="tech"] .sn { background:var(--accent); border-radius:50%; } #book[data-theme="tech"] .copy { background:#10161C; border:1px solid #0F5B5E; } #book[data-theme="tech"] .copy::before { content:'복사해서 붙여넣기'; background:#14FFEC; color:#0C1116; border-radius:2px; } #book[data-theme="tech"] .copy code { color:#D9E2E8; } #book[data-theme="tech"] .quote { background:transparent; border-left:2px solid var(--accent); padding:12px 18px; } #book[data-theme="tech"] .bc-band { background:#14FFEC; height:3px; } #book[data-theme="tech"] .bc-title { color:#fff; } #book[data-theme="tech"] .bc-msg { color:rgba(255,255,255,.6); } #book[data-theme="tech"] .bc-author { color:#14FFEC; } /* 6. 프렌들리 팝 — 당근 무드: 화이트 캔버스 + 오렌지 단일 액센트, 친근·아이디어 (Karrot 팔레트 번역) */ #book[data-theme="friendly"] { --bg:#ffffff; --bg2:#f7f8f9; --bg3:#f2f3f4; --text:#1c1e23; --muted:#565e6d; --muted2:#878c95; --border:#dbdde2; --accent:#FA812F; --accent-dk:#D9560B; --accent-l:#FEF3E2; --accent-m:#FAB12F; --warn:#9b7821; --warn-l:#fff8e5; --warn-text:#6b5416; --font-body:'Nanum Square Round','Pretendard',sans-serif; --font-disp:'Cafe24Ssurround','Pretendard',sans-serif; --r:10px; --lh:1.9; } #book[data-theme="friendly"] .sn { border-radius:50%; } #book[data-theme="friendly"] h2.sh { border-left:none; padding-left:0; padding-bottom:7px; border-bottom:2px solid var(--accent-l); } #book[data-theme="friendly"] h2.sh::before { content:'● '; color:var(--accent); font-size:9pt; vertical-align:2px; } #book[data-theme="friendly"] .quote { border-radius:12px; border-left:none; background:var(--accent-l); padding:14px 18px; } /* 7. 스토리 — 갤러리 화이트 + 딥 바이올렛 포인트 소량, 개인 스토리·브랜딩 */ #book[data-theme="story"] { --bg:#ffffff; --bg2:#f2f1f6; --bg3:#e8e6ef; --text:#18161f; --muted:#4c4956; --muted2:#a09daa; --border:#dedce6; --accent:#424874; --accent-dk:#2E3355; --accent-l:#F4EEFF; --accent-m:#A6B1E1; --font-body:'MaruBuri','Noto Serif KR',serif; --font-disp:'Pyeong Chang Peace','Pretendard',sans-serif; --r:2px; --lh:2.0; --para-gap:12px; } #book[data-theme="story"] h2.sh { border-left:none; padding-left:0; font-weight:800; letter-spacing:-0.02em; } #book[data-theme="story"] h2.sh::after { content:''; display:block; width:28px; height:3px; background:var(--accent); margin-top:8px; } #book[data-theme="story"] .quote { background:transparent; border-left:none; padding:14px 10px; } #book[data-theme="story"] .quote p { font-size:calc(var(--fs-body) + 3pt); font-weight:700; color:var(--text); line-height:1.7; } #book[data-theme="story"] .quote p::before { content:'“ '; color:var(--accent); } #book[data-theme="story"] .quote p::after { content:' ”'; color:var(--accent); } /* 챕터 표제지는 딥 인디고 — 포자랩스의 '두 레지스터'(화이트 갤러리 ↔ 딥 다크) */ #book[data-theme="story"] .sn { border-radius:0; } /* 8. 블루프린트 — 웜 뉴트럴 + 헤어라인 그리드 + 세리프 디스플레이 + 마커 하이라이트 (지식 설계·시스템) */ #book[data-theme="blueprint"] { --bg:#fbfaf7; --bg2:#f3f1ec; --bg3:#eae7df; --text:#211d15; --muted:#57503f; --muted2:#a29a87; --border:#e3dfd4; --accent:#7895B2; --accent-dk:#52708F; --accent-l:#F5EFE6; --accent-m:#AEBDCA; --font-body:'KoPubDotum','Pretendard',sans-serif; --font-disp:'Noto Serif KR',Georgia,serif; --r:4px; --lh:1.95; } #book[data-theme="blueprint"] h2.sh { border-left:none; padding-left:0; font-weight:900; } #book[data-theme="blueprint"] h2.sh::before { content:'— '; color:var(--muted2); font-weight:400; } #book[data-theme="blueprint"] .quote { background:transparent; border-left:none; padding:12px 4px; } #book[data-theme="blueprint"] .quote p { display:inline; font-weight:700; background:linear-gradient(transparent 62%, #efe6cf 62%); box-decoration-break:clone; -webkit-box-decoration-break:clone; line-height:2.1; } #book[data-theme="blueprint"] .ph-l, #book[data-theme="blueprint"] .ph-r { font-family:'IBM Plex Mono','SF Mono',monospace; font-size:9.5px; letter-spacing:.1em; } #book[data-theme="blueprint"] .sn { border-radius:0; } /* 블루프린트 표지 */ #book .cvb { position:relative; } #book .cvb-grid { position:absolute; inset:9mm; border:1px solid var(--border); } #book .cvb-grid::before { content:''; position:absolute; inset:1.6mm; border:1px solid color-mix(in srgb, var(--border) 55%, transparent); } #book .cvb-in { position:relative; display:flex; flex-direction:column; height:100%; padding:20mm 18mm 14mm; } #book .cvb-kicker { display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono','SF Mono',monospace; font-size:21px; letter-spacing:.08em; color:var(--muted); } #book .cvb-kicker i { width:24px; height:1px; background:var(--text); flex-shrink:0; } #book .cvb-title { margin-top:18mm; font-family:var(--font-disp); font-size:calc(59px * var(--cvts,1)); font-weight:900; line-height:1.22; letter-spacing:-0.01em; color:var(--text); } #book .cvb-title .hl { color:var(--text); background:linear-gradient(transparent 58%, #efe6cf 58%); } #book .cvb-sub { margin-top:9mm; font-size:13px; color:var(--muted); line-height:2.05; max-width:64%; } #book .cvb-space { flex:1; } #book .cvb-bot { border-top:1.5px solid var(--text); padding-top:11px; display:flex; justify-content:space-between; align-items:baseline; } #book .cvb-author { font-size:12px; font-weight:700; color:var(--text); } #book .cvb-meta { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--muted2); } /* ═══ 테마별 표지 구조 ═══ */ /* 에디토리얼 — 한국 실용서 표지 (킥커/대형 타이틀/일러스트 존/하단 컬러 블록) */ #book .cv2 { display:flex; flex-direction:column; } #book .cv2-kicker { text-align:center; margin:18mm 20mm 0; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--accent-dk); } #book .cv2-kicker:empty { margin-top:24mm; } #book .cv2-title { text-align:center; margin:5mm 16mm 0; font-family:var(--font-disp); font-weight:900; line-height:1.15; letter-spacing:-0.02em; color:var(--text); } #book .cv2-title .hl { color:var(--accent); } #book .cv2-art { flex:1; display:flex; align-items:center; justify-content:center; padding:8mm 20mm; min-height:0; } #book .cv2-img { max-width:72%; max-height:100%; object-fit:contain; } #book .cv2-motif { position:relative; width:76mm; height:52mm; } #book .cv2-motif i { position:absolute; } #book .cv2-motif .m1 { left:4mm; bottom:2mm; width:30mm; height:30mm; border-radius:50%; background:var(--accent-l); border:2.5px solid var(--accent-m); } #book .cv2-motif .m2 { right:8mm; top:0; width:24mm; height:24mm; border-radius:50%; background:var(--accent); } #book .cv2-motif .m3 { left:30mm; bottom:6mm; width:26mm; height:13mm; border-radius:13mm 13mm 0 0; background:var(--text); } #book .cv2-motif .m4 { right:2mm; bottom:0; width:12mm; height:12mm; background:var(--accent-m); transform:rotate(45deg); } #book .cv2-block { flex-shrink:0; min-height:96mm; background:var(--accent-dk); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5mm; padding:12mm 22mm; text-align:center; } #book .cv2-q { font-size:17.5px; font-weight:800; color:#fff; line-height:1.6; padding-bottom:5mm; border-bottom:1px solid rgba(255,255,255,.25); } #book .cv2-q:empty { display:none; } #book .cv2-tags { font-size:11.5px; color:rgba(255,255,255,.75); line-height:1.9; } #book .cv2-author { border:1px solid rgba(255,255,255,.55); color:#fff; font-size:10.5px; font-weight:600; padding:5px 18px; border-radius:100px; } /* 클래식 — 정통 도서 속표지 (중앙 세로 조판 + 이중 괘선) */ #book .cv-classic { display:flex; align-items:stretch; } #book .cvc-frame { flex:1; margin:18mm 22mm; padding:14mm 10mm; display:flex; flex-direction:column; align-items:center; text-align:center; } #book .cvc-rules { width:100%; } #book .cvc-rules i { display:block; background:var(--text); } #book .cvc-rules i:first-child { height:3px; margin-bottom:3px; } #book .cvc-rules i:last-child { height:1px; } #book .cvc-rules:last-child i:first-child { height:1px; margin-bottom:3px; } #book .cvc-rules:last-child i:last-child { height:3px; } #book .cvc-label { margin-top:16mm; font-size:20px; letter-spacing:.35em; color:var(--muted2); text-transform:uppercase; } #book .cvc-title { margin-top:22mm; font-family:var(--font-disp); font-size:calc(74px * var(--cvts,1)); font-weight:900; line-height:1.36; color:var(--text); letter-spacing:-0.01em; max-width:88%; } #book .cvc-title .hl { color:var(--text); font-weight:700; } #book .cvc-orn { margin:12mm 0 10mm; font-size:20px; color:var(--muted2); } #book .cvc-sub { font-size:13px; color:var(--muted); line-height:2; max-width:65%; } #book .cvc-spacer { flex:1; } #book .cvc-author { margin-bottom:12mm; font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--text); text-transform:uppercase; } /* 미니멀 — 스위스 그리드 (초대형 타이포 + 하단 메타 행) */ #book .cv-minimal { display:flex; flex-direction:column; padding:16mm 18mm; } #book .cvm-rule { height:5px; background:var(--accent); width:38mm; flex-shrink:0; } #book .cvm-no { margin-top:8mm; font-size:13px; font-weight:700; color:var(--muted2); font-family:var(--font-disp); letter-spacing:.06em; } #book .cvm-title { margin-top:14mm; font-family:var(--font-disp); font-size:calc(85px * var(--cvts,1)); font-weight:800; line-height:1.0; letter-spacing:-0.045em; color:var(--text); max-width:92%; } #book .cvm-title .hl { color:var(--accent); } #book .cvm-mid { flex:1; display:flex; align-items:flex-end; justify-content:flex-end; } #book .cvm-sub { max-width:58%; text-align:right; font-size:12.5px; color:var(--muted); line-height:1.95; border-right:2px solid var(--accent); padding-right:14px; margin-bottom:14mm; } #book .cvm-bot { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--text); padding-top:12px; font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--muted); } #book .cvm-author { font-weight:800; color:var(--text); } /* 에세이 — 산문집 (여백 중심, 상단 1/3 소형 제목) */ #book .cv-essay { display:flex; } #book .cve-inner { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24mm 24mm 14mm; } #book .cve-label { font-size:22px; letter-spacing:.4em; color:var(--accent); text-transform:lowercase; margin-bottom:8mm; } #book .cve-title { font-family:var(--font-disp); font-size:calc(120px * var(--cvts,1)); font-weight:700; line-height:0.85; color:var(--text); max-width:90%; } #book .cve-title .hl { color:var(--accent); } #book .cve-line { width:22px; height:1px; background:var(--muted2); margin:7mm 0 5mm; } #book .cve-sub { font-size:20px; color:var(--muted); line-height:1.45; max-width:80%; } #book .cve-space { flex:1; } #book .cve-orn { font-size:15px; color:var(--accent-m); margin-bottom:4mm; } #book .cve-author { font-size:24px; color:var(--muted); letter-spacing:.14em; margin-bottom:4mm; } /* 테크 — 다크 개발서적 (단색 배경, 모노 캡션, 괘선) */ #book .cv-tech { display:flex; } #book .cvt-inner { flex:1; display:flex; flex-direction:column; padding:18mm 18mm 14mm; position:relative; z-index:2; } #book .cvt-top { display:flex; justify-content:space-between; align-items:baseline; font-family:'IBM Plex Mono','SF Mono',monospace; font-size:20px; letter-spacing:.14em; color:rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:11px; } #book .cvt-hero { flex:1; display:flex; flex-direction:column; justify-content:center; } #book .cvt-title { font-family:var(--font-disp); font-weight:800; line-height:1.1; letter-spacing:-0.025em; color:#fff; } #book .cvt-title .hl { color:#14FFEC; } #book .cvt-rule { width:40px; height:3px; background:#14FFEC; margin:20px 0; } #book .cvt-sub { font-size:13px; color:rgba(255,255,255,.6); line-height:1.95; max-width:62%; } #book .cvt-bot { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(255,255,255,.14); padding-top:12px; } #book .cvt-author { font-size:12.5px; font-weight:700; color:#fff; } #book .cvt-tags { font-family:'IBM Plex Mono','SF Mono',monospace; font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,.45); } /* ═══ 책 형식 (테마와 독립된 축 — 구조를 바꿈) ═══ */ /* 교재·노하우형 = 기본값 (페이지 헤더, 섹션 테두리, 박스 컴포넌트 활용) */ /* 에세이형 — 술술 읽히는 글 흐름: 헤더 제거, 문단 들여쓰기, 넉넉한 행간 */ #book[data-format="essay"] { --lh:2.05; --para-gap:0px; } #book[data-format="essay"] .ph { border-bottom:none; margin-bottom:14mm; padding-bottom:0; } #book[data-format="essay"] .ph-l { visibility:hidden; } #book[data-format="essay"] .ph-r { font-size:9px; letter-spacing:.2em; opacity:.6; } #book[data-format="essay"] .pi { padding:22mm 26mm 26mm; } #book[data-format="essay"] .pi > p { text-indent:0.6em; margin-bottom:2px; } #book[data-format="essay"] .pi > p:first-of-type, #book[data-format="essay"] h2.sh + p, #book[data-format="essay"] h3.sh3 + p { text-indent:0; } #book[data-format="essay"] h2.sh { border-left:none; border-bottom:none; padding-left:0; text-align:left; font-size:13.5pt; margin:26px 0 16px; } #book[data-format="essay"] h2.sh::after { content:''; display:block; width:24px; height:1px; background:var(--accent); margin:10px 0 0; } #book[data-format="essay"] .quote { background:transparent; border-left:2px solid var(--accent-m); text-align:left; padding:6px 0 6px 20px; } #book[data-format="essay"] .quote p { font-weight:500; font-style:italic; } #book[data-format="essay"] .ch-topics { display:none; } /* 표제지에 섹션 목록 없이 담백하게 */ /* 워크북·기록형 — 채우며 쓰는 책: 체크박스 카드화, 기록 공간 넉넉하게 */ #book[data-format="workbook"] { --para-gap:12px; } #book[data-format="workbook"] .chk { gap:8px; } #book[data-format="workbook"] .chk li { padding:10px 13px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); } #book[data-format="workbook"] .chk li::before { content:''; width:13px; height:13px; border:1.5px solid var(--muted2); border-radius:3px; margin-top:2px; } #book[data-format="workbook"] .wline { height:2.6em; } #book[data-format="workbook"] h2.sh { background:var(--accent-l); border-left:4px solid var(--accent); padding:9px 14px; border-radius:var(--r); } #book[data-format="workbook"] .ph-r::after { content:' · WORKBOOK'; font-size:9px; opacity:.6; } /* ── 밀도 (테마보다 나중에 선언되어 우선 적용) ── */ #book[data-density="compact"] { --lh:1.7; --para-gap:7px; --blk-gap:8px; } #book[data-density="airy"] { --lh:2.2; --para-gap:16px; --blk-gap:24px; } /* ── 사용자 표지 이미지 — 모든 테마 공통 ── */ #book .cv-user-wrap { display:block; position:relative; width:60%; margin:6mm auto; cursor:pointer; } #book .cv-user { display:block; width:100%; height:auto; } /* 비율 그대로 — 폭을 키우면 높이도 따라 커짐 */ #book .cv2-art .cv-user-wrap { margin:0; } #book .cv-user-wrap:hover:not(.cv-sel) { outline:2px dashed var(--accent, #888); outline-offset:4px; } /* 이미지 없을 때 표지에 뜨는 업로드 버튼 — 화면 전용, 인쇄엔 안 나감 */ #book .cv-ph { display:block; margin:6mm auto; padding:10px 24px; border:1.5px dashed rgba(125,125,138,.5); border-radius:100px; background:none; font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:rgba(115,115,128,.85); cursor:pointer; transition:border-color .2s, color .2s; } #book .cv-ph:hover { border-color:var(--accent, #1d1d1f); color:var(--accent, #1d1d1f); } #book .cv2-art .cv-ph { margin:0; } #book[data-theme="tech"] .cv-ph { border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.55); } @media print { #book .cv-ph { display:none !important; } } /* ═══ 간지(챕터 표제지) 공통 — 밝은 미니멀 (검정 넘버 박스 + 제목 + 소제목 리스트) ═══ */ #book .ch-page { border-top:none; background:var(--bg) !important; } #book .ch-bg-n { display:none; } #book .ch-c { justify-content:flex-start; padding-top:36mm; } #book .ch-tag { background:none; border:none; padding:0; margin-bottom:12mm; align-self:flex-start; letter-spacing:0; display:flex; } #book .ch-tag .ch-lbl { display:none; } #book .ch-tag .ch-num { width:15mm; height:15mm; background:var(--text); color:var(--bg); display:flex; align-items:center; justify-content:center; font-style:normal; font-family:var(--font-disp); font-size:19px; font-weight:700; } #book .ch-title { color:var(--text); } #book .ch-topics { margin-top:12mm; } /* ═══ 에세이 형식 강화 — 문학 단행본 문법 (형식 3종 구분 강화) ═══ */ /* 기본 본문·제목을 명조로 (사용자가 폰트를 직접 고르면 그 선택이 우선) */ #book[data-format="essay"] h2.sh, #book[data-format="essay"] h3.sh3 { font-family:var(--font-body); } /* 드롭캡은 조판 계산과 어긋나 제거 (ch-open이 배치 후 부여되는 속성이라 높이 불일치 유발) */ #book[data-format="essay"] .pi.ch-open > p:first-of-type { text-indent:0; } /* 컴포넌트 담백화 — 박스 대신 각주 문법 */ #book[data-format="essay"] .tip, #book[data-format="essay"] .warn { border-left:1px solid var(--border); background:none; padding:1px 0 1px 14px; } #book[data-format="essay"] .tip-t, #book[data-format="essay"] .warn-t { color:var(--muted); font-weight:600; letter-spacing:.04em; } #book[data-format="essay"] .chk { gap:4px; } #book[data-format="essay"] .chk li::before { width:4px; height:4px; border:none; border-radius:50%; background:var(--muted2); margin-top:10px; } #book[data-format="essay"] .sn { background:none; border-radius:0; color:var(--muted); font-size:13px; font-weight:600; min-width:20px; } #book[data-format="essay"] .tbl th { background:var(--text); } /* ═══ 서점 단행본 레퍼런스 반영 ═══ */ /* 1) 에세이 형식 — 풀컬러 간지 (진한 단색 + 흰 세리프 + 번호 뱃지) */ #book[data-format="essay"] .ch-page { background:var(--accent-dk)!important; border-top:none; } #book[data-format="essay"] .ch-page .ch-c { align-items:center; text-align:center; } #book[data-format="essay"] .ch-page .ch-bg-n { display:none; } #book[data-format="essay"] .ch-page .ch-tag { align-self:center; background:none; border:1px solid rgba(255,255,255,.55); border-radius:100px; padding:5px 16px; gap:6px; } #book[data-format="essay"] .ch-page .ch-tag .ch-lbl { display:inline; color:#fff; letter-spacing:.22em; font-size:10.5px; } #book[data-format="essay"] .ch-page .ch-tag .ch-num { width:auto; height:auto; background:none; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.22em; } #book[data-format="essay"] .ch-page .ch-title { color:#fff; font-weight:700; line-height:1.35; font-family:var(--font-body); } #book[data-format="essay"] .ch-page .ch-topics { display:none; } #book[data-format="essay"] .ch-page .ch-c::after { content:''; margin-top:12mm; width:7px; height:7px; background:rgba(255,255,255,.65); transform:rotate(45deg); align-self:center; } /* 3) 에세이 챕터 도입 ◆◆◆ 장식 */ #book[data-format="essay"] .pi.ch-open { position:relative; } #book[data-format="essay"] .pi.ch-open::before { content:''; position:absolute; top:44mm; left:50%; width:6px; height:6px; background:var(--accent-m); transform:translateX(-50%) rotate(45deg); box-shadow:-14px 0 0 var(--accent-m), 14px 0 0 var(--accent-m); } /* 패딩 영역에 절대배치 — 높이 영향 0 */ /* 4) 에세이 팁박스 — 색지 인용 페이지 무드 (점선 상하단 룰 + 은은한 배경) */ #book[data-format="essay"] .tip, #book[data-format="essay"] .warn { border-left:none; background:var(--accent-l); padding:16px 20px; text-align:center; border-top:1px dotted var(--accent-m); border-bottom:1px dotted var(--accent-m); } #book[data-format="essay"] .tip p, #book[data-format="essay"] .warn p { line-height:2; } /* 2) 실용서 형식 — 소제목 얇은 액센트 밑줄 (좌측 바 대신) */ #book[data-format="edu"] h2.sh { border-left:none; padding-left:0; padding-bottom:7px; border-bottom:none; position:relative; } #book[data-format="edu"] h2.sh::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--accent); } /* ═══════════ 서점 레퍼런스 기반 표지 리디자인 (2026-07) ═══════════ */ /* ── 에디토리얼 팝 ← "부자는 자본주의를 어떻게 읽는가": 종이 질감 + 리본 밴드 + 좌측 초대형 제목 + 세로 캡션 ── */ #book .cv2 { position:relative; background:#f7f6f1 !important; } #book .cv2-band { align-self:center; margin-top:18mm; background:#17171a; color:#fff; padding:10px 26px; font-size:21px; font-weight:600; letter-spacing:.1em; position:relative; } #book .cv2-band::before, #book .cv2-band::after { content:'✦'; font-size:8px; opacity:.7; position:absolute; top:50%; transform:translateY(-50%); } #book .cv2-band::before { left:7px; } #book .cv2-band::after { right:7px; } #book .cv2-band span { display:inline-block; padding:0 8px; } #book .cv2-band span:empty { min-width:60px; } #book .cv2-title { text-align:left; margin:20mm 26mm 0 22mm; line-height:1.26; letter-spacing:-0.01em; } #book .cv2-art { flex:1; display:flex; align-items:center; justify-content:center; padding:8mm 24mm; min-height:0; } #book .cv2-foot { padding:0 22mm 20mm; display:flex; flex-direction:column; gap:6mm; } #book .cv2-fq { font-size:14.5px; font-weight:800; color:var(--text); line-height:1.7; max-width:80%; } #book .cv2-fmeta { display:flex; align-items:baseline; gap:12px; border-top:1.5px solid var(--text); padding-top:9px; } #book .cv2-fauthor { font-size:12px; font-weight:800; color:var(--text); } #book .cv2-ftags { font-size:10.5px; color:var(--muted2); } @media print { #book .cv2-band:has(span:empty) { display:none !important; } } /* ── 모던 미니멀 ← "위버멘쉬": 단색 배경 + 초대형 제목 + 우측 대형 세로 워드마크 ── */ #book .cv-minimal { position:relative; background:color-mix(in srgb, var(--accent) 9%, #fff) !important; overflow:hidden; } #book .cv-minimal .cvm-no { margin:12mm 0 0 12mm; font-size:17px; font-weight:700; color:var(--accent-dk); letter-spacing:.02em; } #book .cv-minimal .cvm-title { margin:5mm 14mm 0 11mm; font-weight:800; line-height:1.32; letter-spacing:-0.03em; color:var(--accent-dk); } #book .cv-minimal .cvm-title .hl { color:var(--accent-dk); } #book .cv-minimal .cvm-sub { margin:5mm 14mm 0 12mm; font-size:18px; color:var(--accent-dk); opacity:.9; line-height:1.6; max-width:80%; text-align:left; border:none; padding:0; } #book .cvm-art { flex:1; display:flex; align-items:center; justify-content:center; padding:6mm 20mm; min-height:0; } #book .cv-minimal .cvm-bot { display:flex; justify-content:space-between; align-items:baseline; margin:0 12mm 11mm 12mm; padding-top:9px; border-top:1.5px solid var(--accent-dk); font-size:11.5px; color:var(--accent-dk); } #book .cv-minimal .cvm-author { font-weight:800; } #book .cv-minimal .cvm-tags { opacity:.7; } /* ── 다크 테크 ← "팔란티어": 홀로그램 포일 제목 + 세로 헤어라인 칼럼 ── */ #book .cvt-inner { border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14); margin:14mm 16mm; padding:8mm 11mm !important; } #book .cvt-title { background:linear-gradient(104deg,#e9e9f2 0%,#b8c6dd 16%,#f3e8d7 32%,#c8d7ea 48%,#efe4f2 62%,#bcd2e4 78%,#f0ead9 92%,#dfe4ee 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-print-color-adjust:exact; print-color-adjust:exact; } #book .cvt-rule { background:linear-gradient(90deg,#b8c6dd,#f3e8d7,#bcd2e4); } #book .cvt-sub { color:rgba(255,255,255,.62); } /* ── 스토리 ← "잡을 수 없는 세계사": 다크 + 포일 타이포 + 흩뿌린 장식 ── */ #book .cvs { position:relative; background:#1b1726 !important; display:flex; overflow:hidden; } #book .cvs-orn i { position:absolute; color:rgba(216,181,106,.5); font-style:normal; } #book .cvs-orn i:nth-child(1) { left:9%; top:7%; font-size:15px; color:rgba(255,255,255,.35); } #book .cvs-orn i:nth-child(2) { right:11%; top:13%; font-size:11px; } #book .cvs-orn i:nth-child(3) { left:16%; top:56%; font-size:13px; } #book .cvs-orn i:nth-child(4) { right:8%; top:44%; font-size:17px; color:rgba(255,255,255,.28); } #book .cvs-orn i:nth-child(5) { left:7%; bottom:22%; font-size:12px; } #book .cvs-orn i:nth-child(6) { right:16%; bottom:12%; font-size:14px; color:rgba(255,255,255,.3); } #book .cvs-orn i:nth-child(7) { left:44%; bottom:6%; font-size:11px; } #book .cvs-in { position:relative; flex:1; display:flex; flex-direction:column; padding:24mm 22mm 20mm; } #book .cvs-kicker { font-family:'IBM Plex Mono','SF Mono',monospace; font-size:17px; letter-spacing:.28em; color:#d8b56a; text-transform:uppercase; } #book .cvs-kicker:empty { min-height:1em; } #book .cvs-title { margin-top:19mm; font-family:var(--font-disp); font-weight:400; line-height:1.3; background:linear-gradient(160deg,#f2e2b6 0%,#d8b56a 34%,#f7ecd2 52%,#c49a4f 74%,#eedbaa 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-print-color-adjust:exact; print-color-adjust:exact; } #book .cvs-title .hl { background:none; -webkit-text-fill-color:#fff; color:#fff; } #book .cvs-sub { margin-top:9mm; font-size:12.5px; color:rgba(255,255,255,.6); line-height:2; max-width:70%; } #book .cvs-art { flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:6mm 0; } #book .cvs-bot { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(216,181,106,.35); padding-top:10px; } #book .cvs-author { font-size:12px; font-weight:700; color:#fff; } #book .cvs-tags { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em; color:#d8b56a; } #book[data-theme="story"] .cv-ph { border-color:rgba(216,181,106,.45); color:rgba(216,181,106,.8); } /* ── 프렌들리 팝 ← "마음의 기술": 크림 캔버스 + 바우하우스 도형 ── */ #book .cvf { position:relative; background:#faf6ee !important; overflow:hidden; } #book .cvf-shapes i { position:absolute; display:block; } #book .cvf-shuffle { position:absolute; right:8mm; top:8mm; z-index:6; background:#fff; border:1px solid #e4e4e8; border-radius:100px; padding:10px 18px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.14); font-family:'Pretendard',sans-serif; font-size:12px; font-weight:600; color:#1d1d1f; } #book .cvf-shuffle:hover { background:#f0f0f3; } @media print { #book .cvf-shuffle { display:none !important; } } #book .cvf-in { position:relative; flex:1; display:flex; flex-direction:column; padding:22mm 20mm 18mm; } #book .cvf-kicker { font-size:23px; font-weight:700; color:#d95436; letter-spacing:.02em; } #book .cvf-kicker:empty { min-height:1em; } #book .cvf-title { margin-top:5mm; font-family:var(--font-disp); font-weight:900; line-height:1.2; color:#241f18; letter-spacing:-0.01em; max-width:88%; text-shadow:2.5px 2.5px 0 #faf6ee, 4px 4px 0 rgba(36,31,24,.18); } #book .cvf-title .hl { color:var(--accent); } #book .cvf-art { flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:4mm 0; } #book .cvf-sub { align-self:flex-start; background:#7d9bd1; color:#fff; font-size:19px; font-weight:700; line-height:1.55; max-width:78%; padding:22px 32px; border-radius:6px 32px 32px 6px; margin-bottom:6mm; } #book .cvf-bot { margin-top:6mm; display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid #241f18; padding-top:9px; } #book .cvf-author { font-size:24px; font-weight:800; color:#241f18; } #book .cvf-tags { font-size:21px; color:#8d8375; } /* ── 블루프린트·클래식 ← "The Art of Distance": 세로 캡션 + 원단 질감 ── */ #book .cvc-title { letter-spacing:.01em; } /* ── 감성 에세이: 종이 질감 추가 ── */ /* ── 모던 미니멀 배경 도형 (흰색 지오메트리, 랜덤 생성) ── */ #book .cvm-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; } #book .cvm-shapes i { position:absolute; display:block; } #book .cv-minimal .cvm-no, #book .cv-minimal .cvm-title, #book .cv-minimal .cvm-sub, #book .cvm-art, #book .cv-minimal .cvm-bot { position:relative; z-index:1; } #book .cvm-shuffle { position:absolute; right:8mm; top:8mm; z-index:6; background:#fff; border:1px solid #e4e4e8; border-radius:100px; padding:10px 18px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.14); font-family:'Pretendard',sans-serif; font-size:12px; font-weight:600; color:#1d1d1f; } #book .cvm-shuffle:hover { background:#f0f0f3; } @media print { #book .cvm-shuffle { display:none !important; } } #book .cvf-shapes { pointer-events:none; } /* 모던 미니멀만 Color Hunt 원본 4색을 실제 조판에 사용한다. 하단 4분할 밴드는 표지와 챕터 간지 모두 사용하지 않는다. */ #book[data-theme="minimal"] { --p1:#27374D; --p2:#526D82; --p3:#9DB2BF; --p4:#DDE6ED; /* 배경은 하늘색 기운만 남기고 거의 흰색으로, 글자는 팔레트에서 가장 어두운 남색 계열로 */ --bg:color-mix(in srgb,var(--p4) 45%,#fff); --bg2:color-mix(in srgb,var(--p4) 70%,#fff); --bg3:color-mix(in srgb,var(--p3) 50%,#fff); --text:color-mix(in srgb,var(--p1) 90%,#000); --muted:var(--p1); --muted2:var(--p2); --border:color-mix(in srgb,var(--p3) 60%,#fff); --accent:var(--p2); --accent-dk:var(--p1); --accent-l:var(--p4); --accent-m:var(--p3); } /* 커버 — 남색(p1) 배경 + 밝은 하늘색 도형. 글자는 흰색·연한 하늘색으로 반전 */ #book[data-theme="minimal"] .cv-minimal { background:var(--p1)!important; } #book[data-theme="minimal"] .cvm-shapes i { background:color-mix(in srgb,var(--p4) 26%,transparent)!important; } #book[data-theme="minimal"] .cv-minimal .cvm-no { color:var(--p4); } #book[data-theme="minimal"] .cv-minimal .cvm-title { color:#fff; } #book[data-theme="minimal"] .cvm-title .hl { color:color-mix(in srgb,var(--p3) 55%,#fff); } #book[data-theme="minimal"] .cv-minimal .cvm-sub { color:var(--p4); opacity:.92; } #book[data-theme="minimal"] .cv-minimal .cvm-bot { color:var(--p4); border-color:color-mix(in srgb,var(--p4) 55%,transparent); } /* ═══════════ 8종 표지 안전 여백·타이포 보정 ═══════════ */ #book .cover [data-edit] { overflow-wrap:anywhere; text-wrap:balance; } /* 에디토리얼 팝 — 제목을 아래로 내리고 호흡을 넉넉하게 */ #book .cv2-band { margin-top:22mm; } #book .cv2-title { margin:28mm 30mm 0; line-height:1.38; } #book .cv2-art { padding-left:30mm; padding-right:30mm; } #book .cv2-foot { padding:0 30mm 24mm; gap:7mm; } #book .cv2-fq { line-height:1.9; max-width:86%; } /* 클래식 세리프 — 기울임 제거, 제목 1.4배 */ #book .cvc-frame { margin:24mm 28mm; padding:8mm 6mm; } #book .cvc-label { margin-top:6mm; } #book .cvc-title { margin-top:6mm; font-size:calc(104px * var(--cvts,1)); line-height:1.44; font-style:normal; transform:none; max-width:100%; } #book .cvc-title *, #book .cvc-title .hl { font-style:normal; transform:none; } #book .cvc-author { margin-bottom:4mm; } /* 모던 미니멀 — 제목 1.3배, 상·하단 문구 1.5배, 하단 기준선 복원 */ #book .cv-minimal { padding:20mm 24mm 18mm; } #book .cv-minimal .cvm-no { margin:7mm 0 0; font-size:25.5px; } #book .cv-minimal .cvm-title { margin:8mm 0 0; line-height:1.42; max-width:100%; } #book[data-theme="minimal"] .cvm-title .hl { color:color-mix(in srgb,var(--p3) 55%,#fff); } #book .cv-minimal .cvm-sub { margin:8mm 0 0; font-size:27px; line-height:1.75; max-width:90%; opacity:.86; } #book .cvm-art { padding-left:0; padding-right:0; } #book .cv-minimal .cvm-bot { margin:0; padding-top:12px; align-items:baseline; } /* 감성 에세이 — 일반 문구 2배, 제목 3배. 긴 제목은 아래 JS 안전 맞춤으로 표지 안에 유지 */ #book .cve-inner { padding:28mm 28mm 16mm; } #book .cve-label { font-size:44px; line-height:1.25; letter-spacing:.12em; margin-bottom:10mm; } #book .cve-title { font-size:calc(360px * var(--cvts,1)); line-height:1; max-width:100%; } #book .cve-sub { font-size:40px; line-height:1.35; max-width:92%; } #book .cv-essay .cv-ph { margin-top:4mm; margin-bottom:4mm; } #book .cve-orn { font-size:30px; } #book .cve-author { font-size:48px; } /* 다크 테크 */ #book .cvt-inner { margin:20mm 22mm; padding:10mm 13mm !important; } #book .cvt-title { line-height:1.28; } /* 스토리 */ #book .cvs-in { padding:30mm 28mm 24mm; } #book .cvs-title { line-height:1.4; } /* 블루프린트 — 제목 1.3배 */ #book .cvb-grid { inset:14mm; } #book .cvb-in { padding:26mm 24mm 20mm; } #book .cvb-title { font-size:calc(77px * var(--cvts,1)); line-height:1.32; } /* 프렌들리 팝 — 안전 여백, 킥커 1.5배, 나머지 문구 2배 */ #book .cvf-in { padding:28mm 26mm 24mm; z-index:2; } #book .cvf-kicker { font-size:34.5px; } #book .cvf-title { line-height:1.35; width:122%; max-width:none; transform:scaleX(.82); transform-origin:left top; margin-right:-22%; } #book .cvf-sub { font-size:25px; line-height:1.4; max-width:76%; padding:12px 17px; margin-bottom:5mm; } #book .cvf-art { padding:0; } #book .cvf-art .cv-ph { margin-top:4mm; margin-bottom:4mm; } #book .cvf-bot { gap:14px; align-items:flex-end; flex-wrap:wrap; } #book .cvf-author { font-size:24px; } #book .cvf-tags { font-size:21px; overflow-wrap:anywhere; } /* 본문 첫 페이지 상단 여백은 세 형식 모두 동일하게 유지한다. */ #book[data-format="essay"] .pi.ch-open, #book[data-format="edu"] .pi.ch-open, #book[data-format="workbook"] .pi.ch-open { padding-top:32mm; } /* 에세이 장식도 통일된 본문 시작선에 맞춰 당긴다. */ #book[data-format="essay"] .pi.ch-open::before { top:20mm; } /* ── 감성 에세이 표지 리디자인 — 단색 듀오톤 (좌측 대형 손글씨 제목 + 괘선 부제 + 하단 밴드) ── */ #book .cv-essay { background:color-mix(in srgb, var(--accent) 15%, #fbfaf4) !important; display:flex; flex-direction:column; } #book .cve-inner { flex:1; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:16mm 17mm 8mm; } #book .cve-label { font-family:var(--font-disp); font-size:30px; letter-spacing:0; text-transform:none; color:var(--accent-dk); margin-bottom:5mm; } #book .cve-title { font-size:calc(130px * var(--cvts,1)); line-height:0.9; color:var(--accent-dk); max-width:95%; } #book .cve-author { font-size:24px; color:var(--accent-dk); letter-spacing:.02em; margin:7mm 0 0; } #book .cve-art { flex:1; align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:0; padding:4mm 0; } #book .cve-sub { font-family:var(--font-body); font-size:21px; font-weight:700; color:var(--accent-dk); border-top:2.5px solid var(--accent-dk); border-bottom:2.5px solid var(--accent-dk); padding:12px 4px; line-height:1.8; max-width:82%; margin-bottom:7mm; } #book .cve-sub:empty { border:none; } #book .cve-band { flex-shrink:0; height:15mm; background:var(--accent-dk); } /* ── 표지 이미지 전체 채우기 모드 — 풀블리드 + 자동 스크림 + 흰 글자 (모든 테마 공통) ── */ #book .cv-full { position:absolute; inset:0; overflow:hidden; cursor:pointer; z-index:0; } #book .cv-full img { width:100%; height:100%; object-fit:cover; display:block; } #book .cv-full .cv-scrim { position:absolute; inset:0; display:block; background:linear-gradient(180deg, rgba(0,0,0,calc(var(--scrim,.45) * .7)) 0%, rgba(0,0,0,var(--scrim,.45)) 55%, rgba(0,0,0,calc(var(--scrim,.45) * 1.3)) 100%); -webkit-print-color-adjust:exact; print-color-adjust:exact; } #book .cv-fullbleed > *:not(.cv-full) { position:relative; z-index:2; } #book .cv-fullbleed *:not(img):not(.cv-scrim) { color:#fff !important; } #book .cv-fullbleed [data-edit] { text-shadow:0 1px 16px rgba(0,0,0,.45); } #book .cv-fullbleed .hl { color:#fff !important; } /* 그라데이션 클립 제목(스토리·테크)은 흰색 평면으로 */ #book .cv-fullbleed .cvs-title, #book .cv-fullbleed .cvt-title { background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important; } /* 사진 위에서 어색한 장식·배경 요소는 숨김 */ #book .cv-fullbleed .cvf-shapes, #book .cv-fullbleed .cvm-shapes, #book .cv-fullbleed .cvb-grid, #book .cv-fullbleed .cvs-orn, #book .cv-fullbleed .cve-band, #book .cv-fullbleed .cvf-shuffle, #book .cv-fullbleed .cvm-shuffle { display:none !important; } /* 괘선·박스류는 흰 계열로 */ #book .cv-fullbleed .cv2-fmeta, #book .cv-fullbleed .cve-sub, #book .cv-fullbleed .cvs-bot, #book .cv-fullbleed .cvf-bot, #book .cv-fullbleed .cv-minimal .cvm-bot, #book .cv-fullbleed .cvb-bot, #book .cv-fullbleed .cvc-rules i, #book .cv-fullbleed .cvt-rule { border-color:rgba(255,255,255,.6) !important; } #book .cv-fullbleed .cvc-rules i, #book .cv-fullbleed .cvt-rule { background:rgba(255,255,255,.8) !important; } #book .cv-fullbleed .cvf-sub { background:rgba(0,0,0,.35) !important; } #book .cv-fullbleed .cv2-band { background:rgba(0,0,0,.5) !important; } /* 포일(그라디언트 클립) 제목 — 편집 중엔 평면 흰색 (투명 글자 방지) */ #book .cvt-title[contenteditable]:focus, #book .cvs-title[contenteditable]:focus, #book .cvt-title [contenteditable]:focus, #book .cvs-title [contenteditable]:focus { background:rgba(255,255,255,.10) !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; -webkit-text-fill-color:#fff !important; color:#fff !important; }