/* =============================================================
   Orbit / Neratriad 公式サイト — 共通スタイル
   ルール
     - 地に純白を使わない。白はカードだけ（Paper / Canvas Cream）
     - カードに境界線を引かず、淡い影と面の色差で分ける
     - 影は最小。区切り線も引かず、余白と面の色で切る
     - 色はほぼモノクローム。強調色は情報リンクにだけ（monochrome）
     - ボタンはピル。カードの角丸は 12px
     - コンテナ 1200px / セクション間 96px / カード内余白 24px

   日本語のために変えたところ
     - 本文の行間を 1.5 → 1.9（長文を読ませるため）
     - 見出しの重さは 600 までだが、字詰めは palt で行う
     - 参考の Action Blue #0099ff は白地で 2.9:1 と不足するため、
       文字に使う青は #0066cc（5.4:1）へ落とした

   目次
     1. トークン / 2. 下地 / 3. 文字 / 4. 骨格 / 5. 部品
     6. 長文ページ / 7. ホーム / 8. 画面幅と印刷
   ============================================================= */


/* -------------------------------------------------------------
   0. 書体 ― Noto Sans JP（セルフホスト・サブセット）

   このサイトで実際に使っている文字だけを含む可変フォント1本。
   Google Fonts の css2 API に text= を渡して生成したものを
   site/assets/fonts/ に置いてある（実行時に外部へ取りに行かない）。

   - 可変フォントなのでウェイトごとにファイルを分けない。
     @font-face は1つだけ（計 211KB・1リクエスト）
   - unicode-range を付けてあるので、**サブセットに無い文字は
     自動的に次の書体（Hiragino Sans など）へ落ちる**。
     豆腐（□）にはならない
   - 本文を書き換えて新しい漢字が増えたら、README「書体の作り直し」
     の手順でサブセットを取り直す（やらなくても表示は壊れない）
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400 700;        /* 可変フォント1本で 400〜700 を賄う */
  font-display: swap;
  src: url(assets/fonts/noto-sans-jp-subset.woff2) format('woff2');
  unicode-range: U+23, U+2c-3a, U+3d, U+40-41, U+43-44, U+47, U+49, U+4d-50, U+52-53, U+61-69, U+6c-70, U+72-79, U+a9, U+2014, U+2192, U+3001-3002, U+300c-300f, U+301c, U+3041-3096, U+30a1-30fc, U+4e00, U+4e07, U+4e09-4e0b, U+4e0d, U+4e2d, U+4e86, U+4e8b, U+4ecb, U+4ed6, U+4ed8, U+4ee3-4ee5, U+4ef6, U+4f4d, U+4f53, U+4f5c, U+4f7f, U+4f9b, U+4fa1, U+4fb5, U+4fdd, U+4fe1, U+5019, U+5024, U+505c, U+5065, U+5099, U+50cf, U+511f, U+512a, U+5143, U+5148, U+514d, U+5165, U+5177, U+5185-5186, U+518d, U+5199, U+51e6, U+5206-5207, U+521d, U+5224-5225, U+5229, U+5236, U+524a, U+524d, U+529b, U+52a9, U+52b9, U+52d5, U+5316, U+533b, U+533f, U+5343, U+539f, U+53bb, U+53cd-53ce, U+53d6-53d7, U+53ef, U+53f7, U+5404, U+5408, U+540c-540d, U+5426, U+542b, U+544a, U+54c1, U+554f, U+55b6, U+56de, U+56e0, U+56fd, U+5747, U+57cb, U+57fa, U+5831, U+5834, U+5909, U+5916, U+5927, U+5931, U+59a8, U+59cb, U+5b58, U+5b66, U+5b89, U+5b9a, U+5bb3, U+5bb6, U+5bb9, U+5bfe, U+5c02, U+5c0f, U+5e0c, U+5e2b, U+5e38, U+5e73-5e74, U+5e83, U+5eb7, U+5f71, U+5f8c, U+5f93, U+5fa9, U+5fc5, U+5fdc, U+6027, U+60c5, U+60f3, U+610f, U+614b, U+6210, U+623b, U+624b, U+6255, U+6271, U+629c, U+62e0, U+632f, U+63a2, U+63a8, U+63d0, U+640d, U+64ae, U+64cd, U+652f, U+6539, U+6545, U+6570, U+6587, U+6599, U+65ad, U+65b0, U+65b9, U+65e5, U+65e9, U+660e, U+6642, U+6697, U+66f4, U+66f8, U+6700, U+6708-6709, U+671b, U+671f, U+672b-672c, U+6761, U+6790, U+679c, U+67fb, U+6804, U+683c, U+691c, U+696d, U+6a19, U+6a29, U+6a5f, U+6b21, U+6b62-6b63, U+6b8b, U+6bce, U+6c0f, U+6c42, U+6cbb, U+6cc1, U+6cd5, U+6ce8, U+6d88, U+6e21, U+6e96, U+70b9-70ba, U+7121, U+72b6, U+7406, U+751f, U+7528, U+7531, U+753b, U+7642, U+767a-767b, U+7684, U+76ee, U+76f4, U+76f8, U+771f, U+77e5, U+78ba, U+793a, U+793e, U+7981, U+79d2, U+79fb, U+7a2e, U+7a7a, U+7ae0, U+7aef, U+7b2c, U+7d04, U+7d20, U+7d22, U+7d39, U+7d42, U+7d44, U+7d4c, U+7d50, U+7d61, U+7d9a, U+7e2e, U+7f6e, U+7fd2, U+8005, U+80fd, U+81ea, U+8535, U+884c, U+8868, U+88dc, U+8981, U+898b, U+898f, U+89a7, U+89e3, U+8a00, U+8a18, U+8a2d, U+8a3a, U+8a3c, U+8a66, U+8a73, U+8a8d, U+8aac-8aad, U+8ab2, U+8abf, U+8ac7, U+8acb, U+8ca0, U+8cac, U+8ce0, U+8cea, U+8cfc, U+8d77, U+8d85, U+8de1, U+8eab, U+8fbc, U+8fd4, U+8ffd, U+9001, U+9014, U+901a, U+9023, U+904b, U+904e, U+9055, U+9078, U+90e8, U+914d, U+91cd, U+91d1, U+9332, U+9577, U+9580, U+958b, U+9593, U+95a2, U+9632, U+9650, U+9664, U+968f, U+969c, U+96c6, U+9762, U+9805-9806, U+984d, U+985e, U+98df, U+990a, U+ff01, U+ff03, U+ff05-ff06, U+ff08-ff0b, U+ff0d, U+ff0f-ff1b, U+ff1f;
}


