/* 審査状況ダッシュボード（Web版）スタイル */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  overflow: hidden;
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  color: #eee;
}

.screen { width: 100vw; height: 100vh; }
.hidden { display: none !important; }

/* スクロールバーを全画面で非表示（モニター用・常に1画面表示）。overflow 挙動は各要素の既存指定を維持し、
   バーの「見た目」だけ消す（万一内容が溢れてもホイール等で到達でき内容は失われない）。 */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

#build-tag {
  position: fixed;
  top: 8px;
  right: 10px;               /* デプロイ日時を右上に表示 */
  font-size: 11px;
  color: #99a;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
/* DEV/LOCAL は右上に環境バッジがあるので、重ならないよう下へずらす */
body.has-env-badge #build-tag { top: 34px; }
/* 右上に「↩ ポータルへ戻る」がある時（dev/prod）は、環境バッジ/デプロイ表示をその下へずらす */
body.has-portal-btn .env-badge { top: 52px; }
body.has-portal-btn #build-tag { top: 52px; }        /* ポータルボタン(下端~46px)の下へ */
body.has-portal-btn.has-env-badge #build-tag { top: 80px; }

#server-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
  background: #b22222;
  z-index: 100;
}

/* ---------- 支店選択画面 ---------- */
#selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上下の中央寄せは justify-content: center ではなく、見出しの上とカードの下の auto マージンで行う。
     justify-content: center だと、内容が画面より長いとき（スマホ幅など）に上へはみ出した分へスクロールで届かない
     ＝見出しと最初のカードが見られなくなる。auto マージンは、収まるときは同じ中央寄せになり、収まらないときは 0 になって上から並ぶ */
  justify-content: flex-start;
  padding: 4vh 4vw;
  overflow-y: auto;
}
#selection-header { text-align: center; margin-top: auto; margin-bottom: 32px; }
#selection-header h1 { font-size: 30px; font-weight: bold; letter-spacing: 2px; }
#selection-sub { margin-top: 8px; opacity: 0.7; font-size: 15px; }

#branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 900px;
  margin-bottom: auto;   /* 見出しの margin-top: auto と対で、上下の中央に寄せる */
}

