/* =========================================================
   命をツナゲル - Mobile-first (portrait) UI
   ========================================================= */

/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #102a43;
  --muted: #52606d;
  --line: rgba(16,42,67,.12);
  --blue: #0d47a1;
  --red: #d32f2f;
  --gray: #6c757d;
  --orange: #ff7043;

  --radius: 14px;
  --shadow: 0 6px 22px rgba(0,0,0,.08);
}

html, body{
  height: 100%;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* App shell */
.app{
  min-height: 100vh;
  /* Tunageruと同じ基準に揃える（ヘッダー罫線位置のズレ対策） */
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar{
  position: sticky;
  top: 0;
  /* Raise z-index so that the header always sits above the page content
     (cards, forms, and other elements) on every view.  A higher value
     ensures the back/restart buttons remain visible and tappable even if
     underlying sections have their own z-index.  Keep this below the
     overlay/modal z-index values (999+) so that those elements still
     appear on top when shown. */
  z-index: 50;
  background: rgba(246,248,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 10px 10px calc(10px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-title{
  flex: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--blue);
  user-select: none;
}

.icon-btn{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.icon-btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.main{
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
}

/* Views */
.view{ display: none; }
.view.active{ display: block; }

h1, h2{
  color: var(--blue);
}

h2{
  font-size: 20px;
  margin: 4px 0 14px;
  text-align: center;
}

/* Home */
.hero{
  text-align: center;
  padding: 16px 10px 10px;
}

.mascot img{
  width: 128px;
  height: 128px;
  margin: 8px auto 10px;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}

.app-title{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 6px;
}

.tagline{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.button-container{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn{
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform .06s ease, filter .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:active{ transform: translateY(1px) scale(.99); }
.btn:disabled{ opacity: .55; cursor: not-allowed; box-shadow: none; }

.btn .en{ font-size: 13px; font-weight: 700; opacity: .9; }

.btn-emergency{ background: var(--red); }

/* Home main emergency button: extra prominent */
.btn-emergency-main{
  position: relative;
  min-height: 96px;
  padding: 18px 16px;
  font-size: 26px;
  letter-spacing: .06em;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 14px 32px rgba(255, 59, 48, .35), 0 4px 10px rgba(0,0,0,.25);
  text-shadow: 0 2px 8px rgba(0,0,0,.28);
  filter: saturate(1.1);
  overflow: hidden;
}

/* Subtle glow ring */
.btn-emergency-main::before{
  content: '';
  position: absolute;
  inset: -12px;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
  pointer-events: none;
}

/* Pulse (heartbeat) */
.btn-emergency-main{
  animation: emergencyPulse 1.55s ease-in-out infinite;
}

@keyframes emergencyPulse{
  0%   { transform: translateY(0) scale(1);    box-shadow: 0 14px 32px rgba(255, 59, 48, .30), 0 4px 10px rgba(0,0,0,.22); }
  45%  { transform: translateY(-1px) scale(1.015); box-shadow: 0 18px 40px rgba(255, 59, 48, .42), 0 6px 14px rgba(0,0,0,.26); }
  100% { transform: translateY(0) scale(1);    box-shadow: 0 14px 32px rgba(255, 59, 48, .30), 0 4px 10px rgba(0,0,0,.22); }
}

@media (prefers-reduced-motion: reduce){
  .btn-emergency-main{ animation: none; }
}
.btn-unsure{ background: var(--blue); }
.btn-secondary{ background: var(--gray); }
.btn-primary{ background: var(--blue); }

/* ===== Goods & AED map styles ===== */

/* Wrapper for the AED map to limit width and center on page */
.aed-map-wrapper{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

/* Container holding the overview image and clickable regions */
.aed-map-container{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* AED map images scale responsively */
.aed-map-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Clickable overlay areas dividing the overview into three equal parts */
.aed-area{
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.3333%;
  border: none;
  background: rgba(0, 0, 0, 0); /* transparent, but pointer active */
  cursor: pointer;
}
.aed-area-1{ left: 0; }
.aed-area-2{ left: 33.3333%; }
.aed-area-3{ left: 66.6666%; }

/* Hidden class used to hide detail until needed */
.aed-detail.hidden{
  display: none;
}

/* =========================================================
   Stretcher map (担架マップ)
   The stretcher map view mirrors the AED map view. It shows an overview image
   divided into three equal clickable regions, and displays a detail map
   for each region upon selection. These styles mirror those of the AED map
   to ensure a consistent look and feel.
   ========================================================= */

/* Wrapper for the Stretcher map to limit width and center on page */
.stretcher-map-wrapper{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

/* Container holding the overview image and clickable regions */
.stretcher-map-container{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Stretcher map images scale responsively */
.stretcher-map-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Clickable overlay areas dividing the overview into three equal parts */
.stretcher-area{
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.3333%;
  border: none;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.stretcher-area-1{ left: 0; }
.stretcher-area-2{ left: 33.3333%; }
.stretcher-area-3{ left: 66.6666%; }

/* Hidden class used to hide detail until needed */
.stretcher-detail.hidden{
  display: none;
}

/* =========================================================
   OS1 map (OS-1マップ)
   The OS1 map view mirrors the AED and stretcher map views. It shows an overview image
   divided into three equal clickable regions, and displays a detail map
   for each region upon selection. These styles mirror those of the AED map
   to ensure a consistent look and feel.
   ========================================================= */

/* Wrapper for the OS1 map to limit width and center on page */
.os1-map-wrapper{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

/* Container holding the overview image and clickable regions */
.os1-map-container{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* OS1 map images scale responsively */
.os1-map-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Clickable overlay areas dividing the overview into three equal parts */
.os1-area{
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.3333%;
  border: none;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.os1-area-1{ left: 0; }
.os1-area-2{ left: 33.3333%; }
.os1-area-3{ left: 66.6666%; }

/* Hidden class used to hide detail until needed */
.os1-detail.hidden{
  display: none;
}

/* Provide some spacing for goods search view */
#view-goods .button-container{
  margin-top: 20px;
}

/* =========================================================
   Overlay (モーダル)
   緊急時の誘導や確認のためのフルスクリーンオーバーレイ
   ========================================================= */

.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.overlay.hidden{ display: none; }

.overlay-content{
  background: #fff;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 500px;
  width: 100%;
  text-align: center;
  /* オーバーレイ内に×ボタンを設置するための相対位置付け */
  position: relative;
}

/* overlayを閉じる×ボタン。誤操作を防ぐためタップ領域を広めにする */
.overlay-close{
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.overlay-close:hover{
  color: var(--red);
}

#overlay-message{
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.5;
}

.overlay-buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.overlay-buttons .btn{
  flex: 1 1 auto;
  min-width: 120px;
  margin: 4px;
}

/* Danger text styling for emphasis */
.overlay-content .danger-text{
  color: var(--red);
  font-weight: bold;
}

.link-btn{
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 999px;
}

.link-btn svg{ width: 18px; height: 18px; fill: currentColor; }

.home-footer{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.small, .small-note{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.question{
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Grid (status) */
.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.card-btn{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 74px;
}

/* Status grid cards (PDF style) */
.status-card{
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 12px 6px;
  min-height: 92px;
}
.status-card .icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.status-card .label{
  display: grid;
  gap: 0;
  justify-items: center;
}
.status-card .label strong{
  font-size: 14px;
}

.card-btn:active{ transform: translateY(1px); }
.card-btn .icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(13,71,161,.08);
  color: var(--blue);
  flex: 0 0 auto;
}

.card-btn .label{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.card-btn .label strong{
  font-size: 16px;
  color: var(--text);
}
.card-btn .label span{
  font-size: 12px;
  color: var(--muted);
}

/* List (company/person) */
.list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-btn{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  text-align: left;
}

.list-btn .sub{
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
}

/* Kana bar */
.kana-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.kana-btn{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}
.kana-btn.active{
  background: rgba(13,71,161,.12);
  border-color: rgba(13,71,161,.35);
  color: var(--blue);
}

/* Body selector */
.body-wrap{
  display: grid;
  place-items: center;
  margin: 10px 0 14px;
}

#bodySvg{
  width: min(310px, 92vw);
  height: auto;
}

.body-part{
  fill: #e7eef6;
  stroke: rgba(16,42,67,.35);
  stroke-width: 2;
  cursor: pointer;
  transition: fill .15s ease, stroke .15s ease;
}
.body-part:hover{ fill: rgba(13,71,161,.18); }
.body-part.selected{
  fill: rgba(255,112,67,.38);
  stroke: rgba(255,112,67,.9);
}

.helper-card{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.helper-title{ font-size: 12px; color: var(--muted); font-weight: 800; }
.helper-value{ font-size: 18px; font-weight: 900; }

.footer-actions{
  margin-top: 6px;
}

/* Result */
.summary-card, .result-card, .mail-preview, .card{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 12px;
}

.summary-row{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(16,42,67,.14);
}
.summary-row:last-child{ border-bottom: none; }
.summary-row span{ color: var(--muted); font-weight: 800; }
.summary-row strong{ font-weight: 900; }

.result-message{
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.result-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.mail-preview-title{
  font-weight: 900;
  color: var(--blue);
  margin-bottom: 10px;
}

.mail-preview-row{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  margin-bottom: 10px;
  align-items: start;
}
.mail-preview-row span{ color: var(--muted); font-weight: 800; padding-top: 2px; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  white-space: break-spaces;
  word-break: break-word;
}

.pre{
  background: rgba(16,42,67,.04);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(16,42,67,.10);
  overflow: auto;
}

.mail-preview-actions{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.mail-preview-actions .btn{ font-size: 16px; padding: 12px 12px; }

/* Admin */
.hidden{ display: none !important; }

.admin-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.tab{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}
.tab.active{
  background: rgba(13,71,161,.12);
  border-color: rgba(13,71,161,.35);
  color: var(--blue);
}
.admin-tab{ display: none; }
.admin-tab.active{ display: block; }

.card-title{
  font-weight: 900;
  color: var(--blue);
  margin-bottom: 10px;
}
.card-subtitle{
  font-weight: 900;
  color: var(--text);
  margin: 10px 0 8px;
}

.admin-list{
  display: grid;
  gap: 10px;
}

.admin-item{
  border: 1px solid rgba(16,42,67,.10);
  border-radius: 12px;
  padding: 10px;
  background: rgba(16,42,67,.02);
  display: grid;
  gap: 8px;
}

.divider{
  height: 1px;
  background: rgba(16,42,67,.12);
  margin: 12px 0;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}
@media (max-width: 460px){
  .form-row{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .result-actions{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

.form-col{
  display: grid;
  gap: 10px;
}

/* Icon grid for one-page accident selection */
.icon-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.icon-grid .icon-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  user-select: none;
  transition: background .2s, color .2s;
  text-align: center;
  font-size: 14px;
}
.icon-grid .icon-item .icon{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.icon-grid .icon-item .icon img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.icon-grid .icon-item.active{
  background: var(--orange);
  color: #fff;
}

.field{
  display: grid;
  gap: 6px;
}
.field span{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
}
input, select, textarea{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(16,42,67,.18);
  background: #fff;
  font-size: 14px;
}
textarea{ min-height: 86px; resize: vertical; }

.file-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#importJson{ display: none; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(16,42,67,.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  max-width: calc(100vw - 28px);
  text-align: center;
}
.toast.show{ opacity: 1; }


/* ===== Emergency call (view-emergency) ===== */
.call-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 18px 8px 8px;
}
.call-circle{
  width:min(320px, 80vw);
  height:min(320px, 80vw);
  border-radius:999px;
  border: 10px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.call-icon{
  font-size:56px;
  line-height:1;
  margin-bottom:10px;
}
.call-text{
  font-size:22px;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:8px;
}
.call-sub{
  max-width: 260px;
  line-height:1.35;
}


/* ===== Guided emergency flow (stepper / segments / chips) ===== */
.stepper{
  display:flex;
  gap:8px;
  overflow:auto;
  padding: 6px 2px 10px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.step-btn{
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.step-btn.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
}
.card-title{
  font-weight: 900;
  margin-bottom: 10px;
}

.seg{
  display:flex;
  gap: 8px;
}
.seg-btn{
  flex:1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color:#fff;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.seg-btn .btn-ico{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.seg-btn .btn-txt{
  display: inline-block;
  line-height: 1;
}

.seg-btn.active{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.32);
}
.seg-btn.danger.active{
  border-color: rgba(255, 95, 95, .55);
  box-shadow: 0 0 0 3px rgba(255, 95, 95, .18);
}

/* ワンページ用のセグメントスタイル：白背景用に調整 */
#view-onepage .seg-btn{
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}
#view-onepage .seg-btn.active{
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* Danger highlight for onepage segmentation (e.g. 意識なし / 大量出血あり) */
#view-onepage .seg-btn.danger.active{
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, .2);
}

/* ワンページのフッターアクションを画面下部に固定 */
#view-onepage .footer-actions{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  margin-top: 20px;
  z-index: 4;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

/* Victim modal specific adjustments */
#victimModal .modal-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.check{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  /* 管理画面でも使いやすいように、明確な境界線と背景を設定 */
  border: 1px solid var(--line);
  background: var(--card);
}
.check input{ transform: scale(1.15); }

/* 管理タブ内の送信先範囲チェックはモバイル幅でも折り返さないよう調整 */
/* 管理タブ内の送信先範囲チェックはモバイル幅でも読みやすく配置する */
/* 管理タブ内の送信先範囲チェックの配置
   - フル幅に広げてモバイルでも見やすいようにする
   - 複数行に折り返す際は左右方向に詰める
*/
.admin-tab .form-col .check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 6px;
}

/* チェックボックスのラベルは残りの幅いっぱいに広がり、長いテキストは折り返す */
.admin-tab .form-col .check span {
  flex: 1 1 auto;
  word-break: break-word;
}

/* 保存ボタンは少し余白を空けて配置する */
.admin-tab .form-col > #btnSaveGlobalContacts {
  margin-top: 10px;
}

.chip-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.chip{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color:#fff;
  padding: 12px 12px;
  font-weight: 900;
  text-align:center;
}
.chip.active{
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.30);
}

.summary{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}
.summary-k{
  color: rgba(255,255,255,.72);
  min-width: 7em;
  font-weight: 800;
}
.summary-v{
  flex:1;
  text-align:right;
  font-weight: 900;
  line-height: 1.35;
}
.summary-v.missing{
  color: rgba(255, 220, 120, .95);
}


/* ===== QR modal ===== */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  display:flex;
  justify-content:center;
  /* iOS Safari で上が欠けて「閉じる」が見えない事故を防ぐ */
  align-items:center;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  z-index: 999;
}
.modal.hidden{ display:none; }
.modal-card{
  width: min(560px, 100%);
  /* 画面からはみ出してスクロール不能になるのを防ぐ */
  max-height: calc(100vh - (28px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  /* 動的ビューポート単位に対応しているブラウザではそちらを優先 */
  max-height: calc(100dvh - (28px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  max-height: calc(100svh - (28px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  background: rgba(18, 24, 40, .98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  /* ヘッダ（閉じる）を常に見えるように */
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(18, 24, 40, .98);
}
.modal-title{ font-weight: 900; }
.modal-body{
  padding: 12px 14px 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.qr-camera{
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px;
  margin-bottom: 12px;
  position: relative;
}
.qr-camera video{
  width:100%;
  border-radius: 12px;
  background: #000;
  /* プレビューが大きくなりすぎて上が欠けるのを防ぐ */
  max-height: 44vh;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* QR 位置合わせガイド */
.qr-overlay{
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.qr-frame{
  width: min(240px, 72%);
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2) inset;
}

/* 画面下部に常に出るアクション（キャンセル） */
.modal-actions{
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: linear-gradient(to bottom, rgba(18, 24, 40, 0), rgba(18, 24, 40, .98) 30%);
}

/* 背面スクロール防止 */
body.modal-open{
  overflow: hidden;
}

.qr-fallback{
  margin: 0 0 12px;
  display: grid;
  gap: 6px;
}

/* ===== Map modal ===== */
.modal-card-wide{
  width: min(920px, 100%);
}
.map-tools{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}
.map-tools input{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}
.map-tool-actions{ display:flex; gap: 8px; }
.map-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.map-item{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.map-item:hover{ background: rgba(255,255,255,.10); }
.map-item.active{
  background: rgba(90, 170, 255, .18);
  border-color: rgba(90, 170, 255, .55);
}
.map-stage{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 10px;
}
.map-stage-inner{
  position: relative;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,.2);
}
.map-stage-inner img{
  width: 100%;
  height: auto;
  display:block;
}

.yard-svg{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.yard-svg .map-poly{
  fill: rgba(90, 170, 255, .10);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.yard-svg .map-poly:hover{
  fill: rgba(90, 170, 255, .18);
}
.yard-svg .map-poly.active{
  fill: rgba(255, 90, 90, .18);
  stroke: rgba(255, 90, 90, .85);
}
.map-marker{
  position:absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 90, 90, .95);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px rgba(255, 90, 90, .18);
  transform: translate(-50%, -50%);
  pointer-events:none;
}


/* --- Map modal (area zoom, SVG background) --- */
.map-stage-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.map-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.map-tab{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
}
.map-tab:hover{ background: rgba(255,255,255,.10); }
.map-tab.active{
  background: rgba(90,170,255,.18);
  border-color: rgba(90,170,255,.55);
}

.map-stage-inner{ padding: 0; }
.map-stage-inner img{ display:none; }

.yard-svg{
  width: 100%;
  height: auto;
  display:block;
  user-select:none;
  touch-action: manipulation;
}

.yard-svg .map-area{
  fill: rgba(90, 170, 255, .10);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 8;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.yard-svg .map-area:hover{ fill: rgba(90, 170, 255, .18); }

.yard-svg .map-poly{
  fill: rgba(90, 170, 255, .10);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.yard-svg .map-poly:hover{ fill: rgba(90, 170, 255, .18); }
.yard-svg .map-poly.active{
  fill: rgba(255, 90, 90, .18);
  stroke: rgba(255, 90, 90, .85);
}

.yard-svg .map-dot{
  fill: rgba(255, 90, 90, .98);
  stroke: rgba(255,255,255,.95);
  stroke-width: 10;
  vector-effect: non-scaling-stroke;
}

.map-candidates{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.map-cand{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  cursor:pointer;
}
.map-cand:hover{ background: rgba(255,255,255,.10); }
.map-cand.primary{
  background: rgba(255, 90, 90, .16);
  border-color: rgba(255, 90, 90, .65);
}

@media (max-width: 420px){
  .chip-grid{ grid-template-columns: 1fr; }
  .seg-btn{ font-size: 15px; padding: 12px 10px; }
}


.map-stage-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.map-tabs{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.map-tab{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
}
.map-tab.active{
  background: rgba(90, 170, 255, .18);
  border-color: rgba(90, 170, 255, .55);
}

.map-stage-inner svg{
  width: 100%;
  height: auto;
  display: block;
}

.yard-svg .map-area{
  fill: rgba(90, 170, 255, .10);
  stroke: rgba(255,255,255,.55);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.yard-svg .map-area:hover{ fill: rgba(90, 170, 255, .18); }

.yard-svg .map-poly{
  fill: rgba(90, 170, 255, .10);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.yard-svg .map-poly:hover{ fill: rgba(90, 170, 255, .18); }
.yard-svg .map-poly.active{
  fill: rgba(255, 90, 90, .18);
  stroke: rgba(255, 90, 90, .85);
}

.yard-svg .map-dot{
  fill: rgba(255, 90, 90, .95);
  stroke: rgba(255,255,255,.95);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.map-candidates{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.map-cand{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  cursor:pointer;
}
.map-cand:hover{ background: rgba(255,255,255,.10); }
.map-cand.primary{
  background: rgba(255, 90, 90, .16);
  border-color: rgba(255, 90, 90, .65);
}

/* --- Map modal final overrides (keep last to avoid style drift) --- */
.map-stage-inner{ padding: 0; }
.map-stage-inner img{ display:none !important; }
.yard-svg{
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.map-row{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.map-row:hover{ background: rgba(255,255,255,.10); }
.map-row.active{
  background: rgba(90, 170, 255, .18);
  border-color: rgba(90, 170, 255, .55);
}
.map-row-name{ display:block; }
.map-row-meta{ display:block; opacity:.78; font-weight: 800; font-size: 12px; margin-top: 4px; }

/* === Added (2026-01-21): message / CPR / AED images (minimal scoped styles) === */
.home-message-img{
  width: 100%;
  height: auto;
  display: block;
  margin: 6px 0;
  border-radius: 12px;
}

.overlay-illustration{
  margin: 12px 0 10px;
  text-align: center;
}

.overlay-illustration img{
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 12px;
}



.btn .btn-ico{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.btn .btn-txt{
  line-height: 1;
}


/* --- Bigger pictograms (keep button height) --- */
#segConsciousOne .btn-ico,
#segBreathingOne .btn-ico,
#segBleedingOne .btn-ico,
#segPainOne .btn-ico,
#btnScanLocationOne .btn-ico,
#btnScanVictimOne .btn-ico{
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
#segConsciousOne .seg-btn,
#segBreathingOne .seg-btn,
#segBleedingOne .seg-btn,
#segPainOne .seg-btn{
  padding: 10px 8px; /* was 14px 10px */
}
#btnScanLocationOne,
#btnScanVictimOne{
  padding: 10px 12px; /* was 14px */
}

/* --- Fix item map area overlay (swap Area1/Area3 positions) --- */
.aed-area-1{ left: 66.6666%; }
.aed-area-3{ left: 0; }
.stretcher-area-1{ left: 66.6666%; }
.stretcher-area-3{ left: 0; }
.os1-area-1{ left: 66.6666%; }
.os1-area-3{ left: 0; }