/* veranda-ceiling.html 전용 — 스티키 사이드 인덱스 + 롱스크롤 */
:root {
  --color-primary: #4A3520;
  --color-secondary: #A8763E;
  --color-accent: #A8763E;
  --color-bg: #FDFBF6;
  --color-surface: #F5EEE1;
  --color-text: #392A19;
  --color-text-muted: #6B5C48;
  --color-border: #E8D9C0;
  --font-display: 'Fraunces', 'Nanum Myeongjo', serif;
  --font-body: 'Gothic A1', sans-serif;
}

.with-index {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.page-index {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-left: 2px solid var(--color-border);
}
.page-index a {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.page-index a:hover { color: var(--color-primary); }
@media (max-width: 860px) {
  .with-index { grid-template-columns: 1fr; }
  .page-index { position: static; display: flex; overflow-x: auto; border-left: 0; border-top: 2px solid var(--color-border); padding-top: var(--space-3); }
}

.ceiling-diagram { width: 100%; max-width: 420px; margin: 0 auto var(--space-6); display: block; }