* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --green: #0F6B63;
  --green-dark: #0C564F;
  --green-light: #E6F0EF;
  --navy: #0f1e35;
  --bg: #f2f3f7;
  --white: #ffffff;
  --red: #e53935;
  --border: #e4e8f0;
  --text: #1a2f4a;
  --text-mid: #4a6080;
  --text-light: #9aa5b8;
  /* ========================================================================
     EdgeOps Design System v1.12 — Design Tokens
     判定: EO-DEC-0116 / EO-DEC-0117
     Step 1: 定義のみ。この時点ではどこからも参照しない（見た目は変わらない）
     ======================================================================== */

  /* --- Brand / Accent ---------------------------------------------------- */
  --eo-accent:            #0F6B63;
  --eo-accent-hover:      #0C564F;
  --eo-accent-weak:       #E6F0EF;

  /* --- Header ------------------------------------------------------------ */
  --eo-header-bg:         #1B2A3A;
  --eo-header-fg:         #FFFFFF;

  /* --- Priority（人間が送った投稿にのみ使用） ------------------------------ */
  /* DB列 priority の値（urgent / normal / info）は変更しない */
  --eo-priority-urgent:   #C62828;
  --eo-priority-caution:  #B7791F;
  --eo-priority-notice:   #2E7D32;
  --eo-priority-facility: #6A1B9A;                                    /* [EO-DEC-0287] */

  /* --- System notice（種別3色を使わない。グレーの沈んだ面） ---------------- */
  --eo-system-bg:         #EDEDEA;
  --eo-system-fg:         #55555A;
  --eo-system-border:     #DFE3E8;

  /* --- Surface / Text ---------------------------------------------------- */
  --eo-surface:           #FFFFFF;
  --eo-surface-sunken:    #F5F6F8;
  --eo-surface-dark:      #1E2A2A;
  --eo-border:            #ECECEA;
  --eo-text:              #1C1C1E;
  --eo-text-muted:        #6E6E73;
  --eo-text-disabled:     #A5ADB6;

  /* --- Radius（全要素9pxで統一） ------------------------------------------ */
  --eo-radius:            9px;

  /* --- Priority bar（左端3px縦帯） ---------------------------------------- */
  --eo-bar-width:         3px;

  /* --- Shadow（極薄1段のみ） ---------------------------------------------- */
  --eo-shadow:            0 1px 2px rgba(28, 28, 30, 0.06);

  /* --- Typography（明朝は禁止） ------------------------------------------- */
  --eo-font:              'Noto Sans JP', -apple-system, BlinkMacSystemFont,
                          'Helvetica Neue', Arial, sans-serif;
  --eo-font-mono:         ui-monospace, 'SF Mono', monospace;
  --eo-font-size-base:    16px;

  /* --- Spacing ----------------------------------------------------------- */
  --eo-space-1:           4px;
  --eo-space-2:           8px;
  --eo-space-3:           12px;
  --eo-space-4:           16px;
  --eo-space-5:           24px;
  --eo-space-6:           32px;

  /* --- Motion ------------------------------------------------------------ */
  --eo-motion-fast:       120ms;
  --eo-motion-base:       200ms;
  --eo-ease:              cubic-bezier(0, 0, 0.2, 1);
}

body {
  font-family: var(--eo-font);
  background: var(--bg);
  color: var(--text);
  position: fixed;               /* body全体を固定（iOS/Android両方で画面の引きずりを止める） */
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);   /* 幅430pxを画面中央に維持（PC等の広い画面向け） */
  width: 100%;
  max-width: 430px;
  overflow: hidden;              /* body自体はスクロールさせない（スクロールは.contentが担う） */
  overscroll-behavior-y: contain;
}
html {
  height: 100%;
  overflow: hidden;              /* ルート自体をスクロールさせない（Android：画面全体の引きずり防止） */
  overscroll-behavior-y: contain;
}

.screen { display: none; flex-direction: column; height: 100%; }  /* 親body(top:0;bottom:0で実表示領域に固定)に合わせる。100vhはiOSでアドレスバー込みの過大値になり下端(送信ボタン)がはみ出すため使わない */
.screen.active { display: flex; }

