/* ============================================================
   하드웨어 (hardware.html) — Figma 하드웨어 섹션 (151:26466)
   HARDWARE / HARDWARE2 / HARDWARE3
   ============================================================ */

/* ---------------- HARDWARE 1 ----------------
   표지는 화면 높이에 정확히 맞는다(.sf-pin 높이 = --vhz).
   원·칩은 Figma에서 프레임 **아래**가 기준선이므로 bottom 기준으로 붙여
   화면이 길어지든 짧아지든 잘리는 위치가 Figma와 같게 유지된다. */
.hw-hero { height: 1024px; background: var(--paper); }
.hw-ell { position: absolute; left: 50%; transform: translateX(-50%); }
.hw-ell.e912 { bottom: -489px; width: 912px; height: 912px; }
.hw-ell.e594 { bottom: -330px; width: 594px; height: 594px; }
.hw-ell.e394 { bottom: -230px; width: 394px; height: 394px; }
.hw-hero-h {
  position: absolute;
  left: calc(50% + 0.5px); top: 310px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
  z-index: 5;
}
.hw-chips {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  z-index: 6;
}
.hw-chips.rowA { bottom: 375px; gap: 92px; }
.hw-chips.rowB { bottom: 254px; gap: 509px; left: calc(50% + 0.5px); }
.hw-chips.rowC { bottom: 105px; gap: 740px; }
.hw-chip {
  width: 190px; height: 73px;
  flex-shrink: 0;
  border-radius: 5px;
  background: rgba(66, 132, 255, .1);
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 24px; line-height: normal;
  color: var(--blue); white-space: nowrap;
}

