/* 案件条件チェック（2026-09-23）。名刺の意匠: 白い紙面／下端の濃紺の折り面／金の稜線。
   金は線だけに使い、文字は AA を満たす色だけ。「一致」「個別に相談」は同じ色・太さで、記号と文字で区別する。 */
.match { margin-top: 72px; padding: 40px 40px 32px; border-top: 2px solid var(--ref-ink, #172536); background: rgba(245, 248, 251, .98); text-align: left; color: var(--ref-ink, #172536); scroll-margin-top: 120px; }
.match__head { max-width: 46em; }
.match__title { margin: 0 0 16px; font: 600 clamp(1.375rem, 2.2vw, 1.75rem)/1.6 var(--font-display); }
.match__lead { margin: 0; font: 400 .9375rem/1.95 var(--font-body); }
.match__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin: 32px 0 28px; }
.match__controls[hidden], .match__actions[hidden], .match-card__memo[hidden], .match-card__summary[hidden], .match-card__notice[hidden] { display: none; }
.match__hint { grid-column: 1 / -1; margin: 0; font: 400 .8125rem/1.8 var(--font-body); color: var(--ref-muted, #526073); }
.match__group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 8px; }
.match__group legend { padding: 0; margin-bottom: 10px; font: 500 .8125rem/1.8 var(--font-body); letter-spacing: .04em; color: var(--ref-gold, #8B6A2D); }
.match__legend-note { margin-left: 6px; font-size: .75rem; color: var(--ref-muted, #526073); }
.match-choice { position: relative; display: inline-flex; }
.match-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.match-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid #9AA6B5; background: #FFFFFF; font: 500 .8125rem/1.5 var(--font-body); color: var(--ref-ink, #172536); cursor: pointer; }
.match-choice input:hover + span { border-color: var(--ref-ink, #172536); }
/* 選択状態は実行ボタン（濃紺ベタ）と区別する: 白地＋濃紺の枠＋金の下線＋チェック印 */
.match-choice input:checked + span { border-color: var(--color-navy, #0C1626); box-shadow: inset 0 0 0 1px var(--color-navy, #0C1626), inset 0 -4px 0 #C4A24E; font-weight: 700; }
.match-choice input:checked + span::before { content: "✓"; content: "✓" / ""; margin-right: 8px; }
/* 「未選択」は選択中でも印を付けず、入力済みに見せない */
.match-choice input[value=""]:checked + span { box-shadow: inset 0 0 0 1px var(--color-navy, #0C1626); font-weight: 500; }
.match-choice input[value=""]:checked + span::before { content: none; }
.match-choice input:focus-visible + span { outline: 2px solid var(--color-indigo, #3B4B8C); outline-offset: 3px; }

.match-card { position: relative; background: #FBFAF6; border: 1px solid #D5D2C8; box-shadow: 0 18px 40px -28px rgba(12, 22, 38, .45); overflow: hidden; }
/* 照合票は縦に長いため、折り面は右端ではなく下端に置く（角度は画面幅により約10〜25°） */
.match-card__paper { position: relative; z-index: 1; padding: 30px 34px 96px; }
.match-card__summary { margin: 0 0 4px; font: 600 1rem/1.8 var(--font-body); }
.match-card__consult { margin: -12px 0 18px; font: 500 .8125rem/1.8 var(--font-body); color: #354B70; }
.match-card__consult[hidden] { display: none; }
.match-card__notice { margin: 0 0 18px; font: 400 .8125rem/1.8 var(--font-body); color: var(--ref-muted, #526073); }
.match-table { width: 100%; border-collapse: collapse; font: 400 .875rem/1.8 var(--font-body); }
.match-table caption { text-align: left; padding-bottom: 10px; font: 500 .75rem/1.8 var(--font-mono); letter-spacing: .12em; color: var(--ref-gold, #8B6A2D); }
.match-table th, .match-table td { padding: 12px 12px 12px 0; border-top: 1px solid #D5D2C8; text-align: left; vertical-align: top; }
.match-table thead th { border-top: 0; padding-top: 0; font: 500 .75rem/1.8 var(--font-body); color: var(--ref-muted, #526073); }
.match-table tbody th { width: 11em; font-weight: 600; }
.match-table [hidden] { display: none; }
.match-table__chosen { width: 12em; }
.match-table__result { width: 14em; font-weight: 500; }
.match-table__mark { margin-right: 6px; }
/* 未選択の「—」は ::after（::before は縦積み表示の列名に使う） */
.match-table__result[data-result="none"]::after { content: "—"; content: "—" / ""; color: var(--ref-muted, #526073); }
.match-table--ref { margin-top: 26px; }

.match-table__reason { display: block; font-size: .75rem; line-height: 1.7; color: var(--ref-muted, #526073); font-weight: 400; }
.match-card__memo { margin-top: 22px; padding-top: 16px; border-top: 1px solid #D5D2C8; }
.match-card__memo-label { margin: 0 0 6px; font: 500 .75rem/1.8 var(--font-body); color: var(--ref-muted, #526073); }
.match-card__memo-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .875rem/1.9 var(--font-body); }
.match-card__fold { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; display: block; }
.match-card__face { fill: var(--fold-navy, #0C1626); }
.match-card__face--lift { fill: var(--fold-lift, #22365A); }
.match-card__ridge { stroke: var(--fold-gold, #D9BA6E); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.match__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.match__actions .button { min-height: 48px; }
.match__actions .button:disabled { opacity: .55; cursor: not-allowed; }
.match__status { min-height: 1.8em; margin: 14px 0 0; font: 500 .8125rem/1.8 var(--font-body); color: #354B70; }
.faq-item__link { display: inline-block; margin-left: .5em; color: #354B70; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) and (max-width: 1023px) {
  .match { padding: 32px 28px 28px; }
  .match-card__paper { padding: 28px 26px 88px; }
}
/* 1023px 以下は表を行ごとの縦積みにする（4列だと折り返しが多く比較しにくい）。role 属性で表の意味を保つ */
@media (max-width: 1023px) {
  .match-table, .match-table tbody { display: block; }
  .match-table caption { display: block; }
  .match-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .match-table tbody tr { display: grid; grid-template-columns: 1fr; padding: 14px 0; border-top: 1px solid #D5D2C8; }
  .match-table th, .match-table td { display: block; width: auto; padding: 2px 0; border-top: 0; }
  .match-table td[hidden] { display: none; }
  .match-table td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: .6875rem; color: var(--ref-muted, #526073); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* タブレット幅は「選んだ条件」と「照合結果」を横並びにして一まとまりで読めるようにする */
  .match-table tbody tr { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .match-table tbody th, .match-table__cond { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .match { margin-top: 56px; padding: 28px 16px 24px; }
  .match__controls { grid-template-columns: minmax(0, 1fr); margin: 24px 0 20px; }
  .match-card__paper { padding: 22px 18px 76px; }
  .match-card__fold { height: 52px; }
  .match__actions .button { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .match-card__fold { display: none; }
  .match-card__paper { padding-bottom: 30px; }
  .match-choice input:checked + span { outline: 2px solid Highlight; }
}
@media print { .match__controls, .match__actions, .match-card__fold { display: none; } }