.wk { width: min(880px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }

/* 머리 — 이번 주 주제 · 추천 그림책 */
.wk-head { margin-top: var(--sp-6); padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--sh-tint); }
.wk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.wk-top time { font-size: var(--fs-sm); font-weight: 700; color: var(--bt-mut); }
.wk-head h1 { margin-top: var(--sp-3); font-size: clamp(18.2px, 2.1vw, 25.2px); font-weight: 900; }
.wk-theme { margin-top: var(--sp-2); font-size: var(--fs-lead); color: var(--bt-sub); }
.wk-theme b { color: var(--sh-ink); }
.wk-book { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-5); align-items: center; margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-l); background: var(--bt-card); }
.wk-book .cover { width: 104px; border-radius: 4px 10px 10px 4px; }
.wk-book .cover .bks-face__author, .wk-book .cover .bks-face__mark { display: none; }
.wk-book small { font-size: var(--fs-xs); font-weight: 800; color: var(--sh-ink); }
.wk-book h2 { margin-top: 2px; font-size: 24px; font-weight: 900; }
.wk-book .by { font-size: var(--fs-sm); font-weight: 700; color: var(--bt-mut); }
.wk-book .btn--text { margin-top: 2px; min-height: 36px; font-size: var(--fs-sm); }
.wk-head .meta { margin-top: var(--sp-3); }
.wk-head .meta > div { background: var(--bt-card); }
.wk-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-book h2 { margin-top: 8px; }
@media (max-width: 640px) {
  .wk-meta { grid-template-columns: minmax(0, 1fr); }
  .wk-meta > div { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
  .wk-meta dd { margin: 0; }
  .wk-theme b { display: block; }
}
@media (max-width: 640px) { .wk-book { grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-4); } .wk-book .cover { width: 76px; } .wk-book h2 { font-size: 20px; } }

/* 흐름 — 5단계 (원문 p.1–2) */
.flow { position: sticky; top: 72px; z-index: 20; margin-top: var(--sp-5); padding: 10px 0; background: color-mix(in srgb, var(--bt-bg) 94%, transparent); backdrop-filter: blur(8px); }
.flow ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.flow a { display: grid; gap: 6px; text-decoration: none; font-size: 12.5px; font-weight: 700; color: var(--bt-mut); line-height: 1.35; }
.flow a::before { content: ""; height: 6px; border-radius: 3px; background: var(--bt-panel-2); transition: background var(--t-mid); }
.flow a.is-done::before { background: var(--bt-ok); }
.flow a.is-on { color: var(--bt-ink); }
.flow a.is-on::before { background: var(--bt-ac-ink); }
@media (max-width: 860px) { .flow { top: 60px; } }
@media (max-width: 640px) { .flow a { font-size: 0; gap: 0; } .flow a span { display: none; } .flow .now { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--bt-ink); } }
.flow .now { display: none; }
@media (max-width: 640px) { .flow .now { display: block; } }

/* 단계 블록 */
.stp { padding-top: var(--sp-8); scroll-margin-top: 140px; }
.stp-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stp-h .n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bt-ink); color: #fff; font-size: 13px; font-weight: 900; flex: none; }
.stp-h h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 800; }
.stp-h small { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--bt-mut); white-space: nowrap; }
@media (max-width: 640px) { .stp-h { flex-wrap: wrap; row-gap: 2px; } .stp-h small { flex-basis: 100%; margin-left: 44px; } }

/* 오늘의 질문 */
.today { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: var(--bt-night); color: var(--bt-on-night); }
.today .eyebrow { color: var(--bt-ac-soft); margin-bottom: var(--sp-3); }
.today .bigq { font-size: clamp(23px, 2.8vw, 34px); line-height: 1.5; }
.today p.hint { margin-top: var(--sp-5); color: var(--bt-on-night-mut); font-size: var(--fs-sm); }

/* 넓히는 질문 */
.wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.wide li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-5); border-radius: var(--r-l); background: var(--bt-card); box-shadow: var(--shadow-1); font-family: var(--font-serif); font-size: 17.5px; font-weight: 700; line-height: 1.55; }
.wide li::before { content: "?"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bt-ac-soft); color: var(--bt-ac-ink-hover); font-family: var(--font); font-size: 14px; font-weight: 900; }
.listen { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-m); background: var(--bt-panel); color: var(--bt-sub); font-size: var(--fs-sm); }
.listen b { color: var(--bt-ink); }
@media (max-width: 640px) { .wide { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } .wide li { padding: var(--sp-4); font-size: 16.5px; } }

/* 펼침 */
.ex { overflow: hidden; border-radius: var(--r-l); background: var(--bt-card); box-shadow: var(--shadow-2); }
.ex-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); background: var(--bt-panel); font-size: var(--fs-xs); color: var(--bt-mut); }
.ex-top .badge { background: var(--bt-ink); color: #fff; }
.ex-top b { color: var(--bt-ink); font-size: 15px; }
.ex-body { padding: var(--sp-6); }
.ex-body h3 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 900; }
.talk { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; counter-reset: k; }
.talk li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); counter-increment: k; }
.talk li::before { content: counter(k); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bt-ac-soft); color: var(--bt-ac-ink-hover); font-weight: 900; font-size: 14px; }
.talk .says { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.talk .say { font-size: 15px; }
.ex-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); }
.ex-foot small { color: var(--bt-mut); font-size: var(--fs-xs); }
.ex.is-done .ex-foot .btn { background: var(--bt-ok); }
@media (max-width: 640px) { .ex-top, .ex-body { padding-inline: var(--sp-5); } .ex-body { padding-block: var(--sp-5); } .ex-foot .btn { width: 100%; } }

/* 완료 — 펼침 완료 뒤 열린다 */
.fin { padding: var(--sp-6); border-radius: var(--r-l); background: var(--bt-panel); }
.fin .react-opt, .fin .done-check, .fin .field input { background: var(--bt-card); }
.fin-foot { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; }
.fin-foot small { color: var(--bt-mut); font-size: var(--fs-xs); }
@media (max-width: 640px) { .fin { padding: var(--sp-5); } .fin-foot .btn { width: 100%; } }
.saved { margin-top: 0; }
.saved .btns { margin-top: var(--sp-5); }
.end-gap { height: var(--sp-9); }