/* ============================================================
   YAMADARIUM — style.css
   4色パレット：Void / Moss / Phosphor / Amber
   "Cyber Satoyama (サイバー里山)" Design System
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. CSS カスタムプロパティ（デザイントークン）
   ────────────────────────────────────────────────────────── */
:root {
  /* --- 4コアカラー（絶対値）"Refined Satoyama" --- */
  --core-void:     #141918;   /* ニュートラルダーク・緑飽和度を抑制 */
  --core-moss:     #243830;   /* 苔・自然 — より清潔な中間トーン */
  --core-phosphor: #3ED47C;   /* クリーンミント・AIの生命感 */
  --core-amber:    #D9A63C;   /* 落ち着いた琥珀・音楽のウォーム */

  /* --- タイポグラフィ --- */
  --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', system-ui, sans-serif;
  --font-size-base: 14px;

  /* --- タイプスケール（14px基準）--- */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* --- スペーシング（4px基準グリッド）--- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* --- レイアウト --- */
  --sidebar-width: 210px;
  --tabbar-height: 32px;
  --statusbar-height: 22px;
  --mobile-header-height: 40px;
  /* コンテンツ幅ガイドライン: 記事・詳細ページ系のコンテナが際限なく
     広がらないようにする上限。3440px/5120pxなどウルトラワイドモニターでも
     1行・1カラムが間延びして読みにくくならないための対策値。
     通常のデスクトップ幅（〜1920px程度）ではほぼ全幅を使い切り、
     それを超える画面幅でのみこの値で頭打ちにする */
  --content-max-width: 1760px;

  /* --- トランジション --- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* ── ダークモード（デフォルト）── */
:root,
[data-theme="dark"] {
  /* 背景: 緑の飽和度を落とし、ニュートラルな暗色へ */
  --bg-base:    #141918;
  --bg-surface: #1A2421;
  --bg-panel:   #202D29;
  --bg-hover:   #283830;
  --bg-active:  #2D4238;

  /* テキスト: ホワイト寄りに。フォスファー感を排除 */
  --text-primary:   #EAF2EC;
  --text-secondary: #96B4A2;
  --text-muted:     #526A5E;
  --text-inverse:   #141918;

  /* アクセント: クリーンミント + 落ち着いた琥珀 */
  --accent:           #D9A63C;
  --accent-dim:       #7A5818;
  --accent-green:     #3ED47C;
  --accent-green-dim: #1A6840;

  --border:        #263330;
  --border-focus:  #D9A63C;
  --border-strong: #2D4238;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);

  --scrollbar-thumb: #2D4238;
  --scrollbar-track: #141918;
}

/* ── ライトモード ── */
[data-theme="light"] {
  --bg-base:    #F8F6F1;
  --bg-surface: #F0EDE6;
  --bg-panel:   #E7E4DC;
  --bg-hover:   #DAD7CE;
  --bg-active:  #CCCAB8;

  --text-primary:   #181F1B;
  --text-secondary: #2D4A3A;
  --text-muted:     #7A9080;
  --text-inverse:   #F8F6F1;

  --accent:           #9A5C10;
  --accent-dim:       #C47A30;
  --accent-green:     #1B7A42;
  --accent-green-dim: #3ED47C;

  --border:        #D4D0C6;
  --border-focus:  #9A5C10;
  --border-strong: #B8B4A8;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);

  --scrollbar-thumb: #C8C4B8;
  --scrollbar-track: #F8F6F1;
}

/* ──────────────────────────────────────────────────────────
   2. CSS リセット
   ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-base);
  min-height: 100%;
  /* IDEレイアウト: スクロールをapp-shell内に閉じ込める */
  overflow: hidden;
}

a {
  color: var(--accent-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 1px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
  color: inherit;
}

/* カスタムスクロールバー */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* ──────────────────────────────────────────────────────────
   3. アプリシェル（IDEライクグリッドレイアウト）
   ────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 1fr;
  height: calc(100dvh - var(--statusbar-height));
  /* モバイルヘッダー分を引く（PCは.mobile-headerが非表示なので0）*/
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────
   4. サイドバー
   ────────────────────────────────────────────────────────── */
.app-sidebar {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
}

/* ロゴ */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.logo-link:hover { color: var(--accent); }

.logo-mark {
  color: var(--accent-green);
  font-size: var(--text-xs);
}

.logo-cursor {
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  animation: blink 1.2s step-end infinite;
  margin-left: auto;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ナビゲーション */
.sidebar-nav {
  flex: 1;
  padding: var(--sp-2) 0;
}

.nav-tree-label {
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: .06em;
  margin-bottom: var(--sp-1);
}

.nav-list { display: flex; flex-direction: column; }

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-left: 2px solid transparent;
}

.nav-link:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-left-color: var(--border-strong);
}

/* 現在地を含む枝（自分自身は選択中ではない）: 左ボーダーの色だけで在圏を示す控えめな強調。
   ">" で直接の自分のリンクだけに限定し、入れ子のサブメニューへ強調が漏れないようにする */
.nav-item.is-active > .nav-link {
  color: var(--text-primary);
  border-left-color: var(--accent-green-dim);
}

/* まさに今開いているページ: サイト共通の強調表現（背景・アクセント色・左ボーダー・ドット） */
.nav-item.is-current > .nav-link {
  background-color: var(--bg-active);
  color: var(--accent-green);
  border-left-color: var(--accent-green);
  font-weight: 600;
}

