/* ==========================================================================
   R&D > 신뢰성 시험센터 (Figma 1:4523) — page body only
   Hero/stage come from sp-common.css + sp-hero.js. This file: scene B copy + stats,
   equipment infographic, test domains, facility gallery, explore.
   ========================================================================== */
.quality-lab-page {
  --qual-navy: #002165;
  --qual-gutter: clamp(16px, 8.333vw, 160px);
}

/* Cancel style.css `section:not(.hero)… > *` (1440 max + 40px gutter, specificity 0,3,1)
   so section bodies run 1600 wide inside the 160px page gutter like the Figma frame */
.sp-page.quality-lab-page section:not(.hero):not(.hero-slider-container):not(.c-hero) > * {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.sp-page.quality-lab-page section:not(.hero):not(.hero-slider-container):not(.c-hero) > .sp-container {
  width: min(1600px, 100% - 2 * var(--qual-gutter));
}
.sp-page.quality-lab-page section:not(.hero):not(.hero-slider-container):not(.c-hero) > .qual-explore-bg {
  width: 105.42%; /* 2024 / 1920 */
  margin: 0;
}

/* ---------- Scene B (1:4584): eyebrow + title + desc, then 3 stats ----------
   The whole block is .sp-stage-headline so sp-hero.js fades it in as one. */
.quality-lab-page .qual-scene {
  top: calc(50% + 16px); /* block sits 16px below centre in 1:4584 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, min(10.2vw, 20.5vh), 196px);
  width: min(1240px, 100% - 32px);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-wrap: wrap;
}
.qual-scene-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.qual-scene-head .sp-eyebrow { margin-bottom: -6px; } /* 14px eyebrow→title gap in the design */
.qual-scene-title {
  font-weight: 600;
  font-size: clamp(28px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
}
.qual-scene-desc {
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}
.qual-scene-stats {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 10.417vw, 200px);
  list-style: none;
}
.qual-scene-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(96px, 9.375vw, 180px);
  color: #fff;
}
.qual-scene-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(36px, 4.6875vw, 90px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.qual-scene-num em {
  font-family: var(--sp-font);
  font-style: normal;
  font-weight: 500;
  font-size: 0.5333em;
}
.qual-scene-label {
  font-weight: 500;
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* Without the scroll motion the scene is a normal block that sizes to its content */
.quality-lab-page .sp-stage:not(.is-live) .sp-stage-sticky {
  display: flex;
  align-items: center;
  height: auto;
  min-height: clamp(420px, 48.958vw, 940px);
}
.quality-lab-page .sp-stage--static .sp-stage-sticky { display: none; }
.quality-lab-page .sp-stage:not(.is-live) .qual-scene {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 auto;
  padding-block: clamp(56px, 6.25vw, 120px);
}

/* ---------- Shared section head ---------- */
.qual-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(36px, 3.125vw, 60px);
}
.qual-title {
  margin-top: 12px !important;
  font-weight: 600;
  font-size: clamp(28px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #111;
  word-break: keep-all;
}
.qual-desc {
  margin-top: 16px !important;
  font-weight: 500;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #333;
  word-break: keep-all;
}

/* ---------- Equipment infographic (1:4605) ---------- */
.qual-equip {
  padding: clamp(72px, 6.25vw, 120px) 0;
  background: #fff;
}
.qual-equip-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px clamp(24px, 2.604vw, 50px);
  border-radius: 14px;
  background: var(--qual-navy);
  color: #fff;
}
.qual-equip-total {
  display: flex;
  color: #fff;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.qual-equip-total strong {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(44px, 4.167vw, 80px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.qual-equip-total span {
  padding-bottom: 0.7em;
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.qual-equip-note {
  color: #fff;
  font-weight: 600;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-align: right;
  word-break: keep-all;
}
.qual-equip-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.quality-lab-page .qual-equip-grid {
  margin-top: 40px;
  list-style: none;
}
.qual-equip-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(150px, 12.5vw, 240px);
  padding: 32px clamp(18px, 1.667vw, 32px) 24px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
}
.qual-equip-name {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qual-equip-no {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #88909d;
}
.qual-equip-card h3 {
  font-weight: 700;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #111;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.qual-equip-count {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  color: var(--qual-navy);
}
.qual-equip-count strong {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(36px, 3.125vw, 60px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.qual-equip-count span {
  padding-bottom: 0.45em;
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* ---------- Test domains 2 x 2 (1:4693) ---------- */
.qual-domains {
  padding: clamp(72px, 6.25vw, 120px) 0 clamp(64px, 5.208vw, 100px);
  background: #f8f8f8;
}
.qual-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  list-style: none;
}
.qual-domain {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 2.083vw, 40px);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  background: #fff;
}
.qual-domain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.qual-domain-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qual-domain-name span {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--qual-navy);
}
.qual-domain-name h3 {
  font-weight: 600;
  font-size: clamp(24px, 1.667vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #111;
}
.qual-domain-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}
.qual-domain-text {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #666;
  word-break: keep-all;
}
.qual-domain-spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qual-domain-spec dt {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  color: #666;
}
.qual-domain-spec dd {
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: #999;
}
.qual-domain-spec i {
  font-style: normal;
  margin-inline: 0.85em;
}

/* ---------- Facility gallery (1:4754) ---------- */
.qual-gallery {
  padding: clamp(72px, 6.25vw, 120px) 0;
  background: #fff;
}
.qual-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  list-style: none;
}
.qual-photo {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 44px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.qual-photo-img {
  position: relative;
  aspect-ratio: 512 / 338;
  overflow: hidden;
  background: #c7c7c7;
}
.qual-photo-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Crops as framed in the design (1:4765, 1:4786) */
.qual-photo-img--zoom1 img {
  inset: auto;
  left: -38.09%;
  top: -47.07%;
  width: 176.17%;
  height: 160.88%;
  object-fit: fill;
}
.qual-photo-img--zoom2 img {
  inset: auto;
  left: -23.81%;
  top: -11.16%;
  width: 147.75%;
  height: 134.93%;
  object-fit: fill;
}
.qual-photo-cap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline: 24px;
}
.qual-photo-cap h3 {
  font-weight: 600;
  font-size: clamp(20px, 1.354vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #111;
}
.qual-photo-cap p {
  font-size: clamp(15px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #666;
  word-break: keep-all;
}

/* ---------- Explore (1:4795) ---------- */
.qual-explore {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 36.302vw, 697px);
  padding: clamp(64px, 6.25vw, 120px) var(--qual-gutter) clamp(56px, 4.167vw, 80px);
  background: #0b1020;
  color: #fff;
}
.qual-explore-bg {
  position: absolute;
  /* Figma 1:4796: 2024x922 at (-33, -113) over a 1920x697 section */
  top: -16.21%;
  left: -1.72%;
  height: 132.28%;
}
.qual-explore-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  /* Figma layer blur is 21, but its render keeps the laser head and spark lines
     readable; a light CSS blur matches that render. */
  filter: blur(2px);
}
.qual-explore-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.qual-explore-inner {
  position: relative;
  width: min(1600px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 9.427vw, 181px);
}
.qual-explore-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.qual-explore-title {
  margin-top: 12px !important;
  font-weight: 600;
  font-size: clamp(28px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
}
.qual-explore-desc {
  margin-top: 16px !important;
  font-weight: 500;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}
.qual-explore-links {
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(3, clamp(200px, 13.542vw, 260px));
  gap: 20px;
  list-style: none;
}
.qual-explore-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: clamp(132px, 8.333vw, 160px);
  padding: 26px 20px;
  border-radius: 10px;
  background: #ebedf1;
  font-weight: 600;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--qual-navy);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s, transform 0.2s;
}
.qual-explore-card img {
  width: 50px;
  height: 50px;
  padding: 2px;
  object-fit: contain;
}
.qual-explore-card:hover { background: #dde1e8; color: var(--qual-navy); transform: translateY(-4px); }
.qual-explore-card.is-primary { background: var(--qual-navy); color: #fff; }
.qual-explore-card.is-primary:hover { background: #00184b; color: #fff; }
.qual-explore-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .qual-equip-grid { gap: 16px; }
  .qual-gallery-grid,
  .qual-domain-grid { gap: 24px; }
}
@media (max-width: 1024px) {
  .qual-equip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qual-domain-grid { grid-template-columns: minmax(0, 1fr); }
  .qual-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qual-explore-links { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .qual-scene-desc br,
  .qual-domain-text br { display: none; }
  .qual-equip-summary { flex-direction: column; align-items: flex-start; }
  .qual-equip-note { text-align: left; }
  .qual-photo { gap: 20px; padding-bottom: 28px; }
}
@media (max-width: 600px) {
  .quality-lab-page .sp-hero-desc br { display: none; }
  .qual-scene-stats { gap: 8px; }
  .qual-scene-stat { min-width: 0; flex: 1 1 0; }
  .qual-scene-label { white-space: normal; text-align: center; word-break: keep-all; }
  .qual-equip-grid { gap: 12px; }
  .qual-equip-card { padding: 20px 16px 16px; border-radius: 12px; }
  .qual-equip-note br { display: none; }
  .qual-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .qual-explore-links { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qual-explore-card { flex-direction: row; justify-content: flex-start; height: auto; padding: 18px 20px; }
  .qual-explore-card img { width: 40px; height: 40px; }
}