/* home.css — ホーム / 設定 / 大きく見る窓 (lightbox) の見た目 (SPEC_v1.1 §4.8-4.10)
   app.css の後に読み込む。app.css は書き換えず、上書きが要る所は #screen-home / #screen-settings を付けて強くする。
   配色は app.css の変数 (--panel --line --dim --acc ...) をそのまま使う。 */

/* hidden 属性を display 指定に負けさせない */
#screen-home [hidden],
#screen-settings [hidden],
.lightbox [hidden]{display:none !important}

/* ================= ホーム ================= */
#screen-home .page-body{max-width:960px}
#screen-home .home-hero h2{margin-bottom:0}

/* 数字 4 つ: 提出した画像 / 合計作業時間 / 塗った果実 / 暫定報酬 */
#screen-home .stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 14px}
#screen-home .stat-box{min-width:0;padding:12px 16px}
#screen-home .stat-box .num{font-size:22px;line-height:1.35;white-space:nowrap;font-variant-numeric:tabular-nums}
#screen-home .stat-box .num .unit{font-size:13px;font-weight:600;color:var(--dim)}
#screen-home .stat-box:nth-child(4) .num{color:#8fe6b4}
@media (max-width:760px){
  #screen-home .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* お知らせと締切は 1 行に並べる (どちらか一方だけのときは、その 1 つが横いっぱいに広がる) */
#screen-home .notice-row{display:flex;flex-wrap:wrap;gap:0 12px;align-items:stretch}
#screen-home .notice-row > .announce{margin:10px 0;flex:1 1 320px}
#screen-home .notice-row > .announce.deadline{flex:0 0 auto}

#screen-home .cta{margin:14px 0}
#screen-home .quick-row{margin:0 0 6px}

/* 節の見出し */
#screen-home .section-title{margin:28px 0 10px;gap:10px;align-items:baseline}
#screen-home .section-title h3{font-size:15px;color:var(--ink);padding-left:10px;border-left:3px solid var(--acc);line-height:1.3}
#screen-home .section-title .hint{font-size:12px;color:var(--dim)}

/* 報酬の表 (24 時間 / 1 週間 / 1 か月 / 1 年 / 累計) */
.reward-table{width:100%;border-collapse:separate;border-spacing:0;caption-side:bottom;font-size:13.5px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.reward-table th,.reward-table td{padding:7px 18px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.reward-table th:first-child,.reward-table td:first-child{text-align:left}
.reward-table thead th{background:#1b1d24;color:var(--dim);font-size:12px;font-weight:600}
.reward-table thead th:first-child{border-top-left-radius:9px}
.reward-table thead th:last-child{border-top-right-radius:9px}
.reward-table tbody th{font-weight:600;color:var(--ink)}
.reward-table tbody tr:last-child th,
.reward-table tbody tr:last-child td{border-bottom:none}
.reward-table tbody tr:last-child th:first-child{border-bottom-left-radius:9px}
.reward-table tbody tr:last-child td:last-child{border-bottom-right-radius:9px}
.reward-table tbody tr.total th,
.reward-table tbody tr.total td{background:rgba(124,196,255,.08);font-weight:700}
.reward-table td.yen{color:#8fe6b4}
.reward-table td.zero{color:var(--dim)}
/* 注意書き (表の下): 果実以外を塗った分・見逃した果実は数えない */
.reward-table caption{caption-side:bottom;text-align:left;margin-top:10px;padding:9px 14px;
  font-size:12.5px;line-height:1.7;color:#f0dfb6;background:#2c2717;border:1px solid #5c4a24;border-radius:8px}
.reward-table caption b{color:var(--warn)}

/* タイル (これまでの提出 / みんなのアノテーション) 160px 以上 */
#screen-home .hist-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
#screen-home .hist-tile{display:block;width:100%;min-width:0;padding:0;background:var(--panel2);
  border:1px solid var(--line);border-radius:9px;overflow:hidden;cursor:pointer;text-align:left;
  transition:border-color .12s,transform .12s}
#screen-home .hist-tile:hover{background:var(--panel2);border-color:var(--btn-on-line);transform:translateY(-1px)}
#screen-home .hist-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#screen-home .hist-tile .thumb{display:block;position:relative;aspect-ratio:3/2;background:#000;overflow:hidden}
#screen-home .hist-tile .thumb img{display:block;width:100%;height:100%;object-fit:cover;background:#000}
#screen-home .hist-tile .thumb.noimg{display:grid;place-items:center;color:var(--dim);font-size:11px}
#screen-home .hist-tile .thumb.noimg::after{content:"画像なし"}
#screen-home .hist-tile .badge{position:absolute;left:6px;top:6px;padding:0 7px;font-size:10.5px;line-height:1.7;
  color:var(--warn);background:rgba(20,21,25,.88);border:1px solid var(--line);border-radius:4px}
#screen-home .hist-tile .meta{display:block;padding:7px 9px 9px;font-size:11.5px;line-height:1.5;color:var(--dim)}
#screen-home .hist-tile .meta b{display:block;color:var(--ink);font-size:12px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-home .hist-tile .meta .sub{display:block}
#screen-home .hist-tile .meta .nb{white-space:nowrap}
#screen-home .empty-hint{margin:0;padding:10px 0}
/* 「さらに読む」: ボタンが隠れているときは行ごと高さ 0 (余白はボタン側に持たせる) */
#screen-home .more-row{display:flex;justify-content:center}
#screen-home .more-row > button{margin:14px 0 4px}
#screen-home .gallery-note{margin:8px 0 0;font-size:12px;color:var(--dim)}

/* ================= 大きく見る窓 (lightbox.js) ================= */
/* z-index はトースト (900) より下: 「まだ見られません」などのトーストが窓の上に見えるように */
.lightbox-backdrop{position:fixed;inset:0;z-index:880;display:grid;place-items:center;padding:3vh 2vw;
  background:rgba(6,7,9,.94)}
.lightbox{width:96vw;height:94vh;min-width:0;display:flex;flex-direction:column;gap:10px;
  padding:12px 16px;background:#15161a;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);outline:none;overflow:hidden}
.lightbox .lb-head{display:flex;align-items:flex-start;gap:16px;flex:0 0 auto}
.lightbox .lb-titles{flex:1 1 auto;min-width:0}
.lightbox .lb-title{margin:0;font-size:16px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lightbox .lb-info{margin-top:2px;font-size:12.5px;line-height:1.5}
.lightbox .lb-views{display:flex;gap:6px;flex:0 0 auto}
.lightbox .lb-view{padding:6px 14px;font-size:13px}
.lightbox .lb-stage{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#0c0d10;border-radius:8px}
.lightbox .lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox .lb-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:14px;text-align:center;padding:20px}
.lightbox .lb-error{color:#ffb3b3}
.lightbox .lb-foot{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.lightbox .lb-foot .sp{flex:1}
.lightbox .lb-pos{min-width:64px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.lightbox kbd{margin-left:6px;padding:0 4px;font-size:10.5px;color:var(--dim)}
.lightbox kbd.arrow{font-family:"Segoe UI Symbol","Apple Symbols","DejaVu Sans","Noto Sans Symbols",sans-serif;
  font-size:12px;line-height:1.25;font-weight:700}
.lightbox button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:900px){
  .lightbox .lb-head{flex-wrap:wrap;gap:8px}
  .lightbox .lb-foot{flex-wrap:wrap}
}

/* ================= 設定 ================= */
#screen-settings .settings-note{margin:0 0 10px;font-size:12.5px}
#screen-settings .tuto-run-row{margin:6px 0 12px}
#screen-settings .settings-section > h3{font-size:15px}
/* 操作の一覧: 「操作 / キー」を 1 行にして 2 組ずつ並べる (1 列に縦積みだと画面 2 枚ぶんになる) */
#settings-ops-list dl{display:grid;grid-template-columns:max-content 1fr max-content 1fr;gap:6px 14px;
  align-items:center;margin:0 0 4px}
#settings-ops-list dt{color:var(--ink);font-size:12.5px}
#settings-ops-list dd{margin:0}
#settings-ops-list .mouse-hint{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
@media (max-width:900px){
  #settings-ops-list dl{grid-template-columns:max-content 1fr}
}