/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── デザイントークン (Theme: ネイビー＆ニュートラル) ── */
:root {
  /* WebView側の自動ダークニング防止（ライトモード固定） */
  color-scheme: light;

  /* テキスト色 */
  --color-label: #222;
  --color-secondary-label: #666;
  --color-tertiary-label: #6e6e73; /* 4.5:1以上を確保 */

  /* 背景色 */
  --color-bg-primary: var(--color-blue); /* ページ全体の背景をアクセントカラーに */
  --color-bg-secondary: #fff;            /* カード等のメイン面 */
  --color-bg-muted: #f7f7f7;             /* カード内のセクション等、淡色のサーフェス */

  /* キーカラー(=body 背景)上に乗るテキスト */
  --color-on-primary: rgba(255, 255, 255, 0.92);
  --color-on-primary-secondary: rgba(255, 255, 255, 0.7);
  --color-on-primary-tertiary: rgba(255, 255, 255, 0.5);

  /* アクセント色（キーカラー: ネイビー） */
  --color-blue: #002060;
  --color-green: #059669;
  --color-red: #DC2626;
  --color-orange: #D97706;
  --color-gray: #6B7280;

  /* アクセント色 薄い背景用 */
  --color-blue-tint: #E6EAF4;
  --color-green-tint: #D1FAE5;
  --color-red-tint: #FEE2E2;
  --color-orange-tint: #FEF3C7;
  --color-gray-tint: #F3F4F6;

  /* アクセント色 テキスト用(濃い) */
  --color-blue-contrast: #001340;
  --color-green-contrast: #065F46;
  --color-red-contrast: #991B1B;
  --color-orange-contrast: #92400E;

  /* ステータス色 */
  --color-active: var(--color-green);
  --color-active-text: #047857;
  --color-inactive: #71747F;
  --color-inactive-text: #6B7280;

  /* 追加の赤系（エラー・影響バッジ等） */
  --color-red-darker: #B91C1C;
  --color-error: var(--color-red-darker);
  --color-error-accent: var(--color-red);
  --color-error-border: #fecaca;

  /* 衆議院テーマ色 */
  --color-shugiin: #3B82F6;
  --color-shugiin-tint: #EFF6FF;
  --color-shugiin-hover: #DBEAFE;
  --color-shugiin-border: #BFDBFE;
  --color-shugiin-text: #1D4ED8;

  /* 参議院テーマ色（紫。緑は賛成/可決の意味色として予約） */
  --color-sangiin: #6D28D9;
  --color-sangiin-tint: #EDE9FE;
  --color-sangiin-hover: #DDD6FE;
  --color-sangiin-border: #C4B5FD;
  --color-sangiin-text: #5B21B6;
  --color-sangiin-purple: var(--color-sangiin);
  --color-sangiin-purple-tint: var(--color-sangiin-tint);

  /* サービス別色（比較ツール） */
  --color-claude: #FF6B35;
  --color-chatgpt: #10A37F;

  /* UI部品色 */
  --color-separator: rgba(0, 0, 0, 0.1);
  --color-separator-light: rgba(0, 0, 0, 0.05);
  --color-chevron: #C7C7CC;
  --color-fill: #E5E7EB;
  --color-border: #e1e5e9;

  /* シャドウ・暗色オーバーレイ (黒の半透明) */
  --color-shadow-soft: rgba(0, 0, 0, 0.04);          /* カードの主シャドウ */
  --color-shadow-medium: rgba(0, 0, 0, 0.06);        /* 軽い影・区切り */
  --color-shadow-strong: rgba(0, 0, 0, 0.4);
  --color-shadow-soft-2: rgba(0, 0, 0, 0.08);        /* 二重影の薄い側 */
  --color-shadow-medium-2: rgba(0, 0, 0, 0.2);       /* 微エレベーション */
  --color-shadow-deep: rgba(0, 0, 0, 0.35);          /* 深い影（フローティング要素） */
  --color-overlay-backdrop: rgba(0, 0, 0, 0.5);      /* モーダル背面 */
  --color-overlay-soft: rgba(0, 0, 0, 0.02);         /* 極薄塗り */

  /* ライト面の半透明（iOS blur 等） */
  --color-bg-secondary-soft: rgba(255, 255, 255, 0.8);
  --color-bg-secondary-strong: rgba(255, 255, 255, 0.9);
  --color-nav-blur: rgba(247, 247, 247, 0.85);       /* sticky nav 背景 */

  /* キーカラー上の白オーバーレイ（追加） */
  --color-on-primary-strong: rgba(255, 255, 255, 0.95);
  --color-on-primary-border: rgba(255, 255, 255, 0.3);
  --color-on-primary-glow: rgba(255, 255, 255, 0.12);
  --color-on-primary-overlay: rgba(255, 255, 255, 0.08);
  --color-on-primary-soft: rgba(255, 255, 255, 0.2);

  /* キーカラー(navy) の半透明オーバーレイ */
  --color-blue-overlay-soft: rgba(0, 32, 96, 0.04);
  --color-blue-overlay: rgba(0, 32, 96, 0.08);
  --color-blue-overlay-medium: rgba(0, 32, 96, 0.1);
  --color-blue-overlay-strong: rgba(0, 32, 96, 0.2);

  /* 議院別シャドウ */
  --color-shugiin-shadow: rgba(29, 78, 216, 0.15);
  --color-sangiin-shadow: rgba(109, 40, 217, 0.15);

  /* その他不透明色 */
  --color-near-black: #111;             /* スマホ枠等 */
  --color-accent-light: #B3D4FF;        /* ヒーロー accent グラデーション明端 */
  --color-bg-info: #f0f9ff;             /* 情報セクションの背景 */
  --color-mask-opaque: #000;            /* mask-image 用の不透明 */
  --color-checker: #ccc;                /* チェッカー柄(透過プレビュー用) */

  /* フォントサイズ (iOS Typography Scale) */
  --font-size-title1: 28px;
  --font-size-title2: 22px;
  --font-size-title3: 20px;
  --font-size-headline: 17px;
  --font-size-body: 17px;
  --font-size-callout: 16px;
  --font-size-subheadline: 15px;
  --font-size-footnote: 13px;
  --font-size-caption1: 12px;
  --font-size-caption2: 11px;

  /* フォントウェイト (iOS標準の4段階) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 字間 */
  --letter-spacing-body: 0.04em;
  --letter-spacing-heading: 0.08em;
  --letter-spacing-label: 0.08em;

  /* 余白 (8px Grid) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* 角丸 (4px基本、重要度に応じて段階的に大きく) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* コンテンツ最大幅 */
  --content-max-width: 640px;

  /* ナビゲーションバーの高さ（sticky要素のtop計算用） */
  --nav-height: 36px;
}

/* iOSネイティブアプリのWebView時はWeb側ナビバーを出さないため、
   sticky要素(section-nav)のオフセット基準も0にする */
.ios-webview {
  --nav-height: 0px;
}

/* ページ全体の背景色・フォント */
body {
  margin: 0;
  background: var(--color-bg-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Segoe UI', Roboto, sans-serif;
  letter-spacing: var(--letter-spacing-body);
}

/* iOS-like layout styles */
.ios-safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.ios-blur {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ios-shadow {
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.ios-card {
  background: var(--color-bg-secondary-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-on-primary-soft);
  border-radius: var(--radius-xl);
}

.ios-button {
  background: var(--color-blue);
  border-radius: 10px;
  transition: all 0.2s ease;
  color: var(--color-bg-secondary);
  text-align: center;
}

.ios-button:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.ios-input {
  background: var(--color-bg-secondary-strong);
  border: 1px solid var(--color-separator);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ios-input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-overlay-medium);
  outline: none;
}

/* Basic layout helpers */
.status-bar {
  background: var(--color-label);
  color: var(--color-bg-secondary);
  text-align: center;
  font-size: 12px;
  padding: 4px 0;
}

.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-nav-blur);
}

.nav-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-base);
}

.nav-inner h1 {
  margin: 0;
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-title-wrap {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.nav-subtitle {
  margin: 0;
  font-size: var(--font-size-caption2);
  color: var(--color-secondary-label);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.nav-back-link {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-blue);
  text-decoration: none;
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.nav-back-icon {
  stroke-width: 2.5;
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row-center {
  display: flex;
  align-items: center;
}

.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-box {
  min-width: 32px;
  flex-shrink: 0;
}

.icon-box.right {
  text-align: right;
}

.overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-backdrop);
  z-index: 50;
}

.menu-panel {
  background: var(--color-bg-secondary-strong);
  margin: 16px;
  margin-top: 64px;
  border-radius: var(--radius-xl);
  padding: 24px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.menu-item:hover {
  background: var(--color-shadow-medium);
}

.content-main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-bottom: 80px;
}

.tabbar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-secondary-soft);
  border-top: 1px solid var(--color-separator);
}

.tabbar-inner {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

.tabbar-link {
  text-decoration: none;
  color: inherit;
}

.card-header {
  padding: var(--space-md) var(--space-xl) var(--space-sm) var(--space-base);
}

.card-body {
  padding: var(--space-sm) var(--space-xl) var(--space-base) var(--space-base);
}

.card-footer {
  padding: var(--space-sm) var(--space-base);
  border-top: 1px solid var(--color-separator);
  background: var(--color-overlay-soft);
}

.content-section {
  padding: 0;
}

/* セクション間ナビゲーション */
/* ネイビーフレーム: sticky帯。中の白ピルの周囲に常にネイビーを見せるため、
   背景は --color-bg-primary（=body と同色）にし、上下左右の padding が「マージン」になる */
.section-nav-frame {
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
  background: var(--color-bg-primary);
  /* 上下のみネイビー帯。白ピルは他カードと同じ全幅に */
  padding: var(--space-sm) 0;
}

.section-nav {
  display: flex;
  gap: var(--space-sm);
  /* 上下paddingは控えめ、左右は safe-area を加味 */
  padding: var(--space-xs) calc(var(--space-sm) + env(safe-area-inset-right, 0px))
           var(--space-xs) calc(var(--space-sm) + env(safe-area-inset-left, 0px));
  border-radius: var(--radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* スクロールバー非表示(Firefox) */
  background: var(--color-bg-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px var(--color-shadow-soft);
}

/* スクロールバー非表示(WebKit) */
.section-nav::-webkit-scrollbar {
  display: none;
}

/* スクロール可能なことを端のフェードで示す（左右の有無はJSが切り替える） */
.section-nav.has-fade-right {
  -webkit-mask-image: linear-gradient(to right, var(--color-mask-opaque) calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, var(--color-mask-opaque) calc(100% - 28px), transparent);
}
.section-nav.has-fade-left {
  -webkit-mask-image: linear-gradient(to left, var(--color-mask-opaque) calc(100% - 28px), transparent);
          mask-image: linear-gradient(to left, var(--color-mask-opaque) calc(100% - 28px), transparent);
}
.section-nav.has-fade-left.has-fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-mask-opaque) 28px, var(--color-mask-opaque) calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, var(--color-mask-opaque) 28px, var(--color-mask-opaque) calc(100% - 28px), transparent);
}

