:root { --ink:#101418; --muted:#647077; --line:#dce2e5; --green:#18a874; --green-dark:#0e6d4c; --paper:#fff; --canvas:#f3f5f6; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
a { color:inherit; }
button { font:inherit; }
.site-header { height:76px; display:flex; align-items:center; gap:28px; padding:0 max(24px,calc((100vw - 1240px)/2)); background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:block; width:126px; }
.brand img { display:block; width:100%; height:auto; }
.site-header nav { display:flex; gap:24px; margin-left:auto; }
.site-header nav a { font-size:14px; text-underline-offset:5px; }
main { width:min(1240px,100%); margin:auto; padding:40px 28px 48px; }
.brief-heading { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:24px; }
.brief-heading p { margin:0 0 10px; color:var(--green-dark); font-size:13px; font-weight:700; }
.brief-heading h1 { max-width:720px; margin:0 0 10px; font-size:clamp(34px,5vw,62px); line-height:1.08; letter-spacing:-.045em; }
.brief-heading span { color:var(--muted); line-height:1.7; }
.brief-heading dl { display:flex; gap:32px; flex:0 0 auto; margin:0; }
.brief-heading dl div { padding-left:18px; border-left:1px solid var(--line); }
.brief-heading dt { margin-bottom:5px; color:var(--muted); font-size:12px; }
.brief-heading dd { margin:0; font-size:14px; font-weight:650; }
.brief-heading dd.current { color:var(--green-dark); }
.brief-heading dd.stale { color:#9b6018; }
.warning,.message { background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.warning { margin:0 0 12px; padding:12px 16px; color:#704b12; background:#fff8e9; border-color:#ead5ae; font-size:13px; }
.message { min-height:420px; display:grid; place-content:center; gap:10px; text-align:center; }
.message strong { font-size:24px; }
.message span { color:var(--muted); }
.brief { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start; }
.brief-index { position:sticky; top:20px; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.brief-index ol { list-style:none; margin:0; padding:8px; }
.brief-index li + li { border-top:1px solid #eef1f2; }
.brief-index button { display:flex; align-items:center; gap:12px; width:100%; padding:11px 10px; color:#4d5a60; background:transparent; border:0; border-radius:8px; font-size:13px; font-weight:650; text-align:left; cursor:pointer; }
.brief-index button span { width:25px; color:#899399; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.brief-index button:hover { color:var(--ink); background:#f4f7f6; }
.brief-index button.current { color:var(--green-dark); background:#eaf7f2; }
.brief-index button.current span { color:var(--green); }
.brief-stage { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 55px rgb(16 20 24 / 7%); }
.brief-stage header,.brief-stage footer { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 18px; }
.brief-stage header { border-bottom:1px solid var(--line); }
.brief-stage header strong { font-size:15px; }
.brief-stage header span,.brief-stage footer span { color:var(--muted); font-size:12px; }
.brief-stage footer { border-top:1px solid var(--line); }
.brief-stage button { padding:8px 12px; color:var(--green-dark); background:var(--paper); border:1px solid #b9d9cc; border-radius:8px; font-size:12px; font-weight:650; cursor:pointer; }
.brief-stage button:disabled { opacity:.45; cursor:not-allowed; }
.image-button { display:block; width:100%; padding:0!important; border:0!important; border-radius:0!important; cursor:zoom-in!important; }
.image-button img { display:block; width:100%; height:auto; }
.disclaimer { margin:18px 0 0; color:var(--muted); font-size:12px; }
.lightbox { position:fixed; z-index:10; inset:0; place-items:start center; overflow:auto; padding:64px 24px 24px; background:rgb(8 13 16 / 92%); }
.lightbox:not([hidden]) { display:grid; }
.lightbox img { display:block; width:min(2160px,100%); height:auto; background:#fff; box-shadow:0 24px 80px rgb(0 0 0 / 35%); }
.lightbox button { position:fixed; z-index:1; top:16px; right:20px; padding:10px 16px; color:#fff; background:#136f51; border:1px solid #56ba96; border-radius:8px; font-weight:650; cursor:pointer; }
:is(a,button):focus-visible { outline:3px solid #315ae8; outline-offset:3px; }
@media (max-width:760px) {
  .site-header { height:64px; padding:0 16px; }
  .brand { width:104px; }
  .site-header nav { gap:14px; }
  .site-header nav a { font-size:12px; }
  main { padding:24px 12px 30px; }
  .brief-heading { display:block; }
  .brief-heading h1 { font-size:38px; }
  .brief-heading dl { margin-top:20px; gap:20px; }
  .brief { display:block; }
  .brief-index { position:static; margin-bottom:10px; border-radius:10px; }
  .brief-index ol { display:flex; gap:6px; overflow-x:auto; padding:7px; scrollbar-width:thin; }
  .brief-index li { flex:0 0 auto; border:0!important; }
  .brief-index button { gap:7px; padding:9px 10px; white-space:nowrap; }
  .brief-stage { border-radius:10px; }
  .brief-stage header { padding:0 12px; }
  .brief-stage footer { padding:0 10px; }
  .brief-stage footer span { display:none; }
  .lightbox { padding:58px 8px 16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }