/* weaveai.jp ジャーナル。色と書体は LP（index.html の :root）と同じ値を使う。
   構成は mes-dx.com にならい（注目記事＋おすすめ、カテゴリ帯、本文＋横の欄、相談の帯）、見た目は weaveai.jp のまま。 */
:root { --bg:#F5F2EA; --bg2:#ECE8DE; --panel:#FFFFFF; --line:#D9D4C8; --txt:#1F2227; --txt2:#5B606A; --mute:#8A8F99;
  --amber:#F0A73C; --shu:#C8362B; --ink:#1B1E24; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:"Noto Sans JP","Hiragino Sans","Meiryo",sans-serif; font-size:16px; line-height:1.8; -webkit-text-size-adjust:100%; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; }
.wrap { max-width:1160px; margin:0 auto; padding:0 28px; position:relative; }
.wrap.narrow { max-width:780px; }
.brush { font-family:'Yuji Boku','Noto Serif JP',serif; font-weight:400; }
.eyebrow { font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.eyebrow::before { content:"// "; color:var(--mute); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* nav（LP と同じ見た目） */
.jn { position:sticky; top:0; z-index:9; background:rgba(245,242,234,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.jn .wrap { display:flex; align-items:center; gap:24px; height:58px; }
.jn .logo { display:flex; align-items:center; gap:10px; font-family:Outfit,sans-serif; font-weight:300; font-size:21px; text-decoration:none; color:var(--txt); }
.jn .logo b { color:var(--amber); font-weight:600; }
.jn .links { margin-left:auto; display:flex; gap:24px; font-size:12.5px; font-family:"JetBrains Mono",monospace; letter-spacing:.06em; }
.jn .links a { text-decoration:none; color:var(--txt2); }
.jn .links a:hover, .jn .links a[aria-current] { color:var(--txt); }
.jn .links a[aria-current] { font-weight:700; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:3px; text-decoration:none; font-size:13px; letter-spacing:.06em; font-weight:500; border:1px solid var(--line); color:var(--txt); background:var(--panel); white-space:nowrap; cursor:pointer; font-family:inherit; }
.btn:hover, .btn:focus-visible { border-color:var(--amber); }
.btn.primary { background:#1F2227; color:#fff; border-color:#1F2227; }
.btn.primary::after { content:""; width:16px; height:3px; background:var(--amber); border-radius:2px; }
.jn .btn { padding:7px 12px; font-size:12px; }

/* カテゴリ帯（mes-dx のテーマ帯にあたる。横に流れ、狭い画面では横にスクロール） */
.jbar { border-bottom:1px solid var(--line); background:var(--bg2); }
.jbar .wrap { display:flex; gap:4px 22px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; font-size:13px; }
.jbar .wrap::-webkit-scrollbar { display:none; }
.jbar a { text-decoration:none; color:var(--txt2); padding:10px 0; border-bottom:2px solid transparent; }
.jbar a:hover { color:var(--txt); }
.jbar a[aria-current] { color:var(--txt); font-weight:700; border-bottom-color:var(--amber); }
.jbar .jbar-search { margin-left:auto; padding-left:22px; }
.jbar .jbar-search::before { content:"⌕ "; color:var(--mute); }

main { padding:36px 0 0; }
.crumbs ol { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12.5px; color:var(--mute); }
.crumbs li + li::before { content:"›"; margin-right:8px; }
.crumbs a { text-decoration:none; color:var(--txt2); }
.crumbs li[aria-current] { overflow-wrap:anywhere; }

/* 見出し */
.page-head h1 { font-size:clamp(30px,5vw,44px); line-height:1.3; letter-spacing:.04em; margin:8px 0 10px; }
.page-head p { color:var(--txt2); margin:0 0 26px; max-width:40em; }
.page-head .count { font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--mute); margin-top:-14px; }
.sec-h { font-size:18px; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.sec-h::before { content:""; width:18px; height:3px; background:var(--amber); border-radius:2px; }
.jsec { margin-top:56px; }

/* トップ：注目記事＋編集部のおすすめ */
.lead-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:26px; align-items:start; }
.lead-card { display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.lead-card:hover { border-color:var(--amber); }
.lead-img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; background:var(--bg2); }
.lead-body { display:flex; flex-direction:column; gap:6px; padding:20px 24px 24px; }
.lead-body b { font-size:clamp(20px,2.4vw,26px); line-height:1.45; }
.lead-body .desc { color:var(--txt2); font-size:14.5px; line-height:1.8; }
.picks ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.picks li + li { border-top:1px solid var(--line); }
.picks a { display:grid; grid-template-columns:26px 92px minmax(0,1fr); gap:12px; align-items:center; padding:12px 0; text-decoration:none; }
.picks a:hover b { text-decoration:underline; text-decoration-color:var(--amber); }
.picks .no { font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:500; width:26px; height:26px; display:grid; place-items:center; background:var(--ink); color:#fff; border-radius:3px; }
.picks li:first-child .no { background:var(--amber); color:var(--ink); }
.pthumb { display:block; width:92px; height:auto; aspect-ratio:600/315; object-fit:cover; border-radius:3px; background:var(--bg2); }
.picks .pt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.picks .pt b { font-size:14px; line-height:1.55; font-weight:700; }
.picks .pt .cat { font-size:11.5px; color:var(--mute); }

/* 写真が上のカードの格子 */
.grid-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.gcard a { display:flex; flex-direction:column; height:100%; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.gcard a:hover { border-color:var(--amber); }
.gthumb { display:block; width:100%; height:auto; aspect-ratio:600/315; object-fit:cover; background:var(--bg2); }
.gcard .body { display:flex; flex-direction:column; gap:5px; padding:14px 16px 18px; }
.gcard b { font-size:16px; line-height:1.55; }
.gcard .desc { color:var(--txt2); font-size:13px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.noimg { background:linear-gradient(135deg,var(--bg2),var(--panel)); }
.meta { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; color:var(--mute); font-family:"JetBrains Mono",monospace; }
.meta .cat { color:var(--txt2); font-family:"Noto Sans JP",sans-serif; }

/* 横長の行（検索結果・404） */
.cards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.card a { display:flex; gap:18px; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 20px; align-items:flex-start; }
.card .body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.card .thumb { width:200px; height:auto; aspect-ratio:600/315; object-fit:cover; border-radius:4px; flex:none; background:var(--bg2); }
.card a:hover { border-color:var(--amber); }
.card b { font-size:18px; line-height:1.5; }
.card .desc { color:var(--txt2); font-size:14px; line-height:1.75; }
.draft { color:var(--shu); border:1px solid var(--shu); border-radius:3px; padding:0 6px; font-size:11px; font-family:"Noto Sans JP",sans-serif; }
.empty { color:var(--mute); }

/* カテゴリから探す・タグから探す */
.cat-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cat-grid a { display:flex; flex-direction:column; gap:4px; height:100%; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 20px; }
.cat-grid a:hover { border-color:var(--amber); }
.cat-grid .en { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--amber); }
.cat-grid b { font-size:17px; }
.cat-grid .desc { color:var(--txt2); font-size:13px; line-height:1.7; flex:1; }
.cat-grid .cnt { font-size:12px; color:var(--mute); margin-top:6px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a { text-decoration:none; font-size:13px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--txt2); }
.tag-cloud a:hover { border-color:var(--amber); color:var(--txt); }
.tag-cloud span { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--mute); margin-left:6px; }

/* 相談の帯（LP の CTA と同じ墨の帯） */
.cta-band { background:var(--ink); color:#E6E8EC; margin-top:72px; padding:48px 0; }
.cta-band .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; }
.cta-band .k { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--amber); }
.cta-band h2 { font-size:clamp(24px,3vw,32px); line-height:1.4; margin:6px 0 8px; color:#fff; }
.cta-band p { margin:0; color:#9AA3B2; font-size:14.5px; max-width:44em; }
.cta-band .btns { display:flex; flex-direction:column; gap:10px; }
.cta-band .btn.primary, .side-cta .btn.primary { background:var(--amber); color:#0F1114; border-color:var(--amber); }
.cta-band .btn.primary::after, .side-cta .btn.primary::after { background:#0F1114; }
.cta-band .btn:not(.primary) { background:transparent; color:#E6E8EC; border-color:#3A414D; }

/* 記事 */
.post-head { margin-bottom:24px; max-width:860px; }
.post-head .meta { display:flex; gap:10px; align-items:center; font-size:13px; }
.post-head .cat { text-decoration:none; color:var(--txt2); border:1px solid var(--line); border-radius:999px; padding:1px 12px; background:var(--panel); }
.post-head h1 { font-size:clamp(26px,4vw,36px); line-height:1.45; letter-spacing:.02em; margin:14px 0 12px; font-weight:700; }
.byline { font-size:13px; color:var(--mute); margin:0; }
.tags { display:flex; flex-wrap:wrap; gap:6px 12px; margin:10px 0 0; font-size:13px; }
.tags a { color:var(--txt2); text-decoration:none; }
.tags a:hover { color:var(--txt); text-decoration:underline; text-decoration-color:var(--amber); }
.tags-end { margin-top:36px; }
.post-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; }
.post-main { min-width:0; max-width:760px; }
.post-side { position:sticky; top:118px; display:flex; flex-direction:column; gap:18px; }
.side-cta { border-radius:6px; padding:20px 20px 22px; display:flex; flex-direction:column; gap:6px; background:var(--ink); color:#E6E8EC; }
.side-cta .k { font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; color:var(--amber); }
.side-cta b { font-size:16px; line-height:1.5; color:#fff; }
.side-cta p { margin:0 0 8px; color:#9AA3B2; font-size:13px; line-height:1.7; }
.side-cta .btn { justify-content:center; }
.side-box { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px 18px; }
.side-box h3 { font-size:13px; margin:0 0 8px; color:var(--txt2); }
.side-list { list-style:none; margin:0; padding:0; }
.side-list li + li { border-top:1px solid var(--line); }
.side-list a { display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; padding:9px 0; text-decoration:none; font-size:13px; line-height:1.55; }
.side-list a:hover span:last-child { text-decoration:underline; text-decoration-color:var(--amber); }
.side-list .no { font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--amber); font-weight:500; }
.side-cats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.side-cats a { text-decoration:none; color:var(--txt2); display:block; padding:4px 0; }
.side-cats a[aria-current] { color:var(--txt); font-weight:700; }
.side-cats a[aria-current]::before { content:"— "; color:var(--amber); }
.hero { margin:0 0 30px; }
.hero img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; border-radius:6px; background:var(--bg2); }
.hero figcaption { font-size:11.5px; color:var(--mute); margin-top:6px; text-align:right; }
.hero figcaption a { color:var(--mute); }
.toc { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px 20px; margin:0 0 34px; font-size:14px; }
.toc b { font-size:12px; letter-spacing:.12em; color:var(--mute); }
.toc ol { margin:8px 0 0; padding-left:1.4em; }
.toc a { text-decoration:none; color:var(--txt2); }
.toc a:hover { color:var(--txt); }
.prose { font-size:16.5px; line-height:2; overflow-wrap:break-word; }
.prose > * { margin-top:0; margin-bottom:0; }
.prose > * + * { margin-top:1.1em; }
.prose h2 { font-size:23px; line-height:1.5; margin:2.4em 0 .2em; padding-top:.2em; border-top:1px solid var(--line); scroll-margin-top:118px; }
.prose h3 { font-size:18.5px; line-height:1.55; margin:1.9em 0 .1em; scroll-margin-top:118px; }
.prose h4 { font-size:16.5px; margin:1.6em 0 0; }
.prose a { color:var(--txt); text-decoration-color:var(--amber); text-decoration-thickness:2px; text-underline-offset:3px; }
.prose ul, .prose ol { padding-left:1.4em; margin-bottom:0; }
.prose li + li { margin-top:.35em; }
.prose blockquote { margin-left:0; padding:2px 0 2px 18px; border-left:3px solid var(--line); color:var(--txt2); }
.prose code { font-family:"JetBrains Mono",monospace; font-size:.88em; background:var(--bg2); padding:1px 5px; border-radius:3px; }
.prose pre.code { position:relative; background:var(--ink); color:#E6E8EC; padding:16px 18px; border-radius:6px; overflow-x:auto; font-size:13.5px; line-height:1.7; }
.prose pre.code[data-lang]::before { content:attr(data-lang); position:absolute; top:6px; right:10px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; color:#6B7383; text-transform:uppercase; }
.prose pre.code code { background:none; padding:0; }
.prose .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.prose table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.7; }
.prose th, .prose td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.prose th { background:var(--bg2); font-weight:700; white-space:nowrap; }
.prose tr:last-child td { border-bottom:0; }
.prose .callout { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:4px; padding:14px 18px; }
.prose .callout h4 { margin:0 0 6px; font-size:15px; }
.prose .callout-warn { border-left-color:var(--shu); }
.prose details.faq { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px 16px; }
.prose details.faq summary { cursor:pointer; font-weight:700; }
.prose details.faq .faq-body { margin-top:8px; color:var(--txt2); }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.prose img { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; border-radius:6px; background:var(--bg2); }
.prose .sources { margin-top:3em; font-size:14px; line-height:1.8; }
.prose .sources h2 { font-size:17px; margin-top:0; }
.prose .sources li { overflow-wrap:anywhere; }
.author-box { margin-top:36px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 20px; display:flex; flex-direction:column; gap:2px; }
.author-box .k { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--amber); }
.author-box b { font-size:16px; }
.author-box p { margin:0; color:var(--txt2); font-size:13.5px; line-height:1.75; }
.prev-next { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.pn { display:flex; flex-direction:column; gap:4px; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
.pn:hover { border-color:var(--amber); }
.pn-next { text-align:right; }
.pn-label { font-size:12px; color:var(--mute); }
.pn-title { font-size:14px; line-height:1.55; font-weight:700; }
.related { margin-top:64px; }

/* 検索 */
.search-form { display:flex; gap:10px; max-width:640px; }
.search-form input { flex:1; min-width:0; font:inherit; font-size:15px; padding:10px 14px; border:1px solid var(--line); border-radius:3px; background:var(--panel); color:var(--txt); }
.search-form input:focus { outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.search-note { color:var(--txt2); font-size:14px; margin:18px 0 14px; }

/* 404 */
.nf h1 { font-size:clamp(30px,5vw,44px); line-height:1.3; letter-spacing:.04em; margin:8px 0 12px; }
.nf p { color:var(--txt2); margin:0 0 24px; }
.nf-links { display:flex; flex-wrap:wrap; gap:10px; }
.nf .related h2 { font-size:17px; margin:0 0 14px; }
.nf { padding-bottom:72px; }

/* footer（LP から切り出したものに合わせる） */
footer { padding:34px 0 48px; border-top:1px solid var(--line); font-size:12.5px; color:var(--txt2); }
.cta-band + footer, main:has(> .cta-band:last-child) + footer { border-top:0; }
footer .wrap { display:flex; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; align-items:center; }
footer .mono { font-family:"JetBrains Mono",monospace; }
.foot-links { display:flex; gap:16px; }
.foot-links a { color:var(--txt2); }

.test-ribbon { position:fixed; left:0; right:0; bottom:0; z-index:99; background:#C8362B; color:#fff; font:11px/1.6 "JetBrains Mono",monospace; letter-spacing:.12em; text-align:center; padding:3px 0; }

@media (max-width:1000px) {
  .post-layout { grid-template-columns:1fr; gap:36px; }
  .post-side { position:static; }
  .grid-cards, .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lead-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .wrap { padding:0 16px; }
  .jn .wrap { gap:12px; }
  .jn .logo { font-size:18px; }
  .hide-sm { display:none; }
  main { padding-top:24px; }
  .prose { font-size:16px; line-height:1.95; }
  .grid-cards, .cat-grid { grid-template-columns:1fr; }
  .card a { flex-direction:column; gap:12px; }
  .card .thumb { width:100%; }
  .cta-band .wrap { grid-template-columns:1fr; }
  .cta-band .btns { flex-direction:row; flex-wrap:wrap; }
  .prev-next { grid-template-columns:1fr; }
  .pn-next { text-align:left; }
  .picks a { grid-template-columns:26px 76px minmax(0,1fr); }
  .pthumb { width:76px; }
}

/* 動画記事：クリックするまで YouTube を読み込まない */
.meta .vtag { color:var(--ink); background:var(--amber); padding:0 6px; border-radius:2px; font-weight:500; }
.meta .vtag::before { content:"▶ "; font-size:.8em; }
.yt { position:relative; aspect-ratio:16/9; background:var(--ink); border-radius:6px; overflow:hidden; margin:0 0 6px; }
.yt button { all:unset; position:absolute; inset:0; cursor:pointer; display:block; }
.yt img { width:100%; height:100%; object-fit:cover; display:block; transition:filter .3s; filter:brightness(.85); }
.yt button:hover img, .yt button:focus-visible img { filter:brightness(.7); }
.yt .play { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:rgba(27,30,36,.78); border:2px solid var(--amber); display:grid; place-items:center; }
.yt .play::after { content:""; margin-left:6px; border-style:solid; border-width:13px 0 13px 21px; border-color:transparent transparent transparent var(--amber); }
.yt .dur { position:absolute; right:12px; bottom:12px; font:500 12px "JetBrains Mono",monospace; color:#fff; background:rgba(27,30,36,.8); padding:3px 8px; border-radius:3px; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-link { margin:0 0 28px; text-align:right; font-size:12.5px; font-family:"JetBrains Mono",monospace; }
.yt-link a { color:var(--txt2); }
.prose .chapters { list-style:none; padding:0; margin:0 0 1.6em; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.prose .chapters li { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; padding:10px 16px; margin:0; }
.prose .chapters li + li { border-top:1px solid var(--line); }
.prose .chapters time { font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--amber); font-weight:500; }

/* 執筆欄から編集方針へ／運営者情報・編集方針（/about/） */
.author-box .policy { margin-top:6px; font-size:13px; }
.author-box .policy a { color:var(--txt2); }
.about { padding-bottom:56px; }
.about .prose h2 { margin-top:36px; }
.about .prose th { width:9em; }
.about .prose td a { word-break:break-all; }
@media (max-width:560px) { .about .prose th { width:auto; white-space:normal; } }