/* 追加画面案 v0.2（Codex作・2026-09-28けん採用）から写した見た目。v0.1 の画面に足す分だけ。
   値は design/screen_additions_v0.2.html のCSSのとおり。どれがどの行か：tests/test_js.py が一致を確かめる。 */

/* C 本物の写真の周りは無地の濃い背景・見本の床の帯は出さない（v0.2 .photo の値） */
.sample-photo.has-photo{background:#263b48;border:1px solid #b8c7c8}
.sample-photo.has-photo::after{display:none}
/* D 縦写真だけ高く表示（v0.2 縦写真画面の値） */
.sample-photo.has-photo.portrait{height:min(55dvh,480px);min-height:330px}

/* I 押せない前へ／次へ */
.candidate-nav button:disabled{background:#eef2f1;color:#9baaaa;border-color:#e1e9e7;cursor:default}
/* G 選んだ仕分け・押せない仕分け */
.classify button.selected{background:var(--teal);border-color:var(--teal-dark);color:#fff}.classify button:disabled{background:#eef2f1;color:#a9b5b5}

/* F 拡大 */
.zoom-crop{height:420px;position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:linear-gradient(110deg,#ebe7dc,#ded7ca);display:grid;place-items:center}
.zoom-help{font-size:12px;line-height:1.6;color:var(--muted);margin-top:11px}

/* H 候補0件・写真エラー・処理中・取り消し */
.notice{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 16px;margin-top:16px;text-align:center;line-height:1.65}
.notice strong{font-size:17px;color:var(--navy)}.notice p{font-size:13px;color:var(--muted);margin-top:8px}
.loading-box{height:290px;background:#e3ebe9;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;text-align:center;padding:25px}
.spinner{width:39px;height:39px;border-radius:50%;border:4px solid #b9d6d2;border-top-color:var(--teal);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.loading-box strong{color:var(--navy)}.loading-box span{font-size:12px;color:var(--muted);line-height:1.6}
.banner{border-radius:10px;border:1px solid #a5c7c3;background:#e7f4f1;color:#17554f;padding:11px 13px;font-size:12px;font-weight:700;margin-bottom:12px}

/* K 版表示 */
.version{display:block;margin-top:7px;font-variant-numeric:tabular-nums}

button:focus-visible,a:focus-visible{outline:3px solid #ffae34;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

/* ここから下は動きのための指定（見た目は変えない） */
.banner[hidden]{display:none}
/* 写真の結果がまだ無い間（app.js が html に has-state を付けるまで）は、結果・拡大・候補0件の画面を出さず開始画面を出す。
   JSの読み込みに失敗しても、原本の見本（仮の写真と「候補 2 件」）が本物の結果のように見えないようにする（Codex k2v8【要修正】1） */
html:not(.has-state) #result,html:not(.has-state) #zoom,html:not(.has-state) #empty{display:none !important}
html:not(.has-state) .phone:has(#result:target,#zoom:target,#empty:target) #home{display:flex}
.zoom-crop{touch-action:none}
.zoom-crop img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none}