/*==01📌 공통 스타일 설정: 깃허브 사용=====*/
/*====[기본]토글 글자 크기 제어====*/
.notion-toggle,
.notion-toggle summary,
.notion-toggle summary span,
.notion-toggle__content {
font-size: var(--pc-body) !important;
line-height: var(--pc-lh-body) !important;
}
@media (max-width: 768px) {
.notion-toggle,
.notion-toggle summary,
.notion-toggle summary span,
.notion-toggle__content {
font-size: var(--mb-body) !important;
line-height: var(--mb-lh-body) !important;
}
}
/* 아이콘 및 SVGs */
.notion-toggle__icon,
.notion-header__icon,
svg {
font-size: inherit !important;
}
/**/
/*==========================================
09-1📌 텍스트 콜아웃 제어 (주석용)*/
/* [1] 파란색 콜아웃을 투명화*/
.notion-callout[class*="blue"] {
background-color: transparent !important;
border: 0px solid transparent !important;
border-radius: 12px !important;
padding: 0px !important;
color: #37352f !important;
}
/* [2] 글자 크기 제어 (주석용 0.8rem)----- */
.notion-callout[class*="blue"] *,
.notion-callout[class*="blue"] *::before,
.notion-callout[class*="blue"] *::after,
.notion-callout[class*="blue"] p,
.notion-callout[class*="blue"] div,
.notion-callout[class*="blue"] span,
.notion-callout[class*="blue"] li,
.notion-callout[class*="blue"] strong,
.notion-callout[class*="blue"] b {
font-size: 0.8rem !important;
line-height: 1.6 !important;
}
[class*="blue"] .notion-text-block,
[class*="blue"] [contenteditable="false"] {
font-size: 0.8rem !important;
}
@media (max-width: 768px) {
.notion-callout[class*="blue"] *,
.notion-callout[class*="blue"] p,
.notion-callout[class*="blue"] span,
.notion-callout[class*="blue"] li,
.notion-callout[class*="blue"] strong,
.notion-callout[class*="blue"] div {
font-size: 0.75rem !important;
line-height: 1.6 !important;
margin-bottom: 4px !important;
}
.notion-callout[class*="blue"] ul,
.notion-callout[class*="blue"] ol {
padding-left: 18px !important;
margin-top: 8px !important;
}
.notion-callout[class*="blue"] {
padding: 0px !important;
margin-bottom: -15px !important;
width: 100% !important;
}
}
/*==========================================
09-2📌 콜아웃 텍스트 제어 (상세페이지 적용)
[1] 화이트 박스형/
/*--- 1. 콜아웃 박스 컬러 지정---*/
.notion-callout[class*="brown"],
.notion-callout[class*="gray"] {
background-color: #ffffff !important;
border: 0px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
padding: 20px !important;
color: #37352f !important;
}
/* 📌 그레이 콜아웃 상하좌우 여백 */
.notion-callout[class*="gray"] {
padding: 15px 20px 12px 10px !important;
}
/*---2. 콜아웃 텍스트 정렬---*/
/* 브라운/그레이 공통: 너비 확보 */
.notion-callout[class*="brown"] .notion-callout__content,
.notion-callout[class*="gray"] .notion-callout__content {
margin-left: 0 !important;
width: 100% !important;
}
/* 브라운만 중앙 정렬 */
.notion-callout[class*="brown"] .notion-callout__content {
text-align: center !important;
}
/* 그레이만 좌측 정렬 */
.notion-callout[class*="gray"] .notion-callout__content {
text-align: left !important;
}
/*------[2] 투명 텍스트형 (Green)---------*/
.notion-callout[class*="green"] {
background-color: transparent !important;
border: none !important;
border-radius: 0px !important;
/* 위아래 마진(여백) 조절 */
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
min-height: 0 !important;
}
/* 초록색 콜아웃 내부 콘텐츠 정렬 */
.notion-callout[class*="green"] .notion-callout__content {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding-left: 0 !important;
width: 100% !important;
}
/*====[3] h2 선택적숨김(주황색)===*/
/* 1. 주황색 콜아웃의 외형 투명화 */
.notion-callout[class*="orange"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
/* 3.콜아웃 내부 내용 중 텍스트/H1/H2 숨김 */
.notion-callout[class*="orange"] .notion-callout__content > .notion-text,
.notion-callout[class*="orange"] .notion-callout__content > h1,
.notion-callout[class*="orange"] .notion-callout__content > h2,
.notion-callout[class*="orange"] .notion-callout__content > .notion-h-title {
display: none !important;
}
/*---[3] 화이트 풀배경 (H1 및 H2 전용 / 토글 타입 제외)----*/
/* [1] 전역 가두리 해제 */
.notion-page-content {
overflow-x: clip !important;
}
/* [2] 화이트 배경 적용 */
/* 📌 :not(.notion-toggle *) 조건을 추가하여 토글 내부에 중첩된 h1, h2는 풀배경 대상에서 원천 배제합니다. */
.notion-callout:not([class*="_background"]):not([class*="yellow"]):not([class*="red"]):not([class*="orange"]):has(h1:not(.notion-toggle *), h2:not(.notion-toggle *)) {
width: 100vw !important;
max-width: none !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
background-color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin-top: -65px !important;
margin-bottom: 0px !important;
padding-top: 50px !important;
padding-bottom: 0 !important;
}
/* [3] 내부 콘텐츠 중앙 정렬 */
.notion-callout:not([class*="_background"]):not([class*="yellow"]):not([class*="red"]):not([class*="orange"]):has(h1:not(.notion-toggle *), h2:not(.notion-toggle *)) > .notion-callout__content {
max-width: 1150px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
padding: 0 20px !important;
}
/* [4] 아이콘 숨김 */
.notion-callout:not([class*="_background"]):not([class*="red"]):not([class*="orange"]):has(h1:not(.notion-toggle *), h2:not(.notion-toggle *)) > .notion-callout__icon {
display: none !important;
}
/* [5] 내부 갤러리/이미지 방어 */
.notion-callout:not([class*="_background"]):not([class*="red"]):not([class*="orange"]):has(h1:not(.notion-toggle *), h2:not(.notion-toggle *)) .notion-collection-gallery,
.notion-callout:not([class*="_background"]):not([class*="red"]):not([class*="orange"]):has(h1:not(.notion-toggle *), h2:not(.notion-toggle *)) img {
max-width: 100% !important;
}
@media (max-width: 768px) {
.notion-callout:not([class*="_background"]):not([class*="yellow"]):not([class*="red"]):not([class*="orange"]):has(h1:not(.notion-toggle *), h2:not(.notion-toggle *))
> .notion-callout__content {
max-width: 100% !important;
padding-left: 33px !important;
padding-right: 33px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/*기본형 토글 - 오픈*/
/*==================================================
✅ 타입2. 기본형 상단 토글 오픈형 (갈색 콜아웃 전용 항상 펼침)
==================================================*/
/* [1] 갈색 콜아웃 고유의 화이트 박스 스타일 방어 및 사수 */
.notion-callout[class*="brown"],
div.notion-callout[class*="brown"] {
background: transparent !important;
background-color: transparent !important;
border: 0px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
padding: 20px !important;
color: #37352f !important;
box-shadow: none !important;
}
/* [2] 제공해주신 논리 기반: 토글 콘텐츠 상시 강제 표시 */
.notion-callout[class*="brown"] .notion-toggle__content {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: unset !important;
order: unset !important; /* 타입3,4의 순서 역전 공격 무효화 */
padding-left: 24px !important; /* 노션 순정 들여쓰기 유지 */
text-align: center !important; /* 갈색 콜아웃 중앙 정렬 사수 */
}
/* [3] 제목과 세모 화살표 강제 노출 및 순정 레이아웃 복원 */
.notion-callout[class*="brown"] .notion-toggle__summary {
display: flex !important; /* 숨김 처리 제거 후 부활 */
align-items: center !important;
justify-content: center !important; /* 갈색 중앙 정렬 매칭 */
order: unset !important;
width: 100% !important;
}
.notion-callout[class*="brown"] .notion-toggle__trigger {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
}
/* [4] 순정 세모 화살표 부활 및 강제 오픈 상태 각도(90도) 고정 */
.notion-callout[class*="brown"] .notion-toggle__trigger_icon span,
.notion-callout[class*="brown"] .notion-toggle__trigger svg {
display: inline-block !important; /* 타입3,4의 화살표 숨김 방어 */
transform: rotate(90deg) !important; /* 펼쳐진 세모 모양 강제 고정 */
transition: transform 0.2s ease !important;
}
/* [5] 타입3,4의 'View more' 글자가 제목을 덮어쓰지 못하도록 원천 차단 */
.notion-callout[class*="brown"] .notion-toggle__trigger::before {
display: none !important;
content: none !important;
}
/*=====02📌 토글 펼치기 숨기기=======*/
/*[1]토글 펼치기 숨기기 (공통 및 텍스트형)*/
/* 1. 기본 콜아웃의 테두리 및 배경 투명화 */
.notion-callout,
div.notion-callout {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-width: 0 !important;
border-color: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. 기본 세모 화살표 숨기기 */
.notion-callout .notion-toggle__trigger_icon span,
.notion-callout .notion-toggle__trigger svg {
display: none !important;
}
/* 3. 닫힌 상태 (기본) : 'View more' 삽입 */
.notion-callout .notion-toggle:not(.open) .notion-toggle__trigger::before {
content: "View more";
font-size: 0.9em;
font-weight: 700;
display: inline-block;
}
/* 4. 열린 상태 : 'View less' 삽입 */
.notion-callout .notion-toggle.open .notion-toggle__trigger::before {
content: "View less";
font-size: 0.9em;
font-weight: 700;
display: inline-block;
}
/* 5. 좌측 그리드 맞추기 */
.notion-callout .notion-toggle {
display: flex !important;
flex-direction: column !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* 6. 콘텐츠 영역 */
.notion-callout .notion-toggle__content {
order: 1 !important;
margin-bottom: 8px !important;
margin-top: 0 !important;
padding-left: 0 !important;
}
/* 7. 트리거(제목) 영역 */
.notion-callout .notion-toggle__summary {
order: 2 !important;
margin-top: 0 !important;
padding-left: 0 !important;
}
/* 8. 트리거 내부 텍스트 우측 이동 설정 */
.notion-callout .notion-toggle__trigger {
padding-left: 2px !important;
margin-left: 0 !important;
}
/*==========================================
02📌[2]하단 버튼형 더보기 토글(보라색 콜아웃)*/
.notion-callout[class*="purple"] {
background: transparent !important;
background-color: transparent !important;
}
.notion-callout[class*="purple"]:hover {
background: transparent !important;
background-color: transparent !important;
}
.notion-callout[class*="purple"] .notion-toggle__summary {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
/* 토글의 모든 모서리 r값 강제 제거 */
.notion-callout[class*="purple"] .notion-toggle,
.notion-callout[class*="purple"] .notion-toggle__content {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/*[3]내부 토글 버튼 디자인 풀와이드*/
.notion-callout[class*="purple"] .notion-toggle__trigger {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
min-width: unset !important;
max-width: 100% !important;
width: 100% !important;
border-radius: 13px !important;
border: 1px solid #dcdcdc !important;
outline: none !important;
background: #f7f7f7 !important;
background-color: #f7f7f7 !important;
margin: 8px 0 0 0 !important;
padding: 0 16px !important;
position: relative !important;
overflow: hidden !important;
}
/* 호버 시 발생하는 보라색 바탕 제거 */
.notion-callout[class*="purple"] .notion-toggle__trigger:hover {
background: #ffffff !important;
background-color: #ffffff !important;
cursor: pointer !important;
}
/* 텍스트 크기 및 굵기 제어 */
.notion-callout[class*="purple"] .notion-toggle__trigger::before {
display: flex !important;
align-items: center !important;
justify-content: center !important;
content: "View more" !important;
color: #37352f !important;
font-size: 14px !important;
font-weight: 700 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.notion-callout[class*="purple"] .notion-toggle.open .notion-toggle__trigger::before {
content: "View less" !important;
}
/*==03📌 상단 커버 노출시 데이터베이스 h1 숨김==*/
/* [1] */
.super-content-header h1:first-of-type,
.super-content-header__content,
.notion-header__title {
display: none !important;
}
/* [2] 본문 내의 H1은 강제로 다시 살리기 */
main .super-content h1,
.notion-page__content h1,
.notion-header + .notion-page__content h1 {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
}
/* [3] 본문 H1의 글자 크기를 시스템 변수와 동기화 */
.notion-page__content h1 {
font-size: var(--pc-h1) !important;
font-weight: var(--h1-weight) !important;
line-height: var(--pc-lh-h1) !important;
}
@media (max-width: 768px) {
.notion-page__content h1 {
font-size: var(--mb-h1) !important;
line-height: var(--mb-lh-h1) !important;
}
}
/*==========================================
04📍 네비 & 레이아웃 제어 ----*/
/* [1] 네비게이션 바 그리드 정렬*/
.super-navbar__content {
max-width: 1145px !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
display: flex !important;
}
.super-navbar {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (max-width: 1250px) {
.super-navbar__content {
max-width: calc(100% - 40px) !important;
}
}
/* [2] 네비게이션 메뉴 버튼 스타일---- */
.super-navbar .super-navbar__menu-item,
.super-navbar .super-navbar__item,
.super-navbar .super-navbar__button,
.super-navbar .super-navbar__menu-item > a,
.super-navbar .super-navbar__menu-item span {
/* 폰트 스타일 */
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
opacity: 1 !important;
filter: none !important;
transition: all 0.2s ease !important;
}
/* 2. 호버(Hover) 액션 */
.super-navbar .super-navbar__menu-item:hover,
.super-navbar .super-navbar__menu-item:hover > a {
opacity: 0.7 !important;
}
/* [3] 응답형 및 모바일 메뉴 가시성 보장 */
/* 1. 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
.super-navbar .super-navbar__menu-item,
.super-navbar .super-navbar__menu-item a,
div[class*="super-navbar__menu"] a {
font-size: 20px !important; /* 화면이 작아지면 가독성을 위해 살짝 조절 */
color: #000000 !important;
opacity: 1 !important;
font-weight: 700 !important;
}
.super-navbar__menu {
background-color: #f7f7f7 !important;
}
}
/* 2. 모바일 최종 (768px 이하) */
@media (max-width: 768px) {
.super-navbar .super-navbar__menu-item,
.super-navbar .super-navbar__menu-item a {
font-size: 18px !important;
font-weight: 700 !important;
}
}
/* ========================================
[📍]커버 이미지가 지정없을때 공백 제거 */
.notion-header__cover:not(:has(img)),
.notion-header__cover[style*="background-image: none"],
.notion-header__cover:empty {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. 상단 여백 보정 */
.notion-root:not(:has(.notion-header__cover img)) .notion-header {
padding-top: 60px !important; /* 커버 없을 때 상단 여백을 편안하게 60px 확보 */
}
/*=========================================
05📌 태그 글자 및 호버 제어-------*/
/* [1] 버튼형 태그(code) 스타일 및 선명도 복구 */
code {
display: inline-block !important;
margin: 4px 2px !important;
padding: 1px 8px !important;
vertical-align: middle !important;
border-radius: 6px !important;
background-color: rgba(0, 0, 0, 0.05) !important;
transition: all 0.2s ease !important;
border: none !important;
font-size: var(--pc-body) !important;
opacity: 1 !important;
}
/* [2] 밑줄 절대 금지 및 선명도 100% */
code a,
code span,
code a span {
font-size: inherit !important;
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: inherit !important;
opacity: 1 !important;
}
/* [3] 일반 본문 텍스트 링크 스타일 제어 */
.notion-text-block a,
.notion-callout a,
.notion-column a {
text-decoration: none !important;
}
/* [4] 호버(Hover) 액션 */
code:has(a):not(.notion-callout[class*="orange"] code):hover {
background-color: #37352f !important;
cursor: pointer !important;
}
code:has(a):not(.notion-callout[class*="orange"] code):hover a,
code:has(a):not(.notion-callout[class*="orange"] code):hover span,
code:has(a):not(.notion-callout[class*="orange"] code):hover * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none !important;
border-bottom: none !important;
}
@media (max-width: 768px) {
code, code a, code span {
font-size: var(--mb-body) !important;
}
}
/* ==========================================
05 📌 Sticky Section Navigation
orange = 화이트 버튼
gray = 블랙 버튼
========================================== */
/* sticky 전체 컨테이너 */
.notion-callout[class*="orange"]:has(code),
.notion-callout[class*="gray"]:has(code){
position:sticky!important;
top:64px!important;
z-index:999!important;
background:#f7f7f7!important;
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(0,0,0,.1)!important;
border-radius:0!important;
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:12px 0!important;
}
/* 내부 정렬 */
.notion-callout[class*="orange"]:has(code) .notion-callout__content,
.notion-callout[class*="gray"]:has(code) .notion-callout__content{
max-width:1150px!important;
margin:0 auto!important;
padding:0 20px!important;
}
/* 아이콘 제거 */
.notion-callout[class*="orange"]:has(code) .notion-callout__icon,
.notion-callout[class*="gray"]:has(code) .notion-callout__icon{
display:none!important;
}
/* 메뉴 리스트 */
.notion-callout[class*="orange"]:has(code) ul,
.notion-callout[class*="gray"]:has(code) ul{
display:flex!important;
flex-wrap:nowrap!important;
overflow-x:auto!important;
gap:10px!important;
margin:0!important;
padding:0!important;
list-style:none!important;
scrollbar-width:none!important;
}
.notion-callout[class*="orange"]:has(code) ul::-webkit-scrollbar,
.notion-callout[class*="gray"]:has(code) ul::-webkit-scrollbar{
display:none!important;
}
/* li */
.notion-callout[class*="orange"]:has(code) li,
.notion-callout[class*="gray"]:has(code) li{
list-style:none!important;
padding:0!important;
margin:0!important;
flex:0 0 auto!important;
}
/* 공통 버튼 */
.notion-callout[class*="orange"]:has(code) code,
.notion-callout[class*="gray"]:has(code) code{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:4px 16px!important;
border-radius:999px!important;
border:1px solid rgba(0,0,0,.1)!important;
transition:all .2s ease!important;
}
/* orange 버튼 */
.notion-callout[class*="orange"]:has(code) code{
background:#ffffff!important;
}
/* gray 버튼 */
.notion-callout[class*="gray"]:has(code) code{
background:#37352f!important;
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
}
/* gray 내부 텍스트 */
.notion-callout[class*="gray"]:has(code) code *{
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
}
/* ==========================================
📱 [🚨 모바일 전용 그리드 교정구역]
========================================== */
@media (max-width: 768px) {
.notion-callout[class*="orange"]:has(code) .notion-callout__content,
.notion-callout[class*="gray"]:has(code) .notion-callout__content {
padding-left: 25px !important;
padding-right: 16px !important;
}
}
/*==========================================
🟣 인터렉티브 노션 버튼 : 보라색 콜아웃 바레이션
==========================================*/
/*06📌 type1 - 기본타입*/
/* [1] 버튼 컨테이너: 배경 제거 및 크기 최적화 ----------- */
.notion-button {
background-color: transparent !important;
padding: 0 !important;
width: fit-content !important;
}
/* [2] 버튼 본체: 디자인 및 여백 설정 */
.notion-button > a {
background-color: #37352f !important;
color: #ffffff !important;
border: 0px solid #e1e1e1 !important;
padding: 8px 16px !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
/* [3] 글자 크기 및 색상 강제 */
.notion-button > a,
.notion-button > a * {
font-size: 14px !important;
font-weight: 400 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
line-height: 1.2 !important;
}
/*==========================================
06 ✅ 인터랙티브 노션 버튼 (콜아웃타입)
==========================================*/
/* 📌type2 -보라색 콜아웃 : 버튼 full wide*/
/* [1] 보라색 콜아웃 외형 초기화 */
.notion-callout[class*="purple"] {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
width: 100% !important;
max-width: 1300px !important;
margin: 40px auto !important;
border-radius: 0px !important;
}
/* 콜아웃 내부 아이콘 숨기기 */
.notion-callout[class*="purple"] .notion-callout__icon {
display: none !important;
}
/* 그리드 제어 */
.notion-callout[class*="purple"]:has(code) > .notion-callout__content > div:first-child,
.notion-callout[class*="purple"]:has(code) > .notion-callout__content > p,
.notion-callout[class*="purple"]:has(code) code {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
line-height: 0 !important;
overflow: hidden !important;
}
/* [2] 콜아웃 내부의 버튼을 1300px로 확장 */
.notion-callout[class*="purple"] .notion-button {
width: 100% !important;
max-width: 1300px !important;
}
.notion-callout[class*="purple"] .notion-button > a {
width: 100% !important;
min-height: 70px !important;
background-color: #37352f !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* [2] 콜아웃 내부의 버튼 디자인 및 간격 조절 */
.notion-callout[class*="purple"] .notion-button > a {
width: 100% !important;
padding: 15px 0px !important;
min-height: auto !important;
background-color: #37352f !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.notion-callout[class*="purple"] {
margin: 0px auto !important;
}
/* [3] 버튼 글자 스타일 강제 적용 */
.notion-callout[class*="purple"] .notion-button > a span,
.notion-callout[class*="purple"] .notion-button > a div {
color: #ffffff !important;
font-size: 14px !important;
font-weight: 400 !important;
}
/*==========================================
📱 모바일 최적화 레이아웃 (반응형 구역)
==========================================*/
@media (max-width: 768px) {
/* 버튼 글자 크기 통합 */
.notion-button > a,
.notion-button > a *,
.notion-callout[class*="purple"] .notion-button > a span,
.notion-callout[class*="purple"] .notion-button > a div {
font-size: 13px !important;
}
/* 보라색 콜아웃 내 버튼 높이/라운드/배경 제어 */
.notion-callout[class*="purple"] .notion-button > a {
min-height: 40px !important;
border-radius: 8px !important;
padding: 0 20px !important;
border: none !important;
outline: none !important;
background-color: #37352f !important;
}
/* 모바일 위아래 여백 */
.notion-callout[class*="purple"] {
/* 원하는 모바일 상하 마진 수치를 이곳에서 직접 조절하세요 */
margin-top: 20px !important; /* 모바일 버튼 상단 여백 */
margin-bottom: 15px !important; /* 모바일 버튼 하단 여백 */
margin-left: auto !important;
margin-right: auto !important;
}
/* 보라색 콜아웃 + 인라인코드 트리거
- 버튼 2단 강제 고정 */
.notion-callout[class*="purple"]:has(code) > .notion-callout__content > .notion-column-list {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
}
.notion-callout[class*="purple"]:has(code) .notion-column {
width: 50% !important;
min-width: 40% !important;
}
/* 보라색 콜아웃 내부 좌우 여백 최적화 */
.notion-callout[class*="purple"]:has(code) {
padding-left: 0px !important;
padding-right: 0px !important;
}
}
/*==========================================
07📌 텍스트 컬러별 링크 스타일*/
/* [1] 초록색 글자: 블랙 & 언더라인 ---- */
/* 1. 초록색 텍스트 링크 블랙화 */
.notion-link[class*="green"],
.notion-text-block [class*="green"] a,
span[class*="green"] a,
span[class*="green"],
.notion-link[class*="green"] * {
color: #37352f !important;
-webkit-text-fill-color: #37352f !important;
opacity: 1 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
transition: all 0.2s ease !important;
}
/* 2. 호버(Hover) 액션: 포인트 레드 전환 */
.notion-link[class*="green"]:hover,
.notion-link[class*="green"]:hover *,
.notion-text-block [class*="green"] a:hover,
span[class*="green"] a:hover,
span[class*="green"]:hover {
color: #D34A45 !important;
-webkit-text-fill-color: #D34A45 !important;
text-decoration: none !important;
opacity: 1 !important;
}
/* [3] 예외 처리 (Exception Handling) ---- */
code [class*="green"],
code [class*="green"] *,
code [class*="green"]:hover {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
text-decoration: none !important;
background-color: transparent !important;
}
/*----[2] 브라운 글자: 블랙 & 호버 ---- */
.notion-link[class*="brown"],
.notion-text-block [class*="brown"] a,
span[class*="brown"] a,
span[class*="brown"],
.notion-link[class*="brown"] * {
color: #37352f !important;
-webkit-text-fill-color: #37352f !important;
opacity: 1 !important;
text-decoration: none !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
transition: all 0.2s ease !important;
}
/* 2. 호버(Hover) 액션: 포인트 레드 전환 ----------- */
.notion-link[class*="brown"]:hover,
.notion-link[class*="brown"]:hover *,
.notion-text-block [class*="brown"] a:hover,
span[class*="brown"] a:hover,
span[class*="brown"]:hover {
color: #D34A45 !important;
-webkit-text-fill-color: #D34A45 !important;
text-decoration: none !important;
opacity: 1 !important;
}
/* [3] 예외 처리 (Exception Handling) ---- */
code [class*="brown"],
code [class*="brown"] *,
code [class*="brown"]:hover {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
text-decoration: none !important;
background-color: transparent !important;
}
/*==========================================
08📌 전체 라인 및 테두리 제어 (Line Detail)*/
/* [1] 구분선(Divider) 기본형 색상 변경 */
.notion-divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
opacity: 1 !important;
}
/* [2] 콜아웃 테두리(기본형) */
.notion-collection-card,
.notion-callout {
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* [3] 확장 구분선 (레드 콜아웃) - 갤러리 제외 버전 */
.notion-callout[class*="red"]:not(:has(.notion-collection-gallery)),
div[style*="background-color: rgb(253, 235, 236)"]:not(:has(.notion-collection-gallery)) {
width: 100vw !important;
max-width: none !important;
height: 1px !important;
min-height: 1px !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: #E6E6E6 !important;
box-shadow: none !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-top: 15px !important;
margin-bottom: 0px !important;
overflow: visible !important;
}
/* 2. 갤러리가 '없는' 레드 콜아웃 내부 요소만 삭제 (버튼은 살림) */
.notion-callout[class*="red"]:not(:has(.notion-collection-gallery)) *,
div[style*="background-color: rgb(253, 235, 236)"]:not(:has(.notion-collection-gallery)) * {
display: none !important;
}
/* [4] 블랙 구분선 (핑크 콜아웃) */
.notion-callout[class*="pink"]:not(:has(.notion-collection-gallery)),
div[style*="background-color: rgb(255, 226, 236)"]:not(:has(.notion-collection-gallery)) {
width: 100% !important;
max-width: none !important;
height: 1px !important;
min-height: 1px !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: #37352f !important;
box-shadow: none !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-top: 25px !important;
margin-bottom: 10px !important;
}
/*불렛 글자 제어 미디어쿼리*/
@media (max-width: 768px) {
.notion-bulleted_list,
.notion-numbered_list,
.notion-list,
.notion-list-item {
padding-left: 3px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
/* 2.본문 텍스트 크기 및 색상 통일 */
.notion-bulleted_list:not(:has([class*="green"])) li,
.notion-bulleted_list:not(:has([class*="green"])) li *,
.notion-numbered_list li,
.notion-numbered_list li *,
.notion-list-item:not([class*="green"]),
.notion-list-item:not([class*="green"]) * {
font-size: var(--mb-body) !important;
line-height: var(--mb-lh-body) !important;
}
}
/*=========================================
05📌 콜아웃 텍스트 설정.css 깃허브*/
/*==========================================
📌 요일 시간 2칼럼 (green+불렛 선택자)*/
/* 1. 그리드 컨테이너 설정 */
.notion-callout[class*="green"] .notion-bulleted_list,
.notion-callout[class*="green"] ul {
display: grid !important;
grid-template-columns: 1fr 3fr 1fr 3fr !important;
column-gap: 25px !important;
row-gap: 0px !important;
padding: 0px 0 !important;
width: 100% !important;
align-items: stretch !important;
}
@media (max-width: 768px) {
.notion-callout[class*="green"] .notion-bulleted_list,
.notion-callout[class*="green"] ul {
grid-template-columns: 1fr 1fr !important;
column-gap: 15px !important;
}
}
/* 3. 리스트 아이템 스타일 (상하 여백) */
.notion-callout[class*="green"] .notion-list-item,
.notion-callout[class*="green"] li {
list-style: none !important;
margin: 0 !important;
padding: 15px 10 10px 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
position: relative !important;
}
/* 4. 가상 요소 구분선 */
.notion-callout[class*="green"] .notion-list-item::after,
.notion-callout[class*="green"] li::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 0px !important;
background-color: #e5e5e5 !important;
}
.notion-callout[class*="green"] li:nth-child(4n-3),
.notion-callout[class*="green"] .notion-list-item:nth-child(4n-3),
.notion-callout[class*="green"] li:nth-child(4n-1),
.notion-callout[class*="green"] .notion-list-item:nth-child(4n-1) {
width: calc(100% + 25px) !important;
z-index: 1 !important;
}
/* 5. 텍스트 스타일 */
.notion-callout[class*="green"] .notion-list-item,
.notion-callout[class*="green"] li {
/* 💡 부모 단계에서만 폰트 사이즈를 결정 (자식들은 이를 상속받음) */
font-size: 0.8em !important;
line-height: 1.5 !important;
text-align: left !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
.notion-callout[class*="green"] .notion-list-item *,
.notion-callout[class*="green"] li * {
font-size: 1em !important;
margin: 0 !important;
padding: 0 !important;
}
/* 불렛 점 완전 제거 */
.notion-callout[class*="green"] .notion-list-item::marker,
.notion-callout[class*="green"] li::marker {
content: "" !important;
display: none !important;
}
/* 🚨 모바일 제어 미디어쿼리 (768px 이하) */
@media (max-width: 768px) {
.notion-callout[class*="green"] .notion-list-item,
.notion-callout[class*="green"] li {
font-size: 0.8em !important;
}
}
/*==========================================
10📌 도시 버튼 제어 (Gallery Custom)*/
/* [1] 도시 버튼 공통 변수 설정 (Root) */
:root {
--btn-min-width-pc: 90px;
--btn-height-pc: 2.2em;
--btn-font-pc: 0.95em;
--btn-padding-pc: 0 15px;
--btn-radius: 40px;
--btn-min-width-mb: 80px;
--btn-height-mb: 2.0em;
--btn-font-mb: 0.9em;
--btn-padding-mb: 0 10px;
}
/* 갤러리 제목, 속성, 모든 텍스트 제어 */
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-item-title,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-property__title,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-property__title *,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card span,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card div {
font-size: var(--btn-font-pc) !important;
line-height: 1.5 !important;
white-space: nowrap !important;
}
/* 카드 높이도 글자 크기에 맞춰 유연하게 */
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card {
height: var(--btn-height-pc) !important;
padding: var(--btn-padding-pc) !important;
min-height: 0 !important;
}
/*---공통 스타일 설정---*/
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card {
/* 자동 너비 */
flex: 0 0 auto !important;
width: auto !important;
min-width: var(--btn-min-width-pc) !important;
height: var(--btn-height-pc) !important;
padding: var(--btn-padding-pc) !important;
background: #ffffff !important;
box-shadow: none !important;
border: 1px solid rgba(0,0,0,0.1) !important;
border-radius: var(--btn-radius) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/*----공통 호버기능(블랙)-----*/
/* 1. 마우스를 올렸을 때 배경색 변경 */
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card:hover {
background-color: #000000 !important;
border-color: #000000 !important;
transition: all 0.2s ease !important;
}
/* 2. 호버 시 모든 글자 흰색*/
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card:hover .notion-property__title,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card:hover .notion-item-title,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card:hover .notion-property__title *,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card:hover span,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card:hover div {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
@media (max-width: 768px) {
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-item-title,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-property__title,
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-property__title * {
font-size: var(--btn-font-mb) !important;
}
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card {
height: var(--btn-height-mb) !important;
padding: var(--btn-padding-mb) !important;
}
}
/* -------------------------------------- */
/* [3] 도시버튼 : 나열형 (Type 2)*/
/*1.콜아웃 투명화*/
.notion-callout:has(.notion-collection-gallery) {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2.콜아웃 내부 공통 설정-그리드 맞춤 */
.notion-callout .notion-callout__content {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* 3.콜아웃 내 줄바꿈 설정 유지
⭐️이거 뭔지 모르겠음⭐ 데이터 많아져봐야암*/
.notion-callout .notion-collection-gallery:not(:has(.notion-collection-card__cover)) {
display: flex !important;
flex-wrap: wrap !important;
overflow: visible !important;
gap: 10px 8px !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* -------------------------------------- */
/* [3-1] find 서브버튼 (Type 3)
[note] 레드 콜아웃 find 서브 메뉴 버튼 */
/* 1. 슬라이드 전용*/
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
gap: 8px !important;
padding: 10px 0 !important;
-webkit-overflow-scrolling: touch;
}
/* 2. 슬라이드 텍스트 방지 */
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-item-title {
font-size: var(--btn-font-pc) !important;
white-space: nowrap !important;
text-overflow: clip !important;
}
/* 📍 갤러리를 품은 레드 콜아웃만 타격 */
.notion-callout[class*="red"]:has(.notion-collection-gallery) {
background: transparent !important;
border: none !important;
padding: 0 !important;
width: 100% !important;
transform: none !important;
left: 0 !important;
/* 📌 핵심: 양옆 둥근 모서리 및 잘림 현상 제거 */
border-radius: 0 !important;
overflow: visible !important;
}
/* 레드 콜아웃 내부 블랙 버튼화 */
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card {
background-color: #1a1a1a !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
}
/* [3-1] 텍스트 스타일 설정*/
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-item-title,
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card .notion-property__title,
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card span,
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card div {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
.notion-callout[class*="red"] .notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card {
background-color: #37352f !important;
}
/*h태그 및 텍스트 숨김*/
/* 1. 레드 콜아웃이 갤러리(버튼)를 품고 있을 때, 내부의 H태그와 일반 텍스트 숨김 */
.notion-callout[class*="red"]:has(.notion-collection-gallery) h1,
.notion-callout[class*="red"]:has(.notion-collection-gallery) h2,
.notion-callout[class*="red"]:has(.notion-collection-gallery) h3,
.notion-callout[class*="red"]:has(.notion-collection-gallery) .notion-text,
.notion-callout[class*="red"]:has(.notion-collection-gallery) > div > div > div:not(.notion-collection-gallery) {
display: none !important;
}
@media (max-width: 768px) {
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-collection-card {
min-width: var(--btn-min-width-mb) !important;
height: var(--btn-height-mb) !important;
padding: var(--btn-padding-mb) !important;
}
.notion-collection-gallery:not(:has(.notion-collection-card__cover)) .notion-item-title {
font-size: var(--btn-font-mb) !important;
}
}
/*===========================================
11📌 Notion 갤러리뷰 통합 커스텀
[목차]
0. 📁 공통 베이스 (Common Base)
1. 📁 기본 카드형 (Standard Cards)
2. 📁 커스텀형 (Custom Callout Cards)
3. 📁 전역 속성 제어 (Global Properties)
===========================================*/
/*0. 📁 공통 베이스-------------------------
- 모든 갤러리에 적용되는 화이트 카드 베이스
- PC글자:제목 16, 설명 12 /모바일 글자: 제목 15, 설명 10
- ⚠️ 관계형 링크 정렬⚠️
-------------------------------------------*/
.notion-collection-gallery:has(.notion-collection-card__cover) .notion-collection-card__cover,
.notion-collection-gallery:has(.notion-collection-card__cover) .notion-collection-card__cover > div,
.notion-collection-gallery:has(.notion-collection-card__cover) .notion-collection-card__cover img {
height: auto !important;
min-height: unset !important;
max-height: unset !important;
object-fit: cover !important;
}
.notion-collection-gallery:has(.notion-collection-card__cover) .notion-collection-card {
width: 100% !important;
background: #fff !important;
border-radius: 15px !important;
box-shadow: none !important;
border: 1px solid rgba(0,0,0,0.06) !important;
overflow: hidden !important;
}
/*-----------------------------------------*/
/* 전역 속성 제어 (Global Properties) */
/* [1] 제목: PC 16px / 모바일 13px */
.notion-collection-card__property:first-child,
.notion-collection-card__property:first-child * {
font-size: 16px !important;
color: #000000 !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
/* [2] 하단 모든 속성 통합 제어 (기본 12px / 볼드 포함) */
.notion-collection-card__property:not(:first-child),
.notion-collection-card__property:not(:first-child) *,
.notion-collection-card__property:not(:first-child) span,
.notion-collection-card__property:not(:first-child) div,
.notion-collection-card__property:not(:first-child) :is(b, strong, [style*="700"], [style*="bold"]) {
font-size: 12px !important;
color: #666666;
text-decoration: none !important;
line-height: 1.5 !important;
}
/* [3] 관계형(Relation) 링크 버튼 배경 제거 및 좌측 정렬 */
[class*="notion-property__relation"] :is(svg, img, .notion-item-icon, [class*="icon"]),
[class*="notion-property__relation"] a::before {
display: none !important;
}
[class*="notion-property__relation"] a {
display: inline-flex !important;
align-items: center !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
text-decoration: none !important;
transition: color 0.2s ease-in-out !important;
}
/* 📌 관계형 링크 호버 시 설정 */
[class*="notion-property__relation"] a:hover,
[class*="notion-property__relation"] a:hover * {
color: #D34A45 !important;
text-decoration: none !important;
}
/* 텍스트 자체의 미세한 간격 조정 */
[class*="notion-property__relation"] span,
[class*="notion-property__relation"] .notion-link {
margin-left: 0 !important;
padding-left: 0 !important;
color: inherit !important;
}
@media (max-width: 768px) {
/* [1] 제목14px/속성10px */
.notion-collection-card__property:first-child,
.notion-collection-card__property:first-child * {
font-size: 14px !important;
}
.notion-collection-card__property:not(:first-child),
.notion-collection-card__property:not(:first-child) *,
.notion-collection-card__property:not(:first-child) span,
.notion-collection-card__property:not(:first-child) div,
.notion-collection-card__property:not(:first-child) :is(b, strong, [style*="700"], [style*="bold"]) {
font-size: 10px !important;
line-height: 1.4 !important;
}
/* 관계형 링크 모바일 정렬 보정 */
[class*="notion-property__relation"] a {
font-size: 10px !important;
}
}
/*=========[#1 갤러리뷰 기본형]==========*/
/*1. 📁 기본 카드형 (Standard Cards)
--------------------------------------------
[G 타입1] 기본 4열 (1:1 비율)
[NOTE] PC 4열 / 모바일 2열
-------------------------------------------*/
.notion-page-content > .notion-collection-gallery:not(.notion-callout *) {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
/* 썸네일 비율 설정 */
.notion-collection-gallery:not(.notion-callout *):not([style*="flex"]) :is(.notion-collection-card__cover, img) {
aspect-ratio: 1 / 1 !important;
}
@media (max-width: 768px) {
.notion-collection-gallery:not(.notion-callout *):not([style*="flex"]) {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
}
/*=========[#2 갤러리뷰 커스텀형]==========
/*===[2-0]기본형_투명 카드(초록색)===*/
/* 1. 그리드 배열 설정 (PC 6열) */
.notion-callout[class*="green"] .notion-collection-gallery {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 16px !important;
background: transparent !important;
}
/* 2. 카드 배경 및 테두리 투명화 */
.notion-callout[class*="green"] .notion-collection-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
transition: opacity 0.3s ease;
}
/* 3. 하단 제목/속성 영역 투명화 */
.notion-callout[class*="green"] .notion-collection-card__content {
background: transparent !important;
padding: 8px 4px !important;
}
/* 속성3(설명) 숨기기 */
.notion-callout[class*="green"] .notion-collection-card__property:nth-child(4) {
display: none !important;
}
/* 4. 썸네일 비율 및 이미지 설정 */
.notion-callout[class*="green"] .notion-collection-card__cover,
.notion-callout[class*="green"] .notion-collection-card__cover img {
aspect-ratio: 1 / 1 !important;
border-radius: 10px !important;
}
@media (max-width: 768px) {
.notion-callout[class*="green"] .notion-collection-gallery {
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
}
}
/*==========[#2-오렌지 콜아웃]=======*/
/* [1] 그리드 및 카드 기본 설정 */
.notion-callout[class*="orange"] .notion-collection-gallery {
display: grid !important;
/* 🚨 세로 2줄 고정 및 카드가 우측으로 쌓이도록 그리드 흐름 제어 */
grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
grid-auto-flow: column !important;
/* 🚨 PC 기준 한 화면에 정확히 4열(4개)씩 보이도록 열 너비 강제 지정 */
grid-auto-columns: calc((100% - 48px) / 4) !important;
gap: 16px !important;
background: transparent !important;
overflow-x: auto !important;
scrollbar-width: none !important; /* 파이어폭스 스크롤바 숨김 */
scroll-snap-type: x mandatory !important; /* 스크롤 자석 기능 */
}
/* 크롬, 사파리, 앱 내 브라우저 스크롤바 완전 숨김 */
.notion-callout[class*="orange"] .notion-collection-gallery::-webkit-scrollbar {
display: none !important;
}
.notion-callout[class*="orange"] .notion-collection-card {
width: 100% !important; /* 그리드 셀 너비에 백프로 맞춤 */
background: transparent !important;
box-shadow: none !important;
border: none !important;
scroll-snap-align: start !important;
}
.notion-callout[class*="orange"] .notion-collection-card__content {
background: transparent !important;
padding: 10px 4px !important;
display: flex !important;
flex-direction: column !important;
}
/* [2] 썸네일 1:1 고정 */
.notion-callout[class*="orange"] .notion-collection-card__cover,
.notion-callout[class*="orange"] .notion-collection-card__cover img {
aspect-ratio: 1 / 1 !important;
border-radius: 12px !important;
object-fit: cover !important;
}
/* [3] 속성 순서별 스타일 */
/* 공통: 아이콘 숨김 */
.notion-callout[class*="orange"] .notion-collection-card__property svg {
display: none !important;
}
/* --- 속성 1: 제목 (항상 16px) --- */
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(1),
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(1) * {
font-size: 16px !important;
font-weight: 600 !important;
color: #000000 !important;
line-height: 1.4 !important;
margin-bottom: 5px !important;
}
/* --- 속성 2:설명 (항상 12px) --- */
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(2),
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(2) * {
font-size: 12px !important;
color: #666666 !important;
font-weight: 400 !important;
margin-bottom: -5px !important;
}
/* --- 속성 3: NEW 태그 (다중선택 스타일)*/
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(3) {
display: flex !important;
}
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(3) .notion-pill {
background: transparent !important;
padding: 0 !important;
color: #D34A45 !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
@media (max-width: 768px) {
.notion-callout[class*="orange"] .notion-collection-gallery {
/* 🚨 모바일에서 뒤틀리는 복잡한 2행 그리드를 해제하고 단일 행 플렉스 슬라이더로 정상화 */
display: flex !important;
flex-wrap: nowrap !important;
grid-template-rows: unset !important;
grid-auto-flow: unset !important;
gap: 12px !important;
}
.notion-callout[class*="orange"] .notion-collection-card {
/* 🚨 모바일 화면 안에서 카드 2개가 여백(12px)을 제외하고 균일하게 50%씩 공간을 나눠 갖도록 고정 */
flex: 0 0 calc((100% - 12px) / 2) !important;
min-width: calc((100% - 12px) / 2) !important;
width: calc((100% - 12px) / 2) !important;
}
/* 속성 1 (제목): 14px 고정 */
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(1),
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(1) * {
font-size: 14px !important;
font-weight: 600 !important;
}
/* 속성 2 (설명): 10px 고정 */
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(2),
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(2) * {
font-size: 10px !important;
font-weight: 400 !important;
}
/* 속성 3 (태그): 모바일 9px 및 빨간색 유지 */
.notion-callout[class*="orange"] .notion-collection-card__property:nth-child(3) .notion-pill {
font-size: 9px !important;
color: #D34A45 !important;
}
}
/*------------------------------------------
[2-1][G 타입3] 슬라이드형 (파란색) "나중"
[Note] 카드형
- 설명 글 3줄이상 생략 + 박스 크기 고정
- 마지막 속성 윗줄에 구분선
-------------------------------------------*/
/*슬라이드 기능*/
.notion-callout[class*="blue"] .notion-collection-gallery {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 20px !important;
scrollbar-width: none !important;
}
.notion-callout[class*="blue"] .notion-collection-card {
flex: 0 0 46% !important;
min-width: 46% !important;
}
/* 카드 내부 마진 조정 */
.notion-callout[class*="blue"] .notion-collection-card__content {
padding-left: 20px !important;
padding-right: 0px !important;
padding-bottom: 15px !important;
}
/*썸네일 이미지 16:9 비율 */
.notion-callout[class*="blue"] .notion-collection-card__cover,
.notion-callout[class*="blue"] .notion-collection-card__cover > div,
.notion-callout[class*="blue"] .notion-collection-card__cover img {
height: auto !important;
min-height: unset !important;
max-height: unset !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
}
/* 제목 크기 복구 (기본 갤러리 16px 반영) */
.notion-callout[class*="blue"] .notion-collection-card__property:first-child,
.notion-callout[class*="blue"] .notion-collection-card__property:first-child * {
font-size: 16px !important;
font-weight: 600 !important;
color: #000000 !important;
margin-bottom: 6px !important;
/* 제목은 3줄 생략에서 제외하고 다 보여줌 */
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
}
/* 속성 3줄 생략 및 구분선 */
.notion-callout[class*="blue"] .notion-collection-card__property {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important;
overflow: hidden !important;
line-height: 1.45 !important; max-height: 5.5em !important;
}
.notion-callout[class*="blue"] .notion-collection-card__property:last-child {
border-top: 0px solid #eeeeee !important;
/*설명 위 구분선*/
margin-top: 0px !important;
padding-top: 0px !important;
}
/*속성 설명 숨기기*/
/* 이거 지우면 설명 3줄 생략 나타남*/
.notion-callout[class*="blue"] .notion-collection-card__property:last-child {
/* 📌 텍스트 숨기기 핵심 코드 */
font-size: 0 !important;
color: transparent !important;
min-height: 0px !important; /* 선이 보일 수 있는 최소 높이 유지 */
overflow: hidden !important;
}
@media (max-width: 768px) {
/* 1. 카드 너비 조정 (기존 유지) */
.notion-callout[class*="blue"] .notion-collection-card {
flex: 0 0 85% !important;
min-width: 85% !important;
}
/* 2. 모바일 썸네일 이미지 비율 변경 (세로형) */
.notion-callout[class*="blue"] .notion-collection-card__cover,
.notion-callout[class*="blue"] .notion-collection-card__cover > div,
.notion-callout[class*="blue"] .notion-collection-card__cover img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* 3. 모바일 제목 크기 제어 */
.notion-callout[class*="blue"] .notion-collection-card__property:first-child,
.notion-callout[class*="blue"] .notion-collection-card__property:first-child * {
font-size: 14px !important;
line-height: 1.3 !important;
margin-bottom: 0px !important;
}
/* 4. 모바일 하단 속성/본문 크기 제어 */
.notion-callout[class*="blue"] .notion-collection-card__property:not(:first-child),
.notion-callout[class*="blue"] .notion-collection-card__property:not(:first-child) *,
.notion-callout[class*="blue"] .notion-collection-card__property:not(:first-child) span {
font-size: 10px !important;
line-height: 1.4 !important;
}
/* 5. 마지막 속성 구분선 간격 조정 (선택 사항) */
.notion-callout[class*="blue"] .notion-collection-card__property:last-child {
margin-top: 0px !important;
padding-top: 0px !important;
}
/*속성 설명 숨기기*/
/* 이거 지우면 설명 3줄 생략 나타남*/
.notion-callout[class*="blue"] .notion-collection-card__property:last-child {
/* 📌 텍스트 숨기기 핵심 코드 */
font-size: 0 !important;
color: transparent !important;
min-height: 0px !important; /* 선이 보일 수 있는 최소 높이 유지 */
overflow: hidden !important;
}
}
/*==========================================
[2-2]📌 원형 도시 버튼 (보라색)
[1] 슬라이드 기능 (가로 스크롤) */
.notion-callout[class*="purple"] .notion-collection-gallery {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 25px !important;
scrollbar-width: none !important;
}
.notion-callout[class*="purple"] .notion-collection-gallery::-webkit-scrollbar {
display: none;
}
/* [2] 카드 너비 및 배경 투명화 */
.notion-callout[class*="purple"] .notion-collection-card {
flex: 0 0 130px !important;
min-width: 130px !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* [3] 이미지 1:1 비율 및 둥근 모서리 */
.notion-callout[class*="purple"] .notion-collection-card__cover,
.notion-callout[class*="purple"] .notion-collection-card__cover > div,
.notion-callout[class*="purple"] .notion-collection-card__cover img {
height: auto !important;
min-height: unset !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
border-radius: 100vw !important;
}
/* 제목 (별도 14px 반영) */
.notion-callout[class*="purple"] .notion-collection-card__property:first-child,
.notion-callout[class*="purple"] .notion-collection-card__property:first-child * {
padding-top: 0px !important; margin-top: -3px !important;
font-size: 14px !important; font-weight: 600 !important; text-align: center;
color: #000000 !important;
margin-bottom: 6px !important;
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
}
/* [4] 더보기 표시 정렬
보라색 콜아웃 내 이미지가 없는 경우
/* 1. 이미지 영역은 깔끔하게 소멸 */
.notion-callout[class*="purple"] .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__cover {
display: none !important;
}
/* 2. 카드 본체를 기준점으로 설정 */
.notion-callout[class*="purple"] .notion-collection-card:not(:has(.notion-collection-card__cover)) {
position: relative !important;
height: 130px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 3. 제목을 카드의 정중앙에 배치 */
.notion-callout[class*="purple"] .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__content {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 0%) !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* 4. 제목 스타일 최종 보정 */
.notion-callout[class*="purple"] .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-item-title {
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
@media (max-width: 768px) {
.notion-callout[class*="purple"] .notion-collection-card {
flex: 0 0 100px !important; /* 모바일에서 더 콤팩트하게 */
min-width: 10px !important;
}
.notion-callout[class*="purple"] .notion-collection-card__property:first-child * {
font-size: 14px !important;
}
}
/*------------------------------------------
[2-3][G 타입4/5] 오버랩형 (브라운)
- 브라운: PC 2열 / 16:9 비율 (가로형)
- 호버 이미지 확대 효과 공통 적용
-----------------------------------------*/
/* 1. 그리드 레이아웃 설정 */
/* 브라운 - PC 2열 */
.notion-callout[class*="brown"] .notion-collection-gallery {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
/* 2. 카드 전체 설정 및 비율 (개별 설정) */
.notion-callout[class*="brown"] .notion-collection-card {
position: relative !important;
background: transparent !important;
border: none !important;
overflow: hidden !important;
border-radius: 15px !important;
}
/* 브라운 비율 16:9 */
.notion-callout[class*="brown"] .notion-collection-card { aspect-ratio: 5 / 2 !important; }
/* 3. */
.notion-callout[class*="brown"] .notion-collection-card__cover,
.notion-callout[class*="brown"] .notion-collection-card__cover > div,
.notion-callout[class*="brown"] .notion-collection-card__cover img {
height: 100% !important;
width: 100% !important;
max-height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
object-fit: cover !important;
transition: transform 0.4s ease-in-out !important;
will-change: transform;
}
/* 4. [호버 효과] 이미지 확대 (공통) */
.notion-callout[class*="brown"] .notion-collection-card:hover .notion-collection-card__cover img {
transform: scale(1.1) !important;
}
/* 5. 텍스트 레이어 (공통) */
.notion-callout[class*="brown"] .notion-collection-card__content {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 60% !important;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 0 15px 15px 15px !important;
z-index: 10 !important;
pointer-events: none;
}
/* 6. 제목 및 설명 스타일 (공통) */
.notion-callout[class*="brown"] .notion-collection-card__property:first-child,
.notion-callout[class*="brown"] .notion-collection-card__property:first-child * {
color: #ffffff !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
display: block !important;
}
.notion-callout[class*="brown"] .notion-collection-card__property:not(:first-child),
.notion-callout[class*="brown"] .notion-collection-card__property:not(:first-child) * {
color: rgba(255,255,255,0.9) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-shadow: 0 1px 5px rgba(0,0,0,0.5) !important;
}
/* 4. [호버 효과] 이미지 확대 (오렌지 & 브라운 공통) */
.notion-callout[class*="brown"] .notion-collection-card:hover .notion-collection-card__cover,
.notion-callout[class*="brown"] .notion-collection-card:hover .notion-collection-card__cover img {
transform: scale(1.1) !important;
}
@media (max-width: 768px) {
/* [브라운] 모바일 1열로 변경 */
.notion-callout[class*="brown"] .notion-collection-gallery {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* 모바일 폰트 크기 조정 */
.notion-callout[class*="brown"] .notion-collection-card__property:first-child * {
font-size: 14px !important;
}
.notion-callout[class*="brown"] .notion-collection-card__content .notion-collection-card__property:not(:first-child) * {
font-size: 11px !important;
}
/* 브라운 1열일 때 모바일 비율 조정 (선택사항) */
.notion-callout[class*="brown"] .notion-collection-card {
aspect-ratio: 16 / 9 !important;
}
}
/*-------------------------------------------
[2-4]히어로 배너(노란색 / 세로형 Full Width
[1] 전역 레이아웃*/
body {
overflow-x: hidden !important;
}
.super-content,
.notion-page-content,
.notion-column {
overflow: visible !important;
}
/* [2] 히어로 배너 본체 (화면 꽉 차게 설정) */
.notion-callout[class*="yellow"] {
background-color: transparent !important;
border: none !important;
padding: 20px 0 !important;
margin-top: -170px !important;
width: 100vw !important;
max-width: none !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important; /* 슬라이드 시 프레임 밖으로 나가야 함 */
}
/* [3] SEO 텍스트 및 h1 숨김 */
.notion-callout[class*="yellow"] .notion-callout__icon,
.notion-callout[class*="yellow"] h1,
.notion-callout[class*="yellow"] .notion-text,
.notion-callout[class*="yellow"] > .notion-callout__content > div:not([class*="collection"]) {
display: none !important;
}
/* [4] 슬라이드 화면 왼쪽 끝 밀착 */
.notion-callout[class*="yellow"] .notion-collection-gallery {
display: flex !important;
width: 100vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 20px !important;
gap: 10px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.notion-callout[class*="yellow"] .notion-collection-gallery::-webkit-scrollbar {
display: none !important;
}
/* [5] 카드 구조 및 첫 번째 카드 그리드 정렬 */
.notion-callout[class*="yellow"] .notion-collection-card {
flex: 0 0 550px !important;
width: 550px !important;
min-height: 1000px !important;
position: relative !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
}
/* 💡 PC 시작점*/
.notion-callout[class*="yellow"] .notion-collection-card:first-child {
margin-left: calc((66vw - 1200px) / 2 + 20px) !important;
}
/* 슬라이드 마지막 여백 */
.notion-callout[class*="yellow"] .notion-collection-card:last-child {
margin-right: 30px !important;
}
@media (max-width: 768px) {
/* [1] 갤러리가 들어있는 노란색 콜아웃만 정밀 타격 (리스트 뷰 간섭 방지) */
.notion-callout[class*="yellow"]:has(.notion-collection-gallery) {
width: 100vw !important;
max-width: none !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-top: -120px !important;
overflow: visible !important;
padding-bottom: 3px !important;
}
/* [2] 갤러리 내부 구조 (리스트 뷰에는 없는 요소들이라 안전함) */
.notion-callout[class*="yellow"] .notion-collection-gallery {
display: flex !important;
flex-direction: row !important;
overflow-x: auto !important;
width: 100vw !important;
padding: 0 !important;
gap: 10px !important;
grid-template-columns: none !important;
grid-auto-columns: none !important;
}
/* [3] 카드 크기 제어 */
.notion-callout[class*="yellow"] .notion-collection-card,
.notion-callout[class*="yellow"] .notion-collection-card > a {
min-width: 75vw !important;
max-width: 75vw !important;
width: 75vw !important;
flex: 0 0 75vw !important;
min-height: 480px !important; /* 반응 확인을 위해 고정값 권장 */
height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* [5] 시작점 정렬 */
.notion-callout[class*="yellow"] .notion-collection-card:first-child {
margin-left: 0px !important;
}
/* [6] Slide for more 글자: 패딩만 유지 */
.notion-callout[class*="yellow"]:has(.notion-collection-gallery) + .notion-text {
padding-left: 27px !important;
margin-top: 0px !important;
}
}
/*-------[5]썸네일 이미지 및 호버효과-----*/
/* 카드 커버 이미지 초기 상태 */
.notion-callout[class*="yellow"] .notion-collection-card__cover,
.notion-callout[class*="yellow"] .notion-collection-card__cover img {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
z-index: 1 !important;
border-radius: 18px !important;
object-fit: cover !important;
/* 📍 [7]의 애니메이션 설정을 여기로 통합 */
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
will-change: transform;
}
/* 📍 카드 호버 시 이미지 확대 (통합 적용) */
.notion-callout[class*="yellow"] .notion-collection-card:hover .notion-collection-card__cover,
.notion-callout[class*="yellow"] .notion-collection-card:hover .notion-collection-card__cover img {
transform: scale(1.08) !important;
}
/* 그라데이션 및 텍스트 영역 */
.notion-callout[class*="yellow"] .notion-collection-card__content {
position: absolute !important;
bottom: 0 !important; left: 0 !important;
width: 100% !important;
height: 75% !important;
padding: 0 30px 45px 30px !important;
z-index: 3 !important;
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0) 100%) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
pointer-events: none;
}
/*[6]슬라이드 안내 표시 (텍스트)*/
/* 1. 노란색 콜아웃 바로 뒤에 오는 텍스트 블록 찾기 */
.notion-callout[class*="yellow"] + .notion-text {
display: block !important;
background-color: transparent !important;
margin-top: -35px !important;
width: 100vw !important;
max-width: none !important;
position: relative !important;
left: 50% !important;
margin-left: -48vw !important;
z-index: 100 !important;
}
/* 2. 가이드 문구 텍스트 스타일 */
.notion-callout[class*="yellow"] + .notion-text > div {
color: rgba(255, 255, 255, 0.4) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
padding-left: 5px !important;
}
/* [7]폰트 스타일 통합 제어 */
/* 속성1 : 다중선택 버튼 */
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(1) {
display: flex !important;
align-items: center !important;
margin-bottom: 8px !important;
}
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(1) .notion-pill {
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 4px !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
/* 속성2 : 제목 */
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(2),
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(2) * {
color: #ffffff !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin-bottom: 15px !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
/* 속성3 : 설명 */
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(3),
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(3) * {
color: rgba(255,255,255,0.9) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
margin-top: 6px !important;
text-shadow: 0 1px 5px rgba(0,0,0,0.5) !important;
}
/* 공통 아이콘 숨김 */
.notion-callout[class*="yellow"] .notion-collection-card__property svg {
display: none !important;
}
@media (max-width: 768px) {
.notion-callout[class*="yellow"] .notion-collection-card {
/* [7]번과 [8]번 중복 통합: 화면 너비에 맞추려면 85vw 추천 */
flex: 0 0 85vw !important;
min-height: 500px !important;
}
.notion-callout[class*="yellow"] .notion-collection-card__content {
padding: 20px !important;
}
/* 모바일 속성 스타일 */
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(1) .notion-pill {
font-size: 10px !important;
padding: 1px 6px !important;
}
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(2),
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(2) * {
font-size: 20px !important;
line-height: 1.3 !important;
}
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(3),
.notion-callout[class*="yellow"] .notion-collection-card__property:nth-child(3) * {
font-size: 11px !important;
line-height: 1.4 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/*===========================================
📌13.Notion 리스트뷰 통합 커스텀 (깃허브)
===================================*/
/*===========================================
📌14. 검색바 레이아웃, 위치 지정 개별 제어*/
/* 🔍 1. 검색창 전용 여백 설정 */
:root {
/* PC용 여백 */
--pc-search-mt: -25px;
--pc-search-mb: -48px;
/* 2. 모바일용 여백 */
--mb-search-mt: -20px;
--mb-search-mb: -40px;
/* 3. 검색창 주변 여백 적용 */
.search-wrapper {
display: flex !important;
visibility: visible !important;
margin-top: var(--pc-search-mt) !important;
margin-bottom: var(--pc-search-mb) !important;
}
/* ✅ PC에서 마이너스 마진이 안 먹히는 현상 방지: 부모 블록 여백 강제 제거 */
.notion-text:has(.search-wrapper) {
margin: 0 !important;
padding: 0 !important;
}
/* 4. 데이터베이스 상단 밀착 */
.notion-collection, .notion-collection-gallery, .notion-collection-list {
margin-top: 0px !important;
}
/* 5. 모바일 전용 수치 반영 */
@media (max-width: 768px) {
.search-wrapper {
margin-top: var(--mb-search-mt) !important;
margin-bottom: var(--mb-search-mb) !important;
}
}
/* 6. 검색바 필터링 시 공백 방지 */
.notion-collection-list { gap: 0px !important; }
.notion-collection-list__item[style*="display: none"] {
margin: 0 !important; padding: 0 !important; border: none !important;
}
/*==========================================
15📌 푸터 제어 (Footer Custom)
/* ---[1] 푸터 기본 레이아웃 설정 ------- */
.super-footer {
padding-top: 100px !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/*-----------------------------------------*/
/* [2] 푸터 텍스트 컨텐츠 제어
[✔️Note] - 좌측 정렬 및 본문 폭 고정
/*1. 첫 번째 문구 (Main Text)*/
.super-footer::before {
content: "This project is continuously updated as new art museums, masterpieces, and movements are added.";
position: absolute;
top: 30px;
width: 100%;
max-width: 1150px;
padding: 0 20px;
box-sizing: border-box;
text-align: center !important;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 1.5;
}
/* 2. 두 번째 문구 (Sub Text) */
.super-footer::after {
content: '"A digital archive dedicated to the evolution of modern vision, from Impressionist light to Modernist expression."';
position: absolute;
top: 55px;
width: 100%;
max-width: 1150px; /* ⭐ 상단 문구와 동일한 폭 */
padding: 0 20px;
box-sizing: border-box;
text-align: center !important;
font-size: 14px;
color: #999999;
font-style: regular;
line-height: 1.5;
}
@media (max-width: 768px) {
/* 1. 모바일 푸터 여백 확장 */
.super-footer {
padding-top: 130px !important;
}
/* 2. 모바일 텍스트*/
.super-footer::before {
top: 25px;
font-size: 10px;
}
.super-footer::after {
top: 75px;
font-size: 10px;
}
}
/*==========================================
16📌 광고 레이아웃 제어 (Ads Optimization)*/
/*[1]AD블록 상하여백 조정*/
.notion-block:has(.ad-container) {
margin-top: -10px !important;
margin-bottom: -10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*[2]컨테이너 최적화*/
.ad-container {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/*17📌 ====모바일뷰 칼럼 간격 정리===*/
@media (max-width: 768px) {
.notion-column-list {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* [2] 세로로 쌓인 각 컬럼 사이의 간격 최소화 */
.notion-column {
margin-top: 0 !important;
margin-bottom: 8px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* [3] 컬럼 내부에 들어있는 첫 번째 블록의 상단 여백 제거 */
.notion-column > *:first-child {
margin-top: 0 !important;
}