:root {
  --ui-scale: 1;
  --mobile-ui-scale: 1;
  --mobile-control-scale: 1;
  --mobile-font-size: 16px;
  --mobile-control-bottom: 10px;
  --mobile-zoom-stack-offset: 86px;
  --scaled-sidebar-width: 260px;
  --mobile-panel-height: 34%;
  --mobile-map-height: 66%;
  --mobile-settings-panel-height: 34%;
  --mobile-settings-map-height: 66%;
  --app-viewport-width: 100vw;
  --app-viewport-height: 100dvh;
  --panel-background: rgba(0, 0, 0, 0.85);
  --section-header-background: #31476d;
  --primary-text: #fff;
  --divider-color: rgba(255, 255, 255, 0.16);
  --muted-color: #777;
  --option-background: #31476d;
  --active-menu-background: #5f5f5f;
  --stale-color: #ff4d4d;
  color-scheme: dark;
}

:root.light-theme {
  --panel-background: rgba(216, 226, 238, 0.96);
  --section-header-background: #506f99;
  --primary-text: #17283b;
  --divider-color: rgba(39, 62, 88, 0.2);
  --muted-color: #8796a7;
  --option-background: #c8d6e6;
  --active-menu-background: #9fb2c8;
  --stale-color: #c62828;
  color-scheme: light;
}

:root.light-theme #sidebar {
  box-shadow: inset -1px 0 rgba(69, 94, 124, 0.24);
}

/* 画面全体の余白を消す（PC・スマホ共通） */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;        /* ← PC でもスマホでも最も安定 */
  overflow: hidden;
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* PC 横画面（横長）では左右レイアウト */
#app {
  display: flex;
  height: 100%;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* 左側の情報パネル（PC 横画面） */
#sidebar {
  flex: 0 0 260px;
  width: 260px;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px;
  background: var(--panel-background);
  color: var(--primary-text);
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
  font-size: 16px;
  zoom: var(--ui-scale);
  scrollbar-width: none;
}

#sidebar::-webkit-scrollbar,
.earthquake-history-list::-webkit-scrollbar {
  display: none;
}

.eew-animation-canvas { position:absolute; inset:0; z-index:5; width:100%; height:100%; pointer-events:none; }

/* iOS PWAでは zoom がレイアウト幅と文字の自動拡大を不安定にする。 */
html.standalone-mode #sidebar {
  font-size: calc(16px * var(--mobile-ui-scale));
}

html.standalone-mode:not(.portrait-layout) #sidebar,
html.standalone-mode.horizontal-layout #sidebar {
  flex-basis: min(var(--scaled-sidebar-width), var(--app-viewport-width));
  width: min(var(--scaled-sidebar-width), var(--app-viewport-width));
  max-width: var(--app-viewport-width);
}

