/* jstech R2 · 배치만. 색 · 글 · 간격 값은 디자인 시스템 변수만 쓴다. */
body { background: var(--jt-color-bg-stage); }
main { overflow-x: clip; }
.r2-sec { padding: var(--jt-space-32) 0; }
.r2-sec--light { background: var(--jt-color-bg-page); color: var(--jt-color-text-primary); }
.r2-sec--raised { background: var(--jt-color-bg-stage-raised); }
@media (max-width: 639px) { .r2-sec { padding: var(--jt-space-20) 0; } }
.r2-head { display: grid; gap: var(--jt-space-3); margin-bottom: var(--jt-space-12); max-width: 880px; }
.r2-head .jt-eyebrow { margin: 0; }
.r2-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.r2-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--jt-space-4); margin-bottom: var(--jt-space-10); }
.r2-row .r2-head { margin: 0; }

/* ---------- 홈 히어로 ---------- */
.h-hero { position: relative; min-height: max(100svh, 720px); display: grid; grid-template-rows: auto 1fr; padding-top: 140px; }
.h-hero__text { display: grid; justify-items: center; text-align: center; gap: var(--jt-space-5); position: relative; z-index: 1; }
.h-hero__text .jt-eyebrow { margin: 0; }
.h-hero__lead { max-width: 620px; }
.h-hero__visual { height: clamp(300px, 46vw, 620px); margin-top: calc(-1 * var(--jt-space-6)); position: relative; z-index: 0; }
.h-hero__glow { position: absolute; inset: auto 0 0; height: 60%; background: radial-gradient(60% 70% at 50% 75%, color-mix(in srgb, var(--jt-color-accent-stage) 16%, transparent), transparent 70%); pointer-events: none; }
@media (max-width: 639px) { .h-hero { padding-top: 112px; } .h-hero__visual { margin-top: 0; } }

/* ---------- 회사 ---------- */
.h-company { display: grid; gap: var(--jt-space-16); }
@media (min-width: 960px) { .h-company { grid-template-columns: 1.25fr 1fr; align-items: end; } }
.h-statement { margin: 0; font-size: clamp(var(--jt-font-size-26), 3.6vw, var(--jt-font-size-46)); line-height: 1.25; letter-spacing: var(--jt-font-tracking-tight); font-weight: var(--jt-font-weight-semibold); text-wrap: pretty; }
.h-statement em { font-style: normal; color: var(--jt-color-text-link); }
.h-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jt-space-8) var(--jt-space-6); }
.h-stats .jt-stat { border-top: 1px solid var(--jt-color-border-default); padding-top: var(--jt-space-4); }

/* ---------- 금속과 금속 사이(단면 그림) ---------- */
.h-rod { display: grid; gap: var(--jt-space-12); align-items: center; }
@media (min-width: 960px) { .h-rod { grid-template-columns: 1fr 1.1fr; } }
.h-rod__fig { margin: 0; aspect-ratio: 4 / 3; }
.h-rod__fig svg { width: 100%; height: 100%; }
.h-rod__list { list-style: none; margin: var(--jt-space-8) 0 0; padding: 0; display: grid; gap: var(--jt-space-4); }
.h-rod__list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--jt-space-3); align-items: start; padding-top: var(--jt-space-4); border-top: 1px solid var(--jt-color-border-stage); }
.h-rod__list { counter-reset: step; }
.h-rod__list li { counter-increment: step; }
.h-rod__list li::before { content: counter(step, decimal-leading-zero); content: counter(step, decimal-leading-zero) / ""; font-size: var(--jt-font-size-12); font-weight: var(--jt-font-weight-bold); color: var(--jt-color-text-on-stage-accent); padding-top: 4px; }
.h-rod__k { font-weight: var(--jt-font-weight-semibold); }
.h-rod__v { color: var(--jt-color-text-inverse-secondary); font-size: var(--jt-font-size-14); }
/* 그림 안의 띠가 스크롤로 그려진다(움직임 줄이기면 처음부터 다 보임) */
.rod-band { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }

/* ---------- 제품 여섯 ---------- */
.h-products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jt-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .h-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-product { display: grid; grid-template-rows: 1fr auto; min-height: 300px; border-radius: var(--jt-radius-xl); background: var(--jt-color-bg-stage-card); color: inherit; text-decoration: none; overflow: hidden; transition: background-color var(--jt-motion-hover) var(--jt-easing-standard); }
.h-product:hover { background: var(--jt-color-border-stage); }
.h-product img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; transition: transform var(--jt-motion-enter) var(--jt-easing-standard); }
.h-product:hover img { transform: scale(1.04); }
.h-product__label { display: flex; align-items: center; justify-content: space-between; gap: var(--jt-space-2); padding: var(--jt-space-4) var(--jt-space-5) var(--jt-space-5); }
.h-product__name { font-weight: var(--jt-font-weight-semibold); font-size: var(--jt-font-size-18); }
.h-product--flag .h-product__name::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--jt-space-2); border-radius: 50%; background: var(--jt-color-accent-stage); vertical-align: middle; }
@media (max-width: 639px) { .h-product { min-height: 220px; } .h-product__label { padding: var(--jt-space-3) var(--jt-space-4) var(--jt-space-4); } .h-product__name { font-size: var(--jt-font-size-16); } }

/* ---------- 적용 분야(생성 이미지) ---------- */
.h-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jt-space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .h-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .h-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-field { border-radius: var(--jt-radius-lg); overflow: hidden; background: var(--jt-color-bg-stage-card); display: grid; grid-template-rows: auto 1fr; }
.h-field__img { aspect-ratio: 3 / 2; overflow: hidden; }
.h-field__img img { width: 100%; height: 100%; object-fit: cover; }
.h-field__text { padding: var(--jt-space-4) var(--jt-space-5) var(--jt-space-5); display: grid; gap: var(--jt-space-2); align-content: start; }
.h-field__name { font-weight: var(--jt-font-weight-semibold); font-size: var(--jt-font-size-18); }
.h-field__desc { margin: 0; font-size: var(--jt-font-size-14); line-height: var(--jt-font-leading-body); color: var(--jt-color-text-inverse-secondary); }

/* ---------- 수출 ---------- */
.h-global { display: grid; gap: var(--jt-space-10); align-items: end; }
@media (min-width: 960px) { .h-global { grid-template-columns: auto 1fr; gap: var(--jt-space-20); } }
.h-global__num { font-size: clamp(7rem, 22vw, 16rem); font-weight: var(--jt-font-weight-bold); letter-spacing: -0.06em; line-height: 0.85; margin: 0; }
.h-global__num span { color: var(--jt-color-text-on-stage-accent); }
.h-countries { list-style: none; margin: var(--jt-space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--jt-space-2); }
.h-countries li { padding: var(--jt-space-2) var(--jt-space-5); border: 1px solid var(--jt-color-border-inverse); border-radius: var(--jt-radius-pill); font-weight: var(--jt-font-weight-semibold); }

/* ---------- 마지막 행동 띠 ---------- */
.r2-cta { text-align: center; display: grid; justify-items: center; gap: var(--jt-space-6); }
.r2-cta .jt-actions { justify-content: center; }

/* ===================== 제품 쪽 ===================== */
.p-hero { position: relative; height: 210vh; }
.p-hero__pin { position: sticky; top: 0; height: 100svh; min-height: 640px; display: grid; grid-template-rows: auto 1fr; padding-top: 136px; overflow: hidden; }
.p-hero__text { display: grid; justify-items: center; text-align: center; gap: var(--jt-space-3); position: relative; z-index: 1; }
.p-hero__text .jt-eyebrow { margin: 0; }
.p-hero__sub { opacity: calc(var(--p, 0) * 2.2 - 0.6); transform: translateY(calc((1 - var(--p, 0)) * 12px)); }
/* 제품 히어로: 실사 턴테이블 영상(Higgsfield) · J3-13 — 판은 늘 아래 행을 좌우 끝까지 채운다(배치 · 폭 바꿈 0).
   보이는 창만 clip-path inset + 둥근 모로 줄였다 넓힌다: --p 0 → 컨테이너 크기(가로 --w · 세로 --w × 9/16, 62svh 넘지 않음) · --p 0.6 에서 꽉 참(세제곱 감속) · 그 뒤 꽉 찬 채.
   폭은 핀 상자 기준(cqw)이라 세로 스크롤바 폭에 흔들리지 않는다. 움직임 줄임이면 처음부터 꽉 참(r2.js 가 --p 1 · 아래 CSS 도 창을 걷는다) */