.section-nav-item {
  flex-shrink: 0;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-label);
  background: var(--color-bg-secondary);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s, color 0.2s;
}

.section-nav-item.active {
  background: var(--color-blue);
  color: var(--color-bg-secondary);
}

/* ── バッジコンポーネント ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  border-radius: var(--radius-sm);
}

.badge-pill {
  border-radius: var(--radius-full);
}

/* バッジサイズ */
.badge-sm {
  padding: 2px var(--space-sm);
  font-size: var(--font-size-caption2);
}

.badge-md {
  padding: var(--space-xs) 10px;
  font-size: var(--font-size-caption1);
}

.badge-lg {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-subheadline);
}

/* バッジバリアント */
.badge-primary {
  background: var(--color-blue-tint);
  color: var(--color-blue-contrast);
}

.badge-secondary {
  background: var(--color-gray-tint);
  color: var(--color-label);
}

.badge-success {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.badge-warning {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

.badge-danger {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

.badge-info {
  background: var(--color-blue-tint);
  color: var(--color-blue-contrast);
}

/* Utility */
.hidden {
  display: none;
}

/* Card link wrapper */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card-link:hover {
  filter: brightness(0.99);
}

.card-link:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* API比較ツール用スタイル */
.api-comparison-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Segoe UI', Roboto, sans-serif;
}

.api-comparison-container .header {
  text-align: center;
  margin-bottom: 40px;
}

.api-comparison-container .header h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-label);
  margin-bottom: 8px;
}

.api-comparison-container .header .subtitle {
  font-size: 1.1rem;
  color: var(--color-secondary-label);
  margin: 0;
}

.form-container {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: 0 0 20px var(--color-shadow-soft);
  margin-bottom: 40px;
}

.api-comparison-form .form-group {
  margin-bottom: 24px;
}

.api-comparison-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.api-comparison-form .form-label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.api-comparison-form .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.api-comparison-form .form-textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-overlay-medium);
}

.api-comparison-form .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.api-comparison-form .form-input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-overlay-medium);
}

.api-comparison-form .form-file {
  width: 100%;
  padding: 12px 16px;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-comparison-form .form-file:hover {
  border-color: var(--color-blue);
  background: var(--color-blue-tint);
}

.file-info {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-secondary-label);
}

.file-info ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.file-info li {
  margin-bottom: 4px;
}

.form-actions {
  text-align: center;
  margin-top: 32px;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-blue);
  color: var(--color-bg-secondary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-blue-overlay-strong);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.results-container {
  margin-top: 40px;
}

.results-container h2 {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-label);
  margin-bottom: 24px;
  text-align: center;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.results-grid.single-column {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto 32px auto;
}

.result-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 20px var(--color-shadow-soft);
  overflow: hidden;
}

.result-card.claude {
  border-top: 4px solid var(--color-claude);
}

.result-card.chatgpt {
  border-top: 4px solid var(--color-chatgpt);
}

.result-card.disabled {
  opacity: 0.6;
  background: var(--color-bg-muted);
}

.result-card.disabled .result-header {
  background: var(--color-fill);
  color: var(--color-gray);
}

.result-header {
  padding: 20px 24px;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}

.result-header h3 {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px 0;
  color: var(--color-label);
}

.result-header .model-info {
  font-size: 0.9rem;
  color: var(--color-secondary-label);
  font-weight: var(--font-weight-medium);
}

.result-content {
  padding: 24px;
  line-height: 1.6;
  color: var(--color-label);
}

.result-content p {
  margin-bottom: 16px;
}

.result-content p:last-child {
  margin-bottom: 0;
}

.error-message {
  padding: 24px;
  background: var(--color-red-tint);
  color: var(--color-error);
  border: 1px solid var(--color-error-accent);
  border-radius: var(--radius-sm);
}

.no-result {
  padding: 24px;
  text-align: center;
  color: var(--color-secondary-label);
  font-style: italic;
}

.no-result .small-text {
  font-size: 0.9rem;
  margin-top: 8px;
  color: var(--color-tertiary-label);
}

.uploaded-files {
  background: var(--color-bg-muted);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.uploaded-files h3 {
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin: 0 0 12px 0;
}

.uploaded-files ul {
  margin: 0;
  padding-left: 20px;
}

.uploaded-files li {
  margin-bottom: 8px;
  color: var(--color-secondary-label);
}

.alert {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.alert-error {
  background: var(--color-red-tint);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
}

.alert-warning {
  background: var(--color-orange-tint);
  border: 1px solid var(--color-orange-tint);
  color: var(--color-orange);
}

.alert h3 {
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
}

.alert p {
  margin: 0 0 8px 0;
}

.alert p:last-child {
  margin-bottom: 0;
}

.alert code {
  background: var(--color-separator);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9rem;
}

/* 議案詳細画面 */
/* ヒーローセクション */
.bill-hero-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-title2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-label);
  line-height: 1.3;
}

.bill-hero-formal-title {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  line-height: 1.4;
}

.bill-hero-bill-number {
  color: var(--color-secondary-label);
  font-weight: var(--font-weight-semibold);
  margin-right: var(--space-xxs);
}

.bill-hero-explanation {
  margin-bottom: var(--space-base);
}

.bill-hero-explanation-text {
  margin: 0;
  font-size: var(--font-size-subheadline);
  color: var(--color-secondary-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bill-hero-explanation-text.expanded {
  -webkit-line-clamp: unset;
}

.bill-hero-expand-btn {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-xs);
  padding: var(--space-sm) 0;
  min-height: 44px;
  border: none;
  background: none;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue);
  cursor: pointer;
}

.bill-hero-expand-btn.hidden {
  display: none;
}

.bill-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  padding: 0;

  /* 詳細画面だけフォントサイズを一段階大きくする */
  --font-size-caption2: 13px;
  --font-size-caption1: 14px;
  --font-size-footnote: 15px;
  --font-size-subheadline: 17px;
  --font-size-callout: 18px;
  --font-size-body: 19px;
  --font-size-headline: 19px;
  --font-size-title3: 22px;
  --font-size-title2: 24px;
}

.bill-detail-section {
  overflow: hidden;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.bill-detail-section-header {
  padding: var(--space-base);
  border-bottom: 1px solid var(--color-separator-light);
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-label);
  display: flex;
  align-items: center;
}

.bill-detail-section-header>.row-between {
  flex: 1;
}

.bill-detail-section-body {
  padding: var(--space-base);
}

.bill-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.bill-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bill-detail-meta-label {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-tertiary-label);
}

.bill-detail-meta-value {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-medium);
  color: var(--color-label);
}

/* 基本情報内の公式ページリンク */
.bill-official-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-shadow-medium);
}

.bill-official-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, box-shadow 0.15s;
}

.bill-official-link.shugiin {
  background: var(--color-shugiin-tint);
  color: var(--color-shugiin-text);
  border: 1px solid var(--color-shugiin-border);
}

.bill-official-link.shugiin:hover {
  background: var(--color-shugiin-hover);
  box-shadow: 0 1px 3px var(--color-shugiin-shadow);
}

.bill-official-link.sangiin {
  background: var(--color-sangiin-tint);
  color: var(--color-sangiin-text);
  border: 1px solid var(--color-sangiin-border);
}

.bill-official-link.sangiin:hover {
  background: var(--color-sangiin-hover);
  box-shadow: 0 1px 3px var(--color-sangiin-shadow);
}

.bill-official-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-bg-secondary);
  flex-shrink: 0;
}

.bill-official-link.shugiin .bill-official-link-icon {
  background: var(--color-shugiin);
}

.bill-official-link.sangiin .bill-official-link-icon {
  background: var(--color-sangiin);
}

.bill-official-link-text {
  white-space: nowrap;
}

/* データソースリンク */
.data-source-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.data-source-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-base);
  border-bottom: 1px solid var(--color-separator-light);
  color: var(--color-blue);
  text-decoration: none;
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-medium);
  transition: background 0.15s;
}

.data-source-item:last-child {
  border-bottom: none;
}

.data-source-item:hover {
  background: var(--color-blue-overlay-soft);
}

.data-source-item:active {
  background: var(--color-blue-overlay);
}

.data-source-icon {
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-callout);
  flex-shrink: 0;
}

.data-source-icon.sangiin {
  background: var(--color-sangiin-purple-tint);
  color: var(--color-sangiin-purple);
}

.data-source-icon.shugiin {
  background: var(--color-shugiin-tint);
  color: var(--color-shugiin-text);
}

