@charset "UTF-8";
/* ==========================================================================
   BNI 静岡セントラル｜メンバーポータル  スタイルシート v2.0

   デザイン方針
   ------------------------------------------------------------------
   OKI コーポレートサイト（oki.com）の UI/UX を実測して設計基準を採った。
     ・角丸をほぼ使わない（実測：数千要素中 5px 指定が 3 箇所のみ）
     ・box-shadow を一切使わない（実測：ページ全体で 0 件）
       → 立体感ではなく「罫線」と「ベタ塗り面」で構造を見せる
     ・見出しは大きく細く、字間を広く（実測：55px / weight 300 / 1px）
     ・letter-spacing 1px が全体の基調（実測：636 要素）
     ・トランジションは 0.3s ease-in-out が支配的（実測：125 要素）
   アクセント色は OKI の赤 #cb1c1d ではなく、BNI ロゴから実測した
   #cf2030 を採用している。

   運用上の制約
   ------------------------------------------------------------------
   functions/_middleware.ts の CSP が
     default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'
   のため、Web フォント（Google Fonts 等）と外部画像は読み込めない。
     → 書体は OS 標準の日本語フォントスタックで構成
     → 画像は public/img/ に同梱（出典は img/CREDITS.md）
   CSP を緩めずにデザインを成立させることを優先している。

   目次
   ------------------------------------------------------------------
    1. デザイントークン
    2. リセットと基盤
    3. タイポグラフィ
    4. モーション定義
    5. アプリシェル（サイドバー／ヘッダー／メイン）
    6. ブランド（ロゴ）
    7. ナビゲーション
    8. ボタンとリンク
    9. ページバナー（.welcome）
   10. カードとグリッド
   11. 指標タイル（.metric）
   12. バッジとチップ
   13. リスト・行・テーブル
   14. ツールバーと検索
   15. ステータスタブ
   16. ワークフローカード
   17. 案内カード（.guide-card）
   18. フォームと編集パネル
   19. モーダル（スライドオーバー）
   20. トースト
   21. 認証画面（ログイン／初回設定）
   22. 空状態・補助
   23. レスポンシブ
   24. アクセシビリティと印刷
   ========================================================================== */


/* ==========================================================================
   1. デザイントークン
   ========================================================================== */

:root {
  /* --- ブランドカラー（BNI ロゴから実測した #cf2030 が基準） --- */
  --red:            #cf2030;
  --red-hover:      #a4101f;
  --red-deep:       #7e0d14;
  --red-tint:       #fdeff0;
  --red-line:       #f0c4c8;
  /* 暗い面に赤字を置くとき用。#cf2030 のままでは #1b1b1b 上で
     コントラスト比 3.2 しか出ず WCAG AA（4.5）に届かないため明度を上げる（実測 6.9） */
  --red-on-dark:    #ff7a86;

  /* --- 無彩色 --- */
  --ink:            #1b1b1b;   /* 本文。真っ黒にしないのが OKI の基調 */
  --ink-2:          #3d3d3d;
  --muted:          #6e6e6e;
  --muted-2:        #8b8b8b;
  --line:           #e3e3e3;
  --line-strong:    #c9c9c9;
  --canvas:         #f2f2f2;   /* 本文領域の下地 */
  --surface:        #ffffff;
  --surface-2:      #fafafa;

  /* --- 暗部（サイドバー・写真バナー） --- */
  --dark:           #141414;
  --dark-2:         #1f1f1f;
  --dark-3:         #2b2b2b;
  --on-dark:        #ffffff;
  --on-dark-muted:  #a8a8a8;

  /* --- 状態色 --- */
  --green:          #0f7a4a;
  --green-tint:     #e8f5ee;
  --amber:          #8f5300;
  --amber-tint:     #fdf1e0;
  --blue:           #15508f;
  --blue-tint:      #e9f0f9;

  /* --- 形状：角丸を持たないのが本デザインの芯 --- */
  --radius:         0;
  --radius-pill:    999px;      /* チップなど、意図して丸くする箇所だけ */
  --hairline:       1px solid var(--line);

  /* --- 字間 --- */
  --track:          .06em;
  --track-wide:     .16em;

  /* --- モーション --- */
  --ease:           cubic-bezier(.4, 0, .2, 1);
  --dur:            .3s;
  --dur-slow:       .5s;

  /* --- 余白（本文領域の左右） --- */
  --gutter:         40px;

  /* --- 同梱画像。差し替えはここだけ変えれば全画面に反映される --- */
  --img-hero:       url("/img/hero-meeting.jpg");
  --img-auth:       url("/img/auth-bg.jpg");
  --img-referral:   url("/img/tile-referral.jpg");
  --img-members:    url("/img/tile-members.jpg");
  --img-events:     url("/img/tile-events.jpg");
  --img-training:   url("/img/tile-training.jpg");

  /* --- 日本語 UI に耐える OS 標準フォントスタック --- */
  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Segoe UI", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}


/* ==========================================================================
   2. リセットと基盤
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: var(--track);
  font-feature-settings: "palt" 1;      /* 日本語の詰め組み */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* キーボード操作時だけ見えるフォーカスリング */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* 本文へスキップ（スクリーンリーダー・キーボード利用者向け） */
.skip-link {
  position: fixed;
  left: 0; top: -100px;
  z-index: 100;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }


/* ==========================================================================
   3. タイポグラフィ
   細く・大きく・字間を広く。これが OKI 系の「硬質さ」の正体。
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--track);
  line-height: 1.45;
}

h1 {
  font-size: 25px;
  font-weight: 400;      /* ページ名は細く大きく */
  letter-spacing: .04em;
}

