.diagnosis-card {
  box-sizing: border-box; width: 100%; min-width: 0; margin: 24px 0; padding: 22px;
  border: 1px solid #dbe2d5; border-radius: 12px; background: #f4f6ef;
  color: #3b5042; font-size: 14px; line-height: 1.65;
}
.diagnosis-card *, .diagnosis-card *::before, .diagnosis-card *::after { box-sizing: border-box; }
.diagnosis-card .diagnosis-card__eyebrow { display: block; color: #667952; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.diagnosis-card .diagnosis-card__title { margin: 4px 0 14px; color: #3b5042; font-size: 19px; font-weight: 600; line-height: 1.4; }
.diagnosis-card .diagnosis-card__persona { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 14px; }
.diagnosis-card .diagnosis-card__mbti { padding: 3px 9px; border-radius: 5px; background: #3e5544; color: #fff; font-size: 12px; letter-spacing: .04em; }
.diagnosis-card .diagnosis-card__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.diagnosis-card .diagnosis-card__color { position: relative; min-width: 0; padding: 12px 5px; border: 1px solid #e1e6db; border-radius: 9px; background: #fcfdf9; text-align: center; }
.diagnosis-card .diagnosis-card__color:not(:last-child)::after { content: '→'; position: absolute; top: 44px; right: -15px; color: #728069; font-size: 13px; }
.diagnosis-card .diagnosis-card__color-title { display: block; font-size: 11px; color: #5f6e5b; }
.diagnosis-card .diagnosis-card__swatch { display: block; width: 36px; height: 36px; margin: 9px auto; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(59, 80, 66, .14); }
.diagnosis-card .diagnosis-card__swatch.is-unknown { background: #e5e8df; }
.diagnosis-card .diagnosis-card__color-name { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.diagnosis-card .diagnosis-card__space { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 14px 0; padding: 0; }
.diagnosis-card .diagnosis-card__space li { margin: 0; padding: 4px 9px; border: 1px solid #d9e1d3; border-radius: 20px; background: #edf1e7; font-size: 12px; }
.diagnosis-card .diagnosis-card__reason { margin: 14px 0; color: #455640; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.diagnosis-card .diagnosis-card__details, .diagnosis-card .diagnosis-card__management { margin-top: 14px; border-top: 1px solid #dbe2d5; padding-top: 12px; }
.diagnosis-card summary { cursor: pointer; color: #3b5042; font-size: 12px; font-weight: 600; }
.diagnosis-card summary:focus-visible { outline: 2px solid #526e46; outline-offset: 4px; }
.diagnosis-card .diagnosis-card__answers { margin: 13px 0 0; font-size: 12px; }
.diagnosis-card .diagnosis-card__answers > div { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.5fr); gap: 12px; padding: 7px 0; }
.diagnosis-card .diagnosis-card__answers dt { color: #66725e; }
.diagnosis-card .diagnosis-card__answers dd { margin: 0; overflow-wrap: anywhere; }
.diagnosis-card .diagnosis-card__notice { margin: 13px 0 0; color: #68765f; font-size: 11px; }
.diagnosis-card .diagnosis-card__management pre { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: inherit; font-size: 12px; line-height: 1.8; }
.diagnosis-source[hidden] { display: none !important; }
.product-diagnosis-error { max-width: 1192px; margin: 0 auto 20px; padding: 14px 20px; border: 1px solid #dbe2d5; background: #f4f6ef; font-size: 13px; }
.cart-diagnosis.diagnosis-card, .order-diagnosis.diagnosis-card { margin: 14px 0 0; padding: 16px; }
.cart-diagnosis .diagnosis-card__title, .order-diagnosis .diagnosis-card__title { font-size: 16px; }
.sys-order-diagnosis { border-top: 1px solid #e4ebf3; padding: 20px 0; }
.sys-order-diagnosis > h4 { margin: 0 0 12px; }
.sys-order-diagnosis .diagnosis-card { max-width: 680px; margin: 12px 0 0; }
@media (max-width: 600px) {
  .diagnosis-card { padding: 16px; margin: 20px 0; font-size: 13px; }
  .diagnosis-card .diagnosis-card__colors { gap: 14px; }
  .diagnosis-card .diagnosis-card__color:not(:last-child)::after { right: -12px; }
  .diagnosis-card .diagnosis-card__color-name { font-size: 12px; }
  .diagnosis-card .diagnosis-card__answers > div { grid-template-columns: 1fr; gap: 3px; }
  .product-diagnosis-error { margin: 0 20px 20px; }
}