/* ============================================================
   회사 소개(company.html) — 카탈로그 v2 디자인 시스템(model-v2.css) 위에 얹는 보충 규칙
   model-v2.css 다음에 불러온다. 모두 .mv-company 범위 안에서만 동작한다.
   카탈로그에 없는 부품만 정의: 히어로 소제목, 브랜드 목록, 연혁, 투자사 로고, 기관 칩, 3칸 카드.
   색·여백·모서리는 model-v2 토큰(--ink/--mute/--line/--soft/--sand)을 그대로 쓴다.
   ============================================================ */

/* 히어로: 회사명은 짧게 크게, 한 줄 소개는 그 아래 */
.mv-company .mv-hero-t .ey{display:block;margin-bottom:18px;font-size:13px;font-weight:500;letter-spacing:.14em;opacity:.9}
.mv-company .mv-hero-t h1{font-size:clamp(56px,11vw,168px);white-space:nowrap}
.mv-company .mv-hero-t p{max-width:30em;margin-left:auto;margin-right:auto}

/* 히어로 버튼 두 개: 주 버튼(흰 알약) + 보조 버튼(유리 테두리) */
.mv-company .mv-hero-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:28px;padding:0 20px}
.mv-company .mv-hero-acts .mv-hero-maker{margin-top:0}
.mv-company .mv-hero-sub{display:inline-flex;align-items:center;height:54px;padding:0 26px;border-radius:999px;
  background:rgba(17,17,17,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;text-decoration:none;text-shadow:none;
  transition:background .2s ease}
.mv-company .mv-hero-sub:hover{background:rgba(17,17,17,.52)}
.mv-company .mv-hero-sub:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:768px){
  .mv-company .mv-hero-acts{margin-top:22px;gap:10px}
  .mv-company .mv-hero-sub{height:48px;padding:0 22px;font-size:15px}
}

/* 기술 3칸: 카탈로그 진행 과정 카드(.mv-flow/.mv-fs)를 쓰되 사진 비율만 4:3 */
.mv-company .mv-fs .ph{aspect-ratio:4/3}
.mv-company .mv-fs .d{max-width:34ch}

/* 브랜드 카드: 2칸 × 2줄. 카드마다 로고 · 설명 · 주소(맨 아래 정렬) */
.mv-company .mv-brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mv-company .mv-brands li{display:flex;min-width:0}
.mv-company .mv-brands a{flex:1;display:flex;flex-direction:column;min-height:236px;padding:30px 28px 26px;border-radius:var(--r-card,10px);background:var(--soft);color:inherit;text-decoration:none;transition:background .2s,box-shadow .2s,transform .2s}
.mv-company .mv-brands a:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}
.mv-company .mv-brands a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mv-company .mv-brands .lg{height:32px;display:flex;align-items:center}
.mv-company .mv-brands .lg img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:left center;border-radius:0;mix-blend-mode:multiply}
.mv-company .mv-brands .ds{margin-top:22px;font-size:15px;line-height:1.65;color:#4a4843;word-break:keep-all}
.mv-company .mv-brands .go{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);font-style:normal;overflow-wrap:anywhere}
.mv-company .mv-brands .go svg{flex:none}
@media(max-width:640px){
  .mv-company .mv-brands{grid-template-columns:minmax(0,1fr);gap:12px}
  .mv-company .mv-brands a{min-height:0;padding:24px 22px 22px}
  .mv-company .mv-brands .lg{height:28px}
  .mv-company .mv-brands .ds{margin-top:16px}
  .mv-company .mv-brands .go{padding-top:18px}
}
@media(prefers-reduced-motion:reduce){.mv-company .mv-brands a{transition:none}.mv-company .mv-brands a:hover{transform:none}}

