body, html { 
    margin: 0; padding: 0; height: 100%; font-family: sans-serif; 
    display: flex; flex-direction: column; 
}

/* ヘッダーエリア */
.header-controls { 
    padding: 10px; background: #eee; 
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; gap: 10px;
}

.btn {
    flex: 1; padding: 12px; font-size: 16px; cursor: pointer; border: none; 
    color: white; border-radius: 4px; background-color: #4CAF50;
    font-weight: bold;
}
.btn:hover { opacity: 0.9; }
.btn-help { background-color: #607D8B; flex: 0 0 auto; width: auto; min-width: 100px; }

/* レイアウト */
.app-container { display: flex; flex: 1; overflow: hidden; }
.map-container { flex: 7; display: flex; flex-direction: column; }
#map { flex-grow: 1; z-index: 1; }
.list-container { flex: 3; background-color: #f9f9f9; border-left: 2px solid #ddd; overflow-y: auto; }

/* アコーディオン（リストヘッダー） */
details summary {
    list-style: none; cursor: pointer; outline: none; user-select: none;
    padding: 10px 15px; background: #e0e0e0; 
    position: sticky; top: 0; z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    display: flex; justify-content: space-between; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary:hover { background: #d0d0d0; }

/* ★変更：タイトルとアイコンのグループ */
.summary-title {
    display: flex; align-items: center; gap: 8px; /* 文字とアイコンの間隔 */
}
.summary-title h3 { margin: 0; font-size: 16px; }

/* ★追加：回転するアイコンの設定 */
.toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease; /* 0.3秒かけて滑らかに動く */
    font-size: 12px;
    color: #555;
}

/* ★追加：リストが開いている時（open属性がある時）のアイコンの状態 */
details[open] .toggle-icon {
    transform: rotate(180deg); /* くるっと回転させる */
}

/* ヘッダー内ボタン */
.list-head-btns { display: flex; gap: 5px; }
.btn-mini {
    padding: 5px 10px; font-size: 12px; cursor: pointer;
    border: 1px solid #999; border-radius: 4px;
    background: white; color: #333;
}
.btn-mini:hover { background: #f0f0f0; }

#data-list { padding: 15px; }

/* データ項目 */
.data-item {
    background: white; padding: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer;
}
.data-item:hover { background: #f0f0f0; }
.data-item img { max-width: 100%; max-height: 100px; display: block; margin-top: 5px; border-radius: 3px; }

.popup-form { display: flex; flex-direction: column; gap: 10px; }
.popup-image { max-width: 100%; max-height: 150px; margin-top: 10px; border-radius: 5px; }
.action-btns { display: flex; gap: 5px; margin-top: 10px; }
.list-action-btns { margin-top: 5px; justify-content: flex-end; }
.btn-small { padding: 5px 10px; font-size: 12px; cursor: pointer; border: none; border-radius: 3px; color: white; }
.edit-btn { background-color: #4CAF50; }
.delete-btn { background-color: #f44336; }
.edit-btn:hover, .delete-btn:hover { opacity: 0.8; }

.clickable-image { cursor: pointer; transition: 0.2s; }
.clickable-image:hover { opacity: 0.7; }

/* モーダル */
.modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);
    align-items: center; justify-content: center;
}
.modal-content { max-width: 95%; max-height: 95%; border-radius: 5px; }
.modal-close { position: absolute; top: 15px; right: 25px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; }

/* テキストモーダル（ヘルプ） */
.text-content {
    background-color: white; padding: 25px;
    width: 90%; max-width: 600px; max-height: 80vh;
    overflow-y: auto; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: left;
}
.text-content h2 { margin-top: 0; border-bottom: 2px solid #ddd; padding-bottom: 10px; }
.text-content h3 { margin-top: 20px; color: #4CAF50; border-left: 5px solid #4CAF50; padding-left: 10px; }
.text-content ul { padding-left: 20px; }
.text-content li { margin-bottom: 5px; }

/* スマホ対応 */
@media (max-width: 768px) {
    .app-container { flex-direction: column; }
    .map-container { flex: 1; }
    .list-container { flex: none; max-height: 40vh; border-left: none; border-top: 2px solid #ddd; }
}