.data-source-icon.document {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.data-source-icon.vote {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

.data-source-icon.minutes {
  background: var(--color-blue-tint);
  color: var(--color-blue-contrast);
}

.data-source-label {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.data-source-label-main {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-medium);
  color: var(--color-label);
}

.data-source-label-sub {
  font-size: var(--font-size-caption2);
  color: var(--color-tertiary-label);
  font-weight: var(--font-weight-regular);
}

.data-source-arrow {
  color: var(--color-chevron);
  flex-shrink: 0;
}

/* 審議進捗ミニマップ */
.progress-steps {
  display: flex;
  align-items: center;
  padding: var(--space-md) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-base);
  border-bottom: 1px dashed var(--color-separator-light);
  padding-bottom: var(--space-base);
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  min-width: 50px;
}

.progress-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-fill);
}

.progress-step-dot.done {
  background: var(--color-green);
}

.progress-step-dot.current {
  background: var(--color-blue);
  box-shadow: 0 0 0 4px var(--color-blue-overlay-strong);
}

.progress-step-connector {
  flex: 1;
  height: 2px;
  background: var(--color-fill);
  min-width: 12px;
}

.progress-step-connector.done {
  background: var(--color-green);
}

.progress-step-label {
  font-size: var(--font-size-caption2);
  color: var(--color-tertiary-label);
  text-align: center;
  white-space: nowrap;
}

.progress-step-label.current {
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
}

/* タイムライン */
.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-fill);
}

.timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item-final::after {
  content: '';
  position: absolute;
  left: -28px;
  top: 18px;
  bottom: 0;
  width: 24px;
  background: var(--color-bg-secondary);
}

.timeline-dot {
  position: absolute;
  left: -28px;
  top: 2px;
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-fill);
  z-index: 1;
}

.timeline-dot.completed {
  border-color: var(--color-active);
  background: var(--color-green-tint);
}

.timeline-dot.current {
  border-color: var(--color-blue);
  background: var(--color-blue-tint);
  box-shadow: 0 0 0 4px var(--color-blue-overlay-strong);
}

.timeline-dot.rejected {
  border-color: var(--color-red);
  background: var(--color-red-tint);
}

.timeline-dot-inner {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
}

.timeline-dot.completed .timeline-dot-inner {
  background: var(--color-active);
}

.timeline-dot.current .timeline-dot-inner {
  background: var(--color-blue);
}

.timeline-dot.rejected .timeline-dot-inner {
  background: var(--color-red);
}

.timeline-content {
  background: var(--color-fill);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.timeline-content.current {
  background: var(--color-blue-tint);
  border: 1px solid var(--color-blue-tint);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.timeline-stage {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.timeline-date {
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
  text-align: right;
}

.timeline-date-ago {
  font-size: var(--font-size-caption2);
  color: var(--color-inactive);
}

.timeline-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* ステージ投票結果コンポーネント */
.stage-vote-result {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-separator-light);
}

.stage-vote-subject {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  margin-bottom: var(--space-xs);
}

.stage-vote-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.stage-vote-label {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.stage-vote-result-badge {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: 4px;
}

.stage-vote-result-badge.passed {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.stage-vote-result-badge.rejected {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

.stage-vote-result-badge.amended {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

.stage-vote-ratio-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-bold);
}

.stage-vote-ratio-yes {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  min-width: 60px;
  white-space: nowrap;
}

.stage-vote-ratio-no {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  min-width: 60px;
  white-space: nowrap;
}

.stage-vote-party-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stage-vote-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.stage-vote-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  cursor: default;
  transition: transform 0.1s;
}

.stage-vote-chip.yes {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.stage-vote-chip.no {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

/* 衆議院人事案件：会派別データなし表示 */
.stage-vote-no-party-data {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
}

.stage-vote-method-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.stage-vote-no-data-note {
  font-size: var(--font-size-caption2);
  color: var(--color-tertiary-label);
  font-style: italic;
}

/* 参議院の政党別賛成率バー表示 */
.stage-vote-party-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-vote-party-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-caption2);
}

.stage-vote-party-name {
  width: 36px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  flex-shrink: 0;
  text-align: right;
}

.stage-vote-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-gray-tint);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  max-width: 100px;
}

.stage-vote-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.stage-vote-bar-fill.yes {
  background: var(--color-green);
}

.stage-vote-bar-fill.no {
  background: var(--color-red);
}

.stage-vote-rate {
  width: 32px;
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.stage-vote-rate.majority-yes {
  color: var(--color-green-contrast);
}

.stage-vote-rate.majority-no {
  color: var(--color-red-contrast);
}

/* 議案カード */
/* 議案カード: ヘッダー行（タイトル + ステータス） */
.bill-card-header-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* 議案カード: one_liner（ヒーロータイトル） */
.bill-card-one-liner {
  /* 上余白は角ラベル(NEW/進展、絶対配置で高さ約20px)との重なり防止。
     ラベルの有無でカードの高さが変わらないよう全カードで統一 */
  margin: var(--space-base) 0 var(--space-xs);
  font-size: var(--font-size-title3);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-label);
  line-height: 1.3;
  text-align: center;
  /* 文節（<wbr>）と句読点で優先的に改行 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 議案カード: 正式名称（補助テキスト） */
.bill-card-formal-title {
  margin: 0;
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  line-height: 1.4;
  text-align: center;
}

/* 議案カード: 回次+議案番号（正式名称の先頭に薄く表示） */
.bill-card-bill-number {
  color: var(--color-tertiary-label);
  font-weight: var(--font-weight-regular);
}

.bill-card-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  line-height: 1.3;
}

.bill-card-summary {
  margin: 0 0 var(--space-base);
  font-size: var(--font-size-subheadline);
  color: var(--color-secondary-label);
  line-height: 1.5;
}

/* 議案カード: 影響チップ */
.bill-card-impact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-base);
}

.impact-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
}

.impact-chip.positive {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.impact-chip.negative {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

.impact-chip.mixed {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

.impact-chip.neutral {
  background: var(--color-gray-tint);
  color: var(--color-gray);
}

/* 議案カード: 新着マーク(タイムラインのlast_seen_cursorパラメータ指定時のみ表示)。
   カードの角に密着したラベルで状態を表す(新着=オレンジ / 進展=紺。色覚多様性に配慮した組み合わせ)。
   カードはposition:relative + overflow:hiddenなので、絶対配置でも角丸に沿ってクリップされる */
.bill-card-fresh-corner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 4px 10px 5px;
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: #fff;
  border-bottom-right-radius: var(--radius-sm);
}

.bill-card-fresh-corner--added {
  background: var(--color-orange);
}

.bill-card-fresh-corner--updated {
  background: var(--color-blue);
}

/* 議案カード: 前回閲覧後の審議の動き。デフォルトは1行サマリーのnotice、タップで全ステージを展開 */
.bill-card-progress-delta {
  margin-top: var(--space-sm);
  border: 1px dashed var(--color-separator);
  border-radius: var(--radius-sm);
}

.bill-card-progress-delta-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-caption2);
  color: var(--color-secondary-label);
  cursor: pointer;
  list-style: none;
}

.bill-card-progress-delta-summary::-webkit-details-marker {
  display: none;
}

.bill-card-progress-delta-summary::after {
  content: "▾";
  color: var(--color-tertiary-label);
}

.bill-card-progress-delta[open] .bill-card-progress-delta-summary::after {
  content: "▴";
}

.bill-card-progress-delta-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 var(--space-md) var(--space-xs);
  font-size: var(--font-size-caption2);
  color: var(--color-tertiary-label);
}

.bill-card-progress-delta-step.is-new {
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-contrast);
}

.bill-card-progress-delta-arrow {
  color: var(--color-tertiary-label);
}

.bill-card-changes {
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-base);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.bill-card-changes-label {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  margin-bottom: var(--space-sm);
}

.bill-card-diff-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bill-card-diff-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bill-card-diff-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.bill-card-diff-before {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray);
  flex-shrink: 0;
  min-width: 24px;
}

.bill-card-diff-after {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue);
  flex-shrink: 0;
  min-width: 24px;
}

.bill-card-diff-arrow {
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  padding-left: var(--space-xl);
  line-height: 1;
}

.bill-card-diff-separator {
  border-top: 1px dashed var(--color-separator-light);
  margin: var(--space-xs) 0;
}

.bill-card-diff-text {
  font-size: var(--font-size-footnote);
  color: var(--color-secondary-label);
  line-height: 1.4;
}

.bill-card-diff-text-new {
  font-size: var(--font-size-footnote);
  color: var(--color-label);
  line-height: 1.4;
}

.bill-card-submitter {
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
  margin-top: var(--space-xs);
}

.bill-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bill-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
}

.bill-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.bill-card-chevron {
  position: absolute;
  right: var(--space-base);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-chevron);
}

/* 議案カード: 要点リスト */
/* 議案カード: ポイントセクション */
.bill-card-points-section {
  margin-bottom: var(--space-base);
  padding: 0 var(--space-sm);
}

.bill-card-points-label {
  display: block;
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-tertiary-label);
  margin-bottom: var(--space-sm);
}

.bill-card-points {
  margin: 0;
  padding-left: var(--space-base);
  list-style: disc;
}

.bill-card-points li {
  font-size: var(--font-size-subheadline);
  color: var(--color-secondary-label);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.bill-card-points li:last-child {
  margin-bottom: 0;
}

/* 議案カード: 3行要約（1つの淡色ブロックにまとめ、項目は区切り線で分ける） */
.bill-card-three-points {
  display: flex;
  flex-direction: column;
  /* 背景だけ左右にはみ出させ、内側テキストの縦ラインは周囲の文字と揃える */
  margin: 0 calc(-1 * var(--space-md)) var(--space-base);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
}

.bill-card-three-point-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xxs);
  padding: var(--space-md) 0;
}

.bill-card-three-point-item + .bill-card-three-point-item {
  border-top: 1px solid var(--color-separator-light);
}

.bill-card-three-point-label {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue);
}

.bill-card-three-point-text {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 1.5;
  /* 句読点を優先して改行（区切りがない長い連続文字のみ途中で折り返す） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 議案カード: 詳細要点（展開時） */
.bill-card-points-detail {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-separator-light);
}

/* 議案カード: 詳細を開くボタン */
.bill-card-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background: var(--color-bg-muted);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue);
  cursor: pointer;
  margin-top: var(--space-sm);
  transition: background 0.15s ease;
}

