body.technology-page {
  overflow-x: hidden;
  background: #fff;
}

body.technology-page.is-pressure-auto {
  overscroll-behavior: none;
}

html:has(body.technology-page) {
  overflow-x: clip;
}

html:has(body.technology-page.is-pressure-auto) {
  scroll-behavior: auto;
  overscroll-behavior: none;
}

.technology-page main {
  background: #fff;
}

/* ---------- Frame 339: video placeholder hero ---------- */
.tech-hero {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  min-height: 100svh;
  padding: 230px var(--gutter) 200px;
  overflow: hidden;
  color: #fff;
  background: #111;
  text-align: center;
  isolation: isolate;
  clip-path: inset(0);
}

.tech-hero__placeholder {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #111;
  pointer-events: none;
}

.tech-hero__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .3);
  pointer-events: none;
}

.tech-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.tech-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
}

.tech-hero h1 {
  margin: 0;
  font-family: var(--font-latin);
  font-size: clamp(34px, 3.125vw, 60px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.tech-hero p {
  margin: 0;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.4;
}

/* ---------- Frame 105: one sticky scene, two visual states ---------- */
.pressure-story {
  --meter-progress: 0;
  --visual-progress: 0;
  position: relative;
  z-index: 2;
  margin-top: -1px;
  height: 260vh;
  min-height: 2100px;
  background: #f1f1f1;
}

.pressure-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  background: #f1f1f1;
}

.pressure-story.is-fixed .pressure-stage {
  position: fixed;
  z-index: 3;
}

.pressure-story.is-after .pressure-stage {
  position: absolute;
  top: auto;
  bottom: 0;
}

/* 두 장의 배경 사진을 한 박스로 묶는다.
   데스크톱에서는 무대를 그대로 덮어(absolute inset:0) 기존 배경 연출을 유지하고,
   모바일에서는 이 박스가 위쪽 칸이 되어 .pressure-copy 와 위/아래로 나뉜다. */
.pressure-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pressure-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  will-change: opacity;
}

.pressure-bg--before {
  opacity: calc(1 - var(--visual-progress));
}

.pressure-bg--after {
  opacity: var(--visual-progress);
}

.pressure-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(760px, 46vw);
  padding: 179px 0 0 clamp(80px, 6.56vw, 126px);
}

