/* ============================================
   ネムリノミカタ — Sleep Affiliate Media
   Design System v4.0
   Source: 快眠タイムズ (kaimin-times.com) CSS
         × 山田朱織枕研究所 (makura.co.jp) CSS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

:root {
  /* === makura.co.jp 実コード由来 === */
  --teal: #7fc0b1;           /* makura: primary (header, btn, accent, footer全て) */
  --teal-hover: #a1d1c6;     /* makura: a:hover */
  --teal-link: #489180;      /* makura: a { color } */
  --teal-bg: #e5eeed;        /* makura: borders, backgrounds, figure bg */
  --teal-bg-light: #f5f8f8;  /* makura: section backgrounds */
  --pink: #e5658b;           /* makura: .c-btn--red, CTA予約ボタン */
  --text: #676767;           /* makura: body color, p color */
  --heading: #333;           /* makura: h2,h3,h4 color */

  /* === kaimin-times.com 実コード由来 === */
  --navy: #052464;           /* kaimin: --color-button: 5,36,100 */
  --bg-white: #ffffff;       /* kaimin: --color-background: 255,255,255 */

  /* === 共通 === */
  --border: #e5e5e5;         /* makura: commonPages h3 border */
  --shadow-green: 2px 2px 5px 2px rgba(50,139,110,.1);  /* makura: .l-error__panel */

  /* Rating */
  --star: #e8a948;

  /* Feedback */
  --green: #4caf78;
  --green-bg: #eef8f0;
  --red: #d4574a;
  --red-bg: #fdf0ef;

  /* Typography — makura: Georgia + 游明朝 serif stack */
  --font-sans: 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-serif: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif;

  /* Spacing & Radius — makura: border-radius: 10px, 25px pill */
  --radius: 10px;
  --radius-pill: 25px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  color: var(--text);            /* makura: body color #676767 */
  background: var(--bg-white);
  line-height: 1.75;            /* makura: p { line-height: 1.75 } */
  font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--teal-link);      /* makura: a { color: #489180 } */
  text-decoration: none;
  transition: all .2s ease;     /* makura: transition: all .2s ease */
}
a:hover { color: var(--teal-hover); }  /* makura: a:hover { color: #a1d1c6 } */

/* --- Layout --- */
/* makura: .inner { max-width: 1150px } */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.content-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================
   Right Accent Stripe — makura.co.jp 独自デザイン
   .wrap::after { width:9px; background:#7fc0b1; position:fixed; right:0 }
   ========================================== */
body::after {
  content: "";
  display: block;
  width: 7px;
  height: 100vh;
  background: var(--teal);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;
}
@media (max-width: 768px) { body::after { content: none; } }

/* ==========================================
   Header — makura: .hdr { height:70px; background:#fff; position:fixed }
   ========================================== */
.site-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--teal-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;                  /* makura: .hdr { height: 70px } */
}
/* makura: nav links use serif font */
.site-logo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--heading);
  letter-spacing: .04em;
}
.site-logo span { color: var(--teal); }
.nav-list {
  display: flex;
  list-style: none;
  gap: 4px;
}
/* makura: .hdr__nav_list a { text-decoration:none; font-family: serif } */
.nav-list a {
  color: var(--text);
  font-size: .85rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: all .2s ease;
  font-family: var(--font-serif);
  text-decoration: none;
}
.nav-list a:hover {
  color: var(--teal-hover);       /* makura: li:hover a { color: #a1d1c6 } */
  background: var(--teal-bg-light);
}
@media (max-width: 900px) {
  .nav-list { display: none; }
  .header-inner { height: 56px; }
  .site-logo { font-size: 1.2rem; }
}

/* ==========================================
   Trust Bar
   ========================================== */
.trust-bar {
  background: var(--teal-bg-light);  /* makura: #f5f8f8 */
  padding: 10px 0;
  border-bottom: 1px solid var(--teal-bg);
}
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 28px;
  font-size: .78rem;
  color: var(--text);
  font-weight: 400;
}
.trust-badges span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-icon {
  width: 15px; height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .trust-badges { gap: 14px; font-size: .72rem; }
}

