/* 写真ベース手プレビュー: 写真(<img>) + 爪オーバーレイ(SVG) のレイヤリング。
   Author: 井上康文
   .hand-wrap は既に aspect-ratio:4/5 (=写真1024/1280と一致) のため、
   object-fit:contain と preserveAspectRatio="xMidYMid meet" でレターボックス無し・
   爪が写真の指先にピタリ揃う。 */

/* #handCanvas は .hand-wrap(position:relative + aspect-ratio) を absolute で確実に埋める。
   Safari は flex-item の height:100% を aspect-ratio 由来の親高さに対して解決できず高さ0になり、
   写真が不可視+オーバーレイSVGがはみ出して全体が縮小表示される。absolute inset:0 で回避。 */
#handCanvas { position: absolute; inset: 0; }
#previewHand { position: relative; }
.hand-canvas { display: block; }              /* 旧 grid 中央寄せを解除(絶対配置の子で組む) */

#handCanvas .hand-photo,
#handCanvas .nail-overlay,
#previewHand .hand-photo,
#previewHand .nail-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#handCanvas .hand-photo,
#previewHand .hand-photo {
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#handCanvas .nail-overlay,
#previewHand .nail-overlay {
  z-index: 2;
  overflow: hidden;              /* 爪はviewBox内に収まるので害なし。Safariで枠外へはみ出す事故を防ぐ */
  touch-action: manipulation;
}

/* オーバーレイ内は基本タップ透過。当たり判定は .nail-hit だけ受ける */
#handCanvas .nail-overlay *,
#previewHand .nail-overlay * { pointer-events: none; }

#handCanvas .nail-hit,
#previewHand .nail-hit {
  pointer-events: all;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 写真ロード失敗時のフォールバック(従来SVG手)背景 */
.hand-photo-failed { background: #fff7f5; }

/* 拡大ボタン: オーバーレイ(z-index:2)の上へ+爪と非干渉の手のひら側(右下)へ+タップ44px以上。
   従来は右上=小指の爪タップ領域と重なり、かつオーバーレイの下でタップしづらかった。 */
.hand-wrap .preview-zoom,
.preview-hand .preview-zoom {
  z-index: 5;
  width: 46px;
  height: 46px;
  top: auto;
  bottom: 12px;
  right: 18px;
}
.hand-wrap .preview-zoom svg { width: 21px; height: 21px; }