@charset "UTF-8";
/*****
 * 목차 구조 꾸미기 (fragmentDecorator.js와 함께 사용)
 *
 * odyssey-custom.css가 원본 스킨을 다듬는 역할이라면, 이 파일은 목차 구조에 디자인을 입히는 역할
 *
 * 관리 대상 (클래스 이름은 constants.js에 정의되어 있고, fragmentDecorator.js가 붙임)
 *   본문 (.contents_style)
 *   - MainFragment  (#x)   : h2.main-fragment            → 띠 배경 + 진한 번호 배지
 *   - SubFragment   (#x-y) : div.sub-fragment-frame      → ㄱ자 테두리 상자 + 연한 번호 배지 + 굵은 제목
 *   - MinorHeading  (소제목): p.minor-heading             → 짧은 밑줄
 *   - SeriesHeading (#0)   : h2.series-heading           → MainFragment와 같은 모양 (main-fragment 클래스도 가짐)
 *   본문 맨 위 제목의 위 여백 제거는 odyssey-custom.css의 '> *:first-child' 규칙이 모든 요소에 공통으로 처리함
 *   목차 상자 (.fragment-index-box)
 *   - li.main-index / li.sub-index : 본문 스타일을 축소해서 그대로 따라감
 *
 * 여기서 쓰인 !important는, 스킨 규칙이 같은 속성을 더 강하게 지정하고 있어 덮어써야 하는 곳에만 씀.
 */
/***** 테마 (메인색ㆍ서브색 두 개만 정의. $theme-name만 바꾸면 전체 색이 바뀜) *****/
/***** 색 시스템 (테마 → 팔레트 → 역할 이름으로 꺼내 쓰기: c(accent)) *****/
/***** 치수 (본문(article)과 목차 상자(index)는 같은 모양을 크기만 다르게 씀) *****/
/***** 모양 (본문과 목차 상자가 공유) *****/
/***** 본문 *****/
.contents_style .fragment-number {
  border-radius: 999px;
  font-weight: 700;
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  font-size: 0.75em;
  line-height: 1.5;
  vertical-align: middle;
}
.contents_style h2.main-fragment {
  margin: 56px 0 20px;
  padding: 14px 18px;
  background: rgb(238, 238, 238);
  border-radius: 6px;
}
.contents_style h2.main-fragment .fragment-number {
  background: #4a4a4a;
  color: #fff;
}
.contents_style h4.sub-fragment {
  margin: 32px 0 14px 12px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid rgb(160, 160, 160);
}
.contents_style h4.sub-fragment .fragment-number {
  background: #e6e6e6;
  color: #4a4a4a;
}
.contents_style div.sub-fragment-frame {
  margin: 0 !important;
  padding: 14px 0 4px 20px;
  border-left: 3px solid rgb(160, 160, 160);
  border-top: 3px solid rgb(160, 160, 160);
  border-top-left-radius: 8px;
}
.contents_style div.sub-fragment-frame + div.sub-fragment-frame {
  margin-top: 56px !important;
}
.contents_style div.sub-fragment-frame > h4.sub-fragment {
  margin: 0 0 16px;
  padding: 0;
  border-left: none;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.contents_style p.minor-heading {
  margin: 24px 0 8px;
}
.contents_style p.minor-heading b,
.contents_style p.minor-heading strong {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid rgb(199, 199, 199);
}

/***** 목차 상자 (스킨이 li 여백ㆍ글자 크기ㆍ번호를 지정하므로 !important가 많음) *****/
.fragment-index-box {
  /* 번호 배지
   * 스킨의 "1." / "1-1." 번호를 li의 data-marker로 "#1" / "#1-1"로 바꿔 씀.
   * 글꼴(Noto Sans KR)은 위 여백이 커서 line-height:1 상자 안에서 숫자가 약 0.065em 아래로 쏠림.
   * → 위 padding을 0.13em 작게 줘서 보정 (픽셀 측정으로 위아래 간격 동일 확인). 글꼴을 바꾸면 이 두 padding 값을 다시 맞춰야 함.
   * li가 flex라서 align-self로 배지가 여러 줄 항목 높이만큼 늘어나지 않게 함.
   */
}
.fragment-index-box li.main-index::before,
.fragment-index-box li.sub-index::before {
  border-radius: 999px;
  font-weight: 700;
  content: "#" attr(data-marker) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: auto !important;
  height: auto;
  margin: 0.3em 8px 0 0;
  padding: 0.335em 8px 0.465em !important;
  font-size: 0.72em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.fragment-index-box li.main-index a,
.fragment-index-box li.sub-index a {
  font-size: inherit !important;
}
.fragment-index-box li.main-index {
  margin: 10px 0 6px !important;
  padding: 5px 9px !important;
  background: rgb(238, 238, 238);
  border-radius: 5px;
  font-size: 16px !important;
}
.fragment-index-box li.main-index::before {
  background: #4a4a4a;
  color: #fff;
}
.fragment-index-box li.main-index:first-child {
  margin-top: 0 !important;
}
.fragment-index-box li.sub-index {
  margin: 0 0 6px 8px !important;
  padding: 5px 0 2px 9px !important;
  border-left: 2px solid rgb(160, 160, 160);
  border-top: 2px solid rgb(160, 160, 160);
  border-top-left-radius: 6px;
  font-size: 14px !important;
}
.fragment-index-box li.sub-index::before {
  background: #e6e6e6;
  color: #4a4a4a;
}

/*# sourceMappingURL=fragment-decoration.css.map */