:root {
  --color-bg: #f5f7f6;
  --color-text: #1c2b2a;
  --color-accent: #0b7285;
  --color-warn-bg: #fff1e6;
  --color-warn-border: #e8590c;
  --color-warn-text: #7a3103;
  --color-neutral-bg: #eef4f2;
  --color-neutral-border: #74a99a;
  --color-neutral-text: #205347;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

.site-header {
  padding: 1.5rem 1rem 1rem;
  text-align: center;
}

.site-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
  color: var(--color-accent);
}

.tagline {
  margin: 0;
  color: #4b5f5c;
  font-size: 0.95rem;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.hidden { display: none; }

/* 共有URL(?lat=&lon=)で開いた場合は、判定完了前でも初期画面を一切見せない */
html.has-shared-location body > header,
html.has-shared-location body > main {
  display: none;
}
html.has-shared-location #result-panel.hidden {
  display: block;
}

.lead {
  margin-top: 0;
}

#check-btn {
  display: block;
  width: 100%;
  padding: 0.9rem;
  font-size: 1.05rem;
  font-weight: bold;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

#check-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.secondary {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem;
  font-size: 0.95rem;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
}

.status-text {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: #556;
  min-height: 1.2em;
}

.result-badge {
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.75rem;
}

.result-badge.warn {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  color: var(--color-warn-text);
}

.result-badge.neutral {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-neutral-border);
  color: var(--color-neutral-text);
}

.result-badge.error {
  background: #f1f1f1;
  border: 1px solid #999;
  color: #444;
}

.result-detail {
  font-size: 0.9rem;
  color: #445;
}

/* 結果表示: 地図を画面いっぱいに表示し、操作パネルはボトムシートとして地図に重ねる */
#result-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
}

#result-panel.hidden {
  display: none;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 1;
}

/* 結果表示中は地図を最大限に使うため、通常のページ要素は隠す */
body.result-active > header,
body.result-active > main,
body.result-active > footer {
  display: none;
}

.zoom-indicator {
  background: rgba(255, 255, 255, 0.85);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #334;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sheet {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 48vh;
  max-height: 48dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
  padding: 0.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #ccc;
  margin: 0.5rem auto 0.75rem;
}

.sheet-disclaimer {
  font-size: 0.78rem;
  color: #667;
  margin: 0.75rem 0 0;
}

.sheet .links {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.map-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #667;
}

.hazard-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #334;
  margin: 0.5rem 0;
  cursor: pointer;
}

.disclaimer {
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #445;
}

.disclaimer .links {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.ad-slot {
  min-height: 90px;
  margin-bottom: 1rem;
}

#sheet-ad-slot {
  min-height: 50px;
  margin: 0.75rem 0;
}

.about {
  font-size: 0.85rem;
  color: #556;
}

.about summary {
  cursor: pointer;
  color: var(--color-accent);
}

.site-footer {
  text-align: center;
  font-size: 0.8rem;
  color: #778;
  padding: 1rem;
}

.site-footer a {
  color: inherit;
}