:root { --brand-teal: #079b94; --brand-ink: #075b55; --brand-soft: #eaf8f6; }
.brand .brand-mark { width: 54px; height: 54px; flex: 0 0 54px; background: none; border-radius: 0; }
.brand .brand-mark::after { content: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand strong { font-family: var(--sans); font-size: 23px; font-weight: 800; letter-spacing: 1px; color: var(--brand-ink); }
.brand small { margin-top: 3px; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: 2px; font-weight: 600; color: #497c77; }
.interest-intro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 22px; font-size: 13px; color: var(--muted); }
.interest-intro strong { color: var(--brand-ink); font-size: 14px; font-weight: 600; }
.dish-interest { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.interest-count { color: #637a75; font-size: 13px; white-space: nowrap; }
.interest-count strong { color: var(--brand-ink); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.interest-button { min-width: 88px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #b3d5d1; border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--brand-ink); background: white; transition: background .16s, border-color .16s; }
.interest-button .icon { width: 18px; height: 18px; }
.interest-button:hover { background: var(--brand-soft); border-color: var(--brand-teal); }
.interest-button[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-teal); }
.interest-button[aria-pressed="true"] .icon { fill: var(--brand-teal); stroke: var(--brand-teal); }
.interest-button[aria-busy="true"] { opacity: .65; }
.dish-detail-interest { margin-bottom: 20px; }
.dish-detail-interest .dish-interest { margin-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
  .brand { gap: 9px; }
  .brand .brand-mark { width: 43px; height: 43px; flex-basis: 43px; }
  .brand strong { font-size: 19px; letter-spacing: .5px; }
  .brand small { font-size: 7px; letter-spacing: 1.3px; }
  .interest-intro { gap: 3px; margin-bottom: 16px; font-size: 11px; }
  .interest-intro strong { width: 100%; font-size: 13px; }
  .dish-interest { gap: 5px; margin-top: 10px; padding-top: 10px; flex-wrap: wrap; }
  .interest-count { font-size: 11px; }
  .interest-count strong { font-size: 17px; }
  .interest-button { min-width: 76px; gap: 5px; padding: 7px 9px; font-size: 12px; }
  .interest-button .icon { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .brand .brand-mark { width: 37px; height: 37px; flex-basis: 37px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 6px; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) { .interest-button { transition: none; } }