로 쓰고 모양만 같게. */
.quote-card-head h3, .quote-card-head .card-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
/* `무료` 배지의 색은 **팔레트가 정한다.** 청록에서는 주황이 잘 붙었지만 라임
옆에서는 둘 다 "봐 달라" 고 외쳐 어느 쪽도 눈에 안 들어온다. 경고색
(`--c-warn`)은 필수 표시(`*`) 전용으로 남긴다. */
.ribbon { background: var(--c-badge); color: var(--c-on-badge); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 6px; }
.field label .req { color: var(--c-warn); }
/* 필수 표시만 있으면 나머지도 필수처럼 보인다. 선택 항목은 선택이라고 적는다 —
히어로 폼에서 칸이 많아 보일수록 신청을 접는다. */
.field label .opt { color: var(--c-mute); font-weight: 500; }
.input, .select {
width: 100%; height: 46px; padding: 0 14px;
background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
font-size: 14px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.input:focus, .select:focus { border-color: var(--c-pri); background: #fff; box-shadow: 0 0 0 3px var(--c-pri-soft); }
/* 입력 오류는 **칸 바로 아래에 남긴다.** 3초 뒤 사라지는 토스트는 놓치기 쉽고,
초록 체크 아이콘이 붙어 "완료" 로 읽혔으며 제출 버튼까지 가렸다(2026-09-14).
고칠 때까지 떠 있고, 테두리로 어느 칸인지 가리킨다. */
.input[aria-invalid="true"] { border-color: var(--c-bad); }
.input[aria-invalid="true"]:focus { border-color: var(--c-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-bad) 18%, transparent); }
.field-error { margin: -6px 0 12px; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--c-bad); }
/* 키보드로 넘길 때 지금 어디인지 보여야 한다. 마우스 클릭에는 뜨지 않는다. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--c-pri); outline-offset: 2px; border-radius: 6px;
}
/* 움직임에 어지러움을 느끼는 사람이 있다. 시스템 설정을 따른다. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 3px; background: var(--c-line-2); border-radius: var(--radius-sm); }
/* 데스크톱은 마우스라 34px 로 줄인다 — 세 줄이 쌓이는 자리라 한 줄에서 10px 을
줄이면 카드가 30px 짧아진다. **모바일은 44px 그대로다**(손가락 최소 크기,
Apple HIG). 조건 선택은 주 조작부라 거기서는 줄이지 않는다. */
.seg button {
position: relative;
min-height: 34px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--c-ink-2);
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
transition: background .12s, color .12s, box-shadow .12s;
}
.seg button.on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-sm); }
/* 기준 조건 배지. 세 줄 아래에 있던 안내 한 줄을 여기로 옮겼다 — 줄이 줄고,
무엇이 기준인지가 그 칸 바로 위에서 읽힌다. */
.seg-tag {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em;
color: var(--c-pri-ink); background: var(--c-pri-soft);
border-radius: 999px; padding: 2px 6px; line-height: 1.2;
}
/* ---------- Quick Quote ----------
이 페이지의 유일한 폼. 데스크톱은 히어로 우측 카드, 모바일은 **같은 노드**가
아래에서 올라오는 바텀시트다. DOM 을 옮기지 않고 CSS 로만 모습을 바꾼다 —
옮기면 입력 중이던 값과 포커스가 날아간다. */
.qq { display: flex; flex-direction: column; }
/* 닫기는 모바일 시트에서만 의미가 있다. 데스크톱 카드는 히어로에 박혀 있다. */
.qq-close { display: none; }
/* **카드 키는 스텝이 바뀌어도 그대로다**(명세 §8).
실제 값은 스크립트(`qqLockHeight`)가 모든 스텝을 한 번씩 재서 가장 큰 것으로
정한다 — 글꼴이 늦게 오거나 창 폭이 바뀌어도 따라간다. 여기 적은 값은 스크립트가
돌기 전의 최소치다. */
.qq-body { min-height: 200px; display: flex; flex-direction: column; }
/* 짧은 스텝에서 남는 자리를 아래에 몰아 두지 않는다. 선택지는 가운데로 모으고
진행 버튼은 바닥에 붙인다 — 그래야 빈 공간이 '덜 만든 화면' 이 아니라
'여백' 으로 읽힌다.
**`margin-top: auto` 만으로는 부족하다.** 내용이 자리를 다 채우면 남는 공간이
없어 auto 가 0 이 되고, 마지막 선택지에 버튼이 딱 붙는다. 그래서 최소 여백을
따로 준다 — 플렉스 안에서는 마진이 상쇄되지 않으므로 둘이 더해진다. */
.qq-opts { flex: 1; justify-content: center; margin-bottom: 20px; }
.qq-rows { flex: 1; justify-content: center; margin-bottom: 20px; }
.qq-go { margin-top: auto; }
.qq-cascade { flex: 1; }
.qq-step { display: flex; flex-direction: column; flex: 1; }
.qq-step[hidden] { display: none; }
/* 언제 끝나는지 보여야 사람이 시작한다. */
/* **지금 어디인가**를 한 줄로. 이름 셋을 늘어놓던 빵부스러기를 걷어냈다 —
좁은 카드에 다 적으면 글자가 작아지는데 정작 현재 위치는 흐려진다.
아래 가는 막대가 남은 길이를 보여 준다. */
.qq-progress { margin-bottom: 18px; }
.qq-progress-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 8px;
}
.qq-now { font-size: 13.5px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }
.qq-count { font-size: 11.5px; font-weight: 700; color: var(--c-mute); white-space: nowrap; letter-spacing: 0.02em; }
.qq-track { height: 3px; border-radius: 999px; background: var(--c-line-2); overflow: hidden; }
.qq-track i { display: block; height: 100%; width: 33.333%; background: var(--c-pri); border-radius: 999px; transition: width .25s cubic-bezier(.22,.9,.3,1); }
.qq-q { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--c-ink); line-height: 1.35; }
.qq-note { margin: 6px 0 16px; font-size: 13.5px; color: var(--c-mute); line-height: 1.6; }
/* 카드 머리에 있던 설명을 STEP 1 안으로 옮겼다 — 머리에 두면 스텝마다 있고
없고가 갈려 카드 키가 흔들린다. */
.qq-sub { margin: 4px 0 0; font-size: 13px; color: var(--c-mute); line-height: 1.55; }
/* STEP 1 — 브랜드 → 차종 → 트림. **고르는 길은 이것 하나뿐이다.**
인기 차량 버튼을 위에 두고 드롭다운을 아래 숨겨 뒀었는데, 고르는 방법이 둘로
보여서 오히려 복잡했다. 인기 차량은 아래 섹션의 카드가 맡는다. */
.qq-cascade { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.qq-cascade .row-3 { gap: 6px; }
.qq-go { width: 100%; }
/* 부담을 덜어 주는 한 줄. 필수처럼 보이면 트림을 모르는 사람이 여기서 멈춘다. */
.qq-hint { margin: 2px 0 0; font-size: 12px; color: var(--c-mute); line-height: 1.55; }
/* STEP 3 — 선납금·기간·주행거리를 **한 화면에서** 나란히 고른다.
셋은 서로 물린 값이라(선납금을 올리면 월 납입금이 내려간다) 따로 물으면
앞의 답을 기억한 채 뒤를 골라야 한다. */
.qq-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.qq-row > label {
display: block; font-size: 12px; font-weight: 600;
color: var(--c-ink-2); margin-bottom: 6px;
}
.qq-rows + .qq-hint { margin-top: 12px; }
.qq-rows + .qq-hint + .qq-go { margin-top: 14px; }
/* STEP 2~4 — **누르면 곧바로 다음 질문이다.** 그래서 버튼이 크고 하나씩 세로로
쌓인다. 손가락으로 고를 것을 격자에 촘촘히 넣으면 오조작이 난다. */
.qq-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* **2×2 바둑판**(2026-08-22). 넷을 세로로 쌓으면 그만큼 카드가 길어진다. */
.qq-opts.qq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qq-opt {
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 52px; padding: 12px 14px; text-align: center;
font-size: 14.5px; font-weight: 600; color: var(--c-ink);
background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
transition: border-color .12s, background .12s, transform .12s;
}
/* 복수 선택이라 **켜진 게 여럿일 수 있다.** 체크 표시를 붙여 "하나만 고르는
칸" 이 아니라는 걸 눌러 보기 전에도 알 수 있게 한다. */
.qq-grid .qq-opt::before {
content: '';
width: 16px; height: 16px; flex: none;
border: 1.5px solid var(--c-line); border-radius: 5px; background: #fff;
transition: background .12s, border-color .12s;
}
.qq-grid .qq-opt.on::before {
/* 체크의 색은 **팔레트가 정한다**(`%23ffffff` 를 빌드가 채운다). 데이터 URI 는
CSS 변수를 못 읽어서, 흰색을 박아 두면 라임 위에서 체크가 사라진다. */
background: var(--c-pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
border-color: var(--c-pri);
}
.qq-opt:hover { border-color: var(--c-pri); background: #fff; transform: translateY(-1px); }
.qq-opt.on { border-color: var(--c-pri); background: var(--c-pri-soft); color: var(--c-pri-ink); }
.qq-opt-tag {
font-size: 11px; font-weight: 700; color: var(--c-pri-ink);
background: var(--c-pri-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.qq-opt.on .qq-opt-tag { background: var(--c-surface); }
/* 고른 조건 되읽기. **금액은 넣지 않는다** — 아직 자동 견적이 아니다. */
.qq-summary {
list-style: none; padding: 12px 14px; margin: 0 0 18px;
display: flex; flex-wrap: wrap; gap: 6px 8px;
background: var(--c-pri-soft); border-radius: var(--radius-sm);
}
.qq-summary li { font-size: 12.5px; font-weight: 600; color: var(--c-pri-ink); }
.qq-summary li + li::before { content: '·'; margin-right: 8px; opacity: 0.55; }
.qq-done { align-items: center; text-align: center; justify-content: center; }
.qq-done .qq-summary { justify-content: center; }
/* 카카오 완료 화면의 버튼과 아래 조건 요약 사이. 붙어 있으면 버튼이 요약 상자의
머리처럼 읽힌다. */
#qqDoneKakao .btn-kakao { margin-bottom: 20px; }
.qq-ok {
width: 46px; height: 46px; border-radius: 50%; background: var(--c-good); color: #fff;
display: grid; place-items: center; font-size: 22px; font-weight: 700; margin-bottom: 14px;
}
.qq-back {
align-self: flex-start; margin-top: 14px;
font-size: 13px; font-weight: 600; color: var(--c-mute); padding: 6px 2px;
}
.qq-back:hover { color: var(--c-ink); }
/* 없을 때는 자리도 비운다(2026-10-24). 예전에는 카드 키가 흔들리지 않게 자리를 남겼는데, 차량+금액
화면에서 버튼 아래가 빈칸으로 보였다. 키 흔들림은 최소 키(`qqLockHeight`)가 막는다. */
.qq-back[hidden] { display: none; }
/* 모바일 시트 뒤를 덮는 막. 데스크톱에서는 만들어지지 않는다. */
.qq-scrim { display: none; }
/* 테두리형 버튼. 헤더 CTA 와 캐스케이드 확인 버튼이 쓴다 —
둘 다 주 동작 옆의 보조 동작이라 채운 버튼이면 시선을 나눠 가진다. */
.btn-line { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
.btn-line:hover { border-color: var(--c-pri); color: var(--c-pri-ink); }
/* 헤더의 Quick Quote 진입 버튼. 오른쪽 끝에 붙는다. */
.hdr-quote { margin-left: auto; }
.consent { display: flex; gap: 8px; font-size: 12px; color: var(--c-mute); margin: 12px 0 16px; align-items: flex-start; }
.consent input { margin-top: 3px; }
.consent a { color: var(--c-ink-2); text-decoration: underline; }
.submit-row { display: flex; gap: 10px; }
.submit-row .btn { flex: 1; }
/* 버튼이 둘이면 좁은 화면에서 줄을 바꾼다. 한 줄에 욱여넣으면 글자가 두 줄로 접힌다. */
.submit-row { flex-wrap: wrap; }
.submit-row .btn-kakao, .submit-row:has(.btn-kakao) .btn-accent { flex: 1 1 160px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--c-mute); }
/* 계산기로 가는 보조 경로. 전화 상담이 주 경로라 눈에 덜 띄게 두되, 스스로
계산해 보고 싶은 사람은 여기로 빠져나갈 수 있어야 한다(브랜드 3원칙). */
.form-foot a { color: var(--c-pri-ink); text-decoration: none; border-bottom: 1px solid var(--c-pri); padding-bottom: 1px; white-space: nowrap; }
.form-foot a:hover { color: var(--c-ink); }
/* ---------- decorative hero bg ---------- */
.hero-bg {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(800px 400px at 80% 10%, var(--c-glow-1), transparent 60%),
radial-gradient(700px 360px at 10% 60%, var(--c-glow-2), transparent 60%);
}
/* ---------- image hero variant ---------- */
.hero-img { position: relative; padding: 0; }
.hero-img-stage {
position: relative;
min-height: 620px;
border-radius: 0;
overflow: hidden;
background: linear-gradient(135deg, oklch(0.30 0.06 220) 0%, oklch(0.22 0.04 240) 100%);
}
.hero-img-stage .hero-bg-art {
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px),
radial-gradient(closest-side at 70% 50%, oklch(0.50 0.14 210) 0%, transparent 70%);
}
.hero-img-stage .hero-bg-art::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.hero-img-stage .placeholder-label {
position: absolute; left: 24px; top: 24px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.6);
letter-spacing: 0.05em;
}
.hero-img-grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr 460px; gap: 56px; padding: 80px 56px; align-items: center;
color: #fff;
}
.hero-img-grid h1 { color: #fff; }
.hero-img-grid .hero-sub { color: rgba(255,255,255,0.85); }
.hero-img-grid .pill { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.hero-img-grid .pill .check { background: var(--c-good); }
.hero-img-grid .hero-eyebrow { background: rgba(255,255,255,0.14); color: #fff; }
.hero-img-grid .hero-eyebrow .dot { background: var(--c-pri); }
/* ---------- stats strip ---------- */
.stats {
background: var(--c-navy); color: #fff;
padding: 28px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .num { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
/* 숫자가 올라가는 동안 자릿수 폭이 달라지면 라벨이 좌우로 흔들린다.
등폭 숫자로 고정해 자리를 미리 잡아 둔다. */
.stat .num .cnt { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.stat .num .unit { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.6); margin-left: 4px; }
.stat .lbl { font-size: 13px; color: rgba(255,255,255,0.6); }
/* 숫자를 세기 시작할 때 카드가 순서대로 떠오른다.
`.on` 은 화면에 들어온 순간 자바스크립트가 붙인다 — 스크립트가 없으면 아래
기본 상태(보이는 상태)가 그대로라 아무것도 사라지지 않는다. */
.stats-grid.on .stat { animation: stat-rise .55s cubic-bezier(.22,.9,.3,1) backwards; }
.stats-grid.on .stat:nth-child(2) { animation-delay: .08s; }
.stats-grid.on .stat:nth-child(3) { animation-delay: .16s; }
.stats-grid.on .stat:nth-child(4) { animation-delay: .24s; }
@keyframes stat-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- section ---------- */
section.sec { padding: 88px 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 36px; gap: 20px; flex-wrap: wrap; }
.sec-eyebrow { font-size: 13px; font-weight: 700; color: var(--c-pri-ink); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.sec-title { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; font-weight: 800; }
.sec-sub { color: var(--c-ink-2); font-size: 16px; max-width: 540px; margin: 12px 0 0; }
/* 조건·근거 같은 각주. 본문처럼 크면 읽을 필요 없는 걸 읽게 만든다. */
.sec-note { color: var(--c-mute); font-size: 12.5px; margin: 10px 0 0; }
.sec-tabs { display: flex; gap: 6px; background: var(--c-surface); border: 1px solid var(--c-line); padding: 4px; border-radius: 999px; }
.sec-tabs button { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.sec-tabs button.on { background: var(--c-ink); color: #fff; }
/* ---------- vehicle grid ---------- */
/* ---------- 인기 차량: 국산 한 줄 · 수입 한 줄 ----------
격자로 12칸을 세우면 세로를 크게 먹는다. 한 줄에 10위까지 흘려보내면 같은
정보를 3분의 1 높이에 담고, 순위라는 맥락도 생긴다. */
.rank-rows { display: grid; gap: 26px; }
/* **그리드 칸은 기본적으로 내용보다 작아지지 않는다**(min-width: auto).
안에 든 트랙이 카드 20장 폭이라 이걸 안 풀면 칸이 그만큼 늘어나 레일이
화면 밖으로 삐져나가고, overflow 가 안 생겨 스크롤도 자동 흐름도 죽는다. */
.rank-row { min-width: 0; }
.rank-label {
font-size: 13px; font-weight: 800; color: var(--c-ink); margin-bottom: 10px;
letter-spacing: -0.01em;
}
.rank-label .rank-sub { font-weight: 600; color: var(--c-mute); }
.rank-rail {
min-width: 0;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* iOS 에서 관성 스크롤 */
scrollbar-width: none; /* 막대는 숨기고 손으로 넘기게 둔다 */
/* 양 끝을 흐리게 잘라 화면 밖에서 흘러들어오는 것처럼 보이게 한다. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.rank-rail::-webkit-scrollbar { display: none; }
.rank-track { display: flex; gap: 16px; width: max-content; padding: 4px 2px 8px; }
/* 카드가 늘어나거나 줄어들지 않게 폭을 고정한다. 안 그러면 흐르는 중에
칸 너비가 들쭉날쭉해 보인다. */
.rank-track .vcard { flex: 0 0 236px; }
/* ---------- 니치 — 광고에서 본 메시지가 차량 목록까지 이어진다 ----------
`?niche=` 로 들어오면 이 상자가 판매 순위 레일 위에 열린다. 홈에서는 묶음
칩(`월 예산으로 찾기` …)을 누르면 같은 상자가 그 니치로 바뀐다. */
.niche-pick { margin-bottom: 30px; }
.niche-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--c-line); margin-bottom: 14px; }
.niche-tab {
background: none; border: 0; padding: 0 0 10px; margin-bottom: -1px; cursor: pointer;
font-size: 15px; font-weight: 700; color: var(--c-mute); border-bottom: 2px solid transparent;
}
.niche-tab:hover { color: var(--c-ink); }
.niche-tab.on { color: var(--c-ink); border-bottom-color: var(--c-ink); }
/* 고른 탭의 칩만 **한 줄**. 감기지 않고 가로로 넘긴다 — 판매 순위 레일과 같은 양 끝 흐림. */
.niche-row {
position: relative; /* 칩의 offsetLeft 를 이 줄 기준으로 잰다(화면 JS `nicheTab`) */
display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0;
-webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
mask-image: linear-gradient(90deg, #000 94%, transparent);
}
.niche-row::-webkit-scrollbar { display: none; }
.niche-row[hidden] { display: none; }
.niche-chip {
flex: 0 0 auto; white-space: nowrap;
border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink);
border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.niche-chip:hover { border-color: var(--c-ink); }
.niche-chip.on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.niche-box { margin-bottom: 34px; }
.niche-box[hidden] { display: none; }
.niche-title { font-size: 18px; font-weight: 800; color: var(--c-ink); margin: 0 0 12px; letter-spacing: -0.01em; }
.niche-title[hidden] { display: none; }
/* 3행까지는 격자. 넘치면 판매 순위와 같은 레일(.rank-rail)로 바뀐다 — 열 수는 화면 JS 의
`nicheCols` 와 같아야 한다(4열 · 980px 이하 2열). */
.niche-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* 넘칠 때의 레일은 **두 줄** — 위아래로 채우며 옆으로 흐른다. 카드 폭은 판매 순위와 같다. */
.niche-rail .rank-track {
display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
grid-auto-columns: 236px; gap: 16px;
}
.rank-rows[hidden], .sec-eyebrow[hidden] { display: none; }
.hero-cond { display: block; margin-top: 8px; font-size: 12.5px; opacity: .8; }
.hero-niche-cta { margin-top: 22px; }
.hero-niche-cta[hidden] { display: none; }
.vg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* **가만히 있을 때도 살짝 떠 있어야 한다.** 새 팔레트에서 카드 면과 페이지
바탕의 대비가 1.14:1 이라 테두리만으로는 카드가 배경에 묻힌다. 그림자는
대비가 아니라 깊이로 경계를 만들어서, 색을 어둡게 하지 않고도 떨어져 보인다. */
.vcard {
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
display: flex; flex-direction: column;
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-pri); }
/* 사진이 놓이는 판. **팔레트를 따라간다** — 옛 따뜻한 회색(oklch)이 박혀 있어서
차가운 색으로 바꾼 뒤에도 이 칸만 누렇게 남아 있었다. */
.vcard-img {
aspect-ratio: 16/10; position: relative;
background:
repeating-linear-gradient(135deg, var(--c-line) 0 1px, transparent 1px 12px),
linear-gradient(180deg, var(--c-field) 0%, var(--c-surface-2) 100%);
display: grid; place-items: center;
}
/* 사진은 칸을 꽉 채운다. 사진 배경이 카드 배경과 같은 계열이라 이어져 보인다. */
.vcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard-img .ph {
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--c-mute);
background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 6px;
}
/* 순위 배지. EV 태그와 나란히 왼쪽 위에 놓인다. */
.vcard-rank {
position: absolute; top: 10px; left: 10px; z-index: 2;
/* 강조 바탕 위 글자는 팔레트가 정한 짝(--c-on-pri)을 따른다. 여기만 따로
잉크를 박아 두면 팔레트를 바꿔도 이 배지만 옛 색으로 남는다. */
background: var(--c-pri); color: var(--c-on-pri);
font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px;
letter-spacing: 0.02em;
}
/* 순위가 있으면 EV 태그는 그 오른쪽으로 밀린다. */
.vcard-rank + .vcard-tag { left: 56px; }
.vcard-tag {
position: absolute; top: 10px; left: 10px; z-index: 2;
background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px;
letter-spacing: 0.04em;
}
/* 카드가 뜨는 효과는 그대로 두되, 레일 안에서는 위아래 여백이 없어 잘린다.
레일에 위쪽 여백을 줘서(.rank-track padding) 떠오를 자리를 만든다. */
.vcard-tag.hot { background: var(--c-warn); }
.vcard-tag.new { background: var(--c-good); }
.vcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.vcard-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.vcard-trim { font-size: 12px; color: var(--c-mute); }
.vcard-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--c-line); }
.vcard-price { display: flex; align-items: baseline; gap: 4px; }
/* **1원 단위를 지운 어림값이다**(명세 §18) — `월 70만원대~`. 원 단위로 적으면
확정 견적처럼 읽히는데, 실제 조건은 전화로 정하므로 통화가 "왜 다르냐" 로
시작하게 된다. 글자가 길어져 22px 에서 16px 로 내렸다. */
.vcard-price .amt { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
/* 밝은 바탕 위에서는 **강조색을 글자로 쓰지 않는다** — 라임은 흰 카드 위에서
안 보인다. 같은 계열의 어두운 색(`--c-pri-ink`)이 그 자리를 맡는다. */
.vcard-cta { font-size: 12px; font-weight: 700; color: var(--c-pri-ink); }
/* ---------- compare table ---------- */
.compare-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
table.compare { width: 100%; border-collapse: collapse; }
table.compare th, table.compare td { padding: 18px 22px; text-align: left; vertical-align: top; }
table.compare thead th { background: var(--c-line-2); font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
table.compare thead th.pri { background: var(--c-pri); color: var(--c-on-pri); }
table.compare tbody tr { border-top: 1px solid var(--c-line); }
table.compare tbody td { font-size: 14px; }
table.compare td.cat { font-weight: 700; color: var(--c-ink); width: 22%; }
table.compare td.tag-good::before { content: '○'; color: var(--c-good); margin-right: 6px; font-weight: 700; }
table.compare td.tag-bad::before { content: '×'; color: var(--c-warn); margin-right: 6px; font-weight: 700; }
/* ---------- process ---------- */
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proc-step {
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
padding: 24px; position: relative;
}
.proc-step .n {
width: 36px; height: 36px; border-radius: 50%; background: var(--c-pri-soft); color: var(--c-pri-ink);
display: grid; place-items: center; font-weight: 800; margin-bottom: 16px;
}
.proc-step h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -0.01em; }
.proc-step p { margin: 0; color: var(--c-mute); font-size: 13px; line-height: 1.6; }
/* ---------- reviews ---------- */
/* 좌우 스크롤 레일. 후기가 늘어도 세로로 길어지지 않는다.
스크롤바를 숨기지 않는다 — 숨기면 더 있다는 걸 모르고 지나친다. */
.reviews.rail {
display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
scroll-padding-left: 2px; padding-bottom: 10px;
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.reviews.rail > .review { flex: 0 0 340px; scroll-snap-align: start; }
@media (max-width: 720px) { .reviews.rail > .review { flex-basis: 82vw; } }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button {
width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1;
background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink-2);
transition: background .12s, color .12s, border-color .12s;
}
.rail-nav button:hover { background: var(--c-pri-soft); color: var(--c-pri-ink); border-color: var(--c-pri); }
.rail-nav button[disabled] { opacity: .35; cursor: default; }
.rail-nav button[disabled]:hover { background: var(--c-surface); color: var(--c-ink-2); border-color: var(--c-line); }
@media (max-width: 720px) { .rail-nav { display: none; } } /* 손가락으로 민다 */
.review {
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
padding: 24px;
}
.stars { color: var(--c-warn); font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; }
.review-body { font-size: 14px; line-height: 1.7; color: var(--c-ink-2); margin: 0 0 18px; text-wrap: pretty; }
.review-foot { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-mute); }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--c-line); display: grid; place-items: center; font-weight: 700; color: var(--c-ink-2); font-size: 12px; }
/* ---------- partners ---------- */
/* ---------- 금융사 워드마크 벨트 ----------
두 줄이 서로 반대 방향으로 흐르고, 칩 하나하나가 미세하게 위아래로 떠다닌다.
격자로 세워 두면 "우리 제휴사 명단" 처럼 읽히는데, 흐르게 두면 "이만큼 본다" 는
인상에 가까워진다. 로고 이미지가 아니라 **글자**다(상표 이미지는 별개 허락이 필요). */
.partners { display: grid; gap: 14px; }
.belt {
overflow: hidden;
/* 양 끝을 흐리게 잘라 화면 밖에서 흘러들어오는 것처럼 보이게 한다.
이게 없으면 가장자리에서 칩이 뚝 잘려 애니메이션이 아니라 고장으로 보인다. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.belt-track {
display: flex; gap: 14px; width: max-content;
animation: belt-slide 46s linear infinite;
}
.belt.rev .belt-track { animation-direction: reverse; }
/* 읽고 싶은 사람은 올려두면 멈춘다. 마우스가 없는 기기에서는 그냥 계속 흐른다. */
.belt:hover .belt-track, .belt:focus-within .belt-track { animation-play-state: paused; }
/* 세트를 두 번 넣고 절반만 움직인다 → 되돌아가는 순간이 눈에 안 보인다. */
@keyframes belt-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner {
flex: 0 0 auto;
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
padding: 20px 26px; text-align: center; font-family: 'JetBrains Mono', monospace;
color: var(--c-mute); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap;
animation: partner-bob 7s ease-in-out infinite;
}
/* 전부 같은 박자로 뜨면 한 덩어리가 출렁이는 것처럼 보인다. 어긋나게 띄운다. */
.belt-track .partner:nth-child(3n) { animation-delay: -2.3s; }
.belt-track .partner:nth-child(3n+2) { animation-delay: -4.7s; }
@keyframes partner-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* ---------- faq ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; margin: 0 auto; }
.faq {
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
overflow: hidden;
}
.faq summary { padding: 18px 22px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; font-weight: 600; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
/* `Q.` 는 흰 카드 위에 놓인다 — **강조색을 글자로 쓰면 안 되는 자리**다.
라임은 여기서 1.16:1 로 거의 안 보였다. */
.faq summary .q-mark { color: var(--c-pri-ink); font-weight: 800; margin-right: 10px; }
.faq summary .caret { transition: transform .2s; color: var(--c-mute); }
.faq[open] summary .caret { transform: rotate(180deg); }
.faq-body { padding: 0 22px 20px 50px; font-size: 14px; color: var(--c-ink-2); line-height: 1.7; }
.faq-body p { margin: 0; }
/* ---------- big CTA form ---------- */
.cta-section { background: var(--c-navy); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
.cta-section .accent-blob {
position: absolute; right: -100px; top: -100px; width: 500px; height: 500px;
background: radial-gradient(circle, var(--c-pri) 0%, transparent 60%);
opacity: 0.5; pointer-events: none;
}
.cta-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; position: relative; }
.cta-grid h2 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.025em; font-weight: 800; margin: 0 0 16px; line-height: 1.1; }
.cta-grid h2 .pri { color: var(--c-pri); }
.cta-grid .cta-sub { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 460px; margin: 0 0 32px; }
.cta-grid .pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.cta-form-card { background: var(--c-surface); color: var(--c-ink); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); }
.cta-form-card h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.cta-form-card .help { font-size: 13px; color: var(--c-mute); margin-bottom: 22px; }
/* 하단 CTA 는 **두 번째 폼이 아니라 초대장**이다. 누르면 히어로의 같은
Quick Quote 가 열린다(로직을 두 벌로 만들지 않는다). */
.cta-facts { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.cta-facts li { position: relative; padding-left: 24px; font-size: 14px; color: var(--c-ink-2); }
.cta-facts li::before {
content: '✓'; position: absolute; left: 0; top: 1px;
width: 16px; height: 16px; border-radius: 50%; background: var(--c-good);
color: #fff; font-size: 10px; display: grid; place-items: center;
}
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type=range] { flex: 1; }
.range-row .val { font-weight: 700; font-feature-settings: 'tnum'; min-width: 70px; text-align: right; }
/* ---------- footer ---------- */
footer.ft { background: var(--c-footer); color: rgba(255,255,255,0.6); padding: 56px 0 32px; font-size: 13px; }
.ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.ft .ft-h { color: #fff; font-size: 13px; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.005em; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-bot { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; }
/* ---------- floating buttons ---------- */
/* ---------- 상시 노출 CTA ----------
데스크톱에는 따로 두지 않는다. 헤더가 sticky 라 우상단 "상담 신청" 이 스크롤
내내 붙어 있어서, 우하단에 하나 더 두면 같은 일을 하는 버튼이 둘이 된다.
모바일은 헤더 CTA 가 좁아 안 보이므로 아래 하단 바가 그 역할을 맡는다.
(전화·카카오톡 버튼은 그 전에 뺐다 — 아직 없는 채널이라 아무 데도 안 간다.) */
/* 모바일 하단 신청 바. **모바일은 첫 화면에 폼이 없다** — 히어로가 1열로
무너지면서 카피가 먼저 오고 폼이 아래로 밀린다. 여기가 실질적 진입점이다.
기본은 보이는 상태다. 자바스크립트가 막혀도 CTA 는 있어야 한다. */
.cta-bar { display: none; }
/* success message */
.toast {
position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
background: var(--c-ink); color: #fff; padding: 14px 22px; border-radius: 999px;
box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; z-index: 100;
display: flex; gap: 10px; align-items: center;
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--c-good); display: grid; place-items: center; font-size: 13px; }
/* 거절·실패 안내. 체크가 붙으면 "완료" 로 읽힌다 — 아이콘과 색을 바꾼다. */
.toast.toast-error .ok { background: var(--c-bad); font-weight: 800; }
/* responsive */
@media (max-width: 980px) {
/* `padding: 0` 을 걸지 않는다. `.cta-grid` 는 `.wrap` 을 겸해서
(`
`) 그 좌우 24px 여백을 같이 지워 버린다
— 모바일에서 하단 CTA 글자가 화면 왼쪽 끝에 붙어 있던 원인이다.
여백을 따로 쓰는 건 `.hero-img-grid` 뿐이라 바로 아래에서 정해 준다. */
.hero-grid, .hero-img-grid, .cta-grid { grid-template-columns: 1fr !important; gap: 36px; }
/* 모바일 히어로는 폼이 없어 짧다. 사진 위 카피만 남으므로 아래 여백을 줄인다. */
.hero-dark .hero { padding: 48px 0 56px; }
.hero-img-grid { padding: 56px 28px; }
.vg { grid-template-columns: repeat(2, 1fr); }
.rank-track .vcard { flex: 0 0 208px; }
.niche-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.niche-rail .rank-track { grid-auto-columns: 208px; gap: 12px; }
.niche-tabs { gap: 16px; }
.niche-tab { font-size: 14px; }
/* 모바일은 하단 고정 바가 니치 CTA 를 맡는다 — 같은 버튼이 한 화면에 둘이 되지 않게. */
.hero-niche-cta { display: none !important; }
.proc, .reviews, .stats-grid { grid-template-columns: repeat(2, 1fr); }
.ft-top { grid-template-columns: 1fr 1fr; }
.nav { display: none; }
.tel-mini { display: none; }
/* 모바일에서는 하단 sticky 바가 진입점이다(명세 §28). 헤더에도 같은 버튼을
두면 좁은 화면에 같은 일을 하는 것이 둘이 된다. */
.hdr-quote { display: none; }
/* 도크가 판(배경·블러·윗선)을 맡고 바가 그 안에 놓인다. */
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
background: rgba(255,255,255,0.94); backdrop-filter: saturate(1.6) blur(10px);
border-top: 1px solid var(--c-line);
transition: transform .25s cubic-bezier(.22,.9,.3,1);
}
/* Quick Quote 가 열려 있거나 화면에 보이면 내려간다 — 같은 일을 하는 것이
둘로 보이면 안 된다(명세 §14). 도크째로 내린다. */
.dock.hide { transform: translateY(120%); }
.cta-bar { display: block; }
body.has-cta-bar { padding-bottom: 78px; }
/* ── 모바일 = 바텀시트 ────────────────────────────────────────────────
**첫 화면에 폼을 보여주지 않는다**(명세 §12). 히어로는 카피뿐이고,
화면 하단에 늘 떠 있는 고정 바를 눌러야 Quick Quote 가 올라온다.
(히어로 안의 큰 버튼은 뺐다 — 고정 바와 같은 일을 하는 버튼이 한 화면에
둘이었다.)
데스크톱과 같은 노드다 — 상태도 로직도 한 벌이다. */
.qq { display: none; }
body.qq-open .qq {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
max-height: 92vh; overflow-y: auto;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-width: 1px 0 0;
padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
animation: qq-rise .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes qq-rise { from { transform: translateY(14%); opacity: 0.4; } }
/* 시트가 떠 있는 동안 뒤 페이지가 같이 스크롤되면 어디에 있었는지 잃는다. */
body.qq-open { overflow: hidden; }
body.qq-open .qq-scrim {
display: block; position: fixed; inset: 0; z-index: 55;
background: rgba(20,20,30,0.42);
}
.qq-close {
display: block; position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
background: var(--c-line-2); color: var(--c-mute); font-size: 19px; line-height: 1;
}
.qq-close:hover { color: var(--c-ink); }
/* 닫기 버튼이 오른쪽 위를 차지하므로 제목줄을 그만큼 좁힌다 —
안 그러면 '무료' 배지 위에 × 가 겹쳐 앉는다. */
body.qq-open .quote-card-head { padding-right: 40px; }
/* 시트에서는 카드 높이를 굳히지 않는다 — 화면 높이에 맞춰 늘고 준다. */
.qq-body { min-height: 0; }
/* 시트에서는 세로가 귀하다. 선택 줄의 여백을 줄인다. */
.qq-rows { gap: 12px; }
.seg button { min-height: 44px; font-size: 12.5px; } /* 손가락은 34px 로 못 줄인다 */
}
/* ── 모바일 콘텐츠 우선순위(명세 §17) ──────────────────────────────────
파일럿의 핵심은 정보 전달이 아니라 **Quote Start → Lead** 다. 좁은 화면에서는
전환에 가까운 것부터 오고, 읽는 데 오래 걸리는 것(금융사 로고 띠)은 뒤로
민다. **지우지는 않는다** — 필요한 사람은 끝까지 내려가면 있다.
데스크톱은 이 규칙 밖이라 HTML 에 적힌 순서 그대로 나간다. 세로가 넉넉해
굳이 바꿀 이유가 없고, 순서가 두 벌이면 어느 게 진짜인지 헷갈린다. */
@media (max-width: 980px) {
.flow { display: flex; flex-direction: column; }
[data-flow="hero"] { order: 1; }
[data-flow="trust"] { order: 2; } /* 간단한 신뢰 요소 */
[data-flow="vehicles"] { order: 3; }
[data-flow="reviews"] { order: 4; } /* 후기가 이용 절차보다 먼저 */
[data-flow="process"] { order: 5; }
[data-flow="faq"] { order: 6; }
[data-flow="guides"] { order: 7; } /* 블로그 허브 입구 — FAQ 바로 뒤. 허브가 있을 때만 */
[data-flow="finance"] { order: 8; } /* 금융사 띠 — 아래로 */
[data-flow="apply"] { order: 9; }
}
@media (max-width: 560px) {
.vg { grid-template-columns: 1fr; }
.proc, .reviews, .stats-grid { grid-template-columns: 1fr 1fr; }
.partner { padding: 16px 20px; font-size: 11px; }
section.sec { padding: 64px 0; }
}
/* ---------- subpages ---------- */
.page-hero{padding:64px 0 48px;border-bottom:1px solid var(--c-line)}
.page-hero .sec-eyebrow{margin-bottom:10px}
.page-hero h1{margin:0 0 12px;font-size:clamp(30px,3.4vw,44px);letter-spacing:-0.025em;font-weight:800}
.page-hero p{margin:0;color:var(--c-ink-2);font-size:16px;max-width:560px}
.page-body{padding:56px 0 88px}
.prose{max-width:760px;font-size:15px;line-height:1.8;color:var(--c-ink-2)}
.prose h2{font-size:22px;letter-spacing:-0.015em;color:var(--c-ink);margin:40px 0 12px}
.prose h3{font-size:17px;color:var(--c-ink);margin:28px 0 8px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0}
.prose figure{margin:28px 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--c-line-2)}
.prose th,.prose td{border:1px solid var(--c-line);padding:10px 14px;text-align:left}
.prose th{background:var(--c-line-2);font-weight:700;color:var(--c-ink)}
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s,border-color .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--c-pri)}
.post-thumb{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,oklch(0.93 0.01 60) 0 1px,transparent 1px 12px),linear-gradient(180deg,oklch(0.97 0.005 80) 0%,oklch(0.93 0.01 60) 100%);display:grid;place-items:center}
.post-thumb .ph{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--c-mute);background:rgba(255,255,255,0.7);padding:4px 8px;border-radius:6px}
.post-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-cat{font-size:11px;font-weight:700;color:var(--c-pri-ink);background:var(--c-pri-soft);align-self:flex-start;padding:3px 8px;border-radius:6px;letter-spacing:0.02em}
.post-title{font-size:16px;font-weight:700;letter-spacing:-0.01em;color:var(--c-ink);line-height:1.4}
.post-excerpt{font-size:13px;color:var(--c-mute);line-height:1.6;flex:1}
.post-meta{font-size:12px;color:var(--c-mute);padding-top:10px;border-top:1px dashed var(--c-line)}
.post-h1{font-size:clamp(26px,3vw,38px);letter-spacing:-0.025em;color:var(--c-ink);line-height:1.25;margin:14px 0 8px}
.prose .post-meta{border:0;padding:0;margin-bottom:28px}
.blog-silo{margin-bottom:56px}
.blog-silo h2{font-size:22px;letter-spacing:-0.015em;margin:0 0 18px}
.blog-silo h2 a{color:var(--c-ink)}
.blog-empty{font-size:15px;color:var(--c-mute);padding:48px 0;text-align:center}
.hub-list{list-style:none;padding:0;margin:16px 0 0}
.hub-list li{padding:16px 0;border-top:1px solid var(--c-line);margin:0}
.hub-list a{font-weight:700;color:var(--c-ink);font-size:16px}
.hub-list p{margin:4px 0 0;font-size:14px;color:var(--c-mute)}
.post-cta{max-width:760px;margin:48px auto 0;padding:28px;background:var(--c-pri-soft);border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.notice-list{display:flex;flex-direction:column;gap:8px;max-width:880px}
.job-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.job-card h2{margin:0 0 4px;font-size:17px;letter-spacing:-0.01em}
.job-card .meta{font-size:13px;color:var(--c-mute)}
.crumb{font-size:13px;color:var(--c-mute);margin-bottom:16px}
.crumb a{color:var(--c-pri-ink);font-weight:600}
.logo-mark{background:var(--c-pri)}
@media(max-width:980px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.post-list{grid-template-columns:1fr}}
.ft a:hover{color:#fff}
.logo-lockup{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.sec-eyebrow{color:var(--c-pri-ink)}
.vcard-cta{color:var(--c-pri-ink)}
.row-3 .select{padding:0 8px;font-size:13px}
.select:disabled{opacity:0.5;background:var(--c-line-2)}