/* ---------------- HARDWARE 2 ---------------- */
.hw-ecu { height: 1024px; background: var(--paper); }
.hw-blue {
  position: absolute;
  right: 0; bottom: 0;
  width: 861px; height: 1024px;
  background: linear-gradient(to bottom, #2b75ff 31.152%, #76a6ff 100%);
}
.hw-ecu-h {
  position: absolute;
  left: 280px; top: 377px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: var(--ink); white-space: nowrap;
}
.hw-ecu-d {
  position: absolute;
  left: 280px; top: 531px;
  width: 499px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 26px; line-height: 38px;
  color: rgba(2, 2, 2, .3);
}

/* OBD 디바이스 — 목(넥)·플러그·바코드·본체 4겹 (Figma 좌표 그대로) */
.hw-dev { position: absolute; }
.hw-dev i, .hw-dev img { position: absolute; }
.hw-dev .d-neck {
  background: linear-gradient(to bottom, #2d2e32 0%, #888c98 121.43%);
  border-radius: 0 0 30px 30px;
}
.hw-dev .d-plug { background: #c3c7d3; border-radius: 20px; }
.hw-dev .d-body {
  background: linear-gradient(to bottom, #2d2e32 53.279%, #3f4046 100%);
  border-radius: 30px;
}
/* HARDWARE2 크기 (360 x 475.5) */
.hw-ecu .hw-dev {
  left: 1310px; top: 284px;
  width: 360px; height: 475.5px;
  z-index: 4;
}
.hw-ecu .hw-dev .d-neck { left: 37.5px; top: 360px; width: 285px; height: 115.5px; }
.hw-ecu .hw-dev .d-plug { left: 54px; top: 382.5px; width: 252px; height: 76.5px; }
.hw-ecu .hw-dev .d-bar  { left: 79.5px; top: 399px; width: 201px; height: 45px; }
.hw-ecu .hw-dev .d-body { left: 0; top: -4.5px; width: 360px; height: 366px; }

.hw-tag {
  position: absolute;
  width: 150px; height: 60px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 20px; line-height: normal;
  color: #fff; white-space: nowrap;
  z-index: 6;
}
.hw-tag.t-lte { left: 1193px; top: 433px; }
.hw-tag.t-obd { left: 1253px; top: 516px; }
.hw-tag.t-ecu { left: 1583px; top: 244px; }
.hw-badge {
  position: absolute;
  left: 1649px; top: 337px;
  width: 60px; height: 60px;
  border-radius: 100px;
  background: #f66464;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 32px; line-height: normal;
  color: #fff;
  z-index: 6;
}
.hw-pill {
  position: absolute;
  height: 49px;
  padding: 0 18px;
  border-radius: 100px;
  background: #fff;
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
  display: flex; align-items: center; gap: 6px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 18px; line-height: normal;
  color: var(--ink); white-space: nowrap;
  z-index: 7;
}
.hw-pill .ic {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 100px;
  background: #f66464;
  display: flex; align-items: center; justify-content: center;
  padding-top: 1px;
}
.hw-pill .ic img { width: 2.5px; height: 11.375px; }
.hw-pill.p-crash { left: 1211px; top: 151px; }
.hw-pill.p-accel { left: 1147px; top: 215px; }
.hw-pill.p-fault { left: 1616px; top: 808px; }
/* 화면에 진입하면 0.3초 뒤 아래에서 위로 떠오르며 나타난다 (진짜 알림처럼 살짝 시차) */
.hw-pill {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .42s ease, transform .66s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .3s;
}
.hw-ecu.is-in .hw-pill { opacity: 1; transform: translateY(0); }
.hw-pill.p-accel { transition-delay: .42s; }
.hw-pill.p-fault { transition-delay: .54s; }

/* ---------------- HARDWARE 3 ---------------- */
.hw-bento { height: 1556px; background: var(--paper); }
.hw-bento .cap {
  position: absolute;
  left: 60px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 36px; line-height: normal;
  color: #fff; white-space: nowrap;
  z-index: 3;
}
.hw-b1 {
  position: absolute;
  left: 280px; top: 260px;
  width: 1344px; height: 436px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(to right, #c3cbd1 17.597%, #e8ebef 58.966%);
}
.hw-b1 .cap { top: 290px; }
.hw-b1 .scr {
  position: absolute;
  left: 629px; top: 114px;
  width: 838px; height: 438px;
  border: 19px solid #a2b0be;
  border-radius: 5px;
  background: #fff;
}
/* 목업 안 회색 블록 — 좌표는 카드 기준(.scr의 left/top을 뺀 값) */
.hw-b1 .g { position: absolute; background: var(--gray100); }
.hw-b1 .g1 { left: 58px;  top: 57px;  width: 115px; height: 26px; }
.hw-b1 .g2 { left: 58px;  top: 104px; width: 212px; height: 46px; }
.hw-b1 .g3 { left: 293px; top: 104px; width: 338px; height: 15px; }
.hw-b1 .g4 { left: 293px; top: 124px; width: 204px; height: 15px; }
.hw-b1 .g5 { left: 58px;  top: 173px; width: 261px; height: 120px; }
.hw-b1 .g6 { left: 335px; top: 173px; width: 261px; height: 120px; }
.hw-b1 .g7 { left: 612px; top: 173px; width: 261px; height: 120px; }

.hw-brow {
  position: absolute;
  left: 280px; top: 736px;
  width: 1344px; height: 560px;
  display: flex; align-items: center; gap: 40px;
}
.hw-b2, .hw-b3 {
  position: relative;
  width: 652px; height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.hw-b2 { background: linear-gradient(to bottom, #2b75ff 31.152%, #76a6ff 100%); border-radius: 5px; }
.hw-b3 { background: linear-gradient(-30.2807deg, rgb(49, 53, 56) 36.58%, rgb(121, 128, 132) 82.927%); border-radius: 5px; }
.hw-brow .cap { top: 414px; }
.hw-b3 .cap { font-weight: 600; }
.hw-b2 .ico { position: absolute; right: 84px; top: 88px; width: 101px; height: 101px; z-index: 3; }
.hw-b2 .line { position: absolute; left: 426px; top: 321px; width: 12px; height: 241px; }
/* HARDWARE3 안의 작은 디바이스 (330.095 x 436) */
.hw-b2 .hw-dev {
  left: 268px; top: -115px;
  width: 330.095px; height: 436px;
  z-index: 2;
}
.hw-b2 .hw-dev .d-neck { left: 34.38px; top: 330.09px; width: 261.325px; height: 105.905px; border-radius: 0 0 27.508px 27.508px; }
.hw-b2 .hw-dev .d-plug { left: 49.51px; top: 350.73px; width: 231.066px; height: 70.145px; border-radius: 18.339px; }
.hw-b2 .hw-dev .d-bar  { left: 72.89px; top: 365.85px; width: 184.31px; height: 41.262px; }
.hw-b2 .hw-dev .d-body { left: 0; top: -4.13px; width: 330.095px; height: 335.596px; border-radius: 27.508px; }

.hw-b3 .wid { position: absolute; left: 211.61px; top: 40px; width: 516.389px; height: 385px; }
.hw-b3 .chart {
  position: absolute;
  left: 205.88px; top: 110.23px;
  width: 345.513px; height: 196.797px;
  border-radius: 5.591px;
  background: rgba(255, 255, 255, .15);
  padding: 20.28px 20.28px 26.364px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16.224px;
  overflow: hidden;
}
.hw-b3 .chead {
  display: flex; align-items: center; gap: 16.224px;
  padding: 4.056px 0;
  font-size: 15.654px; line-height: normal; white-space: nowrap;
}
.hw-b3 .chead span { font-family: 'Pretendard Variable'; font-weight: 600; color: rgba(255, 255, 255, .3); }
.hw-b3 .chead span.on { font-weight: 700; color: #fff; }
.hw-b3 .clist { position: relative; width: 353.881px; height: 129.79px; overflow: hidden; flex-shrink: 0; }
.hw-b3 .clist img { position: absolute; left: -9.12px; top: -6.08px; width: 373.4px; height: 142.9px; max-width: none; }
.hw-b3 .score {
  position: absolute;
  left: 15.39px; top: 24px;
  width: 163.997px; height: 160.581px;
  border-radius: 5.591px;
  background: rgba(255, 255, 255, .15);
  padding: 22.308px 16.224px 24.336px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.hw-b3 .score .t {
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 15.654px; line-height: normal;
  color: #fff; white-space: nowrap;
}
.hw-b3 .score .v {
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 28.392px; line-height: normal;
  color: #fff; white-space: nowrap;
}

/* ---------------- HARDWARE 4 — 필요한 데이터에 따라 맞춤 기기 선택 ---------------- */
.hw-pick { height: 1690px; background: var(--paper); }
.hw-pick-h {
  position: absolute;
  left: 280px; top: 192px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: var(--ink); white-space: nowrap;
}
.hw-pick-row {
  position: absolute;
  left: 280px; top: 426px;
  width: 1360px; height: 1072px;
  display: flex; align-items: center; gap: 40px;
}
.hw-pick-card {
  position: relative;
  width: 660px; height: 100%;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.hw-pick-card .top { position: absolute; left: 0; top: 0; width: 660px; height: 380px; overflow: hidden; }
.hw-pick-card .top > img { width: 660px; height: 380px; }
.hw-pick-card .top.obd { background: #e9ecef; }
/* OBD2 기기 — HARDWARE2와 같은 4겹 구성, Figma 좌표(330.852 x 437) */
.hw-pick-card .top.obd .hw-dev {
  left: 164.57px; top: -134px;
  width: 330.852px; height: 437px;
}
.hw-pick-card .top.obd .d-neck { left: 34.46px; top: 330.85px; width: 261.924px; height: 106.148px; border-radius: 0 0 27.571px 27.571px; }
.hw-pick-card .top.obd .d-plug { left: 49.63px; top: 351.53px; width: 231.596px; height: 70.306px; border-radius: 18.381px; }
.hw-pick-card .top.obd .d-bar  { left: 73.06px; top: 366.69px; width: 185.415px; height: 41.356px; }
.hw-pick-card .top.obd .d-body { left: 0; top: -4.13px; width: 330.852px; height: 336.366px; border-radius: 27.571px; }
/* 기기에서 아래로 내려오는 흰 배선 두 줄 */
.hw-pick-card .top.obd .wire { position: absolute; bottom: -1px; width: 10px; height: 78px; background: #fff; }
.hw-pick-card .top.obd .wire.w1 { left: 325px; }
.hw-pick-card .top.obd .wire.w2 { left: 353px; }

.hw-pick-card .name {
  position: absolute;
  left: 40px; top: 440px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 36px; line-height: normal;
  color: var(--ink); white-space: nowrap;
}
.hw-pick-card .who {
  position: absolute;
  left: 40px; top: 503px;
  width: 340px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 30px;
  color: rgba(2, 2, 2, .3);
}
.hw-pick-card:nth-child(2) .who { width: 359px; }
.hw-pick-card .blk {
  position: absolute;
  left: 40px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.hw-pick-card .blk.where { top: 613px; width: 421px; }
.hw-pick-card .blk.data.d-gps { top: 803px; }
.hw-pick-card .blk.data.d-obd { top: 773px; }
.hw-pick-card .lbl {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 18px; line-height: 24px;
  color: rgba(2, 2, 2, .3);
}
.hw-pick-card .txt {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 30px;
  color: var(--ink);
}
.hw-pick-card .blk.data ul { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.hw-pick-card .blk.data li {
  display: flex; align-items: center; gap: 16px;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 22px; line-height: 30px;
  color: var(--ink); white-space: nowrap;
}
.hw-pick-card .blk.data li img { width: 23px; height: 16.64px; flex-shrink: 0; }