.amap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; }
.amap:not(.is-ready) { grid-template-columns: minmax(0, 1fr); }
.amap__stage { position: relative; display: none; overflow: hidden; background: linear-gradient(to bottom, var(--m-stage-a) 0%, var(--m-stage-b) 100%); }
.amap .amap__stage { height: calc(var(--space-2) * 70); }
.amap.is-ready .amap__stage { display: block; }
.m3-hint { position: absolute; top: var(--space-3); left: var(--space-4); margin: 0; font-size: var(--fs-1); letter-spacing: var(--ls-3); color: var(--c-ink-sub); }
.m3-legend { position: absolute; right: var(--space-4); bottom: var(--space-3); left: var(--space-4); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--fs-1); color: var(--c-ink-sub); }
.m3-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.m3-key::before { content: ""; width: calc(var(--space-1) * 5 / 2); height: calc(var(--space-1) * 5 / 2); background: var(--m-tn); }
.m3-key--mn::before { background: var(--m-mn); }
.m3-key--ev::before { background: var(--m-ev); }
.m3-key--bd::before { background: var(--m-e-a); }
.m3-key--pk::before { background: var(--m-park); }
.amap__list { margin: 0; padding: 0; list-style: none; border-top: var(--bd) solid var(--c-ink); }
.amap__item { display: grid; grid-template-columns: calc(var(--space-1) * 17 / 2) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-1); border-bottom: var(--bd) solid var(--c-accent-dark); transition: background calc(var(--t-1) * 2 / 3); }
.amap__item.is-hot { background: var(--c-bg); }
.amap__mark { display: grid; place-items: center; width: calc(var(--space-1) * 15 / 2); height: calc(var(--space-1) * 15 / 2); font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--c-bg); background: var(--c-ink); }
.amap__mark--pk { background: var(--m-park-f); }
.amap__name { display: block; font-family: var(--ff-serif); font-size: var(--fs-3); letter-spacing: var(--ls-2); }
@media (max-width: 1024px) { .amap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .amap .amap__stage { height: calc(var(--space-2) * 50); } }
@media (max-width: 768px) { .m3-hint { display: none; } }
.m3d { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; user-select: none; }
.m3d.is-drag { cursor: grabbing; }
.m3d.is-point { cursor: pointer; }
.m3d__cv { display: block; width: 100%; height: 100%; }
.m3d__lb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.m3d-l { position: absolute; top: 0; left: 0; visibility: hidden; will-change: transform; }
.m3d-l__t { position: relative; display: flex; align-items: center; gap: calc(var(--space-1) * 3 / 2); padding: calc(var(--space-1) * 3 / 4) calc(var(--space-1) * 9 / 4) var(--space-1); font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: var(--ls-2); white-space: nowrap; color: var(--c-ink); background: var(--m-label); border-left: calc(var(--bd) * 2) solid var(--m-tn); box-shadow: 0 calc(var(--space-1) / 2) calc(var(--space-1) * 5 / 2) var(--m-label-shadow); transform: translateX(-50%); transition: color calc(var(--t-1) * 2 / 3), background-color calc(var(--t-1) * 2 / 3); }
.m3d-l__t::before { position: absolute; top: 100%; left: calc(50% + var(--dx, 0px)); width: var(--bd); height: var(--stem, 0px); content: ""; background: var(--c-ink); opacity: calc(var(--op) * 11 / 10); }
.m3d-l__t::after { position: absolute; top: calc(100% + var(--stem, 0px) - var(--space-1) / 2); left: calc(50% + var(--dx, 0px) - var(--space-1) / 2); width: calc(var(--space-1) * 5 / 4); height: calc(var(--space-1) * 5 / 4); content: ""; background: var(--c-ink); border-radius: 50%; }
.m3d-l--ht .m3d-l__t { border-left-color: var(--m-ht); }
.m3d-l.is-hot .m3d-l__t { color: var(--c-bg); background: var(--c-ink); }
.m3d-l--pin .m3d-l__t { padding: calc(var(--space-1) * 3 / 4) calc(var(--space-1) * 9 / 4) calc(var(--space-1) * 3 / 4) calc(var(--space-1) * 3 / 4); font-size: var(--fs-1); border-left: 0; }
.m3d-l__m { display: grid; place-items: center; min-width: calc(var(--space-1) * 19 / 4); height: calc(var(--space-1) * 19 / 4); padding: 0 calc(var(--space-1) * 3 / 4); font-size: calc(var(--fs-1) * 7 / 8); font-style: normal; font-weight: var(--fw-bold); color: var(--c-bg); background: var(--c-ink); }
.m3d-l__m--pk { background: var(--m-park-f); }
.m3d-l--sub .m3d-l__t { padding: var(--bd) calc(var(--space-1) * 3 / 2) calc(var(--space-1) / 2); font-size: calc(var(--fs-1) * 7 / 8); color: var(--c-ink-sub); background: var(--m-label-soft); border-left: 0; box-shadow: none; }
.m3d-l--sub .m3d-l__t::before,
.m3d-l--sub .m3d-l__t::after { display: none; }
.is-3d .m3-hint { z-index: 1; pointer-events: none; }
.is-3d .m3-legend { z-index: 1; right: 0; bottom: 0; left: 0; padding: var(--space-4) var(--space-4) var(--space-3); pointer-events: none; background: linear-gradient(to bottom, transparent 0%, var(--m-stage-b) var(--fade-stop)); }
@media (max-width: 768px) { .m3d-l__t { padding: calc(var(--space-1) / 2) calc(var(--space-1) * 7 / 4) calc(var(--space-1) * 3 / 4); font-size: calc(var(--fs-1) * 11 / 12); } }
@media (max-width: 768px) { .m3d-l--pin .m3d-l__t { font-size: calc(var(--fs-1) * 11 / 12); } }