/* ==========================================
   Hero — makura: 白ベース、Utsukushi/serif大見出し
   ========================================== */
.hero {
  background: var(--bg-white);
  padding: 80px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--teal-bg);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: var(--teal-bg-light);
  border: 1px solid var(--teal-bg);
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: normal;            /* makura: Utsukushi is normal weight */
  line-height: 1.6;
  margin-bottom: 18px;
  color: var(--heading);
  letter-spacing: .06em;
}
.hero h1 em {
  font-style: normal;
  color: var(--teal);
}
.hero p {
  font-size: .95rem;
  color: var(--text);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.75;
}
@media (max-width: 768px) {
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 1.6rem; }
}

/* --- Category Nav --- */
/* makura: .c-btn--default { color:#7fc0b1; border-color:#7fc0b1; border-radius:25px } */
.category-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: var(--bg-white);
  border: 1.5px solid var(--teal-bg);
  border-radius: var(--radius-pill);  /* makura: 25px pill */
  color: var(--text);
  font-size: .85rem;
  font-weight: 500;
  transition: all .3s ease;
}
.cat-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-bg-light);
}
.cat-chip-icon {
  width: 18px; height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   Section
   kaimin: .title-wrapper-with-link { border-top/bottom, color: --base-blue }
   ========================================== */
.section { padding: 80px 0; }   /* makura: section padding 100px→80px */
.section-header {
  margin-bottom: 40px;
  padding: 16px 0;
  border-top: 2px solid var(--border);   /* kaimin: section title border-top */
  border-bottom: 2px solid var(--border); /* kaimin: section title border-bottom */
  text-align: center;
}
.section-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--heading);
  letter-spacing: .04em;
}
.section-sub {
  font-size: .85rem;
  color: var(--text);
  margin-top: 4px;
}

