/* ============================================================
 * Tiful v4 Coachmark Overlay (v1)
 * 2026-05-03 / Phase 5 (CSS 分離 / home_v1.html inline から分離)
 * ============================================================
 * 起動: home_v1.html?coachmark=1 (オンボ Step 8 Complete → Home へ進む 押下時)
 * 構成: shield (背景タップ block) + spot (donut-hole 式 dim cutout) + tooltip (説明文 + ボタン)
 * ============================================================ */

.cm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
}

.cm-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cm-shield {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9001;
  pointer-events: auto;
}

.cm-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  pointer-events: auto;
  transition: top 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
              left 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
              width 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
              height 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 9002;
}

.cm-tooltip {
  position: fixed;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--ink, #1A1A1A);
  line-height: 1.55;
  letter-spacing: 0.02em;
  z-index: 9003;
  width: 248px;
  max-width: calc(100vw - 32px);
  pointer-events: auto;
}

.cm-tooltip__text {
  display: block;
  margin-bottom: 12px;
  font-weight: 400;
}

.cm-tooltip__btn {
  background: var(--ink, #1A1A1A);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 9px 18px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.cm-tooltip__btn:active { opacity: 0.85; }

.cm-tooltip::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  transform: rotate(45deg);
  z-index: -1;
}

.cm-tooltip[data-placement="top"]::before {
  bottom: -6px;
  left: 50%;
  margin-left: -7px;
}

.cm-tooltip[data-placement="bottom"]::before {
  top: -6px;
  left: 50%;
  margin-left: -7px;
}