/* =====================================================================
   共通デザイン標準 v2.0 — Liquid Glass 共有スタイル
   全社の業務システムで共通利用する。標準ドキュメントとポータルが
   この同一ファイルを読み込む（単一の真実）。
   ※ 出典: docs/Design/assets/glass.css を自前同梱（CDN不使用・Fortigate配慮）。
     更新時は出典側と両方を合わせること。
   ===================================================================== */

:root{
  /* ---- 下地（不透明）------------------------------------------------ */
  --ink:#0b1424;            /* 本文。glass上でも 4.5:1 を満たす濃さ */
  --ink-2:#33405a;          /* 副見出し */
  --muted:#54617a;          /* 補助テキスト（下限・読める薄さ）*/
  --faint:#8b97ad;          /* 罫線/プレースホルダ専用・本文禁止 */

  /* ---- セマンティック4色（意味は v1.0 から固定）-------------------- */
  /* solid = 文字/アイコン用（濃く・AA確保） / vivid = ガラスのにじみ用 */
  --blue:#1f6bff;   --blue-ink:#0a4fd6;   --blue-vivid:#3d8bff;
  --green:#1aa34a;  --green-ink:#137a37;  --green-vivid:#34d06a;
  --red:#e0382b;    --red-ink:#c01d12;    --red-vivid:#ff5b50;
  --orange:#ef7d12; --orange-ink:#bd5a00; --orange-vivid:#ff9f2e;

  /* 同系の淡いガラスtint（半透明・backdropに重ねる）*/
  --tint-blue:rgba(63,139,255,0.22);
  --tint-green:rgba(52,208,106,0.22);
  --tint-red:rgba(255,91,80,0.22);
  --tint-orange:rgba(255,159,46,0.24);

  /* ---- ガラス材料（3段階）------------------------------------------
     thick  = 情報を載せる読める面（frosted・不透明寄り）
     regular= 浮遊する操作系・カード chrome
     thin   = ナビ/ツールバー等、コンテンツの上の薄い層            */
  --glass-thick-fill:rgba(255,255,255,0.62);
  --glass-thick-blur:saturate(180%) blur(26px);
  --glass-fill:rgba(255,255,255,0.34);
  --glass-blur:saturate(185%) blur(22px);
  --glass-thin-fill:rgba(255,255,255,0.18);
  --glass-thin-blur:saturate(180%) blur(16px);

  /* ガラスの縁・ハイライト・影（光は左上から）*/
  --glass-border:rgba(255,255,255,0.55);
  --glass-border-soft:rgba(255,255,255,0.35);
  --sheen:linear-gradient(135deg,rgba(255,255,255,0.65),rgba(255,255,255,0) 42%);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 0.5px rgba(255,255,255,0.25);
  --float:0 12px 40px -12px rgba(12,30,68,0.42), 0 4px 12px -6px rgba(12,30,68,0.30);
  --float-sm:0 6px 20px -8px rgba(12,30,68,0.38);

  /* ---- 形 ---------------------------------------------------------- */
  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* ---- 書体（v1.0 を踏襲）----------------------------------------- */
  --display:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --body:"Noto Sans JP","Hiragino Sans",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ---- ダークモード ------------------------------------------------- */
:root[data-theme="dark"]{
  --ink:#f2f5fb; --ink-2:#c7d0e2; --muted:#9aa6bf; --faint:#5e6a82;
  --blue-ink:#7fb0ff; --green-ink:#5fe08e; --red-ink:#ff8479; --orange-ink:#ffbf6b;
  --tint-blue:rgba(63,139,255,0.30);
  --tint-green:rgba(52,208,106,0.28);
  --tint-red:rgba(255,91,80,0.30);
  --tint-orange:rgba(255,159,46,0.30);
  --glass-thick-fill:rgba(28,38,60,0.60);
  --glass-fill:rgba(28,38,60,0.40);
  --glass-thin-fill:rgba(28,38,60,0.30);
  --glass-border:rgba(255,255,255,0.22);
  --glass-border-soft:rgba(255,255,255,0.12);
  --sheen:linear-gradient(135deg,rgba(255,255,255,0.28),rgba(255,255,255,0) 42%);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 0.5px rgba(255,255,255,0.08);
  --float:0 16px 48px -14px rgba(0,0,0,0.6), 0 4px 14px -6px rgba(0,0,0,0.5);
  --float-sm:0 8px 22px -10px rgba(0,0,0,0.55);
}

/* =====================================================================
   背景（ガラスを映す下地）— 青〜シアンのエネルギー系メッシュ光
   ===================================================================== */
.bg-scene{
  position:relative;isolation:isolate;
  background:
    radial-gradient(42% 50% at 12% 18%, rgba(63,139,255,0.55), transparent 70%),
    radial-gradient(38% 46% at 88% 10%, rgba(52,208,166,0.46), transparent 72%),
    radial-gradient(46% 52% at 82% 88%, rgba(120,110,255,0.42), transparent 72%),
    radial-gradient(40% 44% at 22% 92%, rgba(52,200,255,0.40), transparent 72%),
    linear-gradient(160deg,#eaf2ff 0%, #e7f6ff 46%, #eef0ff 100%);
  background-attachment:fixed;
}
:root[data-theme="dark"] .bg-scene{
  background:
    radial-gradient(42% 50% at 12% 18%, rgba(43,99,205,0.65), transparent 70%),
    radial-gradient(38% 46% at 88% 10%, rgba(22,120,120,0.55), transparent 72%),
    radial-gradient(46% 52% at 82% 88%, rgba(80,70,200,0.5), transparent 72%),
    radial-gradient(40% 44% at 22% 92%, rgba(20,120,170,0.5), transparent 72%),
    linear-gradient(160deg,#0a1020 0%, #0b1626 46%, #0e1024 100%);
  background-attachment:fixed;
}
/* やわらかく漂う光（reduced-motion で停止）*/
.bg-scene::after{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 30% at 30% 40%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(26% 26% at 70% 60%, rgba(255,255,255,0.32), transparent 70%);
  mix-blend-mode:screen;opacity:.7;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-3%, -2%,0) scale(1.05);}to{transform:translate3d(4%, 3%,0) scale(1.12);}}
@media (prefers-reduced-motion:reduce){.bg-scene::after{animation:none;}}

/* =====================================================================
   ガラス・プリミティブ
   ===================================================================== */
.glass, .glass-thick, .glass-thin{
  position:relative;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--float), var(--inner-hi);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  background:var(--glass-fill);
}
.glass-thick{
  background:var(--glass-thick-fill);
  -webkit-backdrop-filter:var(--glass-thick-blur);
  backdrop-filter:var(--glass-thick-blur);
  border-color:var(--glass-border);
}
.glass-thin{
  background:var(--glass-thin-fill);
  -webkit-backdrop-filter:var(--glass-thin-blur);
  backdrop-filter:var(--glass-thin-blur);
}
/* 上辺のスペキュラ（つや）。装飾なので pointer-events 無効 */
.glass::before, .glass-thick::before, .glass-thin::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--sheen);mix-blend-mode:screen;opacity:.9;
}
/* 角の小さな光点（任意で .lume を付ける）*/
.lume::after{
  content:"";position:absolute;top:0;left:14%;width:42%;height:42%;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 80% at 30% 0%, rgba(255,255,255,0.85), transparent 70%);
  filter:blur(2px);opacity:.7;
}