.nav-icon {
  font-size: var(--text-xl);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-active-dot {
  width: 5px;
  height: 5px;
  background: var(--accent-green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── サイドバー：多階層ナビ（ソフトウェア > 製品 > サブページ） ──
   開閉ボタンは持たない。現在地が含まれる枝だけ、直下の子を1階層自動的に表示する
   （サイトトップ＝「ソフトウェア」のみ／/software/ 配下＝「MUSICMAN」が現れる／
   　/software/musicman/ 配下＝「マニュアル」「プライバシーポリシー」が現れる）。
   製品（depth1）どうしの区切り・製品配下ページ（depth2）の接続ラインで、
   「どの製品の子ページか」が一目で分かるようにする */
.nav-sublist { display: flex; flex-direction: column; }

/* 製品名（depth1）はセクション見出し寄りの控えめな表記に。
   インデントは親ラッパー（.nav-item--depth0 > .nav-sublist）側で作るため、
   リンク自体の左パディングは控えめにする（depth2 と同じ考え方） */
.nav-item--depth1 > .nav-link {
  padding-left: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--text-muted);
  opacity: .8;
}
.nav-item--depth1 > .nav-link:hover,
.nav-item--depth1.is-active > .nav-link,
.nav-item--depth1.is-current > .nav-link {
  opacity: 1;
}
.nav-item--depth1.is-active > .nav-link { color: var(--text-primary); }
.nav-item--depth1.is-current > .nav-link { color: var(--accent-green); }

/* 別の製品（depth1どうし）の区切り: MUSICMAN と StoryboardMan のような
   独立したソフトウェアが並ぶ境目に、一目で別グループと分かるスペーサーを入れる */
.nav-item--depth1 + .nav-item--depth1 {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
}

/* 製品配下のページ一覧（depth1直下のsublist = depth2群）:
   薄い背景＋接続ラインで「この製品の子ページ」であることを視覚的にまとめる */
.nav-item--depth1 > .nav-sublist {
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 14px;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-2);
  background: var(--bg-panel);
  border-left: 2px solid var(--accent-green-dim);
  border-radius: 0 3px 3px 0;
}

/* 実ページ（depth2: マニュアル・プライバシーポリシー等）
   インデントは親ラッパー（.nav-item--depth1 > .nav-sublist）側で作るため、
   リンク自体の左パディングは控えめにする */
.nav-item--depth2 > .nav-link {
  padding-left: var(--sp-2);
}

/* ソフトウェア一覧（depth0直下のsublist = depth1製品群）:
   depth1 > depth2 の入れ子と同じ「薄い背景＋接続ライン」で、MUSICMAN / StoryboardMan が
   「ソフトウェア」の子アイテムであることが一目で分かるようにする */
.nav-item--depth0 > .nav-sublist {
  margin: var(--sp-1) var(--sp-2) var(--sp-2) 22px;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-2);
  background: var(--bg-panel);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 3px 3px 0;
}

/* ── サイドバー内SNSリンク（1行ずつのシンプルな表示） ── */
.sidebar-sns {
  display: flex;
  flex-direction: column;
  padding: var(--sp-1);
  border-top: 1px solid var(--border);
}
.sidebar-sns-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 3px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-sns-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar-sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.sidebar-sns-item:hover .sidebar-sns-icon { color: inherit; }
.sidebar-sns-icon svg { width: 100%; height: 100%; }
.sidebar-sns-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── サイドバー内コントロールボタン ── */
.sidebar-controls {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ctrl-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.ctrl-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent-green);
}

.ctrl-btn:active {
  background: var(--bg-active);
}

.ctrl-btn:focus-visible {
  outline: 1px solid var(--border-focus);
  outline-offset: 1px;
}

.ctrl-icon { font-size: var(--text-md); line-height: 1; }
.ctrl-label { font-size: var(--text-xs); }

/* 言語切替アイコン：現在の言語の国旗を表示 */
.ctrl-icon--flag {
  display: inline-flex;
  line-height: 0;
}
.flag-icon {
  width: 20px;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  display: block;
}

/* サイドバー下部 */
.sidebar-foot {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.sidebar-version {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────
   5. メインコンテンツエリア
   ────────────────────────────────────────────────────────── */
.app-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-base);
}

/* IDEタブバー */
.main-tabbar {
  display: flex;
  align-items: stretch;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  min-height: var(--tabbar-height);
  flex-shrink: 0;
  overflow-x: auto;
}

.tab {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  cursor: default;
  position: relative;
}

.tab.is-active {
  background-color: var(--bg-base);
  color: var(--text-primary);
  border-top: 1px solid var(--accent-green);
}

.tab-icon { font-size: var(--text-xs); }
.tab-dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: var(--sp-1);
}

/* コンテンツスクロール
   全ページ共通の上限幅。通常のデスクトップ幅ではほぼ全幅を使い切り、
   ウルトラワイドモニターなどそれを超える画面幅でのみこの値で頭打ちにする。
   flex:1 な要素がmax-widthで頭打ちになると、余った幅がすべて右側の
   空白として残ってしまうため、margin-inline:auto で左右に振り分ける */
.content-scroll {
  /* app-main は flex-direction: column のため、この要素にとっての
     flexは主軸（縦）の話で、幅（交差軸）は align-items の stretch 任せになる。
     width を明示せず max-width だけで頭打ちにすると、align-self を
     center 等へ変えた途端に幅がコンテンツの内容依存（shrink-to-fit）へ
     切り替わってしまい、かえって極端に狭くなる。width:100% を明示して
     おくことで stretch と同じ「親幅いっぱい→max-widthで頭打ち」を保ったまま、
     頭打ち時の余りは margin-inline:auto で左右均等に振り分けられる */
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4) var(--sp-5);
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

/* ──────────────────────────────────────────────────────────
   7. ホームグリッド
   ────────────────────────────────────────────────────────── */
/* 左カラム＝最新記事、右カラム＝作品/ソフトウェア/FOLLOWの縦積みスタック。
   2カラムとも align-items:start で独立した高さのまま並び、
   右カラム内の各パネル間隔は .home-side-stack 側の gap だけで決まる
   （grid-row スパンによる不要な伸び・パネル間の間延びを避けるため、
   　右カラムはあえて内側の flex コンテナに閉じ込めている） */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-3);
  align-items: start;
}

.home-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── SNS パネル ───────────────────────────────────────── */
.sns-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sns-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--transition-base),
              background   var(--transition-base),
              box-shadow   var(--transition-base);
  position: relative;
  overflow: hidden;
}
.sns-item::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.sns-item:hover {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 1px var(--accent-green-dim), 0 4px 16px rgba(62,212,124,.08);
}

/* アイコンラッパー */
.sns-icon-wrap {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.sns-item:hover .sns-icon-wrap { transform: scale(1.08); }

/* YouTube */
.sns-item--yt .sns-icon-wrap {
  background: rgba(255,0,0,.1);
  color: #ff3b3b;
}
.sns-item--yt:hover { border-color: rgba(255,59,59,.5); box-shadow: 0 0 0 1px rgba(255,59,59,.2), 0 4px 16px rgba(255,59,59,.06); }

/* Instagram */
.sns-item--ig .sns-icon-wrap {
  background: rgba(225,48,108,.1);
  color: #e1306c;
}
.sns-item--ig:hover { border-color: rgba(225,48,108,.5); box-shadow: 0 0 0 1px rgba(225,48,108,.2), 0 4px 16px rgba(225,48,108,.06); }

.sns-icon-wrap svg { width: 20px; height: 20px; }

/* テキスト */
.sns-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.sns-platform {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-primary);
}
.sns-handle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 矢印 */
.sns-arrow {
  font-size: .85rem;
  color: var(--text-muted);
  transition: color var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}
.sns-item:hover .sns-arrow {
  color: var(--accent-green);
  transform: translate(2px, -2px);
}

/* AdSense パネル */
.panel--ad .panel-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: var(--sp-3);
}

/* ホームページ Works プレビューリスト：
   サムネイル画像（16:9）＋タイトルのカード全体が作品詳細ページへのリンク */
