/* ==========================================================================
   バーコードスキャン用カメラガイド枠の共通CSS（高速バーコードスキャナー
   /scanner/ で確立したデザインを一本化したもの）。

   以前は my-library/scan.html が /scanner/css/style.css を丸ごと読み込んで
   間借りしており（スキャナー用の3行のCSSのためだけに、scanner専用のボタン
   スタイル等まで巻き添えで読み込んでいた）、依存関係として不透明だった。
   このファイルだけを読み込めば、どのアプリでも同じカメラガイド枠が使える。

   使い方: <div class="camera-wrap"><video id="video-preview"></video>
             <div class="scan-overlay scan-area--narrow">
               <div class="scan-laser"></div>
               <div class="scan-hint">ガイド文言</div>
             </div></div>
   scan-area--narrow / --medium / --full でガイド枠の大きさを切り替える。
   スキャン成功時は .scan-overlay に .success を、重複/警告時は .warning を
   一時的に付与する。
========================================================================== */

.camera-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-wrap #video-preview,
.camera-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-overlay {
  position: absolute;
  border: 2px solid #38b2ac;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scan-area--narrow { width: 85%; height: 25%; }
.scan-area--medium { width: 85%; height: 50%; }
.scan-area--full { width: 92%; height: 85%; }

.scan-overlay.success {
  border-color: #48bb78;
  background: rgba(72, 187, 120, 0.15);
}

.scan-overlay.warning {
  border-color: #dd6b20;
  background: rgba(221, 107, 32, 0.2);
}

.scan-laser {
  height: 2px;
  background: #e53e3e;
  box-shadow: 0 0 8px #e53e3e;
  animation: barcode-scan-core-laser 1.8s infinite ease-in-out;
}

@keyframes barcode-scan-core-laser {
  0% { transform: translateY(0); }
  50% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}

.scan-hint {
  position: absolute;
  bottom: -32px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}