/* 技術の確かめ方。style.css・flow.css・br.css の上に重ねる（接頭辞 tc-） */
.tc-mt { margin-top: 10px; }
.tc-box { padding: 12px 14px; min-width: 0; }
.tc-h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.tc-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.tc-p { margin: 0 0 8px; font-size: 13px; color: var(--ink2); }
.tc-box .tc-p:last-child { margin-bottom: 0; }
.tc-nl { display: block; margin: 6px 0 0; }
.tc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: start; }

/* 15 分の流れ */
.tc-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: tcf; }
.tc-flow li { counter-increment: tcf; display: grid; grid-template-columns: 26px 3.2em minmax(0, 1fr); gap: 2px 8px; align-items: baseline; font-size: 13px; }
.tc-flow li::before { content: counter(tcf); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--line2); color: var(--ink2); font: 600 11.5px/22px var(--latin); text-align: center; align-self: start; }
.tc-ft { grid-row: span 2; font: 600 12px var(--latin); color: var(--muted); }
.tc-flow b { font-size: 13px; }
.tc-fw { grid-column: 3; font-size: 12.5px; color: var(--ink2); }

/* 表 */
.tc-rtbl td { font-size: 12.5px; }
.tc-rtbl td.tc-bad { color: #7f1d1d; white-space: nowrap; }
.tc-stbl { min-width: 560px; }
.tc-stbl tbody th { white-space: nowrap; }
.tc-wtbl tbody th { min-width: 12em; }
.tc-qtbl { min-width: 860px; font-size: 12.5px; }
.tc-qtbl td:first-child { font-weight: 700; min-width: 11em; }

/* 練習 */
.tc-ctl { padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.tc-what { margin: 0; font-size: 13px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 11px; }
.tc-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); }
.tc-kinds li { display: flex; align-items: baseline; gap: 8px; }
.tc-kb { flex: none; display: inline-block; min-width: 4.6em; text-align: center; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.tc-kb.tc-k-deep { background: #dcfce7; color: #14532d; }
.tc-kb.tc-k-shallow { background: #fef3c7; color: #78350f; }
.tc-kb.tc-k-verify { background: #dbeafe; color: #1e3a8a; }
.tc-pr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 10px; align-items: start; }
.tc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tc-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); min-width: 0; display: flex; flex-direction: column; }
.tc-item.tc-ok { border-color: #86efac; background: #f7fef9; }
.tc-item.tc-ng { border-color: #fcd34d; background: #fffdf5; }
.tc-ih { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tc-who { font-size: 13.5px; font-weight: 700; }
.tc-sheet { font-size: 12px; color: var(--muted); }
.tc-q { margin: 6px 0 4px; font-size: 13px; color: var(--ink); }
.tc-ans { margin: 0; font-size: 13px; color: var(--ink2); background: var(--any-bg); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; }
.tc-words { margin: 6px 0 8px; font-size: 12px; color: var(--muted); }
.tc-kbtns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.tc-kbtn { appearance: none; font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.tc-kbtn:hover { border-color: #94a3b8; color: var(--ink); }
.tc-kbtn[aria-pressed="true"].tc-k-deep { background: #15803d; border-color: #15803d; color: #fff; }
.tc-kbtn[aria-pressed="true"].tc-k-shallow { background: #b45309; border-color: #b45309; color: #fff; }
.tc-kbtn[aria-pressed="true"].tc-k-verify { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.tc-ansbox { margin-top: 8px; font-size: 12.5px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 10px; }
.tc-ansbox p { margin: 0 0 4px; }
.tc-ansbox .br-go { margin: 4px 0 0; font-size: 12.5px; }
.tc-verdict b { color: var(--ink); margin-right: 4px; }
.tc-sub { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tc-clues { margin: 0 0 4px; padding-left: 1.2em; display: grid; gap: 2px; }
.tc-side { display: grid; gap: 10px; min-width: 0; position: sticky; top: 12px; }
.tc-out { padding: 12px 14px; min-width: 0; }
.tc-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-kc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tc-kci { border-radius: 10px; padding: 6px 4px; text-align: center; background: var(--line2); }
.tc-kci b { display: block; font: 700 20px/1.2 var(--latin); }
.tc-kci span { font-size: 11px; font-weight: 700; color: var(--ink2); }
.tc-kci.tc-k-deep b { color: #15803d; }
.tc-kci.tc-k-shallow b { color: #b45309; }
.tc-kci.tc-k-verify b { color: #1d4ed8; }
.tc-fsum { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.tc-warn { margin: 8px 0 0; font-size: 12.5px; color: #78350f; background: #fffbeb; border-radius: 8px; padding: 6px 9px; }
.tc-fnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* 残す形 */
.tc-tpls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.tc-tpl { padding: 12px 14px; min-width: 0; }
.tc-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tc-tplh .tc-h4 { margin: 0; }
.tc-pre { margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; font: 500 12px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }

.tc-kbtn:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .tc-pr, .tc-two { grid-template-columns: minmax(0, 1fr); }
  .tc-side { position: static; }
}
@media (max-width: 760px) {
  .tc-list { grid-template-columns: minmax(0, 1fr); }
  .tc-rtbl td.tc-bad { white-space: normal; }
}