h2 { font-size: 30px; font-weight: 300; letter-spacing: .04em; }
h3 { font-size: 18px; font-weight: 700; }
h4 { font-size: 15px; font-weight: 700; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-hover); }

.muted { color: var(--muted); }

/* 小見出しラベル。赤・極小・字間広め・大文字。強調の主役 */
.eyebrow,
.kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--red);
  text-transform: uppercase;
}
.kicker { font-size: 11px !important; margin: 0 0 6px !important; }

/* セクション見出し（app.js が .span12 > h2 として出力する） */
.span12 > h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: var(--track);
  margin: 34px 0 18px;
  padding-left: 14px;
  border-left: 4px solid var(--red);   /* 赤の縦罫で階層を明示 */
  line-height: 1.4;
}


/* ==========================================================================
   4. モーション定義
   OKI のスクロール連動フェードインに相当する演出を、
   JavaScript を足さずに CSS アニメーションの遅延指定だけで再現する。
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* カード類は描画順にずらして立ち上げる（最大 8 枚まで段差をつける） */
.card,
.item-card,
.workflow-card,
.guide-card,
.faq,
.workflow {
  animation: rise var(--dur-slow) var(--ease) both;
}
.content-list > :nth-child(1),  .grid > :nth-child(1)  { animation-delay: .00s; }
.content-list > :nth-child(2),  .grid > :nth-child(2)  { animation-delay: .05s; }
.content-list > :nth-child(3),  .grid > :nth-child(3)  { animation-delay: .10s; }
.content-list > :nth-child(4),  .grid > :nth-child(4)  { animation-delay: .15s; }
.content-list > :nth-child(5),  .grid > :nth-child(5)  { animation-delay: .20s; }
.content-list > :nth-child(6),  .grid > :nth-child(6)  { animation-delay: .25s; }
.content-list > :nth-child(7),  .grid > :nth-child(7)  { animation-delay: .30s; }
.content-list > :nth-child(n+8), .grid > :nth-child(n+8) { animation-delay: .35s; }


/* ==========================================================================
   5. アプリシェル
   ========================================================================== */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 264px 1fr;
  grid-template-rows: 84px 1fr;
}

/* --- サイドバー：暗色ベタ塗り。白い本文と面で対比させる --- */
aside {
  grid-row: 1 / 3;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
  background: var(--dark);
  color: var(--on-dark);
  border-right: 1px solid #000;
}

/* --- ヘッダー：白地・下端に細い罫。上端に赤のごく細いライン --- */
header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--red);   /* OKI のヘッダー赤ラインに相当 */
}

.head-title { min-width: 0; flex: 1; }
.head-title h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;   /* 見出しを隠す狭幅時でも右端に留める */
}

/* --- メイン --- */
main {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
  animation: fade var(--dur) var(--ease) both;
}


/* ==========================================================================
   6. ブランド（ロゴ）
   支給ロゴを左上に常設し、押すとダッシュボードへ戻る。
   暗色サイドバー上でも白背景ヘッダー上でも成立するよう透過処理済み。
   ========================================================================== */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 20px 24px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--dark-3);
  transition: background var(--dur) var(--ease);
}
.brand:hover { background: var(--dark-2); }

