/* =============================================================
   KDK 共通デザイン（portal / cockpit / invoice-portal）
   ここが共通CSSの唯一の正本。各テンプレへの転記は禁止。
   仕様の解説・早見表は docs/reference/リファレンス_UI設計.md
   （情報の流れは CSS → md の一方通行）。
   対象外: parts-ai（AIチャットUIで構造が特殊）
   配信: shared/ui.py の register_shared_static()（/static/kdk/）
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap');

/* ===== デザイントークン ===== */
:root {
  color-scheme: light;   /* ネイティブUI（select プルダウン・スクロールバー等）の配色基準 */
  --kdk-accent:    #378ADD;
  --kdk-positive:  #1D9E75;
  --kdk-negative:  #D85A30;
  --kdk-active:    #7A2525;
  --bg:            #f5f4f0;
  --surface:       #ffffff;
  --surface2:      #fafaf8;
  --border:        #e0dfd9;
  --border-light:  #f0efe9;
  --text:          #1a1a1a;
  --text-muted:    #666666;
  --text-dim:      #aaaaaa;
  --font-sans:  'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-scale: 1;
  --fs-xs:   calc(11px * var(--font-scale));
  --fs-sm:   calc(12px * var(--font-scale));
  --fs-base: calc(14px * var(--font-scale));
  --fs-md:   calc(16px * var(--font-scale));
  --fs-lg:   calc(18px * var(--font-scale));
  --fs-xl:   calc(22px * var(--font-scale));
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  /* ロール色（凡例は portal ユーザー管理 ページ） */
  --role-admin: #D4AF37; --role-exec: #8B5CF6; --role-acct: #378ADD;
  --role-staff: #1D9E75; --role-cust: #8A8A8A; --tester-ring: #E5484D;
}
[data-theme="dark"] {
  color-scheme: dark;   /* プルダウンの選択ハイライト等を暗色側で描かせる */
  --bg:           #1c1c1c;
  --surface:      #242424;
  --surface2:     #2c2c2c;
  --border:       #383838;
  --border-light: #303030;
  --text:         #cecece;
  --text-muted:   #888888;
  --text-dim:     #555555;
}

/* ===== リセット・ベース ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body { font-family: var(--font-sans); font-size: var(--fs-base); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }

/* =============================================================
   共通ヘッダー（中央タイトル＋本人ゾーン）
   ============================================================= */
.app-header { padding: 40px 20px 0; }
.portal-header { text-align: center; margin-bottom: 32px; }
.portal-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.portal-zone {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 8px;
  width: 100%; max-width: 92vw; margin: 0 auto 32px;
}
.zone-item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--text);
  text-decoration: none; transition: border-color 0.2s;
}
a.zone-item:hover { border-color: var(--kdk-active); }
.zone-link, .zone-logout { justify-content: center; font-weight: 500; }
.zone-account .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ロール色ドット（テスターは赤リング） */
.role-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--role-staff); }
.role-dot[data-role="管理者"] { background: var(--role-admin); }
.role-dot[data-role="経営"]   { background: var(--role-exec); }
.role-dot[data-role="経理"]   { background: var(--role-acct); }
.role-dot[data-role="社員"]   { background: var(--role-staff); }
.role-dot[data-role="得意先"] { background: var(--role-cust); }
.role-dot.tester { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--tester-ring); }

/* Logout アイコン（Lucide log-out・currentColor 追従） */
.logout-link, .zone-logout { display: inline-flex; align-items: center; gap: 6px; }
.logout-link::before, .zone-logout::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 大タイトルの左アイキャッチ（Lucide・currentColor 追従。Logout アイコンと同じ mask 方式・2026-08-10）
   使い方: .portal-logo に .ico-<name> を1つ足すとその名前のアイコンが左に出る。
   一覧・命名の対応表は docs/reference/リファレンス_UI設計.md §2。 */
