/* 使い方ガイド（スマホアプリ・管理画面で共通）。色は各画面のトークンを使う */
.guide { position: fixed; inset: 0; z-index: 1000; font-family: var(--font); color: var(--ink); }
.guide-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 20, .5); animation: guideFade .2s ease; }

.guide-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 32px));
  background: var(--surface); border-radius: 18px; padding: 18px 20px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 12px;
  animation: guideRise .22s cubic-bezier(.2, .8, .2, 1);
}
.guide-head { display: flex; align-items: center; gap: 8px; color: var(--brand); }
.guide-head .i { width: 18px; height: 18px; }
.guide-skip { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 12px; padding: 2px 0; cursor: pointer; }
.guide-step-no { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.guide h3 { margin: 0; font-size: 16px; line-height: 1.45; }
.guide p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }

.guide-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.guide-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.guide-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.guide-btn {
  height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer;
}
.guide-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 手順シート：スマートフォンでは下から出す */
.guide-sheet-head { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.guide-sheet-head h3 { color: var(--ink); }
.guide-lead { font-size: 14px; }
.guide-list { margin: 0; padding: 0; list-style: none; counter-reset: g; display: flex; flex-direction: column; gap: 8px; }
.guide-list li {
  counter-increment: g; position: relative; padding: 10px 12px 10px 44px;
  background: var(--surface-2); border-radius: 12px; font-size: 14px; line-height: 1.55;
}
.guide-list li::before {
  content: counter(g); position: absolute; left: 12px; top: 10px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
}
@media (max-width: 560px) {
  .guide-sheet {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto;
    border-radius: 22px 22px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    animation: guideUp .25s cubic-bezier(.2, .8, .2, 1);
  }
}

/* ツアー：操作する場所の周りだけ明るく残し、吹き出しで指す */
.guide-shade { position: absolute; inset: 0; background: rgba(8, 12, 20, .55); animation: guideFade .2s ease; }
.guide-hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 12, 20, .55);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.guide-hole::after {
  content: ""; position: absolute; inset: -2px; border-radius: 14px;
  border: 2px solid var(--brand); animation: guidePulse 1.4s ease-out infinite;
}
.guide-bubble {
  position: fixed; padding: 14px 16px 16px; border-radius: 14px;
  background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 8px;
  transition: left .25s ease, top .25s ease;
}
.guide-bubble::before {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--surface);
  transform: rotate(45deg); display: none;
}
.guide-bubble[data-arrow=left]::before { display: block; left: -7px; top: calc(var(--ay) - 7px); }
.guide-bubble[data-arrow=top]::before { display: block; top: -7px; left: calc(var(--ax) - 7px); }
.guide-bubble[data-arrow=bottom]::before { display: block; bottom: -7px; left: calc(var(--ax) - 7px); }
.guide-bubble.is-center { animation: guidePop .22s cubic-bezier(.2, .8, .2, 1); }
.guide-bubble .guide-btn { height: 38px; font-size: 14px; border-radius: 10px; }
.guide-btn:disabled { opacity: .4; cursor: default; }

@keyframes guideFade { from { opacity: 0; } }
@keyframes guideRise { from { opacity: 0; transform: translate(-50%, -46%); } }
@keyframes guidePop { from { opacity: 0; transform: scale(.96); } }
@keyframes guidePulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes guideUp { from { transform: translateY(100%); } }