.branch-card {
  position: relative;
  padding: 24px 20px;
  background: #24243e;
  border: 1px solid #3a3a55;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}
.branch-card:hover { transform: translateY(-3px); border-color: #7098b8; background: #2b2b48; }
.branch-card .name { font-size: 20px; font-weight: bold; }
.branch-card .type {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  font-size: 12px;
  border-radius: 10px;
  background: #3a3a55;
  opacity: 0.9;
}
.branch-card .lock { position: absolute; top: 12px; right: 14px; font-size: 14px; opacity: 0.6; }
.branch-card.type-single .type { background: #4a6785; }
.branch-card.type-multi  .type { background: #3f7a5a; }
.branch-card.type-triple .type { background: #8a7a4a; }
.branch-card.type-honten .type { background: #7a4a6a; }
/* 本店（本社モード）カード: 4象限ビューアの入口として際立たせる */
.branch-card.corp-card {
  background: linear-gradient(135deg, #2b2440, #24243e);
  border-color: #6a5a8a;
}
.branch-card.corp-card:hover { border-color: #a487d6; background: linear-gradient(135deg, #322a4d, #2b2b48); }
.branch-card.corp-card .name { color: #e7dcff; }

/* ---------- 支店ホーム画面（GLASS × ELEGANT 融合：フロストガラス × 構造的上質） ---------- */
#home {
  --accent:   #5b86e5;
  --accent-2: #4f8ff7;
  --accent-d: #3f63c4;
  --glass:    rgba(255, 255, 255, 0.055);
  --glass-2:  rgba(255, 255, 255, 0.10);
  --border:   rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text:     #edeff5;
  --text-2:   #aab0c4;
  --text-3:   #808799;
  --ok:       #3ddc84;
  --ng:       #ff5c6c;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 28px;
  color: var(--text);
  /* より暗い下地（#home 専用）＋弱めた静的グロー */
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(79, 143, 247, 0.09), transparent 62%),
    radial-gradient(820px 520px at 88% 116%, rgba(72, 132, 168, 0.055), transparent 60%),
    radial-gradient(760px 480px at 8% 112%, rgba(63, 110, 90, 0.035), transparent 58%),
    #0d0d15;
}

/* アンビエント：背景オーロラ
   ・scale を使わず、大きくぼかした柔らかい色ブロブを translate + rotate で有機的に漂わせる
     （scale だと矩形層が拡大縮小して「四角が伸縮」して見えるため廃止）。
   ・position:fixed + inset:-30% + 強ぼかし(blur)で、層の矩形の縁が絶対に画面に入らない。
   ・fixed なので #home のスクロール可能領域には一切寄与しない（スクロールバーが変動しない）。 */
#home::before, #home::after {
  content: "";
  position: fixed; inset: -30%; z-index: 0; pointer-events: none;
  will-change: transform;
  filter: blur(66px);
}
#home::before {
  background:
    radial-gradient(40% 48% at 26% 30%, rgba(83, 150, 255, 0.34), transparent 72%),
    radial-gradient(36% 44% at 74% 64%, rgba(52, 196, 206, 0.27), transparent 72%);
  animation: aurora-a 13s ease-in-out infinite alternate;
}
#home::after {
  background:
    radial-gradient(38% 46% at 70% 24%, rgba(126, 108, 240, 0.28), transparent 72%),
    radial-gradient(34% 42% at 24% 78%, rgba(58, 214, 190, 0.25), transparent 72%);
  animation: aurora-b 17s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  0%   { transform: translate3d(-6%, -4%, 0) rotate(-11deg); }
  100% { transform: translate3d(7%, 6%, 0) rotate(11deg); }
}
@keyframes aurora-b {
  0%   { transform: translate3d(7%, 5%, 0) rotate(9deg); opacity: 0.82; }
  100% { transform: translate3d(-7%, -6%, 0) rotate(-9deg); opacity: 1; }
}

#home svg { display: block; }
#home .ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* 中央寄せシェル（縦バランス・スクロール安全） */
#home .home-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

/* エレガントなカスケード入場・区切り線の伸長・ヒーローの光沢スイープ */
@keyframes home-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes divider-grow { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes hero-sweep-once { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
#home .home-topbar     { animation: home-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; }
#home #home-header     { animation: home-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both; }
#home #home-actions    { animation: home-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.30s both; }
#home #home-files-card { animation: home-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.40s both; }
#home #home-notice     { animation: home-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.50s both; }

/* 上部バー：戻る導線 ＋ ブランド */
#home .home-topbar {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
#home .link-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--text-2); cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
#home .link-btn:hover {
  color: var(--text); background: var(--glass-2);
  border-color: var(--border-strong); transform: translateX(-2px);
}
#home .link-btn .ic { width: 16px; height: 16px; }

/* 「支店一覧に戻る」を画面右上に固定（「ポータルへ戻る」と同じ右上隅）。#home 直下（.home-shell の外）に
   置くことで、home-rise アニメの transform を持つ .home-topbar 等の外になり、fixed がビューポート基準になる。 */
#home #home-back { position: fixed; top: 10px; right: 12px; z-index: 6; margin: 0; }
/* 右上に戻る導線がある間、環境バッジ/デプロイ表記を下へずらして重なりを避ける（has-portal-btn と同方式） */
body.has-home-back .env-badge { top: 56px; }
body.has-home-back #build-tag { top: 56px; }         /* 「支店一覧に戻る」(下端~51px)の下へ＝重なり解消 */
body.has-home-back.has-env-badge #build-tag { top: 84px; }

/* アプリタイトル（中央の目立つ見出し・微光スイープ付き） */
#home .home-brand {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
  animation: home-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.10s both;
}
#home .home-brand h1 {
  font-size: clamp(22px, 2.7vw, 31px);
  font-weight: 800;
  letter-spacing: 3px;
  white-space: nowrap;
  color: #f4f7fe;                       /* 非対応ブラウザ用フォールバック */
  background: linear-gradient(100deg,
    #e4ecfb 0%, #e4ecfb 36%, #ffffff 45%, #93c1ff 50%, #ffffff 55%, #e4ecfb 64%, #e4ecfb 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 26px rgba(79, 143, 247, 0.40));
  animation: title-shimmer 4.2s ease-in-out 1s infinite;
}
/* 数秒おきに光がタイトルを横切る（常時・自動） */
@keyframes title-shimmer {
  0%   { background-position: 160% 0; }
  48%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* 支店アイデンティティ（見出し）＋ 淡いグロー */
#home #home-header { text-align: center; margin-bottom: 18px; }
#home .home-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 4px;
  color: var(--accent); opacity: 0.95; margin-bottom: 12px;
}
#home #home-branch {
  font-size: clamp(23px, 3vw, 30px); font-weight: 700; letter-spacing: 0.5px; line-height: 1.2;
  color: #e7ebf5; text-shadow: 0 2px 22px rgba(79, 143, 247, 0.22);
}
#home .home-divider {
  width: 150px; height: 2px; margin: 18px auto 32px; border-radius: 2px;
  transform-origin: center;
  background:
    linear-gradient(90deg, transparent, rgba(91, 134, 229, 0.45) 22%, rgba(91, 134, 229, 0.45) 78%, transparent),
    linear-gradient(90deg, transparent 36%, rgba(160, 200, 255, 0.95) 47%, #ffffff 50%, rgba(160, 200, 255, 0.95) 53%, transparent 64%);
  background-size: 100% 100%, 320% 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 160% 0;
  animation:
    divider-grow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s both,
    divider-run 2.8s ease-in-out 1s infinite;
}
/* アンダーバーを光が走る（常時・自動） */
@keyframes divider-run {
  0%   { background-position: 0 0, 160% 0; }
  55%  { background-position: 0 0, -60% 0; }
  100% { background-position: 0 0, -60% 0; }
}

/* アクション群 */
#home #home-actions { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }

/* 主要動作：グラス＋グラデーションのヒーロー（光沢スイープ付き） */
#home .big-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 24px 28px; text-align: left; color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 45%),
    linear-gradient(135deg, #4f8ff7 0%, #2E5BBA 100%);
  box-shadow:
    0 22px 46px -16px rgba(46, 91, 186, 0.80),
    0 6px 16px -8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -18px 34px rgba(15, 40, 90, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .28s ease, filter .22s ease;
}
#home .big-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 47%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.85s ease;
  animation: hero-sweep-once 1.15s ease 0.95s 1;   /* 入場後に一度だけ光沢が走る */
}
#home .big-btn:hover {
  transform: translateY(-3px); filter: brightness(1.05);
  box-shadow:
    0 30px 60px -16px rgba(46, 91, 186, 0.95),
    0 8px 20px -8px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -18px 34px rgba(15, 40, 90, 0.42);
}
#home .big-btn:hover::after { transform: translateX(120%); }
#home .big-btn:active { transform: translateY(-1px); }
#home .big-btn > * { position: relative; }
#home .big-btn .bb-icon {
  flex: none; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 15px; background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
#home .big-btn .bb-icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#home .big-btn .bb-label { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#home .big-btn .bb-title { font-size: clamp(19px, 2vw, 22px); font-weight: 800; letter-spacing: 0.5px; }
#home .big-btn .bb-sub { font-size: 13px; font-weight: 500; letter-spacing: 0.2px; color: rgba(255, 255, 255, 0.85); }
#home .big-btn .bb-go {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.14); transition: transform .22s ease, background .22s ease;
}
#home .big-btn .bb-go svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#home .big-btn:hover .bb-go { transform: translateX(3px); background: rgba(255, 255, 255, 0.22); }

/* 副動作：フロストガラス（主動作より抑制、SVGアイコン付き） */
#home #home-subactions { display: flex; gap: 12px; }
#home .sub-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 14px; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--text-2); cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#home .sub-btn:hover {
  color: #fff; transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(96, 150, 240, 0.22), rgba(96, 150, 240, 0.07));
  border-color: rgba(120, 168, 240, 0.50);
  box-shadow: 0 16px 30px -14px rgba(40, 80, 160, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#home .sub-btn:active { transform: translateY(0); }
#home .sub-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* AI分析ボタン: 金属光沢グリント（キラリ）。斜めの光の帯が数秒おきに一度だけ走る。
   点滅・パルスと違い短時間の走査のため常時表示モニターでも煩くならない（設計書6.1）。
   本社モード(#corp-ai・フェーズ2)と同一の演出。 */
@keyframes ai-glint {
  0%   { transform: translateX(-130%) skewX(-12deg); }
  16%  { transform: translateX(130%) skewX(-12deg); }
  100% { transform: translateX(130%) skewX(-12deg); }
}
#home #home-ai { position: relative; overflow: hidden; }
#home #home-ai::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0.60) 48%,
    rgba(255, 255, 255, 0.18) 54%, transparent 66%);
  transform: translateX(-130%) skewX(-12deg);
  animation: ai-glint 3.6s ease-in-out 0.8s infinite;
}
/* 注: このグリントは OS の「動きを減らす」設定（prefers-reduced-motion）でも止めない。
   AI分析ボタンを目立たせるのが明示要件であり、0.6秒/3.6秒周期の短い光の走査のみ
   （点滅・常時発光ではない）のため許容する。社内PCはアニメーション効果オフが多く、
   reduce で止めるとボタンが光らない環境が大半になってしまう（2026-08-13 実地で確認）。 */

/* 更新ボタンのアイコンは ::before（CSSマスク）で描画。JSが textContent を差し替えても消えない。 */
#home #home-refresh::before {
  content: "";
  width: 18px; height: 18px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ファイル読込状況カード：フロストガラスパネル */
#home #home-files-card {
  padding: 24px 24px 26px;
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  margin-bottom: 22px;
}
#home .card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--text-2);
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
#home .card-title .ct-icon { color: var(--accent); display: inline-flex; }
#home #home-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#home .file-box {
  position: relative; overflow: hidden;
  padding: 16px 16px 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.16));
  border: 1px solid var(--border); border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform .16s ease, border-color .2s ease;
}
#home .file-box:hover { transform: translateY(-2px); border-color: var(--border-strong); }
#home .file-box::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px;
}
#home .file-box.ok::before { background: var(--ok); }
#home .file-box.ng::before { background: var(--ng); }
#home .file-box .fb-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
#home .file-box .fb-icon {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; line-height: 1; border-radius: 50%;
}
#home .file-box.ok .fb-icon { color: #08301c; background: var(--ok); box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.16); }
#home .file-box.ng .fb-icon { color: #3a0a10; background: var(--ng); box-shadow: 0 0 0 4px rgba(255, 92, 108, 0.16); }
#home .file-box .fb-detail { font-size: 12.5px; line-height: 1.6; color: var(--text-3); word-break: break-word; }
#home .file-box.ng .fb-detail { color: rgba(255, 92, 108, 0.9); }

