improve domain frame page and rename stack into steps

research.typ

@@ -27,7 +27,8 @@
 #table_of_contents()
 
 #domain_frame(
-  bg_img_path: "assets/research/bg.png",
+  bg_img_path: "assets/research/bg.jpg",
+  cover_color: rgb("0F0F0F").transparentize(40%),
   font_color: color.oklch(95%, 0.01, 250deg),
   chrome_color: color.oklch(80%, 0.01, 250deg),
   title: [본질을 향한 여정],
@@ -219,7 +220,7 @@
     그래프의 특성만으로 Dijkstra 실행 없이 $RS$를 예측하는 방법을 찾는다.
   ]
 
-  #stack(
+  #steps(
     (
       [$bold(RS)$ 재정의],
       [

template.typ

@@ -250,7 +250,7 @@
   )
 ]
 
-#let stack(..layers) = context {
+#let steps(..layers) = context {
   let cp = color-palette.get()
   let radius = 12pt
   let gutter = 12pt
@@ -454,12 +454,20 @@
 ]
 
 // Domain frame template function
-#let domain_frame(title: "", bg_img_path: none, font_color: color-ink, chrome_color: color-ink-helper, content) = page(
+#let domain_frame(
-  background: place(
+  title: "",
-    center + horizon,
+  bg_img_path: none,
-    if bg_img_path != none {
+  cover_color: white.transparentize(50%),
-      image(bg_img_path, width: 100.5%, height: 100.5%, fit: "cover")
+  font_color: color-ink,
-    },
+  chrome_color: color-ink-helper,
+  content,
+) = page(
+  background: stack(
+    image(bg_img_path, width: 100.5%, height: 100.5%, fit: "cover"),
+    move(
+      dy: -50%,
+      rect(width: 100.5%, height: 100.5%, fill: cover_color),
+    ),
   ),
   header: header_template(font_color: chrome_color),
   footer: footer_template(font_color: chrome_color),