/* -------------------------------------------------------------
   1. トークン
   ------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* 面 ― 段差は線ではなく色でつける */
  --canvas: #faf9f6;   /* 地（Intercom: Canvas Cream） */
  --band:   #f1eee9;   /* 一段沈めた帯（Intercom: Linen） */
  --card:   #ffffff;   /* カード（Cal/Intercom: Card White） */
  --paper:  #f4f4f4;   /* タグなどの補助面（Cal: Paper） */
  --note-bg: #f8f6f3;  /* 注記。帯より薄くして本文より前に出さない */

  /* 文字 ― 暖色寄りのニュートラル。青みがかった灰は使わない */
  --ink:   #111111;    /* 見出し・主要テキスト */
  --body:  #414141;    /* 本文 */
  --muted: #585858;    /* 補足 */
  --faint: #888888;    /* メタ・プレースホルダ */

  /* 線 ― ヘアラインのみ */
  --hairline: #dedbd6;

  /* 強調 ― 画面に1〜2箇所まで */
  --accent: #0066cc;
  --accent-soft: #eff6fe;

  /* 影 ― Cal のカード影をそのまま使う */
  --shadow-card: rgba(36, 36, 36, .05) 0 4px 8px 0;
  --shadow-card-raised: rgba(36, 36, 36, .7) 0 1px 5px -4px, rgba(36, 36, 36, .05) 0 4px 8px 0;

  /* 形 */
  --r-card: 12px;
  --r-input: 8px;
  --r-pill: 9999px;

  /* 文字の体系（PC基準。スマホは末尾のメディアクエリで一段下げる）
     用途ごとにここだけを見れば決まるようにする。個別ページで上書きしない。 */
  --t-hero:    52px;   /* ヒーロー見出し    700 */
  --t-title:   36px;   /* ページタイトル    700 */
  --t-section: 26px;   /* セクション見出し  600 */
  --t-heading: 24px;   /* 長文ページの条項  600 */
  --t-sub:     18px;   /* 小見出し          600 */
  --t-lead:    18px;   /* リード文          400 */
  --t-body:    16px;   /* 標準本文          400 */
  --t-body-sm: 15px;   /* 補助本文・カード  400 */
  --t-meta:    14px;   /* 注釈・日付        400 */
  --t-nav:     15px;   /* ナビゲーション    500 */
  --t-figure:  32px;   /* 数字             600 */

  /* 行間 */
  --lh-body: 1.9;      /* UI まわりの本文 */
  --lh-prose: 1.85;    /* 長文ページ（詰めすぎず、追いやすい値） */
  --lh-heading: 1.35;

  /* 幅と間 */
  --w-page: 1200px;
  --w-prose: 980px;   /* 紙 900px ＋ 左右の余白 40px。本文の行長が 740px になる */
  --gutter: 20px;
  --section-gap: 96px;
  --card-pad: 24px;

  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui,
          "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", Meiryo, sans-serif;
}


