/* ============================================================
   서브페이지 모바일 (≤900px) — best-effort 적응형
   Figma에 모바일 프레임이 없어 픽셀 퍼펙트 대상이 아니다(CLAUDE.md).
   1920 고정 좌표를 전부 흐름 배치로 되돌리고 세로로 쌓는다.
   ※ 이 파일의 모든 규칙은 아래 미디어쿼리 안에만 둘 것.
   ============================================================ */
@media (max-width: 900px) {

  .sub-zoom { width: 100%; zoom: 1 !important; }

  /* 표지 고정·덮기 구조는 모바일에서 해제 — 그냥 위에서 아래로 쌓는다 */
  .sf-cover { height: auto; }
  .sf-pin { position: static; height: auto; }
  .sf-pin > .sf { height: auto; }
  .sf-after { margin-top: 0; }

  .sf {
    width: 100%;
    height: auto !important;
    overflow: hidden;
    padding: 88px 20px 72px;
  }

  /* 절대 좌표를 쓰던 요소를 전부 흐름으로 되돌린다 */
  .sf h1, .sf h2, .sf h3, .sf p,
  .sf .sec-title,
  .co-stats, .co-marquee, .co-cards, .co-rail, .co-tl,
  .co-news-deck, .co-news-dots,
  .hw-chips, .hw-b1, .hw-brow, .hw-dev, .hw-tag, .hw-badge, .hw-pill, .hw-pick-row,
  .sv-item, .sv-shot, .sv-eng-card, .sv-cta-btns, .sv-steps-track, .sv-hero-txt {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: auto;
    max-width: 100%;
  }

  /* ---------------- 헤더 ---------------- */
  .site-header {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 72px;
    padding: 0 20px;
    gap: 0;
    justify-content: space-between;
  }
  .site-header .logo { width: 132px; height: 16px; }
  .header-right { gap: 0; }
  .site-nav { display: none; }
  .header-utils { gap: 14px; }
  .brochure span { font-size: 10px; }
  .brochure img { width: 14px; height: 14px; }
  .lang-switch { font-size: 10px; gap: 8px; }
  .brochure { gap: 5px; }

  /* ---------------- 공통 타이포 ---------------- */
  .sf h1, .co-hero-h, .co-connect-h, .hw-hero-h, .sv-hero-h, .sv-eng-h, .sv-cta-h {
    font-size: 26px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: center;
  }
  .sec-title, .co-values-h, .co-history-h, .co-news-h, .sv-list-h, .sv-steps-h, .hw-ecu-h, .hw-b1 .cap, .hw-brow .cap {
    font-size: 24px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  /* ---------------- COMPANY 1 ---------------- */
  .co-hero { padding: 120px 20px 64px; min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
  .co-hero-bg {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .75;
  }
  /* 데스크톱의 고정 높이(220)를 풀지 않으면 3장이 위로 넘쳐 헤드라인을 덮는다 */
  .co-stats { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; height: auto; margin-top: 36px; }
  .co-stat { width: 100%; height: auto; padding: 24px; gap: 8px; }
  .co-stat .n { font-size: 30px; }
  .co-stat .l { font-size: 14px; white-space: normal; }

  /* ---------------- COMPANY 2 ---------------- */
  .co-connect { padding: 64px 0; }
  .co-connect-h { padding: 0 20px; }
  .co-marquee { width: 100%; height: 190px; margin-top: 40px; overflow: hidden; }
  .co-track { gap: 12px; height: 190px; }
  .co-tile { width: 260px; height: 190px; }
  .co-tile img { width: auto !important; height: 100% !important; left: 50% !important; top: 0 !important; transform: translateX(-50%); }
  /* t1(여객·이동)·t5(현장·서비스)는 원본이 좁아 세로 기준으로는 좌우가 빈다 —
     카드 박스를 꽉 채우고(cover) 넘치는 만큼만 잘라, 어떤 화면 폭에서도 여백이 없다 */
  .co-tile.t1 img, .co-tile.t5 img {
    width: 100% !important; height: 100% !important;
    left: 0 !important; top: 0 !important;
    transform: none;
    object-fit: cover; object-position: center;
  }
  .co-tile .scrim { width: 100%; height: 120px; }
  /* 위 리셋에서 static이 된 것을 타일 안에서는 다시 절대 배치 */
  .co-tile h3, .co-tile .lbl-clone { position: absolute; left: 18px; bottom: 18px; font-size: 16px; }

  /* ---------------- COMPANY 3 — 아래 'COMPANY 모바일4' 블록에서 처리 ---------------- */

  /* ---------------- COMPANY 4 — 아래 'COMPANY 모바일5' 블록에서 처리 ---------------- */

  /* ---------------- COMPANY 5 ---------------- */
  .co-news-deck { display: block; margin-top: 28px; }
  .co-news-item { position: static; display: none; }
  .co-news-item.is-on { display: block; }
  .co-news-t { position: static; width: auto; height: auto; font-size: 20px; line-height: 30px; -webkit-line-clamp: 3; }
  .co-news-x { position: static; width: auto; height: auto; font-size: 14px; line-height: 22px; margin-top: 12px; -webkit-line-clamp: 3; }
  .co-news-fig { position: static; width: 100%; height: 200px; margin-top: 18px; }
  .co-news-d { position: static; font-size: 13px; margin-top: 12px; }
  .co-news-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
  .co-news .nav-arrow { width: 44px; height: 44px; top: auto; bottom: 16px; border-radius: 4px; }
  .co-news .nav-arrow img { width: 22px; height: 22px; }
  .co-news { position: relative; padding-bottom: 88px; }
  .co-news .nav-arrow.prev { left: 20px; }
  .co-news .nav-arrow.next { right: 20px; }

  /* ---------------- HARDWARE — Figma HARDWARE1~3_Mobile (2026-09-08 재구성) ---------------- */
  /* 표지 고정 + 두 번째 화면이 덮으며 올라오는 전환 — 하드웨어 페이지만 PC 구조를 되살린다 */
  #hwCover.sf-cover { height: calc(var(--vhz, 852px) * 2); }
  #hwCover .sf-pin { position: sticky; top: 0; height: var(--vhz, 852px); overflow: hidden; }
  #hwCover .sf-pin > .sf { height: 100% !important; }
  .hw-ecu.sf-after { margin-top: calc(var(--vhz, 852px) * -1); position: relative; z-index: 1; }

  /* ── HARDWARE1_Mobile: 표지 (--mh = 화면높이/852, Figma y 그대로) ── */
  .hw-hero { --mh: calc(var(--vhz, 852px) / 852); padding: 0; text-align: center; position: relative; }
  .sf .hw-hero-h {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: calc(var(--mh) * 228);
    margin: 0; width: max-content;
    font-size: 28px !important; line-height: 1.2 !important;
  }
  /* ⚠ PC 타원 3종은 반드시 숨긴다 — 남겨 두면 모바일 원 위에 겹쳐 표지가 통째로 깨진다
     (2026-09-08 실사고: 이 줄이 리라이트에서 빠져 PC 타원이 표지에 그려졌음) */
  .hw-ell, .hw-ell.e912, .hw-ell.e594, .hw-ell.e394 { display: none !important; }
  /* 하단 동심원 — Figma 통짜 SVG. 원·칩은 bottom 기준으로 붙인다(PC 표지와 같은 규칙) —
     화면 높이가 852와 달라도 원과 칩의 상대 위치가 그대로 유지된다 */
  .hw-hero::after {
    content: ''; position: absolute;
    left: -39.5px; bottom: -236.09px;
    width: 473.086px; height: 473.086px;
    background: url(../assets/Drivelanding_img/hw1m-circles.svg) no-repeat 0 0 / 100% 100%;
    pointer-events: none;
  }
  /* 칩 6개 — Figma 좌표·크기 고정 (852 프레임 bottom 기준 환산) */
  .hw-chips { display: contents; }
  .hw-chip {
    position: absolute !important; z-index: 2;
    height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px;
    background: rgba(66, 132, 255, .1);
    -webkit-backdrop-filter: blur(7.6px);
    backdrop-filter: blur(7.6px);
    font-size: 16px; font-weight: 600; color: #2b75ff; white-space: nowrap;
  }
  .hw-chips.rowA .hw-chip:nth-child(1) { left: 63px;  bottom: 128px; width: 107px; }  /* 사고 시 상태 (63,680) */
  .hw-chips.rowA .hw-chip:nth-child(2) { left: 248px; bottom: 159px; width: 103px; }  /* 탄소 배출량 (248,649) */
  .hw-chips.rowB .hw-chip:nth-child(1) { left: 177px; bottom: 211px; width: 123px; }  /* 고장 관리/예측 (177,597) */
  .hw-chips.rowB .hw-chip:nth-child(2) { left: 234px; bottom: 316px; width: 90px; }   /* 정차 유무 (234,492) */
  .hw-chips.rowC .hw-chip:nth-child(1) { left: 43px;  bottom: 255px; width: 103px; }  /* 연료 소모량 (43,553) */
  .hw-chips.rowC .hw-chip:nth-child(2) { left: 195px; bottom: 86px;  width: 90px; }   /* 안전 운전 (195,722) */
  /* 영문은 낱말이 길어 고정 폭을 넘을 수 있다 — 폭을 풀고 좌우 15px 패딩.
     우측 칩(탄소 배출량)은 화면 우측 패딩(24px)을 넘지 않게 right 기준으로 */
  html[lang="en"] .hw-chip { width: auto !important; padding: 0 15px; }
  html[lang="en"] .hw-chips.rowA .hw-chip:nth-child(2) { left: auto; right: 24px; }

  /* ── HARDWARE2_Mobile: 프레임(393x924) 좌표 그대로 절대 배치 ── */
  .hw-ecu { padding: 0; display: block; background: #f7f8fa; height: 924px !important; position: relative; }
  .sf .hw-ecu-h {
    position: absolute; left: 24px; top: 120px; margin: 0;
    font-size: 24px !important; line-height: normal !important;
  }
  .sf .hw-ecu-d {
    position: absolute; left: 24px; top: 210px; margin: 0;
    width: 305px; font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(2, 2, 2, .3);
  }
  .hw-blue {
    position: absolute; left: 0; right: auto; top: 378px; bottom: auto;
    width: 100%; height: 546px;
  }
  /* 기기 목업 — PC 좌표계(330x437)를 0.71배: Figma 234.9x310.3 at (79, 516.8) */
  .hw-ecu .hw-dev {
    display: block; position: absolute;
    left: 79px; top: 517px; bottom: auto; margin: 0;
    width: 330.852px; height: 437px;
    transform: scale(.71); transform-origin: top left;
  }
  /* 태그·배지·알림 — Figma 프레임 좌표 */
  /* 상단 전역 리셋이 static으로 되돌리므로 absolute를 다시 선언해야 한다 */
  .hw-tag { position: absolute; display: flex; width: 100px; height: 39px; font-size: 14px; }
  .hw-tag.t-lte { left: 13px;  top: 614px; }
  .hw-tag.t-obd { left: 52px;  top: 668px; }
  .hw-tag.t-ecu { left: 237px; top: 491px; }
  .hw-badge { position: absolute; display: flex; left: 300px; top: 479px; width: 30px; height: 30px; font-size: 19px; }
  .hw-pill { position: absolute; display: inline-flex; height: 33px; padding: 0 12px 0 11.7px; font-size: 12px; }
  .hw-pill .ic { width: 13.05px; height: 13.05px; margin-right: 2.6px; }
  .hw-pill .ic img { width: 1.9px; height: 8.6px; }
  .hw-pill.p-crash { left: 66px;  top: 420px; }
  .hw-pill.p-accel { left: 24px;  top: 462px; }
  .hw-pill.p-fault { left: 222px; top: 849px; }
  /* 진짜 알림처럼: 진입하자마자, 세 개가 뚜렷한 시간차를 두고 아래에서 서서히 떠오른다 (대표 지시).
     ⚠ 상단 전역 리셋이 transform:none으로 덮어 페이드만 남았었다 — 여기서 모션을 다시 선언 */
  .hw-pill {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .85s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .15s;
  }
  .hw-ecu.is-in .hw-pill { opacity: 1; transform: translateY(0); }
  .hw-pill.p-accel { transition-delay: .5s; }
  .hw-pill.p-fault { transition-delay: .85s; }
  /* Figma 고정 폭 (아이콘+글자 좌측정렬 유지) */
  .hw-pill.p-crash { width: 85.46px; }
  .hw-pill.p-accel { width: 95.46px; }
  .hw-pill.p-fault { width: 143.46px; }
  html[lang="en"] .hw-pill { width: auto !important; }

  /* ── HARDWARE3_Mobile: 카드 3장 345x220 세로 스택 ── */
  .hw-bento { padding: 140px 24px 0; height: auto !important; }   /* 파란 판 ↔ 첫 카드 140px (hw-pick 상단과 동일, 대표 지시) */
  .hw-b1, .hw-b2, .hw-b3 {
    position: relative; width: 100%; height: 220px;
    margin: 0; overflow: hidden;
  }
  .hw-b1 { margin-top: 0; }
  .hw-b2 { margin-top: 12px; }
  .hw-b3 { margin-top: 12px; }
  .hw-brow { display: block; margin-top: 0; gap: 0; height: auto; }   /* PC 고정 높이(560) 해제 — 카드 아래 유령 공간 제거 */
  .hw-bento .cap,
  .hw-b1 .cap, .hw-brow .cap {
    position: absolute !important; left: 22px !important; top: 20px !important; bottom: auto !important;
    margin: 0;
    font-size: 18px !important; line-height: 21px !important; white-space: normal !important;
  }
  /* 카드1 — 브라우저 목업: PC(838x438, 테두리 19)를 0.3718배 */
  .hw-b1 .scr {
    left: 71px; top: 87px;
    transform: scale(.3718); transform-origin: top left;
  }
  /* 카드2 — 기기 0.4241배 + 체크 아이콘 + 흰 선 */
  .hw-b2 .cap { width: 70px; }   /* Figma: '누구나/5초만에/쉬운 설치' 3줄 */
  .hw-b2 .ico { left: 266px; right: auto; top: 13px; width: 42.8px; height: 42.8px; }
  .hw-b2 .hw-dev {
    display: block; position: absolute;
    left: 182px; top: -11px; margin: 0;
    width: 330.095px; height: 437px;
    transform: scale(.4241); transform-origin: top left;
  }
  .hw-b2 .line { display: block; left: 249.5px; top: 163px; width: 5px; height: 57px; }
  /* 카드3 — 차트 0.4655배(217.8,21) + 점수 카드 0.574배(156,124) */
  .hw-b3 .wid { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  .hw-b3 .chart {
    left: 217.8px; top: 21px;
    transform: scale(.4655); transform-origin: top left;
  }
  .hw-b3 .score {
    left: 156px; top: 124px;
    height: 130.2px; padding: 16px 16.224px;
    transform: scale(.574); transform-origin: top left;
  }
  /* 마지막 카드 ↔ 다음 페이지 타이틀 간격 140px (대표 지시) */
  .hw-pick { padding-top: 140px; }

  /* HARDWARE 4 — 두 카드를 세로로 쌓고 내부는 전부 흐름 배치로 */

  .hw-pick-h { font-size: 24px !important; line-height: 1.35 !important; white-space: normal !important; }
  .hw-pick-row { position: static; width: auto; height: auto; flex-direction: column; gap: 16px; margin-top: 28px; }
  .hw-pick-card { width: 100%; height: auto; padding-bottom: 28px; }
  .hw-pick-card .top { position: relative; width: 100%; height: auto; }
  .hw-pick-card .top > img { width: 100%; height: auto; }
  .hw-pick-card .top.obd { height: 201px; }
  .hw-pick-card .top.obd .hw-dev {
    position: absolute;
    left: 50%; margin-left: -165px; top: 8px; bottom: auto;
    width: 330.852px; height: 437px;
    transform: scale(.42); transform-origin: top center;
  }
  .hw-pick-card .top.obd .wire { display: none; }
  .hw-pick-card .name { position: static; margin: 20px 20px 0; font-size: 22px; white-space: normal; }
  .hw-pick-card .who,
  .hw-pick-card:nth-child(2) .who { position: static; width: auto; margin: 10px 20px 0; font-size: 14px; line-height: 22px; }
  .hw-pick-card .blk,
  .hw-pick-card .blk.where,
  .hw-pick-card .blk.data.d-gps,
  .hw-pick-card .blk.data.d-obd { position: static; width: auto; margin: 24px 20px 0; gap: 10px; }
  .hw-pick-card .lbl { font-size: 13px; line-height: 18px; }
  .hw-pick-card .txt { font-size: 14px; line-height: 22px; }
  .hw-pick-card .blk.data ul { width: 100%; gap: 12px; }
  .hw-pick-card .blk.data li { font-size: 14px; line-height: 22px; gap: 10px; white-space: normal; align-items: flex-start; }
  .hw-pick-card .blk.data li img { width: 17px; height: 12px; margin-top: 5px; }

  /* ---------------- SERVICE ---------------- */
  /* ── SERVICE 표지: 화면에 꽉 차게 + 타이틀 세로 중앙 (대표 지시) ── */
  .sv-hero {
    position: relative;
    height: var(--vhz, 852px) !important;
    padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  /* 배경 사진은 비율 유지한 채 화면을 덮는다 */
  .sv-hero-ph { position: absolute; inset: 0; }
  .sv-hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .sv-hero-scrim { position: absolute; inset: 0; }
  .sv-hero-txt { position: relative; transform: none; margin: 0; gap: 14px; width: 100%; z-index: 2; }
  .sv-hero-d { font-size: 15px; white-space: normal; text-align: center; padding: 0 24px; }

  /* ── 서비스2_모바일: 프레임(393x852) 좌표 그대로 ── */
  .sv-engine { position: relative; height: 768px !important; padding: 0; background: #000; }   /* 밴드 끝(768)에서 끊는다 */
  .sf .sv-eng-h {
    position: absolute; left: 50%; top: 120px; transform: translateX(-50%);
    width: 240px; margin: 0;
    font-size: 24px !important; line-height: normal !important; text-align: center;
  }
  /* 배경 사진 3줄 — PC와 같은 사진(sv2-c1~c3)을 가로 640x150 밴드로 */
  .sv-eng-col {
    display: block; position: absolute;
    left: -123px; top: auto; width: 640px; height: 150px;
    overflow: hidden; border-radius: 0;
  }
  /* PC의 열별 크롭(.c1 img 등, 특이도 0,2,1)이 이겨서 사진이 밴드 밖으로 나가 있었다 —
     같은 특이도로 밴드를 꽉 채우게 덮어쓴다 */
  .sv-eng-col img,
  .sv-eng-col.c1 img, .sv-eng-col.c2 img, .sv-eng-col.c3 img {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center;
    opacity: .55;   /* PC의 .3은 밝은 화면용 — 좁은 밴드에서는 사진이 안 보인다 (Figma 밝기 기준) */
  }
  .sv-eng-col .fade { display: none; }
  /* PC의 열 좌표(left 0/640/1280, 특이도 동급·후순위)가 이겨서 2·3번 밴드가 화면 밖에 있었다 */
  .sv-eng-col.c1 { left: -123px; top: 318px; }
  .sv-eng-col.c2 { left: -123px; top: 468px; }
  .sv-eng-col.c3 { left: -123px; top: 618px; }
  /* 반투명 카드 3장 — Figma 좌표 (274x107) */
  .sv-eng-card {
    position: absolute; width: 274px; min-height: 107px; height: auto;
    margin: 0; padding: 26px 23.5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(7.6px);
    backdrop-filter: blur(7.6px);
    text-align: center;
  }
  .sv-eng-card.k1 { left: 24px; top: 339px; }
  .sv-eng-card.k2 { left: 95px; top: 489px; }
  .sv-eng-card.k3 { left: 24px; top: 637px; }
  /* 영문은 상세가 두 줄이라 카드가 자란다 — 밴드도 167px로 늘리고
     카드는 밴드 세로 중앙에 앵커해 상하 여백이 항상 균등하다 (대표 지시) */
  html[lang="en"] .sv-engine { height: 819px !important; }
  html[lang="en"] .sv-eng-col { height: 167px; }
  html[lang="en"] .sv-eng-col.c2 { top: 485px; }
  html[lang="en"] .sv-eng-col.c3 { top: 652px; }
  html[lang="en"] .sv-eng-card { transform: translateY(-50%); }
  html[lang="en"] .sv-eng-card.k1 { top: 401.5px; }
  html[lang="en"] .sv-eng-card.k2 { top: 568.5px; }
  html[lang="en"] .sv-eng-card.k3 { top: 735.5px; }
  .sv-eng-card .n { font-size: 22px; }
  .sv-eng-card .l { width: auto; font-size: 14px; margin-top: 12px; }

  .sv-list { padding: 120px 20px 0; }
  .sv-list-d { font-size: 15px; line-height: 24px; white-space: normal; text-align: left; margin-top: 12px; }
  /* 사진: radius 5 클립, 상세설명 ↔ 사진 간격 40px (대표 지시) */
  .sv-shot { width: 100%; height: 180px; margin-top: 40px; border-radius: 5px; overflow: hidden; }
  .sv-item { width: 100%; align-items: flex-start !important; text-align: left !important; gap: 12px; margin-top: 40px; }
  .sv-item h3, .sv-item p { text-align: left !important; }
  .sv-item h3 { font-size: 26px; }
  .sv-item p { font-size: 14px; line-height: 22px; }

  .sv-steps { padding: 120px 0 64px; display: flex; flex-direction: column; }
  .sv-steps-h { order: 0; }
  .sv-steps-d { order: 1; }
  .sv-steps-track { order: 2; }
  .sv-steps-h, .sv-steps-d { padding: 0 20px; }
  .sv-steps-d { font-size: 15px; line-height: 24px; margin-top: 12px; }
  .sv-steps-mask { display: none; }
  .sv-steps .nav-arrow { display: none; }
  .sv-steps-track {
    display: flex; gap: 12px; height: auto;
    margin-top: 28px; padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    scroll-snap-type: x mandatory;
  }
  .sv-step { width: 240px; height: 420px; padding: 0 20px 28px; scroll-snap-align: center; }
  .sv-step .glow { display: none; }
  .sv-step .no { position: absolute; left: 20px; top: 210px; width: auto; font-size: 44px; letter-spacing: -1.8px; }
  .sv-step .tx { width: 200px; gap: 16px; }
  .sv-step .tx h3 { font-size: 20px; }
  .sv-step .tx p { font-size: 13px; }

  .sv-cta { padding: 72px 20px; }
  .sv-glow { display: none; }
  .sv-cta { background: radial-gradient(120% 60% at 50% 0%, #123a86 0%, #000 70%); }
  .sv-cta-d { font-size: 15px; white-space: normal; text-align: center; margin-top: 12px; }
  .sv-cta-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .sv-cta-btns .btn { width: 100%; font-size: 16px; padding: 14px 20px; }

  /* ---------------- 푸터 ---------------- */
  .sub-footer { height: auto; padding: 36px 20px 44px; }
  .sub-footer .ft-inner {
    position: static;
    width: 100%;
    flex-direction: column-reverse;
    gap: 28px;
  }
  .ft-ways { gap: 8px; }          /* "편하신 방법으로…" ↔ 이메일 간격 (메인 홈과 동일) */
  .ft-ways-h { width: auto; }
  .ft-legal { font-size: 12px; line-height: 18px; white-space: normal; }
  .ft-links { flex-wrap: wrap; }

  /* ================= SOLUTION ================= */
  /* ── SOLUTION_mobile 표지: 화면 꽉 참 + Figma 좌표 ── */
  .so-hero {
    position: relative;
    height: var(--vhz, 852px) !important;
    padding: 0; overflow: hidden;
  }
  /* 지평선 글로우 — PC svg(1038.9 폭)를 0.8757배: Figma (-258.4, 594) 909.78 폭 */
  .so-eclipse {
    display: block; position: absolute;
    left: -258.43px; top: 364.3px; bottom: auto;   /* 594 - 캔버스 위 필터 여백(262.3*0.8757) */
    width: 909.776px; height: 1173.66px;
  }
  .sf .so-hero-h {
    position: absolute;
    left: 50%; top: 284px; transform: translateX(-50%);
    width: max-content; margin: 0;
    font-size: 28px !important; line-height: 1.2 !important; white-space: nowrap !important;
    text-align: center;
  }
  .sf .so-hero-d {
    position: absolute;
    left: 24px; right: 24px; top: 381px;
    width: auto; margin: 0;
    font-size: 14px; line-height: 20px; text-align: center;
  }

  .so-gap { padding: 120px 20px 0; }
  .so-gap-h { position: static; transform: none; font-size: 24px !important; white-space: normal !important; }
  .so-gap-c, .so-gap-c.c1, .so-gap-c.c2, .so-gap-c.c3 {
    position: static; left: auto; top: auto; width: auto;
    padding: 28px 22px; gap: 14px; margin-top: 14px;
  }
  .so-gap-c:first-of-type { margin-top: 32px; }
  .so-gap-c h3 { font-size: 18px; }
  .so-gap-c p, .so-gap-c.c3 p { width: auto; font-size: 14px; line-height: 22px; }

  /* 비교표 — 세 열 비율만 줄여 그대로 보여준다 */
  /* ── SOLUTION2_mobile 비교표: 프레임(393x866) 좌표 그대로 ── */
  .so-cmp { position: relative; height: 786px !important; padding: 0; }   /* 표 끝(826)에서 끊는다 */
  .sf .so-cmp-h {
    position: absolute; left: 24px; top: 120px; margin: 0;
    font-size: 24px !important; line-height: normal !important; white-space: normal !important;
  }
  .so-cmp-h .cmp-br { display: none; }   /* 모바일은 2줄 (운행부터 / 차량 관리까지 한 번에) */
  .so-cmp-grid { display: contents; }
  .so-cmp-label {
    position: absolute; left: 24px; top: 268px; width: 80px;
    display: block;
  }
  /* PC 규칙이 column 방향이라 justify-content가 세로축 — center로 둬야 세로 가운데 정렬된다 */
  .so-cmp-label .r, .so-cmp-label .r:nth-child(even) {
    height: 64.75px; padding: 0 10px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    font-size: 13px; line-height: 16px; white-space: normal; word-break: keep-all;
  }
  .cmb { display: inline; }               /* Figma 지정 지점에서 2줄 */
  /* 영문 라벨은 낱말이 길어 12px로 줄이고 자연 줄바꿈 (잘림 방지) */
  html[lang="en"] .so-cmp-label .r { word-break: normal; font-size: 12px; line-height: 15px; }
  .so-cmp-head.rival {
    position: absolute; left: 104px; top: 218px; width: 127px; height: 50px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }
  .so-cmp-body.rival {
    position: absolute; left: 104px; top: 268px; width: 127px; height: auto;
    display: block;
  }
  .so-cmp-body.rival .r {
    min-height: 0; height: 64.75px; padding: 0 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 17px; white-space: normal; word-break: keep-all; text-align: center;
  }
  .so-cmp-ours {
    position: absolute; left: 229px; top: 218px; width: 140px;
    display: block;
  }
  .so-cmp-ours .head { height: 50px; font-size: 14px; }
  .so-cmp-ours .body { height: auto; display: block; }
  .so-cmp-ours .body .r {
    min-height: 0; height: 64.75px; padding: 0 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  .so-cmp-ours .body .r b { font-size: 14px; line-height: 17px; }
  .so-cmp-ours .body .r i { font-size: 12px; line-height: 14px; white-space: normal; text-align: center; word-break: keep-all; }

  /* ── SOLUTION4_mobile: 프레임(393x1154) 좌표 그대로 ── */
  .so-opt { position: relative; height: 1020px !important; padding: 0; background: #000; }   /* 텍스트 끝 기준 — 다음 제목까지 131px */
  /* 파란 밴드 (y 133~411) — 사진 대신 Figma의 파란 판 + 키워드 마퀴 */
  .so-band {
    position: absolute; left: 0; top: 133px; width: 100%; height: 278px;
    transform: none; overflow: hidden;
  }
  .so-band img { width: 100%; height: 100%; object-fit: cover; }
  .sf .so-opt-h {
    position: absolute; left: 50%; top: 180px; transform: translateX(-50%);
    width: max-content; margin: 0; padding: 0;
    font-size: 24px !important; line-height: normal !important; white-space: nowrap !important;
  }
  /* 영문 제목은 화면보다 길어 2줄로 접는다 */
  html[lang="en"] .sf .so-opt-h {
    white-space: normal !important; width: 340px; text-align: center; word-break: keep-all;
  }
  html[lang="en"] .sf .so-hero-h,
  html[lang="en"] .sf .so-cmp-h { white-space: normal !important; }
  html[lang="en"] .sf .so-hero-h { width: 340px; }
  /* 키워드 두 줄 마퀴 (js/solution.js) — Figma 태그 140x46, 간격 20 */
  .so-opt-tags { display: block; padding: 0; }
  .so-opt-row {
    display: flex; gap: 20px;
    position: absolute; left: 0; width: max-content;
    will-change: transform;
  }
  .so-opt-row.r1 { top: 249px; }
  .so-opt-row.r2 { top: 309px; }
  .so-tag, .so-tag.t1, .so-tag.t2, .so-tag.t3, .so-tag.t4, .so-tag.t5, .so-tag.t6 {
    position: static; left: auto; top: auto;
    width: 140px; height: 46px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; flex-shrink: 0;
    font-size: 16px;
  }
  .sf .so-opt-h2 {
    position: absolute; left: 50%; top: 472px; transform: translateX(-50%);
    width: 200px; margin: 0; padding: 0;
    font-size: 24px !important; line-height: 29px !important; white-space: normal !important;
    text-align: center; word-break: keep-all;
  }
  .so-opt-old {
    position: absolute; left: 24px; right: 24px; top: 630px;
    width: auto; height: auto; padding: 0; margin: 0;
    display: block;
  }
  .so-opt-old .t { font-size: 24px; text-align: center; }
  .so-opt-old .d { height: auto; margin-top: 38px; display: block; }
  .so-opt-old .a { font-size: 16px; text-align: center; }
  .so-opt-old .b { margin-top: 16px; font-size: 12px; line-height: 14px; white-space: normal; text-align: center; }
  /* 지평선 글로우 + 호 — PC(글로우 832 / 호 2276, 둘 다 중앙정렬)를 0.30492배.
     둘을 같은 박스로 묶어 왼쪽 고정하면 글로우가 왼쪽으로 쏠린다 — 각자 중앙정렬로 축소 */
  .so-opt-glow {
    display: block; position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 830px; width: 253.7px; height: auto; margin: 0;
  }
  .so-opt-arc {
    display: block; position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 832.1px; width: 694px; height: auto;
  }
  .sf .so-opt-brand {
    position: absolute; left: 0; top: 872px; width: 100%;
    margin: 0; text-align: center;
    font-size: 28px;
  }
  .so-opt-new {
    position: absolute; left: 0; top: 946px; width: 100%;
    height: auto; padding: 0 24px; margin: 0;
    display: block; text-align: center;
  }
  .so-opt-new .a { font-size: 16px; }
  .so-opt-new .b { margin-top: 16px; font-size: 12px; line-height: 14px; white-space: normal; }

  /* ── SOLUTION5_mobile: 프레임(393x852) 좌표 그대로 ── */
  .so-how { position: relative; height: 641px !important; padding: 0; }   /* 카드 끝(641)에서 자름 — 아래 간격은 so-score가 잡는다 */
  .so-how-h { position: absolute; left: 24px; top: 120px; width: auto; margin: 0; }
  .so-how-h .a {
    position: static; width: 186px;
    font-size: 20px; line-height: 24px; white-space: normal; word-break: keep-all;
  }
  .so-how-h .b {
    position: absolute; left: 0; top: 80px;
    width: 200px;
    font-size: 24px; line-height: 29px; white-space: normal; word-break: keep-all;
  }
  .so-how-c, .so-how-c.old, .so-how-c.ours {
    position: absolute; margin: 0;
    width: 256px; height: 155px;
    padding: 20px 27px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .so-how-c.old { left: 24px; top: 318px; }
  .so-how-c.ours { left: 113px; top: 485px; height: 156px; }
  .so-how-c .k { font-size: 14px; font-weight: 600; }
  .so-how-c .v, .so-how-c.old .v, .so-how-c.ours .v {
    width: auto; height: auto; margin-top: 30px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .so-how-c .v p { font-size: 14px; line-height: 17px; white-space: normal; }

  .so-score { padding: 140px 20px 0; }   /* 위 카드와 타이틀 사이 140px (대표 지시) */
  .so-score-h { position: static; font-size: 24px !important; line-height: 1.35 !important; white-space: normal !important; }
  .so-score-cards { position: static; width: auto; height: auto; display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
  .so-score-c, .so-score-c:nth-child(1), .so-score-c:nth-child(2), .so-score-c:nth-child(3) {
    position: static; left: auto; width: 100%; height: auto; gap: 20px; padding-bottom: 24px;
  }
  .so-score-c .thumb, .so-score-c .thumb.h234, .so-score-c .thumb.h179 { height: 180px !important; }
  .so-score-c .thumb img { position: static; width: 100% !important; height: 180px !important; object-fit: cover; }
  .so-score-c .body { padding: 0 20px; }
  .so-score-c .body h3 { font-size: 18px; white-space: normal; }
  .so-score-c .body p { font-size: 14px; line-height: 22px; }

  /* ── SOLUTION7_mobile: 화살표 슬라이더 (js/solution.js) ── */
  .so-proof { position: relative; height: 752px !important; padding: 0; overflow: hidden; }   /* 카드 끝(752)에서 끊는다 */
  .sf .so-proof-h {
    position: absolute; left: 50%; top: 120px; transform: translateX(-50%);
    width: 272px; margin: 0; padding: 0;
    font-size: 24px !important; line-height: 29px !important; white-space: normal !important;
    text-align: center; word-break: keep-all;
  }
  .so-proof-scrim { display: none; }
  .so-proof-cols {
    display: flex; gap: 12.957px;
    position: absolute; left: 24px; top: 270px;
    width: max-content; margin: 0; padding: 0;
    overflow: visible;
    transition: transform .6s cubic-bezier(.22, .68, .24, 1);
  }
  .so-proof-col, .so-proof-col.p1, .so-proof-col.p2, .so-proof-col.p3, .so-proof-col.p4, .so-proof-col.p5 {
    position: relative; left: auto; top: auto;
    width: 215px; height: 482px;
    flex-shrink: 0;
    padding: 0;
    display: block;
    opacity: .3;                      /* 보고 있지 않은 카드 (Figma) */
    transition: opacity .4s ease;
  }
  .so-proof-col.is-cur { opacity: 1; }
  /* 작은 설명글은 카드 위쪽, 소제목+수치는 아래쪽 (Figma) — 호버 없음.
     .cap이 .val 안에 있으므로 .val을 카드 전체로 펴고 margin-bottom:auto로 위아래를 가른다 */
  .so-proof-col .val {
    position: absolute; inset: 0;
    padding: 61.6px 14.3px;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
  }
  .so-proof-col .cap-wrap {
    order: 0; margin-bottom: auto;
    max-height: none; opacity: 1; overflow: visible;
  }
  .so-proof-col .val .t { order: 1; }
  .so-proof-col .val .n { order: 2; }
  .so-proof-col .ph::after { display: none; }
  .so-proof-col .cap {
    width: auto; margin: 0; padding: 0;
    font-size: 12px; line-height: normal;
  }
  .so-proof-col .val .t { width: auto; margin-bottom: 8px; font-size: 16px; }
  .so-proof-col .val .n { line-height: 38.57px; gap: 6.585px; }
  .so-proof-col .val .n b { font-size: 32px; }
  .so-proof-col .val .n span { font-size: 20px; }
  .so-proof-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 486px;
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, .6);
    z-index: 4;
  }
  .so-proof-arrow.prev { left: 0; }
  .so-proof-arrow.next { right: 0; }
  .so-proof-arrow img { width: 29.17px; height: 29.08px; }
  .so-proof-arrow.next img { transform: scaleX(-1); }   /* 기본 아이콘이 좌향이라 오른쪽만 반전 */

  /* ── SOLUTION8_mobile: 프레임(393x852) 좌표 그대로 ── */
  .so-fit { position: relative; min-height: 852px; height: auto !important; padding: 0 0 80px; overflow: hidden; }
  .so-fit-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .so-fit-bg img { width: 100%; height: 100%; object-fit: cover; }
  .sf .so-fit-h {
    position: absolute; left: 50%; top: 120px; transform: translateX(-50%);
    width: 200px; margin: 0;
    font-size: 24px !important; line-height: 29px !important; white-space: normal !important;
    text-align: center; word-break: keep-all;
  }
  /* 카드는 흐름 배치 — 영문처럼 글이 길어지면 카드가 늘어나고 아래가 함께 밀린다 */
  .so-fit-c, .so-fit-c.f1, .so-fit-c.f2, .so-fit-c.f3 {
    position: relative; left: auto; top: auto;
    width: 345px; min-height: 138px; height: auto;
    margin: 13px auto 0;
    padding: 28px 22px;
    display: block;
  }
  .so-fit-c.f1 { margin-top: 254px; }
  .so-fit-c .grad { width: 100%; height: 100%; left: 0; }
  .so-fit-c .shine { display: none; }
  .so-fit-c .tx { position: relative; display: block; gap: 0; }
  .so-fit-c .tx h3 { font-size: 16px; line-height: 19px; white-space: normal; }
  .so-fit-c .tx p { width: auto; margin-top: 23px; font-size: 14px; line-height: 20px; }

  /* ============================================================
     COMPANY 모바일 — Figma 'COMPANY 모바일1~6' (393 프레임)
     세로는 852 프레임을 화면 높이에 비례 매핑(--mh)해 표지가 화면에 꽉 차게 한다.
     ============================================================ */
  .m-br { display: inline; }
  #coHero, #coBrand, #coConnect, #coValues, #coHistory, #coNews { --mh: calc(var(--vhz, 852px) / 852); }

  /* ---------------- COMPANY 모바일1 — 표지 ---------------- */
  .sf.co-hero {
    height: var(--vhz, 852px) !important;
    min-height: 0;
    padding: 0;
    display: block;
    position: relative;
  }
  .co-hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  /* 아래로 갈수록 검어지는 그라디언트 (Figma Rectangle 34628816) */
  .co-hero::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: calc(var(--mh) * 309); height: calc(var(--mh) * 543);
    background: linear-gradient(180deg, rgba(0,0,0,0) 5.957%, #000 100%);
    pointer-events: none;
  }
  .sf .co-hero-h {
    position: absolute; z-index: 2;
    left: 24px; right: 24px;
    top: calc(var(--mh) * 240);       /* 헤더(100) + 140 */
    margin: 0;
    font-size: 24px; line-height: 1.2;
    text-align: center; color: #fff;
    text-shadow: 0 0 24px rgba(0, 0, 0, .48);
    white-space: normal; word-break: keep-all;
  }
  .co-stats {
    position: absolute; z-index: 2;
    left: 0; right: 0;
    top: calc(var(--mh) * 398);       /* 제목 아래 100px */
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    height: auto; margin: 0;
  }
  .co-stat {
    width: 232px; min-height: 105px; height: auto;
    padding: 25px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(7.6px);
    backdrop-filter: blur(7.6px);
    text-align: center;
  }
  .co-stat .n { font-size: 22px; font-weight: 600; line-height: normal; color: #fff; }
  /* 영문 등 두 줄이 될 수 있어 개행(\n)을 살리고 카드 높이는 패딩 유지한 채 Hug */
  .co-stat .l {
    font-size: 14px; font-weight: 400; line-height: normal;
    color: rgba(255, 255, 255, .6);
    white-space: pre-line; text-align: center;
  }

  /* ---------------- COMPANY 모바일2 — 브랜드 이야기 ---------------- */
  /* 섹션 간 간격 통일: 각 섹션의 아래 여백은 0, 다음 섹션 제목까지가 120px (대표 위임 수치) */
  .sf.co-brand { height: auto !important; padding: 120px 0 0; }
  .co-brand-head {
    position: static;
    width: 336px; margin: 0 auto;
    gap: 32px;
  }
  .co-brand-head h2 { font-size: 24px; line-height: 1.2; text-shadow: 0 0 24px rgba(0,0,0,.48); }
  .co-brand-d { font-size: 14px; font-weight: 500; }
  .co-brand-d p { line-height: 22px; }
  /* 심볼 (Figma 431 / 134.078x80) */
  /* 심볼·화살표는 90도 돌려 쓰므로 레이아웃 박스와 보이는 크기가 다르다.
     여백은 "보이는 위치" 기준(Figma 좌표)이 되도록 회전 보정분을 빼서 넣었다. */
  .co-brand-sym {
    position: relative; left: auto; top: auto;
    width: 80px; height: 134.078px;
    margin: 72.96px auto 0;
    transform: rotate(90deg);
  }
  /* D + R + V (Figma 571 / 244.024x74.479) */
  .co-brand-letters {
    position: relative; left: auto; top: auto;
    width: 244.024px; height: 74.479px;
    margin: 32.96px auto 0;
  }
  .co-brand-letters .l { gap: 5.7px; }
  .co-brand-letters .l img { height: 43.787px; }
  .co-brand-letters .l p { font-size: 13.136px; line-height: 24.521px; }
  .co-brand-letters .l-d { left: 0; width: 40px; }
  .co-brand-letters .l-d img { width: 24.469px; }
  .co-brand-letters .l-r { left: 102.012px; width: 40px; }
  .co-brand-letters .l-r img { width: 40.959px; }
  .co-brand-letters .l-v { left: 204.024px; width: 40px; }
  .co-brand-letters .l-v img { width: 24.438px; }
  .co-brand-letters .plus { top: 13px; width: 14.012px; height: 14.012px; }
  .co-brand-letters .plus:nth-of-type(1) { left: 64px; }
  .co-brand-letters .plus:nth-of-type(2) { left: 166.012px; }
  /* 헤드라이트 자동차 그래픽 — PC(company.css) 좌표를 그대로 두고 통째로 0.58333배 축소.
     부품별 좌표를 따로 잡으면 PC와 미세하게 어긋나 형태가 무너진다(2026-09-08 QA).
     Figma 모바일 램프(91.777x144.687)는 PC(157.34x248.03)의 정확히 0.58333배임을 실측 확인.
     scale은 레이아웃 박스를 줄이지 않으므로 시각 높이와의 차이(103.34px)를 음수 마진으로 상쇄. */
  .co-brand-lamp {
    position: relative; left: auto; top: auto;
    width: 157.34px; height: 248.03px;
    margin: 140.5px auto -103.34px;
    transform: scale(0.58333);
    transform-origin: top center;
  }
  /* 헤드라이트 노치(Figma Mask group) — 빛줄기 끝이 후드 홈에 정확히 앉은 형태.
     검은 배경으로 후드에 겹친 빛줄기 꼬리를 지우고 흰 테두리 홈을 그린다 */
  .co-brand-lamp::before, .co-brand-lamp::after {
    content: ''; position: absolute; z-index: 2;
    top: 181.18px; width: 22.765px; height: 11.527px;
    border: 2px solid #fff; background: #020202;
    box-sizing: border-box;
  }
  .co-brand-lamp::before { left: 36.07px; }
  .co-brand-lamp::after { left: 98.89px; }
  .co-brand-arw.a1 { display: none; }             /* 가로 화살표는 PC 전용 */
  .co-brand-arw.a2, .co-brand-arw.a3 {
    position: relative; left: auto; top: auto;
    display: block;
    width: 41.708px; height: 9.042px;
    margin: 56.3px auto 0;
    transform: rotate(90deg);
  }
  .co-brand-lines {
    position: relative; left: auto; top: auto;
    display: block; margin: 56.3px auto 0;
    width: 143.169px; height: 109.285px;
  }
  .co-brand-out {
    position: relative; left: auto; top: auto;
    display: block; margin: 56.3px auto 0;
    width: 97.764px; height: 58.333px;
  }

  /* ---------------- COMPANY 모바일3 — 데이터는 모든 곳을 ---------------- */
  .sf.co-connect { height: 598px !important; padding: 0; position: relative; }   /* 마퀴 끝(278+320)에서 끊는다 */
  .sf .co-connect-h {
    position: absolute; left: 24px; right: 24px;
    top: 120px;
    margin: 0;
    font-size: 24px; line-height: 1.2; text-align: center; color: #fff;
    white-space: normal;
  }
  /* 좌우 끝까지 카드가 보이도록 화면 전체 폭을 쓰고, 첫 카드만 24px 들여쓴다.
     (left:24로 잘라내면 왼쪽으로 빠져나가는 카드가 검은 띠에 가려진다) */
  .co-marquee {
    position: absolute; left: 0; right: 0;
    top: 278px;
    height: 320px; margin: 0;
    overflow: hidden;
    touch-action: pan-y;      /* 세로 스크롤은 페이지에 양보, 가로는 직접 처리 */
  }
  .co-track { gap: 32px; height: 320px; margin-left: 24px; }
  .co-tile { width: 280px; height: 320px; border-radius: 5px; }
  .co-tile img { width: auto !important; height: 100% !important; left: 50% !important; top: 0 !important; transform: translateX(-50%); }
  .co-tile .scrim { width: 100%; height: 173px; }
  .co-tile h3, .co-tile .lbl-clone { position: absolute; left: 26px; bottom: 26px; font-size: 20px; font-weight: 600; }

  /* ---------------- COMPANY 모바일4 / 4.1 — 핵심 가치 ---------------- */
  .sf.co-values { height: auto !important; padding: 120px 24px 0; background: #f4f5f7; }
  .sf .co-values-h {
    position: static; margin: 0;
    font-size: 24px; line-height: 1.2; text-align: left; color: #020202;
  }
  .co-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 54px; }
  .co-card { width: 100%; height: 174.667px; perspective: 1000px; }
  /* 터치 기기에서는 hover 잔상으로 카드가 뒤집힌 채 남는 일이 있어 탭(is-flip)만 인정 */
  .co-card:hover .co-card-in, .co-card:focus-within .co-card-in { transform: none; }
  .co-card.is-flip .co-card-in { transform: rotateY(180deg); }
  .co-card-in { width: 100%; height: 100%; }
  .co-card .face { border-radius: 5px; overflow: hidden; }
  .co-card .face.front .lbl {
    left: 26px; bottom: auto; top: 122.667px;
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 22px; line-height: normal;
  }
  .co-card .face.front .arw { left: auto; right: 0; top: 64px; width: 44px; height: 44px; }
  .co-card .face.front .arw img { width: 25.667px; height: 25.588px; }
  /* 앞면 그라디언트/셰이딩은 모바일 카드 크기(345x174.667)에 맞춰 다시 잡는다 */
  .co-card .front.blue, .co-card .front.dark, .co-card .front.blue.shift {
    background-size: 428px 360px; background-position: -1px 0;
  }
  .co-card .front .shine { width: 428px; height: 360px; left: -83px; top: 0; }
  /* 뒷면 — Figma COMPANY 모바일4.1 */
  .co-card .face.back {
    background: #f4f5f7;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 0; padding-bottom: 0;
  }
  .co-card .face.back .thumb { width: 100%; height: 75.667px !important; }
  /* 데스크톱은 사진마다 크롭 좌표가 다르지만 모바일 카드는 폭이 좁아 그대로 쓰면 여백이 생긴다
     → 카드 폭에 꽉 맞추고 넘치는 부분만 잘라낸다 */
  .co-card .face.back .thumb img {
    position: absolute;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    transform: none !important;
    object-fit: cover; object-position: center;
  }
  .co-card .face.back .body { width: 100%; padding: 14px 22px 0; gap: 10px; }
  .co-card .face.back .body h3 { font-size: 16px; font-weight: 700; line-height: 19px; white-space: normal; }
  .co-card .face.back .body p { font-size: 14px; font-weight: 500; line-height: 20px; }
  .co-card .face.back .body p br { display: none; }

  /* ---------------- COMPANY 모바일5 — 걸어온 길 ---------------- */
  .sf.co-history { height: 969px !important; padding: 120px 24px 0; position: relative; }
  .sf .co-history-h { position: static; margin: 0; font-size: 24px; line-height: 1.2; text-align: left; }
  .sf .co-history-d { position: static; margin-top: 32px; font-size: 14px; line-height: 19px; }
  /* 좌측 레일 — 점 22px + 막대 68px = 항목 피치 90px */
  .co-rail {
    display: flex; position: absolute;
    left: 24px; top: 279px;
    width: 22px; height: auto;
  }
  .co-rail .dot { width: 22px; height: 22px; border-radius: 4px; }
  .co-rail .bar { height: 68px; }
  .co-tl {
    position: absolute;
    left: 78px; top: 279px;
    width: 291px; margin: 0;      /* 78 + 291 = 369 (우측 여백 24) */
    gap: 30px;
  }
  .co-tl li { position: static; height: 60px; gap: 6px; }
  .co-tl li .d { font-size: 14px; font-weight: 500; line-height: 17px; }
  .co-tl li h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; white-space: normal; }
  /* 비활성 항목은 날짜·제목 모두 13% (Figma COMPANY 모바일5) */
  .co-tl li .d, .co-tl li h3 { color: rgba(2, 2, 2, .13); }
  .co-tl li.on .d { color: rgba(2, 2, 2, .3); }
  .co-tl li.on h3 { color: var(--ink); }

  /* ---------------- COMPANY 모바일6 — 회사 소식 ---------------- */
  .sf.co-news { height: auto !important; padding: 120px 24px 60px; }
  .sf .co-news-h { position: static; margin: 0; font-size: 24px; line-height: 1.2; text-align: left; }
  .co-news-deck { margin-top: 60px; }
  .sf .co-news-t { font-size: 20px; font-weight: 600; line-height: 26px; -webkit-line-clamp: 3; }
  .sf .co-news-x { margin-top: 34px; font-size: 14px; font-weight: 500; line-height: 22px; -webkit-line-clamp: 3; }
  .co-news-fig { margin-top: 34px; width: 100%; height: 190px; border-radius: 5px; overflow: hidden; }   /* 제목↔상세와 같은 간격 (대표 지시) */
  .co-news-d { margin-top: 12px; font-size: 13px; }
  .co-news .nav-arrow { width: 47px; height: 47px; }
  .co-news .nav-arrow img { width: 29.167px; height: 29.077px; }
  .co-news-dots { gap: 8px; margin-top: 22px; }
  .co-news-dots i, .co-news-dots span, .co-news-dots button {
    width: 6px; height: 6px; border-radius: 50%;
  }
}