@charset "UTF-8";
/* ==========================================================================
   Mobiluma Korea - Map Helper page
   ========================================================================== */

.searchbar {
  display: flex; gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--ml-mist);
  border-radius: var(--ml-radius-md);
  box-shadow: var(--ml-shadow-md);
}
.searchbar__field { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; }
.searchbar__field svg { width: 18px; height: 18px; color: var(--ml-slate); flex: none; }
.searchbar__field input { flex: 1; border: 0; min-height: 44px; font-size: 15px; color: var(--ml-navy); }
.searchbar__field input:focus { outline: 0; }
.searchbar__hint { margin-top: 10px; font-size: 12px; color: var(--ml-slate); }

.catrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.catitem {
  display: grid; justify-items: center; gap: 8px;
  padding: 16px 8px;
  border: 1px solid var(--ml-mist); border-radius: var(--ml-radius-md);
  font-size: 12.5px; font-weight: 600; color: var(--ml-navy); text-align: center;
}
.catitem:hover { border-color: var(--ml-blue-border); background: var(--ml-blue-soft); color: var(--ml-navy); }
.catitem svg { width: 22px; height: 22px; color: var(--ml-blue); }
@media (min-width: 640px) { .catrow { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.whyhelps { display: grid; gap: 20px; padding: 22px; align-items: center; }
.whyhelps__title { margin-bottom: 8px; }
@media (min-width: 780px) { .whyhelps { grid-template-columns: 1fr 1fr; } }

.resultlist { display: grid; gap: 14px; }
.result { display: flex; gap: 14px; padding: 16px; }
.result__media { width: 92px; height: 92px; border-radius: var(--ml-radius-sm); overflow: hidden; flex: none; }
.result__media img { width: 100%; height: 100%; object-fit: cover; }
.result__body { flex: 1; min-width: 0; }
.result__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.result__name { font-size: 14.5px; font-weight: 700; color: var(--ml-navy); }
.result__kr { font-size: 12.5px; color: var(--ml-slate); }
.result__addr { font-size: 12.5px; color: var(--ml-slate); margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; }
.result__addr svg { width: 13px; height: 13px; margin-top: 2px; color: var(--ml-slate-light); flex: none; }
.result__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.result__actions .ml-btn { min-height: 32px; padding: 0 11px; font-size: 12px; }
.result__save { color: var(--ml-slate-light); flex: none; }
.result__save svg { width: 18px; height: 18px; }

.sidepanel { display: grid; gap: 16px; align-content: start; }
.sidepanel .ml-card { padding: 18px; }
.recentlist, .savedlist { display: grid; gap: 2px; }
.recentlist a { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; font-size: 13px; color: var(--ml-navy); }
.recentlist a svg { width: 13px; height: 13px; color: var(--ml-slate-light); }
.savedrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.savedrow img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.savedrow b { display: block; font-size: 12.5px; color: var(--ml-navy); }
.savedrow span { display: block; font-size: 11px; color: var(--ml-slate); }

.taxitip { display: flex; gap: 12px; padding: 16px; background: var(--ml-blue-soft); border: 1px solid var(--ml-blue-border); }
.taxitip svg { width: 22px; height: 22px; color: var(--ml-blue); flex: none; }

.helpband { display: grid; gap: 14px; }
.helpitem { padding: 16px; text-align: left; }
.helpitem svg { width: 20px; height: 20px; color: var(--ml-blue); margin-bottom: 10px; }
@media (min-width: 700px) { .helpband { grid-template-columns: repeat(4, minmax(0,1fr)); } }