/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Bone Flow Formal Component Header
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Component ID : 002
File         : bone-joint.css
Version      : 1.1.40
Status       : Development
Standard     : Bone Flow Development Standard v1.0
Description  : 線上アンカー付きドラッグ吹き出し、交差アニメーション、レスポンシブ比較表示。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
*{box-sizing:border-box}
body.bf002-page-body.bf002-page-body{font-family:Meiryo,"Yu Gothic",sans-serif;color:#e8edf7;background:#10141d;color-scheme:dark}
body{margin:0;min-width:280px;background:#10141d}
body.bf002-page-body .bf-page{width:min(100%,1368px);margin:auto;padding:clamp(10px,2vw,24px)}
body.bf002-page-body .bf-header,body.bf002-page-body .bf-panel{min-width:0;background:#171d29;border:1px solid #303a4d;border-radius:12px;padding:clamp(12px,2vw,20px);margin-bottom:18px;overflow:hidden}
body.bf002-page-body .bf-header h1,body.bf002-page-body .bf-panel h2{overflow-wrap:anywhere}body.bf002-page-body .bf-header h1{margin:0 0 8px}body.bf002-page-body .bf-header a{color:#91c8ff}body.bf002-page-body .bf-overall{font-size:1.25rem;font-weight:700}body.bf002-page-body .bf-pass{color:#72e6a8}body.bf002-page-body .bf-fail{color:#ff7f8c}
body.bf002-page-body .bf-marker-settings{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:flex-end;margin:14px 0;padding:14px;background:#111722;border:1px solid #303a4d;border-radius:10px;min-width:0}
body.bf002-page-body .bf-marker-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}body.bf002-page-body .bf-marker-group strong{margin-right:4px}body.bf002-page-body .bf-marker-choice{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:6px 9px;border:1px solid #40506a;border-radius:7px;background:#202a3a;cursor:pointer}body.bf002-page-body .bf-marker-choice:has(input:checked){border-color:#68d6ff;box-shadow:0 0 0 1px #68d6ff inset}body.bf002-page-body .bf-marker-symbol{font-size:1.2rem;line-height:1}body.bf002-page-body .bf-marker-choice input[type="color"]{width:42px;height:28px;padding:0;border:1px solid #4b5a70;background:#101722;border-radius:5px}body.bf002-page-body .bf-marker-choice input[type="range"]{width:min(110px,30vw)}body.bf002-page-body .bf-marker-choice input[type="text"]{width:min(150px,42vw);background:#111a27;color:#e8eef7;border:1px solid #435168;border-radius:5px;padding:6px 8px}body.bf002-page-body .bf-marker-choice select{max-width:100%;background:#111a27;color:#e8eef7;border:1px solid #435168;border-radius:5px;padding:5px 8px}body.bf002-page-body .bf-marker-choice output{min-width:34px;color:#73dbff;font-weight:700}
body.bf002-page-body .bf-scenarios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:16px;min-width:0}
body.bf002-page-body .bf-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:224px;background:#111722;border:1px solid #303a4d;border-radius:10px;padding:14px;overflow:hidden}body.bf002-page-body .bf-card h3{margin:0 0 4px;font-size:1rem}body.bf002-page-body .bf-card>p{margin:0;color:#aeb9c9;font-size:.88rem;overflow-wrap:anywhere}
body.bf002-page-body .bf-flow{position:relative;isolation:isolate;height:132px;min-width:0;margin-top:10px;overflow:hidden}
body.bf002-page-body .bf-node{position:absolute;top:42px;width:clamp(92px,31%,164px);min-height:50px;display:grid;place-items:center;padding:9px 8px;background:#202a3a;border:1px solid #4c5d78;border-radius:8px;text-align:center;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;z-index:2}.bf-node--source{left:1%}.bf-node--target{right:1%}.bf-node--missing{border-style:dashed;color:#ff9ba5;background:#281a20}.bf-node--error::before{content:"× ";color:#ff6c7d;font-weight:900}
body.bf002-page-body .bf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:hidden;pointer-events:none}.bf-joint-path{fill:none;stroke-width:var(--bf-joint-line-width,4);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.bf-joint-path--missing-source,.bf-joint-path--disconnected{stroke-dasharray:10 10}.bf-joint-path--straight{stroke-linejoin:miter}.bf-joint-path--orthogonal{stroke-linejoin:round}.bf-joint-marker{transform-box:fill-box;transform-origin:center}.bf-joint-marker-shape{fill:#111722;stroke:#68d6ff;stroke-width:4;vector-effect:non-scaling-stroke}.bf-joint-start--filled-circle .bf-joint-marker-shape,.bf-joint-start--filled-square .bf-joint-marker-shape,.bf-joint-end--filled-circle .bf-joint-marker-shape,.bf-joint-end--filled-square .bf-joint-marker-shape{fill:#68d6ff}.bf-joint-start--missing-target .bf-joint-marker-shape,.bf-joint-start--error .bf-joint-marker-shape,.bf-joint-start--missing-source .bf-joint-marker-shape{stroke:#ff697a}.bf-joint-start--missing-target.bf-joint-start--filled-circle .bf-joint-marker-shape,.bf-joint-start--missing-target.bf-joint-start--filled-square .bf-joint-marker-shape,.bf-joint-start--error.bf-joint-start--filled-circle .bf-joint-marker-shape,.bf-joint-start--error.bf-joint-start--filled-square .bf-joint-marker-shape,.bf-joint-start--missing-source.bf-joint-start--filled-circle .bf-joint-marker-shape,.bf-joint-start--missing-source.bf-joint-start--filled-square .bf-joint-marker-shape{fill:#ff697a}.bf-joint-start--disconnected .bf-joint-marker-shape,.bf-joint-end--disconnected .bf-joint-marker-shape{stroke:#f5c86d}.bf-joint-start--reconnecting .bf-joint-marker-shape,.bf-joint-end--reconnecting .bf-joint-marker-shape{stroke:#b28cff}.bf-joint-start--small .bf-joint-marker-shape,.bf-joint-end--small .bf-joint-marker-shape{stroke-width:3}.bf-joint-start--large .bf-joint-marker-shape,.bf-joint-end--large .bf-joint-marker-shape{stroke-width:5}.bf-joint-end-error line{stroke:#ff475d;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}.bf-joint-end-error-text{fill:#ff475d;font-size:22px;font-weight:900}.bf-joint-direction-marker{pointer-events:none;filter:drop-shadow(0 0 2px rgba(255,255,255,.4))}.bf-joint-direction-marker-shape{stroke:none;stroke-width:0;vector-effect:non-scaling-stroke}
.bf-joint-label{pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}.bf-joint-label rect{vector-effect:non-scaling-stroke}.bf-joint-label text{font-family:Meiryo,"Yu Gothic",sans-serif;font-weight:700}
body.bf002-page-body .bf-result{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start;margin-top:auto;padding-top:8px;min-width:0}body.bf002-page-body .bf-badge{display:inline-flex;max-width:100%;min-width:0;padding:4px 8px;border-radius:999px;background:#263246;font-size:.73rem;line-height:1.35;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.bf-row{display:flex;gap:8px;margin:5px 0;min-width:0}.bf-row span:last-child{overflow-wrap:anywhere}
body.bf002-page-body .bf-route-previews{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px;min-width:0}body.bf002-page-body .bf-route-preview{min-width:0;background:#111722;border:1px solid #35435a;border-radius:10px;padding:12px;transition:border-color .15s,box-shadow .15s}.bf-route-preview--active{border-color:#68d6ff;box-shadow:0 0 0 2px rgba(104,214,255,.2) inset}body.bf002-page-body .bf-route-preview h3{margin:0 0 4px}.bf-route-state{font-size:.78rem;color:#aeb9c9;overflow-wrap:anywhere}.bf-route-preview--active .bf-route-state{color:#72e6a8;font-weight:700}.bf-route-svg{display:block;width:100%;height:220px;margin-top:8px;background:rgba(7,12,20,.45);border-radius:8px;overflow:hidden}.bf-route-svg .bf-joint-path{stroke-width:5}body.bf002-page-body .bf-route-test-note{margin:10px 0 0;padding:8px 10px;border-left:3px solid #68d6ff;background:#111722;color:#b9c8dc;font-size:.84rem}body.bf002-page-body .bf-route-test-guide{stroke:#526277;stroke-width:1.5;stroke-dasharray:5 5;opacity:.65;vector-effect:non-scaling-stroke}body.bf002-page-body .bf-route-test-node rect{fill:#eef4ff;stroke:#50627a;stroke-width:2;vector-effect:non-scaling-stroke}body.bf002-page-body .bf-route-test-node text{fill:#111827;font-size:13px;font-weight:700}body.bf002-page-body .bf-route-test-port{stroke:#0a1019;stroke-width:2;vector-effect:non-scaling-stroke}.bf-route-test-port--out{fill:#38d878}.bf-route-test-port--in{fill:#438dff}body.bf002-page-body .bf-route-test-port-label{fill:#cce0ff!important;font-size:10px!important;font-weight:700}body.bf002-page-body .bf-curve-direction-tests,body.bf002-page-body .bf-curve-condition-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.bf-curve-direction-row,.bf-curve-condition-row{min-width:0;background:#111722;border:1px solid #35435a;border-radius:10px;padding:12px}.bf-curve-direction-row h3,.bf-curve-condition-row h3{margin:0 0 8px;font-size:.95rem}.bf-curve-direction-pair,.bf-curve-condition-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bf-curve-direction-cell,.bf-curve-condition-cell{min-width:0;padding:8px;background:#0a1019;border:1px solid #2c394c;border-radius:8px;text-align:center}.bf-curve-direction-cell strong,.bf-curve-condition-cell strong{font-size:.78rem;color:#b9c8dc}.bf-curve-direction-cell svg,.bf-curve-condition-cell svg{display:block;width:100%;height:230px;margin-top:5px;overflow:hidden;background:rgba(7,12,20,.38);border-radius:6px}.bf-curve-direction-cell .bf-joint-path,.bf-curve-condition-cell .bf-joint-path{stroke-width:4}
.bf-joint-path[data-attempt="first-failed"]{stroke-width:3;opacity:.9}.bf-joint-path[data-attempt="second-connected"]{stroke-width:5}.bf-joint-path[data-attempt="first-failed"]+.bf-joint-path[data-attempt="second-connected"]{filter:drop-shadow(0 0 4px rgba(198,167,255,.35))}
body.bf002-page-body .bf-intersection-legend{display:flex;gap:10px 18px;flex-wrap:wrap;color:#aeb9c9;font-size:.84rem;margin:10px 0}body.bf002-page-body .bf-intersection-svg{display:block;width:100%;height:auto;aspect-ratio:720/260;min-height:180px;max-height:320px;background:#0a1019;border:1px solid #334258;border-radius:10px;overflow:hidden}.bf-intersection-line{stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(100,190,255,.25));pointer-events:stroke;cursor:move;touch-action:none}.bf-joint-flow-indicator{pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.72))}.bf-intersection-line--jump{filter:drop-shadow(0 0 5px rgba(255,190,90,.42))}
@media(max-width:900px){body.bf002-page-body .bf-route-previews{grid-template-columns:repeat(2,minmax(0,1fr))}body.bf002-page-body .bf-curve-direction-tests,body.bf002-page-body .bf-curve-condition-tests{grid-template-columns:1fr}}
@media(max-width:620px){body.bf002-page-body .bf-route-previews{grid-template-columns:1fr}.bf-curve-direction-pair,.bf-curve-condition-pair{grid-template-columns:1fr}body.bf002-page-body .bf-page{padding:8px}body.bf002-page-body .bf-header,body.bf002-page-body .bf-panel{padding:11px;border-radius:9px}body.bf002-page-body .bf-marker-settings{padding:10px;gap:10px}body.bf002-page-body .bf-marker-group{width:100%}body.bf002-page-body .bf-card{padding:11px}body.bf002-page-body .bf-flow{height:158px}body.bf002-page-body .bf-node{top:52px;width:clamp(82px,34%,118px);font-size:.78rem;padding:7px 5px}body.bf002-page-body .bf-result{gap:5px}body.bf002-page-body .bf-badge{font-size:.68rem;border-radius:7px}body.bf002-page-body .bf-intersection-svg{min-height:150px}.bf-route-svg{height:220px}}
@media(max-width:380px){body.bf002-page-body .bf-flow{height:178px}body.bf002-page-body .bf-node{top:62px;width:38%;font-size:.72rem}body.bf002-page-body .bf-marker-choice{font-size:.82rem;padding:5px 7px}.bf-joint-label text{font-size:10px}}
@media(prefers-reduced-motion:reduce){.bf-joint-path{stroke:#68d6ff!important}.bf-joint-path--missing-target,.bf-joint-path--missing-source,.bf-joint-path--error{stroke:#ff697a!important}.bf-joint-path--disconnected{stroke:#f5c86d!important}.bf-joint-path--reconnecting{stroke:#b28cff!important}body.bf002-page-body .bf-svg animate,body.bf002-page-body .bf-intersection-svg animate{display:none}}

/* v1.1.4 draggable callout labels */
body.bf002-page-body .bf-svg{pointer-events:none}
.bf-joint-label{pointer-events:visiblePainted;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));touch-action:none}
.bf-joint-label-tail{stroke:#7f93ad;stroke-width:1.5;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;pointer-events:none}
.bf-joint-label-anchor{fill:#0e1622;stroke:#8bdfff;stroke-width:2;vector-effect:non-scaling-stroke;cursor:ew-resize;pointer-events:all}
.bf-joint-label-anchor:hover{fill:#8bdfff;stroke:#fff}
.bf-joint-label-body{cursor:move;pointer-events:all;touch-action:none}
.bf-joint-label-body:hover rect{stroke:#8bdfff;stroke-width:2}
body.bf002-page-body .bf-label-reset{font:inherit;color:#e8edf7}
body.bf002-page-body .bf-reconnect-joint{pointer-events:none}
@media(max-width:620px){.bf-joint-label-anchor{r:6}.bf-joint-label-tail{stroke-width:2}}

/* v1.1.4 boundary-safe callout correction */
.bf-joint-label text{dominant-baseline:alphabetic;pointer-events:none}
.bf-joint-label-body rect{shape-rendering:geometricPrecision}


/* v1.1.7 - #021 baseline Smoke Test / Validation Report + component completion management */
.bone-label-report-panel{padding-bottom:22px}
.bone-label-test-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.bone-label-test-actions button,.bone-label-completion-actions button{min-height:38px;padding:8px 14px;border:1px solid #435875;border-radius:7px;background:#172438;color:#eaf2ff;font:inherit;font-weight:700;cursor:pointer}
.bone-label-test-actions button:hover,.bone-label-completion-actions button:hover:not(:disabled){border-color:#6c91c4;background:#20334f}.bone-label-test-actions button:focus-visible,.bone-label-completion-actions button:focus-visible{outline:3px solid #78aef0;outline-offset:2px}
.bone-label-test-actions button.is-primary{border-color:#2d7ac5;background:#145493}.bone-label-test-actions button.is-primary:hover{background:#1965ad}.bone-label-test-actions button.is-validation{border-color:#208b46;background:#176a35}.bone-label-test-actions button.is-validation:hover{background:#1d8241}.bone-label-test-actions button.is-danger,.bone-label-completion-actions .is-danger{border-color:#b8384e;background:#98263b}.bone-label-test-actions button.is-danger:hover,.bone-label-completion-actions .is-danger:hover:not(:disabled){background:#b22e47}
.bone-label-overall-summary{display:grid;grid-template-columns:minmax(145px,1.2fr) repeat(6,minmax(100px,1fr));align-items:center;margin:0 0 18px;border:1px solid #33445c;border-radius:8px;background:#0e1724;overflow:hidden}.bone-label-overall-summary>div{display:grid;gap:4px;place-items:center;min-height:66px;padding:8px 12px;border-left:1px solid #33445c;text-align:center}.bone-label-overall-summary>div span{font-size:.78rem;color:#98a9bf}.bone-label-overall-summary>div strong{font-size:1rem;color:#eef4ff}.bone-label-overall-summary body.bf002-page-body .bf-overall{display:grid;place-items:center;min-height:42px;margin:12px;border-radius:6px;background:#172438;font-size:1.1rem;font-weight:800}body.bf002-page-body .bf-pass{color:#67efb1!important}body.bf002-page-body .bf-fail{color:#ff7d8d!important}
.bone-label-result-section{margin-top:15px;border:1px solid #30425b;border-radius:8px;background:#0c1522;overflow:hidden}.bone-label-result-section>h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:9px 14px;border-bottom:1px solid #305798;background:linear-gradient(90deg,#123f87,#174f9b);color:#fff;font-size:1.08rem}.bone-label-result-badge{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:4px 11px;border:1px solid currentColor;border-radius:999px;background:#172438;font-size:.76rem;font-weight:800;line-height:1;letter-spacing:.03em;white-space:nowrap}.bone-label-result-badge.is-not-run{color:#aebbd0;background:#172438}.bone-label-result-badge.is-pass{color:#67efb1;background:#123a31}.bone-label-result-badge.is-fail{color:#ff7d8d;background:#421d27}.bone-label-validation-list{display:grid;gap:7px;padding:12px 14px}.bone-label-validation-list>p{margin:0;color:#aebbd0}.bone-label-validation-list--columns{grid-template-columns:repeat(2,minmax(0,1fr))}.bone-label-validation-row{display:grid;grid-template-columns:28px 58px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid #2c3a50;border-radius:7px;background:#111b2a}.bone-label-validation-row.is-fail{border-color:#7a3844;background:#21151d}.bone-label-validation-number{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#203049;color:#cfe1f8;font-weight:700}.bone-label-validation-detail{display:grid;gap:3px;min-width:0}.bone-label-validation-name{font-weight:700;color:#f2f7ff}.bone-label-validation-reason{font-size:.9rem;color:#aebbd0;overflow-wrap:anywhere}.bone-label-validation-row.is-fail .bone-label-validation-reason{color:#ffb4bd}
.bone-label-completion-panel{border:1px solid #31557f;background:#101a29}.bone-label-completion-panel.is-complete{border-color:#35d98b}.bone-label-completion-panel>p{color:#aebbd0}.bone-label-completion-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:14px 0;background:#29415f;border:1px solid #29415f}.bone-label-completion-summary>div{display:flex;flex-direction:column;gap:6px;padding:12px;background:#101a29}.bone-label-completion-summary span{font-size:12px;color:#8eb7e8}.bone-label-completion-summary strong{color:#f3f7ff}.bone-label-completion-panel.is-complete #completion-flag,.bone-label-completion-panel.is-complete #completion-status,.bone-label-completion-panel.is-complete #completion-validation{color:#55e6a5}.bone-label-completion-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bone-label-completion-actions button{padding:0 16px}.bone-label-completion-actions button:disabled{opacity:.45;cursor:not-allowed}.bone-label-completion-actions span{color:#b7c9df}
@media(max-width:1050px){.bone-label-overall-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.bone-label-overall-summary>div{border-top:1px solid #33445c}.bone-label-validation-list--columns{grid-template-columns:1fr}}@media(max-width:800px){.bone-label-completion-summary{grid-template-columns:1fr}}@media(max-width:620px){.bone-label-overall-summary{grid-template-columns:1fr 1fr}.bone-label-test-actions button{flex:1 1 210px}}

/* v1.1.10 - IN / OUT / RETURN + Shape Avoidance preview */
body.bf002-page-body .bf-return-panel{overflow:hidden}body.bf002-page-body .bf-return-svg{display:block;width:100%;height:auto;min-height:620px;background:rgba(7,12,20,.52);border:1px solid #26364c;border-radius:10px;margin-top:12px}.bf-return-shape{fill:#eef4ff;stroke:#50627a;stroke-width:2}.bf-return-title{fill:#111827;font-size:16px;font-weight:700}.bf-return-port{stroke-width:3;fill:#0d1420}.bf-return-port--in{stroke:#2f6fff}.bf-return-port--out{stroke:#22c55e}.bf-return-port--return{stroke:#f5b942}.bf-return-label{fill:#dce7f7;font-size:11px;font-weight:700}.bf-return-path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.bf-return-path--normal{filter:drop-shadow(0 0 4px rgba(85,214,255,.55))}.bf-return-path--out-return{stroke-dasharray:5 5;filter:drop-shadow(0 0 4px rgba(255,138,76,.4))}.bf-return-path--return{stroke-dasharray:10 7;filter:drop-shadow(0 0 4px rgba(245,185,66,.35))}.bf-return-note{fill:#b9c7dc;font-size:13px;font-weight:700}

body.bf002-page-body .bf-test-diagnostic{margin:6px 0 0;padding:8px 10px;border:1px solid #7a3844;border-radius:6px;background:#100d12;color:#ffd4da;font:12px/1.45 Consolas,"Courier New",monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}

/* v1.1.26 practical Curve connection test */
body.bf002-page-body .bf-route-subtitle{margin:22px 0 8px;font-size:1.05rem}body.bf002-page-body .bf-runtime-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin-top:6px;padding:4px 7px;border:1px solid #33506c;border-radius:999px;background:#0d1b29;color:#73dbff;font-size:.72rem;font-weight:700;overflow-wrap:anywhere}body.bf002-page-body .bf-curve-direction-tests,body.bf002-page-body .bf-curve-condition-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.bf-curve-practical-row{min-width:0;padding:12px;background:#111722;border:1px solid #35435a;border-radius:10px}.bf-curve-practical-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:8px}.bf-curve-practical-head h3{margin:0;font-size:.95rem}.bf-curve-practical-head>span:not(body.bf002-page-body .bf-runtime-badge){color:#b9c8dc;font-size:.78rem}.bf-curve-practical-svg{display:block;width:100%;height:300px;background:rgba(7,12,20,.48);border:1px solid #2c394c;border-radius:8px;overflow:hidden}.bf-curve-practical-svg .bf-joint-path{stroke-width:5}.bf-curve-practical-svg body.bf002-page-body .bf-route-test-node rect{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}@media(max-width:980px){body.bf002-page-body .bf-route-previews{grid-template-columns:repeat(2,minmax(0,1fr))}body.bf002-page-body .bf-curve-direction-tests,body.bf002-page-body .bf-curve-condition-tests{grid-template-columns:1fr}}@media(max-width:620px){body.bf002-page-body .bf-route-previews{grid-template-columns:1fr}.bf-curve-practical-svg{height:280px}}

body.bf002-page-body .bf-return-case-title{fill:#e8eef7;font-size:15px;font-weight:800}body.bf002-page-body .bf-return-case-divider{stroke:#2f3f55;stroke-width:1;stroke-dasharray:6 7}.bf-return-shape-group[data-return-case="rereturn"][data-shape-role="return-source"] .bf-return-shape{stroke:#f5b942;stroke-width:3}.bf-return-shape-group[data-return-case="rereturn"] .bf-return-port--out{filter:drop-shadow(0 0 4px rgba(34,197,94,.75))}

/* v1.1.28 directional type compatibility markers */
.bf-joint-compatibility-warning{pointer-events:none}.bf-joint-compatibility-warning-symbol{fill:#ffd54f;font-size:22px;font-weight:900;paint-order:stroke fill;stroke:#111722;stroke-width:1.5;vector-effect:non-scaling-stroke}.bf-joint-compatibility-error line{stroke:#ff475d}


/* v1.1.35 WAIT / Target Busy: #018 Bone Icon v1.0.9 の正式Font Awesome font-face配置を参照し、WAIT端点を最前面overlay表示する。 */
@font-face{font-family:"BoneFlowFontAwesome";src:url("./vendor/fontawesome/webfonts/fa-solid-900.woff2") format("woff2");font-style:normal;font-weight:900;font-display:block}
.bf-joint-start--waiting .bf-joint-marker-shape{stroke:#ffd166}
.bf-joint-path--waiting{filter:drop-shadow(0 0 4px rgba(255,209,102,.3))}
.bf-joint-waiting-spinner{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:bf-joint-wait-spin .8s linear infinite;filter:drop-shadow(0 0 3px rgba(255,209,102,.5))}
.bf-joint-waiting-spinner-symbol{fill:#ffd166;font-family:"BoneFlowFontAwesome","Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;font-size:24px;font-weight:900;paint-order:stroke fill;stroke:#111722;stroke-width:1;vector-effect:non-scaling-stroke}
@keyframes bf-joint-wait-spin{to{transform:rotate(360deg)}}
body.bf002-page-body .bf-wait-test-stage{position:relative;height:190px;margin:14px 0;border:1px solid #35435a;border-radius:10px;background:#0a1019;overflow:hidden}
body.bf002-page-body .bf-wait-test-stage body.bf002-page-body .bf-svg{z-index:2}body.bf002-page-body .bf-wait-test-stage .bf-wait-overlay{z-index:6;overflow:visible}body.bf002-page-body .bf-wait-node{position:absolute;z-index:3;top:62px;width:150px;padding:12px 10px;border:1px solid #4c6584;border-radius:8px;background:#172235;color:#f5f8fc;text-align:center}.bf-wait-node--source{left:5%}.bf-wait-node--target{right:5%}body.bf002-page-body .bf-wait-node small{display:block;margin-top:4px;color:#aeb9c9}body.bf002-page-body .bf-wait-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}body.bf002-page-body .bf-wait-state{display:inline-flex;padding:5px 10px;border:1px solid #425a78;border-radius:999px;font-weight:800}body.bf002-page-body .bf-wait-state.is-waiting{color:#ffd166;background:#352b12}body.bf002-page-body .bf-wait-state.is-ready{color:#67efb1;background:#123a31}body.bf002-page-body .bf-wait-visual-confirm{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid #425a78;border-radius:8px;background:#111722}body.bf002-page-body .bf-wait-visual-confirm.is-confirmed{border-color:#3b936b;background:#123126}body.bf002-page-body .bf-wait-help{margin:8px 0 0;color:#b9c8dc;font-size:.86rem}
@media(max-width:620px){body.bf002-page-body .bf-wait-node{width:112px;font-size:.78rem}.bf-wait-node--source{left:3%}.bf-wait-node--target{right:3%}}
@media(prefers-reduced-motion:reduce){.bf-joint-waiting-spinner{animation-duration:2.4s}}


/* v1.1.35 BLOCKED / Security: #018 Bone Icon の fa-ban + beat-fade 表現をJoint最前面overlayへ適用する。 */
.bf-joint-path--blocked{filter:drop-shadow(0 0 4px rgba(235,80,85,.34))}
.bf-joint-blocked-ban{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:bf-joint-block-beat-fade 1s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(235,80,85,.55))}
.bf-joint-blocked-ban-symbol{fill:#eb5055;font-family:"BoneFlowFontAwesome","Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;font-size:28px;font-weight:900;paint-order:stroke fill;stroke:#111722;stroke-width:1.2;vector-effect:non-scaling-stroke}
@keyframes bf-joint-block-beat-fade{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
body.bf002-page-body .bf-block-state{display:inline-flex;padding:5px 10px;border:1px solid #7d3544;border-radius:999px;color:#ff8a98;background:#3c171d;font-weight:800}
body.bf002-page-body .bf-block-test-stage{position:relative;height:190px;margin:14px 0;border:1px solid #35435a;border-radius:10px;background:#0a1019;overflow:hidden}
body.bf002-page-body .bf-block-test-stage body.bf002-page-body .bf-svg{z-index:2}body.bf002-page-body .bf-block-test-stage .bf-block-overlay{z-index:7;overflow:visible}
body.bf002-page-body .bf-block-test-stage body.bf002-page-body .bf-wait-node{z-index:3}
body.bf002-page-body .bf-block-visual-confirm{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid #425a78;border-radius:8px;background:#111722}
body.bf002-page-body .bf-block-visual-confirm.is-confirmed{border-color:#9f3f49;background:#35181d}
@media(prefers-reduced-motion:reduce){.bf-joint-blocked-ban{animation-duration:2.5s}}

body.bf002-page-body .bf002-header-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}body.bf002-page-body .bf002-nav-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid #3e648f;border-radius:8px;background:#142338;color:#dff6ff;text-decoration:none;font-weight:800;box-shadow:0 0 0 1px rgba(80,190,255,.06) inset}body.bf002-page-body .bf002-nav-btn:hover{border-color:#66d9ff;background:#19304a;box-shadow:0 0 16px rgba(72,190,255,.18)}body.bf002-page-body .bf002-version-row{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0;color:#b9c8da}

/* BF002_GUIDE_LAYOUT_VERSION:1.0.25 */
/* BF002_CSS_PACKAGE_VERSION:1.0.28 */
body.bf002-page-body .bf002-header-actions{display:flex!important;gap:10px;flex-wrap:wrap;margin-top:14px!important}
body.bf002-page-body .bf002-nav-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid #3e648f;border-radius:8px;background:#142338;color:#dff6ff;text-decoration:none;font-weight:800;visibility:visible!important;opacity:1!important;box-shadow:0 0 0 1px rgba(80,190,255,.06) inset}
body.bf002-page-body .bf002-nav-btn:hover{border-color:#66d9ff;background:#19304a;box-shadow:0 0 16px rgba(72,190,255,.18)}
body.bf002-page-body .bf002-version-row{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0;color:#b9c8da}
body.bf002-page-body .bf002-dependency-line{margin-top:10px;color:#9db0c7;font-size:.9rem}
body.bf002-page-body .bf002-dependency-line a{color:#55cfff;font-weight:700}
body.bf002-page-body.bf002-modal-open{overflow:hidden}
.bf002-guide-backdrop[hidden]{display:none!important}
.bf002-guide-backdrop{position:fixed;inset:0;z-index:100000;background:rgba(0,7,15,.82);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.bf002-guide-modal{width:min(1080px,calc(100vw - 36px));height:min(760px,calc(100vh - 36px));background:#071827;border:1px solid #3a688a;border-radius:7px;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 22px rgba(31,160,225,.14);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;color:#edf8ff}
.bf002-guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#102b43;border-bottom:1px solid #315b79}
.bf002-guide-head h2{margin:0;font-size:18px;color:#fff}
.bf002-guide-head-actions{display:flex;gap:7px}
.bf002-guide-mini{appearance:none;border:1px solid #527796;border-radius:4px;background:#10273a;color:#eff9ff;min-height:28px;padding:4px 9px;font:inherit;font-size:11px;cursor:pointer}
.bf002-guide-mini:hover{border-color:#43c8ff;color:#75dcff}
.bf002-guide-mini[aria-pressed=true]{border-color:#43d7ff;color:#7ce7ff;box-shadow:0 0 12px rgba(67,215,255,.2)}
.bf002-guide-searchbar{display:grid;grid-template-columns:auto minmax(160px,360px) auto 1fr;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid #315b79;background:#0a1e2d}
.bf002-guide-searchbar label{font-size:12px;font-weight:800;color:#7ed8ff}
.bf002-guide-searchbar input{min-height:30px;border:1px solid #355c78;border-radius:4px;background:#071725;color:#fff;padding:5px 8px;outline:none}
.bf002-guide-searchbar input:focus{border-color:#40c8ff;box-shadow:0 0 0 2px rgba(64,200,255,.12)}
.bf002-guide-searchbar span{font-size:10px;color:#89a5be}
.bf002-guide-body{min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr);overflow:hidden}
.bf002-guide-toc{min-height:0;background:#081b2a;border-right:1px solid #315b79;padding:13px 10px;overflow:auto}
.bf002-guide-toc strong{display:block;color:#86dbff;font-size:11px;margin:0 6px 9px}
.bf002-guide-toc a{display:block;color:#cfefff;text-decoration:none;padding:7px 8px;border-radius:4px;font-size:12px;line-height:1.35;margin-bottom:3px;overflow-wrap:anywhere}
.bf002-guide-toc a:hover,.bf002-guide-toc a:focus{background:#102b43;color:#5fd5ff;outline:none}
.bf002-guide-frame{display:block;width:100%;height:100%;min-width:0;min-height:0;border:0;background:#0d1118}
.bf002-guide-foot{display:flex;justify-content:flex-end;padding:9px 12px;background:#102b43;border-top:1px solid #315b79}
@media(max-width:760px){.bf002-guide-backdrop{padding:8px}.bf002-guide-modal{width:calc(100vw - 16px);height:calc(100vh - 16px)}.bf002-guide-body{grid-template-columns:1fr}.bf002-guide-toc{display:none}.bf002-guide-searchbar{grid-template-columns:auto 1fr auto}.bf002-guide-searchbar span{display:none}}




/* BF002_HTML_FUNCTIONAL_CLASS_VERSION:1.1.2 */
.bf-joint{position:relative;isolation:isolate;min-height:120px}
.bf-joint>.bf-joint-functional-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.bf-joint>.bf-joint-source,.bf-joint>.bf-joint-target,.bf-joint>[data-bf-joint-role]{position:relative;z-index:3}
.bf002-functional-demo{display:grid;grid-template-columns:160px 1fr 160px;align-items:center;gap:36px;min-height:180px;padding:26px;border:1px solid #32445d;border-radius:10px;background:#0e1621}
.bf002-functional-demo-node,.bf-joint-demo-node{display:grid;place-items:center;min-height:72px;border:1px solid #4b79a7;border-radius:8px;background:#172234;color:#fff;font-weight:700;box-shadow:0 0 0 1px rgba(60,190,255,.12)}
.bf002-functional-demo-center{font-size:12px;color:#8ecbff;text-align:center}.bf002-code-sample{margin:12px 0 0;padding:12px;overflow:auto;border:1px solid #304763;border-radius:7px;background:#08111a;color:#bcecff;font:12px/1.55 Consolas,"Courier New",monospace;white-space:pre}
@media(max-width:900px){.bf-joint-demo-grid{grid-template-columns:1fr}.bf-joint-demo-stage{min-height:140px}}@media(max-width:700px){.bf002-functional-demo{grid-template-columns:1fr;gap:22px}.bf002-functional-demo-center{display:none}}

/* #002 bf-joint is only a DOM adapter. All Joint marks are drawn by BoneJoint 1.1.40. */
.bf-joint{position:relative}
.bf-joint>.bf-joint-functional-svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:hidden;pointer-events:none}
.bf-joint>.bf-joint-functional-marker-svg{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.bf-joint>.bf-joint-source,.bf-joint>.bf-joint-target{z-index:2}
/* Guide live examples reuse the same connection-image geometry as #002 scenarios. */
body.bf002-page-body .bf-joint.bf-flow>.bf-joint-source,
body.bf002-page-body .bf-joint.bf-flow>.bf-joint-target{position:absolute}
/* BF002 abnormal marker clipping fix: keep Joint line clipped, allow only formal marker layer to escape host clipping. */
body.bf002-page-body .bf-joint.bf-flow{overflow:visible}
body.bf002-page-body .bf-joint.bf-flow>.bf-joint-functional-svg{overflow:visible}
body.bf002-page-body .bf-joint.bf-flow>.bf-joint-functional-marker-svg{overflow:visible}

/* Direction Marker / IN-OUT HTML Class verification panel */
body.bf002-page-body .bf002-repair-panel{border-color:#3f5874;background:linear-gradient(180deg,#182333,#171d29)}
body.bf002-page-body .bf002-repair-panel h2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.bf002-page-body .bf002-repair-version{display:inline-flex;padding:4px 8px;border:1px solid #4a6b8f;border-radius:999px;color:#91c8ff;font-size:.72rem}
body.bf002-page-body .bf002-repair-lead{margin:0 0 14px;color:#c1ccda;line-height:1.7}
body.bf002-page-body .bf002-repair-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}
body.bf002-page-body .bf002-repair-card{min-width:0;padding:14px;background:#0f1621;border:1px solid #35465d;border-radius:10px}
body.bf002-page-body .bf002-repair-card h3{margin:0 0 10px;font-size:1rem}
body.bf002-page-body .bf002-repair-preview-wrap{background:#080d14;border:1px solid #293a51;border-radius:8px;overflow:hidden}
body.bf002-page-body .bf002-repair-svg{display:block;width:100%;height:auto;min-height:150px}
body.bf002-page-body .bf002-repair-svg .bf-joint-path{stroke-width:5}
body.bf002-page-body .bf002-repair-target-guide line{stroke:#3fd7ff;stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
body.bf002-page-body .bf002-repair-target-guide circle{fill:#3fd7ff;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
body.bf002-page-body .bf002-repair-target-guide text{fill:#aeeeff;font-size:13px;font-weight:700}
body.bf002-page-body .bf002-repair-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
body.bf002-page-body .bf002-repair-status{display:grid;gap:3px;padding:9px 10px;background:#151f2c;border:1px solid #304159;border-radius:8px}
body.bf002-page-body .bf002-repair-status span,body.bf002-page-body .bf002-repair-status small{color:#9fb0c5}
body.bf002-page-body .bf002-repair-status strong{font-size:.95rem}
body.bf002-page-body .bf002-repair-role-grid{display:grid;gap:10px}
body.bf002-page-body .bf002-repair-role{padding:9px;background:#151f2c;border:1px solid #304159;border-radius:8px}
body.bf002-page-body .bf002-repair-role-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
body.bf002-page-body .bf002-repair-role-head code{color:#91c8ff;background:#0c131d;padding:3px 6px;border-radius:5px}
body.bf002-page-body .bf002-repair-role-stage{height:86px;margin-top:7px}
body.bf002-page-body .bf002-repair-role-stage .bf-node{top:19px;min-height:42px;font-size:.78rem}
body.bf002-page-body .bf002-repair-role-result{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:.82rem}.bf002-repair-role-result span{color:#9fb0c5}
@media(max-width:900px){body.bf002-page-body .bf002-repair-grid{grid-template-columns:1fr}}
@media(max-width:760px){body.bf002-page-body .bf002-repair-status-grid{grid-template-columns:1fr}.bf002-repair-role-stage{height:104px!important}.bf002-repair-role-stage .bf-node{top:27px!important}}