/* 城道（SHIRODO）LP 全ページ共通のスタイル。
 * 正本はこのファイル。ページ固有のスタイルは各ページの <style> に置き、同じセレクタはページ側が上書きする。
 * 読み込みは scripts/shared_parts.py の head 部品（?v= はファイル内容から自動計算）。 */

:root {
  --gold: #c9a961;
  --gold-bright: #e5c67d;
  --vermilion: #a33a2a;
  --sumi: #0a0908;
  --sumi-2: #14120e;
  --sumi-3: #1e1a14;
  --washi: #f2ede2;
  --washi-dim: #b5ad9b;
  --line: rgba(201, 169, 97, 0.22);
  --f-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --ochre: #c97b3f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--sumi);
  color: var(--washi);
  font-family: var(--f-sans);
  line-height: 1.85;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-bright); text-decoration: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: linear-gradient(to bottom, rgba(10,9,8,0.95), rgba(10,9,8,0.6) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-brand { font-family: var(--f-serif); font-size: 1.15rem; color: var(--washi); }

.nav-brand small { font-size: 0.6rem; letter-spacing: 0.25em; color: var(--gold); margin-left: 8px; }

.nav-cta {
  font-size: 0.8rem; padding: 7px 18px; border: 1px solid var(--gold);
  border-radius: 999px; color: var(--gold-bright);
}

.breadcrumb { font-size: 0.75rem; color: var(--washi-dim); margin-bottom: 28px; }

.breadcrumb a { color: var(--washi-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

.lead strong { color: var(--washi); font-weight: 500; }

.app-callout {
  margin: 36px 0 48px; padding: 22px 22px;
  background: var(--sumi-2); border: 1px solid var(--line); border-radius: 12px;
}

.app-callout p { font-size: 0.9rem; color: var(--washi-dim); margin-bottom: 14px; }

.toc ol { list-style: none; }

.toc li { border-bottom: 1px solid rgba(201,169,97,0.12); }

.toc li:last-child { border-bottom: none; }

.back-to-toc {
  display: inline-block; margin-top: 18px; font-size: 0.78rem;
  color: var(--washi-dim); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
}

.back-to-toc:hover { color: var(--gold-bright); }

.src-note a { color: var(--washi-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item[open] summary::after { content: "－"; }

footer {
  text-align: center; padding: 44px 20px 60px; font-size: 0.75rem;
  color: rgba(255,255,255,0.45); border-top: 1px solid var(--line);
}

footer a { color: rgba(255,255,255,0.55); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,169,97,0.4); }

.footer-brand { font-family: var(--f-serif); color: var(--washi-dim); display: block; margin-bottom: 12px; font-size: 0.95rem; }

.article-meta { font-size: 0.75rem; color: var(--washi-dim); margin-bottom: 26px; }

.lead-answer {
  padding: 20px 22px; margin-bottom: 36px;
  background: var(--sumi-2); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
}

.bridge-slot { margin: 36px 0 48px; }

.bridge-line { padding: 14px 2px; border-top: 1px solid var(--line); font-size: 0.9rem; }

.bridge-line span { color: var(--washi-dim); }

.bridge-line a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }

.bridge-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 14px 14px;
  background: var(--sumi-3); border: 1px solid var(--line); border-radius: 10px;
}

.bridge-chip .badge {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 0.8rem; color: var(--gold-bright);
}

.bridge-chip .text { font-size: 0.86rem; color: var(--washi-dim); flex: 1; }

.bridge-chip .text b { color: var(--washi); font-weight: 500; }

.bridge-chip a.arrow { color: var(--gold-bright); font-size: 0.83rem; flex-shrink: 0; text-decoration: none; white-space: nowrap; }

.bridge-box {
  padding: 16px 18px;
  background: var(--sumi-2); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
}

.bridge-box .q { font-size: 0.9rem; color: var(--washi); margin-bottom: 8px; font-weight: 500; }

.bridge-box .link-row { font-size: 0.84rem; margin-bottom: 0; }

.bridge-box .link-row span { color: var(--washi-dim); }

.bridge-box .link-row a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.author-box {
  display: flex; gap: 4px; flex-direction: column;
  padding: 18px 20px; margin-bottom: 48px;
  background: var(--sumi-2); border: 1px solid var(--line); border-radius: 12px;
  font-size: 0.8rem; color: var(--washi-dim);
}

.author-box strong { color: var(--washi); font-weight: 500; }

.meta { font-size: 0.75rem; color: var(--washi-dim); margin-bottom: 26px; }