/* 사용자 앱 탐색 화면 (화면설계서 S 탐색 v0.3 — S-01 탐색 목록 · S-01F 검색 결과 · S-02 낙찰 결과 · S-03 조건 설정)
 * - user-tokens.css · user-home.css · user-app.css (조건 설정은 + user-guide.css 의 하위 화면 상단 바) 뒤에 읽힙니다(레이아웃 stylesheets 로 이 화면에서만).
 * - 값은 시안(고비_화면시안_261015v3 V.find · V.cond) 실측값, 시안 v15 에서 바뀐 것(검색창 .fsch · .fqn, 회색 바탕 위 흰 부품 · 알약 칩)은
 *   v15 값. 화면은 v15 켜기(body.app--v15)로 그리며 흰 부품은 --color-bg-surface(v15 에서 page 가 회색). 토큰에 없는 색은 아래 .app 의 --explore-* 로 한곳에 둠.
 * - 접두어: exp-*. 유형 칩 색은 user-home.css 의 home-tone--* 를 그대로 씀. "준비 중"은 user-home.css .home-pending(파란 글자, 모양 없음).
 * - 인라인 style 없이 동작(CSP). 대출 포함 보기(S-03A)의 글자 바꿈 · 안내 상자는 :has() 로만, 칩 켜짐 표시도 :has(:checked). */

.app {
  --explore-search-placeholder: #8a8880; /* 검색창 안내 글 (시안 v15 .fsch input::placeholder) */
  --explore-switch-off: #d5d8dd;         /* 전체 선택 토글 꺼짐 (시안 .sw) */
  --explore-dot-on: #7fd8a8;             /* 켜진 칩 안 초록 점 (시안 .opt.on .dot) */
  --explore-kv-line: #f0f1f3;            /* 정확도 상자 줄 나눔 (시안 .kv) */
  --explore-toast-bg: rgba(27, 27, 30, 0.94); /* 토스트 (시안 .toast) */
  --explore-save-shadow: 0 6px 20px rgba(209, 34, 42, 0.35); /* 떠 있는 조건 저장 (시안 .fsave .btn1) */
}

/* ---------- 3 검색창 (C-53, 시안 v15 .fsch): 높이 46 흰 알약 · 잉크 테두리, 돋보기 · 입력 · 지우기 × · 잉크 '검색' 버튼 ----------
 * 옛 '진행 중 · 낙찰 결과' 탭(.exp-seg) 자리(결정 10). 입력칸 테두리가 없으므로 포커스는 검색창 전체 테두리로 보임 */
.exp-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 46px;
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 var(--space-1_5) 0 var(--space-3_5);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
}

.exp-search:has(.exp-search__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.exp-search__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 2;
  stroke-linecap: round;
}

.exp-search__input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-md);
}

.exp-search__input::placeholder {
  color: var(--explore-search-placeholder);
  opacity: 1;
}

.exp-search__input::-webkit-search-cancel-button {  /* 브라우저 기본 지우기 대신 서버 링크 × (스크립트 없이 동작) */
  display: none;
}

.exp-search__clear {
  position: relative;
  display: flex;
  flex: none;
  padding: var(--space-1);
}

.exp-search__clear::after {                    /* 누르는 영역 48px (모양은 그대로) */
  content: "";
  position: absolute;
  inset: -12px;
}

.exp-search__clear svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-text-tertiary);
  stroke-width: 2;
  stroke-linecap: round;
}

.exp-search__go {
  position: relative;
  flex: none;
  height: 34px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.exp-search__go::after {                       /* 누르는 영역 높이 48px */
  content: "";
  position: absolute;
  inset: -7px 0;
}

.exp-search__go:active {
  background: var(--color-bg-inverse-pressed);
}

/* 20 검색 결과 줄 (S-01F, 시안 v15 .fqn): 검색창 바로 아래 회색 */
.exp-qline {
  margin: var(--space-1_5) 2px 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs_5);
}

/* ---------- 4 조건 설정 · 5 지도로 보기 (시안 .crow · .cset · .mapgo) ---------- */
.exp-crow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2_5);
}

.exp-cset,
.exp-mapgo {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.exp-cset {
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.exp-cset:active {
  background: var(--color-bg-inverse-pressed);
}

.exp-cset__icon,
.exp-mapgo__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exp-cset__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xs);
  font-style: normal;
}

