/* * presets.css — 병원별 본문 스킨 (10e, I-39). content.css가 공통 골격 + clean 기본 얼굴을 잡고, * 여기서 [data-preset="X"] 스코프로 editorial·warm 얼굴을 덮는다(clean은 오버라이드 없음). * * 특이성: [data-preset] :is(.prose,.note-editable) h2 = 0,3,1 > content.css .prose h2 = 0,1,1 → 프리셋 승리. * 순수 CSS(Tailwind 아님) — {% static %} 직접 링크. 색은 --gb-* 토큰(테마와 직교). * data-preset은 (프론트=context_processor / 대시보드 상세·편집=body_preset 블록). * .prose(발행·미리보기)와 .note-editable(Summernote, iframe:False) 동시 타깃 → 에디터=발행본 일치. * * clean — content.css 기본 그대로(담백·정보형). * editorial — 브랜드·에디토리얼: h2 좌측 악센트바 · ✓ 리스트 · 배경 인용박스 · 강한 요약/목차 카드. * warm — 따뜻·공감형: 라운드 · 파스텔 카드 · 부드러운 heading · accent 마커. */ /* ═══════════════════════════ editorial ═══════════════════════════ */ [data-preset="editorial"] :is(.prose, .note-editable) { line-height: 1.88; } /* h2: 하단 라인/마커 대신 좌측 악센트 바 */ [data-preset="editorial"] :is(.prose, .note-editable) h2 { border-bottom: 0; padding: 0.15rem 0 0.15rem 0.9rem; margin: 2.9rem 0 1.05rem; border-left: 4px solid var(--gb-primary, #1d4ed8); } [data-preset="editorial"] :is(.prose, .note-editable) h2::after { display: none; } [data-preset="editorial"] :is(.prose, .note-editable) h3 { color: var(--gb-primary, #1d4ed8); } /* 리스트: 네이티브 마커를 완전히 끄고(list-style:none) ::before ✓ 하나만 마커 위치에 그린다. 네이티브 마커가 물리적으로 없으므로 :marker/:before 이중 표시가 불가능하다(2026-07-21 사용자 지적). list-style-type 문자열 마커는 구형 Safari 미지원이라 ::before로 크로스브라우저 보장. */ [data-preset="editorial"] :is(.prose, .note-editable) ul { list-style: none; padding-left: 0; } [data-preset="editorial"] :is(.prose, .note-editable) ul > li { list-style: none; padding-left: 1.5rem; } [data-preset="editorial"] :is(.prose, .note-editable) ul > li::marker { content: ""; } [data-preset="editorial"] :is(.prose, .note-editable) ul > li::before { content: "\2713"; position: absolute; left: 0; top: 0.02rem; width: auto; height: auto; background: none; border-radius: 0; transform: none; font-weight: 800; color: var(--gb-primary, #1d4ed8); } /* 인용: 배경 박스 + 큰 따옴표 장식 */ [data-preset="editorial"] :is(.prose, .note-editable) blockquote { position: relative; margin: 1.75rem 0; padding: 1.4rem 1.5rem 1.15rem 2.75rem; border-left: 0; border-radius: 0.75rem; background: color-mix(in srgb, var(--gb-primary, #1d4ed8) 7%, #ffffff); color: #29303b; font-style: italic; } [data-preset="editorial"] :is(.prose, .note-editable) blockquote::before { content: "\201C"; position: absolute; top: 0.3rem; left: 0.85rem; font-size: 2.6rem; line-height: 1; font-family: Georgia, "Times New Roman", serif; color: var(--gb-primary, #1d4ed8); opacity: 0.45; } /* 핵심요약: 좌측 두꺼운 악센트 바 카드 */ [data-preset="editorial"] :is(.prose, .note-editable) .aipost-summary { border: 0; border-left: 5px solid var(--gb-primary, #1d4ed8); border-radius: 0 0.6rem 0.6rem 0; background: color-mix(in srgb, var(--gb-primary, #1d4ed8) 6%, #ffffff); } /* 목차: 좌측 악센트 바 */ [data-preset="editorial"] :is(.prose, .note-editable) .aipost-toc { border: 0; border-left: 4px solid var(--gb-primary, #1d4ed8); border-radius: 0 0.6rem 0.6rem 0; background: color-mix(in srgb, var(--gb-primary, #1d4ed8) 5%, #ffffff); } [data-preset="editorial"] :is(.prose, .note-editable) .aipost-toc > :first-child { color: var(--gb-primary, #1d4ed8); } /* FAQ 질문: 브랜드색 배경 헤더 */ [data-preset="editorial"] :is(.prose, .note-editable) .aipost-faq h3 { background: color-mix(in srgb, var(--gb-primary, #1d4ed8) 9%, #ffffff); border-color: color-mix(in srgb, var(--gb-primary, #1d4ed8) 20%, #ffffff); color: var(--gb-primary, #1d4ed8); } /* 표 헤더: 브랜드 강조 */ [data-preset="editorial"] :is(.prose, .note-editable) th { background: color-mix(in srgb, var(--gb-primary, #1d4ed8) 14%, #ffffff); } /* ═══════════════════════════ warm ═══════════════════════════ */ [data-preset="warm"] :is(.prose, .note-editable) { line-height: 1.85; color: #3a3f47; } /* heading: 짧은 라운드 accent 바 */ [data-preset="warm"] :is(.prose, .note-editable) h2 { border-bottom: 0; margin: 2.6rem 0 0.95rem; } [data-preset="warm"] :is(.prose, .note-editable) h2::after { width: 2.75rem; height: 3px; bottom: 0; border-radius: 2px; background: var(--gb-accent, #0ea5e9); } /* 리스트 마커: accent 점 */ [data-preset="warm"] :is(.prose, .note-editable) ul > li::before { background: var(--gb-accent, #0ea5e9); } /* 구분선: 옅은 점선(여백형) */ [data-preset="warm"] :is(.prose, .note-editable) hr { margin: 2.5rem auto; width: 42%; border-top: 2px dotted #e5e9f0; } /* 이미지: 더 둥글게 + 부드러운 그림자 */ [data-preset="warm"] :is(.prose, .note-editable) img { border-radius: 1.1rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } /* 인용/요약/목차/콜아웃: 라운드 파스텔 카드 */ [data-preset="warm"] :is(.prose, .note-editable) blockquote { border-left: 0; border-radius: 1.1rem; padding: 1.1rem 1.4rem; background: color-mix(in srgb, var(--gb-accent, #0ea5e9) 8%, #fffaf5); } [data-preset="warm"] :is(.prose, .note-editable) .aipost-summary { border: 0; border-radius: 1.1rem; background: color-mix(in srgb, var(--gb-primary, #1d4ed8) 6%, #fffaf5); } [data-preset="warm"] :is(.prose, .note-editable) .aipost-toc { border: 0; border-radius: 1.1rem; background: color-mix(in srgb, var(--gb-accent, #0ea5e9) 8%, #fffaf5); } [data-preset="warm"] :is(.prose, .note-editable) .aipost-faq h3 { border-radius: 0.9rem 0.9rem 0 0; background: color-mix(in srgb, var(--gb-accent, #0ea5e9) 8%, #fffaf5); } [data-preset="warm"] :is(.prose, .note-editable) .aipost-faq h3 + p { border-radius: 0 0 0.9rem 0.9rem; } [data-preset="warm"] :is(.prose, .note-editable) .aipost-callout { border-left: 0; border-radius: 1.1rem; background: color-mix(in srgb, var(--gb-accent, #0ea5e9) 9%, #fffaf5); }