/* [29]============================================================
[Hero] 빨간색 콜아웃: 가로 스크롤 완전 제거 및 Full Width
============================================================ */
/* 1. 사이트 전체 가로 스크롤 방지 (핑크색 스크롤 발생 원인 차단) */
body {
overflow-x: hidden !important;
width: 100% !important;
position: relative !important;
}
/* 2. 히어로 컨테이너: 그리드 탈출 및 뷰포트 확장 */
div.notion-callout[class*="red"]:first-child {
width: 100vw !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 0 50px 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
overflow: hidden !important;
}
/* 3. SEO 텍스트 및 아이콘 완전 숨김 */
.notion-callout[class*="red"]:first-child .notion-callout__icon,
.notion-callout[class*="red"]:first-child h1,
.notion-callout[class*="red"]:first-child .notion-text,
.notion-callout[class*="red"]:first-child > .notion-callout__content > div:not([class*="collection"]) {
display: none !important; /* 공간 자체를 차지하지 않도록 변경 */
}
/* 4. 갤러리 본체: FLEX 기반 가로 슬라이드 강제 */
.notion-callout[class*="red"]:first-child .notion-collection-gallery {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
gap: 0 !important;
width: 100vw !important;
padding: 0 !important;
border-top: none !important;
scrollbar-width: none !important; /* Firefox 스크롤바 숨김 */
-ms-overflow-style: none !important; /* IE 스크롤바 숨김 */
}
/* Chrome/Safari 스크롤바 숨김 */
.notion-callout[class*="red"]:first-child .notion-collection-gallery::-webkit-scrollbar {
display: none !important;
}
/* 5. 개별 카드: 너비 100vw 고정 및 넘침 방지 */
.notion-callout[class*="red"]:first-child .notion-collection-card {
display: block !important;
flex: 0 0 100vw !important;
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
height: 75vh !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
scroll-snap-align: start !important;
position: relative !important;
}
/* 6. 이미지 커버 (타입 4 응용) */
.notion-callout[class*="red"]:first-child .notion-collection-card__cover,
.notion-callout[class*="red"]:first-child .notion-collection-card__cover img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
/* 7. [통합 제어] 텍스트 컨테이너 및 수직/수평 위치 제어 */
.notion-callout[class*="red"]:first-child .notion-collection-card__content {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important;
pointer-events: none;
background: rgba(0, 0, 0, 0.05) !important;
display: flex !important;
flex-direction: column !important;
/* [제어 1] 수직(위/중간/아래) 위치를 결정하세요 */
/* 옵션 1: center (중앙 - 기본값) */
/* 옵션 2: flex-start (상단 고정) */
/* 옵션 3: flex-end (하단 고정) */
justify-content: center !important;
/* [제어 2] 수평(좌측 정렬) 고정 */
align-items: flex-start !important;
/* [제어 3] 여백을 통한 미세 위치 제어 (Padding) */
/* 순서: 상 우 하 좌 (Top Right Bottom Left) */
/* 중앙 정렬 상태에서 위로 조금 올리고 싶다면 padding-top을 줄이고 bottom을 키우면 됩니다. */
padding: 0% 5% 0% 5% !important;
}
/* A. 제목(Title) 스타일 및 범위 제어 */
.notion-callout[class*="red"]:first-child .notion-property__title {
display: block !important;
/* [제어 3] 제목과 설명의 가로 범위를 일치시킵니다 */
width: 100% !important;
max-width: 1920px !important;
text-align: center !important;
margin: 0 0 30px 0 !important;
white-space: pre-wrap !important;
word-break: keep-all !important;
font-size: clamp(32px, 5vw, 60px) !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.2 !important;
/* 제목 그림자 추가: 깊고 은은하게 */
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7),
0 2px 5px rgba(0, 0, 0, 0.1) !important;
}
/* B. 설명(Description) 스타일 및 범위 제어 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) {
display: block !important;
/* [제어 4] 제목과 동일한 가로 범위를 갖도록 합니다 */
width: 100% !important;
max-width: 1920px !important;
text-align: left !important;
margin: 0 !important;
/* 설명 영역 전체에 그림자 효과 부여 */
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) .notion-property__text {
font-size: 20px !important;
line-height: 1.5 !important;
text-align: center !important;
display: block !important;
-webkit-font-smoothing: antialiased;
/* 혹시 모를 내부 span의 그림자 덮어쓰기 방지 */
text-shadow: none !important;
}
/* [최종 통합] 설명(속성1) 컬러, 크기, 굵기 전수 타격 */
/* 1. 하위의 모든 요소(span, div, style이 박힌 요소)를 한 번에 강제 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title),
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) *,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) [style*="color"],
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) [style*="font-size"] {
/* [컬러 제어] */
color: #ffffff !important;
fill: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
/* [크기 제어] 여기서 사이즈를 조절하세요 */
font-size: 18px !important;
line-height: 1.4 !important;
/* [굵기 제어] */
font-weight: 400 !important;
/* [기타 무력화] */
opacity: 1 !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* 2. 레이아웃 및 정렬 (디자이너님 설정 수치 유지) */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) {
display: block !important;
width: 100% !important;
max-width: 1920px !important;
text-align: center !important; /* 정렬 유지 */
margin: 0 auto !important;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}
.notion-callout[class*="red"]:first-child .notion-collection-card__property:not(.title) .notion-property__text {
/* 개별 텍스트 블록 레벨에서도 다시 한번 강조 */
font-size: 20px !important;
color: #ffffff !important;
line-height: 1.5 !important;
text-align: center !important;
display: block !important;
-webkit-font-smoothing: antialiased;
}
/* C. 다중선택(보라색 범위) 독립 좌표 제어 */
/* 1. 보라색 영역: 제목/설명 위치에 영향을 주지 않고 독립 이동 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
/* [범위 고정] */
width: fit-content !important;
min-width: 200px !important;
max-width: 800px !important;
margin: 0 auto !important; /* 기본 중앙 배치 */
/* [핵심: 독립 좌표 시스템] */
position: relative !important;
/* [위치 제어] 아래 top 수치만 조절하세요. */
/* 양수(+)면 아래로, 음수(-)면 위로 올라갑니다. */
/* 이 수치를 바꿔도 위쪽의 제목/설명은 꿈쩍도 하지 않습니다. */
top: 120px !important;
left: 0 !important;
background: transparent !important;
}
/* 2. [스타일 강제] 컬러, 크기, 버튼 디자인 (우선순위 최상위 타격) */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) a,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) .notion-property__multi_select__item,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) span,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) div,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) .notion-link {
/* 컬러 및 크기 강제 */
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 16px !important; /* 크기 제어 */
font-weight: 600 !important; /* 굵기 제어 */
/* 버튼 디자인 */
background-color: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 1) !important;
border-radius: 8px !important;
padding: 4px 12px !important;
margin: 4px !important;
/* 노션 기본 스타일 완전 박멸 */
text-decoration: none !important;
box-shadow: none !important;
}
/* d. 속성4 (왼쪽 버튼) & 속성5 (오른쪽 버튼) 독립 제어 */
/* 1. 공통 설정: 유령처럼 떠다니는 절대 좌표 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4),
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5) {
position: absolute !important;
z-index: 30 !important;
top: 50% !important; /* 화면 세로 중앙 기준 */
transform: translateY(-50%) !important; /* 정확한 수직 중앙 보정 */
display: flex !important;
align-items: center !important;
width: auto !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. 속성5: 왼쪽 배치 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4) {
left: 3% !important; /* 왼쪽 끝에서 거리 */
}
/* 3. 속성6: 오른쪽 배치 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5) {
right: 3% !important; /* 오른쪽 끝에서 거리 */
}
/* 4. 내부 텍스트 스타일 (인라인 스타일까지 강제 사격) */
/* 속성 5, 6 내부에서 'font-size' 스타일이 감지되는 모든 요소를 타격 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4) [style*="font-size"],
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5) [style*="font-size"],
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4) span,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5) span,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4) .notion-semantic-string,
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5) .notion-semantic-string {
/* [글자 크기] 테스트를 위해 100px로 설정했습니다. 반응하면 줄이세요! */
/* [폰트 스타일] */
color: rgba(255, 255, 255, 0.8) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
font-weight: 100 !important;
line-height: 1 !important;
/* 노션 기본 스타일 완전 박멸 */
text-decoration: none !important;
white-space: nowrap !important;
}
/* 부모 컨테이너가 글자를 가두지 못하도록 해제 */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4),
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5) {
overflow: visible !important;
font-size: 20px !important;
}
/* 1. 공통: 빨간색 콜아웃 뒤의 텍스트 블록들을 유령 레이어로 전환 */
.notion-callout[class*="red"]:first-child + .notion-text,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text + .notion-text {
position: absolute !important;
z-index: 100 !important;
width: auto !important;
min-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
pointer-events: auto !important;
}
/* 2. [왼쪽 버튼] 콜아웃 바로 뒤 첫 번째 텍스트 (주황색 -> 핑크색 위치로 이동) */
.notion-callout[class*="red"]:first-child + .notion-text {
/* [위치 제어] 우측 하단으로 이동 */
top: auto !important; /* 기존 중앙 정렬 해제 */
bottom: 190px !important; /* 핑크색 박스 높이 */
right: 5% !important; /* 핑크색 박스 가로 위치 */
left: auto !important;
transform: none !important; /* 중앙 보정 해제 */
text-align: right !important;
}
/* 3. [오른쪽 버튼] 두 번째 텍스트 */
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text {
top: 50vh !important;
right: 4% !important;
transform: translateY(-50%) !important;
}
/* 4. [하단 표식] 세 번째 텍스트 */
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text + .notion-text {
bottom: 50px !important;
right: 6% !important;
text-align: right !important;
}
/* 5. 텍스트 스타일 통합 제어 (모든 서식 강제 초기화) */
/* [핵심] 텍스트 블록 내부의 모든 요소(*), 스팬(span), 인라인 스타일을 통째로 타격 */
.notion-callout[class*="red"]:first-child + .notion-text *,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text *,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text + .notion-text *,
.notion-callout[class*="red"]:first-child + .notion-text [style],
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text [style],
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text + .notion-text [style] {
/* 1. 노션의 모든 기본 서식(컬러, 크기 등)을 강제로 무시 */
font-size: inherit !important;
color: inherit !important;
fill: inherit !important;
-webkit-text-fill-color: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
/* [개별 제어] 1, 2번 블록 (화살표/버튼 등 큰 글자) */
.notion-callout[class*="red"]:first-child + .notion-text,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text {
/* [컬러 & 크기] 여기서 제어하세요 */
color: rgba(255, 255, 255, 0.7) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1 !important;
}
/* ============================================================
[DEVELOPER MODE] 통합 레이아웃 가이드라인 v2
사용법: 아래의 가이드 활성화 코드를 확인하세요.
============================================================ */
/* 1. 히어로 전체 컨테이너 (Dark Grey Outline) */
.notion-callout[class*="red"]:first-child {
outline: 2px dashed #555 !important;
}
/* 2. 텍스트 컨테이너 전체 영역 (Blue - 카드 내부 전체) */
.notion-callout[class*="red"]:first-child .notion-collection-card__content {
background-color: rgba(0, 0, 255, 0.05) !important;
outline: 2px solid blue !important;
}
/* 3. 제목 & 설명 영역 (Red & Green) */
.notion-callout[class*="red"]:first-child .notion-property__title {
background-color: rgba(255, 0, 0, 0.1) !important;
outline: 1px solid red !important;
}
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(2) {
background-color: rgba(0, 255, 0, 0.1) !important;
outline: 1px solid green !important;
}
/* 4. [속성 기반] 사이드 버튼 & 하단 표식 (Purple - DB 속성 4,5,6) */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(4),
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(5),
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(6) {
background-color: rgba(128, 0, 128, 0.3) !important;
outline: 2px solid purple !important;
}
/* 5. [블록 기반] 외부 강제 제어 텍스트 (Orange - 텍스트 블록 1,2,3) */
.notion-callout[class*="red"]:first-child + .notion-text,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text,
.notion-callout[class*="red"]:first-child + .notion-text + .notion-text + .notion-text {
background-color: rgba(255, 165, 0, 0.3) !important;
outline: 2px solid orange !important;
}
/* 6. 다중선택 버튼 영역 (Cyan) */
.notion-callout[class*="red"]:first-child .notion-collection-card__property:nth-child(3) {
background-color: rgba(0, 255, 255, 0.2) !important;
outline: 1px solid cyan !important;
}
/* [22] 카드형 설명 - 핑크색 콜아웃 통합 설정 */
/* 1. 배경색 및 박스 기본 설정 */
.notion-callout[class*="pink"] {
background-color: #ffffff !important; /* 배경 흰색 */
border: 0px solid #e1e1e1 !important;
border-radius: 12px !important;
padding: 20px !important;
color: #37352f !important;
font-size: 0.5rem !important; /* 기본 크기 설정 */
}
/* 2. 모든 하위 요소(텍스트, 리스트, 굵은 글씨 등) 크기 강제 통일 */
.notion-callout[class*="pink"] *,
.notion-callout[class*="pink"] *::before,
.notion-callout[class*="pink"] *::after,
.notion-callout[class*="pink"] p,
.notion-callout[class*="pink"] div,
.notion-callout[class*="pink"] span,
.notion-callout[class*="pink"] li,
.notion-callout[class*="pink"] strong,
.notion-callout[class*="pink"] b {
font-size: 0.8rem !important; /* 원하는 크기로 통일 (예: 0.8rem) */
--font-size: 0.5rem !important; /* 변수 차단 */
line-height: 1.6 !important; /* 줄간격 통일 */
}
/* 3. 아이콘 제거 및 여백 정렬 */
.notion-callout[class*="pink"] .notion-callout__icon {
display: none !important;
}
.notion-callout[class*="pink"] .notion-callout__content {
margin-left: 0 !important;
width: 100% !important;
}
/* 4. 특정 서비스(Super/Oopy)의 텍스트 블록 강제 저격 */
[class*="pink"] .notion-text-block,
[class*="pink"] [contenteditable="false"] {
font-size: 0.5rem !important;
}
/* 모바일 최적화 (화면 너비 768px 이하) */
@media (max-width: 768px) {
/* 1. 핑크 콜아웃 내부의 모든 텍스트 요소를 하나로 통일 */
/* 리스트(li), 문단(p), 스팬(span) 등을 모두 한꺼번에 강제 고정합니다. */
.notion-callout[class*="pink"] *,
.notion-callout[class*="pink"] p,
.notion-callout[class*="pink"] span,
.notion-callout[class*="pink"] li,
.notion-callout[class*="pink"] strong,
.notion-callout[class*="pink"] div {
font-size: 0.75rem !important; /* 모바일에서 가장 읽기 좋은 크기 */
--font-size: 0.8rem !important;
line-height: 1.6 !important;
margin-bottom: 4px !important; /* 줄 간격이 겹치지 않게 */
}
/* 2. 리스트(불렛포인트) 점 위치 및 정렬 보정 */
/* 리스트가 너무 작아지거나 들쑥날쑥해지는 것을 방지합니다. */
.notion-callout[class*="pink"] ul,
.notion-callout[class*="pink"] ol {
padding-left: 18px !important;
margin-top: 8px !important;
}
/* 3. 카드 사이의 간격 및 너비 */
.notion-callout[class*="pink"] {
padding: 18px !important;
margin-bottom: 24px !important; /* 카드와 카드 사이 여백 */
width: 100% !important;
border-radius: 12px !important;
}
/* 4. 이미지 너비 최적화 */
.notion-callout[class*="pink"] img {
width: 100% !important;
height: auto !important;
margin-bottom: 15px !important;
}
}
/* [23] 빨간색 콜아웃 - 블랙 배경 & 흰색 글자 중앙 정렬 */
.notion-callout[class*="red"] {
background-color: #ffffff !important; /* 블랙 배경 */
border: none !important;
border-radius: 12px !important;
/* 1. 레이아웃: 수직/수평 중앙 정렬 */
display: flex !important;
align-items: center !important; /* 위아래 중앙 */
justify-content: center !important; /* 좌우 중앙 */
/* 2. 여백 설정 */
padding: 10px 0px !important;
min-height: 0 !important;
}
/* 3. 내부 콘텐츠 박스 및 텍스트 색상 */
.notion-callout[class*="red"] .notion-callout__content {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* 4. 글자색 흰색(#ffffff) 및 폰트 설정 */
.notion-callout[class*="red"] strong,
.notion-callout[class*="red"] b,
.notion-callout[class*="red"] p,
.notion-callout[class*="red"] span {
color: #37352F !important; /* 흰색 글씨 강제 적용 */
font-family: "Noto Sans KR", sans-serif !important;
font-weight: 700 !important;
font-size: 1.2rem !important;
line-height: 1.2 !important; /* 줄간격 최적화 */
text-align: center !important;
}
/* 아이콘 제거 */
.notion-callout[class*="red"] .notion-callout__icon {
display: none !important;
}
