/* 2026-10-26 고객 요청 — 담당자 프로필 대문 · 머리글 채널 · 고정 담당자 배너 · 모델 세그먼트 탭 · 차종 상세 구역 · 트림 비교 · MOU 검색 · 업무 사이트 · 프로모션 표 */ /* 차량 카드의 비교는 마우스를 올리지 않아도 보이고, 추가/빼기 기호를 함께 표시한다. */ .car-card .car-card__cmp { opacity: 1; pointer-events: auto; display: inline-flex; gap: 6px; min-height: 38px; white-space: nowrap; } .car-card .car-card__cmp .icon { display: block; flex: none; width: 13px; height: 13px; } .car-card .car-card__cmp span { display: inline; } .car-card .car-card__cmp:focus-visible { outline: 2px solid #eee9df; outline-offset: 3px; } /* ── 1. 첫 화면 = 담당자 (차량 영상은 그 아래) ── */ .profile-hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--header-h)); background: radial-gradient(120% 90% at 70% 30%, #2a2c30 0%, #141619 55%, #0a0a0b 100%); color: #f1eee8; } .profile-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, #b49a6c80, transparent); } .profile-hero .profile-slide { position: relative; inset: auto; min-height: inherit; } .profile-hero .profile-slide__inner { padding-block: clamp(56px, 8vh, 96px) clamp(88px, 12vh, 128px); } .profile-hero__down { position: absolute; left: 50%; bottom: 26px; display: grid; justify-items: center; gap: 8px; color: #b9b6ae; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); } .profile-hero__down::after { content: ""; width: 10px; height: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); animation: profile-down 1.8s ease-in-out infinite; } .profile-hero__down:hover { color: #fff; } @keyframes profile-down { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; } 50% { transform: translateY(6px) rotate(45deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .profile-hero__down::after { animation: none; } } /* 비교함(.cmp-tray, 화면 아래 고정 z45)이 떠 있으면 화살표를 그 위로 — 덮여서 비교함 목록 · '비우기' 가 눌리던 것을 막는다(--tray-h 는 consultant-ui.js 가 잰다, 배너가 꺼진 첫 화면에서도) */ body.has-tray .profile-hero__down { bottom: calc(var(--tray-h, 68px) + 26px); } /* 860px 이하(한 줄로 쌓인 대문): 올라간 화살표가 상담 · 시승 버튼에 겹치지 않게 내용 아래 여백을 비교함 높이만큼 늘린다 — 사진 카드 대문은 위 여백을 줄여 첫 화면 높이 안에 맞춘다 */ @media (max-width: 860px) { body.has-tray .profile-hero .profile-slide__inner { padding-top: 24px; padding-bottom: calc(var(--tray-h, 68px) + 74px); } body.has-tray .profile-hero--image .profile-slide__inner { padding-top: clamp(56px, 8vh, 96px); padding-bottom: calc(110px + var(--tray-h, 68px)); } } /* 만든 대문 그림이 있을 때: 그림을 배경으로 깔고 왼쪽에 글만 올린다 */ .profile-hero--image .profile-hero__bg { position: absolute; inset: 0; z-index: -1; display: block; } .profile-hero--image .profile-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%; } .profile-hero--image::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #07090bd9 0%, #07090b99 38%, #07090b1a 62%, transparent 100%), linear-gradient(0deg, #07090bb3 0%, transparent 40%); pointer-events: none; } .profile-hero--image .profile-slide { position: relative; z-index: 1; } .profile-hero--image .profile-slide__inner { grid-template-columns: minmax(0, 640px) 1fr; } .profile-hero--image .profile-slide__photo { display: none; } @media (max-width: 860px) { .profile-hero--image .profile-hero__bg img { object-position: 50% 22%; } .profile-hero--image::before { background: linear-gradient(0deg, #07090bf2 0%, #07090bb3 42%, #07090b26 70%, transparent 100%); } /* 짧은 휴대폰에서도 중앙 인물의 얼굴 아래에 문구를 놓는다. 부족한 높이는 스크롤로 보여 준다. */ .profile-hero--image .profile-slide__inner { grid-template-columns: 1fr; align-content: end; min-height: max(680px, calc(100svh - var(--header-h))); padding-bottom: 110px; } } .hero__slide--profile { background: radial-gradient(120% 90% at 70% 30%, #2a2c30 0%, #141619 55%, #0a0a0b 100%); } .profile-slide { position: absolute; inset: 0; display: flex; align-items: center; } .profile-slide__inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(28px, 5vw, 72px); width: 100%; padding-block: 96px 120px; } .profile-slide__brand { color: var(--gold-2); font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; } .profile-slide__brand::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; } .profile-slide__role { margin-top: 26px; color: #d6d2c8; font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .12em; text-transform: uppercase; } .profile-slide__name { margin: 10px 0 0; color: #fff; font-family: var(--serif); font-size: clamp(44px, 6.2vw, 92px); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; } .profile-slide__name small { display: inline-block; margin-left: .18em; color: var(--gold-2); font-family: var(--font); font-size: .34em; font-weight: 500; letter-spacing: .02em; vertical-align: .18em; } .profile-slide__lead { margin-top: 22px; color: #c9c5bb; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.8; } .profile-slide__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .profile-slide__actions .btn { min-height: 48px; padding: 0 22px; color: #f6f4ef; border-color: #ffffff80; background: transparent; } .profile-slide__actions .btn:hover { color: #fff; border-color: #fff; background: #ffffff12; } .profile-slide__actions .btn--gold { background: #f2eee6; border-color: #f2eee6; color: #151719; box-shadow: 0 5px 18px #00000024; } .profile-slide__actions .btn--gold:hover { background: #fff; border-color: #fff; color: #151719; } .profile-slide__actions .btn--kakao { border-color: #fee500; background: #fee500; color: #201c00; } .profile-slide__actions .btn--kakao:hover { background: #ffeb4d; border-color: #ffeb4d; color: #201c00; } .profile-slide__photo { justify-self: end; width: min(100%, 420px); margin: 0; border-top: 2px solid var(--gold); background: #101113; box-shadow: 0 30px 60px -30px #000c; } .profile-slide__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; } .profile-slide__photo[hidden] { display: none; } .profile-slide--nophoto .profile-slide__inner { grid-template-columns: 1fr; } .hero.is-profile .hero__inner { display: none; } .hero.is-profile::before { opacity: 0; } /* 담당자 이미지는 차량과 같은 캐러셀의 첫 장. 차량 장에는 차종명과 두 버튼만 표시한다. */ .hero.hero--profile-first { min-height: calc(100svh - var(--header-h)); } .hero--profile-first .hero__slides { z-index: 0; } .hero.hero--profile-first::before { z-index: 1; pointer-events: none; } .hero--profile-first .hero__inner { position: relative; z-index: 2; } .hero--profile-first .hero__slide { pointer-events: none; } .hero--profile-first .hero__slide.is-active { pointer-events: auto; } .hero--profile-first .profile-hero, .hero--profile-first .profile-hero .profile-slide { height: 100%; min-height: 100%; } .hero--profile-first .profile-hero__bg img { transform: none; transition: none; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .hero__actions .btn { min-height: 48px; padding: 0 24px; border-color: #ffffff99; color: #fff; background: #07090b55; } .hero__actions .btn:hover { border-color: #fff; background: #07090b99; } .hero__actions .btn--gold { color: #151719; border-color: #f2eee6; background: #f2eee6; } .hero__actions .btn--gold:hover { color: #151719; border-color: #fff; background: #fff; } @media (max-width: 860px) { .hero.hero--profile-first { min-height: max(680px, calc(100svh - var(--header-h))); } } @media (max-width: 600px) { .hero--profile-first .hero__inner { padding: 0 44px 88px; } .hero__actions { gap: 10px; margin-top: 20px; } .hero__actions .btn { min-height: 44px; padding: 0 18px; font-size: 14px; } } /* 대문 영상 위 서명: 이름을 크게, 직급을 함께 */ .hero--editorial .hero__signature .hero__sign { display: grid; gap: 4px; } .hero--editorial .hero__sign-name { color: #fff; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; } .hero--editorial .hero__sign-name small { margin-left: 6px; color: var(--gold-2); font-family: var(--font); font-size: .55em; font-weight: 500; } .hero--editorial .hero__sign-role { color: #d6d2c8; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .hero--editorial .hero__portrait { width: 72px; height: 90px; } @media (max-width: 860px) { .profile-hero { min-height: calc(100svh - var(--header-h)); } .profile-slide__inner { grid-template-columns: 1fr; gap: 26px; padding-block: 48px 96px; text-align: center; justify-items: center; } .profile-slide__photo { justify-self: center; width: min(62vw, 280px); order: -1; } .profile-slide__name { font-size: clamp(38px, 11vw, 60px); } .profile-slide__role { margin-top: 10px; } .profile-slide__actions { justify-content: center; } .profile-slide__brand::before { display: none; } } @media (max-width: 600px) { .hero--editorial .hero__portrait { width: 56px; height: 70px; } .profile-slide__actions .btn { min-height: 44px; padding: 0 16px; font-size: 14px; } } /* ── 2. 머리글 채널 (카카오톡 · 유튜브를 전화 상담 옆에) ── */ .header-channels { display: flex; align-items: center; flex: none; gap: 8px; margin-left: 2px; } .header-channels .social-dock__link, .header-channels .header-channel { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; box-shadow: none; transition: transform .18s ease, opacity .18s ease; } .header-channels .social-dock__link img, .header-channels .header-channel img { width: 36px; height: 36px; border-radius: 10px; } .header-channels .social-dock__link:hover { transform: translateY(-2px); } @media (min-width: 1180px) { .header-channels { display: flex; } } /* 휴대폰 · 태블릿(1180px 미만): 머리글 바가 로고 · 전화 · 카톡 · 유튜브 · 메뉴 한 줄 — 390px 에서도 넘치지 않게 간격 · 크기를 줄인다 */ @media (max-width: 1179px) { .header-channels { margin-left: 0; } .site-header .brand, .site-header .brand__identity { min-width: 0; } .site-header .brand__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 600px) { .header-inner { gap: 8px; } .site-header .brand__name { font-size: 15px; } .header-phone { width: 38px; height: 38px; min-height: 38px; } .header-channels { gap: 6px; } .header-channels .header-channel, .header-channels .header-channel img { width: 32px; height: 32px; border-radius: 9px; } .menu-btn { width: 40px; } } @media (max-width: 360px) { /* 갤럭시(360px): 로고 · 전화 · 카톡 · 유튜브 · 메뉴가 한 줄에, 부제 '담당 세일즈 컨설턴트 OOO' 가 잘리지 않게 */ .header-inner { gap: 6px; } .site-header .brand { gap: 9px; } .site-header .brand__logo { width: 34px; height: 34px; } .site-header .brand__name { font-size: 14px; } .site-header .brand__sub { letter-spacing: 0; } .header-phone { width: 36px; height: 36px; min-height: 36px; } .header-channels .header-channel, .header-channels .header-channel img { width: 28px; height: 28px; border-radius: 8px; } .menu-btn { width: 36px; } } @media (max-width: 340px) { .site-header.has-channels .brand__logo { display: none; } } /* 카톡 · 유튜브 아이콘이 들어간 머리글만(consultant-ui.js 가 has-channels 를 붙인다) — 아이콘 없는 담당자는 로고 그대로 */ @media (max-width: 300px) { .site-header .header-channel + .header-channel[data-channel="youtube"] { display: none; } } /* 280px(갤럭시 폴드 바깥 화면): 아이콘이 둘이면 유튜브는 메뉴 안 버튼으로만 — 'Mercedes-Benz' 글자가 전화 버튼에 겹치지 않게 */ @media (max-width: 290px) { .site-header .brand__logo { display: none; } } /* 280px 에서는 아이콘 없는 담당자도 로고를 빼 부제(담당 세일즈 컨설턴트 OOO)가 잘리지 않게 */ .nav-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .nav-channels a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid #ffffff55; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; } .nav-channels a img { width: 26px; height: 26px; border-radius: 7px; } .nav-channels a[data-channel="kakao"] { border-color: #fee500; background: #fee500; color: #201c00; } @media (min-width: 1180px) { .nav-channels { display: none; } } .social-dock[data-social-dock]:not(.header-channels) { display: none !important; } /* 옛 왼쪽 아래 SNS 독은 이 규칙만으로 숨긴다 — social-dock.js 의 DCM_CONSULTANT 검사는 defer 순서상 먼저 돌아 효과가 없으므로 이 줄을 지우면 독이 다시 보인다 */ /* ── 3. 고정 담당자 배너 ── */ .cbar { position: fixed; z-index: 46; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom) + var(--dcmb-contact-h, 0px)); width: 340px; max-width: calc(100vw - 32px); color: #f1eee8; background: rgba(12, 12, 14, .97); border: 1px solid #b49a6c66; border-top: 2px solid var(--gold); box-shadow: 0 24px 50px -24px #000; transition: transform .25s var(--ease), opacity .25s var(--ease); } .cbar__inner { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; padding: 14px 14px 12px 14px; } .cbar__photo { display: block; width: 58px; height: 72px; object-fit: cover; object-position: center 25%; background: #1b1c1f; } .cbar__photo[hidden] { display: none; } .cbar--nophoto .cbar__inner { grid-template-columns: 1fr auto; } /* 사진 없는 담당자: 사진 칸 없이 이름 · 닫기 두 열 */ .cbar__who { min-width: 0; } .cbar__eyebrow { color: var(--gold-2); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; } .cbar__name { margin-top: 4px; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbar__name small { margin-left: 5px; color: var(--gold-2); font-family: var(--font); font-size: 12.5px; } .cbar__close { width: 32px; height: 32px; border: 0; background: transparent; color: #a9a7a1; font-size: 22px; line-height: 1; cursor: pointer; } .cbar__close:hover { color: #fff; } .cbar__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #ffffff1a; border-top: 1px solid #ffffff1a; } .cbar__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; background: rgba(12, 12, 14, .97); color: #f1eee8; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .18s; } .cbar__actions a:hover { background: #1f2024; color: #fff; } .cbar__actions a img { width: 20px; height: 20px; border-radius: 5px; } .cbar__actions a[data-cbar-kakao] { color: #ffe866; } .cbar__actions a[hidden] { display: none; } .cbar__actions.is-two { grid-template-columns: repeat(2, 1fr); } .cbar--min .cbar__inner, .cbar--min .cbar__actions { display: none; } .cbar--min { width: auto; border: 0; background: transparent; box-shadow: none; } .cbar__restore { display: none; width: 64px; height: 64px; padding: 0; border: 2px solid var(--gold); border-radius: 50%; overflow: hidden; background: #141416; box-shadow: 0 14px 30px -12px #000; cursor: pointer; } .cbar__restore img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .cbar__restore span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .cbar--min .cbar__restore { display: block; } .cbar__restore.is-text { display: none; width: auto; height: 48px; padding: 0 18px; border-radius: 24px; color: #fff; font-size: 14px; } .cbar--min .cbar__restore.is-text { display: inline-flex; align-items: center; } .cbar--min .cbar__restore.is-text span { position: static; width: auto; height: auto; clip-path: none; } body.has-tray .cbar { bottom: calc(var(--tray-h, 68px) + 20px + env(safe-area-inset-bottom) + var(--dcmb-contact-h, 0px)); } /* 비교함(.cmp-tray — 실제 높이 --tray-h 는 consultant-ui.js 가 잰다) 위 20px */ /* PC · 태블릿(761px 이상): 스크롤 끝에서 카드 · 접힌 동그라미가 바닥글(면책 문구 · 저작권 · '관리자 사이트' 링크)을 가리지 않게 바닥글 아래를 배너 자리만큼 늘린다(검은 바닥글이 이어져 보인다). 펼친 카드 = 카드 높이(--cbar-h) + 24px, 접힌 동그라미 = 그 높이(--cbar-min-h) + 24px. 비교함이 있으면 body 아래 여백은 비교함 높이만큼(그 자리는 비교함이 덮는다) — 카드는 비교함 위 20px 이라 위 여백과 합쳐 가림 0. 높이는 consultant-ui.js 가 잰다 */ @media (min-width: 761px) { body.has-cbar .site-footer { padding-bottom: calc(var(--cbar-h, 148px) + 24px + env(safe-area-inset-bottom) + var(--dcmb-contact-h, 0px)); } body.has-cbar.cbar-min .site-footer { padding-bottom: calc(var(--cbar-min-h, 64px) + 24px + env(safe-area-inset-bottom) + var(--dcmb-contact-h, 0px)); } body.has-tray.has-cbar { padding-bottom: var(--tray-h, 68px); } } @media (max-width: 760px) { .cbar { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -16px 40px -22px #000; } .cbar__inner { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 9px 12px 8px calc(12px + env(safe-area-inset-left)); } .cbar__photo { width: 44px; height: 54px; } .cbar__name { font-size: 17px; } .cbar__eyebrow { font-size: 10px; } .cbar__actions a { min-height: 44px; font-size: 13px; } .cbar__actions { padding-bottom: env(safe-area-inset-bottom); } /* 본문 아래 여백 = 실제 배너 높이(consultant-ui.js 가 --cbar-h 로 잰다; 사진 있으면 118px, 없으면 더 낮다) */ body.has-cbar { padding-bottom: calc(var(--cbar-h, 118px) + 6px); } /* 접어 둔 동그라미: 바닥글 아래를 동그라미 자리(--cbar-min-h + 아래 14px + 6px)만큼 늘려 저작권 줄 끝을 가리지 않게 */ body.has-cbar.cbar-min { padding-bottom: 0; } body.has-cbar.cbar-min .site-footer { padding-bottom: calc(var(--cbar-min-h, 64px) + 20px + env(safe-area-inset-bottom) + var(--dcmb-contact-h, 0px)); } .cbar--min { left: auto; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom) + var(--dcmb-contact-h, 0px)); } /* 비교함이 떠 있을 때: 띠는 비교함 바로 위, 접힌 동그라미도 비교함 위 — '비교하기' 버튼을 덮지 않고, 눌러서 펼치는 것도 언제나 된다 (--tray-h 는 consultant-ui.js 가 잰다) */ body.has-tray .cbar { bottom: var(--tray-h, 68px); } body.has-tray .cbar--min { bottom: calc(var(--tray-h, 68px) + 14px); } body.has-tray.has-cbar { padding-bottom: calc(var(--tray-h, 68px) + var(--cbar-h, 118px) + 6px); } body.has-tray.has-cbar.cbar-min { padding-bottom: var(--tray-h, 68px); } } @media print { .cbar, .header-channels { display: none !important; } } /* ── 4. 모델 페이지: 세그먼트 탭 · 카드의 모델(변형) 목록 ── */ .seg-tabs { position: relative; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); } .seg-tabs::-webkit-scrollbar { display: none; } /* 오른쪽 끝 페이드 = "옆으로 더 있음" 표시. 스크롤 끝에 닿으면 사라지고, 넘치지 않는 넓은 창에서는 아예 안 보인다(스크롤 타임라인이 없는 옛 브라우저도 안 보임) */ .seg-tabs::after { content: ""; position: sticky; right: 0; flex: 0 0 44px; margin-left: -44px; align-self: stretch; background: linear-gradient(90deg, rgba(246, 244, 240, 0), var(--ivory) 70%); opacity: 0; pointer-events: none; } @supports (animation-timeline: scroll()) { .seg-tabs { scroll-timeline: --seg-tabs inline; } .seg-tabs::after { animation: seg-tabs-fade linear both; animation-timeline: --seg-tabs; } @keyframes seg-tabs-fade { 0%, 88% { opacity: 1; } 100% { opacity: 0; } } } /* 768px 이상(마우스): 넘칠 때 가는 스크롤바를 보여 AMG · 기타 탭까지 끌 수 있게 */ @media (min-width: 768px) { .seg-tabs { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .seg-tabs::-webkit-scrollbar { display: block; height: 6px; } .seg-tabs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; } .seg-tabs::-webkit-scrollbar-track { background: transparent; } } .seg-tabs .chip { min-height: 48px; padding: 0 20px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 15px; white-space: nowrap; } .seg-tabs .chip:hover { color: var(--ink); border-bottom-color: var(--line-2); } .seg-tabs .chip[aria-pressed="true"] { color: var(--ink); background: transparent; border-bottom-color: var(--ink); } .seg-tabs .chip small { margin-left: 6px; color: var(--muted); font-size: 12px; } .car-card__variants { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; } .car-card__variants a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--body); font-size: 12.5px; font-weight: 500; text-decoration: none; transition: background .18s, color .18s, border-color .18s; } .car-card__variants a:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .car-card__variants a.is-more { border-style: dashed; } .car-card__variants a[data-amg] { border-color: #9c8259; color: #6b5324; } .car-card__variants a[data-amg-extra] { display: none; } .car-grid.is-amg .car-card__variants a:not([data-amg]) { display: none; } .car-grid.is-amg .car-card__variants a[data-amg-extra] { display: inline-flex; } /* ── 5. 차종 상세: 구역 고정 메뉴 · 모델 · 트림 고르기 ── */ .model-nav { position: sticky; top: calc(var(--header-real, var(--header-h)) - 1px); z-index: 30; background: rgba(246, 244, 240, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .model-nav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .model-nav__list::-webkit-scrollbar { display: none; } .model-nav__list a { display: inline-flex; align-items: center; padding: 16px 14px; color: var(--muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; } .model-nav__list a:hover { color: var(--ink); } .model-nav__list a.is-active { color: var(--ink); border-bottom-color: var(--ink); } /* 앵커로 이동해도 머리글(실제 높이 --header-real) · 고정 메뉴(--model-nav-h)에 가려지지 않게. --header-real · --model-nav-h 는 consultant-ui.js 가 잰다 */ .m-section, #trims, #pick, #options, #colors, #photos, #videos, #compare-trims, #specifications, #model-specs { scroll-margin-top: calc(var(--header-real, var(--header-h)) + var(--model-nav-h, 60px) + 8px); } #hero-video { scroll-margin-top: calc(var(--header-real, var(--header-h)) + 8px); } .variant-picker { display: grid; gap: 14px; margin: 8px 0 22px; } .variant-picker__row { display: grid; gap: 8px; } .variant-picker__label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .variant-picker .chip-row { gap: 6px; } .variant-picker .chip { min-height: 38px; padding: 0 14px; font-size: 14px; } .variant-picker .chip small { margin-left: 6px; font-size: 11.5px; opacity: .7; } .trim-current { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: start; padding: 22px 24px; margin-bottom: 26px; background: var(--night); color: var(--on-dark); } .trim-current__name { color: #fff; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; line-height: 1.3; } .trim-current__name small { margin-left: 8px; color: var(--gold-2); font-family: var(--font); font-size: 13px; white-space: nowrap; } .trim-current__price { margin-top: 8px; color: #fff; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .trim-current__price span { margin-left: 8px; color: var(--on-dark-2); font-size: 13px; font-weight: 400; } .trim-current__promo { margin-top: 10px; color: var(--on-dark-2); font-size: 13.5px; line-height: 1.7; } .trim-current__promo b { color: var(--gold-2); font-weight: 600; } .trim-current__actions { display: flex; flex-wrap: wrap; gap: 8px; } .trim-current__actions .btn { min-height: 44px; padding: 0 16px; font-size: 14px; color: #f6f4ef; border-color: #ffffff80; background: transparent; } .trim-current__actions .btn:hover { color: #fff; border-color: #fff; background: #ffffff12; } .trim-current__actions .btn--gold { background: #f2eee6; border-color: #f2eee6; color: #151719; } .trim-current__actions .btn--gold:hover { background: #fff; border-color: #fff; color: #151719; } .ptable tr.is-current td { background: #f3efe6; } .ptable tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--gold); } #trims .ptable tr > :first-child { padding-left: 12px; } /* 선택 행 금색 띠(3px)가 트림 이름 첫 글자를 덮지 않게 — 줄이 들쭉날쭉하지 않도록 모든 행에 같은 여백 */ @media (max-width: 760px) { .trim-current { grid-template-columns: 1fr; } } /* ── 6. 옵션 · 색상 · 사진 · 영상 ── */ .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); } .opt-grid h3 { margin-bottom: 14px; font-size: 16px; font-weight: 600; } .opt-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .opt-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; } .opt-list li::before { content: "✓"; color: var(--gold-deep); font-weight: 700; } .opt-list--optional li::before { content: "+"; } .opt-empty { padding: 26px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; line-height: 1.7; } .color-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); } .color-groups h3 { margin-bottom: 14px; font-size: 16px; font-weight: 600; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .photo-grid figure { margin: 0; } .photo-grid a { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(ellipse at 50% 34%, #303338 0%, #1b1d21 55%, #101215 100%); } .photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .photo-grid a:hover img { transform: scale(1.03); } .photo-grid figcaption { margin-top: 8px; color: var(--muted); font-size: 12.5px; } .photo-grid .is-cutout img { object-fit: contain; padding: 4%; } .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .video-card { display: grid; gap: 10px; } .video-card__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; } .video-card__frame img, .video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .video-card__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: linear-gradient(180deg, transparent 40%, #0008); color: #fff; cursor: pointer; } .video-card__play::before { content: ""; display: block; width: 64px; height: 64px; border: 2px solid #fff; border-radius: 50%; background: #0007 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat; } .video-card__title { font-size: 15px; font-weight: 500; } .video-card__link { color: var(--muted); font-size: 12.5px; text-decoration: none; } @media (max-width: 760px) { .opt-grid, .color-groups, .video-grid { grid-template-columns: 1fr; } .photo-grid { grid-template-columns: repeat(2, 1fr); } } /* ── 7. 트림 비교 ── */ .tc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; } .tc-pick label { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .tc-pick .select { width: 100%; max-width: 100%; } .tc-table th[scope="row"] { width: 28%; } /* 항목 이름 열: 왼쪽 여백을 둬 '다른 항목' 금색 띠(3px, 아래 is-diff)가 첫 글자를 덮지 않게('ISG' 가 'SG' 로 보이던 것) */ .tc-table th[scope="row"], .tc-table thead th:first-child { padding-left: 12px; padding-right: 12px; } /* 휴대폰(760px 이하): 가로 스크롤 없이 두 트림을 한눈에 — 고정 너비 표, 항목 30% · 두 트림 35%씩, 칸 안에서 줄바꿈, 글자 조금 작게. 표가 화면 폭 안에 들어오므로 첫 열 고정(sticky)이 필요 없다(고정 열이 두 번째 트림 값을 가리던 것도 없어진다) */ @media (max-width: 760px) { .tc-table { min-width: 0; width: 100%; table-layout: fixed; font-size: 13px; } .tc-table th, .tc-table td, .tc-table .cond { white-space: normal; overflow-wrap: anywhere; } .tc-table thead th { width: 35%; padding: 10px 8px 10px 0; font-size: 11.5px; letter-spacing: .02em; line-height: 1.45; } .tc-table thead th:first-child { width: 30%; } .tc-table th[scope="row"], .tc-table thead th:first-child { padding-left: 8px; padding-right: 8px; font-size: 12.5px; letter-spacing: 0; line-height: 1.45; } .tc-table td { padding: 10px 8px 10px 0; line-height: 1.5; } .tc-table .promo-cell { min-width: 0; font-size: 12.5px; } .tc-table td .btn { padding-left: 10px; padding-right: 10px; } } .tc-table tr.is-diff td { background: #f6efe0; } .tc-table tr.is-diff th { box-shadow: inset 3px 0 0 var(--gold); } .tc-table td ul { margin: 0; padding-left: 18px; } .tc-table td li { margin: 2px 0; } .tc-table td li.only { font-weight: 600; } .tc-legend { margin-top: 12px; color: var(--muted); font-size: 13px; } .tc-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: #f6efe0; border: 1px solid var(--line-2); } .tc-group th { padding-top: 22px; color: var(--ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 760px) { .tc-pick { grid-template-columns: 1fr; } } /* ── 8. 가격 · 프로모션 표 ── */ .promo-cell { display: grid; gap: 3px; min-width: 220px; font-size: 13.5px; line-height: 1.5; } .promo-cell b { font-weight: 600; font-variant-numeric: tabular-nums; } .promo-cell .promo-mbf { color: var(--body); } .promo-cell .promo-total { color: var(--ink); } .promo-cell .promo-total b { color: var(--gold-deep); } .trim-current__promo .promo-mbf, .trim-current__promo .promo-total { color: var(--on-dark-2); } .trim-current__promo .promo-total b { color: var(--gold-2); } .promo-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .promo-badges span { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--body); font-size: 11px; letter-spacing: .02em; } .promo-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; } .offer__rows .promo-flags { color: var(--gold-2); font-size: 12.5px; } .ptable .cond .promo-cell a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); } [data-cars="price"] .promo-table { width: 100%; min-width: 1140px; font-size: 12px; table-layout: fixed; } [data-cars="price"] .promo-table th, [data-cars="price"] .promo-table td { padding-right: 6px; overflow-wrap: anywhere; } [data-cars="price"] .promo-table th:first-child { width: 180px; } [data-cars="price"] .promo-table th:nth-child(2) { width: 46px; } [data-cars="price"] .promo-table th:nth-child(3) { width: 98px; } [data-cars="price"] .promo-table th:nth-child(n+4):nth-child(-n+7) { width: 100px; } [data-cars="price"] .promo-table th:nth-child(n+8):nth-child(-n+12) { width: 59px; } [data-cars="price"] .promo-table th:last-child { width: 42px; } [data-cars="price"] .promo-table .model-row th { width: auto; } [data-cars="price"] .promo-table td.r { padding-right: 10px; } .promo-table th { max-width: 150px; white-space: normal; line-height: 1.5; } .promo-field { min-width: 0; font-variant-numeric: tabular-nums; } .promo-value { display: grid; gap: 4px; } .promo-value small { color: var(--muted); font-size: 12px; } .promo-field--total, .promo-field--after { background: #f6efe0; } /* 휴대폰에서는 항목 이름을 붙여 각 셀을 두 열로 배치한다. */ @media (max-width: 760px) { [data-cars="price"] .table-wrap { overflow: visible; } [data-cars="price"] .ptable, [data-cars="price"] .ptable tbody { display: block; width: 100%; min-width: 0; } [data-cars="price"] .ptable thead { display: none; } [data-cars="price"] .ptable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); } [data-cars="price"] .ptable td { display: block; padding: 0; border: 0; } [data-cars="price"] .ptable td:first-child:not([colspan]) { grid-column: 1 / -1; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; } [data-cars="price"] .ptable td.r { padding: 0; font-size: 15px; } [data-cars="price"] .ptable .promo-field { min-width: 0; padding: 10px; border: 1px solid var(--line); white-space: normal; font-size: 12.5px; line-height: 1.5; } [data-cars="price"] .ptable td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--muted); font-size: 11.5px; font-weight: 500; } [data-cars="price"] .ptable td:last-child:not([colspan]) { grid-column: 1 / -1; padding-top: 6px; } [data-cars="price"] .ptable .promo-cell { min-width: 0; } [data-cars="price"] .ptable tr.model-row { display: block; padding: 0; border: 0; } [data-cars="price"] .ptable tr.model-row th { display: block; padding: 26px 0 10px; white-space: normal; } [data-cars="price"] .ptable td[colspan] { grid-column: 1 / -1; white-space: normal; } [data-cars="price"] .ptable td[colspan] + td { grid-column: 1 / -1; margin-top: 8px; } [data-cars="price"] .ptable td:empty { display: none; } } /* ── 9. MOU 연동확인 ── */ @media (max-width: 760px) { .est-ways table { width: 100%; min-width: 0; table-layout: fixed; font-size: 11px; } .est-ways th, .est-ways td { padding: 11px 2px; white-space: normal; overflow-wrap: anywhere; } .est-ways th:first-child, .est-ways td:first-child { width: 32%; padding-right: 5px; } .est-ways th:not(:first-child), .est-ways td:not(:first-child) { width: 34%; } } .mou-search { max-width: 640px; margin-bottom: 28px; } .mou-search .search { max-width: none; } .mou-search .search input { min-height: 56px; font-size: 17px; } .mou-table { min-width: 560px; } .mou-table td { vertical-align: middle; } .mou-table .mou-name { font-weight: 600; } .mou-table .mou-group { color: var(--muted); font-size: 12.5px; } .mou-type { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 3px; background: var(--ivory-2); color: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .mou-type--vip { background: #efe6d2; color: #6b5324; } .mou-type--nfa { background: #dfe6ef; color: #2d4461; } .mou-type--sme { background: #e1ebe3; color: #2f5a3e; } .mou-more { margin-top: 16px; } .mou-note { margin-top: 22px; padding: 18px 20px; background: var(--ivory-2); color: var(--body); font-size: 13.5px; line-height: 1.75; } .mou-empty-ask { margin-top: 14px; text-align: center; } /* 결과 0곳: 빈 결과 문구 바로 아래 '회사명으로 확인 요청'(mou-work.js) */ .mou-empty-ask[hidden] { display: none; } /* 휴대폰(760px 이하): 표 대신 회사마다 카드 — 회사 이름(+그룹) 한 줄 / 구분 · 딜러 · 체결일 한 줄 / '이 회사로 문의'. 가로 스크롤 없음. 칸 이름은 mou-work.js 의 data-label */ @media (max-width: 760px) { .mou-table { min-width: 0; width: 100%; } .mou-table, .mou-table tbody { display: block; } .mou-table thead { display: none; } .mou-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .mou-table td { display: block; padding: 0; border: 0; } .mou-table td:first-child { flex: 1 1 100%; } .mou-table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: 12px; letter-spacing: 0; } .mou-table td.cond { flex: 1 1 100%; } } /* ── 10. 관리자 사이트 (업무 바로가기) ── */ .work-gate { max-width: 460px; margin: 0 auto; padding: 36px 32px; background: var(--paper); border: 1px solid var(--line); text-align: center; } .work-gate h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; } .work-gate p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; } .work-gate form { display: grid; gap: 10px; margin-top: 22px; } .work-gate .input { min-height: 52px; text-align: center; font-size: 18px; letter-spacing: .2em; } .work-gate .error { color: #a12a1e; font-size: 13.5px; } .work-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; } .work-link-card { display: grid; gap: 8px; padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .18s, transform .18s; } .work-link-card:hover { border-color: var(--ink); transform: translateY(-2px); } .work-link-card b { font-family: var(--serif); font-size: 22px; font-weight: 500; } .work-link-card span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .work-link-card small { color: var(--gold-deep); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .work-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; } /* ── 11. 담당자 소개 제목 · 팀 사진 띠 (맨 아래) ── */ .page-head h1 .h1-rank { margin-left: .2em; color: var(--gold-2); font-family: var(--font); font-size: .42em; font-weight: 500; letter-spacing: .02em; vertical-align: .22em; } .advisor-portrait figcaption b { color: #fff; font-family: var(--serif); font-size: 18px; font-weight: 500; } .team-band { position: relative; margin: 0; background: var(--black); } .team-band img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; object-position: center 40%; } .team-band figcaption { padding: 18px var(--gutter); color: var(--on-dark-2); font-size: 13px; text-align: center; letter-spacing: .04em; } /* ── 12. 상담 신청 페이지 '즉시 상담' 상자 ── */ /* 카카오톡 주소가 없는 담당자: main.js(INSTANT CONTACT)가 href 를 못 붙여