@charset "utf-8";

/* ============================================================================
 * 접힘/펼침 안내 박스 공통 스타일
 *
 * - 팝업 등록/수정 화면의 '크기 입력 안내', 게시판 등록 화면의 '본문 클래스 안내' 등
 *   관리자 입력화면에서 쓰는 안내 박스에 공통으로 사용한다.
 * - 마크업은 /WEB-INF/views/common/editorClassGuide.jsp 참고.
 * ========================================================================== */

.nipaGuideBar{
  width: 100%;
  margin: 6px 0 0;
}
.nipaGuideToggle{
  padding: 3px 8px;
  background: #f7f9fc;
  border: 1px solid #dfe6ef;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #2760ad;
  cursor: pointer;
}
.nipaGuideToggle:hover{
  background: #eef3fa;
}
.nipaGuideArrow{
  display: inline-block;
  margin-right: 4px;
  font-size: 10px;
  transition: transform .15s;
}
.nipaGuideToggle[aria-expanded="true"] .nipaGuideArrow{
  transform: rotate(90deg);
}
.nipaGuideState{
  margin-left: 4px;
  font-weight: 400;
  color: #6c757d;
}
.nipaGuide{
  display: none;
  width: 100%;
  margin: 4px 0 10px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #dfe6ef;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.8;
  color: #333;
}
.nipaGuide.is-open{
  display: block;
}
.nipaGuide b{
  color: #2760ad;
}