/* 姿勢評価カメラ — 整体サロン大空 */
/* 色はすべてここ。カメラの上に重ねる部品（--ov-*）は、どの配色でも暗い半透明のまま（映像の上で読めるように） */
:root{
  --bg:#f2f6fa; --bg2:#ffffff; --panel:#ffffff; --line:#d8e3ec;
  --ink:#16324a; --muted:#62788a; --mint:#2a8bd6; --mint-dim:#7fb6e3;
  --warn:#b87a0e; --bad:#cf4f45; --bad-line:#f0c9c4; --on-accent:#ffffff;
  --ov-bg:rgba(10,24,36,.68); --ov-bg-strong:rgba(10,24,36,.94); --ov-line:rgba(255,255,255,.22);
  --ov-ink:#ffffff; --ov-muted:#c9d6e0; --ov-accent:#7cc4ff; --before-ov:#9fd4ff; --after-ov:#7fe3c7;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
/* 配色の候補（html の data-pal で切り替え） */
html[data-pal="mint"]{ --mint:#16a389; --mint-dim:#7fcdbd; --ov-accent:#6fe3c7; }
html[data-pal="navy"]{ --mint:#1d4e89; --mint-dim:#c3982c; --ov-accent:#9cc2ef; --bg:#f5f3ee; --line:#e2ddd2; }
html[data-pal="dark"]{
  --bg:#0b1417; --bg2:#0f1d21; --panel:#14262b; --line:#23414a;
  --ink:#e9f3f2; --muted:#8fb0b3; --mint:#4fd6b8; --mint-dim:#2b7f6d;
  --warn:#e8b04b; --bad:#e8695f; --bad-line:#4a2b28; --on-accent:#06211c;
  --ov-accent:#4fd6b8; color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink); overscroll-behavior:none;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15px; line-height:1.5; -webkit-user-select:none; user-select:none;
}
#app{display:flex;flex-direction:column;height:100dvh}

/* ---------- topbar（最小限） ---------- */
#topbar{
  flex:none;padding:calc(var(--safe-t) + 5px) 12px 5px;background:var(--bg2);
  border-bottom:1px solid var(--line);
}
#apptitle{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}

/* ---------- main / tabs ---------- */
#view{flex:1;min-height:0;position:relative;overflow:hidden}
.page{position:absolute;inset:0;display:none;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
.page.on{display:flex}
#tabbar{
  display:flex;flex:none;background:var(--bg2);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
#tabbar button{
  flex:1;background:none;border:0;color:var(--muted);padding:9px 0 7px;
  font-size:10px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;
}
#tabbar button.on{color:var(--mint)}
#tabbar .ic{width:21px;height:21px}
.ic{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic .f{fill:currentColor;stroke:none}

/* ---------- camera ---------- */
#stage{
  position:relative;flex:1;min-height:0;background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* 撮影範囲。比率は常に 3:4 に固定する（BEFORE/AFTER のサイズを揃えるため） */
#frame{position:relative;overflow:hidden;background:#000}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0}
#grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#camnote{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px;color:var(--muted);
  font-size:13px;line-height:1.8;background:rgba(4,10,12,.55);color:var(--ov-muted);
}

/* 画面内オーバーレイ */
.ov{position:absolute;top:9px;display:flex;gap:6px;z-index:2}
.ov-left{left:9px;flex-direction:column;align-items:flex-start}
.ov-right{right:9px;flex-direction:column;align-items:flex-end}

.chip{
  background:var(--ov-bg);backdrop-filter:blur(6px);
  border:1px solid var(--ov-line);border-radius:999px;padding:7px 14px;
  font-size:12px;font-weight:800;color:var(--ov-ink);letter-spacing:.02em;
}
.chip.before{color:var(--before-ov)}
.chip.after{color:var(--after-ov)}
.chip.off{color:var(--ov-muted)}
.viewmenu{
  position:absolute;top:36px;left:0;min-width:150px;max-height:62vh;overflow:auto;
  background:var(--ov-bg-strong);backdrop-filter:blur(8px);
  border:1px solid var(--ov-line);border-radius:12px;padding:5px;z-index:5;
}
.viewmenu button{
  display:block;width:100%;text-align:left;background:none;border:0;color:var(--ov-ink);
  font-size:14px;font-weight:700;padding:10px 12px;border-radius:8px;
}
.viewmenu button.on{background:var(--mint);color:var(--on-accent)}
.viewmenu button.add{color:var(--ov-accent);border-top:1px solid var(--ov-line);border-radius:0 0 8px 8px;margin-top:4px}
.viewmenu hr{border:0;border-top:1px solid var(--ov-line);margin:4px 6px}

.sq{
  width:40px;height:40px;border-radius:11px;
  background:var(--ov-bg);backdrop-filter:blur(6px);
  border:1px solid var(--ov-line);color:var(--ov-muted);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.sq.on{color:var(--ov-accent);border-color:var(--ov-accent);background:var(--ov-bg-strong)}
.sq .ic{width:21px;height:21px}
.sq-label{
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--ov-bg);backdrop-filter:blur(6px);border:1px solid var(--ov-line);
  border-radius:8px;padding:4px 9px;font-size:11px;font-weight:700;color:var(--ov-ink);
}
/* 水平器（iOS のカメラと同じ見せ方）。中央の線だけが傾きと逆に回る */
#horizon{position:absolute;inset:0;pointer-events:none;z-index:1}
#horizon .hz{
  position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;
  background:rgba(255,255,255,.9);box-shadow:0 0 4px rgba(0,0,0,.8);
}
#horizon .f{width:19%}
#horizon .f.l{left:12%}
#horizon .f.r{right:12%}
#horizon .m{left:50%;width:34%;transform:translateX(-50%) rotate(0deg);will-change:transform}
#horizon.ok .hz{background:var(--after-ov);box-shadow:0 0 6px rgba(79,214,184,.75)}

/* ---------- controls ---------- */
#controls{
  flex:none;background:var(--bg2);border-top:1px solid var(--line);
  padding:8px 14px 6px;
}
.sliderow{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:11px;color:var(--muted);font-weight:600}
.sliderow label{flex:none;width:66px;line-height:1.25}
input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;
  background:var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--mint);border:3px solid var(--bg2);
}
.sliderow output{flex:none;width:62px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

.shutterwrap{display:flex;justify-content:center;padding:2px 0 4px}
#shutter{
  width:66px;height:66px;border-radius:50%;padding:0;
  background:none;border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
}
#shutter span{
  width:52px;height:52px;border-radius:50%;background:var(--ink);
  transition:transform .08s ease, background .12s ease;
}
#shutter:active span{transform:scale(.9)}
#shutter:disabled{border-color:var(--line)}
#shutter:disabled span{background:var(--line)}
#shutter.after span{background:var(--mint)}
#shutter.after{border-color:var(--mint)}