.brand-logo {
  width: 74px;
  height: auto;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand-logo { transform: translateX(2px); }

.brand-text { min-width: 0; }
.brand-text strong,
.brand-text small { display: block; }
.brand-text strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--on-dark);
  line-height: 1.3;
}
.brand-text small {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--on-dark-muted);
  text-transform: uppercase;
}

/* ヘッダー側のロゴ。狭い画面でサイドバーが隠れたときの受け皿 */
.brand--header {
  display: none;
  padding: 0;
  border: 0;
  background: none;
}
.brand--header:hover { background: none; }
.brand--header .brand-logo { width: 56px; }


/* ==========================================================================
   7. ナビゲーション
   ========================================================================== */

/* アイコン定義（portal.html の <symbol> 群）の置き場所。
   display:none にすると一部ブラウザで <use> の参照が解決されないため、
   サイズ 0 にして画面外へ退避させる */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

nav {
  display: grid;
  align-content: start;   /* 項目を上詰めにする。省くと余白が等分されて間延びする */
  gap: 1px;
  padding: 6px 0 20px;
  overflow-y: auto;
  flex: 1;
  /* 画面が低いと項目が収まらずスクロールするため、暗い面に馴染む細身にする */
  scrollbar-width: thin;
  scrollbar-color: #3f3f3f transparent;
}
nav::-webkit-scrollbar { width: 6px; }
nav::-webkit-scrollbar-track { background: transparent; }
nav::-webkit-scrollbar-thumb { background: #3f3f3f; }

/* --- グループ見出し ---
   「どこからどこまでが同じ役割か」を文字で示す。
   2 つめ以降は上に罫線を引いて、面としての切れ目もつける */
.nav-group {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 20px 22px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.4;
  color: #8a8a8a;
}
/* 見出しの頭に赤い小片を置く。暗い背景では罫線だけだと区切りが弱いため、
   色でも切れ目が分かるようにしている */
.nav-group::before {
  content: "";
  width: 9px;
  height: 2px;
  flex-shrink: 0;
  background: var(--red-on-dark);
}
.nav-group:not(:first-child) {
  margin-top: 12px;
  padding-top: 20px;
  /* var(--dark-3) では #141414 との比が 1.3 しかなく罫線が見えないため個別指定 */
  border-top: 1px solid #3f3f3f;
}

nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px 18px 12px 22px;
  min-height: 46px;
  color: #c6c6c6;
  font: inherit;
  font-size: 14.5px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* --- 項目のアイコン ---
   色は currentColor 任せ。文字色の変化にそのまま追従する */
.nav-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.nav-label {
  min-width: 0;
  transition: transform var(--dur) var(--ease);
}

/* 現在地／ホバーを示す赤い縦バー。左から伸びる */
nav button::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

/* 右端の山形。「押すと進む」ことを示す。
   絶対配置ではなく flex の最終要素として置き、文字に重ならないようにしている */
nav button::after {
  content: "";
  margin-left: auto;
  margin-right: 4px;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.6px solid var(--red-on-dark);
  border-bottom: 1.6px solid var(--red-on-dark);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), margin-right var(--dur) var(--ease);
}

nav button:hover,
nav button:focus-visible {
  color: #fff;
  background: var(--dark-2);
}
nav button:hover::before,
nav button:focus-visible::before { transform: scaleY(.5); }
nav button:hover .nav-icon,
nav button:hover .nav-label { transform: translateX(3px); }
nav button:hover::after,
nav button:focus-visible::after { opacity: 1; margin-right: 0; }

nav button.active {
  color: #fff;
  background: var(--dark-2);
  font-weight: 700;
}
nav button.active::before { transform: scaleY(1); }
/* 現在地はアイコンも赤で示す。細い線なので、暗所で沈まない明るい赤を使う */
nav button.active .nav-icon { stroke: var(--red-on-dark); stroke-width: 1.7; }
nav button.active::after { opacity: 1; margin-right: 0; }