.bill-card-detail-btn:hover {
  background: var(--color-separator-light);
}

.bill-card-detail-btn svg {
  opacity: 0.7;
}

/* ===== ひとことで言うと ===== */
.one-liner-text {
  margin: 0;
  font-size: var(--font-size-title3);
  font-weight: var(--font-weight-bold);
  color: var(--color-label);
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-body);
}

/* ===== たとえるなら ===== */
.analogy-text {
  margin: 0;
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
  padding: var(--space-md);
  background: var(--color-blue-tint);
  border-radius: var(--radius-sm);
}

/* ===== 3行でわかる変化 ===== */
.three-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.three-lines-row {
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.three-lines-before,
.three-lines-after {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.three-lines-label {
  flex-shrink: 0;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-sm);
  min-width: 4em;
  text-align: center;
}

.three-lines-before .three-lines-label {
  background: var(--color-red-tint);
  color: var(--color-red);
}

.three-lines-after .three-lines-label {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.three-lines-text {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 1.8;
}

.three-lines-arrow {
  text-align: center;
  color: var(--color-secondary-label);
  font-size: var(--font-size-caption1);
  line-height: 1;
  padding: var(--space-xxs) 0;
}

/* ===== この法案、必要？ ===== */
.necessity-axis {
  margin-bottom: var(--space-lg);
}

.necessity-axis:last-child {
  margin-bottom: 0;
}

.necessity-axis-title {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-separator-light);
}

.necessity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.necessity-list li {
  padding: var(--space-md);
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.9;
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.necessity-tradeoff-headline,
.necessity-con-headline,
.necessity-exchange-topic {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin-bottom: var(--space-xs);
}

.necessity-source,
.necessity-who-bears {
  color: var(--color-secondary-label);
  font-size: var(--font-size-footnote);
}

/* デメリット項目の「誰が影響を受けるか」行（本文との関係をラベルで明示する） */
.necessity-who-bears {
  margin-top: var(--space-xs);
  line-height: 1.5;
}

.necessity-who-bears-label {
  font-weight: var(--font-weight-semibold);
  margin-right: var(--space-sm);
}

.necessity-alternatives {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.necessity-alt-card {
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-base);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.necessity-alt-method {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.necessity-alt-merit,
.necessity-alt-demerit {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 1.9;
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.necessity-alt-label {
  align-self: flex-start;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
}

.necessity-alt-label--merit {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.necessity-alt-label--demerit {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

.necessity-debate {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.necessity-debate-label {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-separator-light);
}

.necessity-source-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-chevron);
  margin-left: auto;
  padding: var(--space-xs);
  transition: color 0.15s;
}

.necessity-source-link:hover {
  color: var(--color-blue);
}

.necessity-con-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.necessity-con-content {
  flex: 1;
  min-width: 0;
}

.necessity-arguer {
  color: var(--color-secondary-label);
  font-size: var(--font-size-footnote);
}

/* 発言者スタンスバッジ（賛成/反対/懸念）。title属性に判定根拠の発言引用を持つ */
.stance-badge {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  vertical-align: middle;
}

.stance-badge--pro {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.stance-badge--con {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

.stance-badge--concern {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

/* 趣旨説明・意見表明（質問/返答ラベルなしの単独発言ブロック） */
.necessity-statement {
  display: flex;
  gap: var(--space-sm);
}

/* 注目のやりとり */
.necessity-exchanges {
  margin-top: var(--space-lg);
}

.necessity-exchanges-title {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-separator-light);
}

/* 議案外の議論（unrelated トピックの折り畳み表示） */
.debate-unrelated {
  margin-top: var(--space-lg);
  padding-top: var(--space-base);
  border-top: 1px dashed var(--color-separator);
}

.debate-unrelated-summary {
  cursor: pointer;
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  list-style: none;
  padding: var(--space-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.debate-unrelated-summary::-webkit-details-marker {
  display: none;
}

.debate-unrelated-summary::before {
  content: '▶';
  font-size: 10px;
  transition: transform 0.2s;
}

.debate-unrelated[open]>.debate-unrelated-summary::before {
  transform: rotate(90deg);
}

.debate-unrelated-note {
  font-weight: var(--font-weight-regular);
  color: var(--color-tertiary-label);
  font-size: var(--font-size-caption1);
}

.debate-unrelated-body {
  margin-top: var(--space-md);
}

.debate-unrelated-tag {
  display: inline-block;
  padding: 2px 6px;
  margin-right: var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-secondary-label);
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-regular);
}

/* 議事録のやりとり: タイトルクリックで展開。スタイルは「何が変わるの？」の展開UIと共有（後方の「変更点・議事録」ルール参照） */

.necessity-exchange-question,
.necessity-exchange-answer {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.necessity-exchange-answer {
  margin-bottom: 0;
}

.necessity-exchange-role {
  flex-shrink: 0;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  height: fit-content;
  margin-top: 2px;
}

.necessity-exchange-question .necessity-exchange-role {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

.necessity-exchange-answer .necessity-exchange-role {
  background: var(--color-blue-tint);
  color: var(--color-blue-contrast);
}

.necessity-exchange-body {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.8;
}

/* 質疑応答・批判・要望 内の文（句点で分割した段落） */
.necessity-paragraph {
  margin: 0 0 var(--space-xs) 0;
  font-weight: var(--font-weight-regular);
}

.necessity-paragraph:last-of-type {
  margin-bottom: 0;
}

/* 解析結果: ポイントリスト */
.analysis-points {
  margin: 0;
  padding-left: var(--space-lg);
  list-style: decimal;
}

.analysis-points li {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
  margin-bottom: var(--space-sm);
}

/* 解析結果: 背景セクション */
.analysis-background {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.analysis-background-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.analysis-background-label {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-tertiary-label);
}

.analysis-background-text {
  margin: 0;
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 1.6;
}

/* 背景Q&A形式レイアウト */
.background-qa {
  display: flex;
  flex-direction: column;
}

.background-qa-item {
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.background-qa-item+.background-qa-item {
  margin-top: var(--space-sm);
}

.background-qa-question {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-lg);
  position: relative;
}

.background-qa-question::before {
  content: 'Q.';
  position: absolute;
  left: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-blue-contrast);
}

.background-qa-answer {
  margin: 0;
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
  padding-left: var(--space-lg);
}

/* 解析結果: カテゴリ分類された変更 */
.analysis-change-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.analysis-change-category-name {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.analysis-change-item {
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.analysis-change-header {
  margin-bottom: var(--space-sm);
}

.analysis-change-diff {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.analysis-change-diff-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.analysis-change-plain {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-footnote);
  color: var(--color-blue);
  line-height: 1.5;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-blue-tint);
  border-radius: var(--radius-sm);
}

/* 変更内容: plain_language主役レイアウト */
.change-plain-text {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-medium);
  color: var(--color-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
}

/* 変更点・議事録: 箇条書きリスト（テキストクリック展開UIで共通） */
.change-list,
.debate-topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.change-list-item,
.debate-topic-item {
  position: relative;
  padding-left: var(--space-md);
}

.change-list-item::before,
.debate-topic-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-secondary-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-subheadline);
  line-height: 1.8;
}

.change-list-text {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-body);
}

/* 変更点・議事録: テキストクリックで展開 */
.change-diff-toggle,
.necessity-exchange {
  margin: 0;
}

.change-diff-toggle>summary,
.necessity-exchange>.necessity-exchange-topic {
  list-style: none;
  cursor: pointer;
}

.change-diff-toggle>summary::-webkit-details-marker,
.necessity-exchange>.necessity-exchange-topic::-webkit-details-marker {
  display: none;
}

.change-list-text--clickable {
  display: inline;
}

.change-list-text--clickable::after,
.necessity-exchange>.necessity-exchange-topic::after {
  content: '›';
  color: var(--color-secondary-label);
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 0.2s ease;
}

.change-diff-toggle[open]>.change-list-text--clickable::after,
.necessity-exchange[open]>.necessity-exchange-topic::after {
  transform: rotate(90deg);
}

/* 議事録タイトルは change-list-text と同じ見た目に揃える（見出し用semibold/marginを打ち消す） */
.necessity-exchange>.necessity-exchange-topic {
  display: inline;
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  margin-bottom: 0;
}

.change-diff-detail,
.necessity-exchange-detail {
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

/* 予算概要サマリーカード */
.budget-summary-card {
  background: var(--color-bg-info);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.budget-summary-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.budget-summary-label {
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
  font-weight: var(--font-weight-medium);
}

.budget-summary-amount {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
  letter-spacing: -0.5px;
}

.budget-summary-change {
  font-size: var(--font-size-footnote);
  color: var(--color-secondary-label);
  background: var(--color-shadow-soft);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
}

.budget-summary-details {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-shadow-medium);
}

.budget-summary-detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.budget-summary-detail-label {
  font-size: var(--font-size-caption2);
  color: var(--color-tertiary-label);
}

.budget-summary-detail-value {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

/* 予算説明テキスト */
.budget-explanation {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.budget-explanation-paragraph {
  font-size: var(--font-size-callout);
  color: var(--color-secondary-label);
  line-height: 1.7;
  margin: 0;
}

/* 詳細な歳出内訳（階層ツリー） */
.budget-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* L0カード間の余白 */
  margin-top: var(--space-sm);
}

/* 階層はネスト構造・インデント・フォントの大小・背景濃淡で表現 */
.budget-tree-node {
  border-radius: var(--radius-md);
}

/* L0: 大項目カード（親）— 濃い背景で独立カード感 */
.budget-tree-depth-0 {
  background: var(--color-bg-secondary);
  padding: var(--space-md);
}

/* L1: 中項目 — L0カード内部の行として振る舞う。独立カードに見せない */
.budget-tree-depth-1 {
  background: transparent;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
}

/* L2: 施策 — さらに深くインデント、テキスト行風 */
.budget-tree-depth-2 {
  background: transparent;
  padding: 2px 0 2px var(--space-xl);
}

/* L1同士の区切り（1つ目以外に上線） */
.budget-tree-depth-1:not(:first-child) {
  border-top: 1px dashed var(--color-separator-light);
}

.budget-tree-node-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.budget-tree-node-name-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.budget-tree-node-marker {
  color: var(--color-blue);
  font-size: var(--font-size-caption1);
  flex-shrink: 0;
}

.budget-tree-node-name {
  font-size: var(--font-size-footnote);
  color: var(--color-label);
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

/* L0 は最も大きく太く */
.budget-tree-depth-0 .budget-tree-node-name {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
}

/* L1 は中サイズ */
.budget-tree-depth-1 .budget-tree-node-name {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
}

/* L2 (施策) は小さく通常ウェイト */
.budget-tree-depth-2 .budget-tree-node-name,
.budget-tree-policy .budget-tree-node-name {
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
  font-weight: var(--font-weight-regular);
}

.budget-tree-node-amount {
  font-size: var(--font-size-footnote);
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.budget-tree-depth-0 .budget-tree-node-amount {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
}

.budget-tree-depth-2 .budget-tree-node-amount {
  font-size: var(--font-size-caption1);
}

/* policyノードの amount は説明的に長くなることがあるため折り返しを許可。
   nowrap のままだと隣の名称が極端に狭くなり縦書きに見えてしまう。 */
.budget-tree-policy .budget-tree-node-amount {
  white-space: normal;
  word-break: break-word;
  text-align: right;
  max-width: 60%;
  flex-shrink: 1;
}

.budget-tree-node-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.budget-tree-node-note {
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  line-height: 1.5;
}

/* children コンテナ: L0直下では上余白を増やし、深い階層ではコンパクト */
.budget-tree-children {
  display: flex;
  flex-direction: column;
}

.budget-tree-depth-0>.budget-tree-children {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-separator-light);
}

/* ===== 詳細な歳入内訳 ===== */
.revenue-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.revenue-group {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.revenue-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-separator-light);
}

.revenue-group-label {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
  color: var(--color-label);
}

.revenue-group-count {
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
}

.revenue-group-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.revenue-item {
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
}

.revenue-item:not(:first-child) {
  border-top: 1px dashed var(--color-separator-light);
  padding-top: var(--space-sm);
}

.revenue-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.revenue-item-name {
  font-size: var(--font-size-footnote);
  color: var(--color-label);
  font-weight: var(--font-weight-medium);
}

.revenue-item-amount {
  font-size: var(--font-size-footnote);
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.revenue-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.revenue-item-note {
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  line-height: 1.5;
}

/* 注目ポイント */
.budget-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 左縦線アクセントは廃止。カテゴリチップで意味付けを行う */
.budget-highlight-item {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-separator-light);
}

.budget-highlight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.budget-highlight-title {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin: 0 0 4px 0;
}

.budget-highlight-amount {
  font-size: var(--font-size-caption1);
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.budget-highlight-description {
  font-size: var(--font-size-footnote);
  color: var(--color-secondary-label);
  line-height: 1.6;
  margin: 0;
}

/* ===== 修正案関連スタイル ===== */

/* ヒーロー下の修正案一覧カード */
.amendment-header-card {
  margin-top: var(--space-md);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-bg-muted);
}

.amendment-header-title {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin-bottom: var(--space-sm);
}

/* ポイント/変更点のインライン修正注釈ブロック */
.amendment-annotation {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-orange-tint);
}

.amendment-annotation-label {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-orange-contrast);
  margin-bottom: 2px;
}

.amendment-annotation-original {
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
  line-height: 1.4;
}

.amendment-annotation-changed {
  font-size: var(--font-size-caption1);
  color: var(--color-orange-contrast);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

/* 変更点diff: 3段目の修正ブロック */
.bill-card-diff-amendment {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-orange);
  flex-shrink: 0;
  min-width: 24px;
}

.bill-card-diff-text-amendment {
  font-size: var(--font-size-footnote);
  color: var(--color-orange-contrast);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.change-diff-amendment {
  background: var(--color-orange-tint);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* セクション注記: 可決修正案を反映済みであることを示す一行 */
.section-amendment-note {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-caption2);
  color: var(--color-secondary-label);
  line-height: 1.4;
}

.change-amendment-source {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-caption2);
  color: var(--color-secondary-label);
  padding-left: var(--space-sm);
  line-height: 1.4;
}

/* タイムライン: 修正案の採決結果 */
.timeline-amendments {
  margin-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-amendment-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-caption1);
  flex-wrap: wrap;
}

.timeline-amendment-submitter {
  color: var(--color-secondary-label);
}

.timeline-amendment-arrow {
  color: var(--color-tertiary-label);
}

/* 解析結果: ステークホルダー影響 */
.impact-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.impact-group {
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background: var(--color-gray-tint);
}

.impact-group.impact-high-positive,
.impact-group.impact-moderate-positive {
  background: var(--color-green-tint);
}

.impact-group.impact-high-negative,
.impact-group.impact-moderate-negative {
  background: var(--color-red-tint);
}

.impact-group.impact-mixed {
  background: var(--color-orange-tint);
}

.impact-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.impact-group-name {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.impact-level-badge {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.impact-level-badge.impact-high-positive {
  background: var(--color-green-contrast);
  color: var(--color-bg-secondary);
}

.impact-level-badge.impact-moderate-positive {
  background: var(--color-green-tint);
  color: var(--color-green-contrast);
}

.impact-level-badge.impact-high-negative {
  background: var(--color-red-contrast);
  color: var(--color-bg-secondary);
}

.impact-level-badge.impact-moderate-negative {
  background: var(--color-red-tint);
  color: var(--color-red-contrast);
}

.impact-level-badge.impact-mixed {
  background: var(--color-orange-tint);
  color: var(--color-orange-contrast);
}

.impact-level-badge.impact-neutral {
  background: var(--color-fill);
  color: var(--color-secondary-label);
}

.impact-group-description {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-footnote);
  color: var(--color-secondary-label);
  line-height: 1.5;
}

.impact-group-example {
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  line-height: 1.4;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-on-primary-tertiary);
  border-radius: var(--radius-sm);
}

.impact-group-example-label {
  font-weight: var(--font-weight-semibold);
}

/* 影響カード（B-2: カード型レイアウト） */
.impact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.impact-card {
  border-radius: var(--radius-md);
  padding: var(--space-base);
  background: var(--color-gray-tint);
}

.impact-card.positive {
  background: var(--color-green-tint);
}

.impact-card.negative {
  background: var(--color-red-tint);
}

.impact-card.mixed {
  background: var(--color-orange-tint);
}

.impact-card.compact {
  padding: var(--space-md);
}

.impact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.impact-card-name {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-bold);
  color: var(--color-label);
}

.impact-card-level {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--color-on-primary-secondary);
}

.impact-card-level.positive {
  color: var(--color-green-contrast);
}

.impact-card-level.negative {
  color: var(--color-red-contrast);
}

.impact-card-level.mixed {
  color: var(--color-orange-contrast);
}

.impact-card-description {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
}

.impact-card-description-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.impact-card-description-clamped.expanded {
  -webkit-line-clamp: unset;
}

.impact-example {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-on-primary-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
}

/* 解析結果: 用語解説 */
.glossary-list {
  display: flex;
  flex-direction: column;
}

.glossary-separator {
  border-top: 1px solid var(--color-separator-light);
  margin: var(--space-sm) 0;
}

.glossary-term {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.glossary-term-name {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.glossary-term-reading {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-regular);
  color: var(--color-tertiary-label);
}

.glossary-term-definition {
  margin: 0;
  font-size: var(--font-size-footnote);
  color: var(--color-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
}

.glossary-term-context {
  margin: 0;
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  line-height: 1.4;
}

/* 用語インラインハイライト */
.glossary-highlight {
  text-decoration: underline;
  text-decoration-color: var(--color-blue-tint);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .api-comparison-container {
    padding: 16px;
  }

  .api-comparison-container .header h1 {
    font-size: 2rem;
  }

  .form-container {
    padding: 24px;
  }

  .api-comparison-form .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .results-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .result-header {
    padding: 16px 20px;
  }

  .result-content {
    padding: 20px;
  }
}

/* ── インラインスタイル廃止用クラス ── */

/* 一覧: カードリストコンテナ */
.bill-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* 一覧: ローディング表示 */
.bill-list-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
}

.bill-list-loading-text {
  color: var(--color-secondary-label);
  font-size: var(--font-size-subheadline);
}

/* 開発環境: カテゴリーフィルター */
.dev-category-filter {
  padding: var(--space-sm) 0 var(--space-md);
}

.dev-category-filter-scroll {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--space-md);
}

.dev-category-filter-scroll::-webkit-scrollbar {
  display: none;
}

.dev-category-chip {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-caption1);
  font-weight: 500;
  color: var(--color-secondary-label);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-separator);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.dev-category-chip:hover {
  background: var(--color-gray-tint);
}

.dev-category-chip.active {
  background: var(--color-blue);
  color: var(--color-bg-secondary);
  border-color: var(--color-blue);
}

/* 詳細: ヒーローバッジ行のgap */
.bill-hero-badges {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* 詳細: ドキュメントバッジ */
.bill-hero-document-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* 詳細: カテゴリ区切り線 */
.bill-change-separator {
  border-top: 1px solid var(--color-separator-light);
  margin: var(--space-base) 0;
}

/* 詳細: magnitudeバッジ配置 */
.bill-change-magnitude {
  text-align: right;
  margin-top: var(--space-xs);
}

/* 詳細: 進捗パーセンテージ */
.bill-progress-percentage {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-label);
}

/* 詳細: タイムライン説明文 */
.timeline-description {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-footnote);
  color: var(--color-secondary-label);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
}

/* 詳細: 次のステップ */
.bill-next-step {
  margin-top: var(--space-base);
  padding: var(--space-md);
  background: var(--color-blue-tint);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-blue-overlay-strong);
}

