* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; }
body { display: flex; }

#sidebar {
  width: 320px;
  min-width: 320px;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  background: #faf7f2;
  border-right: 1px solid #ddd;
}
#map { flex: 1; height: 100%; }

h1 { margin: 0; font-size: 22px; color: #4a3728; }
.subtitle { margin: 2px 0 12px; color: #8a7a6a; font-size: 13px; }

section { margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 600; color: #5a4a3a; margin-bottom: 4px; }
input[type="date"], select {
  width: 100%; padding: 6px 8px; font-size: 14px;
  border: 1px solid #ccc; border-radius: 6px; background: #fff;
}

.info-box { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #333; }
.info-box .star-name { font-weight: 700; color: #7b1fa2; }

.toggle { display: flex; gap: 6px; }
.toggle button {
  flex: 1; padding: 6px; font-size: 14px; border: 1px solid #ccc;
  border-radius: 6px; background: #fff; cursor: pointer;
}
.toggle button.active { background: #4a3728; color: #fff; border-color: #4a3728; }

#btn-locate {
  margin-top: 8px; width: 100%; padding: 8px; font-size: 14px;
  border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer;
}
#btn-locate:hover { background: #f0ece5; }

.search-row { display: flex; gap: 6px; }
.search-row input {
  flex: 1; padding: 6px 8px; font-size: 14px;
  border: 1px solid #ccc; border-radius: 6px;
}
.search-row button {
  padding: 6px 12px; font-size: 14px; border: 1px solid #4a3728;
  border-radius: 6px; background: #4a3728; color: #fff; cursor: pointer;
  white-space: nowrap;
}
.search-row button:hover { background: #5f4a38; }

.candidates { margin-top: 4px; }
.candidates .candidate {
  padding: 6px 8px; font-size: 12px; border: 1px solid #e5ded4;
  border-radius: 6px; background: #fff; cursor: pointer; margin-bottom: 4px;
  line-height: 1.4;
}
.candidates .candidate:hover { background: #f0ece5; }
.candidates .searching, .candidates .no-result {
  font-size: 12px; color: #999; padding: 4px 0;
}

#dest-info .dest-name { font-weight: 700; }
#dest-info .clear-dest {
  font-size: 11px; color: #c62828; cursor: pointer; text-decoration: underline;
  background: none; border: none; padding: 0; margin-top: 2px;
}
.hint { font-size: 11px; color: #999; margin: 6px 0 0; }

#result-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#result-table th, #result-table td { padding: 4px 6px; border-bottom: 1px solid #e5ded4; text-align: left; }
#result-table th { color: #8a7a6a; font-weight: 600; }
.j-kichi { color: #2e7d32; font-weight: 700; }
.j-kyo { color: #c62828; font-weight: 700; }
.j-hei { color: #888; }

.disclaimer { font-size: 11px; color: #aaa; }

/* スマホ縦画面: 地図を上、操作パネルを下に */
@media (max-width: 700px) {
  html, body { height: 100dvh; }
  body { flex-direction: column-reverse; }
  #sidebar {
    width: 100%; min-width: 0; height: 52dvh;
    border-right: none; border-top: 1px solid #ddd;
    padding: 12px;
  }
  #map { height: 48dvh; flex: none; }

  h1 { font-size: 18px; display: inline; }
  .subtitle { display: inline; margin-left: 8px; font-size: 11px; }

  /* iPhoneは入力欄の文字が16px未満だと自動ズームして崩れるため16pxに */
  input[type="date"], select, .search-row input, .search-row button, #btn-locate {
    font-size: 16px;
  }
  input[type="date"], select { padding: 10px; }
  .search-row button, #btn-locate { padding: 10px 14px; }
  .toggle button { font-size: 16px; padding: 10px 4px; }

  #result-table { font-size: 13px; }
  #result-table th, #result-table td { padding: 6px 4px; }
  .info-box { font-size: 14px; }
  .hint { display: none; }
}