Link the web book to the Causal Inference Hub

README.md

@@ -23,7 +23,7 @@ Matheus Facure의 [Causal Inference for The Brave and True](https://matheusfacur
   <a href="https://doi.org/10.5281/zenodo.4445778"><img src="https://img.shields.io/badge/%EC%9B%90%EC%84%9C%20DOI-10.5281%2Fzenodo.4445778-blue" alt="원서 DOI"></a>
 </p>
 
-**[웹북으로 읽기](https://causalinferencelab.github.io/Causal-Inference-with-Python/)** · [용어집](https://causalinferencelab.github.io/Causal-Inference-with-Python/glossary.html) · [번역 가이드](TRANSLATION_GUIDE.md) · [오류 제보](https://github.com/CausalInferenceLab/Causal-Inference-with-Python/issues)
+**[웹북으로 읽기](https://causalinferencelab.github.io/Causal-Inference-with-Python/)** · [인과추론 허브](https://causalinferencelab.github.io/) · [용어집](https://causalinferencelab.github.io/Causal-Inference-with-Python/glossary.html) · [번역 가이드](TRANSLATION_GUIDE.md) · [오류 제보](https://github.com/CausalInferenceLab/Causal-Inference-with-Python/issues)
 
 <br>
 
@@ -35,6 +35,8 @@ Matheus Facure의 [Causal Inference for The Brave and True](https://matheusfacur
 
 번역은 전문 번역가가 아니라 데이터 분석가, 데이터 과학자, 연구자들이 함께 했습니다. 용어는 『실무로 통하는 인과추론 with 파이썬』(한빛미디어)과 맞췄고, 핵심 용어는 처음 나올 때 영어를 함께 적었습니다. 어색한 문장이나 잘못된 번역을 발견하면 언제든 알려 주세요.
 
+이 책은 인과추론팀의 오픈소스와 자료를 L0–L4 커리큘럼으로 엮은 [Causal Inference Hub](https://causalinferencelab.github.io/)의 L1 중심 자료입니다. [허브에서 이 책의 자리](https://causalinferencelab.github.io/#station=Causal-Inference-with-Python)를 열면 앞뒤로 이어지는 자료를 볼 수 있습니다.
+
 <br>
 
 ## 목차

book/_quarto.yml

@@ -39,6 +39,7 @@ book:
     style: docked
     collapse-level: 3
     header: |
+      <a class="hub-back" href="https://causalinferencelab.github.io/"><span aria-hidden="true">←</span> 인과추론 허브로 가기</a>
       <a class="brand-lockup" href="https://pseudo-lab.com/" target="_blank" rel="noopener" aria-label="가짜연구소">
         <img class="brand-pseudolab only-light" src="assets/pseudolab-dark.png" alt="가짜연구소 Pseudo Lab">
         <img class="brand-pseudolab only-dark" src="assets/pseudolab-light.png" alt="가짜연구소 Pseudo Lab">
@@ -48,6 +49,8 @@ book:
   page-footer:
     left: "[가짜연구소](https://pseudo-lab.com/) 인과추론팀 옮김 · 원서 © [Matheus Facure](https://matheusfacure.github.io/python-causality-handbook/landing-page.html)"
     center:
+      - text: 인과추론 허브
+        href: https://causalinferencelab.github.io/
       - text: 번역 가이드
         href: https://github.com/CausalInferenceLab/Causal-Inference-with-Python/blob/main/TRANSLATION_GUIDE.md
       - text: 오류 제보
@@ -120,6 +123,7 @@ format:
       - sidebar-resize.html
       - chapter-toc.html
       - site-search.html
+      - hub-next.html
       - comments.html
     include-in-header:
       - text: |

book/hub-next.html

@@ -0,0 +1,33 @@
+<script>
+// 장 끝에 Causal Inference Hub에서 이어 볼 자료를 한 장의 카드로 보여 준다. 의견 나누기(comments.html)보다 먼저 붙는다.
+document.addEventListener("DOMContentLoaded", function () {
+  var main = document.getElementById("quarto-document-content");
+  if (!main || document.querySelector(".hero")) return;
+  var page = location.pathname.split("/").pop().replace(/\.html$/, "");
+  var hub = "https://causalinferencelab.github.io/";
+  var next = {
+    oce: ["OCE-Materials", "온라인 통제 실험", "이 장의 무작위 실험을 실무의 A/B 테스트로 잇는 스터디 자료입니다."],
+    practice: ["causal-inference-practice", "산업 사례 템플릿", "인과 그래프부터 회귀 불연속 설계까지, 기법마다 산업 사례를 붙인 템플릿입니다. 이 장의 기법을 실제 문제에 적용해 볼 수 있습니다."],
+    causalml: ["causal-inference-with-causalML", "CausalML 스터디", "이 책의 이론을 uber/causalml 코드로 다시 구현하며 이론에서 코드까지 잇는 스터디입니다."]
+  };
+  var n = parseInt(page, 10), pick;
+  if (n === 2) pick = next.oce;
+  else if (n >= 17 && n <= 23) pick = next.causalml;
+  else if (n >= 1 && n <= 25) pick = next.practice;
+  else if (/^(Debiasing|When-Prediction|Prediction-Metrics)/.test(page)) pick = next.causalml;
+  else if (/^Conformal/.test(page)) pick = next.practice;
+  if (!pick) return;
+  var box = document.createElement("aside");
+  box.className = "hub-next";
+  box.setAttribute("aria-label", "Causal Inference Hub에서 이어 보기");
+  box.innerHTML =
+    '<p class="hub-next-k"><img src="assets/causal-lab-mark.png" alt="" width="18" height="21"><span>Causal Inference Hub에서 이어 보기</span></p>' +
+    '<p class="hub-next-t">' + pick[1] + '</p>' +
+    '<p class="hub-next-d">' + pick[2] + '</p>' +
+    '<p class="hub-next-a">' +
+    '<a class="primary" href="' + hub + '#station=' + pick[0] + '">허브에서 보기</a>' +
+    '<a href="' + hub + '#station=Causal-Inference-with-Python">허브에서 이 책의 자리</a>' +
+    '</p>';
+  main.appendChild(box);
+});
+</script>

book/index.qmd

@@ -7,6 +7,11 @@ aliases:
 ```{=html}
 <div class="hero">
   <div class="hero-main">
+    <nav class="hero-crumb" aria-label="위치">
+      <a href="https://causalinferencelab.github.io/">인과추론 허브</a>
+      <span aria-hidden="true">›</span>
+      <a href="https://causalinferencelab.github.io/#station=Causal-Inference-with-Python">커리큘럼 L1</a>
+    </nav>
     <div class="hero-brand">
       <img class="hero-pseudolab" src="assets/pseudolab-light.png" alt="가짜연구소 Pseudo Lab">
       <span class="hero-brand-divider"></span>
@@ -87,6 +92,19 @@ aliases:
 
 1부는 학계에서 자리 잡은 내용이라 인과적 질문을 다룰 때 기댈 수 있는 튼튼한 토대가 됩니다. 2부는 저자가 핀테크 회사에서 쌓은 실무 경험에서 나온 내용이 많아 더 실험적이고, 그만큼 현업에 바로 가져다 쓸 거리가 많습니다.
 
+## 인과추론 허브에서 이어 가기
+
+이 책은 가짜연구소 인과추론팀의 [Causal Inference Hub](https://causalinferencelab.github.io/)에 있는 자료입니다. 허브는 팀이 2022년부터 만든 오픈소스와 자료를 L0부터 L4까지 커리큘럼으로 엮어 둔 곳이고, 이 책은 L1('어떻게 추정하나')의 중심 자료입니다. 허브에서는 이 책을 'Brave & True 인과추론 번역서'로 소개합니다.
+
+인과추론이 처음이라면 L0의 [영상으로 여는 인과추론](https://causalinferencelab.github.io/causal-studio/)으로 먼저 감을 잡고 넘어와도 좋습니다. 책을 마친 뒤에는 관심에 따라 이렇게 이어 갈 수 있습니다.
+
+- 내 데이터에 적용해 보고 싶다면: [산업 사례 템플릿](https://causalinferencelab.github.io/#station=causal-inference-practice), [책 예제 코드](https://causalinferencelab.github.io/#station=causal-inference-in-python-code)
+- 메타러너와 이중 머신러닝을 코드로 더 익히고 싶다면: ML 트랙의 [CausalML 스터디](https://causalinferencelab.github.io/#station=causal-inference-with-causalML)
+- A/B 테스트를 제대로 하고 싶다면: 실험 트랙의 [온라인 통제 실험](https://causalinferencelab.github.io/#station=OCE-Materials)
+- 헬스케어와 규제 연구가 궁금하다면: 연구 트랙의 [RWE 규제 가이드라인](https://causalinferencelab.github.io/#station=Bridging-Causal-Inference-and-Real-World-Evidence-A-Study-of-FDA-and-Other-Regulatory-Guidelines)
+
+각 장 끝에도 그 장 다음에 보면 좋은 허브 자료를 하나씩 붙여 두었습니다. 전체 흐름은 [허브에서 이 책의 자리](https://causalinferencelab.github.io/#station=Causal-Inference-with-Python)를 열어 보면 앞뒤 자료와 함께 한눈에 보입니다.
+
 ## 이렇게 읽어 주세요
 
 각 장은 원서의 주피터 노트북을 그대로 옮긴 것이라 코드와 출력이 원서와 같습니다. 노트북 파일은 [GitHub 저장소](https://github.com/CausalInferenceLab/Causal-Inference-with-Python/tree/main/causal-inference-for-the-brave-and-true)에서 내려받아 직접 실행해 볼 수 있습니다. 그래프를 그리는 코드처럼 길어서 접어 둔 셀은 **코드**를 눌러 펼치면 됩니다.

book/styles-dark.scss

@@ -144,3 +144,36 @@ body {
 .ch-chip b {
   color: #c9bcf5;
 }
+
+.hub-back {
+  background: rgba(180, 165, 234, 0.14);
+  color: #c9bcf5;
+}
+
+.hub-back:hover {
+  background: rgba(180, 165, 234, 0.24);
+  color: #eceaff;
+}
+
+.hub-next {
+  border-color: #2b2e40;
+  background: linear-gradient(135deg, rgba(180, 165, 234, 0.12) 0%, #14151f 75%);
+}
+
+.hub-next .hub-next-k {
+  color: #c9bcf5;
+}
+
+.hub-next .hub-next-t {
+  color: #eceaff;
+}
+
+.hub-next .hub-next-a a {
+  border-color: rgba(180, 165, 234, 0.35);
+}
+
+.hub-next .hub-next-a a.primary {
+  background: #b4a5ea;
+  border-color: #b4a5ea;
+  color: #14151f;
+}

book/styles.scss

@@ -428,6 +428,120 @@ main:has(.hero) #title-block-header {
   text-align: center;
 }
 
+// 사이드바 맨 위: 인과추론 허브로 돌아가는 길
+.hub-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0.1rem 0 0.8rem;
+  padding: 0.28rem 0.7rem;
+  border-radius: 999px;
+  background: $lavender-soft;
+  color: $indigo;
+  font-size: 0.8rem;
+  font-weight: 650;
+  text-decoration: none;
+  transition: background-color 0.15s ease;
+}
+
+.hub-back:hover {
+  background: rgba($lavender, 0.32);
+  color: $navy;
+}
+
+// 첫 화면 위치 표시: 인과추론 허브 › 서가
+.hero .hero-crumb {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 1.1rem;
+  font-size: 0.82rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.hero .hero-crumb a {
+  color: rgba(255, 255, 255, 0.88);
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
+}
+
+.hero .hero-crumb a:hover {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+
+// 장 끝: Causal Inference Hub에서 이어 볼 자료
+.hub-next {
+  margin: 2.6rem 0 0;
+  padding: 1.2rem 1.3rem 1.1rem;
+  border-radius: 14px;
+  border: 1px solid rgba($indigo, 0.18);
+  background: linear-gradient(135deg, $lavender-soft 0%, #fff 70%);
+}
+
+.hub-next p {
+  margin: 0;
+}
+
+.hub-next .hub-next-k {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.45rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: $indigo;
+}
+
+.hub-next .hub-next-k img {
+  display: block;
+  flex: none;
+  width: 18px;
+  height: auto;
+  margin: 0;
+}
+
+.hub-next .hub-next-t {
+  margin-top: 0.45rem;
+  font-size: 1.12rem;
+  font-weight: 750;
+  color: $navy;
+}
+
+.hub-next .hub-next-d {
+  margin-top: 0.25rem;
+  font-size: 0.92rem;
+  line-height: 1.65;
+}
+
+.hub-next .hub-next-a {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.85rem;
+}
+
+.hub-next .hub-next-a a {
+  display: inline-block;
+  padding: 0.4rem 0.95rem;
+  border-radius: 999px;
+  border: 1px solid rgba($indigo, 0.3);
+  font-size: 0.86rem;
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.hub-next .hub-next-a a.primary {
+  background: $indigo;
+  border-color: $indigo;
+  color: #fff;
+}
+
+.hub-next .hub-next-a a:hover {
+  opacity: 0.88;
+}
+
 // 사이드바 상단: 가짜연구소 × 인과추론팀
 .brand-lockup {
   display: flex;