/* BTPhoto — ビックツリー画像総合アプリ */
:root {
  /* 2026-09-19 森さん指示で薄い黄色に（それまでは濃い緑） */
  --bg:#fbf6d8; --bg2:#f6efc8; --card:#fffdf0; --card2:#f2e9bf; --line:#ddd0a0;
  --text:#2a2a1c; --sub:#736b48; --green:#2e9e5b; --green2:#1d7a42; --blue:#2f7fd4; --amber:#e8b04b; --red:#d14b4b;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { font-family:-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.5; overscroll-behavior-y:none; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
input, select, textarea { font-size:16px; }   /* iOS の勝手な拡大止め */
a { color:var(--blue); }
.hidden { display:none !important; }

/* ===== ヘッダー ===== */
/* z-index 45＝写真ビューワー(40)より前。写真を見ている間もタブを押せる（2026-09-28 森さん指示）。
   まとめ印刷(55)・画像編集(60)・モーダル(75)より下なので、そちらは今までどおり全画面 */
#hdr { position:sticky; top:0; z-index:45; background:linear-gradient(180deg,#f3e9b0,var(--bg)); padding:calc(var(--sat) + 8px) 12px 6px; }
#hdr .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* スマホ：タブは2行目に折り返して幅いっぱい（横スクロール） */
#hdr .row #tabs { order:10; flex:1 0 100%; }
#hdr h1 { font-size:18px; font-weight:800; white-space:nowrap; }
#hdr h1 small { font-size:10px; color:var(--sub); font-weight:600; margin-left:4px; }
#hdr .sp { flex:1; }
#hdr .ib { width:40px; height:40px; border-radius:12px; background:var(--card2); font-size:18px; display:flex; align-items:center; justify-content:center; }
#hdr .me { padding:0 12px; height:40px; border-radius:12px; background:var(--card2); font-size:13px; font-weight:700; white-space:nowrap; }
#hdr .ib.on { background:var(--blue); color:#fff; }
#searchRow { display:flex; gap:6px; margin-top:8px; }
#search { flex:1; min-width:0; height:42px; border-radius:12px; border:2px solid var(--blue); background:var(--card); padding:0 12px; }
#searchClear { height:42px; padding:0 14px; border-radius:12px; background:var(--card2); font-weight:700; white-space:nowrap; }
.qchip { display:flex; align-items:center; gap:8px; margin:8px 0; padding:8px 12px; border-radius:12px; background:#e3efff; border:1px solid var(--blue); font-size:13.5px; }
.qchip .t { flex:1; min-width:0; }
.qchip b { color:#15508f; }
.qchip button { margin-left:auto; padding:6px 12px; border-radius:999px; background:var(--blue); color:#fff; font-weight:700; font-size:13px; }
.hstrip { display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.hstrip::-webkit-scrollbar { display:none; }
.hstrip .cell { flex:0 0 118px; width:118px; height:118px; }
#tabs { display:flex; gap:6px; margin-top:8px; overflow-x:auto; scrollbar-width:none; min-width:0; }
#tabs::-webkit-scrollbar { display:none; }
#tabs button { flex:0 0 auto; padding:9px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:14px; font-weight:700; white-space:nowrap; }
#tabs button.on { background:var(--green); border-color:var(--green); color:#fff; }
#tabs button.add { background:var(--card2); border-color:var(--green2); color:var(--green2); }

/* ===== 共通部品 ===== */
.wrap { padding:6px 12px calc(var(--sab) + 90px); }

/* ===== PC（900px以上）：ディスプレイの幅を全部使う =====
   見出し行にタブを同居させ、カード・写真は列を増やして横いっぱいに並べる。 */
@media (min-width:900px) {
  #hdr { padding:10px 24px 8px; }
  #hdr .row { flex-wrap:nowrap; gap:14px; }
  #hdr .row #tabs { order:0; flex:0 1 auto; margin-top:0; margin-left:10px; }
  #hdr h1 { font-size:20px; }
  .wrap { padding:8px 24px calc(var(--sab) + 90px); }
  .cards { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
  .grid.big { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .hstrip .cell { flex:0 0 150px; width:150px; height:150px; }
  #map { height:calc(100vh - 118px); }
  .sitehd h2 { font-size:22px; }
}
@media (min-width:1800px) {
  .cards { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
  .grid.big { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
  .hstrip .cell { flex:0 0 170px; width:170px; height:170px; }
}
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.chip { padding:7px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:600; white-space:nowrap; }
.chip.on { background:var(--green); border-color:var(--green); color:#fff; }
.chip .n { color:var(--sub); font-weight:400; margin-left:3px; }
.chip.on .n { color:#dfffe8; }
.muted { color:var(--sub); font-size:13px; }
.note { color:var(--sub); font-size:13px; text-align:center; padding:30px 10px; line-height:1.7; }
.btn { padding:10px 16px; border-radius:12px; background:var(--card2); font-weight:700; font-size:14px; border:1px solid var(--line); white-space:nowrap; }
.btn.pri { background:var(--green); border-color:var(--green); color:#fff; }
.btn.warn { background:#f8dede; border-color:#e2a9a9; color:#8f2020; }
.btn:disabled { opacity:.4; }
.btn.sm { padding:7px 11px; font-size:13px; border-radius:10px; }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.spin { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:sp .8s linear infinite; vertical-align:middle; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ===== ログイン ===== */
#login { max-width:420px; margin:40px auto; padding:0 20px; }
#login h2 { font-size:22px; margin-bottom:6px; }
#login p { color:var(--sub); font-size:13px; margin-bottom:14px; line-height:1.7; }
#login input { width:100%; padding:13px; border-radius:12px; border:1px solid var(--line); background:var(--card); margin:6px 0 12px; -webkit-text-security:disc; letter-spacing:4px; }
#login .names { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
#login .names button { padding:10px 16px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-weight:700; }
#login .names button.on { background:var(--green); border-color:var(--green); color:#fff; }
#login .go { width:100%; padding:15px; border-radius:12px; background:var(--green); color:#fff; font-size:16px; font-weight:800; }
#login .err { color:#b3261e; font-size:13px; min-height:20px; margin-top:8px; }

/* ===== 現場カード ===== */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.card { background:var(--card); border-radius:14px; overflow:hidden; border:1px solid var(--line); cursor:pointer; display:flex; flex-direction:column; }
.card:active { transform:scale(.98); }
.card .cv { position:relative; aspect-ratio:4/3; background:#000; overflow:hidden; }
.card .cv img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block; }
.card .cv .n { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; }
.card .cv .k { position:absolute; left:6px; top:6px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(46,158,91,.9); color:#fff; }
.card .cv .k.bess { background:rgba(77,163,255,.9); }
.card .cv .k.noyaku { background:rgba(232,176,75,.95); color:#222; }
.card .cv .k.plant { background:rgba(224,92,92,.9); }
.card .cv .k.own { background:rgba(160,120,255,.9); }
.card .cv .k.pwg { background:rgba(120,120,120,.9); }
.card .cv .k.wind { background:rgba(18,179,166,.95); }
.smk.wind { background:#12b3a6; }

/* ===== 🌀 工事写真アルバム（風力メンテ） ===== */
.wcard .cv .nocv { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; color:#cdc08c; }
.wcard .prog { height:6px; background:#e4daad; margin:6px 10px 0; border-radius:999px; overflow:hidden; }
.wcard .prog i { display:block; height:100%; background:#12b3a6; }
.miss { color:#c0392b; }
.done { color:#177f45; }
.wgrid .cell .cap { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:3px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wgrid .cell .cap em { font-style:normal; color:#7be0a0; margin-left:6px; }
.wgrid .cell .bd { bottom:24px; }
.cell .bd .ct { background:rgba(18,179,166,.95); font-weight:800; }
.cell.miss { background:#fbe7e7; border:2px dashed #d14b4b; cursor:default; }
.cell.miss .mi { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#a83b3b; text-align:center; padding:6px; }
.cell.miss .mi b { font-size:18px; }
.cell.miss .mi small { font-size:11px; color:#9c5252; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cell.miss .mi span { font-size:10px; background:#e05c5c; color:#fff; border-radius:999px; padding:1px 8px; }
.cell.aud { background:#ddf1ef; }
.cell.aud .au { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:30px; gap:4px; }
.cell.aud .au small { font-size:11px; color:#0e7a71; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92%; }
.wauds { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:8px; }
.waud { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:13.5px; }
.waud .muted { margin-left:8px; }
.waud audio { display:block; width:100%; margin-top:6px; }

/* ===== 風力メンテ報告書（A4縦・見本 南1_2025.pdf の座標を mm に直したもの） ===== */
.page.wrep { position:relative; font-family:"Yu Mincho","MS Mincho","Hiragino Mincho ProN",serif; }
.wcover { position:absolute; inset:0; text-align:center; font-family:"Yu Gothic","Meiryo","Hiragino Sans",sans-serif; }
.wcover div { position:absolute; left:0; right:0; }
.wcover .wt1 { top:26mm; font-size:19pt; font-weight:600; }
.wcover .wt2 { top:79mm; font-size:19pt; font-weight:600; }
.wcover .wt3 { top:116mm; font-size:12pt; }
.wcover .wt4 { top:150mm; font-size:12pt; }
.wcover .wt5 { top:162mm; font-size:12pt; }
.wcover .wt6 { top:174mm; font-size:12pt; }
.wcover .wt7 { top:202mm; font-size:12pt; }
.wcover .wt8 { top:214mm; font-size:12pt; }
.wrow { position:absolute; left:0; width:100%; height:74mm; }
.wrow .wpic { position:absolute; left:0; top:0; width:92.8mm; height:73.7mm; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f4f4f4; }
.wrow .wpic img { max-width:100%; max-height:100%; width:auto; height:auto; }
.wrow .wcap { position:absolute; left:112mm; right:0; top:0; }
.wrow .wcap div { height:12.3mm; line-height:12.3mm; border-bottom:0.3mm solid #222; font-size:12pt; white-space:nowrap; overflow:hidden; padding-left:1mm; }
.wpn { position:absolute; left:0; right:0; bottom:1mm; text-align:center; font-size:8pt; color:#666; font-family:"Yu Gothic","Meiryo",sans-serif; }
/* 用紙（210×297）の中に、余白ぶん（左右12mm・上下10mm）ずらした本文箱 .wbody を置く。印刷時は @page の余白が同じ役をするので本文箱を 0 に */
.page.p.wrep { padding:0; width:210mm; height:297mm; }
.page.p.wrep .wbody { position:absolute; left:12mm; top:10mm; width:186mm; height:277mm; }

/* ===== 写真集（報告書メーカー） 2026-09-19 ===== */
.albhead { display:flex; gap:8px; align-items:center; margin:6px 0 4px; }
.albhead input { flex:1; min-width:0; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:16px; font-weight:700; }
.stat { min-height:18px; margin:0 2px 4px; }
.cell .hd { position:absolute; top:4px; right:4px; width:30px; height:30px; border-radius:9px; background:rgba(0,0,0,.62); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.cell.ph { outline:3px dashed var(--green); outline-offset:-3px; }
.cell.ph img { opacity:.25; }
.cell.drag { position:fixed; z-index:80; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.6); transform:scale(1.05); opacity:.95; }
.cell .num[data-no] { cursor:pointer; }
.alblist button { align-items:center; }
.alblist button img, .alblist button .noimg { width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#000; display:flex; align-items:center; justify-content:center; font-size:22px; }
.alblist button .tx { flex:1; min-width:0; line-height:1.35; }
.alblist button .tx b { font-size:14.5px; }
.alblist button .tx small { color:var(--sub); font-size:12px; }
.alblist button.cur { background:rgba(46,125,50,.25); }
.alblist button .del { width:36px; height:36px; border-radius:9px; background:rgba(224,92,92,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal label.chk { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); margin:8px 0 0; }
.modal label.chk.big { font-size:15.5px; font-weight:700; }
.modal label.chk input { width:20px; height:20px; accent-color:var(--green); }
.cvfields { margin-top:6px; border:1px solid var(--line); border-radius:12px; padding:6px 10px 10px; }
.cvfields.off { opacity:.35; pointer-events:none; }
.cvfields .row { margin-top:6px; }
.cvfields .row label.chk { width:112px; flex-shrink:0; margin:0; }
.cvfields .row input[type=text] { flex:1; min-width:0; }
#pr .pages { zoom:var(--prz, 1); }
@media (max-width:600px) { #pr .tb { gap:6px; } #pr .tb button { padding:8px 10px; font-size:12.5px; } #pr .tb .hint { font-size:11px; line-height:1.4; } }
/* 表紙 */
.page.cover .cvbox { position:absolute; left:14mm; right:14mm; top:0; bottom:0; display:flex; flex-direction:column; }
.page.cover .cvt { margin-top:70mm; text-align:center; font-size:28pt; font-weight:800; letter-spacing:6px; color:#1b5e20; padding-bottom:5mm; border-bottom:3px solid #2e7d32; min-height:16mm; }
.page.cover .cvtab { width:100%; border-collapse:collapse; margin-top:22mm; font-size:12.5pt; }
.page.cover .cvtab td { border:1px solid #999; padding:3mm 4mm; }
.page.cover .cvtab td.l { background:#eef5ea; width:38mm; font-weight:700; color:#333; }
.page.cover .cvco { margin-top:auto; margin-bottom:22mm; text-align:right; font-size:14pt; font-weight:700; color:#222; }
/* 写真ページの操作（画面だけ） */
.row3 .pic .ops { position:absolute; left:2mm; bottom:2mm; z-index:2; display:flex; gap:1.5mm; }
.row3 .pic .ops button { border-radius:8px; background:rgba(20,60,35,.86); color:#fff; font-size:9.5pt; font-weight:700; padding:1.6mm 2.6mm; }
.row3 .cap td.no { cursor:pointer; }

@media print { .page.p.wrep { width:186mm; height:275mm; } .page.p.wrep .wbody { left:0; top:0; height:275mm; } }
.card .t { padding:8px 10px 2px; font-weight:700; font-size:14px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.card .t.auto { color:var(--sub); font-weight:600; }
.card .s { padding:0 10px 9px; color:var(--sub); font-size:12px; }
.card.big { grid-column:span 2; }

/* ===== 写真グリッド ===== */
.dh { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--sub); margin:16px 2px 8px; font-weight:700; }
.dh .sp { flex:1; }
.dh .site { color:var(--green2); font-weight:600; font-size:12.5px; background:var(--card); padding:2px 8px; border-radius:999px; border:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:5px; }
.grid.big { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.cell { position:relative; aspect-ratio:1; background:#000; border-radius:10px; overflow:hidden; cursor:pointer; }
.cell img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block; }
.cell .bd { position:absolute; left:4px; bottom:4px; display:flex; gap:3px; }
.cell .bd span { background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:1px 6px; border-radius:999px; }
.cell .bd .cm { background:rgba(77,163,255,.9); }
.cell .bd .ed { background:rgba(160,120,255,.9); }
.cell .bd .vd { background:rgba(224,92,92,.9); }
.cell .by { position:absolute; right:4px; top:4px; background:rgba(0,0,0,.55); color:#ddd; font-size:10.5px; padding:1px 6px; border-radius:999px; }
.cell.sel img { outline:3px solid var(--blue); outline-offset:-3px; opacity:.6; }
.cell.sel::after { content:'✔'; position:absolute; top:6px; left:6px; background:var(--blue); color:#fff; border-radius:999px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.cell .num { position:absolute; top:6px; left:6px; background:var(--green); color:#fff; border-radius:999px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }

/* ===== 現場ページ ===== */
.sitehd { display:flex; align-items:flex-start; gap:10px; margin:4px 0 8px; }
.sitehd .back { width:40px; height:40px; border-radius:12px; background:var(--card2); font-size:18px; flex-shrink:0; }
.sitehd .ttl { flex:1; min-width:0; }
.sitehd h2 { font-size:19px; font-weight:800; line-height:1.3; word-break:break-all; }
.sitehd h2 .ed { font-size:14px; color:var(--sub); margin-left:6px; }
.sitehd .sub { color:var(--sub); font-size:12.5px; margin-top:2px; }
.sitenote { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:13.5px; color:var(--text); white-space:pre-wrap; margin:6px 0; cursor:pointer; }
.sitenote.empty { color:var(--sub); font-style:italic; }
.tools { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0 6px; }
.tools::-webkit-scrollbar { display:none; }
.tools button { flex:0 0 auto; padding:9px 13px; border-radius:11px; background:var(--card2); border:1px solid var(--line); font-size:13px; font-weight:700; white-space:nowrap; }
.tools button.on { background:var(--blue); border-color:var(--blue); color:#fff; }

/* 選択バー */
#selbar { position:fixed; left:0; right:0; bottom:0; z-index:25; padding:10px 12px calc(var(--sab) + 10px); background:rgba(251,246,216,.97); border-top:1px solid var(--line); display:none; }
#selbar.show { display:block; }
#selbar .cnt { font-size:13px; color:var(--sub); margin-bottom:6px; }
#selbar .acts { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
#selbar .acts button { flex:0 0 auto; padding:10px 13px; border-radius:11px; background:var(--card2); border:1px solid var(--line); font-size:13px; font-weight:700; white-space:nowrap; }
#selbar .acts button.pri { background:var(--green); border-color:var(--green); color:#fff; }
#selbar .acts button.warn { background:#f8dede; border-color:#e2a9a9; color:#8f2020; }

/* ===== 地図 ===== */
#map { height:calc(100vh - 150px - var(--sat)); min-height:360px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#e9e4c9; }
.smk { background:var(--green); color:#fff; border:2px solid #fff; border-radius:999px; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.5); white-space:nowrap; }
.smk.bess { background:var(--blue); }
.smk.noyaku { background:var(--amber); color:#222; }
.smk.plant { background:var(--red); }
.smk.own { background:#a078ff; }
.leaflet-container { font:inherit; }
.leaflet-popup-content { margin:10px 12px; font-size:13px; color:#111; }
.leaflet-popup-content b { font-size:14px; }
.leaflet-popup-content .op { display:inline-block; margin-top:6px; padding:6px 12px; border-radius:8px; background:var(--green); color:#fff; font-weight:700; text-decoration:none; }
.mapbtns { position:absolute; right:10px; bottom:26px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.mapbtns button { width:44px; height:44px; border-radius:12px; background:#fff; color:#222; font-size:18px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.locdot { width:16px; height:16px; border-radius:50%; background:#1e88e5; border:3px solid #fff; box-shadow:0 0 0 2px rgba(30,136,229,.4); }

/* ===== ライトボックス ===== */
/* top はヘッダーの高さぶん下げる（--lbtop は openLb() が測って入れる） */
#lb { display:none; position:fixed; left:0; right:0; bottom:0; top:var(--lbtop, 0px); z-index:40; background:#000; flex-direction:column; }
#lb.under .top { padding-top:8px; }   /* ヘッダーの下に出るときは、切り欠きぶんの余白はもう要らない */
#lb.show { display:flex; }
#lb .top { padding:calc(var(--sat) + 8px) 10px 6px; display:flex; align-items:center; gap:6px; background:linear-gradient(180deg,rgba(0,0,0,.85),transparent); position:absolute; left:0; right:0; top:0; z-index:3; }
#lb .top .ttl { flex:1; min-width:0; font-size:12.5px; color:#ddd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lb .top .ttl b { color:#fff; font-size:13.5px; }
#lb .top button, #lb .bot button { height:38px; min-width:38px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font-size:15px; font-weight:700; white-space:nowrap; }
#lb .stage { flex:1; position:relative; overflow:hidden; touch-action:none; display:flex; align-items:center; justify-content:center; }
#lb .stage img { max-width:100%; max-height:100%; transform-origin:center center; will-change:transform; user-select:none; -webkit-user-drag:none; }
#lb .stage video { max-width:100%; max-height:100%; }
#lb .stage .st { position:absolute; color:#aaa; font-size:13px; background:rgba(0,0,0,.5); padding:6px 12px; border-radius:999px; }
#lb .nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; background:rgba(0,0,0,.35); color:#fff; font-size:26px; border-radius:10px; z-index:2; display:none; }
#lb .nav.l { left:6px; } #lb .nav.r { right:6px; }
@media (hover:hover) { #lb .nav { display:block; } }
#lb .bot { position:absolute; left:0; right:0; bottom:0; z-index:3; background:linear-gradient(0deg,rgba(0,0,0,.9),transparent); padding:6px 8px calc(var(--sab) + 8px); }
#lb .bot .acts { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
#lb .bot .acts::-webkit-scrollbar { display:none; }
#lb .bot .acts button { flex:0 0 auto; }
#lb .bot .acts button.on { background:var(--blue); }
#lb .strip { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
#lb .strip::-webkit-scrollbar { display:none; }
#lb .strip img { width:52px; height:52px; object-fit:cover; border-radius:6px; flex:0 0 auto; opacity:.55; }
#lb .strip img.cur { opacity:1; outline:2px solid var(--green); outline-offset:-2px; }
#lb .panel { position:absolute; left:0; right:0; bottom:0; z-index:4; background:rgba(251,246,216,.98); color:var(--text); border-top:1px solid var(--line); max-height:62%; overflow:auto; padding:10px 14px calc(var(--sab) + 14px); display:none; border-radius:16px 16px 0 0; }
#lb .panel.show { display:block; }
#lb .panel h3 { font-size:14px; color:var(--sub); margin-bottom:6px; display:flex; align-items:center; }
#lb .panel h3 .sp { flex:1; }
#lb .panel h3 button { background:var(--card2); border-radius:999px; padding:4px 12px; font-size:12px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:13.5px; }
.kv .k { color:var(--sub); white-space:nowrap; }
.kv .v { word-break:break-all; }
.kv .v a { color:#15508f; }
.cmt { padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; display:flex; gap:8px; }
.cmt .b { flex:1; white-space:pre-wrap; word-break:break-word; }
.cmt .m { color:var(--sub); font-size:11.5px; margin-top:2px; }
.cmt .x { color:var(--sub); font-size:12px; padding:2px 6px; }
.cin { display:flex; gap:6px; margin-top:8px; }
.cin textarea { flex:1; min-height:44px; border-radius:12px; border:1px solid var(--line); background:var(--card); padding:8px 10px; resize:vertical; }
.cin button { padding:0 16px; border-radius:12px; background:var(--green); color:#fff; font-weight:700; }

/* ===== モーダル ===== */
.modal { display:none; position:fixed; inset:0; z-index:75; background:rgba(0,0,0,.75); align-items:flex-end; justify-content:center; }
.modal.show { display:flex; }
.modal .box { width:100%; max-width:560px; max-height:88%; overflow:auto; background:var(--bg2); border-radius:18px 18px 0 0; padding:14px 16px calc(var(--sab) + 16px); border:1px solid var(--line); }
@media (min-width:600px) { .modal { align-items:center; } .modal .box { border-radius:18px; } }
.modal h3 { font-size:16px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; }
.modal h3 .sp { flex:1; }
.modal h3 .x { width:34px; height:34px; border-radius:999px; background:var(--card2); font-size:16px; }
.modal label { display:block; font-size:12.5px; color:var(--sub); margin:10px 0 4px; }
.modal input[type=text], .modal input[type=number], .modal select, .modal textarea { width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); }
.modal .row { display:flex; gap:8px; align-items:center; }
.modal .list { max-height:40vh; overflow:auto; border:1px solid var(--line); border-radius:12px; margin-top:6px; }
.modal .list button { display:flex; width:100%; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); gap:8px; align-items:center; }
.modal .list button:hover { background:var(--card2); }
.modal .list button .n { color:var(--sub); font-size:12px; margin-left:auto; }
.modal .foot { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }
.drop { border:2px dashed #b7a86e; border-radius:14px; padding:18px 12px; text-align:center; color:var(--sub); font-size:13px; line-height:1.7; margin:8px 0; }
.drop.over { border-color:var(--green); background:var(--card); color:var(--text); }
.prog { height:8px; background:var(--card); border-radius:999px; overflow:hidden; margin-top:8px; }
.prog i { display:block; height:100%; background:var(--green); width:0; transition:width .2s; }
.opts { display:flex; flex-wrap:wrap; gap:6px; }
.opts button { padding:8px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:700; }
.opts button.on { background:var(--green); border-color:var(--green); color:#fff; }

/* ===== トースト ===== */
#toast { position:fixed; left:50%; bottom:calc(var(--sab) + 90px); transform:translateX(-50%); background:rgba(20,50,35,.97); color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; font-weight:700; z-index:100; display:none; max-width:92vw; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.5); }
#toast.show { display:block; }

/* ===== 編集（キャンバス） ===== */
#ed { display:none; position:fixed; inset:0; z-index:60; background:#111; flex-direction:column; }
#ed.show { display:flex; }
#ed .top { padding:calc(var(--sat) + 8px) 10px 8px; display:flex; gap:6px; align-items:center; background:#1b1b1b; }
#ed .top .sp { flex:1; }
#ed .top button { height:38px; padding:0 12px; border-radius:10px; background:#333; color:#fff; font-weight:700; font-size:13.5px; white-space:nowrap; }
#ed .top button.pri { background:var(--green); }
#ed .stage { flex:1; position:relative; overflow:hidden; touch-action:none; display:flex; align-items:center; justify-content:center; background:#000; }
#ed canvas { max-width:100%; max-height:100%; display:block; }
#edOv { position:absolute; left:0; top:0; pointer-events:none; }
#ed .tools { padding:6px 8px; background:#1b1b1b; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
#ed .tools button { flex:0 0 auto; height:40px; padding:0 12px; border-radius:10px; background:#2a2a2a; color:#fff; font-weight:700; font-size:13px; white-space:nowrap; }
#ed .tools button.on { background:var(--blue); }
#ed .opt { padding:6px 12px calc(var(--sab) + 8px); background:#1b1b1b; border-top:1px solid #333; font-size:13px; color:#ddd; min-height:52px; }
#ed .opt .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#ed .opt input[type=range] { flex:1; min-width:120px; accent-color:var(--green); }
#ed .opt input[type=text] { flex:1; min-width:140px; padding:8px 10px; border-radius:10px; border:1px solid #444; background:#222; color:#fff; }
#ed .opt .sw { width:30px; height:30px; border-radius:999px; border:2px solid #555; }
#ed .opt .sw.on { border-color:#fff; box-shadow:0 0 0 2px var(--blue); }
#ed .opt button.b { padding:7px 11px; border-radius:9px; background:#333; color:#fff; font-weight:700; font-size:12.5px; }
#ed .opt button.b.on { background:var(--blue); }

/* ===== 印刷（まとめ印刷・写真集） ===== */
#pr { display:none; position:fixed; inset:0; z-index:55; background:#555; overflow:auto; }
#pr.show { display:block; }
#pr .tb { position:sticky; top:0; z-index:2; background:#f3e9b0; padding:calc(var(--sat) + 8px) 12px 8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#pr .tb .sp { flex:1; }
#pr .tb button { padding:9px 14px; border-radius:10px; background:var(--card2); color:var(--text); font-weight:700; font-size:13.5px; border:1px solid var(--line); }
#pr .tb button.pri { background:var(--green); color:#fff; border-color:var(--green); }
#pr .tb .hint { color:var(--sub); font-size:12px; width:100%; }
#pr .pages { padding:12px 6px 60px; }
.page { background:#fff; color:#111; margin:0 auto 14px; box-shadow:0 3px 14px rgba(0,0,0,.4); position:relative; overflow:hidden; }
.page.p { width:210mm; height:296mm; padding:10mm 10mm 9mm; }
.page.l { width:297mm; height:209mm; padding:9mm 10mm; }
.page .pt { font-size:13pt; font-weight:800; border-bottom:2px solid #2e7d32; color:#1b5e20; padding-bottom:1.5mm; margin-bottom:3mm; display:flex; }
.page .pt .sp { flex:1; }
.page .pt small { font-size:9pt; color:#555; font-weight:600; align-self:flex-end; }
.sheet { display:grid; gap:3mm; height:calc(100% - 12mm); }
.sheet .it { display:flex; flex-direction:column; min-height:0; }
.sheet .it .im { flex:1; min-height:0; border:1px solid #999; background:#f4f4f4; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sheet .it .im img { max-width:100%; max-height:100%; width:auto; height:auto; }
.sheet .it .cp { font-size:8.5pt; line-height:1.35; padding:1mm 0 0; color:#222; min-height:1.2em; word-break:break-all; }
.sheet .it .cp b { font-size:9pt; }
.page .pn { position:absolute; right:10mm; bottom:4mm; font-size:8pt; color:#666; }
/* 写真集（A4縦・1ページ3枚＋説明） */
.rep-title { text-align:center; font-size:20pt; font-weight:800; letter-spacing:4px; padding:2mm 0 3mm; border-bottom:2.5px solid #2e7d32; margin-bottom:3mm; color:#1b5e20; }
.rep-head { width:100%; border-collapse:collapse; margin-bottom:4mm; font-size:10.5pt; }
.rep-head td { border:1px solid #999; padding:1.6mm 2.5mm; }
.rep-head td.l { background:#eef5ea; width:26mm; font-weight:700; color:#333; }
.row3 { display:flex; gap:4mm; height:76mm; margin-bottom:4mm; }
.row3 .pic { width:112mm; border:1px solid #888; background:#f4f4f4; position:relative; overflow:hidden; flex-shrink:0; }
.row3 .pic img { position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; width:auto; height:auto; transform-origin:center center; transform:translate(-50%,-50%); }
.row3 .pic .adj { position:absolute; right:2mm; bottom:2mm; z-index:2; border-radius:8px; background:rgba(20,60,35,.86); color:#fff; font-size:9.5pt; font-weight:700; padding:1.6mm 3mm; }
.row3 .cap { flex:1; display:flex; flex-direction:column; font-size:10pt; }
.row3 .cap table { width:100%; border-collapse:collapse; }
.row3 .cap td { border:1px solid #999; padding:1.5mm 2mm; vertical-align:top; }
.row3 .cap td.l { background:#eef5ea; width:17mm; font-weight:700; color:#333; font-size:9pt; }
.row3 .cap .desc { flex:1; border:1px solid #999; border-top:none; padding:2mm; line-height:1.65; min-height:30mm; white-space:pre-wrap; }
[contenteditable] { outline:none; }
[contenteditable]:focus { background:#fffbe6; }
/* 写真集の調整（拡大・移動） */
#adj { display:none; position:fixed; inset:0; z-index:70; background:rgba(6,16,10,.96); padding:calc(var(--sat) + 10px) 12px calc(var(--sab) + 12px); overflow:auto; }
#adj.show { display:flex; flex-direction:column; align-items:center; gap:10px; }
#adj .edstage { width:min(92vw,560px); aspect-ratio:112/76; background:#000; border:2px solid var(--green); border-radius:6px; position:relative; overflow:hidden; touch-action:none; cursor:move; }
#adj .edstage img { position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; width:auto; height:auto; transform-origin:center center; user-select:none; -webkit-user-drag:none; pointer-events:none; }
#adj .edctl { width:min(92vw,560px); display:flex; align-items:center; gap:10px; }
#adj .edctl input[type=range] { flex:1; accent-color:var(--green); }
#adj .edctl button { width:44px; height:40px; border-radius:10px; background:var(--card2); color:#fff; font-size:20px; }
#adj .edbtns { width:min(92vw,560px); display:flex; gap:8px; flex-wrap:wrap; }
#adj .edbtns button { flex:1 1 auto; padding:12px 10px; border-radius:11px; background:var(--card2); font-size:14px; font-weight:700; }
#adj .edbtns .ok { background:var(--green); color:#fff; }

@media print {
  body { background:#fff; }
  body > *:not(#pr) { display:none !important; }
  #pr { display:block !important; position:static; background:#fff; overflow:visible; }
  #pr .tb, .row3 .pic .adj, .row3 .pic .ops, .noprint, #adj { display:none !important; }
  #pr .pages { zoom:1; }
  #pr .pages { padding:0; }
  .page { box-shadow:none; margin:0; page-break-after:always; break-after:page; }
  .page:last-child { page-break-after:auto; break-after:auto; }
  .page.p { width:186mm; height:275mm; padding:0; }
  .page.l { width:273mm; height:188mm; padding:0; }
  .page.rep { height:auto; min-height:0; }
  .page.rep.cover { height:275mm; }
  [contenteditable]:focus { background:transparent; }
}
@page { size:A4 portrait; margin:10mm 12mm; }

/* ===== TOP 画面（2026-09-19 森さん指示で新設。どこへ行けばよいか分からない、を無くす） ===== */
#tabs button.home { background:var(--card2); border-color:var(--green2); }
.hometop { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:14.5px; line-height:1.7; margin:4px 0 12px; }
.hometop b { font-size:16.5px; }
.hometiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.htile { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:14px 14px 12px; border-radius:16px; background:var(--card); border:1px solid var(--line); text-align:left; box-shadow:0 1px 3px rgba(90,80,30,.10); }
.htile:active { transform:scale(.98); }
.htile .ic { font-size:28px; line-height:1.15; }
.htile .nm { font-size:16px; font-weight:800; }
.htile .sb { font-size:12px; color:var(--sub); }
.homeacts { display:flex; gap:8px; margin:12px 0 2px; }
.homeacts .btn { flex:1; text-align:center; }
@media (min-width:900px) {
  .hometiles { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
  .htile { padding:18px 18px 16px; }
  .htile .ic { font-size:34px; }
  .htile .nm { font-size:17px; }
  .homeacts .btn { flex:0 0 auto; }
}