:root{
  --ink:#181925; --muted:#666666; --paper:#ffffff; --bg:#ffffff; --line:rgba(0,0,0,.08);
  --linen:#fafafa; --mist:#f5f5f5; --ash:#999999;
  --accent:#918df6; --link:#2c78fc;
  --ok:#33c758; --ok-wash:#def6e4; --warn:#ffa600; --broken:#e03131; --unknown:#999999;
  /* 배지 = 워시 배경 + 진한 글자 (흰 바탕에 초록·주황 글자만 두면 2:1 로 안 읽힌다) */
  --ok-ink:#1f7a3d; --warn-wash:#fff3d6; --warn-ink:#7a4f00; --broken-wash:#fde2e2; --broken-ink:#a51d1d;
  --on-accent:#181925;   /* 라벤더 버튼 위 글자. 흰 글자는 2.9:1, 잉크는 6.1:1 */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f5f5f5; --muted:#999999; --paper:#181925; --bg:#0e0f14; --line:rgba(255,255,255,.10); --linen:#14151c; --mist:#101119; --ash:#8a8f98;
    --accent:#a5a1f8; --link:#6ba3ff;
    --ok:#4ade80; --ok-wash:#173a25; --warn:#ffc14d; --broken:#ff8787; --unknown:#8a8f98;
    --ok-ink:#4ade80; --warn-wash:#3a2c0f; --warn-ink:#ffc14d; --broken-wash:#3f1a1a; --broken-ink:#ff8787;
    --on-accent:#0e0f14;
  }
}
:root[data-theme="dark"]{
  --ink:#f5f5f5; --muted:#999999; --paper:#181925; --bg:#0e0f14; --line:rgba(255,255,255,.10); --linen:#14151c; --mist:#101119; --ash:#8a8f98;
  --accent:#a5a1f8; --link:#6ba3ff;
  --ok:#4ade80; --ok-wash:#173a25; --warn:#ffc14d; --broken:#ff8787; --unknown:#8a8f98;
  --ok-ink:#4ade80; --warn-wash:#3a2c0f; --warn-ink:#ffc14d; --broken-wash:#3f1a1a; --broken-ink:#ff8787;
  --on-accent:#0e0f14;
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .card:hover{transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* hidden 속성이 실제로 먹게 한다.
   .card{display:flex} 같은 author 규칙이 브라우저 기본 [hidden] 규칙을 이겨서,
   이 줄이 없으면 필터가 카드를 숨겨도 화면에서 안 사라진다. */
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
header.site{display:flex;align-items:center;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{font-size:20px;font-weight:600;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:9999px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--mist)}
.intro{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:40px 72px;align-items:end}
.intro h1{word-break:keep-all;text-wrap:balance;max-width:16ch}
.intro .lede{margin-top:18px;max-width:52ch}
.intro .figures b{font-size:26px;min-width:3.6ch}
.intro .figures b.date{font-size:17px}
.intro .figures li{padding:11px 0}
.intro .figures span{font-size:13.5px}
@media (max-width:760px){
  .intro{padding:40px 0 32px}
  .intro-grid{grid-template-columns:1fr;gap:28px;align-items:start}
}
.kicker{margin:0 0 10px;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:28px}
.hero-channels{display:flex;gap:8px;flex-wrap:wrap}
.more-link{margin-left:auto;font-size:14px;font-weight:400;color:var(--link);text-decoration:none;letter-spacing:-.01em}
.channels{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
h1{margin:0 0 16px;font-size:clamp(36px,5.2vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1.13}
h1 .dot{color:var(--ink)}   /* 라벤더는 주요 버튼 전용 */
.lede{margin:0;color:var(--muted);max-width:60ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:22px 0;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
.filters .label{font-size:13px;color:var(--muted);margin-right:4px}
.fchip{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted);cursor:pointer;transition:.15s}
.fchip:hover{border-color:var(--ash);color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.reset{margin-left:auto;font-size:13px;background:none;border:none;color:var(--link);cursor:pointer;font-family:inherit}
.kind{margin:64px 0}
.kind h2{font-size:24px;font-weight:500;line-height:1.17;letter-spacing:-.03em;margin:0 0 20px;display:flex;align-items:center;gap:10px}
.count{font-size:12px;font-weight:400;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{border-color:var(--ash)}
.thumb{aspect-ratio:2/1;background:var(--mist);overflow:hidden;border-bottom:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--mist);
  color:var(--muted);font-weight:700;font-size:19px;padding:12px;text-align:center}
.pad{padding:32px;display:flex;flex-direction:column;flex:1}
.row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.row h3{margin:0;font-size:18px;font-weight:500;line-height:1.33;letter-spacing:-.025em}
.form{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.tag{margin:8px 0 12px;font-size:14px;color:var(--muted)}
.badge{display:inline-block;align-self:flex-start;font-size:14px;font-weight:700;
  padding:4px 12px;border-radius:999px;margin-bottom:11px}
.badge.ok{color:var(--ok-ink);background:var(--ok-wash)}
.badge.warn{color:var(--warn-ink);background:var(--warn-wash)}
.badge.broken{color:var(--broken-ink);background:var(--broken-wash)}
.badge.unknown{color:var(--muted);background:var(--mist)}
.facts{margin:0 0 12px;padding:0;list-style:none;font-size:13.5px;display:grid;gap:4px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.chip{font-size:11.5px;color:var(--link);background:color-mix(in srgb,var(--link) 10%,transparent);
  padding:2px 8px;border-radius:999px}
.fresh{font-size:12.5px;color:var(--warn-ink);margin-bottom:8px}
.meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px}
.actions{display:flex;gap:8px;margin-top:12px}
.btn,.more{font:inherit;font-size:14px;font-weight:500;padding:9px 18px;border-radius:9999px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none;transition:.15s}
.btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.btn:hover{background:#7f7af3;border-color:#7f7af3}
.more:hover{border-color:var(--ink);color:var(--ink)}
.detail{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px}
.detail h3{margin:14px 0 6px;font-size:14px;font-weight:500;color:var(--ink)}
.detail h3:first-child{margin-top:0}
.detail p{margin:0 0 8px}
.detail ul{margin:0 0 8px;padding-left:18px}
.detail li{margin-bottom:4px}
.detail code{background:var(--bg);padding:1px 5px;border-radius:4px;font-size:12.5px}
.empty{color:var(--muted);padding:40px 0;text-align:center;display:none}
footer{margin:56px 0 40px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
footer strong{color:var(--ink)}
footer ul{padding-left:18px;margin:8px 0}

/* ─────────────────────────────────────────────
   여기부터는 빌드가 추가한 새 페이지용 스타일.
   위쪽(프로토타입)과 분리해 두었으니 마음껏 고쳐도 됨.
   ───────────────────────────────────────────── */
header h1 a{color:inherit;text-decoration:none}
.crumb{font-size:13px;color:var(--muted);margin:18px 0 0}
.crumb a{color:var(--link);text-decoration:none}
.detail-page{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;margin:22px 0}
.detail-page h2{margin:0 0 6px;font-size:24px;letter-spacing:-.02em}
.detail-page .lede2{color:var(--muted);margin:0 0 16px}
.detail-page .badge{margin:6px 0 12px}   /* 판정이 제목 바로 아래 — 이 사이트가 파는 것 */
.hero{aspect-ratio:2/1;max-width:620px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin:18px 0 0;background:var(--bg)}
.hero img{width:100%;height:100%;object-fit:cover;display:block}

/* 도구 → 워크플로우 다리 (ARCHITECTURE.md 6.4) */
.bridge{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.bridge h3{margin:0 0 6px;font-size:15px;font-weight:500;color:var(--ink)}
.bridge p{margin:0 0 12px;font-size:14px}
.bridge a{display:inline-block;margin:0 8px 6px 0}

/* 워크플로우 페이지 */
.wf-badge{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;margin:0 0 18px;align-items:center}
.wf-badge span{border-radius:999px;padding:3px 11px}
.wf-badge .n{color:var(--muted);padding-left:0}
.wf-badge .warn{color:var(--warn-ink);background:var(--warn-wash)}
.wf-badge .ok{color:var(--ok-ink);background:var(--ok-wash)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{border-left:2px solid var(--line);padding:0 0 18px 18px;position:relative}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--line)}
.steps li.human::before{background:var(--ink)}
.steps .who{font-size:11.5px;border-radius:5px;padding:1px 7px;margin-left:6px;
  border:1px solid var(--line);color:var(--muted)}
.steps li.human .who{color:var(--ink);border-color:var(--ink)}
.steps .does{font-weight:500}
.steps .sub{font-size:13px;color:var(--muted);margin-top:3px}
.steps li.opt{opacity:.72}

/* 강좌 관심 등록 */
.course{border:1px solid var(--line);border-radius:12px;padding:20px;margin:26px 0;background:var(--bg)}
.course h4{margin:0 0 8px;font-size:16px}
.course form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.course input{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--ink);min-width:240px;flex:1}
.said{font-size:13px;color:var(--ok-ink);margin-top:8px}

/* 카드 안의 링크는 링크 티를 내지 않는다 (제목은 원본처럼 검게) */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--link)}
a.thumb{display:block;text-decoration:none}
a.chip{text-decoration:none}
a.chip:hover{background:color-mix(in srgb,var(--link) 20%,transparent)}
.crumb a:hover{text-decoration:underline}

/* ─── 워크플로우 카드 ───────────────────────────────
   도구 카드에는 썸네일이 있지만 워크플로우에는 없다.
   대신 단계 흐름을 막대로 그린다 — 주황은 사람이 판단하는 단계다. */
.card.wf{border-color:var(--line)}
.card.wf:hover{border-color:var(--ash)}
.card.wf .pad{padding:32px}
.wf-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px;margin-bottom:6px}
.wf-kicker .ribbon{text-transform:none;letter-spacing:0;font-size:11px;color:var(--warn-ink);
  background:var(--warn-wash);border-radius:4px;padding:0 6px}
.card.wf h3{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;margin:0 0 10px}
.wf-outcome{margin:0 0 14px;font-size:14px;line-height:1.6;padding-left:19px;position:relative}
.wf-outcome::before{content:"→";position:absolute;left:0;color:var(--ink);font-weight:500}
.wf-meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:10px;
  border-top:1px solid var(--line);display:grid;gap:2px}
.wf-meta .warn{color:var(--warn-ink);background:var(--warn-wash);border-radius:9999px;padding:2px 10px;display:inline-block}
.wf-meta .ok{color:var(--ok-ink);background:var(--ok-wash);border-radius:9999px;padding:2px 10px;display:inline-block}

/* 단계 요약 — 막대 대신 실제 단계 이름을 보여준다.
   무엇을 하는 흐름인지 클릭 안 해도 읽힌다. 사람이 하는 단계만 주황. */
.wf-steps{list-style:none;margin:0 0 14px;padding:0;font-size:13px;display:grid;gap:6px}
.wf-steps li{display:flex;gap:9px;align-items:baseline;line-height:1.45}
.wf-steps .n{color:var(--muted);font-size:11px;min-width:11px;font-variant-numeric:tabular-nums}
.wf-steps .does{flex:1}
.wf-steps .who{font-size:11px;color:var(--muted);border:1px solid var(--line);
  border-radius:4px;padding:0 5px;white-space:nowrap}
.wf-steps li.human .who{color:var(--ink);border-color:var(--ink)}
.wf-steps li.rest{color:var(--muted);font-size:12px;padding-left:20px}

/* ── 글 (Phase 1b 배관용 최소 스타일 — 화면은 Ken 이 다듬는다) ── */
.post-page .post-body{font-size:16px;line-height:1.7;max-width:72ch}
.post-body h2{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:32px 0 10px}
.post-body h3{font-size:17px;font-weight:500;margin:24px 0 8px}
.post-body p{margin:0 0 14px}
.post-body ul,.post-body ol{margin:0 0 14px;padding-left:22px}
.post-body blockquote{margin:0 0 14px;padding:2px 16px;border-left:2px solid var(--line);color:var(--muted)}
.post-body code{background:var(--linen);padding:1px 5px;border-radius:4px;font-size:.9em}
.post-body pre{background:var(--linen);padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:13.5px}
.post-body pre code{background:none;padding:0}
.post-body table{border-collapse:collapse;margin:0 0 14px;font-size:14px}
.post-body th,.post-body td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.post-body img{max-width:100%;height:auto}
.sources{margin-top:24px;padding-top:14px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--muted)}
.sources h3{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--ink)}
.sources ul{margin:0;padding-left:18px}

/* ── 소개 페이지 — 상자 대신 헤어라인으로 나눈 섹션. 라벤더는 버튼에만 (2026-09-16) ── */
.about section{padding:56px 0 0;margin:56px 0 0;border-top:1px solid var(--line)}
.about section:first-of-type{border-top:0;margin-top:28px;padding-top:0}
.about h3{margin:0 0 24px;font-size:24px;font-weight:500;line-height:1.17;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:12px}
.about h3 .more-link{margin-left:auto}
.about h4{margin:28px 0 8px;font-size:14px;font-weight:500;color:var(--ink)}
.about h4:first-child{margin-top:0}
/* 사람 + 숫자 */
.about-who{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:48px 72px;align-items:start}
.about-who .name{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.about-who h2{margin:0 0 20px;font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.2;letter-spacing:-.04em;
  text-wrap:balance;word-break:keep-all}
.about-who .intro-text{margin:0;max-width:60ch}
.about-who .intro-text+.intro-text{margin-top:12px;color:var(--muted)}
.figures{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.figures li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.figures b{font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1;min-width:4.2ch;font-variant-numeric:tabular-nums}
.figures b.date{font-size:20px;min-width:0}
.figures span{color:var(--muted);font-size:14px}
.figures a{color:inherit;text-decoration:none}
.figures a:hover{text-decoration:underline}
/* 걸어온 길 — 세 시기, 마지막이 가장 넓다 */
.path{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:24px}
.path div{border-top:1px solid var(--ink);padding-top:14px}
.path b{display:block;font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1.1;margin-bottom:10px}
.path p{margin:0;font-size:14px;color:var(--muted);max-width:32ch}
.path .now p{color:var(--ink)}
/* 만든 것 — 도구 카드 부품을 가볍게 */
.made .card .pad{padding:24px}
.made .card h4{margin:0 0 8px;font-size:18px;font-weight:500;line-height:1.33;letter-spacing:-.025em}
.made .card h4 a{color:inherit;text-decoration:none}
/* 하는 일 — 각 줄이 그 섹션으로 가는 문 */
.doing{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doing li{border-bottom:1px solid var(--line)}
.doing a,.doing div{display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:baseline;padding:18px 0;
  color:inherit;text-decoration:none}
.doing a:hover .arrow{transform:translateX(4px)}
.doing strong{font-weight:500}
.doing span{color:var(--muted);font-size:14px;max-width:60ch}
.doing .arrow{color:var(--ink);transition:.15s}
/* 검증 기준 — 두 단 */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:40px 72px}
.rules dl{margin:0}
.rules dt{font-weight:500;margin-top:14px}
.rules dt:first-child{margin-top:0}
.rules dd{margin:2px 0 0;color:var(--muted);font-size:14px}
.rules .badge{margin:0 8px 0 0;vertical-align:middle}
.rules .status dd{margin-bottom:10px}
.rules p{margin:0 0 8px;font-size:14px;max-width:60ch}
.rules .env{color:var(--muted)}
.rules .env strong{color:var(--ink);font-weight:500}
@media (max-width:760px){
  .about-who,.rules{grid-template-columns:1fr}
  .path{grid-template-columns:1fr;gap:16px}
  .doing a,.doing div{grid-template-columns:1fr auto;gap:6px 16px}
  .doing span:not(.arrow){grid-column:1/-1}
  .about section{padding-top:40px;margin-top:40px}
}

/* ── 워크플로우 상세 — 상품 페이지. 라벤더 버튼은 관심 등록 하나 (2026-09-16) ── */
.wf{margin-top:28px}
.wf-head{max-width:70ch}
.wf-head h2{margin:0 0 12px;font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.2;letter-spacing:-.04em;
  text-wrap:balance;word-break:keep-all}
.wf-head .problem{margin:0 0 16px;color:var(--muted);font-size:17px;line-height:1.55;max-width:60ch}
.wf-head .wf-badge{margin:0}
.wf-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:40px 64px;
  margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.wf-main h3,.wf-side h3{margin:0 0 14px;font-size:14px;font-weight:500;color:var(--ink)}
.wf-main section+section{margin-top:40px}
.outcome{margin:0;font-size:20px;font-weight:500;line-height:1.5;letter-spacing:-.03em;max-width:32ch;
  padding-left:20px;position:relative;word-break:keep-all}
.outcome::before{content:"→";position:absolute;left:0;color:var(--ink)}
.wf-main .steps{max-width:60ch}
.wf-main .steps li{padding-bottom:22px}
.wf-main .steps .does{font-size:16px}
.wf-main .steps li.human .does{font-weight:500}
.prep{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.prep li{margin-bottom:4px}
.wf-main .chips{margin-top:14px}
/* 상품 상자 — 페이지에서 유일하게 테두리가 잉크색. 데스크톱에선 스크롤을 따라온다 */
.wf-side{position:sticky;top:24px;align-self:start}
.offer{border:1px solid var(--ink);border-radius:12px;padding:24px}
.offer h3{margin:0 0 6px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.offer .why{margin:0 0 18px;font-size:14px;color:var(--muted);line-height:1.55}
.offer .cost{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.offer .cost b{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-bottom:2px}
.offer .cost:empty{display:none}
.offer label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.offer form{display:flex;flex-direction:column;gap:8px}
.offer input{font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.offer .btn{text-align:center;padding:11px 18px}
.offer .promise{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.offer .said{margin:12px 0 0;padding:10px 14px;border-radius:8px;font-size:14px;color:var(--ok-ink);background:var(--ok-wash)}
.offer .draft-note{margin:16px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;padding-top:12px;border-top:1px solid var(--line)}
.parts{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.parts h2{font-size:24px;font-weight:500;letter-spacing:-.03em;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.parts .lede{margin:0 0 20px;font-size:14px}
@media (max-width:820px){
  .wf-body{grid-template-columns:1fr;gap:32px}
  .wf-side{position:static}
}