/* 記録画面（レシート・手入力・よく使う） */
body.on-rec .snap-fab{display:none!important}
.rec-tabs{display:flex;gap:6px;margin:0 0 12px}
.rec-tabs button{flex:1;min-height:46px;border:3px solid var(--deep);border-radius:12px;background:#fff;color:var(--deep);font-weight:900;font-size:16px;cursor:pointer}
.rec-tabs button[aria-pressed="true"]{background:var(--deep);color:#fff}
.rec-pane{max-width:560px;margin:0 auto}
.rec-cam{position:relative;height:60vh;height:60dvh;min-height:300px;max-height:620px;background:#0b1530;border-radius:16px;overflow:hidden}
.rec-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b1530}
.rec-frame{position:absolute;left:6%;right:6%;top:5%;bottom:5%;border:3px solid var(--yellow);border-radius:12px;box-shadow:0 0 0 999px rgba(11,21,48,.45);pointer-events:none}
.rec-hint{position:absolute;left:0;right:0;top:8px;text-align:center;color:#fff;font-weight:900;font-size:13px;text-shadow:0 1px 3px #000;padding:0 56px}
.rec-torch{position:absolute;right:10px;top:10px;min-height:40px;padding:0 12px;border:2px solid #fff;border-radius:20px;background:rgba(13,44,102,.75);color:#fff;font-weight:900;cursor:pointer}
.rec-torch[aria-pressed="true"]{background:var(--yellow);color:var(--deep);border-color:var(--yellow)}
.rec-shutter{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;border:5px solid var(--yellow);background:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.rec-shutter img{width:36px;height:36px}
.rec-shutter:disabled{opacity:.45;cursor:default}
.rec-shutter:active{transform:translateX(-50%) scale(.94)}
.rec-nocam{display:grid;gap:12px;justify-items:center;text-align:center;padding:28px 16px;background:#fff;border:3px solid var(--deep);border-radius:16px}
.rec-nocam .btn{width:100%;min-height:72px;font-size:20px;font-weight:900}
.rec-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.rec-parts{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.rec-parts figure{margin:0;flex:none;text-align:center;font-size:12px;font-weight:900}
.rec-parts img{display:block;width:64px;height:84px;object-fit:cover;border-radius:8px;border:2px solid var(--deep);background:#eee}
.rec-amt{font-family:var(--f-d);font-size:40px;text-align:right;padding:8px 14px;background:#fff;border:3px solid var(--deep);border-radius:14px;min-height:68px;line-height:1.3;overflow:hidden;white-space:nowrap}
.rec-amt small{font-size:18px;margin-left:4px}
.rec-seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.rec-seg button{flex:1;min-height:44px;border:2px solid var(--deep);border-radius:10px;background:#fff;color:var(--deep);font-weight:900;cursor:pointer;padding:0 8px}
.rec-seg button[aria-pressed="true"]{background:var(--yellow)}
.rec-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.rec-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;padding:4px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--fg);font-size:11px;font-weight:700;line-height:1.25;cursor:pointer;word-break:break-all}
.rec-cat img{width:32px;height:32px}
.rec-cat[aria-pressed="true"]{border-color:var(--deep);background:var(--yellow)}
.rec-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.rec-keys button{min-height:58px;border:2px solid var(--deep);border-radius:12px;background:#fff;color:var(--deep);font-size:24px;font-weight:900;cursor:pointer}
.rec-keys button:active{background:var(--yellow)}
.rec-keys .rec-del{font-size:18px;background:#eef4ff}
.rec-keys .rec-ok{grid-column:1/-1;background:var(--deep);color:#fff;min-height:64px;font-size:22px}
.rec-done{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.rec-tpl{display:flex;align-items:center;gap:8px;margin:6px 0}
.rec-tpl .rec-use{flex:1;display:flex;justify-content:space-between;gap:8px;text-align:left;min-height:56px;padding:6px 12px;border:2px solid var(--deep);border-radius:12px;background:#fff;color:var(--deep);font-weight:900;cursor:pointer}
.rec-tpl .rec-use small{display:block;font-weight:500;color:var(--soft)}
@media (min-width:821px){.rec-cam{height:480px}}

.rec-more{margin-top:10px;border:2px solid var(--line);border-radius:12px;padding:8px 12px}
.rec-more summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}

/* 撮影中は全画面：背景はカメラの映像だけ。上と下に、半透明のボタンを重ねる */
body.cam-full{overflow:hidden}
body.cam-full .side,body.cam-full .snap-fab{display:none !important}
body.cam-full .rec-cam{position:fixed;inset:0;z-index:60;height:100vh;height:100dvh;max-height:none;min-height:0;border-radius:0;background:#000}
body.cam-full .rec-frame{left:7%;right:7%;top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));box-shadow:0 0 0 999px rgba(0,0,0,.28);border-radius:14px}
.rec-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))}
.rec-top .rec-hint{position:static;flex:1;text-align:center;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 3px #000;background:none;transform:none}
.rec-tbtn{min-height:44px;padding:0 14px;border-radius:99px;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.rec-tbtn[aria-pressed="true"]{background:var(--yellow);color:var(--deep);border-color:var(--yellow)}
.rec-bot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55))}
.rec-bot .rec-shutter{position:static;transform:none}
.rec-bot .rec-shutter:active{transform:scale(.94)}
.rec-bot .rec-ctl{margin:0;justify-content:center}
.rec-bot .rec-ctl .note{display:none}
.rec-bot .rec-ctl .chip,.rec-bot .rec-ctl .btn{background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.85)}
.rec-bot .rec-ctl .chip[aria-pressed="true"]{background:var(--yellow);color:var(--deep);border-color:var(--yellow)}
.rec-bot .rec-ctl .btn.pri{background:var(--blue);border-color:#fff}
.rec-bot .msg{color:#fff;text-shadow:0 1px 3px #000;margin:0}
.rec-bot .rec-parts{margin:0}
.rec-top .rec-hint{padding:0}

/* のりしろ：前の写真の下の端（枠の高さの2割）を、枠の上にうすく重ねる */
.rec-ghost{position:absolute;left:0;right:0;top:0;height:20%;background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;opacity:.45;border-bottom:3px dashed var(--yellow);border-radius:10px 10px 0 0;pointer-events:none}
.rec-ghost span{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:99px;padding:2px 10px}

body.cam-full .rec-cam.long .rec-frame{bottom:calc(260px + env(safe-area-inset-bottom,0px))}
.rec-bot .rec-parts{display:flex;gap:6px;justify-content:center}
.rec-bot .rec-parts figure{margin:0;display:flex;flex-direction:column;align-items:center}
.rec-bot .rec-parts img{width:34px;height:48px;object-fit:cover;border:2px solid #fff;border-radius:4px}
.rec-bot .rec-parts figcaption{font-size:10px;color:#fff;text-shadow:0 1px 2px #000}

/* シャッターの左にライト（左右の幅をそろえて、シャッターを真ん中に） */
.rec-shot-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%}
.rec-shot-row .rec-torch-btn{justify-self:end}