/* ========================================
   拡大鏡ボタン（右下固定・丸型）
======================================== */
.magnifier-toggle {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10000;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: 150px;
  height: 150px;
  border-radius: 50%;

  background: #fff;
  border: 2px solid #093d27;
  color: #093d27;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  /* DOM 準備完了まで非表示（opacity + pointer-events で制御、JSでフェードイン） */
  opacity: 0;
  pointer-events: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.4s ease;
}

.magnifier-toggle svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: stroke 0.2s ease;
}

.magnifier-toggle:hover {
  background: #093d27;
  color: #fff;
  box-shadow: 0 6px 20px rgba(9, 61, 39, 0.35);
}

.magnifier-toggle.is-active {
  background: #093d27;
  color: #fff;
  box-shadow: 0 6px 20px rgba(9, 61, 39, 0.35);
}

/* ========================================
   ボタンテキスト
======================================== */
.magnifier-toggle .btn-label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}

/* ========================================
   ルーペレンズ外枠
   - position: fixed でビューポートに固定
   - overflow: hidden で円形クリップ
======================================== */
#magnifierLens {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid #093d27;
  box-shadow:
    0 0 0 1px rgba(9, 61, 39, 0.15),
    0 8px 36px rgba(0, 0, 0, 0.3);
  pointer-events: none !important; /* スクロールやクリックを妨げない */
  overflow: hidden;
  display: none;
  z-index: 9999;
  contain: strict; /* クローンコンテンツがページレイアウトに影鿹しないようにする */
}

/*
  ルーペ内部ラッパー
  - transform: scale(ZOOM) で拡大（JS で動的に設定）
  - transform-origin: 0 0 で左上基点
  - marginLeft/marginTop で表示位置を制御（JS で動的に設定）
*/
#magnifierInner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/* 拡大モード中はカーソルを十字に */
body.magnifier-mode,
body.magnifier-mode * {
  cursor: crosshair !important;
}

/* ボタン自体はカーソルをポインターに戻す */
body.magnifier-mode .magnifier-toggle,
body.magnifier-mode .magnifier-toggle * {
  cursor: pointer !important;
}

@media (max-width: 1024px) {
  .magnifier-toggle {
    bottom: 120px;
    right: 20px;
    width: 120px;
    height: 120px;
  }
  .magnifier-toggle .btn-label {
    font-size: 14px;
  }
  #magnifierLens {
    width: 220px;
    height: 220px;
  }
}