.bill-next-step-title {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-contrast);
  margin-bottom: var(--space-xs);
}

.bill-next-step-text {
  margin: 0;
  font-size: var(--font-size-footnote);
  color: var(--color-blue-contrast);
  line-height: 2.0;
  letter-spacing: var(--letter-spacing-body);
}

/* 詳細: 空状態 */
.bill-empty-state {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--color-inactive);
}

.bill-empty-state-text {
  margin: 0;
  font-size: var(--font-size-subheadline);
}

/* 詳細: 基本情報 審議ステージ行 */
.bill-info-stage-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-base);
}

.bill-info-stage-label {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  font-weight: var(--font-weight-semibold);
}

.bill-info-stage-value {
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
}

.bill-info-stage-separator {
  color: var(--color-inactive);
}

/* 詳細: 基本情報 正式名称 */
.bill-info-formal {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-base);
  border-bottom: 1px solid var(--color-separator-light);
}

.bill-info-formal-label {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-tertiary-label);
  display: inline-flex;
  align-items: center;
}

.bill-info-formal-value {
  margin: 0;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-medium);
  color: var(--color-label);
  line-height: 1.5;
  word-break: break-word;
}

.bill-info-formal-number {
  display: inline-block;
  margin-right: var(--space-xs);
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
}

/* 詳細: メタ情報の補助テキスト */
.bill-meta-sub {
  font-size: var(--font-size-caption1);
  color: var(--color-secondary-label);
}