/* -------------------------------------------------------------
   2. 下地
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--gutter); top: 12px; z-index: 20;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  padding: 10px 16px;
  font-size: var(--t-meta); color: var(--ink); text-decoration: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* -------------------------------------------------------------
   3. 文字
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  word-break: auto-phrase;
}

h1 { font-size: clamp(27px, 4vw, var(--t-title)); font-weight: 700; line-height: 1.38; }
h2 { font-size: clamp(22px, 3.2vw, var(--t-section)); }
h3 { font-size: var(--t-sub); letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: #c9c4bc;
    transition: text-decoration-color .12s linear, color .12s linear; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* 外部・情報リンクだけ青。画面に1〜2箇所まで */
a.link-accent { color: var(--accent); text-decoration-color: #9dc2ea; }
a.link-accent:hover { color: var(--accent); text-decoration-color: var(--accent); }

strong { color: var(--ink); font-weight: 600; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
li { margin-bottom: .35em; }
li:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: var(--paper);
  border-radius: 4px; padding: 1px 5px;
}

hr { border: 0; border-top: 1px solid var(--hairline); margin: 48px 0; }


/* -------------------------------------------------------------
   4. 骨格
   ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--prose { max-width: var(--w-prose); }

/* ヘッダー ― 固定しない。線は引かず、地の色のまま置く */
.site-header { background: var(--canvas); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 600; font-size: var(--t-body);
  letter-spacing: -.01em; text-decoration: none;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; flex: none; }

.site-nav { display: flex; align-items: center; gap: 24px; font-size: var(--t-nav); font-weight: 500; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* フッター ― 線ではなく面の色で切る */
.site-footer {
  margin-top: var(--section-gap);
  background: var(--band);
  padding-block: 48px 56px;
  font-size: var(--t-body-sm);
}
.site-footer .brand { font-size: var(--t-body-sm); }
.footer-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 20px 40px;
}
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 0; padding: 0; list-style: none;
}
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-meta { margin-top: 36px; color: var(--faint); font-size: var(--t-meta); }
.footer-meta p { margin: 0; }
.footer-meta a { color: var(--muted); text-decoration-color: #c9c4bc; }


/* -------------------------------------------------------------
   5. 部品
   ------------------------------------------------------------- */

/* ボタン ― ピル。主は黒、副は枠線だけ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: var(--t-nav); font-weight: 500; line-height: 1.4;
  letter-spacing: -.01em; text-decoration: none;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.btn:hover { background: #2b2b2b; border-color: #2b2b2b; color: #fff; text-decoration: none; }

.btn--ghost { background: transparent; border-color: var(--hairline); color: var(--ink); }
.btn--ghost:hover { background: var(--paper); border-color: var(--hairline); color: var(--ink); }

/* 公開前のダウンロード表示（リンクにしない） */
.btn--pending {
  background: var(--paper); border-color: var(--hairline);
  color: var(--muted); cursor: default;
}

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* タグ ― ピル、補助面 */
.badge {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--muted);
  font-size: var(--t-meta); line-height: 1.6; letter-spacing: -.01em;
}
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* カード ― 線を引かず、影だけで持ち上げる */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }
.card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); font-size: var(--t-body-sm); line-height: 1.85; }
.card--band { background: var(--band); box-shadow: none; }