/* --- アカウント表示 --- */
.account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 18px 20px 0;
  border-top: 1px solid var(--dark-3);
}
.account b,
.account small { display: block; min-width: 0; }
.account b {
  font-size: 14px;
  color: var(--on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account small {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: var(--track-wide);
  color: var(--on-dark-muted);
  text-transform: uppercase;
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  /* 角丸なしの正方形。ここも意図的に丸めない */
}

/* --- ハンバーガー（狭い画面のみ表示） --- */
#menu {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#menu:hover { border-color: var(--red); background: var(--red-tint); }

.menu-bars,
.menu-bars::before,
.menu-bars::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease);
}
.menu-bars { top: 50%; margin-top: -1px; }
.menu-bars::before { content: ""; top: -6px; }
.menu-bars::after  { content: ""; top: 6px; }


/* ==========================================================================
   8. ボタンとリンク
   ========================================================================== */

button { font: inherit; letter-spacing: var(--track); }

/* --- 主要操作：赤ベタ・角丸なし。ホバーで濃い赤が左から流れる ---

   演出は擬似要素の重ね合わせではなく背景グラデーションの伸縮で行う。
   .primary / .primary-link のラベルは要素で包まれていない素のテキスト
   （app.js が `<button class="primary">再読込</button>` のように書き出す）で、
   絶対配置の擬似要素はそのテキストより手前に描画されてしまい、
   ホバー中だけ文字が消える。背景レイヤーで動かせばこの問題が起きない。 */
.primary,
.button-link.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--red);
  background-image: linear-gradient(var(--red-hover), var(--red-hover));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  transition: background-size var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.primary:hover,
.button-link.primary-link:hover {
  color: #fff;
  border-color: var(--red-hover);
  background-size: 100% 100%;
}

.primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  background-size: 0 100%;
}

/* --- 副次操作：白地・細罫。ホバーで赤に反転 --- */
.button-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.button-link:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

/* --- ヘッダー右上の退出ボタン --- */
.icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.icon:hover { color: #fff; background: var(--ink); border-color: var(--ink); }

.icon i {
  position: absolute;
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
}


/* ==========================================================================
   9. ページバナー（.welcome）
   全ページ共通の見出し帯。写真を全幅で敷き、暗く落として文字を載せる。
   写真は body[data-page] で切り替える（app.js が現在ページを body に出す）。
   ========================================================================== */

.welcome {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 calc(var(--gutter) * -1) 36px;
  padding: 44px var(--gutter) 40px;
  min-height: 200px;
  background: var(--dark) var(--img-hero) center / cover no-repeat;
  color: var(--on-dark);
  overflow: hidden;
  animation: fade var(--dur-slow) var(--ease) both;
}

/* 写真の上に暗いグラデーションを重ね、文字の可読性を担保する */
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 15, 15, .94) 0%,
    rgba(15, 15, 15, .86) 38%,
    rgba(15, 15, 15, .55) 72%,
    rgba(15, 15, 15, .28) 100%
  );
}
/* 左端の赤い縦帯 */
.welcome::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--red);
}
.welcome > * { position: relative; z-index: 1; }

.welcome h2 {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 300;        /* 大きく細く。OKI の見出し設計に合わせる */
  letter-spacing: .04em;
  line-height: 1.35;
  color: #fff;
}
.welcome .muted {
  margin: 0;
  max-width: 62ch;
  color: #cfcfcf;
  font-size: 14.5px;
  line-height: 1.8;
}

/* バナー内の再読込ボタンは、写真の上で成立する白抜きにする。
   ホバーでは白が左から流れ、文字色が反転する */
