/* ============================================
 * Magazine Article Pages (Library コラム)
 * Content collection: src/content/magazine/*.md
 * 共通テンプレート: src/pages/library/magazine/[...slug].astro
 * note 風 1 カラム記事レイアウト。ヘッダー / カーソルはサイト共通のまま使う。
 * ============================================ */

/* ── Progress ── */
.np{position:fixed;top:0;left:0;height:2px;background:#A3E635;z-index:200;width:0;transition:width .12s}

/* ── Layout: 1col centered ── */
.nl{
  max-width:620px;margin:0 auto;padding:0 24px;position:relative;
  font-family:"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN",Arial,"Noto Sans JP",Meiryo,sans-serif;
  color:#08131A;-webkit-font-smoothing:antialiased;
}

/* ── Article ── */
.na{padding-bottom:48px}

/* Cover image */
.na-cover{width:100%;aspect-ratio:620/325;background:#0A0A0A;overflow:hidden;margin-bottom:0}
.na-cover img{width:100%;height:100%;object-fit:cover}
.na-cover-placeholder{width:100%;aspect-ratio:620/325;background:linear-gradient(135deg,#0A0A0A 0%,#1a1a2e 100%);display:flex;align-items:center;justify-content:center;padding:32px}
.na-cover-text{color:#fff;font-size:clamp(18px,2.5vw,26px);font-weight:700;line-height:1.5;max-width:480px}
.na-cover-text em{font-style:normal;color:#A3E635}

/* Title */
.na-h1{font-size:32px;font-weight:700;line-height:48px;color:#08131A;margin-top:72px;margin-bottom:18px}

/* Author inline (note-style below title) */
.na-author{display:flex;align-items:center;gap:8px;margin-bottom:32px;font-size:14px;color:rgba(8,19,26,.66)}
.na-author-icon{width:28px;height:28px;border-radius:50%;background:#0A0A0A;display:flex;align-items:center;justify-content:center;color:#A3E635;font-family:'DM Sans',sans-serif;font-weight:700;font-size:11px;flex-shrink:0}
.na-author-name{font-weight:700;color:#08131A}

/* Body text: note exact specs */
.na-body{font-size:18px;line-height:36px;color:#08131A}
.na-body p{margin-bottom:36px}
.na-body strong{font-weight:700}
.na-body h2,.na-body h3{font-size:20px;font-weight:700;line-height:36px;margin-top:48px;margin-bottom:16px}
.na-body ul,.na-body ol{padding-left:1.4em;margin-bottom:36px}
.na-body li{margin-bottom:8px;line-height:36px}
.na-body blockquote{margin:36px 0;padding:24px 28px;background:#F7F7F7;border-left:3px solid #A3E635;font-size:18px;font-weight:700;line-height:36px;border-radius:0}
.na-body blockquote p{margin:0}
.na-body hr{border:none;border-top:1px solid rgba(8,19,26,.14);margin:36px 0}
.na-body a{color:#08131A;text-decoration:underline;text-decoration-color:rgba(8,19,26,.3);text-underline-offset:3px}

/* Hook (lead text) */
.na-hook{font-size:18px;font-weight:700;line-height:36px;margin-bottom:36px}
.na-hook em{font-style:normal;color:#10B981}

/* ── Action bar (inline bottom) ── */
.na-actions{display:flex;gap:16px;padding:24px 0;border-top:1px solid rgba(8,19,26,.14);margin-top:36px}
.na-act{height:36px;border-radius:100px;border:1px solid rgba(8,19,26,.14);background:#fff;display:flex;align-items:center;gap:6px;padding:0 16px;cursor:pointer;transition:border-color .2s;font-size:13px;color:rgba(8,19,26,.5)}
.na-act:hover{border-color:#A3E635}
.na-act svg{width:16px;height:16px}

/* ── Sources ── */
.na-sources{padding:24px 0;border-top:1px solid rgba(8,19,26,.14);margin-top:36px;font-size:13px;color:rgba(8,19,26,.5);line-height:1.8}
.na-sources-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:8px;color:rgba(8,19,26,.33)}
.na-sources a{color:rgba(8,19,26,.66);text-decoration:underline;text-decoration-color:rgba(8,19,26,.14)}
.na-sources p{margin-bottom:2px}

/* ── Author bio bottom ── */
.na-bio{border-top:1px solid rgba(8,19,26,.14);padding:32px 0;display:flex;gap:16px;align-items:flex-start}
.na-bio-icon{width:56px;height:56px;border-radius:50%;background:#0A0A0A;display:flex;align-items:center;justify-content:center;color:#A3E635;font-family:'DM Sans',sans-serif;font-weight:700;font-size:22px;flex-shrink:0}
.na-bio-text{font-size:14px;color:rgba(8,19,26,.66);line-height:1.8}
.na-bio-name{font-size:16px;font-weight:700;color:#08131A;margin-bottom:4px}

/* ── Mobile ── */
@media(max-width:768px){
  .nl{padding:0 16px}
  .na-h1{font-size:24px;line-height:36px;margin-top:32px}
  .na-body{font-size:16px;line-height:32px}
  .na-body p{margin-bottom:32px}
  .na-body h2,.na-body h3{font-size:18px}
  .na-cover-text{font-size:18px}
}