/* 体験の案内の帯。AquaGate の深い海の色とすりガラスに合わせる（REDUX の画面の上に重ねる）。
   REDUX の画面の下の固定ボタン（名簿を印刷など）を隠さないよう、帯は閉じられ、本文には下の余白を足す */
.trial-band {
  position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: 560px; margin: 0 auto;
  background: rgba(6, 48, 79, .95); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px;   /* 店員画面の角（design.md の 6px）にそろえる */
  padding: 12px 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); backdrop-filter: blur(8px);
  font: 500 14px/1.6 "Zen Maru Gothic", "BIZ UDPGothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
}
.trial-band p { margin: 0; }
.trial-band__k { font: 600 14px/1.4 "Outfit", system-ui, sans-serif; letter-spacing: .14em; color: #7fe3f0; }
.trial-band__t { font-weight: 700; font-size: 16px; margin-top: 2px !important; }
.trial-band__b { color: rgba(255, 255, 255, .88); font-size: 14px; margin-top: 4px !important; }
.trial-band__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trial-band__btn {
  font: 700 14px/1 "Zen Maru Gothic", "BIZ UDPGothic", sans-serif; border-radius: 6px; padding: 12px 14px; min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; text-decoration: none;
}
.trial-band__btn--main { background: #ff8a6b; border-color: #ff8a6b; color: #3a1308; }
.trial-band__btn:focus-visible { outline: 2px solid #7fe3f0; outline-offset: 2px; }
.trial-band--small { padding: 6px; max-width: 420px; }
.trial-band__open {
  width: 100%; text-align: left; font: 700 14px/1.4 "Zen Maru Gothic", "BIZ UDPGothic", sans-serif; color: #fff;
  background: transparent; border: 0; padding: 10px; cursor: pointer; border-radius: 6px; min-height: 44px;
}
.trial-band__open:focus-visible { outline: 2px solid #7fe3f0; outline-offset: 2px; }
body:has(.trial-band) { padding-bottom: 230px; }
body:has(.trial-band--small) { padding-bottom: 72px; }

/* 上の帯: 「お店の画面」の目印（trial-bridge.js の roleBand）。見本の帯と同じ濃い地（--demo-bg、7:1 以上）で、
   お客さんの画面（AquaGate）のオレンジの帯と見分ける。画面の縁も同じ色で囲む。見本の帯は画面では隠し、印刷だけに残す */
@media screen { #demoBand { display: none; } }
.trial-role {
  position: sticky; top: 0; z-index: 11; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--demo-bg); color: var(--demo-ink); border-bottom: 7px double var(--demo-ink);
}
.trial-role__ic { font-size: 22px; line-height: 1; }
.trial-role__t { display: flex; flex-direction: column; min-width: 0; }
.trial-role__t b { font-size: 16px; line-height: 1.3; }
.trial-role__t small { font-size: 12px; line-height: 1.4; }
.trial-role__go { margin-left: auto; padding: 10px 0; white-space: nowrap; color: inherit; font-weight: 700; font-size: 14px; text-underline-offset: 3px; }
.trial-role__go:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: 2px; }
.bar { top: var(--trial-role-h, 0px); }
html { scroll-padding-top: calc(96px + var(--trial-role-h, 0px)); }
body::after { content: ""; position: fixed; inset: 0; z-index: 60; border: 4px solid var(--demo-bg); pointer-events: none; }
@media print { .trial-role, body::after { display: none !important; } }