.welcome .primary {
  flex-shrink: 0;
  background-color: transparent;
  background-image: linear-gradient(#fff, #fff);
  border-color: rgba(255, 255, 255, .55);
}
.welcome .primary:hover {
  color: var(--ink);
  border-color: #fff;
  background-size: 100% 100%;
}

.welcome .chips { align-self: flex-end; }

/* --- ページごとの写真差し替え --- */
body[data-view="dashboard"]    .welcome { background-image: var(--img-hero); }
body[data-view="members"]      .welcome { background-image: var(--img-members); }
body[data-view="events"]       .welcome { background-image: var(--img-events); }
body[data-view="training"]     .welcome { background-image: var(--img-training); }
body[data-view="applications"] .welcome { background-image: var(--img-referral); }
body[data-view="visits"]       .welcome { background-image: var(--img-members); }
body[data-view="documents"]    .welcome { background-image: var(--img-auth); }
body[data-view="chapters"]     .welcome { background-image: var(--img-hero); }
body[data-view="supplies"]     .welcome { background-image: var(--img-training); }

/* ダッシュボードは主役なので、より高く見せる */
body[data-view="dashboard"] .welcome {
  min-height: 280px;
  align-items: center;
}
body[data-view="dashboard"] .welcome h2 { font-size: 40px; }


/* ==========================================================================
   10. カードとグリッド
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.card,
.item-card,
.workflow-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ホバーで罫線が赤く変わり、わずかに持ち上がる。影は使わない */
.item-card:hover,
.workflow-card:hover { border-color: var(--red); transform: translateY(-2px); }

.span12 { grid-column: span 12; }
.span8  { grid-column: span 8; }
.span4  { grid-column: span 4; }

.content-list { display: grid; gap: 16px; }
.cards-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.item-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.item-card p { line-height: 1.85; }

.item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.item-head > div { min-width: 0; }

.compact { padding: 20px; }
.compact .chips { margin-top: 12px; }

.detail-text { font-size: 13.5px; }

.hint {
  margin: 12px 0 0 !important;
  font-size: 12.5px;
  color: var(--muted);
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* --- 定義リスト（プロパティ表示） --- */
.data-grid,
.all-props,
.overview-grid {
  display: grid;
  margin: 18px 0 0;
  gap: 0 28px;
}
.data-grid, .all-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-grid          { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.data-field {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.data-field dt {
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--muted);
  text-transform: uppercase;
}
.data-field dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.all-props .button-link {
  margin: 8px 8px 0 0;
  min-height: 40px;
  font-size: 13px;
}


/* ==========================================================================
   11. 指標タイル（.metric）
   数字を主役にする。ここが「強調すべきところ」の中心。
   ========================================================================== */

.metric {
  position: relative;
  grid-column: span 4;   /* ダッシュボードは指標 3 枚。12 カラムをちょうど埋める */
  padding: 26px 24px 24px;
  overflow: hidden;
}
/* 上端の赤ラインがホバーで左から伸びる */
.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.metric:hover { border-color: var(--line-strong); }
.metric:hover::before { transform: scaleX(1); }

.metric .label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--muted);
  text-transform: uppercase;
}
.metric .value {
  margin: 10px 0 0;
  font-size: 46px;
  font-weight: 300;         /* 大きく細く。細字だから数字が伸びやかに見える */
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.metric .delta {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green);
}


/* ==========================================================================
   12. バッジとチップ
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.6;
  white-space: nowrap;
}
.badge.green { background: var(--green-tint); border-color: #bfe3ce; color: var(--green); }
.badge.blue  { background: var(--blue-tint);  border-color: #c3d6ea; color: var(--blue); }
.badge.red   { background: var(--red-tint);   border-color: var(--red-line); color: var(--red); }

.chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  align-self: flex-start;
}
.chip {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
}
.chips .badge { display: inline-flex; }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}


/* ==========================================================================
   13. リスト・行・テーブル
   ========================================================================== */

.list { display: grid; }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; padding-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row b, .row small { display: block; }
.row small { margin-top: 3px; font-size: 13px; color: var(--muted); }

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
th {
  background: var(--surface-2);
  border-bottom: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover { background: var(--surface-2); }

/* --- 進捗バー --- */
.sync { display: flex; align-items: center; gap: 14px; }
.bar {
  flex: 1;
  height: 6px;
  background: var(--line);
  overflow: hidden;
}
.bar i { display: block; width: 76%; height: 100%; background: var(--red); }

/* --- 注記 --- */
.notice {
  padding: 16px 18px;
  background: var(--red-tint);
  border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  color: var(--red-deep);
  font-size: 14.5px;
}

/* --- 折りたたみ（FAQ・ワークフロー） --- */
.faq,
.workflow {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq:hover,
.workflow:hover { border-color: var(--line-strong); }

.faq summary,
.workflow > summary {
  padding: 20px 22px;
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
  transition: background var(--dur) var(--ease);
}
.faq summary:hover,
.workflow > summary:hover { background: var(--surface-2); }

.faq > div {
  padding: 0 22px 22px;
  white-space: pre-wrap;
  line-height: 1.9;
}

.workflow > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  list-style: none;
}
.workflow > summary::-webkit-details-marker { display: none; }
.workflow > summary span:first-child { min-width: 0; }
.workflow > summary b,
.workflow > summary small { display: block; }
.workflow > summary small { margin-top: 5px; font-size: 13px; color: var(--muted); }

.workflow-body {
  display: grid;
  gap: 20px;
  padding: 22px;
  border-top: 1px solid var(--line);
}
.workflow-body section h4 { margin: 0 0 14px; }


/* ==========================================================================
   14. ツールバーと検索
   ========================================================================== */

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.toolbar:focus-within { border-color: var(--red); }

.toolbar input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  letter-spacing: var(--track);
}
.toolbar input::placeholder { color: var(--muted-2); }

/* 件数表示は数字を読ませたいので等幅数字に */
[data-count] {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   15. ステータスタブ
   ========================================================================== */

.status-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.status-tabs button {
  position: relative;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
/* 選択中は下線が赤く伸びる。タブの当たり判定は 48px を確保 */
.status-tabs button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.status-tabs button:hover { color: var(--ink); }
.status-tabs button.active { color: var(--red); }
.status-tabs button.active::after { transform: scaleX(1); }


/* ==========================================================================
   16. ワークフローカード（新規申込・ゲスト見学）
   ========================================================================== */

.workflow-card { padding: 22px 24px; }

.workflow-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.workflow-main h3 {
  margin: 2px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}

/* 参加希望チャプター名は判断材料なので大きく赤で立てる */
.target-chapter {
  font-size: 26px !important;
  font-weight: 300 !important;
  color: var(--red);
  letter-spacing: .03em;
}

.open-detail { margin-top: 18px; }

.chapter-list .item-card { padding: 24px; }


/* ==========================================================================
   17. 案内カード（.guide-card）
   ========================================================================== */

.guide-card {
  position: relative;
  margin-bottom: 24px;
  padding: 26px 28px;
  background: var(--ink);
  border: 0;
  color: #fff;
  overflow: hidden;
}
.guide-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--red);
}
/* 暗い面の上なので、赤の小見出しは明るい赤に置き換える */
.guide-card .kicker { color: var(--red-on-dark); }
.guide-card h3 {
  margin: 4px 0 8px;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: .04em;
  color: #fff;
}
.guide-card .muted { color: #b4b4b4; }

.copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.copy-row input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #4a4a4a;
  background: #0d0d0d;
  color: #e8e8e8;
  font: inherit;
  font-size: 13.5px;
}
.copy-row .button-link {
  background: transparent;
  border-color: #5a5a5a;
  color: #fff;
}
.copy-row .button-link:hover { background: var(--red); border-color: var(--red); }

#copy-result {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #8fdcae;
}


