@import "https://tistory4.daumcdn.net/tistory/4702226/skin/style.css";

/* 본문 상단에 나오는 기본 목차 */
.toc {
  border: 1px solid #eee;
  font-size: 14px;
  box-shadow: 0 4px 2px rgb(0 0 0 / 10%);
  margin: 20px 0 40px 0;
  user-select: none;
}

.toc .toc-header {
  display: flex;
  padding: 12px;
  align-items: center;
  background-color: var(--white-coral);
}

.toc .toc-header .toc-icon {
  margin-right: 6px;
}

.toggle-btn {
  cursor: pointer;
  transition: transform 0.2s;
}

.toc .toc-header .toggle-btn {
  margin-left: auto;
}

.toc.on .toc-list {
  height: auto;
}

.toc .toc-list {
  height: 0;
  overflow: hidden;
}

.toc-list li {
  list-style: none;
  border-top: 1px solid #eee;
}

.toc-list li a {
  padding: 12px 20px;
  display: block;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.toc-list li a:hover {
  transition: 0.2s;
  background-color: var(--white-gray);
}

/* 벨로그 스타일: 우측 따라다니는 작은 목차창 */
.toc-right {
  position: fixed;
  top: 120px;
  right: calc(50% - 640px); /* 화면 중앙에서 본문 우측 바깥 영역으로 배치 */
  width: 200px;
  padding-left: 16px;
  border-left: 2px solid #eee;
  z-index: 100;
}

.toc-right .toc-header {
  display: none; /* 벨로그 스타일은 헤더나 토글 버튼 없이 리스트만 깔끔하게 노출 */
}

.toc-right .toc-list li {
  border: none;
}

.toc-right .toc-list li a {
  padding: 4px 0;
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s;
}

/* 현재 읽고 있는 목차 하이라이트 (벨로그 핵심 기능) */
.toc-right .toc-list li a:hover,
.toc-right .toc-list li a.active {
  font-weight: 600;
  color: #111;
  transform: translateX(4px); /* 살짝 우측으로 이동하는 인터랙션 */
}

/* 들여쓰기 깊이 설정 */
.toc-right .toc-list li[data-tag="1"] a {
  padding-left: 12px;
}
.toc-right .toc-list li[data-tag="2"] a {
  padding-left: 24px;
}

/* 화면이 너무 좁아지면 우측 목차 숨기기 */
@media screen and (max-width: 1400px) {
  .toc-right {
    display: none;
  }
}