/* Hallmark · component: answers article template · theme: studied-DNA (light / grotesk-sans / chromatic-green)
 * pre-emit critique: P4 H5 E4 S4 R4 V4
 * scope: /answers/ ハブ + 記事ページ共通 · tokens: /tokens.css
 */

/* ---- base (hub / article 共通) ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.85;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px}
/* 本文リンクのみ下線＋アクセント（ヘッダー/フッター/部品クラスは上書き可能な低詳細度で） */
:where(main.article,main.hub) a{color:var(--color-accent-deep);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
:where(main.article,main.hub) a:hover{color:var(--color-accent)}
.crumb a{color:var(--color-muted)}
.crumb a:hover{color:var(--color-ink)}

/* header (トップページと共通のN1bヘッダー · styles.cssから移植) */
.container{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gutter)}
header.site{position:sticky;top:0;z-index:var(--z-sticky);
  background:color-mix(in oklch, var(--color-paper) 92%, transparent);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
header.site.is-scrolled{background:color-mix(in oklch, var(--color-paper) 80%, transparent);
  backdrop-filter:blur(16px) saturate(160%);border-bottom-color:var(--color-rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);height:4.25rem}
.brand{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-outlier);
  font-weight:700;font-size:var(--text-md);letter-spacing:-0.02em;white-space:nowrap;color:var(--color-ink)}
.brand-mark{width:22px;height:22px;border-radius:7px;background:var(--color-accent);position:relative;flex:0 0 auto}
.brand-mark::after{content:"";position:absolute;inset:6px;background:var(--color-paper);border-radius:3px}
.brand-sub{font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);
  color:var(--color-muted);letter-spacing:.01em;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:var(--space-lg)}
.nav-center{display:flex;gap:var(--space-lg);font-size:var(--text-sm);font-weight:500;color:var(--color-muted)}
.nav-center a{white-space:nowrap;padding:var(--space-2xs) var(--space-2xs)}
.nav-center a:hover,.nav-center a:active{color:var(--color-ink)}
.nav-center a[aria-current="page"]{color:var(--color-ink);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  font-weight:700;font-family:var(--font-body);border-radius:var(--radius-pill);
  padding:var(--space-sm) var(--space-xl);font-size:var(--text-base);line-height:1.5;
  white-space:nowrap;cursor:pointer;border:none;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn-primary{background:var(--color-ink);color:var(--color-paper)}
.btn-primary::after{content:"→";font-family:var(--font-body)}
@media(hover:hover){.btn-primary:hover{background:var(--color-ink-2)}}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
@media(pointer:coarse){.btn{min-height:48px}}
.nav-cta{padding:var(--space-xs) var(--space-lg);font-size:var(--text-sm)}
.nav-cta .cta-short{display:none}
@media(max-width:56.25rem){.nav-center{display:none}}
@media(max-width:34rem){.nav-cta .cta-full{display:none}.nav-cta .cta-short{display:inline}}
@media(max-width:26rem){
  .nav{gap:var(--space-sm)}
  .brand{font-size:var(--text-base)}
  .brand-sub{display:none}
  .nav-cta{padding:var(--space-xs) var(--space-md)}
}

/* breadcrumb */
.crumb{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-lg)}
.crumb a{color:var(--color-muted)}

