/* 프렌즈모빌리티 선납금 광고 도착 페이지 — 광고 소재(피그마 479:3)와 같은 틀: 어두운 실사 사진 · 흰 글자 · 형광 노랑 가격 */
  :root{
    --ink:#1C1C1C; --hl:#FFF04D; --btn:#3D2A12; --paper:#FFFDF6; --body:#3F3F3F; --muted:#6F6F6F; --line:#E6E3DA; --panel:#F6F4EC; --bg:#FFFFFF; --red:#C0392B;
    --f:clamp(13px, calc((100vw - 34px)*.0449), 17px);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  body{margin:0; background:#E9E7E0; color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
    font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;}
  ::selection{background:var(--hl); color:var(--ink);}
  img{max-width:100%; display:block;}
  button, input{font-family:inherit;}
  .page{max-width:480px; margin:0 auto; background:var(--bg); min-height:100dvh; padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .wrap{padding:0 20px;}
  .hd{position:sticky; top:0; z-index:20; background:var(--ink);}
  .hd .in{height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px;}
  .hd img{height:17px; width:auto;}
  .hd nav, .deskH{display:none;}
  .hd a.btn{font-size:13.5px; font-weight:800; color:var(--btn); background:var(--hl); padding:9px 14px; border-radius:10px; text-decoration:none;}

  /* 첫 화면 — 광고에서 본 차·가격·조건을 같은 배치로 다시 보여 준다 */
  .promo{margin:0; padding:13px 20px; background:var(--ink); color:#fff; font-size:calc(var(--f)*1.12); font-weight:800; letter-spacing:-0.02em;}
  .promo em{font-style:normal; color:var(--hl);}
  /* 차량 카드가 빠르게 넘어간다 — 재고 차종이 여럿이라는 것을 한눈에. 동작 줄이기를 켠 사람에게는 첫 차만 세워 둔다 */
  .hero{position:relative; aspect-ratio:1/1; background:#14161A; color:#fff; overflow:hidden;}
  .slide{position:absolute; inset:0; background:#14161A center/cover no-repeat; opacity:0; transform:translateX(16px); transition:opacity .2s ease-out, transform .3s cubic-bezier(.16,1,.3,1);}
  .slide.on{opacity:1; transform:none; z-index:1;}
  @media(prefers-reduced-motion:reduce){ .slide{transition:none; transform:none;} }
  .slide::before{content:''; position:absolute; inset:0 0 40% 0; background:linear-gradient(180deg, rgba(8,11,19,.82) 0%, rgba(8,11,19,.5) 60%, rgba(8,11,19,0) 100%);}
  .hero .nophoto{position:absolute; left:6%; right:6%; bottom:6%; height:46%; object-fit:contain;}
  .hero .copy{position:relative; padding:calc(var(--f)*1.7) 20px 0; display:inline-block;}
  .tags{display:flex; flex-wrap:wrap; gap:7px;}
  .tags span{font-size:calc(var(--f)*.88); font-weight:800; padding:4px 12px; border-radius:999px; white-space:nowrap;}
  .tags .kind{color:#fff; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.5);}
  .tags .stock{color:var(--ink); background:var(--hl); border:1.5px solid var(--hl);}
  .hero h1, .hero .nm{font-size:calc(var(--f)*2.2); line-height:1.2; font-weight:900; letter-spacing:-0.03em; margin:calc(var(--f)*.7) 0 0;}
  .hero .price{font-size:calc(var(--f)*3.05); line-height:1.15; font-weight:900; letter-spacing:-0.03em; color:var(--hl); white-space:nowrap; font-variant-numeric:tabular-nums; margin:0;}
  /* 조건 — 가격 바로 아래, 가격 오른쪽 끝에 맞춘다 */
  .hero .cond{font-size:max(12px, calc(var(--f)*.76)); font-weight:500; color:#C2C5CA; text-align:right; margin:3px 0 0; white-space:nowrap;}
  .go{display:flex; align-items:center; justify-content:center; min-height:56px; margin:16px 20px 0; border-radius:14px; background:var(--hl); color:var(--btn);
    font-size:calc(var(--f)*1.12); font-weight:800; text-decoration:none;}
  .go:active, .cta a:active, .submit:active{transform:translateY(1px);}
  .stockNote{margin:12px 20px 0; padding:12px 14px; border-radius:12px; background:var(--panel); font-size:calc(var(--f)*.95); line-height:1.6; color:var(--body); word-break:keep-all;}
  .stockNote b{color:var(--ink);}

  section{padding:calc(var(--f)*3.6) 0 calc(var(--f)*3.6);}
  section.panel{background:var(--panel);}
  h2{font-size:calc(var(--f)*1.62); line-height:1.35; font-weight:800; letter-spacing:-0.03em; margin:0 0 calc(var(--f)*1.1); word-break:keep-all; text-wrap:balance;}
  .lead{font-size:calc(var(--f)*1.04); line-height:1.7; color:var(--body); margin:0 0 calc(var(--f)*1.6); word-break:keep-all;}
  mark{background:linear-gradient(transparent 55%, var(--hl) 55%); color:inherit; font-weight:800;}

  /* 차 한 대에 카드 하나, 연료마다 줄 하나 — 줄을 누르면 그 차로 상담 신청 칸이 채워진다 */
  .grid{display:grid; gap:12px;}
  .card{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; align-items:stretch; min-width:0; color:var(--ink); text-decoration:none;}
  .card:active{background:var(--panel);}
  .card.more{display:none;}
  .grid.all .card.more{display:flex;}
  .card .img{background:linear-gradient(180deg,#FCFCFB 0%,#F1F0EC 100%); flex:0 0 33%; border-right:1px solid var(--line);}
  .card .img img{width:100%; height:100%; object-fit:contain; padding:4% 3%;}
  .card .b{padding:13px 10px 12px 12px; flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; justify-content:center;}
  .card .n{font-size:calc(var(--f)*1.09); font-weight:800; margin:0; line-height:1.3; word-break:keep-all;}
  /* 한정 수량 칩 — 모든 카드에서 이름 바로 아래 */
  .card .lim{font-size:calc(var(--f)*.78); font-weight:800; background:var(--hl); padding:1px 9px; border-radius:999px; white-space:nowrap;}
  .row{display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; margin-top:2px; padding:9px 10px; border-radius:11px; background:var(--panel);}
  .row .p{font-size:calc(var(--f)*1.1); font-weight:800; letter-spacing:-0.03em; white-space:nowrap; font-variant-numeric:tabular-nums;}
  .row .p i{font-style:normal; font-size:.76em; font-weight:700; color:var(--muted); margin-right:3px; letter-spacing:0;}
  .row svg{flex:none; width:6px; height:10px; color:#9A9A9A;}
  .moreBtn{width:100%; min-height:52px; margin-top:14px; border:1.5px solid var(--ink); border-radius:14px; background:#fff; color:var(--ink); font-size:calc(var(--f)*1.03); font-weight:800; cursor:pointer;}
  .moreBtn[hidden]{display:none;}
  .basis{font-size:calc(var(--f)*.84); color:var(--muted); margin:14px 0 0; word-break:keep-all;}

  .qa{background:#fff; border:1px solid var(--line); border-radius:18px; padding:calc(var(--f)*1.5) calc(var(--f)*1.35); margin-top:14px;}
  .qa h3{font-size:calc(var(--f)*1.18); font-weight:800; margin:0 0 8px; word-break:keep-all;}
  .qa p{font-size:calc(var(--f)*1.02); line-height:1.7; color:var(--body); margin:0; word-break:keep-all;}

  /* 접수 폼 */
  .form{background:#fff; border:1.5px solid var(--ink); border-radius:20px; padding:calc(var(--f)*1.8) calc(var(--f)*1.35); box-shadow:0 10px 30px rgba(28,28,28,.10);}
  .field{margin-bottom:24px;}
  .field label, .field .lb{display:block; font-size:calc(var(--f)*.98); font-weight:800; margin-bottom:9px;}
  .field input[type="text"], .field input[type="tel"]{width:100%; height:52px; border:1.5px solid var(--line); border-radius:12px; padding:0 14px; font-size:16px; color:var(--ink); background:var(--panel); outline:none; caret-color:var(--ink);}
  .field input:focus{border-color:var(--ink); background:#fff;}
  .field input::placeholder{color:#8D8D8D;}
  .field.err input{border-color:var(--red);}
  .ferr{display:none; font-size:13px; font-weight:700; color:var(--red); margin:6px 0 0;}
  .field.err .ferr, .consent.err + .ferr{display:block;}
  .seg{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
  .seg.t3{grid-template-columns:repeat(3,1fr);}
  .seg label{margin:0; cursor:pointer;}
  .seg input{position:absolute; opacity:0; pointer-events:none;}
  .seg span{display:flex; align-items:center; justify-content:center; min-height:50px; padding:8px 10px; border:1.5px solid var(--line); border-radius:12px; background:var(--panel); font-size:calc(var(--f)*1.02); font-weight:700; text-align:center;}
  .seg input:checked + span{background:var(--ink); border-color:var(--ink); color:#fff;}
  .seg input:focus-visible + span{outline:2px solid var(--hl); outline-offset:2px;}
  .consent{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--body); margin:4px 0 0;}
  .consent input{width:20px; height:20px; margin-top:1px; flex:none; accent-color:var(--ink);}
  .consent a{color:var(--ink); font-weight:700;}
  .submit{width:100%; min-height:56px; margin-top:22px; border:none; border-radius:14px; background:var(--hl); color:var(--btn); font-size:calc(var(--f)*1.12); font-weight:800; cursor:pointer;}
  .submit[disabled]{opacity:.6;}
  .form .fine{font-size:13px; color:var(--muted); text-align:center; margin:10px 0 0;}
  .done{display:none; text-align:center; padding:calc(var(--f)*1.2) 0;}
  .done h3{font-size:calc(var(--f)*1.4); font-weight:800; margin:0 0 8px;}
  .done p{font-size:calc(var(--f)*1.04); color:var(--body); margin:0; word-break:keep-all;}

  footer{padding:40px 0 20px; font-size:12.5px; color:var(--muted); line-height:1.7;}
  footer b{display:block; color:var(--ink); font-size:14px; margin-bottom:8px;}
  footer a{color:var(--muted);}
  .cta{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--line);}
  .cta a{display:flex; align-items:center; justify-content:center; width:100%; max-width:448px; min-height:54px; border-radius:14px; background:var(--hl); color:var(--btn); font-size:16.5px; font-weight:800; text-decoration:none;}
  .cta[hidden]{display:none;}
  @media(max-width:339px){ .row svg{display:none;} }
  /* PC — 일반 웹사이트형: 넓은 머리띠·2단 첫 화면·3열 목록. 휴대폰은 위의 세로 한 줄 구성 그대로 */
  @media(min-width:960px){
    :root{--f:17px;}
    body{background:var(--bg);}
    .page{max-width:none; padding-bottom:0;}
    .wrap, .hd .in, .top{max-width:1120px; margin:0 auto; padding-left:32px; padding-right:32px;}
    .hd .in{height:68px;}
    .hd img{height:21px;}
    .hd nav{display:flex; gap:34px; margin:0 auto 0 56px;}
    .hd nav a{color:#fff; font-size:15.5px; font-weight:700; text-decoration:none;}
    .hd a.btn{font-size:15px; padding:11px 20px;}
    .topBand{background:var(--ink);}
    .top{display:grid; grid-template-columns:1fr 500px; gap:64px; align-items:center; padding-top:64px; padding-bottom:64px;}
    .hero{grid-column:2; grid-row:1; border-radius:24px;}
    .side{grid-column:1; grid-row:1;}
    .promo{display:none;}
    .deskH{display:block; font-size:50px; line-height:1.25; font-weight:900; letter-spacing:-0.03em; color:#fff; margin:0 0 30px; word-break:keep-all;}
    .deskH em{font-style:normal; color:var(--hl);}
    .go{margin:0; max-width:380px; min-height:62px; background:var(--hl); color:var(--btn); font-size:19px;}
    .stockNote{margin:18px 0 0; max-width:460px; background:rgba(255,255,255,.08); color:#D9D9D9; font-size:16px;}
    .stockNote b{color:#fff;}
    section{padding:88px 0;}
    h2{font-size:36px; margin-bottom:16px;}
    .lead{font-size:18px; margin-bottom:32px;}
    .grid{grid-template-columns:repeat(3,1fr); gap:18px;}
    .card.more{display:flex;}
    .moreBtn{display:none;}
    .qas{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
    .qa{margin-top:0;}
    .applyCols{display:grid; grid-template-columns:1fr 480px; gap:64px; align-items:start;}
    footer{padding:56px 0 48px; font-size:13.5px; border-top:1px solid var(--line);}
    .cta{display:none;}
  }

  /* 첫 화면 차량 카드 넘기기 — 이전·다음 버튼과 몇 번째인지 */
  .snav{position:absolute; right:14px; bottom:14px; z-index:3; display:flex; align-items:center; gap:8px;}
  .snav button{width:42px; height:42px; border-radius:999px; border:1.5px solid rgba(255,255,255,.55); background:rgba(8,11,19,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
  .snav button:active{background:rgba(8,11,19,.85);}
  .snav svg{width:9px; height:15px;}
  .snav .cnt{font-size:13.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.6); margin-right:2px;}
  .slide .more{position:absolute; left:20px; bottom:16px; z-index:3; font-size:14.5px; font-weight:800; color:var(--btn); background:var(--hl); padding:9px 15px; border-radius:999px; text-decoration:none;}

  /* 차종별 상세 페이지 */
  .spec{margin:0; border-top:2px solid var(--ink);}
  .spec div{display:flex; justify-content:space-between; gap:16px; padding:15px 2px; border-bottom:1px solid var(--line);}
  .spec dt{font-size:calc(var(--f)*.98); color:var(--muted); font-weight:600; white-space:nowrap;}
  .spec dd{margin:0; font-size:calc(var(--f)*1.04); font-weight:700; text-align:right; word-break:keep-all;}
  .spec .big dd{font-size:calc(var(--f)*1.5); font-weight:900; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
  .allLink{display:flex; align-items:center; justify-content:center; min-height:52px; margin-top:14px; border:1.5px solid var(--ink); border-radius:14px; color:var(--ink); font-size:calc(var(--f)*1.03); font-weight:800; text-decoration:none;}
  .hd a.logo{display:block;}
  @media(min-width:960px){
    .deskH small{display:block; font-size:22px; font-weight:800; color:var(--hl); margin-bottom:10px; letter-spacing:-0.02em;}
    .specCols{display:grid; grid-template-columns:1fr 480px; gap:64px; align-items:start;}
    .spec .big dd{font-size:30px;}
  }