/* ==========================================================================
   휴대폰(700px 이하) 공통 크기 기준 — 모든 페이지가 같은 값을 쓴다. 값은 아래 변수 한 곳에서만 정한다.
   PC(1001px 이상)는 건드리지 않고, 701~1000px 은 기존 그대로 둔다.
   ========================================================================== */
@media(max-width:700px){
:root{--m-h1:27px;--m-h2:21.5px;--m-h3:17.5px;--m-body:15px;--m-small:13px;--m-gutter:16px;--m-card:16px;--m-sec:24px;--m-btn:46px;--m-gap:12px}
body{font-size:var(--m-body);line-height:1.6}
.wrap{padding-left:var(--m-gutter);padding-right:var(--m-gutter)}
h1,h2,h3,p,b,span,a,li,summary{overflow-wrap:break-word;word-break:keep-all}
h1,.band h1{font-size:var(--m-h1)!important;line-height:1.3}
h2{font-size:var(--m-h2)!important;line-height:1.35}
h3,.card h3{font-size:var(--m-h3)!important;line-height:1.35}
/* 영역 간격: 지금의 약 3분의 2 */
section{padding-top:var(--m-sec)!important;padding-bottom:var(--m-sec)!important}
section[style*="padding-top:0"]{padding-top:0!important}
.band{padding-top:30px}
.band p[style*="padding-bottom"]{padding-bottom:22px!important}
.band .tabs,.tabs{margin-top:20px}
/* 회사소개 탭(6개): 3칸씩 2줄로 고르게 — 알약 모양 */
.band .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;overflow:visible;padding-bottom:16px}
.band .tabs a{padding:10px 4px;text-align:center;border-radius:10px;font-size:13px;font-weight:600;background:rgba(255,255,255,.1);color:#DCE8F1;white-space:nowrap}
.band .tabs a.on{background:#fff;color:var(--ink);font-weight:700}
/* 고수되기 영상 목록: 제목·여백 줄이기 */
.vgrp-h{font-size:17px!important;gap:8px}.vgrp-n{width:24px;height:24px;font-size:12px}
.vcard{padding:0!important}.vcard .yt-cap{padding:10px 14px 12px;font-size:15px}
.vgrp{gap:10px!important}#videos .wrap{gap:26px!important}
.stack{gap:12px}
.stack[style*="gap:22px"],.stack[style*="gap:20px"],.stack[style*="gap:24px"]{gap:16px!important}
.wrap.grid[style*="gap"],.grid[style*="gap:24px"],.grid[style*="gap:40px"],.grid[style*="gap:36px"],.grid[style*="gap:28px"]{gap:16px!important}
.grid{gap:12px}
/* 카드 */
.card{padding:var(--m-card)}
.card[style*="padding:34px 40px"],.card[style*="padding:36px 40px"],[style*="padding:34px 40px"],[style*="padding:36px 40px"]{padding:var(--m-card) 18px!important}
.deal .ph{height:auto;aspect-ratio:16/9}
.deal .in{padding:14px 16px}
.deal .pr{font-size:21px}
/* 본문·안내 글자 크기 (문구에 직접 지정된 크기를 기준에 맞춘다) */
[style*="font-size:14px"],[style*="font-size:15px"],[style*="font-size:17px"],[style*="font-size:18px"]{font-size:var(--m-body)!important}
[style*="font-size:12px"],[style*="font-size:12.5px"],[style*="font-size:13px"]{font-size:var(--m-small)!important}
.note,.note span{font-size:var(--m-small)}
.letter p{font-size:16px;line-height:1.8}
.journey-note{padding:22px 20px;border-radius:20px;gap:10px}
.letter .journey-note p{font-size:16px;line-height:1.8}
.journey-note h3{font-size:21px!important}
.quote{font-size:17px;padding:16px 18px;line-height:1.65}
[style*="font-size:48px"]{font-size:34px!important}
[style*="font-size:32px"]{font-size:24px!important}
[style*="font-size:26px"],[style*="font-size:28px"],[style*="font-size:30px"]{font-size:var(--m-h2)!important}
[style*="font-size:21px"]{font-size:var(--m-h3)!important}
[style*="font-size:19px"],[style*="font-size:20px"]{font-size:var(--m-h3)!important}
.tl b{font-size:var(--m-h3)}.tl .d{font-size:var(--m-body)}
.kicker{font-size:var(--m-small)}
.tag,.chip,.sample,.badge,.case-note{font-size:var(--m-small)}
/* 메인: 자동차 소식 사진은 가로로 넓은 16:10, 잘라서 채움 */
.news-card img{width:100%;height:auto!important;aspect-ratio:16/10;object-fit:cover}
.news-card .t{font-size:var(--m-body);line-height:1.4;-webkit-line-clamp:3}
.news-card .d{font-size:var(--m-small)}
/* 견적이지 */
.result{padding:var(--m-card);gap:8px}.result .pr{font-size:30px}
/* 입력 칸(견적이지·견적엑스레이): 이름표를 왼쪽에, 선택 버튼을 오른쪽 한 줄에 두어 세로 길이를 줄인다 */
.calc .card.stack{gap:10px!important;padding:16px 14px}
.calc .card .grid{grid-template-columns:1fr!important;gap:10px!important}
.calc .card>.between{gap:6px 8px}.calc .card>.between .tag{font-size:12px;padding:4px 9px}
.calc label,.calc .lbl{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:6px 8px;font-size:var(--m-small);line-height:1.25}
.calc label>*,.calc .lbl>*{grid-column:2}
.calc select,.calc input[type=text]{height:38px;border-radius:10px;font-size:14px}
.calc .pills{gap:5px}
.calc .pill{flex:1 1 auto;height:36px;padding:0 6px;white-space:nowrap}
.calc .sw{width:28px;height:28px;flex:none}
.calc .pills[data-sw]{gap:10px;padding:4px 2px}
.xr-form .ap-pick{padding:8px 10px}.xr-form .ap-pick small{display:block;margin:2px 0 0;font-size:11.5px}
.xr-side{gap:10px}.xr-side>p:not(.ap-err){display:none}.xr-side h3{font-size:19px!important}
/* 버튼 높이·글자 크기 통일 */
.btn{height:var(--m-btn);font-size:var(--m-body);padding:0 20px}
/* 마지막 안내 영역(아이보리 둥근 상자) */
.cta{padding:var(--m-sec) 0!important}
.cta .wrap{gap:18px;padding:36px calc(var(--m-gutter) + 20px)}
.cta .wrap:before{inset:0 var(--m-gutter);border-radius:20px}
.cta .row{flex-direction:column;align-self:stretch}
.cta .row .btn{width:100%}
.card,.deal,.result,.ch-card{border-radius:20px}
.ch-go{height:var(--m-btn)!important;font-size:var(--m-body)!important;padding:0 18px!important}
.qwrite{height:var(--m-btn)!important;padding:0 18px!important;font-size:var(--m-body)!important}
.ch-card b{font-size:var(--m-body)}
/* 고수에게 묻다 */
.qsec{margin-bottom:36px!important}
.qsec h2{font-size:var(--m-h2)!important;margin-bottom:12px!important;padding-bottom:10px!important}
.qpick{margin-bottom:28px!important;gap:10px!important}
.qcardbtn{padding:var(--m-card)!important}
.qcardbtn b{font-size:var(--m-h3)!important}.qcardbtn span{font-size:var(--m-body)!important}.qcardbtn em{font-size:var(--m-small)!important}
.qc{font-size:var(--m-small)!important}
.qi summary{padding:12px 14px!important;font-size:var(--m-body)!important}
.qi .ans{padding:12px 14px!important}.qi .ans p,.qcard .body,.qcard .reply p{font-size:var(--m-body)!important}
.qcard{padding:var(--m-card)!important}.qcard h4{font-size:var(--m-h3)!important}
.qbar .s{font-size:var(--m-small)!important}
/* 푸터·하단 고정 바 */
.ft{padding:28px 0 calc(92px + env(safe-area-inset-bottom))}
.ft b{font-size:17px}

.qtop{bottom:calc(88px + env(safe-area-inset-bottom))!important;right:14px!important}
}

/* 숫자 카드(번호 + 소제목 + 설명): 휴대폰에서는 번호 옆에 소제목을 반드시 한 줄로 두고, 설명은 그 아래 전체 너비로 둔다.
   소제목 글자 크기는 fit.js 가 칸 너비에 맞춰 더 줄인다(14px 아래로는 내리지 않음). */
@media(max-width:700px){
.ncard{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:6px;align-items:center;align-content:start;padding:12px 14px!important}
.ncard>:first-child{grid-column:1;grid-row:1;line-height:1;flex:none}
.ncard>h3{grid-column:2;grid-row:1;margin:0;min-width:0;white-space:nowrap;overflow:hidden;font-size:16.5px!important;letter-spacing:-.4px}
.g4>.ncard>h3{font-size:15.5px!important}
.ncard>p{grid-column:1/-1;grid-row:2;align-self:start}
.ncard>.num{width:24px;height:24px;font-size:12.5px}
.ncard>.serif{min-width:0;text-align:center;font-size:18px!important}
.ncwrap{padding:12px!important;gap:10px}
.ncwrap>.grid{gap:10px!important}
}

@media(max-width:700px){.yt{border-radius:12px}.yt-cap{font-size:var(--m-small)}.yt-play,.yt-play svg{width:56px;height:56px}.yt-play{margin:-28px 0 0 -28px}}





/* ===== 고수의 픽(모바일) ===== */
@media(max-width:700px){
/* /picks 큰 카드(1열): 글자 크기는 PC와 같은 기준 */
@media(max-width:600px){.g3>.pick .pick-note.empty{display:none}.g3>.pick .pick-cond.wn:has(+.pick-note.empty){margin-bottom:8px}}
.pick .pr{font-size:22px}
.pick .pick-go{height:var(--m-btn)}
/* 메인 작은 가로형 카드: 왼쪽 작은 사진(위쪽 정렬), 오른쪽 [상품명] 금융사 / 차종 / 차량가 / 월 대여료 / 조건 */
.picks-compact{grid-template-columns:1fr!important;gap:10px!important}
.picks-compact .pick{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:10px;padding:10px;align-items:start}
.picks-compact .pick .pick-img{aspect-ratio:4/3;width:104px;height:auto;border-radius:8px;align-self:start}
.picks-compact .pick .in{padding:0;gap:3px}
.picks-compact .pick-opt,.picks-compact .pick-go{display:none}
.picks-compact .pick-name{font-size:15px;height:auto;max-height:2.7em;line-height:1.35}
.picks-compact .pick-car,.picks-compact .pick-cond{font-size:12.5px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip}   /* 작은 카드는 폭이 좁아 한 줄에 다 들어가지 않으므로 글자를 줄이는 대신 줄바꿈으로 내용을 모두 보여준다 */
.picks-compact .pick-note{font-size:12.5px;line-height:1.4;white-space:normal;overflow:visible;margin:0}
.picks-compact .pick-note.empty{display:none}
.picks-compact .pick .pr{font-size:17px;min-height:0;flex-wrap:wrap;column-gap:6px;overflow:visible}
.picks-compact .pick .pr .pick-pn{font-size:12px}
.picks-compact .pick .pr.end .pr-amt{font-size:15px}
.picks-compact.pn-below .pick .pr,.picks-compact .pick .pr{flex-direction:row}
.picks-compact .pick-ltd,.picks-compact .pick-end{left:6px;top:6px;padding:2px 7px;font-size:12px}
.picks-compact .pick.pick-more{display:flex;min-height:0;padding:22px;font-size:20px;justify-content:flex-start;align-items:center}
.picks-compact .pick.pick-more b{max-width:none}
}

@media(max-width:700px){.why{padding:var(--m-sec) 0}.why .why-h{font-size:var(--m-h3)!important}.why-item{padding:14px 16px;gap:12px;border-radius:14px}.why-item .num{width:30px;height:30px;font-size:12.5px}.why-item b{font-size:15.5px}.why-item p{font-size:var(--m-small)}.why-tbl table{font-size:13px;min-width:0}.why-tbl th,.why-tbl td{padding:10px 10px}.why-tbl tbody th{width:68px}.why-end{font-size:16px;padding:14px 16px}.band .band-k{font-size:15.5px}}
@media(max-width:700px){#ezFixed,#ezInit{padding:2px 0;line-height:1.65}#ezFixed .pill,#ezInit .pill{font-size:12.5px;flex:none}
/* 견적이지 모바일: 옵션·내장 색상은 알약 대신 체크 목록(한 줄에 하나, 긴 이름은 두 줄로 접힘) */
#ezOpt{display:flex;flex-direction:column;gap:4px}
#ezInt .pill{flex:1 1 auto;height:auto;min-height:36px;padding:6px 12px;white-space:normal;line-height:1.3;font-size:13px}
#ezOpt .pill{flex:none;height:auto;min-height:34px;padding:6px 10px 6px 32px;border-radius:10px;text-align:left;white-space:normal;line-height:1.35;font-size:13.5px;font-weight:500;position:relative;overflow:visible}
#ezOpt .pill:before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-8px;border:1.5px solid #B9C3CC;border-radius:4px;background:#fff}
#ezOpt .pill.on{background:var(--tint);border-color:var(--blue);color:var(--deep);font-weight:700}
#ezOpt .pill.on:before{background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 3px #fff}
/* 외장 색상: 동그라미를 작게 해 한 줄에 더 많이 */
#ezExt{gap:8px;padding:2px 0}#ezExt .sw{width:24px;height:24px;outline-offset:1.5px}
#ezExtName{font-size:12px}
/* 긴 안내 문장 */
#ezBody>p.muted{font-size:12.5px!important;line-height:1.55}
}
/* 아주 좁은 화면·큰 글자 설정: 하단 고정 바가 화면 밖으로 밀리지 않게 */
@media(max-width:380px){.calc label,.calc .lbl{grid-template-columns:64px minmax(0,1fr)}.calc .pills{gap:4px}.calc .pill{padding:0 4px}.xr-form .pill i{display:none}}
@media(max-width:380px){.mbar a{font-size:10px}.mbar a svg{width:20px;height:20px}}

/* 2026-10-16 견적엑스레이: 진행 4단계·검증 4항목은 모바일에서 1,2,3,4 세로로 (모바일만) */
@media(max-width:700px){.xr-page .g4{grid-template-columns:1fr!important}}
/* 고수의 픽 큰 카드: 모바일에서 세로 길이 줄이기 */
@media(max-width:600px){
.g3>.pick .pick-img{aspect-ratio:16/8}
.g3>.pick .in{padding:14px 16px 16px;gap:4px}
.g3>.pick .pick-name{height:auto;max-height:2.7em;font-size:16px}
.g3>.pick .pr{min-height:0;margin-top:2px;font-size:21px}
.g3>.pick .pick-go{margin-top:8px;height:42px}
}
/* 2026-10-16 회사소개 4페이지: 모바일 소제목 크기 축소 (모바일만) */
@media(max-width:700px){
.about-page h2{font-size:19px!important}
.about-page h2[style*="48px"]{font-size:24px!important}
.about-page .serif[style*="32px"]{font-size:18px!important}
.about-page .tl b{font-size:15.5px}
.about-page h3,.about-page .card h3{font-size:16.5px!important}
.why h2{font-size:19px!important}
}
/* 2026-10-16 메인 팝업: 모바일에서 화면의 2/3 크기로 */
@media(max-width:700px){
.pp-box{width:min(67vw,320px)}
.pp-slide,.pp-slide img{max-height:calc(67vh - 110px)}
.pp-foot{padding:8px 10px 10px;gap:6px}.pp-btn{height:36px;font-size:12px;white-space:nowrap;padding:0 6px}.pp-btn:first-child{flex:1.35}
.pp-nav{padding:6px 8px 0}.pp-arr{width:28px;height:28px;font-size:18px}
.pp-x{width:30px;height:30px;font-size:20px;top:8px;right:8px}
}
/* 2026-10-16 모바일 전용 문구·제목 굵기·대표 인사말 띠 */
@media(max-width:700px){
.m-only{display:inline}.pc-only{display:none}
.hm h1,.hm h1.hm-big{font-weight:800!important}
.band h1{font-weight:600!important}
.hm .hm-greet h3{font-size:15.5px!important;line-height:1.5!important;font-weight:700!important}
}