.segrow{display:flex;gap:8px}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;flex:1}
.seg button{
  flex:1;background:none;border:0;color:var(--muted);font-size:13px;font-weight:700;
  padding:8px 4px;border-radius:7px;
}
.seg button.on{background:var(--mint);color:var(--on-accent)}

/* ---------- generic ---------- */
.wrap{padding:14px 14px calc(var(--safe-b) + 20px)}
.sec-title{font-size:10px;letter-spacing:.16em;color:var(--mint-dim);font-weight:800;margin:18px 0 8px}
.sec-title:first-child{margin-top:2px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.card h3{margin:0 0 6px;font-size:14px}
.card p{margin:0;font-size:12px;color:var(--muted);line-height:1.7}
.btn{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;
}
.btn.primary{background:var(--mint);border-color:var(--mint);color:var(--on-accent)}
a.btn{display:block;text-align:center;text-decoration:none;margin-bottom:10px}
.btn.ghost{background:none}
.btn.danger{color:var(--bad);border-color:var(--bad-line)}
.btn:disabled{opacity:.45}
.btn.primary:disabled{background:var(--line);border-color:var(--line);color:var(--muted)}
.row{display:flex;gap:8px;align-items:center}
.row.end{justify-content:flex-end}
.btn.grow{flex:1;padding-left:8px;padding-right:8px;white-space:nowrap}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:40px 20px;line-height:1.9}

/* case list */
.case-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:8px;color:var(--ink);
}
.case-item b{font-size:14px;display:block}
.case-item small{color:var(--muted);font-size:11px}
.case-item .cnt{margin-left:auto;color:var(--mint);font-size:12px;font-weight:700}

/* shot grid */
.viewblock{margin-bottom:14px}
.viewblock h4{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.08em}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{
  position:relative;aspect-ratio:3/4;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:0;
}
button.slot{cursor:pointer}
button.slot::after{
  content:'保存';position:absolute;right:6px;bottom:6px;
  background:rgba(10,24,36,.78);color:var(--after-ov);font-size:10px;font-weight:800;
  padding:4px 9px;border-radius:999px;
}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot .tag{
  position:absolute;top:6px;left:6px;font-size:9px;font-weight:800;letter-spacing:.1em;
  background:rgba(10,24,36,.75);padding:3px 7px;border-radius:999px;
}
.slot .tag.b{color:var(--before-ov)}.slot .tag.a{color:var(--after-ov)}
.slot .ph{color:var(--muted);font-size:11px}
.viewblock .row{margin-top:8px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:var(--bg);z-index:50;display:none;flex-direction:column}
.modal.on{display:flex}
.modal-top{
  background:var(--bg2);
  display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 10px) 12px 10px;
  border-bottom:1px solid var(--line);flex:none;
}
.modal-top b{font-size:14px;margin-right:auto}
.modal-body{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000}
.modal-body canvas,.modal-body img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.modal-foot{flex:none;background:var(--bg2);border-top:1px solid var(--line);padding:10px 12px calc(var(--safe-b) + 10px)}

/* compare */
#cmpstage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#cmpcanvas{touch-action:none}
.hint{font-size:11px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.7}

