/* プロッター用キャンバスコンテナ */
#canvas-container {
  flex: 4;
  max-height: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}

/* サイドメニュー */
#side-menu {
  flex: 1;
  min-width: 300px;
  background: #f9f9f9;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  font-size: 1.3rem;
}
#side-menu p {
  margin: 8px 0;
}

#proposed-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  color: grey;
  font-size: 1.2rem;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

#proposed-link:hover {
  opacity: 1.0;
}

#controls-container {
  	border-bottom:1px solid #ccc;
	font-weight: normal;
	margin-bottom: 0;
}
/* プロッター用キャンバスコンテナ */
#controls-container > label {
	display: block;
}
#controls-container > label > select {
	margin-bottom: 0;
}
#search-box {
	width: 100%;
  	padding: 8px;
  	box-sizing: border-box;
  	margin-top: 1rem;
}
#search-box > input{
	margin-bottom: 0;
}
#legend-container {
	background-color: #1a1a1a; /* 少し柔らかい黒 */
	color: white;
	padding: 0 5px;
	border-radius: 1%;
	max-height: 50%;
	overflow-y: auto;
	box-sizing: border-box;
	position: absolute;
	right: 1rem;
	top: 1rem;
	z-index: 10;
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}
#legend-container > .legend-toggle {
	margin: 0 0 8px 0; /* マージン調整 */
	cursor: pointer; /* クリック可能であることを示すカーソル */
	user-select: none; /* テキスト選択を無効化 */
	position: sticky; /* スクロール時にタイトルを固定 */
	top: 0;
	background-color: #1a1a1a; /* 背景色を同じにして文字が透けないようにする */
	padding: 0.1em 0.1em; /* 上下の余白 */
}

#legend-items-wrapper {
	display: block;
}
#legend-items-wrapper > div {
	display: flex;
	align-items: center;
	margin-bottom: 0.1em;
}
#legend-items-wrapper .color-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border-radius: 3px;
	border: 1px solid #555; /* 暗い背景でも見やすいように枠線を追加 */
	/* background-colorはHTMLやJS側で設定してください */
}
#legend-items-wrapper hr {
	border-color: #444; /* 区切り線の色を調整 */
	margin-bottom: 0;
	margin-top: 0;
}

/* キャンバスの見た目とアスペクト比 */
canvas {
  width: 100%;        /* 親要素幅にフィット */
  aspect-ratio: 1 / 1; /* 縦横比1:1 */
}

h2 {
	text-align: left;
}
h3 {
	font-size: 1.8rem;
}
h3.edc-header {
	font-size: 1.8rem;
}
h3.edc-header::before {
	background-color: #3a536b;
}

.c-neighbor-item {
	border: 2px solid rgb(228, 229, 234);
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
}
.c-neighbor-item > p {
	margin: 0;
}
.u-strong {
	color: inherit;
}

@media screen and (orientation: portrait) {
#app {
    flex-flow: column;
}
#canvas-container {
    width: 100%;
	max-height: 70%;
}
#side-menu {
    min-height: 400px;
    width: 100%;
	padding: 10px;
}
#details-container{
	margin-bottom: 5vh;
}
#controls-container {
	height: 4rem;
	padding: 5px 0;
}
#controls-container > label {
	float: left;
	padding-left: 5px;
	height: 100%;
}
#controls-container > label > select {
	margin-bottom: 0;
	height: 100%;
}
}