/**
 * FC+ Onboarding Tour — スポットライト/ツールチップ UI
 * 依存なし。ヘッダ等の上に確実に出すため z-index を最大級に。
 */

.fc-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  /* 暗幕でクリックを受け止め、ツアー中に背後の記事等をタップして離脱するのを防ぐ。
     スクロールは阻害しない（touch-action / overflow は触らない）。 */
  pointer-events: auto;
}

/* スポットライト = box-shadow の巨大リングで周囲だけ暗くする */
.fc-tour-spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(17, 20, 26, 0.62);
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 0;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  pointer-events: auto; /* 既定はハイライト部を保護（背後の要素をクリックさせない） */
}

/* STEP1: ハイライトしたタブ部分をタップして次へ進める（クリックはJS側で受ける） */
.fc-tour-spot.is-clickthrough {
  cursor: pointer;
}

/* ツールチップ */
.fc-tour-tip {
  position: fixed;
  z-index: 2147483001;
  width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  background: #fff;
  color: #1a1d24;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: fc-tour-pop .22s ease;
}

@keyframes fc-tour-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fc-tour-tip__head {
  display: flex;
  align-items: flex-start; /* ラベルが2行になってもスキップが中央にずれない */
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* ステップラベル。「Full-Count＋の楽しみ方 （STEP 1/3）」のような長い文言が入るため、
   丸バッジ（背景＋左右padding）にすると全スマホ幅で溢れる。キャプション表記にして
   狭い端末では自然に折り返させる。 */
.fc-tour-tip__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  color: #b8860b;
}

.fc-tour-tip__skip {
  flex: 0 0 auto; /* ラベルが長くても潰れない */
  border: 0;
  background: transparent;
  color: #8b909a;
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  line-height: 1.5; /* ラベル1行目と高さを揃える */
}
.fc-tour-tip__skip:hover { color: #5b606a; }

.fc-tour-tip__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
}

.fc-tour-tip__body {
  font-size: 13px;
  line-height: 1.65;
  color: #454a54;
}

.fc-tour-tip__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.fc-tour-tip__primary {
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #d4af37 0%, #c19b2e 100%);
  border-radius: 999px;
  padding: 10px 22px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(193, 155, 46, 0.4);
}
.fc-tour-tip__primary:hover { filter: brightness(1.05); }
.fc-tour-tip__primary:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .fc-tour-tip { padding: 14px; }
  .fc-tour-tip__title { font-size: 14px; }
  .fc-tour-tip__body { font-size: 12.5px; }
}