.pressure-heading {
  margin: 0 0 40px;
  color: #111;
  font-family: var(--font-latin);
  font-size: clamp(30px, 2.604vw, 50px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.pressure-heading span {
  display: block;
  color: rgba(0, 0, 0, .13);
  white-space: nowrap;
}

.pressure-heading strong {
  display: block;
  font-weight: 800;
  white-space: nowrap;
}

.pressure-text {
  position: relative;
  margin-bottom: 100px;
  min-height: 80px;
}

.pressure-text__item {
  position: absolute;
  inset: 0 auto auto 0;
  width: min(541px, 36vw);
  margin: 0;
  color: #222;
  font-size: clamp(18px, 1.354vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  word-break: keep-all;
}

.pressure-text__item--before {
  opacity: calc(1 - var(--visual-progress));
  transform: translateY(calc(var(--visual-progress) * -18px));
}

.pressure-text__item--after {
  opacity: var(--visual-progress);
  transform: translateY(calc((1 - var(--visual-progress)) * 18px));
}

.pressure-meter {
  position: relative;
  display: grid;
  gap: 20px;
  width: 294px;
  color: #222;
  font-family: var(--font-latin);
}

.pressure-meter p {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.005em;
}

.pressure-meter__track {
  position: relative;
  width: 294px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.pressure-meter__track::before,
.pressure-meter__track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.pressure-meter__track::before {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 26%, rgba(255, 68, 0, .35) 66%, #ff4400 100%);
  opacity: calc(1 - var(--meter-progress));
}

.pressure-meter__track::after {
  background: linear-gradient(90deg, #2f70ff 0%, rgba(47, 112, 255, .46) 42%, rgba(255, 255, 255, .92) 76%, #fff 100%);
  opacity: var(--meter-progress);
}

.pressure-meter__knob {
  position: absolute;
  top: 50%;
  /* 트랙 폭이 화면에 따라 달라지므로 이동거리도 % 로 잡는다.
     22px = 노브 12px + 좌우 여백 5px x2 */
  left: calc(5px + ((100% - 22px) * (1 - var(--meter-progress))));
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, #2f70ff calc(var(--meter-progress) * 100%), #ff4400 calc((1 - var(--meter-progress)) * 100%));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .72);
  transform: translateY(-50%);
}

.pressure-meter__labels {
  display: flex;
  justify-content: space-between;
  width: 294px;
  margin-top: 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* ---------- Frame 140: tabs ---------- */
.tech-tabs {
  position: relative;
  z-index: 4;
  padding: 160px var(--gutter) 0;
  background: #fff;
}

.tech-tabs__inner {
  width: min(1600px, 100%);
  margin: 0 auto;
}

.tech-tabs h2 {
  margin: 0 0 40px;
  color: #000;
  font-size: clamp(24px, 2.083vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.tech-tabs #tabsTitle,
.tech-tabs .tab-list-wrap,
.tech-tabs .tab-panel {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  will-change: opacity, transform;
}

.tech-tabs.is-visible #tabsTitle,
.tech-tabs.is-visible .tab-list-wrap,
.tech-tabs.is-visible .tab-panel {
  opacity: 1;
  transform: translateY(0);
}

.tech-tabs.is-visible #tabsTitle {
  transition-delay: .08s;
}

.tech-tabs.is-visible .tab-list-wrap {
  transition-delay: .24s;
}

.tech-tabs.is-visible .tab-panel {
  transition-delay: .42s;
}

/* 탭 줄과 "다음" 버튼을 함께 감싸는 상자. 버튼은 이 상자 기준으로 붙는다. */
.tab-list-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* 실제로 넘칠 때만 오른쪽에 버튼 자리를 비운다(JS 가 has-tab-overflow 를 붙인다).
   버튼의 hidden 상태가 아니라 넘침 여부에 묶어야, 끝까지 스크롤했을 때
   패딩이 붙었다 떨어졌다 하며 진동하지 않는다. */
.tab-list-wrap.has-tab-overflow .tab-list {
  padding-right: 62px;
}

/* 넘칠 때만 JS 가 hidden 을 떼어 보여준다. 폭 조건 없이 전 구간에서 동작한다. */
.tab-list__next {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  transform: translateY(-50%);
}

.tab-list__next::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, 1px);
}

.tab-list__next[hidden] {
  display: none;
}

/* 탭 줄은 항상 한 줄로 두고, 폭이 모자라면 알약 안에서 가로로 스크롤한다.
   (예전에는 1024 에서 2열, 560 에서 1열 그리드로 줄바꿈해 층이 갑자기 바뀌었다) */
.tab-list {
  /* 패딩을 변수로 두고 scroll-padding 에 그대로 넘긴다.
     scroll-snap-align: start 는 스크롤포트(=패딩 박스) 시작에 맞추기 때문에,
     scroll-padding 이 없으면 스냅이 왼쪽 패딩을 먹어 첫 탭이 벽에 붙는다. */
  --tab-list-pad: 0px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  padding: var(--tab-list-pad);
  scroll-padding-inline: var(--tab-list-pad);
  border: 1px solid #ddd;
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tab-list::-webkit-scrollbar {
  display: none;
}

.tab-button {
  /* 1024 초과: 예전처럼 5개가 폭을 균등하게 나눠 갖는다.
     다만 min-width: max-content 로 글자 폭 아래로는 줄지 않게 해서
     국문·일문이 항상 한 줄로 유지되고, 그보다 좁아지면 알약이 가로 스크롤된다. */
  flex: 1 1 0;
  min-width: max-content;
  white-space: nowrap;
  scroll-snap-align: start;
  min-height: 70px;
  padding: 18px 20px;
  border-radius: 999px;
  color: #000;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

/* 국문 라벨은 nowrap 으로 한 줄, 폭은 글자만큼만 → min-width 불필요.
   영/일/독은 라벨이 훨씬 길어(최장 297px) 한 줄로 묶으면 데스크톱에서도 계속 가로 스크롤이 된다.
   이 세 언어만 줄바꿈을 허용하고, 아래 1024 블록의 min-width 로 두 줄 안에 들어가게 잡는다.

   nsbs-components.css 의 body[data-lang] :is(...) 목록에도 .tab-button 이 들어 있어
   같은 값을 주지만, 그 목록이 바뀌어도 동작이 흔들리지 않도록 여기서 명시한다.
   (nsbs-technology.css 가 뒤에 로드되므로 같은 우선순위에서 이 규칙이 이긴다) */
body[data-lang="ja"] .tab-button {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* 영문·독문 라벨은 한 줄로 두면 탭 하나가 300px 을 넘어(최장 324px) 계속 스크롤이 된다.
   이 두 언어만 두 줄을 허용하고, 두 줄 안에 들어가는 최소 폭(210px)을 바닥으로 준다.
   210px 아래로는 세 줄이 되기 시작하므로, 그보다 좁아지면 알약이 가로 스크롤된다. */
body[data-lang="en"] .tab-button,
body[data-lang="de"] .tab-button {
  min-width: 210px;
  white-space: normal;
}

/* body[data-lang="en"] .tab-button,
body[data-lang="ja"] .tab-button,
body[data-lang="de"] .tab-button {
  min-width: 230px;
} */

.tab-button.is-active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.tab-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  min-height: 590px;
  margin-top: 40px;
  overflow: hidden;
  border-radius: 20px;
  background: #f5f5f5;
}

.tab-panel.is-changing {
  animation: tabPanelSwap .28s var(--ease);
}

.tab-panel__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 80px 0 80px 60px;
}

.tab-panel__copy > h3,
.tab-panel__copy > p,
.tab-panel__copy > .tab-tags {
  opacity: 0;
  transition: opacity .68s var(--ease);
  will-change: opacity;
}

.tech-tabs.is-visible .tab-panel__copy > h3,
.tech-tabs.is-visible .tab-panel__copy > p,
.tech-tabs.is-visible .tab-panel__copy > .tab-tags {
  opacity: 1;
}

.tech-tabs.is-visible .tab-panel__copy > h3 {
  transition-delay: .66s;
}

.tech-tabs.is-visible .tab-panel__copy > p {
  transition-delay: .82s;
}

.tech-tabs.is-visible .tab-panel__copy > .tab-tags {
  transition-delay: .98s;
}

.tab-panel h3 {
  margin: 0 0 40px;
  color: #000;
  font-size: clamp(18px, 1.563vw, 30px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.tab-panel p {
  margin: 0;
  color: #000;
  font-size: clamp(17px, 1.04vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.tab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 80px;
}

.tab-tags span {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 999px;
  color: #000;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.tab-panel__visual {
  padding: 20px;
}

.tab-panel__visual img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .12);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  will-change: opacity, transform;
}

.tab-panel.is-changing .tab-panel__visual img {
  transform: scale(.992);
}

/* ---------- Frame 141: sequential callouts ---------- */
.hybrid {
  position: relative;
  z-index: 4;
  min-height: 1080px;
  margin-top: 160px;
  overflow: hidden;
}

.hybrid__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.hybrid__inner {
  --callout-card-width: 340px;
  --callout-line-anchor: var(--callout-card-width);
  position: relative;
  z-index: 1;
  width: min(1600px, calc(100% - (var(--gutter) * 2)));
  min-height: 1080px;
  margin: 0 auto;
  padding: 160px 0;
}

.hybrid__title {
  display: grid;
  gap: 30px;
  color: #222;
}

.hybrid__title h2,
.hybrid__title p {
  margin: 0;
  word-break: keep-all;
}

.hybrid__title h2 {
  font-size: clamp(24px, 2.083vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.hybrid__title p {
  font-size: clamp(18px, 1.563vw, 30px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.callout-column {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 20px;
  width: var(--callout-card-width);
}

.callout-column--left {
  left: 0;
  top: 446px;
}

.callout-column--right {
  right: 0;
  top: 284px;
}

.callout-card {
  min-height: 142px;
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  color: #000;
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
  box-shadow: 0 14px 30px rgba(73, 96, 122, .08);
}

.callout-line {
  position: absolute;
  z-index: 1;
  width: 147px;
  height: 354.601px;
  opacity: 0;
  object-fit: contain;
  transform: translateY(42px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}

.callout-line--left {
  left: var(--callout-line-anchor);
  top: 510px;
}

.callout-line--right {
  right: var(--callout-line-anchor);
  top: 327px;
  width: 147.253px;
  height: 544.601px;
  transform: translateY(42px) rotate(180deg);
  transform-origin: center;
}

.hybrid.is-visible .callout-card {
  opacity: 1;
  transform: translateY(0);
}

.hybrid.is-visible .callout-line {
  opacity: 1;
  transform: translateY(0);
}

.hybrid.is-visible .callout-line--right {
  transform: translateY(0) rotate(180deg);
}

.hybrid.is-visible .callout-line--left { transition-delay: .28s; }
.hybrid.is-visible .callout-line--right { transition-delay: .34s; }
.hybrid.is-visible .callout-card:nth-child(1) { transition-delay: .10s; }
.hybrid.is-visible .callout-card:nth-child(2) { transition-delay: .32s; }
.hybrid.is-visible .callout-card:nth-child(3) { transition-delay: .54s; }
.hybrid.is-visible .callout-card:nth-child(4) { transition-delay: .76s; }

.callout-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.callout-card p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* ---------- Frame 338: quality system ---------- */
.quality {
  position: relative;
  z-index: 4;
  padding: 200px var(--gutter);
  background: #fff;
}

.quality__inner {
  display: grid;
  gap: 100px;
  width: min(1600px, 100%);
  margin: 0 auto;
}

.quality-row {
  display: grid;
  grid-template-columns: 900px minmax(0, 1fr);
  gap: 100px;
  align-items: end;
}

.quality-row__image,
.quality-row__copy {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .82s var(--ease), transform .82s var(--ease);
  will-change: opacity, transform;
}

.quality-row.is-visible .quality-row__image,
.quality-row.is-visible .quality-row__copy {
  opacity: 1;
  transform: translateY(0);
}

.quality-row:not(.quality-row--reverse).is-visible .quality-row__image,
.quality-row--reverse.is-visible .quality-row__copy {
  transition-delay: .08s;
}

.quality-row:not(.quality-row--reverse).is-visible .quality-row__copy,
.quality-row--reverse.is-visible .quality-row__image {
  transition-delay: .26s;
}

.quality-row--reverse {
  grid-template-columns: minmax(0, 550px) minmax(0, 950px);
}

.quality-row__image {
  overflow: hidden;
  border-radius: 20px;
}

.quality-row__image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.quality-row--reverse .quality-row__image img {
  height: 640px;
}

.quality-row__copy {
  display: grid;
  gap: 0;
  align-content: flex-end;
  min-height: 600px;
}

.quality-row__heading {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 20px;
}

.quality-row__heading img {
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.quality-row:first-child .quality-row__heading img {
  width: 57px;
  height: 51px;
}

.quality-row--reverse .quality-row__heading img {
  width: 43px;
  height: 63px;
}

.quality-row__heading h2 {
  margin: 0;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* body[data-lang="en"] .quality-row__heading h2,
body[data-lang="de"] .quality-row__heading h2 {
  line-height: 1.2;
} */

.quality-row h3 {
  margin: 0 0 60px;
  color: #222;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.quality-row p {
  margin: 0;
  color: #666;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

@keyframes tabPanelSwap {
  0% { opacity: .55; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1280px) {
  .pressure-copy {
    width: min(680px, 54vw);
    padding-left: var(--gutter);
  }

  .tab-panel,
  .quality-row,
  .quality-row--reverse {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
}

@media (max-width: 1024px) {
  .tech-hero {
    height: 760px;
    min-height: 82vh;
    padding-top: 190px;
    clip-path: none;
  }

  .tech-hero__placeholder {
    position: absolute;
  }

  .tech-tabs {
    padding-top: 100px;
  }

  .tab-list {
    --tab-list-pad: 8px;
    gap: 8px;
    border-radius: 80px;
    /* 탭이 글자 폭만 차지하므로 남는 자리는 탭 사이로 나눠 알약을 채운다.
       center/flex-end 는 넘칠 때 왼쪽이 잘려 스크롤로 못 가므로 쓰지 않는다. */
    justify-content: space-between;
  }

  /* 1024 이하는 언어 구분 없이 전부 한 줄. 글자 길이만큼만 차지하고,
     다 합쳐 알약을 넘치면 가로 스크롤 + next 버튼으로 넘긴다.
     언어별 선택자를 같이 적은 건 nsbs-components.css 의
     body[data-lang] :is(... .tab-button ...) 규칙(0,2,1)을 되돌리기 위해서다.
     min-height 를 auto 로 두는 건, 70px 고정이면 한 줄일 때 불필요하게 높아서다. */
  .tab-button,
  body[data-lang="en"] .tab-button,
  body[data-lang="ja"] .tab-button,
  body[data-lang="de"] .tab-button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: auto;
    padding: 14px 14px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .tab-panel {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tab-panel__copy {
    padding: 42px var(--gutter);
  }

  .tab-tags {
    margin-top: auto;
    padding-top: 20px;
  }

  .hybrid__title {
    gap: 20px;
}

  .tab-tags span {
    min-height: 42px;
    font-size: 15px;
  }

  .tab-panel__visual {
    padding: 0 var(--gutter) var(--gutter);
  }

  .tab-panel__visual img {
    height: auto;
    aspect-ratio: 1.35 / 1;
  }

  /* 배경 사진 위에 문구가 그대로 얹혀 있어 사진이 보이지 않았다.
     좁은 화면에서는 겹치기를 풀고 "문구 -> 사진" 순으로 위아래로 나눈다.
     .hybrid__bg 가 DOM 상 먼저 오므로 order 로 아래에 보낸다. */
  .hybrid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 100px;
    background: #b6c3d5;
  }

  .hybrid__inner {
    order: 1;
    width: 100%;
    min-height: 0;
    padding: 80px var(--gutter) 0;
  }

  .hybrid__bg {
    order: 2;
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 11;
    opacity: 1;
  }

  .callout-column {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 30px;
  }

  .callout-card {
    min-height: auto;
    padding: 20px
}

.callout-card p {
    font-size: 14px;
}

  .callout-column--right {
    margin-top: 20px;
  }

  .callout-line {
    display: none;
  }

  .callout-card {
    min-height: 0;
  }

  .quality {
    padding: 100px var(--gutter);
  }

  .quality-row,
  .quality-row--reverse {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .quality-row--reverse .quality-row__copy {
    order: 2;
  }

  .quality-row--reverse .quality-row__image {
    order: 1;
  }

  .quality-row__copy {
    min-height: 0;
    gap: 0;
  }

  .quality-row__image img,
  .quality-row--reverse .quality-row__image img {
    height: auto;
    aspect-ratio: 1.5 / 1;
  }

  .tab-panel h3 {
    margin: 0 0 20px;
  }
}

@media (max-width: 1080px) {
  .callout-line {
    display: none;
  }
}

/* 768px 이하: 미터 제목과 라벨을 흰 알약 배경 위에 올려
   배경 사진 위에서도 읽히게 한다. */
@media (max-width: 768px) {
  /* 모바일: 이미지와 문구는 위아래로 분리하되, 고정(pin) 연출은 되살린다.
     - 섹션 200svh -> 스크롤 이동거리 100svh 확보
     - 무대는 그 동안 화면에 고정되고, 게이지/이미지 전환이 끝나면 풀린다
     무대 높이는 100svh 여야 한다. 핀이 걸릴 때(top:0)와 풀릴 때(bottom:0)의
     위치가 정확히 맞아떨어져야 전환 순간에 튀지 않는다.
     이미지 칸은 화면이 짧아도 문구 자리를 남기도록 svh 로 한 번 더 제한한다. */
  .pressure-story {
    --stage-image-h: min(340px, 44svh);
    height: 200svh;
    min-height: 0;
  }

  .pressure-stage {
    position: absolute;
    top: 0;
    bottom: auto;
    height: 100svh;
    min-height: 0;
    /* 이미지와 문구를 화면 가운데로 모은다.
       space-between 이면 세로가 긴 화면에서 둘 사이가 과하게 벌어진다. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

  .pressure-visual {
    position: relative;
    inset: auto;
    flex: 0 0 var(--stage-image-h);
    width: 100%;
  }

  /* 가운데로 모으면 사진 위쪽에 배경이 드러나 상단이 뚝 끊겨 보인다.
     배경과 같은 색에서 투명으로 떨어지는 띠를 덮어 경계를 지운다. */
  .pressure-visual::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    height: clamp(56px, 26%, 120px);
    background: linear-gradient(to bottom, #f1f1f1 0%, rgba(241, 241, 241, .82) 38%, rgba(241, 241, 241, 0) 100%);
    pointer-events: none;
  }

  .pressure-copy {
    flex: 0 0 auto;
  }

  .pressure-story.is-fixed .pressure-stage {
    position: fixed;
    gap: 20px;
  }

  .pressure-story.is-after .pressure-stage {
    position: absolute;
    top: auto;
    bottom: 0;
  }

  .pressure-bg {
    object-position: 57% center;
  }

  .pressure-copy {
    width: 100%;
    gap: 0;
    /* 무대 높이가 100svh 로 고정이라, 남는 칸 안에 들어가도록 아래 여백을 줄인다. */
    padding: 36px var(--gutter) 40px;
  }

  .pressure-heading {
    margin: 0 0 20px;
  }

  .pressure-heading span,
  .pressure-heading strong {
    white-space: normal;
  }

  .pressure-text {
    margin-bottom: 36px;
    min-height: 0;
  }

  .pressure-text,
  .pressure-text__item {
    position: relative;
    width: 100%;
  }

  .pressure-text__item--before {
    opacity: 0;
    height: 0;
    overflow: hidden;
  }

  .pressure-text__item--after {
    opacity: 1;
    transform: none;
  }

  .pressure-meter p,
  .pressure-meter__labels {
    border-radius: 100px;
  }
  .tab-tags span {
    min-height: auto;
    font-size: 14px;
    padding: 6px 6px;
  }
  .tab-tags {
    gap: 6px;
}
.quality-row__heading h2 {
  font-size: 24px;
}
.quality-row:first-child .quality-row__heading img {
    width: 48px;
    height: 44px;
}
.quality-row h3 {
    margin: 0 0 20px;
}
.quality-row p {
    font-size: 14px;
}
.quality-row--reverse .quality-row__heading img {
    width: 36px;
    height: 57px;
}
 .quality {
    padding: 100px var(--gutter) 40px;
  }

  .pressure-meter {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .tech-hero {
    height: 620px;
    min-height: 74vh;
  }

  .tech-hero__copy {
    gap: 24px;
  }

  /* 작은 화면에서는 이미지 칸을 조금 낮춘다.
     문구가 더 이상 사진 위에 얹히지 않으므로, 가독성용 농도 제한(.78)은 걷어내고
     기본 규칙의 전체 교차 페이드를 그대로 쓴다. */
  .pressure-story {
    --stage-image-h: min(260px, 38svh);
  }

  .pressure-bg {
    object-position: 62% center;
  }

  .pressure-meter,
  .pressure-meter__track,
  .pressure-meter__labels {
    width: 100%;
  }

  .tab-button {
    /* min-width: 124px; */
    font-size: 15px;
  }

  /* body[data-lang="en"] .tab-button,
  body[data-lang="ja"] .tab-button,
  body[data-lang="de"] .tab-button {
    min-width: 190px;
  } */

  /* 문구가 더 이상 사진 위에 얹히지 않으므로 가독성용 농도 보정은 쓰지 않는다. */
  .hybrid__bg {
    aspect-ratio: 3 / 3;
  }

  .quality__inner {
    gap: 72px;
  }
}

/* 세로가 짧은 화면(가로 모드, 작은 창)에서는 무대가 100svh 라
   이미지 칸 + 문구 + 미터가 화면 안에 다 안 들어와 아래가 잘렸다.
   핀 구간에서 게이지까지 다 보이는 것이 목적이므로 여기서 더 압축한다. */
@media (max-width: 768px) and (max-height: 640px) {
  .pressure-story {
    --stage-image-h: min(200px, 32svh);
  }

  .pressure-copy {
    padding: 20px var(--gutter) 24px;
  }

  .pressure-heading {
    margin: 0 0 12px;
  }

  .pressure-text {
    margin-bottom: 20px;
  }

  .pressure-meter {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pressure-bg,
  .pressure-text__item,
  .pressure-meter__knob,
  .tech-tabs #tabsTitle,
  .tech-tabs .tab-list,
  .tab-panel,
  .tab-panel__copy > h3,
  .tab-panel__copy > p,
  .tab-panel__copy > .tab-tags,
  .callout-card,
  .quality-row__image,
  .quality-row__copy {
    transition: none !important;
    animation: none !important;
  }

  .tech-tabs #tabsTitle,
  .tech-tabs .tab-list,
  .tech-tabs .tab-panel,
  .tab-panel__copy > h3,
  .tab-panel__copy > p,
  .tab-panel__copy > .tab-tags,
  .quality-row__image,
  .quality-row__copy {
    opacity: 1;
    transform: none;
  }
}