/* 補足注意文 */
#home #home-notice { text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }

/* レスポンシブ */
@media (max-width: 760px) {
  #home { padding: 28px 18px; }
  #home #home-branch { font-size: 26px; }
  #home #home-subactions { flex-direction: column; }
  #home #home-files { grid-template-columns: 1fr; }
  #home .big-btn { padding: 20px; gap: 14px; }
  #home .big-btn .bb-sub { display: none; }
  #home .home-brand h1 { font-size: 20px; letter-spacing: 1.5px; white-space: normal; }
}

/* モーション過敏設定への配慮：入場やホバーの「移動」は抑えるが、
   装飾的な光の演出（タイトルの微光／背景オーロラ／区切り線の光）は表示用途のため維持する。 */
@media (prefers-reduced-motion: reduce) {
  #home .home-topbar,
  #home .home-brand,
  #home #home-header,
  #home #home-actions,
  #home #home-files-card,
  #home #home-notice {
    animation: none;                 /* 入場カスケードの移動を無効化（内容は即表示） */
  }
  #home .home-divider { animation: divider-run 2.8s ease-in-out 1s infinite; } /* 伸長は省き、光走査は維持 */
  #home .big-btn { transition: none; }
  #home .big-btn::after { animation: none; }
  #home .sub-btn, #home .link-btn, #home .file-box { transition: none; }
}

/* ---------- 凡例モーダル ---------- */
.modal-box.legend-box {
  width: auto;
  max-width: 94vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 12px;
}
.legend-box h3 {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}
#legend-scroll {
  flex: 1 1 auto;
  overflow: auto;               /* 縦に長い場合はスクロール */
  border-radius: 8px;
  background: #fff;
}
#legend-img {
  display: block;
  width: min(860px, 92vw);      /* 大きく表示して文字を読みやすく */
  height: auto;
  background: #fff;
}
.legend-box .modal-actions { flex: 0 0 auto; margin-top: 12px; }

/* ---------- チャート表示画面 ---------- */
#viewer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#chart {
  width: 100%;            /* 横幅を最大限まで使う */
  height: auto;
  display: block;
}
#back-btn, #edit-btn {
  position: absolute;
  top: 12px;
  padding: 8px 16px;
  font-size: 14px;
  color: #eee;
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid #55557a;
  border-radius: 20px;
  cursor: pointer;
  z-index: 5;   /* stale バナー等より前面に置き、常にクリックできるようにする */
}
#back-btn { left: 12px; }
#edit-btn { left: 140px; background: rgba(74, 103, 133, 0.7); }
#back-btn:hover, #edit-btn:hover { background: rgba(60, 80, 110, 0.95); }

/* ===== 本社モード操作画面（デスクトップ版の本社モード画面を再現） ===== */
#corporate {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #1a1a2e;
}
#corp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #24243e;
  border-bottom: 1px solid #3a3a55;
  flex-wrap: wrap;
}
#corp-title { font-size: 20px; font-weight: bold; color: #eef; white-space: nowrap; }
#corp-screen-label { margin-left: 8px; font-size: 16px; color: #9fb6e0; }

/* 凡例バー */
#corp-legend {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; flex-wrap: wrap;
  font-size: 12px; color: #dde;
}
#corp-legend .cl-label { font-weight: bold; white-space: nowrap; }
#corp-legend .cl-swatches { display: inline-flex; gap: 2px; }
#corp-legend .cl-item { display: inline-flex; flex-direction: column; align-items: center; width: 34px; }
#corp-legend .cl-box { width: 30px; height: 12px; border: 1px solid rgba(0,0,0,0.25); }
#corp-legend .cl-day { font-size: 9px; color: #ccd; }
#corp-legend .cl-maker { width: 18px; height: 18px; border: 3px solid #2E6BE6; box-sizing: border-box; display: inline-block; }
#corp-legend .cl-diamond { color: #FF69B4; font-size: 16px; font-weight: bold; }

/* 操作ボタン */
#corp-controls { display: flex; gap: 8px; margin-left: auto; }
#corp-controls button {
  padding: 8px 14px; font-size: 14px; color: #eee;
  background: #1F6AA5; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
#corp-controls button:hover { background: #17537f; }
#corp-controls button:disabled { opacity: 0.6; cursor: default; }
#corp-back { background: #4a4a68; }
#corp-back:hover { background: #3a3a55; }

/* AI分析（フェーズ2・全社横断）: 列の先頭に配置（設計書10.2）。
   配色は他の操作ボタンと同じ（2026-08-13 ユーザー指定でオレンジ強調は廃止）。
   目立たせるのは金属光沢グリント（キラリ）のみで担う。
   ::after を使うため position/overflow だけ上書きする（背景色は基底ルールのまま）。 */
#corp-controls #corp-ai { position: relative; overflow: hidden; }
#corp-controls #corp-ai::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0.60) 48%,
    rgba(255, 255, 255, 0.18) 54%, transparent 66%);
  transform: translateX(-130%) skewX(-12deg);
  animation: ai-glint 3.6s ease-in-out 0.8s infinite;   /* キーフレームは #home 側で定義済み（グローバル） */
}

/* チャート領域 */
#corp-chart-wrap {
  position: relative;   /* 最大化ヒント(#corp-fs-hint)の位置基準 */
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #1a1a2e;
}
#corp-chart { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ステータスバー */
#corp-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 14px; background: #24243e; border-top: 1px solid #3a3a55;
  font-size: 12px; color: #bcc;
}
#corp-status #corp-build { color: #778; font-size: 10px; }

/* 古いデータ警告バナー */
#corp-banner {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; background: rgba(180, 60, 60, 0.92); color: #fff;
  border-radius: 6px; font-size: 13px; z-index: 6;
}