.portal-logo::before {
  content: ""; width: 24px; height: 24px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--logo-icon) center / contain no-repeat;
          mask: var(--logo-icon) center / contain no-repeat;
}
.ico-arrow-up-down { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4' /%3E %3Cpath d='M17 20V4' /%3E %3Cpath d='m3 8 4-4 4 4' /%3E %3Cpath d='M7 4v16' /%3E%3C/svg%3E"); }
.ico-bar-chart-3 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E %3Cpath d='M18 17V9' /%3E %3Cpath d='M13 17V5' /%3E %3Cpath d='M8 17v-3' /%3E%3C/svg%3E"); }
.ico-building-2 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h4' /%3E %3Cpath d='M10 8h4' /%3E %3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3' /%3E %3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2' /%3E %3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' /%3E%3C/svg%3E"); }
.ico-calendar-days { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3' /%3E %3Cpath d='M16 2v3' /%3E %3Crect x='3' y='3' width='18' height='18' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3Cpath d='M8 13h.01' /%3E %3Cpath d='M12 13h.01' /%3E %3Cpath d='M16 13h.01' /%3E %3Cpath d='M8 17h.01' /%3E %3Cpath d='M12 17h.01' /%3E %3Cpath d='M16 17h.01' /%3E%3C/svg%3E"); }
.ico-download { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3' /%3E %3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E %3Cpath d='m7 10 5 5 5-5' /%3E%3C/svg%3E"); }
.ico-eye { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
.ico-factory { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16h.01' /%3E %3Cpath d='M16 16h.01' /%3E %3Cpath d='M3 19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.5a.5.5 0 0 0-.769-.422l-4.462 2.844A.5.5 0 0 1 15 10.5v-2a.5.5 0 0 0-.769-.422L9.77 10.922A.5.5 0 0 1 9 10.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z' /%3E %3Cpath d='M8 16h.01' /%3E%3C/svg%3E"); }
.ico-file-text { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E %3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E %3Cpath d='M10 9H8' /%3E %3Cpath d='M16 13H8' /%3E %3Cpath d='M16 17H8' /%3E%3C/svg%3E"); }
.ico-gauge { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4' /%3E %3Cpath d='M3.34 19a10 10 0 1 1 17.32 0' /%3E%3C/svg%3E"); }
.ico-history { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3Cpath d='M12 7v5l4 2' /%3E%3C/svg%3E"); }
.ico-home { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E%3C/svg%3E"); }
.ico-id-card { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10h2' /%3E %3Cpath d='M16 14h2' /%3E %3Cpath d='M6.17 15a3 3 0 0 1 5.66 0' /%3E %3Ccircle cx='9' cy='11' r='2' /%3E %3Crect x='2' y='5' width='20' height='14' rx='2' /%3E%3C/svg%3E"); }
.ico-key-round { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' /%3E %3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E"); }
.ico-layers { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z' /%3E %3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12' /%3E %3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17' /%3E%3C/svg%3E"); }
.ico-link-2 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2' /%3E %3Cpath d='M15 7h2a5 5 0 1 1 0 10h-2' /%3E %3Cline x1='8' x2='16' y1='12' y2='12' /%3E%3C/svg%3E"); }
.ico-notebook-pen { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4' /%3E %3Cpath d='M2 6h4' /%3E %3Cpath d='M2 10h4' /%3E %3Cpath d='M2 14h4' /%3E %3Cpath d='M2 18h4' /%3E %3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z' /%3E%3C/svg%3E"); }
.ico-package { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z' /%3E %3Cpath d='M12 22V12' /%3E %3Cpolyline points='3.29 7 12 12 20.71 7' /%3E %3Cpath d='m7.5 4.27 9 5.15' /%3E%3C/svg%3E"); }
.ico-pie-chart { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z' /%3E %3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83' /%3E%3C/svg%3E"); }
.ico-receipt { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V7' /%3E %3Cpath d='M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8' /%3E %3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z' /%3E%3C/svg%3E"); }
.ico-scale { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18' /%3E %3Cpath d='m19 8 3 8a5 5 0 0 1-6 0zV7' /%3E %3Cpath d='M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1' /%3E %3Cpath d='m5 8 3 8a5 5 0 0 1-6 0zV7' /%3E %3Cpath d='M7 21h10' /%3E%3C/svg%3E"); }
.ico-scroll-text { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5' /%3E %3Cpath d='M15 8h-5' /%3E %3Cpath d='M19 17V5a2 2 0 0 0-2-2H4' /%3E %3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3' /%3E%3C/svg%3E"); }
.ico-search { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34' /%3E %3Ccircle cx='11' cy='11' r='8' /%3E%3C/svg%3E"); }
.ico-server { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2' /%3E %3Crect width='20' height='8' x='2' y='14' rx='2' ry='2' /%3E %3Cline x1='6' x2='6.01' y1='6' y2='6' /%3E %3Cline x1='6' x2='6.01' y1='18' y2='18' /%3E%3C/svg%3E"); }
.ico-settings { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
.ico-table { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18' /%3E %3Crect width='18' height='18' x='3' y='3' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3Cpath d='M3 15h18' /%3E%3C/svg%3E"); }
.ico-trending-up { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6' /%3E %3Cpath d='m22 7-8.5 8.5-5-5L2 17' /%3E%3C/svg%3E"); }
.ico-truck { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' /%3E %3Cpath d='M15 18H9' /%3E %3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' /%3E %3Ccircle cx='17' cy='18' r='2' /%3E %3Ccircle cx='7' cy='18' r='2' /%3E%3C/svg%3E"); }
.ico-upload { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12' /%3E %3Cpath d='m17 8-5-5-5 5' /%3E %3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E%3C/svg%3E"); }
.ico-user-round { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5' /%3E %3Cpath d='M20 21a8 8 0 0 0-16 0' /%3E%3C/svg%3E"); }
.ico-tag { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' /%3E %3Ccircle cx='7.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E"); }
.ico-book-open { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v16' /%3E %3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z' /%3E%3C/svg%3E"); }
.ico-shopping-cart { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1' /%3E %3Ccircle cx='19' cy='21' r='1' /%3E %3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12' /%3E%3C/svg%3E"); }
.ico-clipboard-list { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='M12 11h4' /%3E %3Cpath d='M12 16h4' /%3E %3Cpath d='M8 11h.01' /%3E %3Cpath d='M8 16h.01' /%3E%3C/svg%3E"); }

/* =============================================================
   カードメニュー（portal 流。端数はダミーで埋めず左詰め）
   幅の既定は 880px（3列）。portal トップのみ 1180px（4列）に上書き。
   ============================================================= */
.portal-cards { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; width: 100%; max-width: 880px; }
.portal-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; width: 280px; display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: box-shadow 0.2s, border-color 0.2s; text-decoration: none; color: inherit;
}
a.portal-card:hover { border-color: var(--kdk-active); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
/* card-django（kikan行きカードの水色枠）は 2026-07-30 廃止。SSO 稼働で
   「押すと別ログインが要る」目印の役目が消えたため（Kinya さん指示） */
/* 移行アプリ（kikan/Django 版）のカードは背景を緑の薄塗りにする（移行アプリ全部の
   共通ルール・2026-08-13 Kinya さん決定＝案B。モック: portal/mocks/kikan_migrated_card_colors.html）。
   Flask 版との併用期間中の見分け。切替完了でカードごと消えるので、そのとき使い手が居なくなる */
.portal-card.card-migrated { background: rgba(29, 158, 117, 0.09); }
/* 切替が済んだアプリの旧 Flask 版を残すカード（2026-08-17・パーツ検索が第1号）。
   緑は「これから移る kikan 版」の意味なので、旧版に緑を使うと意味が反転して必ず誤読する。
   琥珀の薄塗りで別の意味だと分かるようにする。こちらも撤去でカードごと消える */
.portal-card.card-legacy { background: rgba(201, 148, 32, 0.10); }
.card-icon { font-size: 40px; margin-bottom: 16px; line-height: 1; }
.card-name { font-size: var(--fs-md); font-weight: 600; margin-bottom: 20px; }
.card-btn { width: 100%; padding: 10px 0; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; border: none; cursor: pointer; transition: opacity 0.15s; text-align: center; }
.card-btn.btn-primary { background: var(--kdk-accent); color: #fff; border-color: transparent; }
a.portal-card:hover .card-btn.btn-primary { opacity: 0.88; }

@media (max-width: 768px) {
  .app-header { padding: 24px 16px 0; }
}