/* 타운카 × 테슬라 인증 중고차 랜딩 — style.css(차주신청 원본) 위에 덧씌우는 전용 컴포넌트 */

/* HERO 혜택 2칸 */
#tcz .hero-ben{display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:14px;margin:40px auto 0}
#tcz .hb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(52,204,100,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#tcz .hb-tag{font-size:12px;font-weight:700;color:var(--inverse-primary);background:rgba(52,204,100,.12);border-radius:999px;padding:4px 10px;margin-bottom:6px}
#tcz .hb b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff}
#tcz .hb b em{font-style:normal;color:var(--inverse-primary)}
#tcz .hb>span:last-child{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:500}
@media(max-width:640px){
  #tcz .hero-ben{grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
  #tcz .hb{padding:18px 8px;border-radius:16px}
  #tcz .hb b{font-size:20px}
  #tcz .hb>span:last-child{font-size:12px}
}

/* 혜택 4카드 (tax-card 톤, 흰 카드 2×2) */
#tcz .ben-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px;max-width:900px;margin-left:auto;margin-right:auto}
#tcz .ben-card{background:#fff;border-radius:24px;padding:40px 32px;text-align:left;transition:transform .25s,box-shadow .25s}
#tcz .ben-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.07)}
#tcz .ben-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:5px 11px}
#tcz .ben-badge.gray{color:var(--text-alternative);background:var(--bg-alternative)}
#tcz .ben-card .big{font-size:27px;font-weight:800;color:var(--primary);letter-spacing:-.02em;margin-top:18px}
#tcz .ben-card .cap{font-size:17px;font-weight:700;color:var(--text-general);margin-top:8px}
#tcz .ben-card .desc{font-size:14px;color:var(--text-alternative);margin-top:8px;line-height:1.65}
@media(max-width:740px){
  #tcz .ben-grid{grid-template-columns:1fr;gap:14px;margin-top:44px}
  #tcz .ben-card{padding:28px 24px}
  #tcz .ben-card .big{font-size:23px;margin-top:14px}
  #tcz .ben-card .cap{font-size:16px}
  #tcz .ben-card .desc br{display:none}
}

/* 후기 1건 */
#tcz .tl-review{background:#fff}
#tcz .proof-grid .review.tl-review{display:block}