/* ==========================================================================
   18. フォームと編集パネル
   ========================================================================== */

.form {
  display: grid;
  gap: 18px;
  max-width: 680px;
}
.form label,
.form-grid label,
.status-field {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.form input, .form select, .form textarea,
.form-grid input, .form-grid select,
.status-field select,
.auth input {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  letter-spacing: var(--track);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form textarea { min-height: 130px; resize: vertical; }

.form input:focus, .form select:focus, .form textarea:focus,
.form-grid input:focus, .form-grid select:focus,
.status-field select:focus,
.auth input:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: inset 0 -2px 0 var(--red);   /* 下端に赤。入力位置が一目で分かる */
}

/* --- 編集パネル：本体カードと明確に区別する --- */
.edit-panel {
  padding: 20px 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
}
.edit-panel h3 {
  margin: 0 0 16px;
  font-size: 15px;
  letter-spacing: var(--track);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}


.property-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.property-editor {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
}
.property-editor span { display: block; margin-bottom: 8px; }
.property-editor input:not([type="checkbox"]),
.property-editor textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.property-editor textarea { resize: vertical; min-height: 88px; }
.property-editor input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--red); }
.edit-record { margin-top: 14px; }

.status-field {
  max-width: 420px;
  margin-bottom: 18px;
}

/* --- 保存結果の表示 --- */
.save-state {
  display: inline-block;
  margin-left: 14px;
  font-size: 13.5px;
  font-weight: 700;
}
.save-state.success { color: var(--green); }
.save-state.error {
  display: block;
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  color: var(--red-deep);
}


/* ==========================================================================
   19. モーダル（右からのスライドオーバー）
   ========================================================================== */

.modal-open { overflow: hidden; }

#modal { position: fixed; inset: 0; z-index: 50; }
#modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .62);
  animation: fade var(--dur) var(--ease) both;
}

