/* =========================================================
   HUBISLAB — TECHNOLOGY DETAIL PAGE (MITT / NCPP / MINECEL)
   Layout per the supplied mockup: sub-tab bar, split hero,
   an MTD + Cargo mechanism diagram, then outcome donuts.
   Values are literal rather than var(--x) because these pages
   load style.css, whose --navy is #13201f — see site-blocks.css
   for the same trap.
   ========================================================= */

.tp{
  --tp-navy:#0E2A47;
  /* Chart accent. Was a teal that belonged to no part of the brand; now the
     HUBISLAB navy, the same value the footer and CTA use. */
  --tp-accent:#0E2A47;
  --tp-ink:#1a1a1a;
  --tp-mute:#6b7480;
  --tp-line:var(--nv-line,#d5dce5);
  --tp-wash:#f5f7fa;
}

/* ---------- sub-tab bar ----------
   Modelled on the manyo reference: the sub-categories span the full width in
   equal columns, separated by short hairline rules, rather than sitting as a
   small cluster in the middle. Active is simply dark; inactive is grey. */
.tp-tabs{
  position:sticky;top:var(--navh,74px);z-index:20;
  background:#fff;border-bottom:1px solid var(--tp-line);
}
.tp-tabs__in{
  max-width:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
/* Measured off the manyo reference screenshot (2x capture, so halve the pixels):
   label ascender 19px -> ~13px type; text centre 56px below the header rule, so
   a ~56px bar; divider 1px, pure black, 42px tall centred -> 21px. */
.tp-tabs a{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(13px,1.3vw,19px) 10px;
  font-size:clamp(12px,.9vw,15px);font-weight:700;letter-spacing:.04em;
  color:#9aa4b0;text-decoration:none;position:relative;
  transition:color .2s ease;
}
/* 중분류끼리의 세로 구분선 — 대분류(헤더)와 중분류 사이 가름선(var(--tp-line))과
   같은 헤어라인으로 통일. 짧고 가운데 정렬, 셀 전체 높이는 아님. */
.tp-tabs a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:21px;background:var(--tp-line);
}
.tp-tabs a:hover{color:var(--tp-ink);}
.tp-tabs a[aria-current="page"]{color:var(--tp-ink);}

/* ---------- hero ----------
   Modelled on project-pef.com/#mechanism.

   That site sets html{font-size} to viewport/1920 px and expresses every size in
   rem, so it scales linearly from a 1920 design. Measured at vw 2560 the root is
   1.3333px, which back-solves to these 1920 design values:
     eyebrow 16px/500/#FFAE00      title 50px/500/#101010 ls -.03em
     KR body 18px/400/#101010      EN body 17px/300/#575758
     gutter 120px, columns 1193:895 (42.9% to the image), image 1.68:1, radius 5px
   The clamps below hit those 1920 numbers at 1440 — shrinking them by 1440/2560
   made the whole block far too small — and converge on the reference's own
   rendered sizes at 2560. Fonts stay Pretendard per this project's stack. */
.tp-hero{
  padding:clamp(44px,5.5vw,86px) clamp(20px,4vw,60px) clamp(48px,6vw,96px);
}
.tp-hero__in{
  max-width:1440px;margin:0 auto;
  /* 카피 컬럼 비중을 1.12 → 1.8 로 키웠다. 부제("Mineral Intracellular
     Transduction Technology")가 컬럼을 넘쳐 사진과 맞물려 보였던 탓이다.
     사진(우측)은 그만큼 작아지고, tech-page.js 는 카피 컬럼 우측 끝에서
     쉬는 위치를 계산하므로 별도 수정 없이 따라온다. */
  display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  gap:clamp(36px,4.4vw,92px);
  /* Centre both columns in a hero tall enough to breathe. Without the min-height
     the copy sat straight under the tab bar. The height matches the expanded
     media exactly (see targetSize() in tech-page.js) so that at full bleed the
     image fills this box edge to edge instead of leaving bands above and below. */
  min-height:min(calc(100vh - var(--navh,74px) - 48px), calc(100vw / 2.4));
  align-items:center;
}
/* Number, square marker and label. The reference runs this in amber, but on this
   site the eyebrow sits over a photograph that the hero slides underneath, and
   amber on that backdrop read as a stray highlight rather than part of the
   heading group. Kept in the same ink as the title so the block reads as one. */
.tp-hero__eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:clamp(14px,1.11vw,21.5px);font-weight:500;letter-spacing:.02em;
  color:#101010;margin:0 0 clamp(28px,3.9vw,60px);
}
.tp-hero__eyebrow::before{
  content:"";width:5px;height:5px;background:currentColor;flex:0 0 auto;
  order:1;
}
.tp-hero__eyebrow>span:first-child{order:0;}
.tp-hero__eyebrow>span:last-child{order:2;}
.tp-hero__title{
  font-size:clamp(50px,4.8vw,96px);
  font-weight:800;                 /* Pretendard ExtraBold */
  line-height:1.06;
  letter-spacing:-.035em;color:#101010;margin:0;
}
/* pulled up tight under the title, with its own leading tightened */
.tp-hero__sub{
  margin:clamp(6px,.6vw,12px) 0 0;
  font-size:clamp(18px,1.55vw,31px);font-weight:500;letter-spacing:-.02em;
  line-height:1.32;color:#575758;
}
/* Title, subtitle and body now read as one group rather than two blocks split by
   a void — the whole cluster is centred vertically by .tp-hero__in instead. */
