/*==========================================
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"]:not(:has(.notion-toggle)) *,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) *::before,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) *::after,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) p,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) div,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) span,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) li,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) strong,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) b {
  font-size: 0.8rem !important;    
  line-height: 1.6 !important;     
}
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) .notion-text-block,
.notion-callout[class*="blue"]:not(:has(.notion-toggle)) [contenteditable="false"] {
  font-size: 0.8rem !important;
}


/* [3] 파란색 콜아웃 내부 콘텐츠 좌측 마진/패딩 박멸 */
.notion-callout[class*="blue"] .notion-callout__content {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* [4] 내부 텍스트 블록의 기본 인덴트(들여쓰기) 무력화 */
.notion-callout[class*="blue"] .notion-text {
    padding-left: 10 !important;
    margin-left: 0 !important;
}


@media (max-width:768px){

.notion-callout[class*="blue"]:not(:has(.notion-toggle)) .notion-text-block,
  .notion-callout[class*="blue"]:not(:has(.notion-toggle)) [contenteditable="false"],
  .notion-callout[class*="blue"]:not(:has(.notion-toggle)) .notion-semantic-string,
  .notion-callout[class*="blue"]:not(:has(.notion-toggle)) .notion-semantic-string span,
  .notion-callout[class*="blue"]:not(:has(.notion-toggle)) .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번 코드의 영향(풀와이드)을 받지 않는 Gray만 지정 */
.notion-callout[class*="brown"],
.notion-callout[class*="orange"]:not(:has(h1)) {
    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*="orange"]:not(:has(h1)) {
    padding: 15px 20px 12px 10px !important;
}

/* 브라운/오렌지 공통: 너비 확보 */
.notion-callout[class*="brown"] .notion-callout__content,
.notion-callout[class*="orange"]:not(:has(h1)) .notion-callout__content {
    margin-left: 0 !important;
    width: 100% !important;
}

/* 오렌지만 좌측 정렬 */
.notion-callout[class*="orange"]:not(:has(h1)) .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 숨김 삭제 260612 확인바람===*/

/*==========================================*/
/*====[타입2] 📌 주황색 콜아웃 + 토글 트리거 : 텍스트 숨김 (SEO 전용) 삭제 260612 확인바람===*/





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