/* ==========================================
   Article Card
   makura: border-radius:10px, shadow: rgba(50,139,110,.1)
   ========================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.article-card {
  background: var(--bg-white);
  border-radius: var(--radius);   /* makura: 10px */
  overflow: hidden;
  border: 1px solid var(--teal-bg);
  transition: all .3s ease;
  display: block;
  color: inherit;
}
.article-card:hover {
  box-shadow: var(--shadow-green);  /* makura: green-tinted shadow */
  border-color: var(--teal);
  color: inherit;
}
.card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
  background-color: var(--teal-bg);  /* makura: figure { background-color: #e5eeed } */
}
/* カテゴリ別サムネイル — makuraの #e5eeed 基調に少しカテゴリ色を足す */
.card-thumb-mattress { background: linear-gradient(135deg, #e5eeed, #d8ebe5); }
.card-thumb-pillow { background: linear-gradient(135deg, #eae5ee, #e0d8e8); }
.card-thumb-bedding { background: linear-gradient(135deg, #e5eeed, #d5e8e2); }
.card-thumb-gadget { background: linear-gradient(135deg, #e5eaef, #dae0e8); }
.card-thumb-environment { background: linear-gradient(135deg, #e5ecee, #dae4e6); }
.card-thumb-default { background: var(--teal-bg); }

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-body { padding: 20px 22px 14px; }
.card-cat {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
/* makura風: ティール系のカテゴリカラー */
.cat-mattress { color: var(--teal-link); background: var(--teal-bg); }
.cat-pillow { color: #7a5ea0; background: #ede8f2; }
.cat-bedding { color: var(--teal-link); background: var(--teal-bg); }
.cat-gadget { color: #4a6080; background: #e5eaf0; }
.cat-environment { color: #4a6070; background: #e5ecee; }

.card-body h3 {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--heading);
}
.card-body p {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--teal-bg);
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .76rem;
  color: #999;
}
.card-arrow {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal-bg-light);
  color: var(--teal);
  transition: all .3s ease;
}
.article-card:hover .card-arrow {
  background: var(--teal);
  color: var(--bg-white);
}

/* ==========================================
   Sidebar
   makura: panels with border-radius:10px, green-tinted shadow
   ========================================== */
.sidebar { position: sticky; top: 84px; }
.side-box {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  border: 1px solid var(--teal-bg);
  box-shadow: var(--shadow-green);
}
.side-box h4 {
  font-family: var(--font-serif);
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--teal-bg);
  color: var(--heading);
}
.side-list { list-style: none; }
.side-list li { margin-bottom: 10px; }
.side-list a {
  font-size: .84rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .2s ease;
}
/* makura: .breadcrumb-item::after uses Font Awesome arrow, simplified to dot */
.side-list a::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
}
.side-list a:hover { color: var(--teal-hover); }

/* --- Ranking Badge --- */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;           /* makura: border-radius:100% */
  font-size: .72rem;
  font-weight: 700;
  color: var(--bg-white);
  flex-shrink: 0;
}
.rank-1 { background: var(--star); }
.rank-2 { background: #a0a8b4; }
.rank-3 { background: #b08968; }

/* ==========================================
   Article Page
   ========================================== */

/* Breadcrumb — makura: .breadcrumb-item { font-size:1.2rem; color:#999 } */
.breadcrumb {
  padding: 16px 0;
  font-size: .8rem;
  color: #999;
}
.breadcrumb a { color: var(--teal-hover); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb span { margin: 0 8px; color: var(--teal-bg); }

/* Article Header */
.article-header { margin-bottom: 40px; }
.article-header .card-cat { margin-bottom: 14px; }
.article-header h1 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.55;
  color: var(--heading);
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .82rem;
  color: #999;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .article-header h1 { font-size: 1.35rem; }
}

/* Article Body */
/* makura commonPages h2: background:#7fc0b1; border-radius:10px; color:#fff; center */
.article-body h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--bg-white);
  background: var(--teal);       /* makura: .c-ttl_green-bottom-arrow { background: #7fc0b1 } */
  text-align: center;
  padding: 10px 16px;
  border-radius: var(--radius);  /* makura: border-radius:10px */
  margin: 56px 0 24px;
  position: relative;
  letter-spacing: .04em;
}
/* makura: .c-ttl_green-bottom-arrow::before — 下向き三角 */
.article-body h2::after {
  content: "▼";
  display: block;
  font-size: 1.2rem;
  position: absolute;
  bottom: -12px;
  left: 50%;
  margin-left: -.6rem;
  color: var(--teal);
  line-height: 0;
}

/* makura: commonPages h4 { border-left:#7fc0b1 solid 4px; serif font } */
.article-body h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: normal;
  color: var(--heading);
  margin: 40px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--teal);  /* makura: border-left:#7fc0b1 solid 4px */
  line-height: 1.3;
}
.article-body p {
  margin-bottom: 20px;
  color: var(--text);
  line-height: 1.75;            /* makura: p { line-height: 1.75 } */
  font-size: .95rem;
}
.article-body ul, .article-body ol {
  margin: 0 0 20px 20px;
  color: var(--text);
}
.article-body li {
  margin-bottom: 8px;
  line-height: 1.75;
  font-size: .95rem;
}

/* --- Point Box --- */
.point-box {
  background: var(--teal-bg-light);  /* makura: #f5f8f8 */
  border: 1px solid var(--teal-bg);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 28px 0;
}
.point-box.warning {
  background: #fdf5f0;
  border-color: #f0d8c8;
}
.point-box h4 {
  font-size: .92rem;
  font-weight: bold;
  color: var(--teal-link);
  margin-bottom: 12px;
}
.point-box.warning h4 { color: var(--pink); }
.point-box ul { margin: 0; list-style: none; }
.point-box li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--text);
}
.point-box li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 600;
  font-size: .85rem;
}
.point-box.warning li::before { content: "!"; color: var(--pink); font-weight: 700; }

/* Key Takeaway */
.key-takeaway {
  background: var(--teal-bg-light);
  border: 1px solid var(--teal-bg);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 28px 0;
  position: relative;
}
.key-takeaway::before {
  content: "POINT";
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--teal);
  color: var(--bg-white);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 4px;
  letter-spacing: .06em;
}

/* ==========================================
   Comparison Table
   kaimin: clean Shopify table style
   makura: table td { color:#676767 }
   ========================================== */
.table-wrapper {
  overflow-x: auto;
  margin: 28px 0;
  border-radius: var(--radius);
  border: 1px solid var(--teal-bg);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
  background: var(--bg-white);
  min-width: 580px;
}
.comparison-table thead {
  background: var(--teal);       /* makura: 見出し行をティールに */
  color: var(--bg-white);
}
.comparison-table th {
  padding: 13px 16px;
  font-weight: 500;
  text-align: left;
  font-size: .82rem;
}
.comparison-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--teal-bg);
  vertical-align: middle;
  color: var(--text);
}
.comparison-table tbody tr { transition: background .15s; }
.comparison-table tbody tr:hover { background: var(--teal-bg-light); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table .product-name { font-weight: 600; color: var(--heading); }
.comparison-table .price { color: var(--teal-link); font-weight: 600; }
.comparison-table .rating { color: var(--star); letter-spacing: 1px; }

/* ==========================================
   CTA — makura: .c-btn { border-radius:25px; height:50px; width:320px; serif }
   ========================================== */
.cta-block {
  text-align: center;
  margin: 32px 0;
  padding: 28px;
  background: var(--teal-bg-light);
  border-radius: var(--radius);
  border: 1px solid var(--teal-bg);
}
/* makura: .c-btn { border-radius:25px; border-width:2px; serif font; letter-spacing:1px } */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 280px;
  padding: 14px 36px;
  background: var(--pink);        /* makura: .c-btn--red { background:#e5658b } */
  color: var(--bg-white);
  font-size: .95rem;
  font-weight: bold;
  border-radius: var(--radius-pill);  /* makura: 25px */
  transition: all .3s ease;
  border: 2px solid var(--pink);  /* makura: border-width:2px */
  cursor: pointer;
  letter-spacing: 1px;           /* makura: letter-spacing:1px */
  font-family: var(--font-serif);  /* makura: .c-btn uses serif */
  text-decoration: none;
}
.cta-btn:hover {
  background: transparent;
  color: var(--pink);            /* makura: .c-btn--red:hover */
}
/* makura: .c-btn--default { color:#7fc0b1; border-color:#7fc0b1 } */
.cta-btn-secondary {
  background: var(--bg-white);
  color: var(--teal);
  border: 2px solid var(--teal);
}
.cta-btn-secondary:hover {
  background: var(--teal);
  color: var(--bg-white);
}
.cta-sub {
  display: block;
  margin-top: 10px;
  font-size: .78rem;
  color: #999;
}

