:root { --bg:#f6f8fb; --fg:#1b2430; --muted:#5b6777; --card:#fff; --line:#dde3ec; --accent:#0b6bcb; --high:#c62828; --notable:#b26a00; --ok:#1b7f3b; --warn:#b26a00; --bad:#c62828; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.site-header { background:#0b2a4a; color:#fff; }
.site-header .wrap { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding-top:12px; padding-bottom:12px; }
.brand { color:#fff; font-weight:700; font-size:1.15rem; text-decoration:none; }
nav { display:flex; gap:16px; }
nav a { color:#cfe3fb; text-decoration:none; } nav a.active, nav a:hover { color:#fff; text-decoration:underline; }
.demo-nav { background:#eaf3fc; border-bottom:1px solid #cfe0f3; font-size:13px; }
.demo-nav .wrap { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding-top:6px; padding-bottom:6px; }
.demo-nav-label { color:#3d4a5c; font-weight:600; }
.demo-nav ul { display:flex; flex-wrap:wrap; gap:4px 14px; list-style:none; margin:0; padding:0; }
.demo-nav a { color:#0b5cad; text-decoration:none; } .demo-nav a:hover { text-decoration:underline; }
.demo-nav-current { color:#243a5e; font-weight:700; }
h1 { font-size:1.4rem; margin:20px 0 8px; } h2 { font-size:1.1rem; margin:24px 0 8px; }
.banner { border:1px solid var(--line); border-left-width:5px; background:var(--card); padding:10px 14px; border-radius:6px; margin:12px 0; }
.banner.complete { border-left-color: var(--ok); } .banner.partial { border-left-color: var(--warn); } .banner.not-fetched, .banner.failed { border-left-color: var(--bad); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:12px 0; }
.row { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
label { font-size:.9rem; color:var(--muted); }
input[type=text], input[type=date], select { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; }
input[type=search] { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:6px; min-width:min(100%,320px); }
button { font:inherit; padding:5px 12px; border:1px solid var(--accent); background:#fff; color:var(--accent); border-radius:6px; cursor:pointer; }
button:hover { background:var(--accent); color:#fff; }
.chips { display:flex; flex-wrap:wrap; gap:6px; } .chip { display:inline-flex; gap:4px; align-items:center; padding:2px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.88rem; cursor:pointer; }
.chip input { margin:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:10px 0; scroll-margin-top:12px; }
.card:target { outline:3px solid var(--accent); }
.card h3 { font-size:1.02rem; margin:0 0 4px; } .card h3 a.anchor { color:var(--muted); text-decoration:none; margin-right:6px; font-weight:400; }
.meta { font-size:.85rem; color:var(--muted); } .badges { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.badge { font-size:.78rem; padding:1px 8px; border-radius:999px; border:1px solid var(--line); background:#f1f4f9; }
.badge.slide-yes { background:#e6f4ea; border-color:#1b7f3b; color:#14602c; }
.badge.slide-no { background:#fff; color:var(--muted); border-style:dashed; }
.badge.high { background:#fde8e8; border-color:#f3b4b4; color:var(--high); } .badge.notable { background:#fff1dc; border-color:#f0cf9a; color:var(--notable); }
.summary { margin:6px 0; } .summary.missing { color:var(--muted); font-style:italic; }
.links { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.9rem; } .links ul { margin:2px 0 0 18px; padding:0; }
table { border-collapse:collapse; width:100%; font-size:.9rem; } th, td { border-bottom:1px solid var(--line); padding:4px 8px; text-align:left; }
.empty { padding:24px; text-align:center; color:var(--muted); background:var(--card); border:1px dashed var(--line); border-radius:8px; }
.site-footer { color:var(--muted); font-size:.82rem; padding-top:24px; padding-bottom:40px; }
a { color:var(--accent); }
#pdf-pw { padding:5px 8px; border:1px solid #b8c7dc; border-radius:6px; font:inherit; width:150px; }
.dl-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row input[type=search] { flex:1 1 150px; min-width:130px; }
.card .orig { font-size:12px; color:#6b778a; margin:-4px 0 6px; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card-head h3 { margin:0 0 4px; flex:1; min-width:0; }
.card-head .title-link { color:inherit; text-decoration:none; }
.card-head .title-link:hover { color:var(--accent); text-decoration:underline; }
.card-head .sel { display:inline-flex; padding:4px 2px 0 0; cursor:pointer; }
.card-head .sel input { width:18px; height:18px; margin:0; cursor:pointer; }
.card-head .no { flex:none; min-width:2em; padding:0 6px; text-align:center; font-size:.8rem; font-weight:700; line-height:1.7; color:#fff; background:var(--accent); border-radius:999px; margin-top:2px; }
.selbar { display:inline-flex; gap:4px; align-items:center; font-size:.85rem; }
.hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; margin:16px 0 8px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#eaf3fd,#fff); }
.hero h1 { font-size:1.7rem; margin:4px 0 8px; line-height:1.3; }
.hero p { margin:6px 0; color:var(--muted); }
.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.08em; color:var(--accent); margin:0 !important; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pill { font-size:.82rem; padding:3px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.hero-stats { display:grid; gap:10px; }
.stat { display:flex; flex-direction:column; gap:2px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.stat strong { font-size:1.8rem; line-height:1.2; }
.stat strong small { font-size:.9rem; font-weight:600; color:var(--muted); }
.stat-pair { display:flex; gap:28px; }
.stat-pair > div { display:flex; flex-direction:column; }
.dl-actions { display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
.stat-label { font-size:.85rem; color:var(--muted); }
@media (max-width:720px) { .hero { grid-template-columns:1fr; } }
.selbar #selcount { font-weight:600; margin-right:2px; white-space:nowrap; }
.selbar .mini { padding:1px 8px; font-size:.8rem; }
.kind { flex:none; font-size:12px; font-weight:700; color:#fff; border-radius:999px; padding:3px 12px; background:#6b778a; }
.kind.k-ga { background:#1b7f3b; } .kind.k-preview { background:#7a45c7; }
.kind.k-retirement { background:#c62828; } .kind.k-announcement { background:#0b6bcb; } .kind.k-update { background:#6b778a; }
.chips-label { font-size:12px; font-weight:600; color:#3d4a5c; margin-right:6px; align-self:center; }
.kind-chip { border-color:#c9d4e6; }
.kind-chip.k-ga:has(input:checked) { background:#e6f4ea; border-color:#1b7f3b; } .kind-chip.k-retirement:has(input:checked) { background:#fdecec; border-color:#c62828; }
.kind-chip.k-preview:has(input:checked) { background:#f1eafb; border-color:#7a45c7; }
.kind-chip.k-announcement:has(input:checked) { background:#eaf3ff; border-color:#0b6bcb; } .kind-chip.k-update:has(input:checked) { background:#eef1f5; border-color:#6b778a; }
.dl-actions button { padding:6px 12px; }
.imp-chip.i-high:has(input:checked) { background:#fdecec; border-color:#c62828; } .imp-chip.i-notable:has(input:checked) { background:#fff4e0; border-color:#b26a00; } .imp-chip.i-normal:has(input:checked) { background:#eef1f6; border-color:#5b6777; }
.hero.compact { display:block; padding:14px 18px; margin:12px 0 4px; } .hero.compact h1 { font-size:1.35rem; margin:0 0 4px; } .hero.compact p { margin:2px 0 8px; font-size:.92rem; } .hero.compact .pills { margin-top:0; }