/* ================================================================================ * 46-v160-search.css — Hi Car Match v160.1 · 엔카식 드릴다운 차량검색 패널 * -------------------------------------------------------------------------------- * OWNS * views/partials/header.php → .v160-esrch__trigger + #v160-esrch 서브트리 전체 * assets/js/encar-search.js → is-on / is-open / data-step 상태 클래스 * * 제조사 → 모델 → 세부조건으로 파고드는 다단 패널 하나가 데스크탑에서는 3열 * 드롭다운으로, 모바일(≤1024px)에서는 전체화면 스텝퍼로 동작한다. 마크업은 하나다. * * RULES HONOURED * · 38-v160-foundation.css의 --v160-* 토큰만 사용. 생 hex 없음. * · 파운데이션 프리미티브(.v160-btn/.v160-input/...)는 재정의하지 않고 합성만 한다. * · 논리 속성만 사용(margin-inline / padding-block / inset-inline / border-inline). * RTL은 글리프 미러링처럼 논리 속성으로 표현 불가능한 것만 [dir="rtl"]로 보정. * · :has() / @layer / 중첩 없음. 선택자 특이도는 클래스 2개까지. * · 브레이크포인트는 파운데이션과 동일: 640 / 1024 / 1025. * * SECTIONS * 01 헤더 트리거 * 02 오버레이 · 패널 셸 * 03 시트 헤드 (제목 / 뒤로 / 닫기 / 스텝) * 04 선택 칩 줄 * 05 컬럼 공통 (제조사 · 모델 · 세부조건) * 06 옵션 행 (라디오 = 제조사, 체크박스 = 모델) * 07 세부조건 (범위 · 세그먼트 · 필) * 08 푸터 (초기화 / 다음 / N대 보기) * 09 모바일 전체화면 스텝퍼 (≤1024px) * 10 RTL 보정 * 11 모션 축소 · 인쇄 * ============================================================================== */ /* ================================================================================ * 01 — 헤더 트리거 * 통합검색 입력 옆에 붙는 "제조사·모델" 버튼. 입력 필드와 같은 높이를 쓴다. * ============================================================================== */ .v160-esrch__bar { display: flex; align-items: center; gap: var(--v160-space-2); inline-size: 100%; min-inline-size: 0; } .v160-esrch__bar .v160-pub-hdr__search-field { flex: 1 1 auto; min-inline-size: 0; } .v160-esrch__trigger { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--v160-space-2); block-size: var(--v160-control-h); padding-inline: var(--v160-space-4); border: 1px solid var(--v160-border-strong); border-radius: var(--v160-r-md); background: var(--v160-surface); color: var(--v160-text); font-family: inherit; font-size: var(--v160-fs-sm); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color var(--v160-dur) var(--v160-ease), background var(--v160-dur) var(--v160-ease), color var(--v160-dur) var(--v160-ease); } /* JS가 붙기 전에는 감춰 둔다 — display:inline-flex가 [hidden]을 이기므로 명시한다. */ .v160-esrch__trigger[hidden] { display: none; } .v160-esrch__trigger:hover { border-color: var(--v160-accent); background: var(--v160-accent-soft); color: var(--v160-accent); } .v160-esrch__trigger:focus-visible { outline: 2px solid transparent; border-color: var(--v160-accent); box-shadow: var(--v160-ring); } .v160-esrch__trigger[aria-expanded="true"] { border-color: var(--v160-accent); background: var(--v160-accent-soft); color: var(--v160-accent); } .v160-esrch__trigger i { font-size: 14px; line-height: 1; } /* 압축 헤더에서는 라벨을 접고 아이콘만 남긴다. */ .v160-pub-hdr.is-compact .v160-esrch__trigger-label { display: none; } @media (max-width: 1024px) { .v160-esrch__trigger { block-size: 40px; padding-inline: var(--v160-space-3); } .v160-esrch__trigger-label { display: none; } } /* ================================================================================ * 02 — 오버레이 · 패널 셸 * JS가 이 노드를 직속으로 옮긴다(스티키 헤더의 stacking context 탈출). * 열림 위치는 --v160-esrch-top(헤더 실측 높이)로 제어한다. * ============================================================================== */ .v160-esrch { position: fixed; inset: 0; z-index: var(--v160-z-modal); display: block; } .v160-esrch[hidden] { display: none; } .v160-esrch__scrim { position: absolute; inset: 0; background: var(--v160-surface-overlay); border: 0; padding: 0; inline-size: 100%; cursor: default; } .v160-esrch__panel { position: relative; display: flex; flex-direction: column; inline-size: min(var(--v160-container-tight), calc(100% - var(--v160-space-8))); max-block-size: calc(100vh - var(--v160-esrch-top, 150px) - var(--v160-space-6)); margin-block-start: var(--v160-esrch-top, 150px); margin-inline: auto; background: var(--v160-surface); border: 1px solid var(--v160-border); border-radius: var(--v160-r-xl); box-shadow: var(--v160-elev-5); overflow: hidden; } /* ================================================================================ * 03 — 시트 헤드 * ============================================================================== */ .v160-esrch__head { display: flex; align-items: center; gap: var(--v160-space-3); padding-block: var(--v160-space-4); padding-inline: var(--v160-space-5); border-block-end: 1px solid var(--v160-border-subtle); } .v160-esrch__title { flex: 1 1 auto; min-inline-size: 0; margin: 0; font-size: var(--v160-fs-lg); font-weight: 700; letter-spacing: var(--v160-track-snug); color: var(--v160-text); } .v160-esrch__back, .v160-esrch__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--v160-r-md); background: transparent; color: var(--v160-text-muted); font-size: 15px; cursor: pointer; transition: background var(--v160-dur) var(--v160-ease), color var(--v160-dur) var(--v160-ease); } .v160-esrch__back:hover, .v160-esrch__close:hover { background: var(--v160-surface-3); color: var(--v160-text); } .v160-esrch__back:focus-visible, .v160-esrch__close:focus-visible { outline: 2px solid transparent; border-color: var(--v160-accent); box-shadow: var(--v160-ring); } .v160-esrch__back[hidden] { display: none; } /* 스텝 표시 — 모바일에서만 노출 */ .v160-esrch__steps { display: none; align-items: center; gap: var(--v160-space-1); flex: 0 0 auto; } .v160-esrch__step-dot { inline-size: 6px; block-size: 6px; border-radius: var(--v160-r-pill); background: var(--v160-border-strong); transition: background var(--v160-dur) var(--v160-ease), inline-size var(--v160-dur) var(--v160-ease); } .v160-esrch__step-dot.is-on { inline-size: 18px; background: var(--v160-accent); } /* ================================================================================ * 04 — 선택 칩 줄 * ============================================================================== */ .v160-esrch__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v160-space-2); padding-block: var(--v160-space-3); padding-inline: var(--v160-space-5); border-block-end: 1px solid var(--v160-border-subtle); background: var(--v160-surface-2); min-block-size: 52px; } .v160-esrch__chips-empty { font-size: var(--v160-fs-sm); color: var(--v160-text-subtle); } .v160-esrch__chip { display: inline-flex; align-items: center; gap: var(--v160-space-2); padding-block: var(--v160-space-1); padding-inline-start: var(--v160-space-3); padding-inline-end: var(--v160-space-1); border: 1px solid var(--v160-accent-border); border-radius: var(--v160-r-pill); background: var(--v160-accent-soft); color: var(--v160-accent); font-size: var(--v160-fs-xs); font-weight: 600; line-height: 20px; max-inline-size: 100%; } .v160-esrch__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v160-esrch__chip-x { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; padding: 0; border: 0; border-radius: var(--v160-r-pill); background: transparent; color: inherit; font-size: 11px; cursor: pointer; } .v160-esrch__chip-x:hover { background: var(--v160-surface); } .v160-esrch__chip-x:focus-visible { outline: 2px solid transparent; box-shadow: var(--v160-ring); } /* ================================================================================ * 05 — 컬럼 공통 * ============================================================================== */ .v160-esrch__cols { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 300px) minmax(0, 1fr); flex: 1 1 auto; min-block-size: 0; } .v160-esrch__col { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; border-inline-start: 1px solid var(--v160-border-subtle); } .v160-esrch__col:first-child { border-inline-start: 0; } .v160-esrch__col-head { display: flex; align-items: baseline; gap: var(--v160-space-2); padding-block: var(--v160-space-3); padding-inline: var(--v160-space-4); } .v160-esrch__col-title { margin: 0; font-size: var(--v160-fs-xs); font-weight: 700; letter-spacing: var(--v160-track-snug); text-transform: uppercase; color: var(--v160-text-muted); } .v160-esrch__col-hint { font-size: var(--v160-fs-2xs); color: var(--v160-text-subtle); } .v160-esrch__filter { position: relative; padding-block-end: var(--v160-space-2); padding-inline: var(--v160-space-4); } .v160-esrch__filter i { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--v160-space-4) + 10px); transform: translateY(-60%); font-size: 12px; color: var(--v160-text-placeholder); pointer-events: none; } .v160-esrch__filter-input { inline-size: 100%; block-size: var(--v160-control-h-sm); padding-inline-start: 30px; padding-inline-end: var(--v160-space-3); border: 1px solid var(--v160-border); border-radius: var(--v160-r-sm); background: var(--v160-surface); color: var(--v160-text); font-family: inherit; font-size: var(--v160-fs-sm); } .v160-esrch__filter-input::placeholder { color: var(--v160-text-placeholder); } .v160-esrch__filter-input:focus { outline: 2px solid transparent; border-color: var(--v160-accent); box-shadow: var(--v160-ring); } .v160-esrch__list { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--v160-space-4); padding-inline: var(--v160-space-3); } .v160-esrch__group + .v160-esrch__group { margin-block-start: var(--v160-space-3); } .v160-esrch__group-title { margin: 0; padding-block: var(--v160-space-2); padding-inline: var(--v160-space-2); font-size: var(--v160-fs-2xs); font-weight: 700; letter-spacing: var(--v160-track-snug); color: var(--v160-text-subtle); position: sticky; inset-block-start: 0; background: var(--v160-surface); z-index: var(--v160-z-base); } .v160-esrch__note, .v160-esrch__empty { margin: 0; padding-block: var(--v160-space-5); padding-inline: var(--v160-space-2); font-size: var(--v160-fs-sm); line-height: var(--v160-lh-snug); color: var(--v160-text-subtle); text-align: center; } .v160-esrch__empty[hidden], .v160-esrch__note[hidden] { display: none; } /* ================================================================================ * 06 — 옵션 행 * 제조사 = 라디오(시각적으로는 리스트 행), 모델/연료/색상 = 체크박스. * 선택 상태는 JS가 .is-on을 붙여 표현한다(:has() 금지 규칙 준수). * ============================================================================== */ .v160-esrch__opt { position: relative; display: flex; align-items: center; gap: var(--v160-space-2); min-block-size: 34px; padding-block: var(--v160-space-1); padding-inline: var(--v160-space-2); border-radius: var(--v160-r-sm); color: var(--v160-text-muted); font-size: var(--v160-fs-md); line-height: var(--v160-lh-snug); cursor: pointer; transition: background var(--v160-dur-fast) var(--v160-ease), color var(--v160-dur-fast) var(--v160-ease); } .v160-esrch__opt:hover { background: var(--v160-surface-3); color: var(--v160-text); } .v160-esrch__opt.is-on { background: var(--v160-accent-soft); color: var(--v160-accent); font-weight: 600; } .v160-esrch__opt:focus-within { outline: 2px solid transparent; box-shadow: var(--v160-ring); } .v160-esrch__opt[hidden] { display: none; } .v160-esrch__opt-box { flex: 0 0 auto; inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--v160-accent); cursor: pointer; } /* 제조사 라디오는 시각적으로 감추고 행 전체를 타깃으로 쓴다. */ .v160-esrch__opt--radio .v160-esrch__opt-box { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .v160-esrch__opt-name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v160-esrch__opt-sub { flex: 0 0 auto; font-size: var(--v160-fs-2xs); color: var(--v160-text-placeholder); } .v160-esrch__opt-count { flex: 0 0 auto; font-size: var(--v160-fs-xs); color: var(--v160-text-subtle); font-variant-numeric: tabular-nums; } .v160-esrch__opt-count:empty { display: none; } .v160-esrch__opt-go { flex: 0 0 auto; font-size: 11px; color: var(--v160-text-placeholder); } /* ================================================================================ * 07 — 세부조건 * ============================================================================== */ .v160-esrch__facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v160-space-4) var(--v160-space-5); padding-block: var(--v160-space-2); padding-inline: var(--v160-space-2); } .v160-esrch__fset { min-inline-size: 0; margin: 0; padding: 0; border: 0; } .v160-esrch__legend { display: block; inline-size: 100%; padding: 0; margin-block-end: var(--v160-space-2); font-size: var(--v160-fs-xs); font-weight: 700; color: var(--v160-text); } .v160-esrch__range { display: flex; align-items: center; gap: var(--v160-space-2); } .v160-esrch__range .v160-esrch__range-in { flex: 1 1 0; min-inline-size: 0; } .v160-esrch__range-sep { flex: 0 0 auto; color: var(--v160-text-placeholder); font-size: var(--v160-fs-sm); } .v160-esrch__unit { flex: 0 0 auto; font-size: var(--v160-fs-xs); color: var(--v160-text-subtle); } .v160-esrch__presets { display: flex; flex-wrap: wrap; gap: var(--v160-space-1); margin-block-start: var(--v160-space-2); } .v160-esrch__preset { padding-block: 4px; padding-inline: var(--v160-space-2); border: 1px solid var(--v160-border); border-radius: var(--v160-r-pill); background: var(--v160-surface); color: var(--v160-text-muted); font-family: inherit; font-size: var(--v160-fs-2xs); font-weight: 600; cursor: pointer; transition: border-color var(--v160-dur-fast) var(--v160-ease), color var(--v160-dur-fast) var(--v160-ease), background var(--v160-dur-fast) var(--v160-ease); } .v160-esrch__preset:hover { border-color: var(--v160-accent-border); background: var(--v160-accent-soft); color: var(--v160-accent); } .v160-esrch__preset:focus-visible { outline: 2px solid transparent; box-shadow: var(--v160-ring); } /* 변속기 — 세그먼트 컨트롤 */ .v160-esrch__seg { display: flex; gap: var(--v160-space-1); flex-wrap: wrap; } .v160-esrch__seg-opt { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--v160-control-h-sm); padding-inline: var(--v160-space-3); border: 1px solid var(--v160-border); border-radius: var(--v160-r-sm); background: var(--v160-surface); color: var(--v160-text-muted); font-size: var(--v160-fs-sm); font-weight: 600; text-align: center; cursor: pointer; transition: border-color var(--v160-dur-fast) var(--v160-ease), color var(--v160-dur-fast) var(--v160-ease), background var(--v160-dur-fast) var(--v160-ease); } .v160-esrch__seg-opt:hover { border-color: var(--v160-border-strong); color: var(--v160-text); } .v160-esrch__seg-opt.is-on { border-color: var(--v160-accent); background: var(--v160-accent-soft); color: var(--v160-accent); } .v160-esrch__seg-opt:focus-within { outline: 2px solid transparent; box-shadow: var(--v160-ring); } .v160-esrch__seg-name { display: inline-block; line-height: 1; } .v160-esrch__seg-opt input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* 연료 · 색상 — 다중 선택 필 */ .v160-esrch__pills { display: flex; flex-wrap: wrap; gap: var(--v160-space-2); } .v160-esrch__pill { position: relative; display: inline-flex; align-items: center; gap: var(--v160-space-2); min-block-size: 30px; padding-inline: var(--v160-space-3); border: 1px solid var(--v160-border); border-radius: var(--v160-r-pill); background: var(--v160-surface); color: var(--v160-text-muted); font-size: var(--v160-fs-xs); font-weight: 600; cursor: pointer; transition: border-color var(--v160-dur-fast) var(--v160-ease), color var(--v160-dur-fast) var(--v160-ease), background var(--v160-dur-fast) var(--v160-ease); } .v160-esrch__pill:hover { border-color: var(--v160-border-strong); color: var(--v160-text); } .v160-esrch__pill.is-on { border-color: var(--v160-accent); background: var(--v160-accent-soft); color: var(--v160-accent); } .v160-esrch__pill:focus-within { outline: 2px solid transparent; box-shadow: var(--v160-ring); } .v160-esrch__pill-name { white-space: nowrap; } .v160-esrch__pill input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .v160-esrch__swatch { inline-size: 12px; block-size: 12px; border-radius: var(--v160-r-pill); border: 1px solid var(--v160-border-strong); flex: 0 0 auto; } /* ================================================================================ * 08 — 푸터 * ============================================================================== */ .v160-esrch__foot { display: flex; align-items: center; gap: var(--v160-space-3); padding-block: var(--v160-space-4); padding-inline: var(--v160-space-5); border-block-start: 1px solid var(--v160-border-subtle); background: var(--v160-surface); } .v160-esrch__foot-spacer { flex: 1 1 auto; } .v160-esrch__foot-main { display: flex; align-items: center; gap: var(--v160-space-2); flex: 0 0 auto; } .v160-esrch__submit { min-inline-size: 180px; } .v160-esrch__submit .v160-esrch__count { font-variant-numeric: tabular-nums; } .v160-esrch__next[hidden] { display: none; } /* 제출 직전 JS가 붙이는 모델 이표기(한글/라틴) 전달용 hidden input. 시각 요소 아님. */ .v160-esrch__alias { display: none; } /* ================================================================================ * 09 — 모바일 전체화면 스텝퍼 (≤1024px) * 같은 마크업을 한 번에 한 컬럼씩만 보여주고, 하단 고정 바에 실시간 건수를 둔다. * ============================================================================== */ @media (max-width: 1024px) { .v160-esrch__scrim { display: none; } .v160-esrch__panel { inline-size: 100%; block-size: 100%; max-block-size: 100%; margin-block-start: 0; border: 0; border-radius: 0; box-shadow: none; } .v160-esrch__head { padding-inline: var(--v160-space-4); position: sticky; inset-block-start: 0; background: var(--v160-surface); z-index: var(--v160-z-raised); } .v160-esrch__title { font-size: var(--v160-fs-md); text-align: center; } .v160-esrch__steps { display: flex; } .v160-esrch__chips { padding-inline: var(--v160-space-4); min-block-size: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; } .v160-esrch__chip { flex: 0 0 auto; } .v160-esrch__cols { display: block; flex: 1 1 auto; min-block-size: 0; overflow: hidden; } .v160-esrch__col { display: none; block-size: 100%; border-inline-start: 0; } .v160-esrch[data-step="1"] .v160-esrch__col--make, .v160-esrch[data-step="2"] .v160-esrch__col--model, .v160-esrch[data-step="3"] .v160-esrch__col--detail { display: flex; } .v160-esrch__list { padding-inline: var(--v160-space-4); -webkit-overflow-scrolling: touch; } /* 앱 느낌 — 행을 두껍게, 구분선을 얇게 */ .v160-esrch__opt { min-block-size: var(--v160-tap); border-block-end: 1px solid var(--v160-border-subtle); border-radius: 0; font-size: var(--v160-fs-lg); } .v160-esrch__opt.is-on { background: transparent; } .v160-esrch__group-title { inset-block-start: 0; background: var(--v160-surface-2); padding-inline: var(--v160-space-3); margin-inline: calc(var(--v160-space-3) * -1); font-size: var(--v160-fs-xs); } .v160-esrch__facets { grid-template-columns: minmax(0, 1fr); gap: var(--v160-space-5); padding-block-end: var(--v160-space-6); } .v160-esrch__foot { position: sticky; inset-block-end: 0; padding-block: var(--v160-space-3); padding-inline: var(--v160-space-4); gap: var(--v160-space-2); box-shadow: var(--v160-elev-3); padding-block-end: calc(var(--v160-space-3) + env(safe-area-inset-bottom, 0px)); } .v160-esrch__foot-main { flex: 1 1 auto; } .v160-esrch__submit { flex: 1 1 auto; min-inline-size: 0; block-size: var(--v160-control-h-lg); } .v160-esrch__next { block-size: var(--v160-control-h-lg); } } @media (max-width: 640px) { .v160-esrch__foot .v160-esrch__reset { padding-inline: var(--v160-space-3); } } /* ================================================================================ * 10 — RTL 보정 (논리 속성으로 표현 불가능한 것만) * ============================================================================== */ [dir="rtl"] .v160-esrch__back i, [dir="rtl"] .v160-esrch__opt-go { transform: scaleX(-1); } [dir="rtl"] .v160-esrch__filter i { transform: translateY(-60%) scaleX(-1); } /* ================================================================================ * 11 — 모션 축소 · 인쇄 * ============================================================================== */ @media (prefers-reduced-motion: reduce) { .v160-esrch__trigger, .v160-esrch__opt, .v160-esrch__pill, .v160-esrch__preset, .v160-esrch__seg-opt, .v160-esrch__step-dot, .v160-esrch__back, .v160-esrch__close { transition: none; } } @media print { .v160-esrch, .v160-esrch__trigger { display: none; } }