/* =====================================================================
   ボタン（ガラス）
   ===================================================================== */
.btn{
  font-family:var(--body);font-weight:700;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 22px;height:48px;font-size:16px;border-radius:var(--r-pill);
  border:1px solid var(--glass-border-soft);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, background .16s;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  position:relative;color:var(--ink);background:var(--glass-fill);
  box-shadow:var(--float-sm), var(--inner-hi);
}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--sheen);mix-blend-mode:screen;opacity:.8;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--float), var(--inner-hi);}
.btn:active{transform:translateY(0) scale(.985);}
.btn--md{height:40px;font-size:15px;padding:0 18px;}
.btn--sm{height:32px;font-size:13px;padding:0 14px;}
/* tinted glass（半透明の色ガラス）*/
.btn--primary{background:linear-gradient(var(--tint-blue),var(--tint-blue)), var(--glass-fill);
  border-color:rgba(63,139,255,0.5);color:var(--blue-ink);}
.btn--success{background:linear-gradient(var(--tint-green),var(--tint-green)), var(--glass-fill);
  border-color:rgba(52,208,106,0.5);color:var(--green-ink);}
.btn--danger{background:linear-gradient(var(--tint-red),var(--tint-red)), var(--glass-fill);
  border-color:rgba(255,91,80,0.5);color:var(--red-ink);}
