/* AdReview — shared theme tokens & base.
   全ページの :root と最低限の reset / 共通 utility をここに集約。
   ページ固有のレイアウトは引き続き各 HTML の <style> に書く。 */

/* ===== Excel シート選択ダイアログ（register の xlsx 取込）=========================
 * Power Query Navigator 流の 2 ペイン：左=チェックリスト・右=プレビュー（実テーブル）。
 * シート名だけでは判別不能な「どれがガイドラインか」を中身で確認させる。 */
.xlsx-pick-hint{ color:var(--ink-soft); font-size:var(--fs-caption); line-height:1.6; margin:0 0 10px; }
.xlsx-pick-actions{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.xlsx-pick-count{ margin-left:auto; color:var(--ink-mute); font-size:var(--fs-caption); }
.xlsx-pick-body{ display:grid; grid-template-columns:minmax(200px, 300px) 1fr; gap:12px; height:440px; }
.xlsx-pick-list{ overflow:auto; border:1px solid var(--border); border-radius:8px; padding:4px; background:var(--bg); }
.xlsx-pick-row{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer;
  font-size:var(--fs-small);
}
.xlsx-pick-row:hover{ background:var(--bg-hover); }
.xlsx-pick-row.is-focus{ background:var(--accent-soft); outline:1px solid var(--accent-border); }
.xlsx-pick-cb{ margin:0; flex:0 0 auto; }
.xlsx-pick-info{ flex:1 1 auto; min-width:0; }
.xlsx-pick-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xlsx-pick-meta{ color:var(--ink-mute); font-size:var(--fs-caption); }
/* 右ペイン：実テーブルで表示。長セルは ellipsis（title でフル）。横スクロール可。
 * thead はスクロール時に固定して列見出しが常に見えるように。
 * フッタは下固定・テーブルが残り高さを占めてスクロール（flex column）。 */
.xlsx-pick-preview{
  display:flex; flex-direction:column; min-height:0;
  overflow:hidden; background:var(--bg); border:1px solid var(--border); border-radius:8px;
}
.xlsx-pick-preview-empty{ padding:14px; color:var(--ink-mute); font-size:var(--fs-caption); font-style:italic; }
.xlsx-pick-tbl-wrap{ flex:1 1 auto; overflow:auto; min-height:0; }
.xlsx-pick-tbl{ border-collapse:collapse; width:max-content; min-width:100%; font-size:var(--fs-caption); }
.xlsx-pick-tbl th, .xlsx-pick-tbl td{
  border:1px solid var(--border-soft); padding:6px 10px; vertical-align:top;
  max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xlsx-pick-tbl thead th{
  background:var(--bg-subtle); font-weight:600; position:sticky; top:0; z-index:1;
  border-bottom:1px solid var(--border);
}
.xlsx-pick-preview-foot{
  padding:6px 10px; border-top:1px solid var(--border-soft); background:var(--bg-subtle);
  color:var(--ink-mute); font-size:var(--fs-caption);
}
@media (max-width: 640px){
  /* スマホは縦積み（一列）。本機能はPC主用途だが念のため。 */
  .xlsx-pick-body{ grid-template-columns:1fr; height:auto; }
  .xlsx-pick-list{ max-height:180px; }
  .xlsx-pick-preview{ max-height:220px; }
}

/* xlarge dialog（>large=720px）。Excelシート選択のテーブル表示に列幅を確保。 */
dialog.adreview-dialog[data-size="xlarge"]{ max-width:1080px; max-height:88vh; }
dialog.adreview-dialog[data-size="xlarge"] .adreview-dialog-message{
  white-space:normal; max-height:72vh; overflow-y:auto;
}

:root{
  /* Surfaces */
  --bg:#FFFFFF;
  --bg-subtle:#FAFAFA;
  --bg-hover:#F5F5F5;

  /* Text */
  --ink:#0F172A;
  --ink-soft:#475569;
  --ink-mute:#5B6776;

  /* Borders */
  --border:#CBD5E1;
  --border-strong:#94A3B8;
  --border-soft:#F1F5F9;

  /* Accent (Deep Teal) */
  --accent:#115E59;
  --accent-hover:#0F4F4A;
  --accent-soft:#F0FDFA;
  --accent-border:#99F6E4;

  /* Status */
  --danger:#DC2626;
  --danger-soft:#FEF2F2;
  --danger-border:#FECACA;
  --warn:#D97706;
  --warn-soft:#FFFBEB;
  --warn-border:#FDE68A;
  --ok:#059669;
  --ok-strong:#047857;   /* 小サイズ本文向けの濃い緑（#059669 は subpixel で滲みやすい） */
  --ok-soft:#F0FDF4;
  --ok-border:#BBF7D0;

  /* レイアウト幅 — .container max-width をページ種別ごとに集約 */
  --container-wide:   1200px;  /* ダッシュボード系: index, workspace, audit, image, document */
  --container-mid:     880px;  /* 編集/閲覧系: guideline */
  --container-narrow:  720px;  /* 入力フォーム系: register */

  /* タイポ type-scale — 2026-05 に全体 1px 底上げ。
     旧 11/12/13/14/15px → 12/13/14/15/16px に。重要情報の可読性向上。
     来週 1px さらに上げたい場合はここを書き換えるだけで全ページに反映される。 */
  --fs-micro:    12px;   /* 旧 11px。バッジ / マイクロラベル */
  --fs-caption:  13px;   /* 旧 12px。ヒント文 / 補助説明 / メタ情報 */
  --fs-small:    14px;   /* 旧 13px。項目名 / セクション見出し / ボタン */
  --fs-body:     15px;   /* 旧 14px。入力欄 / 段落 / 通常テキスト */
  --fs-lead:     16px;   /* 旧 15px。topnav / 強調本文 */

  /* ヘッダー寸法（LP の .lp-header と app の .app-topnav を完璧に一致させる単一ソース）。
     両者は別コンポーネントだが、寸法だけはこの変数を共有してドリフトを防ぐ。 */
  --topnav-h:      56px;  /* ヘッダー高さ */
  --topnav-pad-x:  24px;  /* 左右パディング */
  --brand-logo:    26px;  /* ブランドロゴ画像サイズ */
}

/* .container の共通プロパティ (max-width は各ページの CSS でセット) */
.container{
  margin:0 auto;
  padding:24px 32px 80px;
}

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

html, body{
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  font-size: var(--fs-body); line-height:1.5;
  min-height:100vh;
  /* ネイティブフォーム部品 (checkbox / radio / range / progress) のテーマ色を
     プロジェクトの accent (teal) に統一。ブラウザ既定の青と衝突しないように。 */
  accent-color: var(--accent);
}

/* 意図しない横スクロール（モバイルで左右に動く）を防ぐ。
   off-canvas のガイドラインドロワー（.guideline-drawer は position:fixed + translateX(100%) で
   画面外右に退避＝right が viewport を超える）や、稀に幅が溢れる動的UIがあっても、
   ルートで横方向をクリップしてパンできないようにする。縦スクロールや、内側の
   overflow-x:auto（LP カルーセル / 横タブ）には影響しない。clip 非対応の旧環境向けに hidden を先置き。 */
html{ overflow-x: hidden; overflow-x: clip; }

/* Typographic utilities */
.tnum{ font-variant-numeric:tabular-nums }
.mono{ font-family:'JetBrains Mono', monospace; font-feature-settings:"tnum" }

/* 汎用ローディングスピナー — 審査中など「処理が止まっていない」ことを示す回転アイコン。
   全ページ共通 (旧: guideline.css / audit.css に個別定義し、image/document では
   未定義で非表示になっていた)。サイズは em 基準で文字に追従。 */
@keyframes spin{ to { transform:rotate(360deg); } }
.spinner{
  display:inline-block;
  width:1em; height:1em;
  border:2px solid var(--border-strong);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:-0.15em;   /* テキストのベースラインに揃える */
  flex-shrink:0;
}
@media (prefers-reduced-motion: reduce){
  .spinner{ animation-duration: 1.5s; }  /* 完全停止せず減速 (処理中の手掛かりは残す) */
}

/* ------------------------------------------------------------ */
/*  App topnav (shared across all pages that mount the header)   */
/* ------------------------------------------------------------ */
.app-topnav{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:0 var(--topnav-pad-x);
  height:var(--topnav-h);
  display:flex; align-items:center; gap:10px;
}
/* アカウント表示（topnav 右端）。app-chrome.js が auth 状態に応じて描画 */
.app-account{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.app-account .acct-email{
  font-size: var(--fs-caption); color:var(--ink-soft);
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-account .acct-logout{
  background:transparent; border:1px solid var(--border); color:var(--ink-soft);
  padding:5px 10px; border-radius:6px; font-size: var(--fs-caption);
  cursor:pointer; font-family:inherit;
}
.app-account .acct-logout:hover{ background:var(--bg-subtle); color:var(--ink); }
.app-account .acct-login{
  color:var(--accent); font-weight:600; font-size: var(--fs-caption);
  text-decoration:none; border:1px solid var(--accent-border);
  padding:5px 12px; border-radius:6px;
}
.app-account .acct-login:hover{ background:var(--accent-soft); }

/* アカウントメニュー（ドロップダウン: メール ▾ → マイページ / ログアウト） */
.acct-menu{ position:relative; }
.acct-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border); color:var(--ink-soft);
  padding:5px 10px; border-radius:6px; font-size: var(--fs-caption);
  cursor:pointer; font-family:inherit; max-width:240px;
}
.acct-trigger:hover{ background:var(--bg-subtle); color:var(--ink); }
.acct-trigger .acct-email{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-trigger .acct-caret{ font-size:10px; color:var(--ink-mute); }
.acct-dropdown{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  min-width:180px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.12); padding:6px;
  display:flex; flex-direction:column; gap:2px;
}
.acct-dropdown[hidden]{ display:none; }
.acct-dropdown .acct-item{
  display:block; width:100%; text-align:left; box-sizing:border-box;
  background:transparent; border:0; color:var(--ink); cursor:pointer;
  padding:8px 10px; border-radius:6px; font-size: var(--fs-caption);
  font-family:inherit; text-decoration:none;
}
.acct-dropdown .acct-item:hover{ background:var(--bg-subtle); }
.acct-dropdown .acct-logout{ color:var(--danger); }

/* マイページ */
.mypage{ max-width:680px; }
.mypage-card{
  background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:18px 20px;
}
.mypage-card-head{ font-weight:600; color:var(--ink); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.mypage-card-head svg{ flex-shrink:0; color:var(--ink-mute); opacity:.85; }
.mypage-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
/* ラベル(メールアドレス等)は折り返さない。長い値(メール)側を折り返す。 */
.mypage-label{ color:var(--ink-mute); font-size:var(--fs-caption); white-space:nowrap; }
.mypage-value{ color:var(--ink); min-width:0; overflow-wrap:anywhere; text-align:right; }
.mypage-muted{ color:var(--ink-mute); }
.mypage-plan{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.mypage-plan-name{ font-weight:600; color:var(--accent); }
.mypage-plan-count{ color:var(--ink-soft); font-size:var(--fs-caption); }

/* プラン変更カード（mypage 課金 / #14）*/
.mypage-billing .plan-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px; margin:4px 0 8px;
}
.plan-card{
  border:1px solid var(--border); border-radius:10px; padding:14px;
  display:flex; flex-direction:column; gap:6px; text-align:center;
}
.plan-card--current{ border-color:var(--accent); background:var(--accent-soft); }
.plan-card-name{ font-weight:600; color:var(--ink); }
.plan-card-price{ font-size:var(--fs-lead); font-weight:700; color:var(--ink); }
.plan-card-price span{ font-size:var(--fs-caption); font-weight:400; color:var(--ink-soft); }
.plan-card-quota{ font-size:var(--fs-caption); color:var(--ink-soft); margin-bottom:6px; }
.btn-plan{
  margin-top:auto; padding:8px 10px; border-radius:8px; font-weight:600;
  font-size:var(--fs-small); cursor:pointer; border:1px solid var(--border);
  background:var(--bg-subtle); color:var(--ink-soft);
}
.btn-plan:disabled{ cursor:default; opacity:.7; }
.btn-plan--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-plan--primary:hover{ filter:brightness(1.05); }
.plan-manage{ margin-top:10px; }
.mypage-note{ color:var(--ink-mute); font-size:var(--fs-small); margin-top:10px; }
/* 支払い失敗(past_due)の警告バンド。プラン変更カードの先頭に出し、契約管理へ誘導する。 */
.billing-alert{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:14px; padding:12px 14px;
  background:var(--warn-soft); border:1px solid var(--warn-border); border-radius:10px;
  color:var(--ink); font-size:var(--fs-small); line-height:1.6;
}
.billing-alert .btn-plan{ flex:0 0 auto; }
/* 期末解約予約の案内バンド。past_due の警告(amber)より落ち着いた情報色(accent)で、
   「解約予定だが期末まで利用可」を不安なく伝える。プラン変更カードの先頭に出す。 */
.billing-notice{
  margin-bottom:14px; padding:12px 14px;
  background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:10px;
  color:var(--ink); font-size:var(--fs-small); line-height:1.6;
}
/* 退会は破壊的かつ不可逆。プラン変更の直下で目立つと誤操作を誘うため、
   折りたたみ時は赤い枠・背景をやめ、フッター手前の控えめなテキストリンクに。
   赤（危険色）は展開後の本文と確定ボタンにだけ出す。上に区切り線+余白で課金カードから切り離す。 */
.mypage-danger{
  border:none; background:none; border-radius:0;
  border-top:1px solid var(--border-soft); margin-top:8px; padding:8px 0 0;
}
.mypage-danger > summary{
  cursor:pointer; color:var(--ink-mute); font-size:var(--fs-caption); padding:8px 0; list-style:revert;
}
.mypage-danger > summary:hover{ color:var(--danger); }
.mypage-danger-body{ padding:6px 0 14px; color:var(--ink-soft); font-size:var(--fs-caption); }
.mypage-danger-body p{ margin:0 0 12px; }

.app-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; text-decoration:none;
  color:var(--ink); font-size: var(--fs-lead);
}
/* ロゴマーク: GuidelineChecker のブランドアイコン（書類×チェック、透過PNG）。
   旧・動画専用時代の「フィルムフレーム＋ティール角丸＋白抜き」は撤去。 */
.app-logo .mark{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.app-logo .mark img{
  width:var(--brand-logo); height:var(--brand-logo);
  object-fit:contain; display:block;
}
.app-topnav-sep{ color:var(--ink-mute); font-size: var(--fs-small) }

/* ============================================================
   アニメーション（控えめ、reduced-motion 対応）
   ============================================================ */
@keyframes adReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes adThumbReveal {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes adVerdictReveal {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes adStepDone {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   タイポグラフィ階層（複数ページで共通化）
   page-title (h1) は hero 風に大きく、ボディとの差を 2.5x 以上に
   ============================================================ */
.page-title{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:34px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:12px;
}
.page-sub{
  font-size: var(--fs-body);
  line-height:1.6;
  color:var(--ink-soft);
}
/* hero 領域はさらに余白でゆとり */
.hero .page-title{ font-size:38px; margin-bottom:12px; }
.hero .page-sub  { font-size: var(--fs-lead); }

@media (max-width:680px){
  .page-title{ font-size:28px; }
  .hero .page-title{ font-size:30px; }
  /* スマホ: topnav の左右余白を詰め、ブランド + パンくず + アカウントが収まりやすく。
     縮めるだけなので既存レイアウトは崩さない（余白が増える側）。 */
  .app-topnav{ padding:0 16px; }   /* gap はデスクトップ既定値 10px のまま (旧: モバイル時のみ縮小) */
  .acct-trigger{ max-width:160px; }
  .acct-trigger .acct-email{ max-width:108px; }
  .app-account .acct-email{ max-width:120px; }
  /* 本文コンテナの余白をスマホ向けに圧縮: 左右 32→16px、上 24→16px、下 80→48px。
     下 80px はフローティング要素用の名残でスマホでは過大。 */
  .container{ padding:16px 16px 48px; }
  /* ※ topnav パンくず・Drive タブ等「後で定義されるコンポーネント」の非表示は
     カスケード順で確実に勝たせるため、ファイル末尾の @media にまとめている。 */
}

/* ------------------------------------------------------------ */
/*  審査媒体タイプ切替 (動画 / 画像 / 資料) — page-header.js が注入  */
/*  page-title 直下に出るセグメンテッドコントロール。同じ           */
/*  workspace+project を引き継いで他の審査ページへ遷移できる。       */
/* ------------------------------------------------------------ */
.audit-type-tabs{
  display:inline-flex; gap:3px;
  margin-left:auto;   /* page-meta 行内で右端に寄せる (パンくずの最下層として) */
  padding:3px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:9px;
}
.audit-type-tab{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px;
  border-radius:6px;
  font-size: var(--fs-caption); font-weight:500;
  color:var(--ink-soft);
  text-decoration:none;
  transition:background .12s, color .12s, box-shadow .12s;
}
.audit-type-tab:hover{ color:var(--ink); background:var(--bg-hover); }
.audit-type-tab.active{
  background:var(--bg);
  color:var(--accent);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.audit-type-tab [data-lucide]{ opacity:.8; flex-shrink:0; }
.audit-type-tab.active [data-lucide]{ opacity:1; }

/* キーボード操作時のフォーカスリング統一
   :focus-visible はキーボードフォーカス時のみ適用される（マウスクリックでは出ない）。
   既存の :focus 系（box-shadow など）はそのまま残し、追加で外周にリングを描く */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:inherit;
}
/* マウスクリック後のフォーカスは出さない（:focus-visible に任せる）*/
:focus:not(:focus-visible){
  outline:none;
}

/* エラー / 警告 / 成功 の統一表示
   .alert-card  : 区切りカード型（既存 ProgressCard 等にはめ込む）
   .alert-inline: 1 行のインライン警告（フォーム下など）
   variant       : .alert-error / .alert-warn / .alert-info / .alert-success */
.alert-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 20px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size: var(--fs-small); line-height:1.6;
}
.alert-card .alert-icon{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.alert-card .alert-body{ flex:1; min-width:0; }
.alert-card .alert-title{
  font-size: var(--fs-body); font-weight:600;
  margin-bottom:4px;
}
.alert-card .alert-message{ color:var(--ink-soft); word-wrap:break-word; }
.alert-card .alert-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }

.alert-error .alert-icon  { background:var(--danger-soft); color:var(--danger); }
.alert-error              { border-color:var(--danger-border); }
.alert-warn  .alert-icon  { background:var(--warn-soft, #FEF3C7); color:var(--warn, #B45309); }
.alert-warn               { border-color:var(--warn-border, #FCD34D); }
.alert-info  .alert-icon  { background:var(--accent-soft); color:var(--accent); }
.alert-info               { border-color:var(--accent-border, var(--border)); }
.alert-success .alert-icon{ background:var(--ok-soft, #DCFCE7); color:var(--ok, #16A34A); }
.alert-success            { border-color:var(--ok-border, #86EFAC); }

.alert-inline{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-caption); line-height:1.5;
}
.alert-inline.alert-error   { color:var(--danger); }
.alert-inline.alert-success { color:var(--ok, #16A34A); }
.alert-inline.alert-warn    { color:var(--warn, #B45309); }

/* 共通 dialog（ネイティブ confirm/alert の置換）*/
dialog.adreview-dialog{
  /* 明示的に viewport 中央に固定（margin:auto が一部環境で効かないため） */
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  border:0; border-radius:12px;
  padding:0;
  max-width:480px; width:92vw;
  max-height:88vh; overflow:auto;
  /* スクロール連鎖防止: ダイアログ内のスクロールが body に伝播して
     背景ページが微妙に動くのを止める（"scroll chaining" 対策の標準手法）。 */
  overscroll-behavior: contain;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  background:#fff; color:var(--ink);
  font-family:inherit;
}
dialog.adreview-dialog::backdrop{
  background:rgba(15,23,42,.55);
}
/* ダイアログ表示中は body 自体のスクロールを止める（保険）。
   dialog.js の show/close でクラス付け外し。スクロール位置は保持される。 */
body.adreview-modal-open{ overflow: hidden; }
.adreview-dialog-content{ padding:20px 24px; }
.adreview-dialog-title{
  font-size: var(--fs-lead); font-weight:600;
  margin-bottom:8px;
}
.adreview-dialog-message{
  font-size: var(--fs-small); line-height:1.65; color:var(--ink-soft);
  white-space:pre-wrap; word-wrap:break-word;
}
.adreview-dialog-actions{
  display:flex; gap:8px; justify-content:flex-end;
  margin-top:20px;
}
.adreview-dialog-btn{
  padding:8px 16px; border-radius:6px; cursor:pointer;
  font-size: var(--fs-small); font-weight:500;
  border:1px solid var(--border);
  background:#fff; color:var(--ink);
  font-family:inherit;
  min-width:80px;
}
.adreview-dialog-btn:hover{ background:var(--bg-subtle); }
.adreview-dialog-btn-primary{
  background:var(--accent); color:#fff;
  border-color:var(--accent);
}
.adreview-dialog-btn-primary:hover{ filter:brightness(1.05); background:var(--accent); }
.adreview-dialog-btn-danger{
  background:var(--danger); color:#fff;
  border-color:var(--danger);
}
.adreview-dialog-btn-danger:hover{ filter:brightness(1.05); background:var(--danger); }
.adreview-dialog-btn-cancel{
  background:#fff; color:var(--ink-soft);
}

/* prompt 用テキスト入力 — message の直下に配置される */
.adreview-dialog-input{
  display:block;
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  font-size: var(--fs-body);
  font-family:inherit;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:6px;
  transition:border-color .12s, box-shadow .12s;
  box-sizing:border-box;
}
.adreview-dialog-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* 複数行入力（prompt multiline=true。例: 審査の前提・除外メモ） */
textarea.adreview-dialog-input-multiline{
  min-height:140px;
  line-height:1.6;
  resize:vertical;
}

/* 審査の前提・除外メモ — 結果ページの透明性バッジ / 未設定時の誘導 */
.results-premise{ margin: 6px 0 10px; }
.results-premise-badge,
.results-premise-hint{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-size: var(--fs-small); line-height:1.4;
  border:1px solid var(--border-soft); background:var(--bg-subtle);
  color:var(--ink-soft); cursor:pointer; text-align:left;
}
.results-premise-badge{ color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft); }
.results-premise-badge:hover,
.results-premise-hint:hover{ border-color:var(--border-strong); }

/* entity-settings.js — 設定/編集ページ共通 UI（インライン編集欄 / danger zone） */
.es-field{ margin:0 0 24px; }
.es-label{ display:block; font-size: var(--fs-small); font-weight:600; color:var(--ink); margin-bottom:6px; }
.es-input{
  display:block; width:100%; box-sizing:border-box;
  padding:10px 12px; font-size: var(--fs-body); font-family:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--border-strong); border-radius:6px;
  transition:border-color .12s, box-shadow .12s;
}
.es-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.es-input-multiline{ min-height:140px; line-height:1.6; resize:vertical; }
.es-hint{ margin:6px 0 0; font-size: var(--fs-caption); color:var(--ink-mute); line-height:1.6; white-space:pre-line; }
.es-actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:10px; }
.es-status{ font-size: var(--fs-caption); color:var(--ink-mute); }
.es-status-ok{ color:var(--accent); }
.es-status-err{ color:var(--danger, #c0392b); }
.es-save:disabled{ opacity:.5; cursor:not-allowed; }

.es-danger{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:40px; padding:16px; border:1px solid var(--border-soft); border-radius:10px;
  background:var(--bg-subtle);
}
.es-danger-title{ font-size: var(--fs-small); font-weight:600; color:var(--ink); }
.es-danger-desc{ margin:4px 0 0; font-size: var(--fs-caption); color:var(--ink-mute); line-height:1.6; }
.es-danger-btn{ flex-shrink:0; }

/* click-to-edit 名称（表示名をクリックしてその場で編集）。見た目は元の名前のまま。
   省略はしない＝余裕があれば全文表示、足りなければ折り返し（テキスト欠落を避ける）。 */
.es-name{ display:inline; }
.es-name-display{
  display:inline;
  background:none; border:none; padding:2px 4px; margin:-2px -4px; border-radius:6px;
  font:inherit; color:inherit; cursor:text; text-align:left;
}
.es-name-display:hover{ background:var(--bg-subtle); }
.es-name-pencil{ margin-left:5px; color:var(--ink-mute); opacity:0; transition:opacity .12s; vertical-align:middle; }
.es-name-display:hover .es-name-pencil{ opacity:1; }
.es-name-input{
  font:inherit; color:var(--ink); width:min(100%, 32ch);
  padding:2px 6px; margin:-2px 0; border:1px solid var(--accent);
  border-radius:6px; background:#fff; box-shadow:0 0 0 3px var(--accent-soft); outline:none;
}

/* preview モード（サンプルプレビューなど、長文 HTML を表示する場合） */
dialog.adreview-dialog[data-size="large"]{
  max-width:720px;
  max-height:84vh;
}
dialog.adreview-dialog[data-size="large"] .adreview-dialog-message{
  white-space:normal;
  max-height:60vh;
  overflow-y:auto;
  font-size: var(--fs-small);
}
.adreview-dialog-preview-tabs{
  display:flex; gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.adreview-dialog-preview-tab{
  padding:8px 14px;
  background:none; border:none;
  font-size: var(--fs-small); font-weight:500;
  color:var(--ink-soft); cursor:pointer;
  font-family:inherit;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.adreview-dialog-preview-tab:hover{ color:var(--ink); }
.adreview-dialog-preview-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.adreview-dialog-preview-pane{
  display:none;
  font-family:'Noto Sans JP', system-ui, sans-serif;
  font-size: var(--fs-small); line-height:1.75;
  white-space:pre-wrap; word-break:break-word;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px 18px;
  color:var(--ink);
}
.adreview-dialog-preview-pane.active{ display:block; }

/* ============================================================
   過去審査リスト (jobs-list.js 用、audit / index 両用)
   ============================================================ */
/* セクション間隔は親コンテナ任せ（.audit は gap:20px / workspace は inline で上書き）。
   独自の margin-top を持たせない（旧 8px は .audit gap と二重化していた）。 */
.past-jobs{ margin-top:0; }
.past-jobs-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.past-jobs-title{
  font-size: var(--fs-small); font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
}
.past-jobs-title svg{ flex-shrink:0; color:var(--ink-mute); opacity:.85; }
.past-jobs-list{
  list-style:none;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  padding:0;
}
.past-jobs-list li{ border-bottom:1px solid var(--border-soft); }
.past-jobs-list li:last-child{ border-bottom:0; }
.past-jobs-li{ position:relative; }
/* 削除ボタンがある時だけ hover で余白を空ける（無い場合はシフトしない）。
   ※現在の審査ページは履歴インライン削除を廃止し各結果詳細の下部ボタンに集約したため
   未使用だが、jobs-list モジュール自体は deleteHandler 対応を残してある。 */
.past-jobs-li:has(.pjob-delete) .past-jobs-item{
  padding-right:14px;
  transition:padding-right .12s;
}
.past-jobs-li:has(.pjob-delete):hover .past-jobs-item,
.past-jobs-li:has(.pjob-delete):focus-within .past-jobs-item{
  padding-right:44px;
}
.past-jobs-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  text-decoration:none; color:inherit;
  transition:background .12s;
}
.past-jobs-item:hover{ background:var(--bg-subtle); }
.past-jobs-item .pjob-thumb{
  width:48px; height:48px;
  background:#fff;
  border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-mute); font-size: var(--fs-micro);
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.past-jobs-item .pjob-thumb img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.past-jobs-item .pjob-thumb .pjob-thumb-placeholder{ font-size:10px; }
.past-jobs-item .pjob-body{ flex:1; min-width:0; }
.past-jobs-item .pjob-context{
  font-size: var(--fs-micro); color:var(--ink-mute);
  margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.past-jobs-item .pjob-name{
  font-size: var(--fs-small); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.past-jobs-item .pjob-meta{
  font-size: var(--fs-caption); color:var(--ink-mute);
  margin-top:2px;
}
/* 保管期限カウントダウン（控えめ）。プラン未確定など空文字なら出さない */
.pjob-expiry{ color:var(--ink-mute); opacity:.75; }
.pjob-expiry:empty{ display:none; }
.past-jobs-item .pjob-timeline{
  height:3px;
  background:var(--border);
  border-radius:2px;
  position:relative;
  margin-top:6px;
  min-width:80px;
}
.past-jobs-item .pjob-timeline:empty{ display:none; }
.pjob-marker{
  position:absolute;
  top:50%;
  width:6px; height:6px;
  border-radius:50%;
  border:1.5px solid #fff;
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 0.5px rgba(0,0,0,.2);
}
.pjob-marker.sev-high   { background:var(--danger); }
.pjob-marker.sev-medium { background:var(--warn); }
.pjob-marker.sev-low    { background:var(--ink-mute); }
/* バッジ（要修正 等）+ 相対時刻のまとまり。PC は横並び、スマホは縦積みで横幅を稼ぐ。 */
.past-jobs-item .pjob-status{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.past-jobs-item .pjob-time{
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  flex-shrink:0;
  /* 文字数が "12m" / "1h" / "2026/05/18" 等で揺れるので最小幅 + 右寄せで固定列化。
     これによって前の .stamp（要修正 / 要差戻 等）の x 位置も揃う。 */
  min-width:56px;
  text-align:right;
}
/* スマップ: バッジ+時刻を縦積み（右寄せ）にして本文（ファイル名/違反件数）の幅を確保。
   行のサムネ間隔も詰める。 */
@media (max-width:560px){
  .past-jobs-item{ gap:10px; }
  .past-jobs-item .pjob-status{ flex-direction:column; align-items:flex-end; gap:4px; }
  .past-jobs-item .pjob-time{ min-width:0; }
}
/* 削除ボタン（hover 時に薄く現れるトラッシュ icon）*/
.pjob-delete{
  position:absolute;
  top:50%; right:8px;
  transform:translateY(-50%);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  border-radius:6px;
  color:var(--ink-mute);
  cursor:pointer;
  opacity:0;
  transition:opacity .12s, background .12s, color .12s;
}
.past-jobs-li:hover .pjob-delete,
.pjob-delete:focus-visible{ opacity:1; }
.pjob-delete:hover{ background:var(--danger-soft); color:var(--danger); }
.pjob-delete:disabled{ opacity:.4; cursor:not-allowed; }

/* 入力モード切替タブ（複数の入力方法を選ぶ UI、register / audit で共用） */
.input-mode-tabs{
  display:flex; gap:2px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border);
}
.input-mode-tab{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:8px 14px;
  font-size: var(--fs-caption); color:var(--ink-mute); cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-family:inherit;
  transition:color .12s, border-color .12s;
}
.input-mode-tab:hover{ color:var(--ink); }
.input-mode-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.input-mode-panel.hidden{ display:none; }

/* Drive 取り込みパネル — URL 入力 + Picker ボタン共通 */
.drive-input-row{
  display:flex; gap:8px; align-items:stretch;
  margin-bottom:8px;
}
.drive-url-field{
  flex:1; min-width:0;
  padding:9px 12px;
  font-size: var(--fs-small);
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  color:var(--ink);
  font-family:inherit;
}
.drive-url-field:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* Google ネイティブ URL（Sheets/Docs/Slides）貼付時の warn 状態。
   drive.js wirePanel が `input` イベントで toggle する。 */
.drive-url-field.is-warn{
  border-color:var(--warn);
  background:var(--warn-soft);
}
.drive-url-field.is-warn:focus{
  box-shadow:0 0 0 3px var(--warn-border);
}
.drive-url-fetch-btn[disabled]{
  opacity:.5; cursor:not-allowed;
}
.drive-url-fetch-btn{
  flex-shrink:0; white-space:nowrap;
  padding:8px 14px;
}
.drive-pick-btn{
  margin-top:4px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
}
.drive-input-status{
  margin-top:8px; min-height:18px;
  font-size: var(--fs-caption); line-height:1.5;
  color:var(--ink-soft);
}
.drive-input-status.error   { color:var(--danger); }
.drive-input-status.success { color:var(--ok, #16A34A); }

/* 送信ボタン横の「何が足りないか」表示（5 ページ共通・ui-helpers.setSubmitState）。
   missing 状態 = warn 色で「足りないもの」、ok 状態 = mute 色で確認テキスト。
   ボタン自体の disabled は setSubmitState 側で連動するのでここでは色だけ。 */
.submit-hint{
  font-size: var(--fs-caption); line-height:1.5;
  color: var(--ink-mute);
  margin: 6px 0 0;
  min-height: 18px;
}
.submit-hint[data-state="missing"]{
  color: var(--warn);
  font-weight: 500;
}
.submit-hint[data-state="ok"]{
  color: var(--ink-soft);
}
.submit-hint[data-state="idle"]{
  color: var(--ink-mute);
}

/* Google ネイティブ取込不可ヒント（register Drive パネル）。
   default は info 色、`.is-warn`（URL 貼付検知時）で warn 色に切替。 */
.drive-native-hint{
  display:flex; align-items:flex-start; gap:6px;
  margin:0 0 8px;
  font-size: var(--fs-caption); line-height:1.5;
  color: var(--ink-mute);
}
.drive-native-hint > i{ flex-shrink:0; margin-top:2px; color: var(--ink-mute); }
.drive-native-hint.is-warn{ color: var(--warn); font-weight:500; }
.drive-native-hint.is-warn > i{ color: var(--warn); }

/* ブランドロゴ画像 — ボタン / ラベル内のインライン使用想定 */
.brand-drive-logo{
  height:16px; width:auto;
  vertical-align:middle;
  display:inline-block;
}
.brand-drive-logo-sm{ height:13px; }
.brand-claude-icon{
  width:16px; height:16px;
  vertical-align:-3px;
  display:inline-block;
}
.brand-claude-wordmark{
  height:14px; width:auto;
  vertical-align:-2px;
  display:inline-block;
}
/* accent 背景のボタン内では Claude ロゴを白に反転（黒い SVG が緑背景で読めないため）*/
.btn-primary .brand-claude-wordmark,
.btn-primary .brand-claude-icon,
.btn-next .brand-claude-wordmark,
.btn-next .brand-claude-icon{
  filter:brightness(0) invert(1);
}
/* locked 状態（点線枠 + accent-soft 背景）の時は元の黒に戻す */
.btn-primary.btn-locked .brand-claude-wordmark,
.btn-primary.btn-locked .brand-claude-icon,
.btn-next.btn-locked .brand-claude-wordmark,
.btn-next.btn-locked .brand-claude-icon{
  filter:none;
}

/* API キー設定トリガー（topnav 右端） */
.settings-trigger{
  /* 右寄せは .app-account(margin-left:auto) が担う。ここで auto を付けると
     auto が2つになりアカウントが中央に寄ってしまうため付けない。 */
  background:transparent; border:0; padding:6px;
  border-radius:6px; cursor:pointer;
  color:var(--ink-mute);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  transition:background .12s, color .12s;
}
.settings-trigger:hover{ background:var(--bg-subtle); color:var(--ink); }
.settings-trigger.has-key::after{
  content:''; position:absolute;
  top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--ok, #16A34A);
  border:1.5px solid #fff;
}

/* 設定モーダル — <dialog> ベース。focus trap / ESC / backdrop はブラウザ標準。
   注: [open] セレクタで限定しないと、UA stylesheet の "display: none on close" を
       常時上書きしてしまい、close() しても画面に残るバグになる (2026-05 ハマり事例)。 */
dialog.adreview-settings-modal[open]{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  padding:0;
  border:0; border-radius:12px;
  width:92vw; max-width:560px;
  max-height:88vh; overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  background:#fff; color:var(--ink);
  font-family:inherit;
  display:flex; flex-direction:column;
}
dialog.adreview-settings-modal::backdrop{
  background:rgba(15,23,42,.55);
}
.adreview-settings-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.adreview-settings-head h2{ margin:0; font-size:16px; font-weight:600; }
.adreview-settings-close{
  background:none; border:0; font-size:24px; line-height:1;
  cursor:pointer; color:var(--ink-mute);
  padding:0 4px;
}
.adreview-settings-close:hover{ color:var(--ink); }
.adreview-settings-body{ padding:20px 24px; }
/* 呼出元コンテキストの誘導バナー（"この機能には API キーが必要です" 等）*/
.adreview-settings-banner{
  background:var(--accent-soft);
  border:1px solid var(--accent-border, var(--accent));
  color:var(--ink);
  padding:12px 16px;
  border-radius:8px;
  font-size: var(--fs-small);
  line-height:1.55;
  margin-bottom:16px;
}
.adreview-settings-lead{
  font-size: var(--fs-small); color:var(--ink-soft); line-height:1.65;
  margin:0 0 20px;
}
.adreview-settings-label{
  display:block; font-size: var(--fs-caption); font-weight:500;
  color:var(--ink); margin-bottom:6px;
}
.adreview-settings-input-row{
  display:flex; gap:6px; align-items:stretch;
}
.adreview-settings-input{
  flex:1; min-width:0;
  padding:9px 12px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-small);
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  color:var(--ink);
}
.adreview-settings-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.adreview-settings-eye{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:6px;
  padding:0 10px; cursor:pointer;
  font-size: var(--fs-lead);
}
.adreview-settings-eye:hover{ background:var(--bg); }
.adreview-settings-status{
  margin-top:8px; min-height:18px;
  font-size: var(--fs-caption); line-height:1.5;
}
.adreview-settings-status.success{ color:var(--ok, #16A34A); }
.adreview-settings-status.error{ color:var(--danger); }
.adreview-settings-status.loading{ color:var(--ink-soft); }
.adreview-settings-actions{
  display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;
}
.adreview-settings-actions button{
  padding:8px 14px; border-radius:6px; cursor:pointer;
  font-size: var(--fs-small); border:1px solid var(--border);
  background:#fff; color:var(--ink);
}
.adreview-settings-actions button:hover{ background:var(--bg-subtle); }
.adreview-settings-actions button:disabled{ opacity:.5; cursor:not-allowed; }
.adreview-settings-btn-save{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
.adreview-settings-btn-save:hover{ filter:brightness(1.05); }
.adreview-settings-btn-delete{
  color:var(--danger) !important;
  border-color:var(--danger-border) !important;
  margin-left:auto;
}
.adreview-settings-btn-delete:hover{ background:var(--danger-soft) !important; }
.adreview-settings-notes{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--border-soft, var(--border));
  font-size: var(--fs-caption); color:var(--ink-soft); line-height:1.7;
}
.adreview-settings-notes h3{
  font-size: var(--fs-caption); font-weight:600; color:var(--ink);
  margin:0 0 6px;
}
.adreview-settings-notes h3:not(:first-child){ margin-top:12px; }
.adreview-settings-notes ul{ margin:0; padding-left:18px; }
.adreview-settings-notes code{
  background:var(--bg-subtle); padding:1px 5px; border-radius:3px;
  font-size: var(--fs-caption);
}
.adreview-settings-notes a{
  color:var(--accent); text-decoration:none;
}
.adreview-settings-notes a:hover{ text-decoration:underline; }
.app-topnav-context{
  font-size: var(--fs-small); color:var(--ink-soft);
  /* パンくずは折り返さない（旧 flex-wrap:wrap だと狭い画面で名前が縦に1文字ずつ
     折れて topnav が縦に伸びていた）。min-width:0 で flex 連鎖の縮小を許可し、
     長い名前は各 crumb 側の ellipsis で省略する。overflow:hidden は dropdown を
     切ってしまうので付けない。 */
  display:flex; align-items:center; gap:2px; flex-wrap:nowrap; min-width:0;
}
/* 長いワークスペース/ガイドライン名は省略記号で1行に収める（PC/スマホ共通）。 */
.app-topnav-context .crumb-jump{ min-width:0; }
.app-topnav-context .crumb-jump-btn{ min-width:0; max-width:100%; }
.app-topnav-context .crumb-jump-btn strong{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.app-topnav-context a{ color:inherit; text-decoration:none }
.app-topnav-context a:hover{ color:var(--ink) }
.app-topnav-context strong{ color:var(--ink); font-weight:600 }
.app-topnav-context .crumb-sep{ color:var(--ink-mute); margin:0 2px; opacity:.6 }
/* crumb-current は crumb-jump-btn と同じ layout box にしてテキストベースラインを揃える。
   旧: button は border:1px transparent + flex 中央寄せ、current は span 単体だったので
       テキストが上下に 1-2px ズレて見えていた。 */
.app-topnav-context .crumb-current{
  display: inline-block;   /* テキスト省略のため block 化（旧 inline-flex） */
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
  /* 長いガイドライン名は省略記号で1行に収める。 */
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}

/* ------------------------------------------------------------ */
/*  Topnav breadcrumb quick-jump dropdown                        */
/* ------------------------------------------------------------ */
.crumb-jump{ position:relative; display:inline-flex; align-items:center }
.crumb-jump-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 6px;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  font-family:inherit;
  font-size: var(--fs-small);
  line-height:1.5;   /* button のブラウザ既定 line-height が周辺の span と異なりベースラインがズレるため明示 */
  color:var(--ink);
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.crumb-jump-btn strong{ color:inherit; font-weight:600 }
.crumb-jump-btn svg{ opacity:.5; flex-shrink:0 }
.crumb-jump-btn:hover,
.crumb-jump.open .crumb-jump-btn{
  background:var(--accent-soft);
  border-color:var(--accent-border);
  color:var(--accent);
}
.crumb-jump-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:240px;
  max-width:340px;
  max-height:400px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  padding:4px;
  z-index:100;
  display:none;
}
.crumb-jump.open .crumb-jump-menu{ display:block }
.crumb-jump-section{
  padding:8px 10px 4px;
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.crumb-jump-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:var(--ink);
  font-size: var(--fs-small);
  line-height:1.4;
}
.crumb-jump-item:hover{ background:var(--bg-subtle) }
.crumb-jump-item.current{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}
.crumb-jump-item .sub{
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  margin-left:auto;
  flex-shrink:0;
}
.crumb-jump-item.current .sub{ color:var(--accent) }
.crumb-jump-divider{ height:1px; background:var(--border-soft); margin:4px 0 }
.crumb-jump-add{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-radius:6px;
  color:var(--ink-soft);
  font-size: var(--fs-caption);
  text-decoration:none;
}
.crumb-jump-add:hover{ background:var(--bg-subtle); color:var(--ink) }
.crumb-jump-empty{ padding:12px 10px; font-size: var(--fs-caption); color:var(--ink-mute); text-align:center }

/* ============================================================ */
/*  共通コンポーネント — ページごとに padding/font-size を上書き可 */
/* ============================================================ */

/* JetBrains Mono の大文字小ラベル — セクション見出し上などで使う */
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption); letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-mute); font-weight:500;
}

/* 戻るリンク（ページ左上）。pages がページ固有 margin-bottom を上書き */
.back{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-caption); color:var(--ink-soft); font-weight:500;
  text-decoration:none;
  margin-bottom:24px;
  transition:color .12s, background .12s;
}
.back:hover{ color:var(--ink) }

/* セクション見出し（左にアイコン） */
.section-title{
  font-size: var(--fs-small); font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.section-title svg{ flex-shrink:0; color:var(--ink-mute); opacity:.85 }

/* プライマリボタン（accent 背景） */
.btn-primary{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff;
  padding:8px 16px;
  border:1px solid var(--accent);
  border-radius:6px;
  font-size: var(--fs-small); font-weight:500;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
.btn-primary:hover:not(:disabled){
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.btn-primary:disabled{
  background:var(--bg-subtle);
  color:var(--ink-soft);          /* ink-mute より濃く WCAG AA 確保 */
  border-color:var(--border-strong, var(--border));
  cursor:not-allowed;
  opacity:1;
}
/* API キー未登録時のロック表示（クリックで設定モーダルへ誘導） */
.btn-primary.btn-locked{
  background:var(--bg-subtle);
  color:var(--ink);                /* 押せると分かるよう本文色 */
  border:1px dashed var(--accent-border, var(--border-strong, var(--border)));
}
.btn-primary.btn-locked:hover:not(:disabled){
  background:var(--accent-soft);
  border-color:var(--accent);
}
.btn-primary.btn-locked [data-lucide]{ vertical-align:-2px; }

/* ゴーストボタン（白背景 + 細枠） */
.btn-ghost{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff;
  border:1px solid var(--border-strong);
  padding:8px 14px;
  border-radius:6px;
  font-size: var(--fs-small); color:var(--ink); font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-ghost svg{ flex-shrink:0; opacity:.7 }
.btn-ghost:hover:not(:disabled){ background:var(--bg-subtle) }
.btn-ghost:disabled{
  color:var(--ink-mute);
  border-color:var(--border);
  cursor:not-allowed;
}
/* Free ゲート: エクスポートを「うっすら表示＋鍵」で利用不可と示す（クリックで誘導）。
   disabled にはせず、クリックは拾えるようにしておく（results-render.js が誘導を出す）。*/
.btn-ghost.locked{ opacity:.55; }
.btn-ghost.locked::after{ content:"🔒"; font-size:10px; margin-left:2px; }
.btn-ghost.locked:hover{ background:var(--bg-subtle); opacity:.7; }

/* 危険操作の控えめなリンク（フッタ右寄せ等で使う） */
/* 削除など破壊的操作を置くページ最下部フッター。ワークスペース/ガイドライン/審査結果の
   削除導線を全ページ共通の見た目・位置に統一する（カード外・上ボーダー・右寄せ）。 */
.danger-footer{
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
  display:flex;
  justify-content:flex-end;
  gap:14px;
  align-items:center;
}
.danger-link{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none;
  padding:4px 8px;
  font-family:inherit;
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  cursor:pointer;
  border-radius:4px;
  transition:color .12s, background .12s;
}
.danger-link:hover{
  color:var(--danger);
  background:var(--danger-soft);
}

/* 中立的な操作の控えめなリンク（rename / dismiss など、danger-link と並べて使う） */
.ghost-link{
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:none;
  padding:4px 6px;
  font-family:inherit;
  font-size: var(--fs-caption); font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .12s;
}
.ghost-link:hover{ color:var(--accent); }
.ghost-link [data-lucide]{ vertical-align:-1px; }

/* ステータスバッジ — 合格/要修正/要差戻 など。BEM 風モディファイア */
.stamp{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:4px;
  font-size: var(--fs-caption); font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
  border:1px solid;
}
.stamp-ok    { color:var(--ok);       background:var(--ok-soft);     border-color:var(--ok-border) }
.stamp-warn  { color:var(--warn);     background:var(--warn-soft);   border-color:var(--warn-border) }
.stamp-danger{ color:var(--danger);   background:var(--danger-soft); border-color:var(--danger-border) }
.stamp-mute  { color:var(--ink-mute); background:var(--bg-subtle);   border-color:var(--border) }

/* プリセット重要度バッジ — register / guideline / audit / image で共通。
   register.css / guideline.css にあった同名 class をここに集約。
   theme トークンと色相をずらすため固定色（severity 系の意味色）を使う。 */
.preset-sev-badge{
  /* 違反一覧では .tag (12px) と並んで表示されるので、
     プロジェクト規約の最小 11px に揃える。padding も .tag に近づけて視覚整列。 */
  display:inline-flex; align-items:center;
  padding:1px 8px;
  border-radius:10px;
  font-size: var(--fs-micro); font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}
.preset-sev-criminal{
  color:#b42318;
  background:#fee4e2;
  border:1px solid #fda29b;
}
.preset-sev-industry{
  color:#854708;
  background:#fef0c7;
  border:1px solid #fec84b;
}
.preset-sev-required{
  /* 「業種必須」ラベル — register でしか出ないが preset-sev-badge ファミリで形を揃える */
  color:var(--ink-mute);
  background:var(--bg-subtle);
  border:1px solid var(--border);
}

/* ガイドラインドロワー「法令プリセット」タブ（drawer.js が sideContent に描画） */
.side-preset-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.side-preset-item{ background:var(--bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.side-preset-row{ width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; }
.side-preset-row:hover{ background:var(--bg-subtle); }
.side-preset-name{ flex:1; min-width:0; font-size: var(--fs-small); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-preset-chevron{ color:var(--ink-mute); flex:0 0 auto; transition:transform .15s; }
.side-preset-row[aria-expanded="true"] .side-preset-chevron{ transform:rotate(180deg); }
/* 展開詳細（presets-registry.renderDetailHtml が出力する pd-* を整形）*/
.side-preset-detail{ padding:2px 12px 12px; border-top:1px solid var(--border-soft); }
.side-preset-detail .pd-summary{ font-size: var(--fs-caption); color:var(--ink-soft); line-height:1.6; margin:8px 0; }
.side-preset-detail .pd-empty{ color:var(--ink-mute); }
.side-preset-detail .pd-sec{ margin-top:10px; }
.side-preset-detail .pd-sec h5{ font-size: var(--fs-caption); font-weight:600; color:var(--accent); margin:0 0 4px; }
.side-preset-detail .pd-sec ul{ margin:0; padding-left:16px; }
.side-preset-detail .pd-sec li{ font-size: var(--fs-caption); color:var(--ink-soft); line-height:1.6; margin:2px 0; }
.side-preset-detail .pd-ngok{ list-style:none; padding:0; }
.side-preset-detail .pd-ngok li{ padding:4px 0; border-bottom:1px dashed var(--border-soft); }
.side-preset-detail .pd-ng{ color:#b42318; font-weight:600; }
.side-preset-detail .pd-ok{ color:#067647; font-weight:600; }
.side-preset-detail .pd-arrow{ color:var(--ink-mute); margin:0 4px; }
.side-preset-detail .pd-reason{ display:block; color:var(--ink-mute); font-size: var(--fs-micro); margin-top:2px; }

/* ============================================================================
   Side drawer — 右端からスライドインする参照パネル。
   audit / image / workspace の「ガイドライン詳細を見る」と guideline の
   「プリセット詳細を見る」で共通利用。元は audit.css / workspace.css に
   重複定義していたものを集約。
   ============================================================================ */
.guideline-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:480px; max-width:100vw;
  background:var(--bg);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 24px rgba(15,23,42,.06);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,.0,.2,1);
  z-index:50;
  display:flex; flex-direction:column;
}
.guideline-drawer.open{ transform:translateX(0) }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
  flex-shrink:0;
}
.drawer-head-text{ min-width:0 }
.drawer-head-title{
  font-size: var(--fs-caption); color:var(--ink-mute);
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:2px;
}
.drawer-head-name{
  font-size: var(--fs-body); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.drawer-close{
  background:transparent; border:none;
  width:28px; height:28px;
  border-radius:6px;
  color:var(--ink-soft);
  cursor:pointer;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.drawer-close:hover{ background:var(--bg-hover); color:var(--ink) }

/* ===== App footer ===== */
.app-footer { margin-top: 48px; padding: 24px 0 32px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.app-footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.app-footer-links a { color: var(--text-muted, #64748b); font-size: var(--fs-caption); text-decoration: none; }
.app-footer-links a:hover { color: var(--accent, #115E59); }

/* ===== Lightbox（クリックで画像を原寸拡大）— lightbox.js が制御 ===== */
img.zoomable { cursor: zoom-in; }
body.lb-open { overflow: hidden; }   /* 背面スクロール抑止 */
.lb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.82);
  animation: adThumbReveal 160ms ease-out both;
}
.lb-overlay[hidden] { display: none; }
.lb-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 100%; max-height: 100%;
}
.lb-img {
  max-width: 92vw; max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  background: #0a0a0a; box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.lb-caption {
  color: #fff; opacity: .85; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-caption);
}
.lb-close {
  position: fixed; top: 16px; right: 20px;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,.3); }

/* ============================================================
   スマホ用「コンポーネント非表示」オーバーライド（ファイル末尾に集約）
   ------------------------------------------------------------
   対象のベース定義（.app-topnav-context / .input-mode-tabs 等）より後に
   置くことで、!important なしでカスケード順で確実に勝たせる。
   ============================================================ */
@media (max-width:680px){
  /* topnav パンくず（ワークスペース/ガイドライン切替）は幅不足で名前が潰れ機能
     しないため非表示。ロゴ＋アカウントのみにする。ナビは各ページの「← 戻る」
     リンクとダッシュボードで担保。 */
  .app-topnav-sep, .app-topnav-context{ display:none; }
  /* Google Drive 取込はモバイル最適化されておらず（Picker/ポップアップ）、OS の
     ファイル/写真選択の方が快適。Drive タブ・パネルを隠しネイティブ選択へ誘導。 */
  .input-mode-tabs{ display:none; }
  .input-mode-panel[data-mode="drive"]{ display:none; }
  /* 結果の Google Sheets 出力も OAuth ポップアップ依存でモバイルでは不具合が出るため
     非表示（インポート側 Drive と同方針）。audit/image/document 共通の id を一括で隠す。 */
  #exportSheetsBtn{ display:none; }
}