/* ===== 支店再選択モーダル ===== */
.modal-box.reselect-box { width: 720px; max-width: 94vw; }
.reselect-title { font-size: 20px; font-weight: bold; color: #eef; text-align: center; margin-bottom: 8px; }
.reselect-hint { font-size: 12px; color: #aab; text-align: center; margin: 0 0 14px; }
.reselect-screens { display: flex; gap: 20px; }
.reselect-col { flex: 1; background: #20203a; border: 1px solid #3a3a55; border-radius: 8px; padding: 12px; }
.reselect-col-title { font-size: 16px; font-weight: bold; color: #4A9EFF; margin-bottom: 8px; }
.reselect-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.reselect-pos { width: 44px; color: #cdd; font-size: 14px; }
.reselect-select { flex: 1; padding: 6px 8px; font-size: 14px; background: #2b2b48; color: #eee; border: 1px solid #55557a; border-radius: 6px; }
#reselect-error { color: #ff9a9a; font-size: 13px; text-align: center; margin-top: 10px; }

/* ===== グラフ ホバーツールチップ（デスクトップ版 status_display_app と同じ見た目） ===== */
#tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: #FFFFEE;
  color: #333333;
  border: 1px solid #b0ac8a;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: "Meiryo", "メイリオ", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 520px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#tooltip[hidden] { display: none; }

/* グラフ最大化ヒント（戻るボタンと同じ形式・上部中央。支店ビューアと本社モードで共用） */
#fs-hint,
#corp-fs-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  font-size: 14px;
  color: #1a1a2e;
  background: rgba(217, 130, 43, 0.95);   /* 不透明オレンジ＝暗/青い画面で最も目立つ */
  border: 1px solid #a5641a;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  z-index: 5;
  opacity: 1;
}
/* 表示直後にキビキビ点滅（1秒点灯・0.5秒消灯を10回＝総時間15s）→消灯で終了。
   点灯のたびに瞬時に現れ、強い青グロー＋1.08倍の拡大でしっかり目立たせる
   （暗い/青い画面で映えるオレンジのピル）。消灯は素早く切る（スナッピー）。 */
@keyframes fs-blink {
  /* 点灯（約1s）: 強い青グロー＋拡大でプロミネントに保持 */
  0%,   66.67% { opacity: 1; box-shadow: 0 0 38px 10px rgba(96, 165, 250, 1); border-color: #d6e6ff; transform: translateX(-50%) scale(1.08); }
  /* 素早く消灯（約0.5s） */
  72%,  100%   { opacity: 0; box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);       border-color: #a5641a; transform: translateX(-50%) scale(1); }
}
/* 1.5s×10回＝15s。各回スナッピーに点滅し、最後は消灯のまま終了（forwards）。 */
#fs-hint.fs-attention,
#corp-fs-hint.fs-attention { animation: fs-blink 1.5s ease 10 forwards; }
#fs-hint:hover,
#corp-fs-hint:hover { background: rgba(184, 106, 30, 0.98); }

/* ---------- 審査員メンバー編集ダイアログ（デスクトップ版の編集画面を再現） ---------- */
.modal-box.editor-box {
  width: 1040px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  text-align: left;
}
/* ベタ塗りボタンと区別するため、見出しは「青みの薄いフロスト地＋青文字」に */
.editor-titlebar {
  padding: 16px 14px 15px;
  text-align: center;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #9fc4ff;
  background: linear-gradient(180deg, rgba(79, 143, 247, 0.14), rgba(79, 143, 247, 0.04));
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1.5px 0 rgba(120, 168, 240, 0.45);
  text-shadow: 0 2px 20px rgba(79, 143, 247, 0.5);
}
#editor-subtitle { text-align: center; color: #7ea8d8; font-weight: bold; margin: 10px 0 14px; }
.editor-hint { margin-top: 12px; font-size: 13px; opacity: 0.75; text-align: center; line-height: 1.6; }

#editor-cols {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex: 1;
  min-height: 0;
}
.editor-col {
  flex: 1;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  background: #24243e;
  border: 1px solid #3a3a55;
  border-radius: 12px;
  overflow: hidden;
}
.editor-col-title {
  padding: 12px;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  background: #2f2f4a;
}
.editor-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  min-height: 120px;
  max-height: 48vh;
  /* メンバー編集画面の審査員リストだけ縦スクロールバーを表示する
     （モニター用に全体で scrollbar-width:none / ::-webkit-scrollbar{display:none} と
     隠している分を、この要素に限って上書き）。ホイールに加えバーのドラッグでもスクロール可。 */
  scrollbar-width: auto;                         /* 標準(モダンChrome/Firefox)：全体の none を上書き */
  scrollbar-color: #6c6c95 #24243e;              /* つまみ / 軌道の色 */
}
.editor-list::-webkit-scrollbar { width: 12px; display: block; }   /* 旧WebKit系フォールバック */
.editor-list::-webkit-scrollbar-track { background: #24243e; border-radius: 8px; }
.editor-list::-webkit-scrollbar-thumb {
  background: #6c6c95; border-radius: 8px; border: 2px solid #24243e;
}
.editor-list::-webkit-scrollbar-thumb:hover { background: #8484ad; }
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #1a1a2e;
  border-radius: 6px;
}
.member-row .mname { font-size: 16px; }
.member-row button {
  padding: 4px 13px;
  font-size: 12px;
  font-weight: 600;
  color: #ff9aa8;
  background: rgba(220, 76, 98, 0.14);
  border: 1px solid rgba(220, 76, 98, 0.42);
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.member-row button:hover {
  color: #fff;
  background: rgba(220, 76, 98, 0.88);
  border-color: rgba(220, 76, 98, 0.9);
}
.editor-add {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid #3a3a55;
  flex-wrap: wrap;
}
.editor-add input {
  width: 70px;
  padding: 8px;
  font-size: 14px;
  background: #1a1a2e;
  color: #eee;
  border: 1px solid #55557a;
  border-radius: 6px;
}
.editor-add button {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #4f8ff7 0%, #3568cc 100%);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(53, 104, 204, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.editor-add button:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 7px 16px -5px rgba(53, 104, 204, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.editor-add button:active { transform: translateY(0); }

#editor-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
#editor-actions button {
  padding: 12px 34px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
/* 保存＝鮮やかな青グラデーション（主役） */
#editor-save {
  color: #fff;
  background: linear-gradient(135deg, #5a97ff 0%, #2f62d6 100%);
  box-shadow: 0 8px 20px -6px rgba(47, 98, 214, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
#editor-save:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 28px -6px rgba(47, 98, 214, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#editor-save:active { transform: translateY(0); }
/* キャンセル＝控えめ（青みのフロスト、主役と競合させない） */
#editor-cancel {
  color: #cdd5e6;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#editor-cancel:hover {
  color: #fff;
  background: rgba(96, 150, 240, 0.18);
  box-shadow: inset 0 0 0 1px rgba(120, 168, 240, 0.5);
}
#editor-msg { margin-top: 14px; text-align: center; font-size: 15px; }
#editor-msg.error { color: #ff8181; }
#editor-msg.ok { color: #8fd18f; }

#banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  background: #b8860b;
  color: #fff;
}
#banner.stale-error { background: #b22222; }

/* ---------- モーダル共通（凡例・パスワード） ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal.hidden { display: none !important; }
.modal-box {
  width: 360px;
  max-width: 90vw;
  padding: 28px;
  background: #24243e;
  border: 1px solid #3a3a55;
  border-radius: 14px;
  text-align: center;
}
#pw-title { font-size: 20px; font-weight: bold; }
.modal-hint { margin: 10px 0 18px; font-size: 13px; opacity: 0.7; }
#pw-input {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  text-align: center;
  border: 1px solid #55557a;
  border-radius: 8px;
  background: #1a1a2e;
  color: #eee;
  letter-spacing: 3px;
}
#pw-error { margin-top: 12px; color: #ff8181; font-size: 14px; }
.modal-actions { margin-top: 20px; display: flex; gap: 12px; justify-content: center; }
.modal-actions button {
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
#pw-ok { background: #4a6785; color: #fff; }
#pw-cancel { background: #3a3a55; color: #ddd; }

/* ---------- AI分析モーダル（設計書6.2。デモ demo/ai-analysis-demo.html が見た目の正） ---------- */
.modal-box.ai-box {
  width: 680px; max-width: 94vw; max-height: 88vh;
  display: flex; flex-direction: column; text-align: left;
}
.ai-head { flex: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 12px; margin-bottom: 4px; }
.ai-head h3 { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.ai-head .ai-meta { margin-top: 6px; font-size: 12.5px; color: #99a3bb; }
#ai-scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 2px 2px; }
/* 冒頭の「スクロールバー全画面非表示」(* ルール) の例外。分析結果は長文になり、
   バーが無いと下に続きがあることに気づけないため、この領域だけ細いバーを常時表示する。 */
#ai-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.05);
  -ms-overflow-style: auto;
}
#ai-scroll::-webkit-scrollbar { width: 8px; height: 8px; display: block; }
#ai-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
#ai-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 4px; }
#ai-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }

#ai-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 46px 0 40px; }
#ai-loading.hidden { display: none; }
.ai-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: #4f8ff7;
  animation: ai-spin 0.9s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
#ai-loading p { text-align: center; font-size: 14px; line-height: 1.7; color: #cdd3e4; }
#ai-loading p span { font-size: 12px; color: #808799; }

#ai-error { padding: 36px 12px; text-align: center; font-size: 14px; line-height: 1.8; color: #ffb0ba; }

.ai-sec { margin: 14px 0 4px; }
.ai-sec h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: #dfe5f5; margin-bottom: 8px;
}
.ai-sec h4::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: #4f8ff7; }
.ai-sec p, .ai-sec li { font-size: 13.5px; line-height: 1.75; color: #b9c0d4; }
.ai-sec ol { padding-left: 22px; }
.ai-sec ol li { margin: 4px 0; }

.ai-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 6px 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13.5px; color: #cfd5e6;
}
.ai-alert .days { margin-left: auto; font-weight: 800; white-space: nowrap; }
.ai-badge {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
}
.ai-badge.high { background: rgba(255, 92, 108, 0.18); color: #ff8492; border: 1px solid rgba(255, 92, 108, 0.45); }
.ai-badge.warn { background: rgba(245, 200, 76, 0.14); color: #f5c84c; border: 1px solid rgba(245, 200, 76, 0.40); }
.ai-alert.high .days { color: #ff8492; }
.ai-alert.warn .days { color: #f5c84c; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ai-chip { padding: 3px 12px; border-radius: 999px; font-size: 12.5px;
  background: rgba(79, 143, 247, 0.14); border: 1px solid rgba(79, 143, 247, 0.35); color: #a9c6f5; }

.ai-disclaimer {
  flex: none; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11.5px; line-height: 1.6; color: #808799; text-align: center;
}
.ai-model { display: block; font-size: 10.5px; color: #667; margin-top: 4px; }

/* ---------- AI分析モーダルの起動・終了演出（ポータル「AI案内」案 c の移植・2026-09-08） ----------
   移植元: ehyoka-portal/frontend/chat.css の #chat-root[data-anim="c"]（2026-09-08 PROD・commit 4c1b786 時点＝
   「閉じる＝起動シーケンスの逆再生」「中身の点灯を点滅から滑らかなフェードに」を含む版）。配色は SDA のダーク基調
   （アクセント #4f8ff7）に置換。
   開く（約 1 秒）: 0.00s 中央に光線が点灯し横に伸びる → 0.10s 上下に開き走査線が縁へ走る／青い格子が一瞬浮かぶ
     → 0.34s 中身が滑らかに点灯・見出しが左から現れる → 0.48s 四隅にブラケットが飛び込む → 0.55s 縁が一度発光
   閉じる（逆再生・約 0.8 秒。JS は --ai-close-ms=900ms 後に hidden）: 0.00s 縁が発光しブラケットが四隅へ飛び去る・
     見出しが左へ消える → 0.04s 中身が滑らかに消灯 → 0.16s 格子が浮かぶ → 0.32s 走査線が上下の縁から中央へ集まり
     本体が中央の線へ閉じる → 0.65s 光線が縮んで消灯・暗幕が消える
   .modal.hidden が display:none のため、開く（表示に切り替わる）たびにキーフレームは自動で再生される。閉じるときは
   app.js closeAnalysis が .closing を付け、--ai-close-ms 経過後に hidden を付ける。擬似要素（走査線・格子・ブラケット）の
   基本スタイルは開閉共通に当て、アニメーションだけ .closing で上書きする。
   モーション低減設定（prefers-reduced-motion）でも止めない＝AI分析ボタンのグリントと同じ方針（上の注記参照）。
   計画・記録: docs/AI分析モーダル起動演出_計画.md */
#ai-modal { --ai-close-ms: 900; animation: ai-backdrop-in .25s ease-out backwards; }
#ai-modal.closing { animation: ai-backdrop-out .4s ease-in .45s both; }
@keyframes ai-backdrop-in { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.65); } }
@keyframes ai-backdrop-out { from { background: rgba(0, 0, 0, 0.65); } to { background: rgba(0, 0, 0, 0); } }

#ai-modal .ai-box {
  position: relative; overflow: hidden;
  animation: ai-boot-open .5s cubic-bezier(.2, .8, .2, 1) .1s backwards, ai-boot-ring .7s ease-out .55s backwards;
}
#ai-modal.closing .ai-box {
  animation: ai-boot-close .46s cubic-bezier(.6, 0, .4, 1) .32s both, ai-boot-ring .32s ease-out both;
}
@keyframes ai-boot-open {
  0%   { opacity: 1; clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes ai-boot-close {
  0%   { opacity: 1; clip-path: inset(0 0 0 0); }
  72%  { opacity: 1; clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0); }
  100% { opacity: 0; clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0); }
}
@keyframes ai-boot-ring {
  0%   { box-shadow: 0 0 0 0 rgba(79, 143, 247, 0); }
  30%  { box-shadow: 0 0 0 2px rgba(79, 143, 247, 0.65), 0 0 36px rgba(79, 143, 247, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(79, 143, 247, 0); }
}

/* 走査線: 開く＝中央で点灯して横に伸び上下の縁へ走る／閉じる＝縁から中央へ集まり縮んで消える */
#ai-modal .ai-box::before, #ai-modal .ai-box::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 3; opacity: 0;
  background: linear-gradient(90deg, rgba(79, 143, 247, 0), rgba(79, 143, 247, 0.95) 30%, rgba(200, 222, 255, 1) 50%,
                              rgba(79, 143, 247, 0.95) 70%, rgba(79, 143, 247, 0));
  box-shadow: 0 0 12px rgba(120, 170, 255, 0.95), 0 0 28px rgba(79, 143, 247, 0.6);
  transform-origin: 50% 50%;
}
#ai-modal .ai-box::before { animation: ai-scan-up .62s cubic-bezier(.2, .8, .2, 1) both; }
#ai-modal .ai-box::after  { animation: ai-scan-down .62s cubic-bezier(.2, .8, .2, 1) both; }
#ai-modal.closing .ai-box::before { animation: ai-unscan-top .46s cubic-bezier(.6, 0, .4, 1) .32s both; }
#ai-modal.closing .ai-box::after  { animation: ai-unscan-bottom .46s cubic-bezier(.6, 0, .4, 1) .32s both; }
@keyframes ai-scan-up      { 0% { top: 50%; transform: scaleX(.05); opacity: 1; } 16% { top: 50%; transform: scaleX(1); opacity: 1; } 88% { opacity: 1; } 100% { top: 0; transform: scaleX(1); opacity: 0; } }
@keyframes ai-scan-down    { 0% { top: 50%; transform: scaleX(.05); opacity: 1; } 16% { top: 50%; transform: scaleX(1); opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; transform: scaleX(1); opacity: 0; } }
@keyframes ai-unscan-top    { 0% { top: 0; transform: scaleX(1); opacity: 0; } 10% { opacity: 1; } 72% { top: 50%; transform: scaleX(1); opacity: 1; } 100% { top: 50%; transform: scaleX(.05); opacity: 0; } }
@keyframes ai-unscan-bottom { 0% { top: 100%; transform: scaleX(1); opacity: 0; } 10% { opacity: 1; } 72% { top: 50%; transform: scaleX(1); opacity: 1; } 100% { top: 50%; transform: scaleX(.05); opacity: 0; } }

/* 青い格子が開閉の途中に浮かんで消える（結果領域） */
#ai-modal #ai-scroll { position: relative; }
#ai-modal #ai-scroll::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(79, 143, 247, 0.28) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(79, 143, 247, 0.28) 0 1px, transparent 1px 18px);
  animation: ai-grid .75s ease-out .12s both;
}
#ai-modal.closing #ai-scroll::before { animation: ai-grid .42s ease-out .16s both; }
@keyframes ai-grid { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }

/* 中身: 開く＝走査線が通ったあと滑らかに点灯／閉じる＝滑らかに消灯
   （ポータル初版の steps(1,end) 点滅は各段が 2〜4 フレームしか続かず「ちらつき」に見えたため、ポータル側で
   2026-09-08 にフェードへ変更。SDA も同じにする） */
#ai-modal .ai-head, #ai-modal #ai-scroll, #ai-modal .ai-disclaimer, #ai-modal .modal-actions {
  animation: ai-boot-on .4s ease-out .34s backwards;
}
#ai-modal.closing .ai-head, #ai-modal.closing #ai-scroll, #ai-modal.closing .ai-disclaimer, #ai-modal.closing .modal-actions {
  animation: ai-shutdown .26s ease-in .04s both;
}
@keyframes ai-boot-on { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ai-shutdown { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 見出しは開く＝左から現れる／閉じる＝左へ消える */
#ai-modal #ai-title { animation: ai-wipe .4s cubic-bezier(.2, .8, .2, 1) .4s backwards; }
#ai-modal.closing #ai-title { animation: ai-wipe .22s cubic-bezier(.6, 0, .4, 1) reverse both; }
@keyframes ai-wipe { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* 四隅のブラケット: 開く＝外から飛び込んで固定され薄く残る／閉じる＝来た方向へ飛び去る（上 2 隅＝見出し・下 2 隅＝閉じるボタン行） */
#ai-modal .ai-head, #ai-modal .modal-actions { position: relative; }
#ai-modal .ai-head::before, #ai-modal .ai-head::after, #ai-modal .modal-actions::before, #ai-modal .modal-actions::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 4;
  border: 0 solid rgba(79, 143, 247, 0.9); opacity: 0;
  animation: ai-bracket .45s cubic-bezier(.2, .9, .2, 1) .48s both;
}
#ai-modal.closing .ai-head::before, #ai-modal.closing .ai-head::after, #ai-modal.closing .modal-actions::before, #ai-modal.closing .modal-actions::after {
  animation: ai-bracket-out .28s cubic-bezier(.5, 0, .8, .4) both;
}
#ai-modal .ai-head::before       { top: -14px; left: -14px;  border-top-width: 2px;    border-left-width: 2px;  --dx: -12px; --dy: -12px; }
#ai-modal .ai-head::after        { top: -14px; right: -14px; border-top-width: 2px;    border-right-width: 2px; --dx: 12px;  --dy: -12px; }
#ai-modal .modal-actions::before { bottom: -14px; left: -14px;  border-bottom-width: 2px; border-left-width: 2px;  --dx: -12px; --dy: 12px; }
#ai-modal .modal-actions::after  { bottom: -14px; right: -14px; border-bottom-width: 2px; border-right-width: 2px; --dx: 12px;  --dy: 12px; }
@keyframes ai-bracket     { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 60% { opacity: 1; transform: none; } 100% { opacity: .55; transform: none; } }
@keyframes ai-bracket-out { 0% { opacity: .55; transform: none; } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* ---------- 運用お知らせバナー（notice.json） ----------
   全画面共通・画面下部の帯。明るいクリーム色（ライトイエロー）＋濃色文字＝暗い
   アプリ画面の中で唯一の明色帯として最も目立つ（2026-08-13 配色比較の案Fを
   ユーザー採用。琥珀（暗色帯）から変更）。大きめの太字。
   表示時に下からスライドインする（一度だけ。点滅等の常時アニメはモニター用途のため
   付けない）。ユーザーが × を押すまで消えない（自動で消えるのは有効期限のみ）。 */
#notice-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  background: #fff3c4;
  border-top: 2px solid #f5c518;
  box-shadow: 0 -8px 26px -8px rgba(0, 0, 0, 0.85);
  font-size: 15.5px; font-weight: 600; letter-spacing: 0.3px;
  line-height: 1.6; color: #4a3a06;
  z-index: 4000;   /* モーダル(10)より前面。#message(3000) より上 */
  animation: notice-rise 0.45s ease;
}
@keyframes notice-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
#notice-bar.hidden { display: none !important; }
#notice-bar::before {
  content: "お知らせ"; flex: none;
  padding: 4px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: #fffbe8; background: #d9a406;
}
#notice-text { flex: 1 1 auto; min-width: 0; }
#notice-bar button {
  flex: none; font-family: inherit; cursor: pointer;
  border-radius: 9px; border: 1px solid rgba(217, 164, 6, 0.55);
  background: rgba(217, 164, 6, 0.12); color: #4a3a06;
}
#notice-bar button:hover { background: rgba(217, 164, 6, 0.24); }
#notice-reload {
  padding: 8px 20px; font-size: 14px; font-weight: 700;
  color: #fffbe8; background: #d9a406; border-color: #d9a406;
}
#notice-reload:hover { background: #c29205; }
#notice-reload.hidden { display: none !important; }
#notice-close { padding: 6px 13px; font-size: 17px; line-height: 1; }

/* ---------- メッセージ ---------- */
#message {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 28px;
  background: rgba(30, 30, 40, 0.9);
  border: 1px solid #555;
  border-radius: 10px;
  font-size: 18px;
  text-align: center;
  z-index: 3000;   /* 画面コンテンツ(.home-shell z-index:1)・モーダル(10)より前面。案内/トーストが背後に隠れないように */
}
/* データ更新の完了トースト（緑系）と長期化案内（琥珀系） */
#message.msg-success { border-color: #3fae6a; color: #d6f5e2; background: rgba(22, 42, 30, 0.94); }
#message.msg-waiting { border-color: #c9a24b; color: #f5ead0; background: rgba(42, 36, 22, 0.94); }
/* 反映待ち中のデータ更新ボタン：押下不可のまま「処理中」を明滅で示す */
@keyframes regen-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120, 168, 240, 0.0); }
  50%      { box-shadow: 0 0 16px 2px rgba(120, 168, 240, 0.45); }
}
.regen-waiting {
  cursor: default !important; opacity: 1 !important;
  color: #cfe0ff !important;
  border-color: rgba(120, 168, 240, 0.55) !important;
  background: linear-gradient(180deg, rgba(96, 150, 240, 0.22), rgba(96, 150, 240, 0.07)) !important;
  animation: regen-pulse 1.4s ease-in-out infinite;
}

