Update landing page and polish translations

book/_quarto.yml

@@ -110,6 +110,8 @@ format:
     html-math-method: mathjax
     df-print: default
     link-external-newwindow: true
+    back-to-top-navigation: true
+    include-after-body: sidebar-resize.html
     include-in-header:
       - text: |
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">

book/index.qmd

@@ -6,18 +6,26 @@ aliases:
 
 ```{=html}
 <div class="hero">
-  <img class="hero-mark" src="assets/causal-lab-mark.png" alt="가짜연구소 인과추론팀 로고">
-  <div class="hero-brand">
-    <img class="hero-pseudolab" src="assets/pseudolab-light.png" alt="가짜연구소 Pseudo Lab">
-    <span class="hero-brand-divider"></span>
-    <span class="hero-brand-team">인과추론팀 <b>Causal-Lab</b></span>
+  <div class="hero-main">
+    <div class="hero-brand">
+      <img class="hero-pseudolab" src="assets/pseudolab-light.png" alt="가짜연구소 Pseudo Lab">
+      <span class="hero-brand-divider"></span>
+      <span class="hero-brand-team">인과추론팀 <b>Causal-Lab</b></span>
+    </div>
+    <p class="hero-title">Python으로 하는<br>인과추론</p>
+    <p class="hero-sub">Causal Inference for The Brave and True 한국어판. 인과추론의 기초부터 실무 응용까지, 모든 실습을 파이썬으로.</p>
+    <div class="hero-actions">
+      <a class="primary" href="01-Introduction-To-Causality.html">1장부터 읽기</a>
+      <a class="ghost" href="https://github.com/CausalInferenceLab/Causal-Inference-with-Python">GitHub</a>
+      <a class="ghost" href="https://matheusfacure.github.io/python-causality-handbook/landing-page.html">원서 보기</a>
+    </div>
   </div>
-  <p class="hero-title">Python으로 하는<br>인과추론</p>
-  <p class="hero-sub">Causal Inference for The Brave and True 한국어판. 인과추론의 기초부터 실무 응용까지, 모든 실습을 파이썬으로.</p>
-  <div class="hero-actions">
-    <a class="primary" href="01-Introduction-To-Causality.html">1장부터 읽기</a>
-    <a class="ghost" href="https://github.com/CausalInferenceLab/Causal-Inference-with-Python">GitHub</a>
-    <a class="ghost" href="https://matheusfacure.github.io/python-causality-handbook/landing-page.html">원서 보기</a>
+  <div class="hero-aside">
+    <img class="hero-mark" src="assets/causal-lab-mark.png" alt="가짜연구소 인과추론팀 로고">
+    <div class="hero-links">
+      <a href="https://product.kyobobook.co.kr/detail/S000212577153"><span class="tag">도서</span><span class="name">실무로 통하는 인과추론</span></a>
+      <a href="https://www.hanbit.co.kr/product/C0781073345"><span class="tag">강의</span><span class="name">AI 인과추론 실무</span></a>
+    </div>
   </div>
 </div>
 ```
@@ -30,6 +38,24 @@ aliases:
 
 원서는 가볍지만 엄밀하게 효과 추정을 배우는 책입니다. 모든 실습을 파이썬으로 하고, 저자가 찾을 수 있는 밈은 최대한 넣었습니다. 딱딱한 교과서보다는 옆자리 동료가 설명해 주는 느낌으로 읽어 주세요.
 
+```{=html}
+<div class="further">
+  <p class="further-lead">이 책으로 기본기를 다진 뒤 실무 사례와 함께 더 깊이 들어가고 싶다면, 같은 저자의 책과 그 책을 바탕으로 한 강의를 함께 보세요.</p>
+  <div class="further-cards">
+    <a class="further-card" href="https://product.kyobobook.co.kr/detail/S000212577153">
+      <span class="further-tag">도서 · 한빛미디어</span>
+      <span class="further-title">실무로 통하는 인과추론 with 파이썬</span>
+      <span class="further-desc">Matheus Facure의 『Causal Inference in Python』 번역서입니다. 이 웹북과 같은 용어를 쓰고, 회사에서 자주 마주치는 문제를 인과추론으로 푸는 과정을 더 자세히 다룹니다.</span>
+    </a>
+    <a class="further-card" href="https://www.hanbit.co.kr/product/C0781073345">
+      <span class="further-tag">강의 · 한빛+</span>
+      <span class="further-title">데이터 실무자의 사고력 강화: AI 인과추론 실무</span>
+      <span class="further-desc">번역서의 역자 신진수가 진행합니다. A/B 테스트의 한계, 준실험, 매칭과 성향점수, 이중차분법, 도구변수, 인과 머신러닝을 실제 분석 사례와 함께 풀고, 실험 결과를 의사결정으로 잇는 방법까지 다룹니다.</span>
+    </a>
+  </div>
+</div>
+```
+
 ## 이 책의 구성
 
 원서의 25개 장과 부록 5편을 모두 옮겼습니다.

book/sidebar-resize.html

@@ -0,0 +1,44 @@
+<script>
+(function () {
+  var KEY = "cil-sidebar-width", MIN = 220, MAX = 480;
+  var root = document.documentElement;
+  try {
+    var saved = parseInt(localStorage.getItem(KEY), 10);
+    if (saved >= MIN && saved <= MAX) root.style.setProperty("--sidebar-w", saved + "px");
+  } catch (e) {}
+  document.addEventListener("DOMContentLoaded", function () {
+    if (!document.body.classList.contains("docked") || !document.getElementById("quarto-sidebar")) return;
+    var bar = document.createElement("div");
+    bar.className = "sidebar-resizer";
+    bar.setAttribute("role", "separator");
+    bar.setAttribute("aria-orientation", "vertical");
+    bar.title = "끌어서 목차 너비 조절 (두 번 누르면 원래대로)";
+    document.body.appendChild(bar);
+    var dragging = false;
+    function setW(w) {
+      w = Math.max(MIN, Math.min(MAX, Math.round(w)));
+      root.style.setProperty("--sidebar-w", w + "px");
+      return w;
+    }
+    bar.addEventListener("pointerdown", function (e) {
+      dragging = true;
+      bar.setPointerCapture(e.pointerId);
+      document.body.classList.add("sidebar-resizing");
+      e.preventDefault();
+    });
+    bar.addEventListener("pointermove", function (e) {
+      if (dragging) setW(e.clientX);
+    });
+    bar.addEventListener("pointerup", function (e) {
+      if (!dragging) return;
+      dragging = false;
+      document.body.classList.remove("sidebar-resizing");
+      try { localStorage.setItem(KEY, setW(e.clientX)); } catch (err) {}
+    });
+    bar.addEventListener("dblclick", function () {
+      root.style.removeProperty("--sidebar-w");
+      try { localStorage.removeItem(KEY); } catch (err) {}
+    });
+  });
+})();
+</script>

book/styles-dark.scss

@@ -78,3 +78,22 @@ body {
 .page-navigation .nav-page a:hover {
   background: rgba(180, 165, 234, 0.12);
 }
+
+.further {
+  background: rgba(169, 150, 214, 0.08);
+  border-color: rgba(169, 150, 214, 0.25);
+}
+
+.further .further-lead,
+.further .further-title {
+  color: #eceaff;
+}
+
+.further .further-card {
+  background: #1b1d2a;
+  border-color: #2b2e40;
+}
+
+.further .further-tag {
+  color: #b4a5ea;
+}