/* giko 技工依頼 入力画面（v2-B） */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1c2430; --sub:#5d6b7a; --line:#dfe4ea;
  --key:#2e8fa0; --key-d:#237482; --warm:#f2a65a; --err:#c0392b; --ok:#2f8f4e;
  --r:14px;
}
*{box-sizing:border-box}
/* ⚠️ 消してはいけない規則。
   HTMLの hidden 属性は UAスタイルの [hidden]{display:none} で効くが、
   .cam{display:flex} のような作者側の指定の方が詳細度で勝つため、hidden が無効化される。
   （2026-07-30 実機不具合：hidden 指定のカメラ画面が常時最前面に出てPIN画面を覆い、
     「やめる」を押しても hidden=true にするだけなので閉じられなかった）
   画面の出し分けは全て hidden 属性で行うので、ここで必ず勝たせる。 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2{margin:0}
input,textarea,select,button{font:inherit;color:inherit}
input[type=text],input[type=date],input[type=search],input[type=password],textarea{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:10px;
  background:#fff; -webkit-appearance:none;
}
input:focus,textarea:focus{outline:2px solid var(--key); outline-offset:1px; border-color:transparent}
label{display:block; margin:14px 0 6px; font-size:14px; font-weight:600; color:var(--sub)}
label.sm{font-size:13px; font-weight:500}
.hint{margin:8px 0 0; font-size:13px; color:var(--sub)}
.hint.sm{font-size:12px}
.err{color:var(--err); font-size:14px; min-height:1.4em; margin:8px 0 0}
.req{color:var(--err); font-size:12px; font-weight:700; margin-left:6px}
.opt{margin-left:8px; font-size:12px; font-weight:500; color:var(--sub)}

/* ---- 不具合の知らせ（黙って失敗しないため）---- */
.alert{position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top));
  background:#fdf1ef; color:#8a2b1f; border-bottom:2px solid var(--err); font-size:14px; line-height:1.5}