/* ---------- 書き込み系ボタンの「準備中」表示（認証＋書き込みLambda実装までは無効化） ---------- */
.coming-soon { opacity: 0.5; cursor: not-allowed; }
.soon-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  background: #6b7280;
  border-radius: 8px;
  vertical-align: middle;
}

/* 環境バッジ（DEV/LOCAL を右上に表示。PROD は非表示） */
.env-badge {
  position: fixed;
  top: 6px;
  right: 8px;
  z-index: 9999;
  padding: 3px 12px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  color: #fff;
  background: #d9534f;      /* DEV = 赤 */
  border-radius: 4px;
  opacity: 0.85;
  pointer-events: none;     /* クリックを透過（下のUIを邪魔しない） */
  user-select: none;
}
.env-badge.env-local { background: #6c757d; }  /* LOCAL = グレー */

/* 支店パスワード入力の「パスワードを表示」トグル */
.pw-show {
  display: block;
  margin: 6px 2px 0;
  font-size: 13px;
  color: #cdd;
  cursor: pointer;
  user-select: none;
}
.pw-show input { vertical-align: middle; margin-right: 5px; cursor: pointer; }

/* ポータルへ戻るリンク（支店選択画面の右上隅・控えめ表示。dev/prod のみ・PORTAL_URL 設定時に表示） */
#portal-btn {
  position: fixed;
  top: 10px;
  right: 12px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #e6eaf5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  background: rgba(40, 40, 62, 0.7);
  border: 1px solid #44446a;
  border-radius: 8px;
  opacity: 1;
  cursor: pointer;
  z-index: 6;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
#portal-btn:hover { opacity: 1; background: rgba(60, 60, 92, 0.98); color: #fff; }

/* ===== 支店選択の「リッチ」背景デザイン（fancy モード） ===== */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* 背景のキャンバス（bg/registry.js が選んだ背景 1 つ分だけ差し込む）。全面に敷き、操作・スクロール・フォーカスは奪わない */
.sel-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }

