/* yeojido store-name search (design yeojido/search, base dev inbox #355). Load after site.css / fixes.css.
   Prefix ss- (the build already has .search / .results for the old hero box; not touched).
   Existing tokens only (design-tokens.css). No new colour, no webfont, no image, no url(), no external request. */

/* ============ 1. header button: in .nav-end, right before .lang ============ */
.ss-btn{display:none;flex:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background:var(--seg-track);color:var(--ink);cursor:pointer}
.js .ss-btn{display:inline-grid}
.ss-btn[hidden]{display:none}
.ss-btn svg{width:20px;height:20px;pointer-events:none}
.ss-btn:hover{background:var(--seg-on);box-shadow:0 1px 3px rgba(21,17,31,.18)}
.ss-btn:focus-visible{border-radius:var(--r-pill)}
@media (prefers-contrast:more){.ss-btn{box-shadow:inset 0 0 0 2px var(--ink)}}
/* below 360 the row is brand 44 + search 44 + lang 44 + theme 132 = 264 + gaps; the build's 18px side padding leaves 266 for 282.
   Narrow only: 10px side padding, 4px gaps -> 286 room for 278. (dev delta on the header, no other width touched) */
@media (max-width:359px){
  .nav-wrap{padding-left:10px;padding-right:10px}
  .nav-wrap>.nav{padding-left:8px}
  .nav-end{gap:4px}
}

/* ============ 2. the dialog ============ */
html:has(.ss-dlg[open]){overflow:hidden}
.ss-dlg{position:fixed;inset:0 0 auto 0;width:100%;max-width:100%;height:auto;max-height:100vh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);overflow:hidden}
.ss-dlg[open]{display:flex;flex-direction:column}
.ss-dlg::backdrop{background:rgba(26,15,46,.72)}
/* brand hairline on top of the box, same as the provenance dialog */
.ss-dlg::before{content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;background:var(--brand-grad);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .ss-dlg[open]{animation:ss-down .22s var(--ease)}
  @keyframes ss-down{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
}
/* 600 and up: a 560px box in the middle, fixed top edge (it does not jump while the result count changes) */
@media (min-width:600px){
  .ss-dlg{inset:min(12vh,96px) 0 auto 0;width:calc(100% - 48px);max-width:560px;max-height:calc(100vh - 2 * min(12vh,96px));max-height:min(calc(100dvh - 2 * min(12vh,96px)),720px);margin:0 auto;border-radius:var(--r-lg)}
  .ss-dlg::before{top:0;bottom:auto}
  @media (prefers-reduced-motion:no-preference){
    .ss-dlg[open]{animation:ss-in .18s var(--ease)}
    @keyframes ss-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
  }
}
.ss-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* head: title + close */
.ss-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 10px 6px 20px}
.ss-title{font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:normal;word-break:keep-all}
.ss-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer}
.ss-x svg{width:22px;height:22px;pointer-events:none}
.ss-x:hover{background:var(--hover)}
.ss-x:focus-visible{border-radius:var(--r-pill);outline-offset:-3px}

/* ============ 3. the field ============ */
.ss-field{display:flex;align-items:center;gap:6px;margin:0 16px;min-height:54px;padding:0 4px 0 14px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--btn-line)}
.ss-field:focus-within{box-shadow:inset 0 0 0 2px var(--brand-purple)}
html[data-theme="dark"] .ss-field:focus-within{box-shadow:inset 0 0 0 2px var(--cat-fg)}
.ss-ic{flex:none;width:20px;height:20px;color:var(--ink-2)}
.ss-q{flex:1 1 auto;min-width:0;height:52px;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:600;letter-spacing:0;-webkit-appearance:none;appearance:none}
.ss-q:focus,.ss-q:focus-visible{outline:none}
.ss-q::placeholder{color:var(--ink-3);opacity:1;font-weight:500}
.ss-q::-webkit-search-cancel-button,.ss-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
/* typing: three dots between the last key and the search (250ms) */
.ss-busy{display:none;flex:none;gap:3px;align-items:center;padding:0 4px}
.ss-field.is-busy .ss-busy{display:inline-flex}
.ss-busy i{width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .ss-busy i{animation:ss-dot .9s infinite ease-in-out}
  .ss-busy i:nth-child(2){animation-delay:.15s}
  .ss-busy i:nth-child(3){animation-delay:.3s}
  @keyframes ss-dot{0%,80%,100%{opacity:.35}40%{opacity:1}}
}
.ss-clear{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);cursor:pointer}
.ss-clear[hidden]{display:none}
.ss-clear svg{width:20px;height:20px;pointer-events:none}
.ss-clear:hover{background:var(--hover);color:var(--ink)}
.ss-clear:focus-visible{border-radius:var(--r-pill);outline-offset:-3px}
.ss-hint{margin:6px 20px 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
/* the live count line; always in the tree (a live region must exist before it changes), empty = no height */
.ss-status{margin:0 20px;font-size:14px;line-height:1.4;font-weight:800;color:var(--ink)}
.ss-status:not(:empty){padding:12px 0 2px}
.ss-status.sr-only,.ss-status.sr-only:not(:empty){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============ 4. results ============ */
.ss-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 0 max(16px,env(safe-area-inset-bottom))}
.ss-list{display:grid;gap:2px;margin:0;padding:0 8px;list-style:none}
.ss-list:empty{display:none}
.ss-row{display:grid;gap:4px;min-height:56px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.ss-row:hover{background:var(--hover)}
.ss-row:hover .ss-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ss-row:focus-visible{outline:3px solid var(--brand-blue);outline-offset:-3px;border-radius:var(--r-sm);background:var(--hover)}
.ss-name{font-size:17px;line-height:1.35;font-weight:500;overflow-wrap:anywhere;word-break:keep-all}
/* the matched part: bold only, the same colour as the name */
.ss-name b,.ss-sub b{font-weight:800;color:inherit}
.ss-sub{font-size:13px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.ss-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:1.3;color:var(--ink-2)}
.ss-meta .pill{min-height:24px;font-size:12px}
.ss-dong{white-space:nowrap}
/* closed: after every open one, lighter name, the 폐업 pill */
.ss-row--closed .ss-name{color:var(--ink-3)}
.ss-row--closed .ss-name b{color:var(--ink-2)}

/* ============ 5. start (nothing typed) / empty ============ */
.ss-h{margin:4px 20px 10px;font-size:14px;line-height:1.4;font-weight:800;color:var(--ink-2)}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 20px;list-style:none}
.ss-chips .chip{min-height:44px;padding:0 14px;font-size:15px;white-space:normal;text-align:left;box-shadow:inset 0 0 0 1px var(--line)}
.ss-chips .chip:hover{background:var(--surface-tint)}
.ss-empty .ss-h,.ss-start .ss-h{margin-top:8px}
.ss-chips button.chip{font-family:inherit;color:inherit;cursor:pointer}
.ss-dong-chips{margin-top:18px}
/* r2: group heading inside the result list (dong / category group). li is role=presentation, h4 carries the text */
.ss-grp{margin:12px 12px 4px;font-size:14px;line-height:1.4;font-weight:800;color:var(--ink-2);overflow-wrap:anywhere}
.ss-list>li:first-child>.ss-grp{margin-top:4px}

@media (min-width:600px){
  .ss-top{padding:12px 10px 6px 22px}
  .ss-field{margin:0 18px}
  .ss-hint,.ss-status{margin-left:22px;margin-right:22px}
  .ss-h{margin-left:22px;margin-right:22px}
  .ss-chips{padding:0 22px}
  .ss-list{padding:0 10px}
}