/* 매물 카드 (earn-card 톤) */
#tcz .tl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;text-align:left}
#tcz .tl-card{background:#fff;border:1px solid var(--line-general);border-radius:22px;overflow:hidden}
#tcz .tl-img{position:relative;aspect-ratio:16/10;background:var(--bg-alternative);display:flex;align-items:center;justify-content:center}
#tcz .tl-img img{width:100%;height:100%;object-fit:cover}
#tcz .tl-ph{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--text-assistive)}
#tcz .tl-sold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(23,23,25,.55);color:#fff;font-weight:800}
#tcz .tl-body{padding:20px 22px 22px}
#tcz .tl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
#tcz .tl-chip{font-size:12px;font-weight:700;color:var(--text-alternative);background:var(--bg-alternative);border-radius:999px;padding:4px 10px}
#tcz .tl-chip.on{color:var(--primary);background:var(--primary-tint)}
#tcz .tl-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-general);font-size:14px}
#tcz .tl-row span{color:var(--text-alternative)}
#tcz .tl-row b{font-weight:800;font-size:16px}
#tcz .tl-row.hl b{color:var(--primary);font-size:18px}
#tcz .tl-soon .tl-img{background:linear-gradient(110deg,var(--bg-alternative) 30%,#eef6f0 50%,var(--bg-alternative) 70%);background-size:220% 100%;animation:tlShimmer 2.4s linear infinite}
#tcz .sk{height:12px;border-radius:6px;background:var(--bg-alternative);margin-top:12px}
#tcz .sk.w60{width:60%;height:18px;margin-top:0}
#tcz .sk.w40{width:40%}
@keyframes tlShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
#tcz .tl-empty{grid-column:1/-1;text-align:center;font-size:15px;color:var(--text-alternative);margin-top:8px;line-height:1.7}
#tcz .tl-cta{margin-top:40px}
@media(max-width:880px){ #tcz .tl-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){
  #tcz .tl-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  #tcz .tl-soon:nth-child(n+2){display:none}
  #tcz .tl-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){ #tcz .tl-soon .tl-img{animation:none} }

/* 진행 4스텝 */
#tcz .step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px;text-align:left}
#tcz .step-card{background:#fff;border-radius:24px;padding:32px 26px}
#tcz .step-card h3{font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
#tcz .step-card p{font-size:14.5px;color:var(--text-alternative);line-height:1.65}
@media(max-width:880px){ #tcz .step-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){
  #tcz .step-grid{grid-template-columns:1fr;gap:12px;margin-top:40px}
  #tcz .step-card{padding:22px 22px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
  #tcz .step-card .how-num{margin-bottom:0}
  #tcz .step-card p{grid-column:2}
}

/* 관심 모델 select(선택 항목)는 placeholder 색 유지 */
#tcz .select[name=model]:has(option[value=""]:checked){color:rgba(23,23,25,.45)}

/* earn-wrap 의 50vw 풀블리드가 세로 스크롤바 폭만큼 가로 스크롤을 만들지 않도록 */
html,body{overflow-x:hidden;overflow-x:clip}

/* 모바일 전용 줄바꿈 */
#tcz br.mbr{display:none}
@media(max-width:640px){#tcz br.mbr{display:inline}}

/* 매물 리스트 (2026-10-16 테슬라 13대) */
#tcz .tl-tabs{margin-top:36px}
#tcz .tl-ph-model{font-size:26px;font-weight:800;letter-spacing:-.02em;color:rgba(23,23,25,.18)}
#tcz .tl-row.fix b{font-size:13px;font-weight:600;color:var(--text-neutral);text-align:right;max-width:62%;line-height:1.45}
#tcz .tl-ask{display:block;width:100%;margin-top:14px;padding:12px 0;border:none;border-radius:12px;background:var(--primary-tint);color:var(--primary);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
#tcz .tl-ask:hover{background:#cdf2d9}
#tcz .tl-more{display:block;margin:20px auto 0;padding:14px 28px;font-size:15px}
/* 사진 없는 매물은 자리표시 영역을 낮게 (사진 받으면 16:10으로 복귀) */
#tcz .tl-img:has(.tl-ph-model){aspect-ratio:16/7}
@media(max-width:640px){ #tcz .tl-img:has(.tl-ph-model){aspect-ratio:16/5} }
/* 매물 모델 필터: 대수는 초록 글씨로 */
#tcz .tl-tabs .earn-tab{display:inline-flex;align-items:center;gap:5px}
#tcz .tl-cnt{color:var(--primary);font-weight:800}
#tcz .tl-tabs .earn-tab.on .tl-cnt{color:var(--inverse-primary)}

/* HERO 차량 사진 — 투명 배경(테슬라 공식 이미지 누끼), 바닥에 은은한 그림자 */
#tcz .hero-duo{position:relative;max-width:420px;margin:28px auto 0}
#tcz .hero-duo::after{content:"";position:absolute;left:8%;right:4%;bottom:-2%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(6px);z-index:0}
#tcz .hero-duo img{position:relative;z-index:1;width:100%;height:auto;display:block}
#tcz .hero-duo+.hero-ben{margin-top:24px}
@media(max-width:640px){
  #tcz .hero-duo{max-width:250px;margin-top:20px}
  #tcz .hero-duo+.hero-ben{margin-top:16px}
}
/* 히어로 간소화(10-16): 사진 바로 아래 상담 버튼 */
#tcz .hero-duo+.hero-cta{margin-top:36px}
@media(max-width:640px){ #tcz .hero-duo+.hero-cta{margin-top:26px} }
/* 히어로 요소 간 상하 간격 넓힘(10-16) */
#tcz .hero .hero-tag{margin-bottom:30px}
#tcz .hero .lead{margin-top:26px}
#tcz .hero-duo{margin-top:52px}
#tcz .hero-duo+.hero-cta{margin-top:56px}
@media(max-width:640px){
  #tcz .hero .hero-tag{margin-bottom:22px}
  #tcz .hero .lead{margin-top:18px}
  #tcz .hero-duo{margin-top:36px}
  #tcz .hero-duo+.hero-cta{margin-top:40px}
}
/* 혜택 3카드(인증 중고차·보증·FSD) 한 줄 */
#tcz .ben-grid.ben-3{grid-template-columns:repeat(3,1fr);max-width:1072px}
@media(max-width:880px){ #tcz .ben-grid.ben-3{grid-template-columns:1fr;max-width:560px} }
/* 모바일 히어로 사진 키움(10-16): 화면 폭 거의 꽉 차게 */
@media(max-width:640px){ #tcz .hero-duo{max-width:340px} }
/* 모바일 히어로 2차(10-16): 간격 더 넓힘, 사진은 300px */
@media(max-width:640px){
  #tcz .hero .hero-tag{margin-bottom:28px}
  #tcz .hero .lead{margin-top:24px}
  #tcz .hero-duo{max-width:300px;width:auto;margin:48px auto 0}
  #tcz .hero-duo+.hero-cta{margin-top:52px}
}