.modal-panel {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: min(780px, 96vw);
  padding: 28px 32px 40px;
  background: var(--surface);
  border-left: 4px solid var(--red);
  overflow-y: auto;
  animation: slide-in var(--dur) var(--ease) both;
}
@keyframes slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  margin: 4px 0 0;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: .04em;
}

.modal-close {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.modal-close:hover { color: #fff; background: var(--red); border-color: var(--red); }

.modal-panel .edit-panel { margin-bottom: 26px; }
.modal-panel > section > h3 {
  margin-top: 26px;
  padding-left: 12px;
  border-left: 3px solid var(--red);
  font-size: 15px;
}


/* ==========================================================================
   20. トースト
   ========================================================================== */

#toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  padding: 14px 20px;
  background: var(--ink);
  border-left: 4px solid var(--red);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
#toast.show { opacity: 1; transform: none; }


/* ==========================================================================
   21. 認証画面（ログイン／初回設定）
   左に写真、右にフォームの二分割。狭い画面では写真を細い帯にする。
   ========================================================================== */

body.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
}

/* --- 左：写真パネル --- */
.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 52px;
  background: var(--dark) var(--img-auth) center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(12, 12, 12, .90) 0%,
    rgba(12, 12, 12, .72) 45%,
    rgba(140, 20, 30, .48) 100%
  );
}
.auth-visual > * { position: relative; z-index: 1; }

.auth-visual .brand-logo { width: 108px; }

.auth-copy h2 {
  margin: 0 0 14px;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1.4;
  color: #fff;
}
.auth-copy p {
  max-width: 40ch;
  color: #c9c9c9;
  font-size: 14.5px;
  line-height: 1.9;
}
.auth-copy::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  background: var(--red);
  animation: sweep var(--dur-slow) var(--ease) both;
  transform-origin: left;
}

.auth-foot {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: #8f8f8f;
  text-transform: uppercase;
}

/* --- 右：フォーム --- */
.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.auth {
  width: min(420px, 100%);
  padding: 0;
  border: 0;
  background: none;
  animation: rise var(--dur-slow) var(--ease) both;
}
.auth h1 {
  margin: 6px 0 10px;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: .04em;
}
.auth > .muted { margin-bottom: 30px; font-size: 14px; }

.auth form { display: grid; gap: 18px; }
.auth label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.auth .primary { width: 100%; margin-top: 6px; }

.auth .error {
  min-height: 22px;
  margin: 0;
  color: var(--red);
  font-size: 13.5px;
  font-weight: 700;
}
.auth .error:not(:empty) {
  padding: 10px 14px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
}


.auth-help-links {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.auth-help-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.success-message { color: #067647; font-size: 13.5px; font-weight: 700; line-height: 1.7; }
.success-message:empty { display: none; }
.admin-auth-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 22px; }
.admin-auth-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-link-result { margin-top: 20px; padding: 18px; border: 1px solid var(--line); background: var(--surface-2); }
.admin-link-result label { display: block; font-size: 13px; font-weight: 700; }
.admin-link-result input { display: block; width: 100%; margin: 8px 0 12px; padding: 11px 12px; border: 1px solid var(--line-strong); font: inherit; }
@media (max-width: 760px) { .admin-auth-grid { grid-template-columns: 1fr; } .admin-auth-actions > * { width: 100%; justify-content: center; } .auth-help-links { flex-direction: column; } }


/* ==========================================================================
   22. 空状態・補助
   ========================================================================== */

.empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--muted);
}
.empty .glyph {
  display: block;
  margin-bottom: 12px;
  font-size: 40px;
  color: var(--line-strong);
}

