:root {
  /* ─────────────────────────────────────────────────────
     Brand palette — ACT.app color palette_v2 と同期。
     アプリ側で再調整された場合、この :root だけ差し替えれば
     マニュアル全体に反映される設計。
     典拠: act-node/act-app の color palette_v2 画像（2026-04-24）
     ───────────────────────────────────────────────────── */

  /* Primary (App の brand green) */
  --brand:          #0bab8c;   /* primary */
  --brand-dark:     #009679;   /* primary-shade */
  --brand-tint:     #30b89d;   /* primary-tint */
  --brand-70:       #54c4ae;
  --brand-50:       #85d5c5;
  --brand-20:       #ceeee8;
  --brand-light:    #f8fcfc;   /* primary-3 */

  /* Secondary (orange) */
  --accent:         #E57C35;   /* secondary */
  --accent-dark:    #DB6A1D;   /* secondary-shade */
  --accent-tint:    #EA965D;   /* secondary-tint */
  --accent-light:   #FAE5D7;   /* secondary-20 */

  /* Tertiary (cyan) — hero 等のアクセントに使用可 */
  --tertiary:       #21B4BF;
  --tertiary-dark:  #05A3A3;
  --tertiary-tint:  #4DC3CC;

  /* Semantic colors */
  --success:        #0bab8c;   /* == brand */
  --success-light:  #ceeee8;
  --warn:           #ffbc17;   /* warning */
  --warn-dark:      #e0a514;
  --warn-light:     #fff4d5;
  --caution:        #EA3939;   /* danger */
  --caution-dark:   #ce3232;
  --caution-light:  #fddede;
  --note:           #578EDD;   /* link blue */
  --note-light:     #e2edfb;
  --tip:            #0bab8c;   /* == brand */
  --tip-light:      #ceeee8;

  /* Neutral scale (app の Dark-*/Light-*/Medium 群) */
  --fg:             #333232;   /* Dark */
  --fg-soft:        #474747;   /* Dark-tint */
  --muted:          #6F6F6F;   /* Dark-70 */
  --disable-fg:     #aaaaaa;   /* Disable-shade */
  --border:         #EAEAEA;   /* Dark-10 */
  --border-strong:  #D6D6D6;   /* Dark-20 */
  --bg:             #ffffff;
  --bg-soft:        #F9F9F9;   /* Dark-3 */
  --sidebar-bg:     #F7F7F7;   /* Light Dark-4 */
  --code-bg:        #F9F9F9;
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --radius:         6px;
  --font-body:      -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sidebar-w:      280px;
  --content-max:    860px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── site top bar ── */
.site-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.site-top-inner {
  max-width: calc(var(--sidebar-w) + var(--content-max) + 320px);
  margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.25rem;
}
.site-logo {
  font-weight: 700; font-size: 1rem;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}
.site-logo::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--brand); border-radius: 2px; margin-right: 0.5rem;
  vertical-align: 1px;
}
.site-nav { display: flex; gap: 1.25rem; margin-left: auto; }
.site-nav a {
  color: var(--fg-soft); font-size: 0.95rem;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--brand-dark); }

/* v2.14: 言語切替トグル（ヘッダ右端、検索ボタンの左） */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
}
.lang-switch:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-dark);
  text-decoration: none;
}

/* ── layout: content-first (Apple iPhone guide 同様、サイドバーは常にモーダル) ── */
.site-layout {
  display: block;
  max-width: calc(var(--content-max) + 320px);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

/* ── sidebar: 常時 fixed drawer（PC / モバイル共通の TOC モーダル） ── */
.site-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(88vw, 360px);
  max-height: 100vh;
  overflow: hidden;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  z-index: 21;
  padding: 0;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
}
.site-sidebar.open { transform: translateX(0); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem 1rem; }
body.sidebar-open { overflow: hidden; }
.sidebar-group { margin-bottom: 1.25rem; }
.sidebar-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0.5rem 0.75rem 0.25rem;
}
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { margin: 0; }
.sidebar-list a {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.35rem 0.75rem;
  border-radius: 5px;
  color: var(--fg-soft);
  line-height: 1.45;
}
.sidebar-chap-num {
  flex-shrink: 0;
  min-width: 1.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.88em;
  letter-spacing: 0.02em;
}
.sidebar-list a.is-active .sidebar-chap-num,
.sidebar-list .is-active-branch > .sidebar-item > a .sidebar-chap-num {
  color: var(--brand-dark);
}
.sidebar-chap-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.sidebar-list a:hover {
  background: var(--brand-light); color: var(--brand-dark); text-decoration: none;
}
.sidebar-list a.is-active {
  background: var(--brand-light); color: var(--brand-dark); font-weight: 600;
  border-left: 3px solid var(--brand);
  padding-left: calc(0.75rem - 3px);
}