html.standalone-mode .setting-row label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 旧版JSがiOS PWAのキャッシュに残っている場合でも、逆数幅とzoomを無効化する。 */
@media (max-aspect-ratio: 1/1) {
  html:not(.horizontal-layout) #app {
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
  }

  html:not(.horizontal-layout) #sidebar {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    height: 34dvh !important;
    flex: none !important;
    zoom: 1 !important;
  }

  html:not(.horizontal-layout) #map-container {
    order: 1;
    flex: none;
    width: 100% !important;
    max-width: 100% !important;
    height: 66dvh !important;
  }

  html:not(.horizontal-layout) #tab-bar,
  html:not(.horizontal-layout) #update-label,
  html:not(.horizontal-layout) #zoom-control,
  html:not(.horizontal-layout) #fit-map {
    zoom: 1 !important;
  }

  html:not(.horizontal-layout) #tab-bar {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 50%;
    width: auto;
    padding: 5px 8px;
    border-radius: 14px;
    flex-direction: row;
    gap: 2px;
    transform: translateX(-50%) scale(var(--mobile-control-scale));
    transform-origin: center bottom;
  }

  html:not(.horizontal-layout) .setting-row,
  html:not(.horizontal-layout) .setting-control,
  html:not(.horizontal-layout) .range-control,
  html:not(.horizontal-layout) .dropbox-frame {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.earthquake-panel-title,
.earthquake-history h2 {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px 9px 0 0;
  background: var(--section-header-background);
  color: #fff;
  font-size: 1em;
  text-align: center;
}

.earthquake-panel-title {
  height: 32px;
  padding: 0;
  overflow: hidden;
}

.earthquake-panel-title img {
  display: block;
  width: 224px;
  height: 32px;
  margin-inline: auto;
}

.latest-earthquake-card,
.earthquake-history {
  margin-bottom: 8px;
  padding: 12px 8px 10px;
  border-radius: 0 0 11px 11px;
  background: rgba(25, 43, 70, 0.94);
  color: #fff;
}

.latest-earthquake-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.earthquake-intensity {
  display: grid;
  grid-template-columns: 5fr 3fr;
  align-items: center;
  min-height: 80px;
  padding: 6px 8px;
  border-radius: 11px;
  background: #31476d;
  color: #fff;
}

.earthquake-intensity span {
  justify-self: center;
  font-size: 1.35em;
  font-weight: 700;
}

.earthquake-intensity strong {
  display: flex;
  align-items: center;
  justify-content: center;
  place-self: stretch;
  font-size: 3.75em;
  font-weight: 400;
  line-height: 0.9;
}

.earthquake-intensity .latest-intensity-symbol-frame {
  display: grid;
  width: 74px;
  height: 74px;
  justify-self: center;
  align-self: center;
  place-items: center;
}

.earthquake-intensity img.latest-intensity-symbol {
  display: block;
  width: 74px;
  height: 74px;
  margin: 0;
  object-fit: contain;
}

.earthquake-intensity img {
  width: 76px;
  height: 76px;
  margin: -8px -8px -8px 0;
  object-fit: contain;
}

.earthquake-intensity.compact {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 62px;
  min-height: 62px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  transform: translateX(3px);
}

.earthquake-intensity.compact span {
  font-size: 0.55em;
}

.earthquake-intensity.compact strong {
  font-size: 2.1em;
}

.earthquake-intensity.compact img {
  width: 48px;
  height: 62px;
  margin: 0;
}

.earthquake-history-event-badge,
.earthquake-history-event-badge img {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 62px;
}

.earthquake-history-long-period-badge {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 56px;
  grid-template-rows: repeat(2, 25px);
  gap: 2px;
  align-content: center;
}

.earthquake-history-long-period-badge img {
  display: block;
  width: 58px;
  height: 25px;
  object-fit: fill;
}

.intensity-0 { background: #62626b; }
.intensity-1 { background: #2b8eb2; }
.intensity-2 { background: #4cd0a7; color: #1c1c1c; }
.intensity-3 { background: #f6cb51; color: #1c1c1c; }
.intensity-4 { background: #ff9939; color: #1c1c1c; }
.intensity-5minus { background: #e52a18; }
.intensity-5plus { background: #c31b1b; }
.intensity-6minus { background: #a50c6b; }
.intensity-6plus { background: #930a7a; }
.intensity-7 { background: #5f0ca2; }
.intensity-unknown { background: #31476d; }

.earthquake-description {
  display: grid;
  gap: 1px;
  padding: 0 4px 3px;
}

.earthquake-description time,
.earthquake-history-body time,
.earthquake-history-body > span {
  color: #e5e9ef;
  font-size: 0.86em;
}

.earthquake-description strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.35em;
}

.earthquake-description-suffix-short {
  display: none;
}

.earthquake-investigating {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}

.earthquake-investigating > span {
  font-size: 1.05em;
  font-weight: 500;
}

.earthquake-investigating > strong {
  justify-self: end;
  overflow: visible;
  font-size: 2em !important;
  font-weight: 500;
  line-height: 1;
}

html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description > .earthquake-investigating {
  grid-column: 1 / -1;
  align-self: center;
  display: grid;
  grid-template-columns: auto 1fr;
  padding-bottom: 0;
  font-size: 1em;
}

html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-investigating > strong {
  grid-column: 2;
  justify-self: end;
}

.earthquake-tsunami.tsunami-investigating {
  background: #777780;
  color: #fff;
}

.earthquake-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 2px 4px;
}

.earthquake-metrics > span,
.latest-metric-group > span,
.earthquake-metrics strong {
  white-space: nowrap;
}

.earthquake-metrics strong {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  font-weight: 400;
  line-height: 1;
}

.earthquake-metrics i {
  display: block;
  width: 15px;
}

.latest-metric-group {
  display: contents;
}

.earthquake-metrics .latest-magnitude-value {
  font-size: 2.7em;
}

.earthquake-metrics .latest-magnitude-value.condition {
  font-size: 1.45em;
}

.latest-magnitude-number {
  position: relative;
  top: 2px;
  font-weight: 350;
}

.earthquake-metrics .latest-depth-value {
  font-size: 1.9em;
}

.earthquake-metrics .latest-depth-value.condition {
  font-size: 1.3em;
}

.earthquake-metrics .latest-magnitude-color {
  height: 40px;
}

.earthquake-metrics .latest-depth-color {
  height: 30px;
}

.latest-magnitude-label-short {
  display: none;
}

.earthquake-tsunami {
  padding: 8px;
  border-radius: 9px;
  background: #365585;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
}

.earthquake-tsunami.tsunami-advisory {
  background: #f3d329;
  color: #1c1c1c;
}

.earthquake-tsunami.tsunami-warning {
  background: #d93434;
  color: #fff2b5;
}

.earthquake-tsunami.tsunami-major-warning {
  border: 2px solid #ff5adc;
  background: #710078;
  color: #fff2a8;
  box-shadow: inset 0 0 0 2px #3e004d, 0 0 9px rgba(239, 40, 203, 0.68);
  font-size: 1.12em;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 0 #35003d, 0 0 5px rgba(255, 239, 151, 0.45);
}

.earthquake-history {
  padding: 0 0 6px;
  border-radius: 11px;
  overflow: hidden;
}

.earthquake-history-list {
  display: grid;
  gap: 5px;
  padding: 7px;
}

.earthquake-history-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 9px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.earthquake-history-item.has-long-period { height: 68px; }

.earthquake-history-item:hover {
  background: rgba(80, 116, 169, 0.42);
}

.earthquake-history-item.selected {
  background: rgba(80, 116, 169, 0.68);
  box-shadow: inset 0 0 0 1px rgba(147, 190, 239, 0.72);
}

.earthquake-history-body {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  align-content: center;
  row-gap: 2px;
  padding-right: 4px;
  line-height: 1.12;
  overflow: hidden;
  transform: translateY(2px);
}

.earthquake-history-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(1.05em * var(--history-name-scale, 1));
}

.earthquake-history-body time,
.earthquake-history-body > span:not(.earthquake-history-metrics) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.earthquake-history-metrics {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 7px auto 28px 8px;
  align-items: baseline;
  gap: 0 4px;
  width: 100%;
  min-width: 0;
  height: 22px;
  color: #e5e9ef;
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-3px);
}

.earthquake-history-metrics b {
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
}

.earthquake-history-metrics .history-depth-value {
  justify-self: end;
}

.history-depth-label,
.history-depth-value {
  font-size: 0.86em;
  line-height: 1.35;
}

.history-depth-value.numeric {
  font-size: 1em;
}

.history-depth-value.condition {
  overflow: visible;
  text-overflow: clip;
}

.history-magnitude-label {
  font-size: 1.35em;
  line-height: 1.15;
}

.history-magnitude-label.unknown {
  transform: translateY(2px);
}

.earthquake-history-metrics .history-magnitude-value {
  justify-self: end;
  font-size: 1.8em;
}

.earthquake-history-metrics .history-magnitude-value.unknown {
  font-size: 0.95em;
  line-height: 1.3;
  overflow: visible;
  text-overflow: clip;
  transform: translateY(1px);
}

.earthquake-history-metrics i {
  display: block;
  align-self: end;
  width: 7px;
  height: 18px;
  transform: translateY(-4px);
}

.earthquake-history-metrics .history-magnitude-color {
  align-self: end;
  width: 8px;
  height: 25px;
}

.earthquake-show-on-map {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 118px;
  height: 32px;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.earthquake-history-item:hover .earthquake-show-on-map,
.earthquake-history-item:focus-visible .earthquake-show-on-map {
  opacity: 1;
}

:root.light-theme .latest-earthquake-card,
:root.light-theme .earthquake-history {
  background: rgba(201, 215, 232, 0.97);
  color: #172435;
}

:root.light-theme .earthquake-history-item {
  color: #172435;
}

:root.light-theme .earthquake-history-item:hover {
  background: rgba(92, 126, 166, 0.2);
}

:root.light-theme .earthquake-history-item.selected {
  background: rgba(86, 123, 168, 0.3);
  box-shadow: inset 0 0 0 1px rgba(75, 110, 151, 0.48);
}

:root.light-theme .earthquake-description time,
:root.light-theme .earthquake-history-body time,
:root.light-theme .earthquake-history-body > span {
  color: #4e5e70;
}

.settings-panel h1 {
  margin: 0;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 9px 9px 0 0;
  background: var(--section-header-background);
  color: #fff;
  font-size: 1em;
  line-height: 32px;
  text-align: center;
}

#settings-list {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 0 0 11px 11px;
  background: rgba(25, 43, 70, 0.94);
}

.settings-category {
  overflow: hidden;
  border-radius: 8px;
  background: rgba(12, 28, 49, 0.5);
}

.settings-category > h2 {
  margin: 0;
  padding: 6px 10px;
  background: rgba(62, 89, 132, 0.72);
  color: #fff;
  font-size: 0.92em;
  line-height: 1.25;
}

.settings-category-body {
  padding: 0 10px;
}

.settings-category-body .setting-row:last-child {
  border-bottom: 0;
}

:root.light-theme .settings-category {
  background: rgba(232, 239, 247, 0.72);
}

:root.light-theme .settings-category > h2 {
  background: rgba(92, 126, 166, 0.72);
}

:root.light-theme #settings-list {
  background: rgba(201, 215, 232, 0.97);
}

.replay-settings {
  display: grid;
  gap: 9px;
  margin-top: 0;
  padding: 0 10px 10px;
}

.replay-settings h2 {
  margin: 0 -10px 2px;
  padding: 6px 10px;
  background: rgba(62, 89, 132, 0.72);
  color: #fff;
  font-size: 0.92em;
  line-height: 1.25;
}

.replay-settings > label {
  color: var(--primary-text);
  font-size: 0.88em;
  font-weight: 600;
}

.push-settings {
  display: grid;
  gap: 9px;
  padding: 0 10px 10px;
}

.push-settings h2 {
  margin: 0 -10px 2px;
}

.push-status {
  margin: 0;
  color: var(--primary-text);
  font-size: .84em;
  line-height: 1.35;
}

.push-enable, .push-test {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: #2578b9;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.push-enable:disabled, .push-test:disabled { background: #536278; color: #d8e0ea; }

.push-options {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 9px;
  border: 1px solid #526b8e;
  border-radius: 7px;
}

.push-options legend { padding: 0 4px; color: var(--primary-text); font-size: .84em; font-weight: 700; }
.push-options label { display: flex; align-items: center; gap: 8px; color: var(--primary-text); font-size: .88em; }
.push-options input { accent-color: #38a9e2; }

.replay-datetime-frame {
  position: relative;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 1px solid #607da4;
  border-radius: 7px;
  background: #263b5c;
  transition: filter 120ms ease, border-color 120ms ease;
}

.replay-datetime-frame:hover {
  filter: brightness(1.12);
}

.replay-datetime-frame:focus-within {
  border-color: #52b7dc;
}

.replay-content-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  margin: 0;
  padding: 7px 8px 8px;
  border: 1px solid rgba(121, 161, 211, 0.28);
  border-radius: 7px;
  color: var(--primary-text);
}

.replay-content-options legend {
  padding: 0 4px;
  color: #aebed5;
  font-size: .78em;
}

.replay-content-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: .76em;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

/* The replay method contains a select and must occupy the full row.  On
   narrow phones the option labels also use one column so Japanese text can
   wrap without entering the neighbouring control. */
.replay-content-options > label:first-of-type {
  grid-column: 1 / -1;
  min-width: 0;
}
.replay-content-options > label:first-of-type select {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 350px) {
  .replay-content-options { grid-template-columns: 1fr; }
}

.replay-content-options input {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: #47add5;
}

:root.light-theme .replay-content-options legend { color: #526b8c; }

.replay-datetime-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 4px 7px 4px 10px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: #263b5c;
  color: #fff;
  font-size: 1.02em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
  cursor: pointer;
  text-align: left;
}

.replay-calendar-icon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 17px;
  border: 2px solid #75caea;
  border-radius: 3px;
}

.replay-calendar-icon::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  border-top: 2px solid #75caea;
}

.replay-calendar-icon::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 3px;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: #75caea;
  box-shadow: 7px 0 #75caea;
}

.replay-picker {
  --replay-picker-arrow-top: 50%;
  position: fixed;
  inset: auto;
  width: min(338px, calc(100vw - 24px));
  max-height: calc(100dvh - 16px);
  margin: 0;
  padding: 0 12px 12px;
  overflow: visible;
  border: 1px solid #6685ad;
  border-radius: 11px;
  background: #152842;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
  font-size: calc(16px * var(--ui-scale));
}

.replay-picker::backdrop {
  background: transparent;
}

.replay-picker::before {
  content: "";
  position: absolute;
  top: var(--replay-picker-arrow-top);
  left: -9px;
  width: 16px;
  height: 16px;
  border-bottom: 1px solid #6685ad;
  border-left: 1px solid #6685ad;
  background: #162945;
  transform: translateY(-50%) rotate(45deg);
}

.replay-picker.opens-left::before {
  right: -9px;
  left: auto;
  border: 0;
  border-top: 1px solid #6685ad;
  border-right: 1px solid #6685ad;
}

.replay-picker-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 46px;
  margin: 0 -12px 8px;
  border-radius: 10px 10px 0 0;
  background: var(--section-header-background);
  text-align: center;
}

.replay-picker button,
.replay-picker select {
  border: 0;
  color: #fff;
  font: inherit;
}

.replay-picker-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-weight: 600;
}

.replay-picker-month select {
  height: 30px;
  padding: 0 4px;
  border: 1px solid rgba(154, 184, 222, 0.35);
  border-radius: 5px;
  background: rgba(13, 29, 51, 0.48);
  cursor: pointer;
  text-align: center;
}

.replay-picker-month .replay-year {
  width: 72px;
}

.replay-picker-month .replay-month {
  width: 48px;
}

.replay-picker-header button {
  height: 100%;
  background: transparent;
  font-size: 1.65em;
  cursor: pointer;
}

.replay-picker-header button:hover:not(:disabled),
.replay-calendar button:hover:not(:disabled) {
  background: rgba(91, 190, 225, 0.2);
}

.replay-weekdays,
.replay-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}

.replay-weekdays {
  margin-bottom: 3px;
  color: #8fa8c8;
  font-size: 0.78em;
}

.replay-weekdays span:first-child {
  color: #e89991;
}

.replay-weekdays span:last-child {
  color: #76b8e5;
}

.replay-calendar button {
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.replay-calendar button.selected {
  background: #329bbf;
  font-weight: 600;
}

.replay-picker button:disabled {
  opacity: 0.25;
  cursor: default;
}

.replay-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 0;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.replay-time-row > span {
  margin-right: 9px;
  color: #b7c8df;
  font-size: 0.86em;
}

.replay-time-row select {
  width: 62px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #607da4;
  border-radius: 6px;
  background: #263e61;
  text-align: center;
  cursor: pointer;
}

.replay-picker-actions {
  display: grid;
  grid-template-columns: 0.72fr 1fr 1fr;
  gap: 8px;
}

.replay-picker-actions button {
  min-height: 38px;
  border: 1px solid rgba(121, 161, 211, 0.34);
  border-radius: 7px;
  background: #304d76;
  cursor: pointer;
}

.replay-picker-actions button[value="confirm"] {
  background: #298aad;
  font-weight: 600;
}

.replay-picker-actions button:hover {
  filter: brightness(1.14);
}

.replay-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.replay-controls button {
  min-height: 38px;
  border: 1px solid rgba(121, 161, 211, 0.32);
  border-radius: 7px;
  background: #365585;
  color: #fff;
  cursor: pointer;
  transition: filter 100ms ease, transform 70ms ease;
}

.replay-controls button:hover:not(:disabled) {
  filter: brightness(1.16);
}

.replay-controls button:active:not(:disabled) {
  transform: translateY(1px);
}

.replay-controls button:last-child:not(:disabled) {
  border-color: rgba(121, 161, 211, 0.32);
  background: #365585;
}

.replay-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

#replay-status {
  min-height: 18px;
  color: #aebed5;
  font-size: 0.86em;
  text-align: center;
  white-space: pre-line;
  line-height: 1.35;
}

#panel-realtime { position: relative; padding: 3px 0 0; overflow-y: auto; color: #f4f7fb; }
.eew-card { position: relative; }
.eew-cancel-overlay { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px; box-sizing: border-box; color: #fff; background: rgba(92,101,113,.76); text-align: center; pointer-events: none; }
.eew-cancel-overlay strong { font-size: 2.45em; font-weight: 700; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.eew-cancel-overlay span { font-size: 1.12em; font-weight: 700; line-height: 1.35; }
#panel-tsunami { padding:3px 0 12px; overflow-y:auto; color:#f4f7fb; background:#192b48; }
.tsunami-empty,.tsunami-summary { margin:0; overflow:hidden; border-radius:10px 10px 0 0; background:#1b2d4a; }
.tsunami-empty header,.tsunami-summary header { display:flex; align-items:center; justify-content:center; min-height:35px; padding:3px 9px; box-sizing:border-box; background:#385784; font-size:1.08em; font-weight:700; text-align:center; }
.tsunami-empty p { margin:0; padding:26px 12px; color:#b9c6d8; line-height:1.55; text-align:center; }
.tsunami-summary.level-major-warning header { background:#d645ff; }.tsunami-summary.level-warning header { background:#fc3324; }.tsunami-summary.level-advisory header { color:#171b24; background:#f1de2f; }.tsunami-summary.level-forecast header { color:#172435; background:#7cc3ff; }
.tsunami-summary time { display:block; padding:8px 12px 0; font-size:.82em; font-weight:600; }.tsunami-summary h2 { margin:2px 12px 8px; overflow:hidden; font-size:1.35em; line-height:1.16; white-space:nowrap; text-overflow:ellipsis; }
.tsunami-earthquake-metrics { margin:0 10px 10px; padding:5px 8px; border-radius:7px; background:#314d78; }.tsunami-earthquake-metrics span { display:grid; grid-template-columns:1fr auto 9px; align-items:center; gap:7px; min-height:39px; }.tsunami-earthquake-metrics b { font-family:"Akshar",sans-serif; font-size:1.8em; font-weight:400; line-height:1; }.tsunami-earthquake-metrics i { display:block; width:9px; height:31px; }
.tsunami-area-list { display:flex; flex-direction:column; gap:0; padding:7px 8px 0; }
.tsunami-area-group { position:relative; margin:0; padding:0 4px 8px 26px; border-left:10px solid #7cc3ff; box-sizing:border-box; }
.tsunami-area-group.level-major-warning { border-color:#d645ff; }.tsunami-area-group.level-warning { border-color:#fc3324; }.tsunami-area-group.level-advisory { border-color:#f1de2f; }.tsunami-area-group.level-forecast { border-color:#7cc3ff; }
.tsunami-level { display:flex; align-items:center; min-height:43px; gap:7px; margin-left:-25px; }.tsunami-level strong { display:flex; align-items:center; justify-content:center; min-width:49px; height:43px; padding:0 5px; border-radius:8px; background:#7cc3ff; box-sizing:border-box; font-family:"Akshar",sans-serif; font-size:2em; font-weight:400; line-height:1; }.level-major-warning .tsunami-level strong { background:#d645ff; }.level-warning .tsunami-level strong { background:#fc3324; }.level-advisory .tsunami-level strong { color:#161a20; background:#f1de2f; }.tsunami-level b { font-size:1.14em; }
.tsunami-area-entries { padding-top:1px; }.tsunami-area-entry { margin:0; padding:0 0 7px; }.tsunami-area-entry h3 { margin:0 0 3px; font-size:1.12em; line-height:1.28; }.tsunami-area-entry p { display:flex; align-items:center; justify-content:center; min-height:27px; margin:0; padding:3px 7px; border-radius:12px; color:#15191f; background:#e7ed16; font-size:.82em; font-weight:700; line-height:1.3; text-align:center; }
.tsunami-observation-list { margin:8px 8px 2px; overflow:hidden; border-radius:8px; background:#263d61; }
.tsunami-observation-list>header { padding:5px 8px; background:#385784; font-weight:700; text-align:center; }
.tsunami-observation { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:7px 9px; border-bottom:1px solid rgba(255,255,255,.12); border-left:6px solid #fff248; }
.tsunami-observation.offshore { border-left-color:#d645ff; }.tsunami-observation:last-child { border-bottom:0; }
.tsunami-observation h3 { margin:0; overflow:hidden; font-size:.9em; white-space:nowrap; text-overflow:ellipsis; }
.tsunami-observation strong { font-family:"Akshar",sans-serif; font-size:1.42em; font-weight:500; }.tsunami-observation b { padding:2px 5px; border-radius:5px; color:#161a20; background:#fff248; font-size:.7em; }
.tsunami-observation time { grid-column:2/4; color:#cbd7e8; font-size:.72em; text-align:right; }
#tsunami-map-legend { position:absolute; right:12px; bottom:12px; z-index:9998; width:172px; padding:0 10px 9px; border-radius:8px; box-sizing:border-box; color:#f5f8fc; background:rgba(12,21,34,.92); box-shadow:0 2px 7px rgba(0,0,0,.42); pointer-events:none; }
#tsunami-map-legend>b { display:block; margin:0 -10px 6px; padding:5px 8px; border-radius:8px 8px 0 0; background:#385784; text-align:center; }
#tsunami-map-legend span { display:block; position:relative; padding-left:42px; font-size:.88em; line-height:24px; white-space:nowrap; }
#tsunami-map-legend span::before { content:""; position:absolute; top:8px; left:0; width:34px; height:8px; border-radius:5px; background:#7cc3ff; }
#tsunami-map-legend .major-warning::before { background:#d645ff; }#tsunami-map-legend .warning::before { background:#fc3324; }#tsunami-map-legend .advisory::before { background:#f1de2f; }#tsunami-map-legend .forecast::before { background:#7cc3ff; }
#tsunami-map-legend { display:none; }html[data-mode="tsunami"] #tsunami-map-legend:not([hidden]) { display:block; }
.eew-card,.realtime-detect { overflow: hidden; margin-bottom: 9px; border-radius: 10px; background: #192b48; box-shadow: 0 2px 7px rgba(0,0,0,.38); }
.realtime-detect>header { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:0 11px; background:#385784; font-weight:700; }
.eew-card { position:relative; height:379px; border-radius:0; background:transparent; box-shadow:none; }.eew-card.has-lg { height:379px; }.eew-card.has-lg.warning:not(.is-assumed) { height:440px; }.eew-card.is-assumed:not(.has-lg) { height:270px; }.eew-card.has-lg.is-assumed { height:379px; }
.eew-card-skin { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:fill; }
.eew-card>*:not(.eew-card-skin) { position:absolute; z-index:1; }
.eew-side { position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none; }
.eew-side dl { position: absolute; }
.eew-side .eew-description { position: absolute; }
.eew-mobile-heading { display:none; }
/* 背景画像内の予報・警報表示を覆い、種別と報番号を一つの表示にまとめる。 */
.eew-report-number { top:0; right:0; display:flex; width:42%; height:35px; align-items:center; justify-content:center; padding:0; border-radius:0 10px 0 0; color:#fdffab; background:#e10000; font-size:1.03em; font-weight:700; line-height:1; letter-spacing:.02em; white-space:nowrap; }
.eew-card.forecast .eew-report-number { color:#191500; background:#e4e600; }
.eew-card .eew-report-number.is-last { font-family:"BIZ UDPGothic",sans-serif; font-size:.9em; font-weight:700; letter-spacing:0; }
.eew-report-serial { margin-left:.28em; font-family:"Akshar",sans-serif; font-weight:400; letter-spacing:.02em; }
.eew-report-serial.number { font-size:1.12em; }
.eew-card.forecast .eew-report-number { transform:translateY(1px); }
.eew-card.forecast .eew-report-serial.number { margin-left:.45em; }
.eew-card h2 { top:51px; right:10px; left:10px; margin:0; overflow:hidden; font-size:1.35em; line-height:1.08; white-space:nowrap; text-overflow:ellipsis; }.eew-card h2.medium { font-size:1.18em; }.eew-card h2.long { font-size:1.02em; }
.eew-card h2 small { margin-left:4px; font-size:.57em; font-weight:400; }
.eew-card time { top:80px; right:11px; left:11px; display:block; margin:0; font-size:.85em; font-weight:500; white-space:nowrap; }.eew-card time b { margin-left:7px; font-size:.82em; font-weight:500; }
.eew-intensity { top:110px; right:10px; left:10px; display:flex; align-items:center; justify-content:flex-start; min-height:91px; border-radius:10px; background:#df1c20; }
.eew-card.forecast .eew-intensity { color:#172235; background:#f2d54a; }
.eew-intensity img { display:block; height:91px; object-fit:contain; }
.eew-intensity > img:not(.eew-unknown-intensity) { flex:1 1 100%; width:100%; min-width:0; object-fit:cover; object-position:left center; }
.eew-intensity img.eew-unknown-intensity { flex:1 1 100%; width:100%; height:91px; object-fit:contain; }
.eew-intensity.dark-label > img { filter:brightness(0) saturate(100%) opacity(.92); }
.eew-intensity strong { display:flex; flex:0 0 38%; align-items:center; justify-content:center; width:38%; margin-left:-5px; font-family:"Akshar",sans-serif; font-size:5em; font-weight:300; line-height:.85; transform:translateX(-10px);}
.eew-intensity strong img.eew-intensity-symbol { display:block; width:82px; height:82px; object-fit:contain; }
.eew-intensity-over { display:flex; flex:0 0 18px; flex-direction:column; align-items:center; justify-content:center; height:72px; margin-left:-7px; transform:translateX(10px); }
.eew-intensity-over i { display:block; height:9px; font-family:"Akshar",sans-serif; font-size:28px; font-style:normal; font-weight:500; line-height:14px; }
.eew-lg { top:210px; right:10px; left:10px; display:flex; align-items:center; justify-content:space-between; height:46px; margin:0; padding:0 13px; border-radius:9px; color:#fff; font-weight:700; }
.eew-lg img { display:block; flex:1 1 100%; width:100%; min-width:0; height:46px; object-fit:cover; object-position:left center; transform:translateX(-20px); }.eew-lg.light img { filter:brightness(0) saturate(100%) opacity(.92); }
/* 階級数字だけの横位置。負の値を大きくすると、文字画像の大きさを変えず左へ動く。 */
.eew-lg b { --eew-lg-number-x:-25px; display:flex; flex:0 0 14%; align-items:center; justify-content:flex-end; width:14%; font-family:"Akshar",sans-serif; font-size:2.52em; font-weight:400; line-height:1; transform:translateX(var(--eew-lg-number-x)); }
/* 背景パネルごとに数値2行の開始位置と行高を分離する。 */
.eew-card { --eew-metrics-top:223px; --eew-metrics-row-height:49px; }
.eew-card.warning:not(.has-lg):not(.is-assumed) { --eew-metrics-top:217px; --eew-metrics-row-height:57px; }
.eew-card.has-lg { --eew-metrics-top:250px; }
.eew-card.has-lg.warning:not(.is-assumed) { --eew-metrics-top:278px; --eew-metrics-row-height:57px; }
.eew-card dl { top:var(--eew-metrics-top); right:13px; left:13px; display:grid; grid-template-columns:1fr 118px; grid-template-rows:var(--eew-metrics-row-height) var(--eew-metrics-row-height); gap:0 5px; align-items:center; margin:0; }
.eew-card dt { visibility:hidden; }.eew-card dt,.eew-card dd { margin:0; }.eew-card dd { position:relative; display:flex; align-items:center;
 justify-content:flex-end; width:118px; min-width:0;
 padding-right:22px;
 overflow:visible;
 box-sizing:border-box;
 white-space:nowrap;
 font-family:"Akshar",sans-serif;
 font-size:3em;
 right:7px;
 line-height:1;
 transform: translateY(-1px);
 }
 .eew-card dd .eew-value {
 display:inline-block;
 }
 /* マグニチュードの数字：大きさとXY位置を個別調整 */
 .eew-card dd.eew-magnitude .eew-value {
 font-size:1.2em;
 font-weight: 300;
 transform:translate(0, 2px);
 }
 /* 深さの数字：大きさとXY位置を個別調整 */
 .eew-card dd.eew-depth .eew-value {
 font-size:0.8em;
 transform:translate(0, 0);
 }
 .eew-card dd i {
 position:absolute;
 top:50%;
 right:5px;
 display:block;
 width:18px;
 margin:0;
 font-size:1.5em;
 }
 /* マグニチュードの色帯：topで縦位置、translateの第1値で横位置を調整 */
 .eew-card dd.eew-magnitude i {
 top:calc(50% - 1px);
 transform:translate(10px, -50%);
 height:44px;
 }
 /* 深さの色帯：マグニチュードとは独立して調整 */
 .eew-card dd.eew-depth i {
 top:calc(50% - 7px);
 transform:translate(10px, -50%);
 height:33px;
 }
.eew-description { right:15px; bottom:11px; left:15px; display:block; width:calc(100% - 30px); height:37px; object-fit:contain; }
.realtime-detect { min-height: calc(100% - 2px); }
.eew-card + .realtime-detect { min-height: 245px; }
.realtime-detect>header { justify-content:center; height:36px; padding:0; font-size:1.05em; text-align:center; }
.realtime-maximum { display:flex; align-items:center; justify-content:space-between; min-height:92px; padding:9px 11px 6px 15px; }
.realtime-maximum-label { flex:1 1 auto; min-width:0; font-size:1.08em; font-weight:700; line-height:1.28; text-align:center; white-space:nowrap; }.realtime-maximum-label small { display:block; font:inherit; white-space:nowrap; }.realtime-maximum strong { display:flex; flex:0 0 91px; align-items:center; justify-content:center; width:91px; height:79px; padding:0; border-radius:10px; font-family:"Akshar",sans-serif; font-size:3.65em; font-weight:400; line-height:1; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.realtime-maximum-symbol { display:block; width:74px; height:74px; object-fit:contain; }
.realtime-stations { padding:0 11px 8px; }.realtime-stations div { display:flex; align-items:center; gap:8px; min-height:34px; margin:0; font-size:1.02em; font-weight:700; }.realtime-stations span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.realtime-region-intensity { display:block; flex:0 0 32px; width:32px; height:31px; object-fit:contain; }.realtime-stations p { margin:5px 0; color:#aebed5; font-size:.85em; }
:root.light-theme .eew-card,:root.light-theme .realtime-detect { color:#172435; background:#edf3fa; }

#replay-progress {
  display: block;
  width: calc(100% - 8px);
  height: 7px;
  margin: 2px 4px 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: rgba(8, 17, 31, 0.58);
  appearance: none;
}

#replay-progress[hidden] {
  display: none;
}

#replay-progress::-webkit-progress-bar {
  border-radius: 4px;
  background: rgba(8, 17, 31, 0.58);
}

#replay-progress::-webkit-progress-value {
  border-radius: 4px;
  background: #58a6d6;
  transition: width 120ms linear;
}

#replay-progress::-moz-progress-bar {
  border-radius: 4px;
  background: #58a6d6;
}

:root.light-theme #replay-progress,
:root.light-theme #replay-progress::-webkit-progress-bar {
  background: rgba(91, 111, 137, 0.24);
}

.replay-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #d87924;
  color: #fff;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}

:root.light-theme .replay-datetime-trigger {
  background: #e7edf6;
  color: #172435;
}

:root.light-theme .replay-datetime-frame {
  background: #e7edf6;
}

:root.light-theme .replay-picker {
  border-color: #7890ae;
  background: #e7edf6;
  color: #172435;
}

:root.light-theme .replay-picker::before {
  background: #e9eff6;
}

:root.light-theme .replay-picker button,
:root.light-theme .replay-picker select {
  color: #172435;
}

:root.light-theme .replay-time-row select {
  background: #e4ebf4;
}

.setting-row {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--divider-color);
}

.setting-row label {
  font-weight: 600;
}

.setting-row > label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.setting-row > label::before {
  display: none;
}

.setting-icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ac9df' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16M8 4v4M16 10v4M10 16v4'/%3E%3C/svg%3E");
}

.setting-icon-notificationSoundVolume,
.setting-icon-speechVolume {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ac9df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10H4zM16 9c1.5 1.5 1.5 4.5 0 6M19 6c3 3 3 9 0 12'/%3E%3C/svg%3E");
}

.setting-icon-mannerMode {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ac9df' stroke-width='2'%3E%3Cpath d='M19 16.5A8 8 0 0 1 8 5a8 8 0 1 0 11 11.5z'/%3E%3C/svg%3E");
}

.setting-icon-mannerStartTime,
.setting-icon-mannerEndTime,
.setting-icon-autoCameraReturnMinutes {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ac9df' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.setting-icon-autoCamera,
.setting-icon-autoCameraAnimation {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ac9df' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
}

.setting-icon-defaultTab {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ac9df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM4 9h16M9 9v10'/%3E%3C/svg%3E");
}

:root.light-theme .setting-icon {
  filter: brightness(0.68) saturate(1.15);
}

.setting-row-toggle {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.setting-row-toggle .setting-control {
  justify-content: flex-end;
}

.setting-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-control {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
}

.setting-control input[type="range"] {
  --range-progress: 0%;
  position: relative;
  width: 100%;
  height: 30px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.setting-control input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, #458eb2 0 var(--range-progress), var(--muted-color) var(--range-progress) 100%);
}

.setting-control input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9.5px;
  border: 0;
  appearance: none;
  background: url("/img/slider.png") center / contain no-repeat;
}

.setting-control input[type="range"]::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--muted-color);
}

.setting-control input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: #458eb2;
}

.setting-control input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  background: url("/img/slider.png") center / contain no-repeat;
}

.range-ticks {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  height: 9px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.range-ticks span {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 9px;
  border-radius: 1px;
  background: var(--muted-color);
  transform: translate(-50%, -50%);
}

.dropbox-frame {
  position: relative;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 10px 35px 10px 15px;
  border-image-source: url("/img/dropbox.svg");
  border-image-slice: 10 35 10 15 fill;
  border-image-width: 10px 35px 10px 15px;
  border-image-repeat: stretch;
  transition: filter 0.15s ease;
}

.setting-time-frame {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #526b8c;
  border-radius: 7px;
  background: #182944;
}

.setting-time-frame input[type="time"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--primary-text);
  font: 500 1.1em "Akshar", "BIZ UDPGothic", sans-serif;
  color-scheme: dark;
}

:root.light-theme .setting-time-frame {
  border-color: #8fa2bb;
  background: #e4ebf4;
}

:root.light-theme .setting-time-frame input[type="time"] {
  color-scheme: light;
}

.setting-control select {
  position: absolute;
  inset: -10px -35px -10px -15px;
  width: calc(100% + 50px);
  height: 40px;
  box-sizing: border-box;
  padding: 0 38px 0 18px;
  border: 0;
  border-radius: 7px;
  appearance: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.dropbox-frame:hover {
  filter: brightness(1.2);
}

.setting-control select:focus-visible {
  outline: none;
}

.setting-control select option {
  background: var(--option-background);
  color: var(--primary-text);
}

:root.light-theme .dropbox-frame {
  filter: brightness(1.42) saturate(0.7);
}

:root.light-theme .dropbox-frame:hover {
  filter: brightness(1.58) saturate(0.72);
}

:root.light-theme .setting-control select {
  color: #fff;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 66px;
  height: 40px;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.toggle-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 25ms linear, filter 0.12s ease;
}

.toggle-image.active {
  opacity: 1;
}

.toggle-switch:hover .toggle-image {
  filter: brightness(1.2);
}

.toggle-switch:has(input:focus-visible) {
  outline: 2px solid var(--primary-text);
  outline-offset: 3px;
  border-radius: 16px;
}

:root.light-theme .toggle-image {
  display: block;
  filter: brightness(1.32) saturate(0.76);
}

:root.light-theme .toggle-switch:hover .toggle-image {
  filter: brightness(1.48) saturate(0.8);
}

:root.light-theme .setting-control input[type="range"]::-webkit-slider-thumb {
  filter: drop-shadow(0 0 1px #526c89);
}

:root.light-theme .setting-control input[type="range"]::-moz-range-thumb {
  filter: drop-shadow(0 0 1px #526c89);
}

.setting-control output {
  min-width: 2ch;
  text-align: right;
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
  font-size: 1.2em;
}

/* 地図コンテナ（PC 横画面） */
#map-container {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 100%;
  background:#1d2b42;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:#1d2b42;
}

#audio-unlock {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10000;
  min-width: 190px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  color: #fff;
  background: rgba(25,43,70,.94);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  font: inherit;
  font-weight: 700;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#audio-unlock[hidden] { display: none; }

#map .maplibregl-canvas { background:#1d2b42; }

/* WebGL復旧中はブラウザが残した白い失効バッファを表示しない。 */
html.map-context-lost #map .maplibregl-canvas { visibility:hidden; }

:root.light-theme #map-container,:root.light-theme #map,:root.light-theme #map .maplibregl-canvas { background:#97aec7; }

#eew-intensity-legend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 9998;
  display: none;
  width: 90px;
  height: 260px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}

html[data-mode="realtime"] #eew-intensity-legend:not([hidden]) {
  display: block;
}

#zoom-control {
  position: absolute;
  left: 10px;
  bottom: 60px;
  display: grid;
  grid-template-rows: 38px 38px;
  width: 40px;
  height: 76px;
  zoom: var(--ui-scale);
  z-index: 9999;
}

#fit-map {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  zoom: var(--ui-scale);
  z-index: 9999;
}

#fit-map img {
  display: block;
  width: 40px;
  height: 40px;
}

#fit-map:is(:hover, :focus-visible) img {
  content: url("/img/map-fit-hover.svg");
}

#zoom-control button {
  position: relative;
  grid-column: 1;
  width: 40px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

#zoom-in {
  grid-row: 1;
}

#zoom-out {
  grid-row: 2;
}

.zoom-image {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 40px;
  height: 76px;
  pointer-events: none;
  z-index: 1;
}

#zoom-in:is(:hover, :focus-visible) ~ .zoom-image {
  content: url("/img/zoom1.svg");
}

#zoom-out:is(:hover, :focus-visible) ~ .zoom-image {
  content: url("/img/zoom2.svg");
}

#update-label {
  position: absolute;
  top: 14px;
  left: 60px;
  background: var(--panel-background);
  color: var(--primary-text);
  padding: 5px 14px;
  border-radius: 10px;
  font-weight: 200;
  line-height: 1.2;
  font-size: 18px;
  zoom: var(--ui-scale);
  z-index: 9999; /* MapLibre の上に出す */
  pointer-events: none; /* 地図操作を邪魔しない */
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
}

#update-label .time-num {
  font-family: "Akshar", "BIZ UDPGothic", sans-serif;
  font-size: 30px;
  letter-spacing: 0.9px;
}

/* 時刻の横に置き、地図やサイドバーを覆わず現在の警報対象を確認できるようにする。 */
#eew-warning-regions {
  position: absolute;
  top: 17px;
  left: calc(470px * var(--ui-scale));
  z-index: 9999;
  max-width: calc(100% - 500px * var(--ui-scale));
  overflow: hidden;
  padding: 6px 11px;
  border: 1px solid rgba(255, 86, 65, .75);
  border-radius: 8px;
  background: rgba(42, 20, 27, .92);
  color: #fff;
  font-size: calc(15px * var(--ui-scale));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

#eew-current-location {
  position: absolute;
  top: 56px;
  left: 60px;
  z-index: 9999;
  max-width: calc(100% - 80px);
  overflow: hidden;
  padding: 5px 10px;
  border: 1px solid rgba(255, 205, 61, .78);
  border-radius: 8px;
  background: rgba(25, 32, 45, .92);
  color: #fff;
  font-size: calc(15px * var(--ui-scale));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 更新から5秒経過したら赤文字にする */
#update-label.stale {
  color: var(--stale-color);
}

#system-status {
  position: absolute;
  top: max(7px, env(safe-area-inset-top));
  right: max(9px, env(safe-area-inset-right));
  z-index: 9998;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(20, 24, 30, 0.28);
  color: rgba(205, 210, 216, 0.52);
  font-family: "Akshar", sans-serif;
  font-size: calc(11px * var(--ui-scale));
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

html.portrait-layout:not(.horizontal-layout) #system-status {
  top: max(6px, env(safe-area-inset-top));
  right: max(7px, env(safe-area-inset-right));
  font-size: 10px;
}

:root.light-theme #system-status {
  border: 1px solid rgba(85, 105, 128, 0.28);
  background: rgba(226, 234, 243, 0.82);
  color: rgba(27, 43, 61, 0.78);
}

#manner-mode-indicator {
  position: absolute;
  top: calc(max(7px, env(safe-area-inset-top)) + 23px);
  right: max(9px, env(safe-area-inset-right));
  z-index: 9998;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(180, 188, 198, 0.22);
  border-radius: 5px;
  background: rgba(20, 24, 30, 0.34);
  color: rgba(215, 220, 227, 0.66);
  font-size: calc(11px * var(--ui-scale));
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

#manner-mode-indicator.active {
  display: flex;
}

#manner-mode-indicator > span {
  position: relative;
  font-size: 1.25em;
}

#manner-mode-indicator > span::after {
  content: "";
  position: absolute;
  top: 48%;
  left: -1px;
  width: 15px;
  height: 1px;
  background: currentColor;
  transform: rotate(-42deg);
}

html.portrait-layout:not(.horizontal-layout) #manner-mode-indicator {
  top: calc(max(6px, env(safe-area-inset-top)) + 21px);
  right: max(7px, env(safe-area-inset-right));
  font-size: 10px;
}

:root.light-theme #manner-mode-indicator {
  border-color: rgba(85, 105, 128, 0.25);
  background: rgba(226, 234, 243, 0.86);
  color: rgba(27, 43, 61, 0.72);
}