.home-works-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-work-item { min-width: 0; }
.home-work-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.home-work-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color var(--transition-fast);
}
.home-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}
.home-work-thumb-empty {
  font-size: var(--text-2xl);
  color: var(--text-muted);
}
.home-work-link:hover .home-work-thumb,
.home-work-link:focus-visible .home-work-thumb { border-color: var(--accent-green); }
.home-work-link:hover .home-work-thumb img { transform: scale(1.03); }
.home-work-link:hover .home-work-title { color: var(--accent-green); }
.home-work-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  padding: 0 var(--sp-1);
}
.home-work-featured {
  color: var(--accent);
  font-size: var(--text-xs);
  line-height: 1;
}
.home-work-title {
  color: var(--text-primary);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-work-cat {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ホームページ ソフトウェアプレビューリスト：
   上段に大きくサムネイル、直下に名前・カテゴリーを縦に積むカード表示 */
.home-software-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.home-software-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-1);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.home-software-item:hover { background: var(--bg-hover); }
.home-software-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg-panel);
  display: block;
}
.home-software-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-1);
}
.home-software-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}
.home-software-cat {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .03em;
}

/* ──────────────────────────────────────────────────────────
   8. パネルコンポーネント
   ────────────────────────────────────────────────────────── */
.panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.panel-title-icon { color: var(--accent-green); }

.panel-more {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.panel-more:hover { color: var(--accent); }

.panel-body { padding: var(--sp-3); }

/* 新着記事パネルはpanel-bodyの余白を持たず、タイルグリッドを枠いっぱいに広げる */
.panel--posts { overflow: hidden; }
.panel--posts .panel-body { padding: 0; }

.empty-state {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  padding: var(--sp-5);
}

/* お知らせバナー（ソフトウェア配信停止など、ページ上部での状態案内） */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}
.notice--suspended {
  background: rgba(217,166,60,.08);
  border: 1px solid rgba(217,166,60,.3);
}
.notice-icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--accent);
}
.notice-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Aboutパネル */
.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  color: var(--text-secondary);
  background: var(--bg-hover);
}

/* Worksパネル */
.works-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: 2px;
}

.works-placeholder-icon { font-size: 24px; }

/* ──────────────────────────────────────────────────────────
   9. ステータスバー
   ────────────────────────────────────────────────────────── */
.app-statusbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--statusbar-height);
  background-color: var(--core-moss);
  color: #EAF2EC;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0 var(--sp-2);
  gap: var(--sp-2);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

[data-theme="light"] .app-statusbar {
  background-color: var(--core-void);
  color: #EAF2EC;
}

.statusbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.statusbar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  height: var(--statusbar-height);
  white-space: nowrap;
  opacity: .85;
}

.statusbar-btn {
  background: none;
  border: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  opacity: .85;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
  padding: 0 var(--sp-2);
  height: var(--statusbar-height);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.statusbar-btn:hover {
  opacity: 1;
  background-color: rgba(255,255,255,.1);
}
.statusbar-btn:focus-visible {
  outline: 1px solid #C4F5DA;
  outline-offset: -2px;
}

.statusbar-copy { opacity: .5; }
.statusbar-copy small { font-size: var(--text-xs); }

/* ──────────────────────────────────────────────────────────
   10. モバイルヘッダー
   ────────────────────────────────────────────────────────── */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: var(--mobile-header-height);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

.mobile-site-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .06em;
  text-decoration: none;
}
.mobile-site-name:hover { color: var(--accent); }

/* モバイルヘッダー右端のコントロール群 */
.mobile-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.mobile-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  user-select: none;
}

.mobile-ctrl-btn:hover,
.mobile-ctrl-btn:active {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent-green);
}

.mobile-ctrl-btn:focus-visible {
  outline: 1px solid var(--border-focus);
  outline-offset: 1px;
}

.mobile-ctrl-btn .js-theme-icon,
.mobile-ctrl-btn .js-lang-icon {
  font-size: var(--text-md);
  line-height: 1;
}

/* ハンバーガーボタン */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* サイドバーオーバーレイ（モバイル）*/
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 149;
}

/* ──────────────────────────────────────────────────────────
   11. レスポンシブ
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { overflow: auto; }

  .mobile-header { display: flex; }

  .app-shell {
    grid-template-columns: 1fr;
    height: calc(100dvh - var(--statusbar-height) - var(--mobile-header-height));
    margin-top: var(--mobile-header-height);
  }

  /* サイドバーはオフキャンバス */
  .app-sidebar {
    position: fixed;
    top: var(--mobile-header-height);
    left: 0;
    bottom: var(--statusbar-height);
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 150;
    box-shadow: var(--shadow-md);
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay.is-open {
    display: block;
  }

  /* メインはフルカラム */
  .app-main { grid-column: 1; }

  /* ホームグリッドはワンカラム（最新記事 → 作品/ソフトウェア/FOLLOWスタックの順） */
  .home-grid {
    grid-template-columns: 1fr;
  }

  .content-scroll {
    padding: var(--sp-3);
  }
}

@media (max-width: 480px) {
  :root { --sidebar-width: 85vw; }
}

/* ──────────────────────────────────────────────────────────
   12. アクセシビリティ
   ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* モーション低減 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────
   13. ブログ共通（一覧・詳細共通）
   ────────────────────────────────────────────────────────── */

/* パンくず */
.breadcrumb { margin-bottom: var(--sp-4); }
/* ブログ記事ページ（一覧ページは対象外）のみ読みやすい幅に絞る */
.page-blog-detail .breadcrumb { max-width: 1000px; margin-inline: auto; }
.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.breadcrumb-list a { color: var(--text-muted); }
.breadcrumb-list a:hover { color: var(--accent-green); }
.breadcrumb-list [aria-current="page"] { color: var(--text-secondary); }
.breadcrumb-sep { user-select: none; }

/* ページヘッダー */
.page-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.page-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}
.page-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}
.page-count-num { color: var(--accent-green); }
.page-count-filter { margin-left: var(--sp-1); }

/* カテゴリーフィルター */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.cat-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cat-tag:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-focus);
}
.cat-tag.is-active {
  background: var(--bg-active);
  color: var(--accent-green);
  border-color: var(--accent-green);
}

/* ──────────────────────────────────────────────────────────
   14. ブログ一覧（カードリスト）/ 新着記事パネル（ホーム）: Masonryレイアウト
   ────────────────────────────────────────────────────────── */