.card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .12s linear; }
.card-link:hover { box-shadow: var(--shadow-card-raised); color: inherit; text-decoration: none; }
.card-link .card-more {
  display: inline-block; margin-top: 14px;
  color: var(--ink); font-size: var(--t-meta); font-weight: 500;
}
.card-icon { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 14px; }

/* 数字 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat {
  background: var(--card); border-radius: var(--r-card);
  padding: var(--card-pad); box-shadow: var(--shadow-card);
}
.stat b {
  display: block; color: var(--ink);
  font-size: var(--t-figure); font-weight: 600; line-height: 1.2;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 6px; color: var(--faint); font-size: var(--t-meta); line-height: 1.7; }

/* 料金 */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.plan {
  background: var(--card); border-radius: var(--r-card);
  padding: 28px; box-shadow: var(--shadow-card);
}
.plan--pro { box-shadow: var(--shadow-card-raised); }
.plan h3 { font-size: var(--t-body-sm); font-weight: 600; letter-spacing: .02em; }
.plan .price {
  display: block; margin: 14px 0 2px; color: var(--ink);
  font-size: var(--t-figure); font-weight: 600; line-height: 1.3;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.plan .price small { font-size: var(--t-body-sm); font-weight: 500; color: var(--faint); letter-spacing: -.01em; }
.plan .price-sub { margin: 0 0 18px; color: var(--faint); font-size: var(--t-meta); }
.plan ul { margin: 0; padding-left: 1.3em; font-size: var(--t-body-sm); line-height: 1.9; color: var(--muted); }

/* 注記 ― 面の色だけで示す。本文より目立たせない */
.note {
  background: var(--note-bg);
  border-radius: var(--r-card);
  padding: 20px 24px;
  font-size: var(--t-body-sm); line-height: 1.85; color: var(--muted);
}
.note p:last-child { margin-bottom: 0; }
.note strong { font-weight: 600; }

/* セクションの本文（見出しの補足ではなく、読ませる段落） */
.section-text { max-width: 760px; margin: 0; color: var(--body); font-size: var(--t-body); line-height: var(--lh-body); }
.section-text + .fine-print { margin-top: 8px; }

/* セクションに直接置く注記は読みやすい行長で止める */
.section .note { max-width: 760px; }

/* 表 */
.table-wrap { overflow-x: auto; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); background: var(--card); }
th, td { border-bottom: 1px solid var(--hairline); padding: 12px 14px; text-align: left; vertical-align: top; }
th { color: var(--ink); font-weight: 600; }

details.faq { background: var(--card); border-radius: var(--r-card); padding: 18px 24px; box-shadow: var(--shadow-card); }
details.faq + details.faq { margin-top: 12px; }
details.faq > summary { cursor: pointer; color: var(--ink); font-weight: 600; list-style: none; }
details.faq > summary::-webkit-details-marker { display: none; }

.muted { color: var(--faint); }
.lead {
  color: var(--muted); font-size: var(--t-lead); line-height: 1.8;
  letter-spacing: -.01em; font-feature-settings: "palt" 1; word-break: auto-phrase;
}
.fine-print { max-width: 760px; margin: 20px 0 0; color: var(--faint); font-size: var(--t-meta); line-height: 1.8; }


/* -------------------------------------------------------------
   6. 長文ページ ― クリーム地に白い紙を1枚置く
   ------------------------------------------------------------- */
.prose-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 64px 80px 56px;
  margin-block: 40px 0;
}

.prose > h1 { margin-bottom: 12px; }

/* 区切り線は引かない。余白で切る（Intercom: no hard dividers） */
.prose h2 { margin: 56px 0 14px; font-size: var(--t-heading); }
.prose h2:first-of-type { margin-top: 44px; }
.prose h3 { margin: 34px 0 8px; font-size: var(--t-sub); }

