/* インフラをコードで。style.css と flow.css の上に重ねる */
:root { --code: #0f172a; }
.fhead p a, .nlink a, .nsrc a, .srcl a, .seealso a { color: #1d4ed8; text-underline-offset: 2px; }
.hint { display: inline-block; vertical-align: middle; font-size: 10.5px; font-weight: 700; line-height: 1.5; color: #475569; background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.aitag { font-size: 12px; font-weight: 700; color: #6d28d9; background: #ede9fe; border-radius: 6px; padding: 2px 8px; margin-right: 8px; vertical-align: middle; }
.srcl, .seealso { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.seealso { font-size: 13px; color: var(--ink2); }
.ncard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ncard h3 { margin: 0; font-size: 15px; }
.ncard p { margin: 0; font-size: 13px; color: var(--ink2); }
.ncard .nsrc { margin-top: auto; padding-top: 2px; font-size: 12px; color: var(--muted); }
.ncard .nlink { font-size: 12.5px; font-weight: 700; }
.ncard .nlink a { text-decoration: none; }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* なぜ */
.whybox { padding: 6px 14px 10px; overflow-x: auto; }
.whytable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.whytable th, .whytable td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.whytable thead th { font-size: 12px; color: var(--muted); }
.whytable tbody th { width: 11em; font-weight: 700; }
.whytable td:nth-child(2) { color: #92400e; }
.whytable td:nth-child(3) { color: #047857; font-weight: 600; }
.whyhint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Terraform の流れと plan */
.tfflow, .gogrid { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gogrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tfflow li, .gogrid li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink2); }
.tfflow .fn, .gogrid .fn { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 11.5px/22px var(--latin); text-align: center; }
.tfflow b, .gogrid b { font-size: 14.5px; color: var(--ink); }
.planbox { padding: 14px 16px; }
.plchoices { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.plchoices button { appearance: none; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.plchoices button:hover { border-color: #94a3b8; color: var(--ink); }
.plchoices button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pllay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.pllay h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.plcode, .plout { margin: 0; font-family: var(--latin); font-size: 12px; line-height: 1.65; background: var(--code); color: #cbd5e1; border-radius: 10px; padding: 9px 0; overflow-x: auto; }
.plcode .cl, .plout .pl { display: block; padding: 0 12px; white-space: pre; min-height: 1.65em; }
.plcode .cl.add { background: rgba(34, 197, 94, .16); color: #bbf7d0; }
.plcode .cl.del { background: rgba(239, 68, 68, .16); color: #fecaca; }
.plout .pl.add { color: #86efac; }
.plout .pl.upd { color: #fcd34d; }
.plout .pl.del { color: #fca5a5; }
.plout .pl.rep { color: #fda4af; font-weight: 600; }
.plout .pl.cmt { color: #94a3b8; }
.plout .pl.sum { color: #fff; font-weight: 700; }
.plsay { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; }
.plsay p { margin: 0; flex: 1 1 360px; font-size: 13.5px; color: var(--ink2); }
.risk { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.risk.low { background: #ecfdf5; color: #047857; }
.risk.mid { background: #fffbeb; color: #b45309; }
.risk.high { background: #fef2f2; color: #b91c1c; }

/* Kubernetes */
.k8sgrid { margin-bottom: 10px; }
.kbox { padding: 14px 16px; }
.kctrl { display: flex; gap: 6px; flex-wrap: wrap; }
.kctrl button { appearance: none; font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.kctrl button:hover:not(:disabled) { border-color: #94a3b8; color: var(--ink); }
.kctrl button:disabled { opacity: .4; cursor: default; }
.kstate { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.kstate > div { background: var(--line2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.kstate span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.kstate b { font-size: 15px; }
.kdes { background: #eef2ff !important; }
.kpods { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; min-height: 64px; }
.pod { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; background: var(--paper); transition: opacity .3s, border-color .3s; }
.pod b { font-family: var(--latin); font-size: 12.5px; }
.pod span { font-family: var(--latin); font-size: 12px; font-weight: 600; }
.pod.v1 span { color: #1d4ed8; }
.pod.v2 span { color: #7c3aed; }
.pod i { font-style: normal; font-size: 11.5px; color: var(--ink2); }
.pod.run { border-color: #86efac; background: #f0fdf4; }
.pod.start { border-color: #fcd34d; background: #fffbeb; }
.pod.term { opacity: .45; text-decoration: line-through; }
.klog { list-style: none; margin: 10px 0 0; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--line2); border-radius: 10px; font-size: 12.5px; color: var(--ink2); display: flex; flex-direction: column; gap: 2px; }
.klog li:first-child { color: var(--ink); font-weight: 700; }
.gohint { margin: 0; font-size: 13px; color: var(--ink2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* チェックリスト */
.cklist { padding: 10px 16px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.mlist label { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; cursor: pointer; padding: 5px 0; }
.mlist input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #0d9488; cursor: pointer; }
.mlist input:checked + span { color: var(--muted); text-decoration: line-through; }
.ckfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ckcount { font-family: var(--latin); font-size: 13px; color: var(--muted); }
.ckreset { appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }

.plchoices button:focus-visible, .kctrl button:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible, .ncard a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pllay { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cgrid, .tfflow, .gogrid, .mlist, .kstate { grid-template-columns: minmax(0, 1fr); }
  .whytable tbody th { width: auto; }
  .whytable, .whytable tbody, .whytable tr, .whytable th, .whytable td { display: block; }
  .whytable thead { display: none; }
  .whytable tr { padding: 8px 0; border-bottom: 1px solid var(--line2); }
  .whytable th, .whytable td { border: 0; padding: 2px 0; }
  .whytable td:nth-child(2)::before { content: '手: '; color: var(--muted); }
  .whytable td:nth-child(3)::before { content: 'コード: '; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .pod { transition: none; }
}