/* ============================================================
   内海あさ — Web 用 v2（二色刷り × 生活ノート）  /  v2.css
   ------------------------------------------------------------
   v2 に移したページだけが tokens.css のあとに読む。
   色は tokens.css の --v2-*。v1 の変数は、まだ移していない
   ページのために残してある（書き換えない）。

   Webフォント（各ページの <head> で読む）:
   https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap

   文字色の使い分け（ayabase-hq#153 2026-11-08）
   - 本文・説明文 … --v2-body（濃い群青）
   - 見出し（記事・カードのタイトルから上）・リンク・枠 … --v2-ink（群青）
   - 補足 … --v2-ink-sub
   ============================================================ */

body {
  background: var(--v2-paper);
  color: var(--v2-body);
  font-family: var(--v2-sans);
  font-size: 15px;
  line-height: 1.85;
}

a:focus-visible,
button:focus-visible { outline: 3px solid var(--v2-sun); outline-offset: 3px; }

/* ---- 見出し ---- */
.h-display { font-family: var(--v2-sans); font-weight: 900; letter-spacing: 0.04em; line-height: 1.2; color: var(--v2-ink); }
.h1        { font-family: var(--v2-sans); font-weight: 900; font-size: 28px; line-height: 1.4; color: var(--v2-ink); }
.h2        { font-family: var(--v2-sans); font-weight: 900; font-size: 20px; line-height: 1.5; color: var(--v2-ink); }
.eyebrow   { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v2-ink-sub); }
.latin     { font-weight: 500; letter-spacing: 0.08em; color: var(--v2-ink-sub); }

/* マーカー：見出しの1か所だけ。番号には塗らない */
mark, .marker {
  background: linear-gradient(transparent 58%, var(--v2-marker) 58%);
  color: inherit; padding: 0 2px;
}

/* ---- リンク（本文中） ---- */
.link {
  color: var(--v2-ink); text-decoration: underline;
  text-decoration-color: var(--v2-ink-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--v2-sun); }

/* ---- ボタン：四角・群青。角丸と影は使わない ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; font-family: var(--v2-sans); font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1.4; border-radius: 0; border: 1.5px solid var(--v2-ink);
  cursor: pointer; text-decoration: none; transition: background 0.15s;
}
.btn-primary   { background: var(--v2-ink); color: var(--v2-paper); }
.btn-primary:hover   { background: var(--v2-body); }
.btn-secondary { background: transparent; color: var(--v2-ink); }
.btn-secondary:hover { background: var(--v2-sun-lt); }

/* ---- テープ札（タグ・目次）：少し傾いた淡色の長方形。丸ピルは使わない ---- */
.tape {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6;
  padding: 2px 8px; color: var(--v2-ink); background: var(--v2-sun-lt);
  border-radius: 0; transform: rotate(-1.5deg);
}
.tape-ink { background: var(--v2-ink-lt); }
.tape-tilt { transform: rotate(1.2deg); }
.tape-flat { transform: none; }   /* 記事の分野名など、短いラベルは傾けない */
a.tape { text-decoration: none; transition: background 0.15s; }
a.tape:hover { background: var(--v2-sun); }

/* ---- カード：群青 1.5px の四角い枠 ---- */
.card {
  display: block; background: var(--v2-card); border: 1.5px solid var(--v2-ink);
  border-radius: 0; overflow: hidden; color: inherit; text-decoration: none;
}
a.card { transition: background 0.15s; }
a.card:hover { background: #fff; }

/* ---- 番号・アイコンの四角枠 ---- */
.box-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 30px; height: 30px; padding: 0 4px; border: 1.5px solid var(--v2-ink);
  color: var(--v2-ink); font-size: 13px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- 区切り：破線 ---- */
.rule { border: 0; border-top: 1.5px dashed var(--v2-ink-line); }

/* ---- アバター：四角い枠 ---- */
.avatar { border-radius: 0; border: 1.5px solid var(--v2-ink); object-fit: cover; display: block; overflow: hidden; }