From 5a18806fb60d7e65aabc48692def5b7ad03f18ac Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Thu, 20 Aug 2026 15:44:15 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=96=B4=EA=B0=80=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=95=88?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20561px=20=EB=A1=9C=20=EC=9E=98=EB=A6=AC?=
 =?UTF-8?q?=EB=8D=98=20=EA=B2=83=EC=9D=84=20=EA=B3=A0=EC=B9=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

절대배치인데도 배경이 화면 가운데 561px 띠로만 깔렸다.
.section 은 subgrid 이고 `.section > * { grid-column: main }` 이 걸려 있는데,
절대배치 요소라도 그리드 영역이 잡히면 그 영역이 컨테이닝 블록이 된다.
position: absolute 는 그리드에서 배치를 면제해주지 않는다.

그리고 overflow: visible 이라 위아래 14% 여유분이 이웃 섹션으로 넘쳤다 —
조판 섹션의 종이가 프리플라이트 하단에 밝은 회색 띠로 나타났다.

  .bg-photo { grid-column: full }
  .has-bg   { overflow: clip }

띠 폭 기준으로 잡았던 투명도도 다시 올렸다
  사례 0.3 -> 0.5 · 프리플라이트 0.55 -> 0.8
  재료 0.5 -> 0.6 · 설치 0.4 -> 0.55

1440px/390px 실렌더: 배경 5개 모두 전체 폭, 가로 스크롤 0.
화면 밖 섹션의 배경은 아직 로드되지 않는다 — lazy 가 의도대로 작동한다.
---
 apps/site/design.md                      | 8 ++++++++
 apps/site/src/components/Install.astro   | 2 +-
 apps/site/src/components/Materials.astro | 2 +-
 apps/site/src/components/Preflight.astro | 2 +-
 apps/site/src/components/Showcase.astro  | 2 +-
 apps/site/src/styles/base.css            | 9 +++++++++
 6 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/site/design.md b/apps/site/design.md
index c8c1f0a..9cf957a 100644
--- a/apps/site/design.md
+++ b/apps/site/design.md
@@ -261,6 +261,14 @@ Codex CLI 의 내장 `image_gen`(gpt-image-2)을 ChatGPT 구독 인증으로 호
 빌드 결과 12개 파일 합계 **276KB**. 실제로는 뷰포트에 맞는 크기 하나씩만,
 그것도 `loading="lazy"` 로 받는다.
 
+**절대배치 배경이 그리드 안에서 561px 로 잘렸다.** `.section` 은 subgrid 이고
+`.section > * { grid-column: main; }` 이 걸려 있는데, 절대배치 요소라도 그리드 영역이
+잡히면 **그 영역이 컨테이닝 블록**이 된다. 그래서 배경이 화면 가운데 561px 띠로만 깔렸고,
+`overflow: visible` 이라 위아래 14% 여유분이 이웃 섹션 위로 넘쳐 조판 섹션의 종이가
+프리플라이트 하단에 밝은 띠로 나타났다.
+`.bg-photo { grid-column: full }` + `.has-bg { overflow: clip }` 으로 고쳤다.
+**`position: absolute` 는 그리드에서 배치를 면제해주지 않는다.**
+
 **codex 0.147.0 메모** — `codex-image` 스킬의 `extract_imagegen.py` 는 rollout JSONL 의
 `image_generation_call` base64 를 찾는데, 0.147.0 은 다시 **파일**로 저장한다
 (`~/.codex/generated_images/<sid>/exec-*.png`, 이벤트는 `custom_tool_call` + `image_generation_end`).
diff --git a/apps/site/src/components/Install.astro b/apps/site/src/components/Install.astro
index 49f943d..c92f8b2 100644
--- a/apps/site/src/components/Install.astro
+++ b/apps/site/src/components/Install.astro
@@ -9,7 +9,7 @@ const { c, ui } = Astro.props;
 
 
 <section id="install" class="full install has-bg" aria-labelledby="install-h">
-  <BgPhoto opacity={0.4} flip />
+  <BgPhoto opacity={0.55} flip />
   <div class="install-grid">
     <div class="install-head">
       <h2 id="install-h">{c.h2}</h2>
diff --git a/apps/site/src/components/Materials.astro b/apps/site/src/components/Materials.astro
index 9294d40..f8861de 100644
--- a/apps/site/src/components/Materials.astro
+++ b/apps/site/src/components/Materials.astro
@@ -12,7 +12,7 @@ const { c } = Astro.props;
   둘 다 설명이 아니라 지금 이 화면에서 돌고 있는 것이다.
 */}
 <section class="section materials has-bg" aria-labelledby="mat-h">
-  <BgPhoto opacity={0.5} />
+  <BgPhoto opacity={0.6} />
   <h2 id="mat-h" class="reveal">{c.h2}</h2>
   <p class="lead mat-lead reveal">{c.lead}</p>
 
diff --git a/apps/site/src/components/Preflight.astro b/apps/site/src/components/Preflight.astro
index f382cc7..0eeb24f 100644
--- a/apps/site/src/components/Preflight.astro
+++ b/apps/site/src/components/Preflight.astro
@@ -12,7 +12,7 @@ const { c } = Astro.props;
   왼쪽 세로선이 로그라는 형식을 만든다.
 */}
 <section class="section preflight has-bg" aria-labelledby="pf-h">
-  <BgPhoto variant="align" opacity={0.55} />
+  <BgPhoto variant="align" opacity={0.8} />
   <h2 id="pf-h" class="reveal">{c.h2}</h2>
   <p class="lead pf-lead reveal">{c.lead}</p>
 
diff --git a/apps/site/src/components/Showcase.astro b/apps/site/src/components/Showcase.astro
index a9612a6..9b79dff 100644
--- a/apps/site/src/components/Showcase.astro
+++ b/apps/site/src/components/Showcase.astro
@@ -12,7 +12,7 @@ const shots = [shotCoffee, shotSaas];
 
 {/* 레이아웃 패밀리: Z축 캐스케이드. 두 판이 서로 겹치고 각도가 다르다 */}
 <section id="showcase" class="section showcase has-bg" aria-labelledby="showcase-h">
-  <BgPhoto variant="split" opacity={0.3} />
+  <BgPhoto variant="split" opacity={0.5} />
   <h2 id="showcase-h" class="reveal">{c.h2}</h2>
   <p class="lead showcase-lead reveal">{c.lead}</p>
 
diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css
index 87b8326..8f83f76 100644
--- a/apps/site/src/styles/base.css
+++ b/apps/site/src/styles/base.css
@@ -426,7 +426,16 @@ a:hover { color: var(--accent); }
 .has-bg {
   position: relative;
   isolation: isolate;
+  /* 배경 레이어는 위아래로 14% 삐져나온다(패럴랙스 여유).
+     clip 하지 않으면 그 삐져나온 부분이 이웃 섹션 위에 얹힌다 —
+     조판 섹션의 종이가 위 섹션 하단에 밝은 띠로 나타났다. */
+  overflow: clip;
 }
+
+/* 섹션은 subgrid 이고 `.section > *` 이 전부 main 칼럼(561px)에 배치된다.
+   절대배치라도 그리드 영역이 잡히면 그게 컨테이닝 블록이 되므로,
+   배경이 화면 가운데 561px 띠로만 깔렸다. 전체 폭으로 되돌린다. */
+.bg-photo { grid-column: full; }
 .bg-grid::before,
 .bg-glow::before {
   content: "";