/* ================================================================ * Hi Car Match — theme.css (v189 Pretendard & Encar System) * ================================================================ */ /* ── 전역 폰트 & 안티앨리어싱 & 기본 레이아웃 ── */ html, body, button, input, select, textarea, optgroup, .encar-app, .gab-app { font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; letter-spacing: -0.02em; } *, *::before, *::after { box-sizing: border-box; } .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: "bootstrap-icons" !important; letter-spacing: 0 !important; } /* ===== -1. 자체 리셋 ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } img, svg, video { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin-top: 0; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; } figure, fieldset { margin: 0; padding: 0; border: 0; } [hidden] { display: none !important; } /* 본문 콘텐츠(글 페이지)만 불릿·문단 여백 복원 */ .gab-article-content ul, .gab-legal-section ul, .gab-detail-description ul { list-style: disc; padding-inline-start: 22px; } .gab-article-content ol, .gab-legal-section ol, .gab-detail-description ol { list-style: decimal; padding-inline-start: 22px; } .gab-article-content p, .gab-legal-section p, .gab-detail-description p { margin-bottom: 1em; } /* ===== 0. 디자인 토큰 (구 변수명 호환 포함) ===== */ :root { /* 브랜드 */ --gab-primary-50: #FDF1F0; --gab-primary-100: #FBDEDA; --gab-primary-200: #F6BDB5; --gab-primary-300: #EE9387; --gab-primary-400: #E36557; --gab-primary-500: #DC4A3E; --gab-primary-600: #D8342C; --gab-primary-700: #B02318; --gab-primary-800: #8C1812; --gab-primary-900: #66100C; --gab-grad-brand: linear-gradient(135deg, #DC4A3E 0%, #B02318 100%); --gab-grad-brand-soft: linear-gradient(135deg, #DC4A3E 0%, #D8342C 100%); --gab-glow-brand: 0 8px 20px rgba(216, 52, 44, 0.16); /* 액센트(구 브론즈) → 레드 톤으로 통일 */ --gab-bronze-300: #F6BDB5; --gab-bronze-400: #EE9387; --gab-bronze-500: #D8342C; --gab-bronze-600: #B02318; --gab-bronze-700: #8C1812; --gab-accent-400: #E36557; --gab-accent-500: #D8342C; --gab-accent-600: #B02318; /* 잉크/네이비 → 뉴트럴 블랙 */ --gab-navy-950: #0B0C0E; --gab-navy-900: #141619; --gab-navy-800: #1C1F24; --gab-navy-700: #262A31; --gab-navy-600: #333943; /* 상태 */ --gab-success: #1F8F4E; --gab-warning: #C77D1E; --gab-danger: #D8342C; --gab-info: #2563EB; /* 뉴트럴 — 흰 배경 기반 */ --gab-gray-50: #F8F9FA; --gab-gray-100: #F1F3F5; --gab-gray-200: #E5E8EB; --gab-gray-300: #D0D5DA; --gab-gray-400: #9AA1A9; --gab-gray-500: #6B7280; --gab-gray-600: #4B5563; --gab-gray-700: #374151; --gab-gray-800: #1F2937; --gab-gray-900: #111318; /* 구 hicm 토큰 호환 */ --hicm-ink: #111318; --hicm-cream: #F8F9FA; --hicm-blue: #EAF1F8; --hicm-blue-soft: #F4F8FC; --hicm-border: 1px solid #E5E8EB; --hicm-border-bold: 1px solid #E5E8EB; --hicm-shadow: 0 8px 24px rgba(17, 19, 24, 0.06); --hicm-shadow-sm: 0 2px 8px rgba(17, 19, 24, 0.05); --hicm-red: #D8342C; --hicm-red-dark: #B02318; --hicm-red-soft: #FDF1F0; --hicm-red-line: #F6BDB5; --hicm-navy: #141619; --hicm-muted: #6B7280; --hicm-line: #E5E8EB; --hicm-paper: #FFFFFF; --hicm-surface: #F8F9FA; /* 폰트 */ --gab-font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --gab-font-display: var(--gab-font-sans); --gab-font-en: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --gab-font-ar: 'Noto Sans Arabic', 'Tajawal', sans-serif; --gab-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; --gab-tracking-tight: -0.025em; --gab-tracking-snug: -0.015em; --gab-tracking-normal: -0.01em; --gab-text-xs: 12px; --gab-text-sm: 13px; --gab-text-base: 14px; --gab-text-md: 15px; --gab-text-lg: 17px; --gab-text-xl: 20px; --gab-text-2xl: 24px; --gab-text-3xl: 30px; --gab-text-4xl: 36px; --gab-text-5xl: 48px; --gab-text-hero: 56px; /* 간격 */ --gab-space-1: 4px; --gab-space-2: 8px; --gab-space-3: 12px; --gab-space-4: 16px; --gab-space-5: 20px; --gab-space-6: 24px; --gab-space-8: 32px; --gab-space-10: 40px; --gab-space-12: 48px; --gab-space-16: 64px; --gab-space-20: 80px; --gab-space-24: 96px; --gab-space-32: 128px; --gab-space-40: 160px; /* 라운드 */ --gab-radius-sm: 6px; --gab-radius: 10px; --gab-radius-md: 12px; --gab-radius-lg: 14px; --gab-radius-xl: 18px; --gab-radius-2xl: 22px; --gab-radius-full: 9999px; /* 섀도 — 소프트 */ --gab-shadow-sm: 0 1px 3px rgba(17, 19, 24, 0.05); --gab-shadow: 0 2px 8px rgba(17, 19, 24, 0.06); --gab-shadow-md: 0 6px 16px rgba(17, 19, 24, 0.07); --gab-shadow-lg: 0 10px 28px rgba(17, 19, 24, 0.08); --gab-shadow-xl: 0 16px 40px rgba(17, 19, 24, 0.10); --gab-shadow-2xl: 0 24px 56px rgba(17, 19, 24, 0.12); /* 컨테이너 */ --gab-container-sm: 640px; --gab-container-md: 768px; --gab-container-lg: 1024px; --gab-container-xl: 1280px; --gab-container-2xl: 1440px; /* 전환/z-index */ --gab-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --gab-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); --gab-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --gab-z-dropdown: 100; --gab-z-sticky: 200; --gab-z-fixed: 300; --gab-z-modal-bg: 400; --gab-z-modal: 500; --gab-z-popover: 600; --gab-z-tooltip: 700; } /* ===== 1. 베이스 ===== */ html { scroll-behavior: smooth; } body { font-family: var(--gab-font-sans); font-size: var(--gab-text-base); line-height: 1.6; letter-spacing: var(--gab-tracking-normal); color: var(--gab-gray-900); background: #FFFFFF; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; } body[dir="rtl"] { font-family: var(--gab-font-ar), var(--gab-font-sans); } img { max-width: 100%; height: auto; } a { color: var(--gab-primary-600); text-decoration: none; } a:hover { color: var(--gab-primary-700); } h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -0.02em; color: var(--gab-gray-900); line-height: 1.25; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--gab-primary-600); outline-offset: 2px; } /* ===== 2. 레이아웃 ===== */ .gab-container { width: 100%; max-width: var(--gab-container-xl); margin-inline: auto; padding-inline: 20px; } .gab-content-narrow { max-width: var(--gab-container-md); margin-inline: auto; } .gab-section { padding-block: 56px; } .gab-section-tight { padding-block: 40px; } .gab-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .gab-section-header h2 { font-size: var(--gab-text-2xl); margin: 0; } .gab-section-header p { margin: 6px 0 0; color: var(--gab-gray-500); font-size: var(--gab-text-md); } .gab-section-title-wrap { min-width: 0; } .gab-section-link { flex-shrink: 0; font-weight: 600; font-size: var(--gab-text-sm); white-space: nowrap; } .gab-main { min-height: 40vh; } .gab-view-fallback { padding: 60px 20px; text-align: center; color: var(--gab-gray-500); } /* 유틸 */ .hicm-visually-hidden-input, .gab-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .gab-skeleton-box, .gab-skeleton-line { background: linear-gradient(90deg, var(--gab-gray-100) 25%, var(--gab-gray-200) 37%, var(--gab-gray-100) 63%); background-size: 400% 100%; animation: gab-shimmer 1.4s ease infinite; border-radius: 8px; } .gab-skeleton-line { height: 12px; margin-block: 6px; } @keyframes gab-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .gab-reveal-stagger > * { animation: gab-fade-up .5s ease both; } .gab-reveal-stagger > *:nth-child(2) { animation-delay: .06s; } .gab-reveal-stagger > *:nth-child(3) { animation-delay: .12s; } .gab-reveal-stagger > *:nth-child(4) { animation-delay: .18s; } @keyframes gab-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .gab-flag-svg { display: inline-block; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; vertical-align: -2px; } /* ===== 3. 버튼 ===== */ .gab-btn, .gab-btn-primary, .gab-btn-accent, .gab-btn-lg, .gab-btn--primary, .gab-btn--secondary, .gab-btn--outline, .gab-btn--ghost, .gab-btn--danger, .gab-btn-outline-white, .gab-contact-btn, .gab-contact-btn-primary, .gab-contact-btn-save, .gab-modal-submit, .gab-filter-apply, .gab-dcc-btn, .gab-quote-submit, .gab-parts-submit, .gab-auth-submit, .gab-fm-cta-btn, .gab-af-save, .gab-af-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; font-size: var(--gab-text-md); font-weight: 700; line-height: 1.3; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: var(--gab-transition-fast); text-decoration: none; white-space: nowrap; } .gab-btn-primary, .gab-btn--primary, .gab-btn-accent, .gab-contact-btn-primary, .gab-modal-submit, .gab-auth-submit, .gab-fm-cta-btn, .gab-dcc-btn--primary, .gab-quote-submit, .gab-parts-submit { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; } .gab-btn-primary:hover, .gab-btn--primary:hover, .gab-btn-accent:hover, .gab-contact-btn-primary:hover, .gab-modal-submit:hover, .gab-auth-submit:hover, .gab-fm-cta-btn:hover, .gab-dcc-btn--primary:hover, .gab-quote-submit:hover, .gab-parts-submit:hover { background: var(--gab-primary-700); border-color: var(--gab-primary-700); color: #fff; } .gab-btn--secondary, .gab-contact-btn-save { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-btn--secondary:hover, .gab-contact-btn-save:hover { background: #000; color: #fff; } .gab-btn--outline, .gab-contact-btn, .gab-dcc-btn--ghost, .gab-filter-apply, .gab-af-save, .gab-af-share { background: #fff; border-color: var(--gab-gray-300); color: var(--gab-gray-800); } .gab-btn--outline:hover, .gab-contact-btn:hover, .gab-dcc-btn--ghost:hover, .gab-filter-apply:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); background: var(--gab-primary-50); } .gab-btn-outline-white { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; } .gab-btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; } .gab-btn--ghost { background: transparent; color: var(--gab-gray-600); } .gab-btn--ghost:hover { background: var(--gab-gray-100); color: var(--gab-gray-900); } .gab-btn--danger { background: #fff; border-color: var(--gab-primary-300); color: var(--gab-primary-700); } .gab-btn--danger:hover { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; } .gab-btn--sm { min-height: 34px; padding: 6px 12px; font-size: var(--gab-text-sm); border-radius: 8px; } .gab-btn--md { min-height: 40px; padding: 8px 16px; } .gab-btn-lg { min-height: 52px; padding: 14px 26px; font-size: var(--gab-text-lg); border-radius: 12px; } .gab-btn--full { width: 100%; } .gab-btn-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--gab-gray-200); background: #fff; color: var(--gab-gray-700); font-size: 18px; transition: var(--gab-transition-fast); } .gab-btn-icon:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .gab-btn-icon-badge, .gab-tabbar-badge, .gab-tabbar-saved-badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gab-primary-600); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } /* ===== 4. 배지·칩·태그 ===== */ .gab-badge, .gab-car-badge, .gab-abadge, .gab-notice-badge, .gab-tier-badge, .gab-my-badge, .gab-my-type-badge, .gab-status, .gab-buyreq-status, .gab-track-badge, .gab-upload-badge, .gab-preview-badge, .gab-review-badge, .gab-insp-form-badge, .gab-qbar-badge, .gab-auto-tag, .gab-reglang-badge, .gab-my-badge-inline, .gab-my-list-status, .gab-tag, .gab-career-tag, .gab-mag-card-cat, .gab-mag-cat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--gab-text-xs); font-weight: 700; line-height: 1.5; background: var(--gab-gray-100); color: var(--gab-gray-600); border: 1px solid var(--gab-gray-200); } .gab-badge--success, .gab-abadge--green, .gab-status--ok, .gab-buyreq-status--open, .gab-my-list-status--done, .hicm-verification-status--approved, .gab-notice-badge--open { background: #EAF7EF; color: var(--gab-success); border-color: #BFE6CE; } .gab-badge--warning, .gab-abadge--amber, .gab-status--review, .gab-my-list-status--wait, .hicm-verification-status--pending, .gab-tag--hot { background: #FBF3E4; color: var(--gab-warning); border-color: #F0DFB8; } .gab-badge--danger, .gab-abadge--red, .gab-my-list-status--reject, .hicm-verification-status--rejected, .gab-notice-badge--closed { background: var(--gab-primary-50); color: var(--gab-primary-700); border-color: var(--gab-primary-200); } .gab-abadge--blue, .gab-my-list-status--progress { background: #EBF2FE; color: var(--gab-info); border-color: #C8DBFB; } .gab-abadge--gray, .gab-abadge--active { background: var(--gab-gray-100); color: var(--gab-gray-600); } .gab-car-badge { background: rgba(17,19,24,.72); color: #fff; border: 0; backdrop-filter: blur(4px); } /* 필터 칩 */ .gab-fchip, .gab-filter-chip, .gab-chip, .gab-qchip, .gab-reject-chip, .gab-msearch-rchip, .gab-quote-chip, .gab-msearch-pop-kw, .gab-fcolor, .gab-lang-tab, .gab-legal-tab, .gab-rv-tab, .gab-inv-tab, .gab-order-tab, .gab-sort-tab, .gab-docup-chip, .gab-cc-chip, .gab-password-tab, .gab-fm-fuel { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gab-gray-300); background: #fff; color: var(--gab-gray-700); font-size: var(--gab-text-sm); font-weight: 600; cursor: pointer; transition: var(--gab-transition-fast); } .gab-fchip:hover, .gab-filter-chip:hover, .gab-qchip:hover, .gab-quote-chip:hover, .gab-msearch-pop-kw:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .gab-fchip.is-on, .gab-filter-chip.is-on, .gab-qchip.is-on, .gab-quote-chip.is-on, .gab-lang-tab.is-on, .gab-legal-tab.is-active, .gab-rv-tab.is-active, .gab-inv-tab.is-active, .gab-order-tab.is-active, .gab-sort-tab.is-on, .gab-msearch-rchip, .gab-reject-chip:hover { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-fchip.is-on:hover, .gab-qchip.is-on:hover { color: #fff; } .gab-chip-removing { opacity: .4; pointer-events: none; } .gab-fcolor { width: 30px; height: 30px; padding: 0; border-radius: 50%; } .gab-fcolor.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gab-primary-600); } /* ===== 5. 폼 ===== */ input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], select, textarea, .gab-auth-input, .gab-modal-input, .gab-header-search-input, .gab-contact-textarea, .gab-price-input, .gab-msearch-input, .gab-select, .gab-pwd { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--gab-gray-300); border-radius: 10px; font-size: var(--gab-text-md); font-family: inherit; color: var(--gab-gray-900); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } textarea, .gab-contact-textarea { min-height: 120px; resize: vertical; } input:focus, select:focus, textarea:focus, .gab-auth-input:focus, .gab-modal-input:focus, .gab-msearch-input:focus { border-color: var(--gab-primary-600); box-shadow: 0 0 0 3px rgba(216, 52, 44, 0.10); outline: none; } input::placeholder, textarea::placeholder { color: var(--gab-gray-400); } select, .gab-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 5.2l6.4 6.4 6.4-6.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 34px; } [dir="rtl"] select, [dir="rtl"] .gab-select { background-position: left 12px center; } label, .gab-auth-label, .gab-modal-label, .gab-my-field-label, .gab-form-section-title { font-weight: 600; font-size: var(--gab-text-sm); color: var(--gab-gray-700); } .gab-field { margin-bottom: 16px; } .gab-field--full { grid-column: 1 / -1; } .gab-form-grid, .gab-contact-form-grid, .gab-reg-form-grid, .gab-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gab-form-message, .gab-vmsg { margin-top: 10px; font-size: var(--gab-text-sm); font-weight: 600; } .gab-vmsg--err, .gab-form-message.is-err { color: var(--gab-danger); } .gab-vmsg--ok, .gab-form-message.is-ok { color: var(--gab-success); } .hicm-field-help { font-size: var(--gab-text-xs); color: var(--gab-gray-400); margin-top: 4px; } .hicm-required, .gab-docup-req { color: var(--gab-primary-600); } .gab-auth-error, .gab-reg-alert { padding: 12px 14px; border-radius: 10px; font-size: var(--gab-text-sm); font-weight: 600; background: var(--gab-primary-50); border: 1px solid var(--gab-primary-200); color: var(--gab-primary-700); } .gab-auth-error--warn { background: #FBF3E4; border-color: #F0DFB8; color: var(--gab-warning); } .gab-auth-success, .gab-result-icon--success { background: #EAF7EF; border-color: #BFE6CE; color: var(--gab-success); } .gab-select-wrap { position: relative; } .gab-switch { position: relative; display: inline-block; width: 44px; height: 24px; } .gab-switch input { position: absolute; opacity: 0; } .gab-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--gab-gray-300); transition: .2s; } .gab-switch-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: var(--gab-shadow-sm); } .gab-switch input:checked + .gab-switch-track { background: var(--gab-primary-600); } .gab-switch input:checked + .gab-switch-track::after { transform: translateX(20px); } [dir="rtl"] .gab-switch input:checked + .gab-switch-track::after { transform: translateX(-20px); } /* 범위 슬라이더 */ .gab-rslider { padding: 6px 2px 2px; } .gab-rslider-rail { position: relative; height: 4px; border-radius: 999px; background: var(--gab-gray-200); } .gab-rslider-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--gab-primary-600); } .gab-rslider-h { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; margin-inline-start: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--gab-primary-600); cursor: grab; box-shadow: var(--gab-shadow-sm); } .gab-rslider-vals { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--gab-text-xs); color: var(--gab-gray-500); font-weight: 600; } .gab-filter-range { display: flex; align-items: center; gap: 8px; } .gab-filter-range input { min-height: 40px; } /* ===== 6. 헤더 ===== */ .gab-site-header { position: sticky; top: 0; z-index: var(--gab-z-sticky); background: #fff; border-bottom: 1px solid var(--gab-gray-200); } .gab-top-bar { background: var(--gab-gray-900); color: rgba(255,255,255,.85); font-size: var(--gab-text-xs); } .gab-top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; } .gab-top-bar-left, .gab-top-bar-right { display: flex; align-items: center; gap: 10px; } .gab-top-bar a { color: rgba(255,255,255,.85); font-weight: 600; } .gab-top-bar a:hover { color: #fff; } .gab-top-bar-divider { width: 1px; height: 12px; background: rgba(255,255,255,.25); } /* 언어 스위처 */ /* 메인 헤더 */ .gab-main-header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; } .gab-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--gab-gray-200); border-radius: 10px; background: #fff; color: var(--gab-gray-800); font-size: 20px; cursor: pointer; } .gab-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .gab-logo-icon { width: 48px; height: 48px; border-radius: 0; display: flex; align-items: center; justify-content: center; color: #111; font-size: 20px; background: transparent; overflow: visible; } .gab-logo-icon img, .gab-logo-icon svg, .gab-logo-svg { max-width: 100%; max-height: 100%; object-fit: contain; } .gab-logo-text { display: flex; flex-direction: column; line-height: 1.1; } .gab-logo-name { font-size: 18px; font-weight: 800; color: var(--gab-gray-900); letter-spacing: -0.5px; } .gab-logo-name .accent { color: inherit; } .gab-logo-tagline { font-size: 10px; color: var(--gab-gray-400); font-weight: 600; } .gab-header-search { flex: 1; position: relative; max-width: 560px; } .gab-header-search-form { display: flex; align-items: center; border: 1px solid var(--gab-gray-300); border-radius: 12px; background: var(--gab-gray-50); overflow: hidden; } .gab-header-search-input { border: 0; background: transparent; min-height: 42px; } .gab-header-search-input:focus { box-shadow: none; } .gab-header-search-btn { width: 46px; height: 42px; border: 0; background: var(--gab-gray-900); color: #fff; font-size: 16px; cursor: pointer; } .gab-header-cta { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; } /* 검색 제안 */ .gab-suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 12px; box-shadow: var(--gab-shadow-lg); z-index: var(--gab-z-dropdown); display: none; max-height: 380px; overflow: auto; } .gab-suggest.is-open { display: block; } .gab-suggest-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--gab-gray-800); } .gab-suggest-item:hover { background: var(--gab-gray-50); color: var(--gab-gray-900); } .gab-suggest-thumb { width: 44px; height: 32px; border-radius: 6px; object-fit: cover; background: var(--gab-gray-100); } .gab-suggest-thumb--ph { display: flex; align-items: center; justify-content: center; color: var(--gab-gray-400); } .gab-suggest-title { flex: 1; font-size: var(--gab-text-sm); font-weight: 600; } .gab-suggest-kind, .gab-suggest-price { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-suggest-all { display: block; padding: 10px 14px; text-align: center; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-primary-600); border-top: 1px solid var(--gab-gray-100); } /* 카테고리 네비 */ .gab-nav-bar { position: relative; border-top: 1px solid var(--gab-gray-100); background: #fff; } .gab-nav-bar > .gab-container { display: flex; align-items: center; gap: 8px; } .gab-nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .gab-nav-item { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-800); border-radius: 8px; } .gab-nav-item:hover, .gab-nav-item.is-active { color: var(--gab-primary-600); } .gab-nav-item small { font-weight: 600; color: var(--gab-gray-400); } .gab-nav-has-mega { position: static; } .gab-findmega { position: absolute; top: 100%; inset-inline: 0; background: #fff; border-block: 1px solid var(--gab-gray-200); box-shadow: var(--gab-shadow-lg); display: none; z-index: var(--gab-z-dropdown); } .gab-nav-has-mega:hover .gab-findmega { display: block; } .gab-fm-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 28px; padding-block: 28px; } .gab-fm-title { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-gray-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } .gab-fm-makes { display: flex; flex-direction: column; gap: 4px; } .gab-fm-make { padding: 8px 12px; border-radius: 8px; font-weight: 700; color: var(--gab-gray-800); } .gab-fm-make:hover { background: var(--gab-primary-50); color: var(--gab-primary-600); } .gab-fm-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gab-fm-type { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--gab-gray-200); border-radius: 10px; font-size: var(--gab-text-sm); font-weight: 600; color: var(--gab-gray-700); } .gab-fm-type:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .gab-fm-fuels { display: flex; flex-wrap: wrap; gap: 8px; } .gab-fm-cta-card { padding: 20px; border-radius: 14px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); text-align: center; } .gab-fm-cta-card > i { font-size: 28px; color: var(--gab-primary-600); } .gab-fm-cta-t { font-weight: 800; margin-top: 8px; } .gab-fm-cta-d { font-size: var(--gab-text-sm); color: var(--gab-gray-500); margin: 6px 0 14px; } .gab-mega-trigger { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 12px 10px; border: 0; background: transparent; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); cursor: pointer; } .gab-mega-caret { transition: transform .2s; } .gab-mega-trigger.is-on .gab-mega-caret { transform: rotate(180deg); } .gab-mega { display: none; position: absolute; top: 100%; inset-inline: 0; background: #fff; border-block: 1px solid var(--gab-gray-200); box-shadow: var(--gab-shadow-lg); z-index: var(--gab-z-dropdown); } .gab-mega.is-open { display: block; } .gab-mega-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding-block: 24px; } .gab-mega-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 12px; text-align: center; } .gab-mega-item:hover { background: var(--gab-gray-50); } .gab-mega-ic { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--gab-gray-100); color: var(--gab-gray-700); font-size: 18px; } .gab-mega-name { font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-700); } /* 모바일 드로어 */ .gab-drawer-overlay, .gab-drawer-ov, .gab-drawer-backdrop, .gab-modal-backdrop, .gab-dash-nav-backdrop { position: fixed; inset: 0; background: rgba(17, 19, 24, 0.5); z-index: var(--gab-z-modal-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease; } .gab-drawer-overlay.is-open, .gab-drawer-ov.is-open, .gab-drawer-backdrop.is-open, .gab-modal-backdrop.is-open, .gab-dash-nav-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .gab-drawer, .gab-drawer-panel { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(340px, 88vw); background: #fff; z-index: var(--gab-z-modal); display: flex; flex-direction: column; transform: translateX(-105%); transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--gab-shadow-2xl); } [dir="rtl"] .gab-drawer, [dir="rtl"] .gab-drawer-panel { transform: translateX(105%); } .gab-drawer.is-open, .gab-drawer-panel.is-open { transform: translateX(0); } .gab-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gab-gray-100); } .gab-drawer-head button { width: 38px; height: 38px; border: 0; background: var(--gab-gray-100); border-radius: 10px; font-size: 16px; color: var(--gab-gray-700); cursor: pointer; } .gab-drawer-logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--gab-gray-900); } .gab-drawer-logo .accent { color: var(--gab-primary-600); } .gab-drawer-logo-mark { width: 30px; height: 30px; border-radius: 8px; } .gab-drawer-search { display: flex; align-items: center; gap: 8px; margin: 14px 16px; padding: 0 12px; border: 1px solid var(--gab-gray-300); border-radius: 10px; color: var(--gab-gray-400); } .gab-drawer-search input { border: 0; min-height: 42px; } .gab-drawer-search input:focus { box-shadow: none; } .gab-drawer-nav { flex: 1; overflow: auto; padding: 0 10px; display: flex; flex-direction: column; } .gab-drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 10px; font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-800); } .gab-drawer-nav a:hover { background: var(--gab-gray-50); color: var(--gab-primary-600); } .gab-drawer-nav a i { width: 22px; text-align: center; color: var(--gab-gray-400); } .gab-drawer-nav a small { font-weight: 600; color: var(--gab-gray-400); } .gab-drawer-user { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--gab-gray-100); } .gab-drawer-avatar, .gab-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gab-gray-100); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gab-gray-500); overflow: hidden; } .gab-avatar--sm { width: 32px; height: 32px; font-size: 12px; } .gab-drawer-name { font-weight: 800; } .gab-drawer-meta { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-drawer-lang { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--gab-gray-100); } .gab-drawer-lang-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-600); } .gab-drawer-lang-btn.is-active { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-drawer-foot { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--gab-gray-100); } .gab-drawer-login, .gab-drawer-join { flex: 1; text-align: center; padding: 11px; border-radius: 10px; font-weight: 700; } .gab-drawer-login { border: 1px solid var(--gab-gray-300); color: var(--gab-gray-800); } .gab-drawer-join { background: var(--gab-primary-600); color: #fff; } .gab-drawer-join:hover { background: var(--gab-primary-700); color: #fff; } .gab-drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; } .gab-drawer-actions { padding: 0 10px 10px; } /* 모바일 탭바 */ .gab-tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: var(--gab-z-fixed); display: none; background: #fff; border-top: 1px solid var(--gab-gray-200); padding-bottom: env(safe-area-inset-bottom); } .gab-tabbar-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; color: var(--gab-gray-400); } .gab-tabbar-ic { position: relative; font-size: 20px; height: 22px; } .gab-tabbar-ic-on { display: none; } .gab-tabbar-item.is-active { color: var(--gab-primary-600); } .gab-tabbar-item.is-active .gab-tabbar-ic-on { display: inline; } .gab-tabbar-item.is-active .gab-tabbar-ic-off { display: none; } .gab-tabbar-label { font-size: 11px; font-weight: 700; } .gab-tabbar-item--cta { color: var(--gab-gray-500); } .gab-tabbar-cta-btn { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--gab-primary-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--gab-glow-brand); border: 3px solid #fff; } /* ===== 7. 푸터 ===== */ .gab-footer { background: var(--gab-gray-900); color: rgba(255,255,255,.75); } .gab-footer a { color: rgba(255,255,255,.75); } .gab-footer a:hover { color: #fff; } .gab-footer .gab-logo-name { color: #fff; } .gab-footer .gab-logo-name .accent { color: var(--gab-primary-400); } .gab-footer .gab-logo { display: inline-flex; } .gab-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; gap: 32px; padding-block: 48px; } .gab-footer-brand-desc { font-size: var(--gab-text-sm); margin-top: 12px; color: rgba(255,255,255,.6); } .gab-footer-col-title { font-size: var(--gab-text-sm); font-weight: 800; color: #fff; margin-bottom: 14px; } .gab-footer-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: var(--gab-text-sm); } .gab-footer-social { display: flex; gap: 8px; margin-top: 16px; } .gab-footer-social-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; } .gab-footer-social-btn:hover { background: var(--gab-primary-600); } .gab-footer-news { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 26px; border-top: 1px solid rgba(255,255,255,.1); } .gab-footer-news-title { font-size: var(--gab-text-md); font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; } .gab-footer-news-title i { color: var(--gab-primary-400); } .gab-footer-news-desc { font-size: var(--gab-text-sm); color: rgba(255,255,255,.55); margin-top: 4px; } .gab-footer-news-form { display: flex; gap: 8px; flex-shrink: 0; } .gab-footer-news-form input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; } .gab-footer-global { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid rgba(255,255,255,.1); } .gab-footer-flags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; } .gab-footer-flags-label { font-size: var(--gab-text-xs); font-weight: 800; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .gab-footer-flags-label i { color: var(--gab-primary-400); } .gab-footer-flags-row { display: flex; flex-wrap: wrap; gap: 6px; } .gab-footer-flags-row a, .gab-footer .gab-cc-chip { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); font-size: var(--gab-text-xs); font-weight: 700; color: rgba(255,255,255,.75); } .gab-footer-payment { display: flex; flex-wrap: wrap; gap: 8px; } .gab-footer-payment-item { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); } .gab-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--gab-text-xs); color: rgba(255,255,255,.5); } .gab-footer-legal { display: flex; gap: 16px; } .gab-sitemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 28px; } .gab-sitemap-col-title { font-size: var(--gab-text-xs); font-weight: 800; color: rgba(255,255,255,.5); text-transform: uppercase; margin-bottom: 10px; } .gab-sitemap-links { display: flex; flex-direction: column; gap: 6px; font-size: var(--gab-text-xs); } /* ===== 8. 홈 히어로 ===== */ .gab-hx { position: relative; background: var(--gab-gray-50); border-bottom: 1px solid var(--gab-gray-200); overflow: hidden; } .gab-hx-bg { display: none; } .gab-hx-inner { padding-block: 44px 48px; } .gab-hx-badge { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--gab-primary-50); border: 1px solid var(--gab-primary-200); color: var(--gab-primary-700); font-size: var(--gab-text-xs); font-weight: 800; } .gab-hx-title { font-size: clamp(26px, 4vw, 40px); margin: 14px 0 10px; } .gab-hx-accent { color: var(--gab-primary-600); } .gab-hx-sub { max-width: 720px; color: var(--gab-gray-500); font-size: var(--gab-text-md); margin: 0; } /* 인텐트 레일 */ .hicm-intent-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; } .hicm-intent { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--gab-gray-200); transition: var(--gab-transition-fast); } .hicm-intent:hover { border-color: var(--gab-primary-600); box-shadow: var(--gab-shadow); transform: translateY(-2px); } .hicm-intent-media { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--gab-gray-100); color: var(--gab-gray-700); } .hicm-intent--browse .hicm-intent-media { background: var(--gab-primary-50); color: var(--gab-primary-600); } .hicm-intent--dealers .hicm-intent-media { background: #EBF2FE; color: var(--gab-info); } .hicm-intent--sell .hicm-intent-media { background: #EAF7EF; color: var(--gab-success); } .hicm-intent-copy { flex: 1; display: flex; flex-direction: column; min-width: 0; } .hicm-intent-copy small { font-size: 11px; color: var(--gab-gray-400); font-weight: 600; } .hicm-intent-copy strong { font-size: var(--gab-text-md); color: var(--gab-gray-900); } .hicm-intent > i { color: var(--gab-gray-300); } /* 히어로 검색 */ .gab-hx-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-top: 30px; align-items: start; } .gab-hx-find { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 22px; box-shadow: var(--gab-shadow); } .gab-hx-find-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .gab-hx-find-head strong { font-size: var(--gab-text-lg); display: block; } .gab-hx-find-head span { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-hx-find-head a { font-size: var(--gab-text-sm); font-weight: 700; white-space: nowrap; } .gab-hx-search-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gab-hx-search-primary label { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .gab-hx-search-primary label > span { font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-500); } .gab-hx-search-primary button[type="submit"] { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; border-radius: 12px; background: var(--gab-primary-600); color: #fff; font-size: var(--gab-text-lg); font-weight: 800; cursor: pointer; } .gab-hx-search-primary button[type="submit"]:hover { background: var(--gab-primary-700); } /* 히어로 브랜드 */ .gab-hx-makes { margin-top: 20px; } .gab-hx-makes-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .gab-hx-mtab { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--gab-gray-300); background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); cursor: pointer; } .gab-hx-mtab.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-hx-makes-grid { display: none; grid-template-columns: repeat(6, 1fr); gap: 8px; } .gab-hx-makes-grid.is-on { display: grid; } .gab-hx-make { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; transition: var(--gab-transition-fast); } .gab-hx-make:hover { border-color: var(--gab-primary-600); box-shadow: var(--gab-shadow-sm); } .gab-hx-make-logo { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .gab-hx-make-name { font-size: 11px; font-weight: 700; color: var(--gab-gray-700); } /* 브랜드 마크 (실 로고 이미지 / 모노그램 폴백) */ .hicm-brand-mark { display: inline-flex; align-items: center; justify-content: center; } .hicm-brand-mark--image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .hicm-brand-mark--mono { width: 36px; height: 36px; border-radius: 50%; background: var(--gab-gray-100); border: 1px solid var(--gab-gray-200); color: var(--gab-gray-500); font-size: 14px; font-weight: 800; } /* 차종 바로가기 */ .gab-hx-body-links { display: flex; gap: 10px; margin-top: 18px; overflow-x: auto; padding-bottom: 4px; } .gab-hx-body-links a { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; } .gab-hx-body-links img { width: 84px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--gab-gray-200); } .gab-hx-body-links span { font-size: 11px; font-weight: 700; color: var(--gab-gray-600); } /* 히어로 모델 카드 */ .gab-hx-assets { position: relative; } .gab-hx-asset-ring { display: none; } .hicm-hx-model-card { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 16px; overflow: hidden; box-shadow: var(--gab-shadow); } .hicm-hx-model-media { position: relative; } .hicm-hx-model-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .hicm-hx-model-media span { position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(17,19,24,.7); color: #fff; font-size: 11px; font-weight: 700; } .hicm-hx-model-copy { padding: 14px 16px; display: flex; flex-direction: column; } .hicm-hx-model-copy b { font-size: var(--gab-text-md); } .hicm-hx-model-copy small { color: var(--gab-gray-400); font-size: var(--gab-text-xs); } .gab-hx-asset-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .gab-hx-asset-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-600); } .gab-hx-asset-chips i { color: var(--gab-primary-600); } /* ===== 9. 브랜드→모델 픽커 ===== */ .gab-aw-makes-section { background: #fff; } .gab-aw-makes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .gab-aw-makes-title { font-size: var(--gab-text-2xl); margin: 0; } .gab-aw-makes-all { font-size: var(--gab-text-sm); font-weight: 700; white-space: nowrap; } .gab-mkpick { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; } .gab-mkpick-brands { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow: auto; padding-inline-end: 4px; } .gab-mkpick-brand { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; text-align: start; } .gab-mkpick-brand:hover { background: var(--gab-gray-50); } .gab-mkpick-brand.is-on { background: var(--gab-primary-50); border-color: var(--gab-primary-200); } .gab-mkpick-blogo { width: 32px; height: 32px; } .gab-mkpick-blogo.hicm-brand-mark--mono { width: 32px; height: 32px; font-size: 13px; } .gab-mkpick-bname { flex: 1; font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-800); } .gab-mkpick-brand.is-on .gab-mkpick-bname { color: var(--gab-primary-700); } .gab-mkpick-bcar { color: var(--gab-gray-300); } .gab-mkpick-brand.is-on .gab-mkpick-bcar { color: var(--gab-primary-600); } .gab-mkpick-panel { display: none; } .gab-mkpick-panel.is-on { display: block; } .gab-mkpick-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .gab-mkpick-panel-head strong { font-size: var(--gab-text-lg); } .gab-mkpick-allbtn { font-size: var(--gab-text-sm); font-weight: 700; } .gab-mkpick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .gab-mkpick-model { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; transition: var(--gab-transition-fast); } .gab-mkpick-model:hover { border-color: var(--gab-primary-600); box-shadow: var(--gab-shadow-sm); } .gab-mkpick-mico { width: 100%; height: 64px; object-fit: contain; margin-bottom: 8px; } .gab-mkpick-model b { font-size: var(--gab-text-sm); color: var(--gab-gray-900); } .gab-mkpick-model span { font-size: 11px; color: var(--gab-gray-400); } /* ===== 10. 탐색 요약 스트립 ===== */ .gab-aw-stats { background: var(--gab-gray-50); border-block: 1px solid var(--gab-gray-200); } .gab-aw-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-block: 20px; } .gab-aw-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 12px; transition: var(--gab-transition-fast); } .gab-aw-stat:hover { border-color: var(--gab-primary-600); } .gab-aw-stat i { font-size: 20px; color: var(--gab-primary-600); } .gab-aw-stat b { font-size: var(--gab-text-md); color: var(--gab-gray-900); } .gab-aw-stat span { display: block; font-size: 11px; color: var(--gab-gray-400); } /* ===== 11. 차량 카드 ===== */ .gab-cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gab-cars-grid-3 { grid-template-columns: repeat(3, 1fr); } .gab-car-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; overflow: hidden; transition: var(--gab-transition-fast); } .gab-car-card:hover { border-color: var(--gab-gray-300); box-shadow: var(--gab-shadow-md); transform: translateY(-2px); } .gab-car-card-image { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--gab-gray-100); } .gab-car-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .gab-car-card-image-placeholder, .gab-gallery-main-ph, .gab-gallery-ph, .gab-lb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--gab-gray-100); color: var(--gab-gray-300); font-size: 40px; } .gab-car-card-badges { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; } .gab-car-card-fav { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--gab-gray-500); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--gab-shadow-sm); } .gab-car-card-fav:hover, .gab-car-card-fav.is-fav { color: var(--gab-primary-600); } .gab-car-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; } .gab-car-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .gab-car-card-brand { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-gray-400); text-transform: uppercase; letter-spacing: .04em; } .gab-car-card-number { font-size: 11px; color: var(--gab-gray-300); } .gab-car-card-title { font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-900); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gab-car-card-title a { color: inherit; } .gab-car-card-title a:hover { color: var(--gab-primary-600); } .gab-car-card-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--gab-text-xs); color: var(--gab-gray-500); } .gab-car-card-spec-divider { color: var(--gab-gray-200); } .gab-car-card-meta-row { display: flex; align-items: center; gap: 6px; font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-car-card-location { display: inline-flex; align-items: center; gap: 4px; } .gab-car-card-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--gab-gray-100); } .gab-car-card-price-label { display: block; font-size: 11px; color: var(--gab-gray-400); } .gab-car-card-price-main { display: flex; flex-direction: column; } .gab-car-card-price-value { font-size: 19px; font-weight: 800; color: var(--gab-primary-600); letter-spacing: -0.02em; } .gab-car-card-price-original { font-size: var(--gab-text-xs); color: var(--gab-gray-400); text-decoration: line-through; } .gab-price-converted { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-car-card-inquiry { font-size: var(--gab-text-xs); font-weight: 700; white-space: nowrap; } .gab-car-card-skeleton { aspect-ratio: 4/3; } /* ===== 12. 추천/최신 섹션 ===== */ .gab-reco-section { background: var(--gab-gray-50); } .gab-reco-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; } .gab-reco-title { font-size: var(--gab-text-2xl); margin: 0; } .gab-reco-sub { color: var(--gab-gray-500); } .gab-reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* ===== 13. 안심 기준 ===== */ .gab-proof { background: #fff; } .gab-proof-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 24px; } .gab-proof-kicker { display: inline-block; font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-primary-600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .gab-proof-head h2 { font-size: var(--gab-text-2xl); margin: 0; } .gab-proof-link { font-size: var(--gab-text-sm); font-weight: 700; white-space: nowrap; } .gab-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gab-proof-card { border: 1px solid var(--gab-gray-200); border-radius: 16px; overflow: hidden; background: #fff; transition: var(--gab-transition-fast); } .gab-proof-card:hover { box-shadow: var(--gab-shadow-md); transform: translateY(-2px); } .gab-proof-media { position: relative; aspect-ratio: 16 / 9; background: var(--gab-gray-100); } .gab-proof-media img { width: 100%; height: 100%; object-fit: cover; } .gab-proof-num { position: absolute; top: 12px; inset-inline-start: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 12px; font-weight: 800; color: var(--gab-gray-700); } .gab-proof-body { display: flex; gap: 12px; padding: 16px; } .gab-proof-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 20px; } .gab-proof-body h3 { font-size: var(--gab-text-md); margin: 0 0 4px; } .gab-proof-body p { margin: 0; font-size: var(--gab-text-sm); color: var(--gab-gray-500); } /* ===== 14. 이용 방법 ===== */ .gab-how-section { background: var(--gab-gray-900); color: #fff; } .gab-how-title { color: #fff; font-size: var(--gab-text-2xl); margin: 0 0 6px; } .gab-how-sub { color: rgba(255,255,255,.6); margin: 0 0 28px; } .gab-how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .gab-how-step { padding: 20px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); } .gab-how-step-num { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--gab-primary-600); color: #fff; font-size: 14px; font-weight: 800; align-items: center; justify-content: center; } .gab-how-step-icon { font-size: 22px; margin: 12px 0 8px; color: var(--gab-primary-400); } .gab-how-step-title { font-weight: 800; color: #fff; } .gab-how-step-desc { font-size: var(--gab-text-sm); color: rgba(255,255,255,.6); margin-top: 6px; } .gab-how-flow { display: flex; align-items: center; gap: 10px; } .gab-how-node { flex: 1; text-align: center; } .gab-how-node-circle { width: 52px; height: 52px; margin-inline: auto; border-radius: 50%; background: var(--gab-primary-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .gab-how-node-step { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 8px; } .gab-how-node-desc { font-size: var(--gab-text-sm); font-weight: 700; color: #fff; } /* ===== 15. CTA ===== */ .gab-cta { background: var(--gab-gray-900); color: #fff; } .gab-cta-inner { text-align: center; padding-block: 56px; max-width: 640px; margin-inline: auto; } .gab-cta-title { color: #fff; font-size: var(--gab-text-3xl); margin: 0 0 10px; } .gab-cta-desc { color: rgba(255,255,255,.65); margin: 0 0 26px; } .gab-cta-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .gab-cta-box { padding: 28px; border-radius: 16px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); text-align: center; } .gab-cta-box-title { font-size: var(--gab-text-xl); margin: 0 0 8px; } .gab-cta-box-desc { color: var(--gab-gray-500); margin: 0 0 16px; } /* ===== 16. 차량 목록 레이아웃 ===== */ .gab-list-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; } .gab-listing { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .gab-listing-main, .gab-list-results { min-width: 0; } .gab-list-controls, .gab-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .gab-list-count { font-size: var(--gab-text-sm); color: var(--gab-gray-500); font-weight: 600; } .gab-list-count b { color: var(--gab-gray-900); } .gab-results-heading { font-size: var(--gab-text-2xl); margin: 0 0 4px; } .gab-results-eyebrow { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-primary-600); text-transform: uppercase; letter-spacing: .05em; } .gab-results-description, .gab-results-intro { color: var(--gab-gray-500); font-size: var(--gab-text-sm); } .gab-results-assurance { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .gab-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--gab-text-sm); color: var(--gab-gray-400); margin-bottom: 14px; } .gab-breadcrumb a { color: var(--gab-gray-500); font-weight: 600; } .gab-breadcrumb-sep { color: var(--gab-gray-300); } .gab-breadcrumb-current { color: var(--gab-gray-900); font-weight: 700; } /* 필터 사이드바 / 바텀시트 */ .gab-filter-mtoggle { display: none; width: 100%; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--gab-gray-300); border-radius: 12px; background: #fff; font-weight: 700; cursor: pointer; margin-bottom: 14px; } .gab-filter-mtoggle i:first-child { color: var(--gab-primary-600); } .gab-filter-sidebar { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow: auto; } .gab-filter-sheet-close { display: none; } .gab-filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .gab-filter-header-title { font-size: var(--gab-text-lg); font-weight: 800; } .gab-filter-reset { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-400); } .gab-filter-reset:hover { color: var(--gab-primary-600); } .gab-filter-group { border-top: 1px solid var(--gab-gray-100); padding-block: 12px; } .gab-filter-group-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--gab-text-md); font-weight: 700; cursor: pointer; padding-block: 4px; } .gab-filter-group-title i { color: var(--gab-gray-400); transition: transform .2s; } .gab-filter-group.is-collapsed .gab-filter-group-title i { transform: rotate(180deg); } .gab-filter-group.is-collapsed .gab-filter-gbody { display: none; } .gab-filter-gbody { padding-top: 10px; } .gab-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; } .gab-filter-options { display: flex; flex-direction: column; gap: 4px; } .gab-filter-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: var(--gab-text-sm); font-weight: 600; color: var(--gab-gray-700); cursor: pointer; } .gab-filter-option:hover { background: var(--gab-gray-50); } .gab-filter-checkbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--gab-gray-300); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; flex-shrink: 0; } .gab-filter-option.is-checked .gab-filter-checkbox { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; } .gab-filter-option.is-checked { color: var(--gab-gray-900); } .gab-filter-colors { display: flex; flex-wrap: wrap; gap: 8px; } .gab-filter-apply { width: 100%; margin-top: 10px; min-height: 40px; } .gab-filter-sheet-foot, .gab-filter-sheet-apply { display: none; } /* 퀵필터 바 */ .gab-qbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .gab-qbar-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .gab-qbar-divider { width: 1px; height: 20px; background: var(--gab-gray-200); } .gab-qbar-sort, .gab-qbar-filter { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--gab-gray-300); border-radius: 999px; background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-700); cursor: pointer; } .gab-qbar-reset { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-400); } .gab-qbar-view { display: flex; gap: 4px; } .gab-qbar-view-btn, .gab-list-view-btn { width: 36px; height: 36px; border: 1px solid var(--gab-gray-300); border-radius: 8px; background: #fff; color: var(--gab-gray-500); cursor: pointer; } .gab-qbar-view-btn.is-on, .gab-list-view-btn.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-quickfilters { display: flex; flex-wrap: wrap; gap: 8px; } .gab-qf { display: inline-flex; align-items: center; gap: 6px; } .gab-qf-check { width: 16px; height: 16px; } .gab-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .gab-active-filters-label { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-500); } .gab-active-filters-clear { font-size: var(--gab-text-sm); font-weight: 700; } /* 정렬 시트 */ .gab-sort-sheet { position: fixed; bottom: 0; inset-inline: 0; display: none; z-index: var(--gab-z-modal); background: #fff; border-radius: 18px 18px 0 0; box-shadow: var(--gab-shadow-2xl); padding: 18px; transform: translateY(105%); transition: transform .3s ease; max-height: 70vh; overflow: auto; } .gab-sort-sheet.is-open { transform: none; } .gab-sort-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .gab-sort-sheet-title { font-weight: 800; font-size: var(--gab-text-lg); } .gab-sort-sheet-x { border: 0; background: var(--gab-gray-100); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; } .gab-sort-sheet-list { display: flex; flex-direction: column; gap: 4px; } .gab-sort-opt { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; font-weight: 600; color: var(--gab-gray-700); cursor: pointer; } .gab-sort-opt:hover { background: var(--gab-gray-50); } .gab-sort-opt.is-on { color: var(--gab-primary-600); font-weight: 800; } .gab-sort-opt-check { margin-inline-start: auto; } .gab-sort-tabs, .gab-order-tabs, .gab-inv-tabs, .gab-rv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } /* 페이지네이션 */ .gab-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; } .gab-page-btn { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--gab-gray-300); border-radius: 10px; background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); } .gab-page-btn:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .gab-page-btn.is-on, .gab-apage-num.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-page-ellipsis { color: var(--gab-gray-300); padding: 0 4px; } .gab-perpage-select { width: auto; min-height: 40px; } .gab-infinite { text-align: center; padding: 20px; color: var(--gab-gray-400); font-size: var(--gab-text-sm); } /* 빈 상태 */ .gab-empty, .gab-rv-empty, .gab-mem-empty, .gab-fav-empty, .gab-my-empty, .hicm-admin-empty, .hicm-inventory-empty, .gab-docup-empty, .gab-abr-empty, .gab-buyreq-mine-empty, .gab-verification-empty, .hicm-edit-empty, .gab-inv-empty, .hicm-verify-empty, .hicm-dcc-empty, .gab-detail-data-empty, .hicm-table-empty, .gab-arow-empty { text-align: center; padding: 56px 20px; color: var(--gab-gray-500); } .gab-empty-icon, .gab-fav-empty-ic, .gab-my-empty-ic, .gab-verification-empty-icon, .hicm-empty-icon { font-size: 44px; color: var(--gab-gray-300); margin-bottom: 12px; } .gab-empty-title, .gab-fav-empty-t, .gab-my-empty-t { font-size: var(--gab-text-xl); font-weight: 800; color: var(--gab-gray-800); margin: 0 0 6px; } .gab-empty-desc { color: var(--gab-gray-400); font-size: var(--gab-text-sm); margin: 0 0 18px; } .gab-empty-actions, .gab-empty-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .hicm-empty-mascot, .gab-empty-illust { max-width: 140px; margin-inline: auto; opacity: .9; } /* ===== 17. 모달·시트 공통 ===== */ .gab-modal, .gab-inq-modal, .gab-abr-modal, .gab-reject-modal, .gab-dealer-modal, .hicm-admin-reply-modal { position: fixed; inset: 0; z-index: var(--gab-z-modal); display: none; align-items: center; justify-content: center; padding: 20px; } .gab-modal.is-open, .gab-inq-modal.is-open, .gab-abr-modal.is-open, .gab-reject-modal.is-open, .gab-dealer-modal.is-open, .hicm-admin-reply-modal.is-open { display: flex; } .gab-modal-box, .gab-modal-in { position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: var(--gab-shadow-2xl); padding: 24px; } .gab-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .gab-modal-title { font-size: var(--gab-text-xl); font-weight: 800; margin: 0; } .gab-modal-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-600); cursor: pointer; } .gab-modal-body { min-width: 0; } .gab-modal-foot { display: flex; gap: 10px; margin-top: 18px; } .gab-modal-foot > * { flex: 1; } .gab-modal-note { font-size: var(--gab-text-xs); color: var(--gab-gray-400); margin-top: 10px; } .gab-modal-sub { color: var(--gab-gray-500); font-size: var(--gab-text-sm); margin: 0 0 14px; } .gab-modal-done { text-align: center; padding: 20px 0; } .gab-modal-done-ic { font-size: 44px; color: var(--gab-success); } .gab-modal-done-t { font-size: var(--gab-text-lg); font-weight: 800; margin: 10px 0 4px; } .gab-modal-done-s { color: var(--gab-gray-500); font-size: var(--gab-text-sm); } .gab-log { max-height: 200px; overflow: auto; background: var(--gab-gray-50); border-radius: 10px; padding: 12px; font-size: var(--gab-text-xs); font-family: var(--gab-font-mono); } /* 바텀시트(필터·언어 등) 모바일 공통 */ .hicm-language-title { font-weight: 800; font-size: var(--gab-text-lg); } /* ===== 18. 모바일 검색 오버레이 ===== */ .gab-msearch { position: fixed; inset: 0; z-index: var(--gab-z-modal); background: #fff; display: none; flex-direction: column; } .gab-msearch.is-open { display: flex; } .gab-msearch-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--gab-gray-100); } .gab-msearch-back { border: 0; background: transparent; font-size: 20px; color: var(--gab-gray-700); cursor: pointer; } .gab-msearch-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--gab-gray-300); border-radius: 10px; padding: 0 12px; } .gab-msearch-input { border: 0; min-height: 42px; } .gab-msearch-input:focus { box-shadow: none; } .gab-msearch-clear, .gab-msearch-voice { border: 0; background: transparent; color: var(--gab-gray-400); cursor: pointer; } .gab-msearch-body { flex: 1; overflow: auto; padding: 16px; } .gab-msearch-sec { margin-bottom: 22px; } .gab-msearch-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .gab-msearch-sec-title { font-size: var(--gab-text-sm); font-weight: 800; color: var(--gab-gray-700); } .gab-msearch-clear-all { border: 0; background: transparent; font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-400); cursor: pointer; } .gab-msearch-recent, .gab-msearch-saved { display: flex; flex-direction: column; gap: 2px; } .gab-msearch-srow, .gab-msearch-sgrow { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; color: var(--gab-gray-700); font-size: var(--gab-text-sm); font-weight: 600; } .gab-msearch-srow:hover, .gab-msearch-sgrow:hover { background: var(--gab-gray-50); } .gab-msearch-srow-x, .gab-msearch-srow-go, .gab-msearch-sgrow-go { margin-inline-start: auto; border: 0; background: transparent; color: var(--gab-gray-300); cursor: pointer; } .gab-msearch-presets { display: flex; flex-wrap: wrap; gap: 8px; } .gab-msearch-related, .gab-msearch-popular { display: flex; flex-wrap: wrap; gap: 8px; } .gab-msearch-pop-trend { color: var(--gab-success); font-size: 10px; } .gab-msearch-pop-rank { width: 20px; font-weight: 800; color: var(--gab-primary-600); } .gab-msearch-rel, .gab-msearch-suggest { display: flex; flex-direction: column; gap: 2px; } .gab-msearch-sgcnt { font-size: 11px; color: var(--gab-gray-400); } .gab-msearch-sgcat { font-size: 11px; color: var(--gab-gray-400); } .gab-msearch-empty, .gab-msearch-default { text-align: center; padding: 40px 16px; color: var(--gab-gray-400); } .gab-msearch-rchip-x { border: 0; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; } /* ===== 19. 차량 상세 ===== */ .gab-detail-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; } .gab-detail-main { min-width: 0; } .gab-detail-sidebar { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 16px; } .gab-detail-panel { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; } .gab-detail-info { min-width: 0; } .gab-detail-identity-badges, .gab-detail-mobile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .gab-detail-mobile-price, .gab-detail-mobile-meta, .gab-detail-mobile-specs, .gab-detail-mobile-summary { display: none; } /* 갤러리 */ .gab-gallery { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--gab-gray-200); background: var(--gab-gray-100); } .gab-gallery-main { position: relative; aspect-ratio: 4 / 3; } .gab-gallery-main-img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } .gab-gallery-badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 6px; z-index: 2; } .gab-gallery-counter { position: absolute; bottom: 12px; inset-inline-end: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17,19,24,.65); color: #fff; font-size: 12px; font-weight: 700; } .gab-gallery-expand { position: absolute; bottom: 12px; inset-inline-start: 12px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(17,19,24,.6); color: #fff; cursor: pointer; } .gab-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--gab-gray-700); cursor: pointer; box-shadow: var(--gab-shadow); z-index: 2; } .gab-gallery-nav-prev { inset-inline-start: 12px; } .gab-gallery-nav-next { inset-inline-end: 12px; } .gab-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; } .gab-gallery-thumb { flex: 0 0 auto; width: 84px; height: 60px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: var(--gab-gray-100); } .gab-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } /* v171 — JS(gabGalleryGo)는 is-active 를 토글하는데 CSS는 is-on 만 잡고 있어 선택된 썸네일에 테두리가 전혀 표시되지 않았다. 둘 다 받는다. */ .gab-gallery-thumb.is-on, .gab-gallery-thumb.is-active { border-color: var(--gab-primary-600); } /* 라이트박스 */ .gab-lb { position: fixed; inset: 0; z-index: var(--gab-z-modal); background: rgba(10, 11, 13, 0.94); display: none; flex-direction: column; } .gab-lb.is-open { display: flex; } .gab-lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 0; } .gab-lb-img { max-width: 92vw; max-height: 74vh; object-fit: contain; } .gab-lb-x { position: absolute; top: 16px; inset-inline-end: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; z-index: 2; } .gab-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; } .gab-lb-prev { inset-inline-start: 16px; } .gab-lb-next { inset-inline-end: 16px; } .gab-lb-counter { position: absolute; top: 18px; inset-inline-start: 18px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 700; } .gab-lb-thumbs { display: flex; gap: 8px; justify-content: center; padding: 14px; overflow-x: auto; } .gab-lb-th { width: 72px; height: 50px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: transparent; flex: 0 0 auto; } .gab-lb-th img { width: 100%; height: 100%; object-fit: cover; } .gab-lb-th.is-on { border-color: var(--gab-primary-500); } .gab-lb-bottom { padding: 12px 16px; color: rgba(255,255,255,.75); font-size: var(--gab-text-sm); text-align: center; } /* 가격 카드 */ .gab-price-card { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 20px; } .gab-price-card-brand { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-gray-400); text-transform: uppercase; } .gab-price-card-title { font-size: var(--gab-text-xl); font-weight: 800; margin: 6px 0 2px; line-height: 1.35; } .gab-price-card-sub { font-size: var(--gab-text-sm); color: var(--gab-gray-400); } .gab-price-card-label { display: block; font-size: 11px; color: var(--gab-gray-400); margin-top: 16px; } .gab-price-card-main { display: flex; align-items: baseline; gap: 8px; } .gab-price-card-value, .gab-detail-price-value { font-size: 30px; font-weight: 800; color: var(--gab-primary-600); letter-spacing: -0.02em; } .gab-price-cur { font-size: var(--gab-text-md); color: var(--gab-gray-500); font-weight: 700; } .gab-price-card-listing { font-size: var(--gab-text-sm); color: var(--gab-gray-400); margin-top: 4px; } .gab-price-row { display: flex; align-items: center; gap: 8px; } .gab-keyspecs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; } .gab-keyspec { padding: 10px 12px; border-radius: 10px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-100); } .gab-keyspec-l { display: block; font-size: 11px; color: var(--gab-gray-400); font-weight: 600; } .gab-keyspec-v { font-size: var(--gab-text-sm); font-weight: 800; color: var(--gab-gray-900); } .gab-detail-actions, .gab-insp-actions, .gab-track-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .gab-detail-actions > *, .gab-track-actions > * { flex: 1; } /* 판매자 카드 */ .gab-seller-card { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; } .gab-seller-card-title { font-size: var(--gab-text-sm); font-weight: 800; color: var(--gab-gray-400); margin-bottom: 12px; } .gab-seller-header { display: flex; align-items: center; gap: 12px; } .gab-seller-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--gab-gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gab-gray-400); overflow: hidden; } .gab-seller-info { min-width: 0; } .gab-seller-name { font-weight: 800; color: var(--gab-gray-900); } .gab-seller-type, .gab-seller-meta { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-seller-stats { display: flex; gap: 8px; margin-top: 14px; } .gab-seller-stat { flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px; background: var(--gab-gray-50); } .gab-seller-stat-value { display: block; font-size: var(--gab-text-md); font-weight: 800; } .gab-seller-stat-label { font-size: 11px; color: var(--gab-gray-400); } .gab-seller-privacy { margin-top: 12px; font-size: var(--gab-text-xs); color: var(--gab-gray-400); display: flex; gap: 6px; align-items: flex-start; } .gab-seller-privacy i { color: var(--gab-success); } /* 상세 탭 */ .gab-detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gab-gray-200); margin-top: 28px; overflow-x: auto; } .gab-detail-tab { padding: 12px 16px; border: 0; background: transparent; font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-500); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; } .gab-detail-tab.is-on { color: var(--gab-primary-600); border-bottom-color: var(--gab-primary-600); } .gab-detail-description { padding-block: 20px; color: var(--gab-gray-700); line-height: 1.8; } /* 제원 */ .gab-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--gab-gray-200); border-radius: 12px; overflow: hidden; margin-top: 16px; } .gab-spec-item { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--gab-gray-100); font-size: var(--gab-text-sm); } .gab-spec-item:nth-child(odd) { background: var(--gab-gray-50); } .gab-spec-item--wide { grid-column: 1 / -1; } .gab-spec-item-label { color: var(--gab-gray-400); font-weight: 600; } .gab-spec-item-value { font-weight: 700; color: var(--gab-gray-900); text-align: end; } .gab-spec-vin { font-family: var(--gab-font-mono); } .gab-options-grid, .gab-opt-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .gab-option-item, .gab-opt { padding: 6px 12px; border-radius: 999px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-xs); font-weight: 600; color: var(--gab-gray-600); } .gab-opt-group-label { font-size: var(--gab-text-sm); font-weight: 800; margin: 14px 0 8px; } .gab-opt-check { color: var(--gab-success); margin-inline-end: 4px; } /* 점검/리포트 */ .gab-insp { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } .gab-insp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .gab-insp-items { display: flex; flex-direction: column; gap: 8px; } .gab-insp-item { display: flex; align-items: center; gap: 10px; font-size: var(--gab-text-sm); color: var(--gab-gray-700); } .gab-insp-item i { color: var(--gab-success); } .gab-insp-view { display: inline-flex; gap: 8px; } .gab-report-grade { display: flex; align-items: center; gap: 16px; } .gab-report-grade-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--gab-gray-900); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gab-report-grade-circle--a { background: var(--gab-success); } .gab-report-grade-letter { font-size: 26px; font-weight: 800; line-height: 1; } .gab-report-grade-label { font-size: 10px; opacity: .7; } .gab-report-grade-checks { display: flex; flex-direction: column; gap: 6px; } .gab-report-check { display: flex; gap: 8px; font-size: var(--gab-text-sm); color: var(--gab-gray-700); } .gab-report-check i { color: var(--gab-success); } .gab-report-grade-pdf { margin-top: 12px; } /* 리뷰 */ .gab-rv-list { display: flex; flex-direction: column; gap: 14px; } .gab-rv-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 16px; background: #fff; } .gab-rv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .gab-rv-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gab-gray-100); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gab-gray-500); } .gab-rv-who { flex: 1; min-width: 0; } .gab-rv-name { font-weight: 800; font-size: var(--gab-text-sm); } .gab-rv-car, .gab-rv-loc, .gab-rv-date { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-rv-stars { color: #F5A623; font-size: 13px; } .gab-rv-text { font-size: var(--gab-text-sm); color: var(--gab-gray-700); margin: 0; } .gab-rv-card-foot { margin-top: 10px; } .gab-rv-tab-count { opacity: .6; font-size: 11px; } /* 모바일 하단 CTA 바 */ .gab-mbar { position: fixed; bottom: 0; inset-inline: 0; z-index: var(--gab-z-fixed); display: none; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--gab-gray-200); } .gab-mbar-price { flex: 1; min-width: 0; font-size: var(--gab-text-lg); font-weight: 800; color: var(--gab-primary-600); } .gab-mbar-btn { min-height: 44px; padding: 10px 18px; border-radius: 10px; font-weight: 800; border: 1px solid var(--gab-gray-300); background: #fff; color: var(--gab-gray-700); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .gab-mbar-btn--inq { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; flex: 1.4; justify-content: center; } .gab-mbar-btn--save.is-fav { color: var(--gab-primary-600); border-color: var(--gab-primary-300); } body.gab-has-mbar { padding-bottom: 70px; } /* 데모 안내 */ .hicm-demo-detail-notice, .hicm-demo-asset-label, .gab-docup-notice, .gab-insp-up-msg, .hicm-inquiry-detail-notice, .hicm-inventory-notice, .gab-safety-notice, .gab-support-notice, .hicm-admin-reply-notice, .hicm-review-policy, .gab-fav-order-note, .gab-parts-note, .hicm-profile-note, .hicm-platform-privacy { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-sm); color: var(--gab-gray-600); } .hicm-demo-detail-notice i, .gab-safety-notice i { color: var(--gab-warning); } .gab-safety-notice-text { flex: 1; } /* ===== 20. 로그인·회원가입 ===== */ .gab-page-auth, .gab-page-login, .gab-page-register { background: var(--gab-gray-50); min-height: 80vh; } .gab-auth, .gab-auth-form-box { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 65px); } .gab-auth-visual, .gab-auth-form-side, .gab-reg-side { position: relative; background: var(--gab-gray-900); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .gab-auth-headline { font-size: var(--gab-text-3xl); color: #fff; margin: 0 0 12px; } .gab-auth-subtitle { color: rgba(255,255,255,.65); } .gab-auth-badge { display: inline-flex; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: var(--gab-text-xs); font-weight: 700; width: fit-content; } .gab-auth-ssl { display: flex; align-items: center; gap: 6px; margin-top: 24px; font-size: var(--gab-text-xs); color: rgba(255,255,255,.5); } .gab-auth-card, .gab-reg-card { width: 100%; max-width: 460px; margin-inline: auto; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 18px; padding: 32px; box-shadow: var(--gab-shadow-lg); } .gab-auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 20px; } .gab-reg-body { display: block; padding: 40px 20px 56px; } .gab-auth-brand { text-align: center; margin-bottom: 22px; } .gab-auth-brand-inner, .gab-reg-logo { display: inline-flex; align-items: center; gap: 10px; } .gab-auth-logo-icon, .gab-reg-logo-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gab-grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; } .gab-auth-logo-text, .gab-reg-logo-name { text-align: start; } .gab-auth-logo-name, .gab-reg-logo-name { font-size: 20px; font-weight: 800; color: var(--gab-gray-900); } .gab-auth-logo-name .accent, .gab-reg-logo-name .accent { color: var(--gab-primary-600); } .gab-auth-logo-tagline, .gab-reg-logo-tag { font-size: 11px; color: var(--gab-gray-400); } .gab-auth-title, .gab-reg-title { font-size: var(--gab-text-2xl); margin: 0 0 6px; text-align: center; } .gab-auth-subtitle, .gab-reg-subtitle { text-align: center; color: var(--gab-gray-500); font-size: var(--gab-text-sm); margin: 0 0 22px; } .gab-auth-field { margin-bottom: 16px; } .gab-auth-label { display: block; margin-bottom: 6px; } .gab-auth-input-wrap { position: relative; display: flex; align-items: center; } .gab-auth-input-icon { position: absolute; inset-inline-start: 12px; color: var(--gab-gray-400); pointer-events: none; } .gab-auth-input-wrap .gab-auth-input, .gab-auth-input-wrap input { padding-inline-start: 38px; } .gab-auth-input-toggle { position: absolute; inset-inline-end: 10px; border: 0; background: transparent; color: var(--gab-gray-400); cursor: pointer; } .gab-auth-options { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 18px; font-size: var(--gab-text-sm); } .gab-auth-remember { display: flex; align-items: center; gap: 6px; color: var(--gab-gray-600); } .gab-auth-forgot { font-weight: 600; } .gab-auth-submit { width: 100%; min-height: 48px; font-size: var(--gab-text-lg); } .gab-auth-signup, .gab-reg-terms { text-align: center; margin-top: 18px; font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .gab-auth-footer, .gab-auth-copyright { text-align: center; margin-top: 20px; font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-auth-langs, .gab-auth-lang { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .gab-auth-langs a { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-500); } .gab-auth-langs a.is-active { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-login-form, .gab-signup-form { min-width: 0; } /* 회원가입 레이아웃 */ .gab-reg-layout { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; padding-block: 32px; } .gab-reg-header { background: #fff; border-bottom: 1px solid var(--gab-gray-200); } .gab-reg-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; } .gab-reg-header-right { display: flex; align-items: center; gap: 10px; } .gab-reg-nav { display: flex; gap: 6px; } .gab-reg-pill { padding: 7px 14px; border-radius: 999px; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-500); border: 1px solid var(--gab-gray-200); } .gab-reg-pill.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-reg-form { min-width: 0; } .gab-reg-actions { display: flex; gap: 10px; margin-top: 20px; } .gab-reg-actions--end { justify-content: flex-end; } .gab-reg-actions > * { flex: 1; } /* 회원 유형 카드 */ .gab-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .gab-type-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 2px solid var(--gab-gray-200); border-radius: 16px; background: #fff; cursor: pointer; transition: var(--gab-transition-fast); } .gab-type-card:hover { border-color: var(--gab-primary-300); } .gab-type-card.is-on { border-color: var(--gab-primary-600); box-shadow: 0 0 0 3px rgba(216,52,44,.08); } .gab-type-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--gab-gray-100); color: var(--gab-gray-600); display: flex; align-items: center; justify-content: center; font-size: 22px; } .gab-type-card.is-on .gab-type-icon { background: var(--gab-primary-50); color: var(--gab-primary-600); } .gab-type-name { font-size: var(--gab-text-lg); font-weight: 800; } .gab-type-desc { font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .gab-type-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--gab-text-sm); color: var(--gab-gray-600); } .gab-type-benefits i { color: var(--gab-success); margin-inline-end: 6px; } .gab-type-docs { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-type-mkt { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--gab-primary-50); color: var(--gab-primary-700); font-size: 11px; font-weight: 800; width: fit-content; } .gab-type-next { margin-top: 18px; } /* 가입 언어 카드 */ .gab-reglang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .gab-reglang-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; cursor: pointer; } .gab-reglang-card.is-on { border-color: var(--gab-primary-600); background: var(--gab-primary-50); } .gab-reglang-native { font-weight: 800; font-size: var(--gab-text-sm); } .gab-reglang-en { font-size: 11px; color: var(--gab-gray-400); } .gab-reglang-ctx, .gab-reglang-note, .gab-reglang-detect { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } /* 전화 인증/로그인 */ .hicm-phone-panel, .hicm-login-tabs, .hicm-phone-tab { min-width: 0; } .hicm-phone-grid, .hicm-phone-auth { display: flex; flex-direction: column; gap: 14px; } .hicm-phone-control { display: flex; gap: 8px; } .hicm-phone-control input { flex: 1; } .hicm-phone-send, .hicm-login-phone-send, .hicm-signup-phone-send { flex-shrink: 0; min-height: 44px; padding: 0 16px; border: 1px solid var(--gab-gray-900); border-radius: 10px; background: var(--gab-gray-900); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; } .hicm-phone-send:disabled, .hicm-login-phone-send:disabled { opacity: .5; cursor: not-allowed; } .hicm-phone-status, .hicm-login-phone-status, .hicm-signup-phone-status { font-size: var(--gab-text-sm); font-weight: 600; } .hicm-phone-remember, .hicm-login-phone-remember { display: flex; align-items: center; gap: 6px; font-size: var(--gab-text-sm); color: var(--gab-gray-600); } .hicm-login-code-wrap, .hicm-signup-phone-code-wrap { display: flex; gap: 8px; } .hicm-phone-verify, .hicm-login-phone-check, .hicm-signup-phone-check { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--gab-gray-300); background: #fff; font-weight: 700; cursor: pointer; } .hicm-password-rate { font-size: var(--gab-text-xs); font-weight: 700; margin-top: 6px; } .gab-pwbar { height: 4px; border-radius: 999px; background: var(--gab-gray-200); margin-top: 8px; overflow: hidden; } .gab-pwbar > span { display: block; height: 100%; border-radius: 999px; background: var(--gab-success); transition: width .3s; } /* 국가 선택 */ .hicm-country-picker { position: relative; } .hicm-country-picker-button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--gab-gray-300); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; } .hicm-country-picker-panel { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 12px; box-shadow: var(--gab-shadow-lg); z-index: var(--gab-z-dropdown); max-height: 300px; overflow: auto; display: none; } .hicm-country-picker.is-open .hicm-country-picker-panel { display: block; } .hicm-country-picker-search { position: sticky; top: 0; padding: 8px; background: #fff; border-bottom: 1px solid var(--gab-gray-100); } .hicm-country-picker-list { display: flex; flex-direction: column; padding: 6px; } .hicm-country-picker-empty { padding: 16px; text-align: center; color: var(--gab-gray-400); font-size: var(--gab-text-sm); } .hicm-country-field { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: var(--gab-text-sm); } .hicm-country-field:hover, .hicm-country-field.is-on { background: var(--gab-gray-50); } .hicm-country-native { flex: 1; font-weight: 600; } .hicm-country-code, .hicm-country-current-dial { color: var(--gab-gray-400); font-size: var(--gab-text-xs); } /* ===== 21. 마이페이지 ===== */ .gab-members-layout, .gab-my { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; } .gab-my-sidebar { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; position: sticky; top: 130px; } .gab-my-profile { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--gab-gray-100); margin-bottom: 12px; } .gab-my-avatar, .hicm-my-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gab-gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--gab-gray-500); overflow: hidden; } .gab-my-profile-info { min-width: 0; } .gab-my-name { font-weight: 800; } .gab-my-email, .gab-my-sub { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-my-nav { display: flex; flex-direction: column; gap: 2px; } .gab-my-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-700); } .gab-my-nav-item:hover { background: var(--gab-gray-50); } .gab-my-nav-item.is-on { background: var(--gab-primary-50); color: var(--gab-primary-700); } .gab-my-nav-item i { width: 20px; text-align: center; color: var(--gab-gray-400); } .gab-my-nav-item.is-on i { color: var(--gab-primary-600); } .gab-my-logout { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 11px 12px; border: 0; border-top: 1px solid var(--gab-gray-100); border-radius: 0 0 10px 10px; background: transparent; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-500); cursor: pointer; } .gab-my-content { min-width: 0; } .gab-my-head { margin-bottom: 20px; } .gab-my-title { font-size: var(--gab-text-2xl); margin: 0; } .gab-my-panel { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 20px; margin-bottom: 16px; } .gab-my-field-row { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--gab-gray-100); font-size: var(--gab-text-sm); } .gab-my-field-value { font-weight: 700; color: var(--gab-gray-900); text-align: end; } .gab-my-list-body { display: flex; flex-direction: column; } .gab-my-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--gab-gray-100); } .gab-my-list-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-500); display: flex; align-items: center; justify-content: center; } .gab-my-list-icon--inquiry { background: var(--gab-primary-50); color: var(--gab-primary-600); } .gab-my-list-text { flex: 1; min-width: 0; font-weight: 700; font-size: var(--gab-text-sm); } .gab-my-list-time { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-my-dealer-cta { padding: 16px; border-radius: 12px; background: var(--gab-gray-900); color: #fff; text-align: center; } .gab-my-dealer-cta a { color: #fff; font-weight: 800; text-decoration: underline; } /* 마이 대시보드 패널 */ .hicm-my-welcome { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 16px; background: var(--gab-gray-900); color: #fff; margin-bottom: 18px; } .hicm-my-welcome-copy { flex: 1; } .hicm-my-eyebrow { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-primary-400); text-transform: uppercase; } .hicm-my-welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .hicm-my-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .hicm-my-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .hicm-my-panel { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } .hicm-my-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hicm-my-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .hicm-my-summary-card { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; } .hicm-my-summary-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 18px; } .hicm-my-summary-copy b { display: block; font-size: var(--gab-text-lg); } .hicm-my-summary-copy span { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .hicm-my-process { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } /* 문의/진행 카드 */ .hicm-inquiries, .hicm-inquiry-list { display: flex; flex-direction: column; gap: 10px; } .hicm-inquiry-row { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; } .hicm-inquiry-row:hover { border-color: var(--gab-gray-300); } .hicm-inquiry-status { margin-inline-start: auto; } .hicm-inquiry-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .hicm-inquiry-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .hicm-inquiry-panel, .hicm-inquiry-detail-card, .hicm-inquiry-stage-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } .hicm-my-inquiry-reply { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--gab-gray-50); border-inline-start: 3px solid var(--gab-primary-600); font-size: var(--gab-text-sm); } /* 주문 트래킹 */ .gab-track-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; margin-bottom: 14px; } .gab-track-head { display: flex; align-items: center; gap: 14px; } .gab-track-thumb { width: 76px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--gab-gray-100); } .gab-track-car { flex: 1; min-width: 0; } .gab-track-name { font-weight: 800; } .gab-track-no, .gab-ord-no { font-size: var(--gab-text-xs); color: var(--gab-gray-400); font-family: var(--gab-font-mono); } .gab-track-eta { font-size: var(--gab-text-sm); color: var(--gab-gray-500); margin-top: 10px; } .gab-progress-card { margin-top: 12px; } .gab-progress-card-title { display: flex; justify-content: space-between; font-size: var(--gab-text-sm); font-weight: 700; margin-bottom: 6px; } .gab-progress-card-bar { height: 6px; border-radius: 999px; background: var(--gab-gray-100); overflow: hidden; } .gab-progress-card-fill { display: block; height: 100%; background: var(--gab-primary-600); border-radius: 999px; } .gab-progress-checklist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .gab-progress-check { display: flex; gap: 8px; font-size: var(--gab-text-sm); color: var(--gab-gray-600); } .gab-progress-check.is-done i { color: var(--gab-success); } .gab-progress-check.is-now { font-weight: 800; color: var(--gab-primary-600); } .gab-order-tab-cnt { font-size: 10px; opacity: .7; } .gab-wallet-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .gab-wallet-info-item { padding: 12px; border-radius: 10px; background: var(--gab-gray-50); font-size: var(--gab-text-sm); } .gab-wallet-info-item b { display: block; font-size: var(--gab-text-lg); } /* ===== 22. 딜러/관리자 대시보드 프레임 ===== */ .gab-dash { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 65px); background: var(--gab-gray-50); } .gab-dash-side { background: #fff; border-inline-end: 1px solid var(--gab-gray-200); padding: 18px 14px; position: sticky; top: 65px; height: calc(100vh - 65px); overflow: auto; } .gab-dash-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; border-bottom: 1px solid var(--gab-gray-100); margin-bottom: 12px; } .gab-dash-brand-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--gab-grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gab-dash-brand-name { font-weight: 800; font-size: var(--gab-text-md); } .gab-dash-brand-role { font-size: 11px; color: var(--gab-gray-400); } .gab-dash-nav { display: flex; flex-direction: column; gap: 2px; } .gab-dash-nav-label { font-size: 11px; font-weight: 800; color: var(--gab-gray-400); text-transform: uppercase; padding: 12px 10px 6px; } .gab-dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); } .gab-dash-nav-item:hover { background: var(--gab-gray-50); color: var(--gab-gray-900); } .gab-dash-nav-item.is-on { background: var(--gab-primary-50); color: var(--gab-primary-700); } .gab-dash-nav-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gab-primary-600); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; } .gab-dash-main { min-width: 0; padding: 24px 28px 60px; } .gab-dash-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } .gab-dash-title { font-size: var(--gab-text-2xl); margin: 0; } .gab-dash-subtitle { color: var(--gab-gray-500); font-size: var(--gab-text-sm); margin: 4px 0 0; } .gab-dash-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } .gab-dash-hbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--gab-gray-300); background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-700); cursor: pointer; } .gab-dash-hbtn--ghost { border-color: transparent; background: transparent; } .gab-dash-hbtn--wp { border-color: var(--gab-gray-300); } .gab-dash-user { display: flex; align-items: center; gap: 10px; } .gab-dash-user-name { font-weight: 800; font-size: var(--gab-text-sm); } .gab-dash-user-role { font-size: 11px; color: var(--gab-gray-400); } .gab-dash-user-logout { color: var(--gab-gray-400); font-size: var(--gab-text-sm); } .gab-dash-card { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; margin-bottom: 18px; } .gab-dash-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--gab-gray-100); } .gab-dash-card-title { font-size: var(--gab-text-md); font-weight: 800; margin: 0; } .gab-dash-card-body { padding: 18px; } .gab-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .gab-dash-stat { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; } .gab-dash-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--gab-gray-100); color: var(--gab-gray-600); } .gab-dash-stat-icon--blue { background: #EBF2FE; color: var(--gab-info); } .gab-dash-stat-icon--green { background: #EAF7EF; color: var(--gab-success); } .gab-dash-stat-icon--amber { background: #FBF3E4; color: var(--gab-warning); } .gab-dash-stat-icon--purple { background: #F1EBFD; color: #7048C8; } .gab-dash-stat-value { display: block; font-size: var(--gab-text-xl); font-weight: 800; } .gab-dash-stat-label { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-dash-burger { display: none; } .gab-dash-mbar { display: none; } /* 딜러 커맨드 (hicm-dcc) */ .hicm-dcc-hero { padding: 24px; border-radius: 16px; background: var(--gab-gray-900); color: #fff; margin-bottom: 18px; } .hicm-dcc-eyebrow { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-primary-400); text-transform: uppercase; letter-spacing: .05em; } .hicm-dcc-hero h2 { color: #fff; margin: 6px 0 4px; } .hicm-dcc-tier { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: var(--gab-text-xs); font-weight: 800; } .hicm-dcc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .hicm-dcc-kpi { padding: 16px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; } .hicm-dcc-kpi b { display: block; font-size: var(--gab-text-2xl); } .hicm-dcc-kpi span { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .hicm-dcc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .hicm-dcc-grid--brief { grid-template-columns: 1fr; } .hicm-dcc-grid--operations { grid-template-columns: repeat(2, 1fr); } .hicm-dcc-card { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; } .hicm-dcc-pipeline { display: flex; flex-direction: column; gap: 8px; } .hicm-dcc-pipe { display: flex; align-items: center; gap: 10px; font-size: var(--gab-text-sm); } .hicm-dcc-pipe b { min-width: 36px; } .hicm-dcc-bars { flex: 1; height: 8px; border-radius: 999px; background: var(--gab-gray-100); overflow: hidden; } .hicm-dcc-bars > span { display: block; height: 100%; background: var(--gab-primary-600); } .hicm-dcc-task-list, .hicm-dcc-inquiry-list, .hicm-dcc-health-list { display: flex; flex-direction: column; gap: 8px; } .hicm-dcc-task, .hicm-dcc-inquiry, .hicm-dcc-health-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gab-gray-100); border-radius: 10px; font-size: var(--gab-text-sm); } .hicm-dcc-status { margin-inline-start: auto; } .hicm-dcc-row-action { margin-inline-start: auto; font-size: var(--gab-text-xs); font-weight: 700; } .hicm-dcc-tools { display: flex; flex-wrap: wrap; gap: 8px; } .hicm-dcc-issues { display: flex; flex-direction: column; gap: 8px; font-size: var(--gab-text-sm); color: var(--gab-gray-600); } .hicm-dcc-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--gab-text-xs); color: var(--gab-gray-500); } .hicm-dcc-chart-empty, .hicm-dcc-empty--compact { padding: 24px; text-align: center; color: var(--gab-gray-400); font-size: var(--gab-text-sm); } .hicm-dcc-health-summary { font-size: var(--gab-text-sm); font-weight: 800; } .hicm-dcc-score { font-size: 30px; font-weight: 800; color: var(--gab-primary-600); } .hicm-dcc-capacity__track { height: 8px; border-radius: 999px; background: var(--gab-gray-100); overflow: hidden; } .hicm-dcc-capacity__track > span, .hicm-dcc-capacity > span { display: block; height: 100%; background: var(--gab-info); } .hicm-dcc-clear { font-size: var(--gab-text-xs); font-weight: 700; } .hicm-dcc-btn { min-height: 40px; padding: 8px 16px; border-radius: 10px; font-size: var(--gab-text-sm); } /* 재고 관리 */ .hicm-inventory-panel { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; } .hicm-inventory-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .hicm-inventory-search { flex: 1; min-width: 200px; } .hicm-inventory-stats { display: flex; gap: 14px; font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .hicm-inventory-table-wrap, .gab-inv-table { width: 100%; overflow-x: auto; } .hicm-inventory-table, .gab-inv-tab-n { width: 100%; } .hicm-inventory-car { display: flex; align-items: center; gap: 10px; } .gab-inv-thumb { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--gab-gray-100); } .hicm-inventory-price, .gab-inv-price { font-weight: 800; white-space: nowrap; } .hicm-inventory-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 16px; } .gab-inv-metric { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-inv-q { min-width: 180px; } .hicm-inventory-selection { font-size: var(--gab-text-sm); color: var(--gab-gray-500); } /* 테이블 공통 */ .gab-table, .gab-atable, .hicm-inventory-table, .gab-inv-tbody table, .hicm-scroll-table table { width: 100%; border-collapse: collapse; font-size: var(--gab-text-sm); background: #fff; } .gab-table-wrap, .gab-atable-wrap, .hicm-scroll-table { overflow-x: auto; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; } .gab-table th, .gab-table td, .gab-atable th, .gab-atable td, .hicm-inventory-table th, .hicm-inventory-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--gab-gray-100); vertical-align: middle; } .gab-table th, .gab-atable th, .hicm-inventory-table th { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-gray-400); text-transform: uppercase; letter-spacing: .04em; background: var(--gab-gray-50); } .gab-table tr:last-child td, .gab-atable tr:last-child td { border-bottom: 0; } .gab-table tbody tr:hover, .gab-atable tbody tr:hover { background: var(--gab-gray-50); } .gab-atable--sel { background: var(--gab-primary-50) !important; } .gab-table-car { display: flex; align-items: center; gap: 10px; } .gab-table-car-name { font-weight: 700; } .gab-table-actions, .gab-table-act { display: flex; gap: 6px; } .gab-ath-sort { cursor: pointer; user-select: none; } .gab-ath-chk, .gab-atd-chk { width: 36px; text-align: center; } .gab-acell-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gab-gray-100); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gab-gray-500); font-size: 13px; } .gab-acell-name { font-weight: 700; } .gab-acell-sub { font-size: 11px; color: var(--gab-gray-400); } /* 관리자 툴바·통계 */ .gab-atoolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .gab-asearch { flex: 1; min-width: 200px; } .gab-atool-csv { white-space: nowrap; } .gab-astat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .gab-astat-row--6 { grid-template-columns: repeat(6, 1fr); } .gab-astat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 12px; } .gab-astat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--gab-gray-100); color: var(--gab-gray-600); } .gab-astat-icon--blue { background: #EBF2FE; color: var(--gab-info); } .gab-astat-icon--green { background: #EAF7EF; color: var(--gab-success); } .gab-astat-icon--amber { background: #FBF3E4; color: var(--gab-warning); } .gab-astat-icon--red { background: var(--gab-primary-50); color: var(--gab-primary-600); } .gab-astat-icon--violet { background: #F1EBFD; color: #7048C8; } .gab-astat-val { display: block; font-size: var(--gab-text-lg); font-weight: 800; } .gab-astat-lbl { font-size: 11px; color: var(--gab-gray-400); } .gab-afilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .gab-af-actions { display: flex; gap: 8px; } .gab-apage { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .gab-apage-nums { display: flex; gap: 4px; } .gab-apage-num { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gab-gray-300); border-radius: 8px; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); } .gab-apage-info, .gab-mem-pginfo { font-size: var(--gab-text-sm); color: var(--gab-gray-400); } .gab-apage-size, .gab-mem-pgsize { width: auto; min-height: 36px; } .gab-apinote { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-aact { display: flex; gap: 6px; } .gab-aact-btn { min-height: 32px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--gab-gray-300); background: #fff; font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-700); cursor: pointer; } .gab-aact-btn--approve, .gab-aact-btn--ok { background: var(--gab-success); border-color: var(--gab-success); color: #fff; } .gab-aact-btn--no { background: #fff; border-color: var(--gab-primary-300); color: var(--gab-primary-700); } .gab-aact-btn--view { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-abulk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--gab-gray-900); color: #fff; margin-bottom: 12px; } .gab-abulk-count { font-size: var(--gab-text-sm); font-weight: 700; } .gab-abulk-actions { display: flex; gap: 6px; margin-inline-start: auto; } .gab-abulk-btn { padding: 6px 12px; border-radius: 8px; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: var(--gab-text-xs); font-weight: 700; cursor: pointer; } .gab-abulk-btn--warn { background: var(--gab-primary-600); } .gab-abulk-clear { border: 0; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; } /* 회원 관리 */ .gab-mem-q { flex: 1; min-width: 180px; } .gab-mem-chk { width: 16px; height: 16px; } .gab-mem-status, .gab-mem-type, .gab-mem-tier { white-space: nowrap; } .gab-mem-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 94vw); background: #fff; z-index: var(--gab-z-modal); box-shadow: var(--gab-shadow-2xl); overflow: auto; padding: 22px; } .gab-mem-period { display: flex; gap: 6px; flex-wrap: wrap; } .gab-member-management-title { font-size: var(--gab-text-xl); } .gab-member-rejection-reason { font-size: var(--gab-text-sm); color: var(--gab-primary-700); background: var(--gab-primary-50); padding: 10px 12px; border-radius: 8px; } /* 답변/반려 */ .gab-abr-q { font-size: var(--gab-text-sm); } .gab-abr-name { font-weight: 700; } .gab-abr-id, .gab-reject-id, .hicm-admin-reply-id { font-family: var(--gab-font-mono); font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-abr-reply { font-size: var(--gab-text-sm); color: var(--gab-gray-600); } .gab-reject-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .gab-reject-reason { width: 100%; } .gab-reject-heading, .gab-reject-title { font-size: var(--gab-text-lg); margin: 0 0 10px; } .gab-reject-box { padding: 14px; border-radius: 10px; background: var(--gab-gray-50); font-size: var(--gab-text-sm); margin-bottom: 12px; } .hicm-admin-reply-text { width: 100%; min-height: 140px; } .hicm-admin-reply-save { margin-top: 12px; } .hicm-admin-reply-title { font-size: var(--gab-text-lg); margin: 0 0 12px; } .hicm-admin-inquiry-filter, .hicm-admin-inquiry-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .hicm-admin-review-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--gab-gray-200); border-radius: 10px; margin-bottom: 8px; } .hicm-admin-review-description { flex: 1; font-size: var(--gab-text-sm); } .hicm-admin-car-row { display: flex; align-items: center; gap: 10px; } /* 문서 업로드 */ .gab-docup { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; margin-bottom: 14px; } .gab-docup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .gab-docup-title { font-size: var(--gab-text-md); font-weight: 800; margin: 0; } .gab-docup-hint { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-docup-zone { border: 2px dashed var(--gab-gray-300); border-radius: 12px; padding: 26px; text-align: center; color: var(--gab-gray-400); cursor: pointer; transition: var(--gab-transition-fast); } .gab-docup-zone:hover, .gab-docup-zone.is-over { border-color: var(--gab-primary-600); background: var(--gab-primary-50); color: var(--gab-primary-600); } .gab-docup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; } .gab-docup-preview, .gab-docup-thumb { position: relative; border: 1px solid var(--gab-gray-200); border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--gab-gray-50); } .gab-docup-preview img, .gab-docup-thumb img { width: 100%; height: 100%; object-fit: cover; } .gab-docup-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--gab-primary-600); font-size: 26px; } .gab-docup-pinfo { padding: 8px; font-size: 11px; } .gab-docup-fname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gab-docup-fsize { color: var(--gab-gray-400); } .gab-docup-del, .gab-upload-del { position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(17,19,24,.65); color: #fff; font-size: 12px; cursor: pointer; } .gab-docup-zone .gab-docup-check, .gab-docup-preview .gab-docup-check { position: absolute; top: 6px; inset-inline-start: 6px; color: var(--gab-success); font-size: 16px; } .gab-docup-bar { height: 5px; border-radius: 999px; background: var(--gab-gray-100); overflow: hidden; margin-top: 10px; } .gab-docup-bar > span { display: block; height: 100%; background: var(--gab-primary-600); } .gab-docup-done { color: var(--gab-success); font-weight: 700; font-size: var(--gab-text-sm); } .gab-docup-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gab-docup-secure { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-docup-name { font-size: var(--gab-text-sm); font-weight: 700; } .hicm-doc-list { display: flex; flex-direction: column; gap: 8px; } .hicm-private-documents { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; } /* 사진 업로드 (판매 등록) */ .gab-upload-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .gab-upload-thumb { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 1px solid var(--gab-gray-200); background: var(--gab-gray-50); } .gab-upload-thumb img { width: 100%; height: 100%; object-fit: cover; } .gab-upload-thumb--main { border-color: var(--gab-primary-600); } .gab-upload { border: 2px dashed var(--gab-gray-300); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4/3; color: var(--gab-gray-400); cursor: pointer; } .gab-upload:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .gab-upload-icon { font-size: 22px; } .gab-upload-text { font-size: 11px; font-weight: 700; } .gab-upload-count { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-upload-hint { font-size: var(--gab-text-xs); color: var(--gab-gray-400); margin-top: 8px; } .gab-mini-upload { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .gab-mini-upload-file { font-size: var(--gab-text-sm); color: var(--gab-gray-600); } /* 인증 단계 */ .gab-exprofile-steps, .hicm-verification { display: flex; flex-direction: column; gap: 10px; } .gab-exprofile-step { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; } .gab-exprofile-step-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--gab-gray-100); color: var(--gab-gray-500); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; } .gab-exprofile-step.is-done .gab-exprofile-step-dot { background: var(--gab-success); color: #fff; } .gab-exprofile-step-label { font-weight: 700; font-size: var(--gab-text-sm); } .gab-exprofile-status { margin-inline-start: auto; } .gab-exprofile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .gab-exprofile-head { margin-bottom: 16px; } .gab-exprofile-docs, .hicm-verification-file { margin-top: 10px; } .gab-exprofile-flags { display: flex; flex-wrap: wrap; gap: 8px; } .gab-exprofile-flag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gab-gray-200); border-radius: 999px; font-size: var(--gab-text-sm); } .hicm-verification-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .hicm-verification-status { text-transform: none; } .gab-verification-panel { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } .gab-exprofile-sec { margin-bottom: 20px; } .gab-exprofile-label { font-size: var(--gab-text-xs); font-weight: 800; color: var(--gab-gray-400); text-transform: uppercase; margin-bottom: 8px; } /* ===== 23. 정적 페이지 공통 ===== */ .gab-page-hero { background: var(--gab-gray-50); border-bottom: 1px solid var(--gab-gray-200); } .gab-page-hero-inner { padding-block: 48px; max-width: 760px; } .gab-page-hero-badge { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--gab-primary-50); border: 1px solid var(--gab-primary-200); color: var(--gab-primary-700); font-size: var(--gab-text-xs); font-weight: 800; margin-bottom: 12px; } .gab-page-hero-title { font-size: clamp(26px, 4vw, 38px); margin: 0 0 10px; } .gab-page-hero-desc { color: var(--gab-gray-500); font-size: var(--gab-text-md); margin: 0; } .gab-page-hero-media { margin-top: 20px; } .gab-content-block { padding-block: 32px; } .gab-lsec { border: 1px solid var(--gab-gray-200); border-radius: 14px; margin-bottom: 14px; overflow: hidden; background: #fff; } .gab-lsec-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; } .gab-lsec-num { width: 30px; height: 30px; border-radius: 50%; background: var(--gab-gray-900); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gab-lsec-title { flex: 1; font-size: var(--gab-text-md); font-weight: 800; margin: 0; } .gab-lsec-hint { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-lsec-more { color: var(--gab-gray-400); } .gab-lsec-body { padding: 0 18px 18px; color: var(--gab-gray-600); font-size: var(--gab-text-sm); } .gab-quickgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .gab-quickcard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; text-align: center; } .gab-quickcard:hover { border-color: var(--gab-primary-600); } .gab-quickcard-icon { font-size: 22px; color: var(--gab-primary-600); } .gab-quickcard-label { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-800); } .gab-quickbox { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: var(--gab-gray-50); } .gab-quickbox-title { font-size: var(--gab-text-sm); font-weight: 800; margin-bottom: 12px; } .gab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* FAQ */ .gab-faq { display: flex; flex-direction: column; gap: 10px; } .gab-faq-item { border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; overflow: hidden; } .gab-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 16px 18px; border: 0; background: transparent; font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-900); cursor: pointer; text-align: start; } .gab-faq-q-icon { color: var(--gab-gray-400); transition: transform .2s; } .gab-faq-item.is-open .gab-faq-q-icon { transform: rotate(180deg); } .gab-faq-a { display: none; padding: 0 18px 16px; color: var(--gab-gray-600); font-size: var(--gab-text-sm); line-height: 1.8; } .gab-faq-item.is-open .gab-faq-a { display: block; } .hicm-faq-start { text-align: center; } /* 고객센터/문의 */ .gab-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gab-contact-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 20px; background: #fff; text-align: center; } .gab-contact-icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 14px; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 22px; } .gab-contact-icon--chat { background: #EBF2FE; color: var(--gab-info); } .gab-contact-icon--mail { background: #EAF7EF; color: var(--gab-success); } .gab-contact-label { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-500); } .gab-contact-value { font-size: var(--gab-text-lg); font-weight: 800; margin-top: 4px; } .gab-contact-sub { font-size: var(--gab-text-xs); color: var(--gab-gray-400); margin-top: 4px; } .gab-contact-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; } .gab-contact-form { border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 24px; background: #fff; } .gab-contact-buttons { display: flex; gap: 10px; margin-top: 18px; } .gab-contact-buttons > * { flex: 1; } .gab-contact-service-note { font-size: var(--gab-text-xs); color: var(--gab-gray-400); margin-top: 10px; text-align: center; } .gab-support-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gab-gray-100); } .gab-support-item-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gab-support-item-label { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-support-item-value { font-weight: 700; font-size: var(--gab-text-sm); } .gab-support-hours { font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .gab-support-head { margin-bottom: 16px; } .gab-support-name { font-weight: 800; } /* 공지/매거진 */ .gab-notice-list { border-top: 1px solid var(--gab-gray-200); } .gab-notice-row { display: flex; align-items: center; gap: 14px; padding: 16px 6px; border-bottom: 1px solid var(--gab-gray-100); } .gab-notice-row:hover { background: var(--gab-gray-50); } .gab-notice-num { width: 44px; text-align: center; color: var(--gab-gray-300); font-weight: 700; flex-shrink: 0; } .gab-notice-title { flex: 1; font-weight: 700; color: var(--gab-gray-900); } .gab-notice-date { font-size: var(--gab-text-xs); color: var(--gab-gray-400); white-space: nowrap; } .gab-mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gab-mag-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; overflow: hidden; background: #fff; transition: var(--gab-transition-fast); } .gab-mag-card:hover { box-shadow: var(--gab-shadow-md); transform: translateY(-2px); } .gab-mag-card-thumb { aspect-ratio: 16/9; background: var(--gab-gray-100); overflow: hidden; } .gab-mag-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .gab-mag-card-body { padding: 16px; } .gab-mag-card-title { font-size: var(--gab-text-md); font-weight: 800; margin: 8px 0 6px; line-height: 1.4; } .gab-mag-card-excerpt { font-size: var(--gab-text-sm); color: var(--gab-gray-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gab-mag-card-meta { display: flex; gap: 8px; margin-top: 10px; font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-mag-card-hot { color: var(--gab-primary-600); } .gab-mag-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .gab-mag-news { margin-top: 40px; padding: 26px; border-radius: 16px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); text-align: center; } .gab-mag-news-form { display: flex; gap: 8px; max-width: 420px; margin: 14px auto 0; } .gab-article { max-width: 760px; margin-inline: auto; } .gab-article-header { margin-bottom: 24px; } .gab-article-cat { margin-bottom: 10px; } .gab-article-title { font-size: var(--gab-text-3xl); margin: 0 0 10px; } .gab-article-meta { display: flex; gap: 12px; font-size: var(--gab-text-sm); color: var(--gab-gray-400); } .gab-article-content { font-size: var(--gab-text-md); line-height: 1.9; color: var(--gab-gray-700); } .gab-article-content h2 { margin-top: 32px; } .gab-article-content img { border-radius: 12px; } .gab-article-back { margin-top: 32px; } .gab-legal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .gab-legal-content { max-width: 820px; } .gab-legal-section { margin-bottom: 28px; } .gab-legal-updated { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } /* 채용 */ .gab-careers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gab-career-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 20px; background: #fff; } .gab-career-card:hover { border-color: var(--gab-primary-600); } .gab-career-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; } .gab-career-title { font-size: var(--gab-text-md); font-weight: 800; margin: 0 0 6px; } .gab-career-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } /* 404 */ .gab-page-404 { text-align: center; padding-block: 80px; } .gab-page-404 h1 { font-size: 72px; margin: 0; color: var(--gab-gray-200); } /* 차량구매 요청 */ .gab-buyreq-hero { background: var(--gab-gray-900); color: #fff; } .gab-buyreq-hero .gab-page-hero-title { color: #fff; } .gab-buyreq-hero .gab-page-hero-desc { color: rgba(255,255,255,.65); } .gab-buyreq-form { border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 24px; background: #fff; } .gab-buyreq-mine-list { display: flex; flex-direction: column; gap: 10px; } .gab-buyreq-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; } .gab-buyreq-item-main { flex: 1; min-width: 0; font-weight: 700; } .gab-buyreq-item-meta { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } /* 차량구매: 구분 → 브랜드 → 모델 클릭 캐스케이드 */ .gab-breq-oseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gab-breq-oseg-btn { min-height: 46px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); cursor: pointer; transition: var(--gab-transition-fast); } .gab-breq-oseg-btn:hover { border-color: var(--gab-gray-400); color: var(--gab-gray-900); } .gab-breq-oseg-btn.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-breq-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 238px; overflow-y: auto; padding: 2px; scrollbar-width: thin; } .gab-breq-brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px 10px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--gab-gray-700); transition: var(--gab-transition-fast); } .gab-breq-brand:hover { border-color: var(--gab-gray-400); transform: translateY(-1px); } .gab-breq-brand.is-on { border-color: var(--gab-gray-900); background: var(--gab-gray-900); color: #fff; box-shadow: var(--gab-shadow-md); } .gab-breq-blogo { width: 34px; height: 34px; object-fit: contain; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; border-radius: 50%; } img.gab-breq-blogo { background: #fff; padding: 3px; } span.gab-breq-blogo { background: var(--gab-gray-100); color: var(--gab-gray-600); } .gab-breq-brand.is-on span.gab-breq-blogo { background: rgba(255,255,255,.14); color: #fff; } .gab-breq-blogo--other { background: var(--gab-gray-100); color: var(--gab-gray-500); } .gab-breq-bname { line-height: 1.25; text-align: center; word-break: keep-all; } .gab-breq-bcheck { position: absolute; top: 6px; inset-inline-end: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--gab-primary-600); color: #fff; font-size: 10px; display: none; align-items: center; justify-content: center; } .gab-breq-brand.is-on .gab-breq-bcheck { display: flex; } .gab-breq-brand-hint { margin: 8px 0 0; font-size: var(--gab-text-xs); color: var(--gab-gray-400); } /* 매물 등록 폼용 컴팩트 구분 세그먼트 */ .gab-reg-origin { gap: 6px; margin-bottom: 8px; } .gab-reg-origin .gab-breq-oseg-btn { min-height: 36px; font-size: 12.5px; border-radius: 999px; padding: 4px 10px; } .gab-quote-form { border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 24px; background: #fff; } .gab-quote-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .gab-quote-message { margin-top: 14px; } .hicm-quote-submit-wrap { margin-top: 18px; } .hicm-quote-types { display: flex; flex-wrap: wrap; gap: 8px; } .hicm-platform-quote { max-width: 720px; margin-inline: auto; } /* 플로팅 문의 버튼 */ .hicm-platform-float { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: var(--gab-z-fixed); } .hicm-float-inquiry { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--gab-primary-600); color: #fff; font-weight: 800; font-size: var(--gab-text-sm); cursor: pointer; box-shadow: var(--gab-shadow-lg); } .hicm-float-inquiry:hover { background: var(--gab-primary-700); } /* 부품/수출 안내 */ .gab-parts-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 24px; } .gab-parts-step { text-align: center; padding: 18px 12px; border: 1px solid var(--gab-gray-200); border-radius: 12px; } .gab-parts-step-no { width: 28px; height: 28px; margin: 0 auto 8px; border-radius: 50%; background: var(--gab-gray-900); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .gab-parts-step-ic { font-size: 20px; color: var(--gab-primary-600); } .gab-parts-form-wrap { border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 24px; background: #fff; } .gab-parts-form-title { font-size: var(--gab-text-xl); margin: 0 0 16px; } .gab-parts-field { margin-bottom: 14px; } .gab-parts-form-sub { font-size: var(--gab-text-sm); color: var(--gab-gray-500); margin: 0 0 18px; } .gab-export-rows { border: 1px solid var(--gab-gray-200); border-radius: 12px; overflow: hidden; } .gab-export-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gab-gray-100); font-size: var(--gab-text-sm); } .gab-export-row:last-child { border-bottom: 0; } .gab-export-k { color: var(--gab-gray-400); font-weight: 600; } .gab-export-v { font-weight: 700; text-align: end; } .gab-export-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } .gab-export-ok { color: var(--gab-success); } .gab-export-cta { margin-top: 14px; } /* 비교 (레거시) */ .gab-compare-scroll { overflow-x: auto; } .gab-compare-table { min-width: 720px; width: 100%; border-collapse: collapse; } .gab-compare-table th, .gab-compare-table td { padding: 12px; border: 1px solid var(--gab-gray-100); text-align: center; font-size: var(--gab-text-sm); } .gab-compare-col--empty { color: var(--gab-gray-300); } .gab-compare-val--price { font-weight: 800; color: var(--gab-primary-600); } .gab-compare-tr--hl { background: var(--gab-gray-50); } .gab-compare-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; } .gab-compare-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .gab-compare-title { margin: 0; } /* 프로필/설정 */ .hicm-profile-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .hicm-profile-settings, .hicm-password-panel { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 20px; background: #fff; } .hicm-profile-actions { display: flex; gap: 10px; margin-top: 18px; } .hicm-profile-address { margin-top: 14px; } .hicm-notify-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gab-gray-100); } .hicm-notify-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-500); display: flex; align-items: center; justify-content: center; } .hicm-notify-settings { margin-inline-start: auto; } .hicm-notify-row > div { flex: 1; } /* 판매 등록 미리보기 */ .gab-preview-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; overflow: hidden; background: #fff; } .gab-preview-img { aspect-ratio: 4/3; background: var(--gab-gray-100); display: flex; align-items: center; justify-content: center; color: var(--gab-gray-300); font-size: 36px; } .gab-preview-img img { width: 100%; height: 100%; object-fit: cover; } .gab-preview-body { padding: 14px; } .gab-preview-title { font-weight: 800; } .gab-preview-meta { font-size: var(--gab-text-xs); color: var(--gab-gray-400); margin-top: 4px; } .gab-preview-price { margin-top: 8px; font-weight: 800; color: var(--gab-primary-600); } .gab-preview-label { font-size: 11px; color: var(--gab-gray-400); } /* 결과/성공 화면 */ .gab-result { text-align: center; padding: 48px 20px; } .gab-result-icon { font-size: 52px; margin-bottom: 14px; } .gab-result-title { font-size: var(--gab-text-2xl); margin: 0 0 8px; } .gab-result-desc { color: var(--gab-gray-500); } /* 딜러 디렉토리/프로필 */ .gab-dealer-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gab-broker-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 20px; background: #fff; text-align: center; } .gab-dealer-name { font-weight: 800; } .gab-dealer-daily, .gab-dealer-total { font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .gab-dealer-expires, .gab-dealer-uid { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-dpro-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .gab-dpro-greeting { font-size: var(--gab-text-2xl); margin: 0; } .gab-dpro-hello { color: var(--gab-gray-500); } .gab-dpro-date { font-size: var(--gab-text-sm); color: var(--gab-gray-400); } .gab-dpro-cta { display: flex; gap: 10px; flex-wrap: wrap; } .gab-dealer-save { margin-top: 16px; } .gab-drpane { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; } .gab-drinfo { display: flex; justify-content: space-between; padding-block: 8px; border-bottom: 1px solid var(--gab-gray-100); font-size: var(--gab-text-sm); } .gab-drinfo-k { color: var(--gab-gray-400); } .gab-drinfo-v { font-weight: 700; } .gab-dract { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* 이용방법 플로우(페이지) */ .gab-bis-flow { display: flex; align-items: flex-start; gap: 10px; } .gab-bis-step { flex: 1; text-align: center; } .gab-bis-step-ic { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 24px; } .gab-bis-step-no { font-size: 11px; font-weight: 800; color: var(--gab-gray-400); } .gab-bis-step-name { font-weight: 800; margin-top: 4px; } .gab-bis-step-desc { font-size: var(--gab-text-sm); color: var(--gab-gray-500); margin-top: 4px; } .gab-bis-arrow { align-self: center; color: var(--gab-gray-300); font-size: 18px; } .gab-bis-banner { padding: 26px; border-radius: 16px; background: var(--gab-gray-900); color: #fff; text-align: center; } .gab-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gab-how-inner { max-width: 860px; margin-inline: auto; } /* 성능점검 리포트 카드 */ .gab-report-grade-info { flex: 1; } .gab-review-rows { display: flex; flex-direction: column; } .gab-review-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gab-gray-100); font-size: var(--gab-text-sm); } .gab-review-row-icon { color: var(--gab-success); } .gab-review-row-label { flex: 1; color: var(--gab-gray-500); } .gab-review-row-value { font-weight: 700; } .gab-review-notes { display: flex; gap: 8px; padding: 12px; border-radius: 10px; background: var(--gab-gray-50); font-size: var(--gab-text-sm); color: var(--gab-gray-600); margin-top: 12px; } .gab-review-notes-icon { color: var(--gab-info); } /* 편집 화면 */ .hicm-edit-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .hicm-edit-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; margin-bottom: 14px; } .hicm-edit-photos, .hicm-edit-new-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .hicm-edit-no-photo { grid-column: 1 / -1; text-align: center; color: var(--gab-gray-400); padding: 20px; } .hicm-edit-price { font-weight: 800; color: var(--gab-primary-600); } .hicm-edit-meta { font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .hicm-edit-submit { width: 100%; margin-top: 14px; } .hicm-edit-lang { display: flex; gap: 8px; } .hicm-listing-edit { min-width: 0; } /* 관리자 미디어/애널리틱스 */ .hicm-admin-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .hicm-admin-media-review { border: 1px solid var(--gab-gray-200); border-radius: 12px; overflow: hidden; } .hicm-admin-media-actions { display: flex; gap: 6px; padding: 8px; } .hicm-admin-media-confirm { font-size: var(--gab-text-xs); color: var(--gab-gray-400); padding: 0 8px 8px; } .hicm-analytics-card { border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 18px; background: #fff; margin-bottom: 14px; } .hicm-analytics-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; } .hicm-analytics-day { flex: 1; background: var(--gab-primary-200); border-radius: 4px 4px 0 0; min-height: 4px; } .hicm-analytics-top { display: flex; flex-direction: column; gap: 8px; } .hicm-quality-task-list { display: flex; flex-direction: column; gap: 8px; } /* 캐릭터 패널(남은 안내 영역) */ .hicm-character-panel, .hicm-form-companion { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--gab-gray-200); border-radius: 14px; background: var(--gab-gray-50); } .hicm-character-copy { flex: 1; } .hicm-character-kicker { font-size: 11px; font-weight: 800; color: var(--gab-primary-600); text-transform: uppercase; } .hicm-character-points, .hicm-form-companion-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .hicm-character-tags { display: flex; flex-wrap: wrap; gap: 6px; } .hicm-character-strip { display: flex; gap: 10px; overflow-x: auto; padding-block: 10px; } .hicm-generated-mascot, .hicm-locale-character { max-width: 72px; height: auto; object-fit: contain; } .hicm-dealer-hero-character { max-width: 110px; } .hicm-dealer-hero-copy { flex: 1; } .gab-safety-mascot { max-width: 64px; } .hicm-reglang-character, .hicm-verification-character, .hicm-profile-character, .hicm-my-welcome-character, .hicm-my-process-character, .hicm-type-character, .hicm-auth-mobile-character { max-width: 84px; } .hicm-auth-character { max-width: 300px; margin-inline: auto; } .hicm-auth-character-img, .hicm-auth-mobile-character-img { max-width: 100%; } .hicm-auth-character-note { font-size: var(--gab-text-xs); color: rgba(255,255,255,.6); flex-wrap: wrap; row-gap: 2px; } .hicm-auth-character-note b { white-space: nowrap; font-weight: 700; } /* ===== 24. 모바일 (핵심 — 768px 이하 우선) ===== */ @media (max-width: 1024px) { .gab-cars-grid, .gab-reco-grid { grid-template-columns: repeat(2, 1fr); } .gab-astat-row--6 { grid-template-columns: repeat(3, 1fr); } .gab-mega-grid { grid-template-columns: repeat(4, 1fr); } .gab-hx-makes-grid { grid-template-columns: repeat(4, 1fr); } .gab-mkpick-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .gab-container { padding-inline: 16px; } .gab-section { padding-block: 40px; } /* 헤더: 상단띠 숨김, 버거+로고+아이콘만 */ .gab-top-bar { display: none; } .gab-burger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .gab-main-header-inner { min-height: 56px; gap: 10px; } .gab-header-search { display: none; } .gab-header-cta .gab-btn-primary { display: none; } .gab-nav-bar { display: none; } .gab-logo-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; } .gab-logo-name { font-size: 16px; } .gab-logo-tagline { display: none; } .gab-tabbar { display: flex; } body { padding-bottom: 64px; } body.gab-page-admin, body.gab-page-auth, body.gab-page-login, body.gab-page-register { padding-bottom: 0; } body.gab-page-admin .gab-tabbar { display: none; } .hicm-platform-float { bottom: 76px; } /* 히어로 */ .gab-hx-inner { padding-block: 28px 32px; } .gab-hx-title { font-size: 26px; } .hicm-intent-rail { grid-template-columns: 1fr; gap: 8px; } .hicm-intent { padding: 12px 14px; } .gab-hx-layout { grid-template-columns: 1fr; gap: 18px; } .gab-hx-find { padding: 16px; } .gab-hx-search-primary { grid-template-columns: 1fr; gap: 10px; } .gab-hx-makes-grid { grid-template-columns: repeat(3, 1fr); } .gab-hx-assets { display: none; } .gab-hx-body-links a { width: 72px; } .gab-hx-body-links img { width: 72px; height: 48px; } /* 브랜드 픽커: 1열, 브랜드 목록 가로 스크롤 */ .gab-mkpick { grid-template-columns: 1fr; } .gab-mkpick-brands { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 6px; } .gab-mkpick-brand { flex: 0 0 auto; border: 1px solid var(--gab-gray-200); } .gab-mkpick-bcar { display: none; } .gab-mkpick-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .gab-mkpick-model { padding: 8px; } .gab-mkpick-mico { height: 48px; } /* 그리드 전반 */ .gab-aw-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding-block: 14px; } .gab-cars-grid, .gab-reco-grid { grid-template-columns: 1fr; gap: 14px; } .gab-cars-grid--m2, .gab-cars-grid.gab-cars-grid-3 { grid-template-columns: 1fr; } .gab-proof-grid { grid-template-columns: 1fr; } .gab-how-steps { grid-template-columns: 1fr; gap: 10px; } .gab-values, .gab-quickgrid { grid-template-columns: repeat(2, 1fr); } .gab-contact-grid { grid-template-columns: 1fr; } .gab-contact-row { grid-template-columns: 1fr; } .gab-mag-grid, .gab-careers-grid, .gab-dealer-directory-grid { grid-template-columns: 1fr; } .gab-steps { grid-template-columns: 1fr; } .gab-bis-flow { flex-direction: column; align-items: stretch; } .gab-bis-arrow { transform: rotate(90deg); text-align: center; } .gab-parts-steps { grid-template-columns: repeat(2, 1fr); } .gab-type-grid { grid-template-columns: 1fr; } .gab-reglang-grid { grid-template-columns: repeat(3, 1fr); } .gab-form-grid, .gab-contact-form-grid, .gab-reg-form-grid, .gab-modal-grid { grid-template-columns: 1fr; } .gab-exprofile-grid { grid-template-columns: 1fr; } .hicm-profile-layout, .hicm-verification-layout, .hicm-edit-layout { grid-template-columns: 1fr; } .hicm-my-quick-grid, .hicm-my-summary { grid-template-columns: repeat(2, 1fr); } .hicm-my-panels { grid-template-columns: 1fr; } .hicm-inquiry-kpis { grid-template-columns: repeat(2, 1fr); } .gab-wallet-info { grid-template-columns: 1fr; } .gab-keyspecs { grid-template-columns: 1fr 1fr; } .gab-spec-grid { grid-template-columns: 1fr; } /* 목록: 필터 → 바텀시트 */ .gab-list-layout, .gab-listing { grid-template-columns: 1fr; } .gab-filter-mtoggle { display: flex; } .gab-filter-sidebar { position: fixed; inset: auto 0 0 0; top: auto; z-index: var(--gab-z-modal); max-height: 82vh; border-radius: 18px 18px 0 0; border: 0; box-shadow: var(--gab-shadow-2xl); transform: translateY(105%); transition: transform .3s ease; display: block; } .gab-filter-sidebar.is-open { transform: none; } .gab-filter-sheet-close { display: flex; position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--gab-gray-100); align-items: center; justify-content: center; cursor: pointer; } .gab-filter-sheet-foot { display: flex; gap: 10px; padding-top: 14px; position: sticky; bottom: -18px; background: #fff; padding-bottom: 18px; } .gab-filter-sheet-apply { display: block; flex: 1; min-height: 46px; border: 0; border-radius: 12px; background: var(--gab-primary-600); color: #fff; font-weight: 800; cursor: pointer; } .gab-qbar-view { display: none; } /* 상세 */ .gab-detail-layout { grid-template-columns: 1fr; } .gab-detail-sidebar { position: static; } .gab-detail-mobile-price, .gab-detail-mobile-meta, .gab-detail-mobile-specs, .gab-detail-mobile-summary { display: block; } .gab-mbar { display: flex; } .gab-gallery-nav { display: none; } .gab-price-card-value, .gab-detail-price-value { font-size: 26px; } .gab-detail-tabs { margin-top: 20px; } /* 인증 */ .gab-auth, .gab-auth-form-box { grid-template-columns: 1fr; min-height: auto; } .gab-auth-visual, .gab-auth-form-side, .gab-reg-side { display: none; } .gab-auth-form, .gab-reg-body { padding: 28px 16px; } .gab-auth-card, .gab-reg-card { padding: 22px; } .gab-reg-layout { grid-template-columns: 1fr; } /* 마이/대시보드: 사이드바 상단 스택 */ .gab-members-layout, .gab-my { grid-template-columns: 1fr; } .gab-my-sidebar { position: static; } .gab-my-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; } .gab-my-nav-item { flex: 0 0 auto; border: 1px solid var(--gab-gray-200); } .gab-my-nav-item.is-on { border-color: var(--gab-primary-200); } .gab-my-profile { padding-bottom: 10px; } .gab-dash { grid-template-columns: 1fr; } .gab-dash-side { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: auto; width: min(300px, 86vw); z-index: var(--gab-z-modal); transform: translateX(-105%); transition: transform .3s ease; box-shadow: var(--gab-shadow-2xl); } [dir="rtl"] .gab-dash-side { transform: translateX(105%); } .gab-dash-side.is-open { transform: none; } .gab-dash-main { padding: 16px 16px 48px; } .gab-dash-burger { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--gab-gray-200); border-radius: 10px; background: #fff; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } .gab-dash-mbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .gab-dash-mbar-title { font-weight: 800; flex: 1; } .gab-dash-close { display: inline-flex; } .gab-dash-stats, .hicm-dcc-kpis, .gab-astat-row, .gab-astat-row--6 { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hicm-dcc-grid, .hicm-dcc-grid--operations { grid-template-columns: 1fr; } .gab-dash-header { flex-direction: column; align-items: flex-start; } /* 테이블: 카드형 스크롤 유지 */ .gab-table th, .gab-table td, .gab-atable th, .gab-atable td { padding: 10px; white-space: nowrap; } /* 업로드 */ .gab-upload-grid { grid-template-columns: repeat(3, 1fr); } .hicm-edit-photos, .hicm-admin-media-grid { grid-template-columns: repeat(2, 1fr); } /* 푸터 */ .gab-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; padding-block: 32px; } .gab-footer-news, .gab-footer-global { flex-direction: column; align-items: flex-start; gap: 14px; } .gab-sitemap { grid-template-columns: 1fr 1fr; } .gab-footer-bottom { flex-direction: column; align-items: flex-start; } .gab-mega-grid { grid-template-columns: repeat(3, 1fr); } /* CTA */ .gab-cta-title { font-size: var(--gab-text-2xl); } .gab-cta-buttons { flex-direction: column; } .gab-cta-buttons > * { width: 100%; } .gab-btn-lg { min-height: 48px; font-size: var(--gab-text-md); } } @media (max-width: 480px) { .gab-hx-makes-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .gab-mkpick-grid { grid-template-columns: repeat(2, 1fr); } .gab-aw-stats-grid { grid-template-columns: 1fr 1fr; } .hicm-my-quick-grid, .hicm-my-summary, .hicm-inquiry-kpis, .gab-dash-stats, .hicm-dcc-kpis, .gab-astat-row { grid-template-columns: 1fr 1fr; } .gab-quickgrid { grid-template-columns: 1fr 1fr; } .gab-upload-grid { grid-template-columns: repeat(2, 1fr); } .gab-footer-grid { grid-template-columns: 1fr; } .gab-keyspecs { grid-template-columns: 1fr; } .gab-contact-buttons, .gab-reg-actions, .gab-modal-foot, .gab-detail-actions { flex-direction: column; } .gab-pagination { gap: 4px; } .gab-page-btn { min-width: 36px; height: 36px; padding: 0 8px; } } /* ===== 25. 프린트 ===== */ @media print { .gab-site-header, .gab-footer, .gab-tabbar, .gab-mbar, .hicm-platform-float, .gab-filter-mtoggle { display: none !important; } body { padding-bottom: 0; } } /* ===== 26. 엔카식 드릴다운 (홈 히어로 검색) ===== */ .gab-encar { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 16px; box-shadow: var(--gab-shadow); padding: 20px; margin-top: 28px; } .gab-encar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .gab-encar-head strong { font-size: var(--gab-text-lg); display: block; } .gab-encar-head span { font-size: var(--gab-text-xs); color: var(--gab-gray-400); } .gab-encar-head a { font-size: var(--gab-text-sm); font-weight: 700; white-space: nowrap; } .gab-encar-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .gab-encar-tab { padding: 9px 22px; border-radius: 999px; border: 1px solid var(--gab-gray-300); background: #fff; font-size: var(--gab-text-md); font-weight: 800; color: var(--gab-gray-600); cursor: pointer; transition: var(--gab-transition-fast); } .gab-encar-tab:hover { border-color: var(--gab-gray-900); color: var(--gab-gray-900); } .gab-encar-tab.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-encar-pane { display: none; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; } .gab-encar-pane.is-on { display: grid; } .gab-encar-brands { max-height: 470px; } .gab-encar-models { min-width: 0; } @media (max-width: 768px) { .gab-encar { padding: 14px; margin-top: 20px; } .gab-encar-tabs { margin-bottom: 12px; } .gab-encar-tab { flex: 1; padding: 10px; } .gab-encar-pane { grid-template-columns: 1fr; gap: 10px; } .gab-encar-brands { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 6px; } .gab-encar-brands .gab-mkpick-brand { flex: 0 0 auto; border: 1px solid var(--gab-gray-200); } } /* 네비 보조 라벨 */ .gab-nav-item small { font-size: 10px; font-weight: 600; color: var(--gab-gray-400); } /* ================================================================ * 27. v166 수정 팩 — 헤드리스 렌더링 실측 기반 * ================================================================ */ /* --- 로그인/인증: 좌측 다크 브랜딩 + 우측 화이트 폼 --- */ .gab-auth { display: grid; grid-template-columns: minmax(380px, 42%) 1fr; min-height: 100vh; background: #fff; } .gab-auth-brand { background: var(--gab-gray-900); color: #fff; display: block; padding: 0; } .gab-auth-brand-inner { display: flex; flex-direction: column; height: 100%; padding: 44px 52px; } .gab-auth-logo { display: flex; align-items: center; gap: 10px; } .gab-auth-logo-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gab-grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .gab-auth-logo-text { display: flex; flex-direction: column; line-height: 1.15; text-align: start; } .gab-auth-logo-name { font-size: 20px; font-weight: 800; color: #fff; } .gab-auth-logo-name .accent { color: var(--gab-primary-400); } .gab-auth-logo-tagline { font-size: 11px; color: rgba(255,255,255,.5); } .gab-auth-headline { margin-top: 52px; } .gab-auth-headline h1 { color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.25; margin: 0; } .gab-auth-headline h1 .accent { color: var(--gab-primary-400); } .gab-auth-headline p { color: rgba(255,255,255,.6); margin: 14px 0 0; max-width: 420px; font-size: 15px; } .gab-auth-visual { margin-top: 36px; padding: 0; background: transparent; text-align: center; } .gab-auth-visual img, .hicm-auth-character-img { max-width: 300px; width: 100%; height: auto; } .hicm-auth-character-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.6); } .gab-auth-langs { margin-top: auto; padding-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } .gab-auth-langs a, a.gab-auth-lang { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; } .gab-auth-langs a:hover, a.gab-auth-lang:hover { border-color: #fff; color: #fff; } .gab-auth-langs a.is-active, a.gab-auth-lang.is-active { background: #fff; border-color: #fff; color: var(--gab-gray-900); } .gab-auth-copyright { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.4); text-align: start; } .gab-auth-form-side { background: #fff; display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .gab-auth-form-box { display: block; width: 100%; max-width: 420px; min-height: 0; background: transparent; border: 0; box-shadow: none; padding: 0; } .hicm-auth-mobile-character { display: none; } .gab-auth-badge { background: var(--gab-primary-50); border: 1px solid var(--gab-primary-200); color: var(--gab-primary-700); } .gab-auth-title { font-size: 26px; margin: 14px 0 6px; text-align: start; } .gab-auth-subtitle { text-align: start; color: var(--gab-gray-500); margin: 0 0 20px; font-size: 14px; } .gab-auth-signup { margin-top: 22px; text-align: center; font-size: 14px; color: var(--gab-gray-500); } .gab-auth-signup a { font-weight: 800; } .gab-auth-ssl { justify-content: center; margin-top: 16px; color: var(--gab-gray-400); } .gab-auth-error { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; } .gab-auth-options { margin: 4px 0 18px; } @media (max-width: 900px) { .gab-auth { grid-template-columns: 1fr; min-height: 100vh; } .gab-auth-brand { display: none; } .gab-auth-form-side { display: flex; padding: 40px 18px; } .hicm-auth-mobile-character { display: block; text-align: center; margin-bottom: 6px; } .hicm-auth-mobile-character img { max-width: 76px; } } /* --- 페이지 히어로(비주얼형): 텍스트 + 이미지 2열 --- */ .gab-page-hero--visual .gab-page-hero-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; max-width: 1200px; margin-inline: auto; padding: 48px 20px; } .gab-page-hero--visual .gab-page-hero-copy { min-width: 0; } .gab-page-hero-media { margin: 0; } .gab-page-hero-media img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: var(--gab-shadow-lg); } .gab-page-hero--editorial .gab-page-hero-inner { max-width: 760px; margin-inline: auto; padding: 48px 20px; } .gab-buyreq-hero { background: var(--gab-gray-900); border-bottom: 0; } .gab-buyreq-hero .gab-page-hero-title { color: #fff; } .gab-buyreq-hero .gab-page-hero-desc { color: rgba(255,255,255,.65); } @media (max-width: 900px) { .gab-page-hero--visual .gab-page-hero-inner { grid-template-columns: 1fr; gap: 22px; padding-block: 32px; } } /* --- 스텝 카드: 다크 섹션 전용이던 스타일 스코프 교정 --- */ .gab-how-step { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; } .gab-how-step-title { color: var(--gab-gray-900); } .gab-how-step-desc { color: var(--gab-gray-500); } .gab-how-section .gab-how-step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } .gab-how-section .gab-how-step-title { color: #fff; } .gab-how-section .gab-how-step-desc { color: rgba(255,255,255,.6); } /* --- 모바일 가로 오버플로 수정: 그리드 자식 min-width 해제 --- */ .gab-encar-brands, .gab-encar-models, .gab-mkpick-brands, .gab-mkpick-models, .gab-mkpick { min-width: 0; } .gab-mkpick-panel, .gab-hx-find, .gab-hx-inner { min-width: 0; } /* ===== 28. v167 — 모바일 탭 피드백 + 중개 플랫폼 폴리시 ===== */ /* 브랜드 칩 터치 피드백 강화 */ .gab-mkpick-brand { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .gab-mkpick-brand:active { background: var(--gab-gray-100); } .gab-mkpick-brand.is-on { background: var(--gab-gray-900); border-color: var(--gab-gray-900); } .gab-mkpick-brand.is-on .gab-mkpick-bname { color: #fff; } .gab-mkpick-brand.is-on .gab-mkpick-bcar { color: #fff; } .gab-mkpick-brand.is-on .hicm-brand-mark--mono { background: rgba(255,255,255,.15); border-color: transparent; color: #fff; } .gab-mkpick-panel { animation: gab-fade-up .25s ease; } .gab-encar-brands { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* 대시보드 카드 폴리시 */ .gab-my-panel, .gab-dash-card, .hicm-my-panel, .hicm-dcc-card, .hicm-inventory-panel, .gab-track-card, .hicm-inquiry-panel, .hicm-inquiry-detail-card, .gab-docup, .gab-verification-panel { box-shadow: var(--gab-shadow-sm); } .gab-my-nav-item { border-radius: 10px; } .gab-my-nav-item.is-on { box-shadow: inset 3px 0 0 var(--gab-primary-600); } /* 인증 페이지 카드 폴리시 */ .gab-auth-form-box .gab-auth-badge { letter-spacing: .02em; } .gab-type-card { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .gab-type-card:hover { transform: translateY(-2px); box-shadow: var(--gab-shadow-md); } /* ===== 29. v167 — 마이/딜러 대시보드 폴리시 ===== */ .hicm-my-welcome h1 { color: #fff; margin: 8px 0 10px; font-size: clamp(22px, 2.6vw, 30px); } .hicm-my-welcome p { color: rgba(255,255,255,.65); margin: 0 0 16px; } .hicm-my-welcome-character { flex-shrink: 0; align-self: center; } .hicm-my-welcome-character img { max-width: 150px; height: auto; } .hicm-my-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hicm-my-panel-head span { font-size: 12px; font-weight: 800; color: var(--gab-gray-400); } .hicm-my-panel-head h2 { margin: 2px 0 0; font-size: 18px; } .hicm-my-panel-face { width: 48px; height: 48px; object-fit: contain; } .hicm-my-summary-card small { color: var(--gab-gray-400); font-size: 12px; } .hicm-my-summary-card > i { color: var(--gab-gray-300); } /* 빠른 메뉴 카드 */ .hicm-my-quick-grid a { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--gab-gray-200); border-radius: 12px; background: #fff; } .hicm-my-quick-grid a:hover { border-color: var(--gab-primary-600); box-shadow: var(--gab-shadow-sm); transform: translateY(-1px); } .hicm-my-quick-grid a > i { font-size: 20px; color: var(--gab-primary-600); flex-shrink: 0; } .hicm-my-quick-grid a span b { display: block; font-size: 14px; color: var(--gab-gray-900); } .hicm-my-quick-grid a span small { font-size: 12px; color: var(--gab-gray-400); } /* 중개 이용 흐름 카드 */ .hicm-my-process { display: flex; gap: 18px; align-items: center; } .hicm-my-process-character { flex-shrink: 0; max-width: 110px; } .hicm-my-process-character img { max-width: 110px; height: auto; } .hicm-my-process span { font-size: 12px; font-weight: 800; color: var(--gab-primary-600); } .hicm-my-process h2 { margin: 4px 0 0; font-size: 18px; } .hicm-my-process ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .hicm-my-process ol li { display: flex; align-items: center; gap: 10px; } .hicm-my-process ol b { width: 26px; height: 26px; border-radius: 50%; background: var(--gab-primary-600); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hicm-my-process ol em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--gab-gray-700); } /* 사이드바 활성 상태 (템플릿은 is-active 사용) */ .gab-my-nav-item.is-active { background: var(--gab-primary-50); color: var(--gab-primary-700); box-shadow: inset 3px 0 0 var(--gab-primary-600); } .gab-my-nav-item.is-active i { color: var(--gab-primary-600); } @media (max-width: 768px) { .hicm-my-welcome { flex-direction: column; align-items: flex-start; } .hicm-my-welcome-character img { max-width: 88px; } .hicm-my-process { flex-direction: column; align-items: flex-start; } .gab-my-nav-item.is-active { box-shadow: inset 0 -3px 0 var(--gab-primary-600); } } /* --- 그리드 자식 min-width 보강. html/body overflow-x:clip 금지(세로 스크롤 사망) --- */ .gab-my-sidebar, .gab-my-content, .gab-dash-main, .gab-dash-side, .gab-members-layout > *, .hicm-my-welcome-copy { min-width: 0; } /* ===== 30. v167 — 딜러 SELLER OS BEM 패치 ===== */ .hicm-dcc-hero { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; } .hicm-dcc-hero__copy { min-width: 0; } .hicm-dcc-hero__title-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .hicm-dcc-hero__avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); } .hicm-dcc-hero__avatar img { width: 100%; height: 100%; object-fit: cover; } .hicm-dcc-hero h1 { color: #fff; margin: 0; font-size: clamp(22px, 2.4vw, 30px); } .hicm-dcc-hero p { color: rgba(255,255,255,.6); margin: 6px 0 0; } .hicm-dcc-tier { margin-top: 14px; } .hicm-dcc-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; } .hicm-dcc-hero .hicm-dcc-btn--ghost { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; } .hicm-dcc-hero .hicm-dcc-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; } /* KPI 카드 */ .hicm-dcc-kpi { display: flex; align-items: center; gap: 14px; } .hicm-dcc-kpi__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--gab-gray-100); color: var(--gab-gray-600); display: flex; align-items: center; justify-content: center; font-size: 19px; } .hicm-dcc-kpi--alert .hicm-dcc-kpi__icon { background: var(--gab-primary-50); color: var(--gab-primary-600); } .hicm-dcc-kpi__content { min-width: 0; } .hicm-dcc-kpi__content strong { display: block; font-size: 24px; font-weight: 800; color: var(--gab-gray-900); letter-spacing: -0.02em; } .hicm-dcc-kpi__content span { font-size: 13px; font-weight: 700; color: var(--gab-gray-500); } .hicm-dcc-kpi__content small { display: block; font-size: 11px; color: var(--gab-gray-400); } /* 카드 헤드/푸터/카운트 */ .hicm-dcc-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .hicm-dcc-card__head h2 { margin: 0; font-size: 17px; } .hicm-dcc-card__head p { margin: 4px 0 0; font-size: 13px; color: var(--gab-gray-400); } .hicm-dcc-card__count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--gab-gray-100); color: var(--gab-gray-600); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .hicm-dcc-card__count.is-alert { background: var(--gab-primary-600); color: #fff; } .hicm-dcc-card__footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gab-gray-100); } /* 태스크 */ .hicm-dcc-task { gap: 12px; padding: 12px; } .hicm-dcc-task__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-600); display: flex; align-items: center; justify-content: center; } .hicm-dcc-task--warn .hicm-dcc-task__icon, .hicm-dcc-task--alert .hicm-dcc-task__icon { background: var(--gab-primary-50); color: var(--gab-primary-600); } .hicm-dcc-task__copy { flex: 1; min-width: 0; } .hicm-dcc-task__copy b { display: block; font-size: 14px; } .hicm-dcc-task__copy span { font-size: 12px; color: var(--gab-gray-400); } .hicm-dcc-task__count { font-size: 18px; font-weight: 800; color: var(--gab-gray-900); } .hicm-dcc-task__go { color: var(--gab-gray-300); } /* 파이프라인·차트·용량 */ .hicm-dcc-pipe { gap: 10px; } .hicm-dcc-pipe__meta { display: flex; justify-content: space-between; flex: 1; font-size: 13px; font-weight: 600; } .hicm-dcc-pipe__track { flex: 2; height: 8px; border-radius: 999px; background: var(--gab-gray-100); overflow: hidden; } .hicm-dcc-pipe__track > span { display: block; height: 100%; background: var(--gab-primary-600); } .hicm-dcc-bars__columns { display: flex; align-items: flex-end; gap: 4px; height: 120px; } .hicm-dcc-bars__day { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 4px; background: var(--gab-primary-100); border-radius: 4px 4px 0 0; } .hicm-analytics-day__bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; } .hicm-dcc-capacity__head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 8px; } .hicm-dcc-capacity__row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 6px; } .hicm-dcc-capacity__track { flex: 1; height: 8px; border-radius: 999px; background: var(--gab-gray-100); overflow: hidden; } .hicm-dcc-capacity__track > span { display: block; height: 100%; background: var(--gab-info); } /* 빈 상태·캐릭터 크기 캡 */ .hicm-dcc-empty__visual img, .hicm-dcc-empty img, .hicm-inventory-empty img, .hicm-verify-empty img { max-width: 140px; height: auto; } .hicm-dcc-clear__icon { font-size: 28px; color: var(--gab-success); } .hicm-dcc-health-item__thumb { width: 56px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--gab-gray-100); } .hicm-dcc-health-item__main { flex: 1; min-width: 0; } .hicm-dcc-health-item__title { font-size: 13px; font-weight: 700; } .hicm-dcc-inquiry__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gab-gray-100); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gab-gray-500); flex-shrink: 0; } .hicm-dcc-inquiry__copy { flex: 1; min-width: 0; } .hicm-dcc-tools a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--gab-gray-200); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--gab-gray-700); } .hicm-dcc-tools a:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .hicm-dcc-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--gab-gray-100); color: var(--gab-gray-600); } .hicm-dcc-status--ok, .hicm-dcc-status--done { background: #EAF7EF; color: var(--gab-success); } .hicm-dcc-status--wait, .hicm-dcc-status--new { background: #FBF3E4; color: var(--gab-warning); } .hicm-dcc-status--alert, .hicm-dcc-status--over { background: var(--gab-primary-50); color: var(--gab-primary-700); } /* 대시보드 사이드바 닫기 버튼은 모바일 전용 */ .gab-dash-close { display: none; } @media (max-width: 768px) { .gab-dash-close { display: inline-flex; } } /* 폼 BEM */ .gab-field__label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; } .gab-field__req { color: var(--gab-primary-600); } .gab-avatar__verified { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gab-success); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; } .hicm-pagehead__eyebrow { font-size: 12px; font-weight: 800; color: var(--gab-primary-600); text-transform: uppercase; letter-spacing: .05em; } .hicm-inquiry-row__main { flex: 1; min-width: 0; } .hicm-inquiry-row__person { display: flex; align-items: center; gap: 10px; } .hicm-quality-task-list__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hicm-edit-submit__character { max-width: 72px; } /* --- 딜러 버튼 실제 클래스명(hicm-dcc-btn) 보정 --- */ .hicm-dcc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--gab-transition-fast); } .hicm-dcc-btn--primary { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; } .hicm-dcc-btn--primary:hover { background: var(--gab-primary-700); border-color: var(--gab-primary-700); color: #fff; } /* ===== 31. v168 — 폼 필드·레이아웃 표준 정립 ===== */ /* 페이지 제목 (딜러 공용 헤더) */ .gab-dpro-hello { font-size: 24px; font-weight: 800; color: var(--gab-gray-900); } .gab-dpro-date { font-size: 13px; color: var(--gab-gray-500); margin-top: 4px; } /* 매물 등록 레이아웃: 폼 넓게 + 미리보기 사이드 (차량목록 사이드바와 클래스 충돌 분리) — 기본 규칙은 16번 섹션 참조 */ .gab-listing-side { min-width: 0; position: sticky; top: 130px; } /* 필드 표준: 라벨 13px 볼드 + 입력 44px */ .gab-field { margin-bottom: 14px; min-width: 0; } .gab-field__label { display: block; font-size: 13px; font-weight: 700; color: var(--gab-gray-700); margin-bottom: 6px; } .gab-field__input { width: 100%; } .gab-form-grid { gap: 12px 14px; } /* 셀렉트: 템플릿 화살표 아이콘과 CSS 화살표 중복 제거 + 텍스트 말줄임 */ .gab-select-wrap { position: relative; } .gab-select-wrap .gab-select, .gab-select-wrap select { background-image: none; padding-inline-end: 36px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .gab-select-arrow { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); color: var(--gab-gray-400); pointer-events: none; font-size: 12px; } select.gab-field__input { line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* 업로드 드롭존: 등록/수정 폼에서는 와이드 */ .gab-listing .gab-upload, .hicm-edit-upload .gab-upload { aspect-ratio: auto; width: 100%; min-height: 150px; padding: 20px; gap: 8px; } .gab-listing .gab-upload-icon, .hicm-edit-upload .gab-upload-icon { font-size: 26px; } .gab-listing .gab-upload-text, .hicm-edit-upload .gab-upload-text { font-size: 14px; } /* 옵션 체크 칩 */ .gab-opts > div { margin-bottom: 12px; } .gab-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--gab-gray-300); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--gab-gray-700); cursor: pointer; transition: var(--gab-transition-fast); } .gab-opt:hover { border-color: var(--gab-primary-600); color: var(--gab-primary-600); } .gab-opt input[type="checkbox"] { display: none; } .gab-opt-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--gab-gray-300); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; flex-shrink: 0; } .gab-opt:has(input:checked) { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-opt:has(input:checked) .gab-opt-check { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; } /* 가격 행 */ .gab-price-field { display: flex; align-items: center; gap: 8px; } .gab-price-cur { font-weight: 800; color: var(--gab-gray-500); } /* 미리보기 카드 비율 */ .gab-preview-card .gab-preview-img { aspect-ratio: 4 / 3; } @media (max-width: 900px) { .gab-listing { grid-template-columns: 1fr; } .gab-listing-side { position: static; } } /* ================================================================ * 32. v169 — Modern UI Refresh (Bootstrap 5.3.8 프리미엄 키트 톤) * 채움형 필드 · 세그먼트 컨트롤 · 소프트 섀도 · 프레스 피드백 * ================================================================ */ :root { --gab-ring: 0 0 0 4px rgba(216, 52, 44, .12); --gab-field-bg: #F4F6F8; --gab-field-bg-hover: #EBEEF2; --gab-field-radius: 12px; --gab-btn-shadow: 0 1px 2px rgba(17, 19, 24, .06); } /* --- 32-1. 폼 필드: 채움형(회색 필드) + 포커스 링 --- */ input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], select, textarea, .gab-auth-input, .gab-modal-input, .gab-header-search-input, .gab-contact-textarea, .gab-price-input, .gab-msearch-input, .gab-select, .gab-pwd, .gab-field__input { min-height: 46px; padding: 11px 15px; background: var(--gab-field-bg); border: 1.5px solid transparent; border-radius: var(--gab-field-radius); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } input[type="text"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="url"]:hover, input[type="date"]:hover, select:hover, textarea:hover, .gab-select:hover, .gab-field__input:hover { background: var(--gab-field-bg-hover); } input:focus, select:focus, textarea:focus, .gab-auth-input:focus, .gab-modal-input:focus, .gab-msearch-input:focus, .gab-select:focus, .gab-field__input:focus { background: #fff; border-color: var(--gab-primary-500); box-shadow: var(--gab-ring); outline: none; } input:disabled, select:disabled, textarea:disabled { background: var(--gab-gray-100); color: var(--gab-gray-400); cursor: not-allowed; } textarea, .gab-contact-textarea { min-height: 130px; line-height: 1.6; } input::placeholder, textarea::placeholder { color: var(--gab-gray-400); font-weight: 400; } /* 셀렉트: 모던 쉐브론 (스트로크형) */ select, .gab-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-inline-end: 42px; cursor: pointer; } [dir="rtl"] select, [dir="rtl"] .gab-select { background-position: left 14px center; } /* 템플릿이 화살표 아이콘을 직접 그리는 래핑 셀렉트는 CSS 화살표 제거 */ .gab-select-wrap select, .gab-select-wrap .gab-select { background-image: none; } /* 체크박스·라디오: 브랜드 컬러 네이티브 */ input[type="checkbox"], input[type="radio"] { accent-color: var(--gab-primary-600); width: 17px; height: 17px; cursor: pointer; } /* 헤더 검색·드로어·모바일 검색의 물배경 입력은 채움 스타일 제외 */ .gab-header-search input, .gab-header-search-form input, .gab-msearch-input-wrap input, .gab-msearch-input, .gab-drawer-search input { background: transparent; border-color: transparent; box-shadow: none; min-height: 44px; } .gab-header-search input:hover, .gab-header-search input:focus, .gab-msearch-input-wrap input:hover, .gab-msearch-input-wrap input:focus, .gab-drawer-search input:hover, .gab-drawer-search input:focus { background: transparent; border-color: transparent; box-shadow: none; } .gab-header-search-form { border-radius: 999px; border-color: transparent; background: var(--gab-field-bg); transition: background .15s ease, box-shadow .15s ease; } .gab-header-search-form:focus-within { background: #fff; box-shadow: var(--gab-ring); border-color: var(--gab-primary-500); } .gab-header-search-btn { border-radius: 0; } .gab-msearch-input-wrap, .gab-drawer-search { border-color: transparent; background: var(--gab-field-bg); border-radius: 12px; } /* 다크 영역 입력 (푸터 등) */ .gab-footer input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; } .gab-footer input:hover { background: rgba(255,255,255,.12); } .gab-footer input::placeholder { color: rgba(255,255,255,.45); } .gab-footer input:focus { background: rgba(255,255,255,.12); border-color: var(--gab-primary-400); box-shadow: 0 0 0 4px rgba(255,255,255,.08); } /* 라벨 */ label, .gab-auth-label, .gab-modal-label, .gab-my-field-label, .gab-form-section-title, .gab-field__label { font-size: 13px; font-weight: 700; color: var(--gab-gray-600); letter-spacing: -0.01em; } /* --- 32-2. 칩: 볼더리스 채움형 --- */ .gab-fchip, .gab-filter-chip, .gab-chip, .gab-qchip, .gab-reject-chip, .gab-quote-chip, .gab-msearch-pop-kw, .gab-lang-tab, .gab-legal-tab, .gab-rv-tab, .gab-inv-tab, .gab-order-tab, .gab-sort-tab, .gab-docup-chip, .gab-password-tab, .gab-fm-fuel { padding: 8px 15px; border-color: transparent; background: var(--gab-gray-100); font-weight: 700; color: var(--gab-gray-600); } .gab-fchip:hover, .gab-filter-chip:hover, .gab-qchip:hover, .gab-quote-chip:hover, .gab-msearch-pop-kw:hover, .gab-lang-tab:hover, .gab-sort-tab:hover, .gab-docup-chip:hover, .gab-password-tab:hover { background: var(--gab-gray-200); border-color: transparent; color: var(--gab-gray-900); } .gab-fchip.is-on, .gab-filter-chip.is-on, .gab-qchip.is-on, .gab-quote-chip.is-on, .gab-lang-tab.is-on, .gab-legal-tab.is-active, .gab-rv-tab.is-active, .gab-inv-tab.is-active, .gab-order-tab.is-active, .gab-sort-tab.is-on, .gab-msearch-rchip, .gab-reject-chip:hover { background: var(--gab-gray-900); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(17, 19, 24, .18); } .gab-fchip.is-on:hover, .gab-qchip.is-on:hover { color: #fff; background: var(--gab-gray-800); } /* 옵션 체크 칩(매물 등록) 동일 톤 */ .gab-opt { border-color: transparent; background: var(--gab-gray-100); font-weight: 700; color: var(--gab-gray-600); } .gab-opt:hover { background: var(--gab-gray-200); border-color: transparent; color: var(--gab-gray-900); } .gab-opt:has(input:checked) { background: var(--gab-gray-900); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(17,19,24,.18); } /* --- 32-3. 세그먼트 컨트롤 (구분 탭·로그인 탭) --- */ .gab-breq-oseg, .hicm-login-tabs { background: var(--gab-gray-100); border-radius: 14px; padding: 4px; gap: 4px; } .hicm-login-tabs { display: flex; margin-bottom: 18px; } .hicm-login-tabs button { flex: 1; border: 0; } .gab-breq-oseg-btn, .hicm-login-tabs button { border: 0; border-radius: 10px; background: transparent; color: var(--gab-gray-500); font-weight: 700; } .gab-breq-oseg-btn:hover, .hicm-login-tabs button:hover { background: rgba(255,255,255,.6); color: var(--gab-gray-800); border-color: transparent; } .gab-breq-oseg-btn.is-on, .hicm-login-tabs button.is-active { background: #fff; color: var(--gab-gray-900); border-color: transparent; box-shadow: 0 1px 3px rgba(17, 19, 24, .12), 0 4px 10px rgba(17, 19, 24, .06); } /* 엔카 탭(홈 검색) — 세그먼트 톤 */ .gab-encar-tabs { background: var(--gab-gray-100); border-radius: 999px; padding: 4px; gap: 4px; display: inline-flex; } .gab-encar-tab { border: 0; border-radius: 999px; background: transparent; padding: 9px 24px; } .gab-encar-tab:hover { background: rgba(255,255,255,.65); color: var(--gab-gray-900); } .gab-encar-tab.is-on { background: #fff; border-color: transparent; color: var(--gab-gray-900); box-shadow: 0 1px 3px rgba(17,19,24,.14), 0 4px 10px rgba(17,19,24,.06); } .gab-hx-makes-tabs { background: var(--gab-gray-100); border-radius: 999px; padding: 4px; gap: 4px; display: inline-flex; } .gab-hx-mtab { border: 0; background: transparent; } .gab-hx-mtab.is-on { background: #fff; color: var(--gab-gray-900); box-shadow: 0 1px 3px rgba(17,19,24,.14); } /* --- 32-4. 버튼: 라운드·섀도·프레스 --- */ .gab-btn, .gab-btn-primary, .gab-btn-accent, .gab-btn-lg, .gab-btn--primary, .gab-btn--secondary, .gab-btn--outline, .gab-btn--ghost, .gab-btn--danger, .gab-btn-outline-white, .gab-contact-btn, .gab-contact-btn-primary, .gab-contact-btn-save, .gab-modal-submit, .gab-filter-apply, .gab-dcc-btn, .gab-quote-submit, .gab-parts-submit, .gab-auth-submit, .gab-fm-cta-btn, .gab-af-save, .gab-af-share, .hicm-dcc-btn, .gab-dash-hbtn, .gab-aact-btn { border-radius: 12px; transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .gab-btn:active, .gab-btn-primary:active, .gab-btn-accent:active, .gab-btn--primary:active, .gab-btn--secondary:active, .gab-btn--outline:active, .gab-modal-submit:active, .gab-parts-submit:active, .gab-auth-submit:active, .hicm-dcc-btn:active, .gab-dash-hbtn:active, .gab-quote-submit:active, .gab-fm-cta-btn:active { transform: scale(.97); } .gab-btn-primary, .gab-btn--primary, .gab-btn-accent, .gab-contact-btn-primary, .gab-modal-submit, .gab-auth-submit, .gab-fm-cta-btn, .gab-dcc-btn--primary, .gab-quote-submit, .gab-parts-submit, .hicm-dcc-btn--primary { box-shadow: 0 1px 2px rgba(216, 52, 44, .25), 0 6px 16px rgba(216, 52, 44, .16); } .gab-btn-primary:hover, .gab-btn--primary:hover, .gab-btn-accent:hover, .gab-contact-btn-primary:hover, .gab-modal-submit:hover, .gab-auth-submit:hover, .gab-fm-cta-btn:hover, .gab-dcc-btn--primary:hover, .gab-quote-submit:hover, .gab-parts-submit:hover, .hicm-dcc-btn--primary:hover { box-shadow: 0 2px 4px rgba(216, 52, 44, .28), 0 10px 22px rgba(216, 52, 44, .20); } .gab-btn--secondary, .gab-contact-btn-save { box-shadow: var(--gab-btn-shadow); } .gab-btn--outline, .gab-contact-btn, .gab-dcc-btn--ghost, .gab-filter-apply, .gab-af-save, .gab-af-share, .gab-dash-hbtn, .gab-aact-btn { border-color: var(--gab-gray-200); box-shadow: var(--gab-btn-shadow); } .gab-btn--outline:hover, .gab-contact-btn:hover, .gab-dcc-btn--ghost:hover, .gab-filter-apply:hover, .gab-dash-hbtn:hover, .gab-aact-btn:hover { border-color: var(--gab-gray-900); color: var(--gab-gray-900); background: #fff; } .gab-btn-icon { border-radius: 12px; box-shadow: var(--gab-btn-shadow); } /* --- 32-5. 카드·패널 --- */ .gab-car-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); } .gab-car-card:hover { transform: translateY(-3px); box-shadow: var(--gab-shadow-lg); border-color: var(--gab-gray-200); } .gab-car-card-image { overflow: hidden; } .gab-car-card-image img { transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1); } .gab-car-card:hover .gab-car-card-image img { transform: scale(1.045); } .gab-car-card-fav { transition: transform .15s ease, color .15s ease; } .gab-car-card-fav:active { transform: scale(.88); } .gab-dash-card, .gab-parts-form-wrap, .hicm-inventory-panel, .gab-docup, .gab-verification-panel, .hicm-private-documents, .gab-filter-sidebar, .gab-modal-box, .gab-modal-in, .hicm-dcc-card, .gab-buyreq-form, .gab-hx-find, .gab-encar, .gab-my-panel, .hicm-my-panel, .hicm-inquiry-panel, .gab-quote-form, .hicm-inquiry-detail-card, .gab-track-card, .gab-reg-card, .gab-cta-box, .hicm-character-panel, .hicm-form-companion, .gab-exprofile-step, .gab-fm-cta-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); } .gab-hx-find, .gab-encar { box-shadow: var(--gab-shadow-md); } .gab-modal-box, .gab-modal-in { border-radius: 20px; padding: 26px; box-shadow: var(--gab-shadow-2xl); } /* KPI·스탯 카드 */ .gab-dash-stat, .gab-astat, .hicm-dcc-kpi { border-radius: 16px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .gab-dash-stat:hover, .gab-astat:hover, .hicm-dcc-kpi:hover { border-color: var(--gab-gray-300); box-shadow: var(--gab-shadow-sm); transform: translateY(-1px); } .gab-dash-stat-icon, .gab-astat-icon, .hicm-dcc-kpi__icon { border-radius: 14px; } /* --- 32-6. 낸비·사이드바 --- */ .gab-nav-item { border-radius: 10px; } .gab-nav-item:hover { background: var(--gab-gray-100); color: var(--gab-gray-900); } .gab-dash-nav-item.is-on { box-shadow: inset 3px 0 0 var(--gab-primary-600); } [dir="rtl"] .gab-dash-nav-item.is-on { box-shadow: inset -3px 0 0 var(--gab-primary-600); } .gab-my-nav-item.is-on { background: var(--gab-primary-50); color: var(--gab-primary-700); box-shadow: inset 3px 0 0 var(--gab-primary-600); } /* --- 32-7. 테이블·페이지네이션 --- */ .gab-table-wrap, .gab-atable-wrap, .hicm-scroll-table, .hicm-inventory-table-wrap { border-radius: 14px; box-shadow: 0 1px 2px rgba(17,19,24,.04); } .gab-table tbody tr, .gab-atable tbody tr, .hicm-inventory-table tbody tr { transition: background .12s ease; } .gab-page-btn, .gab-apage-num { border-radius: 999px; border-color: transparent; background: var(--gab-gray-100); color: var(--gab-gray-600); } .gab-page-btn:hover, .gab-apage-num:hover { background: var(--gab-gray-200); border-color: transparent; color: var(--gab-gray-900); } .gab-page-btn.is-on, .gab-apage-num.is-on { background: var(--gab-gray-900); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(17,19,24,.18); } /* --- 32-8. 슬라이더·업로드·기타 컨트롤 --- */ .gab-rslider-rail { height: 6px; } .gab-rslider-h { width: 20px; height: 20px; margin-top: -10px; margin-inline-start: -10px; border-width: 2.5px; box-shadow: var(--gab-shadow-md); transition: transform .12s ease; } .gab-rslider-h:hover { transform: scale(1.12); } .gab-docup-zone, .gab-upload { border-radius: 14px; background: var(--gab-gray-50); } .gab-filter-checkbox { border-radius: 6px; } .gab-filter-option { border-radius: 10px; } .gab-qbar-sort, .gab-qbar-filter { border-color: transparent; background: var(--gab-gray-100); font-weight: 700; } .gab-qbar-sort:hover, .gab-qbar-filter:hover { background: var(--gab-gray-200); } .gab-qbar-view-btn, .gab-list-view-btn { border-color: transparent; background: var(--gab-gray-100); border-radius: 10px; } .gab-qbar-view-btn.is-on, .gab-list-view-btn.is-on, .gab-list-view-btn.is-active { background: var(--gab-gray-900); border-color: transparent; } .gab-perpage-select, .gab-apage-size, .gab-mem-pgsize { width: auto; } /* 브랜드 픽커(홈) 선택 카드 */ .gab-mkpick-brand { border-radius: 12px; } .gab-mkpick-model { border-radius: 14px; } .gab-mkpick-model:hover { transform: translateY(-2px); box-shadow: var(--gab-shadow-md); } /* 바텀시트 라운드 강화 (모바일) */ @media (max-width: 1024px) { .gab-filter-sidebar { border-radius: 22px 22px 0 0; } .gab-sort-sheet { border-radius: 22px 22px 0 0; } } /* 모바일 탭바: 블러 플로팅 바 */ .gab-tabbar { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* 언어 드롭다운·서제스트·메가 패널 라운드 */ .gab-suggest { border-radius: 14px; box-shadow: var(--gab-shadow-xl); } .gab-suggest-item:hover { background: var(--gab-gray-50); } /* 배지: 살짝 더 소프트한 링 */ .gab-badge, .gab-car-badge, .gab-abadge, .gab-notice-badge, .gab-tier-badge, .gab-my-badge, .gab-my-type-badge, .gab-status, .gab-buyreq-status, .gab-track-badge, .gab-upload-badge, .gab-preview-badge, .gab-review-badge, .gab-insp-form-badge, .gab-qbar-badge, .gab-auto-tag, .gab-reglang-badge, .gab-my-badge-inline, .gab-my-list-status, .gab-tag, .gab-career-tag, .gab-mag-card-cat, .gab-mag-cat { letter-spacing: -0.01em; } /* --- 32-9. 가입 스텝퍼·컨트리 픽커·서류 체크리스트 복원 --- */ .gab-steps { max-width: 560px; margin: 0 auto 30px; } .gab-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .gab-steps__dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gab-gray-100); border: 1.5px solid var(--gab-gray-200); color: var(--gab-gray-400); font-size: 13px; font-weight: 800; position: relative; z-index: 1; } .gab-steps__item:not(:last-child)::after { content: ''; position: absolute; top: 17px; inset-inline-start: calc(50% + 22px); width: calc(100% - 44px); height: 1.5px; background: var(--gab-gray-200); } .gab-steps__item--active .gab-steps__dot { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; box-shadow: var(--gab-ring); } .gab-steps__item--done .gab-steps__dot { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .gab-steps__item--done:not(:last-child)::after { background: var(--gab-gray-900); } .gab-steps__label { font-size: 12px; font-weight: 700; color: var(--gab-gray-400); } .gab-steps__item--active .gab-steps__label { color: var(--gab-gray-900); } .gab-steps__item--done .gab-steps__label { color: var(--gab-gray-600); } /* 컨트리 픽커 (네이티브 select는 JS 강화 시 시각적으로 숨김) */ .hicm-country-field { position: relative; } /* 픽커 래퍼는 블록 (레거시 행 스타일 1109번 규칙 덮기) */ .gab-field.hicm-country-field { display: block; padding: 0; cursor: default; font-size: inherit; } .gab-field.hicm-country-field:hover { background: transparent; } .hicm-country-picker { position: relative; } .hicm-country-picker.is-enhanced .hicm-country-native { position: absolute !important; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .hicm-country-picker-button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 10px 15px; background: var(--gab-field-bg); border: 1.5px solid transparent; border-radius: var(--gab-field-radius); font-size: var(--gab-text-md); font-weight: 600; color: var(--gab-gray-900); cursor: pointer; text-align: start; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .hicm-country-picker-button:hover { background: var(--gab-field-bg-hover); } .hicm-country-picker-button:focus-visible, .hicm-country-picker.is-open .hicm-country-picker-button { background: #fff; border-color: var(--gab-primary-500); box-shadow: var(--gab-ring); outline: none; } .hicm-country-picker-button::after { content: ''; margin-inline-start: auto; width: 15px; height: 15px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 15px; } .hicm-country-current-flag { display: inline-flex; flex-shrink: 0; } .hicm-country-current-label { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hicm-country-current-label:empty::before { content: attr(data-placeholder); color: var(--gab-gray-400); } .hicm-country-current-dial { color: var(--gab-gray-400); font-size: var(--gab-text-sm); } .hicm-country-flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(17,19,24,.08); } .hicm-country-picker-panel { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: var(--gab-z-popover); background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; box-shadow: var(--gab-shadow-xl); padding: 8px; } .hicm-country-picker-search { margin-bottom: 6px; } .hicm-country-picker-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; } .hicm-country-picker-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font-size: var(--gab-text-sm); font-weight: 600; color: var(--gab-gray-700); cursor: pointer; text-align: start; } .hicm-country-picker-option small { margin-inline-start: auto; color: var(--gab-gray-400); } .hicm-country-picker-option:hover, .hicm-country-picker-option.is-active { background: var(--gab-gray-50); color: var(--gab-gray-900); } .hicm-country-picker-option[aria-selected="true"] { color: var(--gab-primary-600); font-weight: 800; } .hicm-country-picker-empty { padding: 18px 10px; text-align: center; font-size: var(--gab-text-sm); color: var(--gab-gray-400); } /* 서류 체크리스트 (가입 2단계) */ .gab-docup-checklist { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .gab-docup-notice { display: flex; gap: 8px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: #EBF2FE; color: #1D4ED8; font-size: var(--gab-text-sm); font-weight: 600; margin-bottom: 10px; } /* 모바일에서도 가입 스텝퍼는 3열 유지 (v169) */ @media (max-width: 1024px) { .gab-steps { grid-template-columns: repeat(3, 1fr); gap: 8px; } .gab-steps__label { font-size: 11px; } } /* ================================================================ * 33. v170 — Brokerage Clarity * 목적: "중고차 목록 사이트"가 아니라 "거래를 관리하는 중개 플랫폼"이 * 첫 화면에서 읽히게 한다. (핸드오프 02 문서 §5 약점 1·3·4·5·6 대응) * 33-1 다크 히어로 밴드 + 거래 안전장치 지표 * 33-2 중개 거래 4단계 타임라인 * 33-3 플랫폼 보장 다크 섹션 * 33-4 섹션 리듬·타이포 통일 * 33-5 모바일 플로팅 겹침 해소 * ================================================================ */ :root { /* 신뢰(중개) 계열 — 레드 단일 포인트의 위계를 보완 */ --gab-trust-500: #2563EB; --gab-trust-tint: #EBF2FE; --gab-ink-900: #0C0E11; --gab-ink-800: #14171C; --gab-on-dark: rgba(255, 255, 255, .62); --gab-on-dark-soft: rgba(255, 255, 255, .42); --gab-hairline-dark: rgba(255, 255, 255, .12); /* 섹션 세로 리듬 (56/40 혼용 정리) */ --gab-rhythm: 64px; --gab-rhythm-sm: 44px; } /* ===== 33-1. 홈 히어로 — 다크 밴드 ===== */ .hicm-hx--brokerage { position: relative; background: var(--gab-ink-900); border-bottom: 0; color: #fff; isolation: isolate; } .hicm-hx--brokerage .gab-hx-bg { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1120px 500px at 80% -14%, rgba(216, 52, 44, .32), transparent 62%), radial-gradient(720px 420px at 4% 6%, rgba(255, 255, 255, .07), transparent 58%), linear-gradient(168deg, #191C22 0%, var(--gab-ink-900) 54%, #101318 100%); } /* 미세 그리드 텍스처 — 평평한 단색 다크 보완 */ .hicm-hx--brokerage .gab-hx-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%); } .hicm-hx--brokerage .gab-hx-inner { position: relative; padding-block: 52px 56px; } .hicm-hx--brokerage .gab-hx-copy { max-width: 860px; } .hicm-hx--brokerage .gab-hx-badge { align-items: center; gap: 6px; padding: 6px 14px; background: rgba(216, 52, 44, .16); border-color: rgba(238, 147, 135, .40); color: #FFD9D4; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hicm-hx--brokerage .gab-hx-title { color: #fff; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.22; letter-spacing: var(--gab-tracking-tight); margin: 18px 0 14px; text-wrap: balance; } .hicm-hx--brokerage .gab-hx-accent { color: #FF8A7E; background: linear-gradient(96deg, #FF7A6E 0%, #E36557 46%, #FFB9B1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hicm-hx--brokerage .gab-hx-sub { color: var(--gab-on-dark); font-size: var(--gab-text-lg); line-height: 1.7; max-width: 780px; } .hicm-hx-disclaimer { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; max-width: 780px; font-size: var(--gab-text-sm); font-weight: 600; color: rgba(255, 255, 255, .78); } .hicm-hx-disclaimer i { flex-shrink: 0; margin-top: 2px; color: var(--gab-primary-400); } /* 거래 안전장치 4지표 */ .hicm-guard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 30px 0 0; border: 1px solid var(--gab-hairline-dark); border-radius: var(--gab-radius-xl); background: var(--gab-hairline-dark); overflow: hidden; } .hicm-guard-item { display: flex; flex-direction: column; gap: 7px; padding: 20px 20px 18px; background: rgba(255, 255, 255, .04); } .hicm-guard-fig { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; } .hicm-guard-fig small { font-size: 17px; font-weight: 700; margin-inline-start: 3px; color: var(--gab-primary-400); } .hicm-guard-label { display: flex; align-items: center; gap: 7px; font-size: var(--gab-text-base); font-weight: 800; color: #fff; } .hicm-guard-label i { font-size: 15px; color: var(--gab-primary-400); } .hicm-guard-note { font-size: 12.5px; line-height: 1.6; color: var(--gab-on-dark-soft); } /* 인텐트 카드 — 다크 위 글래스 */ .hicm-hx--brokerage .hicm-intent-rail { margin-top: 22px; } .hicm-hx--brokerage .hicm-intent { background: rgba(255, 255, 255, .05); border-color: var(--gab-hairline-dark); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hicm-hx--brokerage .hicm-intent:hover { background: rgba(255, 255, 255, .09); border-color: rgba(238, 147, 135, .55); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } .hicm-hx--brokerage .hicm-intent-copy small { color: var(--gab-on-dark-soft); } .hicm-hx--brokerage .hicm-intent-copy strong { color: #fff; } .hicm-hx--brokerage .hicm-intent > i { color: rgba(255, 255, 255, .35); } .hicm-hx--brokerage .hicm-intent-media { background: rgba(255, 255, 255, .10); color: #fff; } .hicm-hx--brokerage .hicm-intent--browse .hicm-intent-media { background: rgba(216, 52, 44, .22); color: #FF9F95; } .hicm-hx--brokerage .hicm-intent--dealers .hicm-intent-media { background: rgba(37, 99, 235, .22); color: #93B4FF; } .hicm-hx--brokerage .hicm-intent--sell .hicm-intent-media { background: rgba(31, 143, 78, .22); color: #7BD3A0; } /* 검색 위젯 — 다크 밴드 위에 뜬 화이트 카드 ★ color 리셋 필수: 섹션의 color:#fff 가 카드 안까지 상속되면 흰 배경에 흰 글씨가 된다. */ .hicm-hx--brokerage .gab-encar { margin-top: 26px; border-color: transparent; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); color: var(--gab-gray-900); } .hicm-hx--brokerage .gab-encar-head span { color: var(--gab-gray-400); } .hicm-hx--brokerage .gab-encar-head a, .hicm-hx--brokerage .gab-mkpick-allbtn { color: var(--gab-primary-600); } .hicm-hx--brokerage .gab-mkpick-model span { color: var(--gab-gray-400); } /* 세그먼트 탭은 v169(§32-?)에서 "회색 트랙 + 흰 알약" 형태 — 활성 글자는 어두워야 한다 */ .hicm-hx--brokerage .gab-encar-tab { color: var(--gab-gray-600); } .hicm-hx--brokerage .gab-encar-tab.is-on { color: var(--gab-gray-900); } .hicm-hx--brokerage .gab-mkpick-panel-head strong { color: var(--gab-gray-900); } .hicm-hx--brokerage .gab-mkpick-model b { color: var(--gab-gray-900); } /* ===== 33-2. 중개 거래 4단계 ===== */ .hicm-deal { padding-block: var(--gab-rhythm); background: #fff; border-bottom: 1px solid var(--gab-gray-200); } .hicm-deal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 8px; } .hicm-deal-kicker { display: inline-block; font-size: var(--gab-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gab-primary-600); margin-bottom: 10px; } .hicm-deal-head h2 { font-size: var(--gab-text-3xl); letter-spacing: var(--gab-tracking-tight); margin: 0 0 10px; text-wrap: balance; } .hicm-deal-head p { margin: 0; max-width: 760px; color: var(--gab-gray-500); font-size: var(--gab-text-md); line-height: 1.65; } .hicm-deal-link { flex-shrink: 0; font-size: var(--gab-text-sm); font-weight: 800; white-space: nowrap; } .hicm-deal-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 0; padding: 0; list-style: none; } .hicm-deal-step { position: relative; padding: 62px 26px 0 0; } [dir="rtl"] .hicm-deal-step { padding: 62px 0 0 26px; } .hicm-deal-step:last-child { padding-inline-end: 0; } .hicm-deal-step-rail { position: absolute; top: 23px; inset-inline-start: 48px; inset-inline-end: 0; height: 2px; background: var(--gab-gray-200); } .hicm-deal-step:last-child .hicm-deal-step-rail { display: none; } .hicm-deal-step-dot { position: absolute; top: 0; inset-inline-start: 0; width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--gab-gray-100); color: var(--gab-gray-600); border: 1px solid var(--gab-gray-200); } .hicm-deal-step--contract .hicm-deal-step-dot { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; box-shadow: var(--gab-glow-brand); } .hicm-deal-step--done .hicm-deal-step-dot { background: #EAF7EF; border-color: #B7E3C9; color: var(--gab-success); } .hicm-deal-step-no { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--gab-gray-400); margin-bottom: 6px; } .hicm-deal-step h3 { font-size: var(--gab-text-lg); margin: 0 0 8px; letter-spacing: var(--gab-tracking-snug); } .hicm-deal-step p { margin: 0 0 12px; font-size: var(--gab-text-sm); line-height: 1.68; color: var(--gab-gray-500); } .hicm-deal-step-who { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: var(--gab-gray-100); font-size: 11.5px; font-weight: 700; color: var(--gab-gray-600); } .hicm-deal-step--contract .hicm-deal-step-who { background: var(--gab-primary-50); color: var(--gab-primary-700); } .hicm-deal-step--done .hicm-deal-step-who { background: #EAF7EF; color: var(--gab-success); } .hicm-deal-step--req .hicm-deal-step-who, .hicm-deal-step--match .hicm-deal-step-who { background: var(--gab-trust-tint); color: #1D4ED8; } .hicm-deal-foot { display: flex; align-items: flex-start; gap: 10px; margin: 32px 0 0; padding: 15px 18px; border-radius: var(--gab-radius-lg); background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-sm); line-height: 1.65; color: var(--gab-gray-600); } .hicm-deal-foot i { flex-shrink: 0; margin-top: 3px; color: var(--gab-warning); font-size: 15px; } /* ===== 33-3. 플랫폼 보장 (다크) ===== */ .hicm-assure { position: relative; overflow: hidden; padding-block: var(--gab-rhythm); background: var(--gab-ink-900); isolation: isolate; } .hicm-assure-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(880px 420px at 12% -10%, rgba(216, 52, 44, .24), transparent 60%), radial-gradient(760px 400px at 94% 108%, rgba(37, 99, 235, .20), transparent 62%), linear-gradient(180deg, #15181E 0%, #0A0C0F 100%); } .hicm-assure .gab-how-inner { position: relative; max-width: 1180px; padding-inline: 20px; } .hicm-assure-kicker { display: inline-block; font-size: var(--gab-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gab-primary-400); margin-bottom: 10px; } .hicm-assure .gab-how-title { font-size: var(--gab-text-3xl); letter-spacing: var(--gab-tracking-tight); margin-bottom: 10px; } .hicm-assure .gab-how-sub { color: var(--gab-on-dark); font-size: var(--gab-text-md); line-height: 1.7; max-width: 720px; margin-bottom: 0; } .hicm-assure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; } .hicm-assure-card { padding: 24px 22px; border-radius: var(--gab-radius-xl); background: rgba(255, 255, 255, .045); border: 1px solid var(--gab-hairline-dark); transition: var(--gab-transition-fast); } .hicm-assure-card:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .2); transform: translateY(-3px); } .hicm-assure-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; margin-bottom: 15px; font-size: 20px; background: rgba(216, 52, 44, .18); color: #FF9F95; } .hicm-assure-card:nth-child(2) .hicm-assure-ic { background: rgba(37, 99, 235, .20); color: #93B4FF; } .hicm-assure-card:nth-child(3) .hicm-assure-ic { background: rgba(199, 125, 30, .20); color: #F0C078; } .hicm-assure-card:nth-child(4) .hicm-assure-ic { background: rgba(31, 143, 78, .20); color: #7BD3A0; } .hicm-assure-card h3 { font-size: var(--gab-text-md); color: #fff; margin: 0 0 8px; letter-spacing: var(--gab-tracking-snug); } .hicm-assure-card p { margin: 0; font-size: 13px; line-height: 1.68; color: var(--gab-on-dark-soft); } /* ===== 33-4. 섹션 리듬 · 다크 CTA 깊이 ===== */ .gab-section { padding-block: var(--gab-rhythm); } .gab-section-tight { padding-block: var(--gab-rhythm-sm); } .gab-section-header { margin-bottom: 26px; } .gab-section-header h2 { font-size: var(--gab-text-3xl); letter-spacing: var(--gab-tracking-tight); } .gab-proof-head h2 { font-size: var(--gab-text-3xl); letter-spacing: var(--gab-tracking-tight); } .gab-page-hero-title { letter-spacing: var(--gab-tracking-tight); } .gab-page-hero-inner { padding-block: var(--gab-rhythm-sm); } .gab-cta { position: relative; overflow: hidden; background: var(--gab-ink-900); isolation: isolate; } .gab-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(620px 320px at 50% -30%, rgba(216, 52, 44, .30), transparent 66%), linear-gradient(180deg, #14171C 0%, #0A0C0F 100%); } .gab-cta-inner { padding-block: var(--gab-rhythm); } .gab-cta-title { letter-spacing: var(--gab-tracking-tight); text-wrap: balance; } .gab-cta-desc { max-width: 620px; margin-inline: auto; line-height: 1.7; } /* ===== 33-5. 태블릿·모바일 ===== */ @media (max-width: 1024px) { .hicm-guard { grid-template-columns: repeat(2, 1fr); } .hicm-assure-grid { grid-template-columns: repeat(2, 1fr); } .hicm-deal-flow { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } .hicm-deal-step:nth-child(2) .hicm-deal-step-rail { display: none; } } @media (max-width: 768px) { :root { --gab-rhythm: 46px; --gab-rhythm-sm: 34px; } .hicm-hx--brokerage .gab-hx-inner { padding-block: 32px 36px; } .hicm-hx--brokerage .gab-hx-title { font-size: clamp(24px, 7vw, 32px); margin: 14px 0 12px; } .hicm-hx--brokerage .gab-hx-sub { font-size: var(--gab-text-md); } .hicm-guard { grid-template-columns: 1fr; margin-top: 22px; } .hicm-guard-item { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 15px 16px; } .hicm-guard-fig { font-size: 27px; } .hicm-guard-label { flex: 1; min-width: 0; } .hicm-guard-note { flex-basis: 100%; } .hicm-deal-head { flex-direction: column; align-items: flex-start; gap: 10px; } .hicm-deal-head h2 { font-size: var(--gab-text-2xl); } .hicm-deal-flow { grid-template-columns: 1fr; row-gap: 0; margin-top: 26px; } .hicm-deal-step { padding: 0 0 26px 62px; } [dir="rtl"] .hicm-deal-step { padding: 0 62px 26px 0; } .hicm-deal-step:last-child { padding-bottom: 0; } .hicm-deal-step-dot { width: 44px; height: 44px; font-size: 19px; } .hicm-deal-step-rail { top: 48px; inset-inline-start: 21px; inset-inline-end: auto; width: 2px; height: calc(100% - 44px); } .hicm-deal-step:nth-child(2) .hicm-deal-step-rail { display: block; } .hicm-deal-step-no { margin-top: 2px; } .hicm-deal-step h3 { font-size: var(--gab-text-md); } .hicm-assure-grid { grid-template-columns: 1fr; gap: 10px; } .hicm-assure .gab-how-title { font-size: var(--gab-text-2xl); } .hicm-assure-card { padding: 18px 17px; } .hicm-assure-ic { width: 38px; height: 38px; font-size: 18px; margin-bottom: 12px; } /* 플로팅 문의·언어 버튼이 하단 탭바를 가리던 문제 — 탭바 위로 띄우고 아이콘형으로 축소 */ .hicm-platform-float { bottom: calc(64px + 12px + env(safe-area-inset-bottom)); inset-inline-end: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .hicm-float-inquiry { width: 46px; height: 46px; min-height: 46px; padding: 0; justify-content: center; gap: 0; font-size: 19px; } .hicm-float-inquiry-copy { display: none; } body.gab-page-admin .hicm-platform-float, body.gab-page-auth .hicm-platform-float { bottom: calc(16px + env(safe-area-inset-bottom)); } } /* ================================================================ * 34. v170 — 매물 카드 갤러리 복구 (.gab-ccg-*) * ---------------------------------------------------------------- * CarCardRenderer 는 .gab-car-card-gallery / .gab-ccg-main / * .gab-ccg-main-img ... 구조를 출력하는데, v163에서 37개 레거시 CSS를 * 폐기할 때 이 클래스들의 스타일이 theme.css 로 이관되지 않았다. * 그 결과 카드 이미지가 CSS 없이 srcset sizes 힌트 크기(모바일 156px) * 그대로 렌더되고, 인증 리본·데모 표시·국가 배지가 이미지 위 오버레이가 * 아니라 카드 본문에 블록으로 흘러내렸다. 여기서 전부 복구한다. * ================================================================ */ .gab-car-card-gallery { position: relative; display: block; } .gab-ccg-main { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gab-gray-100); } .gab-ccg-main-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4, 0, .2, 1); } .gab-car-card:hover .gab-ccg-main-img { transform: scale(1.045); } /* 이미지 전체를 덮는 상세 링크 — 오버레이 컨트롤보다 아래에 둔다 */ .hicm-card-media-link { position: absolute; inset: 0; z-index: 1; } .gab-ccg-main .gab-car-card-image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--gab-gray-300); background: var(--gab-gray-100); } /* --- 오버레이 배치: 좌상 리본 / 우상 찜 / 좌하 데모 / 우하 메타 --- */ .gab-ccg-main .gab-ccg-ribbon { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(17, 19, 24, .82); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gab-ccg-main .gab-ccg-ribbon i { color: #7BD3A0; font-size: 12px; } .gab-ccg-main .gab-car-card-badges { z-index: 3; } .gab-ccg-main:has(.gab-ccg-ribbon) .gab-car-card-badges { top: 44px; } .gab-ccg-main .gab-car-card-fav { z-index: 3; } /* 데모 매물 표시 — 본문 알림 박스 스타일(§20)을 이미지 위 배지로 되돌린다 */ .gab-ccg-main .hicm-demo-asset-label { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 3; display: inline-flex; align-items: center; width: auto; margin: 0; padding: 4px 9px; border: 0; border-radius: 7px; background: rgba(17, 19, 24, .68); color: rgba(255, 255, 255, .92); font-size: 10.5px; font-weight: 700; line-height: 1.35; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gab-ccg-meta { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 3; display: flex; align-items: center; gap: 5px; } .gab-ccg-count, .gab-ccg-video { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(17, 19, 24, .68); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gab-ccg-count .hicm-country-flag { width: 14px; height: 10px; border-radius: 2px; object-fit: cover; } /* --- 썸네일 스트립 --- */ .gab-ccg-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; background: var(--gab-gray-50); } .gab-ccg-thumb { padding: 0; border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: var(--gab-gray-100); cursor: pointer; aspect-ratio: 16 / 9; } .gab-ccg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .gab-ccg-thumb:hover { border-color: var(--gab-gray-900); } /* 목록형(리스트 뷰)에서는 고정 비율 해제 */ .gab-cars-grid.is-list .gab-ccg-main { aspect-ratio: auto; height: 100%; min-height: 150px; } @media (max-width: 1024px) { .gab-ccg-thumbs { display: none; } } @media (max-width: 768px) { .gab-ccg-main { aspect-ratio: 16 / 10; } .gab-ccg-main .gab-ccg-ribbon { top: 8px; inset-inline-start: 8px; padding: 4px 8px; font-size: 10px; } .gab-ccg-main .hicm-demo-asset-label { bottom: 8px; inset-inline-start: 8px; font-size: 10px; } .gab-ccg-meta { bottom: 8px; inset-inline-end: 8px; } .gab-ccg-count, .gab-ccg-video { font-size: 10px; padding: 3px 8px; } } /* ================================================================ * 35. v170 — 잔여 폴리시 * 35-1 로그인 브랜딩 패널: 캐릭터 → 중개 안전장치 * 35-2 미스타일 요소 정리 * ================================================================ */ /* --- 35-1. 로그인 좌측 다크 패널 --- */ .hicm-auth-guard { margin-top: 40px; text-align: start; } .hicm-auth-guard-head { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; max-width: 420px; font-size: 14px; font-weight: 700; line-height: 1.6; color: rgba(255, 255, 255, .88); } .hicm-auth-guard-head i { flex-shrink: 0; margin-top: 3px; color: var(--gab-primary-400); } .hicm-auth-guard-list { display: flex; flex-direction: column; gap: 1px; max-width: 420px; border: 1px solid var(--gab-hairline-dark); border-radius: 16px; background: var(--gab-hairline-dark); overflow: hidden; } .hicm-auth-guard-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .04); } .hicm-auth-guard-ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(216, 52, 44, .18); color: #FF9F95; font-size: 16px; } .hicm-auth-guard-list b { flex-shrink: 0; min-width: 46px; font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.02em; } .hicm-auth-guard-list li > span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--gab-on-dark); } @media (max-width: 900px) { .hicm-auth-guard { display: none; } } /* --- 35-2. 미스타일 요소 정리 --- */ /* 이용안내·고객센터의 "01 요청 / 02 확보 / 03 중개" 태그가 맨 텍스트로 흘렀다 */ .hicm-character-tags span { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--gab-gray-100); border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-gray-600); } /* ================================================================ * 36. v171 — 언어 국기 바 · 플로팅 정리 * ---------------------------------------------------------------- * 언어 전환을 드롭다운/바텀시트에서 "국기 5종 상시 노출"로 바꾼다. * 해외 바이어가 첫 화면에서 클릭 없이 자기 언어를 찾을 수 있어야 한다. * ================================================================ */ /* --- 36-1. 상단 띠 --- */ .gab-top-bar-inner { justify-content: space-between; } .hicm-topbar-tag { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .55); font-weight: 600; } .hicm-topbar-tag i { color: #7BD3A0; font-size: 12px; } /* --- 36-2. 언어 국기 바 --- */ .hicm-langbar { display: flex; align-items: center; gap: 2px; } .hicm-langbar-item { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; color: rgba(255, 255, 255, .60); font-size: 12px; font-weight: 700; line-height: 1; transition: background .15s ease, color .15s ease; } .hicm-langbar-item:hover { background: rgba(255, 255, 255, .10); color: #fff; } .hicm-langbar-item.is-active { background: rgba(255, 255, 255, .15); color: #fff; } .hicm-langbar-item:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .hicm-langbar-flag { display: inline-flex; flex-shrink: 0; } .hicm-langbar-flag img { display: block; width: 19px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); filter: saturate(.85); transition: filter .15s ease, box-shadow .15s ease; } .hicm-langbar-item:hover .hicm-langbar-flag img { filter: saturate(1); } .hicm-langbar-item.is-active .hicm-langbar-flag img { filter: saturate(1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .65); } .hicm-langbar-code { display: none; } /* 아랍어 라벨은 RTL로 읽히게 */ .hicm-langbar-item[lang="ar"] .hicm-langbar-name { direction: rtl; } /* --- 36-3. 드로어 언어 (모바일 메뉴 안) --- */ .gab-drawer-lang-btn { display: inline-flex; align-items: center; gap: 7px; } .gab-drawer-lang-btn img { display: block; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(17, 19, 24, .12); } .gab-drawer-lang-btn.is-active img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); } /* --- 36-4. 플로팅: 문의 버튼 하나만 남았다 --- */ .hicm-platform-float { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .hicm-float-inquiry i { font-size: 17px; } /* --- 36-5. 반응형 --- */ @media (max-width: 768px) { /* 상단 띠를 다시 보이게 한다 — 국기 바가 여기 들어가므로 숨기면 안 된다 */ .gab-top-bar { display: block; } .gab-top-bar-inner { min-height: 34px; gap: 8px; } .hicm-topbar-tag { display: none; } .gab-top-bar-divider { display: none; } .gab-top-bar-right a { font-size: 11px; white-space: nowrap; } /* 모바일에서는 국기만 — 텍스트 없이도 무슨 언어인지 알아본다 */ .hicm-langbar { gap: 1px; } .hicm-langbar-item { padding: 5px 6px; gap: 0; } .hicm-langbar-name, .hicm-langbar-code { display: none; } .hicm-langbar-flag img { width: 21px; height: 15px; } /* 플로팅 문의: 탭바 위 아이콘형 (v170 §33-5에서 정한 위치 유지) */ .hicm-platform-float { bottom: calc(64px + 12px + env(safe-area-inset-bottom)); inset-inline-end: 12px; } .hicm-float-inquiry { width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; gap: 0; font-size: 20px; } .hicm-float-inquiry-copy { display: none; } } @media (max-width: 380px) { .hicm-langbar-flag img { width: 19px; height: 14px; } .hicm-langbar-item { padding: 5px 4px; } } /* ================================================================ * 37. v171 — 검색 우선 히어로 (엔카식) * ---------------------------------------------------------------- * "중개 플랫폼이라도 결국 차량이 중요하다" — 히어로의 주인공을 카피에서 * 검색 패널로 바꾼다. 순서: 짧은 정체성 한 줄 → 차량 검색 → 거래 안전장치 → 진입 카드. * 검색 패널 내부 구조(.gab-encar-*, .gab-mkpick-*)는 캐스케이드 JS 계약이라 건드리지 않는다. * ================================================================ */ /* --- 37-1. 히어로 상단 카피는 최소화 --- */ .hicm-hx--brokerage .gab-hx-inner { padding-block: 34px 44px; } .hicm-hx--brokerage .gab-hx-copy { max-width: 900px; margin-bottom: 20px; } .hicm-hx--brokerage .gab-hx-title { font-size: clamp(24px, 2.8vw, 36px); margin: 12px 0 0; line-height: 1.25; } /* --- 37-2. 검색 패널이 주인공 --- */ .hicm-hx--brokerage .gab-encar { margin-top: 0; padding: 24px 24px 4px; border: 1px solid rgba(255, 255, 255, .10); border-radius: var(--gab-radius-2xl); box-shadow: 0 28px 70px rgba(0, 0, 0, .48); } .hicm-hx--brokerage .gab-encar-head { align-items: flex-start; margin-bottom: 16px; } .hicm-hx--brokerage .gab-encar-head strong { font-size: var(--gab-text-xl); letter-spacing: var(--gab-tracking-snug); } .hicm-hx--brokerage .gab-encar-head span { display: block; margin-top: 3px; font-size: var(--gab-text-sm); } .hicm-hx--brokerage .gab-encar-tabs { margin-bottom: 18px; } .hicm-hx--brokerage .gab-encar-tab { font-size: var(--gab-text-lg); padding: 10px 30px; } .hicm-hx--brokerage .gab-encar-brands { max-height: 430px; overflow-y: auto; scrollbar-width: thin; } /* --- 37-3. 조건으로 바로 찾기 --- */ .hicm-quick { margin-top: 18px; padding: 18px 0 20px; border-top: 1px solid var(--gab-gray-200); } .hicm-quick-head { margin-bottom: 14px; } .hicm-quick-head strong { display: block; font-size: var(--gab-text-md); color: var(--gab-gray-900); } .hicm-quick-head span { font-size: var(--gab-text-sm); color: var(--gab-gray-500); } .hicm-quick-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; } .hicm-quick-row { display: flex; align-items: center; gap: 12px; min-width: 0; } .hicm-quick-label { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; width: 74px; font-size: var(--gab-text-sm); font-weight: 800; color: var(--gab-gray-700); } .hicm-quick-label i { color: var(--gab-primary-600); font-size: 14px; } .hicm-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .hicm-quick-chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; background: var(--gab-field-bg); border: 1px solid transparent; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-700); white-space: nowrap; transition: var(--gab-transition-fast); } .hicm-quick-chip:hover { background: var(--gab-primary-50); border-color: var(--gab-primary-200); color: var(--gab-primary-700); } .hicm-quick-chip:active { transform: scale(.97); } /* --- 37-4. 안전장치 스트립 (검색 아래로 내려가면서 슬림하게) --- */ .hicm-guard--slim { margin-top: 22px; } .hicm-guard--slim .hicm-guard-item { padding: 15px 18px; gap: 5px; } .hicm-guard--slim .hicm-guard-fig { font-size: 28px; } .hicm-guard--slim .hicm-guard-fig small { font-size: 14px; } .hicm-guard--slim .hicm-guard-label { font-size: 13px; } .hicm-guard--slim .hicm-guard-note { font-size: 12px; line-height: 1.55; } .hicm-hx--brokerage .hicm-intent-rail { margin-top: 12px; } /* --- 37-5. 반응형 --- */ @media (max-width: 1024px) { .hicm-quick-rows { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 768px) { .hicm-hx--brokerage .gab-hx-inner { padding-block: 22px 30px; } .hicm-hx--brokerage .gab-hx-copy { margin-bottom: 16px; } .hicm-hx--brokerage .gab-hx-title { font-size: clamp(21px, 6vw, 27px); margin-top: 10px; } .hicm-hx--brokerage .gab-encar { padding: 16px 15px 2px; border-radius: var(--gab-radius-xl); } .hicm-hx--brokerage .gab-encar-head strong { font-size: var(--gab-text-lg); } .hicm-hx--brokerage .gab-encar-tab { font-size: var(--gab-text-md); padding: 10px; } .hicm-quick { margin-top: 14px; padding: 14px 0 16px; } .hicm-quick-row { flex-direction: column; align-items: flex-start; gap: 7px; } .hicm-quick-label { width: auto; } .hicm-quick-chips { width: 100%; } .hicm-quick-chip { padding: 8px 12px; } .hicm-guard--slim { margin-top: 16px; } .hicm-guard--slim .hicm-guard-fig { font-size: 24px; } } /* ================================================================ * 38. v171 — 전 페이지 실측 감사 복구 팩 * ---------------------------------------------------------------- * 5개 페이지 그룹(공개·상세/정적·인증·마이·딜러)을 PC/모바일로 실측 감사해 * 확인된 결함을 복구한다. 대부분 v163에서 37개 레거시 CSS를 theme.css 로 * 통합할 때 이관이 누락된 클래스이거나, 마크업과 CSS의 상태 클래스가 * 어긋난 경우(is-active ↔ is-on 등)다. * * 규칙: 이 섹션은 "누락 복구"만 한다. 새 디자인 결정은 앞선 섹션에. * ================================================================ */ /* ===== 38-0. 공통 ===== */ /* 매물번호·공지번호가 gray-300(대비 1.48)이라 사실상 안 보였다. 매물번호는 중개 문의 시 매물을 지목하는 식별자라 읽혀야 한다. */ .gab-car-card-number, .gab-notice-num { color: var(--gab-gray-500); } /* 상태 클래스 표준화 — 마크업이 is-active 를 쓰는데 CSS는 is-on 만 잡던 곳들 */ .gab-dash-nav-item.is-active { background: var(--gab-primary-50); color: var(--gab-primary-700); } .gab-my-nav-item.is-active { background: var(--gab-primary-50); color: var(--gab-primary-700); } .gab-qbar-view-btn.is-active, .gab-list-view-btn.is-active { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } /* RTL: 활성 마커가 물리 속성(inset 3px 0 0)이라 아랍어에서 반대편에 남았다 */ [dir="rtl"] .gab-my-nav-item.is-on, [dir="rtl"] .gab-my-nav-item.is-active, [dir="rtl"] .gab-dash-nav-item.is-on, [dir="rtl"] .gab-dash-nav-item.is-active { box-shadow: inset -3px 0 0 var(--gab-primary-600); } /* 아이콘 전용 버튼 터치 타깃 (통합 과정에서 40x40 규칙 유실) */ .gab-dash-mbar-home, .gab-dash-close, .gab-dash-user-logout { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } .gab-auth-input-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } /* 푸터 안의 주 CTA 가 .gab-footer a 특이도에 져서 75% 흰색으로 나왔다 */ .gab-footer a.gab-btn--primary, .gab-footer a.gab-btn-primary, .gab-footer .gab-btn--primary, .gab-footer .gab-btn-accent { color: #fff; } /* ===== 38-1. 공개 — 차량 목록 ===== */ /* 퀵바는 원래 모바일 전용인데 PC 숨김 규칙이 없어 정렬·보기모드가 두 벌씩 보였다 */ @media (min-width: 769px) { .gab-qbar { display: none; } } /* 퀵필터 토글에 선택 상태가 전혀 없어 켜짐/꺼짐이 픽셀 단위로 같았다 */ .gab-qf { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px; border: 1px solid var(--gab-gray-200); border-radius: 999px; background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); cursor: pointer; transition: var(--gab-transition-fast); } .gab-qf:hover { border-color: var(--gab-gray-400); color: var(--gab-gray-900); } .gab-qf-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--gab-gray-300); border-radius: 4px; background: #fff; font-size: 11px; color: #fff; } .gab-qf-check > * { opacity: 0; } .gab-qf.is-on { background: var(--gab-primary-50); border-color: var(--gab-primary-600); color: var(--gab-primary-700); font-weight: 800; } .gab-qf.is-on .gab-qf-check { background: var(--gab-primary-600); border-color: var(--gab-primary-600); } .gab-qf.is-on .gab-qf-check > * { opacity: 1; } /* ===== 38-2. 차량 상세 ===== */ /* grid 자식은 둘 다 min-width:0 이어야 1fr 트랙이 컨테이너를 넘지 않는다. 사이드바가 auto 라 min-content(413px)가 트랙을 밀어 모바일에서 39px 잘렸다. */ .gab-detail-sidebar { min-width: 0; } /* 380px 사이드바에 [문의 버튼 + 안내 카드 + 찜]을 한 줄로 넣어 91px 넘쳤다 */ .gab-contact-buttons { flex-wrap: wrap; } .gab-contact-buttons > .gab-safety-notice, .gab-contact-buttons > .gab-contact-service-note { flex: 1 0 100%; } .gab-contact-buttons > .gab-contact-row { flex: 1 0 100%; } /* 가격 카드 본문이 nowrap 이라 데모 안내·매물번호가 세로로 파편화됐다 */ .gab-price-card-main { flex-wrap: wrap; } .gab-price-card-main > .gab-safety-notice, .gab-price-card-main > .gab-price-card-listing { flex: 1 0 100%; margin-top: 6px; } /* 중개 원칙 항목이 스타일 없이 인라인 텍스트로 흘렀다 (복수형만 정의돼 있었다) */ .gab-exprofile-docs { display: flex; flex-wrap: wrap; gap: 8px; } .gab-exprofile-doc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gab-gray-200); border-radius: 999px; background: var(--gab-gray-50); font-size: var(--gab-text-sm); font-weight: 600; color: var(--gab-gray-700); } /* 중개 안내 블록만 카드가 아니라 맨몸으로 떠 있었고 헤더가 flex 가 아니었다 */ .gab-exprofile { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); padding: 18px; } .gab-exprofile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } /* 템플릿은 is-current 를 출력하는데 CSS는 is-done 만 잡아 현재 단계가 안 보였다 */ .gab-exprofile-step.is-current { border-color: var(--gab-primary-200); background: var(--gab-primary-50); } .gab-exprofile-step.is-current .gab-exprofile-step-dot { background: var(--gab-primary-600); color: #fff; } .gab-exprofile-step.is-done .gab-exprofile-step-dot { background: #EAF7EF; color: var(--gab-success); } /* ===== 38-3. 정적 페이지 ===== */ /* inline-flex 로 바뀌면서 마크업 공백이 삭제됐는데 gap 이 없어 아이콘이 첫 글자를 파고들었다 */ .gab-page-hero-badge { align-items: center; gap: 6px; } /* 히어로 콘텐츠 폭을 본문 컨테이너와 같은 토큰으로 통일 (좌측 기준선 어긋남) */ .gab-page-hero--visual .gab-page-hero-inner { max-width: var(--gab-container-xl); } /* '01 요청 / 02 확보 / 03 중개' 태그가 맨 텍스트로 흘렀다 (§35-2 보강) */ .hicm-form-companion-tags { display: flex; flex-wrap: wrap; gap: 6px; } .hicm-form-companion-tags em { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--gab-gray-100); border: 1px solid var(--gab-gray-200); font-size: var(--gab-text-xs); font-weight: 700; font-style: normal; color: var(--gab-gray-600); } /* ===== 38-4. 인증 ===== */ /* input 컴포넌트가 아이콘을 입력창 안에 겹치는 마크업을 내는데 규칙이 전무했다 */ .gab-field__wrap { position: relative; display: flex; align-items: center; } .gab-field__wrap--icon .gab-field__icon { position: absolute; inset-inline-start: 14px; display: flex; align-items: center; color: var(--gab-gray-400); font-size: 15px; pointer-events: none; z-index: 1; } .gab-field__wrap--icon .gab-field__input { padding-inline-start: 40px; width: 100%; } /* 서류 진행 카운터를 프로그레스 바에서 떼어냈으니 텍스트 스타일을 준다 */ .gab-docup-progress { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-500); white-space: nowrap; } /* 비밀번호 강도 바가 빈 입력에서도 100% 초록이라 에러 문구와 모순됐다 */ .gab-pwbar > span { width: 0; background: var(--gab-gray-300); } .gab-pwbar.is-weak > span { width: 33%; background: var(--gab-danger); } .gab-pwbar.is-fair > span { width: 66%; background: var(--gab-warning); } .gab-pwbar.is-strong > span { width: 100%; background: var(--gab-success); } /* JS 는 is-selected 를 붙이는데 CSS 는 is-on 만 잡아 선택 카드가 표시되지 않았다 */ .gab-type-card.is-selected { border-color: var(--gab-primary-600); background: var(--gab-primary-50); box-shadow: var(--gab-ring); } /* 가입 언어 게이트 헤더가 사실상 무스타일이었다 (h1 이 본문과 같은 14px) */ .gab-reglang { max-width: 860px; margin-inline: auto; text-align: center; } .gab-reglang-head { margin-bottom: 28px; } .gab-reglang-title { font-size: var(--gab-text-3xl); font-weight: 800; margin: 0 0 8px; letter-spacing: var(--gab-tracking-tight); } .gab-reglang-sub { color: var(--gab-gray-500); font-size: var(--gab-text-md); margin: 0; } .gab-reglang-card .gab-reglang-cur { margin-top: auto; } .gab-reglang-go { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gab-gray-100); color: var(--gab-gray-600); flex-shrink: 0; } .gab-reglang-card:hover .gab-reglang-go { background: var(--gab-primary-600); color: #fff; } /* 가입 전용 헤더에 거터가 없어 로고·언어 알약이 화면 끝에 붙었다 */ .gab-reg-header-inner { max-width: 1400px; margin-inline: auto; padding-inline: 20px; } /* 파일 입력만 OS 기본 위젯이라 이질적이었다 */ input[type="file"] { font-size: var(--gab-text-sm); color: var(--gab-gray-600); } input[type="file"]::file-selector-button { margin-inline-end: 10px; min-height: 38px; padding: 0 16px; border: 1px solid var(--gab-gray-200); border-radius: 10px; background: var(--gab-gray-50); font-weight: 700; color: var(--gab-gray-700); cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--gab-gray-100); } /* 접기 영역에 브라우저 기본 마커와 커스텀 셰브론이 동시에 떴다 */ .gab-lsec-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; } .gab-lsec-more > summary::-webkit-details-marker { display: none; } .gab-lsec-more-caret { margin-inline-start: auto; transition: transform .2s ease; } .gab-lsec-more[open] .gab-lsec-more-caret { transform: rotate(180deg); } /* ===== 38-5. 마이페이지 ===== */ /* 빈 상태의 유일한 CTA 가 버튼 스타일을 통째로 잃고 맨 텍스트였다 */ .gab-fav-empty-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 24px; border-radius: var(--gab-radius-md); background: var(--gab-primary-600); color: #fff; font-size: var(--gab-text-sm); font-weight: 800; } .gab-fav-empty-cta:hover { background: var(--gab-primary-700); color: #fff; } .gab-fav-empty-cta:focus-visible { outline: 2px solid var(--gab-primary-600); outline-offset: 2px; } .gab-fav-empty-s { display: block; color: var(--gab-gray-400); font-size: var(--gab-text-sm); margin: 6px 0 18px; } /* 빈 상태 컨테이너를 세 페이지 공통 카드로 통일 */ .gab-fav-empty, .gab-my-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); } /* 카드가 3개인데 그리드가 4열이라 오른쪽 한 칸이 통째로 비었다 */ .hicm-my-summary, .hicm-my-quick-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* 설명문 줄 수가 달라 같은 행 제목 베이스라인이 어긋났다 */ .hicm-my-quick-grid a { align-items: flex-start; } .hicm-my-quick-grid a > i { margin-top: 2px; } /* ===== 38-6. 딜러 SELLER OS ===== */ /* 멤버십 한도 패널이 8px 트랙 규칙에 눌려 글자가 잘렸다 (트랙은 __track 으로 분리했다) */ .hicm-dcc-capacity { display: flex; flex-direction: column; gap: 8px; height: auto; overflow: visible; } /* 페이지 헤더 블록에 CSS 가 하나도 없어 h1 이 본문과 같은 14px 로 흘렀다 */ .hicm-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .hicm-pagehead h1 { font-size: var(--gab-text-2xl); margin: 4px 0 0; letter-spacing: var(--gab-tracking-tight); } .hicm-pagehead p { margin: 6px 0 0; color: var(--gab-gray-500); font-size: var(--gab-text-sm); } .hicm-pagehead__eyebrow { display: block; } /* 콘텐츠 영역 패딩 규칙이 .gab-dash-main 에만 걸려 있고 마크업은 .gab-dpro 라 여백이 0 이었다 */ .gab-dash > main, .gab-dpro, main.hicm-dcc { min-width: 0; padding: 24px 28px 80px; } /* 상태 필터 탭이 스타일 없는 맨 버튼이라 활성 탭을 알 수 없었다 */ .hicm-inventory-tabs, .hicm-inquiry-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .hicm-inventory-tabs > button, .hicm-inquiry-tabs button { min-height: 36px; padding: 7px 14px; border: 1px solid var(--gab-gray-200); border-radius: 999px; background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-600); cursor: pointer; transition: var(--gab-transition-fast); } .hicm-inventory-tabs > button:hover, .hicm-inquiry-tabs button:hover { border-color: var(--gab-gray-400); color: var(--gab-gray-900); } .hicm-inventory-tabs > button.is-active, .hicm-inquiry-tabs button.is-active { background: var(--gab-gray-900); border-color: var(--gab-gray-900); color: #fff; } .hicm-inventory-tabs > button b, .hicm-inquiry-tabs button b { margin-inline-start: 6px; opacity: .7; font-weight: 700; } /* KPI 타일이 카드 스타일 없이 맨 텍스트로 흘렀다 */ .hicm-inquiry-kpis article { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); } .hicm-inquiry-kpis article strong { display: block; font-size: var(--gab-text-2xl); line-height: 1.2; } .hicm-inquiry-kpis article span { font-size: var(--gab-text-xs); color: var(--gab-gray-500); } /* 일괄 상태 변경 버튼이 평문 텍스트라 클릭 대상으로 안 읽혔다 (게시종료 같은 파괴적 동작 포함) */ .hicm-inventory-selection button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--gab-gray-200); border-radius: 10px; background: #fff; font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-700); cursor: pointer; } .hicm-inventory-selection button:hover { border-color: var(--gab-gray-900); color: var(--gab-gray-900); } /* 검색 아이콘이 입력창 안이 아니라 위 줄에 떠 있었다 */ .hicm-inventory-search { position: relative; display: block; } .hicm-inventory-search i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--gab-gray-400); pointer-events: none; } .hicm-inventory-search input { width: 100%; padding-inline-start: 40px; } /* 상태 배지 모디파이어가 실제 상태 키와 하나도 안 맞아 전부 회색이었다 */ .hicm-dcc-status--verified, .hicm-dcc-status--active, .hicm-dcc-status--published, .hicm-dcc-status--ok, .hicm-dcc-status--done, .hicm-dcc-status--sold { background: #EAF7EF; color: var(--gab-success); } .hicm-dcc-status--wait, .hicm-dcc-status--new, .hicm-dcc-status--review, .hicm-dcc-status--pending, .hicm-dcc-status--pending_review, .hicm-dcc-status--paused { background: #FDF5E7; color: var(--gab-warning); } .hicm-dcc-status--alert, .hicm-dcc-status--over, .hicm-dcc-status--rejected, .hicm-dcc-status--suspended, .hicm-dcc-status--expired { background: var(--gab-primary-50); color: var(--gab-primary-700); } /* KPI 색상 모디파이어에 규칙이 하나도 없어 5개 칩이 전부 같은 회색이었다 */ .hicm-dcc-kpi--navy .hicm-dcc-kpi__icon { background: #EBF2FE; color: var(--gab-info); } .hicm-dcc-kpi--cyan .hicm-dcc-kpi__icon { background: #E6F6FA; color: #0E7490; } .hicm-dcc-kpi--amber .hicm-dcc-kpi__icon { background: #FDF5E7; color: var(--gab-warning); } .hicm-dcc-kpi--violet .hicm-dcc-kpi__icon { background: #F1EDFD; color: #6D28D9; } .hicm-dcc-kpi--green .hicm-dcc-kpi__icon { background: #EAF7EF; color: var(--gab-success); } /* 보조문구 유무로 큰 숫자 베이스라인이 어긋났다 */ .hicm-dcc-kpi { align-items: flex-start; } /* 빈 상태 CTA 가 맨 텍스트 링크였다 */ .hicm-dcc-empty a { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 40px; padding: 10px 18px; border-radius: 10px; background: var(--gab-primary-600); color: #fff; font-weight: 800; font-size: var(--gab-text-sm); } .hicm-dcc-empty a:hover { background: var(--gab-primary-700); color: #fff; } /* 재고 품질 지표 칩이 스타일 없이 붙어 '0 노출 준비0 보강 필요' 로 읽혔다 */ .hicm-dcc-card__head .is-ready, .hicm-dcc-card__head .is-attention { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; } .hicm-dcc-card__head .is-ready { background: #EAF7EF; color: var(--gab-success); } .hicm-dcc-card__head .is-attention { background: #FDF5E7; color: var(--gab-warning); } /* 전체폭 인증 상태 섹션이 배지 규칙을 상속받아 패딩 3px 로 눌려 있었다 */ .hicm-verification-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); } .hicm-verification-status img { max-width: 84px; height: auto; flex-shrink: 0; } /* 등록 폼 카드 본문에 좌우 패딩이 없어 입력창이 카드 테두리에 붙었다 */ .gab-lsec > form, .gab-lsec > .gab-grid, .gab-lsec > .gab-field, .gab-lsec > .gab-reg-form-grid, .gab-lsec-body { padding-inline: 18px; padding-bottom: 18px; } .gab-lsec > .gab-lsec-head { padding-inline: 18px; } /* 국가 선택 컴포넌트만 높이가 달라 좌우 필드가 어긋났다 */ .gab-reg-form-grid, .hicm-profile-grid, .gab-form-grid { align-items: start; } /* ===== 38-7. 모바일 ===== */ @media (max-width: 768px) { /* 퀵바가 세로 컬럼으로 무너지고 칩 17개가 17줄로 쌓였다 — 원래 의도인 가로 스크롤로 복구 */ .gab-qbar { flex-direction: column; align-items: stretch; gap: 10px; } .gab-qbar-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: none; } .gab-qbar-chips::-webkit-scrollbar { display: none; } .gab-qbar-chips > * { flex: 0 0 auto; scroll-snap-align: start; } /* 정렬 시트는 모바일에서만 뜬다 (PC 는 §38 상단에서 display:none) */ .gab-sort-sheet { display: block; } /* 마이페이지 제목이 화면 좌측 끝(x=0)에 붙었다 */ .gab-my-content { padding-inline: 16px; } /* 가로 스크롤 내비에 스크롤 가능 신호가 없어 3개 메뉴가 잘린 줄 몰랐다 */ .gab-my-nav { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } [dir="rtl"] .gab-my-nav { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); } .gab-my-nav > * { scroll-snap-align: start; } /* 고정 탭바가 푸터 마지막 줄(이용약관·개인정보처리방침)을 영구히 가렸다 */ .gab-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* 딜러 본문이 화면 가장자리에 그대로 닿았다 */ .gab-dash > main, .gab-dpro, main.hicm-dcc { padding: 16px 16px 80px; } /* 서류 업로드 하단 안내 2개가 space-between 을 유지해 글자가 3줄로 깨졌다 */ .gab-docup-foot { flex-direction: column; align-items: flex-start; gap: 6px; } /* 텍스트 링크형 컨트롤 터치 타깃 확보 */ .gab-section-link, .hicm-deal-link, .gab-mkpick-allbtn, .gab-proof-link, .gab-car-card-inquiry, .gab-auth-forgot, .gab-encar-head a { display: inline-flex; align-items: center; min-height: 32px; padding-block: 4px; } } /* 38-8. 인라인 스타일 제거분 대체 클래스 */ .hicm-block-center { text-align: center; margin-bottom: var(--gab-space-12); } .gab-parts-submit--secondary { background: #fff; color: var(--gab-primary-600); border: 1px solid var(--gab-primary-600); } .gab-parts-submit--secondary:hover { background: var(--gab-primary-50); color: var(--gab-primary-700); } /* 38-9. 모바일 터치 타깃 마무리 (실측 잔여분) 카드 제목·상단바 링크·필터 초기화가 18~21px 로 최소 24px 미만이었다. 글자 크기는 그대로 두고 히트 영역만 넓힌다. */ @media (max-width: 768px) { .gab-car-card-title a { display: block; padding-block: 4px; } .gab-top-bar-right a, .gab-top-bar-left a:not(.hicm-langbar-item) { display: inline-flex; align-items: center; min-height: 26px; } .gab-filter-reset, .gab-qbar-reset { display: inline-flex; align-items: center; min-height: 26px; padding-inline: 4px; } } @media (max-width: 768px) { /* 푸터 링크 열·브레드크럼·인증 하단 링크가 15~21px 라 손가락으로 누르기 어려웠다 */ .gab-footer-col a, .gab-footer-links a, .gab-footer-nav a { display: inline-flex; align-items: center; min-height: 28px; } .gab-breadcrumb a, .gab-breadcrumb span { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; min-width: 26px; } /* 짧은 라벨(홈 등)은 폭까지 24px 를 못 채워서 가로 여백을 더 준다 */ .gab-footer-col a, .gab-footer-links a, .gab-footer-nav a { min-width: 26px; padding-inline: 2px; } .gab-auth-signup a, .gab-auth-ssl a { display: inline-flex; align-items: center; min-height: 26px; } } /* 38-10. FAQ '빠른 도움말' 스트립 — 클래스 없는 맨 마크업이라 간격 0으로 붙어 읽혔다 */ .hicm-helpstrip { align-items: center; gap: 16px; padding: 20px; overflow: visible; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); } .hicm-helpstrip-copy { min-width: 0; flex: 1; } .hicm-helpstrip-eyebrow { display: block; margin-bottom: 6px; font-size: var(--gab-text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gab-primary-600); } .hicm-helpstrip-title { display: block; font-size: var(--gab-text-lg); margin-bottom: 6px; letter-spacing: var(--gab-tracking-snug); } .hicm-helpstrip-copy p { margin: 0; font-size: var(--gab-text-sm); line-height: 1.65; color: var(--gab-gray-500); } .hicm-helpstrip-go { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--gab-primary-600); color: #fff; font-size: 18px; } .hicm-helpstrip-go:hover { background: var(--gab-primary-700); color: #fff; } /* 푸터 약관 링크 터치 타깃 */ @media (max-width: 768px) { .gab-footer-legal a { display: inline-flex; align-items: center; min-height: 28px; } .hicm-helpstrip { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 768px) { /* 가입 전용 헤더 내비 링크 (22px) */ .gab-reg-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 28px; } } /* 38-11. 마이 대시보드 히어로 캐릭터가 컨테이너를 44px 넘쳐 뷰포트 밖으로 나갔다 */ .hicm-my-welcome { overflow: hidden; } .hicm-my-welcome-character { min-width: 0; flex-shrink: 1; display: flex; justify-content: flex-end; } .hicm-my-welcome-character img { max-width: 100%; height: auto; } /* 38-12. 홈 정렬 마무리 (감사 #42 · #43) · 4단계 카드: 설명 줄 수가 달라 역할 칩 베이스라인이 22px 어긋났다 → 칩을 카드 하단에 고정 · 보장 섹션만 max-width 1180px 이라 다른 섹션(1280px)과 좌측 기준선이 49px 어긋났다 */ .hicm-deal-step { display: flex; flex-direction: column; height: 100%; } .hicm-deal-step p { flex: 1 0 auto; } .hicm-deal-step-who { margin-top: auto; align-self: flex-start; } .hicm-assure .gab-how-inner { max-width: var(--gab-container-xl); padding-inline: 20px; } /* 브랜드 레일이 잘린 지점에서 "더 있다"는 신호를 준다 (max-height 스크롤) */ .hicm-hx--brokerage .gab-encar-brands { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); } @media (max-width: 768px) { .hicm-hx--brokerage .gab-encar-brands { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); } [dir="rtl"] .hicm-hx--brokerage .gab-encar-brands { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent); } } /* ================================================================ * 39. v172 — 단계별 브랜드 필터 · 로딩 피드백 * ---------------------------------------------------------------- * "브랜드가 클릭이 안 된다"의 실제 원인은 두 가지였다. * ① AJAX 응답이 수 초 걸리는데 #gab-bar / .is-loading 에 CSS가 하나도 없어 * 화면에 아무 변화가 없었다 → 죽은 버튼처럼 보였다. * ② 브랜드를 골라도 사이드바가 갱신되지 않아 다음 단계로 넘어가는 느낌이 없었다. * 여기서 로딩 피드백을 만들고, 브랜드→모델 2단계 UI를 스타일링한다. * ================================================================ */ /* --- 39-1. 상단 진행 바 --- */ #gab-bar { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--gab-z-tooltip); height: 3px; width: 0; background: linear-gradient(90deg, var(--gab-primary-600), var(--gab-primary-400)); box-shadow: 0 0 10px rgba(216, 52, 44, .55); transition: width .35s ease, opacity .3s ease .15s; opacity: 1; pointer-events: none; } #gab-bar.is-done { opacity: 0; } /* --- 39-2. 결과 영역 로딩 상태 --- */ .gab-list-results { position: relative; } .gab-list-results.is-loading { pointer-events: none; } .gab-list-results.is-loading > * { opacity: .38; transition: opacity .15s ease; } .gab-list-results.is-loading::after { content: ""; position: absolute; inset-block-start: 60px; inset-inline-start: 50%; width: 34px; height: 34px; margin-inline-start: -17px; z-index: 3; border: 3px solid var(--gab-gray-200); border-top-color: var(--gab-primary-600); border-radius: 50%; animation: gab-spin .7s linear infinite; } @keyframes gab-spin { to { transform: rotate(360deg); } } /* 필터 사이드바도 교체 중임을 알린다 */ .gab-filter-sidebar.is-swapping { opacity: .5; } /* --- 39-3. 브랜드 → 모델 단계별 --- */ .hicm-bstep .gab-filter-group-title { display: flex; align-items: center; gap: 8px; } .hicm-bstep-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--gab-gray-100); color: var(--gab-gray-500); font-size: 10.5px; font-weight: 800; letter-spacing: .01em; } .hicm-bstep.is-step2 .hicm-bstep-badge { background: var(--gab-primary-50); color: var(--gab-primary-700); } .hicm-bstep .gab-filter-group-title > .bi-chevron-up { margin-inline-start: auto; } .hicm-bstep-picked { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; background: var(--gab-primary-50); border: 1px solid var(--gab-primary-200); border-radius: var(--gab-radius-md); } .hicm-bstep-picked-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 100%; font-size: var(--gab-text-sm); font-weight: 800; color: var(--gab-primary-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hicm-bstep-picked-name i { font-size: 13px; } .hicm-bstep-back { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-height: 30px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gab-primary-200); background: #fff; font-size: var(--gab-text-xs); font-weight: 700; color: var(--gab-primary-700); cursor: pointer; transition: var(--gab-transition-fast); } .hicm-bstep-back:hover { background: var(--gab-primary-600); border-color: var(--gab-primary-600); color: #fff; } .hicm-bstep-back i { font-size: 12px; } [dir="rtl"] .hicm-bstep-back i { transform: scaleX(-1); } /* 모델이 많으면 세로로 길어지므로 스크롤 + 페이드 */ .hicm-bstep.is-step2 .gab-filter-chips { max-height: 320px; overflow-y: auto; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); padding-bottom: 8px; } @media (max-width: 768px) { .hicm-bstep-picked { padding: 9px 10px; } .hicm-bstep.is-step2 .gab-filter-chips { max-height: 44vh; } .gab-list-results.is-loading::after { inset-block-start: 30px; } } /* ================================================================ * 40. v172 — 브랜드 정리: 흰 배경 · 검정 글씨 · 레드 포인트 * ---------------------------------------------------------------- * 기획서 브랜드 규칙(흰 배경 / 검정 텍스트 / 레드 #D8342C 포인트)로 되돌린다. * · 큰 면적의 회색 배경을 흰색으로 바꾸고, 구획은 색이 아니라 헤어라인으로 나눈다. * · 본문 보조 텍스트를 한 단계 어둡게 올려 "검정 글씨"에 가깝게 만든다. * · 다크 섹션(히어로·보장·CTA·푸터)은 대비를 만드는 장치라 그대로 둔다. * ================================================================ */ :root { /* 회색 배경을 거의 흰색으로 — 완전 흰색과 구분되되 회색으로 읽히지 않는 선 */ --gab-surface: #FCFCFD; /* 본문 보조 텍스트: gray-500(#6B7280) → 한 단계 진하게 */ --gab-text-body: #303740; --gab-text-muted: #5A6472; } /* --- 40-1. 큰 면적 배경 흰색화 --- */ .gab-aw-stats, .gab-reco-section { background: #fff; } .gab-section[style*="gray-50"] { background: var(--gab-surface) !important; } .gab-fav-empty, .gab-my-empty { background: #fff; } .hicm-deal-foot { background: var(--gab-surface); } .hicm-helpstrip { background: var(--gab-surface); } .gab-cta-box { background: var(--gab-surface); } /* 다크 히어로(.gab-buyreq-hero 등)까지 흰색으로 덮으면 흰 글씨가 사라진다 */ .gab-page-hero:not(.gab-buyreq-hero):not([class*="--dark"]) { background: #fff; } .gab-lsec, .gab-my-panel, .gab-dash-card { background: #fff; } .gab-dash, .gab-my, body.gab-page-dealer, body.gab-page-member { background: #fff; } /* 필드 채움색도 한 톤 밝게 (v169 채움형 유지하되 회색기 제거) */ :root { --gab-field-bg: #F6F7F9; --gab-field-bg-hover: #EFF1F4; } /* --- 40-2. 본문 글씨를 검정 쪽으로 --- */ .gab-section-header p, .hicm-deal-head p, .hicm-deal-step p, .gab-page-hero-desc, .gab-content-block p, .gab-car-card-spec, .gab-my-sub, .gab-lsec-desc, .hicm-pagehead p, .gab-proof-body p { color: var(--gab-text-body); } .gab-car-card-brand, .gab-notice-num, .gab-car-card-number, .gab-seller-meta, .hicm-quick-head span { color: var(--gab-text-muted); } /* 카드 제목·가격은 순검정 계열 유지 */ .gab-car-card-title a, .gab-lsec-head strong, .gab-my-title { color: var(--gab-gray-900); } /* 다크 섹션은 위 규칙에서 제외 (흰 글씨 유지) */ .gab-footer .gab-section-header p, .hicm-assure .gab-how-sub, .hicm-hx--brokerage .gab-hx-sub, .gab-cta-desc { color: var(--gab-on-dark); } .hicm-hx--brokerage .hicm-quick-head span { color: var(--gab-gray-500); } /* --- 40-3. 로고 마크 (어드바이저 캐릭터) --- */ .gab-logo-icon { width: 48px; height: 48px; border-radius: 0; background: transparent; border: 0; overflow: visible; flex-shrink: 0; padding: 0; } .gab-logo-icon .hicm-logo-mark { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; transform: none; } .gab-logo:hover .gab-logo-icon { border-color: var(--gab-primary-300); } .gab-logo-name { font-size: 19px; letter-spacing: -0.4px; } .gab-logo-tagline { font-size: 11px; font-weight: 600; color: #6B7280; letter-spacing: -0.01em; } /* 다크 배경(푸터·가입 헤더)에서는 프레임을 어둡게 */ .gab-footer .gab-logo-icon, .gab-auth-brand .gab-logo-icon { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); } .gab-footer .gab-logo-tagline { color: rgba(255, 255, 255, .55); } /* --- 40-4. 헤더 정돈 --- */ .gab-site-header { border-bottom: 1px solid var(--gab-gray-200); } .gab-main-header-inner { gap: 16px; } .gab-nav-item small { color: var(--gab-text-muted); } /* --- 40-5. 모바일 최적화 --- */ @media (max-width: 768px) { /* 로고: 태그라인을 숨기지 않고 한 줄로 붙여 브랜드 메시지를 유지한다 */ .gab-logo-icon { width: 38px; height: 38px; border-radius: 11px; } .gab-logo-name { font-size: 16px; } .gab-logo-tagline { display: block; font-size: 9.5px; } /* 본문 세로 리듬을 한 단계 촘촘하게 — 스크롤 길이를 줄인다 */ .gab-section-header { margin-bottom: 18px; } .gab-section-header h2 { font-size: var(--gab-text-xl); } .gab-section-header p { font-size: var(--gab-text-sm); } .gab-cars-grid, .gab-reco-grid { gap: 12px; } /* 카드 밀도: 모바일 1열에서 이미지가 너무 크던 것을 줄인다 */ .gab-ccg-main { aspect-ratio: 3 / 2; } .gab-car-card-body { padding: 13px 14px 14px; } .gab-car-card-title { font-size: var(--gab-text-md); line-height: 1.4; } /* 가로 스크롤 영역은 화면 끝까지 흘려보내 잘린 느낌을 없앤다 */ .gab-qbar-chips, .gab-my-nav, .gab-detail-tabs { margin-inline: -16px; padding-inline: 16px; } /* 입력·버튼 최소 높이 통일 (iOS 확대 방지 위해 16px 이상) */ input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], select, textarea, .gab-field__input { font-size: 16px; min-height: 48px; } .gab-btn-lg, .gab-parts-submit, .gab-auth-submit { min-height: 50px; } } /* 선택한 브랜드명이 뒤로가기 버튼에 밀려 잘리던 것 — 이름을 한 줄 통째로 쓰고 버튼은 아래 줄로 */ .hicm-bstep-picked-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } .hicm-bstep-back { margin-inline-start: auto; } /* ================================================================ * 41. v172 — 모바일 차량목록 컨트롤 중복 정리 * ---------------------------------------------------------------- * 모바일에서 같은 기능이 세 벌씩 쌓여 있었다. * 상단 "필터" 버튼(.gab-filter-mtoggle) + 정렬 탭(.gab-sort-tabs) * + 퀵바의 필터/정렬/보기/초기화(.gab-qbar-*) * 퀵바는 "칩 가로 스크롤"만 남기고 나머지 중복 컨트롤을 접는다. * ================================================================ */ @media (max-width: 768px) { .gab-qbar { flex-direction: row; align-items: center; gap: 0; padding: 0; border: 0; background: transparent; } .gab-qbar-filter, .gab-qbar-sort, .gab-qbar-view, .gab-qbar-reset, .gab-qbar-divider { display: none; } .gab-qbar-chips { flex: 1 1 auto; margin-block: 4px 10px; } /* 정렬 탭은 줄바꿈 대신 가로 스크롤 (2줄로 접히며 높이를 먹던 문제) */ .gab-sort-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-inline: -16px; padding-inline: 16px; padding-bottom: 4px; scrollbar-width: none; scroll-snap-type: x proximity; } .gab-sort-tabs::-webkit-scrollbar { display: none; } .gab-sort-tabs > * { flex: 0 0 auto; scroll-snap-align: start; } /* 툴바를 한 줄로 — 보기모드 + 개수만 남긴다 */ .gab-list-toolbar { display: flex; flex-direction: column; gap: 10px; } .gab-list-toolbar-row, .gab-list-toolbar > div { min-width: 0; } .gab-list-view-toggle, .gab-perpage-select { flex-shrink: 0; } /* 상단 필터 버튼을 눈에 띄게 (모바일의 유일한 필터 진입점) */ .gab-filter-mtoggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-md); background: #fff; font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-900); box-shadow: var(--gab-shadow-sm); } .gab-filter-mtoggle i:first-child { color: var(--gab-primary-600); } } /* 42. v172 — 가입 언어 카드의 캐릭터가 클래스 없이 렌더돼 어색하게 찌그러졌다 */ .hicm-reglang-character { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 72px; overflow: hidden; margin-bottom: 2px; } .hicm-reglang-character img { width: auto; height: 100%; max-width: none; object-fit: contain; object-position: center bottom; } .gab-reglang-card { padding: 14px 10px 16px; gap: 5px; transition: var(--gab-transition-fast); } .gab-reglang-card:hover { border-color: var(--gab-primary-300); box-shadow: var(--gab-shadow-sm); transform: translateY(-2px); } .gab-reglang-native { font-size: var(--gab-text-md); font-weight: 800; color: var(--gab-gray-900); } .gab-reglang-en { font-size: var(--gab-text-xs); color: var(--gab-text-muted); } .gab-reglang-ctx { font-size: var(--gab-text-xs); color: var(--gab-text-body); min-height: 2em; } .gab-reglang-cur { font-size: var(--gab-text-sm); font-weight: 800; color: var(--gab-primary-600); } .gab-reglang-flag img { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--gab-gray-200); } /* 가입 전용 헤더 로고도 본 헤더와 같은 프레임 */ .gab-reg-logo-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gab-primary-50); border: 1px solid var(--gab-primary-100); overflow: hidden; display: flex; } .gab-reg-logo-icon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.42); transform-origin: 50% 22%; } .gab-reg-logo-tag { font-size: 11px; font-weight: 700; color: var(--gab-primary-600); } /* 원본 face 이미지 오른쪽에 잘린 오브젝트 조각이 남아 있어 얼굴만 정사각으로 크롭한다 */ .hicm-reglang-character { width: 72px; height: 72px; margin-inline: auto; border-radius: 50%; background: var(--gab-gray-50); } .hicm-reglang-character img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 42%; transform: scale(1.18); } /* 다크 페이지 히어로는 배경·글자색을 명시적으로 되돌린다 (팔레트 정리 회귀 방지) */ .gab-buyreq-hero { background: var(--gab-gray-900); } .gab-buyreq-hero .gab-page-hero-title { color: #fff; } .gab-buyreq-hero .gab-page-hero-desc { color: rgba(255,255,255,.68); } .gab-buyreq-hero .gab-page-hero-badge { background: rgba(216,52,44,.18); border-color: rgba(238,147,135,.4); color: #FFD9D4; } @media (max-width: 768px) { /* 적용된 필터 칩의 X 버튼과 전체 초기화 링크 터치 타깃 (13x21 / 74x21) */ .gab-filter-chip button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-inline-start: 2px; border-radius: 50%; } .gab-filter-chip button:hover { background: rgba(216, 52, 44, .10); } .gab-active-filters-clear { display: inline-flex; align-items: center; min-height: 28px; padding-inline: 4px; } } /* ================================================================ * 43. v173 — 모바일 앱식 레이아웃 (Full-bleed) * ---------------------------------------------------------------- * 문제: 모바일에서 .gab-container 의 좌우 16px 거터 때문에 모든 서피스가 * x=16 / w=358 로 앉아 웹페이지처럼 보였다(뷰포트 390). * 방침: 글이 있는 블록은 거터를 유지하되, "서피스"(검색 패널·지표·카드 리스트· * 레일)는 -16px 네거티브 마진으로 화면 끝까지 흘려보내고 패딩을 안으로 옮긴다. * 카드 리스트는 떠 있는 라운드 카드 대신 네이티브 리스트처럼 구분선으로 나눈다. * ================================================================ */ @media (max-width: 768px) { :root { --gab-gutter: 16px; --gab-tabbar-h: 62px; --gab-appbar-h: 54px; } /* ===== 43-1. 앱 크롬: 헤더 ===== */ .gab-site-header { position: sticky; top: 0; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--gab-gray-200); padding-top: env(safe-area-inset-top); } .gab-main-header-inner { min-height: var(--gab-appbar-h); gap: 10px; } .gab-burger { width: 40px; height: 40px; border-radius: 12px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); font-size: 19px; color: var(--gab-gray-900); } .gab-header-cta .gab-btn-icon, .gab-header-cta > a { width: 40px; height: 40px; border-radius: 12px; } /* 상단 언어 띠: 앱 상태바처럼 얇게 */ .gab-top-bar-inner { min-height: 32px; } /* ===== 43-2. 앱 크롬: 하단 탭바 ===== */ body { padding-bottom: calc(var(--gab-tabbar-h) + env(safe-area-inset-bottom)); } .gab-tabbar { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--gab-gray-200); box-shadow: 0 -1px 12px rgba(17, 19, 24, .05); min-height: var(--gab-tabbar-h); } .gab-tabbar-item { padding: 9px 4px 7px; gap: 4px; } .gab-tabbar-label { font-size: 10.5px; letter-spacing: -.02em; } /* 활성 탭에 상단 인디케이터 (네이티브 탭 느낌) */ .gab-tabbar-item.is-active::before { content: ""; position: absolute; top: 0; inset-inline: 26%; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--gab-primary-600); } .gab-tabbar-cta-btn { width: 50px; height: 50px; margin-top: -24px; font-size: 22px; } .hicm-platform-float { bottom: calc(var(--gab-tabbar-h) + 12px + env(safe-area-inset-bottom)); } /* ===== 43-3. 풀블리드 유틸 ===== 거터를 가진 .gab-container 안에서 서피스를 화면 끝까지 넓힌다. */ .gab-encar, .hicm-guard, .hicm-intent-rail, .gab-cars-grid, .gab-reco-grid, .hicm-assure-grid, .gab-proof-grid, .hicm-deal-foot, .gab-aw-stats-grid { margin-inline: calc(var(--gab-gutter) * -1); width: calc(100% + var(--gab-gutter) * 2); } /* ===== 43-4. 히어로 검색 패널 = 앱 시트 ===== */ .hicm-hx--brokerage .gab-encar { border-radius: 0; border-inline: 0; box-shadow: none; padding: 18px var(--gab-gutter) 4px; } .hicm-hx--brokerage .gab-hx-inner { padding-block: 20px 0; } .hicm-hx--brokerage .gab-hx-copy { margin-bottom: 16px; } /* 브랜드 레일: 화면 끝까지 흘리고 스냅 */ .hicm-hx--brokerage .gab-encar-brands { margin-inline: calc(var(--gab-gutter) * -1); padding-inline: var(--gab-gutter); scroll-snap-type: x proximity; gap: 8px; } .hicm-hx--brokerage .gab-encar-brands .gab-mkpick-brand { scroll-snap-align: start; } .gab-mkpick-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } /* 조건 칩도 끝까지 */ .hicm-quick { margin-inline: calc(var(--gab-gutter) * -1); padding-inline: var(--gab-gutter); } .hicm-quick-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gab-gutter) * -1); padding-inline: var(--gab-gutter); scroll-snap-type: x proximity; } .hicm-quick-chips::-webkit-scrollbar { display: none; } .hicm-quick-chips > * { flex: 0 0 auto; scroll-snap-align: start; } /* ===== 43-5. 지표·진입 카드 = 앱 리스트 ===== */ .hicm-guard { border-radius: 0; border-inline: 0; margin-top: 18px; } .hicm-intent-rail { gap: 0; margin-top: 0; } .hicm-hx--brokerage .hicm-intent { border-radius: 0; border-inline: 0; border-top: 0; padding: 14px var(--gab-gutter); } .hicm-hx--brokerage .hicm-intent:first-child { border-top: 1px solid var(--gab-hairline-dark); } /* ===== 43-6. 매물 카드 = 네이티브 리스트 ===== */ .gab-cars-grid, .gab-reco-grid { gap: 0; } .gab-cars-grid .gab-car-card, .gab-reco-grid .gab-car-card { border-radius: 0; border-inline: 0; border-top: 0; box-shadow: none; } .gab-cars-grid .gab-car-card:first-child, .gab-reco-grid .gab-car-card:first-child { border-top: 1px solid var(--gab-gray-200); } .gab-cars-grid .gab-car-card:active { background: var(--gab-gray-50); } .gab-car-card-body { padding: 13px var(--gab-gutter) 15px; } .gab-ccg-main { aspect-ratio: 16 / 10; } /* ===== 43-7. 섹션 = 앱 블록 ===== */ .gab-section, .hicm-deal, .hicm-assure { padding-block: 30px; } .gab-section-header { margin-bottom: 14px; } .gab-section-header h2 { font-size: 19px; letter-spacing: -.03em; } .gab-section-header p { font-size: 13px; } .gab-aw-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gab-gray-200); } .gab-aw-stat { background: #fff; border-radius: 0; border: 0; padding: 14px var(--gab-gutter); } .hicm-assure-card, .gab-proof-card { border-radius: 0; border-inline: 0; } .hicm-assure-grid { gap: 1px; } .hicm-deal-foot { border-radius: 0; border-inline: 0; } /* 섹션 사이 구분선 (배경색 대신 헤어라인으로 나눈다 — 흰 배경 규칙 유지) */ .gab-section + .gab-section, .hicm-deal + .gab-aw-stats { border-top: 1px solid var(--gab-gray-200); } /* ===== 43-8. 스크롤 레일 공통 ===== */ .gab-qbar-chips, .gab-sort-tabs, .gab-my-nav, .gab-detail-tabs, .gab-filter-chips { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ===== 43-9. 터치 피드백 (앱 느낌) ===== */ .gab-fchip, .gab-qchip, .hicm-quick-chip, .gab-mkpick-brand, .gab-encar-tab, .gab-tabbar-item, .gab-car-card, .hicm-intent { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .gab-fchip:active, .gab-qchip:active, .hicm-quick-chip:active { transform: scale(.96); } .hicm-intent:active { background: rgba(255, 255, 255, .12); } /* 히어로에 overscroll contain/none 을 두면 터치가 문서 스크롤로 전달되지 않는다 */ } /* 아주 작은 화면 */ @media (max-width: 380px) { :root { --gab-gutter: 14px; } .gab-section-header h2 { font-size: 18px; } .gab-mkpick-grid { grid-template-columns: repeat(2, 1fr); } } /* ================================================================ * 44. v174 — 판매자 유형 명확화 · 회원 유형별 가능/불가 * ---------------------------------------------------------------- * · "이 매물을 개인이 올렸나 딜러가 올렸나"가 한눈에 보여야 한다. * 기존에는 gray-400 맨 텍스트라 유형 구분이 사실상 없었다. * · 가입 화면은 "할 수 있는 것"만 있고 "못 하는 것"이 없었다. * 중개 플랫폼은 유형별 금지 사항이 정체성이라 함께 보여준다. * ================================================================ */ /* ===== 44-1. 판매자 유형 배지 ===== */ .gab-seller-type { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.2; border: 1px solid transparent; white-space: nowrap; } .gab-seller-type i { font-size: 12px; } /* 딜러(사업자) — 파랑 */ .gab-seller-type.is-dealer { background: var(--gab-trust-tint); border-color: #C7D9FA; color: #1D4ED8; } /* 개인 판매자 / 개인 직거래 — 초록 */ .gab-seller-type.is-seller, .gab-seller-type.is-direct { background: #EAF7EF; border-color: #B7E3C9; color: #157A41; } /* 플랫폼 관리 — 중립 */ .gab-seller-type.is-platform { background: var(--gab-gray-100); border-color: var(--gab-gray-200); color: var(--gab-gray-700); } /* 카드 상단 줄: 브랜드와 유형 배지를 양끝으로 */ .gab-car-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .gab-car-card-brand { font-size: var(--gab-text-xs); font-weight: 700; } /* 목록 필터의 판매자 유형에도 같은 색 체계를 쓴다 */ .hicm-seller-filter .gab-filter-option i { width: 18px; text-align: center; } /* ===== 44-2. 가입 — 유형별 "못 하는 것" ===== */ .gab-type-limits { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; padding: 10px 12px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-md); } .gab-type-limits li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--gab-text-muted); } .gab-type-limits li i { flex-shrink: 0; margin-top: 2px; font-size: 12px; color: var(--gab-primary-600); } .gab-type-benefits li i { color: var(--gab-success); } .gab-type-card.is-on .gab-type-limits, .gab-type-card.is-selected .gab-type-limits { background: #fff; border-color: var(--gab-primary-200); } /* ===== 44-3. 플랫폼 규칙 요약 (가입 상단) ===== */ .hicm-rulebox { max-width: 880px; margin: 0 auto 26px; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); background: #fff; overflow: hidden; } .hicm-rulebox-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: var(--gab-gray-900); color: #fff; font-size: var(--gab-text-sm); font-weight: 800; } .hicm-rulebox-head i { color: var(--gab-primary-400); } .hicm-rulebox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gab-gray-200); } .hicm-rulebox-col { background: #fff; padding: 16px 18px; } .hicm-rulebox-col h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: var(--gab-text-sm); font-weight: 800; } .hicm-rulebox-col--can h4 { color: var(--gab-success); } .hicm-rulebox-col--cannot h4 { color: var(--gab-primary-700); } .hicm-rulebox-col ul { display: flex; flex-direction: column; gap: 7px; } .hicm-rulebox-col li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.55; color: var(--gab-text-body); } .hicm-rulebox-col li i { flex-shrink: 0; margin-top: 3px; font-size: 11px; } .hicm-rulebox-col--can li i { color: var(--gab-success); } .hicm-rulebox-col--cannot li i { color: var(--gab-primary-600); } .hicm-rulebox-foot { padding: 11px 18px; border-top: 1px solid var(--gab-gray-200); background: var(--gab-surface); font-size: 12px; color: var(--gab-text-muted); display: flex; align-items: flex-start; gap: 7px; } .hicm-rulebox-foot i { flex-shrink: 0; margin-top: 2px; color: var(--gab-warning); } @media (max-width: 768px) { .hicm-rulebox { margin-inline: calc(var(--gab-gutter) * -1); border-radius: 0; border-inline: 0; } .hicm-rulebox-grid { grid-template-columns: 1fr; } .gab-seller-type { font-size: 11px; padding: 3px 9px; } .gab-type-limits { padding: 9px 11px; } } /* 정적 페이지 안의 규칙 박스 여백 */ .hicm-rulebox-wrap { padding-block: 8px 24px; } .gab-content .hicm-rulebox, .hicm-rulebox-wrap .hicm-rulebox { margin-inline: auto; } /* ================================================================ * 45. v175 — 설명 화면 가독성·위계 (실측 기반) * ---------------------------------------------------------------- * dbg/read.js + 워크플로 심층 감사 결과를 근거로 고친다. * 한국어 본문 기준: 줄당 25~45자 / 모바일 16px·PC 15px+ / 행간 1.6~1.9 / 대비 4.5:1+ * ================================================================ */ /* ===== 45-1. .gab-content 무정의 복구 ===== 정적 페이지(이용안내·소개·FAQ·고객센터 등 12개)의 본문 컨테이너에 CSS 규칙이 하나도 없어 PC에서 width 1440px / padding 0 풀블리드였다. 이것이 "줄당 64자"의 근본 원인이다. v163 CSS 통합 때 누락된 것으로 보인다. */ .gab-content { width: 100%; max-width: var(--gab-container-xl); margin-inline: auto; padding-inline: 20px; } .gab-content > .gab-content-block { max-width: 100%; } /* ===== 45-2. 제목 위계 ===== base.css 가 h1~h6 를 font-size:inherit 로 정규화하는데 theme.css 에 대응 규칙이 없어 H2 가 본문과 같은 14px 로 렌더됐다. */ .gab-content-block h2 { font-size: var(--gab-text-2xl); font-weight: 800; line-height: 1.35; letter-spacing: var(--gab-tracking-tight); text-wrap: balance; margin-bottom: 10px; } .gab-content-block h3 { font-size: var(--gab-text-lg); font-weight: 800; line-height: 1.4; margin-bottom: 8px; } /* 규칙 박스 제목 — 마크업이 h3 로 교정됐으나 셀렉터는 h4 만 잡고 있었다. 배포된 사본이 아직 h4 일 수 있으므로 둘 다 받는다. */ .hicm-rulebox-col h3, .hicm-rulebox-col h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: var(--gab-text-md); font-weight: 800; } .hicm-rulebox-col--can h3, .hicm-rulebox-col--can h4 { color: var(--gab-success); } .hicm-rulebox-col--cannot h3, .hicm-rulebox-col--cannot h4 { color: var(--gab-primary-700); } .hicm-rulebox-head { font-size: var(--gab-text-md); } /* ===== 45-3. 설명문 스케일 ===== */ :root { --gab-prose: 15px; --gab-prose-sm: 14.5px; --gab-prose-lh: 1.72; --gab-prose-measure: 62ch; /* 한글 약 34~40자 */ } .hicm-deal-step p, .hicm-deal-foot, .hicm-assure-card p, .gab-proof-body p, .gab-how-step-desc, .gab-type-desc, .gab-section-header p, .hicm-deal-head p, .gab-page-hero-desc, .gab-content-block p { font-size: var(--gab-prose); line-height: var(--gab-prose-lh); } .hicm-rulebox-col li, .gab-type-limits li, .gab-type-benefits li { font-size: var(--gab-prose-sm); line-height: 1.65; } .hicm-rulebox-foot { font-size: var(--gab-prose-sm); line-height: 1.65; } /* 줄 길이 제한 — 컨테이너가 넓어도 글줄은 62ch 를 넘지 않는다 */ .gab-content-block p, .hicm-deal-head p, .gab-page-hero-desc, .gab-section-header p, .hicm-assure .gab-how-sub { max-width: var(--gab-prose-measure); } .hicm-block-center p, .gab-cta-desc { margin-inline: auto; } /* ===== 45-4. 다크 배경 위 대비 복구 ===== --gab-on-dark-soft: rgba(255,255,255,.42) 를 본문에 쓰던 곳들이 실측 3.59:1 / 4.07:1 로 기준(4.5:1) 미달이었다. */ .hicm-guard-note, .hicm-guard--slim .hicm-guard-note { font-size: 13.5px; line-height: 1.75; color: rgba(255, 255, 255, .78); } .hicm-guard--slim .hicm-guard-label { font-size: 14px; } .hicm-guard-fig small { color: var(--gab-primary-300); } .hicm-assure-card p { color: rgba(255, 255, 255, .76); } .hicm-hx--brokerage .hicm-intent-copy small { color: rgba(255, 255, 255, .72); } /* ===== 45-5. gray-400 을 본문 색으로 쓰던 곳 (실측 2.61:1) ===== */ .gab-type-docs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gab-gray-200); font-size: 13px; line-height: 1.55; color: var(--gab-gray-700); } .gab-type-docs i { flex-shrink: 0; color: var(--gab-trust-500); } .gab-auth-ssl, .gab-steps__item, .hicm-deal-step-no, .gab-aw-stat span { color: var(--gab-gray-600); } .hicm-deal-step-no { color: var(--gab-primary-600); font-weight: 800; letter-spacing: .14em; } /* ===== 45-6. 모바일 ===== */ @media (max-width: 768px) { :root { --gab-prose: 15.5px; --gab-prose-sm: 15px; --gab-prose-lh: 1.75; } .gab-content { padding-inline: var(--gab-gutter); } .gab-content-block h2 { font-size: var(--gab-text-xl); } /* H1(23.4) < H2(24) 크기 역전 교정 — 히어로가 섹션 제목보다 커야 한다 */ .hicm-hx--brokerage .gab-hx-title { font-size: clamp(24px, 6.6vw, 30px); } .gab-section-header h2, .hicm-deal-head h2, .hicm-assure .gab-how-title { font-size: 20px; } /* 모바일은 화면 폭이 곧 측정폭이라 max-width 를 푼다 */ .gab-content-block p, .hicm-deal-head p, .gab-page-hero-desc, .gab-section-header p, .hicm-assure .gab-how-sub { max-width: none; } .hicm-guard-note, .hicm-guard--slim .hicm-guard-note { font-size: 14.5px; line-height: 1.8; } .hicm-guard--slim .hicm-guard-label { font-size: 15px; } /* 상세 하단 액션바가 탭바 아래 깔려 버튼이 눌리지 않던 문제 */ .gab-mbar { bottom: calc(var(--gab-tabbar-h) + env(safe-area-inset-bottom)); z-index: calc(var(--gab-z-fixed) + 1); } } /* 45-7. 남은 13px 설명문 (read.js smallText) + 규칙박스 헤드가 h2 가 되면서 필요한 리셋 */ .hicm-helpstrip-copy p, .gab-reg-subtitle, .gab-reglang-sub { font-size: var(--gab-prose); line-height: var(--gab-prose-lh); } h2.hicm-rulebox-head { font-weight: 800; line-height: 1.45; } /* ================================================================ * 46. v176 — 매물 = 중개 상품 · 앱 마감 * ---------------------------------------------------------------- * 매물 카드/상세가 지금까지 "중고차 광고"였다. 이 플랫폼의 매물은 * "해외 바이어가 고르면 우리가 중개하는 한국 등록 차량"이다. * 판매가 옆에 실제 예치 금액과 기한을 붙여 그 성격을 드러낸다. * 로고는 최소화하고 상품이 화면의 주인공이 되게 한다. * ================================================================ */ /* ===== 46-1. 매물 카드의 중개 조건 한 줄 ===== */ .hicm-terms-compact { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--gab-gray-200); font-size: 12.5px; font-weight: 700; color: var(--gab-text-muted); letter-spacing: -.01em; } .hicm-terms-compact i { font-size: 13px; color: var(--gab-primary-600); } /* ===== 46-2. 상세의 거래 조건 블록 ===== */ .hicm-terms { margin-top: 16px; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); background: #fff; overflow: hidden; } .hicm-terms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--gab-gray-900); color: #fff; } .hicm-terms-head h2, .hicm-terms-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--gab-text-base); font-weight: 800; color: #fff; } .hicm-terms-head h3 i { color: var(--gab-primary-400); } .hicm-terms-by { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .72); } .hicm-terms-by i { color: #7BD3A0; } .hicm-terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gab-gray-200); } .hicm-terms-cell { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; background: #fff; min-width: 0; } .hicm-terms-k { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; color: var(--gab-text-muted); } .hicm-terms-k em { font-style: normal; font-weight: 800; color: var(--gab-primary-600); } .hicm-terms-v { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: var(--gab-gray-900); /* 원화 금액은 RTL 안에서도 LTR 로 읽어야 한다 */ direction: ltr; unicode-bidi: isolate; } .hicm-terms-cell--dep .hicm-terms-v { color: var(--gab-primary-700); } .hicm-terms-cell--days .hicm-terms-v { color: var(--gab-gray-900); } .hicm-terms-cell--fee .hicm-terms-v { color: var(--gab-success); } .hicm-terms-s { font-size: 11px; line-height: 1.5; color: var(--gab-text-muted); } .hicm-terms-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 11px 14px; border-top: 1px solid var(--gab-gray-200); background: var(--gab-surface); font-size: 12.5px; line-height: 1.6; color: var(--gab-text-body); } .hicm-terms-note i { flex-shrink: 0; margin-top: 2px; color: var(--gab-warning); } /* ===== 46-3. 로고 최소화 ===== 로고가 아니라 매물이 주인공이어야 한다. 마크를 줄이고 워드마크만 남긴다. */ .gab-logo-icon { width: 34px; height: 34px; border-radius: 10px; } .gab-logo-name { font-size: 17px; } .gab-logo-tagline { font-size: 10.5px; } .gab-logo { gap: 9px; } /* ===== 46-4. 한국 등록 = 이 플랫폼의 상품 정의 ===== 해외 바이어에게 "한국 등록 차량"은 부가 정보가 아니라 상품의 정체다. */ .gab-ccg-count.gab-vehicle-country { background: rgba(216, 52, 44, .88); font-weight: 800; } .gab-ccg-count.gab-vehicle-country .hicm-country-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); } /* ===== 46-5. 모바일 앱 마감 ===== */ @media (max-width: 768px) { /* 로고: 마크만 두고 태그라인은 접는다 (헤더 높이 절약) */ .gab-logo-icon { width: 32px; height: 32px; border-radius: 9px; } .gab-logo-name { font-size: 15.5px; } .gab-logo-tagline { font-size: 9px; opacity: .9; } /* 카드의 중개 조건 줄을 살짝 강조 — 스크롤 중에도 잡히게 */ .hicm-terms-compact { margin-inline: calc(var(--gab-gutter) * -1); padding: 9px var(--gab-gutter); margin-top: 12px; border-top: 1px solid var(--gab-gray-200); background: var(--gab-surface); font-size: 13px; } /* 상세 조건 블록: 3열이 좁으면 값이 깨진다 → 1열 리스트 */ .hicm-terms { margin-inline: calc(var(--gab-gutter) * -1); border-radius: 0; border-inline: 0; } .hicm-terms-grid { grid-template-columns: 1fr; } .hicm-terms-cell { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 13px var(--gab-gutter); } .hicm-terms-k { flex: 0 0 auto; font-size: 13px; } .hicm-terms-v { margin-inline-start: auto; font-size: 18px; } .hicm-terms-s { flex-basis: 100%; font-size: 12px; } .hicm-terms-head, .hicm-terms-note { padding-inline: var(--gab-gutter); } } @media (max-width: 380px) { .hicm-terms-v { font-size: 16.5px; } .gab-logo-tagline { display: none; } } /* ================================================================ * 47. v176 — 판매자 신원 · 플랫폼 전용 문의 · 상세 앱화 * ---------------------------------------------------------------- * 기획서 §2 가입 서류 기준으로 판매자 유형을 4가지로 갈라 색을 준다. * 딜러(매매업 등록) 파랑 — 사업자등록증 + 자동차매매업 등록증 * 사업자 판매자 청록 — 사업자등록증 * 개인 판매자 초록 — 신분증 + 본인 명의 차량등록증 * 플랫폼 관리 중립 * ================================================================ */ /* ===== 47-1. 판매자 유형 4색 ===== */ .gab-seller-type.is-dealer { background: var(--gab-trust-tint); border-color: #C7D9FA; color: #1D4ED8; } .gab-seller-type.is-seller { background: #E6F6FA; border-color: #B7DFE9; color: #0E7490; } .gab-seller-type.is-direct { background: #EAF7EF; border-color: #B7E3C9; color: #157A41; } .gab-seller-type.is-platform { background: var(--gab-gray-100); border-color: var(--gab-gray-200); color: var(--gab-gray-700); } /* ===== 47-2. 판매자 신원 블록 (상세) ===== */ .hicm-sid { margin-top: 14px; padding: 15px 16px; border: 1px solid var(--gab-gray-200); border-radius: var(--gab-radius-lg); background: #fff; border-inline-start: 3px solid var(--gab-gray-300); } .hicm-sid--dealer { border-inline-start-color: #1D4ED8; } .hicm-sid--seller { border-inline-start-color: #0E7490; } .hicm-sid--direct { border-inline-start-color: #157A41; } .hicm-sid--platform { border-inline-start-color: var(--gab-gray-400); } .hicm-sid-kicker { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gab-text-muted); } .hicm-sid-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .hicm-sid-name { font-size: var(--gab-text-lg); font-weight: 800; color: var(--gab-gray-900); letter-spacing: var(--gab-tracking-snug); } .hicm-sid-state { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; } .hicm-sid-state.is-ok { background: #EAF7EF; color: #157A41; } .hicm-sid-state.is-wait { background: #FDF5E7; color: var(--gab-warning); } .hicm-sid-desc { margin: 7px 0 0; font-size: var(--gab-prose-sm); line-height: 1.6; color: var(--gab-text-body); } .hicm-sid-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .hicm-sid-docs li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: var(--gab-surface); border: 1px solid var(--gab-gray-200); font-size: 12px; font-weight: 700; color: var(--gab-gray-700); } .hicm-sid-docs li i { font-size: 12px; color: var(--gab-success); } .hicm-sid-contact { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed var(--gab-gray-200); font-size: 12.5px; line-height: 1.6; font-weight: 700; color: var(--gab-primary-700); } .hicm-sid-contact i { flex-shrink: 0; margin-top: 2px; } /* ===== 47-3. 목록·상세 앱화 ===== */ /* 카드 전체가 눌리는 느낌 */ .gab-car-card { transition: box-shadow .18s ease, transform .18s ease; } .gab-car-card:active { transform: scale(.995); } /* 상세: 정보 밀도 정리 — 같은 위계는 같은 간격 */ .gab-detail-main > section, .gab-detail-sidebar > * { scroll-margin-top: 96px; } .gab-price-card { position: relative; } .gab-price-card-value { letter-spacing: -.03em; } @media (max-width: 768px) { /* 신원 블록도 풀블리드 리스트로 */ .hicm-sid { margin-inline: calc(var(--gab-gutter) * -1); border-radius: 0; border-block: 1px solid var(--gab-gray-200); border-inline-end: 0; border-inline-start-width: 3px; padding: 14px var(--gab-gutter); } .hicm-sid-name { font-size: var(--gab-text-md); } .hicm-sid-row { gap: 8px; } /* 상세 갤러리를 화면 끝까지 (앱 히어로 이미지) */ .gab-gallery { margin-inline: calc(var(--gab-gutter) * -1); border-radius: 0; border-inline: 0; } .gab-gallery-thumbs { padding-inline: var(--gab-gutter); } } /* 47-4. 거래 조건 블록은 340px 사이드바 안에 들어간다 — 3열이면 금액이 줄바꿈된다 (실측: ₩3,657,000 이 "₩3,657,0 / 00" 으로 쪼개짐). 항상 행 레이아웃으로 둔다. */ .hicm-terms-grid { grid-template-columns: 1fr; } .hicm-terms-cell { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; padding: 12px 14px; } .hicm-terms-k { flex: 0 0 auto; font-size: 12.5px; } .hicm-terms-v { margin-inline-start: auto; font-size: 18px; white-space: nowrap; } .hicm-terms-s { flex-basis: 100%; font-size: 11.5px; } /* 47-5. 차량 상세 가독성 마감 (read.js 실측) · 12~12.5px 설명문 3종 → 설명문 스케일로 상향 · .gab-seller-privacy 대비 2.61:1 (gray-400 본문) → 본문 색으로 · h1 → h3 위계 건너뜀: 사이드바 블록 제목을 h2 크기 위계로 맞춘다 · 모바일 22px 버튼 2종 터치타깃 확보 */ .hicm-terms-note, .hicm-sid-contact, .gab-seller-privacy { font-size: var(--gab-prose-sm); line-height: 1.65; } .gab-seller-privacy { color: var(--gab-text-body); } /* 사이드바 블록 제목은 페이지 H1 다음 단계로 읽혀야 한다 */ .hicm-terms-head h2, .hicm-terms-head h3, .hicm-sid-name, .gab-exprofile-head h3 { font-size: var(--gab-text-md); } @media (max-width: 768px) { .gab-insp-view, .gab-export-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding-inline: 12px; } } /* 상세 페이지의 진짜 H1 은 차량명(.gab-price-card-title)이다 — 섹션 제목보다 커야 한다 */ .gab-price-card-title { font-size: var(--gab-text-xl); line-height: 1.3; } .gab-exprofile-head h2, .gab-exprofile-head h3 { font-size: var(--gab-text-md); font-weight: 800; margin: 0; display: flex; align-items: center; gap: 7px; } @media (max-width: 768px) { .gab-price-card-title { font-size: var(--gab-text-lg); } } /* 모바일 요약 차량명 — h1 에서 p 로 내렸으므로 크기·굵기를 명시한다 */ .gab-detail-mobile-title { margin: 4px 0 6px; font-size: var(--gab-text-lg); font-weight: 800; line-height: 1.35; color: var(--gab-gray-900); letter-spacing: var(--gab-tracking-snug); } .gab-results-description { font-size: var(--gab-prose); line-height: var(--gab-prose-lh); } /* 47-6. 잔여 가독성 (read.js 실측) · 가입 언어 안내 12px + 대비 2.48:1 (gray-400 본문) · 차량구매 폼 부제 13px */ .gab-reglang-note, .gab-reglang-detect, .gab-parts-form-sub { font-size: var(--gab-prose-sm); line-height: 1.65; color: var(--gab-text-body); } .gab-reglang-detect i { color: var(--gab-primary-600); } /* 차량구매 폼 섹션 제목 (h4 → h2 로 올렸으므로 크기를 명시) */ .gab-parts-form-wrap h2, .gab-parts-form-title { font-size: var(--gab-text-lg); font-weight: 800; line-height: 1.35; } /* ===== 31. v177 — PC 엔카식 가로 검색바 (제조사 → 모델 → 세부모델) ===== */ .gab-ecar { display: none; } .gab-encar-mobile { display: block; } @media (min-width: 769px) { .gab-ecar { display: block; } .gab-encar-mobile { display: none; } .gab-encar { position: relative; padding: 22px 24px 20px; overflow: visible; } .gab-encar-head { margin-bottom: 10px; } .gab-encar-head strong { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; color: #191B1F; } .gab-ecar-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; border-bottom: 1px solid #E6E8EC; } .gab-ecar-tabs { display: flex; align-items: stretch; gap: 4px; min-width: 0; } .gab-ecar-tab { position: relative; padding: 10px 14px 12px; border: 0; background: transparent; color: #6B7280; font-family: var(--gab-font-sans); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; } .gab-ecar-tab:hover { color: #191B1F; } .gab-ecar-tab.is-on { color: var(--gab-primary-600, #D8342C); } .gab-ecar-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--gab-primary-600, #D8342C); border-radius: 2px 2px 0 0; } .gab-ecar-stats { margin: 0; padding: 0 2px 11px; color: #9AA1AA; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .gab-ecar-stats b { color: var(--gab-primary-600, #D8342C); font-weight: 900; } .gab-ecar-bar { display: grid; grid-template-columns: 1fr 1fr 1fr 128px; overflow: hidden; background: #fff; border: 1px solid #D5D9DE; border-radius: 4px; } .gab-ecar:has(#gab-ecar-drop:not([hidden])) .gab-ecar-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: #ECEFF2; } .gab-ecar-field { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 0 16px; border: 0; border-inline-end: 1px solid #ECEFF2; background: #fff; text-align: start; cursor: pointer; font-family: var(--gab-font-sans); } .gab-ecar-field:hover { background: #FAFBFC; } .gab-ecar-field.is-open { background: #fff; box-shadow: inset 0 0 0 1px #C5CAD1; } .gab-ecar-ph, .gab-ecar-val { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; } .gab-ecar-ph { color: #222; } .gab-ecar-val { display: none; color: #111; } .gab-ecar-field.has-val .gab-ecar-ph { display: none; } .gab-ecar-field.has-val .gab-ecar-val { display: block; } .gab-ecar-field > i { flex: 0 0 auto; margin-inline-start: auto; color: #8B929C; font-size: 12px; transition: transform .15s ease; } .gab-ecar-field.is-open > i { transform: rotate(180deg); } .gab-ecar-go { min-height: 54px; border: 0; background: var(--gab-primary-600, #D8342C); color: #fff; font-family: var(--gab-font-sans); font-size: 16px; font-weight: 900; letter-spacing: -0.02em; cursor: pointer; transition: background .15s ease; } .gab-ecar-go:hover { background: var(--gab-primary-700, #B02318); } .gab-ecar-drop { margin-top: -1px; padding: 14px 18px 18px; background: #fff; border: 1px solid #D5D9DE; border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 10px 24px rgba(23, 25, 29, .06); } .gab-ecar-drop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .gab-ecar-hint { margin: 0; color: var(--gab-primary-600, #D8342C); font-size: 13px; font-weight: 800; letter-spacing: -0.02em; } .gab-ecar-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: #9AA1AA; cursor: pointer; } .gab-ecar-x:hover { background: #F3F4F6; color: #4B5563; } .gab-ecar-cols { columns: 5; column-gap: 8px; max-height: 248px; overflow-y: auto; overflow-x: hidden; padding-inline-end: 6px; scrollbar-width: thin; scrollbar-color: #D0D5DB transparent; } .gab-ecar-item { display: block; width: 100%; padding: 6px 8px; overflow: hidden; border: 0; background: transparent; color: #2B3038; font-family: var(--gab-font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; break-inside: avoid; } .gab-ecar-item:hover, .gab-ecar-item.is-on { color: var(--gab-primary-600, #D8342C); font-weight: 800; } .gab-ecar-empty { margin: 8px 0 0; color: #8B929C; font-size: 13px; } } @media (min-width: 769px) and (max-width: 1100px) { .gab-ecar-cols { columns: 4; } .gab-ecar-bar { grid-template-columns: 1fr 1fr 1fr 112px; } } body[dir="rtl"] .gab-ecar-tab.is-on::after { left: 10px; right: 10px; } body[dir="rtl"] .gab-ecar-field { text-align: start; } body[dir="rtl"] .gab-ecar-item { text-align: start; } @media (prefers-reduced-motion: reduce) { .gab-ecar-field > i, .gab-ecar-go { transition: none; } } /* v178-encar-white — 흰 배경 엔카 레이아웃 + 안심 적색 아이덴티티 */ .gab-logo-name { font-size: 17px; letter-spacing: -0.7px; white-space: nowrap; } .gab-logo-tagline { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gab-hdr-search { width: 40px; height: 40px; border: 0; background: transparent; color: var(--gab-gray-800); display: none; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; font-size: 20px; } .gab-hdr-search:hover { background: var(--gab-gray-50); color: var(--gab-gray-900); } .gab-intent-tabs { display: none; } .gab-nav-list .gab-nav-item.is-intent { font-weight: 800; letter-spacing: -0.4px; } .gab-nav-list .gab-nav-item.is-intent.is-active { color: var(--gab-gray-900); box-shadow: inset 0 -2px 0 #191B1F; } /* PC 히어로: 흰색 + 적색 악센트 */ .hicm-hx--brokerage { background: #fff !important; color: #191B1F; border-bottom: 1px solid #F0F1F3; } .hicm-hx--brokerage .gab-hx-bg { background: linear-gradient(180deg, #FAFBFC 0%, #fff 70%) !important; opacity: 1; } .hicm-hx--brokerage .gab-hx-bg::after { display: none; } .hicm-hx--brokerage .gab-hx-badge { background: #FFF1F0; border-color: #F5C4C0; color: var(--gab-primary-700, #B02318); } .hicm-hx--brokerage .gab-hx-title { color: #191B1F; } .hicm-hx--brokerage .gab-hx-accent { color: var(--gab-primary-600, #D8342C); } .hicm-hx--brokerage .gab-hx-sub { color: #4B5563; } .hicm-hx--brokerage .hicm-intent { background: #fff; border: 1px solid #E8EAED; box-shadow: 0 8px 24px rgba(17, 19, 24, .06); } .hicm-hx--brokerage .hicm-intent:hover { background: #FAFBFC; border-color: #F5C4C0; box-shadow: 0 12px 28px rgba(216, 52, 44, .12); transform: translateY(-2px); } .hicm-hx--brokerage .hicm-intent-copy small { color: #6B7280; } .hicm-hx--brokerage .hicm-intent-copy strong { color: #191B1F; } .hicm-hx--brokerage .hicm-intent > i { color: #C4C7CC; } .hicm-hx--brokerage .hicm-intent-media { background: #F3F4F6; color: #191B1F; } .hicm-hx--brokerage .hicm-intent--browse .hicm-intent-media { background: #FFF1F0; color: var(--gab-primary-600, #D8342C); } .hicm-hx--brokerage .hicm-intent--dealers .hicm-intent-media { background: #EEF3FF; color: #2563EB; } .hicm-hx--brokerage .hicm-intent--sell .hicm-intent-media { background: #ECF8F1; color: #1F8F4E; } .hicm-hx--brokerage .hicm-guard-item { color: #191B1F; } .hicm-hx--brokerage .hicm-guard-note { color: #6B7280; } .gab-mstack { display: none; } .gab-mbanner { position: relative; } .gab-mbanner-viewport { overflow: hidden; border-radius: 0; } .gab-mbanner-track { display: flex; width: 300%; transition: transform .38s ease; } .gab-mbanner-slide { flex: 0 0 33.333%; display: block; position: relative; min-height: 168px; color: #fff; text-decoration: none; overflow: hidden; } .gab-mbanner-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .gab-mbanner-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,19,24,.72) 0%, rgba(17,19,24,.28) 70%, rgba(216,52,44,.35) 100%); } .gab-mbanner-copy { position: relative; z-index: 1; padding: 28px 20px 36px; display: flex; flex-direction: column; gap: 6px; } .gab-mbanner-copy small { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #FFD2CD; text-transform: uppercase; } .gab-mbanner-copy strong { font-size: 20px; line-height: 1.35; font-weight: 800; letter-spacing: -0.6px; max-width: 78%; } .gab-mbanner-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; } .gab-mbanner-dot { width: 6px; height: 6px; border-radius: 99px; border: 0; background: rgba(255,255,255,.45); padding: 0; cursor: pointer; } .gab-mbanner-dot.is-on { width: 16px; background: #fff; } .gab-mpill { display: flex; align-items: center; gap: 10px; margin: 14px 16px 8px; padding: 6px 6px 6px 18px; width: calc(100% - 32px); border: 1px solid #E5E7EB; border-radius: 999px; background: #F4F5F7; color: #6B7280; font-size: 14px; font-weight: 600; text-align: start; cursor: pointer; } .gab-mpill span:first-child { flex: 1; } .gab-mpill-go { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #191B1F; color: #fff; font-size: 16px; flex-shrink: 0; } .gab-mpop { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gab-mpop::-webkit-scrollbar { display: none; } .gab-mpop a { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #E8EAED; color: #374151; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .gab-mpop a:hover { border-color: #F5C4C0; color: var(--gab-primary-600, #D8342C); } .gab-reg-logo-name { font-size: 16px; letter-spacing: -0.6px; } .gab-auth-logo-name { font-size: 18px; letter-spacing: -0.6px; } .gab-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 768px) { .gab-hdr-search { display: inline-flex; } .gab-main-header-inner { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 6px; } .gab-burger { grid-column: 1; } .gab-logo { grid-column: 2; justify-self: center; max-width: 100%; gap: 8px; } .gab-logo-tagline { display: none; } .gab-logo-name { font-size: 14.5px; letter-spacing: -0.9px; } .gab-logo-icon { width: 34px; height: 34px; border-radius: 9px; } .gab-header-cta { grid-column: 3; margin-inline-start: 0; gap: 0; } .gab-header-cta .gab-btn-primary { display: none; } .gab-intent-tabs { display: grid; grid-template-columns: 1fr 1fr; position: relative; background: #fff; border-bottom: 1px solid #EEE; } .gab-intent-tabs a { text-align: center; padding: 13px 8px 12px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.4px; color: #9CA3AF; text-decoration: none; } .gab-intent-tabs a.is-on { color: #191B1F; } .gab-intent-ink { position: absolute; bottom: 0; left: 0; width: 50%; height: 2.5px; background: #191B1F; transform: translateX(0); transition: transform .22s ease; pointer-events: none; } .gab-intent-tabs[data-on="sell"] .gab-intent-ink { transform: translateX(100%); } body[dir="rtl"] .gab-intent-tabs[data-on="sell"] .gab-intent-ink { transform: translateX(-100%); } .gab-mstack { display: block; background: #fff; } .hicm-hx--brokerage .gab-hx-copy, .hicm-hx--brokerage .hicm-guard, .hicm-hx--brokerage .hicm-intent-rail, .hicm-hx--brokerage .gab-encar-head, .hicm-hx--brokerage .hicm-quick { display: none !important; } .hicm-hx--brokerage .gab-hx-inner { padding-block: 0 8px; } .hicm-hx--brokerage .gab-encar { margin-top: 0; padding-top: 8px; border-radius: 0; box-shadow: none; border: 0; } .gab-type-grid { grid-template-columns: 1fr; } } @media (min-width: 769px) { .gab-mstack { display: none !important; } .gab-intent-tabs { display: none !important; } } @media (prefers-reduced-motion: reduce) { .gab-mbanner-track, .gab-intent-ink { transition: none; } } @media (max-width: 768px) { .gab-top-bar { display: none !important; } } /* v179-encar-search — 엔카식 심플 국산차 검색 레이아웃 및 카드 스타일 */ .gab-encar-page { padding: 24px 0 60px; background: #F8F9FA; min-height: calc(100vh - 200px); } .gab-encar-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; } /* ================= 좌측: 엔카 사이드바 ================= */ .encar-sidebar { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.03); } .encar-sb-head { padding: 18px 18px 14px; border-bottom: 1px solid #F0F2F5; background: #fff; } .encar-sb-head-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .encar-sb-title { font-size: 18px; font-weight: 800; color: #111827; margin: 0; letter-spacing: -0.5px; } .encar-sb-reset { font-size: 12px; color: #6B7280; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .encar-sb-reset:hover { color: var(--gab-primary-600, #D8342C); } .encar-sb-count { font-size: 15px; color: #4B5563; } .encar-sb-count strong { font-size: 22px; font-weight: 800; color: #111827; margin-right: 2px; } /* 아코디언 */ .encar-acc { border-bottom: 1px solid #F0F2F5; } .encar-acc:last-child { border-bottom: 0; } .encar-acc-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 18px; background: transparent; border: 0; font-size: 14.5px; font-weight: 700; color: #1F2937; text-align: left; cursor: pointer; transition: background .15s; } .encar-acc-btn:hover { background: #F9FAFB; } .encar-acc-btn > i { font-size: 12px; color: #9CA3AF; transition: transform .2s; } .encar-acc.is-open .encar-acc-btn > i { transform: rotate(180deg); } .encar-acc-active-val { font-size: 12px; color: var(--gab-primary-600, #D8342C); margin-left: auto; margin-right: 8px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .encar-acc-pane { display: none; padding: 4px 14px 14px; } .encar-acc.is-open .encar-acc-pane { display: block; } /* 리스트 아이템 (차종, 주행거리, 가격) */ .encar-acc-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; } .encar-acc-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; background: transparent; border: 0; border-radius: 6px; font-size: 13.5px; color: #374151; text-align: left; cursor: pointer; transition: all .12s; } .encar-acc-item:hover { background: #F3F4F6; color: #111827; } .encar-acc-item.is-on { background: #FFF1F0; color: var(--gab-primary-600, #D8342C); font-weight: 700; } /* 제조사 / 모델 */ .encar-make-list, .encar-model-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; } .encar-make-item, .encar-model-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; background: transparent; border: 0; border-radius: 6px; font-size: 13.5px; color: #374151; text-align: left; cursor: pointer; } .encar-make-item:hover, .encar-model-item:hover { background: #F3F4F6; color: #111827; } .encar-make-item.is-on, .encar-model-item.is-on { background: #FFF1F0; color: var(--gab-primary-600, #D8342C); font-weight: 700; } .encar-make-cnt { font-size: 12px; color: #9CA3AF; font-weight: normal; } .encar-brand-current { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; margin-bottom: 6px; border-bottom: 1px solid #E5E7EB; } .encar-brand-current strong { font-size: 14px; color: #111827; } .encar-brand-back { background: transparent; border: 0; color: #6B7280; font-size: 12px; cursor: pointer; padding: 0; } .encar-brand-back:hover { color: var(--gab-primary-600, #D8342C); } /* 년/월 드롭다운 */ .encar-ym-grid { display: flex; flex-direction: column; gap: 8px; } .encar-ym-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 6px; } .encar-select { width: 100%; padding: 7px 6px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 12.5px; color: #374151; background: #fff; } .encar-select:focus { border-color: #111827; outline: none; } .encar-ym-lbl { font-size: 12px; color: #6B7280; white-space: nowrap; } /* 체크박스 목록 */ .encar-check-list { display: flex; flex-direction: column; gap: 6px; } .encar-check-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #374151; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .encar-check-item:hover { background: #F9FAFB; } .encar-checkbox { width: 18px; height: 18px; border: 1.5px solid #D1D5DB; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: #fff; transition: all .15s; } .encar-check-item.is-checked .encar-checkbox { background: var(--gab-primary-600, #D8342C); border-color: var(--gab-primary-600, #D8342C); } /* 컬러 그리드 */ .encar-color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .encar-color-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 12.5px; color: #374151; cursor: pointer; } .encar-color-item:hover { border-color: #9CA3AF; } .encar-color-item.is-on { border-color: var(--gab-primary-600, #D8342C); background: #FFF1F0; color: var(--gab-primary-600, #D8342C); font-weight: 700; } .encar-color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } /* ================= 우측: 매물 메인 영역 ================= */ .encar-main-col { min-width: 0; } .encar-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 10px 16px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; } .encar-active-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .encar-all-label { font-size: 14px; font-weight: 700; color: #374151; } .encar-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; background: #F3F4F6; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #374151; } .encar-tag-chip button { background: transparent; border: 0; color: #9CA3AF; cursor: pointer; padding: 0; display: inline-flex; font-size: 14px; } .encar-tag-chip button:hover { color: #111; } .encar-tags-reset { font-size: 12px; color: #6B7280; text-decoration: none; margin-left: 6px; display: inline-flex; align-items: center; gap: 3px; } .encar-tags-reset:hover { color: var(--gab-primary-600, #D8342C); } .encar-sort-controls { display: flex; align-items: center; gap: 12px; } .encar-sort-tabs { display: flex; gap: 2px; } .encar-sort-tab { padding: 5px 8px; background: transparent; border: 0; font-size: 13px; font-weight: 600; color: #6B7280; cursor: pointer; border-radius: 6px; } .encar-sort-tab:hover { color: #111; } .encar-sort-tab.is-on { color: #111827; font-weight: 800; background: #F3F4F6; } .encar-view-toggle { display: flex; gap: 2px; border-left: 1px solid #E5E7EB; padding-left: 10px; } .encar-view-btn { width: 28px; height: 28px; border: 0; background: transparent; color: #9CA3AF; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; } .encar-view-btn.is-active { background: #111827; color: #fff; } /* ================= 매물 카드 그리드 (4열) ================= */ .encar-cars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .encar-car-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; } .encar-car-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: #D1D5DB; } .encar-car-card .gab-car-card-gallery { position: relative; aspect-ratio: 16 / 11; background: #F3F4F6; overflow: hidden; } .encar-car-card .gab-ccg-main { width: 100%; height: 100%; position: relative; } .encar-car-card .gab-ccg-main-img { width: 100%; height: 100%; object-fit: cover; display: block; } .encar-car-card .hicm-card-media-link { position: absolute; inset: 0; z-index: 1; } .encar-badge-safe { position: absolute; top: 8px; left: 8px; padding: 3px 6px; background: rgba(216, 52, 44, 0.92); color: #fff; font-size: 11px; font-weight: 700; border-radius: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; pointer-events: none; } .encar-car-card .gab-car-card-fav { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-size: 15px; z-index: 2; transition: all .15s; } .encar-car-card .gab-car-card-fav:hover { transform: scale(1.1); } .encar-car-card .gab-car-card-fav.is-active { background: #fff; color: var(--gab-primary-600, #D8342C); } .encar-car-card .gab-car-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; } .encar-car-card .gab-car-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 4px; color: #111827; } .encar-car-card .gab-car-card-title a { color: #111827; text-decoration: none; } .encar-car-card .gab-car-card-title a:hover { color: var(--gab-primary-600, #D8342C); } .encar-car-spec { font-size: 12.5px; color: #6B7280; margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-car-price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 6px; border-top: 1px solid #F3F4F6; } .encar-car-price { font-size: 17.5px; font-weight: 800; color: #111827; letter-spacing: -0.5px; } /* ================= 리스트 뷰 (가로형 엔카 우대등록 스타일) ================= */ .encar-cars-grid.is-list { display: flex; flex-direction: column; gap: 12px; } .encar-cars-grid.is-list .encar-car-card { display: grid; grid-template-columns: 220px 1fr 140px; align-items: center; padding: 12px; gap: 18px; } .encar-cars-grid.is-list .gab-car-card-gallery { width: 220px; height: 145px; border-radius: 8px; } .encar-cars-grid.is-list .gab-car-card-body { padding: 0; } .encar-cars-grid.is-list .gab-car-card-title { font-size: 17px; margin-bottom: 6px; } .encar-cars-grid.is-list .encar-car-spec { font-size: 13.5px; margin-bottom: 0; } .encar-cars-grid.is-list .encar-car-price-row { border-top: 0; padding-top: 0; justify-content: flex-end; } .encar-cars-grid.is-list .encar-car-price { font-size: 20px; color: var(--gab-primary-600, #D8342C); } /* ================= 반응형 (태블릿/모바일) ================= */ @media (max-width: 1200px) { .encar-cars-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .gab-encar-layout { grid-template-columns: 1fr; } .encar-sidebar { display: none; } .encar-cars-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .encar-cars-grid { grid-template-columns: 1fr; } .encar-cars-grid.is-list .encar-car-card { grid-template-columns: 1fr; } .encar-cars-grid.is-list .gab-car-card-gallery { width: 100%; height: auto; aspect-ratio: 16 / 11; } } /* ========================================================================== v180-encar-full-polish — 엔카(Encar) 디자인 대규모 정밀 리디자인 (v190 PC Search Polish) ========================================================================== */ /* ========================================================================== v189 — Pretendard 폰트 시스템 완성 & 엔카 시그니처 버튼 & 10개 구매요청 & 모바일 프레임워크 ========================================================================== */ /* ── 전역 폰트 & 안티앨리어싱 & 기본 레이아웃 ── */ html, body, button, input, select, textarea, optgroup, .encar-app, .gab-app { font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; letter-spacing: -0.02em; } *, *::before, *::after { box-sizing: border-box; } .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: "bootstrap-icons" !important; letter-spacing: 0 !important; } body { background-color: #F8F9FA !important; color: #1F2937; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== 1. 헤더 & 원래 로고 (Header & Original Logo) ========================================================================== */ .encar-header { background: #fff; border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .encar-top-util { background: #111827 !important; color: #D1D5DB; font-size: 11.5px; } .encar-top-util-inner { display: flex; justify-content: space-between; align-items: center; min-height: 34px; } .encar-top-util-left { display: flex; align-items: center; } .encar-top-util-right { display: flex; align-items: center; gap: 8px; } .encar-top-link { color: #E5E7EB; text-decoration: none; font-weight: 500; transition: color .15s; } .encar-top-link:hover { color: #fff; } .encar-util-sep { color: #4B5563; font-size: 10px; } .encar-top-icon { background: transparent; border: 0; color: #9CA3AF; font-size: 13px; padding: 0 2px; cursor: pointer; text-decoration: none; } .encar-top-icon:hover { color: #fff; } /* 메인 네비게이션 바 & 로고 */ .encar-main-nav-wrap { background: #fff; border-bottom: 1px solid #EEEEEE; } .encar-main-header-inner { display: flex; align-items: center; min-height: 66px; gap: 32px; } /* 원래 로고 마크 + 텍스트 */ .gab-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .gab-logo-icon { width: 48px; height: 48px; border-radius: 0; display: flex; align-items: center; justify-content: center; background: transparent; overflow: visible; box-shadow: none; flex-shrink: 0; } .gab-logo-icon img, .hicm-logo-mark { width: 100%; height: 100%; object-fit: contain; object-position: center; } .gab-logo-text { display: flex; flex-direction: column; line-height: 1.15; } .gab-logo-name { font-size: 20px; font-weight: 900; color: #111827; letter-spacing: -0.6px; } .gab-logo-name .accent { color: inherit; background: none; padding: 0; } .gab-logo-tagline { font-size: 10.5px; font-weight: 600; color: #6B7280; letter-spacing: -0.3px; margin-top: 2px; } /* PC 대메뉴 (심플 & 모던) */ .encar-pc-nav { display: flex; align-items: center; margin-left: 20px; } .encar-nav-list { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; } .encar-nav-item { position: relative; display: flex; align-items: center; height: 66px; } .encar-nav-link { font-size: 17.5px; font-weight: 800; color: #374151; text-decoration: none; letter-spacing: -0.4px; display: flex; align-items: center; position: relative; height: 100%; padding: 0 4px; transition: color .15s ease; } .encar-nav-link:hover { color: #111827; } .encar-nav-item.is-active .encar-nav-link { color: #111827; box-shadow: inset 0 -3.5px 0 #111827; font-weight: 900; } .encar-mobile-cta { display: none; } /* ========================================================================== 2. 홈 화면 (Home Hero & Main Search) ========================================================================== */ .encar-home-hero { padding: 24px 0 40px; background: #fff; border-bottom: 1px solid #EEEEEE; } /* 상단 듀얼 프로모 배너 */ .encar-hero-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .encar-hbanner-item { display: flex; flex-direction: column; position: relative; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; text-decoration: none; color: #111827; overflow: hidden; min-height: 125px; transition: all .2s ease; } .encar-hbanner-item:hover { background: #F3F4F6; border-color: #D1D5DB; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.04); } .encar-hbanner-badge { display: flex; gap: 4px; margin-bottom: 6px; } .encar-stamp { font-size: 11px; font-weight: 800; color: var(--gab-primary-600, #E52528); background: #FFF0F0; border: 1px solid #FFD0D0; padding: 2px 6px; border-radius: 4px; } .encar-stamp--dark { color: #111827; background: #E5E7EB; border-color: #D1D5DB; } .encar-hbanner-title { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 2px; } .encar-hbanner-sub { font-size: 12.5px; color: #6B7280; margin: 0 0 10px; } .encar-hbanner-btn { font-size: 12.5px; font-weight: 700; color: #111827; display: inline-flex; align-items: center; gap: 2px; } .encar-hbanner-img { position: absolute; right: 14px; bottom: 8px; width: 140px; height: auto; object-fit: contain; pointer-events: none; } /* 메인 2열 검색 위젯 */ .encar-main-search-box { background: #fff; border: 1px solid #111827; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.06); overflow: visible; position: relative; } .encar-msb-grid { display: grid; grid-template-columns: 1fr 300px; } .encar-msb-left { padding: 24px 28px 26px; border-right: 1px solid #E5E7EB; position: relative; } .encar-msb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .encar-msb-title { font-size: 21px; font-weight: 900; color: #111827; margin: 0; letter-spacing: -0.6px; } .encar-msb-stats { font-size: 12.5px; color: #6B7280; } .encar-msb-stats b { color: var(--gab-primary-600, #E52528); font-weight: 800; } .encar-msb-stat-sep { margin: 0 4px; color: #D1D5DB; } .encar-msb-tabs { display: flex; gap: 16px; margin-bottom: 16px; } .encar-msb-tab { background: transparent; border: 0; font-size: 14px; font-weight: 700; color: #6B7280; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px; } .encar-msb-tab.is-on { color: var(--gab-primary-600, #E52528); font-weight: 800; } .text-red { color: var(--gab-primary-600, #E52528); font-size: 8px; } /* 엔카식 PC 검색바: 제조사 · 모델 · 연식 · 주행거리 · 가격 · 검색 */ .encar-search-row--pc { display: flex; flex-direction: column; gap: 12px; } .encar-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) 88px; border: 1px solid #111827; border-radius: 6px; overflow: hidden; height: 48px; align-items: stretch; } .encar-bar-field { background: #fff; border: 0; border-right: 1px solid #E5E7EB; padding: 0 10px; font-size: 13px; font-weight: 600; color: #111827; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; height: 100%; min-width: 0; } .encar-bar-field:hover { background: #F9FAFB; } .encar-bar-field.is-open { background: #FFF0F0; border-color: var(--gab-primary-600, #E52528); } .encar-bar-ph { color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-bar-val { display: none; color: #111827; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .encar-bar-field.has-val .encar-bar-ph { display: none; } .encar-bar-field.has-val .encar-bar-val { display: block; } .encar-bar-field > i { font-size: 12px; color: #9CA3AF; transition: transform .2s; } .encar-bar-field.is-open > i { transform: rotate(180deg); } .encar-bar-go { background: var(--gab-primary-600, #E52528); color: #fff; border: 0; font-size: 14px; font-weight: 800; cursor: pointer; height: 100%; transition: background .15s; white-space: nowrap; } .encar-bar-go:hover { background: #C81A1D; } /* 5열 드롭다운 팝업 */ .encar-drop-panel { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #fff; border: 1px solid #111827; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.15); z-index: 100; padding: 16px 20px 20px; } .encar-drop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #E5E7EB; } .encar-drop-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .encar-drop-tabs { display: inline-flex; background: #F3F4F6; border-radius: 6px; padding: 3px; gap: 3px; } .encar-drop-tab { background: transparent; border: 0; padding: 5px 14px; font-size: 13px; font-weight: 700; color: #4B5563; border-radius: 4px; cursor: pointer; transition: all .15s; } .encar-drop-tab:hover { color: #111827; } .encar-drop-tab.is-on { background: #fff; color: var(--gab-primary-600, #E52528); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .encar-drop-nav { display: flex; align-items: center; gap: 10px; } .encar-drop-nav-title { font-size: 14.5px; font-weight: 700; color: #111827; } .encar-drop-nav-title strong { color: var(--gab-primary-600, #E52528); } .encar-drop-back { background: #F3F4F6; border: 0; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: #374151; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .12s, color .12s; } .encar-drop-back:hover { background: #E5E7EB; color: #111827; } .encar-drop-subhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .encar-drop-hint { font-size: 13px; color: #DC2626; font-weight: 700; margin: 0; } .encar-drop-quick { display: flex; align-items: center; } .encar-drop-quick-btn { background: #F9FAFB; border: 1px solid #E5E7EB; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #374151; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .12s; } .encar-drop-quick-btn:hover { background: #FFF0F0; border-color: #FECACA; color: var(--gab-primary-600, #E52528); } .encar-drop-close { background: transparent; border: 0; font-size: 16px; color: #6B7280; cursor: pointer; padding: 4px; transition: color .12s; } .encar-drop-close:hover { color: #111827; } .encar-drop-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 290px; overflow-y: auto; padding-right: 4px; } .encar-drop-item { background: transparent; border: 0; padding: 8px 12px; text-align: left; font-size: 13px; font-weight: 600; color: #374151; border-radius: 5px; cursor: pointer; transition: background .12s, color .12s; display: flex; align-items: center; justify-content: space-between; width: 100%; } .encar-drop-item:hover { background: #F3F4F6; color: #111827; } .encar-drop-item.is-on { background: #FFF0F0; color: var(--gab-primary-600, #E52528); font-weight: 800; } .encar-drop-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .encar-drop-item-badge { font-size: 10.5px; font-weight: 700; color: #9CA3AF; background: #F3F4F6; padding: 1px 6px; border-radius: 10px; margin-left: 6px; flex-shrink: 0; } .encar-drop-item.is-on .encar-drop-item-badge { background: #FEE2E2; color: #DC2626; } .encar-drop-item--all { grid-column: 1 / -1; background: #F9FAFB; border: 1px dashed #D1D5DB; font-weight: 700; color: #4B5563; margin-bottom: 4px; justify-content: flex-start; gap: 6px; } .encar-drop-item--all:hover { background: #FFF0F0; border-color: #FCA5A5; color: var(--gab-primary-600, #E52528); } .encar-drop-empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; color: #9CA3AF; font-size: 13.5px; margin: 0; } /* 우측: 내 차 팔기 상자 */ .encar-msb-right { padding: 24px 22px; background: #FAFBFC; border-radius: 0 11px 11px 0; display: flex; flex-direction: column; justify-content: center; } .encar-sellbox-title { font-size: 19px; font-weight: 900; color: #111827; margin: 0 0 6px; } .encar-sellbox-desc { font-size: 12.5px; color: #6B7280; line-height: 1.45; margin: 0 0 16px; } .encar-sellbox-btn { background: #111827; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 11px 16px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; transition: background .15s; } .encar-sellbox-btn:hover { background: #2D3748; } .encar-sellbox-badges { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 11.5px; color: #4B5563; } .encar-sellbox-badges i { color: var(--gab-primary-600, #E52528); margin-right: 4px; } /* 홈 매물 섹션 공통 */ .encar-section { padding: 40px 0; background: #fff; border-bottom: 1px solid #F0F2F5; } .encar-section--featured { background: #F8F9FA; } .encar-sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } .encar-sec-title { font-size: 22px; font-weight: 900; color: #111827; margin: 0 0 4px; letter-spacing: -0.6px; } .encar-sec-badge { font-size: 11px; font-weight: 800; background: var(--gab-primary-600, #E52528); color: #fff; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px; } .encar-sec-badge--blue { background: #2563EB; } .encar-sec-sub { font-size: 13px; color: #6B7280; margin: 0; } .encar-sec-more { font-size: 13px; font-weight: 700; color: #4B5563; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; } .encar-sec-more:hover { color: var(--gab-primary-600, #E52528); } /* 하단 트러스트 바 */ .encar-trust-bar { padding: 28px 0; background: #fff; border-bottom: 1px solid #E5E7EB; } .encar-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .encar-trust-item { display: flex; align-items: center; gap: 14px; } .encar-trust-item i { font-size: 26px; color: var(--gab-primary-600, #E52528); } .encar-trust-item strong { display: block; font-size: 14.5px; font-weight: 800; color: #111827; } .encar-trust-item span { font-size: 12px; color: #6B7280; } /* ========================================================================== 3. 검색 페이지 (Car Search Layout & Sidebar — PC 2열 완벽 보장 & 엔카 고도화) ========================================================================== */ .gab-encar-search-wrap { padding: 24px 0 60px; background: #F8F9FA; min-height: 80vh; } .encar-search-layout, .encar-search-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; } .encar-search-sidebar { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); } .encar-sidebar-sticky { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; } .encar-sidebar-sticky::-webkit-scrollbar { width: 4px; } .encar-sidebar-sticky::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; } /* 사이드바 상단 헤더 */ .encar-sb-header { padding: 16px 16px 12px; border-bottom: 1px solid #F0F2F5; background: #fff; } .encar-sb-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .encar-sb-heading { font-size: 16px; font-weight: 800; color: #111827; margin: 0; letter-spacing: -0.4px; display: flex; align-items: center; gap: 6px; } .encar-sb-reset-btn { font-size: 11.5px; color: #6B7280; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 4px; background: #F3F4F6; font-weight: 600; transition: all .15s; } .encar-sb-reset-btn:hover { color: var(--gab-primary-600, #E52528); background: #FFF1F2; } .encar-sb-total { font-size: 13px; color: #4B5563; } .encar-sb-total strong { font-size: 18px; font-weight: 900; color: var(--gab-primary-600, #E52528); margin: 0 2px; } /* 원산지 세그먼트 탭 */ .encar-sb-origin-wrap { padding: 10px 14px; background: #F9FAFB; border-bottom: 1px solid #F0F2F5; } .encar-sb-origin-tabs { display: flex; background: #E5E7EB; border-radius: 8px; padding: 2px; gap: 2px; } .encar-sb-origin-tab { flex: 1; text-align: center; padding: 6px 0; font-size: 12.5px; font-weight: 700; color: #4B5563; text-decoration: none; border-radius: 6px; transition: all .15s; } .encar-sb-origin-tab:hover { color: #111827; } .encar-sb-origin-tab.is-active { background: #fff; color: #111827; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* 아코디언 그룹 공통 */ .encar-sb-group { border-bottom: 1px solid #F0F2F5; } .encar-sb-group:last-child { border-bottom: 0; } .encar-sb-group-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 16px; background: transparent; border: 0; font-size: 13.5px; font-weight: 800; color: #111827; text-align: left; cursor: pointer; transition: background .12s; } .encar-sb-group-toggle:hover { background: #F9FAFB; } .encar-sb-group-toggle > span:first-child { display: inline-flex; align-items: center; gap: 6px; } .encar-sb-group-arrow { font-size: 11px; color: #9CA3AF; transition: transform .2s ease; } .encar-sb-group.is-open .encar-sb-group-arrow { transform: rotate(180deg); } .encar-sb-group-val { font-size: 11.5px; color: var(--gab-primary-600, #E52528); margin-left: auto; margin-right: 8px; font-weight: 700; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-sb-group-body { display: none; padding: 2px 14px 14px; } .encar-sb-group.is-open .encar-sb-group-body { display: block; } /* 차종 2열 그리드 */ .encar-sb-body-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .encar-sb-body-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #4B5563; cursor: pointer; transition: all .15s; } .encar-sb-body-chip i { font-size: 16px; color: #6B7280; transition: color .15s; } .encar-sb-body-chip:hover { border-color: #111827; color: #111827; background: #fff; } .encar-sb-body-chip:hover i { color: #111827; } .encar-sb-body-chip.is-active { background: #111827; color: #fff; border-color: #111827; font-weight: 700; } .encar-sb-body-chip.is-active i { color: #fff; } /* 제조사 & 모델 검색 및 리스트 */ .encar-sb-brand-search-box { position: relative; margin-bottom: 8px; } .encar-sb-brand-input { width: 100%; padding: 6px 28px 6px 10px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 12px; color: #111827; background: #F9FAFB; outline: none; transition: border-color .15s; } .encar-sb-brand-input:focus { border-color: #111827; background: #fff; } .encar-sb-brand-search-box i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #9CA3AF; } .encar-sb-brand-list, .encar-sb-model-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; } .encar-sb-brand-item, .encar-sb-model-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 8px; background: transparent; border: 0; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; text-align: left; transition: background .12s, color .12s; } .encar-sb-brand-item:hover, .encar-sb-model-item:hover { background: #F3F4F6; color: #111827; } .encar-sb-brand-item.is-active, .encar-sb-model-item.is-active { background: #FFF1F2; color: var(--gab-primary-600, #E52528); font-weight: 800; } .encar-sb-bname, .encar-sb-mname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-sb-bcnt, .encar-sb-mcnt { font-size: 11px; color: #9CA3AF; font-weight: normal; margin-left: 6px; } .encar-sb-brand-item.is-active .encar-sb-bcnt, .encar-sb-model-item.is-active .encar-sb-mcnt { color: var(--gab-primary-600, #E52528); font-weight: 700; } .encar-sb-model-subgroup { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E5E7EB; } .encar-sb-model-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; margin-bottom: 4px; } .encar-sb-model-header strong { font-size: 12.5px; color: #111827; font-weight: 800; } .encar-sb-back-btn { background: transparent; border: 0; font-size: 11px; color: #6B7280; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; } .encar-sb-back-btn:hover { color: var(--gab-primary-600, #E52528); } /* 연식 선택 */ .encar-sb-range-row { display: flex; align-items: center; gap: 6px; } .encar-sb-select { flex: 1; padding: 7px 8px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 12.5px; color: #111827; background: #fff; outline: none; cursor: pointer; transition: border-color .15s; } .encar-sb-select:focus { border-color: #111827; } .encar-sb-sep { color: #9CA3AF; font-weight: 700; } /* 프리셋 칩 (주행거리, 가격대) */ .encar-sb-presets { display: flex; flex-wrap: wrap; gap: 6px; } .encar-sb-preset-btn { padding: 5px 10px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 999px; font-size: 12px; font-weight: 600; color: #4B5563; cursor: pointer; transition: all .12s; } .encar-sb-preset-btn:hover { border-color: #111827; color: #111827; background: #fff; } .encar-sb-preset-btn.is-active { background: #111827; color: #fff; border-color: #111827; font-weight: 700; } /* 연료 리스트 */ .encar-sb-list { display: flex; flex-direction: column; gap: 2px; } .encar-sb-list-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 8px; background: transparent; border: 0; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; text-align: left; transition: background .12s, color .12s; } .encar-sb-list-item:hover { background: #F3F4F6; color: #111827; } .encar-sb-list-item.is-active { background: #FFF1F2; color: var(--gab-primary-600, #E52528); font-weight: 800; } /* 검수 옵션 체크박스 */ .encar-sb-checklist { display: flex; flex-direction: column; gap: 6px; } .encar-check-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; padding: 5px 6px; border-radius: 6px; transition: background .12s; } .encar-check-row:hover { background: #F3F4F6; } .encar-check-row input[type="checkbox"] { accent-color: var(--gab-primary-600, #E52528); width: 16px; height: 16px; cursor: pointer; } .encar-check-name { display: inline-flex; align-items: center; gap: 6px; } /* ========================================================================== 4. 우측 결과 영역 (Results Topbar & Sections) ========================================================================== */ .encar-search-main { min-width: 0; flex: 1; } .encar-results-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.03); } .encar-active-chip-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .encar-current-all-label { font-size: 14px; font-weight: 800; color: #111827; } .encar-filter-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 999px; font-size: 12px; font-weight: 600; color: #374151; } .encar-filter-tag button { background: transparent; border: 0; color: #9CA3AF; font-size: 14px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; line-height: 1; } .encar-filter-tag button:hover { color: var(--gab-primary-600, #E52528); } .encar-reset-link { font-size: 12px; font-weight: 600; color: #6B7280; text-decoration: none; margin-left: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 6px; background: #F3F4F6; transition: all .15s; } .encar-reset-link:hover { color: var(--gab-primary-600, #E52528); background: #FFF1F2; } .encar-view-sort-box { display: flex; align-items: center; gap: 12px; } .encar-sort-btn-group { display: flex; gap: 2px; background: #F3F4F6; padding: 2px; border-radius: 6px; } .encar-sort-btn { padding: 5px 10px; background: transparent; border: 0; font-size: 12.5px; font-weight: 600; color: #6B7280; cursor: pointer; border-radius: 4px; transition: all .15s; } .encar-sort-btn:hover { color: #111827; } .encar-sort-btn.is-on { color: #111827; font-weight: 800; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .encar-view-icons { display: flex; gap: 3px; border-left: 1px solid #E5E7EB; padding-left: 10px; } .encar-view-ico { width: 30px; height: 30px; background: transparent; border: 1px solid transparent; color: #9CA3AF; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all .15s; } .encar-view-ico:hover { color: #111827; background: #F3F4F6; } .encar-view-ico.is-active { background: #111827; color: #fff; border-color: #111827; } .encar-listing-section { margin-bottom: 32px; } /* ========================================================================== 5. 매물 카드 그리드 (Encar 4-Column Card Grid) ========================================================================== */ .encar-cars-grid-wrap, .encar-cars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1200px) and (min-width: 769px) { .encar-cars-grid-wrap, .encar-cars-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } .encar-cars-grid-wrap.is-list-view { display: flex; flex-direction: column; gap: 12px; } .encar-cars-grid-wrap.is-list-view .encar-car-card { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; padding: 12px; } .encar-cars-grid-wrap.is-list-view .encar-card-thumb-wrap { width: 100%; height: 160px; aspect-ratio: auto; border-radius: 8px; } .encar-car-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .22s cubic-bezier(0.2, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.2, 0, 0.2, 1), border-color .22s ease; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,.035); } .encar-car-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.09); border-color: #D1D5DB; } .encar-card-thumb-wrap { position: relative; aspect-ratio: 16 / 11; background: #F3F4F6; overflow: hidden; } .encar-card-media-link { position: absolute; inset: 0; z-index: 1; } .encar-card-img-box { width: 100%; height: 100%; position: relative; } .encar-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(0.2, 0, 0.2, 1); } .encar-car-card:hover .encar-card-img { transform: scale(1.04); } .encar-card-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #D1D5DB; } /* 안심 배지 오버레이 */ .encar-badges-overlay { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; pointer-events: none; } .encar-badge-diag { background: linear-gradient(135deg, #E52528 0%, #C8161D 100%); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 4px; box-shadow: 0 2px 6px rgba(200,22,29,.35); letter-spacing: -0.2px; } .encar-badge-trust { background: rgba(17, 24, 39, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; letter-spacing: -0.2px; } .encar-card-fav { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #4B5563; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .15s, background .15s, color .15s; } .encar-card-fav:hover { background: #fff; transform: scale(1.12); color: #E52528; } .encar-card-fav.is-active { background: #fff; color: #E52528; } .encar-card-content { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; } .encar-card-title { font-size: 15px; font-weight: 800; line-height: 1.35; margin: 0 0 6px; color: #111827; letter-spacing: -0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-card-title a { color: #111827; text-decoration: none; transition: color .15s; } .encar-card-title a:hover { color: var(--gab-primary-600, #E52528); } .encar-card-spec { font-size: 12.5px; color: #6B7280; margin: 0 0 10px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .encar-tag { font-size: 11px; color: #4B5563; background: #F8F9FA; border: 1px solid #E5E7EB; padding: 2px 7px; border-radius: 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; } .encar-tag i { color: #2563EB; font-size: 11px; } .encar-card-price-row { display: flex; flex-direction: column; margin-top: auto; padding-top: 10px; border-top: 1px solid #F3F4F6; } .encar-card-price { font-size: 20px; font-weight: 900; color: #111827; letter-spacing: -0.6px; } .encar-card-lease { font-size: 11.5px; font-weight: 600; color: #6B7280; margin-top: 2px; } /* ========================================================================== 6. 리스트 뷰 모드 ========================================================================== */ .encar-cars-grid-wrap.is-list-view { display: flex; flex-direction: column; gap: 12px; } .encar-cars-grid-wrap.is-list-view .encar-car-card { display: grid; grid-template-columns: 240px 1fr; padding: 16px; gap: 20px; border-radius: 12px; } .encar-cars-grid-wrap.is-list-view .encar-card-thumb-wrap { width: 240px; height: 160px; border-radius: 8px; } .encar-cars-grid-wrap.is-list-view .encar-card-content { padding: 0; justify-content: center; } .encar-cars-grid-wrap.is-list-view .encar-card-title { font-size: 17px; margin-bottom: 6px; } .encar-cars-grid-wrap.is-list-view .encar-card-spec { font-size: 13.5px; margin-bottom: 8px; } .encar-cars-grid-wrap.is-list-view .encar-card-price-row { border-top: 0; padding-top: 0; margin-top: 6px; } .encar-cars-grid-wrap.is-list-view .encar-card-price { font-size: 22px; color: var(--gab-primary-600, #E52528); } /* ── 모바일 전용 요소 기본 상태 (PC에서는 숨김) ── */ .gab-mstack { display: none; } .encar-m-search-trigger-bar { display: none; } .encar-msearch-overlay { display: none; } .encar-mobile-tabbar { display: none; } /* ========================================================================== 7. 반응형 미디어 쿼리 ========================================================================== */ /* PC 전용 (769px 이상) 사이드바 2열 레이아웃 강제 보장 */ @media (min-width: 769px) { .encar-search-layout, .encar-search-body { display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important; gap: 24px !important; align-items: start !important; } .encar-search-sidebar { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; } .encar-m-search-trigger-bar { display: none !important; } } @media (max-width: 1200px) { .encar-cars-grid-wrap, .encar-cars-grid { grid-template-columns: repeat(3, 1fr); } .encar-trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .encar-drop-cols { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .encar-msb-grid { grid-template-columns: 1fr; } .encar-msb-right { border-radius: 0 0 11px 11px; border-top: 1px solid #E5E7EB; } .encar-hero-banners { grid-template-columns: 1fr; } .encar-drop-cols { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { /* ── 0. 차량 검색 페이지 모바일 전환 ── */ .encar-search-layout, .encar-search-body { display: block !important; } .encar-search-sidebar { display: none !important; } .encar-m-search-trigger-bar { display: block !important; } .encar-cars-grid-wrap, .encar-cars-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* ── 1. 모바일 헤더 & 로고 & 햄버거/우측 액션 ── */ .encar-top-util { display: none !important; } .encar-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .encar-pc-nav { display: none; } .encar-main-nav-wrap { border-bottom: 1px solid #f0f0f0; } .encar-main-header-inner { display: flex !important; align-items: center; justify-content: space-between; height: 54px; min-height: 54px; padding: 0 12px; position: relative; } .gab-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; font-size: 24px; color: #111827; cursor: pointer; padding: 0; flex-shrink: 0; z-index: 2; } .gab-logo.hicm-header-logo-center { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; text-decoration: none; z-index: 1; height: 100%; overflow: visible; } .gab-logo-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0; overflow: visible; flex-shrink: 0; } .gab-logo-icon img, .gab-logo-icon .hicm-logo-mark { width: 36px; height: 36px; max-width: 36px; max-height: 36px; object-fit: contain; } .gab-logo-icon svg { width: 36px; height: 36px; } .gab-logo-name { font-size: 15px; font-weight: 800; color: #111827; letter-spacing: -0.03em; white-space: nowrap; } .gab-logo-tagline { display: none !important; } .encar-mobile-cta { display: flex !important; align-items: center; gap: 4px; z-index: 2; } .gab-hdr-search, .gab-header-cta .gab-btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; font-size: 19px; color: #1f2937; text-decoration: none; border-radius: 8px; position: relative; } .gab-header-cta .gab-btn-icon-badge { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; font-weight: 800; color: #fff; background: #E52528; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .encar-home-hero { padding: 0; } .encar-hero-banners, .encar-main-search-box, .encar-trust-bar { display: none !important; } /* ── 2. 모바일 홈 탭 & 스택 (스크린샷 1) ── */ .gab-mstack { display: block !important; background: #fff; margin: 0; padding: 0; } .gab-m-main-tabs { display: flex; position: relative; background: #fff; border-bottom: 1px solid #EDEDED; } .gab-m-main-tab { flex: 1; text-align: center; padding: 14px 0 12px; font-size: 16px; font-weight: 700; color: #9CA3AF; border: 0; background: transparent; cursor: pointer; transition: color 0.2s ease; position: relative; } .gab-m-main-tab.is-active { color: #111827; font-weight: 800; } .gab-m-tab-indicator { position: absolute; bottom: 0; left: 0; width: 50%; height: 3px; background: #111827; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } /* 내차사기 패널 */ .gab-mbanner { margin: 12px 14px 10px; border-radius: 12px; overflow: hidden; } .gab-mpill { width: calc(100% - 28px); margin: 6px 14px 12px; height: 46px; border-radius: 23px; background: #F3F4F6; border: 1px solid #E5E7EB; display: flex; align-items: center; padding: 0 16px; gap: 10px; color: #6B7280; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; } .gab-mpill i { font-size: 16px; color: #9CA3AF; } .gab-mpop { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding: 0 14px 12px; scrollbar-width: none; } .gab-mpop::-webkit-scrollbar { display: none; } .gab-mpop a { display: inline-block; padding: 6px 12px; border-radius: 16px; background: #F8FAFC; border: 1px solid #E2E8F0; font-size: 12.5px; color: #475569; font-weight: 500; text-decoration: none; white-space: nowrap; } .gab-m-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 14px 16px; } .gab-m-qcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 4px 10px; background: #F8FAFC; border-radius: 10px; border: 1px solid #EEF2F6; text-decoration: none; transition: transform 0.15s; } .gab-m-qcard-ic { font-size: 22px; margin-bottom: 4px; } .gab-m-qcard strong { font-size: 12.5px; font-weight: 700; color: #1E293B; } .gab-m-qcard span { font-size: 10.5px; color: #64748B; margin-top: 2px; } /* 내차팔기 패널 (스크린샷 1 완벽 구현) */ .gab-m-sell-card { padding: 32px 20px 40px; text-align: center; background: #F8FAFC; } .gab-m-sell-title { font-size: 23px; font-weight: 800; color: #111827; line-height: 1.36; letter-spacing: -0.03em; margin: 0 0 24px; } .gab-m-plate-box { max-width: 380px; margin: 0 auto 16px; } .gab-m-plate-input-wrap { display: flex; align-items: center; background: #fff; border: 2px solid #E5E7EB; border-radius: 14px; padding: 4px 6px 4px 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); transition: border-color 0.2s, box-shadow 0.2s; } .gab-m-plate-input-wrap:focus-within { border-color: #E52528; box-shadow: 0 4px 18px rgba(229,37,40,0.14); } .gab-m-plate-input { flex: 1; border: 0; font-size: 20px; font-weight: 700; color: #111827; outline: none; background: transparent; padding: 10px 0; letter-spacing: 0.04em; } .gab-m-plate-input::placeholder { color: #9CA3AF; font-weight: 500; letter-spacing: 0; font-size: 18px; } .gab-m-plate-submit { width: 44px; height: 44px; border-radius: 10px; background: #E52528; color: #fff; border: 0; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, transform 0.1s; flex-shrink: 0; } .gab-m-plate-submit:hover { background: #CC1F22; } .gab-m-plate-submit:active { transform: scale(0.95); } .gab-m-plate-tooltip { position: relative; max-width: 380px; margin: 0 auto 24px; background: #1E293B; color: #F1F5F9; border-radius: 8px; padding: 11px 16px; font-size: 13px; font-weight: 500; text-align: left; box-shadow: 0 4px 12px rgba(15,23,42,0.18); } .gab-m-plate-tooltip-arrow { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #1E293B; } .gab-m-plate-tooltip-text { display: flex; align-items: center; gap: 8px; line-height: 1.4; } .gab-m-plate-tooltip-text i { color: #38BDF8; font-size: 15px; flex-shrink: 0; } .gab-m-sell-footer-links { text-align: center; } .gab-m-sell-all-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: #64748B; text-decoration: underline; text-underline-offset: 3px; } .gab-m-sell-all-link:hover { color: #1E293B; } /* ── 3. 모바일 하단 4버튼 고정 탭바 (홈, 검색, 중개문의, 마이페이지) ── */ .gab-tabbar, .encar-mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: #fff; border-top: 1px solid #E5E7EB; display: flex !important; align-items: center; justify-content: space-around; z-index: 990; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgba(0,0,0,0.04); } .gab-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; text-decoration: none; color: #9CA3AF; transition: color 0.15s; padding: 0; } .gab-tabbar-ic { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; } .gab-tabbar-label { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .gab-tabbar-item.is-active { color: #E52528; } .gab-tabbar-item.is-active .gab-tabbar-ic-on { display: inline; } .gab-tabbar-item.is-active .gab-tabbar-ic-off { display: none; } .gab-tabbar-ic-on { display: none; } .gab-tabbar-ic-off { display: inline; } /* ── 4. 모바일 차량검색 & 필터 오버레이 (스크린샷 2 완벽 구현) ── */ .encar-msearch-overlay { position: fixed; inset: 0; z-index: 1050; background: #fff; display: none; flex-direction: column; } .encar-msearch-overlay.is-open { display: flex !important; } .encar-msearch-nav { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px; border-bottom: 1px solid #F0F0F0; background: #fff; flex-shrink: 0; } .encar-msearch-back, .encar-msearch-close-x { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; font-size: 20px; color: #111827; cursor: pointer; padding: 0; } .encar-msearch-title { font-size: 17px; font-weight: 800; color: #111827; margin: 0; } .encar-msearch-bar-wrap { padding: 10px 14px 6px; background: #fff; flex-shrink: 0; } .encar-msearch-input-pill { display: flex; align-items: center; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 24px; padding: 0 14px; gap: 8px; height: 44px; } .encar-msearch-pill-ic { font-size: 16px; color: #9CA3AF; flex-shrink: 0; } .encar-msearch-input { flex: 1; border: 0; background: transparent; font-size: 14px; color: #111827; outline: none; padding: 0; height: 100%; } .encar-msearch-input::placeholder { color: #9CA3AF; } .encar-msearch-tabs { display: flex; position: relative; background: #fff; border-bottom: 1px solid #EDEDED; padding: 0 8px; flex-shrink: 0; } .encar-msearch-tab { flex: 1; text-align: center; padding: 12px 4px 10px; font-size: 14.5px; font-weight: 600; color: #6B7280; border: 0; background: transparent; cursor: pointer; position: relative; transition: color 0.15s; } .encar-msearch-tab.is-active { color: #E52528; font-weight: 800; } .encar-msearch-tab.is-active::after { content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2.5px; background: #E52528; border-radius: 2px 2px 0 0; } .encar-msearch-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 120px; background: #fff; } .encar-mfilter-sec { margin-bottom: 24px; } .encar-mfilter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .encar-mfilter-title { font-size: 15px; font-weight: 800; color: #111827; margin: 0; display: flex; align-items: center; gap: 6px; } .encar-mfilter-info { font-size: 14px; } .encar-mfilter-circle-group { display: flex; flex-wrap: wrap; gap: 10px; } .encar-circle-chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; } .encar-circle-chk input { display: none; } .encar-circle-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #D1D5DB; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; } .encar-circle-chk input:checked + .encar-circle-mark { border-color: #E52528; background: #E52528; } .encar-circle-chk input:checked + .encar-circle-mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .encar-circle-label { font-size: 13.5px; font-weight: 500; color: #374151; } .encar-circle-chk input:checked ~ .encar-circle-label { color: #111827; font-weight: 700; } .encar-mfilter-fuel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .encar-fuel-box { display: block; cursor: pointer; margin: 0; } .encar-fuel-box input { display: none; } .encar-fuel-box-inner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 8px; background: #fff; transition: all 0.15s; } .encar-fuel-chk-icon { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #D1D5DB; display: flex; align-items: center; justify-content: center; font-size: 14px; color: transparent; } .encar-fuel-name { font-size: 13px; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-fuel-box input:checked + .encar-fuel-box-inner { border-color: #E52528; background: #FEF2F2; } .encar-fuel-box input:checked + .encar-fuel-box-inner .encar-fuel-chk-icon { border-color: #E52528; background: #E52528; color: #fff; } .encar-fuel-box input:checked + .encar-fuel-box-inner .encar-fuel-name { color: #E52528; font-weight: 700; } .encar-mfilter-accordions { border-top: 1px solid #F3F4F6; margin-top: 8px; } .encar-macc-item { border-bottom: 1px solid #F3F4F6; } .encar-macc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border: 0; background: transparent; cursor: pointer; text-align: left; } .encar-macc-trigger-title { font-size: 15px; font-weight: 700; color: #111827; } .encar-macc-trigger-val { font-size: 13.5px; color: #9CA3AF; margin-left: auto; margin-right: 8px; } .encar-macc-arrow { font-size: 14px; color: #9CA3AF; transition: transform 0.2s ease; } .encar-macc-item.is-open .encar-macc-arrow { transform: rotate(180deg); } .encar-macc-content { display: none; padding: 4px 0 16px; } .encar-macc-item.is-open .encar-macc-content { display: block; } .encar-mbrand-pills, .encar-mmodel-wrap, .encar-mprice-presets { display: flex; flex-wrap: wrap; gap: 8px; } .encar-mbpill, .encar-mmodel-btn, .encar-mprice-btn { padding: 7px 14px; border-radius: 20px; border: 1px solid #E5E7EB; background: #fff; font-size: 13px; font-weight: 500; color: #4B5563; cursor: pointer; transition: all 0.15s; } .encar-mbpill.is-active, .encar-mmodel-btn.is-active, .encar-mprice-btn.is-active { border-color: #E52528; background: #FEF2F2; color: #E52528; font-weight: 700; } .encar-myear-row { display: flex; align-items: center; gap: 8px; } .encar-mselect { flex: 1; height: 42px; border: 1px solid #E5E7EB; border-radius: 8px; padding: 0 10px; font-size: 13.5px; background: #fff; color: #111827; } .encar-mselect-sep { color: #9CA3AF; } .encar-mfilter-recent-sec { margin-top: 24px; } .encar-mfilter-clear-recent { border: 0; background: transparent; font-size: 12px; color: #9CA3AF; cursor: pointer; } .encar-msearch-recent-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* 하단 고정 액션바 & 시세조회 띠배너 */ .encar-msearch-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #E5E7EB; z-index: 1060; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); } .encar-msearch-action-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; } .encar-msearch-btn-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; height: 46px; border: 1px solid #D1D5DB; background: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; color: #4B5563; cursor: pointer; flex-shrink: 0; } .encar-msearch-btn-submit { flex: 1; height: 46px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #E52528 0%, #D81B1E 100%); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(229,37,40,0.28); } .encar-msearch-ribbon-banner { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px 11px; background: #1E293B; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; } .encar-msearch-ribbon-tag { background: #E52528; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; } /* ── 5. 매물 목록 페이지 모바일 검색 트리거 바 ── */ .encar-m-search-trigger-bar { display: block !important; padding: 6px 12px 10px; } .encar-m-search-trigger-pill { width: 100%; height: 44px; border-radius: 22px; background: #F3F4F6; border: 1px solid #E5E7EB; display: flex; align-items: center; padding: 0 14px; gap: 8px; cursor: pointer; text-align: left; } .encar-m-search-trigger-pill i.bi-search { font-size: 15px; color: #9CA3AF; } .encar-m-search-trigger-txt { flex: 1; font-size: 13.5px; color: #4B5563; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-m-search-trigger-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; background: #111827; color: #fff; font-size: 11.5px; font-weight: 700; } } @media (max-width: 600px) { .encar-cars-grid-wrap, .encar-cars-grid { grid-template-columns: 1fr; } .encar-cars-grid-wrap.is-list-view .encar-car-card { grid-template-columns: 1fr; } .encar-cars-grid-wrap.is-list-view .encar-card-thumb-wrap { width: 100%; height: auto; aspect-ratio: 16 / 11; } } /* ========================================================================== 엔카 시그니처 버튼 시스템 (Buttons & Design Refinement) - Signature Red: #E52528 / #C8161D - Dark Navy: #111827 / #1F2937 - White Pill: #FFFFFF (border: #E5E7EB) ========================================================================== */ .gab-btn, .gab-pill-btn, button.gab-parts-submit, .gab-match-proposal-btn, .encar-sellbox-btn, .encar-hbanner-btn { font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; } /* 1. Encar Signature Red Pill & Solid Buttons */ .gab-btn-primary, .gab-btn--primary, .gab-btn-accent, .gab-pill-btn--primary, .gab-parts-submit, .gab-match-proposal-btn, .gab-btn--red { background: linear-gradient(135deg, #E52528 0%, #C8161D 100%) !important; color: #ffffff !important; border: 1px solid #C8161D !important; border-radius: 9999px !important; padding: 10px 22px !important; font-size: 14.5px !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(229, 37, 40, 0.25) !important; position: relative !important; overflow: hidden !important; } .gab-btn-primary:hover, .gab-btn--primary:hover, .gab-btn-accent:hover, .gab-pill-btn--primary:hover, .gab-parts-submit:hover, .gab-match-proposal-btn:hover, .gab-btn--red:hover { background: #C8161D !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(229, 37, 40, 0.35) !important; } .gab-btn-primary:active, .gab-btn--primary:active, .gab-btn-accent:active, .gab-pill-btn--primary:active, .gab-parts-submit:active, .gab-match-proposal-btn:active, .gab-btn--red:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 2px 8px rgba(229, 37, 40, 0.2) !important; } /* 2. Dark Navy Buttons */ .gab-btn--secondary, .gab-btn-navy, .gab-btn-dark, .gab-pill-btn--dark, .encar-hbanner-item--sell .encar-hbanner-btn { background: #111827 !important; color: #ffffff !important; border: 1px solid #111827 !important; border-radius: 9999px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.2) !important; } .gab-btn--secondary:hover, .gab-btn-navy:hover, .gab-btn-dark:hover, .gab-pill-btn--dark:hover, .encar-hbanner-item--sell .encar-hbanner-btn:hover { background: #1F2937 !important; border-color: #1F2937 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.3) !important; } .gab-btn--secondary:active, .gab-btn-navy:active, .gab-btn-dark:active, .gab-pill-btn--dark:active { transform: translateY(0) scale(0.98) !important; } /* 3. White Round Pill Buttons */ .gab-btn--outline, .gab-btn-white, .gab-pill-btn--white, .gab-pill-btn, .encar-hbanner-btn, .gab-filter-apply, .gab-btn--white-pill { background: #ffffff !important; color: #111827 !important; border: 1px solid #E5E7EB !important; border-radius: 9999px !important; padding: 9px 20px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } .gab-btn--outline:hover, .gab-btn-white:hover, .gab-pill-btn--white:hover, .gab-pill-btn:hover, .encar-hbanner-btn:hover, .gab-filter-apply:hover, .gab-btn--white-pill:hover { background: #F9FAFB !important; border-color: #D1D5DB !important; color: #111827 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } .gab-btn--outline:active, .gab-btn-white:active, .gab-pill-btn--white:active, .gab-pill-btn:active, .encar-hbanner-btn:active, .gab-filter-apply:active { transform: translateY(0) scale(0.98) !important; } /* ========================================================================== 최근 등록된 맞춤 차량구매 요청 (10건) 스타일 (Recent Buy Requests Section) ========================================================================== */ .gab-buyreq-section { padding: 48px 0 56px; background: #FFFFFF; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; margin: 24px 0; } .gab-buyreq-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .gab-buyreq-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .gab-buyreq-badge-pulse { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; border-radius: 9999px; font-size: 12.5px; font-weight: 700; } .gab-pulse-dot { width: 8px; height: 8px; background: #10B981; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 rgba(16, 185, 129, 0.7); animation: gabPulse 1.8s infinite; } @keyframes gabPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .gab-buyreq-badge-escrow { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; border-radius: 9999px; font-size: 12.5px; font-weight: 700; } .gab-buyreq-title { font-size: 24px; font-weight: 800; color: #111827; margin: 0 0 8px 0; letter-spacing: -0.03em; } .gab-buyreq-desc { font-size: 14.5px; color: #4B5563; margin: 0; max-width: 780px; line-height: 1.6; } .gab-buyreq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 28px; } .gab-buyreq-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .gab-buyreq-card:hover { border-color: #C8161D; box-shadow: 0 8px 24px rgba(229, 37, 40, 0.12); transform: translateY(-2px); } .gab-buyreq-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #F3F4F6; } .gab-buyreq-buyer-info { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #374151; } .gab-buyreq-country-flag { font-size: 18px; line-height: 1; } .gab-buyreq-country-name { font-weight: 700; color: #111827; } .gab-buyreq-buyer-name { background: #F3F4F6; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: #4B5563; font-weight: 600; } .gab-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700; } .gab-status-badge--open { background: #FDF2F2; color: #E52528; border: 1px solid #FDE8E8; } .gab-status-dot { width: 6px; height: 6px; background: #E52528; border-radius: 50%; } .gab-buyreq-car-title { margin-bottom: 12px; } .gab-buyreq-car-name { font-size: 18px; font-weight: 800; color: #111827; margin: 0 0 4px 0; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gab-buyreq-car-num { font-size: 13px; font-weight: 800; color: #E52528; background: #FFF1F2; padding: 2px 8px; border-radius: 6px; } .gab-buyreq-car-trim { font-size: 14px; font-weight: 600; color: #4B5563; margin: 0; } .gab-buyreq-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .gab-spec-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: #F8F9FA; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 12.5px; color: #374151; font-weight: 500; } .gab-spec-chip--budget { background: #FEF2F2; border-color: #FECACA; color: #C8161D; } .gab-spec-chip--budget b { font-weight: 800; } .gab-buyreq-note-box { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: #334155; margin-top: 8px; } .gab-note-icon { color: #94A3B8; font-size: 16px; line-height: 1; margin-top: 2px; flex-shrink: 0; } .gab-note-text strong { display: block; color: #0F172A; margin-bottom: 2px; } .gab-note-text p { margin: 0; color: #475569; } .gab-buyreq-card-footer { padding-top: 14px; border-top: 1px dashed #E5E7EB; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gab-buyreq-security-tip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; font-weight: 500; } .gab-buyreq-security-tip i { color: #059669; font-size: 14px; } .gab-match-proposal-btn { background: linear-gradient(135deg, #E52528 0%, #C8161D 100%) !important; color: #FFFFFF !important; border: 1px solid #C8161D !important; border-radius: 9999px !important; padding: 8px 18px !important; font-size: 13.5px !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(229, 37, 40, 0.22) !important; white-space: nowrap !important; } .gab-match-proposal-btn:hover { background: #C8161D !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(229, 37, 40, 0.32) !important; } .gab-buyreq-footer-notice { background: #F8FAFC; border: 1px solid #CBD5E1; border-left: 4px solid #E52528; border-radius: 10px; padding: 18px 22px; display: flex; align-items: flex-start; gap: 16px; margin-top: 12px; } .gab-fn-icon { font-size: 26px; color: #E52528; line-height: 1; margin-top: 2px; flex-shrink: 0; } .gab-fn-content strong { display: block; font-size: 15px; color: #0F172A; margin-bottom: 4px; } .gab-fn-content p { font-size: 13.5px; color: #475569; line-height: 1.6; margin: 0; } /* ========================================================================== 플랫폼 매칭 제안 모달 스타일 (Platform Match Proposal Modal) ========================================================================== */ .gab-proposal-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; } .gab-proposal-modal-card { background: #FFFFFF; border-radius: 20px; max-width: 640px; width: 100%; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; animation: gabModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes gabModalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .gab-proposal-modal-head { padding: 24px 28px 16px; border-bottom: 1px solid #F1F5F9; position: relative; } .gab-prop-head-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #FEF2F2; color: #E52528; border-radius: 6px; font-size: 12px; font-weight: 700; margin-bottom: 8px; } .gab-proposal-modal-title { font-size: 20px; font-weight: 800; color: #0F172A; margin: 0 0 6px 0; letter-spacing: -0.02em; } .gab-proposal-modal-sub { font-size: 13.5px; color: #64748B; margin: 0; line-height: 1.5; } .gab-proposal-modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: #F1F5F9; border: 0; color: #64748B; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } .gab-proposal-modal-close:hover { background: #E2E8F0; color: #0F172A; } .gab-proposal-modal-body { padding: 20px 28px 28px; } .gab-prop-target-box { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; } .gab-prop-target-row { font-size: 12.5px; color: #64748B; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .gab-prop-target-row b { color: #0F172A; } .gab-prop-target-car { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 4px; } .gab-prop-target-budget { font-size: 13.5px; color: #475569; } .gab-prop-target-budget strong { color: #E52528; font-weight: 800; } .gab-prop-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .gab-prop-field { margin-bottom: 14px; } .gab-prop-field label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 6px; } .gab-prop-input, .gab-prop-textarea { width: 100%; padding: 10px 14px; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 14px; font-family: inherit; color: #0F172A; background: #FFFFFF; transition: all 0.15s; box-sizing: border-box; } .gab-prop-input:focus, .gab-prop-textarea:focus { outline: none; border-color: #E52528; box-shadow: 0 0 0 3px rgba(229, 37, 40, 0.15); } .gab-prop-safety-banner { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 20px; font-size: 12.5px; color: #7F1D1D; line-height: 1.5; } .gab-prop-safety-banner i { font-size: 16px; color: #DC2626; margin-top: 2px; flex-shrink: 0; } .gab-prop-safety-banner strong { display: block; color: #991B1B; margin-bottom: 2px; } .gab-prop-safety-banner p { margin: 0; } .gab-prop-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } /* ========================================================================== 모바일 전용 차량 프레임워크 (App-like Mobile Framework) ========================================================================== */ @media (max-width: 768px) { .gab-buyreq-grid { grid-template-columns: 1fr; gap: 14px; } .gab-buyreq-title { font-size: 20px; } .gab-prop-form-grid { grid-template-columns: 1fr; gap: 10px; } .gab-prop-actions { flex-direction: column-reverse; width: 100%; } .gab-prop-actions button { width: 100% !important; } /* 모바일 전용 수평 스크롤 칩 바 */ .gab-m-chips-container { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 12px 14px; scrollbar-width: none; } .gab-m-chips-container::-webkit-scrollbar { display: none; } .gab-m-chip-pill { flex-shrink: 0; scroll-snap-align: start; padding: 8px 16px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 9999px; font-size: 13.5px; font-weight: 600; color: #374151; box-shadow: 0 1px 4px rgba(0,0,0,0.04); transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .gab-m-chip-pill.is-active, .gab-m-chip-pill:active { background: #111827; color: #FFFFFF; border-color: #111827; transform: scale(0.96); } /* 하단 탭바 고도화 (App Bottom Navigation) */ .encar-mobile-tabbar, .gab-tabbar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 64px !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-top: 1px solid #E5E7EB !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important; display: flex !important; align-items: center !important; justify-content: space-around !important; z-index: 1000 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } .gab-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #6B7280; text-decoration: none; font-size: 11px; font-weight: 600; transition: all 0.15s; height: 100%; -webkit-tap-highlight-color: transparent; } .gab-tabbar-item i { font-size: 20px; line-height: 1; transition: transform 0.15s; } .gab-tabbar-item.is-active { color: #E52528 !important; font-weight: 800 !important; } .gab-tabbar-item.is-active i { transform: scale(1.1); } .gab-tabbar-item:active { transform: scale(0.92); } /* 모바일 검색 바 앱 스타일 */ .gab-mpill { width: 100% !important; height: 48px !important; border-radius: 9999px !important; background: #FFFFFF !important; border: 1.5px solid #E5E7EB !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; display: flex !important; align-items: center !important; padding: 0 18px !important; gap: 10px !important; font-size: 14px !important; color: #6B7280 !important; cursor: pointer !important; transition: all 0.15s !important; margin: 12px 0 10px !important; } .gab-mpill:active { transform: scale(0.98) !important; border-color: #E52528 !important; } .gab-mpill i.bi-search { color: #E52528 !important; font-size: 17px !important; } } @media (max-width: 768px) { .gab-mstep-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0 12px; } .gab-mstep-crumb { border: 0; background: #f1f5f9; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #0f172a; } .gab-mstep-crumb-sep { color: #94a3b8; font-weight: 700; } .gab-mstep-title { font-size: 18px; font-weight: 800; margin: 4px 0 12px; color: #111827; } .gab-mstep-origin, .gab-mstep-list { display: flex; flex-direction: column; gap: 8px; } .gab-mstep-item { width: 100%; text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 700; color: #111827; } .gab-mstep-item--origin { font-size: 17px; padding: 18px 16px; } .gab-mstep-item--muted { color: #64748b; background: #f8fafc; } .gab-mstep-empty { color: #64748b; font-size: 14px; padding: 12px 0; } .gab-m-main-tabs:not(:has(#gab-m-tab-sell)) .gab-m-tab-indicator { display: none; } .gab-m-main-tabs:not(:has(#gab-m-tab-sell)) .gab-m-main-tab { flex: 1; width: 100%; } } /* ========================================================================== v195 — PC 엔카식 검색 범위 드롭다운 + 이용안내/회사소개 ========================================================================== */ .encar-drop-cols--range { display: block; } .encar-drop-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; max-width: 520px; } .encar-drop-range-col { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #6B7280; } .encar-drop-select { width: 100%; height: 42px; border: 1px solid #E5E7EB; border-radius: 6px; padding: 0 10px; font-size: 14px; font-weight: 700; color: #111827; background: #fff; } .encar-drop-select:focus { outline: 0; border-color: #111827; } .encar-drop-range-sep { padding-bottom: 12px; font-size: 16px; font-weight: 800; color: #9CA3AF; } .gab-guide-hero { background: #fff; border-bottom: 1px solid #E5E7EB; padding: 48px 20px 36px; } .gab-guide-hero-inner, .gab-guide { max-width: 760px; margin: 0 auto; } .gab-guide { padding: 28px 20px 72px; } .gab-guide-kicker { display: inline-block; margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: #6B7280; } .gab-guide-title { margin: 0 0 14px; font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.25; color: #111827; } .gab-guide-lead, .gab-guide-body, .gab-guide-note { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: #4B5563; } .gab-guide-tabs { display: flex; gap: 4px; margin: 0 0 32px; padding: 4px; background: #F3F4F6; border-radius: 10px; } .gab-guide-tab { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 11px 16px; font-size: 15px; font-weight: 800; color: #6B7280; cursor: pointer; } .gab-guide-tab.is-on { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .gab-guide-h2 { margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: #111827; } .gab-guide-steps { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid #E5E7EB; } .gab-guide-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid #E5E7EB; } .gab-guide-num { width: 32px; height: 32px; border-radius: 50%; background: #111827; color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .gab-guide-step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #111827; } .gab-guide-step p { margin: 0; font-size: 15px; line-height: 1.7; color: #4B5563; } .gab-guide-deposit { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; margin-bottom: 32px; } .gab-guide-deposit .gab-guide-h2 { margin-bottom: 14px; } .gab-guide-deposit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .gab-guide-deposit-card { background: #fff; border-radius: 10px; padding: 16px 18px; border: 1px solid #E5E7EB; } .gab-guide-deposit-if { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #6B7280; } .gab-guide-deposit-then { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.5; color: #111827; } .gab-guide-note { margin: 0; font-size: 14px; color: #374151; } .gab-guide-why { margin-bottom: 36px; } .gab-guide-bullets { margin: 8px 0 0; padding: 0; list-style: none; } .gab-guide-bullets li { position: relative; padding: 8px 0 8px 18px; font-size: 16px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; } .gab-guide-bullets li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #111827; } .gab-guide-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; } .gab-guide-promise { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 18px 18px 16px; } .gab-guide-promise i { font-size: 20px; color: #111827; margin-bottom: 10px; display: block; } .gab-guide-promise h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #111827; } .gab-guide-promise p { margin: 0; font-size: 14px; line-height: 1.65; color: #4B5563; } .gab-guide-cta { display: flex; flex-wrap: wrap; gap: 10px; } .gab-guide-step--search { overflow: visible; } .gab-guide-search { grid-column: 1 / -1; margin-top: 4px; position: relative; overflow: visible; } .gab-pc-search { position: relative; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; overflow: visible; } .gab-pc-search .encar-search-row--pc { gap: 10px; } .gab-pc-search .encar-drop-panel { z-index: 40; } .gab-pc-search-hint { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #6B7280; } .gab-pc-search-hint a { margin-left: 6px; font-weight: 800; color: #111827; text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 769px) { .gab-guide { max-width: 1040px; } } @media (max-width: 768px) { .gab-pc-search { display: none; } .gab-guide-hero { padding: 32px 16px 24px; } .gab-guide { padding: 20px 16px 56px; } .gab-guide-deposit-grid, .gab-guide-promises { grid-template-columns: 1fr; } .gab-guide-title { font-size: 24px; } } /* ========================================================================== v197 — PC·모바일 엔카식 다듬기 이미지 5:3, 카드 정보 순서(차량명→스펙→가격), 찜은 사진 밖, PC 헤더 우측 찜, 제조사 줄, 모바일 1열 목록 ========================================================================== */ @media (min-width: 769px) { .encar-nav-item.is-active .encar-nav-link { color: #E52528; box-shadow: inset 0 -3px 0 #E52528; font-weight: 800; } .encar-nav-link:hover { color: #E52528; } .hicm-header-right-actions { display: flex !important; margin-left: auto; align-items: center; gap: 2px; } .hicm-header-right-actions .gab-hdr-search { display: none !important; } .hicm-header-right-actions .gab-btn-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; font-size: 20px; color: #111827; text-decoration: none; border-radius: 8px; position: relative; } .hicm-header-right-actions .gab-btn-icon:hover { background: #F3F4F6; color: #E52528; } .hicm-header-right-actions .gab-btn-icon-badge { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; font-weight: 800; color: #fff; background: #E52528; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .encar-home-hero { padding: 16px 0 28px; } } .encar-brand-strip { display: none; } @media (min-width: 769px) { .encar-brand-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 18px 0 0; padding: 14px 8px 4px; border-top: 1px solid #EEEEEE; } .encar-brand-strip-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 8px 4px; text-decoration: none; color: #111827; font-size: 12px; font-weight: 700; letter-spacing: -0.03em; border-radius: 8px; } .encar-brand-strip-item:hover { background: #F8FAFC; color: #111827; } .encar-brand-strip-logo, .encar-brand-strip-item img { width: auto; height: 28px; max-width: 72px; object-fit: contain; } .encar-brand-strip-item .hicm-brand-mark--mono { width: 36px; height: 36px; border-radius: 50%; background: #F3F4F6; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #374151; } } .encar-car-card { border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: none; overflow: hidden; background: #fff; } .encar-car-card:hover { transform: none; box-shadow: none; border-color: #111827; } .encar-car-card:hover .encar-card-img { transform: none; } .encar-card-thumb-wrap, .encar-car-card .gab-car-card-gallery { aspect-ratio: 5 / 3; background: #F3F4F6; } .encar-card-img-box { position: relative; } .encar-card-img-box .encar-badge-diag { position: absolute; top: 8px; left: 8px; z-index: 2; background: #E52528; box-shadow: none; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 2px; letter-spacing: -0.02em; } .encar-badges-overlay, .encar-badge-trust, .encar-card-tags, .encar-card-lease { display: none !important; } .encar-card-content { padding: 12px 12px 14px; gap: 0; } .encar-card-title { font-size: 15px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .encar-card-spec { font-size: 13px; color: #6B7280; margin: 0 0 8px; font-weight: 500; letter-spacing: -0.02em; } .encar-card-price-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 0; border-top: 0; } .encar-card-price { font-size: 20px; font-weight: 900; color: #111827; letter-spacing: -0.05em; } .encar-card-content .encar-card-fav { position: static; width: 36px; height: 36px; flex-shrink: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: #9CA3AF; font-size: 20px; } .encar-card-content .encar-card-fav:hover, .encar-card-content .encar-card-fav.is-active { background: transparent; color: #E52528; transform: none; } .encar-cars-grid-wrap.is-list-view .encar-card-thumb-wrap, .encar-cars-grid.is-list .encar-card-thumb-wrap { aspect-ratio: 5 / 3; height: auto; } .gab-gallery-main { aspect-ratio: 5 / 3; } .gab-gallery-thumb { width: 90px; height: 54px; } .gab-footer-corp { margin: 8px 0 16px; padding-top: 16px; border-top: 1px solid #E5E7EB; } .gab-footer-corp p { margin: 0; font-size: 12px; line-height: 1.65; color: #9CA3AF; } @media (max-width: 768px) { .encar-m-tab-indicator, .gab-m-tab-indicator { background: #E52528; height: 2px; border-radius: 0; } .gab-m-main-tab.is-active { color: #111827; } .gab-mpill { height: 44px; border-radius: 22px; background: #F3F4F6; border: 0; box-shadow: none; color: #9CA3AF; font-weight: 600; } .gab-mpop { padding: 0 14px 14px; } .gab-mpop a { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; font-size: 13px; font-weight: 700; color: #374151; } .encar-section .encar-cars-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .encar-section .encar-car-card { border-radius: 8px; } .encar-search-main .encar-cars-grid, .encar-search-main .encar-cars-grid-wrap, .encar-search-body .encar-cars-grid { grid-template-columns: 1fr !important; gap: 0 !important; } .encar-search-main .encar-car-card { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; } .encar-search-main .encar-card-content { padding: 12px 16px 16px; } .encar-search-main .encar-card-title { font-size: 16px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .encar-search-main .encar-card-price { font-size: 22px; } .encar-m-search-trigger-pill { background: #F3F4F6; border: 0; height: 44px; border-radius: 22px; } .gab-tabbar.encar-mobile-tabbar { height: 56px; padding-bottom: env(safe-area-inset-bottom); background: #fff !important; border-top: 1px solid #E5E7EB; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .gab-tabbar-item { color: #9CA3AF; } .gab-tabbar-item.is-active { color: #E52528; } .gab-tabbar-label { font-size: 10px; font-weight: 700; } .encar-cars-grid-wrap.is-list-view .encar-card-thumb-wrap { aspect-ratio: 5 / 3; } } /* ========================================================================== v199 — 모바일 엔카식 홈 다듬기 (PC 규칙은 건드리지 않음) ========================================================================== */ @media (max-width: 768px) { .encar-header { box-shadow: none; border-bottom: 1px solid #F0F0F0; } .encar-main-nav-wrap { border-bottom: 0; } .encar-main-header-inner { height: 52px; min-height: 52px; } .encar-header .gab-logo-icon { display: flex; align-items: center; justify-content: center; overflow: visible; } .encar-header .gab-logo.hicm-header-logo-center .gab-logo-name, .encar-header .gab-main-header .gab-logo-name { font-size: 18px !important; font-weight: 900 !important; letter-spacing: -0.06em; color: #E52528 !important; } .gab-hdr-search, .gab-header-cta .gab-btn-icon { color: #191B1F; font-size: 20px; } .gab-m-tab-indicator, .encar-m-tab-indicator { background: #191B1F !important; height: 3px !important; border-radius: 1.5px 1.5px 0 0; } .gab-m-main-tab { padding: 13px 0 11px; font-size: 16px; font-weight: 700; color: #9CA3AF; } .gab-m-main-tab.is-active { color: #191B1F !important; font-weight: 800; } .gab-mbanner { margin: 0 !important; border-radius: 0 !important; overflow: hidden; background: #F3F4F6; } .gab-mbanner-slide { min-height: 148px; } .gab-mbanner-copy { padding: 22px 18px 28px; } .gab-mbanner-copy strong { font-size: 17px; max-width: 72%; } .gab-mbanner-dots { display: none; } .gab-mbanner-count { position: absolute; top: 10px; right: 12px; z-index: 2; background: rgba(17, 24, 39, 0.48); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 10px; pointer-events: none; } .gab-mpill { width: calc(100% - 32px) !important; margin: 14px 16px 8px !important; height: 52px !important; padding: 5px 5px 5px 18px !important; gap: 8px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid #E5E7EB !important; box-shadow: none !important; color: #9CA3AF !important; font-size: 15px !important; font-weight: 600 !important; } .gab-mpill span:first-child { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gab-mpill .gab-mpill-go { width: 40px; height: 40px; border-radius: 50%; background: #191B1F; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .gab-mpill .gab-mpill-go i, .gab-mpill i.bi-search { color: #fff !important; font-size: 16px !important; } .gab-mpill:active { transform: none !important; border-color: #D1D5DB !important; } .gab-mpop { padding: 2px 16px 10px; } .gab-mpop a { padding: 7px 13px; background: #fff; border: 1px solid #E8EAED; border-radius: 999px; font-size: 13px; font-weight: 600; color: #4B5563; } .gab-m-promo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 18px; padding: 13px 14px; background: #F7F8FA; border-radius: 10px; text-decoration: none; color: #191B1F; font-size: 13.5px; font-weight: 700; letter-spacing: -0.03em; } .gab-m-promo i { color: #9CA3AF; font-size: 14px; flex-shrink: 0; } .gab-m-svc-title { margin: 4px 16px 10px; font-size: 17px; font-weight: 800; letter-spacing: -0.04em; color: #191B1F; } .gab-m-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 8px 20px; } .gab-m-qcard { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 6px 2px 4px !important; box-shadow: none !important; } .gab-m-qcard-ic { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: 22px; } .gab-m-qcard:nth-child(1) .gab-m-qcard-ic { background: #FEECEC; color: #E52528; } .gab-m-qcard:nth-child(2) .gab-m-qcard-ic { background: #EAF2FF; color: #2563EB; } .gab-m-qcard:nth-child(3) .gab-m-qcard-ic { background: #E9F8EF; color: #16A34A; } .gab-m-qcard:nth-child(4) .gab-m-qcard-ic { background: #F3E8FF; color: #7C3AED; } .gab-m-qcard strong { font-size: 12px; font-weight: 700; color: #191B1F; letter-spacing: -0.03em; } .gab-m-qcard span { display: none; } .gab-encar-mobile { display: none !important; } .gab-home-deposit { display: none !important; } .gab-buyreq-section, .gab-proposal-modal-overlay { display: none !important; } .hicm-platform-float { display: none !important; } .encar-section { padding: 8px 0 0; } .encar-section .gab-container { padding-left: 0; padding-right: 0; max-width: none; } .encar-section .encar-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; margin: 0; } .encar-section .encar-sec-title { font-size: 17px; font-weight: 800; letter-spacing: -0.04em; color: #191B1F; margin: 0; } .encar-section .encar-sec-sub, .encar-section .encar-sec-badge { display: none; } .encar-section .encar-sec-more { font-size: 13px; font-weight: 700; color: #6B7280; text-decoration: none; } .encar-section .encar-cars-grid, .encar-section .gab-cars-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0; margin-inline: 0 !important; width: 100% !important; max-width: 100%; } .encar-section .encar-car-card { border: 0; border-bottom: 8px solid #F4F5F7; border-radius: 0 !important; box-shadow: none; background: #fff; } .encar-section .encar-car-card:hover { transform: none; box-shadow: none; border-color: transparent; } .encar-section .encar-card-thumb-wrap, .encar-section .encar-card-img-box { aspect-ratio: 5 / 3; border-radius: 0; } .encar-section .encar-card-content { padding: 12px 16px 16px; } .encar-section .encar-card-title { font-size: 16px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .encar-section .encar-card-spec { font-size: 13px; color: #6B7280; } .encar-section .encar-card-price { font-size: 22px; font-weight: 900; letter-spacing: -0.05em; } .gab-footer-grid, .gab-footer-social { display: none; } .gab-footer { background: #F4F5F7; color: #6B7280; padding-top: 8px; padding-bottom: 16px; } .gab-footer .gab-logo-name { color: #191B1F; } .gab-footer-corp { margin: 8px 0 10px; padding-top: 12px; border-top: 0; } .gab-footer-corp p, .gab-footer-bottom, .gab-footer-made { color: #9CA3AF; } .gab-footer a { color: #6B7280; } .gab-footer-bottom { border-top: 1px solid #E5E7EB; padding-block: 14px; flex-direction: column; align-items: flex-start; gap: 8px; } .gab-tabbar, .gab-tabbar.encar-mobile-tabbar { height: 56px !important; background: #fff !important; border-top: 1px solid #E5E7EB !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } .gab-tabbar-item { color: #9CA3AF; gap: 2px; } .gab-tabbar-item.is-active { color: #E52528 !important; } .gab-tabbar-item.is-active i { transform: none; } .gab-tabbar-label { font-size: 10px; font-weight: 700; letter-spacing: -0.02em; } .encar-m-search-trigger-bar { padding: 10px 16px 8px; background: #fff; border-bottom: 1px solid #F0F0F0; } .encar-m-search-trigger-pill { height: 44px !important; border-radius: 22px !important; background: #F3F4F6 !important; border: 0 !important; box-shadow: none !important; } }