.p-hero__pin { container-type: inline-size; }
.p-hero__media {
  --q: min(1, var(--p, 0) / 0.6);
  --k: calc((1 - var(--q)) * (1 - var(--q)) * (1 - var(--q)));
  --w: min(100cqw - 2 * var(--jt-space-4), var(--jt-size-container));
  --h: min(var(--w) * 9 / 16, 62svh);
  --a: 0.5;
  align-self: stretch; width: 100%; min-height: 0; margin: var(--jt-space-6) 0 0; overflow: hidden; background: var(--jt-color-neutral-950);
  clip-path: inset(max(0%, (100% - var(--h)) * var(--k) * var(--a)) max(0%, (100% - var(--w)) / 2 * var(--k)) max(0%, (100% - var(--h)) * var(--k) * (1 - var(--a))) round calc(var(--jt-radius-xl) * var(--k)));
}
@media (prefers-reduced-motion: reduce) { .p-hero__media { clip-path: none; } }
.p-hero__media > video { object-fit: cover; filter: none; }
.p-hero__cta { position: absolute; left: 0; right: 0; bottom: var(--jt-space-10); display: flex; justify-content: center; z-index: 1; }
/* 좁은 화면(J3-13b): 고정 판을 걷는다 — 판이 좌우 16px 틈에서 꽉 차는 정도라 스크롤 효과가 거의 없는데 고정 구간이 판과 단추 사이 · 아래에 빈 화면을 만들었다.
   단추는 판 바로 아래 · 처음부터 끝 상태(고정 판이 없으면 --p 는 0 에 머문다 → 부제 · 판을 처음부터 다 보임) */
@media (max-width: 639px) {
  .p-hero { height: auto; }
  .p-hero__pin { position: relative; height: auto; min-height: 0; padding-top: 124px; padding-bottom: var(--jt-space-10); }
  .p-hero__cta { position: static; margin-top: var(--jt-space-6); }
  .p-hero__sub { opacity: 1; transform: none; }
}

.p-chapter__open { padding: var(--jt-space-32) 0 var(--jt-space-12); }
.p-chapter__open .jt-eyebrow { margin: 0 0 var(--jt-space-3); }
.p-feature { display: grid; gap: var(--jt-space-10); align-items: center; padding-bottom: var(--jt-space-32); }
@media (min-width: 960px) { .p-feature { grid-template-columns: 1.15fr 1fr; gap: var(--jt-space-16); } .p-feature--flip > :first-child { order: 2; } }
.p-feature__media { aspect-ratio: 1 / 1; max-height: 620px; border-radius: var(--jt-radius-xl); background: radial-gradient(70% 60% at 50% 55%, var(--jt-color-bg-stage-card), var(--jt-color-bg-stage) 75%); padding: var(--jt-space-6); }
.p-feature__nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jt-space-8) var(--jt-space-6); margin-top: var(--jt-space-8); }
.p-feature__nums .jt-stat { border-top: 1px solid var(--jt-color-border-stage); padding-top: var(--jt-space-4); }
.p-feature__nums .jt-stat__value { font-size: clamp(var(--jt-font-size-34), 4vw, var(--jt-font-size-46)); }
.p-feature .jt-lead { margin-top: var(--jt-space-4); }

.p-lineup { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jt-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .p-lineup { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.p-lineup li { display: grid; justify-items: center; text-align: center; gap: var(--jt-space-2); }
.p-lineup img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.p-lineup .jt-btn { margin-top: var(--jt-space-1); }
.p-lineup__name { font-weight: var(--jt-font-weight-semibold); }

.p-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jt-space-6) var(--jt-space-8); }
.p-compare__col { display: grid; gap: var(--jt-space-6); align-content: start; }
.p-compare__col .jt-select { background: var(--jt-color-bg-stage-card); color: var(--jt-color-text-inverse); border-color: var(--jt-color-border-inverse); font-weight: var(--jt-font-weight-semibold); }
.p-compare__col .jt-stat { border-top: 1px solid var(--jt-color-border-stage); padding-top: var(--jt-space-4); }
.p-compare__col .jt-stat__value { font-size: clamp(var(--jt-font-size-26), 4vw, var(--jt-font-size-46)); }
.p-swatch { display: block; height: 6px; border-radius: var(--jt-radius-pill); }

.p-specs summary { list-style: none; cursor: pointer; }
.p-specs summary::-webkit-details-marker { display: none; }
.p-specs .jt-table-wrap { margin-top: var(--jt-space-6); }
.p-notes { margin: var(--jt-space-10) 0 0; padding-left: var(--jt-space-5); display: grid; gap: var(--jt-space-2); max-width: 820px; }
@media (max-width: 639px) { .p-hero__media { align-self: start; aspect-ratio: 16 / 9; margin-top: var(--jt-space-10); clip-path: none; } } /* 좁은 화면: 판은 좌우 꽉 · 16:9(영상이 확대되지 않게) — 처음부터 거의 꽉이라 둥근 모 · 좌우 틈만 줄어든다(J3-13) */