/* 도구 페이지 좌측 카테고리 사이드바 (toolnav.js가 주입) */
.tools-index--page { display: flex; gap: 24px; align-items: flex-start; }
.tools-index--page .tools-side { width: 196px; flex: 0 0 196px; position: sticky; top: calc(var(--header-height, 108px) + 16px); }
.tools-index--page .tools-content { flex: 1 1 auto; min-width: 0; }
.tools-index--page .tools-side__hd { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-dark); margin: 0 4px 8px; }
.tools-index--page .tool-nav { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px; background: var(--color-bg-alt); }
.tools-index--page .tool-nav__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px;
  font-size: 0.86rem; font-weight: 600; color: var(--color-text); cursor: pointer; text-decoration: none; transition: .12s; white-space: nowrap; }
.tools-index--page .tool-nav__item:hover { background: var(--color-bg); color: var(--color-accent-dark); }
.tools-index--page .tool-nav__item--fav { color: #a8791a; }
.tools-index--page .tool-nav__item--fav:hover { background: #fff8e6; color: #8a5f00; }

/* 도구 페이지의 tool-hero는 사이드바 옆에서 왼쪽 정렬이 자연스러움 */
.tools-index--page .tool-hero { text-align: left; }

@media (max-width: 860px) {
  .tools-index--page { flex-direction: column; gap: 12px; }
  .tools-index--page .tools-side { width: auto; flex: none; position: static; }
  .tools-index--page .tools-side__hd { display: none; }
  .tools-index--page .tool-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tools-index--page .tool-nav__item { flex: 0 0 auto; }
  .tools-index--page .tool-hero { text-align: center; }
}