/* 列固定幅・最短列優先の「真のマソンリー」。assets/js/main.js の
   layoutMasonry() が、コンテナ実幅から列数（--masonry-col-min 以上の幅を
   確保できる最大数）と列幅を算出し、各タイルを position:absolute で
   最も短い列へ順に積む。列ごとに独立して高さが伸びるため、旧CSS Grid
   （dense・行を全列で共有）のように「狭い列だけ先に尽きて大きな空白の
   長方形が残る」ことが構造的に起きない。

   横幅のバリエーション: サムネイル大中小（.tile-size-lg/md、PHPの
   blog_tile_size_class()）のタイルは隣接する複数列にまたがる
   （列数に応じて 大=2〜3列・中=1〜2列、テキストのみ/小=1列）。
   またぐ列の高さが揃っていないと上に穴ができるため、JSは数件先まで
   先読みして1列タイルで段差を埋めてから配置し、それでも残る段差は
   直上のタイルを引き伸ばして埋める（サムネイル付きは画像を、テキストのみは
   カード下部の余白を伸ばす）。.post-grid は末尾の「一覧へ」タイル等を
   伸ばして下端も揃える（--masonry-fill-end: 1）。

   JS無効時/実行前は下記の auto-fill グリッドで表示される（is-masonry が
   付くと絶対配置に切り替わる）。画像は aspect-ratio で幅から高さが決まるため
   読み込み完了を待たずに計測できる */
.blog-list,
.post-grid {
  --masonry-col-min: 260px;
  --masonry-gap: var(--sp-4);
  --masonry-fill-end: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--masonry-col-min)), 1fr));
  gap: var(--masonry-gap);
  align-items: start;
  container-type: inline-size;
}
.post-grid {
  --masonry-col-min: 240px;
  --masonry-gap: var(--sp-2);
  --masonry-fill-end: 1;
}
/* JS配置モード: 位置・幅・（引き伸ばし時の）高さ・コンテナ高さはJSがインラインで指定する */
.blog-list.is-masonry,
.post-grid.is-masonry {
  display: block;
  position: relative;
}
.is-masonry > li {
  position: absolute;
  margin: 0;
}

.blog-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.blog-card:hover { border-color: var(--border-strong); }

/* フォールバック（JS無効時）のみ: 大サムネイルは2列にまたがる */
@container (min-width: 600px) {
  .blog-list:not(.is-masonry) > .tile-size-lg,
  .post-grid:not(.is-masonry) > .tile-size-lg { grid-column: span 2; }
}

/* 段差埋めでタイルが引き伸ばされた（li に高さが指定された）場合に中身を追従させる。
   高さ未指定（計測時）は height:100% が auto 扱いになり本来の高さで測れる */
.is-masonry > .blog-card > article { height: 100%; }
.is-masonry .blog-card-link { display: flex; flex-direction: column; height: 100%; }
.is-masonry .blog-card-tile-thumb { flex: 1 0 auto; }
.is-masonry .blog-card-content { flex: 0 0 auto; }
.is-masonry .blog-card-snap-link,
.is-masonry .blog-card-snap-media { height: 100%; }

.blog-card-link {
  display: block;
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}
.blog-card-link:hover { background: var(--bg-hover); color: var(--text-primary); }

.blog-card-content { padding: var(--sp-3) var(--sp-4); }

.blog-card-tile-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.tile-size-md .blog-card-tile-thumb { aspect-ratio: 3 / 2; }
.tile-size-lg .blog-card-tile-thumb { aspect-ratio: 2 / 1; }

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.blog-card-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.blog-card-cat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-green);
  background: var(--bg-active);
  padding: 1px 8px;
  border-radius: 2px;
  border: 1px solid var(--accent-green-dim);
}
.blog-card-title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--sp-2);
  color: var(--text-primary);
}
.tile-size-lg .blog-card-title { font-size: var(--text-lg); }
.blog-card-excerpt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.tile-size-lg .blog-card-excerpt { -webkit-line-clamp: 3; }
.blog-card-more {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-green);
  display: inline-block;
}

/* ── SNAP投稿カード（写真あり）: 記事の横長行とは形そのものを変え、
   コンパクトな正方形タイルとして一覧に差し込む（Instagramのグリッド寄りのサイズ感）。
   日付・キャプションは写真の下端にグラデーションで重ねる ── */
.blog-card-snap-link {
  display: block;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  transition: opacity var(--transition-fast);
}
.blog-card-snap-link:hover { opacity: .92; }

.blog-card-snap-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-panel);
}
.tile-size-md .blog-card-snap-media { aspect-ratio: 4 / 3; }
.tile-size-lg .blog-card-snap-media { aspect-ratio: 2 / 1; }
.blog-card-snap-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card-snap-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%);
}
.blog-card-snap-date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.7);
  margin-bottom: 2px;
}
.blog-card-snap-caption {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-size-lg .blog-card-snap-caption {
  font-size: var(--text-base);
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 写真なしのSNAP投稿はテキストのみのタイルになる */
.blog-card--snap-text .blog-card-excerpt { -webkit-line-clamp: 4; margin-bottom: 0; }

/* ホームの新着記事パネル: 単独カードのような枠は持たせず、パネルに敷き詰める */
.post-grid .blog-card { border-radius: 0; }

/* グリッド末尾の余りを埋める「一覧へ」CTAタイル（JSが常に最後に配置し、下端まで伸ばす） */
.post-tile--more { min-height: 96px; }
.is-masonry > .post-tile--more { display: flex; flex-direction: column; }
.is-masonry > .post-tile--more > .post-tile-more-link { flex: 1; }
.post-tile-more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 100%;
  min-height: 96px;
  background: var(--bg-panel);
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.post-tile-more-link:hover {
  color: var(--accent-green);
  border-color: var(--accent-green-dim);
  background: var(--bg-hover);
}
.post-tile-more-icon { font-size: var(--text-md); }


/* ── SNAP投稿の詳細ページ: 写真をほぼフルブリードで大きく見せる ──
   .blog-content（後方で幅1000pxを指定）と詳細度を揃えるため、単体クラスではなく
   .blog-content.blog-content--snap にして、ソース順に依存せず確実にこちらの
   600pxが優先されるようにする */
.blog-content.blog-content--snap { max-width: 600px; margin-left: auto; margin-right: auto; }
.blog-content--snap .md-figure {
  margin: 0 0 var(--sp-3);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.blog-content--snap .md-figure img {
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
  background: var(--bg-panel);
  border: none;
  border-radius: var(--radius-md);
  display: block;
}
.blog-content--snap p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ページネーション */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
a.pagination-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.pagination-btn.is-active {
  background: var(--bg-active);
  color: var(--accent-green);
  border-color: var(--accent-green);
  pointer-events: none;
}
.pagination-btn.is-disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   15. ブログ詳細 — 記事ヘッダー
   ────────────────────────────────────────────────────────── */
.article-header {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.article-meta-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.article-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.article-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-green);
  background: var(--bg-active);
  padding: 1px 8px;
  border-radius: 2px;
  border: 1px solid var(--accent-green-dim);
}
.article-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin-bottom: var(--sp-2);
}
.article-author {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.author-icon { color: var(--accent-green); font-size: var(--text-xs); }

/* ──────────────────────────────────────────────────────────
   16. ブログ詳細 — 本文（Markdownスタイル）
   ────────────────────────────────────────────────────────── */
.blog-content {
  max-width: 1000px;
  margin-inline: auto;
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-primary);
}

/* 見出し */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: 2.2em;
  margin-bottom: .6em;
  scroll-margin-top: calc(var(--tabbar-height) + var(--sp-3));
}
.blog-content h1 { font-size: var(--text-2xl); border-bottom: 1px solid var(--border); padding-bottom: .3em; }
.blog-content h2 { font-size: var(--text-xl);  border-bottom: 1px solid var(--border); padding-bottom: .3em; }
.blog-content h3 { font-size: var(--text-lg); }
.blog-content h4 { font-size: var(--text-md); }
.blog-content h5 { font-size: var(--text-base); color: var(--text-secondary); }
.blog-content h6 { font-size: var(--text-sm);   color: var(--text-secondary); }