/* fancy 時: 選択画面を暗色にし、ヘッダ/グリッドをキャンバスより前面に */
body.sel-fancy #selection { background: #0a0a16; }
body.sel-fancy #selection-header, body.sel-fancy #branch-grid { position: relative; z-index: 1; }
body.sel-fancy #branch-grid { perspective: 1100px; }
body.sel-fancy #selection-header h1 {
  background: linear-gradient(180deg, #ffffff, #b9c2ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 24px rgba(120,130,255,0.3)); }

/* fancy 時: プレミアムなガラス風カード（3D傾き＋光沢＋回転グラデ枠） */
body.sel-fancy .branch-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.028));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.14);
  transform-style: preserve-3d; isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.25s ease; }
body.sel-fancy .branch-card::before {   /* 回転グラデーション枠（シャインボーダー） */
  content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1.4px; z-index: -1;
  background: conic-gradient(from var(--angle), rgba(130,150,255,0.05), rgba(150,120,255,0.85), rgba(90,210,255,0.6), rgba(180,130,255,0.2), rgba(130,150,255,0.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0.4; animation: spinB 7s linear infinite; transition: opacity 0.3s; }
@keyframes spinB { to { --angle: 360deg; } }
body.sel-fancy .branch-card::after {   /* 光沢（マウス追従） */
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.22), transparent 42%); }
body.sel-fancy .branch-card:hover { border-color: rgba(150,170,255,0.55);
  box-shadow: 0 24px 58px rgba(50,60,140,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
body.sel-fancy .branch-card:hover::before { opacity: 1; }
body.sel-fancy .branch-card:hover::after { opacity: 1; }
body.sel-fancy .branch-card .name { transform: translateZ(24px); }
body.sel-fancy .branch-card .type { transform: translateZ(14px); }
body.sel-fancy .branch-card.corp-card { background: linear-gradient(160deg, rgba(150,110,220,0.22), rgba(255,255,255,0.03)); }

/* ===== 写真系の背景の上で文字を読みやすくする共通の仕立て（body.sel-veil）=====
   背景が veil を宣言したとき bg/registry.js が付ける（Orbital Dawn・Quantum Silk・Neural Earth が使う。星座は使わない）。重なり順は
   キャンバス(0) < 暗幕(1) < 見出し・カード(2)。暗幕の濃さは config.js の BG.<背景>.veil（0〜1）→ --sel-veil。
   ※ fancy の指定（z-index:1 など）より後ろに置くこと（同じ詳細度なので後勝ちで効かせている）。 */
/* Orbital Dawn・Quantum Silk・Neural Earth: 読込前・描画できない環境でも、背景と同じ暗い地の色でアプリを使える */
body.sel-bg-dawn #selection, body.sel-bg-silk #selection, body.sel-bg-earth #selection { background: #020611; }
body.sel-veil #selection::after {
  --v: var(--sel-veil, 1);
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 見出しとカードが載る中央を濃く・周辺を薄く＝光の流れを残しつつ文字の可読性を確保する */
  background:
    radial-gradient(62% 54% at 50% 53%,
      rgba(3, 11, 27, calc(0.90 * var(--v))), rgba(3, 11, 27, calc(0.60 * var(--v))) 60%, rgba(3, 11, 27, calc(0.16 * var(--v))) 100%),
    linear-gradient(180deg,
      rgba(3, 11, 27, calc(0.46 * var(--v))), rgba(3, 11, 27, calc(0.26 * var(--v))) 45%, rgba(3, 11, 27, calc(0.52 * var(--v)))); }
body.sel-veil #selection-header, body.sel-veil #branch-grid { z-index: 2; }

/* 見出しは背景の明るい帯に負けないよう影を強める */
body.sel-veil #selection-header h1 {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 28px rgba(8, 18, 52, 0.85)); }
body.sel-veil #selection-sub {
  opacity: 0.9; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(3, 11, 27, 0.9); }