/* ================= article ================= */
main.article{max-width:44rem;margin:0 auto;padding:var(--space-xl) var(--page-gutter) var(--space-3xl)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.article-aside{display:none}

/* デスクトップ: 本文 + 追従サイドバー（目次・CTA）の2カラム */
@media (min-width:1024px){
  main.article{max-width:69rem}
  .article-grid{grid-template-columns:minmax(0,44rem) 18rem;
    gap:var(--space-2xl);justify-content:center}
  .article-aside{display:block}
  .article-main > .toc{display:none}
  .aside-sticky{position:sticky;top:4.5rem;
    max-height:calc(100vh - 5.5rem);overflow-y:auto;
    display:flex;flex-direction:column;gap:var(--space-lg);
    padding-bottom:var(--space-md)}
}

/* サイドバー目次: 1カラム・コンパクト */
.toc.toc--side{margin:0;padding:var(--space-md)}
.toc.toc--side ol{grid-template-columns:minmax(0,1fr);gap:0}
.toc.toc--side li:last-child{border-bottom:0}
.toc.toc--side li a{font-size:var(--text-xs);line-height:1.55;padding:0.5em 0.1em}

/* サイドバーCTAカード */
.side-cta{background:var(--grad-cta);border-radius:var(--radius-card);
  padding:var(--space-lg);color:var(--color-ink-inv);text-align:center}
.side-cta-title{font-family:var(--font-display);font-weight:700;
  font-size:var(--text-base);margin:0 0 var(--space-xs)}
.side-cta-text{font-size:var(--text-xs);color:var(--color-muted-inv);
  line-height:1.8;margin:0 0 var(--space-md);text-align:left}
.side-cta .cta-btn{display:block;font-size:var(--text-sm);padding:0.7rem 1rem}

main.article h1{
  font-family:var(--font-display);font-weight:900;color:var(--color-ink-2);
  font-size:var(--text-2xl);line-height:1.4;letter-spacing:-0.01em;margin:0 0 var(--space-md)}
.byline{
  font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-xl);
  padding-bottom:var(--space-md);border-bottom:1px solid var(--color-rule)}

/* h2 = 帯ブロック見出し（左アクセントバー） */
main.article h2{
  position:relative;
  font-family:var(--font-display);font-weight:700;color:var(--color-ink-2);
  font-size:var(--text-lg);line-height:1.45;
  margin:var(--space-2xl) 0 var(--space-lg);
  padding:0.6em 0.9em 0.6em calc(0.9em + 6px);
  background:var(--color-paper-2);border-radius:var(--radius-inner);
  scroll-margin-top:5rem}
main.article h2::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--color-accent);
  border-radius:var(--radius-inner) 0 0 var(--radius-inner)}

/* h3 = バーアクセント見出し */
main.article h3{
  display:flex;align-items:flex-start;gap:0.55em;
  font-family:var(--font-display);font-weight:700;color:var(--color-ink-2);
  font-size:var(--text-md);line-height:1.5;
  margin:var(--space-xl) 0 var(--space-sm);scroll-margin-top:5rem}
main.article h3::before{
  content:"";flex:none;width:1em;height:5px;border-radius:3px;
  background:var(--color-accent);margin-top:calc(0.75em - 2px)}

p{margin:0 0 var(--space-md)}
ul,ol{margin:0 0 var(--space-md);padding-left:1.4em}
li{margin:0.35em 0}
strong{font-weight:700;color:var(--color-ink-2)}
hr{display:none}
code{font-family:var(--font-mono,ui-monospace,monospace);font-size:0.92em;
  background:var(--color-paper-3);padding:0.12em 0.4em;border-radius:6px}

/* 蛍光マーカー強調（本文のstrongのみ・見出しや表は対象外） */
main.article p strong,
main.article li strong{
  background:linear-gradient(transparent 62%,var(--color-marker) 62%);
  padding:0 0.08em}

/* 目次（サーバー側で自動挿入） */
.toc{
  background:var(--color-paper-2);border:1px solid var(--color-rule);
  border-radius:var(--radius-card);padding:var(--space-lg);margin:var(--space-xl) 0}
.toc-label{
  display:flex;align-items:center;gap:0.5em;margin:0 0 var(--space-sm);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-base);color:var(--color-ink-2)}
.toc-label::before{content:"";width:1em;height:5px;border-radius:3px;background:var(--color-accent)}
.toc ol{
  list-style:none;margin:0;padding:0;counter-reset:toc;
  display:grid;grid-template-columns:minmax(0,1fr)}
.toc li{counter-increment:toc;margin:0;border-bottom:1px solid var(--color-rule)}
.toc li a{
  display:flex;gap:0.6em;align-items:baseline;padding:0.55em 0.15em;
  color:var(--color-ink);text-decoration:none;font-size:var(--text-sm);line-height:1.6}
.toc li a::before{
  content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--font-outlier);font-weight:700;font-size:var(--text-xs);
  color:var(--color-accent-deep)}
.toc li a:hover{color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:3px}

/* callouts */
.callout{border-radius:var(--radius-card);padding:var(--space-lg);margin:var(--space-lg) 0;
  border:1px solid var(--color-rule-2)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout .label{display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xs);letter-spacing:0.02em;margin-bottom:var(--space-sm)}
