/* SaaS の数字。style.css・flow.css・cm.css の上に重ねる（接頭辞 sn-） */
.sn-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.sn-h4b { margin-top: 14px; }
.sn-tips { margin-top: 12px; }
.sn-tnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.sn-nl { display: block; margin: 6px 0 0; }
.sn-n { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sn-n small, .sn-tbl th small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.sn-neg { color: #b91c1c; }
.sn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 操作の枠 */
.sn-ctl { padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.sn-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sn-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 6.5em; }
.sn-lnote { margin: 0; font-size: 12px; color: var(--muted); }
.sn-scene { margin: 0; font-size: 13px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 11px; }

/* 結果の小さな枠 */
.sn-kpis { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sn-kpi { background: var(--any-bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sn-kpi dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sn-kpi dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sn-kpi small { font-size: 11.5px; color: var(--ink2); }
.sn-kpi.sn-ok { background: #f0fdf4; border-color: #bbf7d0; }
.sn-kpi.sn-ok dd { color: #14532d; }
.sn-kpi.sn-mid { background: #fffbeb; border-color: #fde68a; }
.sn-kpi.sn-mid dd { color: #78350f; }
.sn-kpi.sn-ng { background: #fef2f2; border-color: #fecaca; }
.sn-kpi.sn-ng dd { color: #7f1d1d; }
.sn-flags { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sn-flags li { font-size: 13px; border-radius: 8px; padding: 7px 10px; background: var(--line2); color: var(--ink2); }
.sn-flags li.sn-ok { background: #f0fdf4; color: #14532d; }
.sn-flags li.sn-mid { background: #fffbeb; color: #78350f; }
.sn-flags li.sn-ng { background: #fef2f2; color: #7f1d1d; }

/* 表 */
.sn-tbl { font-size: 12.5px; }
.sn-tbl th, .sn-tbl td { padding: 6px 8px; }
.sn-tbl tbody th { font-weight: 700; }
.sn-tbl tr.sn-sum th, .sn-tbl tr.sn-sum td { border-top: 2px solid var(--line); font-weight: 700; }
.sn-tbl tr.sn-sub th, .sn-tbl tr.sn-sub td { color: var(--muted); font-size: 12px; }
.sn-tbl tr.sn-on th, .sn-tbl tr.sn-on td { background: #f0fdf4; }
.sn-tbl tr.sn-wrong th, .sn-tbl tr.sn-wrong td { background: #fef2f2; color: #7f1d1d; }

/* MRR の橋 */
.sn-br { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.sn-brcard, .sn-brres, .sn-chres, .sn-chcmp, .sn-ucard, .sn-cocard, .sn-cores { padding: 12px 14px; min-width: 0; }
#snBridge { min-width: 460px; }
#snBridge th { white-space: nowrap; }
.sn-bars { display: grid; gap: 6px; margin-top: 12px; }
.sn-brow { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; align-items: center; }
.sn-bname { font-size: 12px; font-weight: 700; }
.sn-btrack { height: 16px; background: var(--line2); border-radius: 5px; overflow: hidden; }
.sn-bfill { display: block; height: 100%; border-radius: 5px; }
.sn-bfill.sn-up { background: #16a34a; }
.sn-bfill.sn-down { background: #dc2626; }
.sn-bfill.sn-bad { background: repeating-linear-gradient(45deg, #fca5a5 0 6px, #fecaca 6px 12px); }

/* 解約率 */
.sn-ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: start; }
#snChurnCmp { min-width: 520px; }
.sn-def { margin: 10px 0 0; font-size: 13px; color: var(--ink); background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 11px; }
.sn-def b { display: block; font-size: 11.5px; color: #14532d; margin-bottom: 2px; }
.sn-formula { margin: 8px 0 0; font: 500 12.5px/1.6 var(--latin); color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }

/* LTV・CAC */
.sn-un { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.sn-ucard.sn-good { border-color: #86efac; }
.sn-ucard.sn-warn { border-color: #fca5a5; }
.sn-utag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-left: 4px; }
.sn-utag.sn-good { background: #dcfce7; color: #14532d; }
.sn-utag.sn-warn { background: #fee2e2; color: #7f1d1d; }
.sn-ulist { margin: 8px 0 0; padding-left: 1.2em; font-size: 12.5px; color: var(--ink2); display: grid; gap: 3px; }

/* 粗利 */
.sn-co { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
#snCostTable { min-width: 420px; }
.sn-stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin-top: 12px; background: var(--line2); }
.sn-seg { display: block; height: 100%; }
.sn-c-cloud { background: #2563eb; }
.sn-c-ext { background: #64748b; }
.sn-c-ops { background: #d97706; }
.sn-c-ai { background: #7c3aed; }
.sn-c-gp { background: #16a34a; }
.sn-key { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.sn-key span { display: inline-flex; align-items: center; gap: 5px; }
.sn-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.sn-det { margin-top: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.sn-det summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.sn-det summary:hover { color: var(--ink); }
.sn-assume { margin: 8px 0 0; padding-left: 1.2em; font-size: 12px; color: var(--ink2); display: grid; gap: 3px; }

/* 残す形 */
.sn-tpls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start; }
.sn-tpl { padding: 12px 14px; min-width: 0; }
.sn-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sn-tplh .sn-h4 { margin: 0; }
.sn-dtbl { min-width: 1080px; font-size: 12px; }
.sn-dtbl td:first-child { font-weight: 700; white-space: nowrap; }
.sn-btbl { min-width: 1000px; }
.sn-btbl td { white-space: nowrap; }
.sn-ctbl { min-width: 720px; }

.sn-det summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .sn-br, .sn-ch, .sn-co { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sn-kpis, .sn-un { grid-template-columns: minmax(0, 1fr); }
  .sn-lab { min-width: 0; width: 100%; }
}