.exp-mapgo {
  gap: var(--space-1_5);
  margin-left: var(--space-2);
  padding: 0 var(--space-3_5);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* ---------- 13 조건 요약 줄 · 15 빠른 조건 안내 · 12 홈 유형 칩 (시안 .condl · .qnote · .fchip) ---------- */
.exp-condl {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.exp-condl__src {
  flex: none;
  color: var(--color-text-tertiary);
}

/* 14 '내 정보 조건으로'(S-01C, 시안 .lnk 12px) — 탐색 조건이 걸렸고 회원 내 조건도 있을 때 출처 자리에 링크(시안 정합 G4 A-11) */
.exp-condl__tomine {
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.exp-qnote {
  margin-bottom: var(--space-2);
  padding: 11px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-verdict-caution-bg);
  color: var(--color-verdict-caution-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.exp-qnote a {
  color: var(--color-verdict-caution-text);
  font-weight: var(--font-weight-heavy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.exp-fchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2_5);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* ---------- 6 정렬 · 7 검색 결과 건수 (시안 .rh2 · .rtot) ---------- */
.exp-rh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1_5);
}

.exp-sort {
  position: relative;
  margin: 0;
}

.exp-sort__select {
  -webkit-appearance: none;
  appearance: none;
  height: 31px;
  margin: 0;
  padding: var(--space-2) 20px var(--space-2) var(--space-1_5);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: 15px;
  cursor: pointer;
}

.exp-sort__chev {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.exp-total {
  margin-bottom: var(--space-2_5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.exp-total b {
  color: var(--color-text-primary);
}

/* ---------- 8 목록 행 카드 C-6: 공용 /static/shared/user-item-row.css (partials/user-item-row). 여기는 S-02 카드 목록만 ---------- */
.exp-list {
  list-style: none;
}

/* ---------- 9 물건 더 보기 · 10 목록 끝 안내 (시안 .btn2.fmore · .mlft · .mlbtn) ---------- */
.exp-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: var(--space-2_5) 0;
  padding: var(--space-3);
  border: 1.5px solid var(--color-text-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.exp-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2_5);
  margin-top: 18px;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.exp-foot__btn {
  padding: var(--space-2_5) 22px;
  border-radius: var(--radius-xl);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.exp-foot__btn:active {
  background: var(--color-brand-primary-pressed);
}

/* ---------- 16 결과 없음 S-01E (시안 .empty) ---------- */
.exp-empty {
  padding: 30px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.exp-empty__links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-1);
}

.exp-empty__img {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto var(--space-2);
}

.exp-lnk {
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* ---------- S-02 17 기간 줄 · 18 낙찰 결과 카드 · 19 정확도 상자 (시안 .rh2 · .res · .pill · .box · .kv) ---------- */
.exp-rh--won {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.exp-res {
  margin-bottom: var(--space-2_5);
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.exp-res__r1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 판정 · 유형 칩: 권리 자료가 없으면 유형만(시안 p-no 색) */
.exp-pill {
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-verdict-risk-bg);
  color: var(--color-verdict-risk-text);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}

.exp-res__rate {
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
}

.exp-res__nm {
  margin-top: var(--space-1_5);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.exp-res__date {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.exp-res__cmp {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-2_5);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.exp-res__cmp b {
  color: var(--color-text-primary);
}

.exp-box {
  padding: var(--space-2_5) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.exp-box__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.exp-box__list {
  margin: 0;
}

.exp-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2_5);
  padding: 7px 0;
  border-bottom: 1px solid var(--explore-kv-line);
  font-size: var(--font-size-sm);
}

.exp-kv:last-child {
  border-bottom: 0;
}

.exp-kv dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.exp-box__note {
  margin-top: var(--space-1_5);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  line-height: 1.5;
}

/* ---------- 토스트 C-5 '탐색 조건을 저장했어요' (시안 .toast): 4초 보인 뒤 사라짐(CSS 애니메이션, 스크립트 없음) ---------- */
.exp-toast {
  position: fixed;
  bottom: calc(100px + var(--app-safe-bottom));
  left: 50%;
  z-index: var(--z-toast);
  padding: var(--space-2_5) var(--space-3_5);
  border-radius: 10px;
  background: var(--explore-toast-bg);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: exp-toast var(--motion-toast-duration) linear forwards;
}

@keyframes exp-toast {
  0%, 92% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* ---------- 하위 화면 상단 바 오른쪽 글자 버튼 '초기화' (시안 .rst, 레이아웃 headerAction) ---------- */
.app-topbar--action {
  grid-template-columns: var(--layout-hit-min) minmax(0, 1fr) auto;
}

.app-topbar__action {
  position: relative;
  align-self: center;
  justify-self: end;
  margin-inline-end: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  text-decoration: none;
}

/* 누르는 영역 48px (2-6) — 모양은 그대로 */
.app-topbar__action::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

/* ---------- S-03 조건 설정 (시안 .fsec · .fh · .rng · .chkb · .srch · .opts · .opt · .acc · .sw · .inp · .btn1 · .rk · .sh) ---------- */
.exp-cond {
  margin: 0;
  line-height: normal;                       /* 시안 body 줄 높이 지정 없음(normal) — 앱 body 1.2 대신 (user-my-conditions.css .myc 와 같은 이유) */
}

.exp-fsec {
  margin: 0 calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  padding: 18px var(--app-gutter-end) 18px var(--app-gutter-start);
  border-bottom: 8px solid var(--color-bg-subtle);
}

.exp-fsec--last {
  border-bottom: 0;
}

.exp-fh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2_5);
  font-size: 0.9375rem;
}

.exp-fh__t {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
}

.exp-fh__sub {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.exp-fh__v {
  flex: none;
  font-weight: var(--font-weight-bold);
}

.exp-fh__v--toggle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* 대출 포함 기준 (S-03A): 체크 상자에 따라 제목 괄호 글자 · 안내 상자 바꿈 */
.exp-loan-on,
.exp-lnote {
  display: none;
}

.exp-fsec:has(.exp-chkb__input:checked) .exp-loan-off {
  display: none;
}

.exp-fsec:has(.exp-chkb__input:checked) .exp-loan-on {
  display: inline;
}

.exp-fsec:has(.exp-chkb__input:checked) .exp-lnote {
  display: block;
}

.exp-rng {
  display: inline-block;                     /* 시안 .rng 은 기본(인라인 블록) — 위 여백이 머리 아래 여백과 겹치지 않고 줄 상자 높이만큼 아래가 띔 */
  width: 100%;
  height: 16px;
  margin: var(--space-1_5) 0 var(--space-0_5);
  accent-color: var(--color-text-primary);
}

.exp-mini {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
}

.exp-chkb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  margin-top: var(--space-2_5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.exp-chkb__input,
.exp-opt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.exp-chkb__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 5px;
  background: var(--color-bg-surface);
}

.exp-chkb__box svg {
  display: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--color-text-inverse);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exp-chkb:has(:checked) .exp-chkb__box {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
}

.exp-chkb:has(:checked) .exp-chkb__box svg {
  display: block;
}

.exp-chkb:has(:focus-visible) .exp-chkb__box,
.exp-opt:has(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.exp-lnote {
  margin-top: var(--space-2_5);
  padding: 11px var(--space-3);
  border-radius: 10px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.exp-lnote a {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-heavy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.exp-srch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  margin-bottom: var(--space-2_5);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.exp-srch__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
}

.exp-srch__input,
.exp-inp__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  outline: none;
}

.exp-srch__input {
  padding: 1px 2px;                          /* 시안 .srch input 은 브라우저 기본 안쪽 여백 그대로 */
  font-size: var(--font-size-md);
}

/* 섹션 머리 제목: 시안 .sh b 는 줄 높이 normal(명조 18px → 26px) — 공통 .app-sh__title 은 1.2 라 이 화면만 시안대로 */
.exp-cond .app-sh__title {
  line-height: normal;
}

/* 입력 자리의 "준비 중"(자리 글자): 파란 글자만 (D-20) */
.exp-srch__input::placeholder,
.exp-inp__input::placeholder {
  color: var(--color-text-pending);
  opacity: 1;
}

.exp-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}

.exp-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 15px;
  cursor: pointer;
}

.exp-opt:has(:checked) {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.exp-opt__pin {
  width: 14px;
  height: 14px;
  margin-right: var(--space-1);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.exp-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--color-verdict-safe);
  vertical-align: 2px;
}

.exp-opt:has(:checked) .exp-dot {
  background: var(--explore-dot-on);
}

.exp-note {
  margin-top: var(--space-1_5);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  line-height: 1.5;
}

.exp-note--lead {
  margin: calc(-1 * var(--space-1)) 0 var(--space-2_5);
}

.exp-note--flush {
  margin: 0;
}

.exp-note--center {
  margin-top: var(--space-2);
  text-align: center;
}

.exp-acc {
  margin-bottom: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.exp-acc__sum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-md);
  list-style: none;
  cursor: pointer;
}

.exp-acc__sum::-webkit-details-marker {
  display: none;
}

.exp-acc__name {
  flex: 1;
}

.exp-acc__all {
  display: inline-flex;
  align-items: center;
  gap: 0;                                    /* 화면 읽기용 숨은 글자도 flex 항목이라 gap 이 두 번 들어감 → 스위치 앞 여백으로 (시안 .all gap 6) */
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.exp-acc__chev {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

.exp-acc[open] .exp-acc__chev {
  transform: rotate(180deg);
}

.exp-acc__bd {
  padding: 0 var(--space-3) var(--space-3);
}

.exp-acc__gl {
  margin: var(--space-2_5) 0 var(--space-1_5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.exp-sw {
  position: relative;
  display: inline-block;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--explore-switch-off);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.exp-sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  transition: left var(--motion-duration-fast) var(--motion-ease-out);
}

.exp-acc__all .exp-sw {
  margin-left: var(--space-1_5);
}

.exp-acc__all[aria-pressed="true"] .exp-sw {
  background: var(--color-text-primary);
}

.exp-acc__all[aria-pressed="true"] .exp-sw::after {
  left: 19px;
}

.exp-inp {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-3_5);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.exp-inp__input {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.exp-inp__unit {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.exp-btn1 {
  display: block;
  width: 100%;
  padding: var(--space-3_5);
  border-radius: var(--radius-md);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  line-height: 18px;
}

.exp-btn1:active {
  background: var(--color-brand-primary-pressed);
}

.exp-btn1--save {
  margin-top: 22px;
}

.exp-rk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2_5) 0;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

/* 18 떠 있는 조건 저장 (S-03A): 값이 바뀌었고 본래 버튼이 화면 밖일 때만(/static/shared/user-explore.js 가 hidden 을 뗌) */
.exp-fsave {
  position: fixed;
  right: 0;
  bottom: calc(24px + var(--app-safe-bottom));
  left: 0;
  z-index: 30;
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--app-gutter-end) 0 var(--app-gutter-start);
}

.exp-fsave[hidden] {
  display: none;
}

.exp-fsave .exp-btn1 {
  box-shadow: var(--explore-save-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .exp-acc__chev,
  .exp-sw,
  .exp-sw::after {
    transition: none;
  }
}

/* ---------- 시안 v15 회색 바탕 위 부품 (body.app--v15): 흰 상자 · 알약 칩 ----------
 * 묶음 사이 8px 띠(.exp-fsec 아래 bg-subtle)는 v15 에서 바탕과 같은 색이라 보이지 않음(시안 v15 그대로). */
.app--v15 .exp-res {
  background: var(--color-bg-surface);
}

/* 조건 설정(S-03) · 내 조건(C-02 · C-03) 입력 부품 — 시안 v15 는 .opt · .acc · .inp · .srch 를 바꾸지 않아(v15 덮어쓰기는 .tabs · .seg · .tchips 뿐)
 * 회색 바탕 위에 바탕 없이 그립니다: 칩 = 연한 선(#E4E4E4) · 모서리 10 · 글자 #444, 고른 칩만 잉크 채움, 펼침 상자 · 입력칸 = 선만, 검색칸 = 바탕과 같은 회색.
 * 입력칸 안의 흰 띠는 시안 input 기본 흰 바탕을 그대로 옮긴 것(2026-10-27 CSS 시안 일치). */
.app--v15 .exp-opt,
.app--v15 .exp-acc,
.app--v15 .exp-inp {
  background: transparent;
}

.app--v15 .exp-opt:has(:checked) {
  background: var(--color-text-primary);
}

.app--v15 .exp-inp__input {
  background: var(--color-bg-surface);
}

.app--v15 .exp-mapgo {
  border-color: var(--color-border-inverse);
}