.callout-summary{background:var(--color-accent-wash);border-color:var(--color-wash-rule)}
.callout-summary .label{
  background:var(--color-accent-deep);color:var(--color-ink-inv);
  padding:0.3em 0.9em;border-radius:var(--radius-pill)}
.callout-point{background:var(--color-paper-2);border-left:4px solid var(--color-accent)}
.callout-note{background:var(--color-paper-2);border-style:dashed}
.callout-note .label{color:var(--color-accent-deep)}
.callout small{color:var(--color-muted)}
.callout code{background:oklch(100% 0 0 / 0.55)}

/* tables */
.tbl-wrap{overflow-x:auto;margin:var(--space-lg) 0;
  border:1px solid var(--color-rule-2);border-radius:var(--radius-inner)}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:1.7}
th,td{border:0;border-bottom:1px solid var(--color-rule);
  padding:0.65rem 0.85rem;text-align:left;vertical-align:top}
th+th,th+td,td+td{border-left:1px solid var(--color-rule)}
thead th{background:var(--color-accent-wash);font-family:var(--font-display);
  font-weight:700;color:var(--color-ink-2);border-bottom:1px solid var(--color-rule-2)}
tbody th{background:var(--color-paper-2);font-weight:700}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* checklist */
.checklist{list-style:none;padding-left:0}
.checklist li{position:relative;padding-left:1.9em;margin:0.5em 0}
.checklist li::before{
  content:"";position:absolute;left:0;top:0.28em;width:1.15em;height:1.15em;
  border:2px solid var(--color-rule-2);border-radius:5px;background:var(--color-paper)}

/* faq */
main.article .faq h3{align-items:flex-start;font-size:var(--text-base);margin:var(--space-lg) 0 var(--space-xs)}
main.article .faq h3::before{
  content:"Q";width:1.7em;height:1.7em;margin-top:0.05em;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-accent-deep);color:var(--color-ink-inv);
  font-family:var(--font-outlier);font-size:0.85em;font-weight:700}
.faq p{color:var(--color-ink)}

/* related */
.related{list-style:none;padding:0;margin:var(--space-md) 0;
  border:1px solid var(--color-rule);border-radius:var(--radius-card);overflow:hidden}
.related li{margin:0;padding:0.8em 1em 0.8em 2.4em;position:relative}
.related li+li{border-top:1px solid var(--color-rule)}
.related li::before{content:"→";position:absolute;left:1em;
  color:var(--color-accent-deep);font-weight:700}

/* cta band */
.cta-band{background:var(--grad-cta);color:var(--color-ink-inv);border-radius:var(--radius-band);
  padding:var(--space-xl);margin:var(--space-2xl) 0;text-align:center}
main.article .cta-band h2,.cta-band h2{
  font-family:var(--font-display);font-weight:700;color:var(--color-ink-inv);
  font-size:var(--text-lg);line-height:1.4;
  background:none;border:0;padding:0;margin:0 0 var(--space-xs)}
main.article .cta-band h2::before{content:none}
.cta-band p{color:var(--color-muted-inv);margin:0 0 var(--space-lg)}
.cta-btn{display:inline-block;background:var(--color-paper);color:var(--color-accent-deep);
  font-weight:700;text-decoration:none;padding:0.8rem 1.6rem;border-radius:var(--radius-pill)}
.cta-btn:hover{color:var(--color-accent-deep);filter:brightness(0.97)}

/* owner + notice */
.owner{background:var(--color-paper-2);border:1px solid var(--color-rule);
  border-radius:var(--radius-card);padding:var(--space-lg);margin:var(--space-xl) 0;font-size:var(--text-sm)}
.owner dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0.3em 1em}
.owner dt{color:var(--color-muted)}
.owner dd{margin:0}
.notice{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-xl)}

/* ================= hub（特集・コラム一覧） ================= */
main.hub{max-width:44rem;margin:0 auto;padding:var(--space-xl) var(--page-gutter) var(--space-3xl)}
main.hub h1{
  font-family:var(--font-display);font-weight:900;color:var(--color-ink-2);
  font-size:var(--text-2xl);line-height:1.35;letter-spacing:-0.01em;margin:0 0 var(--space-sm)}
.lead{color:var(--color-muted);margin:0 0 var(--space-lg)}