#tab-bar {
  position: absolute;
  top: 0px;
  left: 0px;

  width: 44px;
  background: var(--panel-background);
  padding: 4px 0;

  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  border-top-left-radius: 0;       /* 左側は直角 */
  border-bottom-left-radius: 0;

  align-items: center;

  display: flex;
  flex-direction: column;
  gap: 2px;

  z-index: 9999;
  zoom: var(--ui-scale);
}

.tab {
  position: relative;
  display: flex;
  cursor: pointer;
  user-select: none;
  justify-content: center;
  border-radius: 8px;
  align-items: center;
  width: 44px;
  height: 38px;
}

.tab[data-priority]::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: auto;
  left: auto;
  z-index: 4;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.tab[data-priority="red"]::after { background: #f02b32; }
.tab[data-priority="yellow"]::after { background: #ffd23f; }
.tab[data-priority="green"]::after { background: #43cf83; }

.tab-icon {
  width: 36px;
  height: 36px;
  opacity: 0.6; /* 非選択時は薄く */
  transition: opacity 0.2s;
  position: relative;
  z-index: 2;
}

:root.light-theme .tab-icon {
  filter: brightness(0.3);
}

.tab.active .tab-icon {
  opacity: 1.0; /* 選択中は濃く */
}

.menu-bg {
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--active-menu-background);
  border-radius: 7px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; /* 初期は非表示 */
  transition: opacity 0.2s;
  z-index: 1;
}

.tab.active .menu-bg {
  opacity: 1; /* 選択中だけ表示 */
}

/* 実際の表示領域が縦長のときにレイアウトを切り替える。
   iOS PWA では CSS の aspect-ratio が表示領域と一致しない場合があるため、
   portrait-layout は JavaScript から visualViewport を基準に設定する。 */

  /* スマホでは地図を上、情報パネルを下へ固定する */
  html.portrait-layout:not(.horizontal-layout),
  html.portrait-layout:not(.horizontal-layout) body {
    width: var(--app-viewport-width);
    max-width: var(--app-viewport-width);
    height: var(--app-viewport-height);
    overflow: hidden;
  }

  html.portrait-layout:not(.horizontal-layout) #app {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto auto 0;
    width: var(--app-viewport-width);
    max-width: var(--app-viewport-width);
    height: var(--app-viewport-height);
  }

  /* PWAのviewport-fit=cover領域まで地図を描画する。Dynamic Island直下の
     安全余白だけは操作部品の位置で避け、背景・地図は上端まで使用する。 */
  html.standalone-mode.portrait-layout:not(.horizontal-layout) #app {
    top: calc(-1 * env(safe-area-inset-top));
    height: calc(var(--app-viewport-height) + env(safe-area-inset-top));
  }

  html.portrait-layout:not(.horizontal-layout) #sidebar {
    order: 2;
    width: var(--app-viewport-width);
    max-width: var(--app-viewport-width);
    height: var(--mobile-panel-height) !important;
    min-height: 0;
    flex: none;
    padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: var(--mobile-font-size);
  }

  html.portrait-layout:not(.horizontal-layout) .panel,
  html.portrait-layout:not(.horizontal-layout) #settings-list,
  html.portrait-layout:not(.horizontal-layout) .setting-row,
  html.portrait-layout:not(.horizontal-layout) .setting-row:not(.setting-row-toggle) .setting-control,
  html.portrait-layout:not(.horizontal-layout) .setting-row:not(.setting-row-toggle) .range-control,
  html.portrait-layout:not(.horizontal-layout) .setting-row:not(.setting-row-toggle) .dropbox-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  html.portrait-layout:not(.horizontal-layout) .setting-row-toggle .setting-control {
    width: auto;
    min-width: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #map-container {
    order: 1;
    flex: none;
    width: var(--app-viewport-width);
    max-width: var(--app-viewport-width);
    height: var(--mobile-map-height) !important;
    overflow: hidden;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"] #sidebar,
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] #sidebar {
    display: none;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"] #map-container,
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] #map-container {
    height: 100% !important;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="setting"] #sidebar {
    height: var(--mobile-settings-panel-height) !important;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="setting"] #map-container {
    height: var(--mobile-settings-map-height) !important;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-panel-title img {
    margin-inline: auto;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-earthquake-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 6px 10px;
    padding: 10px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-earthquake-card > .earthquake-intensity {
    grid-column: 1;
    grid-row: 1 / 4;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 112px;
    padding: 10px 4px 6px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-earthquake-card > .earthquake-intensity span {
    font-size: 1em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-earthquake-card > .earthquake-intensity strong {
    place-self: stretch;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    transform: none;
    font-size: 3.7em;
    text-align: center;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: 4px;
    padding: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description time {
    grid-column: 1 / -1;
    font-size: 0.92em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description strong {
    grid-column: 1;
    font-size: 1.3em;
    white-space: nowrap;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description > span {
    grid-column: 2;
    align-self: end;
    min-width: 0;
    padding-bottom: 1px;
    font-size: 0.72em;
    white-space: nowrap;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description-suffix-full {
    display: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-description-suffix-short {
    display: inline;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-metrics {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    align-items: end;
    padding: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-metrics > span {
    font-size: 0.76em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-metric-group {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    justify-content: center;
    gap: 0 4px;
    min-width: 0;
    font-size: inherit;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-depth-group {
    grid-column: 1;
    grid-row: 1;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-magnitude-group {
    grid-column: 2;
    grid-row: 1;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-metric-group > span,
  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-metric-group > strong {
    align-self: end;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-metric-group strong {
    justify-self: start;
    min-width: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-magnitude-label {
    font-size: inherit;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-magnitude-label-full {
    display: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-magnitude-label-short {
    display: inline;
    font-family: "Akshar", sans-serif;
    font-size: 20px;
    line-height: 1;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-magnitude-value {
    font-size: 2.15em;
    line-height: 1;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-depth-value {
    min-width: 0;
    font-size: 1.55em;
    line-height: 1;
    white-space: nowrap;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-depth-value.condition {
    font-size: 1.25em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-magnitude-color {
    width: 9px;
    height: 26px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-depth-color {
    width: 9px;
    height: 23px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-tsunami {
    display: grid;
    grid-column: 2;
    grid-row: 3;
    place-items: center;
    height: 30px;
    padding: 0 5px;
    font-size: 0.9em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-tsunami span {
    line-height: 1;
    transform: translateY(1px);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-list {
    padding-inline: 4px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-metrics {
    grid-column: 2;
    grid-row: 1 / 3;
    grid-template-columns: auto 48px 7px auto 28px 8px;
    align-self: center;
    justify-content: start;
    width: auto;
    font-size: 0.95em;
    transform: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-metrics .history-depth-value,
  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-metrics .history-magnitude-value {
    justify-self: end;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    width: 100%;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-body > strong {
    grid-column: 1;
    grid-row: 1;
    font-size: calc(1.15em * var(--history-name-scale, 1));
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-body > time {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.92em;
  }

  html.portrait-layout:not(.horizontal-layout) .settings-panel h1 {
    position: static;
    margin: 0;
    padding: 0 10px;
    background: var(--section-header-background);
  }

  html.portrait-layout:not(.horizontal-layout) .setting-row {
    padding: 14px 0;
  }

  html.portrait-layout:not(.horizontal-layout) .range-control {
    height: 44px;
  }

  html.portrait-layout:not(.horizontal-layout) .setting-control input[type="range"] {
    height: 44px;
  }

  html.portrait-layout:not(.horizontal-layout) .dropbox-frame,
  html.portrait-layout:not(.horizontal-layout) .setting-control select {
    height: 44px;
  }

  /* 片手で押しやすいようタブを地図下部へ横並びにする */
  html.portrait-layout:not(.horizontal-layout) #tab-bar {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 50%;
    width: auto;
    padding: 4px 7px;
    border-radius: 13px;
    flex-direction: row;
    gap: 3px;
    transform: translateX(-50%) scale(var(--mobile-control-scale));
    transform-origin: center bottom;
  }

  html.portrait-layout:not(.horizontal-layout) .tab {
    width: 50px;
    height: 50px;
  }

  html.portrait-layout:not(.horizontal-layout) .tab-icon {
    width: 46px;
    height: 46px;
  }

  html.portrait-layout:not(.horizontal-layout) .tab[data-priority]::after {
    top: 1px;
    right: 1px;
    bottom: auto;
    left: auto;
    width: 14px;
    height: 14px;
  }

  html.portrait-layout:not(.horizontal-layout) .menu-bg {
    width: 39px;
    height: 39px;
  }

  html.portrait-layout:not(.horizontal-layout) #zoom-control {
    left: 10px;
    bottom: calc(var(--mobile-control-bottom) + var(--mobile-zoom-stack-offset));
    transform: scale(var(--mobile-control-scale));
    transform-origin: left bottom;
  }

  html.portrait-layout:not(.horizontal-layout) #fit-map {
    left: 10px;
    bottom: var(--mobile-control-bottom);
    transform: scale(var(--mobile-control-scale));
    transform-origin: left bottom;
  }

  /* 全画面地図のときだけ、iPhone PWAのホームインジケータを避ける。 */
  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"] #tab-bar,
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] #tab-bar {
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"],
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] {
    --mobile-control-bottom: max(10px, env(safe-area-inset-bottom));
  }

  html.portrait-layout:not(.horizontal-layout) #update-label {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    max-width: calc(var(--app-viewport-width) - max(32px, env(safe-area-inset-left)) - max(32px, env(safe-area-inset-right)));
    transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    font-size: calc(15px * var(--mobile-ui-scale));
  }

  html.portrait-layout:not(.horizontal-layout) #update-label .time-num {
    font-size: clamp(21px, calc(24px * var(--mobile-ui-scale)), 7vw);
  }

  html.portrait-layout:not(.horizontal-layout) #eew-warning-regions {
    top: calc(max(10px, env(safe-area-inset-top)) + 43px);
    left: max(10px, env(safe-area-inset-left));
    max-width: calc(var(--app-viewport-width) - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)));
    padding: 4px 8px;
    font-size: calc(12px * var(--mobile-ui-scale));
  }

  html.portrait-layout:not(.horizontal-layout) #eew-current-location {
    top: calc(max(10px, env(safe-area-inset-top)) + 72px);
    left: max(10px, env(safe-area-inset-left));
    max-width: calc(var(--app-viewport-width) - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)));
    padding: 4px 8px;
    font-size: calc(12px * var(--mobile-ui-scale));
  }

@media (max-width: 350px) {
  html.portrait-layout:not(.horizontal-layout) #panel-quake .latest-earthquake-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px 8px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-body {
    column-gap: 6px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-metrics {
    grid-template-columns: auto 42px 7px auto 26px 8px;
    gap: 0 3px;
    font-size: 0.88em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-quake .earthquake-history-body > strong {
    font-size: calc(1.08em * var(--history-name-scale, 1));
  }
}
.setting-row[hidden] {
  display: none;
}

/* 外枠の形は保ったまま、設定欄の余白へ少し広げる。 */
#settings-list .dropbox-frame {
  width: calc(100% + 8px);
  max-width: calc(100% + 8px);
  margin-inline: -4px;
}

html.portrait-layout:not(.horizontal-layout) #settings-list .dropbox-frame {
  width: calc(100% + 8px);
  max-width: calc(100% + 8px);
}

/* 縦向きスマホでは、緊急情報も地図と同時に確認できる二段表示にする。 */
@media (max-aspect-ratio: 1/1) {
  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"] #sidebar,
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] #sidebar,
  html.portrait-layout:not(.horizontal-layout)[data-mode="quake"] #sidebar,
  html.portrait-layout:not(.horizontal-layout)[data-mode="setting"] #sidebar {
    display: block;
    height: 30% !important;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: #14243d;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"] #map-container,
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] #map-container,
  html.portrait-layout:not(.horizontal-layout)[data-mode="quake"] #map-container,
  html.portrait-layout:not(.horizontal-layout)[data-mode="setting"] #map-container {
    height: 70% !important;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="setting"] #sidebar {
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
  }

  /* タブによって地図の高さが変わっても、操作ボタンの下端を揃える。 */
  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"],
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] {
    --mobile-control-bottom: 10px;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="realtime"] #tab-bar,
  html.portrait-layout:not(.horizontal-layout)[data-mode="tsunami"] #tab-bar {
    bottom: 10px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime,
  html.portrait-layout:not(.horizontal-layout) #panel-tsunami {
    min-height: 100%;
    padding-bottom: 10px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card {
    margin-inline: auto;
  }

  /* PC用の縦長EEWカードを、下部パネル内で完結するスマホ用カードへ切り替える。 */
  html.portrait-layout:not(.horizontal-layout) #panel-realtime {
    height: 100%;
    padding: 0;
    overflow: hidden;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 94px;
    grid-template-rows: 22px 27px 17px minmax(30px, 1fr) 21px;
    grid-template-areas:
      "report report"
      "title intensity"
      "time intensity"
      "metrics metrics"
      "description description";
    gap: 2px 7px;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 7px 5px;
    overflow: hidden;
    border-radius: 9px;
    background: #192b48;
    box-shadow: 0 2px 7px rgba(0,0,0,.38);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card.has-lg {
    grid-template-rows: 22px 25px 16px minmax(34px, 1fr) 20px 20px;
    grid-template-areas:
      "report report"
      "title intensity"
      "time intensity"
      "metrics metrics"
      "lg lg"
      "description description";
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card-skin {
    display: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card > *:not(.eew-card-skin) {
    position: static;
    min-width: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-report-number {
    grid-area: report;
    width: 100%;
    height: 22px;
    border-radius: 8px 8px 3px 3px;
    font-size: .88em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2 {
    grid-area: title;
    align-self: end;
    overflow: hidden;
    font-size: clamp(.9em, 3.8vw, 1.08em);
    line-height: 1;
    text-overflow: ellipsis;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2.medium,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2.long {
    font-size: clamp(.82em, 3.4vw, 1em);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2 small {
    font-size: .63em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card time {
    grid-area: time;
    align-self: start;
    overflow: hidden;
    font-size: .63em;
    line-height: 1;
    text-overflow: ellipsis;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card time b {
    margin-left: 4px;
    font-size: 1em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity {
    grid-area: intensity;
    min-height: 0;
    height: 100%;
    border-radius: 7px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity img,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity img.eew-unknown-intensity {
    height: 100%;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity strong {
    font-size: 3.25em;
    transform: translateX(-5px);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity strong img.eew-intensity-symbol {
    width: 54px;
    height: 54px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-lg {
    grid-area: lg;
    height: 20px;
    padding: 0 7px;
    border-radius: 5px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-lg img {
    height: 20px;
    transform: translateX(-9px);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-lg b {
    font-size: 1.45em;
    transform: translateX(-7px);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dl {
    grid-area: metrics;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dt {
    display: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd {
    position: relative;
    right: auto;
    display: flex;
    width: auto;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 11px 0 0;
    font-size: 1.6em;
    transform: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd::before {
    margin-right: 4px;
    font-family: "BIZ UDPGothic", sans-serif;
    font-size: .47em;
    font-weight: 700;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-magnitude::before { content: "M"; }
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-depth::before { content: "深さ"; }
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-magnitude .eew-value,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-depth .eew-value { font-size: 1em; transform: none; }
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd i,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-magnitude i,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-depth i {
    top: 50%;
    right: 1px;
    width: 7px;
    height: 23px;
    transform: translateY(-50%);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-description {
    grid-area: description;
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card + .realtime-detect {
    display: none;
  }

  /* 最新地震パネルと同じ、左に最大震度・右に震源要素を置く構成に統一する。
     既存のPC用スキン座標には依存せず、狭い下部パネルでも全要素を確保する。 */
  html.portrait-layout:not(.horizontal-layout) #panel-realtime {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card.has-lg {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: 20px 23px 16px minmax(48px, 1fr) 20px 28px;
    grid-template-areas:
      "heading report"
      "title title"
      "time time"
      "intensity side"
      "intensity side"
      "lg side";
    gap: 2px 7px;
    height: 177px;
    min-height: 177px;
    margin: 0 0 6px;
    padding: 7px 8px;
    border-radius: 10px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card.has-lg {
    grid-template-rows: 20px 23px 16px minmax(44px, 1fr) 19px;
    grid-template-areas: "heading report" "title title" "time time" "intensity side" "lg side";
    height: 177px;
    min-height: 177px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-mobile-heading {
    grid-area: heading;
    position: static;
    display: block;
    align-self: center;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    line-height: 1;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card.forecast .eew-mobile-heading { color: #f4df55; }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-report-number {
    justify-self: end;
    width: auto;
    min-width: 74px;
    height: 23px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: .8em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2 {
    align-self: center;
    font-size: clamp(1em, 4.3vw, 1.25em);
    line-height: 1.05;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2.medium,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card h2.long {
    font-size: clamp(.9em, 3.8vw, 1.1em);
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card time {
    align-self: center;
    font-size: .68em;
    line-height: 1.1;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity {
    align-self: stretch;
    border-radius: 9px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity > img:not(.eew-unknown-intensity) {
    width: auto;
    height: 100%;
    flex: 1 1 auto;
    object-fit: contain;
    object-position: center;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-intensity strong {
    flex-basis: 35%;
    font-size: 3.6em;
    transform: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dl {
    grid-area: auto;
    gap: 4px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-side {
    grid-area: side;
    position: static;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    pointer-events: auto;
  }
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-side dl,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-side .eew-description {
    position: static;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd {
    justify-content: flex-start;
    padding-right: 9px;
    font-size: 1.42em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd i,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-magnitude i,
  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-card dd.eew-depth i {
    height: 22px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-lg {
    height: 19px;
    padding-inline: 8px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-lg img {
    height: 19px;
    width: auto;
    object-fit: contain;
    transform: none;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .eew-description {
    width: 100%;
    height: 24px;
    object-fit: contain;
  }

  /* SCP（予想震度凡例）はスマホの地図を圧迫しないよう縮小し、
     下部のタブ切替ボタンとも重ならない位置へ移す。 */
  html.portrait-layout:not(.horizontal-layout) #eew-intensity-legend {
    right: 7px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: 45px;
    height: 132px;
    opacity: .9;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .realtime-detect {
    min-height: 190px;
    margin-bottom: 0;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-realtime .realtime-maximum {
    min-height: 82px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-summary,
  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-empty {
    border-radius: 10px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-summary header,
  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-empty header {
    min-height: 40px;
    font-size: 1.16em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-summary h2 {
    font-size: 1.5em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-area-list {
    padding-inline: 10px;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-area-entry h3 {
    font-size: 1.18em;
  }

  html.portrait-layout:not(.horizontal-layout) #panel-tsunami .tsunami-area-entry p {
    min-height: 31px;
    font-size: .9em;
  }

  html.portrait-layout:not(.horizontal-layout) #tsunami-map-legend {
    right: 9px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: scale(.88);
    transform-origin: right bottom;
  }

  html.portrait-layout:not(.horizontal-layout)[data-mode="setting"] .settings-panel h1 {
    position: static;
    top: auto;
    z-index: auto;
    min-height: 42px;
    display: flex;
    align-items: center;
  }
}