.blog-content h1:first-child,
.blog-content h2:first-child { margin-top: 0; }

/* 段落 */
.blog-content p {
  margin-bottom: 1.4em;
  color: var(--text-secondary);
}

/* リスト */
.blog-content ul,
.blog-content ol {
  margin-left: var(--sp-5);
  margin-bottom: 1.4em;
  color: var(--text-secondary);
}
.blog-content ul { list-style: none; }
.blog-content ul li { position: relative; padding-left: var(--sp-3); }
.blog-content ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent-green);
  font-family: var(--font-mono);
}
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: .4em; line-height: 1.7; }

/* ブロック引用 */
.blog-content blockquote {
  border-left: 3px solid var(--accent-green);
  padding: var(--sp-2) var(--sp-4);
  margin: 1.4em 0;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-style: italic;
  border-radius: 0 2px 2px 0;
}
.blog-content blockquote p { margin-bottom: .4em; }
.blog-content blockquote p:last-child { margin-bottom: 0; }

/* インラインコード */
.blog-content code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--bg-panel);
  color: var(--accent-green);
  padding: .1em .4em;
  border-radius: 2px;
  border: 1px solid var(--border);
}

/* コードブロック */
.blog-content pre {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green-dim);
  border-radius: 2px;
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  margin: 1.4em 0;
  tab-size: 2;
}
.blog-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

/* テーブル */
.blog-content .table-wrap {
  overflow-x: auto;
  margin: 1.4em 0;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.blog-content th {
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.blog-content td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}
.blog-content tr:last-child td { border-bottom: none; }
.blog-content tr:hover td { background: var(--bg-hover); }

/* 画像 */
.blog-content .md-figure {
  margin: 1.4em 0;
}
.blog-content .md-figure img {
  max-width: min(100%, 800px);
  height: auto;
  border: 1px solid var(--border);
  border-radius: 2px;
  display: block;
  cursor: zoom-in;
  transition: opacity var(--transition-fast);
}
.blog-content .md-figure img:hover { opacity: .92; }
.blog-content .md-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  padding: 0 var(--sp-1);
}

/* 水平線 */
.blog-content hr {
  border: none;
  border-top: 1px solid var(--border-strong);
  margin: 2em 0;
}

/* リンク */
.blog-content a {
  color: var(--accent-green);
  text-decoration: underline;
  text-decoration-color: var(--accent-green-dim);
  text-underline-offset: 2px;
}
.blog-content a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* インライン強調 */
.blog-content strong { font-weight: 700; color: var(--text-primary); }
.blog-content em     { font-style: italic; color: var(--text-primary); }
.blog-content del    { text-decoration: line-through; color: var(--text-muted); }

/* ──────────────────────────────────────────────────────────
   17. 前後記事ナビゲーション
   ────────────────────────────────────────────────────────── */
.post-nav {
  max-width: 1000px;
  margin-inline: auto;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.post-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-2);
  align-items: center;
}
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.post-nav-item:not(.is-disabled):hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.post-nav-item.is-disabled { opacity: .3; pointer-events: none; min-height: 50px; }
.post-nav-prev { text-align: left; }
.post-nav-next { text-align: right; }
.post-nav-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.post-nav-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
}
.post-nav-list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
  font-size: var(--text-md);
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.post-nav-list-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

@media (max-width: 600px) {
  .post-nav-inner { grid-template-columns: 1fr 1fr; }
  .post-nav-list-btn { display: none; }
  .article-title { font-size: var(--text-xl); }
}

/* ──────────────────────────────────────────────────────────
   18. Worksページ（YouTube埋め込みポートフォリオ）
   ────────────────────────────────────────────────────────── */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.work-card:hover { border-color: var(--border-strong); }
.work-card > article { display: flex; flex-direction: column; height: 100%; }
.work-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* 動画フェイサード（クリックでiframeに置換） */
.work-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-panel);
}

.work-video-facade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.work-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-video-play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: var(--text-lg);
  color: var(--text-inverse);
  background: var(--accent-green);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.work-video-facade:hover .work-video-play,
.work-video-facade:focus-visible .work-video-play {
  transform: scale(1.08);
  background: var(--accent);
}

.work-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 静止画サムネイル（ソフトウェア一覧など、動画facadeを持たないカード用） */
.work-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--bg-panel);
}

/* 作品情報 */
.work-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-4);
}

.work-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.work-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.work-cat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-green);
  background: var(--bg-active);
  padding: 1px 8px;
  border-radius: 2px;
  border: 1px solid var(--accent-green-dim);
}

.work-title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--sp-2);
  color: var(--text-primary);
}

.work-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
  flex: 1;
}

.work-yt-link {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-green);
  transition: color var(--transition-fast);
}
.work-yt-link:hover { color: var(--accent); }

/* 一覧カード: サムネイル・タイトルは作品詳細ページへのリンク */
.work-video-link {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.work-video-link .work-video-thumb { transition: transform var(--transition-base); }
.work-video-link:hover .work-video-thumb { transform: scale(1.03); }
.work-video-link:hover .work-video-play,
.work-video-link:focus-visible .work-video-play {
  transform: scale(1.08);
  background: var(--accent);
}
.work-title-link { color: inherit; }
.work-title-link:hover { color: var(--accent-green); }

/* ── 作品詳細ページ（/works/{slug}/）: YouTubeの視聴ページに近い縦積み構成 ──
   プレーヤー → タイトル → 日付・カテゴリー → 概要欄 → 歌詞（和訳/英訳タブ） → カラオケ音源 */
.work-watch {
  max-width: 1280px;
  margin-inline: auto;
}
.work-watch-player {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-panel);
}
.work-video-play--lg {
  width: 76px;
  height: 76px;
  font-size: var(--text-2xl);
}

