/* 不動産カメラ Phase 1 */
:root{
  --paper:#fbfaf7;
  --ink:#2b2f36;
  --ink-soft:#8a8f9b;
  --accent:#2e5fa3;
  --accent-soft:#e7edf7;
  --card:#ffffff;
  --line:#e7e4dc;
  --ok:#2f8a5b;
  --wait:#b07a1e;
  --danger:#c0392b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.6;
  overscroll-behavior:none;
}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;}
button{
  font:inherit;border:none;background:none;color:inherit;cursor:pointer;padding:0;
}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ヘッダー */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 10px;
  border-bottom:1px solid var(--line);
}
.topbar .title{font-weight:700;font-size:1.05rem;color:var(--accent);}
.topbar .back{font-size:.95rem;color:var(--accent);padding:6px 10px 6px 0;}
.chip{
  font-size:.75rem;background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:3px 12px;white-space:nowrap;
}
.chip.warn{background:#f6ecd7;color:var(--wait);}
.chip.err{background:#f8e3e0;color:var(--danger);}

.screen{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px;}

/* 物件カード */
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;text-align:left;width:100%;display:block;
}
.pcard:active{background:var(--accent-soft);}
.pcard .pname{font-weight:700;font-size:1.05rem;}
.pcard .psub{font-size:.8rem;color:var(--ink-soft);}

/* ボタン */
.bigbtn{
  border-radius:14px;padding:15px 16px;text-align:center;font-weight:700;
  background:var(--accent);color:#fff;font-size:1.02rem;width:100%;
}
.bigbtn:active{opacity:.85;}
.bigbtn.ghost{background:var(--accent-soft);color:var(--accent);}
.bigbtn.danger{background:#f8e3e0;color:var(--danger);}
.bigbtn[disabled]{opacity:.45;}

.modebtn{
  background:var(--card);border:1.5px solid var(--accent);border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
}
.modebtn:active{background:var(--accent-soft);}
.modebtn b{color:var(--accent);font-size:1.05rem;}
.modebtn small{color:var(--ink-soft);font-size:.78rem;}

/* フォーム */
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:.8rem;font-weight:700;color:#5a5f6b;}
.field label em{font-style:normal;color:var(--danger);font-size:.72rem;margin-left:4px;}
.field input,.field select,.field textarea{
  font:inherit;background:var(--card);border:1.5px solid #d8d5cc;border-radius:10px;
  padding:11px 13px;color:var(--ink);width:100%;
}
.field input:focus{border-color:var(--accent);outline:none;}
details.fold{background:#f1efe8;border-radius:12px;padding:4px 14px;}
details.fold summary{padding:8px 0;color:#6b7180;font-size:.9rem;cursor:pointer;}
details.fold .inner{display:flex;flex-direction:column;gap:12px;padding:4px 0 14px;}

/* 設定行 */
.srow{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.srow .lbl{font-size:.9rem;font-weight:700;}
.srow .val{font-size:.8rem;color:var(--ink-soft);text-align:right;}
.srow .val.ok{color:var(--ok);font-weight:700;}
.srow .val.warn{color:var(--wait);font-weight:700;}
.hint{font-size:.8rem;color:var(--ink-soft);margin:0;}

/* 撮影画面 */
.camroot{
  position:fixed;inset:0;background:#101216;color:#eee;
  display:flex;flex-direction:column;z-index:10;
}
.cambar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;
}
.camchip{font-size:.8rem;background:#232a35;color:#cfd6e2;border-radius:999px;padding:4px 12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;}
.badges{display:flex;gap:6px;}
.badge{font-size:.78rem;border-radius:999px;padding:3px 10px;white-space:nowrap;}
.badge.up{background:#1f3a2c;color:#7fd6a4;}
.badge.wait{background:#3a2f1a;color:#e6bd6a;}
.badge.err{background:#442222;color:#f0a09a;}
.finder{flex:1;position:relative;overflow:hidden;margin:0 10px;border-radius:14px;background:#000;}
.finder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.finder .camerr{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#aab2c0;font-size:.9rem;padding:24px;
}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s;}
.flash.on{opacity:.7;transition:none;}
.camctrl{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px calc(env(safe-area-inset-bottom) + 22px);
}
.thumbwrap{width:52px;height:52px;position:relative;}
.thumbwrap img{
  width:52px;height:52px;object-fit:cover;border-radius:10px;border:1.5px solid #454c58;
}
.thumbwrap .tbadge{
  position:absolute;right:-6px;top:-8px;font-size:.68rem;border-radius:999px;
  min-width:17px;height:17px;padding:0 3px;display:flex;align-items:center;justify-content:center;
}
.shutter{
  width:74px;height:74px;border-radius:50%;border:5px solid #fff;
  background:rgba(255,255,255,.15);
}
.shutter:active{background:rgba(255,255,255,.5);}
.endbtn{
  font-size:.88rem;color:#cfd6e2;border:1px solid #454c58;border-radius:999px;padding:9px 18px;
}

/* トースト */
#toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 28px);
  transform:translateX(-50%);
  background:#2b2f36;color:#fff;border-radius:999px;padding:9px 20px;
  font-size:.85rem;z-index:99;max-width:88vw;text-align:center;
}
@media (prefers-reduced-motion:no-preference){
  #toast{animation:toastin .2s ease-out;}
  @keyframes toastin{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}
}
.spacer{margin-top:auto;}
.center-note{text-align:center;color:var(--ink-soft);font-size:.8rem;padding:8px 0;}