.scanner {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16/9;      /* 例：横長。不要なら高さを別途指定 */
    background:#000;
    border-radius: 12px;
    overflow: hidden;
}

/* 動画はコンテナにフィット（coverなら見た目の枠と一致させやすい）*/
.scanner video {
    position: absolute; inset: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;    /* contain にしたい場合はここを変更 */
    display: block;
    border-radius: 12px;
    background:#000; 
}

/* 既存のオーバーレイをそのまま使う */
.scan-frame{
    --w: 92%;          /* 枠の幅（横長） */
    --h: 32%;          /* 枠の高さ（1Dなら25–35%目安） */
    --r: 20px;         /* 角丸半径（この枠の丸みに合わせる） */
    --gap: 6px;        /* 角から内側への退避量（クリップ防止。rより小さく） */
    --len: 42px;       /* コーナーの足の長さ */
    --b: 6px;          /* コーナーの太さ */
    --c: #ff8a2b;    /* コーナー色 */

    position: absolute;
    inset: 0;
      pointer-events: none;
    z-index: 2;
}

/* 中央のスキャン領域ボックス（暗幕だけ担当） */
.scan-frame .box{
position:absolute; left:50%; top:50%;
width:var(--w); height:var(--h); transform:translate(-50%,-50%);
border-radius:var(--r);
box-shadow:0 0 0 999vmax rgba(0,0,0,.50); /* 外側暗くする */
}

/* 角は擬似要素2枚で上下に分担（各4本＝計8本） */
.scan-frame .box::before,
.scan-frame .box::after{
    content:"";
    position:absolute; inset:0;
    /* 角丸に沿うように“内側の矩形”を基準に描画 */
    padding: var(--gap);
    border-radius: calc(var(--r) - var(--gap));
    background-clip: content-box;
}

/* 上側2角（左上/右上） */
.scan-frame .box::before{
    background:
        /* 左上 横/縦 */
        linear-gradient(var(--c), var(--c)) left  top / var(--len) var(--b) no-repeat,
        linear-gradient(var(--c), var(--c)) left  top / var(--b)   var(--len) no-repeat,
        /* 右上 横/縦 */
        linear-gradient(var(--c), var(--c)) right top / var(--len) var(--b) no-repeat,
        linear-gradient(var(--c), var(--c)) right top / var(--b)   var(--len) no-repeat;
}

/* 下側2角（左下/右下） */
.scan-frame .box::after{
    background:
        /* 左下 横/縦 */
        linear-gradient(var(--c), var(--c)) left  bottom / var(--len) var(--b) no-repeat,
        linear-gradient(var(--c), var(--c)) left  bottom / var(--b)   var(--len) no-repeat,
        /* 右下 横/縦 */
        linear-gradient(var(--c), var(--c)) right bottom / var(--len) var(--b) no-repeat,
        linear-gradient(var(--c), var(--c)) right bottom / var(--b)   var(--len) no-repeat;
}
.scan-frame .line {
    position: absolute; left: 12%; right: 12%;
    height: 2px; background: rgba(255,138,43,.95);
    animation: scan-move 2.2s linear infinite;
    display: none !important;
}

.scanner.cbs-scanner > video, .cbs-scanner > video#video {
    position: absolute; inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.scan-frame.ok { --c: #35e56b; }  /* 緑 */
.scan-frame.ng { --c: #ff5a5a; }  /* 赤 */

@keyframes scan-move{
    0%{ top: 18%; } 100%{ top: 82%; }
}

@media (orientation:portrait){
    .scan-frame{
        --h: 40%;
        --len: 34px;
        --b: 5px; 
    }

}