/* ==========================================
   Product Card
   makura: panels with border-radius:10px, green shadow
   ========================================== */
.product-card {
  background: var(--bg-white);
  border: 1px solid var(--teal-bg);
  border-radius: var(--radius);
  padding: 30px;
  margin: 32px 0;
  transition: all .3s ease;
  box-shadow: var(--shadow-green);
}
.product-card:hover { border-color: var(--teal); }
.product-card.recommended {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), var(--shadow-green);
}
/* makura: 小さなティールのバッジ */
.product-card .rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal);
  color: var(--bg-white);
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.product-card h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: normal;
  margin-bottom: 8px;
  color: var(--heading);
}
.product-card .price-tag {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 16px;
  font-family: var(--font-serif);
}
.product-card .price-tag small {
  font-size: .85rem;
  font-weight: 400;
  color: var(--text);
}
.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin: 16px 0;
  font-size: .87rem;
}
.spec-list dt { color: #999; font-weight: 400; }
.spec-list dd { color: var(--heading); font-weight: 600; }

/* --- Score Bar --- */
.score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: .84rem;
}
.score-label {
  width: 80px;
  flex-shrink: 0;
  color: #999;
  font-weight: 400;
}
.score-bar {
  flex: 1;
  height: 7px;
  background: var(--teal-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--teal);        /* makura: ティール一色 */
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.score-value {
  width: 32px;
  text-align: right;
  font-weight: 600;
  color: var(--heading);
  font-size: .82rem;
}

/* --- Merit / Demerit --- */
.merit-demerit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.merit-list, .demerit-list {
  padding: 18px 20px;
  border-radius: var(--radius);
  font-size: .86rem;
}
.merit-list { background: var(--green-bg); }
.merit-list h5 { color: var(--green); font-size: .8rem; font-weight: 600; margin-bottom: 8px; }
.demerit-list { background: var(--red-bg); }
.demerit-list h5 { color: var(--red); font-size: .8rem; font-weight: 600; margin-bottom: 8px; }
.merit-list ul, .demerit-list ul { list-style: none; margin: 0; }
.merit-list li, .demerit-list li { padding-left: 16px; position: relative; margin-bottom: 4px; line-height: 1.65; color: var(--text); }
.merit-list li::before { content: "+"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.demerit-list li::before { content: "-"; position: absolute; left: 2px; color: var(--red); font-weight: 700; }
@media (max-width: 600px) { .merit-demerit { grid-template-columns: 1fr; } }

/* ==========================================
   TOC
   makura: background #f5f8f8, border-radius 10px
   ========================================== */
.toc {
  background: var(--teal-bg-light);
  border: 1px solid var(--teal-bg);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 28px 0;
}
.toc h4 {
  font-family: var(--font-serif);
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: 14px;
  color: var(--heading);
}
.toc ol { margin: 0; padding-left: 22px; }
.toc li { margin-bottom: 8px; font-size: .87rem; line-height: 1.5; }
.toc a { color: var(--teal-link); }
.toc a:hover { color: var(--teal-hover); }

/* ==========================================
   Author Box — makura: warm bg, serif
   ========================================== */
.author-box {
  display: flex;
  gap: 20px;
  background: var(--teal-bg-light);
  border: 1px solid var(--teal-bg);
  border-radius: var(--radius);
  padding: 24px;
  margin: 48px 0 0;
}
.author-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--teal-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-serif);
}
.author-info h4 {
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--heading);
}
.author-info p {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.75;
}