.prose p, .prose li { font-size: var(--t-body); line-height: var(--lh-prose); }
.prose ul { padding-left: 1.35em; }
.prose li { margin-bottom: .5em; }
.prose .note { margin: 26px 0 32px; }
.prose a { overflow-wrap: anywhere; color: var(--accent); text-decoration-color: #9dc2ea; }
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.prose .updated, .updated {
  margin: 0 0 32px; color: var(--faint);
  font-size: var(--t-meta); line-height: 1.7;
}


/* -------------------------------------------------------------
   7. ホーム
   ------------------------------------------------------------- */
.hero { padding-block: 80px 48px; text-align: center; }
.hero-icon {
  width: 80px; height: 80px; border-radius: 19px;
  margin: 0 auto 28px; box-shadow: var(--shadow-card);
}
.hero h1 {
  font-size: clamp(30px, 5.2vw, var(--t-hero));
  font-weight: 700;
  line-height: 1.28; letter-spacing: -.035em;
  margin: 0 auto 20px; max-width: 16em;
}
.hero .lead { max-width: 34em; margin: 0 auto 32px; }
.br-wide { display: none; }
@media (min-width: 720px) { .br-wide { display: inline; } }
.hero .btn-row { justify-content: center; margin-bottom: 20px; }
.hero .meta-row { justify-content: center; }

.section { padding-top: var(--section-gap); }
.hero + .section { padding-top: 64px; }  /* ヒーロー直後だけ詰める */
.section--band {
  background: var(--band);
  margin-top: var(--section-gap);
  padding-block: 80px;
}
.section--band + .section { padding-top: var(--section-gap); }
.hero + .section { padding-top: 64px; }  /* ヒーロー直後だけ詰める */

.section-head { margin-bottom: 32px; max-width: 46em; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { margin: 0; color: var(--muted); font-size: var(--t-lead); }


/* -------------------------------------------------------------
   8. 画面幅と印刷
   ------------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
}

@media (max-width: 680px) {
  :root {
    --gutter: 16px; --section-gap: 64px;
    --t-section: 22px; --t-heading: 20px; --t-sub: 17px;
    --t-lead: 16.5px; --t-body-sm: 14.5px; --t-figure: 29px;
    --t-nav: 14.5px; --t-meta: 13.5px;
  }

  .site-header .wrap { min-height: 60px; }
  .site-nav { gap: 18px; }

  .hero { padding-block: 48px 56px; }
  .hero-icon { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 22px; }
  .hero .lead { margin-bottom: 26px; }
  .hero .btn-row .btn { width: 100%; }

  .section--band { padding-block: 56px; }
  .section-head { margin-bottom: 24px; }
  .site-nav { font-size: var(--t-nav); }

  .cards, .stats, .plans { gap: 14px; }
  .plan { padding: 22px; }

  .prose-card { padding: 28px 20px 24px; margin-top: 24px; }
  .prose h2 { margin-top: 44px; }
  .prose h2:first-of-type { margin-top: 36px; }

  .site-footer { padding-block: 36px 40px; }
}

@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .prose-card { box-shadow: none; padding: 0; margin: 0; }
  a { color: #000; }
}


/* -------------------------------------------------------------
   10. 項目と内容の対（送信先・情報・目的 など）
   長い文章を「何を・どこへ・なぜ」の3行に畳むための部品。
   ------------------------------------------------------------- */
.spec {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 6px 16px;
  margin: 10px 0 28px;
  padding: 16px 20px;
  background: var(--note-bg);
  border-radius: var(--r-input);
  font-size: var(--t-body-sm);
  line-height: 1.8;
}
.spec dt { color: var(--faint); font-size: var(--t-meta); padding-top: 1px; }
.spec dd { margin: 0; color: var(--body); }

@media (max-width: 680px) {
  .spec { grid-template-columns: 1fr; gap: 0; padding: 14px 16px; }
  .spec dd { margin-bottom: 8px; }
  .spec dd:last-child { margin-bottom: 0; }
}