.work-watch-header { margin-top: var(--sp-4); }
.work-watch-title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.work-watch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
}
a.work-cat { text-decoration: none; transition: border-color var(--transition-fast); }
a.work-cat:hover { border-color: var(--accent-green); }
.work-watch-yt { margin-left: auto; }

/* 概要欄・歌詞・音源の共通ボックス（YouTubeの概要欄の塗りボックス風） */
.work-watch-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: var(--sp-4);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-primary);
}
.work-watch-desc { margin-top: var(--sp-4); }
.work-watch-desc p { margin: 0; overflow-wrap: anywhere; }
.work-watch-desc a { color: var(--accent-green); }
.work-watch-desc a:hover { color: var(--accent); }

.work-watch-section { margin-top: var(--sp-6); }
.work-watch-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.work-watch-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}

/* 歌詞: メイン歌詞の各行の直下に（ローマ字ON時）ローマ字 → サブ歌詞（翻訳）を縦に添える表記。
   メイン = 大きく・明るく・やや太く
   ローマ字 = メインの読みとして行頭をメインに揃え、琥珀色（--accent）・小さめ・字間広め（縦線なし）
   サブ = 小さく・一段暗い色・左の細い緑の縦線で「直上の行の訳」と分かるようにする
   文字サイズは clamp() で画面幅に応じて連続的に変化（スマホでも詰まらず、ワイド画面でも大きすぎない） */

/* 見出し右の「ローマ字」トグルボタン（aria-pressed でON/OFF） */
.work-lyrics-romaji-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.work-lyrics-romaji-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.work-lyrics-romaji-btn.is-active {
  color: var(--text-inverse);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.work-lyrics-body {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6)) clamp(var(--sp-4), 4vw, calc(var(--sp-6) * 2));
}
.work-lyrics-stanza + .work-lyrics-stanza {
  margin-top: clamp(var(--sp-5), 3vw, calc(var(--sp-6) * 1.5));
}
.work-lyrics-line { margin: 0; }
.work-lyrics-body.has-sub .work-lyrics-line + .work-lyrics-line {
  margin-top: clamp(var(--sp-2), 1.2vw, var(--sp-3));
}
/* ローマ字ON時は1行あたりの段数が増えるので、行と行の間を少し広げて塊を見分けやすくする */
.work-lyrics-body.show-romaji .work-lyrics-line + .work-lyrics-line {
  margin-top: clamp(var(--sp-3), 1.6vw, var(--sp-4));
}
.work-lyrics-main {
  display: block;
  font-size: clamp(calc(var(--text-md) + 1px), 0.9rem + 0.45vw, var(--text-xl));
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.work-lyrics-romaji {
  display: none;
  font-size: clamp(calc(var(--text-sm) + 1px), 0.72rem + 0.18vw, var(--text-base));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.work-lyrics-body.show-romaji .work-lyrics-romaji { display: block; }
.work-lyrics-sub {
  display: block;
  margin-top: 2px;
  padding-left: var(--sp-2);
  border-left: 2px solid var(--accent-green-dim);
  font-size: clamp(calc(var(--text-sm) + 1px), 0.72rem + 0.2vw, var(--text-base));
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.work-lyrics-body.show-romaji .work-lyrics-sub { margin-top: var(--sp-1); }

/* 折りたたみ: 先頭3行（WORK_LYRICS_VISIBLE_LINES）以外を隠し、ボックス直下の「続きを見る」で展開 */
.work-lyrics-body.is-collapsed .is-extra { display: none; }
.work-lyrics-body.is-collapsed { border-bottom-style: dashed; }
.work-lyrics-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: -1px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-green);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0 0 2px 2px;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.work-lyrics-more[hidden] { display: none; }
.work-lyrics-more:hover { background: var(--bg-hover); color: var(--accent); }
.work-lyrics-more-icon { display: inline-block; transition: transform var(--transition-base); }
.work-lyrics-more[aria-expanded="true"] .work-lyrics-more-icon { transform: rotate(180deg); }

/* 「歌ってみた」用カラオケ音源 */
.work-karaoke-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-5);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-inverse);
  background: var(--accent-green);
  border-radius: 2px;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.btn-download:hover,
.btn-download:focus-visible { background: var(--accent); color: var(--text-inverse); }
.work-karaoke-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  font-size: var(--text-sm);
}
.work-karaoke-spec > div { display: flex; gap: var(--sp-2); }
.work-karaoke-spec dt { color: var(--text-muted); }
.work-karaoke-spec dd { margin: 0; font-family: var(--font-mono); color: var(--text-primary); }
.work-karaoke-alert {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--accent);
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
}
.work-karaoke-empty { margin: 0; color: var(--text-secondary); }

/* カラオケ音源の利用規約（プライバシーポリシーと同じ .privacy-* を流用し、サイト全体でトーンを揃える） */
.work-karaoke-terms-box .privacy-section:last-of-type {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.work-karaoke-terms-lead {
  font-weight: 700;
  color: var(--text-primary);
}
.work-karaoke-terms-credit {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.work-karaoke-terms-updated {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: right;
}

.work-watch-back { margin-top: var(--sp-6); font-size: var(--text-sm); }
.work-watch-back a { color: var(--text-muted); }
.work-watch-back a:hover { color: var(--accent-green); }

@media (max-width: 768px) {
  .work-watch-title { font-size: var(--text-lg); }
  .work-watch-yt { margin-left: 0; }
  .work-video-play--lg { width: 60px; height: 60px; font-size: var(--text-xl); }
  .work-watch-box { padding: var(--sp-3); }
}

/* ──────────────────────────────────────────────────────────
   19. プリントスタイル（ブログ追記）
   ────────────────────────────────────────────────────────── */
/* プリントスタイル */
@media print {
  .app-sidebar,
  .mobile-header,
  .app-statusbar,
  .main-tabbar { display: none !important; }
  .app-shell { display: block; }
  .content-scroll { overflow: visible; }
}

/* ──────────────────────────────────────────────────────────
   20. FAQ アコーディオン
   ────────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  max-width: var(--content-max-width);
}

/* アコーディオン 1項目 */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--transition-base);
  /* 開閉時の高さ変化を1項目内に閉じ込め、サイドバー等ページ全体の再レイアウトへの
     波及を抑える（低スペック端末でのカクつき対策。max-heightアニメーション自体は
     レイアウトプロパティのため完全には避けられないが、影響範囲を局所化する） */
  contain: layout style;
}
.faq-item:hover {
  border-color: var(--border-strong);
}
.faq-item.is-open {
  border-color: var(--accent-green-dim);
}

