/* ============================================================
   하나로통운 홈페이지 — A안 v2 (3색 위계 + 카카오톡 상담)
   생성 20260725 / 적용 대상: index.html 만
   원칙: style.css 원본 무수정 · H태그/본문텍스트/URL/이미지 무수정
   색 위계 3단 — 오렌지(CTA 버튼) / 네이비(구조) / 틸·회색(배경·보조)
        + 카카오 노랑 #FEE500 (예외 1)
   롤백: index.html 의 이 파일 <link> 한 줄 제거
   ============================================================ */

:root{
  /* CTA 전용 오렌지 — 상한 #e0670f, 흰 글자 대비 확보 위해 어두운 쪽으로 */
  --a-cta:#d9620e;      --a-cta-d:#b8480a;     --a-cta-dd:#9c3d08;
  /* 구조 딥네이비 */
  --a-navy:#1a2b4a;     --a-navy-d:#132038;
  /* 신뢰 축 틸 (인증·인허가·해결사례·데이터) */
  --a-teal:#0f7d8c;     --a-teal-l:#5ec8d4;    --a-teal-bg:#eef6f7;  --a-teal-br:#cfe3e6;
  /* 보조 회색 */
  --a-slate:#5a6a80;    --a-line:#e3e8f0;
  --a-kko:#FEE500;      --a-kko-ink:#191919;
  --a-shadow:0 6px 22px rgba(15,27,48,.085);
}

/* ============================================================
   0. CTA 오렌지 — 여기 나열된 것만 오렌지다
      (견적문의 · 전화 · 카톡 · 지원/접수)
   ============================================================ */
.btn-o,.btn-b{background:linear-gradient(135deg,var(--a-cta),var(--a-cta-d));
  box-shadow:0 10px 30px rgba(184,72,10,.32)}
.btn-o:hover,.btn-b:hover{background:linear-gradient(135deg,var(--a-cta-d),var(--a-cta-dd));
  box-shadow:0 16px 40px rgba(184,72,10,.44)}
.hd-tel{background:linear-gradient(135deg,var(--a-cta),var(--a-cta-d));box-shadow:0 4px 14px rgba(184,72,10,.3)}
.hd-tel:hover{box-shadow:0 8px 22px rgba(184,72,10,.42)}
.cta-tel{background:linear-gradient(135deg,var(--a-cta),var(--a-cta-d));box-shadow:0 14px 42px rgba(184,72,10,.38)}
.cta-tel:hover{box-shadow:0 20px 54px rgba(184,72,10,.5)}
.fab-tel{background:linear-gradient(135deg,var(--a-cta),var(--a-cta-d))}
.fab-tel:hover{background:linear-gradient(135deg,var(--a-cta-d),var(--a-cta-dd))}
.mo-nav-tel{background:var(--a-cta)}
.gc-btn{background:var(--a-cta)} .gc-btn:hover{background:var(--a-cta-d)}
/* 오렌지 아웃라인 = CTA 성격 2차 버튼 (차량 있으신 차주님 = 지원하기) */
.btn-ol{background:#fff;color:var(--a-cta-d);border:1.5px solid var(--a-cta);
  box-shadow:0 4px 14px rgba(184,72,10,.14)}
