.ba-lip-guide {
  --lip-point: #118b87;
  --lip-dark: #076e6b;
  --lip-soft: #eaf7f5;
  --lip-line: #eadbd3;
  --lip-muted: #796d68;
  box-sizing: border-box;
  width: 100%;
  margin: 50px auto 65px;
  color: #211a17;
  font-family: inherit;
}
.ba-lip-guide *, .ba-lip-guide *::before, .ba-lip-guide *::after { box-sizing: border-box; }
.ba-lip-guide [hidden] { display: none !important; }
.ba-lip-guide button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ba-lip-guide button:focus-visible { outline: 3px solid rgba(17,139,135,.5); outline-offset: 3px; }
.ba-lip-guide__heading { margin-bottom: 24px; text-align: center; }
.ba-lip-guide__eyebrow { color: var(--lip-dark); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ba-lip-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-lip-guide__heading p { margin: 0; color: var(--lip-muted); font-size: 14px; line-height: 1.7; word-break: keep-all; }
.ba-lip-guide__card { overflow: hidden; border: 1px solid var(--lip-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 35px rgba(69,49,39,.07); }
.ba-lip-guide__groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 10px; border-bottom: 1px solid var(--lip-line); background: #fffdfb; }
.ba-lip-guide__groups button { min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #796d68; font-size: 14px; font-weight: 800; }
.ba-lip-guide__groups button:hover { background: #f1f7f5; }
.ba-lip-guide__groups button[aria-pressed="true"] { border-color: var(--lip-point); background: var(--lip-point); color: #fff; }
.ba-lip-guide__layout { display: grid; grid-template-columns: minmax(0,42%) minmax(0,1fr); }
.ba-lip-guide__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin: 0; padding: 28px 12px; min-width: 0; background: #fcf0e6; }
.ba-lip-guide__visual-tag { padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--lip-dark); font-size: 13px; font-weight: 800; box-shadow: 0 4px 14px rgba(70,40,25,.07); }
.ba-lip-guide__photo { width: 100%; max-width: 300px; overflow: hidden; border-radius: 18px; }
.ba-lip-guide__photo svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.ba-lip-guide__visual figcaption { color: #77665c; font-size: 11px; line-height: 1.6; text-align: center; word-break: keep-all; }
.ba-lip-guide__halo { fill: none; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ba-lip-guide__region { fill: rgba(17,139,135,.1); stroke: #076e6b; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-lip-guide__region--warm { fill: rgba(220,142,123,.22); stroke: #9a533e; }
.ba-lip-guide__line { fill: none; stroke: #076e6b; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-lip-guide__line--dashed { stroke-dasharray: 3 4; }
.ba-lip-guide__halo--texture { stroke-width: 2.5px; opacity: .85; }
.ba-lip-guide__line--texture { stroke-width: 1px; }
.ba-lip-guide__details { padding: 28px 22px; min-width: 0; align-self: center; }
.ba-lip-guide h3 { margin: 8px 0 0; font-size: 21px; line-height: 1.4; font-weight: 800; letter-spacing: -.035em; word-break: keep-all; }
.ba-lip-guide__intro { min-height: 38px; margin: 9px 0 0; color: var(--lip-muted); font-size: 12px; line-height: 1.65; word-break: keep-all; }
.ba-lip-guide__options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.ba-lip-guide__options button { min-height: 70px; padding: 11px 10px; border: 1px solid var(--lip-line); border-radius: 11px; background: #fff; color: #50443e; text-align: left; transition: background-color .18s, border-color .18s; }
.ba-lip-guide__options button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ba-lip-guide__options strong { display: block; font-size: 13px; font-weight: 800; word-break: keep-all; }
.ba-lip-guide__options span { display: block; margin-top: 5px; color: #7b6b64; font-size: 11px; line-height: 1.45; word-break: keep-all; }
.ba-lip-guide__options button:hover { border-color: var(--lip-point); }
.ba-lip-guide__options button[aria-pressed="true"] { border-color: var(--lip-point); background: var(--lip-soft); color: var(--lip-dark); box-shadow: inset 0 0 0 1px var(--lip-point); }
.ba-lip-guide__note { min-height: 146px; margin-top: 14px; padding: 13px 14px; border-radius: 11px; background: #f6faf9; }
.ba-lip-guide__note strong { color: var(--lip-dark); font-size: 13px; }
.ba-lip-guide__note p { margin: 6px 0 0; color: #72655f; font-size: 12px; line-height: 1.75; word-break: keep-all; }
.ba-lip-guide__notice { margin: 0; padding: 16px 22px; border-top: 1px solid var(--lip-line); color: #786b63; background: #fffdfb; font-size: 11px; line-height: 1.7; word-break: keep-all; }

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