/* ==========================================================================
   연구개발 > 특허 (Figma 1:3878) — page body only
   Hero/stage: sp-common.css + sp-hero.js. Scene B (1:3939) is rendered inside
   .sp-stage-headline as .pate-scene so it fades in with the stage motion.
   ========================================================================== */
.patent-page {
  --pate-navy: #002165;
  --pate-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.patent-page section:not(.hero):not(.hero-slider-container):not(.c-hero) > * {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.sp-page.patent-page section:not(.hero):not(.hero-slider-container):not(.c-hero) > .pate-explore-bg {
  width: 105.42%; /* Figma 1:4027: 2024 wide, 33px past the left edge of a 1920 frame */
  margin: 0;
}

/* Shared section head (eyebrow + title + desc) */
.pate-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pate-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;
}
.pate-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;
}

/* ---------- Scene B (1:3939): IP headline + 31건 orbit ---------- */
.pate-stage .sp-stage-headline.pate-scene {
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: normal;
  text-align: left;
  text-wrap: wrap;
  /* with .sp-stage-dim (0.4) this gives the design's 0.7 shade + blur */
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pate-scene-inner {
  width: min(1600px, 100% - 2 * var(--pate-gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
.pate-scene-text {
  display: flex;
  flex-direction: column;
  padding-left: clamp(0px, 0.99vw, 19px);
}
.pate-scene-title {
  margin-top: 14px !important;
  font-weight: 600;
  font-size: clamp(28px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  word-break: keep-all;
}
.pate-scene-desc {
  margin-top: 20px !important;
  max-width: 639px;
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}

.pate-orbit {
  --ring: clamp(240px, 25.833vw, 496px);
  justify-self: end;
  /* room for the tags that sit outside the ring (Lighting -129px, Mechanical +565px) */
  padding: calc(var(--ring) * 0.13) calc(var(--ring) * 0.14) calc(var(--ring) * 0.1) calc(var(--ring) * 0.26);
  margin-right: clamp(0px, 3.594vw, 69px);
}
.pate-orbit-ring {
  position: relative;
  width: var(--ring);
  height: var(--ring);
}
.pate-orbit-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.patent-page .pate-orbit-core { /* beats .sp-page p reset */
  position: absolute;
  inset: 9.677%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 22%;
  border-radius: 50%;
  background: rgba(0, 42, 130, 0.9);
  color: #fff;
  white-space: nowrap;
}
.pate-orbit-num {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: calc(var(--ring) * 0.3629);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pate-orbit-unit {
  margin-bottom: 0.15em;
  font-weight: 500;
  font-size: calc(var(--ring) * 0.0806);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pate-orbit-dot {
  position: absolute;
  left: calc(var(--x) / 496 * 100%);
  top: calc(var(--y) / 496 * 100%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #566e9e;
}
.pate-orbit-tags { list-style: none; }
.pate-orbit-tags li {
  position: absolute;
  left: calc(var(--x) / 496 * 100%);
  top: calc(var(--y) / 496 * 100%);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 500;
  font-size: clamp(12px, 0.833vw, 16px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Without the live motion the scene sits in normal flow under the box */
.pate-stage:not(.is-live) .sp-stage-sticky { height: auto; min-height: clamp(420px, 48.906vw, 939px); display: flex; }
.pate-stage:not(.is-live) .sp-stage-headline.pate-scene {
  position: relative;
  left: auto;
  top: auto;
  height: auto;
  min-height: 100%;
  flex: 1;
  transform: none;
  padding-block: clamp(56px, 6.25vw, 120px);
}

/* ---------- 03 전체 특허 보유 현황 (1:3971) ---------- */
.pate-status {
  padding: clamp(64px, 6.25vw, 120px) var(--pate-gutter);
}
.pate-dash {
  width: min(1600px, 100%);
  margin: clamp(40px, 3.75vw, 72px) auto 0;
  display: flex;
  gap: clamp(24px, 3.125vw, 60px);
  align-items: stretch;
}
.patent-page .pate-chart { /* beats .sp-page figure reset */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 2.083vw, 40px) clamp(20px, 2.292vw, 44px) 32px;
  border-radius: 20px;
  background: #f5f6f9;
}
.pate-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  line-height: 1.4;
}
.pate-chart-title {
  font-weight: 600;
  font-size: clamp(18px, 1.25vw, 24px);
  letter-spacing: -0.04em;
  color: #111;
}
.pate-chart-unit {
  flex-shrink: 0;
  font-size: clamp(13px, 0.833vw, 16px);
  letter-spacing: -0.03em;
  color: #666;
}
.pate-chart-body {
  --plot-h: clamp(180px, 17.083vw, 328px);
  position: relative;
  padding: clamp(40px, 2.604vw, 50px) 0 59px clamp(40px, 3.333vw, 64px);
}
.pate-chart-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(40px, 2.604vw, 50px);
  height: var(--plot-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
}
.pate-chart-axis li {
  position: relative;
  height: 0;
}
.pate-chart-axis li {
  font-family: var(--sp-font-en);
  font-weight: 500;
  font-size: clamp(12px, 0.833vw, 16px);
  line-height: 0;
  color: #9299a7;
  width: clamp(24px, 1.875vw, 36px);
  text-align: right;
}
.pate-chart-plot {
  position: relative;
  height: var(--plot-h);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 7.32% 0 4.17%;
}
/* grid lines span the plot width */
.pate-chart-plot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(#e0e5ee, #e0e5ee) 0 0 / 100% 1px no-repeat,
    linear-gradient(#e0e5ee, #e0e5ee) 0 20% / 100% 1px no-repeat,
    linear-gradient(#e0e5ee, #e0e5ee) 0 40% / 100% 1px no-repeat,
    linear-gradient(#e0e5ee, #e0e5ee) 0 60% / 100% 1px no-repeat,
    linear-gradient(#e0e5ee, #e0e5ee) 0 80% / 100% 1px no-repeat,
    linear-gradient(#bfc8d9, #bfc8d9) 0 100% / 100% 1px no-repeat;
}
.pate-bar {
  position: relative;
  z-index: 1;
  height: 100%;
}
.pate-bar-fill {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(112px, 42.75%);
  height: calc(var(--v) * 10%);
  border-radius: 6px 6px 0 0;
  background: var(--pate-navy);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}
.pate-bar--2 .pate-bar-fill { background: #5876af; }
.pate-bar--3 .pate-bar-fill { background: #9cadcf; }
.pate-bar b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--v) * 10% + 10px);
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(24px, 1.979vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--pate-navy);
  text-align: center;
}
.pate-bar em {
  position: absolute;
  left: -20px;
  right: -20px;
  top: calc(100% + 21px);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #111;
  text-align: center;
  white-space: nowrap;
}
/* grow-in when scrolled into view */
.pate-chart.is-armed .pate-bar-fill { transform: translateX(-50%) scaleY(0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.pate-chart.is-armed .pate-bar b { opacity: 0; transition: opacity 0.5s 0.5s; }
.pate-chart.is-armed .pate-bar--2 .pate-bar-fill { transition-delay: 0.1s; }
.pate-chart.is-armed .pate-bar--3 .pate-bar-fill { transition-delay: 0.2s; }
.pate-chart.is-in .pate-bar-fill { transform: translateX(-50%) scaleY(1); }
.pate-chart.is-in .pate-bar b { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pate-chart.is-armed .pate-bar-fill,
  .pate-chart.is-armed .pate-bar b { transition: none; }
}

.pate-stats {
  flex: 0 0 clamp(320px, 26.042vw, 500px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}
.pate-stat {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 120px;
  padding: 32px clamp(20px, 1.667vw, 32px) 24px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
}
.pate-stat-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
}
.pate-stat-name strong {
  font-weight: 600;
  font-size: clamp(17px, 1.146vw, 22px);
  letter-spacing: -0.02em;
  color: #111;
  word-break: keep-all;
}
.pate-stat-name span {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: #999;
}
.pate-stat-num {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: var(--pate-navy);
  white-space: nowrap;
}
.pate-stat-num span {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(40px, 3.125vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pate-stat-num small {
  font-weight: 500;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.pate-stat.is-total { background: var(--pate-navy); border-color: var(--pate-navy); }
.pate-stat.is-total strong,
.pate-stat.is-total .pate-stat-num { color: #fff; }

/* ---------- 대표 특허 (현재 마크업 없음) ---------- */
.pate-key {
  padding: 0 var(--pate-gutter) clamp(64px, 6.25vw, 120px);
}
.pate-key[hidden] { display: none; }
.pate-key-grid {
  width: min(1600px, 100%);
  margin: clamp(32px, 3.125vw, 60px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pate-key-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 1.667vw, 32px);
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
}
.pate-key-cat {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ebedf1;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pate-navy);
}
.pate-key-title {
  font-weight: 600;
  font-size: clamp(18px, 1.146vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
  word-break: keep-all;
}
.pate-key-desc {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #555;
  word-break: keep-all;
}
.pate-key-meta {
  margin-top: auto !important;
  padding-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #999;
}

/* ---------- Explore (1:4026) ---------- */
.pate-explore {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 36.302vw, 697px);
  padding: clamp(64px, 6.25vw, 120px) var(--pate-gutter) clamp(56px, 4.167vw, 80px);
  background: #0b1020;
  color: #fff;
}
.pate-explore-bg {
  position: absolute;
  /* Figma 1:4027: 2024x922 at (-33, -113) over a 1920x697 section */
  top: -16.21%;
  left: -1.72%;
  height: 132.28%;
}
.pate-explore-bg img {
  width: 100%;
  height: 100%;
  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);
}
.pate-explore-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.pate-explore-inner {
  position: relative;
  width: min(1600px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 9.427vw, 181px);
}
.pate-explore-head {
  display: flex;
  flex-direction: column;
}
.pate-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;
}
.pate-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;
}
.pate-explore-links {
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(3, clamp(200px, 13.542vw, 260px));
  gap: 20px;
  list-style: none;
}
.pate-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(--pate-navy);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
.pate-explore-card img {
  width: 50px;
  height: 50px;
  padding: 2px;
  object-fit: contain;
}
.pate-explore-card:hover { background: #dde1e8; color: var(--pate-navy); transform: translateY(-4px); }
.pate-explore-card.is-primary { background: var(--pate-navy); color: #fff; }
.pate-explore-card.is-primary:hover { background: #00184b; color: #fff; }
.pate-explore-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .pate-scene-inner { gap: 24px; }
  .pate-orbit { margin-right: 0; }
}
@media (max-width: 1024px) {
  .pate-scene-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 8px;
  }
  .pate-scene-text { padding-left: 0; align-self: stretch; }
  .pate-orbit { justify-self: center; --ring: clamp(200px, 30vw, 300px); }
  .pate-dash { flex-direction: column; }
  .pate-stats { flex-basis: auto; flex-direction: row; }
  .pate-stat { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pate-stat-num { align-self: flex-end; }
  .pate-key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pate-explore-links { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pate-scene-desc br { display: none; }
  .pate-stats { flex-direction: column; }
  .pate-stat { flex-direction: row; align-items: center; min-height: 104px; padding: 24px 20px; }
  .pate-stat-num { align-self: auto; }
  .pate-chart-body { padding-bottom: 48px; }
  .pate-bar em { top: calc(100% + 12px); }
  .pate-key-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pate-scene-title br { display: none; }
  .pate-orbit { --ring: 200px; padding: 0; }
  .pate-orbit-dot { display: none; }
  .pate-orbit-tags {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    width: min(358px, 100vw - 32px);
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .pate-orbit { margin-bottom: 96px; }
  .pate-orbit-tags li { position: static; padding: 4px 10px; font-size: 11px; }
  .pate-chart-head { flex-wrap: wrap; }
  .pate-chart-plot { padding: 0; }
  .pate-bar em { font-size: 13px; left: -4px; right: -4px; white-space: normal; }
  .pate-explore-links { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pate-explore-card { flex-direction: row; justify-content: flex-start; height: auto; padding: 18px 20px; }
  .pate-explore-card img { width: 40px; height: 40px; }
}