/* Shared styles for the Articles section (same look as the Scrum guide). */
:root{
  --bg:#fbfbf9; --surface:#ffffff; --ink:#1d2433; --muted:#5b6578; --line:#e3e6ec;
  --blue:#2f6fed; --blue-bg:#e8f0ff;
  --purple:#7a4fe0; --purple-bg:#efe9ff;
  --amber:#d99100; --amber-bg:#fff3d1;
  --green:#1f9d63; --green-bg:#dcf5e8;
  --red:#d9462f; --red-bg:#ffe5df;
  --teal:#0f9fb5; --teal-bg:#dcf4f8;
  --gray-bg:#eef0f4;
  --radius:16px;
  --shadow:0 1px 2px rgba(20,30,50,.06),0 6px 20px rgba(20,30,50,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#10141d; --surface:#181e2b; --ink:#e8ecf4; --muted:#9aa5ba; --line:#2a3345;
    --blue:#6b9bff; --blue-bg:#1a2a4d;
    --purple:#a98bff; --purple-bg:#2a2250;
    --amber:#f0b429; --amber-bg:#3d3112;
    --green:#4cc58a; --green-bg:#16382a;
    --red:#ff7b66; --red-bg:#43201b;
    --teal:#4cc9dc; --teal-bg:#12343b;
    --gray-bg:#212a3a;
    --shadow:none;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 20px;white-space:nowrap}
nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px}
nav a:hover{background:var(--gray-bg);color:var(--ink)}
header.hero{padding:56px 0 34px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
h1{font-size:clamp(32px,5vw,50px);line-height:1.1;margin:10px 0 16px;letter-spacing:-.02em}
.lede{font-size:20px;color:var(--muted);max-width:700px;margin:0}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
h3{font-size:21px;margin:34px 0 10px}
section{padding:46px 0;border-top:1px solid var(--line)}
.part{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
p{margin:0 0 14px}
.sub{color:var(--muted);margin-bottom:22px;max-width:720px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.fig{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:18px 0;box-shadow:var(--shadow)}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption,.cap{font-size:14px;color:var(--muted);padding:8px 8px 2px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.callout{border-left:5px solid var(--blue);background:var(--blue-bg);border-radius:12px;padding:14px 18px;margin:18px 0}
.callout.warn{border-color:var(--red);background:var(--red-bg)}
.callout.ok{border-color:var(--green);background:var(--green-bg)}
.callout p:last-child{margin:0}
.tldr{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:26px}
.tldr div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.tldr b{display:block;font-size:19px;margin-bottom:4px}
.tldr span.i{font-size:28px;display:block;margin-bottom:6px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.tablewrap table tr:last-child td{border-bottom:0}
/* roles */
.role{text-align:center}
.role svg{width:96px;height:96px;margin:0 auto 6px;display:block}
.role h4{margin:4px 0 2px;font-size:20px}
.role .tag{font-size:13px;color:var(--muted);margin-bottom:10px;display:block}
.role p{text-align:left;font-size:15.5px}
/* ceremony cards */
.cer{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);margin:20px 0;overflow:hidden}
.cer-head{display:flex;align-items:center;gap:14px;padding:16px 22px}
.cer-head .ic{font-size:30px}
.cer-head h3{margin:0;font-size:22px}
.cer-head .meta{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.65);color:#1d2433;white-space:nowrap}
@media (prefers-color-scheme:dark){.pill{background:rgba(0,0,0,.3);color:var(--ink)}}
.cer-body{padding:18px 22px 6px;display:grid;gap:4px 28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cer-body h5{margin:0 0 3px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cer-body div{margin-bottom:14px}
.cer-body .why{grid-column:1/-1;background:var(--gray-bg);border-radius:12px;padding:12px 16px}
.cer-body .why h5{color:var(--ink)}
.c-purple .cer-head{background:var(--purple-bg)}.c-amber .cer-head{background:var(--amber-bg)}
.c-blue .cer-head{background:var(--blue-bg)}.c-green .cer-head{background:var(--green-bg)}.c-red .cer-head{background:var(--red-bg)}
/* calendar */
.cal{display:grid;grid-template-columns:130px repeat(10,minmax(44px,1fr));gap:4px;font-size:13px;min-width:760px}
.cal .h{font-weight:700;text-align:center;color:var(--muted);padding:6px 0}
.cal .wk1,.cal .wk2{grid-column:span 5;text-align:center;font-weight:800;padding:7px;border-radius:8px}
.cal .wk1{background:var(--blue-bg);color:var(--blue)}.cal .wk2{background:var(--purple-bg);color:var(--purple)}
.cal .lbl{font-weight:700;padding:8px 4px;font-size:14px;display:flex;align-items:center}
.cal .cell{border-radius:8px;background:var(--gray-bg);min-height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.cal .d{background:var(--amber-bg);color:var(--amber)}
.cal .p{background:var(--purple);color:#fff}.cal .r{background:var(--green);color:#fff}.cal .t{background:var(--red);color:#fff}.cal .f{background:var(--blue);color:#fff}
/* flow */
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;justify-content:center}
.step{flex:1 1 130px;border-radius:14px;padding:12px;text-align:center;font-size:14.5px;border:1px solid var(--line)}
.step b{display:block;font-size:15.5px;margin-bottom:2px}
.arrow{align-self:center;font-size:22px;color:var(--muted)}
/* kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;overflow-x:auto;min-width:640px}
.col{background:var(--gray-bg);border-radius:14px;padding:10px;min-height:220px}
.col h4{margin:2px 4px 10px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:6px}
.col h4 small{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface);color:var(--muted);text-transform:none;letter-spacing:0;white-space:nowrap}
.tk{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:10px;padding:9px 11px;margin-bottom:9px;font-size:14px;line-height:1.35;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tk b{font-size:12px;color:var(--muted);display:block}
.tk .who{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--gray-bg)}
.tk.todo{border-left-color:#9aa5ba}.tk.prog{border-left-color:var(--blue)}.tk.rev{border-left-color:var(--purple)}.tk.done{border-left-color:var(--green)}
.col.bad{background:var(--red-bg);outline:2px dashed var(--red)}
.col.bad h4 small{background:var(--red);color:#fff}
.tk .age{color:var(--red);font-weight:700;font-size:12px;display:block;margin-top:3px}
.scroll{overflow-x:auto}
.rules{counter-reset:r;display:grid;gap:12px}
.rule{counter-increment:r;display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.rule::before{content:counter(r);width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.rule b{display:block}
.rule span{color:var(--muted);font-size:15.5px}
.rule span em{font-style:normal;font-weight:700;color:var(--ink)}
.chk{list-style:none;padding:0;margin:0}
.chk li{padding:9px 0 9px 34px;position:relative;border-bottom:1px solid var(--line)}
.chk li::before{content:"";position:absolute;left:4px;top:13px;width:17px;height:17px;border:2px solid var(--blue);border-radius:5px}
.fill{color:var(--muted);font-style:italic}
footer{border-top:1px solid var(--line);padding:30px 0 60px;color:var(--muted);font-size:14px}
a{color:var(--blue)}
@media print{nav{display:none}section{break-inside:avoid-page}.fig,.card,.cer{box-shadow:none}}
.sitebar{background:#0F1319;color:#ECEFF3;font-size:14px}.sitebar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding-top:11px;padding-bottom:11px}.sitebar a{color:#ECEFF3;text-decoration:none;font-weight:600}.sitebar a:hover{color:#FFD166}.sitebar .r{color:#99A3B3;font-weight:500}
.sitebar .wrap{flex-wrap:wrap}.sitebar .langs{display:flex;gap:6px;align-items:center}.sitebar .lang-switch{font-size:12.5px;line-height:1;padding:7px 10px;border:1px solid #2B3440;border-radius:8px;color:#99A3B3;font-weight:600}.sitebar .lang-switch:hover,.sitebar .lang-switch:focus-visible{border-color:#63B4F2;color:#ECEFF3}.sitebar .lang-switch.on{border-color:#FFD166;color:#FFD166}html:lang(ko) body{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;word-break:keep-all;overflow-wrap:break-word}html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3{line-height:1.3;letter-spacing:-.01em}html:lang(ko) p,html:lang(ko) li,html:lang(ko) td{line-height:1.75}:lang(ms) h1,:lang(ms) h2,:lang(ms) h3{overflow-wrap:break-word;hyphens:auto}

/* ---- additions for the article series ---- */
.emo{font-size:30px;line-height:1.2}
.whybox{border:2px solid var(--amber);background:var(--amber-bg);border-radius:var(--radius);padding:18px 22px;margin:24px 0}
.whybox h4{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.whybox p{margin:0;font-size:19px;line-height:1.55;font-weight:500}
.rule a,.callout a,td a,.cap a{font-weight:600}
/* read-next cards */
.next{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:12px}
.next a{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.next a:hover,.next a:focus-visible{border-color:var(--blue)}
.next .i{font-size:26px;display:block;line-height:1.2}
.next b{display:block;margin:6px 0 4px;line-height:1.3}
.next small{display:block;color:var(--muted);font-size:14.5px;line-height:1.45}
.next .go{display:block;margin-top:10px;color:var(--blue);font-weight:700;font-size:14px}
/* end read-next */
/* figure text and colours: follow the page theme */
.s-t{font:700 17px system-ui,sans-serif;fill:var(--ink)}
.s-x{font:600 14.5px system-ui,sans-serif;fill:var(--ink)}
.s-m{font:500 13.5px system-ui,sans-serif;fill:var(--muted)}
.s-w{font:700 15px system-ui,sans-serif;fill:#fff}
.s-axis{stroke:var(--muted);stroke-width:1.5}
.s-green-fill{fill:var(--green)}.s-green-line{stroke:var(--green)}.s-green-text{fill:var(--green)}.s-green-bg{fill:var(--green-bg)}.s-green-stroke{stroke:var(--green)}
.s-red-fill{fill:var(--red)}.s-red-line{stroke:var(--red)}.s-red-text{fill:var(--red)}.s-red-bg{fill:var(--red-bg)}.s-red-stroke{stroke:var(--red)}
.s-blue-fill{fill:var(--blue)}.s-blue-line{stroke:var(--blue)}
.s-purple-fill{fill:var(--purple)}.s-teal-fill{fill:var(--teal)}.s-amber-fill{fill:var(--amber)}
@media (prefers-color-scheme:dark){.s-w{fill:#10141d}}
html:lang(ko) .s-t,html:lang(ko) .s-x,html:lang(ko) .s-m,html:lang(ko) .s-w{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
/* phones: keep figure text readable by letting wide figures scroll sideways */
@media (max-width:700px){figure.fig{overflow-x:auto;-webkit-overflow-scrolling:touch}figure.fig svg{min-width:660px}figure.fig figcaption{position:sticky;left:0}}