/* ============================================================
   회사소개 (company.html) — Figma 회사소개 섹션 (151:22984)
   COMPANY / COMPANY2 / COMPANY3(+hover) / COMPANY 4 / COMPANY 5(+5.1)
   ============================================================ */

/* ---------------- COMPANY 1 — 표지 ---------------- */
/* 표지는 .sf-fit으로 화면 높이에 맞춰 늘어난다 — 사진은 꽉 채우고,
   헤드라인+지표는 한 덩어리처럼 세로 중앙 기준으로 붙어 있는다 */
.co-hero { height: 1024px; background: #000; }
.co-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Figma는 1920x2400 사진을 top:-531에 놓았다 — 넘치는 1376px 중 38.6% 지점이 기준선.
     화면 비율이 바뀌어도 같은 구도를 유지하면서 여백 없이 꽉 찬다 */
  object-position: center 38.6%;
}
.co-hero-h {
  position: absolute;
  left: 50%; top: calc(310px + (var(--vhz, 1024px) - 1024px) / 2);
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
  z-index: 5;
}
.co-stats {
  position: absolute;
  left: 50%; top: calc(546px + (var(--vhz, 1024px) - 1024px) / 2);
  transform: translateX(-50%);
  width: 1064px; height: 220px;
  display: flex; align-items: center; justify-content: center; gap: 60px;
  z-index: 5;
}
.co-stat {
  width: 312px; height: 100%;
  flex-shrink: 0;
  padding: 40px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.co-stat .n {
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 46px; line-height: normal;
  color: #fff; white-space: nowrap;
}
.co-stat .l {
  /* Figma에서도 한 줄로 붙어 있고 박스(227)보다 넓으면 좌우로 넘친다 — 카드(312)가 클리핑 */
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 18px; line-height: normal;
  color: rgba(255, 255, 255, .6); text-align: center; white-space: nowrap;
}

/* ---------------- COMPANY 2 — 무한 마퀴 ---------------- */
.co-connect { height: 1024px; background: #020202; }
.co-connect-h {
  position: absolute;
  left: 50%; top: 220px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
}
.co-marquee {
  position: absolute;
  left: 0; top: 504px;
  width: 1920px; height: 300px;
  overflow: hidden;
}
/* 좌→우 이동: 트랙을 -세트폭에서 0으로 옮기고 반복 → 마지막 카드 뒤에 첫 카드가 따라붙는다 */
.co-track {
  display: flex; align-items: center; gap: 50px;
  height: 300px;
  will-change: transform;
}
.co-tile {
  position: relative;
  width: 520px; height: 300px;
  flex-shrink: 0;
  border-radius: 5px;   /* 대표 지시 (2026-09-08) — 사진은 크롭으로 프레임을 다 채우고 있음 */
  overflow: hidden;
}
.co-tile img { position: absolute; object-fit: cover; max-width: none; }
.co-tile .scrim {
  position: absolute; left: 0; bottom: 0;
  width: 600px; height: 288px;
  background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
}
.co-tile .scrim.s4 { width: 520px; height: 143px; }
.co-tile h3,
.co-tile .lbl-clone {
  position: absolute; left: 40px; bottom: 40px;
  margin: 0;
  /* 대표 지시로 Figma(Bold 700)보다 한 단계 얇게 */
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 26px; line-height: normal;
  color: #fff; white-space: nowrap;
}
/* 타일별 사진 배치 (Figma 좌표 그대로) */
.co-tile.t1 img { left: 1px;   top: -174px; width: 519px; height: 648px; }
.co-tile.t2 img { left: 1px;   top: -20px;  width: 519px; height: 346px; }
.co-tile.t3 img { left: 0;     top: 0;      width: 600px; height: 380px; border-radius: 5px; }
.co-tile.t4 img { left: -48px; top: -110px; width: 616px; height: 410px; }
.co-tile.t5 img { left: 1px;   top: -239px; width: 519px; height: 778px; }
.co-tile.t6 img { left: -39px; top: -49px;  width: 599px; height: 399px; }
.co-tile.t7 img { left: -40px; top: -49px;  width: 600px; height: 399px; }

/* ---------------- COMPANY 3 — 핵심 가치 (플립 카드) ---------------- */
.co-values { height: 1024px; background: var(--paper); }
.co-values-h { left: 280px; top: 200px; }
.co-cards {
  position: absolute;
  left: 280px; top: 474px;
  display: flex; align-items: center; gap: 40px;
}
.co-card {
  width: 427px; height: 360px;
  flex-shrink: 0;
  perspective: 1400px;
}
.co-card-in {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.22, .68, .24, 1);
}
/* 호버한 카드만 Y축으로 뒤집힌다 — 나머지는 앞면 유지 */
.co-card:hover .co-card-in,
.co-card:focus-within .co-card-in,
.co-card.is-flip .co-card-in { transform: rotateY(180deg); }
.co-card .face {
  position: absolute; inset: 0;
  border-radius: 5px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.co-card .front { background-color: var(--gray100); background-repeat: no-repeat; }
.co-card .front.blue { background-image: linear-gradient(to right, #306fff, #7ea5ff); background-size: 428px 360px; background-position: -1px 0; }
.co-card .front.dark { background-image: linear-gradient(to right, #2d2f32, #585c63); background-size: 428px 360px; background-position: -1px 0; }
.co-card .front.blue.shift { background-size: 439px 360px; background-position: -12px 0; }
.co-card .front .shine {
  position: absolute;
  left: -1px; top: 0;
  width: 671.5px; height: 370px;
  background-repeat: no-repeat;
  background-size: 728.099px 426.6px;
  background-position: -28.3px -28.3px;
  pointer-events: none;
}
.co-card .front .arw {
  position: absolute;
  left: 367px; top: 150px;
  width: 60px; height: 60px;
  background: rgba(242, 244, 246, .4);
  border-radius: 0.972px;
  display: flex; align-items: center; justify-content: center;
}
.co-card .front .arw img { width: 35.831px; height: 35.776px; transform: scaleX(-1); }
.co-card .front .lbl {
  position: absolute; left: 40px; bottom: 40px;
  display: flex; align-items: flex-start; gap: 16px;
  font-size: 36px; line-height: normal; color: #fff; white-space: nowrap;
}
.co-card .front .num { font-family: 'Pretendard Variable'; font-weight: 500; text-align: right; }
.co-card .front .txt { font-family: 'Pretendard Variable'; font-weight: 700; }

.co-card .back {
  transform: rotateY(180deg);
  background: var(--gray100);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 44px;
  padding-bottom: 40px;
}
.co-card .back .thumb { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; }
.co-card .back .thumb.h234 { height: 234px; }
.co-card .back .thumb.h179 { height: 179px; }
.co-card .back .thumb img { position: absolute; max-width: none; object-fit: cover; }
.co-card:nth-child(1) .back .thumb img { left: 0; top: 0; width: 427px; height: 234px; }
.co-card:nth-child(2) .back .thumb img { left: 0; top: -25.5px; width: 427px; height: 285px; }
.co-card:nth-child(3) .back .thumb img { left: 0.5px; top: -53px; width: 426px; height: 284px; }
.co-card .back .body { width: 100%; padding: 0 40px; display: flex; flex-direction: column; gap: 14px; }
.co-card .back .body h3 {
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 26px; line-height: normal;
  color: var(--ink); white-space: nowrap;
}
.co-card .back .body p {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 18px; line-height: 26px;
  color: rgba(2, 2, 2, .3);
}

/* ---------------- COMPANY 4 — 연혁 ---------------- */
.co-history { height: 1244px; background: var(--paper); }
.co-history-h { left: 280px; top: 200px; }
.co-history-d {
  position: absolute;
  left: 280px; top: 297px;
  width: 496px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 26px; line-height: 38px;
  color: rgba(2, 2, 2, .3);
}
.co-rail {
  position: absolute;
  left: 960px; top: 220px;
  width: 28px; height: 791px;
  display: flex; flex-direction: column; align-items: center;
}
.co-rail .dot {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 5px;
  background: #edf0f4;
  transition: background-color .35s ease;
}
.co-rail .dot.on { background: #2b75ff; }
.co-rail .bar { width: 2px; height: 81px; flex-shrink: 0; background: #edf0f4; }
.co-tl {
  position: absolute;
  left: 1036px; top: 220px;
  width: 238px;
  list-style: none;
  display: flex; flex-direction: column; gap: 48px;
}
.co-tl li { display: flex; flex-direction: column; gap: 8px; }
.co-tl .d {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 18px; line-height: normal;
  color: rgba(2, 2, 2, .13);
  transition: color .35s ease;
}
.co-tl h3 {
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 22px; line-height: 32px;
  color: rgba(2, 2, 2, .13); white-space: nowrap;
  transition: color .35s ease;
}
.co-tl li.on .d { color: rgba(2, 2, 2, .3); }
.co-tl li.on h3 { color: var(--ink); }

/* ---------------- COMPANY 5 — 회사 소식 ---------------- */
.co-news { height: 1024px; background: var(--paper); }
.co-news-h { left: 280px; top: 200px; }
.co-news-deck { position: absolute; inset: 0; }
.co-news-item {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease;
}
.co-news-item.is-on { opacity: 1; visibility: visible; }
.co-news-link { display: block; text-decoration: none; color: inherit; }
.co-news-t {
  position: absolute;
  left: 280px; top: 381px;
  width: 450px; height: 160px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 40px; line-height: 52px;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.co-news-x {
  position: absolute;
  left: 280px; top: 573px;
  width: 460px; height: 64px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 32px;
  color: rgba(2, 2, 2, .3);
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.co-news-d {
  position: absolute;
  left: 280px; top: 789px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 18px; line-height: 24px;
  color: rgba(2, 2, 2, .3); white-space: nowrap;
}
.co-news-fig {
  position: absolute;
  left: 970px; top: 381px;
  width: 670px; height: 380px;
  border-radius: 5px;
  overflow: hidden;
  background: #e9edf3;
}
.co-news-fig img { width: 100%; height: 100%; object-fit: cover; }
/* 사진(.co-news-fig 970~1640) 오른쪽 끝에 맞춰 우측 정렬 —
   기사 수가 늘어도 오른쪽 여백을 넘지 않는다 */
.co-news-dots {
  position: absolute;
  right: 280px; top: 803px;
  height: 10px;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.co-news-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(2, 2, 2, .1);
  padding: 0;
  transition: background-color .3s ease;
}
.co-news-dots button.on { background: var(--ink); }
/* 소식 전환 페이드 */
.co-news .fadeable { transition: opacity .28s ease; }
.co-news.swapping .fadeable { opacity: 0; }

/* ============================================================
   브랜드 이야기 (Figma '브랜딩 이야기' 326:17568 — 1920x1302)
   자동차 헤드라이트 → D·R·V 이니셜 → 심볼로 이어지는 로고 유래 설명.
   ============================================================ */
.co-brand { height: 1302px; background: #020202; }
.co-brand-head {
  position: absolute;
  left: 366px; top: 200px;
  width: 1189px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  text-align: center; color: #fff;
}
.co-brand-head h2 {
  margin: 0; width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
}
.co-brand-d { width: 100%; font-family: 'Pretendard Variable'; font-weight: 400; font-size: 22px; }
.co-brand-d p { line-height: 32px; }

/* 1행 — 심볼 → D + R + V */
.co-brand-sym {
  position: absolute;
  left: 428.8px; top: 563px;
  width: 100px; height: 167.598px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.co-brand-sym img { width: 100%; height: 100%; }
.co-brand-arw { position: absolute; width: 71.5px; height: 15.5px; }
.co-brand-arw.a1 { left: 612px; top: 547.5px; }
.co-brand-arw.a2 { left: 694px; top: 967px; }
.co-brand-arw.a3 { left: 1154px; top: 967px; }
.co-brand-letters { position: absolute; left: 782px; top: 513px; width: 792.5px; height: 169px; }
.co-brand-letters .l {
  position: absolute; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.co-brand-letters .l img { height: 100px; }
.co-brand-letters .l p {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 30px; line-height: 56px;
  color: #fff; text-align: center;
}
.co-brand-letters .l-d { left: 0; width: 55.882px; }
.co-brand-letters .l-d img { width: 55.882px; }
.co-brand-letters .l-r { left: 348px; width: 85.5px; }
.co-brand-letters .l-r img { width: 93.542px; }
.co-brand-letters .l-v { left: 725px; width: 67.5px; }
.co-brand-letters .l-v img { width: 55.811px; }
.co-brand-letters .plus { position: absolute; top: 38px; width: 32px; height: 32px; }
.co-brand-letters .plus:nth-of-type(1) { left: 186px; }
.co-brand-letters .plus:nth-of-type(2) { left: 563px; }

/* 2행 — 헤드라이트 → 작도선 → 로고 */
.co-brand-lamp { position: absolute; left: 421px; top: 854px; width: 157.34px; height: 248.03px; }
.co-brand-lamp img { position: absolute; }
.co-brand-lamp .beam-l { left: 7.99px; top: 0; width: 77.227px; height: 185.372px; }
.co-brand-lamp .beam-r { left: 72.61px; top: 0; width: 77.227px; height: 185.372px; transform: scaleX(-1); }
.co-brand-lamp .body { left: 6.68px; top: 179.16px; width: 144.082px; height: 68.871px; }
.co-brand-lamp .cap-l { left: 0; top: 200.49px; width: 15.561px; height: 13.256px; }
.co-brand-lamp .cap-r { left: 141.49px; top: 200.49px; width: 15.849px; height: 13.256px; transform: scaleX(-1); }
.co-brand-lines { position: absolute; left: 851px; top: 890.57px; width: 245.436px; height: 187.347px; }
.co-brand-out { position: absolute; left: 1336px; top: 932px; width: 167.598px; height: 100px; }