/* ── content ── */
.site-content {
  min-width: 0;
  max-width: var(--content-max);
}
.breadcrumb {
  font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb-sep { margin: 0 0.4rem; color: var(--border); }

.page-meta {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  color: var(--muted); font-size: 0.85rem;
  margin: -0.5rem 0 1.5rem;
}
.page-meta .pill {
  background: var(--brand-light); color: var(--brand-dark);
  padding: 0.1rem 0.6rem; border-radius: 999px; font-weight: 600;
}
.page-meta .pill.draft { background: #fef3c7; color: #92400e; }
.page-meta .pill.deprecated { background: #fee2e2; color: #991b1b; }
/* v2.12: 章単位 PDF ダウンロード */
.page-meta .pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  background: var(--bg);
  text-decoration: none;
  font-size: 0.83rem;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.page-meta .pdf-download:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-dark);
  text-decoration: none;
}
.page-meta .pdf-download-icon { font-size: 0.95em; line-height: 1; }

/* ── typography ── */
.site-content h1 {
  font-size: 2rem; line-height: 1.3; margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--brand);
  color: var(--fg);
}
.site-content h2 {
  font-size: 1.4rem; line-height: 1.4; margin: 2.5rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.site-content h2::before {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 2rem; height: 2px; background: var(--brand);
}
.site-content h3 {
  font-size: 1.15rem; margin: 1.75rem 0 0.75rem; color: var(--fg);
}
.site-content h2, .site-content h3 { scroll-margin-top: 4rem; position: relative; }
.site-content .heading-anchor {
  position: absolute; left: -1.25rem; top: 0.1em;
  color: var(--border); text-decoration: none;
  font-weight: 400; opacity: 0; transition: opacity 0.15s;
}
.site-content h2:hover .heading-anchor,
.site-content h3:hover .heading-anchor { opacity: 1; color: var(--brand); }
.site-content p { margin: 0 0 1rem; }
.site-content ul, .site-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.site-content li { margin: 0.25rem 0; }
.site-content strong { color: var(--fg); font-weight: 700; }
.site-content code:not(pre code) {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--code-bg); padding: 0.12em 0.35em; border-radius: 3px;
  color: var(--accent);
}
.site-content pre {
  background: var(--code-bg); padding: 1rem; border-radius: var(--radius);
  overflow-x: auto; font-size: 0.88rem;
}
.site-content pre code { font-family: var(--font-mono); background: transparent; padding: 0; color: inherit; }

/* ── tables ── */
.site-content table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  background: var(--bg);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.site-content thead { background: var(--brand-light); }
.site-content th {
  text-align: left; padding: 0.6rem 0.9rem;
  color: var(--brand-dark); font-weight: 700;
  border-bottom: 2px solid var(--brand);
}
.site-content td {
  padding: 0.6rem 0.9rem; border-top: 1px solid var(--border);
  vertical-align: top;
}
.site-content tr:hover td { background: var(--bg-soft); }

