refine stack

template.typ

@@ -19,6 +19,10 @@
 
 #let bleed = 1.5cm
 
+#let page-paper = "a4"
+#let page-height = 297mm
+#let page-margin = (x: 2.8cm, y: 4.2cm)
+
 // ==================================================
 //  Metadata
 // ==================================================
@@ -68,6 +72,10 @@
   accent-faint: color.oklch(70%, 0.02, hue),
 )
 
+#let fill_break() = context {
+  v(1fr)
+}
+
 #let heading_text(it) = {
   if it.has("text") {
     it.text
@@ -85,24 +93,35 @@
 // Body components
 // ==================================================
 
-#let callout(bg_color: none, border_color: none, body) = context {
+#let kicker(color: color-ink-helper, content) = {
+  set text(
+    font: font-body,
+    weight: 700,
+    size: 10pt,
+    tracking: 1pt,
+    fill: color,
+  )
+
+  block(below: 1.5em)[
+    #content
+  ]
+}
+
+#let callout(title: "", bg_color: none, border_color: none, body) = context {
   let cp = color-palette.get()
   let bg_c = if bg_color == none { cp.callout-surface } else { bg_color }
   let border_c = if border_color == none { cp.callout-border } else { border_color }
 
-  let x_pad = 12pt
-  let y_pad = 18pt
-  let gap = 24pt
-
   block(
     width: 100%,
-    above: gap + y_pad,
+    inset: (x: 12pt, y: 18pt),
-    below: gap + y_pad,
-    outset: (x: x_pad, y: y_pad),
     radius: 4pt,
     fill: bg_c,
     stroke: (paint: border_c),
   )[
+    #if title != "" {
+      kicker(color: cp.accent)[#title]
+    }
     #body
   ]
 }
@@ -118,6 +137,7 @@
     let body-size = measure(
       content,
       width: body-width,
+      height: size.height,
     )
 
     grid(
@@ -140,20 +160,6 @@
   })
 }
 
-#let kicker(color: color-ink-helper, content) = {
-  set text(
-    font: font-body,
-    weight: 700,
-    size: 10pt,
-    tracking: 1pt,
-    fill: color,
-  )
-
-  block(below: 1.5em)[
-    #content
-  ]
-}
-
 #let problem(content) = context {
   let c = color-palette.get().problem
 
@@ -177,7 +183,9 @@
 #let hl(content) = context {
   let cp = color-palette.get()
 
-  // if content == "" {}
+  let body = box(
+    inset: (x: if content == [] { 0pt } else { 10pt }),
+  )[#content]
 
   set text(
     font: font-body,
@@ -190,8 +198,7 @@
   grid(
     columns: (1fr, auto, 1fr),
     align: horizon,
-    gutter: 10pt,
+    line(length: 100%, stroke: (paint: cp.rule)), body, line(length: 100%, stroke: (paint: cp.rule)),
-    line(length: 100%, stroke: (paint: cp.rule)), content, line(length: 100%, stroke: (paint: cp.rule)),
   )
 }
 
@@ -206,54 +213,36 @@
   let radius = 12pt
   let gutter = 12pt
   let gap = 24pt
+  let indent = radius + gutter
 
   for (idx, (title, body)) in layers.enumerate() {
     let is_last = idx == layers.len() - 1
 
-    let content = {
-      v(radius - 12pt / 2)
-      text(
-        weight: 700,
-      )[
-        #title
-        #linebreak()
-      ]
-      body
-      v(gap)
-    }
-
     block(
       above: if idx == 0 { auto } else { 0pt },
       below: if is_last { auto } else { 0pt },
+      inset: (left: indent),
+      stroke: (left: (paint: cp.accent, thickness: 1pt)),
       width: 100%,
     )[
-      #layout(size => {
+      #place(
-        let content_width = size.width - radius * 2 - gutter
+        left + top,
-        let content_size = measure(content, width: content_width)
+        dx: -indent - radius,
+      )[
+        #circle(radius: radius, fill: cp.accent)[
+          #set align(center + horizon)
+          #set text(font: font-serif, fill: color-ink-inverse, size: 12pt, weight: 700)
+          #{ idx + 1 }
+        ]
+      ]
 
-        grid(
+      #v(radius - 12pt / 2)
-          columns: (radius * 2, 1fr),
+      #text(weight: 700)[
-          gutter: gutter,
+        #title
-          grid(
+        #linebreak()
-            rows: (radius * 2, auto),
+      ]
-            circle(radius: radius, fill: cp.accent)[
+      #body
-              #set align(center + horizon)
+      #v(gap)
-              #set text(font: font-serif, fill: color-ink-inverse, size: 12pt, weight: 700)
-              #{ idx + 1 }
-            ],
-            line(
-              start: (50%, 0pt),
-              end: (50%, content_size.height - radius * 2),
-              stroke: (
-                paint: cp.accent,
-                thickness: 1pt,
-                cap: "round",
-              ),
-            ),
-          ),
-          content,
-        )
-      })
     ]
   }
 }
@@ -434,7 +423,7 @@
   header: header_template(show_activity: true),
   footer: footer_template(),
 )[
-  #kicker("프로젝트 설명")
+  #kicker("프로젝트 소개")
 
   #heading(level: 2)[
     #title
@@ -446,6 +435,7 @@
 // Activity process
 #let activity_process(title: "", content) = page(
   header: header_template(show_activity: true),
+  footer: footer_template(),
 )[
   #kicker("시행착오")
 
@@ -459,6 +449,7 @@
 // Activity result
 #let activity_result(title: "", content) = page(
   header: header_template(show_activity: true),
+  footer: footer_template(),
 )[
   #kicker("결론")
 
@@ -509,8 +500,8 @@
   )
 
   set page(
-    paper: "a4",
+    paper: page-paper,
-    margin: (x: 2.8cm, y: 4.2cm),
+    margin: page-margin,
     fill: color-surface,
   )
 
@@ -535,14 +526,14 @@
     marker: ([--], [•]),
     indent: 0.6em,
     body-indent: 0.8em,
-    spacing: 1.2em,
+    spacing: 0.8em,
   )
 
   show enum: set par(leading: 0.8em)
   set enum(
     indent: 0.6em,
     body-indent: 0.8em,
-    spacing: 1.2em,
+    spacing: 0.8em,
   )
 
   // heading config
@@ -569,7 +560,7 @@
 
   // outline config
   set outline(
-    indent: 1em,
+    indent: 2em,
   )
 
   show outline: set par(leading: 1em)
@@ -600,7 +591,7 @@
     set text(
       font: font-body,
       size: 12pt,
-      weight: 700,
+      weight: 400,
       fill: color-ink-secondary,
     )