/* しくみタブ（about.html）専用。デザイン案 C「ブループリント（設計図）」を style.css に重ねる。SVG の色もここで付ける。
   Kiro Update Judge のしくみタブ（kiro-update-judge の web/about.css）と同じ作りで、別の仕組み・次の実行の色などを足した */
.about-c {
  --bp: #0d1b2e; --bp2: #10243b; --cyan: #5eead4; --cyan-d: rgba(94, 234, 212, .35); --amber: #fbbf24; --violet: #a78bfa;
  --sky: #7dd3fc; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
/* 本文へ移動のリンク（キーボードで使うときだけ見える） */
.about-c .skip { position: absolute; left: -9999px; }
.about-c .skip:focus { left: 8px; top: 8px; z-index: 10; background: #fff; color: #000; padding: 8px 12px; }
.about-c main { margin-top: 1.4rem; }
/* ヘッダーのタブは判定タブと同じ色のまま（main と footer のリンクだけ色を変える） */
.about-c main a, .about-c footer a { color: var(--sky); }
.about-c main a:focus-visible, .about-c footer a:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
.about-c footer { max-width: 980px; margin: 0 auto; padding: .5rem 1rem 2rem; color: var(--muted); font-size: .72rem; line-height: 1.7; }
.about-c footer p { margin: .2rem 0; }
.code { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--cyan); }

/* 方眼紙の地のパネル */
.sheet { position: relative; margin: 0 0 1rem; padding: 1.2rem; border: 1px solid var(--cyan-d); border-radius: 6px;
  background:
    linear-gradient(rgba(94, 234, 212, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(94, 234, 212, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bp); }
/* 四隅のトンボ */
.sheet::before, .sheet::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--cyan); }
.sheet::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sheet::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.about-c h2, .about-c h3 { text-wrap: balance; }
.sheet h2 { font-size: 1.05rem; margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }

/* ---- 表題 ---- */
.head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; align-items: center; }
.head h2 { font-size: 1.8rem; margin: .3rem 0 .6rem; }
.head-text p:not(.code) { margin: 0; font-size: .86rem; line-height: 1.8; color: #cfe3ee; }
.spec { margin: 0; border: 1px solid var(--cyan-d); font-size: .78rem; }
.spec div { display: grid; grid-template-columns: 6em 1fr; border-bottom: 1px solid var(--cyan-d); }
.spec div:last-child { border-bottom: none; }
.spec dt { padding: .45rem .6rem; font-family: var(--mono); color: var(--cyan); border-right: 1px solid var(--cyan-d); background: rgba(94, 234, 212, .06); }
.spec dd { margin: 0; padding: .45rem .6rem; min-width: 0; overflow-wrap: anywhere; }
.spec div:last-child dd { color: var(--amber); font-weight: bold; }

/* ---- 構成図 ---- */
.diagram { margin: 0 0 1rem; }
.diagram figcaption { font-size: .9rem; font-weight: bold; margin-bottom: .6rem; display: flex; gap: .6rem; align-items: baseline; }
.bp { display: block; width: 100%; height: auto; }
.bp-tall { display: none; max-width: 420px; margin: 0 auto; }
.bp text { font-family: -apple-system, "Hiragino Sans", sans-serif; }
.zone { fill: none; stroke: var(--cyan-d); stroke-width: 1.2; stroke-dasharray: 6 5; }
.zone-other { stroke: rgba(125, 211, 252, .55); fill: rgba(125, 211, 252, .03); }
.zone-stack { stroke: rgba(167, 139, 250, .6); }
.zone-sfn { fill: rgba(124, 92, 255, .07); stroke: rgba(167, 139, 250, .8); stroke-dasharray: none; }
.zone-shared { stroke: var(--amber); fill: rgba(251, 191, 36, .04); }
.zone-legend { stroke: var(--cyan); }
.zone-t { fill: var(--cyan); font-size: 11px; letter-spacing: .04em; }
.zone-to { fill: var(--sky); }
.zone-t2 { fill: #c4b5fd; }
.zone-t3 { fill: #c4b5fd; font-weight: bold; }
.zone-ty { fill: var(--amber); font-weight: bold; }
.box { fill: var(--bp2); stroke: var(--cyan); stroke-width: 1.2; }
.box-fn { fill: #1b1838; stroke: #a78bfa; }
.box-hot { stroke: var(--amber); stroke-width: 1.8; }
.box-next { stroke-dasharray: 4 3; }
.box-svc { fill: #0f2a33; }
.box-ext { fill: #13233a; stroke: var(--sky); }
/* つながっている別の仕組み（このサイトのスタックの外）の箱 */
.box-other { fill: #122033; stroke: var(--sky); stroke-dasharray: 4 3; }
.box-you { fill: rgba(52, 211, 153, .1); stroke: #34d399; }
.box-ai { fill: rgba(251, 191, 36, .1); stroke: var(--amber); stroke-width: 1.6; }
.box-legend { fill: rgba(13, 27, 46, .8); stroke: var(--cyan-d); }
.t { fill: #e8f4f8; font-size: 13px; font-weight: bold; text-anchor: middle; }
.t-s { font-size: 12px; }
.t-y { fill: #fde68a; }
.ts { fill: #9fb8c8; font-size: 10.5px; text-anchor: middle; }
.ts-w { fill: #d6e7ee; font-size: 10px; }
.ts-y { fill: #fde68a; }
.tl { fill: var(--cyan); font-size: 11px; font-weight: bold; }
.tl2 { fill: #9fb8c8; font-size: 10.5px; }
.ln { fill: none; stroke: var(--cyan); stroke-width: 1.4; }
/* 読む線は点線にする（実線は流れと書き込み） */
.ln-r { stroke-dasharray: 5 4; }
.ln-y { stroke: var(--amber); stroke-width: 1.8; }
.ln-loop { stroke: var(--violet); stroke-dasharray: 4 3; }
.ah { fill: var(--cyan); }
.ah-y { fill: var(--amber); }
.ah-v { fill: var(--violet); }
.flow { stroke-dasharray: 5 4; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.read { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.read li { font-size: .76rem; line-height: 1.65; color: #b7cad6; border-top: 2px solid var(--violet); padding-top: .5rem; min-width: 0; }
.read li:nth-child(2) { border-top-color: var(--amber); }
.read b { display: block; color: var(--text); font-size: .84rem; margin-bottom: .15rem; }
.link-note { margin: .9rem 0 0; font-size: .76rem; line-height: 1.7; color: #b7cad6; padding: .6rem .8rem; border: 1px dashed rgba(125, 211, 252, .55); border-radius: 4px; }
.link-note b { color: var(--sky); }

/* ---- 部品表 ---- */
.bom { width: 100%; border-collapse: collapse; font-size: .8rem; }
.bom th, .bom td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--cyan-d); vertical-align: top; line-height: 1.6; }
.bom thead th { font-family: var(--mono); font-size: .68rem; font-weight: normal; color: var(--cyan); letter-spacing: .06em; border-bottom: 1px solid var(--cyan); }
.bom tbody th { width: 30%; font-weight: bold; }
.bom tbody th small { display: block; font-weight: normal; color: #9fb8c8; font-size: .7rem; }
.bom td:last-child { width: 28%; color: #9fb8c8; }
.row-ai th, .row-ai td { background: rgba(251, 191, 36, .07); }
.row-ai th { color: #fde68a; }
.row-other th, .row-other td { background: rgba(125, 211, 252, .05); }
.row-other th { color: var(--sky); }
.sls-note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.7; padding: .7rem .8rem; border: 1px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .07); border-radius: 4px; }
.sls-note b { color: #34d399; }

/* ---- コスト ---- */
.cost-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
.formulas { display: grid; gap: .4rem; align-content: start; }
.f { display: grid; grid-template-columns: 5.5em 1fr auto; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--cyan-d); background: rgba(16, 36, 59, .8); }
.f p { margin: 0; }
.f-name { font-size: .78rem; font-weight: bold; }
.f-exp { font-family: var(--mono); font-size: .72rem; color: #9fb8c8; overflow-wrap: anywhere; }
.f-val { font-family: var(--mono); font-size: .9rem; font-weight: bold; white-space: nowrap; }
.f-sum { border-color: var(--amber); background: rgba(251, 191, 36, .08); }
.f-sum .f-val { color: var(--amber); font-size: 1.2rem; }
/* 別の仕組みの費用（合計に入れない） */
.f-ext { border-style: dashed; border-color: rgba(125, 211, 252, .55); background: transparent; }
.f-ext .f-name, .f-ext .f-val { color: var(--sky); font-weight: normal; }
.meter-box { border: 1px solid var(--cyan-d); padding: .8rem; background: rgba(16, 36, 59, .8); min-width: 0; }
.m-title { margin: 0 0 1.4rem; font-size: .76rem; color: #9fb8c8; }
/* 0〜1 ドルの目盛りに 0.6〜0.7 の帯 */
.range { position: relative; height: 12px; background: rgba(94, 234, 212, .12); border-radius: 6px; margin: 0 .9rem 1.6rem; }
.range-fill { position: absolute; left: 60%; width: 10%; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cyan), var(--amber)); }
.tick { position: absolute; top: 16px; transform: translateX(-50%); font-family: var(--mono); font-size: .66rem; color: #9fb8c8; }
.tick::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 6px; background: #9fb8c8; }
.t0 { left: 0; } .t1 { left: 25%; } .t2 { left: 50%; } .t3 { left: 75%; } .t4 { left: 100%; }
.m-note { margin: 0 0 .8rem; font-size: .74rem; line-height: 1.6; color: #b7cad6; }
.once { display: grid; gap: .1rem; padding: .6rem .7rem; border: 1px dashed var(--violet); }
.once b { font-family: var(--mono); font-size: 1.1rem; color: #c4b5fd; }
.once span:last-child { font-size: .72rem; line-height: 1.6; color: #b7cad6; }
.cost-notes { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .74rem; line-height: 1.8; color: #9fb8c8; }
.cost-notes b { color: #d6e7ee; }

/* ---- 設計メモ ---- */
.memos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.memos li { position: relative; padding: .8rem .9rem .8rem 4.2rem; border: 1px solid var(--cyan-d); background: rgba(16, 36, 59, .8); min-width: 0; }
.mid { position: absolute; left: .8rem; top: .85rem; font-family: var(--mono); font-size: .72rem; color: var(--bp); background: var(--cyan); padding: .05rem .3rem; border-radius: 2px; }
.memos h3 { margin: 0 0 .3rem; font-size: .86rem; }
.memos p { margin: 0 0 .45rem; font-size: .76rem; line-height: 1.65; color: #b7cad6; }
.memos code { font-family: var(--mono); font-size: .7rem; color: var(--cyan); background: rgba(94, 234, 212, .08); padding: .1rem .4rem; border-radius: 3px; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }

/* ---- スマホ（既存の style.css と同じ 720px で切り替え） ---- */
@media (max-width: 720px) {
  .sheet { padding: 1rem .8rem; }
  .head { grid-template-columns: 1fr; gap: 1rem; }
  .head h2 { font-size: 1.45rem; }
  .bp-wide { display: none; }
  .bp-tall { display: block; }
  /* 縦長の図は 390px 幅で約 0.92 倍に縮むので、小さい文字は 12px にして画面上で約 11px にする */
  .bp-tall .ts, .bp-tall .ts-w, .bp-tall .zone-t, .bp-tall .tl2 { font-size: 12px; }
  .read { grid-template-columns: 1fr; }
  .bom thead { display: none; }
  .bom, .bom tbody, .bom tr, .bom th, .bom td { display: block; width: auto !important; }
  .bom tr { padding: .5rem 0; border-bottom: 1px solid var(--cyan-d); }
  .bom th, .bom td { border: none; padding: .1rem .2rem; }
  .bom td:last-child::before { content: "料金: "; color: var(--cyan); }
  .cost-grid { grid-template-columns: 1fr; }
  .f { grid-template-columns: 1fr auto; }
  .f-exp { grid-column: 1 / -1; grid-row: 2; }
  .memos { grid-template-columns: 1fr; }
}