.ba-filler-guide {
  --filler-point: #118b87;
  --filler-dark: #076e6b;
  --filler-soft: #eaf7f5;
  --filler-line: #eadbd3;
  --filler-muted: #796d68;
  box-sizing: border-box;
  width: 100%;
  margin: 50px auto 65px;
  color: #211a17;
  font-family: inherit;
}
.ba-filler-guide *, .ba-filler-guide *::before, .ba-filler-guide *::after { box-sizing: border-box; }
.ba-filler-guide [hidden] { display: none !important; }
.ba-filler-guide button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ba-filler-guide button:focus-visible { outline: 3px solid rgba(17,139,135,.5); outline-offset: 3px; }
.ba-filler-guide__heading { margin-bottom: 24px; text-align: center; }
.ba-filler-guide__eyebrow { color: var(--filler-dark); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ba-filler-guide__heading h2 { margin: 8px 0 10px; font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -.04em; word-break: keep-all; }
.ba-filler-guide__heading p { max-width: 620px; margin: 0 auto; color: var(--filler-muted); font-size: 14px; line-height: 1.7; word-break: keep-all; }
.ba-filler-guide__card { overflow: hidden; border: 1px solid var(--filler-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 35px rgba(69,49,39,.07); }
.ba-filler-guide__layout { display: grid; grid-template-columns: minmax(0,42%) minmax(0,1fr); }
.ba-filler-guide__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-width: 0; margin: 0; padding: 28px 12px; background: #fcf0e6; }
.ba-filler-guide__visual-tag { padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--filler-dark); font-size: 13px; font-weight: 800; box-shadow: 0 4px 14px rgba(70,40,25,.07); }
.ba-filler-guide__photo { width: 100%; max-width: 300px; overflow: hidden; border-radius: 18px; background: #f7dfca; }
.ba-filler-guide__photo svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.ba-filler-guide__photo--illustration { background: linear-gradient(145deg,#fcefe3,#f7dfca); }
.ba-filler-guide__visual figcaption { color: #77665c; font-size: 11px; line-height: 1.6; text-align: center; word-break: keep-all; }
.ba-filler-guide__halo { fill: none; stroke: rgba(255,255,255,.98); stroke-width: 7px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-filler-guide__region { fill: rgba(17,139,135,.18); stroke: var(--filler-dark); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-filler-guide__region--warm { fill: rgba(217,133,111,.25); stroke: #9a533e; }
.ba-filler-guide__line { fill: none; stroke: var(--filler-dark); stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-filler-guide__dots { fill: none; stroke: var(--filler-dark); stroke-width: 8px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ba-filler-guide__soft-area { fill: rgba(17,139,135,.22); stroke: none; }
.ba-filler-guide__soft-area-warm { fill: rgba(187,103,81,.22); stroke: none; }
.ba-filler-guide__limb { fill: #f5cdb4; stroke: #d9aa90; stroke-width: 2px; }
.ba-filler-guide__details { min-width: 0; align-self: center; padding: 30px 24px; }
.ba-filler-guide h3 { margin: 8px 0 0; font-size: 22px; line-height: 1.4; font-weight: 800; letter-spacing: -.035em; word-break: keep-all; }
.ba-filler-guide__intro { margin: 9px 0 0; color: var(--filler-muted); font-size: 12px; line-height: 1.65; word-break: keep-all; }
.ba-filler-guide__options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.ba-filler-guide__options button { min-height: 72px; padding: 11px 12px; border: 1px solid var(--filler-line); border-radius: 11px; background: #fff; color: #50443e; text-align: left; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.ba-filler-guide__options button:hover { border-color: var(--filler-point); }
.ba-filler-guide__options button[aria-pressed="true"] { border-color: var(--filler-point); background: var(--filler-soft); color: var(--filler-dark); box-shadow: inset 0 0 0 1px var(--filler-point); }
.ba-filler-guide__options strong { display: block; font-size: 13px; font-weight: 800; word-break: keep-all; }
.ba-filler-guide__options span { display: block; margin-top: 5px; color: #7b6b64; font-size: 11px; line-height: 1.45; word-break: keep-all; }
.ba-filler-guide__note { min-height: 133px; margin-top: 14px; padding: 14px 15px; border-radius: 11px; background: #f6faf9; }
.ba-filler-guide__note strong { color: var(--filler-dark); font-size: 13px; }
.ba-filler-guide__note p { margin: 6px 0 0; color: #72655f; font-size: 12px; line-height: 1.75; word-break: keep-all; }
.ba-filler-guide__notice { margin: 0; padding: 16px 22px; border-top: 1px solid var(--filler-line); color: #786b63; background: #fffdfb; font-size: 11px; line-height: 1.7; word-break: keep-all; }

@media (max-width: 700px) {
  .ba-filler-guide { margin: 42px auto 50px; }
  .ba-filler-guide__heading h2 { font-size: 25px; }
  .ba-filler-guide__layout { grid-template-columns: minmax(0,1fr); }
  .ba-filler-guide__visual { padding: 18px 16px; gap: 12px; }
  .ba-filler-guide__photo { max-width: 255px; }
  .ba-filler-guide__details { padding: 24px 20px; }
  .ba-filler-guide__note { min-height: 0; }
  .ba-filler-guide__options strong { font-size: 14px; }
}
@media (max-width: 420px) {
  .ba-filler-guide__heading h2 { font-size: 23px; }
  .ba-filler-guide__heading p { font-size: 13px; }
  .ba-filler-guide__card { border-radius: 16px; }
  .ba-filler-guide__visual { padding: 16px 12px; }
  .ba-filler-guide__photo { max-width: 225px; }
  .ba-filler-guide__details { padding: 22px 16px; }
  .ba-filler-guide h3 { font-size: 20px; }
  .ba-filler-guide__options { margin-top: 16px; }
  .ba-filler-guide__options button { min-height: 76px; padding: 10px; }
  .ba-filler-guide__notice { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-filler-guide * { transition: none !important; }
}