/*==========================================
09-1📌 텍스트 콜아웃 제어 (주석용)*/
/* [1] 파란색 콜아웃을 투명화*/
.notion-callout[class*="blue"] {
  background-color: transparent !important; 
  border: 0px solid transparent !important;  
  border-radius: 0px !important;
  padding: 0px !important;
  color: #37352f !important;
}

/* 🚨 [추가] 파란색 콜아웃 내부의 순정 이모지 아이콘 부피 완전 박멸 (모바일 공백 원인 제거) */
.notion-callout[class*="blue"] .notion-callout__icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !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-text-block,
.notion-callout[class*="blue"] [contenteditable="false"],
.notion-callout[class*="blue"] .notion-semantic-string,
.notion-callout[class*="blue"] .notion-semantic-string span,
.notion-callout[class*="blue"] .notion-callout__content *{

    font-size:.7rem !important;
    line-height:1.6 !important;
  }

  .notion-callout[class*="blue"] .notion-text:first-child,
  .notion-callout[class*="blue"] p:first-child,
  .notion-callout[class*="blue"] .notion-callout__content{
      margin-top:0 !important;
      padding-top:0 !important;
  }

  .notion-callout[class*="blue"] ul,
  .notion-callout[class*="blue"] ol{
      padding-left:18px !important;
      margin-top:8px !important;
  }

  .notion-callout[class*="blue"]{
      display:block !important;
      padding:0 !important;
      margin-bottom:-15px !important;
      width:100% !important;
  }

}






/*==========================================
09-3📌 콜아웃 텍스트 제어 (상세페이지 적용)
[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;
}


/*=========================================
09-4 ⚪[우측 정렬 트리거] 그레이 콜아웃 + 불렛 리스트
   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;
    }
}








/* ==================================================== */
/* 09-5 🟧 주황색 콜아웃 바레이션 : 텍스트 숨김 전용 🟧 */
/*====[타입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 전용) 삭제==========*/