/* Babelmo fandom board: layout and component rules from docs/agents/demo-ui.md. */
/* Viewport shell: one header row and a map stage that fills the rest, so the page never scrolls. */
body {display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.header {display:flex;align-items:center;gap:8px 24px;flex:0 0 auto;padding:8px 24px;border-bottom:var(--stroke)}
.header h1 {margin:0;font-size:inherit;line-height:1}
.brand {font-family:"Cafe24 Ssurround","Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-size:var(--text-display);font-weight:700;font-synthesis:none;line-height:1.3;letter-spacing:-.06em;gap:8px;white-space:nowrap}
.brand:after {content:'✳';color:var(--purple)}
.search {display:flex;align-items:center;gap:8px;flex:1;min-width:0;max-width:480px;padding:0 8px;border:var(--stroke);border-radius:var(--radius-control)}
.search>span {display:inline-flex;align-items:center;color:var(--purple)}
.interest-button {display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;background:var(--yellow);font-weight:700;padding:8px 16px;box-shadow:var(--shadow);white-space:nowrap}
.interest-button span {display:inline-grid;place-items:center;min-width:24px}
main {flex:1;min-height:0;display:flex}
.map-panel {--side:clamp(280px,26vw,340px);flex:1;min-width:0;position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
#map-canvas {position:absolute;inset:0}
.map-status {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:96px calc(var(--side) + 48px);overflow:auto;background:var(--cream);z-index:3}
.map-status p {max-width:400px;margin:0}
.map-status[data-state=loading] [data-map-retry] {visibility:hidden}
/* Overlays are #map-canvas siblings above it; the chip row only captures clicks on its buttons.
   Anything sitting directly on the map (chips, panels, controls, owner link, markers) has no shadow. */
.work-tabs {position:absolute;top:8px;left:calc(var(--side) + 24px);right:calc(var(--side) + 24px);z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 24px;overflow-x:auto;scrollbar-width:none;pointer-events:none}
.work-tabs button {display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:8px 16px;font-weight:700;white-space:nowrap;pointer-events:auto}
.work-tabs button:first-child {margin-left:auto}
.work-tabs button:last-child {margin-right:auto}
.work-tabs button[aria-pressed=true] {background:var(--purple);color:var(--cream)}
.map-sheet {display:contents}
.sheet-tabs {display:none}
.side {position:absolute;top:24px;z-index:4;display:flex;flex-direction:column;width:var(--side);max-height:calc(100% - 72px);border:var(--stroke);border-radius:var(--radius-panel);background:color-mix(in srgb,var(--cream) 92%,transparent);overflow:hidden}
.side-stores {left:24px}
/* Shorter than the store panel so the owner link keeps its own corner. */
.side-products {right:24px;max-height:calc(100% - 120px)}
.side-head {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:8px 16px;border-bottom:var(--stroke)}
.side-head h2 {margin:0;font-size:var(--text-body)}
#result-count {font-size:var(--text-small);font-weight:700}
.side-list {display:flex;flex-direction:column;gap:16px;min-height:0;padding:16px;overflow-y:auto;overscroll-behavior:contain}
#store-list,#product-grid {gap:8px}
.side-list:empty {display:none}
.map-empty {margin:0;padding:16px;font-size:var(--text-small)}
.map-controls {position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;gap:8px}
.map-controls .secondary {white-space:nowrap;box-shadow:none}
.map-area {min-height:48px;padding:8px;font:inherit;font-weight:700;color:inherit;background:var(--cream);border:var(--stroke);border-radius:var(--radius-control);cursor:pointer}
.map-area:disabled {cursor:not-allowed;opacity:.55}
.owner-fab {position:absolute;right:24px;bottom:24px;z-index:4;gap:8px;min-height:48px;padding:8px 16px;background:var(--yellow);border:var(--stroke);border-radius:var(--radius-control);font-weight:700;white-space:nowrap}
.map-marker {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--cream);border:var(--stroke);border-radius:var(--radius-card);font-size:var(--text-small);font-weight:700;white-space:nowrap}
.map-marker strong {background:var(--yellow);color:var(--ink);padding:0 8px;border-radius:var(--radius-control)}
.map-marker.selected {background:var(--purple);color:var(--cream)}
/* Count of nearby stores merged at the current zoom; clicking zooms in. */
.map-cluster {display:flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--yellow);border-radius:var(--radius-card);font-size:var(--text-body);font-weight:700;white-space:nowrap}
/* One store per row: a long name is cut with an ellipsis so the area and product count always stay visible. */
.store-result {display:flex;align-items:center;flex:0 0 auto;gap:8px;width:100%;padding:8px 16px;text-align:left;border-radius:var(--radius-card);white-space:nowrap}
.store-result strong {min-width:0;font-size:var(--text-body);overflow:hidden;text-overflow:ellipsis}
.store-result small {flex:0 0 auto;font-size:var(--text-small)}
.store-result-count {display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;font-weight:700}
.store-result.selected {background:var(--yellow)}
.store-result.selected small:after {content:' ♥';color:var(--purple)}
/* One product per row: preview, name (ellipsis), status icon when not available, price at the right edge. */
.product-card {display:flex;align-items:center;flex:0 0 auto;gap:8px;width:100%;padding:8px 16px 8px 8px;text-align:left;border-radius:var(--radius-card);white-space:nowrap;transition:transform .18s}
.product-card:hover {transform:translate(-2px,-2px)}
.product-art {flex:0 0 48px;border-radius:var(--radius-control);overflow:hidden}
.product-art {aspect-ratio:1}
.product-art img {width:100%;height:100%;object-fit:contain}
.product-card strong {flex:1;min-width:0;overflow:hidden;white-space:normal;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.stock-icon {display:inline-flex;flex:0 0 auto}
/* Owner page: one centered card, same border/radius/shadow as popups. Not on the map, so the shadow stays. */
.owner-page {align-items:center;justify-content:center;padding:24px;overflow:auto}
.owner-card {display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:400px;padding:32px;border:var(--stroke);border-radius:var(--radius-panel);box-shadow:var(--shadow);text-align:center}
.owner-card h2,.owner-card p {margin:0}
.owner-card p {word-break:keep-all}
.owner-card .primary,.owner-card .secondary {border:var(--stroke);border-radius:var(--radius-control)}
/* Sheet layout: the canvas shrinks above a tabbed list instead of being covered by two panels. */
@media(max-width:900px) {
  #map-canvas,.map-status {inset:0 0 44% 0}
  .map-status {justify-content:flex-start;padding:72px 16px}
  .work-tabs {left:0;right:0;flex-wrap:nowrap;justify-content:flex-start;padding:8px 16px}
  .map-sheet {position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;height:44%;background:var(--cream);border-top:var(--stroke)}
  .sheet-tabs {display:flex;flex:0 0 auto}
  .sheet-tabs button {flex:1;border:0;border-bottom:var(--stroke);border-radius:0;font-weight:700}
  .sheet-tabs button[aria-pressed=true] {background:var(--yellow)}
  .sheet-tabs button:focus-visible {outline-offset:-4px}
  .side {position:static;flex:1;width:auto;min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--cream)}
  .map-sheet[data-tab=products] .side-stores,.map-sheet[data-tab=stores] .side-products,.side-stores .side-head {display:none}
  .side-head {min-height:48px}
  .map-controls {left:16px;bottom:calc(44% + 16px);transform:none}
  .owner-fab {right:16px;bottom:calc(44% + 16px)}
}
@media(max-width:600px) {
  .header {flex-wrap:wrap;padding:8px 16px}
  .brand {font-size:var(--text-title)}
  .search {order:3;flex-basis:100%;max-width:none}
  .interest-button {font-size:var(--text-small);padding:8px}
  .work-tabs button {padding:8px;font-size:var(--text-small)}
  .map-status {font-size:var(--text-small)}
  .map-controls [data-map-home] span {display:none}
  .map-controls .secondary,.owner-fab {padding:8px}
  /* Narrow screens: the area select takes its own row above the three buttons so it clears the owner link. */
  .map-controls {flex-wrap:wrap;max-width:148px}
  .map-area {flex:1 0 100%;min-width:0}
  .side-list {padding:16px 16px 24px}
  .owner-card {padding:24px 16px}
}

/* UI icons are separate from product illustration SVG sizing. */
svg.ui-icon {display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle;pointer-events:none}
.close {display:grid;place-items:center}
.text-button .ui-icon {margin-right:8px}
.empty>span .ui-icon {width:36px;height:36px}