/* Related */
.related-articles {
  margin: 48px 0 0;
  padding: 28px;
  background: var(--teal-bg-light);
  border-radius: var(--radius);
  border: 1px solid var(--teal-bg);
}
.related-articles h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--heading);
}

/* ==========================================
   Footer — makura: #7fc0b1 accent, serif
   ========================================== */
.site-footer {
  background: var(--teal-bg-light);
  border-top: 1px solid var(--teal-bg);
  color: var(--text);
  padding: 48px 0 32px;
  margin-top: 80px;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--teal-bg);
}
.footer-brand .site-logo { margin-bottom: 12px; }
.footer-brand p { font-size: .82rem; line-height: 1.75; color: var(--text); }
.footer-col h5 {
  font-family: var(--font-serif);
  font-size: .82rem;
  font-weight: bold;
  color: var(--heading);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--text); font-size: .84rem; }
.footer-col a:hover { color: var(--teal-hover); }
.footer-bottom {
  text-align: center;
  font-size: .78rem;
  color: var(--teal);            /* makura: .ftr__copyright { color:#7fc0b1 } */
}
.footer-bottom p { margin-bottom: 4px; }
@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
}

/* Legacy footer */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.footer-links a { color: var(--text); font-size: .82rem; }
.footer-links a:hover { color: var(--teal-hover); }

/* --- Utility --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.text-center { text-align: center; }