.btn-ol:hover{background:var(--a-cta);color:#fff;transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(184,72,10,.34)}
/* 네이비 아웃라인 = CTA 아닌 2차 버튼 (유튜브 채널 보기) */
.btn-nl{background:#fff;color:var(--a-navy);border:1.5px solid var(--a-line);box-shadow:var(--a-shadow)}
.btn-nl:hover{background:var(--a-navy);color:#fff;border-color:var(--a-navy);transform:translateY(-3px)}

/* ---- 카카오톡 상담 (자리만 · 링크는 #kakao-준비중) ---- */
.btn-kko{background:var(--a-kko);color:var(--a-kko-ink);box-shadow:0 10px 30px rgba(254,229,0,.3)}
.btn-kko:hover{background:#ffef4a;color:var(--a-kko-ink);transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(254,229,0,.42)}
.btn-kko svg{width:19px;height:19px;fill:var(--a-kko-ink);flex:0 0 19px}
.cta-kko{margin-left:10px;font-size:23px;padding:21px 36px;background:var(--a-kko);color:var(--a-kko-ink);
  box-shadow:0 14px 42px rgba(254,229,0,.3)}
.cta-kko:hover{background:#ffef4a;box-shadow:0 20px 54px rgba(254,229,0,.42)}
.cta-kko svg{width:26px;height:26px;fill:var(--a-kko-ink);flex:0 0 26px}
@media(max-width:720px){.cta-kko{margin:10px 0 0;width:100%;font-size:20px;padding:18px 20px}}

/* ============================================================
   1. 오렌지 → 딥네이비 (아이콘 · 선 · 불릿 · 표강조 · 퀵메뉴)
   ============================================================ */
.eyebrow{color:var(--a-navy)}
.eyebrow::before{background:var(--a-navy)}
/* 어두운 섹션 위 eyebrow 는 딥네이비가 묻히므로 화이트 계열로 */
.hero .eyebrow,.map-txt .eyebrow,.sec-n .eyebrow{color:rgba(255,255,255,.66)}
.hero .eyebrow::before,.map-txt .eyebrow::before,.sec-n .eyebrow::before{background:rgba(255,255,255,.38)}
.gnb a::after{background:var(--a-navy)}
.case-hd .eyebrow{color:var(--a-navy)}
.case-hd .eyebrow::before{background:var(--a-navy)}
/* 접수폼 라벨의 인라인 오렌지(*클릭하여 주소검색) — 인라인이라 !important 필요 */
.fg label span[style]{color:var(--a-navy) !important}
.mega-col a:hover{color:var(--a-navy)}

/* 퀵메뉴 — 딥네이비 (흰 글자 대비 14:1)
   히어로(#0f1b30) → 퀵(밝은 네이비) → 인허가바(가장 어두움) 3단으로 벌려 밴드가 붙지 않게 한다 */
.quick{background:linear-gradient(100deg,#243c63,#2b4370 58%,#345080)}
.lic-bar{background:#0b1220;border-top-color:rgba(255,255,255,.05)}
.quick::before{background:radial-gradient(ellipse 42% 100% at 88% 50%,rgba(255,255,255,.10),transparent 62%)}
.quick-in .qi-ic{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.quick-in .qi:hover{background:rgba(255,255,255,.12)}

/* 히어로 — 배경 오렌지는 걷어내되 h1 "하나로" 워드마크는 브랜드명 예외로 오렌지 유지
   (어두운 네이비 위 텍스트라 CTA 버튼용 딥오렌지보다 밝은 원본 톤이 가독성이 높다) */
.hero h1 em{background:linear-gradient(100deg,#f47521 18%,#f2a71b 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-bg{background:
  radial-gradient(ellipse 70% 55% at 80% 25%,rgba(28,111,224,.30),transparent 62%),
  radial-gradient(ellipse 55% 45% at 12% 88%,rgba(26,43,74,.5),transparent 68%),
  linear-gradient(158deg,#0a1424 0%,#0f1b30 46%,#17325a 100%)}
.hero-glow.g2{background:#2a4266;opacity:.16}
.hs-n em{color:rgba(255,255,255,.72)}

/* 카드 제목 앞 세로바 · 불릿 */
.panel h3::before,.icard h3::before{background:var(--a-navy)}
.svc-list li::before,.svc-c.hl .svc-list li::before{background:var(--a-navy)}
/* 카드 목록은 점이 아니라 체크 표시로 둔다 (style.css 의 ::after 획이 보이도록) */
.icard li::before{background:rgba(184,72,10,.13)}
.icard li::after{border-color:var(--a-cta)}
.icard.neg li::before{background:rgba(15,27,48,.08)}
.icard.neg li::after{border-color:var(--gray-1)}
.svc-c::before{background:var(--a-navy)}
.svc-c.hl::before{background:linear-gradient(90deg,var(--a-navy),#3d5a8a)}
.svc-c.hl{border-color:#c9d3e2;box-shadow:0 10px 30px rgba(26,43,74,.14)}
.svc-c.hl:hover{box-shadow:0 24px 52px rgba(26,43,74,.2)}

/* 접수 현황 배지 */
.live-badge{background:var(--a-navy)}
.live-badge.o{background:var(--a-slate)}
.live-badge.b{background:var(--a-teal)}
.fg input:focus,.fg select:focus{border-color:var(--a-navy);box-shadow:0 0 0 3px rgba(26,43,74,.1)}

/* 지도 섹션 — 구조색 + 화이트 */
.map-txt h2 em{color:#fff}
.map-feat-ic{background:rgba(255,255,255,.1)}
.map-feat-ic svg{fill:#fff}
.map-feat:hover{border-color:rgba(255,255,255,.3)}
.map-sec .moving-truck{fill:var(--a-teal-l)}
.map-sec .city-lb[fill]{fill:var(--a-teal-l)}
#routeGrad stop:first-child{stop-color:var(--a-teal-l)}
#routeGrad stop:last-child{stop-color:rgba(255,255,255,.75)}
.city-dot.hq{fill:var(--a-teal-l)}
.city-ring{stroke:rgba(94,200,212,.6)}

/* 매물 — 표 강조 오렌지 제거 */
.j-tag{background:var(--a-navy)}
.j-tag.o{background:var(--a-slate)}
.j-tag.n{background:var(--a-navy)}
.j-pay{color:var(--a-navy)}
.jlist tbody tr:hover{background:#f2f5f9}
/* 배지 13색 → 3톤 (주체 / 조건 / 강조) */
.jb-own,.jb-ing,.jb-drv,.jb-job2{background:var(--a-navy)}
.jb-w5,.jb-easy,.jb-age,.jb-low,.jb-sa{background:var(--a-slate)}
.jb-rec,.jb-hot,.jb-ap,.jb-inc{background:var(--a-teal)}

/* 절감표 */
.tbl td:last-child{color:var(--a-navy)}
.tbl tr:last-child td{background:#eef2f7}
.tbl tr:last-child td:last-child{color:var(--a-teal)}
.sbox.hl .sbox-v{color:#fff}
.sbox .sbox-v[style]{color:var(--a-teal) !important}
.sbox .sbox-v[style] small{color:var(--a-teal) !important}

/* 후기 */
.rev:hover{border-color:var(--a-navy);box-shadow:0 12px 34px rgba(26,43,74,.14)}
.rev p b{background:var(--a-teal-bg)}
.rvs-v em{color:var(--a-teal-l)}

/* 계산기 */
.calc-opts label:hover{border-color:var(--a-navy);color:var(--a-navy)}
.calc-opts input:checked+label{background:linear-gradient(135deg,var(--a-navy),#2b4370);
  box-shadow:0 4px 14px rgba(26,43,74,.28)}
.calc-out::before{background:var(--a-teal);opacity:.26}
.calc-badge{background:rgba(94,200,212,.14);border-color:rgba(94,200,212,.4);color:var(--a-teal-l)}

/* 영상 */
.vid-tab:hover{border-color:var(--a-navy);color:var(--a-navy)}
.vid-tab.on{background:linear-gradient(135deg,var(--a-navy),#2b4370);box-shadow:0 4px 14px rgba(26,43,74,.28)}
.vid-play{background:rgba(255,255,255,.96);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.vid-play::after{border-color:transparent transparent transparent var(--a-navy)}
.sh-badge::before{border-color:transparent transparent transparent #fff}

/* 가이드 다운로드 */
.guide-l .eyebrow{color:rgba(255,255,255,.62)}
.guide-l .eyebrow::before{background:rgba(255,255,255,.35)}
.guide-l h2 em{color:#fff}
.guide::before{background:radial-gradient(ellipse 55% 80% at 82% 50%,rgba(15,125,140,.24),transparent 65%)}
.guide-card .gc-k{color:var(--a-navy)}
.gc-f input:focus{border-color:var(--a-navy);box-shadow:0 0 0 3px rgba(26,43,74,.12)}
.gc-agree input{accent-color:var(--a-navy)}

/* 거래처 */
.pt:hover{border-color:var(--a-navy);color:var(--a-navy)}
.pts.o{background:linear-gradient(135deg,var(--a-teal-bg),#fff);border-color:var(--a-teal-br)}
.pts.o .pts-v{color:var(--a-teal)}

/* 하단 CTA · 푸터 · 모바일 메뉴 */
.cta-in h2 em{color:#fff}
.cta-sec::before{background:radial-gradient(ellipse 60% 85% at 80% 50%,rgba(15,125,140,.2),transparent 62%),
  radial-gradient(ellipse 45% 65% at 12% 30%,rgba(28,111,224,.16),transparent 60%)}
.ft li a:hover{color:var(--a-teal-l)}
.mo-nav a.ml:hover{color:var(--a-teal-l)}

/* 서브페이지 공통 (확대 대비 · index 에는 해당 요소 없음) */
/* 서브 히어로 강조어 — index 히어로(오렌지 워드마크)와 구분되도록 틸로 */
.sub-hero h1 em{color:var(--a-teal-l)}
.crumb a:hover{color:var(--a-teal-l)}
.jf.on{background:var(--a-navy);border-color:var(--a-navy)}
.jf:hover{border-color:var(--a-navy)}
.fq summary::after{color:var(--a-navy)}
.notice-box{background:var(--a-teal-bg);border-color:var(--a-teal-br);border-left-color:var(--a-teal)}
.ptable .up{color:#c2410c}

/* ============================================================
   2. 틸 — 신뢰 축 전용 (인허가 · 해결사례 · 인증 · 데이터)
   ============================================================ */
.lic-chip svg{fill:var(--a-teal-l)}
.lic-chip.key{border-color:rgba(94,200,212,.5);background:rgba(94,200,212,.1)}
.lic-chip:hover{border-color:var(--a-teal-l);background:rgba(94,200,212,.14)}
.lic-more:hover{color:var(--a-teal-l)}

.case-col.sol h4{color:var(--a-teal)}
.case-col.sol h4 i{background:var(--a-teal)}
.case-col.sol b{color:var(--a-teal)}
.case-ck li::before{border-left-color:var(--a-teal);border-bottom-color:var(--a-teal)}
.stamp.ok{border-color:var(--a-teal);color:var(--a-teal)}

#cert{background:var(--navy-2)}
.cert{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.cert:hover{background:rgba(255,255,255,.15);border-color:rgba(94,200,212,.5);
  box-shadow:0 16px 36px rgba(0,0,0,.3)}
.cert img{box-shadow:0 8px 22px rgba(0,0,0,.4)}
.cert-t{color:#fff}
.cert-note{background:rgba(255,255,255,.07);border-left-color:var(--a-teal-l)}
#cert .eyebrow{color:var(--a-teal-l)}
#cert .eyebrow::before{background:var(--a-teal-l)}

/* ============================================================
   3. 섹션 리듬 (A안 v1 유지 · 연오렌지 → 연틸로 교체)
   ============================================================ */
#jiib{background:linear-gradient(180deg,#eaeff7 0%,var(--bg) 240px)}
#saving{background:#fff}
#saving .tbl{border-color:#d3dae5}
#review{background:var(--a-teal-bg);padding-top:84px !important}
#review .rev-marquee::before{background:linear-gradient(90deg,var(--a-teal-bg),transparent)}
#review .rev-marquee::after{background:linear-gradient(-90deg,var(--a-teal-bg),transparent)}
#partner .pt-marquee::before{background:linear-gradient(90deg,var(--bg),transparent)}
#partner .pt-marquee::after{background:linear-gradient(-90deg,var(--bg),transparent)}

/* ============================================================
   4. 카드 위계 (A안 v1 유지 · 강조바 오렌지 → 네이비)
   ============================================================ */
.panel,.svc-c,.icard,.rev,.step,.sbox,.pts,.j-card,
.tbl,.jlist,.ptable,.calc-panel,.fq{box-shadow:var(--a-shadow)}
.intake-in .panel:last-child,.calc-panel,.jlist{position:relative;overflow:hidden}
.intake-in .panel:last-child::before,.calc-panel::before,.jlist::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--a-navy),#3d5a8a);z-index:2}
.intake-in .panel:last-child,.calc-panel{box-shadow:0 10px 34px rgba(15,27,48,.11)}

/* ============================================================
   5. 예상 운임 결과 박스 (원본 CSS 부재 · 신규 · 틸 계열)
   ============================================================ */
.q-result{margin-top:16px;padding:18px;border:1px solid var(--gray-3);border-radius:14px;
  background:var(--bg);transition:.25s}
.q-result.on{background:#fff;border-color:var(--a-teal-br);box-shadow:0 8px 24px rgba(15,125,140,.13)}
.q-map{min-height:148px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px;margin-bottom:14px;border:1px dashed var(--gray-3);border-radius:10px;background:#fff;
  font-size:13.5px;line-height:1.75;color:var(--gray-2)}
.q-result.on .q-map{border-style:solid;border-color:var(--a-teal-br);background:var(--a-teal-bg);color:var(--gray-1)}
.q-info{display:block}
.q-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 2px;border-bottom:1px dashed var(--gray-3);font-size:14px}
.q-row dt{color:var(--gray-1);font-weight:600}
.q-row dd{color:var(--a-navy);font-weight:700;font-variant-numeric:tabular-nums}
.q-fare{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:15px 18px;border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#fff}
.q-fare span{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.72)}
.q-fare strong{font-size:25px;font-weight:900;letter-spacing:-.8px;color:var(--a-teal-l);
  font-variant-numeric:tabular-nums;line-height:1.1}
.q-note{margin-top:11px;font-size:12px;line-height:1.65;color:var(--gray-2)}
.q-note b{color:var(--gray-1);font-weight:700}
@media(max-width:720px){
  .q-result{padding:14px}
  .q-fare{padding:14px}
  .q-fare strong{font-size:22px}
}

/* ============================================================
   6. 서브페이지 확대 (jobs / owner / license / number / 404)
      20260725 · index 와 동일한 3색 위계를 적용
   ============================================================ */

/* ---- 서브 히어로 : 페이지 진입 신호 라인 + 대비 정리 ---- */
.sub-hero::before{background:radial-gradient(ellipse 60% 70% at 78% 40%,rgba(28,111,224,.24),transparent 62%)}
.sub-hero::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--a-cta) 0 16%,var(--a-teal) 16% 40%,rgba(255,255,255,.09) 40%)}
.sub-hero p{color:rgba(255,255,255,.74)}
.crumb{color:rgba(255,255,255,.52)}

/* ---- 표 위계 : 상단 네이비 바 + 그림자 ---- */
.jlist,.ptable{position:relative;overflow:hidden;box-shadow:var(--a-shadow)}
.jlist::before,.ptable::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--a-navy),#3d5a8a)}
.ptable th{background:var(--navy)}
.ptable tbody tr:hover{background:#f2f5f9}

/* ---- 카드 위계 : 정보카드 / 단계카드 / FAQ ---- */
.icard{border-top:3px solid var(--a-navy);box-shadow:var(--a-shadow)}
.step{border-left:3px solid var(--a-navy);box-shadow:var(--a-shadow)}
.step::before{color:var(--a-navy)}
.fq{box-shadow:var(--a-shadow);transition:.2s}
.fq:hover{border-color:#c9d3e2}
.fq[open]{border-color:var(--a-navy);box-shadow:0 8px 26px rgba(26,43,74,.13)}
.fq[open] summary{color:var(--a-navy)}

/* ---- owner.html 차종 카드(.fleet) : 원본 CSS 부재로 맨텍스트였던 영역 · 신규 ---- */
.fleet{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.fl{position:relative;overflow:hidden;background:#fff;border:1px solid var(--gray-3);border-radius:16px;
  padding:24px 18px;text-align:center;box-shadow:var(--a-shadow);transition:.26s}
.fl::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--a-navy)}
.fl:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(26,43,74,.17);border-color:transparent}
.fl-t{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.5px;margin-bottom:7px}
.fl-d{font-size:13.5px;color:var(--gray-1);line-height:1.6}
@media(max-width:1020px){.fleet{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.fleet{grid-template-columns:1fr 1fr;gap:10px}
  .fl{padding:18px 12px}.fl-t{font-size:16px}.fl-d{font-size:12.5px}}

/* ---- 404 : 자체 인라인 CSS 뒤에 로드되므로 여기서 팔레트를 덮는다 ---- */
body.p404{background:#0f1b30;color:#fff;min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:24px;text-align:center;word-break:keep-all;line-height:1.7}
body.p404 .code{color:var(--a-cta)}
body.p404 a.o{background:linear-gradient(135deg,var(--a-cta),var(--a-cta-d));color:#fff}
body.p404 a.o:hover{background:linear-gradient(135deg,var(--a-cta-d),var(--a-cta-dd))}
/* 404 는 스크롤이 없어 .fab.on 이 붙지 않는다 → 항상 보이게 */
body.p404 .fab-b{opacity:1;transform:none;pointer-events:auto}
/* FAQ 본문 안 인라인 링크색(--blue) — 인라인이라 !important 필요 */
.fq-body a[style]{color:var(--a-teal) !important;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   7. A안 v3 — 섹션 재편 (20260726)
      기사 1순위 / "실제 운송하는 회사" 증거를 위로
   ============================================================ */

/* ---- 업 명시 한 줄 (히어로 하단 인허가 바 안) ---- */
.biz-line-in{padding:15px 24px 3px;text-align:center}
.biz-line{font-size:14px;line-height:1.65;color:rgba(255,255,255,.72);letter-spacing:-.2px}
.biz-line strong{color:#fff;font-weight:800}
@media(max-width:720px){.biz-line-in{padding:13px 16px 2px}.biz-line{font-size:12.5px}}

/* ---- 거래처 섹션이 첫 콘텐츠 섹션 : 지도 섹션의 신뢰 근거 3개 흡수 ---- */
.ev-feats{margin-top:38px}
.ev-feats .map-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ev-feats .map-feat{background:#fff;border-color:var(--gray-3);box-shadow:var(--a-shadow)}
.ev-feats .map-feat:hover{background:#fff;border-color:var(--a-navy)}
.ev-feats .map-feat-ic{background:rgba(26,43,74,.08)}
.ev-feats .map-feat-ic svg{fill:var(--a-navy)}
.ev-feats .map-feat-t{color:var(--navy)}
.ev-feats .map-feat-d{color:var(--gray-1)}
@media(max-width:900px){.ev-feats{margin-top:28px}.ev-feats .map-feats{grid-template-columns:1fr}}

/* ---- 인증서 6장 축소 : 크게 나열하지 않고 한 줄로 ---- */
#cert .certs{grid-template-columns:repeat(6,1fr);gap:10px}
#cert .cert{padding:10px 8px 12px;border-radius:10px}
#cert .cert img{height:92px;object-fit:cover;object-position:top center;margin-bottom:8px;border-radius:6px}
#cert .cert-t{font-size:11.5px;line-height:1.45}
@media(max-width:900px){#cert .certs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){#cert .certs{gap:8px}#cert .cert img{height:70px}#cert .cert-t{font-size:10.5px}}

/* ---- 사옥 사진 3장을 인증 섹션에 흡수 (별도 섹션 제거) ---- */
#cert .office-sm{grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:30px}
#cert .office-sm .office-r{display:contents}
#cert .office-sm .of{aspect-ratio:4/3}
#cert .office-sm .of-lb{font-size:13px;padding:30px 14px 12px}
@media(max-width:720px){#cert .office-sm{grid-template-columns:1fr 1fr}
  #cert .office-sm .of:first-child{grid-column:1/-1;aspect-ratio:16/9}}

/* ---- 배차 사례 + 현장 영상 병합 ---- */
#cases{background:#fff}
#cases::before{opacity:.28}
.vid-wrap{margin-top:58px;padding-top:46px;border-top:1px dashed var(--gray-3)}
.vid-wrap .sec-hd{margin-bottom:34px}

/* ---- 운임 견적(화주용) 섹션 제목 ---- */
.intake .sec-hd{margin-bottom:34px}