/* 연혁 타임라인: 연도(큰 글씨) · 세로선 위 점 · 월 + 내용. 연도 안은 최신순 */
.mv-company .mv-tl{--tl-y:200px;--tl-dot:56px;list-style:none;margin:0;padding:0;position:relative}
.mv-company .mv-tl::before{content:"";position:absolute;top:18px;bottom:18px;left:calc(var(--tl-y) + var(--tl-dot) / 2);width:1px;background:var(--line)}
.mv-company .mv-tl .yr{position:relative;display:grid;grid-template-columns:var(--tl-y) var(--tl-dot) minmax(0,1fr);align-items:start;padding:0 0 56px}
.mv-company .mv-tl .yr:last-child{padding-bottom:0}
.mv-company .mv-tl .y{margin:0;font-size:clamp(34px,3.4vw,48px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mv-company .mv-tl .yr::after{content:"";position:absolute;top:calc(clamp(34px,3.4vw,48px) / 2 - 7px);left:calc(var(--tl-y) + var(--tl-dot) / 2 - 7px);width:14px;height:14px;border-radius:999px;background:var(--accent,#f2b33d);box-shadow:0 0 0 5px #fff}
.mv-company .mv-tl .ms{grid-column:3;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;padding-top:calc(clamp(34px,3.4vw,48px) / 2 - 12px)}
.mv-company .mv-tl .ms li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:12px}
.mv-company .mv-tl .m{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mv-company .mv-tl .ev{font-size:16px;line-height:1.55;color:#4a4843;word-break:keep-all}
.mv-company .mv-tl .key .ev{font-weight:600;color:var(--ink)}
@media(max-width:860px){.mv-company .mv-tl{--tl-y:120px;--tl-dot:44px}}
@media(max-width:560px){
  .mv-company .mv-tl{--tl-y:72px;--tl-dot:32px}
  .mv-company .mv-tl .y{font-size:24px}
  .mv-company .mv-tl .yr::after{top:5px;width:12px;height:12px;left:calc(var(--tl-y) + var(--tl-dot) / 2 - 6px);box-shadow:0 0 0 4px #fff}
  .mv-company .mv-tl .ms{padding-top:2px;gap:12px}
  .mv-company .mv-tl .ms li{grid-template-columns:28px minmax(0,1fr);gap:8px}
  .mv-company .mv-tl .m{font-size:13px}
  .mv-company .mv-tl .ev{font-size:15px}
  .mv-company .mv-tl .yr{padding-bottom:40px}
}

/* 투자사 로고 */
.mv-company .mv-sub{margin:0 0 18px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.mv-company .mv-sub + * {min-width:0}
.mv-company .mv-block + .mv-block{margin-top:clamp(44px,5vw,64px)}
.mv-company .mv-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.mv-company .mv-logos li{display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px;border-radius:var(--r-card,10px);background:var(--soft)}
.mv-company .mv-logos .lg{width:100%;height:44px;display:flex;align-items:center}
.mv-company .mv-logos .lg img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:left center;border-radius:0;mix-blend-mode:multiply}
.mv-company .mv-logos b{margin-top:16px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;word-break:keep-all}
.mv-company .mv-logos small{margin-top:4px;font-size:12.5px;color:var(--mute)}
@media(max-width:1024px){.mv-company .mv-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.mv-company .mv-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mv-company .mv-logos li{padding:18px 16px}}

/* 기관 · 선정 칩 */
.mv-company .mv-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mv-company .mv-tags li{display:inline-flex;align-items:center;min-height:36px;padding:6px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;line-height:1.4;word-break:keep-all}

.mv-company .mv-fine{margin:22px 0 0;font-size:12.5px;line-height:1.7;color:var(--mute);word-break:keep-all}

/* 다음 단계: 카탈로그 가격 카드(.mv-price) 3칸 */
.mv-company .mv-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mv-company .mv-next .mv-price strong{font-size:clamp(24px,2.2vw,32px)}
.mv-company .mv-next .mv-price small{word-break:keep-all}
.mv-company .mv-steps .mv-next .mv-price.e{background:#fff}  /* 연베이지 띠 위에서는 흰 카드로 구분 */
@media(max-width:860px){.mv-company .mv-next{grid-template-columns:minmax(0,1fr)}}