:root {
  --primary: #3f51b5;
  --accent: #ff9800;
  --bg: #f7f8fa;
  --border: #e0e0e0;
}

body {
  margin: 0;
  font-family: 'Segoe UI', 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: #222;
}

header {
  background: var(--primary);
  color: #fff;
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  font-size: 1.3em;
  margin: 0;
}

nav button {
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 5px;
  margin-left: 6px;
  padding: 0.4em 1em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

nav button:hover {
  background: var(--accent);
  color: #fff;
}

#userInfo {
  margin-left: 1em;
}

main {
  max-width: 700px;
  margin: 16px auto;
  padding: 0 8px;
  min-height: 60vh;
}

section {
  display: none;
}

section.active {
  display: block;
}

#map {
  width: 100%;
  height: 60vh;
  background: #d3e5ff;
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.popup {
  position: absolute;
  z-index: 11;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 5px 16px #0002;
  padding: 12px 16px;
  display: none;
}

.pin {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff9800" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') center/contain no-repeat;
  cursor: pointer;
  transform: translate(-50%, -100%);
}

#detailSection, #formSection {
  background: #fff;
  border-radius: 8px;
  padding: 20px 18px 12px;
  box-shadow: 0 5px 16px #0001;
}

#detailContent img {
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 12px;
}

#formSection form label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

#formSection input[type="text"],
#formSection input[type="email"],
#formSection input[type="password"],
#formSection textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px;
  font-size: 1em;
  margin-top: 4px;
}

#formSection button,
#detailSection button,
#authSection button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6em 1.3em;
  font-size: 1em;
  margin-top: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

#formSection button:hover,
#detailSection button:hover,
#authSection button:hover {
  background: var(--accent);
}

#authSection {
  background: #fff;
  border-radius: 8px;
  padding: 24px 20px;
  box-shadow: 0 5px 16px #0001;
  max-width: 350px;
  margin: 30px auto;
}

#authSection label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

#authSection input[type="email"],
#authSection input[type="password"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px;
  font-size: 1em;
  margin-top: 4px;
}

#authMsg {
  color: #d32f2f;
  font-size: 0.97em;
  min-height: 1.2em;
}

footer {
  text-align: center;
  padding: 28px 0 18px;
  font-size: 0.95em;
  color: #888;
}

@media (max-width: 800px) {
  main {
    max-width: 100%;
    padding: 0;
  }
  #map {
    height: 45vh;
  }
}
@media (max-width: 600px) {
  header, main, footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #map {
    height: 38vh;
  }
  #formSection, #detailSection {
    padding: 11px 7px 7px;
  }
}