/* ============================================================
   판매왕 공통 UI 부품 (sm-ui-*)
   기준 시안: docs/prototype/jobseeker-dashboard-tw.html, 대조표: docs/SELLKING_UI_TOKENS.md
   - 색·모서리·간격·글자 크기는 common.css 의 --tp-* 를 쓰고, 없는 값만 아래 --sm-* 로 둔다.
   - 기존 .sm-card / .sm-chip 과 겹치지 않도록 모든 부품은 sm-ui- 접두어를 쓴다.
   - 대시보드에서 가장 마지막에 불러온다. 반응형 경계는 기존 CSS 와 같은 640 / 768 / 1024px.
   ============================================================ */

:root {
    --sm-brand-500: #14b8a6;
    --sm-brand-600: #0d9488;
    --sm-brand-900: #134e4a;

    --sm-wage-day-bg: #f0f9ff;
    --sm-wage-day-fg: #0369a1;
    --sm-wage-month-bg: #f5f3ff;
    --sm-wage-month-fg: #6d28d9;

    --sm-card-ring: rgba(226, 232, 240, 0.7);
    --sm-shadow-lift: 0 10px 24px -8px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    --sm-shadow-brand: 0 12px 28px -10px rgba(15, 118, 110, 0.45);
    --sm-shadow-brand-hover: 0 16px 32px -10px rgba(15, 118, 110, 0.6);
    --sm-shadow-modal: 0 24px 48px -12px rgba(15, 23, 42, 0.28);
    --sm-lift-y: -2px;
    --sm-focus-ring: 0 0 0 2px var(--sm-brand-500);

    --sm-page-x: var(--tp-space-5);
    --sm-header-h: 56px;

    --sm-font-size-nano: 11px;
    --sm-font-size-subtitle: 16px;
    --sm-font-size-amount: 17px;
    --sm-font-size-amount-lg: 20px;
    --sm-font-size-stat: 28px;
    --sm-font-size-grade: 34px;
}

@media (min-width: 768px) {
    :root {
        --sm-page-x: var(--tp-space-8);
        --sm-header-h: 64px;
    }
}

/* ---------- 유틸 ---------- */
.sm-ui-tnum { font-variant-numeric: tabular-nums; }
.sm-ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sm-ui-clamp-1,
.sm-ui-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.sm-ui-clamp-1 { -webkit-line-clamp: 1; }
.sm-ui-clamp-2 { -webkit-line-clamp: 2; }
.sm-ui-no-scrollbar { scrollbar-width: none; }
.sm-ui-no-scrollbar::-webkit-scrollbar { display: none; }
/* 640px 미만에서만 / 640px 이상에서만 보이기 (태그 노출 개수 규칙 등) */
@media (max-width: 639px) {
    .sm-ui-sm-up { display: none !important; }
}
@media (min-width: 640px) {
    .sm-ui-xs-only { display: none !important; }
}

/* ---------- 좌우 기준선 ---------- */
.sm-ui-page-x { padding-left: var(--sm-page-x); padding-right: var(--sm-page-x); }

/* ---------- 가로 스크롤 레일 ----------
   모바일: 화면 끝까지 스크롤되되 첫 항목과 스냅 정지 위치는 기준선에 맞춘다.
   위아래 4px 은 카드 그림자·hover 이동이 잘리지 않게 하는 여유.
   768px 이상: 스크롤을 풀고 줄바꿈(기본) 또는 그리드(--grid-3 / --grid-4)로 바뀐다.
   contain: grid·flex 부모 안에서 항목 너비 합만큼 부모를 넓히지 않게 한다. 그래서 너비가 내용에 맞춰지는
   부모(inline-block, float, width:max-content)에 넣으면 폭이 0 이 되니, 블록 폭이 정해진 곳에만 쓴다. */