.tp-hero__lead{
  margin:clamp(20px,2.2vw,42px) 0 0;
  font-size:clamp(15px,1.25vw,24px);font-weight:400;line-height:1.45;
  letter-spacing:-.02em;color:#101010;max-width:40em;
}
.tp-hero__lead--strong{font-weight:400;color:#101010;}
/* MINECEL's subtitle is a Korean descriptor rather than the English expansion of
   an acronym, so it carries the weight of a statement instead of sitting back as
   a translation. */
.tp-hero__sub--kr{
  font-size:clamp(16px,1.32vw,26px);font-weight:700;color:#101010;
  letter-spacing:-.025em;line-height:1.4;max-width:26em;
}
/* the pipes are separators, not content — held back so the phrases read first */
.tp-hero__sep{color:#b9c1cb;margin:0 .5em;font-weight:300;}
.tp-hero__media{
  border-radius:5px;overflow:hidden;background:var(--tp-wash);
  aspect-ratio:1.68;
  /* sits UNDER the copy: as it widens it becomes the backdrop the text reads on,
     rather than sliding over the top of it */
  position:relative;z-index:0;
  will-change:width,height,transform;
}
.tp-hero__media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- scroll expand ----------
   tech-page.js pins the hero and drives the right-hand card out to full bleed as
   you scroll, turning it into the page's hero banner. The section is given extra
   height in JS to create the scroll runway; without JS nothing here applies and
   the hero stays the plain two-column block. */
.tp-hero{position:relative;}
.tp-hero__pin{position:sticky;top:var(--navh,74px);}
/* copy stays on top of the widening image and stays visible */
.tp-hero__copy{position:relative;z-index:2;}
.tp-hero.is-expanding .tp-hero__media{aspect-ratio:auto;}

/* Two scrims that hand over to each other, because no single treatment works
   across the whole expand.

   MIDDLE of the expand (--tpOn): the photo's edge is somewhere inside the copy
   column, so the text is half on white page and half on the photograph. A white
   scrim keeps that backdrop light and the dark type readable.

   END of the expand (--tpFull): the photo now covers the whole hero, so there is
   no white page left to match. The white scrim is retired — that veil was what
   made the finished banner look washed out — a soft dark scrim fades in on the
   text side only, and the copy crosses to white. The right of the frame stays
   completely clear, so the photograph reads at full strength.

   Both variables are set by tech-page.js. */
/* 흰 스크림을 크게 올렸다. 이 페이지들의 사진(버블·랩샷)은 어두운 청록 계열이라
   기존 농도(.62 → 0)로는 사진이 카피 밑으로 들어온 순간 먹색 글자가 묻혔다.
   "사진이 카피를 가린다"고 보였던 실제 원인이 이것이다. */
.tp-hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.9) 30%,
    rgba(255,255,255,.66) 54%,
    rgba(255,255,255,.28) 76%,
    rgba(255,255,255,0) 100%);
  opacity:var(--tpOn,0);
}
.tp-hero__media::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,
    rgba(8,16,26,.66) 0%,
    rgba(8,16,26,.52) 26%,
    rgba(8,16,26,.28) 48%,
    rgba(8,16,26,.08) 70%,
    rgba(8,16,26,0) 88%);
  opacity:var(--tpFull,0);
}
/* Crossfade the type rather than switching it, so there is no frame where the
   colour is wrong. --tpFull only leaves 0 once the photo owns the whole hero. */
