/* ----------------------------------------------------------------------
 この記事のポイント (key-points) box — Figma 提案レイアウト node 109:439
 (desktop) / 104:92 (mobile) for the original wireframe, then redesigned
 per an explicit user mockup (2026-08-20) to a dark title bar + cream
 body with checkmark markers, replacing the original dot-marker version.
 Colors reuse this project's real v2 tokens: title bar = brand-primary
 (#49352d), body = --color-grey-92 (#f7f6f0), checkmark/accent =
 --color-brand-accent-solid (#f0701c).
---------------------------------------------------------------------- */
.quadra-child-key-points {
  border: 1px solid var(--color-border-subtle, #ddd);
  border-radius: var(--radius-12, 12px);
  /* Clips the title bar's square bottom corners against the card's own
     rounded corners — same technique as ig_post_card's media/carousel
     filling its rounded frame flush. */
  overflow: hidden;
  margin: 32px 0;
}
.quadra-child-key-points__title {
  /* !important throughout: the parent theme's .post_content p sets
     margin:0 0 2em + line-height:2.4 with higher specificity than a
     single class selector (class+type beats class alone) — confirmed
     live, it was adding a real 32px gap between the title bar and the
     body below it. Same class of leak as .post_content ul/li below;
     hardening every typography property here rather than discovering
     each one individually. */
  margin: 0 !important;
  padding: 14px 20px !important;
  line-height: 1.5 !important;
  background: var(--color-brand-primary, #49352d);
  color: var(--color-text-inverse, #fff);
  font-size: var(--font-size-body, 16px) !important;
  font-weight: var(--font-weight-bold, 700);
  text-align: center;
}
.quadra-child-key-points__list {
  background: var(--color-grey-92, #f7f6f0);
  /* !important: the parent theme's .post_content ul (margin-left:1.3em;
     list-style:circle) has higher specificity than a single class
     selector and was leaking both a circle marker and an unwanted
     left margin through — confirmed live via computed styles. */
  margin: 0 !important;
  padding: 20px !important;
  list-style: none !important;
}
.quadra-child-key-points__item {
  position: relative;
  padding-left: 26px !important;
  margin: 0 0 12px !important;
  font-size: var(--font-size-body-sm, 14px) !important;
  /* !important: .post_content li sets line-height:2.2 (class+type,
     beats a single class) — would have both thrown off the checkmark's
     hardcoded vertical offset below and made the list visually sparser
     than intended. Confirmed live before fixing. */
  line-height: var(--line-height-body-sm, 21px) !important;
  color: var(--color-text-secondary, #5c5650);
}
.quadra-child-key-points__item:last-child {
  margin-bottom: 0 !important;
}
/* Checkmark marker via ::before mask — same SVG path/technique as the
   copy button's "copied" checkmark (style.css, #single_copy_title_url_top
   .single_copy_title_url_btn.copied:before), reused here for visual
   consistency across the theme's icon set. Top offset (3px) centers
   the 16px icon against the first line of body-sm's 21px line-height:
   (21 - 16) / 2 = 2.5, rounded to 3. */
.quadra-child-key-points__item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: var(--color-brand-accent-solid, #f0701c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / contain;
}