/* EMW tools page styles（2026-07-05集約） */
.btn-primary:disabled { background: var(--gray-300); cursor: not-allowed; transform: none; box-shadow: none; }

/* ===== Quiz ===== */
.tool-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 2.5rem; max-width: 860px;
  box-shadow: 0 10px 30px rgba(10,22,40,0.05);
}
.quiz-q { margin-bottom: 1.75rem; }
.quiz-q-title { font-size: 0.98rem; font-weight: 700; color: var(--navy-800); margin-bottom: 0.7rem; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quiz-opt {
  font-family: var(--font-jp); font-size: 0.86rem; color: var(--gray-600);
  background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 999px;
  padding: 0.55rem 1.1rem; cursor: pointer; transition: all 0.2s; line-height: 1.5;
}
.quiz-opt:hover { border-color: var(--accent-light); color: var(--navy-800); }
.quiz-opt.selected {
  background: #eaf3ff; border-color: var(--accent); color: #1f4f84; font-weight: 700;
}
.quiz-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 2rem; }
.quiz-reset {
  font-family: var(--font-jp); font-size: 0.82rem; color: var(--gray-500);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
.quiz-progress { font-family: var(--font-en); font-size: 0.8rem; color: var(--gray-400); margin-left: auto; }

.quiz-result { margin-top: 2rem; display: none; }
.quiz-result.show { display: block; animation: resultIn 0.5s ease; }
@keyframes resultIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.result-card {
  border: 2px solid var(--accent); border-radius: 14px; overflow: hidden;
}
.result-head { background: var(--navy-900); padding: 1.4rem 1.75rem; }
.result-kicker { font-family: var(--font-en); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 0.2rem; }
.result-head h3 { color: var(--white); font-size: 1.25rem; line-height: 1.5; }
.result-body { padding: 1.5rem 1.75rem; background: var(--white); }
.result-body p { font-size: 0.92rem; color: var(--gray-600); margin-bottom: 1rem; }
.result-steps { margin: 0 0 1.25rem 1.3rem; }
.result-steps li { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 0.4rem; }
.result-bars { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.result-bar-row { display: grid; grid-template-columns: 150px 1fr 36px; align-items: center; gap: 0.7rem; font-size: 0.8rem; color: var(--gray-600); }
.result-bar-track { height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.result-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); width: 0; transition: width 0.8s ease; }
.result-links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.result-article-link { font-size: 0.85rem; color: var(--accent); text-decoration: none; font-weight: 500; }
.result-article-link:hover { text-decoration: underline; }

/* ===== SLA tool ===== */
.sla-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.sla-preset {
  font-family: var(--font-en); font-size: 0.88rem; font-weight: 600; color: var(--gray-600);
  background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 8px;
  padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s;
}
.sla-preset:hover { border-color: var(--accent-light); }
.sla-preset.selected { background: #eaf3ff; border-color: var(--accent); color: #1f4f84; }
.sla-custom { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.sla-custom label { font-size: 0.85rem; color: var(--gray-500); }
.sla-custom input {
  font-family: var(--font-en); font-size: 1rem; font-weight: 600; color: var(--navy-900);
  width: 130px; padding: 0.55rem 0.8rem; border: 1.5px solid var(--gray-200); border-radius: 8px;
  background: var(--gray-50); outline: none; transition: border-color 0.2s;
}
.sla-custom input:focus { border-color: var(--accent); background: var(--white); }
.sla-output {
  background: var(--navy-900); border-radius: 12px; padding: 1.5rem 1.75rem;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}
.sla-output-title { font-size: 0.75rem; color: var(--gray-400); margin-bottom: 0.9rem; letter-spacing: 0.06em; }
.sla-output-title strong { color: var(--accent-light); font-size: 1rem; }
.sla-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sla-row:last-child { border-bottom: none; }
.sla-row .k { font-size: 0.8rem; color: var(--gray-400); }
.sla-row .v { font-size: 0.95rem; color: #9ed0ff; font-weight: 600; }
.sla-note { font-size: 0.78rem; color: var(--gray-500); margin-top: 1rem; line-height: 1.7; }

.tool-divider { border: none; border-top: 1px solid var(--gray-200); margin: 0; }

/* ===== Composite SLA ===== */
.comp-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.comp-group { margin-bottom: 1.1rem; }
.comp-group-label {
  font-family: var(--font-en); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 0.5rem;
}
.comp-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.comp-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-jp); font-size: 0.84rem; color: var(--gray-600);
  background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 999px;
  padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s; line-height: 1.4;
}
.comp-chip:hover { border-color: var(--accent-light); color: var(--navy-800); }
.comp-chip.selected { background: #eaf3ff; border-color: var(--accent); color: #1f4f84; font-weight: 700; }
.comp-chip .pct { font-family: var(--font-en); font-size: 0.72rem; font-weight: 700; color: var(--gray-400); }
.comp-chip.selected .pct { color: var(--accent); }
.comp-output { margin-top: 1.5rem; }
.comp-big {
  font-family: var(--font-en); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  color: var(--accent-light); line-height: 1.1;
}
.comp-list { margin-top: 0.9rem; }
.comp-list .item { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.78rem; }
.comp-list .item .n { color: var(--gray-400); }
.comp-list .item .p { color: #9ed0ff; }
.comp-list .item.bottleneck .n, .comp-list .item.bottleneck .p { color: var(--gold); }
.comp-empty { color: var(--gray-500); font-size: 0.85rem; }
.comp-cost { margin-top: 1.75rem; }
.comp-cost h4 { font-size: 0.95rem; font-weight: 700; color: var(--navy-800); margin-bottom: 0.6rem; }
.cost-table-wrap { overflow-x: auto; margin-bottom: 0.9rem; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 560px; }
.cost-table th {
  font-family: var(--font-en); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray-500); text-align: left;
  padding: 0.5rem 0.8rem; border-bottom: 2px solid var(--gray-200); white-space: nowrap;
}
.cost-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--gray-200); color: var(--gray-600); line-height: 1.6; vertical-align: top; }
.cost-table td:first-child { font-weight: 700; color: var(--navy-900); }
.cost-table tr:last-child td { border-bottom: none; }
.cost-table .plus { color: var(--accent); font-weight: 700; white-space: nowrap; }
.cost-table .zero { color: #1d9e75; font-weight: 700; white-space: nowrap; }
.comp-verdict {
  background: #f5f9ff; border: 1px solid #d4e4f8; border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 1rem 1.25rem;
  font-size: 0.88rem; color: #275485; line-height: 1.85;
}
.comp-notes { font-size: 0.78rem; color: var(--gray-500); margin-top: 1.25rem; line-height: 1.8; }
.comp-notes a { color: var(--accent); text-decoration: none; }
.comp-notes a:hover { text-decoration: underline; }

/* ===== Shared for new tools ===== */
section[id] { scroll-margin-top: 150px; }
.tool-switch {
  position: sticky; top: 71px; z-index: 90;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 4px 16px rgba(10,22,40,0.05);
  padding: 0.7rem 2rem;
}
.tool-switch-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.tool-switch-inner a {
  font-size: 0.78rem; color: var(--gray-600); text-decoration: none;
  border: 1px solid var(--gray-200); border-radius: 999px;
  padding: 0.34rem 0.85rem; transition: all 0.18s; background: var(--gray-50);
  line-height: 1.4; font-weight: 500;
}
.tool-switch-inner a:hover { border-color: var(--accent); color: var(--accent); background: #ffffff; }
.tool-switch-inner a.active { background: var(--navy-900); border-color: var(--navy-900); color: #ffffff; font-weight: 700; }
.tool-switch-all {
  font-family: var(--font-jp); font-size: 0.75rem; color: var(--gray-500);
  background: #ffffff; border: 1px solid var(--gray-300); border-radius: 999px;
  padding: 0.34rem 0.85rem; cursor: pointer; transition: all 0.18s; margin-left: auto;
}
.tool-switch-all:hover { color: var(--navy-900); border-color: var(--accent); }
.tool-switch-all.on { background: var(--navy-900); color: #ffffff; border-color: var(--navy-900); }
@media (max-width: 768px) { .tool-switch { top: 63px; padding: 0.6rem 1rem; } .tool-switch-all { margin-left: 0; } }

/* ===== CIDR plan mode ===== */
.cidr-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--gray-100); }
.cidr-tab {
  font-family: var(--font-jp); font-size: 0.9rem; font-weight: 700; color: var(--gray-400);
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 0.55rem 1rem; cursor: pointer; transition: all 0.2s; margin-bottom: -2px;
}
.cidr-tab:hover { color: var(--navy-800); }
.cidr-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.plan-env {
  border: 1px solid var(--gray-200); border-radius: 10px;
  margin-bottom: 0.6rem; overflow: hidden; background: var(--white);
}
.plan-env summary {
  padding: 0.8rem 1.1rem; cursor: pointer; font-weight: 700; font-size: 0.92rem;
  color: var(--navy-800); background: var(--gray-50);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none;
}
.plan-env summary::-webkit-details-marker { display: none; }
.plan-env summary .cidr-mono { font-family: var(--font-en); font-size: 0.82rem; color: var(--accent); font-weight: 700; }
.plan-env[open] summary { border-bottom: 1px solid var(--gray-200); }
.plan-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.plan-table td { padding: 0.5rem 1.1rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); }
.plan-table tr:last-child td { border-bottom: none; }
.plan-table .tier { font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.plan-table .mono { font-family: var(--font-en); font-weight: 600; color: var(--navy-900); white-space: nowrap; }
.plan-table .dim { color: var(--gray-400); white-space: nowrap; }
.plan-table tr.reserve td { color: var(--gray-400); background: var(--gray-50); }
.plan-table tr.reserve .tier, .plan-table tr.reserve .mono { color: var(--gray-400); font-weight: 500; }
.calc-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.calc-row label { font-size: 0.85rem; color: var(--gray-500); min-width: 130px; }
.calc-row input[type="number"], .calc-row input[type="text"], .calc-row input[type="time"], .calc-row select {
  font-family: var(--font-en); font-size: 0.95rem; font-weight: 600; color: var(--navy-900);
  padding: 0.55rem 0.8rem; border: 1.5px solid var(--gray-200); border-radius: 8px;
  background: var(--gray-50); outline: none; transition: border-color 0.2s;
}
.calc-row input:focus, .calc-row select:focus { border-color: var(--accent); background: var(--white); }
.calc-row .unit { font-size: 0.82rem; color: var(--gray-500); }
.calc-err { color: #a32d2d; font-size: 0.8rem; margin-bottom: 0.75rem; min-height: 1.2em; }
.mini-btn {
  font-family: var(--font-jp); font-size: 0.78rem; font-weight: 500; color: var(--gray-600);
  background: var(--white); border: 1px solid var(--gray-300); border-radius: 999px;
  padding: 0.35rem 0.9rem; cursor: pointer; transition: all 0.2s;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.verdict-line { margin-top: 0.9rem; font-size: 0.85rem; color: #275485; background: #f5f9ff; border: 1px solid #d4e4f8; border-radius: 10px; padding: 0.8rem 1.1rem; line-height: 1.8; }
.check-item {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 1rem; border: 1.5px solid var(--gray-200); border-radius: 10px;
  margin-bottom: 0.6rem; cursor: pointer; transition: all 0.2s; background: var(--gray-50);
}
.check-item:hover { border-color: var(--accent-light); }
.check-item.checked { background: #eaf3ff; border-color: var(--accent); }
.check-item input { margin-top: 0.35rem; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.check-item .t { font-size: 0.9rem; font-weight: 700; color: var(--navy-800); }
.check-item .w { font-size: 0.78rem; color: var(--gray-500); line-height: 1.6; }
.score-band { font-family: var(--font-en); font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.todo-list { margin: 0.75rem 0 0 1.2rem; }
.todo-list li { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 0.35rem; }


.reveal.visible { opacity: 1; transform: translateY(0); }





@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .quiz-result.show { animation: none; }
  .result-bar-fill { transition: none; }
}





@media (max-width: 768px) {
  .header-inner { height: 64px; }
  nav {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center; gap: 2rem;
    transform: translateX(100%); transition: transform 0.4s ease;
  }
  nav.open { transform: translateX(0); }
  nav a { font-size: 1.1rem; }
  .menu-toggle { display: block; }
  section { padding: 4rem 1.5rem; }
  .page-hero { padding: 8rem 1.5rem 3rem; }
  .tool-card { padding: 1.6rem 1.3rem; }
  .result-bar-row { grid-template-columns: 110px 1fr 36px; }
}


/* ============================================================
   Engineer diagnostic tools — 統合コンポーネント（旧 _lab.css）
   site.css のトークンを共有。.card は .lab-panel に改名して衝突回避。
   すべて body.lab（＝診断ツール個別ページ）配下にスコープ。
   ============================================================ */
:root{
  --font-mono:'SF Mono',ui-monospace,'Cascadia Code','Roboto Mono',Menlo,Consolas,monospace;
  --gold:#c9a84c;
  --crit:#dc2626; --high:#ea580c; --med:#d97706; --low:#0891b2; --ok:#16a34a;
}
body.lab{background:var(--gray-50);color:var(--navy-900);}
.lab .wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem;}

/* Hero */
.lab .hero{background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-700) 60%,var(--navy-600) 100%);color:#fff;padding:3.2rem 0 2.6rem;position:relative;overflow:hidden;}
.lab .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,rgba(45,140,240,.28),transparent 46%);pointer-events:none;}
.lab .hero .wrap{position:relative;z-index:1;}
.lab .crumbs{font-size:.78rem;color:var(--gray-400);margin-bottom:1rem;}
.lab .crumbs a{color:var(--accent-light);text-decoration:none;}
.lab .crumbs a:hover{text-decoration:underline;}
.lab .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-light);margin-bottom:.9rem;}
.lab .hero h1{font-size:2.05rem;line-height:1.3;font-weight:700;letter-spacing:.01em;margin-bottom:.7rem;color:#fff;}
.lab .hero p,.lab .hero .lead{color:var(--gray-300);max-width:660px;font-size:1.02rem;}
.lab .hero .lead strong,.lab .hero p strong{color:#fff;}
.lab .privacy{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;background:rgba(22,163,74,.14);border:1px solid rgba(22,163,74,.4);color:#86efac;padding:.5rem .9rem;border-radius:999px;font-size:.82rem;font-weight:500;}
.lab .privacy svg{flex:none;}

/* Layout */
.lab .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:-1.6rem;position:relative;z-index:2;padding-bottom:4rem;}
@media(max-width:860px){.lab .grid{grid-template-columns:1fr;}}
.lab .grid.wide{grid-template-columns:5fr 6fr;}
@media(max-width:860px){.lab .grid.wide{grid-template-columns:1fr;}}
.lab .lab-panel{background:#fff;border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 30px rgba(10,22,40,.07);overflow:hidden;}
.lab .lab-panel-hd{padding:1rem 1.2rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.lab .lab-panel-hd h2{font-size:.95rem;font-weight:700;letter-spacing:.02em;}
.lab .lab-panel-bd{padding:1.2rem;}

/* Input */
.lab .samples{display:flex;gap:.4rem;flex-wrap:wrap;}
.lab .chip{font:500 .72rem/1 var(--font-jp);background:var(--gray-100);border:1px solid var(--gray-200);color:var(--gray-600);padding:.42rem .6rem;border-radius:7px;cursor:pointer;transition:.15s;}
.lab .chip:hover{background:var(--navy-700);color:#fff;border-color:var(--navy-700);}
.lab textarea{width:100%;min-height:340px;font:.82rem/1.55 var(--font-mono);color:var(--navy-800);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:.9rem;resize:vertical;tab-size:2;}
.lab textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,140,240,.14);}
.lab .actions{display:flex;gap:.7rem;margin-top:.9rem;align-items:center;flex-wrap:wrap;}
.lab .btn{font:600 .9rem var(--font-jp);border:none;border-radius:9px;padding:.72rem 1.4rem;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block;}
.lab .btn-go{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(45,140,240,.35);}
.lab .btn-go:hover{background:#1a7ae0;transform:translateY(-1px);}
.lab .btn-clear{background:transparent;color:var(--gray-500);}
.lab .btn-clear:hover{color:var(--navy-800);}
.lab .parse-err{color:var(--crit);font-size:.82rem;margin-top:.6rem;font-family:var(--font-mono);display:none;}

/* Results */
.lab .empty{color:var(--gray-400);text-align:center;padding:3rem 1rem;font-size:.9rem;}
.lab .empty svg{opacity:.4;margin-bottom:.8rem;}
.lab .score{display:flex;align-items:center;gap:1.1rem;padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.2rem;}
.lab .score .ring{width:64px;height:64px;flex:none;}
.lab .score .meta strong{display:block;font-size:1.5rem;line-height:1.1;}
.lab .score .meta span{font-size:.8rem;color:var(--gray-600);}
.lab .counts{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.lab .pill{font-size:.74rem;font-weight:600;padding:.32rem .6rem;border-radius:7px;display:inline-flex;gap:.35rem;align-items:center;}
.lab .pill b{font-family:var(--font-mono);}
.lab .pill.crit{background:#fef2f2;color:var(--crit);} .lab .pill.high{background:#fff7ed;color:var(--high);}
.lab .pill.med{background:#fffbeb;color:var(--med);} .lab .pill.low{background:#ecfeff;color:var(--low);}
.lab .pill.ok{background:#f0fdf4;color:var(--ok);}
.lab .finding{border:1px solid var(--gray-200);border-left-width:4px;border-radius:9px;padding:.85rem 1rem;margin-bottom:.7rem;background:#fff;}
.lab .finding.crit{border-left-color:var(--crit);} .lab .finding.high{border-left-color:var(--high);}
.lab .finding.med{border-left-color:var(--med);} .lab .finding.low{border-left-color:var(--low);}
.lab .finding.ok{border-left-color:var(--ok);}
.lab .finding .top{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem;flex-wrap:wrap;}
.lab .sev{font:700 .64rem/1 var(--font-mono);letter-spacing:.08em;padding:.28rem .45rem;border-radius:5px;color:#fff;text-transform:uppercase;}
.lab .sev.crit{background:var(--crit);} .lab .sev.high{background:var(--high);}
.lab .sev.med{background:var(--med);} .lab .sev.low{background:var(--low);} .lab .sev.ok{background:var(--ok);}
.lab .finding .ttl{font-weight:700;font-size:.9rem;}
.lab .finding .desc{font-size:.83rem;color:var(--gray-600);}
.lab .finding code{font-family:var(--font-mono);font-size:.78rem;background:var(--gray-100);color:var(--navy-700);padding:.08rem .34rem;border-radius:4px;}
.lab .finding .fix{font-size:.78rem;color:var(--navy-600);margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--gray-200);}
.lab .finding .fix b{color:var(--accent);}
.lab .badge-lite{font:600 .66rem/1 var(--font-jp);padding:.26rem .44rem;border-radius:5px;background:#fef2f2;color:var(--crit);}

/* Tables / matrix */
.lab .sec-lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);font-weight:700;margin:1.3rem 0 .6rem;}
.lab .tbl{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:.4rem;}
.lab .tbl th{text-align:left;font-size:.7rem;letter-spacing:.05em;color:var(--gray-500);text-transform:uppercase;padding:.4rem .5rem;border-bottom:1px solid var(--gray-200);}
.lab .tbl td{padding:.5rem;border-bottom:1px solid var(--gray-100);vertical-align:top;font-family:var(--font-mono);font-size:.76rem;color:var(--navy-700);}
.lab .tag{font:600 .68rem/1 var(--font-jp);padding:.2rem .4rem;border-radius:5px;}
.lab .tag.allow{background:#f0fdf4;color:var(--ok);} .lab .tag.deny{background:#fef2f2;color:var(--crit);}
.lab .tag.create{background:#f0fdf4;color:var(--ok);} .lab .tag.update{background:#eff6ff;color:var(--accent);}
.lab .tag.replace{background:#fff7ed;color:var(--high);} .lab .tag.destroy{background:#fef2f2;color:var(--crit);}
.lab .matrix{border-collapse:collapse;font:.74rem/1 var(--font-mono);margin-top:.5rem;}
.lab .matrix th,.lab .matrix td{border:1px solid var(--gray-200);padding:.45rem .55rem;text-align:center;min-width:52px;}
.lab .matrix th{background:var(--gray-100);color:var(--navy-700);font-weight:700;}
.lab .matrix td.hit{background:#eff6ff;color:var(--accent);font-weight:700;}
.lab .matrix td.warn{background:#fef2f2;color:var(--crit);font-weight:700;}
.lab .matrix td.none{color:var(--gray-300);}
.lab .matrix .rowh{background:var(--gray-100);font-weight:700;color:var(--navy-700);text-align:right;}

/* Diagram output */
.lab .diagram-out{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:1rem;overflow:auto;min-height:200px;}
.lab .diagram-out svg{max-width:100%;height:auto;}
.lab pre.code{background:var(--navy-900);color:#e2e8f0;font:.76rem/1.5 var(--font-mono);padding:.9rem;border-radius:10px;overflow:auto;margin-top:.6rem;white-space:pre;}

/* Contextual CTA (tool-specific) */
.lab .cta{background:var(--navy-800);color:#fff;text-align:center;padding:2.6rem 1.5rem;}
.lab .cta h3{font-size:1.25rem;margin-bottom:.5rem;color:#fff;}
.lab .cta p{color:var(--gray-300);max-width:580px;margin:0 auto 1.2rem;font-size:.92rem;}

/* Tool-specific disclaimer (旧 .foot の注意書きを明色ノート化) */
.lab-disclaimer{background:var(--gray-50);border-top:1px solid var(--gray-200);padding:1.6rem 0;}
.lab-disclaimer .wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem;}
.lab-disclaimer p{font-size:.78rem;color:var(--gray-500);line-height:1.75;}
.lab-disclaimer p + p{margin-top:.5rem;}
.lab-disclaimer a{color:var(--accent);text-decoration:none;}
.lab-disclaimer a:hover{text-decoration:underline;}
.lab-disclaimer code{font-family:var(--font-mono);font-size:.74rem;background:var(--gray-100);color:var(--navy-700);padding:.05rem .3rem;border-radius:4px;}