.sm-ui-rail {
    contain: inline-size;
    display: flex;
    gap: var(--tp-space-2);
    margin: -4px calc(-1 * var(--sm-page-x));
    padding: 4px var(--sm-page-x);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--sm-page-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sm-ui-rail::-webkit-scrollbar { display: none; }
.sm-ui-rail > * { flex-shrink: 0; scroll-snap-align: start; }
.sm-ui-rail--gap-3 { gap: var(--tp-space-3); }
@media (min-width: 768px) {
    .sm-ui-rail {
        contain: none;
        margin: 0;
        padding: 0;
        overflow: visible;
        flex-wrap: wrap;
        scroll-padding-inline: 0;
    }
    .sm-ui-rail--grid-3,
    .sm-ui-rail--grid-4 { display: grid; gap: var(--tp-space-4); }
    .sm-ui-rail--grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-ui-rail--grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm-ui-rail--grid-3 > *,
    .sm-ui-rail--grid-4 > * { width: auto; }
}

/* ---------- 카드 ---------- */
.sm-ui-card {
    background: var(--tp-surface);
    border-radius: var(--tp-radius-xl);
    box-shadow: 0 0 0 1px var(--sm-card-ring), var(--tp-shadow-sm);
}
.sm-ui-card--interactive {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) {
    .sm-ui-card--interactive:hover {
        transform: translateY(var(--sm-lift-y));
        box-shadow: 0 0 0 1px var(--tp-border-hover), var(--sm-shadow-lift);
    }
}
.sm-ui-card--interactive:focus-visible { outline: none; box-shadow: var(--sm-focus-ring), var(--tp-shadow-sm); }

/* button 으로 쓸 때 기본 테두리·글꼴·가운데 정렬을 없앤다 */
button.sm-ui-card,
button.sm-ui-stat { border: 0; font: inherit; text-align: left; cursor: pointer; }

/* ---------- 상태 요약 (모바일 슬림 배지 ↔ 768px 이상 카드) ----------
   구조: .sm-ui-stat > .sm-ui-stat__head(.sm-ui-stat__label + .sm-ui-stat__icon)
                     + .sm-ui-stat__value(.sm-ui-stat__unit) + .sm-ui-stat__desc
   강조 카드: .sm-ui-stat--focus (+ .sm-ui-stat__badge, __meter, __more)
   진행 중 건이 있으면 .sm-ui-stat--active (모바일에서 숫자를 브랜드 색으로) */
.sm-ui-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--tp-radius-full);
    background: var(--tp-surface);
    box-shadow: 0 0 0 1px var(--sm-card-ring), var(--tp-shadow-sm);
    color: var(--tp-text-strong);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.sm-ui-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-2); }
.sm-ui-stat__label { font-size: var(--tp-font-size-caption); font-weight: 500; color: var(--tp-text-muted); white-space: nowrap; }
.sm-ui-stat__icon,
.sm-ui-stat__desc,
.sm-ui-stat__badge,
.sm-ui-stat__meter,
.sm-ui-stat__more { display: none; }
.sm-ui-stat__value {
    display: block;
    margin: 0;
    font-size: var(--tp-font-size-body);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sm-ui-stat__unit { margin-left: 2px; font-size: var(--tp-font-size-micro); font-weight: 600; color: var(--tp-text-subtle); }
.sm-ui-stat--active .sm-ui-stat__value { color: var(--tp-color-accent); }

.sm-ui-stat--focus {
    position: relative;
    overflow: hidden;
    order: -1;
    color: var(--tp-text-on-accent);
    background: linear-gradient(135deg, var(--sm-brand-600) 0%, var(--tp-color-accent) 50%, var(--sm-brand-900) 100%);
    box-shadow: var(--sm-shadow-brand);
}
.sm-ui-stat--focus .sm-ui-stat__label,
.sm-ui-stat--focus .sm-ui-stat__unit { color: var(--badge-primary-bg); }
.sm-ui-stat--focus .sm-ui-stat__value { display: flex; align-items: baseline; gap: 4px; color: inherit; }
.sm-ui-stat__grade { font-size: 15px; font-weight: 800; line-height: 1; }
.sm-ui-stat__score { font-size: var(--tp-font-size-micro); font-weight: 600; color: var(--badge-primary-bg); }

@media (min-width: 768px) {
    .sm-ui-stat {
        display: block;
        padding: var(--tp-space-5);
        border-radius: var(--tp-radius-xl);
        white-space: normal;
    }
    .sm-ui-stat__icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: var(--tp-radius-full);
        background: var(--tp-surface-muted);
        color: var(--tp-text-muted);
        transition: background-color 200ms ease, color 200ms ease;
    }
    .sm-ui-stat__icon svg { width: 16px; height: 16px; }
    .sm-ui-stat__value { margin-top: var(--tp-space-3); font-size: var(--sm-font-size-stat); }
    .sm-ui-stat--active .sm-ui-stat__value { color: inherit; }
    .sm-ui-stat__unit { margin-left: 4px; font-size: var(--tp-font-size-body-strong); }
    .sm-ui-stat__desc { display: block; margin: var(--tp-space-2) 0 0; font-size: var(--tp-font-size-micro); color: var(--tp-text-subtle); }

    .sm-ui-stat--focus { order: 99; }
    .sm-ui-stat--focus::before,
    .sm-ui-stat--focus::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(40px);
        pointer-events: none;
    }
    .sm-ui-stat--focus::before { right: -32px; top: -40px; width: 128px; height: 128px; background: rgba(255, 255, 255, 0.1); }
    .sm-ui-stat--focus::after { left: -24px; bottom: -48px; width: 112px; height: 112px; background: rgba(94, 234, 212, 0.2); }
    .sm-ui-stat--focus > * { position: relative; }
    .sm-ui-stat__badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--tp-radius-full);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        font-size: var(--sm-font-size-nano);
        font-weight: 600;
    }
    .sm-ui-stat--focus .sm-ui-stat__value { align-items: flex-end; gap: var(--tp-space-2); }
    .sm-ui-stat__grade { font-size: var(--sm-font-size-grade); letter-spacing: -0.02em; }
    .sm-ui-stat__score { margin-bottom: 2px; font-size: var(--tp-font-size-body-strong); }
    .sm-ui-stat__meter {
        display: block;
        height: 6px;
        margin-top: var(--tp-space-3);
        overflow: hidden;
        border-radius: var(--tp-radius-full);
        background: rgba(255, 255, 255, 0.2);
    }
    .sm-ui-stat__meter > span { display: block; height: 100%; border-radius: inherit; background: #fff; }
    .sm-ui-stat__more {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: var(--tp-space-2) 0 0;
        font-size: var(--tp-font-size-micro);
        color: var(--badge-primary-bg);
    }
}
@media (min-width: 768px) and (hover: hover) {
    .sm-ui-stat:hover { transform: translateY(var(--sm-lift-y)); box-shadow: 0 0 0 1px var(--tp-border-hover), var(--sm-shadow-lift); }
    .sm-ui-stat:hover .sm-ui-stat__icon { background: var(--tp-color-accent-subtle); color: var(--tp-color-accent); }
    .sm-ui-stat--focus:hover { box-shadow: var(--sm-shadow-brand-hover); }
    .sm-ui-stat--focus:hover .sm-ui-stat__more { color: #fff; }
}

/* ---------- 필터 칩 ----------
   선택 상태는 aria-pressed="true" 또는 .is-active. 선택 시 체크 표시는 CSS 가 붙인다. */
.sm-ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--tp-radius-full);
    background: var(--tp-surface-muted);
    color: var(--tp-status-neutral-fg);
    font: inherit;
    font-size: var(--tp-font-size-caption);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.sm-ui-chip:hover { background: var(--tp-border-default); }
