@charset "utf-8";
/* ============================================================
   scroll-offset.css — 앵커·스크롤 이동 시 고정 헤더에 가리는 문제 보정 (KTDI 커스텀)

   증상 : 섬유개론(/info/fiber)에서 좌측 트리·프로세스 탭을 누르면
          본문 **첫 줄이 헤더 아래로 들어가** 잘려 보인다.

   🔴 원인 — 헤더가 `position: fixed` 인데 스크롤 목적지에 그 높이만큼의 여유가 없다.
     · `.header` : fixed · top 0 · z-index 9999 (main.css)
     · `fiber.js`: scrollIntoView({ block: 'start' }) → 대상의 **상단을 뷰포트 y=0 에 맞춘다**
     → y=0 은 헤더가 덮고 있는 자리다. 목적지가 헤더 높이만큼 위로 밀려 올라간 셈이 된다.

   🔴 고치는 자리는 JS 가 아니라 **여기(CSS)** 다.
     `scroll-padding-top` 은 `scrollIntoView` 와 **앵커(#id) 이동 전반**에 함께 듣는다.
     JS 쪽에서 `scrollTo(top - headerH)` 로 빼면 그 화면 하나만 고쳐지고,
     같은 증상이 다른 화면에서 또 나온다(그리고 헤더 높이 사본이 늘어난다).

   ⚠ 값의 출처 — `.header` 에는 height 가 없고 **padding + 로고 높이**로 정해진다(main.css).
     시안 원본(main.css)은 수정 금지라 변수를 여기서 따로 둔다. main.css 를 고치면 여기도 함께 고칠 것.
       기본       : padding 0.8rem×2(25.6px) + 로고 60px = 85.6 → 86px
       ≤1400px    : padding 0.6rem×2(19.2px) + 로고 60px = 79.2 → 80px
       ≤1100px    : padding 0.6rem×2(19.2px) + 로고 40px = 59.2 → 60px
     (reset.css 가 `font-size:100%` 라 1rem = 16px)
   ============================================================ */

:root {
	--header-h: 86px;
}

@media screen and (max-width: 1400px) {
	:root {
		--header-h: 80px;
	}
}

@media screen and (max-width: 1100px) {
	:root {
		--header-h: 60px;
	}
}

/* 🔴 스크롤 목적지 위에 헤더 높이만큼 여유를 둔다.
   reset.css 의 `html{scroll-behavior:smooth}` 와 짝으로 동작한다. */
html {
	scroll-padding-top: var(--header-h);
}