.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quick button {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.quick button:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* 検索で絞り込まれた要素は必ず隠す（app.js の挙動に対応。上書き禁止） */
.searchable[hidden] { display: none !important; }


/* ==========================================================================
   23. レスポンシブ
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .metric { grid-column: span 6; }
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --gutter: 24px; }

  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 72px 1fr;
  }

  /* サイドバーは画面外に退避し、ハンバーガーで引き出す。
     影を使わない設計のため、引き出したときの境界は赤いエッジで示す */
  aside {
    position: fixed;
    z-index: 40;
    width: 280px;
    height: 100vh;
    border-right: 3px solid var(--red);
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
  }
  aside.open { transform: none; }

  header { gap: 14px; }
  #menu { display: block; }
  .brand--header { display: flex; }
  .head-title .eyebrow { display: none; }
  .head-title h1 { font-size: 19px; }
  .head-actions .primary { display: none; }

  .welcome {
    display: block;
    min-height: 0;
    padding: 32px var(--gutter);
  }
  .welcome h2 { font-size: 27px; }
  body[data-view="dashboard"] .welcome { min-height: 0; }
  body[data-view="dashboard"] .welcome h2 { font-size: 30px; }
  .welcome .primary { margin-top: 20px; }
  .welcome .chips { margin-top: 16px; }

  .span8, .span4 { grid-column: span 12; }
  .cards-grid { grid-template-columns: 1fr; }

  /* 認証画面は 1 カラムに。写真は上部の帯として残す */
  body.auth-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-visual { padding: 32px 24px; gap: 28px; }
  .auth-visual .brand-logo { width: 84px; }
  .auth-copy h2 { font-size: 26px; }
  .auth-copy p { display: none; }
  .auth-foot { display: none; }
  .auth-form-side { padding: 36px 24px 56px; }
}

@media (max-width: 700px) {
  .data-grid,
  .all-props,
  .overview-grid,
  .form-grid { grid-template-columns: 1fr; }

  .item-head,
  .workflow-main { flex-direction: column; gap: 12px; }

  .copy-row { display: grid; }
  .modal-panel { width: 100%; padding: 22px 20px 36px; }
  .save-state { display: block; margin: 10px 0 0; }
  .toolbar { padding: 6px 14px; }
  .grid { gap: 14px; }
  .quick { grid-template-columns: 1fr; }

  #toast { right: 16px; left: 16px; bottom: 16px; }
}

@media (max-width: 520px) {
  /* ヘッダーはロゴを優先する。ページ名は直下のバナー見出しが担うため、
     幅が足りないここでは省いて文字切れを起こさせない */
  .head-title { display: none; }

  .metric { grid-column: span 12; }
  .metric .value { font-size: 38px; }
  .card, .item-card, .workflow-card { padding: 18px; }
  .welcome h2 { font-size: 23px !important; }
  .actions { gap: 8px; }
  .actions .button-link { width: 100%; justify-content: center; }
}


/* ==========================================================================
   24. アクセシビリティと印刷
   ========================================================================== */

/* OS 側で「視差効果を減らす」が有効な場合、演出を止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高コントラスト設定では罫線を濃くする */
@media (prefers-contrast: more) {
  :root {
    --line: #9a9a9a;
    --line-strong: #6b6b6b;
    --muted: #4a4a4a;
  }
}

@media print {
  aside, header, .toolbar, .status-tabs, .head-actions, #toast, #modal { display: none !important; }
  .app { display: block; }
  main { max-width: none; padding: 0; }
  .welcome { background: none; color: var(--ink); padding: 0 0 20px; margin: 0; }
  .welcome::before, .welcome::after { display: none; }
  .welcome h2 { color: var(--ink); }
  .welcome .muted { color: var(--muted); }
  .card, .item-card, .workflow-card { break-inside: avoid; border-color: #999; }
  * { animation: none !important; }
}


/* v1.9.0: Notionページ追加・ファイルアップロード */
.add-record-button { box-shadow: 0 8px 20px rgba(207,32,48,.18); }
.create-panel { width: min(920px, calc(100vw - 32px)); }
#create-record-form { display: grid; gap: 24px; }
#create-record-form .property-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#create-record-form .property-editor { display: grid; gap: 7px; align-content: start; }
#create-record-form .property-editor span { font-size: 13px; font-weight: 700; }
#create-record-form input,#create-record-form select,#create-record-form textarea { width: 100%; }
#create-record-form textarea { resize: vertical; }
#create-record-form .file-editor { grid-column: 1/-1; padding: 14px; border: 1px dashed var(--line-strong); background: var(--surface-2); }
#create-record-form .checkbox-editor { grid-template-columns: 1fr auto; align-items: center; }
#create-record-form .checkbox-editor input { width: 22px; height: 22px; }
.universal-upload { padding: 18px; border: 1px dashed var(--line-strong); background: var(--surface-2); }
.universal-upload h3 { margin-top: 0; }
.universal-upload input[type=file] { padding: 12px; background: var(--surface); border: 1px solid var(--line); }
@media (max-width:760px){#create-record-form .property-form{grid-template-columns:1fr}.create-panel{width:calc(100vw - 16px)}}