/* Scoped template styles; do not affect the surrounding app. */
:is(#shop3d-viewer,.repair-map-viewer){--bg:#eef0ee;--card:#ffffff;--fg:#1b2220;--mu:#5c6863;--line:#d2d8d5;--acc:#3fae2a;--acc-ink:#fff;--sel:#e0561f;--view:#16191a;
--f-d:system-ui,sans-serif;--f-b:system-ui,-apple-system,"Segoe UI",sans-serif;--f-m:ui-monospace,monospace}
@media (prefers-color-scheme:dark){:is(#shop3d-viewer,.repair-map-viewer){--bg:#111514;--card:#1a201f;--fg:#e7ecea;--mu:#9aa7a2;--line:#2e3835;--acc:#57c53f;--acc-ink:#0b1608;--sel:#ff7a45;--view:#0d1010;color-scheme:dark}}
:is(#shop3d-viewer,.repair-map-viewer)[data-theme="dark"]{--bg:#111514;--card:#1a201f;--fg:#e7ecea;--mu:#9aa7a2;--line:#2e3835;--acc:#57c53f;--acc-ink:#0b1608;--sel:#ff7a45;--view:#0d1010;color-scheme:dark}
:is(#shop3d-viewer,.repair-map-viewer){background:var(--bg);color:var(--fg);font-family:var(--f-b);font-size:15px;line-height:1.45}
:is(#shop3d-viewer,.repair-map-viewer) header{position:static;background:none;color:var(--fg);box-shadow:none;padding:0}
:is(#shop3d-viewer,.repair-map-viewer) .wrap{max-width:1320px;margin:0 auto;padding-block:18px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
:is(#shop3d-viewer,.repair-map-viewer) h1{font-family:var(--f-d);font-weight:800;font-size:clamp(21px,3.6vw,30px);letter-spacing:-.4px;margin:0;text-wrap:balance}
:is(#shop3d-viewer,.repair-map-viewer) .sub{margin:2px 0 0;color:var(--mu)}
:is(#shop3d-viewer,.repair-map-viewer) .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;height:auto;overflow:visible;background:none;margin:0;border-radius:0}
:is(#shop3d-viewer,.repair-map-viewer) .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
:is(#shop3d-viewer,.repair-map-viewer) .seg button{border:0;background:transparent;color:var(--fg);padding:9px 14px;font:600 14px var(--f-b);cursor:pointer;min-height:42px}
:is(#shop3d-viewer,.repair-map-viewer) .seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
:is(#shop3d-viewer,.repair-map-viewer) select{font:600 14px var(--f-b);color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-height:42px;max-width:100%}
:is(#shop3d-viewer,.repair-map-viewer) button:focus-visible, :is(#shop3d-viewer,.repair-map-viewer) select:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
:is(#shop3d-viewer,.repair-map-viewer) .grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
@media (max-width:900px){:is(#shop3d-viewer,.repair-map-viewer) .grid{grid-template-columns:minmax(0,1fr)}}
:is(#shop3d-viewer,.repair-map-viewer) .view{position:relative;height:min(74vh,700px);min-height:360px;border-radius:14px;overflow:hidden;background:var(--view);touch-action:none}
:is(#shop3d-viewer,.repair-map-viewer) .view canvas{display:block;width:100%;height:100%}
:is(#shop3d-viewer,.repair-map-viewer) .hint{position:absolute;left:12px;top:12px;background:rgba(10,14,13,.72);color:#e8eeeb;font:500 12px var(--f-m);padding:6px 9px;border-radius:8px;pointer-events:none;max-width:calc(100% - 24px)}
:is(#shop3d-viewer,.repair-map-viewer) .joy{position:absolute;left:18px;bottom:18px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);display:none;touch-action:none}
:is(#shop3d-viewer,.repair-map-viewer) .joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.55)}
:is(#shop3d-viewer,.repair-map-viewer) .view.walk .joy{display:block}
:is(#shop3d-viewer,.repair-map-viewer) .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}
:is(#shop3d-viewer,.repair-map-viewer) .card h2{font-family:var(--f-d);font-size:18px;margin:0;text-wrap:balance}
:is(#shop3d-viewer,.repair-map-viewer) .lv{list-style:none;margin:0;padding:0;display:grid;gap:4px}
:is(#shop3d-viewer,.repair-map-viewer) .lv li{display:flex;gap:8px;align-items:center;font-size:14px}
:is(#shop3d-viewer,.repair-map-viewer) .lv b{font:500 11px var(--f-m);color:var(--mu);width:44px;flex:none}
:is(#shop3d-viewer,.repair-map-viewer) .lv span.c{width:12px;height:12px;border-radius:3px;flex:none}
:is(#shop3d-viewer,.repair-map-viewer) .ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
:is(#shop3d-viewer,.repair-map-viewer) .ph img{width:100%;border-radius:8px;cursor:zoom-in;aspect-ratio:3/4;object-fit:cover;max-width:100%}
:is(#shop3d-viewer,.repair-map-viewer) .note{font-size:13px;color:var(--mu);margin:0}
:is(#shop3d-viewer,.repair-map-viewer) .tag{display:inline-block;font:600 11px var(--f-b);padding:2px 8px;border-radius:20px;background:color-mix(in srgb,var(--sel) 18%,transparent);color:var(--sel)}
:is(#shop3d-viewer,.repair-map-viewer) button.b{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;padding:8px 12px;font:600 14px var(--f-b);cursor:pointer;min-height:40px}
:is(#shop3d-viewer,.repair-map-viewer) .lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) 16px}
:is(#shop3d-viewer,.repair-map-viewer) .lb[hidden]{display:none}
:is(#shop3d-viewer,.repair-map-viewer) .lb img{max-width:100%;max-height:92vh;border-radius:10px}
:is(#shop3d-viewer,.repair-map-viewer) .legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--mu)}
:is(#shop3d-viewer,.repair-map-viewer) .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
:is(#shop3d-viewer,.repair-map-viewer) .err{color:var(--sel)}

:is(#shop3d-viewer,.repair-map-viewer) .lb[hidden]{display:none}