.hub-grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  main.hub{max-width:71rem}
  .hub-grid{grid-template-columns:minmax(0,44rem) 320px;
    gap:var(--space-2xl);justify-content:center}
}

/* 種別タブ */
.type-tabs{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0 0 var(--space-md)}
.type-tab{
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;
  color:var(--color-muted);background:var(--color-paper);
  border:1px solid var(--color-rule-2);border-radius:var(--radius-pill);
  padding:0.4em 1.1em;cursor:pointer;white-space:nowrap;
  transition:color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out)}
.type-tab:hover{border-color:var(--color-accent);color:var(--color-accent-deep)}
.type-tab.is-active{background:var(--color-accent-deep);border-color:var(--color-accent-deep);
  color:var(--color-paper);font-weight:700}
.type-tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* 記事リスト（行型） */
.post-list{margin:0 0 var(--space-xl);border-top:1px solid var(--color-rule)}
.post{display:flex;gap:var(--space-lg);align-items:flex-start;justify-content:space-between;
  padding:var(--space-lg) 0;border-bottom:1px solid var(--color-rule);
  text-decoration:none;color:inherit}
.post b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-md);color:var(--color-ink-2);line-height:1.5;
  transition:color var(--dur-short) var(--ease-out)}
.post:hover b{color:var(--color-accent-deep)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);
  margin:0.55em 0 0;font-size:var(--text-xs);color:var(--color-muted)}
.post-type{display:inline-block;background:var(--color-accent-wash);
  border:1px solid var(--color-wash-rule);color:var(--color-accent-deep);
  font-weight:700;border-radius:var(--radius-pill);padding:0.15em 0.8em}
.post-desc{font-size:var(--text-sm);color:var(--color-muted);margin:0.55em 0 0;line-height:1.8}
.post-thumb{width:200px;aspect-ratio:16/10;height:auto;object-fit:cover;
  border-radius:10px;flex:none;border:1px solid var(--color-rule)}
.post-empty{color:var(--color-muted);padding:var(--space-lg) 0;
  border-bottom:1px solid var(--color-rule);margin:0}

/* サイドバー: おすすめ記事 */
.mini-list{background:var(--color-white);border:1px solid var(--color-rule);
  border-radius:var(--radius-card);padding:var(--space-md)}
.mini-list .toc-label{margin-bottom:var(--space-xs)}
.mini-item{display:flex;gap:var(--space-sm);align-items:flex-start;justify-content:space-between;
  padding:var(--space-sm) 0.1em;border-bottom:1px solid var(--color-rule);
  text-decoration:none;color:inherit}
.mini-item:last-child{border-bottom:0;padding-bottom:0.2em}
.mini-item b{display:block;font-size:var(--text-xs);font-weight:700;
  color:var(--color-ink);line-height:1.6;
  transition:color var(--dur-short) var(--ease-out)}
.mini-item:hover b{color:var(--color-accent-deep)}
.mini-item small{display:block;color:var(--color-muted);font-size:var(--text-xs);margin-top:0.3em}
.mini-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none;
  border:1px solid var(--color-rule)}

/* footer */
footer.site{background:var(--color-paper-inv-2);color:var(--color-muted-inv);
  padding:var(--space-xl) var(--page-gutter);margin-top:var(--space-2xl)}
footer.site .in{max-width:var(--page-max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;align-items:center}
footer.site a{color:var(--color-accent-inv)}
footer .brand-f{font-family:var(--font-display);font-weight:900;color:var(--color-ink-inv)}
footer .legal{font-size:var(--text-xs);line-height:1.7}

/* ---- variants ---- */
/* Preserve the migration-guide related-list treatment. */
.article--plain-related .related{border:0;border-radius:0;overflow:visible}
.article--plain-related .related li{margin:0.6em 0;padding:0;position:static}
.article--plain-related .related li+li{border-top:0}
.article--plain-related .related li::before{content:none}

/* ---- mobile ---- */
@media (max-width:640px){
  main.article h1,main.hub h1{font-size:var(--text-xl)}
  main.article h2{font-size:var(--text-md)}
  main.article{padding-top:var(--space-lg)}
  main.hub{padding-top:var(--space-lg)}
  .post{gap:var(--space-md)}
  .post-thumb{width:104px;aspect-ratio:1/1}
  .post-desc{display:none}
}