.feature-comparison {
  --fc-ink: #1c242b;
  --fc-line: #e2e6e8;
  --fc-brand: #f4f7f9;
  --fc-brand-line: #e0e6ea;
  --fc-accent: #1d5282;
  --fc-green: #137246;
  border-bottom: 1px solid var(--fc-line);
}
.feature-comparison .guide-wrap { max-width: 936px; }
.feature-comparison h2 {
  margin: 0; color: var(--fc-ink); text-align: center;
  font-size: clamp(1.95rem, 3.2vw, 2.85rem); line-height: 1.08;
}
.fc-intro {
  max-width: 64ch; margin: 11px auto clamp(22px, 2.5vw, 30px);
  color: #505b66; text-align: center; line-height: 1.5; text-wrap: pretty;
}
.fc-board {
  overflow: clip; border: 1px solid var(--fc-line); border-radius: 16px; background: white;
  box-shadow: 0 6px 22px -15px rgb(24 44 56 / 18%);
}
.fc-grid { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, .86fr) minmax(0, 1fr); }
.fc-grid > * { min-width: 0; }
.fc-brand { background: var(--fc-brand); border-inline: 1px solid var(--fc-brand-line); }
.fc-head { position: sticky; top: 0; z-index: 1; background: #fafbfb; border-bottom: 1px solid var(--fc-line); }
.fc-head > * { min-height: 59px; display: flex; justify-content: center; align-items: center; }
.fc-head .fc-heading-feature { justify-content: flex-start; padding-inline: clamp(16px, 1.8vw, 24px); color: #465059; font-weight: 650; }
.fc-heading-brand { position: relative; background: #ecf1f4; }
.fc-heading-brand img { display: block; width: clamp(100px, 9.5vw, 126px); max-width: calc(100% - 10px); height: auto; }
.fc-heading-brand::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: #8ba6b9; }
.fc-heading-others { flex-direction: column; text-align: center; line-height: 1.3; color: #303941; font-weight: 650; }
.fc-heading-others span { font-size: .77rem; color: #59656c; font-weight: 500; margin-top: 3px; }
.fc-row + .fc-row { border-top: 1px solid var(--fc-line); }
.fc-row > summary { list-style: none; scroll-margin-top: 65px; padding: 0; cursor: pointer; color: var(--fc-ink); }
.fc-row > summary::-webkit-details-marker { display: none; }
.fc-row > summary > span { min-height: 49px; }
.fc-row > summary:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: -3px; }
.fc-name {
  display: flex; align-items: center; gap: 10px; padding: 9px clamp(12px, 1.5vw, 21px);
  font-size: clamp(.95rem, 1.13vw, 1.02rem); font-weight: 620; line-height: 1.38; letter-spacing: -.018em;
}
.fc-chevron {
  height: 20px; width: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: #f1f3f4; color: #5a656d;
}
.fc-chevron::before { content:''; width:6px; height:6px; border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:translateY(-1.5px) rotate(45deg); }
.fc-row[open] .fc-chevron { background:#e4ecf1; color:var(--fc-accent); }
.fc-row[open] .fc-chevron::before { transform:translateY(1.5px) rotate(225deg); }
.fc-result { display: flex; align-items: center; justify-content: center; }
.fc-mark {
  width: 25px; height: 25px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
}
.fc-yes { background: #dff3e9; color: var(--fc-green); }
.fc-yes::before {
  content: ''; width: 12px; height: 7px; border: solid currentColor; border-width: 0 0 2.4px 2.4px;
  transform: translateY(-2px) rotate(-45deg);
}
.fc-brand .fc-yes { background: #00834c; color: white; }
.fc-brand .fc-yes::before { border-width: 0 0 3px 3px; }
.fc-unproven { position: relative; background: #cb283a; color: white; }
.fc-unproven::before, .fc-unproven::after { content: ''; position: absolute; width: 13px; height: 2.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.fc-unproven::after { transform: rotate(-45deg); }
.fc-others { gap: 10px; }
.fc-value { min-width: 66px; font-size: .88rem; font-weight: 570; color: #46515a; font-variant-numeric: tabular-nums; }
.fc-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; }
.fc-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(24px, 5vw, 68px);
  padding: clamp(19px, 2.3vw, 32px) clamp(20px, 4vw, 60px); border-top: 1px solid var(--fc-line); background: #f7f9fa;
}
.fc-detail strong { color: var(--fc-ink); font-size: .88rem; font-weight: 680; }
.fc-detail p, .fc-method p { margin: 5px 0 0; color: #505b65; font-size: .93rem; line-height: 1.55; }
.fc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; color: #59656d; font-size: .8rem; }
.fc-foot > span { flex-shrink: 0; }
.fc-method summary { color: #44515c; font-size: .87rem; font-weight: 600; cursor: pointer; width: fit-content; padding-block: 5px; }
.fc-method p { max-width: 78ch; margin-block: 7px; }
.fc-method .text-link { font-size: .87rem; }
@media (hover:hover) {
  .fc-row > summary:hover { background: #f7f9fa; }
  .fc-row > summary:hover .fc-brand { background: #e9eff3; }
  .fc-row > summary:hover .fc-chevron { background: #e3eaee; }
}
@media(prefers-reduced-motion:no-preference) {
  .fc-chevron::before { transition: transform .18s ease; }
  .fc-row[open] > .fc-detail { animation: fc-reveal .2s ease-out; }
  @keyframes fc-reveal { from { opacity: .45; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}
@media(max-width:650px) {
  .fc-board { border-radius: 15px; }
  .fc-grid { grid-template-columns: minmax(0,1.65fr) minmax(0,.8fr) minmax(0,.92fr); }
  .fc-head > * { min-height: 54px; }
  .fc-head .fc-heading-feature { padding-inline: 12px; font-size: .9rem; }
  .fc-heading-brand img { max-width: calc(100% - 6px); }
  .fc-row > summary { scroll-margin-top: 59px; }
  .fc-heading-others { padding: 7px 3px; font-size: .83rem; }
  .fc-heading-others span { font-size: .67rem; }
  .fc-row > summary > span { min-height: 52px; }
  .fc-name { padding: 8px 5px 8px 8px; gap: 6px; font-size: .91rem; hyphens: auto; overflow-wrap: anywhere; }
  .fc-chevron { width: 17px; height: 17px; }
  .fc-chevron::before { width: 5px; height: 5px; }
  .fc-others { flex-direction: column; gap: 2px; padding: 5px 2px; }
  .fc-value { min-width: 0; text-align: center; font-size: .72rem; }
  .fc-mark { width: 25px; height: 25px; }
  .fc-detail { grid-template-columns: 1fr; padding: 17px; gap: 12px; }
  .fc-foot { flex-wrap: wrap; gap: 4px 10px; }
}