/* 詳細: データソースセクション */
.bill-data-source-section {
  margin-top: var(--space-base);
  border-top: 1px solid var(--color-separator-light);
  padding-top: var(--space-base);
}

.bill-data-source-title {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  margin-bottom: var(--space-sm);
}

/* ボトムシート */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-shadow-strong);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bottom-sheet-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  max-width: var(--content-max-width);
  margin: 0 auto;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: visible;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
    border-radius 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.bottom-sheet-full {
  border-radius: 0;
}

.bottom-sheet-open {
  transform: translateY(0);
}

/* 上方向ドラッグ時にシートと画面下端の隙間を埋める */
.bottom-sheet-open::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100dvh;
  background: var(--color-bg-secondary);
  pointer-events: none;
}

.bottom-sheet-content {
  display: flex;
  flex-direction: column;
  max-height: calc(70dvh - 30px);
  transition: max-height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

/* フルスクリーン展開時 */
.bottom-sheet-full .bottom-sheet-content {
  max-height: calc(100dvh - env(safe-area-inset-top) - 30px);
}

.bottom-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0;
  touch-action: none;
  cursor: grab;
}

.bottom-sheet-handle::after {
  content: '';
  width: 36px;
  height: 5px;
  background: var(--color-separator);
  border-radius: 3px;
}

.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-base) var(--space-sm);
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-separator-light);
}

.bottom-sheet-title {
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin: 0;
}

.bottom-sheet-close {
  background: none;
  border: none;
  font-size: var(--font-size-body);
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bottom-sheet-body {
  padding: 0 var(--space-lg) var(--space-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-sheet-body .bill-card-points {
  margin: 0;
}

/* アクセシビリティ: モーション軽減 */
@media (prefers-reduced-motion: reduce) {

  .card-link,
  .ios-button,
  .ios-input,
  .data-source-item,
  .timeline-dot,
  .stage-vote-bar-fill,
  .stage-vote-chip,
  .section-nav-item,
  .bill-official-link,
  .bottom-sheet,
  .bottom-sheet-backdrop,
  .bottom-sheet-content,
  .page-sheet,
  .page-sheet-backdrop {
    transition: none;
  }
}

/* ── ページシート（フルスクリーンモーダル） ── */
.page-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-backdrop);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.page-sheet-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

.page-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  max-width: var(--content-max-width);
  margin: 0 auto;
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1.0);
  display: flex;
  flex-direction: column;
  /* 上端に少し余白を残してモーダルであることを示す（safe-area に加えて常に隙間を確保） */
  top: calc(env(safe-area-inset-top, 0px) + var(--space-base));
}

.page-sheet-open {
  transform: translateY(0);
}

.page-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 0;
  touch-action: none;
  cursor: grab;
  flex-shrink: 0;
}

.page-sheet-handle::after {
  content: '';
  width: 36px;
  height: 5px;
  background: var(--color-separator);
  border-radius: 3px;
}

.page-sheet-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px var(--space-base) 4px;
  flex-shrink: 0;
}

.page-sheet-close {
  background: none;
  border: none;
  color: var(--color-blue);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.page-sheet-close:hover {
  background: var(--color-bg-muted);
}

/* タイトルエリア（カードのタイトルを即時表示） */
.page-sheet-title-area {
  display: none;
  flex-direction: column;
  padding: 0 var(--space-base) var(--space-sm);
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-separator);
}

.page-sheet-title-area-visible {
  display: flex;
}

.page-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-label);
  line-height: 1.4;
  margin: 0;
}

.page-sheet-subtitle {
  font-size: 12px;
  color: var(--color-tertiary-label);
  line-height: 1.4;
  margin: 4px 0 0;
}

.page-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* モーダル内のcontent-sectionのマージン調整 */
.page-sheet-scroll .content-section {
  padding-top: 0;
}

/* モーダル内のsection-nav-frameをモーダル上端に固定 */
.page-sheet-scroll .section-nav-frame {
  top: 0;
}

/* ローディング表示 */
.page-sheet-loading {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ── ランディングページ ── */
/* LP表示時はbody背景もライトにして、広い画面で紺の余白が支配的にならないようにする */
body:has(.lp) {
  background: var(--color-bg-secondary);
}

/* LPはヒーロー帯・フッターを全幅で見せたいので、共通の640px制限を外す
   （各セクションは内部で自前に中央寄せするため、幅の中央寄せは失わない） */
.content-main:has(.lp) {
  max-width: none;
  /* フッターのネイビー帯でページを締めるため、下部の余白は持たせない */
  padding-bottom: 0;
}

.lp {
  color: var(--color-label);
  /* キーカラーはヒーロー・CTA・フッターに絞り、ページ本体はライトベースにする */
  background: var(--color-bg-secondary);
  /* 長音「ー」や小書き文字が行頭に落ちないよう日本語の禁則処理を厳格にする */
  line-break: strict;
}

/* ブランド行＋ヒーローをまとめたネイビー帯（キーカラーの見せ場はここに集約） */
.lp-hero-band {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--color-on-primary-glow) 0%, transparent 70%),
    var(--color-blue);
}

.lp-hero {
  padding: var(--space-xl) var(--space-base) var(--space-lg);
}

.lp-hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
}

.lp-eyebrow,
.lp-section-eyebrow {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-blue-contrast);
  margin: 0 0 var(--space-md);
  text-transform: none;
}

.lp-hero-title {
  /* 375px幅でも <br> 区切りの1フレーズ（10文字）が1行に収まるサイズ・字間にする */
  font-size: clamp(26px, 8.4vw, 34px);
  line-height: 1.3;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-base);
  color: var(--color-on-primary);
}

/* ネイビー背景上で見えるよう、明るめのライトブルー→白のグラデーションに */
.lp-hero-title-accent {
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-bg-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-hero-lead {
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-on-primary-secondary);
  margin: 0 auto var(--space-lg);
  max-width: 32em;
}

/* ヒーロー内CTA（ファーストビューで行動導線を見せる） */
.lp-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.lp-hero-cta-note {
  font-size: var(--font-size-footnote);
  color: var(--color-on-primary-secondary);
  margin: 0;
}

/* ヒーロー上の問題提起（タイトルの「答え」を引き立てる前置き） */
.lp-hero-problem {
  font-size: var(--font-size-subheadline);
  line-height: 1.7;
  color: var(--color-on-primary-secondary);
  margin: 0 auto var(--space-base);
  max-width: 32em;
}

/* ブランド（ロゴ＋サイト名） */
.lp-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-base) 0;
  color: var(--color-on-primary);
}

.lp-brand-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: block;
}

.lp-brand-name {
  font-size: var(--font-size-title3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
}

/* CTA セクション（14日無料 → App Storeバッジ → 価格・解約案内） */
.lp-cta-section {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) var(--space-base) var(--space-xl);
}

/* ライトなページの中でキーカラーのカードにして、行動導線へ視線を集める */
.lp-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 480px;
  padding: var(--space-lg) var(--space-base);
  background: var(--color-blue);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 25px var(--color-blue-overlay-strong);
  text-align: center;
}

.lp-cta-trial {
  font-size: var(--font-size-subheadline);
  color: var(--color-on-primary-secondary);
  margin: 0;
}

.lp-cta-trial-strong {
  font-size: var(--font-size-title2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-primary);
  letter-spacing: var(--letter-spacing-heading);
  margin-left: 4px;
}

.lp-cta-price {
  font-size: var(--font-size-footnote);
  color: var(--color-on-primary-secondary);
  margin: 0;
}

/* App Store バッジ（Apple公式バッジ風のダミーCTA） */
.lp-app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-md);
  /* ダーク背景用のApple公式バッジに合わせて白枠で輪郭を出す */
  border: 1px solid var(--color-on-primary-strong);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.lp-app-store-badge:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.lp-app-store-badge:active {
  transform: scale(0.98);
}

.lp-app-store-badge-icon {
  flex-shrink: 0;
}

.lp-app-store-badge-text {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}

.lp-app-store-badge-small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.lp-app-store-badge-large {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.lp-section {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-base);
}

.lp-section-quiet {
  background: var(--color-bg-muted);
  max-width: none;
  /* 全幅の帯の中でコンテンツ(640px)を中央寄せする。paddingで寄せることで、
     各要素の個別marginと競合せず見出しも本文も同じ左端に揃う */
  padding-left: max(var(--space-base), calc((100% - var(--content-max-width)) / 2));
  padding-right: max(var(--space-base), calc((100% - var(--content-max-width)) / 2));
}