/* ── images ── */
.site-content img {
  max-width: 100%; height: auto; display: block;
  margin: 1rem auto; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.site-content p > em:only-child {
  display: block; text-align: center;
  color: var(--muted); font-size: 0.88rem;
  margin: -0.75rem 0 1.25rem;
}

/* ── callouts (GFM alerts) ── */
.callout {
  display: flex; gap: 0.9rem;
  border-left: 4px solid var(--muted);
  background: var(--bg-soft);
  padding: 0.9rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.25rem 0;
}
.callout-icon {
  flex-shrink: 0; width: 1.4rem; height: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  border-radius: 50%;
  color: white;
}
.callout-body { flex: 1; min-width: 0; }
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; margin: 0 0 0.25rem; }
.callout.tip { border-left-color: var(--tip); background: var(--tip-light); }
.callout.tip .callout-icon { background: var(--tip); }
.callout.tip .callout-title { color: #065f46; }
.callout.note { border-left-color: var(--note); background: var(--note-light); }
.callout.note .callout-icon { background: var(--note); }
.callout.note .callout-title { color: #1e40af; }
.callout.warning { border-left-color: var(--warn); background: var(--warn-light); }
.callout.warning .callout-icon { background: var(--warn); }
.callout.warning .callout-title { color: #92400e; }
.callout.caution { border-left-color: var(--caution); background: var(--caution-light); }
.callout.caution .callout-icon { background: var(--caution); }
.callout.caution .callout-title { color: #991b1b; }
.callout.important { border-left-color: var(--accent); background: var(--accent-light); }
.callout.important .callout-icon { background: var(--accent); }
.callout.important .callout-title { color: #991b1b; }

/* ── Apple 風 "See also" 関連章カード ── */
.see-also {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.see-also-heading {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
  font-size: 1.05rem !important;
  color: var(--fg) !important;
  font-weight: 700;
}
.see-also-heading::before { display: none !important; }
.see-also-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.see-also-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.see-also-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
  text-decoration: none;
}
.see-also-title {
  font-weight: 600;
  color: var(--brand-dark);
  font-size: 0.95rem;
}
.see-also-summary {
  color: var(--fg-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}
.see-also-card.is-external .see-also-title { color: var(--note); }

/* ── 互換: 旧 .related-box を see-also と同じ見た目に（古い HTML 向け） ── */
.related-box {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 0;
  border-radius: 0;
  margin-top: 2.5rem;
}
.related-box h2 {
  border: none; padding: 0; margin: 0 0 0.75rem;
  font-size: 1.05rem; color: var(--fg); font-weight: 700;
}
.related-box h2::before { display: none; }
.related-box ul { margin: 0; padding-left: 1.25rem; }

/* ── Pager: Apple iPhone ガイド準拠（次へを primary、前へを subtler に） ── */
/* ── v2.10: Pager — iPhone ガイド準拠の 1 方向 Next-only CTA ──
   Apple iPhone ガイドは章末に「次へ: ○○」のみを大きく表示する。
   Prev は存在せず、戻る導線はブラウザの戻る / 左サイドバーに任せる。
   これにより読み進めるリズムが一直線になり、章末で視線が迷わない。
*/
.pager {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
}
.pager-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  background: var(--brand);
  color: white;
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pager-next:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
}
.pager-next .pager-label {
  color: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
}
.pager-next .pager-title {
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  flex: 1;
}
.pager-next .pager-arrow {
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
}

/* ── footer ── */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}
.site-footer .footer-tagline {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* v2.14: EN カテゴリ index の「JA」バッジ（title_en 未設定の章用） */
.toc-card-lang-badge {
  display: inline-block;
  padding: 0 0.4rem;
  margin-left: 0.35rem;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

/* ── TOC pages (category / root) ── */
.toc-grid {
  display: grid; gap: 0.75rem;
  margin: 1.5rem 0;
}
.toc-grid a {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.toc-grid a:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.toc-card-title { font-weight: 700; color: var(--brand-dark); margin-bottom: 0.25rem; display: block; }
.toc-card-summary { color: var(--fg-soft); font-size: 0.9rem; display: block; }

/* v2.15: トップページのカテゴリカード — タイトル + 短い説明 + 章数チップ */
.root-cat-card { padding: 1.1rem 1.25rem; }
.root-cat-card .toc-card-title { font-size: 1.05rem; margin-bottom: 0.4rem; }
.root-cat-desc {
  display: block;
  color: var(--fg-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.root-cat-count {
  display: inline-block;
  padding: 0.18rem 0.75rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── v2.17: FAQ index（アコーディオン + 検索 + タグフィルタ） ── */
.faq-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
}
.faq-search-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.faq-search-label:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-20);
}
.faq-search-icon { font-size: 0.95rem; opacity: 0.7; }
.faq-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: inherit;
  background: transparent;
  color: var(--fg);
}
.faq-search-input::placeholder { color: var(--disable-fg); }

.faq-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.faq-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg-soft);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.faq-tag-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.faq-tag-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.faq-tag-chip.is-active .faq-tag-count { background: rgba(255,255,255,0.24); color: #fff; }
.faq-tag-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.35em;
  text-align: center;
  background: var(--bg-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.faq-list { margin: 0.5rem 0 2rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0.5rem 0;
  background: var(--bg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.faq-item[open] {
  border-color: var(--brand-50);
  box-shadow: var(--shadow-soft);
}
.faq-q {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  line-height: 1.5;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--brand-light); }
.faq-index {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  min-width: 2.5em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.9rem;
}
.faq-letter { font-size: 1em; }
.faq-num { font-size: 1em; }
.faq-q-text {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--fg);
  word-break: break-word;
}
.faq-chevron {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 1.1rem;
  transition: transform 0.15s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--brand-dark); }

.faq-a {
  padding: 0.25rem 1.1rem 1rem calc(2.5em + 1.1rem + 0.75rem);
  border-top: 1px solid var(--brand-light);
}
.faq-a .faq-summary {
  margin: 0.65rem 0;
  color: var(--fg-soft);
  line-height: 1.7;
}
.faq-more {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--brand-dark);
  font-weight: 600;
}
.faq-more:hover { text-decoration: underline; }

.faq-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
  .faq-a { padding-left: 1.1rem; }
  .faq-q { padding: 0.75rem 0.9rem; gap: 0.55rem; }
}

/* ── ロール別エントリカード（トップページ）C-1 ── */
.role-cards {
  margin: 1.75rem 0 2.5rem;
}
.role-heading {
  font-size: 1.1rem !important;
  font-weight: 700;
  color: var(--fg) !important;
  margin: 0 0 0.85rem !important;
  padding: 0 !important;
  border: none !important;
}
.role-heading::before { display: none !important; }
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
}
.role-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.3rem 1.35rem 1.15rem;
  background: linear-gradient(180deg, var(--brand-light), var(--bg));
  border: 1px solid rgba(11,171,140,0.22);
  border-radius: var(--radius-xl);
  color: var(--fg);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.role-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--brand);
  text-decoration: none;
}
.role-card-icon { font-size: 1.7rem; line-height: 1; }
.role-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-dark);
}
.role-card-summary {
  color: var(--fg-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
}
.role-card-cta {
  font-size: 0.88rem;
  color: var(--brand-dark);
  font-weight: 600;
  margin-top: 0.3rem;
}

.role-card-admin {
  background: linear-gradient(180deg, var(--accent-light), var(--bg));
  border-color: rgba(229,124,53,0.25);
}
.role-card-admin .role-card-title { color: var(--accent-dark); }
.role-card-admin .role-card-cta { color: var(--accent-dark); }

.role-card-iot {
  background: linear-gradient(180deg, #e8f3f7, var(--bg));
  border-color: rgba(33,180,191,0.25);
}
.role-card-iot .role-card-title { color: var(--tertiary-dark); }
.role-card-iot .role-card-cta { color: var(--tertiary-dark); }

/* ── 章番号付きの category index カード ── */
.toc-grid-numbered .toc-card-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
}
/* カテゴリ頭文字 + 章番号（例: A1, A2, C1, C2...）を pill 表示 */
.toc-card-index {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  min-width: 48px;
  height: 36px;
  padding: 0 0.7rem;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono, system-ui);
}
.toc-card-letter {
  font-size: 0.95rem;
  font-weight: 700;
}
.toc-card-num {
  font-size: 1rem;
  font-weight: 700;
}
.toc-grid-numbered .toc-card-item:hover .toc-card-index {
  background: var(--brand);
  color: white;
}
.toc-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
@media (max-width: 640px) {
  .toc-grid-numbered .toc-card-item {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .toc-card-index { align-self: flex-start; }
}

/* ── 目次ボタン（PC / モバイル共通） ── */
.menu-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 0.4rem;
  background: none; border: 1px solid transparent;
  padding: 0.35rem 0.65rem; border-radius: 5px;
  color: var(--fg-soft); cursor: pointer; font-size: 0.92rem; line-height: 1;
  margin-right: 0.5rem;
}
.menu-btn:hover { background: var(--bg-soft); }
.menu-btn:focus { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── floating UI (TOC button / back-to-top) ── */
.floating-actions {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 20;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.fab {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--brand); color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.fab:hover { background: var(--brand-dark); }
.fab.hidden { display: none; }
.fab-toc { background: var(--fg-soft); }
.fab-toc:hover { background: var(--fg); }

/* ── sidebar drawer (mobile only) ── */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 19;
}
.sidebar-backdrop.open { display: block; }

/* ── in-page TOC modal ── */
.toc-modal {
  display: none;
  position: fixed; right: 1rem; bottom: 4rem;
  max-width: 320px; max-height: 60vh; overflow-y: auto;
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 20; padding: 0.75rem 1rem; font-size: 0.9rem;
}
.toc-modal.open { display: block; }
.toc-modal h3 { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.toc-modal ul { list-style: none; margin: 0; padding: 0; }
.toc-modal li { margin: 0.1rem 0; }
.toc-modal li.h3 { padding-left: 0.9rem; }
.toc-modal a { display: block; padding: 0.25rem 0.4rem; border-radius: 4px; color: var(--fg-soft); }
.toc-modal a:hover { background: var(--brand-light); color: var(--brand-dark); text-decoration: none; }

/* ── table wrapper for horizontal scroll on narrow screens ── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.table-scroll > table { margin: 0; }

/* ── v2.2: TOC drawer header (PC / モバイル共通で常に表示) ── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--sidebar-bg);
  z-index: 2;
}
.sidebar-header-title {
  font-weight: 700;
  color: var(--brand-dark);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.sidebar-close-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid transparent;
  border-radius: 50%;
  color: var(--fg-soft);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-close-btn:hover { background: var(--bg-soft); color: var(--fg); }

/* Sidebar item layout: link + chevron toggle button side-by-side */
.sidebar-item {
  display: flex;
  align-items: stretch;
  position: relative;
}
.sidebar-item > a {
  flex: 1;
  min-width: 0;
}
.sidebar-toggle {
  flex-shrink: 0;
  width: 36px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  padding: 0;
  color: var(--muted);
}
.sidebar-toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translate(-50%, -70%) rotate(-45deg);
  transition: transform 0.18s ease;
}
.sidebar-toggle:hover { background: var(--bg-soft); color: var(--fg); }
.sidebar-list .has-children.open > .sidebar-item > .sidebar-toggle::after {
  transform: translate(-50%, -30%) rotate(45deg);
}
/* remove old anchor-based chevron (now on button only) */
.sidebar-list .has-children > a::after { display: none !important; }
.sidebar-list .has-children > a { padding-right: 0.75rem; }

/* ── responsive ── */
@media (max-width: 960px) {
  :root { --content-max: 100%; }
  .site-top-inner { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .site-logo { font-size: 0.92rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-nav { display: none; }                  /* モバイル時は非表示、サイドバー内に集約 */
  .lang-switch { padding: 0.25rem 0.55rem; font-size: 0.82rem; }
  .menu-btn { font-size: 0.88rem; }
  .menu-btn-label { font-size: 0.82rem; }

  .site-layout { padding: 0.75rem; }

  .site-content h1 { font-size: 1.45rem; padding-bottom: 0.35rem; }
  .site-content h2 { font-size: 1.18rem; margin-top: 2rem; }
  .site-content h3 { font-size: 1.02rem; }
  .breadcrumb { font-size: 0.78rem; }
  .page-meta { font-size: 0.78rem; }
  .callout { padding: 0.75rem 0.85rem; gap: 0.6rem; }
  .pager { margin-top: 2rem; padding-top: 1.25rem; }
  .pager-next { padding: 1rem 1.1rem; }
  .pager-next .pager-title { font-size: 1rem; }
}

/* ── search ── */
.search-btn {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 0.35rem 0.85rem; border-radius: 999px;
  color: var(--fg-soft); cursor: pointer; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.search-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.search-btn kbd {
  background: white; border: 1px solid var(--border); border-radius: 3px;
  padding: 0 0.3rem; font-size: 0.75rem; color: var(--muted);
}
.search-modal {
  display: none;
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0,0,0,0.45);
  align-items: flex-start; justify-content: center;
  padding: 4rem 1rem;
}
.search-modal.open { display: flex; }
.search-panel {
  background: white; border-radius: var(--radius);
  width: 100%; max-width: 640px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
.search-header { display: flex; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.search-header input {
  flex: 1; font-size: 1rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.search-header input:focus { outline: 2px solid var(--brand); border-color: transparent; }
#search-results { flex: 1; overflow-y: auto; padding: 0.5rem; }
#search-results ul { list-style: none; margin: 0; padding: 0; }
#search-results li { margin: 0; }
#search-results a {
  display: block; padding: 0.75rem 1rem; border-radius: var(--radius);
  color: var(--fg); border: 1px solid transparent;
}
#search-results a:hover { background: var(--bg-soft); border-color: var(--border); text-decoration: none; }
.search-title { font-weight: 700; color: var(--brand-dark); }
.search-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.search-summary { font-size: 0.88rem; color: var(--fg-soft); margin-top: 0.3rem; line-height: 1.5; }
.search-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
mark { background: #fef3c7; color: inherit; padding: 0 0.15rem; border-radius: 2px; }

/* ── image lightbox ── */
.site-content img.zoomable { cursor: zoom-in; }
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.85);
  align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; cursor: zoom-out;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.15); color: white;
  border: 0; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; font-size: 1.2rem;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ── print ── */
@media print {
  .site-top, .site-sidebar, .pager, .site-footer,
  .menu-btn, .floating-actions, .toc-modal, .sidebar-backdrop { display: none !important; }
  .site-layout { display: block; max-width: none; padding: 0; }
  .site-content { max-width: none; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3 { page-break-after: avoid; }
  table, figure, img { page-break-inside: avoid; }
}

/* ============================================================
   v2 additions — ADR-0002 (manual-ui-v2)
   Apple iPhone ユーザガイド準拠の読みやすいフレームワーク
   ============================================================ */

:root {
  /* v2 design tokens */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --type-xs: 13px;
  --type-sm: 15px;
  --type-base: 17px;
  --type-md: 20px;
  --type-lg: 24px;
  --type-xl: 32px;
}

/* ── v2: 画像は 70vh 以内に収める（最重要） ── */
.site-content img {
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.site-content figure {
  margin: 1.25rem auto;
  text-align: center;
}
.site-content figure img {
  display: block;
  margin: 0 auto;
}
.site-content figure figcaption {
  color: var(--muted);
  font-size: var(--type-xs);
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* ── v2.9: 画像標準サイズ（:::figure{type=...}） ──
   3 タイプで表示幅を切替え、コンテンツ間のリズムを揃える。
   - iphone : スマホ UI（縦長）。logical 390px を上限に中央寄せ
   - pc     : PC ブラウザ UI（16:9）。本文幅を活かしつつ行長を壊さない
   - diagram: 概念図（SVG 推奨）。本文幅フル活用
*/
.v2-figure {
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.v2-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--bg);
}
.v2-figure-caption {
  color: var(--muted);
  font-size: var(--type-xs);
  line-height: 1.55;
  text-align: center;
  max-width: 680px;
}
.v2-figure-note {
  color: var(--fg-soft);
  font-size: 0.9rem;
  line-height: 1.65;
  text-align: left;
  max-width: 680px;
  width: 100%;
}

/* iPhone UI キャプチャ: 390px 上限（iPhone Pro logical width） */
.v2-figure-iphone { max-width: 390px; }
.v2-figure-iphone img {
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* PC ブラウザ UI: 960px 上限（本文 860 + 左右余白） */
.v2-figure-pc { max-width: 960px; }
.v2-figure-pc img { border: 1px solid var(--border); }

/* 概念図: 860px（本文幅フル）。SVG を想定し影は控えめ */
.v2-figure-diagram { max-width: 860px; }
.v2-figure-diagram img {
  box-shadow: none;
  background: transparent;
}

/* モバイル時は全タイプを画面幅に追随 */
@media (max-width: 640px) {
  .v2-figure-pc, .v2-figure-diagram { max-width: 100%; }
  .v2-figure-iphone { max-width: min(390px, 100%); }
}

/* ── v2: Hero ── */
.v2-hero {
  background: linear-gradient(180deg, var(--brand-light), var(--bg));
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin: 0 0 2rem;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 1.25rem;
}
.v2-hero .hero-image {
  max-height: 280px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 0;
  box-shadow: var(--shadow-card);
}
/* v2.13: hero 画像が未配置の章用の placeholder。
   中身は「ここに入れる画像の内容説明」をテキストで提示する。 */
.v2-hero .hero-image-placeholder {
  min-height: 200px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(
    45deg,
    var(--bg-soft),
    var(--bg-soft) 10px,
    var(--bg) 10px,
    var(--bg) 20px
  );
  color: var(--muted);
  text-align: center;
}
.v2-hero .hero-image-placeholder-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: 0.03em;
}
.v2-hero .hero-image-placeholder-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 560px;
}
.v2-hero .hero-body p:first-child,
.v2-hero .hero-body p:first-of-type {
  font-size: 1.05rem;
  color: var(--fg);
  line-height: 1.7;
  margin-top: 0;
}
.v2-hero .hero-body > :last-child { margin-bottom: 0; }

/* ── v2: Hero 内のリストはセクションカードグリッドとして表示 ── */
/* 決定 #4 Apple 風ヒーロー: 画像 + 導入文 + 「本章のセクション」カード */
.v2-hero .hero-body ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.65rem;
}
.v2-hero .hero-body ul > li {
  margin: 0;
}
.v2-hero .hero-body ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.v2-hero .hero-body ul > li > a::after {
  content: "→";
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}
.v2-hero .hero-body ul > li > a:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

/* ── v2: Steps / Step card ── */
.v2-steps {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 1rem;
}
.v2-step-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: start;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.v2-step-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}
.v2-step-card .step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-weight: 700; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v2-step-card .step-body { min-width: 0; }
.v2-step-card .step-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--fg);
  font-weight: 700;
  border: none;
  padding: 0;
}
.v2-step-card .step-body > :last-child { margin-bottom: 0; }
.v2-step-card img {
  max-height: 60vh;
  border-radius: var(--radius);
  margin: 0.75rem auto;
}

/* ── v2: Platform tabs ── */
.v2-platform-tabs {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  margin: 1.5rem 0;
  overflow: hidden;
}
.v2-platform-tabs .platform-tabbar {
  display: flex;
  gap: 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.v2-platform-tabs .platform-tab {
  padding: 0.65rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.v2-platform-tabs .platform-tab:hover { color: var(--brand-dark); }
.v2-platform-tabs .platform-tab.is-active {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}
.v2-platform {
  padding: 1rem 1.25rem;
  display: none;
}
.v2-platform.is-active { display: block; }

/* ── v2.11: Feedback widget (Apple iPhone ガイド準拠) ──
   - 絵文字なし、「はい / いいえ」の outlined pill 2 つ
   - solid border の控えめな card、過度な装飾なし
   - 「はい」→ 即サンキュー、「いいえ」→ 改善ポイント入力を表示
*/
.v2-feedback {
  margin: 2.75rem 0 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
  text-align: center;
}
.v2-feedback-question {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}
.v2-feedback-buttons {
  display: inline-flex;
  gap: 0.6rem;
}
.v2-feedback-btn {
  min-width: 88px;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg-soft);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
  font-family: inherit;
}
.v2-feedback-btn:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-dark);
}
.v2-feedback-btn:active { transform: translateY(1px); }
.v2-feedback-btn.is-selected {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

/* 改善ポイント入力 — いいえ 押下時に表示 */
.v2-feedback-comment {
  max-width: 520px;
  margin: 1.25rem auto 0;
  text-align: left;
}
.v2-feedback-comment[hidden] { display: none; }
.v2-feedback-comment-label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.v2-feedback-comment textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.v2-feedback-comment textarea::placeholder { color: var(--disable-fg); }
.v2-feedback-comment textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-20);
}
.v2-feedback-comment-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.7rem;
}
.v2-feedback-skip,
.v2-feedback-submit {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.v2-feedback-skip {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}
.v2-feedback-skip:hover { color: var(--fg); background: var(--bg-soft); }
.v2-feedback-submit {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}
.v2-feedback-submit:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* サンキュー表示 */
.v2-feedback-thanks {
  margin: 0.5rem 0 0;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.95rem;
}
.v2-feedback-thanks[hidden] { display: none; }
.v2-feedback.submitted .v2-feedback-question,
.v2-feedback.submitted .v2-feedback-buttons,
.v2-feedback.submitted .v2-feedback-comment { display: none; }

/* ── v2: Hierarchical sidebar (Apple 風 2 段) ── */
.sidebar-list ul.sidebar-sublist {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--border-strong, var(--border));
  margin-left: 0.85rem;
}
.sidebar-list ul a {
  font-size: 0.85em;
  padding: 0.28rem 0.65rem;
  color: var(--muted);
  line-height: 1.4;
}
.sidebar-list ul a:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
}
/* chevron は .sidebar-toggle ボタン側で描画するため、a 側の古い ::after は使わない */
.sidebar-list .has-children:not(.open) > ul { display: none; }
.sidebar-list .is-active-branch > a {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
  border-left: 3px solid var(--brand);
  padding-left: calc(0.75rem - 3px);
}