.sm-ui-chip:active { transform: scale(0.95); }
.sm-ui-chip:focus-visible { outline: none; box-shadow: var(--sm-focus-ring); }
.sm-ui-chip[aria-pressed="true"],
.sm-ui-chip.is-active {
    background: var(--tp-color-accent);
    color: var(--tp-text-on-accent);
    box-shadow: var(--sm-shadow-brand);
}
.sm-ui-chip[aria-pressed="true"]:hover,
.sm-ui-chip.is-active:hover { background: var(--tp-color-accent-hover); }
.sm-ui-chip[aria-pressed="true"]::before,
.sm-ui-chip.is-active::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 768px) {
    .sm-ui-chip { padding: 8px 16px; }
}

/* ---------- 미니 태그 ----------
   --info: 거리·시간 같은 정보 / --feature: 공고 특징 / --more: +N
   노출 개수: 모바일 2개, 640px 이상 3개. 3번째 태그에 .sm-ui-sm-up, 모바일용 +N 에 .sm-ui-xs-only,
   640px 이상용 +N 에 .sm-ui-sm-up 을 붙인다. */
.sm-ui-tag-row { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.sm-ui-tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--tp-radius-full);
    font-size: var(--sm-font-size-nano);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.sm-ui-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.sm-ui-tag--info { background: var(--tp-surface-muted); color: var(--tp-status-neutral-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-ui-tag--feature { color: var(--tp-color-accent); box-shadow: inset 0 0 0 1px var(--tp-color-accent-border); }
.sm-ui-tag--more { background: var(--tp-surface-muted); color: var(--tp-text-muted); font-variant-numeric: tabular-nums; }
.sm-ui-tag--urgent { border-radius: var(--tp-radius-sm); padding: 2px 6px; background: var(--tp-status-danger-bg); color: var(--tp-status-danger-fg); font-weight: 700; }
.sm-ui-tag--fresh { border-radius: var(--tp-radius-sm); padding: 2px 6px; background: var(--tp-color-accent-subtle); color: var(--tp-color-accent); font-weight: 700; }
.sm-ui-tag--safe { border-radius: var(--tp-radius-sm); padding: 2px 6px; background: var(--tp-status-success-bg); color: var(--tp-status-success-fg); font-weight: 600; }
.sm-ui-tag--shrink { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) {
    .sm-ui-tag { font-size: var(--tp-font-size-micro); }
}

/* ---------- 급여 배지 ---------- */
.sm-ui-wage {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--tp-radius-sm);
    font-size: var(--sm-font-size-nano);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.sm-ui-wage--hour { background: var(--tp-color-accent-subtle); color: var(--tp-color-accent); }
.sm-ui-wage--day { background: var(--sm-wage-day-bg); color: var(--sm-wage-day-fg); }
.sm-ui-wage--month { background: var(--sm-wage-month-bg); color: var(--sm-wage-month-fg); }
.sm-ui-amount { font-size: var(--sm-font-size-amount); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tp-text-strong); }
.sm-ui-amount--lg { font-size: var(--sm-font-size-amount-lg); font-weight: 800; letter-spacing: -0.01em; }

/* ---------- 리스트/지도 같은 2~3개 전환 버튼 ----------
   선택 상태는 aria-selected="true" / aria-pressed="true" / .is-active */
.sm-ui-seg {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--tp-radius-lg);
    background: var(--tp-surface-muted);
}
.sm-ui-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--tp-radius-md);
    background: transparent;
    color: var(--tp-text-muted);
    font: inherit;
    font-size: var(--tp-font-size-caption);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.sm-ui-seg__btn svg { width: 16px; height: 16px; }