.alert button{flex:0 0 auto; background:none; border:0; font-size:20px; color:#8a2b1f; padding:0 4px; line-height:1}
.link{display:block; width:100%; margin-top:10px; padding:10px; background:none; border:0;
  color:var(--key-d); font-size:15px; text-decoration:underline}

/* ---- PIN ---- */
.gate{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
.gate-card{width:100%; max-width:340px; background:#fff; border-radius:var(--r); padding:28px 22px; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.07)}
.gate-icon{font-size:44px}
.gate h1{font-size:20px; margin:6px 0 10px}
.gate-note{font-size:14px; color:var(--sub); margin:0 0 18px}
.gate input{text-align:center; letter-spacing:.5em; font-size:26px; padding:14px}
.gate-hint{font-size:12px; color:var(--sub); margin:14px 0 0}

/* ---- 共通 ---- */
.bar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  background:var(--key); color:#fff; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top))}
.bar-title{font-weight:700}
.floor{background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:999px; padding:6px 14px; font-size:14px}
.card{background:var(--card); margin:12px; padding:16px; border-radius:var(--r); box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card h2{font-size:16px; display:flex; align-items:center; margin-bottom:4px}
.num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:8px;
  background:var(--key); color:#fff; border-radius:50%; font-size:13px}
.sub{margin:14px 0 6px; font-size:13px; font-weight:600; color:var(--sub)}
.row{display:flex; gap:12px}
.row>div{flex:1; min-width:0}

button{cursor:pointer}
.primary{width:100%; padding:16px; border:0; border-radius:12px; background:var(--key); color:#fff; font-size:17px; font-weight:700}
.primary:disabled{background:#b8c2cb}
.submit{margin:4px 12px 8px; width:calc(100% - 24px)}
.ghost{background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px}
.blocker{margin:0 16px; color:var(--err); font-size:14px; text-align:center}
.ver{text-align:center; font-size:11px; color:#aab3bc; margin:6px 0 20px}

/* ---- チップ ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-block; padding:10px 16px; min-height:44px; line-height:24px;
  border:1px solid var(--line); border-radius:999px; background:#fff; font-size:15px; user-select:none}
.chip.on{background:var(--key); border-color:var(--key); color:#fff; font-weight:700}

/* ---- 撮影 ---- */
.shot{width:100%; padding:18px; border:2px dashed var(--key); border-radius:12px; background:#f0f8f9;
  color:var(--key-d); font-size:17px; font-weight:700}
.ocr-status{margin-top:12px; padding:12px; border-radius:10px; background:#f0f8f9; font-size:14px}
.ocr-status.ng{background:#fdf1ef; color:var(--err)}
.spin{display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  border:2px solid #c9dde1; border-top-color:var(--key); border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.photo{width:100%; padding:14px; border:1px dashed var(--line); border-radius:10px; background:#fafbfc; color:var(--sub)}
#photoPreview{display:block; width:100%; margin-top:10px; border-radius:10px}

/* ---- 種別 ---- */
.guess{border:2px solid var(--warm); border-radius:12px; padding:14px; margin-bottom:12px; background:#fff8ef}
.guess-lead{margin:0 0 8px; font-size:13px; color:var(--sub)}
.guess-btn{width:100%; padding:16px; border:0; border-radius:10px; background:var(--warm); color:#fff; font-size:19px; font-weight:700}
.guess-alt{display:block; width:100%; margin-top:8px; background:none; border:0; color:var(--sub); font-size:14px; text-decoration:underline}
.chosen{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:2px solid var(--key); border-radius:12px; padding:14px; background:#f0f8f9}
.chosen-name{font-size:19px; font-weight:700}
.chosen-meta{font-size:12px; color:var(--sub)}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.grid button{padding:14px 10px; min-height:52px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:15px}
details{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
summary{font-size:14px; color:var(--key-d); font-weight:600; padding:6px 0}
#typeSearch{margin:8px 0}
.cat{margin-top:10px}
.cat-name{font-size:13px; font-weight:700; color:var(--sub); margin:10px 0 6px}
.cat .grid button{font-size:14px; min-height:48px}

/* ---- 歯式（十字配置 / Zsigmondy式）----
   上下2段・中央の縦線で左右を分ける、歯科で見慣れた並び。
   1歯の横幅は狭くなるが、高さ(48px)で押しやすさを稼ぎ、選択内容は図の下にテキストでも出す。 */
.teeth{margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:6px 4px; background:#fcfdfd}
.teeth-head,.teeth-foot{display:flex; justify-content:space-between; padding:0 6px; font-size:11px; color:var(--sub)}
.arch{display:flex; align-items:stretch}
/* 上下の境界線。:first-of-type は .teeth-head(div) に取られるので隣接セレクタで指定する */
.arch + .arch{border-top:2px solid #9fb0bb}
.side{display:flex; gap:2px; flex:1 1 0; min-width:0; padding:4px 2px}
.side:first-child{border-right:2px solid #9fb0bb}
.tooth{flex:1 1 0; min-width:0; height:48px; padding:0; border:1px solid var(--line); border-radius:6px;
  background:#fff; font-size:13px; color:var(--ink)}
.tooth.w8{background:#f4f6f8}
.tooth.on{background:var(--key); border-color:var(--key); color:#fff; font-weight:700}
.tooth.auto{background:#a8d3db; border-color:#a8d3db; color:#0d3c44}
.wisdom{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:13px; font-weight:500; color:var(--sub)}
.wisdom input{width:20px; height:20px}
.teeth-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.teeth-actions button{flex:1; min-width:110px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px}
.part-out{margin:12px 0 0; padding:10px 12px; background:#f0f8f9; border-radius:10px; font-weight:700}
.part-out.empty{background:#f4f6f8; color:var(--sub); font-weight:400}
.warn{margin:8px 0 0; padding:10px 12px; background:#fdf6ec; border-left:4px solid var(--warm); border-radius:6px; font-size:14px}

/* ---- クラスプ（歯式＋種類の繰り返し）---- */
.pairs{display:flex; flex-direction:column; gap:8px}
.pair{border:1px solid var(--line); border-radius:10px; padding:10px; background:#fcfdfd}
.pair-head{display:flex; align-items:center; gap:8px}
.pair-tooth{flex:1; min-height:44px; border:1px solid var(--key); border-radius:8px; background:#fff;
  color:var(--key-d); font-size:16px; font-weight:700}
.pair-tooth.empty{border-style:dashed; color:var(--sub); font-weight:400}
.pair-del{flex:0 0 auto; width:44px; height:44px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--err); font-size:18px}
.pair-body{margin-top:8px}
.pair .teeth{margin-top:8px}
.pair .tooth{height:38px; font-size:12px}
.pair-add{width:100%; margin-top:10px; padding:12px; border:1px dashed var(--key); border-radius:10px;
  background:#f0f8f9; color:var(--key-d); font-size:15px; font-weight:600}

/* ---- 追加項目 ---- */
.carried{margin-bottom:12px; padding:10px 12px; background:#f0f8f9; border-radius:10px; font-size:13px; color:var(--key-d)}
.field{margin-top:14px}
.field-label{font-size:14px; font-weight:600; color:var(--sub); margin-bottom:6px}
.field-note{font-size:12px; color:var(--sub); margin:4px 0 0}

/* ---- 完了 ---- */
.done{position:fixed; inset:0; background:rgba(28,36,48,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:40}
.done-card{width:100%; max-width:360px; background:#fff; border-radius:18px; padding:24px; text-align:center}
.done-lead{margin:0; font-size:18px; font-weight:700; color:var(--ok)}
.tagwrap{margin:16px 0; padding:14px; border:2px dashed var(--warm); border-radius:14px; background:#fff8ef}
.tag-note{margin:0; font-size:13px; color:var(--sub)}
.tag{font-size:72px; line-height:1.1; font-weight:800; color:var(--warm)}
.done-who{margin:8px 0 0; font-size:15px; font-weight:600}
.done-vendor{margin:4px 0 6px; font-size:14px; color:var(--sub); white-space:pre-line}
.done-time{margin:0 0 16px; font-size:11px; color:#aab3bc}
/* 待っている間は文字タグの位置に読み込み表示を置く（偽の進捗は出さない。値はサーバーが決めた後に入る）*/
.tag-wait{display:inline-block; width:44px; height:44px; margin:12px 0;
  border:5px solid #f0dcc2; border-top-color:var(--warm); border-radius:50%; animation:sp .9s linear infinite}

/* ---- カメラ ---- */
.cam{position:fixed; inset:0; background:#000; z-index:60; display:flex; flex-direction:column}
#camVideo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cam-guide{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.cam-frame{width:88%; aspect-ratio:4/3; border:3px solid #fff; border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.cam-help{position:absolute; left:0; right:0; bottom:120px; margin:0; text-align:center; color:#fff; font-size:14px; text-shadow:0 1px 3px #000}
.cam-bar{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom))}
.cam-bar .ghost{background:rgba(255,255,255,.15); border:0; color:#fff}
.cam-spacer{width:86px}
.shutter{width:72px; height:72px; border-radius:50%; background:#fff; border:5px solid rgba(255,255,255,.4)}

/* ---- トースト ---- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#1c2430; color:#fff; padding:12px 20px; border-radius:999px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:70; max-width:88vw; text-align:center}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

@media (min-width:640px){
  main{max-width:640px; margin:0 auto}
  .grid{grid-template-columns:repeat(3,1fr)}
}
/* 320px級の狭い端末では、歯式の1歯が30px前後まで痩せるのでカードの余白を削って稼ぐ
   （それでも34px前後。36pxを満たせるのは375px以上） */
@media (max-width:374px){
  .card{margin:12px 8px; padding:14px 8px}
  .quad-row{gap:2px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }