/* business/ebook/salespage/public/styles.css */ :root { --ink: #0E0F12; --gold: #FFDA00; --paper: #FFFFFF; --muted: #6B6F76; --line: #E5E6E8; --line-dark: #2A2C31; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 17px; line-height: 1.8; word-break: keep-all; /* 한글 줄바꿈이 단어 중간에서 끊기지 않게 */ padding-bottom: 80px; /* 플로팅 바에 본문 마지막 줄이 가리지 않게 */ overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 블록의 직계 자식은 640px 칸에 가운데 정렬된다. * * ⚠️ 이 규칙의 특정도는 (0,1,0)이라 약하다. 직계 자식에 붙는 규칙이 `margin` 축약형을 * 쓰면 margin-inline까지 덮어써서 가운데 정렬이 조용히 풀린다 — 화면이 좁으면 * max-width가 안 걸려 티도 안 난다(모바일에서 못 보고 지나쳤다, 2026-08-07). * 직계 자식의 세로 여백을 손볼 때는 반드시 `margin-block`을 쓸 것. */ .block { padding: 64px 20px; } .block > * { max-width: 640px; margin-inline: auto; } .block > * + * { margin-top: 20px; } .block[data-theme="dark"] { background: var(--ink); color: #F2F3F5; } .block[data-theme="dark"] strong, .block[data-theme="dark"] .accent { color: var(--gold); } /* 버튼은 제 색을 갖는다. :not()이 없으면 이 규칙이 .btn-buy의 글자색을 이겨서 (특정도 0,2,1 대 0,1,0) 금색 배경 위에 금색 글자가 된다 — 완료 화면의 '책 내려받기'가 실제로 그렇게 안 보였다(2026-08-07). 판매 페이지의 구매 버튼은