/* ── ヘッダー ── */
.header {
  background: var(--eo-header-bg);
  color: var(--eo-header-fg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}


.header-title { color: white; font-size: 16px; font-weight: 700; flex: 1; }
.header-sub { color: rgba(255,255,255,0.75); font-size: 11px; }

.back-btn {
  color: white; font-size: 24px; cursor: pointer;
  width: 32px; display: flex; align-items: center; justify-content: center;
}

/* ── ヘッダーアイコンボタン ──
   Design System v1.13: 丸の囲みは持たない。アイコンのみを並べる。
   Material Symbols Outlined 準拠のインラインSVG（CDN・npm不使用） */
.header-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eo-radius);
  background: transparent;
  cursor: pointer;
  transition: opacity var(--eo-motion-fast) var(--eo-ease);
  position: relative;
  opacity: 0.9;
}
.header-icon-btn:active { opacity: 0.55; }

.header-icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--eo-header-fg);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--eo-radius);
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

.content {
  flex: 1;
  padding: 16px;
  /* iOS下端のホームバー（セーフエリア）分だけ下パディングを足す。
     最後の要素（送信ボタン等）がホームバー裏に隠れてスクロールしても
     届かない問題を解消。env は非対応環境・Androidでは 0 として扱われるため
     他OS・他画面に影響しない。 */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;        /* 上下端を超えた引っ張りを親へ伝えない（両OS） */
  -webkit-overflow-scrolling: touch;   /* iOS：慣性スクロールと上下のバウンス（Androidにこの挙動は存在しない） */
}

.card {
  background: var(--white);
  border-radius: var(--eo-radius);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 12px;
}

/* ── ボタン ── */
.btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--eo-radius);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { opacity: 0.8; }
.btn-primary { background: var(--eo-header-bg); color: white; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--red); color: white; }

/* ── 新規メッセージ送信ボタン（下部固定） ── */
.new-msg-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--eo-header-bg);
  color: white;
  border: none;
  border-radius: var(--eo-radius);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(28, 28, 30, 0.18);
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.new-msg-btn:active {
  transform: translateX(-50%) scale(0.95);
  box-shadow: 0 1px 3px rgba(28, 28, 30, 0.14);
}
.new-msg-btn svg {
  width: 18px; height: 18px;
  stroke: white; fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 入力フォーム ── */
.form-group { margin-bottom: 16px; }
.form-label {
  font-size: 12px; font-weight: 700; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
  display: block;
}
.form-input, .form-textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;   /* [EO-DEC-0180] iPadのはみ出し是正 */
  border: 1.5px solid var(--border); border-radius: var(--eo-radius);
  font-size: 15px; font-family: inherit; color: var(--text);
  background: white; outline: none;
  transition: border-color 0.15s;
}
.form-input:focus, .form-textarea:focus { border-color: var(--green); }
.form-textarea { resize: none; min-height: 100px; line-height: 1.6; }

/* ── 連絡メッセージ一覧（連続リスト） ── */
.eo-msg-list { background: var(--eo-surface); }

