/* 画面一覧・画面のつながり など、見取り図から分けたページの共通 CSS（元は docs/store-blueprint.html の <style>） */
:root{
    --bg:#f4f5f9;
    --surface:#ffffff;
    --surface-2:#eef0f6;
    --ink:#161a23;
    --ink-2:#3d4557;
    --muted:#6a7386;
    --line:#e0e3ec;
    --line-strong:#c6cbd9;
    --accent:#4f46e5;
    --accent-soft:#e9e8fb;
    --keep:#0f766e;
    --keep-soft:#dcf1ee;
    --warn:#b45309;
    --warn-soft:#fbeedd;
    --shadow:0 1px 2px rgba(22,26,35,.05), 0 8px 24px rgba(22,26,35,.06);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12141a; --surface:#1a1d25; --surface-2:#222630;
      --ink:#e8eaf0; --ink-2:#bcc2d0; --muted:#8b93a5;
      --line:#2b3039; --line-strong:#3d434f;
      --accent:#9d97ff; --accent-soft:#282a45;
      --keep:#5ec8b8; --keep-soft:#1b3330;
      --warn:#e0a04a; --warn-soft:#33281a;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    }
  }
  :root[data-theme="dark"]{
    --bg:#12141a; --surface:#1a1d25; --surface-2:#222630;
    --ink:#e8eaf0; --ink-2:#bcc2d0; --muted:#8b93a5;
    --line:#2b3039; --line-strong:#3d434f;
    --accent:#9d97ff; --accent-soft:#282a45;
    --keep:#5ec8b8; --keep-soft:#1b3330;
    --warn:#e0a04a; --warn-soft:#33281a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
    font-size:15px;line-height:1.85;-webkit-font-smoothing:antialiased;
  }
  .page{max-width:1060px;margin:0 auto;padding:56px 28px 96px;display:flex;flex-direction:column;gap:56px;}

  .eyebrow{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  }
  h1{margin:10px 0 0;font-size:clamp(30px,4.6vw,42px);font-weight:900;letter-spacing:-.01em;line-height:1.3;text-wrap:balance;}
  .lead{margin:16px 0 0;max-width:62ch;color:var(--ink-2);font-size:16px;}
  .source{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);}
  .source b{color:var(--ink-2);font-weight:700;}

  section{display:flex;flex-direction:column;gap:20px;}
  h2{margin:0;font-size:21px;font-weight:900;letter-spacing:-.005em;display:flex;align-items:baseline;gap:12px;}
  h2 .num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.08em;}
  h3{margin:14px 0 -4px;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.08em;}
  p{margin:0;max-width:68ch;}
  .sec-intro{color:var(--ink-2);}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;}
  .stat .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:32px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
  .stat .lb{font-size:12.5px;font-weight:700;color:var(--ink-2);}
  .stat .sub{font-size:11.5px;color:var(--muted);line-height:1.6;}
  .stat.hi .n{color:var(--accent);}

  figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 20px 16px;box-shadow:var(--shadow);}
  .fig-scroll{overflow-x:auto;}
  figure svg{display:block;width:100%;min-width:760px;height:auto;}
  figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.7;}

  .t-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
  table{border-collapse:collapse;width:100%;min-width:600px;font-size:13.5px;}
  th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65;}
  thead th{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;background:var(--surface-2);border-bottom:1px solid var(--line-strong);white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  td.name{font-weight:700;color:var(--ink);}
  td.narrow{white-space:nowrap;}
  td.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--muted);white-space:nowrap;line-height:1.7;}
  code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.88em;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}
  .grp td{background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:.06em;padding-top:9px;padding-bottom:9px;}

  .chip{display:inline-block;font-size:11px;font-weight:700;line-height:1.7;padding:1px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent;}
  .c-1{background:var(--accent);color:#fff;}
  :root[data-theme="dark"] .c-1{color:#171630;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .c-1{color:#171630;}}
  .c-2{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
  .c-p3{background:transparent;color:var(--ink-2);border:1px dashed var(--line-strong);}
  .c-3{background:transparent;color:var(--muted);border-color:var(--line-strong);}
  .c-open{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);}
  .c-keep{background:var(--keep-soft);color:var(--keep);border-color:var(--keep);}


  /* ---- フェーズの表 ---- */
  .phases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .phase{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:8px;}
  .phase .ph-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .phase .ph-h b{font-size:16px;font-weight:900;}
  .phase .ph-h span{font-size:12px;color:var(--muted);}
  .phase .ph-goal{font-size:13px;color:var(--ink-2);font-weight:700;}
  .phase ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;}
  .phase li{font-size:13px;line-height:1.7;color:var(--ink-2);}
  .phase li b{color:var(--ink);}
  .phase.p1{border-top:3px solid var(--accent);}
  .phase.p2{border-top:3px solid var(--accent);border-top-style:double;}
  .phase.p3{border-top:3px dashed var(--line-strong);}

  /* ---- 画面カード ---- */
  .bandhead{
    display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
    margin-top:12px;padding-bottom:8px;border-bottom:2px solid var(--line-strong);
  }
  .bandhead b{font-size:16px;font-weight:900;}
  .bandhead span{font-size:12.5px;color:var(--muted);}
  .screens{display:flex;flex-direction:column;gap:14px;}
  .screen{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  .screen.key{border-color:var(--accent);}
  .s-head{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--line);
  }
  .s-no{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;
  }
  .s-id{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:1;min-width:0;}
  .s-id b{font-size:16px;font-weight:900;}
  .s-route{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11.5px;color:var(--muted);
  }
  .s-tags{display:flex;gap:6px;flex-wrap:wrap;}
  .s-body{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:0;}
  .s-col{padding:16px 20px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;}
  .s-col:last-child{border-right:none;}
  .s-col h4{
    margin:0;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.08em;
  }
  .s-col h4+ul{margin-top:2px;}
  .s-col h4:not(:first-child){margin-top:12px;}
  .s-col ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;}
  .s-col li{font-size:13px;line-height:1.7;color:var(--ink-2);}
  .s-col li b{color:var(--ink);font-weight:700;}
  .s-col .warnline{color:var(--warn);font-weight:700;}
  .s-note{
    grid-column:1 / -1;border-top:1px solid var(--line);background:var(--warn-soft);
    padding:12px 20px;font-size:12.5px;color:var(--warn);font-weight:700;
  }

  .note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:0 12px 12px 0;padding:16px 20px;display:flex;flex-direction:column;gap:6px;}
  .note.calm{border-left-color:var(--keep);}
  .note .hd{font-size:13.5px;font-weight:900;color:var(--ink);}
  .note p{font-size:13.5px;color:var(--ink-2);}

  .items{display:flex;flex-direction:column;gap:12px;}
  .item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;}
  .item .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .item .hd b{font-size:15px;font-weight:900;}
  .item p{font-size:13.5px;color:var(--ink-2);max-width:72ch;}
  .item .ref{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);}

  .foot{border-top:1px solid var(--line);padding-top:20px;font-size:12.5px;color:var(--muted);}

  @media(max-width:900px){
    .s-body{grid-template-columns:1fr;}
    .s-col{border-right:none;border-bottom:1px solid var(--line);}
    .s-col:last-child{border-bottom:none;}
    .phases{grid-template-columns:1fr;}
  }
  @media(max-width:820px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .page{padding:40px 18px 72px;gap:44px;}
  }