/*
File: public/classify_ui.css
Role: SG25-PAP CLASSIFY_WEB (Cloudflare Pages) - 分類UIのスタイル。
Created: 2025-12-24
Updated: 2025-12-24
Notes:
- 画面の主役は分類UI。診断は折りたたみ。
*/
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1a1f2b;
  --muted:#6b7280;
  --line:#e5e7eb;
  --btn:#f3f4f6;
  --primary:#4f7cff;
  --danger:#d14b4b;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:1200px;margin:24px auto;padding:0 16px}
.topbar{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.title{font-weight:800;letter-spacing:0.2px}
.sub{font-weight:700;color:var(--muted)}
.hint{margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted);max-width:720px}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.btn{appearance:none;border:1px solid var(--line);background:var(--btn);color:var(--text);border-radius:10px;padding:9px 12px;font-size:13px;cursor:pointer}
.btn:hover{filter:brightness(0.98)}
.btn:disabled{opacity:0.45;cursor:not-allowed}
.btn.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}

.card{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;box-shadow:0 6px 18px rgba(15,23,42,0.04)}
.cardTitle{font-weight:700;margin-bottom:10px}
.pillRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.message{margin-top:10px;font-size:13px;color:var(--muted);min-height:18px}
.details{margin-top:10px}
.pre{margin:10px 0 0;max-height:300px;overflow:auto;background:#0b1020;color:#e6edf6;border-radius:12px;padding:12px;font-size:12px;line-height:1.4}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}}

.search{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;outline:none}
.treeList{margin-top:10px;max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:6px;background:#fff}
.treeItem{padding:9px 10px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.treeItem:hover{background:#f6f7fb}
.treeItem.active{background:#eef2ff;border:1px solid #dbeafe}
.treeItem .tLabel{font-size:13px;font-weight:650}
.treeItem .tPath{font-size:12px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.selectedRow{margin-top:10px;font-size:13px;color:var(--muted)}
.selectedRow .label{color:var(--text);font-weight:650;margin-right:6px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.small{font-size:12px;color:var(--muted)}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.photos{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:10px}
@media (max-width: 980px){.photos{grid-template-columns:repeat(3, minmax(0, 1fr));}}
@media (max-width: 520px){.photos{grid-template-columns:repeat(2, minmax(0, 1fr));}}
.photo{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;position:relative}
.photo.selected{outline:3px solid #f43f5e;outline-offset:-3px}
.photo img{display:block;width:100%;height:140px;object-fit:cover;background:#fafafa}
.photo .cap{padding:8px 10px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.tag{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--muted);background:#fff}

.assignments{font-size:13px;color:var(--text)}
.assignments .empty{color:var(--muted)}
.assignRow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.assignRow:first-child{border-top:none}
.assignRow .aLeft{min-width:160px}
.assignRow .aLeft .fn{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:var(--muted)}
.assignRow .aRight{flex:1}
.assignRow .to{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:var(--text)}
.footer{margin:14px 2px 28px}