.sm-ui-seg__btn:hover { color: var(--tp-text-default); }
.sm-ui-seg__btn:focus-visible { outline: none; box-shadow: var(--sm-focus-ring); }
.sm-ui-seg__btn[aria-selected="true"],
.sm-ui-seg__btn[aria-pressed="true"],
.sm-ui-seg__btn.is-active {
    background: var(--tp-surface);
    color: var(--tp-text-strong);
    box-shadow: var(--tp-shadow-sm);
}

/* ---------- 정렬 드롭다운 (select 요소에 직접) ---------- */
.sm-ui-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 32px 8px 12px;
    border: 0;
    border-radius: var(--tp-radius-lg);
    background: var(--tp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px;
    box-shadow: inset 0 0 0 1px var(--tp-border-default);
    color: var(--tp-text-default);
    font: inherit;
    font-size: var(--tp-font-size-caption);
    font-weight: 600;
    cursor: pointer;
}
.sm-ui-select:hover { box-shadow: inset 0 0 0 1px var(--tp-border-hover); }
.sm-ui-select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sm-brand-500); }

/* ---------- 밑줄 탭 ---------- */
.sm-ui-tabs { display: flex; gap: var(--tp-space-2); border-bottom: 1px solid var(--tp-border-default); }
.sm-ui-tabs__tab {
    margin-bottom: -1px;
    padding: 0 var(--tp-space-3) 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--tp-text-muted);
    font: inherit;
    font-size: var(--tp-font-size-body);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.sm-ui-tabs__tab:first-child { padding-left: 4px; }
.sm-ui-tabs__tab:hover { color: var(--tp-text-default); }
.sm-ui-tabs__tab:focus-visible { outline: none; box-shadow: var(--sm-focus-ring); border-radius: var(--tp-radius-sm); }
.sm-ui-tabs__tab[aria-selected="true"],
.sm-ui-tabs__tab.is-active { border-bottom-color: var(--tp-text-strong); color: var(--tp-text-strong); font-weight: 700; }
.sm-ui-tabs__count { margin-left: 2px; font-variant-numeric: tabular-nums; }
.sm-ui-tabs__tab[aria-selected="true"] .sm-ui-tabs__count,
.sm-ui-tabs__tab.is-active .sm-ui-tabs__count { color: var(--tp-color-accent); }
/* 탭이 많아 넘치면 가로 스크롤. overflow 가 탭의 -1px 밑줄을 자르므로 바닥선은 inset 그림자로 그린다 */
.sm-ui-tabs--scroll {
    overflow-x: auto;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--tp-border-default);
    scrollbar-width: none;
}
.sm-ui-tabs--scroll::-webkit-scrollbar { display: none; }
.sm-ui-tabs--scroll .sm-ui-tabs__tab { flex-shrink: 0; margin-bottom: 0; }