/* Q ボタン */
.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  line-height: 1.5;
}
.faq-question:hover {
  background: var(--bg-hover);
}
.faq-question:focus-visible {
  outline: 1px solid var(--border-focus);
  outline-offset: -2px;
}

/* Q ラベル */
.faq-q-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-green);
  background: var(--bg-active);
  border: 1px solid var(--accent-green-dim);
  border-radius: 2px;
  padding: 1px 6px;
  margin-top: 1px;
  letter-spacing: 0.05em;
}

/* Q テキスト */
.faq-q-text {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* シェブロン（開閉矢印） */
.faq-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  margin-top: 3px;
  transition: transform var(--transition-base), color var(--transition-fast);
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent-green);
}

/* A 回答エリア（max-height アニメーション） */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* A 内部（パディング） */
.faq-answer-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0 var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}

/* A ラベル */
.faq-a-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  padding: 1px 6px;
  margin-top: 1px;
  letter-spacing: 0.05em;
}

/* A テキスト */
.faq-a-text {
  flex: 1;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.75;
}
.faq-a-text a {
  color: var(--accent-green);
  text-decoration: underline;
  text-decoration-color: var(--accent-green-dim);
}
.faq-a-text a:hover {
  color: var(--accent);
}

/* モバイル調整 */
@media (max-width: 768px) {
  .faq-list {
    padding: var(--sp-3) var(--sp-3) var(--sp-6);
  }
  .faq-question {
    padding: var(--sp-3) var(--sp-4);
  }
  .faq-answer-inner {
    padding: var(--sp-3) var(--sp-4) var(--sp-3);
  }
}

/* ──────────────────────────────────────────────────────────
   21. プライバシーポリシー
   ────────────────────────────────────────────────────────── */
.privacy-updated {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-2);
}
.privacy-updated time {
  color: var(--text-secondary);
}

.privacy-article {
  padding: var(--sp-2) var(--sp-6) var(--sp-6);
  max-width: var(--content-max-width);
}

/* セクション */
.privacy-section {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.privacy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* セクション見出し */
.privacy-heading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-green);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--accent-green);
}

/* 本文 */
.privacy-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: var(--sp-3);
}
.privacy-text:last-child { margin-bottom: 0; }
.privacy-text a {
  color: var(--accent-green);
  text-decoration: underline;
  text-decoration-color: var(--accent-green-dim);
}
.privacy-text a:hover { color: var(--accent); }

/* 定義リスト（運営者情報） */
.privacy-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.privacy-dl dt {
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}
.privacy-dl dd { color: var(--text-secondary); }
.privacy-dl dd a { color: var(--accent-green); }

/* 箇条書き */
.privacy-list {
  list-style: none;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-4);
}
.privacy-list li {
  position: relative;
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-1);
}
.privacy-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-green-dim);
  font-family: var(--font-mono);
}

/* モバイル調整 */
@media (max-width: 768px) {
  .privacy-article {
    padding: var(--sp-2) var(--sp-3) var(--sp-6);
  }
  .privacy-dl {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .privacy-dl dt { margin-top: var(--sp-2); }
}

/* ──────────────────────────────────────────────────────────
   21.5 ソフトウェア詳細ヒーロー（ヒーロー画像 + アプリアイコン + 名称/概要）
   ブログ一覧などと同様、content-scroll の余白にそのまま従い画面幅を
   目一杯使う（sw-hero は独自の左右paddingやmax-widthを持たない）
   ────────────────────────────────────────────────────────── */
.sw-hero {
  max-width: var(--content-max-width);
  margin: var(--sp-4) 0 var(--sp-6);
}

.sw-hero-media {
  aspect-ratio: 3 / 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.sw-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* アイコンだけをヒーロー画像の下端へ食い込ませる。名称・概要は画像に重ねず、
   必ず画像の外（下）から描画されるよう、identity自体にはmargin-topを持たせない。
   背景色・枠線をヒーロー画像と揃えて1枚のカードに見せることで、直下の本文
   （概要・できること等）との境目をはっきりさせる */
.sw-hero-identity {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0 0 2px 2px;
}

.sw-hero-icon-wrap {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  margin-top: -48px;
  background: var(--bg-panel);
  border: 3px solid var(--bg-panel);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.sw-hero-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sw-hero-heading-group {
  flex: 1;
  min-width: 0;
  padding-top: var(--sp-2);
}

.sw-hero-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-1);
}
.sw-hero-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--bg-base);
  background: var(--accent-green);
  border-radius: 50%;
}