.lp-section-title {
  font-size: var(--font-size-title2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0 0 var(--space-lg);
  color: var(--color-label);
}

/* ポイントリスト（「なぜ簡単か」「安心」両方で使う） */
.lp-point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-base);
}

.lp-point {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  padding: var(--space-base);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-separator-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px var(--color-separator-light);
}

.lp-point-text-area {
  display: flex;
  gap: var(--space-base);
  align-items: flex-start;
}

.lp-point-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-blue-tint);
  color: var(--color-blue-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-point-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.lp-point-title {
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0 0 4px;
  color: var(--color-label);
  /* 日本語を文節単位で折り返す（非対応ブラウザはline-break: strictにフォールバック） */
  word-break: auto-phrase;
}

/* 動詞バッジ（「わかる」「つかむ」「深掘る」「読む」「比べる」） */
.lp-point-verb {
  display: inline-block;
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-blue);
  color: var(--color-bg-secondary);
  letter-spacing: var(--letter-spacing-label);
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.lp-point-text {
  font-size: var(--font-size-subheadline);
  line-height: 1.7;
  color: var(--color-secondary-label);
  margin: 0;
}

/* スクショ付きポイント */
.lp-point-screen {
  display: flex;
  justify-content: center;
}

.lp-phone-frame {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 390 / 760;
  background: var(--color-near-black);
  border-radius: 22px;
  padding: 6px;
  box-shadow:
    0 12px 28px -12px var(--color-shadow-deep),
    0 2px 4px var(--color-shadow-soft-2);
}

.lp-phone-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-xl);
  background: var(--color-bg-muted);
}

/* ビフォーアフター比較（「難しい」を「わかる」に） */
.lp-compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  align-items: stretch;
}

.lp-compare-card {
  padding: var(--space-base);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-separator-light);
  border-radius: var(--radius-lg);
}

.lp-compare-before {
  background: var(--color-gray-tint);
  border-color: rgba(0, 0, 0, 0.06);
}

/* 「せいじめがねの表示」＝製品の価値側のカードを枠色で軽く強調する */
.lp-compare-after {
  border-color: var(--color-blue-overlay-strong);
}

.lp-compare-label {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-tertiary-label);
  margin: 0 0 var(--space-sm);
  text-transform: none;
}

.lp-compare-after .lp-compare-label {
  color: var(--color-blue);
}

.lp-compare-text {
  font-size: var(--font-size-subheadline);
  line-height: 1.9;
  color: var(--color-label);
  margin: 0;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

.lp-compare-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-tertiary-label);
}

.lp-compare-arrow-icon {
  transform: rotate(90deg);
}

.lp-compare-block + .lp-compare-block {
  margin-top: var(--space-base);
  padding-top: var(--space-base);
  border-top: 1px dashed var(--color-separator-light);
}

.lp-compare-block-label {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-contrast);
  margin: 0 0 4px;
  letter-spacing: var(--letter-spacing-label);
}

.lp-compare-block-text {
  font-size: var(--font-size-subheadline);
  line-height: 1.7;
  color: var(--color-label);
  margin: 0;
}

.lp-compare-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: var(--font-size-subheadline);
  line-height: 1.8;
  color: var(--color-label);
}

.lp-compare-list li + li {
  margin-top: 2px;
}

.lp-compare-note {
  font-size: var(--font-size-footnote);
  color: var(--color-tertiary-label);
  margin: var(--space-md) 0 0;
  text-align: center;
}

/* フッター（ネイビーのままにして、下端のbody背景と自然につなげる） */
.lp-footer {
  padding: var(--space-xl) var(--space-base) calc(var(--space-xl) + var(--space-base));
  margin-top: var(--space-lg);
  background: var(--color-blue);
  text-align: center;
}

.lp-footer-nav {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.lp-footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-sm);
}

.lp-footer-link {
  display: inline-block;
  /* テキストは小さいままタッチターゲット（約44px）まで押下領域を拡張する */
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-size-footnote);
  color: var(--color-on-primary-secondary);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-label);
}

.lp-footer-link:hover {
  color: var(--color-on-primary);
  text-decoration: underline;
}

.lp-footer-copy {
  font-size: var(--font-size-footnote);
  color: var(--color-on-primary-tertiary);
  margin: 0;
}

@media (min-width: 600px) {
  .lp-hero {
    padding: 56px var(--space-base) var(--space-xl);
  }

  .lp-hero-title {
    font-size: 44px;
  }

  .lp-brand-icon {
    width: 64px;
    height: 64px;
  }

  .lp-point-with-image {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg);
  }

  .lp-point-with-image .lp-point-text-area {
    flex: 1;
  }

  .lp-point-with-image:nth-child(even) .lp-point-screen {
    order: -1;
  }

  .lp-phone-frame {
    max-width: 220px;
  }

  .lp-compare {
    flex-direction: row;
    align-items: stretch;
  }

  .lp-compare-card {
    flex: 1;
    padding: var(--space-lg);
  }

  .lp-compare-arrow-icon {
    transform: none;
  }
}

.page-sheet-loading-visible {
  display: flex;
}

.page-sheet-loading-text {
  color: var(--color-tertiary-label);
  font-size: 14px;
}

/* モーダル内のボトムシートはモーダルより上に表示 */
.page-sheet-open~.bottom-sheet-backdrop {
  z-index: 1199;
}

.page-sheet-open~.bottom-sheet {
  z-index: 1200;
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {

  .page-sheet,
  .page-sheet-backdrop {
    transition: none;
  }
}

/* ── SVGアイコン共通スタイル ── */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* セクションナビのアイコン */
.section-nav-icon {
  margin-right: 4px;
}

/* セクション見出しのアイコン */
.section-header-icon {
  margin-right: var(--space-sm);
  color: var(--color-secondary-label);
}

/* 影響レベルのアイコン */
.impact-level-icon {
  margin-right: 2px;
  vertical-align: -1px;
}


/* メタ情報ラベルのアイコン */
.meta-label-icon {
  margin-right: 3px;
  opacity: 0.5;
}

/* 議案カード: メタ情報アイコン */
.meta-icon {
  margin-right: 3px;
  opacity: 0.5;
  vertical-align: -1px;
}

.bill-card-meta-info {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
}

.bill-card-meta-info+.bill-card-meta-info {
  margin-left: var(--space-sm);
}

/* ポイントを見るボタンのアイコン */
.expand-btn-icon {
  margin-right: 4px;
}

/* 次のステップのアイコン */
.next-step-icon {
  margin-right: 4px;
  vertical-align: -2px;
}

/* バッジ内アイコン */
.badge-icon {
  margin-right: 2px;
  vertical-align: -1px;
}

/* PDFリンクのアイコン */
.pdf-link-icon {
  margin-right: 3px;
  vertical-align: -1px;
}

/* ===== 決算内訳（Excel構造化データ） ===== */
.settlement-data-info {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption1);
}

.data-info-item {
  color: var(--color-secondary-label);
}

.data-info-item.text-muted {
  color: var(--color-tertiary-label);
}

.settlement-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-separator-light);
}

.settlement-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-footnote);
  background: var(--color-bg-secondary);
}

.settlement-breakdown-table thead {
  background: var(--color-bg-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.settlement-breakdown-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  border-bottom: 2px solid var(--color-separator);
  white-space: nowrap;
}

.settlement-breakdown-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-separator-light);
  color: var(--color-label);
}

.settlement-breakdown-table tbody tr:last-child td {
  border-bottom: none;
}

.settlement-breakdown-table tbody tr:hover {
  background: var(--color-bg-muted);
}

.settlement-data-note {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-blue-tint);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption1);
  color: var(--color-blue-contrast);
}

.no-data-message {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-tertiary-label);
  font-size: var(--font-size-subheadline);
}

/* ===== 会計検査院の注目の検査結果 ===== */
.section-description {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-subheadline);
  color: var(--color-secondary-label);
  line-height: 1.6;
}

.audit-results-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.audit-category-section {
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 0 20px var(--color-shadow-soft);
}

.audit-category-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
  color: var(--color-label);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.audit-item-count {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-regular);
  color: var(--color-tertiary-label);
}

.audit-items-list {
  margin: 0;
  padding-left: var(--space-lg);
  list-style: disc;
}

.audit-item {
  font-size: var(--font-size-subheadline);
  color: var(--color-label);
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.audit-item:last-child {
  margin-bottom: 0;
}

.audit-item-link {
  color: var(--color-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  transition: color 0.15s;
}

.audit-item-link:hover {
  color: var(--color-blue-contrast);
  text-decoration: underline;
}

.external-link-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

.audit-source-note {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-separator-light);
  font-size: var(--font-size-caption1);
  color: var(--color-tertiary-label);
  text-align: center;
}

.audit-source-note a {
  color: var(--color-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.audit-source-note a:hover {
  text-decoration: underline;
}

/* ========================================
   人事案件（Personnel Appointments）スタイル
   ======================================== */

/* 人事案件基本情報カード */
.personnel-info-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-fill);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.personnel-info-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.personnel-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.personnel-info-label {
  font-size: 0.875rem;
  color: var(--color-secondary-label);
  min-width: 100px;
}

.personnel-info-value {
  font-size: 1rem;
  color: var(--color-label);
  font-weight: 500;
}

.personnel-info-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-fill);
}

.personnel-info-date-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.personnel-info-date-label {
  font-size: 0.75rem;
  color: var(--color-tertiary-label);
}

.personnel-info-date-value {
  font-size: 0.875rem;
  color: var(--color-label);
  font-weight: 500;
}

.personnel-info-date-value.vote-approved {
  color: var(--color-green);
}

.personnel-info-date-value.vote-rejected {
  color: var(--color-red);
}

/* 被任命者詳細 */
.personnel-nominees-details {
  margin-top: 24px;
}

.personnel-nominees-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-label);
  margin-bottom: 16px;
}

.personnel-nominees-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.personnel-nominee-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-fill);
  border-radius: 8px;
  padding: 16px;
}

.personnel-nominee-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-label);
  margin-bottom: 8px;
}

