/* Article-specific styles: anonymized-ebpm */
:root {
      --bg: #f7f9fb;
      --paper: #ffffff;
      --ink: #162332;
      --muted: #5d6b7c;
      --line: #dce5ee;
      --line-strong: #b9c9d8;
      --accent: #183956;
      --accent-soft: #edf4f8;
      --accent-light: #f5f8fb;
      --gold: #a9823a;
      --radius: 18px;
      --shadow: 0 18px 48px rgba(13, 37, 61, .08);
      --max: 1080px;
      --read: 840px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(35, 83, 125, .10), transparent 32rem),
        linear-gradient(180deg, #f3f8fb 0%, var(--bg) 38%, #ffffff 100%);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      line-height: 1.95;
      letter-spacing: .01em;
    }

    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .site-shell {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .article-wrap {
      width: min(var(--read), calc(100% - 40px));
      margin: 0 auto;
    }

    .civio-article {
      padding: 46px 0 72px;
    }

    .civio-hero {
      width: min(var(--max), calc(100% - 40px));
      margin: 40px auto 34px;
      padding: 54px 56px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,250,252,.88)),
        radial-gradient(circle at right 20%, rgba(24,57,86,.08), transparent 26rem);
      box-shadow: var(--shadow);
    }

    .civio-label {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .35rem .75rem;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--accent);
      background: rgba(255,255,255,.7);
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .civio-title {
      margin: 1.15rem 0 .65rem;
      font-size: clamp(2rem, 4vw, 3.7rem);
      line-height: 1.18;
      letter-spacing: -.045em;
    }

    .civio-subtitle {
      margin: 0 0 1.25rem;
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      color: var(--accent);
      font-weight: 700;
    }

    .civio-lead {
      max-width: 760px;
      margin: 0;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.95;
    }

    .civio-section {
      margin: 52px 0;
    }

    .civio-section h2 {
      margin: 0 0 1.2rem;
      padding-bottom: .55rem;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      font-size: clamp(1.36rem, 2.3vw, 1.78rem);
      line-height: 1.45;
      letter-spacing: -.025em;
    }

    .civio-section h3 {
      margin: 2.1rem 0 .85rem;
      color: var(--accent);
      font-size: 1.13rem;
      line-height: 1.55;
      letter-spacing: -.01em;
    }

    p { margin: 0 0 1.05rem; }
    .civio-list {
      margin: 1.1rem 0 1.2rem;
      padding-left: 1.2rem;
    }
    .civio-list li {
      margin: .45rem 0;
      padding-left: .25rem;
    }

    .civio-box,
    .civio-note,
    .civio-quote {
      margin: 1.5rem 0;
      padding: 1.25rem 1.35rem;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: var(--accent-light);
    }

    .civio-note {
      border-left: 4px solid var(--gold);
      color: #4c3c20;
      background: #fffaf0;
    }

    .civio-quote {
      border-left: 4px solid var(--accent);
      color: var(--accent);
      font-weight: 700;
      background: var(--accent-soft);
    }

    .toc {
      margin: 32px 0 52px;
      padding: 1.2rem 1.35rem;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.72);
    }

    .toc h2 {
      margin: 0 0 .75rem;
      padding: 0;
      border: 0;
      font-size: 1rem;
      color: var(--accent);
      letter-spacing: .04em;
    }

    .toc a {
      display: block;
      padding: .35rem 0;
      color: var(--ink);
      border-top: 1px solid rgba(220,229,238,.75);
      font-size: .95rem;
    }
    .toc a:first-of-type { border-top: 0; }

    .interactive-panel {
      margin: 2rem 0;
      padding: 1.4rem;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 12px 34px rgba(13, 37, 61, .06);
    }

    .panel-title {
      margin: 0 0 .4rem;
      color: var(--accent);
      font-size: 1.12rem;
      font-weight: 800;
    }

    .panel-help {
      margin: 0 0 1.15rem;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.75;
    }

    .metric-buttons,
    .tab-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin: 0 0 1rem;
    }

    .metric-btn,
    .tab-btn,
    .check-btn {
      appearance: none;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: #ffffff;
      color: var(--accent);
      padding: .55rem .85rem;
      font-weight: 700;
      font-size: .88rem;
      cursor: pointer;
      transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .metric-btn:hover,
    .tab-btn:hover,
    .check-btn:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
    }

    .metric-btn.active,
    .tab-btn.active,
    .check-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    .metric-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 1.15rem;
      background: var(--accent-light);
    }

    .metric-card h3 {
      margin: 0 0 .35rem;
      font-size: 1.2rem;
    }

    .metric-desc {
      color: var(--muted);
      font-size: .92rem;
      margin-bottom: 1rem;
    }

    .bars {
      display: grid;
      gap: .75rem;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 4.8rem 1fr 4.4rem;
      align-items: center;
      gap: .7rem;
    }

    .bar-label {
      font-size: .86rem;
      color: var(--muted);
      font-weight: 700;
    }

    .bar-track {
      height: 12px;
      border-radius: 999px;
      background: #dfe9f0;
      overflow: hidden;
      position: relative;
    }

    .bar-fill {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, #7898ad, var(--accent));
      transition: width .35s ease;
    }

    .bar-value {
      font-size: .9rem;
      font-weight: 800;
      color: var(--accent);
      text-align: right;
    }

    .data-table-wrap {
      overflow-x: auto;
      margin: 1.25rem 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 820px;
      font-size: .92rem;
      line-height: 1.7;
    }

    th, td {
      padding: .78rem .85rem;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }

    th {
      background: var(--accent-soft);
      color: var(--accent);
      text-align: left;
      white-space: nowrap;
    }

    td:nth-child(2), td:nth-child(3), td:nth-child(4) {
      text-align: center;
      white-space: nowrap;
      font-weight: 700;
    }

    tr:last-child td { border-bottom: 0; }

    .tab-pane {
      display: none;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 1.15rem;
      background: var(--accent-light);
    }
    .tab-pane.active { display: block; }
    .tab-pane h3 { margin-top: 0; }

    .cycle {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: .6rem;
      margin: 1.2rem 0;
    }

    .cycle-step {
      min-height: 116px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: .9rem;
      cursor: pointer;
    }

    .cycle-step strong {
      display: block;
      color: var(--accent);
      margin-bottom: .4rem;
      font-size: .9rem;
    }

    .cycle-step span {
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.6;
    }

    .cycle-step.active {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .cycle-detail {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 1rem 1.1rem;
      background: var(--accent-light);
      color: var(--ink);
    }

    .checks {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .7rem;
      margin: 1.15rem 0;
    }

    .check-item {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: .95rem;
      cursor: pointer;
    }

    .check-item strong {
      display: block;
      color: var(--accent);
      margin-bottom: .25rem;
    }

    .check-item p {
      margin: 0;
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.65;
    }

    .check-item.active {
      background: var(--accent-soft);
      border-color: var(--accent);
    }


    .dashboard-note {
      margin: 1rem 0 1.15rem;
      padding: .9rem 1rem;
      border: 1px solid rgba(169, 130, 58, .35);
      border-left: 4px solid var(--gold);
      border-radius: 14px;
      background: #fffaf0;
      color: #4c3c20;
      font-size: .9rem;
      line-height: 1.75;
    }

    .two-column-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .9rem;
      margin: 1.25rem 0;
    }

    .compare-card,
    .data-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      padding: 1.15rem 1.2rem;
    }

    .compare-card h3,
    .data-card h3 {
      margin: 0 0 .7rem;
      color: var(--accent);
      font-size: 1.02rem;
      line-height: 1.5;
    }

    .compare-card ul,
    .data-card ul {
      margin: .6rem 0 0;
      padding-left: 1.1rem;
    }

    .compare-card li,
    .data-card li {
      margin: .4rem 0;
      line-height: 1.65;
      color: var(--ink);
    }

    .data-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .8rem;
      margin: 1.25rem 0;
    }

    .civio-references {
      margin-top: 64px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.75;
    }

    .civio-references h2 {
      border: 0;
      padding: 0;
      margin-bottom: 1rem;
      font-size: 1.2rem;
      color: var(--accent);
    }

    .civio-references p { margin-bottom: 1.05rem; word-break: break-word; }

    @media (max-width: 780px) {
      .civio-hero { padding: 34px 24px; border-radius: 22px; }
      .article-wrap, .site-shell, .civio-hero { width: min(100% - 28px, var(--max)); }
      .cycle { grid-template-columns: 1fr; }
      .checks { grid-template-columns: 1fr; }
      .two-column-grid, .data-grid { grid-template-columns: 1fr; }
      .bar-row { grid-template-columns: 4.2rem 1fr 3.8rem; }
    }
  
/* === EBPM article image === */
.civio-hero-image {
  margin: 2rem 0 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13, 37, 61, .07);
}
.civio-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.civio-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .86rem;
}
.civio-article-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .18rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
}