/* ── v2.3: Troubleshooting section（章末「うまくいかない時」） ── */
.v2-troubleshoot {
  margin: 2.5rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--accent-light), var(--bg));
  border: 1px solid rgba(229,124,53,0.25);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
.v2-troubleshoot-heading {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
  font-size: 1.1rem !important;
  color: var(--accent-dark) !important;
  font-weight: 700;
}
.v2-troubleshoot-heading::before { display: none !important; }
.v2-troubleshoot-body ul,
.v2-troubleshoot-body ol {
  margin: 0;
  padding-left: 1.25rem;
}
.v2-troubleshoot-body li { margin: 0.4rem 0; line-height: 1.6; }
.v2-troubleshoot-body p { margin: 0.5rem 0; }
.v2-troubleshoot-body strong {
  color: var(--accent-dark);
}
.v2-troubleshoot-body a {
  color: var(--accent-dark);
  font-weight: 600;
}

/* ── v2: Screenshot placeholder（画像未取得） ── */
.v2-screenshot-placeholder {
  border: 2px dashed var(--accent);
  background: repeating-linear-gradient(
    45deg,
    var(--accent-light) 0,
    var(--accent-light) 10px,
    #fff 10px,
    #fff 20px
  );
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 1.25rem auto;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.v2-screenshot-placeholder .placeholder-label {
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.v2-screenshot-placeholder .placeholder-body {
  color: var(--fg-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  background: white;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  flex: 1;
}
.v2-screenshot-placeholder .placeholder-body > :last-child { margin-bottom: 0; }

/* ── v2: soften existing callouts with new radius/shadow ── */
.callout {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ── v2: Hero & Steps on mobile ── */
@media (max-width: 960px) {
  .v2-hero { padding: 1.25rem; }
  .v2-hero .hero-image { max-height: 180px; }
  .v2-step-card { grid-template-columns: 36px 1fr; padding: 0.9rem; gap: 0.75rem; }
  .v2-step-card .step-num { width: 32px; height: 32px; font-size: 0.95rem; }
  .v2-feedback { padding: 1.1rem; }
  .v2-platform-tabs .platform-tab { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
}

/* ── v2.7: Auto <abbr> (用語集リンク) ── */
.v2-abbr {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted var(--brand);
}
.v2-abbr-link {
  color: inherit !important;
  text-decoration: none;
  font-weight: inherit;
}
.v2-abbr:hover {
  border-bottom-color: var(--brand-dark);
  background: var(--brand-light);
}

/* ── v2.7: 用語集ページ ── */
.glossary-section {
  margin: 2rem 0;
}
.glossary-section h2 {
  font-size: 1.25rem !important;
  color: var(--brand-dark) !important;
  border-bottom: 1px solid var(--brand-light) !important;
  padding-bottom: 0.4rem !important;
}
.glossary-section h2::before { display: none !important; }
.glossary-list {
  margin: 0.5rem 0;
  padding: 0;
}
.glossary-entry {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0.6rem 0;
  background: var(--bg);
  scroll-margin-top: 4rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.glossary-entry:target {
  border-color: var(--brand);
  box-shadow: var(--shadow-soft);
}
.glossary-term {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-dark);
  margin: 0 0 0.35rem;
}
.glossary-aliases {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.4rem;
}
.glossary-def {
  margin: 0;
  color: var(--fg-soft);
  line-height: 1.65;
}

/* ── v2.8: C-2 デバイスギャラリー (connect-manual 入口) ── */
.device-gallery {
  margin: 1.6rem 0 2.2rem;
}
.device-gallery-heading {
  font-size: 1.15rem !important;
  margin: 0 0 0.4rem !important;
  color: var(--brand-dark) !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.device-gallery-heading::before { display: none !important; }
.device-gallery-intro {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.device-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
a.device-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
.device-card-disabled {
  opacity: 0.55;
  cursor: default;
}
.device-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--brand-light);
  font-size: 1.85rem;
  line-height: 1;
}
.device-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.device-card-type {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  margin-bottom: 0.15rem;
}
.device-card-type-camera { background: #fef3c7; color: #92400e; }
.device-card-type-card { background: #e0e7ff; color: #3730a3; }
.device-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg);
}
.device-card-summary {
  font-size: 0.88rem;
  color: var(--fg-soft);
  line-height: 1.55;
}
.device-card-cta {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}
.device-card-cta-muted { color: var(--muted); }
.category-chapter-heading {
  font-size: 1.15rem !important;
  margin: 1.8rem 0 0.6rem !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.category-chapter-heading::before { display: none !important; }

/* ── v2: Inline app icons (act-app/src/assets 同期分) ── */
/* SVG 自体に width="1em" height="1em" を injection 済み (scripts/icons/normalize.py)。
   CSS が未ロードでも inline サイズで表示されるため防御的。CSS 側は !important で確実化。 */
.v2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em !important;
  height: 1.1em !important;
  max-width: 1.1em;
  max-height: 1.1em;
  vertical-align: -0.18em;
  margin: 0 0.08em;
  color: currentColor;
  flex-shrink: 0;
  overflow: hidden;
}
.v2-icon > svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor;
  display: block;
}
.v2-icon > svg * {
  fill: currentColor !important;
}
/* 明示的に fill="none" を持つ要素（透明背景 rect 等）は上書きしない。
   normalize.py が <style> を剥がした後の「黒塗り四角」回避と対で動く。 */
.v2-icon > svg [fill="none"] {
  fill: none !important;
}
.v2-icon-missing {
  display: inline-flex;
  align-items: center;
  padding: 0 0.35em;
  font-size: 0.78em;
  border: 1px dashed var(--caution);
  border-radius: 4px;
  color: var(--caution);
  background: var(--caution-light);
}

/* v2 additions end */