/* ---------- 배너형 링크 카드 (예: 내 주변 5km 이내 일자리 찾기) ----------
   .sm-ui-card.sm-ui-card--interactive 와 함께 쓴다. */
.sm-ui-banner { box-sizing: border-box; display: flex; align-items: center; gap: var(--tp-space-3); width: 100%; padding: 10px var(--tp-space-3); }
.sm-ui-banner__icon {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--tp-radius-lg);
    background: var(--tp-color-accent-subtle);
    color: var(--tp-color-accent);
}
.sm-ui-banner__icon svg { position: relative; width: 20px; height: 20px; }
.sm-ui-banner__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--badge-primary-bg);
    opacity: 0.4;
    animation: sm-ui-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.sm-ui-banner__body { flex: 1; min-width: 0; }
.sm-ui-banner__title { display: block; margin: 0; font-size: var(--tp-font-size-body); font-weight: 600; color: var(--tp-text-strong); }
.sm-ui-banner__title em { font-style: normal; color: var(--tp-color-accent); }
.sm-ui-banner__desc {
    display: block;
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--tp-font-size-micro);
    color: var(--tp-text-muted);
}
.sm-ui-banner__desc b { font-weight: 600; color: var(--tp-text-default); }
.sm-ui-banner__arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--tp-radius-full);
    background: var(--tp-surface-muted);
    color: var(--tp-text-muted);
    transition: background-color 150ms ease, color 150ms ease;
}
.sm-ui-banner__arrow svg { width: 16px; height: 16px; }
.sm-ui-banner:hover .sm-ui-banner__arrow { background: var(--tp-color-accent); color: var(--tp-text-on-accent); }

/* 핵심 동작(내 주변): 흰 카드 사이에서 민트 면+틸 핀으로만 구분. 그라데이션·펄스는 쓰지 않는다. */
.sm-ui-banner--nearby {
    background: var(--tp-color-accent-subtle);
    box-shadow: 0 0 0 1px var(--tp-color-accent-border);
}
.sm-ui-banner--nearby .sm-ui-banner__icon {
    background: var(--tp-color-accent);
    color: var(--tp-text-on-accent);
}
.sm-ui-banner--nearby .sm-ui-banner__icon::before { content: none; }
.sm-ui-banner--nearby .sm-ui-banner__go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--tp-radius-full);
    background: var(--tp-color-accent);
    color: var(--tp-text-on-accent);
    font-size: var(--tp-font-size-caption);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
@media (hover: hover) {
    .sm-ui-banner--nearby.sm-ui-card--interactive:hover {
        transform: none;
        background: var(--tp-color-accent-subtle);
        box-shadow: 0 0 0 1.5px var(--tp-color-accent);
    }
}
.sm-ui-banner--nearby:focus-visible {
    box-shadow: var(--sm-focus-ring);
}
.sm-ui-banner--nearby.is-active {
    background: var(--tp-color-accent);
    box-shadow: 0 0 0 1px var(--tp-color-accent);
}
.sm-ui-banner--nearby.is-active .sm-ui-banner__icon {
    background: var(--tp-surface);
    color: var(--tp-color-accent);
}
.sm-ui-banner--nearby.is-active .sm-ui-banner__title,
.sm-ui-banner--nearby.is-active .sm-ui-banner__desc,
.sm-ui-banner--nearby.is-active .sm-ui-banner__desc b {
    color: var(--tp-text-on-accent);
}
.sm-ui-banner--nearby.is-active .sm-ui-banner__title em {
    color: inherit;
    font-weight: 800;
}
.sm-ui-banner--nearby.is-active .sm-ui-banner__go {
    background: var(--tp-surface);
    color: var(--tp-color-accent);
}

@media (min-width: 768px) {
    .sm-ui-banner { gap: var(--tp-space-4); padding: var(--tp-space-4); }
    .sm-ui-banner__icon { width: 44px; height: 44px; }
    .sm-ui-banner__title { font-size: var(--tp-font-size-body-strong); }
    .sm-ui-banner__desc { font-size: var(--tp-font-size-caption); }
    .sm-ui-banner__arrow { width: 36px; height: 36px; }
    .sm-ui-banner--nearby .sm-ui-banner__go { min-height: 36px; padding: 0 14px; }
}

@keyframes sm-ui-ping {
    75%, 100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-ui-banner__icon::before { animation: none; }
    .sm-ui-card--interactive,
    .sm-ui-stat,
    .sm-ui-chip { transition: none; }
    .sm-ui-card--interactive:hover,
    .sm-ui-stat:hover { transform: none; }
}