/* アクセシビリティ。style.css と flow.css の上に重ねる */
/* 薄い文字の色を、このページだけ少し濃くする（#64748b は、背景 #f4f5f9 の上で 4.36:1 と 4.5:1 に足りないため。#5b6b80 なら、このページの薄い背景のどれでも 4.8:1 以上） */
body { --muted: #5b6b80; }
.fhead p a, .srcl a, .ay-go a, .ay-psrc a, .ay-tnote a, .ay-points a, .ay-sclinks a, .ay-schere a, .foot p 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; margin-left: 6px; 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 { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.subh { margin: 22px 0 8px; font-size: 15.5px; display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; }
.ay-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ay-h4 { margin: 14px 0 8px; font-size: 14.5px; }
.ay-go { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ay-go a { text-decoration: none; }
.ay-go a:hover { text-decoration: underline; }
.ay-c { font: 600 .92em var(--latin); color: var(--ink); background: var(--line2); border-radius: 5px; padding: 0 4px; overflow-wrap: anywhere; }
.ay-pre { margin: 6px 0 0; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 9px 12px; font: 500 12.5px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.ay-pre code { font: inherit; }
.ay-tnote { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.ay-note-p { margin: -2px 0 10px; font-size: 13px; color: var(--ink2); max-width: 52em; }
.ay-empty { margin: 0; font-size: 13px; color: var(--muted); }
.ay-warn { margin: 10px 0 0; font-size: 13px; color: #991b1b; }
.ay-lb { display: inline-block; font-size: 11.5px; color: var(--muted); margin-right: 8px; }
.ay-no { color: #b91c1c; font-weight: 700; }
.ay-mt { margin-top: 10px; }
.ay-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 達成基準の札 */
.ay-scl { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ay-sct { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink2); background: var(--line2); border-radius: 6px; padding: 1px 7px; }
.ay-sct b { font: 600 10.5px var(--latin); color: #fff; background: #475569; border-radius: 4px; padding: 0 4px; }

/* カード */
.ay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ay-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ay-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ay-card { padding: 12px 15px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ay-card h3 { margin: 0; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.ay-card p { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.ay-card .srcl, .ay-card .ay-go { margin-top: auto; padding-top: 6px; }
.ay-card .ay-go + .srcl { margin-top: 0; }
.ay-card.ai { background: #faf8ff; border-color: #dccdfb; }
.ay-wide { grid-column: 1 / -1; margin-top: 0; }

/* 押す物 */
.ay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ay-row + .ay-row { margin-top: 8px; }
.ay-rl { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 4.5em; }
.ay-pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ay-pill { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; text-align: left; }
.ay-pill:hover { border-color: #94a3b8; }
.ay-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ay-btn { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.ay-btn:hover { border-color: #94a3b8; }
.ay-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ay-chip { appearance: none; font: inherit; font-size: 12.5px; color: var(--ink2); background: var(--line2); border: 1px solid transparent; border-radius: 999px; padding: 3px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ay-chip:hover { border-color: #94a3b8; color: var(--ink); }
.ay-chip i { width: 14px; height: 14px; border-radius: 4px; border: 3px solid; flex: none; }
.ay-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* だれのためか */
.ay-who { padding: 14px 16px; }
.ay-whop { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ay-whop h3 { margin: 0 0 4px; font-size: 16px; }
.ay-whop p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); }
.ay-whosc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ay-scbtn { appearance: none; font: inherit; font-size: 12px; font-weight: 700; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.ay-scbtn:hover { border-color: #60a5fa; }

/* 原則 */
.ay-prc h3 { align-items: baseline; gap: 2px 8px; }
.ay-prc h3 small { font: 500 11.5px var(--latin); color: var(--muted); }
.ay-prn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px var(--latin); }
.ay-prex { background: var(--line2); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; }
.ay-prex b { font-size: 11.5px; color: var(--muted); margin-right: 6px; }

/* 達成基準の地図 */
.ay-map { padding: 14px 16px; }
.ay-mapcount { margin: 12px 0 8px; font-size: 13px; color: var(--ink2); }
.ay-mapcount b { font: 600 16px var(--latin); color: var(--ink); }
.ay-scgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.ay-scg { min-width: 0; }
.ay-scgh { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ay-scchips { display: flex; flex-wrap: wrap; gap: 4px; }
.ay-sc { appearance: none; font: inherit; font-size: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; cursor: pointer; text-align: left; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; max-width: 100%; }
.ay-sc:hover { border-color: #94a3b8; }
.ay-sc.here { border: 2px solid #0d9488; }
.ay-sc.on, .ay-sc[aria-pressed="true"] { background: #fef9c3; border-color: #ca8a04; }
.ay-scn { font: 600 11.5px var(--latin); color: var(--muted); }
.ay-sc b { font: 600 10.5px var(--latin); border-radius: 4px; padding: 0 4px; color: #fff; background: #475569; }
.ay-sc.lv-A b { background: #0f766e; }
.ay-sc.lv-AA b { background: #1d4ed8; }
.ay-sc.lv-AAA b { background: #7c3aed; }
.ay-sc.lv-x b { background: #94a3b8; }
.ay-sc i { font: 600 10px var(--latin); font-style: normal; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 0 4px; }
.ay-scd { margin-top: 12px; background: var(--line2); border-radius: 12px; padding: 10px 14px; }
.ay-scd:empty { display: none; }
.ay-scd h3 { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ay-scd p { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.ay-scen { font-family: var(--latin); font-size: 12.5px !important; color: var(--muted) !important; }
.ay-lvb { font: 600 11px var(--latin); color: #fff; border-radius: 5px; padding: 1px 6px; background: #475569; }
.ay-lvb.lv-A { background: #0f766e; }
.ay-lvb.lv-AA { background: #1d4ed8; }
.ay-lvb.lv-AAA { background: #7c3aed; }
.ay-newb { font-size: 11px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 6px; }
.ay-schere b { font-size: 11.5px; color: #0f766e; margin-right: 6px; }
.ay-schere a { font-weight: 700; margin-left: 6px; }
.ay-sclinks { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px !important; font-weight: 700; }

/* 選ぶ問題 */
.ay-quiz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: q; }
.ay-quiz > li { counter-increment: q; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.ay-quiz > li::before { content: 'Q' counter(q); font: 600 12px var(--latin); color: var(--muted); }
.ay-quiz > li.ok { border-color: #86efac; background: #f0fdf4; }
.ay-quiz > li.ng { border-color: #fca5a5; background: #fef2f2; }
.ay-ask { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; }
.ay-ctx { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.ay-ctx b, .ay-why b { display: inline-block; font-size: 11.5px; color: var(--muted); margin-right: 6px; }
.ay-why b { font-size: 13px; color: var(--ink); }
.ay-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ay-ch button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid #cbd5e1; border-radius: 999px; padding: 5px 13px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.ay-ch button:hover { border-color: #64748b; }
.ay-ch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ay-why { margin-top: 8px; font-size: 13px; color: var(--ink2); }
.ay-why p { margin: 4px 0 0; }
.ay-score2 { margin: 10px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ay-score2:empty { display: none; }
.ay-score2 b { font-family: var(--latin); font-size: 18px; color: #0f766e; }
.ay-pic { background: var(--line2); border-radius: 10px; padding: 6px; margin-top: 6px; }
.ay-pic svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.ay-sortq { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 悪い HTML を直す */
.ay-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.ay-score { font-size: 13px; color: var(--ink2); white-space: nowrap; }
.ay-score b { font: 600 20px var(--latin); color: var(--ink); }
.ay-score.all b { color: #15803d; }
.ay-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ay-hintout { margin: 8px 0 0; font-size: 13px; color: #78350f; background: #fffbeb; border-radius: 10px; padding: 8px 12px; }
.ay-hintout:empty { display: none; }
.ay-files { display: grid; gap: 12px; margin-top: 12px; }
.ay-file { background: #0f172a; border-radius: 12px; overflow: hidden; min-width: 0; }
.ay-fixed { margin-top: 12px; }
.ay-fixed .ay-pre { margin: 0; border-radius: 0; }
.ay-path { margin: 0; padding: 7px 12px; background: #1e293b; color: #cbd5e1; font: 500 12px var(--latin); overflow-wrap: anywhere; }
.ay-code { padding: 6px 0; font-family: var(--latin); font-size: 12.5px; line-height: 1.6; }
.ay-ln { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: start; width: 100%; min-height: 24px; padding: 2px 10px 2px 0; border: 0; background: transparent; color: #e2e8f0; font: inherit; text-align: left; }
button.ay-ln { cursor: pointer; }
button.ay-ln:hover { background: rgba(148, 163, 184, .18); }
.ay-ln.is-found, button.ay-ln.is-found:hover { background: rgba(250, 204, 21, .20); }
.ay-ln.is-open { box-shadow: inset 0 0 0 2px #facc15; }
.ay-lno { text-align: right; padding-right: 10px; color: #94a3b8; user-select: none; }
.ay-tx { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.ay-badge { margin-left: 8px; color: #facc15; font-weight: 700; }
.ay-badge:empty { display: none; }
.ay-note { margin: 4px 12px 8px 3em; background: var(--paper); color: var(--ink2); border-radius: 10px; padding: 10px 13px; font-family: var(--sans); font-size: 13px; line-height: 1.65; }
.ay-note p { margin: 4px 0 0; }
.ay-note .ay-nk { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--ink); }
.ay-note.hit { box-shadow: inset 0 0 0 2px #facc15; }
.ay-note.plain { color: var(--muted); }
.ay-fixl b { font-size: 11.5px; color: var(--muted); }
.ay-found { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ay-found .ay-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 13px; }
.ay-fcard { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ay-fcard h4 { margin: 0; font-size: 13.5px; }
.ay-fcard p { margin: 0; font-size: 12.5px; color: var(--ink2); }

/* キーボードの体験 */
.ay-kb { padding: 14px 16px; }
.ay-kbhow { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.ay-kbcols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.ay-kbstage { border: 2px dashed #94a3b8; border-radius: 12px; padding: 12px 14px; background: #fbfbfd; min-width: 0; }
.ay-kbstage.bad { border-color: #fca5a5; }
.ay-kbf { display: flex; flex-direction: column; gap: 8px; }
.ay-kbrow { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 4px 10px; position: relative; }
.ay-kbrow > label, .ay-kbrow > span:not(.ay-kbno) { font-size: 13px; font-weight: 700; color: var(--ink2); }
.ay-kbf input, .ay-kbf select, .ay-kbf textarea { font: 500 14px/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid #94a3b8; border-radius: 8px; padding: 6px 9px; min-width: 0; width: 100%; max-width: 18em; }
.ay-kbf textarea { resize: vertical; }
.ay-kbgood input:focus-visible, .ay-kbgood select:focus-visible, .ay-kbgood textarea:focus-visible, .ay-kbgood button:focus-visible, .ay-kbgood .is-kbcur { outline: 3px solid #2563eb; outline-offset: 2px; }
.ay-kbbad *:focus, .ay-kbbad *:focus-visible { outline: none !important; box-shadow: none !important; }
.ay-kbsend { appearance: none; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: #1d4ed8; border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer; justify-self: start; }
.ay-fake { display: inline-block; user-select: none; }
.ay-fsel { font-size: 14px; background: var(--paper); border: 1px solid #94a3b8; border-radius: 8px; padding: 6px 9px; cursor: pointer; user-select: none; max-width: 18em; }
.ay-kbred { border: 2px solid #ef4444 !important; }
.ay-kberr { margin: -2px 0 0 calc(6.5em + 10px); font-size: 13px; font-weight: 700; color: #b91c1c; }
.ay-kbstat { margin: 0; font-size: 13px; font-weight: 700; color: #14532d; }
.ay-kbstat:empty { display: none; }
.ay-kbno { position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #1d4ed8; color: #fff; font: 600 11px/20px var(--latin); text-align: center; z-index: 1; }
.ay-kbno.x { background: #b91c1c; }
.ay-kbside { min-width: 0; }
.ay-kbsum { background: var(--line2); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.ay-kbsum ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ay-kbsum li { position: relative; padding-left: 1.4em; color: var(--ink2); }
.ay-kbsum li .ay-sct { margin-left: 4px; }
.ay-kbsum li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ay-kbsum li.ng::before { content: '✕'; color: #b91c1c; }
.ay-kbsum li.ok::before { content: '✓'; color: #15803d; }
.ay-lbh { margin: 10px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; }
.ay-kblog { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.ay-kblog li { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; }
.ay-kblog li b { font: 600 11.5px var(--latin); color: var(--muted); margin-right: 8px; }
.ay-kblog li.ay-empty { border-style: dashed; }
.ay-kbsim { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ay-kbmsg { margin: 8px 0 0; font-size: 13px; color: #78350f; }
.ay-kbmsg:empty { display: none; }

/* コントラスト比の計算機 */
.ay-cc { padding: 14px 16px; }
.ay-ccin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.ay-ccf { display: flex; flex-direction: column; gap: 3px; }
.ay-ccf > label { font-size: 12px; font-weight: 700; color: var(--muted); }
.ay-ccpair { display: inline-flex; align-items: center; gap: 6px; }
.ay-ccpair input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid #94a3b8; border-radius: 8px; background: var(--paper); cursor: pointer; }
.ay-ccpair input[type="text"] { width: 8.5em; font: 600 14px var(--latin); color: var(--ink); background: var(--paper); border: 1px solid #94a3b8; border-radius: 8px; padding: 6px 9px; }
.ay-ccprev { margin-top: 12px; border-radius: 12px; padding: 12px 16px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ay-ccprev p { margin: 0; }
.ay-ccprev .s16 { font-size: 16px; }
.ay-ccprev .s24 { font-size: 24px; line-height: 1.3; }
.ay-ccprev .s18b { font-size: 18.66px; font-weight: 700; }
.ay-ccbox { align-self: flex-start; margin-top: 4px; font-size: 13px; border: 2px solid; border-radius: 8px; padding: 4px 10px; }
.ay-ccr { margin: 10px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ay-ccr b { font: 600 26px var(--latin); color: var(--ink); }
.ay-ccr small { font-size: 12px; color: var(--muted); }
.ay-ccj { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.ay-ccj li { border-radius: 10px; padding: 7px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 1px; }
.ay-ccj li span { font-weight: 700; }
.ay-ccj li em { font-style: normal; font-size: 12px; }
.ay-ccj li.ok { background: #f0fdf4; color: #14532d; }
.ay-ccj li.ng { background: #fef2f2; color: #7f1d1d; }
.ay-ccmath { margin-top: 10px; font-size: 13px; color: var(--ink2); }
.ay-ccmath summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.ay-ccmath p { margin: 6px 0 0; }

/* 色だけのカレンダー */
.ay-mono { padding: 14px 16px; }
.ay-cal { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 640px; }
.ay-cal.gray { filter: grayscale(1); }
.ay-cal li { min-width: 0; }
.ay-day { appearance: none; font: inherit; width: 100%; height: 100%; border: 0; border-radius: 10px; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; cursor: pointer; }
.ay-day:hover { filter: brightness(1.08); }
.ay-daysay { margin: 8px 0 0; font-size: 13px; color: var(--ink2); }
.ay-daysay:empty { display: none; }
.ay-cal b { font: 600 18px var(--latin); }
.ay-cal small { font-size: 11px; }
/* 3 色は、白黒（CSS の grayscale）にすると、ほぼ同じ灰色になるように選んである。白い文字とのコントラストは 4.8:1 以上 */
.ay-day { color: #fff; }
.ay-day.st-ok { background: #166534; }
.ay-day.st-late { background: #dc2626; }
.ay-day.st-miss { background: #92400e; }
.ay-calt { font-size: 11.5px; font-weight: 700; }

/* 名前の計算 */
.ay-name { padding: 14px 16px; }
.ay-nsrc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ay-ncheck { display: flex; align-items: flex-start; gap: 8px; background: var(--line2); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 12.5px; min-width: 0; }
.ay-ncheck input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #0d9488; cursor: pointer; }
.ay-ncheck span { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; color: var(--ink2); }
.ay-ncheck b { font: 600 12.5px var(--latin); color: var(--ink); }
.ay-ncheck small { font-size: 11px; color: var(--muted); }
.ay-nres { margin-top: 10px; display: grid; gap: 4px; font-size: 14px; }
.ay-nres p { margin: 0; }
.ay-nres small { font-size: 12px; color: var(--muted); }
.ay-nnotes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ay-nnotes li { font-size: 13px; border-radius: 8px; padding: 6px 10px; }
.ay-nnotes li.ok { background: #f0fdf4; color: #14532d; }
.ay-nnotes li.ng { background: #fef2f2; color: #7f1d1d; }

/* 確かめ方 */
.ay-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: st; }
.ay-steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; counter-increment: st; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ay-steps b { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ay-steps b::before { content: counter(st); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/22px var(--latin); text-align: center; }
.ay-steps p { margin: 0; font-size: 13px; color: var(--ink2); }
.ay-steps .srcl { margin-top: auto; padding-top: 4px; }
.ay-axe { margin-top: 10px; }
.ay-file-l, .ay-axe .ay-file { margin: 0; font: 500 12px var(--latin); color: var(--muted); background: none; }
.ay-points { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 5px; font-size: 13px; color: var(--ink2); }
.ay-psrc { font-size: 12px; color: var(--muted); }
.ay-tw { overflow-x: auto; min-width: 0; }
.ay-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ay-table th, .ay-table td { text-align: left; padding: 6px 9px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.ay-table thead th { font-size: 12px; color: var(--muted); }
.ay-table tbody th { white-space: nowrap; font-weight: 500; }
.ay-table kbd { font: 600 12px var(--latin); background: var(--line2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }

/* チェックリスト */
.cklist { padding: 10px 16px; }
.ckgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; }
.ckgrid h3 { margin: 4px 0 4px; font-size: 14.5px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.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; }

.ay-day:focus-visible { outline: 3px solid #1e293b; outline-offset: 2px; }
.ay-pill:focus-visible, .ay-btn:focus-visible, .ay-chip:focus-visible, .ay-scbtn:focus-visible, .ay-sc:focus-visible, .ay-ch button:focus-visible, button.ay-ln:focus-visible, .ay-ncheck input:focus-visible, .ay-ccpair input:focus-visible, .ay-ccmath summary:focus-visible, .ay-go a:focus-visible, .srcl a:focus-visible, .ay-sclinks a:focus-visible, .ay-schere a:focus-visible, .ay-psrc a:focus-visible, .fhead p a:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .ay-grid, .ay-grid4, .ay-quiz, .ay-found, .ay-steps, .ay-scgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ay-nsrc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ay-kbcols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ay-grid, .ay-grid2, .ay-grid4, .ay-quiz, .ay-found, .ay-steps, .ay-scgrid, .ay-nsrc, .ckgrid { grid-template-columns: minmax(0, 1fr); }
  .ay-rl { min-width: 0; width: 100%; }
  .ay-pre { font-size: 12px; }
  .ay-note { margin: 4px 8px 8px 8px; }
  .ay-kbrow { grid-template-columns: minmax(0, 1fr); }
  .ay-kberr { margin-left: 0; }
  .ay-kbno { left: auto; right: 0; top: 0; transform: none; }
  .ay-cal { gap: 3px; }
  .ay-day { padding: 6px 2px; min-height: 64px; }
  .ay-cal b { font-size: 15px; }
  .ay-calt { font-size: 10px; }
  .ay-bar { gap: 6px 10px; padding: 7px 10px; }
}