.eo-msg {
  padding: 14px 16px;                    /* 【条件9】1pxも縮小しない */
  border-bottom: 1px solid var(--eo-border);
  position: relative;
  cursor: pointer;
}
.eo-msg::before {                        /* 【第116回⑤】左端3px縦帯 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--eo-bar-width);
}
.eo-msg--urgent::before  { background: var(--eo-priority-urgent); }
.eo-msg--caution::before { background: var(--eo-priority-caution); }
.eo-msg--notice::before  { background: var(--eo-priority-notice); }
.eo-msg--facility::before { background: var(--eo-priority-facility); }        /* [EO-DEC-0287] */

.eo-msg__text {                          /* 【条件5】自動可変・最大2行 */
  font-size: 14px; line-height: 1.5; margin-bottom: 8px;
  color: var(--eo-text);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.eo-msg__meta {                          /* 【条件11】狭い画面で破綻させない */
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.4;
  color: var(--eo-text-muted);
}
.eo-msg__kind { font-weight: 500; }      /* 【第116回⑤】色だけに頼らない */
.eo-msg--urgent  .eo-msg__kind { color: var(--eo-priority-urgent); }
.eo-msg--caution .eo-msg__kind { color: var(--eo-priority-caution); }
.eo-msg--notice  .eo-msg__kind { color: var(--eo-priority-notice); }
.eo-msg--facility .eo-msg__kind { color: var(--eo-priority-facility); }       /* [EO-DEC-0287] */
.eo-msg__sep  { color: #D8D8D4; }

/* 【条件8】画像・アンケートは無彩色の文字ラベル。3行目を作らない */
.eo-msg__label {
  font-size: 11px; color: var(--eo-text-muted);
  background: var(--eo-system-bg);
  padding: 1px 6px; border-radius: 4px;
}

/* 【条件10】「既読 4/11」と文字で。【条件3】赤にしない */
.eo-msg__read {
  margin-left: auto;
  white-space: nowrap;                   /* 【条件11】 */
  color: var(--eo-text-muted);
}
/* 【第119回・修正2】全員既読に「緑」を使ってはならない。
   赤・黄・緑の3色は、人間が投稿した連絡の重要度にのみ使う（第116回・第118回）。 */
.eo-msg__read--done {
  color: var(--eo-text-muted);
  font-weight: 600;
}

/* 【条件7】日付見出し */
.eo-msg-day {
  padding: 14px 16px 8px;
  font-size: 12px; font-weight: 500;
  color: var(--eo-text-muted);
  background: var(--eo-surface-sunken);
}

/* ── 引き継ぎノートの状況注記（Design System 統一：無彩色・色分けしない） ──
   旧 .handover-confirm-names（緑）/.handover-unconfirmed（赤）を置換。
   .eo-msg の3行目として、確認状況を落ち着いた無彩色で示す。 */
.eo-hw-note {
  font-size: 11px; line-height: 1.4;
  color: var(--eo-text-muted);
  margin-top: 6px;
}
.eo-hw-note--attn { color: var(--eo-priority-caution); font-weight: 600; }

/* ── 引き継ぎ画面上部の注記バー（色付き背景を廃し、システム注記トーンへ） ── */
.eo-handover-notice {
  padding: 8px 16px;
  background: var(--eo-system-bg);
  border-bottom: 1px solid var(--eo-border);
  font-size: 12px; font-weight: 500;
  color: var(--eo-system-fg);
}

/* ── 月別ヘッダー・アコーディオン ── */
.month-section { margin-bottom: 4px; }
.month-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; cursor: pointer; user-select: none;
}
.month-header:active { opacity: 0.7; }
.month-label {
  font-size: 13px; font-weight: 700; color: var(--text-mid);
  display: flex; align-items: center; gap: 8px;
}
.month-label::before {
  content: ''; display: inline-block;
  width: 24px; height: 2px; background: var(--green); border-radius: 1px;
}
.month-toggle { font-size: 12px; color: var(--text-light); transition: transform 0.25s; }
.month-toggle.open { transform: rotate(0deg); }
.month-toggle.closed { transform: rotate(-90deg); }
.month-body { overflow: hidden; transition: max-height 0.3s ease; }
.month-body.collapsed { max-height: 0 !important; }

/* ── 優先度選択ボタン ── */
.priority-sel-btn {
  text-align: center; padding: 10px 4px; border-radius: var(--eo-radius);
  font-size: 13px; font-weight: 700; border: 2px solid transparent;
  transition: all 0.15s; opacity: 0.45;
  cursor: pointer;
}
.priority-sel-btn.selected { opacity: 1; transform: scale(1.04); }

/* 【第116回⑤】種別3色。DB列 priority の値（urgent/normal/info）は変更しない */
.priority-sel-btn.priority-urgent {
  background: #FCEBEB; color: var(--eo-priority-urgent); border-color: var(--eo-priority-urgent);
}
.priority-sel-btn.priority-normal {
  background: #FBF3E5; color: var(--eo-priority-caution); border-color: var(--eo-priority-caution);
}
.priority-sel-btn.priority-info {
  background: #EAF3EB; color: var(--eo-priority-notice); border-color: var(--eo-priority-notice);
}

/* 引き継ぎ種別（同じ3色に統一） */
.priority-sel-btn.hw-action {
  background: #FCEBEB; color: var(--eo-priority-urgent); border-color: var(--eo-priority-urgent);
}
.priority-sel-btn.hw-check {
  background: #FBF3E5; color: var(--eo-priority-caution); border-color: var(--eo-priority-caution);
}
.priority-sel-btn.hw-done {
  background: #EAF3EB; color: var(--eo-priority-notice); border-color: var(--eo-priority-notice);
}

/* ── 既読詳細 ── */
.person-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.person-row:last-child { border-bottom: none; }
.person-name { font-size: 14px; font-weight: 500; }
.person-time { font-size: 12px; color: var(--text-light); }
.check-yes { color: var(--green); font-size: 18px; }
.check-no { color: var(--red); font-size: 18px; }

.banner {
  padding: 12px 16px; border-radius: var(--eo-radius);
  font-size: 13px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.banner-info { background: #e3f2fd; color: #1565c0; }

/* ── システム通知バー（仕様書 第25-3） ── */
.eo-system-bar {
  background: var(--eo-system-bg);
  color: var(--eo-system-fg);
  border: 1px solid var(--eo-system-border);
  border-radius: var(--eo-radius);
  padding: 14px 16px;
}

.loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; gap: 16px;
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--green-light);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* [第107/108回] 上品な細リングローディング(既存.spinnerは非変更・本クラスのみ追加) */
.spinner-elegant {
  width: 38px; height: 38px;
  border: 2.5px solid rgba(15,30,53,0.12);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.group-id-box {
  background: var(--navy); color: white;
  border-radius: var(--eo-radius); padding: 16px;
  text-align: center; margin-bottom: 16px;
}
/* ── 削除ボタン ── */
.delete-msg-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: var(--eo-radius);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.delete-msg-btn:active { background: #ffeaea; }
.group-id-label { font-size: 11px; opacity: 0.6; margin-bottom: 6px; }
.group-id-value { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.copy-btn {
  margin-top: 10px; padding: 6px 16px;
  background: var(--green); color: white;
  border: none; border-radius: var(--eo-radius);
  font-size: 12px; cursor: pointer; font-family: inherit;
}

.approval-item {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.approval-item:last-child { border-bottom: none; }
.approval-name { font-size: 14px; font-weight: 500; }
.approval-time { font-size: 12px; color: var(--text-light); }
.approve-btn {
  padding: 6px 14px; background: var(--green); color: white;
  border: none; border-radius: var(--eo-radius); font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}

.empty {
  text-align: center; padding: 60px 20px;
  color: var(--text-light);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { font-size: 15px; }


/* ── テンプレートボタン ── */
.template-btn {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--eo-radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.template-btn:active {
  background: var(--green-light);
  border-color: var(--green);
}

#toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: white;
  padding: 10px 20px; border-radius: 20px;
  font-size: 13px; opacity: 0;
  transition: all 0.3s; pointer-events: none;
  /* [EO-DEC-0222 実装時に是正] 長い文言が画面からはみ出していたため nowrap を解除。
     ★短い文言の見た目は変わらない（width: max-content により内容ぴったりの幅を保つ）。
     長文のときだけ折り返して複数行になる。 */
  white-space: normal;
  max-width: calc(100vw - 40px);
  width: max-content;
  text-align: center;
  line-height: 1.5;
  z-index: 999;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 引き継ぎノート ── */
.handover-badge-bar {
  background: #fff3e0;
  border: 1.5px solid #ffb74d;
  border-radius: var(--eo-radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.handover-badge-bar:active { opacity: 0.8; }

/* ── グループ期限警告バー ── */
.expiry-warning-bar {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--eo-radius);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.expiry-warning-bar.warning {
  background: #fff8e1;
  border: 1.5px solid #ffc107;
  color: #e65100;
}
.expiry-warning-bar.danger {
  background: #ffebee;
  border: 1.5px solid #e53935;
  color: #c62828;
}
.handover-badge-count {
  background: #ff6f00;
  color: white;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--eo-radius);
  padding: 2px 10px;
  min-width: 28px;
  text-align: center;
}

/* 【旧デザイン・非使用（Design System統一で .eo-msg へ移行）】
   引き継ぎノートの描画は renderHandoverCardHtml が .eo-msg 構造を出力するように
   変更したため、以下 .handover-card / .handover-priority-badge / .hw-action等は
   もう参照されない。累積温存原則により削除せず記録として残す。 */
.handover-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 4px solid #ff6f00;
  background: #fffdf7;
}
.handover-card.priority-action { border-left-color: #e53935; background: #fffafa; }
.handover-card.priority-check  { border-left-color: #f9a825; background: #fffef5; }
.handover-card.priority-done   { border-left-color: #0F6B63; background: #E6F0EF; }
.handover-card:last-child { border-bottom: none; }
.handover-card:active { background: #f8f9fc; }

.handover-priority-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--eo-radius); margin-bottom: 6px;
}
.hw-action { background: #FCEBEB; color: var(--eo-priority-urgent); border: 1px solid var(--eo-priority-urgent); }
.hw-check  { background: #FBF3E5; color: var(--eo-priority-caution); border: 1px solid var(--eo-priority-caution); }
.hw-done   { background: #EAF3EB; color: var(--eo-priority-notice); border: 1px solid var(--eo-priority-notice); }

.handover-confirm-names {
  font-size: 11px; color: var(--green); margin-top: 6px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.handover-unconfirmed {
  font-size: 11px; color: var(--red); margin-top: 4px;
}

.hw-confirm-btn {
  width: 100%; padding: 14px; border: none; border-radius: var(--eo-radius);
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity 0.15s; margin-bottom: 10px;
}
.hw-confirm-btn:active { opacity: 0.8; }
.hw-btn-takeover { background: #1565c0; color: white; }
.hw-btn-done     { background: var(--green); color: white; }
.hw-confirmed-banner {
  background: #E6F0EF; border: 1.5px solid #0F6B63; border-radius: var(--eo-radius);
  padding: 12px 16px; text-align: center; font-size: 14px;
  font-weight: 700; color: #0F6B63; margin-bottom: 10px;
}

/* 作成画面：引き継ぎトグル */
.compose-type-toggle {
  display: flex; gap: 0; margin-bottom: 16px;
  border: 1.5px solid var(--border); border-radius: var(--eo-radius); overflow: hidden;
}
.compose-type-btn {
  flex: 1; padding: 10px 4px; border: none; background: white;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  color: var(--text-light);
}
.compose-type-btn.active {
  background: var(--navy); color: white;
}
.compose-type-btn:not(:last-child) { border-right: 1.5px solid var(--border); }

/* ── ホーム画面のタブ（第29章・案2 フォルダータブ／EO-DEC-0175） ── */
.home-filter-toggle {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--eo-border);
}

.filter-chip {
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--eo-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--eo-radius) var(--eo-radius) 0 0;
  cursor: pointer;
  transition: color var(--eo-motion-fast) var(--eo-ease),
              background var(--eo-motion-fast) var(--eo-ease);
}

.filter-chip.active {
  color: var(--eo-text);
  font-weight: 700;
  background: var(--eo-surface);
  border-color: var(--eo-border);
  margin-bottom: -1px;
  padding-bottom: 1px;
  box-shadow: inset 0 2px 0 var(--eo-accent);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--eo-accent);
  outline-offset: 2px;
}

#home-messages {
  background: var(--eo-surface);
  padding-top: 8px;
}

/* ── グループ切替ボトムシート ── */
.group-switcher-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.group-switcher-overlay.open { opacity: 1; pointer-events: auto; }
.group-switcher-sheet {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 430px;
  background: white;
  border-radius: 20px 20px 0 0;
  z-index: 301;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* iOS：シート内の慣性スクロール */
  padding-bottom: 24px;
}
.group-switcher-sheet.open { transform: translateX(-50%) translateY(0); }
.group-switcher-handle {
  width: 40px; height: 4px;
  background: var(--border); border-radius: 2px;
  margin: 12px auto 16px;
}
.group-switcher-title {
  font-size: 15px; font-weight: 700;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border);
}
.group-switcher-list {
  padding: 12px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.group-card {
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--eo-radius);
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.group-card:active { background: var(--bg); }
.group-card.current { border-color: var(--green); background: var(--green-light); cursor: default; }
.group-card .group-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.group-card .group-meta { font-size: 12px; color: var(--text-light); font-family: monospace; }
.group-switch-btn {
  margin-top: 10px; padding: 6px 14px;
  background: rgba(255,255,255,0.15);
  color: white; border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--eo-radius); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: block; width: 100%; text-align: center;
}
.join-new-group-btn {
  width: 100%; padding: 12px 16px;
  background: var(--green); color: white;
  border: none; border-radius: var(--eo-radius);
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.join-new-group-btn:active { background: var(--green-dark); }

/* ══════════════════════════════════════════════════════
 * [UI改善① 横画面対応] チャッピー第50回判定 条件付きGO 準拠
 * - 条件: (orientation: landscape) AND (min-width: 768px) のみ適用
 * - スマホ縦画面・スマホ横画面(<768px)は現状維持
 * - 本文エリアは max-width:900px で中央寄せ・可読性確保
 * - 既存JSロジックには触らない・サイネージバグ修正3件と完全独立
 * ══════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 768px) {
  body {
    max-width: none;
  }
  .screen {
    max-width: none;
  }
  .content {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
  }
  .header {
    padding-left: max(16px, calc((100vw - 900px) / 2 + 16px));
    padding-right: max(16px, calc((100vw - 900px) / 2 + 16px));
  }
}

/* ══════════════════════════════════════════════════════
 * [UI改善③ Androidスマホ縦画面 横幅余白対応] チャッピー第85回判定 GO
 * - 条件: (orientation: portrait) AND (min-width: 431px) AND (max-width: 599px)
 * - 既存 portrait ≥600px(第57回判定)とは重複しない範囲だけ対象
 * - 既存 landscape ≥768px(第50回判定)とは重複しない範囲だけ対象
 * - iPhone(~430px以下)は既存 max-width:430px を維持
 * - Androidタブレット横画面(landscape ≥768px)は第50回判定で対応・本クエリは無影響
 * ══════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 431px) and (max-width: 599px) {
  body {
    max-width: none;
  }
  .screen {
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════
 * [UI改善①-2 大画面portrait対応] チャッピー第57回判定 GO
 * - 条件: (orientation: portrait) AND (min-width: 600px) のみ適用
 * - タブレット縦 / MEGAPAD縦など 600px以上の縦画面だけ対象
 * - スマホ縦画面(<600px)は既存 max-width:430px を維持
 * - 既存 landscape メディアクエリ(第50回判定)は1文字も変更しない
 * - 本文エリアは max-width:600px で中央寄せ・縦画面の可読性確保
 * ══════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 600px) {
  body {
    max-width: none;
  }
  .screen {
    max-width: none;
  }
  /* [2026/6/20] MEGAPAD縦置き等の大画面・縦画面で左右余白が出る問題に対応。
   * 従来は本文を max-width:600px に制限して中央寄せしていたため、600pxを超える
   * 縦画面（MEGAPAD縦・27/32インチ・未知の高解像度すべて）で左右に余白が出ていた。
   * 上限を外し画面幅いっぱいに広げる。解像度を問わず余白が出ない。
   * 左右の内側パディング(24px)は維持し、端ピッタリにはしない。
   * 横画面(landscape・別メディアクエリ)とスマホ縦には一切影響しない。 */
  .content {
    max-width: none;
    margin: 0;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
  }
  .header {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.lang-btn.selected {
  background: var(--eo-header-bg);
  color: #fff;
  border-color: var(--eo-header-bg);
}

/* ── EOIDカード 施設写真レイヤー（EO-DEC-0235〜0238） ── */
.eo-idcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--eo-radius);
}
.eo-idcard .eo-idcard__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 62%;
  z-index: 0;
}
/* [EO-DEC-0240] 白ベールの基本値を82%から65%へ。施設写真を装飾ではなく
   「いまどの施設にいるか」を示す情報として、特徴が判別できる程度まで見せる。
   ★135degのグラデーション幅（4ポイント）は EO-DEC-0236 のまま維持する。
   ★受入調整の範囲は65〜70%（再判定不要）。70%を超えて戻す場合は再判定が要る。
   ★施設側による解除・濃度変更は引き続き不可（第22-3の防衛線）。 */
.eo-idcard .eo-idcard__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.69) 0%, rgba(255,255,255,.65) 100%);
  z-index: 1;
}
.eo-idcard .eo-idcard__watermark {
  position: absolute;
  color: rgba(15,30,53,.05);
  font-size: 150px;
  font-weight: 700;
  right: -4%;
  bottom: -24%;
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}
.eo-idcard__facility {
  font-size: 11px;
  color: var(--eo-idcard-sub);
  margin-top: 6px;
}
/* [EO-DEC-0239] EOIDカード内の補助文字色。
   --text-light は白背景でもコントラスト2.40でありWCAG AA(4.5)を下回る。
   施設写真を敷いたことで顕在化したため、カード内の補助文字を --text-mid へ引き上げる。
   ★写真の有無・ST/Plusを問わず .eo-idcard 全体に適用する（論点C）。
   ★色の指定は本ファイルへ一本化する。index.html 側のインライン color は削除済み（論点D）。 */
/* [EO-DEC-0240] 補助文字を --text-mid から --text へ正式変更（EO-DEC-0239 を上書き）。
   実施設写真での実測は 82%＋--text-mid で最悪4.23、65%＋--text で5.68（基準4.5）。
   ★表示名との情報階層は文字サイズ・font-weight・EOIDチップで維持する。色では作らない。
   ★受入調整はこの1行で行う。ベールを70%まで戻しても --text のままでよい。 */
.eo-idcard {
  --eo-idcard-sub: var(--text);
}
.eo-idcard #profile-line-name,
.eo-idcard #profile-eo-uid {
  color: var(--eo-idcard-sub);
}
.eo-idcard > * {
  position: relative;
  z-index: 2;
}
.eo-idcard--has-photo .eo-idcard__watermark {
  display: none;
}