/* AI開発 資料アーカイブ — 共通スタイル (UTF-8) */
:root{
  --bg:#0d1b2a; --panel:#13243a; --panel2:#1a2f49; --ink:#eef3f8; --muted:#9fb2c6;
  --line:#27405e; --teal:#00c2a8; --amber:#f5a623; --link:#7fd7ff;
  --maxw:900px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.85; font-size:16px; -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.topbar{background:linear-gradient(90deg,var(--teal),var(--amber)) ; padding:2px 0}
.topbar > .container{background:var(--bg); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; max-width:var(--maxw)}
.topbar .home{font-weight:700; color:var(--ink); font-size:15px}
.topbar .navlink{color:var(--teal); font-weight:600}

h1{font-size:1.7rem; line-height:1.4; margin:24px 0 8px; letter-spacing:.01em}
h2{font-size:1.25rem; margin:28px 0 12px; border-left:4px solid var(--teal); padding-left:10px}
h3{font-size:1.05rem; margin:18px 0 8px}
.lead{color:var(--muted); margin:8px 0 20px}

/* search */
.searchwrap{margin:18px 0 6px}
#q{width:100%; padding:13px 16px; font-size:15px; border-radius:10px;
   border:1px solid var(--line); background:var(--panel); color:var(--ink)}
#q::placeholder{color:#6f86a0}
#q:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,194,168,.25)}
.count{color:var(--amber); font-size:13px; min-height:18px; margin:4px 0 0}

/* category nav */
.catnav{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 24px}
.catnav a{background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:13px; color:var(--muted)}
.catnav a:hover{border-color:var(--teal); color:var(--ink); text-decoration:none}
.catnav .n{color:var(--amber); font-weight:700; margin-left:4px}

.catsec{margin:30px 0}
.catsec h2 .secn{font-size:.8rem; color:var(--amber); margin-left:8px}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 14px; display:flex; flex-direction:column}
.card h3{margin:0 0 8px; font-size:1rem; line-height:1.5}
.csum{color:var(--muted); font-size:13.5px; margin:0 0 12px; flex:1}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0}
.tag{background:var(--panel2); color:#bcd; border:1px solid var(--line);
  font-size:11px; padding:2px 8px; border-radius:6px}
.cardfoot{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line)}
.open{display:inline-block; background:var(--teal); color:#06231f; font-weight:700;
  padding:6px 14px; border-radius:8px; font-size:13px}
.open:hover{filter:brightness(1.08); text-decoration:none}
.nolink{color:#7f93a8; font-size:12.5px; font-style:italic}

/* doc page */
.crumb{background:var(--panel); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)}
.crumb .container{padding:10px 20px}
.cat-pill,.cat-tag{display:inline-block; background:var(--amber); color:#3a2600;
  font-weight:700; font-size:12px; padding:2px 10px; border-radius:6px}
.doc .rel{color:var(--muted); font-size:13px; margin:2px 0 16px; word-break:break-all}
.doc code{background:var(--panel2); padding:2px 6px; border-radius:4px; font-size:.9em;
  font-family:"SFMono-Regular",Menlo,Consolas,monospace}
.summary{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:10px; padding:14px 18px; margin:14px 0}
.summary h2,.kps h2{border:none; padding:0; margin:0 0 8px; font-size:1rem; color:var(--teal)}
.kps{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:14px 0}
.kps ul{margin:0; padding-left:20px}
.kps li{margin:4px 0; font-size:14.5px}
.assetlinks{margin:14px 0}
.btn{display:inline-block; background:var(--panel2); border:1px solid var(--teal); color:var(--teal);
  padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; margin:4px 8px 4px 0}
.btn:hover{background:var(--teal); color:#06231f; text-decoration:none}
.warn{background:#3a2a12; border:1px solid var(--amber); color:#ffe1ad;
  border-radius:8px; padding:12px 16px; margin:14px 0; font-size:13.5px}
.pdfthumb img{max-width:100%; border:1px solid var(--line); border-radius:8px; margin:10px 0}
.rule{border:none; border-top:1px solid var(--line); margin:22px 0}

/* embedded content */
.content{font-size:15.5px}
.content pre,pre.plain{background:#0a1422; border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; overflow:auto; font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.content code{font-family:"SFMono-Regular",Menlo,Consolas,monospace}
.content h1{font-size:1.4rem} .content h2{font-size:1.2rem} .content h3{font-size:1.05rem}
.content img{max-width:100%; height:auto; border-radius:8px; margin:10px 0}
.content table{border-collapse:collapse; width:100%; margin:14px 0; font-size:13.5px; display:block; overflow-x:auto}
.content th,.content td{border:1px solid var(--line); padding:6px 10px; text-align:left}
.content th{background:var(--panel2)}
.content blockquote{border-left:3px solid var(--teal); margin:12px 0; padding:4px 14px; color:var(--muted)}
.content a{word-break:break-all}

.backtop{margin:30px 0; text-align:center}
.foot{border-top:1px solid var(--line); margin-top:40px; padding:18px 0; color:var(--muted); font-size:13px; text-align:center}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:18px 0}
.gitem{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; overflow:hidden}
.gitem img{width:100%; height:150px; object-fit:cover; display:block; background:#0a1422}
.gitem:hover{border-color:var(--teal); text-decoration:none}
.gcap{font-size:11.5px; color:var(--muted); padding:7px 9px; word-break:break-all}

@media(max-width:600px){
  body{font-size:15px}
  .cards{grid-template-columns:1fr}
  h1{font-size:1.4rem}
}