/* ===========================================
MODAL — 노션 본문 렌더링
=========================================== */
.cc-pf-modal-body {
margin-top: 36px;
padding-top: 36px;
border-top: 1px solid rgba(245, 245, 240, 0.08);
color: rgba(245, 245, 240, 0.85);
font-size: 15px;
line-height: 1.75;
}
.cc-pf-modal-body-loading,
.cc-pf-modal-body-error {
padding: 24px 0;
text-align: center;
color: rgba(245, 245, 240, 0.4);
font-size: 13px;
}
.cc-pf-modal-body .cc-nb-p {
margin: 0 0 18px;
color: rgba(245, 245, 240, 0.78);
word-break: keep-all;
}
.cc-pf-modal-body .cc-nb-space { height: 14px; }
.cc-pf-modal-body .cc-nb-h1,
.cc-pf-modal-body .cc-nb-h2,
.cc-pf-modal-body .cc-nb-h3 {
font-family: 'Sandoll Rotary', 'Pretendard', sans-serif;
color: #f5f5f0;
letter-spacing: -0.02em;
word-break: keep-all;
font-weight: 400;
}
.cc-pf-modal-body .cc-nb-h1 { font-size: 28px; margin: 40px 0 18px; line-height: 1.25; }
.cc-pf-modal-body .cc-nb-h2 { font-size: 22px; margin: 36px 0 14px; line-height: 1.3; }
.cc-pf-modal-body .cc-nb-h3 { font-size: 18px; margin: 28px 0 12px; line-height: 1.4; }
.cc-pf-modal-body .cc-nb-ul,
.cc-pf-modal-body .cc-nb-ol {
margin: 0 0 18px;
padding-left: 24px;
color: rgba(245, 245, 240, 0.78);
}
.cc-pf-modal-body .cc-nb-ul li,
.cc-pf-modal-body .cc-nb-ol li {
margin-bottom: 8px;
line-height: 1.7;
}
.cc-pf-modal-body .cc-nb-quote {
margin: 24px 0;
padding: 4px 0 4px 20px;
border-left: 3px solid #faaf40;
color: rgba(245, 245, 240, 0.85);
font-style: italic;
}
.cc-pf-modal-body .cc-nb-callout {
display: flex;
gap: 14px;
padding: 18px 22px;
margin: 20px 0;
background: rgba(250, 175, 64, 0.08);
border-radius: 8px;
border-left: 3px solid #faaf40;
}
.cc-pf-modal-body .cc-nb-callout-icon { flex-shrink: 0; font-size: 20px; line-height: 1.6; }
.cc-pf-modal-body .cc-nb-callout-text {
flex: 1;
color: rgba(245, 245, 240, 0.85);
line-height: 1.65;
}
.cc-pf-modal-body .cc-nb-divider {
height: 1px;
background: rgba(245, 245, 240, 0.1);
border: 0;
margin: 40px 0;
}
.cc-pf-modal-body .cc-nb-figure {
margin: 28px 0;
border-radius: 8px;
overflow: hidden;
}
.cc-pf-modal-body .cc-nb-figure img {
display: block;
width: 100%;
height: auto;
}
.cc-pf-modal-body .cc-nb-figure figcaption {
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
font-size: 12px;
color: rgba(245, 245, 240, 0.5);
text-align: center;
}
.cc-pf-modal-body .cc-nb-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin: 28px 0;
border-radius: 8px;
overflow: hidden;
background: #000;
}
.cc-pf-modal-body .cc-nb-video iframe,
.cc-pf-modal-body .cc-nb-video video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.cc-pf-modal-body .cc-nb-bookmark {
display: block;
padding: 14px 18px;
margin: 18px 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: #faaf40;
font-size: 13px;
word-break: break-all;
transition: background 0.2s ease;
}
.cc-pf-modal-body .cc-nb-bookmark:hover { background: rgba(255, 255, 255, 0.07); }
.cc-pf-modal-body .cc-nb-inline-code {
padding: 2px 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.92em;
color: #faaf40;
}
.cc-pf-modal-body .cc-nb-code {
padding: 18px 22px;
margin: 18px 0;
background: #0a0a0a;
border-radius: 8px;
overflow-x: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.6;
color: rgba(245, 245, 240, 0.8);
}
.cc-pf-modal-body a {
color: #faaf40;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 700px) {
.cc-pf-modal-body { font-size: 14px; }
.cc-pf-modal-body .cc-nb-h1 { font-size: 22px; }
.cc-pf-modal-body .cc-nb-h2 { font-size: 18px; }
.cc-pf-modal-body .cc-nb-h3 { font-size: 16px; }
}
PORTFOLIO
우리가
우리가
만든 것들
기획부터 제작·운영·관리까지.
문화콘텐츠가 클라이언트와 함께 만들어 온 이야기들입니다.
—
Total Works
작품을 불러오는 중…