.mpa-app,.mpa-app *{box-sizing:border-box}
.mpa-app{--navy:#29496c;--gold:#e7c96e;font-family:"BIZ UDGothic",system-ui,sans-serif;color:#284561;background:#f2f8fb;display:flex;flex-direction:column;width:100%;height:100dvh;min-height:520px;overflow:hidden;position:relative}
.mpa-app button,.mpa-app select{font:inherit}
.mpa-header{background:var(--navy);color:#fff;min-height:58px;border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:14px;padding:8px 16px;flex-shrink:0}
.mpa-header strong{font-size:1.05rem}.mpa-header small{font-size:.74rem;display:block;color:#d3e3ed}.mpa-spacer{flex:1}
.mpa-app button{cursor:pointer}.mpa-main{position:relative;flex:1;min-height:0;padding:10px;display:flex;flex-direction:column;gap:8px}
.mpa-map{background:white;border:1px solid #cddfe7;border-radius:16px;overflow:hidden;flex:1;min-height:0;box-shadow:0 4px 14px #2c567015}
.mpa-map canvas{width:100%;height:100%;display:block}.mpa-caption{background:#fff;border:1px solid #d2e5ec;border-radius:12px;padding:10px 14px;line-height:1.4;font-size:.9rem}
.mpa-caption strong{display:block;color:#29496c;font-size:1rem}.mpa-choice{border:0;background:var(--gold);color:#243d57;border-radius:12px;padding:10px 16px;font-weight:900}
.mpa-fabs{position:absolute;right:18px;bottom:86px;display:flex;flex-direction:column;gap:9px;z-index:5}
.mpa-fabs button{width:54px;height:54px;border-radius:50%;border:1px solid #bdd7e3;background:#fff;color:#29496c;box-shadow:0 3px 12px #264e7133;font-weight:bold;font-size:.75rem}
.mpa-fabs button:hover,.mpa-projections button.active{background:var(--gold);color:#243d57}
.mpa-pop{position:absolute;z-index:6;background:#fff;border:1px solid #cbdde5;box-shadow:0 8px 28px #2c567029;border-radius:14px;padding:14px;right:82px;bottom:85px;min-width:210px;max-width:min(320px,75vw)}
.mpa-pop[hidden],.mpa-animation[hidden]{display:none}.mpa-projections{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:7px;top:14px;bottom:auto;right:14px;max-width:calc(100vw - 28px)}
.mpa-projections button{border:1px solid #bcd2df;border-radius:9px;background:#f3f9fc;color:#284561;padding:9px 4px;font-size:.84rem}
.mpa-pop label{display:block;margin:7px 0;font-size:.9rem}.mpa-pop select{width:100%;padding:8px;border:1px solid #bcd2df;border-radius:8px;background:#fff;color:#284561}
.mpa-animation{display:flex;align-items:center;gap:12px;background:#fff;padding:8px 12px;border:1px solid #d2e5ec;border-radius:12px}
.mpa-animation button{border:0;border-radius:8px;background:var(--navy);color:#fff;padding:9px}.mpa-animation input{flex:1;min-width:40px;accent-color:#cfb45c}
body.admin-bar .mpa-app{height:calc(100dvh - 32px)}
@media(max-width:782px){body.admin-bar .mpa-app{height:calc(100dvh - 46px)}}
@media(max-width:600px){.mpa-header small{display:none}.mpa-header strong{font-size:.92rem}.mpa-main{padding:6px}.mpa-caption{padding:7px 9px;font-size:.78rem;padding-right:72px}.mpa-fabs{right:10px;bottom:78px}.mpa-fabs button{width:48px;height:48px}.mpa-projections{grid-template-columns:1fr 1fr}.mpa-app{min-height:400px}}

.mpa-header>div:first-child{min-width:0;flex:1}
.mpa-header small{font-size:.83rem;line-height:1.45;white-space:normal;display:block;color:#eef6fb;margin-top:4px}
.mpa-header .mpa-spacer{flex:0}
.mpa-main{gap:0}
.mpa-fabs{bottom:18px}
@media(max-width:600px){.mpa-header{min-height:76px}.mpa-header small{display:block;font-size:.7rem}.mpa-choice{padding:9px 11px;max-width:112px}.mpa-fabs{bottom:16px}}

/* 1行ヘッダー：左にアプリ名、中央に図法、右に切替。 */
.mpa-header{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:12px;min-height:58px}
.mpa-header .mpa-title{white-space:nowrap;font-size:1.05rem}
.mpa-header #mpaHeaderInfo{display:block;min-width:0;text-align:center;font-size:.9rem;line-height:1.3;color:#eef6fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.mpa-header{min-height:62px;padding:7px 8px;gap:6px}.mpa-header .mpa-title{font-size:.76rem}.mpa-header #mpaHeaderInfo{font-size:.68rem}.mpa-header .mpa-choice{font-size:.72rem;padding:8px 6px;max-width:94px}}

/* 図法の説明を中央に置き、地点と図法の選択を同じ行に収める。 */
.mpa-header{grid-template-columns:max-content minmax(0,1fr) max-content max-content;min-height:50px;padding:5px 12px;gap:10px}
.mpa-header .mpa-title{font-size:.95rem}
.mpa-header #mpaHeaderInfo{font-size:.84rem}
.mpa-header .mpa-center{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:.8rem;color:#eaf4fa}
.mpa-header .mpa-center select{max-width:110px;height:34px;border:1px solid #d1e1e9;border-radius:8px;background:#fff;color:#284561;padding:3px 6px}
.mpa-header .mpa-center select:disabled{opacity:.55}
.mpa-header .mpa-choice{padding:7px 11px;font-size:.82rem;border-radius:9px;white-space:nowrap}
.mpa-fabs{bottom:15px;gap:7px}
.mpa-fabs button{width:57px;height:57px;font-size:.7rem;line-height:1.2}
.mpa-fabs button.active{background:#f3d985;border-color:#c7a942;color:#243d57}
.mpa-fabs button:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:600px){.mpa-header{min-height:48px;padding:4px 6px;gap:4px}.mpa-header .mpa-title{font-size:.68rem}.mpa-header #mpaHeaderInfo{font-size:.64rem}.mpa-header .mpa-center{gap:2px;font-size:.62rem}.mpa-header .mpa-center select{max-width:77px;height:30px;padding:2px;font-size:.67rem}.mpa-header .mpa-choice{max-width:none;padding:6px 4px;font-size:.65rem}.mpa-fabs{bottom:10px;right:10px;gap:5px}.mpa-fabs button{width:49px;height:49px;font-size:.6rem}}