/* ==========================================
09-1📌 파란색 콜아웃 밀착 제어 (PC/모바일 분리)
========================================== */
/* [1] 공통 초기화 (항상 적용) */
.notion-callout[class*="blue"] {
  background-color: transparent !important; 
  border: none !important;  
  border-radius: 0px !important;
  padding: 0px !important;
  margin: -10px 0 !important; 
  color: #37352f !important;
}

  .notion-callout[class*="blue"] .notion-divider {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
    border-top:   0px solid rgba(0,0,0,0.1) !important;
  }


/* [3] 공통 폰트 및 행간 제어 */
.notion-callout[class*="blue"] *,
.notion-callout[class*="blue"] p,
.notion-callout[class*="blue"] div,
.notion-callout[class*="blue"] span,
.notion-callout[class*="blue"] li {
  font-size: 0.8rem !important;    
  line-height: 2 !important;
  margin: 0 !important;
}


/* 09-1📌 파란색 콜아웃 모바일 밀착 통합 제어 */
@media (max-width: 768px) {
  
  /* 0. 제목과 콜아웃 간격 */
  h1 + .notion-callout[class*="blue"],
  h2 + .notion-callout[class*="blue"],
  h3 + .notion-callout[class*="blue"],
  p + .notion-callout[class*="blue"] {
    margin-top: -15px !important;
  }

/* 1. 콜아웃 내부 레이아웃 및 칼럼 간격 밀착 */
  .notion-callout[class*="blue"] .notion-column-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 0 !important; /* 칼럼 사이의 공간(gap)을 0으로 제거 */
  }

  .notion-callout[class*="blue"] .notion-column {
    margin-top: 0 !important;
    margin-bottom: -7px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
/* 2. 내부 텍스트 밀착 및 모바일 행간 강제 적용 */
  .notion-callout[class*="blue"] .notion-text,
  .notion-callout[class*="blue"] .notion-text-block,
  .notion-callout[class*="blue"] div,
  .notion-callout[class*="blue"] span,
  .notion-callout[class*="blue"] p,
  .notion-callout[class*="blue"] li {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
    line-height: 1.4 !important; 
  }

  /* 3. 구분선 제어 (이제 확실히 모바일 전용이 됨) */
  .notion-callout[class*="blue"] .notion-divider {
    margin-top: 15px !important; 
    margin-bottom: 10px !important; 
    height: 1px !important;
    border-top: 0px solid rgba(0,0,0,0.1) !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;
}


/*=========================================
⚪[우측 정렬 트리거] 그레이 콜아웃 + 불렛 리스트
   PC: 우측 정렬 / 모바일: 좌측 정렬 (여백 제거 공통)
=========================================*/

/* [1] 공통 설정: 여백 제거 및 아이콘 숨김 */
.notion-callout[class*="gray"]:has(ul) {
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.notion-callout[class*="gray"]:has(ul) .notion-callout__content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.notion-callout[class*="gray"]:has(ul) .notion-callout__icon {
    display: none !important;
}
.notion-callout[class*="gray"]:has(ul) ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 10 !important;
    display: flex !important;
    flex-direction: column !important;
}
.notion-callout[class*="gray"]:has(ul) li {
    width: 100% !important;
    margin: 10 !important;
    padding: 0 !important;
}

/* [2] PC 버전 (769px 이상): 우측 정렬 적용 */
@media (min-width: 769px) {
    .notion-callout[class*="gray"]:has(ul) {
        text-align: right !important;
    }
    .notion-callout[class*="gray"]:has(ul) ul {
        align-items: flex-end !important; /* 오른쪽 끝으로 밀기 */
    }
    .notion-callout[class*="gray"]:has(ul) li {
        text-align: right !important;
        justify-content: flex-end !important;
        display: flex !important;
    }
    .notion-callout[class*="gray"]:has(ul) .notion-callout__content {
        text-align: right !important;
    }
}

/* [3] 모바일 버전 (768px 이하): 좌측 정렬 및 상하 여백 완전 제거 */
@media (max-width: 768px) {
    .notion-callout[class*="gray"]:has(ul) {
        text-align: left !important;
        /* 상하 패딩을 0으로 만들어 수직 여백 제거 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -10px !important;    /* 미세한 상단 공백까지 제거 (필요시 조절) */
        margin-bottom: -4px !important; /* 미세한 하단 공백까지 제거 (필요시 조절) */
    }

    .notion-callout[class*="gray"]:has(ul) ul {
        align-items: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .notion-callout[class*="gray"]:has(ul) li {
        text-align: left !important;
        justify-content: flex-start !important;
        margin: 20 !important;  /* 항목 간 상하 간격 제거 */
        padding: 0 !important;
        line-height: 1.2 !important; /* 줄간격을 조절해 위아래 여백 압축 */
    }

    .notion-callout[class*="gray"]:has(ul) .notion-callout__content {
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}








/* ==================================================== */
/* 🟧 주황색 콜아웃 바레이션 : 텍스트 숨김 전용 🟧 */
/*====[타입1] 📌 주황색 콜아웃 : h1, 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;
}

/*==========================================*/
/*====[타입2] 📌 주황색 콜아웃 + 토글 트리거 : 텍스트 숨김 (SEO 전용) ===*/
/* 1. 토글이 포함된 주황색 콜아웃만 외형 투명화 */
.notion-callout[class*="orange"]:has(.notion-toggle) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
/* 2. 아이콘 숨김 (토글형 전용) */
.notion-callout[class*="orange"]:has(.notion-toggle) .notion-callout__icon {
    display: none !important;
}
/* 3. 토글 본문(Content) 정밀 숨김 */
.notion-callout[class*="orange"]:has(.notion-toggle) .notion-toggle > div:not(.notion-toggle__trigger),
.notion-callout[class*="orange"]:has(.notion-toggle) .notion-toggle__content {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* 4. 오직 토글이 들어있는 주황색 콜아웃 내의 요소들만 숨깁니다. */
.notion-callout[class*="orange"]:has(.notion-toggle) .notion-callout__content > .notion-text,
.notion-callout[class*="orange"]:has(.notion-toggle) .notion-callout__content code,
.notion-callout[class*="orange"]:has(.notion-toggle) .notion-callout__content > p {
    display: none !important;
}





/*==========[#3] 화이트 풀배경 (H1 및 H2 전용) 삭제==========*/