/* EV-CHARGER-NEARBY-LIST-P0 — 지역정보 전기차 충전소 목록. Theme tokens only.
   REGIONAL-INFO-DESIGN-03 (owner confirmed 2026-10-17, 시안 03 최종본 SCR.ev): the shared ri3 pieces
   (site-regional-info-ui.js, styled in site-regional-info-ds.css 「시안 03 최종본」) — region box,
   전체/급속/완속 + 「충전 가능한 곳만」 + 「반경 5km ⌄」 (one row on a PC), 「충전소 N곳 / 가까운 순」, one
   list card (two on a PC), rows with a dot-and-words state and the map app icon, 「N곳 더 보기」, the
   source line. The --ri3-* tokens carry light and dark. ".ev-screen" with the two :not() ids keeps
   these rules above the older 시안 01·02 전기차 rules (which key off the old ".ev-surface"). */
.ev-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ev-title {
  margin: 0;
}

.ev-title:focus {
  outline: none;
}

/* heard, not seen (the distance says from where and that it is a straight line) */
.ev-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen {
  gap: 16px;
  word-break: keep-all;
  color: var(--ri3-text);
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen > * {
  margin: 0;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-title {
  color: var(--ri3-text);
  font-size: 26px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -.6px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-where-note {
  padding: 0 4px;
}

/* ── the frame header: 〈 지역정보, the title, the region box (under it on a phone) ── */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .site-modal-header.ev-head {
  gap: 16px;
  padding-bottom: 16px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .site-modal-header.ev-head > .ev-where {
  align-self: stretch;
  min-width: 0;
}

/* ── controls ───────────────────────────────────────────────────────────────── */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-filter-row {
  flex-wrap: nowrap;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-available {
  min-width: 0;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-available-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-radius {
  flex: none;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-radius-chevron {
  color: var(--ri3-text2);
}

/* Every control is at least 44px to touch (the 시안 draws the pills 40px and the segments 42px). */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen :is(.ev-available, .ev-radius) {
  height: 44px;
  min-height: 44px;
  border-radius: 22px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-segment-option {
  height: 44px;
  min-height: 44px;
}

/* ── 충전소 N곳 / 가까운 순 ─────────────────────────────────────────────────────── */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-count-row {
  margin-top: 4px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-status {
  min-width: 0;
  margin: 0;
  color: var(--ri3-text);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-count {
  font-style: normal;
  color: var(--ri3-primary);
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-notice {
  margin: 0;
  padding: 0 4px;
}

/* ── the list: one card (two columns on a PC), rows split by a hairline ─────────── */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results[hidden] {
  display: none;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card {
  margin: 0;
  min-width: 0;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card-body {
  gap: 6px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card-body > p {
  margin: 0;
}

/* 7번 전국 점검 10-29: a long station name (「성동구 마장동 거주자우선주차장 가로등형 충전기」) was cut at two lines — it shows whole. */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card-name {
  display: block;
  overflow: visible;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--ri3-text);
  font-size: 17px;
  line-height: 23px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card-chargers {
  color: var(--ri3-text);
  font-weight: 600;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card-where {
  color: var(--ri3-text2);
}

/* 시안: the map icon sits at the top of the row, not in its middle */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-card-acts {
  justify-content: flex-start;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-empty {
  padding: 16px;
  list-style: none;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-widen {
  width: 100%;
  height: 52px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-more[hidden] {
  display: none;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-more[aria-busy="true"] {
  opacity: .6;
}

/* ── a failure: one quiet cell in place of the list ──────────────────────────────── */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-error:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 0;
  border-radius: 18px;
  background: var(--ri3-surface);
  box-shadow: var(--ri3-shadow);
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-error-text {
  margin: 0;
  color: var(--ri3-text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-retry {
  height: 48px;
}

/* ── source: one quiet line, [자세히 ›] opens the full words ───────────────────────── */
.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-source:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-source-line {
  min-width: 0;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-source-more {
  flex: none;
  min-width: 44px;
  font-size: 13px;
}

.consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-source-detail {
  margin: 0;
  padding: 0 4px;
}

/* ── PC: the controls on one row, the list in two cards side by side ───────────── */
@media (min-width: 761px) {
  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen {
    gap: 20px;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-title {
    font-size: 32px;
    line-height: 42px;
  }

  /* 시안 PC: 〈 지역정보 on its own row, then the title with the region box on its right */
  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .site-modal-header.ev-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px 24px;
    padding-bottom: 20px;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .site-modal-header.ev-head > .site-modal-close {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: start;
  }

  body.chat-home-page .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .site-modal-header.ev-head > h2 {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -.6px;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .site-modal-header.ev-head > .ev-where {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    min-width: 420px;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-segment {
    width: 420px;
    max-width: 100%;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-filter-row {
    gap: 12px;
  }

  /* Two columns, each its own card (rows 1·3·5 left, 2·4·6 right, as in the 시안). */
  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > li {
    background: var(--ri3-surface);
    box-shadow: var(--ri3-shadow);
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > li:nth-child(-n+2) {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > li:nth-child(odd):nth-last-child(-n+2),
  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > li:nth-child(even):nth-last-child(-n+2) {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  /* the hairline sits between rows of one column only */
  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > .ri3-row + .ri3-row::before {
    content: none;
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > .ri3-row:nth-child(n+3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--ri3-line);
  }

  .consumer-workspace[data-workspace="life"]:not(#ri):not(#ri-03) .ev-screen .ev-results > .ev-empty {
    grid-column: 1 / -1;
    border-radius: 18px;
  }
}

/* ── 반경 sheet (outside 지역정보's scope: site theme tokens) ─────────────────── */
.ev-radius-dialog[data-presentation="SHEET"] {
  max-width: 560px;
  margin: 0 auto;
}

.ev-radius-sheet {
  display: grid;
  gap: 14px;
  padding: 4px 2px 8px;
  color: var(--lotbi-text-primary);
  word-break: keep-all;
}

.ev-radius-sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.ev-radius-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ev-radius-option {
  min-height: 52px;
  padding: 0 4px;
  border: 1px solid var(--lotbi-border-default);
  border-radius: 12px;
  background: var(--lotbi-surface-primary);
  color: var(--lotbi-text-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.ev-radius-option:hover {
  background: var(--lotbi-surface-hover);
}

.ev-radius-option[aria-pressed="true"] {
  border-color: var(--lotbi-brand-solid-bg);
  background: var(--lotbi-brand-solid-bg);
  color: var(--lotbi-brand-solid-text);
}

.ev-radius-option:focus-visible {
  outline: 2px solid var(--lotbi-focus-ring);
  outline-offset: 2px;
}

.ev-radius-dialog .lotbi-sheet-dismiss {
  min-height: 48px;
}