.tp-hero__title,
.tp-hero__sub,
.tp-hero__lead,
.tp-hero__eyebrow{
  --tpInk:#101010;
  color:color-mix(in srgb, #fff calc(var(--tpFull,0) * 100%), var(--tpInk));
}
.tp-hero__sub{--tpInk:#575758;}

@media (prefers-reduced-motion:reduce){
  .tp-hero__pin{position:static;}
}

/* ---------- generic block ---------- */
.tp-block{padding:clamp(64px,9vw,140px) clamp(20px,4vw,60px);}
/* Sections are told apart by background colour rather than a rule: white →
   tinted → white, so each block reads as its own field. */
.tp-block--wash{background:var(--tp-wash);}
.tp-block__in{max-width:1440px;margin:0 auto;}
/* scaled to sit under the hero (title 69px @1440) rather than looking like a
   different, smaller page */
.tp-block__h{
  font-size:clamp(28px,3.1vw,60px);font-weight:800;line-height:1.28;
  letter-spacing:-.03em;color:var(--tp-ink);margin:0;
}
.tp-block__p{
  margin:clamp(14px,1.6vw,26px) 0 0;
  font-size:clamp(15px,1.25vw,24px);line-height:1.6;
  letter-spacing:-.02em;color:var(--tp-mute);max-width:62em;
}

/* ---------- MTD + Cargo diagram ---------- */
.tp-mech{
  margin-top:clamp(34px,5vw,64px);
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:clamp(14px,2vw,32px);
}
/* 340px keeps all three circles plus their two arrows on one row at 1440 —
   at 400px the third wrapped to a second line. */
.tp-mech__node{flex:0 1 320px;text-align:center;}
.tp-mech__disc{
  width:clamp(190px,21vw,320px);aspect-ratio:1;margin:0 auto clamp(26px,3vw,44px);
  border-radius:50%;background:#e9ecef;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tp-mech__disc--result{background:var(--tp-navy);}
.tp-mech__disc--result span{
  font-size:clamp(13px,1.15vw,20px);font-weight:700;letter-spacing:.04em;color:#e4b9b9;
}
/* Minecel 다이어그램(--sum)만: 좌우 두 재료가 가운데 결과물로 합쳐지는 구성이라
   세 원이 같은 크기면 무엇이 결과인지 읽히지 않는다. 가운데만 키운다.
   좌우 원 크기는 그대로 둔다 — tech-page.js 가 첫 원의 폭으로 아래 3열
   (.tp-feats) 을 정렬하므로 건드리면 그 줄까지 좁아진다. */
.tp-mech--sum{gap:clamp(12px,1.5vw,24px);}
/* 좌우(재료)는 살짝 줄이고 가운데(결과)는 살짝 키워 대비를 320:380 → 290:410 으로
   벌린다. 노드 기준폭도 같은 식으로 묶어야 좁은 화면에서 줄바꿈이 앞당겨지지 않는다. */
.tp-mech--sum .tp-mech__disc{width:clamp(175px,19vw,290px);}
.tp-mech--sum .tp-mech__node{flex-basis:clamp(175px,19vw,290px);}
.tp-mech--sum .tp-mech__disc--result{width:clamp(250px,27vw,410px);}
.tp-mech--sum .tp-mech__node--result{flex-basis:clamp(250px,27vw,410px);}
.tp-mech--sum .tp-mech__node--result .tp-mech__name{font-size:clamp(20px,1.9vw,34px);}

.tp-mech__name{
  font-size:clamp(18px,1.65vw,30px);font-weight:800;color:var(--tp-ink);
  letter-spacing:-.015em;margin:0;
}
.tp-mech__en{
  display:block;font-size:clamp(14px,1.22vw,21px);font-weight:600;color:var(--tp-mute);
  letter-spacing:0;margin-top:7px;
}
.tp-mech__desc{
  margin:clamp(14px,1.35vw,24px) 0 0;
  font-size:clamp(15px,1.3vw,23px);line-height:1.62;color:var(--tp-mute);
}
/* The centre node states the outcome of the whole diagram rather than a
   property of one circle, so it is set in the body ink and tied to MINECEL by a
   dotted stem instead of floating as another grey caption. */
.tp-mech__tick{
  width:1px;height:clamp(18px,2.2vw,34px);
  margin:clamp(12px,1.5vw,22px) auto 0;
  background:repeating-linear-gradient(180deg,#9db9d1 0 3px,transparent 3px 6px);
}
.tp-mech__desc--lead{
  margin-top:clamp(12px,1.5vw,22px);
  font-weight:700;color:var(--tp-ink);
}
/* ---------- the 2–4 group IS MITT ----------
   Framing steps 2 through 4 and tagging the frame states that the whole delivery
   mechanism — not any single circle — is what MITT refers to. */
/* more air between the section's description and the diagram */
.tp-mechBox{position:relative;margin-top:clamp(56px,8vw,120px);}
.tp-mechBox .tp-mech{margin-top:0;}

/* ---------- section rises into the pin ----------
   Same mechanic as about.html's .tech__rise / .stmt__bg: the section is pinned
   and the whole panel is scrubbed up from translateY(101%) to 0 by scroll, so the
   section itself slides up over what came before — not just its text.
   Height for the runway is set in tech-page.js. */
}
/* Matches about.html's .tech__rise: the layer that slides up is a darkened
   photograph, which is the only reason the motion reads there. A white panel
   climbing over a white one is invisible however correct the maths is. */

/* arrow draws left to right once step 3 lands, then step 4 appears */
.tp-mech__op--arrow svg line,
.tp-mech__op--arrow svg path{
  stroke-dasharray:90;stroke-dashoffset:90;
  transition:stroke-dashoffset .55s cubic-bezier(.3,.7,.3,1)
             calc(var(--tpd,0) * .16s + .12s);
}
.tp-mech__op--arrow.in svg line,
.tp-mech__op--arrow.in svg path{stroke-dashoffset:0;}
/* Pinned to the circles' own centre line. `align-self:center` centred the arrow
   against the whole node — circle plus its caption block — which pushed it well
   below the circles. Anchoring to the top and dropping by half the disc height
   puts it exactly level with them, whatever the disc size. */
/* Pinned to the circles' own centre line. `align-self:center` centred the arrow
   against the whole node — circle plus its caption block — which pushed it well
   below the circles. Anchor to the top instead and drop by half the disc height,
   minus half the arrow's own 14px height. Done with margin rather than a
   transform, because [data-tp-reveal] already owns transform on this element and
   would wipe the offset out the moment the reveal fired. */
.tp-mech__op{
  flex:0 0 auto;align-self:flex-start;
  /* line-height:0 + a block-level svg so the box is exactly the arrow's 14px and
     carries no inline baseline gap — otherwise the arrow sat 14px low. */
  display:flex;align-items:center;line-height:0;
  margin-top:calc(clamp(190px,21vw,320px) / 2 - 7px);
  color:#b9c1cb;
}
.tp-mech__op svg{
  display:block;
  width:clamp(56px,7vw,116px);height:14px;stroke:#b9c1cb;fill:none;stroke-width:1.2;
}

/* MTD × Cargo 사이는 진행이 아니라 결합이라 + 로 표시한다.
   화살표(가로 84x14)와 달리 정사각이라 원 중심선에 맞추는 오프셋도 따로 준다. */
.tp-mech__op--plus svg{
  width:clamp(20px,2.2vw,32px);height:clamp(20px,2.2vw,32px);stroke-width:1.4;
}
.tp-mech__op--plus{
  margin-top:calc(clamp(190px,21vw,320px) / 2 - clamp(10px,1.1vw,16px));
}
.tp-mech__op--plus svg line{
  stroke-dasharray:40;stroke-dashoffset:40;
  transition:stroke-dashoffset .55s cubic-bezier(.3,.7,.3,1)
             calc(var(--tpd,0) * .16s + .12s);
}
.tp-mech__op--plus.in svg line{stroke-dashoffset:0;}
/* MINECEL states its composition as an equation rather than a sequence, so its
   operator slots carry + and = glyphs instead of arrows. Same centring trick:
   the box is anchored to the top of the node and dropped by half a disc, so the
   sign lands on the circles' centre line whatever the disc size. */
.tp-mech__op--sign{
  justify-content:center;line-height:1;
  margin-top:calc(clamp(190px,21vw,320px) / 2 - .5em);
  font-size:clamp(28px,3.2vw,54px);font-weight:300;color:#b9c1cb;
  width:clamp(56px,7vw,116px);
}

/* ---------- artwork inside each step's circle ----------
   The stills are given a slow drift-and-breathe so the specimens read as live
   under the lens. Scale never drops below 1, otherwise the image would pull away
   from the circular mask and show a gap. Each node runs a different duration and
   direction so the three never move in lockstep. */
.tp-mech__art{
  width:100%;height:100%;display:block;border-radius:50%;
  transform-origin:center;
  will-change:transform;
  /* !important is required, not decorative: style.css carries a global
     @media(prefers-reduced-motion){ *{animation:none!important} } kill switch,
     which silently stopped this drift for anyone with "reduce animations" on in
     Windows. A class selector with !important outranks that universal rule. */
  animation:tpDrift 13s linear infinite !important;
}
.tp-mech__node:nth-of-type(3) .tp-mech__art{
  animation-duration:16s !important;animation-delay:-6s !important;
}
.tp-mech__tail .tp-mech__art,
.tp-mech__disc--result .tp-mech__art{
  animation:tpDrift 19s linear infinite reverse !important;
  animation-delay:-4s !important;
}

/* A CLOSED loop, deliberately. The earlier keyframes ran `alternate`, so every
   cycle played forward, stopped dead, and rewound — which is exactly what made
   the motion read as mechanical. Here 0% and 100% are the same transform, so the
   animation can run one direction forever and never turns around.

   Three more rules that keep it looking like a specimen adrift rather than an
   effect: `linear` timing (ease-in-out would slow into every keyframe and
   reintroduce the pulsing), a CONSTANT scale (the old 1.03→1.16→1.06 zoom pumped
   visibly), and no rotation at all (a rotating circular crop reads as a spinning
   picture, not a drifting subject). Only the position moves, on an irregular
   path so it never traces an obvious circle.

   Scale must stay above the largest translate or the image pulls away from the
   circular mask and shows a gap: 1.12 covers the 3.2% maximum here. */
@keyframes tpDrift{
  0%   {transform:scale(1.19) translate(0,0);}
  18%  {transform:scale(1.19) translate(4.6%,-2%);}
  37%  {transform:scale(1.19) translate(3%,-5.6%);}
  55%  {transform:scale(1.19) translate(-2%,-5%);}
  72%  {transform:scale(1.19) translate(-5%,-2.5%);}
  88%  {transform:scale(1.19) translate(-2.8%,1.2%);}
  100% {transform:scale(1.19) translate(0,0);}
}
/* Fields of many small particles need more travel before the motion is legible
   at all — a single subject filling the circle shows movement that dozens of tiny
   droplets simply hide. Same closed-loop, linear, no-rotation rules. */
.tp-mech__art--float{
  animation:tpFloat 17s linear infinite !important;
}
@keyframes tpFloat{
  0%   {transform:scale(1.24) translate(0,0);}
  16%  {transform:scale(1.24) translate(5.4%,-2.6%);}
  33%  {transform:scale(1.24) translate(6.6%,-6.4%);}
  50%  {transform:scale(1.24) translate(1.8%,-8%);}
  67%  {transform:scale(1.24) translate(-4.6%,-6.2%);}
  84%  {transform:scale(1.24) translate(-5.6%,-2.4%);}
  100% {transform:scale(1.24) translate(0,0);}
}

/* tinted band — separates the MITT statement from the mechanism */

/* ---------- MITT statement band ----------
   Taller than a normal block, with the micrograph running behind the copy. The
   backdrop is two identical tiles side by side inside a 200%-wide track; sliding
   the track exactly -50% lands tile 2 where tile 1 began, so the loop is seamless
   and the motion never appears to reset.
   !important on the animation is required: style.css carries a global
   @media(prefers-reduced-motion){ *{animation:none!important} }. */
.tp-band{
  position:relative;overflow:hidden;
  padding-top:clamp(150px,20vw,340px);padding-bottom:clamp(150px,20vw,340px);
  background:var(--tp-wash);
}
/* The backdrop steps through the three stages of the mechanism — MTD, then
   Cargo, then the target cell — rather than panning at a constant rate. Each
   layer holds its turn, drifts in slowly, and cross-fades to the next, so the
   band reads as the process advancing instead of wallpaper sliding by. */
/* One continuous clip across the whole band — no tiles, no columns, no still
   image underneath. The wrapper must carry NO background of its own: leaving the
   old photo on it put a second layer behind an unsized <video>, which is what
   produced the vertical seam down the middle. */
.tp-band__bg{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  opacity:.3;background:none;
}
.tp-band__vid{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* keeps the dark copy readable over the artwork */
.tp-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(245,247,250,.86) 0%,
    rgba(245,247,250,.72) 50%,
    rgba(245,247,250,.86) 100%);
}
.tp-band > .tp-block__in{position:relative;z-index:1;}
@keyframes tpPan{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

/* MITT definition */
.tp-def{text-align:center;}
.tp-def__name{
  font-size:clamp(44px,5.4vw,108px);font-weight:800;letter-spacing:-.04em;
  color:var(--tp-ink);margin:0;line-height:1.04;
}
/* Sized to land on exactly two lines: the copy is ~59 characters, so a 32ch
   measure splits it evenly rather than leaving a stub. Narrower (30ch) pushed it
   to four; unconstrained it ran as one long ribbon. */
.tp-def__p{
  margin:clamp(20px,2.1vw,38px) auto 0;max-width:32em;
  font-size:clamp(15px,1.28vw,26px);line-height:1.62;
  letter-spacing:-.02em;color:var(--tp-mute);
}

/* ---------- outcome donuts ---------- */
/* scaled up to match the diagram section above, which was enlarged */
.tp-stats{
  margin-top:clamp(56px,8vw,120px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,6vw,110px);max-width:1240px;margin-left:auto;margin-right:auto;
}
.tp-stat{text-align:center;}
.tp-stat__label{
  font-size:clamp(18px,1.65vw,30px);font-weight:700;letter-spacing:-.015em;
  color:var(--tp-mute);margin:0 0 clamp(22px,3vw,40px);
}
.tp-stat--hi .tp-stat__label{color:var(--tp-ink);}
.tp-stat__ring{width:clamp(220px,27vw,400px);margin:0 auto;}
.tp-stat__ring svg{width:100%;height:auto;display:block;transform:rotate(-90deg);}
.tp-stat__track{fill:none;stroke:#eceff2;stroke-width:9;}
.tp-stat__arc{
  fill:none;stroke:#c9ced5;stroke-width:9;stroke-linecap:round;
  /* dasharray/offset are set inline per stat; the transition runs on reveal */
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,.72,.2,1);
}
.tp-stat--hi .tp-stat__arc{stroke:var(--tp-accent);stroke-width:11;}
.tp-stat__num{
  fill:var(--tp-mute);font-size:34px;font-weight:800;letter-spacing:-.02em;
  text-anchor:middle;dominant-baseline:central;
}
.tp-stat--hi .tp-stat__num{fill:var(--tp-accent);font-size:38px;}
/* three parallel points per column, not a bold lead plus body */
.tp-stat__cap{
  margin:clamp(22px,3vw,40px) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:clamp(8px,.9vw,15px);
}
.tp-stat__cap li{
  font-size:clamp(15px,1.3vw,23px);line-height:1.5;
  letter-spacing:-.015em;color:var(--tp-mute);
}
/* the MITT column is the point of the comparison, so its list carries the weight */
.tp-stat--hi .tp-stat__cap li{color:var(--tp-ink);font-weight:700;}

/* ---------- active tab framed by dividers (NCPP mockup) ----------
   Opt-in via .tp-tabs--framed so the MITT page keeps its plain underline. */
/* NB: .tp-tabs--framed sits ON .tp-tabs, so the anchors are addressed directly.
   ".tp-tabs--framed .tp-tabs a" would look for a nested .tp-tabs and never match. */
.tp-tabs--framed .tp-tabs__in{gap:0;}
.tp-tabs--framed a{padding-left:clamp(26px,5vw,64px);padding-right:clamp(26px,5vw,64px);}
.tp-tabs--framed a[aria-current="page"]{
  border-left:1px solid var(--tp-line);border-right:1px solid var(--tp-line);
}
.tp-tabs--framed a[aria-current="page"]::after{left:-1px;right:-1px;}

/* ---------- 3-step flow: caption above the disc, arrows between ---------- */
.tp-flow{
  margin-top:clamp(34px,5vw,64px);
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start;gap:0 clamp(6px,1.4vw,20px);
}
.tp-flow__step{text-align:center;min-width:0;}
.tp-flow__cap{
  font-size:clamp(12.5px,1.15vw,15px);font-weight:700;letter-spacing:-.01em;
  color:var(--tp-ink);margin:0 0 clamp(14px,2vw,20px);
}
.tp-flow__disc{
  width:clamp(120px,14vw,168px);aspect-ratio:1;margin:0 auto clamp(14px,2vw,20px);
  border-radius:50%;background:#e9ecef;
}
.tp-flow__desc{
  margin:0 auto;max-width:20em;
  font-size:12.5px;line-height:1.72;color:var(--tp-mute);
}
.tp-flow__arrow{
  align-self:center;padding-top:clamp(58px,8vw,104px);
}
.tp-flow__arrow svg{
  width:clamp(38px,5vw,72px);height:12px;
  stroke:var(--tp-ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- centred block heading (MINECEL mockup) ---------- */
.tp-block--center{text-align:center;}
.tp-block--center .tp-block__p{margin-left:auto;margin-right:auto;}

/* hero meta strip: "제약 동일 공정 | 무방부제 | 검증된 임상 결과" */
.tp-hero__meta{
  margin:clamp(16px,2.2vw,24px) 0 0;
  font-size:clamp(11.5px,.95vw,13px);font-weight:700;letter-spacing:-.01em;
  color:var(--tp-navy);
}
.tp-hero__meta span{color:#c4ccd6;margin:0 9px;font-weight:400;}

/* ---------- pale panel holding the ingredient story ---------- */
.tp-panel{
  margin-top:clamp(30px,4.5vw,52px);
  background:linear-gradient(180deg,#eef5fa 0%,#e8f1f8 100%);
  border-radius:4px;
  padding:clamp(30px,4.5vw,58px) clamp(20px,3.5vw,48px);
}

/* bubbles -> droplet -> minerals */
.tp-mflow{
  display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;
  align-items:center;gap:0 clamp(8px,1.6vw,22px);
}
.tp-mflow__side{text-align:center;min-width:0;}
.tp-mflow__disc{
  width:clamp(96px,11vw,140px);aspect-ratio:1;margin:0 auto clamp(12px,1.6vw,18px);
  border-radius:50%;background:rgba(255,255,255,.72);
  display:flex;align-items:center;justify-content:center;
}
.tp-mflow__disc svg{width:56%;height:56%;fill:none;stroke:#8fb6d4;stroke-width:1.1;}
.tp-mflow__label{
  margin:0;font-size:12.5px;font-weight:700;color:var(--tp-navy);line-height:1.6;
}
.tp-mflow__arrow{align-self:center;}
.tp-mflow__arrow svg{
  width:clamp(30px,4vw,58px);height:11px;
  stroke:#7f9db8;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
}
.tp-mflow__mid{text-align:center;min-width:0;}
/* teardrop: a circle with one square corner, rotated so the point faces up.
   The label counter-rotates so it stays level. */
.tp-mflow__drop{
  position:relative;
  width:clamp(104px,12.5vw,158px);aspect-ratio:1;margin:0 auto;
  background:linear-gradient(150deg,#ffffff 0%,#dceaf5 100%);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(29,74,122,.1);
  overflow:hidden;
}
/* The teardrop is a square rotated -45deg, so anything inside inherits that
   rotation. The photo counter-rotates to sit level again, and is scaled by √2 so
   the rotated square still covers the whole shape with no bare corners. */
.tp-mflow__dropArt{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:rotate(45deg) scale(1.42);
}
.tp-mflow__drop span{
  position:relative;z-index:1;
  transform:rotate(45deg);
  font-size:clamp(11px,1.05vw,14.5px);font-weight:800;letter-spacing:.06em;
  color:#fff;text-shadow:0 1px 10px rgba(6,14,24,.55);
}
.tp-mflow__tick{
  width:1px;height:clamp(16px,2.4vw,28px);margin:clamp(10px,1.4vw,16px) auto 0;
  background:repeating-linear-gradient(180deg,#9db9d1 0 3px,transparent 3px 6px);
}
.tp-mflow__midCap{
  margin:clamp(8px,1.2vw,12px) 0 0;
  font-size:12.5px;font-weight:700;color:var(--tp-navy);line-height:1.6;
}

/* Three benefit columns. Sits directly under the composition diagram on the
   white page, so the rule and icon plates are re-tinted for a white ground —
   the old rgba(255,255,255,.8) plate was invisible off the pale panel. */
/* Three benefit columns. MINECEL 에서 가로선으로 내려와 세 항목으로 갈라지는
   계통도 형태. 세로선 길이를 CSS 변수로 묶어 여백과 선이 항상 맞물리게 한다. */
.tp-feats{
  --tpFeatDrop:clamp(48px,6.5vw,96px);   /* MINECEL → 가로선 */
  --tpFeatRise:clamp(36px,4.5vw,56px);   /* 가로선 → 각 항목 */
  --tpFeatGap:clamp(9px,1vw,15px);       /* 선이 글자·아이콘에 닿지 않게 띄우는 여백 */
  position:relative;
  margin-top:var(--tpFeatDrop);padding-top:var(--tpFeatRise);
  /* --tpFeatW 는 원의 지름(tech-page.js 가 기록). 각 열이 그 폭을 갖고
     좌우 끝이 바깥 원과 맞아떨어진다. */
  display:grid;grid-template-columns:repeat(3,var(--tpFeatW,minmax(0,1fr)));
  justify-content:space-between;gap:clamp(20px,3vw,40px);
}
/* 가로선 — border-top 으로 두면 섹션 전체 폭을 가로질러 양 끝 항목 바깥으로
   삐져나온다. 첫 항목 중심에서 마지막 항목 중심까지만 긋는다.
   --tpFeatW 는 열 하나의 폭이므로 좌우로 그 절반씩 들여쓰면 정확히 맞는다. */
.tp-feats::after{
  content:"";position:absolute;top:0;height:1px;background:var(--tp-line);
  left:var(--tpFeatL, 16%);
  right:var(--tpFeatR, 16%);
}
/* MINECEL 아래에서 가로선까지 내려오는 세로선 */
.tp-feats::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  /* 위쪽을 띄워 카피("피부 컨디션 개선 …") 밑에 바짝 붙지 않게 한다 */
  top:calc(-1 * var(--tpFeatDrop) + var(--tpFeatGap));
  height:calc(var(--tpFeatDrop) - var(--tpFeatGap));
  width:1px;background:var(--tp-line);
}
/* 가로선에서 각 항목으로 내려가는 세로선 */
.tp-feat{position:relative;display:block;text-align:center;}
.tp-feat::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  /* 아래쪽을 띄워 아이콘 원에 바짝 붙지 않게 한다 */
  top:calc(-1 * var(--tpFeatRise));
  height:calc(var(--tpFeatRise) - var(--tpFeatGap));
  width:1px;background:var(--tp-line);
}
/* 원형 배경판을 없애고 아이콘 자체를 키웠다. 판이 있으면 아이콘이 그 안에
   갇혀 실제 크기가 작아 보이는데, 판을 빼면 같은 자리에서 훨씬 크게 쓸 수 있다. */
.tp-feat__ico{
  width:clamp(58px,6.6vw,86px);aspect-ratio:1;
  margin:0 auto clamp(16px,1.9vw,26px);
  display:flex;align-items:center;justify-content:center;
}
/* Tabler Icons(MIT) 원본은 stroke-width 2 로 그려졌다. 86px 로 키우면 7px 이 되어
   너무 두꺼우므로 0.72 로 낮춘다 — 86px 에서 약 2.6px, 58px 에서 약 1.7px.
   색은 라벨(진한 먹)보다 확실히 물러나도록 연한 청회색을 쓴다. */
.tp-feat__ico svg{width:100%;height:100%;fill:none;stroke:#93aec7;stroke-width:.72;
  stroke-linecap:round;stroke-linejoin:round;}
.tp-feat__h{margin:0;font-size:clamp(15px,1.25vw,21px);font-weight:800;color:var(--tp-ink);letter-spacing:-.01em;}

/* ---------- NCPP-EGF: 3장 카드 ----------
   .tp-feats 는 원형 아이콘 기반이라 사진 카드에는 맞지 않아 별도로 뒀다. */
.tp-egf{
  margin-top:clamp(56px,7.5vw,112px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.6vw,60px);
}
/* 4/3 은 위 메커니즘 섹션에 비해 덩어리가 작아 보였다. 정사각으로 키워
   섹션 자체의 무게를 다른 섹션과 맞춘다. */
.tp-egf__media{
  aspect-ratio:1/1;border-radius:5px;overflow:hidden;background:var(--tp-wash);
  margin-bottom:clamp(20px,2.3vw,32px);
}
/* 사진 자체에도 아주 느린 줌아웃을 걸어, 페이드업이 끝난 뒤에도 정지 컷처럼
   보이지 않게 한다. hover 확대와 충돌하지 않도록 img 가 아닌 래퍼에 준다. */
.tp-egf__media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1);}
.tp-egf__media.in img{transform:scale(1);}
.tp-egf__card:hover .tp-egf__media.in img{transform:scale(1.04);}
.tp-egf__h{
  margin:0 0 clamp(10px,1.1vw,16px);
  font-size:clamp(17px,1.45vw,25px);font-weight:800;letter-spacing:-.015em;color:var(--tp-ink);
}
.tp-egf__p{
  margin:0;font-size:clamp(14px,1.12vw,19px);line-height:1.8;color:#5b6875;
  letter-spacing:-.01em;word-break:keep-all;
}
@media (max-width:860px){
  .tp-egf{grid-template-columns:1fr;gap:clamp(28px,5vw,40px);}
}

/* ---------- HA 비교 (미네셀) ---------- */
.tp-ha{
  margin-top:clamp(44px,6vw,88px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,56px);
}
.tp-ha__t{
  margin:0 0 clamp(14px,1.6vw,22px);text-align:center;
  font-size:clamp(15px,1.25vw,21px);font-weight:800;color:var(--tp-ink);letter-spacing:-.015em;
}
.tp-ha__en{display:block;margin-top:4px;font-size:.82em;font-weight:600;color:var(--tp-mute);letter-spacing:0;}
.tp-ha__media{
  aspect-ratio:16/11;border-radius:5px;overflow:hidden;background:#0b1018;
}
.tp-ha__media img{width:100%;height:100%;object-fit:cover;display:block;}
.tp-ha__list{
  list-style:none;margin:clamp(16px,1.9vw,26px) 0 0;padding:0;text-align:center;
  font-size:clamp(13px,1.05vw,17px);line-height:1.85;color:#5b6875;letter-spacing:-.01em;
  word-break:keep-all;
}
/* 오른쪽(미네셀)만 먹색으로 올려 비교 대상이 아니라 결론임을 드러낸다 */
.tp-ha__col--hi .tp-ha__list{color:var(--tp-ink);font-weight:600;}

/* 하단 배지 3종 — 가로 구분선으로 나눈 한 줄 */
.tp-ha__badges{
  list-style:none;margin:clamp(34px,4.4vw,64px) 0 0;padding:clamp(18px,2vw,28px) 0;
  background:#fff;border-radius:4px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.tp-ha__badges li{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:clamp(4px,.6vw,10px) clamp(12px,1.4vw,22px);
  font-size:clamp(12.5px,1vw,16px);font-weight:700;color:var(--tp-ink);letter-spacing:-.01em;
  text-align:center;word-break:keep-all;
}
.tp-ha__badges li + li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1.6em;background:var(--tp-line);
}
/* 체크 표식 — 아이콘 파일 없이 SVG 배경으로 */
.tp-ha__badges li::after{
  content:"";order:-1;flex:0 0 auto;width:1.05em;height:1.05em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
@media (max-width:860px){
  .tp-ha{grid-template-columns:1fr;gap:clamp(28px,5vw,40px);}
  .tp-ha__badges{grid-template-columns:1fr;gap:14px;}
  .tp-ha__badges li + li::before{display:none;}
}

/* ---------- product callout ---------- */
.tp-product{
  background:var(--tp-wash);border-top:1px solid var(--tp-line);
  padding:clamp(44px,6.5vw,86px) clamp(20px,4vw,60px);
}
.tp-product__in{max-width:1440px;margin:0 auto;}
.tp-product__h{
  font-size:clamp(1.35rem,2.7vw,2.15rem);font-weight:800;letter-spacing:-.025em;
  color:var(--tp-ink);margin:0 0 clamp(20px,3vw,34px);
}
.tp-product__name{
  font-size:clamp(13.5px,1.15vw,15.5px);font-weight:800;color:var(--tp-navy);
  letter-spacing:-.01em;margin:0 0 12px;
}
.tp-product__spec{
  margin:0 0 8px;font-size:13px;font-weight:700;color:var(--tp-ink);line-height:1.7;
}
.tp-product__desc{margin:0;font-size:13px;line-height:1.75;color:var(--tp-mute);}
.tp-product__list{margin:14px 0 0;padding-left:18px;}
.tp-product__list li{
  font-size:13px;line-height:1.9;color:var(--tp-mute);list-style:disc;
}
.tp-product__btn{
  display:inline-flex;align-items:center;gap:14px;margin-top:clamp(22px,3vw,32px);
  background:#fff;color:var(--tp-ink);border:1px solid #d0d0d0;border-radius:2px;
  padding:13px 22px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.tp-product__btn i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.tp-product__btn:hover{background:#0E2A47;color:#fff;border-color:#0E2A47;}
.tp-product__btn:hover i{transform:translateX(4px);}

/* ---------- product (tp-pb) ----------
   The product photograph is the section's full-bleed backdrop rather than a
   column beside the copy, so the shot fills the band edge to edge. A one-sided
   wash keeps the left half light enough for the dark type while the right half
   of the photograph is left completely clear. Copy is live text, not baked into
   artwork, so it stays editable and searchable. */
.tp-pb{position:relative;overflow:hidden;isolation:isolate;}
/* base tint — shows through where the photo is pale, and covers the moment
   before it decodes */
.tp-pb::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:linear-gradient(102deg,#f6fafd 0%,#e7f1fa 58%,#dbeaf7 100%);
}
.tp-pb__bg{position:absolute;inset:0;z-index:-2;}
.tp-pb__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* the bottles sit low and right of centre in the source frame */
  object-position:62% 62%;
}
/* readability wash: opaque under the copy, gone by the time it reaches the
   product so the photograph is never veiled where it matters */
.tp-pb::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(240,246,252,.97) 0%,
    rgba(240,246,252,.94) 24%,
    rgba(240,246,252,.72) 44%,
    rgba(240,246,252,.28) 64%,
    rgba(240,246,252,0) 84%);
}
.tp-pb__in{
  position:relative;max-width:1440px;margin:0 auto;
  padding:clamp(72px,8.2vw,132px) clamp(20px,4vw,60px);
  min-height:clamp(400px,42vw,660px);
  display:grid;grid-template-columns:minmax(0,min(58%,880px));
  align-content:center;
}
.tp-pb__h{
  margin:0 0 clamp(16px,1.9vw,32px);
  font-size:clamp(18px,1.6vw,27px);font-weight:800;letter-spacing:-.02em;
  line-height:1.35;color:var(--tp-ink);
}
.tp-pb__name{
  margin:0;font-size:clamp(28px,3vw,52px);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;color:#16202b;
}
.tp-pb__spec{
  margin:clamp(20px,2.3vw,34px) 0 0;
  font-size:clamp(15px,1.35vw,23px);font-weight:500;color:#3f4b59;line-height:1.65;
}
.tp-pb__desc{
  margin:0;
  font-size:clamp(15px,1.35vw,23px);color:#5a6675;line-height:1.65;
}
.tp-pb__btn{
  display:inline-flex;align-items:center;gap:12px;justify-self:start;
  margin-top:clamp(22px,2.8vw,36px);
  background:var(--tp-navy);color:#fff;border:1px solid var(--tp-navy);border-radius:2px;
  padding:15px 30px;font-size:clamp(14px,1.15vw,19px);font-weight:700;letter-spacing:-.01em;
  text-decoration:none;transition:background .25s ease,color .25s ease;
}
.tp-pb__btn i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.tp-pb__btn:hover{background:transparent;color:var(--tp-navy);}
.tp-pb__btn:hover i{transform:translateX(4px);}
@media (max-width:900px){
  /* the wash has to cover the whole width once the copy spans it */
  .tp-pb__in{grid-template-columns:minmax(0,1fr);}
  .tp-pb::after{background:linear-gradient(180deg,
    rgba(240,246,252,.96) 0%,rgba(240,246,252,.9) 55%,rgba(240,246,252,.5) 100%);}
}

/* ---------- 8-Free ----------
   A pale card holding a 4x2 grid, hairline-ruled between cells. The rules are
   drawn with insets on each cell rather than borders on the grid, so no rule
   runs along the card's own edge. */
.tp-free__eyebrow{
  margin:0 0 clamp(14px,1.6vw,22px);
  font-size:clamp(11.5px,.92vw,15px);font-weight:700;letter-spacing:.06em;
  color:var(--tp-mute);text-transform:uppercase;
}
.tp-free__eyebrow span{margin:0 .35em;color:#c4ccd6;}
.tp-free__grid{
  list-style:none;margin:clamp(34px,4.6vw,64px) 0 0;padding:0;
  background:#f7f8f9;border-radius:4px;overflow:hidden;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.tp-free__cell{
  position:relative;
  padding:clamp(24px,3vw,44px) clamp(16px,2vw,30px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,1.5vw,22px);row-gap:2px;
  align-items:start;
}
/* vertical rule between columns, horizontal between the two rows */
.tp-free__cell:not(:nth-child(4n+1))::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:#e4e7ea;
}
.tp-free__cell:nth-child(n+5)::after{
  content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:#e4e7ea;
}
.tp-free__no{
  grid-column:2;
  font-size:clamp(11px,.88vw,14px);font-weight:700;letter-spacing:.04em;color:#9aa4b0;
}
.tp-free__ico{
  grid-column:1;grid-row:1 / span 3;
  width:clamp(40px,4.4vw,58px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}
.tp-free__ico svg{
  width:100%;height:100%;fill:none;stroke:#5f6b78;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.tp-free__en{
  grid-column:2;margin-top:6px;
  font-size:clamp(13px,1.08vw,18px);font-weight:600;color:var(--tp-ink);
  letter-spacing:-.01em;line-height:1.35;
}
.tp-free__kr{
  grid-column:2;margin-top:4px;
  font-size:clamp(11px,.9vw,14.5px);color:#98a2ad;line-height:1.5;
}
.tp-free__note{
  margin:clamp(30px,4vw,56px) 0 0;text-align:center;
  font-size:clamp(12.5px,1.02vw,17px);font-weight:700;color:var(--tp-ink);
}
@media (max-width:1100px){ .tp-free__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tp-free__cell:not(:nth-child(4n+1))::before{content:none;}
  .tp-free__cell:not(:nth-child(2n+1))::before{
    content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:#e4e7ea;}
  .tp-free__cell:nth-child(n+3)::after{
    content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:#e4e7ea;}
}
@media (max-width:620px){ .tp-free__grid{grid-template-columns:minmax(0,1fr);}
  .tp-free__cell::before{content:none !important;}
  .tp-free__cell:nth-child(n+2)::after{
    content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:#e4e7ea;}
}

/* ---------- reveal ---------- */
/* fade up; --tpd sets the running order within a section (0,1,2,3,4...) */
.tp [data-tp-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.72,.2,1);
  transition-delay:calc(var(--tpd,0) * .16s);}
.tp [data-tp-reveal].in{opacity:1;transform:none;}

@media (max-width:900px){
  .tp-hero__in{grid-template-columns:1fr;}
  .tp-hero__media{order:-1;aspect-ratio:16/9;}
  .tp-hero__eyebrow{margin-bottom:20px;}
  .tp-hero__lead{margin-top:28px;}
  .tp-mech__op{padding-bottom:0;transform:rotate(90deg);}
  .tp-mech__op svg{transform:rotate(0);}
}
@media (max-width:900px){
  /* stack the flow and turn the connector arrows upright */
  .tp-flow{grid-template-columns:1fr;gap:clamp(20px,4vw,32px) 0;}
  .tp-flow__arrow{padding-top:0;transform:rotate(90deg);justify-self:center;}
}
@media (max-width:900px){
  .tp-mflow{grid-template-columns:1fr;gap:clamp(18px,3.5vw,28px) 0;}
  .tp-mflow__arrow{transform:rotate(90deg);justify-self:center;}
  .tp-feats{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .tp-stats{grid-template-columns:1fr;}
  .tp-tabs__in{gap:22px;justify-content:space-between;}
  .tp-tabs--framed a{padding-left:14px;padding-right:14px;}
}
@media (max-width:900px){
    padding:clamp(40px,7vw,70px) clamp(20px,4vw,60px);}
}
@media (prefers-reduced-motion:reduce){
  .tp [data-tp-reveal]{opacity:1;transform:none;transition:none;}
  .tp-stat__arc{transition:none;}
  /* the section rise is intentionally left running — see tech-page.js */
}

/* ---------- 히어로 안의 기술 스위치 ----------
   상단 중분류 바를 되살리지 않고, 히어로 카피 맨 위에 세 기술을 두어
   지금 보고 있는 기술이 어디쯤인지와 이동 경로를 함께 보여준다. */
.tp-switch{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(6px,.7vw,10px);
  margin:0 0 clamp(52px,6.4vw,92px);}
.tp-switch a{display:inline-flex;align-items:center;
  padding:clamp(7px,.7vw,10px) clamp(14px,1.3vw,20px);
  border:1px solid #d5dce5;border-radius:999px;background:#fff;
  font-size:clamp(11.5px,.88vw,14px);font-weight:700;letter-spacing:.02em;
  color:#3a4658;text-decoration:none;white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background .2s ease;}
.tp-switch a:hover{color:var(--tp-ink);border-color:#9aa4b0;background:#f5f7fa;}
.tp-switch a.on{background:var(--tp-ink,#101010);border-color:var(--tp-ink,#101010);color:#fff;
  pointer-events:none;}
@media (max-width:560px){ .tp-switch{gap:6px;} }