/* solid（強い主操作はベタ塗りで最大コントラスト）*/
.btn--solid{background:var(--blue);color:#fff;border-color:transparent;}
.btn--solid::before{opacity:.5;}
.btn--solid:hover{background:var(--blue-ink);}

/* =====================================================================
   ステータスバッジ（色＋文字＋記号＝R1 を常に満たす）
   ===================================================================== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid var(--glass-border-soft);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.badge--blue{background:var(--tint-blue);color:var(--blue-ink);border-color:rgba(63,139,255,0.45);}
.badge--green{background:var(--tint-green);color:var(--green-ink);border-color:rgba(52,208,106,0.45);}
.badge--red{background:var(--tint-red);color:var(--red-ink);border-color:rgba(255,91,80,0.45);}
.badge--orange{background:var(--tint-orange);color:var(--orange-ink);border-color:rgba(255,159,46,0.5);}
.badge--muted{background:rgba(140,151,173,0.18);color:var(--muted);}

/* =====================================================================
   フォーム
   ===================================================================== */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field:last-child{margin-bottom:0;}
.field label{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--ink);}
.req{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--red-ink);background:var(--tint-red);padding:3px 9px;border-radius:var(--r-pill);}
.opt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--muted);background:rgba(140,151,173,0.18);padding:3px 9px;border-radius:var(--r-pill);}
.input{height:48px;border:1px solid var(--glass-border-soft);border-radius:var(--r-sm);
  padding:0 15px;font-family:var(--body);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 2px rgba(12,30,68,0.06);transition:.15s;}
:root[data-theme="dark"] .input{background:rgba(255,255,255,0.08);}
.input::placeholder{color:var(--faint);}
.input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px var(--tint-blue);}
.input.is-error{border-color:var(--red);box-shadow:0 0 0 4px var(--tint-red);}
.field .hint{font-size:13px;color:var(--muted);}
.field .err{font-size:13px;color:var(--red-ink);font-weight:600;display:flex;align-items:center;gap:6px;}

/* =====================================================================
   テーブル（厚いガラスの上＝読める面）
   ===================================================================== */
.tbl-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--glass-border);
  background:var(--glass-thick-fill);
  -webkit-backdrop-filter:var(--glass-thick-blur);backdrop-filter:var(--glass-thick-blur);
  box-shadow:var(--float), var(--inner-hi);}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
.tbl thead th{text-align:left;padding:0 16px;height:50px;font-weight:700;font-size:13px;
  color:var(--muted);border-bottom:1px solid var(--glass-border-soft);white-space:nowrap;
  background:rgba(255,255,255,0.25);}
:root[data-theme="dark"] .tbl thead th{background:rgba(255,255,255,0.05);}
.tbl thead th .sort{color:var(--faint);margin-left:4px;font-family:var(--mono);}
.tbl tbody td{height:50px;padding:0 16px;border-bottom:1px solid var(--glass-border-soft);color:var(--ink);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:rgba(255,255,255,0.3);}
:root[data-theme="dark"] .tbl tbody tr:hover{background:rgba(255,255,255,0.06);}
.tbl .mono{font-family:var(--mono);font-size:13px;}

/* =====================================================================
   小物
   ===================================================================== */
.mono{font-family:var(--mono);}
.kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:3px;
  color:var(--blue-ink);text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:26px;height:2px;background:var(--blue);border-radius:2px;}