/* カード面を濃くして、背景の光が透けても支店名が読めるようにする
   （ガラス質・3D傾き・シャインボーダーは fancy の指定をそのまま使う） */
body.sel-veil .branch-card {
  background: linear-gradient(160deg, rgba(12, 24, 48, 0.74), rgba(6, 14, 30, 0.62));
  border-color: rgba(170, 195, 255, 0.22);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
body.sel-veil .branch-card .name { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
body.sel-veil .branch-card.corp-card {
  background: linear-gradient(160deg, rgba(58, 38, 96, 0.72), rgba(10, 14, 32, 0.62)); }
body.sel-veil .branch-card:hover {
  background: linear-gradient(160deg, rgba(20, 36, 66, 0.80), rgba(8, 18, 38, 0.66)); }

/* 静止画で出しているとき（config.js の BG.respectReducedMotion=true かつ OS が動き低減）だけ、暗幕を少し濃くして
   読みやすさを優先する。クラスは背景モジュールが付ける（既定は常に動かすので、OS の設定だけでは濃くしない） */
body.sel-veil.sel-bg-still #selection::after { --v: min(1, calc(var(--sel-veil, 1) + 0.2)); }

/* ===== 提供表示（支店選択画面の左上。チェックリスト kakunin-shinsa-checklist の CreditBadge と同じ仕様）=====
   「Powered by AWS」「Developed by the DX Promotion Office」の 2 行を 1 文字ずつ打ち出し、打ち終わるとブランド青の下線が伸びる。
   文字だけ（AWS の公式ロゴ画像は使わない＝商標）。操作を受けない・選択できない・印刷に出ない。
   チェックリストは明るい地なので文字が濃い灰色だが、こちらは暗い地なので明るい色にしてある（大きさ・字間・青は同じ）。 */
#credit-badge { position: fixed; top: 16px; left: 20px; z-index: 5; pointer-events: none;
  user-select: none; -webkit-user-select: none; }
#credit-badge .credit-l1 { min-height: 1.1rem; font-size: 12px; line-height: 1.35; font-weight: 600; letter-spacing: 0.025em;
  color: #d5e2f3; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
#credit-badge .credit-l2 { min-height: 1rem; margin-top: 2px; font-size: 11px; line-height: 1.35; letter-spacing: 0.025em;
  color: #93a4bd; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
@keyframes credit-blink { 50% { opacity: 0; } }
@keyframes credit-grow { to { width: 100%; } }
/* 打鍵中の点滅カーソル（ブランド青＝チェックリストと同じ色） */
.credit-caret { display: inline-block; width: 7px; height: 12px; margin-left: 2px; vertical-align: -1px;
  background: #257cc2; animation: credit-blink 0.7s steps(1) infinite; }
.credit-caret-sm { height: 11px; }
/* 打ち終わったあとに伸びる下線 */
.credit-rule { height: 2px; width: 0; margin-top: 6px; border-radius: 2px; background: #257cc2;
  animation: credit-grow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@media print { #credit-badge { display: none; } }

/* DEV/local 用 背景切替ボタン: 提供表示の下に置く（左上は提供表示の場所。本番ではこのボタンは出ない） */
#bg-toggle { position: fixed; top: 70px; left: 18px; z-index: 7; padding: 6px 12px; font-size: 12px;
  color: #cdd; background: rgba(40, 40, 62, 0.9); border: 1px solid #55557a; border-radius: 8px; cursor: pointer; }
#bg-toggle:hover { background: rgba(60, 60, 92, 0.98); color: #fff; }

/* ===== 支店選択画面: スマホ幅・背の低い画面 =====
   PC とモニターの見え方は変えない（この条件に入らない）。狭い・低い画面では内容が 1 画面に収まりにくいので:
   - 左上の提供表示・切替ボタン・右上の「ポータルへ戻る」を、画面に固定せず内容と一緒にスクロールさせる
     （固定のままだと、スクロールしたカードの上に文字が重なる）。その分だけ見出しを下げて、上から並んだときに重ならないようにする
   - 背景のキャンバスと暗幕は画面に固定する（#selection を位置の基準にするので、そのままだと内容と一緒に流れてしまう）
   - 見出しを 1 行に収め、カードを 2 列（横向きのスマホは 4 列）にして、8 支店が 1 画面で見渡せるようにする */
@media (max-width: 760px), (max-height: 560px) {
  #selection { position: relative; padding: 84px 16px 24px; }
  body.has-bg-toggle #selection { padding-top: 120px; }
  .sel-bg-canvas, body.sel-veil #selection::after { position: fixed; }
  #credit-badge, #bg-toggle, #portal-btn { position: absolute; }
  #credit-badge { left: 16px; }
  #bg-toggle { left: 14px; }
  #selection-header { margin-bottom: 22px; }
  #selection-header h1 { font-size: 22px; letter-spacing: 1px; }
  #selection-sub { font-size: 14px; }
}
@media (max-width: 560px) {
  /* 幅が狭いと、左上の提供表示の 2 行目と右上の「ポータルへ戻る」が横でぶつかるので、両方を少し小さくする */
  #credit-badge { left: 12px; }
  #credit-badge .credit-l2 { font-size: 10px; }
  #bg-toggle { left: 10px; }
  #portal-btn { right: 10px; padding: 5px 10px; font-size: 12px; }
  #branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .branch-card { padding: 18px 8px; }
  .branch-card .name { font-size: 17px; }
  .branch-card .lock { top: 8px; right: 9px; font-size: 12px; }
}
@media (max-width: 359px) {   /* ごく狭い画面（幅 320px 級） */
  #credit-badge .credit-l2 { font-size: 9px; letter-spacing: 0; }
  #portal-btn { padding: 5px 8px; font-size: 11px; }
}
@media (max-height: 560px) and (min-width: 640px) {
  #branch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .branch-card { padding: 16px 8px; }
  .branch-card .name { font-size: 17px; }
}
/* スマホのブラウザは 100vh がアドレスバーの分だけ長く、最後のカードが画面の下に隠れることがある。使えるブラウザでは実際に見えている高さに合わせる */
@supports (height: 100dvh) { #selection { height: 100dvh; } }