/* ── 카로 모빌리티 공통 모바일 CSS ── */

/* PC: 모바일 전용 요소 숨김 */
.mobile-quick-nav  { display:none; }
#mobileBottomNav   { display:none; }
.mobile-top-strip  { display:none; }
.mobile-drawer     { display:none; }

@media(max-width:768px){

  /* ── 오버플로 방지 ── */
  html, body { overflow-x:hidden !important; max-width:100vw; }
  img { max-width:100%; height:auto; }

  /* ── AI 채팅·플로팅 버튼 숨김 ── */
  #chatWidget    { display:none !important; }
  #chatFab       { display:none !important; }
  .float-consult { display:none !important; }
  .float-cta     { display:none !important; }

  /* ── 헤더 숨김 ── */
  header { height:0 !important; overflow:hidden !important; border:none !important; box-shadow:none !important; }
  nav    { display:none !important; }
  .header-btns .btn-crm, .header-btns .btn-admin { display:none !important; }
  .mobile-menu-btn { display:block !important; }

  /* ── 모바일 드로어 (햄버거 메뉴) ── */
  .mobile-drawer { display:none; position:fixed; inset:0; z-index:2000; }
  .mobile-drawer.open { display:block; }
  .mobile-drawer-bg { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
  .mobile-drawer-panel { position:absolute; top:0; right:0; bottom:0; width:80%; max-width:300px; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; transform:translateX(100%); transition:transform 0.3s; box-shadow:-4px 0 20px rgba(0,0,0,0.15); display:flex; flex-direction:column; }
  .mobile-drawer-nav { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:24px; }
  .mobile-drawer.open .mobile-drawer-panel { transform:translateX(0); }
  .mobile-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f0f0; background:#0A1628; }
  .mobile-drawer-head span { color:#fff; font-size:15px; font-weight:700; }
  .mobile-drawer-close { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
  .mobile-drawer-nav a { display:flex; align-items:center; padding:14px 20px; font-size:15px; font-weight:500; color:#0a1628; text-decoration:none; border-bottom:1px solid #f5f5f5; }
  .mobile-drawer-nav .nav-section-title { padding:10px 20px 6px; font-size:11px; font-weight:700; color:#aaa; letter-spacing:1px; text-transform:uppercase; }
  .mobile-drawer-btns { padding:16px 20px; display:flex; gap:10px; }
  .mobile-drawer-btns a { flex:1; text-align:center; padding:10px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; }
  .m-crm { background:#f3f4f6; color:#0a1628; }
  .m-admin { background:#0a1628; color:#fff; }
  /* 드로어 SNS 1줄 (인덱스와 동일) */
  .mobile-drawer-sns { display:flex; gap:8px; padding:14px 16px; border-top:1px solid #f0f0f0; background:#fafafa; }
  .md-sns-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 4px; border-radius:10px; text-decoration:none; font-size:11px; font-weight:700; color:#fff; }
  .md-sns-item.md-ig { background:linear-gradient(135deg,#F58529 0%,#DD2A7B 50%,#8134AF 100%); }
  .md-sns-item.md-yt { background:#FF0000; }
  .md-sns-item.md-kk { background:#FEE500; color:#3A1D1D; }
  .md-sns-item.md-kk svg path { fill:#3A1D1D; }
  .md-sns-item.md-kk span { color:#3A1D1D; }
  .md-sns-item:active { transform:scale(0.96); }
  /* 드로어 하단 전화 버튼 */
  .mobile-drawer-btns .m-tel { flex:1; background:linear-gradient(135deg,#1E6FD9,#0A4FA8); color:#fff; padding:12px; text-align:center; border-radius:10px; font-weight:800; font-size:14px; text-decoration:none; letter-spacing:0.5px; }

  /* ── 모바일 상단 바 (로고 / 인기 차량 / 햄버거) ── */
  .mobile-top-strip {
    display:flex !important; position:fixed; top:0; left:0; right:0;
    z-index:1001; background:#fff; border-bottom:1px solid #f0f0f0;
    height:48px; align-items:center; padding:0 12px; gap:8px;
  }
  .mts-logo { flex-shrink:0; display:flex; align-items:center; text-decoration:none; }
  .mts-logo img { max-height:30px; max-width:90px; object-fit:contain; display:block; }
  #mtsLogoText { font-size:18px; font-weight:900; color:#480082; letter-spacing:1.5px; font-family:'Noto Sans KR',sans-serif; }
  .mts-rank { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 8px; background:#f4eafc; border:1px solid #d9c7ed; border-radius:18px; cursor:pointer; font-family:inherit; height:32px; overflow:hidden; text-decoration:none; }
  .mts-rank-icon { font-size:11px; flex-shrink:0; }
  .mts-rank-rank { font-size:11px; font-weight:900; color:#480082; flex-shrink:0; }
  .mts-rank-name { font-size:11px; font-weight:700; color:#1a2332; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mts-rank-chg { font-size:13px; font-weight:800; flex-shrink:0; color:#480082; }
  .mts-rank-chg.up { color:#dc2626; }
  .mts-rank-chg.down { color:#2563eb; }
  .mts-menu-btn { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:8px; cursor:pointer; padding:0; }
  .mts-menu-btn:active { background:#f3f4f6; }

  /* ── 모바일 퀵메뉴 바 (상단바 아래 위치) ── */
  .mobile-quick-nav {
    display:flex !important; position:fixed; top:48px; left:0; right:0;
    z-index:1000; background:#fff; border-bottom:2px solid #e5e7eb;
    height:44px; align-items:stretch;
  }
  .mobile-quick-nav-inner { display:flex !important; width:100%; align-items:stretch; }
  .mobile-quick-nav a {
    flex:1; display:flex !important; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:#374151;
    text-decoration:none; border-right:1px solid #f0f0f0; white-space:nowrap;
  }
  .mobile-quick-nav a:last-child { border-right:none; }

  /* ── 하단 고정 바 (얕은 노치 컷아웃 + 깔끔한 라인 아이콘) ── */
  #mobileBottomNav {
    display:flex !important; position:fixed; bottom:0; left:0; right:0;
    z-index:9900; background:transparent;
    border-top:0;
    height:77px; align-items:stretch;
    padding:7.5px 0;
    overflow:visible;
  }
  /* 바의 흰색 배경 + 노치를 SVG 의사요소로 그려서 children 안 가림 */
  #mobileBottomNav::before {
    content:'';
    position:absolute; inset:0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 77' preserveAspectRatio='none'><path d='M0 0 L170 0 Q 200 28 230 0 L400 0 L400 77 L0 77 Z' fill='white'/></svg>") no-repeat center / 100% 100%;
    filter:drop-shadow(0 -4px 14px rgba(0,0,0,0.10));
    z-index:0;
    pointer-events:none;
  }
  #mobileBottomNav > * { position:relative; z-index:1; }
  .mnav-item {
    flex:1; display:flex !important; flex-direction:column;
    align-items:center; justify-content:center;
    gap:4px; text-decoration:none;
    background:none; border:none; cursor:pointer;
    font-family:'Noto Sans KR',sans-serif; padding:0;
    position:relative;
  }
  /* 라인 스타일 아이콘 (배경/그림자 제거, 색상만) */
  .mnav-icon {
    width:28px; height:28px;
    background:transparent;
    display:flex; align-items:center; justify-content:center;
    box-shadow:none;
    position:relative;
  }
  .mnav-icon::before { display:none; }
  .mnav-icon i { font-size:20px; color:#0a1628; filter:none; }
  .mnav-icon.kakao i { color:#3A1D1D; }
  .mnav-icon.home i { color:#0a1628; }
  .mnav-icon.delivery i { color:#0ea5e9; }
  .mnav-icon.consult i { color:#C9A84C; }
  /* 전화는 phone 아이콘 — 첫 번째 항목 */
  .mnav-item:first-child .mnav-icon i { color:#1E6FD9; }
  /* 노치 안에 박힌 원형 빠른견적 버튼 (홈 아이콘 위에 자리잡음) */
  .mnav-item.mnav-home-wrap { position:relative; overflow:visible; }
  .mnav-quick-bubble {
    position:fixed !important;
    bottom:62px !important;
    left:50% !important;
    transform:translateX(-50%);
    width:54px !important; height:54px !important;
    padding:0 !important;
    background:linear-gradient(160deg,#a855f7 0%,#7c3aed 50%,#5b21b6 100%) !important;
    color:#fff !important;
    font-size:8.5px !important; font-weight:800; letter-spacing:-0.5px;
    border-radius:50% !important; border:3px solid #fff !important;
    cursor:pointer; font-family:inherit;
    display:flex !important; flex-direction:column;
    align-items:center; justify-content:center;
    box-shadow:
      0 8px 18px rgba(124,58,237,0.55),
      0 2px 6px rgba(0,0,0,0.18),
      inset 0 1.5px 2px rgba(255,255,255,0.50),
      inset 0 -2px 3px rgba(0,0,0,0.20);
    z-index:9999 !important;
    -webkit-appearance:none !important; appearance:none !important;
    animation:mnavBubble 2.2s ease-in-out infinite;
    text-indent:0;
    line-height:1;
  }
  .mnav-quick-bubble::before {
    content:'\f0e7';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:15px;
    margin-bottom:1px;
  }
  /* 홈 아이콘은 column 하단으로 이동 (버블과 안 겹치도록) */
  .mnav-item.mnav-home-wrap { justify-content:flex-end !important; padding-bottom:6px; }
  .mnav-item.mnav-home-wrap .mnav-icon.home { width:22px !important; height:22px !important; }
  .mnav-item.mnav-home-wrap .mnav-icon.home i { font-size:14px !important; }
  .mnav-item.mnav-home-wrap > .mnav-label { font-size:9px !important; }
  @keyframes mnavBubble {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50%     { transform:translateX(-50%) translateY(-3px); }
  }
  body.qm-open .mnav-quick-bubble { display:none !important; }
  .mnav-label { font-size:10px !important; font-weight:700; color:#374151; letter-spacing:-0.3px; }

  /* 견적 모달 열릴 때 하단바 숨김 */
  body.qm-open #mobileBottomNav { display:none !important; }

  /* ── 공통 레이아웃 ── */
  body { padding-bottom:77px !important; }
  .container { padding:0 16px !important; max-width:100% !important; }
  section { padding:32px 0 !important; }
  .section-title { font-size:clamp(20px,5vw,28px) !important; }

  /* ── 페이지 상단 오프셋 (top-strip 48 + quick-nav 44 = 92) ── */
  .page-hero { margin-top:92px !important; padding-top:20px !important; }
  .page-top  { margin-top:92px !important; }

  /* ── 폼 ── */
  input, select, textarea { font-size:16px !important; }

  /* ── ============================================
     cars.html 전용
     ============================================ ── */

  /* 브랜드 필터 sticky 위치 + 내부 패딩 */
  .brand-filter-wrap  { top:83px !important; padding:8px 12px !important; }
  .brand-filter-inner { padding:0 !important; max-width:100% !important; }

  /* 차량 섹션 내부 패딩 (32px → 16px 균등) */
  .cars-section       { padding:0 !important; }
  .cars-section-inner { padding:0 16px 80px !important; max-width:100% !important; }

  /* 브랜드 칩 가로 스크롤 */
  .brand-filter-row {
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px !important;
    padding-bottom:4px;
  }
  .brand-filter-row::-webkit-scrollbar { display:none; }
  .brand-row-label { display:none !important; }
  .brand-chip {
    flex-shrink:0 !important;
    min-width:0 !important;
    width:calc((100vw - 56px) / 7) !important;
    padding:6px 2px !important;
    border-radius:10px !important;
    gap:3px !important;
  }
  .brand-chip img,
  .brand-chip-img,
  .brand-chip-initial { width:26px !important; height:26px !important; }
  .brand-chip-name { font-size:9px !important; }

  /* 카테고리 필터 1줄 */
  .cat-filter {
    flex-wrap:nowrap !important;
    gap:4px !important; margin-bottom:12px !important;
  }
  .cat-filter .filter-btn {
    flex:1 !important; min-width:0 !important;
    padding:6px 2px !important; font-size:10px !important;
    border-radius:12px !important; white-space:nowrap !important;
    text-align:center;
  }

  /* 차량 카드 2열 컴팩트 */
  .cars-section { padding:0 12px 80px !important; }
  .cars-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .car-img {
    height:110px !important; background:#fff !important;
    padding:0 !important;
  }
  .car-img img { width:96% !important; height:96% !important; object-fit:contain !important; }
  .car-card-inner { padding:0 !important; }
  .car-info { padding:0 8px 10px !important; }
  .info-strip { padding:4px 6px !important; gap:3px !important; }
  .info-strip-logo  { width:18px !important; height:18px !important; }
  .info-strip-brand { font-size:8px !important; }
  .info-strip-chip  { font-size:7px !important; padding:2px 4px !important; white-space:nowrap; }
  .car-name { font-size:13px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .car-spec { font-size:10px !important; margin-bottom:6px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .car-price-box  { border-radius:6px !important; margin-bottom:5px !important; }
  .car-price-cell { padding:5px 2px !important; }
  .car-price-cell .plabel { font-size:8px !important; }
  .car-price-cell .pval   { font-size:11px !important; line-height:1.2 !important; }
  .car-price-cell .pval span { font-size:8px !important; }
  .car-btn { padding:8px !important; font-size:11px !important; border-radius:7px !important; }

  /* ── 3D 렌더·골드 애니메이션 비활성화 ── */
  .car-card,
  .car-card:hover          { transform:none !important; box-shadow:0 0 0 1.5px #e5e7eb !important; }
  .rb-svg-border3d         { display:none !important; }
  .shine-beam3d            { display:none !important; }
  .rb-path3d               { animation:none !important; }
  .car-card-inner          { transform-style:flat !important; perspective:none !important; }
  .car-img img             { transform:none !important; filter:none !important; transition:none !important; }

  /* ── 그리드 단열 (공통) ── */
  .why-grid, .benefits-grid { grid-template-columns:1fr !important; }

  /* ── 테이블 ── */
  table { font-size:11px; width:100%; }
  th, td { padding:7px 5px !important; }
}