/* 凡人初次突破：三門主功法的唯讀比較。風格沿用修行紙面，不以圖示代替內容。 */
.technique-preview-wrap {
  min-width: 0; margin-top: 6px; padding: 16px;
  border: 1px solid #d7e5eb; border-radius: 8px; background: #f7fbfd;
}
.technique-preview-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px;
}
.technique-preview-heading b { font-size: 15px; color: #2b617d; }
.technique-preview-heading span { font-size: 12px; color: #6c8794; }
.technique-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; }
.technique-preview-card {
  display: flex; flex-direction: column; min-width: 0; gap: 9px; padding: 14px;
  border: 1px solid #d5e4eb; border-radius: 8px; background: #fff;
  color: #3d5c6b; transition: border-color .14s, background-color .14s;
}
.technique-preview-card.is-selected { border-color: #6daacb; background: #f4fafd; box-shadow: inset 0 0 0 1px #a9d0e4; }
.technique-preview-top { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.technique-preview-focus {
  display: inline-flex; padding: 3px 7px; border: 1px solid #d4e5ed;
  border-radius: 999px; background: #f2f8fb; color: #396c85; font-size: 11px; font-weight: 700;
}
.technique-preview-state { color: #31749a; font-size: 12px; font-weight: 800; }
.technique-preview-state:empty { display: none; }
.technique-preview-card h4 { margin: 0; color: #294f65; font-size: 17px; line-height: 1.4; }
.technique-preview-intro, .technique-preview-passive p,
.technique-preview-skills p { margin: 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.technique-preview-intro { color: #536f7e; }
.technique-preview-passive {
  padding: 9px 10px; border-left: 2px solid #aacbdd;
  background: #f6fafc; border-radius: 3px;
}
.technique-preview-passive > span { display: block; margin-bottom: 4px; color: #3b728f; font-size: 11px; font-weight: 800; }
.technique-preview-more { margin-top: 2px; border-top: 1px solid #e2edf1; padding-top: 9px; }
.technique-preview-more > summary { cursor: pointer; color: #326e91; font-size: 12px; font-weight: 700; line-height: 1.6; }
.technique-preview-more > summary:focus-visible { outline: 2px solid #82b7d2; outline-offset: 3px; }
.technique-preview-skills { padding: 0; margin: 10px 0 0; list-style: none; display: grid; gap: 8px; }
.technique-preview-skills li { padding: 8px; border: 1px solid #e1ebef; background: #fafcfd; border-radius: 5px; }
.technique-preview-level { display: block; margin-bottom: 4px; color: #6b8795; font-size: 11px; font-weight: 700; }
.technique-preview-skills b { display: block; margin-bottom: 3px; color: #2f5e79; font-size: 13px; }
.technique-preview-skills p { color: #536f7e; }
.technique-preview-pick { margin-top: auto; width: 100%; min-height: 37px; }
.technique-preview-card.is-selected .technique-preview-pick {
  border-color: #79b0cc; background: #e8f4f9; color: #2d698b;
}
.technique-preview-note { margin: 11px 0 0; line-height: 1.65; }
.technique-preview-error { grid-column: 1 / -1; padding: 12px; border: 1px solid #decfb4; background: #fffbf2; color: #795f38; }
.technique-preview-error button { margin-left: 8px; }
@media (max-width: 1080px) {
  .technique-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 730px) {
  .technique-preview-wrap { padding: 11px; }
  .technique-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .technique-preview-card { padding: 12px; }
}