/* TMAN membership, option A selected by the owner on 2026-10-30. */
:root {
  --font-rbm: 'IBM Plex Sans Thai', system-ui, sans-serif; --rbm-paper: #F7F3EC; --rbm-ink: #16271D; --rbm-soft: #3D5446;
  --rbm-muted: #5B6E62; --rbm-hover: #8A6418; --rbm-focus: #1E3A2A;
  --rbm-divider: rgba(22,39,29,.14);
  --fs-rbm-title: 17px; --fs-rbm-body: 16px; --fs-rbm-small: 14px;
  --fw-rbm-regular: 400; --fw-rbm-bold: 600; --lh-rbm: 1.75;
  --sp-rbm-xs: 4px; --sp-rbm-sm: 8px; --sp-rbm-icon: 12px;
  --sp-rbm-mobile: 16px; --sp-rbm-brand: 24px; --sp-rbm-gap: 24px; --sp-rbm-tablet: 32px;
  --rbm-logo: 64px; --sp-rbm-logo-small: 52px; --rbm-width: 1200px; --rbm-tap: 44px;
  --sp-rbm-callbar: 80px;
  /* design:pairs text --rbm-ink/--rbm-paper; text --rbm-soft/--rbm-paper; text --rbm-muted/--rbm-paper; text --rbm-hover/--rbm-paper; focus --rbm-focus/--rbm-paper */
}
.rb-membership {
  display: block; width: 100%; margin: 0; padding: 0;
  background: var(--rbm-paper); color: var(--rbm-ink);
  border-top: 1px solid var(--rbm-divider);
  font-family: var(--font-rbm);
  font-size: var(--fs-rbm-body); font-weight: var(--fw-rbm-regular); line-height: var(--lh-rbm);
}
.rb-membership *, .rb-membership *::before, .rb-membership *::after { box-sizing: border-box; }
.rb-membership .rbm-inner { width: min(100% - 2 * var(--sp-rbm-mobile), var(--rbm-width)); margin: 0 auto; padding: var(--sp-rbm-gap) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-rbm-gap); }
.rb-membership .rbm-brand { display: flex; align-items: center; gap: var(--sp-rbm-brand); min-width: 0; }
.rb-membership .rbm-logo { display: block; width: var(--rbm-logo); height: var(--rbm-logo); object-fit: contain; flex: none; }
.rb-membership .rbm-title { margin: 0; color: var(--rbm-ink); font-size: var(--fs-rbm-title); line-height: var(--lh-rbm); }
.rb-membership .rbm-title strong { font-weight: var(--fw-rbm-bold); }
.rb-membership .rbm-name { display: block; margin-top: var(--sp-rbm-xs); color: var(--rbm-muted); font-size: var(--fs-rbm-small); line-height: var(--lh-rbm); }
.rb-membership .rbm-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-rbm-icon); min-height: var(--rbm-tap); padding: var(--sp-rbm-sm) 0; flex: none; color: var(--rbm-soft); font-size: var(--fs-rbm-small); line-height: var(--lh-rbm); text-decoration: none; }
.rb-membership .rbm-link svg { width: 18px; height: 18px; flex: none; }
.rb-membership .rbm-link:hover { color: var(--rbm-hover); }
.rb-membership .rbm-link:focus-visible { outline: 2px solid var(--rbm-focus); outline-offset: 4px; }
@media (min-width: 768px) { .rb-membership .rbm-inner { width: min(100% - 2 * var(--sp-rbm-tablet), var(--rbm-width)); } }
@media (max-width: 767px) {
  .ft:has(+ .rb-membership) { padding-bottom: var(--sp-rbm-tablet); }
  .rb-membership:has(+ .mbar) { padding-bottom: calc(var(--sp-rbm-callbar) + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .rb-membership .rbm-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-rbm-icon); }
  .rb-membership .rbm-brand { align-items: flex-start; gap: var(--sp-rbm-mobile); }
  .rb-membership .rbm-logo { width: var(--sp-rbm-logo-small); height: var(--sp-rbm-logo-small); }
  .rb-membership .rbm-title { font-size: var(--fs-rbm-body); }
  .rb-membership .rbm-name { max-width: 30ch; }
  .rb-membership .rbm-link { margin-left: calc(var(--sp-rbm-logo-small) + var(--sp-rbm-mobile)); }
}