.sw-hero-summary {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 記事本文（概要・できること等）: ベースの .privacy-article は単一カラムだが、
   この詳細ページでは --content-max-width の範囲で左6:右4のグリッドに組み替え、
   画面幅を使い切りつつスッキリ見せる。
   「概要」「スクリーンショット」は左カラムに縦積み、「できること」は右カラムに
   並走させる。表・動作環境・CTAは可読性のため全幅で下に続ける。
   CSS columns の column-span では前後の2カラムを分断できないため、
   明示的な grid-template-areas でセクションごとに配置する */
@media (min-width: 900px) {
  .privacy-article.sw-detail-article {
    max-width: var(--content-max-width);
    display: grid;
    /* minmax(0, ...) で明示的に最小幅を0に固定する。単純な 6fr 4fr だと、
       右カラム内の折り返せないコンテンツ（表など）の content-based minimum
       size にトラックの計算が引っ張られ、比率が崩れることがあるため */
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    column-gap: var(--sp-6);
    grid-template-areas:
      "overview    features"
      "screenshots features"
      "pricing     pricing"
      "environment environment"
      "cta         cta";
    align-items: start;
  }
  .sw-col-overview    { grid-area: overview; min-width: 0; }
  .sw-col-screenshots { grid-area: screenshots; min-width: 0; }
  .sw-col-features    { grid-area: features; min-width: 0; }
  .sw-col-pricing     { grid-area: pricing; min-width: 0; }
  .sw-col-environment { grid-area: environment; min-width: 0; }
  .sw-col-cta         { grid-area: cta; min-width: 0; }
}

/* ページ最下部の「一覧へ戻る」ボタン */
.sw-back-cta {
  margin-top: var(--sp-2);
  text-align: center;
}
.btn-back-list {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.btn-back-list:hover {
  color: var(--accent-green);
  border-color: var(--accent-green-dim);
  background: var(--bg-hover);
}

/* スクリーンショットギャラリー（横スクロール + スナップ + 矢印ナビゲーション） */
.sw-gallery-wrap {
  position: relative;
}
.sw-gallery {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* ドラッグ操作中はテキスト選択やカーソル形状を分かりやすくする */
  cursor: grab;
}
.sw-gallery.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.sw-gallery-item {
  flex: 0 0 auto;
  width: 280px;
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
  padding: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.sw-gallery-item:hover { border-color: var(--border-strong); }
.sw-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* ドラッグ中に画像の内蔵ドラッグ操作（ゴースト表示）と競合しないようにする */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 左右の矢印ボタン: 背景を持つ円形ボタンで、画像の色に関わらず視認できるようにする */
.sw-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sw-gallery-arrow:hover { background: var(--bg-hover); color: var(--accent-green); }
.sw-gallery-arrow[hidden] { display: none; }
.sw-gallery-arrow--prev { left: calc(-1 * var(--sp-2)); }
.sw-gallery-arrow--next { right: calc(-1 * var(--sp-2)); }

/* ライトボックス表示中は背景（content-scroll）のスクロールを止める */
body.is-lightbox-open .content-scroll { overflow: hidden; }

.sw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .88);
}
.sw-lightbox[hidden] { display: none; }
.sw-lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
}
.sw-lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.sw-lightbox-btn:hover { background: rgba(255, 255, 255, .2); }
.sw-lightbox-close { top: var(--sp-4); right: var(--sp-4); }
.sw-lightbox-prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.sw-lightbox-next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) {
  /* ヒーロー画像は左右の余白を消し、画面幅いっぱいに表示する */
  .sw-hero {
    margin-left: calc(-1 * var(--sp-3));
    margin-right: calc(-1 * var(--sp-3));
  }
  .sw-hero-media {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  /* フルブリード化した分、アイコン・名称・概要は元のcontent-scrollの
     内側ラインへ揃うようpaddingを持たせる。カード化した背景・枠線も
     ヒーロー画像と同じくフルブリードに合わせる */
  .sw-hero-identity {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .sw-hero-icon-wrap { width: 72px; height: 72px; margin-top: -32px; }
  .sw-hero-heading-group { padding-top: var(--sp-1); }
  .sw-hero-title { font-size: var(--text-xl); }

  .sw-gallery-item { width: 220px; }
  .sw-lightbox-prev { left: var(--sp-2); }
  .sw-lightbox-next { right: var(--sp-2); }
}

/* ──────────────────────────────────────────────────────────
   22. プロフィールページ
   ────────────────────────────────────────────────────────── */

/* プロフィールグリッド（縦積み） */
.profile-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* 各セクション */
.profile-section {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green-dim);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.profile-section:hover {
  border-color: var(--border-strong);
  border-left-color: var(--accent-green);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* セクションヘッダー */
.profile-section-header {
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.profile-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .06em;
}
.profile-section-num {
  font-size: var(--text-xs);
  color: var(--accent-green);
  opacity: .65;
  letter-spacing: .1em;
  flex-shrink: 0;
}

/* セクション本文 */
.profile-section-body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

/* アタリテキスト（内容未記入の状態） */
.profile-placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  opacity: .5;
  font-style: italic;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .profile-section-header {
    padding: var(--sp-3) var(--sp-4);
  }
  .profile-section-body {
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }
}

/* ──────────────────────────────────────────────────────────
   22-b. プロフィールページ — セクション本文コンポーネント
   ────────────────────────────────────────────────────────── */

/* ── ABOUT ヒーローブロック ──────────────────────── */
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

/* アバター写真（border-radiusで円形にトリミング） */
.profile-avatar {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-green-dim);
  box-shadow: 0 0 0 4px var(--bg-panel), 0 4px 18px rgba(0,0,0,.28);
}

.profile-hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

@media (max-width: 480px) {
  .profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-avatar {
    width: 96px;
    height: 96px;
  }
}

.profile-name-block {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  line-height: 1;
}

.profile-name-family {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .1em;
}

.profile-name-given {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: .06em;
  opacity: .85;
}

/* ロールバッジ */
.profile-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-role-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  letter-spacing: .05em;
  white-space: nowrap;
}

.profile-role-badge--green {
  border-color: var(--accent-green-dim);
  color: var(--accent-green);
  background: rgba(62,212,124,.07);
}

.profile-role-badge--amber {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(217,166,60,.07);
}

/* 居住地 */
.profile-location {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: .05em;
}

.profile-location-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 5px var(--accent-green);
  flex-shrink: 0;
  display: inline-block;
}

/* バイオ文 */
.profile-bio {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 2;
  color: var(--text-primary);
}

/* ── サブセクション共通 ──────────────────────────── */
.profile-sub-section + .profile-sub-section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--border);
}

.profile-sub-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-green);
  letter-spacing: .12em;
  margin-bottom: var(--sp-3);
  opacity: .75;
}

.profile-sub-heading::before {
  content: '// ';
  opacity: .55;
}

/* ── ツールバッジグリッド ────────────────────────── */
.profile-tool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-tool-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  letter-spacing: .02em;
  cursor: default;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.profile-tool-badge:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.profile-tool-badge--featured {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(217,166,60,.07);
}

.profile-tool-badge--featured:hover {
  border-color: var(--accent);
  background: rgba(217,166,60,.13);
}

/* ── ギアリスト ──────────────────────────────────── */
.profile-gear-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-2) var(--sp-5);
}

.profile-gear-list li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-left: var(--sp-3);
  position: relative;
  line-height: 1.75;
}

.profile-gear-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent-green);
  opacity: .6;
}

/* ── AIバッジグリッド ─────────────────────────────── */
.profile-ai-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-ai-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px var(--sp-3);
  border: 1px solid var(--accent-green-dim);
  border-radius: 3px;
  background: rgba(62,212,124,.06);
  color: var(--accent-green);
  letter-spacing: .04em;
  cursor: default;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.profile-ai-badge:hover {
  background: rgba(62,212,124,.13);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* ── スペックブロック（ターミナル風） ────────────── */
.profile-spec-block {
  font-family: var(--font-mono);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.profile-spec-block-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: .07em;
}

.profile-spec-block-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.profile-spec-block-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  display: block;
}

.profile-spec-items {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.profile-spec-item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--text-xs);
  line-height: 1.7;
}

.profile-spec-key {
  color: var(--accent-green);
  font-weight: 600;
  letter-spacing: .06em;
  opacity: .9;
}

.profile-spec-val {
  color: var(--text-primary);
  opacity: .85;
}

/* ── プロフィール モバイル追加調整 ──────────────── */
@media (max-width: 768px) {
  .profile-name-family { font-size: var(--text-xl); }
  .profile-name-given  { font-size: var(--text-lg); }
  .profile-gear-list   { grid-template-columns: 1fr 1fr; }
  .profile-spec-item   { grid-template-columns: 2.8rem 1fr; }
}

@media (max-width: 480px) {
  .profile-gear-list { grid-template-columns: 1fr; }
}