.personnel-nominee-current {
  font-size: 0.875rem;
  color: var(--color-secondary-label);
  margin-bottom: 8px;
}

.personnel-nominee-career {
  font-size: 0.875rem;
  color: var(--color-label);
  line-height: 1.6;
  margin-bottom: 8px;
}

.personnel-nominee-career-unavailable {
  color: var(--color-tertiary-label);
  font-style: italic;
}

.personnel-nominee-qualifications,
.personnel-nominee-achievements {
  font-size: 0.875rem;
  color: var(--color-label);
  line-height: 1.6;
  margin-top: 8px;
}

.personnel-nominee-qualifications strong,
.personnel-nominee-achievements strong {
  color: var(--color-secondary-label);
}

/* ポジション分析 */
.personnel-position-role,
.personnel-position-importance,
.personnel-position-responsibilities {
  margin-bottom: 20px;
}

.personnel-position-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-secondary-label);
  margin-bottom: 8px;
}

.personnel-position-role p,
.personnel-position-importance p {
  font-size: 0.875rem;
  color: var(--color-label);
  line-height: 1.6;
}

.personnel-responsibilities-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.personnel-responsibilities-list li {
  font-size: 0.875rem;
  color: var(--color-label);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* 人事案件ハイライト */
.personnel-highlights {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.personnel-highlight-item {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-separator-light);
  border-radius: 8px;
  padding: 16px;
}

.personnel-highlight-item.highlight-expertise {
  background: var(--color-blue-tint);
}

.personnel-highlight-item.highlight-importance {
  background: var(--color-orange-tint);
}

.personnel-highlight-item.highlight-policy {
  background: var(--color-green-tint);
}

.personnel-highlight-item.highlight-career {
  background: var(--color-blue-tint);
}

.personnel-highlight-item.highlight-notable {
  background: var(--color-gray-tint);
}

.personnel-highlight-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.personnel-highlight-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-label);
  flex: 1;
}

.personnel-highlight-category-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-fill);
  color: var(--color-secondary-label);
}

.personnel-highlight-category-badge.highlight-expertise {
  background: var(--color-blue);
  color: var(--color-bg-secondary);
}

.personnel-highlight-category-badge.highlight-importance {
  background: var(--color-orange);
  color: var(--color-bg-secondary);
}

.personnel-highlight-category-badge.highlight-policy {
  background: var(--color-green);
  color: var(--color-bg-secondary);
}

.personnel-highlight-category-badge.highlight-career {
  background: var(--color-blue);
  color: var(--color-bg-secondary);
}

.personnel-highlight-description {
  font-size: 0.875rem;
  color: var(--color-label);
  line-height: 1.6;
  margin: 0;
}

.personnel-explanation {
  font-size: 0.875rem;
  color: var(--color-label);
  line-height: 1.6;
  margin: 16px 0;
}

/* ===== 承認・手続き議案の概要 ===== */
.approval-one-liner {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-body);
}

.approval-three-points {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.approval-point {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
}

.approval-point-label {
  flex: 0 0 auto;
  min-width: 36px;
  margin: 0;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  letter-spacing: var(--letter-spacing-label);
}

.approval-point-text {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.6;
}

.approval-explanation {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.approval-explanation-paragraph {
  margin: 0;
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-regular);
  color: var(--color-secondary-label);
  line-height: 1.7;
  letter-spacing: var(--letter-spacing-body);
}

/* ===== 条約セクション ===== */

/* 基本情報カード（概要） */
.treaty-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.treaty-info-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treaty-info-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.treaty-info-label {
  flex-shrink: 0;
  width: 7em;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-regular);
  color: var(--color-tertiary-label);
}

.treaty-info-value {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-medium);
  color: var(--color-label);
  line-height: 1.6;
}

/* 議案区分バッジ（新規/更新/改変） */
.treaty-change-badge {
  display: inline-block;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  background: var(--color-bg-secondary);
  color: var(--color-secondary-label);
  border: 1px solid var(--color-separator);
}

.treaty-info-dates {
  display: flex;
  gap: var(--space-base);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-separator-light);
}

.treaty-info-date-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.treaty-info-date-label {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-regular);
  color: var(--color-tertiary-label);
}

.treaty-info-date-value {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-medium);
  color: var(--color-label);
}

/* 詳しい説明（一文ずつ段落化） */
.treaty-explanation {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treaty-explanation-sentence {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.85;
  margin: 0;
}

/* 主要な条項 */
.treaty-provisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treaty-provisions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treaty-provision-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
}

.treaty-provision-article {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  padding: 2px var(--space-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.6;
}

.treaty-provision-content {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.75;
}

/* 改正内容 */
.treaty-amendment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.treaty-amendment-item {
  padding: var(--space-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treaty-amendment-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.treaty-amendment-article {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-label);
  padding: 2px var(--space-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.treaty-amendment-operation {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-secondary-label);
  border: 1px solid var(--color-separator);
}

.treaty-amendment-summary {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.75;
  margin: 0;
}

.treaty-amendment-diff {
  margin: 0;
}

/* 押せると分かるが控え目なピル（改正前後 / 追加内容 / 削除される内容 で共用） */
.treaty-amendment-diff-toggle {
  display: inline-block;
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-label);
  cursor: pointer;
  list-style: none;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-full);
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.treaty-amendment-diff-toggle:hover,
.treaty-amendment-diff[open] > .treaty-amendment-diff-toggle {
  color: var(--color-label);
}

.treaty-amendment-diff-toggle:active {
  background: var(--color-fill);
}

.treaty-amendment-diff-toggle::marker,
.treaty-amendment-diff-toggle::-webkit-details-marker {
  display: none;
}

/* 開閉状態で文言を「を見る」↔「を隠す」に切り替える */
.treaty-amendment-diff-toggle::after {
  content: 'を見る';
}

.treaty-amendment-diff[open] > .treaty-amendment-diff-toggle::after {
  content: 'を隠す';
}

.treaty-amendment-diff-body {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.treaty-amendment-diff-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.treaty-amendment-diff-arrow {
  color: var(--color-tertiary-label);
  font-size: var(--font-size-caption1);
  text-align: center;
  margin-left: 56px;
}

.treaty-amendment-diff-label {
  flex-shrink: 0;
  width: 56px;
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-tertiary-label);
  padding-top: 2px;
}

.treaty-amendment-diff-text {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.7;
}

/* 日本の義務と権利・利益 */
.treaty-obligations-rights {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.treaty-obligations,
.treaty-rights {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.treaty-obligations,
.treaty-rights {
  background: var(--color-bg-muted);
}

.treaty-obligations-title,
.treaty-rights-title {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label);
  margin: 0;
}

.treaty-obligations-list,
.treaty-rights-list {
  list-style: disc;
  padding-left: var(--space-base);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treaty-obligations-list li,
.treaty-rights-list li {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-regular);
  color: var(--color-label);
  line-height: 1.75;
}

/* ── タイムライン ── */

/* フィルタ */
.timeline-filter {
  padding: var(--space-sm) 0 var(--space-md);
}

.timeline-filter-scroll {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--space-md);
}

.timeline-filter-scroll::-webkit-scrollbar {
  display: none;
}

.timeline-filter-chip {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-caption1);
  font-weight: 500;
  color: var(--color-secondary-label);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-separator);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.timeline-filter-chip:hover {
  background: var(--color-gray-tint);
}

.timeline-filter-chip.active {
  background: var(--color-blue);
  color: var(--color-bg-secondary);
  border-color: var(--color-blue);
}

/* 未解析議案を含めるトグル・会期セレクタを並べるツールバー */
.timeline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-md) var(--space-sm);
  text-align: right;
}

/* 会期(回次)セレクタ */
.timeline-session-select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-right: auto;
  font-size: var(--font-size-caption1);
  color: var(--color-on-primary-secondary);
  letter-spacing: var(--letter-spacing-label);
}

.timeline-session-select-input {
  max-width: 60vw;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-caption1);
  color: var(--color-label);
  background: var(--color-fill);
  border: none;
  border-radius: var(--radius-md);
}

.timeline-session-select-input:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* 未解析の議案も表示するスイッチ（iOS風トグル） */
.timeline-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-caption1);
  color: var(--color-on-primary-secondary);
  letter-spacing: var(--letter-spacing-label);
}

/* ネイティブのcheckboxは隠し、トラックで見た目を作る */
.timeline-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.timeline-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  background: var(--color-fill);
  border-radius: var(--radius-full);
  transition: background 0.2s ease;
}

.timeline-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: var(--color-bg-secondary);
  border-radius: 50%;
  box-shadow: 0 1px 3px var(--color-shadow-medium-2);
  transition: transform 0.2s ease;
}

.timeline-switch-input:checked + .timeline-switch-track {
  background: var(--color-blue);
}

.timeline-switch-input:checked + .timeline-switch-track::after {
  transform: translateX(18px);
}

.timeline-switch-input:focus-visible + .timeline-switch-track {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* リスト */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.timeline-list-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
}

.timeline-list-loading-text {
  color: var(--color-secondary-label);
  font-size: var(--font-size-subheadline);
}


/* === AIアプリへの質問プロンプト共有（議案詳細） === */
.ai-prompt-share-description {
  margin: 0 0 var(--space-md);
  color: var(--color-secondary-label);
  font-size: var(--font-size-subheadline);
  line-height: 1.6;
}

.ai-prompt-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.ai-prompt-share-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px var(--space-base);
  border: 1px solid var(--color-blue);
  border-radius: 10px;
  background: var(--color-bg-secondary);
  color: var(--color-blue);
  font-size: var(--font-size-subheadline);
  font-weight: 600;
  cursor: pointer;
}

.ai-prompt-share-button:active {
  opacity: 0.7;
}

.ai-prompt-share-button-primary {
  background: var(--color-blue);
  color: var(--color-on-primary);
}

.ai-prompt-share-feedback {
  margin: var(--space-md) 0 0;
  color: var(--color-green-contrast);
  font-size: var(--font-size-footnote);
}