/* input */
input[type=text]{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;color:var(--ink);font-size:15px;-webkit-user-select:text;user-select:text;
}
.note{font-size:11px;color:var(--muted);line-height:1.8}
.note b{color:var(--warn)}

/* ---------- 設定のスイッチ ---------- */
.switch{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:14px;font-weight:600;
}
.switch + .switch{border-top:1px solid var(--line)}
.switch input{
  -webkit-appearance:none;appearance:none;flex:none;
  width:48px;height:28px;border-radius:999px;background:var(--line);
  position:relative;transition:background .15s;
}
.switch input::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--muted);transition:transform .15s, background .15s;
}
.switch input:checked{background:var(--mint-dim)}
.switch input:checked::after{transform:translateX(20px);background:var(--mint)}

/* ---------- 姿勢ラインの数値 ---------- */
.readout{
  display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;
  max-height:34vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin:0;
}
.readout .k{font-weight:700;color:var(--ink)}
.readout .v{text-align:right;font-weight:700}
.readout .v.warn{color:var(--warn)}
.readout .v.ok{color:var(--mint)}
.readout .bar{position:relative;height:14px;align-self:center}
.readout .bar i{
  position:absolute;top:6px;height:2px;background:var(--line);left:0;right:0;
}
.readout .bar b{
  position:absolute;top:3px;width:8px;height:8px;border-radius:50%;
  background:var(--mint);transform:translateX(-4px);
}
.readout .bar u{position:absolute;top:1px;bottom:1px;width:1px;background:var(--muted);left:50%}
.readout .empty{grid-column:1/-1;text-align:center;padding:6px 0}

/* ---------- 記録の撮り直しバッジ ---------- */
button.slot::after{content:'開く'}
#shot-canvas{max-width:100%;max-height:100%;object-fit:contain}

/* 推定で置いた点は色を変えて「要確認」と分かるようにする */
.readout .k.est{color:var(--muted)}
.readout .k.est::after{content:' 推定';font-size:9px;color:var(--warn);font-weight:700}

/* 撮影する枠（設定） */
.slotfix{font-size:13px;font-weight:700;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.slotfix small{color:var(--muted);font-weight:600;margin-left:4px}
.slotrow{display:flex;gap:6px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.slotrow input[type=text]{flex:1;min-width:0}
.slotrow .seg{flex:0 0 auto}
.slotrow .seg button{padding:7px 8px;font-size:12px;white-space:nowrap}
.slotrow .btn{padding:8px 10px}
#slot-input{flex:1;min-width:0}

/* ---------- ネットが無い所で使う（検出の部品を端末に保存） ---------- */
.modelrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.modelrow #model-status{flex:1;min-width:170px;font-size:13px;font-weight:700}
.modelrow #model-status.ok{color:var(--mint)}
.modelrow #model-status.warn{color:var(--warn)}

/* ---------- iPad など広い画面（お客様と一緒に画面を見る・指で押しやすく） ---------- */
@media (min-width: 700px) {
  body { font-size: 16px; }
  .page .wrap { max-width: 760px; margin: 0 auto; width: 100%; }
  .chip { font-size: 14px; padding: 9px 17px; }
  .sq { width: 50px; height: 50px; border-radius: 13px; }
  .sq .ic { width: 25px; height: 25px; }
  .sq-label { font-size: 13px; max-width: 180px; }
  .ov { top: 12px; gap: 8px; }
  .ov-left { left: 12px; } .ov-right { right: 12px; }
  .viewmenu { min-width: 190px; }
  .viewmenu button { font-size: 16px; padding: 12px 14px; }
  #shutter { transform: scale(1.25); margin: 8px 0; }
  #tabbar button { font-size: 12px; padding: 11px 0 9px; }
  #tabbar .ic { width: 25px; height: 25px; }
  #apptitle { font-size: 12px; }
}

/* 記録の一覧の上で人を足す */
.addcase{display:flex;gap:8px;align-items:center;margin:2px 0 6px}
.addcase input[type=text]{flex:1;min-width:0}
.addcase .btn{flex:none;white-space:nowrap}
/* 自由枠の見出し */
.slothead{font-size:13px;font-weight:800;color:var(--ink);padding:10px 0 2px}
.slothead small{color:var(--muted);font-weight:600;margin-left:6px;font-size:11px}

/* 患者の画面の一番下の「＋ 自由枠を追加」 */
.addslot{margin:4px 0 14px}
.addslot-btn{width:100%;border-style:dashed;color:var(--mint);background:transparent;padding:12px}
.addslot .addcase .btn{padding:10px 12px}
/* スイッチの「入」の色は、どの配色でも目立つ色の薄い版にする */
.switch input:checked{background:color-mix(in srgb, var(--mint) 35%, var(--line))}

/* まだ撮っていない欄には「開く」の札を出さない */
button.slot[data-new]::after{display:none}

/* 自由枠の見出し（名前を変える） */
.viewblock h4.vhead{display:flex;align-items:center;gap:8px}
.viewblock h4 .rename{margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;color:var(--mint);font-size:11px;font-weight:700;padding:4px 10px}
.viewblock h4 .addcase{flex:1}