/* ============================================================
   What to buy Today — 文档统一样式
   适用：docs/（用户文档·对外技术文档） 与 design-docs/（内部技术文档）
   两处各存一份同内容副本；改样式须同步两份（deploy_docs.ps1 会各自上传）。
   设计原则：表格与图优先、正文克制；藏青 #0a2d6b + 金 #c8a94d 品牌色；可打印。
   ============================================================ */
:root{
  --navy:#0a2d6b; --navy-l:#123f8f; --blue:#1565c0; --gold:#c8a94d;
  --ink:#1c2b45; --muted:#5a6b85; --border:#dce3ef; --bg:#f4f7fc;
  --pos:#1f8a3b; --neg:#c62828; --warn:#e65100; --warnbg:#fff8e1;
  --code-bg:#f5f7fb;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Segoe UI','Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75; font-size:15px;
  -webkit-text-size-adjust:100%;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- 页面骨架 ---------- */
.doc-head{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-l) 60%,var(--blue) 100%); color:#fff; padding:30px 0 26px; }
.doc-head .wrap{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.doc-head .brand{ display:flex; align-items:center; gap:12px; }
.doc-head img{ height:40px; }
.doc-head .tt{ flex:1 1 300px; }
.doc-head .kicker{ font-size:11.5px; letter-spacing:2.5px; color:#c8d6f2; font-weight:700; }
.doc-head h1{ font-size:26px; line-height:1.35; margin:4px 0 6px; }
.doc-head .meta{ font-size:12.5px; color:#c8d6f2; }
.doc-head .meta b{ color:#fff; }
.tag-internal{ display:inline-block; background:var(--gold); color:#3a2c00; font-size:11px; font-weight:800; border-radius:99px; padding:2px 11px; letter-spacing:.5px; }
.tag-external{ display:inline-block; background:rgba(255,255,255,.22); color:#fff; font-size:11px; font-weight:800; border-radius:99px; padding:2px 11px; letter-spacing:.5px; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }
main.wrap{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px 30px 34px; margin:22px auto 30px; box-shadow:0 3px 16px rgba(10,45,107,.06); }

/* ---------- 目录 ---------- */
.toc{ background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:10px; padding:14px 20px; margin:22px 0 8px; }
.toc h2{ font-size:13px; letter-spacing:1.5px; color:var(--navy); border:0; margin:0 0 8px; padding:0; }
.toc ol{ margin:0; padding-left:22px; columns:2; column-gap:30px; font-size:13.5px; }
.toc li{ margin:3px 0; break-inside:avoid; }
@media (max-width:700px){ .toc ol{ columns:1; } }

/* ---------- 标题层级 ---------- */
h2{ font-size:20px; color:var(--navy); margin:34px 0 12px; padding-bottom:7px; border-bottom:2px solid var(--navy); }
h2 .n{ display:inline-block; background:var(--navy); color:#fff; font-size:13px; font-weight:800; border-radius:6px; padding:1px 9px; margin-right:9px; vertical-align:2px; }
h3{ font-size:16px; color:var(--navy-l); margin:24px 0 8px; }
h3::before{ content:'▍'; color:var(--gold); margin-right:5px; }
h4{ font-size:14.5px; color:var(--ink); margin:18px 0 6px; }
p{ margin:9px 0; }
ul,ol{ margin:9px 0 9px 24px; }
li{ margin:4px 0; }
strong,b{ color:var(--navy); }

/* ---------- 表格（本文档体系的主力表达形式） ---------- */
.tbl{ overflow-x:auto; margin:14px 0 18px; border:1px solid var(--border); border-radius:10px; }
table{ width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
thead th{ background:var(--navy); color:#fff; padding:9px 11px; text-align:left; font-weight:600; white-space:nowrap; position:sticky; top:0; }
tbody th{ background:var(--bg); color:var(--navy); text-align:left; font-weight:700; padding:8px 11px; border-bottom:1px solid var(--border); white-space:nowrap; }
td{ padding:8px 11px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:last-child td, tbody tr:last-child th{ border-bottom:0; }
tbody tr:hover td{ background:#f7faff; }
td.c,th.c{ text-align:center; }
td.n,th.n{ text-align:right; font-variant-numeric:tabular-nums; }
td.nw{ white-space:nowrap; }
table.compact td, table.compact th{ padding:6px 9px; font-size:12.5px; }
caption{ caption-side:bottom; font-size:11.5px; color:var(--muted); padding:7px 2px 0; text-align:left; }

/* ---------- 代码 ---------- */
code{ font-family:Consolas,'SF Mono',Menlo,monospace; font-size:12.5px; background:var(--code-bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:#0b3a6f; }
pre{ background:#0e1b33; color:#e6edf9; border-radius:10px; padding:14px 16px; overflow-x:auto; margin:12px 0 16px; font-size:12.5px; line-height:1.6; }
pre code{ background:none; border:0; padding:0; color:inherit; font-size:12.5px; }

/* ---------- 提示框 ---------- */
.note,.warn,.danger,.ok{ border-radius:10px; padding:12px 16px; margin:14px 0; font-size:13.5px; border:1px solid; }
.note{ background:#eef3fb; border-color:#c3d5f0; }
.ok{ background:#eef8f0; border-color:#bfe3c8; }
.warn{ background:var(--warnbg); border-color:#f0d38a; }
.danger{ background:#fdecec; border-color:#f4c7c3; }
/* 日本語サイト用のラベル。ラベルを出したくない箇所は class="note plain" のように plain を併記する */
.note::before{ content:'ℹ 補足　'; font-weight:800; color:var(--blue); }
.ok::before{ content:'✅ 確認済み　'; font-weight:800; color:var(--pos); }
.warn::before{ content:'⚠ 注意　'; font-weight:800; color:var(--warn); }
.danger::before{ content:'🔴 禁止事項　'; font-weight:800; color:var(--neg); }
.note.plain::before,.warn.plain::before,.danger.plain::before,.ok.plain::before{ content:none; }

/* ---------- 图（SVG 架构图/时序图容器） ---------- */
figure{ margin:18px 0 20px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 14px 10px; overflow-x:auto; }
figure svg{ display:block; max-width:100%; height:auto; margin:0 auto; }
figcaption{ font-size:12px; color:var(--muted); text-align:center; margin-top:10px; padding-top:8px; border-top:1px dashed var(--border); }
/* SVG 内通用类（在 SVG 里用 class 引用，省去逐元素写样式） */
.sv-box{ fill:#fff; stroke:var(--navy); stroke-width:1.6; }
.sv-box-a{ fill:#eef3fb; stroke:var(--navy); stroke-width:1.6; }
.sv-box-g{ fill:#fdf8ec; stroke:var(--gold); stroke-width:1.8; }
.sv-box-d{ fill:var(--navy); stroke:none; }
.sv-t{ font-family:'Segoe UI',Arial,sans-serif; font-size:12px; fill:var(--ink); }
.sv-t-b{ font-family:'Segoe UI',Arial,sans-serif; font-size:12.5px; font-weight:700; fill:var(--navy); }
.sv-t-w{ font-family:'Segoe UI',Arial,sans-serif; font-size:12.5px; font-weight:700; fill:#fff; }
.sv-t-s{ font-family:'Segoe UI',Arial,sans-serif; font-size:10.5px; fill:var(--muted); }
.sv-ln{ stroke:var(--navy); stroke-width:1.5; fill:none; }
.sv-ln-d{ stroke:var(--muted); stroke-width:1.3; fill:none; stroke-dasharray:5 4; }
.sv-ln-g{ stroke:var(--gold); stroke-width:2; fill:none; }

/* ---------- 徽标/状态 ---------- */
.badge{ display:inline-block; font-size:11px; font-weight:700; border-radius:99px; padding:1px 9px; white-space:nowrap; }
.b-prod{ background:#e7f4ea; color:var(--pos); border:1px solid #bfe3c8; }
.b-dev{ background:#e9f2fd; color:var(--blue); border:1px solid #c3d5f0; }
.b-wip{ background:var(--warnbg); color:var(--warn); border:1px solid #f0d38a; }
.b-no{ background:#fdecec; color:var(--neg); border:1px solid #f4c7c3; }
.kv{ display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; font-size:13.5px; margin:12px 0; }
.kv dt{ font-weight:700; color:var(--navy); }

/* ---------- 页脚 ---------- */
.doc-foot{ background:#0b1830; color:#8fa2c4; font-size:12px; padding:24px 20px 30px; line-height:1.9; }
.doc-foot .wrap{ padding:0 20px; }
.doc-foot b{ color:#c2d0ea; }
.doc-foot a{ color:#c2d0ea; }

/* ---------- 打印 ---------- */
@media print{
  body{ background:#fff; font-size:11pt; }
  .doc-head{ background:var(--navy) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  main.wrap{ border:0; box-shadow:none; margin:0; padding:0; max-width:none; }
  thead th{ position:static; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  h2{ page-break-after:avoid; }
  figure,.tbl,table{ page-break-inside:avoid; }
  .toc{ page-break-after:always; }
}
@media (max-width:640px){
  body{ font-size:14.5px; }
  main.wrap{ padding:8px 16px 26px; border-radius:0; }
  .doc-head h1{ font-size:21px; }
}