body.mapapp { --m-tabs-h: env(safe-area-inset-bottom, 0px); --s-road: #efe7d6; --s-deck: #f7f0e1; --s-corr: #fffaf0; --s-room: #e6dac3; --s-room-edge: #c7b89b; --s-well: #d9ccb2; --s-dark: #b3a385; --s-hedge: #c9dfae; --s-field: #b5d69b; --s-edge: #9c8a6b; }

#map-svg .site-road { fill: var(--s-road); }
#map-svg .site-hedge { fill: var(--s-hedge); }
#map-svg .site-field { fill: var(--s-field); stroke: #8fb877; stroke-width: 1.5; }
#map-svg .site-fence { fill: none; stroke: #8a7a5e; stroke-width: 1.5; }
#map-svg .site.is-dim { opacity: 0.45; }

#map-svg .bldg-edge { fill: var(--s-deck); stroke: var(--s-edge); stroke-width: 3; stroke-linejoin: round; }
#map-svg .bldg-roof { fill: rgba(99, 74, 46, 0.05); stroke: #b9a98b; stroke-width: 1.2; stroke-dasharray: 5 5; }
#map-svg .pl { stroke: none; }
#map-svg .pl-deck, #map-svg .pl-hall { fill: var(--s-deck); }
#map-svg .pl-corr { fill: var(--s-corr); }
#map-svg .pl-room { fill: var(--s-room); stroke: var(--s-room-edge); stroke-width: 0.8; }
#map-svg .pl-well { fill: var(--s-well); }
#map-svg .pl-dark, #map-svg .pl-pillar { fill: var(--s-dark); }
#map-svg .pl-void { fill: url(#m-hatch); stroke: var(--s-room-edge); stroke-width: 1; }
#map-svg .stair-area { fill: #f3ecdd; stroke: #a89c86; stroke-width: 1; }
#map-svg .stair-steps { fill: none; stroke: #b9ad97; stroke-width: 0.7; }

#map-svg .room.k-venue, #map-svg .room.k-info, #map-svg .room.k-spot, #map-svg .room.k-hq, #map-svg .room.k-shop, #map-svg .room.k-exhibit, #map-svg .room.k-rest {
  fill: color-mix(in srgb, var(--kc) 22%, #fffaf0); stroke: var(--kc); stroke-width: 2;
}
#map-svg text.lb-fest { fill: #4a3a2a; }
#map-svg text.lb-pin { font-size: calc(var(--u) * 11px); font-weight: 800; fill: #4a3a2a; }
#map-svg text.lb-bldg, #map-svg text.lb-area { font-size: calc(var(--u) * 11px); }
#map-svg.is-far text.lb-bldg, #map-svg.is-far text.lb-area { font-size: calc(var(--u) * 10px); }

#map-svg .ic-pin .bg { stroke: #fff; stroke-width: 2px; }
#map-svg .ic-pin text { font-size: 11px; font-weight: 800; fill: #fff; font-family: var(--font); }
#map-svg .ic-mark .bg { stroke: #fff; stroke-width: 1.8px; }
#map-svg .ic-mark .fg { fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
#map-svg .ic-mark .dot, #map-svg .ic-mark .star { fill: #fff; stroke: none; }
#map-svg .ic-no .bg { fill: #fff; stroke: #d93025; stroke-width: 2.4px; }
#map-svg .ic-no .fg { fill: none; stroke: #d93025; stroke-width: 2.6px; stroke-linecap: round; vector-effect: none; }
#map-svg .ic-no { pointer-events: none; }
#map-svg.is-far .ic-st, #map-svg.is-far .ic-no { display: none; }
#map-svg .pl-ic.is-off, #map-svg .room.is-off { opacity: 0.35; }
#map-svg .pl-ic.is-found .ic { animation: s-found 0.55s ease-in-out 4 alternate; }
@keyframes s-found { to { scale: 1.35; } }
#map-svg .mk-ring { pointer-events: none; }
#map-svg .mk-ring .ring { fill: none; stroke: var(--m-pin); stroke-width: 3px; }
#map-svg .mk-ring .halo { fill: var(--m-pin); fill-opacity: 0.18; stroke: none; animation: s-halo 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes s-halo { from { scale: 0.7; opacity: 1; } to { scale: 1.35; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #map-svg .mk-ring .halo, #map-svg .pl-ic.is-found .ic { animation: none; } }

.sh-kind .sh-dot { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.4em; border-radius: 50%; vertical-align: 0.02em; }
.sh-title .sh-count { margin-left: 0.5em; font-size: 0.6em; opacity: 0.6; }
.m-item .ico .num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 0.85rem; font-weight: 800; line-height: 1; }
.m-legend .ic-pin .bg { stroke: #fff; stroke-width: 1.5px; }
.m-legend .ic-pin text { font-size: 10px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.m-legend .ic-mark .bg { stroke: #fff; stroke-width: 1.5px; }
.m-legend .ic-mark .fg { fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: round; }
.m-legend .ic-mark .dot, .m-legend .ic-mark .star { fill: #fff; }
.m-legend .ic-no .bg { fill: #fff; stroke: #d93025; stroke-width: 2.4px; }
.m-legend .ic-no .fg { fill: none; stroke: #d93025; stroke-width: 2.6px; stroke-linecap: round; }
.m-legend .lg-sw.lg-venue { fill: color-mix(in srgb, #3f9e97 22%, #fffaf0); stroke: #3f9e97; stroke-width: 2; }
.m-legend .lg-sw.lg-room { fill: #e6dac3; stroke: #c7b89b; }
.m-legend .lg-sw.lg-corr { fill: #fffaf0; stroke: #9c8a6b; }
.m-legend .lg-sw.lg-field { fill: #b5d69b; stroke: #8fb877; }
.m-legend .lg-note { margin: 12px 0 0; font-size: 0.8rem; opacity: 0.75; }
#map-svg.is-far #m-icons { display: inline; }
#map-svg.is-far .ic-ev, #map-svg.is-far .ic-wc { opacity: 0.9; }

body.mapapp {
  --text-font: Inter, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --font: var(--text-font);
  --hud-font: Inter, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --paper: #ffffff; --paper-2: #ffffff; --ink: #00796b;
  --grain: linear-gradient(transparent, transparent); --iro: linear-gradient(transparent, transparent);
  --press: rgba(111, 97, 150, 0);
  --m-ink: #3a3c42; --m-ink-2: #62666f; --m-accent: #6f6196;
  --m-panel: #ffffff; --m-panel-2: #f2eef7;
  --m-line: rgba(123, 191, 179, 0.34); --m-line-2: rgba(123, 191, 179, 0.55);
  --m-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  --m-blue-soft: #00796b; --m-blue-ink: #ffffff; --m-blue-line: #00796b;
  --m-route: #6f6196; --m-pin: #d9577a; --m-label: #3a3c42; --m-halo: rgba(255, 255, 255, 0.94);
  --m-outside: #f6f5f9;
  --s-road: #eae8f0; --s-deck: #ffffff; --s-corr: #ffffff; --s-room: #dff0ec; --s-room-edge: #a9d5cc; --s-well: #cfe6e1; --s-dark: #9dbdb6;
  --s-hedge: #d3ecd9; --s-field: #bfe3c9; --s-edge: #5fa89c;
  background: #fbfafc; color: #3a3c42;
}
.app-frame { background: linear-gradient(90deg, rgba(123, 191, 179, 0.06) 1px, transparent 0) 0 0 / 28px 28px, linear-gradient(rgba(183, 166, 203, 0.055) 1px, transparent 0) 0 0 / 28px 28px, #fbfafc; }
.m-canvas::after { content: none; }
#map-svg .site-field { stroke: #94cfa6; }
#map-svg .site-fence { stroke: #8aa39e; }
#map-svg .bldg-roof { fill: rgba(123, 191, 179, 0.08); stroke: #9cc9c1; }
#map-svg .stair-area { fill: #f2eef7; stroke: #b7a6cb; }
#map-svg .stair-steps { stroke: #c9bcd9; }
#map-svg .room.k-venue, #map-svg .room.k-info, #map-svg .room.k-spot, #map-svg .room.k-hq, #map-svg .room.k-shop, #map-svg .room.k-exhibit, #map-svg .room.k-rest { fill: color-mix(in srgb, var(--kc) 16%, #ffffff); }
#map-svg text.lb-fest { font-family: var(--text-font); font-weight: 700; fill: #3a3c42; }
#map-svg text.lb-pin { fill: #3a3c42; }
#map-svg text.lb-area { fill: #5e9a70; }
#map-svg text.lb-bldg { fill: #62666f; }
#map-svg .ic-ev .bg, #map-svg .ic-st .bg { fill: #8c8fa0; }

.mapapp :is(.m-bar, .m-chip, .m-floors, .m-fab, .m-compass, .m-help) { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(123, 191, 179, 0.55); box-shadow: var(--m-shadow); }
.mapapp :is(.m-chip, .m-fab, .m-compass):active { translate: none; box-shadow: var(--m-shadow); filter: brightness(0.96); }
.mapapp .m-help.m-fab { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(123, 191, 179, 0.55); color: #00796b; font-weight: 700; }
.mapapp .m-search input { color: #3a3c42; font-weight: 600; }
.mapapp .m-search input::placeholder { color: #8a8e98; font-weight: 400; }
.mapapp .m-glass { stroke: #00796b; }
.mapapp .m-chip { color: #00564f; font-weight: 700; }
.mapapp .m-chip[aria-pressed="true"] { background: #00796b; border-color: #00796b; color: #ffffff; }
.mapapp .m-floors { border-radius: 8px; overflow: hidden; }
.mapapp .m-floor { font-weight: 700; font-size: 0.95rem; color: #62666f !important; }
.mapapp .m-floor[aria-checked="true"] { background: #00796b; color: #ffffff !important; }
.mapapp .m-fab svg { stroke: #00796b; }
.mapapp .m-tilt { font-weight: 700; font-size: 0.9rem; color: #00796b; }
.mapapp .m-tilt[aria-pressed="true"] { background: #00796b; color: #ffffff; }
.mapapp .m-compass b { color: #3a3c42; }

.mapapp .m-sheet { background: #ffffff; border-top: 1px solid rgba(123, 191, 179, 0.5); border-radius: 12px 12px 0 0; box-shadow: 0 -8px 24px rgba(111, 97, 150, 0.13); }
.mapapp .m-grip::before { background: rgba(111, 97, 150, 0.3); }
.mapapp .m-sheet-x { background: #f2eef7; box-shadow: none; }
.mapapp .m-sheet-x svg { stroke: #6f6196; }
.mapapp .m-sheet-x:active { translate: none; }
.mapapp .sh-title { font-family: var(--mincho); font-weight: 700; font-size: 1.6rem; color: #6f6196; letter-spacing: 0.02em; }
.mapapp .sh-kind { font-weight: 700; font-size: 0.82rem; color: #00796b; }
.mapapp .sh-sub { color: #62666f; }
.mapapp .sh-desc { color: #3a3c42; }
.mapapp .sh-badge { background: #f2eef7; color: #6f6196; }
.mapapp .sh-h, .mapapp .m-results h3 { background: none; padding: 0 0 0 10px; border-radius: 0; border-left: 3px solid #7bbfb3; color: #6f6196; font-weight: 700; font-size: 0.9rem; }
.mapapp .sh-btn { border: 1px solid rgba(123, 191, 179, 0.7); border-radius: 4px; background: #ffffff; color: #00796b; font-weight: 700; font-size: 0.95rem; box-shadow: none; }
.mapapp .sh-btn.primary { background: #00796b; border-color: #00796b; color: #ffffff; }
.mapapp .sh-btn:active { translate: none; filter: brightness(0.95); }
.mapapp .sh-btn svg { stroke: currentColor; }
.mapapp .rt-opt { border: 1px solid rgba(123, 191, 179, 0.7); background: #ffffff; color: #00796b; }
.mapapp .rt-opt[aria-pressed="true"] { background: #00796b; border-color: #00796b; color: #ffffff; }
.mapapp .m-results { background: #fbfafc; }
.mapapp .m-item b { color: #3a3c42; }
.mapapp .m-item small { color: #62666f; }
.mapapp .m-toast { background: #3a3c42; color: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.mapapp .m-legend h2 { font-family: var(--mincho); color: #6f6196; }
.mapapp .m-legend h3 { color: #00796b; }
.m-legend .lg-sw.lg-venue { fill: color-mix(in srgb, #00796b 16%, #ffffff); stroke: #00796b; }
.m-legend .lg-sw.lg-room { fill: #dff0ec; stroke: #a9d5cc; }
.m-legend .lg-sw.lg-corr { fill: #ffffff; stroke: #5fa89c; }
.m-legend .lg-sw.lg-field { fill: #bfe3c9; stroke: #94cfa6; }
.mapapp .m-notice { background: #6f6196; color: #ffffff; }